@zseven-w/pen-renderer 0.6.0 → 0.7.1

package/src/types.ts

@@ -1,40 +1,36 @@
-import type { PenNode } from '@zseven-w/pen-types'
+import type { PenNode } from '@zseven-w/pen-types';
 
-export interface RenderNode {
-  node: PenNode
-  absX: number
-  absY: number
-  absW: number
-  absH: number
-  clipRect?: { x: number; y: number; w: number; h: number; rx: number }
-}
+export type { ViewportState } from '@zseven-w/pen-types';
 
-export interface ViewportState {
-  zoom: number
-  panX: number
-  panY: number
+export interface RenderNode {
+  node: PenNode;
+  absX: number;
+  absY: number;
+  absW: number;
+  absH: number;
+  clipRect?: { x: number; y: number; w: number; h: number; rx: number };
 }
 
 /** Injectable icon lookup function for resolving icon names to SVG path data. */
 export interface IconLookupFn {
-  (name: string): { d: string; iconId: string; style: 'stroke' | 'fill' } | null
+  (name: string): { d: string; iconId: string; style: 'stroke' | 'fill' } | null;
 }
 
 export interface PenRendererOptions {
   /** URL pattern for CanvasKit WASM files. Default: '/canvaskit/' */
-  canvasKitPath?: string | ((file: string) => string)
+  canvasKitPath?: string | ((file: string) => string);
   /** Base URL for bundled font files. Default: '/fonts/' */
-  fontBasePath?: string
+  fontBasePath?: string;
   /** Custom Google Fonts CSS endpoint. Default: 'https://fonts.googleapis.com/css2' */
-  googleFontsCssUrl?: string
+  googleFontsCssUrl?: string;
   /** Icon lookup function. Default: null (icons render as fallback circle) */
-  iconLookup?: IconLookupFn
+  iconLookup?: IconLookupFn;
   /** Theme variant to use for variable resolution. Default: first variant per axis */
-  themeVariant?: Record<string, string>
+  themeVariant?: Record<string, string>;
   /** Background color. Default: '#1a1a1a' */
-  backgroundColor?: string
+  backgroundColor?: string;
   /** Device pixel ratio override. Default: window.devicePixelRatio */
-  devicePixelRatio?: number
+  devicePixelRatio?: number;
   /** Default fonts to preload. Default: ['Inter', 'Noto Sans SC'] */
-  defaultFonts?: string[]
+  defaultFonts?: string[];
 }

package/src/viewport.ts

@@ -1,48 +1,46 @@
-import { MIN_ZOOM, MAX_ZOOM } from '@zseven-w/pen-core'
-import type { ViewportState } from './types.js'
+import { MIN_ZOOM, MAX_ZOOM } from '@zseven-w/pen-core';
+import type { ViewportState } from './types.js';
 
-export type { ViewportState } from './types.js'
+export type { ViewportState } from './types.js';
 
 /**
  * Compute the 3x3 transform matrix for CanvasKit from viewport state.
  * CanvasKit uses column-major [scaleX, skewX, transX, skewY, scaleY, transY, pers0, pers1, pers2]
  */
 export function viewportMatrix(vp: ViewportState): number[] {
-  return [
-    vp.zoom, 0, vp.panX,
-    0, vp.zoom, vp.panY,
-    0, 0, 1,
-  ]
+  return [vp.zoom, 0, vp.panX, 0, vp.zoom, vp.panY, 0, 0, 1];
 }
 
 /**
  * Convert screen (client) coordinates to scene coordinates.
  */
 export function screenToScene(
-  clientX: number, clientY: number,
+  clientX: number,
+  clientY: number,
   canvasRect: DOMRect,
   vp: ViewportState,
 ): { x: number; y: number } {
-  const sx = clientX - canvasRect.left
-  const sy = clientY - canvasRect.top
+  const sx = clientX - canvasRect.left;
+  const sy = clientY - canvasRect.top;
   return {
     x: (sx - vp.panX) / vp.zoom,
     y: (sy - vp.panY) / vp.zoom,
-  }
+  };
 }
 
 /**
  * Convert scene coordinates to screen coordinates.
  */
 export function sceneToScreen(
-  sceneX: number, sceneY: number,
+  sceneX: number,
+  sceneY: number,
   canvasRect: DOMRect,
   vp: ViewportState,
 ): { x: number; y: number } {
   return {
     x: sceneX * vp.zoom + vp.panX + canvasRect.left,
     y: sceneY * vp.zoom + vp.panY + canvasRect.top,
-  }
+  };
 }
 
 /**
@@ -50,23 +48,24 @@ export function sceneToScreen(
  */
 export function zoomToPoint(
   vp: ViewportState,
-  screenX: number, screenY: number,
+  screenX: number,
+  screenY: number,
   canvasRect: DOMRect,
   newZoom: number,
 ): ViewportState {
-  const clampedZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, newZoom))
-  const sx = screenX - canvasRect.left
-  const sy = screenY - canvasRect.top
+  const clampedZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, newZoom));
+  const sx = screenX - canvasRect.left;
+  const sy = screenY - canvasRect.top;
 
   // The scene point under the cursor should stay fixed
-  const sceneX = (sx - vp.panX) / vp.zoom
-  const sceneY = (sy - vp.panY) / vp.zoom
+  const sceneX = (sx - vp.panX) / vp.zoom;
+  const sceneY = (sy - vp.panY) / vp.zoom;
 
   return {
     zoom: clampedZoom,
     panX: sx - sceneX * clampedZoom,
     panY: sy - sceneY * clampedZoom,
-  }
+  };
 }
 
 /**
@@ -79,11 +78,11 @@ export function getViewportBounds(
   margin = 0,
 ) {
   return {
-    left: (-vp.panX) / vp.zoom - margin,
-    top: (-vp.panY) / vp.zoom - margin,
+    left: -vp.panX / vp.zoom - margin,
+    top: -vp.panY / vp.zoom - margin,
     right: (-vp.panX + canvasWidth) / vp.zoom + margin,
     bottom: (-vp.panY + canvasHeight) / vp.zoom + margin,
-  }
+  };
 }
 
 /**
@@ -94,9 +93,9 @@ export function isRectInViewport(
   vpBounds: ReturnType<typeof getViewportBounds>,
 ): boolean {
   return !(
-    rect.x + rect.w < vpBounds.left
-    || rect.x > vpBounds.right
-    || rect.y + rect.h < vpBounds.top
-    || rect.y > vpBounds.bottom
-  )
+    rect.x + rect.w < vpBounds.left ||
+    rect.x > vpBounds.right ||
+    rect.y + rect.h < vpBounds.top ||
+    rect.y > vpBounds.bottom
+  );
 }