@363045841yyt/klinechart-core 0.8.1-alpha.3 → 0.8.1

package/src/engine/renderers/Indicator/mainIndicatorLegend.ts

@@ -90,27 +90,24 @@ export function createMainIndicatorLegendRendererPlugin(options: {
         if (!meta.getTitleInfo) continue
         if (!scheduler?.isMainIndicatorActive(meta.name)) continue
         const params = scheduler?.getMainIndicatorParams(meta.name) ?? {}
-        const getTitleInfo = meta.getTitleInfo
+
+        const titleInfo = meta.getTitleInfo(
+          klineData,
+          targetIndex,
+          params as Record<string, number | boolean | string>,
+          pluginHost!,
+          'main',
+        )
+        if (!titleInfo) continue
 
         rows.push({
           draw: (rowIndex: number) => {
-            const titleInfo = getTitleInfo(
-              klineData,
-              targetIndex,
-              params as Record<string, number | boolean | string>,
-              pluginHost!,
-              'main',
-            )
-            if (!titleInfo) return
-
             let x = legendX
             let y = config.yPaddingPx / 2 + legendYOffset + rowIndex * lineHeight
-            // 指标名称
             overlayCtx.fillStyle = colors.text.primary
             overlayCtx.fillText(titleInfo.name, x, y)
             x += measureTextWidth(overlayCtx, titleInfo.name)
 
-            // 指标参数
             if (titleInfo.params && titleInfo.params.length > 0) {
               const paramText = `(${titleInfo.params.join(',')})`
               overlayCtx.fillStyle = colors.text.tertiary
@@ -120,7 +117,6 @@ export function createMainIndicatorLegendRendererPlugin(options: {
               x += gap
             }
 
-            // 指标数值
             if (titleInfo.values) {
               y += 1
               for (const item of titleInfo.values) {
@@ -134,6 +130,8 @@ export function createMainIndicatorLegendRendererPlugin(options: {
         })
       }
 
+      pushComparisonLegendRows(context, klineData, targetIndex, range, rows, config.yPaddingPx, overlayCtx, legendX, legendYOffset, lineHeight, gap, colors)
+
       rows.forEach((row, index) => row.draw(index))
       overlayCtx.restore()
     },
@@ -151,3 +149,91 @@ export function createMainIndicatorLegendRendererPlugin(options: {
     },
   }
 }
+
+function pushComparisonLegendRows(
+  context: RenderContext,
+  klineData: KLineData[],
+  targetIndex: number,
+  range: { start: number; end: number },
+  rows: Array<{ draw: (rowIndex: number) => void }>,
+  yPaddingPx: number,
+  overlayCtx: CanvasRenderingContext2D,
+  legendX: number,
+  legendYOffset: number,
+  lineHeight: number,
+  gap: number,
+  colors: ReturnType<typeof resolveThemeColors>,
+): void {
+  const comparisonSymbols = context.comparisonSymbols
+  const comparisonData = context.comparisonData
+  const comparisonColors = context.comparisonColors
+  if (!comparisonSymbols?.length || !comparisonData?.size) return
+
+  const baseIndex = Math.max(0, range.start)
+  const baseItem = klineData[baseIndex]
+  if (!baseItem || !Number.isFinite(baseItem.close) || baseItem.close <= 0) return
+
+  const baseDate = baseItem.date ?? ''
+
+  for (const spec of comparisonSymbols) {
+    const data = comparisonData.get(spec.symbol)
+    if (!data?.length) continue
+
+    const baseline = baseDate
+      ? findBaselineByDate(data, baseDate)
+      : findBaselineByTimestamp(data, baseItem.timestamp)
+    if (!baseline || baseline.close <= 0) continue
+
+    const byDate = new Map<string, KLineData>()
+    for (const item of data) {
+      byDate.set(item.date ?? String(item.timestamp), item)
+    }
+
+    const mainItem = klineData[targetIndex]
+    if (!mainItem) continue
+    const key = mainItem.date ?? String(mainItem.timestamp)
+    const currentItem = byDate.get(key)
+    if (!currentItem || !Number.isFinite(currentItem.close)) continue
+
+    const pct = ((currentItem.close - baseline.close) / baseline.close) * 100
+    const color = comparisonColors?.get(spec.symbol) ?? '#f59e0b'
+
+    rows.push({
+      draw: (rowIndex: number) => {
+        let x = legendX
+        const y = yPaddingPx / 2 + legendYOffset + rowIndex * lineHeight
+
+        const dotRadius = 4
+        overlayCtx.fillStyle = color
+        overlayCtx.beginPath()
+        const fontSize = lineHeight - 6
+        overlayCtx.arc(x + dotRadius, y + fontSize / 2 - 1, dotRadius, 0, Math.PI * 2)
+        overlayCtx.fill()
+        x += dotRadius * 2 + 4
+
+        overlayCtx.fillStyle = colors.text.primary
+        overlayCtx.fillText(spec.symbol, x, y)
+        x += measureTextWidth(overlayCtx, spec.symbol) + gap
+
+        const sign = pct > 0 ? '+' : ''
+        const pctText = `${sign}${pct.toFixed(2)}%`
+        overlayCtx.fillStyle = pct > 0 ? colors.candleUpBody : pct < 0 ? colors.candleDownBody : colors.text.primary
+        overlayCtx.fillText(pctText, x, y + 1)
+      },
+    })
+  }
+}
+
+function findBaselineByDate(data: ReadonlyArray<KLineData>, date: string): KLineData | null {
+  for (const item of data) {
+    if (item.date && item.date >= date) return item
+  }
+  return null
+}
+
+function findBaselineByTimestamp(data: ReadonlyArray<KLineData>, timestamp: number): KLineData | null {
+  for (const item of data) {
+    if (item.timestamp >= timestamp) return item
+  }
+  return null
+}

package/src/engine/renderers/comparisonLine.ts

@@ -2,7 +2,7 @@ import type { RendererPlugin, RenderContext } from '../../plugin'
 import { RENDERER_PRIORITY } from '../../plugin'
 import type { KLineData } from '../../types/price'
 
-const COMPARISON_COLORS = ['#f59e0b', '#8b5cf6', '#06b6d4', '#ec4899', '#84cc16', '#f97316']
+const DEFAULT_COMPARISON_COLOR = '#f59e0b'
 
 export function createComparisonLineRenderer(): RendererPlugin {
     return {
@@ -21,9 +21,10 @@ export function createComparisonLineRenderer(): RendererPlugin {
             if (context.pane.id !== 'main') return
 
             const baseIndex = Math.max(0, context.range.start)
-            const mainBase = mainData[baseIndex]?.close
-            const baseTimestamp = mainData[baseIndex]?.timestamp
-            if (!Number.isFinite(mainBase) || mainBase <= 0 || baseTimestamp === undefined) return
+            const baseItem = mainData[baseIndex]
+            if (!baseItem || !Number.isFinite(baseItem.close) || baseItem.close <= 0) return
+            const mainBase = baseItem.close
+            const baseDate = baseItem.date ?? ''
 
             const ctx = context.ctx
             ctx.save()
@@ -31,18 +32,23 @@ export function createComparisonLineRenderer(): RendererPlugin {
             ctx.lineWidth = Math.max(1, 1.5 / context.dpr)
 
             for (let symbolIndex = 0; symbolIndex < comparisonSymbols.length; symbolIndex++) {
-                const spec = comparisonSymbols[symbolIndex]
+                const spec = comparisonSymbols[symbolIndex]!
                 const data = comparisonData.get(spec.symbol)
                 if (!data?.length) continue
 
-                const baseline = findBaseline(data, baseTimestamp)
+                const baseline = baseDate ? findBaselineByDate(data, baseDate) : findBaselineByTimestamp(data, baseItem.timestamp)
                 if (!baseline || baseline.close <= 0) continue
 
-                const byTimestamp = new Map<number, KLineData>()
-                for (const item of data) byTimestamp.set(item.timestamp, item)
+                const byDate = new Map<string, KLineData>()
+                for (const item of data) {
+                  if (item.date) byDate.set(item.date, item)
+                  else byDate.set(String(item.timestamp), item)
+                }
+
+                const colors = context.comparisonColors
 
                 ctx.beginPath()
-                ctx.strokeStyle = COMPARISON_COLORS[symbolIndex % COMPARISON_COLORS.length]!
+                ctx.strokeStyle = colors?.get(spec.symbol) ?? DEFAULT_COMPARISON_COLOR
                 let hasPath = false
                 let previousHadPoint = false
 
@@ -52,7 +58,8 @@ export function createComparisonLineRenderer(): RendererPlugin {
                         previousHadPoint = false
                         continue
                     }
-                    const item = byTimestamp.get(mainItem.timestamp)
+                    const key = mainItem.date ?? String(mainItem.timestamp)
+                    const item = byDate.get(key)
                     const x = context.kLineCenters[i - context.range.start]
                     if (!item || x === undefined || !Number.isFinite(item.close)) {
                         previousHadPoint = false
@@ -81,7 +88,14 @@ export function createComparisonLineRenderer(): RendererPlugin {
     }
 }
 
-function findBaseline(data: ReadonlyArray<KLineData>, timestamp: number): KLineData | null {
+function findBaselineByDate(data: ReadonlyArray<KLineData>, date: string): KLineData | null {
+    for (const item of data) {
+        if (item.date && item.date >= date) return item
+    }
+    return null
+}
+
+function findBaselineByTimestamp(data: ReadonlyArray<KLineData>, timestamp: number): KLineData | null {
     for (const item of data) {
         if (item.timestamp >= timestamp) return item
     }

package/src/engine/subPaneManager.ts

@@ -1,10 +1,12 @@
-import type { Chart } from './chart'
 import type { SubIndicatorType } from './renderers/Indicator'
 import { createSignal, type Signal } from '../reactivity/signal'
 import { createSubIndicatorRenderer } from './renderers/Indicator'
 import { createPaneTitleRendererPlugin } from './renderers/paneTitle'
 import { createIndicatorScaleRendererPlugin } from './renderers/Indicator/scale/indicator_scale'
 import { findIndicator } from './renderers/Indicator/indicatorCatalog'
+import type { IndicatorScheduler } from './indicators/scheduler'
+import type { RendererPlugin, RendererPluginWithHost } from '../plugin'
+import type { PaneSpec } from './chartTypes'
 
 export interface SubPaneEntry {
     paneId: string
@@ -15,6 +17,23 @@ export interface SubPaneEntry {
     paneTitleRendererName: string
 }
 
+export interface SubPaneContext {
+    getIndicatorScheduler: () => IndicatorScheduler
+    hasPane: (paneId: string) => boolean
+    upsertPane: (def: PaneSpec) => void
+    getRenderer: <T extends RendererPlugin = RendererPlugin>(name: string) => T | undefined
+    useRenderer: (plugin: RendererPlugin | RendererPluginWithHost, config?: Record<string, unknown>) => void
+    removeRenderer: (name: string) => void
+    removePaneDefinition: (paneId: string) => void
+    updateRendererConfig: (name: string, config: Record<string, unknown>) => void
+    getRightAxisWidth: () => number
+    getPriceLabelWidth: () => number
+    getYPaddingPx: () => number
+    getCrosshairPos: () => { x: number; y: number } | null
+    getCrosshairPrice: () => number | null
+    getActivePaneId: () => string | null
+}
+
 export class SubPaneManager {
     private entries = new Map<string, SubPaneEntry>()
     private _entriesSignal = createSignal<ReadonlyArray<SubPaneEntry>>([])
@@ -27,82 +46,78 @@ export class SubPaneManager {
         this._entriesSignal.set(this.getAll())
     }
 
-    create(chart: Chart, paneId: string, indicatorId: SubIndicatorType, params: Record<string, unknown>): boolean {
+    create(ctx: SubPaneContext, paneId: string, indicatorId: SubIndicatorType, params: Record<string, unknown>): boolean {
         if (this.entries.has(paneId)) {
             return true
         }
 
         const scaleRendererName = `${indicatorId.toLowerCase()}_scale_${paneId}`
         const paneTitleRendererName = `paneTitle_${paneId}`
-        const renderer = this.createIndicatorRenderer(chart, paneId, indicatorId, params)
+        const renderer = this.createIndicatorRenderer(ctx, paneId, indicatorId, params)
         if (!renderer) return false
         const rendererName = renderer.name
 
-        const paneExists = chart.hasPane(paneId)
+        const paneExists = ctx.hasPane(paneId)
         if (!paneExists) {
-            chart.upsertPane({ id: paneId, ratio: 1, visible: true, role: 'indicator' })
+            ctx.upsertPane({ id: paneId, ratio: 1, visible: true, role: 'indicator' })
         }
 
-        const existingRenderer = chart.getRenderer(rendererName)
+        const existingRenderer = ctx.getRenderer(rendererName)
         if (!existingRenderer) {
-            chart.useRenderer(renderer, params as Record<string, number | boolean | string>)
+            ctx.useRenderer(renderer, params as Record<string, number | boolean | string>)
         }
 
-        this.mountScaleRenderer(chart, paneId, indicatorId, scaleRendererName)
-        this.mountPaneTitleRenderer(chart, paneId, indicatorId, params)
+        this.mountScaleRenderer(ctx, paneId, indicatorId, scaleRendererName)
+        this.mountPaneTitleRenderer(ctx, paneId, indicatorId, params)
 
-        // 必须在 syncSchedulerConfig 之前注册 entry，
-        // 否则 scheduler 的 buildActiveConfig 读不到新 paneId，会将新指标的 show* 标志置为 false
         this.entries.set(paneId, { paneId, indicatorId, params, rendererName, scaleRendererName, paneTitleRendererName })
 
-        this.syncSchedulerConfig(chart, paneId, indicatorId, params)
+        this.syncSchedulerConfig(ctx, paneId, indicatorId, params)
 
-        chart.getIndicatorScheduler().onSubPaneChanged()
+        ctx.getIndicatorScheduler().onSubPaneChanged()
 
         this.syncEntriesSignal()
         return true
     }
 
-    remove(chart: Chart, paneId: string): void {
+    remove(ctx: SubPaneContext, paneId: string): void {
         const entry = this.entries.get(paneId)
         if (!entry) return
 
-        chart.removeRenderer(entry.rendererName)
-        chart.removeRenderer(entry.scaleRendererName)
-        chart.removeRenderer(entry.paneTitleRendererName)
+        ctx.removeRenderer(entry.rendererName)
+        ctx.removeRenderer(entry.scaleRendererName)
+        ctx.removeRenderer(entry.paneTitleRendererName)
 
         this.entries.delete(paneId)
 
-        if (chart.hasPane(paneId)) {
-            chart.removePaneDefinition(paneId)
+        if (ctx.hasPane(paneId)) {
+            ctx.removePaneDefinition(paneId)
         }
 
-        chart.getIndicatorScheduler().onSubPaneChanged()
+        ctx.getIndicatorScheduler().onSubPaneChanged()
         this.syncEntriesSignal()
     }
 
-    replaceIndicator(chart: Chart, paneId: string, newIndicatorId: SubIndicatorType, newParams: Record<string, unknown>): void {
+    replaceIndicator(ctx: SubPaneContext, paneId: string, newIndicatorId: SubIndicatorType, newParams: Record<string, unknown>): void {
         const entry = this.entries.get(paneId)
         if (!entry) return
 
-        const oldIndicatorId = entry.indicatorId
-
-        chart.removeRenderer(entry.rendererName)
-        chart.removeRenderer(entry.scaleRendererName)
-        chart.removeRenderer(entry.paneTitleRendererName)
+        ctx.removeRenderer(entry.rendererName)
+        ctx.removeRenderer(entry.scaleRendererName)
+        ctx.removeRenderer(entry.paneTitleRendererName)
 
         const newScaleRendererName = `${newIndicatorId.toLowerCase()}_scale_${paneId}`
         const newPaneTitleRendererName = `paneTitle_${paneId}`
-        const renderer = this.createIndicatorRenderer(chart, paneId, newIndicatorId, newParams)
+        const renderer = this.createIndicatorRenderer(ctx, paneId, newIndicatorId, newParams)
         if (!renderer) return
         const newRendererName = renderer.name
 
-        chart.useRenderer(renderer, newParams as Record<string, number | boolean | string>)
+        ctx.useRenderer(renderer, newParams as Record<string, number | boolean | string>)
 
-        this.mountScaleRenderer(chart, paneId, newIndicatorId, newScaleRendererName)
-        this.mountPaneTitleRenderer(chart, paneId, newIndicatorId, newParams)
+        this.mountScaleRenderer(ctx, paneId, newIndicatorId, newScaleRendererName)
+        this.mountPaneTitleRenderer(ctx, paneId, newIndicatorId, newParams)
 
-        this.syncSchedulerConfig(chart, paneId, newIndicatorId, newParams)
+        this.syncSchedulerConfig(ctx, paneId, newIndicatorId, newParams)
 
         this.entries.set(paneId, {
             paneId,
@@ -113,19 +128,20 @@ export class SubPaneManager {
             paneTitleRendererName: newPaneTitleRendererName,
         })
 
-        chart.getIndicatorScheduler().onSubPaneChanged()
+        ctx.getIndicatorScheduler().onSubPaneChanged()
         this.syncEntriesSignal()
     }
 
-    updateParams(chart: Chart, paneId: string, params: Record<string, unknown>): void {
+    updateParams(ctx: SubPaneContext, paneId: string, params: Record<string, unknown>): void {
         const entry = this.entries.get(paneId)
         if (!entry) return
 
         entry.params = { ...params }
 
-        chart.updateRendererConfig(entry.rendererName, params)
+        ctx.updateRendererConfig(entry.rendererName, params)
+        ctx.updateRendererConfig(entry.paneTitleRendererName, { params: entry.params, indicatorId: entry.indicatorId })
 
-        this.syncSchedulerConfig(chart, paneId, entry.indicatorId, entry.params)
+        this.syncSchedulerConfig(ctx, paneId, entry.indicatorId, entry.params)
         this.syncEntriesSignal()
     }
 
@@ -134,12 +150,12 @@ export class SubPaneManager {
     }
 
     private createIndicatorRenderer(
-        chart: Chart,
+        ctx: SubPaneContext,
         paneId: string,
         indicatorId: SubIndicatorType,
         params: Record<string, unknown>,
-    ): import('../plugin').RendererPlugin {
-        const definition = chart.getIndicatorScheduler().getIndicatorMetadata(indicatorId)
+    ): RendererPlugin {
+        const definition = ctx.getIndicatorScheduler().getIndicatorMetadata(indicatorId)
         if (!definition) {
             throw new Error(`[SubPaneManager] Unknown indicator: ${indicatorId}`)
         }
@@ -154,38 +170,38 @@ export class SubPaneManager {
         return Array.from(this.entries.keys())
     }
 
-    clear(chart: Chart): void {
+    clear(ctx: SubPaneContext): void {
         for (const entry of this.entries.values()) {
-            chart.removeRenderer(entry.rendererName)
-            chart.removeRenderer(entry.scaleRendererName)
-            chart.removeRenderer(entry.paneTitleRendererName)
+            ctx.removeRenderer(entry.rendererName)
+            ctx.removeRenderer(entry.scaleRendererName)
+            ctx.removeRenderer(entry.paneTitleRendererName)
         }
         this.entries.clear()
-        chart.getIndicatorScheduler().onSubPaneChanged()
+        ctx.getIndicatorScheduler().onSubPaneChanged()
         this.syncEntriesSignal()
     }
 
     private syncSchedulerConfig(
-        chart: Chart,
+        ctx: SubPaneContext,
         paneId: string,
         indicatorId: SubIndicatorType,
         params: Record<string, unknown>,
     ): void {
-        const scheduler = chart.getIndicatorScheduler()
+        const scheduler = ctx.getIndicatorScheduler()
         const definition = scheduler.getIndicatorMetadata(indicatorId)
         definition?.updateConfig?.(scheduler, params, paneId)
     }
 
-    private mountScaleRenderer(chart: Chart, paneId: string, indicatorId: SubIndicatorType, scaleRendererName: string): void {
-        const existing = chart.getRenderer(scaleRendererName)
+    private mountScaleRenderer(ctx: SubPaneContext, paneId: string, indicatorId: SubIndicatorType, scaleRendererName: string): void {
+        const existing = ctx.getRenderer(scaleRendererName)
         if (existing) return
 
-        const axisWidth = chart.getOption().rightAxisWidth + (chart.getOption().priceLabelWidth ?? 60)
-        const yPaddingPx = chart.getOption().yPaddingPx
+        const axisWidth = ctx.getRightAxisWidth() + (ctx.getPriceLabelWidth() ?? 60)
+        const yPaddingPx = ctx.getYPaddingPx()
         const getCrosshair = () => {
-            const pos = chart.interaction.crosshairPos
-            const price = chart.interaction.crosshairPrice
-            const activePaneId = chart.interaction.activePaneId
+            const pos = ctx.getCrosshairPos()
+            const price = ctx.getCrosshairPrice()
+            const activePaneId = ctx.getActivePaneId()
             if (pos && price !== null) {
                 return { y: pos.y, price, activePaneId }
             }
@@ -194,14 +210,14 @@ export class SubPaneManager {
 
         const opts = { axisWidth, paneId, yPaddingPx, getCrosshair }
 
-        const definition = chart.getIndicatorScheduler().getIndicatorMetadata(indicatorId)
+        const definition = ctx.getIndicatorScheduler().getIndicatorMetadata(indicatorId)
         if (definition?.scaleRendererFactory) {
-            chart.useRenderer(definition.scaleRendererFactory({ ...opts, indicatorId }))
+            ctx.useRenderer(definition.scaleRendererFactory({ ...opts, indicatorId }))
             return
         }
 
         if (definition?.scale) {
-            chart.useRenderer(createIndicatorScaleRendererPlugin({
+            ctx.useRenderer(createIndicatorScaleRendererPlugin({
                 ...opts,
                 indicatorKey: definition.scale.indicatorKey ?? definition.name,
                 label: definition.scale.label ?? definition.displayName,
@@ -211,11 +227,11 @@ export class SubPaneManager {
         }
     }
 
-    private mountPaneTitleRenderer(chart: Chart, paneId: string, indicatorId: SubIndicatorType, params: Record<string, unknown>): void {
+    private mountPaneTitleRenderer(ctx: SubPaneContext, paneId: string, indicatorId: SubIndicatorType, params: Record<string, unknown>): void {
         const rendererName = `paneTitle_${paneId}`
-        const existing = chart.getRenderer(rendererName)
+        const existing = ctx.getRenderer(rendererName)
         if (existing) {
-            chart.updateRendererConfig(rendererName, { params, indicatorId })
+            ctx.updateRendererConfig(rendererName, { params, indicatorId })
             return
         }
 
@@ -225,6 +241,6 @@ export class SubPaneManager {
             indicatorId,
             params,
         })
-        chart.useRenderer(renderer)
+        ctx.useRenderer(renderer)
     }
 }

package/src/engine/utils/chartZoomController.ts

@@ -0,0 +1,104 @@
+import { computeZoom } from './zoom'
+
+export interface ZoomCommittedResult {
+  kWidth: number
+  kGap: number
+  zoomLevel: number
+}
+
+export interface ZoomDependencies {
+  getLogicalScrollLeft: () => number
+  getCurrentDpr: () => number
+  getLeftLoadBufferWidth: () => number
+  setScrollLeft: (v: number) => void
+  onZoomCommitted: (result: ZoomCommittedResult) => void
+  getKWidth: () => number
+  getKGap: () => number
+  getMinKWidth: () => number
+  getMaxKWidth: () => number
+  zoomLevelCount: number
+  initialZoomLevel: number
+}
+
+export class ChartZoomController {
+  private _currentZoomLevel: number
+  private readonly deps: ZoomDependencies
+
+  constructor(deps: ZoomDependencies) {
+    this.deps = deps
+    const clamped = Math.max(1, Math.min(deps.zoomLevelCount, deps.initialZoomLevel ?? 1))
+    this._currentZoomLevel = clamped
+  }
+
+  get currentZoomLevel(): number {
+    return this._currentZoomLevel
+  }
+
+  get zoomLevelCount(): number {
+    return this.deps.zoomLevelCount
+  }
+
+  setZoomLevel(level: number): void {
+    this._currentZoomLevel = Math.max(1, Math.min(this.deps.zoomLevelCount, level))
+  }
+
+  zoomToLevel(level: number, anchorX?: number): void {
+    const clamped = Math.max(1, Math.min(this.deps.zoomLevelCount, Math.round(level)))
+    this.applyZoom(clamped, anchorX)
+  }
+
+  zoomIn(anchorX?: number): void {
+    this.zoomToLevel(this._currentZoomLevel + 1, anchorX)
+  }
+
+  zoomOut(anchorX?: number): void {
+    this.zoomToLevel(this._currentZoomLevel - 1, anchorX)
+  }
+
+  handleWheel(deltaY: number, viewportX: number): void {
+    const delta = deltaY > 0 ? -1 : 1
+    const targetLevel = Math.max(1, Math.min(this.deps.zoomLevelCount, this._currentZoomLevel + delta))
+    if (targetLevel === this._currentZoomLevel) return
+    this.applyZoom(targetLevel, viewportX)
+  }
+
+  handlePinch(delta: number, centerClientX: number): void {
+    const targetLevel = Math.max(1, Math.min(this.deps.zoomLevelCount, this._currentZoomLevel + delta))
+    if (targetLevel === this._currentZoomLevel) return
+    this.applyZoom(targetLevel, centerClientX)
+  }
+
+  private applyZoom(targetLevel: number, anchorViewportX?: number): void {
+    if (targetLevel === this._currentZoomLevel) return
+
+    const delta = targetLevel - this._currentZoomLevel
+    const logicalScrollLeft = this.deps.getLogicalScrollLeft()
+    const dpr = this.deps.getCurrentDpr()
+
+    const result = computeZoom(
+      delta,
+      anchorViewportX ?? 0,
+      logicalScrollLeft,
+      this._currentZoomLevel,
+      this.deps.getKWidth(),
+      this.deps.getKGap(),
+      {
+        minKWidth: this.deps.getMinKWidth(),
+        maxKWidth: this.deps.getMaxKWidth(),
+        zoomLevelCount: this.deps.zoomLevelCount,
+        dpr,
+      },
+    )
+
+    if (!result) return
+
+    const domScrollLeft = result.newScrollLeft + this.deps.getLeftLoadBufferWidth()
+    this._currentZoomLevel = result.targetLevel
+    this.deps.setScrollLeft(domScrollLeft)
+    this.deps.onZoomCommitted({
+      kWidth: result.newKWidth,
+      kGap: result.newKGap,
+      zoomLevel: result.targetLevel,
+    })
+  }
+}