@stackmango/graff 0.1.10 → 0.1.11

package/dist/js/index.js

@@ -1,5 +1,5 @@
 import * as v from "react";
-import $, { useMemo as En, useCallback as Mt, createContext as Ya, isValidElement as ga, PureComponent as Ka, Component as Ga, cloneElement as _i, Children as yO, forwardRef as vO, useContext as mx, useRef as vo, useState as xO, useEffect as Fn, useLayoutEffect as wO, useReducer as xo } from "react";
+import $, { useMemo as En, useCallback as Mt, createContext as Ya, isValidElement as ga, PureComponent as Ka, Component as Ga, cloneElement as _i, Children as yO, forwardRef as vO, useContext as mx, useRef as vo, useReducer as xo, useEffect as Fn, useState as xO, useLayoutEffect as wO } from "react";
 import * as SO from "react-dom";
 import vi from "react-dom";
 import { useSearchParams as OO } from "react-router-dom";
@@ -41839,7 +41839,7 @@ Ol.extend(lz);
 Ol.extend(nz);
 Ol.extend(pz);
 Ol.extend(bz);
-const Zz = {
+const Jz = {
   dropdown: {
     component: bx,
     reducer: vk
@@ -42061,229 +42061,7 @@ const Zz = {
       }
     ) : null
   ] }) });
-}, xz = Ya(null), Jz = (e) => {
-  const t = vo(null), [n, r] = xO(!1), a = vo(null), [i, s] = OO(), { assets: l, view: c, interaction: u, config: d } = En(() => e.state, [e.state]), f = vo(null), h = Mt((T) => {
-    t.current = T;
-  }, []), b = Mt((T, I) => {
-    f.current = setInterval(() => {
-      c?.dispatch?.({
-        type: "move-document",
-        payload: {
-          speed: 3.5,
-          direction: ot.getScaledVector(T, -1)
-        }
-      }), I.type == "node" && c.dispatch({
-        type: "move-node",
-        payload: {
-          nodeId: I.id,
-          motionVector: ot.getScaledVector(T, 3.5)
-        }
-      });
-    }, 8);
-  }, []), m = Mt(() => {
-    f.current && (clearInterval(f.current), f.current = null);
-  }, []), p = Mt((T) => {
-    if (T.detail && T.detail.dragElement) {
-      const I = a.current?.getBoundingClientRect(), F = T.detail.currentDragPosition.x > d.data.documentBoundaryThickness && T.detail.currentDragPosition.x < I.width - d.data.documentBoundaryThickness && T.detail.currentDragPosition.y > d.data.documentBoundaryThickness && T.detail.currentDragPosition.y < I.height - d.data.documentBoundaryThickness;
-      !F && !f.current ? b(T.detail.dragVector, T.detail.dragElement) : F && f.current && m();
-    }
-  }, [d.data.documentBoundaryThickness, d.data.documentDimension]), g = Mt((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((I) => {
-      const F = l.data.connections[I].from.split("/")[0], P = l.data.connections[I].to.split("/")[0];
-      F == T.detail.dragElement.id && c.dispatch({
-        type: "move-connectiontip",
-        payload: {
-          connectionId: I,
-          type: "from",
-          offset: T.detail.dragVector
-        }
-      }), P == T.detail.dragElement.id && c.dispatch({
-        type: "move-connectiontip",
-        payload: {
-          connectionId: I,
-          type: "to",
-          offset: T.detail.dragVector
-        }
-      });
-    })));
-  }, [l.data.connections, e.id]), x = Mt((T) => {
-    if (T.detail && T.detail.dragElement && T.detail.dragElement.type == "port") {
-      const I = T.detail.dragElement.id.split("/"), F = Ua(), P = { workspace: { x: c.data.documentPosition.x, y: c.data.documentPosition.y }, viewspace: ot.ORIGIN, viewport: c.data.viewportPosition }, y = ba.shiftPosition({ type: "viewport", position: T.detail.currentDragPosition }, "workspace", P);
-      console.log("Port Positions", P, y), u.dispatch({
-        type: "add-connection-byId",
-        payload: {
-          id: F,
-          skeleton: {
-            from: I[1] == "output" ? T.detail.dragElement.id : "",
-            to: I[1] == "input" ? T.detail.dragElement.id : ""
-          },
-          design: {
-            from: { position: y },
-            to: { position: y }
-          }
-        }
-      }), h({
-        startPosition: T.detail.currentDragPosition,
-        elementDragged: {
-          type: "connection-tip",
-          id: F + "/" + (I[1] == "input" ? "from" : "to")
-        },
-        currentPosition: T.detail.currentDragPosition
-      });
-    }
-  }, [c.data.documentPosition, c.data.viewportPosition]), w = Mt((T) => {
-    if (T.detail && T.detail.dragElement && T.detail.dragElement.type == "connection-tip") {
-      let I = T.detail.dragElement.id.split("/");
-      Object.keys(l.data.connections).find((F) => F == I[0]) ? c.dispatch({
-        type: "move-connectiontip",
-        payload: {
-          connectionId: I[0],
-          offset: T.detail.dragVector,
-          type: I[1]
-        }
-      }) : Object.keys(u.data.connections).find((F) => F == I[0]) && u.dispatch({
-        type: "move-connectiontip",
-        payload: {
-          connectionId: I[0],
-          offset: T.detail.dragVector,
-          type: I[1]
-        }
-      });
-    }
-  }, [l.data.connections, u.data.connections]), S = Mt((T) => {
-    if (console.log("Selection Area Drag", T.detail), T.detail?.dragElement?.type == "document") {
-      const I = { workspace: { x: c.data.documentPosition.x, y: c.data.documentPosition.y }, viewspace: ot.ORIGIN, viewport: c.data.viewportPosition };
-      u.dispatch?.({
-        type: "set-selection_area",
-        payload: {
-          start: ba.shiftPosition({ type: "viewport", position: T.detail.initialDragPosition }, "workspace", I),
-          end: ba.shiftPosition({ type: "viewport", position: T.detail.currentDragPosition }, "workspace", I)
-        }
-      });
-    }
-  }, []), E = Mt(() => {
-    u.dispatch({
-      type: "remove-connections",
-      payload: {
-        connectionId: Object.keys(u.data.connections)
-      }
-    }), m();
-  }, [u.data.connections]), O = Mt((T) => {
-    if (T.detail.dragElement?.type == "connection-tip") {
-      let I = { workspace: ot.ORIGIN, viewspace: { x: -c.data.documentPosition.x, y: -c.data.documentPosition.y }, viewport: c.data.viewportPosition }, F = ba.shiftPosition({ type: "viewport", position: T.detail.currentDragPosition }, "workspace", I), P = T.detail.dragElement.id.split("/"), y = u.data.connections[P[0]], _ = P[1] == "from" ? y.skeleton.to : y.skeleton.from, D = Ua();
-      Object.keys(l.data.nodes).filter((j) => j != _.split("/")[0]).forEach((j) => {
-        let A = gz.getAllPortsPositions(
-          {
-            position: c.data.nodes[j]?.position,
-            dimensions: d.data.nodeDimensions
-          },
-          {
-            input: Object.keys(l.data.nodes[j].ports.input),
-            output: Object.keys(l.data.nodes[j].ports.output),
-            dimensions: { portRadius: d.data.portRadius, slabHeight: d.data.portSlabHeight }
-          }
-        );
-        console.log("Port Positions", A), A.outputPorts.forEach((z) => {
-          P[1] == "from" && F.x > z.position.x - d.data.portRadius && F.x < z.position.x + d.data.portRadius && F.y > z.position.y - d.data.portRadius && F.y < z.position.y + d.data.portRadius && (u.dispatch({
-            type: "remove-connection",
-            payload: {
-              connectionId: P[0]
-            }
-          }), l.dispatch({
-            type: "add-connection-byId",
-            payload: {
-              id: D,
-              from: j + "/output/" + z.key,
-              to: _
-            }
-          }), c.dispatch({
-            type: "init-connection",
-            payload: {
-              connectionId: D,
-              from: z.position,
-              to: y.design.to.position
-            }
-          }), h(null));
-        }), A.inputPorts.forEach((z) => {
-          P[1] == "to" && F.x > z.position.x - d.data.portRadius && F.x < z.position.x + d.data.portRadius && F.y > z.position.y - d.data.portRadius && F.y < z.position.y + d.data.portRadius && (u.dispatch({
-            type: "remove-connection",
-            payload: {
-              connectionId: P[0]
-            }
-          }), l.dispatch({
-            type: "add-connection-byId",
-            payload: {
-              id: D,
-              from: _,
-              to: j + "/input/" + z.key
-            }
-          }), c.dispatch({
-            type: "init-connection",
-            payload: {
-              connectionId: D,
-              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 = Mt(() => {
-    if (r(!1), a.current) {
-      let T = a.current?.getBoundingClientRect();
-      T && (c.dispatch({
-        type: "set-viewport-position",
-        payload: { x: -T.x, y: -T.y }
-      }), r(!0));
-    }
-  }, []);
-  Fn(() => (window.addEventListener("ondrag-" + e.id, O), () => window.removeEventListener("ondrag-" + e.id, O)), [O]), Fn(() => (window.addEventListener("ondrag-" + e.id, S), () => window.removeEventListener("ondrag-" + e.id, S)), [S]), Fn(() => (window.addEventListener("ondrag-" + e.id, g), () => window.removeEventListener("ondrag-" + e.id, g)), [g]), Fn(() => (window.addEventListener("ondrag-" + e.id, x), () => window.removeEventListener("ondrag-" + e.id, x)), [x]), Fn(() => (window.addEventListener("ondrag-" + e.id, w), () => window.removeEventListener("ondrag-" + e.id, w)), [w]), Fn(() => (window.addEventListener("ondrag-" + e.id, p), () => window.removeEventListener("ondrag-" + e.id, p)), [p]), Fn(() => (window.addEventListener("dragstop-" + e.id, E), () => window.removeEventListener("dragstop-" + e.id, E)), [E]), Fn(() => {
-    k();
-  }, []), wO(() => {
-    const T = a.current;
-    if (!T) return;
-    const I = new ResizeObserver(() => {
-      k();
-    });
-    return I.observe(T), () => I.disconnect();
-  }, []);
-  const N = Mt((T) => {
-    T.target == T.currentTarget && (i.delete("node_form"), s(i));
-  }, [i]);
-  return /* @__PURE__ */ Pe.jsx(xz.Provider, { value: {
-    assets: l,
-    view: c,
-    config: d,
-    interaction: u,
-    dragSession: {
-      data: t,
-      dispatch: h
-    }
-  }, children: /* @__PURE__ */ Pe.jsxs("div", { ref: a, className: "fullwidth fullheight", style: { position: "relative" }, children: [
-    n ? /* @__PURE__ */ Pe.jsxs("div", { className: "fullwidth fullheight flexbox-row flexbox-center", children: [
-      /* @__PURE__ */ Pe.jsx("div", { className: "fullwidth fullheight absolute", style: { top: c.data.documentPosition.y, left: c.data.documentPosition.x }, children: /* @__PURE__ */ Pe.jsx(
-        vz,
-        {
-          id: e.id,
-          config: e.config.document
-        }
-      ) }),
-      i.get("node_form") ? /* @__PURE__ */ Pe.jsx("div", { className: "absolute fullwidth fullheight", style: { zIndex: 200, backgroundColor: "rgba(0,0,0,0.1)" }, children: /* @__PURE__ */ Pe.jsx("div", { onClick: N, className: "fullwidth fullheight", style: { position: "relative" }, children: /* @__PURE__ */ Pe.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
-    ] }) : /* @__PURE__ */ Pe.jsx("div", { className: "fullwidth fullheight flexbox-row flexbox-center", children: /* @__PURE__ */ Pe.jsx("div", { className: "fullwidth fullheight flexbox-column flexbox-center", children: /* @__PURE__ */ Pe.jsx("span", { children: "Loading Document" }) }) }),
-    /* @__PURE__ */ Pe.jsxs("div", { children: [
-      /* @__PURE__ */ Pe.jsx("div", { className: "absolute fullheight", style: { backgroundColor: "rgba(0,0,0,0.1)", width: d?.data?.documentBoundaryThickness, left: 0, top: 0 } }),
-      /* @__PURE__ */ Pe.jsx("div", { className: "absolute fullheight", style: { backgroundColor: "rgba(0,0,0,0.1)", width: d?.data?.documentBoundaryThickness, right: 0, top: 0 } }),
-      /* @__PURE__ */ Pe.jsx("div", { className: "absolute fullwidth", style: { backgroundColor: "rgba(0,0,0,0.1)", height: d?.data?.documentBoundaryThickness, left: 0, top: 0 } }),
-      /* @__PURE__ */ Pe.jsx("div", { className: "absolute fullwidth", style: { backgroundColor: "rgba(0,0,0,0.1)", height: d?.data?.documentBoundaryThickness, left: 0, bottom: 0 } })
-    ] })
-  ] }) });
-}, Qz = (e) => /* @__PURE__ */ Pe.jsx(
+}, xz = Ya(null), wz = (e) => /* @__PURE__ */ Pe.jsx(
   "div",
   {
     id: e.id,
@@ -42306,7 +42084,7 @@ const Zz = {
     style: e.style,
     children: e.children
   }
-), gO = Ya(null), wz = () => mx(gO), Sz = (e, t) => {
+), gO = Ya(null), Sz = () => mx(gO), Oz = (e, t) => {
   const n = { ...e };
   switch (t.type) {
     case "set-field":
@@ -42319,7 +42097,7 @@ const Zz = {
       break;
   }
   return n;
-}, Oz = (e, t) => {
+}, kz = (e, t) => {
   const n = { ...e };
   switch (t.type) {
     case "set-field":
@@ -42332,7 +42110,7 @@ const Zz = {
       break;
   }
   return n;
-}, kz = (e, t) => {
+}, Ez = (e, t) => {
   const n = { ...e };
   switch (t.type) {
     case "set-field":
@@ -42345,8 +42123,8 @@ const Zz = {
       break;
   }
   return n;
-}, e6 = (e) => {
-  const [t, n] = xo(Sz, e.formDefination.initialState), [r] = xo(Oz, e.formDefination.view), [a, i] = xo(kz, {
+}, Qz = (e) => {
+  const [t, n] = xo(Oz, e.formDefination.initialState), [r] = xo(kz, e.formDefination.view), [a, i] = xo(Ez, {
     form: {},
     fields: {}
   });
@@ -42362,14 +42140,14 @@ const Zz = {
     uiElementsRegistry: e.uiElementsRegistry
   }, children: /* @__PURE__ */ Pe.jsx("div", { className: "fullwidth fullheight flexbox-column gap scroll", children: Object.keys(e.formDefination.schema).map(
     (s) => /* @__PURE__ */ Pe.jsx(
-      Ez,
+      Cz,
       {
         id: s
       }
     )
   ) }) });
-}, Ez = (e) => {
-  const { asset: t, view: n, preference: r, config: a, schema: i, uiElementsRegistry: s } = wz() ?? {}, l = En(() => n?.data ? s?.[n?.data?.fields?.[e.id]?.component] : null, [s, n, e.id]), c = Mt((u, d) => {
+}, Cz = (e) => {
+  const { asset: t, view: n, preference: r, config: a, schema: i, uiElementsRegistry: s } = Sz() ?? {}, l = En(() => n?.data ? s?.[n?.data?.fields?.[e.id]?.component] : null, [s, n, e.id]), c = Mt((u, d) => {
     const f = {}, h = e.id + d.type;
     let b = [];
     const m = a?.data?.form?.adapters?.intent?.[h];
@@ -42395,7 +42173,7 @@ const Zz = {
       }
     ) : null
   ] });
-}, t6 = (e) => {
+}, e6 = (e) => {
   const { config: t, dragSession: n } = e.config.stateFetcher() ?? {}, r = En(() => !(e.skeleton.from && e.skeleton.to), [e.skeleton.from, e.skeleton.to]), a = En(() => {
     const i = e.design.from.position, s = e.design.to.position, l = s.x - i.x, c = { x: i.x + l * 0.5, y: i.y }, u = { x: s.x - l * 0.5, y: s.y };
     return `
@@ -42462,12 +42240,12 @@ const Zz = {
 function Rp(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 Ud = () => Math.random().toString(36).substring(7).split("").join("."), Cz = {
+var Ud = () => Math.random().toString(36).substring(7).split("").join("."), Tz = {
   INIT: `@@redux/INIT${/* @__PURE__ */ Ud()}`,
   REPLACE: `@@redux/REPLACE${/* @__PURE__ */ Ud()}`,
   PROBE_UNKNOWN_ACTION: () => `@@redux/PROBE_UNKNOWN_ACTION${Ud()}`
-}, Ta = Cz;
-function Tz(e) {
+}, Ta = Tz;
+function Dz(e) {
   if (typeof e != "object" || e === null)
     return !1;
   let t = e;
@@ -42475,7 +42253,7 @@ function Tz(e) {
     t = Object.getPrototypeOf(t);
   return Object.getPrototypeOf(e) === t || Object.getPrototypeOf(e) === null;
 }
-function Dz(e) {
+function jz(e) {
   if (e === void 0)
     return "undefined";
   if (e === null)
@@ -42491,11 +42269,11 @@ function Dz(e) {
   }
   if (Array.isArray(e))
     return "array";
-  if (Mz(e))
+  if (Rz(e))
     return "date";
-  if (Pz(e))
+  if (Mz(e))
     return "error";
-  const n = jz(e);
+  const n = Pz(e);
   switch (n) {
     case "Symbol":
     case "Promise":
@@ -42507,18 +42285,18 @@ function Dz(e) {
   }
   return Object.prototype.toString.call(e).slice(8, -1).toLowerCase().replace(/\s/g, "");
 }
-function jz(e) {
+function Pz(e) {
   return typeof e.constructor == "function" ? e.constructor.name : null;
 }
-function Pz(e) {
+function Mz(e) {
   return e instanceof Error || typeof e.message == "string" && e.constructor && typeof e.constructor.stackTraceLimit == "number";
 }
-function Mz(e) {
+function Rz(e) {
   return e instanceof Date ? !0 : typeof e.toDateString == "function" && typeof e.getDate == "function" && typeof e.setDate == "function";
 }
-function Rz(e) {
+function Nz(e) {
   let t = typeof e;
-  return process.env.NODE_ENV !== "production" && (t = Dz(e)), t;
+  return process.env.NODE_ENV !== "production" && (t = jz(e)), t;
 }
 function hx(e) {
   typeof console < "u" && typeof console.error == "function" && console.error(e);
@@ -42527,19 +42305,19 @@ function hx(e) {
   } catch {
   }
 }
-function Nz(e, t, n, r) {
+function Iz(e, t, n, r) {
   const a = Object.keys(t), i = n && n.type === Ta.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 (!Tz(e))
-    return `The ${i} has unexpected type of "${Rz(e)}". Expected argument to be an object with the following keys: "${a.join('", "')}"`;
+  if (!Dz(e))
+    return `The ${i} has unexpected type of "${Nz(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 === Ta.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 Iz(e) {
+function Az(e) {
   Object.keys(e).forEach((t) => {
     const n = e[t];
     if (typeof n(void 0, {
@@ -42563,7 +42341,7 @@ function Hh(e) {
   process.env.NODE_ENV !== "production" && (a = {});
   let i;
   try {
-    Iz(n);
+    Az(n);
   } catch (s) {
     i = s;
   }
@@ -42571,7 +42349,7 @@ function Hh(e) {
     if (i)
       throw i;
     if (process.env.NODE_ENV !== "production") {
-      const f = Nz(l, n, c, a);
+      const f = Iz(l, n, c, a);
       f && hx(f);
     }
     let u = !1;
@@ -42587,7 +42365,7 @@ function Hh(e) {
     return u = u || r.length !== Object.keys(l).length, u ? d : l;
   };
 }
-const Az = (e, t) => {
+const _z = (e, t) => {
   const n = e ? { ...e } : null;
   switch (t.type) {
     case "set-selection_area":
@@ -42596,7 +42374,7 @@ const Az = (e, t) => {
       return null;
   }
   return n;
-}, _z = (e, t) => {
+}, Fz = (e, t) => {
   const n = e ? { ...e } : { node: [], connection: [] };
   switch (t.type) {
     case "set-selectedItems":
@@ -42615,7 +42393,7 @@ const Az = (e, t) => {
       break;
   }
   return n;
-}, Fz = (e = {}, t) => {
+}, $z = (e = {}, t) => {
   const n = { ...e };
   switch (t.type) {
     case "add-node":
@@ -42657,7 +42435,7 @@ const Az = (e, t) => {
       break;
   }
   return n;
-}, $z = (e = {}, t) => {
+}, Vz = (e = {}, t) => {
   const n = { ...e };
   switch (t.type) {
     case "init-node-view":
@@ -42671,7 +42449,7 @@ const Az = (e, t) => {
       break;
   }
   return n;
-}, Vz = (e = {}, t) => {
+}, Bz = (e = {}, t) => {
   const n = { ...e };
   switch (t.type) {
     case "add-connection":
@@ -42689,7 +42467,7 @@ const Az = (e, t) => {
       break;
   }
   return n;
-}, Bz = (e = {}, t) => {
+}, Lz = (e = {}, t) => {
   const n = { ...e };
   switch (t.type) {
     case "init-connection":
@@ -42714,7 +42492,7 @@ const Az = (e, t) => {
       break;
   }
   return n;
-}, Lz = (e, t) => {
+}, zz = (e, t) => {
   const n = { ...e };
   switch (t.type) {
     case "add-connection":
@@ -42758,7 +42536,7 @@ const Az = (e, t) => {
       break;
   }
   return n;
-}, zz = (e, t) => {
+}, Hz = (e, t) => {
   let n = { ...e };
   switch (t.type) {
     case "set-document-position":
@@ -42769,22 +42547,22 @@ const Az = (e, t) => {
       break;
   }
   return n;
-}, Hz = (e, t) => {
+}, Wz = (e, t) => {
   let n = { ...e };
   return t.type === "set-viewport-position" && (n = t.payload), n;
-}, n6 = Hh({
-  nodes: Fz,
-  connections: Vz
-}), r6 = Hh({
+}, t6 = Hh({
   nodes: $z,
-  connections: Bz,
-  viewportPosition: Hz,
-  documentPosition: zz
-}), o6 = Hh({
+  connections: Bz
+}), n6 = Hh({
+  nodes: Vz,
   connections: Lz,
-  selection: Az,
-  selectedItems: _z
-}), a6 = (e) => ({
+  viewportPosition: Wz,
+  documentPosition: Hz
+}), r6 = Hh({
+  connections: zz,
+  selection: _z,
+  selectedItems: Fz
+}), o6 = (e) => ({
   type: "dummy",
   ports: {
     input: {
@@ -42816,7 +42594,7 @@ const Az = (e, t) => {
       ouput: !1
     }
   }
-}), i6 = (e) => {
+}), a6 = (e) => {
   const [t, n] = xo(e.Assets.reducer, e.Assets.initialState), [r, a] = xo(e.View.reducer, e.View.initialState), [i, s] = xo(e.Interaction.reducer, e.Interaction.initialState), l = vo(e.Config.initialState).current;
   return {
     assets: {
@@ -42880,7 +42658,7 @@ const Az = (e, t) => {
     component: "toggle",
     reducer: Ja
   }
-}, Wz = {
+}, qz = {
   // examples: {
   //     type: "array",
   //     title: "Examples",
@@ -43036,7 +42814,7 @@ const Az = (e, t) => {
   //     title: "Not",
   //     description: "Negated schema"
   // }
-}, qz = {
+}, Uz = {
   minimum: {
     schema: {
       type: "number",
@@ -43072,7 +42850,7 @@ const Az = (e, t) => {
     config: { dataType: "integer" },
     reducer: Et
   }
-}, Uz = {
+}, Yz = {
   minItems: {
     schema: {
       type: "number",
@@ -43108,7 +42886,7 @@ const Az = (e, t) => {
     config: { dataType: "integer" },
     reducer: Et
   }
-}, Yz = {
+}, Kz = {
   items: {
     schema: {
       type: "number",
@@ -43134,30 +42912,252 @@ const Az = (e, t) => {
     component: "toggle",
     reducer: Ja
   }
-}, s6 = {
-  string: { ...sa, ...Wz },
-  number: { ...sa, ...qz },
+}, i6 = {
+  string: { ...sa, ...qz },
+  number: { ...sa, ...Uz },
   boolean: sa,
-  array: { ...sa, ...Uz },
-  object: { ...sa, ...Yz }
+  array: { ...sa, ...Yz },
+  object: { ...sa, ...Kz }
+}, s6 = (e) => {
+  const t = vo(null), [n, r] = xO(!1), a = vo(null), [i, s] = OO(), { assets: l, view: c, interaction: u, config: d } = En(() => e.state, [e.state]), f = vo(null), h = Mt((T) => {
+    t.current = T;
+  }, []), b = Mt((T, I) => {
+    f.current = setInterval(() => {
+      c?.dispatch?.({
+        type: "move-document",
+        payload: {
+          speed: 3.5,
+          direction: ot.getScaledVector(T, -1)
+        }
+      }), I.type == "node" && c.dispatch({
+        type: "move-node",
+        payload: {
+          nodeId: I.id,
+          motionVector: ot.getScaledVector(T, 3.5)
+        }
+      });
+    }, 8);
+  }, []), m = Mt(() => {
+    f.current && (clearInterval(f.current), f.current = null);
+  }, []), p = Mt((T) => {
+    if (T.detail && T.detail.dragElement) {
+      const I = a.current?.getBoundingClientRect(), F = T.detail.currentDragPosition.x > d.data.documentBoundaryThickness && T.detail.currentDragPosition.x < I.width - d.data.documentBoundaryThickness && T.detail.currentDragPosition.y > d.data.documentBoundaryThickness && T.detail.currentDragPosition.y < I.height - d.data.documentBoundaryThickness;
+      !F && !f.current ? b(T.detail.dragVector, T.detail.dragElement) : F && f.current && m();
+    }
+  }, [d.data.documentBoundaryThickness, d.data.documentDimension]), g = Mt((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((I) => {
+      const F = l.data.connections[I].from.split("/")[0], P = l.data.connections[I].to.split("/")[0];
+      F == T.detail.dragElement.id && c.dispatch({
+        type: "move-connectiontip",
+        payload: {
+          connectionId: I,
+          type: "from",
+          offset: T.detail.dragVector
+        }
+      }), P == T.detail.dragElement.id && c.dispatch({
+        type: "move-connectiontip",
+        payload: {
+          connectionId: I,
+          type: "to",
+          offset: T.detail.dragVector
+        }
+      });
+    })));
+  }, [l.data.connections, e.id]), x = Mt((T) => {
+    if (T.detail && T.detail.dragElement && T.detail.dragElement.type == "port") {
+      const I = T.detail.dragElement.id.split("/"), F = Ua(), P = { workspace: { x: c.data.documentPosition.x, y: c.data.documentPosition.y }, viewspace: ot.ORIGIN, viewport: c.data.viewportPosition }, y = ba.shiftPosition({ type: "viewport", position: T.detail.currentDragPosition }, "workspace", P);
+      console.log("Port Positions", P, y), u.dispatch({
+        type: "add-connection-byId",
+        payload: {
+          id: F,
+          skeleton: {
+            from: I[1] == "output" ? T.detail.dragElement.id : "",
+            to: I[1] == "input" ? T.detail.dragElement.id : ""
+          },
+          design: {
+            from: { position: y },
+            to: { position: y }
+          }
+        }
+      }), h({
+        startPosition: T.detail.currentDragPosition,
+        elementDragged: {
+          type: "connection-tip",
+          id: F + "/" + (I[1] == "input" ? "from" : "to")
+        },
+        currentPosition: T.detail.currentDragPosition
+      });
+    }
+  }, [c.data.documentPosition, c.data.viewportPosition]), w = Mt((T) => {
+    if (T.detail && T.detail.dragElement && T.detail.dragElement.type == "connection-tip") {
+      let I = T.detail.dragElement.id.split("/");
+      Object.keys(l.data.connections).find((F) => F == I[0]) ? c.dispatch({
+        type: "move-connectiontip",
+        payload: {
+          connectionId: I[0],
+          offset: T.detail.dragVector,
+          type: I[1]
+        }
+      }) : Object.keys(u.data.connections).find((F) => F == I[0]) && u.dispatch({
+        type: "move-connectiontip",
+        payload: {
+          connectionId: I[0],
+          offset: T.detail.dragVector,
+          type: I[1]
+        }
+      });
+    }
+  }, [l.data.connections, u.data.connections]), S = Mt((T) => {
+    if (console.log("Selection Area Drag", T.detail), T.detail?.dragElement?.type == "document") {
+      const I = { workspace: { x: c.data.documentPosition.x, y: c.data.documentPosition.y }, viewspace: ot.ORIGIN, viewport: c.data.viewportPosition };
+      u.dispatch?.({
+        type: "set-selection_area",
+        payload: {
+          start: ba.shiftPosition({ type: "viewport", position: T.detail.initialDragPosition }, "workspace", I),
+          end: ba.shiftPosition({ type: "viewport", position: T.detail.currentDragPosition }, "workspace", I)
+        }
+      });
+    }
+  }, []), E = Mt(() => {
+    u.dispatch({
+      type: "remove-connections",
+      payload: {
+        connectionId: Object.keys(u.data.connections)
+      }
+    }), m();
+  }, [u.data.connections]), O = Mt((T) => {
+    if (T.detail.dragElement?.type == "connection-tip") {
+      let I = { workspace: ot.ORIGIN, viewspace: { x: -c.data.documentPosition.x, y: -c.data.documentPosition.y }, viewport: c.data.viewportPosition }, F = ba.shiftPosition({ type: "viewport", position: T.detail.currentDragPosition }, "workspace", I), P = T.detail.dragElement.id.split("/"), y = u.data.connections[P[0]], _ = P[1] == "from" ? y.skeleton.to : y.skeleton.from, D = Ua();
+      Object.keys(l.data.nodes).filter((j) => j != _.split("/")[0]).forEach((j) => {
+        let A = gz.getAllPortsPositions(
+          {
+            position: c.data.nodes[j]?.position,
+            dimensions: d.data.nodeDimensions
+          },
+          {
+            input: Object.keys(l.data.nodes[j].ports.input),
+            output: Object.keys(l.data.nodes[j].ports.output),
+            dimensions: { portRadius: d.data.portRadius, slabHeight: d.data.portSlabHeight }
+          }
+        );
+        console.log("Port Positions", A), A.outputPorts.forEach((z) => {
+          P[1] == "from" && F.x > z.position.x - d.data.portRadius && F.x < z.position.x + d.data.portRadius && F.y > z.position.y - d.data.portRadius && F.y < z.position.y + d.data.portRadius && (u.dispatch({
+            type: "remove-connection",
+            payload: {
+              connectionId: P[0]
+            }
+          }), l.dispatch({
+            type: "add-connection-byId",
+            payload: {
+              id: D,
+              from: j + "/output/" + z.key,
+              to: _
+            }
+          }), c.dispatch({
+            type: "init-connection",
+            payload: {
+              connectionId: D,
+              from: z.position,
+              to: y.design.to.position
+            }
+          }), h(null));
+        }), A.inputPorts.forEach((z) => {
+          P[1] == "to" && F.x > z.position.x - d.data.portRadius && F.x < z.position.x + d.data.portRadius && F.y > z.position.y - d.data.portRadius && F.y < z.position.y + d.data.portRadius && (u.dispatch({
+            type: "remove-connection",
+            payload: {
+              connectionId: P[0]
+            }
+          }), l.dispatch({
+            type: "add-connection-byId",
+            payload: {
+              id: D,
+              from: _,
+              to: j + "/input/" + z.key
+            }
+          }), c.dispatch({
+            type: "init-connection",
+            payload: {
+              connectionId: D,
+              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 = Mt(() => {
+    if (r(!1), a.current) {
+      let T = a.current?.getBoundingClientRect();
+      T && (c.dispatch({
+        type: "set-viewport-position",
+        payload: { x: -T.x, y: -T.y }
+      }), r(!0));
+    }
+  }, []);
+  Fn(() => (window.addEventListener("ondrag-" + e.id, O), () => window.removeEventListener("ondrag-" + e.id, O)), [O]), Fn(() => (window.addEventListener("ondrag-" + e.id, S), () => window.removeEventListener("ondrag-" + e.id, S)), [S]), Fn(() => (window.addEventListener("ondrag-" + e.id, g), () => window.removeEventListener("ondrag-" + e.id, g)), [g]), Fn(() => (window.addEventListener("ondrag-" + e.id, x), () => window.removeEventListener("ondrag-" + e.id, x)), [x]), Fn(() => (window.addEventListener("ondrag-" + e.id, w), () => window.removeEventListener("ondrag-" + e.id, w)), [w]), Fn(() => (window.addEventListener("ondrag-" + e.id, p), () => window.removeEventListener("ondrag-" + e.id, p)), [p]), Fn(() => (window.addEventListener("dragstop-" + e.id, E), () => window.removeEventListener("dragstop-" + e.id, E)), [E]), Fn(() => {
+    k();
+  }, []), wO(() => {
+    const T = a.current;
+    if (!T) return;
+    const I = new ResizeObserver(() => {
+      k();
+    });
+    return I.observe(T), () => I.disconnect();
+  }, []);
+  const N = Mt((T) => {
+    T.target == T.currentTarget && (i.delete("node_form"), s(i));
+  }, [i]);
+  return /* @__PURE__ */ Pe.jsx(xz.Provider, { value: {
+    assets: l,
+    view: c,
+    config: d,
+    interaction: u,
+    dragSession: {
+      data: t,
+      dispatch: h
+    }
+  }, children: /* @__PURE__ */ Pe.jsxs("div", { ref: a, className: "fullwidth fullheight", style: { position: "relative" }, children: [
+    n ? /* @__PURE__ */ Pe.jsxs("div", { className: "fullwidth fullheight flexbox-row flexbox-center", children: [
+      /* @__PURE__ */ Pe.jsx(wz, { 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: /* @__PURE__ */ Pe.jsx(
+        vz,
+        {
+          id: e.id,
+          config: e.config.document
+        }
+      ) }),
+      i.get("node_form") ? /* @__PURE__ */ Pe.jsx("div", { className: "absolute fullwidth fullheight", style: { zIndex: 200, backgroundColor: "rgba(0,0,0,0.1)" }, children: /* @__PURE__ */ Pe.jsx("div", { onClick: N, className: "fullwidth fullheight", style: { position: "relative" }, children: /* @__PURE__ */ Pe.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
+    ] }) : /* @__PURE__ */ Pe.jsx("div", { className: "fullwidth fullheight flexbox-row flexbox-center", children: /* @__PURE__ */ Pe.jsx("div", { className: "fullwidth fullheight flexbox-column flexbox-center", children: /* @__PURE__ */ Pe.jsx("span", { children: "Loading Document" }) }) }),
+    /* @__PURE__ */ Pe.jsxs("div", { children: [
+      /* @__PURE__ */ Pe.jsx("div", { className: "absolute fullheight", style: { backgroundColor: "rgba(0,0,0,0.1)", width: d?.data?.documentBoundaryThickness, left: 0, top: 0 } }),
+      /* @__PURE__ */ Pe.jsx("div", { className: "absolute fullheight", style: { backgroundColor: "rgba(0,0,0,0.1)", width: d?.data?.documentBoundaryThickness, right: 0, top: 0 } }),
+      /* @__PURE__ */ Pe.jsx("div", { className: "absolute fullwidth", style: { backgroundColor: "rgba(0,0,0,0.1)", height: d?.data?.documentBoundaryThickness, left: 0, top: 0 } }),
+      /* @__PURE__ */ Pe.jsx("div", { className: "absolute fullwidth", style: { backgroundColor: "rgba(0,0,0,0.1)", height: d?.data?.documentBoundaryThickness, left: 0, bottom: 0 } })
+    ] })
+  ] }) });
 }, l6 = { Dropdown: bx, Textbox: gx, Toggle: yx };
 export {
-  n6 as AssetsReducer,
-  t6 as Connection,
+  t6 as AssetsReducer,
+  e6 as Connection,
   xz as Context_Workspace,
   vz as Document,
-  Qz as Draggable,
-  e6 as Form,
+  wz as Draggable,
+  Qz as Form,
   l6 as FormInputElements,
-  o6 as InteractionReducer,
-  s6 as JSONForms,
+  r6 as InteractionReducer,
+  i6 as JSONForms,
   gz as NodeUtils,
   Ua as UIDCreator,
-  Zz as UiElementsRegistry_Standard,
+  Jz as UiElementsRegistry_Standard,
   ot as VectorApi,
-  r6 as ViewReducer,
-  Jz as Workspace,
-  a6 as getSchemaNode,
+  n6 as ViewReducer,
+  s6 as Workspace,
+  o6 as getSchemaNode,
   yz as schemaNodeExporter,
-  i6 as useWorkspace
+  a6 as useWorkspace
 };