vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
371 lines (368 loc) • 84.9 kB
JavaScript
"use strict";var I=Object.create;var b=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var f=(e,o,s,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of C(o))!x.call(e,l)&&l!==s&&b(e,l,{get:()=>o[l],enumerable:!(n=F(o,l))||n.enumerable});return e};var k=(e,o,s)=>(s=e!=null?I(S(e)):{},f(o||!e||!e.__esModule?b(s,"default",{value:e,enumerable:!0}):s,e));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./index-B7zOq_yO.cjs"),g=require("./dom-to-png-CNF-s1oi.cjs"),i=require("vue"),m=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),p={props:{config:{type:Object,default(){return{}}},dataset:{type:Object,default(){return{shapes:[],lastSelectedShape:void 0}}}},data(){return{activeShape:void 0,strokeSize:1,currentPointer:{start:{x:0,y:0},end:{x:0,end:0}},currentTarget:void 0,hoveredShapeId:void 0,isBold:!1,isBulletTextMode:!1,isDash:!1,isDeleteMode:!1,isDrawing:!1,isDrawingNewShape:!0,isDrawMode:!1,isItalic:!1,isMouseDown:!1,isMoveMode:!1,isPrinting:!1,isResizeMode:!1,isSelectMode:!1,isSummaryOpen:!1,isTextMode:!1,isUnderline:!1,isWriting:!1,lastSelectedShape:this.dataset.lastSelectedShape,pointerDownId:-1,pointerPosition:{x:0,y:0},preventEdit:!0,selectedGroup:[],shapes:this.dataset.shapes?this.dataset.shapes:[],shapesOrder:[],step:Math.round(Math.random())*1e5,svgHeight:1e3,svgWidth:1e3,options:{arrow:{color:"grey",filled:!0},circle:{color:"grey",filled:!1,radius:3,strokeWidth:2},rect:{color:"grey",filled:!1,strokeWidth:2,height:12,width:12}},selectedColor:"#000000",showCaret:!1,sizeRatio:1,slottedSvg:void 0,sourceWidth:1,sourceHeight:1,textAlign:"start",textFont:20,transparency:100,transparencyCodes:u.opacity}},watch:{shapes:{handler(e){e.length===0&&(this.lastSelectedShape=void 0)}}},computed:{FINAL_CONFIG(){const e=u.useConfig().vue_ui_annotator;if(!Object.keys(this.config||{}).length)return e;const o=this.treeShake({defaultConfig:e,userConfig:this.config});return this.convertConfigColors(o)},canSelect(){return this.shapes.filter(e=>!["line","group"].includes(e.type)).length>1},colorTransparency(){return this.transparencyCodes[this.transparency>98?98:this.transparency]},cursorClass(){switch(!0){case this.isDeleteMode:return"default";case this.isMoveMode:return"move";case this.isTextMode:return"text";case this.isResizeMode:return"se-resize";default:return""}},records(){return this.shapes},userShapes(){return this.records.map(e=>{switch(!0){case(e&&e.type==="arrow"):const o=e.strokeWidth>3?5:10,s=e.strokeWidth>3?2.5:5;return`
<defs>
<marker
id="${e.id}"
markerWidth="${o}"
markerHeight="${o}"
refX="0"
refY="${s}"
orient="auto"
>
<polygon
points="0 0,${o} ${s}, 0 ${o}"
fill="${e.color}"
/>
</marker>
</defs>
${this.includeSelectionIndicator(e)}
<g id="${e.id}">
<path
style="stroke-linecap: round !important; ${e.isDash?`stroke-dasharray: ${e.strokeWidth*3}`:""}"
stroke="${e.color}"
id="${e.id}"
d="M${e.x},${e.y} ${e.endX},${e.endY}"
stroke-width="${e.strokeWidth}"
marker-end="url(#${e.id})"
/>
</g>
<g id="${e.id}">
<rect
id="${e.id}"
x="${e.x-10}"
y="${e.y-10}"
height="20"
width="20"
fill="rgba(0,0,0,0.3)"
style="display:${this.isResizeMode||this.isMoveMode?"initial":"none"}; rx:1 !important; ry:1 !important;"
/>
</g>
${this.includeDeleteButton(e)}
</g>
`;case(e&&e.type==="circle"):return`
<g id="${e.id}">
${this.includeSelectionIndicator(e)}
<circle
id="${e.id}"
cx="${e.x}"
cy="${e.y}"
r="${e.circleRadius?e.circleRadius:Number.MIN_VALUE}"
fill="${e.isFilled?e.color+e.alpha:"rgba(255,255,255,0.001)"}"
stroke="${e.color+e.alpha}"
stroke-width="${e.strokeWidth}"
style="${e.isDash?`stroke-dasharray: ${e.strokeWidth*3}`:""}"
>
</circle>
</g>
${this.includeDeleteButton(e)}`;case(e&&e.type==="group"):return`<g id="${e.id}">
<rect
id="${this.isResizeMode?"":e.id}"
x="${e.x}"
y="${e.y}"
fill="transparent"
height="${e.rectHeight}"
width="${e.rectWidth}"
stroke="grey"
stroke-width="1"
style="rx:1 !important; ry:1 !important; ${e.isDash?`stroke-dasharray: ${e.strokeWidth*3}`:""}; display:${this.isSelectMode||this.isDeleteMode||this.hoveredShapeId&&this.hoveredShapeId===e.id?"initial":"none"};"
/>
<g id="${e.id}">
${e.content?e.content:""}
</g>
${this.includeDeleteButton(e)}
</g> `;case(e&&e.type==="rect"):return`<g id="${e.id}">
${this.includeSelectionIndicator(e)}
<rect
id="${this.isResizeMode?"":e.id}"
x="${e.x}"
y="${e.y}"
fill="${e.isFilled?e.color+e.alpha:"rgba(255,255,255,0.001)"}"
height="${e.rectHeight}"
width="${e.rectWidth}"
stroke="${e.color+e.alpha}"
stroke-width="${e.strokeWidth}"
style="rx:1 !important; ry:1 !important; ${e.isDash?`stroke-dasharray: ${e.strokeWidth*3}`:""}"
/>
<rect id="${e.id}"
x="${e.x+e.rectWidth}"
y="${e.y+e.rectHeight}"
height="20"
width="20"
fill="rgba(0,0,0,0.3)"
style="display:${this.isResizeMode?"initial":"none"}; rx:1 !important; ry:1 !important;"
/>
${this.includeDeleteButton(e)}
</g> `;case(e&&e.type==="line"):return`
<g id="${e.id}">
<path
id="${e.id}"
d="M${e.path?e.path:""}"
style="stroke:${e.color+e.alpha} !important; fill:none; stroke-width:${e.strokeWidth} !important; stroke-linecap: round !important; stroke-linejoin: round !important;"
/>
${this.includeDeleteButton(e)}
</g>
`;case(e&&e.type==="text"):const n=e.textContent.split(""),l=[];for(let t=0;t<n.length;t+=1)l.push(`
${e.isBulletTextMode?`<tspan x="${e.x-e.fontSize}" y="${e.y+e.fontSize*t}" id="${e.id}" font-size="${e.fontSize/2}">⬤</tspan>`:""}
<tspan id="${e.id}" x="${e.x}" y="${e.y+e.fontSize*t}">
${n[t]}
</tspan>`);return`
${this.includeSelectionIndicator(e)}
${this.computeTextElement(e,l,e.isBulletTextMode)}
`}})}},mounted(){const e=this.$refs.drawSvgContainer;let o=!1;this.walkTheDOM(e,l=>{if(!o&&["DIV","svg","section","canvas"].includes(l.tagName)){this.slottedSvg=l,o=!0;return}});const s=this.slottedSvg.getBoundingClientRect();this.sizeRatio=s.height/s.width,this.svgWidth=1e3,this.svgHeight=this.sizeRatio*1e3,this.sourceWidth=s.width,this.sourceHeight=s.height,new ResizeObserver(l=>{l.forEach(t=>{this.sourceWidth=t.contentRect.width,this.sourceHeight=t.contentRect.height,this.sizeRatio=t.contentRect.height/t.contentRect.width,this.svgHeight=this.sizeRatio*1e3})}).observe(this.slottedSvg),window.addEventListener("keydown",l=>{this.write(l)})},destroyed(){window.removeEventListener("keydown",e=>{this.write(e)})},methods:{treeShake:u.treeShake,convertConfigColors:u.convertConfigColors,bringShapeTo(e){const o=this.shapes.find(s=>s.id===this.lastSelectedShape.id);switch(!0){case e==="front":this.shapes=this.shapes.filter(s=>s.id!==o.id),this.shapes.push(o);break;case e==="back":this.shapes=this.shapes.filter(s=>s.id!==o.id),this.shapes=[o,...this.shapes];break;default:return}},clickSvg(e){if(this.isDeleteMode)return;this.deleteEmptyTextElement(),this.isTextMode?(this.isWriting=!0,this.showCaret=!0):(this.isWriting=!1,this.showCaret=!1,this.isTextMode=!1);let o=`text_${Math.random()*1e4}_${Math.random()*99999}`;if(this.isWriting){this.shapes.push({id:o,type:"text",lines:0,x:this.pointerPosition.x,y:this.pointerPosition.y,textContent:"",fontSize:this.copy(this.textFont),textAlign:this.copy(this.textAlign),isBold:this.copy(this.isBold),isItalic:this.copy(this.isItalic),isUnderline:this.copy(this.isUnderline),color:this.copy(this.selectedColor),isBulletTextMode:this.copy(this.isBulletTextMode)}),this.currentTarget=this.shapes.at(-1),this.lastSelectedShape=this.shapes.at(-1);return}const s=()=>{this.isDash=this.shapes.find(l=>l.id===e.target.id).isDash},n=()=>{this.strokeSize=this.shapes.find(l=>l.id===e.target.id).strokeWidth};if(this.isSelectMode=!1,e.target.id.includes("arrow")){this.activeShape="arrow",s(),n();return}if(e.target.id.includes("circle")){this.activeShape="circle",this.options.circle.filled=this.shapes.find(l=>l.id===e.target.id).isFilled,s(),n();return}if(e.target.id.includes("rect")){this.activeShape="rect",this.options.rect.filled=this.shapes.find(l=>l.id===e.target.id).isFilled,s(),n();return}if(e.target.id.includes("line")){this.activeShape="line",n();return}if(e.target.id.includes("text")){this.isTextMode=!0,this.isWriting=!0,this.showCaret=!0;const l=this.shapes.find(t=>t.id===e.target.id);l&&l.textAlign&&(this.textAlign=this.shapes.find(t=>t.id===e.target.id).textAlign),l&&(this.isBulletTextMode=this.shapes.find(t=>t.id===e.target.id).isBulletTextMode);return}},copyPaste(){const e={...this.lastSelectedShape,id:`${this.lastSelectedShape.id}_copy`,x:this.lastSelectedShape.x-100<0?1:this.lastSelectedShape.x-100,y:this.lastSelectedShape.y-100<0?1:this.lastSelectedShape.y-100};this.shapes.push(e)},includeDeleteButton(e,o=!1){switch(!0){case e.type==="circle":return`
<g id="${e.id}" style="display:${this.isDeleteMode?"initial":"none"};">
<circle id="${e.id}" cx="${e.x}" cy="${e.y}" r="12" fill="red"/>
<line stroke="white" stroke-width="2" id="${e.id}" x1="${e.x-4}" y1="${e.y-4}" x2="${e.x+4}" y2="${e.y+4}"/>
<line stroke="white" stroke-width="2" id="${e.id}" x1="${e.x+4}" y1="${e.y-4}" x2="${e.x-4}" y2="${e.y+4}"/>
</g>
`;case e.type==="text":let s,n=[-8,-12,-4,-12,-4];switch(!0){case e.textAlign==="start":o?s=[-20,-24,-16,-16,-24]:s=[-16,-20,-12,-12,-20];break;case e.textAlign==="middle":s=[0,-4,4,4,-4],n=[-32,-36,-28,-36,-28];break;case e.textAlign==="end":s=[16,20,12,12,20];break;default:s=[0,0,0];break}return`
<g id="${e.id}" style="display:${this.isDeleteMode?"initial":"none"};">
<circle id="${e.id}" cx="${e.x+s[0]}" cy="${e.y+n[0]}" r="12" fill="red"/>
<line stroke="white" stroke-width="2" id="${e.id}" x1="${e.x+s[1]}" y1="${e.y+n[1]}" x2="${e.x+s[2]}" y2="${e.y+n[2]}"/>
<line stroke="white" stroke-width="2" id="${e.id}" x1="${e.x+s[3]}" y1="${e.y+n[3]}" x2="${e.x+s[4]}" y2="${e.y+n[4]}"/>
</g>
`;default:return`
<g id="${e.id}" style="display:${this.isDeleteMode?"initial":"none"};">
<circle id="${e.id}" cx="${e.x-4}" cy="${e.y-4}" r="12" fill="red"/>
<line stroke="white" stroke-width="2" id="${e.id}" x1="${e.x-8}" y1="${e.y-8}" x2="${e.x}" y2="${e.y}"/>
<line stroke="white" stroke-width="2" id="${e.id}" x1="${e.x}" y1="${e.y-8}" x2="${e.x-8}" y2="${e.y}"/>
</g>
`}},includeSelectionIndicator(e){if(e)switch(!0){case e.type==="rect":return`
<rect
id="${e.id}"
style="stroke-dasharray: 10; display:${this.hoveredShapeId&&this.hoveredShapeId===e.id?"initial":"none"}"
x="${e.x-20}"
y="${e.y-20}"
height="${e.rectHeight+40}"
width="${e.rectWidth+40}"
fill="transparent"
stroke="grey"
/>
`;case e.type==="circle":return`
<rect
id="${e.id}"
style="stroke-dasharray: 10; display:${this.hoveredShapeId&&this.hoveredShapeId===e.id?"initial":"none"}"
x="${e.x-e.circleRadius-20}"
y="${e.y-e.circleRadius-20}"
height="${e.circleRadius*2+40}"
width="${e.circleRadius*2+40}"
fill="transparent"
stroke="grey"
/>
`;case e.type==="arrow":const o=e.endX-e.x>0,s=e.endY-e.y>0;return`
<rect
id="${e.id}"
style="stroke-dasharray: 10; display:${this.hoveredShapeId&&this.hoveredShapeId===e.id?"initial":"none"}"
x="${o?e.x-20:e.endX-20}"
y="${s?e.y-20:e.endY-20}"
height="${s?e.endY-e.y+40:e.y-e.endY+40}"
width="${o?e.endX-e.x+40:e.x-e.endX+40}"
fill="transparent"
stroke="grey"
/>
`;case e.type==="text":const n=Array.from(document.getElementsByTagName("text")).find(c=>c.id===e.id);if(!n)return;const{x:l,y:t,width:r,height:d}=n.getBBox();return`
<rect
id="${e.id}"
style="stroke-dasharray: 10; display:${this.hoveredShapeId&&this.hoveredShapeId===e.id?"initial":"none"}"
x="${l-20}"
y="${t-20}"
height="${d+40}"
width="${r+40}"
fill="transparent"
stroke="grey"
/>
`;default:return""}},allowEditAndHoverShapes(e){e.preventDefault(),this.preventEdit=!1,e.target&&e.target.id&&(this.hoveredShapeId=e.target.id)},setSelectedTextAlignTo(e){!this.lastSelectedShape||this.lastSelectedShape.type!=="text"||(this.lastSelectedShape.textAlign=e)},undoLastShape(){this.lastSelectedShape=void 0,this.shapes=this.shapes.slice(0,-1)},write(e){if(this.preventEdit)return;e.preventDefault();const o=e.keyCode;if(!this.isWriting)return;this.showCaret=!0;let s;if(this.lastSelectedShape.type==="text"?s=this.shapes.find(l=>l.id===this.lastSelectedShape.id):s=this.shapes.at(-1),this.currentTarget=s,s.type!=="text")return;this.currentTarget.isBold=this.copy(this.isBold),this.currentTarget.isItalic=this.copy(this.isItalic),this.currentTarget.isUnderline=this.copy(this.isUnderline);const n=[16,17,18,20,27,33,34,35,36,37,38,39,40,45,91,112,113,114,115,116,117,118,119,120,121,122,123,221,255,"Unidentified"];switch(!0){case o===8:s.textContent=s.textContent.slice(0,-1);break;case o===9:s.textContent+=" ";break;case o===13:s.lines+=1,s.textContent+="";return;case n.includes(o):return;default:s.textContent+=e.key}},groupShapes(){if(this.selectedGroup=[],this.activeShape!=="group"){this.isSelectMode=!1,this.shapes=this.shapes.filter(o=>o.type!=="group");return}const e=this.shapes.at(-1);if(this.shapes.forEach(o=>{if(o.type!=="group")switch(!0){case o.type==="arrow":const s=o.x<=o.endX&&o.y<=o.endY&&e.x<=o.x&&e.y<=o.y&&e.x+e.rectWidth>=o.endX&&e.y+e.rectHeight>=o.endY,n=o.endY<o.y&&o.x<o.endX&&e.x<=o.x&&e.y<=o.y&&e.x+e.rectWidth>=o.endX&&e.y+e.rectHeight>=o.y,l=o.x>o.endX&&o.y<o.endY&&e.x<=o.endX&&e.y<=o.endY&&e.x+e.rectWidth>=o.x&&e.y+e.rectHeight>=o.endY,t=o.x>o.endX&&o.y>o.endY&&e.x<=o.endX&&e.y<=o.endY&&e.x+e.rectWidth>=o.x&&e.y+e.rectHeight>=o.y;(s||n||l||t)&&this.selectedGroup.push(o);break;case o.type==="circle":e.x<=o.x+o.circleRadius&&e.y<=o.y+o.circleRadius&&o.x+o.circleRadius<=e.x+e.rectWidth&&o.y+o.circleRadius<=e.y+e.rectHeight&&this.selectedGroup.push(o);break;case o.type==="rect":e.x<=o.x&&e.y<=o.y&&o.x<=e.x+e.rectWidth&&o.y<=e.y+e.rectHeight&&o.x+o.rectWidth<=e.x+e.rectWidth&&o.y+o.rectHeight<=e.y+e.rectHeight&&o.rectWidth<=e.rectWidth&&o.rectHeight<=e.rectHeight&&this.selectedGroup.push(o);break;case o.type==="text":e.x<=o.x&&e.y<=o.y&&this.selectedGroup.push(o);break}}),this.selectedGroup=this.selectedGroup.map(o=>({...o,id:e.id,oldId:o.id,diffX:o.x-e.x,diffY:o.y-e.y,diffEndX:o.endX?o.endX-e.x:0,diffEndY:o.endY?o.endY-e.y:0})),e.source=this.selectedGroup,this.selectedGroup.length>1){const o=this.copy(this.selectedGroup).map(s=>s.oldId);this.shapes=this.shapes.filter(s=>!o.includes(s.id)),this.selectedGroup.forEach(s=>{switch(!0){case s.type==="circle":e.content+=`
<circle
id="${s.id}"
cx="${s.x}"
cy="${s.y}"
r="${s.circleRadius?s.circleRadius:Number.MIN_VALUE}"
fill="${s.isFilled?s.color+s.alpha:"rgba(255,255,255,0.001)"}"
stroke="${s.color+s.alpha}"
stroke-width="${s.strokeWidth}"
style="${s.isDash?`stroke-dasharray: ${s.strokeWidth*3}`:""}"
/>
`;break;case s.type==="rect":e.content+=`
<rect
id="${this.isResizeMode?"":s.id}"
x="${s.x}"
y="${s.y}"
fill="${s.isFilled?s.color+s.alpha:"rgba(255,255,255,0.001)"}"
height="${s.rectHeight}"
width="${s.rectWidth}"
stroke="${s.color+s.alpha}"
stroke-width="${s.strokeWidth}"
style="rx:1 !important; ry:1 !important; ${s.isDash?`stroke-dasharray: ${s.strokeWidth*3}`:""}"
/>
`;break;case s.type==="arrow":const n=s.strokeWidth>3?5:10,l=s.strokeWidth>3?2.5:5,t=Date.now();e.content+=`
<g id="${s.id}">
<defs>
<marker
id="${t}"
markerWidth="${n}"
markerHeight="${n}"
refX="0"
refY="${l}"
orient="auto"
>
<polygon
points="0 0,${n} ${l}, 0 ${n}"
fill="${s.color}"
/>
</marker>
</defs>
<path
style="stroke-linecap: round !important; ${s.isDash?`stroke-dasharray: ${s.strokeWidth*3}`:""}"
stroke="${s.color}"
id="${s.id}"
d="M${s.x},${s.y} ${s.endX},${s.endY}"
stroke-width="${s.strokeWidth}"
marker-end="url(#${t})"
/>
</g>
`;break;case s.type==="text":const r=s.textContent.split(""),d=[];for(let c=0;c<r.length;c+=1)d.push(`
${s.isBulletTextMode?`<tspan x="${s.x-s.fontSize}" y="${s.y+s.fontSize*c}" id="${s.id}" font-size="${s.fontSize/2}">⬤</tspan>`:""}
<tspan id="${s.id}" x="${s.x}" y="${s.y+s.fontSize*c}">
${r[c]}
</tspan>`);e.content+=`
${this.computeTextElement(s,d,s.isBulletTextMode)}
`;break}})}else this.shapes=this.shapes.filter(o=>o.id!==e.id)},moveGroup(e){e.content="",e.x=this.copy(this.pointerPosition.x)-e.rectWidth/2,e.y=this.copy(this.pointerPosition.y)-e.rectHeight/2,e.source.forEach(o=>{switch(!0){case o.type==="circle":e.content+=`
<circle
id="${o.id}"
cx="${this.copy(this.pointerPosition.x)+o.diffX-e.rectWidth/2}"
cy="${this.copy(this.pointerPosition.y)+o.diffY-e.rectHeight/2}"
r="${o.circleRadius?o.circleRadius:Number.MIN_VALUE}"
fill="${o.isFilled?o.color+o.alpha:"rgba(255,255,255,0.001)"}"
stroke="${o.color+o.alpha}"
stroke-width="${o.strokeWidth}"
style="${o.isDash?`stroke-dasharray: ${o.strokeWidth*3}`:""}"
/>
`;break;case o.type==="rect":e.content+=`
<rect
id="${this.isResizeMode?"":o.id}"
x="${this.copy(this.pointerPosition.x)+o.diffX-e.rectWidth/2}"
y="${this.copy(this.pointerPosition.y)+o.diffY-e.rectHeight/2}"
fill="${o.isFilled?o.color+o.alpha:"rgba(255,255,255,0.001)"}"
height="${o.rectHeight}"
width="${o.rectWidth}"
stroke="${o.color+o.alpha}"
stroke-width="${o.strokeWidth}"
style="rx:1 !important; ry:1 !important; ${o.isDash?`stroke-dasharray: ${o.strokeWidth*3}`:""}"
/>
`;break;case o.type==="arrow":const s=o.strokeWidth>3?5:10,n=o.strokeWidth>3?2.5:5,l=Date.now();e.content+=`
<g id="${o.id}">
<defs>
<marker
id="${l}"
markerWidth="${s}"
markerHeight="${s}"
refX="0"
refY="${n}"
orient="auto"
>
<polygon
points="0 0,${s} ${n}, 0 ${s}"
fill="${o.color}"
/>
</marker>
</defs>
<path
style="stroke-linecap: round !important; ${o.isDash?`stroke-dasharray: ${o.strokeWidth*3}`:""}"
stroke="${o.color}"
id="${o.id}"
d="M${this.copy(this.pointerPosition.x)+o.diffX-e.rectWidth/2},${this.copy(this.pointerPosition.y)+o.diffY-e.rectHeight/2} ${this.copy(this.pointerPosition.x)+o.diffEndX-e.rectWidth/2},${this.copy(this.pointerPosition.y)+o.diffEndY-e.rectHeight/2}"
stroke-width="${o.strokeWidth}"
marker-end="url(#${l})"
/>
</g>
`;break;case o.type==="text":const t=o.textContent.split(""),r=[];for(let d=0;d<t.length;d+=1)r.push(`
${o.isBulletTextMode?`<tspan x="${this.copy(this.pointerPosition.x)+o.diffX-o.fontSize-e.rectWidth/2}" y="${this.copy(this.pointerPosition.y)+o.diffY+o.fontSize*d-e.rectHeight/2}" id="${o.id}" font-size="${o.fontSize/2}">⬤</tspan>`:""}
<tspan id="${o.id}" x="${this.copy(this.pointerPosition.x)+o.diffX-e.rectWidth/2}" y="${this.copy(this.pointerPosition.y)+o.diffY+o.fontSize*d-e.rectHeight/2}">
${t[d]}
</tspan>`);e.content+=`
${this.computeTextElement(o,r,o.isBulletTextMode)}
`;break}})},chooseAction(e){switch(e.preventDefault(),this.isMouseDown=!0,!0){case this.isDrawMode:this.drawDown();break}},chooseMove(e){switch(e.preventDefault(),e.target.localName!=="svg"&&(this.currentTarget=e.target),!0){case(this.isMoveMode&&this.isMouseDown):this.moveDown();break;case(this.isResizeMode&&this.isMouseDown):this.resize();break}},computeCaretPosition(e){switch(!0){case e.textAlign==="middle":return`<path stroke="black" stroke-width="2" d="M${e.x},${e.y-e.fontSize} ${e.x},${e.y-e.fontSize-15}" /> <path stroke="black" stroke-width="2" d="M${e.x-3},${e.y-e.fontSize-5} ${e.x},${e.y-e.fontSize} ${e.x+3},${e.y-e.fontSize-5}"/>`;case e.textAlign==="start":const o=e.isBulletTextMode?e.fontSize:0;return`<path d="M${e.x-20-o},${e.y-e.fontSize/6} ${e.x-5-o},${e.y-e.fontSize/6}" stroke="black" stroke-width="2" />
<path d="M${e.x-10-o},${e.y-e.fontSize/3} ${e.x-5-o},${e.y-e.fontSize/6} ${e.x-10-o},${e.y}" stroke="black" stroke-width="2">`;case e.textAlign==="end":return`<path d="M${e.x+20},${e.y-e.fontSize/6} ${e.x+5},${e.y-e.fontSize/6}" stroke="black" stroke-width="2" />
<path d="M${e.x+10},${e.y-e.fontSize/3} ${e.x+5},${e.y-e.fontSize/6} ${e.x+10},${e.y}" stroke="black" stroke-width="2">`;default:return""}},computeTextElement(e,o,s=!1){switch(!0){case e.textAlign==="start":return`
<g id="${e.id}">
<rect
id="${e.id}"
style="display:${this.lastSelectedShape&&this.lastSelectedShape.id===e.id?"initial":"none"};"
x="${e.x}"
y="${e.y-50}"
height="${e.lines===0||e.lines===1?e.fontSize*4:e.fontSize*2*e.lines}"
width="100"
fill="rgba(0,0,0,0)"
/>
<text
style="user-select:none; height:100px;"
id="${e.id}"
x="${e.x}"
y="${e.y}"
text-anchor="${e.textAlign}"
font-size="${e.fontSize}"
fill="${e.color}"
font-weight="${e.isBold?"bold":"normal"}"
font-style="${e.isItalic?"italic":"normal"}"
text-decoration="${e.isUnderline?"underline":"none"}"
>
${o.join("")}
</text>
${this.showCaret&&this.lastSelectedShape&&this.lastSelectedShape.id===e.id?this.computeCaretPosition(e):""}
${this.includeDeleteButton(e,s)}
</g>
`;case e.textAlign==="middle":return`
<g id="${e.id}">
<rect
id="${e.id}"
style="display:${this.lastSelectedShape&&this.lastSelectedShape.id===e.id?"initial":"none"};"
x="${e.x-50}"
y="${e.y-50}"
height="${e.lines===0||e.lines===1?e.fontSize*4:e.fontSize*2*e.lines}"
width="100"
fill="rgba(0,0,0,0)"
/>
<text
style="user-select:none; height:100px;"
id="${e.id}"
x="${e.x}"
y="${e.y}"
text-anchor="${e.textAlign}"
font-size="${e.fontSize}"
fill="${e.color}"
font-weight="${e.isBold?"bold":"normal"}"
font-style="${e.isItalic?"italic":"normal"}"
text-decoration="${e.isUnderline?"underline":"none"}"
>
${o.join("")}
</text>
${this.showCaret&&this.lastSelectedShape&&this.lastSelectedShape.id===e.id?this.computeCaretPosition(e):""}
${this.includeDeleteButton(e)}
</g>
`;case e.textAlign==="end":return`
<g id="${e.id}">
<rect
id="${e.id}"
style="display:${this.lastSelectedShape&&this.lastSelectedShape.id===e.id?"initial":"none"};"
x="${e.x-100}"
y="${e.y-50}"
height="${e.lines===0||e.lines===1?e.fontSize*4:e.fontSize*2*e.lines}"
width="100"
fill="rgba(0,0,0,0)"
/>
<text
style="user-select:none; height:100px;"
id="${e.id}"
x="${e.x}"
y="${e.y}"
text-anchor="${e.textAlign}"
font-size="${e.fontSize}"
fill="${e.color}"
font-weight="${e.isBold?"bold":"normal"}"
font-style="${e.isItalic?"italic":"normal"}"
text-decoration="${e.isUnderline?"underline":"none"}"
>
${o.join("")}
</text>
${this.showCaret&&this.lastSelectedShape&&this.lastSelectedShape.id===e.id?this.computeCaretPosition(e):""}
${this.includeDeleteButton(e)}
</g>
`;default:return""}},copy(e){return JSON.parse(JSON.stringify(e))},clickShape(e){const o=e.target.id;switch(!0){case this.isDeleteMode:this.shapes=[...this.shapes].filter(s=>s.id!==o),this.lastSelectedShape=void 0;break;default:this.lastSelectedShape=this.shapes.find(s=>s.id===o);break}},deleteEmptyTextElement(){!this.lastSelectedShape||!this.lastSelectedShape.id.includes("text")||this.lastSelectedShape.textContent===""&&(this.shapes=this.shapes.filter(e=>e.id!==this.lastSelectedShape.id),this.lastSelectedShape=this.shapes.at(-1))},drawUp(e=!1){if(!this.activeShape||!this.isDrawing)return;this.currentPointer.end={x:this.pointerPosition.x,y:this.pointerPosition.y};let o;this.shapes.length>0&&this.currentTarget&&(o=[...this.shapes].find(d=>d.id===this.currentTarget.id));let s,n,l;o&&(s=o.x-this.currentPointer.end.x,n=o.y-this.currentPointer.end.y,l=Math.sqrt(s*s+n*n));let t,r;e?(t=Math.max(this.currentPointer.end.x,o.x),r=Math.min(this.currentPointer.end.x,o.x),Math.max(this.currentPointer.end.y,o.y),Math.min(this.currentPointer.end.y,o.y)):(t=Math.max(this.currentPointer.end.x,this.currentPointer.start.x),r=Math.min(this.currentPointer.end.x,this.currentPointer.start.x),Math.max(this.currentPointer.end.y,this.currentPointer.start.y),Math.min(this.currentPointer.end.y,this.currentPointer.start.y)),this.$nextTick(()=>{switch(!0){case this.activeShape==="arrow":this.shapes.at(-1).endX=this.currentPointer.end.x,this.shapes.at(-1).endY=this.currentPointer.end.y;break;case this.activeShape==="circle":const d=20;this.shapes.at(-1).circleRadius=this.isDrawingNewShape?this.copy(t-r)+d:l+d;break;case this.activeShape==="line":this.shapes.at(-1).path+=` ${this.pointerPosition.x} ${this.pointerPosition.y} `;break;case["rect","group"].includes(this.activeShape):const c=20;this.shapes.at(-1).rectWidth=this.copy(this.currentPointer.end.x-this.shapes.at(-1).x)>0?this.copy(this.currentPointer.end.x-this.shapes.at(-1).x):c,this.shapes.at(-1).rectHeight=this.copy(this.currentPointer.end.y-this.shapes.at(-1).y)>0?this.copy(this.currentPointer.end.y-this.shapes.at(-1).y):c}})},drawDown(){if(this.isDrawing=!0,!this.activeShape&&!this.isSelectMode||!this.isDrawing)return;this.isDrawingNewShape=!0,this.currentPointer.start={x:this.pointerPosition.x,y:this.pointerPosition.y};let e=`${this.isSelectMode?"group":this.activeShape}_${Math.random()*1e4}_${Date.now()}`;switch(!0){case this.activeShape==="arrow":this.shapes.push({id:e,x:this.pointerPosition.x,y:this.pointerPosition.y,endX:this.pointerPosition.x,endY:this.pointerPosition.y,type:this.activeShape,color:this.copy(this.selectedColor),strokeWidth:this.copy(Math.abs(this.strokeSize)),isDash:this.copy(this.isDash)}),this.lastSelectedShape=this.shapes.at(-1);break;case this.activeShape==="circle":this.shapes.push({alpha:this.options.circle.filled?this.colorTransparency:"",id:e,color:this.copy(this.selectedColor),isFilled:this.copy(this.options.circle.filled),circleRadius:this.copy(this.options.circle.radius),circleStrokeWidth:this.copy(this.options.circle.strokeWidth),type:this.activeShape,x:this.pointerPosition.x,y:this.pointerPosition.y,strokeWidth:this.copy(Math.abs(this.strokeSize)),isDash:this.copy(this.isDash)}),this.lastSelectedShape=this.shapes.at(-1);break;case this.activeShape==="line":this.shapes.push({alpha:this.copy(this.colorTransparency),id:e,x:this.pointerPosition.x,y:this.pointerPosition.y,type:this.activeShape,color:this.copy(this.selectedColor),strokeWidth:this.copy(Math.abs(this.strokeSize)),isDash:this.copy(this.isDash),path:`${this.pointerPosition.x} ${this.pointerPosition.y}`}),this.lastSelectedShape=this.shapes.at(-1);break;case this.activeShape==="rect":this.shapes.push({alpha:this.options.rect.filled?this.colorTransparency:"",id:e,color:this.copy(this.selectedColor),isFilled:this.copy(this.options.rect.filled),rectStrokeWidth:this.copy(this.options.rect.strokeWidth),rectHeight:this.copy(this.options.rect.height),rectWidth:this.copy(this.options.rect.width),type:this.activeShape,x:this.pointerPosition.x,y:this.pointerPosition.y,strokeWidth:this.copy(Math.abs(this.strokeSize)),isDash:this.copy(this.isDash)}),this.lastSelectedShape=this.shapes.at(-1);break;case this.activeShape==="group":this.shapes.push({alpha:1,id:`group_${Math.random()*1e4}_${Date.now()}`,x:this.pointerPosition.x,y:this.pointerPosition.y,isFilled:!1,rectHeight:this.copy(this.options.rect.height),rectWidth:this.copy(this.options.rect.width),rectStrokeWidth:1,type:"group",color:"grey",strokeWidth:1,isDash:!0,content:""});break}if((this.pointerDownId!==-1||!this.isDrawing)&&(clearInterval(this.pointerDownId),this.pointerDownId=-1),this.pointerDownId===-1&&this.isDrawing){this.pointerDownId=setInterval(this.drawUp,1);return}},move(e){if(!(!e||!e.id||e.type==="line"))switch(this.lastSelectedShape=e,!0){case e.type==="arrow":e.x=this.copy(this.pointerPosition.x),e.y=this.copy(this.pointerPosition.y);break;case e.type==="circle":e.x=this.copy(this.pointerPosition.x),e.y=this.copy(this.pointerPosition.y);break;case e.type==="group":this.moveGroup(e);break;case e.type==="rect":e.x=this.copy(this.pointerPosition.x-e.rectWidth/2),e.y=this.copy(this.pointerPosition.y-e.rectHeight/2);break;case e.type==="text":const o=Array.from(document.getElementsByTagName("text")).find(r=>r.id===e.id);if(!o)return;const{x:s,y:n,width:l,height:t}=o.getBBox();e.textAlign==="start"&&(e.x=this.copy(this.pointerPosition.x-l/2)),e.textAlign==="middle"&&(e.x=this.copy(this.pointerPosition.x)),e.textAlign==="end"&&(e.x=this.copy(this.pointerPosition.x+l/2)),e.lines>1?e.y=this.copy(this.pointerPosition.y-t/3):e.y=this.copy(this.pointerPosition.y+e.fontSize/2);break}},moveDown(){if(!this.currentTarget||!this.currentTarget.id)return;const e=this.currentTarget.id,o=this.shapes.find(s=>s.id===e);this.shapes=this.shapes.filter(s=>s.id!==e),this.shapes.push(o),this.pointerDownId===-1&&e&&this.move(o)},print(){this.isPrinting=!0,this.isDeleteMode=!1,this.isMoveMode=!1,this.isResizeMode=!1,this.isTextMode=!1,this.isWriting=!1,this.isSelectMode=!1,this.activeShape=void 0,this.showCaret=!1,this.$nextTick(async()=>{const e=this.$refs.drawSvgContainer;this.walkTheDOM(e,o=>{o&&o.nodeType===1&&(o.setAttribute("font-family","Helvetica"),o.style.fontFamily="Helvetica")});try{let o;try{o=(await import("jspdf")).default}catch{throw new Error("jspdf is not installed. Run npm install jspdf")}const s=await g.domToPng({container:e,scale:2}),n=new Image;n.src=s,n.onload=()=>{const l={width:595.28,height:841.89},t=n.width,r=n.height,d=t/l.width*l.height,c=l.width,y=c/t*r,a=new o("","pt","a4");let N=0,h=r;if(h<d)a.addImage(s,"PNG",0,0,c,y,"","FAST");else for(;h>0;)a.addImage(s,"PNG",0,N,c,y,"","FAST"),h-=d,N-=l.height,h>0&&a.addPage();a.save(`${new Date().toLocaleDateString()}_annotations.pdf`)}}catch(o){console.error("Error generating image:",o)}finally{this.isPrinting=!1,this.walkTheDOM(e,o=>{o&&o.nodeType===1&&(o.setAttribute("font-family",this.FINAL_CONFIG.style.fontFamily),o.style.fontFamily=this.FINAL_CONFIG.style.fontFamily)})}})},resetDraw(){this.isDrawing=!1,this.isMouseDown=!1,this.pointerDownId=-1,this.isSelectMode&&this.groupShapes(),clearInterval(this.pointerDownId)},resize(){this.isDrawingNewShape=!1;const e=this.currentTarget.id;if(!e)return;this.isDrawing=!0;const o=this.shapes.find(s=>s.id===e);this.activeShape=o.type,this.shapes=this.shapes.filter(s=>s.id!==e),this.shapes.push(o),this.drawUp(!0)},setFillOfSelectedRect(){!this.lastSelectedShape||!this.lastSelectedShape.id.includes("rect")||(this.lastSelectedShape.isFilled=!this.lastSelectedShape.isFilled)},setFillOfSelectedCircle(){!this.lastSelectedShape||!this.lastSelectedShape.id.includes("circle")||(this.lastSelectedShape.isFilled=!this.lastSelectedShape.isFilled)},setColorOfSelectedShape(){this.lastSelectedShape&&(this.lastSelectedShape.color=this.copy(this.selectedColor),!["arrow","text"].includes(this.lastSelectedShape.id)&&(this.lastSelectedShape.alpha=this.copy(this.colorTransparency)))},setSelectedShapeToDash(){!this.lastSelectedShape||this.lastSelectedShape.type==="text"||(this.lastSelectedShape.isDash=this.copy(this.isDash))},setTransparencyOfSelectedShape(){!this.lastSelectedShape||["arrow","text"].includes(this.lastSelectedShape.id)||(this.lastSelectedShape.alpha=this.copy(this.colorTransparency))},setStrokeWidthOfSelectedShape(){!this.lastSelectedShape||!["arrow","circle","rect","line"].includes(this.lastSelectedShape.type)||(this.lastSelectedShape.strokeWidth=this.copy(Math.abs(this.strokeSize)))},setCurrentStyleOfSelectedText(){!this.lastSelectedShape||this.lastSelectedShape.type!=="text"||(this.lastSelectedShape.isBold=this.copy(this.isBold),this.lastSelectedShape.isItalic=this.copy(this.isItalic),this.lastSelectedShape.isUnderline=this.copy(this.isUnderline),this.lastSelectedShape.fontSize=this.copy(this.textFont),this.lastSelectedShape.isBulletTextMode=this.copy(this.isBulletTextMode))},setPointer(e){e.preventDefault();const s=this.$refs.mainSvg.getBoundingClientRect();let n,l;e.touches&&e.touches.length>0?(n=e.touches[0].clientX,l=e.touches[0].clientY):(n=e.clientX,l=e.clientY),this.pointerPosition.x=(n-s.left)/s.width*this.svgWidth,this.pointerPosition.y=(l-s.top)/s.height*this.svgHeight},setShapeTo(e){if(this.showCaret=!1,this.deleteEmptyTextElement(),e===this.activeShape){this.activeShape=void 0,this.isDrawMode=!1;return}this.isDrawMode=!0,this.isDeleteMode=!1,this.isMoveMode=!1,this.isResizeMode=!1,this.isTextMode=!1,this.activeShape=e},toggleSummary(){this.isSummaryOpen=!this.isSummaryOpen,this.isSummaryOpen||(this.isMoveMode=!1,this.isResizeMode=!1,this.isTextMode=!1,this.isWriting=!1,this.activeShape=void 0,this.showCaret=!1,this.isDeleteMode=!1,this.isWriting=!1),this.$emit("toggleOpenState",{isOpen:this.isSummaryOpen})},walkTheDOM(e,o){for(o(e),e=e.firstChild;e;)this.walkTheDOM(e,o),e=e.nextSibling},save(){this.$emit("saveAnnotations",{shapes:this.shapes,lastSelectedShape:this.lastSelectedShape})}}},v={class:"vue-ui-annotator"},w={"data-dom-to-png-ignore":""},A={class:"tool-selection",style:{"margin-top":"24px"}},M=["disabled"],O=["disabled"],L=["disabled"],G=["disabled"],_={style:{width:"80%"},viewBox:"0 0 24 24"},z=["disabled"],T={style:{width:"80%"},viewBox:"0 0 24 24"},B=["disabled"],D={style:{width:"80%"},viewBox:"0 0 24 24"},V=["disabled"],E=["disabled"],R={class:"tool-selection",style:{"margin-top":"6px"}},H={viewBox:"0 0 12 12",style:{width:"100%"}},W=["fill"],P={key:0,class:"tool-input"},X={for:"circleFill"},U=["checked"],Y={viewBox:"0 0 12 12",style:{width:"100%"}},j=["fill"],q={key:1,class:"tool-input"},J={for:"rectFill"},Z=["checked"],K={viewBox:"0 0 24 24",style:{width:"100%"}},Q=["stroke"],$={key:2},ee={style:{display:"flex","flex-direction":"column","align-items":"center","justify-content":"center"}},te={for:"textFont",style:{"font-size":"0.7em"}},oe={key:3},ie={style:{display:"flex","flex-direction":"column","align-items":"center","justify-content":"center"}},le={for:"dashStyle",style:{"font-size":"0.7em"}},se={viewBox:"0 0 24 24",height:"24",width:"24",style:{"margin-bottom":"-5px","margin-top":"-10px"}},re=["checked"],ne={style:{width:"80%"},viewBox:"0 0 24 24",fill:"currentColor"},de={key:4},ce={style:{display:"flex","flex-direction":"column","align-items":"center","justify-content":"center"}},ae={for:"textFont",style:{"font-size":"0.7em"}},he={key:5},ue={key:6},ye=["disabled"],Ne={key:7},be=["disabled"],Ie={key:8},Fe={key:9},Ce={key:10},Se={key:11},xe={style:{display:"flex","flex-direction":"column","align-items":"center","justify-content":"center"},class:"tooltip"},fe={style:{display:"flex","flex-direction":"column","align-items":"start","justify-content":"center"}},ke={for:"colorTransparency",style:{"font-size":"0.7em"}},ge={class:"annotator annotator__wrapper",ref:"drawSvgContainer",style:{position:"relative"}},me=["viewBox","width","height"],pe=["id","innerHTML"],ve=["height","viewBox","width"],we=["cx","cy"];function Ae(e,o,s,n,l,t){return i.openBlock(),i.createElementBlock("div",v,[i.createElementVNode("div",w,[i.createElementVNode("details",{class:"vue-ui-annotator-summary",onToggle:o[36]||(o[36]=(...r)=>t.toggleSummary&&t.toggleSummary(...r)),style:i.normalizeStyle(`${l.isSummaryOpen?"padding-bottom: 12px":""}; background: ${t.FINAL_CONFIG.style.backgroundColor}; color:${t.FINAL_CONFIG.style.color}; ${t.FINAL_CONFIG.style.fixedTools&&l.isSummaryOpen?"position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 1;":""}`)},[i.createElementVNode("summary",null,i.toDisplayString(t.FINAL_CONFIG.translations.title),1),i.createElementVNode("div",A,[i.createElementVNode("button",{disabled:l.shapes.length===0,style:i.normalizeStyle({background:l.isMoveMode?t.FINAL_CONFIG.style.buttons.controls.selected.backgroundColor:t.FINAL_CONFIG.style.buttons.controls.backgroundColor,border:l.isMoveMode?t.FINAL_CONFIG.style.buttons.controls.selected.border:t.FINAL_CONFIG.style.buttons.controls.border,color:l.isMoveMode?t.FINAL_CONFIG.style.buttons.controls.selected.color:t.FINAL_CONFIG.style.buttons.controls.color,borderRadius:`${t.FINAL_CONFIG.style.buttons.borderRadius}px`}),class:i.normalizeClass({"button-tool":!0,"button-tool--selected":l.isMoveMode,tooltip:!0}),onClick:o[0]||(o[0]=r=>{t.deleteEmptyTextElement(),l.isMoveMode=!l.isMoveMode,l.activeShape=void 0,l.isDeleteMode=!1,l.isDrawMode=!1,l.isResizeMode=!1,l.isSelectMode=!1,l.isTextMode=!1,l.isWriting=!1,l.showCaret=!1})},[o[46]||(o[46]=i.createStaticVNode('<svg xmlns="http://www.w3.org/2000/svg" width="80%" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" data-v-633bc577><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-633bc577></path><path d="M18 9l3 3l-3 3" data-v-633bc577></path><path d="M15 12h6" data-v-633bc577></path><path d="M6 9l-3 3l3 3" data-v-633bc577></path><path d="M3 12h6" data-v-633bc577></path><path d="M9 18l3 3l3 -3" data-v-633bc577></path><path d="M12 15v6" data-v-633bc577></path><path d="M15 6l-3 -3l-3 3" data-v-633bc577></path><path d="M12 3v6" data-v-633bc577></path></svg>',1)),t.FINAL_CONFIG.style.showTooltips?(i.openBlock(),i.createElementBlock("span",{key:0,class:"tooltiptext",style:i.normalizeStyle({backgroundColor:t.FINAL_CONFIG.style.tooltips.backgroundColor,color:t.FINAL_CONFIG.style.tooltips.color,border:t.FINAL_CONFIG.style.tooltips.border,borderRadius:`${t.FINAL_CONFIG.style.tooltips.borderRadius}px`,boxShadow:t.FINAL_CONFIG.style.tooltips.boxShadow})},i.toDisplayString(t.FINAL_CONFIG.translations.tooltipMove),5)):i.createCommentVNode("",!0)],14,M),i.createElementVNode("button",{disabled:l.shapes.length===0||l.activeShape==="line",style:i.normalizeStyle({background:l.isResizeMode?t.FINAL_CONFIG.style.buttons.controls.selected.backgroundColor:t.FINAL_CONFIG.style.buttons.controls.backgroundColor,border:l.isResizeMode?t.FINAL_CONFIG.style.buttons.controls.selected.border:t.FINAL_CONFIG.style.buttons.controls.border,color:l.isResizeMode?t.FINAL_CONFIG.style.buttons.controls.selected.color:t.FINAL_CONFIG.style.buttons.controls.color,borderRadius:`${t.FINAL_CONFIG.style.buttons.borderRadius}px`}),class:i.normalizeClass({"button-tool":!0,"button-tool--selected":l.isResizeMode,tooltip:!0}),onClick:o[1]||(o[1]=r=>{t.deleteEmptyTextElement(),l.isResizeMode=!l.isResizeMode,l.isMoveMode=!1,l.isDeleteMode=!1,l.isDrawMode=!1,l.isSelectMode=!1,l.isTextMode=!1,l.isWriting=!1,l.activeShape=void 0,l.showCaret=!1})},[o[47]||(o[47]=i.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"80%",viewBox:"0 0 24 24","stroke-width":"2",stroke:"currentColor",fill:"none","stroke-linecap":"round","stroke-linejoin":"round"},[i.createElementVNode("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),i.createElementVNode("path",{d:"M4 11v8a1 1 0 0 0 1 1h8m-9 -14v-1a1 1 0 0 1 1 -1h1m5 0h2m5 0h1a1 1 0 0 1 1 1v1m0 5v2m0 5v1a1 1 0 0 1 -1 1h-1"}),i.createElementVNode("path",{d:"M4 12h7a1 1 0 0 1 1 1v7"})],-1)),t.FINAL_CONFIG.style.showTooltips?(i.openBlock(),i.createElementBlock("span",{key:0,class:"tooltiptext",style:i.normalizeStyle({backgroundColor:t.FINAL_CONFIG.style.tooltips.backgroundColor,color:t.FINAL_CONFIG.style.tooltips.color,border:t.FINAL_CONFIG.style.tooltips.border,borderRadius:`${t.FINAL_CONFIG.style.tooltips.borderRadius}px`,boxShadow:t.FINAL_CONFIG.style.tooltips.boxShadow})},i.toDisplayString(t.FINAL_CONFIG.translations.tooltipResize),5)):i.createCommentVNode("",!0)],14,O),i.createElementVNode("button",{disabled:l.shapes.length===0,style:i.normalizeStyle({background:l.isDeleteMode?t.FINAL_CONFIG.style.buttons.controls.selected.backgroundColor:t.FINAL_CONFIG.style.buttons.controls.backgroundColor,border:l.isDeleteMode?t.FINAL_CONFIG.style.buttons.controls.selected.border:t.FINAL_CONFIG.style.buttons.controls.border,color:l.isDeleteMode?t.FINAL_CONFIG.style.buttons.controls.selected.color:t.FINAL_CONFIG.style.buttons.controls.color,borderRadius:`${t.FINAL_CONFIG.style.buttons.borderRadius}px`}),class:i.normalizeClass({"button-tool":!0,"button-tool--selected":l.isDeleteMode,tooltip:!0}),onClick:o[2]||(o[2]=r=>{t.deleteEmptyTextElement(),l.isDeleteMode=!l.isDeleteMode,l.isMoveMode=!1,l.isResizeMode=!1,l.isSelectMode=!1,l.isTextMode=!1,l.isWriting=!1,l.activeShape=void 0,l.showCaret=!1})},[o[48]||(o[48]=i.createStaticVNode('<svg width="80%" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" data-v-633bc577><path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-633bc577></path><path d="M4 7l16 0" data-v-633bc577></path><path d="M10 11l0 6" data-v-633bc577></path><path d="M14 11l0 6" data-v-633bc577></path><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" data-v-633bc577></path><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" data-v-633bc577></path></svg>',1)),t.FINAL_CONFIG.style.showTooltips?(i.openBlock(),i.createElementBlock("span",{key:0,class:"tooltiptext",style:i.normalizeStyle({backgroundColor:t.FINAL_CONFIG.style.tooltips.backgroundColor,color:t.FINAL_CONFIG.style.tooltips.color,border:t.FINAL_CONFIG.style.tooltips.border,borderRadius:`${t.FINAL_CONFIG.style.tooltips.borderRadius}px`,boxShadow:t.FINAL_CONFIG.style.tooltips.boxShadow})},i.toDisplayString(t.FINAL_CONFIG.translations.tooltipDelete),5)):i.createCommentVNode("",!0)],14,L),i.createElementVNode("button",{disabled:!t.canSelect,style:i.normalizeStyle({background:l.isSelectMode?t.FINAL_CONFIG.style.buttons.controls.selected.backgroundColor:t.FINAL_CONFIG.style.buttons.controls.backgroundColor,border:l.isSelectMode?t.FINAL_CONFIG.style.buttons.controls.selected.border:t.FINAL_CONFIG.style.buttons.controls.border,color:l.isSelectMode?t.FINAL_CONFIG.style.buttons.controls.selected.color:t.FINAL_CONFIG.style.buttons.controls.color,borderRadius:`${t.FINAL_CONFIG.style.buttons.borderRadius}px`}),class:i.normalizeClass({"button-tool":!0,"button-tool--selected":l.isSelectMode,tooltip:!0}),onClick:o[3]||(o[3]=r=>{t.deleteEmptyTextElement(),t.setShapeTo("group"),l.isSelectMode=!l.isSelectMode,l.isDeleteMode=!1,l.isMoveMode=!1,l.isResizeMode=!1,l.isTextMode=!1,l.isWriting=!1,l.activeShape="group",l.showCaret=!1})},[(i.openBlock(),i.createElementBlock("svg",_,o[49]||(o[49]=[i.createElementVNode("path",{fill:"currentColor",d:"M1,1V5H2V19H1V23H5V22H19V23H23V19H22V5H23V1H19V2H5V1M5,4H19V5H20V19H19V20H5V19H4V5H5M6,6V14H9V18H18V9H14V6M8,8H12V12H8M14,11H16V16H11V14H14"},null,-1)]))),t.FINAL_CONFIG.style.showTooltips?(i.openBlock(),i.createElementBlock("span",{key:0,class:"tooltiptext",style:i.normalizeStyle({backgroundColor:t.FINAL_CONFIG.style.tooltips.backgroundColor,color:t.FINAL_CONFIG.style.tooltips.color,border:t.FINAL_CONFIG.style.tooltips.border,borderRadius:`${t.FINAL_CONFIG.style.tooltips.borderRadius}px`,boxShadow:t.FINAL_CONFIG.style.tooltips.boxShadow})},i.toDisplayString(t.FINAL_CONFIG.translations.tooltipGroup),5)):i.createCommentVNode("",!0)],14,G),i.createElementVNode("button",{disa