add custom component

interface/app.py

@@ -24,6 +24,23 @@ models_files = {
 models = {name: Model(models_path + "/" + path) for name, path in models_files.items()}
 
 
+canvas_html = """<draggan-canvas id="canvas-root" style='display:flex;max-width: 500px;margin: 0 auto;'></draggan-canvas>"""
+load_js = """
+async () => {
+  const script = document.createElement('script');
+  script.type = "module"
+  script.src = "file=templates/index.js"
+  document.head.appendChild(script);
+}
+"""
+image_change = """
+async (img) => {
+  const canvasEl = document.getElementById("canvas-root");
+  canvasEl.loadBase64Image(img);
+}   
+"""
+
+
 def cv_to_pil(img):
     return Image.fromarray(cv2.cvtColor(img.astype("uint8"), cv2.COLOR_BGR2RGB))
 
@@ -35,13 +52,17 @@ def random_sample(model_name: str):
     return pil_img, model_name, latents
 
 
-def transform(model_state, latents_state, dx=0, dy=0, dz=0, sxsy=[128, 128]):
+def transform(model_state, latents_state, dxdysxsy="0,0,128,128", dz=0):
+    dx, dy, sx, sy = [
+        int(float(x)) if x.strip() != "" else 0 for x in dxdysxsy.split(",")
+    ]
+    print(dx, dy, sx, sy)
     model = models[model_state]
     dx = dx
     dy = dy
     dz = dz
-    sx = sxsy[0]
-    sy = sxsy[1]
+    sx = sx
+    sy = sy
     stop_points = []
 
     img, latents_state = model.transform(
@@ -73,7 +94,6 @@ def image_click(evt: gr.SelectData):
 with gr.Blocks() as block:
     model_state = gr.State(value="cat")
     latents_state = gr.State({})
-    sxsy = gr.State([128, 128])
     gr.Markdown("# UserControllableLT: User controllable latent transformer")
     gr.Markdown("## Select model")
     with gr.Row():
@@ -87,22 +107,13 @@ with gr.Blocks() as block:
                 button = gr.Button("Random sample")
                 reset_btn = gr.Button("Reset")
                 change_style_bt = gr.Button("Change style")
-
-            dx = gr.Slider(
-                minimum=-256, maximum=256, step_size=0.1, label="dx", value=0.0
-            )
-            dy = gr.Slider(
-                minimum=-256, maximum=256, step_size=0.1, label="dy", value=0.0
-            )
-            dz = gr.Slider(
-                minimum=-5, maximum=5, step_size=0.01, label="dz", value=0.0
-            )
-            image = gr.Image(type="pil", label="").style(height=500)
+            dxdysxsy = gr.Textbox(label="dxdysxsy", value="0,0,128,128", elem_id="dxdysxsy" ,visible=False)
+            dz = gr.Slider(minimum=-5, maximum=5, step_size=0.01, label="zoom", value=0.0)
+            image = gr.Image(type="pil", visible=False)
 
         with gr.Column():
-            html = gr.HTML(label="output")
+            html = gr.HTML(canvas_html, label="output")
 
-    image.select(image_click, inputs=None, outputs=sxsy)
     button.click(
         random_sample, inputs=[model_name], outputs=[image, model_state, latents_state]
     )
@@ -117,24 +128,21 @@ with gr.Blocks() as block:
         inputs=[image, model_state, latents_state],
         outputs=[image, latents_state],
     )
-    dx.change(
-        transform,
-        inputs=[model_state, latents_state, dx, dy, dz, sxsy],
-        outputs=[image, latents_state],
-        show_progress=False,
-    )
-    dy.change(
+    dxdysxsy.change(
         transform,
-        inputs=[model_state, latents_state, dx, dy, dz, sxsy],
+        inputs=[model_state, latents_state, dxdysxsy, dz],
         outputs=[image, latents_state],
         show_progress=False,
     )
     dz.change(
         transform,
-        inputs=[model_state, latents_state, dx, dy, dz, sxsy],
+        inputs=[model_state, latents_state, dxdysxsy, dz],
         outputs=[image, latents_state],
         show_progress=False,
     )
+    image.change(None, inputs=[image], outputs=None, _js=image_change)
+    block.load(None, None, None, _js=load_js)
+    block.load(random_sample, inputs=[model_name], outputs=[image, model_state, latents_state])
 
 block.queue()
 block.launch()

interface/templates/index.js

@@ -0,0 +1,2 @@
+(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(;$<z.length;){const e=z[$];$++,T(e),Ut(e.$$)}}catch(e){throw z.length=0,$=0,e}for(T(null),z.length=0,$=0;Q.length;)Q.pop()();for(let e=0;e<M.length;e+=1){const n=M[e];K.has(n)||(K.add(n),n())}M.length=0}while(z.length);for(;st.length;)st.pop()();W=!1,K.clear(),T(t)}function Ut(t){if(t.fragment!==null){t.update(),X(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(Z)}}function qt(t){const e=[],n=[];M.forEach(r=>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<<e%31}function Gt(t,e,n,r,o,i,s,c=[-1]){const u=O;T(t);const l=t.$$={fragment:null,ctx:[],props:i,update:I,not_equal:o,bound:it(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(u?u.$$.context:[])),callbacks:it(),dirty:c,skip_bound:!1,root:e.target||u.$$.root};s&&s(l.root);let f=!1;if(l.ctx=n?n(t,e.props||{},(d,h,...m)=>{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<e;++t){if(!(r=arguments[t]+"")||r in n||/[\s.]/.test(r))throw new Error("illegal type: "+r);n[r]=[]}return new q(n)}function q(t){this._=t}function Wt(t,e){return t.trim().split(/^|\s+/).map(function(n){var r="",o=n.indexOf(".");if(o>=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(;++i<s;)if((o=(t=r[i]).type)&&(o=Zt(n[o],t.name)))return o;return}if(e!=null&&typeof e!="function")throw new Error("invalid callback: "+e);for(;++i<s;)if(o=(t=r[i]).type)n[o]=at(n[o],t.name,e);else if(e==null)for(o in n)n[o]=at(n[o],t.name,null);return this},copy:function(){var t={},e=this._;for(var n in e)t[n]=e[n].slice();return new q(t)},call:function(t,e){if((o=arguments.length-2)>0)for(var n=new Array(o),r=0,o,i;r<o;++r)n[r]=arguments[r+2];if(!this._.hasOwnProperty(t))throw new Error("unknown type: "+t);for(i=this._[t],r=0,o=i.length;r<o;++r)i[r].value.apply(e,n)},apply:function(t,e,n){if(!this._.hasOwnProperty(t))throw new Error("unknown type: "+t);for(var r=this._[t],o=0,i=r.length;o<i;++o)r[o].value.apply(e,n)}};function Zt(t,e){for(var n=0,r=t.length,o;n<r;++n)if((o=t[n]).name===e)return o.value}function at(t,e,n){for(var r=0,o=t.length;r<o;++r)if(t[r].name===e){t[r]=Qt,t=t.slice(0,r).concat(t.slice(r+1));break}return n!=null&&t.push({name:e,value:n}),t}var j="http://www.w3.org/1999/xhtml";const ct={svg:"http://www.w3.org/2000/svg",xhtml:j,xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace",xmlns:"http://www.w3.org/2000/xmlns/"};function mt(t){var e=t+="",n=e.indexOf(":");return n>=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<n;++o)for(var i=e[o],s=i.length,c=r[o]=new Array(s),u,l,f=0;f<s;++f)(u=i[f])&&(l=t.call(u,u.__data__,f,i))&&("__data__"in u&&(l.__data__=u.__data__),c[f]=l);return new A(r,this._parents)}function re(t){return t==null?[]:Array.isArray(t)?t:Array.from(t)}function oe(){return[]}function ie(t){return t==null?oe:function(){return this.querySelectorAll(t)}}function se(t){return function(){return re(t.apply(this,arguments))}}function ae(t){typeof t=="function"?t=se(t):t=ie(t);for(var e=this._groups,n=e.length,r=[],o=[],i=0;i<n;++i)for(var s=e[i],c=s.length,u,l=0;l<c;++l)(u=s[l])&&(r.push(t.call(u,u.__data__,l,s)),o.push(u));return new A(r,o)}function ce(t){return function(){return this.matches(t)}}function _t(t){return function(e){return e.matches(t)}}var le=Array.prototype.find;function ue(t){return function(){return le.call(this.children,t)}}function fe(){return this.firstElementChild}function he(t){return this.select(t==null?fe:ue(typeof t=="function"?t:_t(t)))}var de=Array.prototype.filter;function pe(){return Array.from(this.children)}function ge(t){return function(){return de.call(this.children,t)}}function me(t){return this.selectAll(t==null?pe:ge(typeof t=="function"?t:_t(t)))}function we(t){typeof t!="function"&&(t=ce(t));for(var e=this._groups,n=e.length,r=new Array(n),o=0;o<n;++o)for(var i=e[o],s=i.length,c=r[o]=[],u,l=0;l<s;++l)(u=i[l])&&t.call(u,u.__data__,l,i)&&c.push(u);return new A(r,this._parents)}function bt(t){return new Array(t.length)}function ye(){return new A(this._enter||this._groups.map(bt),this._parents)}function V(t,e){this.ownerDocument=t.ownerDocument,this.namespaceURI=t.namespaceURI,this._next=null,this._parent=t,this.__data__=e}V.prototype={constructor:V,appendChild:function(t){return this._parent.insertBefore(t,this._next)},insertBefore:function(t,e){return this._parent.insertBefore(t,e)},querySelector:function(t){return this._parent.querySelector(t)},querySelectorAll:function(t){return this._parent.querySelectorAll(t)}};function _e(t){return function(){return t}}function be(t,e,n,r,o,i){for(var s=0,c,u=e.length,l=i.length;s<l;++s)(c=e[s])?(c.__data__=i[s],r[s]=c):n[s]=new V(t,i[s]);for(;s<u;++s)(c=e[s])&&(o[s]=c)}function ve(t,e,n,r,o,i,s){var c,u,l=new Map,f=e.length,d=i.length,h=new Array(f),m;for(c=0;c<f;++c)(u=e[c])&&(h[c]=m=s.call(u,u.__data__,c,e)+"",l.has(m)?o[c]=u:l.set(m,u));for(c=0;c<d;++c)m=s.call(t,i[c],c,i)+"",(u=l.get(m))?(r[c]=u,u.__data__=i[c],l.delete(m)):n[c]=new V(t,i[c]);for(c=0;c<f;++c)(u=e[c])&&l.get(h[c])===u&&(o[c]=u)}function xe(t){return t.__data__}function ke(t,e){if(!arguments.length)return Array.from(this,xe);var n=e?ve:be,r=this._parents,o=this._groups;typeof t!="function"&&(t=_e(t));for(var i=o.length,s=new Array(i),c=new Array(i),u=new Array(i),l=0;l<i;++l){var f=r[l],d=o[l],h=d.length,m=Ee(t.call(f,f&&f.__data__,l,r)),y=m.length,N=c[l]=new Array(y),b=s[l]=new Array(y),S=u[l]=new Array(h);n(f,d,N,b,S,m,e);for(var x=0,k=0,a,p;x<y;++x)if(a=N[x]){for(x>=k&&(k=x+1);!(p=b[k])&&++k<y;);a._next=p||null}}return s=new A(s,r),s._enter=c,s._exit=u,s}function Ee(t){return typeof t=="object"&&"length"in t?t:Array.from(t)}function Ae(){return new A(this._exit||this._groups.map(bt),this._parents)}function Se(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 Ce(t){for(var e=t.selection?t.selection():t,n=this._groups,r=e._groups,o=n.length,i=r.length,s=Math.min(o,i),c=new Array(o),u=0;u<s;++u)for(var l=n[u],f=r[u],d=l.length,h=c[u]=new Array(d),m,y=0;y<d;++y)(m=l[y]||f[y])&&(h[y]=m);for(;u<o;++u)c[u]=n[u];return new A(c,this._parents)}function Ne(){for(var t=this._groups,e=-1,n=t.length;++e<n;)for(var r=t[e],o=r.length-1,i=r[o],s;--o>=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;i<r;++i){for(var s=n[i],c=s.length,u=o[i]=new Array(c),l,f=0;f<c;++f)(l=s[f])&&(u[f]=l);u.sort(e)}return new A(o,this._parents).order()}function ze(t,e){return t<e?-1:t>e?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;e<n;++e)for(var r=t[e],o=0,i=r.length;o<i;++o){var s=r[o];if(s)return s}return null}function Re(){let t=0;for(const e of this)++t;return t}function Te(){return!this.node()}function Ie(t){for(var e=this._groups,n=0,r=e.length;n<r;++n)for(var o=e[n],i=0,s=o.length,c;i<s;++i)(c=o[i])&&t.call(c,c.__data__,i,o);return this}function Oe(t){return function(){this.removeAttribute(t)}}function Be(t){return function(){this.removeAttributeNS(t.space,t.local)}}function Fe(t,e){return function(){this.setAttribute(t,e)}}function De(t,e){return function(){this.setAttributeNS(t.space,t.local,e)}}function Ue(t,e){return function(){var n=e.apply(this,arguments);n==null?this.removeAttribute(t):this.setAttribute(t,n)}}function qe(t,e){return function(){var n=e.apply(this,arguments);n==null?this.removeAttributeNS(t.space,t.local):this.setAttributeNS(t.space,t.local,n)}}function Ve(t,e){var n=mt(t);if(arguments.length<2){var r=this.node();return n.local?r.getAttributeNS(n.space,n.local):r.getAttribute(n)}return this.each((e==null?n.local?Be:Oe:typeof e=="function"?n.local?qe:Ue:n.local?De:Fe)(n,e))}function vt(t){return t.ownerDocument&&t.ownerDocument.defaultView||t.document&&t||t.defaultView}function Xe(t){return function(){this.style.removeProperty(t)}}function Ye(t,e,n){return function(){this.style.setProperty(t,e,n)}}function He(t,e,n){return function(){var r=e.apply(this,arguments);r==null?this.style.removeProperty(t):this.style.setProperty(t,r,n)}}function Ke(t,e,n){return arguments.length>1?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<o;)n.add(e[r])}function At(t,e){for(var n=et(t),r=-1,o=e.length;++r<o;)n.remove(e[r])}function je(t){return function(){Et(this,t)}}function tn(t){return function(){At(this,t)}}function en(t,e){return function(){(e.apply(this,arguments)?Et:At)(this,t)}}function nn(t,e){var n=xt(t+"");if(arguments.length<2){for(var r=et(this.node()),o=-1,i=n.length;++o<i;)if(!r.contains(n[o]))return!1;return!0}return this.each((typeof e=="function"?en:e?je:tn)(n,e))}function rn(){this.textContent=""}function on(t){return function(){this.textContent=t}}function sn(t){return function(){var e=t.apply(this,arguments);this.textContent=e??""}}function an(t){return arguments.length?this.each(t==null?rn:(typeof t=="function"?sn:on)(t)):this.node().textContent}function cn(){this.innerHTML=""}function ln(t){return function(){this.innerHTML=t}}function un(t){return function(){var e=t.apply(this,arguments);this.innerHTML=e??""}}function fn(t){return arguments.length?this.each(t==null?cn:(typeof t=="function"?un:ln)(t)):this.node().innerHTML}function hn(){this.nextSibling&&this.parentNode.appendChild(this)}function dn(){return this.each(hn)}function pn(){this.previousSibling&&this.parentNode.insertBefore(this,this.parentNode.firstChild)}function gn(){return this.each(pn)}function mn(t){var e=typeof t=="function"?t:wt(t);return this.select(function(){return this.appendChild(e.apply(this,arguments))})}function wn(){return null}function yn(t,e){var n=typeof t=="function"?t:wt(t),r=e==null?wn:typeof e=="function"?e:yt(e);return this.select(function(){return this.insertBefore(n.apply(this,arguments),r.apply(this,arguments)||null)})}function _n(){var t=this.parentNode;t&&t.removeChild(this)}function bn(){return this.each(_n)}function vn(){var t=this.cloneNode(!1),e=this.parentNode;return e?e.insertBefore(t,this.nextSibling):t}function xn(){var t=this.cloneNode(!0),e=this.parentNode;return e?e.insertBefore(t,this.nextSibling):t}function kn(t){return this.select(t?xn:vn)}function En(t){return arguments.length?this.property("__data__",t):this.node().__data__}function An(t){return function(e){t.call(this,e,this.__data__)}}function Sn(t){return t.trim().split(/^|\s+/).map(function(e){var n="",r=e.indexOf(".");return 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<o;++n)i=e[n],(!t.type||i.type===t.type)&&i.name===t.name?this.removeEventListener(i.type,i.listener,i.options):e[++r]=i;++r?e.length=r:delete this.__on}}}function Nn(t,e,n){return function(){var r=this.__on,o,i=An(e);if(r){for(var s=0,c=r.length;s<c;++s)if((o=r[s]).type===t.type&&o.name===t.name){this.removeEventListener(o.type,o.listener,o.options),this.addEventListener(o.type,o.listener=i,o.options=n),o.value=e;return}}this.addEventListener(t.type,i,n),o={type:t.type,name:t.name,value:e,listener:i,options:n},r?r.push(o):this.__on=[o]}}function $n(t,e,n){var r=Sn(t+""),o,i=r.length,s;if(arguments.length<2){var c=this.node().__on;if(c){for(var u=0,l=c.length,f;u<l;++u)for(o=0,f=c[u];o<i;++o)if((s=r[o]).type===f.type&&s.name===f.name)return f.value}return}for(c=e?Nn:Cn,o=0;o<i;++o)this.each(c(r[o],e,n));return this}function St(t,e,n){var r=vt(t),o=r.CustomEvent;typeof o=="function"?o=new o(e,n):(o=r.document.createEvent("Event"),n?(o.initEvent(e,n.bubbles,n.cancelable),o.detail=n.detail):o.initEvent(e,!1,!1)),t.dispatchEvent(o)}function zn(t,e){return function(){return St(this,t,e)}}function Mn(t,e){return function(){return St(this,t,e.apply(this,arguments))}}function Ln(t,e){return this.each((typeof e=="function"?Mn:zn)(t,e))}function*Pn(){for(var t=this._groups,e=0,n=t.length;e<n;++e)for(var r=t[e],o=0,i=r.length,s;o<i;++o)(s=r[o])&&(yield s)}var Rn=[null];function A(t,e){this._groups=t,this._parents=e}function Tn(){return this}A.prototype={constructor:A,select:ne,selectAll:ae,selectChild:he,selectChildren:me,filter:we,data:ke,enter:ye,exit:Ae,join:Se,merge:Ce,selection:Tn,order:Ne,sort:$e,call:Me,nodes:Le,node:Pe,size:Re,empty:Te,each:Ie,attr:Ve,style:Ke,property:Ze,classed:nn,text:an,html:fn,raise:dn,lower:gn,append:mn,insert:yn,remove:bn,clone:kn,datum:En,on:$n,dispatch:Ln,[Symbol.iterator]:Pn};function B(t){return typeof t=="string"?new A([[document.querySelector(t)]],[document.documentElement]):new A([[t]],Rn)}function In(t){let e;for(;e=t.sourceEvent;)t=e;return t}function lt(t,e){if(t=In(t),e===void 0&&(e=t.currentTarget),e){var n=e.ownerSVGElement||e;if(n.createSVGPoint){var r=n.createSVGPoint();return r.x=t.clientX,r.y=t.clientY,r=r.matrixTransform(e.getScreenCTM().inverse()),[r.x,r.y]}if(e.getBoundingClientRect){var o=e.getBoundingClientRect();return[t.clientX-o.left-e.clientLeft,t.clientY-o.top-e.clientTop]}}return[t.pageX,t.pageY]}const On={passive:!1},F={capture:!0,passive:!1};function G(t){t.stopImmediatePropagation()}function L(t){t.preventDefault(),t.stopImmediatePropagation()}function Bn(t){var e=t.document.documentElement,n=B(t).on("dragstart.drag",L,F);"onselectstart"in e?n.on("selectstart.drag",L,F):(e.__noselect=e.style.MozUserSelect,e.style.MozUserSelect="none")}function Fn(t,e){var n=t.document.documentElement,r=B(t).on("dragstart.drag",null);e&&(r.on("click.drag",L,F),setTimeout(function(){r.on("click.drag",null)},0)),"onselectstart"in n?r.on("selectstart.drag",null):(n.style.MozUserSelect=n.__noselect,delete n.__noselect)}const U=t=>()=>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<g;++w)(_=o[p[w].identifier])&&(L(a),_("drag",a,p[w]))}function x(a){var p=a.changedTouches,g=p.length,w,_;for(f&&clearTimeout(f),f=setTimeout(function(){f=null},500),w=0;w<g;++w)(_=o[p[w].identifier])&&(G(a),_("end",a,p[w]))}function k(a,p,g,w,_,v){var C=i.copy(),E=lt(v||g,p),P,nt,D;if((D=n.call(a,new tt("beforestart",{sourceEvent:g,target:h,identifier:_,active:s,x:E[0],y:E[1],dx:0,dy:0,dispatch:C}),w))!=null)return P=D.x-E[0]||0,nt=D.y-E[1]||0,function Ct(Y,rt,Nt){var ot=E,H;switch(Y){case"start":o[_]=Ct,H=s++;break;case"end":delete o[_],--s;case"drag":E=lt(Nt||rt,p),H=s;break}C.call(Y,a,new tt(Y,{sourceEvent:rt,subject:D,target:h,identifier:_,active:H,x:E[0]+P,y:E[1]+nt,dx:E[0]-ot[0],dy:E[1]-ot[1],dispatch:C}),w)}}return h.filter=function(a){return arguments.length?(t=typeof a=="function"?a:U(!!a),h):t},h.container=function(a){return arguments.length?(e=typeof a=="function"?a:U(a),h):e},h.subject=function(a){return arguments.length?(n=typeof a=="function"?a:U(a),h):n},h.touchable=function(a){return arguments.length?(r=typeof a=="function"?a:U(!!a),h):r},h.on=function(){var a=i.on.apply(i,arguments);return a===i?h:a},h.clickDistance=function(a){return arguments.length?(d=(a=+a)*a,h):Math.sqrt(d)},h}function Yn(t){Lt(t,"svelte-39b13y","canvas.svelte-39b13y{border-radius:0.5rem;--tw-shadow:0 1px 2px 0 rgb(0 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)}.container.svelte-39b13y *{color:black !important}")}function Hn(t){let e,n,r;return{c(){e=J("div"),n=J("canvas"),R(n,"class",r="w-full border-2 border-gray-200 "+(t[1]?"cursor-move":"cursor-pointer")+" svelte-39b13y"),R(n,"width","256"),R(n,"height","256"),R(e,"class","relative container svelte-39b13y")},m(o,i){Tt(o,e,i),ht(e,n),t[2](n)},p(o,[i]){i&2&&r!==(r="w-full border-2 border-gray-200 "+(o[1]?"cursor-move":"cursor-pointer")+" svelte-39b13y")&&R(n,"class",r)},i:I,o:I,d(o){o&&dt(e),t[2](null)}}}function Kn(t,e){e.value=t;const n=new CustomEvent("input");e.dispatchEvent(n)}function Gn(t,e,n){let r,o,i,s,c=!1;Bt(()=>{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);