radames commited on
Commit
1215f5e
1 Parent(s): e477ce0

add stop points

Browse files
Files changed (2) hide show
  1. custom_component.js +2 -2
  2. interface/app.py +26 -16
custom_component.js CHANGED
@@ -1,2 +1,2 @@
1
- (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}
2
- `;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);
 
1
+ (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}
2
+ `;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;n<t.length;n+=1)t[n]&&t[n].d(e)}function I(t){return document.createElement(t)}function Dt(t){return document.createTextNode(t)}function Yt(){return Dt(" ")}function P(t,e,n){n==null?t.removeAttribute(e):t.getAttribute(e)!==n&&t.setAttribute(e,n)}function Xt(t){return Array.from(t.childNodes)}function U(t,e,n,r){n==null?t.style.removeProperty(e):t.style.setProperty(e,n,r?"important":"")}let Y;function F(t){Y=t}function qt(){if(!Y)throw new Error("Function called outside component initialization");return Y}function Ut(t){qt().$$.on_mount.push(t)}const T=[],tt=[];let O=[];const ut=[],Vt=Promise.resolve();let et=!1;function Ht(){et||(et=!0,Vt.then(_t))}function nt(t){O.push(t)}const Z=new Set;let R=0;function _t(){if(R!==0)return;const t=Y;do{try{for(;R<T.length;){const e=T[R];R++,F(e),Kt(e.$$)}}catch(e){throw T.length=0,R=0,e}for(F(null),T.length=0,R=0;tt.length;)tt.pop()();for(let e=0;e<O.length;e+=1){const n=O[e];Z.has(n)||(Z.add(n),n())}O.length=0}while(T.length);for(;ut.length;)ut.pop()();et=!1,Z.clear(),F(t)}function Kt(t){if(t.fragment!==null){t.update(),J(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(nt)}}function Gt(t){const e=[],n=[];O.forEach(r=>t.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<<e%31}function te(t,e,n,r,o,i,a,l=[-1]){const s=Y;F(t);const u=t.$$={fragment:null,ctx:[],props:i,update:D,not_equal:o,bound:ct(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(s?s.$$.context:[])),callbacks:ct(),dirty:l,skip_bound:!1,root:e.target||s.$$.root};a&&a(u.root);let f=!1;if(u.ctx=n?n(t,e.props||{},(p,d,...m)=>{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<e;++t){if(!(r=arguments[t]+"")||r in n||/[\s.]/.test(r))throw new Error("illegal type: "+r);n[r]=[]}return new K(n)}function K(t){this._=t}function re(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}})}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(;++i<a;)if((o=(t=r[i]).type)&&(o=oe(n[o],t.name)))return o;return}if(e!=null&&typeof e!="function")throw new Error("invalid callback: "+e);for(;++i<a;)if(o=(t=r[i]).type)n[o]=ft(n[o],t.name,e);else if(e==null)for(o in n)n[o]=ft(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 K(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 oe(t,e){for(var n=0,r=t.length,o;n<r;++n)if((o=t[n]).name===e)return o.value}function ft(t,e,n){for(var r=0,o=t.length;r<o;++r)if(t[r].name===e){t[r]=ne,t=t.slice(0,r).concat(t.slice(r+1));break}return n!=null&&t.push({name:e,value:n}),t}var rt="http://www.w3.org/1999/xhtml";const ht={svg:"http://www.w3.org/2000/svg",xhtml:rt,xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace",xmlns:"http://www.w3.org/2000/xmlns/"};function vt(t){var e=t+="",n=e.indexOf(":");return n>=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<n;++o)for(var i=e[o],a=i.length,l=r[o]=new Array(a),s,u,f=0;f<a;++f)(s=i[f])&&(u=t.call(s,s.__data__,f,i))&&("__data__"in s&&(u.__data__=s.__data__),l[f]=u);return new A(r,this._parents)}function ce(t){return t==null?[]:Array.isArray(t)?t:Array.from(t)}function ue(){return[]}function fe(t){return t==null?ue:function(){return this.querySelectorAll(t)}}function he(t){return function(){return ce(t.apply(this,arguments))}}function de(t){typeof t=="function"?t=he(t):t=fe(t);for(var e=this._groups,n=e.length,r=[],o=[],i=0;i<n;++i)for(var a=e[i],l=a.length,s,u=0;u<l;++u)(s=a[u])&&(r.push(t.call(s,s.__data__,u,a)),o.push(s));return new A(r,o)}function pe(t){return function(){return this.matches(t)}}function Et(t){return function(e){return e.matches(t)}}var ge=Array.prototype.find;function we(t){return function(){return ge.call(this.children,t)}}function me(){return this.firstElementChild}function ye(t){return this.select(t==null?me:we(typeof t=="function"?t:Et(t)))}var _e=Array.prototype.filter;function be(){return Array.from(this.children)}function ve(t){return function(){return _e.call(this.children,t)}}function xe(t){return this.selectAll(t==null?be:ve(typeof t=="function"?t:Et(t)))}function ke(t){typeof t!="function"&&(t=pe(t));for(var e=this._groups,n=e.length,r=new Array(n),o=0;o<n;++o)for(var i=e[o],a=i.length,l=r[o]=[],s,u=0;u<a;++u)(s=i[u])&&t.call(s,s.__data__,u,i)&&l.push(s);return new A(r,this._parents)}function At(t){return new Array(t.length)}function Ee(){return new A(this._enter||this._groups.map(At),this._parents)}function G(t,e){this.ownerDocument=t.ownerDocument,this.namespaceURI=t.namespaceURI,this._next=null,this._parent=t,this.__data__=e}G.prototype={constructor:G,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 Ae(t){return function(){return t}}function Se(t,e,n,r,o,i){for(var a=0,l,s=e.length,u=i.length;a<u;++a)(l=e[a])?(l.__data__=i[a],r[a]=l):n[a]=new G(t,i[a]);for(;a<s;++a)(l=e[a])&&(o[a]=l)}function Ce(t,e,n,r,o,i,a){var l,s,u=new Map,f=e.length,p=i.length,d=new Array(f),m;for(l=0;l<f;++l)(s=e[l])&&(d[l]=m=a.call(s,s.__data__,l,e)+"",u.has(m)?o[l]=s:u.set(m,s));for(l=0;l<p;++l)m=a.call(t,i[l],l,i)+"",(s=u.get(m))?(r[l]=s,s.__data__=i[l],u.delete(m)):n[l]=new G(t,i[l]);for(l=0;l<f;++l)(s=e[l])&&u.get(d[l])===s&&(o[l]=s)}function Ne(t){return t.__data__}function ze(t,e){if(!arguments.length)return Array.from(this,Ne);var n=e?Ce:Se,r=this._parents,o=this._groups;typeof t!="function"&&(t=Ae(t));for(var i=o.length,a=new Array(i),l=new Array(i),s=new Array(i),u=0;u<i;++u){var f=r[u],p=o[u],d=p.length,m=Me(t.call(f,f&&f.__data__,u,r)),_=m.length,b=l[u]=new Array(_),v=a[u]=new Array(_),N=s[u]=new Array(d);n(f,p,b,v,N,m,e);for(var S=0,E=0,c,h;S<_;++S)if(c=b[S]){for(S>=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<a;++s)for(var u=n[s],f=r[s],p=u.length,d=l[s]=new Array(p),m,_=0;_<p;++_)(m=u[_]||f[_])&&(d[_]=m);for(;s<o;++s)l[s]=n[s];return new A(l,this._parents)}function Re(){for(var t=this._groups,e=-1,n=t.length;++e<n;)for(var r=t[e],o=r.length-1,i=r[o],a;--o>=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;i<r;++i){for(var a=n[i],l=a.length,s=o[i]=new Array(l),u,f=0;f<l;++f)(u=a[f])&&(s[f]=u);s.sort(e)}return new A(o,this._parents).order()}function Oe(t,e){return t<e?-1:t>e?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;e<n;++e)for(var r=t[e],o=0,i=r.length;o<i;++o){var a=r[o];if(a)return a}return null}function De(){let t=0;for(const e of this)++t;return t}function Ye(){return!this.node()}function Xe(t){for(var e=this._groups,n=0,r=e.length;n<r;++n)for(var o=e[n],i=0,a=o.length,l;i<a;++i)(l=o[i])&&t.call(l,l.__data__,i,o);return this}function qe(t){return function(){this.removeAttribute(t)}}function Ue(t){return function(){this.removeAttributeNS(t.space,t.local)}}function Ve(t,e){return function(){this.setAttribute(t,e)}}function He(t,e){return function(){this.setAttributeNS(t.space,t.local,e)}}function Ke(t,e){return function(){var n=e.apply(this,arguments);n==null?this.removeAttribute(t):this.setAttribute(t,n)}}function Ge(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 Je(t,e){var n=vt(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?Ue:qe:typeof e=="function"?n.local?Ge:Ke:n.local?He:Ve)(n,e))}function St(t){return t.ownerDocument&&t.ownerDocument.defaultView||t.document&&t||t.defaultView}function Qe(t){return function(){this.style.removeProperty(t)}}function We(t,e,n){return function(){this.style.setProperty(t,e,n)}}function Ze(t,e,n){return function(){var r=e.apply(this,arguments);r==null?this.style.removeProperty(t):this.style.setProperty(t,r,n)}}function je(t,e,n){return arguments.length>1?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<o;)n.add(e[r])}function Mt(t,e){for(var n=st(t),r=-1,o=e.length;++r<o;)n.remove(e[r])}function sn(t){return function(){zt(this,t)}}function an(t){return function(){Mt(this,t)}}function ln(t,e){return function(){(e.apply(this,arguments)?zt:Mt)(this,t)}}function cn(t,e){var n=Ct(t+"");if(arguments.length<2){for(var r=st(this.node()),o=-1,i=n.length;++o<i;)if(!r.contains(n[o]))return!1;return!0}return this.each((typeof e=="function"?ln:e?sn:an)(n,e))}function un(){this.textContent=""}function fn(t){return function(){this.textContent=t}}function hn(t){return function(){var e=t.apply(this,arguments);this.textContent=e??""}}function dn(t){return arguments.length?this.each(t==null?un:(typeof t=="function"?hn:fn)(t)):this.node().textContent}function pn(){this.innerHTML=""}function gn(t){return function(){this.innerHTML=t}}function wn(t){return function(){var e=t.apply(this,arguments);this.innerHTML=e??""}}function mn(t){return arguments.length?this.each(t==null?pn:(typeof t=="function"?wn:gn)(t)):this.node().innerHTML}function yn(){this.nextSibling&&this.parentNode.appendChild(this)}function _n(){return this.each(yn)}function bn(){this.previousSibling&&this.parentNode.insertBefore(this,this.parentNode.firstChild)}function vn(){return this.each(bn)}function xn(t){var e=typeof t=="function"?t:xt(t);return this.select(function(){return this.appendChild(e.apply(this,arguments))})}function kn(){return null}function En(t,e){var n=typeof t=="function"?t:xt(t),r=e==null?kn:typeof e=="function"?e:kt(e);return this.select(function(){return this.insertBefore(n.apply(this,arguments),r.apply(this,arguments)||null)})}function An(){var t=this.parentNode;t&&t.removeChild(this)}function Sn(){return this.each(An)}function Cn(){var t=this.cloneNode(!1),e=this.parentNode;return e?e.insertBefore(t,this.nextSibling):t}function Nn(){var t=this.cloneNode(!0),e=this.parentNode;return e?e.insertBefore(t,this.nextSibling):t}function zn(t){return this.select(t?Nn:Cn)}function Mn(t){return arguments.length?this.property("__data__",t):this.node().__data__}function Pn(t){return function(e){t.call(this,e,this.__data__)}}function $n(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 Ln(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 Rn(t,e,n){return function(){var r=this.__on,o,i=Pn(e);if(r){for(var a=0,l=r.length;a<l;++a)if((o=r[a]).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 Tn(t,e,n){var r=$n(t+""),o,i=r.length,a;if(arguments.length<2){var l=this.node().__on;if(l){for(var s=0,u=l.length,f;s<u;++s)for(o=0,f=l[s];o<i;++o)if((a=r[o]).type===f.type&&a.name===f.name)return f.value}return}for(l=e?Rn:Ln,o=0;o<i;++o)this.each(l(r[o],e,n));return this}function Pt(t,e,n){var r=St(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 On(t,e){return function(){return Pt(this,t,e)}}function Bn(t,e){return function(){return Pt(this,t,e.apply(this,arguments))}}function In(t,e){return this.each((typeof e=="function"?Bn:On)(t,e))}function*Fn(){for(var t=this._groups,e=0,n=t.length;e<n;++e)for(var r=t[e],o=0,i=r.length,a;o<i;++o)(a=r[o])&&(yield a)}var Dn=[null];function A(t,e){this._groups=t,this._parents=e}function Yn(){return this}A.prototype={constructor:A,select:le,selectAll:de,selectChild:ye,selectChildren:xe,filter:ke,data:ze,enter:Ee,exit:Pe,join:$e,merge:Le,selection:Yn,order:Re,sort:Te,call:Be,nodes:Ie,node:Fe,size:De,empty:Ye,each:Xe,attr:Je,style:je,property:on,classed:cn,text:dn,html:mn,raise:_n,lower:vn,append:xn,insert:En,remove:Sn,clone:zn,datum:Mn,on:Tn,dispatch:In,[Symbol.iterator]:Fn};function X(t){return typeof t=="string"?new A([[document.querySelector(t)]],[document.documentElement]):new A([[t]],Dn)}function Xn(t){let e;for(;e=t.sourceEvent;)t=e;return t}function dt(t,e){if(t=Xn(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 qn={passive:!1},q={capture:!0,passive:!1};function j(t){t.stopImmediatePropagation()}function B(t){t.preventDefault(),t.stopImmediatePropagation()}function Un(t){var e=t.document.documentElement,n=X(t).on("dragstart.drag",B,q);"onselectstart"in e?n.on("selectstart.drag",B,q):(e.__noselect=e.style.MozUserSelect,e.style.MozUserSelect="none")}function Vn(t,e){var n=t.document.documentElement,r=X(t).on("dragstart.drag",null);e&&(r.on("click.drag",B,q),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 V=t=>()=>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<y;++x)(C=E(this,w,c,h,g[x].identifier,g[x]))&&(j(c),C("start",c,g[x]))}}function N(c){var h=c.changedTouches,g=h.length,w,y;for(w=0;w<g;++w)(y=o[h[w].identifier])&&(B(c),y("drag",c,h[w]))}function S(c){var h=c.changedTouches,g=h.length,w,y;for(f&&clearTimeout(f),f=setTimeout(function(){f=null},500),w=0;w<g;++w)(y=o[h[w].identifier])&&(j(c),y("end",c,h[w]))}function E(c,h,g,w,y,x){var C=i.copy(),k=dt(x||g,h),z,M,$;if(($=n.call(c,new ot("beforestart",{sourceEvent:g,target:d,identifier:y,active:a,x:k[0],y:k[1],dx:0,dy:0,dispatch:C}),w))!=null)return z=$.x-k[0]||0,M=$.y-k[1]||0,function Q(L,at,$t){var lt=k,W;switch(L){case"start":o[y]=Q,W=a++;break;case"end":delete o[y],--a;case"drag":k=dt($t||at,h),W=a;break}C.call(L,c,new ot(L,{sourceEvent:at,subject:$,target:d,identifier:y,active:W,x:k[0]+z,y:k[1]+M,dx:k[0]-lt[0],dy:k[1]-lt[1],dispatch:C}),w)}}return d.filter=function(c){return arguments.length?(t=typeof c=="function"?c:V(!!c),d):t},d.container=function(c){return arguments.length?(e=typeof c=="function"?c:V(c),d):e},d.subject=function(c){return arguments.length?(n=typeof c=="function"?c:V(c),d):n},d.touchable=function(c){return arguments.length?(r=typeof c=="function"?c:V(!!c),d):r},d.on=function(){var c=i.on.apply(i,arguments);return c===i?d:c},d.clickDistance=function(c){return arguments.length?(p=(c=+c)*c,d):Math.sqrt(p)},d}function Wn(t){Ot(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 pt(t,e,n){const r=t.slice();return r[12]=e[n],r}function gt(t){let e;return{c(){e=I("div"),P(e,"class","absolute w-3 h-3 rounded-full bg-cyan-500 -translate-x-1/2 -translate-y-1/2"),U(e,"top",t[12][1]*100+"%"),U(e,"left",t[12][0]*100+"%")},m(n,r){yt(n,e,r)},p(n,r){r&4&&U(e,"top",n[12][1]*100+"%"),r&4&&U(e,"left",n[12][0]*100+"%")},d(n){n&&it(e)}}}function Zn(t){let e,n,r,o,i,a=t[2],l=[];for(let s=0;s<a.length;s+=1)l[s]=gt(pt(t,a,s));return{c(){e=I("div"),n=I("canvas"),o=Yt(),i=I("div");for(let s=0;s<l.length;s+=1)l[s].c();P(n,"class",r="w-full border-2 border-gray-200 "+(t[1]?"cursor-move":"cursor-pointer")+" svelte-39b13y"),P(n,"width","256"),P(n,"height","256"),P(i,"class","absolute top-0 left-0 w-full h-full pointer-events-none touch-events-none"),P(e,"class","relative container svelte-39b13y")},m(s,u){yt(s,e,u),H(e,n),t[3](n),H(e,o),H(e,i);for(let f=0;f<l.length;f+=1)l[f]&&l[f].m(i,null)},p(s,[u]){if(u&2&&r!==(r="w-full border-2 border-gray-200 "+(s[1]?"cursor-move":"cursor-pointer")+" svelte-39b13y")&&P(n,"class",r),u&4){a=s[2];let f;for(f=0;f<a.length;f+=1){const p=pt(s,a,f);l[f]?l[f].p(p,u):(l[f]=gt(p),l[f].c(),l[f].m(i,null))}for(;f<l.length;f+=1)l[f].d(1);l.length=a.length}},i:D,o:D,d(s){s&&it(e),t[3](null),Ft(l,s)}}}function jn(t,e){e.value=t;const n=new CustomEvent("input");e.dispatchEvent(n)}function tr(t,e,n){let r,o,i,a,l=!1,s=[],u=[];Ut(()=>{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<s.length?s=h:s=s.concat([[E,c]]),n(2,u=s.map(g=>[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);
interface/app.py CHANGED
@@ -8,6 +8,7 @@ from PIL import Image
8
  import cv2
9
  import io
10
  from huggingface_hub import snapshot_download
 
11
 
12
  models_path = snapshot_download(repo_id="radames/UserControllableLT", repo_type="model")
13
 
@@ -39,6 +40,12 @@ async (img) => {
39
  canvasEl.loadBase64Image(img);
40
  }
41
  """
 
 
 
 
 
 
42
 
43
 
44
  def cv_to_pil(img):
@@ -52,19 +59,15 @@ def random_sample(model_name: str):
52
  return pil_img, model_name, latents
53
 
54
 
55
- def transform(model_state, latents_state, dxdysxsy="0,0,128,128", dz=0):
56
- dx, dy, sx, sy = [
57
- int(float(x)) if x.strip() != "" else 0 for x in dxdysxsy.split(",")
58
- ]
59
- print(dx, dy, sx, sy)
60
- model = models[model_state]
61
- dx = dx
62
- dy = dy
63
- dz = dz
64
- sx = sx
65
- sy = sy
66
- stop_points = []
67
 
 
 
 
 
 
 
68
  img, latents_state = model.transform(
69
  latents_state, dz, dxy=[dx, dy], sxsy=[sx, sy], stop_points=stop_points
70
  )
@@ -107,8 +110,12 @@ with gr.Blocks() as block:
107
  button = gr.Button("Random sample")
108
  reset_btn = gr.Button("Reset")
109
  change_style_bt = gr.Button("Change style")
110
- dxdysxsy = gr.Textbox(label="dxdysxsy", value="0,0,128,128", elem_id="dxdysxsy" ,visible=False)
111
- dz = gr.Slider(minimum=-5, maximum=5, step_size=0.01, label="zoom", value=0.0)
 
 
 
 
112
  image = gr.Image(type="pil", visible=False)
113
 
114
  with gr.Column():
@@ -121,7 +128,8 @@ with gr.Blocks() as block:
121
  reset,
122
  inputs=[model_state, latents_state],
123
  outputs=[image, latents_state],
124
- )
 
125
 
126
  change_style_bt.click(
127
  change_style,
@@ -142,7 +150,9 @@ with gr.Blocks() as block:
142
  )
143
  image.change(None, inputs=[image], outputs=None, _js=image_change)
144
  block.load(None, None, None, _js=load_js)
145
- block.load(random_sample, inputs=[model_name], outputs=[image, model_state, latents_state])
 
 
146
 
147
  block.queue()
148
  block.launch()
 
8
  import cv2
9
  import io
10
  from huggingface_hub import snapshot_download
11
+ import json
12
 
13
  models_path = snapshot_download(repo_id="radames/UserControllableLT", repo_type="model")
14
 
 
40
  canvasEl.loadBase64Image(img);
41
  }
42
  """
43
+ reset_stop_points = """
44
+ async () => {
45
+ const canvasEl = document.getElementById("canvas-root");
46
+ canvasEl.resetStopPoints();
47
+ }
48
+ """
49
 
50
 
51
  def cv_to_pil(img):
 
59
  return pil_img, model_name, latents
60
 
61
 
62
+ def transform(model_state, latents_state, dxdysxsy="{}", dz=0):
63
+ data = json.loads(dxdysxsy)
 
 
 
 
 
 
 
 
 
 
64
 
65
+ model = models[model_state]
66
+ dx = int(data["dx"])
67
+ dy = int(data["dy"])
68
+ sx = int(data["sx"])
69
+ sy = int(data["sy"])
70
+ stop_points = [[int(x), int(y)] for x, y in data["stopPoints"]]
71
  img, latents_state = model.transform(
72
  latents_state, dz, dxy=[dx, dy], sxsy=[sx, sy], stop_points=stop_points
73
  )
 
110
  button = gr.Button("Random sample")
111
  reset_btn = gr.Button("Reset")
112
  change_style_bt = gr.Button("Change style")
113
+ dxdysxsy = gr.Textbox(
114
+ label="dxdysxsy", value="{}", elem_id="dxdysxsy", visible=False
115
+ )
116
+ dz = gr.Slider(
117
+ minimum=-5, maximum=5, step_size=0.01, label="zoom", value=0.0
118
+ )
119
  image = gr.Image(type="pil", visible=False)
120
 
121
  with gr.Column():
 
128
  reset,
129
  inputs=[model_state, latents_state],
130
  outputs=[image, latents_state],
131
+ queue=False,
132
+ ).then(None, None, None, _js=reset_stop_points, queue=False)
133
 
134
  change_style_bt.click(
135
  change_style,
 
150
  )
151
  image.change(None, inputs=[image], outputs=None, _js=image_change)
152
  block.load(None, None, None, _js=load_js)
153
+ block.load(
154
+ random_sample, inputs=[model_name], outputs=[image, model_state, latents_state]
155
+ )
156
 
157
  block.queue()
158
  block.launch()