@kirkw/vue2-image-hotzone 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(()=>{var e={861(e,t,n){"use strict";n.r(t);var i=n(601),r=n.n(i),o=n(314),a=n.n(o)()(r());a.push([e.id,"\n.hotzone-wrapper[data-v-658dd234] {\n position: relative;\n display: inline-block;\n width: 100%;\n cursor: crosshair;\n line-height: 0;\n user-select: none;\n}\n.hotzone-wrapper img[data-v-658dd234] {\n width: 100%;\n height: auto;\n display: block;\n pointer-events: none;\n user-select: none;\n}\n.drawing-rect[data-v-658dd234] {\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n z-index: 5;\n}\n.zone-rect[data-v-658dd234] {\n position: absolute;\n top: 0;\n left: 0;\n box-sizing: border-box;\n z-index: 10;\n}\n.zone-label[data-v-658dd234] {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: center;\n pointer-events: none;\n z-index: 25;\n}\n.handle[data-v-658dd234] {\n position: absolute;\n z-index: 20;\n box-sizing: border-box;\n}\n\n/* 手柄位置 */\n.handle.nw[data-v-658dd234] { top: -5px; left: -5px; cursor: nw-resize;\n}\n.handle.n[data-v-658dd234] { top: -5px; left: calc(50% - 5px); cursor: n-resize;\n}\n.handle.ne[data-v-658dd234] { top: -5px; right: -5px; cursor: ne-resize;\n}\n.handle.e[data-v-658dd234] { top: calc(50% - 5px); right: -5px; cursor: e-resize;\n}\n.handle.se[data-v-658dd234] { bottom: -5px; right: -5px; cursor: se-resize;\n}\n.handle.s[data-v-658dd234] { bottom: -5px; left: calc(50% - 5px); cursor: s-resize;\n}\n.handle.sw[data-v-658dd234] { bottom: -5px; left: -5px; cursor: sw-resize;\n}\n.handle.w[data-v-658dd234] { top: calc(50% - 5px); left: -5px; cursor: w-resize;\n}\n",""]);const s=a;n.d(t,["default",0,s])},314(e){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var n="",i=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),i&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),i&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n}).join("")},t.i=function(e,n,i,r,o){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(i)for(var s=0;s<this.length;s++){var d=this[s][0];null!=d&&(a[d]=!0)}for(var l=0;l<e.length;l++){var h=[].concat(e[l]);i&&a[h[0]]||(void 0!==o&&(void 0===h[5]||(h[1]="@layer".concat(h[5].length>0?" ".concat(h[5]):""," {").concat(h[1],"}")),h[5]=o),n&&(h[2]?(h[1]="@media ".concat(h[2]," {").concat(h[1],"}"),h[2]=n):h[2]=n),r&&(h[4]?(h[1]="@supports (".concat(h[4],") {").concat(h[1],"}"),h[4]=r):h[4]="".concat(r)),t.push(h))}},t}},601(e){"use strict";e.exports=function(e){return e[1]}},0(e,t,n){var i=n(861);i.__esModule&&(i=i.default),"string"==typeof i&&(i=[[e.id,i,""]]),i.locals&&(e.exports=i.locals),(0,n(534).A)("5d0ec59d",i,!1,{})},534(e,t,n){"use strict";function i(e,t){for(var n=[],i={},r=0;r<t.length;r++){var o=t[r],a=o[0],s={id:e+":"+r,css:o[1],media:o[2],sourceMap:o[3]};i[a]?i[a].parts.push(s):n.push(i[a]={id:a,parts:[s]})}return n}n.d(t,{A:()=>v});var r="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!r)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var o={},a=r&&(document.head||document.getElementsByTagName("head")[0]),s=null,d=0,l=!1,h=function(){},u=null,c="data-vue-ssr-id",f="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function v(e,t,n,r){l=n,u=r||{};var a=i(e,t);return p(a),function(t){for(var n=[],r=0;r<a.length;r++){var s=a[r];(d=o[s.id]).refs--,n.push(d)}for(t?p(a=i(e,t)):a=[],r=0;r<n.length;r++){var d;if(0===(d=n[r]).refs){for(var l=0;l<d.parts.length;l++)d.parts[l]();delete o[d.id]}}}}function p(e){for(var t=0;t<e.length;t++){var n=e[t],i=o[n.id];if(i){i.refs++;for(var r=0;r<i.parts.length;r++)i.parts[r](n.parts[r]);for(;r<n.parts.length;r++)i.parts.push(m(n.parts[r]));i.parts.length>n.parts.length&&(i.parts.length=n.parts.length)}else{var a=[];for(r=0;r<n.parts.length;r++)a.push(m(n.parts[r]));o[n.id]={id:n.id,refs:1,parts:a}}}}function g(){var e=document.createElement("style");return e.type="text/css",a.appendChild(e),e}function m(e){var t,n,i=document.querySelector("style["+c+'~="'+e.id+'"]');if(i){if(l)return h;i.parentNode.removeChild(i)}if(f){var r=d++;i=s||(s=g()),t=y.bind(null,i,r,!1),n=y.bind(null,i,r,!0)}else i=g(),t=x.bind(null,i),n=function(){i.parentNode.removeChild(i)};return t(e),function(i){if(i){if(i.css===e.css&&i.media===e.media&&i.sourceMap===e.sourceMap)return;t(e=i)}else n()}}var b,w=(b=[],function(e,t){return b[e]=t,b.filter(Boolean).join("\n")});function y(e,t,n,i){var r=n?"":i.css;if(e.styleSheet)e.styleSheet.cssText=w(t,r);else{var o=document.createTextNode(r),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(o,a[t]):e.appendChild(o)}}function x(e,t){var n=t.css,i=t.media,r=t.sourceMap;if(i&&e.setAttribute("media",i),u.ssrId&&e.setAttribute(c,t.id),r&&(n+="\n/*# sourceURL="+r.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}}};const t={};function n(i){const r=t[i];if(void 0!==r)return r.exports;const o=t[i]={id:i,exports:{}};return e[i](o,o.exports,n),o.exports}n.n=e=>{const t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{if(Array.isArray(t))for(var i=0;i<t.length;){var r=t[i++],o=t[i++];n.o(e,r)?0===o&&i++:0===o?Object.defineProperty(e,r,{enumerable:!0,value:t[i++]}):Object.defineProperty(e,r,{enumerable:!0,get:o})}else for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};let i={};(()=>{"use strict";n.r(i),n.d(i,{default:()=>u});var e=function(){var e=this,t=e._self._c;return t("div",{ref:"wrapper",staticClass:"hotzone-wrapper",on:{mousedown:e.onWrapperMouseDown,touchstart:function(t){return t.preventDefault(),e.onWrapperTouchStart.apply(null,arguments)}}},[t("img",{ref:"img",attrs:{src:e.src,draggable:"false"},on:{load:e.updateSize}}),e._v(" "),e.drawing?t("div",{staticClass:"drawing-rect",style:e.drawingStyle}):e._e(),e._v(" "),e._l(e.localZones,function(n){return t("div",{key:n.id,staticClass:"zone-rect",class:{active:e.activeZone===n.id,hover:e.hoveredZone===n.id&&e.activeZone!==n.id},style:e.getZoneStyle(n),on:{mousedown:function(t){return t.stopPropagation(),e.onZoneMouseDown(t,n)},mouseenter:function(t){return e.onZoneMouseEnter(n)},mouseleave:function(t){return e.onZoneMouseLeave(n)},touchstart:function(t){return t.stopPropagation(),t.preventDefault(),e.onZoneTouchStart(t,n)}}},[e.mergedConfig.showLabel&&(n.label||n.title)?t("span",{staticClass:"zone-label",style:e.getLabelStyle(n)},[e._v("\n "+e._s(n.label||n.title||"")+"\n ")]):e._e(),e._v(" "),e.mergedConfig.enableResize&&e.mergedConfig.showHandles?e._l(e.handles,function(i){return t("span",{key:i,class:["handle",i],style:e.getHandleStyle(n),on:{mousedown:function(t){return t.stopPropagation(),e.onHandleMouseDown(t,n,i)},touchstart:function(t){return t.stopPropagation(),t.preventDefault(),e.onHandleTouchStart(t,n,i)}}})}):e._e()],2)})],2)};e._withStripped=!0;var t=["borderColor","fillColor","activeBorderColor","activeFillColor"];function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,i)}return n}function a(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach(function(t){s(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function s(e,t,n){return(t=function(e){var t=function(e){if("object"!=r(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=r(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==r(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const d={name:"ImageHotzone",props:{src:{type:String,required:!0},zones:{type:Array,default:function(){return[]}},theme:{type:Object,default:function(){return{}}},config:{type:Object,default:function(){return{}}}},data:function(){return{localZones:[],wrapperWidth:0,wrapperHeight:0,drawing:!1,drawStart:{x:0,y:0},drawCurrent:{x:0,y:0},activeZone:null,hoveredZone:null,dragData:null,handles:["nw","n","ne","e","se","s","sw","w"],updatingFromParent:!1,updatingFromLocal:!1,drawEventsBound:!1,dragEventsBound:!1,resizeTimer:null,updateTimer:null,rafId:null}},computed:{themeConfig:function(){return a(a({},{drawingLineColor:"#4f6ef7",drawingLineWidth:2,drawingFillColor:"rgba(79, 110, 247, 0.15)",zoneBorderColor:"#4f6ef7",zoneBorderWidth:2,zoneFillColor:"rgba(79, 110, 247, 0.2)",zoneBorderStyle:"solid",zoneOpacity:1,zoneActiveBorderColor:"#e53e3e",zoneActiveFillColor:"rgba(229, 62, 62, 0.15)",zoneActiveBorderStyle:"solid",zoneActiveShadow:"0 0 0 2px rgba(229, 62, 62, 0.3)",zoneHoverBorderColor:"#718096",zoneHoverFillColor:"rgba(113, 128, 150, 0.2)",handleSize:10,handleColor:"#ffffff",handleBorderColor:"#4f6ef7",handleBorderWidth:2,handleActiveBorderColor:"#e53e3e",handleHoverColor:"#4f6ef7",handleActiveHoverColor:"#e53e3e",handleBorderRadius:"3px",handleShadow:"0 1px 4px rgba(0,0,0,0.15)",labelColor:"#333333",labelFontSize:"12px",labelFontWeight:"600",labelBackgroundColor:"transparent",labelPadding:"2px 4px",labelBorderRadius:"0px",labelMaxWidth:"90%",labelTextShadow:"none",transitionDuration:"0s",transitionTiming:"ease"}),this.theme)},mergedConfig:function(){return a(a({},{minSize:2,maxZones:20,showLabel:!0,enableResize:!0,enableMove:!0,enableDraw:!0,enableDelete:!0,showHandles:!0,allowOverlap:!0,snapToGrid:!1,gridSize:5,useAnimationFrame:!0,debounceUpdate:!0}),this.config)},drawingStyle:function(){if(!this.drawing)return{display:"none"};var e=this.drawStart.x,t=this.drawStart.y,n=this.drawCurrent.x,i=this.drawCurrent.y,r=this.themeConfig;return{left:Math.min(e,n)+"px",top:Math.min(t,i)+"px",width:Math.abs(n-e)+"px",height:Math.abs(i-t)+"px",border:"".concat(r.drawingLineWidth,"px dashed ").concat(r.drawingLineColor),backgroundColor:r.drawingFillColor}}},watch:{zones:{immediate:!0,handler:function(e){var t=this;this.updatingFromLocal?this.updatingFromLocal=!1:(this.updatingFromParent=!0,e&&Array.isArray(e)&&(this.localZones=e.map(function(e){return t.normalizeZone(e)})),this.$nextTick(function(){t.updatingFromParent=!1}))}},localZones:{deep:!0,handler:function(e){var t=this;this.updatingFromParent||(this.mergedConfig.debounceUpdate?(clearTimeout(this.updateTimer),this.updateTimer=setTimeout(function(){t.emitZonesUpdate(e)},50)):this.emitZonesUpdate(e))}}},mounted:function(){var e=this;this.$nextTick(function(){e.updateSize()}),window.addEventListener("resize",this.onResize),document.addEventListener("keydown",this.onKeyDown)},beforeDestroy:function(){window.removeEventListener("resize",this.onResize),document.removeEventListener("keydown",this.onKeyDown),this.unbindDrawEvents(),this.unbindDragEvents(),clearTimeout(this.resizeTimer),clearTimeout(this.updateTimer),this.rafId&&cancelAnimationFrame(this.rafId)},methods:{emitZonesUpdate:function(e){var t=this;this.updatingFromLocal=!0;var n=e.map(function(e){return t.cleanZoneData(e)});this.$emit("update:zones",n),this.$emit("change",n)},normalizeZone:function(e){return{id:e.id||this.generateId(),x:Number(e.x)||0,y:Number(e.y)||0,width:Number(e.width)||0,height:Number(e.height)||0,label:e.label||e.title||"",title:e.title||e.label||"",data:e.data||{},style:e.style||{},disabled:e.disabled||!1,visible:!1!==e.visible,draggable:!1!==e.draggable,resizable:!1!==e.resizable}},cleanZoneData:function(e){return{id:e.id,x:Number(e.x.toFixed(2)),y:Number(e.y.toFixed(2)),width:Number(e.width.toFixed(2)),height:Number(e.height.toFixed(2)),label:e.label,title:e.title,data:e.data,disabled:e.disabled,visible:e.visible,draggable:e.draggable,resizable:e.resizable,style:e.style}},generateId:function(){return"zone_"+Date.now()+"_"+Math.random().toString(36).substr(2,9)},updateSize:function(){var e=this.$refs.wrapper;if(e){var t=this.wrapperWidth,n=this.wrapperHeight;this.wrapperWidth=e.offsetWidth,this.wrapperHeight=e.offsetHeight,t===this.wrapperWidth&&n===this.wrapperHeight||this.$emit("resize",{width:this.wrapperWidth,height:this.wrapperHeight})}},onResize:function(){var e=this;clearTimeout(this.resizeTimer),this.resizeTimer=setTimeout(function(){e.updateSize()},100)},getMousePos:function(e){var t=this.$refs.wrapper;if(!t)return{x:0,y:0};var n=t.getBoundingClientRect(),i=e.touches?e.touches[0].clientX:e.clientX,r=e.touches?e.touches[0].clientY:e.clientY;return{x:i-n.left,y:r-n.top}},toPercent:function(e,t){if(0===this.wrapperWidth||0===this.wrapperHeight)return{x:0,y:0};var n=e/this.wrapperWidth*100,i=t/this.wrapperHeight*100;if(this.mergedConfig.snapToGrid){var r=this.mergedConfig.gridSize||5;n=Math.round(n/r)*r,i=Math.round(i/r)*r}return{x:n,y:i}},getZoneStyle:function(e){var n,i,o,s,d,l,h,u=this.themeConfig,c=this.activeZone===e.id,f=this.hoveredZone===e.id&&!c;if(c)n=(null===(l=e.style)||void 0===l?void 0:l.activeBorderColor)||u.zoneActiveBorderColor,i=(null===(h=e.style)||void 0===h?void 0:h.activeFillColor)||u.zoneActiveFillColor,o=u.zoneActiveBorderStyle,s=u.zoneActiveShadow,d=1;else if(f)n=u.zoneHoverBorderColor,i=u.zoneHoverFillColor,o=u.zoneBorderStyle,s="none",d=1;else{var v,p;n=(null===(v=e.style)||void 0===v?void 0:v.borderColor)||u.zoneBorderColor,i=(null===(p=e.style)||void 0===p?void 0:p.fillColor)||u.zoneFillColor,o=u.zoneBorderStyle,s="none",d=u.zoneOpacity}var g={left:e.x/100*this.wrapperWidth+"px",top:e.y/100*this.wrapperHeight+"px",width:e.width/100*this.wrapperWidth+"px",height:e.height/100*this.wrapperHeight+"px",border:"".concat(u.zoneBorderWidth,"px ").concat(o," ").concat(n),backgroundColor:i,boxShadow:s,opacity:!1!==e.visible?d:0,cursor:e.disabled?"not-allowed":this.mergedConfig.enableMove&&!1!==e.draggable?"move":"default",pointerEvents:e.disabled?"none":"auto",transition:c||f?"box-shadow ".concat(u.transitionDuration," ").concat(u.transitionTiming):"none"};if(e.style&&"object"===r(e.style)){var m=e.style,b=(m.borderColor,m.fillColor,m.activeBorderColor,m.activeFillColor,function(e,t){if(null==e)return{};var n,i,r=function(e,t){if(null==e)return{};var n={};for(var i in e)if({}.hasOwnProperty.call(e,i)){if(-1!==t.indexOf(i))continue;n[i]=e[i]}return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)n=o[i],-1===t.indexOf(n)&&{}.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}(m,t));return a(a({},g),b)}return g},getHandleStyle:function(e){var t=this.themeConfig,n=this.activeZone===e.id,i=t.handleSize;return this.mergedConfig.showHandles?{width:i+"px",height:i+"px",backgroundColor:t.handleColor,border:"".concat(t.handleBorderWidth,"px solid ").concat(n?t.handleActiveBorderColor:t.handleBorderColor),borderRadius:t.handleBorderRadius,boxShadow:t.handleShadow,transition:"none"}:{display:"none"}},getLabelStyle:function(e){var t,n,i=this.themeConfig,r=this.activeZone===e.id;return{color:(null===(t=e.style)||void 0===t?void 0:t.labelColor)||i.labelColor,fontSize:i.labelFontSize,fontWeight:i.labelFontWeight,backgroundColor:(null===(n=e.style)||void 0===n?void 0:n.labelBackgroundColor)||i.labelBackgroundColor,padding:i.labelPadding,borderRadius:i.labelBorderRadius,maxWidth:i.labelMaxWidth,textShadow:i.labelTextShadow,position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",textAlign:"center",pointerEvents:"none",zIndex:25,lineHeight:"1.2",opacity:r?1:.8}},onKeyDown:function(e){"Delete"!==e.key&&"Backspace"!==e.key||!this.activeZone||this.mergedConfig.enableDelete&&(e.preventDefault(),this.removeZone(this.activeZone),this.$emit("zone-deleted-by-keyboard",this.activeZone)),"Escape"===e.key&&(this.activeZone=null,this.unbindDragEvents(),this.unbindDrawEvents(),this.drawing=!1,this.dragData=null,this.$emit("selection-cleared"))},bindDrawEvents:function(){this.drawEventsBound||(document.addEventListener("mousemove",this.onDrawMove),document.addEventListener("mouseup",this.onDrawEnd),document.addEventListener("touchmove",this.onDrawMove,{passive:!1}),document.addEventListener("touchend",this.onDrawEnd),this.drawEventsBound=!0)},unbindDrawEvents:function(){this.drawEventsBound&&(document.removeEventListener("mousemove",this.onDrawMove),document.removeEventListener("mouseup",this.onDrawEnd),document.removeEventListener("touchmove",this.onDrawMove),document.removeEventListener("touchend",this.onDrawEnd),this.drawEventsBound=!1)},bindDragEvents:function(){this.dragEventsBound||(document.addEventListener("mousemove",this.onDragMove),document.addEventListener("mouseup",this.onDragEnd),document.addEventListener("touchmove",this.onDragMove,{passive:!1}),document.addEventListener("touchend",this.onDragEnd),this.dragEventsBound=!0)},unbindDragEvents:function(){this.dragEventsBound&&(document.removeEventListener("mousemove",this.onDragMove),document.removeEventListener("mouseup",this.onDragEnd),document.removeEventListener("touchmove",this.onDragMove),document.removeEventListener("touchend",this.onDragEnd),this.dragEventsBound=!1)},onWrapperMouseDown:function(e){0===e.button&&this.mergedConfig.enableDraw&&this.startDraw(e)},onWrapperTouchStart:function(e){this.mergedConfig.enableDraw&&this.startDraw(e)},startDraw:function(e){if(this.unbindDragEvents(),this.dragData=null,this.localZones.length>=(this.mergedConfig.maxZones||20))this.$emit("max-reached",this.mergedConfig.maxZones);else{var t=this.getMousePos(e);this.drawing=!0,this.drawStart=t,this.drawCurrent=t,this.activeZone=null,this.$emit("draw-start",{x:t.x,y:t.y}),this.bindDrawEvents()}},onDrawMove:function(e){var t=this;if(this.drawing)if(e.preventDefault(),this.mergedConfig.useAnimationFrame){if(this.rafId)return;this.rafId=requestAnimationFrame(function(){t.rafId=null,t.drawCurrent=t.getMousePos(e);var n=t.drawStart.x,i=t.drawStart.y,r=t.drawCurrent.x,o=t.drawCurrent.y,a=Math.min(n,r),s=Math.min(i,o),d=Math.abs(r-n),l=Math.abs(o-i);t.$emit("drawing",{x:a,y:s,width:d,height:l})})}else{this.drawCurrent=this.getMousePos(e);var n=this.drawStart.x,i=this.drawStart.y,r=this.drawCurrent.x,o=this.drawCurrent.y,a=Math.min(n,r),s=Math.min(i,o),d=Math.abs(r-n),l=Math.abs(o-i);this.$emit("drawing",{x:a,y:s,width:d,height:l})}else this.unbindDrawEvents()},onDrawEnd:function(){if(this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.drawing){this.unbindDrawEvents();var e=this.drawStart.x,t=this.drawStart.y,n=this.drawCurrent.x,i=this.drawCurrent.y,r=Math.min(e,n),o=Math.min(t,i),s=Math.abs(n-e),d=Math.abs(i-t),l=(this.mergedConfig.minSize||2)/100*Math.min(this.wrapperWidth,this.wrapperHeight);if(this.$emit("draw-end",{x:r,y:o,width:s,height:d,valid:s>=l&&d>=l}),s>=l&&d>=l){var h=this.toPercent(r,o),u=this.toPercent(s,d),c={id:this.generateId(),x:h.x,y:h.y,width:u.x,height:u.y,label:"热区".concat(this.localZones.length+1),title:"热区".concat(this.localZones.length+1),data:{},disabled:!1,visible:!0,draggable:!0,resizable:!0,style:{}};this.localZones.push(c),this.activeZone=c.id,this.$emit("zone-created",a({},c))}this.drawing=!1}else this.unbindDrawEvents()},onZoneMouseEnter:function(e){this.hoveredZone=e.id,this.$emit("zone-hover",a({},e))},onZoneMouseLeave:function(e){this.hoveredZone===e.id&&(this.hoveredZone=null,this.$emit("zone-leave",a({},e)))},onZoneMouseDown:function(e,t){0===e.button&&this.mergedConfig.enableMove&&(t.disabled||!1===t.draggable||(this.startDrag(e,t,null),this.$emit("zone-click",a({},t))))},onZoneTouchStart:function(e,t){this.mergedConfig.enableMove&&(t.disabled||!1===t.draggable||(this.startDrag(e,t,null),this.$emit("zone-click",a({},t))))},onHandleMouseDown:function(e,t,n){0===e.button&&this.mergedConfig.enableResize&&(t.disabled||!1===t.resizable||this.startDrag(e,t,n))},onHandleTouchStart:function(e,t,n){this.mergedConfig.enableResize&&(t.disabled||!1===t.resizable||this.startDrag(e,t,n))},startDrag:function(e,t,n){this.unbindDrawEvents(),this.drawing=!1,this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null);var i=this.activeZone;this.activeZone=t.id,i!==t.id&&this.$emit("zone-focus",a({},t));var r=this.getMousePos(e);this.dragData={zoneId:t.id,startMouse:r,startZone:a({},t),handle:n},this.$emit("drag-start",{zone:a({},t),handle:n,type:n?"resize":"move"}),this.bindDragEvents()},onDragMove:function(e){var t=this;if(this.dragData)if(e.preventDefault(),this.mergedConfig.useAnimationFrame){if(this.rafId)return;this.rafId=requestAnimationFrame(function(){t.rafId=null,t.processDrag(e)})}else this.processDrag(e);else this.unbindDragEvents()},processDrag:function(e){var t=this;if(this.dragData){var n=this.getMousePos(e),i=(n.x-this.dragData.startMouse.x)/this.wrapperWidth*100,r=(n.y-this.dragData.startMouse.y)/this.wrapperHeight*100,o=this.localZones.findIndex(function(e){return e.id===t.dragData.zoneId});if(-1===o)return this.unbindDragEvents(),void(this.dragData=null);var s=a({},this.localZones[o]),d=this.dragData.startZone,l=this.mergedConfig.minSize||2;if(this.dragData.handle){var h=this.dragData.handle,u=d.x,c=d.y,f=d.width,v=d.height;h.includes("e")&&(f+=i),h.includes("w")&&(u+=i,f-=i),h.includes("s")&&(v+=r),h.includes("n")&&(c+=r,v-=r),f<l&&(h.includes("w")&&(u=d.x+d.width-l),f=l),v<l&&(h.includes("n")&&(c=d.y+d.height-l),v=l),u<0&&(f+=u,u=0),c<0&&(v+=c,c=0),u+f>100&&(f=100-u),c+v>100&&(v=100-c),s=a(a({},s),{},{x:u,y:c,width:f,height:v}),this.$emit("resizing",{zone:a({},s),handle:h,originalZone:a({},d)})}else{var p=d.x+i,g=d.y+r;p=Math.max(0,Math.min(p,100-s.width)),g=Math.max(0,Math.min(g,100-s.height)),s.x=p,s.y=g,this.$emit("moving",{zone:a({},s),originalZone:a({},d)})}this.$set(this.localZones,o,s),this.$emit("zone-updated",a({},s))}},onDragEnd:function(){var e=this;if(this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.dragData){var t=this.localZones.find(function(t){return t.id===e.dragData.zoneId});t&&this.$emit("drag-end",{zone:a({},t),type:this.dragData.handle?"resize":"move"})}this.unbindDragEvents(),this.dragData=null},addZone:function(e){if(this.localZones.length>=(this.mergedConfig.maxZones||20))return this.$emit("max-reached",this.mergedConfig.maxZones),null;var t=this.normalizeZone({id:e.id||this.generateId(),x:e.x||10,y:e.y||10,width:e.width||20,height:e.height||20,label:e.label||"热区".concat(this.localZones.length+1),title:e.title||e.label||"热区".concat(this.localZones.length+1),data:e.data||{},disabled:e.disabled||!1,visible:!1!==e.visible,draggable:!1!==e.draggable,resizable:!1!==e.resizable,style:e.style||{}});return t.x=Math.max(0,Math.min(t.x,100-t.width)),t.y=Math.max(0,Math.min(t.y,100-t.height)),this.localZones.push(t),this.activeZone=t.id,this.$emit("zone-created",a({},t)),t},addZones:function(e){var t=this;return Array.isArray(e)?e.map(function(e){return t.addZone(e)}).filter(Boolean):[]},updateZone:function(e,t){var n=this.localZones.findIndex(function(t){return t.id===e});if(-1===n)return!1;var i=this.localZones[n],r=a({},i);return void 0!==t.x&&(r.x=Number(t.x)),void 0!==t.y&&(r.y=Number(t.y)),void 0!==t.width&&(r.width=Number(t.width)),void 0!==t.height&&(r.height=Number(t.height)),void 0!==t.label&&(r.label=t.label),void 0!==t.title&&(r.title=t.title),void 0!==t.data&&(r.data=a(a({},i.data),t.data)),void 0!==t.disabled&&(r.disabled=t.disabled),void 0!==t.visible&&(r.visible=t.visible),void 0!==t.draggable&&(r.draggable=t.draggable),void 0!==t.resizable&&(r.resizable=t.resizable),void 0!==t.style&&(r.style=a(a({},i.style),t.style)),r.x=Math.max(0,Math.min(r.x,100-r.width)),r.y=Math.max(0,Math.min(r.y,100-r.height)),this.$set(this.localZones,n,r),this.$emit("zone-updated",a({},r)),!0},setActiveZone:function(e){if(null===e)return this.activeZone=null,void this.$emit("selection-cleared");var t=this.localZones.find(function(t){return t.id===e});t&&(this.activeZone=e,this.$emit("zone-focus",a({},t)))},getActiveZone:function(){var e=this;if(!this.activeZone)return null;var t=this.localZones.find(function(t){return t.id===e.activeZone});return t?a({},t):null},getZone:function(e){var t=this.localZones.find(function(t){return t.id===e});return t?a({},t):null},getAllZones:function(){return this.localZones.map(function(e){return a({},e)})},removeZone:function(e){var t=this.localZones.findIndex(function(t){return t.id===e});if(-1!==t){var n=this.localZones.splice(t,1)[0];return this.activeZone===e&&(this.activeZone=null),this.hoveredZone===e&&(this.hoveredZone=null),this.$emit("zone-deleted",n),!0}return!1},clearAll:function(){this.unbindDrawEvents(),this.unbindDragEvents(),this.drawing=!1,this.dragData=null,this.activeZone=null,this.hoveredZone=null,this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.localZones=[],this.$emit("all-cleared")},exportZones:function(){var e=this;return this.localZones.map(function(t){return e.cleanZoneData(t)})},importZones:function(e){Array.isArray(e)&&(this.clearAll(),this.addZones(e),this.$emit("zones-imported",this.localZones.length))},getSize:function(){return{width:this.wrapperWidth,height:this.wrapperHeight}},disableZone:function(e){this.updateZone(e,{disabled:!0})},enableZone:function(e){this.updateZone(e,{disabled:!1})},hideZone:function(e){this.updateZone(e,{visible:!1})},showZone:function(e){this.updateZone(e,{visible:!0})}}};n(0);var l=function(e,t,n,i,r,o){var a,s="function"==typeof e?e.options:e;if(t&&(s.render=t,s.staticRenderFns=[],s._compiled=!0),o&&(s._scopeId="data-v-"+o),a)if(s.functional){s._injectStyles=a;var d=s.render;s.render=function(e,t){return a.call(t),d(e,t)}}else{var l=s.beforeCreate;s.beforeCreate=l?[].concat(l,a):[a]}return{exports:e,options:s}}(d,e,0,0,0,"658dd234");const h=l.exports;h.install=function(e){e.component(h.name,h)},"undefined"!=typeof window&&window.Vue&&window.Vue.use(h);const u=h})(),module.exports=i})();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var e={861(e,t,n){n.r(t);var i=n(601),r=n.n(i),o=n(314),a=n.n(o)()(r());a.push([e.id,"\n.hotzone-wrapper[data-v-658dd234] {\n position: relative;\n display: inline-block;\n width: 100%;\n cursor: crosshair;\n line-height: 0;\n user-select: none;\n}\n.hotzone-wrapper img[data-v-658dd234] {\n width: 100%;\n height: auto;\n display: block;\n pointer-events: none;\n user-select: none;\n}\n.drawing-rect[data-v-658dd234] {\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n z-index: 5;\n}\n.zone-rect[data-v-658dd234] {\n position: absolute;\n top: 0;\n left: 0;\n box-sizing: border-box;\n z-index: 10;\n}\n.zone-label[data-v-658dd234] {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: center;\n pointer-events: none;\n z-index: 25;\n}\n.handle[data-v-658dd234] {\n position: absolute;\n z-index: 20;\n box-sizing: border-box;\n}\n\n/* 手柄位置 */\n.handle.nw[data-v-658dd234] { top: -5px; left: -5px; cursor: nw-resize;\n}\n.handle.n[data-v-658dd234] { top: -5px; left: calc(50% - 5px); cursor: n-resize;\n}\n.handle.ne[data-v-658dd234] { top: -5px; right: -5px; cursor: ne-resize;\n}\n.handle.e[data-v-658dd234] { top: calc(50% - 5px); right: -5px; cursor: e-resize;\n}\n.handle.se[data-v-658dd234] { bottom: -5px; right: -5px; cursor: se-resize;\n}\n.handle.s[data-v-658dd234] { bottom: -5px; left: calc(50% - 5px); cursor: s-resize;\n}\n.handle.sw[data-v-658dd234] { bottom: -5px; left: -5px; cursor: sw-resize;\n}\n.handle.w[data-v-658dd234] { top: calc(50% - 5px); left: -5px; cursor: w-resize;\n}\n",""]);const s=a;n.d(t,["default",0,s])},314(e){e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var n="",i=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),i&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),i&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n}).join("")},t.i=function(e,n,i,r,o){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(i)for(var s=0;s<this.length;s++){var d=this[s][0];null!=d&&(a[d]=!0)}for(var l=0;l<e.length;l++){var h=[].concat(e[l]);i&&a[h[0]]||(void 0!==o&&(void 0===h[5]||(h[1]="@layer".concat(h[5].length>0?" ".concat(h[5]):""," {").concat(h[1],"}")),h[5]=o),n&&(h[2]?(h[1]="@media ".concat(h[2]," {").concat(h[1],"}"),h[2]=n):h[2]=n),r&&(h[4]?(h[1]="@supports (".concat(h[4],") {").concat(h[1],"}"),h[4]=r):h[4]="".concat(r)),t.push(h))}},t}},601(e){e.exports=function(e){return e[1]}},0(e,t,n){var i=n(861);i.__esModule&&(i=i.default),"string"==typeof i&&(i=[[e.id,i,""]]),i.locals&&(e.exports=i.locals),(0,n(534).A)("5d0ec59d",i,!1,{})},534(e,t,n){function i(e,t){for(var n=[],i={},r=0;r<t.length;r++){var o=t[r],a=o[0],s={id:e+":"+r,css:o[1],media:o[2],sourceMap:o[3]};i[a]?i[a].parts.push(s):n.push(i[a]={id:a,parts:[s]})}return n}n.d(t,{A:()=>v});var r="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!r)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var o={},a=r&&(document.head||document.getElementsByTagName("head")[0]),s=null,d=0,l=!1,h=function(){},u=null,c="data-vue-ssr-id",f="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function v(e,t,n,r){l=n,u=r||{};var a=i(e,t);return p(a),function(t){for(var n=[],r=0;r<a.length;r++){var s=a[r];(d=o[s.id]).refs--,n.push(d)}for(t?p(a=i(e,t)):a=[],r=0;r<n.length;r++){var d;if(0===(d=n[r]).refs){for(var l=0;l<d.parts.length;l++)d.parts[l]();delete o[d.id]}}}}function p(e){for(var t=0;t<e.length;t++){var n=e[t],i=o[n.id];if(i){i.refs++;for(var r=0;r<i.parts.length;r++)i.parts[r](n.parts[r]);for(;r<n.parts.length;r++)i.parts.push(m(n.parts[r]));i.parts.length>n.parts.length&&(i.parts.length=n.parts.length)}else{var a=[];for(r=0;r<n.parts.length;r++)a.push(m(n.parts[r]));o[n.id]={id:n.id,refs:1,parts:a}}}}function g(){var e=document.createElement("style");return e.type="text/css",a.appendChild(e),e}function m(e){var t,n,i=document.querySelector("style["+c+'~="'+e.id+'"]');if(i){if(l)return h;i.parentNode.removeChild(i)}if(f){var r=d++;i=s||(s=g()),t=y.bind(null,i,r,!1),n=y.bind(null,i,r,!0)}else i=g(),t=x.bind(null,i),n=function(){i.parentNode.removeChild(i)};return t(e),function(i){if(i){if(i.css===e.css&&i.media===e.media&&i.sourceMap===e.sourceMap)return;t(e=i)}else n()}}var b,w=(b=[],function(e,t){return b[e]=t,b.filter(Boolean).join("\n")});function y(e,t,n,i){var r=n?"":i.css;if(e.styleSheet)e.styleSheet.cssText=w(t,r);else{var o=document.createTextNode(r),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(o,a[t]):e.appendChild(o)}}function x(e,t){var n=t.css,i=t.media,r=t.sourceMap;if(i&&e.setAttribute("media",i),u.ssrId&&e.setAttribute(c,t.id),r&&(n+="\n/*# sourceURL="+r.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}}};const t={};function n(i){const r=t[i];if(void 0!==r)return r.exports;const o=t[i]={id:i,exports:{}};return e[i](o,o.exports,n),o.exports}n.n=e=>{const t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{if(Array.isArray(t))for(var i=0;i<t.length;){var r=t[i++],o=t[i++];n.o(e,r)?0===o&&i++:0===o?Object.defineProperty(e,r,{enumerable:!0,value:t[i++]}):Object.defineProperty(e,r,{enumerable:!0,get:o})}else for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i=function(){var e=this,t=e._self._c;return t("div",{ref:"wrapper",staticClass:"hotzone-wrapper",on:{mousedown:e.onWrapperMouseDown,touchstart:function(t){return t.preventDefault(),e.onWrapperTouchStart.apply(null,arguments)}}},[t("img",{ref:"img",attrs:{src:e.src,draggable:"false"},on:{load:e.updateSize}}),e._v(" "),e.drawing?t("div",{staticClass:"drawing-rect",style:e.drawingStyle}):e._e(),e._v(" "),e._l(e.localZones,function(n){return t("div",{key:n.id,staticClass:"zone-rect",class:{active:e.activeZone===n.id,hover:e.hoveredZone===n.id&&e.activeZone!==n.id},style:e.getZoneStyle(n),on:{mousedown:function(t){return t.stopPropagation(),e.onZoneMouseDown(t,n)},mouseenter:function(t){return e.onZoneMouseEnter(n)},mouseleave:function(t){return e.onZoneMouseLeave(n)},touchstart:function(t){return t.stopPropagation(),t.preventDefault(),e.onZoneTouchStart(t,n)}}},[e.mergedConfig.showLabel&&(n.label||n.title)?t("span",{staticClass:"zone-label",style:e.getLabelStyle(n)},[e._v("\n "+e._s(n.label||n.title||"")+"\n ")]):e._e(),e._v(" "),e.mergedConfig.enableResize&&e.mergedConfig.showHandles?e._l(e.handles,function(i){return t("span",{key:i,class:["handle",i],style:e.getHandleStyle(n),on:{mousedown:function(t){return t.stopPropagation(),e.onHandleMouseDown(t,n,i)},touchstart:function(t){return t.stopPropagation(),t.preventDefault(),e.onHandleTouchStart(t,n,i)}}})}):e._e()],2)})],2)};i._withStripped=!0;var r=["borderColor","fillColor","activeBorderColor","activeFillColor"];function o(e){return o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o(e)}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,i)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach(function(t){d(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function d(e,t,n){return(t=function(e){var t=function(e){if("object"!=o(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=o(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==o(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const l={name:"ImageHotzone",props:{src:{type:String,required:!0},zones:{type:Array,default:function(){return[]}},theme:{type:Object,default:function(){return{}}},config:{type:Object,default:function(){return{}}}},data:function(){return{localZones:[],wrapperWidth:0,wrapperHeight:0,drawing:!1,drawStart:{x:0,y:0},drawCurrent:{x:0,y:0},activeZone:null,hoveredZone:null,dragData:null,handles:["nw","n","ne","e","se","s","sw","w"],updatingFromParent:!1,updatingFromLocal:!1,drawEventsBound:!1,dragEventsBound:!1,resizeTimer:null,updateTimer:null,rafId:null}},computed:{themeConfig:function(){return s(s({},{drawingLineColor:"#4f6ef7",drawingLineWidth:2,drawingFillColor:"rgba(79, 110, 247, 0.15)",zoneBorderColor:"#4f6ef7",zoneBorderWidth:2,zoneFillColor:"rgba(79, 110, 247, 0.2)",zoneBorderStyle:"solid",zoneOpacity:1,zoneActiveBorderColor:"#e53e3e",zoneActiveFillColor:"rgba(229, 62, 62, 0.15)",zoneActiveBorderStyle:"solid",zoneActiveShadow:"0 0 0 2px rgba(229, 62, 62, 0.3)",zoneHoverBorderColor:"#718096",zoneHoverFillColor:"rgba(113, 128, 150, 0.2)",handleSize:10,handleColor:"#ffffff",handleBorderColor:"#4f6ef7",handleBorderWidth:2,handleActiveBorderColor:"#e53e3e",handleHoverColor:"#4f6ef7",handleActiveHoverColor:"#e53e3e",handleBorderRadius:"3px",handleShadow:"0 1px 4px rgba(0,0,0,0.15)",labelColor:"#333333",labelFontSize:"12px",labelFontWeight:"600",labelBackgroundColor:"transparent",labelPadding:"2px 4px",labelBorderRadius:"0px",labelMaxWidth:"90%",labelTextShadow:"none",transitionDuration:"0s",transitionTiming:"ease"}),this.theme)},mergedConfig:function(){return s(s({},{minSize:2,maxZones:20,showLabel:!0,enableResize:!0,enableMove:!0,enableDraw:!0,enableDelete:!0,showHandles:!0,allowOverlap:!0,snapToGrid:!1,gridSize:5,useAnimationFrame:!0,debounceUpdate:!0}),this.config)},drawingStyle:function(){if(!this.drawing)return{display:"none"};var e=this.drawStart.x,t=this.drawStart.y,n=this.drawCurrent.x,i=this.drawCurrent.y,r=this.themeConfig;return{left:Math.min(e,n)+"px",top:Math.min(t,i)+"px",width:Math.abs(n-e)+"px",height:Math.abs(i-t)+"px",border:"".concat(r.drawingLineWidth,"px dashed ").concat(r.drawingLineColor),backgroundColor:r.drawingFillColor}}},watch:{zones:{immediate:!0,handler:function(e){var t=this;this.updatingFromLocal?this.updatingFromLocal=!1:(this.updatingFromParent=!0,e&&Array.isArray(e)&&(this.localZones=e.map(function(e){return t.normalizeZone(e)})),this.$nextTick(function(){t.updatingFromParent=!1}))}},localZones:{deep:!0,handler:function(e){var t=this;this.updatingFromParent||(this.mergedConfig.debounceUpdate?(clearTimeout(this.updateTimer),this.updateTimer=setTimeout(function(){t.emitZonesUpdate(e)},50)):this.emitZonesUpdate(e))}}},mounted:function(){var e=this;this.$nextTick(function(){e.updateSize()}),window.addEventListener("resize",this.onResize),document.addEventListener("keydown",this.onKeyDown)},beforeDestroy:function(){window.removeEventListener("resize",this.onResize),document.removeEventListener("keydown",this.onKeyDown),this.unbindDrawEvents(),this.unbindDragEvents(),clearTimeout(this.resizeTimer),clearTimeout(this.updateTimer),this.rafId&&cancelAnimationFrame(this.rafId)},methods:{emitZonesUpdate:function(e){var t=this;this.updatingFromLocal=!0;var n=e.map(function(e){return t.cleanZoneData(e)});this.$emit("update:zones",n),this.$emit("change",n)},normalizeZone:function(e){return{id:e.id||this.generateId(),x:Number(e.x)||0,y:Number(e.y)||0,width:Number(e.width)||0,height:Number(e.height)||0,label:e.label||e.title||"",title:e.title||e.label||"",data:e.data||{},style:e.style||{},disabled:e.disabled||!1,visible:!1!==e.visible,draggable:!1!==e.draggable,resizable:!1!==e.resizable}},cleanZoneData:function(e){return{id:e.id,x:Number(e.x.toFixed(2)),y:Number(e.y.toFixed(2)),width:Number(e.width.toFixed(2)),height:Number(e.height.toFixed(2)),label:e.label,title:e.title,data:e.data,disabled:e.disabled,visible:e.visible,draggable:e.draggable,resizable:e.resizable,style:e.style}},generateId:function(){return"zone_"+Date.now()+"_"+Math.random().toString(36).substr(2,9)},updateSize:function(){var e=this.$refs.wrapper;if(e){var t=this.wrapperWidth,n=this.wrapperHeight;this.wrapperWidth=e.offsetWidth,this.wrapperHeight=e.offsetHeight,t===this.wrapperWidth&&n===this.wrapperHeight||this.$emit("resize",{width:this.wrapperWidth,height:this.wrapperHeight})}},onResize:function(){var e=this;clearTimeout(this.resizeTimer),this.resizeTimer=setTimeout(function(){e.updateSize()},100)},getMousePos:function(e){var t=this.$refs.wrapper;if(!t)return{x:0,y:0};var n=t.getBoundingClientRect(),i=e.touches?e.touches[0].clientX:e.clientX,r=e.touches?e.touches[0].clientY:e.clientY;return{x:i-n.left,y:r-n.top}},toPercent:function(e,t){if(0===this.wrapperWidth||0===this.wrapperHeight)return{x:0,y:0};var n=e/this.wrapperWidth*100,i=t/this.wrapperHeight*100;if(this.mergedConfig.snapToGrid){var r=this.mergedConfig.gridSize||5;n=Math.round(n/r)*r,i=Math.round(i/r)*r}return{x:n,y:i}},getZoneStyle:function(e){var t,n,i,a,d,l,h,u=this.themeConfig,c=this.activeZone===e.id,f=this.hoveredZone===e.id&&!c;if(c)t=(null===(l=e.style)||void 0===l?void 0:l.activeBorderColor)||u.zoneActiveBorderColor,n=(null===(h=e.style)||void 0===h?void 0:h.activeFillColor)||u.zoneActiveFillColor,i=u.zoneActiveBorderStyle,a=u.zoneActiveShadow,d=1;else if(f)t=u.zoneHoverBorderColor,n=u.zoneHoverFillColor,i=u.zoneBorderStyle,a="none",d=1;else{var v,p;t=(null===(v=e.style)||void 0===v?void 0:v.borderColor)||u.zoneBorderColor,n=(null===(p=e.style)||void 0===p?void 0:p.fillColor)||u.zoneFillColor,i=u.zoneBorderStyle,a="none",d=u.zoneOpacity}var g={left:e.x/100*this.wrapperWidth+"px",top:e.y/100*this.wrapperHeight+"px",width:e.width/100*this.wrapperWidth+"px",height:e.height/100*this.wrapperHeight+"px",border:"".concat(u.zoneBorderWidth,"px ").concat(i," ").concat(t),backgroundColor:n,boxShadow:a,opacity:!1!==e.visible?d:0,cursor:e.disabled?"not-allowed":this.mergedConfig.enableMove&&!1!==e.draggable?"move":"default",pointerEvents:e.disabled?"none":"auto",transition:c||f?"box-shadow ".concat(u.transitionDuration," ").concat(u.transitionTiming):"none"};if(e.style&&"object"===o(e.style)){var m=e.style,b=(m.borderColor,m.fillColor,m.activeBorderColor,m.activeFillColor,function(e,t){if(null==e)return{};var n,i,r=function(e,t){if(null==e)return{};var n={};for(var i in e)if({}.hasOwnProperty.call(e,i)){if(-1!==t.indexOf(i))continue;n[i]=e[i]}return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)n=o[i],-1===t.indexOf(n)&&{}.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}(m,r));return s(s({},g),b)}return g},getHandleStyle:function(e){var t=this.themeConfig,n=this.activeZone===e.id,i=t.handleSize;return this.mergedConfig.showHandles?{width:i+"px",height:i+"px",backgroundColor:t.handleColor,border:"".concat(t.handleBorderWidth,"px solid ").concat(n?t.handleActiveBorderColor:t.handleBorderColor),borderRadius:t.handleBorderRadius,boxShadow:t.handleShadow,transition:"none"}:{display:"none"}},getLabelStyle:function(e){var t,n,i=this.themeConfig,r=this.activeZone===e.id;return{color:(null===(t=e.style)||void 0===t?void 0:t.labelColor)||i.labelColor,fontSize:i.labelFontSize,fontWeight:i.labelFontWeight,backgroundColor:(null===(n=e.style)||void 0===n?void 0:n.labelBackgroundColor)||i.labelBackgroundColor,padding:i.labelPadding,borderRadius:i.labelBorderRadius,maxWidth:i.labelMaxWidth,textShadow:i.labelTextShadow,position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",textAlign:"center",pointerEvents:"none",zIndex:25,lineHeight:"1.2",opacity:r?1:.8}},onKeyDown:function(e){"Delete"!==e.key&&"Backspace"!==e.key||!this.activeZone||this.mergedConfig.enableDelete&&(e.preventDefault(),this.removeZone(this.activeZone),this.$emit("zone-deleted-by-keyboard",this.activeZone)),"Escape"===e.key&&(this.activeZone=null,this.unbindDragEvents(),this.unbindDrawEvents(),this.drawing=!1,this.dragData=null,this.$emit("selection-cleared"))},bindDrawEvents:function(){this.drawEventsBound||(document.addEventListener("mousemove",this.onDrawMove),document.addEventListener("mouseup",this.onDrawEnd),document.addEventListener("touchmove",this.onDrawMove,{passive:!1}),document.addEventListener("touchend",this.onDrawEnd),this.drawEventsBound=!0)},unbindDrawEvents:function(){this.drawEventsBound&&(document.removeEventListener("mousemove",this.onDrawMove),document.removeEventListener("mouseup",this.onDrawEnd),document.removeEventListener("touchmove",this.onDrawMove),document.removeEventListener("touchend",this.onDrawEnd),this.drawEventsBound=!1)},bindDragEvents:function(){this.dragEventsBound||(document.addEventListener("mousemove",this.onDragMove),document.addEventListener("mouseup",this.onDragEnd),document.addEventListener("touchmove",this.onDragMove,{passive:!1}),document.addEventListener("touchend",this.onDragEnd),this.dragEventsBound=!0)},unbindDragEvents:function(){this.dragEventsBound&&(document.removeEventListener("mousemove",this.onDragMove),document.removeEventListener("mouseup",this.onDragEnd),document.removeEventListener("touchmove",this.onDragMove),document.removeEventListener("touchend",this.onDragEnd),this.dragEventsBound=!1)},onWrapperMouseDown:function(e){0===e.button&&this.mergedConfig.enableDraw&&this.startDraw(e)},onWrapperTouchStart:function(e){this.mergedConfig.enableDraw&&this.startDraw(e)},startDraw:function(e){if(this.unbindDragEvents(),this.dragData=null,this.localZones.length>=(this.mergedConfig.maxZones||20))this.$emit("max-reached",this.mergedConfig.maxZones);else{var t=this.getMousePos(e);this.drawing=!0,this.drawStart=t,this.drawCurrent=t,this.activeZone=null,this.$emit("draw-start",{x:t.x,y:t.y}),this.bindDrawEvents()}},onDrawMove:function(e){var t=this;if(this.drawing)if(e.preventDefault(),this.mergedConfig.useAnimationFrame){if(this.rafId)return;this.rafId=requestAnimationFrame(function(){t.rafId=null,t.drawCurrent=t.getMousePos(e);var n=t.drawStart.x,i=t.drawStart.y,r=t.drawCurrent.x,o=t.drawCurrent.y,a=Math.min(n,r),s=Math.min(i,o),d=Math.abs(r-n),l=Math.abs(o-i);t.$emit("drawing",{x:a,y:s,width:d,height:l})})}else{this.drawCurrent=this.getMousePos(e);var n=this.drawStart.x,i=this.drawStart.y,r=this.drawCurrent.x,o=this.drawCurrent.y,a=Math.min(n,r),s=Math.min(i,o),d=Math.abs(r-n),l=Math.abs(o-i);this.$emit("drawing",{x:a,y:s,width:d,height:l})}else this.unbindDrawEvents()},onDrawEnd:function(){if(this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.drawing){this.unbindDrawEvents();var e=this.drawStart.x,t=this.drawStart.y,n=this.drawCurrent.x,i=this.drawCurrent.y,r=Math.min(e,n),o=Math.min(t,i),a=Math.abs(n-e),d=Math.abs(i-t),l=(this.mergedConfig.minSize||2)/100*Math.min(this.wrapperWidth,this.wrapperHeight);if(this.$emit("draw-end",{x:r,y:o,width:a,height:d,valid:a>=l&&d>=l}),a>=l&&d>=l){var h=this.toPercent(r,o),u=this.toPercent(a,d),c={id:this.generateId(),x:h.x,y:h.y,width:u.x,height:u.y,label:"热区".concat(this.localZones.length+1),title:"热区".concat(this.localZones.length+1),data:{},disabled:!1,visible:!0,draggable:!0,resizable:!0,style:{}};this.localZones.push(c),this.activeZone=c.id,this.$emit("zone-created",s({},c))}this.drawing=!1}else this.unbindDrawEvents()},onZoneMouseEnter:function(e){this.hoveredZone=e.id,this.$emit("zone-hover",s({},e))},onZoneMouseLeave:function(e){this.hoveredZone===e.id&&(this.hoveredZone=null,this.$emit("zone-leave",s({},e)))},onZoneMouseDown:function(e,t){0===e.button&&this.mergedConfig.enableMove&&(t.disabled||!1===t.draggable||(this.startDrag(e,t,null),this.$emit("zone-click",s({},t))))},onZoneTouchStart:function(e,t){this.mergedConfig.enableMove&&(t.disabled||!1===t.draggable||(this.startDrag(e,t,null),this.$emit("zone-click",s({},t))))},onHandleMouseDown:function(e,t,n){0===e.button&&this.mergedConfig.enableResize&&(t.disabled||!1===t.resizable||this.startDrag(e,t,n))},onHandleTouchStart:function(e,t,n){this.mergedConfig.enableResize&&(t.disabled||!1===t.resizable||this.startDrag(e,t,n))},startDrag:function(e,t,n){this.unbindDrawEvents(),this.drawing=!1,this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null);var i=this.activeZone;this.activeZone=t.id,i!==t.id&&this.$emit("zone-focus",s({},t));var r=this.getMousePos(e);this.dragData={zoneId:t.id,startMouse:r,startZone:s({},t),handle:n},this.$emit("drag-start",{zone:s({},t),handle:n,type:n?"resize":"move"}),this.bindDragEvents()},onDragMove:function(e){var t=this;if(this.dragData)if(e.preventDefault(),this.mergedConfig.useAnimationFrame){if(this.rafId)return;this.rafId=requestAnimationFrame(function(){t.rafId=null,t.processDrag(e)})}else this.processDrag(e);else this.unbindDragEvents()},processDrag:function(e){var t=this;if(this.dragData){var n=this.getMousePos(e),i=(n.x-this.dragData.startMouse.x)/this.wrapperWidth*100,r=(n.y-this.dragData.startMouse.y)/this.wrapperHeight*100,o=this.localZones.findIndex(function(e){return e.id===t.dragData.zoneId});if(-1===o)return this.unbindDragEvents(),void(this.dragData=null);var a=s({},this.localZones[o]),d=this.dragData.startZone,l=this.mergedConfig.minSize||2;if(this.dragData.handle){var h=this.dragData.handle,u=d.x,c=d.y,f=d.width,v=d.height;h.includes("e")&&(f+=i),h.includes("w")&&(u+=i,f-=i),h.includes("s")&&(v+=r),h.includes("n")&&(c+=r,v-=r),f<l&&(h.includes("w")&&(u=d.x+d.width-l),f=l),v<l&&(h.includes("n")&&(c=d.y+d.height-l),v=l),u<0&&(f+=u,u=0),c<0&&(v+=c,c=0),u+f>100&&(f=100-u),c+v>100&&(v=100-c),a=s(s({},a),{},{x:u,y:c,width:f,height:v}),this.$emit("resizing",{zone:s({},a),handle:h,originalZone:s({},d)})}else{var p=d.x+i,g=d.y+r;p=Math.max(0,Math.min(p,100-a.width)),g=Math.max(0,Math.min(g,100-a.height)),a.x=p,a.y=g,this.$emit("moving",{zone:s({},a),originalZone:s({},d)})}this.$set(this.localZones,o,a),this.$emit("zone-updated",s({},a))}},onDragEnd:function(){var e=this;if(this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.dragData){var t=this.localZones.find(function(t){return t.id===e.dragData.zoneId});t&&this.$emit("drag-end",{zone:s({},t),type:this.dragData.handle?"resize":"move"})}this.unbindDragEvents(),this.dragData=null},addZone:function(e){if(this.localZones.length>=(this.mergedConfig.maxZones||20))return this.$emit("max-reached",this.mergedConfig.maxZones),null;var t=this.normalizeZone({id:e.id||this.generateId(),x:e.x||10,y:e.y||10,width:e.width||20,height:e.height||20,label:e.label||"热区".concat(this.localZones.length+1),title:e.title||e.label||"热区".concat(this.localZones.length+1),data:e.data||{},disabled:e.disabled||!1,visible:!1!==e.visible,draggable:!1!==e.draggable,resizable:!1!==e.resizable,style:e.style||{}});return t.x=Math.max(0,Math.min(t.x,100-t.width)),t.y=Math.max(0,Math.min(t.y,100-t.height)),this.localZones.push(t),this.activeZone=t.id,this.$emit("zone-created",s({},t)),t},addZones:function(e){var t=this;return Array.isArray(e)?e.map(function(e){return t.addZone(e)}).filter(Boolean):[]},updateZone:function(e,t){var n=this.localZones.findIndex(function(t){return t.id===e});if(-1===n)return!1;var i=this.localZones[n],r=s({},i);return void 0!==t.x&&(r.x=Number(t.x)),void 0!==t.y&&(r.y=Number(t.y)),void 0!==t.width&&(r.width=Number(t.width)),void 0!==t.height&&(r.height=Number(t.height)),void 0!==t.label&&(r.label=t.label),void 0!==t.title&&(r.title=t.title),void 0!==t.data&&(r.data=s(s({},i.data),t.data)),void 0!==t.disabled&&(r.disabled=t.disabled),void 0!==t.visible&&(r.visible=t.visible),void 0!==t.draggable&&(r.draggable=t.draggable),void 0!==t.resizable&&(r.resizable=t.resizable),void 0!==t.style&&(r.style=s(s({},i.style),t.style)),r.x=Math.max(0,Math.min(r.x,100-r.width)),r.y=Math.max(0,Math.min(r.y,100-r.height)),this.$set(this.localZones,n,r),this.$emit("zone-updated",s({},r)),!0},setActiveZone:function(e){if(null===e)return this.activeZone=null,void this.$emit("selection-cleared");var t=this.localZones.find(function(t){return t.id===e});t&&(this.activeZone=e,this.$emit("zone-focus",s({},t)))},getActiveZone:function(){var e=this;if(!this.activeZone)return null;var t=this.localZones.find(function(t){return t.id===e.activeZone});return t?s({},t):null},getZone:function(e){var t=this.localZones.find(function(t){return t.id===e});return t?s({},t):null},getAllZones:function(){return this.localZones.map(function(e){return s({},e)})},removeZone:function(e){var t=this.localZones.findIndex(function(t){return t.id===e});if(-1!==t){var n=this.localZones.splice(t,1)[0];return this.activeZone===e&&(this.activeZone=null),this.hoveredZone===e&&(this.hoveredZone=null),this.$emit("zone-deleted",n),!0}return!1},clearAll:function(){this.unbindDrawEvents(),this.unbindDragEvents(),this.drawing=!1,this.dragData=null,this.activeZone=null,this.hoveredZone=null,this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.localZones=[],this.$emit("all-cleared")},exportZones:function(){var e=this;return this.localZones.map(function(t){return e.cleanZoneData(t)})},importZones:function(e){Array.isArray(e)&&(this.clearAll(),this.addZones(e),this.$emit("zones-imported",this.localZones.length))},getSize:function(){return{width:this.wrapperWidth,height:this.wrapperHeight}},disableZone:function(e){this.updateZone(e,{disabled:!0})},enableZone:function(e){this.updateZone(e,{disabled:!1})},hideZone:function(e){this.updateZone(e,{visible:!1})},showZone:function(e){this.updateZone(e,{visible:!0})}}};n(0);var h=function(e,t,n,i,r,o){var a,s="function"==typeof e?e.options:e;if(t&&(s.render=t,s.staticRenderFns=[],s._compiled=!0),o&&(s._scopeId="data-v-"+o),a)if(s.functional){s._injectStyles=a;var d=s.render;s.render=function(e,t){return a.call(t),d(e,t)}}else{var l=s.beforeCreate;s.beforeCreate=l?[].concat(l,a):[a]}return{exports:e,options:s}}(l,i,0,0,0,"658dd234");const u=h.exports;u.install=function(e){e.component(u.name,u)},"undefined"!=typeof window&&window.Vue&&window.Vue.use(u);const c=u;export{c as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Vue2ImageHotzone=t():e.Vue2ImageHotzone=t()}(this,()=>(()=>{var e={861(e,t,n){"use strict";n.r(t);var i=n(601),r=n.n(i),o=n(314),a=n.n(o)()(r());a.push([e.id,"\n.hotzone-wrapper[data-v-658dd234] {\n position: relative;\n display: inline-block;\n width: 100%;\n cursor: crosshair;\n line-height: 0;\n user-select: none;\n}\n.hotzone-wrapper img[data-v-658dd234] {\n width: 100%;\n height: auto;\n display: block;\n pointer-events: none;\n user-select: none;\n}\n.drawing-rect[data-v-658dd234] {\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n z-index: 5;\n}\n.zone-rect[data-v-658dd234] {\n position: absolute;\n top: 0;\n left: 0;\n box-sizing: border-box;\n z-index: 10;\n}\n.zone-label[data-v-658dd234] {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: center;\n pointer-events: none;\n z-index: 25;\n}\n.handle[data-v-658dd234] {\n position: absolute;\n z-index: 20;\n box-sizing: border-box;\n}\n\n/* 手柄位置 */\n.handle.nw[data-v-658dd234] { top: -5px; left: -5px; cursor: nw-resize;\n}\n.handle.n[data-v-658dd234] { top: -5px; left: calc(50% - 5px); cursor: n-resize;\n}\n.handle.ne[data-v-658dd234] { top: -5px; right: -5px; cursor: ne-resize;\n}\n.handle.e[data-v-658dd234] { top: calc(50% - 5px); right: -5px; cursor: e-resize;\n}\n.handle.se[data-v-658dd234] { bottom: -5px; right: -5px; cursor: se-resize;\n}\n.handle.s[data-v-658dd234] { bottom: -5px; left: calc(50% - 5px); cursor: s-resize;\n}\n.handle.sw[data-v-658dd234] { bottom: -5px; left: -5px; cursor: sw-resize;\n}\n.handle.w[data-v-658dd234] { top: calc(50% - 5px); left: -5px; cursor: w-resize;\n}\n",""]);const s=a;n.d(t,["default",0,s])},314(e){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var n="",i=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),i&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),i&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n}).join("")},t.i=function(e,n,i,r,o){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(i)for(var s=0;s<this.length;s++){var d=this[s][0];null!=d&&(a[d]=!0)}for(var l=0;l<e.length;l++){var h=[].concat(e[l]);i&&a[h[0]]||(void 0!==o&&(void 0===h[5]||(h[1]="@layer".concat(h[5].length>0?" ".concat(h[5]):""," {").concat(h[1],"}")),h[5]=o),n&&(h[2]?(h[1]="@media ".concat(h[2]," {").concat(h[1],"}"),h[2]=n):h[2]=n),r&&(h[4]?(h[1]="@supports (".concat(h[4],") {").concat(h[1],"}"),h[4]=r):h[4]="".concat(r)),t.push(h))}},t}},601(e){"use strict";e.exports=function(e){return e[1]}},0(e,t,n){var i=n(861);i.__esModule&&(i=i.default),"string"==typeof i&&(i=[[e.id,i,""]]),i.locals&&(e.exports=i.locals),(0,n(534).A)("5d0ec59d",i,!1,{})},534(e,t,n){"use strict";function i(e,t){for(var n=[],i={},r=0;r<t.length;r++){var o=t[r],a=o[0],s={id:e+":"+r,css:o[1],media:o[2],sourceMap:o[3]};i[a]?i[a].parts.push(s):n.push(i[a]={id:a,parts:[s]})}return n}n.d(t,{A:()=>v});var r="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!r)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var o={},a=r&&(document.head||document.getElementsByTagName("head")[0]),s=null,d=0,l=!1,h=function(){},u=null,c="data-vue-ssr-id",f="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function v(e,t,n,r){l=n,u=r||{};var a=i(e,t);return p(a),function(t){for(var n=[],r=0;r<a.length;r++){var s=a[r];(d=o[s.id]).refs--,n.push(d)}for(t?p(a=i(e,t)):a=[],r=0;r<n.length;r++){var d;if(0===(d=n[r]).refs){for(var l=0;l<d.parts.length;l++)d.parts[l]();delete o[d.id]}}}}function p(e){for(var t=0;t<e.length;t++){var n=e[t],i=o[n.id];if(i){i.refs++;for(var r=0;r<i.parts.length;r++)i.parts[r](n.parts[r]);for(;r<n.parts.length;r++)i.parts.push(m(n.parts[r]));i.parts.length>n.parts.length&&(i.parts.length=n.parts.length)}else{var a=[];for(r=0;r<n.parts.length;r++)a.push(m(n.parts[r]));o[n.id]={id:n.id,refs:1,parts:a}}}}function g(){var e=document.createElement("style");return e.type="text/css",a.appendChild(e),e}function m(e){var t,n,i=document.querySelector("style["+c+'~="'+e.id+'"]');if(i){if(l)return h;i.parentNode.removeChild(i)}if(f){var r=d++;i=s||(s=g()),t=y.bind(null,i,r,!1),n=y.bind(null,i,r,!0)}else i=g(),t=x.bind(null,i),n=function(){i.parentNode.removeChild(i)};return t(e),function(i){if(i){if(i.css===e.css&&i.media===e.media&&i.sourceMap===e.sourceMap)return;t(e=i)}else n()}}var b,w=(b=[],function(e,t){return b[e]=t,b.filter(Boolean).join("\n")});function y(e,t,n,i){var r=n?"":i.css;if(e.styleSheet)e.styleSheet.cssText=w(t,r);else{var o=document.createTextNode(r),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(o,a[t]):e.appendChild(o)}}function x(e,t){var n=t.css,i=t.media,r=t.sourceMap;if(i&&e.setAttribute("media",i),u.ssrId&&e.setAttribute(c,t.id),r&&(n+="\n/*# sourceURL="+r.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}}};const t={};function n(i){const r=t[i];if(void 0!==r)return r.exports;const o=t[i]={id:i,exports:{}};return e[i](o,o.exports,n),o.exports}n.n=e=>{const t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{if(Array.isArray(t))for(var i=0;i<t.length;){var r=t[i++],o=t[i++];n.o(e,r)?0===o&&i++:0===o?Object.defineProperty(e,r,{enumerable:!0,value:t[i++]}):Object.defineProperty(e,r,{enumerable:!0,get:o})}else for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};let i={};return(()=>{"use strict";n.d(i,{default:()=>u});var e=function(){var e=this,t=e._self._c;return t("div",{ref:"wrapper",staticClass:"hotzone-wrapper",on:{mousedown:e.onWrapperMouseDown,touchstart:function(t){return t.preventDefault(),e.onWrapperTouchStart.apply(null,arguments)}}},[t("img",{ref:"img",attrs:{src:e.src,draggable:"false"},on:{load:e.updateSize}}),e._v(" "),e.drawing?t("div",{staticClass:"drawing-rect",style:e.drawingStyle}):e._e(),e._v(" "),e._l(e.localZones,function(n){return t("div",{key:n.id,staticClass:"zone-rect",class:{active:e.activeZone===n.id,hover:e.hoveredZone===n.id&&e.activeZone!==n.id},style:e.getZoneStyle(n),on:{mousedown:function(t){return t.stopPropagation(),e.onZoneMouseDown(t,n)},mouseenter:function(t){return e.onZoneMouseEnter(n)},mouseleave:function(t){return e.onZoneMouseLeave(n)},touchstart:function(t){return t.stopPropagation(),t.preventDefault(),e.onZoneTouchStart(t,n)}}},[e.mergedConfig.showLabel&&(n.label||n.title)?t("span",{staticClass:"zone-label",style:e.getLabelStyle(n)},[e._v("\n "+e._s(n.label||n.title||"")+"\n ")]):e._e(),e._v(" "),e.mergedConfig.enableResize&&e.mergedConfig.showHandles?e._l(e.handles,function(i){return t("span",{key:i,class:["handle",i],style:e.getHandleStyle(n),on:{mousedown:function(t){return t.stopPropagation(),e.onHandleMouseDown(t,n,i)},touchstart:function(t){return t.stopPropagation(),t.preventDefault(),e.onHandleTouchStart(t,n,i)}}})}):e._e()],2)})],2)};e._withStripped=!0;var t=["borderColor","fillColor","activeBorderColor","activeFillColor"];function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,i)}return n}function a(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach(function(t){s(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function s(e,t,n){return(t=function(e){var t=function(e){if("object"!=r(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=r(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==r(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const d={name:"ImageHotzone",props:{src:{type:String,required:!0},zones:{type:Array,default:function(){return[]}},theme:{type:Object,default:function(){return{}}},config:{type:Object,default:function(){return{}}}},data:function(){return{localZones:[],wrapperWidth:0,wrapperHeight:0,drawing:!1,drawStart:{x:0,y:0},drawCurrent:{x:0,y:0},activeZone:null,hoveredZone:null,dragData:null,handles:["nw","n","ne","e","se","s","sw","w"],updatingFromParent:!1,updatingFromLocal:!1,drawEventsBound:!1,dragEventsBound:!1,resizeTimer:null,updateTimer:null,rafId:null}},computed:{themeConfig:function(){return a(a({},{drawingLineColor:"#4f6ef7",drawingLineWidth:2,drawingFillColor:"rgba(79, 110, 247, 0.15)",zoneBorderColor:"#4f6ef7",zoneBorderWidth:2,zoneFillColor:"rgba(79, 110, 247, 0.2)",zoneBorderStyle:"solid",zoneOpacity:1,zoneActiveBorderColor:"#e53e3e",zoneActiveFillColor:"rgba(229, 62, 62, 0.15)",zoneActiveBorderStyle:"solid",zoneActiveShadow:"0 0 0 2px rgba(229, 62, 62, 0.3)",zoneHoverBorderColor:"#718096",zoneHoverFillColor:"rgba(113, 128, 150, 0.2)",handleSize:10,handleColor:"#ffffff",handleBorderColor:"#4f6ef7",handleBorderWidth:2,handleActiveBorderColor:"#e53e3e",handleHoverColor:"#4f6ef7",handleActiveHoverColor:"#e53e3e",handleBorderRadius:"3px",handleShadow:"0 1px 4px rgba(0,0,0,0.15)",labelColor:"#333333",labelFontSize:"12px",labelFontWeight:"600",labelBackgroundColor:"transparent",labelPadding:"2px 4px",labelBorderRadius:"0px",labelMaxWidth:"90%",labelTextShadow:"none",transitionDuration:"0s",transitionTiming:"ease"}),this.theme)},mergedConfig:function(){return a(a({},{minSize:2,maxZones:20,showLabel:!0,enableResize:!0,enableMove:!0,enableDraw:!0,enableDelete:!0,showHandles:!0,allowOverlap:!0,snapToGrid:!1,gridSize:5,useAnimationFrame:!0,debounceUpdate:!0}),this.config)},drawingStyle:function(){if(!this.drawing)return{display:"none"};var e=this.drawStart.x,t=this.drawStart.y,n=this.drawCurrent.x,i=this.drawCurrent.y,r=this.themeConfig;return{left:Math.min(e,n)+"px",top:Math.min(t,i)+"px",width:Math.abs(n-e)+"px",height:Math.abs(i-t)+"px",border:"".concat(r.drawingLineWidth,"px dashed ").concat(r.drawingLineColor),backgroundColor:r.drawingFillColor}}},watch:{zones:{immediate:!0,handler:function(e){var t=this;this.updatingFromLocal?this.updatingFromLocal=!1:(this.updatingFromParent=!0,e&&Array.isArray(e)&&(this.localZones=e.map(function(e){return t.normalizeZone(e)})),this.$nextTick(function(){t.updatingFromParent=!1}))}},localZones:{deep:!0,handler:function(e){var t=this;this.updatingFromParent||(this.mergedConfig.debounceUpdate?(clearTimeout(this.updateTimer),this.updateTimer=setTimeout(function(){t.emitZonesUpdate(e)},50)):this.emitZonesUpdate(e))}}},mounted:function(){var e=this;this.$nextTick(function(){e.updateSize()}),window.addEventListener("resize",this.onResize),document.addEventListener("keydown",this.onKeyDown)},beforeDestroy:function(){window.removeEventListener("resize",this.onResize),document.removeEventListener("keydown",this.onKeyDown),this.unbindDrawEvents(),this.unbindDragEvents(),clearTimeout(this.resizeTimer),clearTimeout(this.updateTimer),this.rafId&&cancelAnimationFrame(this.rafId)},methods:{emitZonesUpdate:function(e){var t=this;this.updatingFromLocal=!0;var n=e.map(function(e){return t.cleanZoneData(e)});this.$emit("update:zones",n),this.$emit("change",n)},normalizeZone:function(e){return{id:e.id||this.generateId(),x:Number(e.x)||0,y:Number(e.y)||0,width:Number(e.width)||0,height:Number(e.height)||0,label:e.label||e.title||"",title:e.title||e.label||"",data:e.data||{},style:e.style||{},disabled:e.disabled||!1,visible:!1!==e.visible,draggable:!1!==e.draggable,resizable:!1!==e.resizable}},cleanZoneData:function(e){return{id:e.id,x:Number(e.x.toFixed(2)),y:Number(e.y.toFixed(2)),width:Number(e.width.toFixed(2)),height:Number(e.height.toFixed(2)),label:e.label,title:e.title,data:e.data,disabled:e.disabled,visible:e.visible,draggable:e.draggable,resizable:e.resizable,style:e.style}},generateId:function(){return"zone_"+Date.now()+"_"+Math.random().toString(36).substr(2,9)},updateSize:function(){var e=this.$refs.wrapper;if(e){var t=this.wrapperWidth,n=this.wrapperHeight;this.wrapperWidth=e.offsetWidth,this.wrapperHeight=e.offsetHeight,t===this.wrapperWidth&&n===this.wrapperHeight||this.$emit("resize",{width:this.wrapperWidth,height:this.wrapperHeight})}},onResize:function(){var e=this;clearTimeout(this.resizeTimer),this.resizeTimer=setTimeout(function(){e.updateSize()},100)},getMousePos:function(e){var t=this.$refs.wrapper;if(!t)return{x:0,y:0};var n=t.getBoundingClientRect(),i=e.touches?e.touches[0].clientX:e.clientX,r=e.touches?e.touches[0].clientY:e.clientY;return{x:i-n.left,y:r-n.top}},toPercent:function(e,t){if(0===this.wrapperWidth||0===this.wrapperHeight)return{x:0,y:0};var n=e/this.wrapperWidth*100,i=t/this.wrapperHeight*100;if(this.mergedConfig.snapToGrid){var r=this.mergedConfig.gridSize||5;n=Math.round(n/r)*r,i=Math.round(i/r)*r}return{x:n,y:i}},getZoneStyle:function(e){var n,i,o,s,d,l,h,u=this.themeConfig,c=this.activeZone===e.id,f=this.hoveredZone===e.id&&!c;if(c)n=(null===(l=e.style)||void 0===l?void 0:l.activeBorderColor)||u.zoneActiveBorderColor,i=(null===(h=e.style)||void 0===h?void 0:h.activeFillColor)||u.zoneActiveFillColor,o=u.zoneActiveBorderStyle,s=u.zoneActiveShadow,d=1;else if(f)n=u.zoneHoverBorderColor,i=u.zoneHoverFillColor,o=u.zoneBorderStyle,s="none",d=1;else{var v,p;n=(null===(v=e.style)||void 0===v?void 0:v.borderColor)||u.zoneBorderColor,i=(null===(p=e.style)||void 0===p?void 0:p.fillColor)||u.zoneFillColor,o=u.zoneBorderStyle,s="none",d=u.zoneOpacity}var g={left:e.x/100*this.wrapperWidth+"px",top:e.y/100*this.wrapperHeight+"px",width:e.width/100*this.wrapperWidth+"px",height:e.height/100*this.wrapperHeight+"px",border:"".concat(u.zoneBorderWidth,"px ").concat(o," ").concat(n),backgroundColor:i,boxShadow:s,opacity:!1!==e.visible?d:0,cursor:e.disabled?"not-allowed":this.mergedConfig.enableMove&&!1!==e.draggable?"move":"default",pointerEvents:e.disabled?"none":"auto",transition:c||f?"box-shadow ".concat(u.transitionDuration," ").concat(u.transitionTiming):"none"};if(e.style&&"object"===r(e.style)){var m=e.style,b=(m.borderColor,m.fillColor,m.activeBorderColor,m.activeFillColor,function(e,t){if(null==e)return{};var n,i,r=function(e,t){if(null==e)return{};var n={};for(var i in e)if({}.hasOwnProperty.call(e,i)){if(-1!==t.indexOf(i))continue;n[i]=e[i]}return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)n=o[i],-1===t.indexOf(n)&&{}.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}(m,t));return a(a({},g),b)}return g},getHandleStyle:function(e){var t=this.themeConfig,n=this.activeZone===e.id,i=t.handleSize;return this.mergedConfig.showHandles?{width:i+"px",height:i+"px",backgroundColor:t.handleColor,border:"".concat(t.handleBorderWidth,"px solid ").concat(n?t.handleActiveBorderColor:t.handleBorderColor),borderRadius:t.handleBorderRadius,boxShadow:t.handleShadow,transition:"none"}:{display:"none"}},getLabelStyle:function(e){var t,n,i=this.themeConfig,r=this.activeZone===e.id;return{color:(null===(t=e.style)||void 0===t?void 0:t.labelColor)||i.labelColor,fontSize:i.labelFontSize,fontWeight:i.labelFontWeight,backgroundColor:(null===(n=e.style)||void 0===n?void 0:n.labelBackgroundColor)||i.labelBackgroundColor,padding:i.labelPadding,borderRadius:i.labelBorderRadius,maxWidth:i.labelMaxWidth,textShadow:i.labelTextShadow,position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",textAlign:"center",pointerEvents:"none",zIndex:25,lineHeight:"1.2",opacity:r?1:.8}},onKeyDown:function(e){"Delete"!==e.key&&"Backspace"!==e.key||!this.activeZone||this.mergedConfig.enableDelete&&(e.preventDefault(),this.removeZone(this.activeZone),this.$emit("zone-deleted-by-keyboard",this.activeZone)),"Escape"===e.key&&(this.activeZone=null,this.unbindDragEvents(),this.unbindDrawEvents(),this.drawing=!1,this.dragData=null,this.$emit("selection-cleared"))},bindDrawEvents:function(){this.drawEventsBound||(document.addEventListener("mousemove",this.onDrawMove),document.addEventListener("mouseup",this.onDrawEnd),document.addEventListener("touchmove",this.onDrawMove,{passive:!1}),document.addEventListener("touchend",this.onDrawEnd),this.drawEventsBound=!0)},unbindDrawEvents:function(){this.drawEventsBound&&(document.removeEventListener("mousemove",this.onDrawMove),document.removeEventListener("mouseup",this.onDrawEnd),document.removeEventListener("touchmove",this.onDrawMove),document.removeEventListener("touchend",this.onDrawEnd),this.drawEventsBound=!1)},bindDragEvents:function(){this.dragEventsBound||(document.addEventListener("mousemove",this.onDragMove),document.addEventListener("mouseup",this.onDragEnd),document.addEventListener("touchmove",this.onDragMove,{passive:!1}),document.addEventListener("touchend",this.onDragEnd),this.dragEventsBound=!0)},unbindDragEvents:function(){this.dragEventsBound&&(document.removeEventListener("mousemove",this.onDragMove),document.removeEventListener("mouseup",this.onDragEnd),document.removeEventListener("touchmove",this.onDragMove),document.removeEventListener("touchend",this.onDragEnd),this.dragEventsBound=!1)},onWrapperMouseDown:function(e){0===e.button&&this.mergedConfig.enableDraw&&this.startDraw(e)},onWrapperTouchStart:function(e){this.mergedConfig.enableDraw&&this.startDraw(e)},startDraw:function(e){if(this.unbindDragEvents(),this.dragData=null,this.localZones.length>=(this.mergedConfig.maxZones||20))this.$emit("max-reached",this.mergedConfig.maxZones);else{var t=this.getMousePos(e);this.drawing=!0,this.drawStart=t,this.drawCurrent=t,this.activeZone=null,this.$emit("draw-start",{x:t.x,y:t.y}),this.bindDrawEvents()}},onDrawMove:function(e){var t=this;if(this.drawing)if(e.preventDefault(),this.mergedConfig.useAnimationFrame){if(this.rafId)return;this.rafId=requestAnimationFrame(function(){t.rafId=null,t.drawCurrent=t.getMousePos(e);var n=t.drawStart.x,i=t.drawStart.y,r=t.drawCurrent.x,o=t.drawCurrent.y,a=Math.min(n,r),s=Math.min(i,o),d=Math.abs(r-n),l=Math.abs(o-i);t.$emit("drawing",{x:a,y:s,width:d,height:l})})}else{this.drawCurrent=this.getMousePos(e);var n=this.drawStart.x,i=this.drawStart.y,r=this.drawCurrent.x,o=this.drawCurrent.y,a=Math.min(n,r),s=Math.min(i,o),d=Math.abs(r-n),l=Math.abs(o-i);this.$emit("drawing",{x:a,y:s,width:d,height:l})}else this.unbindDrawEvents()},onDrawEnd:function(){if(this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.drawing){this.unbindDrawEvents();var e=this.drawStart.x,t=this.drawStart.y,n=this.drawCurrent.x,i=this.drawCurrent.y,r=Math.min(e,n),o=Math.min(t,i),s=Math.abs(n-e),d=Math.abs(i-t),l=(this.mergedConfig.minSize||2)/100*Math.min(this.wrapperWidth,this.wrapperHeight);if(this.$emit("draw-end",{x:r,y:o,width:s,height:d,valid:s>=l&&d>=l}),s>=l&&d>=l){var h=this.toPercent(r,o),u=this.toPercent(s,d),c={id:this.generateId(),x:h.x,y:h.y,width:u.x,height:u.y,label:"热区".concat(this.localZones.length+1),title:"热区".concat(this.localZones.length+1),data:{},disabled:!1,visible:!0,draggable:!0,resizable:!0,style:{}};this.localZones.push(c),this.activeZone=c.id,this.$emit("zone-created",a({},c))}this.drawing=!1}else this.unbindDrawEvents()},onZoneMouseEnter:function(e){this.hoveredZone=e.id,this.$emit("zone-hover",a({},e))},onZoneMouseLeave:function(e){this.hoveredZone===e.id&&(this.hoveredZone=null,this.$emit("zone-leave",a({},e)))},onZoneMouseDown:function(e,t){0===e.button&&this.mergedConfig.enableMove&&(t.disabled||!1===t.draggable||(this.startDrag(e,t,null),this.$emit("zone-click",a({},t))))},onZoneTouchStart:function(e,t){this.mergedConfig.enableMove&&(t.disabled||!1===t.draggable||(this.startDrag(e,t,null),this.$emit("zone-click",a({},t))))},onHandleMouseDown:function(e,t,n){0===e.button&&this.mergedConfig.enableResize&&(t.disabled||!1===t.resizable||this.startDrag(e,t,n))},onHandleTouchStart:function(e,t,n){this.mergedConfig.enableResize&&(t.disabled||!1===t.resizable||this.startDrag(e,t,n))},startDrag:function(e,t,n){this.unbindDrawEvents(),this.drawing=!1,this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null);var i=this.activeZone;this.activeZone=t.id,i!==t.id&&this.$emit("zone-focus",a({},t));var r=this.getMousePos(e);this.dragData={zoneId:t.id,startMouse:r,startZone:a({},t),handle:n},this.$emit("drag-start",{zone:a({},t),handle:n,type:n?"resize":"move"}),this.bindDragEvents()},onDragMove:function(e){var t=this;if(this.dragData)if(e.preventDefault(),this.mergedConfig.useAnimationFrame){if(this.rafId)return;this.rafId=requestAnimationFrame(function(){t.rafId=null,t.processDrag(e)})}else this.processDrag(e);else this.unbindDragEvents()},processDrag:function(e){var t=this;if(this.dragData){var n=this.getMousePos(e),i=(n.x-this.dragData.startMouse.x)/this.wrapperWidth*100,r=(n.y-this.dragData.startMouse.y)/this.wrapperHeight*100,o=this.localZones.findIndex(function(e){return e.id===t.dragData.zoneId});if(-1===o)return this.unbindDragEvents(),void(this.dragData=null);var s=a({},this.localZones[o]),d=this.dragData.startZone,l=this.mergedConfig.minSize||2;if(this.dragData.handle){var h=this.dragData.handle,u=d.x,c=d.y,f=d.width,v=d.height;h.includes("e")&&(f+=i),h.includes("w")&&(u+=i,f-=i),h.includes("s")&&(v+=r),h.includes("n")&&(c+=r,v-=r),f<l&&(h.includes("w")&&(u=d.x+d.width-l),f=l),v<l&&(h.includes("n")&&(c=d.y+d.height-l),v=l),u<0&&(f+=u,u=0),c<0&&(v+=c,c=0),u+f>100&&(f=100-u),c+v>100&&(v=100-c),s=a(a({},s),{},{x:u,y:c,width:f,height:v}),this.$emit("resizing",{zone:a({},s),handle:h,originalZone:a({},d)})}else{var p=d.x+i,g=d.y+r;p=Math.max(0,Math.min(p,100-s.width)),g=Math.max(0,Math.min(g,100-s.height)),s.x=p,s.y=g,this.$emit("moving",{zone:a({},s),originalZone:a({},d)})}this.$set(this.localZones,o,s),this.$emit("zone-updated",a({},s))}},onDragEnd:function(){var e=this;if(this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.dragData){var t=this.localZones.find(function(t){return t.id===e.dragData.zoneId});t&&this.$emit("drag-end",{zone:a({},t),type:this.dragData.handle?"resize":"move"})}this.unbindDragEvents(),this.dragData=null},addZone:function(e){if(this.localZones.length>=(this.mergedConfig.maxZones||20))return this.$emit("max-reached",this.mergedConfig.maxZones),null;var t=this.normalizeZone({id:e.id||this.generateId(),x:e.x||10,y:e.y||10,width:e.width||20,height:e.height||20,label:e.label||"热区".concat(this.localZones.length+1),title:e.title||e.label||"热区".concat(this.localZones.length+1),data:e.data||{},disabled:e.disabled||!1,visible:!1!==e.visible,draggable:!1!==e.draggable,resizable:!1!==e.resizable,style:e.style||{}});return t.x=Math.max(0,Math.min(t.x,100-t.width)),t.y=Math.max(0,Math.min(t.y,100-t.height)),this.localZones.push(t),this.activeZone=t.id,this.$emit("zone-created",a({},t)),t},addZones:function(e){var t=this;return Array.isArray(e)?e.map(function(e){return t.addZone(e)}).filter(Boolean):[]},updateZone:function(e,t){var n=this.localZones.findIndex(function(t){return t.id===e});if(-1===n)return!1;var i=this.localZones[n],r=a({},i);return void 0!==t.x&&(r.x=Number(t.x)),void 0!==t.y&&(r.y=Number(t.y)),void 0!==t.width&&(r.width=Number(t.width)),void 0!==t.height&&(r.height=Number(t.height)),void 0!==t.label&&(r.label=t.label),void 0!==t.title&&(r.title=t.title),void 0!==t.data&&(r.data=a(a({},i.data),t.data)),void 0!==t.disabled&&(r.disabled=t.disabled),void 0!==t.visible&&(r.visible=t.visible),void 0!==t.draggable&&(r.draggable=t.draggable),void 0!==t.resizable&&(r.resizable=t.resizable),void 0!==t.style&&(r.style=a(a({},i.style),t.style)),r.x=Math.max(0,Math.min(r.x,100-r.width)),r.y=Math.max(0,Math.min(r.y,100-r.height)),this.$set(this.localZones,n,r),this.$emit("zone-updated",a({},r)),!0},setActiveZone:function(e){if(null===e)return this.activeZone=null,void this.$emit("selection-cleared");var t=this.localZones.find(function(t){return t.id===e});t&&(this.activeZone=e,this.$emit("zone-focus",a({},t)))},getActiveZone:function(){var e=this;if(!this.activeZone)return null;var t=this.localZones.find(function(t){return t.id===e.activeZone});return t?a({},t):null},getZone:function(e){var t=this.localZones.find(function(t){return t.id===e});return t?a({},t):null},getAllZones:function(){return this.localZones.map(function(e){return a({},e)})},removeZone:function(e){var t=this.localZones.findIndex(function(t){return t.id===e});if(-1!==t){var n=this.localZones.splice(t,1)[0];return this.activeZone===e&&(this.activeZone=null),this.hoveredZone===e&&(this.hoveredZone=null),this.$emit("zone-deleted",n),!0}return!1},clearAll:function(){this.unbindDrawEvents(),this.unbindDragEvents(),this.drawing=!1,this.dragData=null,this.activeZone=null,this.hoveredZone=null,this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.localZones=[],this.$emit("all-cleared")},exportZones:function(){var e=this;return this.localZones.map(function(t){return e.cleanZoneData(t)})},importZones:function(e){Array.isArray(e)&&(this.clearAll(),this.addZones(e),this.$emit("zones-imported",this.localZones.length))},getSize:function(){return{width:this.wrapperWidth,height:this.wrapperHeight}},disableZone:function(e){this.updateZone(e,{disabled:!0})},enableZone:function(e){this.updateZone(e,{disabled:!1})},hideZone:function(e){this.updateZone(e,{visible:!1})},showZone:function(e){this.updateZone(e,{visible:!0})}}};n(0);var l=function(e,t,n,i,r,o){var a,s="function"==typeof e?e.options:e;if(t&&(s.render=t,s.staticRenderFns=[],s._compiled=!0),o&&(s._scopeId="data-v-"+o),a)if(s.functional){s._injectStyles=a;var d=s.render;s.render=function(e,t){return a.call(t),d(e,t)}}else{var l=s.beforeCreate;s.beforeCreate=l?[].concat(l,a):[a]}return{exports:e,options:s}}(d,e,0,0,0,"658dd234");const h=l.exports;h.install=function(e){e.component(h.name,h)},"undefined"!=typeof window&&window.Vue&&window.Vue.use(h);const u=h})(),i=i.default,i})());
|
package/package.json
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kirkw/vue2-image-hotzone",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "A Vue 2 component for creating image hotzones with drag, resize and move support",
|
|
5
|
-
"main": "dist/vue2-image-hotzone.js",
|
|
6
|
-
"module": "dist/vue2-image-hotzone.js",
|
|
7
|
-
"unpkg": "dist/vue2-image-hotzone.js",
|
|
8
|
-
"jsdelivr": "dist/vue2-image-hotzone.js",
|
|
5
|
+
"main": "dist/vue2-image-hotzone.common.js",
|
|
6
|
+
"module": "dist/vue2-image-hotzone.esm.js",
|
|
7
|
+
"unpkg": "dist/vue2-image-hotzone.umd.js",
|
|
8
|
+
"jsdelivr": "dist/vue2-image-hotzone.umd.js",
|
|
9
9
|
"files": [
|
|
10
10
|
"dist",
|
|
11
11
|
"src",
|
|
12
12
|
"README.md"
|
|
13
13
|
],
|
|
14
|
-
|
|
14
|
+
"publishConfig": {
|
|
15
15
|
"access": "public",
|
|
16
16
|
"registry": "https://registry.npmjs.org/"
|
|
17
17
|
},
|