@pooder/kit 6.0.0 → 6.1.0

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",
+  };
+}

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,
+  };
+}