mvp / assets /LogicFlowBuilder-CnS2dguz.js
admin08077's picture
Upload 101 files
dd11e3c verified
import{r as x,j as e,R as M}from"./react-D_B_5QVd.js";import{o as D,$ as g}from"./index-CPYWJ7h_.js";import"./jszip-C9ownNzX.js";import"./react-dom-EAO2-NBm.js";import"./scheduler-DYLXRpC5.js";import"./@google-4tyssLU_.js";import"./marked-CesSW9Du.js";import"./idb-Dob3nYDb.js";const L=new Map(g.map(s=>[s.id,s])),S=({feature:s,onDragStart:l})=>e.jsxs("div",{draggable:!0,onDragStart:m=>l(m,s.id),className:"p-3 rounded-md bg-gray-50 border border-border flex items-center gap-3 cursor-grab hover:bg-gray-100 transition-colors",children:[e.jsx("div",{className:"text-primary flex-shrink-0",children:s.icon}),e.jsxs("div",{children:[e.jsx("h4",{className:"font-bold text-sm text-text-primary",children:s.name}),e.jsx("p",{className:"text-xs text-text-secondary",children:s.category})]})]}),P=({node:s,feature:l,onMouseDown:m,onLinkStart:h,onLinkEnd:d})=>e.jsxs("div",{className:"absolute w-52 bg-surface rounded-lg shadow-md border-2 border-border cursor-grab active:cursor-grabbing flex flex-col",style:{left:s.x,top:s.y,transform:"translate(-50%, -50%)"},onMouseDown:i=>m(i,s.id),onMouseUp:i=>d(i,s.id),children:[e.jsxs("div",{className:"p-2 flex items-center gap-2 border-b border-border",children:[e.jsx("div",{className:"w-5 h-5 text-primary",children:l.icon}),e.jsx("span",{className:"text-sm font-semibold truncate text-text-primary",children:l.name})]}),e.jsxs("div",{className:"relative p-3 text-xs text-text-secondary min-h-[40px] flex items-center justify-center",children:["Workflow Node",e.jsx("div",{onMouseDown:i=>h(i,s.id),className:"absolute right-[-9px] top-1/2 -translate-y-1/2 w-4 h-4 bg-primary rounded-full border-2 border-surface cursor-crosshair hover:scale-125 transition-transform",title:"Drag to connect"})]})]}),R=M.memo(()=>e.jsxs("svg",{width:"100%",height:"100%",className:"absolute inset-0",children:[e.jsxs("defs",{children:[e.jsx("pattern",{id:"smallGrid",width:"10",height:"10",patternUnits:"userSpaceOnUse",children:e.jsx("path",{d:"M 10 0 L 0 0 0 10",fill:"none",stroke:"rgba(0, 0, 0, 0.05)",strokeWidth:"0.5"})}),e.jsxs("pattern",{id:"grid",width:"50",height:"50",patternUnits:"userSpaceOnUse",children:[e.jsx("rect",{width:"50",height:"50",fill:"url(#smallGrid)"}),e.jsx("path",{d:"M 50 0 L 0 0 0 50",fill:"none",stroke:"rgba(0, 0, 0, 0.1)",strokeWidth:"1"})]})]}),e.jsx("rect",{width:"100%",height:"100%",fill:"url(#grid)"})]})),O=()=>{const[s,l]=x.useState([]),[m,h]=x.useState([]),[d,i]=x.useState(null),[n,p]=x.useState(null),c=x.useRef(null),b=(t,r)=>{t.dataTransfer.setData("application/json",JSON.stringify({featureId:r}))},j=t=>{if(t.preventDefault(),!c.current)return;const{featureId:r}=JSON.parse(t.dataTransfer.getData("application/json")),o=c.current.getBoundingClientRect(),a={id:Date.now(),featureId:r,x:t.clientX-o.left,y:t.clientY-o.top};l(k=>[...k,a])},y=(t,r)=>{const o=s.find(a=>a.id===r);!o||t.target.title==="Drag to connect"||i({id:r,offsetX:t.clientX-o.x,offsetY:t.clientY-o.y})},v=t=>{if(d&&c.current&&l(s.map(r=>r.id===d.id?{...r,x:t.clientX-d.offsetX,y:t.clientY-d.offsetY}:r)),n&&c.current){const r=c.current.getBoundingClientRect();p({...n,toPos:{x:t.clientX-r.left,y:t.clientY-r.top}})}},f=()=>{i(null),p(null)},N=(t,r)=>{t.stopPropagation();const o=s.find(a=>a.id===r);o&&p({from:r,fromPos:{x:o.x,y:o.y},toPos:{x:o.x,y:o.y}})},w=(t,r)=>{t.stopPropagation(),n&&n.from!==r&&h(o=>[...o,{from:n.from,to:r}]),p(null)},u=x.useMemo(()=>new Map(s.map(t=>[t.id,{x:t.x,y:t.y}])),[s]);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(D,{}),e.jsx("span",{className:"ml-3",children:"Logic Flow Builder"})]}),e.jsx("p",{className:"text-text-secondary mt-1",children:"Visually build application logic flows and development pipelines."})]}),e.jsxs("div",{className:"flex-grow flex gap-6 min-h-0",children:[e.jsxs("aside",{className:"w-72 flex-shrink-0 bg-surface border border-border p-4 rounded-lg flex flex-col",children:[e.jsx("h3",{className:"font-bold mb-3 text-lg",children:"Features"}),e.jsx("div",{className:"flex-grow overflow-y-auto space-y-3 pr-2",children:g.map(t=>e.jsx(S,{feature:t,onDragStart:b},t.id))})]}),e.jsxs("main",{ref:c,className:"flex-grow relative bg-background border-2 border-dashed border-border rounded-lg overflow-hidden",onDrop:j,onDragOver:t=>t.preventDefault(),onMouseMove:v,onMouseUp:f,onMouseLeave:f,children:[e.jsx(R,{}),e.jsxs("svg",{width:"100%",height:"100%",className:"absolute inset-0 pointer-events-none",children:[m.map((t,r)=>{const o=u.get(t.from),a=u.get(t.to);return!o||!a?null:e.jsx("line",{x1:o.x,y1:o.y,x2:a.x,y2:a.y,stroke:"var(--color-primary)",strokeWidth:"2",markerEnd:"url(#arrow)"},r)}),n&&e.jsx("line",{x1:n.fromPos.x,y1:n.fromPos.y,x2:n.toPos.x,y2:n.toPos.y,stroke:"var(--color-primary)",strokeWidth:"2",strokeDasharray:"5,5"}),e.jsx("defs",{children:e.jsx("marker",{id:"arrow",viewBox:"0 0 10 10",refX:"8",refY:"5",markerWidth:"6",markerHeight:"6",orient:"auto-start-reverse",children:e.jsx("path",{d:"M 0 0 L 10 5 L 0 10 z",fill:"var(--color-primary)"})})})]}),s.map(t=>{const r=L.get(t.featureId);return r?e.jsx(P,{node:t,feature:r,onMouseDown:y,onLinkStart:N,onLinkEnd:w},t.id):null})]})]})]})};export{O as LogicFlowBuilder};
//# sourceMappingURL=LogicFlowBuilder-CnS2dguz.js.map