@sketch-ruler/canvas 3.0.0-beta.0

package/AGENTS.md

@@ -0,0 +1,155 @@
+# @sketch-ruler/canvas 项目指南
+
+> 本文件面向 AI Coding Agent，用于快速理解 `@sketch-ruler/canvas` 的结构、API 与开发约定。
+
+---
+
+## 包概述
+
+`@sketch-ruler/canvas` 是 **框架无关** 的 Canvas 2D 渲染器与 DOM 输入管理器。职责：
+
+- Canvas 2D 标尺渲染（Canvas2DRenderer）
+- 离屏缓存（OffscreenRulerCache）
+- 标签缓存（LabelCache）
+- 鼠标/键盘/滚轮事件适配（InputManager、MouseAdapter、KeyboardAdapter）
+- 滚轮标准化（WheelNormalizer）
+
+**唯一外部依赖**：`@sketch-ruler/core`
+
+---
+
+## 目录结构
+
+```
+src/
+├── renderers/        # Canvas 2D 渲染器与缓存
+│   ├── canvas-2d-renderer.ts
+│   ├── offscreen-ruler-cache.ts
+│   ├── label-cache.ts
+│   ├── types.ts
+│   └── index.ts
+├── input/            # DOM 输入管理
+│   ├── input-manager.ts      # 统一输入入口
+│   ├── mouse-adapter.ts      # 鼠标事件封装
+│   ├── keyboard-adapter.ts   # 键盘快捷键
+│   ├── wheel-normalizer.ts   # 滚轮标准化
+│   └── index.ts
+└── index.ts          # 统一导出入口
+```
+
+---
+
+## 构建与测试
+
+```bash
+# 安装依赖（在根目录执行）
+pnpm i
+
+# 构建本包
+cd packages/canvas && pnpm build
+
+# 运行测试
+cd packages/canvas && pnpm test
+
+# 测试监听模式
+cd packages/canvas && pnpm test:watch
+```
+
+---
+
+## 编码约定
+
+- **语言**：TypeScript 5.9+，strict 模式
+- **模块**：ESM（`"type": "module"`）
+- **DOM 依赖**：本包是唯一允许直接操作 DOM 和 Canvas 2D API 的包
+- **事件绑定**：所有 DOM 事件监听器必须在 `destroy()` / `unbind()` 中清理，避免内存泄漏
+- **命名**：
+  - 类名：PascalCase（`InputManager`、`Canvas2DRenderer`）
+  - 回调接口：以 `Callbacks` 结尾（`MouseAdapterCallbacks`）
+
+---
+
+## 关键 API 速查
+
+### InputManager
+
+```ts
+const input = new InputManager(engine, {
+  zoomStep: 0.25,
+  zoomMode: 'pointer',          // 'pointer' | 'viewport-center' | 'content-center'
+  viewportSize: { width, height },
+  contentSize: { width, height },
+  onCursorChange: (cls) => { }  // 'default' | 'grab' | 'grabbing'
+})
+input.bind(containerElement)    // 事件绑定到 container.parentElement
+input.setZoomMode(mode)
+input.getCursorClass()
+input.destroy()                 // 清理所有事件监听
+```
+
+**内置交互**：
+- `Ctrl/Cmd + 滚轮`：缩放
+- `Space + 鼠标左键拖拽`：平移
+- `Ctrl+0`：100% 缩放
+- `Ctrl++` / `Ctrl+-`：放大/缩小
+- `Ctrl+1`：适配视口
+
+### Canvas2DRenderer
+
+```ts
+const renderer = new Canvas2DRenderer(canvasElement)
+renderer.render({
+  width, height, scale, offset,
+  vertical: false,   // false=水平, true=垂直
+  thick, marks, config, palette
+})
+```
+
+### 底层适配器（自行组合）
+
+```ts
+const mouse = new MouseAdapter(parent, callbacks)
+mouse.bind()
+mouse.unbind()
+
+const kb = new KeyboardAdapter({ onShortcut: (combo, e) => { } })
+kb.bind()
+kb.unbind()
+```
+
+---
+
+## 子路径导出
+
+| 路径 | 用途 |
+|------|------|
+| `@sketch-ruler/canvas` | 完整导出 |
+| `@sketch-ruler/canvas/renderers` | 仅渲染器与缓存 |
+| `@sketch-ruler/canvas/input` | 仅输入管理层 |
+
+---
+
+## 与 @sketch-ruler/core 的协作
+
+```ts
+import { TransformEngine, computeScaleMarks, getTickConfig } from '@sketch-ruler/core'
+import { InputManager, Canvas2DRenderer } from '@sketch-ruler/canvas'
+
+const engine = new TransformEngine({ x: 0, y: 0, scale: 1 })
+const input = new InputManager(engine, { zoomMode: 'pointer' })
+input.bind(canvasElement)
+
+engine.onUpdate((state) => {
+  content.style.transform = `matrix(${state.scale}, 0, 0, ${state.scale}, ${state.x}, ${state.y})`
+  const marks = computeScaleMarks({ scale: state.scale, offset: state.x, length, thick, config })
+  renderer.render({ ... })
+})
+```
+
+---
+
+## 注意事项
+
+- `InputManager.bind(container)` 实际将滚轮/鼠标事件绑定到 `container.parentElement`，因此 `parentElement` 必须存在
+- `MouseAdapter` 的 `onWheel` 回调接收 `(WheelEvent, NormalizedWheel)`，滚轮标准化逻辑在 `WheelNormalizer` 中
+- 新增 DOM 事件相关逻辑时，请务必提供对应的解绑方法，确保 `destroy()` 能完整清理

package/README.md

@@ -0,0 +1,224 @@
+# @sketch-ruler/canvas
+
+> 框架无关的 Canvas 2D 渲染器与 DOM 输入管理器。负责标尺绘制、离屏缓存、鼠标/键盘/滚轮事件适配。依赖 `@sketch-ruler/core`。
+
+## 安装
+
+```bash
+npm install @sketch-ruler/canvas
+# 或
+pnpm add @sketch-ruler/canvas
+```
+
+## 快速上手
+
+### InputManager — 统一输入管理
+
+绑定到画布容器，自动处理 **Ctrl+滚轮缩放**、**空格+拖拽平移**、**键盘快捷键**（Ctrl+0 / Ctrl++/Ctrl+-）。
+
+```ts
+import { InputManager } from '@sketch-ruler/canvas'
+import { TransformEngine } from '@sketch-ruler/core'
+
+const engine = new TransformEngine({ x: 0, y: 0, scale: 1 })
+
+const inputManager = new InputManager(engine, {
+  zoomStep: 0.25,           // 滚轮缩放步长
+  zoomMode: 'pointer',      // 'pointer' | 'viewport-center' | 'content-center'
+  viewportSize: { width: 1470, height: 700 },
+  contentSize: { width: 1920, height: 1080 },
+  onCursorChange: (cls) => {
+    // cls: 'default' | 'grab' | 'grabbing'
+    container.className = cls
+  }
+})
+
+// 绑定到画布 DOM（事件实际绑定到 parentElement）
+inputManager.bind(canvasElement)
+
+// 动态切换缩放模式
+inputManager.setZoomMode('viewport-center')
+
+// 获取当前光标类名
+const cursorClass = inputManager.getCursorClass()
+
+// 清理
+inputManager.destroy()
+```
+
+**事件处理细节：**
+
+- **滚轮缩放**：按住 `Ctrl` / `Cmd` + 滚轮，以 `zoomMode` 指定的原点进行缩放
+- **空格拖拽**：按住 `Space` + 鼠标左键拖拽平移
+- **键盘快捷键**：
+  - `Ctrl+0`：缩放到 100%
+  - `Ctrl++` / `Ctrl+=`：放大
+  - `Ctrl+-`：缩小
+  - `Ctrl+1`：适配视口（留 5% 边距）
+
+### Canvas2DRenderer — Canvas 2D 标尺渲染器
+
+```ts
+import { Canvas2DRenderer } from '@sketch-ruler/canvas'
+
+const canvas = document.getElementById('ruler') as HTMLCanvasElement
+const renderer = new Canvas2DRenderer(canvas)
+
+renderer.render({
+  width: 1400,
+  height: 20,
+  scale: 1,
+  offset: 0,
+  vertical: false,          // false=水平标尺, true=垂直标尺
+  thick: 20,
+  marks: scaleMarks,        // 由 core 的 computeScaleMarks 生成
+  config: tickConfig,
+  palette: {
+    bgColor: '#f6f7f9',
+    tickColor: '#BABBBC',
+    labelColor: '#7D8694',
+    borderColor: '#eeeeef'
+  }
+})
+```
+
+### 离屏缓存 — OffscreenRulerCache
+
+用于频繁重绘场景，将标尺渲染到 OffscreenCanvas 再 blit 到主 Canvas。
+
+```ts
+import { OffscreenRulerCache } from '@sketch-ruler/canvas'
+
+const cache = new OffscreenRulerCache({ width: 1400, height: 20 })
+
+cache.draw((ctx) => {
+  // 使用 Canvas 2D 上下文绘制标尺
+  ctx.fillStyle = '#f6f7f9'
+  ctx.fillRect(0, 0, 1400, 20)
+  // ... 绘制刻度
+})
+
+// 将缓存绘制到主 Canvas
+ctx.drawImage(cache.canvas, 0, 0)
+```
+
+### 标签缓存 — LabelCache
+
+缓存刻度文字标签，避免每帧重复测量文本。
+
+```ts
+import { LabelCache } from '@sketch-ruler/canvas'
+
+const labelCache = new LabelCache()
+
+// 获取或创建标签
+const label = labelCache.get('100px', '12px Arial')
+// label: { text: '100px', width: number, bitmap: ImageBitmap }
+```
+
+### 滚轮标准化 — WheelNormalizer
+
+将不同浏览器/操作系统的滚轮事件统一为标准格式。
+
+```ts
+import { normalizeWheel, getZoomDelta } from '@sketch-ruler/canvas'
+
+canvas.addEventListener('wheel', (e) => {
+  const normalized = normalizeWheel(e)
+  // normalized: { pixelX, pixelY, spinX, spinY }
+
+  const delta = getZoomDelta(normalized, { zoomSpeed: 0.25 })
+  engine.zoomBy(delta, e.clientX, e.clientY)
+})
+```
+
+### 底层适配器（自行组合事件）
+
+如果你不想用 `InputManager`，可以直接使用底层适配器：
+
+```ts
+import { MouseAdapter } from '@sketch-ruler/canvas'
+import type { MouseAdapterCallbacks } from '@sketch-ruler/canvas'
+
+const adapter = new MouseAdapter(parentElement, {
+  onWheel: (e, normalized) => {
+    // 自定义滚轮处理
+  },
+  onMouseDown: (e) => {
+    // 自定义鼠标按下
+  },
+  onMouseMove: (e) => {
+    // 自定义鼠标移动
+  },
+  onMouseUp: (e) => {
+    // 自定义鼠标抬起
+  },
+  onMouseEnter: () => {},
+  onMouseLeave: () => {}
+} as MouseAdapterCallbacks)
+
+adapter.bind()
+// adapter.unbind()
+```
+
+```ts
+import { KeyboardAdapter } from '@sketch-ruler/canvas'
+import type { KeyCombo } from '@sketch-ruler/canvas'
+
+const kb = new KeyboardAdapter({
+  onShortcut: (combo: KeyCombo, e: KeyboardEvent) => {
+    // combo: 'ctrl+0' | 'ctrl+plus' | 'ctrl+minus' | 'space' | ...
+    console.log('shortcut', combo)
+  }
+})
+
+kb.bind()
+// kb.unbind()
+```
+
+## API 概览
+
+| 导出 | 类型 | 说明 |
+|------|------|------|
+| `InputManager` | 类 | 统一输入管理（滚轮/拖拽/键盘） |
+| `MouseAdapter` | 类 | 鼠标事件封装（wheel/mousedown/mousemove/mouseup） |
+| `KeyboardAdapter` | 类 | 键盘快捷键封装 |
+| `normalizeWheel` | 函数 | 滚轮事件标准化 |
+| `getZoomDelta` | 函数 | 从标准化滚轮计算缩放增量 |
+| `Canvas2DRenderer` | 类 | Canvas 2D 标尺渲染器 |
+| `OffscreenRulerCache` | 类 | 离屏标尺缓存 |
+| `LabelCache` | 类 | 刻度标签缓存 |
+
+## 与 @sketch-ruler/core 的配合
+
+```ts
+import { TransformEngine, computeScaleMarks, getTickConfig } from '@sketch-ruler/core'
+import { InputManager, Canvas2DRenderer } from '@sketch-ruler/canvas'
+
+// 1. 创建引擎
+const engine = new TransformEngine({ x: 0, y: 0, scale: 1 })
+
+// 2. 绑定输入
+const input = new InputManager(engine, { zoomMode: 'pointer' })
+input.bind(canvasElement)
+
+// 3. 监听状态并渲染
+engine.onUpdate((state) => {
+  // 更新 DOM transform
+  content.style.transform = `matrix(${state.scale}, 0, 0, ${state.scale}, ${state.x}, ${state.y})`
+
+  // 渲染标尺
+  const marks = computeScaleMarks({
+    scale: state.scale,
+    offset: state.x,
+    length: 1400,
+    thick: 20,
+    config: getTickConfig(state.scale)
+  })
+  renderer.render({ width: 1400, height: 20, scale: state.scale, offset: state.x, marks })
+})
+```
+
+## License
+
+MIT

package/lib/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=class{canvas=null;ctx=null;lastFingerprint=``;drawStatic(e,t,n){let r=this.buildFingerprint(t,n);return(r!==this.lastFingerprint||!this.canvas)&&(this.rebuild(t,n),this.lastFingerprint=r),this.canvas?(e.drawImage(this.canvas,0,0),!0):!1}rebuild(e,t){let{width:n,height:r,ratio:i,palette:a,thick:o,vertical:s}=t;this.canvas||=document.createElement(`canvas`),this.canvas.width=Math.round(n*i),this.canvas.height=Math.round(r*i);let c=this.canvas.getContext(`2d`);this.ctx=c,c.setTransform(1,0,0,1,0,0),c.scale(i,i),c.clearRect(0,0,n,r),c.fillStyle=a.bgColor,c.fillRect(0,0,n,r),c.strokeStyle=a.tickColor,c.lineWidth=1,c.beginPath();for(let i of e){let e=i.position;i.isMajor?i.value===0||i.value===t.canvasSize?s?(c.moveTo(0,e),c.lineTo(n,e)):(c.moveTo(e,0),c.lineTo(e,r)):s?(c.moveTo(n,e),c.lineTo(n*.65,e)):(c.moveTo(e,r),c.lineTo(e,r*.65)):s?(c.moveTo(n,e),c.lineTo(n*.8,e)):(c.moveTo(e,r),c.lineTo(e,r*.8))}c.stroke(),c.closePath()}buildFingerprint(e,t){let{thick:n,palette:r,vertical:i,width:a,height:o}=t,s=e.length>1?e[1].value-e[0].value:0,c=1,l=0;if(e.length>=2){let t=e[0],n=e.find(e=>e.value!==t.value)??e[1];n&&n.value!==t.value&&(c=(n.position-t.position)/(n.value-t.value),l=t.position-t.value*c)}return`${n}:${r.bgColor}:${r.tickColor}:${r.labelColor}:${i}:${a}:${o}:${s}:${c.toFixed(4)}:${l.toFixed(2)}`}clear(){this.canvas=null,this.ctx=null,this.lastFingerprint=``}},t=class{cache=new Map;maxSize;constructor(e=500){this.maxSize=e}get(e,t){let n=this.hashKey(t),r=this.cache.get(n);if(r)return this.cache.delete(n),this.cache.set(n,r),r;let i=this.createEntry(e,t);return this.cache.set(n,i),this.evictIfNeeded(),i}createEntry(e,t){let{text:n,font:r,color:i}=t;e.font=r;let a=e.measureText(n),o=Math.ceil(a.width),s=Math.ceil(a.actualBoundingBoxAscent+a.actualBoundingBoxDescent)||12;if(o===0||s===0)return{canvas:document.createElement(`canvas`),width:0,height:0};let c=document.createElement(`canvas`);c.width=o+2,c.height=s+2;let l=c.getContext(`2d`);return l.font=r,l.fillStyle=i,l.textBaseline=`alphabetic`,l.fillText(n,1,1+a.actualBoundingBoxAscent),{canvas:c,width:o,height:s}}evictIfNeeded(){if(this.cache.size<=this.maxSize)return;let e=this.cache.keys().next().value;e!==void 0&&this.cache.delete(e)}hashKey(e){return`${e.text}:${e.font}:${e.color}`}clear(){this.cache.clear()}size(){return this.cache.size}},n=`#e9f7fe`,r=class{offscreenCache=new e;labelCache=new t;render(e,t,n){for(let r of t)r.type===`ruler`&&this.renderRuler(e,r,n)}renderRuler(e,t,r){let{marks:i,vertical:a,thick:o,width:s,height:c,ratio:l,palette:u,shadowStart:d,shadowLength:f,showShadowText:p}=t;e.setTransform(1,0,0,1,0,0),e.scale(l,l),e.clearRect(0,0,s,c),this.offscreenCache.drawStatic(e,i,t);let m=[];if(f&&i.length>0){let t=d??0,r=i[0],l=i.find(e=>e.value!==r.value)??r,h=l&&l.value!==r.value?(l.position-r.position)/(l.value-r.value):1,g=r.position-r.value*h,_=t*h+g,v=f*h;if(v>0&&(e.fillStyle=u.shadowColor??n,a?e.fillRect(0,_,s,v):e.fillRect(_,0,v,c),p)){this.renderShadowText(e,t,_,o,a,u,!1);let n=t+f,r=n*h+g;this.renderShadowText(e,n,r,o,a,u,!0),m.push(_,r)}}for(let n of i)if(n.isMajor&&n.label){if(m.some(e=>Math.abs(n.position-e)<o*1.5))continue;e.save(),e.fillStyle=u.labelColor,e.font=`${Math.max(11,Math.floor(o*.5)+2)}px -apple-system, "Helvetica Neue", ".SFNSDisplay-Regular", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif`,a?(n.value===0?e.translate(s*.4,n.position-3):n.value===t.canvasSize?e.translate(s*.2,n.position+32):e.translate(s*.15,n.position+14),e.rotate(-90*Math.PI/180),e.fillText(n.label,4,9)):(n.value===0?e.translate(n.position-15,c*.13):n.value===t.canvasSize?e.translate(n.position+5,c*.3):e.translate(n.position-12,c*.18),e.fillText(n.label,4,9)),e.restore()}}renderShadowText(e,t,n,r,i,a,o){e.save(),e.fillStyle=a.labelColor,e.font=`bold 12px sans-serif`,i?(e.translate(r*.6,n+(o?-8:8)),e.rotate(-Math.PI/2)):e.translate(n+(o?-8:8),r*.6),e.fillText(Math.round(t).toString(),0,0),e.restore()}destroy(){this.offscreenCache.clear(),this.labelCache.clear()}};function i(e){let t=e.deltaX,n=e.deltaY,r=e.deltaZ||0,i=e.deltaMode;return i===WheelEvent.DOM_DELTA_LINE?(t*=40,n*=40,r*=40):i===WheelEvent.DOM_DELTA_PAGE&&(t*=800,n*=800,r*=800),{deltaX:t,deltaY:n,deltaZ:r,deltaMode:i}}function a(e,t=.001){let n=i(e);return-(n.deltaY===0?n.deltaX:n.deltaY)*t}var o=class{container;callbacks;boundWheel;boundMouseDown;boundMouseMove;boundMouseUp;boundMouseEnter;boundMouseLeave;isBound=!1;constructor(e,t){this.container=e,this.callbacks=t,this.boundWheel=this.handleWheel.bind(this),this.boundMouseDown=this.handleMouseDown.bind(this),this.boundMouseMove=this.handleMouseMove.bind(this),this.boundMouseUp=this.handleMouseUp.bind(this),this.boundMouseEnter=()=>this.callbacks.onMouseEnter?.(),this.boundMouseLeave=()=>this.callbacks.onMouseLeave?.()}bind(){this.isBound||(this.isBound=!0,this.container.addEventListener(`wheel`,this.boundWheel,{passive:!1}),this.container.addEventListener(`mousedown`,this.boundMouseDown),document.addEventListener(`mousemove`,this.boundMouseMove),document.addEventListener(`mouseup`,this.boundMouseUp),this.container.addEventListener(`mouseenter`,this.boundMouseEnter),this.container.addEventListener(`mouseleave`,this.boundMouseLeave))}unbind(){this.isBound&&(this.isBound=!1,this.container.removeEventListener(`wheel`,this.boundWheel),this.container.removeEventListener(`mousedown`,this.boundMouseDown),document.removeEventListener(`mousemove`,this.boundMouseMove),document.removeEventListener(`mouseup`,this.boundMouseUp),this.container.removeEventListener(`mouseenter`,this.boundMouseEnter),this.container.removeEventListener(`mouseleave`,this.boundMouseLeave))}handleWheel(e){let t=i(e);this.callbacks.onWheel?.(e,t)}handleMouseDown(e){this.callbacks.onMouseDown?.(e)}handleMouseMove(e){this.callbacks.onMouseMove?.(e)}handleMouseUp(e){this.callbacks.onMouseUp?.(e)}},s=class{callbacks;boundKeyDown;isBound=!1;constructor(e){this.callbacks=e,this.boundKeyDown=this.handleKeyDown.bind(this)}bind(){this.isBound||(this.isBound=!0,document.addEventListener(`keydown`,this.boundKeyDown))}unbind(){this.isBound&&(this.isBound=!1,document.removeEventListener(`keydown`,this.boundKeyDown))}handleKeyDown(e){if(e.repeat)return;let t=document.activeElement;if(t?.closest(`.monaco-editor`)||t?.tagName===`INPUT`||t?.tagName===`TEXTAREA`||t?.getAttribute(`contenteditable`)===`true`)return;let n=this.parseCombo(e);this.callbacks.onShortcut?.(n,e)}parseCombo(e){let t=[];(e.ctrlKey||e.metaKey)&&t.push(`ctrl`),e.altKey&&t.push(`alt`),e.shiftKey&&t.push(`shift`);let n=e.key.toLowerCase();return n===` `&&(n=`space`),n===`+`&&(n=`plus`),n===`-`&&(n=`minus`),n===`=`&&(n=`equal`),t.push(n),t.join(`+`)}},c=class{engine;zoomStep;selfHandle;zoomMode;viewportSize;contentSize;container=null;mouseAdapter=null;isSpacePressed=!1;isDragging=!1;dragStart={x:0,y:0};lastMouse={x:0,y:0};isHovered=!1;boundKeyUp;keyboardAdapter=null;pendingWheelDelta=0;wheelRafId=null;onCursorChange=null;zoomInterceptor=null;panInterceptor=null;constructor(e,t={}){this.engine=e,this.zoomStep=t.zoomStep??.25,this.selfHandle=t.selfHandle??!1,this.zoomMode=t.zoomMode??`pointer`,this.viewportSize=t.viewportSize??{width:0,height:0},this.contentSize=t.contentSize??{width:0,height:0},this.onCursorChange=t.onCursorChange??null,this.zoomInterceptor=t.zoomInterceptor??null,this.panInterceptor=t.panInterceptor??null,this.boundKeyUp=this.handleKeyUp.bind(this)}bind(e){if(this.selfHandle)return;this.unbind(),this.container=e;let t=e.parentElement;if(!t)return;document.addEventListener(`keyup`,this.boundKeyUp);let n={onWheel:this.handleWheel.bind(this),onMouseDown:this.handleMouseDown.bind(this),onMouseMove:this.handleMouseMove.bind(this),onMouseUp:this.handleMouseUp.bind(this),onMouseEnter:()=>{this.isHovered=!0},onMouseLeave:()=>{this.isHovered=!1}};this.mouseAdapter=new o(t,n),this.mouseAdapter.bind(),this.keyboardAdapter=new s({onShortcut:this.handleShortcut.bind(this)}),this.keyboardAdapter.bind()}unbind(){this.mouseAdapter?.unbind(),this.mouseAdapter=null,this.keyboardAdapter?.unbind(),this.keyboardAdapter=null,document.removeEventListener(`keyup`,this.boundKeyUp),this.container=null}destroy(){this.wheelRafId!==null&&(cancelAnimationFrame(this.wheelRafId),this.wheelRafId=null),this.unbind()}setZoomMode(e){this.zoomMode=e}handleWheel(e){if(e.ctrlKey||e.metaKey){e.preventDefault();let t=this.container?.parentElement,n=t?t.getBoundingClientRect():new DOMRect(0,0,0,0),r,i;switch(this.zoomMode){case`viewport-center`:r=this.viewportSize.width/2,i=this.viewportSize.height/2;break;case`content-center`:{let e=this.engine.getState();r=e.x+this.contentSize.width*e.scale/2,i=e.y+this.contentSize.height*e.scale/2;break}default:r=e.clientX-n.left,i=e.clientY-n.top;break}let a=e.deltaY===0?e.deltaX:e.deltaY;this.pendingWheelDelta+=a<0?1:-1,this.wheelRafId===null&&(this.wheelRafId=requestAnimationFrame(()=>{if(this.wheelRafId=null,this.pendingWheelDelta===0)return;let e=this.engine.getState().scale,t=e*Math.exp(this.pendingWheelDelta*this.zoomStep/3);this.pendingWheelDelta=0,this.executeZoom(()=>this.engine.zoomTo(t,r,i),e,t,r,i)}))}}handleShortcut(e,t){if(!this.isHovered)return;let n=this.viewportSize.width/2,r=this.viewportSize.height/2,i=e=>{e()};switch(e){case`ctrl+0`:t.preventDefault(),i(()=>this.executeZoom(()=>this.engine.zoomTo(1,n,r),this.engine.getState().scale,1,n,r));break;case`ctrl+minus`:{t.preventDefault();let e=this.engine.getState().scale,a=e-this.zoomStep;i(()=>this.executeZoom(()=>this.engine.zoomBy(-this.zoomStep,n,r),e,a,n,r));break}case`ctrl+equal`:case`ctrl+plus`:{t.preventDefault();let e=this.engine.getState().scale,a=e+this.zoomStep;i(()=>this.executeZoom(()=>this.engine.zoomBy(this.zoomStep,n,r),e,a,n,r));break}case`ctrl+1`:{t.preventDefault();let e=this.viewportSize.width,a=this.viewportSize.height,o=this.contentSize.width,s=this.contentSize.height;if(e>0&&a>0&&o>0&&s>0){let t=e*.9/o,c=a*.9/s,l=Math.min(t,c),u=(e-o*l)/2,d=(a-s*l)/2,f=this.engine.getState().scale;i(()=>this.executeZoom(()=>this.engine.setTransform({scale:l,x:u,y:d}),f,l,n,r))}break}case`space`:this.isSpacePressed||(this.isSpacePressed=!0,t.preventDefault(),this.notifyCursorChange());break;default:break}}handleKeyUp(e){e.key===` `&&(this.isSpacePressed=!1,this.isDragging=!1,this.notifyCursorChange())}handleMouseDown(e){this.isSpacePressed&&e.button===0&&(this.isDragging=!0,this.dragStart={x:e.clientX,y:e.clientY},this.lastMouse={x:e.clientX,y:e.clientY},e.preventDefault(),this.notifyCursorChange())}async handleMouseMove(e){if(this.isDragging&&this.isSpacePressed){let t=e.clientX-this.lastMouse.x,n=e.clientY-this.lastMouse.y;(!this.panInterceptor?.beforePan||await this.panInterceptor.beforePan(t,n))&&(this.engine.panBy(t,n),this.panInterceptor?.afterPan?.(t,n)),this.lastMouse={x:e.clientX,y:e.clientY}}}handleMouseUp(){this.isDragging=!1,this.notifyCursorChange()}async executeZoom(e,t,n,r,i){(!this.zoomInterceptor?.beforeZoom||await this.zoomInterceptor.beforeZoom(t,n,r,i))&&(e(),this.zoomInterceptor?.afterZoom?.(t,this.engine.getState().scale,r,i))}getCursorClass(){return this.isSpacePressed?this.isDragging?`grabbing`:`grab`:`default`}notifyCursorChange(){this.onCursorChange?.(this.getCursorClass())}};exports.Canvas2DRenderer=r,exports.InputManager=c,exports.KeyboardAdapter=s,exports.LabelCache=t,exports.MouseAdapter=o,exports.OffscreenRulerCache=e,exports.getZoomDelta=a,exports.normalizeWheel=i;

package/lib/index.d.ts

@@ -0,0 +1,13 @@
+export type { Renderer, Rect, RulerRenderPayload, RenderItem } from './renderers/types';
+export { Canvas2DRenderer } from './renderers/canvas-2d-renderer';
+export { OffscreenRulerCache } from './renderers/offscreen-ruler-cache';
+export { LabelCache } from './renderers/label-cache';
+export { InputManager } from './input/input-manager';
+export { MouseAdapter } from './input/mouse-adapter';
+export { KeyboardAdapter } from './input/keyboard-adapter';
+export { normalizeWheel, getZoomDelta } from './input/wheel-normalizer';
+export type { NormalizedWheel } from './input/wheel-normalizer';
+export type { InputManagerOptions, ZoomMode } from './input/input-manager';
+export type { MouseAdapterCallbacks } from './input/mouse-adapter';
+export type { KeyCombo } from './input/keyboard-adapter';
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AACvF,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAA;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAA;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAGpD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvE,YAAY,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC/D,YAAY,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC1E,YAAY,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAA;AAClE,YAAY,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA"}

package/lib/index.iife.js

@@ -0,0 +1 @@
+var SketchRulerCanvas=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t=class{canvas=null;ctx=null;lastFingerprint=``;drawStatic(e,t,n){let r=this.buildFingerprint(t,n);return(r!==this.lastFingerprint||!this.canvas)&&(this.rebuild(t,n),this.lastFingerprint=r),this.canvas?(e.drawImage(this.canvas,0,0),!0):!1}rebuild(e,t){let{width:n,height:r,ratio:i,palette:a,thick:o,vertical:s}=t;this.canvas||=document.createElement(`canvas`),this.canvas.width=Math.round(n*i),this.canvas.height=Math.round(r*i);let c=this.canvas.getContext(`2d`);this.ctx=c,c.setTransform(1,0,0,1,0,0),c.scale(i,i),c.clearRect(0,0,n,r),c.fillStyle=a.bgColor,c.fillRect(0,0,n,r),c.strokeStyle=a.tickColor,c.lineWidth=1,c.beginPath();for(let i of e){let e=i.position;i.isMajor?i.value===0||i.value===t.canvasSize?s?(c.moveTo(0,e),c.lineTo(n,e)):(c.moveTo(e,0),c.lineTo(e,r)):s?(c.moveTo(n,e),c.lineTo(n*.65,e)):(c.moveTo(e,r),c.lineTo(e,r*.65)):s?(c.moveTo(n,e),c.lineTo(n*.8,e)):(c.moveTo(e,r),c.lineTo(e,r*.8))}c.stroke(),c.closePath()}buildFingerprint(e,t){let{thick:n,palette:r,vertical:i,width:a,height:o}=t,s=e.length>1?e[1].value-e[0].value:0,c=1,l=0;if(e.length>=2){let t=e[0],n=e.find(e=>e.value!==t.value)??e[1];n&&n.value!==t.value&&(c=(n.position-t.position)/(n.value-t.value),l=t.position-t.value*c)}return`${n}:${r.bgColor}:${r.tickColor}:${r.labelColor}:${i}:${a}:${o}:${s}:${c.toFixed(4)}:${l.toFixed(2)}`}clear(){this.canvas=null,this.ctx=null,this.lastFingerprint=``}},n=class{cache=new Map;maxSize;constructor(e=500){this.maxSize=e}get(e,t){let n=this.hashKey(t),r=this.cache.get(n);if(r)return this.cache.delete(n),this.cache.set(n,r),r;let i=this.createEntry(e,t);return this.cache.set(n,i),this.evictIfNeeded(),i}createEntry(e,t){let{text:n,font:r,color:i}=t;e.font=r;let a=e.measureText(n),o=Math.ceil(a.width),s=Math.ceil(a.actualBoundingBoxAscent+a.actualBoundingBoxDescent)||12;if(o===0||s===0)return{canvas:document.createElement(`canvas`),width:0,height:0};let c=document.createElement(`canvas`);c.width=o+2,c.height=s+2;let l=c.getContext(`2d`);return l.font=r,l.fillStyle=i,l.textBaseline=`alphabetic`,l.fillText(n,1,1+a.actualBoundingBoxAscent),{canvas:c,width:o,height:s}}evictIfNeeded(){if(this.cache.size<=this.maxSize)return;let e=this.cache.keys().next().value;e!==void 0&&this.cache.delete(e)}hashKey(e){return`${e.text}:${e.font}:${e.color}`}clear(){this.cache.clear()}size(){return this.cache.size}},r=`#e9f7fe`,i=class{offscreenCache=new t;labelCache=new n;render(e,t,n){for(let r of t)r.type===`ruler`&&this.renderRuler(e,r,n)}renderRuler(e,t,n){let{marks:i,vertical:a,thick:o,width:s,height:c,ratio:l,palette:u,shadowStart:d,shadowLength:f,showShadowText:p}=t;e.setTransform(1,0,0,1,0,0),e.scale(l,l),e.clearRect(0,0,s,c),this.offscreenCache.drawStatic(e,i,t);let m=[];if(f&&i.length>0){let t=d??0,n=i[0],l=i.find(e=>e.value!==n.value)??n,h=l&&l.value!==n.value?(l.position-n.position)/(l.value-n.value):1,g=n.position-n.value*h,_=t*h+g,v=f*h;if(v>0&&(e.fillStyle=u.shadowColor??r,a?e.fillRect(0,_,s,v):e.fillRect(_,0,v,c),p)){this.renderShadowText(e,t,_,o,a,u,!1);let n=t+f,r=n*h+g;this.renderShadowText(e,n,r,o,a,u,!0),m.push(_,r)}}for(let n of i)if(n.isMajor&&n.label){if(m.some(e=>Math.abs(n.position-e)<o*1.5))continue;e.save(),e.fillStyle=u.labelColor,e.font=`${Math.max(11,Math.floor(o*.5)+2)}px -apple-system, "Helvetica Neue", ".SFNSDisplay-Regular", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif`,a?(n.value===0?e.translate(s*.4,n.position-3):n.value===t.canvasSize?e.translate(s*.2,n.position+32):e.translate(s*.15,n.position+14),e.rotate(-90*Math.PI/180),e.fillText(n.label,4,9)):(n.value===0?e.translate(n.position-15,c*.13):n.value===t.canvasSize?e.translate(n.position+5,c*.3):e.translate(n.position-12,c*.18),e.fillText(n.label,4,9)),e.restore()}}renderShadowText(e,t,n,r,i,a,o){e.save(),e.fillStyle=a.labelColor,e.font=`bold 12px sans-serif`,i?(e.translate(r*.6,n+(o?-8:8)),e.rotate(-Math.PI/2)):e.translate(n+(o?-8:8),r*.6),e.fillText(Math.round(t).toString(),0,0),e.restore()}destroy(){this.offscreenCache.clear(),this.labelCache.clear()}};function a(e){let t=e.deltaX,n=e.deltaY,r=e.deltaZ||0,i=e.deltaMode;return i===WheelEvent.DOM_DELTA_LINE?(t*=40,n*=40,r*=40):i===WheelEvent.DOM_DELTA_PAGE&&(t*=800,n*=800,r*=800),{deltaX:t,deltaY:n,deltaZ:r,deltaMode:i}}function o(e,t=.001){let n=a(e);return-(n.deltaY===0?n.deltaX:n.deltaY)*t}var s=class{container;callbacks;boundWheel;boundMouseDown;boundMouseMove;boundMouseUp;boundMouseEnter;boundMouseLeave;isBound=!1;constructor(e,t){this.container=e,this.callbacks=t,this.boundWheel=this.handleWheel.bind(this),this.boundMouseDown=this.handleMouseDown.bind(this),this.boundMouseMove=this.handleMouseMove.bind(this),this.boundMouseUp=this.handleMouseUp.bind(this),this.boundMouseEnter=()=>this.callbacks.onMouseEnter?.(),this.boundMouseLeave=()=>this.callbacks.onMouseLeave?.()}bind(){this.isBound||(this.isBound=!0,this.container.addEventListener(`wheel`,this.boundWheel,{passive:!1}),this.container.addEventListener(`mousedown`,this.boundMouseDown),document.addEventListener(`mousemove`,this.boundMouseMove),document.addEventListener(`mouseup`,this.boundMouseUp),this.container.addEventListener(`mouseenter`,this.boundMouseEnter),this.container.addEventListener(`mouseleave`,this.boundMouseLeave))}unbind(){this.isBound&&(this.isBound=!1,this.container.removeEventListener(`wheel`,this.boundWheel),this.container.removeEventListener(`mousedown`,this.boundMouseDown),document.removeEventListener(`mousemove`,this.boundMouseMove),document.removeEventListener(`mouseup`,this.boundMouseUp),this.container.removeEventListener(`mouseenter`,this.boundMouseEnter),this.container.removeEventListener(`mouseleave`,this.boundMouseLeave))}handleWheel(e){let t=a(e);this.callbacks.onWheel?.(e,t)}handleMouseDown(e){this.callbacks.onMouseDown?.(e)}handleMouseMove(e){this.callbacks.onMouseMove?.(e)}handleMouseUp(e){this.callbacks.onMouseUp?.(e)}},c=class{callbacks;boundKeyDown;isBound=!1;constructor(e){this.callbacks=e,this.boundKeyDown=this.handleKeyDown.bind(this)}bind(){this.isBound||(this.isBound=!0,document.addEventListener(`keydown`,this.boundKeyDown))}unbind(){this.isBound&&(this.isBound=!1,document.removeEventListener(`keydown`,this.boundKeyDown))}handleKeyDown(e){if(e.repeat)return;let t=document.activeElement;if(t?.closest(`.monaco-editor`)||t?.tagName===`INPUT`||t?.tagName===`TEXTAREA`||t?.getAttribute(`contenteditable`)===`true`)return;let n=this.parseCombo(e);this.callbacks.onShortcut?.(n,e)}parseCombo(e){let t=[];(e.ctrlKey||e.metaKey)&&t.push(`ctrl`),e.altKey&&t.push(`alt`),e.shiftKey&&t.push(`shift`);let n=e.key.toLowerCase();return n===` `&&(n=`space`),n===`+`&&(n=`plus`),n===`-`&&(n=`minus`),n===`=`&&(n=`equal`),t.push(n),t.join(`+`)}},l=class{engine;zoomStep;selfHandle;zoomMode;viewportSize;contentSize;container=null;mouseAdapter=null;isSpacePressed=!1;isDragging=!1;dragStart={x:0,y:0};lastMouse={x:0,y:0};isHovered=!1;boundKeyUp;keyboardAdapter=null;pendingWheelDelta=0;wheelRafId=null;onCursorChange=null;zoomInterceptor=null;panInterceptor=null;constructor(e,t={}){this.engine=e,this.zoomStep=t.zoomStep??.25,this.selfHandle=t.selfHandle??!1,this.zoomMode=t.zoomMode??`pointer`,this.viewportSize=t.viewportSize??{width:0,height:0},this.contentSize=t.contentSize??{width:0,height:0},this.onCursorChange=t.onCursorChange??null,this.zoomInterceptor=t.zoomInterceptor??null,this.panInterceptor=t.panInterceptor??null,this.boundKeyUp=this.handleKeyUp.bind(this)}bind(e){if(this.selfHandle)return;this.unbind(),this.container=e;let t=e.parentElement;if(!t)return;document.addEventListener(`keyup`,this.boundKeyUp);let n={onWheel:this.handleWheel.bind(this),onMouseDown:this.handleMouseDown.bind(this),onMouseMove:this.handleMouseMove.bind(this),onMouseUp:this.handleMouseUp.bind(this),onMouseEnter:()=>{this.isHovered=!0},onMouseLeave:()=>{this.isHovered=!1}};this.mouseAdapter=new s(t,n),this.mouseAdapter.bind(),this.keyboardAdapter=new c({onShortcut:this.handleShortcut.bind(this)}),this.keyboardAdapter.bind()}unbind(){this.mouseAdapter?.unbind(),this.mouseAdapter=null,this.keyboardAdapter?.unbind(),this.keyboardAdapter=null,document.removeEventListener(`keyup`,this.boundKeyUp),this.container=null}destroy(){this.wheelRafId!==null&&(cancelAnimationFrame(this.wheelRafId),this.wheelRafId=null),this.unbind()}setZoomMode(e){this.zoomMode=e}handleWheel(e){if(e.ctrlKey||e.metaKey){e.preventDefault();let t=this.container?.parentElement,n=t?t.getBoundingClientRect():new DOMRect(0,0,0,0),r,i;switch(this.zoomMode){case`viewport-center`:r=this.viewportSize.width/2,i=this.viewportSize.height/2;break;case`content-center`:{let e=this.engine.getState();r=e.x+this.contentSize.width*e.scale/2,i=e.y+this.contentSize.height*e.scale/2;break}default:r=e.clientX-n.left,i=e.clientY-n.top;break}let a=e.deltaY===0?e.deltaX:e.deltaY;this.pendingWheelDelta+=a<0?1:-1,this.wheelRafId===null&&(this.wheelRafId=requestAnimationFrame(()=>{if(this.wheelRafId=null,this.pendingWheelDelta===0)return;let e=this.engine.getState().scale,t=e*Math.exp(this.pendingWheelDelta*this.zoomStep/3);this.pendingWheelDelta=0,this.executeZoom(()=>this.engine.zoomTo(t,r,i),e,t,r,i)}))}}handleShortcut(e,t){if(!this.isHovered)return;let n=this.viewportSize.width/2,r=this.viewportSize.height/2,i=e=>{e()};switch(e){case`ctrl+0`:t.preventDefault(),i(()=>this.executeZoom(()=>this.engine.zoomTo(1,n,r),this.engine.getState().scale,1,n,r));break;case`ctrl+minus`:{t.preventDefault();let e=this.engine.getState().scale,a=e-this.zoomStep;i(()=>this.executeZoom(()=>this.engine.zoomBy(-this.zoomStep,n,r),e,a,n,r));break}case`ctrl+equal`:case`ctrl+plus`:{t.preventDefault();let e=this.engine.getState().scale,a=e+this.zoomStep;i(()=>this.executeZoom(()=>this.engine.zoomBy(this.zoomStep,n,r),e,a,n,r));break}case`ctrl+1`:{t.preventDefault();let e=this.viewportSize.width,a=this.viewportSize.height,o=this.contentSize.width,s=this.contentSize.height;if(e>0&&a>0&&o>0&&s>0){let t=e*.9/o,c=a*.9/s,l=Math.min(t,c),u=(e-o*l)/2,d=(a-s*l)/2,f=this.engine.getState().scale;i(()=>this.executeZoom(()=>this.engine.setTransform({scale:l,x:u,y:d}),f,l,n,r))}break}case`space`:this.isSpacePressed||(this.isSpacePressed=!0,t.preventDefault(),this.notifyCursorChange());break;default:break}}handleKeyUp(e){e.key===` `&&(this.isSpacePressed=!1,this.isDragging=!1,this.notifyCursorChange())}handleMouseDown(e){this.isSpacePressed&&e.button===0&&(this.isDragging=!0,this.dragStart={x:e.clientX,y:e.clientY},this.lastMouse={x:e.clientX,y:e.clientY},e.preventDefault(),this.notifyCursorChange())}async handleMouseMove(e){if(this.isDragging&&this.isSpacePressed){let t=e.clientX-this.lastMouse.x,n=e.clientY-this.lastMouse.y;(!this.panInterceptor?.beforePan||await this.panInterceptor.beforePan(t,n))&&(this.engine.panBy(t,n),this.panInterceptor?.afterPan?.(t,n)),this.lastMouse={x:e.clientX,y:e.clientY}}}handleMouseUp(){this.isDragging=!1,this.notifyCursorChange()}async executeZoom(e,t,n,r,i){(!this.zoomInterceptor?.beforeZoom||await this.zoomInterceptor.beforeZoom(t,n,r,i))&&(e(),this.zoomInterceptor?.afterZoom?.(t,this.engine.getState().scale,r,i))}getCursorClass(){return this.isSpacePressed?this.isDragging?`grabbing`:`grab`:`default`}notifyCursorChange(){this.onCursorChange?.(this.getCursorClass())}};return e.Canvas2DRenderer=i,e.InputManager=l,e.KeyboardAdapter=c,e.LabelCache=n,e.MouseAdapter=s,e.OffscreenRulerCache=t,e.getZoomDelta=o,e.normalizeWheel=a,e})({});

package/lib/index.js

@@ -0,0 +1,348 @@
+/*!@sketch-ruler/canvas v3.0.0-beta.0 2026-5-21*/
+//#region src/renderers/offscreen-ruler-cache.ts
+var e = class {
+	canvas = null;
+	ctx = null;
+	lastFingerprint = "";
+	drawStatic(e, t, n) {
+		let r = this.buildFingerprint(t, n);
+		return (r !== this.lastFingerprint || !this.canvas) && (this.rebuild(t, n), this.lastFingerprint = r), this.canvas ? (e.drawImage(this.canvas, 0, 0), !0) : !1;
+	}
+	rebuild(e, t) {
+		let { width: n, height: r, ratio: i, palette: a, thick: o, vertical: s } = t;
+		this.canvas ||= document.createElement("canvas"), this.canvas.width = Math.round(n * i), this.canvas.height = Math.round(r * i);
+		let c = this.canvas.getContext("2d");
+		this.ctx = c, c.setTransform(1, 0, 0, 1, 0, 0), c.scale(i, i), c.clearRect(0, 0, n, r), c.fillStyle = a.bgColor, c.fillRect(0, 0, n, r), c.strokeStyle = a.tickColor, c.lineWidth = 1, c.beginPath();
+		for (let i of e) {
+			let e = i.position;
+			i.isMajor ? i.value === 0 || i.value === t.canvasSize ? s ? (c.moveTo(0, e), c.lineTo(n, e)) : (c.moveTo(e, 0), c.lineTo(e, r)) : s ? (c.moveTo(n, e), c.lineTo(n * .65, e)) : (c.moveTo(e, r), c.lineTo(e, r * .65)) : s ? (c.moveTo(n, e), c.lineTo(n * .8, e)) : (c.moveTo(e, r), c.lineTo(e, r * .8));
+		}
+		c.stroke(), c.closePath();
+	}
+	buildFingerprint(e, t) {
+		let { thick: n, palette: r, vertical: i, width: a, height: o } = t, s = e.length > 1 ? e[1].value - e[0].value : 0, c = 1, l = 0;
+		if (e.length >= 2) {
+			let t = e[0], n = e.find((e) => e.value !== t.value) ?? e[1];
+			n && n.value !== t.value && (c = (n.position - t.position) / (n.value - t.value), l = t.position - t.value * c);
+		}
+		return `${n}:${r.bgColor}:${r.tickColor}:${r.labelColor}:${i}:${a}:${o}:${s}:${c.toFixed(4)}:${l.toFixed(2)}`;
+	}
+	clear() {
+		this.canvas = null, this.ctx = null, this.lastFingerprint = "";
+	}
+}, t = class {
+	cache = /* @__PURE__ */ new Map();
+	maxSize;
+	constructor(e = 500) {
+		this.maxSize = e;
+	}
+	get(e, t) {
+		let n = this.hashKey(t), r = this.cache.get(n);
+		if (r) return this.cache.delete(n), this.cache.set(n, r), r;
+		let i = this.createEntry(e, t);
+		return this.cache.set(n, i), this.evictIfNeeded(), i;
+	}
+	createEntry(e, t) {
+		let { text: n, font: r, color: i } = t;
+		e.font = r;
+		let a = e.measureText(n), o = Math.ceil(a.width), s = Math.ceil(a.actualBoundingBoxAscent + a.actualBoundingBoxDescent) || 12;
+		if (o === 0 || s === 0) return {
+			canvas: document.createElement("canvas"),
+			width: 0,
+			height: 0
+		};
+		let c = document.createElement("canvas");
+		c.width = o + 2, c.height = s + 2;
+		let l = c.getContext("2d");
+		return l.font = r, l.fillStyle = i, l.textBaseline = "alphabetic", l.fillText(n, 1, 1 + a.actualBoundingBoxAscent), {
+			canvas: c,
+			width: o,
+			height: s
+		};
+	}
+	evictIfNeeded() {
+		if (this.cache.size <= this.maxSize) return;
+		let e = this.cache.keys().next().value;
+		e !== void 0 && this.cache.delete(e);
+	}
+	hashKey(e) {
+		return `${e.text}:${e.font}:${e.color}`;
+	}
+	clear() {
+		this.cache.clear();
+	}
+	size() {
+		return this.cache.size;
+	}
+}, n = "#e9f7fe", r = class {
+	offscreenCache = new e();
+	labelCache = new t();
+	render(e, t, n) {
+		for (let r of t) r.type === "ruler" && this.renderRuler(e, r, n);
+	}
+	renderRuler(e, t, r) {
+		let { marks: i, vertical: a, thick: o, width: s, height: c, ratio: l, palette: u, shadowStart: d, shadowLength: f, showShadowText: p } = t;
+		e.setTransform(1, 0, 0, 1, 0, 0), e.scale(l, l), e.clearRect(0, 0, s, c), this.offscreenCache.drawStatic(e, i, t);
+		let m = [];
+		if (f && i.length > 0) {
+			let t = d ?? 0, r = i[0], l = i.find((e) => e.value !== r.value) ?? r, h = l && l.value !== r.value ? (l.position - r.position) / (l.value - r.value) : 1, g = r.position - r.value * h, _ = t * h + g, v = f * h;
+			if (v > 0 && (e.fillStyle = u.shadowColor ?? n, a ? e.fillRect(0, _, s, v) : e.fillRect(_, 0, v, c), p)) {
+				this.renderShadowText(e, t, _, o, a, u, !1);
+				let n = t + f, r = n * h + g;
+				this.renderShadowText(e, n, r, o, a, u, !0), m.push(_, r);
+			}
+		}
+		for (let n of i) if (n.isMajor && n.label) {
+			if (m.some((e) => Math.abs(n.position - e) < o * 1.5)) continue;
+			e.save(), e.fillStyle = u.labelColor, e.font = `${Math.max(11, Math.floor(o * .5) + 2)}px -apple-system, "Helvetica Neue", ".SFNSDisplay-Regular", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif`, a ? (n.value === 0 ? e.translate(s * .4, n.position - 3) : n.value === t.canvasSize ? e.translate(s * .2, n.position + 32) : e.translate(s * .15, n.position + 14), e.rotate(-90 * Math.PI / 180), e.fillText(n.label, 4, 9)) : (n.value === 0 ? e.translate(n.position - 15, c * .13) : n.value === t.canvasSize ? e.translate(n.position + 5, c * .3) : e.translate(n.position - 12, c * .18), e.fillText(n.label, 4, 9)), e.restore();
+		}
+	}
+	renderShadowText(e, t, n, r, i, a, o) {
+		e.save(), e.fillStyle = a.labelColor, e.font = "bold 12px sans-serif", i ? (e.translate(r * .6, n + (o ? -8 : 8)), e.rotate(-Math.PI / 2)) : e.translate(n + (o ? -8 : 8), r * .6), e.fillText(Math.round(t).toString(), 0, 0), e.restore();
+	}
+	destroy() {
+		this.offscreenCache.clear(), this.labelCache.clear();
+	}
+};
+//#endregion
+//#region src/input/wheel-normalizer.ts
+function i(e) {
+	let t = e.deltaX, n = e.deltaY, r = e.deltaZ || 0, i = e.deltaMode;
+	return i === WheelEvent.DOM_DELTA_LINE ? (t *= 40, n *= 40, r *= 40) : i === WheelEvent.DOM_DELTA_PAGE && (t *= 800, n *= 800, r *= 800), {
+		deltaX: t,
+		deltaY: n,
+		deltaZ: r,
+		deltaMode: i
+	};
+}
+function a(e, t = .001) {
+	let n = i(e);
+	return -(n.deltaY === 0 ? n.deltaX : n.deltaY) * t;
+}
+//#endregion
+//#region src/input/mouse-adapter.ts
+var o = class {
+	container;
+	callbacks;
+	boundWheel;
+	boundMouseDown;
+	boundMouseMove;
+	boundMouseUp;
+	boundMouseEnter;
+	boundMouseLeave;
+	isBound = !1;
+	constructor(e, t) {
+		this.container = e, this.callbacks = t, this.boundWheel = this.handleWheel.bind(this), this.boundMouseDown = this.handleMouseDown.bind(this), this.boundMouseMove = this.handleMouseMove.bind(this), this.boundMouseUp = this.handleMouseUp.bind(this), this.boundMouseEnter = () => this.callbacks.onMouseEnter?.(), this.boundMouseLeave = () => this.callbacks.onMouseLeave?.();
+	}
+	bind() {
+		this.isBound || (this.isBound = !0, this.container.addEventListener("wheel", this.boundWheel, { passive: !1 }), this.container.addEventListener("mousedown", this.boundMouseDown), document.addEventListener("mousemove", this.boundMouseMove), document.addEventListener("mouseup", this.boundMouseUp), this.container.addEventListener("mouseenter", this.boundMouseEnter), this.container.addEventListener("mouseleave", this.boundMouseLeave));
+	}
+	unbind() {
+		this.isBound && (this.isBound = !1, this.container.removeEventListener("wheel", this.boundWheel), this.container.removeEventListener("mousedown", this.boundMouseDown), document.removeEventListener("mousemove", this.boundMouseMove), document.removeEventListener("mouseup", this.boundMouseUp), this.container.removeEventListener("mouseenter", this.boundMouseEnter), this.container.removeEventListener("mouseleave", this.boundMouseLeave));
+	}
+	handleWheel(e) {
+		let t = i(e);
+		this.callbacks.onWheel?.(e, t);
+	}
+	handleMouseDown(e) {
+		this.callbacks.onMouseDown?.(e);
+	}
+	handleMouseMove(e) {
+		this.callbacks.onMouseMove?.(e);
+	}
+	handleMouseUp(e) {
+		this.callbacks.onMouseUp?.(e);
+	}
+}, s = class {
+	callbacks;
+	boundKeyDown;
+	isBound = !1;
+	constructor(e) {
+		this.callbacks = e, this.boundKeyDown = this.handleKeyDown.bind(this);
+	}
+	bind() {
+		this.isBound || (this.isBound = !0, document.addEventListener("keydown", this.boundKeyDown));
+	}
+	unbind() {
+		this.isBound && (this.isBound = !1, document.removeEventListener("keydown", this.boundKeyDown));
+	}
+	handleKeyDown(e) {
+		if (e.repeat) return;
+		let t = document.activeElement;
+		if (t?.closest(".monaco-editor") || t?.tagName === "INPUT" || t?.tagName === "TEXTAREA" || t?.getAttribute("contenteditable") === "true") return;
+		let n = this.parseCombo(e);
+		this.callbacks.onShortcut?.(n, e);
+	}
+	parseCombo(e) {
+		let t = [];
+		(e.ctrlKey || e.metaKey) && t.push("ctrl"), e.altKey && t.push("alt"), e.shiftKey && t.push("shift");
+		let n = e.key.toLowerCase();
+		return n === " " && (n = "space"), n === "+" && (n = "plus"), n === "-" && (n = "minus"), n === "=" && (n = "equal"), t.push(n), t.join("+");
+	}
+}, c = class {
+	engine;
+	zoomStep;
+	selfHandle;
+	zoomMode;
+	viewportSize;
+	contentSize;
+	container = null;
+	mouseAdapter = null;
+	isSpacePressed = !1;
+	isDragging = !1;
+	dragStart = {
+		x: 0,
+		y: 0
+	};
+	lastMouse = {
+		x: 0,
+		y: 0
+	};
+	isHovered = !1;
+	boundKeyUp;
+	keyboardAdapter = null;
+	pendingWheelDelta = 0;
+	wheelRafId = null;
+	onCursorChange = null;
+	zoomInterceptor = null;
+	panInterceptor = null;
+	constructor(e, t = {}) {
+		this.engine = e, this.zoomStep = t.zoomStep ?? .25, this.selfHandle = t.selfHandle ?? !1, this.zoomMode = t.zoomMode ?? "pointer", this.viewportSize = t.viewportSize ?? {
+			width: 0,
+			height: 0
+		}, this.contentSize = t.contentSize ?? {
+			width: 0,
+			height: 0
+		}, this.onCursorChange = t.onCursorChange ?? null, this.zoomInterceptor = t.zoomInterceptor ?? null, this.panInterceptor = t.panInterceptor ?? null, this.boundKeyUp = this.handleKeyUp.bind(this);
+	}
+	bind(e) {
+		if (this.selfHandle) return;
+		this.unbind(), this.container = e;
+		let t = e.parentElement;
+		if (!t) return;
+		document.addEventListener("keyup", this.boundKeyUp);
+		let n = {
+			onWheel: this.handleWheel.bind(this),
+			onMouseDown: this.handleMouseDown.bind(this),
+			onMouseMove: this.handleMouseMove.bind(this),
+			onMouseUp: this.handleMouseUp.bind(this),
+			onMouseEnter: () => {
+				this.isHovered = !0;
+			},
+			onMouseLeave: () => {
+				this.isHovered = !1;
+			}
+		};
+		this.mouseAdapter = new o(t, n), this.mouseAdapter.bind(), this.keyboardAdapter = new s({ onShortcut: this.handleShortcut.bind(this) }), this.keyboardAdapter.bind();
+	}
+	unbind() {
+		this.mouseAdapter?.unbind(), this.mouseAdapter = null, this.keyboardAdapter?.unbind(), this.keyboardAdapter = null, document.removeEventListener("keyup", this.boundKeyUp), this.container = null;
+	}
+	destroy() {
+		this.wheelRafId !== null && (cancelAnimationFrame(this.wheelRafId), this.wheelRafId = null), this.unbind();
+	}
+	setZoomMode(e) {
+		this.zoomMode = e;
+	}
+	handleWheel(e) {
+		if (e.ctrlKey || e.metaKey) {
+			e.preventDefault();
+			let t = this.container?.parentElement, n = t ? t.getBoundingClientRect() : new DOMRect(0, 0, 0, 0), r, i;
+			switch (this.zoomMode) {
+				case "viewport-center":
+					r = this.viewportSize.width / 2, i = this.viewportSize.height / 2;
+					break;
+				case "content-center": {
+					let e = this.engine.getState();
+					r = e.x + this.contentSize.width * e.scale / 2, i = e.y + this.contentSize.height * e.scale / 2;
+					break;
+				}
+				default:
+					r = e.clientX - n.left, i = e.clientY - n.top;
+					break;
+			}
+			let a = e.deltaY === 0 ? e.deltaX : e.deltaY;
+			this.pendingWheelDelta += a < 0 ? 1 : -1, this.wheelRafId === null && (this.wheelRafId = requestAnimationFrame(() => {
+				if (this.wheelRafId = null, this.pendingWheelDelta === 0) return;
+				let e = this.engine.getState().scale, t = e * Math.exp(this.pendingWheelDelta * this.zoomStep / 3);
+				this.pendingWheelDelta = 0, this.executeZoom(() => this.engine.zoomTo(t, r, i), e, t, r, i);
+			}));
+		}
+	}
+	handleShortcut(e, t) {
+		if (!this.isHovered) return;
+		let n = this.viewportSize.width / 2, r = this.viewportSize.height / 2, i = (e) => {
+			e();
+		};
+		switch (e) {
+			case "ctrl+0":
+				t.preventDefault(), i(() => this.executeZoom(() => this.engine.zoomTo(1, n, r), this.engine.getState().scale, 1, n, r));
+				break;
+			case "ctrl+minus": {
+				t.preventDefault();
+				let e = this.engine.getState().scale, a = e - this.zoomStep;
+				i(() => this.executeZoom(() => this.engine.zoomBy(-this.zoomStep, n, r), e, a, n, r));
+				break;
+			}
+			case "ctrl+equal":
+			case "ctrl+plus": {
+				t.preventDefault();
+				let e = this.engine.getState().scale, a = e + this.zoomStep;
+				i(() => this.executeZoom(() => this.engine.zoomBy(this.zoomStep, n, r), e, a, n, r));
+				break;
+			}
+			case "ctrl+1": {
+				t.preventDefault();
+				let e = this.viewportSize.width, a = this.viewportSize.height, o = this.contentSize.width, s = this.contentSize.height;
+				if (e > 0 && a > 0 && o > 0 && s > 0) {
+					let t = e * .9 / o, c = a * .9 / s, l = Math.min(t, c), u = (e - o * l) / 2, d = (a - s * l) / 2, f = this.engine.getState().scale;
+					i(() => this.executeZoom(() => this.engine.setTransform({
+						scale: l,
+						x: u,
+						y: d
+					}), f, l, n, r));
+				}
+				break;
+			}
+			case "space":
+				this.isSpacePressed || (this.isSpacePressed = !0, t.preventDefault(), this.notifyCursorChange());
+				break;
+			default: break;
+		}
+	}
+	handleKeyUp(e) {
+		e.key === " " && (this.isSpacePressed = !1, this.isDragging = !1, this.notifyCursorChange());
+	}
+	handleMouseDown(e) {
+		this.isSpacePressed && e.button === 0 && (this.isDragging = !0, this.dragStart = {
+			x: e.clientX,
+			y: e.clientY
+		}, this.lastMouse = {
+			x: e.clientX,
+			y: e.clientY
+		}, e.preventDefault(), this.notifyCursorChange());
+	}
+	async handleMouseMove(e) {
+		if (this.isDragging && this.isSpacePressed) {
+			let t = e.clientX - this.lastMouse.x, n = e.clientY - this.lastMouse.y;
+			(!this.panInterceptor?.beforePan || await this.panInterceptor.beforePan(t, n)) && (this.engine.panBy(t, n), this.panInterceptor?.afterPan?.(t, n)), this.lastMouse = {
+				x: e.clientX,
+				y: e.clientY
+			};
+		}
+	}
+	handleMouseUp() {
+		this.isDragging = !1, this.notifyCursorChange();
+	}
+	async executeZoom(e, t, n, r, i) {
+		(!this.zoomInterceptor?.beforeZoom || await this.zoomInterceptor.beforeZoom(t, n, r, i)) && (e(), this.zoomInterceptor?.afterZoom?.(t, this.engine.getState().scale, r, i));
+	}
+	getCursorClass() {
+		return this.isSpacePressed ? this.isDragging ? "grabbing" : "grab" : "default";
+	}
+	notifyCursorChange() {
+		this.onCursorChange?.(this.getCursorClass());
+	}
+};
+//#endregion
+export { r as Canvas2DRenderer, c as InputManager, s as KeyboardAdapter, t as LabelCache, o as MouseAdapter, e as OffscreenRulerCache, a as getZoomDelta, i as normalizeWheel };

package/lib/index.umd.cjs

@@ -0,0 +1 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.SketchRulerCanvas={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t=class{canvas=null;ctx=null;lastFingerprint=``;drawStatic(e,t,n){let r=this.buildFingerprint(t,n);return(r!==this.lastFingerprint||!this.canvas)&&(this.rebuild(t,n),this.lastFingerprint=r),this.canvas?(e.drawImage(this.canvas,0,0),!0):!1}rebuild(e,t){let{width:n,height:r,ratio:i,palette:a,thick:o,vertical:s}=t;this.canvas||=document.createElement(`canvas`),this.canvas.width=Math.round(n*i),this.canvas.height=Math.round(r*i);let c=this.canvas.getContext(`2d`);this.ctx=c,c.setTransform(1,0,0,1,0,0),c.scale(i,i),c.clearRect(0,0,n,r),c.fillStyle=a.bgColor,c.fillRect(0,0,n,r),c.strokeStyle=a.tickColor,c.lineWidth=1,c.beginPath();for(let i of e){let e=i.position;i.isMajor?i.value===0||i.value===t.canvasSize?s?(c.moveTo(0,e),c.lineTo(n,e)):(c.moveTo(e,0),c.lineTo(e,r)):s?(c.moveTo(n,e),c.lineTo(n*.65,e)):(c.moveTo(e,r),c.lineTo(e,r*.65)):s?(c.moveTo(n,e),c.lineTo(n*.8,e)):(c.moveTo(e,r),c.lineTo(e,r*.8))}c.stroke(),c.closePath()}buildFingerprint(e,t){let{thick:n,palette:r,vertical:i,width:a,height:o}=t,s=e.length>1?e[1].value-e[0].value:0,c=1,l=0;if(e.length>=2){let t=e[0],n=e.find(e=>e.value!==t.value)??e[1];n&&n.value!==t.value&&(c=(n.position-t.position)/(n.value-t.value),l=t.position-t.value*c)}return`${n}:${r.bgColor}:${r.tickColor}:${r.labelColor}:${i}:${a}:${o}:${s}:${c.toFixed(4)}:${l.toFixed(2)}`}clear(){this.canvas=null,this.ctx=null,this.lastFingerprint=``}},n=class{cache=new Map;maxSize;constructor(e=500){this.maxSize=e}get(e,t){let n=this.hashKey(t),r=this.cache.get(n);if(r)return this.cache.delete(n),this.cache.set(n,r),r;let i=this.createEntry(e,t);return this.cache.set(n,i),this.evictIfNeeded(),i}createEntry(e,t){let{text:n,font:r,color:i}=t;e.font=r;let a=e.measureText(n),o=Math.ceil(a.width),s=Math.ceil(a.actualBoundingBoxAscent+a.actualBoundingBoxDescent)||12;if(o===0||s===0)return{canvas:document.createElement(`canvas`),width:0,height:0};let c=document.createElement(`canvas`);c.width=o+2,c.height=s+2;let l=c.getContext(`2d`);return l.font=r,l.fillStyle=i,l.textBaseline=`alphabetic`,l.fillText(n,1,1+a.actualBoundingBoxAscent),{canvas:c,width:o,height:s}}evictIfNeeded(){if(this.cache.size<=this.maxSize)return;let e=this.cache.keys().next().value;e!==void 0&&this.cache.delete(e)}hashKey(e){return`${e.text}:${e.font}:${e.color}`}clear(){this.cache.clear()}size(){return this.cache.size}},r=`#e9f7fe`,i=class{offscreenCache=new t;labelCache=new n;render(e,t,n){for(let r of t)r.type===`ruler`&&this.renderRuler(e,r,n)}renderRuler(e,t,n){let{marks:i,vertical:a,thick:o,width:s,height:c,ratio:l,palette:u,shadowStart:d,shadowLength:f,showShadowText:p}=t;e.setTransform(1,0,0,1,0,0),e.scale(l,l),e.clearRect(0,0,s,c),this.offscreenCache.drawStatic(e,i,t);let m=[];if(f&&i.length>0){let t=d??0,n=i[0],l=i.find(e=>e.value!==n.value)??n,h=l&&l.value!==n.value?(l.position-n.position)/(l.value-n.value):1,g=n.position-n.value*h,_=t*h+g,v=f*h;if(v>0&&(e.fillStyle=u.shadowColor??r,a?e.fillRect(0,_,s,v):e.fillRect(_,0,v,c),p)){this.renderShadowText(e,t,_,o,a,u,!1);let n=t+f,r=n*h+g;this.renderShadowText(e,n,r,o,a,u,!0),m.push(_,r)}}for(let n of i)if(n.isMajor&&n.label){if(m.some(e=>Math.abs(n.position-e)<o*1.5))continue;e.save(),e.fillStyle=u.labelColor,e.font=`${Math.max(11,Math.floor(o*.5)+2)}px -apple-system, "Helvetica Neue", ".SFNSDisplay-Regular", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif`,a?(n.value===0?e.translate(s*.4,n.position-3):n.value===t.canvasSize?e.translate(s*.2,n.position+32):e.translate(s*.15,n.position+14),e.rotate(-90*Math.PI/180),e.fillText(n.label,4,9)):(n.value===0?e.translate(n.position-15,c*.13):n.value===t.canvasSize?e.translate(n.position+5,c*.3):e.translate(n.position-12,c*.18),e.fillText(n.label,4,9)),e.restore()}}renderShadowText(e,t,n,r,i,a,o){e.save(),e.fillStyle=a.labelColor,e.font=`bold 12px sans-serif`,i?(e.translate(r*.6,n+(o?-8:8)),e.rotate(-Math.PI/2)):e.translate(n+(o?-8:8),r*.6),e.fillText(Math.round(t).toString(),0,0),e.restore()}destroy(){this.offscreenCache.clear(),this.labelCache.clear()}};function a(e){let t=e.deltaX,n=e.deltaY,r=e.deltaZ||0,i=e.deltaMode;return i===WheelEvent.DOM_DELTA_LINE?(t*=40,n*=40,r*=40):i===WheelEvent.DOM_DELTA_PAGE&&(t*=800,n*=800,r*=800),{deltaX:t,deltaY:n,deltaZ:r,deltaMode:i}}function o(e,t=.001){let n=a(e);return-(n.deltaY===0?n.deltaX:n.deltaY)*t}var s=class{container;callbacks;boundWheel;boundMouseDown;boundMouseMove;boundMouseUp;boundMouseEnter;boundMouseLeave;isBound=!1;constructor(e,t){this.container=e,this.callbacks=t,this.boundWheel=this.handleWheel.bind(this),this.boundMouseDown=this.handleMouseDown.bind(this),this.boundMouseMove=this.handleMouseMove.bind(this),this.boundMouseUp=this.handleMouseUp.bind(this),this.boundMouseEnter=()=>this.callbacks.onMouseEnter?.(),this.boundMouseLeave=()=>this.callbacks.onMouseLeave?.()}bind(){this.isBound||(this.isBound=!0,this.container.addEventListener(`wheel`,this.boundWheel,{passive:!1}),this.container.addEventListener(`mousedown`,this.boundMouseDown),document.addEventListener(`mousemove`,this.boundMouseMove),document.addEventListener(`mouseup`,this.boundMouseUp),this.container.addEventListener(`mouseenter`,this.boundMouseEnter),this.container.addEventListener(`mouseleave`,this.boundMouseLeave))}unbind(){this.isBound&&(this.isBound=!1,this.container.removeEventListener(`wheel`,this.boundWheel),this.container.removeEventListener(`mousedown`,this.boundMouseDown),document.removeEventListener(`mousemove`,this.boundMouseMove),document.removeEventListener(`mouseup`,this.boundMouseUp),this.container.removeEventListener(`mouseenter`,this.boundMouseEnter),this.container.removeEventListener(`mouseleave`,this.boundMouseLeave))}handleWheel(e){let t=a(e);this.callbacks.onWheel?.(e,t)}handleMouseDown(e){this.callbacks.onMouseDown?.(e)}handleMouseMove(e){this.callbacks.onMouseMove?.(e)}handleMouseUp(e){this.callbacks.onMouseUp?.(e)}},c=class{callbacks;boundKeyDown;isBound=!1;constructor(e){this.callbacks=e,this.boundKeyDown=this.handleKeyDown.bind(this)}bind(){this.isBound||(this.isBound=!0,document.addEventListener(`keydown`,this.boundKeyDown))}unbind(){this.isBound&&(this.isBound=!1,document.removeEventListener(`keydown`,this.boundKeyDown))}handleKeyDown(e){if(e.repeat)return;let t=document.activeElement;if(t?.closest(`.monaco-editor`)||t?.tagName===`INPUT`||t?.tagName===`TEXTAREA`||t?.getAttribute(`contenteditable`)===`true`)return;let n=this.parseCombo(e);this.callbacks.onShortcut?.(n,e)}parseCombo(e){let t=[];(e.ctrlKey||e.metaKey)&&t.push(`ctrl`),e.altKey&&t.push(`alt`),e.shiftKey&&t.push(`shift`);let n=e.key.toLowerCase();return n===` `&&(n=`space`),n===`+`&&(n=`plus`),n===`-`&&(n=`minus`),n===`=`&&(n=`equal`),t.push(n),t.join(`+`)}},l=class{engine;zoomStep;selfHandle;zoomMode;viewportSize;contentSize;container=null;mouseAdapter=null;isSpacePressed=!1;isDragging=!1;dragStart={x:0,y:0};lastMouse={x:0,y:0};isHovered=!1;boundKeyUp;keyboardAdapter=null;pendingWheelDelta=0;wheelRafId=null;onCursorChange=null;zoomInterceptor=null;panInterceptor=null;constructor(e,t={}){this.engine=e,this.zoomStep=t.zoomStep??.25,this.selfHandle=t.selfHandle??!1,this.zoomMode=t.zoomMode??`pointer`,this.viewportSize=t.viewportSize??{width:0,height:0},this.contentSize=t.contentSize??{width:0,height:0},this.onCursorChange=t.onCursorChange??null,this.zoomInterceptor=t.zoomInterceptor??null,this.panInterceptor=t.panInterceptor??null,this.boundKeyUp=this.handleKeyUp.bind(this)}bind(e){if(this.selfHandle)return;this.unbind(),this.container=e;let t=e.parentElement;if(!t)return;document.addEventListener(`keyup`,this.boundKeyUp);let n={onWheel:this.handleWheel.bind(this),onMouseDown:this.handleMouseDown.bind(this),onMouseMove:this.handleMouseMove.bind(this),onMouseUp:this.handleMouseUp.bind(this),onMouseEnter:()=>{this.isHovered=!0},onMouseLeave:()=>{this.isHovered=!1}};this.mouseAdapter=new s(t,n),this.mouseAdapter.bind(),this.keyboardAdapter=new c({onShortcut:this.handleShortcut.bind(this)}),this.keyboardAdapter.bind()}unbind(){this.mouseAdapter?.unbind(),this.mouseAdapter=null,this.keyboardAdapter?.unbind(),this.keyboardAdapter=null,document.removeEventListener(`keyup`,this.boundKeyUp),this.container=null}destroy(){this.wheelRafId!==null&&(cancelAnimationFrame(this.wheelRafId),this.wheelRafId=null),this.unbind()}setZoomMode(e){this.zoomMode=e}handleWheel(e){if(e.ctrlKey||e.metaKey){e.preventDefault();let t=this.container?.parentElement,n=t?t.getBoundingClientRect():new DOMRect(0,0,0,0),r,i;switch(this.zoomMode){case`viewport-center`:r=this.viewportSize.width/2,i=this.viewportSize.height/2;break;case`content-center`:{let e=this.engine.getState();r=e.x+this.contentSize.width*e.scale/2,i=e.y+this.contentSize.height*e.scale/2;break}default:r=e.clientX-n.left,i=e.clientY-n.top;break}let a=e.deltaY===0?e.deltaX:e.deltaY;this.pendingWheelDelta+=a<0?1:-1,this.wheelRafId===null&&(this.wheelRafId=requestAnimationFrame(()=>{if(this.wheelRafId=null,this.pendingWheelDelta===0)return;let e=this.engine.getState().scale,t=e*Math.exp(this.pendingWheelDelta*this.zoomStep/3);this.pendingWheelDelta=0,this.executeZoom(()=>this.engine.zoomTo(t,r,i),e,t,r,i)}))}}handleShortcut(e,t){if(!this.isHovered)return;let n=this.viewportSize.width/2,r=this.viewportSize.height/2,i=e=>{e()};switch(e){case`ctrl+0`:t.preventDefault(),i(()=>this.executeZoom(()=>this.engine.zoomTo(1,n,r),this.engine.getState().scale,1,n,r));break;case`ctrl+minus`:{t.preventDefault();let e=this.engine.getState().scale,a=e-this.zoomStep;i(()=>this.executeZoom(()=>this.engine.zoomBy(-this.zoomStep,n,r),e,a,n,r));break}case`ctrl+equal`:case`ctrl+plus`:{t.preventDefault();let e=this.engine.getState().scale,a=e+this.zoomStep;i(()=>this.executeZoom(()=>this.engine.zoomBy(this.zoomStep,n,r),e,a,n,r));break}case`ctrl+1`:{t.preventDefault();let e=this.viewportSize.width,a=this.viewportSize.height,o=this.contentSize.width,s=this.contentSize.height;if(e>0&&a>0&&o>0&&s>0){let t=e*.9/o,c=a*.9/s,l=Math.min(t,c),u=(e-o*l)/2,d=(a-s*l)/2,f=this.engine.getState().scale;i(()=>this.executeZoom(()=>this.engine.setTransform({scale:l,x:u,y:d}),f,l,n,r))}break}case`space`:this.isSpacePressed||(this.isSpacePressed=!0,t.preventDefault(),this.notifyCursorChange());break;default:break}}handleKeyUp(e){e.key===` `&&(this.isSpacePressed=!1,this.isDragging=!1,this.notifyCursorChange())}handleMouseDown(e){this.isSpacePressed&&e.button===0&&(this.isDragging=!0,this.dragStart={x:e.clientX,y:e.clientY},this.lastMouse={x:e.clientX,y:e.clientY},e.preventDefault(),this.notifyCursorChange())}async handleMouseMove(e){if(this.isDragging&&this.isSpacePressed){let t=e.clientX-this.lastMouse.x,n=e.clientY-this.lastMouse.y;(!this.panInterceptor?.beforePan||await this.panInterceptor.beforePan(t,n))&&(this.engine.panBy(t,n),this.panInterceptor?.afterPan?.(t,n)),this.lastMouse={x:e.clientX,y:e.clientY}}}handleMouseUp(){this.isDragging=!1,this.notifyCursorChange()}async executeZoom(e,t,n,r,i){(!this.zoomInterceptor?.beforeZoom||await this.zoomInterceptor.beforeZoom(t,n,r,i))&&(e(),this.zoomInterceptor?.afterZoom?.(t,this.engine.getState().scale,r,i))}getCursorClass(){return this.isSpacePressed?this.isDragging?`grabbing`:`grab`:`default`}notifyCursorChange(){this.onCursorChange?.(this.getCursorClass())}};e.Canvas2DRenderer=i,e.InputManager=l,e.KeyboardAdapter=c,e.LabelCache=n,e.MouseAdapter=s,e.OffscreenRulerCache=t,e.getZoomDelta=o,e.normalizeWheel=a});

package/lib/input/index.d.ts

@@ -0,0 +1,5 @@
+export { InputManager, type InputManagerOptions } from './input-manager';
+export { MouseAdapter, type MouseAdapterCallbacks } from './mouse-adapter';
+export { KeyboardAdapter, type KeyboardAdapterCallbacks } from './keyboard-adapter';
+export { normalizeWheel, getZoomDelta, type NormalizedWheel } from './wheel-normalizer';
+//# sourceMappingURL=index.d.ts.map

package/lib/input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAA;AACxE,OAAO,EAAE,YAAY,EAAE,KAAK,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AAC1E,OAAO,EAAE,eAAe,EAAE,KAAK,wBAAwB,EAAE,MAAM,oBAAoB,CAAA;AACnF,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAA"}

package/lib/input/input-manager.d.ts

@@ -0,0 +1,74 @@
+import { TransformEngine } from '@sketch-ruler/core';
+export type ZoomMode = 'pointer' | 'viewport-center' | 'content-center';
+export interface ZoomInterceptor {
+    beforeZoom?: (from: number, to: number, originX: number, originY: number) => boolean | Promise<boolean>;
+    afterZoom?: (from: number, to: number, originX: number, originY: number) => void;
+}
+export interface PanInterceptor {
+    beforePan?: (dx: number, dy: number) => boolean | Promise<boolean>;
+    afterPan?: (dx: number, dy: number) => void;
+}
+export interface InputManagerOptions {
+    /** 缩放步长 */
+    zoomStep?: number;
+    /** 是否由外部自行处理事件 */
+    selfHandle?: boolean;
+    /** 缩放原点模式 */
+    zoomMode?: ZoomMode;
+    /** 视口尺寸（viewport-center / content-center 模式需要） */
+    viewportSize?: {
+        width: number;
+        height: number;
+    };
+    /** 内容尺寸（content-center 模式需要） */
+    contentSize?: {
+        width: number;
+        height: number;
+    };
+    /** 光标状态变化回调 */
+    onCursorChange?: (cursorClass: string) => void;
+    /** 缩放拦截器（用于插件 beforeZoom / afterZoom） */
+    zoomInterceptor?: ZoomInterceptor;
+    /** 平移拦截器（用于插件 beforePan / afterPan） */
+    panInterceptor?: PanInterceptor;
+}
+export declare class InputManager {
+    private engine;
+    private zoomStep;
+    private selfHandle;
+    private zoomMode;
+    private viewportSize;
+    private contentSize;
+    private container;
+    private mouseAdapter;
+    private isSpacePressed;
+    private isDragging;
+    private dragStart;
+    private lastMouse;
+    private isHovered;
+    private boundKeyUp;
+    private keyboardAdapter;
+    private pendingWheelDelta;
+    private wheelRafId;
+    private onCursorChange;
+    private zoomInterceptor;
+    private panInterceptor;
+    constructor(engine: TransformEngine, options?: InputManagerOptions);
+    /** 绑定到容器元素 */
+    bind(container: HTMLElement): void;
+    /** 解绑所有事件 */
+    unbind(): void;
+    /** 销毁 */
+    destroy(): void;
+    setZoomMode(mode: ZoomMode): void;
+    private handleWheel;
+    private handleShortcut;
+    private handleKeyUp;
+    private handleMouseDown;
+    private handleMouseMove;
+    private handleMouseUp;
+    private executeZoom;
+    getCursorClass(): string;
+    private notifyCursorChange;
+}
+//# sourceMappingURL=input-manager.d.ts.map

package/lib/input/input-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-manager.d.ts","sourceRoot":"","sources":["../../src/input/input-manager.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAKzD,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,iBAAiB,GAAG,gBAAgB,CAAA;AAEvE,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAA;IACvG,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CACjF;AAED,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAA;IAClE,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAC5C;AAED,MAAM,WAAW,mBAAmB;IAClC,WAAW;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kBAAkB;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa;IACb,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,kDAAkD;IAClD,YAAY,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;IAChD,gCAAgC;IAChC,WAAW,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;IAC/C,eAAe;IACf,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9C,yCAAyC;IACzC,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC,uCAAuC;IACvC,cAAc,CAAC,EAAE,cAAc,CAAA;CAChC;AAED,qBAAa,YAAY;IACvB,OAAO,CAAC,MAAM,CAAiB;IAC/B,OAAO,CAAC,QAAQ,CAAQ;IACxB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,QAAQ,CAAU;IAC1B,OAAO,CAAC,YAAY,CAAmC;IACvD,OAAO,CAAC,WAAW,CAAmC;IAEtD,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,YAAY,CAA4B;IAEhD,OAAO,CAAC,cAAc,CAAQ;IAC9B,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,eAAe,CAA+B;IACtD,OAAO,CAAC,iBAAiB,CAAI;IAC7B,OAAO,CAAC,UAAU,CAAsB;IACxC,OAAO,CAAC,cAAc,CAA+C;IACrE,OAAO,CAAC,eAAe,CAA+B;IACtD,OAAO,CAAC,cAAc,CAA8B;gBAExC,MAAM,EAAE,eAAe,EAAE,OAAO,GAAE,mBAAwB;IActE,cAAc;IACd,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI;IAmClC,aAAa;IACb,MAAM,IAAI,IAAI;IAYd,SAAS;IACT,OAAO,IAAI,IAAI;IAQf,WAAW,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI;IAIjC,OAAO,CAAC,WAAW;IAiDnB,OAAO,CAAC,cAAc;IA+FtB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,eAAe;YAUT,eAAe;IAkB7B,OAAO,CAAC,aAAa;YAKP,WAAW;IAiBzB,cAAc,IAAI,MAAM;IAOxB,OAAO,CAAC,kBAAkB;CAG3B"}

package/lib/input/keyboard-adapter.d.ts

@@ -0,0 +1,19 @@
+/**
+ * KeyboardAdapter - 键盘事件适配器
+ * M3 W11：修饰键状态追踪 + 快捷键映射
+ */
+export type KeyCombo = string;
+export interface KeyboardAdapterCallbacks {
+    onShortcut?: (combo: KeyCombo, e: KeyboardEvent) => void;
+}
+export declare class KeyboardAdapter {
+    private callbacks;
+    private boundKeyDown;
+    private isBound;
+    constructor(callbacks: KeyboardAdapterCallbacks);
+    bind(): void;
+    unbind(): void;
+    private handleKeyDown;
+    private parseCombo;
+}
+//# sourceMappingURL=keyboard-adapter.d.ts.map

package/lib/input/keyboard-adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-adapter.d.ts","sourceRoot":"","sources":["../../src/input/keyboard-adapter.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAA;AAE7B,MAAM,WAAW,wBAAwB;IACvC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,aAAa,KAAK,IAAI,CAAA;CACzD;AAED,qBAAa,eAAe;IAC1B,OAAO,CAAC,SAAS,CAA0B;IAC3C,OAAO,CAAC,YAAY,CAA4B;IAChD,OAAO,CAAC,OAAO,CAAQ;gBAEX,SAAS,EAAE,wBAAwB;IAK/C,IAAI,IAAI,IAAI;IAMZ,MAAM,IAAI,IAAI;IAMd,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,UAAU;CAgBnB"}

package/lib/input/mouse-adapter.d.ts

@@ -0,0 +1,32 @@
+import { NormalizedWheel } from './wheel-normalizer';
+export interface MouseAdapterCallbacks {
+    onWheel?: (e: WheelEvent, normalized: NormalizedWheel) => void;
+    onMouseDown?: (e: MouseEvent) => void;
+    onMouseMove?: (e: MouseEvent) => void;
+    onMouseUp?: (e: MouseEvent) => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+}
+/**
+ * MouseAdapter - 鼠标事件封装适配器
+ * 统一绑定/解绑生命周期，自动标准化滚轮事件
+ */
+export declare class MouseAdapter {
+    private container;
+    private callbacks;
+    private boundWheel;
+    private boundMouseDown;
+    private boundMouseMove;
+    private boundMouseUp;
+    private boundMouseEnter;
+    private boundMouseLeave;
+    private isBound;
+    constructor(container: HTMLElement, callbacks: MouseAdapterCallbacks);
+    bind(): void;
+    unbind(): void;
+    private handleWheel;
+    private handleMouseDown;
+    private handleMouseMove;
+    private handleMouseUp;
+}
+//# sourceMappingURL=mouse-adapter.d.ts.map

package/lib/input/mouse-adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mouse-adapter.d.ts","sourceRoot":"","sources":["../../src/input/mouse-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAEzE,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,eAAe,KAAK,IAAI,CAAA;IAC9D,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;IACrC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;IACrC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;IACnC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CAC1B;AAED;;;GAGG;AACH,qBAAa,YAAY;IACvB,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,SAAS,CAAuB;IAExC,OAAO,CAAC,UAAU,CAAyB;IAC3C,OAAO,CAAC,cAAc,CAAyB;IAC/C,OAAO,CAAC,cAAc,CAAyB;IAC/C,OAAO,CAAC,YAAY,CAAyB;IAC7C,OAAO,CAAC,eAAe,CAAY;IACnC,OAAO,CAAC,eAAe,CAAY;IAEnC,OAAO,CAAC,OAAO,CAAQ;gBAEX,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,qBAAqB;IAYpE,IAAI,IAAI,IAAI;IAYZ,MAAM,IAAI,IAAI;IAYd,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,aAAa;CAGtB"}

package/lib/input/wheel-normalizer.d.ts

@@ -0,0 +1,30 @@
+/**
+ * WheelNormalizer - 统一不同浏览器滚轮事件 delta 值
+ * Chrome/Firefox/Safari 的 WheelEvent.deltaY 差异很大，
+ * 统一转换为像素级增量，便于上层消费。
+ */
+export interface NormalizedWheel {
+    /** 水平方向增量（像素） */
+    deltaX: number;
+    /** 垂直方向增量（像素） */
+    deltaY: number;
+    /** Z 轴增量（像素） */
+    deltaZ: number;
+    /** 原始 deltaMode */
+    deltaMode: number;
+}
+/**
+ * 将浏览器原生 WheelEvent 标准化为像素单位
+ *
+ * 各浏览器典型值：
+ * - Chrome (line mode): deltaY ≈ 100
+ * - Firefox (line mode): deltaY ≈ 3
+ * - Safari (pixel mode): deltaY ≈ 1
+ */
+export declare function normalizeWheel(event: WheelEvent): NormalizedWheel;
+/**
+ * 获取滚轮事件的标准化缩放增量
+ * 用于 Ctrl+滚轮缩放场景，返回值已做方向归一化
+ */
+export declare function getZoomDelta(event: WheelEvent, sensitivity?: number): number;
+//# sourceMappingURL=wheel-normalizer.d.ts.map

package/lib/input/wheel-normalizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wheel-normalizer.d.ts","sourceRoot":"","sources":["../../src/input/wheel-normalizer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,eAAe;IAC9B,iBAAiB;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,iBAAiB;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,gBAAgB;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,mBAAmB;IACnB,SAAS,EAAE,MAAM,CAAA;CAClB;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,UAAU,GAAG,eAAe,CAoBjE;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,UAAU,EAAE,WAAW,SAAQ,GAAG,MAAM,CAK3E"}

package/lib/renderers/canvas-2d-renderer.d.ts

@@ -0,0 +1,10 @@
+import { Renderer, Rect, RulerRenderPayload } from './types';
+export declare class Canvas2DRenderer implements Renderer {
+    private offscreenCache;
+    private labelCache;
+    render(ctx: CanvasRenderingContext2D, items: RulerRenderPayload[], viewportRect: Rect): void;
+    private renderRuler;
+    private renderShadowText;
+    destroy(): void;
+}
+//# sourceMappingURL=canvas-2d-renderer.d.ts.map

package/lib/renderers/canvas-2d-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-2d-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/canvas-2d-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAQjE,qBAAa,gBAAiB,YAAW,QAAQ;IAC/C,OAAO,CAAC,cAAc,CAA4B;IAClD,OAAO,CAAC,UAAU,CAAmB;IAErC,MAAM,CAAC,GAAG,EAAE,wBAAwB,EAAE,KAAK,EAAE,kBAAkB,EAAE,EAAE,YAAY,EAAE,IAAI,GAAG,IAAI;IAQ5F,OAAO,CAAC,WAAW;IAkGnB,OAAO,CAAC,gBAAgB;IAsBxB,OAAO,IAAI,IAAI;CAIhB"}

package/lib/renderers/index.d.ts

@@ -0,0 +1,3 @@
+export type { Renderer, Rect, RulerRenderPayload, RenderItem } from './types';
+export { Canvas2DRenderer } from './canvas-2d-renderer';
+//# sourceMappingURL=index.d.ts.map

package/lib/renderers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/renderers/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAC7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA"}

package/lib/renderers/label-cache.d.ts

@@ -0,0 +1,36 @@
+/**
+ * LabelCache - 刻度标签 LRU 缓存池
+ * 将 fillText() 栅格化为离屏 Canvas，后续直接 drawImage() 贴图
+ * M2 性能优化核心：单标签绘制从 0.5-2ms 降至 0.01-0.05ms
+ */
+export interface LabelCacheKey {
+    text: string;
+    font: string;
+    color: string;
+}
+/** 缓存条目 */
+interface CacheEntry {
+    canvas: HTMLCanvasElement;
+    width: number;
+    height: number;
+}
+export declare class LabelCache {
+    private cache;
+    private maxSize;
+    constructor(maxSize?: number);
+    /**
+     * 获取缓存的标签 Canvas；未命中则创建并缓存
+     */
+    get(ctx: CanvasRenderingContext2D, key: LabelCacheKey): CacheEntry;
+    /** 预计算文本尺寸并栅格化 */
+    private createEntry;
+    /** 淘汰最久未使用的条目 */
+    private evictIfNeeded;
+    private hashKey;
+    /** 清空缓存 */
+    clear(): void;
+    /** 当前缓存数量 */
+    size(): number;
+}
+export {};
+//# sourceMappingURL=label-cache.d.ts.map

package/lib/renderers/label-cache.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"label-cache.d.ts","sourceRoot":"","sources":["../../src/renderers/label-cache.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd;AAED,WAAW;AACX,UAAU,UAAU;IAClB,MAAM,EAAE,iBAAiB,CAAA;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAED,qBAAa,UAAU;IACrB,OAAO,CAAC,KAAK,CAAgC;IAC7C,OAAO,CAAC,OAAO,CAAQ;gBAEX,OAAO,SAAM;IAIzB;;OAEG;IACH,GAAG,CAAC,GAAG,EAAE,wBAAwB,EAAE,GAAG,EAAE,aAAa,GAAG,UAAU;IAgBlE,kBAAkB;IAClB,OAAO,CAAC,WAAW;IA2BnB,iBAAiB;IACjB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,OAAO;IAIf,WAAW;IACX,KAAK,IAAI,IAAI;IAIb,aAAa;IACb,IAAI,IAAI,MAAM;CAGf"}

package/lib/renderers/offscreen-ruler-cache.d.ts

@@ -0,0 +1,17 @@
+import { ScaleMark } from '@sketch-ruler/core';
+import { RulerRenderPayload } from './types';
+export declare class OffscreenRulerCache {
+    private canvas;
+    private ctx;
+    private lastFingerprint;
+    /**
+     * 尝试使用离屏缓存绘制静态部分
+     * @returns true 表示使用了缓存，false 表示缓存未命中/未初始化
+     */
+    drawStatic(targetCtx: CanvasRenderingContext2D, marks: ScaleMark[], payload: RulerRenderPayload): boolean;
+    private rebuild;
+    private buildFingerprint;
+    /** 清空缓存 */
+    clear(): void;
+}
+//# sourceMappingURL=offscreen-ruler-cache.d.ts.map

package/lib/renderers/offscreen-ruler-cache.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"offscreen-ruler-cache.d.ts","sourceRoot":"","sources":["../../src/renderers/offscreen-ruler-cache.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAEjD,qBAAa,mBAAmB;IAC9B,OAAO,CAAC,MAAM,CAAiC;IAC/C,OAAO,CAAC,GAAG,CAAwC;IACnD,OAAO,CAAC,eAAe,CAAK;IAE5B;;;OAGG;IACH,UAAU,CACR,SAAS,EAAE,wBAAwB,EACnC,KAAK,EAAE,SAAS,EAAE,EAClB,OAAO,EAAE,kBAAkB,GAC1B,OAAO;IAeV,OAAO,CAAC,OAAO;IAoEf,OAAO,CAAC,gBAAgB;IAoBxB,WAAW;IACX,KAAK,IAAI,IAAI;CAKd"}

package/lib/renderers/types.d.ts

@@ -0,0 +1,34 @@
+import { ScaleMark, RulerPalette } from '@sketch-ruler/core';
+/** 视口矩形 */
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** 标尺渲染载荷 */
+export interface RulerRenderPayload {
+    type: 'ruler';
+    marks: ScaleMark[];
+    vertical: boolean;
+    thick: number;
+    width: number;
+    height: number;
+    ratio: number;
+    palette: RulerPalette;
+    /** 阴影起始位置（世界坐标） */
+    shadowStart?: number;
+    /** 阴影长度（世界坐标） */
+    shadowLength?: number;
+    /** 是否显示阴影文字 */
+    showShadowText?: boolean;
+    /** 画布尺寸（用于阴影文字和边界标注过滤） */
+    canvasSize?: number;
+}
+export type RenderItem = RulerRenderPayload;
+/** 渲染器抽象接口 */
+export interface Renderer {
+    render(ctx: CanvasRenderingContext2D, items: RenderItem[], viewportRect: Rect): void;
+    destroy(): void;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/renderers/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/renderers/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEjE,WAAW;AACX,MAAM,WAAW,IAAI;IACnB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAED,aAAa;AACb,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,YAAY,CAAA;IACrB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iBAAiB;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,eAAe;IACf,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,0BAA0B;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,MAAM,UAAU,GAAG,kBAAkB,CAAA;AAE3C,cAAc;AACd,MAAM,WAAW,QAAQ;IACvB,MAAM,CAAC,GAAG,EAAE,wBAAwB,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,YAAY,EAAE,IAAI,GAAG,IAAI,CAAA;IACpF,OAAO,IAAI,IAAI,CAAA;CAChB"}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@sketch-ruler/canvas",
+  "version": "3.0.0-beta.0",
+  "private": false,
+  "description": "Canvas rendering and DOM input management for sketch-ruler. Framework-agnostic, depends on Canvas 2D API and DOM Events.",
+  "keywords": [
+    "sketch-ruler",
+    "ruler",
+    "canvas",
+    "renderer",
+    "input",
+    "framework-agnostic"
+  ],
+  "license": "MIT",
+  "author": "kakajun <253495832@qq.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kakajun/vue3-sketch-ruler.git"
+  },
+  "files": [
+    "lib",
+    "AGENTS.md"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "lib/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs"
+    },
+    "./renderers": {
+      "types": "./lib/renderers/index.d.ts",
+      "import": "./lib/renderers/index.js",
+      "require": "./lib/renderers/index.cjs"
+    },
+    "./input": {
+      "types": "./lib/input/index.d.ts",
+      "import": "./lib/input/index.js",
+      "require": "./lib/input/index.cjs"
+    }
+  },
+  "dependencies": {
+    "@sketch-ruler/core": "workspace:*"
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "devDependencies": {
+    "vite": "^8.0.13",
+    "vite-plugin-dts": "^5.0.0",
+    "vitest": "^4.1.6"
+  }
+}