kritzel-stencil 0.3.11 → 0.3.12

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

@@ -129,6 +129,11 @@ export class KritzelEngine {
     onLockDrawingScaleChange(newValue) {
         this.core.store.state.lockDrawingScale = newValue;
     }
+    /** When true, objects fade based on distance to the viewport center. */
+    isObjectDistanceFadingActive = false;
+    onIsObjectDistanceFadingActiveChange() {
+        this.core.rerender();
+    }
     /** The current theme to apply to the editor */
     theme = 'light';
     onThemeChange(newValue) {
@@ -563,7 +568,7 @@ export class KritzelEngine {
         this.core.deselectAllObjects();
         object.id = object.generateId();
         object._core = this.core;
-        object.scale = this.core.store.state.scale;
+        object.scale = object.scale ?? this.core.store.state.scale;
         object.zIndex = this.core.store.currentZIndex;
         object.workspaceId = this.core.store.state.activeWorkspace.id;
         // Handle KritzelText: recreate the editor now that _core is available
@@ -592,7 +597,7 @@ export class KritzelEngine {
                     const oldId = child.id;
                     child.id = child.generateId();
                     child._core = this.core;
-                    child.scale = this.core.store.state.scale;
+                    child.scale = child.scale ?? this.core.store.state.scale;
                     child.zIndex = this.core.store.currentZIndex;
                     child.workspaceId = this.core.store.state.activeWorkspace.id;
                     idRemapping.set(oldId, child.id);
@@ -638,6 +643,82 @@ export class KritzelEngine {
         this.emitObjectsAdded([object]);
         return object;
     }
+    /**
+     * Adds multiple objects to the canvas in a single batch operation.
+     * All objects are inserted within one Yjs transaction (single undo step),
+     * triggering only one rerender cycle. Intended for programmatic streaming
+     * scenarios where per-object overhead would cause stutter.
+     * @param objects - The object instances to add.
+     * @returns The added objects.
+     */
+    async addObjects(objects) {
+        if (objects.length === 0) {
+            return [];
+        }
+        this.core.store.objects.transaction(() => {
+            for (const object of objects) {
+                object.id = object.generateId();
+                object._core = this.core;
+                object.zIndex = this.core.store.currentZIndex;
+                object.workspaceId = this.core.store.state.activeWorkspace.id;
+                if (KritzelClassHelper.isInstanceOf(object, 'KritzelText')) {
+                    const pendingContent = object.content;
+                    object.editor = object.createEditor();
+                    if (pendingContent) {
+                        object.setContent(pendingContent);
+                    }
+                }
+                if (KritzelClassHelper.isInstanceOf(object, 'KritzelGroup') && object._pendingChildren.length > 0) {
+                    const idRemapping = new Map();
+                    const allFlushedChildren = [];
+                    const flushGroup = (group) => {
+                        if (group._pendingChildren.length === 0) {
+                            return;
+                        }
+                        const pending = group._pendingChildren;
+                        group._pendingChildren = [];
+                        group.childIds = [];
+                        pending.forEach(child => {
+                            const oldId = child.id;
+                            child.id = child.generateId();
+                            child._core = this.core;
+                            child.zIndex = this.core.store.currentZIndex;
+                            child.workspaceId = this.core.store.state.activeWorkspace.id;
+                            idRemapping.set(oldId, child.id);
+                            group.childIds.push(child.id);
+                            allFlushedChildren.push(child);
+                            if (KritzelClassHelper.isInstanceOf(child, 'KritzelGroup')) {
+                                flushGroup(child);
+                            }
+                        });
+                    };
+                    flushGroup(object);
+                    allFlushedChildren.forEach(child => {
+                        if (KritzelClassHelper.isInstanceOf(child, 'KritzelLine')) {
+                            if (child.startAnchor && idRemapping.has(child.startAnchor.objectId)) {
+                                child.startAnchor = { objectId: idRemapping.get(child.startAnchor.objectId) };
+                            }
+                            if (child.endAnchor && idRemapping.has(child.endAnchor.objectId)) {
+                                child.endAnchor = { objectId: idRemapping.get(child.endAnchor.objectId) };
+                            }
+                        }
+                    });
+                    allFlushedChildren.forEach(child => {
+                        this.core.addObject(child);
+                    });
+                    object.finalize();
+                    this.core.anchorManager.rebuildIndex();
+                }
+                this.core.addObject(object);
+            }
+        });
+        this.core.rerender();
+        await new Promise(resolve => {
+            requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+        });
+        this.emitObjectsAdded(objects);
+        return objects;
+    }
     /**
      * Updates properties of an existing canvas object.
      * @param object - The object to update.
@@ -667,6 +748,28 @@ export class KritzelEngine {
         this.emitObjectsRemoved([object]);
         return object;
     }
+    /**
+     * Removes multiple objects from the canvas in a single batch operation.
+     * All removals happen within one Yjs transaction (single undo step),
+     * triggering only one rerender cycle. Intended for programmatic streaming
+     * scenarios where per-object overhead would cause stutter.
+     * @param objects - The objects to remove.
+     * @returns The removed objects.
+     */
+    async removeObjects(objects) {
+        const objectsMap = this.core.store.objects;
+        if (!objectsMap || objects.length === 0) {
+            return [];
+        }
+        objectsMap.transaction(() => {
+            for (const object of objects) {
+                this.core.removeObject(object);
+            }
+        });
+        this.core.rerender();
+        this.emitObjectsRemoved(objects);
+        return objects;
+    }
     /** Returns the currently selected objects. Returns an empty array if nothing is selected. */
     async getSelectedObjects() {
         const selectionGroup = this.core.store.selectionGroup;
@@ -1321,6 +1424,12 @@ export class KritzelEngine {
         undoStackSize: 0,
         redoStackSize: 0,
     };
+    _objectDistanceFadeNearScale = 1;
+    _objectDistanceFadeFarScale = 0.15;
+    _objectDistanceFadeMinOpacity = 0;
+    _objectDistanceFadeCloseStartScale = 2;
+    _objectDistanceFadeCloseMaxScale = 4;
+    _objectDistanceFadeCloseMinOpacity = 0;
     syncLoadingState() {
         this.core.store.state.isLoading = this._isWorkspaceLoading || this.isLoading;
     }
@@ -1629,6 +1738,54 @@ export class KritzelEngine {
         KritzelKeyboardHelper.forceHideKeyboard();
         this.core.rerender();
     }
+    getObjectDistanceFadeMultiplier(objectScale, viewportScale) {
+        if (!this.isObjectDistanceFadingActive) {
+            return 1;
+        }
+        const safeViewportScale = Math.max(Number.isFinite(viewportScale) ? viewportScale : 1, Number.EPSILON);
+        const safeObjectScale = Math.max(Number.isFinite(objectScale) ? objectScale : 1, Number.EPSILON);
+        const normalizedScale = safeViewportScale / safeObjectScale;
+        const farFadeMultiplier = this.getFarDistanceFadeMultiplier(normalizedScale);
+        const closeFadeMultiplier = this.getCloseDistanceFadeMultiplier(normalizedScale);
+        return Math.min(farFadeMultiplier, closeFadeMultiplier);
+    }
+    getFarDistanceFadeMultiplier(normalizedScale) {
+        if (normalizedScale >= this._objectDistanceFadeNearScale) {
+            return 1;
+        }
+        if (normalizedScale <= this._objectDistanceFadeFarScale) {
+            return this._objectDistanceFadeMinOpacity;
+        }
+        const progress = (this._objectDistanceFadeNearScale - normalizedScale) /
+            (this._objectDistanceFadeNearScale - this._objectDistanceFadeFarScale);
+        const smooth = progress * progress * (3 - 2 * progress);
+        return 1 - smooth * (1 - this._objectDistanceFadeMinOpacity);
+    }
+    getCloseDistanceFadeMultiplier(normalizedScale) {
+        if (normalizedScale <= this._objectDistanceFadeCloseStartScale) {
+            return 1;
+        }
+        if (normalizedScale >= this._objectDistanceFadeCloseMaxScale) {
+            return this._objectDistanceFadeCloseMinOpacity;
+        }
+        const progress = (normalizedScale - this._objectDistanceFadeCloseStartScale) /
+            (this._objectDistanceFadeCloseMaxScale - this._objectDistanceFadeCloseStartScale);
+        const smooth = progress * progress * (3 - 2 * progress);
+        return 1 - smooth * (1 - this._objectDistanceFadeCloseMinOpacity);
+    }
+    shouldApplyDistanceFade(object) {
+        return (!KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') &&
+            !KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox'));
+    }
+    getObjectEffectiveOpacity(object, viewportScale) {
+        const safeObjectOpacity = Number.isFinite(object.opacity) ? object.opacity : 1;
+        const distanceFadeMultiplier = this.shouldApplyDistanceFade(object)
+            ? this.getObjectDistanceFadeMultiplier(object.scale, viewportScale)
+            : 1;
+        const multiplied = (object.markedForRemoval ? 0.5 : 1) * safeObjectOpacity * distanceFadeMultiplier;
+        const overridden = ((object.markedForRemoval ? 0.5 : safeObjectOpacity) * distanceFadeMultiplier).toString();
+        return { multiplied, overridden };
+    }
     render() {
         if (!this.viewport) {
             return (h(Host, null, this.core.store.state.isLoading && (h("div", { class: "workspace-loading-overlay" }, h("span", { class: "workspace-loading-spinner" }), "Loading..."))));
@@ -1638,6 +1795,7 @@ export class KritzelEngine {
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
         const baseHandleSize = parseFloat(baseHandleSizePx);
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
+        const viewportScale = this.core.store.state.scale;
         const viewportCenterX = this.core.store.state.viewportWidth / 2 + this.core.store.state.translateX;
         const viewportCenterY = this.core.store.state.viewportHeight / 2 + this.core.store.state.translateY;
         const visibleObjects = this.core.store.objectsInViewport;
@@ -1651,39 +1809,34 @@ export class KritzelEngine {
         return (h(Host, null, this.core.store.state.isLoading && (h("div", { class: "workspace-loading-overlay" }, h("span", { class: "workspace-loading-spinner" }), "Loading...")), this.core.store.state.debugInfo.showViewportInfo && (h("div", { class: "debug-panel" }, h("div", null, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", null, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", null, "TranslateX: ", this.core.store.state?.translateX), h("div", null, "TranslateY: ", this.core.store.state?.translateY), h("div", null, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", null, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", null, "PointerCount: ", this.core.store.state.pointers.size), h("div", null, "Scale: ", this.core.store.state?.scale), h("div", null, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", null, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", null, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", null, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", null, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", null, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", null, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", null, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", null, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", null, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", null, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", null, "PointerX: ", this.core.store.state?.pointerX), h("div", null, "PointerY: ", this.core.store.state?.pointerY), h("div", null, "TotalObjects: ", this.core.store.totalObjectCount), h("div", null, "ObjectsInViewport: ", this.core.store.objectsInViewport.length), h("div", null, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", null, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
             } }, visibleObjects?.map(object => {
+            const { multiplied: effectiveOpacity, overridden: effectiveOpacityString } = this.getObjectEffectiveOpacity(object, viewportScale);
             return (h("div", { key: object.id, id: object.id, class: "object", style: {
                     transform: object?.transformationMatrix,
                     transformOrigin: 'top left',
                     position: 'absolute',
                     zIndex: object.zIndex.toString(),
                     pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
-                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (() => {
-                const effectiveOpacity = (object.markedForRemoval ? 0.5 : 1) * object.opacity;
-                return (h("svg", { ref: el => el && object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
-                        height: object?.totalHeight + 'px',
-                        width: object?.totalWidth + 'px',
-                        left: '0',
-                        top: '0',
-                        position: 'absolute',
-                        transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
-                        transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                        pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                        overflow: 'visible',
-                    }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: KritzelColorHelper.applyOpacity(object.fill, effectiveOpacity, currentTheme), stroke: KritzelColorHelper.applyOpacity(object?.stroke, effectiveOpacity, currentTheme), "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' })));
-            })(), KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (() => {
-                const effectiveOpacity = (object.markedForRemoval ? 0.5 : 1) * object.opacity;
-                return (h("svg", { ref: el => el && object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
-                        height: object?.totalHeight + 'px',
-                        width: object?.totalWidth + 'px',
-                        left: '0',
-                        top: '0',
-                        position: 'absolute',
-                        transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
-                        transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                        pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                        overflow: 'visible',
-                    }, viewBox: object?.viewBox }, (object.hasStartArrow || object.hasEndArrow) && (h("defs", null, object.hasStartArrow && (h("marker", { id: object.startMarkerId, markerWidth: object.getArrowSize('start'), markerHeight: object.getArrowSize('start'), refX: 0, refY: object.getArrowSize('start') / 2, orient: "auto-start-reverse", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.start?.style), fill: KritzelColorHelper.applyOpacity(object.getArrowFill('start'), effectiveOpacity), transform: `scale(${object.getArrowSize('start') / 10})` }))), object.hasEndArrow && (h("marker", { id: object.endMarkerId, markerWidth: object.getArrowSize('end'), markerHeight: object.getArrowSize('end'), refX: 0, refY: object.getArrowSize('end') / 2, orient: "auto", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.end?.style), fill: KritzelColorHelper.applyOpacity(object.getArrowFill('end'), effectiveOpacity), transform: `scale(${object.getArrowSize('end') / 10})` }))))), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: "transparent", "stroke-width": Math.max(object?.strokeWidth || 0, 10), "stroke-linecap": "round" }), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: KritzelColorHelper.applyOpacity(object?.stroke, effectiveOpacity, currentTheme), "stroke-width": object?.strokeWidth, "stroke-linecap": "round", "marker-start": object.hasStartArrow ? `url(#${object.startMarkerId})` : undefined, "marker-end": object.hasEndArrow ? `url(#${object.endMarkerId})` : undefined })));
-            })(), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && object.loadState === 'ready' && (h("img", { ref: el => el && object.mount(el), src: object.resolvedSrc || object.src, style: {
+                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => el && object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
+                    height: object?.totalHeight + 'px',
+                    width: object?.totalWidth + 'px',
+                    left: '0',
+                    top: '0',
+                    position: 'absolute',
+                    transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
+                    transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
+                    pointerEvents: object.markedForRemoval ? 'none' : 'auto',
+                    overflow: 'visible',
+                }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: KritzelColorHelper.applyOpacity(object.fill, effectiveOpacity, currentTheme), stroke: KritzelColorHelper.applyOpacity(object?.stroke, effectiveOpacity, currentTheme), "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' }))), KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (h("svg", { ref: el => el && object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
+                    height: object?.totalHeight + 'px',
+                    width: object?.totalWidth + 'px',
+                    left: '0',
+                    top: '0',
+                    position: 'absolute',
+                    transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
+                    transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
+                    pointerEvents: object.markedForRemoval ? 'none' : 'auto',
+                    overflow: 'visible',
+                }, viewBox: object?.viewBox }, (object.hasStartArrow || object.hasEndArrow) && (h("defs", null, object.hasStartArrow && (h("marker", { id: object.startMarkerId, markerWidth: object.getArrowSize('start'), markerHeight: object.getArrowSize('start'), refX: 0, refY: object.getArrowSize('start') / 2, orient: "auto-start-reverse", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.start?.style), fill: KritzelColorHelper.applyOpacity(object.getArrowFill('start'), effectiveOpacity), transform: `scale(${object.getArrowSize('start') / 10})` }))), object.hasEndArrow && (h("marker", { id: object.endMarkerId, markerWidth: object.getArrowSize('end'), markerHeight: object.getArrowSize('end'), refX: 0, refY: object.getArrowSize('end') / 2, orient: "auto", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.end?.style), fill: KritzelColorHelper.applyOpacity(object.getArrowFill('end'), effectiveOpacity), transform: `scale(${object.getArrowSize('end') / 10})` }))))), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: "transparent", "stroke-width": Math.max(object?.strokeWidth || 0, 10), "stroke-linecap": "round" }), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: KritzelColorHelper.applyOpacity(object?.stroke, effectiveOpacity, currentTheme), "stroke-width": object?.strokeWidth, "stroke-linecap": "round", "marker-start": object.hasStartArrow ? `url(#${object.startMarkerId})` : undefined, "marker-end": object.hasEndArrow ? `url(#${object.endMarkerId})` : undefined }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && object.loadState === 'ready' && (h("img", { ref: el => el && object.mount(el), src: object.resolvedSrc || object.src, style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -1691,7 +1844,7 @@ export class KritzelEngine {
                     height: object.totalHeight + 'px',
                     transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                    opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
+                    opacity: effectiveOpacityString,
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                     backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
                     borderColor: KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme),
@@ -1709,7 +1862,7 @@ export class KritzelEngine {
                     height: object.totalHeight + 'px',
                     transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                    opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
+                    opacity: effectiveOpacityString,
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                     backgroundColor: KritzelColorHelper.resolveThemeColor({ light: '#e5e7eb', dark: '#2a2a2a' }, currentTheme),
                     borderColor: object.loadState === 'error'
@@ -1733,7 +1886,7 @@ export class KritzelEngine {
                     height: object.totalHeight + 'px',
                     transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                    opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
+                    opacity: effectiveOpacityString,
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                     backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
                     borderColor: KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme),
@@ -1774,7 +1927,7 @@ export class KritzelEngine {
                     height: object.totalHeight + 'px',
                     transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                    opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
+                    opacity: effectiveOpacityString,
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                 } }, h("div", { id: "text-object", ref: el => el && object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
                     minWidth: object.initialWidth + 'px',
@@ -1787,7 +1940,6 @@ export class KritzelEngine {
                     backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
                     overflow: 'visible',
                 } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (() => {
-                const effectiveOpacity = (object.markedForRemoval ? 0.5 : 1) * object.opacity;
                 const fillResolved = KritzelColorHelper.resolveThemeColor(object.fillColor, currentTheme);
                 const strokeResolved = KritzelColorHelper.resolveThemeColor(object.strokeColor, currentTheme);
                 const isFilled = !!fillResolved && fillResolved !== 'transparent';
@@ -1829,7 +1981,7 @@ export class KritzelEngine {
                     left: `${object.totalWidth}px`,
                     top: '0',
                     zIndex: (object.zIndex + 2).toString(),
-                } }, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "userId: ", object.userId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("div", null, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "assetId: ", object.assetId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "mimeType: ", object.mimeType))))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) &&
+                } }, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "userId: ", object.userId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("div", null, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "assetId: ", object.assetId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "mimeType: ", object.mimeType))))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) &&
                 (() => {
                     const isSelectionGroup = KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup');
                     const localClientId = this.core.store.objects?.localClientId;
@@ -2354,6 +2506,26 @@ export class KritzelEngine {
                 "attribute": "lock-drawing-scale",
                 "defaultValue": "true"
             },
+            "isObjectDistanceFadingActive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, objects fade based on distance to the viewport center."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-object-distance-fading-active",
+                "defaultValue": "false"
+            },
             "theme": {
                 "type": "string",
                 "mutable": false,
@@ -3573,6 +3745,61 @@ export class KritzelEngine {
                         }]
                 }
             },
+            "addObjects": {
+                "complexType": {
+                    "signature": "<T extends KritzelBaseObject>(objects: T[]) => Promise<T[]>",
+                    "parameters": [{
+                            "name": "objects",
+                            "type": "T[]",
+                            "docs": "- The object instances to add."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "T": {
+                            "location": "global",
+                            "id": "global::T"
+                        },
+                        "KritzelBaseObject": {
+                            "location": "import",
+                            "path": "../../../classes/objects/base-object.class",
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
+                            "referenceLocation": "KritzelBaseObject"
+                        },
+                        "KritzelText": {
+                            "location": "import",
+                            "path": "../../../classes/objects/text.class",
+                            "id": "src/classes/objects/text.class.ts::KritzelText",
+                            "referenceLocation": "KritzelText"
+                        },
+                        "KritzelGroup": {
+                            "location": "import",
+                            "path": "../../../classes/objects/group.class",
+                            "id": "src/classes/objects/group.class.ts::KritzelGroup",
+                            "referenceLocation": "KritzelGroup"
+                        },
+                        "KritzelLine": {
+                            "location": "import",
+                            "path": "../../../classes/objects/line.class",
+                            "id": "src/classes/objects/line.class.ts::KritzelLine",
+                            "referenceLocation": "KritzelLine"
+                        }
+                    },
+                    "return": "Promise<T[]>"
+                },
+                "docs": {
+                    "text": "Adds multiple objects to the canvas in a single batch operation.\nAll objects are inserted within one Yjs transaction (single undo step),\ntriggering only one rerender cycle. Intended for programmatic streaming\nscenarios where per-object overhead would cause stutter.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "objects - The object instances to add."
+                        }, {
+                            "name": "returns",
+                            "text": "The added objects."
+                        }]
+                }
+            },
             "updateObject": {
                 "complexType": {
                     "signature": "<T extends KritzelBaseObject>(object: T, updatedProperties: Partial<T>) => Promise<T | null>",
@@ -3658,6 +3885,43 @@ export class KritzelEngine {
                         }]
                 }
             },
+            "removeObjects": {
+                "complexType": {
+                    "signature": "<T extends KritzelBaseObject>(objects: T[]) => Promise<T[]>",
+                    "parameters": [{
+                            "name": "objects",
+                            "type": "T[]",
+                            "docs": "- The objects to remove."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "T": {
+                            "location": "global",
+                            "id": "global::T"
+                        },
+                        "KritzelBaseObject": {
+                            "location": "import",
+                            "path": "../../../classes/objects/base-object.class",
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
+                            "referenceLocation": "KritzelBaseObject"
+                        }
+                    },
+                    "return": "Promise<T[]>"
+                },
+                "docs": {
+                    "text": "Removes multiple objects from the canvas in a single batch operation.\nAll removals happen within one Yjs transaction (single undo step),\ntriggering only one rerender cycle. Intended for programmatic streaming\nscenarios where per-object overhead would cause stutter.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "objects - The objects to remove."
+                        }, {
+                            "name": "returns",
+                            "text": "The removed objects."
+                        }]
+                }
+            },
             "getSelectedObjects": {
                 "complexType": {
                     "signature": "() => Promise<KritzelBaseObject<any>[]>",
@@ -4724,6 +4988,9 @@ export class KritzelEngine {
             }, {
                 "propName": "lockDrawingScale",
                 "methodName": "onLockDrawingScaleChange"
+            }, {
+                "propName": "isObjectDistanceFadingActive",
+                "methodName": "onIsObjectDistanceFadingActiveChange"
             }, {
                 "propName": "theme",
                 "methodName": "onThemeChange"

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js

@@ -6,6 +6,7 @@ import { KritzelToolConfigHelper } from "../../../helpers/tool-config.helper";
 import { KritzelColorHelper } from "../../../helpers/color.helper";
 export class KritzelControls {
     host;
+    visible = true;
     controls = [];
     activeControl = null;
     isUtilityPanelVisible = true;
@@ -230,13 +231,13 @@ export class KritzelControls {
         // Separate tool controls from config control
         const toolControls = this.internalControls.filter(c => c.type === 'tool' || c.type === 'separator');
         const configControl = this.internalControls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
-        return (h(Host, { key: 'b567aac7bca12cc5ffb0ee1eb9e6978636aa3c31', class: {
+        return (h(Host, { key: '0f40a136a6a9556080d922d346318045794421a8', style: { display: this.visible ? '' : 'none' }, class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '88e8ae9ae7429987724df70895b02a3f59216364', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'd543e7575cb30e54d9362eddf7c7221fb8cce5f5', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '658e3d7b94e49a002d5057c1fb4fc199a371c48d', class: "kritzel-controls" }, h("div", { key: 'b54bb52a43e4a94ae1148cd4e75528bcaad681ef', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '36ce760357d3228141281a45c0ac7b0024b04795', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
+            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '1083380152e9d1b51c35da335533c20ca2ca8fcc', class: "kritzel-controls" }, h("div", { key: '11ef0fb76c30ffda0e30f01d43229ca2142a5854', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '269924a8859aece37ff31202307d4feaecbbde86', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
             // Check if this control has sub-options (split-button)
             if (control.subOptions?.length) {
                 const selectedSubOption = this.getSelectedSubOption(control);
@@ -266,10 +267,10 @@ export class KritzelControls {
                     'kritzel-control': true,
                     'selected': this.activeControl?.name === control?.name,
                 }, key: control.name, "data-testid": `tool-${control.name}`, onClick: _event => this.handleControlClick?.(control), "aria-label": control.name.charAt(0).toUpperCase() + control.name.slice(1) }, h("kritzel-icon", { name: control.icon })));
-        })), h("div", { key: 'f0b1e0f74fe197f4d39e307e7dd8dd4819c4b183', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
+        })), h("div", { key: '8b97a5bba3ac4992482e8f433d7ba6197918a914', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
                 'kritzel-config-container': true,
                 'visible': hasConfigUI,
-            }, key: configControl.name }, h("div", { key: '51cc3ebf13092e710048441ff64856edd4f53dfc', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: 'dcace186ae3ece1d7e943f51b48ed5094d847284', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: '9b16ac90f335fec3c043545fa0c5b363ab99924e', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: '2425507968e27a01b66c1d7be79a40ebe77cd27d', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
+            }, key: configControl.name }, h("div", { key: 'd9adef8c2acc8d9b9d745174050ce78960b89b58', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '7605bbd2b6335c89c57aa68952293f26efad6b4b', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: '27b0f41442215e78b692fa44bb665444a4993b89', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: '1fb5979b1c531593acf5086861b22b7d78d03e8d', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
                 if (el)
                     this.configTriggerRef = el;
             }, onKeyDown: event => {
@@ -278,7 +279,7 @@ export class KritzelControls {
                 }
             }, style: {
                 cursor: 'pointer',
-            } }, this.displayValues && (h("div", { key: 'd2499df3c0a90c101957f55664452739e0f1692b', class: "color-container" }, h("kritzel-color", { key: 'b7cfcd3a8579c63f508c2786eecace1223e88974', value: this.displayValues.color, theme: this.theme, size: 18, style: {
+            } }, this.displayValues && (h("div", { key: '3713ef344630f6b4d88df2e83992018859ddb18c', class: "color-container" }, h("kritzel-color", { key: 'c2679f68efae77c6daeb98be9e03d5320d51a73a', value: this.displayValues.color, theme: this.theme, size: 18, style: {
                 borderRadius: '50%',
                 border: 'none',
             } })))))))));
@@ -298,6 +299,26 @@ export class KritzelControls {
     static get assetsDirs() { return ["../assets"]; }
     static get properties() {
         return {
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "visible",
+                "defaultValue": "true"
+            },
             "controls": {
                 "type": "unknown",
                 "mutable": false,

package/dist/collection/configs/default-brush-tool.config.js

@@ -4,6 +4,7 @@ export const DEFAULT_BRUSH_CONFIG = {
     type: 'pen',
     color: DEFAULT_COLOR_PALETTE[0],
     size: 16,
+    opacity: 1,
     palettes: {
         pen: [...DEFAULT_COLOR_PALETTE],
     },

package/dist/collection/configs/default-line-tool.config.js

@@ -3,6 +3,7 @@ import { DEFAULT_STROKE_SIZES } from "../constants/stroke-size.constants";
 export const DEFAULT_LINE_TOOL_CONFIG = {
     color: DEFAULT_COLOR_PALETTE[0],
     size: 4,
+    opacity: 1,
     palette: [...DEFAULT_COLOR_PALETTE],
     sizes: [...DEFAULT_STROKE_SIZES],
     arrows: {

package/dist/collection/configs/default-shape-tool.config.js

@@ -6,6 +6,7 @@ export const DEFAULT_SHAPE_CONFIG = {
     fillColor: { light: 'transparent', dark: 'transparent' },
     strokeColor: DEFAULT_COLOR_PALETTE[0],
     strokeWidth: 4,
+    opacity: 1,
     fontColor: DEFAULT_COLOR_PALETTE[0],
     fontSize: 16,
     fontFamily: 'Arial',

package/dist/collection/configs/default-text-tool.config.js

@@ -3,6 +3,7 @@ import { DEFAULT_FONT_SIZES } from "../constants/stroke-size.constants";
 export const DEFAULT_TEXT_CONFIG = {
     color: DEFAULT_COLOR_PALETTE[0],
     size: 8,
+    opacity: 1,
     fontFamily: 'Arial',
     palette: [...DEFAULT_COLOR_PALETTE],
     sizes: [...DEFAULT_FONT_SIZES],

package/dist/collection/constants/version.js

@@ -3,4 +3,4 @@
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-export const KRITZEL_VERSION = '0.3.11';
+export const KRITZEL_VERSION = '0.3.12';