@kritzel/engine 0.4.31

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

@@ -0,0 +1,251 @@
+import { KritzelShape } from "../objects/shape.class";
+import { KritzelBaseTool } from "./base-tool.class";
+import { KritzelEventHelper } from "../../helpers/event.helper";
+import { ShapeType } from "../../enums/shape-type.enum";
+import { DEFAULT_COLOR_PALETTE } from "../../constants/color-palette.constants";
+import { DEFAULT_STROKE_SIZES } from "../../constants/stroke-size.constants";
+/**
+ * Shape tool for drawing geometric shapes (rectangles, ellipses, etc.) on the canvas.
+ * Creates shapes by tracking a drag gesture to define the bounding box.
+ * Supports configurable shape type, fill color, stroke color, stroke width, opacity, and text properties.
+ * Automatically switches to selection tool after shape completion.
+ */
+export class KritzelShapeTool extends KritzelBaseTool {
+    toolType = 'shape';
+    /** The type of shape to create (rectangle, ellipse, etc.) */
+    shapeType = ShapeType.Rectangle;
+    /** The fill color of the shape (supports theme-aware light/dark colors) */
+    fillColor = { light: 'transparent', dark: 'transparent' };
+    /** The stroke color of the shape border */
+    strokeColor = DEFAULT_COLOR_PALETTE[0];
+    /** The stroke width of the shape border in pixels */
+    strokeWidth = 4;
+    /** The opacity of the shape (0-1) */
+    opacity = 1;
+    /** The font family for text inside the shape */
+    fontFamily = 'Arial';
+    /** The font size for text inside the shape in pixels */
+    fontSize = 16;
+    /** The font color for text inside the shape */
+    fontColor = DEFAULT_COLOR_PALETTE[0];
+    /** Available color palette for the shape tool */
+    palette = [...DEFAULT_COLOR_PALETTE];
+    /** Available stroke size presets for the shape tool */
+    sizes = [...DEFAULT_STROKE_SIZES];
+    /** X coordinate where the shape drawing started */
+    startX = 0;
+    /** Y coordinate where the shape drawing started */
+    startY = 0;
+    /** Whether currently drawing a shape */
+    isDrawing = false;
+    /** Reference to the shape being drawn */
+    currentShape = null;
+    /**
+     * Creates a new instance of KritzelShapeTool.
+     * @param core - The KritzelCore instance that provides access to application state and functionality
+     */
+    constructor(core) {
+        super(core);
+    }
+    /**
+     * Handles pointer down events to start drawing a new shape or edit an existing one.
+     * If clicking on an existing shape, enters edit mode to modify its text content.
+     * Otherwise, begins drawing a new shape at the pointer position.
+     * @param event - The PointerEvent containing pointer position and input type information
+     */
+    handlePointerDown(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        if (event.pointerType === 'mouse') {
+            const path = event.composedPath().slice(1);
+            const objectElement = path.find(element => element.classList && element.classList.contains('object'));
+            const object = this._core.findObjectById(objectElement?.id);
+            const activeShape = this._core.store.activeShape;
+            if (activeShape === null && object instanceof KritzelShape) {
+                object.edit(event);
+                return;
+            }
+            if (activeShape !== null && object instanceof KritzelShape) {
+                activeShape.save();
+                object.edit(event);
+                return;
+            }
+            if (activeShape !== null && object instanceof KritzelShape === false) {
+                this._core.resetActiveShape();
+                this._core.store.setState('activeTool', this._core.toolRegistry.getTool('selection'));
+                return;
+            }
+            if (KritzelEventHelper.isLeftClick(event) === false) {
+                return;
+            }
+            this.startDrawing(event.clientX, event.clientY);
+        }
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+            const activePointers = Array.from(this._core.store.state.pointers.values());
+            const path = event.composedPath().slice(1);
+            const objectElement = path.find(element => element.classList && element.classList.contains('object'));
+            const object = this._core.findObjectById(objectElement?.id);
+            const activeShape = this._core.store.activeShape;
+            if (activeShape === null && object instanceof KritzelShape) {
+                object.edit(event);
+                return;
+            }
+            if (activeShape !== null && object instanceof KritzelShape) {
+                activeShape.save();
+                object.edit(event);
+                return;
+            }
+            if (activeShape !== null && object instanceof KritzelShape === false) {
+                this._core.resetActiveShape();
+                this._core.store.setState('activeTool', this._core.toolRegistry.getTool('selection'));
+                return;
+            }
+            if (activePointers.length > 1) {
+                return;
+            }
+            const clientX = Math.round(activePointers[0].clientX);
+            const clientY = Math.round(activePointers[0].clientY);
+            this.startDrawing(clientX, clientY);
+        }
+    }
+    /**
+     * Handles pointer move events to update the shape size while drawing.
+     * Updates the current shape's dimensions based on the distance from the start point.
+     * Only processes events when actively drawing a shape.
+     * @param event - The PointerEvent containing the current pointer position
+     */
+    handlePointerMove(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        if (!this.isDrawing || !this.currentShape) {
+            return;
+        }
+        if (event.pointerType === 'mouse') {
+            this.updateShapeSize(event.clientX, event.clientY);
+        }
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+            const activePointers = Array.from(this._core.store.state.pointers.values());
+            if (activePointers.length === 1) {
+                const clientX = Math.round(activePointers[0].clientX);
+                const clientY = Math.round(activePointers[0].clientY);
+                this.updateShapeSize(clientX, clientY);
+            }
+        }
+    }
+    /**
+     * Handles pointer up events to complete the shape drawing.
+     * Finalizes the shape if large enough, or removes it if too small (accidental click).
+     * Switches to selection tool with the shape selected after completion.
+     * @param event - The PointerEvent indicating the end of the drawing gesture
+     */
+    handlePointerUp(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        if (!this.isDrawing || !this.currentShape) {
+            return;
+        }
+        this.finishDrawing();
+    }
+    /**
+     * Initializes the shape drawing process at the given screen coordinates.
+     * Creates a new KritzelShape object with initial dimensions of 1x1 pixel.
+     * Follows the same coordinate pattern as LineTool/BrushTool for consistency.
+     * @param clientX - The X coordinate in screen/client space
+     * @param clientY - The Y coordinate in screen/client space
+     */
+    startDrawing(clientX, clientY) {
+        // Store screen coordinates (relative to host element)
+        const viewportScale = this._core.store.state.scale;
+        const lockScale = this._core.store.state.lockDrawingScale;
+        const divider = lockScale ? viewportScale : 1;
+        this.startX = (clientX - this._core.store.offsetX) / divider;
+        this.startY = (clientY - this._core.store.offsetY) / divider;
+        this.isDrawing = true;
+        // Create shape using screen coordinates, following Path/Line pattern
+        this.currentShape = KritzelShape.create(this._core, {
+            x: this.startX,
+            y: this.startY,
+            translateX: -this._core.store.state.translateX / divider,
+            translateY: -this._core.store.state.translateY / divider,
+            width: 1,
+            height: 1,
+            shapeType: this.shapeType,
+            fillColor: this.fillColor,
+            strokeColor: this.strokeColor,
+            strokeWidth: this.strokeWidth,
+            opacity: this.opacity,
+            fontSize: this.fontSize,
+            fontFamily: this.fontFamily,
+            scale: lockScale ? 1 : viewportScale,
+        });
+        this._core.store.objects.insert(this.currentShape);
+        this._core.store.objects?.setActiveDrawingObject(this.currentShape.id);
+        this._core.rerender();
+    }
+    /**
+     * Updates the shape's dimensions based on the current pointer position.
+     * Calculates the bounding box from start point to current point and updates
+     * the shape's position and size accordingly. Handles negative drag directions.
+     * @param clientX - The current X coordinate in screen/client space
+     * @param clientY - The current Y coordinate in screen/client space
+     */
+    updateShapeSize(clientX, clientY) {
+        if (!this.currentShape) {
+            return;
+        }
+        const viewportScale = this._core.store.state.scale;
+        const lockScale = this._core.store.state.lockDrawingScale;
+        const divider = lockScale ? viewportScale : 1;
+        const currentX = (clientX - this._core.store.offsetX) / divider;
+        const currentY = (clientY - this._core.store.offsetY) / divider;
+        // Calculate bounding box in screen coordinates
+        const minX = Math.min(this.startX, currentX);
+        const minY = Math.min(this.startY, currentY);
+        const width = Math.abs(currentX - this.startX);
+        const height = Math.abs(currentY - this.startY);
+        // Update shape with screen coordinates
+        this.currentShape.x = minX;
+        this.currentShape.y = minY;
+        this.currentShape.width = Math.max(1, width);
+        this.currentShape.height = Math.max(1, height);
+        // Recalculate world-space translateX/Y
+        // Reset translateX/Y to initial value before updateDimensions
+        this.currentShape.translateX = -this._core.store.state.translateX / divider;
+        this.currentShape.translateY = -this._core.store.state.translateY / divider;
+        this.currentShape.updateDimensions();
+        this._core.store.objects.update(this.currentShape);
+    }
+    /**
+     * Completes the shape drawing process.
+     * Removes shapes smaller than 10x10 pixels (accidental clicks).
+     * For valid shapes, assigns z-index, updates the store, emits change event,
+     * selects the shape, and switches to selection tool.
+     */
+    finishDrawing() {
+        if (!this.currentShape) {
+            return;
+        }
+        // Remove shape if it's too small (likely an accidental click)
+        // Compare in screen space
+        if (this.currentShape.width < 10 && this.currentShape.height < 10) {
+            const shapeId = this.currentShape.id;
+            this._core.store.objects.remove(o => o.id === shapeId);
+        }
+        else {
+            this.currentShape.zIndex = this._core.store.currentZIndex;
+            this._core.store.objects.update(this.currentShape);
+            this._core.engine.emitObjectsChange();
+            this._core.engine.emitObjectsAdded([this.currentShape]);
+            this._core.selectObjects([this.currentShape]);
+            this._core.store.setState('activeTool', this._core.toolRegistry.getTool('selection'));
+        }
+        this.isDrawing = false;
+        this._core.store.objects?.setActiveDrawingObject(null);
+        this.currentShape = null;
+        this._core.store.objects?.stopUndoCapturing();
+        this._core.rerender();
+    }
+}

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

@@ -0,0 +1,179 @@
+import { KritzelText } from "../objects/text.class";
+import { KritzelBaseTool } from "./base-tool.class";
+import { KritzelEventHelper } from "../../helpers/event.helper";
+import { DEFAULT_COLOR_PALETTE } from "../../constants/color-palette.constants";
+import { DEFAULT_FONT_SIZES } from "../../constants/stroke-size.constants";
+/**
+ * Text tool for creating and editing text objects on the canvas.
+ * Clicking creates a new text object at the pointer position and enters edit mode.
+ * Clicking on an existing text object enters edit mode for that object.
+ * Supports configurable font family, size, color, and opacity.
+ */
+export class KritzelTextTool extends KritzelBaseTool {
+    toolType = 'text';
+    /** Backing field for {@link fontFamily}. */
+    _fontFamily = 'Arial';
+    /** Backing field for {@link fontSize}. */
+    _fontSize = 16;
+    /** Backing field for {@link fontColor}. */
+    _fontColor = DEFAULT_COLOR_PALETTE[0];
+    /** Backing field for {@link opacity}. */
+    _opacity = 1;
+    /** The font family for new text objects. */
+    get fontFamily() {
+        return this._core?.store?.activeText?.fontFamily ?? this._fontFamily;
+    }
+    set fontFamily(value) {
+        this._fontFamily = value;
+        this.applyToActiveText({ fontFamily: value });
+    }
+    /** The font size for new text objects in pixels. */
+    get fontSize() {
+        return this._core?.store?.activeText?.fontSize ?? this._fontSize;
+    }
+    set fontSize(value) {
+        this._fontSize = value;
+        this.applyToActiveText({ fontSize: value });
+    }
+    /** The font color for new text objects (supports theme-aware light/dark colors). */
+    get fontColor() {
+        return this._core?.store?.activeText?.fontColor ?? this._fontColor;
+    }
+    set fontColor(value) {
+        this._fontColor = value;
+        this.applyToActiveText({ fontColor: value });
+    }
+    /** The opacity of new text objects (0-1). */
+    get opacity() {
+        return this._core?.store?.activeText?.opacity ?? this._opacity;
+    }
+    set opacity(value) {
+        this._opacity = value;
+        this.applyToActiveText({ opacity: value });
+    }
+    /** Available color palette for the text tool */
+    palette = [...DEFAULT_COLOR_PALETTE];
+    /** Available font size presets for the text tool */
+    sizes = [...DEFAULT_FONT_SIZES];
+    /** Optional custom font options supplied through tool config. */
+    availableFonts;
+    /**
+     * Creates a new instance of KritzelTextTool.
+     * @param core - The KritzelCore instance that provides access to application state and functionality
+     */
+    constructor(core) {
+        super(core);
+    }
+    /**
+     * Propagates a property change to the text object that is currently being edited, if any.
+     * Mirrors the selection tool pattern of pushing tool-config changes down to live objects,
+     * but scoped to the single text in edit mode rather than the current selection.
+     */
+    applyToActiveText(updatedProperties) {
+        const activeText = this._core?.store?.activeText;
+        if (!activeText)
+            return;
+        this._core.updateObject(activeText, updatedProperties);
+        this._core.rerender();
+    }
+    /**
+     * Handles pointer down events for text creation and editing.
+     * If clicking on an existing text object, enters edit mode for that object.
+     * If there's an active text being edited and clicking elsewhere, saves the active text
+     * and switches to selection tool. If clicking on empty space, creates a new text object
+     * at that position and enters edit mode.
+     * @param event - The PointerEvent containing pointer position and input type information
+     */
+    handlePointerDown(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        if (event.pointerType === 'mouse') {
+            const path = event.composedPath().slice(1);
+            const objectElement = path.find(element => element.classList && element.classList.contains('object'));
+            const object = objectElement?.id ? this._core.findObjectById(objectElement.id) : null;
+            const activeText = this._core.store.activeText;
+            if (activeText === null && object instanceof KritzelText) {
+                object.edit(event);
+                return;
+            }
+            if (activeText !== null && object instanceof KritzelText) {
+                activeText.save();
+                object.edit(event);
+                return;
+            }
+            if (activeText !== null && object instanceof KritzelText === false) {
+                this._core.resetActiveText();
+                this._core.store.setState('activeTool', this._core.toolRegistry.getTool('selection'));
+                return;
+            }
+            if (KritzelEventHelper.isLeftClick(event) === false) {
+                return;
+            }
+            const clientX = event.clientX - this._core.store.offsetX;
+            const clientY = event.clientY - this._core.store.offsetY;
+            const viewportScale = this._core.store.state.scale;
+            const lockScale = this._core.store.state.lockDrawingScale;
+            const text = KritzelText.create(this._core, this.fontSize, this.fontFamily, lockScale ? 1 : viewportScale);
+            text.fontColor = this.fontColor;
+            text.opacity = this.opacity;
+            text.translateX = (clientX - this._core.store.state.translateX) / viewportScale;
+            text.translateY = (clientY - this._core.store.state.translateY) / viewportScale;
+            text.zIndex = this._core.store.currentZIndex;
+            text.isNewlyCreated = true;
+            this._core.store.objects.insert(text);
+            this._core.rerender();
+            text.edit(event);
+        }
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+            const activePointers = Array.from(this._core.store.state.pointers.values());
+            const path = event.composedPath().slice(1);
+            const objectElement = path.find(element => element.classList && element.classList.contains('object'));
+            const object = objectElement?.id ? this._core.findObjectById(objectElement.id) : null;
+            const activeText = this._core.store.activeText;
+            if (activeText === null && object instanceof KritzelText) {
+                object.edit(event);
+                return;
+            }
+            if (activeText !== null && object instanceof KritzelText) {
+                activeText.save();
+                object.edit(event);
+                return;
+            }
+            if (activeText !== null && object instanceof KritzelText === false) {
+                this._core.resetActiveText();
+                this._core.store.setState('activeTool', this._core.toolRegistry.getTool('selection'));
+                return;
+            }
+            if (activePointers.length > 1) {
+                return;
+            }
+            const clientX = Math.round(activePointers[0].clientX - this._core.store.offsetX);
+            const clientY = Math.round(activePointers[0].clientY - this._core.store.offsetY);
+            const viewportScale = this._core.store.state.scale;
+            const lockScale = this._core.store.state.lockDrawingScale;
+            const text = KritzelText.create(this._core, this.fontSize, this.fontFamily, lockScale ? 1 : viewportScale);
+            text.fontColor = this.fontColor;
+            text.opacity = this.opacity;
+            text.translateX = (clientX - this._core.store.state.translateX) / viewportScale;
+            text.translateY = (clientY - this._core.store.state.translateY) / viewportScale;
+            text.zIndex = this._core.store.currentZIndex;
+            text.isNewlyCreated = true;
+            this._core.store.objects.insert(text);
+            this._core.rerender();
+            text.edit(event);
+        }
+    }
+    /**
+     * Handles pointer up events for text editing focus management.
+     * If there's an active text that is mounted but doesn't have focus,
+     * focuses the text editor at the pointer position to allow typing.
+     * @param event - The PointerEvent containing the pointer position for focus placement
+     */
+    handlePointerUp(event) {
+        const activeText = this._core.store.activeText;
+        if (activeText && activeText.isMounted && !activeText.editor?.hasFocus()) {
+            activeText.focus({ x: event.clientX, y: event.clientY });
+        }
+    }
+}

package/dist/collection/collection-manifest.json

@@ -0,0 +1,17 @@
+{
+  "entries": [
+    "components/kritzel-engine/kritzel-engine.js",
+    "components/kritzel-awareness-cursors/kritzel-awareness-cursors.js",
+    "components/kritzel-cursor-trail/kritzel-cursor-trail.js",
+    "components/kritzel-icon/kritzel-icon.js",
+    "components/kritzel-watermark/kritzel-watermark.js"
+  ],
+  "mixins": [],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.44.2",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/kritzel-awareness-cursors/kritzel-awareness-cursors.css

@@ -0,0 +1,115 @@
+:host {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.awareness-cursor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
+              opacity 300ms ease;
+  will-change: transform;
+}
+
+.awareness-cursor.stale {
+  opacity: 0;
+}
+
+.awareness-cursor.tracking-object {
+  transition-duration: 0ms;
+}
+
+.cursor-arrow {
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
+}
+
+.cursor-label {
+  position: absolute;
+  left: 16px;
+  top: 16px;
+  white-space: nowrap;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: var(--kritzel-awareness-cursor-label-font-size, 12px);
+  color: var(--kritzel-awareness-cursor-label-text-color, #ffffff);
+  padding: 2px 8px;
+  border-radius: 4px;
+  line-height: 1.4;
+  font-weight: 500;
+  pointer-events: none;
+  user-select: none;
+}
+
+.edge-indicator {
+  position: absolute;
+  top: -12px;
+  left: -12px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
+              opacity 300ms ease;
+  will-change: transform;
+  pointer-events: auto;
+  user-select: none;
+  cursor: pointer;
+}
+
+.edge-indicator.stale {
+  opacity: 0;
+}
+
+.edge-indicator.tracking-object {
+  transition-duration: 0ms;
+}
+
+.edge-arrow {
+  position: absolute;
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
+  transition: opacity 300ms ease;
+}
+
+.edge-arrow.stale {
+  opacity: 0;
+}
+
+.edge-label {
+  position: absolute;
+  white-space: nowrap;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: var(--kritzel-awareness-cursor-label-font-size, 12px);
+  color: var(--kritzel-awareness-cursor-label-text-color, #ffffff);
+  padding: 2px 8px;
+  border-radius: 4px;
+  line-height: 1.4;
+  font-weight: 500;
+  pointer-events: none;
+  opacity: 0;
+  transform-origin: center;
+  transition: opacity 150ms ease;
+}
+
+.edge-indicator:hover .edge-label {
+  opacity: 1;
+}
+
+.remote-selection-box {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-width: 2px;
+  border-style: solid;
+  pointer-events: none;
+  will-change: transform, width, height;
+  transition: transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
+              width var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
+              height var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out;
+}