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

보조지표 라벨 영역 스크롤 확대 축소 수정

Browse Source
This commit is contained in:
Macbook
2026-06-21 23:50:04 +09:00
parent 4d5bf243b5
commit 0d14fd4ad2
2 changed files with 40 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/TradingChart.tsx
+2 -1
View File
@@ -1219,7 +1219,8 @@ const TradingChart: React.FC<TradingChartProps> = ({
e.preventDefault();
e.stopPropagation();
m.zoomPriceAxisByWheel(chartX, chartY, e.deltaY);
const delta = Math.abs(e.deltaY) >= Math.abs(e.deltaX) ? e.deltaY : e.deltaX;
m.zoomPriceAxisByWheel(chartX, chartY, delta);
};
container.addEventListener('wheel', onWheelCapture, { capture: true, passive: false });
frontend/src/utils/ChartManager.ts
+38 -27
View File
@@ -417,7 +417,7 @@ export class ChartManager {
// pressedMouseMove: TradingChart 에서 커스텀 패닝 처리 (드로잉·클릭과 충돌 방지)
// horzTouchDrag: 보조 pane 터치 드래그가 메인 timeScale 과 어긋나는 현상 방지 — TradingChart 커스텀 패닝만 사용
handleScroll: { mouseWheel: true, pressedMouseMove: false, horzTouchDrag: false, vertTouchDrag: false },
handleScale: { axisPressedMouseMove: true, axisDoubleClickReset: true, mouseWheel: true, pinch: true },
handleScale: { axisPressedMouseMove: true, axisDoubleClickReset: true, mouseWheel: false, pinch: true },
});
this._applyDisplayTimezoneOptions();
@@ -4120,15 +4120,15 @@ export class ChartManager {
const paneIndex = this.getPaneIndexAtChartY(chartY);
const scaleW = this.getPriceScaleWidth(paneIndex);
if (scaleW <= 0) return false;
return chartX >= this.container.clientWidth - scaleW;
const minSub = this._minIndicatorSubPane();
const hitW = paneIndex >= minSub ? Math.max(scaleW, 72) : scaleW;
return chartX >= this.container.clientWidth - hitW;
}
/** pane 우측 가격축(값 라벨) 너비 — PaneLegend 버튼 배치용 */
getPriceScaleWidth(paneIndex: number): number {
try {
const ps = paneIndex === 1
? this.chart.priceScale('volume', 1)
: this.chart.priceScale('right', paneIndex);
const ps = this._getPriceScaleForPane(paneIndex);
const scaleW = ps.width();
return scaleW > 0 ? scaleW : 56;
} catch {
@@ -4136,6 +4136,14 @@ export class ChartManager {
}
}
/** pane 1 = 볼륨(표시 시) 또는 첫 보조지표(볼륨 숨김) */
private _getPriceScaleForPane(paneIndex: number) {
if (paneIndex === 1 && this._volumePaneShown()) {
return this.chart.priceScale('volume', 1);
}
return this.chart.priceScale('right', paneIndex);
}
/** 캔들 pane(0) 플롯 영역 너비 (우측 가격축 제외) */
private _candlePlotWidth(): number {
const scaleW = this.getPriceScaleWidth(0);
@@ -4279,9 +4287,11 @@ export class ChartManager {
/** 우측 가격축 라벨 영역 휠 — 해당 pane(캔들·거래량·보조지표) 세로 줌 */
zoomPriceAxisByWheel(chartX: number, chartY: number, deltaY: number): boolean {
if (deltaY === 0 || !this.isOnPriceAxis(chartX, chartY)) return false;
if (!this.isOnPriceAxis(chartX, chartY)) return false;
const paneIndex = this.getPaneIndexAtChartY(chartY);
return this._zoomPanePriceScaleByWheel(paneIndex, deltaY, chartY);
const delta = deltaY !== 0 ? deltaY : 0;
if (delta === 0) return true;
return this._zoomPanePriceScaleByWheel(paneIndex, delta, chartY);
}
/**
@@ -4299,24 +4309,14 @@ export class ChartManager {
return this._zoomPanePriceScaleByWheel(paneIndex, deltaY, anchorChartY);
}
private _getPriceScaleForPane(paneIndex: number) {
return paneIndex === 1
? this.chart.priceScale('volume', 1)
: this.chart.priceScale('right', paneIndex);
}
private _getRepresentativeSeriesForPane(paneIndex: number): ISeriesApi<SeriesType> | null {
if (paneIndex === 0) return this.mainSeries;
if (paneIndex === 1 && this.volumeSeries) {
try {
const vis = (this.volumeSeries.options() as { visible?: boolean }).visible;
if (vis !== false) return this.volumeSeries;
} catch {
return this.volumeSeries;
}
if (paneIndex === 1 && this._volumePaneShown() && this.volumeSeries) {
return this.volumeSeries;
}
for (const entry of this.indicators.values()) {
if (entry.paneIndex === paneIndex && entry.seriesList.length > 0) {
const entryPane = entry.paneIndex ?? this._readSeriesPaneIndex(entry.seriesList[0]) ?? -1;
if (entryPane === paneIndex && entry.seriesList.length > 0) {
return entry.seriesList[0];
}
}
@@ -4324,12 +4324,17 @@ export class ChartManager {
return null;
}
private _readPanePriceRange(paneIndex: number): { from: number; to: number } | null {
if (paneIndex === 0) return this._readMainPriceRange();
private _snapshotPaneAutoscaleRange(paneIndex: number): { from: number; to: number } | null {
const ps = this._getPriceScaleForPane(paneIndex);
try {
const existing = ps.getVisibleRange();
if (existing) return { from: existing.from, to: existing.to };
} catch { /* fall through */ }
try {
const existing = this._getPriceScaleForPane(paneIndex).getVisibleRange();
if (existing) return { from: existing.from, to: existing.to };
ps.setAutoScale(true);
const ranged = ps.getVisibleRange();
if (ranged) return { from: ranged.from, to: ranged.to };
} catch { /* fall through */ }
const series = this._getRepresentativeSeriesForPane(paneIndex);
@@ -4342,6 +4347,11 @@ export class ChartManager {
return { from: Math.min(pTop, pBot), to: Math.max(pTop, pBot) };
}
private _readPanePriceRange(paneIndex: number): { from: number; to: number } | null {
if (paneIndex === 0) return this._readMainPriceRange();
return this._snapshotPaneAutoscaleRange(paneIndex);
}
private _preparePaneManualPriceScale(paneIndex: number): void {
if (paneIndex === 0) {
if (!this.mainSeries) return;
@@ -4354,14 +4364,15 @@ export class ChartManager {
this._getPriceScaleForPane(paneIndex).setAutoScale(false);
} catch { /* ok */ }
if (paneIndex === 1 && this.volumeSeries) {
if (paneIndex === 1 && this._volumePaneShown() && this.volumeSeries) {
try {
this.volumeSeries.applyOptions({ autoscaleInfoProvider: undefined });
} catch { /* ok */ }
}
for (const entry of this.indicators.values()) {
if (entry.paneIndex !== paneIndex) continue;
const entryPane = entry.paneIndex ?? this._readSeriesPaneIndex(entry.seriesList[0]) ?? -1;
if (entryPane !== paneIndex) continue;
for (const series of entry.seriesList) {
try {
series.applyOptions({ autoscaleInfoProvider: undefined });