@363045841yyt/klinechart-core 0.8.5 → 0.8.7

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'
@@ -36,7 +37,7 @@ export interface InteractionSnapshot {
 export class InteractionController {
     private chart: Chart
     private isDragging = false
-    private dragMode: 'none' | 'pan' | 'resize-separator' | 'scale-price' = 'none'
+    private dragMode: 'none' | 'pan' | 'resize-separator' | 'scale-price' | 'explore' = 'none'
     private dragStartX = 0
     private scrollStartX = 0
 
@@ -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)
     }
 
     /** 垂直拖动相关 */
@@ -62,6 +64,13 @@ export class InteractionController {
     /** [触屏]:触摸会话标记，避免触摸触发的模拟 mouse 事件干扰 */
     private isTouchSession = false
 
+    /** 触屏探索模式：true=长按出十字线不滚动，false=直接滚动 */
+    private exploreMode = true
+    /** 触屏按下时的时间戳/位置（用于 tap 检测） */
+    private touchStartTime = 0
+    private touchStartX = 0
+    private touchStartY = 0
+
     private pinchTracker = new PinchTracker()
 
     /** 十字线位置 */
@@ -91,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
 
@@ -100,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()
@@ -215,10 +229,20 @@ 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
+        // 触屏始终以 pan 模式开始，长按后才切换为 explore
         this.dragMode = 'pan'
-        this.updatePlotHoverFromPoint(e.clientX, e.clientY)
         this.dragStartX = e.clientX
         this.dragStartY = e.clientY
         this.scrollStartX = this.chart.getCachedScrollLeft()
@@ -250,14 +274,45 @@ export class InteractionController {
 
         if (e.isPrimary === false) return
         const wasPanning = this.dragMode === 'pan'
+        const wasExploring = this.dragMode === 'explore'
+
+        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.chart.checkVisibleRangeGap()
+        }
+
         this.isDragging = false
         this.dragMode = 'none'
         this.activePaneIdOnDrag = null
         this.activeSeparatorUpperPaneId = null
         this.notifyInteractionChange()
-        if (wasPanning) {
-            this.chart.checkVisibleRangeGap()
-        }
     }
 
     /**
@@ -273,15 +328,18 @@ export class InteractionController {
         this.dragMode = 'none'
         this.activePaneIdOnDrag = null
         this.clearSeparatorState()
+        if (!this.isTouchSession) {
+            this.clearHover()
+            this.chart.scheduleDraw()
+            this.notifyInteractionChange()
+        }
         this.isTouchSession = false
-        this.clearHover()
-        this.chart.scheduleDraw()
-        this.notifyInteractionChange()
     }
 
     /** 处理滚动事件 */
     onScroll(options: { scheduleDraw?: boolean } = {}) {
         this.kLinePositions = null
+        this.kLineCenters = null
         this.visibleRange = null
         this.clearHover()
         if (options.scheduleDraw !== false) {
@@ -326,6 +384,27 @@ 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()
+                this.notifyInteractionChange()
+                return
+            }
+
             if (this.dragMode === 'pan') {
                 const deltaX = this.dragStartX - e.clientX
                 this.applyPanScroll(container, this.scrollStartX + deltaX)
@@ -360,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
@@ -622,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
@@ -630,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),
@@ -647,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
@@ -727,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