CoolFace
Apppublic

admin08077/Githubgemini

sourceHugging Faceotherupdated 10mo agoView on Hugging Face
0likes
SvgPathEditor-CNIEkpCa.js5 linesDownload Raw Back to assets
1import{r as u,j as e}from"./react-DKy9e2uO.js";import{i as y,A as N}from"./index-Ck8YGBbR.js";import{d as P}from"./fileUtils-Bw7t6Hrv.js";import"./bottleneck-Cpj98o6Y.js";import"./react-dom-CpxHE_eW.js";import"./scheduler-DYLXRpC5.js";import"./idb-Dob3nYDb.js";import"./@google-D80DdW2m.js";import"./marked-CesSW9Du.js";import"./jszip-s56H2EZ-.js";const M="M 20 80 Q 100 20 180 80 T 340 80",k=o=>(o.match(/[a-df-z][^a-df-z]*/ig)||[]).map((s,d)=>{const c=s[0],a=s.slice(1).trim().split(/[\s,]+/).map(parseFloat).filter(r=>!isNaN(r)),m=[];for(let r=0;r<a.length;r+=2)m.push({x:a[r],y:a[r+1]});return{id:d,command:c,points:m}}),C=o=>o.map(i=>`${i.command} ${i.points.map(s=>`${s.x} ${s.y}`).join(" ")}`).join(" "),G=()=>{const[o,i]=u.useState(M),s=u.useRef(null),[d,c]=u.useState(null),a=k(o),m=(t,n,l)=>{t.stopPropagation(),c({cmdIndex:n,pointIndex:l})},r=t=>{var p;if(!d||!s.current)return;const l=new DOMPoint(t.clientX,t.clientY).matrixTransform((p=s.current.getScreenCTM())==null?void 0:p.inverse()),x=a.map((h,v)=>{if(v===d.cmdIndex){const w=h.points.map((b,j)=>j===d.pointIndex?{x:Math.round(l.x),y:Math.round(l.y)}:b);return{...h,points:w}}return h});i(C(x))},f=()=>c(null),g=()=>{const t=`<svg viewBox="0 0 400 160" xmlns="http://www.w3.org/2000/svg">2  <path d="${o}" stroke="black" fill="transparent" stroke-width="2"/>3</svg>`;P(t,"path.svg","image/svg+xml")};return e.jsxs("div",{className:"h-full flex flex-col p-4 sm:p-6 lg:p-8 text-text-primary",children:[e.jsxs("header",{className:"mb-6",children:[e.jsxs("h1",{className:"text-3xl font-bold flex items-center",children:[e.jsx(y,{}),e.jsx("span",{className:"ml-3",children:"SVG Path Editor"})]}),e.jsx("p",{className:"text-text-secondary mt-1",children:"Visually create and manipulate SVG path data by dragging points."})]}),e.jsxs("div",{className:"flex-grow grid grid-cols-1 lg:grid-cols-2 gap-6 h-full overflow-hidden",children:[e.jsxs("div",{className:"flex flex-col h-full overflow-y-auto",children:[e.jsxs("div",{className:"flex justify-between items-center mb-2",children:[e.jsx("label",{htmlFor:"path-input",className:"text-sm font-medium text-text-secondary",children:"Path Data (d attribute)"}),e.jsxs("button",{onClick:g,className:"flex items-center gap-1 px-3 py-1 bg-gray-100 text-xs rounded-md hover:bg-gray-200",children:[e.jsx(N,{className:"w-4 h-4"})," Download SVG"]})]}),e.jsx("textarea",{id:"path-input",value:o,onChange:t=>i(t.target.value),className:"h-24 p-4 bg-surface border border-border rounded-md resize-y font-mono text-sm text-primary"}),e.jsx("div",{className:"flex-grow mt-4 p-4 bg-surface border-2 border-dashed border-border rounded-md overflow-hidden flex items-center justify-center min-h-[200px]",children:e.jsxs("svg",{ref:s,viewBox:"0 0 400 160",className:"w-full h-full cursor-crosshair",onMouseMove:r,onMouseUp:f,onMouseLeave:f,children:[e.jsx("rect",{width:"400",height:"160",fill:"var(--color-background)"}),e.jsx("path",{d:o,stroke:"var(--color-primary)",fill:"transparent",strokeWidth:"2"}),a.flatMap((t,n)=>t.points.map((l,x)=>e.jsx("circle",{cx:l.x,cy:l.y,r:"5",fill:t.command.toLowerCase()==="c"||t.command.toLowerCase()==="q"||t.command.toLowerCase()==="s"||t.command.toLowerCase()==="t"?"#fde047":"#f87171",stroke:"var(--color-surface)",strokeWidth:"2",className:"cursor-move hover:stroke-white",onMouseDown:p=>m(p,n,x)},`${t.id}-${x}`)))]})})]}),e.jsxs("div",{className:"flex flex-col h-full",children:[e.jsx("label",{className:"text-sm font-medium text-text-secondary mb-2",children:"Parsed Commands"}),e.jsx("div",{className:"flex-grow p-2 bg-background border border-border rounded-md overflow-y-auto font-mono text-xs space-y-2",children:a.map(t=>e.jsxs("div",{className:"p-2 bg-surface rounded",children:[e.jsx("span",{className:"font-bold text-amber-600",children:t.command}),e.jsxs("span",{className:"text-text-secondary",children:[" ",t.points.map(n=>`(${n.x},${n.y})`).join(" ")]})]},t.id))})]})]})]})};export{G as SvgPathEditor};4//# sourceMappingURL=SvgPathEditor-CNIEkpCa.js.map5