@stackmango/graff 0.1.13 → 0.1.14

package/dist/js/index.cjs

@@ -210,4 +210,4 @@ To suppress this warning, you need to explicitly provide the \`palette.${t}Chann
         C ${c.x} ${c.y},
           ${u.x} ${u.y},
           ${s.x} ${s.y}
-      `},[e.design.from.position,e.design.to.position]);return Ee.jsxs("g",{children:[Ee.jsx("circle",{cx:e.design.from.position.x+"px",cy:e.design.from.position.y+"px",r:t?.data?.connectionTipRadius,fill:`rgba(0,0,0,${r?.5:1})`,onMouseDown:i=>{console.log("Drrrrrrr from"),n?.dispatch({startPosition:{x:i.clientX,y:i.clientY},elementDragged:{type:"connection-tip",id:e.id+"/from"}})},onMouseUp:()=>{n?.dispatch(null)}}),Ee.jsx("path",{d:a,stroke:e.design.previewStatus=="NORMAL"?r?"grey":"black":e.design.previewStatus=="COMPATIBLE"?"green":"red",strokeWidth:t?.data?.connectionThickness,fill:"none"}),Ee.jsx("circle",{cx:e.design.to.position.x+"px",cy:e.design.to.position.y+"px",r:t?.data?.connectionTipRadius,fill:`rgba(0,0,0,${r?.5:1})`,onMouseDown:i=>{console.log("Drrrrrrr to"),n?.dispatch({startPosition:{x:i.clientX,y:i.clientY},elementDragged:{type:"connection-tip",id:e.id+"/to"}})},onMouseUp:()=>{n?.dispatch(null)}})]})};function Op(e){return`Minified Redux error #${e}; visit https://redux.js.org/Errors?code=${e} for the full message or use the non-minified dev environment for full errors. `}var Fd=()=>Math.random().toString(36).substring(7).split("").join("."),bz={INIT:`@@redux/INIT${Fd()}`,REPLACE:`@@redux/REPLACE${Fd()}`,PROBE_UNKNOWN_ACTION:()=>`@@redux/PROBE_UNKNOWN_ACTION${Fd()}`},ka=bz;function gz(e){if(typeof e!="object"||e===null)return!1;let t=e;for(;Object.getPrototypeOf(t)!==null;)t=Object.getPrototypeOf(t);return Object.getPrototypeOf(e)===t||Object.getPrototypeOf(e)===null}function yz(e){if(e===void 0)return"undefined";if(e===null)return"null";const t=typeof e;switch(t){case"boolean":case"string":case"number":case"symbol":case"function":return t}if(Array.isArray(e))return"array";if(wz(e))return"date";if(xz(e))return"error";const n=vz(e);switch(n){case"Symbol":case"Promise":case"WeakMap":case"WeakSet":case"Map":case"Set":return n}return Object.prototype.toString.call(e).slice(8,-1).toLowerCase().replace(/\s/g,"")}function vz(e){return typeof e.constructor=="function"?e.constructor.name:null}function xz(e){return e instanceof Error||typeof e.message=="string"&&e.constructor&&typeof e.constructor.stackTraceLimit=="number"}function wz(e){return e instanceof Date?!0:typeof e.toDateString=="function"&&typeof e.getDate=="function"&&typeof e.setDate=="function"}function Sz(e){let t=typeof e;return process.env.NODE_ENV!=="production"&&(t=yz(e)),t}function ax(e){typeof console<"u"&&typeof console.error=="function"&&console.error(e);try{throw new Error(e)}catch{}}function Oz(e,t,n,r){const a=Object.keys(t),i=n&&n.type===ka.INIT?"preloadedState argument passed to createStore":"previous state received by the reducer";if(a.length===0)return"Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.";if(!gz(e))return`The ${i} has unexpected type of "${Sz(e)}". Expected argument to be an object with the following keys: "${a.join('", "')}"`;const s=Object.keys(e).filter(l=>!t.hasOwnProperty(l)&&!r[l]);if(s.forEach(l=>{r[l]=!0}),!(n&&n.type===ka.REPLACE)&&s.length>0)return`Unexpected ${s.length>1?"keys":"key"} "${s.join('", "')}" found in ${i}. Expected to find one of the known reducer keys instead: "${a.join('", "')}". Unexpected keys will be ignored.`}function kz(e){Object.keys(e).forEach(t=>{const n=e[t];if(typeof n(void 0,{type:ka.INIT})>"u")throw new Error(process.env.NODE_ENV==="production"?Op(12):`The slice reducer for key "${t}" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined.`);if(typeof n(void 0,{type:ka.PROBE_UNKNOWN_ACTION()})>"u")throw new Error(process.env.NODE_ENV==="production"?Op(13):`The slice reducer for key "${t}" returned undefined when probed with a random type. Don't try to handle '${ka.INIT}' or other actions in "redux/*" namespace. They are considered private. Instead, you must return the current state for any unknown actions, unless it is undefined, in which case you must return the initial state, regardless of the action type. The initial state may not be undefined, but can be null.`)})}function Ih(e){const t=Object.keys(e),n={};for(let s=0;s<t.length;s++){const l=t[s];process.env.NODE_ENV!=="production"&&typeof e[l]>"u"&&ax(`No reducer provided for key "${l}"`),typeof e[l]=="function"&&(n[l]=e[l])}const r=Object.keys(n);let a;process.env.NODE_ENV!=="production"&&(a={});let i;try{kz(n)}catch(s){i=s}return function(l={},c){if(i)throw i;if(process.env.NODE_ENV!=="production"){const p=Oz(l,n,c,a);p&&ax(p)}let u=!1;const d={};for(let p=0;p<r.length;p++){const h=r[p],m=n[h],b=l[h],f=m(b,c);if(typeof f>"u"){const g=c&&c.type;throw new Error(process.env.NODE_ENV==="production"?Op(14):`When called with an action of type ${g?`"${String(g)}"`:"(unknown type)"}, the slice reducer for key "${h}" returned undefined. To ignore an action, you must explicitly return the previous state. If you want this reducer to hold no value, you can return null instead of undefined.`)}d[h]=f,u=u||f!==b}return u=u||r.length!==Object.keys(l).length,u?d:l}}const Ez=(e,t)=>{const n=e?{...e}:null;switch(t.type){case"set-selection_area":return t.payload;case"clear-selection_area":return null}return n},Cz=(e,t)=>{const n=e?{...e}:{node:[],connection:[]};switch(t.type){case"set-selectedItems":return t.payload;case"select":n[t.payload.type].find(a=>a!=t.payload.id)?n[t.payload.type]=n[t.payload.type].filter(a=>a!=t.payload.id):n[t.payload.type].push(t.payload.id);break;case"add-selection":n?.[t.payload.type].push(t.payload.id);break;case"remove-selection":n.node=n?.node.filter(a=>a!=t.payload),n.connection=n?.connection.filter(a=>a!=t.payload);break;case"reset":n.node=[],n.connection=[];break}return n},Tz=(e={},t)=>{const n={...e};switch(t.type){case"add-node":n[Mo()]=t.payload;break;case"add-node-byId":let r={...t.payload};delete r.id,n[t.payload.id]=r;break;case"add-node-port":break;case"remove-node":delete n[t.payload];break;case"update-node":n[t.payload.id]=t.payload.updatedNode;break;case"set-node-ports":n[t.payload.nodeId].ports=t.payload.ports;break;case"set-node-ports-input":n[t.payload.nodeId].ports.input=t.payload.ports;break;case"set-node-ports-output":n[t.payload.nodeId].ports.output=t.payload.ports;break;case"add-node-ports-output":n[t.payload.nodeId].ports.output={...n[t.payload.nodeId].ports.output,...t.payload.ports};break;case"remove-node-ports-output":const i=Object.keys(n[t.payload.nodeId].ports.output).filter(s=>!t.payload.ports.find(l=>l==s)).reduce((s,l)=>({...s,[l]:n[t.payload.nodeId].ports.output[l]}),{});n[t.payload.nodeId].ports.output=i;break;case"set-node-label":n[t.payload.nodeId].meta.label=t.payload.label;break;case"set-node-core":n[t.payload.nodeId].core=t.payload.data;break}return n},jz=(e={},t)=>{const n={...e};switch(t.type){case"init-node-view":n[t.payload.nodeId]={position:t.payload.position,isSelected:t.payload.isSelected??!1};break;case"move-node":n[t.payload.nodeId]?n[t.payload.nodeId].position=Ge.add(n[t.payload.nodeId].position,t.payload.motionVector):console.log("Callying no node");break}return n},Dz=(e={},t)=>{const n={...e};switch(t.type){case"add-connection":n[Mo()]=t.payload;break;case"add-connection-byId":let r={...t.payload};delete r.id,n[t.payload.id]=r;break;case"set-connection-from-port":n[t.payload.connectionId].from=t.payload.portId;break;case"set-connection-to-port":n[t.payload.connectionId].to=t.payload.portId;break}return n},Pz=(e={},t)=>{const n={...e};switch(t.type){case"init-connection":n[t.payload.connectionId]={from:{position:t.payload.from},to:{position:t.payload.to}};break;case"set-connection-from-position":n[t.payload.connectionId].from.position=t.payload.position;break;case"set-connections-from-position":Object.keys(t.payload).forEach(r=>{n[r].from.position=t.payload[r]});break;case"set-connection-to-position":n[t.payload.connectionId].to.position=t.payload.position;break;case"move-connectiontip":n[t.payload.connectionId]&&(t.payload.type=="from"?n[t.payload.connectionId].from.position=Ge.add(n[t.payload.connectionId].from.position,t.payload.offset):n[t.payload.connectionId].to.position=Ge.add(n[t.payload.connectionId].to.position,t.payload.offset));break}return n},Mz=(e,t)=>{const n={...e};switch(t.type){case"add-connection":n[Mo()]={portStatus:"NO_PORT",...t.payload};break;case"add-connection-byId":let r={...t.payload};delete r.id,n[t.payload.id]={portStatus:"NO_PORT",...r};break;case"set-connection-from-port":n[t.payload.connectionId].skeleton.from=t.payload.portId;break;case"set-connection-to-port":n[t.payload.connectionId].skeleton.to=t.payload.portId;break;case"init-connection-position":n[t.payload.connectionId].design={from:{position:t.payload.from},to:{position:t.payload.to}};break;case"set-connection-from-position":n[t.payload.connectionId].design.from.position=t.payload.position;break;case"set-connection-to-position":n[t.payload.connectionId].design.to.position=t.payload.position;break;case"move-connectiontip":n[t.payload.connectionId]&&(t.payload.type=="from"?n[t.payload.connectionId].design.from.position=Ge.add(n[t.payload.connectionId].design.from.position,t.payload.offset):n[t.payload.connectionId].design.to.position=Ge.add(n[t.payload.connectionId].design.to.position,t.payload.offset));break;case"set-port_status":n[t.payload.connectionId].portStatus=t.payload.status;break;case"remove-connection":delete n[t.payload.connectionId];break;case"remove-connections":t.payload.connectionId.forEach(a=>{delete n[a]});break}return n},Rz=(e,t)=>{let n={...e};switch(t.type){case"set-document-position":n=t.payload;break;case"move-document":n=Ge.add(n,{x:t.payload.speed*t.payload.direction.x,y:t.payload.speed*t.payload.direction.y});break}return n},Nz=(e,t)=>{let n={...e};return t.type==="set-viewport-position"&&(n=t.payload),n},Iz=Ih({nodes:Tz,connections:Dz}),Az=Ih({nodes:jz,connections:Pz,viewportPosition:Nz,documentPosition:Rz}),_z=Ih({connections:Mz,selection:Ez,selectedItems:Cz}),Fz=e=>({type:"dummy",ports:{input:{i1:{meta:{index:0}}},output:{o1:{meta:{index:0}}}},core:{type:e,...e=="object"?{properties:1}:e=="array"?{items:1}:{}},meta:{label:e.toLocaleUpperCase(),type:"task"},editRules:{ports:{input:!1,ouput:!1}}}),$z=e=>{const[t,n]=D.useReducer(e.Assets.reducer,e.Assets.initialState),[r,a]=D.useReducer(e.View.reducer,e.View.initialState),[i,s]=D.useReducer(e.Interaction.reducer,e.Interaction.initialState),l=D.useRef(e.Config.initialState).current;return{assets:{data:t,dispatch:n},view:{data:r,dispatch:a},interaction:{data:i,dispatch:s},config:{data:l}}},ra={key:{schema:{type:"string",title:"Field Key",description:"Key"},component:"textbox",reducer:Et},title:{schema:{type:"string",title:"Label",description:"Human-readable label"},component:"textbox",reducer:Et},description:{schema:{type:"string",title:"Description",description:"Help text or tooltip"},component:"textbox",reducer:Et},default:{schema:{type:"string",title:"Default Value",description:"Default value for the field"},component:"textbox",reducer:Et},readOnly:{schema:{type:"boolean",title:"Read Only"},component:"toggle",reducer:qa}},Vz={const:{schema:{type:"string",title:"Constant value",description:"Locks the field to a single value"},component:"textbox",reducer:Et},minLength:{schema:{type:"integer",title:"Minimum length",minimum:0},component:"textbox",reducer:Et},maxLength:{schema:{type:"integer",title:"Maximum length",minimum:0},component:"textbox",reducer:Et},pattern:{schema:{type:"string",title:"Regex pattern",description:"ECMAScript regular expression"},component:"textbox",reducer:Et},format:{schema:{type:"string",title:"Format",description:"Semantic format hint (email, uri, date, etc.)"},component:"textbox",reducer:Et}},Bz={minimum:{schema:{type:"number",title:"Minimum"},component:"textbox",config:{dataType:"float"},reducer:Et},maximum:{schema:{type:"number",title:"Maximum"},component:"textbox",config:{dataType:"float"},reducer:Et},exclusiveMinimum:{schema:{type:"boolean",title:"Exclusive Minimum"},component:"toggle",reducer:qa},multipleOf:{schema:{type:"number",title:"Multiple Of"},component:"textbox",config:{dataType:"integer"},reducer:Et}},Lz={minItems:{schema:{type:"number",title:"Min Items"},component:"textbox",config:{dataType:"integer"},reducer:Et},maxItems:{schema:{type:"number",title:"Max Items"},component:"textbox",config:{dataType:"integer"},reducer:Et},uniqueItems:{schema:{type:"boolean",title:"Unique Items"},component:"toggle",reducer:qa},items:{schema:{type:"number",title:"Items"},component:"textbox",config:{dataType:"integer"},reducer:Et}},zz={items:{schema:{type:"number",title:"Items"},component:"textbox",config:{dataType:"integer"},reducer:Et},required:{schema:{type:"number",title:"Required Items"},component:"textbox",reducer:Et},additionalProperties:{schema:{type:"boolean",title:"Allow Additional Properties"},component:"toggle",reducer:qa}},Hz={string:{...ra,...Vz},number:{...ra,...Bz},boolean:ra,array:{...ra,...Lz},object:{...ra,...zz}},dO=D.createContext(null),Wz=e=>{const t=e.config.stateFetcher();return Ee.jsxs("div",{className:"flexbox-row",style:{width:t?.config?.data?.nodeDimensions?.width,height:t?.config?.data?.nodeDimensions?.height},children:[Ee.jsx("div",{className:"fullheight flexbox-column flexbox-center",style:{alignSelf:"stretch"},children:Object.keys(t?.assets.data.nodes[e.id].ports?.input??{}).map(n=>Ee.jsxs(Oa,{dragSetter:r=>t?.dragSession.dispatch(r),dragItem:{id:e.id+"/input/"+n,type:"port"},style:{width:t?.config.data?.portRadius,height:t?.config.data?.portSlabHeight,borderRadius:100,zIndex:1,position:"relative"},class:"flexbox-row flexbox-center",children:[Ee.jsx("div",{style:{width:t?.config.data?.portRadius,height:t?.config.data?.portRadius,borderRadius:100,backgroundColor:"rgba(0,0,0,0.5)",transform:"translateX(50%)"}}),Ee.jsx("span",{className:"curve shadow white-bg absolute",style:{padding:5,right:"100%",top:0}})]}))}),Ee.jsx(Oa,{id:"node-drag_wrapper",excludeParent:!0,dragSetter:t?.dragSession.dispatch,dragItem:{id:e.id,type:"node"},class:"flexbox-row flexbox-row-fit fullheight",children:Ee.jsx("div",{className:"fullwidth fullheight curve shadow padding flexbox-column gap",style:{backgroundColor:"white",alignSelf:"stretch",border:`${t?.interaction?.data.selectedItems.node.find(n=>n==e.id)?2:0}px solid rgba(51, 153, 255, 0.4)`},children:e.children})}),Ee.jsx("div",{className:"fullheight flexbox-column flexbox-center",children:Object.keys(t?.assets.data.nodes[e.id].ports?.output??{}).map(n=>Ee.jsxs(Oa,{dragSetter:r=>t?.dragSession?.dispatch(r),dragItem:{id:e.id+"/output/"+n,type:"port"},style:{width:t?.config.data?.portRadius,height:t?.config.data?.portSlabHeight,borderRadius:100,zIndex:1,position:"relative"},class:"flexbox-row flexbox-center",children:[Ee.jsx("div",{style:{width:t?.config.data?.portRadius,height:t?.config.data?.portRadius,borderRadius:100,backgroundColor:"rgba(0,0,0,0.5)",transform:"translateX(-50%)"}}),Ee.jsx("span",{className:"curve shadow white-bg absolute",style:{padding:5,right:"100%",top:0}})]}))})]})},pO=e=>{const{assets:t,view:n,dragSession:r,interaction:a,config:i}=e.config.stateFetcher()??{},s=D.useRef(!1),l=ck(({first:g,last:x,down:w,delta:S,xy:E,event:O,initial:k})=>{const I=_d(k),T=_d(E),A=_d(S);if(O.stopPropagation(),g&&new CustomEvent("dragstart-"+e.id,{detail:{dragPosition:T,dragVector:Ge.ORIGIN,dragElement:r?.data.current?.elementDragged}}),w){if(!s.current&&r?.data?.current?.elementDragged){const $=new CustomEvent("dragstart-"+e.id,{detail:{dragPosition:T,dragVector:Ge.ORIGIN,dragElement:r?.data.current?.elementDragged}});window.dispatchEvent($),s.current=!0}if(s){const $=new CustomEvent("ondrag-"+e.id,{detail:{initialDragPosition:I,currentDragPosition:T,dragVector:A,dragElement:r?.data.current?.elementDragged}});window.dispatchEvent($)}}if(x){const $=new CustomEvent("dragstop-"+e.id,{detail:{initialDragPosition:I,currentDragPosition:T,dragVector:A,dragElement:r?.data.current?.elementDragged}});r?.data?.current&&(r.data.current=null),window.dispatchEvent($),s.current=!1}}),c=D.useMemo(()=>t?.data.nodes?Object.keys(t.data.nodes).map(g=>({id:g,skeleton:t?.data.nodes[g],design:n?.data.nodes[g]??i?.data?.defaultNodeView})):null,[t?.data.nodes,n?.data.nodes]),u=D.useMemo(()=>t?.data.connections?Object.keys(t?.data.connections).map(g=>({id:g,skeleton:t?.data.connections[g],design:n?.data.connections[g]})):null,[t?.data.nodes,n?.data.nodes]),d=D.useMemo(()=>a?.data.connections?Object.keys(a?.data.connections).map(g=>({id:g,...a?.data.connections[g]})):[],[a?.data.connections]),p=D.useMemo(()=>fa.getBoxCoordinates(a?.data.selection?.start??Ge.ORIGIN,a?.data.selection?.end??Ge.ORIGIN),[a?.data.selection]),h=D.useMemo(()=>({width:(p?.coords.a?.x??0)-(p?.coords.b?.x??0),height:(p?.coords.a?.y??0)-(p?.coords.d?.y??0)}),[p]),m=D.useRef(e.config.nodeComponent).current,b=D.useRef(e.config.connectionComponent).current,f=D.useCallback(g=>{g.detail?.dragElement},[n?.data.documentPosition,n?.data.viewportPosition]);return D.useEffect(()=>(window.addEventListener("ondrag-"+e.id,f),()=>window.removeEventListener("ondrag-"+e.id,f)),[f]),D.useEffect(()=>{},[]),Ee.jsx("div",{id:"graph-document_"+e.id,className:"graph-document fullwidth fullheight",children:Ee.jsxs("div",{...l?.(),className:"fullwidth fullheight",style:{position:"relative"},children:[Ee.jsx("div",{className:"absolute fullwidth fullheight",children:c?.map(g=>Ee.jsx("div",{className:"absolute flexbox-row",style:{top:g.design?.position.y,left:g.design?.position.x,backgroundColor:"white"},children:Ee.jsx(Wz,{id:g.id,config:{stateFetcher:e.config.stateFetcher},children:Ee.jsx(m,{...g,design:g?.design?g.design:i?.data.defaultNodeView?i?.data.defaultNodeView:{isSelected:!1,position:Ge.ORIGIN},config:{stateFetcher:e.config.stateFetcher}})})}))}),Ee.jsxs("svg",{className:"absolute fullwidth fullheight",style:{inset:0,pointerEvents:"none",zIndex:1,backgroundColor:"transparent"},children:[u?.map(g=>Ee.jsx(b,{...g,design:{...g.design?g.design:i?.data.defaultConnectionView?i.data.defaultConnectionView:{from:{position:Ge.ORIGIN},to:{position:Ge.ORIGIN}},previewStatus:"NORMAL"},config:{stateFetcher:e.config.stateFetcher}})),d.map(g=>Ee.jsx(b,{...g,design:{...g.design,previewStatus:g.portStatus=="NO_PORT"?"NORMAL":g.portStatus=="COMPATIBLE_PORT"?"COMPATIBLE":"INCOMPATIBLE"},config:{stateFetcher:e.config.stateFetcher}}))]}),a?.data.selection?Ee.jsx("div",{className:"absolute",style:{backgroundColor:"rgba(51, 153, 255, 0.4)",left:p?.coords.a?.x,top:p?.coords.a?.y,width:Math.abs(h.width),height:Math.abs(h.height),transform:`scaleY(${h.height<0?-1:1})`,border:"1px solid rgb(80 168 255 / 50%)"}}):null]})})},qz=e=>{const t=D.useRef(null),[n,r]=D.useState(!1),a=D.useRef(null),[i,s]=fO.useSearchParams(),{assets:l,view:c,interaction:u,config:d}=D.useMemo(()=>e.state,[e.state]),p=D.useRef(null),h=D.useCallback(T=>{t.current=T},[]),m=D.useCallback((T,A)=>{p.current=setInterval(()=>{c?.dispatch?.({type:"move-document",payload:{speed:3.5,direction:Ge.getScaledVector(T,-1)}}),A.type=="node"&&c.dispatch({type:"move-node",payload:{nodeId:A.id,motionVector:Ge.getScaledVector(T,3.5)}})},8)},[]),b=D.useCallback(()=>{p.current&&(clearInterval(p.current),p.current=null)},[]),f=D.useCallback(T=>{if(T.detail&&T.detail.dragElement){const A=a.current?.getBoundingClientRect(),$=T.detail.currentDragPosition.x>d.data.documentBoundaryThickness&&T.detail.currentDragPosition.x<A.width-d.data.documentBoundaryThickness&&T.detail.currentDragPosition.y>d.data.documentBoundaryThickness&&T.detail.currentDragPosition.y<A.height-d.data.documentBoundaryThickness;!$&&!p.current?m(T.detail.dragVector,T.detail.dragElement):$&&p.current&&b()}},[d.data.documentBoundaryThickness,d.data.documentDimension]),g=D.useCallback(T=>{T.detail&&T.detail.dragElement&&(console.log("Moving Node"),T.detail.dragElement.type=="node"&&(c.dispatch({type:"move-node",payload:{nodeId:T.detail.dragElement.id,motionVector:T.detail.dragVector}}),Object.keys(l.data.connections).forEach(A=>{const $=l.data.connections[A].from.split("/")[0],M=l.data.connections[A].to.split("/")[0];$==T.detail.dragElement.id&&c.dispatch({type:"move-connectiontip",payload:{connectionId:A,type:"from",offset:T.detail.dragVector}}),M==T.detail.dragElement.id&&c.dispatch({type:"move-connectiontip",payload:{connectionId:A,type:"to",offset:T.detail.dragVector}})})))},[l.data.connections,e.id]),x=D.useCallback(T=>{if(T.detail&&T.detail.dragElement&&T.detail.dragElement.type=="port"){const A=T.detail.dragElement.id.split("/"),$=Mo(),M={workspace:{x:c.data.documentPosition.x,y:c.data.documentPosition.y},viewspace:Ge.ORIGIN,viewport:c.data.viewportPosition},y=fa.shiftPosition({type:"viewport",position:T.detail.currentDragPosition},"workspace",M);console.log("Port Positions",M,y),u.dispatch({type:"add-connection-byId",payload:{id:$,skeleton:{from:A[1]=="output"?T.detail.dragElement.id:"",to:A[1]=="input"?T.detail.dragElement.id:""},design:{from:{position:y},to:{position:y}}}}),h({startPosition:T.detail.currentDragPosition,elementDragged:{type:"connection-tip",id:$+"/"+(A[1]=="input"?"from":"to")},currentPosition:T.detail.currentDragPosition})}},[c.data.documentPosition,c.data.viewportPosition]),w=D.useCallback(T=>{if(T.detail&&T.detail.dragElement&&T.detail.dragElement.type=="connection-tip"){let A=T.detail.dragElement.id.split("/");Object.keys(l.data.connections).find($=>$==A[0])?c.dispatch({type:"move-connectiontip",payload:{connectionId:A[0],offset:T.detail.dragVector,type:A[1]}}):Object.keys(u.data.connections).find($=>$==A[0])&&u.dispatch({type:"move-connectiontip",payload:{connectionId:A[0],offset:T.detail.dragVector,type:A[1]}})}},[l.data.connections,u.data.connections]),S=D.useCallback(T=>{if(console.log("Selection Area Drag",T.detail),T.detail?.dragElement?.type=="document"){const A={workspace:{x:c.data.documentPosition.x,y:c.data.documentPosition.y},viewspace:Ge.ORIGIN,viewport:c.data.viewportPosition};u.dispatch?.({type:"set-selection_area",payload:{start:fa.shiftPosition({type:"viewport",position:T.detail.initialDragPosition},"workspace",A),end:fa.shiftPosition({type:"viewport",position:T.detail.currentDragPosition},"workspace",A)}})}},[]),E=D.useCallback(T=>{u.dispatch({type:"remove-connections",payload:{connectionId:Object.keys(u.data.connections)}}),u.dispatch?.({type:"remove-selection",payload:T.detail.dragElement.id}),u.dispatch?.({type:"clear-selection_area"}),b()},[u.data.connections]),O=D.useCallback(T=>{if(T.detail.dragElement?.type=="connection-tip"){let A={workspace:Ge.ORIGIN,viewspace:{x:-c.data.documentPosition.x,y:-c.data.documentPosition.y},viewport:c.data.viewportPosition},$=fa.shiftPosition({type:"viewport",position:T.detail.currentDragPosition},"workspace",A),M=T.detail.dragElement.id.split("/"),y=u.data.connections[M[0]];if(y){let F=M[1]=="from"?y.skeleton.to:y.skeleton.from,j=Mo();Object.keys(l.data.nodes).filter(P=>P!=F.split("/")[0]).forEach(P=>{let _=lO.getAllPortsPositions({position:c.data.nodes[P]?.position,dimensions:d.data.nodeDimensions},{input:Object.keys(l.data.nodes[P].ports.input),output:Object.keys(l.data.nodes[P].ports.output),dimensions:{portRadius:d.data.portRadius,slabHeight:d.data.portSlabHeight}});_.outputPorts.forEach(z=>{M[1]=="from"&&$.x>z.position.x-d.data.portRadius&&$.x<z.position.x+d.data.portRadius&&$.y>z.position.y-d.data.portRadius&&$.y<z.position.y+d.data.portRadius&&(u.dispatch({type:"remove-connection",payload:{connectionId:M[0]}}),l.dispatch({type:"add-connection-byId",payload:{id:j,from:P+"/output/"+z.key,to:F}}),c.dispatch({type:"init-connection",payload:{connectionId:j,from:z.position,to:y.design.to.position}}),h(null))}),_.inputPorts.forEach(z=>{M[1]=="to"&&$.x>z.position.x-d.data.portRadius&&$.x<z.position.x+d.data.portRadius&&$.y>z.position.y-d.data.portRadius&&$.y<z.position.y+d.data.portRadius&&(u.dispatch({type:"remove-connection",payload:{connectionId:M[0]}}),l.dispatch({type:"add-connection-byId",payload:{id:j,from:F,to:P+"/input/"+z.key}}),c.dispatch({type:"init-connection",payload:{connectionId:j,from:y.design.from.position,to:z.position}}),h(null))})})}}},[c.data.documentPosition,c.data.viewportPosition,l.data.nodes,l.data.connections,u.data.connections]),k=D.useCallback(T=>{console.log("Element Selected",T.detail),T.detail?.dragElement?.type=="node"&&(console.log("Det Sel Ele",T.detail?.dragElement),u.dispatch?.({type:"select",payload:{type:T.detail.dragElement.type,id:T.detail.dragElement.id}}))},[]);D.useEffect(()=>(window.addEventListener("ondrag-"+e.id,O),()=>window.removeEventListener("ondrag-"+e.id,O)),[O]),D.useEffect(()=>(window.addEventListener("ondrag-"+e.id,S),()=>window.removeEventListener("ondrag-"+e.id,S)),[S]),D.useEffect(()=>(window.addEventListener("ondrag-"+e.id,g),()=>window.removeEventListener("ondrag-"+e.id,g)),[g]),D.useEffect(()=>(window.addEventListener("dragstart-"+e.id,k),()=>window.removeEventListener("dragstart-"+e.id,k)),[k]),D.useEffect(()=>(window.addEventListener("ondrag-"+e.id,x),()=>window.removeEventListener("ondrag-"+e.id,x)),[x]),D.useEffect(()=>(window.addEventListener("ondrag-"+e.id,w),()=>window.removeEventListener("ondrag-"+e.id,w)),[w]),D.useEffect(()=>(window.addEventListener("ondrag-"+e.id,f),()=>window.removeEventListener("ondrag-"+e.id,f)),[f]),D.useEffect(()=>(window.addEventListener("dragstop-"+e.id,E),()=>window.removeEventListener("dragstop-"+e.id,E)),[E]),D.useEffect(()=>{if(console.log("Viewport Position 1",a.current),a.current){let T=a.current?.getBoundingClientRect();T&&(c.dispatch({type:"set-viewport-position",payload:{x:-T.x,y:-T.y}}),r(!0),console.log("Viewport Position 2",T))}},[]);const I=D.useCallback(T=>{T.target==T.currentTarget&&(i.delete("node_form"),s(i))},[i]);return console.log("Graph State",l.data,c.data,u.data),Ee.jsx(dO.Provider,{value:{assets:l,view:c,config:d,interaction:u,dragSession:{data:t,dispatch:h}},children:Ee.jsxs("div",{ref:a,className:"fullwidth fullheight",style:{position:"relative"},children:[n?Ee.jsxs("div",{className:"fullwidth fullheight flexbox-row flexbox-center",children:[Ee.jsx(Oa,{id:"document-drag_wrapper",dragItem:{type:"document",id:e.id},dragSetter:h,class:"fullwidth fullheight absolute",style:{top:c.data.documentPosition.y,left:c.data.documentPosition.x},children:Ee.jsx(pO,{id:e.id,config:e.config.document})}),i.get("node_form")?Ee.jsx("div",{className:"absolute fullwidth fullheight",style:{zIndex:200,backgroundColor:"rgba(0,0,0,0.1)"},children:Ee.jsx("div",{onClick:I,className:"fullwidth fullheight",style:{position:"relative"},children:Ee.jsx("div",{className:"absolute white-bg curve padding",style:{width:"80%",height:"80%",bottom:50,left:"50%",top:"50%",transform:"translate(-50%,-50%)",boxShadow:"0px 0px 30px rgba(0,0,0,0.1)"}})})}):null]}):Ee.jsx("div",{className:"fullwidth fullheight flexbox-row flexbox-center",children:Ee.jsx("div",{className:"fullwidth fullheight flexbox-column flexbox-center",children:Ee.jsx("span",{children:"Loading Document"})})}),Ee.jsxs("div",{children:[Ee.jsx("div",{className:"absolute fullheight",style:{backgroundColor:"rgba(0,0,0,0.1)",width:d?.data?.documentBoundaryThickness,left:0,top:0}}),Ee.jsx("div",{className:"absolute fullheight",style:{backgroundColor:"rgba(0,0,0,0.1)",width:d?.data?.documentBoundaryThickness,right:0,top:0}}),Ee.jsx("div",{className:"absolute fullwidth",style:{backgroundColor:"rgba(0,0,0,0.1)",height:d?.data?.documentBoundaryThickness,left:0,top:0}}),Ee.jsx("div",{className:"absolute fullwidth",style:{backgroundColor:"rgba(0,0,0,0.1)",height:d?.data?.documentBoundaryThickness,left:0,bottom:0}})]})]})})},Uz={Dropdown:sx,Textbox:lx,Toggle:cx};exports.AssetsReducer=Iz;exports.Connection=mz;exports.Context_Workspace=dO;exports.Document=pO;exports.Draggable=Oa;exports.Form=fz;exports.FormInputElements=Uz;exports.InteractionReducer=_z;exports.JSONForms=Hz;exports.NodeUtils=lO;exports.UIDCreator=Mo;exports.UiElementsRegistry_Standard=lz;exports.VectorApi=Ge;exports.ViewReducer=Az;exports.Workspace=qz;exports.getSchemaNode=Fz;exports.schemaNodeExporter=cO;exports.useWorkspace=$z;
+      `},[e.design.from.position,e.design.to.position]);return Ee.jsxs("g",{children:[Ee.jsx("circle",{cx:e.design.from.position.x+"px",cy:e.design.from.position.y+"px",r:t?.data?.connectionTipRadius,fill:`rgba(0,0,0,${r?.5:1})`,onMouseDown:i=>{console.log("Drrrrrrr from"),n?.dispatch({startPosition:{x:i.clientX,y:i.clientY},elementDragged:{type:"connection-tip",id:e.id+"/from"}})},onMouseUp:()=>{n?.dispatch(null)}}),Ee.jsx("path",{d:a,stroke:e.design.previewStatus=="NORMAL"?r?"grey":"black":e.design.previewStatus=="COMPATIBLE"?"green":"red",strokeWidth:t?.data?.connectionThickness,fill:"none"}),Ee.jsx("circle",{cx:e.design.to.position.x+"px",cy:e.design.to.position.y+"px",r:t?.data?.connectionTipRadius,fill:`rgba(0,0,0,${r?.5:1})`,onMouseDown:i=>{console.log("Drrrrrrr to"),n?.dispatch({startPosition:{x:i.clientX,y:i.clientY},elementDragged:{type:"connection-tip",id:e.id+"/to"}})},onMouseUp:()=>{n?.dispatch(null)}})]})};function Op(e){return`Minified Redux error #${e}; visit https://redux.js.org/Errors?code=${e} for the full message or use the non-minified dev environment for full errors. `}var Fd=()=>Math.random().toString(36).substring(7).split("").join("."),bz={INIT:`@@redux/INIT${Fd()}`,REPLACE:`@@redux/REPLACE${Fd()}`,PROBE_UNKNOWN_ACTION:()=>`@@redux/PROBE_UNKNOWN_ACTION${Fd()}`},ka=bz;function gz(e){if(typeof e!="object"||e===null)return!1;let t=e;for(;Object.getPrototypeOf(t)!==null;)t=Object.getPrototypeOf(t);return Object.getPrototypeOf(e)===t||Object.getPrototypeOf(e)===null}function yz(e){if(e===void 0)return"undefined";if(e===null)return"null";const t=typeof e;switch(t){case"boolean":case"string":case"number":case"symbol":case"function":return t}if(Array.isArray(e))return"array";if(wz(e))return"date";if(xz(e))return"error";const n=vz(e);switch(n){case"Symbol":case"Promise":case"WeakMap":case"WeakSet":case"Map":case"Set":return n}return Object.prototype.toString.call(e).slice(8,-1).toLowerCase().replace(/\s/g,"")}function vz(e){return typeof e.constructor=="function"?e.constructor.name:null}function xz(e){return e instanceof Error||typeof e.message=="string"&&e.constructor&&typeof e.constructor.stackTraceLimit=="number"}function wz(e){return e instanceof Date?!0:typeof e.toDateString=="function"&&typeof e.getDate=="function"&&typeof e.setDate=="function"}function Sz(e){let t=typeof e;return process.env.NODE_ENV!=="production"&&(t=yz(e)),t}function ax(e){typeof console<"u"&&typeof console.error=="function"&&console.error(e);try{throw new Error(e)}catch{}}function Oz(e,t,n,r){const a=Object.keys(t),i=n&&n.type===ka.INIT?"preloadedState argument passed to createStore":"previous state received by the reducer";if(a.length===0)return"Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.";if(!gz(e))return`The ${i} has unexpected type of "${Sz(e)}". Expected argument to be an object with the following keys: "${a.join('", "')}"`;const s=Object.keys(e).filter(l=>!t.hasOwnProperty(l)&&!r[l]);if(s.forEach(l=>{r[l]=!0}),!(n&&n.type===ka.REPLACE)&&s.length>0)return`Unexpected ${s.length>1?"keys":"key"} "${s.join('", "')}" found in ${i}. Expected to find one of the known reducer keys instead: "${a.join('", "')}". Unexpected keys will be ignored.`}function kz(e){Object.keys(e).forEach(t=>{const n=e[t];if(typeof n(void 0,{type:ka.INIT})>"u")throw new Error(process.env.NODE_ENV==="production"?Op(12):`The slice reducer for key "${t}" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined.`);if(typeof n(void 0,{type:ka.PROBE_UNKNOWN_ACTION()})>"u")throw new Error(process.env.NODE_ENV==="production"?Op(13):`The slice reducer for key "${t}" returned undefined when probed with a random type. Don't try to handle '${ka.INIT}' or other actions in "redux/*" namespace. They are considered private. Instead, you must return the current state for any unknown actions, unless it is undefined, in which case you must return the initial state, regardless of the action type. The initial state may not be undefined, but can be null.`)})}function Ih(e){const t=Object.keys(e),n={};for(let s=0;s<t.length;s++){const l=t[s];process.env.NODE_ENV!=="production"&&typeof e[l]>"u"&&ax(`No reducer provided for key "${l}"`),typeof e[l]=="function"&&(n[l]=e[l])}const r=Object.keys(n);let a;process.env.NODE_ENV!=="production"&&(a={});let i;try{kz(n)}catch(s){i=s}return function(l={},c){if(i)throw i;if(process.env.NODE_ENV!=="production"){const p=Oz(l,n,c,a);p&&ax(p)}let u=!1;const d={};for(let p=0;p<r.length;p++){const h=r[p],m=n[h],b=l[h],f=m(b,c);if(typeof f>"u"){const g=c&&c.type;throw new Error(process.env.NODE_ENV==="production"?Op(14):`When called with an action of type ${g?`"${String(g)}"`:"(unknown type)"}, the slice reducer for key "${h}" returned undefined. To ignore an action, you must explicitly return the previous state. If you want this reducer to hold no value, you can return null instead of undefined.`)}d[h]=f,u=u||f!==b}return u=u||r.length!==Object.keys(l).length,u?d:l}}const Ez=(e,t)=>{const n=e?{...e}:null;switch(t.type){case"set-selection_area":return t.payload;case"clear-selection_area":return null}return n},Cz=(e,t)=>{const n=e?{...e}:{node:[],connection:[]};switch(t.type){case"set-selectedItems":return t.payload;case"select":n[t.payload.type].find(a=>a!=t.payload.id)?n[t.payload.type]=n[t.payload.type].filter(a=>a!=t.payload.id):n[t.payload.type].push(t.payload.id);break;case"add-selection":n?.[t.payload.type].push(t.payload.id);break;case"remove-selection":n.node=n?.node.filter(a=>a!=t.payload),n.connection=n?.connection.filter(a=>a!=t.payload);break;case"reset":n.node=[],n.connection=[];break}return n},Tz=(e={},t)=>{const n={...e};switch(t.type){case"add-node":n[Mo()]=t.payload;break;case"add-node-byId":let r={...t.payload};delete r.id,n[t.payload.id]=r;break;case"add-node-port":break;case"remove-node":delete n[t.payload];break;case"update-node":n[t.payload.id]=t.payload.updatedNode;break;case"set-node-ports":n[t.payload.nodeId].ports=t.payload.ports;break;case"set-node-ports-input":n[t.payload.nodeId].ports.input=t.payload.ports;break;case"set-node-ports-output":n[t.payload.nodeId].ports.output=t.payload.ports;break;case"add-node-ports-output":n[t.payload.nodeId].ports.output={...n[t.payload.nodeId].ports.output,...t.payload.ports};break;case"remove-node-ports-output":const i=Object.keys(n[t.payload.nodeId].ports.output).filter(s=>!t.payload.ports.find(l=>l==s)).reduce((s,l)=>({...s,[l]:n[t.payload.nodeId].ports.output[l]}),{});n[t.payload.nodeId].ports.output=i;break;case"set-node-label":n[t.payload.nodeId].meta.label=t.payload.label;break;case"set-node-core":n[t.payload.nodeId].core=t.payload.data;break}return n},jz=(e={},t)=>{const n={...e};switch(t.type){case"init-node-view":n[t.payload.nodeId]={position:t.payload.position,isSelected:t.payload.isSelected??!1};break;case"move-node":n[t.payload.nodeId]?n[t.payload.nodeId].position=Ge.add(n[t.payload.nodeId].position,t.payload.motionVector):console.log("Callying no node");break}return n},Dz=(e={},t)=>{const n={...e};switch(t.type){case"add-connection":n[Mo()]=t.payload;break;case"add-connection-byId":let r={...t.payload};delete r.id,n[t.payload.id]=r;break;case"set-connection-from-port":n[t.payload.connectionId].from=t.payload.portId;break;case"set-connection-to-port":n[t.payload.connectionId].to=t.payload.portId;break}return n},Pz=(e={},t)=>{const n={...e};switch(t.type){case"init-connection":n[t.payload.connectionId]={from:{position:t.payload.from},to:{position:t.payload.to}};break;case"set-connection-from-position":n[t.payload.connectionId].from.position=t.payload.position;break;case"set-connections-from-position":Object.keys(t.payload).forEach(r=>{n[r].from.position=t.payload[r]});break;case"set-connection-to-position":n[t.payload.connectionId].to.position=t.payload.position;break;case"move-connectiontip":n[t.payload.connectionId]&&(t.payload.type=="from"?n[t.payload.connectionId].from.position=Ge.add(n[t.payload.connectionId].from.position,t.payload.offset):n[t.payload.connectionId].to.position=Ge.add(n[t.payload.connectionId].to.position,t.payload.offset));break}return n},Mz=(e,t)=>{const n={...e};switch(t.type){case"add-connection":n[Mo()]={portStatus:"NO_PORT",...t.payload};break;case"add-connection-byId":let r={...t.payload};delete r.id,n[t.payload.id]={portStatus:"NO_PORT",...r};break;case"set-connection-from-port":n[t.payload.connectionId].skeleton.from=t.payload.portId;break;case"set-connection-to-port":n[t.payload.connectionId].skeleton.to=t.payload.portId;break;case"init-connection-position":n[t.payload.connectionId].design={from:{position:t.payload.from},to:{position:t.payload.to}};break;case"set-connection-from-position":n[t.payload.connectionId].design.from.position=t.payload.position;break;case"set-connection-to-position":n[t.payload.connectionId].design.to.position=t.payload.position;break;case"move-connectiontip":n[t.payload.connectionId]&&(t.payload.type=="from"?n[t.payload.connectionId].design.from.position=Ge.add(n[t.payload.connectionId].design.from.position,t.payload.offset):n[t.payload.connectionId].design.to.position=Ge.add(n[t.payload.connectionId].design.to.position,t.payload.offset));break;case"set-port_status":n[t.payload.connectionId].portStatus=t.payload.status;break;case"remove-connection":delete n[t.payload.connectionId];break;case"remove-connections":t.payload.connectionId.forEach(a=>{delete n[a]});break}return n},Rz=(e,t)=>{let n={...e};switch(t.type){case"set-document-position":n=t.payload;break;case"move-document":n=Ge.add(n,{x:t.payload.speed*t.payload.direction.x,y:t.payload.speed*t.payload.direction.y});break}return n},Nz=(e,t)=>{let n={...e};return t.type==="set-viewport-position"&&(n=t.payload),n},Iz=Ih({nodes:Tz,connections:Dz}),Az=Ih({nodes:jz,connections:Pz,viewportPosition:Nz,documentPosition:Rz}),_z=Ih({connections:Mz,selection:Ez,selectedItems:Cz}),Fz=e=>({type:"dummy",ports:{input:{i1:{meta:{index:0}}},output:{o1:{meta:{index:0}}}},core:{type:e,...e=="object"?{properties:1}:e=="array"?{items:1}:{}},meta:{label:e.toLocaleUpperCase(),type:"task"},editRules:{ports:{input:!1,ouput:!1}}}),$z=e=>{const[t,n]=D.useReducer(e.Assets.reducer,e.Assets.initialState),[r,a]=D.useReducer(e.View.reducer,e.View.initialState),[i,s]=D.useReducer(e.Interaction.reducer,e.Interaction.initialState),l=D.useRef(e.Config.initialState).current;return{assets:{data:t,dispatch:n},view:{data:r,dispatch:a},interaction:{data:i,dispatch:s},config:{data:l}}},ra={key:{schema:{type:"string",title:"Field Key",description:"Key"},component:"textbox",reducer:Et},title:{schema:{type:"string",title:"Label",description:"Human-readable label"},component:"textbox",reducer:Et},description:{schema:{type:"string",title:"Description",description:"Help text or tooltip"},component:"textbox",reducer:Et},default:{schema:{type:"string",title:"Default Value",description:"Default value for the field"},component:"textbox",reducer:Et},readOnly:{schema:{type:"boolean",title:"Read Only"},component:"toggle",reducer:qa}},Vz={const:{schema:{type:"string",title:"Constant value",description:"Locks the field to a single value"},component:"textbox",reducer:Et},minLength:{schema:{type:"integer",title:"Minimum length",minimum:0},component:"textbox",reducer:Et},maxLength:{schema:{type:"integer",title:"Maximum length",minimum:0},component:"textbox",reducer:Et},pattern:{schema:{type:"string",title:"Regex pattern",description:"ECMAScript regular expression"},component:"textbox",reducer:Et},format:{schema:{type:"string",title:"Format",description:"Semantic format hint (email, uri, date, etc.)"},component:"textbox",reducer:Et}},Bz={minimum:{schema:{type:"number",title:"Minimum"},component:"textbox",config:{dataType:"float"},reducer:Et},maximum:{schema:{type:"number",title:"Maximum"},component:"textbox",config:{dataType:"float"},reducer:Et},exclusiveMinimum:{schema:{type:"boolean",title:"Exclusive Minimum"},component:"toggle",reducer:qa},multipleOf:{schema:{type:"number",title:"Multiple Of"},component:"textbox",config:{dataType:"integer"},reducer:Et}},Lz={minItems:{schema:{type:"number",title:"Min Items"},component:"textbox",config:{dataType:"integer"},reducer:Et},maxItems:{schema:{type:"number",title:"Max Items"},component:"textbox",config:{dataType:"integer"},reducer:Et},uniqueItems:{schema:{type:"boolean",title:"Unique Items"},component:"toggle",reducer:qa},items:{schema:{type:"number",title:"Items"},component:"textbox",config:{dataType:"integer"},reducer:Et}},zz={items:{schema:{type:"number",title:"Items"},component:"textbox",config:{dataType:"integer"},reducer:Et},required:{schema:{type:"number",title:"Required Items"},component:"textbox",reducer:Et},additionalProperties:{schema:{type:"boolean",title:"Allow Additional Properties"},component:"toggle",reducer:qa}},Hz={string:{...ra,...Vz},number:{...ra,...Bz},boolean:ra,array:{...ra,...Lz},object:{...ra,...zz}},dO=D.createContext(null),Wz=e=>{const t=e.config.stateFetcher();return Ee.jsxs("div",{className:"flexbox-row",style:{width:t?.config?.data?.nodeDimensions?.width,height:t?.config?.data?.nodeDimensions?.height},children:[Ee.jsx("div",{className:"fullheight flexbox-column flexbox-center",style:{alignSelf:"stretch"},children:Object.keys(t?.assets.data.nodes[e.id].ports?.input??{}).map(n=>Ee.jsxs(Oa,{dragSetter:r=>t?.dragSession.dispatch(r),dragItem:{id:e.id+"/input/"+n,type:"port"},style:{width:t?.config.data?.portRadius,height:t?.config.data?.portSlabHeight,borderRadius:100,zIndex:1,position:"relative"},class:"flexbox-row flexbox-center",children:[Ee.jsx("div",{style:{width:t?.config.data?.portRadius,height:t?.config.data?.portRadius,borderRadius:100,backgroundColor:"rgba(0,0,0,0.5)",transform:"translateX(50%)"}}),Ee.jsx("span",{className:"curve shadow white-bg absolute",style:{padding:5,right:"100%",top:0}})]}))}),Ee.jsx(Oa,{id:"node-drag_wrapper",excludeParent:!0,dragSetter:t?.dragSession.dispatch,dragItem:{id:e.id,type:"node"},class:"flexbox-row flexbox-row-fit fullheight",children:Ee.jsx("div",{className:"fullwidth fullheight curve shadow padding flexbox-column gap",style:{backgroundColor:"white",alignSelf:"stretch",border:`${t?.interaction?.data.selectedItems.node.find(n=>n==e.id)?2:0}px solid rgba(51, 153, 255, 0.4)`},children:e.children})}),Ee.jsx("div",{className:"fullheight flexbox-column flexbox-center",children:Object.keys(t?.assets.data.nodes[e.id].ports?.output??{}).map(n=>Ee.jsxs(Oa,{dragSetter:r=>t?.dragSession?.dispatch(r),dragItem:{id:e.id+"/output/"+n,type:"port"},style:{width:t?.config.data?.portRadius,height:t?.config.data?.portSlabHeight,borderRadius:100,zIndex:1,position:"relative"},class:"flexbox-row flexbox-center",children:[Ee.jsx("div",{style:{width:t?.config.data?.portRadius,height:t?.config.data?.portRadius,borderRadius:100,backgroundColor:"rgba(0,0,0,0.5)",transform:"translateX(-50%)"}}),Ee.jsx("span",{className:"curve shadow white-bg absolute",style:{padding:5,right:"100%",top:0}})]}))})]})},pO=e=>{const{assets:t,view:n,dragSession:r,interaction:a,config:i}=e.config.stateFetcher()??{},s=D.useRef(!1),l=ck(({first:g,last:x,down:w,delta:S,xy:E,event:O,initial:k})=>{const I=_d(k),T=_d(E),A=_d(S);if(O.stopPropagation(),g&&new CustomEvent("dragstart-"+e.id,{detail:{dragPosition:T,dragVector:Ge.ORIGIN,dragElement:r?.data.current?.elementDragged}}),w){if(!s.current&&r?.data?.current?.elementDragged){const $=new CustomEvent("dragstart-"+e.id,{detail:{dragPosition:T,dragVector:Ge.ORIGIN,dragElement:r?.data.current?.elementDragged}});window.dispatchEvent($),s.current=!0}if(s){const $=new CustomEvent("ondrag-"+e.id,{detail:{initialDragPosition:I,currentDragPosition:T,dragVector:A,dragElement:r?.data.current?.elementDragged}});window.dispatchEvent($)}}if(x){const $=new CustomEvent("dragstop-"+e.id,{detail:{initialDragPosition:I,currentDragPosition:T,dragVector:A,dragElement:r?.data.current?.elementDragged}});r?.data?.current&&(r.data.current=null),window.dispatchEvent($),s.current=!1}}),c=D.useMemo(()=>t?.data.nodes?Object.keys(t.data.nodes).map(g=>({id:g,skeleton:t?.data.nodes[g],design:n?.data.nodes[g]??i?.data?.defaultNodeView})):null,[t?.data.nodes,n?.data.nodes]),u=D.useMemo(()=>t?.data.connections?Object.keys(t?.data.connections).map(g=>({id:g,skeleton:t?.data.connections[g],design:n?.data.connections[g]})):null,[t?.data.nodes,n?.data.nodes]),d=D.useMemo(()=>a?.data.connections?Object.keys(a?.data.connections).map(g=>({id:g,...a?.data.connections[g]})):[],[a?.data.connections]),p=D.useMemo(()=>fa.getBoxCoordinates(a?.data.selection?.start??Ge.ORIGIN,a?.data.selection?.end??Ge.ORIGIN),[a?.data.selection]),h=D.useMemo(()=>({width:(p?.coords.a?.x??0)-(p?.coords.b?.x??0),height:(p?.coords.a?.y??0)-(p?.coords.d?.y??0)}),[p]),m=D.useRef(e.config.nodeComponent).current,b=D.useRef(e.config.connectionComponent).current,f=D.useCallback(g=>{g.detail?.dragElement},[n?.data.documentPosition,n?.data.viewportPosition]);return D.useEffect(()=>(window.addEventListener("ondrag-"+e.id,f),()=>window.removeEventListener("ondrag-"+e.id,f)),[f]),D.useEffect(()=>{},[]),Ee.jsx("div",{id:"graph-document_"+e.id,className:"graph-document fullwidth fullheight",children:Ee.jsxs("div",{...l?.(),className:"fullwidth fullheight",style:{position:"relative"},children:[Ee.jsx("div",{className:"absolute fullwidth fullheight",children:c?.map(g=>Ee.jsx("div",{className:"absolute flexbox-row",style:{top:g.design?.position.y,left:g.design?.position.x,backgroundColor:"white"},children:Ee.jsx(Wz,{id:g.id,config:{stateFetcher:e.config.stateFetcher},children:Ee.jsx(m,{...g,design:g?.design?g.design:i?.data.defaultNodeView?i?.data.defaultNodeView:{isSelected:!1,position:Ge.ORIGIN},config:{stateFetcher:e.config.stateFetcher}})})}))}),Ee.jsxs("svg",{className:"absolute fullwidth fullheight",style:{inset:0,pointerEvents:"none",zIndex:1,backgroundColor:"transparent"},children:[u?.map(g=>Ee.jsx(b,{...g,design:{...g.design?g.design:i?.data.defaultConnectionView?i.data.defaultConnectionView:{from:{position:Ge.ORIGIN},to:{position:Ge.ORIGIN}},previewStatus:"NORMAL"},config:{stateFetcher:e.config.stateFetcher}})),d.map(g=>Ee.jsx(b,{...g,design:{...g.design,previewStatus:g.portStatus=="NO_PORT"?"NORMAL":g.portStatus=="COMPATIBLE_PORT"?"COMPATIBLE":"INCOMPATIBLE"},config:{stateFetcher:e.config.stateFetcher}}))]}),a?.data.selection?Ee.jsx("div",{className:"absolute",style:{backgroundColor:"rgba(51, 153, 255, 0.4)",left:p?.coords.a?.x,top:p?.coords.a?.y,width:Math.abs(h.width),height:Math.abs(h.height),transform:`scaleY(${h.height<0?-1:1})`,border:"1px solid rgb(80 168 255 / 50%)"}}):null]})})},qz=e=>{const t=D.useRef(null),[n,r]=D.useState(!1),a=D.useRef(null),[i,s]=fO.useSearchParams(),{assets:l,view:c,interaction:u,config:d}=D.useMemo(()=>e.state,[e.state]),p=D.useRef(null),h=D.useCallback(T=>{t.current=T},[]),m=D.useCallback((T,A)=>{p.current=setInterval(()=>{c?.dispatch?.({type:"move-document",payload:{speed:3.5,direction:Ge.getScaledVector(T,-1)}}),A.type=="node"&&c.dispatch({type:"move-node",payload:{nodeId:A.id,motionVector:Ge.getScaledVector(T,3.5)}})},8)},[]),b=D.useCallback(()=>{p.current&&(clearInterval(p.current),p.current=null)},[]),f=D.useCallback(T=>{if(T.detail&&T.detail.dragElement){const A=a.current?.getBoundingClientRect(),$=T.detail.currentDragPosition.x>d.data.documentBoundaryThickness&&T.detail.currentDragPosition.x<A.width-d.data.documentBoundaryThickness&&T.detail.currentDragPosition.y>d.data.documentBoundaryThickness&&T.detail.currentDragPosition.y<A.height-d.data.documentBoundaryThickness;!$&&!p.current?m(T.detail.dragVector,T.detail.dragElement):$&&p.current&&b()}},[d.data.documentBoundaryThickness,d.data.documentDimension]),g=D.useCallback(T=>{T.detail&&T.detail.dragElement&&(console.log("Moving Node"),T.detail.dragElement.type=="node"&&(c.dispatch({type:"move-node",payload:{nodeId:T.detail.dragElement.id,motionVector:T.detail.dragVector}}),Object.keys(l.data.connections).forEach(A=>{const $=l.data.connections[A].from.split("/")[0],M=l.data.connections[A].to.split("/")[0];$==T.detail.dragElement.id&&c.dispatch({type:"move-connectiontip",payload:{connectionId:A,type:"from",offset:T.detail.dragVector}}),M==T.detail.dragElement.id&&c.dispatch({type:"move-connectiontip",payload:{connectionId:A,type:"to",offset:T.detail.dragVector}})})))},[l.data.connections,e.id]),x=D.useCallback(T=>{if(T.detail&&T.detail.dragElement&&T.detail.dragElement.type=="port"){const A=T.detail.dragElement.id.split("/"),$=Mo(),M={workspace:{x:c.data.documentPosition.x,y:c.data.documentPosition.y},viewspace:Ge.ORIGIN,viewport:c.data.viewportPosition},y=fa.shiftPosition({type:"viewport",position:T.detail.currentDragPosition},"workspace",M);console.log("Port Positions",M,y),u.dispatch({type:"add-connection-byId",payload:{id:$,skeleton:{from:A[1]=="output"?T.detail.dragElement.id:"",to:A[1]=="input"?T.detail.dragElement.id:""},design:{from:{position:y},to:{position:y}}}}),h({startPosition:T.detail.currentDragPosition,elementDragged:{type:"connection-tip",id:$+"/"+(A[1]=="input"?"from":"to")},currentPosition:T.detail.currentDragPosition})}},[c.data.documentPosition,c.data.viewportPosition]),w=D.useCallback(T=>{if(T.detail&&T.detail.dragElement&&T.detail.dragElement.type=="connection-tip"){let A=T.detail.dragElement.id.split("/");Object.keys(l.data.connections).find($=>$==A[0])?c.dispatch({type:"move-connectiontip",payload:{connectionId:A[0],offset:T.detail.dragVector,type:A[1]}}):Object.keys(u.data.connections).find($=>$==A[0])&&u.dispatch({type:"move-connectiontip",payload:{connectionId:A[0],offset:T.detail.dragVector,type:A[1]}})}},[l.data.connections,u.data.connections]),S=D.useCallback(T=>{if(console.log("Selection Area Drag",T.detail),T.detail?.dragElement?.type=="document"){const A={workspace:{x:c.data.documentPosition.x,y:c.data.documentPosition.y},viewspace:Ge.ORIGIN,viewport:c.data.viewportPosition};u.dispatch?.({type:"set-selection_area",payload:{start:fa.shiftPosition({type:"viewport",position:T.detail.initialDragPosition},"workspace",A),end:fa.shiftPosition({type:"viewport",position:T.detail.currentDragPosition},"workspace",A)}})}},[c.data.documentPosition]),E=D.useCallback(T=>{u.dispatch({type:"remove-connections",payload:{connectionId:Object.keys(u.data.connections)}}),u.dispatch?.({type:"remove-selection",payload:T.detail.dragElement.id}),u.dispatch?.({type:"clear-selection_area"}),b()},[u.data.connections]),O=D.useCallback(T=>{if(T.detail.dragElement?.type=="connection-tip"){let A={workspace:Ge.ORIGIN,viewspace:{x:-c.data.documentPosition.x,y:-c.data.documentPosition.y},viewport:c.data.viewportPosition},$=fa.shiftPosition({type:"viewport",position:T.detail.currentDragPosition},"workspace",A),M=T.detail.dragElement.id.split("/"),y=u.data.connections[M[0]];if(y){let F=M[1]=="from"?y.skeleton.to:y.skeleton.from,j=Mo();Object.keys(l.data.nodes).filter(P=>P!=F.split("/")[0]).forEach(P=>{let _=lO.getAllPortsPositions({position:c.data.nodes[P]?.position,dimensions:d.data.nodeDimensions},{input:Object.keys(l.data.nodes[P].ports.input),output:Object.keys(l.data.nodes[P].ports.output),dimensions:{portRadius:d.data.portRadius,slabHeight:d.data.portSlabHeight}});_.outputPorts.forEach(z=>{M[1]=="from"&&$.x>z.position.x-d.data.portRadius&&$.x<z.position.x+d.data.portRadius&&$.y>z.position.y-d.data.portRadius&&$.y<z.position.y+d.data.portRadius&&(u.dispatch({type:"remove-connection",payload:{connectionId:M[0]}}),l.dispatch({type:"add-connection-byId",payload:{id:j,from:P+"/output/"+z.key,to:F}}),c.dispatch({type:"init-connection",payload:{connectionId:j,from:z.position,to:y.design.to.position}}),h(null))}),_.inputPorts.forEach(z=>{M[1]=="to"&&$.x>z.position.x-d.data.portRadius&&$.x<z.position.x+d.data.portRadius&&$.y>z.position.y-d.data.portRadius&&$.y<z.position.y+d.data.portRadius&&(u.dispatch({type:"remove-connection",payload:{connectionId:M[0]}}),l.dispatch({type:"add-connection-byId",payload:{id:j,from:F,to:P+"/input/"+z.key}}),c.dispatch({type:"init-connection",payload:{connectionId:j,from:y.design.from.position,to:z.position}}),h(null))})})}}},[c.data.documentPosition,c.data.viewportPosition,l.data.nodes,l.data.connections,u.data.connections]),k=D.useCallback(T=>{console.log("Element Selected",T.detail),T.detail?.dragElement?.type=="node"&&(console.log("Det Sel Ele",T.detail?.dragElement),u.dispatch?.({type:"select",payload:{type:T.detail.dragElement.type,id:T.detail.dragElement.id}}))},[]);D.useEffect(()=>(window.addEventListener("ondrag-"+e.id,O),()=>window.removeEventListener("ondrag-"+e.id,O)),[O]),D.useEffect(()=>(window.addEventListener("ondrag-"+e.id,S),()=>window.removeEventListener("ondrag-"+e.id,S)),[S]),D.useEffect(()=>(window.addEventListener("ondrag-"+e.id,g),()=>window.removeEventListener("ondrag-"+e.id,g)),[g]),D.useEffect(()=>(window.addEventListener("dragstart-"+e.id,k),()=>window.removeEventListener("dragstart-"+e.id,k)),[k]),D.useEffect(()=>(window.addEventListener("ondrag-"+e.id,x),()=>window.removeEventListener("ondrag-"+e.id,x)),[x]),D.useEffect(()=>(window.addEventListener("ondrag-"+e.id,w),()=>window.removeEventListener("ondrag-"+e.id,w)),[w]),D.useEffect(()=>(window.addEventListener("ondrag-"+e.id,f),()=>window.removeEventListener("ondrag-"+e.id,f)),[f]),D.useEffect(()=>(window.addEventListener("dragstop-"+e.id,E),()=>window.removeEventListener("dragstop-"+e.id,E)),[E]),D.useEffect(()=>{if(console.log("Viewport Position 1",a.current),a.current){let T=a.current?.getBoundingClientRect();T&&(c.dispatch({type:"set-viewport-position",payload:{x:-T.x,y:-T.y}}),r(!0),console.log("Viewport Position 2",T))}},[]);const I=D.useCallback(T=>{T.target==T.currentTarget&&(i.delete("node_form"),s(i))},[i]);return console.log("Graph State",l.data,c.data,u.data),Ee.jsx(dO.Provider,{value:{assets:l,view:c,config:d,interaction:u,dragSession:{data:t,dispatch:h}},children:Ee.jsxs("div",{ref:a,className:"fullwidth fullheight",style:{position:"relative"},children:[n?Ee.jsxs("div",{className:"fullwidth fullheight flexbox-row flexbox-center",children:[Ee.jsx(Oa,{id:"document-drag_wrapper",dragItem:{type:"document",id:e.id},dragSetter:h,class:"fullwidth fullheight absolute",style:{top:c.data.documentPosition.y,left:c.data.documentPosition.x},children:Ee.jsx(pO,{id:e.id,config:e.config.document})}),i.get("node_form")?Ee.jsx("div",{className:"absolute fullwidth fullheight",style:{zIndex:200,backgroundColor:"rgba(0,0,0,0.1)"},children:Ee.jsx("div",{onClick:I,className:"fullwidth fullheight",style:{position:"relative"},children:Ee.jsx("div",{className:"absolute white-bg curve padding",style:{width:"80%",height:"80%",bottom:50,left:"50%",top:"50%",transform:"translate(-50%,-50%)",boxShadow:"0px 0px 30px rgba(0,0,0,0.1)"}})})}):null]}):Ee.jsx("div",{className:"fullwidth fullheight flexbox-row flexbox-center",children:Ee.jsx("div",{className:"fullwidth fullheight flexbox-column flexbox-center",children:Ee.jsx("span",{children:"Loading Document"})})}),Ee.jsxs("div",{children:[Ee.jsx("div",{className:"absolute fullheight",style:{backgroundColor:"rgba(0,0,0,0.1)",width:d?.data?.documentBoundaryThickness,left:0,top:0}}),Ee.jsx("div",{className:"absolute fullheight",style:{backgroundColor:"rgba(0,0,0,0.1)",width:d?.data?.documentBoundaryThickness,right:0,top:0}}),Ee.jsx("div",{className:"absolute fullwidth",style:{backgroundColor:"rgba(0,0,0,0.1)",height:d?.data?.documentBoundaryThickness,left:0,top:0}}),Ee.jsx("div",{className:"absolute fullwidth",style:{backgroundColor:"rgba(0,0,0,0.1)",height:d?.data?.documentBoundaryThickness,left:0,bottom:0}})]})]})})},Uz={Dropdown:sx,Textbox:lx,Toggle:cx};exports.AssetsReducer=Iz;exports.Connection=mz;exports.Context_Workspace=dO;exports.Document=pO;exports.Draggable=Oa;exports.Form=fz;exports.FormInputElements=Uz;exports.InteractionReducer=_z;exports.JSONForms=Hz;exports.NodeUtils=lO;exports.UIDCreator=Mo;exports.UiElementsRegistry_Standard=lz;exports.VectorApi=Ge;exports.ViewReducer=Az;exports.Workspace=qz;exports.getSchemaNode=Fz;exports.schemaNodeExporter=cO;exports.useWorkspace=$z;

package/dist/js/index.js

@@ -43059,7 +43059,7 @@ const Nz = (e, t) => {
         }
       });
     }
-  }, []), E = jt((T) => {
+  }, [c.data.documentPosition]), E = jt((T) => {
     u.dispatch({
       type: "remove-connections",
       payload: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackmango/graff",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "main": "./dist/js/index.cjs",
   "module": "./dist/js/index.js",
   "types": "./dist/types/components/index.d.ts",