vue-img-mapper/dist/vue-img-mapper.es.js

Vue Component to highlight interactive zones in images

var e=Object.defineProperty,t=Object.defineProperties,i=Object.getOwnPropertyDescriptors,a=Object.getOwnPropertySymbols,s=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable,o=(t,i,a)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:a}):t[i]=a,n=(e,t)=>{for(var i in t||(t={}))s.call(t,i)&&o(e,i,t[i]);if(a)for(var i of a(t))r.call(t,i)&&o(e,i,t[i]);return e},h=(e,a)=>t(e,i(a));import{openBlock as l,createElementBlock as d,createCommentVNode as p,defineComponent as c,resolveComponent as u,normalizeStyle as m,createElementVNode as g,Fragment as f,renderList as v,createBlock as y,mergeProps as x}from"vue";const C={inheritAttrs:!1,props:{area:{type:Object,required:!0},index:{type:Number,required:!0},extendedArea:{type:Function,required:!0},hoverOff:{type:Function,required:!0},hoverOn:{type:Function,required:!0},click:{type:Function,required:!0}},methods:{mouseMove:(e,t,i,a)=>{a.$attrs.onMousemove&&(i.preventDefault(),i.stopImmediatePropagation(),a.$emit("mousemove",e,t,i))},mouseDown:(e,t,i,a)=>{a.$attrs.onMousedown&&(i.preventDefault(),i.stopImmediatePropagation(),a.$emit("mousedown",e,t,i))},mouseUp:(e,t,i,a)=>{a.$attrs.onMouseup&&(i.preventDefault(),i.stopImmediatePropagation(),a.$emit("mouseup",e,t,i))},touchStart:(e,t,i,a)=>{a.$attrs.onTouchstart&&(i.preventDefault(),i.stopImmediatePropagation(),a.$emit("touchstart",e,t,i))},touchEnd:(e,t,i,a)=>{a.$attrs.onTouchend&&(i.preventDefault(),i.stopImmediatePropagation(),a.$emit("touchend",e,t,i))}}},$=["coords","shape","href"];C.render=function(e,t,i,a,s,r){return i.area.disabled?p("",!0):(l(),d("area",{key:0,coords:i.extendedArea(i.area).scaledCoords.join(","),shape:i.area.shape,href:i.area.href,alt:"map",onMouseenter:t[0]||(t[0]=e=>i.hoverOn(i.extendedArea(i.area),i.index,e)),onMouseleave:t[1]||(t[1]=e=>i.hoverOff(i.extendedArea(i.area),i.index,e)),onMousemove:t[2]||(t[2]=e=>r.mouseMove(i.extendedArea(i.area),i.index,e,this)),onMousedown:t[3]||(t[3]=e=>r.mouseDown(i.extendedArea(i.area),i.index,e,this)),onMouseup:t[4]||(t[4]=e=>r.mouseUp(i.extendedArea(i.area),i.index,e,this)),onTocuhstart:t[5]||(t[5]=e=>r.touchStart(i.extendedArea(i.area),i.index,e,this)),onTouchend:t[6]||(t[6]=e=>r.touchEnd(i.extendedArea(i.area),i.index,e,this)),onClick:t[7]||(t[7]=e=>i.click(i.extendedArea(i.area),i.index,e))},null,40,$))};const S={position:"absolute",top:0,left:0},M=h(n({},S),{zIndex:1,userSelect:"none"}),k=h(n({},M),{width:"100%",height:"auto"}),b={position:"relative"},w=h(n({},S),{pointerEvents:"none",zIndex:2}),P={src:{type:String,required:!0},map:{type:Object,required:!0},areaKeyName:{type:String,default:"id"},active:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},fillColor:{type:String,default:"rgba(255, 255, 255, 0.5)"},strokeColor:{type:String,default:"rgba(0, 0, 0, 0.5)"},lineWidth:{type:Number,default:1},imgWidth:{type:Number,default:0},width:{type:Number,default:0},height:{type:Number,default:0},natural:{type:Boolean,default:!1},stayHighlighted:{type:Boolean,default:!1},stayMultiHighlighted:{type:Boolean,default:!1},toggleHighlighted:{type:Boolean,default:!1},responsive:{type:Boolean,default:!1},parentWidth:{type:Number,default:0}},O=(e,t,i,a,s,r,o)=>(console.log(),"rect"===e&&r?((e,t,i,a,s)=>{const[r,o,n,h]=e;s.fillStyle=t,s.lineWidth=i,s.strokeStyle=a,s.strokeRect(r,o,n-r,h-o),s.fillRect(r,o,n-r,h-o)})(t,i,a,s,o):"circle"===e&&r?((e,t,i,a,s)=>{s.fillStyle=t,s.beginPath(),s.lineWidth=i,s.strokeStyle=a,s.arc(e[0],e[1],e[2],0,2*Math.PI),s.closePath(),s.stroke(),s.fill()})(t,i,a,s,o):!("poly"!==e||!r)&&((e,t,i,a,s)=>{const r=e.reduce(((e,t,i,a)=>i%2?e:[...e,a.slice(i,i+2)]),[]);s.fillStyle=t,s.beginPath(),s.lineWidth=i,s.strokeStyle=a,r.forEach((e=>s.lineTo(e[0],e[1]))),s.closePath(),s.stroke(),s.fill()})(t,i,a,s,o)),A=c({name:"ImageMapper",components:{RenderAreas:C},props:P,data(){return{mapState:this.map,storedMap:this.mapState,isRendered:!1,imgRef:null,ctx:null}},computed:{containerStyle:()=>b,canvasStyle:()=>w,mapStyle(){return this.onClick&&{cursor:"pointer"}||void 0},imgStyle(){return this.responsive?k:M}},watch:{parentWidth(){this.responsive&&this.initCanvas()}},updated(){!this.isRendered&&this.map.areas.length&&(this.ctx=this.$refs.canvas.getContext("2d"),this.updateCacheMap(),this.isRendered=!0),JSON.stringify(this.mapState)===JSON.stringify(this.map)&&(this.updateCacheMap(),this.initCanvas(),this.updateCanvas())},methods:{imageMouseMove:(e,t)=>{t.$attrs.onImageMouseMove&&(e.preventDefault(),e.stopImmediatePropagation(),t.$emit("imageMouseMove",e))},imageClick:(e,t)=>{t.$attrs.onImageClick&&(e.preventDefault(),e.stopImmediatePropagation(),t.$emit("imageClick",e))},clearHighlightedArea(){this.mapState=this.storedMap,this.initCanvas()},extendedArea(e){const t=this.scaleCoords(e.coords),i=this.computeCenter(e);return h(n({},e),{scaledCoords:t,center:i})},updateCacheMap(){this.mapState=this.map,this.storedMap=this.map},getDimensions(e){return"function"==typeof this[e]?this[e](this.$refs.img):this[e]},getValues(e,t,i="area"){const{naturalWidth:a,naturalHeight:s,clientWidth:r,clientHeight:o}=this.$refs.img;return"width"===e?this.responsive?this.parentWidth:this.natural?a:this.width||"image"===i?t:r:"height"===e?this.responsive?o:this.natural?s:this.height||"image"===i?t:o:0},initCanvas(e=!1){const t=this.getDimensions("width"),i=this.getDimensions("height"),a=this.getValues("width",t),s=this.getValues("height",i);(this.width||this.responsive)&&(this.$refs.img.width=this.getValues("width",t,"image")),(this.height||this.responsive)&&(this.$refs.img.height=this.getValues("height",i,"image")),this.$refs.canvas.width=a,this.$refs.canvas.height=s,this.$refs.container.style.width=`${a}px`,this.$refs.container.style.height=`${s}px`,this.ctx=this.$refs.canvas.getContext("2d"),this.ctx.fillStyle=this.fillColor,this.$attrs.onLoad&&e&&this.$emit("load",this.$refs.img,{width:a,height:s}),this.imgRef=this.$refs.img,this.renderPrefilledAreas()},hoverOn(e,t,i){const{shape:a,scaledCoords:s,fillColor:r,lineWidth:o,strokeColor:n,active:h}=e;this.active&&O(a,s,r||this.fillColor,o||this.lineWidth,n||this.strokeColor,null==h||h,this.ctx),this.$attrs.onMouseenter&&(i.preventDefault(),i.stopImmediatePropagation(),this.$emit("mouseenter",e,t,i))},hoverOff(e,t,i){this.active&&(this.ctx.clearRect(0,0,this.$refs.canvas.width,this.$refs.canvas.height),this.renderPrefilledAreas()),this.$attrs.onMouseleave&&(i.preventDefault(),i.stopImmediatePropagation(),this.$emit("mouseleave",e,t,i))},click(e,t,i){var a;if((null==(a=e.active)||a)&&(this.stayHighlighted||this.stayMultiHighlighted||this.toggleHighlighted)){const t=n({},e),i=this.stayMultiHighlighted?this.mapState:this.storedMap;this.toggleHighlighted&&t.preFillColor?delete t.preFillColor:(this.stayHighlighted||this.stayMultiHighlighted)&&(t.preFillColor=e.fillColor||this.fillColor);const a=i.areas.map((i=>i[this.areaKeyName]===e[this.areaKeyName]?t:i));this.mapState=h(n({},this.mapState),{areas:a})}this.$attrs.onClick&&(i.preventDefault(),i.stopImmediatePropagation(),this.$emit("click",e,t,i))},scaleCoords(e){const t=this.width&&this.imgWidth&&this.imgWidth>0?this.width/this.imgWidth:1;return this.responsive&&this.parentWidth?e.map((e=>e/(this.imgRef.naturalWidth/this.parentWidth))):e.map((e=>e*t))},renderPrefilledAreas(e=this.mapState){e.areas.map((e=>!!e.preFillColor&&(O(e.shape,this.scaleCoords(e.coords),e.preFillColor,e.lineWidth||this.lineWidth,e.strokeColor||this.strokeColor,!0,this.ctx),!0)))},computeCenter(e){if(!e)return[0,0];const t=this.scaleCoords(e.coords);switch(e.shape){case"circle":return[t[0],t[1]];case"poly":case"rect":default:{const e=t.length/2,{y:i,x:a}=t.reduce((({y:t,x:i},a,s)=>s%2?{y:t+a/e,x:i}:{y:t,x:i+a/e}),{y:0,x:0});return[a,i]}}},updateCanvas(){this.ctx.clearRect(0,0,this.$refs.canvas.width,this.$refs.canvas.height),this.renderPrefilledAreas(this.map)}}}),W=["src","useMap"],I=["name"];A.render=function(e,t,i,a,s,r){const o=u("RenderAreas");return l(),d("div",{id:"img-mapper",ref:"container",style:m(e.containerStyle)},[g("img",{ref:"img",role:"presentation",class:"img-mapper-img",style:m(e.imgStyle),src:e.src,useMap:`#${e.mapState.name}`,alt:"map",onLoad:t[0]||(t[0]=t=>e.initCanvas(!0)),onClick:t[1]||(t[1]=t=>e.imageClick(t,this)),onMousemove:t[2]||(t[2]=t=>e.imageMouseMove(t,this))},null,44,W),g("canvas",{ref:"canvas",class:"img-mapper-canvas",style:m(e.canvasStyle)},null,4),e.isRendered&&!e.disabled?(l(),d("map",{key:0,class:"img-mapper-map",name:e.mapState.name,style:m(e.mapStyle)},[(l(!0),d(f,null,v(e.mapState.areas,((t,i)=>(l(),y(o,x({key:t[e.areaKeyName]||i.toString(),area:t,index:i,"extended-area":e.extendedArea,"hover-on":e.hoverOn,"hover-off":e.hoverOff,click:e.click},e.$attrs),null,16,["area","index","extended-area","hover-on","hover-off","click"])))),128))],12,I)):p("",!0)],4)};export{A as default};