@pooder/kit 6.1.2 → 6.2.1

package/.test-dist/src/extensions/dieline/renderBuilder.js

@@ -0,0 +1,227 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildDielineRenderBundle = buildDielineRenderBundle;
+const geometry_1 = require("../geometry");
+const featurePlacement_1 = require("../featurePlacement");
+const layers_1 = require("../../shared/constants/layers");
+const DEFAULT_IDS = {
+    inside: "dieline.inside",
+    bleedZone: "dieline.bleed-zone",
+    offsetBorder: "dieline.offset-border",
+    border: "dieline.border",
+    clip: "dieline.clip.image",
+    clipSource: "dieline.effect.clip-path",
+};
+function buildDielineRenderBundle(options) {
+    const ids = { ...DEFAULT_IDS, ...(options.ids || {}) };
+    const { state, sceneLayout, canvasWidth, canvasHeight, hasImages, createHatchPattern, includeImageClipEffect = true, clipTargetPassIds = [layers_1.IMAGE_OBJECT_LAYER_ID], clipVisibility, } = options;
+    const { shape, shapeStyle, radius, mainLine, offsetLine, insideColor } = state;
+    const scale = sceneLayout.scale;
+    const cx = sceneLayout.trimRect.centerX;
+    const cy = sceneLayout.trimRect.centerY;
+    const visualWidth = sceneLayout.trimRect.width;
+    const visualHeight = sceneLayout.trimRect.height;
+    const visualRadius = radius * scale;
+    const cutW = sceneLayout.cutRect.width;
+    const cutH = sceneLayout.cutRect.height;
+    const visualOffset = (cutW - visualWidth) / 2;
+    const cutR = visualRadius === 0 ? 0 : Math.max(0, visualRadius + visualOffset);
+    const placements = (0, featurePlacement_1.resolveFeaturePlacements)(state.features || [], {
+        shape,
+        shapeStyle,
+        pathData: state.pathData,
+        customSourceWidthPx: state.customSourceWidthPx,
+        customSourceHeightPx: state.customSourceHeightPx,
+        canvasWidth,
+        canvasHeight,
+        x: cx,
+        y: cy,
+        width: visualWidth,
+        height: visualHeight,
+        radius: visualRadius,
+        scale,
+    });
+    const absoluteFeatures = (0, featurePlacement_1.projectPlacedFeatures)(placements, {
+        x: cx,
+        y: cy,
+        width: visualWidth,
+        height: visualHeight,
+    }, scale);
+    const cutFeatures = (0, featurePlacement_1.projectPlacedFeatures)(placements.filter((placement) => !placement.feature.skipCut), {
+        x: cx,
+        y: cy,
+        width: cutW,
+        height: cutH,
+    }, scale);
+    const common = {
+        shape,
+        shapeStyle,
+        pathData: state.pathData,
+        customSourceWidthPx: state.customSourceWidthPx,
+        customSourceHeightPx: state.customSourceHeightPx,
+        canvasWidth,
+        canvasHeight,
+    };
+    const specs = [];
+    if (insideColor &&
+        insideColor !== "transparent" &&
+        insideColor !== "rgba(0,0,0,0)" &&
+        !hasImages) {
+        specs.push({
+            id: ids.inside,
+            type: "path",
+            space: "screen",
+            data: { id: ids.inside, type: "dieline" },
+            props: {
+                pathData: (0, geometry_1.generateDielinePath)({
+                    ...common,
+                    width: cutW,
+                    height: cutH,
+                    radius: cutR,
+                    x: cx,
+                    y: cy,
+                    features: cutFeatures,
+                }),
+                fill: insideColor,
+                stroke: null,
+                selectable: false,
+                evented: false,
+                originX: "left",
+                originY: "top",
+            },
+        });
+    }
+    if (Math.abs(visualOffset) > 0.0001) {
+        const trimPathInput = {
+            ...common,
+            width: visualWidth,
+            height: visualHeight,
+            radius: visualRadius,
+            x: cx,
+            y: cy,
+            features: cutFeatures,
+        };
+        const cutPathInput = {
+            ...common,
+            width: cutW,
+            height: cutH,
+            radius: cutR,
+            x: cx,
+            y: cy,
+            features: cutFeatures,
+        };
+        if (state.showBleedLines !== false) {
+            const pattern = createHatchPattern?.(mainLine.color);
+            if (pattern) {
+                specs.push({
+                    id: ids.bleedZone,
+                    type: "path",
+                    space: "screen",
+                    data: { id: ids.bleedZone, type: "dieline" },
+                    props: {
+                        pathData: (0, geometry_1.generateBleedZonePath)(trimPathInput, cutPathInput, visualOffset),
+                        fill: pattern,
+                        stroke: null,
+                        selectable: false,
+                        evented: false,
+                        objectCaching: false,
+                        originX: "left",
+                        originY: "top",
+                    },
+                });
+            }
+        }
+        specs.push({
+            id: ids.offsetBorder,
+            type: "path",
+            space: "screen",
+            data: { id: ids.offsetBorder, type: "dieline" },
+            props: {
+                pathData: (0, geometry_1.generateDielinePath)(cutPathInput),
+                fill: null,
+                stroke: offsetLine.style === "hidden" ? null : offsetLine.color,
+                strokeWidth: offsetLine.width,
+                strokeDashArray: offsetLine.style === "dashed"
+                    ? [offsetLine.dashLength, offsetLine.dashLength]
+                    : undefined,
+                selectable: false,
+                evented: false,
+                originX: "left",
+                originY: "top",
+            },
+        });
+    }
+    specs.push({
+        id: ids.border,
+        type: "path",
+        space: "screen",
+        data: { id: ids.border, type: "dieline" },
+        props: {
+            pathData: (0, geometry_1.generateDielinePath)({
+                ...common,
+                width: visualWidth,
+                height: visualHeight,
+                radius: visualRadius,
+                x: cx,
+                y: cy,
+                features: absoluteFeatures,
+            }),
+            fill: "transparent",
+            stroke: mainLine.style === "hidden" ? null : mainLine.color,
+            strokeWidth: mainLine.width,
+            strokeDashArray: mainLine.style === "dashed"
+                ? [mainLine.dashLength, mainLine.dashLength]
+                : undefined,
+            selectable: false,
+            evented: false,
+            originX: "left",
+            originY: "top",
+        },
+    });
+    if (!includeImageClipEffect) {
+        return { specs, effects: [] };
+    }
+    const clipPathData = (0, geometry_1.generateDielinePath)({
+        ...common,
+        width: cutW,
+        height: cutH,
+        radius: cutR,
+        x: cx,
+        y: cy,
+        features: cutFeatures,
+    });
+    if (!clipPathData) {
+        return { specs, effects: [] };
+    }
+    return {
+        specs,
+        effects: [
+            {
+                type: "clipPath",
+                id: ids.clip,
+                visibility: clipVisibility,
+                targetPassIds: clipTargetPassIds,
+                source: {
+                    id: ids.clipSource,
+                    type: "path",
+                    space: "screen",
+                    data: {
+                        id: ids.clipSource,
+                        type: "dieline-effect",
+                        effect: "clipPath",
+                    },
+                    props: {
+                        pathData: clipPathData,
+                        fill: "#000000",
+                        stroke: null,
+                        originX: "left",
+                        originY: "top",
+                        selectable: false,
+                        evented: false,
+                        excludeFromExport: true,
+                    },
+                },
+            },
+        ],
+    };
+}

package/.test-dist/src/extensions/feature/FeatureTool.js

@@ -2,13 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FeatureTool = void 0;
 const core_1 = require("@pooder/core");
-const geometry_1 = require("../geometry");
+const fabric_1 = require("fabric");
 const constraints_1 = require("../constraints");
 const featureComplete_1 = require("../featureComplete");
+const featurePlacement_1 = require("../featurePlacement");
 const sceneLayoutModel_1 = require("../../shared/scene/sceneLayoutModel");
 const layers_1 = require("../../shared/constants/layers");
 const subscriptions_1 = require("../../shared/runtime/subscriptions");
 const sessionState_1 = require("../../shared/runtime/sessionState");
+const renderBuilder_1 = require("../dieline/renderBuilder");
+const model_1 = require("../dieline/model");
 const FEATURE_STROKE_WIDTH = 2;
 const DEFAULT_RECT_SIZE = 10;
 const DEFAULT_CIRCLE_RADIUS = 5;
@@ -24,7 +27,9 @@ class FeatureTool {
         this.isFeatureSessionActive = false;
         this.sessionOriginalFeatures = null;
         this.hasWorkingChanges = false;
-        this.specs = [];
+        this.markerSpecs = [];
+        this.sessionDielineSpecs = [];
+        this.sessionDielineEffects = [];
         this.renderSeq = 0;
         this.subscriptions = new subscriptions_1.SubscriptionBag();
         this.handleMoving = null;
@@ -34,7 +39,7 @@ class FeatureTool {
         this.onToolActivated = (event) => {
             this.isToolActive = event.id === this.id;
             if (!this.isToolActive) {
-                this.restoreSessionFeaturesToConfig();
+                this.suspendFeatureSession();
             }
             this.updateVisibility();
         };
@@ -51,16 +56,35 @@ class FeatureTool {
             return;
         }
         this.renderProducerDisposable?.dispose();
-        this.renderProducerDisposable = this.canvasService.registerRenderProducer(this.id, () => ({
-            passes: [
+        this.renderProducerDisposable = this.canvasService.registerRenderProducer(this.id, () => {
+            const passes = [
                 {
                     id: layers_1.FEATURE_OVERLAY_LAYER_ID,
                     stack: 880,
                     order: 0,
-                    objects: this.specs,
+                    replace: true,
+                    objects: this.markerSpecs,
                 },
-            ],
-        }), { priority: 350 });
+            ];
+            if (this.isSessionVisible()) {
+                passes.push({
+                    id: layers_1.DIELINE_LAYER_ID,
+                    stack: 700,
+                    order: 0,
+                    replace: false,
+                    visibility: { op: "const", value: false },
+                    objects: [],
+                }, {
+                    id: layers_1.FEATURE_DIELINE_LAYER_ID,
+                    stack: 705,
+                    order: 0,
+                    replace: true,
+                    effects: this.sessionDielineEffects,
+                    objects: this.sessionDielineSpecs,
+                });
+            }
+            return { passes };
+        }, { priority: 350 });
         const configService = context.services.get("ConfigurationService");
         if (configService) {
             const features = (configService.get("dieline.features", []) ||
@@ -71,13 +95,22 @@ class FeatureTool {
                 if (this.isUpdatingConfig)
                     return;
                 if (e.key === "dieline.features") {
-                    if (this.isFeatureSessionActive)
+                    if (this.isFeatureSessionActive && this.hasFeatureSessionDraft()) {
                         return;
+                    }
+                    if (this.hasFeatureSessionDraft()) {
+                        this.clearFeatureSessionState();
+                    }
                     const next = (e.value || []);
                     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 });
                 }
             });
         }
@@ -88,7 +121,8 @@ class FeatureTool {
     }
     deactivate(context) {
         this.subscriptions.disposeAll();
-        this.restoreSessionFeaturesToConfig();
+        this.restoreCommittedFeaturesToConfig();
+        this.clearFeatureSessionState();
         this.dirtyTrackerDisposable?.dispose();
         this.dirtyTrackerDisposable = undefined;
         this.teardown();
@@ -98,6 +132,9 @@ class FeatureTool {
     updateVisibility() {
         this.redraw();
     }
+    isSessionVisible() {
+        return this.isToolActive && this.isFeatureSessionActive;
+    }
     contribute() {
         return {
             [core_1.ContributionPointIds.TOOLS]: [
@@ -124,15 +161,16 @@ class FeatureTool {
                         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 };
                     },
                 },
@@ -168,25 +206,6 @@ class FeatureTool {
                         return true;
                     },
                 },
-                {
-                    command: "getWorkingFeatures",
-                    title: "Get Working Features",
-                    handler: () => {
-                        return this.cloneFeatures(this.workingFeatures);
-                    },
-                },
-                {
-                    command: "setWorkingFeatures",
-                    title: "Set Working Features",
-                    handler: async (features) => {
-                        await this.refreshGeometry();
-                        this.setWorkingFeatures(this.cloneFeatures(features || []));
-                        this.hasWorkingChanges = true;
-                        this.redraw();
-                        this.emitWorkingChange();
-                        return { ok: true };
-                    },
-                },
                 {
                     command: "rollbackFeatureSession",
                     title: "Rollback Feature Session",
@@ -251,16 +270,24 @@ class FeatureTool {
             this.isUpdatingConfig = false;
         }
     }
+    hasFeatureSessionDraft() {
+        return Array.isArray(this.sessionOriginalFeatures);
+    }
     clearFeatureSessionState() {
         this.isFeatureSessionActive = false;
         this.sessionOriginalFeatures = null;
     }
-    restoreSessionFeaturesToConfig() {
-        if (!this.isFeatureSessionActive)
+    restoreCommittedFeaturesToConfig() {
+        if (!this.hasFeatureSessionDraft())
             return;
         const original = this.cloneFeatures(this.sessionOriginalFeatures || this.getCommittedFeatures());
         this.updateCommittedFeatures(original);
-        this.clearFeatureSessionState();
+    }
+    suspendFeatureSession() {
+        if (!this.isFeatureSessionActive)
+            return;
+        this.restoreCommittedFeaturesToConfig();
+        this.isFeatureSessionActive = false;
     }
     emitWorkingChange() {
         this.context?.eventBus.emit("feature:working:change", {
@@ -281,9 +308,7 @@ class FeatureTool {
         catch (e) { }
     }
     async resetWorkingFeaturesFromSource() {
-        const next = this.cloneFeatures(this.isFeatureSessionActive && this.sessionOriginalFeatures
-            ? this.sessionOriginalFeatures
-            : this.getCommittedFeatures());
+        const next = this.cloneFeatures(this.sessionOriginalFeatures || this.getCommittedFeatures());
         await this.refreshGeometry();
         this.setWorkingFeatures(next);
         this.hasWorkingChanges = false;
@@ -493,11 +518,35 @@ class FeatureTool {
             this.handleSceneGeometryChange = null;
         }
         this.renderSeq += 1;
-        this.specs = [];
+        this.markerSpecs = [];
+        this.sessionDielineSpecs = [];
+        this.sessionDielineEffects = [];
         this.renderProducerDisposable?.dispose();
         this.renderProducerDisposable = undefined;
         void this.canvasService.flushRenderFromProducers();
     }
+    createHatchPattern(color = "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 fabric_1.Pattern({
+            source: canvas,
+        });
+    }
     getDraggableMarkerTarget(target) {
         if (!this.isFeatureSessionActive || !this.isToolActive)
             return null;
@@ -567,6 +616,7 @@ class FeatureTool {
         next[index] = updatedFeature;
         this.setWorkingFeatures(next);
         this.hasWorkingChanges = true;
+        this.redraw();
         this.emitWorkingChange();
     }
     syncGroupFromCanvas(target) {
@@ -605,6 +655,7 @@ class FeatureTool {
             return;
         this.setWorkingFeatures(next);
         this.hasWorkingChanges = true;
+        this.redraw();
         this.emitWorkingChange();
     }
     redraw(options = {}) {
@@ -614,7 +665,10 @@ class FeatureTool {
         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();
@@ -624,7 +678,47 @@ class FeatureTool {
             this.enforceConstraints();
         }
     }
-    buildFeatureSpecs() {
+    buildSessionDielineRender() {
+        if (!this.isSessionVisible() || !this.canvasService) {
+            return { specs: [], effects: [] };
+        }
+        const configService = this.getConfigService();
+        if (!configService) {
+            return { specs: [], effects: [] };
+        }
+        const sceneLayout = (0, sceneLayoutModel_1.computeSceneLayout)(this.canvasService, (0, sceneLayoutModel_1.readSizeState)(configService));
+        if (!sceneLayout) {
+            return { specs: [], effects: [] };
+        }
+        const state = (0, model_1.readDielineState)(configService);
+        state.features = this.cloneFeatures(this.workingFeatures);
+        return (0, renderBuilder_1.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: [layers_1.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",
+            },
+        });
+    }
+    hasImageItems() {
+        const configService = this.getConfigService();
+        if (!configService)
+            return false;
+        const items = configService.get("image.items", []);
+        return Array.isArray(items) && items.length > 0;
+    }
+    buildMarkerSpecs() {
         if (!this.isFeatureSessionActive ||
             !this.currentGeometry ||
             this.workingFeatures.length === 0) {
@@ -632,9 +726,26 @@ class FeatureTool {
         }
         const groups = new Map();
         const singles = [];
-        this.workingFeatures.forEach((feature, index) => {
+        const placements = (0, featurePlacement_1.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,
+        });
+        placements.forEach((placement, index) => {
+            const feature = placement.feature;
             const geometry = this.getGeometryForFeature(this.currentGeometry, feature);
-            const position = (0, geometry_1.resolveFeaturePosition)(feature, geometry);
+            const position = {
+                x: placement.centerX,
+                y: placement.centerY,
+            };
             const scale = geometry.scale || 1;
             const marker = {
                 feature,

package/.test-dist/src/extensions/featureCoordinates.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveFeaturePosition = resolveFeaturePosition;
+exports.normalizePointInGeometry = normalizePointInGeometry;
+function resolveFeaturePosition(feature, geometry) {
+    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,
+    };
+}
+function normalizePointInGeometry(point, geometry) {
+    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/.test-dist/src/extensions/featurePlacement.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveFeaturePlacements = resolveFeaturePlacements;
+exports.projectPlacedFeatures = projectPlacedFeatures;
+const constraints_1 = require("./constraints");
+const featureCoordinates_1 = require("./featureCoordinates");
+function scaleFeatureForRender(feature, scale, x, y) {
+    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,
+    };
+}
+function resolveFeaturePlacements(features, geometry) {
+    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 = constraints_1.ConstraintRegistry.apply(feature.x, feature.y, feature, {
+            dielineWidth,
+            dielineHeight,
+            geometry,
+        }, activeConstraints);
+        const center = (0, featureCoordinates_1.resolveFeaturePosition)({
+            ...feature,
+            x: constrained.x,
+            y: constrained.y,
+        }, geometry);
+        return {
+            feature,
+            normalizedX: constrained.x,
+            normalizedY: constrained.y,
+            centerX: center.x,
+            centerY: center.y,
+        };
+    });
+}
+function projectPlacedFeatures(placements, geometry, scale) {
+    return placements.map((placement) => {
+        const normalized = (0, featureCoordinates_1.normalizePointInGeometry)({ x: placement.centerX, y: placement.centerY }, geometry);
+        return scaleFeatureForRender(placement.feature, scale, normalized.x, normalized.y);
+    });
+}