kritzel-stencil 0.1.0 → 0.1.2

package/dist/collection/classes/tools/selection-tool.class.js

@@ -4,9 +4,15 @@ import { KritzelResizeHandler } from "../handlers/resize.handler";
 import { KritzelRotationHandler } from "../handlers/rotation.handler";
 import { KritzelSelectionHandler } from "../handlers/selection.handler";
 import { KritzelSelectionGroup } from "../objects/selection-group.class";
+import { KritzelGroup } from "../objects/group.class";
 import { KritzelBaseTool } from "./base-tool.class";
 import { KritzelHoverHandler } from "../handlers/hover.handler";
 import { KritzelLineHandleHandler } from "../handlers/line-handle.handler";
+import { KritzelPath } from "../objects/path.class";
+import { KritzelLine } from "../objects/line.class";
+import { KritzelShape } from "../objects/shape.class";
+import { KritzelText } from "../objects/text.class";
+import { DEFAULT_COLOR_PALETTE } from "../../constants/color-palette.constants";
 export class KritzelSelectionTool extends KritzelBaseTool {
     selectionHandler;
     moveHandler;
@@ -14,6 +20,193 @@ export class KritzelSelectionTool extends KritzelBaseTool {
     resizeHandler;
     rotationHandler;
     lineHandleHandler;
+    palette = [...DEFAULT_COLOR_PALETTE];
+    /** Returns true if there are objects in the selection group */
+    hasSelection() {
+        return !!this._core.store.selectionGroup && this._core.store.selectionGroup.objects.length > 0;
+    }
+    /** Returns the selected objects or empty array */
+    getSelectedObjects() {
+        return this._core.store.selectionGroup?.objects ?? [];
+    }
+    flattenObjects(objects) {
+        let result = [];
+        for (const obj of objects) {
+            if (obj instanceof KritzelGroup) {
+                result = result.concat(this.flattenObjects(obj.children));
+            }
+            else {
+                result.push(obj);
+            }
+        }
+        return result;
+    }
+    get color() {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        if (objects.length === 0)
+            return '#000000';
+        for (const obj of objects) {
+            if (obj instanceof KritzelPath)
+                return obj.fill;
+            if (obj instanceof KritzelLine)
+                return obj.stroke;
+            if (obj instanceof KritzelText)
+                return obj.fontColor;
+            if (obj instanceof KritzelShape)
+                return obj.strokeColor;
+        }
+        return '#000000';
+    }
+    set color(value) {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        objects.forEach(obj => {
+            if (obj instanceof KritzelPath)
+                this._core.updateObject(obj, { fill: value });
+            if (obj instanceof KritzelLine)
+                this._core.updateObject(obj, { stroke: value });
+            if (obj instanceof KritzelText)
+                this._core.updateObject(obj, { fontColor: value });
+            if (obj instanceof KritzelShape)
+                this._core.updateObject(obj, { strokeColor: value });
+        });
+        this._core.rerender();
+    }
+    get opacity() {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        if (objects.length === 0)
+            return 1;
+        return objects[0].opacity;
+    }
+    set opacity(value) {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        objects.forEach(obj => this._core.updateObject(obj, { opacity: value }));
+        this._core.rerender();
+    }
+    get size() {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        if (objects.length === 0)
+            return 1;
+        for (const obj of objects) {
+            if (obj instanceof KritzelPath)
+                return obj.strokeWidth;
+            if (obj instanceof KritzelLine)
+                return obj.strokeWidth;
+            if (obj instanceof KritzelText)
+                return obj.fontSize;
+            if (obj instanceof KritzelShape)
+                return obj.strokeWidth;
+        }
+        return 1;
+    }
+    set size(value) {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        objects.forEach(obj => {
+            if (obj instanceof KritzelPath)
+                this._core.updateObject(obj, { strokeWidth: value });
+            if (obj instanceof KritzelLine)
+                this._core.updateObject(obj, { strokeWidth: value });
+            if (obj instanceof KritzelText)
+                this._core.updateObject(obj, { fontSize: value });
+            if (obj instanceof KritzelShape)
+                this._core.updateObject(obj, { strokeWidth: value });
+        });
+        this._core.rerender();
+    }
+    get fillColor() {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        for (const obj of objects) {
+            if (obj instanceof KritzelShape)
+                return obj.fillColor;
+        }
+        return 'transparent';
+    }
+    set fillColor(value) {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        objects.forEach(obj => {
+            if (obj instanceof KritzelShape) {
+                this._core.updateObject(obj, { fillColor: value });
+                // When switching to fill mode, also update stroke color to match
+                if (value !== 'transparent') {
+                    this._core.updateObject(obj, { strokeColor: value });
+                }
+            }
+        });
+        this._core.rerender();
+    }
+    get fontFamily() {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        for (const obj of objects) {
+            if (obj instanceof KritzelText)
+                return obj.fontFamily;
+            if (obj instanceof KritzelShape)
+                return obj.fontFamily;
+        }
+        return 'Arial';
+    }
+    set fontFamily(value) {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        objects.forEach(obj => {
+            if (obj instanceof KritzelText)
+                this._core.updateObject(obj, { fontFamily: value });
+            if (obj instanceof KritzelShape)
+                this._core.updateObject(obj, { fontFamily: value });
+        });
+        this._core.rerender();
+    }
+    get arrows() {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        for (const obj of objects) {
+            if (obj instanceof KritzelLine)
+                return obj.arrows;
+        }
+        return { start: { enabled: false }, end: { enabled: false } };
+    }
+    set arrows(value) {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        objects.forEach(obj => {
+            if (obj instanceof KritzelLine)
+                this._core.updateObject(obj, { arrows: value });
+        });
+        this._core.rerender();
+    }
+    /** Returns the tool config for selected objects, or null if no selection */
+    getToolConfig() {
+        if (!this.hasSelection())
+            return null;
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        const controls = [];
+        const hasShape = objects.some(o => o instanceof KritzelShape);
+        const hasText = objects.some(o => o instanceof KritzelText);
+        const hasLine = objects.some(o => o instanceof KritzelLine);
+        const hasStroke = objects.some(o => o instanceof KritzelPath || o instanceof KritzelLine || o instanceof KritzelShape);
+        if (hasText && !hasStroke) {
+            controls.push({ type: 'font-size', propertyName: 'size' });
+            controls.push({ type: 'font-family', propertyName: 'fontFamily' });
+        }
+        else if (hasStroke && !hasText) {
+            controls.push({ type: 'stroke-size', propertyName: 'size' });
+        }
+        else {
+            if (hasStroke)
+                controls.push({ type: 'stroke-size', propertyName: 'size' });
+            if (hasText)
+                controls.push({ type: 'font-family', propertyName: 'fontFamily' });
+        }
+        if (hasLine) {
+            controls.push({ type: 'line-endings', propertyName: 'arrows' });
+        }
+        if (hasShape) {
+            controls.push({ type: 'shape-fill', propertyName: 'fillColor' });
+        }
+        return {
+            type: 'selection',
+            colorProperty: 'color',
+            sizeProperty: 'size',
+            opacityProperty: 'opacity',
+            paletteSource: 'palette',
+            controls,
+        };
+    }
     constructor(core) {
         super(core);
         this.selectionHandler = new KritzelSelectionHandler(this._core);

package/dist/collection/classes/tools/shape-tool.class.js

@@ -8,6 +8,7 @@ export class KritzelShapeTool extends KritzelBaseTool {
     fillColor = 'transparent';
     strokeColor = '#000000';
     strokeWidth = 4;
+    opacity = 1;
     fontFamily = 'Arial';
     fontSize = 16;
     fontColor = '#000000';
@@ -143,6 +144,7 @@ export class KritzelShapeTool extends KritzelBaseTool {
             fillColor: this.fillColor,
             strokeColor: this.strokeColor,
             strokeWidth: this.strokeWidth,
+            opacity: this.opacity,
             fontSize: this.fontSize,
             fontFamily: this.fontFamily,
             fontColor: this.fontColor,

package/dist/collection/classes/tools/text-tool.class.js

@@ -6,6 +6,7 @@ export class KritzelTextTool extends KritzelBaseTool {
     fontFamily = 'Arial';
     fontSize = 16;
     fontColor = '#000000';
+    opacity = 1;
     palette = [
         '#000000',
         '#FFFFFF',
@@ -56,6 +57,7 @@ export class KritzelTextTool extends KritzelBaseTool {
             const clientY = event.clientY - this._core.store.offsetY;
             const text = KritzelText.create(this._core, this.fontSize, this.fontFamily);
             text.fontColor = this.fontColor;
+            text.opacity = this.opacity;
             text.translateX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
             text.translateY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
             text.zIndex = this._core.store.currentZIndex;
@@ -90,6 +92,7 @@ export class KritzelTextTool extends KritzelBaseTool {
             const clientY = Math.round(activePointers[0].clientY - this._core.store.offsetY);
             const text = KritzelText.create(this._core, this.fontSize, this.fontFamily);
             text.fontColor = this.fontColor;
+            text.opacity = this.opacity;
             text.translateX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
             text.translateY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
             text.zIndex = this._core.store.currentZIndex;

package/dist/collection/collection-manifest.json

@@ -5,6 +5,7 @@
     "components/core/kritzel-engine/kritzel-engine.js",
     "components/ui/kritzel-context-menu/kritzel-context-menu.js",
     "components/shared/kritzel-font-family/kritzel-font-family.js",
+    "components/shared/kritzel-shape-fill/kritzel-shape-fill.js",
     "components/core/kritzel-cursor-trail/kritzel-cursor-trail.js",
     "components/core/kritzel-editor/kritzel-editor.js",
     "components/shared/kritzel-color/kritzel-color.js",
@@ -12,21 +13,22 @@
     "components/shared/kritzel-font/kritzel-font.js",
     "components/shared/kritzel-font-size/kritzel-font-size.js",
     "components/shared/kritzel-icon/kritzel-icon.js",
+    "components/shared/kritzel-line-endings/kritzel-line-endings.js",
     "components/shared/kritzel-menu/kritzel-menu.js",
     "components/shared/kritzel-menu-item/kritzel-menu-item.js",
+    "components/shared/kritzel-opacity-slider/kritzel-opacity-slider.js",
     "components/shared/kritzel-portal/kritzel-portal.js",
     "components/shared/kritzel-split-button/kritzel-split-button.js",
     "components/shared/kritzel-stroke-size/kritzel-stroke-size.js",
     "components/shared/kritzel-tooltip/kritzel-tooltip.js",
-    "components/ui/kritzel-control-brush-config/kritzel-control-brush-config.js",
-    "components/ui/kritzel-control-text-config/kritzel-control-text-config.js",
     "components/ui/kritzel-controls/kritzel-controls.js",
+    "components/ui/kritzel-tool-config/kritzel-tool-config.js",
     "components/ui/kritzel-utility-panel/kritzel-utility-panel.js",
     "components/ui/kritzel-workspace-manager/kritzel-workspace-manager.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.40.1",
+    "version": "4.41.0",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.js

@@ -63,7 +63,7 @@ export class KritzelCursorTrail {
         }
     }
     render() {
-        return (h(Host, { key: '556238ffd7eeda2d400039333a37853ebfcca1b6' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: 'a3f451cc9f142f018d0025eb7a68c1bdff5fc0d9', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
+        return (h(Host, { key: '65563f09091c0014046b65d424b4cecf89d4a407' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: '9634426566a9cd69cbc63f419726af16826e45f9', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
                 position: 'absolute',
                 left: '0',
                 top: '0',
@@ -107,7 +107,8 @@ export class KritzelCursorTrail {
                         "KritzelCore": {
                             "location": "import",
                             "path": "../../../classes/core/core.class",
-                            "id": "src/classes/core/core.class.ts::KritzelCore"
+                            "id": "src/classes/core/core.class.ts::KritzelCore",
+                            "referenceLocation": "KritzelCore"
                         }
                     }
                 },

package/dist/collection/components/core/kritzel-editor/kritzel-editor.js

@@ -264,7 +264,7 @@ export class KritzelEditor {
         }
     }
     render() {
-        return (h(Host, { key: 'dd67bea86f807f0ccd5905183e73713a015d6bee' }, h("kritzel-workspace-manager", { key: '557edc7e3a131d338be6df91698ba6923e7bc50e', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: '98969d0f2bb5a9a365885fb4765e0c04c1394caa', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event) }), h("kritzel-controls", { key: '6092f393562af07643622c07d432f6100497aaf0', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, onIsControlsReady: () => (this.isControlsReady = true) })));
+        return (h(Host, { key: '46500c70e4c5321532eddc7f6aa96210c0fe73c8' }, h("kritzel-workspace-manager", { key: '70f780b4d42281c6c37b3fd16acab1541cc84ee1', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: 'a4906f8ac2d42126a4e55ad7c16697aca25763fb', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event) }), h("kritzel-controls", { key: '4d08c06fa2c6e4f5c3c75c5e5a60bddb61083b98', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, onIsControlsReady: () => (this.isControlsReady = true) })));
     }
     static get is() { return "kritzel-editor"; }
     static get originalStyleUrls() {
@@ -329,7 +329,8 @@ export class KritzelEditor {
                         "KritzelToolbarControl": {
                             "location": "import",
                             "path": "../../../interfaces/toolbar-control.interface",
-                            "id": "src/interfaces/toolbar-control.interface.ts::KritzelToolbarControl"
+                            "id": "src/interfaces/toolbar-control.interface.ts::KritzelToolbarControl",
+                            "referenceLocation": "KritzelToolbarControl"
                         }
                     }
                 },
@@ -353,7 +354,8 @@ export class KritzelEditor {
                         "ContextMenuItem": {
                             "location": "import",
                             "path": "../../../interfaces/context-menu-item.interface",
-                            "id": "src/interfaces/context-menu-item.interface.ts::ContextMenuItem"
+                            "id": "src/interfaces/context-menu-item.interface.ts::ContextMenuItem",
+                            "referenceLocation": "ContextMenuItem"
                         }
                     }
                 },
@@ -377,7 +379,8 @@ export class KritzelEditor {
                         "ContextMenuItem": {
                             "location": "import",
                             "path": "../../../interfaces/context-menu-item.interface",
-                            "id": "src/interfaces/context-menu-item.interface.ts::ContextMenuItem"
+                            "id": "src/interfaces/context-menu-item.interface.ts::ContextMenuItem",
+                            "referenceLocation": "ContextMenuItem"
                         }
                     }
                 },
@@ -464,7 +467,8 @@ export class KritzelEditor {
                         "KritzelSyncConfig": {
                             "location": "import",
                             "path": "../../../interfaces/sync-config.interface",
-                            "id": "src/interfaces/sync-config.interface.ts::KritzelSyncConfig"
+                            "id": "src/interfaces/sync-config.interface.ts::KritzelSyncConfig",
+                            "referenceLocation": "KritzelSyncConfig"
                         }
                     }
                 },
@@ -528,7 +532,8 @@ export class KritzelEditor {
                         "KritzelBaseObject": {
                             "location": "import",
                             "path": "../../../classes/objects/base-object.class",
-                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject"
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
+                            "referenceLocation": "KritzelBaseObject"
                         }
                     }
                 }
@@ -549,7 +554,8 @@ export class KritzelEditor {
                         "KritzelUndoState": {
                             "location": "import",
                             "path": "../../..",
-                            "id": "src/index.ts::KritzelUndoState"
+                            "id": "src/index.ts::KritzelUndoState",
+                            "referenceLocation": "KritzelUndoState"
                         }
                     }
                 }
@@ -577,7 +583,8 @@ export class KritzelEditor {
                         "KritzelBaseObject": {
                             "location": "import",
                             "path": "../../../classes/objects/base-object.class",
-                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject"
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
+                            "referenceLocation": "KritzelBaseObject"
                         }
                     },
                     "return": "Promise<T>"
@@ -607,7 +614,8 @@ export class KritzelEditor {
                         "KritzelBaseObject": {
                             "location": "import",
                             "path": "../../../classes/objects/base-object.class",
-                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject"
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
+                            "referenceLocation": "KritzelBaseObject"
                         }
                     },
                     "return": "Promise<T>"
@@ -641,7 +649,8 @@ export class KritzelEditor {
                         "KritzelBaseObject": {
                             "location": "import",
                             "path": "../../../classes/objects/base-object.class",
-                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject"
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
+                            "referenceLocation": "KritzelBaseObject"
                         },
                         "Partial": {
                             "location": "global",
@@ -675,7 +684,8 @@ export class KritzelEditor {
                         "KritzelBaseObject": {
                             "location": "import",
                             "path": "../../../classes/objects/base-object.class",
-                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject"
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
+                            "referenceLocation": "KritzelBaseObject"
                         }
                     },
                     "return": "Promise<T>"
@@ -697,7 +707,8 @@ export class KritzelEditor {
                         "KritzelBaseObject": {
                             "location": "import",
                             "path": "../../../classes/objects/base-object.class",
-                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject"
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
+                            "referenceLocation": "KritzelBaseObject"
                         },
                         "HTMLElement": {
                             "location": "global",
@@ -731,7 +742,8 @@ export class KritzelEditor {
                         "KritzelBaseObject": {
                             "location": "import",
                             "path": "../../../classes/objects/base-object.class",
-                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject"
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
+                            "referenceLocation": "KritzelBaseObject"
                         }
                     },
                     "return": "Promise<void>"
@@ -791,7 +803,8 @@ export class KritzelEditor {
                         "KritzelBaseObject": {
                             "location": "import",
                             "path": "../../../classes/objects/base-object.class",
-                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject"
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
+                            "referenceLocation": "KritzelBaseObject"
                         },
                         "HTMLElement": {
                             "location": "global",
@@ -829,7 +842,8 @@ export class KritzelEditor {
                         "KritzelWorkspace": {
                             "location": "import",
                             "path": "../../../classes/core/workspace.class",
-                            "id": "src/classes/core/workspace.class.ts::KritzelWorkspace"
+                            "id": "src/classes/core/workspace.class.ts::KritzelWorkspace",
+                            "referenceLocation": "KritzelWorkspace"
                         }
                     },
                     "return": "Promise<KritzelWorkspace>"
@@ -855,7 +869,8 @@ export class KritzelEditor {
                         "KritzelWorkspace": {
                             "location": "import",
                             "path": "../../../classes/core/workspace.class",
-                            "id": "src/classes/core/workspace.class.ts::KritzelWorkspace"
+                            "id": "src/classes/core/workspace.class.ts::KritzelWorkspace",
+                            "referenceLocation": "KritzelWorkspace"
                         }
                     },
                     "return": "Promise<void>"
@@ -881,7 +896,8 @@ export class KritzelEditor {
                         "KritzelWorkspace": {
                             "location": "import",
                             "path": "../../../classes/core/workspace.class",
-                            "id": "src/classes/core/workspace.class.ts::KritzelWorkspace"
+                            "id": "src/classes/core/workspace.class.ts::KritzelWorkspace",
+                            "referenceLocation": "KritzelWorkspace"
                         }
                     },
                     "return": "Promise<void>"
@@ -903,7 +919,8 @@ export class KritzelEditor {
                         "KritzelWorkspace": {
                             "location": "import",
                             "path": "../../../classes/core/workspace.class",
-                            "id": "src/classes/core/workspace.class.ts::KritzelWorkspace"
+                            "id": "src/classes/core/workspace.class.ts::KritzelWorkspace",
+                            "referenceLocation": "KritzelWorkspace"
                         }
                     },
                     "return": "Promise<KritzelWorkspace[]>"
@@ -925,7 +942,8 @@ export class KritzelEditor {
                         "KritzelWorkspace": {
                             "location": "import",
                             "path": "../../../classes/core/workspace.class",
-                            "id": "src/classes/core/workspace.class.ts::KritzelWorkspace"
+                            "id": "src/classes/core/workspace.class.ts::KritzelWorkspace",
+                            "referenceLocation": "KritzelWorkspace"
                         }
                     },
                     "return": "Promise<KritzelWorkspace>"