@pooder/kit 5.0.4 → 5.2.0

package/src/{maskOps.ts → extensions/maskOps.ts}

@@ -10,6 +10,13 @@ export interface CreateMaskOptions {
   alphaOpaqueCutoff?: number;
 }
 
+export interface AlphaAnalysis {
+  total: number;
+  minAlpha: number;
+  belowOpaqueRatio: number;
+  veryTransparentRatio: number;
+}
+
 export function createMask(
   imageData: ImageData,
   options: CreateMaskOptions,
@@ -55,7 +62,21 @@ export function createMask(
   return mask;
 }
 
-function inferMaskMode(imageData: ImageData, alphaOpaqueCutoff: number): MaskMode {
+export function inferMaskMode(
+  imageData: ImageData,
+  alphaOpaqueCutoff: number,
+): MaskMode {
+  const analysis = analyzeAlpha(imageData, alphaOpaqueCutoff);
+  if (analysis.minAlpha === 255) return "whitebg";
+  if (analysis.veryTransparentRatio >= 0.0005) return "alpha";
+  if (analysis.belowOpaqueRatio >= 0.01) return "alpha";
+  return "whitebg";
+}
+
+export function analyzeAlpha(
+  imageData: ImageData,
+  alphaOpaqueCutoff: number,
+): AlphaAnalysis {
   const { data } = imageData;
   const total = data.length / 4;
 
@@ -70,15 +91,12 @@ function inferMaskMode(imageData: ImageData, alphaOpaqueCutoff: number): MaskMod
     if (a < 32) veryTransparent++;
   }
 
-  if (minAlpha === 255) return "whitebg";
-
-  const belowOpaqueRatio = belowOpaque / total;
-  const veryTransparentRatio = veryTransparent / total;
-
-  if (veryTransparentRatio >= 0.0005) return "alpha";
-  if (belowOpaqueRatio >= 0.01) return "alpha";
-
-  return "whitebg";
+  return {
+    total,
+    minAlpha,
+    belowOpaqueRatio: belowOpaque / total,
+    veryTransparentRatio: veryTransparent / total,
+  };
 }
 
 export function circularMorphology(

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

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

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

@@ -7,8 +7,8 @@ import {
   ConfigurationService,
 } from "@pooder/core";
 import { Rect, Line, Text, Group, Polygon } from "fabric";
-import CanvasService from "./CanvasService";
-import { formatMm } from "./units";
+import { CanvasService } from "../services";
+import { formatMm } from "../units";
 import { computeSceneLayout, readSizeState } from "./sceneLayoutModel";
 
 export class RulerTool implements Extension {
@@ -304,7 +304,9 @@ export class RulerTool implements Extension {
     const rulerBottom = rulerRect.top + rulerRect.height;
 
     // Display Dimensions (Physical)
-    const displayWidthMm = useCutAsRuler ? layout.cutWidthMm : layout.trimWidthMm;
+    const displayWidthMm = useCutAsRuler
+      ? layout.cutWidthMm
+      : layout.trimWidthMm;
     const displayHeightMm = useCutAsRuler
       ? layout.cutHeightMm
       : layout.trimHeightMm;

package/src/extensions/sceneLayout.ts

@@ -0,0 +1,140 @@
+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;
+  }
+}

package/src/{sceneLayoutModel.ts → extensions/sceneLayoutModel.ts}

@@ -1,7 +1,7 @@
 import type { ConfigurationService } from "@pooder/core";
-import type CanvasService from "./CanvasService";
-import { Coordinate, Unit } from "./coordinate";
-import { parseLengthToMm } from "./units";
+import type { CanvasService } from "../services";
+import { Coordinate, Unit } from "../coordinate";
+import { parseLengthToMm } from "../units";
 
 export type SizeConstraintMode = "free" | "lockAspect" | "equal";
 export type CutMode = "trim" | "outset" | "inset";
@@ -158,17 +158,17 @@ export function readSizeState(configService: ConfigurationService): SizeState {
   );
   const actualHeightMm = sanitizeMmValue(
     parseLengthToMm(
-      configService.get("size.actualHeightMm", DEFAULT_SIZE_STATE.actualHeightMm),
+      configService.get(
+        "size.actualHeightMm",
+        DEFAULT_SIZE_STATE.actualHeightMm,
+      ),
       "mm",
     ),
     { minMm, maxMm, stepMm },
   );
 
   const aspectRaw = Number(
-    configService.get(
-      "size.aspectRatio",
-      DEFAULT_SIZE_STATE.aspectRatio,
-    ),
+    configService.get("size.aspectRatio", DEFAULT_SIZE_STATE.aspectRatio),
   );
   const aspectRatio =
     Number.isFinite(aspectRaw) && aspectRaw > 0
@@ -265,7 +265,11 @@ export function computeSceneLayout(
     return null;
   }
 
-  const paddingPx = resolvePaddingPx(size.viewPadding, canvasWidth, canvasHeight);
+  const paddingPx = resolvePaddingPx(
+    size.viewPadding,
+    canvasWidth,
+    canvasHeight,
+  );
   canvasService.viewport.updateContainer(canvasWidth, canvasHeight);
   canvasService.viewport.setPadding(paddingPx);
   canvasService.viewport.updatePhysical(viewWidthMm, viewHeightMm);
@@ -316,7 +320,10 @@ export function buildSceneGeometry(
   configService: ConfigurationService,
   layout: SceneLayoutSnapshot,
 ): SceneGeometrySnapshot {
-  const radiusMm = parseLengthToMm(configService.get("dieline.radius", 0), "mm");
+  const radiusMm = parseLengthToMm(
+    configService.get("dieline.radius", 0),
+    "mm",
+  );
   const offset = (layout.cutRect.width - layout.trimRect.width) / 2;
 
   return {

package/src/extensions/sceneVisibility.ts

@@ -0,0 +1,71 @@
+import { Service, ServiceContext, WORKBENCH_SERVICE } from "@pooder/core";
+import { CanvasService } from "../services";
+
+const CANVAS_SERVICE_ID = "CanvasService";
+const HIDDEN_DIELINE_TOOLS = new Set(["pooder.kit.image", "pooder.kit.white-ink"]);
+const HIDDEN_RULER_TOOLS = new Set(["pooder.kit.white-ink"]);
+
+export class SceneVisibilityService implements Service {
+  private context?: ServiceContext;
+  private activeToolId: string | null = null;
+  private canvasService?: CanvasService;
+
+  init(context: ServiceContext) {
+    if (this.context) {
+      this.dispose(this.context);
+    }
+
+    const canvasService =
+      context.get<CanvasService>(CANVAS_SERVICE_ID);
+    if (!canvasService) {
+      throw new Error("[SceneVisibilityService] CanvasService is required.");
+    }
+
+    this.context = context;
+    this.canvasService = canvasService;
+    this.activeToolId = context.get(WORKBENCH_SERVICE)?.activeToolId ?? null;
+    context.eventBus.on("tool:activated", this.onToolActivated);
+    context.eventBus.on("object:added", this.onObjectAdded);
+    this.apply();
+  }
+
+  dispose(context: ServiceContext) {
+    const activeContext = this.context ?? context;
+    activeContext.eventBus.off("tool:activated", this.onToolActivated);
+    activeContext.eventBus.off("object:added", this.onObjectAdded);
+    this.context = undefined;
+    this.activeToolId = null;
+    this.canvasService = undefined;
+  }
+
+  private onToolActivated = (e: { id: string | null }) => {
+    this.activeToolId = e.id;
+    this.apply();
+  };
+
+  private onObjectAdded = () => {
+    this.apply();
+  };
+
+  private apply() {
+    if (!this.canvasService) return;
+
+    const dielineLayer = this.canvasService.getLayer("dieline-overlay");
+    if (dielineLayer) {
+      const visible = !HIDDEN_DIELINE_TOOLS.has(this.activeToolId || "");
+      if (dielineLayer.visible !== visible) {
+        dielineLayer.set({ visible });
+      }
+    }
+
+    const rulerLayer = this.canvasService.getLayer("ruler-overlay");
+    if (rulerLayer) {
+      const visible = !HIDDEN_RULER_TOOLS.has(this.activeToolId || "");
+      if (rulerLayer.visible !== visible) {
+        rulerLayer.set({ visible });
+      }
+    }
+
+    this.canvasService.requestRenderAll();
+  }
+}

package/src/{size.ts → extensions/size.ts}

@@ -6,7 +6,7 @@ import {
   Extension,
   ExtensionContext,
 } from "@pooder/core";
-import CanvasService from "./CanvasService";
+import { CanvasService } from "../services";
 import {
   fromMm,
   normalizeConstraintMode,
@@ -18,7 +18,7 @@ import {
   type SizeConstraintMode,
   computeSceneLayout,
 } from "./sceneLayoutModel";
-import type { Unit } from "./coordinate";
+import type { Unit } from "../coordinate";
 
 type ChangedField = "width" | "height" | "both";
 
@@ -194,7 +194,9 @@ export class SizeTool implements Extension {
   }
 
   private getConfigService(): ConfigurationService | undefined {
-    return this.context?.services.get<ConfigurationService>("ConfigurationService");
+    return this.context?.services.get<ConfigurationService>(
+      "ConfigurationService",
+    );
   }
 
   private ensureDefaults(configService: ConfigurationService) {
@@ -264,7 +266,7 @@ export class SizeTool implements Extension {
           ? nextHeightMm
           : changed === "width"
             ? nextWidthMm
-            : providedWidthMm ?? providedHeightMm ?? nextWidthMm;
+            : (providedWidthMm ?? providedHeightMm ?? nextWidthMm);
       nextWidthMm = anchor;
       nextHeightMm = anchor;
     } else if (state.constraintMode === "lockAspect") {
@@ -311,11 +313,14 @@ export class SizeTool implements Extension {
       configService.update("size.aspectRatio", ratio);
     }
     if (mode === "equal") {
-      const value = sanitizeMmValue(Math.max(state.actualWidthMm, state.actualHeightMm), {
-        minMm: state.minMm,
-        maxMm: state.maxMm,
-        stepMm: state.stepMm,
-      });
+      const value = sanitizeMmValue(
+        Math.max(state.actualWidthMm, state.actualHeightMm),
+        {
+          minMm: state.minMm,
+          maxMm: state.maxMm,
+          stepMm: state.stepMm,
+        },
+      );
       configService.update("size.actualWidthMm", value);
       configService.update("size.actualHeightMm", value);
       configService.update("size.aspectRatio", 1);
@@ -353,15 +358,20 @@ export class SizeTool implements Extension {
 
     const all = this.canvasService.canvas.getObjects() as any[];
     const active = this.canvasService.canvas.getActiveObject() as any;
-    const activeId = active?.data?.layerId === "image.user" ? active?.data?.id : null;
+    const activeId =
+      active?.data?.layerId === "image.user" ? active?.data?.id : null;
     const targetId = id || activeId;
     const target =
-      all.find((obj) => obj?.data?.layerId === "image.user" && obj?.data?.id === targetId) ||
-      all.find((obj) => obj?.data?.layerId === "image.user");
+      all.find(
+        (obj) =>
+          obj?.data?.layerId === "image.user" && obj?.data?.id === targetId,
+      ) || all.find((obj) => obj?.data?.layerId === "image.user");
     if (!target) return null;
 
     const objectWidthPx = Math.abs((target.width || 0) * (target.scaleX || 1));
-    const objectHeightPx = Math.abs((target.height || 0) * (target.scaleY || 1));
+    const objectHeightPx = Math.abs(
+      (target.height || 0) * (target.scaleY || 1),
+    );
     if (objectWidthPx <= 0 || objectHeightPx <= 0) return null;
 
     const widthMm = objectWidthPx / layout.scale;