@vuu-ui/vuu-layout 2.1.19-beta.2 → 2.1.19-beta.4

package/cjs/layout-provider/LayoutProvider.js

@@ -0,0 +1,304 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var React = require('react');
+var pathUtils = require('../utils/pathUtils.js');
+var propUtils = require('../utils/propUtils.js');
+var typeOf = require('../utils/typeOf.js');
+var layoutReducer = require('../layout-reducer/layout-reducer.js');
+var layoutTypes = require('../layout-reducer/layoutTypes.js');
+var layoutUtils = require('../layout-reducer/layoutUtils.js');
+var LayoutProviderContext = require('./LayoutProviderContext.js');
+var useLayoutDragDrop = require('./useLayoutDragDrop.js');
+
+const isWorkspaceContainer = (props) => props.id === vuuUtils.VuuShellLocation.WorkspaceContainer;
+const isMultiWorkspaceContainer = (props) => props.id === vuuUtils.VuuShellLocation.MultiWorkspaceContainer;
+const shouldSave = (action) => [
+  "add",
+  "drag-drop",
+  "remove",
+  "set-title",
+  "splitter-resize",
+  "switch-tab"
+].includes(action.type);
+const getLayoutChangeReason = (action) => {
+  switch (action.type) {
+    case "switch-tab":
+      if (action.id === vuuUtils.VuuShellLocation.Workspace) {
+        return "switch-active-layout";
+      } else {
+        return "switch-active-tab";
+      }
+    case "save":
+      return "save-feature-props";
+    case "drag-drop":
+      return "drag-drop-operation";
+    case "add":
+      return "add-component";
+    case "remove":
+      return "remove-component";
+    case "splitter-resize":
+      return "resize-component";
+    case "set-title":
+      return "edit-feature-title";
+    default:
+      throw Error("unknown layout action");
+  }
+};
+const LayoutProviderVersion = () => {
+  const version = useLayoutProviderVersion();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { children: `Context: ${version} ` });
+};
+const pathToDropTarget = `#${vuuUtils.VuuShellLocation.Workspace}.ACTIVE_CHILD`;
+const LayoutProvider = (props) => {
+  const { children, createNewChild, workspaceJSON, onLayoutChange } = props;
+  const state = React.useRef(void 0);
+  const childrenRef = React.useRef(children);
+  const [, forceRefresh] = React.useState(null);
+  const serializeState = React.useCallback(
+    (source, layoutChangeReason) => {
+      if (onLayoutChange) {
+        const workspaceContainer = pathUtils.findTarget(source, isWorkspaceContainer) || state.current;
+        const isLayoutContainer = typeOf.typeOf(workspaceContainer) === "LayoutContainer";
+        const target = isLayoutContainer ? propUtils.getProps(workspaceContainer).children[0] : workspaceContainer;
+        const serializedModel = layoutUtils.layoutToJSON(target);
+        onLayoutChange(serializedModel, layoutChangeReason);
+      }
+    },
+    [onLayoutChange]
+  );
+  const dispatchLayoutAction = React.useCallback(
+    (action, suppressSave = false) => {
+      const nextState = layoutReducer.layoutReducer(state.current, action);
+      if (nextState !== state.current) {
+        state.current = nextState;
+        forceRefresh({});
+        if (!suppressSave && shouldSave(action)) {
+          serializeState(nextState, getLayoutChangeReason(action));
+        }
+      }
+    },
+    [forceRefresh, serializeState]
+  );
+  const addComponentToWorkspace = React.useCallback(
+    (component) => {
+      dispatchLayoutAction({
+        type: "add",
+        path: `#${vuuUtils.VuuShellLocation.Workspace}`,
+        component
+      });
+    },
+    [dispatchLayoutAction]
+  );
+  const switchWorkspace = React.useCallback(
+    (idx) => {
+      dispatchLayoutAction({
+        type: "switch-tab",
+        nextIdx: idx,
+        path: `#${vuuUtils.VuuShellLocation.MultiWorkspaceContainer}`
+      });
+    },
+    [dispatchLayoutAction]
+  );
+  const showComponentInContextPanel = React.useCallback(
+    (component, title, onContextPanelClose) => {
+      dispatchLayoutAction({
+        type: "set-props",
+        path: `#${vuuUtils.VuuShellLocation.ContextPanel}`,
+        props: {
+          expanded: true,
+          content: component,
+          onClose: onContextPanelClose,
+          title
+        }
+      });
+    },
+    [dispatchLayoutAction]
+  );
+  const layoutActionDispatcher = React.useCallback(
+    (action) => {
+      switch (action.type) {
+        case "drag-start": {
+          prepareToDragLayout(action);
+          break;
+        }
+        case "save": {
+          if (state.current) {
+            serializeState(state.current, getLayoutChangeReason(action));
+          }
+          break;
+        }
+        case "query":
+          if (action.query === "PARENT_CONTAINER") {
+            return layoutUtils.layoutQuery(action.query, action.path, state.current);
+          }
+          break;
+        default: {
+          dispatchLayoutAction(action);
+          break;
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dispatchLayoutAction, serializeState]
+  );
+  const prepareToDragLayout = useLayoutDragDrop.useLayoutDragDrop(
+    state,
+    layoutActionDispatcher,
+    pathToDropTarget
+  );
+  React.useEffect(() => {
+    if (workspaceJSON) {
+      if (Array.isArray(workspaceJSON)) {
+        const targetContainer = pathUtils.findTarget(
+          state.current,
+          isMultiWorkspaceContainer
+        );
+        if (targetContainer) {
+          const { path: targetContainerPath } = targetContainer.props;
+          const target = propUtils.getChildProp(targetContainer);
+          const newLayouts = workspaceJSON.map(
+            (ws, i) => layoutUtils.layoutFromJson(ws, `${targetContainerPath}.${i}`)
+          );
+          const action = target ? {
+            type: layoutTypes.LayoutActionType.REPLACE,
+            target,
+            replacement: newLayouts
+          } : {
+            type: layoutTypes.LayoutActionType.ADD,
+            path: targetContainerPath,
+            component: newLayouts
+          };
+          dispatchLayoutAction(action, true);
+        }
+      } else {
+        const targetContainer = pathUtils.findTarget(
+          state.current,
+          isWorkspaceContainer
+        );
+        if (targetContainer) {
+          const { path: targetContainerPath } = targetContainer.props;
+          const target = propUtils.getChildProp(targetContainer);
+          const newLayout = layoutUtils.layoutFromJson(
+            workspaceJSON,
+            `${targetContainerPath}.0`
+          );
+          const action = target ? {
+            type: layoutTypes.LayoutActionType.REPLACE,
+            target,
+            replacement: newLayout
+          } : {
+            type: layoutTypes.LayoutActionType.ADD,
+            path: targetContainerPath,
+            component: newLayout
+          };
+          dispatchLayoutAction(action, true);
+        } else if (workspaceJSON.id === propUtils.getProp(state.current, "id")) {
+          const newLayout = layoutUtils.layoutFromJson(workspaceJSON, "0");
+          const action = {
+            type: layoutTypes.LayoutActionType.REPLACE,
+            target: state.current,
+            replacement: newLayout
+          };
+          dispatchLayoutAction(action, true);
+        } else {
+          throw Error(
+            `LayoutProvider unable to render new workspaceJson, no valid target container. Use a valid Shell Layout Template or include a container with the standard workspace id '${vuuUtils.VuuShellLocation.Workspace}' `
+          );
+        }
+      }
+    }
+  }, [dispatchLayoutAction, workspaceJSON]);
+  if (state.current === void 0) {
+    state.current = layoutUtils.cloneElementAddLayoutProps(children);
+  } else if (children !== childrenRef.current) {
+    state.current = layoutUtils.cloneElementAddLayoutProps(children, state.current);
+    childrenRef.current = children;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    LayoutProviderContext.LayoutProviderContext.Provider,
+    {
+      value: {
+        addComponentToWorkspace,
+        createNewChild,
+        dispatchLayoutProvider: layoutActionDispatcher,
+        showComponentInContextPanel,
+        switchWorkspace,
+        version: 0
+      },
+      children: state.current
+    }
+  );
+};
+const useLayoutProviderDispatch = () => {
+  const { dispatchLayoutProvider } = React.useContext(LayoutProviderContext.LayoutProviderContext);
+  return dispatchLayoutProvider;
+};
+const useLayoutOperation = () => {
+  const {
+    addComponentToWorkspace,
+    showComponentInContextPanel,
+    switchWorkspace
+  } = React.useContext(LayoutProviderContext.LayoutProviderContext);
+  return {
+    addComponentToWorkspace,
+    showComponentInContextPanel,
+    switchWorkspace
+  };
+};
+const useLayoutCreateNewChild = () => {
+  const layoutPlaceholderJSON = vuuUtils.usePlaceholderJSON();
+  const { createNewChild } = React.useContext(LayoutProviderContext.LayoutProviderContext);
+  const defaultCreateNewChild = React.useMemo(
+    () => function createNewChild2() {
+      if (layoutPlaceholderJSON) {
+        const { props } = layoutPlaceholderJSON;
+        return layoutUtils.layoutFromJson(
+          {
+            ...layoutPlaceholderJSON,
+            props: {
+              ...props,
+              resizeable: true,
+              style: {
+                ...props?.style,
+                flexGrow: 1,
+                flexShrink: 0,
+                flexBasis: 0
+              }
+            }
+          },
+          "0"
+        );
+      }
+      return layoutUtils.layoutFromJson(
+        {
+          type: "Placeholder",
+          props: {
+            resizeable: true,
+            style: {
+              flexGrow: 1,
+              flexShrink: 0,
+              flexBasis: 0
+            }
+          }
+        },
+        "0"
+      );
+    },
+    [layoutPlaceholderJSON]
+  );
+  return createNewChild ?? defaultCreateNewChild;
+};
+const useLayoutProviderVersion = () => {
+  const { version } = React.useContext(LayoutProviderContext.LayoutProviderContext);
+  return version;
+};
+
+exports.LayoutProvider = LayoutProvider;
+exports.LayoutProviderVersion = LayoutProviderVersion;
+exports.useLayoutCreateNewChild = useLayoutCreateNewChild;
+exports.useLayoutOperation = useLayoutOperation;
+exports.useLayoutProviderDispatch = useLayoutProviderDispatch;
+exports.useLayoutProviderVersion = useLayoutProviderVersion;
+//# sourceMappingURL=LayoutProvider.js.map

package/cjs/layout-provider/LayoutProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutProvider.js","sources":["../../../../packages/vuu-layout/src/layout-provider/LayoutProvider.tsx"],"sourcesContent":["import {\n  VuuShellLocation,\n  usePlaceholderJSON,\n  type LayoutJSON,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  RefObject,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactElement,\n} from \"react\";\nimport {\n  LayoutActionType,\n  LayoutProps,\n  cloneElementAddLayoutProps,\n  layoutFromJson,\n  layoutQuery,\n  layoutReducer,\n  layoutToJSON,\n  type LayoutChangeHandler,\n  type LayoutChangeReason,\n  type LayoutReducerAction,\n} from \"../layout-reducer\";\nimport { findTarget, getChildProp, getProp, getProps, typeOf } from \"../utils\";\nimport {\n  LayoutProviderContext,\n  LayoutProviderDispatch,\n} from \"./LayoutProviderContext\";\nimport { useLayoutDragDrop } from \"./useLayoutDragDrop\";\nimport { SaveAction } from \"../layout-view/viewTypes\";\n\nconst isWorkspaceContainer = (props: LayoutProps) =>\n  props.id === VuuShellLocation.WorkspaceContainer;\n\nconst isMultiWorkspaceContainer = (props: LayoutProps) =>\n  props.id === VuuShellLocation.MultiWorkspaceContainer;\n\nconst shouldSave = (action: LayoutReducerAction) =>\n  [\n    \"add\",\n    \"drag-drop\",\n    \"remove\",\n    \"set-title\",\n    \"splitter-resize\",\n    \"switch-tab\",\n  ].includes(action.type);\n\nconst getLayoutChangeReason = (\n  action: LayoutReducerAction | SaveAction,\n): LayoutChangeReason => {\n  switch (action.type) {\n    case \"switch-tab\":\n      if (action.id === VuuShellLocation.Workspace) {\n        return \"switch-active-layout\";\n      } else {\n        return \"switch-active-tab\";\n      }\n    case \"save\":\n      return \"save-feature-props\";\n    case \"drag-drop\":\n      return \"drag-drop-operation\";\n    case \"add\":\n      return \"add-component\";\n    case \"remove\":\n      return \"remove-component\";\n    case \"splitter-resize\":\n      return \"resize-component\";\n    case \"set-title\":\n      return \"edit-feature-title\";\n    default:\n      throw Error(\"unknown layout action\");\n  }\n};\n\nexport interface LayoutProviderProps {\n  children: ReactElement;\n  createNewChild?: (index?: number) => ReactElement;\n  workspaceJSON?: LayoutJSON | LayoutJSON[];\n  onLayoutChange?: LayoutChangeHandler;\n}\n\nexport const LayoutProviderVersion = () => {\n  const version = useLayoutProviderVersion();\n  return <div>{`Context: ${version} `}</div>;\n};\n\nconst pathToDropTarget = `#${VuuShellLocation.Workspace}.ACTIVE_CHILD`;\n\nexport const LayoutProvider = (props: LayoutProviderProps): ReactElement => {\n  const { children, createNewChild, workspaceJSON, onLayoutChange } = props;\n  const state = useRef<ReactElement | undefined>(undefined);\n  const childrenRef = useRef<ReactElement>(children);\n\n  const [, forceRefresh] = useState<unknown>(null);\n\n  const serializeState = useCallback(\n    (source: ReactElement, layoutChangeReason: LayoutChangeReason) => {\n      if (onLayoutChange) {\n        const workspaceContainer =\n          findTarget(source, isWorkspaceContainer) || state.current;\n        const isLayoutContainer =\n          typeOf(workspaceContainer) === \"LayoutContainer\";\n        const target = isLayoutContainer\n          ? getProps(workspaceContainer).children[0]\n          : workspaceContainer;\n        const serializedModel = layoutToJSON(target);\n        onLayoutChange(serializedModel, layoutChangeReason);\n      }\n    },\n    [onLayoutChange],\n  );\n\n  const dispatchLayoutAction = useCallback(\n    (action: LayoutReducerAction, suppressSave = false) => {\n      const nextState = layoutReducer(state.current as ReactElement, action);\n      if (nextState !== state.current) {\n        state.current = nextState;\n        forceRefresh({});\n        if (!suppressSave && shouldSave(action)) {\n          serializeState(nextState, getLayoutChangeReason(action));\n        }\n      }\n    },\n    [forceRefresh, serializeState],\n  );\n\n  const addComponentToWorkspace = useCallback(\n    (component: ReactElement) => {\n      dispatchLayoutAction({\n        type: \"add\",\n        path: `#${VuuShellLocation.Workspace}`,\n        component,\n      });\n    },\n    [dispatchLayoutAction],\n  );\n\n  const switchWorkspace = useCallback(\n    (idx: number) => {\n      dispatchLayoutAction({\n        type: \"switch-tab\",\n        nextIdx: idx,\n        path: `#${VuuShellLocation.MultiWorkspaceContainer}`,\n      });\n    },\n    [dispatchLayoutAction],\n  );\n\n  const showComponentInContextPanel = useCallback(\n    (\n      component: ReactElement | LayoutJSON,\n      title?: string,\n      onContextPanelClose?: () => void,\n    ) => {\n      dispatchLayoutAction({\n        type: \"set-props\",\n        path: `#${VuuShellLocation.ContextPanel}`,\n        props: {\n          expanded: true,\n          content: component,\n          onClose: onContextPanelClose,\n          title,\n        },\n      });\n    },\n    [dispatchLayoutAction],\n  );\n\n  const layoutActionDispatcher = useCallback<LayoutProviderDispatch>(\n    (action) => {\n      switch (action.type) {\n        case \"drag-start\": {\n          prepareToDragLayout(action);\n          break;\n        }\n        case \"save\": {\n          if (state.current) {\n            serializeState(state.current, getLayoutChangeReason(action));\n          }\n          break;\n        }\n        case \"query\":\n          if (action.query === \"PARENT_CONTAINER\") {\n            return layoutQuery(action.query, action.path, state.current);\n          }\n          break;\n\n        default: {\n          dispatchLayoutAction(action);\n          break;\n        }\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [dispatchLayoutAction, serializeState],\n  );\n\n  const prepareToDragLayout = useLayoutDragDrop(\n    state as RefObject<ReactElement>,\n    layoutActionDispatcher,\n    pathToDropTarget,\n  );\n\n  useEffect(() => {\n    if (workspaceJSON) {\n      if (Array.isArray(workspaceJSON)) {\n        const targetContainer = findTarget(\n          state.current,\n          isMultiWorkspaceContainer,\n        ) as ReactElement;\n        if (targetContainer) {\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          const { path: targetContainerPath } = targetContainer.props as any;\n          const target = getChildProp(targetContainer);\n          const newLayouts = workspaceJSON.map((ws, i) =>\n            layoutFromJson(ws, `${targetContainerPath}.${i}`),\n          );\n          const action = target\n            ? {\n                type: LayoutActionType.REPLACE,\n                target,\n                replacement: newLayouts,\n              }\n            : {\n                type: LayoutActionType.ADD,\n                path: targetContainerPath,\n                component: newLayouts,\n              };\n          dispatchLayoutAction(action, true);\n        }\n      } else {\n        const targetContainer = findTarget(\n          state.current,\n          isWorkspaceContainer,\n        ) as ReactElement;\n        if (targetContainer) {\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          const { path: targetContainerPath } = targetContainer.props as any;\n          const target = getChildProp(targetContainer);\n          const newLayout = layoutFromJson(\n            workspaceJSON,\n            `${targetContainerPath}.0`,\n          );\n          const action = target\n            ? {\n                type: LayoutActionType.REPLACE,\n                target,\n                replacement: newLayout,\n              }\n            : {\n                type: LayoutActionType.ADD,\n                path: targetContainerPath,\n                component: newLayout,\n              };\n          dispatchLayoutAction(action, true);\n        } else if (workspaceJSON.id === getProp(state.current, \"id\")) {\n          const newLayout = layoutFromJson(workspaceJSON, \"0\");\n          const action = {\n            type: LayoutActionType.REPLACE,\n            target: state.current,\n            replacement: newLayout,\n          };\n          dispatchLayoutAction(action, true);\n        } else {\n          throw Error(\n            `LayoutProvider unable to render new workspaceJson, no valid target container. Use a valid Shell Layout Template or include a container with the standard workspace id '${VuuShellLocation.Workspace}' `,\n          );\n        }\n      }\n    }\n  }, [dispatchLayoutAction, workspaceJSON]);\n\n  if (state.current === undefined) {\n    state.current = cloneElementAddLayoutProps(children);\n  } else if (children !== childrenRef.current) {\n    state.current = cloneElementAddLayoutProps(children, state.current);\n    childrenRef.current = children;\n  }\n\n  return (\n    <LayoutProviderContext.Provider\n      value={{\n        addComponentToWorkspace,\n        createNewChild,\n        dispatchLayoutProvider: layoutActionDispatcher,\n        showComponentInContextPanel,\n        switchWorkspace,\n        version: 0,\n      }}\n    >\n      {state.current}\n    </LayoutProviderContext.Provider>\n  );\n};\n\nexport const useLayoutProviderDispatch = () => {\n  const { dispatchLayoutProvider } = useContext(LayoutProviderContext);\n  return dispatchLayoutProvider;\n};\n\nexport const useLayoutOperation = () => {\n  const {\n    addComponentToWorkspace,\n    showComponentInContextPanel,\n    switchWorkspace,\n  } = useContext(LayoutProviderContext);\n  return {\n    addComponentToWorkspace,\n    showComponentInContextPanel,\n    switchWorkspace,\n  };\n};\n\nexport const useLayoutCreateNewChild = () => {\n  const layoutPlaceholderJSON = usePlaceholderJSON();\n  const { createNewChild } = useContext(LayoutProviderContext);\n\n  const defaultCreateNewChild = useMemo(\n    () =>\n      function createNewChild() {\n        if (layoutPlaceholderJSON) {\n          const { props } = layoutPlaceholderJSON;\n          return layoutFromJson(\n            {\n              ...layoutPlaceholderJSON,\n              props: {\n                ...props,\n                resizeable: true,\n                style: {\n                  ...props?.style,\n                  flexGrow: 1,\n                  flexShrink: 0,\n                  flexBasis: 0,\n                },\n              },\n            },\n            \"0\",\n          );\n        }\n        return layoutFromJson(\n          {\n            type: \"Placeholder\",\n            props: {\n              resizeable: true,\n              style: {\n                flexGrow: 1,\n                flexShrink: 0,\n                flexBasis: 0,\n              },\n            },\n          },\n          \"0\",\n        );\n      },\n    [layoutPlaceholderJSON],\n  );\n\n  return createNewChild ?? defaultCreateNewChild;\n};\n\nexport const useLayoutProviderVersion = () => {\n  const { version } = useContext(LayoutProviderContext);\n  return version;\n};\n"],"names":["VuuShellLocation","jsx","useRef","useState","useCallback","findTarget","typeOf","getProps","layoutToJSON","layoutReducer","layoutQuery","useLayoutDragDrop","useEffect","getChildProp","layoutFromJson","LayoutActionType","getProp","cloneElementAddLayoutProps","LayoutProviderContext","useContext","usePlaceholderJSON","useMemo","createNewChild"],"mappings":"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"}

package/cjs/layout-provider/LayoutProviderContext.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var React = require('react');
+
+const unconfiguredLayoutProviderDispatch = (action) => console.log(
+  `dispatch ${action.type}, have you forgotten to provide a LayoutProvider ?`
+);
+const unconfiguredService = (message) => () => console.log(`${message}, have you forgotten to provide a LayoutProvider ?`);
+const MissingLayoutContextPanel = unconfiguredService(
+  "showComponentInContextPanel"
+);
+const isUnconfiguredProperty = (property) => property === MissingLayoutContextPanel;
+const LayoutProviderContext = React.createContext({
+  addComponentToWorkspace: unconfiguredService("addComponentToWorkspace"),
+  dispatchLayoutProvider: unconfiguredLayoutProviderDispatch,
+  showComponentInContextPanel: MissingLayoutContextPanel,
+  switchWorkspace: unconfiguredService("switchWorkspace"),
+  version: -1
+});
+
+exports.LayoutProviderContext = LayoutProviderContext;
+exports.isUnconfiguredProperty = isUnconfiguredProperty;
+//# sourceMappingURL=LayoutProviderContext.js.map

package/cjs/layout-provider/LayoutProviderContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutProviderContext.js","sources":["../../../../packages/vuu-layout/src/layout-provider/LayoutProviderContext.ts"],"sourcesContent":["import { createContext, Dispatch, ReactElement } from \"react\";\nimport {\n  DragStartAction,\n  LayoutReducerAction,\n  QueryAction,\n} from \"../layout-reducer\";\nimport { LayoutJSON } from \"@vuu-ui/vuu-utils\";\nimport { SaveAction } from \"../layout-view/viewTypes\";\n\nconst unconfiguredLayoutProviderDispatch: LayoutProviderDispatch = (action) =>\n  console.log(\n    `dispatch ${action.type}, have you forgotten to provide a LayoutProvider ?`,\n  );\n\nconst unconfiguredService = (message: string) => () =>\n  console.log(`${message}, have you forgotten to provide a LayoutProvider ?`);\n\nconst MissingLayoutContextPanel = unconfiguredService(\n  \"showComponentInContextPanel\",\n);\n\nexport const isUnconfiguredProperty = (property: unknown): boolean =>\n  property === MissingLayoutContextPanel;\n\nexport type LayoutProviderDispatch = Dispatch<\n  LayoutReducerAction | SaveAction | DragStartAction | QueryAction\n>;\n\nexport interface LayoutProviderContextProps {\n  addComponentToWorkspace: (component: ReactElement) => void;\n  createNewChild?: (index?: number) => ReactElement;\n  dispatchLayoutProvider: LayoutProviderDispatch;\n  showComponentInContextPanel: (\n    component: ReactElement | LayoutJSON,\n    title?: string,\n    onContextPanelClose?: () => void,\n  ) => void;\n  switchWorkspace: (idx: number) => void;\n  version: number;\n}\n\nexport const LayoutProviderContext = createContext<LayoutProviderContextProps>({\n  addComponentToWorkspace: unconfiguredService(\"addComponentToWorkspace\"),\n  dispatchLayoutProvider: unconfiguredLayoutProviderDispatch,\n  showComponentInContextPanel: MissingLayoutContextPanel,\n  switchWorkspace: unconfiguredService(\"switchWorkspace\"),\n  version: -1,\n});\n"],"names":["createContext"],"mappings":";;;;AASA,MAAM,kCAAA,GAA6D,CAAC,MAAA,KAClE,OAAQ,CAAA,GAAA;AAAA,EACN,CAAA,SAAA,EAAY,OAAO,IAAI,CAAA,kDAAA;AACzB,CAAA;AAEF,MAAM,mBAAA,GAAsB,CAAC,OAAoB,KAAA,MAC/C,QAAQ,GAAI,CAAA,CAAA,EAAG,OAAO,CAAoD,kDAAA,CAAA,CAAA;AAE5E,MAAM,yBAA4B,GAAA,mBAAA;AAAA,EAChC;AACF,CAAA;AAEa,MAAA,sBAAA,GAAyB,CAAC,QAAA,KACrC,QAAa,KAAA;AAmBR,MAAM,wBAAwBA,mBAA0C,CAAA;AAAA,EAC7E,uBAAA,EAAyB,oBAAoB,yBAAyB,CAAA;AAAA,EACtE,sBAAwB,EAAA,kCAAA;AAAA,EACxB,2BAA6B,EAAA,yBAAA;AAAA,EAC7B,eAAA,EAAiB,oBAAoB,iBAAiB,CAAA;AAAA,EACtD,OAAS,EAAA,CAAA;AACX,CAAC;;;;;"}

package/cjs/layout-provider/useLayoutDragDrop.js

@@ -0,0 +1,177 @@
+'use strict';
+
+var React = require('react');
+var Draggable = require('../drag-drop/Draggable.js');
+var pathUtils = require('../utils/pathUtils.js');
+require('../drag-drop/BoxModel.js');
+var flexUtils = require('../layout-reducer/flexUtils.js');
+
+const NO_INSTRUCTIONS = {};
+const NO_OFFSETS = [0, 0];
+const getDragElement = (rect, id, dragElement) => {
+  const wrapper = document.createElement("div");
+  wrapper.className = "vuuSimpleDraggableWrapper";
+  wrapper.classList.add(
+    "vuuSimpleDraggableWrapper",
+    "salt-theme",
+    "salt-density-medium"
+  );
+  wrapper.dataset.dragging = "true";
+  const div = dragElement ?? document.createElement("div");
+  div.id = id;
+  wrapper.appendChild(div);
+  document.body.appendChild(wrapper);
+  const cssText = `top:${rect.top}px;left:${rect.left}px;width:${rect.width}px;height:${rect.height}px;`;
+  return [wrapper, cssText, rect.left, rect.top];
+};
+const determineDragOffsets = (draggedElement) => {
+  const { offsetParent } = draggedElement;
+  if (offsetParent === null) {
+    return NO_OFFSETS;
+  } else {
+    const { left: offsetLeft, top: offsetTop } = offsetParent.getBoundingClientRect();
+    return [offsetLeft, offsetTop];
+  }
+};
+const useLayoutDragDrop = (rootLayoutRef, dispatch, pathToDropTarget) => {
+  const dragActionRef = React.useRef(void 0);
+  const dragOperationRef = React.useRef(void 0);
+  const draggableHTMLElementRef = React.useRef(void 0);
+  const handleDrag = React.useCallback((x, y) => {
+    if (dragOperationRef.current && draggableHTMLElementRef.current) {
+      const {
+        dragOffsets: [offsetX, offsetY],
+        targetPosition
+      } = dragOperationRef.current;
+      const left = typeof x === "number" ? x - offsetX : targetPosition.left;
+      const top = typeof y === "number" ? y - offsetY : targetPosition.top;
+      if (left !== targetPosition.left || top !== targetPosition.top) {
+        dragOperationRef.current.targetPosition.left = left;
+        dragOperationRef.current.targetPosition.top = top;
+        draggableHTMLElementRef.current.style.top = top + "px";
+        draggableHTMLElementRef.current.style.left = left + "px";
+      }
+    }
+  }, []);
+  const handleDrop = React.useCallback(
+    (dropTarget) => {
+      if (dragOperationRef.current) {
+        const {
+          dragInstructions,
+          payload: draggedReactElement,
+          originalCSS
+        } = dragOperationRef.current;
+        if (dropTarget) {
+          dispatch({
+            type: "drag-drop",
+            draggedReactElement,
+            dragInstructions,
+            dropTarget
+          });
+        }
+        if (draggableHTMLElementRef.current) {
+          if (!dropTarget && dragInstructions.DriftHomeIfNoDropTarget) {
+            console.log("drift back to start");
+            document.body.removeChild(draggableHTMLElementRef.current);
+          } else if (dragInstructions.RemoveDraggableOnDragEnd) {
+            document.body.removeChild(draggableHTMLElementRef.current);
+          } else {
+            draggableHTMLElementRef.current.style.cssText = originalCSS;
+            delete draggableHTMLElementRef.current.dataset.dragging;
+          }
+        }
+        dragActionRef.current = void 0;
+        dragOperationRef.current = void 0;
+        draggableHTMLElementRef.current = void 0;
+      }
+    },
+    [dispatch]
+  );
+  const handleDragStart = React.useCallback(
+    (evt) => {
+      if (dragActionRef.current) {
+        const {
+          payload: component,
+          dragContainerPath,
+          dragElement,
+          dragRect,
+          instructions = NO_INSTRUCTIONS,
+          path
+        } = dragActionRef.current;
+        const { current: rootLayout } = rootLayoutRef;
+        const dragPos = { x: evt.clientX, y: evt.clientY };
+        const dragPayload = component ?? pathUtils.followPath(rootLayout, path, true);
+        const { id: dragPayloadId } = dragPayload.props;
+        const intrinsicSize = flexUtils.getIntrinsicSize(dragPayload);
+        let originalCSS = "", dragCSS = "", dragTransform = "";
+        let dragStartLeft = -1;
+        let dragStartTop = -1;
+        let dragOffsets = NO_OFFSETS;
+        let element = document.getElementById(dragPayloadId);
+        if (element === null) {
+          [element, dragCSS, dragStartLeft, dragStartTop] = getDragElement(
+            dragRect,
+            dragPayloadId,
+            dragElement
+          );
+        } else {
+          dragOffsets = determineDragOffsets(element);
+          const [offsetLeft, offsetTop] = dragOffsets;
+          const { width, height, left, top } = element.getBoundingClientRect();
+          dragStartLeft = left - offsetLeft;
+          dragStartTop = top - offsetTop;
+          dragCSS = `width:${width}px;height:${height}px;left:${dragStartLeft}px;top:${dragStartTop}px;z-index: 100;background-color:#ccc;opacity: 0.6;`;
+          element.dataset.dragging = "true";
+          originalCSS = element.style.cssText;
+        }
+        dragTransform = Draggable.Draggable.initDrag(
+          rootLayoutRef.current,
+          dragContainerPath,
+          dragRect,
+          dragPos,
+          {
+            drag: handleDrag,
+            drop: handleDrop
+          },
+          intrinsicSize
+          // dropTargets
+        );
+        element.style.cssText = dragCSS + dragTransform;
+        draggableHTMLElementRef.current = element;
+        dragOperationRef.current = {
+          payload: dragPayload,
+          originalCSS,
+          dragRect,
+          dragOffsets,
+          dragInstructions: instructions,
+          targetPosition: { left: dragStartLeft, top: dragStartTop }
+        };
+      }
+    },
+    [handleDrag, handleDrop, rootLayoutRef]
+  );
+  const prepareToDrag = React.useCallback(
+    (action) => {
+      const { evt, ...options } = action;
+      try {
+        dragActionRef.current = {
+          ...options,
+          dragContainerPath: pathUtils.resolvePath(
+            rootLayoutRef.current,
+            pathToDropTarget
+          )
+        };
+        Draggable.Draggable.handleMousedown(evt, handleDragStart, options.instructions);
+      } catch (err) {
+        console.warn(
+          `[useLayoutDragDrop] path ${pathToDropTarget} not resolved, the application layout does not have the required elements to support drag drop`
+        );
+      }
+    },
+    [handleDragStart, pathToDropTarget, rootLayoutRef]
+  );
+  return prepareToDrag;
+};
+
+exports.useLayoutDragDrop = useLayoutDragDrop;
+//# sourceMappingURL=useLayoutDragDrop.js.map

package/cjs/layout-provider/useLayoutDragDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLayoutDragDrop.js","sources":["../../../../packages/vuu-layout/src/layout-provider/useLayoutDragDrop.ts"],"sourcesContent":["import { MutableRefObject, ReactElement, useCallback, useRef } from \"react\";\nimport {\n  DragDropRect,\n  DragEndCallback,\n  Draggable,\n  DragInstructions,\n  DragMoveCallback,\n} from \"../drag-drop\";\nimport { DragStartAction } from \"../layout-reducer\";\nimport { getIntrinsicSize } from \"../layout-reducer/flexUtils\";\nimport { followPath, resolvePath } from \"../utils\";\nimport { LayoutProviderDispatch } from \"./LayoutProviderContext\";\n\nconst NO_INSTRUCTIONS = {} as DragInstructions;\nconst NO_OFFSETS: [number, number] = [0, 0];\n\ninterface CurrentDragAction extends Omit<DragStartAction, \"evt\" | \"type\"> {\n  dragContainerPath: string;\n}\n\ninterface DragOperation {\n  payload: ReactElement;\n  originalCSS: string;\n  dragRect: unknown;\n  dragInstructions: DragInstructions;\n  dragOffsets: [number, number];\n  targetPosition: { left: number; top: number };\n}\n\nconst getDragElement = (\n  rect: DragDropRect,\n  id: string,\n  dragElement?: HTMLElement,\n): [HTMLElement, string, number, number] => {\n  const wrapper = document.createElement(\"div\");\n  wrapper.className = \"vuuSimpleDraggableWrapper\";\n  wrapper.classList.add(\n    \"vuuSimpleDraggableWrapper\",\n    \"salt-theme\",\n    \"salt-density-medium\",\n  );\n  wrapper.dataset.dragging = \"true\";\n\n  const div = dragElement ?? document.createElement(\"div\");\n  div.id = id;\n\n  wrapper.appendChild(div);\n  document.body.appendChild(wrapper);\n  const cssText = `top:${rect.top}px;left:${rect.left}px;width:${rect.width}px;height:${rect.height}px;`;\n  return [wrapper, cssText, rect.left, rect.top];\n};\n\nconst determineDragOffsets = (\n  draggedElement: HTMLElement,\n): [number, number] => {\n  const { offsetParent } = draggedElement;\n  if (offsetParent === null) {\n    return NO_OFFSETS;\n  } else {\n    const { left: offsetLeft, top: offsetTop } =\n      offsetParent.getBoundingClientRect();\n    return [offsetLeft, offsetTop];\n  }\n};\n\nexport const useLayoutDragDrop = (\n  rootLayoutRef: MutableRefObject<ReactElement>,\n  dispatch: LayoutProviderDispatch,\n  pathToDropTarget?: string,\n) => {\n  const dragActionRef = useRef<CurrentDragAction>(undefined);\n  const dragOperationRef = useRef<DragOperation>(undefined);\n  const draggableHTMLElementRef = useRef<HTMLElement>(undefined);\n\n  const handleDrag = useCallback<DragMoveCallback>((x, y) => {\n    if (dragOperationRef.current && draggableHTMLElementRef.current) {\n      const {\n        dragOffsets: [offsetX, offsetY],\n        targetPosition,\n      } = dragOperationRef.current;\n      const left = typeof x === \"number\" ? x - offsetX : targetPosition.left;\n      const top = typeof y === \"number\" ? y - offsetY : targetPosition.top;\n      if (left !== targetPosition.left || top !== targetPosition.top) {\n        dragOperationRef.current.targetPosition.left = left;\n        dragOperationRef.current.targetPosition.top = top;\n        draggableHTMLElementRef.current.style.top = top + \"px\";\n        draggableHTMLElementRef.current.style.left = left + \"px\";\n      }\n    }\n  }, []);\n\n  const handleDrop: DragEndCallback = useCallback(\n    (dropTarget) => {\n      if (dragOperationRef.current) {\n        const {\n          dragInstructions,\n          payload: draggedReactElement,\n          originalCSS,\n        } = dragOperationRef.current;\n\n        if (dropTarget) {\n          dispatch({\n            type: \"drag-drop\",\n            draggedReactElement,\n            dragInstructions,\n            dropTarget,\n          });\n        }\n\n        if (draggableHTMLElementRef.current) {\n          if (!dropTarget && dragInstructions.DriftHomeIfNoDropTarget) {\n            console.log(\"drift back to start\");\n            document.body.removeChild(draggableHTMLElementRef.current);\n          } else if (dragInstructions.RemoveDraggableOnDragEnd) {\n            document.body.removeChild(draggableHTMLElementRef.current);\n          } else {\n            draggableHTMLElementRef.current.style.cssText = originalCSS;\n            delete draggableHTMLElementRef.current.dataset.dragging;\n          }\n        }\n\n        dragActionRef.current = undefined;\n        dragOperationRef.current = undefined;\n        draggableHTMLElementRef.current = undefined;\n      }\n    },\n    [dispatch],\n  );\n\n  const handleDragStart = useCallback(\n    (evt: MouseEvent) => {\n      if (dragActionRef.current) {\n        const {\n          payload: component,\n          dragContainerPath,\n          dragElement,\n          dragRect,\n          instructions = NO_INSTRUCTIONS,\n          path,\n        } = dragActionRef.current;\n        const { current: rootLayout } = rootLayoutRef;\n        const dragPos = { x: evt.clientX, y: evt.clientY };\n        const dragPayload = component ?? followPath(rootLayout, path, true);\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        const { id: dragPayloadId } = dragPayload.props as any;\n        const intrinsicSize = getIntrinsicSize(dragPayload);\n        let originalCSS = \"\",\n          dragCSS = \"\",\n          dragTransform = \"\";\n\n        let dragStartLeft = -1;\n        let dragStartTop = -1;\n        let dragOffsets: [number, number] = NO_OFFSETS;\n\n        let element = document.getElementById(dragPayloadId);\n\n        if (element === null) {\n          [element, dragCSS, dragStartLeft, dragStartTop] = getDragElement(\n            dragRect,\n            dragPayloadId,\n            dragElement,\n          );\n        } else {\n          dragOffsets = determineDragOffsets(element);\n          const [offsetLeft, offsetTop] = dragOffsets;\n          const { width, height, left, top } = element.getBoundingClientRect();\n          dragStartLeft = left - offsetLeft;\n          dragStartTop = top - offsetTop;\n          dragCSS = `width:${width}px;height:${height}px;left:${dragStartLeft}px;top:${dragStartTop}px;z-index: 100;background-color:#ccc;opacity: 0.6;`;\n          element.dataset.dragging = \"true\";\n          originalCSS = element.style.cssText;\n        }\n\n        dragTransform = Draggable.initDrag(\n          rootLayoutRef.current,\n          dragContainerPath,\n          dragRect,\n          dragPos,\n          {\n            drag: handleDrag,\n            drop: handleDrop,\n          },\n          intrinsicSize,\n          // dropTargets\n        );\n\n        element.style.cssText = dragCSS + dragTransform;\n        draggableHTMLElementRef.current = element;\n\n        dragOperationRef.current = {\n          payload: dragPayload,\n          originalCSS,\n          dragRect,\n          dragOffsets,\n          dragInstructions: instructions,\n          targetPosition: { left: dragStartLeft, top: dragStartTop },\n        };\n      }\n    },\n    [handleDrag, handleDrop, rootLayoutRef],\n  );\n\n  const prepareToDrag = useCallback(\n    (action: DragStartAction) => {\n      const { evt, ...options } = action;\n      try {\n        dragActionRef.current = {\n          ...options,\n          dragContainerPath: resolvePath(\n            rootLayoutRef.current,\n            pathToDropTarget,\n          ),\n        };\n        Draggable.handleMousedown(evt, handleDragStart, options.instructions);\n      } catch (err) {\n        console.warn(\n          `[useLayoutDragDrop] path ${pathToDropTarget} not resolved, the application layout does not have the required elements to support drag drop`,\n        );\n      }\n    },\n    [handleDragStart, pathToDropTarget, rootLayoutRef],\n  );\n\n  return prepareToDrag;\n};\n"],"names":["useRef","useCallback","followPath","getIntrinsicSize","Draggable","resolvePath"],"mappings":"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"}