@pooder/kit 6.0.0 → 6.1.0

package/src/extensions/white-ink/commands.ts

@@ -0,0 +1,157 @@
+import type { CommandContribution } from "@pooder/core";
+
+const WHITE_INK_PREVIEW_IMAGE_VISIBLE_KEY = "whiteInk.previewImageVisible";
+const WHITE_INK_DEFAULT_OPACITY = 0.85;
+
+export function createWhiteInkCommands(tool: any): CommandContribution[] {
+  return [
+    {
+      command: "addWhiteInk",
+      id: "addWhiteInk",
+      title: "Add White Ink",
+      handler: async (url: string, options?: Record<string, any>) => {
+        return await tool.addWhiteInkEntry(url, options);
+      },
+    },
+    {
+      command: "upsertWhiteInk",
+      id: "upsertWhiteInk",
+      title: "Upsert White Ink",
+      handler: async (url: string, options: Record<string, any> = {}) => {
+        return await tool.upsertWhiteInkEntry(url, options);
+      },
+    },
+    {
+      command: "getWhiteInks",
+      id: "getWhiteInks",
+      title: "Get White Inks",
+      handler: () => tool.cloneItems(tool.items),
+    },
+    {
+      command: "getWhiteInkSettings",
+      id: "getWhiteInkSettings",
+      title: "Get White Ink Settings",
+      handler: () => {
+        const first = tool.getEffectiveWhiteInkItem(tool.items);
+        const primarySource = tool.getPrimaryImageSource();
+        const sourceUrl = tool.resolveSourceUrl(first) || primarySource;
+
+        return {
+          id: first?.id || null,
+          url: sourceUrl,
+          sourceUrl,
+          opacity: WHITE_INK_DEFAULT_OPACITY,
+          printWithWhiteInk: tool.printWithWhiteInk,
+          previewImageVisible: tool.previewImageVisible,
+        };
+      },
+    },
+    {
+      command: "setWhiteInkPrintEnabled",
+      id: "setWhiteInkPrintEnabled",
+      title: "Set White Ink Preview Enabled",
+      handler: (enabled: boolean) => {
+        tool.printWithWhiteInk = !!enabled;
+        const configService = tool.context?.services.get("ConfigurationService");
+        configService?.update("whiteInk.printWithWhiteInk", tool.printWithWhiteInk);
+        tool.updateWhiteInks();
+        return { ok: true };
+      },
+    },
+    {
+      command: "setWhiteInkPreviewImageVisible",
+      id: "setWhiteInkPreviewImageVisible",
+      title: "Set White Ink Cover Visible",
+      handler: (visible: boolean) => {
+        tool.previewImageVisible = !!visible;
+        const configService = tool.context?.services.get("ConfigurationService");
+        configService?.update(
+          WHITE_INK_PREVIEW_IMAGE_VISIBLE_KEY,
+          tool.previewImageVisible,
+        );
+        tool.updateWhiteInks();
+        return { ok: true };
+      },
+    },
+    {
+      command: "getWorkingWhiteInks",
+      id: "getWorkingWhiteInks",
+      title: "Get Working White Inks",
+      handler: () => tool.cloneItems(tool.workingItems),
+    },
+    {
+      command: "setWorkingWhiteInk",
+      id: "setWorkingWhiteInk",
+      title: "Set Working White Ink",
+      handler: (id: string, updates: Record<string, any>) => {
+        tool.updateWhiteInkInWorking(id, updates);
+      },
+    },
+    {
+      command: "updateWhiteInk",
+      id: "updateWhiteInk",
+      title: "Update White Ink",
+      handler: async (
+        id: string,
+        updates: Record<string, any>,
+        options: Record<string, any> = {},
+      ) => {
+        await tool.updateWhiteInkItem(id, updates, options);
+      },
+    },
+    {
+      command: "removeWhiteInk",
+      id: "removeWhiteInk",
+      title: "Remove White Ink",
+      handler: (id: string) => {
+        tool.removeWhiteInk(id);
+      },
+    },
+    {
+      command: "clearWhiteInks",
+      id: "clearWhiteInks",
+      title: "Clear White Inks",
+      handler: () => {
+        tool.clearWhiteInks();
+      },
+    },
+    {
+      command: "resetWorkingWhiteInks",
+      id: "resetWorkingWhiteInks",
+      title: "Reset Working White Inks",
+      handler: () => {
+        tool.workingItems = tool.cloneItems(tool.items);
+        tool.hasWorkingChanges = false;
+        tool.updateWhiteInks();
+      },
+    },
+    {
+      command: "completeWhiteInks",
+      id: "completeWhiteInks",
+      title: "Complete White Inks",
+      handler: async () => {
+        return await tool.completeWhiteInks();
+      },
+    },
+    {
+      command: "setWhiteInkImage",
+      id: "setWhiteInkImage",
+      title: "Set White Ink Image",
+      handler: async (url: string) => {
+        if (!url) {
+          tool.clearWhiteInks();
+          return { ok: true };
+        }
+
+        const targetId = tool.resolveReplaceTargetId(null);
+        const upsertResult = await tool.upsertWhiteInkEntry(url, {
+          id: targetId || undefined,
+          mode: targetId ? "replace" : "add",
+          createIfMissing: true,
+          addOptions: {},
+        });
+        return { ok: true, id: upsertResult.id };
+      },
+    },
+  ];
+}

package/src/extensions/white-ink/config.ts

@@ -0,0 +1,30 @@
+import type { ConfigurationContribution } from "@pooder/core";
+
+export function createWhiteInkConfigurations(): ConfigurationContribution[] {
+  return [
+    {
+      id: "whiteInk.items",
+      type: "array",
+      label: "White Ink Images",
+      default: [],
+    },
+    {
+      id: "whiteInk.printWithWhiteInk",
+      type: "boolean",
+      label: "Preview White Ink",
+      default: true,
+    },
+    {
+      id: "whiteInk.previewImageVisible",
+      type: "boolean",
+      label: "Show Cover During White Ink Preview",
+      default: true,
+    },
+    {
+      id: "whiteInk.debug",
+      type: "boolean",
+      label: "White Ink Debug Log",
+      default: false,
+    },
+  ];
+}

package/src/extensions/white-ink/index.ts

@@ -0,0 +1,5 @@
+export * from "./WhiteInkTool";
+export * from "./commands";
+export * from "./config";
+export * from "./model";
+export * from "./renderer";

package/src/extensions/white-ink/model.ts

@@ -0,0 +1 @@
+export type { WhiteInkItem } from "./WhiteInkTool";

package/src/extensions/white-ink/renderer.ts

@@ -0,0 +1 @@
+export { getCoverScale as computeWhiteInkCoverScale } from "../../shared/imaging/sourceSizeCache";

package/src/services/CanvasService.ts

@@ -60,6 +60,7 @@ interface ResolvedRenderPassSpec {
 interface ResolvedClipPathEffectSpec {
   type: "clipPath";
   key: string;
+  visibility?: RenderPassSpec["visibility"];
   source: RenderObjectSpec;
   targetPassIds: string[];
 }
@@ -89,6 +90,7 @@ export default class CanvasService implements Service {
 
   private managedProducerPassIds: Set<string> = new Set();
   private managedPassMetas: Map<string, ManagedPassMeta> = new Map();
+  private managedPassEffects: ResolvedClipPathEffectSpec[] = [];
 
   private canvasForwardersBound = false;
   private readonly forwardSelectionCreated = (e: any) => {
@@ -112,9 +114,11 @@ export default class CanvasService implements Service {
 
   private readonly onToolActivated = () => {
     this.applyManagedPassVisibility();
+    void this.applyManagedPassEffects(undefined, { render: true });
   };
   private readonly onToolSessionChanged = () => {
     this.applyManagedPassVisibility();
+    void this.applyManagedPassEffects(undefined, { render: true });
   };
   private readonly onCanvasObjectChanged = () => {
     if (this.producerApplyInProgress) return;
@@ -190,6 +194,7 @@ export default class CanvasService implements Service {
     this.renderProducers.clear();
     this.managedProducerPassIds.clear();
     this.managedPassMetas.clear();
+    this.managedPassEffects = [];
     this.context = undefined;
     this.workbenchService = undefined;
     this.toolSessionService = undefined;
@@ -332,6 +337,7 @@ export default class CanvasService implements Service {
     return {
       type: "clipPath",
       key,
+      visibility: effect.visibility,
       source: {
         ...source,
         id: sourceId,
@@ -466,23 +472,35 @@ export default class CanvasService implements Service {
     return state;
   }
 
+  private isSessionActive(toolId: string): boolean {
+    if (!this.toolSessionService) return false;
+    return this.toolSessionService.getState(toolId).status === "active";
+  }
+
+  private hasAnyActiveSession(): boolean {
+    return this.toolSessionService?.hasAnyActiveSession() ?? false;
+  }
+
+  private buildVisibilityEvalContext(
+    layers: Map<string, VisibilityLayerState>,
+  ) {
+    return {
+      activeToolId: this.workbenchService?.activeToolId ?? null,
+      isSessionActive: (toolId: string) => this.isSessionActive(toolId),
+      hasAnyActiveSession: () => this.hasAnyActiveSession(),
+      layers,
+    };
+  }
+
   private applyManagedPassVisibility(options: { render?: boolean } = {}): boolean {
     if (!this.managedPassMetas.size) return false;
     const layers = this.getPassRuntimeState();
-    const activeToolId = this.workbenchService?.activeToolId ?? null;
-    const isSessionActive = (toolId: string) => {
-      if (!this.toolSessionService) return false;
-      return this.toolSessionService.getState(toolId).status === "active";
-    };
+    const context = this.buildVisibilityEvalContext(layers);
 
     let changed = false;
 
     this.managedPassMetas.forEach((meta) => {
-      const visible = evaluateVisibilityExpr(meta.visibility, {
-        activeToolId,
-        isSessionActive,
-        layers,
-      });
+      const visible = evaluateVisibilityExpr(meta.visibility, context);
       changed = this.setPassVisibility(meta.id, visible) || changed;
     });
 
@@ -560,9 +578,10 @@ export default class CanvasService implements Service {
 
       this.managedProducerPassIds = nextPassIds;
       this.managedPassMetas = nextManagedPassMetas;
+      this.managedPassEffects = nextEffects;
 
       this.syncManagedPassStacking(Array.from(nextManagedPassMetas.values()));
-      await this.applyManagedPassEffects(nextEffects);
+      await this.applyManagedPassEffects(nextEffects, { render: false });
       this.applyManagedPassVisibility({ render: false });
     } finally {
       this.producerApplyInProgress = false;
@@ -571,11 +590,19 @@ export default class CanvasService implements Service {
     this.requestRenderAll();
   }
 
-  private async applyManagedPassEffects(effects: ResolvedClipPathEffectSpec[]) {
+  private async applyManagedPassEffects(
+    effects: ResolvedClipPathEffectSpec[] = this.managedPassEffects,
+    options: { render?: boolean } = {},
+  ) {
     const effectTargetMap = new Map<FabricObject, ResolvedClipPathEffectSpec>();
+    const layers = this.getPassRuntimeState();
+    const visibilityContext = this.buildVisibilityEvalContext(layers);
 
     for (const effect of effects) {
       if (effect.type !== "clipPath") continue;
+      if (!evaluateVisibilityExpr(effect.visibility, visibilityContext)) {
+        continue;
+      }
       effect.targetPassIds.forEach((targetPassId) => {
         this.getPassCanvasObjects(targetPassId).forEach((obj) => {
           effectTargetMap.set(obj, effect);
@@ -613,6 +640,10 @@ export default class CanvasService implements Service {
         targetEffect.key,
       );
     }
+
+    if (options.render !== false) {
+      this.requestRenderAll();
+    }
   }
 
   getObject(id: string, passId?: string): FabricObject | undefined {

package/src/services/SceneLayoutService.ts

@@ -0,0 +1,139 @@
+import {
+  COMMAND_SERVICE,
+  CONFIGURATION_SERVICE,
+  CommandService,
+  ConfigurationService,
+  Service,
+  ServiceContext,
+} from "@pooder/core";
+import CanvasService from "./CanvasService";
+import {
+  buildSceneGeometry,
+  computeSceneLayout,
+  readSizeState,
+  type SceneGeometrySnapshot,
+  type SceneLayoutSnapshot,
+} from "../shared/scene/sceneLayoutModel";
+import { SubscriptionBag } from "../shared/runtime/subscriptions";
+
+interface ConfigChangeEvent {
+  key: string;
+  value: unknown;
+  oldValue: unknown;
+}
+
+const CONFIG_WATCH_PREFIXES = ["size.", "dieline."] as const;
+const CANVAS_SERVICE_ID = "CanvasService";
+const GET_SCENE_LAYOUT_COMMAND = "getSceneLayout";
+const GET_SCENE_GEOMETRY_COMMAND = "getSceneGeometry";
+
+export class SceneLayoutService implements Service {
+  private context?: ServiceContext;
+  private canvasService?: CanvasService;
+  private configService?: ConfigurationService;
+  private lastLayout: SceneLayoutSnapshot | null = null;
+  private lastGeometry: SceneGeometrySnapshot | null = null;
+  private readonly subscriptions = new SubscriptionBag();
+  private commandDisposables: Array<{ dispose(): void }> = [];
+
+  init(context: ServiceContext) {
+    if (this.context) {
+      this.dispose(this.context);
+    }
+
+    const canvasService =
+      context.get<CanvasService>(CANVAS_SERVICE_ID);
+    const configService =
+      context.get<ConfigurationService>(CONFIGURATION_SERVICE);
+    const commandService = context.get<CommandService>(COMMAND_SERVICE);
+
+    if (!canvasService || !configService || !commandService) {
+      throw new Error(
+        "[SceneLayoutService] CanvasService, ConfigurationService and CommandService are required.",
+      );
+    }
+
+    this.context = context;
+    this.canvasService = canvasService;
+    this.configService = configService;
+
+    this.commandDisposables.push(
+      commandService.registerCommand(GET_SCENE_LAYOUT_COMMAND, () =>
+        this.getLayout(),
+      ),
+      commandService.registerCommand(GET_SCENE_GEOMETRY_COMMAND, () =>
+        this.getGeometry(),
+      ),
+    );
+
+    this.subscriptions.disposeAll();
+    this.subscriptions.onConfigChange(configService, this.onConfigChanged);
+    this.subscriptions.on(context.eventBus, "canvas:resized", this.onCanvasResized);
+    this.refresh();
+  }
+
+  dispose(context: ServiceContext) {
+    this.subscriptions.disposeAll();
+    this.commandDisposables.forEach((item) => item.dispose());
+    this.commandDisposables = [];
+    this.context = undefined;
+    this.canvasService = undefined;
+    this.configService = undefined;
+    this.lastLayout = null;
+    this.lastGeometry = null;
+  }
+
+  private onCanvasResized = () => {
+    this.refresh();
+  };
+
+  private onConfigChanged = (e: ConfigChangeEvent) => {
+    if (CONFIG_WATCH_PREFIXES.some((prefix) => e.key.startsWith(prefix))) {
+      this.refresh();
+    }
+  };
+
+  private refresh() {
+    const layout = this.getLayout(true);
+    if (!layout) {
+      this.lastGeometry = null;
+      return;
+    }
+
+    this.context?.eventBus.emit("scene:layout:change", layout);
+
+    const geometry = this.getGeometry(true);
+    if (geometry) {
+      this.context?.eventBus.emit("scene:geometry:change", geometry);
+    }
+  }
+
+  getLayout(forceRefresh = false): SceneLayoutSnapshot | null {
+    if (!this.canvasService || !this.configService) return null;
+    if (!forceRefresh && this.lastLayout) return this.lastLayout;
+
+    const state = readSizeState(this.configService);
+    const layout = computeSceneLayout(this.canvasService, state);
+    if (!layout) {
+      this.lastLayout = null;
+      return null;
+    }
+
+    this.lastLayout = layout;
+    return layout;
+  }
+
+  getGeometry(forceRefresh = false): SceneGeometrySnapshot | null {
+    if (!this.configService) return null;
+    const layout = this.getLayout(forceRefresh);
+    if (!layout) {
+      this.lastGeometry = null;
+      return null;
+    }
+    if (!forceRefresh && this.lastGeometry) return this.lastGeometry;
+
+    const geometry = buildSceneGeometry(this.configService, layout);
+    this.lastGeometry = geometry;
+    return geometry;
+  }
+}

package/src/services/index.ts

@@ -1,4 +1,5 @@
 export { default as CanvasService } from "./CanvasService";
+export * from "./SceneLayoutService";
 export * from "./renderSpec";
 export * from "./visibility";
 export * from "./ViewportSystem";

package/src/services/renderSpec.ts

@@ -52,6 +52,7 @@ export type VisibilityExpr =
   | { op: "const"; value: boolean }
   | { op: "activeToolIn"; ids: string[] }
   | { op: "sessionActive"; toolId: string }
+  | { op: "anySessionActive" }
   | { op: "layerExists"; layerId: string }
   | {
       op: "layerObjectCount";
@@ -66,6 +67,7 @@ export type VisibilityExpr =
 export interface RenderClipPathEffectSpec {
   type: "clipPath";
   id?: string;
+  visibility?: VisibilityExpr;
   source: RenderObjectSpec;
   targetPassIds: string[];
 }

package/src/services/visibility.ts

@@ -8,6 +8,7 @@ export interface VisibilityLayerState {
 export interface VisibilityEvalContext {
   activeToolId?: string | null;
   isSessionActive?: (toolId: string) => boolean;
+  hasAnyActiveSession?: () => boolean;
   layers: Map<string, VisibilityLayerState>;
 }
 
@@ -51,6 +52,10 @@ export function evaluateVisibilityExpr(
     return context.isSessionActive ? context.isSessionActive(toolId) : false;
   }
 
+  if (expr.op === "anySessionActive") {
+    return context.hasAnyActiveSession ? context.hasAnyActiveSession() : false;
+  }
+
   if (expr.op === "layerExists") {
     return layerState(context, expr.layerId).exists === true;
   }

package/src/shared/constants/layers.ts

@@ -0,0 +1,23 @@
+export const BACKGROUND_LAYER_ID = "background";
+export const IMAGE_OBJECT_LAYER_ID = "image.user";
+export const IMAGE_OVERLAY_LAYER_ID = "image-overlay";
+export const WHITE_INK_OBJECT_LAYER_ID = "white-ink.user";
+export const WHITE_INK_COVER_LAYER_ID = "white-ink.cover";
+export const WHITE_INK_OVERLAY_LAYER_ID = "white-ink.overlay";
+export const DIELINE_LAYER_ID = "dieline-overlay";
+export const FEATURE_OVERLAY_LAYER_ID = "feature-overlay";
+export const RULER_LAYER_ID = "ruler-overlay";
+export const FILM_LAYER_ID = "overlay";
+
+export const LAYER_IDS = {
+  background: BACKGROUND_LAYER_ID,
+  imageObject: IMAGE_OBJECT_LAYER_ID,
+  imageOverlay: IMAGE_OVERLAY_LAYER_ID,
+  whiteInkObject: WHITE_INK_OBJECT_LAYER_ID,
+  whiteInkCover: WHITE_INK_COVER_LAYER_ID,
+  whiteInkOverlay: WHITE_INK_OVERLAY_LAYER_ID,
+  dieline: DIELINE_LAYER_ID,
+  featureOverlay: FEATURE_OVERLAY_LAYER_ID,
+  rulerOverlay: RULER_LAYER_ID,
+  filmOverlay: FILM_LAYER_ID,
+} as const;

package/src/shared/imaging/sourceSizeCache.ts

@@ -0,0 +1,103 @@
+export interface SourceSize {
+  width: number;
+  height: number;
+}
+
+export interface RectLike {
+  width: number;
+  height: number;
+}
+
+export interface SourceSizeCache {
+  ensureImageSize: (src: string) => Promise<SourceSize | null>;
+  rememberSourceSize: (src: string, size: Partial<SourceSize>) => SourceSize | null;
+  getSourceSize: (src: string) => SourceSize | null;
+  deleteSourceSize: (src: string) => void;
+  clear: () => void;
+}
+
+export function normalizeSourceSize(size: Partial<SourceSize>): SourceSize | null {
+  const width = Number(size.width || 0);
+  const height = Number(size.height || 0);
+  if (!Number.isFinite(width) || !Number.isFinite(height)) return null;
+  if (width <= 0 || height <= 0) return null;
+  return { width, height };
+}
+
+export function getCoverScale(frame: RectLike, source: RectLike): number {
+  const frameWidth = Math.max(1, Number(frame.width || 0));
+  const frameHeight = Math.max(1, Number(frame.height || 0));
+  const sourceWidth = Math.max(1, Number(source.width || 0));
+  const sourceHeight = Math.max(1, Number(source.height || 0));
+  return Math.max(frameWidth / sourceWidth, frameHeight / sourceHeight);
+}
+
+export function createSourceSizeCache(
+  loadSize: (src: string) => Promise<SourceSize | null>,
+): SourceSizeCache {
+  const sizesBySrc = new Map<string, SourceSize>();
+  const pendingBySrc = new Map<string, Promise<SourceSize | null>>();
+
+  const rememberSourceSize = (
+    src: string,
+    size: Partial<SourceSize>,
+  ): SourceSize | null => {
+    const normalized = normalizeSourceSize(size);
+    if (!src || !normalized) return null;
+    sizesBySrc.set(src, normalized);
+    return normalized;
+  };
+
+  const getSourceSize = (src: string): SourceSize | null => {
+    if (!src) return null;
+    const cached = sizesBySrc.get(src);
+    if (!cached) return null;
+    return { width: cached.width, height: cached.height };
+  };
+
+  const ensureImageSize = async (src: string): Promise<SourceSize | null> => {
+    if (!src) return null;
+
+    const cached = sizesBySrc.get(src);
+    if (cached) return { width: cached.width, height: cached.height };
+
+    const pending = pendingBySrc.get(src);
+    if (pending) {
+      return pending;
+    }
+
+    const task = loadSize(src);
+    pendingBySrc.set(src, task);
+
+    try {
+      const size = await task;
+      if (size) {
+        rememberSourceSize(src, size);
+      }
+      return size;
+    } finally {
+      if (pendingBySrc.get(src) === task) {
+        pendingBySrc.delete(src);
+      }
+    }
+  };
+
+  const deleteSourceSize = (src: string) => {
+    if (!src) return;
+    sizesBySrc.delete(src);
+    pendingBySrc.delete(src);
+  };
+
+  const clear = () => {
+    sizesBySrc.clear();
+    pendingBySrc.clear();
+  };
+
+  return {
+    ensureImageSize,
+    rememberSourceSize,
+    getSourceSize,
+    deleteSourceSize,
+    clear,
+  };
+}

package/src/shared/index.ts

@@ -0,0 +1,6 @@
+export * from "./constants/layers";
+export * from "./imaging/sourceSizeCache";
+export * from "./runtime/sessionState";
+export * from "./runtime/subscriptions";
+export * from "./scene/frame";
+export * from "./scene/sceneLayoutModel";