xiaodao-painter 0.1.6

package/dist/xiaodao-painter.umd.js

@@ -0,0 +1 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue"),require("pinia")):typeof define==`function`&&define.amd?define([`exports`,`vue`,`pinia`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.XiaodaoPainter={},e.Vue,e.Pinia))})(this,function(e,t,n){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var r={"zh-CN":{"tool.select":`选择`,"tool.pencil":`铅笔`,"tool.line":`直线`,"tool.circle":`圆形`,"tool.rect":`矩形`,"tool.triangle":`三角形`,"tool.star":`五角星`,"tool.pan":`移动画布`,"tool.zoom":`缩放`,"tool.text":`文本框`,"color.foreground":`前景色（描边）`,"color.background":`背景色（填充）`,"color.textColor":`文本颜色`,"palette.stroke":`描边颜色`,"palette.fill":`填充颜色`,"palette.custom":`自定义颜色`,"toolbar.undo":`撤销`,"toolbar.redo":`重做`,"toolbar.bringToFront":`上移图层`,"toolbar.sendToBack":`下移图层`,"toolbar.delete":`删除`,"zoom.label":`缩放：{percent}%`,"zoom.zoomIn":`放大`,"zoom.zoomOut":`缩小`,"canvasSize.title":`画布设置`,"canvasSize.width":`宽度`,"canvasSize.height":`高度`,"canvasSize.confirm":`确定`,"canvasSize.cancel":`取消`,"canvasSize.background":`背景`,"canvasSize.transparent":`透明`,"canvasSize.solidColor":`纯色`,"textAlign.left":`左对齐`,"textAlign.center":`居中`,"textAlign.right":`右对齐`},"en-US":{"tool.select":`Select`,"tool.pencil":`Pencil`,"tool.line":`Line`,"tool.circle":`Circle`,"tool.rect":`Rectangle`,"tool.triangle":`Triangle`,"tool.star":`Star`,"tool.pan":`Pan Canvas`,"tool.zoom":`Zoom`,"tool.text":`Text`,"color.foreground":`Stroke Color`,"color.background":`Fill Color`,"color.textColor":`Text Color`,"palette.stroke":`Stroke Color`,"palette.fill":`Fill Color`,"palette.custom":`Custom Color`,"toolbar.undo":`Undo`,"toolbar.redo":`Redo`,"toolbar.bringToFront":`Bring to Front`,"toolbar.sendToBack":`Send to Back`,"toolbar.delete":`Delete`,"zoom.label":`Zoom: {percent}%`,"zoom.zoomIn":`Zoom In`,"zoom.zoomOut":`Zoom Out`,"canvasSize.title":`Canvas Settings`,"canvasSize.width":`Width`,"canvasSize.height":`Height`,"canvasSize.confirm":`OK`,"canvasSize.cancel":`Cancel`,"canvasSize.background":`Background`,"canvasSize.transparent":`Transparent`,"canvasSize.solidColor":`Solid Color`,"textAlign.left":`Align Left`,"textAlign.center":`Align Center`,"textAlign.right":`Align Right`}};function i(e,t){return r[e]?.[t]??t}var a=Symbol(`wb-locale`);function o(e){(0,t.provide)(a,e)}function s(){let e=(0,t.inject)(a,`zh-CN`);return{locale:e,t:t=>i(e,t)}}var c=Symbol(`wb-root-el`);function l(e){(0,t.provide)(c,e)}function u(){return(0,t.inject)(c,null)}var d=800,f=600,p=3,m=16,h=8,g=(0,n.defineStore)(`canvas`,()=>{let e=(0,t.ref)([]),n=(0,t.ref)(new Set),r=(0,t.ref)(`#000000`),i=(0,t.ref)(`transparent`),a=(0,t.ref)(`foreground`),o=(0,t.ref)(!1),s=(0,t.ref)(3),c=(0,t.ref)(`transparent`),l=(0,t.ref)(`light`),u=(0,t.ref)(0),d=(0,t.ref)(`#000000`),f=(0,t.ref)(null),p=(0,t.ref)(null),m=(0,t.ref)(800),h=(0,t.ref)(600),g=(0,t.ref)(0),_=(0,t.ref)(0),v=(0,t.ref)(1),y=(0,t.ref)(!1),b=null,x=(0,t.computed)(()=>`0 0 ${m.value} ${h.value}`),S=(0,t.computed)(()=>`translate(${g.value}px, ${_.value}px) scale(${v.value})`);function C(e,t){g.value=e,_.value=t}function w(e,t){m.value=e,h.value=t,u.value++}let T=[.1,.25,.33,.5,.67,.75,1,1.25,1.5,2,3,4,5,6,8,10];function ee(e,t,n){let r=v.value,i=n>1,a=null;for(let e of T)if(i){if(e>r+.001){a=e;break}}else e<r-.001&&(a=e);if(a===null)return;let o=(e-g.value)/r,s=(t-_.value)/r;g.value=e-o*a,_.value=t-s*a,v.value=a,y.value=!0,b&&clearTimeout(b),b=setTimeout(()=>{y.value=!1},1500)}function te(e,t,n){let r=T[0],i=T[T.length-1];n=Math.max(r,Math.min(i,n));let a=v.value,o=(e-g.value)/a,s=(t-_.value)/a;g.value=e-o*n,_.value=t-s*n,v.value=n,y.value=!0,b&&clearTimeout(b),b=setTimeout(()=>{y.value=!1},1500)}function E(){return Math.round(v.value*100)}let D=(0,t.ref)([]),O=(0,t.ref)([]),k=(0,t.ref)(!1),A=(0,t.ref)(null);function ne(e){s.value=e}function re(e){c.value=e,u.value++}function j(){o.value=!o.value}function ie(){o.value=!1}let M=(0,t.computed)(()=>e.value.filter(e=>n.value.has(e.id))),N=(0,t.computed)(()=>{let e=M.value.filter(e=>e.type!==`text`);if(e.length===0)return null;let t=e[0].strokeColor;return e.every(e=>e.strokeColor===t)?t:null}),ae=(0,t.computed)(()=>{let e=M.value.filter(e=>e.type!==`line`&&e.type!==`pencil`&&e.type!==`text`);if(e.length===0)return null;let t=e[0].fillColor;return e.every(e=>e.fillColor===t)?t:null}),P=(0,t.computed)(()=>{let e=M.value.filter(e=>e.type===`text`);if(e.length===0)return null;let t=e[0].textColor??r.value;return e.every(e=>(e.textColor??r.value)===t)?t:null}),F=(0,t.computed)(()=>{let e=M.value;return e.length===1?e[0]:null}),I=(0,t.computed)(()=>F.value?.id??null);function L(e){return n.value.has(e)}function oe(e){n.value=e?new Set([e]):new Set}function se(e){n.value=new Set(e)}function R(){n.value=new Set}function ce(t){G(),e.value.push(t)}function z(t,n){let r=e.value.findIndex(e=>e.id===t);if(r===-1)return;let i={...n};i.x!==void 0&&(i.x=Math.round(i.x)),i.y!==void 0&&(i.y=Math.round(i.y)),i.width!==void 0&&(i.width=Math.round(i.width)),i.height!==void 0&&(i.height=Math.round(i.height)),i.points&&=i.points.map(e=>({x:Math.round(e.x),y:Math.round(e.y)})),e.value[r]={...e.value[r],...i}}function B(){let t=n.value;t.size!==0&&(G(),e.value=e.value.filter(e=>!t.has(e.id)),n.value=new Set)}let V=(0,t.computed)(()=>D.value.length>0),H=(0,t.computed)(()=>O.value.length>0),U=(0,t.ref)([]);function le(){n.value.size!==0&&(U.value=M.value.map(e=>W(e)),B())}function ue(){n.value.size!==0&&(U.value=M.value.map(e=>W(e)))}function de(){if(U.value.length===0)return;G(),R();let t=[];for(let n of U.value){let r={...W(n),id:Q(),x:n.x+20,y:n.y+20,points:n.points.map(e=>({x:e.x+20,y:e.y+20}))};e.value.push(r),t.push(r.id)}se(t)}function W(e){return{...e,points:e.points.map(e=>({...e}))}}function G(){D.value.push(e.value.map(e=>({...e,points:e.points.map(e=>({...e}))}))),O.value=[]}function K(){D.value.length!==0&&(O.value.push(e.value.map(e=>({...e,points:e.points.map(e=>({...e}))}))),e.value=D.value.pop(),n.value=new Set)}function q(){O.value.length!==0&&(D.value.push(e.value.map(e=>({...e,points:e.points.map(e=>({...e}))}))),e.value=O.value.pop(),n.value=new Set)}function J(){let t=n.value;if(t.size===0)return;G();let r=e.value.map((e,n)=>t.has(e.id)?n:-1).filter(e=>e>=0).sort((e,t)=>t-e);for(let t of r)t<e.value.length-1&&([e.value[t],e.value[t+1]]=[e.value[t+1],e.value[t]])}function Y(){let t=n.value;if(t.size===0)return;G();let r=e.value.map((e,n)=>t.has(e.id)?n:-1).filter(e=>e>=0).sort((e,t)=>e-t);for(let t of r)t>0&&([e.value[t],e.value[t-1]]=[e.value[t-1],e.value[t]])}let X=!1;function fe(t){if(X)return;X=!0,e.value=Array.isArray(t)?t.map(e=>({...e,points:e.points.map(e=>({...e}))})):[];let r=new Set(e.value.map(e=>e.id));n.value=new Set([...n.value].filter(e=>r.has(e))),setTimeout(()=>{X=!1},0)}function Z(e){let{x:t,y:n,width:r,height:i,type:a}=e;return a===`line`||a===`triangle`||a===`star`?{x:r>=0?t:t+r,y:i>=0?n:n+i,width:Math.abs(r),height:Math.abs(i)}:{x:t,y:n,width:r,height:i}}function pe(e){a.value=e}function me(t){if(n.value.size>0){G();for(let r of n.value){let n=e.value.find(e=>e.id===r);if(a.value===`foreground`){if(t===`transparent`||n?.type===`text`)continue;z(r,{strokeColor:t})}else if(a.value===`textColor`){if(t===`transparent`)return;z(r,{textColor:t})}else{if(n?.type===`text`)continue;z(r,{fillColor:t})}}u.value++}else if(a.value===`foreground`){if(t===`transparent`)return;r.value=t}else if(a.value===`textColor`){if(t===`transparent`)return;d.value=t}else i.value=t}function Q(){return crypto.randomUUID()}function he(e,t,n,a,o,c){return{id:Q(),type:e,x:Math.round(t),y:Math.round(n),width:Math.round(a),height:Math.round(o),points:c.map(e=>({x:Math.round(e.x),y:Math.round(e.y)})),strokeColor:r.value,fillColor:e===`pencil`||e===`line`?`none`:i.value,strokeWidth:s.value,...e===`text`?{text:``,fontSize:16,textAlign:`left`,textColor:r.value,textAutoWidth:!0,fillColor:`transparent`,strokeColor:`transparent`,width:0,height:0}:{}}}function ge(){e.value=[],n.value=new Set,r.value=`#000000`,i.value=`transparent`,a.value=`foreground`,o.value=!1,s.value=3,c.value=`transparent`,l.value=`light`,u.value=0,d.value=`#000000`,f.value=null,p.value=null,m.value=800,h.value=600,g.value=0,_.value=0,v.value=1,y.value=!1,b&&=(clearTimeout(b),null),D.value=[],O.value=[],k.value=!1,A.value=null,U.value=[]}return{strokes:e,selectedStrokeIds:n,selectedStrokeId:I,selectedStroke:F,selectedStrokes:M,selectedStrokeColor:N,selectedFillColor:ae,selectedTextColor:P,foregroundColor:r,backgroundColor:i,activeColorSlot:a,showColorPalette:o,isSelecting:k,selectionBox:A,toggleColorPalette:j,hideColorPalette:ie,addStroke:ce,updateStroke:z,selectStroke:oe,selectStrokes:se,clearSelection:R,isSelected:L,deleteSelectedStrokes:B,setColorSlot:pe,setColor:me,buildStroke:he,strokeWidth:s,setStrokeWidth:ne,canvasBackgroundColor:c,setCanvasBackgroundColor:re,canUndo:V,canRedo:H,undoStack:D,pushUndo:G,undo:K,redo:q,moveSelectedUp:J,moveSelectedDown:Y,syncFromParent:fe,getStrokeDisplayBounds:Z,clipboard:U,cutSelectedStrokes:le,copySelectedStrokes:ue,pasteStrokes:de,canvasWidth:m,canvasHeight:h,panX:g,panY:_,zoomLevel:v,showZoomIndicator:y,viewBox:x,canvasTransform:S,setPan:C,setCanvasSize:w,zoomAt:ee,continuousZoomAt:te,getZoomPercent:E,dataVersion:u,theme:l,textColor:d,editingTextId:f,hoveredTextId:p,reset:ge}}),_=(0,n.defineStore)(`tools`,()=>{let e=(0,t.ref)(`select`);function n(t){if(e.value===`select`&&t!==`select`){let e=g();e.selectedStrokeIds.size>0&&e.clearSelection()}e.value=t}function r(){e.value=`select`}return{activeTool:e,setTool:n,reset:r}}),v={class:`toolbar`},y=[`disabled`],b={class:`tool-group`},x=[`title`,`onClick`],S={key:0,class:`tool-icon`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`1.6`,"stroke-linecap":`round`,"stroke-linejoin":`round`},C={key:1,class:`tool-icon`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`1.8`,"stroke-linecap":`round`},w={key:2,class:`tool-icon`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`1.8`,"stroke-linecap":`round`,"stroke-linejoin":`round`},T={key:3,class:`tool-icon`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`1.8`,"stroke-linecap":`round`},ee={key:4,class:`tool-icon`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`1.8`},te={key:5,class:`tool-icon`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`1.8`,"stroke-linejoin":`round`},E={key:6,class:`tool-icon`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`1.8`,"stroke-linejoin":`round`},D={key:7,class:`tool-icon`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`1.8`,"stroke-linejoin":`round`},O={key:8,class:`tool-icon`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`1.8`,"stroke-linecap":`round`,"stroke-linejoin":`round`},k={class:`tool-group nav-group`},A=[`title`],ne=[`disabled`],re={class:`canvas-size-wrapper`},j=[`title`],ie={class:`popover-title`},M={class:`popover-field`},N={class:`popover-label`},ae={class:`popover-field`},P={class:`popover-label`},F={class:`popover-field`},I={class:`popover-label`},L={class:`bg-color-row`},oe=[`title`],se=[`value`],R=[`title`],ce={class:`popover-actions`},z={class:`color-section`},B=[`title`],V={class:`color-swatch text-color-swatch`},H={key:0,class:`mixed-icon`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`},U=[`title`],le={key:0,class:`mixed-icon`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`},ue=[`title`],de={key:0,class:`mixed-icon`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`},W={key:1,class:`mixed-icon`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`},G=42,K=(0,t.defineComponent)({__name:`Toolbar`,setup(e){let n=_(),r=g(),{t:i}=s(),a=u(),o=(0,t.ref)(null),c=(0,t.ref)(!1),l=(0,t.ref)(!1);function d(){let e=o.value;e&&(c.value=e.scrollTop>0,l.value=e.scrollTop+e.clientHeight<e.scrollHeight-1)}function f(){let e=o.value;e&&e.scrollBy({top:-42,behavior:`smooth`})}function p(){let e=o.value;e&&e.scrollBy({top:G,behavior:`smooth`})}let m=null;(0,t.onMounted)(()=>{m=new ResizeObserver(()=>d()),o.value&&m.observe(o.value),d()}),(0,t.onUnmounted)(()=>{m?.disconnect()});let h=[`select`,`pan`,`pencil`,`line`,`circle`,`rect`,`triangle`,`star`,`text`],K=(0,t.computed)(()=>r.selectedStrokeIds.size>0),q=(0,t.ref)(!1),J=(0,t.ref)({width:r.canvasWidth,height:r.canvasHeight}),Y=(0,t.ref)(r.canvasBackgroundColor);function X(){J.value={width:r.canvasWidth,height:r.canvasHeight},Y.value=r.canvasBackgroundColor,q.value=!0}let fe=(0,t.ref)(null);function Z(){fe.value?.click()}function pe(e){let t=e.target;Y.value=t.value}function me(){Y.value=`transparent`}function Q(){let e=Math.max(1,Math.round(J.value.width)),t=Math.max(1,Math.round(J.value.height));r.setCanvasSize(e,t),r.setCanvasBackgroundColor(Y.value),q.value=!1}function he(){q.value=!1}let ge=(0,t.computed)(()=>{if(!a?.value)return{};let e=a.value.getBoundingClientRect();return{left:e.left+52+12+`px`,bottom:window.innerHeight-e.bottom+80+`px`,position:`fixed`}});function _e(e){e.target.classList.contains(`canvas-size-backdrop`)&&(q.value=!1)}function ve(e){e.key===`Escape`&&(q.value=!1)}let ye=(0,t.computed)(()=>K.value&&r.selectedStrokeColor!==null?r.selectedStrokeColor:r.foregroundColor),be=(0,t.computed)(()=>!$.value&&K.value&&r.selectedStrokeColor===null),xe=(0,t.computed)(()=>K.value&&r.selectedFillColor!==null?r.selectedFillColor:r.backgroundColor),Se=(0,t.computed)(()=>!$.value&&K.value&&r.selectedFillColor===null),Ce=(0,t.computed)(()=>r.selectedStrokes.some(e=>e.type===`text`)),$=(0,t.computed)(()=>K.value&&r.selectedStrokes.every(e=>e.type===`text`)),we=(0,t.computed)(()=>$.value),Te=(0,t.computed)(()=>$.value),Ee=(0,t.computed)(()=>K.value&&r.selectedTextColor!==null?r.selectedTextColor:r.textColor),De=(0,t.computed)(()=>Ce.value&&r.selectedTextColor===null);function Oe(){r.setColorSlot(`textColor`),r.toggleColorPalette()}function ke(){we.value||(r.setColorSlot(`foreground`),r.toggleColorPalette())}function Ae(){Te.value||(r.setColorSlot(`background`),r.toggleColorPalette())}return(e,a)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,v,[c.value||l.value?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:0,class:`scroll-btn scroll-up`,disabled:!c.value,onClick:f},[...a[3]||=[(0,t.createElementVNode)(`svg`,{class:`scroll-icon`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`},[(0,t.createElementVNode)(`polyline`,{points:`18 15 12 9 6 15`})],-1)]],8,y)):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`div`,{ref_key:`toolsScrollRef`,ref:o,class:`tools-scroll`,onScroll:d},[(0,t.createElementVNode)(`div`,b,[((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(h,e=>(0,t.createElementVNode)(`button`,{key:e,class:(0,t.normalizeClass)([`tool-btn`,{active:(0,t.unref)(n).activeTool===e}]),title:(0,t.unref)(i)(`tool.${e}`),onClick:r=>(0,t.unref)(n).setTool(e)},[e===`select`?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,S,[...a[4]||=[(0,t.createElementVNode)(`path`,{d:`M4.5 3.5l5.5 15 2.5-6 6-2.5z`},null,-1)]])):e===`pan`?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,C,[...a[5]||=[(0,t.createStaticVNode)(`<line x1="12" y1="4" x2="12" y2="20" data-v-9532ade7></line><line x1="4" y1="12" x2="20" y2="12" data-v-9532ade7></line><polygon points="12,4 9,8 15,8" fill="currentColor" stroke="none" data-v-9532ade7></polygon><polygon points="12,20 9,16 15,16" fill="currentColor" stroke="none" data-v-9532ade7></polygon><polygon points="4,12 8,9 8,15" fill="currentColor" stroke="none" data-v-9532ade7></polygon><polygon points="20,12 16,9 16,15" fill="currentColor" stroke="none" data-v-9532ade7></polygon>`,6)]])):e===`pencil`?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,w,[...a[6]||=[(0,t.createElementVNode)(`path`,{d:`M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z`},null,-1),(0,t.createElementVNode)(`path`,{d:`m15 5 4 4`},null,-1)]])):e===`line`?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,T,[...a[7]||=[(0,t.createElementVNode)(`line`,{x1:`5`,y1:`19`,x2:`19`,y2:`5`},null,-1)]])):e===`circle`?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,ee,[...a[8]||=[(0,t.createElementVNode)(`circle`,{cx:`12`,cy:`12`,r:`9`},null,-1)]])):e===`rect`?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,te,[...a[9]||=[(0,t.createElementVNode)(`rect`,{x:`3`,y:`3`,width:`18`,height:`18`,rx:`2`},null,-1)]])):e===`triangle`?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,E,[...a[10]||=[(0,t.createElementVNode)(`polygon`,{points:`12,3 22,21 2,21`},null,-1)]])):e===`star`?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,D,[...a[11]||=[(0,t.createElementVNode)(`polygon`,{points:`12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26`},null,-1)]])):e===`text`?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,O,[...a[12]||=[(0,t.createElementVNode)(`polyline`,{points:`4 7 4 4 20 4 20 7`},null,-1),(0,t.createElementVNode)(`line`,{x1:`9`,y1:`20`,x2:`15`,y2:`20`},null,-1),(0,t.createElementVNode)(`line`,{x1:`12`,y1:`4`,x2:`12`,y2:`20`},null,-1)]])):(0,t.createCommentVNode)(``,!0)],10,x)),64))]),(0,t.createElementVNode)(`div`,k,[(0,t.createElementVNode)(`button`,{class:(0,t.normalizeClass)([`tool-btn`,{active:(0,t.unref)(n).activeTool===`zoom`}]),title:(0,t.unref)(i)(`tool.zoom`),onClick:a[0]||=e=>(0,t.unref)(n).setTool(`zoom`)},[...a[13]||=[(0,t.createStaticVNode)(`<svg class="tool-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" data-v-9532ade7><circle cx="11" cy="11" r="8" data-v-9532ade7></circle><line x1="21" y1="21" x2="16.65" y2="16.65" data-v-9532ade7></line><line x1="11" y1="8" x2="11" y2="14" data-v-9532ade7></line><line x1="8" y1="11" x2="14" y2="11" data-v-9532ade7></line></svg>`,1)]],10,A)])],544),c.value||l.value?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:1,class:`scroll-btn scroll-down`,disabled:!l.value,onClick:p},[...a[14]||=[(0,t.createElementVNode)(`svg`,{class:`scroll-icon`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`},[(0,t.createElementVNode)(`polyline`,{points:`6 9 12 15 18 9`})],-1)]],8,ne)):(0,t.createCommentVNode)(``,!0),a[24]||=(0,t.createElementVNode)(`div`,{class:`spacer`},null,-1),(0,t.createElementVNode)(`div`,re,[(0,t.createElementVNode)(`button`,{class:`tool-btn`,title:(0,t.unref)(i)(`canvasSize.title`),onClick:X},[...a[15]||=[(0,t.createElementVNode)(`svg`,{class:`tool-icon`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`1.8`,"stroke-linecap":`round`,"stroke-linejoin":`round`},[(0,t.createElementVNode)(`rect`,{x:`2`,y:`2`,width:`20`,height:`14`,rx:`1.5`}),(0,t.createElementVNode)(`line`,{x1:`7`,y1:`16`,x2:`5`,y2:`22`}),(0,t.createElementVNode)(`line`,{x1:`17`,y1:`16`,x2:`19`,y2:`22`})],-1)]],8,j),((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:`body`},[q.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:`canvas-size-backdrop`,onMousedown:_e},[(0,t.createElementVNode)(`div`,{class:`canvas-size-popover`,style:(0,t.normalizeStyle)(ge.value),onKeydown:ve},[(0,t.createElementVNode)(`div`,ie,(0,t.toDisplayString)((0,t.unref)(i)(`canvasSize.title`)),1),(0,t.createElementVNode)(`div`,M,[(0,t.createElementVNode)(`label`,N,(0,t.toDisplayString)((0,t.unref)(i)(`canvasSize.width`)),1),(0,t.withDirectives)((0,t.createElementVNode)(`input`,{ref:`widthInput`,"onUpdate:modelValue":a[1]||=e=>J.value.width=e,type:`number`,min:`1`,class:`popover-input`,onKeydown:(0,t.withKeys)(Q,[`enter`])},null,544),[[t.vModelText,J.value.width,void 0,{number:!0}]]),a[16]||=(0,t.createElementVNode)(`span`,{class:`popover-unit`},`px`,-1)]),(0,t.createElementVNode)(`div`,ae,[(0,t.createElementVNode)(`label`,P,(0,t.toDisplayString)((0,t.unref)(i)(`canvasSize.height`)),1),(0,t.withDirectives)((0,t.createElementVNode)(`input`,{"onUpdate:modelValue":a[2]||=e=>J.value.height=e,type:`number`,min:`1`,class:`popover-input`,onKeydown:(0,t.withKeys)(Q,[`enter`])},null,544),[[t.vModelText,J.value.height,void 0,{number:!0}]]),a[17]||=(0,t.createElementVNode)(`span`,{class:`popover-unit`},`px`,-1)]),(0,t.createElementVNode)(`div`,F,[(0,t.createElementVNode)(`label`,I,(0,t.toDisplayString)((0,t.unref)(i)(`canvasSize.background`)),1),(0,t.createElementVNode)(`div`,L,[(0,t.createElementVNode)(`button`,{class:(0,t.normalizeClass)([`bg-radio-btn`,{active:Y.value!==`transparent`}]),title:(0,t.unref)(i)(`canvasSize.solidColor`),onClick:Z},[(0,t.createElementVNode)(`span`,{class:`bg-color-fill`,style:(0,t.normalizeStyle)({background:Y.value===`transparent`?`#ffffff`:Y.value})},null,4),(0,t.createElementVNode)(`input`,{ref_key:`hiddenColorInput`,ref:fe,type:`color`,class:`hidden-color-input`,value:Y.value===`transparent`?`#ffffff`:Y.value,onChange:pe},null,40,se)],10,oe),(0,t.createElementVNode)(`button`,{class:(0,t.normalizeClass)([`bg-radio-btn`,`bg-radio-btn--transparent`,{active:Y.value===`transparent`}]),title:(0,t.unref)(i)(`canvasSize.transparent`),onClick:me},[...a[18]||=[(0,t.createElementVNode)(`svg`,{width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`},[(0,t.createElementVNode)(`line`,{x1:`5`,y1:`5`,x2:`19`,y2:`19`})],-1)]],10,R)])]),(0,t.createElementVNode)(`div`,ce,[(0,t.createElementVNode)(`button`,{class:`popover-btn cancel`,onClick:he},(0,t.toDisplayString)((0,t.unref)(i)(`canvasSize.cancel`)),1),(0,t.createElementVNode)(`button`,{class:`popover-btn confirm`,onClick:Q},(0,t.toDisplayString)((0,t.unref)(i)(`canvasSize.confirm`)),1)])],36)],32)):(0,t.createCommentVNode)(``,!0)]))]),(0,t.createElementVNode)(`div`,z,[Ce.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:(0,t.normalizeClass)([`color-indicator`,{active:(0,t.unref)(r).showColorPalette&&(0,t.unref)(r).activeColorSlot===`textColor`}]),title:(0,t.unref)(i)(`color.textColor`),onClick:Oe},[(0,t.createElementVNode)(`div`,V,[((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,{class:`text-color-icon`,style:(0,t.normalizeStyle)({color:De.value?`var(--wb-text-secondary)`:Ee.value}),viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`1.8`,"stroke-linecap":`round`,"stroke-linejoin":`round`},[...a[19]||=[(0,t.createElementVNode)(`polyline`,{points:`4 7 4 4 20 4 20 7`},null,-1),(0,t.createElementVNode)(`line`,{x1:`9`,y1:`20`,x2:`15`,y2:`20`},null,-1),(0,t.createElementVNode)(`line`,{x1:`12`,y1:`4`,x2:`12`,y2:`20`},null,-1)]],4)),De.value?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,H,[...a[20]||=[(0,t.createElementVNode)(`line`,{x1:`5`,y1:`12`,x2:`19`,y2:`12`},null,-1),(0,t.createElementVNode)(`line`,{x1:`12`,y1:`5`,x2:`12`,y2:`19`},null,-1)]])):(0,t.createCommentVNode)(``,!0)])],10,B)):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`color-indicator`,{active:(0,t.unref)(r).showColorPalette&&(0,t.unref)(r).activeColorSlot===`foreground`,disabled:we.value}]),title:(0,t.unref)(i)(`color.foreground`),onClick:ke},[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`color-swatch fg`,{mixed:be.value}]),style:(0,t.normalizeStyle)({background:be.value?`none`:ye.value})},[be.value?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,le,[...a[21]||=[(0,t.createElementVNode)(`line`,{x1:`5`,y1:`12`,x2:`19`,y2:`12`},null,-1),(0,t.createElementVNode)(`line`,{x1:`12`,y1:`5`,x2:`12`,y2:`19`},null,-1)]])):(0,t.createCommentVNode)(``,!0)],6)],10,U),(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`color-indicator`,{active:(0,t.unref)(r).showColorPalette&&(0,t.unref)(r).activeColorSlot===`background`,disabled:Te.value}]),title:(0,t.unref)(i)(`color.background`),onClick:Ae},[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`color-swatch bg`,{mixed:Se.value,transparent:!Se.value&&xe.value===`transparent`}]),style:(0,t.normalizeStyle)({background:Se.value||xe.value===`transparent`?`none`:xe.value})},[Se.value?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,de,[...a[22]||=[(0,t.createElementVNode)(`line`,{x1:`5`,y1:`12`,x2:`19`,y2:`12`},null,-1),(0,t.createElementVNode)(`line`,{x1:`12`,y1:`5`,x2:`12`,y2:`19`},null,-1)]])):xe.value===`transparent`?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,W,[...a[23]||=[(0,t.createElementVNode)(`line`,{x1:`5`,y1:`5`,x2:`19`,y2:`19`},null,-1)]])):(0,t.createCommentVNode)(``,!0)],6)],10,ue)])]))}}),q=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},J=q(K,[[`__scopeId`,`data-v-9532ade7`]]);function Y(e,t,n,r,i=!1,a=.382){let o=i?-1:1,s=[];for(let i=0;i<5;i++){let c=Math.PI/2*-1+Math.PI*2*i/5,l=c+Math.PI/5;s.push({x:e+n*Math.cos(c),y:t-o*r*Math.sin(c)}),s.push({x:e+n*a*Math.cos(l),y:t-o*r*a*Math.sin(l)})}return s}function X(e,t,n,r){let i=n>=0?e:e+n,a=r>=0?t:t+r,o=Math.abs(n),s=Math.abs(r);return r>=0?[{x:i+o/2,y:a},{x:i+o,y:a+s},{x:i,y:a+s}]:[{x:i+o/2,y:a+s},{x:i,y:a},{x:i+o,y:a}]}function fe(e,t,n){let r=n.x-t.x,i=n.y-t.y,a=r*r+i*i;if(a===0)return Math.hypot(e.x-t.x,e.y-t.y);let o=((e.x-t.x)*r+(e.y-t.y)*i)/a;return o=Math.max(0,Math.min(1,o)),Math.hypot(e.x-(t.x+o*r),e.y-(t.y+o*i))}function Z(e,t){let n=!1;for(let r=0,i=t.length-1;r<t.length;i=r++){let a=t[r].x,o=t[r].y,s=t[i].x,c=t[i].y;o>e.y!=c>e.y&&e.x<(s-a)*(e.y-o)/(c-o)+a&&(n=!n)}return n}function pe(e,t,n,r,i){if(r<=0||i<=0)return!1;let a=(e.x-t)/r,o=(e.y-n)/i;return a*a+o*o<=1}function me(e){if(e.length===0)return{x:0,y:0,width:0,height:0};let t=1/0,n=1/0,r=-1/0,i=-1/0;for(let a of e)a.x<t&&(t=a.x),a.y<n&&(n=a.y),a.x>r&&(r=a.x),a.y>i&&(i=a.y);return{x:t,y:n,width:r-t,height:i-n}}function Q(e,t){let{x:n,y:r,width:i,height:a,type:o,points:s,fillColor:c}=t,l=c!==`none`&&c!==`transparent`;switch(o){case`pencil`:if(s.length<2)return!1;for(let t=0;t<s.length-1;t++)if(fe(e,s[t],s[t+1])<8)return!0;return!1;case`line`:return fe(e,{x:n,y:r},{x:n+i,y:r+a})<8;case`circle`:{let t=n+i/2,o=r+a/2,s=Math.abs(i)/2,c=Math.abs(a)/2;return l&&pe(e,t,o,s,c)?!0:pe(e,t,o,s+8,c+8)&&!pe(e,t,o,s-8,c-8)}case`rect`:{if(l&&e.x>=n&&e.x<=n+i&&e.y>=r&&e.y<=r+a)return!0;let t=e.x>=n-8&&e.x<=n+i+8&&e.y>=r-8&&e.y<=r+a+8,o=e.x>=n+8&&e.x<=n+i-8&&e.y>=r+8&&e.y<=r+a-8;return t&&!o}case`triangle`:{let t=X(n,r,i,a);return l&&Z(e,t)?!0:Z(e,t)}case`star`:{let t=Y(n+i/2,r+a/2,Math.abs(i)/2,Math.abs(a)/2,a>=0);return l&&Z(e,t)?!0:Z(e,t)}case`text`:return e.x>=n-8&&e.x<=n+Math.max(i,32)+8&&e.y>=r-8&&e.y<=r+Math.max(a,16)+8;default:return!1}}function he(e){let n=g(),r=_(),i=(0,t.ref)(!1),a=(0,t.ref)({x:0,y:0}),o=(0,t.ref)({x:0,y:0}),s=(0,t.ref)([]),c=(0,t.ref)(!1),l=(0,t.ref)(!1),u=(0,t.ref)(!1),d=(0,t.ref)(!1),f=(0,t.ref)(new Map),p=(0,t.ref)(!1),m=(0,t.ref)(null),h=(0,t.ref)(``),v=(0,t.ref)(``),y=(0,t.ref)(null),b=(0,t.ref)(!1),x=(0,t.ref)(0),S=(0,t.ref)(0),C=(0,t.ref)(0),w=(0,t.ref)(0),T=(0,t.ref)(!1),ee=null;function te(e){ee=e}function E(){let e=n.editingTextId;if(!e||!n.strokes.find(t=>t.id===e))return;let t=ee?.()??null;t!==null&&(t.trim()?n.updateStroke(e,{text:t}):(n.strokes=n.strokes.filter(t=>t.id!==e),n.undoStack.length>0&&n.undoStack.pop()),n.editingTextId=null)}function D(e){if(!b.value)return;let t=e.clientX-x.value,r=e.clientY-S.value;n.setPan(C.value+t,w.value+r)}function O(){b.value&&(b.value=!1,window.removeEventListener(`mousemove`,D),window.removeEventListener(`mouseup`,O),window.removeEventListener(`touchmove`,I),window.removeEventListener(`touchend`,L))}function k(e,t,n,r,i){let a=r-t,o=i-n,s=e===`circle`||e===`rect`||e===`triangle`||e===`star`;if(e===`line`&&u.value){let e=Math.round(Math.atan2(o,a)/(Math.PI/4))*(Math.PI/4),t=Math.hypot(a,o);a=Math.cos(e)*t,o=Math.sin(e)*t}if(s){if(c.value){let e=Math.max(Math.abs(a),Math.abs(o));a=a>=0?e:-e,o=o>=0?e:-e}if(l.value){let e=A(t,n,t+a,n+o),r=e.width,i=e.height;return{x:t-r,y:n-i,width:r*2,height:i*2}}}return e===`line`||e===`triangle`||e===`star`?{x:t,y:n,width:a,height:o}:A(t,n,t+a,n+o)}function A(e,t,n,r){return{x:Math.min(e,n),y:Math.min(t,r),width:Math.abs(n-e),height:Math.abs(r-t)}}let ne=(0,t.computed)(()=>{if(!i.value)return null;let e=r.activeTool;if(e===`select`||e===`pan`||e===`zoom`||e===`text`)return null;let{x:t,y:c}=a.value,{x:l,y:u}=o.value;return e===`pencil`?{id:`__preview__`,type:`pencil`,...me(s.value),points:[...s.value],strokeColor:n.foregroundColor,fillColor:`none`,strokeWidth:n.strokeWidth}:{id:`__preview__`,type:e,...k(e,t,c,l,u),points:[],strokeColor:n.foregroundColor,fillColor:e===`line`?`none`:n.backgroundColor,strokeWidth:n.strokeWidth}});function re(e){return j(e.clientX,e.clientY)}function j(t,r){let i=e.value;if(!i)return{x:0,y:0};let a=i.getBoundingClientRect();return{x:(t-a.left)/n.zoomLevel,y:(r-a.top)/n.zoomLevel}}function ie(e){N(e.clientX,e.clientY,e.type===`mousedown`?e:void 0)}function M(e){if(e.touches.length!==1)return;e.preventDefault();let t=e.touches[0];N(t.clientX,t.clientY)}function N(t,c,l){let u=j(t,c);if(n.editingTextId&&r.activeTool!==`text`&&E(),r.activeTool===`pan`){b.value=!0,x.value=t,S.value=c,C.value=n.panX,w.value=n.panY,window.addEventListener(`mousemove`,D),window.addEventListener(`mouseup`,O),window.addEventListener(`touchmove`,I,{passive:!1}),window.addEventListener(`touchend`,L);return}if(r.activeTool===`zoom`&&l){let r=l.button===2?.8:1.25,i=e.value;if(i){let e=i.getBoundingClientRect();n.zoomAt(t-e.left,c-e.top,r)}return}if(r.activeTool===`text`){let e=n.editingTextId;if(e){let t=n.strokes.find(t=>t.id===e);if(t&&Q(u,t))return}else{let e=[...n.strokes].reverse().find(e=>Q(u,e));if(e&&e.type===`text`){n.hoveredTextId=null,E(),n.pushUndo(),n.editingTextId=e.id;return}}T.value=!0,a.value=u;return}if(a.value=u,o.value=u,i.value=!0,r.activeTool===`pencil`&&(s.value=[u]),r.activeTool===`select`){let e=[...n.strokes].reverse().find(e=>Q(u,e));if(e&&n.isSelected(e.id)){n.pushUndo(),d.value=!0,f.value.clear();for(let e of n.selectedStrokes)f.value.set(e.id,{x:e.x,y:e.y,width:e.width,height:e.height,points:e.points.map(e=>({...e}))});n.isSelecting=!1,n.selectionBox=null}else d.value=!1,n.isSelecting=!0,n.selectionBox={x:u.x,y:u.y,width:0,height:0}}}function ae(e){F(e.clientX,e.clientY)}function P(e){if(e.touches.length!==1)return;e.preventDefault();let t=e.touches[0];F(t.clientX,t.clientY)}function F(e,t){let c=j(e,t);if(r.activeTool===`text`&&!i.value&&!n.editingTextId){let e=[...n.strokes].reverse().find(e=>Q(c,e));n.hoveredTextId=e&&e.type===`text`?e.id:null}else i.value||(n.hoveredTextId=null);if(i.value&&(o.value=c,r.activeTool===`pencil`&&s.value.push(c),r.activeTool===`select`))if(d.value){let e=c.x-a.value.x,t=c.y-a.value.y;for(let r of n.selectedStrokes){let i=f.value.get(r.id);i&&n.updateStroke(r.id,{x:i.x+e,y:i.y+t,points:i.points.map(n=>({x:n.x+e,y:n.y+t}))})}}else n.selectionBox={x:Math.min(a.value.x,c.x),y:Math.min(a.value.y,c.y),width:Math.abs(c.x-a.value.x),height:Math.abs(c.y-a.value.y)}}function I(e){if(!b.value||e.touches.length!==1)return;e.preventDefault();let t=e.touches[0],r=t.clientX-x.value,i=t.clientY-S.value;n.setPan(C.value+r,w.value+i)}function L(){b.value&&(b.value=!1,window.removeEventListener(`mousemove`,D),window.removeEventListener(`mouseup`,O),window.removeEventListener(`touchmove`,I),window.removeEventListener(`touchend`,L))}function oe(e){R(e.clientX,e.clientY)}function se(e){let t=e.changedTouches[0];t&&R(t.clientX,t.clientY)}function R(e,t){if(r.activeTool===`zoom`)return;if(r.activeTool===`text`){if(T.value){T.value=!1,E();let e=n.buildStroke(`text`,a.value.x,a.value.y,0,0,[]);n.addStroke(e),n.editingTextId=e.id}return}if(!i.value)return;i.value=!1;let o=j(e,t),c=o.x-a.value.x,l=o.y-a.value.y,u=Math.hypot(c,l);if(r.activeTool===`select`){if(d.value)d.value=!1,f.value.clear(),n.dataVersion++;else{if(n.isSelecting=!1,u<3){let e=[...n.strokes].reverse().find(e=>Q(o,e));n.selectStroke(e?.id??null)}else{let e=n.selectionBox,t=[];for(let r of[...n.strokes].reverse()){let i=n.getStrokeDisplayBounds(r);i.x>=e.x&&i.x+i.width<=e.x+e.width&&i.y>=e.y&&i.y+i.height<=e.y+e.height&&t.push(r.id)}n.selectStrokes(t)}n.selectionBox=null}return}if(u<3){n.clearSelection();return}let p=r.activeTool,{x:m,y:h}=a.value;if(p===`pencil`){if(s.value.length<2){n.clearSelection();return}let e=s.value.map(e=>({x:Math.round(e.x),y:Math.round(e.y)})),t=me(e);if(t.width<3&&t.height<3){n.clearSelection();return}let i=n.buildStroke(`pencil`,t.x,t.y,t.width,t.height,e);n.addStroke(i),r.setTool(`select`);return}let g=o.x-m,_=o.y-h;if(Math.abs(g)<3&&Math.abs(_)<3){n.clearSelection();return}let v=k(p,m,h,o.x,o.y),y=n.buildStroke(p,v.x,v.y,v.width,v.height,[]);n.addStroke(y),r.setTool(`select`)}function ce(e,t){n.strokes.find(t=>t.id===e)&&(t.trim()?n.updateStroke(e,{text:t}):(n.strokes=n.strokes.filter(t=>t.id!==e),n.undoStack.length>0&&n.undoStack.pop()),n.editingTextId=null,r.activeTool===`text`&&r.setTool(`select`))}function z(e){let t=n.strokes.find(t=>t.id===e);t&&((!t.text||!t.text.trim())&&(n.strokes=n.strokes.filter(t=>t.id!==e),n.undoStack.length>0&&n.undoStack.pop()),n.editingTextId=null,r.activeTool===`text`&&r.setTool(`select`))}function B(e){n.pushUndo(),n.editingTextId=e}function V(e){let t=e.ctrlKey||e.metaKey;c.value=t,l.value=e.shiftKey,u.value=e.shiftKey}function H(){c.value=!1,l.value=!1,u.value=!1}function U(e,t){let{x:n,y:r,w:i,h:a}=e;switch(t){case`nw`:return{x:n+i,y:r+a};case`n`:return{x:n+i/2,y:r+a};case`ne`:return{x:n,y:r+a};case`e`:return{x:n,y:r+a/2};case`se`:return{x:n,y:r};case`s`:return{x:n+i/2,y:r};case`sw`:return{x:n+i,y:r};case`w`:return{x:n+i,y:r+a/2};case`line-start`:return{x:n+i,y:r+a};case`line-end`:return{x:n,y:r};default:return{x:n+i,y:r+a}}}function le(e){return e===`n`||e===`s`||e===`e`||e===`w`}function ue(e,t,r,i){let s=n.strokes.find(t=>t.id===e);if(!s)return;n.pushUndo();let c=Y(s);y.value={x:c.x,y:c.y,width:c.width,height:c.height,type:s.type},m.value=e,h.value=t,v.value=r,p.value=!0;let l,u;if(`touches`in i){let e=i.touches[0]||i.changedTouches[0];l=e.clientX,u=e.clientY,i.preventDefault()}else l=i.clientX,u=i.clientY;let d=j(l,u);a.value=d,o.value=d,window.addEventListener(`mousemove`,de),window.addEventListener(`mouseup`,K),window.addEventListener(`touchmove`,W,{passive:!1}),window.addEventListener(`touchend`,q)}function de(e){G(e.clientX,e.clientY)}function W(e){if(e.touches.length!==1)return;e.preventDefault();let t=e.touches[0];G(t.clientX,t.clientY)}function G(e,t){if(!p.value||!y.value||!m.value)return;let r=j(e,t);o.value=r;let i=y.value,a=i.x+i.width/2,s=i.y+i.height/2,c;if(l.value&&le(h.value)){let{x:e,y:t,width:o,height:l}=i;switch(h.value){case`n`:{let t=Math.abs(r.y-s);c={x:e,y:s-t,width:o,height:t*2};break}case`s`:{let t=Math.abs(r.y-s);c={x:e,y:s-t,width:o,height:t*2};break}case`e`:{let e=Math.abs(r.x-a);c={x:a-e,y:t,width:e*2,height:l};break}case`w`:{let e=Math.abs(r.x-a);c={x:a-e,y:t,width:e*2,height:l};break}default:c={x:e,y:t,width:o,height:l}}n.updateStroke(m.value,c);return}if(l.value){c=k(i.type,a,s,r.x,r.y),n.updateStroke(m.value,c);return}if(le(h.value)){let{x:e,y:t,width:n,height:a}=i;switch(h.value){case`n`:{let i=t+a;c={x:e,y:Math.min(r.y,i),width:n,height:Math.abs(r.y-i)};break}case`s`:c={x:e,y:t,width:n,height:Math.abs(r.y-t)};break;case`e`:c={x:e,y:t,width:Math.abs(r.x-e),height:a};break;case`w`:{let i=e+n;c={x:Math.min(r.x,i),y:t,width:Math.abs(r.x-i),height:a};break}default:c={x:e,y:t,width:n,height:a}}}else{let e=U({x:i.x,y:i.y,w:i.width,h:i.height},h.value);c=k(i.type,e.x,e.y,r.x,r.y)}if(y.value?.type===`text`){c.width<1&&(c.width=1),n.updateStroke(m.value,{x:c.x,width:c.width,textAutoWidth:!1});return}n.updateStroke(m.value,c)}function K(){J()}function q(e){e.touches.length===0&&J()}function J(){p.value=!1,m.value=null,h.value=``,v.value=``,y.value=null,n.dataVersion++,window.removeEventListener(`mousemove`,de),window.removeEventListener(`mouseup`,K),window.removeEventListener(`touchmove`,W),window.removeEventListener(`touchend`,q)}function Y(e){let{type:t}=e;if(t===`line`||t===`triangle`||t===`star`){let{x:t,y:n,width:r,height:i}=e;return{x:r>=0?t:t+r,y:i>=0?n:n+i,width:Math.abs(r),height:Math.abs(i)}}return{x:e.x,y:e.y,width:e.width,height:e.height}}return{isDrawing:i,previewStroke:ne,onMouseDown:ie,onMouseMove:ae,onMouseUp:oe,onTouchStart:M,onTouchMove:P,onTouchEnd:se,getSVGPoint:re,updateModifiers:V,clearModifiers:H,isResizing:p,resizeCursor:v,startResize:ue,commitTextEdit:ce,cancelTextEdit:z,startEditText:B,saveCurrentTextEdit:E,setTextContentGetter:te}}function ge(e){if(e.length===0)return``;if(e.length===1)return`M ${e[0].x} ${e[0].y}`;if(e.length===2)return`M ${e[0].x} ${e[0].y} L ${e[1].x} ${e[1].y}`;let t=`M ${e[0].x} ${e[0].y}`;for(let n=1;n<e.length-1;n++){let r=(e[n].x+e[n+1].x)/2,i=(e[n].y+e[n+1].y)/2;t+=` Q ${e[n].x} ${e[n].y} ${r} ${i}`}return t+=` L ${e[e.length-1].x} ${e[e.length-1].y}`,t}function _e(e){let{type:t,x:n,y:r,width:i,height:a,points:o,strokeColor:s,fillColor:c,strokeWidth:l}=e,u={stroke:s,fill:c,"stroke-width":l,"stroke-linecap":`round`,"stroke-linejoin":`round`};switch(t){case`pencil`:return{tag:`path`,attrs:{...u,fill:`none`,d:ge(o)}};case`line`:return{tag:`line`,attrs:{...u,fill:`none`,x1:n,y1:r,x2:n+i,y2:r+a}};case`circle`:{let e=n+i/2,t=r+a/2,o=Math.abs(i)/2,s=Math.abs(a)/2;return{tag:`ellipse`,attrs:{...u,cx:e,cy:t,rx:o,ry:s}}}case`rect`:return{tag:`rect`,attrs:{...u,x:i>=0?n:n+i,y:a>=0?r:r+a,width:Math.abs(i),height:Math.abs(a)}};case`triangle`:{let e=X(n,r,i,a).map(e=>`${e.x},${e.y}`).join(` `);return{tag:`polygon`,attrs:{...u,points:e}}}case`star`:{let e=Y(n+i/2,r+a/2,Math.abs(i)/2,Math.abs(a)/2,a>=0).map(e=>`${e.x},${e.y}`).join(` `);return{tag:`polygon`,attrs:{...u,points:e}}}case`text`:return{tag:`g`,attrs:{}};default:return{tag:`g`,attrs:{}}}}var ve=q((0,t.defineComponent)({__name:`StrokeRenderer`,props:{stroke:{},isSelected:{type:Boolean}},setup(e){return(n,r)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)((0,t.unref)(_e)(e.stroke).tag),(0,t.mergeProps)((0,t.unref)(_e)(e.stroke).attrs,{class:{selected:e.isSelected},"data-stroke-id":e.stroke.id}),null,16,[`class`,`data-stroke-id`]))}}),[[`__scopeId`,`data-v-d3706fa4`]]),ye={key:0},be=[`x`,`y`,`width`,`height`],xe=[`x`,`y`,`onMousedown`,`onTouchstart`],Se=[`x`,`y`,`onMousedown`,`onTouchstart`],Ce=6,$=8,we=(0,t.defineComponent)({__name:`SelectionOverlay`,props:{stroke:{},startResize:{type:Function}},setup(e){let n=e,r=g(),i=(0,t.computed)(()=>{let e=r.getStrokeDisplayBounds(n.stroke);return{x:e.x-Ce,y:e.y-Ce,w:e.width+12,h:e.height+12}}),a=(0,t.computed)(()=>n.stroke.type===`line`),o=(0,t.computed)(()=>{let e=n.stroke;return[{name:`line-start`,cx:e.x,cy:e.y,cursor:`move`},{name:`line-end`,cx:e.x+e.width,cy:e.y+e.height,cursor:`move`}]}),s=(0,t.computed)(()=>n.stroke.type===`text`),c=(0,t.computed)(()=>{let e=i.value,t=[{name:`nw`,cx:e.x,cy:e.y,cursor:`nwse-resize`},{name:`n`,cx:e.x+e.w/2,cy:e.y,cursor:`ns-resize`},{name:`ne`,cx:e.x+e.w,cy:e.y,cursor:`nesw-resize`},{name:`e`,cx:e.x+e.w,cy:e.y+e.h/2,cursor:`ew-resize`},{name:`se`,cx:e.x+e.w,cy:e.y+e.h,cursor:`nwse-resize`},{name:`s`,cx:e.x+e.w/2,cy:e.y+e.h,cursor:`ns-resize`},{name:`sw`,cx:e.x,cy:e.y+e.h,cursor:`nesw-resize`},{name:`w`,cx:e.x,cy:e.y+e.h/2,cursor:`ew-resize`}];return s.value?t.filter(e=>e.name!==`n`&&e.name!==`s`):t});function l(e,t,r){r.preventDefault(),r.stopPropagation(),n.startResize(n.stroke.id,e,t,r)}return(n,r)=>e.stroke?((0,t.openBlock)(),(0,t.createElementBlock)(`g`,ye,[(0,t.createElementVNode)(`rect`,{x:i.value.x,y:i.value.y,width:i.value.w,height:i.value.h,fill:`none`,stroke:`#6366f1`,"stroke-width":`2`,"stroke-dasharray":`6 4`,rx:`4`},null,8,be),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(o.value,e=>(0,t.withDirectives)(((0,t.openBlock)(),(0,t.createElementBlock)(`rect`,{key:e.name,x:e.cx-$/2,y:e.cy-$/2,width:$,height:$,fill:`white`,stroke:`#6366f1`,"stroke-width":`1.5`,rx:`1`,style:(0,t.normalizeStyle)({cursor:e.cursor}),onMousedown:(0,t.withModifiers)(t=>l(e.name,e.cursor,t),[`stop`,`prevent`]),onTouchstart:(0,t.withModifiers)(t=>l(e.name,e.cursor,t),[`stop`,`prevent`])},null,44,xe)),[[t.vShow,a.value]])),128)),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(c.value,e=>(0,t.withDirectives)(((0,t.openBlock)(),(0,t.createElementBlock)(`rect`,{key:e.name,x:e.cx-$/2,y:e.cy-$/2,width:$,height:$,fill:`white`,stroke:`#6366f1`,"stroke-width":`1.5`,rx:`1`,style:(0,t.normalizeStyle)({cursor:e.cursor}),onMousedown:(0,t.withModifiers)(t=>l(e.name,e.cursor,t),[`stop`,`prevent`]),onTouchstart:(0,t.withModifiers)(t=>l(e.name,e.cursor,t),[`stop`,`prevent`])},null,44,Se)),[[t.vShow,!a.value]])),128))])):(0,t.createCommentVNode)(``,!0)}}),Te=[`viewBox`],Ee=[`width`,`height`,`fill`],De=[`width`,`height`,`fill`],Oe=[`width`,`height`,`stroke`],ke={class:`strokes-layer`},Ae=[`x`,`y`,`width`],je=[`contenteditable`,`onDblclick`],Me=[`x`,`y`,`width`,`height`],Ne=[`x`,`y`,`width`,`height`],Pe=[`disabled`,`title`],Fe=[`disabled`,`title`],Ie=[`title`],Le=[`title`],Re=[`title`],ze=[`title`],Be={class:`zoom-percent`},Ve=[`title`],He={class:`font-size-value`},Ue=[`title`],We=[`title`],Ge=[`title`],Ke=q((0,t.defineComponent)({__name:`Whiteboard`,setup(e){let n=g(),r=_(),{t:i}=s(),a=(0,t.ref)(null),{isDrawing:o,previewStroke:c,onMouseDown:l,onMouseMove:u,onMouseUp:d,onTouchStart:f,onTouchMove:p,onTouchEnd:m,updateModifiers:h,clearModifiers:v,isResizing:y,resizeCursor:b,startResize:x,commitTextEdit:S,cancelTextEdit:C,startEditText:w,saveCurrentTextEdit:T,setTextContentGetter:ee}=he(a);ee(()=>{let e=n.editingTextId;if(!e)return null;let t=D.value.get(e);return t?t.innerText:null}),(0,t.watch)(()=>r.activeTool,e=>{e!==`text`&&T()});let te=(0,t.computed)(()=>y.value?b.value:r.activeTool===`pan`?`grab`:r.activeTool===`zoom`?`zoom-in`:r.activeTool===`text`?n.hoveredTextId?`pointer`:`text`:r.activeTool===`select`?`default`:`crosshair`),E=(0,t.computed)(()=>r.activeTool===`zoom`),D=(0,t.ref)(new Map),O=(0,t.computed)(()=>{let e=n.hoveredTextId;if(!e)return null;let t=n.strokes.find(t=>t.id===e);return t?n.getStrokeDisplayBounds(t):null}),k=(0,t.computed)(()=>{let e=n.selectedStrokes;return e.length===1&&e[0].type===`text`?e[0]:null});function A(e){if(n.editingTextId)if(e.key===`Enter`&&!e.shiftKey){e.preventDefault(),e.stopPropagation();let r=D.value.get(n.editingTextId),i=r?r.innerText:``;S(n.editingTextId,i),(0,t.nextTick)(()=>{})}else e.key===`Escape`&&(e.preventDefault(),e.stopPropagation(),C(n.editingTextId))}(0,t.watch)(()=>n.editingTextId,e=>{e&&(0,t.nextTick)(()=>{let t=D.value.get(e);if(t){t.focus();let e=document.createRange();e.selectNodeContents(t),e.collapse(!1);let n=window.getSelection();n?.removeAllRanges(),n?.addRange(e)}})});function ne(e){(r.activeTool===`text`||r.activeTool===`select`)&&w(e)}function re(){n.hoveredTextId=null}function j(){let e=a.value?.parentElement;e&&n.zoomAt(e.clientWidth/2,e.clientHeight/2,1.1)}function ie(){let e=a.value?.parentElement;e&&n.zoomAt(e.clientWidth/2,e.clientHeight/2,.9)}function M(e){let t=e.ctrlKey||e.metaKey;n.editingTextId||((o.value||y.value)&&h(e),e.key===`Delete`||e.key===`Backspace`?n.deleteSelectedStrokes():e.key===`Escape`?n.clearSelection():t&&e.key===`z`&&!e.shiftKey?(e.preventDefault(),n.undo()):t&&(e.key===`y`||e.shiftKey&&e.key===`z`)?(e.preventDefault(),n.redo()):t&&e.key===`x`?(e.preventDefault(),n.cutSelectedStrokes()):t&&e.key===`c`?(e.preventDefault(),n.copySelectedStrokes()):t&&e.key===`v`&&(e.preventDefault(),n.pasteStrokes()))}function N(e){(o.value||y.value)&&h(e)}function ae(){v()}let P=(0,t.ref)(0),F=(0,t.ref)(1),I=(0,t.ref)(0),L=(0,t.ref)(0);function oe(e){let t=e[0].clientX-e[1].clientX,n=e[0].clientY-e[1].clientY;return Math.hypot(t,n)}function se(e){r.activeTool===`zoom`&&e.touches.length===2&&(P.value=oe(e.touches),F.value=n.zoomLevel,I.value=(e.touches[0].clientX+e.touches[1].clientX)/2,L.value=(e.touches[0].clientY+e.touches[1].clientY)/2)}function R(e){if(r.activeTool===`zoom`&&e.touches.length===2&&P.value>0){let t=oe(e.touches)/P.value,r=F.value*t,i=a.value;if(i){let e=i.getBoundingClientRect();n.continuousZoomAt(I.value-e.left,L.value-e.top,r)}}}function ce(e){r.activeTool===`zoom`&&e.touches.length<2&&(P.value=0)}let z=null;function B(){let e=a.value?.parentElement;if(!e)return;let t=n.canvasWidth*n.zoomLevel,r=n.canvasHeight*n.zoomLevel,i=e.clientWidth,o=e.clientHeight;i>0&&o>0&&n.setPan((i-t)/2,(o-r)/2)}function V(e){let t=k.value;if(!t)return;let r=t.fontSize??16,i=Math.max(8,Math.min(200,r+e));n.pushUndo(),n.updateStroke(t.id,{fontSize:i}),n.dataVersion++}function H(e){let t=k.value;t&&(n.pushUndo(),n.updateStroke(t.id,{textAlign:e}),n.dataVersion++)}function U(e){return n=>{n?(D.value.set(e,n),(0,t.nextTick)(()=>le(e,n))):D.value.delete(e)}}function le(e,t){let r=n.strokes.find(t=>t.id===e);if(!r)return;let i=Math.max(t.scrollWidth/n.zoomLevel,r.fontSize??16),a=Math.max(t.scrollHeight/n.zoomLevel,r.fontSize??16);if(r.textAutoWidth){if(Math.abs(r.width-i)<.5&&Math.abs(r.height-a)<.5)return;n.updateStroke(e,{width:i,height:a})}else{let t=Math.max(r.width,i);if(Math.abs(r.width-t)<.5&&Math.abs(r.height-a)<.5)return;n.updateStroke(e,{width:t,height:a})}}return(0,t.onMounted)(()=>{window.addEventListener(`keydown`,M),window.addEventListener(`keydown`,A),window.addEventListener(`keyup`,N),window.addEventListener(`blur`,ae),B(),z=new ResizeObserver(()=>B());let e=a.value?.parentElement;e&&z.observe(e)}),(0,t.onUnmounted)(()=>{window.removeEventListener(`keydown`,M),window.removeEventListener(`keydown`,A),window.removeEventListener(`keyup`,N),window.removeEventListener(`blur`,ae),z?.disconnect()}),(e,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`whiteboard`,onContextmenu:r[23]||=(0,t.withModifiers)(()=>{},[`prevent`]),onMousedown:r[24]||=(...e)=>(0,t.unref)(l)&&(0,t.unref)(l)(...e),onMousemove:r[25]||=(...e)=>(0,t.unref)(u)&&(0,t.unref)(u)(...e),onMouseup:r[26]||=(...e)=>(0,t.unref)(d)&&(0,t.unref)(d)(...e),onTouchstart:r[27]||=(0,t.withModifiers)(e=>{(0,t.unref)(f)(e),se(e)},[`prevent`]),onTouchmove:r[28]||=(0,t.withModifiers)(e=>{(0,t.unref)(p)(e),R(e)},[`prevent`]),onTouchend:r[29]||=e=>{(0,t.unref)(m)(e),ce(e)}},[(0,t.createElementVNode)(`div`,{ref_key:`wrapperRef`,ref:a,class:`canvas-wrapper`,style:(0,t.normalizeStyle)({width:(0,t.unref)(n).canvasWidth+`px`,height:(0,t.unref)(n).canvasHeight+`px`,transform:(0,t.unref)(n).canvasTransform,transformOrigin:`0 0`})},[((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,{class:`canvas`,viewBox:(0,t.unref)(n).viewBox,width:`100%`,height:`100%`,style:(0,t.normalizeStyle)({cursor:te.value}),onMouseleave:re},[r[30]||=(0,t.createStaticVNode)(`<defs data-v-975e0b8b><pattern id="grid-light" width="16" height="16" patternUnits="userSpaceOnUse" data-v-975e0b8b><rect width="16" height="16" fill="#ffffff" data-v-975e0b8b></rect><rect width="8" height="8" fill="#f0f0f0" data-v-975e0b8b></rect><rect x="8" y="8" width="8" height="8" fill="#f0f0f0" data-v-975e0b8b></rect></pattern><pattern id="grid-dark" width="16" height="16" patternUnits="userSpaceOnUse" data-v-975e0b8b><rect width="16" height="16" fill="#1e1e30" data-v-975e0b8b></rect><rect width="8" height="8" fill="#2a2a3e" data-v-975e0b8b></rect><rect x="8" y="8" width="8" height="8" fill="#2a2a3e" data-v-975e0b8b></rect></pattern></defs>`,1),(0,t.unref)(n).canvasBackgroundColor===`transparent`?((0,t.openBlock)(),(0,t.createElementBlock)(`rect`,{key:0,x:`0`,y:`0`,width:(0,t.unref)(n).canvasWidth,height:(0,t.unref)(n).canvasHeight,fill:(0,t.unref)(n).theme===`dark`?`url(#grid-dark)`:`url(#grid-light)`},null,8,Ee)):((0,t.openBlock)(),(0,t.createElementBlock)(`rect`,{key:1,x:`0`,y:`0`,width:(0,t.unref)(n).canvasWidth,height:(0,t.unref)(n).canvasHeight,fill:(0,t.unref)(n).canvasBackgroundColor},null,8,De)),(0,t.createElementVNode)(`rect`,{x:`0`,y:`0`,width:(0,t.unref)(n).canvasWidth,height:(0,t.unref)(n).canvasHeight,fill:`none`,stroke:(0,t.unref)(n).theme===`dark`?`#4a4a5a`:`#c0c0c0`,"stroke-width":`2`},null,8,Oe),(0,t.createElementVNode)(`g`,ke,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)((0,t.unref)(n).strokes,e=>((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:e.id},[e.type===`text`?((0,t.openBlock)(),(0,t.createElementBlock)(`foreignObject`,{key:0,x:e.x,y:e.y,width:e.textAutoWidth?1:e.width||1,height:1,style:{overflow:`visible`,pointerEvents:`none`}},[(0,t.createElementVNode)(`div`,{ref_for:!0,ref:U(e.id),xmlns:`http://www.w3.org/1999/xhtml`,contenteditable:(0,t.unref)(n).editingTextId===e.id,style:(0,t.normalizeStyle)({fontSize:(e.fontSize??16)+`px`,color:e.textColor??e.strokeColor,textAlign:e.textAlign??`left`,whiteSpace:e.textAutoWidth?`nowrap`:`pre-wrap`,wordBreak:e.textAutoWidth?`normal`:`break-word`,padding:`2px 4px`,minHeight:(e.fontSize??16)+`px`,outline:(0,t.unref)(n).editingTextId===e.id?`2px solid #6366f1`:`none`,cursor:(0,t.unref)(n).editingTextId===e.id?`text`:`default`,userSelect:(0,t.unref)(n).editingTextId===e.id?`text`:`none`,pointerEvents:(0,t.unref)(n).editingTextId===e.id?`auto`:`none`,background:(0,t.unref)(n).editingTextId===e.id?`rgba(255,255,255,0.9)`:`transparent`,borderRadius:`2px`,display:`inline-block`,maxWidth:e.textAutoWidth?`none`:`100%`}),onDblclick:(0,t.withModifiers)(t=>ne(e.id),[`stop`])},(0,t.toDisplayString)(e.text||``),45,je)],8,Ae)):((0,t.openBlock)(),(0,t.createBlock)(ve,{key:1,stroke:e,"is-selected":(0,t.unref)(n).isSelected(e.id)},null,8,[`stroke`,`is-selected`]))],64))),128))]),(0,t.unref)(c)?((0,t.openBlock)(),(0,t.createBlock)(ve,{key:2,stroke:(0,t.unref)(c),"is-selected":!1},null,8,[`stroke`])):(0,t.createCommentVNode)(``,!0),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)((0,t.unref)(n).selectedStrokes,e=>((0,t.openBlock)(),(0,t.createBlock)(we,{key:`sel-`+e.id,stroke:e,"start-resize":(0,t.unref)(x)},null,8,[`stroke`,`start-resize`]))),128)),(0,t.unref)(n).isSelecting&&(0,t.unref)(n).selectionBox?((0,t.openBlock)(),(0,t.createElementBlock)(`rect`,{key:3,x:(0,t.unref)(n).selectionBox.x,y:(0,t.unref)(n).selectionBox.y,width:(0,t.unref)(n).selectionBox.width,height:(0,t.unref)(n).selectionBox.height,fill:`rgba(99, 102, 241, 0.08)`,stroke:`#6366f1`,"stroke-width":`1`,"stroke-dasharray":`6 4`},null,8,Me)):(0,t.createCommentVNode)(``,!0),O.value?((0,t.openBlock)(),(0,t.createElementBlock)(`rect`,{key:4,x:O.value.x-4,y:O.value.y-4,width:O.value.width+8,height:O.value.height+8,fill:`none`,stroke:`#6366f1`,"stroke-width":`1`,"stroke-dasharray":`4 3`,"pointer-events":`none`},null,8,Ne)):(0,t.createCommentVNode)(``,!0)],44,Te))],4),(0,t.createElementVNode)(`div`,{class:`canvas-toolbar`,onMousedown:r[5]||=(0,t.withModifiers)(()=>{},[`stop`]),onMouseup:r[6]||=(0,t.withModifiers)(()=>{},[`stop`]),onClick:r[7]||=(0,t.withModifiers)(()=>{},[`stop`]),onTouchstart:r[8]||=(0,t.withModifiers)(()=>{},[`stop`]),onTouchmove:r[9]||=(0,t.withModifiers)(()=>{},[`stop`]),onTouchend:r[10]||=(0,t.withModifiers)(()=>{},[`stop`])},[(0,t.createElementVNode)(`button`,{class:`canvas-tb-btn`,disabled:!(0,t.unref)(n).canUndo,title:(0,t.unref)(i)(`toolbar.undo`),onClick:r[0]||=e=>(0,t.unref)(n).undo()},[...r[31]||=[(0,t.createElementVNode)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`},[(0,t.createElementVNode)(`path`,{d:`M3 10h10a5 5 0 0 1 0 10H9`}),(0,t.createElementVNode)(`polyline`,{points:`7 6 3 10 7 14`})],-1)]],8,Pe),(0,t.createElementVNode)(`button`,{class:`canvas-tb-btn`,disabled:!(0,t.unref)(n).canRedo,title:(0,t.unref)(i)(`toolbar.redo`),onClick:r[1]||=e=>(0,t.unref)(n).redo()},[...r[32]||=[(0,t.createElementVNode)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`},[(0,t.createElementVNode)(`path`,{d:`M21 10H11a5 5 0 0 0 0 10h4`}),(0,t.createElementVNode)(`polyline`,{points:`17 6 21 10 17 14`})],-1)]],8,Fe),(0,t.unref)(n).selectedStrokeIds.size>0?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:0,class:`canvas-tb-btn`,title:(0,t.unref)(i)(`toolbar.bringToFront`),onClick:r[2]||=e=>(0,t.unref)(n).moveSelectedUp()},[...r[33]||=[(0,t.createElementVNode)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`},[(0,t.createElementVNode)(`path`,{d:`m18 15-6-6-6 6`})],-1)]],8,Ie)):(0,t.createCommentVNode)(``,!0),(0,t.unref)(n).selectedStrokeIds.size>0?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:1,class:`canvas-tb-btn`,title:(0,t.unref)(i)(`toolbar.sendToBack`),onClick:r[3]||=e=>(0,t.unref)(n).moveSelectedDown()},[...r[34]||=[(0,t.createElementVNode)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`},[(0,t.createElementVNode)(`path`,{d:`m6 9 6 6 6-6`})],-1)]],8,Le)):(0,t.createCommentVNode)(``,!0),(0,t.unref)(n).selectedStrokeIds.size>0?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:2,class:`canvas-tb-btn canvas-tb-btn--danger`,title:(0,t.unref)(i)(`toolbar.delete`),onClick:r[4]||=e=>(0,t.unref)(n).deleteSelectedStrokes()},[...r[35]||=[(0,t.createStaticVNode)(`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-975e0b8b><polyline points="3 6 5 6 21 6" data-v-975e0b8b></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" data-v-975e0b8b></path><path d="M10 11v6" data-v-975e0b8b></path><path d="M14 11v6" data-v-975e0b8b></path><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" data-v-975e0b8b></path></svg>`,1)]],8,Re)):(0,t.createCommentVNode)(``,!0)],32),E.value||(0,t.unref)(n).showZoomIndicator?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:`zoom-control`,onTouchstart:r[11]||=(0,t.withModifiers)(()=>{},[`stop`,`prevent`])},[E.value?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:0,class:`zoom-btn`,title:(0,t.unref)(i)(`zoom.zoomOut`),onMousedown:(0,t.withModifiers)(ie,[`stop`,`prevent`]),onTouchstart:(0,t.withModifiers)(ie,[`stop`,`prevent`])},[...r[36]||=[(0,t.createElementVNode)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`},[(0,t.createElementVNode)(`line`,{x1:`5`,y1:`12`,x2:`19`,y2:`12`})],-1)]],40,ze)):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`span`,Be,(0,t.toDisplayString)((0,t.unref)(n).getZoomPercent())+`%`,1),E.value?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:1,class:`zoom-btn`,title:(0,t.unref)(i)(`zoom.zoomIn`),onMousedown:(0,t.withModifiers)(j,[`stop`,`prevent`]),onTouchstart:(0,t.withModifiers)(j,[`stop`,`prevent`])},[...r[37]||=[(0,t.createElementVNode)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`},[(0,t.createElementVNode)(`line`,{x1:`12`,y1:`5`,x2:`12`,y2:`19`}),(0,t.createElementVNode)(`line`,{x1:`5`,y1:`12`,x2:`19`,y2:`12`})],-1)]],40,Ve)):(0,t.createCommentVNode)(``,!0)],32)):(0,t.createCommentVNode)(``,!0),k.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:1,class:`text-format-control`,onTouchstart:r[22]||=(0,t.withModifiers)(()=>{},[`stop`,`prevent`])},[(0,t.createElementVNode)(`button`,{class:`font-size-btn`,onMousedown:r[12]||=(0,t.withModifiers)(e=>V(-1),[`stop`,`prevent`]),onTouchstart:r[13]||=(0,t.withModifiers)(e=>V(-1),[`stop`,`prevent`])},[...r[38]||=[(0,t.createElementVNode)(`svg`,{width:`12`,height:`12`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`},[(0,t.createElementVNode)(`line`,{x1:`5`,y1:`12`,x2:`19`,y2:`12`})],-1)]],32),(0,t.createElementVNode)(`span`,He,(0,t.toDisplayString)(k.value.fontSize??(0,t.unref)(16)),1),(0,t.createElementVNode)(`button`,{class:`font-size-btn`,onMousedown:r[14]||=(0,t.withModifiers)(e=>V(1),[`stop`,`prevent`]),onTouchstart:r[15]||=(0,t.withModifiers)(e=>V(1),[`stop`,`prevent`])},[...r[39]||=[(0,t.createElementVNode)(`svg`,{width:`12`,height:`12`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`},[(0,t.createElementVNode)(`line`,{x1:`12`,y1:`5`,x2:`12`,y2:`19`}),(0,t.createElementVNode)(`line`,{x1:`5`,y1:`12`,x2:`19`,y2:`12`})],-1)]],32),r[43]||=(0,t.createElementVNode)(`div`,{class:`text-align-separator`},null,-1),(0,t.createElementVNode)(`button`,{class:(0,t.normalizeClass)([`text-align-btn`,{active:k.value.textAlign===`left`||!k.value.textAlign}]),title:(0,t.unref)(i)(`textAlign.left`),onMousedown:r[16]||=(0,t.withModifiers)(e=>H(`left`),[`stop`,`prevent`]),onTouchstart:r[17]||=(0,t.withModifiers)(e=>H(`left`),[`stop`,`prevent`])},[...r[40]||=[(0,t.createStaticVNode)(`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-975e0b8b><line x1="3" y1="6" x2="21" y2="6" data-v-975e0b8b></line><line x1="3" y1="10" x2="17" y2="10" data-v-975e0b8b></line><line x1="3" y1="14" x2="21" y2="14" data-v-975e0b8b></line><line x1="3" y1="18" x2="15" y2="18" data-v-975e0b8b></line></svg>`,1)]],42,Ue),(0,t.createElementVNode)(`button`,{class:(0,t.normalizeClass)([`text-align-btn`,{active:k.value.textAlign===`center`}]),title:(0,t.unref)(i)(`textAlign.center`),onMousedown:r[18]||=(0,t.withModifiers)(e=>H(`center`),[`stop`,`prevent`]),onTouchstart:r[19]||=(0,t.withModifiers)(e=>H(`center`),[`stop`,`prevent`])},[...r[41]||=[(0,t.createStaticVNode)(`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-975e0b8b><line x1="3" y1="6" x2="21" y2="6" data-v-975e0b8b></line><line x1="5" y1="10" x2="19" y2="10" data-v-975e0b8b></line><line x1="3" y1="14" x2="21" y2="14" data-v-975e0b8b></line><line x1="7" y1="18" x2="17" y2="18" data-v-975e0b8b></line></svg>`,1)]],42,We),(0,t.createElementVNode)(`button`,{class:(0,t.normalizeClass)([`text-align-btn`,{active:k.value.textAlign===`right`}]),title:(0,t.unref)(i)(`textAlign.right`),onMousedown:r[20]||=(0,t.withModifiers)(e=>H(`right`),[`stop`,`prevent`]),onTouchstart:r[21]||=(0,t.withModifiers)(e=>H(`right`),[`stop`,`prevent`])},[...r[42]||=[(0,t.createStaticVNode)(`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-975e0b8b><line x1="3" y1="6" x2="21" y2="6" data-v-975e0b8b></line><line x1="7" y1="10" x2="21" y2="10" data-v-975e0b8b></line><line x1="3" y1="14" x2="21" y2="14" data-v-975e0b8b></line><line x1="9" y1="18" x2="21" y2="18" data-v-975e0b8b></line></svg>`,1)]],42,Ge)],32)):(0,t.createCommentVNode)(``,!0)],32))}}),[[`__scopeId`,`data-v-975e0b8b`]]),qe={class:`palette-header`},Je={class:`palette-title`},Ye={class:`current-color`},Xe={key:0,width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`},Ze={class:`preset-grid`},Qe=[`title`,`onClick`],$e={key:0,class:`transparent-row`},et={class:`palette-footer`},tt={class:`custom-color`},nt=[`value`],rt={class:`custom-label`},it=q((0,t.defineComponent)({__name:`ColorPalette`,setup(e){let n=g(),{t:r}=s(),i=u(),a=(0,t.computed)(()=>{if(!i?.value)return{};let e=i.value.getBoundingClientRect();return{left:e.left+60+`px`,bottom:window.innerHeight-e.bottom+9+`px`,position:`fixed`}}),o=[`#000000`,`#ffffff`,`#6b7280`,`#d1d5db`,`#dc2626`,`#ef4444`,`#f97316`,`#f59e0b`,`#16a34a`,`#22c55e`,`#0891b2`,`#06b6d4`,`#2563eb`,`#3b82f6`,`#7c3aed`,`#8b5cf6`,`#db2777`,`#ec4899`,`#a16207`,`#84cc16`,`#0d9488`,`#6366f1`,`#d946ef`,`#f43f5e`];function c(e){let t=e.target;n.setColor(t.value)}function l(e){n.setColor(e),n.hideColorPalette()}function d(){n.setColor(`transparent`),n.hideColorPalette()}return(e,i)=>((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:`body`},[(0,t.unref)(n).showColorPalette?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:`overlay`,onClick:i[1]||=(...e)=>(0,t.unref)(n).hideColorPalette&&(0,t.unref)(n).hideColorPalette(...e)},[(0,t.createElementVNode)(`div`,{class:`color-palette`,style:(0,t.normalizeStyle)(a.value),onClick:i[0]||=(0,t.withModifiers)(()=>{},[`stop`])},[(0,t.createElementVNode)(`div`,qe,[(0,t.createElementVNode)(`span`,Je,(0,t.toDisplayString)((0,t.unref)(n).activeColorSlot===`textColor`?(0,t.unref)(r)(`color.textColor`):(0,t.unref)(n).activeColorSlot===`foreground`?(0,t.unref)(r)(`palette.stroke`):(0,t.unref)(r)(`palette.fill`)),1),(0,t.createElementVNode)(`div`,Ye,[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`current-swatch`,{fill:(0,t.unref)(n).activeColorSlot===`background`,"current-transparent":(0,t.unref)(n).activeColorSlot===`background`&&(0,t.unref)(n).backgroundColor===`transparent`}]),style:(0,t.normalizeStyle)({background:(0,t.unref)(n).activeColorSlot===`textColor`?(0,t.unref)(n).textColor:(0,t.unref)(n).activeColorSlot===`foreground`?(0,t.unref)(n).foregroundColor:(0,t.unref)(n).backgroundColor===`transparent`?`none`:(0,t.unref)(n).backgroundColor})},[(0,t.unref)(n).activeColorSlot===`background`&&(0,t.unref)(n).backgroundColor===`transparent`?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,Xe,[...i[2]||=[(0,t.createElementVNode)(`line`,{x1:`5`,y1:`5`,x2:`19`,y2:`19`},null,-1)]])):(0,t.createCommentVNode)(``,!0)],6)])]),(0,t.createElementVNode)(`div`,Ze,[((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(o,e=>(0,t.createElementVNode)(`button`,{key:e,class:`color-swatch`,style:(0,t.normalizeStyle)({background:e}),title:e,onClick:t=>l(e)},null,12,Qe)),64))]),(0,t.unref)(n).activeColorSlot===`background`?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,$e,[(0,t.createElementVNode)(`button`,{class:`color-swatch transparent-swatch`,title:`透明（无填充）`,onClick:d},[...i[3]||=[(0,t.createElementVNode)(`svg`,{width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,stroke:`#d00`,"stroke-width":`2`,"stroke-linecap":`round`},[(0,t.createElementVNode)(`line`,{x1:`5`,y1:`5`,x2:`19`,y2:`19`})],-1)]])])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`div`,et,[(0,t.createElementVNode)(`div`,tt,[(0,t.createElementVNode)(`input`,{type:`color`,value:(0,t.unref)(n).activeColorSlot===`textColor`?(0,t.unref)(n).textColor:(0,t.unref)(n).activeColorSlot===`foreground`?(0,t.unref)(n).foregroundColor:(0,t.unref)(n).backgroundColor===`transparent`?`#ffffff`:(0,t.unref)(n).backgroundColor,class:`color-picker`,onChange:c},null,40,nt),(0,t.createElementVNode)(`span`,rt,(0,t.toDisplayString)((0,t.unref)(r)(`palette.custom`)),1)])])],4)])):(0,t.createCommentVNode)(``,!0)]))}}),[[`__scopeId`,`data-v-a8b8bc9c`]]),at=q((0,t.defineComponent)({__name:`Painter`,props:{theme:{default:`light`},locale:{default:`zh-CN`},modelValue:{default:()=>({strokes:[],canvasWidth:800,canvasHeight:600})},width:{default:`100%`},height:{default:`100%`}},emits:[`update:modelValue`],setup(e,{emit:n}){let r=e,i=n,a=(0,t.computed)(()=>r.locale===`en-US`?`en-US`:`zh-CN`),s=(0,t.computed)(()=>{let e=e=>typeof e==`number`?`${e}px`:e;return{width:e(r.width),height:e(r.height)}});o(a.value);let c=(0,t.ref)(null);l(c);let u=g(),d=_();u.reset(),d.reset();let f=!1;function p(e){return e.map(e=>({...e,points:e.points.map(e=>({...e}))}))}(0,t.watch)(()=>r.theme,(e,t)=>{u.theme=e||`light`,e===`dark`&&u.foregroundColor===`#000000`?u.foregroundColor=`#ffffff`:e===`light`&&t===`dark`&&u.foregroundColor===`#ffffff`&&(u.foregroundColor=`#000000`)},{immediate:!0});let m=(0,t.computed)(()=>`wb-theme-${r.theme}`);u.setCanvasSize(r.modelValue.canvasWidth??800,r.modelValue.canvasHeight??600),r.modelValue.canvasBackgroundColor!=null&&u.setCanvasBackgroundColor(r.modelValue.canvasBackgroundColor),(0,t.watch)(()=>r.modelValue.canvasWidth,e=>{e!=null&&u.setCanvasSize(e,u.canvasHeight)}),(0,t.watch)(()=>r.modelValue.canvasHeight,e=>{e!=null&&u.setCanvasSize(u.canvasWidth,e)}),(0,t.watch)(()=>r.modelValue.strokes,e=>{f||u.syncFromParent(e)},{immediate:!0,deep:!0});function h(){f=!0,i(`update:modelValue`,{strokes:p(u.strokes),canvasWidth:u.canvasWidth,canvasHeight:u.canvasHeight,canvasBackgroundColor:u.canvasBackgroundColor}),setTimeout(()=>{f=!1},0)}return(0,t.watch)(()=>`${u.strokes.length}|${u.canvasWidth}|${u.canvasHeight}|${u.canvasBackgroundColor}|${u.dataVersion}`,()=>{h()}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`rootEl`,ref:c,class:(0,t.normalizeClass)([`wb-root`,m.value]),style:(0,t.normalizeStyle)(s.value)},[(0,t.createVNode)(J),(0,t.createVNode)(Ke),(0,t.createVNode)(it)],6))}}),[[`__scopeId`,`data-v-40d42bb5`]]);e.DEFAULT_CANVAS_HEIGHT=f,e.DEFAULT_CANVAS_WIDTH=d,e.DEFAULT_FONT_SIZE=m,e.HIT_THRESHOLD=h,e.Painter=at,e.default=at,e.STROKE_WIDTH=p});

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "xiaodao-painter",
+  "version": "0.1.6",
+  "description": "A Vue 3 component for drawing on the canvas",
+  "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "vue",
+    "canvas",
+    "drawing",
+    "painter"
+  ],
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/xiaodao-painter.umd.js",
+  "module": "./dist/xiaodao-painter.es.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/xiaodao-painter.es.js",
+      "require": "./dist/xiaodao-painter.umd.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./style.css": "./dist/xiaodao-painter.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && vue-tsc -p tsconfig.app.json",
+    "typecheck": "vue-tsc --noEmit",
+    "lint:check": "eslint .",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "pinia": "^2.0.0 || ^3.0.0 || ^4.0.0",
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^24.13.3",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/tsconfig": "^0.9.1",
+    "eslint": "^10.8.1",
+    "eslint-plugin-vue": "^10.10.0",
+    "globals": "^17.11.0",
+    "pinia": "^4.0.2",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.67.0",
+    "vite": "^8.2.0",
+    "vue": "^3.5.40",
+    "vue-eslint-parser": "^10.4.1",
+    "vue-tsc": "^3.3.8"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xiaodaozhi/xiaodao-painter.git"
+  }
+}