@pooder/kit 6.0.0 → 6.0.1

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

@@ -20,7 +20,7 @@ const DEFAULT_BACKGROUND_CONFIG = {
             order: 0,
             enabled: true,
             exportable: false,
-            color: "#aaa",
+            color: "#fff",
         },
     ],
 };

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

@@ -702,6 +702,10 @@ class DielineTool {
             {
                 type: "clipPath",
                 id: "dieline.clip.image",
+                visibility: {
+                    op: "not",
+                    expr: { op: "anySessionActive" },
+                },
                 targetPassIds: [IMAGE_OBJECT_LAYER_ID],
                 source: {
                     id: "dieline.effect.clip-path",

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

@@ -8,6 +8,34 @@ const geometry_1 = require("./geometry");
 const sceneLayoutModel_1 = require("./sceneLayoutModel");
 const IMAGE_OBJECT_LAYER_ID = "image.user";
 const IMAGE_OVERLAY_LAYER_ID = "image-overlay";
+const IMAGE_DEFAULT_CONTROL_CAPABILITIES = [
+    "rotate",
+    "scale",
+];
+const IMAGE_CONTROL_DESCRIPTORS = [
+    {
+        key: "tl",
+        capability: "rotate",
+        create: () => new fabric_1.Control({
+            x: -0.5,
+            y: -0.5,
+            actionName: "rotate",
+            actionHandler: fabric_1.controlsUtils.rotationWithSnapping,
+            cursorStyleHandler: fabric_1.controlsUtils.rotationStyleHandler,
+        }),
+    },
+    {
+        key: "br",
+        capability: "scale",
+        create: () => new fabric_1.Control({
+            x: 0.5,
+            y: 0.5,
+            actionName: "scale",
+            actionHandler: fabric_1.controlsUtils.scalingEqually,
+            cursorStyleHandler: fabric_1.controlsUtils.scaleCursorStyleHandler,
+        }),
+    },
+];
 class ImageTool {
     constructor() {
         this.id = "pooder.kit.image";
@@ -26,6 +54,7 @@ class ImageTool {
         this.renderSeq = 0;
         this.imageSpecs = [];
         this.overlaySpecs = [];
+        this.imageControlsByCapabilityKey = new Map();
         this.onToolActivated = (event) => {
             const before = this.isToolActive;
             this.syncToolActiveFromWorkbench(event.id);
@@ -183,7 +212,12 @@ class ImageTool {
                     this.updateImages();
                     return;
                 }
-                if (e.key.startsWith("size.") || e.key.startsWith("image.frame.")) {
+                if (e.key.startsWith("size.") ||
+                    e.key.startsWith("image.frame.") ||
+                    e.key.startsWith("image.control.")) {
+                    if (e.key.startsWith("image.control.")) {
+                        this.imageControlsByCapabilityKey.clear();
+                    }
                     this.updateImages();
                 }
             });
@@ -207,6 +241,7 @@ class ImageTool {
         this.cropShapeHatchPatternKey = undefined;
         this.imageSpecs = [];
         this.overlaySpecs = [];
+        this.imageControlsByCapabilityKey.clear();
         this.clearRenderedImages();
         this.renderProducerDisposable?.dispose();
         this.renderProducerDisposable = undefined;
@@ -228,6 +263,83 @@ class ImageTool {
     isImageEditingVisible() {
         return (this.isToolActive || this.isImageSelectionActive || !!this.focusedImageId);
     }
+    getEnabledImageControlCapabilities() {
+        return IMAGE_DEFAULT_CONTROL_CAPABILITIES;
+    }
+    getImageControls(capabilities) {
+        const normalized = [...new Set(capabilities)].sort();
+        const cacheKey = normalized.join("|");
+        const cached = this.imageControlsByCapabilityKey.get(cacheKey);
+        if (cached) {
+            return cached;
+        }
+        const enabled = new Set(normalized);
+        const controls = {};
+        IMAGE_CONTROL_DESCRIPTORS.forEach((descriptor) => {
+            if (!enabled.has(descriptor.capability))
+                return;
+            controls[descriptor.key] = descriptor.create();
+        });
+        this.imageControlsByCapabilityKey.set(cacheKey, controls);
+        return controls;
+    }
+    getImageControlVisualConfig() {
+        const cornerSizeRaw = Number(this.getConfig("image.control.cornerSize", 14) ?? 14);
+        const touchCornerSizeRaw = Number(this.getConfig("image.control.touchCornerSize", 24) ?? 24);
+        const borderScaleFactorRaw = Number(this.getConfig("image.control.borderScaleFactor", 1.5) ?? 1.5);
+        const paddingRaw = Number(this.getConfig("image.control.padding", 0) ?? 0);
+        const cornerStyleRaw = (this.getConfig("image.control.cornerStyle", "circle") || "circle");
+        const cornerStyle = cornerStyleRaw === "rect" ? "rect" : "circle";
+        return {
+            cornerSize: Number.isFinite(cornerSizeRaw)
+                ? Math.max(4, Math.min(64, cornerSizeRaw))
+                : 14,
+            touchCornerSize: Number.isFinite(touchCornerSizeRaw)
+                ? Math.max(8, Math.min(96, touchCornerSizeRaw))
+                : 24,
+            cornerStyle,
+            cornerColor: this.getConfig("image.control.cornerColor", "#ffffff") ||
+                "#ffffff",
+            cornerStrokeColor: this.getConfig("image.control.cornerStrokeColor", "#1677ff") ||
+                "#1677ff",
+            transparentCorners: !!this.getConfig("image.control.transparentCorners", false),
+            borderColor: this.getConfig("image.control.borderColor", "#1677ff") ||
+                "#1677ff",
+            borderScaleFactor: Number.isFinite(borderScaleFactorRaw)
+                ? Math.max(0.5, Math.min(8, borderScaleFactorRaw))
+                : 1.5,
+            padding: Number.isFinite(paddingRaw)
+                ? Math.max(0, Math.min(64, paddingRaw))
+                : 0,
+        };
+    }
+    applyImageObjectInteractionState(obj) {
+        if (!obj)
+            return;
+        const visible = this.isImageEditingVisible();
+        const visual = this.getImageControlVisualConfig();
+        obj.set({
+            selectable: visible,
+            evented: visible,
+            hasControls: visible,
+            hasBorders: visible,
+            lockScalingFlip: true,
+            cornerSize: visual.cornerSize,
+            touchCornerSize: visual.touchCornerSize,
+            cornerStyle: visual.cornerStyle,
+            cornerColor: visual.cornerColor,
+            cornerStrokeColor: visual.cornerStrokeColor,
+            transparentCorners: visual.transparentCorners,
+            borderColor: visual.borderColor,
+            borderScaleFactor: visual.borderScaleFactor,
+            padding: visual.padding,
+        });
+        obj.controls = this.getImageControls(this.getEnabledImageControlCapabilities());
+        obj.setCoords?.();
+    }
+    refreshImageObjectInteractionState() {
+        this.getImageObjects().forEach((obj) => this.applyImageObjectInteractionState(obj));
+    }
     isDebugEnabled() {
         return !!this.getConfig("image.debug", false);
     }
@@ -271,6 +383,73 @@ class ImageTool {
                     label: "Image Debug Log",
                     default: false,
                 },
+                {
+                    id: "image.control.cornerSize",
+                    type: "number",
+                    label: "Image Control Corner Size",
+                    min: 4,
+                    max: 64,
+                    step: 1,
+                    default: 14,
+                },
+                {
+                    id: "image.control.touchCornerSize",
+                    type: "number",
+                    label: "Image Control Touch Corner Size",
+                    min: 8,
+                    max: 96,
+                    step: 1,
+                    default: 24,
+                },
+                {
+                    id: "image.control.cornerStyle",
+                    type: "select",
+                    label: "Image Control Corner Style",
+                    options: ["circle", "rect"],
+                    default: "circle",
+                },
+                {
+                    id: "image.control.cornerColor",
+                    type: "color",
+                    label: "Image Control Corner Color",
+                    default: "#ffffff",
+                },
+                {
+                    id: "image.control.cornerStrokeColor",
+                    type: "color",
+                    label: "Image Control Corner Stroke Color",
+                    default: "#1677ff",
+                },
+                {
+                    id: "image.control.transparentCorners",
+                    type: "boolean",
+                    label: "Image Control Transparent Corners",
+                    default: false,
+                },
+                {
+                    id: "image.control.borderColor",
+                    type: "color",
+                    label: "Image Control Border Color",
+                    default: "#1677ff",
+                },
+                {
+                    id: "image.control.borderScaleFactor",
+                    type: "number",
+                    label: "Image Control Border Width",
+                    min: 0.5,
+                    max: 8,
+                    step: 0.1,
+                    default: 1.5,
+                },
+                {
+                    id: "image.control.padding",
+                    type: "number",
+                    label: "Image Control Padding",
+                    min: 0,
+                    max: 64,
+                    step: 1,
+                    default: 0,
+                },
                 {
                     id: "image.frame.strokeColor",
                     type: "color",
@@ -513,12 +692,7 @@ class ImageTool {
             else {
                 const obj = this.getImageObject(id);
                 if (obj) {
-                    obj.set({
-                        selectable: true,
-                        evented: true,
-                        hasControls: true,
-                        hasBorders: true,
-                    });
+                    this.applyImageObjectInteractionState(obj);
                     canvas.setActiveObject(obj);
                 }
             }
@@ -1317,6 +1491,7 @@ class ImageTool {
         await this.canvasService.flushRenderFromProducers();
         if (seq !== this.renderSeq)
             return;
+        this.refreshImageObjectInteractionState();
         renderItems.forEach((item) => {
             if (!this.getImageObject(item.id))
                 return;

package/.test-dist/src/services/CanvasService.js

@@ -15,6 +15,7 @@ class CanvasService {
         this.visibilityRefreshScheduled = false;
         this.managedProducerPassIds = new Set();
         this.managedPassMetas = new Map();
+        this.managedPassEffects = [];
         this.canvasForwardersBound = false;
         this.forwardSelectionCreated = (e) => {
             this.eventBus?.emit("selection:created", e);
@@ -36,9 +37,11 @@ class CanvasService {
         };
         this.onToolActivated = () => {
             this.applyManagedPassVisibility();
+            void this.applyManagedPassEffects(undefined, { render: true });
         };
         this.onToolSessionChanged = () => {
             this.applyManagedPassVisibility();
+            void this.applyManagedPassEffects(undefined, { render: true });
         };
         this.onCanvasObjectChanged = () => {
             if (this.producerApplyInProgress)
@@ -106,6 +109,7 @@ class CanvasService {
         this.renderProducers.clear();
         this.managedProducerPassIds.clear();
         this.managedPassMetas.clear();
+        this.managedPassEffects = [];
         this.context = undefined;
         this.workbenchService = undefined;
         this.toolSessionService = undefined;
@@ -226,6 +230,7 @@ class CanvasService {
         return {
             type: "clipPath",
             key,
+            visibility: effect.visibility,
             source: {
                 ...source,
                 id: sourceId,
@@ -337,23 +342,30 @@ class CanvasService {
         });
         return state;
     }
+    isSessionActive(toolId) {
+        if (!this.toolSessionService)
+            return false;
+        return this.toolSessionService.getState(toolId).status === "active";
+    }
+    hasAnyActiveSession() {
+        return this.toolSessionService?.hasAnyActiveSession() ?? false;
+    }
+    buildVisibilityEvalContext(layers) {
+        return {
+            activeToolId: this.workbenchService?.activeToolId ?? null,
+            isSessionActive: (toolId) => this.isSessionActive(toolId),
+            hasAnyActiveSession: () => this.hasAnyActiveSession(),
+            layers,
+        };
+    }
     applyManagedPassVisibility(options = {}) {
         if (!this.managedPassMetas.size)
             return false;
         const layers = this.getPassRuntimeState();
-        const activeToolId = this.workbenchService?.activeToolId ?? null;
-        const isSessionActive = (toolId) => {
-            if (!this.toolSessionService)
-                return false;
-            return this.toolSessionService.getState(toolId).status === "active";
-        };
+        const context = this.buildVisibilityEvalContext(layers);
         let changed = false;
         this.managedPassMetas.forEach((meta) => {
-            const visible = (0, visibility_1.evaluateVisibilityExpr)(meta.visibility, {
-                activeToolId,
-                isSessionActive,
-                layers,
-            });
+            const visible = (0, visibility_1.evaluateVisibilityExpr)(meta.visibility, context);
             changed = this.setPassVisibility(meta.id, visible) || changed;
         });
         if (changed && options.render !== false) {
@@ -419,8 +431,9 @@ class CanvasService {
             }
             this.managedProducerPassIds = nextPassIds;
             this.managedPassMetas = nextManagedPassMetas;
+            this.managedPassEffects = nextEffects;
             this.syncManagedPassStacking(Array.from(nextManagedPassMetas.values()));
-            await this.applyManagedPassEffects(nextEffects);
+            await this.applyManagedPassEffects(nextEffects, { render: false });
             this.applyManagedPassVisibility({ render: false });
         }
         finally {
@@ -428,11 +441,16 @@ class CanvasService {
         }
         this.requestRenderAll();
     }
-    async applyManagedPassEffects(effects) {
+    async applyManagedPassEffects(effects = this.managedPassEffects, options = {}) {
         const effectTargetMap = new Map();
+        const layers = this.getPassRuntimeState();
+        const visibilityContext = this.buildVisibilityEvalContext(layers);
         for (const effect of effects) {
             if (effect.type !== "clipPath")
                 continue;
+            if (!(0, visibility_1.evaluateVisibilityExpr)(effect.visibility, visibilityContext)) {
+                continue;
+            }
             effect.targetPassIds.forEach((targetPassId) => {
                 this.getPassCanvasObjects(targetPassId).forEach((obj) => {
                     effectTargetMap.set(obj, effect);
@@ -458,6 +476,9 @@ class CanvasService {
             }
             await this.applyClipPathEffectToObject(obj, template, targetEffect.key);
         }
+        if (options.render !== false) {
+            this.requestRenderAll();
+        }
     }
     getObject(id, passId) {
         const normalizedId = String(id || "").trim();

package/.test-dist/src/services/visibility.js

@@ -31,6 +31,9 @@ function evaluateVisibilityExpr(expr, context) {
             return false;
         return context.isSessionActive ? context.isSessionActive(toolId) : false;
     }
+    if (expr.op === "anySessionActive") {
+        return context.hasAnyActiveSession ? context.hasAnyActiveSession() : false;
+    }
     if (expr.op === "layerExists") {
         return layerState(context, expr.layerId).exists === true;
     }

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

@@ -93,6 +93,7 @@ function testVisibilityDsl() {
     const context = {
         activeToolId: "pooder.kit.image",
         isSessionActive: (toolId) => toolId === "pooder.kit.feature",
+        hasAnyActiveSession: () => true,
         layers,
     };
     assert((0, visibility_1.evaluateVisibilityExpr)({ op: "const", value: true }, context) === true, "const true failed");
@@ -101,6 +102,7 @@ function testVisibilityDsl() {
     assert((0, visibility_1.evaluateVisibilityExpr)({ op: "activeToolIn", ids: ["pooder.kit.white-ink"] }, context) === false, "activeToolIn false failed");
     assert((0, visibility_1.evaluateVisibilityExpr)({ op: "sessionActive", toolId: "pooder.kit.feature" }, context) === true, "sessionActive true failed");
     assert((0, visibility_1.evaluateVisibilityExpr)({ op: "sessionActive", toolId: "pooder.kit.ruler" }, context) === false, "sessionActive false failed");
+    assert((0, visibility_1.evaluateVisibilityExpr)({ op: "anySessionActive" }, context) === true, "anySessionActive true failed");
     assert((0, visibility_1.evaluateVisibilityExpr)({ op: "layerExists", layerId: "ruler-overlay" }, context) === true, "layerExists true failed");
     assert((0, visibility_1.evaluateVisibilityExpr)({ op: "layerExists", layerId: "missing-layer" }, context) === false, "layerExists false failed");
     const comparisons = [

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @pooder/kit
 
+## 6.0.1
+
+### Patch Changes
+
+- image control
+
 ## 6.0.0
 
 ### Major Changes

package/dist/index.d.mts

@@ -94,6 +94,7 @@ declare class ImageTool implements Extension {
     private imageSpecs;
     private overlaySpecs;
     private renderProducerDisposable?;
+    private imageControlsByCapabilityKey;
     activate(context: ExtensionContext): void;
     deactivate(context: ExtensionContext): void;
     private onToolActivated;
@@ -103,6 +104,11 @@ declare class ImageTool implements Extension {
     private onSceneGeometryChanged;
     private syncToolActiveFromWorkbench;
     private isImageEditingVisible;
+    private getEnabledImageControlCapabilities;
+    private getImageControls;
+    private getImageControlVisualConfig;
+    private applyImageObjectInteractionState;
+    private refreshImageObjectInteractionState;
     private isDebugEnabled;
     private debug;
     contribute(): {
@@ -707,6 +713,8 @@ type VisibilityExpr = {
 } | {
     op: "sessionActive";
     toolId: string;
+} | {
+    op: "anySessionActive";
 } | {
     op: "layerExists";
     layerId: string;
@@ -728,6 +736,7 @@ type VisibilityExpr = {
 interface RenderClipPathEffectSpec {
     type: "clipPath";
     id?: string;
+    visibility?: VisibilityExpr;
     source: RenderObjectSpec;
     targetPassIds: string[];
 }
@@ -771,6 +780,7 @@ declare class CanvasService implements Service {
     private visibilityRefreshScheduled;
     private managedProducerPassIds;
     private managedPassMetas;
+    private managedPassEffects;
     private canvasForwardersBound;
     private readonly forwardSelectionCreated;
     private readonly forwardSelectionUpdated;
@@ -808,6 +818,9 @@ declare class CanvasService implements Service {
     private isManagedPassObject;
     private syncManagedPassStacking;
     private getPassRuntimeState;
+    private isSessionActive;
+    private hasAnyActiveSession;
+    private buildVisibilityEvalContext;
     private applyManagedPassVisibility;
     private scheduleManagedPassVisibilityRefresh;
     private collectAndApplyProducerSpecs;
@@ -911,6 +924,7 @@ interface VisibilityLayerState {
 interface VisibilityEvalContext {
     activeToolId?: string | null;
     isSessionActive?: (toolId: string) => boolean;
+    hasAnyActiveSession?: () => boolean;
     layers: Map<string, VisibilityLayerState>;
 }
 declare function evaluateVisibilityExpr(expr: VisibilityExpr | undefined, context: VisibilityEvalContext): boolean;

package/dist/index.d.ts

@@ -94,6 +94,7 @@ declare class ImageTool implements Extension {
     private imageSpecs;
     private overlaySpecs;
     private renderProducerDisposable?;
+    private imageControlsByCapabilityKey;
     activate(context: ExtensionContext): void;
     deactivate(context: ExtensionContext): void;
     private onToolActivated;
@@ -103,6 +104,11 @@ declare class ImageTool implements Extension {
     private onSceneGeometryChanged;
     private syncToolActiveFromWorkbench;
     private isImageEditingVisible;
+    private getEnabledImageControlCapabilities;
+    private getImageControls;
+    private getImageControlVisualConfig;
+    private applyImageObjectInteractionState;
+    private refreshImageObjectInteractionState;
     private isDebugEnabled;
     private debug;
     contribute(): {
@@ -707,6 +713,8 @@ type VisibilityExpr = {
 } | {
     op: "sessionActive";
     toolId: string;
+} | {
+    op: "anySessionActive";
 } | {
     op: "layerExists";
     layerId: string;
@@ -728,6 +736,7 @@ type VisibilityExpr = {
 interface RenderClipPathEffectSpec {
     type: "clipPath";
     id?: string;
+    visibility?: VisibilityExpr;
     source: RenderObjectSpec;
     targetPassIds: string[];
 }
@@ -771,6 +780,7 @@ declare class CanvasService implements Service {
     private visibilityRefreshScheduled;
     private managedProducerPassIds;
     private managedPassMetas;
+    private managedPassEffects;
     private canvasForwardersBound;
     private readonly forwardSelectionCreated;
     private readonly forwardSelectionUpdated;
@@ -808,6 +818,9 @@ declare class CanvasService implements Service {
     private isManagedPassObject;
     private syncManagedPassStacking;
     private getPassRuntimeState;
+    private isSessionActive;
+    private hasAnyActiveSession;
+    private buildVisibilityEvalContext;
     private applyManagedPassVisibility;
     private scheduleManagedPassVisibilityRefresh;
     private collectAndApplyProducerSpecs;
@@ -911,6 +924,7 @@ interface VisibilityLayerState {
 interface VisibilityEvalContext {
     activeToolId?: string | null;
     isSessionActive?: (toolId: string) => boolean;
+    hasAnyActiveSession?: () => boolean;
     layers: Map<string, VisibilityLayerState>;
 }
 declare function evaluateVisibilityExpr(expr: VisibilityExpr | undefined, context: VisibilityEvalContext): boolean;