aidev/goldenChart
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

실시간 차트 보조지표 탭 문제 수정

Browse Source
This commit is contained in:
Macbook
2026-05-28 01:26:53 +09:00
parent 4f6694b206
commit 98dfb3613c
19 changed files with 801 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.css
+38
View File
@@ -1514,6 +1514,14 @@ html.theme-blue {
gap: 10px;
transition: background 0.1s;
}
.ind-panel-item--drag-over {
background: #2962ff14;
outline: 1px solid rgba(41, 98, 255, 0.35);
outline-offset: -1px;
}
.ind-panel-drag-handle {
margin: 0 0 0 -2px;
}
.ind-panel-item:hover { background: var(--bg3); }
.ind-panel-item.active { background: #2962ff0e; }
.ind-panel-item-info {
@@ -9450,6 +9458,36 @@ html.theme-blue {
border-radius: 8px;
overflow: hidden;
}
.stg-ind-card.ind-settings-row--drag-over,
.ibsm-card.ind-settings-row--drag-over {
border-color: var(--accent, #7aa2f7);
box-shadow: 0 0 0 1px rgba(122, 162, 247, 0.35);
}
.ind-settings-drag-handle {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin: 0 2px 0 -4px;
padding: 0;
border: none;
border-radius: 4px;
background: transparent;
color: var(--text-muted, #888);
font-size: 14px;
line-height: 1;
cursor: grab;
touch-action: none;
}
.ind-settings-drag-handle:hover {
color: var(--text, #ccc);
background: rgba(255, 255, 255, 0.06);
}
.ind-settings-drag-handle:active {
cursor: grabbing;
}
.stg-ind-card--expanded {
border-color: rgba(122, 162, 247, 0.35);
}
frontend/src/App.tsx
+40 -12
View File
@@ -56,6 +56,10 @@ import {
splitIndicatorPane,
replaceIndicatorConfigsFromTypes,
} from './utils/indicatorPaneMerge';
import {
getOrderedSettingsIndicatorTypes,
sortIndicatorsByTypeOrder,
} from './utils/indicatorListOrder';
import { useAppSettings } from './hooks/useAppSettings';
import { clampVirtualTargetMax } from './utils/virtualTargetLimits';
import { resolveTrendSearchAppSettings } from './utils/trendSearchAppSettings';
@@ -1158,11 +1162,12 @@ function App() {
if (slot0.mode) setMode(slot0.mode as ChartMode);
if (slot0.logScale != null) setLogScale(Boolean(slot0.logScale));
if (Array.isArray(slot0.indicators)) {
setIndicators((slot0.indicators as IndicatorConfig[]).map(ind => {
const loaded = (slot0.indicators as IndicatorConfig[]).map(ind => {
if (ind.type === 'SMA') return normalizeSmaConfig(ind);
if (ind.type === 'IchimokuCloud') return normalizeIchimokuConfig(ind);
return ind;
}));
});
setIndicators(sortIndicatorsByTypeOrder(loaded));
}
if (Array.isArray(slot0.drawings)) setDrawings(slot0.drawings as Drawing[]);
if (slot0.drawingsLocked != null) setDrawingsLocked(Boolean(slot0.drawingsLocked));
@@ -1178,11 +1183,13 @@ function App() {
symbol: s.symbol as string | undefined,
timeframe: s.timeframe as Timeframe | undefined,
indicators: Array.isArray(s.indicators)
? (s.indicators as IndicatorConfig[]).map(ind => {
if (ind.type === 'SMA') return normalizeSmaConfig(ind);
if (ind.type === 'IchimokuCloud') return normalizeIchimokuConfig(ind);
return ind;
})
? sortIndicatorsByTypeOrder(
(s.indicators as IndicatorConfig[]).map(ind => {
if (ind.type === 'SMA') return normalizeSmaConfig(ind);
if (ind.type === 'IchimokuCloud') return normalizeIchimokuConfig(ind);
return ind;
}),
)
: undefined,
mainChartStyle: s.mainChartStyle as MainChartStyle | undefined,
};
@@ -1347,6 +1354,20 @@ function App() {
}
}, [layoutDef.count, activeSlot]);
/** 설정 목록 순서 변경 → 차트 pane 순서 동기화 */
const handleIndicatorListOrderChange = useCallback((orderedTypes: string[]) => {
const resort = (inds: IndicatorConfig[]) => sortIndicatorsByTypeOrder(inds, orderedTypes);
if (layoutDef.count > 1) {
const slotRef = slotRefs.current[activeSlot];
if (!slotRef) return;
const next = resort(slotRef.getIndicators());
slotRef.setIndicators(next);
setActiveSlotIndicators(next.map(i => ({ ...i })));
} else {
setIndicators(prev => resort(prev));
}
}, [layoutDef.count, activeSlot]);
const handleAddIndicator = useCallback((type: string, fromConfig?: IndicatorConfig) => {
if (layoutDef.count > 1) {
const slotRef = slotRefs.current[activeSlot];
@@ -1380,22 +1401,27 @@ function App() {
} else if (type === 'IchimokuCloud') {
cfg = normalizeIchimokuConfig(cfg);
}
return [...prev, cfg];
return sortIndicatorsByTypeOrder([...prev, cfg]);
});
}, [layoutDef.count, activeSlot, getParams, getVisualConfig]);
/** 지표 추가 팝업 — 탭 전체 추가 (기존 보조지표 제거 후 탭 지표만 적용) */
/** 지표 추가 팝업 — 탭 전체 추가 (탭 목록 순서 유지) */
const handleAddIndicators = useCallback((types: string[]) => {
if (!types.length) return;
const orderedTypes = types.filter(t => getIndicatorDef(t));
if (orderedTypes.length === 0) return;
if (layoutDef.count > 1) {
const slotRef = slotRefs.current[activeSlot];
if (slotRef) {
slotRef.addIndicators(types);
slotRef.addIndicators(orderedTypes);
return;
}
}
setIndicators(
replaceIndicatorConfigsFromTypes(types, getParams, getVisualConfig, newIndId),
sortIndicatorsByTypeOrder(
replaceIndicatorConfigsFromTypes(orderedTypes, getParams, getVisualConfig, newIndId),
orderedTypes,
),
);
}, [layoutDef.count, activeSlot, getParams, getVisualConfig]);
@@ -1543,7 +1569,7 @@ function App() {
allConfigs: IndicatorConfig[];
}) => {
const { chartIndicators, allConfigs } = result;
applyChartIndicators(chartIndicators);
applyChartIndicators(sortIndicatorsByTypeOrder(chartIndicators));
allConfigs.forEach(ind => {
saveParams(ind.type, ind.params);
saveVisual(ind.type, ind.plots, ind.hlines, ind.cloudColors, ind.bandBackground);
@@ -1784,6 +1810,7 @@ function App() {
chartIndicators={bulkSettingsIndicators}
onAddIndicatorToChart={handleAddIndicator}
onRemoveIndicatorFromChart={handleRemoveByType}
onIndicatorListOrderChange={handleIndicatorListOrderChange}
chartSeriesPriceLabels={chartSeriesPriceLabels}
onChartSeriesPriceLabels={v => {
saveAppDef({ chartSeriesPriceLabels: v });
@@ -1898,6 +1925,7 @@ function App() {
onScrollToNow={() => managerRef.current?.scrollToRealTime()}
onAddIndicator={handleAddIndicator}
onAddIndicators={handleAddIndicators}
onIndicatorOrderChange={handleIndicatorListOrderChange}
onRemoveByType={handleRemoveByType}
onOpenBulkIndicatorSettings={() => setShowBulkIndSettings(true)}
onOpenIndicatorSettings={handleOpenIndicatorSettings}
frontend/src/components/ChartSlot.tsx
+6 -2
View File
@@ -36,6 +36,7 @@ import {
splitIndicatorPane,
replaceIndicatorConfigsFromTypes,
} from '../utils/indicatorPaneMerge';
import { sortIndicatorsByTypeOrder } from '../utils/indicatorListOrder';
import { saveSlot } from '../utils/backendApi';
import type {
OHLCVBar, ChartType, Theme, Timeframe,
@@ -279,13 +280,16 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
} else if (type === 'IchimokuCloud') {
cfg = normalizeIchimokuConfig(cfg);
}
return [...prev, cfg];
return sortIndicatorsByTypeOrder([...prev, cfg]);
});
},
addIndicators: (types: string[]) => {
if (!types.length) return;
setIndicators(
replaceIndicatorConfigsFromTypes(types, getParams, getVisualConfig, newIndId),
sortIndicatorsByTypeOrder(
replaceIndicatorConfigsFromTypes(types, getParams, getVisualConfig, newIndId),
types,
),
);
},
removeIndicatorByType: (type: string) => {
frontend/src/components/IndicatorMainDefaultsPanel.tsx
+46 -4
View File
@@ -17,6 +17,7 @@ import {
import IndicatorSettingsListSearch from './IndicatorSettingsListSearch';
import IndicatorSettingsListRow from './IndicatorSettingsListRow';
import { MAIN_INDICATOR_TYPES } from '../utils/indicatorMainTab';
import { useIndicatorListOrder } from '../hooks/useIndicatorListOrder';
export interface IndicatorSaveUiState {
save: () => Promise<void>;
@@ -48,6 +49,8 @@ export interface IndicatorMainDefaultsPanelProps {
onSaveUiState?: (state: IndicatorSaveUiState | null) => void;
/** DB 로드 완료·저장 후 재로드 트리거 */
settingsRevision?: number;
/** 목록 순서 변경 시 차트 보조지표 순서 동기화 */
onListOrderChange?: (orderedTypes: string[]) => void;
}
const ALL_TYPES = getSettingsIndicatorTypes();
@@ -77,8 +80,12 @@ const IndicatorMainDefaultsPanel: React.FC<IndicatorMainDefaultsPanelProps> = ({
saveAllDefaults,
onSaveUiState,
settingsRevision = 0,
onListOrderChange,
}) => {
const onChartTypes = useMemo(() => new Set(chartIndicators.map(i => i.type)), [chartIndicators]);
const { listOrder, moveType } = useIndicatorListOrder(onListOrderChange);
const [draggingType, setDraggingType] = useState<string | null>(null);
const [dragOverType, setDragOverType] = useState<string | null>(null);
const [expandedTypes, setExpandedTypes] = useState<Set<string>>(() => new Set());
const [configs, setConfigs] = useState<Record<string, IndicatorConfig>>({});
const [baselineFp, setBaselineFp] = useState('');
@@ -97,14 +104,23 @@ const IndicatorMainDefaultsPanel: React.FC<IndicatorMainDefaultsPanelProps> = ({
reloadFromDb();
}, [reloadFromDb, settingsRevision]);
useEffect(() => {
const clearDrag = () => {
setDraggingType(null);
setDragOverType(null);
};
document.addEventListener('dragend', clearDrag);
return () => document.removeEventListener('dragend', clearDrag);
}, []);
const dirty = useMemo(
() => baselineFp !== '' && fingerprintMap(configs) !== baselineFp,
[configs, baselineFp],
);
const filtered = useMemo(
() => filterSettingsIndicatorTypes(ALL_TYPES, search),
[search],
() => filterSettingsIndicatorTypes(listOrder, search),
[listOrder, search],
);
const { main: filteredMain, other: filteredOther } = useMemo(
() => partitionFilteredTypes(filtered),
@@ -184,6 +200,8 @@ const IndicatorMainDefaultsPanel: React.FC<IndicatorMainDefaultsPanelProps> = ({
return () => onSaveUiState(null);
}, [onSaveUiState, handleSaveAll, dirty, saving, saveMessage]);
const canReorder = !search.trim();
const renderRows = (types: string[]) => types.map(type => {
const cfg = configs[type];
if (!cfg) return null;
@@ -195,6 +213,29 @@ const IndicatorMainDefaultsPanel: React.FC<IndicatorMainDefaultsPanelProps> = ({
enabled={onChartTypes.has(type)}
expanded={expandedTypes.has(type)}
variant="settings"
draggable={canReorder}
isDragOver={canReorder && dragOverType === type && draggingType !== type}
onDragHandleStart={e => {
setDraggingType(type);
e.dataTransfer.setData('text/indicator-type', type);
e.dataTransfer.effectAllowed = 'move';
}}
onDragOver={e => {
if (!draggingType || draggingType === type) return;
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
setDragOverType(type);
}}
onDragLeave={() => {
if (dragOverType === type) setDragOverType(null);
}}
onDrop={e => {
e.preventDefault();
const from = e.dataTransfer.getData('text/indicator-type') || draggingType;
if (from && from !== type) moveType(from, type, 'before');
setDraggingType(null);
setDragOverType(null);
}}
onToggleExpand={() => toggleExpand(type)}
onToggleEnabled={on => handleToggleChart(type, on)}
onChange={updated => handleConfigChange(type, updated)}
@@ -208,7 +249,8 @@ const IndicatorMainDefaultsPanel: React.FC<IndicatorMainDefaultsPanelProps> = ({
<div className="stg-ind-intro">
<p>
지표 추가 팝업 <strong>Main</strong> 탭 {MAIN_INDICATOR_TYPES.length}종을 상단에 두었고, 그 아래에 등록된 모든 보조지표가 있습니다.
우측 스위치로 차트에 바로 추가·제거할 수 있습니다. 파라미터·색상을 변경한 뒤 <strong>상단 저장</strong> 버튼을 눌러 DB에 반영하세요.
우측 스위치로 차트에 바로 추가·제거할 수 있습니다. <strong>⠿</strong> 핸들로 목록 순서를 바꿀 수 있으며, 차트에 표시되는 보조지표 pane 순서도 이 목록을 따릅니다.
파라미터·색상을 변경한 뒤 <strong>상단 저장</strong> 버튼을 눌러 DB에 반영하세요.
</p>
<button type="button" className="stg-ind-reset-all" onClick={handleResetAll}>
전체 기본값 복원
@@ -218,7 +260,7 @@ const IndicatorMainDefaultsPanel: React.FC<IndicatorMainDefaultsPanelProps> = ({
<IndicatorSettingsListSearch
value={search}
onChange={setSearch}
totalCount={ALL_TYPES.length}
totalCount={listOrder.length}
filteredCount={filtered.length}
className="stg-ind-search-block"
/>
frontend/src/components/IndicatorSettingsListRow.tsx
+34 -3
View File
@@ -15,6 +15,13 @@ export interface IndicatorSettingsListRowProps {
onToggleEnabled: (enabled: boolean) => void;
onChange: (updated: IndicatorConfig) => void;
onRowDefaults?: () => void;
/** 목록 순서 드래그 */
draggable?: boolean;
isDragOver?: boolean;
onDragHandleStart?: (e: React.DragEvent) => void;
onDragOver?: (e: React.DragEvent) => void;
onDragLeave?: () => void;
onDrop?: (e: React.DragEvent) => void;
}
const IndicatorSettingsListRow: React.FC<IndicatorSettingsListRowProps> = ({
@@ -28,14 +35,20 @@ const IndicatorSettingsListRow: React.FC<IndicatorSettingsListRowProps> = ({
onToggleEnabled,
onChange,
onRowDefaults,
draggable = false,
isDragOver = false,
onDragHandleStart,
onDragOver,
onDragLeave,
onDrop,
}) => {
const labels = getIndicatorListLabels(type);
const def = getIndicatorDef(type);
const cardClass =
variant === 'bulk'
? `ibsm-card ibsm-main-row${enabled ? ' ibsm-main-row--active' : ''}${expanded ? ' ibsm-card-expanded' : ''}`
: `stg-ind-card${enabled ? ' stg-ind-card--on-chart' : ''}${expanded ? ' stg-ind-card--expanded' : ''}`;
? `ibsm-card ibsm-main-row${enabled ? ' ibsm-main-row--active' : ''}${expanded ? ' ibsm-card-expanded' : ''}${isDragOver ? ' ind-settings-row--drag-over' : ''}`
: `stg-ind-card${enabled ? ' stg-ind-card--on-chart' : ''}${expanded ? ' stg-ind-card--expanded' : ''}${isDragOver ? ' ind-settings-row--drag-over' : ''}`;
const headClass = variant === 'bulk' ? 'ibsm-card-main ibsm-main-row-head' : 'stg-ind-card-head';
const infoClass = variant === 'bulk' ? 'ibsm-main-row-info' : 'stg-ind-card-titles';
@@ -48,8 +61,26 @@ const IndicatorSettingsListRow: React.FC<IndicatorSettingsListRowProps> = ({
const expandWrapClass = variant === 'bulk' ? 'ibsm-card-expand' : 'stg-ind-card-body';
return (
<div className={cardClass}>
<div
className={cardClass}
onDragOver={draggable ? onDragOver : undefined}
onDragLeave={draggable ? onDragLeave : undefined}
onDrop={draggable ? onDrop : undefined}
>
<div className={headClass}>
{draggable && (
<button
type="button"
className="ind-settings-drag-handle"
draggable
title="드래그하여 순서 변경"
aria-label="순서 변경"
onDragStart={onDragHandleStart}
onClick={e => e.stopPropagation()}
>
⠿
</button>
)}
<div className={infoClass}>
<span className={koClass}>{labels.ko}</span>
<span className={enClass}>{labels.en}</span>
frontend/src/components/PaneLegend.tsx
+67 -106
View File
@@ -33,42 +33,6 @@ interface PaneItem {
const MIN_SUB_PANE_HEIGHT = 12;
interface DomPaneLayout {
topY: number;
height: number;
}
/**
* LWC 테이블 DOM 에서 보조지표 pane 행만 읽음 (pane index 무관).
* orphan 빈 pane 행이 있으면 제외하고 하단 expectCount 개만 사용.
*/
function getDomSubIndicatorLayouts(
containerEl: HTMLElement,
expectCount: number,
): DomPaneLayout[] {
const containerRect = containerEl.getBoundingClientRect();
const rows = Array.from(containerEl.querySelectorAll('tr'))
.map(tr => tr.getBoundingClientRect())
.filter(rect => rect.height > MIN_SUB_PANE_HEIGHT)
.sort((a, b) => a.top - b.top);
// pane 0=캔들(첫 행). 둘째 행이 낮으면 거래량 pane → 보조지표는 그 다음부터
let startIdx = 1;
if (rows.length > 1 && rows[1].height < Math.min(100, rows[0].height * 0.35)) {
startIdx = 2;
}
let subs = rows.slice(startIdx).map(rect => ({
topY: Math.round(rect.top - containerRect.top),
height: Math.round(rect.height),
}));
if (expectCount > 0 && subs.length > expectCount) {
subs = subs.slice(subs.length - expectCount);
}
return subs;
}
interface PaneCapture {
dataUrl: string;
cssWidth: number;
@@ -247,88 +211,80 @@ function fillMissingLayoutsByPaneIndex(
}
}
/** DOM 행 중 paneIndex 레이아웃 topY 와 가장 가까운 행 선택 */
function fillMissingLayoutsFromDom(
/**
* 실제 시리즈가 붙은 sub-pane 만으로 좌표 보강 (orphan 빈 pane 제외).
* paneIndex 미등록(-1)·탭 일괄 교체 직후에도 레이블 위치를 맞춘다.
*/
function fillMissingLayoutsFromActiveSubPanes(
items: PaneItem[],
containerEl: HTMLElement,
paneLayouts: Array<{ paneIndex: number; topY: number; height: number }>,
subLayouts: Array<{ paneIndex: number; topY: number; height: number }>,
): void {
const missing = items.filter(i => i.layoutTopY == null && i.paneIndex >= 2);
if (subLayouts.length === 0) return;
const missing = items.filter(i => i.layoutTopY == null);
if (missing.length === 0) return;
const domSubs = getDomSubIndicatorLayouts(containerEl, missing.length);
if (domSubs.length === 0) return;
const usedDom = new Set<number>();
const usedPane = new Set<number>();
const sorted = [...missing].sort((a, b) => a.paneIndex - b.paneIndex);
for (const item of sorted) {
const ref = layoutForPaneIndex(item.paneIndex, paneLayouts);
let bestIdx = -1;
let bestDist = Infinity;
for (let i = 0; i < domSubs.length; i++) {
if (usedDom.has(i)) continue;
const dist = ref
? Math.abs(domSubs[i].topY - ref.topY)
: domSubs[i].topY;
if (dist < bestDist) {
bestDist = dist;
bestIdx = i;
}
}
if (bestIdx < 0) continue;
if (ref && bestDist > 96) continue;
usedDom.add(bestIdx);
applyPaneLayoutToItem(item, domSubs[bestIdx]);
if (item.paneIndex < 2) continue;
const lay = subLayouts.find(l => l.paneIndex === item.paneIndex && !usedPane.has(l.paneIndex));
if (!lay) continue;
applyPaneLayoutToItem(item, lay);
usedPane.add(lay.paneIndex);
}
}
function buildPaneItems(
manager: ChartManager,
containerEl: HTMLElement | null,
indicators: IndicatorConfig[],
optPaneMap?: Map<string, number>,
): PaneItem[] {
const paneMap = new Map(optPaneMap ?? []);
for (const info of manager.getIndicatorPaneInfo()) {
paneMap.set(info.id, info.paneIndex);
}
const wantedIds = new Set(
indicators
.filter(ind => {
const def = getIndicatorDef(ind.type);
return def && !def.overlay && !def.returnsMarkers;
})
.map(ind => ind.id),
);
// ChartManager 에 실제 로드된 지표만 — React state 만 있고 pane 미부착인 항목 제외
const items: PaneItem[] = [];
for (const ind of indicators) {
for (const info of manager.getIndicatorPaneInfo()) {
if (!wantedIds.has(info.id)) continue;
const ind = info.config;
const def = getIndicatorDef(ind.type);
if (!def || def.overlay || def.returnsMarkers) continue;
const plotColors = (ind.plots ?? def.plots ?? []).map(p => (p.color ?? '#aaa').slice(0, 7));
let chartPane = paneMap.get(ind.id) ?? -1;
let chartPane = info.paneIndex;
if (ind.mergedWith) {
const hostPane = paneMap.get(ind.mergedWith);
if (hostPane != null && hostPane >= 2) chartPane = hostPane;
const host = manager.getIndicatorPaneIndex(ind.mergedWith);
if (host >= 2) chartPane = host;
}
items.push({
id: ind.id,
id: info.id,
paneIndex: chartPane,
label: makeLabel(ind),
plotColors,
plotColors: info.plotColors.map(c => c.slice(0, 7)),
hidden: ind.hidden === true,
});
}
if (items.length === 0) return [];
items.sort((a, b) => a.paneIndex - b.paneIndex);
const subLayouts = manager.getIndicatorSubPaneLayouts();
for (const item of items) {
const lay = manager.getIndicatorPaneScreenLayout(item.id);
if (lay) applyPaneLayoutToItem(item, lay, true);
}
const paneLayouts = manager.getPaneLayouts();
fillMissingLayoutsByPaneIndex(items, paneLayouts);
fillMissingLayoutsByPaneIndex(items, manager.getIndicatorSubPaneLayouts());
if (containerEl?.isConnected) {
fillMissingLayoutsFromDom(items, containerEl, paneLayouts);
}
fillMissingLayoutsByPaneIndex(items, subLayouts);
fillMissingLayoutsFromActiveSubPanes(items, subLayouts);
items.sort((a, b) => {
const ay = a.layoutTopY ?? 1e9;
@@ -353,6 +309,17 @@ function paneItemLayout(
return l ? { topY: l.topY, height: l.height } : null;
}
/** 렌더 시점 pane 좌표 — resetPaneHeights 후 캐시 topY 가 어긋나지 않도록 시리즈 DOM 우선 */
function resolvePaneItemLayout(
manager: ChartManager,
item: PaneItem,
layouts: Array<{ paneIndex: number; topY: number; height: number }>,
): { topY: number; height: number } | null {
const live = manager.getIndicatorPaneScreenLayout(item.id);
if (live) return live;
return paneItemLayout(item, layouts);
}
// ── 아이콘 SVG ────────────────────────────────────────────────────────────────
/** ⤡ 전체화면 확장 — 네 꼭지점 바깥 방향 화살표 */
const IconExpand = () => (
@@ -422,6 +389,7 @@ const PaneLegend: React.FC<PaneLegendProps> = ({
}) => {
const [paneItems, setPaneItems] = useState<PaneItem[]>([]);
const [paneLayouts, setPaneLayouts] = useState<Array<{ paneIndex: number; topY: number; height: number }>>([]);
const [layoutEpoch, setLayoutEpoch] = useState(0);
const [values, setValues] = useState<Record<string, number[]>>({});
const [dragState, setDragState] = useState<DragState | null>(null);
const retryRef = useRef<ReturnType<typeof setTimeout>[]>([]);
@@ -451,11 +419,10 @@ const PaneLegend: React.FC<PaneLegendProps> = ({
useEffect(() => { indicatorsRef.current = indicators; }, [indicators]);
const syncPaneItems = useCallback(() => {
const el = containerElRef.current;
if (!el?.isConnected) return;
const map = manager.getIndicatorPaneMapping();
if (!containerElRef.current?.isConnected) return;
setPaneLayouts(manager.getPaneLayouts());
setPaneItems(buildPaneItems(manager, el, indicators, map));
setPaneItems(buildPaneItems(manager, indicators));
setLayoutEpoch(e => e + 1);
}, [indicators, manager]);
const refreshLayouts = useCallback(() => {
@@ -486,7 +453,7 @@ const PaneLegend: React.FC<PaneLegendProps> = ({
setPaneItems([]);
scheduleRetry();
return () => retryRef.current.forEach(clearTimeout);
}, [scheduleRetry]);
}, [scheduleRetry, indicators]);
useEffect(() => {
const unsub = manager.subscribePaneLayout(() => scheduleRetry());
@@ -505,13 +472,6 @@ const PaneLegend: React.FC<PaneLegendProps> = ({
useEffect(() => {
const unsub = manager.subscribeCrosshair((p: MouseEventParams<Time>) => {
const map = manager.getIndicatorPaneMapping();
const layouts = manager.getPaneLayouts();
setPaneLayouts(layouts);
const el = containerElRef.current;
if (el?.isConnected) {
setPaneItems(buildPaneItems(manager, el, indicatorsRef.current, map));
}
if (!p.time) { setValues({}); return; }
setValues(manager.getIndicatorValuesByIdFromParams(p));
});
@@ -525,16 +485,16 @@ const PaneLegend: React.FC<PaneLegendProps> = ({
if (!items.length) return null;
const rect = containerElRef.current.getBoundingClientRect();
if (idx <= 0) {
const pl = paneItemLayout(items[0], layouts);
const pl = resolvePaneItemLayout(manager, items[0], layouts);
return pl ? rect.top + pl.topY : null;
}
if (idx >= items.length) {
const pl = paneItemLayout(items[items.length - 1], layouts);
const pl = resolvePaneItemLayout(manager, items[items.length - 1], layouts);
return pl ? rect.top + pl.topY + pl.height : null;
}
const pl = paneItemLayout(items[idx - 1], layouts);
const pl = resolvePaneItemLayout(manager, items[idx - 1], layouts);
return pl ? rect.top + pl.topY + pl.height : null;
}, []);
}, [manager]);
const unbindPaneDragRef = useRef<(() => void) | null>(null);
@@ -553,7 +513,7 @@ const PaneLegend: React.FC<PaneLegendProps> = ({
const fromIndex = paneItemsRef.current.findIndex(i => i.id === id);
if (!item || fromIndex === -1) return;
const layout = paneItemLayout(item, paneLayoutsRef.current);
const layout = resolvePaneItemLayout(manager, item, paneLayoutsRef.current);
const paneCapture = layout
? capturePaneRegion(containerElRef.current, layout.topY, layout.height)
: null;
@@ -628,7 +588,7 @@ const PaneLegend: React.FC<PaneLegendProps> = ({
for (const item of items) {
if (getPaneHostId(item.id, inds) === dragHost) continue;
const l = paneItemLayout(item, layouts);
const l = resolvePaneItemLayout(manager, item, layouts);
if (!l || mouseY < l.topY || mouseY >= l.topY + l.height) continue;
const rel = (mouseY - l.topY) / Math.max(l.height, 1);
if (rel > 0.28 && rel < 0.72) {
@@ -640,7 +600,7 @@ const PaneLegend: React.FC<PaneLegendProps> = ({
if (dropMode === 'reorder') {
for (let i = 0; i < items.length; i++) {
const l = paneItemLayout(items[i], layouts);
const l = resolvePaneItemLayout(manager, items[i], layouts);
if (l && mouseY < l.topY + l.height / 2) {
drop = i;
break;
@@ -674,6 +634,7 @@ const PaneLegend: React.FC<PaneLegendProps> = ({
? getDropLineY(dragState!.dropBeforeIndex)
: null;
const containerRect = containerEl.getBoundingClientRect();
void layoutEpoch;
const draggingHostId = isDragging
? getPaneHostId(dragState!.draggingId, indicators)
@@ -684,20 +645,20 @@ const PaneLegend: React.FC<PaneLegendProps> = ({
: -1;
const draggingLayout = draggingItemIdx >= 0
? paneItemLayout(paneItems[draggingItemIdx], paneLayouts)
? resolvePaneItemLayout(manager, paneItems[draggingItemIdx], paneLayouts)
: null;
const mergeTargetLayout = isDragging && dragState?.mergeTargetId
? (() => {
const t = paneItems.find(i => i.id === dragState.mergeTargetId);
return t ? paneItemLayout(t, paneLayouts) : null;
return t ? resolvePaneItemLayout(manager, t, paneLayouts) : null;
})()
: null;
return (
<>
{paneItems.map((item, itemIdx) => {
const pl = paneItemLayout(item, paneLayouts);
const pl = resolvePaneItemLayout(manager, item, paneLayouts);
if (!pl) return null;
const screenX = containerRect.left;
@@ -918,8 +879,8 @@ const PaneLegend: React.FC<PaneLegendProps> = ({
<>
{/* ① 전체 지표 영역 dim — 고스트·shift 가 더 선명하게 보이도록 */}
{paneItems.length > 0 && (() => {
const firstL = paneItemLayout(paneItems[0], paneLayouts);
const lastL = paneItemLayout(paneItems[paneItems.length - 1], paneLayouts);
const firstL = resolvePaneItemLayout(manager, paneItems[0], paneLayouts);
const lastL = resolvePaneItemLayout(manager, paneItems[paneItems.length - 1], paneLayouts);
if (!firstL || !lastL) return null;
return (
<div style={{
frontend/src/components/SettingsPage.tsx
+4
View File
@@ -106,6 +106,8 @@ interface SettingsPageProps {
chartIndicators?: IndicatorConfig[];
onAddIndicatorToChart?: (type: string, config?: IndicatorConfig) => void;
onRemoveIndicatorFromChart?: (type: string) => void;
/** 보조지표 설정 목록 순서 변경 → 차트 pane 순서 */
onIndicatorListOrderChange?: (orderedTypes: string[]) => void;
chartSeriesPriceLabels?: boolean;
onChartSeriesPriceLabels?: (v: boolean) => void;
chartVolumeVisible?: boolean;
@@ -1516,6 +1518,7 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
chartIndicators = [],
onAddIndicatorToChart,
onRemoveIndicatorFromChart,
onIndicatorListOrderChange,
chartSeriesPriceLabels = true,
onChartSeriesPriceLabels,
chartVolumeVisible = true,
@@ -1642,6 +1645,7 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
saveAllDefaults={saveAllIndicatorDefaults}
onSaveUiState={setIndicatorSaveUi}
settingsRevision={indicatorSettingsRevision}
onListOrderChange={onIndicatorListOrderChange}
/>
);
case 'backtest': return (
frontend/src/components/Toolbar.tsx
+109 -13
View File
@@ -13,6 +13,16 @@ import {
import {
confirmAndApplyIndicatorTab,
} from '../utils/indicatorTabApply';
import {
getOrderedMainIndicatorTypes,
saveMainTabOrder,
} from '../utils/indicatorMainTabOrder';
import {
mergeIndicatorListOrder,
reorderIndicatorListType,
saveIndicatorListOrder,
} from '../utils/indicatorListOrder';
import { getSettingsIndicatorTypes } from '../utils/indicatorSettingsList';
import {
loadCustomTabs,
createCustomTab,
@@ -76,6 +86,8 @@ export interface ToolbarProps {
onScrollToNow?: () => void;
onAddIndicator: (type: string) => void;
onAddIndicators?: (types: string[]) => void;
/** 탭 목록 순서 변경 → 차트 pane 순서 동기화 */
onIndicatorOrderChange?: (orderedTypes: string[]) => void;
onRemoveByType: (type: string) => void;
onAutoFib: () => void;
onClearFib: () => void;
@@ -307,17 +319,21 @@ interface IndDropdownProps {
activeIndicators: IndicatorConfig[];
onAdd: (type: string) => void;
onAddMany?: (types: string[]) => void;
onIndicatorOrderChange?: (orderedTypes: string[]) => void;
onRemove: (type: string) => void;
onOpenSettings?: (type: string) => void;
onClose: () => void;
}
const IndDropdown: React.FC<IndDropdownProps> = ({
activeIndicators, onAdd, onAddMany, onRemove, onOpenSettings, onClose,
activeIndicators, onAdd, onAddMany, onIndicatorOrderChange, onRemove, onOpenSettings, onClose,
}) => {
const [search, setSearch] = React.useState('');
const [category, setCategory] = React.useState<IndicatorTabKey>('All');
const [customTabs, setCustomTabs] = React.useState<IndicatorCustomTab[]>(() => loadCustomTabs());
const [mainOrderTick, setMainOrderTick] = React.useState(0);
const [draggingType, setDraggingType] = React.useState<string | null>(null);
const [dragOverType, setDragOverType] = React.useState<string | null>(null);
const [editorOpen, setEditorOpen] = React.useState(false);
const [editorMode, setEditorMode] = React.useState<'create' | 'edit'>('create');
const searchRef = useRef<HTMLInputElement>(null);
@@ -364,10 +380,52 @@ const IndDropdown: React.FC<IndDropdownProps> = ({
setSearch('');
};
const tabTypeOrder = React.useMemo((): string[] | null => {
void mainOrderTick;
if (search.trim()) return null;
if (category === 'Main') return getOrderedMainIndicatorTypes();
if (isCustomTabKey(category) && selectedCustomTab) {
return [...selectedCustomTab.indicatorTypes];
}
return null;
}, [category, selectedCustomTab, customTabs, search, mainOrderTick]);
const canReorderList = tabTypeOrder != null && tabTypeOrder.length > 1;
const syncChartToTabOrder = useCallback(() => {
if (tabTypeOrder?.length && onIndicatorOrderChange) {
onIndicatorOrderChange(tabTypeOrder);
}
}, [tabTypeOrder, onIndicatorOrderChange]);
const moveTypeInTabList = useCallback((fromType: string, toType: string) => {
if (!tabTypeOrder) return;
const next = reorderIndicatorListType(tabTypeOrder, fromType, toType, 'before');
if (category === 'Main') {
saveMainTabOrder(next);
setMainOrderTick(t => t + 1);
saveIndicatorListOrder(mergeIndicatorListOrder(next, getSettingsIndicatorTypes()));
onIndicatorOrderChange?.(next);
} else if (isCustomTabKey(category) && selectedCustomTab) {
updateCustomTab(selectedCustomTab.id, { indicatorTypes: next });
refreshCustomTabs();
onIndicatorOrderChange?.(next);
}
}, [tabTypeOrder, category, selectedCustomTab, refreshCustomTabs, onIndicatorOrderChange]);
useEffect(() => {
const clearDrag = () => {
setDraggingType(null);
setDragOverType(null);
};
document.addEventListener('dragend', clearDrag);
return () => document.removeEventListener('dragend', clearDrag);
}, []);
const addAllContext = React.useMemo(() => {
if (category === 'All') return null;
if (category === 'Main') {
return { label: '주요지표', types: [...MAIN_INDICATOR_TYPES] };
return { label: '주요지표', types: getOrderedMainIndicatorTypes() };
}
if (isCustomTabKey(category) && selectedCustomTab) {
const types = selectedCustomTab.indicatorTypes.filter(
@@ -430,25 +488,22 @@ const IndDropdown: React.FC<IndDropdownProps> = ({
);
};
if (category === 'Main') {
return MAIN_INDICATOR_TYPES
if (category === 'Main' && tabTypeOrder) {
return tabTypeOrder
.map(type => INDICATOR_REGISTRY.find(d => d.type === type))
.filter((d): d is IndicatorDef => d != null)
.filter(matchesQuery);
}
if (isCustomTabKey(category)) {
const tabId = parseCustomTabKey(category);
const tab = tabId ? customTabs.find(t => t.id === tabId) : null;
if (!tab) return [];
return tab.indicatorTypes
if (isCustomTabKey(category) && tabTypeOrder) {
return tabTypeOrder
.map(type => INDICATOR_REGISTRY.find(d => d.type === type))
.filter((d): d is IndicatorDef => d != null)
.filter(matchesQuery);
}
return INDICATOR_REGISTRY.filter(matchesQuery);
}, [search, category, customTabs]);
}, [search, category, customTabs, tabTypeOrder]);
const {
panelRef,
@@ -625,8 +680,45 @@ const IndDropdown: React.FC<IndDropdownProps> = ({
const mainLbl = (category === 'Main' || isCustomTabKey(category))
? MAIN_INDICATOR_LABELS[def.type]
: undefined;
const isDragOver = canReorderList && dragOverType === def.type && draggingType !== def.type;
return (
<div key={def.type} className={`ind-panel-item${active ? ' active' : ''}`}>
<div
key={def.type}
className={`ind-panel-item${active ? ' active' : ''}${isDragOver ? ' ind-panel-item--drag-over' : ''}`}
onDragOver={canReorderList ? e => {
if (!draggingType || draggingType === def.type) return;
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
setDragOverType(def.type);
} : undefined}
onDragLeave={canReorderList ? () => {
if (dragOverType === def.type) setDragOverType(null);
} : undefined}
onDrop={canReorderList ? e => {
e.preventDefault();
const from = e.dataTransfer.getData('text/indicator-type') || draggingType;
if (from && from !== def.type) moveTypeInTabList(from, def.type);
setDraggingType(null);
setDragOverType(null);
} : undefined}
>
{canReorderList && (
<button
type="button"
className="ind-settings-drag-handle ind-panel-drag-handle"
draggable
title="드래그하여 순서 변경"
aria-label="순서 변경"
onDragStart={e => {
setDraggingType(def.type);
e.dataTransfer.setData('text/indicator-type', def.type);
e.dataTransfer.effectAllowed = 'move';
}}
onClick={e => e.stopPropagation()}
>
⠿
</button>
)}
<div className="ind-panel-item-info">
<span className="ind-panel-name">{mainLbl?.ko ?? def.description}</span>
<span className="ind-panel-desc">{mainLbl?.en ?? def.name}</span>
@@ -640,7 +732,10 @@ const IndDropdown: React.FC<IndDropdownProps> = ({
type="button"
className="ind-panel-add"
title="차트에 추가"
onClick={() => onAdd(def.type)}
onClick={() => {
onAdd(def.type);
syncChartToTabOrder();
}}
>
<IcPlus />
</button>
@@ -687,7 +782,7 @@ const Toolbar: React.FC<ToolbarProps> = ({
symbol, timeframe, chartType, theme, mode, logScale, showGrid,
activeIndicators,
onSymbol, onTimeframe, onChartType, onTheme, onMode,
onFitContent, onScrollToNow, onAddIndicator, onAddIndicators, onRemoveByType,
onFitContent, onScrollToNow, onAddIndicator, onAddIndicators, onIndicatorOrderChange, onRemoveByType,
onAutoFib, onClearFib, onScreenshot,
onToggleStats, onToggleWatch, onToggleAlert,
tradeNotifyUnread = 0, onOpenTradeNotifications,
@@ -865,6 +960,7 @@ const Toolbar: React.FC<ToolbarProps> = ({
activeIndicators={activeIndicators}
onAdd={type => onAddIndicator(type)}
onAddMany={onAddIndicators}
onIndicatorOrderChange={onIndicatorOrderChange}
onRemove={type => onRemoveByType(type)}
onOpenSettings={onOpenIndicatorSettings}
onClose={() => setShowIndMenu(false)}
frontend/src/components/TradingChart.tsx
+65 -16
View File
@@ -50,7 +50,7 @@ import ChartContextMenu from './ChartContextMenu';
import CandlePaneControls from './CandlePaneControls';
import { getKoreanName } from '../utils/marketNameCache';
import { DEFAULT_DISPLAY_TIMEZONE } from '../utils/timezone';
import { classifyIndicatorChartChange, singleIndParamKey } from '../utils/indicatorChartSync';
import { chartHasStaleIndicators, classifyIndicatorChartChange, singleIndParamKey } from '../utils/indicatorChartSync';
import type { ChartPaneSeparatorOptions } from '../types/chartPaneSeparator';
import PaneSeparatorOverlay from './PaneSeparatorOverlay';
@@ -429,6 +429,8 @@ const TradingChart: React.FC<TradingChartProps> = ({
return;
}
afterIndicatorPaneMutation(mgr);
// resetPaneHeights 직후 레이블 좌표 재동기화 (탭 교체 후 어긋남 방지)
mgr.notifyPaneLayoutChanged();
requestAnimationFrame(() => requestAnimationFrame(() => {
if (reloadGen !== indicatorReloadGenRef.current) {
fadeOutIndicatorReloadCover(cover);
@@ -437,6 +439,14 @@ const TradingChart: React.FC<TradingChartProps> = ({
restoreLogicalRange(mgr, savedLR);
fadeOutIndicatorReloadCover(cover);
indicatorSyncInFlightRef.current = false;
mgr.notifyPaneLayoutChanged();
[50, 150, 350, 700, 1200].forEach(ms => {
setTimeout(() => {
if (reloadGen === indicatorReloadGenRef.current) {
mgr.notifyPaneLayoutChanged();
}
}, ms);
});
onComplete?.();
}));
});
@@ -475,7 +485,17 @@ const TradingChart: React.FC<TradingChartProps> = ({
const expected = countExpectedVisibleIndicators(inds);
if (expected === 0) return;
if (m.getLoadedIndicatorCount() >= expected) return;
const loadedIds = m.getLoadedIndicatorIds();
if (chartHasStaleIndicators(loadedIds, inds)) {
reloadIndicatorsWithCover(m, inds, () => {
prevBarsKey.current = barsKey(barData, market);
syncIndicatorTrackingRefs(inds);
applyPaneLayout(m);
});
return;
}
if (loadedIds.size >= expected) return;
prevBarsKey.current = '';
const ct = prevChartType.current;
@@ -484,7 +504,10 @@ const TradingChart: React.FC<TradingChartProps> = ({
if (m.hasMainSeries()) {
void repairMissingIndicators(m, inds).then(() => {
if (m.getLoadedIndicatorCount() >= expected) {
if (
m.getLoadedIndicatorCount() >= expected
&& !chartHasStaleIndicators(m.getLoadedIndicatorIds(), inds)
) {
prevBarsKey.current = barsKey(barData, market);
syncIndicatorTrackingRefs(inds);
applyPaneLayout(m);
@@ -496,7 +519,7 @@ const TradingChart: React.FC<TradingChartProps> = ({
}
reloadAllRef.current?.(m, barData, ct, th, ls, inds);
}, 120);
}, [market, barsMarket, applyPaneLayout, repairMissingIndicators, syncIndicatorTrackingRefs]);
}, [market, barsMarket, applyPaneLayout, repairMissingIndicators, reloadIndicatorsWithCover, syncIndicatorTrackingRefs]);
/** setData 직후 캔들·볼륨 pane 레이아웃 확정 (지표 로드 중단 시에도 빈 화면 방지) */
const commitCandleLayout = useCallback((mgr: ChartManager) => {
@@ -1037,12 +1060,21 @@ const TradingChart: React.FC<TradingChartProps> = ({
if (barsChanged || ctChanged) {
void reloadAll(mgr, bars, chartType, theme, logScale, indicators);
} else if (indicatorsIncomplete) {
// 누락 지표만 추가 (전체 제거·재추가로 화면이 비는 문제 방지)
void repairMissingIndicators(mgr, indicators).then(() => {
syncIndicatorTrackingRefs(indicators);
prevBarsKey.current = barsKey(bars, market);
});
} else if (indicatorsIncomplete && !indChanged) {
// 지표 목록은 같지만 일부만 로드된 경우 — 누락분만 추가.
// 차트에 이전 탭 id가 남아 있으면(설정 화면에서 탭 교체 등) 전체 재로드.
const loadedIds = mgr.getLoadedIndicatorIds();
if (chartHasStaleIndicators(loadedIds, indicators)) {
reloadIndicatorsWithCover(mgr, indicators, () => {
syncIndicatorTrackingRefs(indicators);
prevBarsKey.current = barsKey(bars, market);
});
} else {
void repairMissingIndicators(mgr, indicators).then(() => {
syncIndicatorTrackingRefs(indicators);
prevBarsKey.current = barsKey(bars, market);
});
}
} else if (lsChanged) {
prevLogScale.current = logScale;
mgr.setLogScale(logScale);
@@ -1168,7 +1200,11 @@ const TradingChart: React.FC<TradingChartProps> = ({
const expected = countExpectedVisibleIndicators(indicators);
if (expected === 0) return;
if (mgr.getLoadedIndicatorCount() >= expected) return;
const loadedIds = mgr.getLoadedIndicatorIds();
if (
loadedIds.size >= expected
&& !chartHasStaleIndicators(loadedIds, indicators)
) return;
const timers = [120, 400, 900].map(delay =>
window.setTimeout(() => {
@@ -1176,10 +1212,23 @@ const TradingChart: React.FC<TradingChartProps> = ({
const m = managerRef.current;
if (!m || !m.hasMainSeries()) return;
if (!canApplyChartBars(bars, barsMarket, market)) return;
const exp = countExpectedVisibleIndicators(indicatorsRef.current);
if (exp === 0 || m.getLoadedIndicatorCount() >= exp) return;
void repairMissingIndicators(m, indicatorsRef.current).then(() => {
if (m.getLoadedIndicatorCount() >= exp) return;
const inds = indicatorsRef.current;
const exp = countExpectedVisibleIndicators(inds);
if (exp === 0) return;
const ids = m.getLoadedIndicatorIds();
if (chartHasStaleIndicators(ids, inds)) {
reloadIndicatorsWithCover(m, inds, () => {
syncIndicatorTrackingRefs(inds);
prevBarsKey.current = barsKey(bars, market);
});
return;
}
if (ids.size >= exp) return;
void repairMissingIndicators(m, inds).then(() => {
if (
m.getLoadedIndicatorCount() >= exp
&& !chartHasStaleIndicators(m.getLoadedIndicatorIds(), inds)
) return;
prevBarsKey.current = '';
queueIndicatorRecovery();
});
@@ -1187,7 +1236,7 @@ const TradingChart: React.FC<TradingChartProps> = ({
);
return () => { timers.forEach(clearTimeout); };
}, [chartMgr, bars, barsMarket, market, chartType, theme, logScale, indicators, chartVisible, queueIndicatorRecovery, repairMissingIndicators]);
}, [chartMgr, bars, barsMarket, market, chartType, theme, logScale, indicators, chartVisible, queueIndicatorRecovery, repairMissingIndicators, reloadIndicatorsWithCover, syncIndicatorTrackingRefs]);
// cursor 모드에서 드로잉 위에 있으면 pointer 커서로 변경
const handleWrapperMouseMove = useCallback((e: React.PointerEvent) => {
frontend/src/hooks/useIndicatorListOrder.ts
+37
View File
@@ -0,0 +1,37 @@
import { useCallback, useEffect, useState } from 'react';
import {
getOrderedSettingsIndicatorTypes,
loadIndicatorListOrder,
mergeIndicatorListOrder,
reorderIndicatorListType,
saveIndicatorListOrder,
} from '../utils/indicatorListOrder';
import { getSettingsIndicatorTypes } from '../utils/indicatorSettingsList';
/** 보조지표 설정 목록 순서 — 드래그 정렬 + localStorage */
export function useIndicatorListOrder(onOrderChange?: (order: string[]) => void) {
const [listOrder, setListOrder] = useState<string[]>(() => getOrderedSettingsIndicatorTypes());
useEffect(() => {
const canonical = getSettingsIndicatorTypes();
setListOrder(prev => mergeIndicatorListOrder(prev.length ? prev : loadIndicatorListOrder(), canonical));
}, []);
const persistOrder = useCallback((next: string[]) => {
const canonical = getSettingsIndicatorTypes();
const merged = mergeIndicatorListOrder(next, canonical);
setListOrder(merged);
saveIndicatorListOrder(merged);
onOrderChange?.(merged);
return merged;
}, [onOrderChange]);
const moveType = useCallback(
(fromType: string, toType: string, position: 'before' | 'after' = 'before') => {
setListOrder(prev => persistOrder(reorderIndicatorListType(prev, fromType, toType, position)));
},
[persistOrder],
);
return { listOrder, persistOrder, moveType, setListOrder };
}
frontend/src/utils/ChartManager.ts
+42 -15
View File
@@ -715,6 +715,7 @@ export class ChartManager {
await this.addIndicator(config, { skipLayout: true });
}
if (configs.length > 0 && this._activeIndicatorPaneIndices().size > 0) {
this._removeOrphanSubPanes();
this.resetPaneHeights(this._lastLayoutAvailableHeight);
this._notifyPaneLayout();
}
@@ -778,6 +779,8 @@ export class ChartManager {
if (this._indicatorLoadStale(loadGen)) return;
// 시리즈 제거 후 남은 빈 sub-pane 제거 (상단 orphan pane → 레이블·그래프 어긋남 방지)
this._removeOrphanSubPanes();
// 빈 pane stretch 정리 + 캔들 pane 비율 복구
this.resetPaneHeights();
this._notifyPaneLayout();
@@ -1723,6 +1726,11 @@ export class ChartManager {
}
}
/** PaneLegend 등 — 보조지표 pane DOM 배치가 끝난 뒤 레이블 위치 재동기화 */
notifyPaneLayoutChanged(): void {
this._notifyPaneLayout();
}
/**
* 차트 컨테이너 기준 각 pane 의 topY 와 height 배열 반환.
* IPaneApi.getHTMLElement() 로 pane index ↔ 화면 위치를 직접 매칭한다.
@@ -1805,22 +1813,25 @@ export class ChartManager {
getIndicatorPaneScreenLayout(id: string): { topY: number; height: number } | null {
const entry = this.indicators.get(id);
if (!entry || entry.paneIndex == null || entry.paneIndex < 2) return null;
const series = entry.seriesList[0];
if (!series) return null;
try {
const el = series.getPane().getHTMLElement();
if (!el) return null;
const rect = el.getBoundingClientRect();
const containerRect = this.container.getBoundingClientRect();
const height = Math.round(rect.height);
if (height < 12) return null;
return {
topY: Math.round(rect.top - containerRect.top),
height,
};
} catch {
return null;
const containerRect = this.container.getBoundingClientRect();
const MIN_H = 4;
for (const series of entry.seriesList) {
try {
const el = series.getPane().getHTMLElement();
if (!el) continue;
const rect = el.getBoundingClientRect();
const height = Math.round(rect.height);
if (height < MIN_H) continue;
return {
topY: Math.round(rect.top - containerRect.top),
height,
};
} catch {
/* try next series */
}
}
return null;
}
/**
@@ -2373,6 +2384,22 @@ export class ChartManager {
}
}
/** 활성 지표가 없는 sub-pane 제거 (중간·상단 orphan pane 포함) */
private _removeOrphanSubPanes(): void {
const active = this._activeIndicatorPaneIndices();
for (let i = this.chart.panes().length - 1; i >= 2; i--) {
const panes = this.chart.panes();
if (i >= panes.length) continue;
const pi = panes[i].paneIndex();
if (active.has(pi)) continue;
try {
this.chart.removePane(i);
} catch {
return;
}
}
}
/** 활성 지표가 없는 맨 끝 sub-pane 만 제거 — 단일 지표 제거 시 나머지 pane 유지 */
private _trimTrailingEmptySubPanes(): void {
for (;;) {
frontend/src/utils/indicatorChartSync.ts
+15
View File
@@ -19,6 +19,21 @@ export function singleIndParamKey(i: IndicatorConfig): string {
return `${JSON.stringify(i.params)}|${(i.plots ?? []).map(p => p.id).sort().join(',')}|${i.mergedWith ?? ''}`;
}
/** 차트에 로드된 지표 id 중 현재 설정에 없는(이전 탭 잔존) 항목이 있는지 */
export function chartHasStaleIndicators(
loadedIds: Set<string>,
indicators: IndicatorConfig[],
): boolean {
if (loadedIds.size === 0) return false;
const expected = new Set(
indicators.filter(i => i.hidden !== true).map(i => i.id),
);
for (const id of loadedIds) {
if (!expected.has(id)) return true;
}
return false;
}
/** 이전·현재 지표 목록 차이를 분류해 최소 갱신 경로를 선택 */
export function classifyIndicatorChartChange(
prev: IndicatorConfig[],
frontend/src/utils/indicatorListOrder.ts
+109
View File
@@ -0,0 +1,109 @@
/**
* 보조지표 설정 목록 표시·차트 pane 순서 (localStorage)
*/
import { getSettingsIndicatorTypes } from './indicatorSettingsList';
import type { IndicatorConfig } from '../types';
import { getPaneHostId } from './indicatorPaneMerge';
const STORAGE_KEY = 'gc_indicator_settings_list_order';
export function loadIndicatorListOrder(): string[] | null {
try {
const raw = localStorage.getItem(STORAGE_KEY);
if (!raw) return null;
const parsed = JSON.parse(raw) as unknown;
if (!Array.isArray(parsed)) return null;
return parsed.filter((t): t is string => typeof t === 'string' && t.length > 0);
} catch {
return null;
}
}
export function saveIndicatorListOrder(types: string[]): void {
try {
localStorage.setItem(STORAGE_KEY, JSON.stringify(types));
} catch {
/* quota */
}
}
/** 저장 순서 + registry 신규 type 병합 */
export function mergeIndicatorListOrder(saved: string[] | null, canonical: readonly string[]): string[] {
const canonSet = new Set(canonical);
const out: string[] = [];
const seen = new Set<string>();
if (saved) {
for (const t of saved) {
if (canonSet.has(t) && !seen.has(t)) {
seen.add(t);
out.push(t);
}
}
}
for (const t of canonical) {
if (!seen.has(t)) {
seen.add(t);
out.push(t);
}
}
return out;
}
export function getOrderedSettingsIndicatorTypes(): string[] {
const canonical = getSettingsIndicatorTypes();
return mergeIndicatorListOrder(loadIndicatorListOrder(), canonical);
}
export function compareIndicatorTypeOrder(
a: string,
b: string,
order: readonly string[],
): number {
const rank = new Map(order.map((t, i) => [t, i]));
const ra = rank.get(a) ?? 1_000_000;
const rb = rank.get(b) ?? 1_000_000;
if (ra !== rb) return ra - rb;
return a.localeCompare(b);
}
/** 차트 인스턴스 배열을 설정 목록 type 순서로 정렬 (병합 pane 은 호스트와 함께 이동) */
export function sortIndicatorsByTypeOrder(
inds: IndicatorConfig[],
order: readonly string[] = getOrderedSettingsIndicatorTypes(),
): IndicatorConfig[] {
if (inds.length <= 1) return inds;
const rankOfInd = (ind: IndicatorConfig): number => {
const hostId = getPaneHostId(ind.id, inds);
const host = inds.find(i => i.id === hostId) ?? ind;
const idx = order.indexOf(host.type);
const hostRank = idx >= 0 ? idx : 1_000_000;
if (ind.id === hostId) return hostRank;
const selfIdx = order.indexOf(ind.type);
return hostRank + (selfIdx >= 0 ? selfIdx * 0.0001 : 0.0005);
};
return [...inds].sort((a, b) => {
const d = rankOfInd(a) - rankOfInd(b);
if (d !== 0) return d;
return a.id.localeCompare(b.id);
});
}
export function reorderIndicatorListType(
order: string[],
draggedType: string,
targetType: string,
place: 'before' | 'after' = 'before',
): string[] {
if (draggedType === targetType) return order;
const without = order.filter(t => t !== draggedType);
let idx = without.indexOf(targetType);
if (idx < 0) return order;
if (place === 'after') idx += 1;
without.splice(idx, 0, draggedType);
return without;
}
frontend/src/utils/indicatorMainTabOrder.ts
+31
View File
@@ -0,0 +1,31 @@
/**
* 지표 추가 팝업 — Main(주요지표) 탭 표시·적용 순서
*/
import { MAIN_INDICATOR_TYPES } from './indicatorMainTab';
import { mergeIndicatorListOrder } from './indicatorListOrder';
const STORAGE_KEY = 'gc_indicator_main_tab_order';
export function loadMainTabOrder(): string[] | null {
try {
const raw = localStorage.getItem(STORAGE_KEY);
if (!raw) return null;
const parsed = JSON.parse(raw) as unknown;
if (!Array.isArray(parsed)) return null;
return parsed.filter((t): t is string => typeof t === 'string' && t.length > 0);
} catch {
return null;
}
}
export function saveMainTabOrder(types: string[]): void {
try {
localStorage.setItem(STORAGE_KEY, JSON.stringify(types));
} catch {
/* quota */
}
}
export function getOrderedMainIndicatorTypes(): string[] {
return mergeIndicatorListOrder(loadMainTabOrder(), MAIN_INDICATOR_TYPES);
}
frontend/src/utils/indicatorTabApply.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { INDICATOR_REGISTRY } from './indicatorRegistry';
import { MAIN_INDICATOR_TYPES } from './indicatorMainTab';
import { getOrderedMainIndicatorTypes } from './indicatorMainTabOrder';
import type { IndicatorCustomTab } from './indicatorCustomTabsStorage';
export type IndicatorTabApplySource =
@@ -8,7 +8,7 @@ export type IndicatorTabApplySource =
export function resolveIndicatorTabApplyTypes(source: IndicatorTabApplySource): string[] {
if (source.kind === 'main') {
return [...MAIN_INDICATOR_TYPES].filter(
return getOrderedMainIndicatorTypes().filter(
type => INDICATOR_REGISTRY.some(d => d.type === type),
);
}