@pooder/kit 6.0.0 → 6.1.0

package/src/extensions/image/commands.ts

@@ -0,0 +1,176 @@
+import type { CommandContribution } from "@pooder/core";
+
+export function createImageCommands(tool: any): CommandContribution[] {
+  return [
+    {
+      command: "addImage",
+      id: "addImage",
+      title: "Add Image",
+      handler: async (url: string, options?: Record<string, any>) => {
+        const result = await tool.upsertImageEntry(url, {
+          mode: "add",
+          addOptions: options,
+        });
+        return result.id;
+      },
+    },
+    {
+      command: "upsertImage",
+      id: "upsertImage",
+      title: "Upsert Image",
+      handler: async (url: string, options: Record<string, any> = {}) => {
+        return await tool.upsertImageEntry(url, options);
+      },
+    },
+    {
+      command: "getWorkingImages",
+      id: "getWorkingImages",
+      title: "Get Working Images",
+      handler: () => {
+        return tool.cloneItems(tool.workingItems);
+      },
+    },
+    {
+      command: "setWorkingImage",
+      id: "setWorkingImage",
+      title: "Set Working Image",
+      handler: (id: string, updates: Record<string, any>) => {
+        tool.updateImageInWorking(id, updates);
+      },
+    },
+    {
+      command: "resetWorkingImages",
+      id: "resetWorkingImages",
+      title: "Reset Working Images",
+      handler: () => {
+        tool.workingItems = tool.cloneItems(tool.items);
+        tool.hasWorkingChanges = false;
+        tool.updateImages();
+        tool.emitWorkingChange();
+      },
+    },
+    {
+      command: "completeImages",
+      id: "completeImages",
+      title: "Complete Images",
+      handler: async () => {
+        return await tool.commitWorkingImagesAsCropped();
+      },
+    },
+    {
+      command: "exportUserCroppedImage",
+      id: "exportUserCroppedImage",
+      title: "Export User Cropped Image",
+      handler: async (options: Record<string, any> = {}) => {
+        return await tool.exportUserCroppedImage(options);
+      },
+    },
+    {
+      command: "fitImageToArea",
+      id: "fitImageToArea",
+      title: "Fit Image to Area",
+      handler: async (
+        id: string,
+        area: {
+          width: number;
+          height: number;
+          left?: number;
+          top?: number;
+        },
+      ) => {
+        await tool.fitImageToArea(id, area);
+      },
+    },
+    {
+      command: "fitImageToDefaultArea",
+      id: "fitImageToDefaultArea",
+      title: "Fit Image to Default Area",
+      handler: async (id: string) => {
+        await tool.fitImageToDefaultArea(id);
+      },
+    },
+    {
+      command: "focusImage",
+      id: "focusImage",
+      title: "Focus Image",
+      handler: (
+        id: string | null,
+        options: { syncCanvasSelection?: boolean } = {},
+      ) => {
+        return tool.setImageFocus(id, options);
+      },
+    },
+    {
+      command: "removeImage",
+      id: "removeImage",
+      title: "Remove Image",
+      handler: (id: string) => {
+        const removed = tool.items.find((item: any) => item.id === id);
+        const next = tool.items.filter((item: any) => item.id !== id);
+        if (next.length !== tool.items.length) {
+          tool.purgeSourceSizeCacheForItem(removed);
+          if (tool.focusedImageId === id) {
+            tool.setImageFocus(null, {
+              syncCanvasSelection: true,
+              skipRender: true,
+            });
+          }
+          tool.updateConfig(next);
+        }
+      },
+    },
+    {
+      command: "updateImage",
+      id: "updateImage",
+      title: "Update Image",
+      handler: async (
+        id: string,
+        updates: Record<string, any>,
+        options: Record<string, any> = {},
+      ) => {
+        await tool.updateImage(id, updates, options);
+      },
+    },
+    {
+      command: "clearImages",
+      id: "clearImages",
+      title: "Clear Images",
+      handler: () => {
+        tool.sourceSizeCache.clear();
+        tool.setImageFocus(null, {
+          syncCanvasSelection: true,
+          skipRender: true,
+        });
+        tool.updateConfig([]);
+      },
+    },
+    {
+      command: "bringToFront",
+      id: "bringToFront",
+      title: "Bring Image to Front",
+      handler: (id: string) => {
+        const index = tool.items.findIndex((item: any) => item.id === id);
+        if (index !== -1 && index < tool.items.length - 1) {
+          const next = [...tool.items];
+          const [item] = next.splice(index, 1);
+          next.push(item);
+          tool.updateConfig(next);
+        }
+      },
+    },
+    {
+      command: "sendToBack",
+      id: "sendToBack",
+      title: "Send Image to Back",
+      handler: (id: string) => {
+        const index = tool.items.findIndex((item: any) => item.id === id);
+        if (index > 0) {
+          const next = [...tool.items];
+          const [item] = next.splice(index, 1);
+          next.unshift(item);
+          tool.updateConfig(next);
+        }
+      },
+    },
+  ];
+}

package/src/extensions/image/config.ts

@@ -0,0 +1,128 @@
+import type { ConfigurationContribution } from "@pooder/core";
+
+export function createImageConfigurations(): ConfigurationContribution[] {
+  return [
+    {
+      id: "image.items",
+      type: "array",
+      label: "Images",
+      default: [],
+    },
+    {
+      id: "image.debug",
+      type: "boolean",
+      label: "Image Debug Log",
+      default: false,
+    },
+    {
+      id: "image.control.cornerSize",
+      type: "number",
+      label: "Image Control Corner Size",
+      min: 4,
+      max: 64,
+      step: 1,
+      default: 14,
+    },
+    {
+      id: "image.control.touchCornerSize",
+      type: "number",
+      label: "Image Control Touch Corner Size",
+      min: 8,
+      max: 96,
+      step: 1,
+      default: 24,
+    },
+    {
+      id: "image.control.cornerStyle",
+      type: "select",
+      label: "Image Control Corner Style",
+      options: ["circle", "rect"],
+      default: "circle",
+    },
+    {
+      id: "image.control.cornerColor",
+      type: "color",
+      label: "Image Control Corner Color",
+      default: "#ffffff",
+    },
+    {
+      id: "image.control.cornerStrokeColor",
+      type: "color",
+      label: "Image Control Corner Stroke Color",
+      default: "#1677ff",
+    },
+    {
+      id: "image.control.transparentCorners",
+      type: "boolean",
+      label: "Image Control Transparent Corners",
+      default: false,
+    },
+    {
+      id: "image.control.borderColor",
+      type: "color",
+      label: "Image Control Border Color",
+      default: "#1677ff",
+    },
+    {
+      id: "image.control.borderScaleFactor",
+      type: "number",
+      label: "Image Control Border Width",
+      min: 0.5,
+      max: 8,
+      step: 0.1,
+      default: 1.5,
+    },
+    {
+      id: "image.control.padding",
+      type: "number",
+      label: "Image Control Padding",
+      min: 0,
+      max: 64,
+      step: 1,
+      default: 0,
+    },
+    {
+      id: "image.frame.strokeColor",
+      type: "color",
+      label: "Image Frame Stroke Color",
+      default: "#808080",
+    },
+    {
+      id: "image.frame.strokeWidth",
+      type: "number",
+      label: "Image Frame Stroke Width",
+      min: 0,
+      max: 20,
+      step: 0.5,
+      default: 2,
+    },
+    {
+      id: "image.frame.strokeStyle",
+      type: "select",
+      label: "Image Frame Stroke Style",
+      options: ["solid", "dashed", "hidden"],
+      default: "dashed",
+    },
+    {
+      id: "image.frame.dashLength",
+      type: "number",
+      label: "Image Frame Dash Length",
+      min: 1,
+      max: 40,
+      step: 1,
+      default: 8,
+    },
+    {
+      id: "image.frame.innerBackground",
+      type: "color",
+      label: "Image Frame Inner Background",
+      default: "rgba(0,0,0,0)",
+    },
+    {
+      id: "image.frame.outerBackground",
+      type: "color",
+      label: "Image Frame Outer Background",
+      default: "#f5f5f5",
+    },
+  ];
+}

package/src/extensions/image/index.ts

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

package/src/extensions/image/model.ts

@@ -0,0 +1 @@
+export type { ImageItem } from "./ImageTool";

package/src/extensions/image/renderer.ts

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

package/src/extensions/{mirror.ts → mirror/MirrorTool.ts}

@@ -5,7 +5,7 @@ import {
   CommandContribution,
   ConfigurationContribution,
 } from "@pooder/core";
-import { CanvasService } from "../services";
+import { CanvasService } from "../../services";
 
 export class MirrorTool implements Extension {
   id = "pooder.kit.mirror";

package/src/extensions/mirror/index.ts

@@ -0,0 +1 @@
+export * from "./MirrorTool";

package/src/extensions/{ruler.ts → ruler/RulerTool.ts}

@@ -6,16 +6,15 @@ import {
   ConfigurationContribution,
   ConfigurationService,
 } from "@pooder/core";
-import { CanvasService, RenderObjectSpec } from "../services";
+import { CanvasService, RenderObjectSpec } from "../../services";
 import {
   buildSceneGeometry,
   computeSceneLayout,
   fromMm,
   readSizeState,
-} from "./sceneLayoutModel";
-import type { Unit } from "../coordinate";
-
-const RULER_LAYER_ID = "ruler-overlay";
+} from "../../shared/scene/sceneLayoutModel";
+import type { Unit } from "../../coordinate";
+import { RULER_LAYER_ID } from "../../shared/constants/layers";
 const EXTENSION_LINE_LENGTH = 5;
 const MIN_ARROW_SIZE = 4;
 const THICKNESS_TO_STROKE_WIDTH_RATIO = 20;

package/src/extensions/ruler/index.ts

@@ -0,0 +1 @@
+export * from "./RulerTool";

package/src/extensions/sceneLayout.ts

@@ -1,140 +1 @@
-import {
-  COMMAND_SERVICE,
-  CONFIGURATION_SERVICE,
-  CommandService,
-  ConfigurationService,
-  Service,
-  ServiceContext,
-} from "@pooder/core";
-import { CanvasService } from "../services";
-import {
-  buildSceneGeometry,
-  computeSceneLayout,
-  readSizeState,
-  type SceneGeometrySnapshot,
-  type SceneLayoutSnapshot,
-} from "./sceneLayoutModel";
-
-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 onConfigChange?: { dispose(): void };
-  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.onConfigChange = configService.onAnyChange(this.onConfigChanged);
-    context.eventBus.on("canvas:resized", this.onCanvasResized);
-    this.refresh();
-  }
-
-  dispose(context: ServiceContext) {
-    const activeContext = this.context ?? context;
-    activeContext.eventBus.off("canvas:resized", this.onCanvasResized);
-    this.onConfigChange?.dispose();
-    this.onConfigChange = undefined;
-    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;
-  }
-}
+export { SceneLayoutService } from "../services/SceneLayoutService";