(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 s of i.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&r(s)}).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 $t=`*,: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}}.relative{position:relative}.z-10{z-index:10}.inline{display:inline}.w-full{width:100%}.cursor-move{cursor:move}.cursor-pointer{cursor:pointer}.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-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)}: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 I(){}function ut(t){return t()}function it(){return Object.create(null)}function X(t){t.forEach(ut)}function ft(t){return typeof t=="function"}function zt(t,e){return t!=t?e==e:t!==e||t&&typeof t=="object"||typeof t=="function"}function Mt(t){return Object.keys(t).length===0}function ht(t,e){t.appendChild(e)}function Lt(t,e,n){const r=Pt(t);if(!r.getElementById(e)){const o=J("style");o.id=e,o.textContent=n,Rt(r,o)}}function Pt(t){if(!t)return document;const e=t.getRootNode?t.getRootNode():t.ownerDocument;return e&&e.host?e:t.ownerDocument}function Rt(t,e){return ht(t.head||t,e),e.sheet}function Tt(t,e,n){t.insertBefore(e,n||null)}function dt(t){t.parentNode&&t.parentNode.removeChild(t)}function J(t){return document.createElement(t)}function R(t,e,n){n==null?t.removeAttribute(e):t.getAttribute(e)!==n&&t.setAttribute(e,n)}function It(t){return Array.from(t.childNodes)}let O;function T(t){O=t}function Ot(){if(!O)throw new Error("Function called outside component initialization");return O}function Bt(t){Ot().$$.on_mount.push(t)}const z=[],Q=[];let M=[];const st=[],Ft=Promise.resolve();let W=!1;function Dt(){W||(W=!0,Ft.then(pt))}function Z(t){M.push(t)}const K=new Set;let $=0;function pt(){if($!==0)return;const t=O;do{try{for(;$t.indexOf(r)===-1?e.push(r):n.push(r)),n.forEach(r=>r()),M=e}const Vt=new Set;function Xt(t,e){t&&t.i&&(Vt.delete(t),t.i(e))}function Yt(t,e,n,r){const{fragment:o,after_update:i}=t.$$;o&&o.m(e,n),r||Z(()=>{const s=t.$$.on_mount.map(ut).filter(ft);t.$$.on_destroy?t.$$.on_destroy.push(...s):X(s),t.$$.on_mount=[]}),i.forEach(Z)}function Ht(t,e){const n=t.$$;n.fragment!==null&&(qt(n.after_update),X(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}function Kt(t,e){t.$$.dirty[0]===-1&&(z.push(t),Dt(),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<{const y=m.length?m[0]:h;return l.ctx&&o(l.ctx[d],l.ctx[d]=y)&&(!l.skip_bound&&l.bound[d]&&l.bound[d](y),f&&Kt(t,d)),h}):[],l.update(),f=!0,X(l.before_update),l.fragment=r?r(l.ctx):!1,e.target){if(e.hydrate){const d=It(e.target);l.fragment&&l.fragment.l(d),d.forEach(dt)}else l.fragment&&l.fragment.c();e.intro&&Xt(t.$$.fragment),Yt(t,e.target,e.anchor,e.customElement),pt()}T(u)}class Jt{$destroy(){Ht(this,1),this.$destroy=I}$on(e,n){if(!ft(n))return I;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&&!Mt(e)&&(this.$$.skip_bound=!0,this.$$set(e),this.$$.skip_bound=!1)}}var Qt={value:()=>{}};function gt(){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}})}q.prototype=gt.prototype={constructor:q,on:function(t,e){var n=this._,r=Wt(t+"",n),o,i=-1,s=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)),ct.hasOwnProperty(e)?{space:ct[e],local:t}:t}function jt(t){return function(){var e=this.ownerDocument,n=this.namespaceURI;return n===j&&e.documentElement.namespaceURI===j?e.createElement(t):e.createElementNS(n,t)}}function te(t){return function(){return this.ownerDocument.createElementNS(t.space,t.local)}}function wt(t){var e=mt(t);return(e.local?te:jt)(e)}function ee(){}function yt(t){return t==null?ee:function(){return this.querySelector(t)}}function ne(t){typeof t!="function"&&(t=yt(t));for(var e=this._groups,n=e.length,r=new Array(n),o=0;o=k&&(k=x+1);!(p=b[k])&&++k=0;)(s=r[o])&&(i&&s.compareDocumentPosition(i)^4&&i.parentNode.insertBefore(s,i),i=s);return this}function $e(t){t||(t=ze);function e(d,h){return d&&h?t(d.__data__,h.__data__):!d-!h}for(var n=this._groups,r=n.length,o=new Array(r),i=0;ie?1:t>=e?0:NaN}function Me(){var t=arguments[0];return arguments[0]=this,t.apply(null,arguments),this}function Le(){return Array.from(this)}function Pe(){for(var t=this._groups,e=0,n=t.length;e1?this.each((e==null?Xe:typeof e=="function"?He:Ye)(t,e,n??"")):Ge(this.node(),t)}function Ge(t,e){return t.style.getPropertyValue(e)||vt(t).getComputedStyle(t,null).getPropertyValue(e)}function Je(t){return function(){delete this[t]}}function Qe(t,e){return function(){this[t]=e}}function We(t,e){return function(){var n=e.apply(this,arguments);n==null?delete this[t]:this[t]=n}}function Ze(t,e){return arguments.length>1?this.each((e==null?Je:typeof e=="function"?We:Qe)(t,e)):this.node()[t]}function xt(t){return t.trim().split(/^|\s+/)}function et(t){return t.classList||new kt(t)}function kt(t){this._node=t,this._names=xt(t.getAttribute("class")||"")}kt.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 Et(t,e){for(var n=et(t),r=-1,o=e.length;++r=0&&(n=e.slice(r+1),e=e.slice(0,r)),{type:e,name:n}})}function Cn(t){return function(){var e=this.__on;if(e){for(var n=0,r=-1,o=e.length,i;n()=>t;function tt(t,{sourceEvent:e,subject:n,target:r,identifier:o,active:i,x:s,y:c,dx:u,dy:l,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:s,enumerable:!0,configurable:!0},y:{value:c,enumerable:!0,configurable:!0},dx:{value:u,enumerable:!0,configurable:!0},dy:{value:l,enumerable:!0,configurable:!0},_:{value:f}})}tt.prototype.on=function(){var t=this._.on.apply(this._,arguments);return t===this._?this:t};function Dn(t){return!t.ctrlKey&&!t.button}function Un(){return this.parentNode}function qn(t,e){return e??{x:t.x,y:t.y}}function Vn(){return navigator.maxTouchPoints||"ontouchstart"in this}function Xn(){var t=Dn,e=Un,n=qn,r=Vn,o={},i=gt("start","drag","end"),s=0,c,u,l,f,d=0;function h(a){a.on("mousedown.drag",m).filter(r).on("touchstart.drag",b).on("touchmove.drag",S,On).on("touchend.drag touchcancel.drag",x).style("touch-action","none").style("-webkit-tap-highlight-color","rgba(0,0,0,0)")}function m(a,p){if(!(f||!t.call(this,a,p))){var g=k(this,e.call(this,a,p),a,p,"mouse");g&&(B(a.view).on("mousemove.drag",y,F).on("mouseup.drag",N,F),Bn(a.view),G(a),l=!1,c=a.clientX,u=a.clientY,g("start",a))}}function y(a){if(L(a),!l){var p=a.clientX-c,g=a.clientY-u;l=p*p+g*g>d}o.mouse("drag",a)}function N(a){B(a.view).on("mousemove.drag mouseup.drag",null),Fn(a.view,l),L(a),o.mouse("end",a)}function b(a,p){if(t.call(this,a,p)){var g=a.changedTouches,w=e.call(this,a,p),_=g.length,v,C;for(v=0;v<_;++v)(C=k(this,w,a,p,g[v].identifier,g[v]))&&(G(a),C("start",a,g[v]))}}function S(a){var p=a.changedTouches,g=p.length,w,_;for(w=0;w{i=document.getElementById("canvas-root"),i._data||(i._data={image:null}),i.dataset.mode&&i.dataset.mode,o=r.getContext("2d"),s=document.querySelector("#dxdysxsy textarea"),B(r).call(l()),i.loadBase64Image=u});async function u(d){const h=new Image;h.src=d,h.onload=()=>{o.drawImage(h,0,0,r.width,r.height)}}function l(){let d=0,h=0;function m(b){const S=r.getBoundingClientRect(),x=r.width/S.width,k=r.height/S.height,a=b.x*x,p=b.y*k;d=a,h=p,n(1,c=!0)}function y(b){const S=r.getBoundingClientRect(),x=r.width/S.width,k=r.height/S.height,a=b.x*x,p=b.y*k,g=b.subject.x*x,w=b.subject.y*k;let _=Math.floor(a-g),v=Math.floor(p-w);const C=Math.floor(g),E=Math.floor(w);_=Math.sign(_)*Math.min(Math.abs(_),255),v=Math.sign(v)*Math.min(Math.abs(v),255);const P=`${_},${v},${C},${E}`;Math.sqrt((d-a)**2+(h-p)**2)>5&&(Kn(P,s),console.log("dragged",P),d=a,h=p)}function N(b){n(1,c=!1)}return Xn().on("start",m).on("drag",y).on("end",N)}function f(d){Q[d?"unshift":"push"](()=>{r=d,n(0,r)})}return[r,c,f]}class Jn extends Jt{constructor(e){super(),Gt(this,e,Gn,Hn,zt,{},Yn)}}class Qn extends HTMLElement{constructor(){super()}connectedCallback(){const e=this.attachShadow({mode:"open"}),n=document.createElement("style");n.appendChild(document.createTextNode($t)),e.appendChild(n),new Jn({target:e})}}customElements.define("draggan-canvas",Qn);