kritzel-stencil 0.1.9 → 0.1.11

package/dist/cjs/{default-line-tool.config-C0aHyMAU.js → default-line-tool.config-DvzIh9zU.js}

@@ -14300,7 +14300,8 @@ function requireCjs () {
 	if (hasRequiredCjs) return cjs;
 	hasRequiredCjs = 1;
 	(function (exports) {
-		var pe=Object.defineProperty;var ge=e=>pe(e,"__esModule",{value:true});var de=(e,t)=>{ge(e);for(var s in t)pe(e,s,{get:t[s],enumerable:true});};de(exports,{default:()=>ve,getStroke:()=>ne,getStrokeOutlinePoints:()=>te,getStrokePoints:()=>re});function $(e,t,s,x=h=>h){return e*x(.5-t*(.5-s))}function ce(e){return [-e[0],-e[1]]}function l(e,t){return [e[0]+t[0],e[1]+t[1]]}function a(e,t){return [e[0]-t[0],e[1]-t[1]]}function b(e,t){return [e[0]*t,e[1]*t]}function xe(e,t){return [e[0]/t,e[1]/t]}function R(e){return [e[1],-e[0]]}function B(e,t){return e[0]*t[0]+e[1]*t[1]}function me(e,t){return e[0]===t[0]&&e[1]===t[1]}function Se(e){return Math.hypot(e[0],e[1])}function Pe(e){return e[0]*e[0]+e[1]*e[1]}function A(e,t){return Pe(a(e,t))}function G(e){return xe(e,Se(e))}function ae(e,t){return Math.hypot(e[1]-t[1],e[0]-t[0])}function L(e,t,s){let x=Math.sin(s),h=Math.cos(s),y=e[0]-t[0],n=e[1]-t[1],f=y*h-n*x,d=y*x+n*h;return [f+t[0],d+t[1]]}function K(e,t,s){return l(e,b(a(t,e),s))}function ee(e,t,s){return l(e,b(t,s))}var{min:C,PI:ke}=Math,le=.275,V=ke+1e-4;function te(e,t={}){let{size:s=16,smoothing:x=.5,thinning:h=.5,simulatePressure:y=true,easing:n=r=>r,start:f={},end:d={},last:D=false}=t,{cap:S=true,easing:j=r=>r*(2-r)}=f,{cap:q=true,easing:c=r=>--r*r*r+1}=d;if(e.length===0||s<=0)return [];let p=e[e.length-1].runningLength,g=f.taper===false?0:f.taper===true?Math.max(s,p):f.taper,T=d.taper===false?0:d.taper===true?Math.max(s,p):d.taper,oe=Math.pow(s*x,2),_=[],M=[],H=e.slice(0,10).reduce((r,i)=>{let o=i.pressure;if(y){let u=C(1,i.distance/s),W=C(1,1-u);o=C(1,r+(W-r)*(u*le));}return (r+o)/2},e[0].pressure),m=$(s,h,e[e.length-1].pressure,n),U,X=e[0].vector,z=e[0].point,F=z,O=z,E=F,J=false;for(let r=0;r<e.length;r++){let{pressure:i}=e[r],{point:o,vector:u,distance:W,runningLength:I}=e[r];if(r<e.length-1&&p-I<3)continue;if(h){if(y){let v=C(1,W/s),Z=C(1,1-v);i=C(1,H+(Z-H)*(v*le));}m=$(s,h,i,n);}else m=s/2;U===void 0&&(U=m);let fe=I<g?j(I/g):1,be=p-I<T?c((p-I)/T):1;m=Math.max(.01,m*Math.min(fe,be));let se=(r<e.length-1?e[r+1]:e[r]).vector,Y=r<e.length-1?B(u,se):1,he=B(u,X)<0&&!J,ue=Y!==null&&Y<0;if(he||ue){let v=b(R(X),m);for(let Z=1/13,w=0;w<=1;w+=Z)O=L(a(o,v),o,V*w),_.push(O),E=L(l(o,v),o,V*-w),M.push(E);z=O,F=E,ue&&(J=true);continue}if(J=false,r===e.length-1){let v=b(R(u),m);_.push(a(o,v)),M.push(l(o,v));continue}let ie=b(R(K(se,u,Y)),m);O=a(o,ie),(r<=1||A(z,O)>oe)&&(_.push(O),z=O),E=l(o,ie),(r<=1||A(F,E)>oe)&&(M.push(E),F=E),H=i,X=u;}let P=e[0].point.slice(0,2),k=e.length>1?e[e.length-1].point.slice(0,2):l(e[0].point,[1,1]),Q=[],N=[];if(e.length===1){if(!(g||T)||D){let r=ee(P,G(R(a(P,k))),-(U||m)),i=[];for(let o=1/13,u=o;u<=1;u+=o)i.push(L(r,P,V*2*u));return i}}else {if(!(g||T&&e.length===1))if(S)for(let i=1/13,o=i;o<=1;o+=i){let u=L(M[0],P,V*o);Q.push(u);}else {let i=a(_[0],M[0]),o=b(i,.5),u=b(i,.51);Q.push(a(P,o),a(P,u),l(P,u),l(P,o));}let r=R(ce(e[e.length-1].vector));if(T||g&&e.length===1)N.push(k);else if(q){let i=ee(k,r,m);for(let o=1/29,u=o;u<1;u+=o)N.push(L(i,k,V*3*u));}else N.push(l(k,b(r,m)),l(k,b(r,m*.99)),a(k,b(r,m*.99)),a(k,b(r,m)));}return _.concat(N,M.reverse(),Q)}function re(e,t={}){var q;let{streamline:s=.5,size:x=16,last:h=false}=t;if(e.length===0)return [];let y=.15+(1-s)*.85,n=Array.isArray(e[0])?e:e.map(({x:c,y:p,pressure:g=.5})=>[c,p,g]);if(n.length===2){let c=n[1];n=n.slice(0,-1);for(let p=1;p<5;p++)n.push(K(n[0],c,p/4));}n.length===1&&(n=[...n,[...l(n[0],[1,1]),...n[0].slice(2)]]);let f=[{point:[n[0][0],n[0][1]],pressure:n[0][2]>=0?n[0][2]:.25,vector:[1,1],distance:0,runningLength:0}],d=false,D=0,S=f[0],j=n.length-1;for(let c=1;c<n.length;c++){let p=h&&c===j?n[c].slice(0,2):K(S.point,n[c],y);if(me(S.point,p))continue;let g=ae(p,S.point);if(D+=g,c<j&&!d){if(D<x)continue;d=true;}S={point:p,pressure:n[c][2]>=0?n[c][2]:.5,vector:G(a(S.point,p)),distance:g,runningLength:D},f.push(S);}return f[0].vector=((q=f[1])==null?void 0:q.vector)||[0,0],f}function ne(e,t={}){return te(re(e,t),t)}var ve=ne; 
+		Object.defineProperties(exports,{__esModule:{value:true},[Symbol.toStringTag]:{value:`Module`}});const{PI:e}=Math,t=e+1e-4,n=.5,r=[1,1];function i(e,t,n,r=e=>e){return e*r(.5-t*(.5-n))}const{min:a}=Math;function o(e,t,n){let r=a(1,t/n);return a(1,e+(a(1,1-r)-e)*(r*.275))}function s(e){return [-e[0],-e[1]]}function c(e,t){return [e[0]+t[0],e[1]+t[1]]}function l(e,t,n){return e[0]=t[0]+n[0],e[1]=t[1]+n[1],e}function u(e,t){return [e[0]-t[0],e[1]-t[1]]}function d(e,t,n){return e[0]=t[0]-n[0],e[1]=t[1]-n[1],e}function f(e,t){return [e[0]*t,e[1]*t]}function p(e,t,n){return e[0]=t[0]*n,e[1]=t[1]*n,e}function m(e,t){return [e[0]/t,e[1]/t]}function h(e){return [e[1],-e[0]]}function g(e,t){let n=t[0];return e[0]=t[1],e[1]=-n,e}function ee(e,t){return e[0]*t[0]+e[1]*t[1]}function _(e,t){return e[0]===t[0]&&e[1]===t[1]}function v(e){return Math.hypot(e[0],e[1])}function y(e,t){let n=e[0]-t[0],r=e[1]-t[1];return n*n+r*r}function b(e){return m(e,v(e))}function x(e,t){return Math.hypot(e[1]-t[1],e[0]-t[0])}function S(e,t,n){let r=Math.sin(n),i=Math.cos(n),a=e[0]-t[0],o=e[1]-t[1],s=a*i-o*r,c=a*r+o*i;return [s+t[0],c+t[1]]}function C(e,t,n,r){let i=Math.sin(r),a=Math.cos(r),o=t[0]-n[0],s=t[1]-n[1],c=o*a-s*i,l=o*i+s*a;return e[0]=c+n[0],e[1]=l+n[1],e}function w(e,t,n){return c(e,f(u(t,e),n))}function te(e,t,n,r){let i=n[0]-t[0],a=n[1]-t[1];return e[0]=t[0]+i*r,e[1]=t[1]+a*r,e}function T(e,t,n){return c(e,f(t,n))}const E=[0,0],D=[0,0],O=[0,0];function k(e,n){let r=T(e,b(h(u(e,c(e,[1,1])))),-n),i=[],a=1/13;for(let n=a;n<=1;n+=a)i.push(S(r,e,t*2*n));return i}function A(e,n,r){let i=[],a=1/r;for(let r=a;r<=1;r+=a)i.push(S(n,e,t*r));return i}function j(e,t,n){let r=u(t,n),i=f(r,.5),a=f(r,.51);return [u(e,i),u(e,a),c(e,a),c(e,i)]}function M(e,n,r,i){let a=[],o=T(e,n,r),s=1/i;for(let n=s;n<1;n+=s)a.push(S(o,e,t*3*n));return a}function ne(e,t,n){return [c(e,f(t,n)),c(e,f(t,n*.99)),u(e,f(t,n*.99)),u(e,f(t,n))]}function N(e,t,n){return e===false||e===void 0?0:e===true?Math.max(t,n):e}function re(e,t,n){return e.slice(0,10).reduce((e,r)=>{let i=r.pressure;return t&&(i=o(e,r.distance,n)),(e+i)/2},e[0].pressure)}function P(e,n={}){let{size:r=16,smoothing:a=.5,thinning:f=.5,simulatePressure:m=true,easing:_=e=>e,start:v={},end:b={},last:x=false}=n,{cap:S=true,easing:w=e=>e*(2-e)}=v,{cap:T=true,easing:P=e=>--e*e*e+1}=b;if(e.length===0||r<=0)return [];let F=e[e.length-1].runningLength,I=N(v.taper,r,F),L=N(b.taper,r,F),R=(r*a)**2,z=[],B=[],V=re(e,m,r),H=i(r,f,e[e.length-1].pressure,_),U,W=e[0].vector,G=e[0].point,K=G,q=G,J=K,Y=false;for(let n=0;n<e.length;n++){let{pressure:a}=e[n],{point:s,vector:h,distance:v,runningLength:b}=e[n],x=n===e.length-1;if(!x&&F-b<3)continue;f?(m&&(a=o(V,v,r)),H=i(r,f,a,_)):H=r/2,U===void 0&&(U=H);let S=b<I?w(b/I):1,T=F-b<L?P((F-b)/L):1;H=Math.max(.01,H*Math.min(S,T));let k=(x?e[n]:e[n+1]).vector,A=x?1:ee(h,k),j=ee(h,W)<0&&!Y,M=A!==null&&A<0;if(j||M){g(E,W),p(E,E,H);for(let e=0;e<=1;e+=.07692307692307693)d(D,s,E),C(D,D,s,t*e),q=[D[0],D[1]],z.push(q),l(O,s,E),C(O,O,s,t*-e),J=[O[0],O[1]],B.push(J);G=q,K=J,M&&(Y=true);continue}if(Y=false,x){g(E,h),p(E,E,H),z.push(u(s,E)),B.push(c(s,E));continue}te(E,k,h,A),g(E,E),p(E,E,H),d(D,s,E),q=[D[0],D[1]],(n<=1||y(G,q)>R)&&(z.push(q),G=q),l(O,s,E),J=[O[0],O[1]],(n<=1||y(K,J)>R)&&(B.push(J),K=J),V=a,W=h;}let X=[e[0].point[0],e[0].point[1]],Z=e.length>1?[e[e.length-1].point[0],e[e.length-1].point[1]]:c(e[0].point,[1,1]),Q=[],$=[];if(e.length===1){if(!(I||L)||x)return k(X,U||H)}else {I||L&&e.length===1||(S?Q.push(...A(X,B[0],13)):Q.push(...j(X,z[0],B[0])));let t=h(s(e[e.length-1].vector));L||I&&e.length===1?$.push(Z):T?$.push(...M(Z,t,H,29)):$.push(...ne(Z,t,H));}return z.concat($,B.reverse(),Q)}const F=[0,0];function I(e){return e!=null&&e>=0}function L(e,t={}){let{streamline:i=.5,size:a=16,last:o=false}=t;if(e.length===0)return [];let s=.15+(1-i)*.85,l=Array.isArray(e[0])?e:e.map(({x:e,y:t,pressure:r=n})=>[e,t,r]);if(l.length===2){let e=l[1];l=l.slice(0,-1);for(let t=1;t<5;t++)l.push(w(l[0],e,t/4));}l.length===1&&(l=[...l,[...c(l[0],r),...l[0].slice(2)]]);let u=[{point:[l[0][0],l[0][1]],pressure:I(l[0][2])?l[0][2]:.25,vector:[...r],distance:0,runningLength:0}],f=false,p=0,m=u[0],h=l.length-1;for(let e=1;e<l.length;e++){let t=o&&e===h?[l[e][0],l[e][1]]:w(m.point,l[e],s);if(_(m.point,t))continue;let r=x(t,m.point);if(p+=r,e<h&&!f){if(p<a)continue;f=true;}d(F,m.point,t),m={point:t,pressure:I(l[e][2])?l[e][2]:n,vector:b(F),distance:r,runningLength:p},u.push(m);}return u[0].vector=u[1]?.vector||[0,0],u}function R(e,t={}){return P(L(e,t),t)}var z=R;exports.default=z,exports.getStroke=R,exports.getStrokeOutlinePoints=P,exports.getStrokePoints=L;
+		
 	} (cjs));
 	return cjs;
 }

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultLineTool_config = require('./default-line-tool.config-C0aHyMAU.js');
+var defaultLineTool_config = require('./default-line-tool.config-DvzIh9zU.js');
 
 /**
  * BroadcastChannel sync provider for cross-tab synchronization

package/dist/cjs/kritzel-back-to-content_32.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-i21-qqbc.js');
-var defaultLineTool_config = require('./default-line-tool.config-C0aHyMAU.js');
+var defaultLineTool_config = require('./default-line-tool.config-DvzIh9zU.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1710,6 +1710,7 @@ const KritzelEditor = class {
         this.undoState = event.detail;
     }
     handleObjectsInViewportChange(event) {
+        console.log(event.detail.length);
         const hasVisibleObjects = event.detail.length > 0;
         this.isBackToContentButtonVisible = !hasVisibleObjects;
     }
@@ -1765,7 +1766,7 @@ const KritzelEditor = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'e239e70c120784d4331d3fdfadfd7fb2623a73f0' }, index.h("div", { key: '4e4a1db1d4e89a6ba4e0042413aa36a26b61e665', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: '102f3e93167dda9abdcf4ca058b053eb5fe4f670', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: '37e0d96e16f84a12aa346d508e8d9f5790942b0a', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), index.h("kritzel-engine", { key: '3983972874985b2e157e9c55511e462e8b569b05', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event) }), index.h("kritzel-controls", { key: 'ea8b2465b097f03303909814e678d6c4a5338979', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: '412f719a47092ce40427bccece81e97b6a0e92d4', class: "top-right-buttons" }, index.h("kritzel-settings", { key: 'f1f742106784d2e1635ecfe1319e6b96b47b7166', ref: el => (this.settingsRef = el), onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: '2aebe55d30b4dbc1b05ea6b5614c0dabc4729c3b', ref: el => (this.exportRef = el), onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg() }), index.h("kritzel-more-menu", { key: '9a41d3e54d3864f7ac8d9774221097ae0126818b', onItemSelect: event => this.handleMoreMenuItemSelect(event) }))));
+        return (index.h(index.Host, { key: '18113021f28ed340017ed15b3db83f275a1a45e0' }, index.h("div", { key: '75c4fc6fb48133edc3b9b2152c09d1b77dc3efc6', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: 'c6a68abaf70ebcf37af1870b832c9a2bd2c984fb', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: 'e2be6fadb0a44dd6cc7a061767bc25b11dde5bf3', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), index.h("kritzel-engine", { key: '16c19e74e9a3bd61845fa3542a5a84a12a3c8a05', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event) }), index.h("kritzel-controls", { key: 'bb328c89b4ebbcce215e6ddf710126e7a71b5d30', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: 'e7fd78379d8acc4715605c267aa352430633f6ac', class: "top-right-buttons" }, index.h("kritzel-settings", { key: '13db94ca32cabfbd2d6664c58f55e30fcbf99221', ref: el => (this.settingsRef = el), onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: 'a7aa9b6ada8b0d47edf418c392d6d04598d36925', ref: el => (this.exportRef = el), onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg() }), index.h("kritzel-more-menu", { key: '70a1a954f678e6b634d5965b23f570f79824af43', onItemSelect: event => this.handleMoreMenuItemSelect(event) }))));
     }
     static get watchers() { return {
         "isEngineReady": [{
@@ -19128,7 +19129,6 @@ class KritzelViewport {
                 this._core.store.state.skipContextMenu = true;
                 this._core.rerender();
                 this._debounceUpdate();
-                this._core.engine.emitObjectsInViewportChange();
             }
         }
         if (event.pointerType === 'touch') {
@@ -19165,7 +19165,6 @@ class KritzelViewport {
                 this._core.store.state.hasViewportChanged = true;
                 this._core.rerender();
                 this._debounceUpdate();
-                this._core.engine.emitObjectsInViewportChange();
             }
         }
     }
@@ -19202,7 +19201,6 @@ class KritzelViewport {
         this._core.store.state.hasViewportChanged = true;
         this._core.rerender();
         this._debounceUpdate();
-        this._core.engine.emitObjectsInViewportChange();
     }
     centerFitInViewport(object) {
         const scaleX = this._core.store.state.viewportWidth / (object.rotatedBoundingBox.width * 1.1);
@@ -19232,7 +19230,6 @@ class KritzelViewport {
         this._core.rerender();
         this._debounceUpdate();
         this._debounceEndScaling();
-        this._core.engine.emitObjectsInViewportChange();
     }
     handlePan(event) {
         const panSpeed = 0.8;
@@ -19241,7 +19238,6 @@ class KritzelViewport {
         this._core.store.state.hasViewportChanged = true;
         this._core.rerender();
         this._debounceUpdate();
-        this._core.engine.emitObjectsInViewportChange();
     }
     /**
      * Cancels any ongoing viewport animation.
@@ -19283,7 +19279,6 @@ class KritzelViewport {
             else {
                 this._animationFrameId = null;
                 this._debounceUpdate();
-                this._core.engine.emitObjectsInViewportChange();
             }
         };
         this._animationFrameId = requestAnimationFrame(animate);
@@ -19674,6 +19669,11 @@ class KritzelQuadtree {
     capacity;
     objects = [];
     children = null;
+    _size = 0;
+    /** Total number of objects in the quadtree (O(1) access) */
+    get size() {
+        return this._size;
+    }
     constructor(bounds, capacity = 16) {
         this.bounds = bounds;
         this.capacity = capacity;
@@ -19681,6 +19681,7 @@ class KritzelQuadtree {
     reset() {
         this.objects = [];
         this.children = null;
+        this._size = 0;
     }
     insert(object) {
         if (!this.intersects(object.rotatedBoundingBox, this.bounds)) {
@@ -19688,6 +19689,7 @@ class KritzelQuadtree {
         }
         if (this.objects.length < this.capacity && this.children === null) {
             this.objects.push(object);
+            this._size++;
             return true;
         }
         if (this.children === null) {
@@ -19695,6 +19697,7 @@ class KritzelQuadtree {
         }
         for (const child of this.children) {
             if (child.insert(object)) {
+                this._size++;
                 return true;
             }
         }
@@ -19716,15 +19719,19 @@ class KritzelQuadtree {
         return false;
     }
     remove(predicate) {
+        let removed = 0;
         const index = this.objects.findIndex(o => predicate(o));
         if (index !== -1) {
             this.objects.splice(index, 1);
+            removed++;
         }
         if (this.children !== null) {
             for (const child of this.children) {
-                child.remove(predicate);
+                removed += child.remove(predicate);
             }
         }
+        this._size -= removed;
+        return removed;
     }
     query(range) {
         const results = [];
@@ -19810,6 +19817,9 @@ class KritzelObjectMap {
             redoStackSize: this._undoManager ? this._undoManager.redoStack.length : 0,
         };
     }
+    get totalCount() {
+        return this.quadtree.size;
+    }
     constructor() {
         this.quadtree = new KritzelQuadtree({
             x: -Infinity,
@@ -20106,6 +20116,9 @@ class KritzelStore {
     get currentZIndex() {
         return Math.max(0, ...this._state.objects.filter(o => !(o instanceof defaultLineTool_config.KritzelSelectionGroup) && !(o instanceof defaultLineTool_config.KritzelSelectionBox)).map(o => o.zIndex)) + 1;
     }
+    get totalObjectCount() {
+        return this._state.objects.totalCount;
+    }
     get allObjects() {
         return this._state.objects.allObjects();
     }
@@ -22192,6 +22205,17 @@ const KritzelEngine = class {
     async getScreenshot(format = 'png') {
         if (!this.host)
             return null;
+        // Save critical state before screenshot to restore after
+        const savedState = {
+            objects: this.core.store.state.objects,
+            activeWorkspace: this.core.store.state.activeWorkspace,
+            workspaces: this.core.store.state.workspaces,
+            activeTool: this.core.store.state.activeTool,
+            isReady: this.core.store.state.isReady,
+            translateX: this.core.store.state.translateX,
+            translateY: this.core.store.state.translateY,
+            scale: this.core.store.state.scale,
+        };
         const options = {
             filter: (node) => {
                 // Exclude the context menu and debug panel from the screenshot
@@ -22204,12 +22228,28 @@ const KritzelEngine = class {
                 return true;
             },
         };
-        if (format === 'svg') {
-            return await toSvg(this.host, options);
+        let result;
+        try {
+            if (format === 'svg') {
+                result = await toSvg(this.host, options);
+            }
+            else {
+                result = await toPng(this.host, options);
+            }
         }
-        else {
-            return await toPng(this.host, options);
+        finally {
+            // Restore state after screenshot in case cloning caused any side effects
+            this.core.store.state.objects = savedState.objects;
+            this.core.store.state.activeWorkspace = savedState.activeWorkspace;
+            this.core.store.state.workspaces = savedState.workspaces;
+            this.core.store.state.activeTool = savedState.activeTool;
+            this.core.store.state.isReady = savedState.isReady;
+            this.core.store.state.translateX = savedState.translateX;
+            this.core.store.state.translateY = savedState.translateY;
+            this.core.store.state.scale = savedState.scale;
+            this.core.rerender();
         }
+        return result;
     }
     async exportViewportAsPng() {
         try {
@@ -22331,10 +22371,6 @@ const KritzelEngine = class {
             this.objectsSelectionChange.emit();
         }
     }
-    emitObjectsInViewportChange() {
-        const objects = this.core.store.objectsInViewport;
-        this.objectsInViewportChange.emit(objects);
-    }
     _registerStateChangeListeners() {
         this.core.store.onStateChange('activeTool', this._handleActiveToolChange.bind(this));
     }
@@ -22369,7 +22405,10 @@ const KritzelEngine = class {
         };
         const visibleObjects = this.core.store.state.objects.query(viewportBounds).sort((a, b) => a.zIndex - b.zIndex);
         this.core.cursorManager.applyCursor();
-        return (index.h(index.Host, { key: '6e770afe9be9151cd94f3bdee7cdf30f24539e89' }, this.core.store.state.debugInfo.showViewportInfo && (index.h("div", { key: '5f72b0428061ac923cb2e50de7372d13862c4cfd', class: "debug-panel" }, index.h("div", { key: '96c8e5d5f60c828f2d2d12b82462955245f34046' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), index.h("div", { key: 'ed34ba298599a753c3b7d535b759630f63a226dd' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), index.h("div", { key: '25813767911cf07fb1e348e849000c1a7a40d30b' }, "TranslateX: ", this.core.store.state?.translateX), index.h("div", { key: 'd82ed8a94bea9b0b7b264226a61b6a977a984514' }, "TranslateY: ", this.core.store.state?.translateY), index.h("div", { key: 'd448438bda9c4c3be1e4279aa76a0ccccd4755ba' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), index.h("div", { key: 'a664623bb626901b650db14576db28d76f409b02' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), index.h("div", { key: 'a9ea1237f4f4cf9454729fa766050bc44e2ef812' }, "PointerCount: ", this.core.store.state.pointers.size), index.h("div", { key: 'e8fbdca2c13b0b015b709ed6995e359b07c90c62' }, "Scale: ", this.core.store.state?.scale), index.h("div", { key: 'e14adc6154c5a85ef06712982df00d17516fc696' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), index.h("div", { key: '0b22c996079f53f48046b96af39e22dcabaa12b5' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), index.h("div", { key: 'dc60d9bc8cfeb2d050f22225318c8e8a4e015a41' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), index.h("div", { key: '625fc2bd1a7aaf735a2dba5375fc847853347c41' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), index.h("div", { key: '1fd739d47bfd3da4700edb1b66de4944d27574e1' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), index.h("div", { key: '39c6987001711eadb2ad03ca77a5e9a16d2cfcef' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: 'e602303527f833a1feabfe89289e8e0df109df24' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: '9a81988b74aa398935469fc1dd0ade01eff5398e' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '21e15a261055f1918105a1cf1dcefa625f08638a' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: 'd5f3d4b36939b6b9854e6042fa3aadca1f5459bc' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), index.h("div", { key: '11a42eff762d412f24c3d946579daadb6c6321e3' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: '5dc6bf2c1ab6c70f3a42ea154fa4f3c0670fef8d' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: '198a5021998646fd824d31d65e7869ed3e23768e' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), index.h("div", { key: '29ee254c92e1f60e09d40321b7535bf1d9aee27a' }, "PointerX: ", this.core.store.state?.pointerX), index.h("div", { key: '8352fd67fa257ba0088d9196d0c130034abe4c88' }, "PointerY: ", this.core.store.state?.pointerY), index.h("div", { key: '1e911bb79a52b082ef77ea916fb2a4044a53cbd1' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), index.h("div", { key: '28fa76f1e7ce4559e81ee2f8267dc73d647e51ab' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), index.h("div", { key: '7aaaa3e9a7efaca4c3d4ef52a406c142001bfd21', id: "origin", class: "origin", style: {
+        if (this.core.store.totalObjectCount > 0) {
+            this.objectsInViewportChange.emit(visibleObjects);
+        }
+        return (index.h(index.Host, { key: '39f0ffff986b61133ad44f5eadab07f7d776cb01' }, this.core.store.state.debugInfo.showViewportInfo && (index.h("div", { key: '946bfcc8d6fb9986c1b7b7fc150eb7dfc45cbb59', class: "debug-panel" }, index.h("div", { key: 'ae6f054b4aefca557228d810125dec1b7695654c' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), index.h("div", { key: 'f47b71175c0dd1db6fb1a82bbdfd5532a1ce55b3' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), index.h("div", { key: 'aba67c4bd24fb9b03848614831d48e6d70ec104f' }, "TranslateX: ", this.core.store.state?.translateX), index.h("div", { key: 'f1c32b14966542f41a9118e3af76bd3f54ae0039' }, "TranslateY: ", this.core.store.state?.translateY), index.h("div", { key: '9d4457d49b8a2f5420fb115d41e9aeef2f72eb59' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), index.h("div", { key: '53b482102ec828758904dcc4c8d62e8e960f87f0' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), index.h("div", { key: '8f3a6156b882350b3ead9c5778df5c7c80ca8888' }, "PointerCount: ", this.core.store.state.pointers.size), index.h("div", { key: '6471128d6613f638848ea99e2337126828c6236a' }, "Scale: ", this.core.store.state?.scale), index.h("div", { key: 'f70133c73206ae0651a7777a87ecbfc967f97e0d' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), index.h("div", { key: '172b5725dbb9b37a1b63df04e908906d5b04445d' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), index.h("div", { key: '114e8afde10ea3e8eae32a2772914b56a0c718f4' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), index.h("div", { key: '9e8288cdf8d9f365317649fd36fd32f41d18a165' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), index.h("div", { key: '2498b02ef54fdb9752ca2c86ccb6a24ef272ee03' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), index.h("div", { key: '66b10615c0c15b2d1f93e22954bae32a171cda26' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: '8a246ad747b8b289e89d7edd8df84b74d88363de' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: '5d8086caabac9183f9be9076fa724d5d6b009b2a' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: 'edf7cbb6439ec09b26e895b696e80981a127ec8f' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: 'ad95478b84f7381fb32eb23606e5697e944649c2' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), index.h("div", { key: 'ec41d473e9194732c6846ea388c24b4e2edd6119' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: 'dbe271f716901a41c857724abbf0837b63995e07' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: 'e8d6bac1c6069923cfd3f5d6177b60d6d3ad6eaa' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), index.h("div", { key: 'a2b19dff95c8e35f7b40f9e378e8ca49e878d939' }, "PointerX: ", this.core.store.state?.pointerX), index.h("div", { key: 'f94f38ae42e2c98df3a82f09e18fa482f5c1a415' }, "PointerY: ", this.core.store.state?.pointerY), index.h("div", { key: '1bfc6689f25c7912074f147394ea1d9fce42d990' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), index.h("div", { key: 'a7761da6ae5caa3f0df089b223006959ffec65fd' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), index.h("div", { key: '485aa0df270cc27992abfac5f7639967aa6845a3', 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 => {
             return (index.h("div", { key: object.id, style: {
@@ -22397,7 +22436,9 @@ const KritzelEngine = class {
                     borderStyle: 'solid',
                     padding: object.padding + 'px',
                     overflow: 'visible',
-                    display: defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelLine') || defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelPath') ? 'none' : 'block'
+                    display: defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelLine') || defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelPath')
+                        ? 'none'
+                        : 'block',
                 } }, defaultLineTool_config.KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (index.h("img", { ref: el => object.mount(el), src: object.src, style: {
                     width: '100%',
                     height: '100%',
@@ -22533,10 +22574,18 @@ const KritzelEngine = class {
                 } }), index.h("circle", { class: "selection-line-handle-overlay start", cx: object.startX - object.x, cy: object.startY - object.y, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
                     paintOrder: 'fill',
-                } }), index.h("circle", { class: "selection-line-handle center", cx: object.controlX !== undefined ? (object.startX + 2 * object.controlX + object.endX) / 4 - object.x : (object.startX - object.x + object.endX - object.x) / 2, cy: object.controlY !== undefined ? (object.startY + 2 * object.controlY + object.endY) / 4 - object.y : (object.startY - object.y + object.endY - object.y) / 2, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } }), index.h("circle", { class: "selection-line-handle center", cx: object.controlX !== undefined
+                    ? (object.startX + 2 * object.controlX + object.endX) / 4 - object.x
+                    : (object.startX - object.x + object.endX - object.x) / 2, cy: object.controlY !== undefined
+                    ? (object.startY + 2 * object.controlY + object.endY) / 4 - object.y
+                    : (object.startY - object.y + object.endY - object.y) / 2, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
                     paintOrder: 'fill',
-                } }), index.h("circle", { class: "selection-line-handle-overlay center", cx: object.controlX !== undefined ? (object.startX + 2 * object.controlX + object.endX) / 4 - object.x : (object.startX - object.x + object.endX - object.x) / 2, cy: object.controlY !== undefined ? (object.startY + 2 * object.controlY + object.endY) / 4 - object.y : (object.startY - object.y + object.endY - object.y) / 2, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } }), index.h("circle", { class: "selection-line-handle-overlay center", cx: object.controlX !== undefined
+                    ? (object.startX + 2 * object.controlX + object.endX) / 4 - object.x
+                    : (object.startX - object.x + object.endX - object.x) / 2, cy: object.controlY !== undefined
+                    ? (object.startY + 2 * object.controlY + object.endY) / 4 - object.y
+                    : (object.startY - object.y + object.endY - object.y) / 2, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
                     paintOrder: 'fill',
                 } }), index.h("circle", { class: "selection-line-handle end", cx: object.endX - object.x, cy: object.endY - object.y, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
@@ -22608,7 +22657,8 @@ const KritzelEngine = class {
                     strokeWidth: data.lineStrokeWidth,
                     strokeDasharray: data.dashArray,
                     strokeLinecap: 'round',
-                } })) : (data.edgeX !== undefined && data.edgeY !== undefined && (index.h("line", { x1: data.edgeX, y1: data.edgeY, x2: data.centerX, y2: data.centerY, style: {
+                } })) : (data.edgeX !== undefined &&
+                data.edgeY !== undefined && (index.h("line", { x1: data.edgeX, y1: data.edgeY, x2: data.centerX, y2: data.centerY, style: {
                     stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
                     strokeWidth: data.lineStrokeWidth,
                     strokeDasharray: data.dashArray,
@@ -22618,7 +22668,7 @@ const KritzelEngine = class {
                     stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
-        })()), this.core.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { key: 'c1b0197bb02b9067c6ee028319310134eeb27969', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
+        })()), this.core.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { key: 'a46409b1a9d2c7a97e2463ac689e4fa1b0802a70', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
                 position: 'fixed',
                 left: `${this.core.store.state.contextMenuX}px`,
                 top: `${this.core.store.state.contextMenuY}px`,
@@ -22629,7 +22679,7 @@ const KritzelEngine = class {
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof defaultLineTool_config.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { key: 'fb14837c3afab1de4c6f4a4ca514b949bd0c5bf6', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof defaultLineTool_config.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { key: '479b86bb97be00f0859a62b2b16f419dff6d2bac', core: this.core })));
     }
     static get watchers() { return {
         "workspace": [{
@@ -23599,7 +23649,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.1.9';
+const KRITZEL_VERSION = '0.1.11';
 
 const kritzelSettingsCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:500;color:var(--kritzel-settings-label-color, #333333);margin:0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}`;
 
@@ -24216,9 +24266,11 @@ const KritzelWorkspaceManager = class {
     }
     async initializeEngine() {
         await customElements.whenDefined('kritzel-engine');
-        this.kritzelEngineRef = this.host.parentElement.querySelector('kritzel-engine');
+        // Search for kritzel-engine in the closest kritzel-editor ancestor
+        const editor = this.host.closest('kritzel-editor');
+        this.kritzelEngineRef = editor?.querySelector('kritzel-engine') ?? null;
         if (!this.kritzelEngineRef) {
-            console.warn('kritzel-engine not found in parent element.');
+            console.warn('kritzel-engine not found in kritzel-editor.');
         }
     }
     async select(item, parent) {

package/dist/collection/classes/core/store.class.js

@@ -14,6 +14,9 @@ export class KritzelStore {
     get currentZIndex() {
         return Math.max(0, ...this._state.objects.filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KritzelSelectionBox)).map(o => o.zIndex)) + 1;
     }
+    get totalObjectCount() {
+        return this._state.objects.totalCount;
+    }
     get allObjects() {
         return this._state.objects.allObjects();
     }

package/dist/collection/classes/core/viewport.class.js

@@ -98,7 +98,6 @@ export class KritzelViewport {
                 this._core.store.state.skipContextMenu = true;
                 this._core.rerender();
                 this._debounceUpdate();
-                this._core.engine.emitObjectsInViewportChange();
             }
         }
         if (event.pointerType === 'touch') {
@@ -135,7 +134,6 @@ export class KritzelViewport {
                 this._core.store.state.hasViewportChanged = true;
                 this._core.rerender();
                 this._debounceUpdate();
-                this._core.engine.emitObjectsInViewportChange();
             }
         }
     }
@@ -172,7 +170,6 @@ export class KritzelViewport {
         this._core.store.state.hasViewportChanged = true;
         this._core.rerender();
         this._debounceUpdate();
-        this._core.engine.emitObjectsInViewportChange();
     }
     centerFitInViewport(object) {
         const scaleX = this._core.store.state.viewportWidth / (object.rotatedBoundingBox.width * 1.1);
@@ -202,7 +199,6 @@ export class KritzelViewport {
         this._core.rerender();
         this._debounceUpdate();
         this._debounceEndScaling();
-        this._core.engine.emitObjectsInViewportChange();
     }
     handlePan(event) {
         const panSpeed = 0.8;
@@ -211,7 +207,6 @@ export class KritzelViewport {
         this._core.store.state.hasViewportChanged = true;
         this._core.rerender();
         this._debounceUpdate();
-        this._core.engine.emitObjectsInViewportChange();
     }
     /**
      * Cancels any ongoing viewport animation.
@@ -253,7 +248,6 @@ export class KritzelViewport {
             else {
                 this._animationFrameId = null;
                 this._debounceUpdate();
-                this._core.engine.emitObjectsInViewportChange();
             }
         };
         this._animationFrameId = requestAnimationFrame(animate);

package/dist/collection/classes/structures/object-map.structure.js

@@ -32,6 +32,9 @@ export class KritzelObjectMap {
             redoStackSize: this._undoManager ? this._undoManager.redoStack.length : 0,
         };
     }
+    get totalCount() {
+        return this.quadtree.size;
+    }
     constructor() {
         this.quadtree = new KritzelQuadtree({
             x: -Infinity,

package/dist/collection/classes/structures/quadtree.structure.js

@@ -3,6 +3,11 @@ export class KritzelQuadtree {
     capacity;
     objects = [];
     children = null;
+    _size = 0;
+    /** Total number of objects in the quadtree (O(1) access) */
+    get size() {
+        return this._size;
+    }
     constructor(bounds, capacity = 16) {
         this.bounds = bounds;
         this.capacity = capacity;
@@ -10,6 +15,7 @@ export class KritzelQuadtree {
     reset() {
         this.objects = [];
         this.children = null;
+        this._size = 0;
     }
     insert(object) {
         if (!this.intersects(object.rotatedBoundingBox, this.bounds)) {
@@ -17,6 +23,7 @@ export class KritzelQuadtree {
         }
         if (this.objects.length < this.capacity && this.children === null) {
             this.objects.push(object);
+            this._size++;
             return true;
         }
         if (this.children === null) {
@@ -24,6 +31,7 @@ export class KritzelQuadtree {
         }
         for (const child of this.children) {
             if (child.insert(object)) {
+                this._size++;
                 return true;
             }
         }
@@ -45,15 +53,19 @@ export class KritzelQuadtree {
         return false;
     }
     remove(predicate) {
+        let removed = 0;
         const index = this.objects.findIndex(o => predicate(o));
         if (index !== -1) {
             this.objects.splice(index, 1);
+            removed++;
         }
         if (this.children !== null) {
             for (const child of this.children) {
-                child.remove(predicate);
+                removed += child.remove(predicate);
             }
         }
+        this._size -= removed;
+        return removed;
     }
     query(range) {
         const results = [];

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

@@ -258,6 +258,7 @@ export class KritzelEditor {
         this.undoState = event.detail;
     }
     handleObjectsInViewportChange(event) {
+        console.log(event.detail.length);
         const hasVisibleObjects = event.detail.length > 0;
         this.isBackToContentButtonVisible = !hasVisibleObjects;
     }
@@ -313,7 +314,7 @@ export class KritzelEditor {
         }
     }
     render() {
-        return (h(Host, { key: 'e239e70c120784d4331d3fdfadfd7fb2623a73f0' }, h("div", { key: '4e4a1db1d4e89a6ba4e0042413aa36a26b61e665', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '102f3e93167dda9abdcf4ca058b053eb5fe4f670', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: '37e0d96e16f84a12aa346d508e8d9f5790942b0a', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: '3983972874985b2e157e9c55511e462e8b569b05', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event) }), h("kritzel-controls", { key: 'ea8b2465b097f03303909814e678d6c4a5338979', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: '412f719a47092ce40427bccece81e97b6a0e92d4', class: "top-right-buttons" }, h("kritzel-settings", { key: 'f1f742106784d2e1635ecfe1319e6b96b47b7166', ref: el => (this.settingsRef = el), onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: '2aebe55d30b4dbc1b05ea6b5614c0dabc4729c3b', ref: el => (this.exportRef = el), onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg() }), h("kritzel-more-menu", { key: '9a41d3e54d3864f7ac8d9774221097ae0126818b', onItemSelect: event => this.handleMoreMenuItemSelect(event) }))));
+        return (h(Host, { key: '18113021f28ed340017ed15b3db83f275a1a45e0' }, h("div", { key: '75c4fc6fb48133edc3b9b2152c09d1b77dc3efc6', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'c6a68abaf70ebcf37af1870b832c9a2bd2c984fb', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: 'e2be6fadb0a44dd6cc7a061767bc25b11dde5bf3', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: '16c19e74e9a3bd61845fa3542a5a84a12a3c8a05', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event) }), h("kritzel-controls", { key: 'bb328c89b4ebbcce215e6ddf710126e7a71b5d30', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'e7fd78379d8acc4715605c267aa352430633f6ac', class: "top-right-buttons" }, h("kritzel-settings", { key: '13db94ca32cabfbd2d6664c58f55e30fcbf99221', ref: el => (this.settingsRef = el), onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: 'a7aa9b6ada8b0d47edf418c392d6d04598d36925', ref: el => (this.exportRef = el), onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg() }), h("kritzel-more-menu", { key: '70a1a954f678e6b634d5965b23f570f79824af43', onItemSelect: event => this.handleMoreMenuItemSelect(event) }))));
     }
     static get is() { return "kritzel-editor"; }
     static get originalStyleUrls() {