@pooder/kit 4.3.0 → 5.0.0

package/src/sceneLayout.ts

@@ -0,0 +1,121 @@
+import {
+  CommandContribution,
+  ConfigurationService,
+  ContributionPointIds,
+  Extension,
+  ExtensionContext,
+} from "@pooder/core";
+import CanvasService from "./CanvasService";
+import {
+  buildSceneGeometry,
+  computeSceneLayout,
+  readSizeState,
+  type SceneGeometrySnapshot,
+  type SceneLayoutSnapshot,
+} from "./sceneLayoutModel";
+
+const GEOMETRY_KEYS = new Set([
+  "dieline.shape",
+  "dieline.radius",
+  "dieline.pathData",
+  "size.unit",
+]);
+
+export class SceneLayoutService implements Extension {
+  id = "pooder.kit.sceneLayout";
+  metadata = {
+    name: "SceneLayoutService",
+  };
+
+  private context?: ExtensionContext;
+  private canvasService?: CanvasService;
+  private configService?: ConfigurationService;
+  private lastLayout: SceneLayoutSnapshot | null = null;
+  private lastGeometry: SceneGeometrySnapshot | null = null;
+  private onConfigChange?: { dispose(): void };
+
+  activate(context: ExtensionContext) {
+    this.context = context;
+    this.canvasService = context.services.get<CanvasService>("CanvasService");
+    this.configService = context.services.get<ConfigurationService>(
+      "ConfigurationService",
+    );
+
+    if (!this.canvasService || !this.configService) return;
+
+    this.onConfigChange = this.configService.onAnyChange((e) => {
+      if (e.key.startsWith("size.") || e.key.startsWith("dieline.")) {
+        this.refresh(GEOMETRY_KEYS.has(e.key));
+      }
+    });
+    context.eventBus.on("canvas:resized", this.onCanvasResized);
+    this.refresh(true);
+  }
+
+  deactivate(context: ExtensionContext) {
+    context.eventBus.off("canvas:resized", this.onCanvasResized);
+    this.onConfigChange?.dispose();
+    this.onConfigChange = undefined;
+    this.context = undefined;
+    this.canvasService = undefined;
+    this.configService = undefined;
+    this.lastLayout = null;
+    this.lastGeometry = null;
+  }
+
+  contribute() {
+    return {
+      [ContributionPointIds.COMMANDS]: [
+        {
+          command: "getSceneLayout",
+          title: "Get Scene Layout",
+          handler: () => this.getLayout(),
+        },
+        {
+          command: "getSceneGeometry",
+          title: "Get Scene Geometry",
+          handler: () => this.getGeometry(),
+        },
+      ] as CommandContribution[],
+    };
+  }
+
+  private onCanvasResized = () => {
+    this.refresh(true);
+  };
+
+  private refresh(forceGeometry = false) {
+    const layout = this.getLayout(true);
+    if (!layout) return;
+    this.context?.eventBus.emit("scene:layout:change", layout);
+
+    if (forceGeometry || !this.lastGeometry) {
+      const geometry = this.getGeometry(true);
+      if (geometry) {
+        this.context?.eventBus.emit("scene:geometry:change", geometry);
+      }
+    }
+  }
+
+  private 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);
+    this.lastLayout = layout;
+    return layout;
+  }
+
+  private getGeometry(forceRefresh = false): SceneGeometrySnapshot | null {
+    if (!this.configService) return null;
+    const layout = this.getLayout(forceRefresh);
+    if (!layout) return null;
+    if (!forceRefresh && this.lastGeometry) return this.lastGeometry;
+
+    const geometry = buildSceneGeometry(this.configService, layout);
+    this.lastGeometry = geometry;
+    return geometry;
+  }
+}
+

package/src/sceneLayoutModel.ts

@@ -0,0 +1,335 @@
+import type { ConfigurationService } from "@pooder/core";
+import type CanvasService from "./CanvasService";
+import { Coordinate, Unit } from "./coordinate";
+import { parseLengthToMm } from "./units";
+
+export type SizeConstraintMode = "free" | "lockAspect" | "equal";
+export type CutMode = "trim" | "outset" | "inset";
+
+export interface SizeState {
+  unit: Unit;
+  actualWidthMm: number;
+  actualHeightMm: number;
+  constraintMode: SizeConstraintMode;
+  aspectRatio: number;
+  cutMode: CutMode;
+  cutMarginMm: number;
+  viewPadding: number | string;
+  minMm: number;
+  maxMm: number;
+  stepMm: number;
+}
+
+export interface SceneRect {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  centerX: number;
+  centerY: number;
+}
+
+export interface SceneLayoutSnapshot {
+  scale: number;
+  canvasWidth: number;
+  canvasHeight: number;
+  trimRect: SceneRect;
+  cutRect: SceneRect;
+  bleedRect: SceneRect;
+  trimWidthMm: number;
+  trimHeightMm: number;
+  cutWidthMm: number;
+  cutHeightMm: number;
+  cutMode: CutMode;
+  cutMarginMm: number;
+}
+
+export interface SceneGeometrySnapshot {
+  shape: "rect" | "circle" | "ellipse" | "custom";
+  unit: "mm";
+  displayUnit: Unit;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  radius: number;
+  offset: number;
+  scale: number;
+  pathData?: string;
+}
+
+const DEFAULT_SIZE_STATE: SizeState = {
+  unit: "mm",
+  actualWidthMm: 500,
+  actualHeightMm: 500,
+  constraintMode: "free",
+  aspectRatio: 1,
+  cutMode: "trim",
+  cutMarginMm: 0,
+  viewPadding: 140,
+  minMm: 10,
+  maxMm: 2000,
+  stepMm: 0.1,
+};
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+function roundToStep(value: number, step: number): number {
+  if (!Number.isFinite(step) || step <= 0) return value;
+  return Math.round(value / step) * step;
+}
+
+export function sanitizeMmValue(
+  valueMm: number,
+  limits: { minMm: number; maxMm: number; stepMm: number },
+): number {
+  if (!Number.isFinite(valueMm)) return limits.minMm;
+  const rounded = roundToStep(valueMm, limits.stepMm);
+  return clamp(rounded, limits.minMm, limits.maxMm);
+}
+
+export function normalizeUnit(value: unknown): Unit {
+  if (value === "cm" || value === "in") return value;
+  return "mm";
+}
+
+export function normalizeConstraintMode(value: unknown): SizeConstraintMode {
+  if (value === "lockAspect" || value === "equal") return value;
+  return "free";
+}
+
+export function normalizeCutMode(value: unknown): CutMode {
+  if (value === "outset" || value === "inset") return value;
+  return "trim";
+}
+
+export function toMm(value: number, fromUnit: Unit): number {
+  return Coordinate.convertUnit(value, fromUnit, "mm");
+}
+
+export function fromMm(valueMm: number, toUnit: Unit): number {
+  return Coordinate.convertUnit(valueMm, "mm", toUnit);
+}
+
+export function resolvePaddingPx(
+  raw: number | string,
+  containerWidth: number,
+  containerHeight: number,
+): number {
+  if (typeof raw === "number") return Math.max(0, raw);
+  if (typeof raw === "string") {
+    if (raw.endsWith("%")) {
+      const percent = parseFloat(raw) / 100;
+      if (!Number.isFinite(percent)) return 0;
+      return Math.max(0, Math.min(containerWidth, containerHeight) * percent);
+    }
+    const fixed = parseFloat(raw);
+    return Number.isFinite(fixed) ? Math.max(0, fixed) : 0;
+  }
+  return 0;
+}
+
+export function readSizeState(configService: ConfigurationService): SizeState {
+  const unit = normalizeUnit(
+    configService.get("size.unit", DEFAULT_SIZE_STATE.unit),
+  );
+
+  const minMm = Math.max(
+    0.1,
+    Number(configService.get("size.minMm", DEFAULT_SIZE_STATE.minMm)),
+  );
+  const maxMm = Math.max(
+    minMm,
+    Number(configService.get("size.maxMm", DEFAULT_SIZE_STATE.maxMm)),
+  );
+  const stepMm = Math.max(
+    0.001,
+    Number(configService.get("size.stepMm", DEFAULT_SIZE_STATE.stepMm)),
+  );
+
+  const actualWidthMm = sanitizeMmValue(
+    parseLengthToMm(
+      configService.get("size.actualWidthMm", DEFAULT_SIZE_STATE.actualWidthMm),
+      "mm",
+    ),
+    { minMm, maxMm, stepMm },
+  );
+  const actualHeightMm = sanitizeMmValue(
+    parseLengthToMm(
+      configService.get("size.actualHeightMm", DEFAULT_SIZE_STATE.actualHeightMm),
+      "mm",
+    ),
+    { minMm, maxMm, stepMm },
+  );
+
+  const aspectRaw = Number(
+    configService.get(
+      "size.aspectRatio",
+      DEFAULT_SIZE_STATE.aspectRatio,
+    ),
+  );
+  const aspectRatio =
+    Number.isFinite(aspectRaw) && aspectRaw > 0
+      ? aspectRaw
+      : actualWidthMm / Math.max(0.001, actualHeightMm);
+
+  const cutMarginMm = Math.max(
+    0,
+    parseLengthToMm(
+      configService.get("size.cutMarginMm", DEFAULT_SIZE_STATE.cutMarginMm),
+      "mm",
+    ),
+  );
+
+  const viewPadding = configService.get(
+    "size.viewPadding",
+    DEFAULT_SIZE_STATE.viewPadding,
+  );
+
+  return {
+    unit,
+    actualWidthMm,
+    actualHeightMm,
+    constraintMode: normalizeConstraintMode(
+      configService.get(
+        "size.constraintMode",
+        DEFAULT_SIZE_STATE.constraintMode,
+      ),
+    ),
+    aspectRatio,
+    cutMode: normalizeCutMode(
+      configService.get("size.cutMode", DEFAULT_SIZE_STATE.cutMode),
+    ),
+    cutMarginMm,
+    viewPadding,
+    minMm,
+    maxMm,
+    stepMm,
+  };
+}
+
+function rectByCenter(
+  centerX: number,
+  centerY: number,
+  width: number,
+  height: number,
+): SceneRect {
+  return {
+    left: centerX - width / 2,
+    top: centerY - height / 2,
+    width,
+    height,
+    centerX,
+    centerY,
+  };
+}
+
+function getCutSizeMm(size: SizeState): { widthMm: number; heightMm: number } {
+  if (size.cutMode === "trim") {
+    return { widthMm: size.actualWidthMm, heightMm: size.actualHeightMm };
+  }
+
+  const delta = size.cutMarginMm * 2;
+  if (size.cutMode === "outset") {
+    return {
+      widthMm: size.actualWidthMm + delta,
+      heightMm: size.actualHeightMm + delta,
+    };
+  }
+
+  return {
+    widthMm: Math.max(size.minMm, size.actualWidthMm - delta),
+    heightMm: Math.max(size.minMm, size.actualHeightMm - delta),
+  };
+}
+
+export function computeSceneLayout(
+  canvasService: CanvasService,
+  size: SizeState,
+): SceneLayoutSnapshot | null {
+  const canvasWidth = canvasService.canvas.width || 0;
+  const canvasHeight = canvasService.canvas.height || 0;
+  if (canvasWidth <= 0 || canvasHeight <= 0) return null;
+
+  const { widthMm: cutWidthMm, heightMm: cutHeightMm } = getCutSizeMm(size);
+  const viewWidthMm = Math.max(size.actualWidthMm, cutWidthMm);
+  const viewHeightMm = Math.max(size.actualHeightMm, cutHeightMm);
+  if (
+    !Number.isFinite(viewWidthMm) ||
+    !Number.isFinite(viewHeightMm) ||
+    viewWidthMm <= 0 ||
+    viewHeightMm <= 0
+  ) {
+    return null;
+  }
+
+  const paddingPx = resolvePaddingPx(size.viewPadding, canvasWidth, canvasHeight);
+  canvasService.viewport.updateContainer(canvasWidth, canvasHeight);
+  canvasService.viewport.setPadding(paddingPx);
+  canvasService.viewport.updatePhysical(viewWidthMm, viewHeightMm);
+
+  const layout = canvasService.viewport.layout;
+  if (
+    !Number.isFinite(layout.scale) ||
+    !Number.isFinite(layout.offsetX) ||
+    !Number.isFinite(layout.offsetY) ||
+    layout.scale <= 0
+  ) {
+    return null;
+  }
+
+  const centerX = layout.offsetX + layout.width / 2;
+  const centerY = layout.offsetY + layout.height / 2;
+  const trimWidthPx = size.actualWidthMm * layout.scale;
+  const trimHeightPx = size.actualHeightMm * layout.scale;
+  const cutWidthPx = cutWidthMm * layout.scale;
+  const cutHeightPx = cutHeightMm * layout.scale;
+
+  const trimRect = rectByCenter(centerX, centerY, trimWidthPx, trimHeightPx);
+  const cutRect = rectByCenter(centerX, centerY, cutWidthPx, cutHeightPx);
+  const bleedRect = rectByCenter(
+    centerX,
+    centerY,
+    Math.max(trimWidthPx, cutWidthPx),
+    Math.max(trimHeightPx, cutHeightPx),
+  );
+
+  return {
+    scale: layout.scale,
+    canvasWidth,
+    canvasHeight,
+    trimRect,
+    cutRect,
+    bleedRect,
+    trimWidthMm: size.actualWidthMm,
+    trimHeightMm: size.actualHeightMm,
+    cutWidthMm,
+    cutHeightMm,
+    cutMode: size.cutMode,
+    cutMarginMm: size.cutMarginMm,
+  };
+}
+
+export function buildSceneGeometry(
+  configService: ConfigurationService,
+  layout: SceneLayoutSnapshot,
+): SceneGeometrySnapshot {
+  const radiusMm = parseLengthToMm(configService.get("dieline.radius", 0), "mm");
+  const offset = (layout.cutRect.width - layout.trimRect.width) / 2;
+
+  return {
+    shape: configService.get("dieline.shape", "rect"),
+    unit: "mm",
+    displayUnit: normalizeUnit(configService.get("size.unit", "mm")),
+    x: layout.trimRect.centerX,
+    y: layout.trimRect.centerY,
+    width: layout.trimRect.width,
+    height: layout.trimRect.height,
+    radius: radiusMm * layout.scale,
+    offset,
+    scale: layout.scale,
+    pathData: configService.get("dieline.pathData"),
+  };
+}

package/src/sceneVisibility.ts

@@ -0,0 +1,49 @@
+import { Extension, ExtensionContext } from "@pooder/core";
+import CanvasService from "./CanvasService";
+
+export class SceneVisibilityService implements Extension {
+  id = "pooder.kit.sceneVisibility";
+
+  metadata = {
+    name: "SceneVisibilityService",
+  };
+
+  private canvasService?: CanvasService;
+  private activeToolId: string | null = null;
+
+  activate(context: ExtensionContext) {
+    this.canvasService = context.services.get<CanvasService>("CanvasService");
+    context.eventBus.on("tool:activated", this.onToolActivated);
+    context.eventBus.on("object:added", this.onObjectAdded);
+  }
+
+  deactivate(context: ExtensionContext) {
+    context.eventBus.off("tool:activated", this.onToolActivated);
+    context.eventBus.off("object:added", this.onObjectAdded);
+    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 =
+        this.activeToolId !== "pooder.kit.image" &&
+        this.activeToolId !== "pooder.kit.white-ink";
+      (dielineLayer as any).set({ visible });
+    }
+
+    this.canvasService.requestRenderAll();
+  }
+}