(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const o of document.querySelectorAll('link[rel="modulepreload"]'))r(o);new MutationObserver(o=>{for(const i of o)if(i.type==="childList")for(const a of i.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&r(a)}).observe(document,{childList:!0,subtree:!0});function n(o){const i={};return o.integrity&&(i.integrity=o.integrity),o.referrerPolicy&&(i.referrerPolicy=o.referrerPolicy),o.crossOrigin==="use-credentials"?i.credentials="include":o.crossOrigin==="anonymous"?i.credentials="omit":i.credentials="same-origin",i}function r(o){if(o.ep)return;o.ep=!0;const i=n(o);fetch(o.href,i)}})();const Lt=`*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.left-0{left:0px}.top-0{top:0px}.z-10{z-index:10}.inline{display:inline}.h-3{height:.75rem}.h-full{height:100%}.w-3{width:.75rem}.w-full{width:100%}.-translate-x-1\\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-move{cursor:move}.cursor-pointer{cursor:pointer}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.border-2{border-width:2px}.border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.bg-cyan-500{--tw-bg-opacity: 1;background-color:rgb(6 182 212 / var(--tw-bg-opacity))}.bg-slate-50{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.font-bold{font-weight:700}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb;--tw-content: ""}:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;margin:0;line-height:inherit} `;function D(){}function wt(t){return t()}function ct(){return Object.create(null)}function J(t){t.forEach(wt)}function mt(t){return typeof t=="function"}function Rt(t,e){return t!=t?e==e:t!==e||t&&typeof t=="object"||typeof t=="function"}function Tt(t){return Object.keys(t).length===0}function H(t,e){t.appendChild(e)}function Ot(t,e,n){const r=Bt(t);if(!r.getElementById(e)){const o=I("style");o.id=e,o.textContent=n,It(r,o)}}function Bt(t){if(!t)return document;const e=t.getRootNode?t.getRootNode():t.ownerDocument;return e&&e.host?e:t.ownerDocument}function It(t,e){return H(t.head||t,e),e.sheet}function yt(t,e,n){t.insertBefore(e,n||null)}function it(t){t.parentNode&&t.parentNode.removeChild(t)}function Ft(t,e){for(let n=0;nt.indexOf(r)===-1?e.push(r):n.push(r)),n.forEach(r=>r()),O=e}const Jt=new Set;function Qt(t,e){t&&t.i&&(Jt.delete(t),t.i(e))}function Wt(t,e,n,r){const{fragment:o,after_update:i}=t.$$;o&&o.m(e,n),r||nt(()=>{const a=t.$$.on_mount.map(wt).filter(mt);t.$$.on_destroy?t.$$.on_destroy.push(...a):J(a),t.$$.on_mount=[]}),i.forEach(nt)}function Zt(t,e){const n=t.$$;n.fragment!==null&&(Gt(n.after_update),J(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}function jt(t,e){t.$$.dirty[0]===-1&&(T.push(t),Ht(),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<{const _=m.length?m[0]:d;return u.ctx&&o(u.ctx[p],u.ctx[p]=_)&&(!u.skip_bound&&u.bound[p]&&u.bound[p](_),f&&jt(t,p)),d}):[],u.update(),f=!0,J(u.before_update),u.fragment=r?r(u.ctx):!1,e.target){if(e.hydrate){const p=Xt(e.target);u.fragment&&u.fragment.l(p),p.forEach(it)}else u.fragment&&u.fragment.c();e.intro&&Qt(t.$$.fragment),Wt(t,e.target,e.anchor,e.customElement),_t()}F(s)}class ee{$destroy(){Zt(this,1),this.$destroy=D}$on(e,n){if(!mt(n))return D;const r=this.$$.callbacks[e]||(this.$$.callbacks[e]=[]);return r.push(n),()=>{const o=r.indexOf(n);o!==-1&&r.splice(o,1)}}$set(e){this.$$set&&!Tt(e)&&(this.$$.skip_bound=!0,this.$$set(e),this.$$.skip_bound=!1)}}var ne={value:()=>{}};function bt(){for(var t=0,e=arguments.length,n={},r;t=0&&(r=n.slice(o+1),n=n.slice(0,o)),n&&!e.hasOwnProperty(n))throw new Error("unknown type: "+n);return{type:n,name:r}})}K.prototype=bt.prototype={constructor:K,on:function(t,e){var n=this._,r=re(t+"",n),o,i=-1,a=r.length;if(arguments.length<2){for(;++i0)for(var n=new Array(o),r=0,o,i;r=0&&(e=t.slice(0,n))!=="xmlns"&&(t=t.slice(n+1)),ht.hasOwnProperty(e)?{space:ht[e],local:t}:t}function ie(t){return function(){var e=this.ownerDocument,n=this.namespaceURI;return n===rt&&e.documentElement.namespaceURI===rt?e.createElement(t):e.createElementNS(n,t)}}function se(t){return function(){return this.ownerDocument.createElementNS(t.space,t.local)}}function xt(t){var e=vt(t);return(e.local?se:ie)(e)}function ae(){}function kt(t){return t==null?ae:function(){return this.querySelector(t)}}function le(t){typeof t!="function"&&(t=kt(t));for(var e=this._groups,n=e.length,r=new Array(n),o=0;o=E&&(E=S+1);!(h=v[E])&&++E<_;);c._next=h||null}}return a=new A(a,r),a._enter=l,a._exit=s,a}function Me(t){return typeof t=="object"&&"length"in t?t:Array.from(t)}function Pe(){return new A(this._exit||this._groups.map(At),this._parents)}function $e(t,e,n){var r=this.enter(),o=this,i=this.exit();return typeof t=="function"?(r=t(r),r&&(r=r.selection())):r=r.append(t+""),e!=null&&(o=e(o),o&&(o=o.selection())),n==null?i.remove():n(i),r&&o?r.merge(o).order():o}function Le(t){for(var e=t.selection?t.selection():t,n=this._groups,r=e._groups,o=n.length,i=r.length,a=Math.min(o,i),l=new Array(o),s=0;s=0;)(a=r[o])&&(i&&a.compareDocumentPosition(i)^4&&i.parentNode.insertBefore(a,i),i=a);return this}function Te(t){t||(t=Oe);function e(p,d){return p&&d?t(p.__data__,d.__data__):!p-!d}for(var n=this._groups,r=n.length,o=new Array(r),i=0;ie?1:t>=e?0:NaN}function Be(){var t=arguments[0];return arguments[0]=this,t.apply(null,arguments),this}function Ie(){return Array.from(this)}function Fe(){for(var t=this._groups,e=0,n=t.length;e1?this.each((e==null?Qe:typeof e=="function"?Ze:We)(t,e,n??"")):tn(this.node(),t)}function tn(t,e){return t.style.getPropertyValue(e)||St(t).getComputedStyle(t,null).getPropertyValue(e)}function en(t){return function(){delete this[t]}}function nn(t,e){return function(){this[t]=e}}function rn(t,e){return function(){var n=e.apply(this,arguments);n==null?delete this[t]:this[t]=n}}function on(t,e){return arguments.length>1?this.each((e==null?en:typeof e=="function"?rn:nn)(t,e)):this.node()[t]}function Ct(t){return t.trim().split(/^|\s+/)}function st(t){return t.classList||new Nt(t)}function Nt(t){this._node=t,this._names=Ct(t.getAttribute("class")||"")}Nt.prototype={add:function(t){var e=this._names.indexOf(t);e<0&&(this._names.push(t),this._node.setAttribute("class",this._names.join(" ")))},remove:function(t){var e=this._names.indexOf(t);e>=0&&(this._names.splice(e,1),this._node.setAttribute("class",this._names.join(" ")))},contains:function(t){return this._names.indexOf(t)>=0}};function zt(t,e){for(var n=st(t),r=-1,o=e.length;++r=0&&(n=e.slice(r+1),e=e.slice(0,r)),{type:e,name:n}})}function Ln(t){return function(){var e=this.__on;if(e){for(var n=0,r=-1,o=e.length,i;n()=>t;function ot(t,{sourceEvent:e,subject:n,target:r,identifier:o,active:i,x:a,y:l,dx:s,dy:u,dispatch:f}){Object.defineProperties(this,{type:{value:t,enumerable:!0,configurable:!0},sourceEvent:{value:e,enumerable:!0,configurable:!0},subject:{value:n,enumerable:!0,configurable:!0},target:{value:r,enumerable:!0,configurable:!0},identifier:{value:o,enumerable:!0,configurable:!0},active:{value:i,enumerable:!0,configurable:!0},x:{value:a,enumerable:!0,configurable:!0},y:{value:l,enumerable:!0,configurable:!0},dx:{value:s,enumerable:!0,configurable:!0},dy:{value:u,enumerable:!0,configurable:!0},_:{value:f}})}ot.prototype.on=function(){var t=this._.on.apply(this._,arguments);return t===this._?this:t};function Hn(t){return!t.ctrlKey&&!t.button}function Kn(){return this.parentNode}function Gn(t,e){return e??{x:t.x,y:t.y}}function Jn(){return navigator.maxTouchPoints||"ontouchstart"in this}function Qn(){var t=Hn,e=Kn,n=Gn,r=Jn,o={},i=bt("start","drag","end"),a=0,l,s,u,f,p=0;function d(c){c.on("mousedown.drag",m).filter(r).on("touchstart.drag",v).on("touchmove.drag",N,qn).on("touchend.drag touchcancel.drag",S).style("touch-action","none").style("-webkit-tap-highlight-color","rgba(0,0,0,0)")}function m(c,h){if(!(f||!t.call(this,c,h))){var g=E(this,e.call(this,c,h),c,h,"mouse");g&&(X(c.view).on("mousemove.drag",_,q).on("mouseup.drag",b,q),Un(c.view),j(c),u=!1,l=c.clientX,s=c.clientY,g("start",c))}}function _(c){if(B(c),!u){var h=c.clientX-l,g=c.clientY-s;u=h*h+g*g>p}o.mouse("drag",c)}function b(c){X(c.view).on("mousemove.drag mouseup.drag",null),Vn(c.view,u),B(c),o.mouse("end",c)}function v(c,h){if(t.call(this,c,h)){var g=c.changedTouches,w=e.call(this,c,h),y=g.length,x,C;for(x=0;x{i=document.getElementById("canvas-root"),i._data||(i._data={image:null}),i.dataset.mode&&i.dataset.mode,o=r.getContext("2d"),a=document.querySelector("#dxdysxsy textarea"),X(r).on("dblclick",f).call(m()),i.loadBase64Image=d,i.resetStopPoints=p});function f(b){const v=r.getBoundingClientRect(),N=r.width/v.width,S=r.height/v.height,E=b.offsetX*N,c=b.offsetY*S,h=s.filter(g=>Math.sqrt((g[0]-E)**2+(g[1]-c)**2)>10);h.length[g[0]/r.width,g[1]/r.height]))}function p(){s=[],n(2,u=[])}async function d(b){const v=new Image;v.src=b,v.onload=()=>{o.drawImage(v,0,0,r.width,r.height)}}function m(){let b=0,v=0;function N(c){const h=r.getBoundingClientRect(),g=r.width/h.width,w=r.height/h.height,y=c.x*g,x=c.y*w;b=y,v=x,n(1,l=!0)}function S(c){const h=r.getBoundingClientRect(),g=r.width/h.width,w=r.height/h.height,y=c.x*g,x=c.y*w,C=c.subject.x*g,k=c.subject.y*w;let z=Math.floor(y-C),M=Math.floor(x-k);const $=Math.floor(C),Q=Math.floor(k);z=Math.sign(z)*Math.min(Math.abs(z),255),M=Math.sign(M)*Math.min(Math.abs(M),255);const L=JSON.stringify({dx:z,dy:M,sx:$,sy:Q,stopPoints:s});Math.sqrt((b-y)**2+(v-x)**2)>5&&(jn(L,a),b=y,v=x)}function E(c){n(1,l=!1)}return Qn().on("start",N).on("drag",S).on("end",E)}function _(b){tt[b?"unshift":"push"](()=>{r=b,n(0,r)})}return[r,l,u,_]}class er extends ee{constructor(e){super(),te(this,e,tr,Zn,Rt,{},Wn)}}class nr extends HTMLElement{constructor(){super()}connectedCallback(){const e=this.attachShadow({mode:"open"}),n=document.createElement("style");n.appendChild(document.createTextNode(Lt)),e.appendChild(n),new er({target:e})}}customElements.define("draggan-canvas",nr);