@bemedev/mind-flow 0.3.1 → 0.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.cjs.js +1 -1
- package/lib/index.es.js +215 -220
- package/lib/server.cjs.js +140 -157
- package/lib/server.es.js +140 -157
- package/lib/services/main.machine.d.ts +994 -14
- package/lib/services/main.machine.d.ts.map +1 -1
- package/lib/ui/components/FlowChart.context.d.ts +994 -14
- package/lib/ui/components/FlowChart.context.d.ts.map +1 -1
- package/lib/ui/components/NodesBoard.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/services/main.machine.ts +148 -41
- package/src/ui/components/FlowChart.context.ts +2 -131
- package/src/ui/components/FlowChart.tsx +10 -10
- package/src/ui/components/NodeComponent.tsx +8 -8
- package/src/ui/components/NodesBoard.tsx +32 -49
package/lib/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("solid-js/web"),t=require("@bemedev/app-solidjs"),n=require("solid-js"),r=require("@bemedev/app"),i=require("@bemedev/app/bemedev"),a=require("@thisbeyond/solid-dnd");var o=`fill-transparent cursor-pointer relative stroke-[rgba(168,168,168,0.4)] stroke-3 stroke-[rgba(168,168,168,1)] stroke-4 z-100 stroke-[rgba(168,168,168,0.8)] pointer-events-all w-[100px] h-[100px] bg-white fill-white pointer-events-none absolute top-0 w-full h-full overflow-hidden overflow-auto h-[150vh] w-[2160px] bg-size-[30px_30px] flex flex-col cursor-grab rounded-md shadow-[1px_1px_11px_-6px_rgba(0,0,0,0.75)] select-none transition-[border,box-shadow] duration-200 ease-in-out hover:shadow-[2px_2px_12px_-6px_rgba(0,0,0,0.75)] draggable border border-[#e38c29] z-[100] border-[#e6d4be] z-[1] items-center justify-end -top-[30px] right-0 transition-all space-x-2 opacity-100 w-0 -right-3 opacity-0 w-6 h-6 fill-[#a11111] rounded-full size-6 bg-green-500 p-0.5 hover:bg-green-600 font-bold text-center overflow-visible bg-blue-500 text-white rounded-lg hover:bg-blue-600 justify-center p-3 border-b border-[#f0f0f0] cursor-default z-[-3] -left-[18px] bg-[#e38b29] w-3 h-3 my-3 -right-[18px] cursor-crosshair mt-3`.split(` `),s=10.5,c={x:-10.5,y:18},l=(e=0)=>({x:e+s,y:18}),u={horizontal:55,vertical:40},d=[{id:`node-0`,data:{content:`Some text`,label:`Root node`},input:!1,position:{x:350,y:100}}],f=(e,t)=>{let r=(0,n.createContext)(e(),t);return[({children:e})=>r.Provider({value:r.defaultValue,children:e}),()=>(0,n.useContext)(r),r]},p=`useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict`,m=(e=21)=>{let t=``,n=crypto.getRandomValues(new Uint8Array(e|=0));for(;e--;)t+=p[n[e]&63];return t},h=(e,t)=>`edge = ${e} => ${t}`,g=e=>`node-${e}`,_=(e,t={width:192,height:50,inputOffset:c})=>{let n=t.width,r=t.height,i=t.outputOffset??l(n),a=t.inputOffset;return{width:n,height:r,output:{x:e.x+i.x,y:e.y+i.y},input:{x:e.x+a.x,y:e.y+a.y},outputOffset:i,inputOffset:a}},v=(0,i.type)({x:`number`,y:`number`});(0,i.type)(({optional:e,use:t})=>({input:e(t(v)),output:t(v)}));var y=(0,i.type)({from:`string`,to:`string`}),b=(0,i.type)(({optional:e,use:t})=>({position:t(v),data:{label:e(`string`),content:`string`},input:`boolean`})),x=y,S=(0,i.type)(({optional:e,use:t})=>({width:`number`,height:`number`,output:t(v),input:e(t(v)),inputOffset:e(t(v)),outputOffset:e(t(v))})),C=(0,i.type)({x0:`number`,y0:`number`,x1:`number`,y1:`number`}),w=(0,i.type)(({intersection:e,use:t})=>e({from:`string`},t(C))),T=(0,i.type)(({optional:e})=>({self:{left:`number`,top:`number`,width:`number`,height:`number`},parent:e({scrollLeft:`number`,scrollTop:`number`,height:`number`,width:`number`})})),E=(0,r.createMachine)({initial:`idle`,on:{SET_BOARD:{actions:[`setBoard`]}},states:{idle:{on:{CONFIGURE:{actions:[`configure`],target:`/working`},CONFIGURE_EMPTY:`/working`}},construction:{always:{actions:[`buildUI`],target:`/working`}},working:{on:{MOVE_IMMEDIATE:{actions:[{name:`buildUI`,description:`Must be in the ui`}]},ADD_CHILD:{actions:[`generateID`,{name:`placeChild`,description:`Must be in the ui`},`linkChild`],target:`/construction`},ADD_PARENT:{actions:[`generateID`,{name:`placeParent`,description:`Must be in the ui`},`selectParent`],target:`/construction`},ADD_DIMENSION:{actions:[`addDimension`]},ADD_SIBLING:{actions:[`generateID`,{name:`placeSibling`,description:`Must be in the ui`},`linkSibling`],target:`/construction`},MOVE:{actions:[`moveNode`,`buildUI`],target:`/construction`},ADD_EDGE:{actions:[`addEdge`],target:`/construction`},START_NEW_EDGE:{actions:[`startNewEdge`]},MOVE_NEW_EDGE:{actions:[`moveNewEdge`]},CLEAR_NEW_EDGE:{actions:[`clearNewEdge`]},DELETE:{actions:[`delete`],target:`/construction`},SELECT:{actions:[`select`]},DESELECT:{actions:[`deselect`]},ZOOM:{actions:[`zoom`]},TOGGLE_ZOOM:{actions:[`toggleZoom`]},SET_BOARD:{actions:[`setBoard`]}}}}},{eventsMap:(0,i.type)(({intersection:e,use:t,array:n})=>({CONFIGURE:{nodes:n(e(t(b),{id:`string`})),edges:n(e(t(x),{id:`string`}))},SET_BOARD:t(T),CONFIGURE_EMPTY:`never`,MOVE:{id:`string`,x:`number`,y:`number`},MOVE_IMMEDIATE:{id:`string`,x:`number`,y:`number`},ADD_CHILD:`string`,ADD_PARENT:`never`,ADD_SIBLING:`string`,DELETE:`string`,SELECT:`string`,DESELECT:`never`,ADD_EDGE:t(y),START_NEW_EDGE:`string`,MOVE_NEW_EDGE:t(v),CLEAR_NEW_EDGE:`never`,ZOOM:`number`,TOGGLE_ZOOM:`never`,ADD_DIMENSION:{id:`string`,dimension:t(S)}})),sync:!0,pContext:(0,i.type)(({union:e,optional:t,record:n,use:r,custom:i})=>({generatedId:e(`string`,`null`),previousZoom:t(`number`),dimensions:n(r(S)),getBoardPosition:i(),clampPosition:i(),calculateDimensions:i()})),context:(0,i.type)(({optional:e,use:t,array:n,record:r})=>({data:e({nodes:n({...t(b),id:`string`}),edges:n({...t(x),id:`string`})}),board:e(t(T)),edgesPositions:r(t(C)),newEdge:e(t(w)),selected:e(`string`),updatingUI:e(`boolean`),zoom:`number`,bounds:t(v)}))}).provideOptions(({assign:e,batch:t,erase:n,filter:r,action:a})=>({actions:{configure:t(e(`data`,{CONFIGURE:({payload:e})=>e}),e(`newEdge`,()=>void 0),e(`updatingUI`,()=>!1),a(({pContext:e})=>{e.generatedId=null}),a({CONFIGURE:({payload:{nodes:e},pContext:{dimensions:t}})=>{e.forEach(({id:e,position:n})=>{t[e]=_(n)})}})),startNewEdge:e(`newEdge`,{START_NEW_EDGE:({payload:e,pContext:{dimensions:t}})=>{let{x:n,y:r}=t[e].output;return{from:e,x0:n,y0:r,x1:n,y1:r}}}),setBoard:e(`board`,{SET_BOARD:({payload:e})=>e}),buildUI:t(e(`edgesPositions`,{MOVE:({context:{data:e,edgesPositions:t},payload:n,pContext:{dimensions:r}})=>{let i=e?.edges,a=r[n.id],o=a?.outputOffset??l(a?.width),s=a?.inputOffset??c,u={x:n.x+o.x,y:n.y+o.y},d={x:n.x+s.x,y:n.y+s.y};return a&&(a.output=u,a.input=d),i?.forEach(({from:e,to:r,id:i})=>{e===n.id&&(t[i].x0=u.x,t[i].y0=u.y),r===n.id&&(t[i].x1=d.x,t[i].y1=d.y)}),t},MOVE_IMMEDIATE:({context:{data:e,edgesPositions:t},payload:n,pContext:{dimensions:r}})=>((e?.edges)?.forEach(({from:e,to:i,id:a})=>{if(e===n.id){let e=r[n.id],i=e?.outputOffset??l(e?.width),o=n.x+i.x,s=n.y+i.y;t[a].x0=o,t[a].y0=s,e&&(e.output.x=o,e.output.y=s)}if(i===n.id){let e=r[n.id],i=e?.inputOffset??c,o=n.x+i.x,s=n.y+i.y;t[a].x1=o,t[a].y1=s,e&&(e.input={x:o,y:s})}}),t),else:({context:{data:e,edgesPositions:t},pContext:{dimensions:n}})=>{let r=e?.edges??[];return t={},r.forEach(({from:e,id:r,to:i})=>{let a=n[e]?.output,o=n[i]?.input;a&&o?t[r]={x0:a.x,y0:a.y,x1:o.x,y1:o.y}:delete t[r]}),t}}),e(`updatingUI`,()=>!0)),addDimension:a({ADD_DIMENSION:({payload:{id:e,dimension:t},pContext:{dimensions:n}})=>{n[e]=t}}),generateID:a(({pContext:e})=>{e.generatedId=m()}),linkChild:t(e(`data.edges`,{ADD_CHILD:({context:{data:e},pContext:t,payload:n})=>{let r=i.toArray.typed(e?.edges),a=n,o=t?.generatedId,s=g(o),c=h(a,s);return r.push({id:c,from:a,to:s}),r}}),e(`selected`,({pContext:{generatedId:e}})=>g(e))),linkSibling:t(e(`data.edges`,{ADD_SIBLING:({pContext:e,payload:t,context:{data:n}})=>{let r=i.toArray.typed(n?.edges),a=e?.generatedId,o=r.find(({to:e})=>e===t)?.from;if(!o)return r;let s=g(a),c=h(o,s);return r.push({from:o,to:s,id:c}),r}}),e(`selected`,({pContext:{generatedId:e}})=>g(e))),selectParent:e(`selected`,({pContext:{generatedId:e}})=>g(e)),moveNode:e(`data.nodes`,{MOVE:({context:{data:e},payload:t})=>{let{id:n,x:r,y:i}=t;return e?.nodes?.map(e=>e.id===n?{...e,position:{x:r,y:i}}:e)??[]}}),select:e(`selected`,{SELECT:({payload:e})=>e}),delete:t(r(`data.edges`,{DELETE:({id:e,from:t,to:n},r,{payload:i})=>e!==i&&t!==i&&n!==i}),r(`data.nodes`,{DELETE:({id:e},t,{payload:n})=>e!==n})),addEdge:t(e(`data.edges`,{ADD_EDGE:({context:e,payload:{from:t,to:n}})=>{let r=e.data?.edges??[],i=h(t,n);return r.some(e=>e.id===i)?r:[...r,{id:i,from:t,to:n}]}}),n(`newEdge`)),clearNewEdge:n(`newEdge`),deselect:n(`selected`),zoom:e(`zoom`,{ZOOM:({context:{zoom:e},payload:t,pContext:n})=>{let r=e+t,i=Math.min(Math.max(Number(r.toFixed(2)),.2),3);return n.previousZoom=void 0,i}}),toggleZoom:e(`zoom`,{TOGGLE_ZOOM:({context:{zoom:e},pContext:t})=>{let n=t.previousZoom;return n===void 0?(t.previousZoom=e,1):(t.previousZoom=void 0,n)}})}})),[D,O]=f(()=>{let e=(0,r.interpret)(E,{context:{zoom:1,edgesPositions:{},bounds:{x:0,y:0}},pContext:{generatedId:null,dimensions:{},getBoardPosition(t,n,r){if(!r)return{x:t,y:n};let i=e.state.context.zoom;return{x:(t-r.self.left)/i,y:(n-r.self.top)/i}},clampPosition(t,n,r,i=192,a=50){let o=t?.parent;if(!o)return{x:n,y:r};let s=e.state.context.zoom??1,c=o.scrollLeft/s+u.horizontal,l=Math.max(c,(o.scrollLeft+o.width)/s-u.horizontal-i),d=o.scrollTop/s+u.vertical,f=Math.max(d,(o.scrollTop+o.height)/s-u.vertical-a);return{x:Math.min(Math.max(n,c),l),y:Math.min(Math.max(r,d),f)}},calculateDimensions:(e,t={width:192,height:50,inputOffset:c})=>{let n=t.width,r=t.height,i=t.outputOffset??l(n),a=t.inputOffset;return{width:n,height:r,output:{x:e.x+i.x,y:e.y+i.y},input:{x:e.x+a.x,y:e.y+a.y},outputOffset:i,inputOffset:a}}}});return e.addOptions(({assign:e})=>({actions:{placeChild:e(`data.nodes`,{ADD_CHILD:({payload:e,context:{data:t,board:n},pContext:r})=>{if(!n)return t?.nodes;let i=t?.nodes;if(!e)return i;let a=i?.find(t=>t.id===e);if(!a)return i;let o=r.dimensions[e],s=`node-${r.generatedId}`,c=o?.width??192,l=o?.height??50,u=a.position.x+c+100,d=a.position.y,f=r.clampPosition(n,u,d,c,l),p=r.calculateDimensions(f,o);return i?.push({id:s,data:{content:`<Nouveau nœud>`},input:!0,position:f}),r.dimensions[s]=p,i}}),placeParent:e(`data.nodes`,{ADD_PARENT:({context:{data:e,zoom:t=1,board:n},pContext:r})=>{if(!n)return e?.nodes;let i=e?.nodes,a=`node-${r.generatedId}`,o=n.parent,s=o?.scrollLeft??0,c=o?.scrollTop??0,l=o?.width??0,u=o?.height??0,d=t,f=(s+l/2)/d,p=(c+u/2)/d,m=r.clampPosition(n,f,p),h=r.calculateDimensions(m);return i?.push({id:a,data:{content:`<Nouveau nœud>`},input:!1,position:m}),r.dimensions[a]=h,i}}),placeSibling:e(`data.nodes`,{ADD_SIBLING:({payload:e,context:{data:t,board:n},pContext:r})=>{if(!n)return t?.nodes;let i=t?.edges,a=t?.nodes,o=i?.find(t=>t.to===e)?.from;if(!o)return a;let s=a?.find(e=>e.id===o);if(!s)return a;let c=r.dimensions[o],l=`node-${r.generatedId}`,u=c?.width??192,d=c?.height??50,f=s.position.x+u+100,p=s.position.y+100,m=r.clampPosition(n,f,p,u,d),h=r.calculateDimensions(m,c);return a?.push({id:l,data:{content:`<Nouveau nœud>`},input:!0,position:m}),r.dimensions[l]=h,a}}),moveNewEdge:e(`newEdge`,{MOVE_NEW_EDGE:({context:{newEdge:e,board:t},payload:n,pContext:r})=>{if(!t||!e)return;let{x:i,y:a}=r.getBoardPosition(n.x,n.y,t);return{...e,x1:i,y1:a}}})}})),e.start(),e},{name:`FlowContext`}),k=Object.prototype.hasOwnProperty;function A(e,t,n){for(n of e.keys())if(j(n,t))return n}function j(e,t){var n,r,i;if(e===t)return!0;if(e&&t&&(n=e.constructor)===t.constructor){if(n===Date)return e.getTime()===t.getTime();if(n===RegExp)return e.toString()===t.toString();if(n===Array){if((r=e.length)===t.length)for(;r--&&j(e[r],t[r]););return r===-1}if(n===Set){if(e.size!==t.size)return!1;for(r of e)if(i=r,i&&typeof i==`object`&&(i=A(t,i),!i)||!t.has(i))return!1;return!0}if(n===Map){if(e.size!==t.size)return!1;for(r of e)if(i=r[0],i&&typeof i==`object`&&(i=A(t,i),!i)||!j(r[1],t.get(i)))return!1;return!0}if(n===ArrayBuffer)e=new Uint8Array(e),t=new Uint8Array(t);else if(n===DataView){if((r=e.byteLength)===t.byteLength)for(;r--&&e.getInt8(r)===t.getInt8(r););return r===-1}if(ArrayBuffer.isView(e)){if((r=e.byteLength)===t.byteLength)for(;r--&&e[r]===t[r];);return r===-1}if(!n||typeof e==`object`){for(n in r=0,e)if(k.call(e,n)&&++r&&!k.call(t,n)||!(n in t)||!j(e[n],t[n]))return!1;return Object.keys(t).length===r}}return e!==e&&t!==t}var M=()=>{let e=O(),n=(0,t.createState)(e,{selector:({context:e})=>e.zoom}),r=(0,t.createState)(e,{selector:({context:e})=>e.board}),[i,{addTransformer:o,removeTransformer:s,onDragStart:c,onDragEnd:l}]=(0,a.useDragDropContext)(),d={id:`clamp-to-container`,order:100,callback:e=>{let t=r()?.self,a=i.active.draggable;if(!t||!a)return e;let o=a.node;if(!o)return e;let s=n(),c=u.horizontal,l=Math.max(c,t.width/s-o.offsetWidth-u.horizontal),d=u.vertical,f=Math.max(d,t.height/s-o.offsetHeight-u.vertical),p=(c-o.offsetLeft)*s,m=(l-o.offsetLeft)*s,h=(d-o.offsetTop)*s,g=(f-o.offsetTop)*s;return{x:Math.min(Math.max(e.x,p),m),y:Math.min(Math.max(e.y,h),g)}}};return c(({draggable:e})=>{o(`draggables`,e.id,d)}),l(({draggable:e})=>{s(`draggables`,e.id,d.id)}),null},N=(0,e.template)(`<svg><path class="relative cursor-pointer fill-transparent"></svg>`,!1,!0,!1),P=(0,e.template)(`<svg><g cursor=pointer style=pointer-events:all;z-index:30><circle cx=0 cy=0 r=12 fill="rgba(168, 168, 168, 1)"></circle><svg fill=currentColor stroke-width=0 xmlns=http://www.w3.org/2000/svg class="h-25 w-25 bg-white fill-white"width=20 height=20 viewBox="0 0 20 20"color=white x=-10 y=-10><path d="M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z"></svg>`,!1,!0,!1),F=e=>e*100/200,I=({x0:e,y0:t,x1:n,y1:r})=>`M ${e} ${t} C ${e+F(Math.abs(n-e))} ${t}, ${n-F(Math.abs(n-e))} ${r}, ${n} ${r}`,L=r=>{let i=O(),a=(0,t.createState)(i,{selector:({context:{newEdge:e,edgesPositions:t}})=>r.isNew?e:t[r.id],equals:j}),o=(0,t.createState)(i,{selector:e=>e.context.selected===r.id}),s=()=>{let e=a();return{x:e.x0+(e.x1-e.x0)/2,y:e.y0+(e.y1-e.y0)/2}};return[(()=>{var t=(0,e.getNextElement)(N);return t.$$mousedown=e=>(e.stopPropagation(),i.send({type:`SELECT`,payload:r.id})),(0,e.effect)(n=>{var i={"stroke-[rgba(168,168,168,0.4)] stroke-3 z-200":!!r.isNew,"stroke-[rgba(168,168,168,1)] stroke-4 z-100":o()&&!r.isNew,"stroke-[rgba(168,168,168,0.8)] stroke-3":!o()&&!r.isNew},s=r.isNew?`none`:`all`,c=I(a());return n.e=(0,e.classList)(t,i,n.e),s!==n.t&&(0,e.setStyleProperty)(t,`pointer-events`,n.t=s),c!==n.a&&(0,e.setAttribute)(t,`d`,n.a=c),n},{e:void 0,t:void 0,a:void 0}),(0,e.runHydrationEvents)(),t})(),(0,e.createComponent)(n.Show,{get when(){return o()},get children(){var t=(0,e.getNextElement)(P);return t.$$mousedown=e=>{e.stopPropagation(),i.send({type:`DELETE`,payload:r.id})},(0,e.effect)(()=>(0,e.setAttribute)(t,`transform`,`translate(${s().x}, ${s().y})`)),(0,e.runHydrationEvents)(),t}})]};(0,e.delegateEvents)([`mousedown`]);var R=(0,e.template)(`<svg class="pointer-events-none h-full w-full overflow-visible"><!$><!/><!$><!/>`),z=()=>{let r=O(),i=(0,t.createState)(r,{selector:e=>!!e.context.newEdge}),a=(0,t.createState)(r,{selector:({context:e})=>Object.keys(e.edgesPositions),equals:(e,t)=>e.length===t.length});return(()=>{var t=(0,e.getNextElement)(R),r=t.firstChild,[o,s]=(0,e.getNextMarker)(r.nextSibling),c=o.nextSibling,[l,u]=(0,e.getNextMarker)(c.nextSibling);return(0,e.insert)(t,(0,e.createComponent)(n.Show,{get when(){return i()},get children(){return(0,e.createComponent)(L,{id:`__#new-edge#__TEMP`,isNew:!0})}}),o,s),(0,e.insert)(t,(0,e.createComponent)(n.For,{get each(){return a()},children:t=>(0,e.createComponent)(L,{id:t})}),l,u),t})()},B=(0,e.template)(`<svg class="cursor-pointer overflow-visible rounded-full bg-green-500 p-0.5 text-center font-bold hover:bg-green-600"viewBox="0 0 1024 1024"preserveAspectRatio=xMaxYMax xmlns=http://www.w3.org/2000/svg fill=white style=pointer-events:all;fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2><g id=background><path d="M467.40667,277.66696c-0.05948,-14.53055 5.75527,-22.95613 -8.62044,-20.90487c-112.55699,16.0607 -222.1609,112.14558 -245.06161,239.85765c-46.52056,259.43466 231.33083,443.06705 449.51209,316.97506c117.31668,-67.80002 160.95215,-190.43324 151.34416,-288.29849c-5.92276,-60.32819 -27.80273,-107.95668 -53.44246,-144.25469l59.39269,-42.05363c111.72214,156.309 73.11535,351.55635 -25.06953,459.45565c-184.18877,202.4124 -470.46624,145.52064 -592.95027,-32.92123c-156.18269,-227.53604 -27.15324,-543.64371 261.18883,-582.44416c5.0579,-0.68061 3.56556,-7.04079 3.56442,-8.58985c-0.05594,-76.3354 -0.11021,-76.7687 1.10909,-77.24589c2.06886,-0.80969 151.41433,118.4561 151.92482,118.95524c4.65592,4.55233 -0.99548,7.829 -29.07828,30.50907c-120.49369,97.31245 -120.4977,98.55675 -123.0691,97.87586c-0.43639,-0.11555 -0.80698,-0.31322 -0.74442,-66.91571Z"></path><path d="M316.61562,611.03414c0.11517,-90.16257 -0.25516,-99.92912 0.64739,-101.78856c1.56486,-3.22393 131.99102,0.91032 134.6959,-1.89763c2.21336,-2.2977 -0.59362,-129.97807 1.1376,-132.37034c0.7253,-1.00225 11.10552,-0.99175 12.07474,-0.99077c104.50336,0.10564 104.90098,-0.37811 105.967,0.85765c1.56461,1.81373 0.25596,114.18436 0.67852,129.81412c0.1322,4.88975 3.22386,3.28152 99.72028,3.4563c33.0841,0.05992 36.14259,-1.40368 36.21852,4.50462c0.11713,9.11348 1.41954,110.45369 -0.40274,113.92715c-1.81106,3.45208 -130.39967,-0.42618 -134.48289,1.62075c-2.29035,1.14816 -0.36989,101.12392 -1.11542,130.51904c-0.09548,3.76459 -2.13506,3.20617 -47.84854,3.17365c-69.30253,-0.0493 -69.31099,-0.25627 -69.65762,-0.42191c-3.77927,-1.80595 0.16287,-129.33555 -2.24266,-132.58994c-1.79931,-2.43424 -124.06108,-0.29118 -132.80252,-0.97392c-3.81102,-0.29766 -2.58229,-14.8847 -2.58758,-16.8402Z">`),V=(0,e.template)(`<div id=outputs class="pointer-events-none absolute top-0 z-10 flex cursor-default flex-col"><div class="cursor-default rounded-full bg-[#e38b29] shadow-md"style=pointer-events:all>`),H=(0,e.template)(`<div class=min-w-48><div><svg class="cursor-pointer rounded-full fill-[#a11111] opacity-100 transition-all duration-200 ease-in-out"fill=currentColor stroke-width=2 viewBox="4 4 16 16"style=overflow:visible;pointer-events:all><path d="M12 4c-4.419 0-8 3.582-8 8s3.581 8 8 8 8-3.582 8-8-3.581-8-8-8zm3.707 10.293a.999.999 0 11-1.414 1.414L12 13.414l-2.293 2.293a.997.997 0 01-1.414 0 .999.999 0 010-1.414L10.586 12 8.293 9.707a.999.999 0 111.414-1.414L12 10.586l2.293-2.293a.999.999 0 111.414 1.414L13.414 12l2.293 2.293z"></path></svg><!$><!/><svg class="flex cursor-pointer items-center justify-center rounded-lg bg-blue-500 p-0.5 text-center font-bold text-white hover:bg-blue-600"viewBox="0 0 24 24"stroke=currentColor stroke-width=2 style=pointer-events:all><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg></div><!$><!/><!$><!/><!$><!/><div id=inputs class="pointer-events-none absolute top-0 z-10 flex flex-col"><div class="cursor-crosshair rounded-full bg-[#e38b29] shadow-md"style=pointer-events:all>`),U=(0,e.template)(`<span class="min-w-max border-b border-[#f0f0f0] p-3 whitespace-nowrap text-red-600 select-none">`),W=(0,e.template)(`<div class="p-3 select-none">`),G=i=>{let o=O(),s=(0,t.createState)(o,{selector:({context:e})=>{let t=r.toArray.typed(e.data?.nodes).find(e=>e.id===i.id);return{x:t.position.x,y:t.position.y,label:t.data.label,content:t.data.content??``,input:t.input}},equals:j}),c=(0,t.createState)(o,{selector:e=>e.context.newEdge}),l=(0,t.createState)(o,{selector:e=>e.context.selected===i.id}),u=(0,t.createState)(o,{selector:({context:{data:e}})=>{let t=e?.edges;return t?t.some(({to:e})=>e===i.id):!1}}),d=(0,a.createDraggable)(i.id);return(()=>{var t=(0,e.getNextElement)(H),r=t.firstChild,a=r.firstChild,f=a.nextSibling,[p,m]=(0,e.getNextMarker)(f.nextSibling),h=p.nextSibling,g=r.nextSibling,[_,v]=(0,e.getNextMarker)(g.nextSibling),y=_.nextSibling,[b,x]=(0,e.getNextMarker)(y.nextSibling),S=b.nextSibling,[C,w]=(0,e.getNextMarker)(S.nextSibling),T=C.nextSibling,E=T.firstChild;return t.$$mousedown=e=>{e.stopPropagation(),o.send({type:`SELECT`,payload:i.id})},(0,e.use)(d,t,()=>({skipTransform:!0})),a.$$click=e=>{e.stopPropagation(),o.send({type:`DELETE`,payload:i.id})},(0,e.setStyleProperty)(a,`width`,`24px`),(0,e.setStyleProperty)(a,`height`,`24px`),(0,e.insert)(r,(0,e.createComponent)(n.Show,{get when(){return u()},get children(){var t=(0,e.getNextElement)(B);return t.$$click=()=>o.send({type:`ADD_SIBLING`,payload:i.id}),(0,e.setStyleProperty)(t,`width`,`24px`),(0,e.setStyleProperty)(t,`height`,`24px`),(0,e.runHydrationEvents)(),t}}),p,m),h.$$click=()=>o.send({type:`ADD_CHILD`,payload:i.id}),(0,e.setStyleProperty)(h,`width`,`24px`),(0,e.setStyleProperty)(h,`height`,`24px`),(0,e.insert)(t,(0,e.createComponent)(n.Show,{get when(){return s().label},keyed:!0,children:t=>(()=>{var n=(0,e.getNextElement)(U);return(0,e.insert)(n,t),n})()}),_,v),(0,e.insert)(t,(0,e.createComponent)(n.Show,{get when(){return s().content},keyed:!0,children:t=>(()=>{var n=(0,e.getNextElement)(W);return(0,e.insert)(n,t),n})()}),b,x),(0,e.insert)(t,(0,e.createComponent)(n.Show,{get when(){return s().input||u()},get children(){var t=(0,e.getNextElement)(V),n=t.firstChild;return(0,e.setStyleProperty)(t,`left`,`-18px`),n.$$mouseup=e=>{e.stopPropagation();let t=c()?.from;t?o.send({type:`ADD_EDGE`,payload:{from:t,to:i.id}}):o.send(`CLEAR_NEW_EDGE`)},n.$$mousedown=e=>{e.stopPropagation()},(0,e.setStyleProperty)(n,`width`,`12px`),(0,e.setStyleProperty)(n,`height`,`12px`),(0,e.setStyleProperty)(n,`margin-top`,`12px`),(0,e.runHydrationEvents)(),t}}),C,w),(0,e.setStyleProperty)(T,`right`,`-18px`),E.$$mousedown=e=>{e.stopPropagation(),o.send(`DESELECT`),o.send({type:`START_NEW_EDGE`,payload:i.id})},(0,e.setStyleProperty)(E,`width`,`12px`),(0,e.setStyleProperty)(E,`height`,`12px`),(0,e.setStyleProperty)(E,`margin-top`,`12px`),(0,e.effect)(n=>{var a={"flex flex-col absolute cursor-grab bg-white rounded-md shadow-md select-none transition-[border,box-shadow] duration-200 ease-in-out hover:shadow-lg draggable":!0,"border border-[#e38c29] z-[100]":l(),"border border-[#e6d4be] z-[1]":!l()},o=`${s().y}px`,c=`${s().x}px`,u=i.id,d={"pointer-events-none absolute flex items-center justify-end -top-7.5 right-0 transition-all duration-200 ease-in-out space-x-2":!0,"w-full opacity-100":l(),"w-0 -right-3 opacity-0 overflow-hidden":!l()};return n.e=(0,e.classList)(t,a,n.e),o!==n.t&&(0,e.setStyleProperty)(t,`top`,n.t=o),c!==n.a&&(0,e.setStyleProperty)(t,`left`,n.a=c),u!==n.o&&(0,e.setAttribute)(t,`id`,n.o=u),n.i=(0,e.classList)(r,d,n.i),n},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0}),(0,e.runHydrationEvents)(),t})()};(0,e.delegateEvents)([`mousedown`,`click`,`mouseup`]);var K=(0,e.template)(`<div class="relative h-full w-full overflow-auto rounded-lg border-2 border-gray-600"><!$><!/><div class="relative cursor-crosshair overflow-hidden"><div class="relative h-full w-full"style="transform-origin:top left"><!$><!/><!$><!/><!$><!/>`),q=(0,e.template)(`<div class="absolute right-4 bottom-4 z-50 flex items-center gap-2 rounded-xl border border-gray-200 bg-white/90 p-2 shadow-lg backdrop-blur-md"><button type=button class="flex size-9 cursor-pointer items-center justify-center rounded-lg bg-gray-100 text-lg font-bold text-gray-700 shadow-sm transition-all duration-150 hover:bg-gray-200 active:scale-95"title="Zoom out"aria-label="Zoom out">-</button><button type=button class="h-9 cursor-pointer rounded-lg px-2 text-xs font-semibold text-gray-700 transition-colors hover:bg-gray-100"title="Reset zoom"aria-label="Reset zoom"><!$><!/>%</button><button type=button class="flex size-9 cursor-pointer items-center justify-center rounded-lg bg-gray-100 text-lg font-bold text-gray-700 shadow-sm transition-all duration-150 hover:bg-gray-200 active:scale-95"title="Zoom in"aria-label="Zoom in">+</button><div class="h-5 w-px bg-gray-300"></div><button type=button class="flex size-9 cursor-pointer items-center justify-center rounded-lg bg-blue-600 text-white shadow transition-all duration-150 hover:bg-blue-700 active:scale-95"title="Add parent node"aria-label="Add parent node"><svg class=size-5 viewBox="0 0 24 24"fill=currentColor><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">`),J=(0,e.template)(`<div class="relative mx-auto h-[calc(100vh-64px)] w-[calc(100vw-32px)] overflow-hidden">`),Y=()=>{let i,[o,s]=(0,n.createSignal)(!1),[c,l]=(0,n.createSignal)({x:0,y:0}),[u,d]=(0,n.createSignal)(``),[f,p]=(0,n.createSignal)(),m=0,h=0,g=O(),_=(0,t.createState)(g,{selector:e=>e.context.newEdge,equals:j}),v=(0,t.createState)(g,{selector:e=>e.context.zoom??1}),y=()=>{let e=f();if(!e)return;let t=e.getBoundingClientRect(),n=()=>f()?.parentElement,r={self:{left:t.left,top:t.top,width:e.clientWidth,height:e.clientHeight},parent:n()?{scrollLeft:n().scrollLeft,scrollTop:n().scrollTop,height:n().clientHeight,width:n().clientWidth}:void 0};g.send({type:`SET_BOARD`,payload:r})},b=()=>{let e=i.scrollWidth-i.clientWidth,t=i.scrollHeight-i.clientHeight;m=e>0?i.scrollLeft/e:0,h=t>0?i.scrollTop/t:0,y()};(0,n.createEffect)((0,n.on)(v,()=>{let e=i.scrollWidth-i.clientWidth,t=i.scrollHeight-i.clientHeight;e>0&&(i.scrollLeft=m*e),t>0&&(i.scrollTop=h*t)},{defer:!0})),(0,n.onMount)(y);let x=(0,t.createState)(g,{selector:e=>e.context?.selected}),S=e=>x()===e,C=(0,t.createState)(g,{selector:({context:e})=>r.toArray.typed(e.data?.nodes).map(e=>e.id),equals:(e,t)=>e.length===t.length}),w=()=>`calc((500vw - 265px) * ${v()})`,T=()=>`calc((500vh - 425px) * ${v()})`;return(()=>{var t=(0,e.getNextElement)(J);return t.addEventListener(`wheel`,e=>{if(e.ctrlKey||e.metaKey){e.preventDefault(),b();let t=e.deltaY<0?.1:-.1;g.send({type:`ZOOM`,payload:t})}}),(0,e.insert)(t,(0,e.createComponent)(a.DragDropProvider,{onDragMove:({draggable:{transform:e,node:t,id:n}})=>{if(d(n),S(n)){let r=t.parentElement?.parentElement,i=v(),a=r?Math.max(0,r.clientWidth/i-t.offsetWidth):1/0,o=r?Math.max(0,r.clientHeight/i-t.offsetHeight):1/0,s=t.offsetLeft+e.x/i,c=t.offsetTop+e.y/i,u=Math.min(Math.max(s,0),a),d=Math.min(Math.max(c,0),o),f=u-t.offsetLeft,p=d-t.offsetTop;t.style.setProperty(`transform`,`translate3d(${f}px, ${p}px, 0)`),g.send({type:`MOVE_IMMEDIATE`,payload:{id:`${n}`,x:u,y:d}}),l({x:f*i,y:p*i})}},onDragEnd:({draggable:{node:e,id:t}})=>{if(!S(t))return;let n=e.parentElement?.parentElement,r=v(),i=n?Math.max(0,n.clientWidth/r-e.offsetWidth):1/0,a=n?Math.max(0,n.clientHeight/r-e.offsetHeight):1/0,o=e.offsetLeft+c().x/r,s=e.offsetTop+c().y/r,u=Math.min(Math.max(o,0),i),d=Math.min(Math.max(s,0),a);e.style.setProperty(`top`,d+`px`),e.style.setProperty(`left`,u+`px`),e.style.removeProperty(`transform`),g.send({type:`MOVE`,payload:{id:`${t}`,x:u,y:d}}),setTimeout(()=>{l({x:0,y:0})},0)},get children(){return[(()=>{var t=(0,e.getNextElement)(K),r=t.firstChild,[c,l]=(0,e.getNextMarker)(r.nextSibling),u=c.nextSibling,d=u.firstChild,f=d.firstChild,[m,h]=(0,e.getNextMarker)(f.nextSibling),y=m.nextSibling,[x,S]=(0,e.getNextMarker)(y.nextSibling),E=x.nextSibling,[D,O]=(0,e.getNextMarker)(E.nextSibling);return t.addEventListener(`scroll`,b),(0,e.use)(e=>i=e,t),(0,e.insert)(t,(0,e.createComponent)(a.DragDropSensors,{}),c,l),u.$$mousedown=e=>{if(_()||e.button!==0)return;g.send(`DESELECT`);let t=e.clientX,n=e.clientY,r=i.scrollLeft,a=i.scrollTop;s(!0);let o=e=>{let o=e.clientX-t,s=e.clientY-n;i.scrollLeft=r-o*3,i.scrollTop=a-s*3,b()},c=()=>{window.removeEventListener(`mousemove`,o),window.removeEventListener(`mouseup`,c),setTimeout(()=>s(!1),200)};window.addEventListener(`mousemove`,o),window.addEventListener(`mouseup`,c)},u.addEventListener(`scroll`,()=>{}),(0,e.use)(p,u),(0,e.insert)(d,(0,e.createComponent)(M,{}),m,h),(0,e.insert)(d,(0,e.createComponent)(z,{}),x,S),(0,e.insert)(d,(0,e.createComponent)(n.For,{get each(){return C()},children:t=>(0,e.createComponent)(G,{id:t})}),D,O),(0,e.effect)(t=>{var n=!!o(),r=T(),i=w(),a=v();return n!==t.e&&u.classList.toggle(`cursor-grabbing`,t.e=n),r!==t.t&&(0,e.setStyleProperty)(u,`height`,t.t=r),i!==t.a&&(0,e.setStyleProperty)(u,`width`,t.a=i),a!==t.o&&(0,e.setStyleProperty)(d,`scale`,t.o=a),t},{e:void 0,t:void 0,a:void 0,o:void 0}),(0,e.runHydrationEvents)(),t})(),(()=>{var t=(0,e.getNextElement)(q),n=t.firstChild,r=n.nextSibling,i=r.firstChild,[a,o]=(0,e.getNextMarker)(i.nextSibling);a.nextSibling;var s=r.nextSibling,c=s.nextSibling.nextSibling;return n.$$click=()=>{b(),g.send({type:`ZOOM`,payload:-.1})},r.$$click=()=>{b(),g.send(`TOGGLE_ZOOM`)},(0,e.insert)(r,()=>Math.round(v()*100),a,o),s.$$click=()=>{b(),g.send({type:`ZOOM`,payload:.1})},c.$$click=()=>g.send(`ADD_PARENT`),(0,e.runHydrationEvents)(),t})(),(0,e.createComponent)(n.Show,{get when(){return!u()||!S(u())},get children(){return(0,e.createComponent)(a.DragOverlay,{children:``})}})]}})),t})()};(0,e.delegateEvents)([`mousedown`,`click`]);var X=(0,e.template)(`<div class="relative h-full w-full"><div class="relative h-full w-full bg-white bg-size-[30px_30px]"style="background-image:radial-gradient(circle, #b8b8b8bf 1px, rgba(0, 0, 0, 0) 1px)">`),Z=r=>{let i=r.config?.nodes??d,a=r.config?.edges,o=O(),s=(0,t.createState)(o,{selector:e=>!!e.context.newEdge});return(0,n.onMount)(()=>{o.resume(),o.send({type:`CONFIGURE`,payload:{nodes:i,edges:a??[]}})}),(0,n.onCleanup)(o.pause),(()=>{var t=(0,e.getNextElement)(X),n=t.firstChild;return t.$$mousemove=e=>{o.send({type:`MOVE_NEW_EDGE`,payload:{x:e.clientX,y:e.clientY}})},t.$$mouseup=()=>o.send(`CLEAR_NEW_EDGE`),(0,e.insert)(n,(0,e.createComponent)(Y,{})),(0,e.effect)(t=>(0,e.setStyleProperty)(n,`cursor`,s()?`inherit`:`crosshair`)),(0,e.runHydrationEvents)(),t})()};(0,e.delegateEvents)([`mouseup`,`mousemove`]);var Q=t=>(0,e.createComponent)(D,{get children(){return(0,e.createComponent)(Z,t)}});exports.CLASSES=o,exports.Flow=Q;
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("solid-js/web"),t=require("@bemedev/app-solidjs"),n=require("solid-js"),r=require("@bemedev/app"),i=require("@bemedev/app/bemedev"),a=require("@thisbeyond/solid-dnd");var o=`fill-transparent cursor-pointer relative stroke-[rgba(168,168,168,0.4)] stroke-3 stroke-[rgba(168,168,168,1)] stroke-4 z-100 stroke-[rgba(168,168,168,0.8)] pointer-events-all w-[100px] h-[100px] bg-white fill-white pointer-events-none absolute top-0 w-full h-full overflow-hidden overflow-auto h-[150vh] w-[2160px] bg-size-[30px_30px] flex flex-col cursor-grab rounded-md shadow-[1px_1px_11px_-6px_rgba(0,0,0,0.75)] select-none transition-[border,box-shadow] duration-200 ease-in-out hover:shadow-[2px_2px_12px_-6px_rgba(0,0,0,0.75)] draggable border border-[#e38c29] z-[100] border-[#e6d4be] z-[1] items-center justify-end -top-[30px] right-0 transition-all space-x-2 opacity-100 w-0 -right-3 opacity-0 w-6 h-6 fill-[#a11111] rounded-full size-6 bg-green-500 p-0.5 hover:bg-green-600 font-bold text-center overflow-visible bg-blue-500 text-white rounded-lg hover:bg-blue-600 justify-center p-3 border-b border-[#f0f0f0] cursor-default z-[-3] -left-[18px] bg-[#e38b29] w-3 h-3 my-3 -right-[18px] cursor-crosshair mt-3`.split(` `),s=10.5,c={x:-10.5,y:18},l=(e=0)=>({x:e+s,y:18}),u={horizontal:55,vertical:40},d=[{id:`node-0`,data:{content:`Some text`,label:`Root node`},input:!1,position:{x:350,y:100}}],f=(e,t)=>{let r=(0,n.createContext)(e(),t);return[({children:e})=>r.Provider({value:r.defaultValue,children:e}),()=>(0,n.useContext)(r),r]},p=`useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict`,m=(e=21)=>{let t=``,n=crypto.getRandomValues(new Uint8Array(e|=0));for(;e--;)t+=p[n[e]&63];return t},h=(e,t)=>`edge = ${e} => ${t}`,g=e=>`node-${e}`,_=(e,t={width:192,height:50,inputOffset:c})=>{let n=t.width,r=t.height,i=t.outputOffset??l(n),a=t.inputOffset;return{width:n,height:r,output:{x:e.x+i.x,y:e.y+i.y},input:{x:e.x+a.x,y:e.y+a.y},outputOffset:i,inputOffset:a}},v=(0,i.type)({x:`number`,y:`number`});(0,i.type)(({optional:e,use:t})=>({input:e(t(v)),output:t(v)}));var y=(0,i.type)({from:`string`,to:`string`}),b=(0,i.type)(({optional:e,use:t})=>({position:t(v),data:{label:e(`string`),content:`string`},input:`boolean`})),x=y,S=(0,i.type)(({optional:e,use:t})=>({width:`number`,height:`number`,output:t(v),input:e(t(v)),inputOffset:e(t(v)),outputOffset:e(t(v))})),C=(0,i.type)({x0:`number`,y0:`number`,x1:`number`,y1:`number`}),w=(0,i.type)(({intersection:e,use:t})=>e({from:`string`},t(C))),T=(0,i.type)(({optional:e})=>({self:{left:`number`,top:`number`,width:`number`,height:`number`},parent:e({scrollLeft:`number`,scrollTop:`number`,height:`number`,width:`number`})})),E=(0,r.createMachine)({initial:`idle`,on:{SET_BOARD:{actions:[`setBoard`]}},states:{idle:{on:{CONFIGURE:{actions:[`configure`],target:`/working`},CONFIGURE_EMPTY:`/working`}},construction:{always:{actions:[`buildUI`],target:`/working`}},working:{on:{MOVE_IMMEDIATE:{actions:[{name:`buildUI`,description:`Must be in the ui`}]},ADD_CHILD:{actions:[`generateID`,{name:`placeChild`,description:`Must be in the ui`},`linkChild`],target:`/construction`},ADD_PARENT:{actions:[`generateID`,{name:`placeParent`,description:`Must be in the ui`},`selectParent`],target:`/construction`},ADD_DIMENSION:{actions:[`addDimension`]},ADD_SIBLING:{actions:[`generateID`,{name:`placeSibling`,description:`Must be in the ui`},`linkSibling`],target:`/construction`},MOVE:{actions:[`moveNode`,`buildUI`],target:`/construction`},ADD_EDGE:{actions:[`addEdge`],target:`/construction`},START_NEW_EDGE:{actions:[`startNewEdge`]},MOVE_NEW_EDGE:{actions:[`moveNewEdge`]},CLEAR_NEW_EDGE:{actions:[`clearNewEdge`]},DELETE:{actions:[`delete`],target:`/construction`},SELECT:{actions:[`select`]},DESELECT:{actions:[`deselect`]},ZOOM:{actions:[`zoom`]},TOGGLE_ZOOM:{actions:[`toggleZoom`]},SET_BOARD:{actions:[`setBoard`]}}}}},{eventsMap:(0,i.type)(({intersection:e,use:t,array:n})=>({CONFIGURE:{nodes:n(e(t(b),{id:`string`})),edges:n(e(t(x),{id:`string`}))},SET_BOARD:t(T),CONFIGURE_EMPTY:`never`,MOVE:{id:`string`,x:`number`,y:`number`},MOVE_IMMEDIATE:{id:`string`,x:`number`,y:`number`},ADD_CHILD:`string`,ADD_PARENT:`never`,ADD_SIBLING:`string`,DELETE:`string`,SELECT:`string`,DESELECT:`never`,ADD_EDGE:t(y),START_NEW_EDGE:`string`,MOVE_NEW_EDGE:t(v),CLEAR_NEW_EDGE:`never`,ZOOM:`number`,TOGGLE_ZOOM:`never`,ADD_DIMENSION:{id:`string`,dimension:t(S)}})),sync:!0,pContext:(0,i.type)(({union:e,optional:t,record:n,use:r,custom:i})=>({generatedId:e(`string`,`null`),previousZoom:t(`number`),dimensions:n(r(S)),getBoardPosition:i(),clampPosition:i(),calculateDimensions:i()})),context:(0,i.type)(({optional:e,use:t,array:n,record:r})=>({data:e({nodes:n({...t(b),id:`string`}),edges:n({...t(x),id:`string`})}),board:e(t(T)),edgesPositions:r(t(C)),newEdge:e(t(w)),selected:e(`string`),updatingUI:e(`boolean`),zoom:`number`,bounds:t(v)}))}).provideOptions(({assign:e,batch:t,erase:n,filter:r,action:a})=>({actions:{configure:t(e(`data`,{CONFIGURE:({payload:e})=>e}),e(`newEdge`,()=>void 0),e(`updatingUI`,()=>!1),a(({pContext:e})=>{e.generatedId=null}),a({CONFIGURE:({payload:{nodes:e},pContext:{dimensions:t}})=>{e.forEach(({id:e,position:n})=>{t[e]=_(n)})}})),setBoard:e(`board`,{SET_BOARD:({payload:e})=>e}),generateID:a(({pContext:e})=>e.generatedId=m()),select:e(`selected`,{SELECT:({payload:e})=>e}),clearNewEdge:n(`newEdge`),deselect:n(`selected`),startNewEdge:e(`newEdge`,{START_NEW_EDGE:({payload:e,pContext:{dimensions:t}})=>{let{x:n,y:r}=t[e].output;return{from:e,x0:n,y0:r,x1:n,y1:r}}}),buildUI:t(e(`edgesPositions`,{MOVE:({context:{data:e,edgesPositions:t},payload:n,pContext:{dimensions:r}})=>{let i=e?.edges,a=r[n.id],o=a?.outputOffset??l(a?.width),s=a?.inputOffset??c,u={x:n.x+o.x,y:n.y+o.y},d={x:n.x+s.x,y:n.y+s.y};return a&&(a.output=u,a.input=d),i?.forEach(({from:e,to:r,id:i})=>{e===n.id&&(t[i].x0=u.x,t[i].y0=u.y),r===n.id&&(t[i].x1=d.x,t[i].y1=d.y)}),t},MOVE_IMMEDIATE:({context:{data:e,edgesPositions:t},payload:n,pContext:{dimensions:r}})=>((e?.edges)?.forEach(({from:e,to:i,id:a})=>{let o=r[n.id],s=t[a];if(!(!s||!o)){if(e===n.id){let e=o.outputOffset??l(o.width),t=n.x+e.x,r=n.y+e.y;s.x0=t,s.y0=r,o.output={x:t,y:r}}if(i===n.id){let e=o?.inputOffset??c,t=n.x+e.x,r=n.y+e.y;s.x1=t,s.y1=r,o.input={x:t,y:r}}}}),t),else:({context:{data:e,edgesPositions:t},pContext:{dimensions:n}})=>{let r=i.toArray.typed(e?.edges);return t={},r.forEach(({from:e,id:r,to:i})=>{let a=n[e]?.output,o=n[i]?.input;a&&o?t[r]={x0:a.x,y0:a.y,x1:o.x,y1:o.y}:delete t[r]}),t}}),e(`updatingUI`,()=>!0)),addDimension:a({ADD_DIMENSION:({payload:{id:e,dimension:t},pContext:{dimensions:n}})=>{n[e]=t}}),linkChild:t(e(`data.edges`,{ADD_CHILD:({context:{data:e},pContext:t,payload:n})=>{let r=i.toArray.typed(e?.edges),a=n,o=t?.generatedId,s=g(o),c=h(a,s);return r.push({id:c,from:a,to:s}),r}}),e(`selected`,({pContext:{generatedId:e}})=>g(e))),linkSibling:t(e(`data.edges`,{ADD_SIBLING:({pContext:e,payload:t,context:{data:n}})=>{let r=i.toArray.typed(n?.edges),a=e?.generatedId,o=r.find(({to:e})=>e===t)?.from;if(!o)return r;let s=g(a),c=h(o,s);return r.push({from:o,to:s,id:c}),r}}),e(`selected`,({pContext:{generatedId:e}})=>g(e))),selectParent:e(`selected`,({pContext:{generatedId:e}})=>g(e)),moveNode:e(`data.nodes`,{MOVE:({context:{data:e},payload:{id:t,x:n,y:r}})=>e?.nodes?.map(e=>e.id===t?{...e,position:{x:n,y:r}}:e)}),delete:t(r(`data.edges`,{DELETE:({id:e,from:t,to:n},r,{payload:i})=>e!==i&&t!==i&&n!==i}),r(`data.nodes`,{DELETE:({id:e},t,{payload:n})=>e!==n})),addEdge:t(e(`data.edges`,{ADD_EDGE:({context:e,payload:{from:t,to:n}})=>{let r=e.data?.edges??[],i=h(t,n);return r.some(e=>e.id===i)?r:[...r,{id:i,from:t,to:n}]}}),n(`newEdge`)),zoom:e(`zoom`,{ZOOM:({context:{zoom:e},payload:t,pContext:n})=>{let r=e+t,i=Math.min(Math.max(Number(r.toFixed(2)),.2),3);return n.previousZoom=void 0,i}}),toggleZoom:e(`zoom`,{TOGGLE_ZOOM:({context:{zoom:e},pContext:t})=>{let n=t.previousZoom;return n===void 0?(t.previousZoom=e,1):(t.previousZoom=void 0,n)}}),placeChild:e(`data.nodes`,{ADD_CHILD:({payload:e,context:{data:t,board:n},pContext:r})=>{if(!n)return t?.nodes;let i=t?.nodes;if(!e)return i;let a=i?.find(t=>t.id===e);if(!a)return i;let o=r.dimensions[e],s=`node-${r.generatedId}`,c=o?.width??192,l=o?.height??50,u=a.position.x+c+100,d=a.position.y,f=r.clampPosition(n,u,d,c,l),p=r.calculateDimensions(f,o);return i?.push({id:s,data:{content:`<Nouveau nœud>`},input:!0,position:f}),r.dimensions[s]=p,i}}),placeParent:e(`data.nodes`,{ADD_PARENT:({context:{data:e,zoom:t=1,board:n},pContext:r})=>{if(!n)return e?.nodes;let i=e?.nodes,a=`node-${r.generatedId}`,o=n.parent,s=o?.scrollLeft??0,c=o?.scrollTop??0,l=o?.width??0,u=o?.height??0,d=t,f=(s+l/2)/d,p=(c+u/2)/d,m=r.clampPosition(n,f,p),h=r.calculateDimensions(m);return i?.push({id:a,data:{content:`<Nouveau nœud>`},input:!1,position:m}),r.dimensions[a]=h,i}}),placeSibling:e(`data.nodes`,{ADD_SIBLING:({payload:e,context:{data:t,board:n},pContext:r})=>{if(!n)return t?.nodes;let i=t?.edges,a=t?.nodes,o=i?.find(t=>t.to===e)?.from;if(!o)return a;let s=a?.find(e=>e.id===o);if(!s)return a;let c=r.dimensions[o],l=`node-${r.generatedId}`,u=c?.width??192,d=c?.height??50,f=s.position.x+u+100,p=s.position.y+100,m=r.clampPosition(n,f,p,u,d),h=r.calculateDimensions(m,c);return a?.push({id:l,data:{content:`<Nouveau nœud>`},input:!0,position:m}),r.dimensions[l]=h,a}}),moveNewEdge:e(`newEdge`,{MOVE_NEW_EDGE:({context:{newEdge:e,board:t},payload:n,pContext:r})=>{if(!t||!e)return;let{x:i,y:a}=r.getBoardPosition(n.x,n.y,t);return{...e,x1:i,y1:a}}})}})),[D,O]=f(()=>{let e=(0,r.interpret)(E,{context:{zoom:1,edgesPositions:{},bounds:{x:0,y:0}},pContext:{generatedId:null,dimensions:{},getBoardPosition:(t,n,r)=>{if(!r)return{x:t,y:n};let i=e.state.context.zoom;return{x:(t-r.self.left)/i,y:(n-r.self.top)/i}},clampPosition:(t,n,r,i=192,a=50)=>{let o=t?.parent;if(!o)return{x:n,y:r};let s=e.state.context.zoom??1,c=o.scrollLeft/s+u.horizontal,l=Math.max(c,(o.scrollLeft+o.width)/s-u.horizontal-i),d=o.scrollTop/s+u.vertical,f=Math.max(d,(o.scrollTop+o.height)/s-u.vertical-a);return{x:Math.min(Math.max(n,c),l),y:Math.min(Math.max(r,d),f)}},calculateDimensions:(e,t={width:192,height:50,inputOffset:c})=>{let n=t.width,r=t.height,i=t.outputOffset??l(n),a=t.inputOffset;return{width:n,height:r,output:{x:e.x+i.x,y:e.y+i.y},input:{x:e.x+a.x,y:e.y+a.y},outputOffset:i,inputOffset:a}}}});return e.start(),e},{name:`FlowContext`}),k=Object.prototype.hasOwnProperty;function A(e,t,n){for(n of e.keys())if(j(n,t))return n}function j(e,t){var n,r,i;if(e===t)return!0;if(e&&t&&(n=e.constructor)===t.constructor){if(n===Date)return e.getTime()===t.getTime();if(n===RegExp)return e.toString()===t.toString();if(n===Array){if((r=e.length)===t.length)for(;r--&&j(e[r],t[r]););return r===-1}if(n===Set){if(e.size!==t.size)return!1;for(r of e)if(i=r,i&&typeof i==`object`&&(i=A(t,i),!i)||!t.has(i))return!1;return!0}if(n===Map){if(e.size!==t.size)return!1;for(r of e)if(i=r[0],i&&typeof i==`object`&&(i=A(t,i),!i)||!j(r[1],t.get(i)))return!1;return!0}if(n===ArrayBuffer)e=new Uint8Array(e),t=new Uint8Array(t);else if(n===DataView){if((r=e.byteLength)===t.byteLength)for(;r--&&e.getInt8(r)===t.getInt8(r););return r===-1}if(ArrayBuffer.isView(e)){if((r=e.byteLength)===t.byteLength)for(;r--&&e[r]===t[r];);return r===-1}if(!n||typeof e==`object`){for(n in r=0,e)if(k.call(e,n)&&++r&&!k.call(t,n)||!(n in t)||!j(e[n],t[n]))return!1;return Object.keys(t).length===r}}return e!==e&&t!==t}var M=()=>{let e=O(),n=(0,t.createState)(e,{selector:({context:e})=>e.zoom}),r=(0,t.createState)(e,{selector:({context:e})=>e.board}),[i,{addTransformer:o,removeTransformer:s,onDragStart:c,onDragEnd:l}]=(0,a.useDragDropContext)(),d={id:`clamp-to-container`,order:100,callback:e=>{let t=r()?.self,a=i.active.draggable;if(!t||!a)return e;let o=a.node;if(!o)return e;let s=n(),c=u.horizontal,l=Math.max(c,t.width/s-o.offsetWidth-u.horizontal),d=u.vertical,f=Math.max(d,t.height/s-o.offsetHeight-u.vertical),p=(c-o.offsetLeft)*s,m=(l-o.offsetLeft)*s,h=(d-o.offsetTop)*s,g=(f-o.offsetTop)*s;return{x:Math.min(Math.max(e.x,p),m),y:Math.min(Math.max(e.y,h),g)}}};return c(({draggable:e})=>{o(`draggables`,e.id,d)}),l(({draggable:e})=>{s(`draggables`,e.id,d.id)}),null},N=(0,e.template)(`<svg><path class="relative cursor-pointer fill-transparent"></svg>`,!1,!0,!1),P=(0,e.template)(`<svg><g cursor=pointer style=pointer-events:all;z-index:30><circle cx=0 cy=0 r=12 fill="rgba(168, 168, 168, 1)"></circle><svg fill=currentColor stroke-width=0 xmlns=http://www.w3.org/2000/svg class="h-25 w-25 bg-white fill-white"width=20 height=20 viewBox="0 0 20 20"color=white x=-10 y=-10><path d="M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z"></svg>`,!1,!0,!1),F=e=>e*100/200,I=({x0:e,y0:t,x1:n,y1:r})=>`M ${e} ${t} C ${e+F(Math.abs(n-e))} ${t}, ${n-F(Math.abs(n-e))} ${r}, ${n} ${r}`,L=r=>{let i=O(),a=(0,t.createState)(i,{selector:({context:{newEdge:e,edgesPositions:t}})=>r.isNew?e:t[r.id],equals:j}),o=(0,t.createState)(i,{selector:e=>e.context.selected===r.id}),s=()=>{let e=a();return{x:e.x0+(e.x1-e.x0)/2,y:e.y0+(e.y1-e.y0)/2}};return[(()=>{var t=(0,e.getNextElement)(N);return t.$$mousedown=e=>(e.stopPropagation(),i.send({type:`SELECT`,payload:r.id})),(0,e.effect)(n=>{var i={"stroke-[rgba(168,168,168,0.4)] stroke-3 z-200":!!r.isNew,"stroke-[rgba(168,168,168,1)] stroke-4 z-100":o()&&!r.isNew,"stroke-[rgba(168,168,168,0.8)] stroke-3":!o()&&!r.isNew},s=r.isNew?`none`:`all`,c=I(a());return n.e=(0,e.classList)(t,i,n.e),s!==n.t&&(0,e.setStyleProperty)(t,`pointer-events`,n.t=s),c!==n.a&&(0,e.setAttribute)(t,`d`,n.a=c),n},{e:void 0,t:void 0,a:void 0}),(0,e.runHydrationEvents)(),t})(),(0,e.createComponent)(n.Show,{get when(){return o()},get children(){var t=(0,e.getNextElement)(P);return t.$$mousedown=e=>{e.stopPropagation(),i.send({type:`DELETE`,payload:r.id})},(0,e.effect)(()=>(0,e.setAttribute)(t,`transform`,`translate(${s().x}, ${s().y})`)),(0,e.runHydrationEvents)(),t}})]};(0,e.delegateEvents)([`mousedown`]);var R=(0,e.template)(`<svg class="pointer-events-none h-full w-full overflow-visible"><!$><!/><!$><!/>`),z=()=>{let r=O(),i=(0,t.createState)(r,{selector:e=>!!e.context.newEdge}),a=(0,t.createState)(r,{selector:({context:e})=>Object.keys(e.edgesPositions),equals:(e,t)=>e.length===t.length});return(()=>{var t=(0,e.getNextElement)(R),r=t.firstChild,[o,s]=(0,e.getNextMarker)(r.nextSibling),c=o.nextSibling,[l,u]=(0,e.getNextMarker)(c.nextSibling);return(0,e.insert)(t,(0,e.createComponent)(n.Show,{get when(){return i()},get children(){return(0,e.createComponent)(L,{id:`__#new-edge#__TEMP`,isNew:!0})}}),o,s),(0,e.insert)(t,(0,e.createComponent)(n.For,{get each(){return a()},children:t=>(0,e.createComponent)(L,{id:t})}),l,u),t})()},B=(0,e.template)(`<svg class="cursor-pointer overflow-visible rounded-full bg-green-500 p-0.5 text-center font-bold hover:bg-green-600"viewBox="0 0 1024 1024"preserveAspectRatio=xMaxYMax xmlns=http://www.w3.org/2000/svg fill=white style=pointer-events:all;fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2><g id=background><path d="M467.40667,277.66696c-0.05948,-14.53055 5.75527,-22.95613 -8.62044,-20.90487c-112.55699,16.0607 -222.1609,112.14558 -245.06161,239.85765c-46.52056,259.43466 231.33083,443.06705 449.51209,316.97506c117.31668,-67.80002 160.95215,-190.43324 151.34416,-288.29849c-5.92276,-60.32819 -27.80273,-107.95668 -53.44246,-144.25469l59.39269,-42.05363c111.72214,156.309 73.11535,351.55635 -25.06953,459.45565c-184.18877,202.4124 -470.46624,145.52064 -592.95027,-32.92123c-156.18269,-227.53604 -27.15324,-543.64371 261.18883,-582.44416c5.0579,-0.68061 3.56556,-7.04079 3.56442,-8.58985c-0.05594,-76.3354 -0.11021,-76.7687 1.10909,-77.24589c2.06886,-0.80969 151.41433,118.4561 151.92482,118.95524c4.65592,4.55233 -0.99548,7.829 -29.07828,30.50907c-120.49369,97.31245 -120.4977,98.55675 -123.0691,97.87586c-0.43639,-0.11555 -0.80698,-0.31322 -0.74442,-66.91571Z"></path><path d="M316.61562,611.03414c0.11517,-90.16257 -0.25516,-99.92912 0.64739,-101.78856c1.56486,-3.22393 131.99102,0.91032 134.6959,-1.89763c2.21336,-2.2977 -0.59362,-129.97807 1.1376,-132.37034c0.7253,-1.00225 11.10552,-0.99175 12.07474,-0.99077c104.50336,0.10564 104.90098,-0.37811 105.967,0.85765c1.56461,1.81373 0.25596,114.18436 0.67852,129.81412c0.1322,4.88975 3.22386,3.28152 99.72028,3.4563c33.0841,0.05992 36.14259,-1.40368 36.21852,4.50462c0.11713,9.11348 1.41954,110.45369 -0.40274,113.92715c-1.81106,3.45208 -130.39967,-0.42618 -134.48289,1.62075c-2.29035,1.14816 -0.36989,101.12392 -1.11542,130.51904c-0.09548,3.76459 -2.13506,3.20617 -47.84854,3.17365c-69.30253,-0.0493 -69.31099,-0.25627 -69.65762,-0.42191c-3.77927,-1.80595 0.16287,-129.33555 -2.24266,-132.58994c-1.79931,-2.43424 -124.06108,-0.29118 -132.80252,-0.97392c-3.81102,-0.29766 -2.58229,-14.8847 -2.58758,-16.8402Z">`),V=(0,e.template)(`<div id=inputs class="pointer-events-none absolute top-0 z-10 flex cursor-default flex-col"><div class="cursor-default rounded-full bg-[#e38b29] shadow-md"style=pointer-events:all>`),H=(0,e.template)(`<div class=min-w-48><div><svg class="cursor-pointer rounded-full fill-[#a11111] opacity-100 transition-all duration-200 ease-in-out"fill=currentColor stroke-width=2 viewBox="4 4 16 16"style=overflow:visible;pointer-events:all><path d="M12 4c-4.419 0-8 3.582-8 8s3.581 8 8 8 8-3.582 8-8-3.581-8-8-8zm3.707 10.293a.999.999 0 11-1.414 1.414L12 13.414l-2.293 2.293a.997.997 0 01-1.414 0 .999.999 0 010-1.414L10.586 12 8.293 9.707a.999.999 0 111.414-1.414L12 10.586l2.293-2.293a.999.999 0 111.414 1.414L13.414 12l2.293 2.293z"></path></svg><!$><!/><svg class="flex cursor-pointer items-center justify-center rounded-lg bg-blue-500 p-0.5 text-center font-bold text-white hover:bg-blue-600"viewBox="0 0 24 24"stroke=currentColor stroke-width=2 style=pointer-events:all><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg></div><!$><!/><!$><!/><!$><!/><div id=outputs class="pointer-events-none absolute top-0 z-10 flex flex-col"><div class="cursor-crosshair rounded-full bg-[#e38b29] shadow-md"style=pointer-events:all>`),U=(0,e.template)(`<span class="min-w-max border-b border-[#f0f0f0] p-3 whitespace-nowrap text-red-600 select-none">`),W=(0,e.template)(`<div class="p-3 select-none">`),G=i=>{let o=O(),s=(0,t.createState)(o,{selector:e=>e.context.newEdge}),c=(0,a.createDraggable)(i.id),l=(0,t.createState)(o,{selector:({context:e})=>{let t=r.toArray.typed(e.data?.nodes).find(e=>e.id===i.id);return{x:t.position.x,y:t.position.y,label:t.data.label,content:t.data.content??``,input:t.input}},equals:j}),u=(0,t.createState)(o,{selector:({context:e})=>e.selected===i.id}),d=(0,t.createState)(o,{selector:({context:{data:e}})=>{let t=e?.edges;return t?t.some(({to:e})=>e===i.id):!1}});return(()=>{var t=(0,e.getNextElement)(H),r=t.firstChild,a=r.firstChild,f=a.nextSibling,[p,m]=(0,e.getNextMarker)(f.nextSibling),h=p.nextSibling,g=r.nextSibling,[_,v]=(0,e.getNextMarker)(g.nextSibling),y=_.nextSibling,[b,x]=(0,e.getNextMarker)(y.nextSibling),S=b.nextSibling,[C,w]=(0,e.getNextMarker)(S.nextSibling),T=C.nextSibling,E=T.firstChild;return t.$$mousedown=e=>{e.stopPropagation(),o.send({type:`SELECT`,payload:i.id})},(0,e.use)(c,t,()=>({skipTransform:!0})),a.$$click=e=>{e.stopPropagation(),o.send({type:`DELETE`,payload:i.id})},(0,e.setStyleProperty)(a,`width`,`24px`),(0,e.setStyleProperty)(a,`height`,`24px`),(0,e.insert)(r,(0,e.createComponent)(n.Show,{get when(){return d()},get children(){var t=(0,e.getNextElement)(B);return t.$$click=()=>o.send({type:`ADD_SIBLING`,payload:i.id}),(0,e.setStyleProperty)(t,`width`,`24px`),(0,e.setStyleProperty)(t,`height`,`24px`),(0,e.runHydrationEvents)(),t}}),p,m),h.$$click=()=>o.send({type:`ADD_CHILD`,payload:i.id}),(0,e.setStyleProperty)(h,`width`,`24px`),(0,e.setStyleProperty)(h,`height`,`24px`),(0,e.insert)(t,(0,e.createComponent)(n.Show,{get when(){return l().label},keyed:!0,children:t=>(()=>{var n=(0,e.getNextElement)(U);return(0,e.insert)(n,t),n})()}),_,v),(0,e.insert)(t,(0,e.createComponent)(n.Show,{get when(){return l().content},keyed:!0,children:t=>(()=>{var n=(0,e.getNextElement)(W);return(0,e.insert)(n,t),n})()}),b,x),(0,e.insert)(t,(0,e.createComponent)(n.Show,{get when(){return l().input||d()},get children(){var t=(0,e.getNextElement)(V),n=t.firstChild;return(0,e.setStyleProperty)(t,`left`,`-18px`),n.$$mouseup=e=>{e.stopPropagation();let t=s()?.from;t?o.send({type:`ADD_EDGE`,payload:{from:t,to:i.id}}):o.send(`CLEAR_NEW_EDGE`)},n.$$mousedown=e=>{e.stopPropagation()},(0,e.setStyleProperty)(n,`width`,`12px`),(0,e.setStyleProperty)(n,`height`,`12px`),(0,e.setStyleProperty)(n,`margin-top`,`12px`),(0,e.runHydrationEvents)(),t}}),C,w),(0,e.setStyleProperty)(T,`right`,`-18px`),E.$$mousedown=e=>{e.stopPropagation(),o.send(`DESELECT`),o.send({type:`START_NEW_EDGE`,payload:i.id})},(0,e.setStyleProperty)(E,`width`,`12px`),(0,e.setStyleProperty)(E,`height`,`12px`),(0,e.setStyleProperty)(E,`margin-top`,`12px`),(0,e.effect)(n=>{var a={"flex flex-col absolute cursor-grab bg-white rounded-md shadow-md select-none transition-[border,box-shadow] duration-200 ease-in-out hover:shadow-lg draggable":!0,"border border-[#e38c29] z-[100]":u(),"border border-[#e6d4be] z-[1]":!u()},o=`${l().y}px`,s=`${l().x}px`,c=i.id,d={"pointer-events-none absolute flex items-center justify-end -top-7.5 right-0 transition-all duration-200 ease-in-out space-x-2":!0,"w-full opacity-100":u(),"w-0 -right-3 opacity-0 overflow-hidden":!u()};return n.e=(0,e.classList)(t,a,n.e),o!==n.t&&(0,e.setStyleProperty)(t,`top`,n.t=o),s!==n.a&&(0,e.setStyleProperty)(t,`left`,n.a=s),c!==n.o&&(0,e.setAttribute)(t,`id`,n.o=c),n.i=(0,e.classList)(r,d,n.i),n},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0}),(0,e.runHydrationEvents)(),t})()};(0,e.delegateEvents)([`mousedown`,`click`,`mouseup`]);var K=(0,e.template)(`<div class="relative h-full w-full overflow-auto rounded-lg border-2 border-gray-600"><!$><!/><div class="relative cursor-crosshair overflow-hidden"><div class="relative h-full w-full"style="transform-origin:top left"><!$><!/><!$><!/><!$><!/>`),q=(0,e.template)(`<div class="absolute right-4 bottom-4 z-50 flex items-center gap-2 rounded-xl border border-gray-200 bg-white/90 p-2 shadow-lg backdrop-blur-md"><button type=button class="flex size-9 cursor-pointer items-center justify-center rounded-lg bg-gray-100 text-lg font-bold text-gray-700 shadow-sm transition-all duration-150 hover:bg-gray-200 active:scale-95"title="Zoom out"aria-label="Zoom out">-</button><button type=button class="h-9 cursor-pointer rounded-lg px-2 text-xs font-semibold text-gray-700 transition-colors hover:bg-gray-100"title="Reset zoom"aria-label="Reset zoom"><!$><!/>%</button><button type=button class="flex size-9 cursor-pointer items-center justify-center rounded-lg bg-gray-100 text-lg font-bold text-gray-700 shadow-sm transition-all duration-150 hover:bg-gray-200 active:scale-95"title="Zoom in"aria-label="Zoom in">+</button><div class="h-5 w-px bg-gray-300"></div><button type=button class="flex size-9 cursor-pointer items-center justify-center rounded-lg bg-blue-600 text-white shadow transition-all duration-150 hover:bg-blue-700 active:scale-95"title="Add parent node"aria-label="Add parent node"><svg class=size-5 viewBox="0 0 24 24"fill=currentColor><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">`),J=(0,e.template)(`<div class="relative mx-auto h-[calc(100vh-64px)] w-[calc(100vw-32px)] overflow-hidden">`),Y=()=>{let i,[o,s]=(0,n.createSignal)(!1),[c,l]=(0,n.createSignal)({x:0,y:0}),[u,d]=(0,n.createSignal)(),f=0,p=0,m=O(),h=(0,t.createState)(m,{selector:e=>e.context.newEdge,equals:j}),g=(0,t.createState)(m,{selector:e=>e.context.zoom??1}),_=()=>{let e=u();if(!e)return;let t=e.getBoundingClientRect(),n=()=>u()?.parentElement,r={self:{left:t.left,top:t.top,width:e.clientWidth,height:e.clientHeight},parent:n()?{scrollLeft:n().scrollLeft,scrollTop:n().scrollTop,height:n().clientHeight,width:n().clientWidth}:void 0};m.send({type:`SET_BOARD`,payload:r})},v=()=>{let e=i.scrollWidth-i.clientWidth,t=i.scrollHeight-i.clientHeight;f=e>0?i.scrollLeft/e:0,p=t>0?i.scrollTop/t:0,_()};(0,n.createEffect)((0,n.on)(g,()=>{let e=i.scrollWidth-i.clientWidth,t=i.scrollHeight-i.clientHeight;e>0&&(i.scrollLeft=f*e),t>0&&(i.scrollTop=p*t)},{defer:!0})),(0,n.onMount)(_);let y=(0,t.createState)(m,{selector:e=>e.context?.selected}),b=(0,t.createState)(m,{selector:({context:e})=>r.toArray.typed(e.data?.nodes).map(e=>e.id),equals:(e,t)=>e.length===t.length}),x=()=>`calc((500vw - 265px) * ${g()})`,S=()=>`calc((500vh - 425px) * ${g()})`;return(()=>{var t=(0,e.getNextElement)(J);return t.addEventListener(`wheel`,e=>{if(e.ctrlKey||e.metaKey){e.preventDefault(),v();let t=e.deltaY<0?.1:-.1;m.send({type:`ZOOM`,payload:t})}}),(0,e.insert)(t,(0,e.createComponent)(a.DragDropProvider,{onDragMove:({draggable:{transform:e,node:t,id:n}})=>{let r=t.parentElement?.parentElement,i=g(),a=r?Math.max(0,r.clientWidth/i-t.offsetWidth):1/0,o=r?Math.max(0,r.clientHeight/i-t.offsetHeight):1/0,s=t.offsetLeft+e.x/i,c=t.offsetTop+e.y/i,u=Math.min(Math.max(s,0),a),d=Math.min(Math.max(c,0),o),f=u-t.offsetLeft,p=d-t.offsetTop;t.style.setProperty(`transform`,`translate3d(${f}px, ${p}px, 0)`),m.send({type:`MOVE_IMMEDIATE`,payload:{id:`${n}`,x:u,y:d}}),l({x:f*i,y:p*i})},onDragEnd:({draggable:{node:e,id:t}})=>{let n=e.parentElement?.parentElement,r=g(),i=n?Math.max(0,n.clientWidth/r-e.offsetWidth):1/0,a=n?Math.max(0,n.clientHeight/r-e.offsetHeight):1/0,o=e.offsetLeft+c().x/r,s=e.offsetTop+c().y/r,u=Math.min(Math.max(o,0),i),d=Math.min(Math.max(s,0),a);e.style.setProperty(`top`,d+`px`),e.style.setProperty(`left`,u+`px`),e.style.removeProperty(`transform`),m.send({type:`MOVE`,payload:{id:`${t}`,x:u,y:d}}),setTimeout(()=>{l({x:0,y:0})},0)},get children(){return[(()=>{var t=(0,e.getNextElement)(K),r=t.firstChild,[c,l]=(0,e.getNextMarker)(r.nextSibling),u=c.nextSibling,f=u.firstChild,p=f.firstChild,[_,y]=(0,e.getNextMarker)(p.nextSibling),C=_.nextSibling,[w,T]=(0,e.getNextMarker)(C.nextSibling),E=w.nextSibling,[D,O]=(0,e.getNextMarker)(E.nextSibling);return t.addEventListener(`scroll`,v),(0,e.use)(e=>i=e,t),(0,e.insert)(t,(0,e.createComponent)(a.DragDropSensors,{}),c,l),u.$$mousedown=e=>{if(h()||e.button!==0)return;m.send(`DESELECT`),s(!0);let t=e.clientX,n=e.clientY,r=i.scrollLeft,a=i.scrollTop,o=e=>{let o=e.clientX-t,s=e.clientY-n;i.scrollLeft=r-o*3,i.scrollTop=a-s*3,v()},c=()=>{window.removeEventListener(`mousemove`,o),window.removeEventListener(`mouseup`,c),setTimeout(()=>s(!1),200)};window.addEventListener(`mousemove`,o),window.addEventListener(`mouseup`,c)},(0,e.use)(d,u),(0,e.insert)(f,(0,e.createComponent)(M,{}),_,y),(0,e.insert)(f,(0,e.createComponent)(z,{}),w,T),(0,e.insert)(f,(0,e.createComponent)(n.For,{get each(){return b()},children:t=>(0,e.createComponent)(G,{id:t})}),D,O),(0,e.effect)(t=>{var n=!!o(),r=S(),i=x(),a=g();return n!==t.e&&u.classList.toggle(`cursor-grabbing`,t.e=n),r!==t.t&&(0,e.setStyleProperty)(u,`height`,t.t=r),i!==t.a&&(0,e.setStyleProperty)(u,`width`,t.a=i),a!==t.o&&(0,e.setStyleProperty)(f,`scale`,t.o=a),t},{e:void 0,t:void 0,a:void 0,o:void 0}),(0,e.runHydrationEvents)(),t})(),(()=>{var t=(0,e.getNextElement)(q),n=t.firstChild,r=n.nextSibling,i=r.firstChild,[a,o]=(0,e.getNextMarker)(i.nextSibling);a.nextSibling;var s=r.nextSibling,c=s.nextSibling.nextSibling;return n.$$click=()=>{v(),m.send({type:`ZOOM`,payload:-.1})},r.$$click=()=>{v(),m.send(`TOGGLE_ZOOM`)},(0,e.insert)(r,()=>Math.round(g()*100),a,o),s.$$click=()=>{v(),m.send({type:`ZOOM`,payload:.1})},c.$$click=()=>m.send(`ADD_PARENT`),(0,e.runHydrationEvents)(),t})(),(0,e.createComponent)(n.Show,{get when(){return!y()},get children(){return(0,e.createComponent)(a.DragOverlay,{children:``})}})]}})),t})()};(0,e.delegateEvents)([`mousedown`,`click`]);var X=(0,e.template)(`<div class="relative h-full w-full"><div class="relative h-full w-full bg-white bg-size-[30px_30px]"style="background-image:radial-gradient(circle, #b8b8b8bf 1px, rgba(0, 0, 0, 0) 1px)">`),Z=r=>{let i=r.config?.nodes??d,a=r.config?.edges,o=O(),s=(0,t.createState)(o,{selector:e=>!!e.context.newEdge});return(0,n.onCleanup)(o.pause),(0,n.onMount)(()=>{o.resume(),o.send({type:`CONFIGURE`,payload:{nodes:i,edges:a??[]}})}),(()=>{var t=(0,e.getNextElement)(X),n=t.firstChild;return t.$$mousemove=({clientX:e,clientY:t})=>{s()&&o.send({type:`MOVE_NEW_EDGE`,payload:{x:e,y:t}})},t.$$mouseup=()=>o.send(`CLEAR_NEW_EDGE`),(0,e.insert)(n,(0,e.createComponent)(Y,{})),(0,e.effect)(t=>(0,e.setStyleProperty)(n,`cursor`,s()?`inherit`:`crosshair`)),(0,e.runHydrationEvents)(),t})()};(0,e.delegateEvents)([`mouseup`,`mousemove`]);var Q=t=>(0,e.createComponent)(D,{get children(){return(0,e.createComponent)(Z,t)}});exports.CLASSES=o,exports.Flow=Q;
|