@tldraw/core
Version:
The tldraw core renderer and utilities.
321 lines • 63.7 kB
JavaScript
var Ft=Object.defineProperty,jt=Object.defineProperties;var _t=Object.getOwnPropertyDescriptors;var Ee=Object.getOwnPropertySymbols;var _e=Object.prototype.hasOwnProperty,Ze=Object.prototype.propertyIsEnumerable;var Ae=(r,e,t)=>e in r?Ft(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,T=(r,e)=>{for(var t in e||(e={}))_e.call(e,t)&&Ae(r,t,e[t]);if(Ee)for(var t of Ee(e))Ze.call(e,t)&&Ae(r,t,e[t]);return r},U=(r,e)=>jt(r,_t(e));var A=(r,e)=>{var t={};for(var n in r)_e.call(r,n)&&e.indexOf(n)<0&&(t[n]=r[n]);if(r!=null&&Ee)for(var n of Ee(r))e.indexOf(n)<0&&Ze.call(r,n)&&(t[n]=r[n]);return t};var E=(r,e,t)=>(Ae(r,typeof e!="symbol"?e+"":e,t),t);import*as W from"react";import*as D from"react";import*as O from"react";import*as De from"react";import*as Be from"react";var Te=Be.createContext({});function P(){return Be.useContext(Te)}import{Vec as Oe}from"@tldraw/vec";import{useGesture as Zt}from"@use-gesture/react";import*as F from"react";import{Vec as h}from"@tldraw/vec";var qe=(o=>(o.TransformSelected="transform_selected",o.TranslateSelected="translate_selected",o.TransformAll="transform_all",o.TranslateAll="translate_all",o))(qe||{}),Se=(o=>(o.Top="top_edge",o.Right="right_edge",o.Bottom="bottom_edge",o.Left="left_edge",o))(Se||{}),we=(o=>(o.TopLeft="top_left_corner",o.TopRight="top_right_corner",o.BottomRight="bottom_right_corner",o.BottomLeft="bottom_left_corner",o))(we||{}),Qe=(a=>(a.minX="minX",a.midX="midX",a.maxX="maxX",a.minY="minY",a.midY="midY",a.maxY="maxY",a))(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 Ce=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 u=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(l);return[parseInt(u[1],16),parseInt(u[2],16),parseInt(u[3],16)]}function i(l){return"#"+((1<<24)+(l[0]<<16)+(l[1]<<8)+l[2]).toString(16).slice(1)}let a=o(e)||[0,0,0],s=o(t)||[0,0,0],d=a.slice();for(let l=0;l<3;l++)d[l]=Math.round(d[l]+n*(s[l]-a[l]));return i(d)}static modulate(e,t,n,o=!1){let[i,a]=t,[s,d]=n,l=s+(e-i)/(a-i)*(d-s);return o?s<d?Math.max(Math.min(l,d),s):Math.max(Math.min(l,s),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=T({},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 a(){let s=t^t<<11;return t=n,n=o,o=i,i^=(i>>>19^s^s>>>8)>>>0,i/4294967296}for(let s=0;s<e.length+64;s++)t^=e.charCodeAt(s)|0,a();return a}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.rotWith(e,o,n),a=h.rotWith(h.add(e,[t[0],0]),o,n),s=h.rotWith(h.add(e,t),o,n),d=h.rotWith(h.add(e,[0,t[1]]),o,n);return[["top",[i,a]],["right",[a,s]],["bottom",[s,d]],["left",[d,i]]]}static circleFromThreePoints(e,t,n){let[o,i]=e,[a,s]=t,[d,l]=n,u=o*(s-l)-i*(a-d)+a*l-d*s,m=(o*o+i*i)*(l-s)+(a*a+s*s)*(i-l)+(d*d+l*l)*(s-i),c=(o*o+i*i)*(a-d)+(a*a+s*s)*(d-o)+(d*d+l*l)*(o-a),p=-m/(2*u),L=-c/(2*u);return[p,L,Math.hypot(p-o,L-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.angle(e,t),h.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+Ce)%Ce,i=(n-e+Ce)%Ce;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.angle(e,n);return(h.angle(e,t)-o+3*Math.PI)%(2*Math.PI)-Math.PI>0?0:1}static getLargeArcFlag(e,t,n){let o=h.angle(n,e),a=(h.angle(n,t)-o+3*Math.PI)%(2*Math.PI)-Math.PI;return Math.abs(a)>Math.PI/2?0:1}static getArcDashOffset(e,t,n,o,i){let a=k.getSweepFlag(e,n,o),s=k.getArcLength(e,t,n,o);return-(a<0?s:2*Math.PI*e[2]-s)/2+i}static getEllipseDashOffset(e,t){return-(2*Math.PI*e[2])/2+-t}static pointInCircle(e,t,n){return h.dist(e,t)<=n}static pointInEllipse(e,t,n,o,i=0){i=i||0;let a=Math.cos(i),s=Math.sin(i),d=h.sub(e,t),l=a*d[0]+s*d[1],u=s*d[0]-a*d[1];return l*l/(n*n)+u*u/(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 a=t[(i+1)%t.length];o[1]<=e[1]?a[1]>e[1]&&h.cross(o,a,e)>0&&(n+=1):a[1]<=e[1]&&h.cross(o,a,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.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,a=-1/0;if(e.length<2)n=0,o=0,i=1,a=1;else for(let[s,d]of e)n=Math.min(s,n),o=Math.min(d,o),i=Math.max(s,i),a=Math.max(d,a);return t!==0?k.getBoundsFromPoints(e.map(s=>h.rotWith(s,[(n+i)/2,(o+a)/2],t))):{minX:n,minY:o,maxX:i,maxY:a,width:Math.max(1,i-n),height:Math.max(1,a-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,a=Math.round(e.maxY/t)*t;return{minX:n,minY:o,maxX:i,maxY:a,width:Math.max(1,i-n),height:Math.max(1,a-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.rotWith([e.minX,e.minY],t,n),[a,s]=h.rotWith([e.maxX,e.maxY],t,n);return{minX:o,minY:i,maxX:a,maxY:s,width:e.width,height:e.height}}static getRotatedEllipseBounds(e,t,n,o,i=0){let a=Math.cos(i),s=Math.sin(i),d=Math.hypot(n*a,o*s),l=Math.hypot(n*s,o*a);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),a=Math.max(e.maxY,t.maxY),s=Math.abs(i-n),d=Math.abs(a-o);return{minX:n,minY:o,maxX:i,maxY:a,width:s,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.rotWith(o,n,t))}static getTransformedBoundingBox(e,t,n,o=0,i=!1){let[a,s]=[e.minX,e.minY],[d,l]=[e.maxX,e.maxY],[u,m]=[e.minX,e.minY],[c,p]=[e.maxX,e.maxY];if(t==="center")return{minX:u+n[0],minY:m+n[1],maxX:c+n[0],maxY:p+n[1],width:c-u,height:p-m,scaleX:1,scaleY:1};let[L,g]=h.rot(n,-o);switch(t){case"top_edge":case"top_left_corner":case"top_right_corner":{m+=g;break}case"bottom_edge":case"bottom_left_corner":case"bottom_right_corner":{p+=g;break}}switch(t){case"left_edge":case"top_left_corner":case"bottom_left_corner":{u+=L;break}case"right_edge":case"top_right_corner":case"bottom_right_corner":{c+=L;break}}let y=d-a,R=l-s,f=(c-u)/y,v=(p-m)/R,Y=f<0,X=v<0,B=Math.abs(c-u),x=Math.abs(p-m);if(i){let b=y/R,w=b<B/x,I=B*(v<0?1:-1)*(1/b),M=x*(f<0?1:-1)*b;switch(t){case"top_left_corner":{w?m=p+I:u=c+M;break}case"top_right_corner":{w?m=p+I:c=u-M;break}case"bottom_right_corner":{w?p=m-I:c=u-M;break}case"bottom_left_corner":{w?p=m-I:u=c+M;break}case"bottom_edge":case"top_edge":{let q=(u+c)/2,ie=x*b;u=q-ie/2,c=q+ie/2;break}case"left_edge":case"right_edge":{let q=(m+p)/2,ie=B/b;m=q-ie/2,p=q+ie/2;break}}}if(o%(Math.PI*2)!==0){let b=[0,0],w=h.med([a,s],[d,l]),I=h.med([u,m],[c,p]);switch(t){case"top_left_corner":{b=h.sub(h.rotWith([c,p],I,o),h.rotWith([d,l],w,o));break}case"top_right_corner":{b=h.sub(h.rotWith([u,p],I,o),h.rotWith([a,l],w,o));break}case"bottom_right_corner":{b=h.sub(h.rotWith([u,m],I,o),h.rotWith([a,s],w,o));break}case"bottom_left_corner":{b=h.sub(h.rotWith([c,m],I,o),h.rotWith([d,s],w,o));break}case"top_edge":{b=h.sub(h.rotWith(h.med([u,p],[c,p]),I,o),h.rotWith(h.med([a,l],[d,l]),w,o));break}case"left_edge":{b=h.sub(h.rotWith(h.med([c,m],[c,p]),I,o),h.rotWith(h.med([d,s],[d,l]),w,o));break}case"bottom_edge":{b=h.sub(h.rotWith(h.med([u,m],[c,m]),I,o),h.rotWith(h.med([a,s],[d,s]),w,o));break}case"right_edge":{b=h.sub(h.rotWith(h.med([u,m],[u,p]),I,o),h.rotWith(h.med([a,s],[a,l]),w,o));break}}[u,m]=h.sub([u,m],b),[c,p]=h.sub([c,p],b)}return c<u&&([c,u]=[u,c]),p<m&&([p,m]=[m,p]),{minX:u,minY:m,maxX:c,maxY:p,width:c-u,height:p-m,scaleX:(c-u)/(d-a||1)*(Y?-1:1),scaleY:(p-m)/(l-s||1)*(X?-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 a=(o?t.maxX-n.maxX:n.minX-t.minX)/t.width,s=(i?t.maxY-n.maxY:n.minY-t.minY)/t.height,d=n.width/t.width,l=n.height/t.height,u=e.minX+e.width*a,m=e.minY+e.height*s,c=e.width*d,p=e.height*l;return{minX:u,minY:m,maxX:u+c,maxY:m+p,width:c,height:p}}static getRotatedSize(e,t){let n=h.div(e,2),o=[[0,0],[e[0],0],e,[0,e[1]]].map(a=>h.rotWith(a,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 U(T({},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){let t=e.length;if(!t)return"";let n=e[0],o=`M${n[0].toFixed(3)},${n[1].toFixed(3)}Q`;for(let i=0,a=t-1;i<a;i++){let s=e[i],d=e[i+1];o+=`${s[0].toFixed(3)},${s[1].toFixed(3)} ${He(s[0],d[0]).toFixed(3)},${He(s[1],d[1]).toFixed(3)} `}return o+="Z",o}static getSvgPathFromStrokePoints(e){let t=e.length;if(!t)return"";let n=e[0].point,o=`M${n[0].toFixed(3)},${n[1].toFixed(3)}Q`;for(let i=0,a=t-1;i<a;i++){let s=e[i].point,d=e[i+1].point;o+=`${s[0].toFixed(3)},${s[1].toFixed(3)} ${He(s[0],d[0]).toFixed(3)},${He(s[1],d[1]).toFixed(3)} `}return o}static getPerfectDashProps(e,t,n,o=1,i=!0,a=2){let s,d,l;if(n.toLowerCase()==="dashed")s=t*a,l=1,d=i?(s/2).toString():"0";else if(n.toLowerCase()==="dotted")s=t/100,l=100,d="0";else return{strokeDasharray:"none",strokeDashoffset:"none"};let u=Math.floor(e/s/(2*l));u-=u%o,u=Math.max(u,4);let m=Math.max(s,(e-u*s)/(i?u:u-1));return{strokeDasharray:[s,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("")}},S=k;E(S,"getSnapPoints",(e,t,n)=>{let o=T({},e),i=[0,0],a=[],s={["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"],u=t.map(g=>{let y=d.flatMap((f,v)=>d.map((Y,X)=>{let B=o[f]-g[Y],x=Math.abs(B);return{f,t:Y,gap:B,distance:x,isCareful:v===0||v+X===3}})),R=l.flatMap((f,v)=>l.map((Y,X)=>{let B=o[f]-g[Y],x=Math.abs(B);return{f,t:Y,gap:B,distance:x,isCareful:v===0||v+X===3}}));return[g,y,R]}),m=1/0,c=1/0,p=1/0,L=1/0;return u.forEach(([g,y,R])=>{y.forEach(f=>{f.distance<n&&f.distance<p&&(p=f.distance,m=f.gap)}),R.forEach(f=>{f.distance<n&&f.distance<L&&(L=f.distance,c=f.gap)})}),u.forEach(([g,y,R])=>{m!==1/0&&y.forEach(f=>{Math.abs(f.gap-m)<2&&(s[f.f]=U(T({},s[f.f]),{isSnapped:!0,to:g[f.t],B:g,distance:f.distance}))}),c!==1/0&&R.forEach(f=>{Math.abs(f.gap-c)<2&&(s[f.f]=U(T({},s[f.f]),{isSnapped:!0,to:g[f.t],B:g,distance:f.distance}))})}),i[0]=m===1/0?0:m,i[1]=c===1/0?0:c,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(g=>{let y=s[g];if(!y.isSnapped)return;let{id:R,B:f}=y,v=o[R];a.push(R==="minX"?[[v,o.midY],[v,f.minY],[v,f.maxY]]:[[v,o.minY],[v,o.maxY],[v,f.minY],[v,f.maxY]])}),l.forEach(g=>{let y=s[g];if(!y.isSnapped)return;let{id:R,B:f}=y,v=o[R];a.push(R==="midY"?[[o.midX,v],[f.minX,v],[f.maxX,v]]:[[o.minX,v],[o.maxX,v],[f.minX,v],[f.maxX,v]])}),{offset:i,snapLines:a}}),E(S,"deepMerge",(e,t)=>{let n=T({},e),o=Object.entries(t);for(let[i,a]of o)n[i]=a===Object(a)&&!Array.isArray(a)?k.deepMerge(n[i],a):a;return n});function He(r,e){return(r+e)/2}var C=S;function et(r,e){let t=F.useRef(void 0),n=F.useRef(void 0),o=F.useRef([0,0]),{inputs:i,bounds:a,callbacks:s}=P();F.useEffect(()=>{let c=p=>p.preventDefault();return document.addEventListener("gesturestart",c),document.addEventListener("gesturechange",c),()=>{document.removeEventListener("gesturestart",c),document.removeEventListener("gesturechange",c)}},[]);let d=F.useCallback(({event:c})=>{var f,v,Y,X;if(c.preventDefault(),i.isPinching)return;let[p,L,g]=qt(c);if((c.altKey||c.ctrlKey||c.metaKey)&&c.buttons===0){let x=[...(v=(f=i.pointer)==null?void 0:f.point)!=null?v:[a.width/2,a.height/2],g*.618],b=i.pan(x,c);(Y=s.onZoom)==null||Y.call(s,U(T({},b),{delta:x}),c);return}let y=Oe.mul(c.shiftKey&&!C.isDarwin?[L,0]:[p,L],.5);if(Oe.isEqual(y,[0,0]))return;let R=i.pan(y,c);(X=s.onPan)==null||X.call(s,R,c)},[s,i,a]),l=F.useCallback(({origin:c,event:p})=>{var y;if(p instanceof WheelEvent)return;let L=e.current;if(!L||!(p.target===L||L.contains(p.target)))return;let g=i.pinch(c,c);i.isPinching=!0,(y=s.onPinchStart)==null||y.call(s,g,p),n.current=g.point,t.current=g.origin,o.current=[0,0]},[s,i,a]),u=F.useCallback(({origin:c,offset:p,event:L})=>{var f;if(L instanceof WheelEvent)return;let g=e.current;if(!(L.target===g||(g==null?void 0:g.contains(L.target)))||!t.current)return;let y=i.pinch(c,t.current),R=Oe.sub(y.delta,o.current);o.current=y.delta,(f=s.onPinch)==null||f.call(s,U(T({},y),{point:y.point,origin:t.current,delta:[...R,p[0]]}),L),n.current=c},[s,i,a]),m=F.useCallback(({origin:c,event:p})=>{var y;let L=e.current;if(!(p.target===L||(L==null?void 0:L.contains(p.target))))return;let g=i.pinch(c,c);i.isPinching=!1,(y=s.onPinchEnd)==null||y.call(s,g,p),n.current=void 0,t.current=void 0,o.current=[0,0]},[]);Zt({onWheel:d,onPinchStart:l,onPinch:u,onPinchEnd:m},{target:e,eventOptions:{passive:!1},pinch:{from:[r.current,0],scaleBounds:()=>({from:r.current,max:5,min:.1})}})}var Je=10;function qt(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),a=e;i>Je&&(a=Je*o),n=a}return[t,e,n]}import{useEffect as Qt}from"react";function tt(){let{callbacks:r}=P();Qt(()=>{function e(){var t;(t=r.onShapeBlur)==null||t.call(r)}return C.isMobileSafari()?(document.addEventListener("focusout",e),()=>document.removeEventListener("focusout",e)):()=>null},[r])}import*as nt from"react";function ot(){let{callbacks:r,inputs:e}=P();return nt.useMemo(()=>({onPointerDown:t=>{var o,i;if(t.dead||(t.dead=!0,!e.pointerIsValid(t))||t.button===2)return;t.currentTarget.setPointerCapture(t.pointerId);let n=e.pointerDown(t,"canvas");t.button===0&&((o=r.onPointCanvas)==null||o.call(r,n,t)),(i=r.onPointerDown)==null||i.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,a,s,d;if(t.dead||(t.dead=!0,e.activePointer=void 0,!e.pointerIsValid(t))||t.button===2)return;let n=e.pointerUp(t,"canvas"),o=e.isDoubleClick();t.currentTarget.hasPointerCapture(t.pointerId)&&((i=t.currentTarget)==null||i.releasePointerCapture(t.pointerId)),t.button===0&&(o&&!(n.altKey||n.metaKey)&&((a=r.onDoubleClickCanvas)==null||a.call(r,n,t)),(s=r.onReleaseCanvas)==null||s.call(r,n,t)),(d=r.onPointerUp)==null||d.call(r,n,t)},onDrop:r.onDrop,onDragOver:r.onDragOver}),[r,e])}import*as Ie from"react";function rt(r){let{rPageState:e,rSelectionBounds:t,callbacks:n,inputs:o}=Ie.useContext(Te);return Ie.useMemo(()=>({onPointerDown:i=>{var s,d,l,u,m,c,p;if(i.dead||(i.dead=!0,!o.pointerIsValid(i)))return;if(i.button===2){(s=n.onRightPointShape)==null||s.call(n,o.pointerDown(i,r),i);return}let a=o.pointerDown(i,r);if((d=i.currentTarget)==null||d.setPointerCapture(i.pointerId),t.current&&S.pointInBounds(a.point,t.current)&&!e.current.selectedIds.includes(r)){i.button===0&&((l=n.onPointBounds)==null||l.call(n,o.pointerDown(i,"bounds"),i),(u=n.onPointShape)==null||u.call(n,a,i)),(m=n.onPointerDown)==null||m.call(n,a,i);return}i.button===0&&((c=n.onPointShape)==null||c.call(n,a,i)),(p=n.onPointerDown)==null||p.call(n,a,i)},onPointerUp:i=>{var d,l,u,m;if(i.dead||(i.dead=!0,!o.pointerIsValid(i))||i.button===2)return;o.activePointer=void 0;let a=o.isDoubleClick(),s=o.pointerUp(i,r);i.pointerId&&i.currentTarget.hasPointerCapture(i.pointerId)&&((d=i.currentTarget)==null||d.releasePointerCapture(i.pointerId)),i.button===0&&(a&&!(s.altKey||s.metaKey)&&((l=n.onDoubleClickShape)==null||l.call(n,s,i)),(u=n.onReleaseShape)==null||u.call(n,s,i)),(m=n.onPointerUp)==null||m.call(n,s,i)},onPointerMove:i=>{var s,d;if(i.dead||(i.dead=!0,i.buttons===2||!o.pointerIsValid(i)||o.pointer&&i.pointerId!==o.pointer.pointerId))return;let a=o.pointerMove(i,r);i.buttons===1&&i.currentTarget.hasPointerCapture(i.pointerId)&&((s=n.onDragShape)==null||s.call(n,a,i)),(d=n.onPointerMove)==null||d.call(n,a,i)},onPointerEnter:i=>{var s;if(!o.pointerIsValid(i))return;let a=o.pointerEnter(i,r);(s=n.onHoverShape)==null||s.call(n,a,i)},onPointerLeave:i=>{var s;if(!o.pointerIsValid(i))return;let a=o.pointerEnter(i,r);(s=n.onUnhoverShape)==null||s.call(n,a,i)}}),[o,n,r])}import{Vec as Me}from"@tldraw/vec";import*as ge from"react";function it(r,e,t,n,o,i=!1,a=!1,s){let d={shape:r,asset:r.assetId?o[r.assetId]:void 0,meta:s,isChildOfSelected:a,isGhost:r.isGhost||i,isEditing:n.editingId===r.id,isBinding:n.bindingTargetId===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(l=>n.selectedIds.includes(l)))};e.push(d),r.children&&(d.children=[],r.children.map(l=>t[l]).filter(l=>t[l.id]).sort((l,u)=>l.childIndex-u.childIndex).forEach(l=>it(l,d.children,t,n,o,d.isGhost,d.isSelected||d.isChildOfSelected,s)))}function Jt(r,e){return S.boundsContain(e,r)||S.boundsCollide(e,r)}function st(r,e,t,n){let{callbacks:o,shapeUtils:i,bounds:a}=P(),s=ge.useRef(),d=ge.useRef(-1),l=ge.useRef(new Set),u=ge.useRef(new Set),{selectedIds:m,camera:c}=e,[p,L]=Me.sub(Me.div([0,0],c.zoom),c.point),[g,y]=Me.sub(Me.div([a.width,a.height],c.zoom),c.point),R={minX:p,minY:L,maxX:g,maxY:y,height:g-p,width:y-L},f=u.current,v=l.current;f.clear(),v.clear(),Object.values(r.shapes).filter(x=>i[x.type].isStateful||m.includes(x.id)||Jt(i[x.type].getBounds(x),R)).forEach(x=>{if(x.parentId===r.id){v.add(x.id),f.add(x);return}let b=r.shapes[x.parentId];if(b===void 0)throw Error(`A shape (${x.id}) has a parent (${x.parentId}) that does not exist!`);v.add(b.id),f.add(b)}),f.size!==d.current&&(s.current&&clearTimeout(s.current),s.current=requestAnimationFrame(()=>{var x;(x=o.onRenderCountChange)==null||x.call(o,Array.from(v.values()))}),d.current=f.size);let X=e.bindingId?r.bindings[e.bindingId].toId:void 0,B=[];return f.forEach(x=>{if(x===void 0)throw Error("Rendered shapes included a missing shape");it(x,B,r.shapes,U(T({},e),{bindingTargetId:X}),t,x.isGhost,!1,n)}),B.sort((x,b)=>x.shape.childIndex-b.shape.childIndex),B}import*as Le from"react";var Ve=new Map;function en(r,e){return Object.keys(e).reduce((t,n)=>{let o=e[n];return o?t+`${`--${r}-${n}`}: ${o};
`:t},"")}function tn(r,e,t=":root"){Le.useLayoutEffect(()=>{let n=document.createElement("style"),o=en(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 nn(r,e){Le.useLayoutEffect(()=>{if(Ve.get(r))return()=>{};let t=document.createElement("style");return t.innerHTML=e,t.setAttribute("id",r),document.head.appendChild(t),Ve.set(r,t),()=>{t&&document.head.contains(t)&&(document.head.removeChild(t),Ve.delete(r))}},[r,e])}var on=(r,...e)=>r.reduce((t,n,o)=>t+n+(o<e.length?e[o]:""),""),rn={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)"},sn=on`
.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 at(r,e){let t=Le.useMemo(()=>T(T({},rn),r),[r]);tn("tl",t,e),nn("tl-canvas",sn)}import*as ue from"react";function j(r){let{callbacks:e,inputs:t}=P(),n=ue.useCallback(d=>{var u,m,c;if(d.dead||(d.dead=!0,!t.pointerIsValid(d)))return;let l=t.pointerDown(d,r);if(d.button===2){(u=e.onRightPointBoundsHandle)==null||u.call(e,l,d);return}d.button===0&&((m=e.onPointBoundsHandle)==null||m.call(e,l,d)),(c=e.onPointerDown)==null||c.call(e,l,d)},[t,e,r]),o=ue.useCallback(d=>{var m,c,p;if(d.dead||(d.dead=!0,d.button===2||!t.pointerIsValid(d)))return;let l=t.pointerUp(d,r),u=t.isDoubleClick();d.button===0&&(u&&!(l.altKey||l.metaKey)&&((m=e.onDoubleClickBoundsHandle)==null||m.call(e,l,d)),(c=e.onReleaseBoundsHandle)==null||c.call(e,l,d)),(p=e.onPointerUp)==null||p.call(e,l,d)},[t,e,r]),i=ue.useCallback(d=>{var u,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)&&((u=e.onDragBoundsHandle)==null||u.call(e,l,d)),(m=e.onPointerMove)==null||m.call(e,l,d)},[t,e,r]),a=ue.useCallback(d=>{var l;!t.pointerIsValid(d)||(l=e.onHoverBoundsHandle)==null||l.call(e,t.pointerEnter(d,r),d)},[t,e,r]),s=ue.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:a,onPointerMove:i,onPointerLeave:s}}import*as ye from"react";function dt(r,e,t){let n=ye.useRef(),o=ye.useRef();ye.useLayoutEffect(()=>{let{zoom:i,point:a}=t.camera,s=i!==n.current,d=a!==o.current;if(n.current=i,o.current=a,s||d){let l=r.current;if(e&&"current"in e){let u=e.current;s&&u&&u.style.setProperty("--tl-zoom",i.toString()),l&&l.style.setProperty("transform",`scale(${i}) translateX(${a[0]}px) translateY(${a[1]}px)`)}}},[t.camera.zoom,t.camera.point])}import*as ct from"react";function lt(r,e){return[(r[0]+e.point[0])*e.zoom,(r[1]+e.point[1])*e.zoom]}function ze(r,e){return r[e.type]}function ut(r,e,t){let{rSelectionBounds:n}=P(),{selectedIds:o}=e,i=ct.useRef(),a,s=0,d=!1,l=!1;if(o.length===1){let m=o[0],c=r.shapes[m];if(!c)throw Error(`selectedIds is set to the id of a shape that doesn't exist: ${m}`);s=c.rotation||0,d=c.isLocked||!1;let p=ze(t,c);a=p.hideBounds?void 0:p.getBounds(c)}else if(o.length>1){let m=o.map(c=>r.shapes[c]);s=0,d=m.every(c=>c.isLocked),a=m.reduce((c,p,L)=>L===0?ze(t,p).getRotatedBounds(p):C.getExpandedBounds(c,ze(t,p).getRotatedBounds(p)),{})}if(a){let[m,c]=lt([a.minX,a.minY],e.camera),[p,L]=lt([a.maxX,a.maxY],e.camera);l=!!Object.values(r.bindings).find(g=>o.includes(g.toId)||o.includes(g.fromId)),n.current={minX:m,minY:c,maxX:p,maxY:L,width:p-m,height:L-c}}else n.current=null;let u=i.current;return!u||!a?i.current=a:a&&u.minX===a.minX&&u.minY===a.minY&&u.maxX===a.maxX&&u.maxY===a.maxY&&(a=i.current),{bounds:a,rotation:s,isLocked:d,isLinked:l}}import*as mt from"react";function pt(r){let{inputs:e,callbacks:t}=P();return mt.useMemo(()=>({onPointerDown:n=>{var i,a,s;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&&((a=t.onPointHandle)==null||a.call(t,o,n)),(s=t.onPointerDown)==null||s.call(t,o,n)},onPointerUp:n=>{var a,s,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)&&((a=n.currentTarget)==null||a.releasePointerCapture(n.pointerId),n.button===0&&(o&&!(i.altKey||i.metaKey)&&((s=t.onDoubleClickHandle)==null||s.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,a;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)),(a=t.onPointerMove)==null||a.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])}import*as ht from"react";function ft(r){let{bounds:e}=P();ht.useEffect(()=>{let t=i=>{i.preventDefault()},n=i=>{let a=i.touches[0].pageX,s=i.touches[0].radiusX||0;(a-s<10||a+s>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])}import*as Tt from"react";function gt(){let{callbacks:r,inputs:e}=P();return Tt.useMemo(()=>({onPointerDown:t=>{var o,i,a,s;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&&((a=r.onPointBounds)==null||a.call(r,n,t)),(s=r.onPointerDown)==null||s.call(r,n,t)},onPointerUp:t=>{var i,a,s,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)&&((a=r.onDoubleClickBounds)==null||a.call(r,o,t)),(s=r.onReleaseBounds)==null||s.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])}import*as ke from"react";function Ke(r,e=0){let t=ke.useRef(null);return ke.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}import*as Lt from"react";function yt(){let{inputs:r,callbacks:e}=P();Lt.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])}import*as vt from"react";function xt(r,e){vt.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 an(s){var d=s,{id:r,bounds:e,rotation:t=0,isGhost:n=!1,isSelected:o=!1,children:i}=d,a=A(d,["id","bounds","rotation","isGhost","isSelected","children"]);let l=Ke(e,t);return De.createElement("div",T({id:r,ref:l,className:`tl-positioned${n?" tl-ghost":""}${o?" tl-positioned-selected":""}`,"aria-label":"container","data-testid":"container"},a),i)}var _=De.memo(an);function dn({brush:r,zoom:e,dashed:t}){return O.createElement(_,{bounds:r,rotation:0},O.createElement(J,null,O.createElement("rect",{className:"tl-brush"+(t?" dashed":""),opacity:1,x:0,y:0,width:r.width,height:r.height,"aria-label":"brush"}),t&&O.createElement("g",{className:"tl-dashed-brush-line"},O.createElement(Ye,{x1:0,y1:0,x2:r.width,y2:0,zoom:e}),O.createElement(Ye,{x1:r.width,y1:0,x2:r.width,y2:r.height,zoom:e}),O.createElement(Ye,{x1:0,y1:r.height,x2:r.width,y2:r.height,zoom:e}),O.createElement(Ye,{x1:0,y1:0,x2:0,y2:r.height,zoom:e}))))}var bt=O.memo(dn);function Ye({x1:r,y1:e,x2:t,y2:n,zoom:o}){let i=C.getPerfectDashProps(Math.hypot(t-r,n-e),1/o,"dashed",1,!0,3);return O.createElement("line",{x1:r,y1:e,x2:t,y2:n,strokeWidth:1/o,strokeDasharray:i.strokeDasharray,strokeDashoffset:i.strokeDashoffset})}import ln from"perfect-freehand";import*as Xe from"react";function cn({points:r,zoom:e}){if(r.length===0)return null;let t=C.getSvgPathFromStroke(ln(r,{size:16/e,start:{taper:!0}}));return Xe.createElement("path",{d:t,className:"tl-erase-line"})}var Pt=Xe.memo(cn);import*as me from"react";var Rt=[[-1,.15,64],[.05,.375,16],[.15,1,4],[.7,2.5,1]];function Et({grid:r,camera:e}){return me.createElement("svg",{className:"tl-grid",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},me.createElement("defs",null,Rt.map(([t,n,o],i)=>{let a=o*r*e.zoom,s=e.point[0]*e.zoom,d=e.point[1]*e.zoom,l=s>0?s%a:a+s%a,u=d>0?d%a:a+d%a,m=e.zoom<n?C.modulate(e.zoom,[t,n],[0,1]):1;return me.createElement("pattern",{key:`grid-pattern-${i}`,id:`grid-${i}`,width:a,height:a,patternUnits:"userSpaceOnUse"},me.createElement("circle",{className:"tl-grid-dot",cx:l,cy:u,r:1,opacity:m}))})),Rt.map((t,n)=>me.createElement("rect",{key:`grid-rect-${n}`,width:"100%",height:"100%",fill:`url(#grid-${n})`})))}import*as ee from"react";function un({camera:{zoom:r,point:e},children:t}){let n=2.5/r;return ee.createElement("svg",{className:"tl-overlay"},ee.createElement("defs",null,ee.createElement("g",{id:"tl-snap-point"},ee.createElement("path",{className:"tl-snap-point",d:`M ${-n},${-n} L ${n},${n} M ${-n},${n} L ${n},${-n}`}))),ee.createElement("g",{transform:`scale(${r}) translate(${e})`},t))}var Bt=ee.memo(un);import*as z from"react";import*as K from"react";import*as se from"react";var J=se.memo(se.forwardRef(function(a,i){var s=a,{id:e,className:t="",children:n}=s,o=A(s,["id","className","children"]);return se.createElement("svg",T({ref:i,className:`tl-positioned-svg ${t}`},o),se.createElement("g",{id:e,className:"tl-centered-g"},n))}));import*as Ue from"react";function mn({bounds:r,isLocked:e,isHidden:t}){return Ue.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 St=Ue.memo(mn);import*as N from"react";import*as Z from"react";var pn={right:0,bottomRight:45,bottom:90,bottomLeft:135,left:180,topLeft:225,top:270,topRight:315};function hn({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],a={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:s,inputs:d}=P(),l=Z.useCallback(u=>{var c;u.stopPropagation();let m=d.pointerDown(u,e);(c=s.onShapeClone)==null||c.call(s,m,u)},[s.onShapeClone]);return Z.createElement("g",{className:"tl-clone-target",transform:`translate(${i}, ${a})`,"aria-label":"clone button"},Z.createElement("rect",{className:"tl-transparent",width:t*2,height:t*2}),Z.createElement("g",{className:"tl-clone-button-target",onPointerDown:l,transform:`translate(${t}, ${t}) rotate(${pn[e]})`},Z.createElement("circle",{className:"tl-transparent ",r:t}),Z.createElement("path",{className:"tl-clone-button",d:`M -${n/2},-${n/2} L ${n/2},0 -${n/2},${n/2} Z`,strokeLinejoin:"round"})))}var Q=Z.memo(hn);function fn({targetSize:r,size:e,bounds:t}){return N.createElement(N.Fragment,null,N.createElement(Q,{targetSize:r,size:e,bounds:t,side:"top"}),N.createElement(Q,{targetSize:r,size:e,bounds:t,side:"right"}),N.createElement(Q,{targetSize:r,size:e,bounds:t,side:"bottom"}),N.createElement(Q,{targetSize:r,size:e,bounds:t,side:"left"}),N.createElement(Q,{targetSize:r,size:e,bounds:t,side:"topLeft"}),N.createElement(Q,{targetSize:r,size:e,bounds:t,side:"topRight"}),N.createElement(Q,{targetSize:r,size:e,bounds:t,side:"bottomLeft"}),N.createElement(Q,{targetSize:r,size:e,bounds:t,side:"bottomRight"}))}var wt=N.memo(fn);import*as pe from"react";var Tn={["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 gn({size:r,targetSize:e,isHidden:t,corner:n,bounds:o}){let i=j(n),a=n==="top_left_corner"||n==="top_right_corner",s=n==="top_left_corner"||n==="bottom_left_corner";return pe.createElement("g",{opacity:t?0:1},pe.createElement("rect",T({className:"tl-transparent "+(t?"":Tn[n]),"aria-label":"corner transparent",x:(s?-1:o.width+1)-e,y:(a?-1:o.height+1)-e,width:e*2,height:e*2,pointerEvents:t?"none":"all"},i)),pe.createElement("rect",{className:"tl-corner-handle","aria-label":"corner handle",x:(s?-1:o.width+1)-r/2,y:(a?-1:o.height+1)-r/2,width:r,height:r,pointerEvents:"none"}))}var ve=pe.memo(gn);import*as $e from"react";var Ln={["top_edge"]:"tl-cursor-ns",["right_edge"]:"tl-cursor-ew",["bottom_edge"]:"tl-cursor-ns",["left_edge"]:"tl-cursor-ew"};function yn({size:r,isHidden:e,bounds:t,edge:n}){let o=j(n),i=n==="top_edge"||n==="bottom_edge",a=n==="right_edge"||n==="bottom_edge",{height:s,width:d}=t;return $e.createElement("rect",T({pointerEvents:e?"none":"all",className:"tl-transparent tl-edge-handle "+(e?"":Ln[n]),"aria-label":`${n} handle`,opacity:e?0:1,x:i?r/2:(a?d+1:-1)-r/2,y:i?(a?s+1:-1)-r/2:r/2,width:i?Math.max(0,d+1-r):r,height:i?r:Math.max(0,s+1-r)},o))}var xe=$e.memo(yn);import*as V from"react";function vn({size:r,bounds:e,isHidden:t}){let n=j("left"),o=j("center"),i=j("right");return V.createElement("g",{cursor:"grab",transform:`translate(${e.width/2-r*4}, ${e.height+r*2})`,"aria-label":"link handle"},V.createElement("g",{className:"tl-transparent",pointerEvents:t?"none":"all"},V.createElement("rect",T({x:0,y:0,width:r*2,height:r*2},n)),V.createElement("rect",T({x:r*3,y:0,width:r*2,height:r*2},o)),V.createElement("rect",T({x:r*6,y:0,width:r*2,height:r*2},i))),V.createElement("g",{className:"tl-rotate-handle",transform:`translate(${r/2}, ${r/2})`,"aria-label":"link rotate handle"},V.createElement("path",{d:`M 0,${r/2} L ${r},${r} ${r},0 Z`,pointerEvents:"none",opacity:t?0:1}),V.createElement("path",{transform:`translate(${r*3}, 0)`,d:`M 0,0 L ${r},0 ${r/2},${r} Z`,pointerEvents:"none",opacity:t?0:1}),V.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 Ct=V.memo(vn);import*as he from"react";function xn({bounds:r,targetSize:e,size:t,isHidden:n}){let o=j("rotate");return he.createElement("g",{cursor:"grab",opacity:n?0:1},he.createElement("circle",T({className:"tl-transparent","aria-label":"rotate handle transparent",cx:r.width/2,cy:t*-2,r:e,pointerEvents:n?"none":"all"},o)),he.createElement("circle",{className:"tl-rotate-handle","aria-label":"rotate handle",cx:r.width/2,cy:t*-2,r:t/2,pointerEvents:"none"}))}var Ht=he.memo(xn);var bn=function({zoom:e,bounds:t,viewportWidth:n,rotation:o,isHidden:i,isLocked:a,hideCloneHandles:s,hideResizeHandles:d,hideRotateHandle:l,hideBindingHandles:u}){let m=(n<768?16:8)/e,c=8/e,p=Math.min(t.width,t.height)*e,L=!l&&!i&&!a&&p>32,g=!i&&!a&&p>24,y=!i&&!a&&p>20,R=!s&&p>24;return K.createElement(_,{bounds:t,rotation:o},K.createElement(J,null,K.createElement(St,{bounds:t,isLocked:a,isHidden:i}),!d&&!a?K.createElement(K.Fragment,null,K.createElement(xe,{targetSize:m,size:c,bounds:t,edge:"top_edge",isHidden:!g}),K.createElement(xe,{targetSize:m,size:c,bounds:t,edge:"right_edge",isHidden:!g}),K.createElement(xe,{targetSize:m,size:c,bounds:t,edge:"bottom_edge",isHidden:!g}),K.createElement(xe,{targetSize:m,size:c,bounds:t,edge:"left_edge",isHidden:!g}),K.createElement(ve,{targetSize:m,size:c,bounds:t,isHidden:i||!y,corner:"top_left_corner"}),K.createElement(ve,{targetSize:m,size:c,bounds:t,isHidden:i||!y,corner:"top_right_corner"}),K.createElement(ve,{targetSize:m,size:c,bounds:t,isHidden:i||!y,corner:"bottom_right_corner"}),K.createElement(ve,{targetSize:m,size:c,bounds:t,isHidden:i||!y,corner:"bottom_left_corner"})):null,L&&K.createElement(Ht,{targetSize:m,size:c,bounds:t,isHidden:!g}),R&&K.createElement(wt,{bounds:t,targetSize:m,size:c}),!u&&K.createElement(Ct,{targetSize:m,size:c,bounds:t,isHidden:!g})))},It=K.memo(bn);import*as fe from"react";function Pn({bounds:r,rotation:e,isHidden:t}){let n=gt();return fe.createElement(_,{bounds:r,rotation:e},fe.createElement(J,null,fe.createElement("rect",T({className:"tl-bounds-bg","aria-label":"bounds bg",width:r.width,height:r.height,opacity:t?0:1},n))))}var Mt=fe.memo(Pn);import{Vec as Ge}from"@tldraw/vec";import*as ae from"react";import*as te from"react";function Rn({id:r,point:e}){let t=pt(r);return te.createElement(_,{bounds:C.translateBounds({minX:0,minY:0,maxX:0,maxY:0,width:0,height:0},e)},te.createElement(J,null,te.createElement("g",T({className:"tl-handle","aria-label":"handle"},t),te.createElement("circle",{className:"tl-handle-bg",pointerEvents:"all"}),te.createElement("circle",{className:"tl-counter-scaled tl-handle",pointerEvents:"none",r:4}))))}var kt=te.memo(Rn);function En({shape:r,zoom:e}){if(r.handles===void 0)return null;let t=null,n=Object.values(r.handles).reduce((o,i)=>{let a=Ge.add(i.point,r.point);return(!t||Ge.dist(a,t)*e>=32)&&(o.push(i),t=a),o},[]);return n.length===1?null:ae.createElement(ae.Fragment,null,n.map(o=>ae.createElement(kt,{key:r.id+"_"+o.id,id:o.id,point:Ge.add(o.point,r.point)})))}var Kt=ae.memo(En);import*as ne from"react";import*as be from"react";import*as Ne from"react";function Bn(r){let e=r.utils.getRef(r.shape);return Ne.createElement(r.utils.Component,T({ref:e},r))}var Dt=Ne.memo(Bn,(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 Sn(o){var i=o,{shape:r,utils:e,meta:t}=i,n=A(i,["shape","utils","meta"]);let{callbacks:a}=P(),s=e.getBounds(r),d=rt(r.id);return be.createElement(_,{id:r.id,bounds:s,rotation:r.rotation,"data-shape":r.type,isGhost:n.isGhost,isSelected:n.isSelected},be.createElement(Dt,T({shape:r,utils:e,meta:t,events:d,bounds:s,onShapeChange:a.onShapeChange,onShapeBlur:a.onShapeBlur},n)))}var Yt=be.memo(Sn);function wn(i){var a=i,{shape:r,utils:e,meta:t,children:n}=a,o=A(a,["shape","utils","meta","children"]);return ne.createElement(ne.Fragment,null,ne.createElement(Yt,T({shape:r,utils:e[r.type],meta:t},o)),n&&n.map(s=>ne.createElement(Fe,T({key:s.shape.id,utils:e},s))))}var Fe=ne.memo(wn);import*as de from"react";function Cn({isHovered:r=!1,isSelected:e=!1,isEditing:t=!1,shape:n,user:o,meta:i}){let{shapeUtils:a}=P(),s=a[n.type],d=s.getBounds(n),l=Ke(d,n.rotation);return de.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(" ")},de.createElement("svg",{width:"100%",height:"100%"},de.createElement("g",{className:"tl-centered-g",stroke:o==null?void 0:o.color},de.createElement(s.Indicator,{shape:n,meta:i,user:o,bounds:d,isSelected:e,isHovered:r}))))}var Pe=de.memo(Cn);function Hn({page:r,pageState:e,assets:t,hideBounds:n,hideHandles:o,hideIndicators:i,hideBindingHandles:a,hideCloneHandles:s,hideRotateHandle:d,hideResizeHandles:l,meta:u}){let{bounds:m,shapeUtils:c}=P(),p=st(r,e,t,u),{bounds:L,isLinked:g,isLocked:y,rotation:R}=ut(r,e,c),{selectedIds:f,hoveredId:v,editingId:Y,camera:{zoom:X}}=e,B=i,x=!0,b=!1,w,I=f.map(M=>r.shapes[M]);if(I.length===1){let M=I[0];b=Y===M.id,b&&(B=!0);let q=c[M.type];x=s||!q.showCloneHandles,M.handles!==void 0&&!b&&(w=M)}return z.createElement(z.Fragment,null,L&&z.createElement(Mt,{bounds:L,rotation:R,isHidden:n}),p.map(M=>z.createElement(Fe,T({key:M.shape.id,utils:c},M))),!B&&I.map(M=>z.createElement(Pe,{key:"selected_"+M.id,shape:M,meta:u,isSelected:!0,isEditing:b})),!B&&v&&v!==Y&&z.createElement(Pe,{key:"hovered_"+v,shape:r.shapes[v],meta:u,isHovered:!0}),L&&z.createElement(It,{zoom:X,bounds:L,viewportWidth:m.width,isLocked:y,rotation:R,isHidden:n,hideRotateHandle:d,hideResizeHandles:l,hideBindingHandles:a||!g,hideCloneHandles:x}),!o&&w&&z.createElement(Kt,{shape:w,zoom:X}))}var Xt=z.memo(Hn);import*as G from"react";function In({snapLines:r}){return G.createElement(G.Fragment,null,r.map((e,t)=>G.createElement(kn,{key:t,snapLine:e})))}function Mn({snapLine:r}){let e=C.getBoundsFromPoints(r);return G.createElement(G.Fragment,null,G.createElement("line",{className:"tl-snap-line",x1:e.minX,y1:e.minY,x2:e.maxX,y2:e.maxY}),r.map(([t,n],o)=>G.createElement("use",{key:o,href:"#tl-snap-point",x:t,y:n})))}var kn=G.memo(Mn),Ut=G.memo(In);import*as Re from"react";import*as $ from"react";function $t({user:r}){let e=$.useRef(null);return $.useLayoutEffect(()=>{e.current&&(e.current.style.transform=`translate(${r.point[0]}px, ${r.point[1]}px)`)},[r.point]),$.createElement("svg",{ref:e,className:`tl-absolute tl-user tl-counter-scaled ${r.session?"":"tl-animated"}`,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 35 35",fill:"none",fillRule:"evenodd"},$.createElement("g",{fill:"rgba(0,0,0,.2)",transform:"translate(1,1)"},$.createElement("path",{d:"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z"}),$.createElement("path",{d:"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z"})),$.createElement("g",{fill:"white"},$.createElement("path",{d:"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z"}),$.createElement("path",{d:"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z"})),$.createElement("g",{fill:r.color},$.createElement("path",{d:"m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z"}),$.createElement("path",{d:"m13 10.814v11.188l2.969-2.866.428-.139h4.768z"})))}function Nt({userId:r,users:e}){return Re.createElement(Re.Fragment,null,Object.values(e).filter(t=>t&&t.id!==r).map(t=>Re.createElement($t,{key:t.id,user:t})))}import*as oe from"react";function Wt({userId:r,users:e,meta:t,page:n}){let{shapeUtils:o}=P();return oe.createElement(oe.Fragment,null,Object.values(e).filter(Boolean).filter(i=>i.id!==r&&i.selectedIds.length>0).map(i=>{let a=i.selectedIds.map(d=>n.shapes[d]).filter(Boolean);if(a.length===0)return null;let s=C.getCommonBounds(a.map(d=>o[d.type].getBounds(d)));return oe.createElement(oe.Fragment,{key:i.id+"_shapes"},oe.createElement("div",{className:"tl-absolute tl-user-indicator-bounds",style:{backgroundColor:i.color+"0d",borderColor:i.color+"78",transform:`translate(${s.minX}px, ${s.minY}px)`,width:s.width,height:s.height,pointerEvents:"none"}}),a.map(d=>oe.createElement(Pe,{key:`${i.id}_${d.id}_indicator`,shape:d,user:i,meta:t,isHovered:!0})))}))}import*as re from"react";var Kn=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 At(r,e){let{inputs:t,callbacks:n}=P(),o=re.useRef(!1),i=re.useCallback(()=>{var a,s;if(o.current){let d=(a=r.current)==null?void 0:a.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),(s=n.onBoundsChange)==null||s.call(n,l)}}else o.current=!0},[r,t,n.onBoundsChange]);re.useEffect(()=>{let a=r.current?Kn(r.current):document,s=S.debounce(i,100);return a.addEventListener("scroll",s),window.addEventListener("resize",s),()=>{a.removeEventListener("scroll",s),window.removeEventListener("resize",s)}},[]),re.useEffect(()=>{let a=new ResizeObserver(s=>{t.isPinching||s[0].contentRect&&i()});return r.current&&a.observe(r.current),()=>{a.disconnect()}},[r,t]),re.useEffect(()=>{i()},[r])}function Dn({id:r,page:e,pageState:t,assets:n,snapLines:o,eraseLine:i,grid:a,users:s,userId:d,meta:l,performanceMode:u,externalContainerRef:m,showDashedBrush:c,hideHandles:p,hideBounds:L,hideIndicators:g,hideBindingHandles:y,hideCloneHandles:R,hideResizeHandles:f,hideRotateHandle:v,hideGrid:Y,onBoundsChange:X}){let B=D.useRef(null),x=D.useRef(t.camera.zoom);x.current=t.camera.zoom,et(x,m||B),At(B,X),tt(),ft(B);let b=D.useRef(null),w=D.useRef(null);dt(w,b,t),xt(u,b),yt();let I=ot();return D.createElement("div",{id:r,className:"tl-container",ref:b},D.createElement("div",T({id:"canvas",className:"tl-absolute tl-canvas",ref:B},I),!Y&&a&&D.createElement(Et,{grid:a,camera:t.camera}),D.createElement("div",{ref:w,className:"tl-absolute tl-layer","data-testid":"layer"},D.createElement(Xt,{page:e,pageState:t,assets:n,hideBounds:L,hideIndicators:g,hideHandles:p,hideBindingHandles:y,hideCloneHandles:R,hideResizeHandles:f,hideRotateHandle:v,meta:l}),s&&d&&D.createElement(Wt,{userId:d,users:s,page:e,meta:l}),t.brush&&D.createElement(bt,{brush:t.brush,dashed:c,zoom:t.camera.zoom}),s&&D.createElement(Nt,{userId:d,users:s})),D.createElement(Bt,{camera:t.camera},i&&D.createElement(Pt,{points:i,zoom:t.camera.zoom}),o&&D.createElement(Ut,{snapLines:o}))))}var Ot=D.memo(Dn);import{Vec as le}from"@tldraw/vec";var Yn=250,H=class{constructor(){E(this,"pointer");E(this,"keyboard");E(this,"keys",{});E(this,"isPinching",!1);E(this,"bounds",{minX:0,maxX:640,minY:0,maxY:480,width:640,height:480});E(this,"pointerUpTime",0);E(this,"activePointer");E(this,"panStart",e=>{var s,d;let{shiftKey:t,ctrlKey:n,metaKey:o,altKey:i}=e,a={target:"wheel",pointerId:((s=this.pointer)==null?void 0:s.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=a,a});E(this,"pan",(e,t)=>{if(!this.pointer||this.pointer.target!=="wheel")return this.panStart(t);let{shiftKey:n,ctrlKey:o,metaKey:i,altKey:a}=t,s=this.pointer,d=H.getPoint(t,this.bounds),l=U(T({},s),{target:"wheel",delta:e,point:d,shiftKey:n,ctrlKey:o,metaKey:i,altKey:a,spaceKey:this.keys[" "]});return this.pointer=l,l});E(this,"keydown",e=>{var a,s;let{shiftKey:t,ctrlKey:n,metaKey:o,altKey:i}=e;return this.keys[e.key]=!0,{point:((a=this.pointer)==null?void 0:a.point)||[0,0],origin:((s=this.pointer)==null?void 0:s.origin)||[0,0],key:e.key,keys:Object.keys(this.keys),shiftKey:t,ctrlKey:n,metaKey:S.isDarwin()?o:n,altKey:i}});E(this,"keyup",e=>{var a,s;let{shiftKey:t,ctrlKey:n,metaKey:o,altKey:i}=e;return delete this.keys[e.key],{point:((a=this.pointer)==null?void 0:a.point)||[0,0],origin:((s=this.pointer)==null?void 0:s.origin)||[0,0],key:e.key,keys:Object.keys(this.keys),shiftKey:t,ctrlKey:n,metaKey:S.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:a}=e,s=e.changedTouches[0];this.activePointer=s.identifier;let d={target:t,pointerId:s.identifier,origin:H.getPoint(s,this.bounds),delta:[0,0],point:H.getPoint(s,this.bounds),pressure:H.getPressure(s),shiftKey:n,ctrlKey:o,metaKey:S.isDarwin()?i:o,altKey:a,spaceKey:this.keys[" "]};return this.pointer=d,d}touchEnd(e,t){let{shiftKey:n,ctrlKey:o,metaKey:i,altKey:a}=e,s=e.changedTouches[0],d={target:t,pointerId:s.identifier,origin:H.getPoint(s,this.bounds),delta:[0,0],point:H.getPoint(s,this.bounds),pressure:H.getPressure(s),shiftKey:n,ctrlKey:o,metaKey:S.isDarwin()?i:o,altKey:a,spaceKey:this.keys[" "]};return this.pointer=d,this.activePointer=void 0,d}touchMove(e,t){let{shiftKey:n,ctrlKey:o,metaKey:i,altKey:a}=e,s=e.changedTouches[0],d=this.pointer,l=H.getPoint(s,this.bounds),u=(d==null?void 0:d.point)?le.sub(l,d.point):[0,0],m=U(T({origin:l},d),{target:t,pointerId:s.identifier,point:l,delta:u,pressure:H.getPressure(s),shiftKey:n,ctrlKey:o,metaKey:S.isDarwin()?i:o,altKey:a,spaceKey:this.keys[" "]});return this.pointer=m,m}pointerDown(e,t){let{shiftKey:n,ctrlKey:o,metaKey:i,altKey:a}=e,s=H.getPoint(e,this.bounds);this.activePointer=e.pointerId;let d={target:t,pointerId:e.pointerId,origin:s,point:s,delta:[0,0],pressure:H.getPressure(e),shiftKey:n,ctrlKey:o,metaKey:S.isDarwin()?i:o,altKey:a,spaceKey:this.keys[" "]};return this.pointer=d,d}pointerEnter(e,t){let{shiftKey:n,ctrlKey:o,metaKey:i,altKey:a}=e,s=H.getPoint(e,this.bounds),d={target:t,pointerId:e.pointerId,origin:s,delta:[0,0],point:s,pressure:H.getPressure(e),shiftKey:n,ctrlKey:o,metaKey:S.isDarwin()?i:o,altKey:a,spaceKey:this.keys[" "]};return this.pointer=d,d}pointerMove(e,t){let{shiftKey:n,ctrlKey:o,metaKey:i,altKey:a}=e,s=this.pointer,d=H.getPoint(e,this.bounds),l=(s==null?void 0:s.point)?le.sub(d,s.point):[0,0],u=U(T({origin:d},s),{target:t,pointerId:e.pointerId,point:d,delta:l,pressure:H.getPressure(e),shiftKey:n,ctrlKey:o,metaKey:S.isDarwin()?i:o,altKey:a,spaceKey:this.keys[" "]});return this.pointer=u,u}pointerUp(e,t){let{shiftKey:n,ctrlKey:o,metaKey:i,altKey:a}=e,s=this.pointer,d=H.getPoint(e,this.bounds),l=(s==null?void 0:s.point)?le.sub(d,s.point):[0,0];this.activePointer=void 0;let u=U(T({origin:d},s),{target:t,pointerId:e.pointerId,point:d,delta:l,pressure:H.getPressure(e),shiftKey:n,ctrlKey:o,metaKey:S.isDarwin()?i:o,altKey:a,spaceKey:this.keys[" "]});return this.pointer=u,this.pointerUpTime=performance.now(),u}isDoubleClick(){if(!this.pointer)return!1;let{origin:e,point:t}=this.pointer,n=performance.now()-this.pointerUpTime<Yn&&le.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:a}=this.keys,s=le.sub(t,e),d={pointerId:0,target:"pinch",origin:t,delta:s,point:le.sub(le.toFixed(e),[this.bounds.minX,this.bounds.minY]),pressure:.5,shiftKey:n,ctrlKey:o,metaKey:S.isDarwin()?i:o,altKey:a,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 S.isDarwin()?"\u2318":"Ctrl"}},Ls=new H;var Xn={};function Un(b){var w=b,{id:r="tl",shapeUtils:e,page:t,pageState:n,assets:o=Xn,users:i,userId:a,theme:s,meta:d,snapLines:l,eraseLine:u,grid:m,containerRef:c,performanceMode:p,hideHandles:L=!1,hideIndicators:g=!1,hideCloneHandles:y=!1,hideBindingHandles:R=!1,hideResizeHandles:f=!1,hideRotateHandles:v=!1,hideBounds:Y=!1,hideGrid:X=!0,showDashedBrush:B=!1}=w,x=A(w,["id","shapeUtils","page","pageState","assets","users","userId","theme","meta","snapLines","eraseLine","grid","containerRef","performanceMode","hideHandles","hideIndicators","hideCloneHandles","hideBindingHandles","hideResizeHandles","hideRotateHandles","hideBounds","hideGrid","showDashedBrush"]);at(s,"#"+r);let I=W.useRef(null),M=W.useRef(n);W.useEffect(()=>{M.current=n},[n]);let[q,ie]=W.useState(()=>({callbacks:x,shapeUtils:e,rSelectionBounds:I,rPageState:M,bounds:{minX:0,minY:0,maxX:1/0,maxY:1/0,width:1/0,height:1/0},inputs:new H})),Vt=W.useCallback(zt=>{ie(Gt=>U(T({},Gt),{bounds:zt}))},[]);return W.createElement(Te.Provider,{value:q},W.createElement(Ot,{id:r,page:t,pageState:n,assets:o,snapLines:l,eraseLine:u,grid:m,users:i,userId:a,externalContainerRef:c,hideBounds:Y,hideIndicators:g,hideHandles:L,hideCloneHandles:y,hideBindingHandles:R,hideRotateHandle:v,hideResizeHandles:f,hideGrid:X,showDashedBrush:B,onBoundsChange:Vt,performanceMode:p,meta:d}))}var Rs=W.memo(Un);import*as ce from"react";var ws=ce.memo(ce.forwardRef(function(i,o){var a=i,{children:e,className:t=""}=a,n=A(a,["children","className"]);return ce.createElement("div",T({ref:o,className:`tl-positioned-div ${t}`,draggable:!1},n),ce.createElement("div",{className:"tl-inner-div"},e))}));import{intersectPolygonBounds as $n}from"@tldraw/intersect";import*as We from"react";var je=class{constructor(){E(this,"refMap",new Map);E(this,"boundsCache",new WeakMap);E(this,"showCloneHandles",!1);E(this,"hideBounds",!1);E(this,"isStateful",!1);E(this,"shouldRender",(e,t)=>!0);E(this,"getRef",e=>(this.refMap.has(e.id)||this.refMap.set(e.id,We.createRef()),this.refMap.get(e.id)));E(this,"hitTestBounds",(e,t)=>{let n=this.getBounds(e),o=C.getRotatedCorners(n,e.rotation);return o.every(i=>C.pointInBounds(i,t))||$n(o,t).length>0});E(this,"getRotatedBounds",e=>C.getBoundsFromPoints(C.getRotatedCorners(this.getBounds(e),e.rotation)))}};E(je,"Component",e=>We.forwardRef(e)),E(je,"Indicator",e=>e);export{ws as HTMLContainer,H as Inputs,Rs as Renderer,J as SVGContainer,Qe as SnapPoints,we as TLBoundsCorner,Se as TLBoundsEdge,qe as TLPerformanceMode,je as TLShapeUtil,S as Utils,Ls as inputs};
/**
* 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.mjs.map