@zseven-w/pen-core 0.6.0 → 0.7.0

package/src/boolean-ops.ts

@@ -1,76 +1,77 @@
-import { nanoid } from 'nanoid'
-import type { PenNode, PathNode } from '@zseven-w/pen-types'
+import { nanoid } from 'nanoid';
+import type { PenNode, PathNode } from '@zseven-w/pen-types';
 
-export type BooleanOpType = 'union' | 'subtract' | 'intersect'
+export type BooleanOpType = 'union' | 'subtract' | 'intersect';
 
 // ---------------------------------------------------------------------------
 // Paper.js scope — headless (no canvas needed)
 // ---------------------------------------------------------------------------
 
 interface PaperBoundsLike {
-  center: unknown
-  x: number
-  y: number
-  width: number
-  height: number
+  center: unknown;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
 }
 
 interface PaperPathItem {
-  bounds: PaperBoundsLike
-  pathData: string
-  translate: (point: unknown) => void
-  rotate: (angle: number, center: unknown) => void
-  unite: (path: PaperPathItem) => PaperPathItem
-  subtract: (path: PaperPathItem) => PaperPathItem
-  intersect: (path: PaperPathItem) => PaperPathItem
-  remove: () => void
+  bounds: PaperBoundsLike;
+  pathData: string;
+  translate: (point: unknown) => void;
+  rotate: (angle: number, center: unknown) => void;
+  unite: (path: PaperPathItem) => PaperPathItem;
+  subtract: (path: PaperPathItem) => PaperPathItem;
+  intersect: (path: PaperPathItem) => PaperPathItem;
+  remove: () => void;
 }
 
 interface PaperScope {
-  setup: (size: unknown) => void
-  activate: () => void
-  Size: new (width: number, height: number) => unknown
-  Point: new (x: number, y: number) => unknown
+  setup: (size: unknown) => void;
+  activate: () => void;
+  Size: new (width: number, height: number) => unknown;
+  Point: new (x: number, y: number) => unknown;
   CompoundPath: {
-    create: (pathData: string) => PaperPathItem
-  }
+    create: (pathData: string) => PaperPathItem;
+  };
 }
 
 interface PaperModule {
-  PaperScope: new () => PaperScope
-  Point: new (x: number, y: number) => unknown
+  PaperScope: new () => PaperScope;
+  Point: new (x: number, y: number) => unknown;
 }
 
-let paperModule: PaperModule | null | undefined
-let scope: PaperScope | null = null
+let paperModule: PaperModule | null | undefined;
+let scope: PaperScope | null = null;
 
 function getPaperModule(): PaperModule | null {
-  if (paperModule !== undefined) return paperModule
+  if (paperModule !== undefined) return paperModule;
   try {
     // Indirect require via globalThis to load paper.js at runtime without
     // triggering esbuild's direct-eval warning. The assignment to globalThis
     // happens once; subsequent calls read from the cached paperModule.
-    const _r = (globalThis as any)['require'] as NodeRequire | undefined
-      ?? (typeof require !== 'undefined' ? require : undefined)
-    if (!_r) throw new Error('require not available')
-    paperModule = _r('paper') as PaperModule
+    const _r =
+      ((globalThis as any)['require'] as NodeRequire | undefined) ??
+      (typeof require !== 'undefined' ? require : undefined);
+    if (!_r) throw new Error('require not available');
+    paperModule = _r('paper') as PaperModule;
   } catch {
-    paperModule = null
+    paperModule = null;
   }
-  return paperModule
+  return paperModule;
 }
 
 function getScope(): PaperScope {
-  const paper = getPaperModule()
+  const paper = getPaperModule();
   if (!paper) {
-    throw new Error('paper runtime is unavailable')
+    throw new Error('paper runtime is unavailable');
   }
   if (!scope) {
-    scope = new paper.PaperScope()
-    scope.setup(new scope.Size(1, 1))
+    scope = new paper.PaperScope();
+    scope.setup(new scope.Size(1, 1));
   }
-  scope.activate()
-  return scope
+  scope.activate();
+  return scope;
 }
 
 // ---------------------------------------------------------------------------
@@ -78,31 +79,26 @@ function getScope(): PaperScope {
 // ---------------------------------------------------------------------------
 
 function sizeVal(v: number | string | undefined, fallback: number): number {
-  if (typeof v === 'number') return v
+  if (typeof v === 'number') return v;
   if (typeof v === 'string') {
-    const m = v.match(/\((\d+(?:\.\d+)?)\)/)
-    if (m) return parseFloat(m[1])
-    const n = parseFloat(v)
-    if (!isNaN(n)) return n
+    const m = v.match(/\((\d+(?:\.\d+)?)\)/);
+    if (m) return parseFloat(m[1]);
+    const n = parseFloat(v);
+    if (!isNaN(n)) return n;
   }
-  return fallback
+  return fallback;
 }
 
-function rectToPath(
-  w: number,
-  h: number,
-  cr?: number | [number, number, number, number],
-): string {
+function rectToPath(w: number, h: number, cr?: number | [number, number, number, number]): string {
   if (!cr || (typeof cr === 'number' && cr === 0)) {
-    return `M 0 0 L ${w} 0 L ${w} ${h} L 0 ${h} Z`
+    return `M 0 0 L ${w} 0 L ${w} ${h} L 0 ${h} Z`;
   }
-  let [tl, tr, br, bl] =
-    typeof cr === 'number' ? [cr, cr, cr, cr] : cr
-  const maxR = Math.min(w, h) / 2
-  tl = Math.min(tl, maxR)
-  tr = Math.min(tr, maxR)
-  br = Math.min(br, maxR)
-  bl = Math.min(bl, maxR)
+  let [tl, tr, br, bl] = typeof cr === 'number' ? [cr, cr, cr, cr] : cr;
+  const maxR = Math.min(w, h) / 2;
+  tl = Math.min(tl, maxR);
+  tr = Math.min(tr, maxR);
+  br = Math.min(br, maxR);
+  bl = Math.min(bl, maxR);
   return [
     `M ${tl} 0`,
     `L ${w - tr} 0`,
@@ -116,7 +112,7 @@ function rectToPath(
     'Z',
   ]
     .filter(Boolean)
-    .join(' ')
+    .join(' ');
 }
 
 function ellipseToPath(rx: number, ry: number): string {
@@ -128,32 +124,35 @@ function ellipseToPath(rx: number, ry: number): string {
     `A ${rx} ${ry} 0 0 1 ${rx} 0`,
     `A ${rx} ${ry} 0 0 1 ${rx * 2} ${ry}`,
     'Z',
-  ].join(' ')
+  ].join(' ');
 }
 
 function polygonToPath(count: number, w: number, h: number): string {
-  const raw: [number, number][] = []
+  const raw: [number, number][] = [];
   for (let i = 0; i < count; i++) {
-    const angle = (i * 2 * Math.PI) / count - Math.PI / 2
-    raw.push([Math.cos(angle), Math.sin(angle)])
+    const angle = (i * 2 * Math.PI) / count - Math.PI / 2;
+    raw.push([Math.cos(angle), Math.sin(angle)]);
   }
-  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity
+  let minX = Infinity,
+    maxX = -Infinity,
+    minY = Infinity,
+    maxY = -Infinity;
   for (const [rx, ry] of raw) {
-    if (rx < minX) minX = rx
-    if (rx > maxX) maxX = rx
-    if (ry < minY) minY = ry
-    if (ry > maxY) maxY = ry
+    if (rx < minX) minX = rx;
+    if (rx > maxX) maxX = rx;
+    if (ry < minY) minY = ry;
+    if (ry > maxY) maxY = ry;
   }
-  const rw = maxX - minX
-  const rh = maxY - minY
-  const parts: string[] = []
+  const rw = maxX - minX;
+  const rh = maxY - minY;
+  const parts: string[] = [];
   for (let i = 0; i < count; i++) {
-    const px = ((raw[i][0] - minX) / rw) * w
-    const py = ((raw[i][1] - minY) / rh) * h
-    parts.push(i === 0 ? `M ${px} ${py}` : `L ${px} ${py}`)
+    const px = ((raw[i][0] - minX) / rw) * w;
+    const py = ((raw[i][1] - minY) / rh) * h;
+    parts.push(i === 0 ? `M ${px} ${py}` : `L ${px} ${py}`);
   }
-  parts.push('Z')
-  return parts.join(' ')
+  parts.push('Z');
+  return parts.join(' ');
 }
 
 /** Convert a shape node to an SVG path `d` string in local coordinates (origin at 0,0). */
@@ -161,26 +160,26 @@ function nodeToLocalPath(node: PenNode): string | null {
   switch (node.type) {
     case 'rectangle':
     case 'frame': {
-      const w = sizeVal(node.width, 100)
-      const h = sizeVal(node.height, 100)
-      return rectToPath(w, h, node.cornerRadius)
+      const w = sizeVal(node.width, 100);
+      const h = sizeVal(node.height, 100);
+      return rectToPath(w, h, node.cornerRadius);
     }
     case 'ellipse': {
-      const w = sizeVal(node.width, 100)
-      const h = sizeVal(node.height, 100)
-      return ellipseToPath(w / 2, h / 2)
+      const w = sizeVal(node.width, 100);
+      const h = sizeVal(node.height, 100);
+      return ellipseToPath(w / 2, h / 2);
     }
     case 'polygon': {
-      const w = sizeVal(node.width, 100)
-      const h = sizeVal(node.height, 100)
-      return polygonToPath(node.polygonCount || 6, w, h)
+      const w = sizeVal(node.width, 100);
+      const h = sizeVal(node.height, 100);
+      return polygonToPath(node.polygonCount || 6, w, h);
     }
     case 'path':
-      return node.d
+      return node.d;
     case 'line':
-      return `M 0 0 L ${(node.x2 ?? (node.x ?? 0) + 100) - (node.x ?? 0)} ${(node.y2 ?? (node.y ?? 0)) - (node.y ?? 0)}`
+      return `M 0 0 L ${(node.x2 ?? (node.x ?? 0) + 100) - (node.x ?? 0)} ${(node.y2 ?? node.y ?? 0) - (node.y ?? 0)}`;
     default:
-      return null
+      return null;
   }
 }
 
@@ -189,18 +188,11 @@ function nodeToLocalPath(node: PenNode): string | null {
 // ---------------------------------------------------------------------------
 
 /** Types that can participate in boolean operations. */
-const BOOLEAN_TYPES = new Set([
-  'rectangle',
-  'ellipse',
-  'polygon',
-  'path',
-  'line',
-  'frame',
-])
+const BOOLEAN_TYPES = new Set(['rectangle', 'ellipse', 'polygon', 'path', 'line', 'frame']);
 
 export function canBooleanOp(nodes: PenNode[]): boolean {
-  if (nodes.length < 2) return false
-  return nodes.every((n) => BOOLEAN_TYPES.has(n.type))
+  if (nodes.length < 2) return false;
+  return nodes.every((n) => BOOLEAN_TYPES.has(n.type));
 }
 
 /**
@@ -208,94 +200,91 @@ export function canBooleanOp(nodes: PenNode[]): boolean {
  * coordinates (applying x, y, rotation).
  */
 function nodeToPaperPath(node: PenNode): PaperPathItem | null {
-  const d = nodeToLocalPath(node)
-  if (!d) return null
+  const d = nodeToLocalPath(node);
+  if (!d) return null;
 
-  const s = getScope()
-  let item: PaperPathItem
+  const s = getScope();
+  let item: PaperPathItem;
   try {
-    item = s.CompoundPath.create(d)
+    item = s.CompoundPath.create(d);
   } catch {
-    return null
+    return null;
   }
 
   // Apply node transform: translate to (x, y), then rotate around center
-  const x = node.x ?? 0
-  const y = node.y ?? 0
-  item.translate(new s.Point(x, y))
+  const x = node.x ?? 0;
+  const y = node.y ?? 0;
+  item.translate(new s.Point(x, y));
 
-  const rotation = node.rotation ?? 0
+  const rotation = node.rotation ?? 0;
   if (rotation !== 0) {
     // Rotate around the bounding-box center of the translated item
-    item.rotate(rotation, item.bounds.center)
+    item.rotate(rotation, item.bounds.center);
   }
 
-  return item
+  return item;
 }
 
 /**
  * Execute a boolean operation on the given PenNodes.
  * Returns a new PathNode with the result, or null on failure.
  */
-export function executeBooleanOp(
-  nodes: PenNode[],
-  operation: BooleanOpType,
-): PathNode | null {
-  if (nodes.length < 2) return null
+export function executeBooleanOp(nodes: PenNode[], operation: BooleanOpType): PathNode | null {
+  if (nodes.length < 2) return null;
 
-  if (!getPaperModule()) return null
+  if (!getPaperModule()) return null;
 
-  const paperPaths = nodes.map(nodeToPaperPath)
-  if (paperPaths.some((p) => p === null)) return null
+  const paperPaths = nodes.map(nodeToPaperPath);
+  if (paperPaths.some((p) => p === null)) return null;
 
-  const paths = paperPaths as PaperPathItem[]
+  const paths = paperPaths as PaperPathItem[];
 
   // Accumulate: fold left with the boolean operation
-  let result = paths[0]
+  let result = paths[0];
   for (let i = 1; i < paths.length; i++) {
     switch (operation) {
       case 'union':
-        result = result.unite(paths[i])
-        break
+        result = result.unite(paths[i]);
+        break;
       case 'subtract':
-        result = result.subtract(paths[i])
-        break
+        result = result.subtract(paths[i]);
+        break;
       case 'intersect':
-        result = result.intersect(paths[i])
-        break
+        result = result.intersect(paths[i]);
+        break;
     }
   }
 
   // Extract SVG path data
-  const pathData = result.pathData
-  if (!pathData || pathData.trim().length === 0) return null
+  const pathData = result.pathData;
+  if (!pathData || pathData.trim().length === 0) return null;
 
   // Get bounding box for positioning
-  const bounds = result.bounds
+  const bounds = result.bounds;
 
   // Translate path so it starts at origin (0,0)
-  const paper = getPaperModule()
-  if (!paper) return null
-  result.translate(new paper.Point(-bounds.x, -bounds.y))
-  const originPathData = result.pathData
+  const paper = getPaperModule();
+  if (!paper) return null;
+  result.translate(new paper.Point(-bounds.x, -bounds.y));
+  const originPathData = result.pathData;
 
   // Clean up Paper.js items
-  for (const p of paths) p.remove()
-  result.remove()
+  for (const p of paths) p.remove();
+  result.remove();
 
   // Build the label
   const opLabels: Record<BooleanOpType, string> = {
     union: 'Union',
     subtract: 'Subtract',
     intersect: 'Intersect',
-  }
+  };
 
   // Inherit style from first operand
-  const first = nodes[0]
-  const fill = 'fill' in first ? first.fill : undefined
-  const stroke = 'stroke' in first ? first.stroke : undefined
-  const effects = 'effects' in first ? first.effects : undefined
-  const opacity = first.opacity
+  const first = nodes[0];
+  const fill = 'fill' in first ? first.fill : undefined;
+  const stroke = 'stroke' in first ? first.stroke : undefined;
+  const effects = 'effects' in first ? first.effects : undefined;
+  const opacity = first.opacity;
 
   return {
     id: nanoid(),
@@ -310,5 +299,5 @@ export function executeBooleanOp(
     stroke,
     effects,
     opacity,
-  }
+  };
 }

package/src/constants.ts

@@ -1,49 +1,49 @@
-export const MIN_ZOOM = 0.02
-export const MAX_ZOOM = 256
-export const ZOOM_STEP = 0.1
-export const SNAP_THRESHOLD = 5
-export const DEFAULT_FILL = '#d1d5db'
-export const DEFAULT_STROKE = '#374151'
-export const DEFAULT_STROKE_WIDTH = 1
-export const CANVAS_BACKGROUND_LIGHT = '#e5e5e5'
-export const CANVAS_BACKGROUND_DARK = '#1a1a1a'
+export const MIN_ZOOM = 0.02;
+export const MAX_ZOOM = 256;
+export const ZOOM_STEP = 0.1;
+export const SNAP_THRESHOLD = 5;
+export const DEFAULT_FILL = '#d1d5db';
+export const DEFAULT_STROKE = '#374151';
+export const DEFAULT_STROKE_WIDTH = 1;
+export const CANVAS_BACKGROUND_LIGHT = '#e5e5e5';
+export const CANVAS_BACKGROUND_DARK = '#1a1a1a';
 
-export const SELECTION_BLUE = '#0d99ff'
-export const COMPONENT_COLOR = '#a855f7'
-export const INSTANCE_COLOR = '#9281f7'
+export const SELECTION_BLUE = '#0d99ff';
+export const COMPONENT_COLOR = '#a855f7';
+export const INSTANCE_COLOR = '#9281f7';
 
 // Hover / overlay / indicator
-export const HOVER_BLUE = '#3b82f6'
-export const HOVER_LINE_WIDTH = 1.5
-export const HOVER_DASH = [4, 4]
-export const INDICATOR_BLUE = '#3B82F6'
-export const INDICATOR_LINE_WIDTH = 2
-export const INDICATOR_DASH = [6, 4]
-export const INDICATOR_ENDPOINT_RADIUS = 3
+export const HOVER_BLUE = '#3b82f6';
+export const HOVER_LINE_WIDTH = 1.5;
+export const HOVER_DASH = [4, 4];
+export const INDICATOR_BLUE = '#3B82F6';
+export const INDICATOR_LINE_WIDTH = 2;
+export const INDICATOR_DASH = [6, 4];
+export const INDICATOR_ENDPOINT_RADIUS = 3;
 
 // Frame labels
-export const FRAME_LABEL_FONT_SIZE = 12
-export const FRAME_LABEL_OFFSET_Y = 6
-export const FRAME_LABEL_COLOR = '#999999'
+export const FRAME_LABEL_FONT_SIZE = 12;
+export const FRAME_LABEL_OFFSET_Y = 6;
+export const FRAME_LABEL_COLOR = '#999999';
 
 // Pen tool
-export const PEN_ANCHOR_FILL = '#ffffff'
-export const PEN_ANCHOR_RADIUS = 4
-export const PEN_ANCHOR_FIRST_RADIUS = 5
-export const PEN_HANDLE_DOT_RADIUS = 3
-export const PEN_HANDLE_LINE_STROKE = '#888888'
-export const PEN_RUBBER_BAND_STROKE = 'rgba(13, 153, 255, 0.5)'
-export const PEN_RUBBER_BAND_DASH = [4, 4]
-export const PEN_CLOSE_HIT_THRESHOLD = 8
+export const PEN_ANCHOR_FILL = '#ffffff';
+export const PEN_ANCHOR_RADIUS = 4;
+export const PEN_ANCHOR_FIRST_RADIUS = 5;
+export const PEN_HANDLE_DOT_RADIUS = 3;
+export const PEN_HANDLE_LINE_STROKE = '#888888';
+export const PEN_RUBBER_BAND_STROKE = 'rgba(13, 153, 255, 0.5)';
+export const PEN_RUBBER_BAND_DASH = [4, 4];
+export const PEN_CLOSE_HIT_THRESHOLD = 8;
 
 // Dimension label
-export const DIMENSION_LABEL_OFFSET_Y = 8
+export const DIMENSION_LABEL_OFFSET_Y = 8;
 
 // Default node colors
-export const DEFAULT_FRAME_FILL = '#ffffff'
-export const DEFAULT_TEXT_FILL = '#000000'
+export const DEFAULT_FRAME_FILL = '#ffffff';
+export const DEFAULT_TEXT_FILL = '#000000';
 
 // Smart guides
-export const GUIDE_COLOR = '#FF6B35'
-export const GUIDE_LINE_WIDTH = 1
-export const GUIDE_DASH = [3, 3]
+export const GUIDE_COLOR = '#FF6B35';
+export const GUIDE_LINE_WIDTH = 1;
+export const GUIDE_DASH = [3, 3];