vue-frame-selection/dist/lib.umd.js

vue-frame-selection for vue2 and vue3

(function(u,d){typeof exports=="object"&&typeof module!="undefined"?d(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],d):(u=typeof globalThis!="undefined"?globalThis:u||self,d(u["vue-frame-selection"]={},u.Vue))})(this,function(u,d){"use strict";function E(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var S=E(d);function b(e){return L(e)}function M(e){return(e==null?void 0:e.nodeName)==="#document"}function $(e,t){return t===1?e:{left:e.left*t,top:e.top*t,width:e.width*t,height:e.height*t,right:e.right*t,bottom:e.bottom*t}}const N="position: absolute;pointer-events: none;border: 1px solid rgb(45, 140, 240);background: rgba(45, 140, 240, 0.2);display:none;",_=()=>({left:0,top:0,width:0,height:0,right:0,bottom:0});class v{constructor(t,i){var o;this.domRect=_(),this.selectionPagePositionRect=_(),this.selectionDOMPositionRect=_(),this.startX=0,this.startY=0,this.scale=1,this.moving=!1,this.RectangleElementClassName="frame-selection-rectangle-element",this._selectStart=n=>{var f,h,g,p,P,O;const r=this.targetDom.querySelectorAll(this.config.stopSelector),c=w(n.target,Array.from(r));if(this.config.stopSelector&&c||((f=this.config)!=null&&f.stopPropagation&&n.stopPropagation(),n.button!==0)||((h=this.config)==null?void 0:h.disabled)&&((g=this.config)==null?void 0:g.disabled()))return;this.rectangleElement=this._createRectangleElement(),this.moving=!0,this.domRect=this._getDOMRect(this.targetDom);const s=(n.pageX+((p=this.wrapDOM)==null?void 0:p.scrollLeft)-window.pageXOffset)/this.scale,l=(n.pageY+((P=this.wrapDOM)==null?void 0:P.scrollTop)-window.pageYOffset)/this.scale;this._setStartPosition(s-2,l-2),this.selectionPagePositionRect=this.getSelectionPagePosition(s,l),this.selectionDOMPositionRect=this.getSelectionDOMPosition(this.selectionPagePositionRect),this._updateRectangleElementStyle(this.selectionDOMPositionRect);const m=(O=this.config)==null?void 0:O.onMousedown;m&&m(n),document.addEventListener("mouseup",this._selectEnd),document.addEventListener("mousemove",this._selecting)},this._selecting=n=>{var m,f,h;if(!this.moving)return;const r=(n.pageX+((m=this.wrapDOM)==null?void 0:m.scrollLeft)-window.pageXOffset)/this.scale,c=(n.pageY+((f=this.wrapDOM)==null?void 0:f.scrollTop)-window.pageYOffset)/this.scale;this.selectionPagePositionRect=this.getSelectionPagePosition(r,c),this._setRectangleElementStyle("display","block");const s=n;this.selectionDOMPositionRect=this.getSelectionDOMPosition(this.selectionPagePositionRect),s.selectionDOMRect=JSON.parse(JSON.stringify(this.selectionDOMPositionRect)),this._updateRectangleElementStyle(this.selectionDOMPositionRect);const l=(h=this.config)==null?void 0:h.onMousemove;l&&l(s)},this._selectEnd=n=>{var c;document.removeEventListener("mousemove",this._selecting),document.removeEventListener("mouseup",this._selectEnd),this._setRectangleElementStyle("display","none"),this.moving=!1;const r=(c=this.config)==null?void 0:c.onMouseup;r&&r(n)};let a=document;this.config=i,b(t)?a=t:t&&(this.config=t),this.targetDom=a,M(this.targetDom)?this.wrapDOM=document.body:this.wrapDOM=this.targetDom,this.scale=((o=this.config)==null?void 0:o.scale)||1,this._setWrapDomPositionStyle(),this._addMousedownListener(this.targetDom)}getSelectionPagePosition(t,i){var s,l;const a=this.domRect;t=t-2,i=i-2;const o=Math.max(a.left,Math.min(this.startX,t)),n=Math.max(a.top,Math.min(this.startY,i)),r=Math.max(this.startX,Math.min(t,((s=this.wrapDOM)==null?void 0:s.scrollWidth)+a.left-2))-o,c=Math.max(this.startY,Math.min(i,((l=this.wrapDOM)==null?void 0:l.scrollHeight)+a.top-2))-n;return{left:o,top:n,width:r,height:c,right:o+r,bottom:n+c}}getSelectionDOMPosition(t){const{left:i,top:a,width:o,height:n,right:r,bottom:c}=t,{left:s,top:l}=this.domRect;return{left:i-s,top:a-l,width:o,height:n,right:r-s,bottom:c-l}}isInTheSelection({left:t,top:i,width:a,height:o}){const{left:n,top:r,width:c,height:s}=this.selectionDOMPositionRect;return t+a>n&&n+c>t&&i+o>r&&r+s>i}destroy(){this.rectangleElement&&this.wrapDOM.removeChild(this.rectangleElement),this._removeMousedownListener(this.targetDom),this.rectangleElement=null,this.targetDom=null,this.domRect=null,this.selectionPagePositionRect=null,this.selectionDOMPositionRect=null,this.startX=null,this.startY=null,this.moving=null,this.wrapDOM=null}_setWrapDomPositionStyle(){var i;if((i=this.config)!=null&&i.notSetWrapPosition)return;getComputedStyle(this.wrapDOM).position==="static"&&(this.wrapDOM.style.position="relative")}_createRectangleElement(){var a,o,n,r,c;let t=Array.from((a=this.wrapDOM)==null?void 0:a.children).find(s=>Array.from(s.classList).includes(this.RectangleElementClassName));t&&((o=this.wrapDOM)==null||o.removeChild(t)),t=document.createElement("div");const i=(n=this.config)==null?void 0:n.className;return t.className=this.RectangleElementClassName+(i?` ${i}`:""),t.style.cssText=N+`z-index: ${((r=this.config)==null?void 0:r.zIndex)||99999999}`,(c=this.wrapDOM)==null||c.appendChild(t),t}_setStartPosition(t,i){this.startX=t,this.startY=i}_addMousedownListener(t){t==null||t.addEventListener("mousedown",this._selectStart)}_removeMousedownListener(t){t==null||t.removeEventListener("mousedown",this._selectStart)}_getDOMRect(t){const i=M(t)?{left:0,top:0,width:window.innerWidth,height:window.innerHeight,right:window.innerWidth,bottom:window.innerHeight}:t==null?void 0:t.getBoundingClientRect();return $(i,1/this.scale)}_setRectangleElementStyle(t,i){this.rectangleElement.style[t]=i}_updateRectangleElementStyle(t){const{left:i,top:a,width:o,height:n}=t;this._setRectangleElementStyle("left",`${i}px`),this._setRectangleElementStyle("top",`${a}px`),this._setRectangleElementStyle("width",`${o}px`),this._setRectangleElementStyle("height",`${n}px`)}}function L(e){return!e||typeof e!="object"?!1:typeof HTMLElement=="function"?e instanceof HTMLElement||e instanceof Document:e&&typeof e=="object"&&e.nodeType&&typeof e.nodeName=="string"}function w(e,t){return t.some(i=>e===i)?!0:e.parentNode?w(e.parentNode,t):!1}var T=S.default.extend({name:"FrameSelectionGroup",componentName:"SomFrameSelectionGroup",provide(){return{SomFrameSelection:this}},props:{className:{type:[String]},scale:{type:[Number]},zIndex:{type:[Number]},disabled:{type:[Boolean]},stopPropagation:{type:[Boolean]},stopSelector:{type:[String]},notSetWrapPosition:{type:[Boolean]}},data(){return{selection:null,fields:[]}},computed:{cacheDoms(){return this.fields.map(e=>e.$refs.dom)}},methods:{isInTheSelection(e){if(this.selection)return this.selection.isInTheSelection(e)},getInnerBoxRectList(){return this.cacheDoms.map(e=>({left:e.offsetLeft,top:e.offsetTop,width:e.offsetWidth,height:e.offsetHeight}))}},mounted(){this.selection=new v(this.$refs.wrap,{onMousedown:e=>{this.$emit("mousedown",e)},onMousemove:e=>{this.$emit("mousemove",e)},onMouseup:e=>{this.$emit("mouseup",e)},className:this.className,disabled:()=>this.disabled,stopSelector:this.stopSelector,stopPropagation:this.stopPropagation,notSetWrapPosition:this.notSetWrapPosition,scale:this.scale,zIndex:this.zIndex})}}),C=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{ref:"wrap",staticClass:"som-frame-selection-group-wrapper"},[e._t("default")],2)},x=[];function R(e,t,i,a,o,n,r,c){var s=typeof e=="function"?e.options:e;t&&(s.render=t,s.staticRenderFns=i,s._compiled=!0),a&&(s.functional=!0),n&&(s._scopeId="data-v-"+n);var l;if(r?(l=function(h){h=h||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!h&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(h=__VUE_SSR_CONTEXT__),o&&o.call(this,h),h&&h._registeredComponents&&h._registeredComponents.add(r)},s._ssrRegister=l):o&&(l=c?function(){o.call(this,(s.functional?this.parent:this).$root.$options.shadowRoot)}:o),l)if(s.functional){s._injectStyles=l;var m=s.render;s.render=function(g,p){return l.call(p),m(g,p)}}else{var f=s.beforeCreate;s.beforeCreate=f?[].concat(f,l):[l]}return{exports:e,options:s}}const D={};var F=R(T,C,x,!1,I,null,null,null);function I(e){for(let t in D)this[t]=D[t]}var W=function(){return F.exports}(),X=S.default.extend({name:"FrameSelectionItem",componentName:"SomFrameSelectionItem",inject:["SomFrameSelection"],mounted(){this.SomFrameSelection.fields.push(this)},beforeDestroy(){this.SomFrameSelection.fields.splice(this.SomFrameSelection.fields.indexOf(this),1)}}),Y=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{ref:"dom",staticClass:"som-frame-selection-inner-box"},[e._t("default")],2)},k=[];const y={};var z=R(X,Y,k,!1,H,null,null,null);function H(e){for(let t in y)this[t]=y[t]}var B=function(){return z.exports}();u.FrameSelectionGroup=W,u.FrameSelectionItem=B,u.MouseSelection=v,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});