uiik 1.1.0 → 1.3.0-alpha

package/index.esm.js

@@ -1,7 +1,2587 @@
 /**
- * uiik v1.1.0
+ * uiik v1.3.0-alpha
  * A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.
  * https://github.com/holyhigh2/uiik
  * c) 2021-2023 @holyhigh2 may be freely distributed under the MIT license
  */
-import{isArrayLike as e,isString as t,isElement as s,isArray as o,isEmpty as n,isNumber as i,isFunction as l,isDefined as r,isUndefined as a}from"myfx/is";import{map as c,toArray as d,each as p,find as u,reject as h,includes as f,some as v,flatMap as m,size as g}from"myfx/collection";import{assign as y,merge as b}from"myfx/object";import{split as x,test as w}from"myfx/string";import{closest as L}from"myfx/tree";import{compact as E,findIndex as C}from"myfx/array";import{alphaId as S}from"myfx/utils";function T(e,t,s,o){if("a"===s&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===s?o:"a"===s?o.call(e):o?o.value:t.get(e)}function z(e,t,s,o,n){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!n)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?n.call(e,s):n?n.value=s:t.set(e,s),s}var $;class k{constructor(o,n){if(this.enabled=!0,$.set(this,[]),this.opts=n||{},e(o)&&!t(o))this.ele=c(o,(e=>{let o=t(e)?document.querySelector(e):e;return s(o)?o:(console.error('Invalid element "'+e+'"'),!1)}));else{const n=t(o)?document.querySelectorAll(o):o;if(!s(n)&&!e(n))return void console.error('Invalid element "'+o+'"');this.ele=e(n)?d(n):[n]}}destroy(){p(T(this,$,"f"),(e=>{e[0].removeEventListener(e[1],e[2],e[3])})),z(this,$,[],"f")}registerEvent(e,t,s,o=!1){const n=(e=>{this.enabled&&s(e)}).bind(this);e.addEventListener(t,n,o),T(this,$,"f").push([e,t,n,o])}disable(){this.enabled=!1}enable(){this.enabled=!0}getOptions(){return this.opts}getOption(e){return this.opts[e]}setOptions(e){y(this.opts,e),this.onOptionChanged(this.opts)}setOption(e,t){this.opts[e]=t,this.onOptionChanged(this.opts)}onOptionChanged(e){}}function M(e,t){const s={x:0,y:0};let o=e.offsetParent;for(;o&&t&&o!==t;){const e=window.getComputedStyle(o);s.x+=o.offsetLeft+parseFloat(e.borderLeftWidth),s.y+=o.offsetTop+parseFloat(e.borderTopWidth),o=o.offsetParent}return s.x+=e.offsetLeft,s.y+=e.offsetTop,s}$=new WeakMap;const W=5,D="body * { pointer-events: none; }";let N;function I(){N=function(){document.styleSheets.length<1&&document.head.appendChild(document.createElement("style"));const e=u(document.styleSheets,(e=>!e.href));e||document.head.appendChild(document.createElement("style"));return e||u(document.styleSheets,(e=>!e.href))}(),null==N||N.insertRule(D,0)}function O(){null==N||N.deleteRule(0)}let A={html:"",body:""};function Y(){A.body=document.body.style.cursor,A.html=document.documentElement.style.cursor}function F(e){document.body.style.cursor=document.documentElement.style.cursor=e}function X(){document.body.style.cursor=A.body,document.documentElement.style.cursor=A.html}var H,P,q;const R="uii-splittable",B="uii-splittable-handle-active";class _ extends k{constructor(e,t){super(e,y({handleSize:10,minSize:0,sticky:!1,inside:!1,ghost:!1},t)),H.add(this),p(this.ele,(e=>{"static"===window.getComputedStyle(e).position&&(e.style.position="relative"),e.classList.toggle(R,!0);const t=e.querySelectorAll(this.opts.handle),s=h(e.children,(e=>!!f(t,e))),i=T(this,H,"m",P).call(this,e);e.classList.toggle("v"===i?"uii-splittable-v":"uii-splittable-h",!0);const l=c(s,((e,t)=>o(this.opts.minSize)?this.opts.minSize[t]||0:this.opts.minSize)),r=c(s,((e,t)=>o(this.opts.sticky)?this.opts.sticky[t]||!1:this.opts.sticky));if(n(t)){const e=s.length-1;for(let t=0;t<e;t++)T(this,H,"m",q).call(this,l.slice(t,t+2),r.slice(t,t+2),this.opts,i,s[t],s[t+1])}else p(t,((t,s)=>{let o,n;t.parentNode.classList.contains(R)?(o=t.previousElementSibling,n=t.nextElementSibling):(n=function(e,t){let s=e.parentNode;for(;s&&s.parentNode!==t;)s=s.parentNode;return s}(t,e),o=n.previousElementSibling),T(this,H,"m",q).call(this,l.slice(s,s+2),r.slice(s,s+2),this.opts,i,o,n,t)}))}))}}function j(e,t){return new _(e,t)}H=new WeakSet,P=function(e){let t="h";let s=e.children[0].offsetTop;return p(e.children,(e=>{if(e.offsetTop!=s)return t="v",!1})),t},q=function(e,t,s,o,n,i,l){var r;const a=s.handleSize;if(!l){l=document.createElement("div");let e=0;s.inside||(e="v"===o?i.offsetTop:i.offsetLeft);const t=`width:${a}px;height:100%;top:0;left:${e-a/2}px;z-index:9;`,n=`height:${a}px;width:100%;left:0;top:${e-a/2}px;z-index:9;`;l.style.cssText="position: absolute;"+("v"===o?n:t),s.inside&&i.appendChild(l),null===(r=i.parentNode)||void 0===r||r.insertBefore(l,i)}l.style.cursor="v"===o?"s-resize":"e-resize",l.dataset.cursor=l.style.cursor,l.classList.add("uii-splittable-handle");const c=e[0],d=e[1];let p=t[0],u=t[1];const h=s.onStart,f=s.onSplit,v=s.onEnd,m=s.onSticky,g=s.onClone,y=s.oneSideMode,b=!y||"start"===y,x=!y||"end"===y;l.onmousedown=function(e){let t=0,r=0;const y=e.clientX,w=e.clientY;let L=1,E=0;switch(o){case"v":t=n.offsetHeight,r=i.offsetHeight,L=l.offsetHeight;break;case"h":t=n.offsetWidth,r=i.offsetWidth,L=l.offsetWidth}E=L+t+r;const C=n.style,S=i.style,T=s.ghost,z=s.ghostClass;let $=null,k="none";t<c/2?k="start":E-t-L<d/2&&(k="end");let M=!1;Y();let W,D,N="v"===o?n.offsetTop:n.offsetLeft;const A=s=>{var n;const v=s.clientX-y,O=s.clientY-w;if(!M){if(!(Math.abs(v)>1||Math.abs(O)>1))return s.preventDefault(),!1;M=!0,null==l||l.classList.add(B),T&&($=l.cloneNode(!0),$.style.opacity="0.3",$.style.pointerEvents="none",$.classList.add("uii-splittable-handle-ghost"),$&&(z&&($.className=$.className.replace(z,"")+" "+z),null===(n=null==l?void 0:l.parentNode)||void 0===n||n.appendChild($),g&&g({clone:$},e))),I(),F((null==l?void 0:l.dataset.cursor)||""),h&&h({size1:t,size2:r},s)}let A=!1;if(W="v"===o?t+O:t+v,W<c/2&&p&&c>0?("none"==k&&(A=!0,k="start"),W=0):W<c?(W=c,"start"==k&&p&&(A=!0,k="none")):E-W-L<d/2&&u?("none"==k&&(A=!0,k="end"),W=E-L):E-W-L<d&&(W=E-d-L,"end"==k&&u&&(A=!0,k="none")),D=E-W-L,$)"v"===o?$.style.top=N+W-a/2+"px":$.style.left=N+W-a/2+"px";else{const e="v"===o?"height":"width";b&&C.setProperty(e,W+"px","important"),x&&S.setProperty(e,D+"px","important"),A&&m&&m({size1:W,size2:D,position:k},s),"v"===o?l.style.top=i.offsetTop-a/2+"px":l.style.left=i.offsetLeft-a/2+"px"}return f&&f({size1:W,size2:D},s),s.preventDefault(),!1},H=e=>{var s,c;if(document.removeEventListener("mousemove",A,!1),document.removeEventListener("mouseup",H,!1),window.removeEventListener("blur",H,!1),M){switch(o){case"v":t=(null==n?void 0:n.offsetHeight)||-1,r=(null==i?void 0:i.offsetHeight)||-1;break;case"h":t=(null==n?void 0:n.offsetWidth)||-1,r=(null==i?void 0:i.offsetWidth)||-1}if(null==l||l.classList.remove(B),$){const e="v"===o?"height":"width";b&&C.setProperty(e,W+"px","important"),x&&S.setProperty(e,D+"px","important"),"v"===o?l.style.top=N+W-a/2+"px":l.style.left=N+W-a/2+"px",(null===(s=$.parentNode)||void 0===s?void 0:s.contains($))&&(null===(c=$.parentNode)||void 0===c||c.removeChild($))}O(),X(),v&&v({size1:t,size2:r},e)}};return document.addEventListener("mousemove",A,!1),document.addEventListener("mouseup",H,!1),window.addEventListener("blur",H,!1),e.preventDefault(),!1}};const V=2,U="uii-resizable-handle",Z="uii-resizable-handle-",G="uii-resizable-handle-active";class J extends k{constructor(e,t){super(e,y({handleSize:8,minSize:50,dir:["n","s","e","w","ne","nw","se","sw"],ghost:!1,offset:0},t)),p(this.ele,(e=>{!function(e,t){const s=t.handleSize,n=t.offset||0;p(t.dir||["n","s","e","w","ne","nw","se","sw"],(r=>{const a=document.createElement("div");a.classList.add(U,Z+r),a.setAttribute("name","handle");let c="";switch(r){case"n":c=`left:0px;top:${-n}px;width:100%;height:${s}px;`;break;case"s":c=`left:0px;bottom:${-n}px;width:100%;height:${s}px;`;break;case"w":c=`top:0px;left:${-n}px;width:${s}px;height:100%;`;break;case"e":c=`top:0px;right:${-n}px;width:${s}px;height:100%;`;break;default:switch(c=`width:${s}px;height:${s}px;z-index:9;`,r){case"ne":c+=`top:${-n}px;right:${-n}px;`;break;case"nw":c+=`top:${-n}px;left:${-n}px;`;break;case"se":c+=`bottom:${-n}px;right:${-n}px;`;break;case"sw":c+=`bottom:${-n}px;left:${-n}px;`}}!function(e,t,s,n){const r=n.onStart,a=n.onResize,c=n.onEnd,d=n.onClone;e.onmousedown=function(p){const u=s.offsetWidth,h=s.offsetHeight,f=s.offsetLeft,v=s.offsetTop;let m=!1,g=!1,y=!1,b=!1;switch(t){case"s":g=!0;break;case"e":m=!0;break;case"n":b=!0,g=!0;break;case"w":y=!0,m=!0;break;case"se":m=!0,g=!0;break;case"sw":y=!0,m=!0,g=!0;break;case"ne":b=!0,m=!0,g=!0;break;case"nw":y=!0,b=!0,m=!0,g=!0}const x=p.clientX,w=p.clientY;let L,E,C,S;o(n.minSize)?(L=n.minSize[0],E=n.minSize[1]):i(n.minSize)&&(L=n.minSize,E=n.minSize),o(n.maxSize)?(C=n.maxSize[0],S=n.maxSize[1]):i(n.maxSize)&&(C=n.maxSize,S=n.maxSize);const T=C?f-C+u:null,z=S?v-S+h:null,$=L?f+u-L:null,k=E?v+h-E:null,M=n.ghost,W=n.ghostClass;let D=null;const N=n.aspectRatio,A=s.style;let H=A,P=u,q=h,R=!1;Y();const B=o=>{var n;const i=o.clientX-x,c=o.clientY-w;if(!R){if(!(Math.abs(i)>V||Math.abs(c)>V))return o.preventDefault(),!1;R=!0,e.classList.add(G),M&&(l(M)?D=M():(D=s.cloneNode(!0),D.style.opacity="0.3",D.style.pointerEvents="none"),D&&(W&&(D.className=D.className.replace(W,"")+" "+W),null===(n=s.parentNode)||void 0===n||n.appendChild(D),d&&d({clone:D},o)),H=null==D?void 0:D.style),I(),F(e.dataset.cursor||""),r&&r({w:u,h:h},o)}let p=u,O=h,A=v,Y=f;return m&&(p=u+i*(y?-1:1),L&&p<L&&(p=L),C&&p>C&&(p=C)),g&&(O=h+c*(b?-1:1),E&&O<E&&(O=E),S&&O>S&&(O=S)),b&&(A=v+c,z&&A<z&&(A=z),k&&A>k&&(A=k)),y&&(Y=f+i,T&&Y<T&&(Y=T),$&&Y>$&&(Y=$)),N?(m&&(H.width=p+"px",H.height=p/N+"px"),g&&"sw"!==t&&("nw"===t?A=v-p/N+h:(H.width=O*N+"px",H.height=O+"px"))):(m&&(H.width=p+"px"),g&&(H.height=O+"px")),b&&(H.top=A+"px"),y&&(H.left=Y+"px"),P=p,q=O,a&&a({w:p,h:O},o),o.preventDefault(),!1},_=t=>{var o,n;document.removeEventListener("mousemove",B,!1),document.removeEventListener("mouseup",_,!1),window.removeEventListener("blur",_,!1),M&&D&&((null===(o=s.parentNode)||void 0===o?void 0:o.contains(D))&&(null===(n=s.parentNode)||void 0===n||n.removeChild(D)),A.left=D.style.left,A.top=D.style.top,A.width=D.style.width,A.height=D.style.height),R&&(e.classList.remove(G),O(),X(),c&&c({w:P,h:q},t))};return document.addEventListener("mousemove",B,!1),document.addEventListener("mouseup",_,!1),window.addEventListener("blur",_,!1),p.preventDefault(),!1}}(a,r,e,t),a.style.cssText=`position: absolute;cursor: ${r}-resize;`+c,a.dataset.cursor=`${r}-resize`,e.appendChild(a)}))}(e,this.opts)}))}}function K(e,t){return new J(e,t)}var Q;const ee={},te="uii-draggable-active",se="uii-draggable-ghost";class oe extends k{constructor(e,s){super(e,y({container:!1,threshold:0,ghost:!1,direction:"",scroll:!0,snapOptions:{tolerance:10}},s)),Q.set(this,new WeakMap),this.opts.handle&&p(this.ele,(e=>{const t=e.querySelector(this.opts.handle);if(!t)return console.error('No handle found "'+this.opts.handle+'"'),!1;T(this,Q,"f").set(e,t)})),this.onOptionChanged(this.opts),this.opts.group&&(ee[this.opts.group]||(ee[this.opts.group]=[]),ee[this.opts.group].push(...this.ele)),p(this.ele,(e=>{!function(e,s,n,r){e(s,"mousedown",(e=>{var a;let d=e.currentTarget,u=e.target;if(!u)return;let h=r.get(d);if(h&&!h.contains(u))return;const f=n.filter;if(f&&v(s.querySelectorAll(f),(e=>e.contains(u))))return;const m=window.getComputedStyle(d),g=d.offsetParent||document.body,y=n.container,b=n.threshold||0,w=n.ghost,C=n.ghostClass,S=n.direction,T=n.onStart,z=n.onDrag,$=n.onEnd,k=n.onClone,D=m.zIndex;let N=n.zIndex||D;const A=n.classes||"",H=n.group;if(H){let e=-1;p(ee[H],(t=>{const s=parseInt(window.getComputedStyle(t).zIndex)||0;s>e&&(e=s)})),N=e+1}const P=n.scroll,q=n.scrollSpeed||10;let R,B;const _=n.grid;o(_)?(R=_[0],B=_[1]):i(_)&&(R=B=_);const j=n.snap;let V;const U=(null===(a=n.snapOptions)||void 0===a?void 0:a.tolerance)||10,Z=n.onSnap;let G="",J="",K="",Q=0,oe=0;j&&(V=c(document.querySelectorAll(j),(e=>{let t=0,s=0;return L(e,(e=>(t+=e.offsetLeft,s+=e.offsetTop,!1)),"offsetParent"),{x1:t,y1:s,x2:t+e.offsetWidth,y2:s+e.offsetHeight,el:e}})),L(d,((e,t)=>(t>0&&(Q+=e.offsetLeft,oe+=e.offsetTop),!1)),"offsetParent"));const ne=d.offsetWidth+parseFloat(m.borderLeftWidth)+parseFloat(m.borderRightWidth),ie=d.offsetHeight+parseFloat(m.borderTopWidth)+parseFloat(m.borderBottomWidth);let le=0,re=0,ae=0,ce=0;y&&(ae=g.scrollWidth-ne,ce=g.scrollHeight-ie),ae<0&&(ae=0),ce<0&&(ce=0);const de=g.getBoundingClientRect(),pe=M(u,g),ue=e.offsetX||0,he=e.offsetY||0;let fe=pe.x+ue+g.scrollLeft,ve=pe.y+he+g.scrollTop,me=ue,ge=e.offsetY;if(e.target!==d){const e=M(u,d),t=window.getComputedStyle(u);me=e.x+ue+parseFloat(t.borderLeftWidth),ge=e.y+he+parseFloat(t.borderTopWidth)}const ye=n.cursorAt;if(ye){const e=ye.left,s=ye.top;me=t(e)?parseFloat(e)/100*d.offsetWidth:e,ge=t(s)?parseFloat(s)/100*d.offsetWidth:s}const be=d.style;let xe,we=!1,Le=null,Ee=!1,Ce=!1,Se=!1,Te=!1;Y();const ze=e=>{var t;const s=e.clientX-de.x+g.scrollLeft,o=e.clientY-de.y+g.scrollTop;let r=s-fe,a=o-ve;if(!we){if(!(Math.abs(r)>b||Math.abs(a)>b))return e.preventDefault(),!1;{we=!0,w&&(l(w)?xe=w(d):(xe=d.cloneNode(!0),xe.style.opacity="0.3",xe.style.pointerEvents="none",xe.style.position="absolute"),xe.style.left=d.style.left,xe.style.top=d.style.top,xe.style.zIndex=N+"",C&&xe.classList.add(...E(x(C," "))),xe.classList.add(...E(x(A," "))),xe.classList.toggle(se,!0),null===(t=d.parentNode)||void 0===t||t.appendChild(xe),k&&k({clone:xe},e)),d.classList.add(...E(x(A," "))),xe||(d.style.zIndex=N+""),d.classList.toggle(te,!0),T&&T({draggable:d},e),I(),n.cursor&&F(n.cursor.active||"move");const s=new Event("uii-dragactive",{bubbles:!0,cancelable:!1});d.dispatchEvent(s)}}if(P){const t=e.clientX-de.x,s=e.clientY-de.y,o=de.x+de.width-e.clientX,n=de.y+de.height-e.clientY;Ee=t<W,Ce=s<W,Se=o<W,Te=n<W,Ee||Ce||Se||Te?Le||(Le=setInterval((()=>{Ee?g.scrollLeft-=q:Se&&(g.scrollLeft+=q),Ce?g.scrollTop-=q:Te&&(g.scrollTop+=q)}),20)):Le&&(clearInterval(Le),Le=null)}let c=s-me,u=o-ge;i(R)&&i(B)&&(c=(c/R>>0)*R,u=(u/B>>0)*B),y&&(c<le&&(c=le),u<re&&(u=re),c>ae&&(c=ae),u>ce&&(u=ce));let h=!0,f=!1;if(j){const t=Q+c,s=oe+u,o=t+ne,n=s+ie;let i,l,r,a,h=NaN,v=NaN;S&&"v"!==S||p(V,(e=>{if(Math.abs(e.y1-s)<=U?(v=e.y1,a="t2t"):Math.abs(e.y2-s)<=U?(v=e.y2,a="t2b"):Math.abs(e.y1-n)<=U?(v=e.y1-ie,a="b2t"):Math.abs(e.y2-n)<=U&&(v=e.y2-ie,a="b2b"),v)return G=a,l=e.el,!1})),S&&"h"!==S||p(V,(e=>{if(Math.abs(e.x1-t)<=U?(h=e.x1,r="l2l"):Math.abs(e.x2-t)<=U?(h=e.x2,r="l2r"):Math.abs(e.x1-o)<=U?(h=e.x1-ne,r="r2l"):Math.abs(e.x2-o)<=U&&(h=e.x2-ne,r="r2r"),h)return J=r,i=e.el,!1})),h||v?(h&&(c=h-Q),v&&(u=v-oe),Z&&K!==J+""+G&&(setTimeout((()=>{Z({el:xe||d,targetH:i,targetV:l,dirH:r,dirV:a},e)}),0),K=J+""+G),f=!0):J=G=K=""}return z&&!f&&!1===z({draggable:d,ox:r,oy:a,x:c,y:u},e)&&(h=!1),h&&(xe?"v"===S?xe.style.top=`${u}px`:"h"===S?xe.style.left=`${c}px`:(xe.style.left=`${c}px`,xe.style.top=`${u}px`):"v"===S?be.top=`${u}px`:"h"===S?be.left=`${c}px`:(be.left=`${c}px`,be.top=`${u}px`)),e.preventDefault(),!1},$e=e=>{var t,s;document.removeEventListener("mousemove",ze),document.removeEventListener("mouseup",$e),window.removeEventListener("blur",$e),P&&Le&&(clearInterval(Le),Le=null),d.classList.remove(...E(x(A," "))),d.style.zIndex=D,d.classList.remove(te);let o=!0;we&&$&&(o=!1!==$({draggable:d},e));const n=new Event("uii-dragdeactive",{bubbles:!0,cancelable:!1});d.dispatchEvent(n),we&&(O(),X(),w&&((null===(t=d.parentNode)||void 0===t?void 0:t.contains(xe))&&(null===(s=d.parentNode)||void 0===s||s.removeChild(xe)),!1!==o&&(be.left=xe.style.left,be.top=xe.style.top)))};return document.addEventListener("mousemove",ze),document.addEventListener("mouseup",$e),window.addEventListener("blur",$e),e.preventDefault(),!1}))}(this.registerEvent.bind(this),e,this.opts,T(this,Q,"f")),r(this.opts.type)&&(e.dataset.dropType=this.opts.type),e.classList.toggle("uii-draggable",!0);(T(this,Q,"f").get(e)||e).classList.toggle("uii-draggable-handle",!0),r(this.opts.cursor)&&(e.style.cursor=this.opts.cursor.default||"move",r(this.opts.cursor.over)&&(e.dataset.cursorOver=this.opts.cursor.over,e.dataset.cursorActive=this.opts.cursor.active||"move"))}))}onOptionChanged(o){const n=o.droppable;l(n)||(a(n)?o.droppable=()=>{}:t(n)?o.droppable=()=>document.querySelectorAll(n):e(n)?o.droppable=()=>n:s(n)&&(o.droppable=()=>[n]))}}function ne(e,t){return new oe(e,t)}var ie;Q=new WeakMap;const le=[];class re extends k{constructor(e,t){super(e,y({},t)),ie.set(this,void 0),le.push(this)}bindEvent(e,t){this.registerEvent(e,"mouseenter",(s=>{T(this,ie,"f")&&(t.hoverClass&&p(x(t.hoverClass," "),(t=>{e.classList.toggle(t,!0)})),T(this,ie,"f").dataset.cursorOver&&F(T(this,ie,"f").dataset.cursorOver),t.onEnter&&t.onEnter({draggable:T(this,ie,"f"),droppable:e},s))})),this.registerEvent(e,"mouseleave",(s=>{T(this,ie,"f")&&(t.hoverClass&&p(x(t.hoverClass," "),(t=>{e.classList.toggle(t,!1)})),T(this,ie,"f").dataset.cursorOver&&F(T(this,ie,"f").dataset.cursorActive||""),t.onLeave&&t.onLeave({draggable:T(this,ie,"f"),droppable:e},s))})),this.registerEvent(e,"mousemove",(s=>{T(this,ie,"f")&&t.onOver&&t.onOver({draggable:T(this,ie,"f"),droppable:e},s)})),this.registerEvent(e,"mouseup",(s=>{T(this,ie,"f")&&(t.hoverClass&&p(x(t.hoverClass," "),(t=>{e.classList.toggle(t,!1)})),t.onDrop&&t.onDrop({draggable:T(this,ie,"f"),droppable:e},s))}))}active(e){let s=!0;const o=this.opts;t(o.accepts)?s=!!e.dataset.dropType&&w(o.accepts,e.dataset.dropType):l(o.accepts)&&(s=o.accepts(this.ele,e)),s&&(z(this,ie,e,"f"),o.activeClass&&p(this.ele,(e=>{p(x(o.activeClass||""," "),(t=>{e.classList.toggle(t,!0)}))})),o.onActive&&o.onActive({draggable:e,droppables:this.ele}),p(this.ele,(e=>{e.classList.toggle("uii-droppable",!0),e.style.pointerEvents="initial",this.bindEvent(e,o)})))}deactive(e){if(!T(this,ie,"f"))return;z(this,ie,null,"f");const t=this.opts;t.activeClass&&p(this.ele,(e=>{p(x(t.activeClass||""," "),(t=>{e.classList.toggle(t,!1)}))})),t.onDeactive&&t.onDeactive({draggable:e,droppables:this.ele}),this.destroy()}}function ae(e,t){return new re(e,t)}ie=new WeakMap,document.addEventListener("uii-dragactive",(e=>{p(le,(t=>{t.active(e.target)}))})),document.addEventListener("uii-dragdeactive",(e=>{p(le,(t=>{t.deactive(e.target)}))}));const ce=180/Math.PI,de=2,pe="uii-rotatable",ue="uii-rotatable-handle",he="uii-rotatable-active";class fe extends k{constructor(e,t){super(e,t),p(this.ele,(e=>{!function(e,t){var s;const o=document.createElement("div");o.className=ue,o.style.cssText="\n    position:absolute;\n    width:12px;\n    height:12px;\n    border-radius:50%;\n    left: calc(50% - 6px);\n    top: -24px;\n    ",o.style.cursor=(null===(s=t.cursor)||void 0===s?void 0:s.default)||"crosshair",function(e,t,s){const o=s.onStart,n=s.onRotate,i=s.onEnd;e.onmousedown=function(e){var l,a;const c=(window.getComputedStyle(t).transformOrigin||"").split(" "),d=t.cloneNode();d.style.cssText="transform:rotate(0);z-index:-999;position:absolute;",null===(l=t.parentElement)||void 0===l||l.appendChild(d);const p=d.getBoundingClientRect();null===(a=t.parentElement)||void 0===a||a.removeChild(d);let u=parseFloat(c[0])+p.x,h=parseFloat(c[1])+p.y,f=0,v=0;const m=window.getComputedStyle(t).transform;if(m.indexOf("matrix")>-1){const e=m.replace(/^matrix\(|\)$/gm,"").split(",");f=parseFloat(e[0]),v=parseFloat(e[1])}let g=Math.atan2(v,f)*ce;g<0&&(g=360-g),g>360&&(g=360-g%360);const y=t.style;let b=Math.atan2(e.clientY-h,e.clientX-u)*ce+90;b<0&&(b=360+b);const x=b-g;let w=!1;Y();const L=e=>{var i;const l=e.clientX-u,a=e.clientY-h;if(!w){if(!(Math.abs(l)>de||Math.abs(a)>de))return e.preventDefault(),!1;w=!0,t.classList.toggle(he,!0),o&&o({deg:g},e),I(),r(s.cursor)&&F((null===(i=s.cursor)||void 0===i?void 0:i.active)||"crosshair")}return g=Math.atan2(a,l)*ce+90-x,g<0&&(g=360+g),n&&n({deg:g},e),y.transform=y.transform.replace(/rotateZ\(.*?\)/,"")+" rotateZ("+g+"deg)",e.preventDefault(),!1},E=e=>{document.removeEventListener("mousemove",L,!1),document.removeEventListener("mouseup",E,!1),window.removeEventListener("blur",E,!1),w&&(O(),X(),t.classList.toggle(he,!1),i&&i({deg:g},e))};return document.addEventListener("mousemove",L,!1),document.addEventListener("mouseup",E,!1),window.addEventListener("blur",E,!1),e.preventDefault(),!1}}(o,e,t),e.classList.toggle(pe,!0),e.appendChild(o)}(e,this.opts)}))}}function ve(e,t){return new fe(e,t)}var me,ge,ye,be,xe;class we{constructor(e,s,o){me.set(this,void 0),z(this,me,s,"f"),this.opts={container:document.body},this.opts=y(this.opts,o);const n=t(e)?document.querySelector(e):e;if(!n)return void console.error('Invalid selector "'+e+'"');const i=n;this.el=n;const l=M(i,this.opts.container),r={x:l.x,y:l.y,width:i.offsetWidth,height:i.offsetHeight};this.elData={x1:r.x,y1:r.y,x2:r.x+r.width,y2:r.y+r.height},this.update()}update(){let e;e=l(T(this,me,"f"))?T(this,me,"f").call(this):t(T(this,me,"f"))?this.opts.container.querySelectorAll(T(this,me,"f")):s(T(this,me,"f"))?[T(this,me,"f")]:T(this,me,"f"),this.targetsData=m(e,(e=>{if(!e)return[];if(!s(e))return[];const t=M(e,this.opts.container),o={x:t.x,y:t.y,width:e.offsetWidth,height:e.offsetHeight};return{x1:o.x,y1:o.y,x2:o.x+o.width,y2:o.y+o.height,el:e}}))}getOverlaps(e,t,s,o){let n=this.elData;return e&&s&&t&&o&&(n={x1:e,y1:t,x2:s,y2:o}),m(this.targetsData,((e,t)=>n.x2<e.x1||n.x1>e.x2||n.y2<e.y1||n.y1>e.y2?[]:e.el))}getInclusions(e,t,s,o){let n=this.elData;return e&&s&&t&&o&&(n={x1:e,y1:t,x2:s,y2:o}),m(this.targetsData,((e,t)=>n.x2>=e.x2&&n.x1<=e.x1&&n.y2>=e.y2&&n.y1<=e.y1?e.el:[]))}}function Le(e,t,s){return new we(e,t,s)}me=new WeakMap;const Ee="uii-selecting",Ce="uii-selected";class Se extends k{constructor(e,t){super(e,y({targets:[],scroll:!0},t)),ge.add(this),ye.set(this,void 0),be.set(this,void 0);const s=this.ele[0],o=document.createElement("div");o.className="uii-selector",o.style.cssText="\n      position:absolute;\n      left:-9999px;\n    ",this.opts.class?o.className+=" "+this.opts.class:o.style.cssText+="border:1px dashed #000;",s.appendChild(o),z(this,ye,Le(o,this.opts.targets,{container:s}),"f"),T(this,ge,"m",xe).call(this,o,s)}updateTargets(){T(this,ye,"f").update()}onOptionChanged(){this.updateTargets()}}function Te(e,t){return new Se(e,t)}var ze;ye=new WeakMap,be=new WeakMap,ge=new WeakSet,xe=function(e,t){const s=this,o=this.opts;this.registerEvent(t,"mousedown",(n=>{const i=n.target,r=o.onStart,a=o.onSelect,c=o.onEnd,d=o.mode||"overlap",u=o.scroll,h=o.scrollSpeed||10,m=o.filter,g=E(x(o.selectingClass," ")),y=E(x(o.selectedClass," "));if(m)if(l(m)){if(m(i))return}else if(v(t.querySelectorAll(m),(e=>e.contains(i))))return;let b="";const w=t.getBoundingClientRect(),L=window.getComputedStyle(t),C=parseFloat(L.borderLeftWidth),S=parseFloat(L.borderTopWidth);let $=n.offsetX+t.scrollLeft,k=n.offsetY+t.scrollTop;if(i!==t){const e=M(i,t),s=window.getComputedStyle(i);$=e.x+n.offsetX+parseFloat(s.borderLeftWidth),k=e.y+n.offsetY+parseFloat(s.borderTopWidth)}const D=e.style;let N=[],I=[],O=$,A=k,Y=!1,F=null,X=!1,H=!1,P=!1,q=!1;const R=e=>{const o=e.clientX-w.x+t.scrollLeft-C,n=e.clientY-w.y+t.scrollTop-S,i=o-$,l=n-k;if(!Y){if(!(Math.abs(i)>2||Math.abs(l)>2))return e.preventDefault(),!1;Y=!0,T(this,ye,"f").update();"static"===window.getComputedStyle(t).position&&(b=t.style.position,t.style.position="relative"),p(T(this,be,"f"),(e=>{e.classList.toggle(Ce,!1)})),r&&r({selection:T(this,be,"f"),selectable:t},e)}if(u){const s=e.clientX-w.x,o=e.clientY-w.y,n=w.x+w.width-e.clientX,i=w.y+w.height-e.clientY;X=s<W,H=o<W,P=n<W,q=i<W,X||H||P||q?F||(F=setInterval((()=>{X?t.scrollLeft-=h:P&&(t.scrollLeft+=h),H?t.scrollTop-=h:q&&(t.scrollTop+=h)}),20)):F&&(clearInterval(F),F=null)}let c=$,v=k,m=Math.abs(i),y=Math.abs(l);i>0&&l>0?(O=$,A=k):i<0&&l<0?(c=O=o,v=A=n):i<0?c=O=o:l<0&&(v=A=n),D.left=c+"px",D.top=v+"px",D.width=m+"px",D.height=y+"px","overlap"===d?N=T(s,ye,"f").getOverlaps(O,A,O+m,A+y):"inclusion"===d&&(N=T(s,ye,"f").getInclusions(O,A,O+m,A+y)),p(I,(e=>{f(N,e)||(e.classList.toggle(Ee,!1),p(g,(t=>{e.classList.toggle(t,!1)})))})),p(N,(e=>{e.classList.toggle(Ee,!0),p(g,(t=>{e.classList.toggle(t,!0)}))}));const x=I.length!=N.length;return I=N,x&&a&&a({selection:N,selectable:t},e),e.preventDefault(),!1},B=e=>{D.left="-9999px",D.width=D.height="0px",document.removeEventListener("mousemove",R,!1),document.removeEventListener("mouseup",B,!1),window.removeEventListener("blur",B,!1),u&&F&&(clearInterval(F),F=null),b&&(t.style.position=b),p(N,(e=>{p(g,(t=>{e.classList.toggle(t,!1)})),p(y,(t=>{e.classList.toggle(t,!0)})),e.classList.toggle(Ee,!1),e.classList.toggle(Ce,!0)})),z(this,be,N,"f"),Y&&c&&c({selection:N,selectable:t},e)};return document.addEventListener("mousemove",R,!1),document.addEventListener("mouseup",B,!1),window.addEventListener("blur",B,!1),n.preventDefault(),!1}))};const $e={},ke="uii-sortable-ghost",Me="uii-sortable-active",We="uii-sortable-active",De=2;class Ne extends k{constructor(e,t){super(e,b({move:{from:!0,to:!0},scroll:!0,sort:!0},t)),ze.set(this,void 0),g(this.ele)>1&&!this.opts.group&&(this.opts.group="uii_sortable_"+S()),p(this.ele,(e=>{e.classList.add("uii-sortable-container"),e.style.position="relative",e.style.pointerEvents="initial",function(e,t,s){e(t,"mousedown",(e=>{var o;let i=e.currentTarget,r=e.target;if(r===i)return;const a=s.filter?`:not(${s.filter})`:"",u=i.querySelectorAll(":scope > *"+a),f=s.handle?c(u,(e=>e.querySelector(s.handle||""))):d(u),v=C(f,(e=>e.contains(r)));if(v<0)return;const m=u[v],g=s.ghostContainer||i,y=s.onStart,b=s.onEnd,w=s.ghostClass,L=s.group;let S=null===(o=s.move)||void 0===o?void 0:o.to;const T="copy"===S,z=(l(S)?S:()=>!!S)(m,i),$=s.sort;s.scroll,s.scrollSpeed;let k=e.offsetX+i.scrollLeft,M=e.offsetY+i.scrollTop;Y();let W=!1,D=null,N=null;const A=e=>{const o=e.clientX,l=e.clientY;let r=o-k,a=l-M;if(!W){if(!(Math.abs(r)>De||Math.abs(a)>De))return e.preventDefault(),!1;{let o;W=!0,D=m.cloneNode(!0),D.style.opacity="0.3",D.style.pointerEvents="none",D.style.position="fixed",D.style.zIndex="999",D.style.left=m.style.left,D.style.top=m.style.top,w&&D.classList.add(...E(x(w," "))),D.classList.toggle(ke,!0),g.appendChild(D),T||m.classList.toggle(Me,!0),T&&(o=m.cloneNode(!0),o.classList.toggle(Me,!0)),Ie={item:m,fromIndex:v,fromContainer:i,toContainer:i,moveTo:T?"copy":z,spill:s.spill,copy:o},y&&y({item:m,from:i,index:v},e),I(),$&&(N=Oe(s,i,T?m:o,u,v)),z&&L&&$e[L]&&p($e[L],(([e,s])=>{const i=h(s,(e=>e===t));n(i)||e.active(T?m:o,t,i,e.getOptions())}))}}return D.style.left=o+"px",D.style.top=l+"px",e.preventDefault(),!1},F=s=>{var o;if(document.removeEventListener("mousemove",A),document.removeEventListener("mouseup",F),window.removeEventListener("blur",F),W){O(),X(),D&&g.removeChild(D);const s=null==Ie?void 0:Ie.toContainer;null==Ie||Ie.item.classList.remove(Me),null===(o=null==Ie?void 0:Ie.copy)||void 0===o||o.classList.remove(Me),Ie=null,N&&N(),L&&$e[L]&&p($e[L],(([e,s])=>{const o=h(s,(e=>e===t));n(o)||e.deactive(m,t,o,e.getOptions())})),b&&b({item:m,from:t,to:s},e)}};return document.addEventListener("mousemove",A),document.addEventListener("mouseup",F),window.addEventListener("blur",F),e.preventDefault(),!1})),e(t,"mouseleave",(e=>{var o,n;if(Ie&&(s.onLeave&&s.onLeave({item:Ie.item,from:Ie.fromContainer,to:t},e),"copy"!==Ie.moveTo))if("remove"===Ie.spill)null===(o=Ie.item.parentElement)||void 0===o||o.removeChild(Ie.item);else if("revert"===Ie.spill){null===(n=Ie.item.parentElement)||void 0===n||n.removeChild(Ie.item);const e=Ie.fromContainer.children[Ie.fromIndex];Ie.fromContainer.insertBefore(Ie.item,e)}})),e(t,"mouseenter",(e=>{var o;if(!Ie)return;let n=Ie.item;n.parentElement;const i=e.clientX,r=e.clientY,a=t.getBoundingClientRect(),c=a.width/2,d=a.height/2,p=i-a.x,u=r-a.y;let h="";if(p<c&&u<d?h="tl":p>c&&u>d?h="br":p<c&&u>d?h="bl":p>c&&u<d&&(h="tr"),s.onEnter&&s.onEnter({item:Ie.item,from:Ie.fromContainer,to:t,dir:h},e),Ie.toContainer=t,t.getAttribute(We)){let i=!0;const r=null===(o=s.move)||void 0===o?void 0:o.from;if(i=(l(r)?r:()=>!!r)(Ie.item,Ie.fromContainer,t),!i)return;if(t.contains(n))return;"copy"===Ie.moveTo&&(n=Ie.copy),n.parentElement&&n.parentElement.removeChild(n);let a=0;"t"===h[0]?t.insertBefore(n,t.children[0]):(t.appendChild(n),a=t.children.length-1),s.onAdd&&s.onAdd({item:n,from:Ie.fromContainer,to:t,index:a},e)}else if(t===Ie.fromContainer)if(Ie.copy){let e=Ie.copy.parentElement;e&&e.removeChild(null==Ie?void 0:Ie.copy)}else n.parentElement&&n.parentElement.removeChild(n),"t"===h[0]?t.insertBefore(n,t.children[0]):(t.appendChild(n),t.children.length)}))}(this.registerEvent.bind(this),e,this.opts)})),this.opts.group&&($e[this.opts.group]||($e[this.opts.group]=[]),$e[this.opts.group].push([this,this.ele]))}active(e,t,s,o){var n;const i=null===(n=o.move)||void 0===n?void 0:n.from,r=l(i)?i:()=>!!i,a=m(s,(s=>r(e,t,s)?s:[]));p(a,(e=>{e.setAttribute(We,"1"),o.activeClass&&p(x(o.activeClass||""," "),(t=>{e.classList.toggle(t,!0)}))})),z(this,ze,c(a,(t=>{const s=t.querySelectorAll(":scope > *");return Oe(o,t,e,s)})),"f"),o.onActive&&o.onActive({item:e,from:t})}deactive(e,t,s,o){p(s,(e=>{e.removeAttribute(We),o.activeClass&&p(x(o.activeClass||""," "),(t=>{e.classList.toggle(t,!1)}))})),p(T(this,ze,"f"),(e=>{e()})),o.onDeactive&&o.onDeactive({item:e,from:t})}onOptionChanged(){}}ze=new WeakMap;let Ie=null;function Oe(e,t,s,o,n=0){const i=s=>{const o=s.currentTarget;if(o.style.transform)return;const i=o._uiik_i;let l=(null==Ie?void 0:Ie.copy)||(null==Ie?void 0:Ie.item);t===(null==Ie?void 0:Ie.fromContainer)&&(l=null==Ie?void 0:Ie.item);let r=l.parentElement;null==r||r.removeChild(l);r===o.parentElement||(r=o.parentElement);const a=n;i>n?(n=i,null==r||r.insertBefore(l,o.nextElementSibling)):(n=i-1,null==r||r.insertBefore(l,o)),e.onChange&&e.onChange({item:l,from:null==Ie?void 0:Ie.fromContainer,to:t,fromIndex:a,toIndex:n},s);const c=o.offsetLeft,d=o.offsetTop,p=l.offsetLeft,u=l.offsetTop;o.style.transform=`translate3d(${p-c}px,${u-d}px,0)`,l.style.transform=`translate3d(${c-p}px,${d-u}px,0)`,l.offsetHeight,o.offsetHeight,l.style.transition="transform .15s",l.style.transform="translate3d(0px,0px,0)",o.style.transition="transform .15s",o.style.transform="translate3d(0px,0px,0)",setTimeout((()=>{o.style.transition="",o.style.transform="",l.style.transition="",l.style.transform=""}),150),s.stopPropagation(),s.preventDefault()};return p(o,((e,t)=>{e.style.position="relative",e!==s&&(e.style.pointerEvents="initial",e._uiik_i=t,e.addEventListener("mouseenter",i))})),()=>{p(o,((e,t)=>{e!==s&&e.removeEventListener("mouseenter",i)}))}}function Ae(e,t){return new Ne(e,t)}var Ye="1.1.0";if(!globalThis.welcome){const e=[];["102,227,255","59,208,251","67,180,255"].forEach(((t,s)=>{const o="background:rgb("+t+");";e[s]=s<2?e[4-s]=o:"color:#fff;"+o})),console.info(`%c %c %c Uiik - UI interactions kit | v${Ye} %c %c `,...e,"💎 https://github.com/holyhigh2/uiik"),globalThis.welcome=!0}const Fe=Ye;var Xe={VERSION:Ye,newSplittable:j,newResizable:K,newDraggable:ne,newDroppable:ae,newRotatable:ve,newSelectable:Te,newSortable:Ae};export{we as CollisionDetector,oe as Draggable,re as Droppable,J as Resizable,fe as Rotatable,Se as Selectable,Ne as Sortable,_ as Splittable,k as Uii,Fe as VERSION,Xe as default,Le as newCollisionDetector,ne as newDraggable,ae as newDroppable,K as newResizable,ve as newRotatable,Te as newSelectable,Ae as newSortable,j as newSplittable};
+import { isDefined, isArrayLike, isString, isElement, isEmpty, isArray, isNumber, isFunction, isBoolean, isUndefined } from 'myfx/is';
+import { find, map, toArray, each, reject, includes, some, flatMap, size } from 'myfx/collection';
+import { get, assign, merge } from 'myfx/object';
+import { split, test } from 'myfx/string';
+import { compact, findIndex } from 'myfx/array';
+import 'myfx';
+import { alphaId } from 'myfx/utils';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __classPrivateFieldGet(receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+}
+
+function __classPrivateFieldSet(receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+const UtMap = new WeakMap();
+const EXP_MATRIX$1 = /matrix\((?<a>[\d-.]+)\s*,\s*(?<b>[\d-.]+)\s*,\s*(?<c>[\d-.]+)\s*,\s*(?<d>[\d-.]+)\s*,\s*(?<x>[\d-.]+)\s*,\s*(?<y>[\d-.]+)\)/gim;
+class UiiTransformer {
+    constructor(el) {
+        this.angle = 0;
+        this.el = el;
+        this.normalize(el);
+        UtMap.set(el, this);
+    }
+    normalize(el) {
+        let { x, y } = normalize(el);
+        this.x = x;
+        this.y = y;
+        return this;
+    }
+    moveTo(x, y) {
+        this.x = x;
+        this.y = y;
+        moveTo(this.el, this.x, this.y);
+    }
+    moveToX(x) {
+        this.x = x;
+        moveTo(this.el, this.x, this.y);
+    }
+    moveToY(y) {
+        this.y = y;
+        moveTo(this.el, this.x, this.y);
+    }
+}
+function normalize(el) {
+    const style = window.getComputedStyle(el);
+    let x = 0, y = 0;
+    if (el instanceof HTMLElement) {
+        x = (parseFloat(style.left) || 0) + (parseFloat(style.marginLeft) || 0);
+        y = (parseFloat(style.top) || 0) + (parseFloat(style.marginTop) || 0);
+        el.style.setProperty("left", "0", "important");
+        el.style.setProperty("top", "0", "important");
+        el.style.setProperty("margin", "0", "important");
+    }
+    else {
+        x = parseFloat(style.x || style.cx) || 0;
+        y = parseFloat(style.y || style.cy) || 0;
+        el.removeAttribute("x");
+        el.removeAttribute("y");
+        el.removeAttribute("cx");
+        el.removeAttribute("cy");
+    }
+    EXP_MATRIX$1.lastIndex = 0;
+    const rs = EXP_MATRIX$1.exec(window.getComputedStyle(el).transform);
+    if (rs && rs.groups) {
+        x += parseFloat(rs.groups.x) || 0;
+        y += parseFloat(rs.groups.y) || 0;
+    }
+    moveTo(el, x, y);
+    return { x, y };
+}
+function wrapper(el) {
+    let ut = UtMap.get(el);
+    if (ut)
+        return ut.normalize(el);
+    return new UiiTransformer(el);
+}
+function transformMove(transofrmStr, x, y, unit = false) {
+    return (`translate(${x}${unit ? "px" : ""},${y}${unit ? "px" : ""})` +
+        transofrmStr.replace(/translate\([^)]+?\)/, ""));
+}
+function getTranslate(el) {
+    let xVal = NaN, yVal = NaN;
+    let transformStr = "";
+    if (el instanceof SVGGraphicsElement) {
+        transformStr = el.getAttribute("transform") || "";
+    }
+    else {
+        let style = el.style;
+        transformStr = style.transform || "";
+    }
+    EXP_GET_TRANSLATE.lastIndex = 0;
+    const xy = EXP_GET_TRANSLATE.exec(transformStr);
+    if (xy && xy.groups) {
+        xVal = parseFloat(xy.groups.x);
+        yVal = parseFloat(xy.groups.y);
+    }
+    else {
+        EXP_GET_TRANSLATE_XY.lastIndex = 0;
+        const xy = EXP_GET_TRANSLATE_XY.exec(transformStr);
+        if (xy && xy.groups) {
+            if (xy.groups.dir == "X") {
+                xVal = parseFloat(xy.groups.v);
+            }
+            else {
+                yVal = parseFloat(xy.groups.v);
+            }
+        }
+    }
+    return { x: xVal, y: yVal };
+}
+function moveTo(el, x, y) {
+    if (el instanceof SVGGraphicsElement) {
+        el.setAttribute("transform", transformMove(el.getAttribute("transform") || "", x, y));
+    }
+    else {
+        let style = el.style;
+        style.transform = transformMove(style.transform || "", x, y, true);
+    }
+}
+const EXP_GET_TRANSLATE = /translate\(\s*(?<x>[\d.-]+)\D*,\s*(?<y>[\d.-]+)\D*\)/gim;
+const EXP_GET_TRANSLATE_XY = /translate(?<dir>X|Y)\(\s*(?<v>[\d.-]+)\D*\)/gim;
+function moveBy(el, x, y) {
+    const xy = getTranslate(el);
+    if (el instanceof SVGGraphicsElement) {
+        el.setAttribute("transform", transformMove(el.getAttribute("transform") || "", xy.x + x, xy.y + y));
+    }
+    else {
+        let style = el.style;
+        style.transform = transformMove(style.transform || "", xy.x + x, xy.y + y, true);
+    }
+}
+function rotateTo(el, deg, cx, cy) {
+    if (el instanceof SVGGraphicsElement) {
+        let transformStr = el.getAttribute("transform") || "";
+        let originPos = isDefined(cx) && isDefined(cy);
+        let origin = "";
+        if (originPos) {
+            if (el.x instanceof SVGAnimatedLength) {
+                cx += el.x.animVal.value;
+                cy += el.y.animVal.value;
+            }
+            else if (el.cx instanceof SVGAnimatedLength) {
+                cx += el.cx.animVal.value;
+                cy += el.cy.animVal.value;
+            }
+            origin = `,${cx},${cy}`;
+        }
+        transformStr =
+            transformStr.replace(/rotate\([^)]+?\)/, "") + ` rotate(${deg}${origin})`;
+        el.setAttribute("transform", transformStr);
+    }
+    else {
+        let style = el.style;
+        style.transform =
+            style.transform.replace(/rotate\([^)]+?\)/, "").replace(/rotateZ\([^)]+?\)/, "") +
+                " rotateZ(" +
+                deg +
+                "deg)";
+    }
+}
+
+const ONE_ANG = Math.PI / 180;
+const ONE_RAD = 180 / Math.PI;
+function getBox(child, parent) {
+    const rect = child.getBoundingClientRect();
+    const rs = { x: 0, y: 0, w: rect.width, h: rect.height };
+    parent =
+        parent ||
+            child.offsetParent ||
+            child.ownerSVGElement ||
+            child.parentElement ||
+            document.body;
+    const parentRect = parent.getBoundingClientRect();
+    const parentStyle = window.getComputedStyle(parent);
+    const parentBorderLeft = parseFloat(parentStyle.borderLeftWidth);
+    const parentBorderTop = parseFloat(parentStyle.borderTopWidth);
+    rs.x = rect.x - parentRect.x + parent.scrollLeft;
+    rs.y = rect.y - parentRect.y + parent.scrollTop;
+    if (child instanceof SVGElement) ;
+    else {
+        rs.x -= parentBorderLeft;
+        rs.y -= parentBorderTop;
+    }
+    return rs;
+}
+function getPointOffset(e, pos) {
+    let ox = e.offsetX || 0, oy = e.offsetY || 0;
+    if (e.target instanceof SVGElement) {
+        ox -= pos.x;
+        oy -= pos.y;
+    }
+    return [ox, oy];
+}
+function isSVGEl(el) {
+    return el instanceof SVGElement;
+}
+const EDGE_THRESHOLD = 5;
+const DRAGGING_RULE = "body * { pointer-events: none; }";
+let lockSheet;
+function lockPage() {
+    lockSheet = getFirstSS();
+    lockSheet === null || lockSheet === void 0 ? void 0 : lockSheet.insertRule(DRAGGING_RULE, 0);
+}
+function unlockPage() {
+    lockSheet === null || lockSheet === void 0 ? void 0 : lockSheet.deleteRule(0);
+}
+function getFirstSS() {
+    if (document.styleSheets.length < 1) {
+        document.head.appendChild(document.createElement("style"));
+    }
+    const sheet = find(document.styleSheets, (ss) => !ss.href);
+    if (!sheet) {
+        document.head.appendChild(document.createElement("style"));
+    }
+    return sheet || find(document.styleSheets, (ss) => !ss.href);
+}
+let cursor = { html: "", body: "" };
+function saveCursor() {
+    cursor.body = document.body.style.cursor;
+    cursor.html = document.documentElement.style.cursor;
+}
+function setCursor(cursor) {
+    document.body.style.cursor = document.documentElement.style.cursor = cursor;
+}
+function restoreCursor() {
+    document.body.style.cursor = cursor.body;
+    document.documentElement.style.cursor = cursor.html;
+}
+function getStyleXy(el) {
+    const style = window.getComputedStyle(el);
+    let x = 0, y = 0;
+    if (el instanceof SVGGraphicsElement) {
+        x = parseFloat(style.x || style.cx) || 0;
+        y = parseFloat(style.y || style.cy) || 0;
+    }
+    else {
+        x = parseFloat(style.left) || 0;
+        y = parseFloat(style.top) || 0;
+    }
+    return { x, y };
+}
+const EXP_MATRIX = /matrix\((?<a>[\d.-]+)\s*,\s*(?<b>[\d.-]+)\s*,\s*(?<c>[\d.-]+)\s*,\s*(?<d>[\d.-]+)\s*,\s*(?<x>[\d.-]+)\s*,\s*(?<y>[\d.-]+)\s*\)/;
+function getMatrixInfo(elCStyle) {
+    let a = 1, b = 0, x = 0, y = 0;
+    let e = undefined, f = undefined;
+    if (elCStyle instanceof SVGGraphicsElement) {
+        const transMatrix = elCStyle.transform.animVal[0];
+        if (transMatrix) {
+            e = transMatrix.matrix.e;
+            f = transMatrix.matrix.f;
+        }
+        elCStyle = window.getComputedStyle(elCStyle);
+    }
+    else {
+        if (elCStyle instanceof HTMLElement) {
+            elCStyle = window.getComputedStyle(elCStyle);
+        }
+    }
+    const matched = elCStyle.transform.match(EXP_MATRIX);
+    if (matched && matched.groups) {
+        a = parseFloat(matched.groups.a);
+        b = parseFloat(matched.groups.b);
+        parseFloat(matched.groups.c);
+        parseFloat(matched.groups.d);
+        x = parseFloat(matched.groups.x);
+        y = parseFloat(matched.groups.y);
+    }
+    if (e && f) {
+        x = e;
+        y = f;
+    }
+    const rs = { scale: 1, angle: 0, x, y };
+    rs.scale = Math.sqrt(a * a + b * b);
+    rs.angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
+    return rs;
+}
+function getPointInContainer(event, el, elRect, elCStyle, matrixInfo) {
+    if (!elRect) {
+        elRect = el.getBoundingClientRect();
+    }
+    if (!elCStyle) {
+        elCStyle = window.getComputedStyle(el);
+    }
+    if (!matrixInfo) {
+        matrixInfo = getMatrixInfo(elCStyle);
+    }
+    const scale = matrixInfo.scale;
+    let x = event.clientX -
+        elRect.x -
+        (parseFloat(elCStyle.borderLeftWidth) || 0) * scale +
+        el.scrollLeft * scale;
+    let y = event.clientY -
+        elRect.y -
+        (parseFloat(elCStyle.borderTopWidth) || 0) * scale +
+        el.scrollTop * scale;
+    return { x: x / scale, y: y / scale };
+}
+function getRectInContainer(el, container) {
+    const elRect = el.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    const elCStyle = window.getComputedStyle(container);
+    const matrixInfo = getMatrixInfo(elCStyle);
+    const scale = matrixInfo.scale;
+    let x = elRect.x -
+        containerRect.x -
+        (parseFloat(elCStyle.borderLeftWidth) || 0) * scale +
+        container.scrollLeft * scale;
+    let y = elRect.y -
+        containerRect.y -
+        (parseFloat(elCStyle.borderTopWidth) || 0) * scale +
+        container.scrollTop * scale;
+    return {
+        x: x / scale,
+        y: y / scale,
+        w: elRect.width / scale,
+        h: elRect.height / scale,
+    };
+}
+function getCenterXy(el) {
+    const cStyle = window.getComputedStyle(el);
+    const center = cStyle.transformOrigin;
+    const centerPair = center.split(" ");
+    const ox = parseFloat(centerPair[0]);
+    const oy = parseFloat(centerPair[1]);
+    const shadowDom = el.cloneNode();
+    rotateTo(shadowDom, 0);
+    const parentEl = el.parentElement;
+    let startX = 0, startY = 0;
+    if (parentEl) {
+        parentEl.appendChild(shadowDom);
+        const offsetXY = getRectInContainer(shadowDom, parentEl);
+        (startX = offsetXY.x), (startY = offsetXY.y);
+        parentEl.removeChild(shadowDom);
+    }
+    return { sx: startX, sy: startY, x: startX + ox, y: startY + oy, ox, oy };
+}
+
+var _Uii_listeners;
+class Uii {
+    constructor(ele, opts) {
+        this.enabled = true;
+        _Uii_listeners.set(this, []);
+        this.opts = opts || {};
+        if (isArrayLike(ele) && !isString(ele)) {
+            this.ele = map(ele, (el) => {
+                let e = isString(el) ? document.querySelector(el) : el;
+                if (!isElement(e)) {
+                    console.error('Invalid element "' + el + '"');
+                    return false;
+                }
+                return e;
+            });
+        }
+        else {
+            if (isString(ele)) {
+                this.eleString = ele;
+            }
+            const el = isString(ele) ? document.querySelectorAll(ele) : ele;
+            if (!isElement(el) && !isArrayLike(el)) {
+                console.error('Invalid element "' + ele + '"');
+                return;
+            }
+            this.ele = isArrayLike(el) ? toArray(el) : [el];
+        }
+    }
+    destroy() {
+        each(__classPrivateFieldGet(this, _Uii_listeners, "f"), (ev) => {
+            ev[0].removeEventListener(ev[1], ev[2], ev[3]);
+        });
+        __classPrivateFieldSet(this, _Uii_listeners, [], "f");
+    }
+    addPointerDown(el, pointerDown, opts) {
+        const onPointerDown = pointerDown;
+        const threshold = opts.threshold || 0;
+        const toLockPage = opts.lockPage || false;
+        const uiiOptions = this.opts;
+        this.registerEvent(el, 'mousedown', (e) => {
+            let t = e.target;
+            if (!t)
+                return;
+            const hasCursor = !isEmpty(get(uiiOptions, 'cursor.active'));
+            const currentStyle = el.style;
+            const currentCStyle = window.getComputedStyle(el);
+            const currentRect = el.getBoundingClientRect();
+            let dragging = false;
+            const originPosX = e.clientX;
+            const originPosY = e.clientY;
+            if (hasCursor) {
+                saveCursor();
+            }
+            let onPointerStart;
+            let onPointerMove;
+            let onPointerEnd;
+            onPointerDown({
+                onPointerMove: (pm) => { onPointerMove = pm; },
+                onPointerStart: (ps) => { onPointerStart = ps; },
+                onPointerEnd: (pe) => { onPointerEnd = pe; },
+                ev: e,
+                pointX: e.clientX, pointY: e.clientY, target: t,
+                currentTarget: el, currentStyle, currentCStyle, currentRect
+            });
+            const pointerMove = (ev) => {
+                const offX = ev.clientX - originPosX;
+                const offY = ev.clientY - originPosY;
+                if (!dragging) {
+                    if (Math.abs(offX) > threshold || Math.abs(offY) > threshold) {
+                        dragging = true;
+                        if (toLockPage) {
+                            lockPage();
+                        }
+                        if (hasCursor) {
+                            setCursor(uiiOptions.cursor.active);
+                        }
+                        onPointerMove && onPointerStart({ ev });
+                    }
+                    else {
+                        ev.preventDefault();
+                        return false;
+                    }
+                }
+                onPointerMove && onPointerMove({ ev, pointX: ev.clientX, pointY: ev.clientY, offX, offY, currentStyle, currentCStyle });
+            };
+            const pointerEnd = (ev) => {
+                document.removeEventListener('mousemove', pointerMove, false);
+                document.removeEventListener('mouseup', pointerEnd, false);
+                window.removeEventListener('blur', pointerEnd, false);
+                if (dragging) {
+                    if (toLockPage) {
+                        unlockPage();
+                    }
+                    if (hasCursor) {
+                        restoreCursor();
+                    }
+                    onPointerEnd && onPointerEnd({ ev, currentStyle });
+                }
+            };
+            document.addEventListener("mousemove", pointerMove);
+            document.addEventListener("mouseup", pointerEnd);
+            window.addEventListener("blur", pointerEnd);
+            e.preventDefault();
+            return false;
+        }, true);
+    }
+    registerEvent(el, event, hook, useCapture = false) {
+        const wrapper = ((ev) => {
+            if (!this.enabled)
+                return;
+            hook(ev);
+        }).bind(this);
+        el.addEventListener(event, wrapper, useCapture);
+        __classPrivateFieldGet(this, _Uii_listeners, "f").push([el, event, wrapper, useCapture]);
+    }
+    disable() {
+        this.enabled = false;
+    }
+    enable() {
+        this.enabled = true;
+    }
+    getOptions() {
+        return this.opts;
+    }
+    getOption(name) {
+        return this.opts[name];
+    }
+    setOptions(options) {
+        assign(this.opts, options);
+        this.onOptionChanged(this.opts);
+    }
+    setOption(name, value) {
+        this.opts[name] = value;
+        this.onOptionChanged(this.opts);
+    }
+    onOptionChanged(opts) { }
+}
+_Uii_listeners = new WeakMap();
+
+var _Splittable_instances, _Splittable_checkDirection, _Splittable_bindHandle;
+const THRESHOLD$4 = 1;
+const CLASS_SPLITTABLE = "uii-splittable";
+const CLASS_SPLITTABLE_HANDLE = "uii-splittable-handle";
+const CLASS_SPLITTABLE_HANDLE_GHOST = "uii-splittable-handle-ghost";
+const CLASS_SPLITTABLE_HANDLE_ACTIVE = "uii-splittable-handle-active";
+const CLASS_SPLITTABLE_V = "uii-splittable-v";
+const CLASS_SPLITTABLE_H = "uii-splittable-h";
+function getRootEl(el, root) {
+    let rs = el.parentNode;
+    while (rs && rs.parentNode !== root) {
+        rs = rs.parentNode;
+    }
+    return rs;
+}
+class Splittable extends Uii {
+    constructor(container, opts) {
+        super(container, assign({
+            handleSize: 10,
+            minSize: 0,
+            sticky: false,
+            inside: false,
+            ghost: false
+        }, opts));
+        _Splittable_instances.add(this);
+        each(this.ele, con => {
+            const pos = window.getComputedStyle(con).position;
+            if (pos === "static") {
+                con.style.position = "relative";
+            }
+            con.classList.toggle(CLASS_SPLITTABLE, true);
+            const handleDoms = con.querySelectorAll(this.opts.handle);
+            const children = reject(con.children, c => {
+                if (includes(handleDoms, c))
+                    return true;
+                return false;
+            });
+            const dir = __classPrivateFieldGet(this, _Splittable_instances, "m", _Splittable_checkDirection).call(this, con);
+            con.classList.toggle(dir === 'v' ? CLASS_SPLITTABLE_V : CLASS_SPLITTABLE_H, true);
+            const minSizeAry = map(children, (c, i) => {
+                if (isArray(this.opts.minSize)) {
+                    return this.opts.minSize[i] || 0;
+                }
+                else {
+                    return this.opts.minSize;
+                }
+            });
+            const stickyAry = map(children, (c, i) => {
+                if (isArray(this.opts.sticky)) {
+                    return this.opts.sticky[i] || false;
+                }
+                else {
+                    return this.opts.sticky;
+                }
+            });
+            if (isEmpty(handleDoms)) {
+                const len = children.length - 1;
+                for (let i = 0; i < len; i++) {
+                    __classPrivateFieldGet(this, _Splittable_instances, "m", _Splittable_bindHandle).call(this, minSizeAry.slice(i, i + 2), stickyAry.slice(i, i + 2), this.opts, dir, children[i], children[i + 1]);
+                }
+            }
+            else {
+                each(handleDoms, (h, i) => {
+                    const isRoot = h.parentNode.classList.contains(CLASS_SPLITTABLE);
+                    let dom1, dom2;
+                    if (isRoot) {
+                        dom1 = h.previousElementSibling;
+                        dom2 = h.nextElementSibling;
+                    }
+                    else {
+                        dom2 = getRootEl(h, con);
+                        dom1 = dom2.previousElementSibling;
+                    }
+                    __classPrivateFieldGet(this, _Splittable_instances, "m", _Splittable_bindHandle).call(this, minSizeAry.slice(i, i + 2), stickyAry.slice(i, i + 2), this.opts, dir, dom1, dom2, h);
+                });
+            }
+        });
+    }
+}
+_Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Splittable_checkDirection(container) {
+    let dir = 'h';
+    const child = container.children[0];
+    let lastY = child.offsetTop;
+    each(container.children, c => {
+        if (c.offsetTop != lastY) {
+            dir = 'v';
+            return false;
+        }
+    });
+    return dir;
+}, _Splittable_bindHandle = function _Splittable_bindHandle(minSizeAry, stickyAry, opts, dir, dom1, dom2, handle) {
+    var _a;
+    const handleSize = opts.handleSize;
+    if (!handle) {
+        handle = document.createElement('div');
+        let initPos = 0;
+        if (!opts.inside) {
+            initPos = (dir === 'v' ? dom2.offsetTop : dom2.offsetLeft);
+        }
+        const sensorHCss = `width:${handleSize}px;height:100%;top:0;left:${initPos - handleSize / 2}px;z-index:9;`;
+        const sensorVCss = `height:${handleSize}px;width:100%;left:0;top:${initPos - handleSize / 2}px;z-index:9;`;
+        handle.style.cssText =
+            'position: absolute;' + (dir === 'v' ? sensorVCss : sensorHCss);
+        if (opts.inside) {
+            dom2.appendChild(handle);
+        }
+        (_a = dom2.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(handle, dom2);
+    }
+    handle.style.cursor = dir === 'v' ? 's-resize' : 'e-resize';
+    handle.dataset.cursor = handle.style.cursor;
+    handle.classList.add(CLASS_SPLITTABLE_HANDLE);
+    const minSize1 = minSizeAry[0];
+    const minSize2 = minSizeAry[1];
+    let sticky1 = stickyAry[0];
+    let sticky2 = stickyAry[1];
+    const onStart = opts.onStart;
+    const onSplit = opts.onSplit;
+    const onEnd = opts.onEnd;
+    const onSticky = opts.onSticky;
+    const onClone = opts.onClone;
+    const oneSideMode = opts.oneSideMode;
+    const updateStart = !oneSideMode || oneSideMode === 'start';
+    const updateEnd = !oneSideMode || oneSideMode === 'end';
+    this.addPointerDown(handle, ({ currentTarget, onPointerStart, onPointerMove, onPointerEnd }) => {
+        let originSize = 0;
+        let originSize1 = 0;
+        let splitterSize = 1;
+        let blockSize = 0;
+        switch (dir) {
+            case 'v':
+                originSize = dom1.offsetHeight;
+                originSize1 = dom2.offsetHeight;
+                splitterSize = currentTarget.offsetHeight;
+                break;
+            case 'h':
+                originSize = dom1.offsetWidth;
+                originSize1 = dom2.offsetWidth;
+                splitterSize = currentTarget.offsetWidth;
+                break;
+        }
+        blockSize = splitterSize + originSize + originSize1;
+        const dom1Style = dom1.style;
+        const dom2Style = dom2.style;
+        const ghost = opts.ghost;
+        const ghostClass = opts.ghostClass;
+        let ghostNode = null;
+        let sticked = 'none';
+        if (originSize < minSize1 / 2) {
+            sticked = 'start';
+        }
+        else if (blockSize - originSize - splitterSize < minSize2 / 2) {
+            sticked = 'end';
+        }
+        let startPos = dir === 'v' ? dom1.offsetTop : dom1.offsetLeft;
+        let ds1, anotherSize;
+        onPointerStart(function (args) {
+            const { ev } = args;
+            currentTarget.classList.add(CLASS_SPLITTABLE_HANDLE_ACTIVE);
+            if (ghost) {
+                ghostNode = currentTarget.cloneNode(true);
+                ghostNode.style.opacity = '0.3';
+                ghostNode.style.pointerEvents = 'none';
+                ghostNode.classList.add(CLASS_SPLITTABLE_HANDLE_GHOST);
+                if (ghostNode) {
+                    if (ghostClass) {
+                        ghostNode.className =
+                            ghostNode.className.replace(ghostClass, '') + ' ' + ghostClass;
+                    }
+                    currentTarget.parentNode.appendChild(ghostNode);
+                    onClone && onClone({ clone: ghostNode }, ev);
+                }
+            }
+            onStart && onStart({ size1: originSize, size2: originSize1 }, ev);
+        });
+        onPointerMove((args) => {
+            const { ev, offX, offY, currentStyle } = args;
+            let doSticky = false;
+            ds1 = dir === 'v' ? originSize + offY : originSize + offX;
+            if (ds1 < minSize1 / 2 && sticky1 && minSize1 > 0) {
+                if (sticked == 'none') {
+                    doSticky = true;
+                    sticked = 'start';
+                }
+                ds1 = 0;
+            }
+            else if (ds1 < minSize1) {
+                ds1 = minSize1;
+                if (sticked == 'start' && sticky1) {
+                    doSticky = true;
+                    sticked = 'none';
+                }
+            }
+            else if (blockSize - ds1 - splitterSize < minSize2 / 2 &&
+                sticky2) {
+                if (sticked == 'none') {
+                    doSticky = true;
+                    sticked = 'end';
+                }
+                ds1 = blockSize - splitterSize;
+            }
+            else if (blockSize - ds1 - splitterSize < minSize2) {
+                ds1 = blockSize - minSize2 - splitterSize;
+                if (sticked == 'end' && sticky2) {
+                    doSticky = true;
+                    sticked = 'none';
+                }
+            }
+            anotherSize = blockSize - ds1 - splitterSize;
+            if (ghostNode) {
+                if (dir === 'v') {
+                    ghostNode.style.top = startPos + ds1 - handleSize / 2 + 'px';
+                }
+                else {
+                    ghostNode.style.left = startPos + ds1 - handleSize / 2 + 'px';
+                    console.log(ghostNode.style.left);
+                }
+            }
+            else {
+                const updateProp = dir === 'v' ? 'height' : 'width';
+                if (updateStart) {
+                    dom1Style.setProperty(updateProp, ds1 + 'px', 'important');
+                }
+                if (updateEnd) {
+                    dom2Style.setProperty(updateProp, anotherSize + 'px', 'important');
+                }
+                if (doSticky) {
+                    onSticky && onSticky({ size1: ds1, size2: anotherSize, position: sticked }, ev);
+                }
+                if (dir === 'v') {
+                    currentStyle.top = dom2.offsetTop - handleSize / 2 + 'px';
+                }
+                else {
+                    currentStyle.left = dom2.offsetLeft - handleSize / 2 + 'px';
+                }
+            }
+            onSplit && onSplit({ size1: ds1, size2: anotherSize }, ev);
+        });
+        onPointerEnd((args) => {
+            var _a, _b;
+            const { ev, currentStyle } = args;
+            switch (dir) {
+                case 'v':
+                    originSize = (dom1 === null || dom1 === void 0 ? void 0 : dom1.offsetHeight) || -1;
+                    originSize1 = (dom2 === null || dom2 === void 0 ? void 0 : dom2.offsetHeight) || -1;
+                    break;
+                case 'h':
+                    originSize = (dom1 === null || dom1 === void 0 ? void 0 : dom1.offsetWidth) || -1;
+                    originSize1 = (dom2 === null || dom2 === void 0 ? void 0 : dom2.offsetWidth) || -1;
+                    break;
+            }
+            handle === null || handle === void 0 ? void 0 : handle.classList.remove(CLASS_SPLITTABLE_HANDLE_ACTIVE);
+            if (ghostNode) {
+                const updateProp = dir === 'v' ? 'height' : 'width';
+                if (updateStart) {
+                    dom1Style.setProperty(updateProp, ds1 + 'px', 'important');
+                }
+                if (updateEnd) {
+                    dom2Style.setProperty(updateProp, anotherSize + 'px', 'important');
+                }
+                if (dir === 'v') {
+                    currentStyle.top = startPos + ds1 - handleSize / 2 + 'px';
+                }
+                else {
+                    currentStyle.left = startPos + ds1 - handleSize / 2 + 'px';
+                }
+                ((_a = ghostNode.parentNode) === null || _a === void 0 ? void 0 : _a.contains(ghostNode)) && ((_b = ghostNode.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(ghostNode));
+            }
+            onEnd && onEnd({ size1: originSize, size2: originSize1 }, ev);
+        });
+    }, {
+        threshold: THRESHOLD$4,
+        lockPage: true
+    });
+};
+function newSplittable(container, opts) {
+    return new Splittable(container, opts);
+}
+
+const THRESHOLD$3 = 2;
+const CLASS_RESIZABLE_HANDLE = "uii-resizable-handle";
+const CLASS_RESIZABLE_HANDLE_DIR = "uii-resizable-handle-";
+const CLASS_RESIZABLE_HANDLE_ACTIVE = "uii-resizable-handle-active";
+const EXP_DIR = new RegExp(CLASS_RESIZABLE_HANDLE_DIR + "(?<dir>[nesw]+)");
+class Resizable extends Uii {
+    constructor(els, opts) {
+        super(els, assign({
+            handleSize: 8,
+            minSize: 50,
+            dir: ["n", "s", "e", "w", "ne", "nw", "se", "sw"],
+            ghost: false,
+            offset: 0,
+        }, opts));
+        each(this.ele, (el) => {
+            this.initHandle(el);
+        });
+    }
+    bindHandle(handle, dir, panel, opts) {
+        const onStart = opts.onStart;
+        const onResize = opts.onResize;
+        const onEnd = opts.onEnd;
+        const onClone = opts.onClone;
+        const uiik = this;
+        this.addPointerDown(handle, ({ ev, onPointerStart, onPointerMove, onPointerEnd }) => {
+            const onPointerDown = opts.onPointerDown;
+            if (onPointerDown && onPointerDown(ev) === false)
+                return;
+            let matrixInfo = getMatrixInfo(panel);
+            const offset = getRectInContainer(panel, panel.parentElement);
+            const offsetParentRect = panel.parentElement.getBoundingClientRect();
+            const offsetParentCStyle = window.getComputedStyle(panel.parentElement);
+            const panelCStyle = window.getComputedStyle(panel);
+            const originW = parseFloat(panelCStyle.width);
+            const originH = parseFloat(panelCStyle.height);
+            const originX = offset.x;
+            const originY = offset.y;
+            let changeW = false;
+            let changeH = false;
+            let changeX = false;
+            let changeY = false;
+            let toTransformOrigin = "";
+            switch (dir) {
+                case "s":
+                    changeH = true;
+                    break;
+                case "e":
+                    changeW = true;
+                    break;
+                case "se":
+                    changeW = true;
+                    changeH = true;
+                    break;
+                case "n":
+                    changeX = true;
+                    changeY = true;
+                    changeH = true;
+                    toTransformOrigin = "0 0";
+                    break;
+                case "w":
+                    changeX = true;
+                    changeY = true;
+                    changeW = true;
+                    toTransformOrigin = "0 0";
+                    break;
+                case "sw":
+                case "ne":
+                case "nw":
+                    changeX = true;
+                    changeY = true;
+                    changeW = true;
+                    changeH = true;
+                    toTransformOrigin = "0 0";
+                    break;
+            }
+            let minWidth;
+            let minHeight;
+            let maxWidth;
+            let maxHeight;
+            if (isArray(opts.minSize)) {
+                minWidth = opts.minSize[0];
+                minHeight = opts.minSize[1];
+            }
+            else if (isNumber(opts.minSize)) {
+                minWidth = opts.minSize;
+                minHeight = opts.minSize;
+            }
+            if (isArray(opts.maxSize)) {
+                maxWidth = opts.maxSize[0];
+                maxHeight = opts.maxSize[1];
+            }
+            else if (isNumber(opts.maxSize)) {
+                maxWidth = opts.maxSize;
+                maxHeight = opts.maxSize;
+            }
+            const ghost = opts.ghost;
+            const ghostClass = opts.ghostClass;
+            let ghostNode = null;
+            const aspectRatio = opts.aspectRatio;
+            const panelStyle = panel.style;
+            let style = panelStyle;
+            let currentW = originW;
+            let currentH = originH;
+            let transformer;
+            let lastX = 0, lastY = 0;
+            let originalTransformOrigin = "";
+            let originVertex;
+            let vertexBeforeTransform;
+            let currentVertex;
+            let refPoint;
+            let k1;
+            onPointerStart(function (args) {
+                var _a;
+                const { ev } = args;
+                handle.classList.add(CLASS_RESIZABLE_HANDLE_ACTIVE);
+                if (ghost) {
+                    if (isFunction(ghost)) {
+                        ghostNode = ghost(panel);
+                    }
+                    else {
+                        ghostNode = panel.cloneNode(true);
+                        ghostNode.style.opacity = "0.3";
+                        ghostNode.style.pointerEvents = "none";
+                    }
+                    if (ghostNode) {
+                        if (ghostClass) {
+                            ghostNode.className =
+                                ghostNode.className.replace(ghostClass, "") +
+                                    " " +
+                                    ghostClass;
+                        }
+                        (_a = panel.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(ghostNode);
+                        transformer = wrapper(ghostNode);
+                        onClone && onClone({ clone: ghostNode }, ev);
+                    }
+                    style = ghostNode === null || ghostNode === void 0 ? void 0 : ghostNode.style;
+                }
+                else {
+                    transformer = wrapper(panel);
+                }
+                const { x, y, sx, sy } = getCenterXy(panel);
+                let centerX = x, centerY = y;
+                const deg = matrixInfo.angle * ONE_ANG;
+                originVertex = [
+                    { x: 0, y: 0 },
+                    { x: originW, y: 0 },
+                    { x: 0, y: originH },
+                    { x: originW, y: originH },
+                ];
+                currentVertex = vertexBeforeTransform = map(originVertex, ({ x, y }) => {
+                    const nx = (x - centerX + sx) * Math.cos(deg) -
+                        (y - centerY + sy) * Math.sin(deg);
+                    const ny = (x - centerX + sx) * Math.sin(deg) +
+                        (y - centerY + sy) * Math.cos(deg);
+                    return { x: centerX + nx, y: centerY + ny };
+                });
+                switch (dir) {
+                    case "s":
+                    case "e":
+                    case "se":
+                        refPoint = currentVertex[0];
+                        break;
+                    case "n":
+                    case "w":
+                    case "nw":
+                        refPoint = currentVertex[3];
+                        break;
+                    case "sw":
+                        refPoint = currentVertex[1];
+                        break;
+                    case "ne":
+                        refPoint = currentVertex[2];
+                        break;
+                }
+                k1 =
+                    (currentVertex[1].y - refPoint.y) /
+                        (currentVertex[1].x - refPoint.x);
+                style.transition = "none";
+                originalTransformOrigin = style.transformOrigin;
+                if (toTransformOrigin) {
+                    style.transformOrigin = toTransformOrigin;
+                }
+                else {
+                    style.transformOrigin = `${centerX - transformer.x}px ${centerY - transformer.y}px`;
+                }
+                onStart && onStart.call(uiik, { w: originW, h: originH }, ev);
+            });
+            onPointerMove((args) => {
+                const { ev } = args;
+                const currentXy = getPointInContainer(ev, panel.parentElement, offsetParentRect, offsetParentCStyle);
+                let newX = currentXy.x;
+                let newY = currentXy.y;
+                let angle = Math.atan2(newY - refPoint.y, newX - refPoint.x) * ONE_RAD -
+                    matrixInfo.angle;
+                let hyLen = Math.sqrt((newX - refPoint.x) * (newX - refPoint.x) +
+                    (newY - refPoint.y) * (newY - refPoint.y));
+                let pl1 = Math.abs(k1 === Infinity
+                    ? newY - refPoint.y
+                    : hyLen * Math.cos(angle * ONE_ANG));
+                let pl2 = Math.sqrt(hyLen * hyLen - pl1 * pl1);
+                let w = originW;
+                let h = originH;
+                let y = originY;
+                let x = originX;
+                let angl = 0;
+                switch (dir) {
+                    case "s":
+                        h = pl2;
+                        break;
+                    case "e":
+                        w = pl1;
+                        break;
+                    case "se":
+                        w = pl1;
+                        h = pl2;
+                        break;
+                    case "n":
+                        h = pl2;
+                        angl =
+                            Math.atan2(currentVertex[0].y - currentVertex[2].y, currentVertex[0].x - currentVertex[2].x) * ONE_RAD;
+                        let plh;
+                        if (angl === 90) {
+                            h = newY - currentVertex[2].y;
+                            x = currentVertex[2].x;
+                            y = newY;
+                        }
+                        else if (currentVertex[2].y > currentVertex[0].y) {
+                            plh = h * Math.cos(angl * ONE_ANG);
+                            x = currentVertex[2].x + plh;
+                            y = currentVertex[2].y - Math.sqrt(h * h - plh * plh);
+                        }
+                        else {
+                            plh = h * Math.cos((180 - angl) * ONE_ANG);
+                            x = currentVertex[2].x - plh;
+                            y = currentVertex[2].y + Math.sqrt(h * h - plh * plh);
+                        }
+                        break;
+                    case "w":
+                        w = pl1;
+                        angl =
+                            Math.atan2(currentVertex[0].y - currentVertex[1].y, currentVertex[0].x - currentVertex[1].x) * ONE_RAD;
+                        let plw;
+                        if (angl === 0) {
+                            w = newX - currentVertex[1].x;
+                            x = newX;
+                            y = currentVertex[1].y;
+                        }
+                        else if (currentVertex[1].y > currentVertex[0].y) {
+                            plw = w * Math.cos((180 - angl) * ONE_ANG);
+                            x = currentVertex[1].x - plw;
+                            y = currentVertex[1].y - Math.sqrt(w * w - plw * plw);
+                        }
+                        else {
+                            plw = w * Math.cos(angl * ONE_ANG);
+                            x = currentVertex[1].x + plw;
+                            y = currentVertex[1].y + Math.sqrt(w * w - plw * plw);
+                        }
+                        break;
+                    case "nw":
+                        w = pl1;
+                        h = pl2;
+                        x = newX;
+                        y = newY;
+                        if (matrixInfo.angle === 180) {
+                            w = newX - currentVertex[3].x;
+                            h = newY - currentVertex[3].y;
+                        }
+                        break;
+                    case "sw":
+                        w = pl1;
+                        h = pl2;
+                        angl =
+                            Math.atan2(currentVertex[0].y - currentVertex[1].y, currentVertex[0].x - currentVertex[1].x) * ONE_RAD;
+                        let plw1;
+                        if (angl === 0) {
+                            x = newX;
+                            y = currentVertex[0].y;
+                        }
+                        else if (currentVertex[1].y > currentVertex[0].y) {
+                            plw1 = w * Math.cos((180 - angl) * ONE_ANG);
+                            x = currentVertex[1].x - plw1;
+                            y = currentVertex[1].y - Math.sqrt(w * w - plw1 * plw1);
+                        }
+                        else {
+                            plw1 = w * Math.cos((180 - angl) * ONE_ANG);
+                            x = currentVertex[1].x - plw1;
+                            y = currentVertex[1].y + Math.sqrt(w * w - plw1 * plw1);
+                        }
+                        break;
+                    case "ne":
+                        w = pl1;
+                        h = pl2;
+                        angl =
+                            Math.atan2(currentVertex[0].y - currentVertex[2].y, currentVertex[0].x - currentVertex[2].x) * ONE_RAD;
+                        let plne;
+                        if (angl === 0) {
+                            x = newX;
+                            y = currentVertex[0].y;
+                        }
+                        else if (currentVertex[1].x > currentVertex[0].x) {
+                            plne = h * Math.cos((180 - angl) * ONE_ANG);
+                            x = currentVertex[2].x - plne;
+                            y = currentVertex[2].y - Math.sqrt(h * h - plne * plne);
+                        }
+                        else {
+                            plne = h * Math.cos(angl * ONE_ANG);
+                            x = currentVertex[2].x + plne;
+                            y = currentVertex[2].y + Math.sqrt(h * h - plne * plne);
+                        }
+                        break;
+                }
+                if (changeW) {
+                    if (minWidth && w < minWidth)
+                        w = minWidth;
+                    if (maxWidth && w > maxWidth)
+                        w = maxWidth;
+                }
+                if (changeH) {
+                    if (minHeight && h < minHeight)
+                        h = minHeight;
+                    if (maxHeight && h > maxHeight)
+                        h = maxHeight;
+                }
+                if (aspectRatio) {
+                    if (changeW) {
+                        style.width = w + "px";
+                        style.height = w / aspectRatio + "px";
+                    }
+                    if (changeH && dir !== "sw") {
+                        if (dir === "nw") {
+                            y = originY - w / aspectRatio + originH;
+                        }
+                        else {
+                            style.width = h * aspectRatio + "px";
+                            style.height = h + "px";
+                        }
+                    }
+                }
+                else {
+                    if (changeW) {
+                        style.width = w + "px";
+                    }
+                    if (changeH) {
+                        style.height = h + "px";
+                    }
+                }
+                if (changeY) {
+                    transformer.moveToY(y);
+                }
+                if (changeX) {
+                    transformer.moveToX(x);
+                }
+                lastX = x;
+                lastY = y;
+                currentW = w;
+                currentH = h;
+                onResize &&
+                    onResize.call(uiik, { w, h, ow: w - originW, oh: h - originH }, ev);
+            });
+            onPointerEnd((args) => {
+                var _a, _b;
+                const { ev } = args;
+                if (ghost && ghostNode) {
+                    ((_a = panel.parentNode) === null || _a === void 0 ? void 0 : _a.contains(ghostNode)) &&
+                        ((_b = panel.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(ghostNode));
+                    panelStyle.left = ghostNode.style.left;
+                    panelStyle.top = ghostNode.style.top;
+                    moveTo(panel, lastX / matrixInfo.scale, lastY / matrixInfo.scale);
+                    panelStyle.width = ghostNode.style.width;
+                    panelStyle.height = ghostNode.style.height;
+                }
+                panel.style.transformOrigin = originalTransformOrigin;
+                const { x, y, sx, sy } = getCenterXy(panel);
+                let centerX = x, centerY = y;
+                const deg = matrixInfo.angle * ONE_ANG;
+                const currentVertex = map(originVertex, ({ x, y }) => {
+                    const nx = (x - centerX + sx) * Math.cos(deg) -
+                        (y - centerY + sy) * Math.sin(deg);
+                    const ny = (x - centerX + sx) * Math.sin(deg) +
+                        (y - centerY + sy) * Math.cos(deg);
+                    return { x: centerX + nx, y: centerY + ny };
+                });
+                if (changeX || changeY) {
+                    transformer.moveTo(transformer.x - (currentVertex[0].x - lastX), transformer.y - (currentVertex[0].y - lastY));
+                }
+                else {
+                    transformer.moveTo(transformer.x - (currentVertex[0].x - vertexBeforeTransform[0].x), transformer.y - (currentVertex[0].y - vertexBeforeTransform[0].y));
+                }
+                handle.classList.remove(CLASS_RESIZABLE_HANDLE_ACTIVE);
+                onEnd && onEnd.call(uiik, { w: currentW, h: currentH }, ev);
+            });
+        }, {
+            threshold: THRESHOLD$3,
+            lockPage: true,
+        });
+    }
+    initHandle(panel) {
+        const opts = this.opts;
+        let handleStr = opts.handle;
+        let handles;
+        if (isString(handleStr)) {
+            handles = document.querySelectorAll(handleStr);
+        }
+        else if (isFunction(handleStr)) {
+            handles = handleStr(panel);
+        }
+        if (!handles) {
+            console.error('Can not find handles with "' + panel.outerHTML + '"');
+            return;
+        }
+        handles = isArrayLike(handles) ? handles : [handles];
+        each(handles, (h) => {
+            const className = h.getAttribute("class") || "";
+            const matchRs = className.match(EXP_DIR);
+            let dir = "se";
+            if (matchRs) {
+                dir = matchRs.groups.dir;
+            }
+            h.classList.add(CLASS_RESIZABLE_HANDLE);
+            this.bindHandle(h, dir, panel, opts);
+            h.style.cursor = `${dir}-resize`;
+            h.dataset.cursor = `${dir}-resize`;
+            h.setAttribute("name", "handle");
+        });
+    }
+}
+function newResizable(els, opts) {
+    return new Resizable(els, opts);
+}
+
+var _Draggable_instances, _Draggable_handleMap, _Draggable_container, _Draggable_initStyle;
+const DRAGGER_GROUPS = {};
+const CLASS_DRAGGABLE = "uii-draggable";
+const CLASS_DRAGGABLE_HANDLE = "uii-draggable-handle";
+const CLASS_DRAGGABLE_ACTIVE = "uii-draggable-active";
+const CLASS_DRAGGABLE_GHOST = "uii-draggable-ghost";
+class Draggable extends Uii {
+    constructor(els, opts) {
+        super(els, assign({
+            containment: false,
+            watch: true,
+            threshold: 0,
+            ghost: false,
+            direction: "",
+            scroll: true,
+            snapOptions: {
+                tolerance: 10,
+            }
+        }, opts));
+        _Draggable_instances.add(this);
+        _Draggable_handleMap.set(this, new WeakMap());
+        _Draggable_container.set(this, null);
+        if (this.opts.handle) {
+            each(this.ele, (el) => {
+                const h = el.querySelector(this.opts.handle);
+                if (!h) {
+                    console.error('No handle found "' + this.opts.handle + '"');
+                    return false;
+                }
+                __classPrivateFieldGet(this, _Draggable_handleMap, "f").set(el, h);
+            });
+        }
+        this.onOptionChanged(this.opts);
+        if (this.opts.group) {
+            if (!DRAGGER_GROUPS[this.opts.group]) {
+                DRAGGER_GROUPS[this.opts.group] = [];
+            }
+            DRAGGER_GROUPS[this.opts.group].push(...this.ele);
+        }
+        __classPrivateFieldGet(this, _Draggable_instances, "m", _Draggable_initStyle).call(this, this.ele);
+        if (this.opts.containment) {
+            if (isBoolean(this.opts.containment)) {
+                __classPrivateFieldSet(this, _Draggable_container, isEmpty(this.ele) ? null : this.ele[0].parentElement, "f");
+            }
+            else if (isString(this.opts.containment)) {
+                __classPrivateFieldSet(this, _Draggable_container, document.querySelector(this.opts.containment), "f");
+            }
+            else if (isElement(this.opts.containment)) {
+                __classPrivateFieldSet(this, _Draggable_container, this.opts.containment, "f");
+            }
+        }
+        if (this.opts.watch && this.eleString) {
+            let con;
+            if (isString(this.opts.watch)) {
+                con = document.querySelector(this.opts.watch);
+            }
+            else {
+                con = isEmpty(this.ele) ? null : this.ele[0].parentElement;
+            }
+            this.bindEvent(con || document.body, this.opts, __classPrivateFieldGet(this, _Draggable_handleMap, "f"));
+        }
+        else {
+            each(this.ele, (el) => {
+                this.bindEvent(el, this.opts, __classPrivateFieldGet(this, _Draggable_handleMap, "f"));
+            });
+        }
+    }
+    bindEvent(bindTarget, opts, handleMap) {
+        const container = __classPrivateFieldGet(this, _Draggable_container, "f");
+        let draggableList = this.ele;
+        const eleString = this.eleString;
+        const initStyle = __classPrivateFieldGet(this, _Draggable_instances, "m", _Draggable_initStyle).bind(this);
+        this.addPointerDown(bindTarget, ({ ev, currentTarget, currentStyle, currentCStyle, pointX, pointY, onPointerStart, onPointerMove, onPointerEnd }) => {
+            var _a;
+            let t = ev.target;
+            if (!t)
+                return;
+            if (opts.watch && eleString) {
+                draggableList = bindTarget.querySelectorAll(eleString);
+                initStyle(draggableList);
+            }
+            let findRs = find(draggableList, el => el.contains(t));
+            if (!findRs)
+                return;
+            const dragDom = findRs;
+            let handle = handleMap.get(dragDom);
+            if (handle && !handle.contains(t)) {
+                return;
+            }
+            const onPointerDown = opts.onPointerDown;
+            if (onPointerDown && onPointerDown({ draggable: dragDom }, ev) === false)
+                return;
+            const filter = opts.filter;
+            if (filter) {
+                if (some(dragDom.querySelectorAll(filter), ele => ele.contains(t)))
+                    return;
+            }
+            const offsetParent = dragDom instanceof HTMLElement ? dragDom.offsetParent || document.body : dragDom.ownerSVGElement;
+            const offsetParentRect = offsetParent.getBoundingClientRect();
+            const offsetParentCStyle = window.getComputedStyle(offsetParent);
+            const offsetXy = getPointInContainer(ev, dragDom);
+            let offsetPointX = offsetXy.x;
+            let offsetPointY = offsetXy.y;
+            const matrixInfo = getMatrixInfo(dragDom);
+            const currentXy = getPointInContainer(ev, offsetParent, offsetParentRect, offsetParentCStyle);
+            if (matrixInfo.angle != 0) {
+                offsetPointX = currentXy.x - matrixInfo.x;
+                offsetPointY = currentXy.y - matrixInfo.y;
+            }
+            const inContainer = !!container;
+            const ghost = opts.ghost;
+            const ghostClass = opts.ghostClass;
+            const direction = opts.direction;
+            const onStart = opts.onStart;
+            const onDrag = opts.onDrag;
+            const onEnd = opts.onEnd;
+            const onClone = opts.onClone;
+            const originalZIndex = currentCStyle.zIndex;
+            let zIndex = opts.zIndex || originalZIndex;
+            const classes = opts.classes || '';
+            const group = opts.group;
+            if (group) {
+                let i = -1;
+                each(DRAGGER_GROUPS[group], el => {
+                    const z = parseInt(currentCStyle.zIndex) || 0;
+                    if (z > i)
+                        i = z;
+                });
+                zIndex = i + 1;
+            }
+            const scroll = opts.scroll;
+            const scrollSpeed = opts.scrollSpeed || 10;
+            let gridX, gridY;
+            const grid = opts.grid;
+            if (isArray(grid)) {
+                gridX = grid[0];
+                gridY = grid[1];
+            }
+            else if (isNumber(grid)) {
+                gridX = gridY = grid;
+            }
+            const snapOn = opts.snap;
+            let snappable;
+            const snapTolerance = ((_a = opts.snapOptions) === null || _a === void 0 ? void 0 : _a.tolerance) || 10;
+            const onSnap = opts.onSnap;
+            let lastSnapDirY = "", lastSnapDirX = "";
+            let lastSnapping = "";
+            if (snapOn) {
+                snappable = map((container || document).querySelectorAll(snapOn), (el) => {
+                    const { x, y, w, h } = getRectInContainer(el, offsetParent);
+                    return {
+                        x1: x,
+                        y1: y,
+                        x2: x + w,
+                        y2: y + h,
+                        el: el,
+                    };
+                });
+            }
+            const dragDomRect = dragDom.getBoundingClientRect();
+            const originW = dragDomRect.width + parseFloat(currentCStyle.borderLeftWidth) + parseFloat(currentCStyle.borderRightWidth);
+            const originH = dragDomRect.height + parseFloat(currentCStyle.borderTopWidth) + parseFloat(currentCStyle.borderBottomWidth);
+            let minX = 0;
+            let minY = 0;
+            let maxX = 0;
+            let maxY = 0;
+            let originOffX = 0;
+            let originOffY = 0;
+            if (inContainer) {
+                maxX = container.scrollWidth - originW;
+                maxY = container.scrollHeight - originH;
+            }
+            if (maxX < 0)
+                maxX = 0;
+            if (maxY < 0)
+                maxY = 0;
+            let copyNode;
+            let transformer;
+            let timer = null;
+            let toLeft = false;
+            let toTop = false;
+            let toRight = false;
+            let toBottom = false;
+            let endX = 0, endY = 0;
+            onPointerStart(function (args) {
+                var _a;
+                const { ev } = args;
+                if (ghost) {
+                    if (isFunction(ghost)) {
+                        copyNode = ghost(dragDom);
+                    }
+                    else {
+                        copyNode = dragDom.cloneNode(true);
+                        copyNode.style.opacity = "0.3";
+                        copyNode.style.pointerEvents = "none";
+                        copyNode.style.position = "absolute";
+                    }
+                    copyNode.style.zIndex = zIndex + '';
+                    if (ghostClass) {
+                        copyNode.classList.add(...compact(split(ghostClass, ' ')));
+                    }
+                    copyNode.classList.add(...compact(split(classes, ' ')));
+                    copyNode.classList.toggle(CLASS_DRAGGABLE_GHOST, true);
+                    (_a = dragDom.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(copyNode);
+                    transformer = wrapper(copyNode);
+                    onClone && onClone({ clone: copyNode }, ev);
+                }
+                else {
+                    transformer = wrapper(dragDom);
+                }
+                dragDom.classList.add(...compact(split(classes, ' ')));
+                if (!copyNode)
+                    dragDom.style.zIndex = zIndex + '';
+                dragDom.classList.toggle(CLASS_DRAGGABLE_ACTIVE, true);
+                onStart && onStart({ draggable: dragDom, x: currentXy.x, y: currentXy.y }, ev);
+                const customEv = new Event("uii-dragactive", { "bubbles": true, "cancelable": false });
+                dragDom.dispatchEvent(customEv);
+            });
+            onPointerMove((args) => {
+                const { ev, pointX, pointY, offX, offY } = args;
+                const currentXy = getPointInContainer(ev, offsetParent, offsetParentRect, offsetParentCStyle);
+                let newX = currentXy.x;
+                let newY = currentXy.y;
+                if (scroll) {
+                    const lX = pointX - offsetParentRect.x;
+                    const lY = pointY - offsetParentRect.y;
+                    const rX = offsetParentRect.x + offsetParentRect.width - pointX;
+                    const rY = offsetParentRect.y + offsetParentRect.height - pointY;
+                    toLeft = lX < EDGE_THRESHOLD;
+                    toTop = lY < EDGE_THRESHOLD;
+                    toRight = rX < EDGE_THRESHOLD;
+                    toBottom = rY < EDGE_THRESHOLD;
+                    if (toLeft || toTop
+                        ||
+                            toRight || toBottom) {
+                        if (!timer) {
+                            timer = setInterval(() => {
+                                if (toLeft) {
+                                    offsetParent.scrollLeft -= scrollSpeed;
+                                }
+                                else if (toRight) {
+                                    offsetParent.scrollLeft += scrollSpeed;
+                                }
+                                if (toTop) {
+                                    offsetParent.scrollTop -= scrollSpeed;
+                                }
+                                else if (toBottom) {
+                                    offsetParent.scrollTop += scrollSpeed;
+                                }
+                            }, 20);
+                        }
+                    }
+                    else {
+                        if (timer) {
+                            clearInterval(timer);
+                            timer = null;
+                        }
+                    }
+                }
+                let x = newX - offsetPointX + 0;
+                let y = newY - offsetPointY + 0;
+                if (isNumber(gridX) && isNumber(gridY)) {
+                    x = ((x / gridX) >> 0) * gridX;
+                    y = ((y / gridY) >> 0) * gridY;
+                }
+                if (inContainer) {
+                    if (originOffX + x < minX) {
+                        x = -0;
+                    }
+                    if (originOffY + y < minY) {
+                        y = -0;
+                    }
+                    if (originOffX + x > maxX) {
+                        x = maxX - originOffX;
+                    }
+                    if (originOffY + y > maxY) {
+                        y = maxY - originOffY;
+                    }
+                }
+                let canDrag = true;
+                let emitSnap = false;
+                if (snapOn) {
+                    const currPageX1 = x;
+                    const currPageY1 = y;
+                    const currPageX2 = currPageX1 + originW;
+                    const currPageY2 = currPageY1 + originH;
+                    let snapX = NaN, snapY = NaN;
+                    let targetX, targetY;
+                    let snapDirX, snapDirY;
+                    if (!direction || direction === "v") {
+                        each(snappable, (data) => {
+                            if (Math.abs(data.y1 - currPageY1) <= snapTolerance) {
+                                snapY = data.y1;
+                                snapDirY = "t2t";
+                            }
+                            else if (Math.abs(data.y2 - currPageY1) <= snapTolerance) {
+                                snapY = data.y2;
+                                snapDirY = "t2b";
+                            }
+                            else if (Math.abs(data.y1 - currPageY2) <= snapTolerance) {
+                                snapY = data.y1 - originH;
+                                snapDirY = "b2t";
+                            }
+                            else if (Math.abs(data.y2 - currPageY2) <= snapTolerance) {
+                                snapY = data.y2 - originH;
+                                snapDirY = "b2b";
+                            }
+                            if (snapY) {
+                                lastSnapDirY = snapDirY;
+                                targetY = data.el;
+                                return false;
+                            }
+                        });
+                    }
+                    if (!direction || direction === "h") {
+                        each(snappable, (data) => {
+                            if (Math.abs(data.x1 - currPageX1) <= snapTolerance) {
+                                snapX = data.x1;
+                                snapDirX = "l2l";
+                            }
+                            else if (Math.abs(data.x2 - currPageX1) <= snapTolerance) {
+                                snapX = data.x2;
+                                snapDirX = "l2r";
+                            }
+                            else if (Math.abs(data.x1 - currPageX2) <= snapTolerance) {
+                                snapX = data.x1 - originW;
+                                snapDirX = "r2l";
+                            }
+                            else if (Math.abs(data.x2 - currPageX2) <= snapTolerance) {
+                                snapX = data.x2 - originW;
+                                snapDirX = "r2r";
+                            }
+                            if (snapX) {
+                                lastSnapDirX = snapDirX;
+                                targetX = data.el;
+                                return false;
+                            }
+                        });
+                    }
+                    if (snapX || snapY) {
+                        if (snapX) {
+                            x = snapX;
+                        }
+                        if (snapY) {
+                            y = snapY;
+                        }
+                        if (onSnap && lastSnapping !== lastSnapDirX + "" + lastSnapDirY) {
+                            setTimeout(() => {
+                                onSnap({
+                                    el: copyNode || dragDom,
+                                    targetH: targetX,
+                                    targetV: targetY,
+                                    dirH: snapDirX,
+                                    dirV: snapDirY,
+                                }, ev);
+                            }, 0);
+                            lastSnapping = lastSnapDirX + "" + lastSnapDirY;
+                        }
+                        emitSnap = true;
+                    }
+                    else {
+                        lastSnapDirX = lastSnapDirY = lastSnapping = "";
+                    }
+                }
+                if (onDrag && !emitSnap) {
+                    if (onDrag({
+                        draggable: dragDom,
+                        ox: offX,
+                        oy: offY,
+                        x: x,
+                        y: y
+                    }, ev) === false) {
+                        canDrag = false;
+                        endX = x;
+                        endY = y;
+                    }
+                }
+                if (canDrag) {
+                    if (direction === "v") {
+                        transformer.moveToY(y);
+                    }
+                    else if (direction === "h") {
+                        transformer.moveToX(x);
+                    }
+                    else {
+                        transformer.moveTo(x, y);
+                    }
+                    endX = x;
+                    endY = y;
+                }
+            });
+            onPointerEnd((args) => {
+                var _a, _b;
+                const { ev, currentStyle } = args;
+                if (scroll) {
+                    if (timer) {
+                        clearInterval(timer);
+                        timer = null;
+                    }
+                }
+                dragDom.classList.remove(...compact(split(classes, ' ')));
+                currentStyle.zIndex = originalZIndex;
+                dragDom.classList.remove(CLASS_DRAGGABLE_ACTIVE);
+                let moveToGhost = true;
+                if (onEnd) {
+                    moveToGhost = onEnd({ draggable: dragDom, x: endX, y: endY }, ev) === false ? false : true;
+                }
+                const customEv = new Event("uii-dragdeactive", { "bubbles": true, "cancelable": false });
+                dragDom.dispatchEvent(customEv);
+                if (ghost) {
+                    ((_a = dragDom.parentNode) === null || _a === void 0 ? void 0 : _a.contains(copyNode)) && ((_b = dragDom.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(copyNode));
+                    if (moveToGhost !== false) {
+                        wrapper(dragDom).moveTo(transformer.x, transformer.y);
+                    }
+                }
+            });
+        }, {
+            threshold: this.opts.threshold || 0,
+            lockPage: true
+        });
+    }
+    onOptionChanged(opts) {
+        const droppable = opts.droppable;
+        if (!isFunction(droppable)) {
+            if (isUndefined(droppable)) {
+                opts.droppable = () => { };
+            }
+            else if (isString(droppable)) {
+                opts.droppable = () => document.querySelectorAll(droppable);
+            }
+            else if (isArrayLike(droppable)) {
+                opts.droppable = () => droppable;
+            }
+            else if (isElement(droppable)) {
+                opts.droppable = () => [droppable];
+            }
+        }
+    }
+}
+_Draggable_handleMap = new WeakMap(), _Draggable_container = new WeakMap(), _Draggable_instances = new WeakSet(), _Draggable_initStyle = function _Draggable_initStyle(draggableList) {
+    each(draggableList, (el) => {
+        if (isDefined(this.opts.type))
+            el.dataset.dropType = this.opts.type;
+        el.classList.toggle(CLASS_DRAGGABLE, true);
+        const ee = __classPrivateFieldGet(this, _Draggable_handleMap, "f").get(el) || el;
+        ee.classList.toggle(CLASS_DRAGGABLE_HANDLE, true);
+        if (isDefined(this.opts.cursor)) {
+            el.style.cursor = this.opts.cursor.default || 'move';
+            if (isDefined(this.opts.cursor.over)) {
+                el.dataset.cursorOver = this.opts.cursor.over;
+                el.dataset.cursorActive = this.opts.cursor.active || 'move';
+            }
+        }
+    });
+};
+function newDraggable(els, opts) {
+    return new Draggable(els, opts);
+}
+
+var _Droppable_active;
+const Droppables = [];
+const CLASS_DROPPABLE = "uii-droppable";
+class Droppable extends Uii {
+    constructor(el, opts) {
+        super(el, assign({}, opts));
+        _Droppable_active.set(this, void 0);
+        Droppables.push(this);
+    }
+    bindEvent(droppable, opts) {
+        this.registerEvent(droppable, "mouseenter", (e) => {
+            if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
+                return;
+            if (opts.hoverClass) {
+                each(split(opts.hoverClass, ' '), cls => {
+                    droppable.classList.toggle(cls, true);
+                });
+            }
+            if (__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver) {
+                setCursor(__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver);
+            }
+            opts.onEnter && opts.onEnter({ draggable: __classPrivateFieldGet(this, _Droppable_active, "f"), droppable }, e);
+        });
+        this.registerEvent(droppable, "mouseleave", (e) => {
+            if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
+                return;
+            if (opts.hoverClass) {
+                each(split(opts.hoverClass, ' '), cls => {
+                    droppable.classList.toggle(cls, false);
+                });
+            }
+            if (__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver) {
+                setCursor(__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorActive || '');
+            }
+            opts.onLeave && opts.onLeave({ draggable: __classPrivateFieldGet(this, _Droppable_active, "f"), droppable }, e);
+        });
+        this.registerEvent(droppable, "mousemove", (e) => {
+            if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
+                return;
+            opts.onOver && opts.onOver({ draggable: __classPrivateFieldGet(this, _Droppable_active, "f"), droppable }, e);
+        });
+        this.registerEvent(droppable, "mouseup", (e) => {
+            if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
+                return;
+            if (opts.hoverClass) {
+                each(split(opts.hoverClass, ' '), cls => {
+                    droppable.classList.toggle(cls, false);
+                });
+            }
+            opts.onDrop && opts.onDrop({ draggable: __classPrivateFieldGet(this, _Droppable_active, "f"), droppable }, e);
+        });
+    }
+    active(target) {
+        let valid = true;
+        const opts = this.opts;
+        if (isString(opts.accepts)) {
+            valid = !!target.dataset.dropType && test(opts.accepts, target.dataset.dropType);
+        }
+        else if (isFunction(opts.accepts)) {
+            valid = opts.accepts(this.ele, target);
+        }
+        if (!valid)
+            return;
+        __classPrivateFieldSet(this, _Droppable_active, target, "f");
+        if (opts.activeClass) {
+            each(this.ele, el => {
+                each(split(opts.activeClass || '', ' '), cls => {
+                    el.classList.toggle(cls, true);
+                });
+            });
+        }
+        opts.onActive && opts.onActive({ draggable: target, droppables: this.ele });
+        each(this.ele, (el) => {
+            el.classList.toggle(CLASS_DROPPABLE, true);
+            el.style.pointerEvents = 'initial';
+            this.bindEvent(el, opts);
+        });
+    }
+    deactive(target) {
+        if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
+            return;
+        __classPrivateFieldSet(this, _Droppable_active, null, "f");
+        const opts = this.opts;
+        if (opts.activeClass) {
+            each(this.ele, el => {
+                each(split(opts.activeClass || '', ' '), cls => {
+                    el.classList.toggle(cls, false);
+                });
+            });
+        }
+        opts.onDeactive && opts.onDeactive({ draggable: target, droppables: this.ele });
+        this.destroy();
+    }
+}
+_Droppable_active = new WeakMap();
+document.addEventListener("uii-dragactive", (e) => {
+    each(Droppables, dpb => {
+        dpb.active(e.target);
+    });
+});
+document.addEventListener("uii-dragdeactive", (e) => {
+    each(Droppables, dpb => {
+        dpb.deactive(e.target);
+    });
+});
+function newDroppable(els, opts) {
+    return new Droppable(els, opts);
+}
+
+const THRESHOLD$2 = 2;
+const CLASS_ROTATABLE = "uii-rotatable";
+const CLASS_ROTATABLE_HANDLE = "uii-rotatable-handle";
+const CLASS_ROTATABLE_ACTIVE = "uii-rotatable-active";
+class Rotatable extends Uii {
+    constructor(els, opts) {
+        super(els, opts);
+        each(this.ele, (el) => {
+            initHandle(this, el, this.opts);
+        });
+    }
+}
+function initHandle(uiik, el, opts) {
+    let handleStr = opts.handle;
+    let handles;
+    if (isString(handleStr)) {
+        handles = document.querySelectorAll(handleStr);
+    }
+    else if (isFunction(handleStr)) {
+        handles = handleStr(el);
+    }
+    if (!handles) {
+        console.error('Can not find handles with "' + el.outerHTML + '"');
+        return;
+    }
+    each(handles, (h) => {
+        var _a;
+        h.classList.add(CLASS_ROTATABLE_HANDLE);
+        h.style.cursor = ((_a = opts.cursor) === null || _a === void 0 ? void 0 : _a.default) || "crosshair";
+        bindHandle(uiik, h, el, opts);
+    });
+    el.classList.toggle(CLASS_ROTATABLE, true);
+}
+function bindHandle(uiik, handle, el, opts) {
+    const onStart = opts.onStart;
+    const onRotate = opts.onRotate;
+    const onEnd = opts.onEnd;
+    let deg = 0;
+    uiik.addPointerDown(handle, ({ onPointerStart, onPointerMove, onPointerEnd }) => {
+        const { x, y, ox, oy } = getCenterXy(el);
+        let centerX = x, centerY = y;
+        let startDeg = 0;
+        onPointerStart(function (args) {
+            const { ev } = args;
+            const currentXy = getPointInContainer(ev, el.parentElement);
+            startDeg =
+                Math.atan2(currentXy.y - centerY, currentXy.x - centerX) * ONE_RAD + 90;
+            if (startDeg < 0)
+                startDeg = 360 + startDeg;
+            let matrixInfo = getMatrixInfo(el);
+            startDeg -= matrixInfo.angle;
+            el.classList.toggle(CLASS_ROTATABLE_ACTIVE, true);
+            onStart && onStart({ deg, cx: centerX, cy: centerY }, ev);
+        });
+        onPointerMove((args) => {
+            const { ev } = args;
+            const currentXy = getPointInContainer(ev, el.parentElement);
+            deg =
+                Math.atan2(currentXy.y - centerY, currentXy.x - centerX) * ONE_RAD +
+                    90 - startDeg;
+            onRotate && onRotate({ deg, cx: centerX, cy: centerY }, ev);
+            rotateTo(el, deg, ox, oy);
+        });
+        onPointerEnd((args) => {
+            const { ev } = args;
+            el.classList.toggle(CLASS_ROTATABLE_ACTIVE, false);
+            onEnd && onEnd({ deg }, ev);
+        });
+    }, {
+        threshold: THRESHOLD$2,
+        lockPage: true,
+    });
+}
+function newRotatable(els, opts) {
+    return new Rotatable(els, opts);
+}
+
+var _CollisionDetector__targets;
+class CollisionDetector {
+    constructor(el, targets, opts) {
+        _CollisionDetector__targets.set(this, void 0);
+        __classPrivateFieldSet(this, _CollisionDetector__targets, targets, "f");
+        this.opts = {
+            container: document.body
+        };
+        this.opts = assign(this.opts, opts);
+        const domEl = isString(el) ? document.querySelector(el) : el;
+        if (!domEl) {
+            console.error('Invalid selector "' + el + '"');
+            return;
+        }
+        const ele = domEl;
+        this.el = domEl;
+        const offset = getBox(ele, this.opts.container);
+        const rect = { x: offset.x, y: offset.y, width: ele.offsetWidth, height: ele.offsetHeight };
+        this.elData = {
+            x1: rect.x,
+            y1: rect.y,
+            x2: rect.x + rect.width,
+            y2: rect.y + rect.height,
+        };
+        this.update();
+    }
+    update() {
+        let targets;
+        if (isFunction(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"))) {
+            targets = __classPrivateFieldGet(this, _CollisionDetector__targets, "f").call(this);
+        }
+        else if (isString(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"))) {
+            targets = this.opts.container.querySelectorAll(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"));
+            targets = reject(targets, t => t === this.el);
+        }
+        else if (isElement(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"))) {
+            targets = [__classPrivateFieldGet(this, _CollisionDetector__targets, "f")];
+        }
+        else {
+            targets = __classPrivateFieldGet(this, _CollisionDetector__targets, "f");
+        }
+        this.targetsData = flatMap(targets, t => {
+            if (!t)
+                return [];
+            const rect = getRectInContainer(t, this.opts.container);
+            return {
+                x1: rect.x,
+                y1: rect.y,
+                x2: rect.x + rect.w,
+                y2: rect.y + rect.h,
+                el: t
+            };
+        });
+    }
+    getOverlaps(x1, y1, x2, y2) {
+        let elData = this.elData;
+        if (x1 && x2 && y1 && y2) {
+            elData = {
+                x1,
+                y1,
+                x2,
+                y2,
+            };
+        }
+        let overlaps = flatMap(this.targetsData, (td, i) => {
+            if (elData.x2 < td.x1 || elData.x1 > td.x2 || elData.y2 < td.y1 || elData.y1 > td.y2)
+                return [];
+            return td.el;
+        });
+        return overlaps;
+    }
+    getInclusions(x1, y1, x2, y2) {
+        let elData = this.elData;
+        if (x1 && x2 && y1 && y2) {
+            elData = {
+                x1,
+                y1,
+                x2,
+                y2,
+            };
+        }
+        let contains = flatMap(this.targetsData, (td, i) => {
+            if (elData.x2 >= td.x2 && elData.x1 <= td.x1 && elData.y2 >= td.y2 && elData.y1 <= td.y1)
+                return td.el;
+            return [];
+        });
+        return contains;
+    }
+}
+_CollisionDetector__targets = new WeakMap();
+function newCollisionDetector(el, targets, opts) {
+    return new CollisionDetector(el, targets, opts);
+}
+
+var _Selectable_instances, _Selectable__detector, _Selectable__lastSelected, _Selectable_bindEvent;
+const CLASS_SELECTOR = "uii-selector";
+const CLASS_SELECTING = "uii-selecting";
+const CLASS_SELECTED = "uii-selected";
+const THRESHOLD$1 = 2;
+class Selectable extends Uii {
+    constructor(container, opts) {
+        super(container, assign({
+            targets: [],
+            scroll: true,
+        }, opts));
+        _Selectable_instances.add(this);
+        _Selectable__detector.set(this, void 0);
+        _Selectable__lastSelected.set(this, void 0);
+        const domEl = this.ele[0];
+        let selector = document.createElement("div");
+        if (domEl instanceof SVGElement) {
+            selector = document.createElementNS('http://www.w3.org/2000/svg', "rect");
+        }
+        selector.setAttribute('class', CLASS_SELECTOR);
+        selector.style.cssText = `
+      position:absolute;
+      left:0;top:0;
+    `;
+        if (this.opts.class) {
+            selector.setAttribute('class', selector.getAttribute('class') + " " + this.opts.class);
+        }
+        else {
+            selector.style.cssText += "border:1px dashed #000;stroke:#000;";
+        }
+        selector.style.display = 'none';
+        domEl.appendChild(selector);
+        __classPrivateFieldSet(this, _Selectable__detector, newCollisionDetector(selector, this.opts.targets, {
+            container: domEl,
+        }), "f");
+        __classPrivateFieldGet(this, _Selectable_instances, "m", _Selectable_bindEvent).call(this, selector, domEl);
+    }
+    updateTargets() {
+        __classPrivateFieldGet(this, _Selectable__detector, "f").update();
+    }
+    onOptionChanged() {
+        this.updateTargets();
+    }
+}
+_Selectable__detector = new WeakMap(), _Selectable__lastSelected = new WeakMap(), _Selectable_instances = new WeakSet(), _Selectable_bindEvent = function _Selectable_bindEvent(selector, con) {
+    const that = this;
+    const opts = this.opts;
+    this.addPointerDown(con, ({ ev, target, currentRect, currentCStyle, currentTarget, onPointerStart, onPointerMove, onPointerEnd }) => {
+        const onStart = opts.onStart;
+        const onSelect = opts.onSelect;
+        const onEnd = opts.onEnd;
+        const mode = opts.mode || "overlap";
+        const scroll = opts.scroll;
+        const scrollSpeed = opts.scrollSpeed || 10;
+        const filter = opts.filter;
+        const selectingClassAry = compact(split(opts.selectingClass, " "));
+        const selectedClassAry = compact(split(opts.selectedClass, " "));
+        if (filter) {
+            if (isFunction(filter)) {
+                if (filter(target))
+                    return;
+            }
+            else if (some(con.querySelectorAll(filter), (el) => el.contains(target)))
+                return;
+        }
+        const onPointerDown = opts.onPointerDown;
+        if (onPointerDown && onPointerDown(ev) === false)
+            return;
+        let originPos = "";
+        let matrixInfo = getMatrixInfo(currentCStyle);
+        const startxy = getPointInContainer(ev, con, currentRect, currentCStyle, matrixInfo);
+        let hitPosX = startxy.x;
+        let hitPosY = startxy.y;
+        const style = selector.style;
+        let selection = [];
+        let lastSelection = [];
+        let x1 = hitPosX, y1 = hitPosY;
+        let timer = null;
+        let toLeft = false;
+        let toTop = false;
+        let toRight = false;
+        let toBottom = false;
+        onPointerStart(function (args) {
+            const { ev } = args;
+            __classPrivateFieldGet(that, _Selectable__detector, "f").update();
+            const pos = currentCStyle.position;
+            if (pos === "static") {
+                originPos = con.style.position;
+                con.style.position = "relative";
+            }
+            each(__classPrivateFieldGet(that, _Selectable__lastSelected, "f"), t => {
+                target.classList.toggle(CLASS_SELECTED, false);
+            });
+            style.display = 'block';
+            onStart && onStart({ selection: __classPrivateFieldGet(that, _Selectable__lastSelected, "f"), selectable: con }, ev);
+        });
+        onPointerMove((args) => {
+            const { ev } = args;
+            const currentXy = getPointInContainer(ev, currentTarget, currentRect, currentCStyle, matrixInfo);
+            let pointX = currentXy.x;
+            let pointY = currentXy.y;
+            let offX = pointX - hitPosX;
+            let offY = pointY - hitPosY;
+            if (scroll) {
+                const ltX = ev.clientX - currentRect.x;
+                const ltY = ev.clientY - currentRect.y;
+                const rbX = currentRect.x + currentRect.width - ev.clientX;
+                const rbY = currentRect.y + currentRect.height - ev.clientY;
+                toLeft = ltX < EDGE_THRESHOLD;
+                toTop = ltY < EDGE_THRESHOLD;
+                toRight = rbX < EDGE_THRESHOLD;
+                toBottom = rbY < EDGE_THRESHOLD;
+                if (toLeft || toTop || toRight || toBottom) {
+                    if (!timer) {
+                        timer = setInterval(() => {
+                            if (toLeft) {
+                                con.scrollLeft -= scrollSpeed;
+                            }
+                            else if (toRight) {
+                                con.scrollLeft += scrollSpeed;
+                            }
+                            if (toTop) {
+                                con.scrollTop -= scrollSpeed;
+                            }
+                            else if (toBottom) {
+                                con.scrollTop += scrollSpeed;
+                            }
+                        }, 20);
+                    }
+                }
+                else {
+                    if (timer) {
+                        clearInterval(timer);
+                        timer = null;
+                    }
+                }
+            }
+            let x = hitPosX, y = hitPosY, w = Math.abs(offX), h = Math.abs(offY);
+            if (offX > 0 && offY > 0) {
+                x1 = hitPosX;
+                y1 = hitPosY;
+            }
+            else if (offX < 0 && offY < 0) {
+                x = x1 = pointX;
+                y = y1 = pointY;
+            }
+            else if (offX < 0) {
+                x = x1 = pointX;
+            }
+            else if (offY < 0) {
+                y = y1 = pointY;
+            }
+            style.width = w + "px";
+            style.height = h + "px";
+            style.transform = `translate3d(${x}px,${y}px,0)`;
+            if (mode === "overlap") {
+                selection = __classPrivateFieldGet(that, _Selectable__detector, "f").getOverlaps(x1, y1, x1 + w, y1 + h);
+            }
+            else if (mode === "inclusion") {
+                selection = __classPrivateFieldGet(that, _Selectable__detector, "f").getInclusions(x1, y1, x1 + w, y1 + h);
+            }
+            each(lastSelection, (t) => {
+                if (!includes(selection, t)) {
+                    t.classList.toggle(CLASS_SELECTING, false);
+                    each(selectingClassAry, (cls) => {
+                        t.classList.toggle(cls, false);
+                    });
+                }
+            });
+            each(selection, (t) => {
+                t.classList.toggle(CLASS_SELECTING, true);
+                each(selectingClassAry, (cls) => {
+                    t.classList.toggle(cls, true);
+                });
+            });
+            const changed = lastSelection.length != selection.length;
+            lastSelection = selection;
+            if (changed && onSelect)
+                onSelect({ selection, selectable: con }, ev);
+        });
+        onPointerEnd((args) => {
+            const { ev, currentStyle } = args;
+            style.display = 'none';
+            if (scroll) {
+                if (timer) {
+                    clearInterval(timer);
+                    timer = null;
+                }
+            }
+            if (originPos) {
+                con.style.position = originPos;
+            }
+            each(selection, (t) => {
+                each(selectingClassAry, (cls) => {
+                    t.classList.toggle(cls, false);
+                });
+                each(selectedClassAry, (cls) => {
+                    t.classList.toggle(cls, true);
+                });
+                t.classList.toggle(CLASS_SELECTING, false);
+                t.classList.toggle(CLASS_SELECTED, true);
+            });
+            __classPrivateFieldSet(that, _Selectable__lastSelected, selection, "f");
+            if (onEnd)
+                onEnd({ selection, selectable: con }, ev);
+        });
+    }, {
+        threshold: THRESHOLD$1,
+        lockPage: true
+    });
+};
+function newSelectable(container, opts) {
+    return new Selectable(container, opts);
+}
+
+var _Sortable_removeListenItems;
+const SORTABLE_GROUPS = {};
+const CLASS_SORTABLE_CONTAINER = "uii-sortable-container";
+const CLASS_SORTABLE_GHOST = "uii-sortable-ghost";
+const CLASS_SORTABLE_ACTIVE = "uii-sortable-active";
+const ATTR_SORTABLE_ACTIVE = "uii-sortable-active";
+const THRESHOLD = 2;
+class Sortable extends Uii {
+    constructor(container, opts) {
+        super(container, merge({
+            move: {
+                from: true,
+                to: true,
+            },
+            scroll: true,
+            sort: true
+        }, opts));
+        _Sortable_removeListenItems.set(this, void 0);
+        if (size(this.ele) > 1 && !this.opts.group) {
+            this.opts.group = "uii_sortable_" + alphaId();
+        }
+        each(this.ele, (el) => {
+            el.classList.add(CLASS_SORTABLE_CONTAINER);
+            el.style.position = "relative";
+            el.style.pointerEvents = "initial";
+            bindContainer(this.registerEvent.bind(this), el, this.opts);
+        });
+        if (this.opts.group) {
+            if (!SORTABLE_GROUPS[this.opts.group]) {
+                SORTABLE_GROUPS[this.opts.group] = [];
+            }
+            SORTABLE_GROUPS[this.opts.group].push([this, this.ele]);
+        }
+    }
+    active(draggingItem, fromContainer, toContainers, toOpts) {
+        var _a;
+        const moveFrom = (_a = toOpts.move) === null || _a === void 0 ? void 0 : _a.from;
+        const acceptFn = isFunction(moveFrom) ? moveFrom : () => !!moveFrom;
+        const activableContainers = flatMap(toContainers, (el) => {
+            const valid = acceptFn(draggingItem, fromContainer, el);
+            return valid ? el : [];
+        });
+        each(activableContainers, (el) => {
+            el.setAttribute(ATTR_SORTABLE_ACTIVE, "1");
+            if (toOpts.activeClass) {
+                each(split(toOpts.activeClass || "", " "), (cls) => {
+                    el.classList.toggle(cls, true);
+                });
+            }
+        });
+        __classPrivateFieldSet(this, _Sortable_removeListenItems, map(activableContainers, (con) => {
+            const filteredItems = con.querySelectorAll(":scope > *");
+            return listenItems(toOpts, con, draggingItem, filteredItems);
+        }), "f");
+        toOpts.onActive &&
+            toOpts.onActive({ item: draggingItem, from: fromContainer });
+    }
+    deactive(draggingItem, fromContainer, toContainers, opts) {
+        each(toContainers, (el) => {
+            el.removeAttribute(ATTR_SORTABLE_ACTIVE);
+            if (opts.activeClass) {
+                each(split(opts.activeClass || "", " "), (cls) => {
+                    el.classList.toggle(cls, false);
+                });
+            }
+        });
+        each(__classPrivateFieldGet(this, _Sortable_removeListenItems, "f"), (fn) => {
+            fn();
+        });
+        opts.onDeactive &&
+            opts.onDeactive({ item: draggingItem, from: fromContainer });
+    }
+    onOptionChanged() { }
+}
+_Sortable_removeListenItems = new WeakMap();
+let DraggingData = null;
+function bindContainer(registerEvent, container, opts) {
+    registerEvent(container, "mousedown", (e) => {
+        var _a;
+        let con = e.currentTarget;
+        let t = e.target;
+        if (t === con)
+            return;
+        const filterStr = opts.filter ? `:not(${opts.filter})` : "";
+        const filteredItems = con.querySelectorAll(":scope > *" + filterStr);
+        const handles = opts.handle
+            ? map(filteredItems, (el) => el.querySelector(opts.handle || ""))
+            : toArray(filteredItems);
+        const i = findIndex(handles, (handle) => handle.contains(t));
+        if (i < 0)
+            return;
+        const draggingItem = filteredItems[i];
+        const ghostContainer = opts.ghostContainer || con;
+        const onStart = opts.onStart;
+        const onEnd = opts.onEnd;
+        const ghostClass = opts.ghostClass;
+        const group = opts.group;
+        let moveTo = (_a = opts.move) === null || _a === void 0 ? void 0 : _a.to;
+        const toCopy = moveTo === "copy";
+        const toOutFn = isFunction(moveTo) ? moveTo : () => !!moveTo;
+        const moveMode = toOutFn(draggingItem, con);
+        const sort = opts.sort;
+        opts.scroll;
+        opts.scrollSpeed || 10;
+        let hitPosX = e.offsetX + con.scrollLeft, hitPosY = e.offsetY + con.scrollTop;
+        saveCursor();
+        let dragging = false;
+        let ghostNode = null;
+        let removeListenItems = null;
+        const dragListener = (ev) => {
+            const newX = ev.clientX;
+            const newY = ev.clientY;
+            let offsetx = newX - hitPosX;
+            let offsety = newY - hitPosY;
+            if (!dragging) {
+                if (Math.abs(offsetx) > THRESHOLD || Math.abs(offsety) > THRESHOLD) {
+                    dragging = true;
+                    ghostNode = draggingItem.cloneNode(true);
+                    ghostNode.style.opacity = "0.3";
+                    ghostNode.style.pointerEvents = "none";
+                    ghostNode.style.position = "fixed";
+                    ghostNode.style.zIndex = "999";
+                    ghostNode.style.left = draggingItem.style.left;
+                    ghostNode.style.top = draggingItem.style.top;
+                    if (ghostClass) {
+                        ghostNode.classList.add(...compact(split(ghostClass, " ")));
+                    }
+                    ghostNode.classList.toggle(CLASS_SORTABLE_GHOST, true);
+                    ghostContainer.appendChild(ghostNode);
+                    if (!toCopy)
+                        draggingItem.classList.toggle(CLASS_SORTABLE_ACTIVE, true);
+                    let copy = undefined;
+                    if (toCopy) {
+                        copy = draggingItem.cloneNode(true);
+                        copy.classList.toggle(CLASS_SORTABLE_ACTIVE, true);
+                    }
+                    DraggingData = {
+                        item: draggingItem,
+                        fromIndex: i,
+                        fromContainer: con,
+                        toContainer: con,
+                        moveTo: toCopy ? "copy" : moveMode,
+                        spill: opts.spill,
+                        copy
+                    };
+                    onStart && onStart({ item: draggingItem, from: con, index: i }, ev);
+                    lockPage();
+                    if (sort) {
+                        removeListenItems = listenItems(opts, con, toCopy ? draggingItem : copy, filteredItems, i);
+                    }
+                    if (moveMode && group && SORTABLE_GROUPS[group]) {
+                        each(SORTABLE_GROUPS[group], ([sortable, ele]) => {
+                            const filtered = reject(ele, (el) => el === container);
+                            if (isEmpty(filtered))
+                                return;
+                            sortable.active(toCopy ? draggingItem : copy, container, filtered, sortable.getOptions());
+                        });
+                    }
+                }
+                else {
+                    ev.preventDefault();
+                    return false;
+                }
+            }
+            ghostNode.style.left = newX + "px";
+            ghostNode.style.top = newY + "px";
+            ev.preventDefault();
+            return false;
+        };
+        const dragEndListener = (ev) => {
+            var _a;
+            document.removeEventListener("mousemove", dragListener);
+            document.removeEventListener("mouseup", dragEndListener);
+            window.removeEventListener("blur", dragEndListener);
+            if (dragging) {
+                unlockPage();
+                restoreCursor();
+                if (ghostNode)
+                    ghostContainer.removeChild(ghostNode);
+                const toContainer = DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.toContainer;
+                DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.item.classList.remove(CLASS_SORTABLE_ACTIVE);
+                (_a = DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.copy) === null || _a === void 0 ? void 0 : _a.classList.remove(CLASS_SORTABLE_ACTIVE);
+                DraggingData = null;
+                if (removeListenItems)
+                    removeListenItems();
+                if (group && SORTABLE_GROUPS[group]) {
+                    each(SORTABLE_GROUPS[group], ([sortable, ele]) => {
+                        const filtered = reject(ele, (el) => el === container);
+                        if (isEmpty(filtered))
+                            return;
+                        sortable.deactive(draggingItem, container, filtered, sortable.getOptions());
+                    });
+                }
+                onEnd && onEnd({ item: draggingItem, from: container, to: toContainer }, e);
+            }
+        };
+        document.addEventListener("mousemove", dragListener);
+        document.addEventListener("mouseup", dragEndListener);
+        window.addEventListener("blur", dragEndListener);
+        e.preventDefault();
+        return false;
+    });
+    registerEvent(container, "mouseleave", (e) => {
+        var _a, _b;
+        if (!DraggingData)
+            return;
+        opts.onLeave &&
+            opts.onLeave({
+                item: DraggingData.item,
+                from: DraggingData.fromContainer,
+                to: container,
+            }, e);
+        if (DraggingData.moveTo !== 'copy') {
+            if (DraggingData.spill === 'remove') {
+                (_a = DraggingData.item.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(DraggingData.item);
+            }
+            else if (DraggingData.spill === 'revert') {
+                (_b = DraggingData.item.parentElement) === null || _b === void 0 ? void 0 : _b.removeChild(DraggingData.item);
+                const nextSibling = DraggingData.fromContainer.children[DraggingData.fromIndex];
+                DraggingData.fromContainer.insertBefore(DraggingData.item, nextSibling);
+            }
+        }
+    });
+    registerEvent(container, "mouseenter", (e) => {
+        var _a;
+        if (!DraggingData)
+            return;
+        let draggingItem = DraggingData.item;
+        draggingItem.parentElement;
+        const cx = e.clientX;
+        const cy = e.clientY;
+        const rect = container.getBoundingClientRect();
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        const offsetX = cx - rect.x;
+        const offsetY = cy - rect.y;
+        let dir = "";
+        if (offsetX < centerX && offsetY < centerY) {
+            dir = "tl";
+        }
+        else if (offsetX > centerX && offsetY > centerY) {
+            dir = "br";
+        }
+        else if (offsetX < centerX && offsetY > centerY) {
+            dir = "bl";
+        }
+        else if (offsetX > centerX && offsetY < centerY) {
+            dir = "tr";
+        }
+        opts.onEnter &&
+            opts.onEnter({
+                item: DraggingData.item,
+                from: DraggingData.fromContainer,
+                to: container,
+                dir,
+            }, e);
+        DraggingData.toContainer = container;
+        if (container.getAttribute(ATTR_SORTABLE_ACTIVE)) {
+            let valid = true;
+            const moveFrom = (_a = opts.move) === null || _a === void 0 ? void 0 : _a.from;
+            const acceptFn = isFunction(moveFrom) ? moveFrom : () => !!moveFrom;
+            valid = acceptFn(DraggingData.item, DraggingData.fromContainer, container);
+            if (!valid)
+                return;
+            if (container.contains(draggingItem)) {
+                return;
+            }
+            const moveTo = DraggingData.moveTo;
+            if (moveTo === "copy") {
+                draggingItem = DraggingData.copy;
+            }
+            if (draggingItem.parentElement)
+                draggingItem.parentElement.removeChild(draggingItem);
+            let toIndex = 0;
+            if (dir[0] === "t") {
+                container.insertBefore(draggingItem, container.children[0]);
+            }
+            else {
+                container.appendChild(draggingItem);
+                toIndex = container.children.length - 1;
+            }
+            opts.onAdd &&
+                opts.onAdd({
+                    item: draggingItem,
+                    from: DraggingData.fromContainer,
+                    to: container,
+                    index: toIndex,
+                }, e);
+        }
+        else if (container === DraggingData.fromContainer) {
+            if (DraggingData.copy) {
+                let parent = DraggingData.copy.parentElement;
+                if (parent)
+                    parent.removeChild(DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.copy);
+            }
+            else {
+                if (draggingItem.parentElement)
+                    draggingItem.parentElement.removeChild(draggingItem);
+                if (dir[0] === "t") {
+                    container.insertBefore(draggingItem, container.children[0]);
+                }
+                else {
+                    container.appendChild(draggingItem);
+                    container.children.length - 1;
+                }
+            }
+        }
+    });
+}
+function listenItems(opts, toContainer, draggingItem, items, fromIndex = 0) {
+    const listener = (e) => {
+        const ct = e.currentTarget;
+        if (ct.style.transform) {
+            return;
+        }
+        const toIndex = ct._uiik_i;
+        let draggingItem = (DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.copy) || (DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.item);
+        if (toContainer === (DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.fromContainer)) {
+            draggingItem = DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.item;
+        }
+        let parent = draggingItem.parentElement;
+        parent === null || parent === void 0 ? void 0 : parent.removeChild(draggingItem);
+        const sameContainer = parent === ct.parentElement;
+        if (!sameContainer) {
+            parent = ct.parentElement;
+        }
+        const oldIndex = fromIndex;
+        if (toIndex > fromIndex) {
+            fromIndex = toIndex;
+            parent === null || parent === void 0 ? void 0 : parent.insertBefore(draggingItem, ct.nextElementSibling);
+        }
+        else {
+            fromIndex = toIndex - 1;
+            parent === null || parent === void 0 ? void 0 : parent.insertBefore(draggingItem, ct);
+        }
+        opts.onChange &&
+            opts.onChange({
+                item: draggingItem,
+                from: DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.fromContainer,
+                to: toContainer,
+                fromIndex: oldIndex,
+                toIndex: fromIndex,
+            }, e);
+        const toPos = { x: ct.offsetLeft, y: ct.offsetTop };
+        const fromPos = { x: draggingItem.offsetLeft, y: draggingItem.offsetTop };
+        ct.style.transform = `translate3d(${fromPos.x - toPos.x}px,${fromPos.y - toPos.y}px,0)`;
+        draggingItem.style.transform = `translate3d(${toPos.x - fromPos.x}px,${toPos.y - fromPos.y}px,0)`;
+        draggingItem.offsetHeight;
+        ct.offsetHeight;
+        draggingItem.style.transition = "transform .15s";
+        draggingItem.style.transform = `translate3d(0px,0px,0)`;
+        ct.style.transition = "transform .15s";
+        ct.style.transform = `translate3d(0px,0px,0)`;
+        setTimeout(() => {
+            ct.style.transition = "";
+            ct.style.transform = ``;
+            draggingItem.style.transition = "";
+            draggingItem.style.transform = ``;
+        }, 150);
+        e.stopPropagation();
+        e.preventDefault();
+    };
+    each(items, (item, i) => {
+        item.style.position = "relative";
+        if (item === draggingItem)
+            return;
+        item.style.pointerEvents = "initial";
+        item._uiik_i = i;
+        item.addEventListener("mouseenter", listener);
+    });
+    return () => {
+        each(items, (item, i) => {
+            if (item === draggingItem)
+                return;
+            item.removeEventListener("mouseenter", listener);
+        });
+    };
+}
+function newSortable(container, opts) {
+    return new Sortable(container, opts);
+}
+
+var version = "1.3.0-alpha";
+var repository = {
+	type: "git",
+	url: "https://github.com/holyhigh2/uiik"
+};
+
+const welcome = globalThis.welcome;
+if (!welcome) {
+    const ssAry = [];
+    ['102,227,255', '59,208,251', '67,180,255'].forEach((v, i) => {
+        const cu = 'background:rgb(' + v + ');';
+        if (i < 2) {
+            ssAry[i] = ssAry[5 - 1 - i] = cu;
+        }
+        else {
+            ssAry[i] = 'color:#fff;' + cu;
+        }
+    });
+    console.info(`%c %c %c Uiik - UI interactions kit | v${version} %c %c `, ...ssAry, `💎 ${repository.url}`);
+    globalThis.welcome = true;
+}
+const VERSION = version;
+var index = {
+    VERSION: version,
+    newSplittable,
+    newResizable,
+    newDraggable,
+    newDroppable,
+    newRotatable,
+    newSelectable,
+    newSortable
+};
+
+export { CollisionDetector, DRAGGING_RULE, Draggable, Droppable, EDGE_THRESHOLD, ONE_ANG, ONE_RAD, Resizable, Rotatable, Selectable, Sortable, Splittable, Uii, UiiTransformer, VERSION, index as default, getBox, getCenterXy, getMatrixInfo, getPointInContainer, getPointOffset, getRectInContainer, getStyleXy, getTranslate, isSVGEl, lockPage, moveBy, moveTo, newCollisionDetector, newDraggable, newDroppable, newResizable, newRotatable, newSelectable, newSortable, newSplittable, restoreCursor, rotateTo, saveCursor, setCursor, unlockPage, wrapper };