@pooder/kit 5.3.0 → 5.4.0

package/src/extensions/film.ts

@@ -4,9 +4,20 @@ import {
   ContributionPointIds,
   CommandContribution,
   ConfigurationContribution,
+  ConfigurationService,
 } from "@pooder/core";
-import { FabricImage as Image } from "fabric";
-import { CanvasService } from "../services";
+import { FabricImage } from "fabric";
+import { CanvasService, RenderObjectSpec } from "../services";
+
+interface SourceSize {
+  width: number;
+  height: number;
+}
+
+const FILM_LAYER_ID = "overlay";
+const FILM_IMAGE_ID = "film-image";
+const DEFAULT_WIDTH = 800;
+const DEFAULT_HEIGHT = 600;
 
 export class FilmTool implements Extension {
   id = "pooder.kit.film";
@@ -19,6 +30,15 @@ export class FilmTool implements Extension {
   private opacity: number = 0.5;
 
   private canvasService?: CanvasService;
+  private specs: RenderObjectSpec[] = [];
+  private renderProducerDisposable?: { dispose: () => void };
+  private renderSeq = 0;
+  private renderImageUrl = "";
+  private sourceSizeBySrc: Map<string, SourceSize> = new Map();
+  private pendingSizeBySrc: Map<string, Promise<SourceSize | null>> = new Map();
+  private onCanvasResized = () => {
+    this.updateFilm();
+  };
 
   constructor(
     options?: Partial<{
@@ -38,7 +58,20 @@ export class FilmTool implements Extension {
       return;
     }
 
-    const configService = context.services.get<any>("ConfigurationService");
+    this.renderProducerDisposable?.dispose();
+    this.renderProducerDisposable = this.canvasService.registerRenderProducer(
+      this.id,
+      () => ({
+        layerSpecs: {
+          [FILM_LAYER_ID]: this.specs,
+        },
+      }),
+      { priority: 500 },
+    );
+
+    const configService = context.services.get<ConfigurationService>(
+      "ConfigurationService",
+    );
     if (configService) {
       // Load initial config
       this.url = configService.get("film.url", this.url);
@@ -59,22 +92,21 @@ export class FilmTool implements Extension {
       });
     }
 
-    this.initLayer();
+    context.eventBus.on("canvas:resized", this.onCanvasResized);
     this.updateFilm();
   }
 
   deactivate(context: ExtensionContext) {
-    if (this.canvasService) {
-      const layer = this.canvasService.getLayer("overlay");
-      if (layer) {
-        const img = this.canvasService.getObject("film-image", "overlay");
-        if (img) {
-          layer.remove(img);
-          this.canvasService.requestRenderAll();
-        }
-      }
-      this.canvasService = undefined;
-    }
+    context.eventBus.off("canvas:resized", this.onCanvasResized);
+    this.renderSeq += 1;
+    this.specs = [];
+    this.renderImageUrl = "";
+    this.renderProducerDisposable?.dispose();
+    this.renderProducerDisposable = undefined;
+    if (!this.canvasService) return;
+    void this.canvasService.flushRenderFromProducers();
+    this.canvasService.requestRenderAll();
+    this.canvasService = undefined;
   }
 
   contribute() {
@@ -115,80 +147,120 @@ export class FilmTool implements Extension {
     };
   }
 
-  private initLayer() {
-    if (!this.canvasService) return;
-    let overlayLayer = this.canvasService.getLayer("overlay");
-    if (!overlayLayer) {
-      const width = this.canvasService.canvas.width || 800;
-      const height = this.canvasService.canvas.height || 600;
-
-      const layer = this.canvasService.createLayer("overlay", {
-        width,
-        height,
-        left: 0,
-        top: 0,
-        originX: "left",
-        originY: "top",
-        selectable: false,
-        evented: false,
-        subTargetCheck: false,
-        interactive: false,
-      });
+  private getViewportSize(): { width: number; height: number } {
+    const width = Number(this.canvasService?.canvas.width || 0);
+    const height = Number(this.canvasService?.canvas.height || 0);
+    return {
+      width: width > 0 ? width : DEFAULT_WIDTH,
+      height: height > 0 ? height : DEFAULT_HEIGHT,
+    };
+  }
 
-      this.canvasService.canvas.bringObjectToFront(layer);
-    }
+  private clampOpacity(value: number): number {
+    return Math.max(0, Math.min(1, Number(value)));
   }
 
-  private async updateFilm() {
-    if (!this.canvasService) return;
-    const layer = this.canvasService.getLayer("overlay");
-    if (!layer) {
-      console.warn("[FilmTool] Overlay layer not found");
-      return;
+  private buildFilmSpecs(
+    imageUrl: string,
+    opacity: number,
+  ): RenderObjectSpec[] {
+    if (!imageUrl) {
+      return [];
     }
+    const { width, height } = this.getViewportSize();
+    const sourceSize = this.sourceSizeBySrc.get(imageUrl);
+    const sourceWidth = Math.max(1, Number(sourceSize?.width || width));
+    const sourceHeight = Math.max(1, Number(sourceSize?.height || height));
+    const coverScale = Math.max(width / sourceWidth, height / sourceHeight);
+    return [
+      {
+        id: FILM_IMAGE_ID,
+        type: "image",
+        src: imageUrl,
+        space: "screen",
+        data: {
+          id: FILM_IMAGE_ID,
+          layerId: FILM_LAYER_ID,
+          type: "film-image",
+        },
+        props: {
+          left: 0,
+          top: 0,
+          originX: "left",
+          originY: "top",
+          opacity: this.clampOpacity(opacity),
+          scaleX: coverScale,
+          scaleY: coverScale,
+          selectable: false,
+          evented: false,
+          excludeFromExport: true,
+        },
+      },
+    ];
+  }
 
-    const { url, opacity } = this;
+  private async ensureImageSize(src: string): Promise<SourceSize | null> {
+    if (!src) return null;
+    const cached = this.sourceSizeBySrc.get(src);
+    if (cached) return cached;
 
-    if (!url) {
-      const img = this.canvasService.getObject("film-image", "overlay");
-      if (img) {
-        layer.remove(img);
-        this.canvasService.requestRenderAll();
-      }
-      return;
+    const pending = this.pendingSizeBySrc.get(src);
+    if (pending) {
+      return pending;
     }
 
-    const width = this.canvasService.canvas.width || 800;
-    const height = this.canvasService.canvas.height || 600;
+    const task = this.loadImageSize(src);
+    this.pendingSizeBySrc.set(src, task);
+    try {
+      return await task;
+    } finally {
+      if (this.pendingSizeBySrc.get(src) === task) {
+        this.pendingSizeBySrc.delete(src);
+      }
+    }
+  }
 
-    let img = this.canvasService.getObject("film-image", "overlay") as Image;
+  private async loadImageSize(src: string): Promise<SourceSize | null> {
     try {
-      if (img) {
-        if (img.getSrc() !== url) {
-          await img.setSrc(url);
-        }
-        img.set({ opacity });
-      } else {
-        img = await Image.fromURL(url, { crossOrigin: "anonymous" });
-        img.scaleToWidth(width);
-        if (img.getScaledHeight() < height) img.scaleToHeight(height);
-        img.set({
-          originX: "left",
-          originY: "top",
-          left: 0,
-          top: 0,
-          opacity,
-          selectable: false,
-          evented: false,
-          data: { id: "film-image" },
-        });
-        layer.add(img);
+      const image = await FabricImage.fromURL(src, {
+        crossOrigin: "anonymous",
+      });
+      const width = Number(image?.width || 0);
+      const height = Number(image?.height || 0);
+      if (width > 0 && height > 0) {
+        const size = { width, height };
+        this.sourceSizeBySrc.set(src, size);
+        return size;
       }
-      this.canvasService.requestRenderAll();
     } catch (error) {
-      console.error("[FilmTool] Failed to load film image", url, error);
+      console.error("[FilmTool] Failed to load film image", src, error);
     }
-    layer.dirty = true;
+    return null;
+  }
+
+  private updateFilm() {
+    void this.updateFilmAsync();
+  }
+
+  private async updateFilmAsync() {
+    if (!this.canvasService) return;
+    const seq = ++this.renderSeq;
+    const nextUrl = String(this.url || "").trim();
+
+    if (!nextUrl) {
+      this.renderImageUrl = "";
+    } else if (nextUrl !== this.renderImageUrl) {
+      const loaded = await this.ensureImageSize(nextUrl);
+      if (seq !== this.renderSeq) return;
+      if (loaded) {
+        this.renderImageUrl = nextUrl;
+      }
+    }
+
+    this.specs = this.buildFilmSpecs(this.renderImageUrl, this.opacity);
+    await this.canvasService.flushRenderFromProducers();
+    if (seq !== this.renderSeq) return;
+    this.canvasService.bringLayerToFront(FILM_LAYER_ID);
     this.canvasService.requestRenderAll();
   }
 }

package/src/extensions/geometry.ts

@@ -1,5 +1,16 @@
 import paper from "paper";
 import { pickExitIndex, scoreOutsideAbove } from "./bridgeSelection";
+import {
+  DEFAULT_DIELINE_SHAPE,
+  getHeartShapeParams,
+  getShapeFitMode,
+} from "./dielineShape";
+import type {
+  BuiltinDielineShape,
+  DielineShape,
+  DielineShapeStyle,
+  ShapeFitMode,
+} from "./dielineShape";
 import { sampleWrappedOffsets, wrappedDistance } from "./wrappedOffsets";
 
 export type FeatureOperation = "add" | "subtract";
@@ -27,7 +38,7 @@ export interface DielineFeature {
 }
 
 export interface GeometryOptions {
-  shape: "rect" | "circle" | "ellipse" | "custom";
+  shape: DielineShape;
   width: number;
   height: number;
   radius: number;
@@ -35,6 +46,9 @@ export interface GeometryOptions {
   y: number;
   features: Array<DielineFeature>;
   pathData?: string;
+  shapeStyle?: DielineShapeStyle;
+  customSourceWidthPx?: number;
+  customSourceHeightPx?: number;
   canvasWidth?: number;
   canvasHeight?: number;
 }
@@ -188,55 +202,207 @@ function selectOuterChain(args: {
 }
 
 /**
- * Creates the base dieline shape (Rect/Circle/Ellipse/Custom)
+ * Creates the base dieline shape (Rect/Circle/Ellipse/Heart/Custom).
  */
-function createBaseShape(options: GeometryOptions): paper.PathItem {
-  const { shape, width, height, radius, x, y, pathData } = options;
+type BuiltinShapeBuilder = (options: GeometryOptions) => paper.PathItem;
+
+function fitPathItemToRect(
+  item: paper.PathItem,
+  rect: { left: number; top: number; width: number; height: number },
+  fitMode: ShapeFitMode,
+): paper.PathItem {
+  const { left, top, width, height } = rect;
+  const bounds = item.bounds;
+  if (
+    width <= 0 ||
+    height <= 0 ||
+    !Number.isFinite(bounds.width) ||
+    !Number.isFinite(bounds.height) ||
+    bounds.width <= 0 ||
+    bounds.height <= 0
+  ) {
+    item.position = new paper.Point(left + width / 2, top + height / 2);
+    return item;
+  }
+
+  item.translate(new paper.Point(-bounds.left, -bounds.top));
+  if (fitMode === "stretch") {
+    item.scale(width / bounds.width, height / bounds.height, new paper.Point(0, 0));
+    item.translate(new paper.Point(left, top));
+    return item;
+  }
+
+  const uniformScale = Math.min(width / bounds.width, height / bounds.height);
+  item.scale(uniformScale, uniformScale, new paper.Point(0, 0));
+  const scaledWidth = bounds.width * uniformScale;
+  const scaledHeight = bounds.height * uniformScale;
+  item.translate(
+    new paper.Point(
+      left + (width - scaledWidth) / 2,
+      top + (height - scaledHeight) / 2,
+    ),
+  );
+  return item;
+}
+
+function createNormalizedHeartPath(params: {
+  lobeSpread: number;
+  notchDepth: number;
+  tipSharpness: number;
+}): paper.Path {
+  const { lobeSpread, notchDepth, tipSharpness } = params;
+
+  const halfSpread = 0.22 + lobeSpread * 0.18;
+  const notchY = 0.06 + notchDepth * 0.2;
+  const shoulderY = 0.24 + notchDepth * 0.2;
+  const topLift = 0.12 + (1 - notchDepth) * 0.06;
+  const topY = notchY - topLift;
+  const sideCtrlY = shoulderY - (0.18 - notchDepth * 0.08);
+  const lowerCtrlY = 0.58 + (1 - tipSharpness) * 0.16;
+  const tipCtrlX = 0.34 - tipSharpness * 0.2;
+  const notchCtrlX = 0.06 + lobeSpread * 0.06;
+  const lobeCtrlX = 0.1 + lobeSpread * 0.08;
+  const notchCtrlY = notchY - topLift * 0.45;
+
+  const xPeakL = 0.5 - halfSpread;
+  const xPeakR = 0.5 + halfSpread;
+
+  const heartPath = new paper.Path({ insert: false });
+  heartPath.moveTo(new paper.Point(0.5, notchY));
+  heartPath.cubicCurveTo(
+    new paper.Point(0.5 - notchCtrlX, notchCtrlY),
+    new paper.Point(xPeakL + lobeCtrlX, topY),
+    new paper.Point(xPeakL, topY),
+  );
+  heartPath.cubicCurveTo(
+    new paper.Point(xPeakL - lobeCtrlX, topY),
+    new paper.Point(0, sideCtrlY),
+    new paper.Point(0, shoulderY),
+  );
+  heartPath.cubicCurveTo(
+    new paper.Point(0, lowerCtrlY),
+    new paper.Point(tipCtrlX, 1),
+    new paper.Point(0.5, 1),
+  );
+  heartPath.cubicCurveTo(
+    new paper.Point(1 - tipCtrlX, 1),
+    new paper.Point(1, lowerCtrlY),
+    new paper.Point(1, shoulderY),
+  );
+  heartPath.cubicCurveTo(
+    new paper.Point(1, sideCtrlY),
+    new paper.Point(xPeakR + lobeCtrlX, topY),
+    new paper.Point(xPeakR, topY),
+  );
+  heartPath.cubicCurveTo(
+    new paper.Point(xPeakR - lobeCtrlX, topY),
+    new paper.Point(0.5 + notchCtrlX, notchCtrlY),
+    new paper.Point(0.5, notchY),
+  );
+  heartPath.closed = true;
+  return heartPath;
+}
+
+function createHeartBaseShape(options: GeometryOptions): paper.PathItem {
+  const { x, y, width, height } = options;
+  const w = Math.max(0, width);
+  const h = Math.max(0, height);
+  const left = x - w / 2;
+  const top = y - h / 2;
+  const fitMode = getShapeFitMode(options.shapeStyle);
+  const heartParams = getHeartShapeParams(options.shapeStyle);
+  const rawHeart = createNormalizedHeartPath(heartParams);
+  return fitPathItemToRect(rawHeart, { left, top, width: w, height: h }, fitMode);
+}
+
+const BUILTIN_SHAPE_BUILDERS: Record<BuiltinDielineShape, BuiltinShapeBuilder> =
+  {
+    rect: (options) => {
+      const { x, y, width, height, radius } = options;
+      return new paper.Path.Rectangle({
+        point: [x - width / 2, y - height / 2],
+        size: [Math.max(0, width), Math.max(0, height)],
+        radius: Math.max(0, radius),
+      });
+    },
+    circle: (options) => {
+      const { x, y, width, height } = options;
+      const r = Math.min(width, height) / 2;
+      return new paper.Path.Circle({
+        center: new paper.Point(x, y),
+        radius: Math.max(0, r),
+      });
+    },
+    ellipse: (options) => {
+      const { x, y, width, height } = options;
+      return new paper.Path.Ellipse({
+        center: new paper.Point(x, y),
+        radius: [Math.max(0, width / 2), Math.max(0, height / 2)],
+      });
+    },
+    heart: createHeartBaseShape,
+  };
+
+function createCustomBaseShape(options: GeometryOptions): paper.PathItem | null {
+  const {
+    pathData,
+    customSourceWidthPx,
+    customSourceHeightPx,
+    x,
+    y,
+    width,
+    height,
+  } = options;
+  if (typeof pathData !== "string" || pathData.trim().length === 0) {
+    return null;
+  }
+
   const center = new paper.Point(x, y);
+  const hasMultipleSubPaths = ((pathData.match(/[Mm]/g) || []).length ?? 0) > 1;
+  const path: paper.PathItem = hasMultipleSubPaths
+    ? new paper.CompoundPath(pathData)
+    : (() => {
+        const single = new paper.Path();
+        single.pathData = pathData;
+        return single;
+      })();
+  const sourceWidth = Number(customSourceWidthPx ?? 0);
+  const sourceHeight = Number(customSourceHeightPx ?? 0);
+  if (
+    Number.isFinite(sourceWidth) &&
+    Number.isFinite(sourceHeight) &&
+    sourceWidth > 0 &&
+    sourceHeight > 0 &&
+    width > 0 &&
+    height > 0
+  ) {
+    // Preserve original detect-space offset/expand by mapping source image
+    // coordinates directly into the target dieline frame.
+    const targetLeft = x - width / 2;
+    const targetTop = y - height / 2;
+    path.scale(width / sourceWidth, height / sourceHeight, new paper.Point(0, 0));
+    path.translate(new paper.Point(targetLeft, targetTop));
+    return path;
+  }
 
-  if (shape === "rect") {
-    return new paper.Path.Rectangle({
-      point: [x - width / 2, y - height / 2],
-      size: [Math.max(0, width), Math.max(0, height)],
-      radius: Math.max(0, radius),
-    });
-  } else if (shape === "circle") {
-    const r = Math.min(width, height) / 2;
-    return new paper.Path.Circle({
-      center: center,
-      radius: Math.max(0, r),
-    });
-  } else if (shape === "ellipse") {
-    return new paper.Path.Ellipse({
-      center: center,
-      radius: [Math.max(0, width / 2), Math.max(0, height / 2)],
-    });
-  } else if (shape === "custom" && pathData) {
-    const hasMultipleSubPaths = ((pathData.match(/[Mm]/g) || []).length ?? 0) > 1;
-    const path: paper.PathItem = hasMultipleSubPaths
-      ? new paper.CompoundPath(pathData)
-      : (() => {
-          const single = new paper.Path();
-          single.pathData = pathData;
-          return single;
-        })();
-    // Align center
+  if (width > 0 && height > 0 && path.bounds.width > 0 && path.bounds.height > 0) {
+    // Fallback for malformed custom-path metadata.
     path.position = center;
-    if (
-      width > 0 &&
-      height > 0 &&
-      path.bounds.width > 0 &&
-      path.bounds.height > 0
-    ) {
-      path.scale(width / path.bounds.width, height / path.bounds.height);
-    }
+    path.scale(width / path.bounds.width, height / path.bounds.height);
     return path;
-  } else {
-    return new paper.Path.Rectangle({
-      point: [x - width / 2, y - height / 2],
-      size: [Math.max(0, width), Math.max(0, height)],
-    });
   }
+  path.position = center;
+  return path;
+}
+
+function createBaseShape(options: GeometryOptions): paper.PathItem {
+  const { shape } = options;
+  if (shape === "custom") {
+    const customShape = createCustomBaseShape(options);
+    if (customShape) return customShape;
+    return BUILTIN_SHAPE_BUILDERS[DEFAULT_DIELINE_SHAPE](options);
+  }
+  return BUILTIN_SHAPE_BUILDERS[shape](options);
 }
 
 function resolveBridgeBasePath(