CoolFace
Apppublic

admin08077/Githubgemini

sourceHugging Faceotherupdated 10mo agoView on Hugging Face
0likes
SvgPathEditor-BK1SMCC-.js5 linesDownload Raw Back to assets
1import{r as h,j as t}from"./react-CIdJ77ke.js";import{O as y,J as N}from"./index-CX7Qxd1D.js";import{d as P}from"./fileUtils-DLahR3l0.js";import"./@braintree-DzxiOROe.js";import"./react-dom-R9L8nDNe.js";import"./scheduler-CoSDG3-6.js";import"./@google-CcUHq7Ay.js";import"./idb-Dob3nYDb.js";import"./marked-BrGMJkBT.js";import"./mermaid-KwKZWwy0.js";import"./dayjs-CeEF-NGT.js";import"./d3-transition-CiCB8KJE.js";import"./d3-timer-DdKHrDhs.js";import"./d3-dispatch-kxCwF96_.js";import"./d3-interpolate-CtIaNujU.js";import"./d3-color-amxIadob.js";import"./d3-selection-C52G7wmG.js";import"./d3-ease-DRPgKoYJ.js";import"./d3-zoom-BYoC3mS3.js";import"./dompurify-J5RlrwSC.js";import"./dagre-d3-es-CTpFWynZ.js";import"./lodash-es-Dt6r0yiR.js";import"./d3-shape-CX8xTzfR.js";import"./d3-path-CimkQT29.js";import"./d3-fetch-BOsq7VnW.js";import"./khroma-DUX6PT6k.js";import"./uuid-DhYbOkY1.js";import"./d3-scale-DRZz3QW5.js";import"./internmap-BkD7Hj8s.js";import"./d3-array-DGRYoJHh.js";import"./d3-format-CzD4bSOQ.js";import"./d3-time-format-CUNN4Ell.js";import"./d3-time-6cSPyVSY.js";import"./d3-axis-DSWTncID.js";import"./elkjs-oKFFZvz7.js";import"./cytoscape-DtBltrT8.js";import"./cytoscape-cose-bilkent-Cgr1thlj.js";import"./cose-base-CwCxnKwh.js";import"./layout-base-CMXQqlmj.js";import"./d3-sankey-DgqkLiUE.js";import"./d3-scale-chromatic-B-NsZVaP.js";import"./ts-dedent-DrFu-skq.js";import"./stylis-D5iaQeiq.js";import"./mdast-util-from-markdown-CLAsVoWb.js";import"./micromark-CTBPIv-_.js";import"./micromark-util-combine-extensions-Bka6Sc1c.js";import"./micromark-util-chunked-DrRIdSP-.js";import"./micromark-factory-space-x2vfxbz5.js";import"./micromark-util-character-Bcm1tP9o.js";import"./micromark-core-commonmark-AH8VCgT7.js";import"./micromark-util-classify-character-Cq7Fg3xE.js";import"./micromark-util-resolve-all-PQCKh0dx.js";import"./decode-named-character-reference-C3-224fz.js";import"./micromark-util-subtokenize-QwsxNXk2.js";import"./micromark-factory-destination-CypD_wgM.js";import"./micromark-factory-label-CRHH4ZHP.js";import"./micromark-factory-title-B7kCBvC9.js";import"./micromark-factory-whitespace-B322EA6O.js";import"./micromark-util-normalize-identifier-C9ANKk3v.js";import"./micromark-util-html-tag-name-DbKNfynz.js";import"./micromark-util-decode-numeric-character-reference-DRnCnno4.js";import"./micromark-util-decode-string-DJl8Y_PO.js";import"./unist-util-stringify-position-Ch_qCilz.js";import"./mdast-util-to-string-C_aolqmU.js";import"./jszip-CFFhfFtd.js";import"./octokit-B6bKu3NB.js";import"./@octokit-MBEWYTsi.js";import"./bottleneck-D_vuF9V7.js";import"./universal-user-agent-CLgqIJsR.js";import"./before-after-hook-y8XtM9xW.js";import"./fast-content-type-parse-3SwieiST.js";const M="M 20 80 Q 100 20 180 80 T 340 80",k=s=>(s.match(/[a-df-z][^a-df-z]*/ig)||[]).map((o,p)=>{const d=o[0],m=o.slice(1).trim().split(/[\s,]+/).map(parseFloat).filter(a=>!isNaN(a)),x=[];for(let a=0;a<m.length;a+=2)x.push({x:m[a],y:m[a+1]});return{id:p,command:d,points:x}}),D=s=>s.map(n=>`${n.command} ${n.points.map(o=>`${o.x} ${o.y}`).join(" ")}`).join(" "),Wt=()=>{const[s,n]=h.useState(M),o=h.useRef(null),[p,d]=h.useState(null),m=k(s),x=(r,i,e)=>{r.stopPropagation(),d({cmdIndex:i,pointIndex:e})},a=r=>{if(!p||!o.current)return;const e=new DOMPoint(r.clientX,r.clientY).matrixTransform(o.current.getScreenCTM()?.inverse()),l=m.map((c,v)=>{if(v===p.cmdIndex){const w=c.points.map((b,j)=>j===p.pointIndex?{x:Math.round(e.x),y:Math.round(e.y)}:b);return{...c,points:w}}return c});n(D(l))},u=()=>d(null),f=r=>{if(!o.current)return;const e=new DOMPoint(r.clientX,r.clientY).matrixTransform(o.current.getScreenCTM()?.inverse()),l=`${s} L ${Math.round(e.x)} ${Math.round(e.y)}`;n(l)},g=()=>{const r=`<svg viewBox="0 0 400 160" xmlns="http://www.w3.org/2000/svg">2  <path d="${s}" stroke="black" fill="transparent" stroke-width="2"/>3</svg>`;P(r,"path.svg","image/svg+xml")};return t.jsxs("div",{className:"h-full flex flex-col p-4 sm:p-6 lg:p-8 text-text-primary",children:[t.jsxs("header",{className:"mb-6",children:[t.jsxs("h1",{className:"text-3xl font-bold flex items-center",children:[t.jsx(y,{}),t.jsx("span",{className:"ml-3",children:"SVG Path Editor"})]}),t.jsx("p",{className:"text-text-secondary mt-1",children:"Visually create and manipulate SVG path data by dragging points."})]}),t.jsxs("div",{className:"flex-grow grid grid-cols-1 lg:grid-cols-2 gap-6 h-full overflow-hidden",children:[t.jsxs("div",{className:"flex flex-col h-full overflow-y-auto",children:[t.jsxs("div",{className:"flex justify-between items-center mb-2",children:[t.jsx("label",{htmlFor:"path-input",className:"text-sm font-medium text-text-secondary",children:"Path Data (d attribute)"}),t.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:[t.jsx(N,{className:"w-4 h-4"})," Download SVG"]})]}),t.jsx("textarea",{id:"path-input",value:s,onChange:r=>n(r.target.value),className:"h-24 p-4 bg-surface border border-border rounded-md resize-y font-mono text-sm text-primary"}),t.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:t.jsxs("svg",{ref:o,viewBox:"0 0 400 160",className:"w-full h-full cursor-crosshair",onMouseMove:a,onMouseUp:u,onMouseLeave:u,onDoubleClick:f,children:[t.jsx("rect",{width:"400",height:"160",fill:"var(--color-background)"}),t.jsx("path",{d:s,stroke:"var(--color-primary)",fill:"transparent",strokeWidth:"2"}),m.flatMap((r,i)=>r.points.map((e,l)=>t.jsx("circle",{cx:e.x,cy:e.y,r:"5",fill:r.command.toLowerCase()==="c"||r.command.toLowerCase()==="q"||r.command.toLowerCase()==="s"||r.command.toLowerCase()==="t"?"#fde047":"#f87171",stroke:"var(--color-surface)",strokeWidth:"2",className:"cursor-move hover:stroke-primary",onMouseDown:c=>x(c,i,l)},`${r.id}-${l}`)))]})}),t.jsx("p",{className:"text-xs text-center text-text-secondary mt-2",children:"Double-click on the canvas to add a new point."})]}),t.jsxs("div",{className:"flex flex-col h-full",children:[t.jsx("label",{className:"text-sm font-medium text-text-secondary mb-2",children:"Parsed Commands"}),t.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:m.map(r=>t.jsxs("div",{className:"p-2 bg-surface rounded",children:[t.jsx("span",{className:"font-bold text-amber-600",children:r.command}),t.jsxs("span",{className:"text-text-secondary",children:[" ",r.points.map(i=>`(${i.x},${i.y})`).join(" ")]})]},r.id))})]})]})]})};export{Wt as SvgPathEditor};4//# sourceMappingURL=SvgPathEditor-BK1SMCC-.js.map5