@363045841yyt/klinechart-core 0.8.12 → 0.8.13-alpha.0

package/src/engine/subPaneManager.ts

@@ -6,242 +6,333 @@ 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 { RendererPlugin, RendererPluginWithHost, RenderContext } from '../plugin'
 import type { PaneSpec } from './chartTypes'
+import type { Layer } from '../scene/types'
+import { createLayerFromPlugin } from '../scene/createLayerFromPlugin'
 
 export interface SubPaneEntry {
-    paneId: string
-    indicatorId: SubIndicatorType
-    params: Record<string, unknown>
-    rendererName: string
-    scaleRendererName: string
-    paneTitleRendererName: string
+  paneId: string
+  indicatorId: SubIndicatorType
+  params: Record<string, unknown>
+  rendererName: string
+  scaleRendererName: string
+  paneTitleRendererName: string
+  layerId: string
+  scaleLayerId: string
+  paneTitleLayerId: 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
+  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
+  setRendererEnabled: (name: string, enabled: boolean) => 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
+  addLayer: (layer: Layer) => void
+  removeLayer: (id: string) => boolean
+  getLayer: (id: string) => Layer | null
+  setLayerVisibility: (id: string, visible: boolean) => void
+  getRenderContext: (paneId: string) => RenderContext | null
 }
 
 export class SubPaneManager {
-    private entries = new Map<string, SubPaneEntry>()
-    private _entriesSignal = createSignal<ReadonlyArray<SubPaneEntry>>([])
-
-    get entriesSignal(): Signal<ReadonlyArray<SubPaneEntry>> {
-        return this._entriesSignal
-    }
-
-    private syncEntriesSignal(): void {
-        this._entriesSignal.set(this.getAll())
+  private entries = new Map<string, SubPaneEntry>()
+  private _entriesSignal = createSignal<ReadonlyArray<SubPaneEntry>>([])
+
+  get entriesSignal(): Signal<ReadonlyArray<SubPaneEntry>> {
+    return this._entriesSignal
+  }
+
+  private syncEntriesSignal(): void {
+    this._entriesSignal.set(this.getAll())
+  }
+
+  create(
+    ctx: SubPaneContext,
+    paneId: string,
+    indicatorId: SubIndicatorType,
+    params: Record<string, unknown>,
+  ): boolean {
+    if (this.entries.has(paneId)) {
+      return true
     }
 
-    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(ctx, paneId, indicatorId, params)
-        if (!renderer) return false
-        const rendererName = renderer.name
-
-        const paneExists = ctx.hasPane(paneId)
-        if (!paneExists) {
-            ctx.upsertPane({ id: paneId, ratio: 1, visible: true, role: 'indicator' })
-        }
-
-        const existingRenderer = ctx.getRenderer(rendererName)
-        if (!existingRenderer) {
-            ctx.useRenderer(renderer, params as Record<string, number | boolean | string>)
-        }
+    const scaleRendererName = `${indicatorId.toLowerCase()}_scale_${paneId}`
+    const paneTitleRendererName = `paneTitle_${paneId}`
+    const renderer = this.createIndicatorRenderer(ctx, paneId, indicatorId, params)
+    if (!renderer) return false
+    const rendererName = renderer.name
+    const layerId = `plugin:${rendererName}`
 
-        this.mountScaleRenderer(ctx, paneId, indicatorId, scaleRendererName)
-        this.mountPaneTitleRenderer(ctx, paneId, indicatorId, params)
-
-        this.entries.set(paneId, { paneId, indicatorId, params, rendererName, scaleRendererName, paneTitleRendererName })
-
-        this.syncSchedulerConfig(ctx, paneId, indicatorId, params)
-
-        ctx.getIndicatorScheduler().onSubPaneChanged()
-
-        this.syncEntriesSignal()
-        return true
+    const paneExists = ctx.hasPane(paneId)
+    if (!paneExists) {
+      ctx.upsertPane({ id: paneId, ratio: 1, visible: true, role: 'indicator' })
     }
 
-    remove(ctx: SubPaneContext, paneId: string): void {
-        const entry = this.entries.get(paneId)
-        if (!entry) return
-
-        ctx.removeRenderer(entry.rendererName)
-        ctx.removeRenderer(entry.scaleRendererName)
-        ctx.removeRenderer(entry.paneTitleRendererName)
-
-        this.entries.delete(paneId)
-
-        if (ctx.hasPane(paneId)) {
-            ctx.removePaneDefinition(paneId)
-        }
-
-        ctx.getIndicatorScheduler().onSubPaneChanged()
-        this.syncEntriesSignal()
+    const existingRenderer = ctx.getRenderer(rendererName)
+    if (!existingRenderer) {
+      ctx.useRenderer(renderer, params as Record<string, number | boolean | string>)
+      ctx.setRendererEnabled(rendererName, false)
+      const layer = createLayerFromPlugin(renderer, () => ctx.getRenderContext(paneId), paneId)
+      ctx.addLayer(layer)
     }
 
-    replaceIndicator(ctx: SubPaneContext, paneId: string, newIndicatorId: SubIndicatorType, newParams: Record<string, unknown>): void {
-        const entry = this.entries.get(paneId)
-        if (!entry) return
+    this.mountScaleRenderer(ctx, paneId, indicatorId, scaleRendererName)
+    this.mountPaneTitleRenderer(ctx, paneId, indicatorId, params)
 
-        ctx.removeRenderer(entry.rendererName)
-        ctx.removeRenderer(entry.scaleRendererName)
-        ctx.removeRenderer(entry.paneTitleRendererName)
+    const scaleLayerId = `plugin:${scaleRendererName}`
+    const paneTitleLayerId = `plugin:${paneTitleRendererName}`
 
-        const newScaleRendererName = `${newIndicatorId.toLowerCase()}_scale_${paneId}`
-        const newPaneTitleRendererName = `paneTitle_${paneId}`
-        const renderer = this.createIndicatorRenderer(ctx, paneId, newIndicatorId, newParams)
-        if (!renderer) return
-        const newRendererName = renderer.name
+    this.entries.set(paneId, {
+      paneId,
+      indicatorId,
+      params,
+      rendererName,
+      scaleRendererName,
+      paneTitleRendererName,
+      layerId,
+      scaleLayerId,
+      paneTitleLayerId,
+    })
 
-        ctx.useRenderer(renderer, newParams as Record<string, number | boolean | string>)
+    this.syncSchedulerConfig(ctx, paneId, indicatorId, params)
 
-        this.mountScaleRenderer(ctx, paneId, newIndicatorId, newScaleRendererName)
-        this.mountPaneTitleRenderer(ctx, paneId, newIndicatorId, newParams)
+    ctx.getIndicatorScheduler().onSubPaneChanged()
 
-        this.syncSchedulerConfig(ctx, paneId, newIndicatorId, newParams)
-
-        this.entries.set(paneId, {
-            paneId,
-            indicatorId: newIndicatorId,
-            params: newParams,
-            rendererName: newRendererName,
-            scaleRendererName: newScaleRendererName,
-            paneTitleRendererName: newPaneTitleRendererName,
-        })
-
-        ctx.getIndicatorScheduler().onSubPaneChanged()
-        this.syncEntriesSignal()
-    }
+    this.syncEntriesSignal()
+    return true
+  }
 
-    updateParams(ctx: SubPaneContext, paneId: string, params: Record<string, unknown>): void {
-        const entry = this.entries.get(paneId)
-        if (!entry) return
+  remove(ctx: SubPaneContext, paneId: string): void {
+    const entry = this.entries.get(paneId)
+    if (!entry) return
 
-        entry.params = { ...params }
+    ctx.removeRenderer(entry.rendererName)
+    ctx.removeRenderer(entry.scaleRendererName)
+    ctx.removeRenderer(entry.paneTitleRendererName)
+    ctx.removeLayer(entry.layerId)
+    ctx.removeLayer(entry.scaleLayerId)
+    ctx.removeLayer(entry.paneTitleLayerId)
 
-        ctx.updateRendererConfig(entry.rendererName, params)
-        ctx.updateRendererConfig(entry.paneTitleRendererName, { params: entry.params, indicatorId: entry.indicatorId })
+    this.entries.delete(paneId)
 
-        this.syncSchedulerConfig(ctx, paneId, entry.indicatorId, entry.params)
-        this.syncEntriesSignal()
+    if (ctx.hasPane(paneId)) {
+      ctx.removePaneDefinition(paneId)
     }
 
-    getByPaneId(paneId: string): SubPaneEntry | undefined {
-        return this.entries.get(paneId)
+    ctx.getIndicatorScheduler().onSubPaneChanged()
+    this.syncEntriesSignal()
+  }
+
+  replaceIndicator(
+    ctx: SubPaneContext,
+    paneId: string,
+    newIndicatorId: SubIndicatorType,
+    newParams: Record<string, unknown>,
+  ): void {
+    const entry = this.entries.get(paneId)
+    if (!entry) return
+
+    ctx.removeRenderer(entry.rendererName)
+    ctx.removeRenderer(entry.scaleRendererName)
+    ctx.removeRenderer(entry.paneTitleRendererName)
+    ctx.removeLayer(entry.layerId)
+    ctx.removeLayer(entry.scaleLayerId)
+    ctx.removeLayer(entry.paneTitleLayerId)
+
+    const newScaleRendererName = `${newIndicatorId.toLowerCase()}_scale_${paneId}`
+    const newPaneTitleRendererName = `paneTitle_${paneId}`
+    const renderer = this.createIndicatorRenderer(ctx, paneId, newIndicatorId, newParams)
+    if (!renderer) return
+    const newRendererName = renderer.name
+    const newLayerId = `plugin:${newRendererName}`
+    const newScaleLayerId = `plugin:${newScaleRendererName}`
+    const newPaneTitleLayerId = `plugin:${newPaneTitleRendererName}`
+
+    ctx.useRenderer(renderer, newParams as Record<string, number | boolean | string>)
+    ctx.setRendererEnabled(newRendererName, false)
+    const layer = createLayerFromPlugin(renderer, () => ctx.getRenderContext(paneId), paneId)
+    ctx.addLayer(layer)
+
+    this.mountScaleRenderer(ctx, paneId, newIndicatorId, newScaleRendererName)
+    this.mountPaneTitleRenderer(ctx, paneId, newIndicatorId, newParams)
+
+    this.syncSchedulerConfig(ctx, paneId, newIndicatorId, newParams)
+
+    this.entries.set(paneId, {
+      paneId,
+      indicatorId: newIndicatorId,
+      params: newParams,
+      rendererName: newRendererName,
+      scaleRendererName: newScaleRendererName,
+      paneTitleRendererName: newPaneTitleRendererName,
+      layerId: newLayerId,
+      scaleLayerId: newScaleLayerId,
+      paneTitleLayerId: newPaneTitleLayerId,
+    })
+
+    ctx.getIndicatorScheduler().onSubPaneChanged()
+    this.syncEntriesSignal()
+  }
+
+  updateParams(ctx: SubPaneContext, paneId: string, params: Record<string, unknown>): void {
+    const entry = this.entries.get(paneId)
+    if (!entry) return
+
+    entry.params = { ...params }
+
+    ctx.updateRendererConfig(entry.rendererName, params)
+    ctx.updateRendererConfig(entry.paneTitleRendererName, {
+      params: entry.params,
+      indicatorId: entry.indicatorId,
+    })
+
+    this.syncSchedulerConfig(ctx, paneId, entry.indicatorId, entry.params)
+    this.syncEntriesSignal()
+  }
+
+  getByPaneId(paneId: string): SubPaneEntry | undefined {
+    return this.entries.get(paneId)
+  }
+
+  private createIndicatorRenderer(
+    ctx: SubPaneContext,
+    paneId: string,
+    indicatorId: SubIndicatorType,
+    params: Record<string, unknown>,
+  ): RendererPlugin {
+    const definition = ctx.getIndicatorScheduler().getIndicatorMetadata(indicatorId)
+    if (!definition) {
+      throw new KLineChartError(
+        'NOT_REGISTERED',
+        `[SubPaneManager] Unknown indicator: ${indicatorId}`,
+      )
     }
-
-    private createIndicatorRenderer(
-        ctx: SubPaneContext,
-        paneId: string,
-        indicatorId: SubIndicatorType,
-        params: Record<string, unknown>,
-    ): RendererPlugin {
-        const definition = ctx.getIndicatorScheduler().getIndicatorMetadata(indicatorId)
-        if (!definition) {
-            throw new KLineChartError('NOT_REGISTERED', `[SubPaneManager] Unknown indicator: ${indicatorId}`)
-        }
-        return createSubIndicatorRenderer({ indicatorId, paneId, definition, params })
+    return createSubIndicatorRenderer({ indicatorId, paneId, definition, params })
+  }
+
+  getAll(): SubPaneEntry[] {
+    return Array.from(this.entries.values())
+  }
+
+  getPaneIds(): string[] {
+    return Array.from(this.entries.keys())
+  }
+
+  clear(ctx: SubPaneContext): void {
+    for (const entry of this.entries.values()) {
+      ctx.removeRenderer(entry.rendererName)
+      ctx.removeRenderer(entry.scaleRendererName)
+      ctx.removeRenderer(entry.paneTitleRendererName)
+      ctx.removeLayer(entry.layerId)
+      ctx.removeLayer(entry.scaleLayerId)
+      ctx.removeLayer(entry.paneTitleLayerId)
     }
-
-    getAll(): SubPaneEntry[] {
-        return Array.from(this.entries.values())
+    this.entries.clear()
+    ctx.getIndicatorScheduler().onSubPaneChanged()
+    this.syncEntriesSignal()
+  }
+
+  private syncSchedulerConfig(
+    ctx: SubPaneContext,
+    paneId: string,
+    indicatorId: SubIndicatorType,
+    params: Record<string, unknown>,
+  ): void {
+    const scheduler = ctx.getIndicatorScheduler()
+    const definition = scheduler.getIndicatorMetadata(indicatorId)
+    definition?.updateConfig?.(scheduler, params, paneId)
+  }
+
+  private mountScaleRenderer(
+    ctx: SubPaneContext,
+    paneId: string,
+    indicatorId: SubIndicatorType,
+    scaleRendererName: string,
+  ): void {
+    const existing = ctx.getRenderer(scaleRendererName)
+    if (existing) {
+      // ensure existing layer is visible
+      ctx.setLayerVisibility(`plugin:${scaleRendererName}`, true)
+      return
     }
 
-    getPaneIds(): string[] {
-        return Array.from(this.entries.keys())
+    const axisWidth = ctx.getRightAxisWidth() + (ctx.getPriceLabelWidth() ?? 60)
+    const yPaddingPx = ctx.getYPaddingPx()
+    const getCrosshair = () => {
+      const pos = ctx.getCrosshairPos()
+      const price = ctx.getCrosshairPrice()
+      const activePaneId = ctx.getActivePaneId()
+      if (pos && price !== null) {
+        return { y: pos.y, price, activePaneId }
+      }
+      return null
     }
 
-    clear(ctx: SubPaneContext): void {
-        for (const entry of this.entries.values()) {
-            ctx.removeRenderer(entry.rendererName)
-            ctx.removeRenderer(entry.scaleRendererName)
-            ctx.removeRenderer(entry.paneTitleRendererName)
-        }
-        this.entries.clear()
-        ctx.getIndicatorScheduler().onSubPaneChanged()
-        this.syncEntriesSignal()
-    }
+    const opts = { axisWidth, paneId, yPaddingPx, getCrosshair }
 
-    private syncSchedulerConfig(
-        ctx: SubPaneContext,
-        paneId: string,
-        indicatorId: SubIndicatorType,
-        params: Record<string, unknown>,
-    ): void {
-        const scheduler = ctx.getIndicatorScheduler()
-        const definition = scheduler.getIndicatorMetadata(indicatorId)
-        definition?.updateConfig?.(scheduler, params, paneId)
+    const definition = ctx.getIndicatorScheduler().getIndicatorMetadata(indicatorId)
+    if (definition?.scaleRendererFactory) {
+      const plugin = definition.scaleRendererFactory({ ...opts, indicatorId })
+      ctx.useRenderer(plugin)
+      ctx.setRendererEnabled(scaleRendererName, false)
+      const layer = createLayerFromPlugin(plugin, () => ctx.getRenderContext(paneId), paneId)
+      ctx.addLayer(layer)
+      return
     }
 
-    private mountScaleRenderer(ctx: SubPaneContext, paneId: string, indicatorId: SubIndicatorType, scaleRendererName: string): void {
-        const existing = ctx.getRenderer(scaleRendererName)
-        if (existing) return
-
-        const axisWidth = ctx.getRightAxisWidth() + (ctx.getPriceLabelWidth() ?? 60)
-        const yPaddingPx = ctx.getYPaddingPx()
-        const getCrosshair = () => {
-            const pos = ctx.getCrosshairPos()
-            const price = ctx.getCrosshairPrice()
-            const activePaneId = ctx.getActivePaneId()
-            if (pos && price !== null) {
-                return { y: pos.y, price, activePaneId }
-            }
-            return null
-        }
-
-        const opts = { axisWidth, paneId, yPaddingPx, getCrosshair }
-
-        const definition = ctx.getIndicatorScheduler().getIndicatorMetadata(indicatorId)
-        if (definition?.scaleRendererFactory) {
-            ctx.useRenderer(definition.scaleRendererFactory({ ...opts, indicatorId }))
-            return
-        }
-
-        if (definition?.scale) {
-            ctx.useRenderer(createIndicatorScaleRendererPlugin({
-                ...opts,
-                indicatorKey: definition.scale.indicatorKey ?? definition.name,
-                label: definition.scale.label ?? definition.displayName,
-                decimals: definition.scale.decimals,
-            }))
-            return
-        }
+    if (definition?.scale) {
+      const plugin = createIndicatorScaleRendererPlugin({
+        ...opts,
+        indicatorKey: definition.scale.indicatorKey ?? definition.name,
+        label: definition.scale.label ?? definition.displayName,
+        decimals: definition.scale.decimals,
+      })
+      ctx.useRenderer(plugin)
+      ctx.setRendererEnabled(scaleRendererName, false)
+      const layer = createLayerFromPlugin(plugin, () => ctx.getRenderContext(paneId), paneId)
+      ctx.addLayer(layer)
+      return
     }
-
-    private mountPaneTitleRenderer(ctx: SubPaneContext, paneId: string, indicatorId: SubIndicatorType, params: Record<string, unknown>): void {
-        const rendererName = `paneTitle_${paneId}`
-        const existing = ctx.getRenderer(rendererName)
-        if (existing) {
-            ctx.updateRendererConfig(rendererName, { params, indicatorId })
-            return
-        }
-
-        const renderer = createPaneTitleRendererPlugin({
-            paneId,
-            title: findIndicator(indicatorId)?.label ?? indicatorId,
-            indicatorId,
-            params,
-        })
-        ctx.useRenderer(renderer)
+  }
+
+  private mountPaneTitleRenderer(
+    ctx: SubPaneContext,
+    paneId: string,
+    indicatorId: SubIndicatorType,
+    params: Record<string, unknown>,
+  ): void {
+    const rendererName = `paneTitle_${paneId}`
+    const existing = ctx.getRenderer(rendererName)
+    if (existing) {
+      ctx.updateRendererConfig(rendererName, { params, indicatorId })
+      ctx.setLayerVisibility(`plugin:${rendererName}`, true)
+      return
     }
+
+    const renderer = createPaneTitleRendererPlugin({
+      paneId,
+      title: findIndicator(indicatorId)?.label ?? indicatorId,
+      indicatorId,
+      params,
+    })
+    ctx.useRenderer(renderer)
+    ctx.setRendererEnabled(rendererName, false)
+    const layer = createLayerFromPlugin(renderer, () => ctx.getRenderContext(paneId), paneId)
+    ctx.addLayer(layer)
+  }
 }

package/src/engine/theme/fonts.ts

@@ -9,12 +9,12 @@ const FONT_FAMILY = '"Trebuchet MS", Roboto, Ubuntu, sans-serif'
 
 /** 获取指定字号的字体字符串，用于 Canvas ctx.font */
 export function getFont(size: number, options?: { bold?: boolean }): string {
-    const weight = options?.bold ? 'bold ' : ''
-    return `${weight}${size}px ${FONT_FAMILY}`
+  const weight = options?.bold ? 'bold ' : ''
+  return `${weight}${size}px ${FONT_FAMILY}`
 }
 
 export function setCanvasFont(ctx: CanvasRenderingContext2D, font: string): void {
-    if (ctx.font !== font) {
-        ctx.font = font
-    }
+  if (ctx.font !== font) {
+    ctx.font = font
+  }
 }

package/src/engine/utils/__tests__/tickPosition.test.ts

@@ -2,52 +2,52 @@ import { describe, expect, it } from 'vitest'
 import { calculateValueTickPositions } from '../tickPosition'
 
 describe('calculateValueTickPositions', () => {
-    it('anchors percent ticks at 0 and keeps equal percentage steps', () => {
-        const ticks = calculateValueTickPositions({
-            height: 240,
-            paddingTop: 0,
-            paddingBottom: 0,
-            valueMin: -1.3,
-            valueMax: 2.4,
-            scaleType: 'percent',
-            isMain: true,
-        })
-
-        const values = ticks.map((tick) => tick.value)
-
-        const zeroIndex = values.indexOf(0)
-        expect(zeroIndex).toBeGreaterThan(0)
-        expect(zeroIndex).toBeLessThan(values.length - 1)
-
-        const step = values[zeroIndex - 1]! - values[zeroIndex]!
-        expect(step).toBeGreaterThan(0)
-
-        for (let i = 1; i < values.length; i++) {
-            expect(values[i - 1]! - values[i]!).toBeCloseTo(step, 10)
-        }
-
-        for (const value of values) {
-            expect(value / step).toBeCloseTo(Math.round(value / step), 10)
-        }
+  it('anchors percent ticks at 0 and keeps equal percentage steps', () => {
+    const ticks = calculateValueTickPositions({
+      height: 240,
+      paddingTop: 0,
+      paddingBottom: 0,
+      valueMin: -1.3,
+      valueMax: 2.4,
+      scaleType: 'percent',
+      isMain: true,
     })
 
-    it('allows ticks to extend beyond the visible range', () => {
-        const ticks = calculateValueTickPositions({
-            height: 240,
-            paddingTop: 10,
-            paddingBottom: 10,
-            valueMin: -0.5,
-            valueMax: 0.5,
-            scaleType: 'percent',
-            isMain: true,
-        })
+    const values = ticks.map((tick) => tick.value)
+
+    const zeroIndex = values.indexOf(0)
+    expect(zeroIndex).toBeGreaterThan(0)
+    expect(zeroIndex).toBeLessThan(values.length - 1)
+
+    const step = values[zeroIndex - 1]! - values[zeroIndex]!
+    expect(step).toBeGreaterThan(0)
+
+    for (let i = 1; i < values.length; i++) {
+      expect(values[i - 1]! - values[i]!).toBeCloseTo(step, 10)
+    }
+
+    for (const value of values) {
+      expect(value / step).toBeCloseTo(Math.round(value / step), 10)
+    }
+  })
+
+  it('allows ticks to extend beyond the visible range', () => {
+    const ticks = calculateValueTickPositions({
+      height: 240,
+      paddingTop: 10,
+      paddingBottom: 10,
+      valueMin: -0.5,
+      valueMax: 0.5,
+      scaleType: 'percent',
+      isMain: true,
+    })
 
-        const values = ticks.map((tick) => tick.value)
-        const ys = ticks.map((tick) => tick.y)
+    const values = ticks.map((tick) => tick.value)
+    const ys = ticks.map((tick) => tick.y)
 
-        expect(values).toContain(0)
+    expect(values).toContain(0)
 
-        const hasOutside = ys.some((y) => y < 10 || y > 230)
-        expect(hasOutside).toBe(true)
-    })
+    const hasOutside = ys.some((y) => y < 10 || y > 230)
+    expect(hasOutside).toBe(true)
+  })
 })