@pooder/kit 6.0.1 → 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/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/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";

package/src/shared/runtime/sessionState.ts

@@ -0,0 +1,105 @@
+export function cloneWithJson<T>(value: T): T {
+  return JSON.parse(JSON.stringify(value)) as T;
+}
+
+export interface SessionLike<T> {
+  committed: T;
+  working: T;
+  hasWorkingChanges: boolean;
+}
+
+export function applyCommittedSnapshot<T>(
+  session: SessionLike<T>,
+  nextCommitted: T,
+  options: {
+    clone: (value: T) => T;
+    toolActive: boolean;
+    preserveDirtyWorking?: boolean;
+  },
+): void {
+  const clone = options.clone;
+  session.committed = clone(nextCommitted);
+
+  const shouldPreserveDirtyWorking =
+    options.toolActive &&
+    options.preserveDirtyWorking !== false &&
+    session.hasWorkingChanges;
+
+  if (!shouldPreserveDirtyWorking) {
+    session.working = clone(session.committed);
+    session.hasWorkingChanges = false;
+  }
+}
+
+export function runDeferredConfigUpdate(
+  state: any,
+  action: () => void,
+  cooldownMs = 0,
+): void {
+  state.isUpdatingConfig = true;
+  action();
+  if (cooldownMs <= 0) {
+    state.isUpdatingConfig = false;
+    return;
+  }
+  setTimeout(() => {
+    state.isUpdatingConfig = false;
+  }, cooldownMs);
+}
+
+export class WorkingSessionState<T> {
+  committed: T;
+  working: T;
+  hasWorkingChanges = false;
+  isUpdatingConfig = false;
+
+  private readonly clone: (value: T) => T;
+
+  constructor(initial: T, clone: (value: T) => T) {
+    this.clone = clone;
+    this.committed = this.clone(initial);
+    this.working = this.clone(initial);
+  }
+
+  setCommitted(
+    next: T,
+    options: { toolActive?: boolean; preserveDirtyWorking?: boolean } = {},
+  ): void {
+    this.committed = this.clone(next);
+    const shouldPreserveDirtyWorking =
+      options.toolActive === true &&
+      options.preserveDirtyWorking !== false &&
+      this.hasWorkingChanges;
+
+    if (!shouldPreserveDirtyWorking) {
+      this.working = this.clone(this.committed);
+      this.hasWorkingChanges = false;
+    }
+  }
+
+  setWorking(next: T, options: { markDirty?: boolean } = {}): void {
+    this.working = this.clone(next);
+    if (options.markDirty !== false) {
+      this.hasWorkingChanges = true;
+    }
+  }
+
+  resetWorkingFromCommitted(): void {
+    this.working = this.clone(this.committed);
+    this.hasWorkingChanges = false;
+  }
+
+  commitWorkingToCommitted(): void {
+    this.committed = this.clone(this.working);
+    this.hasWorkingChanges = false;
+  }
+
+  runConfigUpdate(action: () => void): void {
+    this.isUpdatingConfig = true;
+    try {
+      action();
+    } finally {
+      this.isUpdatingConfig = false;
+    }
+  }
+}

package/src/shared/runtime/subscriptions.ts

@@ -0,0 +1,45 @@
+export interface Disposable {
+  dispose(): void;
+}
+
+interface EventBusLike {
+  on(event: string, handler: (...args: any[]) => void): void;
+  off(event: string, handler: (...args: any[]) => void): void;
+}
+
+interface ConfigLike {
+  onAnyChange(handler: (event: any) => void): Disposable;
+}
+
+export class SubscriptionBag {
+  private readonly disposables: Disposable[] = [];
+
+  add<T extends Disposable | undefined | null>(disposable: T): T {
+    if (disposable) {
+      this.disposables.push(disposable);
+    }
+    return disposable;
+  }
+
+  on(
+    eventBus: EventBusLike,
+    event: string,
+    handler: (...args: any[]) => void,
+  ): void {
+    eventBus.on(event, handler);
+    this.disposables.push({
+      dispose: () => eventBus.off(event, handler),
+    });
+  }
+
+  onConfigChange(configService: ConfigLike, handler: (event: any) => void): void {
+    this.add(configService.onAnyChange(handler));
+  }
+
+  disposeAll(): void {
+    while (this.disposables.length > 0) {
+      const disposable = this.disposables.pop();
+      disposable?.dispose();
+    }
+  }
+}

package/src/shared/scene/frame.ts

@@ -0,0 +1,46 @@
+import type { ConfigurationService } from "@pooder/core";
+import type { CanvasService, RenderLayoutRect } from "../../services";
+import { computeSceneLayout, readSizeState } from "./sceneLayoutModel";
+
+export interface FrameRect {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+export function emptyFrameRect(): FrameRect {
+  return { left: 0, top: 0, width: 0, height: 0 };
+}
+
+export function resolveCutFrameRect(
+  canvasService?: CanvasService,
+  configService?: ConfigurationService,
+): FrameRect {
+  if (!canvasService || !configService) {
+    return emptyFrameRect();
+  }
+
+  const sizeState = readSizeState(configService);
+  const layout = computeSceneLayout(canvasService, sizeState);
+  if (!layout) {
+    return emptyFrameRect();
+  }
+
+  return canvasService.toSceneRect({
+    left: layout.cutRect.left,
+    top: layout.cutRect.top,
+    width: layout.cutRect.width,
+    height: layout.cutRect.height,
+  });
+}
+
+export function toLayoutSceneRect(rect: FrameRect): RenderLayoutRect {
+  return {
+    left: rect.left,
+    top: rect.top,
+    width: rect.width,
+    height: rect.height,
+    space: "scene",
+  };
+}