(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 Y(){}function yt(t){return t()}function ft(){return Object.create(null)}function j(t){t.forEach(yt)}function _t(t){return typeof t=="function"}function Ot(t,e){return t!=t?e==e:t!==e||t&&typeof t=="object"||typeof t=="function"}function Rt(t){return Object.keys(t).length===0}function Q(t,e){t.appendChild(e)}function Dt(t,e,n){const r=It(t);if(!r.getElementById(e)){const o=q("style");o.id=e,o.textContent=n,Bt(r,o)}}function It(t){if(!t)return document;const e=t.getRootNode?t.getRootNode():t.ownerDocument;return e&&e.host?e:t.ownerDocument}function Bt(t,e){return Q(t.head||t,e),e.sheet}function bt(t,e,n){t.insertBefore(e,n||null)}function lt(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()),R=e}const Qt=new Set;function Wt(t,e){t&&t.i&&(Qt.delete(t),t.i(e))}function Zt(t,e,n,r){const{fragment:o,after_update:i}=t.$$;o&&o.m(e,n),r||it(()=>{const a=t.$$.on_mount.map(yt).filter(_t);t.$$.on_destroy?t.$$.on_destroy.push(...a):j(a),t.$$.on_mount=[]}),i.forEach(it)}function jt(t,e){const n=t.$$;n.fragment!==null&&(Jt(n.after_update),j(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}function te(t,e){t.$$.dirty[0]===-1&&(O.push(t),Kt(),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<{const v=y.length?y[0]:d;return u.ctx&&o(u.ctx[p],u.ctx[p]=v)&&(!u.skip_bound&&u.bound[p]&&u.bound[p](v),f&&te(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=Yt(e.target);u.fragment&&u.fragment.l(p),p.forEach(lt)}else u.fragment&&u.fragment.c();e.intro&&Wt(t.$$.fragment),Zt(t,e.target,e.anchor,e.customElement),vt()}U(s)}class ne{$destroy(){jt(this,1),this.$destroy=Y}$on(e,n){if(!_t(n))return Y;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&&!Rt(e)&&(this.$$.skip_bound=!0,this.$$set(e),this.$$.skip_bound=!1)}}var re={value:()=>{}};function xt(){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}})}W.prototype=xt.prototype={constructor:W,on:function(t,e){var n=this._,r=oe(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)),pt.hasOwnProperty(e)?{space:pt[e],local:t}:t}function se(t){return function(){var e=this.ownerDocument,n=this.namespaceURI;return n===st&&e.documentElement.namespaceURI===st?e.createElement(t):e.createElementNS(n,t)}}function ae(t){return function(){return this.ownerDocument.createElementNS(t.space,t.local)}}function Et(t){var e=kt(t);return(e.local?ae:se)(e)}function le(){}function At(t){return t==null?le:function(){return this.querySelector(t)}}function ce(t){typeof t!="function"&&(t=At(t));for(var e=this._groups,n=e.length,r=new Array(n),o=0;o=m&&(m=w+1);!(h=P[m])&&++m=0;)(a=r[o])&&(i&&a.compareDocumentPosition(i)^4&&i.parentNode.insertBefore(a,i),i=a);return this}function Re(t){t||(t=De);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 Ie(){var t=arguments[0];return arguments[0]=this,t.apply(null,arguments),this}function Be(){return Array.from(this)}function Fe(){for(var t=this._groups,e=0,n=t.length;e1?this.each((e==null?We:typeof e=="function"?je:Ze)(t,e,n??"")):en(this.node(),t)}function en(t,e){return t.style.getPropertyValue(e)||Nt(t).getComputedStyle(t,null).getPropertyValue(e)}function nn(t){return function(){delete this[t]}}function rn(t,e){return function(){this[t]=e}}function on(t,e){return function(){var n=e.apply(this,arguments);n==null?delete this[t]:this[t]=n}}function sn(t,e){return arguments.length>1?this.each((e==null?nn:typeof e=="function"?on:rn)(t,e)):this.node()[t]}function zt(t){return t.trim().split(/^|\s+/)}function ct(t){return t.classList||new Mt(t)}function Mt(t){this._node=t,this._names=zt(t.getAttribute("class")||"")}Mt.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 Pt(t,e){for(var n=ct(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 at(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}})}at.prototype.on=function(){var t=this._.on.apply(this._,arguments);return t===this._?this:t};function Kn(t){return!t.ctrlKey&&!t.button}function Gn(){return this.parentNode}function Jn(t,e){return e??{x:t.x,y:t.y}}function Qn(){return navigator.maxTouchPoints||"ontouchstart"in this}function Wn(){var t=Kn,e=Gn,n=Jn,r=Qn,o={},i=xt("start","drag","end"),a=0,l,s,u,f,p=0;function d(c){c.on("mousedown.drag",y).filter(r).on("touchstart.drag",P).on("touchmove.drag",I,Vn).on("touchend.drag touchcancel.drag",w).style("touch-action","none").style("-webkit-tap-highlight-color","rgba(0,0,0,0)")}function y(c,h){if(!(f||!t.call(this,c,h))){var _=m(this,e.call(this,c,h),c,h,"mouse");_&&(X(c.view).on("mousemove.drag",v,H).on("mouseup.drag",M,H),Xn(c.view),nt(c),u=!1,l=c.clientX,s=c.clientY,_("start",c))}}function v(c){if(D(c),!u){var h=c.clientX-l,_=c.clientY-s;u=h*h+_*_>p}o.mouse("drag",c)}function M(c){X(c.view).on("mousemove.drag mouseup.drag",null),Hn(c.view,u),D(c),o.mouse("end",c)}function P(c,h){if(t.call(this,c,h)){var _=c.changedTouches,g=e.call(this,c,h),b=_.length,k,A;for(k=0;k{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).call(P()),i.loadBase64Image=M,i.resetStopPoints=v});let p=0;function d(w,m){let c=Date.now();c-p<500&&y(w,m),p=c}function y(w,m){const c=s.filter(h=>Math.sqrt((h[0]-w)**2+(h[1]-m)**2)>10);c.length[h[0]/r.width,h[1]/r.height]))}function v(){s=[],n(2,u=[])}async function M(w){const m=new Image;m.src=w,m.onload=()=>{o.drawImage(m,0,0,r.width,r.height)}}function P(){let w=0,m=0;function c(g){const b=r.getBoundingClientRect(),k=r.width/b.width,A=r.height/b.height,x=g.x*k,S=g.y*A;w=x,m=S,n(1,l=!0),d(x,S)}function h(g){const b=r.getBoundingClientRect(),k=r.width/b.width,A=r.height/b.height,x=g.x*k,S=g.y*A,B=g.subject.x*k,N=g.subject.y*A;let $=Math.floor(x-B),C=Math.floor(S-N);const K=Math.floor(B),tt=Math.floor(N);$=Math.sign($)*Math.min(Math.abs($),255),C=Math.sign(C)*Math.min(Math.abs(C),255);const F=JSON.stringify({dx:~~$,dy:~~C,sx:~~K,sy:~~tt,stopPoints:s.map(ut=>[~~ut[0],~~ut[1]])});let T=Date.now();Math.sqrt((w-x)**2+(m-S)**2)>5&&T-f>200&&(tr(F,a),w=x,m=S,console.log("draged",F),f=T)}function _(g){n(1,l=!1)}return Wn().on("start",c).on("drag",h).on("end",_)}function I(w){rt[w?"unshift":"push"](()=>{r=w,n(0,r)})}return[r,l,u,I]}class nr extends ne{constructor(e){super(),ee(this,e,er,jn,Ot,{},Zn)}}class rr extends HTMLElement{constructor(){super()}connectedCallback(){const e=this.attachShadow({mode:"open"}),n=document.createElement("style");n.appendChild(document.createTextNode(Lt)),e.appendChild(n),new nr({target:e})}}customElements.define("draggan-canvas",rr);