@pooder/kit 6.2.1 → 6.3.0

package/.test-dist/src/extensions/image/commands.js

@@ -24,30 +24,35 @@ function createImageCommands(tool) {
             },
         },
         {
-            command: "getWorkingImages",
-            id: "getWorkingImages",
-            title: "Get Working Images",
+            command: "applyImageOperation",
+            id: "applyImageOperation",
+            title: "Apply Image Operation",
+            handler: async (id, operation, options = {}) => {
+                await tool.applyImageOperation(id, operation, options);
+            },
+        },
+        {
+            command: "getImageViewState",
+            id: "getImageViewState",
+            title: "Get Image View State",
             handler: () => {
-                return tool.cloneItems(tool.workingItems);
+                return tool.getImageViewState();
             },
         },
         {
-            command: "setWorkingImage",
-            id: "setWorkingImage",
-            title: "Set Working Image",
-            handler: (id, updates) => {
-                tool.updateImageInWorking(id, updates);
+            command: "setImageTransform",
+            id: "setImageTransform",
+            title: "Set Image Transform",
+            handler: async (id, updates, options = {}) => {
+                await tool.setImageTransform(id, updates, options);
             },
         },
         {
-            command: "resetWorkingImages",
-            id: "resetWorkingImages",
-            title: "Reset Working Images",
+            command: "imageSessionReset",
+            id: "imageSessionReset",
+            title: "Reset Image Session",
             handler: () => {
-                tool.workingItems = tool.cloneItems(tool.items);
-                tool.hasWorkingChanges = false;
-                tool.updateImages();
-                tool.emitWorkingChange();
+                tool.resetImageSession();
             },
         },
         {
@@ -66,22 +71,6 @@ function createImageCommands(tool) {
                 return await tool.exportUserCroppedImage(options);
             },
         },
-        {
-            command: "fitImageToArea",
-            id: "fitImageToArea",
-            title: "Fit Image to Area",
-            handler: async (id, area) => {
-                await tool.fitImageToArea(id, area);
-            },
-        },
-        {
-            command: "fitImageToDefaultArea",
-            id: "fitImageToDefaultArea",
-            title: "Fit Image to Default Area",
-            handler: async (id) => {
-                await tool.fitImageToDefaultArea(id);
-            },
-        },
         {
             command: "focusImage",
             id: "focusImage",
@@ -95,9 +84,10 @@ function createImageCommands(tool) {
             id: "removeImage",
             title: "Remove Image",
             handler: (id) => {
-                const removed = tool.items.find((item) => item.id === id);
-                const next = tool.items.filter((item) => item.id !== id);
-                if (next.length !== tool.items.length) {
+                const sourceItems = tool.isToolActive ? tool.workingItems : tool.items;
+                const removed = sourceItems.find((item) => item.id === id);
+                const next = sourceItems.filter((item) => item.id !== id);
+                if (next.length !== sourceItems.length) {
                     tool.purgeSourceSizeCacheForItem(removed);
                     if (tool.focusedImageId === id) {
                         tool.setImageFocus(null, {
@@ -105,6 +95,13 @@ function createImageCommands(tool) {
                             skipRender: true,
                         });
                     }
+                    if (tool.isToolActive) {
+                        tool.workingItems = tool.cloneItems(next);
+                        tool.hasWorkingChanges = true;
+                        tool.updateImages();
+                        tool.emitWorkingChange(id);
+                        return;
+                    }
                     tool.updateConfig(next);
                 }
             },
@@ -127,6 +124,13 @@ function createImageCommands(tool) {
                     syncCanvasSelection: true,
                     skipRender: true,
                 });
+                if (tool.isToolActive) {
+                    tool.workingItems = [];
+                    tool.hasWorkingChanges = true;
+                    tool.updateImages();
+                    tool.emitWorkingChange();
+                    return;
+                }
                 tool.updateConfig([]);
             },
         },
@@ -135,11 +139,19 @@ function createImageCommands(tool) {
             id: "bringToFront",
             title: "Bring Image to Front",
             handler: (id) => {
-                const index = tool.items.findIndex((item) => item.id === id);
-                if (index !== -1 && index < tool.items.length - 1) {
-                    const next = [...tool.items];
+                const sourceItems = tool.isToolActive ? tool.workingItems : tool.items;
+                const index = sourceItems.findIndex((item) => item.id === id);
+                if (index !== -1 && index < sourceItems.length - 1) {
+                    const next = [...sourceItems];
                     const [item] = next.splice(index, 1);
                     next.push(item);
+                    if (tool.isToolActive) {
+                        tool.workingItems = tool.cloneItems(next);
+                        tool.hasWorkingChanges = true;
+                        tool.updateImages();
+                        tool.emitWorkingChange(id);
+                        return;
+                    }
                     tool.updateConfig(next);
                 }
             },
@@ -149,11 +161,19 @@ function createImageCommands(tool) {
             id: "sendToBack",
             title: "Send Image to Back",
             handler: (id) => {
-                const index = tool.items.findIndex((item) => item.id === id);
+                const sourceItems = tool.isToolActive ? tool.workingItems : tool.items;
+                const index = sourceItems.findIndex((item) => item.id === id);
                 if (index > 0) {
-                    const next = [...tool.items];
+                    const next = [...sourceItems];
                     const [item] = next.splice(index, 1);
                     next.unshift(item);
+                    if (tool.isToolActive) {
+                        tool.workingItems = tool.cloneItems(next);
+                        tool.hasWorkingChanges = true;
+                        tool.updateImages();
+                        tool.emitWorkingChange(id);
+                        return;
+                    }
                     tool.updateConfig(next);
                 }
             },

package/.test-dist/src/extensions/image/imageOperations.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveImageOperationArea = resolveImageOperationArea;
+exports.computeImageOperationUpdates = computeImageOperationUpdates;
+const sourceSizeCache_1 = require("../../shared/imaging/sourceSizeCache");
+function clampNormalizedAnchor(value) {
+    return Math.max(-1, Math.min(2, value));
+}
+function toNormalizedAnchor(center, start, size) {
+    return clampNormalizedAnchor((center - start) / Math.max(1, size));
+}
+function resolveAbsoluteScale(operation, area, source) {
+    const widthScale = Math.max(1, area.width) / Math.max(1, source.width);
+    const heightScale = Math.max(1, area.height) / Math.max(1, source.height);
+    switch (operation.type) {
+        case "cover":
+            return Math.max(widthScale, heightScale);
+        case "contain":
+            return Math.min(widthScale, heightScale);
+        case "maximizeWidth":
+            return widthScale;
+        case "maximizeHeight":
+            return heightScale;
+        default:
+            return null;
+    }
+}
+function resolveImageOperationArea(args) {
+    const spec = args.area || { type: "frame" };
+    if (spec.type === "custom") {
+        return {
+            width: Math.max(1, spec.width),
+            height: Math.max(1, spec.height),
+            centerX: spec.centerX,
+            centerY: spec.centerY,
+        };
+    }
+    if (spec.type === "viewport") {
+        return {
+            width: Math.max(1, args.viewport.width),
+            height: Math.max(1, args.viewport.height),
+            centerX: args.viewport.left + args.viewport.width / 2,
+            centerY: args.viewport.top + args.viewport.height / 2,
+        };
+    }
+    return {
+        width: Math.max(1, args.frame.width),
+        height: Math.max(1, args.frame.height),
+        centerX: args.frame.left + args.frame.width / 2,
+        centerY: args.frame.top + args.frame.height / 2,
+    };
+}
+function computeImageOperationUpdates(args) {
+    const { frame, source, operation, area } = args;
+    if (operation.type === "resetTransform") {
+        return {
+            scale: 1,
+            left: 0.5,
+            top: 0.5,
+            angle: 0,
+        };
+    }
+    const left = toNormalizedAnchor(area.centerX, frame.left, frame.width);
+    const top = toNormalizedAnchor(area.centerY, frame.top, frame.height);
+    if (operation.type === "center") {
+        return { left, top };
+    }
+    const absoluteScale = resolveAbsoluteScale(operation, area, source);
+    const coverScale = (0, sourceSizeCache_1.getCoverScale)(frame, source);
+    return {
+        scale: Math.max(0.05, (absoluteScale || coverScale) / coverScale),
+        left,
+        top,
+    };
+}

package/.test-dist/src/extensions/image/index.js

@@ -17,5 +17,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./ImageTool"), exports);
 __exportStar(require("./commands"), exports);
 __exportStar(require("./config"), exports);
+__exportStar(require("./imageOperations"), exports);
 __exportStar(require("./model"), exports);
 __exportStar(require("./renderer"), exports);

package/.test-dist/src/extensions/image/model.js

@@ -1,2 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasAnyImageInViewState = hasAnyImageInViewState;
+function hasAnyImageInViewState(state) {
+    return Boolean(state?.hasAnyImage);
+}

package/.test-dist/src/extensions/image/sessionOverlay.js

@@ -0,0 +1,148 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildImageSessionOverlaySpecs = buildImageSessionOverlaySpecs;
+const geometry_1 = require("../geometry");
+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, height) {
+    return `M 0 0 L ${width} 0 L ${width} ${height} L 0 ${height} Z`;
+}
+function buildViewportMaskPath(viewport, cutRect) {
+    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, cutRect) {
+    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, geometry) {
+    if (!geometry || geometry.shape === "custom") {
+        return null;
+    }
+    const radius = resolveCutShapeRadiusPx(geometry, cutRect);
+    if (geometry.shape === "rect" && radius <= EPSILON) {
+        return null;
+    }
+    const shapePathData = (0, geometry_1.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}`,
+    };
+}
+function buildImageSessionOverlaySpecs(args) {
+    const { viewport, layout, geometry, visual, hatchPattern } = args;
+    const cutRect = layout.cutRect;
+    const specs = [];
+    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/.test-dist/src/extensions/ruler/RulerTool.js

@@ -8,7 +8,7 @@ const EXTENSION_LINE_LENGTH = 5;
 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";

package/.test-dist/tests/run.js

@@ -12,6 +12,7 @@ const config_2 = require("../src/extensions/white-ink/config");
 const commands_3 = require("../src/extensions/dieline/commands");
 const config_3 = require("../src/extensions/dieline/config");
 const featureCoordinates_1 = require("../src/extensions/featureCoordinates");
+const model_1 = require("../src/extensions/image/model");
 function assert(condition, message) {
     if (!condition)
         throw new Error(message);
@@ -169,6 +170,39 @@ function testVisibilityDsl() {
         ],
     }, context) === true, "any failed");
 }
+function testImageViewStateHelper() {
+    assert((0, model_1.hasAnyImageInViewState)(null) === false, "null image state should be empty");
+    assert((0, model_1.hasAnyImageInViewState)({
+        items: [],
+        hasAnyImage: false,
+        focusedId: null,
+        focusedItem: null,
+        isToolActive: false,
+        isImageSelectionActive: false,
+        hasWorkingChanges: false,
+        source: "committed",
+    }) === false, "empty image state should report false");
+    assert((0, model_1.hasAnyImageInViewState)({
+        items: [
+            {
+                id: "img-1",
+                url: "blob:test",
+                opacity: 1,
+            },
+        ],
+        hasAnyImage: true,
+        focusedId: "img-1",
+        focusedItem: {
+            id: "img-1",
+            url: "blob:test",
+            opacity: 1,
+        },
+        isToolActive: true,
+        isImageSelectionActive: true,
+        hasWorkingChanges: true,
+        source: "working",
+    }) === true, "non-empty image state should report true");
+}
 function testContributionCompatibility() {
     const imageCommandNames = (0, commands_1.createImageCommands)({}).map((entry) => entry.command);
     const whiteInkCommandNames = (0, commands_2.createWhiteInkCommands)({}).map((entry) => entry.command);
@@ -179,13 +213,12 @@ function testContributionCompatibility() {
     const expectedImageCommands = [
         "addImage",
         "upsertImage",
-        "getWorkingImages",
-        "setWorkingImage",
-        "resetWorkingImages",
+        "applyImageOperation",
+        "getImageViewState",
+        "setImageTransform",
+        "imageSessionReset",
         "completeImages",
         "exportUserCroppedImage",
-        "fitImageToArea",
-        "fitImageToDefaultArea",
         "focusImage",
         "removeImage",
         "updateImage",
@@ -285,6 +318,7 @@ function main() {
     testEdgeScale();
     testFeaturePlacementProjection();
     testVisibilityDsl();
+    testImageViewStateHelper();
     testContributionCompatibility();
     console.log("ok");
 }

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @pooder/kit
 
+## 6.3.0
+
+### Minor Changes
+
+- pooder facade
+
+## 6.2.2
+
+### Patch Changes
+
+- bugfix
+
 ## 6.2.1
 
 ### Patch Changes