yk-element-components-v2/hotArea/index.umd.js

(function(P,v){typeof exports=="object"&&typeof module<"u"?module.exports=v(require("vue")):typeof define=="function"&&define.amd?define(["vue"],v):(P=typeof globalThis<"u"?globalThis:P||self,P.index=v(P.Vue))})(this,function(P){"use strict";const b=(e=>e&&typeof e=="object"&&"default"in e?e:{default:e})(P),i={MIN_LIMIT:20,DECIMAL_PLACES:4};i.getMultiple=(e=i.DECIMAL_PLACES)=>10**e,i.decimalPoint=(e=0)=>Math.round(e*i.getMultiple())/i.getMultiple()||0,i.getOffset=(e={})=>({width:e.clientWidth||0,height:e.clientHeight||0}),i.getPageX=e=>"pageX"in e?e.pageX:e.touches[0].pageX,i.getPageY=e=>"pageY"in e?e.pageY:e.touches[0].pageY,i.getDistanceX=(e,t)=>i.getPageX(e)-(t.getBoundingClientRect().left+window.pageXOffset),i.getDistanceY=(e,t)=>i.getPageY(e)-(t.getBoundingClientRect().top+window.pageYOffset),i.dealEdgeValue=(e,t,n)=>(t.hasOwnProperty("left")&&t.left<0&&(t.left=0,t.width=e.width+e.left),t.hasOwnProperty("top")&&t.top<0&&(t.top=0,t.height=e.height+e.top),!t.hasOwnProperty("left")&&t.hasOwnProperty("width")&&e.left+t.width>n.width&&(t.width=n.width-e.left),!t.hasOwnProperty("top")&&t.hasOwnProperty("height")&&e.top+t.height>n.height&&(t.height=n.height-e.top),Object.assign(e,t)),i.dealTL=(e,t,n,o=i.MIN_LIMIT)=>{const a={},s=e.width-t,h=e.height-n;return s>=Math.min(o,e.width)&&Object.assign(a,{width:s,left:e.left+t}),h>=Math.min(o,e.height)&&Object.assign(a,{height:h,top:e.top+n}),a},i.dealTC=(e,t,n,o=i.MIN_LIMIT)=>{let a={};const s=e.height-n;return s>=Math.min(o,e.height)&&(a={height:s,top:e.top+n}),a},i.dealTR=(e,t,n,o=i.MIN_LIMIT)=>{const a={},s=e.width+t,h=e.height-n;return s>=Math.min(o,e.width)&&Object.assign(a,{width:s}),h>=Math.min(o,e.height)&&Object.assign(a,{height:h,top:e.top+n}),a},i.dealCL=(e,t,n,o=i.MIN_LIMIT)=>{const a={},s=e.width-t;return s>=Math.min(o,e.width)&&Object.assign(a,{width:s,left:e.left+t}),a},i.dealCR=(e,t,n,o=i.MIN_LIMIT)=>{const a={},s=e.width+t;return s>=Math.min(o,e.width)&&Object.assign(a,{width:s}),a},i.dealBL=(e,t,n,o=i.MIN_LIMIT)=>{const a={},s=e.width-t,h=e.height+n;return s>=Math.min(o,e.width)&&Object.assign(a,{width:s,left:e.left+t}),h>=Math.min(o,e.height)&&Object.assign(a,{height:h}),a},i.dealBC=(e,t,n,o=i.MIN_LIMIT)=>{const a={},s=e.height+n;return s>=Math.min(o,e.height)&&Object.assign(a,{height:s}),a},i.dealBR=(e,t,n,o=i.MIN_LIMIT)=>{const a={},s=e.width+t,h=e.height+n;return s>=Math.min(o,e.width)&&Object.assign(a,{width:s}),h>=Math.min(o,e.height)&&Object.assign(a,{height:h}),a};const M={bind(e,t,n){e.addEventListener("mousedown",o);function o(a){const s=a.target.dataset.pointer;if(!s)return;a.stopPropagation();const h=e.parentNode,u=n.context.setting,d=i.getOffset(h.parentNode);let r={width:i.getOffset(h).width||0,height:i.getOffset(h).height||0,top:u.topPer*d.height||0,left:u.leftPer*d.width||0},p=i.getPageX(a),m=i.getPageY(a),g;n.context.handlehideZone(!0),window.addEventListener("mousemove",c),window.addEventListener("mouseup",l);function c(f){f.preventDefault(),g=!0;const w=i.getPageX(f)-p,_=i.getPageY(f)-m;p=i.getPageX(f),m=i.getPageY(f);const Z=i[s](r,w,_);r=i.dealEdgeValue(r,Z,d),Object.assign(h.style,{top:`${r.top}px`,left:`${r.left}px`,width:`${r.width}px`,height:`${r.height}px`})}function l(){if(g){g=!1;const f={topPer:i.decimalPoint(r.top/d.height),leftPer:i.decimalPoint(r.left/d.width),widthPer:i.decimalPoint(r.width/d.width),heightPer:i.decimalPoint(r.height/d.height)};n.context.changeInfo(f),Object.assign(h.style,{top:`${r.top}px`,left:`${r.left}px`,width:`${r.width}px`,height:`${r.height}px`})}n.context.handlehideZone(!1),window.removeEventListener("mousemove",c),window.removeEventListener("mouseup",l)}}e.$destroy=()=>e.removeEventListener("mousedown",o)},unbind(e){e.$destroy()}},I={bind(e,t,n){e.addEventListener("mousedown",o);function o(a){a.stopPropagation();const s=i.getOffset(e.parentNode),h=i.getPageX(a),u=i.getPageY(a);let d,r,p;window.addEventListener("mousemove",m),window.addEventListener("mouseup",g);function m(c){c.preventDefault(),p=!0,n.context.handlehideZone(!0);const l=n.context.setting;let f=i.getPageX(c)-h,w=i.getPageY(c)-u;l.topPer=l.topPer||0,l.leftPer=l.leftPer||0,d=i.decimalPoint(w/s.height+l.topPer),r=i.decimalPoint(f/s.width+l.leftPer),d<0&&(d=0,w=-s.height*l.topPer),r<0&&(r=0,f=-s.width*l.leftPer),d+l.heightPer>1&&(d=1-l.heightPer,w=s.height*(d-l.topPer)),r+l.widthPer>1&&(r=1-l.widthPer,f=s.width*(r-l.leftPer)),e.style.transform=`translate(${f}px, ${w}px)`}function g(){p&&(p=!1,e.style.transform="translate(0, 0)",n.context.changeInfo({topPer:d,leftPer:r})),n.context.handlehideZone(!1),window.removeEventListener("mousemove",m),window.removeEventListener("mouseup",g)}}e.$destroy=()=>e.removeEventListener("mousedown",o)},unbind(e){e.$destroy()}};function $(e){const t=["\u96F6","\u4E00","\u4E8C","\u4E09","\u56DB","\u4E94","\u516D","\u4E03","\u516B","\u4E5D"],n=["","\u5341","\u767E","\u5343","\u4E07","\u4EBF"];let o=e.toString(),a=o.length,s="";for(let h=0;h<a;h++)s+=t[parseInt(o[h])]+n[a-1-h];return s=s.replace(/零[十百千]/g,"\u96F6"),s=s.replace(/零+/g,"\u96F6"),s=s.replace(/^零+/,""),s=s.replace(/零+$/,""),s[s.length-1]==="\u96F6"&&(s=s.slice(0,-1)),s}function z(e,t,n,o,a,s,h,u){var d=typeof e=="function"?e.options:e;t&&(d.render=t,d.staticRenderFns=n,d._compiled=!0),o&&(d.functional=!0),s&&(d._scopeId="data-v-"+s);var r;if(h?(r=function(g){g=g||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!g&&typeof __VUE_SSR_CONTEXT__<"u"&&(g=__VUE_SSR_CONTEXT__),a&&a.call(this,g),g&&g._registeredComponents&&g._registeredComponents.add(h)},d._ssrRegister=r):a&&(r=u?function(){a.call(this,(d.functional?this.parent:this).$root.$options.shadowRoot)}:a),r)if(d.functional){d._injectStyles=r;var p=d.render;d.render=function(c,l){return r.call(l),p(c,l)}}else{var m=d.beforeCreate;d.beforeCreate=m?[].concat(m,r):[r]}return{exports:e,options:d}}const y={name:"Zone",directives:{changeSize:M,dragItem:I},props:{index:{type:[Number,String],default:""},setting:{type:[Object],default:()=>({})},sortType:{type:String,default:"text"},hotTitle:{type:String,default:"\u70ED\u533A"},bgImg:{type:String,default:""},isFullImg:{type:Boolean,default:!1}},data(){return{zoneTop:"",zoneLeft:"",zoneWidth:"",zoneHeight:"",hideZone:!1,tooSmall:!1}},watch:{setting:{handler(e){this.setZoneInfo(e)},deep:!0}},mounted(){this.setZoneInfo(this.setting)},computed:{getSortNumber(){return this.sortType==="text"?$(this.index+1):this.index+1}},methods:{setZoneInfo(e){this.zoneTop=this.getZoneStyle(e.topPer),this.zoneLeft=this.getZoneStyle(e.leftPer),this.zoneWidth=this.getZoneStyle(e.widthPer),this.zoneHeight=this.getZoneStyle(e.heightPer),this.tooSmall=e.widthPer<.01&&e.heightPer<.01},handlehideZone(e=!0){this.hideZone!==e&&(this.hideZone=e)},changeInfo(e={}){const{index:t}=this;this.$emit("changeInfo",{info:e,index:t})},delItem(e){this.$emit("delItem",e)},getZoneStyle(e){return`${(e||0)*100}%`}}};var L=function(){var t=this,n=t._self._c;return n("div",{directives:[{name:"drag-item",rawName:"v-drag-item"}],style:{top:t.zoneTop,left:t.zoneLeft,width:t.zoneWidth,height:t.zoneHeight}},[n("ul",{directives:[{name:"change-size",rawName:"v-change-size"}],staticClass:"hz-m-box",class:{"hz-z-hidden":t.tooSmall,"hz-m-hoverbox":!t.hideZone},style:{background:t.bgImg?`url(${t.bgImg}) no-repeat`:"",backgroundSize:t.bgImg?t.isFullImg?"100% 100%":"contain":""}},[n("li",{staticClass:"hz-u-index",attrs:{title:`${t.hotTitle}${t.getSortNumber}`}},[t._v(" "+t._s(t.hotTitle)+t._s(t.getSortNumber)+" ")]),n("li",{directives:[{name:"show",rawName:"v-show",value:!t.hideZone,expression:"!hideZone"}],staticClass:"hz-u-close",attrs:{title:"\u5220\u9664\u8BE5\u70ED\u533A"},on:{click:function(o){return o.stopPropagation(),t.delItem(t.index)}}},[n("svg",{staticClass:"hz-u-close-icon",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"}},[n("path",{attrs:{d:`M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1
                  191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0
                  0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z`}})])]),n("li",{staticClass:"hz-u-square hz-u-square-tl",attrs:{"data-pointer":"dealTL"}}),n("li",{staticClass:"hz-u-square hz-u-square-tc",attrs:{"data-pointer":"dealTC"}}),n("li",{staticClass:"hz-u-square hz-u-square-tr",attrs:{"data-pointer":"dealTR"}}),n("li",{staticClass:"hz-u-square hz-u-square-cl",attrs:{"data-pointer":"dealCL"}}),n("li",{staticClass:"hz-u-square hz-u-square-cr",attrs:{"data-pointer":"dealCR"}}),n("li",{staticClass:"hz-u-square hz-u-square-bl",attrs:{"data-pointer":"dealBL"}}),n("li",{staticClass:"hz-u-square hz-u-square-bc",attrs:{"data-pointer":"dealBC"}}),n("li",{staticClass:"hz-u-square hz-u-square-br",attrs:{"data-pointer":"dealBR"}})])])},x=[],O=z(y,L,x,!1,null,null,null,null);const T=O.exports,S={name:"yk-hot-area",directives:{addItem:{bind(e,t,n){const o=i.MIN_LIMIT;e.addEventListener("mousedown",a);function a(s){s.preventDefault();let h={top:i.getDistanceY(s,e),left:i.getDistanceX(s,e),width:0,height:0};const u=i.getOffset(e),d={topPer:i.decimalPoint(h.top/u.height),leftPer:i.decimalPoint(h.left/u.width),widthPer:0,heightPer:0};let r=i.getPageX(s),p=i.getPageY(s);n.context.addItem(d),window.addEventListener("mousemove",m),window.addEventListener("mouseup",g);function m(c){c.preventDefault();const l=i.getPageX(c)-r,f=i.getPageY(c)-p;r=i.getPageX(c),p=i.getPageY(c);const w=0,_=i.dealBR(h,l,f,w);h=i.dealEdgeValue(h,_,u),Object.assign(e.lastElementChild.style,{top:`${h.top}px`,left:`${h.left}px`,width:`${h.width}px`,height:`${h.height}px`})}function g(){const c={topPer:i.decimalPoint(h.top/u.height),leftPer:i.decimalPoint(h.left/u.width),widthPer:i.decimalPoint(h.width/u.width),heightPer:i.decimalPoint(h.height/u.height)};n.context.isOverRange()?n.context.overRange():u.height<o&&h.width>o?n.context.changeItem(Object.assign(c,{topPer:0,heightPer:1})):u.width<o&&h.height>o?n.context.changeItem(Object.assign(c,{leftper:0,widthPer:1})):h.width>o&&h.height>o?n.context.changeItem(c):n.context.eraseItem(),window.removeEventListener("mousemove",m),window.removeEventListener("mouseup",g)}}e.$destroy=()=>e.removeEventListener("mousedown",a)},unbind(e){e.$destroy()}}},components:{Zone:T},props:{image:{type:String,required:!0},value:{type:Array,default:()=>[]},max:{type:Number,default:1/0},sortType:{type:String,default:"text"},hotTitle:{type:String,default:"\u70ED\u533A"},isFullImg:{type:Boolean,default:!1}},computed:{zones:{get(){return this.value},set(e){this.$emit("input",e)}}},methods:{findCurSelect(){return this.value.find(e=>e.selected)},onSelect(e){const t=this.findCurSelect();t&&(t.selected=0),e&&(b.default.set(e,"selected",1),this.$emit("select-zone",e))},changeInfo(e){const{info:t,index:n}=e;this.changeItem(t,n)},addItem(e){this.zones.push(e),this.hasChange(),this.$emit("add",e),this.onSelect(e)},eraseItem(e=this.zones.length-1){this.removeItem(e),this.$emit("erase",e)},isOverRange(){const{max:e,zones:t}=this;return e&&t.length>e},overRange(){const e=this.zones.length-1;this.removeItem(e),this.$emit("overRange",e)},removeItem(e=this.zones.length-1){const t=this.zones[e];t===this.findCurSelect()&&this.onSelect(null),this.zones.splice(e,1),this.hasChange(),this.$emit("remove",t,e)},changeItem(e,t=this.zones.length-1){Object.assign(this.zones[t],e),this.hasChange()},hasChange(){this.zones.forEach(e=>{Math.abs(e.widthPer-e.heightPer)<.01?e.isCircle=!0:e.isCircle=!1}),this.$emit("change",this.zones)}}};var E=function(){var t=this,n=t._self._c;return n("div",{ref:"content",staticClass:"hz-m-wrap"},[n("img",{staticClass:"hz-u-img",attrs:{src:t.image,alt:"\u70ED\u533A\u80CC\u666F"}}),n("div",{directives:[{name:"add-item",rawName:"v-add-item"}],staticClass:"hz-m-area"},t._l(t.zones,function(o,a){return n("zone",{key:a,staticClass:"hz-m-item",class:{"hz-m-item-selected":o.selected},attrs:{bgImg:o.bgImg,index:a,setting:o,sortType:t.sortType,hotTitle:t.hotTitle,isFullImg:t.isFullImg},on:{delItem:function(s){return t.removeItem(s)},changeInfo:function(s){return t.changeInfo(s)}},nativeOn:{click:function(s){return t.onSelect(o)}}})}),1)])},N=[],X=z(S,E,N,!1,null,null,null,null);const C=X.exports;return{install(e){e.component(C.name,C)}}});