@tldraw/core
Version:
The tldraw core renderer and utilities.
321 lines • 65.5 kB
JavaScript
var sn=Object.create;var ye=Object.defineProperty,an=Object.defineProperties,dn=Object.getOwnPropertyDescriptor,ln=Object.getOwnPropertyDescriptors,cn=Object.getOwnPropertyNames,Me=Object.getOwnPropertySymbols,un=Object.getPrototypeOf,_e=Object.prototype.hasOwnProperty,nt=Object.prototype.propertyIsEnumerable;var je=(r,e,t)=>e in r?ye(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,g=(r,e)=>{for(var t in e||(e={}))_e.call(e,t)&&je(r,t,e[t]);if(Me)for(var t of Me(e))nt.call(e,t)&&je(r,t,e[t]);return r},$=(r,e)=>an(r,ln(e)),ot=r=>ye(r,"__esModule",{value:!0});var V=(r,e)=>{var t={};for(var n in r)_e.call(r,n)&&e.indexOf(n)<0&&(t[n]=r[n]);if(r!=null&&Me)for(var n of Me(r))e.indexOf(n)<0&&nt.call(r,n)&&(t[n]=r[n]);return t};var mn=(r,e)=>{for(var t in e)ye(r,t,{get:e[t],enumerable:!0})},rt=(r,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of cn(e))!_e.call(r,o)&&(t||o!=="default")&&ye(r,o,{get:()=>e[o],enumerable:!(n=dn(e,o))||n.enumerable});return r},L=(r,e)=>rt(ot(ye(r!=null?sn(un(r)):{},"default",!e&&r&&r.__esModule?{get:()=>r.default,enumerable:!0}:{value:r,enumerable:!0})),r),pn=(r=>(e,t)=>r&&r.get(e)||(t=rt(ot({}),e,1),r&&r.set(e,t),t))(typeof WeakMap!="undefined"?new WeakMap:0);var B=(r,e,t)=>(je(r,typeof e!="symbol"?e+"":e,t),t);var no={};mn(no,{Cursor:()=>et,HTMLContainer:()=>to,Inputs:()=>H,Renderer:()=>eo,SVGContainer:()=>J,SnapPoints:()=>qe,TLBoundsCorner:()=>be,TLBoundsEdge:()=>xe,TLPerformanceMode:()=>Ze,TLShapeUtil:()=>Fe,Utils:()=>C,inputs:()=>qn});var W=L(require("react"));var Y=L(require("react"));var F=L(require("react"));var $e=L(require("react"));var ke=L(require("react")),ve=ke.createContext({});function E(){return ke.useContext(ve)}var De=require("@tldraw/vec"),st=require("@use-gesture/react"),z=L(require("react"));var h=require("@tldraw/vec");var Ze=(o=>(o.TransformSelected="transform_selected",o.TranslateSelected="translate_selected",o.TransformAll="transform_all",o.TranslateAll="translate_all",o))(Ze||{}),xe=(o=>(o.Top="top_edge",o.Right="right_edge",o.Bottom="bottom_edge",o.Left="left_edge",o))(xe||{}),be=(o=>(o.TopLeft="top_left_corner",o.TopRight="top_right_corner",o.BottomRight="bottom_right_corner",o.BottomLeft="bottom_left_corner",o))(be||{}),qe=(s=>(s.minX="minX",s.midX="midX",s.maxX="maxX",s.minY="minY",s.midY="midY",s.maxY="maxY",s))(qe||{});String.prototype.replaceAll||(String.prototype.replaceAll=function(r,e){return Object.prototype.toString.call(r).toLowerCase()==="[object regexp]"?this.replace(r,e):this.replace(new RegExp(r,"g"),e)});var Ke=Math.PI*2,K=class{static lerp(e,t,n){return n=K.clamp(n,0,1),e*(1-n)+t*n}static lerpColor(e,t,n=.5){function o(l){let c=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(l);return[parseInt(c[1],16),parseInt(c[2],16),parseInt(c[3],16)]}function i(l){return"#"+((1<<24)+(l[0]<<16)+(l[1]<<8)+l[2]).toString(16).slice(1)}let s=o(e)||[0,0,0],a=o(t)||[0,0,0],d=s.slice();for(let l=0;l<3;l++)d[l]=Math.round(d[l]+n*(a[l]-s[l]));return i(d)}static modulate(e,t,n,o=!1){let[i,s]=t,[a,d]=n,l=a+(e-i)/(s-i)*(d-a);return o?a<d?Math.max(Math.min(l,d),a):Math.max(Math.min(l,a),d):l}static clamp(e,t,n){return Math.max(t,typeof n!="undefined"?Math.min(e,n):e)}static deepClone(e){if(e===null)return e;if(Array.isArray(e))return[...e];if(typeof e=="object"){let t=g({},e);return Object.keys(t).forEach(n=>t[n]=typeof e[n]=="object"?K.deepClone(e[n]):e[n]),t}return e}static rng(e=""){let t=0,n=0,o=0,i=0;function s(){let a=t^t<<11;return t=n,n=o,o=i,i^=(i>>>19^a^a>>>8)>>>0,i/4294967296}for(let a=0;a<e.length+64;a++)t^=e.charCodeAt(a)|0,s();return s}static pointsToLineSegments(e,t=!1){let n=[];for(let o=1;o<e.length;o++)n.push([e[o-1],e[o]]);return t&&n.push([e[e.length-1],e[0]]),n}static getRectangleSides(e,t,n=0){let o=[e[0]+t[0]/2,e[1]+t[1]/2],i=h.Vec.rotWith(e,o,n),s=h.Vec.rotWith(h.Vec.add(e,[t[0],0]),o,n),a=h.Vec.rotWith(h.Vec.add(e,t),o,n),d=h.Vec.rotWith(h.Vec.add(e,[0,t[1]]),o,n);return[["top",[i,s]],["right",[s,a]],["bottom",[a,d]],["left",[d,i]]]}static circleFromThreePoints(e,t,n){let[o,i]=e,[s,a]=t,[d,l]=n,c=o*(a-l)-i*(s-d)+s*l-d*a,m=(o*o+i*i)*(l-a)+(s*s+a*a)*(i-l)+(d*d+l*l)*(a-i),p=(o*o+i*i)*(s-d)+(s*s+a*a)*(d-o)+(d*d+l*l)*(o-s),u=-m/(2*c),v=-p/(2*c);return[u,v,Math.hypot(u-o,v-i)]}static perimeterOfEllipse(e,t){let n=Math.pow(e-t,2)/Math.pow(e+t,2);return Math.PI*(e+t)*(1+3*n/(10+Math.sqrt(4-3*n)))}static shortAngleDist(e,t){let n=Math.PI*2,o=(t-e)%n;return 2*o%n-o}static longAngleDist(e,t){return Math.PI*2-K.shortAngleDist(e,t)}static lerpAngles(e,t,n){return e+K.shortAngleDist(e,t)*n}static angleDelta(e,t){return K.shortAngleDist(e,t)}static getSweep(e,t,n){return K.angleDelta(h.Vec.angle(e,t),h.Vec.angle(e,n))}static clampRadians(e){return(Math.PI*2+e)%(Math.PI*2)}static snapAngleToSegments(e,t){let n=Math.PI*2/t;return Math.floor((K.clampRadians(e)+n/2)/n)*n}static isAngleBetween(e,t,n){if(n===e||n===t)return!0;let o=(t-e+Ke)%Ke,i=(n-e+Ke)%Ke;return o<=Math.PI!=i>o}static degreesToRadians(e){return e*Math.PI/180}static radiansToDegrees(e){return e*180/Math.PI}static getArcLength(e,t,n,o){let i=K.getSweep(e,n,o);return t*(2*Math.PI)*(i/(2*Math.PI))}static getSweepFlag(e,t,n){let o=h.Vec.angle(e,n);return(h.Vec.angle(e,t)-o+3*Math.PI)%(2*Math.PI)-Math.PI>0?0:1}static getLargeArcFlag(e,t,n){let o=h.Vec.angle(n,e),s=(h.Vec.angle(n,t)-o+3*Math.PI)%(2*Math.PI)-Math.PI;return Math.abs(s)>Math.PI/2?0:1}static getArcDashOffset(e,t,n,o,i){let s=K.getSweepFlag(e,n,o),a=K.getArcLength(e,t,n,o);return-(s<0?a:2*Math.PI*e[2]-a)/2+i}static getEllipseDashOffset(e,t){return-(2*Math.PI*e[2])/2+-t}static pointInCircle(e,t,n){return h.Vec.dist(e,t)<=n}static pointInEllipse(e,t,n,o,i=0){i=i||0;let s=Math.cos(i),a=Math.sin(i),d=h.Vec.sub(e,t),l=s*d[0]+a*d[1],c=a*d[0]-s*d[1];return l*l/(n*n)+c*c/(o*o)<=1}static pointInRect(e,t){return!(e[0]<t[0]||e[0]>e[0]+t[0]||e[1]<t[1]||e[1]>e[1]+t[1])}static pointInPolygon(e,t){let n=0;return t.forEach((o,i)=>{let s=t[(i+1)%t.length];o[1]<=e[1]?s[1]>e[1]&&h.Vec.cross(o,s,e)>0&&(n+=1):s[1]<=e[1]&&h.Vec.cross(o,s,e)<0&&(n-=1)}),n!==0}static pointInBounds(e,t){return!(e[0]<t.minX||e[0]>t.maxX||e[1]<t.minY||e[1]>t.maxY)}static pointInPolyline(e,t,n=3){for(let o=1;o<t.length;o++)if(h.Vec.distanceToLineSegment(t[o-1],t[o],e)<n)return!0;return!1}static getBoundsSides(e){return this.getRectangleSides([e.minX,e.minY],[e.width,e.height])}static expandBounds(e,t){return{minX:e.minX-t,minY:e.minY-t,maxX:e.maxX+t,maxY:e.maxY+t,width:e.width+t*2,height:e.height+t*2}}static boundsCollide(e,t){return!(e.maxX<t.minX||e.minX>t.maxX||e.maxY<t.minY||e.minY>t.maxY)}static boundsContain(e,t){return e.minX<t.minX&&e.minY<t.minY&&e.maxY>t.maxY&&e.maxX>t.maxX}static boundsContained(e,t){return K.boundsContain(t,e)}static boundsAreEqual(e,t){return!(t.maxX!==e.maxX||t.minX!==e.minX||t.maxY!==e.maxY||t.minY!==e.minY)}static getBoundsFromPoints(e,t=0){let n=1/0,o=1/0,i=-1/0,s=-1/0;if(e.length<2)n=0,o=0,i=1,s=1;else for(let[a,d]of e)n=Math.min(a,n),o=Math.min(d,o),i=Math.max(a,i),s=Math.max(d,s);return t!==0?K.getBoundsFromPoints(e.map(a=>h.Vec.rotWith(a,[(n+i)/2,(o+s)/2],t))):{minX:n,minY:o,maxX:i,maxY:s,width:Math.max(1,i-n),height:Math.max(1,s-o)}}static centerBounds(e,t){let n=this.getBoundsCenter(e),o=t[0]-n[0],i=t[1]-n[1];return this.translateBounds(e,[o,i])}static snapBoundsToGrid(e,t){let n=Math.round(e.minX/t)*t,o=Math.round(e.minY/t)*t,i=Math.round(e.maxX/t)*t,s=Math.round(e.maxY/t)*t;return{minX:n,minY:o,maxX:i,maxY:s,width:Math.max(1,i-n),height:Math.max(1,s-o)}}static translateBounds(e,t){return{minX:e.minX+t[0],minY:e.minY+t[1],maxX:e.maxX+t[0],maxY:e.maxY+t[1],width:e.width,height:e.height}}static rotateBounds(e,t,n){let[o,i]=h.Vec.rotWith([e.minX,e.minY],t,n),[s,a]=h.Vec.rotWith([e.maxX,e.maxY],t,n);return{minX:o,minY:i,maxX:s,maxY:a,width:e.width,height:e.height}}static getRotatedEllipseBounds(e,t,n,o,i=0){let s=Math.cos(i),a=Math.sin(i),d=Math.hypot(n*s,o*a),l=Math.hypot(n*a,o*s);return{minX:e+n-d,minY:t+o-l,maxX:e+n+d,maxY:t+o+l,width:d*2,height:l*2}}static getExpandedBounds(e,t){let n=Math.min(e.minX,t.minX),o=Math.min(e.minY,t.minY),i=Math.max(e.maxX,t.maxX),s=Math.max(e.maxY,t.maxY),a=Math.abs(i-n),d=Math.abs(s-o);return{minX:n,minY:o,maxX:i,maxY:s,width:a,height:d}}static getCommonBounds(e){if(e.length<2)return e[0];let t=e[0];for(let n=1;n<e.length;n++)t=K.getExpandedBounds(t,e[n]);return t}static getRotatedCorners(e,t=0){let n=[e.minX+e.width/2,e.minY+e.height/2];return[[e.minX,e.minY],[e.maxX,e.minY],[e.maxX,e.maxY],[e.minX,e.maxY]].map(o=>h.Vec.rotWith(o,n,t))}static getTransformedBoundingBox(e,t,n,o=0,i=!1){let[s,a]=[e.minX,e.minY],[d,l]=[e.maxX,e.maxY],[c,m]=[e.minX,e.minY],[p,u]=[e.maxX,e.maxY];if(t==="center")return{minX:c+n[0],minY:m+n[1],maxX:p+n[0],maxY:u+n[1],width:p-c,height:u-m,scaleX:1,scaleY:1};let[v,T]=h.Vec.rot(n,-o);switch(t){case"top_edge":case"top_left_corner":case"top_right_corner":{m+=T;break}case"bottom_edge":case"bottom_left_corner":case"bottom_right_corner":{u+=T;break}}switch(t){case"left_edge":case"top_left_corner":case"bottom_left_corner":{c+=v;break}case"right_edge":case"top_right_corner":case"bottom_right_corner":{p+=v;break}}let x=d-s,b=l-a,f=(p-c)/x,y=(u-m)/b,X=f<0,U=y<0,w=Math.abs(p-c),P=Math.abs(u-m);if(i){let R=x/b,S=R<w/P,k=w*(y<0?1:-1)*(1/R),M=P*(f<0?1:-1)*R;switch(t){case"top_left_corner":{S?m=u+k:c=p+M;break}case"top_right_corner":{S?m=u+k:p=c-M;break}case"bottom_right_corner":{S?u=m-k:p=c-M;break}case"bottom_left_corner":{S?u=m-k:c=p+M;break}case"bottom_edge":case"top_edge":{let O=(c+p)/2,te=P*R;c=O-te/2,p=O+te/2;break}case"left_edge":case"right_edge":{let O=(m+u)/2,te=w/R;m=O-te/2,u=O+te/2;break}}}if(o%(Math.PI*2)!==0){let R=[0,0],S=h.Vec.med([s,a],[d,l]),k=h.Vec.med([c,m],[p,u]);switch(t){case"top_left_corner":{R=h.Vec.sub(h.Vec.rotWith([p,u],k,o),h.Vec.rotWith([d,l],S,o));break}case"top_right_corner":{R=h.Vec.sub(h.Vec.rotWith([c,u],k,o),h.Vec.rotWith([s,l],S,o));break}case"bottom_right_corner":{R=h.Vec.sub(h.Vec.rotWith([c,m],k,o),h.Vec.rotWith([s,a],S,o));break}case"bottom_left_corner":{R=h.Vec.sub(h.Vec.rotWith([p,m],k,o),h.Vec.rotWith([d,a],S,o));break}case"top_edge":{R=h.Vec.sub(h.Vec.rotWith(h.Vec.med([c,u],[p,u]),k,o),h.Vec.rotWith(h.Vec.med([s,l],[d,l]),S,o));break}case"left_edge":{R=h.Vec.sub(h.Vec.rotWith(h.Vec.med([p,m],[p,u]),k,o),h.Vec.rotWith(h.Vec.med([d,a],[d,l]),S,o));break}case"bottom_edge":{R=h.Vec.sub(h.Vec.rotWith(h.Vec.med([c,m],[p,m]),k,o),h.Vec.rotWith(h.Vec.med([s,a],[d,a]),S,o));break}case"right_edge":{R=h.Vec.sub(h.Vec.rotWith(h.Vec.med([c,m],[c,u]),k,o),h.Vec.rotWith(h.Vec.med([s,a],[s,l]),S,o));break}}[c,m]=h.Vec.sub([c,m],R),[p,u]=h.Vec.sub([p,u],R)}return p<c&&([p,c]=[c,p]),u<m&&([u,m]=[m,u]),{minX:c,minY:m,maxX:p,maxY:u,width:p-c,height:u-m,scaleX:(p-c)/(d-s||1)*(X?-1:1),scaleY:(u-m)/(l-a||1)*(U?-1:1)}}static getTransformAnchor(e,t,n){let o=e;switch(e){case"top_left_corner":{t&&n?o="bottom_right_corner":t?o="top_right_corner":n?o="bottom_left_corner":o="bottom_right_corner";break}case"top_right_corner":{t&&n?o="bottom_left_corner":t?o="top_left_corner":n?o="bottom_right_corner":o="bottom_left_corner";break}case"bottom_right_corner":{t&&n?o="top_left_corner":t?o="bottom_left_corner":n?o="top_right_corner":o="top_left_corner";break}case"bottom_left_corner":{t&&n?o="top_right_corner":t?o="bottom_right_corner":n?o="top_left_corner":o="top_right_corner";break}}return o}static getRelativeTransformedBoundingBox(e,t,n,o,i){let s=(o?t.maxX-n.maxX:n.minX-t.minX)/t.width,a=(i?t.maxY-n.maxY:n.minY-t.minY)/t.height,d=n.width/t.width,l=n.height/t.height,c=e.minX+e.width*s,m=e.minY+e.height*a,p=e.width*d,u=e.height*l;return{minX:c,minY:m,maxX:c+p,maxY:m+u,width:p,height:u}}static getRotatedSize(e,t){let n=h.Vec.div(e,2),o=[[0,0],[e[0],0],e,[0,e[1]]].map(s=>h.Vec.rotWith(s,n,t)),i=K.getBoundsFromPoints(o);return[i.width,i.height]}static getBoundsCenter(e){return[e.minX+e.width/2,e.minY+e.height/2]}static getBoundsWithCenter(e){let t=K.getBoundsCenter(e);return $(g({},e),{midX:t[0],midY:t[1]})}static getCommonTopLeft(e){let t=[1/0,1/0];return e.forEach(n=>{t[0]=Math.min(t[0],n[0]),t[1]=Math.min(t[1],n[1])}),t}static getFromCache(e,t,n){let o=e.get(t);if(o===void 0&&(e.set(t,n()),o=e.get(t),o===void 0))throw Error("Cache did not include item!");return o}static uniqueId(e=""){return e?((Number(e)^Math.random()*16)>>Number(e)/4).toString(16):`${1e7}-${1e3}-${4e3}-${8e3}-${1e11}`.replace(/[018]/g,K.uniqueId)}static rotateArray(e,t){return e.map((n,o)=>e[(o+t)%e.length])}static debounce(e,t=0){let n;return function(...o){clearTimeout(n),n=setTimeout(()=>e.apply(o),t)}}static getSvgPathFromStroke(e,t=!0){let n=e.length;if(n<4)return"";let o=e[0],i=e[1],s=e[2],a=`M${o[0].toFixed(2)},${o[1].toFixed(2)} Q${i[0].toFixed(2)},${i[1].toFixed(2)} ${ne(i[0],s[0]).toFixed(2)},${ne(i[1],s[1]).toFixed(2)} T`;for(let d=2,l=n-1;d<l;d++)o=e[d],i=e[d+1],a+=`${ne(o[0],i[0]).toFixed(2)},${ne(o[1],i[1]).toFixed(2)} `;return t&&(a+="Z"),a}static getSvgPathFromStrokePoints(e,t=!1){let n=e.length;if(n<4)return"";let o=e[0].point,i=e[1].point,s=e[2].point,a=`M${o[0].toFixed(2)},${o[1].toFixed(2)} Q${i[0].toFixed(2)},${i[1].toFixed(2)} ${ne(i[0],s[0]).toFixed(2)},${ne(i[1],s[1]).toFixed(2)} T`;for(let d=2,l=n-1;d<l;d++)o=e[d].point,i=e[d+1].point,a+=`${ne(o[0],i[0]).toFixed(2)},${ne(o[1],i[1]).toFixed(2)} `;return t&&(a+="Z"),a}static getPerfectDashProps(e,t,n,o=1,i=!0,s=2){let a,d,l;if(n.toLowerCase()==="dashed")a=t*s,l=1,d=i?(a/2).toString():"0";else if(n.toLowerCase()==="dotted")a=t/100,l=100,d="0";else return{strokeDasharray:"none",strokeDashoffset:"none"};let c=Math.floor(e/a/(2*l));c-=c%o,c=Math.max(c,4);let m=Math.max(a,(e-c*a)/(i?c:c-1));return{strokeDasharray:[a,m].join(" "),strokeDashoffset:d}}static isMobileSafari(){if(typeof window=="undefined")return!1;let e=window.navigator.userAgent,t=!!e.match(/iPad/i)||!!e.match(/iPhone/i),n=!!e.match(/WebKit/i);return t&&n&&!e.match(/CriOS/i)}static throttle(e,t){let n,o;return function(...i){return n||(n=!0,setTimeout(()=>n=!1,t),o=e(...i)),o}}static isDarwin(){return/Mac|iPod|iPhone|iPad/.test(window.navigator.platform)}static metaKey(e){return K.isDarwin()?e.metaKey:e.ctrlKey}static lns(e){let t=e.split("");return t.push(...t.splice(0,Math.round(t.length/5))),t.push(...t.splice(0,Math.round(t.length/4))),t.push(...t.splice(0,Math.round(t.length/3))),t.push(...t.splice(0,Math.round(t.length/2))),t.reverse().map(n=>+n?+n<5?5+ +n:+n>5?+n-5:n:n).join("")}},C=K;B(C,"getSnapPoints",(e,t,n)=>{let o=g({},e),i=[0,0],s=[],a={["minX"]:{id:"minX",isSnapped:!1},["midX"]:{id:"midX",isSnapped:!1},["maxX"]:{id:"maxX",isSnapped:!1},["minY"]:{id:"minY",isSnapped:!1},["midY"]:{id:"midY",isSnapped:!1},["maxY"]:{id:"maxY",isSnapped:!1}},d=["midX","minX","maxX"],l=["midY","minY","maxY"],c=t.map(T=>{let x=d.flatMap((f,y)=>d.map((X,U)=>{let w=o[f]-T[X],P=Math.abs(w);return{f,t:X,gap:w,distance:P,isCareful:y===0||y+U===3}})),b=l.flatMap((f,y)=>l.map((X,U)=>{let w=o[f]-T[X],P=Math.abs(w);return{f,t:X,gap:w,distance:P,isCareful:y===0||y+U===3}}));return[T,x,b]}),m=1/0,p=1/0,u=1/0,v=1/0;return c.forEach(([T,x,b])=>{x.forEach(f=>{f.distance<n&&f.distance<u&&(u=f.distance,m=f.gap)}),b.forEach(f=>{f.distance<n&&f.distance<v&&(v=f.distance,p=f.gap)})}),c.forEach(([T,x,b])=>{m!==1/0&&x.forEach(f=>{Math.abs(f.gap-m)<2&&(a[f.f]=$(g({},a[f.f]),{isSnapped:!0,to:T[f.t],B:T,distance:f.distance}))}),p!==1/0&&b.forEach(f=>{Math.abs(f.gap-p)<2&&(a[f.f]=$(g({},a[f.f]),{isSnapped:!0,to:T[f.t],B:T,distance:f.distance}))})}),i[0]=m===1/0?0:m,i[1]=p===1/0?0:p,o.minX-=i[0],o.midX-=i[0],o.maxX-=i[0],o.minY-=i[1],o.midY-=i[1],o.maxY-=i[1],d.forEach(T=>{let x=a[T];if(!x.isSnapped)return;let{id:b,B:f}=x,y=o[b];s.push(b==="minX"?[[y,o.midY],[y,f.minY],[y,f.maxY]]:[[y,o.minY],[y,o.maxY],[y,f.minY],[y,f.maxY]])}),l.forEach(T=>{let x=a[T];if(!x.isSnapped)return;let{id:b,B:f}=x,y=o[b];s.push(b==="midY"?[[o.midX,y],[f.minX,y],[f.maxX,y]]:[[o.minX,y],[o.maxX,y],[f.minX,y],[f.maxX,y]])}),{offset:i,snapLines:s}}),B(C,"deepMerge",(e,t)=>{let n=g({},e),o=Object.entries(t);for(let[i,s]of o)n[i]=s===Object(s)&&!Array.isArray(s)?K.deepMerge(n[i],s):s;return n});function ne(r,e){return(r+e)/2}var I=C;function at(r,e){let t=z.useRef(void 0),n=z.useRef(void 0),o=z.useRef([0,0]),i=z.useRef(0),{inputs:s,bounds:a,callbacks:d}=E();z.useEffect(()=>{let u=v=>v.preventDefault();return document.addEventListener("gesturestart",u),document.addEventListener("gesturechange",u),()=>{document.removeEventListener("gesturestart",u),document.removeEventListener("gesturechange",u)}},[]);let l=z.useCallback(({event:u})=>{var y,X,U,w;if(u.preventDefault(),s.isPinching||u.timeStamp<=i.current)return;i.current=u.timeStamp;let[v,T,x]=hn(u);if((u.altKey||u.ctrlKey||u.metaKey)&&u.buttons===0){let R=[...(X=(y=s.pointer)==null?void 0:y.point)!=null?X:[a.width/2,a.height/2],x*.618],S=s.pan(R,u);(U=d.onZoom)==null||U.call(d,$(g({},S),{delta:R}),u);return}let b=De.Vec.mul(u.shiftKey&&!I.isDarwin()?[T,0]:[v,T],.5);if(De.Vec.isEqual(b,[0,0]))return;let f=s.pan(b,u);(w=d.onPan)==null||w.call(d,f,u)},[d,s,a]),c=z.useCallback(({origin:u,event:v})=>{var b;if(v instanceof WheelEvent)return;let T=e.current;if(!T||!(v.target===T||T.contains(v.target)))return;let x=s.pinch(u,u);s.isPinching=!0,(b=d.onPinchStart)==null||b.call(d,x,v),n.current=x.point,t.current=x.origin,o.current=[0,0]},[d,s,a]),m=z.useCallback(({origin:u,offset:v,event:T})=>{var y;if(T instanceof WheelEvent)return;let x=e.current;if(!(T.target===x||(x==null?void 0:x.contains(T.target)))||!t.current)return;let b=s.pinch(u,t.current),f=De.Vec.sub(b.delta,o.current);o.current=b.delta,(y=d.onPinch)==null||y.call(d,$(g({},b),{point:b.point,origin:t.current,delta:[...f,v[0]]}),T),n.current=u},[d,s,a]),p=z.useCallback(({origin:u,event:v})=>{var b;let T=e.current;if(!(v.target===T||(T==null?void 0:T.contains(v.target))))return;let x=s.pinch(u,u);s.isPinching=!1,(b=d.onPinchEnd)==null||b.call(d,x,v),n.current=void 0,t.current=void 0,o.current=[0,0]},[]);(0,st.useGesture)({onWheel:l,onPinchStart:c,onPinch:m,onPinchEnd:p},{target:e,eventOptions:{passive:!1},pinch:{from:[r.current,0],scaleBounds:()=>({from:r.current,max:5,min:.1})}})}var it=10;function hn(r){let{deltaY:e,deltaX:t}=r,n=0;if(r.ctrlKey||r.metaKey){let o=Math.sign(r.deltaY),i=Math.abs(r.deltaY),s=e;i>it&&(s=it*o),n=s}return[t,e,n]}var dt=require("react");function lt(){let{callbacks:r}=E();(0,dt.useEffect)(()=>{function e(){var t;(t=r.onShapeBlur)==null||t.call(r)}return I.isMobileSafari()?(document.addEventListener("focusout",e),()=>document.removeEventListener("focusout",e)):()=>null},[r])}var ct=L(require("react"));function ut(){let{callbacks:r,inputs:e}=E();return ct.useMemo(()=>({onPointerDown:t=>{var o,i,s;if(t.dead||(t.dead=!0,!e.pointerIsValid(t)))return;if(t.currentTarget.setPointerCapture(t.pointerId),t.button===2){(o=r.onRightPointCanvas)==null||o.call(r,e.pointerDown(t,"canvas"),t);return}let n=e.pointerDown(t,"canvas");t.button===0&&((i=r.onPointCanvas)==null||i.call(r,n,t)),(s=r.onPointerDown)==null||s.call(r,n,t)},onPointerMove:t=>{var o,i;if(t.dead||(t.dead=!0,!e.pointerIsValid(t)))return;let n=e.pointerMove(t,"canvas");t.buttons===1&&t.currentTarget.hasPointerCapture(t.pointerId)&&((o=r.onDragCanvas)==null||o.call(r,n,t)),(i=r.onPointerMove)==null||i.call(r,n,t)},onPointerUp:t=>{var i,s,a,d,l;if(t.dead||(t.dead=!0,e.activePointer=void 0,!e.pointerIsValid(t)))return;let n=e.isDoubleClick(),o=e.pointerUp(t,"canvas");if(t.button===2){(i=r.onPointerUp)==null||i.call(r,o,t);return}t.currentTarget.hasPointerCapture(t.pointerId)&&((s=t.currentTarget)==null||s.releasePointerCapture(t.pointerId)),t.button===0&&(n&&!(o.altKey||o.metaKey)&&((a=r.onDoubleClickCanvas)==null||a.call(r,o,t)),(d=r.onReleaseCanvas)==null||d.call(r,o,t)),(l=r.onPointerUp)==null||l.call(r,o,t)},onDrop:r.onDrop,onDragOver:r.onDragOver}),[r,e])}var Ye=L(require("react"));function mt(r){let{rPageState:e,rSelectionBounds:t,callbacks:n,inputs:o}=Ye.useContext(ve);return Ye.useMemo(()=>({onPointerDown:i=>{var a,d,l,c,m,p,u;if(i.dead||(i.dead=!0,!o.pointerIsValid(i)))return;if(i.button===2){(a=n.onRightPointShape)==null||a.call(n,o.pointerDown(i,r),i);return}let s=o.pointerDown(i,r);if((d=i.currentTarget)==null||d.setPointerCapture(i.pointerId),t.current&&C.pointInBounds(s.point,t.current)&&!e.current.selectedIds.includes(r)){i.button===0&&((l=n.onPointBounds)==null||l.call(n,o.pointerDown(i,"bounds"),i),(c=n.onPointShape)==null||c.call(n,s,i)),(m=n.onPointerDown)==null||m.call(n,s,i);return}i.button===0&&((p=n.onPointShape)==null||p.call(n,s,i)),(u=n.onPointerDown)==null||u.call(n,s,i)},onPointerUp:i=>{var d,l,c,m;if(i.dead||(i.dead=!0,!o.pointerIsValid(i))||i.button===2)return;o.activePointer=void 0;let s=o.isDoubleClick(),a=o.pointerUp(i,r);i.pointerId&&i.currentTarget.hasPointerCapture(i.pointerId)&&((d=i.currentTarget)==null||d.releasePointerCapture(i.pointerId)),i.button===0&&(s&&!(a.altKey||a.metaKey)&&((l=n.onDoubleClickShape)==null||l.call(n,a,i)),(c=n.onReleaseShape)==null||c.call(n,a,i)),(m=n.onPointerUp)==null||m.call(n,a,i)},onPointerMove:i=>{var a,d;if(i.dead||(i.dead=!0,i.buttons===2||!o.pointerIsValid(i)||o.pointer&&i.pointerId!==o.pointer.pointerId))return;let s=o.pointerMove(i,r);i.buttons===1&&i.currentTarget.hasPointerCapture(i.pointerId)&&((a=n.onDragShape)==null||a.call(n,s,i)),(d=n.onPointerMove)==null||d.call(n,s,i)},onPointerEnter:i=>{var a;if(!o.pointerIsValid(i))return;let s=o.pointerEnter(i,r);(a=n.onHoverShape)==null||a.call(n,s,i)},onPointerLeave:i=>{var a;if(!o.pointerIsValid(i))return;let s=o.pointerEnter(i,r);(a=n.onUnhoverShape)==null||a.call(n,s,i)}}),[o,n,r])}var Pe=require("@tldraw/vec"),Re=L(require("react"));function pt(r,e,t,n,o,i=!1,s=!1,a,d){let l={shape:r,asset:r.assetId?o[r.assetId]:void 0,meta:a,isChildOfSelected:s,isGhost:r.isGhost||i,isEditing:n.editingId===r.id,isBinding:d===r.id,isSelected:n.selectedIds.includes(r.id),isHovered:n.hoveredId===r.id||r.children!==void 0&&(n.hoveredId&&r.children.includes(n.hoveredId)||r.children.some(c=>n.selectedIds.includes(c)))};e.push(l),r.children&&(l.children=[],r.children.map(c=>t[c]).filter(c=>t[c.id]).sort((c,m)=>c.childIndex-m.childIndex).forEach(c=>pt(c,l.children,t,n,o,l.isGhost,l.isSelected||l.isChildOfSelected,a)))}function fn(r,e){return C.boundsContain(e,r)||C.boundsCollide(e,r)}function ht(r,e,t,n){let{callbacks:o,shapeUtils:i,bounds:s}=E(),a=Re.useRef(),d=Re.useRef(-1),l=Re.useRef(new Set),c=Re.useRef(new Set),{selectedIds:m,camera:p}=e,[u,v]=Pe.Vec.sub(Pe.Vec.div([0,0],p.zoom),p.point),[T,x]=Pe.Vec.sub(Pe.Vec.div([s.width,s.height],p.zoom),p.point),b={minX:u,minY:v,maxX:T,maxY:x,height:T-u,width:x-v},f=c.current,y=l.current;f.clear(),y.clear(),Object.values(r.shapes).filter(P=>i[P.type].isStateful||m.includes(P.id)||fn(i[P.type].getBounds(P),b)).forEach(P=>{if(P.parentId===r.id){y.add(P.id),f.add(P);return}let R=r.shapes[P.parentId];if(R===void 0)throw Error(`A shape (${P.id}) has a parent (${P.parentId}) that does not exist!`);y.add(R.id),f.add(R)}),f.size!==d.current&&(a.current&&clearTimeout(a.current),a.current=requestAnimationFrame(()=>{var P;(P=o.onRenderCountChange)==null||P.call(o,Array.from(y.values()))}),d.current=f.size);let U=e.bindingId?r.bindings[e.bindingId].toId:void 0,w=[];return f.forEach(P=>{if(P===void 0)throw Error("Rendered shapes included a missing shape");pt(P,w,r.shapes,e,t,P.isGhost,!1,n,U)}),w.sort((P,R)=>P.shape.childIndex-R.shape.childIndex),w}var Ee=L(require("react")),Qe=new Map;function Tn(r,e){return Object.keys(e).reduce((t,n)=>{let o=e[n];return o?t+`${`--${r}-${n}`}: ${o};
`:t},"")}function gn(r,e,t=":root"){Ee.useLayoutEffect(()=>{let n=document.createElement("style"),o=Tn(r,e);return n.setAttribute("id",`${r}-theme`),n.setAttribute("data-selector",t),n.innerHTML=`
${t} {
${o}
}
`,document.head.appendChild(n),()=>{n&&document.head.contains(n)&&document.head.removeChild(n)}},[r,e,t])}function Ln(r,e){Ee.useLayoutEffect(()=>{if(Qe.get(r))return()=>{};let t=document.createElement("style");return t.innerHTML=e,t.setAttribute("id",r),document.head.appendChild(t),Qe.set(r,t),()=>{t&&document.head.contains(t)&&(document.head.removeChild(t),Qe.delete(r))}},[r,e])}var yn=(r,...e)=>r.reduce((t,n,o)=>t+n+(o<e.length?e[o]:""),""),vn={accent:"rgb(255, 0, 0)",brushFill:"rgba(0,0,0,.05)",brushStroke:"rgba(0,0,0,.25)",brushDashStroke:"rgba(0,0,0,.6)",selectStroke:"rgb(66, 133, 244)",selectFill:"rgba(65, 132, 244, 0.05)",binding:"rgba(65, 132, 244, 0.12)",background:"rgb(248, 249, 250)",foreground:"rgb(51, 51, 51)",grid:"rgba(144, 144, 144, 1)"},xn=yn`
.tl-container {
--tl-zoom: 1;
--tl-scale: calc(1 / var(--tl-zoom));
--tl-padding: calc(64px * max(1, var(--tl-scale)));
--tl-performance-all: auto;
--tl-performance-selected: auto;
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
box-sizing: border-box;
padding: 0px;
margin: 0px;
z-index: 100;
overflow: hidden;
touch-action: none;
overscroll-behavior: none;
background-color: var(--tl-background);
}
.tl-container * {
box-sizing: border-box;
}
.tl-overlay {
position: absolute;
width: 100%;
height: 100%;
touch-action: none;
pointer-events: none;
}
.tl-grid {
position: absolute;
width: 100%;
height: 100%;
touch-action: none;
pointer-events: none;
user-select: none;
}
.tl-snap-line {
stroke: var(--tl-accent);
stroke-width: calc(1px * var(--tl-scale));
}
.tl-snap-point {
stroke: var(--tl-accent);
stroke-width: calc(1px * var(--tl-scale));
}
.tl-canvas {
position: absolute;
width: 100%;
height: 100%;
touch-action: none;
pointer-events: all;
overflow: clip;
}
.tl-layer {
position: absolute;
top: 0px;
left: 0px;
height: 0px;
width: 0px;
contain: layout style size;
}
.tl-absolute {
position: absolute;
top: 0px;
left: 0px;
transform-origin: center center;
contain: layout style size;
}
.tl-positioned {
position: absolute;
top: 0px;
left: 0px;
transform-origin: center center;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
contain: layout style size;
will-change: var(--tl-performance-all);
}
.tl-positioned-svg {
width: 100%;
height: 100%;
overflow: hidden;
contain: layout style size;
}
.tl-positioned-div {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
padding: var(--tl-padding);
overflow: hidden;
contain: layout style size;
}
.tl-positioned-selected {
will-change: var(--tl-performance-selected);
}
.tl-inner-div {
position: relative;
width: 100%;
height: 100%;
}
.tl-stroke-hitarea {
fill: none;
stroke: transparent;
stroke-width: calc(24px * var(--tl-scale));
pointer-events: stroke;
stroke-linecap: round;
stroke-linejoin: round;
}
.tl-fill-hitarea {
fill: transparent;
stroke: transparent;
stroke-width: calc(24px * var(--tl-scale));
pointer-events: all;
stroke-linecap: round;
stroke-linejoin: round;
}
.tl-counter-scaled {
transform: scale(var(--tl-scale));
}
.tl-dashed {
stroke-dasharray: calc(2px * var(--tl-scale)), calc(2px * var(--tl-scale));
}
.tl-transparent {
fill: transparent;
stroke: transparent;
}
.tl-cursor-ns {
cursor: ns-resize;
}
.tl-cursor-ew {
cursor: ew-resize;
}
.tl-cursor-nesw {
cursor: nesw-resize;
}
.tl-cursor-nwse {
cursor: nwse-resize;
}
.tl-corner-handle {
stroke: var(--tl-selectStroke);
fill: var(--tl-background);
stroke-width: calc(1.5px * var(--tl-scale));
}
.tl-rotate-handle {
stroke: var(--tl-selectStroke);
fill: var(--tl-background);
stroke-width: calc(1.5px * var(--tl-scale));
cursor: grab;
}
.tl-binding {
fill: var(--tl-selectFill);
stroke: var(--tl-selectStroke);
stroke-width: calc(1px * var(--tl-scale));
pointer-events: none;
}
.tl-user {
left: calc(-15px * var(--tl-scale));
top: calc(-15px * var(--tl-scale));
height: calc(35px * var(--tl-scale));
width: calc(35px * var(--tl-scale));
transform: scale(var(--tl-scale));
pointer-events: none;
will-change: transform;
}
.tl-animated {
transition: transform 200ms linear;
}
.tl-indicator {
fill: transparent;
stroke-width: calc(1.5px * var(--tl-scale));
pointer-events: none;
}
.tl-user-indicator-bounds {
border-style: solid;
border-width: calc(1px * var(--tl-scale));
}
.tl-hovered {
stroke: var(--tl-selectStroke);
}
.tl-selected {
stroke: var(--tl-selectStroke);
}
.tl-locked {
stroke-dasharray: calc(3px * var(--tl-scale)) calc(3px * var(--tl-scale));
}
.tl-editing {
stroke-width: calc(2.5px * min(5, var(--tl-scale)));
}
.tl-performance {
will-change: transform, contents;
}
.tl-clone-target {
pointer-events: all;
}
.tl-clone-target:hover .tl-clone-button {
opacity: 1;
}
.tl-clone-button-target {
cursor: pointer;
pointer-events: all;
}
.tl-clone-button-target:hover .tl-clone-button {
fill: var(--tl-selectStroke);
}
.tl-clone-button {
opacity: 0;
r: calc(8px * var(--tl-scale));
stroke-width: calc(1.5px * var(--tl-scale));
stroke: var(--tl-selectStroke);
fill: var(--tl-background);
}
.tl-bounds {
pointer-events: none;
contain: layout style size;
}
.tl-bounds-bg {
stroke: none;
fill: var(--tl-selectFill);
pointer-events: all;
contain: layout style size;
}
.tl-bounds-center {
fill: transparent;
stroke: var(--tl-selectStroke);
stroke-width: calc(1.5px * var(--tl-scale));
}
.tl-brush {
fill: var(--tl-brushFill);
stroke: var(--tl-brushStroke);
stroke-width: calc(1px * var(--tl-scale));
pointer-events: none;
contain: layout style size;
}
.tl-dashed-brush-line {
fill: none;
stroke: var(--tl-brushDashStroke);
stroke-width: calc(1px * var(--tl-scale));
pointer-events: none;
}
.tl-brush.dashed {
stroke: none;
}
.tl-handle {
pointer-events: all;
cursor: grab;
}
.tl-handle:hover .tl-handle-bg {
fill: var(--tl-selectFill);
}
.tl-handle:hover .tl-handle-bg > * {
stroke: var(--tl-selectFill);
}
.tl-handle:active .tl-handle-bg {
cursor: grabbing;
fill: var(--tl-selectFill);
}
.tl-handle:active .tl-handle-bg > * {
stroke: var(--tl-selectFill);
}
.tl-handle {
fill: var(--tl-background);
stroke: var(--tl-selectStroke);
stroke-width: 1.5px;
}
.tl-handle-bg {
fill: transparent;
stroke: none;
pointer-events: all;
r: calc(16px / max(1, var(--tl-zoom)));
}
.tl-binding-indicator {
fill: transparent;
stroke: var(--tl-binding);
}
.tl-centered-g {
transform: translate(var(--tl-padding), var(--tl-padding));
}
.tl-current-parent > *[data-shy='true'] {
opacity: 1;
}
.tl-binding {
fill: none;
stroke: var(--tl-selectStroke);
stroke-width: calc(2px * var(--tl-scale));
}
.tl-grid-dot {
fill: var(--tl-grid);
}
.tl-erase-line {
stroke-linejoin: round;
stroke-linecap: round;
pointer-events: none;
fill: var(--tl-grid);
opacity: 0.32;
}
`;function ft(r,e){let t=Ee.useMemo(()=>g(g({},vn),r),[r]);gn("tl",t,e),Ln("tl-canvas",xn)}var he=L(require("react"));function Z(r){let{callbacks:e,inputs:t}=E(),n=he.useCallback(d=>{var c,m,p,u;if(d.dead||(d.dead=!0,!t.pointerIsValid(d)))return;(c=d.currentTarget)==null||c.setPointerCapture(d.pointerId);let l=t.pointerDown(d,r);if(d.button===2){(m=e.onRightPointBoundsHandle)==null||m.call(e,l,d);return}d.button===0&&((p=e.onPointBoundsHandle)==null||p.call(e,l,d)),(u=e.onPointerDown)==null||u.call(e,l,d)},[t,e,r]),o=he.useCallback(d=>{var m,p,u;if(d.dead||(d.dead=!0,d.button===2||!t.pointerIsValid(d)))return;let l=t.pointerUp(d,r),c=t.isDoubleClick();d.button===0&&(c&&!(l.altKey||l.metaKey)&&((m=e.onDoubleClickBoundsHandle)==null||m.call(e,l,d)),(p=e.onReleaseBoundsHandle)==null||p.call(e,l,d)),(u=e.onPointerUp)==null||u.call(e,l,d)},[t,e,r]),i=he.useCallback(d=>{var c,m;if(d.dead||(d.dead=!0,!t.pointerIsValid(d))||d.buttons===2)return;let l=t.pointerMove(d,r);d.buttons===1&&d.currentTarget.hasPointerCapture(d.pointerId)&&((c=e.onDragBoundsHandle)==null||c.call(e,l,d)),(m=e.onPointerMove)==null||m.call(e,l,d)},[t,e,r]),s=he.useCallback(d=>{var l;!t.pointerIsValid(d)||(l=e.onHoverBoundsHandle)==null||l.call(e,t.pointerEnter(d,r),d)},[t,e,r]),a=he.useCallback(d=>{var l;!t.pointerIsValid(d)||(l=e.onUnhoverBoundsHandle)==null||l.call(e,t.pointerEnter(d,r),d)},[t,e,r]);return{onPointerDown:n,onPointerUp:o,onPointerEnter:s,onPointerMove:i,onPointerLeave:a}}var Be=L(require("react"));function Tt(r,e,t){let n=Be.useRef(),o=Be.useRef();Be.useLayoutEffect(()=>{let{zoom:i,point:s}=t.camera,a=i!==n.current,d=s!==o.current;if(n.current=i,o.current=s,a||d){let l=r.current;if(e&&"current"in e){let c=e.current;a&&c&&c.style.setProperty("--tl-zoom",i.toString()),l&&l.style.setProperty("transform",`scale(${i}) translateX(${s[0]}px) translateY(${s[1]}px)`)}}},[t.camera.zoom,t.camera.point])}var Lt=L(require("react"));function gt(r,e){return[(r[0]+e.point[0])*e.zoom,(r[1]+e.point[1])*e.zoom]}function Je(r,e){return r[e.type]}function yt(r,e,t){let{rSelectionBounds:n}=E(),{selectedIds:o}=e,i=Lt.useRef(),s,a=0,d=!1,l=!1;if(o.length===1){let m=o[0],p=r.shapes[m];if(!p)throw Error(`selectedIds is set to the id of a shape that doesn't exist: ${m}`);a=p.rotation||0,d=p.isLocked||!1;let u=Je(t,p);s=u.hideBounds?void 0:u.getBounds(p)}else if(o.length>1){let m=o.map(p=>r.shapes[p]);a=0,d=m.every(p=>p.isLocked),s=m.reduce((p,u,v)=>v===0?Je(t,u).getRotatedBounds(u):I.getExpandedBounds(p,Je(t,u).getRotatedBounds(u)),{})}if(s){let[m,p]=gt([s.minX,s.minY],e.camera),[u,v]=gt([s.maxX,s.maxY],e.camera);l=!!Object.values(r.bindings).find(T=>o.includes(T.toId)||o.includes(T.fromId)),n.current={minX:m,minY:p,maxX:u,maxY:v,width:u-m,height:v-p}}else n.current=null;let c=i.current;return!c||!s?i.current=s:s&&c.minX===s.minX&&c.minY===s.minY&&c.maxX===s.maxX&&c.maxY===s.maxY&&(s=i.current),{bounds:s,rotation:a,isLocked:d,isLinked:l}}var vt=L(require("react"));function xt(r){let{inputs:e,callbacks:t}=E();return vt.useMemo(()=>({onPointerDown:n=>{var i,s,a;if(n.dead||(n.dead=!0,!e.pointerIsValid(n))||n.button===2)return;(i=n.currentTarget)==null||i.setPointerCapture(n.pointerId);let o=e.pointerDown(n,r);n.button===0&&((s=t.onPointHandle)==null||s.call(t,o,n)),(a=t.onPointerDown)==null||a.call(t,o,n)},onPointerUp:n=>{var s,a,d,l;if(n.dead||(n.dead=!0,!e.pointerIsValid(n))||n.button===2)return;let o=e.isDoubleClick(),i=e.pointerUp(n,r);n.currentTarget.hasPointerCapture(n.pointerId)&&((s=n.currentTarget)==null||s.releasePointerCapture(n.pointerId),n.button===0&&(o&&!(i.altKey||i.metaKey)&&((a=t.onDoubleClickHandle)==null||a.call(t,i,n)),(d=t.onReleaseHandle)==null||d.call(t,i,n))),(l=t.onPointerUp)==null||l.call(t,i,n)},onPointerMove:n=>{var i,s;if(n.dead||(n.dead=!0,!e.pointerIsValid(n))||n.buttons===2)return;let o=e.pointerMove(n,r);n.buttons===1&&n.currentTarget.hasPointerCapture(n.pointerId)&&((i=t.onDragHandle)==null||i.call(t,o,n)),(s=t.onPointerMove)==null||s.call(t,o,n)},onPointerEnter:n=>{var i;if(!e.pointerIsValid(n))return;let o=e.pointerEnter(n,r);(i=t.onHoverHandle)==null||i.call(t,o,n)},onPointerLeave:n=>{var i;if(!e.pointerIsValid(n))return;let o=e.pointerEnter(n,r);(i=t.onUnhoverHandle)==null||i.call(t,o,n)}}),[e,t,r])}var bt=L(require("react"));function Pt(r){let{bounds:e}=E();bt.useEffect(()=>{let t=i=>{i.preventDefault()},n=i=>{let s=i.touches[0].pageX,a=i.touches[0].radiusX||0;(s-a<10||s+a>e.width-10)&&i.preventDefault()},o=r.current;return o?(o.addEventListener("gestureend",t),o.addEventListener("gesturechange",t),o.addEventListener("gesturestart",t),o.addEventListener("touchstart",n),()=>{o&&(o.removeEventListener("gestureend",t),o.removeEventListener("gesturechange",t),o.removeEventListener("gesturestart",t),o.removeEventListener("touchstart",n))}):()=>{}},[r,e.width])}var Rt=L(require("react"));function Et(){let{callbacks:r,inputs:e}=E();return Rt.useMemo(()=>({onPointerDown:t=>{var o,i,s,a;if(t.dead||(t.dead=!0,!e.pointerIsValid(t)))return;if(t.button===2){(o=r.onRightPointBounds)==null||o.call(r,e.pointerDown(t,"bounds"),t);return}let n=e.pointerDown(t,"bounds");(i=t.currentTarget)==null||i.setPointerCapture(t.pointerId),t.button===0&&((s=r.onPointBounds)==null||s.call(r,n,t)),(a=r.onPointerDown)==null||a.call(r,n,t)},onPointerUp:t=>{var i,s,a,d;if(t.dead||(t.dead=!0,t.button===2)||(e.activePointer=void 0,!e.pointerIsValid(t)))return;let n=e.isDoubleClick(),o=e.pointerUp(t,"bounds");t.currentTarget.hasPointerCapture(t.pointerId)&&((i=t.currentTarget)==null||i.releasePointerCapture(t.pointerId)),t.button===0&&(n&&!(o.altKey||o.metaKey)&&((s=r.onDoubleClickBounds)==null||s.call(r,o,t)),(a=r.onReleaseBounds)==null||a.call(r,o,t)),(d=r.onPointerUp)==null||d.call(r,o,t)},onPointerMove:t=>{var o,i;if(t.dead||(t.dead=!0,!e.pointerIsValid(t)))return;t.buttons===1&&t.currentTarget.hasPointerCapture(t.pointerId)&&((o=r.onDragBounds)==null||o.call(r,e.pointerMove(t,"bounds"),t));let n=e.pointerMove(t,"bounds");(i=r.onPointerMove)==null||i.call(r,n,t)},onPointerEnter:t=>{var n;!e.pointerIsValid(t)||(n=r.onHoverBounds)==null||n.call(r,e.pointerEnter(t,"bounds"),t)},onPointerLeave:t=>{var n;!e.pointerIsValid(t)||(n=r.onUnhoverBounds)==null||n.call(r,e.pointerEnter(t,"bounds"),t)}}),[e,r])}var Xe=L(require("react"));function Ue(r,e=0){let t=Xe.useRef(null);return Xe.useLayoutEffect(()=>{let n=t.current,o=`
translate(
calc(${r.minX}px - var(--tl-padding)),
calc(${r.minY}px - var(--tl-padding))
)
rotate(${e+(r.rotation||0)}rad)`;n.style.setProperty("transform",o),n.style.setProperty("width",`calc(${Math.floor(r.width)}px + (var(--tl-padding) * 2))`),n.style.setProperty("height",`calc(${Math.floor(r.height)}px + (var(--tl-padding) * 2))`)},[r,e]),t}var Bt=L(require("react"));function Ct(){let{inputs:r,callbacks:e}=E();Bt.useEffect(()=>{let t=o=>{var i;(i=e.onKeyDown)==null||i.call(e,o.key,r.keydown(o),o)},n=o=>{var i;r.keyup(o),(i=e.onKeyUp)==null||i.call(e,o.key,r.keyup(o),o)};return window.addEventListener("keydown",t),window.addEventListener("keyup",n),()=>{window.removeEventListener("keydown",t),window.removeEventListener("keyup",n)}},[r,e])}var St=L(require("react"));function wt(r,e){St.useLayoutEffect(()=>{if(e&&"current"in e){let t=e==null?void 0:e.current;if(!t)return;switch(r){case"transform_selected":{t.style.setProperty("--tl-performance-all","auto"),t.style.setProperty("--tl-performance-selected","transform, contents");break}case"transform_all":{t.style.setProperty("--tl-performance-all","transform, contents"),t.style.setProperty("--tl-performance-selected","transform, contents");break}case"translate_selected":{t.style.setProperty("--tl-performance-all","auto"),t.style.setProperty("--tl-performance-selected","transform");break}case"translate_all":{t.style.setProperty("--tl-performance-all","transform"),t.style.setProperty("--tl-performance-selected","transform");break}default:t.style.setProperty("--tl-performance-all","auto"),t.style.setProperty("--tl-performance-selected","auto")}}},[r])}function bn(a){var d=a,{id:r,bounds:e,rotation:t=0,isGhost:n=!1,isSelected:o=!1,children:i}=d,s=V(d,["id","bounds","rotation","isGhost","isSelected","children"]);let l=Ue(e,t);return $e.createElement("div",g({id:r,ref:l,className:`tl-positioned${n?" tl-ghost":""}${o?" tl-positioned-selected":""}`,"aria-label":"container","data-testid":"container"},s),i)}var q=$e.memo(bn);function Pn({brush:r,zoom:e,dashed:t}){return F.createElement(q,{bounds:r,rotation:0},F.createElement(J,null,F.createElement("rect",{className:"tl-brush"+(t?" dashed":""),opacity:1,x:0,y:0,width:r.width,height:r.height,"aria-label":"brush"}),t&&F.createElement("g",{className:"tl-dashed-brush-line"},F.createElement(Ne,{x1:0,y1:0,x2:r.width,y2:0,zoom:e}),F.createElement(Ne,{x1:r.width,y1:0,x2:r.width,y2:r.height,zoom:e}),F.createElement(Ne,{x1:0,y1:r.height,x2:r.width,y2:r.height,zoom:e}),F.createElement(Ne,{x1:0,y1:0,x2:0,y2:r.height,zoom:e}))))}var Ht=F.memo(Pn);function Ne({x1:r,y1:e,x2:t,y2:n,zoom:o}){let i=I.getPerfectDashProps(Math.hypot(t-r,n-e),1/o,"dashed",1,!0,3);return F.createElement("line",{x1:r,y1:e,x2:t,y2:n,strokeWidth:1/o,strokeDasharray:i.strokeDasharray,strokeDashoffset:i.strokeDashoffset})}var A=L(require("react")),et=A.memo(({color:r})=>A.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 35 35",fill:"none",fillRule:"evenodd"},A.createElement("g",{fill:"rgba(0,0,0,.2)",transform:"translate(1,1)"},A.createElement("path",{d:"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z"}),A.createElement("path",{d:"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z"})),A.createElement("g",{fill:"white"},A.createElement("path",{d:"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z"}),A.createElement("path",{d:"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z"})),A.createElement("g",{fill:r},A.createElement("path",{d:"m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z"}),A.createElement("path",{d:"m13 10.814v11.188l2.969-2.866.428-.139h4.768z"}))));var It=L(require("perfect-freehand")),We=L(require("react"));function Rn({points:r,zoom:e}){if(r.length===0)return null;let t=I.getSvgPathFromStroke((0,It.default)(r,{size:16/e,start:{taper:!0}}));return We.createElement("path",{d:t,className:"tl-erase-line"})}var Mt=We.memo(Rn);var fe=L(require("react"));var kt=[[-1,.15,64],[.05,.375,16],[.15,1,4],[.7,2.5,1]];function Kt({grid:r,camera:e}){return fe.createElement("svg",{className:"tl-grid",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},fe.createElement("defs",null,kt.map(([t,n,o],i)=>{let s=o*r*e.zoom,a=e.point[0]*e.zoom,d=e.point[1]*e.zoom,l=a>0?a%s:s+a%s,c=d>0?d%s:s+d%s,m=e.zoom<n?I.modulate(e.zoom,[t,n],[0,1]):1;return fe.createElement("pattern",{key:`grid-pattern-${i}`,id:`grid-${i}`,width:s,height:s,patternUnits:"userSpaceOnUse"},fe.createElement("circle",{className:"tl-grid-dot",cx:l,cy:c,r:1,opacity:m}))})),kt.map((t,n)=>fe.createElement("rect",{key:`grid-rect-${n}`,width:"100%",height:"100%",fill:`url(#grid-${n})`})))}var oe=L(require("react"));function En({camera:{zoom:r,point:e},children:t}){let n=2.5/r;return oe.createElement("svg",{className:"tl-overlay"},oe.createElement("defs",null,oe.createElement("g",{id:"tl-snap-point"},oe.createElement("path",{className:"tl-snap-point",d:`M ${-n},${-n} L ${n},${n} M ${-n},${n} L ${n},${-n}`}))),oe.createElement("g",{transform:`scale(${r}) translate(${e})`},t))}var Dt=oe.memo(En);var j=L(require("react"));var D=L(require("react"));var le=L(require("react")),J=le.memo(le.forwardRef(function(s,i){var a=s,{id:e,className:t="",children:n}=a,o=V(a,["id","className","children"]);return le.createElement("svg",g({ref:i,className:`tl-positioned-svg ${t}`},o),le.createElement("g",{id:e,className:"tl-centered-g"},n))}));var Ae=L(require("react"));function Bn({bounds:r,isLocked:e,isHidden:t}){return Ae.createElement("rect",{className:["tl-bounds-center",e?"tl-dashed":""].join(" "),x:-1,y:-1,width:r.width+2,height:r.height+2,opacity:t?0:1,pointerEvents:"none","aria-label":"center handle"})}var Yt=Ae.memo(Bn);var N=L(require("react"));var Q=L(require("react"));var Cn={right:0,bottomRight:45,bottom:90,bottomLeft:135,left:180,topLeft:225,top:270,topRight:315};function Sn({bounds:r,side:e,targetSize:t,size:n}){let o=t*2,i={left:-o,topLeft:-o,bottomLeft:-o,right:r.width,topRight:r.width,bottomRight:r.width,top:r.width/2-o/2,bottom:r.width/2-o/2}[e],s={left:r.height/2-o/2,right:r.height/2-o/2,top:-o*2,topLeft:-o,topRight:-o,bottom:r.height,bottomLeft:r.height,bottomRight:r.height}[e],{callbacks:a,inputs:d}=E(),l=Q.useCallback(c=>{var p;c.stopPropagation();let m=d.pointerDown(c,e);(p=a.onShapeClone)==null||p.call(a,m,c)},[a.onShapeClone]);return Q.createElement("g",{className:"tl-clone-target",transform:`translate(${i}, ${s})`,"aria-label":"clone button"},Q.createElement("rect",{className:"tl-transparent",width:t*2,height:t*2}),Q.createElement("g",{className:"tl-clone-button-target",onPointerDown:l,transform:`translate(${t}, ${t}) rotate(${Cn[e]})`},Q.createElement("circle",{className:"tl-transparent ",r:t}),Q.createElement("path",{className:"tl-clone-button",d:`M -${n/2},-${n/2} L ${n/2},0 -${n/2},${n/2} Z`,strokeLinejoin:"round"})))}var ee=Q.memo(Sn);function wn({targetSize:r,size:e,bounds:t}){return N.createElement(N.Fragment,null,N.createElement(ee,{targetSize:r,size:e,bounds:t,side:"top"}),N.createElement(ee,{targetSize:r,size:e,bounds:t,side:"right"}),N.createElement(ee,{targetSize:r,size:e,bounds:t,side:"bottom"}),N.createElement(ee,{targetSize:r,size:e,bounds:t,side:"left"}),N.createElement(ee,{targetSize:r,size:e,bounds:t,side:"topLeft"}),N.createElement(ee,{targetSize:r,size:e,bounds:t,side:"topRight"}),N.createElement(ee,{targetSize:r,size:e,bounds:t,side:"bottomLeft"}),N.createElement(ee,{targetSize:r,size:e,bounds:t,side:"bottomRight"}))}var Xt=N.memo(wn);var Te=L(require("react"));var Hn={["top_left_corner"]:"tl-cursor-nwse",["top_right_corner"]:"tl-cursor-nesw",["bottom_right_corner"]:"tl-cursor-nwse",["bottom_left_corner"]:"tl-cursor-nesw"};function In({size:r,targetSize:e,isHidden:t,corner:n,bounds:o}){let i=Z(n),s=n==="top_left_corner"||n==="top_right_corner",a=n==="top_left_corner"||n==="bottom_left_corner";return Te.createElement("g",{opacity:t?0:1},Te.createElement("rect",g({className:"tl-transparent "+(t?"":Hn[n]),"aria-label":"corner transparent",x:(a?-1:o.width+1)-e,y:(s?-1:o.height+1)-e,width:e*2,height:e*2,pointerEvents:t?"none":"all"},i)),Te.createElement("rect",{className:"tl-corner-handle","aria-label":"corner handle",x:(a?-1:o.width+1)-r/2,y:(s?-1:o.height+1)-r/2,width:r,height:r,pointerEvents:"none"}))}var Ce=Te.memo(In);var Oe=L(require("react"));var Mn={["top_edge"]:"tl-cursor-ns",["right_edge"]:"tl-cursor-ew",["bottom_edge"]:"tl-cursor-ns",["left_edge"]:"tl-cursor-ew"};function kn({size:r,isHidden:e,bounds:t,edge:n}){let o=Z(n),i=n==="top_edge"||n==="bottom_edge",s=n==="right_edge"||n==="bottom_edge",{height:a,width:d}=t;return Oe.createElement("rect",g({pointerEvents:e?"none":"all",className:"tl-transparent tl-edge-handle "+(e?"":Mn[n]),"aria-label":`${n} handle`,opacity:e?0:1,x:i?r/2:(s?d+1:-1)-r/2,y:i?(s?a+1:-1)-r/2:r/2,width:i?Math.max(0,d+1-r):r,height:i?r:Math.max(0,a+1-r)},o))}var Se=Oe.memo(kn);var G=L(require("react"));function Kn({size:r,bounds:e,isHidden:t}){let n=Z("left"),o=Z("center"),i=Z("right");return G.createElement("g",{cursor:"grab",transform:`translate(${e.width/2-r*4}, ${e.height+r*2})`,"aria-label":"link handle"},G.createElement("g",{className:"tl-transparent",pointerEvents:t?"none":"all"},G.createElement("rect",g({x:0,y:0,width:r*2,height:r*2},n)),G.createElement("rect",g({x:r*3,y:0,width:r*2,height:r*2},o)),G.createElement("rect",g({x:r*6,y:0,width:r*2,height:r*2},i))),G.createElement("g",{className:"tl-rotate-handle",transform:`translate(${r/2}, ${r/2})`,"aria-label":"link rotate handle"},G.createElement("path",{d:`M 0,${r/2} L ${r},${r} ${r},0 Z`,pointerEvents:"none",opacity:t?0:1}),G.createElement("path",{transform:`translate(${r*3}, 0)`,d:`M 0,0 L ${r},0 ${r/2},${r} Z`,pointerEvents:"none",opacity:t?0:1}),G.createElement("path",{transform:`translate(${r*6}, 0)`,d:`M ${r},${r/2} L 0,0 0,${r} Z`,pointerEvents:"none",opacity:t?0:1})))}var Ut=G.memo(Kn);var ge=L(require("react"));function Dn({bounds:r,targetSize:e,size:t,isHidden:n}){let o=Z("rotate");return ge.createElement("g",{cursor:"grab",opacity:n?0:1},ge.createElement("circle",g({className:"tl-transparent","aria-label":"rotate handle transparent",cx:r.width/2,cy:t*-2,r:e,pointerEvents:n?"none":"all"},o)),ge.createElement("circle",{className:"tl-rotate-handle","aria-label":"rotate handle",cx:r.width/2,cy:t*-2,r:t/2,pointerEvents:"none"}))}var $t=ge.memo(Dn);var Yn=function({zoom:e,bounds:t,viewportWidth:n,rotation:o,isHidden:i,isLocked:s,hideCloneHandles:a,hideResizeHandles:d,hideRotateHandle:l,hideBindingHandles:c}){let m=(n<768?16:8)/e,p=8/e,u=Math.min(t.width,t.height)*e,v=!l&&!i&&!s&&u>32,T=!i&&!s&&u>24,x=!i&&!s&&u>20,b=!a&&u>24;return D.createElement(q,{bounds:t,rotation:o},D.createElement(J,null,D.createElement(Yt,{bounds:t,isLocked:s,isHidden:i}),!d&&!s?D.createElement(D.Fragment,null,D.createElement(Se,{targetSize:m,size:p,bounds:t,edge:"top_edge",isHidden:!T}),D.createElement(Se,{targetSize:m,size:p,bounds:t,edge:"right_edge",isHidden:!T}),D.createElement(Se,{targetSize:m,size:p,bounds:t,edge:"bottom_edge",isHidden:!T}),D.createElement(Se,{targetSize:m,size:p,bounds:t,edge:"left_edge",isHidden:!T}),D.createElement(Ce,{targetSize:m,size:p,bounds:t,isHidden:i||!x,corner:"top_left_corner"}),D.createElement(Ce,{targetSize:m,size:p,bounds:t,isHidden:i||!x,corner:"top_right_corner"}),D.createElement(Ce,{targetSize:m,size:p,bounds:t,isHidden:i||!x,corner:"bottom_right_corner"}),D.createElement(Ce,{targetSize:m,size:p,bounds:t,isHidden:i||!x,corner:"bottom_left_corner"})):null,v&&D.createElement($t,{targetSize:m,size:p,bounds:t,isHidden:!T}),b&&D.createElement(Xt,{bounds:t,targetSize:m,size:p}),!c&&D.createElement(Ut,{targetSize:m,size:p,bounds:t,isHidden:!T})))},Nt=D.memo(Yn);var Le=L(require("react"));function Xn({bounds:r,rotation:e,isHidden:t}){let n=Et();return Le.createElement(q,{bounds:r,rotation:e},Le.createElement(J,null,Le.createElement("rect",g({className:"tl-bounds-bg","aria-label":"bounds bg",width:r.width,height:r.height,opacity:t?0:1},n))))}var Wt=Le.memo(Xn);var Ve=require("@tldraw/vec"),ce=L(require("react"));var re=L(require("react"));function Un({id:r,point:e}){let t=xt(r);return re.createElement(q,{bounds:I.translateBounds({minX:0,minY:0,maxX:0,maxY:0,width:0,height:0},e)},re.createElement(J,null,re.createElement("g",g({className:"tl-handle","aria-label":"handle"},t),re.createElement("circle",{className:"tl-handle-bg",pointerEvents:"all"}),re.createElement("circle",{className:"tl-counter-scaled tl-handle",pointerEvents:"none",r:4}))))}var At=re.memo(Un);function $n({shape:r,zoom:e}){if(r.handles===void 0)return null;let t=null,n=Object.values(r.handles).reduce((o,i)=>{let s=Ve.Vec.add(i.point,r.point);return(!t||Ve.Vec.dist(s,t)*e>=32)&&(o.push(i),t=s),o},[]);return n.length===1?null:ce.createElement(ce.Fragment,null,n.map(o=>ce.createElement(At,{key:r.id+"_"+o.id,id:o.id,point:Ve.Vec.add(o.point,r.point)})))}var Ot=ce.memo($n);var ie=L(require("react"));var we=L(require("react"));var ze=L(require("react"));function Nn(r){let e=r.utils.getRef(r.shape);return ze.createElement(r.utils.Component,g({ref:e},r))}var Vt=ze.memo(Nn,(r,e)=>r.isHovered!==e.isHovered||r.isSelected!==e.isSelected||r.isEditing!==e.isEditing||r.isBinding!==e.isBinding||r.isGhost!==e.isGhost||r.meta!==e.meta?!1:e.shape!==r.shape?!e.utils.shouldRender(e.shape,r.shape):!0);function Wn(o){var i=o,{shape:r,utils:e,meta:t}=i,n=V(i,["shape","utils","meta"]);let{callbacks:s}=E(),a=e.getBounds(r),d=mt(r.id);return we.createElement(q,{id:r.id,bounds:a,rotation:r.rotation,"data-shape":r.type,isGhost:n.isGhost,isSelected:n.isSelected},we.createElement(Vt,g({shape:r,utils:e,meta:t,events:d,bounds:a,onShapeChange:s.onShapeChange,onShapeBlur:s.onShapeBlur},n)))}var zt=we.memo(Wn);function An(i){var s=i,{shape:r,utils:e,meta:t,children:n}=s,o=V(s,["shape","utils","meta","children"]);return ie.createElement(ie.Fragment,null,ie.createElement(zt,g({shape:r,utils:e[r.type],meta:t},o)),n&&n.map(a=>ie.createElement(tt,g({key:a.shape.id,utils:e},a))))}var tt=ie.memo(An);var ue=L(require("react"));function On({isHovered:r=!1,isSelected:e=!1,isEditing:t=!1,shape:n,user:o,meta:i}){let{shapeUtils:s}=E(),a=s[n.type],d=a.getBounds(n),l=Ue(d,n.rotation);return ue.createElement("div",{ref:l,draggable:!1,className:["tl-indicator","tl-absolute",e&&!o?"tl-selected":"tl-hovered",t?"tl-editing":"",n.isLocked?"tl-locked":""].join(" ")},ue.createElement("svg",{width:"100%",height:"100%"},ue.createElement("g",{className:"tl-centered-g",stroke:o==null?void 0:o.color},ue.createElement(a.Indicator,{shape:n,meta:i,user:o,bounds:d,isSelected:e,isHovered:r}))))}var He=ue.memo(On);function Vn({page:r,pageState:e,assets:t,hideBounds:n,hideHandles:o,hideIndicators:i,hideBindingHandles:s,hideCloneHandles:a,hideRotateHandle:d,hideResizeHandles:l,meta:c}){let{bounds:m,shapeUtils:p}=E(),u=ht(r,e,t,c),{bounds:v,isLinked:T,isLocked:x,rotation:b}=yt(r,e,p),{selectedIds:f,hoveredId:y,editingId:X,camera:{zoom:U}}=e,w=i,P=!0,R=!1,S,k=f.map(M=>r.shapes[M]);if(k.length===1){let M=k[0];R=X===M.id,R&&(w=!0);let O=p[M.type];P=a||!O.showCloneHandles,M.handles!==void 0&&!R&&(S=M)}return j.createElement(j.Fragment,null,v&&j.createElement(Wt,{bounds:v,rotation:b,isHidden:n}),u.map(M=>j.createElement(tt,g({key:M.shape.id,utils:p},M))),!w&&k.map(M=>j.createElement(He,{key:"selected_"+M.id,shape:M,meta:c,isSelected:!0,isEditing:R})),!w&&y&&y!==X&&j.createElement(He,{key:"hovered_"+y,shape:r.shapes[y],meta:c,isHovered:!0}),v&&j.createElement(Nt,{zoom:U,bounds:v,viewportWidth:m.width,isLocked:x,rotation:b,isHidden:n,hideRotateHandle:d,hideResizeHandles:l,hideBindingHandles:s||!T,hideCloneHandles:P}),!o&&S&&j.createElement(Ot,{shape:S,zoom:U}))}var Ft=j.memo(Vn);var _=L(require("react"));function zn({snapLines:r}){return _.createElement(_.Fragment,null,r.map((e,t)=>_.createElement(Gn,{key:t,snapLine:e})))}function Fn({snapLine:r}){let e=I.getBoundsFromPoints(r);return _.createElement(_.Fragment,null,_.createElement("line",{className:"tl-snap-line",x1:e.minX,y1:e.minY,x2:e.maxX,y2:e.maxY}),r.map(([t,n],o)=>_.createElement("use",{key:o,href:"#tl-snap-point",x:t,y:n})))}var Gn=_.memo(Fn),Gt=_.memo(zn);var Ie=L(require("react"));var me=L(require("react"));function jt({user:r,Cursor:e}){let t=me.useRef(null);return me.useLayoutEffect(()=>{t.current&&(t.current.style.transform=`translate(${r.point[0]}px, ${r.point[1]}px)`)},[r.point]),me.createElement("div",{ref:t,className:`tl-absolute tl-user tl-counter-scaled ${r.session?"":"tl-animated"}`},me.createElement(e,{id:r.id,color:r.color,metadata:r.metadata}))}function _t({userId:r,users:e,Cursor:t}){return Ie.createElement(Ie.Fragment,null,Object.values(e).filter(n=>n&&n.id!==r).map(n=>Ie.createElement(jt,{key:n.id,user:n,Cursor:t})))}var se=L(require("react"));function Zt({userId:r,users:e,meta:t,page:n}){let{shapeUtils:o}=E();return se.createElement(se.Fragment,null,Object.values(e).filter(Boolean).filter(i=>i.id!==r&&i.selectedIds.length>0).map(i=>{let s=i.selectedIds.map(d=>n.shapes[d]).filter(Boolean);if(s.length===0)return null;let a=I.getCommonBounds(s.map(d=>o[d.type].getBounds(d)));return se.createElement(se.Fragment,{key:i.id+"_shapes"},se.createElement("div",{className:"tl-absolute tl-user-indicator-bounds",style:{backgroundColor:i.color+"0d",borderColor:i.color+"78",transform:`translate(${a.minX}px, ${a.minY}px)`,width:a.width,height:a.height,pointerEvents:"none"}}),s.map(d=>se.createElement(He,{key:`${i.id}_${d.id}_indicator`,shape:d,user:i,meta:t,isHovered:!0})))}))}var ae=L(require("react"));var jn=r=>{let e=r.parentElement;for(;e;){if(e===document.body)return document;let{overflowY:t}=window.getComputedStyle(e);if(e.scrollHeight>e.clientHeight&&(t==="auto"||t==="scroll"||t==="overlay"))return e;e=e.parentElement}return document};function qt(r,e){let{inputs:t,callbacks:n}=E(),o=ae.useRef(!1),i=ae.useCallback(()=>{var s,a;if(o.current){let d=(s=r.current)==null?void 0:s.getBoundingClientRect();if(d){let l={minX:d.left,maxX:d.left+d.width,minY:d.top,maxY:d.top+d.height,width:d.width,height:d.height};t.bounds=l,e(l),(a=n.onBoundsChange)==null||a.call(n,l)}}else o.current=!0},[r,t,n.onBoundsChange]);ae.useEffect(()=>{let s=r.current?jn(r.current):document,a=C.debounce(i,100);return s.addEventListener("scroll",a),window.addEventListener("resize",a),()=>{s.removeEventListener("scroll",a),window.removeEventListener("resize",a)}},[]),ae.useEffect(()=>{let s=new ResizeObserver(a=>{t.isPinching||a[0].contentRect&&i()});return r.current&&s.observe(r.current),()=>{s.disconnect()}},[r,t]),ae.useEffect(()=>{i()},[r])}function _n({id:r,page:e,pageState:t,assets:n,snapLines:o,eraseLine:i,grid:s,users:a,userId:d,components:l={},meta:c,performanceMode:m,showDashedBrush:p,hideHandles:u,hideBounds:v,hideIndicators:T,hideBindingHandles:x,hideCloneHandles:b,hideResizeHandles:f,hideRotateHandle:y,hideGrid:X,onBoundsChange:U,hideCursors:w}){var O;let P=Y.useRef(null),R=Y.useRef(t.camera.zoom);R.current=t.camera.zoom,at(R,P),qt(P,U),lt(),Pt(P);let S=Y.useRef(null),k=Y.useRef(null);Tt(k,S,t),wt(m,S),Ct();let M=ut();return Y.createElement("div",{id:r,className:"tl-container",ref:S},Y.createElement("div",g({id:"canvas",className:"tl-absolute tl-canvas",ref:P},M),!X&&s&&Y.createElement(Kt,{grid:s,camera:t.camera}),Y.createElement("div",{ref:k,className:"tl-absolute tl-layer","data-testid":"layer"},Y.createElement(Ft,{page:e,pageState:t,assets:n,hideBounds:v,hideIndicators:T,hideHandles:u,hideBindingHandles:x,hideCloneHandles:b,hideResizeHandles:f,hideRotateHandle:y,meta:c}),a&&d&&Y.createElement(Zt,{userId:d,users:a,page:e,meta:c}),t.brush&&Y.createElement(Ht,{brush:t.brush,dashed:p,zoom:t.camera.zoom}),a&&!w&&Y.createElement(_t,{userId:d,users:a,Cursor:(O=l==null?void 0:l.Cursor)!=null?O:et})),Y.createElement(Dt,{camera:t.camera},i&&Y.createElement(Mt,{points:i,zoom:t.camera.zoom}),o&&Y.createElement(Gt,{snapLines:o}))))}var Qt=Y.memo(_n);var de=require("@tldraw/vec");var Zn=250,H=class{constructor(){B(this,"pointer");B(this,"keyboard");B(this,"keys",{});B(this,"isPinching",!1);B(this,"bounds",{minX:0,maxX:640,minY:0,maxY:480,width:640,height:480});B(this,"pointerUpTime",0);B(this,"activePointer");B(this,"panStart",e=>{var a,d;let{shiftKey:t,ctrlKey:n,metaKey:o,altKey:i}=e,s={target:"wheel",pointerId:((a=this.pointer)==null?void 0:a.pointerId)||0,origin:((d=this.pointer)==null?void 0:d.origin)||[0,0],delta:[0,0],pressure:.5,point:H.getPoint(e,this.bounds),shiftKey:t,ctrlKey:n,metaKey:o,altKey:i,spaceKey:this.keys[" "]};return this.pointer=s,s});B(this,"pan",(e,t)=>{if(!this.pointer||this.pointer.target!=="wheel")return this.panStart(t);let{shiftKey:n,ctrlKey:o,metaKey:i,altKey:s}=t,a=this.pointer,d=H.getPoint(t,this.bounds),l=$(g({},a),{target:"wheel",delta:e,point:d,shiftKey:n,ctrlKey:o,metaKey:i,altKey:s,spaceKey:this.keys[" "]});return this.pointer=l,l});B(this,"keydown",e=>{var s,a;let{shiftKey:t,ctrlKey:n,metaKey:o,altKey:i}=e;return this.keys[e.key]=!0,{point:((s=this.pointer)==null?void 0:s.point)||[0,0],origin:((a=this.pointer)==null?void 0:a.origin)||[0,0],key:e.key,keys:Object.keys(this.keys),shiftKey:t,ctrlKey:n,metaKey:C.isDarwin()?o:n,altKey:i}});B(this,"keyup",e=>{var s,a;let{shiftKey:t,ctrlKey:n,metaKey:o,altKey:i}=e;return delete this.keys[e.key],{point:((s=this.pointer)==null?void 0:s.point)||[0,0],origin:((a=this.pointer)==null?void 0:a.origin)||[0,0],key:e.key,keys:Object.keys(this.keys),shiftKey:t,ctrlKey:n,metaKey:C.isDarwin()?o:n,altKey:i}})}pointerIsValid(e){if("pointerId"in e&&this.activePointer&&this.activePointer!==e.pointerId)return!1;if("touches"in e){let t=e.changedTouches[0];if(this.activePointer&&this.activePointer!==t.identifier)return!1}return!0}touchStart(e,t){let{shiftKey:n,ctrlKey:o,metaKey:i,altKey:s}=e,a=e.changedTouches[0];this.activePointer=a.identifier;let d={target:t,pointerId:a.identifier,origin:H.getPoint(a,this.bounds),delta:[0,0],point:H.getPoint(a,this.bounds),pressure:H.getPressure(a),shiftKey:n,ctrlKey:o,metaKey:C.isDarwin()?i:o,altKey:s,spaceKey:this.keys[" "]};return this.pointer=d,d}touchEnd(e,t){let{shiftKey:n,ctrlKey:o,metaKey:i,altKey:s}=e,a=e.changedTouches[0],d={target:t,pointerId:a.identifier,origin:H.getPoint(a,this.bounds),delta:[0,0],point:H.getPoint(a,this.bounds),pressure:H.getPressure(a),shiftKey:n,ctrlKey:o,metaKey:C.isDarwin()?i:o,altKey:s,spaceKey:this.keys[" "]};return this.pointer=d,this.activePointer=void 0,d}touchMove(e,t){let{shiftKey:n,ctrlKey:o,metaKey:i,altKey:s}=e,a=e.changedTouches[0],d=this.pointer,l=H.getPoint(a,this.bounds),c=(d==null?void 0:d.point)?de.Vec.sub(l,d.point):[0,0],m=$(g({origin:l},d),{target:t,pointerId:a.identifier,point:l,delta:c,pressure:H.getPressure(a),shiftKey:n,ctrlKey:o,metaKey:C.isDarwin()?i:o,altKey:s,spaceKey:this.keys[" "]});return this.pointer=m,m}pointerDown(e,t){let{shiftKey:n,ctrlKey:o,metaKey:i,altKey:s}=e,a=H.getPoint(e,this.bounds);this.activePointer=e.pointerId;let d={target:t,pointerId:e.pointerId,origin:a,point:a,delta:[0,0],pressure:H.getPressure(e),shiftKey:n,ctrlKey:o,metaKey:C.isDarwin()?i:o,altKey:s,spaceKey:this.keys[" "]};return this.pointer=d,d}pointerEnter(e,t){let{shiftKey:n,ctrlKey:o,metaKey:i,altKey:s}=e,a=H.getPoint(e,this.bounds),d={target:t,pointerId:e.pointerId,origin:a,delta:[0,0],point:a,pressure:H.getPressure(e),shiftKey:n,ctrlKey:o,metaKey:C.isDarwin()?i:o,altKey:s,spaceKey:this.keys[" "]};return this.pointer=d,d}pointerMove(e,t){let{shiftKey:n,ctrlKey:o,metaKey:i,altKey:s}=e,a=this.pointer,d=H.getPoint(e,this.bounds),l=(a==null?void 0:a.point)?de.Vec.sub(d,a.point):[0,0],c=$(g({origin:d},a),{target:t,pointerId:e.pointerId,point:d,delta:l,pressure:H.getPressure(e),shiftKey:n,ctrlKey:o,metaKey:C.isDarwin()?i:o,altKey:s,spaceKey:this.keys[" "]});return this.pointer=c,c}pointerUp(e,t){let{shiftKey:n,ctrlKey:o,metaKey:i,altKey:s}=e,a=this.pointer,d=H.getPoint(e,this.bounds),l=(a==null?void 0:a.point)?de.Vec.sub(d,a.point):[0,0];this.activePointer=void 0;let c=$(g({origin:d},a),{target:t,pointerId:e.pointerId,point:d,delta:l,pressure:H.getPressure(e),shiftKey:n,ctrlKey:o,metaKey:C.isDarwin()?i:o,altKey:s,spaceKey:this.keys[" "]});return this.pointer=c,this.pointerUpTime=performance.now(),c}isDoubleClick(){if(!this.pointer)return!1;let{origin:e,point:t}=this.pointer,n=performance.now()-this.pointerUpTime<Zn&&de.Vec.dist(e,t)<4;return n&&(this.activePointer=void 0),n}clear(){this.pointer=void 0}resetDoubleClick(){this.pointerUpTime=0}pinch(e,t){let{shiftKey:n,ctrlKey:o,metaKey:i,altKey:s}=this.keys,a=de.Vec.sub(t,e),d={pointerId:0,target:"pinch",origin:t,delta:a,point:de.Vec.sub(de.Vec.toFixed(e),[this.bounds.minX,this.bounds.minY]),pressure:.5,shiftKey:n,ctrlKey:o,metaKey:C.isDarwin()?i:o,altKey:s,spaceKey:this.keys[" "]};return this.pointer=d,d}reset(){this.pointerUpTime=0,this.pointer=void 0,this.keyboard=void 0,this.activePointer=void 0,this.keys={}}static getPoint(e,t){return[+e.clientX.toFixed(2)-t.minX,+e.clientY.toFixed(2)-t.minY]}static getPressure(e){return"pressure"in e&&+e.pressure.toFixed(2)||.5}static commandKey(){return C.isDarwin()?"\u2318":"Ctrl"}},qn=new H;var Qn=Object.freeze({});function Jn(k){var M=k,{id:r="tl",shapeUtils:e,page:t,pageState:n,assets:o=Qn,users:i,userId:s,theme:a,meta:d,snapLines:l,eraseLine:c,grid:m,containerRef:p,performanceMode:u,components:v,hideHandles:T=!1,hideIndicators:x=!1,hideCloneHandles:b=!1,hideBindingHandles:f=!1,hideResizeHandles:y=!1,hideRotateHandles:X=!1,hideBounds:U=!1,hideGrid:w=!0,showDashedBrush:P=!1,hideCursors:R}=M,S=V(M,["id","shapeUtils","page","pageState","assets","users","userId","theme","meta","snapLines","eraseLine","grid","containerRef","performanceMode","components","hideHandles","hideIndicators","hideCloneHandles","hideBindingHandles","hideResizeHandles","hideRotateHandles","hideBounds","hideGrid","showDashedBrush","hideCursors"]);ft(a,"#"+r);let O=W.useRef(null),te=W.useRef(n);W.useEffect(()=>{te.current=n},[n]);let[en,tn]=W.useState(()=>({callbacks:S,shapeUtils:e,rSelectionBounds:O,rPageState:te,bounds:{minX:0,minY:0,maxX:1/0,maxY:1/0,width:1/0,height:1/0},inputs:new H})),nn=W.useCallback(on=>{tn(rn=>$(g({},rn),{bounds:on}))},[]);return W.createElement(ve.Provider,{value:en},W.createElement(Qt,{id:r,page:t,pageState:n,assets:o,snapLines:l,eraseLine:c,grid:m,users:i,userId:s,externalContainerRef:p,hideBounds:U,hideIndicators:x,hideHandles:T,hideCloneHandles:b,hideBindingHandles:f,hideRotateHandle:X,hideResizeHandles:y,hideGrid:w,showDashedBrush:P,onBoundsChange:nn,performanceMode:u,components:v,meta:d,hideCursors:R}))}var eo=W.memo(Jn);var pe=L(require("react")),to=pe.memo(pe.forwardRef(function(i,o){var s=i,{children:e,className:t=""}=s,n=V(s,["children","className"]);return pe.createElement("div",g({ref:o,className:`tl-positioned-div ${t}`,draggable:!1},n),pe.createElement("div",{className:"tl-inner-div"},e))}));var Jt=require("@tldraw/intersect"),Ge=L(require("react"));var Fe=class{constructor(){B(this,"refMap",new Map);B(this,"boundsCache",new WeakMap);B(this,"showCloneHandles",!1);B(this,"hideBounds",!1);B(this,"isStateful",!1);B(this,"shouldRender",(e,t)=>!0);B(this,"getRef",e=>(this.refMap.has(e.id)||this.refMap.set(e.id,Ge.createRef()),this.refMap.get(e.id)));B(this,"hitTestBounds",(e,t)=>{let n=this.getBounds(e),o=I.getRotatedCorners(n,e.rotation);return o.every(i=>I.pointInBounds(i,t))||(0,Jt.intersectPolygonBounds)(o,t).length>0});B(this,"getRotatedBounds",e=>I.getBoundsFromPoints(I.getRotatedCorners(this.getBounds(e),e.rotation)))}};B(Fe,"Component",e=>Ge.forwardRef(e)),B(Fe,"Indicator",e=>e);module.exports=pn(no);
/**
* String.prototype.replaceAll() polyfill
* https://gomakethings.com/how-to-replace-a-section-of-a-string-with-another-one-with-vanilla-js/
* @author Chris Ferdinandi
* @license MIT
*/
//# sourceMappingURL=index.js.map