https://tools.cmdragon.cn/_nuxt/CHhYn0mn.js

1import{o as e,c as t,b as l,t as a,F as s,r,l as i,f as n,h as o,D as c,x as u,y as d,z as v,a7 as p,u as y,j as b,d as h,Z as m,p as x,v as g,m as k,$ as f,aE as w,ay as $}from"./CvqryXYF.js";const C={class:"w-64 bg-white dark:bg-slate-800 border-l border-slate-200 dark:border-slate-700 p-4"},F={key:0,class:"space-y-4"},E={class:"font-medium text-slate-900 dark:text-white"},M={class:"space-y-2"},I={class:"text-sm text-slate-600 dark:text-slate-400"},S=["value","onInput"],D=["value","onInput"],B=["value","min","max","step","onInput"],L={key:0,class:"space-y-2"},j={class:"text-sm text-slate-600 dark:text-slate-400"},A=["value","onInput"],P={key:1,class:"text-center text-slate-500 dark:text-slate-400"},U={__name:"PropertyPanel",props:{selectedElement:Object},emits:["update"],setup(n,{emit:o}){const c=n,u=o,d=[{id:"fill",type:"color",label:"Fill"},{id:"stroke",type:"color",label:"Stroke"},{id:"stroke-width",type:"number",label:"Stroke Width"},{id:"opacity",type:"range",label:"Opacity",min:0,max:1,step:.1}],v={rect:[{id:"x",type:"number",label:"X"},{id:"y",type:"number",label:"Y"},{id:"width",type:"number",label:"Width"},{id:"height",type:"number",label:"Height"},{id:"rx",type:"number",label:"Corner Radius X"},{id:"ry",type:"number",label:"Corner Radius Y"}],circle:[{id:"cx",type:"number",label:"Center X"},{id:"cy",type:"number",label:"Center Y"},{id:"r",type:"number",label:"Radius"}]},p=(e,t)=>{c.selectedElement&&u("update",{...c.selectedElement,[e]:t})};return(o,c)=>(e(),t("div",C,[n.selectedElement?(e(),t("div",F,[l("h2",E,a(o.$t("Properties")),1),l("div",M,[(e(),t(s,null,r(d,s=>l("div",{key:s.id,class:"flex items-center gap-2"}

1,[l("label",I,a(o.$t(s.label)),1),"color"===s.type?(e(),t("input",{key:0,type:"color",value:n.selectedElement[s.id],class:"w-8 h-8 rounded",onInput:e=>p(s.id,e.target.value)},null,40,S)):"number"===s.type?(e(),t("input",{key:1,type:"number",value:n.selectedElement[s.id],class:"w-20 px-2 py-1 border rounded",onInput:e=>p(s.id,Number(e.target.value))},null,40,D)):"range"===s.type?(e(),t("input",{key:2,type:"range",value:n.selectedElement[s.id],min:s.min,max:s.max,step:s.step,class:"w-full",onInput:e=>p(s.id,Number(e.target.value))},null,40,B)):i("",!0)])),64))]),v[n.selectedElement.type]?(e(),t("div",L,[(e(!0),t(s,null,r(v[n.selectedElement.type],s=>(e(),t("div",{key:s.id,class:"flex items-center gap-2"},[l("label",j,a(o.$t(s.label)),1),l("input",{type:"number",value:n.selectedElement[s.id],class:"w-20 px-2 py-1 border rounded",onInput:e=>p(s.id,Number(e.target.value))},null,40,A)]))),128))])):i("",!0)])):(e(),t("div",P,a(o.$t("No element selected")),1))]))}},V={class:"w-64 bg-white dark:bg-slate-800 border-l border-slate-200 dark:border-slate-700"},O={class:"p-4"},R={class:"font-medium text-slate-900 dark:text-white mb-4"},_={class:"mb-4 flex items-center justify-between border-b border-slate-200 dark:border-slate-700 pb-2"},G={class:"flex items-center space-x-1"},N=["title","aria-label"],T=["title","aria-label"],X=["title","aria-label"],z={class:"flex items-center space-x-1"},Y=["title","aria-label"],K=["title","aria-label"],H={class:"space-y-2"},W=["onDragstart","onDrop","onClick","onMouseenter"],Z={class:"flex-1 text-sm truncate"},q={class:"flex items-center space-x-1"},J=["aria-label","onClick"],Q=["aria-label","onClick"],ee={__name:"LayerPanel",props:{elements:Array,selectedIds:Array},emits:["select","reorder","visibility","lock","action","hover"],setup(i,{emit:d}){const v=d;return(d,p)=>{const y=o;return e(),t("div",V,[l("div",O,[l("h2",R,a(d.$t("Layers")),1),l("div",_,[l("div",G,[l("button",{type:"button",class:"p-1.5 hover:bg-slate-100 dark:hover:bg-slate-700 rounded",title:`${d.$t("Copy")} (⌘C)`,"aria-label":d.$t("Copy"),onClick:p[0]||(p[0]=e=>v("action","copy"))},[n(y,{name:"material-symbols:content-copy",class:"w-4 h-4"})],8,N),l("button",{type:"button",class:"p-1.5 hover:bg-slate-100 dark:hover:bg-slate-700 rounded",title:`${d.$t("Paste")} (⌘V)`,"aria-label":d.$t("Paste"),onClick:p[1]||(p[1]=e=>v("action","paste"))},[n(y,{name:"material-symbols:content-paste",class:"w-4 h-4"})],8,T),l("button",{type:"button",class:"p-1.5 hover:bg-red-100 dark:hover:bg-red-900/30 rounded text-red-600",title:`${d.$t("Delete")} (⌫)`,"aria-label":d.$t("Delete"),onClick:p[2]||(p[2]=e=>v("action","delete"))},[n(y,{name:"material-symbols:delete",class:"w-4 h-4"})],8,X)]),l("div",z,[l("button",{type:"button",class:"p-1.5 hover:bg-slate-100 dark:hover:bg-slate-700 rounded",title:`${d.$t("Bring Forward")} (⌘])`,"aria-label":d.$t("Bring Forward"),onClick:p[3]||(p[3]=e=>v("action","bringForward"))},[n(y,{name:"material-symbols:arrow-upward",class:"w-4 h-4"})],8,Y),l("button",{type:"button",class:"p-1.5 hover:bg-slate-100 dark:hover:bg-slate-700 rounded",title:`${d.$t("Send Backward")} (⌘[)`,"aria-label":d.$t("Send Backward"),onClick:p[4]||(p[4]=e=>v("action","sendBackward"))},[n(y,{name:"material-symbols:arrow-downward",class:"w-4 h-4"})],8,K)])]),l("div",H,[(e(!0),t(s,null,r(i.elements||[],s=>{return e(),t("div",{key:s.id,class:u(["flex items-center p-2 rounded hover:bg-slate-50 dark:hover:bg-slate-700",{"bg-primary-50 dark:bg-primary-900/50":i.selectedIds?.includes(s.id),"ring-2 ring-primary-500":i.selectedIds?.includes(s.id)}]),draggable:"true",onDragstart:e=>{return t=e,l=s.id,void t.dataTransfer.setData("text/plain",l);var t,l},onDragover:p[5]||(p[5]=c(()=>{},["prevent"])),onDrop:e=>((e,t)=>{const l=e.dataTransfer.getData("text/plain");v("reorder",{sourceId:l,targetId:t})})(e,s.id),onClick:e=>v("select",s),onMouseenter:e=>v("hover",s),onMouseleave:p[6]||(p[6]=e=>v("hover",null))},[n(y,{name:(r=s.type,{rect:"material-symbols:rectangle",circle:"material-symbols:circle",ellipse:"material-symbols:ellipse",line:"material-symbols:remove",path:"material-symbols:edit",text:"material-symbols:title",image:"material-symbols:image"}[r]||"material-symbols:rectangle"),class:"w-5 h-5 mr-2"},null,8,["name"]),l("span",Z,a(s.name||`${d.$t(s.type)} ${s.id.slice(-4)}`),1),l("div",q,[l("button",{type:"button",class:"p-1 hover:bg-slate-200 dark:hover:bg-slate-600 rounded","aria-label":s.visible?d.$t("Hide layer"):d.$t("Show layer"),onClick:c(e=>{return t=s.id,void v("visibility",t);var t},["stop"])},[n(y,{name:s.visible?"material-symbols:visibility":"material-symbols:visibility-off",class:u(["w-4 h-4",s.visible?"text-primary-600":"text-slate-400"])},null,8,["name","class"])],8,J),l("button",{type:"button",class:"p-1 hover:bg-slate-200 dark:hover:bg-slate-600 rounded","aria-label":s.locked?d.$t("Unlock layer"):d.$t("Lock layer"),onClick:c(e=>{return t=s.id,void v("lock",t);var t},["stop"])},[n(y,{name:s.locked?"material-symbols:lock":"material-symbols:lock-open",class:u(["w-4 h-4",s.locked?"text-primary-600":"text-slate-400"])},null,8,["name","class"])],8,Q)])],42,W);var r}),128))])])])}}},te=["d"],le=["onMousedown"],ae=["cx","cy","onClick"],se=["x1","y1","x2","y2"],re=["cx","cy"],ie=["x1","y1","x2","y2"],ne=["cx","cy"],oe={__name:"PathEditor",props:{path:String,selected:Boolean},emits:["update","select"],setup(a){const n=a,o=v(()=>parseSvgPath(n.path)),c=d(null);return(n,d)=>(e(),t("g",null,[l("path",{d:a.path,class:u({"stroke-primary-500":a.selected,"stroke-slate-400":!a.selected}),fill:"none","stroke-width":"2"},null,10,te),a.selected?(e(!0),t(s,{key:0},r(o.value,a=>(e(),t("g",{key:a.id,onMousedown:e=>((e,t)=>{const{x:l,y:a}=getMousePosition(t);updateNodePosition(e,l,a)})(a,e)},[l("circle",{cx:a.x,cy:a.y,r:"4",class:u(["fill-white stroke-primary-500",{"ring-2":a===c.value}]),onClick:e=>c.value=a},null,10,ae),"curve"===a.type?(e(),t(s,{key:0},[l("line",{x1:a.x,y1:a.y,x2:a.cp1x,y2:a.cp1y,class:"stroke-slate-300"},null,8,se),l("circle",{cx:a.cp1x,cy:a.cp1y,r:"3",class:"fill-slate-300"},null,8,re),l("line",{x1:a.x,y1:a.y,x2:a.cp2x,y2:a.cp2y,class:"stroke-slate-300"},null,8,ie),l("circle",{cx:a.cp2x,cy:a.cp2y,r:"3",class:"fill-slate-300"},null,8,ne)],64)):i("",!0)],40,le))),128)):i("",!0)]))}},ce={key:0},ue=["x","y","width","height"],de=["cx","cy","onMousedown"],ve=["cx","cy"],pe={__name:"TransformBox",props:{element:Object,selected:Boolean},emits:["update"],setup(a){const n=a,o=d(!1),c=d(null),u=d(null),p=v(()=>calculateBBox(n.element)),y=v(()=>({topLeft:{x:p.value.x,y:p.value.y},topRight:{x:p.value.x+p.value.width,y:p.value.y},bottomLeft:{x:p.value.x,y:p.value.y+p.value.height},bottomRight:{x:p.value.x+p.value.width,y:p.value.y+p.value.height},center:{x:p.value.x+p.value.width/2,y:p.value.y+p.value.height/2}})),b=e=>{o.value=!0,c.value=getMousePosition(e),u.value={...n.element.transform}};return(n,o)=>a.selected?(e(),t("g",ce,[l("rect",{x:p.value.x,y:p.value.y,width:p.value.width,height:p.value.height,fill:"none",stroke:"#4F46E5","stroke-width":"1","stroke-dasharray":"4 4"},null,8,ue),(e(!0),t(s,null,r(y.value,(l,a)=>(e(),t("circle",{key:a,cx:l.x,cy:l.y,r:"4",class:"fill-white stroke-primary-500 cursor-pointer",onMousedown:e=>b(e)},null,40,de))),128)),l("circle",{cx:y.value.center.x,cy:y.value.center.y-20,r:"4",class:"fill-white stroke-primary-500 cursor-pointer",onMousedown:o[0]||(o[0]=e=>b(e))}

1,null,40,ve)])):i("",!0)}},ye={class:"flex flex-col h-full"},be={class:"bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 p-4"},he={class:"flex items-center justify-between"},me={class:"flex items-center space-x-4"},xe={class:"flex items-center space-x-2"},ge=["aria-label"],ke=["aria-label"],fe={class:"flex items-center space-x-2"},we=["aria-label"],$e=["aria-label"],Ce={class:"flex items-center space-x-2"},Fe=["aria-label","disabled"],Ee=["aria-label","disabled"],Me={class:"flex items-center space-x-4"},Ie={class:"flex items-center space-x-2"},Se=["aria-label"],De=["aria-label"],Be={class:"flex items-center space-x-2"},Le=["aria-label"],je={class:"text-sm text-slate-600 dark:text-slate-400"},Ae=["aria-label"],Pe={class:"flex-1 flex h-full"},Ue={key:0,class:"flex-1 relative overflow-auto bg-slate-100 dark:bg-slate-900"},Ve=["width","height"],Oe={key:0},Re=["x","y","width","height","stroke"],_e=["x","y","width","fill"],Ge=["x","y"],Ne=["width","height"],Te={key:1,class:"flex-1 p-4"},Xe=p({__name:"SvgEditorApp",setup(v){const{t:p}=y(),{toast:C}=f(),F=d("visual"),E=d(""),M=d([]),I=d({width:800,height:600}),S=d(!0),D=d(!0),B=d(100),L=d(!0),j=d(null),A=d(null),P=d([]),V=d(null),O=d("transparent"),R=d([]),_=d([]),G=()=>{R.value.push({code:E.value,timestamp:Date.now()}),R.value.length>50&&R.value.shift(),_.value=[]},N=()=>{if(0===R.value.length)return;const e={code:E.value,timestamp:Date.now()};_.value.push(e);const t=R.value.pop();E.value=t.code},T=()=>{if(0===_.value.length)return;const e={code:E.value,timestamp:Date.now()};R.value.push(e);const t=_.value.pop();E.value=t.code},X=()=>{try{Q();const e=new Blob([E.value],{type:"image/svg+xml"}),t=URL.createObjectURL(e),l=document.createElement("a");l.href=t,l.download="exported.svg",l.click(),URL.revokeObjectURL(t),C.success(p("SVG exported successfully"))}catch(e){C.error(p("Failed to export SVG"))}},z=()=>{S.value=!S.value},Y=()=>{D.value=!D.value},K=e=>{const t=B.value+e;t>=25&&t<=400&&(B.value=t)},H=d("select"),W=e=>{if(["select","rect","circle","path","text","image"].includes(e))return H.value=e,void("select"!==e&&(M.value=[]));switch(e){case"copy":M.value.length>0&&(j.value=[...M.value],C.success(p("Copied")));break;case"paste":if(j.value?.length>0){const e=j.value.map(e=>({...e,id:`el-${Date.now()}-${Math.random().toString(36).substr(2,9)}`,x:(parseFloat(e.x)||0)+20,y:(parseFloat(e.y)||0)+20}));P.value.push(...e),M.value=e,Q(),C.success(p("Pasted"))}break;case"delete":M.value.length>0&&(Z(),C.success(p("Deleted")));break;case"group":if(M.value.length>1){const e={id:`group-${Date.now()}`,type:"g",children:M.value,visible:!0,locked:!1};P.value=P.value.filter(e=>!M.value.includes(e)),P.value.push(e),M.value=[e],Q(),C.success(p("Grouped"))}break;case"ungroup":if(1===M.value.length&&"g"===M.value[0].type){const e=M.value[0];P.value=P.value.filter(t=>t.id!==e.id),P.value.push(...e.children),M.value=e.children,Q(),C.success(p("Ungrouped"))}break;case"bringForward":M.value.length>0&&(M.value.forEach(e=>{const t=P.value.indexOf(e);t<P.value.length-1&&(P.value.splice(t,1),P.value.splice(t+1,0,e))}),Q());break;case"sendBackward":M.value.length>0&&(M.value.forEach(e=>{const t=P.value.indexOf(e);t>0&&(P.value.splice(t,1),P.value.splice(t-1,0,e))}),Q())}},Z=()=>{if(M.value.length>0){const e=P.value.filter(e=>!M.value.includes(e));P.value=e,M.value=[],Q(),C.success(p("Deleted"))}},q=(e,t={})=>{const l={id:`el-${Date.now()}`,type:e,...J(e),...t};P.value.push(l),Q()},J=e=>{const t={fill:"none",stroke:"#000000","stroke-width":1,opacity:1};switch(e){case"rect":return{...t,x:10,y:10,width:100,height:100,rx:0,ry:0};case"circle":return{...t,cx:50,cy:50,r:40}}},Q=()=>{const e=`<svg\n    width="${I.value.width}"\n    height="${I.value.height}"\n    viewBox="0 0 ${I.value.width} ${I.value.height}"\n    xmlns="http://www.w3.org/2000/svg"\n  >`,t=P.value.map(e=>{if(!e.visible)return"";const t=Object.entries(e).filter(([e,t])=>!["id","type","visible","locked","name"].includes(e)&&void 0!==t&&""!==t).map(([e,t])=>("fill"===e||"stroke"===e)&&"none"===t?`${e}="none"`:`${e}="${t}"`).join(" ");switch(e.type){case"g":return`<g ${t}>${e.children?.map(e=>te(e)).join("")||""}</g>`;case"text":return`<text ${t}>${e.content||""}</text>`;default:return`<${e.type} ${t} />`}}).join("\n    ");E.value=`${e}\n    ${t}\n  </svg>`},te=e=>{if(!e.visible)return"";const t=Object.entries(e).filter(([e,t])=>!["id","type","visible","locked","name"].includes(e)&&void 0!==t&&""!==t).map(([e,t])=>("fill"===e||"stroke"===e)&&"none"===t?`${e}="none"`:`${e}="${t}"`).join(" ");switch(e.type){case"g":return`<g ${t}>${e.children?.map(e=>te(e)).join("")||""}</g>`;case"text":return`<text ${t}>${e.content||""}</text>`;default:return`<${e.type} ${t} />`}},le=e=>{const t=P.value.findIndex(t=>t.id===e.id);if(t>-1){const l={...P.value[t],...e,x:parseFloat(e.x||P.value[t].x||0),y:parseFloat(e.y||P.value[t].y||0),width:parseFloat(e.width||P.value[t].width||0),height:parseFloat(e.height||P.value[t].height||0),r:parseFloat(e.r||P.value[t].r||0),cx:parseFloat(e.cx||P.value[t].cx||0),cy:parseFloat(e.cy||P.value[t].cy||0),"stroke-width":parseFloat(e["stroke-width"]||P.value[t]["stroke-width"]||1)};P.value.splice(t,1,l),Q()}},ae=e=>{const t=P.value.find(t=>

1t.id===e);t&&(t.visible=!t.visible,Q())},se=e=>{const t=P.value.find(t=>t.id===e);t&&(t.locked=!t.locked,Q())},re=({sourceId:e,targetId:t})=>{const l=P.value.findIndex(t=>t.id===e),a=P.value.findIndex(e=>e.id===t);if(l>-1&&a>-1){const[e]=P.value.splice(l,1);P.value.splice(a,0,e),Q()}},ie=e=>{if(A.value){const t=P.value.find(e=>e.id===A.value);t&&(t.d=e,Q())}},ne=e=>{const t=P.value.findIndex(t=>t.id===e.id);t>-1&&(P.value[t]=e,Q())},ce=e=>{if(e&&!e.locked)if(event?.shiftKey){const t=M.value.findIndex(t=>t.id===e.id);t>-1?M.value.splice(t,1):M.value.push(e)}else M.value=[e]},ue=e=>{if(!e)return{x:0,y:0,width:0,height:0};let t;switch(e.type){case"circle":{const t=parseFloat(e.r)||0;return{x:(parseFloat(e.cx)||0)-t,y:(parseFloat(e.cy)||0)-t,width:2*t,height:2*t}}case"rect":return{x:parseFloat(e.x)||0,y:parseFloat(e.y)||0,width:parseFloat(e.width)||0,height:parseFloat(e.height)||0};case"path":{const l=document.createElementNS("http://www.w3.org/2000/svg","path");return l.setAttribute("d",e.d),document.body.appendChild(l),t=l.getBBox(),document.body.removeChild(l),t}default:return{x:parseFloat(e.x)||0,y:parseFloat(e.y)||0,width:100,height:100}}},de=e=>{if("select"!==H.value){const t=ve(e);switch(H.value){case"rect":q("rect",{x:t.x,y:t.y,width:100,height:100,fill:"#4F46E5"});break;case"circle":q("circle",{cx:t.x,cy:t.y,r:50,fill:"#4F46E5"});break;case"text":q("text",{x:t.x,y:t.y,"font-size":"24",fill:"#000000",content:"Double click to edit"})}}},ve=e=>{const t=e.target.getBoundingClientRect();return{x:(e.clientX-t.left)*(100/B.value),y:(e.clientY-t.top)*(100/B.value)}};return b(()=>{E.value='<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">\n  \x3c!-- 在此编辑 SVG --\x3e\n</svg>',G(),document.addEventListener("keydown",e=>{if(e.metaKey||e.ctrlKey)switch(e.key.toLowerCase()){case"c":W("copy");break;case"v":W("paste");break;case"g":e.shiftKey?W("ungroup"):W("group");break;case"[":W("sendBackward");break;case"]":W("bringForward")}else"Delete"!==e.key&&"Backspace"!==e.key||W("delete")}),document.addEventListener("keydown",e=>{"Delete"!==e.key&&"Backspace"!==e.key||"INPUT"!==e.target.tagName&&"TEXTAREA"!==e.target.tagName&&(e.preventDefault(),Z())})}),(d,v)=>{const y=o;return e(),t("div",ye,[l("div",be,[l("div",he,[l("div",me,[l("div",xe,[l("button",{class:"btn-secondary",type:"button","aria-label":h(p)("Import SVG"),onClick:v[0]||(v[0]=e=>d.$refs.fileInput.click())},a(h(p)("Import SVG")),9,ge),l("input",{ref:"fileInput",type:"file",accept:".svg",class:"hidden",onChange:v[1]||(v[1]=e=>(async e=>{try{const t=await e.text(),l=(new DOMParser).parseFromString(t,"image/svg+xml").documentElement,a=l.getAttribute("width"),s=l.getAttribute("height"),r=l.getAttribute("viewBox");let i=0,n=0,o=800,c=600;r&&([i,n,o,c]=r.split(" ").map(Number));let u=800,d=600,v=1;if(a&&s){const e=parseFloat(a),t=parseFloat(s);v=Math.min(u/e,d/t),u=e,d=t}else v=Math.min(u/o,d/c),u=o,d=c;I.value={width:u,height:d},E.value=t;const y=[];l.querySelectorAll("*").forEach(e=>{if("svg"!==e.tagName){const t={};for(const l of e.attributes){const e=l.name;let a=l.value;"style"!==e?(["width","height","x","y","cx","cy","r","rx","ry"].includes(e)&&(a=parseFloat(a),["x","cx"].includes(e)&&(a-=i),["y","cy"].includes(e)&&(a-=n)),"d"!==e?t[e]=a:t.d=a):a.split(";").filter(Boolean).forEach(e=>{const[l,a]=e.split(":").map(e=>e.trim());t[l]=a})}e.classList.length&&(t.class=Array.from(e.classList).join(" ")),y.push({id:`el-${Date.now()}-${Math.random().toString(36).substr(2,9)}`,type:e.tagName.toLowerCase(),...t,visible:!0,locked:!1,transform:e.getAttribute("transform")||""})}}),P.value=y,B.value=Math.round(100*v),G(),C.success(p("SVG imported successfully"))}catch(t){C.error(p("Failed to import SVG"))}})(e.target.files[0]))},null,544),l("button",{class:"btn-secondary",type:"button","aria-label":h(p)("Export SVG"),onClick:X},a(h(p)("Export SVG")),9,ke)]),l("div",fe,[l("button",{class:u(["btn-secondary",{"bg-primary-50":"visual"===F.value}]),type:"button","aria-label":h(p)("Visual Mode"),onClick:v[2]||(v[2]=e=>F.value="visual")},a(h(p)("Visual Mode")),11,we),l("button",{class:u(["btn-secondary",{"bg-primary-50":"co

1de"===F.value}]),type:"button","aria-label":h(p)("Code Mode"),onClick:v[3]||(v[3]=e=>F.value="code")},a(h(p)("Code Mode")),11,$e)]),l("div",Ce,[l("button",{class:"btn-icon",type:"button","aria-label":h(p)("Undo"),disabled:0===R.value.length,onClick:N},[n(y,{name:"material-symbols:undo"})],8,Fe),l("button",{class:"btn-icon",type:"button","aria-label":h(p)("Redo"),disabled:0===_.value.length,onClick:T},[n(y,{name:"material-symbols:redo"})],8,Ee)])]),l("div",Me,[l("div",Ie,[l("button",{class:u(["btn-icon",{"bg-primary-50":S.value}]),type:"button","aria-label":h(p)("Toggle Grid"),onClick:z},[n(y,{name:"material-symbols:view-module"})],10,Se),l("button",{class:u(["btn-icon",{"bg-primary-50":D.value}]),type:"button","aria-label":h(p)("Toggle Snap to Grid"),onClick:Y},[n(y,{name:"material-symbols:add-box"})],10,De)]),l("div",Be,[l("button",{class:"btn-icon",type:"button","aria-label":h(p)("Zoom Out"),onClick:v[4]||(v[4]=e=>K(-25))},[n(y,{name:"material-symbols:remove"})],8,Le),l("span",je,a(B.value)+"% ",1),l("button",{class:"btn-icon",type:"button","aria-label":h(p)("Zoom In"),onClick:v[5]||(v[5]=e=>K(25))},[n(y,{name:"material-symbols:add"})],8,Ae)])])])]),l("div",Pe,["visual"===F.value?(e(),t("div",Ue,[S.value?(e(),t("div",{key:0,class:"absolute inset-0",style:m({backgroundImage:"linear-gradient(to right, #ccc 1px, transparent 1px), linear-gradient(to bottom, #ccc 1px, transparent 1px)",backgroundSize:"20px 20px"})},null,4)):i("",!0),l("div",{class:"relative",style:m({width:`${I.value.width}px`,height:`${I.value.height}px`,backgroundColor:O.value,transform:`scale(${B.value/100})`,transformOrigin:"0 0"})},[l("div",{class:"absolute inset-0",style:m({transform:`scale(${100/B.value})`,transformOrigin:"0 0"})},[(e(),t("svg",{width:I.value.width,height:I.value.height,class:"absolute inset-0 pointer-events-none"},[(e(!0),t(s,null,r(P.value,r=>(e(),t(s,{key:`highlight-${r.id}`},[M.value.includes(r)||V.value===r?(e(),t("g",Oe,[l("rect",{x:ue(r).x-4,y:ue(r).y-4,width:ue(r).width+8,height:ue(r).height+8,fill:"none",stroke:M.value.includes(r)?"#4F46E5":"#94A3B8","stroke-width":"1","stroke-dasharray":"4 4",rx:"2"},null,8,Re),l("g",null,[l("rect",{x:ue(r).x,y:ue(r).y-24,rx:2,width:Math.min(120,ue(r).width),height:"20",fill:M.value.includes(r)?"#4F46E5":"#94A3B8","fill-opacity":"0.9"},null,8,_e),l("text",{x:ue(r).x+6,y:ue(r).y-10,fill:"white","font-size":"12",class:"select-none"},a(r.name||`${h(p)(r.type)} ${r.id.slice(-4)}`),9,Ge)])])):i("",!0)],64))),128))],8,Ve))],4),(e(),t("svg",{width:I.value.width,height:I.value.height,onMousedown:de,onMousemove:v[7]||(v[7]=(...e)=>d.handleCanvasMouseMove&&d.handleCanvasMouseMove(...e)),onMouseup:v[8]||(v[8]=(...e)=>d.handleCanvasMouseUp&&d.handleCanvasMouseUp(...e))},[(e(!0),t(s,null,r(P.value,l=>(e(),t(s,{key:l.id},[l.visible?(e(),k($(l.type),w({key:0,ref_for:!0},l,{style:{fill:l.fill||("path"===l.type?"none":"#000"),stroke:l.stroke||("path"===l.type?"#000":"none"),strokeWidth:`${l["stroke-width"]||1}px`,transform:l.transform,transition:"all 0.15s cubic-bezier(0.4, 0, 0.2, 1)",animation:M.value.includes(l)?"pulse 1.5s infinite":V.value===l?"flash 0.4s cubic-bezier(0.4, 0, 0.2, 1)":"none"},class:{"cursor-move":!l.locked,"cursor-not-allowed":l.locked},onClick:e=>ce(l),onMousedown:c(e=>((e,t)=>{if(!e.locked){const l=t.clientX,a=t.clientY,s={x:parseFloat(e.x||0),y:parseFloat(e.y||0)},r=t=>{const r=(t.clientX-l)*(100/B.value),i=(t.clientY-a)*(100/B.value);e.x=s.x+r,e.y=s.y+i,Q()},i=()=>{document.removeEventListener("mousemove",r),document.removeEventListener("mouseup",i)};document.addEventListener("mousemove",r),document.addEventListener("mouseup",i)}})(l,e),["stop"]),onMouseover:e=>V.value=l,onMouseout:v[6]||(v[6]=e=>V.value=null)}),null,16,["style","class","onClick","onMousedown","onMouseover"])):i("",!0),"path"===l.type&&l.visible?(e(),k(oe,{key:1,path:l.d,selected:A.value===l.id,onUpdate:ie,onSelect:e=>A.value=l.id},null,8,["path","selected","onSelect"])):i("",!0),M.value.includes(l)&&!l.locked?(e(),k(pe,{key:2,element:l,onUpdate:ne},null,8,["element"])):i("",!0)],64))),128))],40,Ne))],4)])):(e(),t("div",Te,[x(l("textarea",{"onUpdate:modelValue":v[9]||(v[9]=e=>E.value=e),class:"w-full h-full font-mono text-sm p-4 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg",onInput:G},null,544),[[g,E.value]])])),n(U,{"selected-element":M.value[0],onUpdate:le},null,8,["selected-element"]),L.value?(e(),k(ee,{key:2,elements:P.value,"selected-ids":M.value.map(e=>e.id),onSelect:v[10]||(v[10]=e=>ce(e)),onReorder:re,onVisibility:ae,onLock:se,onHover:v[11]||(v[11]=e=>V.value=e),onAction:W,onDelete:v[12]||(v[12]=e=>{if(!P.value.value)return;P.value.value.find(t=>

1t.id===e)&&(M.value.value=M.value.value.filter(t=>t.id!==e),P.value.value=P.value.value.filter(t=>t.id!==e),Q(),h(C).success(h(p)("Deleted")))})},null,8,["elements","selected-ids"])):i("",!0)])])}}},[["__scopeId","data-v-d8b3d409"]]);export{Xe as default};