@kritzel/engine 0.4.31

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

@@ -0,0 +1,380 @@
+import { Host, h } from "@stencil/core";
+import { KritzelPath } from "../../classes/objects/path.class";
+import { KritzelLine } from "../../classes/objects/line.class";
+const STALE_THRESHOLD_MS = 10_000;
+const REMOVE_THRESHOLD_MS = 30_000;
+const CLEANUP_INTERVAL_MS = 3_000;
+export class KritzelAwarenessCursors {
+    core;
+    showEdgeIndicators = true;
+    edgeIndicatorPadding = 8;
+    remoteCursors = new Map();
+    objectVersion = 0;
+    cleanupIntervalId;
+    objectChangeRafId = null;
+    removeAwarenessChangeListener;
+    removeObjectsChangeListener;
+    componentDidLoad() {
+        this.removeAwarenessChangeListener = this.core.store.objects?.onAwarenessChange(states => {
+            this.handleAwarenessChange(states);
+        });
+        this.removeObjectsChangeListener = this.core.store.objects?.onObjectsChange(() => {
+            this.handleRemoteObjectChange();
+        });
+        this.cleanupIntervalId = setInterval(() => {
+            this.cleanupStaleCursors();
+        }, CLEANUP_INTERVAL_MS);
+        if (this.cleanupIntervalId && typeof this.cleanupIntervalId.unref === 'function') {
+            this.cleanupIntervalId.unref();
+        }
+    }
+    disconnectedCallback() {
+        if (this.removeAwarenessChangeListener) {
+            this.removeAwarenessChangeListener();
+            this.removeAwarenessChangeListener = undefined;
+        }
+        if (this.removeObjectsChangeListener) {
+            this.removeObjectsChangeListener();
+            this.removeObjectsChangeListener = undefined;
+        }
+        if (this.cleanupIntervalId && typeof globalThis.clearInterval === 'function') {
+            globalThis.clearInterval(this.cleanupIntervalId);
+            this.cleanupIntervalId = undefined;
+        }
+        if (this.objectChangeRafId !== null && typeof globalThis.cancelAnimationFrame === 'function') {
+            globalThis.cancelAnimationFrame(this.objectChangeRafId);
+            this.objectChangeRafId = null;
+        }
+    }
+    handleAwarenessChange(states) {
+        const localClientId = this.core.store.objects?.localClientId;
+        const now = Date.now();
+        const updated = new Map(this.remoteCursors);
+        // Track which clientIds are still present
+        const activeClientIds = new Set();
+        states.forEach((state, clientId) => {
+            if (clientId === localClientId)
+                return;
+            if (!state.user)
+                return;
+            activeClientIds.add(clientId);
+            const user = state.user;
+            const cursor = state.cursor;
+            const activeObjectId = state.activeObjectId || null;
+            const selectionBox = state.selectionBox || null;
+            const existing = updated.get(clientId);
+            const cursorMoved = !existing ||
+                !existing.cursor !== !cursor ||
+                (cursor && existing.cursor && (cursor.x !== existing.cursor.x || cursor.y !== existing.cursor.y));
+            updated.set(clientId, {
+                clientId,
+                user,
+                cursor,
+                activeObjectId,
+                selectionBox,
+                lastUpdated: now,
+                lastCursorMove: cursorMoved ? now : (existing?.lastCursorMove ?? now),
+            });
+        });
+        // Remove cursors for disconnected clients
+        for (const clientId of updated.keys()) {
+            if (!activeClientIds.has(clientId)) {
+                updated.delete(clientId);
+            }
+        }
+        this.remoteCursors = updated;
+    }
+    cleanupStaleCursors() {
+        const now = Date.now();
+        let changed = false;
+        const updated = new Map(this.remoteCursors);
+        for (const [clientId, cursor] of updated) {
+            if (now - cursor.lastUpdated > REMOVE_THRESHOLD_MS) {
+                updated.delete(clientId);
+                changed = true;
+            }
+            else if (!changed && now - cursor.lastCursorMove > STALE_THRESHOLD_MS) {
+                changed = true;
+            }
+        }
+        if (changed) {
+            this.remoteCursors = updated;
+        }
+    }
+    isStale(cursor) {
+        return Date.now() - cursor.lastCursorMove > STALE_THRESHOLD_MS;
+    }
+    hasActiveDrawingCursors() {
+        for (const cursor of this.remoteCursors.values()) {
+            if (cursor.activeObjectId)
+                return true;
+        }
+        return false;
+    }
+    handleRemoteObjectChange() {
+        if (!this.hasActiveDrawingCursors())
+            return;
+        // Debounce via rAF to batch multiple rapid Yjs updates into a single re-render
+        if (this.objectChangeRafId !== null)
+            return;
+        this.objectChangeRafId = requestAnimationFrame(() => {
+            this.objectChangeRafId = null;
+            this.objectVersion++;
+        });
+    }
+    getActiveObjectTip(objectId) {
+        const obj = this.core.store.objects?.findById(objectId);
+        if (!obj)
+            return null;
+        if (obj instanceof KritzelPath && !obj.isCompleted) {
+            const lastPoint = obj.points[obj.points.length - 1];
+            if (!lastPoint)
+                return null;
+            return {
+                x: (lastPoint[0] - obj.x) / obj.scale + obj.translateX,
+                y: (lastPoint[1] - obj.y) / obj.scale + obj.translateY,
+            };
+        }
+        if (obj instanceof KritzelLine && !obj.isCompleted) {
+            return {
+                x: (obj.endX - obj.x) / obj.scale + obj.translateX,
+                y: (obj.endY - obj.y) / obj.scale + obj.translateY,
+            };
+        }
+        // Shapes normalize their bounding box (x/y always top-left, width/height
+        // always positive), so we can't determine which corner the user is actively
+        // dragging. Fall back to the throttled awareness cursor position instead.
+        return null;
+    }
+    worldToScreen(worldX, worldY) {
+        const { scale, translateX, translateY } = this.core.store.state;
+        return {
+            x: worldX * scale + translateX,
+            y: worldY * scale + translateY,
+        };
+    }
+    isInViewport(screenX, screenY) {
+        const { viewportWidth, viewportHeight } = this.core.store.state;
+        return screenX >= 0 && screenX <= viewportWidth && screenY >= 0 && screenY <= viewportHeight;
+    }
+    clampToEdge(screenX, screenY) {
+        const { viewportWidth, viewportHeight } = this.core.store.state;
+        const padding = this.edgeIndicatorPadding; // 8px
+        // Clamp symmetrically
+        const clampedX = Math.max(padding, Math.min(viewportWidth - padding, screenX));
+        const clampedY = Math.max(padding, Math.min(viewportHeight - padding, screenY));
+        // Determine nearest edge to position avatar inside
+        const distLeft = clampedX - padding;
+        const distRight = (viewportWidth - padding) - clampedX;
+        const distTop = clampedY - padding;
+        const distBottom = (viewportHeight - padding) - clampedY;
+        let edge = 'top';
+        const minDist = Math.min(distLeft, distRight, distTop, distBottom);
+        if (minDist === distLeft)
+            edge = 'left';
+        else if (minDist === distRight)
+            edge = 'right';
+        else if (minDist === distTop)
+            edge = 'top';
+        else
+            edge = 'bottom';
+        const angle = Math.atan2(screenY - clampedY, screenX - clampedX);
+        return { x: clampedX, y: clampedY, angle, edge };
+    }
+    getUserDisplayName(user) {
+        if (user.displayName)
+            return user.displayName;
+        if (user.firstName || user.lastName) {
+            return [user.firstName, user.lastName].filter(Boolean).join(' ');
+        }
+        return 'Unknown';
+    }
+    getInitials(name) {
+        const parts = name.trim().split(/\s+/);
+        if (parts.length === 0 || (parts.length === 1 && parts[0].length <= 1)) {
+            return name;
+        }
+        if (parts.length === 1) {
+            return parts[0][0].toUpperCase();
+        }
+        return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+    }
+    render() {
+        // Read reactive viewport state so Stencil re-renders on pan/zoom
+        const _scale = this.core.store.state.scale;
+        const _tx = this.core.store.state.translateX;
+        const _ty = this.core.store.state.translateY;
+        // Suppress unused variable warnings — these reads trigger Stencil reactivity
+        void _scale;
+        void _tx;
+        void _ty;
+        void this.objectVersion;
+        const cursors = Array.from(this.remoteCursors.values());
+        return (h(Host, { key: 'cf00004efc0c60e81bd6b2f19ecb7ca066396980' }, cursors.map(remoteCursor => {
+            if (!remoteCursor.cursor)
+                return null;
+            // When a remote user is actively drawing, derive cursor position from
+            // the object's latest coordinates (synced via Yjs) instead of the
+            // throttled awareness cursor position
+            let screen;
+            let trackingObject = false;
+            if (remoteCursor.activeObjectId) {
+                const tip = this.getActiveObjectTip(remoteCursor.activeObjectId);
+                if (tip) {
+                    trackingObject = true;
+                    screen = this.worldToScreen(tip.x, tip.y);
+                }
+                else {
+                    screen = this.worldToScreen(remoteCursor.cursor.x, remoteCursor.cursor.y);
+                }
+            }
+            else {
+                screen = this.worldToScreen(remoteCursor.cursor.x, remoteCursor.cursor.y);
+            }
+            const inViewport = this.isInViewport(screen.x, screen.y);
+            const stale = this.isStale(remoteCursor);
+            const color = remoteCursor.user.color || '#6B7280';
+            if (inViewport) {
+                return this.renderCursor(remoteCursor, screen.x, screen.y, color, stale, trackingObject);
+            }
+            if (this.showEdgeIndicators) {
+                return this.renderEdgeIndicator(remoteCursor, screen.x, screen.y, color, stale, trackingObject);
+            }
+            return null;
+        }), cursors.map(remoteCursor => {
+            if (!remoteCursor.selectionBox)
+                return null;
+            const color = remoteCursor.user.color || '#6B7280';
+            const box = remoteCursor.selectionBox;
+            const topLeft = this.worldToScreen(box.x, box.y);
+            const { scale } = this.core.store.state;
+            const screenWidth = box.width * scale;
+            const screenHeight = box.height * scale;
+            return (h("div", { key: `selection-box-${remoteCursor.clientId}`, class: "remote-selection-box", style: {
+                    transform: `translate(${topLeft.x}px, ${topLeft.y}px)`,
+                    width: `${screenWidth}px`,
+                    height: `${screenHeight}px`,
+                    backgroundColor: `color-mix(in srgb, ${color} 20%, transparent)`,
+                    borderColor: `color-mix(in srgb, ${color} 50%, transparent)`,
+                } }));
+        })));
+    }
+    renderCursor(cursor, screenX, screenY, color, stale, trackingObject) {
+        return (h("div", { key: `cursor-${cursor.clientId}`, class: { 'awareness-cursor': true, stale, 'tracking-object': trackingObject }, style: { transform: `translate(${screenX}px, ${screenY}px)` } }, h("svg", { class: "cursor-arrow", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M5 3L19 12L12 13L9 20L5 3Z", fill: color, stroke: "#ffffff", "stroke-width": "1.5", "stroke-linejoin": "round" })), h("span", { class: "cursor-label", style: { backgroundColor: color } }, this.getUserDisplayName(cursor.user))));
+    }
+    renderEdgeIndicator(cursor, screenX, screenY, color, stale, trackingObject) {
+        const clamped = this.clampToEdge(screenX, screenY);
+        const arrowDeg = (clamped.angle * 180) / Math.PI + 90;
+        // Position the username label opposite to the edge
+        const labelOffset = 20;
+        let labelX = 0;
+        let labelY = 0;
+        // Default transform origin is somewhat arbitrary without explicit layout
+        // We'll calculate simple translations relative to center point
+        if (clamped.edge === 'left') {
+            labelX = labelOffset;
+        }
+        else if (clamped.edge === 'right') {
+            labelX = -labelOffset;
+        }
+        else if (clamped.edge === 'top') {
+            labelY = labelOffset;
+        }
+        else if (clamped.edge === 'bottom') {
+            labelY = -labelOffset;
+        }
+        const displayName = this.getUserDisplayName(cursor.user);
+        return (h("div", { key: `edge-${cursor.clientId}`, class: { 'edge-indicator': true, stale, 'tracking-object': trackingObject }, style: {
+                transform: `translate(${clamped.x}px, ${clamped.y}px)`,
+            } }, h("svg", { class: { 'edge-arrow': true, stale }, width: "16", height: "16", viewBox: "0 0 16 16", style: { transform: `rotate(${arrowDeg}deg)` } }, h("path", { d: "M8 1L14 13H2L8 1Z", fill: color, stroke: "#ffffff", "stroke-width": "1.5", "stroke-linejoin": "round" })), h("span", { class: "edge-label", style: {
+                backgroundColor: color,
+                transform: `translate(${labelX}px, ${labelY}px)`,
+            } }, this.getInitials(displayName))));
+    }
+    static get is() { return "kritzel-awareness-cursors"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-awareness-cursors.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-awareness-cursors.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "core": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelCore",
+                    "resolved": "KritzelCore",
+                    "references": {
+                        "KritzelCore": {
+                            "location": "import",
+                            "path": "../../classes/core/core.class",
+                            "id": "src/classes/core/core.class.ts::KritzelCore",
+                            "referenceLocation": "KritzelCore"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "showEdgeIndicators": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-edge-indicators",
+                "defaultValue": "true"
+            },
+            "edgeIndicatorPadding": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "edge-indicator-padding",
+                "defaultValue": "8"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "remoteCursors": {},
+            "objectVersion": {}
+        };
+    }
+}

package/dist/collection/components/kritzel-cursor-trail/kritzel-cursor-trail.css

@@ -0,0 +1,10 @@
+:host {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+  z-index: 9000;
+}

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

@@ -0,0 +1,153 @@
+import { Host, h } from "@stencil/core";
+import { KritzelMouseButton } from "../../enums/event-button.enum";
+export class KritzelCursorTrail {
+    core;
+    cursorTrailPoints = [];
+    isLeftButtonDown = false;
+    handleMouseDown(ev) {
+        if (ev.pointerType === 'mouse') {
+            if (ev.button === KritzelMouseButton.Left) {
+                this.isLeftButtonDown = true;
+                this.cursorTrailPoints = [];
+            }
+        }
+        if (ev.pointerType === 'touch') {
+            if (this.core.store.state.pointers.size === 1) {
+                this.isLeftButtonDown = true;
+                this.cursorTrailPoints = [];
+            }
+        }
+    }
+    handlePointerMove(ev) {
+        if (!this.isLeftButtonDown) {
+            return;
+        }
+        const newPoint = { x: ev.clientX, y: ev.clientY, timestamp: Date.now() };
+        const updatedTrail = [newPoint, ...this.cursorTrailPoints];
+        if (updatedTrail.length > this.MAX_TRAIL_POINTS) {
+            this.cursorTrailPoints = updatedTrail.slice(0, this.MAX_TRAIL_POINTS);
+        }
+        else {
+            this.cursorTrailPoints = updatedTrail;
+        }
+    }
+    handlePointerUp(ev) {
+        if (ev.pointerType === 'mouse') {
+            if (ev.button === KritzelMouseButton.Left) {
+                this.isLeftButtonDown = false;
+                this.cursorTrailPoints = [];
+            }
+        }
+        if (ev.pointerType === 'touch') {
+            if (this.core.store.state.pointers.size === 0) {
+                this.isLeftButtonDown = false;
+                this.cursorTrailPoints = [];
+            }
+        }
+    }
+    trailCleanupIntervalId;
+    TRAIL_DURATION_MS = 100;
+    MAX_TRAIL_POINTS = 50;
+    componentDidLoad() {
+        this.trailCleanupIntervalId = window.setInterval(() => {
+            const now = Date.now();
+            const newTrailPoints = this.cursorTrailPoints.filter(p => now - p.timestamp < this.TRAIL_DURATION_MS);
+            if (newTrailPoints.length !== this.cursorTrailPoints.length) {
+                this.cursorTrailPoints = newTrailPoints;
+            }
+        }, 50);
+    }
+    disconnectedCallback() {
+        if (this.trailCleanupIntervalId) {
+            window.clearInterval(this.trailCleanupIntervalId);
+        }
+    }
+    render() {
+        return (h(Host, { key: '707e81b135931233131a830d6fc63e721e381287' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: 'b262b0e3a0cf3b1887ee6acedb2f00d72e95db7e', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
+                position: 'absolute',
+                left: '0',
+                top: '0',
+                width: '100%',
+                height: '100%',
+                pointerEvents: 'none',
+                opacity: 'var(--kritzel-cursor-trail-opacity, 0.6)',
+                zIndex: '9000',
+            } }, this.cursorTrailPoints.slice(1).map((point, index) => {
+            const prevPoint = this.cursorTrailPoints[index];
+            const now = Date.now();
+            const age = now - point.timestamp;
+            const progress = Math.max(0, Math.min(1, age / this.TRAIL_DURATION_MS));
+            if (progress >= 1)
+                return null;
+            const baseStrokeWidth = Math.max(2, 15 * (1 - progress));
+            return (h("line", { key: `trail-segment-${point.timestamp}`, x1: prevPoint.x.toString(), y1: prevPoint.y.toString(), x2: point.x.toString(), y2: point.y.toString(), stroke: "var(--kritzel-cursor-trail-color, rgb(228, 228, 228))", "stroke-width": baseStrokeWidth.toString(), "stroke-linecap": "round" }));
+        })))));
+    }
+    static get is() { return "kritzel-cursor-trail"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-cursor-trail.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-cursor-trail.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "core": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelCore",
+                    "resolved": "KritzelCore",
+                    "references": {
+                        "KritzelCore": {
+                            "location": "import",
+                            "path": "../../classes/core/core.class",
+                            "id": "src/classes/core/core.class.ts::KritzelCore",
+                            "referenceLocation": "KritzelCore"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "cursorTrailPoints": {},
+            "isLeftButtonDown": {}
+        };
+    }
+    static get listeners() {
+        return [{
+                "name": "pointerdown",
+                "method": "handleMouseDown",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "pointermove",
+                "method": "handlePointerMove",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "pointerup",
+                "method": "handlePointerUp",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

package/dist/collection/components/kritzel-engine/kritzel-engine.css

@@ -0,0 +1,81 @@
+:host {
+  display: block;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  isolation: isolate;
+  background-color: var(--kritzel-engine-background-color, #ffffff);
+}
+
+:host,
+:host * {
+  touch-action: none;
+  user-select: none;
+}
+
+.ProseMirror {
+  outline: none;
+}
+
+p, h1, h2, h3, h4, h5, h6, blockquote, pre {
+  margin: 0;
+  padding: 0;
+}
+
+.debug-panel {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  right: 0;
+}
+
+.origin {
+  position: relative;
+  top: 0;
+  left: 0;
+  height: 0;
+  width: 0;
+  pointer-events: none;
+  -webkit-transform-origin: top left;
+  -moz-transform-origin: top left;
+  transform-origin: top left;
+  overflow: visible;
+}
+
+.object {
+  overflow: visible;
+}
+
+.kritzel-image-object--first-reveal {
+  animation: kritzel-image-first-reveal 180ms ease-out both;
+  will-change: filter;
+}
+
+@keyframes kritzel-image-first-reveal {
+  from {
+    filter: opacity(0);
+  }
+
+  to {
+    filter: opacity(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kritzel-image-object--first-reveal {
+    animation: none;
+  }
+}
+
+.PlaygroundEditorTheme__quote {
+  margin: 0;
+  margin-left: 20px;
+  margin-bottom: 10px;
+  font-size: 15px;
+  color: rgb(101, 103, 107);
+  border-left-color: rgb(206, 208, 212);
+  border-left-width: 4px;
+  border-left-style: solid;
+  padding-left: 16px;
+}