@pooder/kit 6.2.0 → 6.2.2

package/src/extensions/image/sessionOverlay.ts

@@ -0,0 +1,206 @@
+import type { Pattern } from "fabric";
+import type { RenderObjectSpec } from "../../services";
+import type {
+  SceneGeometrySnapshot,
+  SceneLayoutSnapshot,
+  SceneRect,
+} from "../../shared/scene/sceneLayoutModel";
+import { generateDielinePath } from "../geometry";
+
+export interface ImageSessionOverlayVisualConfig {
+  strokeColor: string;
+  strokeWidth: number;
+  strokeStyle: "solid" | "dashed" | "hidden";
+  dashLength: number;
+  innerBackground: string;
+  outerBackground: string;
+}
+
+export interface ImageSessionOverlayViewport {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+interface BuiltinShapeOverlayPaths {
+  hatchPathData: string;
+  shapePathData: string;
+}
+
+const EPSILON = 0.0001;
+const SHAPE_OUTLINE_COLOR = "rgba(255, 0, 0, 0.9)";
+const DEFAULT_HATCH_FILL = "rgba(255, 0, 0, 0.22)";
+
+function buildRectPath(width: number, height: number): string {
+  return `M 0 0 L ${width} 0 L ${width} ${height} L 0 ${height} Z`;
+}
+
+function buildViewportMaskPath(
+  viewport: ImageSessionOverlayViewport,
+  cutRect: SceneRect,
+): string {
+  const cutLeft = cutRect.left - viewport.left;
+  const cutTop = cutRect.top - viewport.top;
+  return [
+    buildRectPath(viewport.width, viewport.height),
+    `M ${cutLeft} ${cutTop} L ${cutLeft + cutRect.width} ${cutTop} L ${
+      cutLeft + cutRect.width
+    } ${cutTop + cutRect.height} L ${cutLeft} ${cutTop + cutRect.height} Z`,
+  ].join(" ");
+}
+
+function resolveCutShapeRadiusPx(
+  geometry: SceneGeometrySnapshot,
+  cutRect: SceneRect,
+): number {
+  const visualRadius = Number.isFinite(geometry.radius)
+    ? Math.max(0, geometry.radius)
+    : 0;
+  const visualOffset = Number.isFinite(geometry.offset) ? geometry.offset : 0;
+  const rawCutRadius =
+    visualRadius === 0 ? 0 : Math.max(0, visualRadius + visualOffset);
+  const maxRadius = Math.max(0, Math.min(cutRect.width, cutRect.height) / 2);
+  return Math.max(0, Math.min(maxRadius, rawCutRadius));
+}
+
+function buildBuiltinShapeOverlayPaths(
+  cutRect: SceneRect,
+  geometry: SceneGeometrySnapshot | null,
+): BuiltinShapeOverlayPaths | null {
+  if (!geometry || geometry.shape === "custom") {
+    return null;
+  }
+
+  const radius = resolveCutShapeRadiusPx(geometry, cutRect);
+  if (geometry.shape === "rect" && radius <= EPSILON) {
+    return null;
+  }
+
+  const shapePathData = generateDielinePath({
+    shape: geometry.shape,
+    shapeStyle: geometry.shapeStyle,
+    width: Math.max(1, cutRect.width),
+    height: Math.max(1, cutRect.height),
+    radius,
+    x: cutRect.width / 2,
+    y: cutRect.height / 2,
+    features: [],
+    canvasWidth: Math.max(1, cutRect.width),
+    canvasHeight: Math.max(1, cutRect.height),
+  });
+  if (!shapePathData) {
+    return null;
+  }
+
+  return {
+    shapePathData,
+    hatchPathData: `${buildRectPath(cutRect.width, cutRect.height)} ${shapePathData}`,
+  };
+}
+
+export function buildImageSessionOverlaySpecs(args: {
+  viewport: ImageSessionOverlayViewport;
+  layout: SceneLayoutSnapshot;
+  geometry: SceneGeometrySnapshot | null;
+  visual: ImageSessionOverlayVisualConfig;
+  hatchPattern?: Pattern;
+}): RenderObjectSpec[] {
+  const { viewport, layout, geometry, visual, hatchPattern } = args;
+  const cutRect = layout.cutRect;
+  const specs: RenderObjectSpec[] = [];
+
+  specs.push({
+    id: "image.cropMask.rect",
+    type: "path",
+    space: "screen",
+    data: { id: "image.cropMask.rect", zIndex: 1 },
+    props: {
+      pathData: buildViewportMaskPath(viewport, cutRect),
+      left: viewport.left,
+      top: viewport.top,
+      originX: "left",
+      originY: "top",
+      fill: visual.outerBackground,
+      stroke: null,
+      fillRule: "evenodd",
+      selectable: false,
+      evented: false,
+      excludeFromExport: true,
+      objectCaching: false,
+    },
+  });
+
+  const shapeOverlay = buildBuiltinShapeOverlayPaths(cutRect, geometry);
+  if (shapeOverlay) {
+    specs.push({
+      id: "image.cropShapeHatch",
+      type: "path",
+      space: "screen",
+      data: { id: "image.cropShapeHatch", zIndex: 5 },
+      props: {
+        pathData: shapeOverlay.hatchPathData,
+        left: cutRect.left,
+        top: cutRect.top,
+        originX: "left",
+        originY: "top",
+        fill: hatchPattern || DEFAULT_HATCH_FILL,
+        opacity: hatchPattern ? 1 : 0.8,
+        stroke: null,
+        fillRule: "evenodd",
+        selectable: false,
+        evented: false,
+        excludeFromExport: true,
+        objectCaching: false,
+      },
+    });
+    specs.push({
+      id: "image.cropShapeOutline",
+      type: "path",
+      space: "screen",
+      data: { id: "image.cropShapeOutline", zIndex: 6 },
+      props: {
+        pathData: shapeOverlay.shapePathData,
+        left: cutRect.left,
+        top: cutRect.top,
+        originX: "left",
+        originY: "top",
+        fill: "transparent",
+        stroke: SHAPE_OUTLINE_COLOR,
+        strokeWidth: 1,
+        selectable: false,
+        evented: false,
+        excludeFromExport: true,
+        objectCaching: false,
+      },
+    });
+  }
+
+  specs.push({
+    id: "image.cropFrame",
+    type: "rect",
+    space: "screen",
+    data: { id: "image.cropFrame", zIndex: 7 },
+    props: {
+      left: cutRect.left,
+      top: cutRect.top,
+      width: cutRect.width,
+      height: cutRect.height,
+      originX: "left",
+      originY: "top",
+      fill: visual.innerBackground,
+      stroke:
+        visual.strokeStyle === "hidden" ? "rgba(0,0,0,0)" : visual.strokeColor,
+      strokeWidth: visual.strokeStyle === "hidden" ? 0 : visual.strokeWidth,
+      strokeDashArray:
+        visual.strokeStyle === "dashed"
+          ? [visual.dashLength, visual.dashLength]
+          : undefined,
+      selectable: false,
+      evented: false,
+      excludeFromExport: true,
+    },
+  });
+
+  return specs;
+}

package/src/extensions/ruler/RulerTool.ts

@@ -20,11 +20,12 @@ const MIN_ARROW_SIZE = 4;
 const THICKNESS_TO_STROKE_WIDTH_RATIO = 20;
 
 const DEFAULT_THICKNESS = 20;
-const DEFAULT_GAP = 45;
+const DEFAULT_GAP = 65;
 const DEFAULT_FONT_SIZE = 10;
 const DEFAULT_BACKGROUND_COLOR = "#f0f0f0";
 const DEFAULT_TEXT_COLOR = "#333333";
 const DEFAULT_LINE_COLOR = "#999999";
+const RULER_DEBUG_KEY = "ruler.debug";
 
 const RULER_THICKNESS_MIN = 10;
 const RULER_THICKNESS_MAX = 100;
@@ -48,6 +49,7 @@ export class RulerTool implements Extension {
   private textColor = DEFAULT_TEXT_COLOR;
   private lineColor = DEFAULT_LINE_COLOR;
   private fontSize = DEFAULT_FONT_SIZE;
+  private debugEnabled = false;
   private renderSeq = 0;
   private readonly numericProps = new Set(["thickness", "gap", "fontSize"]);
   private specs: RenderObjectSpec[] = [];
@@ -112,7 +114,14 @@ export class RulerTool implements Extension {
       this.syncConfig(configService);
       configService.onAnyChange((e: { key: string; value: any }) => {
         let shouldUpdate = false;
-        if (e.key.startsWith("ruler.")) {
+        if (e.key === RULER_DEBUG_KEY) {
+          this.debugEnabled = e.value === true;
+          this.log("config:update", {
+            key: e.key,
+            raw: e.value,
+            normalized: this.debugEnabled,
+          });
+        } else if (e.key.startsWith("ruler.")) {
           const prop = e.key.split(".")[1];
           if (prop && prop in this) {
             if (this.numericProps.has(prop)) {
@@ -203,6 +212,12 @@ export class RulerTool implements Extension {
           max: RULER_FONT_SIZE_MAX,
           default: DEFAULT_FONT_SIZE,
         },
+        {
+          id: RULER_DEBUG_KEY,
+          type: "boolean",
+          label: "Ruler Debug Log",
+          default: false,
+        },
       ] as ConfigurationContribution[],
       [ContributionPointIds.COMMANDS]: [
         {
@@ -249,7 +264,12 @@ export class RulerTool implements Extension {
     };
   }
 
+  private isDebugEnabled(): boolean {
+    return this.debugEnabled;
+  }
+
   private log(step: string, payload?: Record<string, unknown>) {
+    if (!this.isDebugEnabled()) return;
     if (payload) {
       console.debug(`[RulerTool] ${step}`, payload);
       return;
@@ -279,6 +299,8 @@ export class RulerTool implements Extension {
       configService.get("ruler.fontSize", this.fontSize),
       DEFAULT_FONT_SIZE,
     );
+    this.debugEnabled =
+      configService.get(RULER_DEBUG_KEY, this.debugEnabled) === true;
 
     this.log("config:loaded", {
       thickness: this.thickness,

package/tests/run.ts

@@ -21,6 +21,10 @@ 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";
+import {
+  normalizePointInGeometry,
+  resolveFeaturePosition,
+} from "../src/extensions/featureCoordinates";
 
 function assert(condition: unknown, message: string) {
   if (!condition) throw new Error(message);
@@ -120,6 +124,38 @@ function testEdgeScale() {
   assert(height === 80, `expected height 80, got ${height}`);
 }
 
+function testFeaturePlacementProjection() {
+  const trimGeometry = {
+    x: 100,
+    y: 120,
+    width: 120,
+    height: 180,
+  };
+  const cutGeometry = {
+    x: 100,
+    y: 120,
+    width: 150,
+    height: 210,
+  };
+  const trimFeature = {
+    x: 0.82,
+    y: 0.68,
+  };
+
+  const trimCenter = resolveFeaturePosition(trimFeature, trimGeometry);
+  const cutFeature = normalizePointInGeometry(trimCenter, cutGeometry);
+  const cutCenter = resolveFeaturePosition(cutFeature, cutGeometry);
+
+  assert(
+    Math.abs(trimCenter.x - cutCenter.x) < 1e-6,
+    `expected projected feature x to stay fixed, got ${trimCenter.x} vs ${cutCenter.x}`,
+  );
+  assert(
+    Math.abs(trimCenter.y - cutCenter.y) < 1e-6,
+    `expected projected feature y to stay fixed, got ${trimCenter.y} vs ${cutCenter.y}`,
+  );
+}
+
 function testVisibilityDsl() {
   const layers = new Map([
     ["ruler-overlay", { exists: true, objectCount: 2 }],
@@ -396,6 +432,7 @@ function main() {
   testBridgeSelection();
   testMaskOps();
   testEdgeScale();
+  testFeaturePlacementProjection();
   testVisibilityDsl();
   testContributionCompatibility();
   console.log("ok");