@kirkw/vue2-image-hotzone 1.0.0

package/dist/vue2-image-hotzone.js

@@ -0,0 +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

@@ -0,0 +1,58 @@
+{
+  "name": "@kirkw/vue2-image-hotzone",
+  "version": "1.0.0",
+  "description": "A Vue 2 component for creating image hotzones with drag, resize and move support",
+  "main": "dist/vue2-image-hotzone.js",
+  "module": "dist/vue2-image-hotzone.js",
+  "unpkg": "dist/vue2-image-hotzone.js",
+  "jsdelivr": "dist/vue2-image-hotzone.js",
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "dev": "webpack serve --config webpack.config.js",
+    "build": "webpack --config webpack.config.js",
+    "build:prod": "webpack --config webpack.config.js --mode=production",
+    "prepublishOnly": "npm run build:prod"
+  },
+  "keywords": [
+    "vue",
+    "vue2",
+    "image",
+    "hotzone",
+    "hotspot",
+    "image-map",
+    "image-annotation",
+    "vue-component"
+  ],
+  "author": "Your Name <your.email@example.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yourusername/vue2-image-hotzone.git"
+  },
+  "bugs": {
+    "url": "https://github.com/yourusername/vue2-image-hotzone/issues"
+  },
+  "homepage": "https://github.com/yourusername/vue2-image-hotzone#readme",
+  "peerDependencies": {
+    "vue": "^2.6.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.29.7",
+    "@babel/preset-env": "^7.29.7",
+    "babel-loader": "^8.4.1",
+    "css-loader": "^6.11.0",
+    "vue-loader": "^15.11.1",
+    "vue-template-compiler": "^2.7.16",
+    "webpack": "^5.108.3",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.2"
+  }
+}

package/src/components/ImageHotzone.vue

@@ -0,0 +1,1046 @@
+<template>
+  <div 
+    class="hotzone-wrapper" 
+    ref="wrapper"
+    @mousedown="onWrapperMouseDown"
+    @touchstart.prevent="onWrapperTouchStart"
+  >
+    <img 
+      :src="src" 
+      ref="img" 
+      @load="updateSize"
+      draggable="false"
+    />
+    
+    <!-- 绘制中的矩形 -->
+    <div 
+      v-if="drawing" 
+      class="drawing-rect" 
+      :style="drawingStyle"
+    ></div>
+    
+    <!-- 已创建的热区 -->
+    <div
+      v-for="zone in localZones"
+      :key="zone.id"
+      class="zone-rect"
+      :class="{ 
+        active: activeZone === zone.id,
+        hover: hoveredZone === zone.id && activeZone !== zone.id
+      }"
+      :style="getZoneStyle(zone)"
+      @mousedown.stop="onZoneMouseDown($event, zone)"
+      @mouseenter="onZoneMouseEnter(zone)"
+      @mouseleave="onZoneMouseLeave(zone)"
+      @touchstart.stop.prevent="onZoneTouchStart($event, zone)"
+    >
+      <!-- 标签居中显示 - 无背景 -->
+      <span 
+        v-if="mergedConfig.showLabel && (zone.label || zone.title)" 
+        class="zone-label" 
+        :style="getLabelStyle(zone)"
+      >
+        {{ zone.label || zone.title || '' }}
+      </span>
+      
+      <!-- 8个拖拽手柄 -->
+      <template v-if="mergedConfig.enableResize && mergedConfig.showHandles">
+        <span
+          v-for="handle in handles"
+          :key="handle"
+          :class="['handle', handle]"
+          :style="getHandleStyle(zone)"
+          @mousedown.stop="onHandleMouseDown($event, zone, handle)"
+          @touchstart.stop.prevent="onHandleTouchStart($event, zone, handle)"
+        ></span>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ImageHotzone',
+  props: {
+    // 图片地址
+    src: {
+      type: String,
+      required: true
+    },
+    // 热区数据（支持.sync修饰符）
+    zones: {
+      type: Array,
+      default: () => []
+    },
+    // 主题配置
+    theme: {
+      type: Object,
+      default: () => ({})
+    },
+    // 功能配置
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      localZones: [],
+      wrapperWidth: 0,
+      wrapperHeight: 0,
+      drawing: false,
+      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: false,
+      updatingFromLocal: false,
+      drawEventsBound: false,
+      dragEventsBound: false,
+      // 性能优化：缓存计算
+      resizeTimer: null,
+      updateTimer: null,
+      // requestAnimationFrame ID
+      rafId: null
+    }
+  },
+  computed: {
+    // 合并默认主题和用户自定义主题
+    themeConfig() {
+      const defaultTheme = {
+        // 绘制中虚线框
+        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'
+      }
+      
+      return { ...defaultTheme, ...this.theme }
+    },
+    
+    // 合并默认配置和用户配置
+    mergedConfig() {
+      const defaultConfig = {
+        minSize: 2,
+        maxZones: 20,
+        showLabel: true,
+        enableResize: true,
+        enableMove: true,
+        enableDraw: true,
+        enableDelete: true,
+        showHandles: true,
+        allowOverlap: true,
+        snapToGrid: false,
+        gridSize: 5,
+        // 性能优化选项
+        useAnimationFrame: true,
+        debounceUpdate: true,
+      }
+      
+      return { ...defaultConfig, ...this.config }
+    },
+    
+    drawingStyle() {
+      if (!this.drawing) return { display: 'none' }
+      const x1 = this.drawStart.x
+      const y1 = this.drawStart.y
+      const x2 = this.drawCurrent.x
+      const y2 = this.drawCurrent.y
+      
+      const theme = this.themeConfig
+      
+      return {
+        left: Math.min(x1, x2) + 'px',
+        top: Math.min(y1, y2) + 'px',
+        width: Math.abs(x2 - x1) + 'px',
+        height: Math.abs(y2 - y1) + 'px',
+        border: `${theme.drawingLineWidth}px dashed ${theme.drawingLineColor}`,
+        backgroundColor: theme.drawingFillColor
+      }
+    }
+  },
+  watch: {
+    zones: {
+      immediate: true,
+      handler(val) {
+        if (this.updatingFromLocal) {
+          this.updatingFromLocal = false
+          return
+        }
+        
+        this.updatingFromParent = true
+        
+        if (val && Array.isArray(val)) {
+          this.localZones = val.map(z => this.normalizeZone(z))
+        }
+        
+        this.$nextTick(() => {
+          this.updatingFromParent = false
+        })
+      }
+    },
+    localZones: {
+      deep: true,
+      handler(val) {
+        if (this.updatingFromParent) {
+          return
+        }
+        
+        // 防抖更新
+        if (this.mergedConfig.debounceUpdate) {
+          clearTimeout(this.updateTimer)
+          this.updateTimer = setTimeout(() => {
+            this.emitZonesUpdate(val)
+          }, 50)
+        } else {
+          this.emitZonesUpdate(val)
+        }
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.updateSize()
+    })
+    window.addEventListener('resize', this.onResize)
+    document.addEventListener('keydown', this.onKeyDown)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.onResize)
+    document.removeEventListener('keydown', this.onKeyDown)
+    this.unbindDrawEvents()
+    this.unbindDragEvents()
+    clearTimeout(this.resizeTimer)
+    clearTimeout(this.updateTimer)
+    if (this.rafId) {
+      cancelAnimationFrame(this.rafId)
+    }
+  },
+  methods: {
+    emitZonesUpdate(val) {
+      this.updatingFromLocal = true
+      const cleanZones = val.map(z => this.cleanZoneData(z))
+      this.$emit('update:zones', cleanZones)
+      this.$emit('change', cleanZones)
+    },
+    
+    // ========== 数据标准化 ==========
+    normalizeZone(zone) {
+      return {
+        id: zone.id || this.generateId(),
+        x: Number(zone.x) || 0,
+        y: Number(zone.y) || 0,
+        width: Number(zone.width) || 0,
+        height: Number(zone.height) || 0,
+        label: zone.label || zone.title || '',
+        title: zone.title || zone.label || '',
+        data: zone.data || {},
+        style: zone.style || {},
+        disabled: zone.disabled || false,
+        visible: zone.visible !== false,
+        draggable: zone.draggable !== false,
+        resizable: zone.resizable !== false,
+      }
+    },
+    
+    cleanZoneData(zone) {
+      return {
+        id: zone.id,
+        x: Number(zone.x.toFixed(2)),
+        y: Number(zone.y.toFixed(2)),
+        width: Number(zone.width.toFixed(2)),
+        height: Number(zone.height.toFixed(2)),
+        label: zone.label,
+        title: zone.title,
+        data: zone.data,
+        disabled: zone.disabled,
+        visible: zone.visible,
+        draggable: zone.draggable,
+        resizable: zone.resizable,
+        style: zone.style
+      }
+    },
+    
+    generateId() {
+      return 'zone_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9)
+    },
+    
+    // ========== 尺寸计算 ==========
+    updateSize() {
+      const wrapper = this.$refs.wrapper
+      if (wrapper) {
+        const oldWidth = this.wrapperWidth
+        const oldHeight = this.wrapperHeight
+        
+        this.wrapperWidth = wrapper.offsetWidth
+        this.wrapperHeight = wrapper.offsetHeight
+        
+        if (oldWidth !== this.wrapperWidth || oldHeight !== this.wrapperHeight) {
+          this.$emit('resize', {
+            width: this.wrapperWidth,
+            height: this.wrapperHeight
+          })
+        }
+      }
+    },
+    
+    onResize() {
+      clearTimeout(this.resizeTimer)
+      this.resizeTimer = setTimeout(() => {
+        this.updateSize()
+      }, 100)
+    },
+    
+    // ========== 坐标转换 ==========
+    getMousePos(e) {
+      const wrapper = this.$refs.wrapper
+      if (!wrapper) return { x: 0, y: 0 }
+      const rect = wrapper.getBoundingClientRect()
+      const clientX = e.touches ? e.touches[0].clientX : e.clientX
+      const clientY = e.touches ? e.touches[0].clientY : e.clientY
+      return {
+        x: clientX - rect.left,
+        y: clientY - rect.top
+      }
+    },
+    
+    toPercent(px, py) {
+      if (this.wrapperWidth === 0 || this.wrapperHeight === 0) {
+        return { x: 0, y: 0 }
+      }
+      
+      let x = (px / this.wrapperWidth) * 100
+      let y = (py / this.wrapperHeight) * 100
+      
+      if (this.mergedConfig.snapToGrid) {
+        const gridSize = this.mergedConfig.gridSize || 5
+        x = Math.round(x / gridSize) * gridSize
+        y = Math.round(y / gridSize) * gridSize
+      }
+      
+      return { x, y }
+    },
+    
+    getZoneStyle(zone) {
+      const theme = this.themeConfig
+      const isActive = this.activeZone === zone.id
+      const isHovered = this.hoveredZone === zone.id && !isActive
+      
+      let borderColor, fillColor, borderStyle, shadow, opacity
+      
+      if (isActive) {
+        borderColor = zone.style?.activeBorderColor || theme.zoneActiveBorderColor
+        fillColor = zone.style?.activeFillColor || theme.zoneActiveFillColor
+        borderStyle = theme.zoneActiveBorderStyle
+        shadow = theme.zoneActiveShadow
+        opacity = 1
+      } else if (isHovered) {
+        borderColor = theme.zoneHoverBorderColor
+        fillColor = theme.zoneHoverFillColor
+        borderStyle = theme.zoneBorderStyle
+        shadow = 'none'
+        opacity = 1
+      } else {
+        borderColor = zone.style?.borderColor || theme.zoneBorderColor
+        fillColor = zone.style?.fillColor || theme.zoneFillColor
+        borderStyle = theme.zoneBorderStyle
+        shadow = 'none'
+        opacity = theme.zoneOpacity
+      }
+      
+      const baseStyle = {
+        left: (zone.x / 100 * this.wrapperWidth) + 'px',
+        top: (zone.y / 100 * this.wrapperHeight) + 'px',
+        width: (zone.width / 100 * this.wrapperWidth) + 'px',
+        height: (zone.height / 100 * this.wrapperHeight) + 'px',
+        border: `${theme.zoneBorderWidth}px ${borderStyle} ${borderColor}`,
+        backgroundColor: fillColor,
+        boxShadow: shadow,
+        opacity: zone.visible !== false ? opacity : 0,
+        cursor: zone.disabled ? 'not-allowed' : (this.mergedConfig.enableMove && zone.draggable !== false ? 'move' : 'default'),
+        pointerEvents: zone.disabled ? 'none' : 'auto',
+        transition: isActive || isHovered ? `box-shadow ${theme.transitionDuration} ${theme.transitionTiming}` : 'none'
+      }
+      
+      if (zone.style && typeof zone.style === 'object') {
+        const { borderColor: bc, fillColor: fc, activeBorderColor: abc, activeFillColor: afc, ...restStyle } = zone.style
+        return { ...baseStyle, ...restStyle }
+      }
+      
+      return baseStyle
+    },
+    
+    getHandleStyle(zone) {
+      const theme = this.themeConfig
+      const isActive = this.activeZone === zone.id
+      const size = theme.handleSize
+      
+      if (!this.mergedConfig.showHandles) {
+        return { display: 'none' }
+      }
+      
+      return {
+        width: size + 'px',
+        height: size + 'px',
+        backgroundColor: theme.handleColor,
+        border: `${theme.handleBorderWidth}px solid ${isActive ? theme.handleActiveBorderColor : theme.handleBorderColor}`,
+        borderRadius: theme.handleBorderRadius,
+        boxShadow: theme.handleShadow,
+        transition: 'none'
+      }
+    },
+    
+    getLabelStyle(zone) {
+      const theme = this.themeConfig
+      const isActive = this.activeZone === zone.id
+      
+      return {
+        color: zone.style?.labelColor || theme.labelColor,
+        fontSize: theme.labelFontSize,
+        fontWeight: theme.labelFontWeight,
+        backgroundColor: zone.style?.labelBackgroundColor || theme.labelBackgroundColor,
+        padding: theme.labelPadding,
+        borderRadius: theme.labelBorderRadius,
+        maxWidth: theme.labelMaxWidth,
+        textShadow: theme.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: isActive ? 1 : 0.8
+      }
+    },
+    
+    // ========== 键盘事件 ==========
+    onKeyDown(e) {
+      if ((e.key === 'Delete' || e.key === 'Backspace') && this.activeZone) {
+        if (this.mergedConfig.enableDelete) {
+          e.preventDefault()
+          this.removeZone(this.activeZone)
+          this.$emit('zone-deleted-by-keyboard', this.activeZone)
+        }
+      }
+      
+      if (e.key === 'Escape') {
+        this.activeZone = null
+        this.unbindDragEvents()
+        this.unbindDrawEvents()
+        this.drawing = false
+        this.dragData = null
+        this.$emit('selection-cleared')
+      }
+    },
+    
+    // ========== 事件绑定/解绑管理 ==========
+    bindDrawEvents() {
+      if (this.drawEventsBound) return
+      
+      document.addEventListener('mousemove', this.onDrawMove)
+      document.addEventListener('mouseup', this.onDrawEnd)
+      document.addEventListener('touchmove', this.onDrawMove, { passive: false })
+      document.addEventListener('touchend', this.onDrawEnd)
+      
+      this.drawEventsBound = true
+    },
+    
+    unbindDrawEvents() {
+      if (!this.drawEventsBound) return
+      
+      document.removeEventListener('mousemove', this.onDrawMove)
+      document.removeEventListener('mouseup', this.onDrawEnd)
+      document.removeEventListener('touchmove', this.onDrawMove)
+      document.removeEventListener('touchend', this.onDrawEnd)
+      
+      this.drawEventsBound = false
+    },
+    
+    bindDragEvents() {
+      if (this.dragEventsBound) return
+      
+      document.addEventListener('mousemove', this.onDragMove)
+      document.addEventListener('mouseup', this.onDragEnd)
+      document.addEventListener('touchmove', this.onDragMove, { passive: false })
+      document.addEventListener('touchend', this.onDragEnd)
+      
+      this.dragEventsBound = true
+    },
+    
+    unbindDragEvents() {
+      if (!this.dragEventsBound) return
+      
+      document.removeEventListener('mousemove', this.onDragMove)
+      document.removeEventListener('mouseup', this.onDragEnd)
+      document.removeEventListener('touchmove', this.onDragMove)
+      document.removeEventListener('touchend', this.onDragEnd)
+      
+      this.dragEventsBound = false
+    },
+    
+    // ========== 绘制新热区 ==========
+    onWrapperMouseDown(e) {
+      if (e.button !== 0) return
+      if (!this.mergedConfig.enableDraw) return
+      this.startDraw(e)
+    },
+    
+    onWrapperTouchStart(e) {
+      if (!this.mergedConfig.enableDraw) return
+      this.startDraw(e)
+    },
+    
+    startDraw(e) {
+      this.unbindDragEvents()
+      this.dragData = null
+      
+      if (this.localZones.length >= (this.mergedConfig.maxZones || 20)) {
+        this.$emit('max-reached', this.mergedConfig.maxZones)
+        return
+      }
+      
+      const pos = this.getMousePos(e)
+      this.drawing = true
+      this.drawStart = pos
+      this.drawCurrent = pos
+      this.activeZone = null
+      
+      this.$emit('draw-start', { x: pos.x, y: pos.y })
+      
+      this.bindDrawEvents()
+    },
+    
+    onDrawMove(e) {
+      if (!this.drawing) {
+        this.unbindDrawEvents()
+        return
+      }
+      e.preventDefault()
+      
+      if (this.mergedConfig.useAnimationFrame) {
+        if (this.rafId) return
+        this.rafId = requestAnimationFrame(() => {
+          this.rafId = null
+          this.drawCurrent = this.getMousePos(e)
+          
+          const x1 = this.drawStart.x
+          const y1 = this.drawStart.y
+          const x2 = this.drawCurrent.x
+          const y2 = this.drawCurrent.y
+          
+          const left = Math.min(x1, x2)
+          const top = Math.min(y1, y2)
+          const width = Math.abs(x2 - x1)
+          const height = Math.abs(y2 - y1)
+          
+          this.$emit('drawing', { x: left, y: top, width, height })
+        })
+      } else {
+        this.drawCurrent = this.getMousePos(e)
+        
+        const x1 = this.drawStart.x
+        const y1 = this.drawStart.y
+        const x2 = this.drawCurrent.x
+        const y2 = this.drawCurrent.y
+        
+        const left = Math.min(x1, x2)
+        const top = Math.min(y1, y2)
+        const width = Math.abs(x2 - x1)
+        const height = Math.abs(y2 - y1)
+        
+        this.$emit('drawing', { x: left, y: top, width, height })
+      }
+    },
+    
+    onDrawEnd() {
+      if (this.rafId) {
+        cancelAnimationFrame(this.rafId)
+        this.rafId = null
+      }
+      
+      if (!this.drawing) {
+        this.unbindDrawEvents()
+        return
+      }
+      
+      this.unbindDrawEvents()
+      
+      const x1 = this.drawStart.x
+      const y1 = this.drawStart.y
+      const x2 = this.drawCurrent.x
+      const y2 = this.drawCurrent.y
+      
+      const left = Math.min(x1, x2)
+      const top = Math.min(y1, y2)
+      const width = Math.abs(x2 - x1)
+      const height = Math.abs(y2 - y1)
+      
+      const minPx = (this.mergedConfig.minSize || 2) / 100 * Math.min(this.wrapperWidth, this.wrapperHeight)
+      
+      this.$emit('draw-end', {
+        x: left, y: top, width, height,
+        valid: width >= minPx && height >= minPx
+      })
+      
+      if (width >= minPx && height >= minPx) {
+        const percentPos = this.toPercent(left, top)
+        const percentSize = this.toPercent(width, height)
+        
+        const newZone = {
+          id: this.generateId(),
+          x: percentPos.x,
+          y: percentPos.y,
+          width: percentSize.x,
+          height: percentSize.y,
+          label: `热区${this.localZones.length + 1}`,
+          title: `热区${this.localZones.length + 1}`,
+          data: {},
+          disabled: false,
+          visible: true,
+          draggable: true,
+          resizable: true,
+          style: {}
+        }
+        
+        this.localZones.push(newZone)
+        this.activeZone = newZone.id
+        this.$emit('zone-created', { ...newZone })
+      }
+      
+      this.drawing = false
+    },
+    
+    // ========== 热区交互事件 ==========
+    onZoneMouseEnter(zone) {
+      this.hoveredZone = zone.id
+      this.$emit('zone-hover', { ...zone })
+    },
+    
+    onZoneMouseLeave(zone) {
+      if (this.hoveredZone === zone.id) {
+        this.hoveredZone = null
+        this.$emit('zone-leave', { ...zone })
+      }
+    },
+    
+    onZoneMouseDown(e, zone) {
+      if (e.button !== 0) return
+      if (!this.mergedConfig.enableMove) return
+      if (zone.disabled || zone.draggable === false) return
+      this.startDrag(e, zone, null)
+      this.$emit('zone-click', { ...zone })
+    },
+    
+    onZoneTouchStart(e, zone) {
+      if (!this.mergedConfig.enableMove) return
+      if (zone.disabled || zone.draggable === false) return
+      this.startDrag(e, zone, null)
+      this.$emit('zone-click', { ...zone })
+    },
+    
+    onHandleMouseDown(e, zone, handle) {
+      if (e.button !== 0) return
+      if (!this.mergedConfig.enableResize) return
+      if (zone.disabled || zone.resizable === false) return
+      this.startDrag(e, zone, handle)
+    },
+    
+    onHandleTouchStart(e, zone, handle) {
+      if (!this.mergedConfig.enableResize) return
+      if (zone.disabled || zone.resizable === false) return
+      this.startDrag(e, zone, handle)
+    },
+    
+    startDrag(e, zone, handle) {
+      this.unbindDrawEvents()
+      this.drawing = false
+      if (this.rafId) {
+        cancelAnimationFrame(this.rafId)
+        this.rafId = null
+      }
+      
+      const prevActiveZone = this.activeZone
+      this.activeZone = zone.id
+      
+      if (prevActiveZone !== zone.id) {
+        this.$emit('zone-focus', { ...zone })
+      }
+      
+      const pos = this.getMousePos(e)
+      
+      this.dragData = {
+        zoneId: zone.id,
+        startMouse: pos,
+        startZone: { ...zone },
+        handle: handle
+      }
+      
+      this.$emit('drag-start', {
+        zone: { ...zone },
+        handle: handle,
+        type: handle ? 'resize' : 'move'
+      })
+      
+      this.bindDragEvents()
+    },
+    
+    onDragMove(e) {
+      if (!this.dragData) {
+        this.unbindDragEvents()
+        return
+      }
+      e.preventDefault()
+      
+      if (this.mergedConfig.useAnimationFrame) {
+        if (this.rafId) return
+        this.rafId = requestAnimationFrame(() => {
+          this.rafId = null
+          this.processDrag(e)
+        })
+      } else {
+        this.processDrag(e)
+      }
+    },
+    
+    processDrag(e) {
+      if (!this.dragData) return
+      
+      const pos = this.getMousePos(e)
+      const dx = (pos.x - this.dragData.startMouse.x) / this.wrapperWidth * 100
+      const dy = (pos.y - this.dragData.startMouse.y) / this.wrapperHeight * 100
+      
+      const zoneIndex = this.localZones.findIndex(z => z.id === this.dragData.zoneId)
+      if (zoneIndex === -1) {
+        this.unbindDragEvents()
+        this.dragData = null
+        return
+      }
+      
+      let zone = { ...this.localZones[zoneIndex] }
+      const start = this.dragData.startZone
+      const minSize = this.mergedConfig.minSize || 2
+      
+      if (this.dragData.handle) {
+        const handle = this.dragData.handle
+        let { x, y, width, height } = start
+        
+        if (handle.includes('e')) width += dx
+        if (handle.includes('w')) { x += dx; width -= dx }
+        if (handle.includes('s')) height += dy
+        if (handle.includes('n')) { y += dy; height -= dy }
+        
+        if (width < minSize) {
+          if (handle.includes('w')) x = start.x + start.width - minSize
+          width = minSize
+        }
+        if (height < minSize) {
+          if (handle.includes('n')) y = start.y + start.height - minSize
+          height = minSize
+        }
+        
+        if (x < 0) { width += x; x = 0 }
+        if (y < 0) { height += y; y = 0 }
+        if (x + width > 100) width = 100 - x
+        if (y + height > 100) height = 100 - y
+        
+        zone = { ...zone, x, y, width, height }
+        
+        this.$emit('resizing', {
+          zone: { ...zone },
+          handle: handle,
+          originalZone: { ...start }
+        })
+      } else {
+        let newX = start.x + dx
+        let newY = start.y + dy
+        
+        newX = Math.max(0, Math.min(newX, 100 - zone.width))
+        newY = Math.max(0, Math.min(newY, 100 - zone.height))
+        
+        zone.x = newX
+        zone.y = newY
+        
+        this.$emit('moving', {
+          zone: { ...zone },
+          originalZone: { ...start }
+        })
+      }
+      
+      this.$set(this.localZones, zoneIndex, zone)
+      this.$emit('zone-updated', { ...zone })
+    },
+    
+    onDragEnd() {
+      if (this.rafId) {
+        cancelAnimationFrame(this.rafId)
+        this.rafId = null
+      }
+      
+      if (this.dragData) {
+        const zone = this.localZones.find(z => z.id === this.dragData.zoneId)
+        if (zone) {
+          this.$emit('drag-end', {
+            zone: { ...zone },
+            type: this.dragData.handle ? 'resize' : 'move'
+          })
+        }
+      }
+      
+      this.unbindDragEvents()
+      this.dragData = null
+    },
+    
+    // ========== 公共方法 ==========
+    addZone(zoneData) {
+      if (this.localZones.length >= (this.mergedConfig.maxZones || 20)) {
+        this.$emit('max-reached', this.mergedConfig.maxZones)
+        return null
+      }
+      
+      const newZone = this.normalizeZone({
+        id: zoneData.id || this.generateId(),
+        x: zoneData.x || 10,
+        y: zoneData.y || 10,
+        width: zoneData.width || 20,
+        height: zoneData.height || 20,
+        label: zoneData.label || `热区${this.localZones.length + 1}`,
+        title: zoneData.title || zoneData.label || `热区${this.localZones.length + 1}`,
+        data: zoneData.data || {},
+        disabled: zoneData.disabled || false,
+        visible: zoneData.visible !== false,
+        draggable: zoneData.draggable !== false,
+        resizable: zoneData.resizable !== false,
+        style: zoneData.style || {}
+      })
+      
+      newZone.x = Math.max(0, Math.min(newZone.x, 100 - newZone.width))
+      newZone.y = Math.max(0, Math.min(newZone.y, 100 - newZone.height))
+      
+      this.localZones.push(newZone)
+      this.activeZone = newZone.id
+      this.$emit('zone-created', { ...newZone })
+      
+      return newZone
+    },
+    
+    addZones(zonesData) {
+      if (!Array.isArray(zonesData)) return []
+      return zonesData.map(data => this.addZone(data)).filter(Boolean)
+    },
+    
+    updateZone(zoneId, updates) {
+      const index = this.localZones.findIndex(z => z.id === zoneId)
+      if (index === -1) return false
+      
+      const zone = this.localZones[index]
+      const updatedZone = { ...zone }
+      
+      if (updates.x !== undefined) updatedZone.x = Number(updates.x)
+      if (updates.y !== undefined) updatedZone.y = Number(updates.y)
+      if (updates.width !== undefined) updatedZone.width = Number(updates.width)
+      if (updates.height !== undefined) updatedZone.height = Number(updates.height)
+      if (updates.label !== undefined) updatedZone.label = updates.label
+      if (updates.title !== undefined) updatedZone.title = updates.title
+      if (updates.data !== undefined) updatedZone.data = { ...zone.data, ...updates.data }
+      if (updates.disabled !== undefined) updatedZone.disabled = updates.disabled
+      if (updates.visible !== undefined) updatedZone.visible = updates.visible
+      if (updates.draggable !== undefined) updatedZone.draggable = updates.draggable
+      if (updates.resizable !== undefined) updatedZone.resizable = updates.resizable
+      if (updates.style !== undefined) updatedZone.style = { ...zone.style, ...updates.style }
+      
+      updatedZone.x = Math.max(0, Math.min(updatedZone.x, 100 - updatedZone.width))
+      updatedZone.y = Math.max(0, Math.min(updatedZone.y, 100 - updatedZone.height))
+      
+      this.$set(this.localZones, index, updatedZone)
+      this.$emit('zone-updated', { ...updatedZone })
+      
+      return true
+    },
+    
+    setActiveZone(zoneId) {
+      if (zoneId === null) {
+        this.activeZone = null
+        this.$emit('selection-cleared')
+        return
+      }
+      const zone = this.localZones.find(z => z.id === zoneId)
+      if (zone) {
+        this.activeZone = zoneId
+        this.$emit('zone-focus', { ...zone })
+      }
+    },
+    
+    getActiveZone() {
+      if (!this.activeZone) return null
+      const zone = this.localZones.find(z => z.id === this.activeZone)
+      return zone ? { ...zone } : null
+    },
+    
+    getZone(zoneId) {
+      const zone = this.localZones.find(z => z.id === zoneId)
+      return zone ? { ...zone } : null
+    },
+    
+    getAllZones() {
+      return this.localZones.map(z => ({ ...z }))
+    },
+    
+    removeZone(zoneId) {
+      const index = this.localZones.findIndex(z => z.id === zoneId)
+      if (index !== -1) {
+        const removed = this.localZones.splice(index, 1)[0]
+        if (this.activeZone === zoneId) this.activeZone = null
+        if (this.hoveredZone === zoneId) this.hoveredZone = null
+        this.$emit('zone-deleted', removed)
+        return true
+      }
+      return false
+    },
+    
+    clearAll() {
+      this.unbindDrawEvents()
+      this.unbindDragEvents()
+      this.drawing = false
+      this.dragData = null
+      this.activeZone = null
+      this.hoveredZone = null
+      if (this.rafId) {
+        cancelAnimationFrame(this.rafId)
+        this.rafId = null
+      }
+      this.localZones = []
+      this.$emit('all-cleared')
+    },
+    
+    exportZones() {
+      return this.localZones.map(z => this.cleanZoneData(z))
+    },
+    
+    importZones(zonesData) {
+      if (!Array.isArray(zonesData)) return
+      this.clearAll()
+      this.addZones(zonesData)
+      this.$emit('zones-imported', this.localZones.length)
+    },
+    
+    getSize() {
+      return { width: this.wrapperWidth, height: this.wrapperHeight }
+    },
+    
+    disableZone(zoneId) { this.updateZone(zoneId, { disabled: true }) },
+    enableZone(zoneId) { this.updateZone(zoneId, { disabled: false }) },
+    hideZone(zoneId) { this.updateZone(zoneId, { visible: false }) },
+    showZone(zoneId) { this.updateZone(zoneId, { visible: true }) }
+  }
+}
+</script>
+
+<style scoped>
+.hotzone-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  cursor: crosshair;
+  line-height: 0;
+  user-select: none;
+}
+
+.hotzone-wrapper img {
+  width: 100%;
+  height: auto;
+  display: block;
+  pointer-events: none;
+  user-select: none;
+}
+
+.drawing-rect {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 5;
+}
+
+.zone-rect {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  z-index: 10;
+}
+
+.zone-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+  pointer-events: none;
+  z-index: 25;
+}
+
+.handle {
+  position: absolute;
+  z-index: 20;
+  box-sizing: border-box;
+}
+
+/* 手柄位置 */
+.handle.nw { top: -5px; left: -5px; cursor: nw-resize; }
+.handle.n  { top: -5px; left: calc(50% - 5px); cursor: n-resize; }
+.handle.ne { top: -5px; right: -5px; cursor: ne-resize; }
+.handle.e  { top: calc(50% - 5px); right: -5px; cursor: e-resize; }
+.handle.se { bottom: -5px; right: -5px; cursor: se-resize; }
+.handle.s  { bottom: -5px; left: calc(50% - 5px); cursor: s-resize; }
+.handle.sw { bottom: -5px; left: -5px; cursor: sw-resize; }
+.handle.w  { top: calc(50% - 5px); left: -5px; cursor: w-resize; }
+</style>

package/src/index.js

@@ -0,0 +1,13 @@
+import ImageHotzone from './components/ImageHotzone.vue'
+
+// 插件安装方法
+ImageHotzone.install = function(Vue) {
+  Vue.component(ImageHotzone.name, ImageHotzone)
+}
+
+// 支持标签引入
+if (typeof window !== 'undefined' && window.Vue) {
+  window.Vue.use(ImageHotzone)
+}
+
+export default ImageHotzone

package/src/utils/index.js

@@ -0,0 +1,108 @@
+/**
+ * 生成唯一ID
+ * @returns {string}
+ */
+export function generateId() {
+  return 'zone_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9)
+}
+
+/**
+ * 标准化热区数据
+ * @param {Object} zone
+ * @returns {Object}
+ */
+export function normalizeZone(zone) {
+  return {
+    id: zone.id || generateId(),
+    x: Number(zone.x) || 0,
+    y: Number(zone.y) || 0,
+    width: Number(zone.width) || 0,
+    height: Number(zone.height) || 0,
+    label: zone.label || zone.title || '',
+    title: zone.title || zone.label || '',
+    data: zone.data || {},
+    style: zone.style || {},
+    disabled: zone.disabled || false,
+    visible: zone.visible !== false,
+    draggable: zone.draggable !== false,
+    resizable: zone.resizable !== false
+  }
+}
+
+/**
+ * 清理热区数据（移除内部属性）
+ * @param {Object} zone
+ * @returns {Object}
+ */
+export function cleanZoneData(zone) {
+  return {
+    id: zone.id,
+    x: Number(zone.x.toFixed(2)),
+    y: Number(zone.y.toFixed(2)),
+    width: Number(zone.width.toFixed(2)),
+    height: Number(zone.height.toFixed(2)),
+    label: zone.label,
+    title: zone.title,
+    data: zone.data,
+    disabled: zone.disabled,
+    visible: zone.visible,
+    draggable: zone.draggable,
+    resizable: zone.resizable,
+    style: zone.style
+  }
+}
+
+/**
+ * 像素转百分比
+ * @param {number} px
+ * @param {number} containerSize
+ * @param {boolean} snapToGrid
+ * @param {number} gridSize
+ * @returns {number}
+ */
+export function pxToPercent(px, containerSize, snapToGrid = false, gridSize = 5) {
+  if (containerSize === 0) return 0
+  let percent = (px / containerSize) * 100
+  if (snapToGrid) {
+    percent = Math.round(percent / gridSize) * gridSize
+  }
+  return percent
+}
+
+/**
+ * 获取鼠标/触摸位置
+ * @param {Event} e
+ * @param {HTMLElement} container
+ * @returns {{x: number, y: number}}
+ */
+export function getMousePos(e, container) {
+  if (!container) return { x: 0, y: 0 }
+  const rect = container.getBoundingClientRect()
+  const clientX = e.touches ? e.touches[0].clientX : e.clientX
+  const clientY = e.touches ? e.touches[0].clientY : e.clientY
+  return {
+    x: clientX - rect.left,
+    y: clientY - rect.top
+  }
+}
+
+/**
+ * 限制数值范围
+ * @param {number} value
+ * @param {number} min
+ * @param {number} max
+ * @returns {number}
+ */
+export function clamp(value, min, max) {
+  return Math.max(min, Math.min(value, max))
+}
+
+/**
+ * 合并默认配置
+ * @param {Object} defaultConfig
+ * @param {Object} userConfig
+ * @returns {Object}
+ */
+export function mergeConfig(defaultConfig, userConfig) {
+  return { ...defaultConfig, ...userConfig }
+}