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

package/src/engine/renderers/webgl/sharedWebGLSurface.ts

@@ -1,146 +1,170 @@
+/**
+ * SharedWebGLSurface — 单 WebGL canvas 共享后端
+ *
+ * 设计动机：浏览器对 WebGL context 数量有限制（通常 16 个），
+ * 每个 pane 独立创建 canvas → getContext('webgl2') 会快速耗尽限制。
+ * 此模块在整个 chart 实例内共享单个 WebGL canvas，所有 pane
+ * 通过 bindRegion(scissor+viewport) 在其中划分子区域绘制。
+ *
+ * 工作方式：
+ *   1. 一个隐藏 canvas 持有唯一的 WebGL2 上下文
+ *   2. 每个 pane 在共享 canvas 上绑定自己的逻辑区域
+ *   3. 绘制完成后通过 compositeRegionTo() 将共享 canvas 的
+ *      对应区域合成到 2D overlay canvas（DOM 可见层）
+ *
+ * 典型流程：
+ *   resize(paneWidth, paneHeight, dpr)    ← 不分配新 context
+ *   bindRegion({ x, y, width, height })   ← scissor + viewport
+ *   clearRegion(...) + 外部绘制调用         ← pane 内的 GL 命令
+ *   compositeRegionTo(ctx, region)        ← drawImage 到 2D canvas
+ */
 export type WebGLRegion = {
-    x: number
-    y: number
-    width: number
-    height: number
-    dpr: number
+  x: number
+  y: number
+  width: number
+  height: number
+  dpr: number
 }
 
 export type WebGLCompositeOptions = {
-    alpha?: number
-    imageSmoothingEnabled?: boolean
+  alpha?: number
+  imageSmoothingEnabled?: boolean
 }
 
 export type PhysicalRegion = {
-    sourceX: number
-    sourceY: number
-    widthPx: number
-    heightPx: number
+  sourceX: number
+  sourceY: number
+  widthPx: number
+  heightPx: number
 }
 
 export class SharedWebGLSurface {
-    private canvas: HTMLCanvasElement
-    private gl: WebGL2RenderingContext | null = null
+  private canvas: HTMLCanvasElement
+  private gl: WebGL2RenderingContext | null = null
 
-    constructor(canvas?: HTMLCanvasElement) {
-        this.canvas = canvas ?? document.createElement('canvas')
-        this.gl = this.initContext()
-    }
-
-    isAvailable(): boolean {
-        return this.gl !== null
-    }
-
-    getGL(): WebGL2RenderingContext | null {
-        return this.gl
-    }
-
-    getCanvas(): HTMLCanvasElement {
-        return this.canvas
-    }
+  constructor(canvas?: HTMLCanvasElement) {
+    this.canvas = canvas ?? document.createElement('canvas')
+    this.gl = this.initContext()
+  }
 
-    resize(width: number, height: number, dpr: number): void {
-        const nextWidth = Math.max(1, Math.round(width * dpr))
-        const nextHeight = Math.max(1, Math.round(height * dpr))
+  isAvailable(): boolean {
+    return this.gl !== null
+  }
 
-        if (this.canvas.width !== nextWidth) {
-            this.canvas.width = nextWidth
-        }
-        if (this.canvas.height !== nextHeight) {
-            this.canvas.height = nextHeight
-        }
-    }
+  getGL(): WebGL2RenderingContext | null {
+    return this.gl
+  }
 
-    getPhysicalRegion(region: WebGLRegion): PhysicalRegion | null {
-        return this.toPhysicalRegion(region)
-    }
+  getCanvas(): HTMLCanvasElement {
+    return this.canvas
+  }
 
-    bindRegion(region: WebGLRegion): boolean {
-        const gl = this.gl
-        const physical = this.toPhysicalRegion(region)
-        if (!gl || !physical) return false
+  resize(width: number, height: number, dpr: number): void {
+    const nextWidth = Math.max(1, Math.round(width * dpr))
+    const nextHeight = Math.max(1, Math.round(height * dpr))
 
-        const viewportY = this.canvas.height - physical.sourceY - physical.heightPx
-        gl.enable(gl.SCISSOR_TEST)
-        gl.viewport(physical.sourceX, viewportY, physical.widthPx, physical.heightPx)
-        gl.scissor(physical.sourceX, viewportY, physical.widthPx, physical.heightPx)
-        return true
+    if (this.canvas.width !== nextWidth) {
+      this.canvas.width = nextWidth
     }
-
-    clearRegion(region: WebGLRegion): void {
-        const gl = this.gl
-        if (!gl || !this.bindRegion(region)) return
-
-        gl.clearColor(0, 0, 0, 0)
-        gl.clear(gl.COLOR_BUFFER_BIT)
+    if (this.canvas.height !== nextHeight) {
+      this.canvas.height = nextHeight
     }
-
-    compositeRegionTo(ctx: CanvasRenderingContext2D, region: WebGLRegion, options: WebGLCompositeOptions = {}): void {
-        const physical = this.toPhysicalRegion(region)
-        if (!physical || physical.widthPx <= 0 || physical.heightPx <= 0) return
-
-        const prevImageSmoothingEnabled = ctx.imageSmoothingEnabled
-        const prevGlobalAlpha = ctx.globalAlpha
-        const prevTransform = ctx.getTransform()
-
-        if (options.imageSmoothingEnabled !== undefined) {
-            ctx.imageSmoothingEnabled = options.imageSmoothingEnabled
-        }
-        if (options.alpha !== undefined) {
-            ctx.globalAlpha = prevGlobalAlpha * options.alpha
-        }
-
-        ctx.setTransform(1, 0, 0, 1, 0, 0)
-        ctx.drawImage(
-            this.canvas,
-            physical.sourceX,
-            physical.sourceY,
-            physical.widthPx,
-            physical.heightPx,
-            0,
-            0,
-            physical.widthPx,
-            physical.heightPx,
-        )
-        ctx.setTransform(prevTransform)
-
-        ctx.globalAlpha = prevGlobalAlpha
-        ctx.imageSmoothingEnabled = prevImageSmoothingEnabled
+  }
+
+  getPhysicalRegion(region: WebGLRegion): PhysicalRegion | null {
+    return this.toPhysicalRegion(region)
+  }
+
+  bindRegion(region: WebGLRegion): boolean {
+    const gl = this.gl
+    const physical = this.toPhysicalRegion(region)
+    if (!gl || !physical) return false
+
+    const viewportY = this.canvas.height - physical.sourceY - physical.heightPx
+    gl.enable(gl.SCISSOR_TEST)
+    gl.viewport(physical.sourceX, viewportY, physical.widthPx, physical.heightPx)
+    gl.scissor(physical.sourceX, viewportY, physical.widthPx, physical.heightPx)
+    return true
+  }
+
+  clearRegion(region: WebGLRegion): void {
+    const gl = this.gl
+    if (!gl || !this.bindRegion(region)) return
+
+    gl.clearColor(0, 0, 0, 0)
+    gl.clear(gl.COLOR_BUFFER_BIT)
+  }
+
+  compositeRegionTo(
+    ctx: CanvasRenderingContext2D,
+    region: WebGLRegion,
+    options: WebGLCompositeOptions = {},
+  ): void {
+    const physical = this.toPhysicalRegion(region)
+    if (!physical || physical.widthPx <= 0 || physical.heightPx <= 0) return
+
+    const prevImageSmoothingEnabled = ctx.imageSmoothingEnabled
+    const prevGlobalAlpha = ctx.globalAlpha
+    const prevTransform = ctx.getTransform()
+
+    if (options.imageSmoothingEnabled !== undefined) {
+      ctx.imageSmoothingEnabled = options.imageSmoothingEnabled
     }
-
-    destroy(): void {
-        this.canvas.width = 1
-        this.canvas.height = 1
-        this.gl = null
+    if (options.alpha !== undefined) {
+      ctx.globalAlpha = prevGlobalAlpha * options.alpha
     }
 
-    private toPhysicalRegion(region: WebGLRegion): PhysicalRegion | null {
-        const widthPx = Math.max(0, Math.round(region.width * region.dpr))
-        const heightPx = Math.max(0, Math.round(region.height * region.dpr))
-        if (widthPx <= 0 || heightPx <= 0) return null
-
-        const sourceX = Math.max(0, Math.round(region.x * region.dpr))
-        const sourceY = Math.max(0, Math.round(region.y * region.dpr))
-        return {
-            sourceX,
-            sourceY,
-            widthPx,
-            heightPx,
-        }
+    ctx.setTransform(1, 0, 0, 1, 0, 0)
+    ctx.drawImage(
+      this.canvas,
+      physical.sourceX,
+      physical.sourceY,
+      physical.widthPx,
+      physical.heightPx,
+      0,
+      0,
+      physical.widthPx,
+      physical.heightPx,
+    )
+    ctx.setTransform(prevTransform)
+
+    ctx.globalAlpha = prevGlobalAlpha
+    ctx.imageSmoothingEnabled = prevImageSmoothingEnabled
+  }
+
+  destroy(): void {
+    this.canvas.width = 1
+    this.canvas.height = 1
+    this.gl = null
+  }
+
+  private toPhysicalRegion(region: WebGLRegion): PhysicalRegion | null {
+    const widthPx = Math.max(0, Math.round(region.width * region.dpr))
+    const heightPx = Math.max(0, Math.round(region.height * region.dpr))
+    if (widthPx <= 0 || heightPx <= 0) return null
+
+    const sourceX = Math.max(0, Math.round(region.x * region.dpr))
+    const sourceY = Math.max(0, Math.round(region.y * region.dpr))
+    return {
+      sourceX,
+      sourceY,
+      widthPx,
+      heightPx,
     }
-
-    private initContext(): WebGL2RenderingContext | null {
-        try {
-            return this.canvas.getContext('webgl2', {
-                alpha: true,
-                antialias: false,
-                depth: false,
-                stencil: false,
-                premultipliedAlpha: true,
-                preserveDrawingBuffer: false,
-            })
-        } catch {
-            return null
-        }
+  }
+
+  private initContext(): WebGL2RenderingContext | null {
+    try {
+      return this.canvas.getContext('webgl2', {
+        alpha: true,
+        antialias: false,
+        depth: false,
+        stencil: false,
+        premultipliedAlpha: true,
+        preserveDrawingBuffer: false,
+      })
+    } catch {
+      return null
     }
+  }
 }

package/src/engine/renderers/yAxis.ts

@@ -33,11 +33,15 @@ export function createYAxisRendererPlugin(options: {
         if (rightType === 'none') return
       }
 
-      const tokenColors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
+      const tokenColors = resolveThemeColors(
+        context.theme,
+        context.isAsiaMarket,
+        context.colorPresetSettings,
+      )
       const scaleType = pane.yAxis.getScaleType()
 
       const targetCtx = yAxisCtx || ctx
-      const axisWidth = yAxisCtx?.canvas ? (yAxisCtx.canvas.width / dpr) : options.axisWidth
+      const axisWidth = yAxisCtx?.canvas ? yAxisCtx.canvas.width / dpr : options.axisWidth
       const displayRange = pane.yAxis.getDisplayRange(pane.priceRange)
 
       const isPercent = scaleType === 'percent' && pane.role === 'price'
@@ -85,19 +89,25 @@ export function createYAxisRendererPlugin(options: {
         for (const label of context.yAxisLabels) {
           if (label.price == null || !Number.isFinite(label.price)) continue
           const isLastPrice = label.type === 'lastPrice'
-          drawAxisPriceLabel(targetCtx, {
-            x: 0,
-            y: pane.top,
-            width: axisWidth,
-            height: pane.height,
-            priceY: label.y + pane.top,
-            price: label.price,
-            dpr,
-            bgColor: label.style?.bgColor ?? 'rgba(0, 0, 0, 0.8)',
-            borderColor: label.style?.borderColor,
-            textColor: label.style?.textColor ?? '#ffffff',
-            fontSize: isLastPrice ? 12 : 11,
-          }, context.theme, context.isAsiaMarket, context.colorPresetSettings)
+          drawAxisPriceLabel(
+            targetCtx,
+            {
+              x: 0,
+              y: pane.top,
+              width: axisWidth,
+              height: pane.height,
+              priceY: label.y + pane.top,
+              price: label.price,
+              dpr,
+              bgColor: label.style?.bgColor ?? 'rgba(0, 0, 0, 0.8)',
+              borderColor: label.style?.borderColor,
+              textColor: label.style?.textColor ?? '#ffffff',
+              fontSize: isLastPrice ? 12 : 11,
+            },
+            context.theme,
+            context.isAsiaMarket,
+            context.colorPresetSettings,
+          )
         }
       }
 
@@ -117,20 +127,26 @@ export function createYAxisRendererPlugin(options: {
             }
           : undefined
 
-        drawCrosshairPriceLabel(targetCtx, {
-          x: 0,
-          y: pane.top,
-          width: axisWidth,
-          height: pane.height,
-          crosshairY: crosshair.y,
-          priceRange: crosshairPriceRange,
-          yPaddingPx: options.yPaddingPx,
-          dpr,
-          fontSize: 12,
-          priceOffset: 0,
-          price: crosshairPrice,
-          formatPrice,
-        }, context.theme, context.isAsiaMarket, context.colorPresetSettings)
+        drawCrosshairPriceLabel(
+          targetCtx,
+          {
+            x: 0,
+            y: pane.top,
+            width: axisWidth,
+            height: pane.height,
+            crosshairY: crosshair.y,
+            priceRange: crosshairPriceRange,
+            yPaddingPx: options.yPaddingPx,
+            dpr,
+            fontSize: 12,
+            priceOffset: 0,
+            price: crosshairPrice,
+            formatPrice,
+          },
+          context.theme,
+          context.isAsiaMarket,
+          context.colorPresetSettings,
+        )
       }
     },
   }

package/src/engine/scale/__tests__/logFormula.spec.ts

@@ -1,148 +1,148 @@
 import { describe, it, expect } from 'vitest'
 import {
-    toLog,
-    fromLog,
-    logFormulaForPriceRange,
-    convertPriceRangeToLog,
-    convertPriceRangeFromLog,
-    logFormulasAreSame,
-    type LogFormula,
+  toLog,
+  fromLog,
+  logFormulaForPriceRange,
+  convertPriceRangeToLog,
+  convertPriceRangeFromLog,
+  logFormulasAreSame,
+  type LogFormula,
 } from '../logFormula'
 
 describe('logFormula', () => {
-    const defaultFormula: LogFormula = { logicalOffset: 4, coordOffset: 0.0001 }
-
-    describe('toLog / fromLog', () => {
-        it('should round-trip for positive prices', () => {
-            const testPrices = [1, 10, 100, 0.1, 0.01, 50000, 0.0001]
-            for (const price of testPrices) {
-                const logical = toLog(price, defaultFormula)
-                const back = fromLog(logical, defaultFormula)
-                expect(back).toBeCloseTo(price, 10)
-            }
-        })
-
-        it('should round-trip for negative prices', () => {
-            const testPrices = [-1, -10, -100, -0.1, -0.01]
-            for (const price of testPrices) {
-                const logical = toLog(price, defaultFormula)
-                const back = fromLog(logical, defaultFormula)
-                expect(back).toBeCloseTo(price, 10)
-            }
-        })
-
-        it('should return 0 for zero', () => {
-            expect(toLog(0, defaultFormula)).toBe(0)
-            expect(fromLog(0, defaultFormula)).toBe(0)
-        })
-
-        it('should handle very small prices with precision', () => {
-            const tinyPrice = 1e-9
-            const logical = toLog(tinyPrice, defaultFormula)
-            const back = fromLog(logical, defaultFormula)
-            expect(back).toBeCloseTo(tinyPrice, 10)
-        })
-
-        it('should preserve sign', () => {
-            expect(toLog(100, defaultFormula)).toBeGreaterThan(0)
-            expect(toLog(-100, defaultFormula)).toBeLessThan(0)
-        })
-    })
-
-    describe('logFormulaForPriceRange', () => {
-        it('should return default formula for normal range', () => {
-            const range = { minPrice: 10, maxPrice: 100 }
-            const formula = logFormulaForPriceRange(range)
-            expect(formula.logicalOffset).toBe(4)
-            expect(formula.coordOffset).toBe(0.0001)
-        })
-
-        it('should return default formula for range >= 1', () => {
-            const range = { minPrice: 0.5, maxPrice: 2.5 }  // diff = 2
-            const formula = logFormulaForPriceRange(range)
-            expect(formula.logicalOffset).toBe(4)
-        })
-
-        it('should increase offsets for small range (< 1)', () => {
-            const range = { minPrice: 0.001, maxPrice: 0.002 }  // diff = 0.001 = 1e-3
-            const formula = logFormulaForPriceRange(range)
-            // diff = 0.001, digits = ceil(3) = 3
-            // logicalOffset = 4 + 3 = 7
-            expect(formula.logicalOffset).toBe(7)
-            expect(formula.coordOffset).toBe(1e-7)
-        })
-
-        it('should handle very small range', () => {
-            const range = { minPrice: 1e-9, maxPrice: 2e-9 }
-            const formula = logFormulaForPriceRange(range)
-            // diff = 1e-9, digits = ceil(9) = 9
-            // logicalOffset = 4 + 9 = 13
-            expect(formula.logicalOffset).toBe(13)
-            expect(formula.coordOffset).toBe(1e-13)
-        })
-
-        it('should return default formula for null range', () => {
-            const formula = logFormulaForPriceRange(null)
-            expect(formula.logicalOffset).toBe(4)
-            expect(formula.coordOffset).toBe(0.0001)
-        })
-
-        it('should return default formula for zero diff', () => {
-            const range = { minPrice: 100, maxPrice: 100 }
-            const formula = logFormulaForPriceRange(range)
-            expect(formula.logicalOffset).toBe(4)
-        })
-    })
-
-    describe('convertPriceRangeToLog / convertPriceRangeFromLog', () => {
-        it('should round-trip range conversion', () => {
-            const range = { minPrice: 10, maxPrice: 1000 }
-            const logRange = convertPriceRangeToLog(range, defaultFormula)
-            const back = convertPriceRangeFromLog(logRange, defaultFormula)
-            expect(back.minPrice).toBeCloseTo(range.minPrice, 10)
-            expect(back.maxPrice).toBeCloseTo(range.maxPrice, 10)
-        })
-    })
-
-    describe('logFormulasAreSame', () => {
-        it('should return true for identical formulas', () => {
-            const a: LogFormula = { logicalOffset: 4, coordOffset: 0.0001 }
-            const b: LogFormula = { logicalOffset: 4, coordOffset: 0.0001 }
-            expect(logFormulasAreSame(a, b)).toBe(true)
-        })
-
-        it('should return false for different offsets', () => {
-            const a: LogFormula = { logicalOffset: 4, coordOffset: 0.0001 }
-            const b: LogFormula = { logicalOffset: 5, coordOffset: 0.0001 }
-            expect(logFormulasAreSame(a, b)).toBe(false)
-        })
-
-        it('should return false for different coordOffsets', () => {
-            const a: LogFormula = { logicalOffset: 4, coordOffset: 0.0001 }
-            const b: LogFormula = { logicalOffset: 4, coordOffset: 0.001 }
-            expect(logFormulasAreSame(a, b)).toBe(false)
-        })
-    })
-
-    describe('precision with dynamic formula', () => {
-        it('should maintain precision for crypto-scale prices', () => {
-            const range = { minPrice: 1e-9, maxPrice: 5e-9 }
-            const formula = logFormulaForPriceRange(range)
-
-            // Test that we can represent values in this range accurately
-            const testPrice = 2.5e-9
-            const logical = toLog(testPrice, formula)
-            const back = fromLog(logical, formula)
-            expect(back).toBeCloseTo(testPrice, 10)
-        })
-
-        it('should handle nano-scale prices', () => {
-            const range = { minPrice: 1e-12, maxPrice: 2e-12 }
-            const formula = logFormulaForPriceRange(range)
-            const testPrice = 1.5e-12
-            const logical = toLog(testPrice, formula)
-            const back = fromLog(logical, formula)
-            expect(back).toBeCloseTo(testPrice, 10)
-        })
+  const defaultFormula: LogFormula = { logicalOffset: 4, coordOffset: 0.0001 }
+
+  describe('toLog / fromLog', () => {
+    it('should round-trip for positive prices', () => {
+      const testPrices = [1, 10, 100, 0.1, 0.01, 50000, 0.0001]
+      for (const price of testPrices) {
+        const logical = toLog(price, defaultFormula)
+        const back = fromLog(logical, defaultFormula)
+        expect(back).toBeCloseTo(price, 10)
+      }
     })
+
+    it('should round-trip for negative prices', () => {
+      const testPrices = [-1, -10, -100, -0.1, -0.01]
+      for (const price of testPrices) {
+        const logical = toLog(price, defaultFormula)
+        const back = fromLog(logical, defaultFormula)
+        expect(back).toBeCloseTo(price, 10)
+      }
+    })
+
+    it('should return 0 for zero', () => {
+      expect(toLog(0, defaultFormula)).toBe(0)
+      expect(fromLog(0, defaultFormula)).toBe(0)
+    })
+
+    it('should handle very small prices with precision', () => {
+      const tinyPrice = 1e-9
+      const logical = toLog(tinyPrice, defaultFormula)
+      const back = fromLog(logical, defaultFormula)
+      expect(back).toBeCloseTo(tinyPrice, 10)
+    })
+
+    it('should preserve sign', () => {
+      expect(toLog(100, defaultFormula)).toBeGreaterThan(0)
+      expect(toLog(-100, defaultFormula)).toBeLessThan(0)
+    })
+  })
+
+  describe('logFormulaForPriceRange', () => {
+    it('should return default formula for normal range', () => {
+      const range = { minPrice: 10, maxPrice: 100 }
+      const formula = logFormulaForPriceRange(range)
+      expect(formula.logicalOffset).toBe(4)
+      expect(formula.coordOffset).toBe(0.0001)
+    })
+
+    it('should return default formula for range >= 1', () => {
+      const range = { minPrice: 0.5, maxPrice: 2.5 } // diff = 2
+      const formula = logFormulaForPriceRange(range)
+      expect(formula.logicalOffset).toBe(4)
+    })
+
+    it('should increase offsets for small range (< 1)', () => {
+      const range = { minPrice: 0.001, maxPrice: 0.002 } // diff = 0.001 = 1e-3
+      const formula = logFormulaForPriceRange(range)
+      // diff = 0.001, digits = ceil(3) = 3
+      // logicalOffset = 4 + 3 = 7
+      expect(formula.logicalOffset).toBe(7)
+      expect(formula.coordOffset).toBe(1e-7)
+    })
+
+    it('should handle very small range', () => {
+      const range = { minPrice: 1e-9, maxPrice: 2e-9 }
+      const formula = logFormulaForPriceRange(range)
+      // diff = 1e-9, digits = ceil(9) = 9
+      // logicalOffset = 4 + 9 = 13
+      expect(formula.logicalOffset).toBe(13)
+      expect(formula.coordOffset).toBe(1e-13)
+    })
+
+    it('should return default formula for null range', () => {
+      const formula = logFormulaForPriceRange(null)
+      expect(formula.logicalOffset).toBe(4)
+      expect(formula.coordOffset).toBe(0.0001)
+    })
+
+    it('should return default formula for zero diff', () => {
+      const range = { minPrice: 100, maxPrice: 100 }
+      const formula = logFormulaForPriceRange(range)
+      expect(formula.logicalOffset).toBe(4)
+    })
+  })
+
+  describe('convertPriceRangeToLog / convertPriceRangeFromLog', () => {
+    it('should round-trip range conversion', () => {
+      const range = { minPrice: 10, maxPrice: 1000 }
+      const logRange = convertPriceRangeToLog(range, defaultFormula)
+      const back = convertPriceRangeFromLog(logRange, defaultFormula)
+      expect(back.minPrice).toBeCloseTo(range.minPrice, 10)
+      expect(back.maxPrice).toBeCloseTo(range.maxPrice, 10)
+    })
+  })
+
+  describe('logFormulasAreSame', () => {
+    it('should return true for identical formulas', () => {
+      const a: LogFormula = { logicalOffset: 4, coordOffset: 0.0001 }
+      const b: LogFormula = { logicalOffset: 4, coordOffset: 0.0001 }
+      expect(logFormulasAreSame(a, b)).toBe(true)
+    })
+
+    it('should return false for different offsets', () => {
+      const a: LogFormula = { logicalOffset: 4, coordOffset: 0.0001 }
+      const b: LogFormula = { logicalOffset: 5, coordOffset: 0.0001 }
+      expect(logFormulasAreSame(a, b)).toBe(false)
+    })
+
+    it('should return false for different coordOffsets', () => {
+      const a: LogFormula = { logicalOffset: 4, coordOffset: 0.0001 }
+      const b: LogFormula = { logicalOffset: 4, coordOffset: 0.001 }
+      expect(logFormulasAreSame(a, b)).toBe(false)
+    })
+  })
+
+  describe('precision with dynamic formula', () => {
+    it('should maintain precision for crypto-scale prices', () => {
+      const range = { minPrice: 1e-9, maxPrice: 5e-9 }
+      const formula = logFormulaForPriceRange(range)
+
+      // Test that we can represent values in this range accurately
+      const testPrice = 2.5e-9
+      const logical = toLog(testPrice, formula)
+      const back = fromLog(logical, formula)
+      expect(back).toBeCloseTo(testPrice, 10)
+    })
+
+    it('should handle nano-scale prices', () => {
+      const range = { minPrice: 1e-12, maxPrice: 2e-12 }
+      const formula = logFormulaForPriceRange(range)
+      const testPrice = 1.5e-12
+      const logical = toLog(testPrice, formula)
+      const back = fromLog(logical, formula)
+      expect(back).toBeCloseTo(testPrice, 10)
+    })
+  })
 })