@363045841yyt/klinechart-core 0.8.6 → 0.8.7

package/src/engine/controller/__tests__/interaction.dpr.test.ts

@@ -95,6 +95,8 @@ function createChartStub(args: {
     getMarkerManager: () => markerManager,
     getPaneRenderers: () => paneRenderers,
     getData: () => data,
+    getRenderData: () => data,
+    currentPeriod: 'daily',
     translatePrice: () => undefined,
     scheduleDraw: () => undefined,
     zoomAt: () => undefined,

package/src/engine/controller/interaction.ts

@@ -1,6 +1,7 @@
 // 交互控制中心
 
 import type { Chart } from '../chart'
+import type { KLineData } from '../../types/price'
 import type { MarkerEntity, CustomMarkerEntity } from '../marker/registry'
 import { MarkerInteractionState } from './markerInteraction'
 import { PinchTracker } from './pinchTracker'
@@ -46,6 +47,7 @@ export class InteractionController {
         const dpr = this.chart.getCurrentDpr()
         const rounded = Math.round(clampedScrollLeft * dpr) / dpr
         container.scrollLeft = rounded
+        this.chart.syncScrollLeft(container.scrollLeft)
     }
 
     /** 垂直拖动相关 */
@@ -98,6 +100,8 @@ export class InteractionController {
 
     /** 当前帧的 K 线起始 x 坐标数组 */
     private kLinePositions: number[] | null = null
+    /** 当前帧的 K 线中心 x 坐标数组（物理像素对齐） */
+    private kLineCenters: number[] | null = null
     /** 当前帧的可见 K 线索引范围 */
     private visibleRange: { start: number; end: number } | null = null
 
@@ -107,6 +111,9 @@ export class InteractionController {
     /** K 线宽度（物理像素），用于计算 K 线中心偏移 */
     private kWidthPx: number | null = null
 
+    /** 触屏长按判定时间 (ms) */
+    private static readonly LONG_PRESS_MS = 400
+
     constructor(chart: Chart) {
         this.chart = chart
         this.setupPinchZoom()
@@ -222,24 +229,26 @@ export class InteractionController {
             return
         }
 
+        // 分时模式下禁止拖拽平移
+        if (!this.chart.activeMode.allowPan) {
+            this.clearHover()
+            this.chart.scheduleDraw()
+            return
+        }
+
         const pane = this.getPaneByY(mouseY)
         this.isDragging = true
         this.touchStartTime = Date.now()
         this.touchStartX = e.clientX
         this.touchStartY = e.clientY
-        this.dragMode = this.isTouchSession && this.exploreMode ? 'explore' : 'pan'
-        if (this.dragMode === 'explore') {
-            this.updatePlotHoverFromPoint(e.clientX, e.clientY)
-        }
+        // 触屏始终以 pan 模式开始，长按后才切换为 explore
+        this.dragMode = 'pan'
         this.dragStartX = e.clientX
         this.dragStartY = e.clientY
         this.scrollStartX = this.chart.getCachedScrollLeft()
         this.activePaneIdOnDrag = pane?.id || null
 
         this.chart.scheduleDraw()
-        if (this.dragMode === 'explore') {
-            this.notifyInteractionChange()
-        }
     }
 
 
@@ -267,27 +276,35 @@ export class InteractionController {
         const wasPanning = this.dragMode === 'pan'
         const wasExploring = this.dragMode === 'explore'
 
-        if (wasExploring && this.isTouchSession) {
-            const elapsed = Date.now() - this.touchStartTime
-            const dx = e.clientX - this.touchStartX
-            const dy = e.clientY - this.touchStartY
-            if (elapsed < 200 && Math.abs(dx) < 5 && Math.abs(dy) < 5) {
-                // Quick tap → dismiss crosshair, switch to scroll mode
-                this.exploreMode = false
-                this.clearHover()
-                this.chart.scheduleDraw()
-                this.notifyInteractionChange()
-            } else {
-                // Long press or drag → keep crosshair
+        if (this.isTouchSession) {
+            if (wasExploring) {
+                // 长按触发了 explore → 保持十字线
                 this.exploreMode = true
                 this.updatePlotHoverFromPoint(e.clientX, e.clientY)
                 this.chart.scheduleDraw()
                 this.notifyInteractionChange()
+            } else if (wasPanning) {
+                // 有实际滑动 → 下次支持长按
+                this.exploreMode = true
+            } else {
+                // 既未触发 explore 也未滑动
+                const elapsed = Date.now() - this.touchStartTime
+                const dx = e.clientX - this.touchStartX
+                const dy = e.clientY - this.touchStartY
+                if (elapsed < InteractionController.LONG_PRESS_MS && Math.abs(dx) < 10 && Math.abs(dy) < 10) {
+                    // 快速点击 → 锁定滚动模式，下次触摸不触发长按
+                    this.exploreMode = false
+                    this.clearHover()
+                    this.chart.scheduleDraw()
+                    this.notifyInteractionChange()
+                } else {
+                    this.exploreMode = true
+                }
             }
         }
 
+        // 鼠标和触屏拖拽结束后都检查左侧缺口 → 触发增量加载
         if (wasPanning) {
-            this.exploreMode = true
             this.chart.checkVisibleRangeGap()
         }
 
@@ -322,6 +339,7 @@ export class InteractionController {
     /** 处理滚动事件 */
     onScroll(options: { scheduleDraw?: boolean } = {}) {
         this.kLinePositions = null
+        this.kLineCenters = null
         this.visibleRange = null
         this.clearHover()
         if (options.scheduleDraw !== false) {
@@ -366,6 +384,20 @@ export class InteractionController {
                 return
             }
 
+            // 触屏：长按达到阈值后从 pan 切换到 explore
+            if (this.isTouchSession && this.dragMode === 'pan' && this.exploreMode) {
+                const elapsed = Date.now() - this.touchStartTime
+                const dx = Math.abs(e.clientX - this.touchStartX)
+                const dy = Math.abs(e.clientY - this.touchStartY)
+                if (elapsed >= InteractionController.LONG_PRESS_MS && dx < 10 && dy < 10) {
+                    this.dragMode = 'explore'
+                    this.updatePlotHoverFromPoint(e.clientX, e.clientY)
+                    this.chart.scheduleDraw()
+                    this.notifyInteractionChange()
+                    return
+                }
+            }
+
             if (this.dragMode === 'explore') {
                 this.updatePlotHoverFromPoint(e.clientX, e.clientY)
                 this.chart.scheduleDraw()
@@ -407,13 +439,16 @@ export class InteractionController {
      * @param positions K 线起始 x 坐标数组
      * @param visibleRange 可见 K 线索引范围
      * @param kWidthPx K 线宽度（物理像素）
+     * @param centers K 线中心 x 坐标数组（物理像素对齐后）
      */
     setKLinePositions(
         positions: number[] | null,
         visibleRange: { start: number; end: number } | null,
-        kWidthPx?: number
+        kWidthPx?: number,
+        centers?: number[] | null
     ) {
         this.kLinePositions = positions
+        this.kLineCenters = centers ?? null
         this.visibleRange = visibleRange
         if (kWidthPx !== undefined) {
             this.kWidthPx = kWidthPx
@@ -669,7 +704,7 @@ export class InteractionController {
         }
 
         const idx = localIdx + this.visibleRange.start
-        const data = this.chart.getData()
+        const data = this.chart.getRenderData()
 
         const pane = this.getPaneByY(mouseY)
         this.activePaneId = pane?.id || null
@@ -677,11 +712,8 @@ export class InteractionController {
         if (idx >= 0 && idx < (data?.length ?? 0)) {
             this.crosshairIndex = idx
 
-            const kLineStartX = this.kLinePositions[localIdx]!
-            // 与影线位置算法一致: leftPx + (widthPx - 1) / 2
-            const leftPx = Math.round(kLineStartX * dpr)
-            const wickXPx = leftPx + (this.kWidthPx - 1) / 2
-            const snappedX = wickXPx / dpr - scrollLeft
+            const centerX = this.kLineCenters?.[localIdx] ?? this.kLinePositions[localIdx]! + (this.kWidthPx! / dpr) / 2
+            const snappedX = centerX - scrollLeft
 
             this.crosshairPos = {
                 x: Math.min(Math.max(snappedX, 0), plotWidth),
@@ -694,13 +726,32 @@ export class InteractionController {
             } else {
                 this.crosshairPrice = null
             }
+
+            if (this.chart.currentPeriod === 'timeshare') {
+                this.hoveredIndex = idx
+                const tooltipResult = computeTooltipPosition({
+                    mouseX,
+                    mouseY,
+                    viewWidth,
+                    viewHeight,
+                    plotWidth,
+                    plotHeight,
+                    tooltipSize: this.tooltipSize,
+                    useAnchorPositioning: this.useTooltipAnchorPositioning,
+                })
+                if (tooltipResult.anchorPlacement) {
+                    this.tooltipAnchorPlacement = tooltipResult.anchorPlacement
+                }
+                this.tooltipPos = tooltipResult.pos
+                return
+            }
         } else {
             this.crosshairIndex = null
             this.crosshairPos = null
             this.crosshairPrice = null
         }
 
-        const k = typeof this.crosshairIndex === 'number' ? data[this.crosshairIndex] : undefined
+        const k = typeof this.crosshairIndex === 'number' ? data[this.crosshairIndex] as KLineData : undefined
         if (!k || !pane || !pane.capabilities.candleHitTest) {
             this.hoveredIndex = null
             return
@@ -774,6 +825,7 @@ export class InteractionController {
         this.activePaneId = null
         this.markerState.reset()
         this.kLinePositions = null
+        this.kLineCenters = null
         this.visibleRange = null
         this.lastHoverRenderKey = ''
         this.kWidthPx = null