@pooder/kit 6.1.1 → 6.2.0

package/src/extensions/feature/FeatureTool.ts

@@ -6,17 +6,31 @@ import {
   ConfigurationService,
   ToolSessionService,
 } from "@pooder/core";
-import { CanvasService, RenderObjectSpec } from "../../services";
+import { Pattern } from "fabric";
+import {
+  CanvasService,
+  RenderEffectSpec,
+  RenderObjectSpec,
+  RenderPassSpec,
+} from "../../services";
 import { resolveFeaturePosition } from "../geometry";
 import { ConstraintRegistry, ConstraintFeature } from "../constraints";
 import { completeFeaturesStrict } from "../featureComplete";
 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 ||