dragee-widgets/dist/index.min.js

Widgets Based on Dragee Library

var DrageeWidgets=function(t){"use strict";function e(t,e){const i=document.createElement("canvas");var s,n;return"static"===window.getComputedStyle(t).position&&(t.style.position="relative"),i.setAttribute("width",e.size.x+"px"),i.setAttribute("height",e.size.y+"px"),function(t,e){e=e||{};let i="";for(const t in e)e.hasOwnProperty(t)&&(i+=t+": "+e[t]+"; ");t.style.cssText=i}(i,{position:"absolute",left:e.position.y+"px",top:e.position.y+"px",width:e.size.x+"px",height:e.size.y+"px"}),n=i,(s=t).firstChild?s.insertBefore(n,s.firstChild):s.appendChild(n),i}class i{constructor(t,e){this.x=t,this.y=e}add(t){return new i(this.x+t.x,this.y+t.y)}sub(t){return new i(this.x-t.x,this.y-t.y)}mult(t){return new i(this.x*t,this.y*t)}negative(){return new i(-this.x,-this.y)}compare(t){return this.x===t.x&&this.y===t.y}clone(){return new i(this.x,this.y)}toString(){return`{x=${this.x},y=${this.y}`}static elementOffset(t,e){e=e||t.parentNode;const s=t.getBoundingClientRect(),n=e.getBoundingClientRect();return new i(s.left-n.left,s.top-n.top)}static elementSize(t){const e=t.getBoundingClientRect();return new i(e.width,e.height)}}class s{constructor(t,e){this.position=t,this.size=e}getP1(){return this.position}getP2(){return new i(this.position.x+this.size.x,this.position.y)}getP3(){return this.position.add(this.size)}getP4(){return new i(this.position.x,this.position.y+this.size.y)}getCenter(){return this.position.add(this.size.mult(.5))}or(t){const e=new i(Math.min(this.position.x,t.position.x),Math.min(this.position.y,t.position.y)),n=new i(Math.max(this.position.x+this.size.x,t.position.x+t.size.x),Math.max(this.position.y+this.size.y,t.position.y+t.size.y)).sub(e);return new s(e,n)}and(t){const e=new i(Math.max(this.position.x,t.position.x),Math.max(this.position.y,t.position.y)),n=new i(Math.min(this.position.x+this.size.x,t.position.x+t.size.x),Math.min(this.position.y+this.size.y,t.position.y+t.size.y)).sub(e);return n.x<=0||n.y<=0?null:new s(e,n)}includePoint(t){return!(this.position.x>t.x||this.position.x+this.size.x<t.x||this.position.y>t.y||this.position.y+this.size.y<t.y)}includeRectangle(t){return this.includePoint(t.position)&&this.includePoint(t.getP3())}moveToBound(t,e){let i,s;if(e)i=e;else{if(s=this.and(t),!s)return t;i=s.size.x>s.size.y?"y":"x"}const n=this.getCenter(),o=t.getCenter(),r=(n[i]>o[i]?-1:1)>0?this.position[i]+this.size[i]-t.position[i]:this.position[i]-(t.position[i]+t.size[i]);return t.position[i]=t.position[i]+r,t}getSquare(){return this.size.x*this.size.y}styleApply(t){(t=t||document.querySelector("ind")).style.left=this.position.x+"px",t.style.top=this.position.y+"px",t.style.width=this.size.x+"px",t.style.height=this.size.y+"px"}growth(t){this.size=this.size.add(t),this.position=this.position.add(t.mult(-.5))}getMinSide(){return Math.min(this.size.x,this.size.y)}static fromElement(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t.parentNode,n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];const o=i.elementOffset(t,e,n),r=i.elementSize(t);return new s(o,r)}}function n(t){let e=t.parentNode;for(;e.parentNode&&"static"===window.getComputedStyle(e).position&&"BODY"!==e.tagName;)e=e.parentNode;return e}let o=class{constructor(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(this.events={},t&&t.on)for(const[e,i]of Object.entries(t.on))this.on(e,i)}emit(t){this.interrupted=!1;const e=[].slice.call(arguments,1);if(this.events[t])for(const i of this.events[t])if(i(...e),this.interrupted)return}interrupt(){this.interrupted=!0}on(t,e){this.events[t]||(this.events[t]=[]),this.events[t].push(e)}prependOn(t,e){this.events[t]||(this.events[t]=[]),this.events[t].unshift(e)}unsubscribe(t,e){if(this.events[t]){const i=this.events[t].indexOf(e);this.events[t].splice(i,1)}}resetEmitter(){this.events={}}resetOn(t){this.events[t]=[]}};function r(t,e){const i=t.x-e.x,s=t.y-e.y;return Math.sqrt(i*i+s*s)}function a(t){return(e,i)=>Math.sqrt(Math.pow(t.x*Math.abs(e.x-i.x),2)+Math.pow(t.y*Math.abs(e.y-i.y),2))}function h(t,e,s){const n=e.x-t.x,o=e.y-t.y,a=s/r(t,e);return new i(t.x+a*n,t.y+a*o)}function l(t,e){const i=Math.min(t,e),s=Math.max(t,e);return Math.min(s-i,i+2*Math.PI-s)}function g(t){for(;t<0;)t+=2*Math.PI;for(;t>2*Math.PI;)t-=2*Math.PI;return t}class d{constructor(){}bound(t,e){return t}refresh(){}static bounding(){const t=new this(...arguments);return t.bound.bind(t)}}class c extends d{constructor(t){super(),this.rectangle=t}bound(t,e){const i=t.clone(),s=this.rectangle.getP3();return this.rectangle.position.x>i.x&&(i.x=this.rectangle.position.x),this.rectangle.position.y>i.y&&(i.y=this.rectangle.position.y),s.x<i.x+e.x&&(i.x=s.x-e.x),s.y<i.y+e.y&&(i.y=s.y-e.y),i}}class u extends c{constructor(t,e){super(s.fromElement(t,e)),this.element=t,this.container=e}refresh(){this.rectangle=s.fromElement(this.element,this.container)}}class p extends d{constructor(t,e){super(),this.startPoint=t,this.endPoint=e;const i=Math.atan2(e.y-t.y,e.x-t.x)+Math.PI/2;this.someK=10,this.cosBeta=Math.cos(i),this.sinBeta=Math.sin(i)}bound(t,e){const s=new i(t.x+this.someK*this.cosBeta,t.y+this.someK*this.sinBeta),n=h(this.endPoint,this.startPoint,e.x),o=function(t,e,s,n){let o,r,a,h,l,g,d;return s.x===n.x&&(o=s,s=t,t=o,o=n,n=e,e=o),t.x===e.x?(a=(n.y-s.y)/(n.x-s.x),l=(n.x*s.y-s.x*n.y)/(n.x-s.x),g=t.x,d=g*a+l,new i(g,d)):(r=(e.y-t.y)/(e.x-t.x),h=(e.x*t.y-t.x*e.y)/(e.x-t.x),a=(n.y-s.y)/(n.x-s.x),l=(n.x*s.y-s.x*n.y)/(n.x-s.x),g=(h-l)/(a-r),d=g*r+h,new i(g,d))}(this.startPoint,this.endPoint,t,s);return function(t,e,s){const n=new i(s.x-t.x,s.y-t.y),o=new i(e.x-t.x,e.y-t.y),r=o.x*o.x+o.y*o.y,a=(n.x*o.x+n.y*o.y)/r;return new i(t.x+o.x*a,t.y+o.y*a)}(this.startPoint,n,o)}}class m extends d{constructor(t,e){super(),this.center=t,this.radius=e}bound(t,e){return h(this.center,t,this.radius)}}class f extends m{constructor(t,e,i,s){super(t,e),this._startAngle=i,this._endAngle=s}startAngle(){return"function"==typeof this._startAngle?this._startAngle():this._startAngle}endAngle(){return"function"==typeof this._endAngle?this._endAngle():this._endAngle}bound(t,e){let s=function(t,e){const i=e.sub(t);return g(Math.atan2(i.y,i.x))}(this.center,t);return s=g(s),s=function(t,e,i){let s,n;return t<e&&i>t&&i<e||e<t&&(i<e||i>t)?i:(s=l(t,i),n=l(e,i),s<n?t:e)}(this.startAngle(),this.endAngle(),s),function(t,e,s){return(s=s||new i(0,0)).add(new i(e*Math.cos(t),e*Math.sin(t)))}(s,this.radius,this.center)}}function v(t,e){for(let i=0;i<t.length;i++)t[i]===e&&(t.splice(i,1),i--);return t}class x{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.rectangle=t,this.options=e}get boundRect(){return"function"==typeof this.rectangle?this.rectangle():this.rectangle}}class y extends x{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};super(t,e),this.options=Object.assign({removable:!0},e),this.radius=e.radius||80,this.paddingTopLeft=e.paddingTopLeft||new i(0,0),this.paddingBottomRight=e.paddingBottomRight||new i(0,0),this.yGapBetweenDraggables=e.yGapBetweenDraggables||0,this.getDistance=e.getDistance||r,this.getPosition=e.getPosition||(t=>t.position)}positioning(t,e){const s=this.boundRect,n=s.getP2();let o=[s.position];return t.forEach(((t,e)=>{let r,a=!1;for(let e=0;e<o.length&&(r=new i(o[e].x+this.paddingTopLeft.x,e>0?o[e-1].y+this.yGapBetweenDraggables:s.position.y+this.paddingTopLeft.y),a=r.x+t.size.x<n.x,!a);e++);a||(r=new i(s.position.x+this.paddingTopLeft.x,o[o.length-1].y+(e>0?this.yGapBetweenDraggables:this.paddingTopLeft.y))),t.position=r,this.options.removable&&t.getP3().y>s.getP3().y&&(t.removable=!0),o=function(t,e,i){const s=t.filter((t=>t.y>e.y||t.x>e.x));for(let t=0;t<s.length;t++)if(e.y<s[t].y)return s.splice(t,0,e),s;return s.push(e),s}(o,t.getP3().add(this.paddingBottomRight))})),t}sorting(t,e,i){const s=t.concat(),n=t.map((t=>t.getPosition()));return e.forEach((e=>{let i=function(t,e,i){let s,n,o,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:r,h=0;if(0===t.length)return-1;for(s=a(t[0],e),n=0;n<t.length;n++)o=a(t[n],e),o<s&&(s=o,h=n);return i>=0&&s>i?-1:h}(n,this.getPosition(e),this.radius,this.getDistance);i=-1===i?s.length:s.indexOf(t[i]),s.splice(i,0,e)})),e.forEach((t=>{i.push(s.indexOf(t))})),s}}class b extends o{constructor(t,e){let i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};super(i);const s=this;this.options=Object.assign({timeEnd:200,timeExcange:400},i),this.positioningStrategy=i.strategy||new y(this.getRectangle.bind(this),{radius:80,getDistance:a({x:1,y:4}),removable:!0}),this.element=t,e.forEach((t=>t.targets.push(s))),this.draggables=e,b.emitter.emit("target:create",this),this.startBounding(),this.init()}startBounding(){this.bound=this.options.bound||u.bounding(this.element)}positioning(t,e){return this.positioningStrategy.positioning(t,e)}sorting(t,e,i){return this.positioningStrategy.sorting(t,e,i)}init(){let t,e;this.innerDraggables=this.draggables.filter((t=>{let e=t.element.parentNode;for(;e;){if(e===this.element)return!0;e=e.parentNode}return!1})),this.innerDraggables.length&&(e=function(t,e,i){const s=[];if(void 0===e&&(e=t,t=0),void 0===i&&(i=1),i>0&&t>=e||i<0&&t<=e)return[];for(let n=t;i>0?n<e:n>e;n+=i)s.push(n);return s}(this.innerDraggables.length),t=this.positioning(this.innerDraggables.map((t=>t.getRectangle())),e),this.setPosition(t,e),this.innerDraggables.forEach((t=>this.emit("target:add",t))))}getRectangle(){return s.fromElement(this.element,this.container,!0)}catchDraggable(t){if(this.options.catchDraggable)return this.options.catchDraggable(this,t);{const e=this.getRectangle();return t.getRectangle().getSquare()<e.getSquare()&&e.includePoint(t.getCenter())}}getPosition(){return this.getRectangle().position}getSize(){return this.getRectangle().size}destroy(){E.forEach((t=>v(t.targets,this)))}refresh(){const t=this.positioning(this.innerDraggables.map((t=>t.getRectangle())),[]);this.setPosition(t,[],0)}onEnd(t){const e=[];if(!this.getRectangle().includePoint(t.getCenter()))return!1;t.position=this.bound(t.position,t.getSize()),this.emit("target:beforeAdd",t),this.innerDraggables=this.sorting(this.innerDraggables,[t],e);const i=this.positioning(this.innerDraggables.map((t=>t.getRectangle())),e);return this.setPosition(i,e),-1!==this.innerDraggables.indexOf(t)&&this.addRemoveOnMove(t),!0}setPosition(t,e,i){this.innerDraggables.slice(0).forEach(((s,n)=>{const o=t[n],r=i||0===i?i:-1!==e.indexOf(n)?this.options.timeEnd:this.options.timeExcange;o.removable?(s.move(s.initialPosition,r,!0,!0),v(this.innerDraggables,s),this.emit("target:remove",s)):s.move(o.position,r,!0,!0)}))}add(t,e){const i=this.innerDraggables.length;this.emit("target:beforeAdd",t),this.pushInnerDraggable(t);const s=this.positioning(this.innerDraggables.map((t=>t.getRectangle())),i,t);this.setPosition(s,[i],e||0),-1!==this.innerDraggables.indexOf(t)&&this.addRemoveOnMove(t)}pushInnerDraggable(t){-1===this.innerDraggables.indexOf(t)&&this.innerDraggables.push(t)}addRemoveOnMove(t){t.on("drag:move",this.removeHandler=()=>{this.remove(t)}),this.emit("target:add",t)}remove(t){t.unsubscribe("drag:move",this.removeHandler);const e=this.innerDraggables.indexOf(t);if(-1===e)return;this.innerDraggables.splice(e,1);const i=this.positioning(this.innerDraggables.map((t=>t.getRectangle())),[]);this.setPosition(i,[]),this.emit("target:remove",t)}reset(){this.innerDraggables.forEach((t=>{t.move(t.initialPosition,0,!0,!0),this.emit("target:remove",t)})),this.innerDraggables=[]}getSortedDraggables(){this.innerDraggables.slice()}get container(){return this._container=this._container||this.options.container||this.options.parent||n(this.element)}}b.emitter=new o,b.emitter.on("target:create",(function(t){D.addTarget(t)}));const E=[];const D=new class extends o{constructor(t,e){let i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};super(i),E.forEach((i=>{t&&t.forEach((t=>{v(i.draggables,t)})),e&&e.forEach((t=>{v(i.targets,t)}))})),this.draggables=t||[],this.targets=e||[],E.push(this),this.options={timeEnd:i.timeEnd||400},this.init()}init(){this.draggables.forEach((t=>{t.dragEndAction=()=>this.onEnd(t)}))}addDraggable(t){this.draggables.push(t),t.dragEndAction=()=>this.onEnd(t)}addTarget(t){this.targets.push(t)}onEnd(t){const e=this.targets.filter((e=>-1!==e.draggables.indexOf(t))).filter((e=>e.catchDraggable(t))).sort(((t,e)=>t.getRectangle().getSquare()-e.getRectangle().getSquare()));e.length?e[0].onEnd(t):t.targets.length&&t.pinPosition(t.initialPosition,this.options.timeEnd),this.emit("scope:change")}reset(){this.targets.forEach((t=>t.reset()))}refresh(){this.draggables.forEach((t=>t.refresh())),this.targets.forEach((t=>t.refresh()))}get positions(){return this.targets.map((t=>t.innerDraggables.map((t=>this.draggables.indexOf(t)))))}set positions(t){if(t.length!==this.targets.length)throw"wrong array length";this.targets.forEach((t=>t.reset())),t.forEach(((t,e)=>{t.forEach((t=>{this.targets[e].add(this.draggables[t])}))}))}};function w(t,e){const i=[];let s=t;for(;s.parentNode&&s!==e;)i.unshift(s.parentNode),s=s.parentNode;return i}const P=(t,e)=>{const i=function(t,e){let i=0;return function(){const s=this,n=arguments,o=Date.now();o-i>=e&&(t.apply(s,n),i=o)}}((e=>t(e)),e);return t=>{t.preventDefault(),i(t)}},_={passive:!1},S=navigator.maxTouchPoints>0,T="mousedown",A="mousemove",L="mouseup",O="touchstart",M="touchmove",z="touchend",R=[];function I(t,e){for(let i=0;i<t.changedTouches.length;i++)if(t.changedTouches[i].identifier===e)return t.changedTouches[i];return!1}function C(t,e){const i=window.getComputedStyle(t);for(let t=0;t<i.length;t++){const s=i[t];s.indexOf("transition")<0&&s.indexOf("transform")<0&&(e.style[s]=i[s])}for(let i=0;i<t.children.length;i++)C(t.children[i],e.children[i])}class B extends o{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};super(e),this.targets=[],this.options=e,this.element=t,function(t){if(R.some((e=>t.element===e.element)))throw"for this element Dragee.Draggable is already exist, don't create it twice ";R.push(t)}(this),B.emitter.emit("draggable:create",this),this._enable=!0,this.startBounding(),this.startPositioning(),this.startListening()}startBounding(){this.options.bound?this.bounding={bound:this.options.bound}:this.bounding=new u(this.container,this.container)}startPositioning(){this._setDefaultTransition(),this.offset=i.elementOffset(this.element,this.container),this.pinnedPosition=this.offset,this.position=this.offset,this.initialPosition=this.options.position||this.offset,this.pinPosition(this.initialPosition),this.bounding.refresh&&this.bounding.refresh()}startListening(){this._dragStart=t=>this.dragStart(t),this._dragMove=t=>this.dragMove(t),this._dragEnd=t=>this.dragEnd(t),this._nativeDragStart=t=>this.nativeDragStart(t),this._nativeDragOver=P((t=>this.nativeDragOver(t)),this.dragOverThrottleDuration),this._nativeDragEnd=t=>this.nativeDragEnd(t),this._nativeDrop=t=>this.nativeDrop(t),this._scroll=t=>this.onScroll(t),this.handler.addEventListener(O,this._dragStart,_),this.handler.addEventListener(T,this._dragStart,_)}getSize(){return i.elementSize(this.element)}getPosition(){return this.position=this.offset.add(this._transformPosition||new i(0,0)),this.position}getCenter(){return this.position.add(this.getSize().mult(.5))}_setDefaultTransition(){this.element.style.transition||(this.element.style.transition=window.getComputedStyle(this.element).transition)}_setTransition(t){let e=this.element.style.transition;const i=`transform ${t}ms`;/transform\s?\d*m?s?/.test(e)?e=e.replace(/transform\s?\d*m?s?/g,i):e?e+=`, ${i}`:e=i,this.element.style.transition!==e&&(this.element.style.transition=e)}_setTranslate(t){this._transformPosition=t;const e=`translate3d(${t.x}px, ${t.y}px, 0px)`;let i=this.element.style.transform;this.shouldRemoveZeroTranslate&&0===t.x&&0===t.y?i=i.replace(/translate3d\([^)]+\)/,""):/translate3d\([^)]+\)/.test(i)?i=i.replace(/translate3d\([^)]+\)/,e):(i&&(i+=" "),i+=e),this.element.style.transform!==i&&(this.element.style.transform=i)}move(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];t=t.clone(),this.position=t,this._setTransition(e),this._setTranslate(t.sub(this.offset)),i||this.emit("drag:move")}pinPosition(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];this.pinnedPosition=t.clone(),this.move(this.pinnedPosition,e,i)}resetPositionToInitial(){this.pinPosition(this.initialPosition)}refreshPosition(){this.setPosition(this.getPosition())}setPosition(t){t=t.clone(),this.position=t,this._setTransition(0),this._setTranslate(t.sub(this.offset))}determineDirection(t){this._previousDirectionPosition||=this._startPosition,this.leftDirection=this._previousDirectionPosition.x<t.x,this.rightDirection=this._previousDirectionPosition.x>t.x,this.upDirection=this._previousDirectionPosition.y>t.y,this.downDirection=this._previousDirectionPosition.y<t.y,this._previousDirectionPosition=t}seemsScrolling(){return+new Date-this._startTouchTimestamp<this.touchDraggingThreshold}shouldUseNativeDragAndDrop(){return this.isTouchEvent?this.nativeDragAndDrop&&this.emulateNativeDragAndDropOnTouch:this.nativeDragAndDrop}dragStart(t){if(this._enable){if(this.stopPropagationOnDragStart&&t.stopPropagation(),this.isTouchEvent=S&&t instanceof window.TouchEvent,this.touchPoint=this._startTouchPoint=new i(this.isTouchEvent?t.changedTouches[0].pageX:t.clientX,this.isTouchEvent?t.changedTouches[0].pageY:t.clientY),this._startPosition=this.getPosition(),this.isTouchEvent&&(this._touchId=t.changedTouches[0].identifier,this._startTouchTimestamp=+new Date),this._startWindowScrollPoint=this.windowScrollPoint,this._startScrollElementsOffset=this.scrollElementsOffset,(t.target instanceof window.HTMLInputElement||t.target instanceof window.HTMLInputElement)&&t.target.focus(),this.shouldUseNativeDragAndDrop())if(this.isTouchEvent&&this.emulateNativeDragAndDropOnTouch){this._startParentsScrollOffset=this.parentsScrollOffset;const t=t=>{this.seemsScrolling()?this.cancelDragging():this.emulateNativeDragAndDrop(t),e()},e=()=>{document.removeEventListener(M,t),document.removeEventListener(z,e)};document.addEventListener(M,t,_),document.addEventListener(z,e,_)}else this.element.addEventListener("dragstart",this._nativeDragStart),this.element.draggable=!0,document.addEventListener(L,this._nativeDragEnd,_);else document.addEventListener(M,this._dragMove,_),document.addEventListener(A,this._dragMove,_),document.addEventListener(z,this._dragEnd,_),document.addEventListener(L,this._dragEnd,_);window.addEventListener("scroll",this._scroll),this.scrollElements.forEach((t=>t.addEventListener("scroll",this._scroll))),this.emit("drag:start")}}dragMove(t){let e;if(this.isDragging=!0,this.isTouchEvent=S&&t instanceof window.TouchEvent,this.isTouchEvent){if(e=I(t,this._touchId),!e)return;if(this.seemsScrolling())return void this.cancelDragging()}t.stopPropagation(),t.preventDefault(),this.touchPoint=new i(this.isTouchEvent?e.pageX:t.clientX,this.isTouchEvent?e.pageY:t.clientY);let s=this._startPosition.add(this.touchPoint.sub(this._startTouchPoint)).add(this.windowScrollPoint.sub(this._startWindowScrollPoint)).add(this.scrollElementsOffset.sub(this._startScrollElementsOffset));s=this.bounding.bound(s,this.getSize()),this.determineDirection(s),this.move(s),this.element.classList.add("dragee-active")}dragEnd(t){this.isTouchEvent=S&&t instanceof window.TouchEvent,this.isTouchEvent&&!I(t,this._touchId)||(this.isDragging&&(t.stopPropagation(),t.preventDefault()),this.dragEndAction(),this.emit("drag:end"),this.cancelDragging(),setTimeout((()=>this.element.classList.remove("dragee-active"))))}onScroll(t){let e=this._startPosition.add(this.touchPoint.sub(this._startTouchPoint)).add(this.windowScrollPoint.sub(this._startWindowScrollPoint)).add(this.scrollElementsOffset.sub(this._startScrollElementsOffset));e=this.bounding.bound(e,this.getSize()),this.nativeDragAndDrop||(this.determineDirection(e),this.move(e))}nativeDragStart(t){t.stopPropagation(),t.dataTransfer.setData("text","FireFox fix"),t.dataTransfer.effectAllowed="move",document.addEventListener("dragover",this._nativeDragOver),document.addEventListener("dragend",this._nativeDragEnd),document.addEventListener("drop",this._nativeDrop)}nativeDragOver(t){if(t.preventDefault(),t.dataTransfer.dropEffect="move",this.element.classList.add("dragee-placeholder"),0===t.clientX&&0===t.clientY)return;this.touchPoint=new i(t.clientX,t.clientY);let e=this._startPosition.add(this.touchPoint.sub(this._startTouchPoint)).add(this.windowScrollPoint.sub(this._startWindowScrollPoint)).add(this.scrollElementsOffset.sub(this._startScrollElementsOffset));e=this.bounding.bound(e,this.getSize()),this.determineDirection(e),this.position=e,this.emit("drag:move")}nativeDragEnd(t){this.element.classList.remove("dragee-placeholder"),this.dragEndAction(),this.emit("drag:end"),document.removeEventListener("dragover",this._nativeDragOver),document.removeEventListener("dragend",this._nativeDragEnd),document.removeEventListener(L,this._nativeDragEnd),document.removeEventListener("drop",this._nativeDrop),window.removeEventListener("scroll",this._scroll),this.scrollElements.forEach((t=>t.removeEventListener("scroll",this._scroll))),this.isDragging=!1,this.element.removeAttribute("draggable"),this.element.removeEventListener("dragstart",this._nativeDragStart),this.element.classList.remove("dragee-active")}nativeDrop(t){t.stopPropagation(),t.preventDefault()}cancelDragging(){document.removeEventListener(M,this._dragMove),document.removeEventListener(A,this._dragMove),document.removeEventListener(z,this._dragEnd),document.removeEventListener(L,this._dragEnd),document.removeEventListener(L,this._nativeDragEnd),window.removeEventListener("scroll",this._scroll),this.scrollElements.forEach((t=>t.removeEventListener("scroll",this._scroll))),this.isDragging=!1,this._previousDirectionPosition=null,this.element.removeAttribute("draggable"),this.element.removeEventListener("dragstart",this._nativeDragStart)}copyStyles(t,e){this.options.copyStyles?this.options.copyStyles(t,e):C(t,e)}emulateNativeDragAndDrop(t){const e=this.container.getBoundingClientRect(),s=this.element.cloneNode(!0);s.style.transform="",this.copyStyles(this.element,s),s.classList.add("dragee-native-emulation"),s.style.position="absolute",document.body.appendChild(s),this.element.classList.add("dragee-placeholder");const n=new B(s,{container:document.body,touchDraggingThreshold:0,bound:t=>t,on:{"drag:move":()=>{const t=new i(e.left,e.top);this.position=n.position.sub(t).sub(this._startWindowScrollPoint).add(this._startParentsScrollOffset),this.determineDirection(this.position),this.emit("drag:move")},"drag:end":()=>{n.destroy(),document.body.removeChild(s),this.element.classList.remove("dragee-placeholder"),this.element.classList.remove("dragee-active"),this.emit("drag:end"),this.dragEndAction(),this.cancelDragging()}}}),o=new i(e.left,e.top);n._startWindowScrollPoint=this._startWindowScrollPoint,n.move(this.pinnedPosition.add(o).add(this.windowScrollPoint).sub(this.parentsScrollOffset)),n.dragStart(t),t.preventDefault()}dragEndAction(){this.pinPosition(this.position)}getRectangle(){return new s(this.position,this.getSize())}refresh(){this.bounding.refresh&&this.bounding.refresh()}destroy(){this.handler.removeEventListener(O,this._dragStart),this.handler.removeEventListener(T,this._dragStart),this.element.removeEventListener("dragstart",this._nativeDragStart),document.removeEventListener(M,this._dragMove),document.removeEventListener(A,this._dragMove),document.removeEventListener(z,this._dragEnd),document.removeEventListener(L,this._dragEnd),document.removeEventListener("dragover",this._nativeDragOver),document.removeEventListener("dragend",this._nativeDragEnd),document.removeEventListener(L,this._nativeDragEnd),document.removeEventListener("drop",this._nativeDrop),this.resetEmitter();const t=R.indexOf(this);t>-1&&R.splice(t,1)}get container(){return this._container=this._container||this.options.container||this.options.parent||n(this.element)}get handler(){return this._handler||("string"==typeof this.options.handler?this._handler=this.element.querySelector(this.options.handler)||this.element:this._handler=this.options.handler||this.element),this._handler}get stopPropagationOnDragStart(){return this.options.stopPropagationOnDragStart||!1}get nativeDragAndDrop(){return this.options.nativeDragAndDrop||!1}get emulateNativeDragAndDropOnTouch(){return this.options.emulateNativeDragAndDropOnTouch||!1}get shouldRemoveZeroTranslate(){return this.options.shouldRemoveZeroTranslate||!1}get touchDraggingThreshold(){return this.options.touchDraggingThreshold||0}get dragOverThrottleDuration(){return this.options.dragOverThrottleDuration||16}get windowScrollPoint(){return new i(window.scrollX,window.scrollY)}get scrollRootContainer(){return this.options.scrollRootContainer||this.container}get scrollElements(){return this._cachedScrollElements?this._cachedScrollElements:this._cachedScrollElements=w(this.element,this.scrollRootContainer)}get scrollElementsOffset(){return new i(this.scrollElements.reduce(((t,e)=>t+e.scrollLeft),0),this.scrollElements.reduce(((t,e)=>t+e.scrollTop),0))}get parents(){return this._cachedParents?this._cachedParents:this._cachedParents=w(this.element,this.container)}get parentsScrollOffset(){return new i(this.parents.reduce(((t,e)=>t+e.scrollLeft),0),this.parents.reduce(((t,e)=>t+e.scrollTop),0))}get enable(){return this._enable}set enable(t){t?this.element.classList.remove("dragee-disable"):this.element.classList.add("dragee-disable"),this._enable=t}}function N(t,e){const i=e.sub(t);return W(Math.atan2(i.y,i.x))}function W(t){for(;t<0;)t+=2*Math.PI;for(;t>2*Math.PI;)t-=2*Math.PI;return t}function q(t,e,s){return(s=s||new i(0,0)).add(new i(e*Math.cos(t),e*Math.sin(t)))}B.emitter=new o,B.emitter.on("draggable:create",(function(t){D.addDraggable(t)}));class ${constructor(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(this.events={},t&&t.on)for(const[e,i]of Object.entries(t.on))this.on(e,i)}emit(t){this.interrupted=!1;const e=[].slice.call(arguments,1);if(this.events[t])for(const i of this.events[t])if(i.apply(...e),this.interrupted)return}interrupt(){this.interrupted=!0}on(t,e){this.events[t]||(this.events[t]=[]),this.events[t].push(e)}prependOn(t,e){this.events[t]||(this.events[t]=[]),this.events[t].unshift(e)}unsubscribe(t,e){if(this.events[t]){const i=this.events[t].indexOf(e);this.events[t].splice(i,1)}}resetEmitter(){this.events={}}resetOn(t){this.events[t]=[]}}function j(t,e,i){const s=[];if(void 0===e&&(e=t,t=0),void 0===i&&(i=1),i>0&&t>=e||i<0&&t<=e)return[];for(let n=t;i>0?n<e:n>e;n+=i)s.push(n);return s}const Y=function(){return Math.round(255*Math.random())},X=function(t){let e=t.toString(16);for(;e.length<2;)e="0"+e;return e};return t.ArcSlider=class extends ${constructor(t,e){let i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};super(i);const n=s.fromElement(t,t);this.options=Object.assign({center:n.getCenter(),radius:n.getMinSide()/2,startAngle:Math.PI,endAngle:0,angles:[Math.PI,-Math.PI/4,0,Math.PI/4,Math.PI/2],time:500},i),this.shiftedCenter=this.options.center,this.area=t,this.init(e)}init(t){const e=this.options.startAngle,i=q(e,this.options.radius,this.shiftedCenter);this.angle=e,this.draggable=new B(t,{container:this.area,bound:f.bounding(this.shiftedCenter,this.options.radius,this.options.startAngle,this.options.endAngle),position:i,on:{"drag:move":()=>this.change()}})}updateAngle(){this.angle=N(this.shiftedCenter,this.draggable.position)}change(){this.updateAngle(),this.emit("arcslider:change",{angle:this.angle})}setAngle(t,e){const i=q(this.angle,this.options.radius,this.shiftedCenter);this.angle=W(t),this.draggable.pinPosition(i,e||0),this.emit("arcslider:change",this.angle)}},t.Chart=class extends ${constructor(t,e){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};super(n);const o=s.fromElement(t,t);this.options=Object.assign({center:o.getCenter(),radius:o.getMinSide()/2,touchRadius:o.getMinSide()/2,boundAngle:Math.PI/9,fillStyles:j(0,e.length).map((()=>`#${X(Y())}${X(Y())}${X(Y())}`)),initAngles:j(-90,270,360/e.length).map((t=>function(t){return t%360*Math.PI/180}(t))),limitImg:null,limitImgOffset:new i(0,0)},n),this.area=t,this.areaRectangle=o,this.init(e)}init(t){this.canvas=e(this.area,this.areaRectangle),this.context=this.canvas.getContext("2d"),this.draggables=t.map(((t,e)=>{const s=this.options.initAngles[e],n=i.elementSize(t).mult(.5),o=q(s,this.options.touchRadius,this.options.center.sub(n));return new B(t,{container:this.area,bound:f.bounding(this.options.center.sub(n),this.options.touchRadius,this.getBoundAngle(e,!1),this.getBoundAngle(e,!0)),position:o,on:{"drag:move":()=>this.draw()}})})),this.isInit=!0,this.draw()}updateAngles(){this.angles=this.draggables.map((t=>{const e=t.getSize().mult(.5);return N(this.options.center.sub(e),t.position)}))}getBoundAngle(t,e){const i=e?1:-1;return()=>{let e=(t+i)%this.angles.length;return e<0&&(e+=this.angles.length),W(this.angles[e]-i*this.options.boundAngle)}}draw(){this.isInit&&(this.updateAngles(),this.context.clearRect(0,0,this.areaRectangle.size.x,this.areaRectangle.size.y),this.draggables.forEach(((t,e)=>{this.drawArc(this.context,this.options.center,this.options.radius,e)})),this.draggables.forEach(((t,e)=>{this.drawLimitImg(e)})),this.emit("chart:draw"))}createClone(t){let i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!this.isInit)return;const n=s.fromElement(t,t),o=Object.assign({center:n.getCenter(),radius:n.getMinSide()/2,fillStyles:this.options.fillStyles},i),r=e(t,n).getContext("2d"),a={draw:()=>{r.clearRect(0,0,n.size.x,n.size.y),this.draggables.forEach(((t,e)=>{this.drawArc(r,o.center,o.radius,e)}))}};return a.draw(),a}getFillStyle(t){return"function"==typeof this.options.fillStyles[t]&&(this.options.fillStyles[t]=this.options.fillStyles[t].call(this)),this.options.fillStyles[t]}drawArc(t,e,i,s){const n=this.angles[s],o=this.angles[(s+1)%this.angles.length],r=this.getFillStyle(s);t.beginPath(),t.moveTo(e.x,e.y),t.arc(e.x,e.y,i,n,o,!1),t.lineTo(e.x,e.y),t.closePath(),t.fillStyle=r,t.fill()}drawLimitImg(t){let e,s;if(this.options.limitImg&&(s=this.options.limitImg instanceof Array?this.options.limitImg[t]:this.options.limitImg),s){const n=W(this.angles[t]);e=new i(0,-s.height/2),e=e.add(this.options.limitImgOffset),this.context.translate(this.areaRectangle.size.x/2,this.areaRectangle.size.y/2),this.context.rotate(n),this.context.drawImage(s,e.x,e.y),this.context.setTransform(1,0,0,1,0,0)}}getAnglesDiff(){const t=this.angles.slice(1);let e=this.angles[0];return t.push(e),t.map((t=>{const i=W(t-e);return e=t,i}))}getPercent(){return this.getAnglesDiff().map((t=>t/(2*Math.PI)))}getArcBisectrixs(){return this.getAnglesDiff().map(((t,e)=>W(this.angles[e]+t/2)))}getArcOnPoint(t){const e=N(this.options.center,t);if(r(this.options.center,t)>this.options.radius)return-1;let i,s,n=-1;for(i=0;i<this.angles.length;i++)(-1===n||this.angles[n]>this.angles[i])&&(n=i);for(i=0,s=n;i<this.angles.length&&!(e<this.angles[s]);i++,s=(i+n)%this.angles.length);return--s<0&&(s+=this.angles.length),s}setAngles(t){this.angles=t,this.draggables.forEach(((t,e)=>{const i=this.angles[e],s=t.getSize().mult(.5),n=q(i,this.options.touchRadius,this.options.center.sub(s));t.moveAndSave(n)})),this.draw()}setActiveArc(t){const e=function(t,e){const i=[];return-1!==t&&(i.push(t),i.push((t+1)%e)),i}(t,this.draggables.length);this.activeArcIndex=t,this.draggables.forEach(((t,i)=>{t.enable=-1!==e.indexOf(i)})),this.draw()}},t.Spider=class{constructor(t,e){let i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};const n=s.fromElement(t,t);this.options=Object.assign({angle:0,dAngle:2*Math.PI/e.length,center:n.getCenter(),startRadius:50,endRadius:n.getMinSide()/2,lineWidth:2,strokeStyle:"#ff5577",fillStyle:"rgba(150,255,50,0.8)"},i),this.area=t,this.areaRectangle=n,this.init(e)}init(t){this.canvas=e(this.area,this.areaRectangle),this.context=this.canvas.getContext("2d"),this.draggables=t.map(((t,e)=>{const s=this.options.angle+e*this.options.dAngle,n=i.elementSize(t).mult(.5),o=q(s,this.options.startRadius,this.options.center).sub(n),r=q(s,this.options.endRadius,this.options.center).sub(n);return new B(t,{container:this.area,bound:p.bounding(o,r),position:o,on:{"drag:move":()=>this.draw()}})})),this.isInit=!0,this.draw()}draw(){if(!this.isInit)return;this.context.clearRect(0,0,this.areaRectangle.size.x,this.areaRectangle.size.y),this.context.beginPath();let t=this.draggables[0].getCenter();this.context.moveTo(t.x,t.y);for(let e=0;e<this.draggables.length;e++)t=this.draggables[e].getCenter(),this.context.lineTo(t.x,t.y);this.context.closePath(),this.context.lineWidth=this.options.lineWidth,this.context.strokeStyle=this.options.strokeStyle,this.context.stroke(),this.context.fillStyle=this.options.fillStyle,this.context.fill()}},t}({});