@pooder/kit 6.1.2 → 6.2.1

package/src/extensions/feature/FeatureTool.ts

@@ -6,17 +6,31 @@ import {
   ConfigurationService,
   ToolSessionService,
 } from "@pooder/core";
-import { CanvasService, RenderObjectSpec } from "../../services";
-import { resolveFeaturePosition } from "../geometry";
+import { Pattern } from "fabric";
+import {
+  CanvasService,
+  RenderEffectSpec,
+  RenderObjectSpec,
+  RenderPassSpec,
+} from "../../services";
 import { ConstraintRegistry, ConstraintFeature } from "../constraints";
 import { completeFeaturesStrict } from "../featureComplete";
+import { resolveFeaturePlacements } from "../featurePlacement";
 import {
+  computeSceneLayout,
   readSizeState,
   type SceneGeometrySnapshot as DielineGeometry,
 } from "../../shared/scene/sceneLayoutModel";
-import { FEATURE_OVERLAY_LAYER_ID } from "../../shared/constants/layers";
+import {
+  DIELINE_LAYER_ID,
+  FEATURE_DIELINE_LAYER_ID,
+  FEATURE_OVERLAY_LAYER_ID,
+  IMAGE_OBJECT_LAYER_ID,
+} from "../../shared/constants/layers";
 import { SubscriptionBag } from "../../shared/runtime/subscriptions";
 import { cloneWithJson } from "../../shared/runtime/sessionState";
+import { buildDielineRenderBundle } from "../dieline/renderBuilder";
+import { readDielineState } from "../dieline/model";
 const FEATURE_STROKE_WIDTH = 2;
 const DEFAULT_RECT_SIZE = 10;
 const DEFAULT_CIRCLE_RADIUS = 5;
@@ -68,7 +82,9 @@ export class FeatureTool implements Extension {
   private hasWorkingChanges = false;
   private dirtyTrackerDisposable?: { dispose(): void };
   private renderProducerDisposable?: { dispose: () => void };
-  private specs: RenderObjectSpec[] = [];
+  private markerSpecs: RenderObjectSpec[] = [];
+  private sessionDielineSpecs: RenderObjectSpec[] = [];
+  private sessionDielineEffects: RenderEffectSpec[] = [];
   private renderSeq = 0;
   private readonly subscriptions = new SubscriptionBag();
 
@@ -103,16 +119,38 @@ export class FeatureTool implements Extension {
     this.renderProducerDisposable?.dispose();
     this.renderProducerDisposable = this.canvasService.registerRenderProducer(
       this.id,
-      () => ({
-        passes: [
+      () => {
+        const passes: RenderPassSpec[] = [
           {
             id: FEATURE_OVERLAY_LAYER_ID,
             stack: 880,
             order: 0,
-            objects: this.specs,
+            replace: true,
+            objects: this.markerSpecs,
           },
-        ],
-      }),
+        ];
+        if (this.isSessionVisible()) {
+          passes.push(
+            {
+              id: DIELINE_LAYER_ID,
+              stack: 700,
+              order: 0,
+              replace: false,
+              visibility: { op: "const", value: false },
+              objects: [],
+            },
+            {
+              id: FEATURE_DIELINE_LAYER_ID,
+              stack: 705,
+              order: 0,
+              replace: true,
+              effects: this.sessionDielineEffects,
+              objects: this.sessionDielineSpecs,
+            },
+          );
+        }
+        return { passes };
+      },
       { priority: 350 },
     );
 
@@ -131,12 +169,23 @@ export class FeatureTool implements Extension {
           if (this.isUpdatingConfig) return;
 
           if (e.key === "dieline.features") {
-            if (this.isFeatureSessionActive) return;
+            if (this.isFeatureSessionActive && this.hasFeatureSessionDraft()) {
+              return;
+            }
+            if (this.hasFeatureSessionDraft()) {
+              this.clearFeatureSessionState();
+            }
             const next = (e.value || []) as ConstraintFeature[];
             this.workingFeatures = this.cloneFeatures(next);
             this.hasWorkingChanges = false;
             this.redraw();
             this.emitWorkingChange();
+            return;
+          }
+
+          if (e.key.startsWith("size.") || e.key.startsWith("dieline.")) {
+            void this.refreshGeometry();
+            this.redraw({ enforceConstraints: true });
           }
         },
       );
@@ -156,7 +205,8 @@ export class FeatureTool implements Extension {
 
   deactivate(context: ExtensionContext) {
     this.subscriptions.disposeAll();
-    this.restoreSessionFeaturesToConfig();
+    this.restoreCommittedFeaturesToConfig();
+    this.clearFeatureSessionState();
     this.dirtyTrackerDisposable?.dispose();
     this.dirtyTrackerDisposable = undefined;
     this.teardown();
@@ -167,7 +217,7 @@ export class FeatureTool implements Extension {
   private onToolActivated = (event: { id: string | null }) => {
     this.isToolActive = event.id === this.id;
     if (!this.isToolActive) {
-      this.restoreSessionFeaturesToConfig();
+      this.suspendFeatureSession();
     }
     this.updateVisibility();
   };
@@ -176,6 +226,10 @@ export class FeatureTool implements Extension {
     this.redraw();
   }
 
+  private isSessionVisible(): boolean {
+    return this.isToolActive && this.isFeatureSessionActive;
+  }
+
   contribute() {
     return {
       [ContributionPointIds.TOOLS]: [
@@ -202,15 +256,16 @@ export class FeatureTool implements Extension {
             if (this.isFeatureSessionActive) {
               return { ok: true };
             }
-            const original = this.getCommittedFeatures();
-            this.sessionOriginalFeatures = this.cloneFeatures(original);
+            if (!this.hasFeatureSessionDraft()) {
+              const original = this.getCommittedFeatures();
+              this.sessionOriginalFeatures = this.cloneFeatures(original);
+              this.setWorkingFeatures(this.cloneFeatures(original));
+              this.hasWorkingChanges = false;
+            }
             this.isFeatureSessionActive = true;
             await this.refreshGeometry();
-            this.setWorkingFeatures(this.cloneFeatures(original));
-            this.hasWorkingChanges = false;
             this.redraw();
             this.emitWorkingChange();
-            this.updateCommittedFeatures([]);
             return { ok: true };
           },
         },
@@ -246,25 +301,6 @@ export class FeatureTool implements Extension {
             return true;
           },
         },
-        {
-          command: "getWorkingFeatures",
-          title: "Get Working Features",
-          handler: () => {
-            return this.cloneFeatures(this.workingFeatures);
-          },
-        },
-        {
-          command: "setWorkingFeatures",
-          title: "Set Working Features",
-          handler: async (features: ConstraintFeature[]) => {
-            await this.refreshGeometry();
-            this.setWorkingFeatures(this.cloneFeatures(features || []));
-            this.hasWorkingChanges = true;
-            this.redraw();
-            this.emitWorkingChange();
-            return { ok: true };
-          },
-        },
         {
           command: "rollbackFeatureSession",
           title: "Rollback Feature Session",
@@ -336,18 +372,27 @@ export class FeatureTool implements Extension {
     }
   }
 
+  private hasFeatureSessionDraft(): boolean {
+    return Array.isArray(this.sessionOriginalFeatures);
+  }
+
   private clearFeatureSessionState() {
     this.isFeatureSessionActive = false;
     this.sessionOriginalFeatures = null;
   }
 
-  private restoreSessionFeaturesToConfig() {
-    if (!this.isFeatureSessionActive) return;
+  private restoreCommittedFeaturesToConfig() {
+    if (!this.hasFeatureSessionDraft()) return;
     const original = this.cloneFeatures(
       this.sessionOriginalFeatures || this.getCommittedFeatures(),
     );
     this.updateCommittedFeatures(original);
-    this.clearFeatureSessionState();
+  }
+
+  private suspendFeatureSession() {
+    if (!this.isFeatureSessionActive) return;
+    this.restoreCommittedFeaturesToConfig();
+    this.isFeatureSessionActive = false;
   }
 
   private emitWorkingChange() {
@@ -370,9 +415,7 @@ export class FeatureTool implements Extension {
 
   private async resetWorkingFeaturesFromSource() {
     const next = this.cloneFeatures(
-      this.isFeatureSessionActive && this.sessionOriginalFeatures
-        ? this.sessionOriginalFeatures
-        : this.getCommittedFeatures(),
+      this.sessionOriginalFeatures || this.getCommittedFeatures(),
     );
     await this.refreshGeometry();
     this.setWorkingFeatures(next);
@@ -636,12 +679,37 @@ export class FeatureTool implements Extension {
     }
 
     this.renderSeq += 1;
-    this.specs = [];
+    this.markerSpecs = [];
+    this.sessionDielineSpecs = [];
+    this.sessionDielineEffects = [];
     this.renderProducerDisposable?.dispose();
     this.renderProducerDisposable = undefined;
     void this.canvasService.flushRenderFromProducers();
   }
 
+  private createHatchPattern(color: string = "rgba(0, 0, 0, 0.3)") {
+    if (typeof document === "undefined") {
+      return undefined;
+    }
+    const size = 20;
+    const canvas = document.createElement("canvas");
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext("2d");
+    if (ctx) {
+      ctx.clearRect(0, 0, size, size);
+      ctx.strokeStyle = color;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.moveTo(0, size);
+      ctx.lineTo(size, 0);
+      ctx.stroke();
+    }
+    return new Pattern({
+      source: canvas,
+    } as any);
+  }
+
   private getDraggableMarkerTarget(target: any): any | null {
     if (!this.isFeatureSessionActive || !this.isToolActive) return null;
     if (!target || target.data?.type !== "feature-marker") return null;
@@ -737,6 +805,7 @@ export class FeatureTool implements Extension {
     next[index] = updatedFeature;
     this.setWorkingFeatures(next);
     this.hasWorkingChanges = true;
+    this.redraw();
     this.emitWorkingChange();
   }
 
@@ -780,6 +849,7 @@ export class FeatureTool implements Extension {
     if (!changed) return;
     this.setWorkingFeatures(next);
     this.hasWorkingChanges = true;
+    this.redraw();
     this.emitWorkingChange();
   }
 
@@ -791,7 +861,10 @@ export class FeatureTool implements Extension {
     if (!this.canvasService) return;
 
     const seq = ++this.renderSeq;
-    this.specs = this.buildFeatureSpecs();
+    this.markerSpecs = this.buildMarkerSpecs();
+    const sessionRender = this.buildSessionDielineRender();
+    this.sessionDielineSpecs = sessionRender.specs;
+    this.sessionDielineEffects = sessionRender.effects;
     if (seq !== this.renderSeq) return;
 
     await this.canvasService.flushRenderFromProducers();
@@ -801,7 +874,57 @@ export class FeatureTool implements Extension {
     }
   }
 
-  private buildFeatureSpecs(): RenderObjectSpec[] {
+  private buildSessionDielineRender(): {
+    specs: RenderObjectSpec[];
+    effects: RenderEffectSpec[];
+  } {
+    if (!this.isSessionVisible() || !this.canvasService) {
+      return { specs: [], effects: [] };
+    }
+    const configService = this.getConfigService();
+    if (!configService) {
+      return { specs: [], effects: [] };
+    }
+    const sceneLayout = computeSceneLayout(
+      this.canvasService,
+      readSizeState(configService),
+    );
+    if (!sceneLayout) {
+      return { specs: [], effects: [] };
+    }
+
+    const state = readDielineState(configService);
+    state.features = this.cloneFeatures(this.workingFeatures);
+
+    return buildDielineRenderBundle({
+      state,
+      sceneLayout,
+      canvasWidth: sceneLayout.canvasWidth || this.canvasService.canvas.width || 800,
+      canvasHeight:
+        sceneLayout.canvasHeight || this.canvasService.canvas.height || 600,
+      hasImages: this.hasImageItems(),
+      createHatchPattern: (color) => this.createHatchPattern(color),
+      clipTargetPassIds: [IMAGE_OBJECT_LAYER_ID],
+      clipVisibility: { op: "const", value: true },
+      ids: {
+        inside: "feature.session.dieline.inside",
+        bleedZone: "feature.session.dieline.bleed-zone",
+        offsetBorder: "feature.session.dieline.offset-border",
+        border: "feature.session.dieline.border",
+        clip: "feature.session.dieline.clip.image",
+        clipSource: "feature.session.dieline.effect.clip-path",
+      },
+    });
+  }
+
+  private hasImageItems(): boolean {
+    const configService = this.getConfigService();
+    if (!configService) return false;
+    const items = configService.get("image.items", []) as unknown;
+    return Array.isArray(items) && items.length > 0;
+  }
+
+  private buildMarkerSpecs(): RenderObjectSpec[] {
     if (
       !this.isFeatureSessionActive ||
       !this.currentGeometry ||
@@ -812,10 +935,30 @@ export class FeatureTool implements Extension {
 
     const groups = new Map<string, MarkerRenderState[]>();
     const singles: MarkerRenderState[] = [];
+    const placements = resolveFeaturePlacements(
+      this.workingFeatures,
+      {
+        shape: this.currentGeometry.shape,
+        shapeStyle: this.currentGeometry.shapeStyle,
+        pathData: this.currentGeometry.pathData,
+        customSourceWidthPx: this.currentGeometry.customSourceWidthPx,
+        customSourceHeightPx: this.currentGeometry.customSourceHeightPx,
+        x: this.currentGeometry.x,
+        y: this.currentGeometry.y,
+        width: this.currentGeometry.width,
+        height: this.currentGeometry.height,
+        radius: this.currentGeometry.radius,
+        scale: this.currentGeometry.scale || 1,
+      },
+    );
 
-    this.workingFeatures.forEach((feature, index) => {
+    placements.forEach((placement, index) => {
+      const feature = placement.feature;
       const geometry = this.getGeometryForFeature(this.currentGeometry!, feature);
-      const position = resolveFeaturePosition(feature, geometry);
+      const position = {
+        x: placement.centerX,
+        y: placement.centerY,
+      };
       const scale = geometry.scale || 1;
       const marker: MarkerRenderState = {
         feature,

package/src/extensions/featureCoordinates.ts

@@ -0,0 +1,35 @@
+import type { DielineFeature } from "./geometry";
+
+export interface FeatureCoordinateGeometry {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export function resolveFeaturePosition(
+  feature: Pick<DielineFeature, "x" | "y">,
+  geometry: FeatureCoordinateGeometry,
+): { x: number; y: number } {
+  const { x, y, width, height } = geometry;
+  const left = x - width / 2;
+  const top = y - height / 2;
+
+  return {
+    x: left + feature.x * width,
+    y: top + feature.y * height,
+  };
+}
+
+export function normalizePointInGeometry(
+  point: { x: number; y: number },
+  geometry: FeatureCoordinateGeometry,
+): { x: number; y: number } {
+  const left = geometry.x - geometry.width / 2;
+  const top = geometry.y - geometry.height / 2;
+
+  return {
+    x: geometry.width > 0 ? (point.x - left) / geometry.width : 0.5,
+    y: geometry.height > 0 ? (point.y - top) / geometry.height : 0.5,
+  };
+}

package/src/extensions/featurePlacement.ts

@@ -0,0 +1,118 @@
+import { ConstraintFeature, ConstraintRegistry } from "./constraints";
+import type { GeometryOptions } from "./geometry";
+import {
+  normalizePointInGeometry,
+  resolveFeaturePosition,
+} from "./featureCoordinates";
+
+export interface FeaturePlacementGeometry
+  extends Pick<
+    GeometryOptions,
+    | "shape"
+    | "shapeStyle"
+    | "pathData"
+    | "customSourceWidthPx"
+    | "customSourceHeightPx"
+    | "canvasWidth"
+    | "canvasHeight"
+  > {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  radius: number;
+  scale: number;
+}
+
+export interface FeatureProjectionGeometry {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface FeaturePlacement<TFeature extends ConstraintFeature = ConstraintFeature> {
+  feature: TFeature;
+  normalizedX: number;
+  normalizedY: number;
+  centerX: number;
+  centerY: number;
+}
+
+function scaleFeatureForRender<TFeature extends ConstraintFeature>(
+  feature: TFeature,
+  scale: number,
+  x: number,
+  y: number,
+): TFeature {
+  return {
+    ...feature,
+    x,
+    y,
+    width: feature.width !== undefined ? feature.width * scale : undefined,
+    height: feature.height !== undefined ? feature.height * scale : undefined,
+    radius: feature.radius !== undefined ? feature.radius * scale : undefined,
+  };
+}
+
+export function resolveFeaturePlacements<TFeature extends ConstraintFeature>(
+  features: TFeature[],
+  geometry: FeaturePlacementGeometry,
+): FeaturePlacement<TFeature>[] {
+  const dielineWidth =
+    geometry.scale > 0 ? geometry.width / geometry.scale : geometry.width;
+  const dielineHeight =
+    geometry.scale > 0 ? geometry.height / geometry.scale : geometry.height;
+
+  return (features || []).map((feature) => {
+    const activeConstraints = feature.constraints?.filter(
+      (constraint) => !constraint.validateOnly,
+    );
+    const constrained = ConstraintRegistry.apply(
+      feature.x,
+      feature.y,
+      feature,
+      {
+        dielineWidth,
+        dielineHeight,
+        geometry,
+      },
+      activeConstraints,
+    );
+    const center = resolveFeaturePosition(
+      {
+        ...feature,
+        x: constrained.x,
+        y: constrained.y,
+      },
+      geometry,
+    );
+
+    return {
+      feature,
+      normalizedX: constrained.x,
+      normalizedY: constrained.y,
+      centerX: center.x,
+      centerY: center.y,
+    };
+  });
+}
+
+export function projectPlacedFeatures<TFeature extends ConstraintFeature>(
+  placements: FeaturePlacement<TFeature>[],
+  geometry: FeatureProjectionGeometry,
+  scale: number,
+): TFeature[] {
+  return placements.map((placement) => {
+    const normalized = normalizePointInGeometry(
+      { x: placement.centerX, y: placement.centerY },
+      geometry,
+    );
+    return scaleFeatureForRender(
+      placement.feature,
+      scale,
+      normalized.x,
+      normalized.y,
+    );
+  });
+}