@pooder/kit 6.0.1 → 6.1.1

package/src/shared/scene/sceneLayoutModel.ts

@@ -0,0 +1,367 @@
+import type { ConfigurationService } from "@pooder/core";
+import type { CanvasService } from "../../services";
+import { Coordinate, Unit } from "../../coordinate";
+import { parseLengthToMm } from "../../units";
+import {
+  DEFAULT_DIELINE_SHAPE,
+  DEFAULT_DIELINE_SHAPE_STYLE,
+  normalizeShapeStyle,
+  normalizeDielineShape,
+} from "../../extensions/dielineShape";
+import type {
+  DielineShape,
+  DielineShapeStyle,
+} from "../../extensions/dielineShape";
+
+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: DielineShape;
+  shapeStyle: DielineShapeStyle;
+  unit: "px";
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  radius: number;
+  offset: number;
+  scale: number;
+  pathData?: string;
+  customSourceWidthPx?: number;
+  customSourceHeightPx?: number;
+}
+
+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;
+  const sourceWidth = Number(configService.get("dieline.customSourceWidthPx", 0));
+  const sourceHeight = Number(
+    configService.get("dieline.customSourceHeightPx", 0),
+  );
+  const shapeStyle = normalizeShapeStyle(
+    configService.get("dieline.shapeStyle", DEFAULT_DIELINE_SHAPE_STYLE),
+  );
+
+  return {
+    shape: normalizeDielineShape(
+      configService.get("dieline.shape", DEFAULT_DIELINE_SHAPE),
+    ),
+    shapeStyle,
+    unit: "px",
+    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"),
+    customSourceWidthPx:
+      Number.isFinite(sourceWidth) && sourceWidth > 0 ? sourceWidth : undefined,
+    customSourceHeightPx:
+      Number.isFinite(sourceHeight) && sourceHeight > 0 ? sourceHeight : undefined,
+  };
+}

package/tests/run.ts

@@ -15,6 +15,12 @@ import {
 } from "../src/extensions/maskOps";
 import { computeDetectEdgeSize } from "../src/extensions/edgeScale";
 import { evaluateVisibilityExpr } from "../src/services/visibility";
+import { createImageCommands } from "../src/extensions/image/commands";
+import { createImageConfigurations } from "../src/extensions/image/config";
+import { createWhiteInkCommands } from "../src/extensions/white-ink/commands";
+import { createWhiteInkConfigurations } from "../src/extensions/white-ink/config";
+import { createDielineCommands } from "../src/extensions/dieline/commands";
+import { createDielineConfigurations } from "../src/extensions/dieline/config";
 
 function assert(condition: unknown, message: string) {
   if (!condition) throw new Error(message);
@@ -246,12 +252,152 @@ function testVisibilityDsl() {
   );
 }
 
+function testContributionCompatibility() {
+  const imageCommandNames = createImageCommands({} as any).map(
+    (entry) => entry.command,
+  );
+  const whiteInkCommandNames = createWhiteInkCommands({} as any).map(
+    (entry) => entry.command,
+  );
+  const dielineCommandNames = createDielineCommands({} as any, {
+    width: 0,
+    height: 0,
+  }).map((entry) => entry.command);
+
+  const expectedImageCommands = [
+    "addImage",
+    "upsertImage",
+    "getWorkingImages",
+    "setWorkingImage",
+    "resetWorkingImages",
+    "completeImages",
+    "exportUserCroppedImage",
+    "fitImageToArea",
+    "fitImageToDefaultArea",
+    "focusImage",
+    "removeImage",
+    "updateImage",
+    "clearImages",
+    "bringToFront",
+    "sendToBack",
+  ];
+  const expectedWhiteInkCommands = [
+    "addWhiteInk",
+    "upsertWhiteInk",
+    "getWhiteInks",
+    "getWhiteInkSettings",
+    "setWhiteInkPrintEnabled",
+    "setWhiteInkPreviewImageVisible",
+    "getWorkingWhiteInks",
+    "setWorkingWhiteInk",
+    "updateWhiteInk",
+    "removeWhiteInk",
+    "clearWhiteInks",
+    "resetWorkingWhiteInks",
+    "completeWhiteInks",
+    "setWhiteInkImage",
+  ];
+  const expectedDielineCommands = [
+    "updateFeaturePosition",
+    "exportCutImage",
+    "detectEdge",
+  ];
+
+  assert(
+    JSON.stringify(imageCommandNames) === JSON.stringify(expectedImageCommands),
+    `image command set changed: ${JSON.stringify(imageCommandNames)}`,
+  );
+  assert(
+    JSON.stringify(whiteInkCommandNames) ===
+      JSON.stringify(expectedWhiteInkCommands),
+    `white-ink command set changed: ${JSON.stringify(whiteInkCommandNames)}`,
+  );
+  assert(
+    JSON.stringify(dielineCommandNames) ===
+      JSON.stringify(expectedDielineCommands),
+    `dieline command set changed: ${JSON.stringify(dielineCommandNames)}`,
+  );
+
+  const imageConfigKeys = createImageConfigurations().map((entry) => entry.id);
+  const whiteInkConfigKeys = createWhiteInkConfigurations().map(
+    (entry) => entry.id,
+  );
+  const dielineConfigKeys = createDielineConfigurations({
+    shape: "rect",
+    radius: 0,
+    shapeStyle: {},
+    showBleedLines: true,
+    mainLine: { width: 1, color: "#000", dashLength: 1, style: "solid" },
+    offsetLine: { width: 1, color: "#000", dashLength: 1, style: "solid" },
+    insideColor: "#000",
+    features: [],
+  }).map((entry) => entry.id);
+
+  const expectedImageConfigKeys = [
+    "image.items",
+    "image.debug",
+    "image.control.cornerSize",
+    "image.control.touchCornerSize",
+    "image.control.cornerStyle",
+    "image.control.cornerColor",
+    "image.control.cornerStrokeColor",
+    "image.control.transparentCorners",
+    "image.control.borderColor",
+    "image.control.borderScaleFactor",
+    "image.control.padding",
+    "image.frame.strokeColor",
+    "image.frame.strokeWidth",
+    "image.frame.strokeStyle",
+    "image.frame.dashLength",
+    "image.frame.innerBackground",
+    "image.frame.outerBackground",
+  ];
+  const expectedWhiteInkConfigKeys = [
+    "whiteInk.items",
+    "whiteInk.printWithWhiteInk",
+    "whiteInk.previewImageVisible",
+    "whiteInk.debug",
+  ];
+  const expectedDielineConfigKeys = [
+    "dieline.shape",
+    "dieline.radius",
+    "dieline.shapeStyle",
+    "dieline.showBleedLines",
+    "dieline.strokeWidth",
+    "dieline.strokeColor",
+    "dieline.dashLength",
+    "dieline.style",
+    "dieline.offsetStrokeWidth",
+    "dieline.offsetStrokeColor",
+    "dieline.offsetDashLength",
+    "dieline.offsetStyle",
+    "dieline.insideColor",
+    "dieline.features",
+  ];
+
+  assert(
+    JSON.stringify(imageConfigKeys) === JSON.stringify(expectedImageConfigKeys),
+    `image config keys changed: ${JSON.stringify(imageConfigKeys)}`,
+  );
+  assert(
+    JSON.stringify(whiteInkConfigKeys) ===
+      JSON.stringify(expectedWhiteInkConfigKeys),
+    `white-ink config keys changed: ${JSON.stringify(whiteInkConfigKeys)}`,
+  );
+  assert(
+    JSON.stringify(dielineConfigKeys) ===
+      JSON.stringify(expectedDielineConfigKeys),
+    `dieline config keys changed: ${JSON.stringify(dielineConfigKeys)}`,
+  );
+}
+
 function main() {
   testWrappedOffsets();
   testBridgeSelection();
   testMaskOps();
   testEdgeScale();
   testVisibilityDsl();
+  testContributionCompatibility();
   console.log("ok");
 }