@zseven-w/pen-renderer 0.5.2 → 0.7.0

package/src/paint-utils.ts

@@ -1,8 +1,8 @@
-import type { CanvasKit } from 'canvaskit-wasm'
-import type { PenFill, PenStroke } from '@zseven-w/pen-types'
-import { DEFAULT_FILL, DEFAULT_STROKE_WIDTH } from '@zseven-w/pen-core'
+import type { CanvasKit } from 'canvaskit-wasm';
+import type { PenFill, PenStroke } from '@zseven-w/pen-types';
+import { DEFAULT_FILL, DEFAULT_STROKE_WIDTH } from '@zseven-w/pen-core';
 
-export { cssFontFamily } from '@zseven-w/pen-core'
+export { cssFontFamily } from '@zseven-w/pen-core';
 
 // ---------------------------------------------------------------------------
 // Color parsing — ck.Color4f takes 0-1 floats for all channels (r, g, b, a)
@@ -10,57 +10,61 @@ export { cssFontFamily } from '@zseven-w/pen-core'
 
 export function parseColor(ck: CanvasKit, color: string): Float32Array {
   if (color.startsWith('#')) {
-    const hex = color.slice(1)
+    const hex = color.slice(1);
     if (hex.length === 8) {
-      const r = parseInt(hex.slice(0, 2), 16) / 255
-      const g = parseInt(hex.slice(2, 4), 16) / 255
-      const b = parseInt(hex.slice(4, 6), 16) / 255
-      const a = parseInt(hex.slice(6, 8), 16) / 255
-      return ck.Color4f(r, g, b, a)
+      const r = parseInt(hex.slice(0, 2), 16) / 255;
+      const g = parseInt(hex.slice(2, 4), 16) / 255;
+      const b = parseInt(hex.slice(4, 6), 16) / 255;
+      const a = parseInt(hex.slice(6, 8), 16) / 255;
+      return ck.Color4f(r, g, b, a);
     }
     if (hex.length === 6) {
-      const r = parseInt(hex.slice(0, 2), 16) / 255
-      const g = parseInt(hex.slice(2, 4), 16) / 255
-      const b = parseInt(hex.slice(4, 6), 16) / 255
-      return ck.Color4f(r, g, b, 1)
+      const r = parseInt(hex.slice(0, 2), 16) / 255;
+      const g = parseInt(hex.slice(2, 4), 16) / 255;
+      const b = parseInt(hex.slice(4, 6), 16) / 255;
+      return ck.Color4f(r, g, b, 1);
     }
     if (hex.length === 3) {
-      const r = parseInt(hex[0] + hex[0], 16) / 255
-      const g = parseInt(hex[1] + hex[1], 16) / 255
-      const b = parseInt(hex[2] + hex[2], 16) / 255
-      return ck.Color4f(r, g, b, 1)
+      const r = parseInt(hex[0] + hex[0], 16) / 255;
+      const g = parseInt(hex[1] + hex[1], 16) / 255;
+      const b = parseInt(hex[2] + hex[2], 16) / 255;
+      return ck.Color4f(r, g, b, 1);
     }
   }
-  if (color === 'transparent') return ck.Color4f(0, 0, 0, 0)
-  if (color === 'white') return ck.Color4f(1, 1, 1, 1)
-  if (color === 'black') return ck.Color4f(0, 0, 0, 1)
+  if (color === 'transparent') return ck.Color4f(0, 0, 0, 0);
+  if (color === 'white') return ck.Color4f(1, 1, 1, 1);
+  if (color === 'black') return ck.Color4f(0, 0, 0, 1);
   // rgba() parsing
-  const rgbaMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/)
+  const rgbaMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
   if (rgbaMatch) {
     return ck.Color4f(
       parseInt(rgbaMatch[1]) / 255,
       parseInt(rgbaMatch[2]) / 255,
       parseInt(rgbaMatch[3]) / 255,
       rgbaMatch[4] !== undefined ? parseFloat(rgbaMatch[4]) : 1,
-    )
+    );
   }
-  return ck.Color4f(0.82, 0.835, 0.858, 1) // fallback #d1d5db
+  return ck.Color4f(0.82, 0.835, 0.858, 1); // fallback #d1d5db
 }
 
 // ---------------------------------------------------------------------------
 // Corner radius helpers
 // ---------------------------------------------------------------------------
 
-export function cornerRadiusValue(cr: number | [number, number, number, number] | undefined): number {
-  if (cr === undefined) return 0
-  if (typeof cr === 'number') return cr
-  return cr[0]
+export function cornerRadiusValue(
+  cr: number | [number, number, number, number] | undefined,
+): number {
+  if (cr === undefined) return 0;
+  if (typeof cr === 'number') return cr;
+  return cr[0];
 }
 
-export function cornerRadii(cr: number | [number, number, number, number] | undefined): [number, number, number, number] {
-  if (cr === undefined) return [0, 0, 0, 0]
-  if (typeof cr === 'number') return [cr, cr, cr, cr]
-  return cr
+export function cornerRadii(
+  cr: number | [number, number, number, number] | undefined,
+): [number, number, number, number] {
+  if (cr === undefined) return [0, 0, 0, 0];
+  if (typeof cr === 'number') return [cr, cr, cr, cr];
+  return cr;
 }
 
 // ---------------------------------------------------------------------------
@@ -68,28 +72,44 @@ export function cornerRadii(cr: number | [number, number, number, number] | unde
 // ---------------------------------------------------------------------------
 
 export function resolveFillColor(fills?: PenFill[] | string): string {
-  if (typeof fills === 'string') return fills
-  if (!fills || fills.length === 0) return DEFAULT_FILL
-  const first = fills[0]
-  if (first.type === 'solid') return first.color
+  if (typeof fills === 'string') return fills;
+  if (!fills || fills.length === 0) return DEFAULT_FILL;
+  const first = fills[0];
+  if (!first) return DEFAULT_FILL;
+  if (first.type === 'solid') return first.color;
   if (first.type === 'linear_gradient' || first.type === 'radial_gradient') {
-    return first.stops[0]?.color ?? DEFAULT_FILL
+    return first.stops[0]?.color ?? DEFAULT_FILL;
   }
-  return DEFAULT_FILL
+  return DEFAULT_FILL;
 }
 
 export function resolveStrokeColor(stroke?: PenStroke): string | undefined {
-  if (!stroke) return undefined
-  if (typeof stroke.fill === 'string') return stroke.fill
-  if (stroke.fill && stroke.fill.length > 0) return resolveFillColor(stroke.fill)
-  return undefined
+  if (!stroke) return undefined;
+  if (typeof stroke === 'string') return stroke;
+  if (typeof stroke.fill === 'string') return stroke.fill;
+  if (stroke.fill && stroke.fill.length > 0) return resolveFillColor(stroke.fill);
+  if ('color' in stroke && typeof (stroke as any).color === 'string') return (stroke as any).color;
+  return undefined;
 }
 
 export function resolveStrokeWidth(stroke?: PenStroke): number {
-  if (!stroke) return 0
-  if (typeof stroke.thickness === 'number') return stroke.thickness
-  if (typeof stroke.thickness === 'object' && !Array.isArray(stroke.thickness)) return 0
-  return stroke.thickness?.[0] ?? DEFAULT_STROKE_WIDTH
+  if (!stroke) return 0;
+  if (typeof stroke.thickness === 'number') return stroke.thickness;
+  if (typeof stroke.thickness === 'object' && !Array.isArray(stroke.thickness)) return 0;
+  return stroke.thickness?.[0] ?? DEFAULT_STROKE_WIDTH;
+}
+
+export function hasVisibleStroke(stroke?: PenStroke): boolean {
+  return resolveStrokeWidth(stroke) > 0 && !!resolveStrokeColor(stroke);
+}
+
+export function shouldUseTransparentFallbackFill(
+  fills: PenFill[] | string | undefined,
+  stroke?: PenStroke,
+  isContainer = false,
+): boolean {
+  const hasExplicitFill = typeof fills === 'string' ? fills.length > 0 : !!fills?.length;
+  return !hasExplicitFill && (isContainer || hasVisibleStroke(stroke));
 }
 
 // ---------------------------------------------------------------------------
@@ -98,51 +118,59 @@ export function resolveStrokeWidth(stroke?: PenStroke): number {
 
 /** CJK character range check (for character-level line breaking). */
 function isCJK(ch: string): boolean {
-  const c = ch.charCodeAt(0)
-  return (c >= 0x4E00 && c <= 0x9FFF) || (c >= 0x3400 && c <= 0x4DBF) ||
-    (c >= 0x3000 && c <= 0x303F) || (c >= 0xFF00 && c <= 0xFFEF) ||
-    (c >= 0x2E80 && c <= 0x2FDF)
+  const c = ch.charCodeAt(0);
+  return (
+    (c >= 0x4e00 && c <= 0x9fff) ||
+    (c >= 0x3400 && c <= 0x4dbf) ||
+    (c >= 0x3000 && c <= 0x303f) ||
+    (c >= 0xff00 && c <= 0xffef) ||
+    (c >= 0x2e80 && c <= 0x2fdf)
+  );
 }
 
 /** Word-wrap a single line of text, appending wrapped lines to `out`. */
 export function wrapLine(ctx: CanvasRenderingContext2D, text: string, maxW: number, out: string[]) {
-  if (ctx.measureText(text).width <= maxW) { out.push(text); return }
+  if (ctx.measureText(text).width <= maxW) {
+    out.push(text);
+    return;
+  }
 
-  let current = ''
-  let i = 0
+  let current = '';
+  let i = 0;
   while (i < text.length) {
-    const ch = text[i]
+    const ch = text[i];
     if (isCJK(ch)) {
-      const test = current + ch
+      const test = current + ch;
       if (ctx.measureText(test).width > maxW && current) {
-        out.push(current)
-        current = ch
+        out.push(current);
+        current = ch;
       } else {
-        current = test
+        current = test;
       }
-      i++
+      i++;
     } else if (ch === ' ') {
-      const test = current + ch
+      const test = current + ch;
       if (ctx.measureText(test).width > maxW && current) {
-        out.push(current)
-        current = ''
+        out.push(current);
+        current = '';
       } else {
-        current = test
+        current = test;
       }
-      i++
+      i++;
     } else {
-      let word = ''
+      let word = '';
       while (i < text.length && text[i] !== ' ' && !isCJK(text[i])) {
-        word += text[i]; i++
+        word += text[i];
+        i++;
       }
-      const test = current + word
+      const test = current + word;
       if (ctx.measureText(test).width > maxW && current) {
-        out.push(current)
-        current = word
+        out.push(current);
+        current = word;
       } else {
-        current = test
+        current = test;
       }
     }
   }
-  if (current) out.push(current)
+  if (current) out.push(current);
 }