@pooder/kit 5.3.1 → 5.4.0

package/src/extensions/featureComplete.ts

@@ -1,46 +1,46 @@
-import { ConstraintContext, ConstraintFeature, ConstraintRegistry } from "./constraints";
-
-export type FeatureCompleteIssue = {
-  featureId: string;
-  groupId?: string;
-  reason: string;
-};
-
-export function validateFeaturesStrict(
-  features: ConstraintFeature[],
-  context: ConstraintContext,
-): { ok: boolean; issues?: FeatureCompleteIssue[] } {
-  const eps = 1e-6;
-  const issues: FeatureCompleteIssue[] = [];
-
-  for (const f of features) {
-    if (!f.constraints || f.constraints.length === 0) continue;
-    // Pass ALL constraints (including validateOnly) for strict validation check
-    const constrained = ConstraintRegistry.apply(f.x, f.y, f, context, f.constraints);
-    if (
-      Math.abs(constrained.x - f.x) > eps ||
-      Math.abs(constrained.y - f.y) > eps
-    ) {
-      issues.push({
-        featureId: f.id,
-        groupId: f.groupId,
-        reason: "Position violates constraint strategy",
-      });
-    }
-  }
-
-  return { ok: issues.length === 0, issues: issues.length ? issues : undefined };
-}
-
-export function completeFeaturesStrict(
-  features: ConstraintFeature[],
-  context: ConstraintContext,
-  update: (nextFeatures: ConstraintFeature[]) => void,
-): { ok: boolean; issues?: FeatureCompleteIssue[] } {
-  const validation = validateFeaturesStrict(features, context);
-  if (!validation.ok) return validation;
-  const next = JSON.parse(JSON.stringify(features || [])) as ConstraintFeature[];
-  update(next);
-  return { ok: true };
-}
-
+import { ConstraintContext, ConstraintFeature, ConstraintRegistry } from "./constraints";
+
+export type FeatureCompleteIssue = {
+  featureId: string;
+  groupId?: string;
+  reason: string;
+};
+
+export function validateFeaturesStrict(
+  features: ConstraintFeature[],
+  context: ConstraintContext,
+): { ok: boolean; issues?: FeatureCompleteIssue[] } {
+  const eps = 1e-6;
+  const issues: FeatureCompleteIssue[] = [];
+
+  for (const f of features) {
+    if (!f.constraints || f.constraints.length === 0) continue;
+    // Pass ALL constraints (including validateOnly) for strict validation check
+    const constrained = ConstraintRegistry.apply(f.x, f.y, f, context, f.constraints);
+    if (
+      Math.abs(constrained.x - f.x) > eps ||
+      Math.abs(constrained.y - f.y) > eps
+    ) {
+      issues.push({
+        featureId: f.id,
+        groupId: f.groupId,
+        reason: "Position violates constraint strategy",
+      });
+    }
+  }
+
+  return { ok: issues.length === 0, issues: issues.length ? issues : undefined };
+}
+
+export function completeFeaturesStrict(
+  features: ConstraintFeature[],
+  context: ConstraintContext,
+  update: (nextFeatures: ConstraintFeature[]) => void,
+): { ok: boolean; issues?: FeatureCompleteIssue[] } {
+  const validation = validateFeaturesStrict(features, context);
+  if (!validation.ok) return validation;
+  const next = JSON.parse(JSON.stringify(features || [])) as ConstraintFeature[];
+  update(next);
+  return { ok: true };
+}
+

package/src/extensions/film.ts

@@ -1,194 +1,266 @@
-import {
-  Extension,
-  ExtensionContext,
-  ContributionPointIds,
-  CommandContribution,
-  ConfigurationContribution,
-} from "@pooder/core";
-import { FabricImage as Image } from "fabric";
-import { CanvasService } from "../services";
-
-export class FilmTool implements Extension {
-  id = "pooder.kit.film";
-
-  public metadata = {
-    name: "FilmTool",
-  };
-
-  private url: string = "";
-  private opacity: number = 0.5;
-
-  private canvasService?: CanvasService;
-
-  constructor(
-    options?: Partial<{
-      url: string;
-      opacity: number;
-    }>,
-  ) {
-    if (options) {
-      Object.assign(this, options);
-    }
-  }
-
-  activate(context: ExtensionContext) {
-    this.canvasService = context.services.get<CanvasService>("CanvasService");
-    if (!this.canvasService) {
-      console.warn("CanvasService not found for FilmTool");
-      return;
-    }
-
-    const configService = context.services.get<any>("ConfigurationService");
-    if (configService) {
-      // Load initial config
-      this.url = configService.get("film.url", this.url);
-      this.opacity = configService.get("film.opacity", this.opacity);
-
-      // Listen for changes
-      configService.onAnyChange((e: { key: string; value: any }) => {
-        if (e.key.startsWith("film.")) {
-          const prop = e.key.split(".")[1];
-          console.log(
-            `[FilmTool] Config change detected: ${e.key} -> ${e.value}`,
-          );
-          if (prop && prop in this) {
-            (this as any)[prop] = e.value;
-            this.updateFilm();
-          }
-        }
-      });
-    }
-
-    this.initLayer();
-    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;
-    }
-  }
-
-  contribute() {
-    return {
-      [ContributionPointIds.CONFIGURATIONS]: [
-        {
-          id: "film.url",
-          type: "string",
-          label: "Film Image URL",
-          default: "",
-        },
-        {
-          id: "film.opacity",
-          type: "number",
-          label: "Opacity",
-          min: 0,
-          max: 1,
-          step: 0.1,
-          default: 0.5,
-        },
-      ] as ConfigurationContribution[],
-      [ContributionPointIds.COMMANDS]: [
-        {
-          command: "setFilmImage",
-          title: "Set Film Image",
-          handler: (url: string, opacity: number) => {
-            if (this.url === url && this.opacity === opacity) return true;
-
-            this.url = url;
-            this.opacity = opacity;
-
-            this.updateFilm();
-
-            return true;
-          },
-        },
-      ] as CommandContribution[],
-    };
-  }
-
-  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,
-      });
-
-      this.canvasService.canvas.bringObjectToFront(layer);
-    }
-  }
-
-  private async updateFilm() {
-    if (!this.canvasService) return;
-    const layer = this.canvasService.getLayer("overlay");
-    if (!layer) {
-      console.warn("[FilmTool] Overlay layer not found");
-      return;
-    }
-
-    const { url, opacity } = this;
-
-    if (!url) {
-      const img = this.canvasService.getObject("film-image", "overlay");
-      if (img) {
-        layer.remove(img);
-        this.canvasService.requestRenderAll();
-      }
-      return;
-    }
-
-    const width = this.canvasService.canvas.width || 800;
-    const height = this.canvasService.canvas.height || 600;
-
-    let img = this.canvasService.getObject("film-image", "overlay") as Image;
-    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);
-      }
-      this.canvasService.requestRenderAll();
-    } catch (error) {
-      console.error("[FilmTool] Failed to load film image", url, error);
-    }
-    layer.dirty = true;
-    this.canvasService.requestRenderAll();
-  }
-}
+import {
+  Extension,
+  ExtensionContext,
+  ContributionPointIds,
+  CommandContribution,
+  ConfigurationContribution,
+  ConfigurationService,
+} from "@pooder/core";
+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";
+
+  public metadata = {
+    name: "FilmTool",
+  };
+
+  private url: string = "";
+  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<{
+      url: string;
+      opacity: number;
+    }>,
+  ) {
+    if (options) {
+      Object.assign(this, options);
+    }
+  }
+
+  activate(context: ExtensionContext) {
+    this.canvasService = context.services.get<CanvasService>("CanvasService");
+    if (!this.canvasService) {
+      console.warn("CanvasService not found for FilmTool");
+      return;
+    }
+
+    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);
+      this.opacity = configService.get("film.opacity", this.opacity);
+
+      // Listen for changes
+      configService.onAnyChange((e: { key: string; value: any }) => {
+        if (e.key.startsWith("film.")) {
+          const prop = e.key.split(".")[1];
+          console.log(
+            `[FilmTool] Config change detected: ${e.key} -> ${e.value}`,
+          );
+          if (prop && prop in this) {
+            (this as any)[prop] = e.value;
+            this.updateFilm();
+          }
+        }
+      });
+    }
+
+    context.eventBus.on("canvas:resized", this.onCanvasResized);
+    this.updateFilm();
+  }
+
+  deactivate(context: ExtensionContext) {
+    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() {
+    return {
+      [ContributionPointIds.CONFIGURATIONS]: [
+        {
+          id: "film.url",
+          type: "string",
+          label: "Film Image URL",
+          default: "",
+        },
+        {
+          id: "film.opacity",
+          type: "number",
+          label: "Opacity",
+          min: 0,
+          max: 1,
+          step: 0.1,
+          default: 0.5,
+        },
+      ] as ConfigurationContribution[],
+      [ContributionPointIds.COMMANDS]: [
+        {
+          command: "setFilmImage",
+          title: "Set Film Image",
+          handler: (url: string, opacity: number) => {
+            if (this.url === url && this.opacity === opacity) return true;
+
+            this.url = url;
+            this.opacity = opacity;
+
+            this.updateFilm();
+
+            return true;
+          },
+        },
+      ] as CommandContribution[],
+    };
+  }
+
+  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,
+    };
+  }
+
+  private clampOpacity(value: number): number {
+    return Math.max(0, Math.min(1, Number(value)));
+  }
+
+  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,
+        },
+      },
+    ];
+  }
+
+  private async ensureImageSize(src: string): Promise<SourceSize | null> {
+    if (!src) return null;
+    const cached = this.sourceSizeBySrc.get(src);
+    if (cached) return cached;
+
+    const pending = this.pendingSizeBySrc.get(src);
+    if (pending) {
+      return pending;
+    }
+
+    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);
+      }
+    }
+  }
+
+  private async loadImageSize(src: string): Promise<SourceSize | null> {
+    try {
+      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;
+      }
+    } catch (error) {
+      console.error("[FilmTool] Failed to load film image", src, error);
+    }
+    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();
+  }
+}