@vuu-ui/vuu-layout 0.13.4 → 0.13.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/layout-provider/LayoutProvider.js +0 -1
- package/cjs/layout-provider/LayoutProvider.js.map +1 -1
- package/esm/layout-provider/LayoutProvider.js +0 -1
- package/esm/layout-provider/LayoutProvider.js.map +1 -1
- package/package.json +14 -12
- package/types/Component.d.ts +6 -0
- package/types/LayoutContainer.d.ts +6 -0
- package/types/debug.d.ts +2 -0
- package/types/dock-layout/DockLayout.d.ts +7 -0
- package/types/dock-layout/Drawer.d.ts +17 -0
- package/types/dock-layout/index.d.ts +2 -0
- package/types/drag-drop/BoxModel.d.ts +143 -0
- package/types/drag-drop/DragState.d.ts +46 -0
- package/types/drag-drop/Draggable.d.ts +24 -0
- package/types/drag-drop/DropTarget.d.ts +60 -0
- package/types/drag-drop/DropTargetRenderer.d.ts +17 -0
- package/types/drag-drop/dragDropTypes.d.ts +51 -0
- package/types/drag-drop/index.d.ts +3 -0
- package/types/flexbox/Flexbox.d.ts +3 -0
- package/types/flexbox/FlexboxLayout.d.ts +5 -0
- package/types/flexbox/Splitter.d.ts +12 -0
- package/types/flexbox/flexbox-utils.d.ts +12 -0
- package/types/flexbox/flexboxTypes.d.ts +52 -0
- package/types/flexbox/index.d.ts +2 -0
- package/types/flexbox/useSplitterResizing.d.ts +2 -0
- package/types/index.d.ts +17 -0
- package/types/layout-action.d.ts +19 -0
- package/types/layout-header/ActionButton.d.ts +8 -0
- package/types/layout-header/Header.d.ts +15 -0
- package/types/layout-header/index.d.ts +1 -0
- package/types/layout-header/useHeader.d.ts +20 -0
- package/types/layout-provider/LayoutProvider.d.ts +20 -0
- package/types/layout-provider/LayoutProviderContext.d.ts +15 -0
- package/types/layout-provider/index.d.ts +2 -0
- package/types/layout-provider/useLayoutDragDrop.d.ts +4 -0
- package/types/layout-reducer/flexUtils.d.ts +22 -0
- package/types/layout-reducer/index.d.ts +4 -0
- package/types/layout-reducer/insert-layout-element.d.ts +8 -0
- package/types/layout-reducer/layout-reducer.d.ts +3 -0
- package/types/layout-reducer/layoutTypes.d.ts +135 -0
- package/types/layout-reducer/layoutUtils.d.ts +44 -0
- package/types/layout-reducer/move-layout-element.d.ts +3 -0
- package/types/layout-reducer/remove-layout-element.d.ts +3 -0
- package/types/layout-reducer/replace-layout-element.d.ts +6 -0
- package/types/layout-reducer/resize-flex-children.d.ts +4 -0
- package/types/layout-reducer/wrap-layout-element.d.ts +9 -0
- package/types/layout-view/View.d.ts +10 -0
- package/types/layout-view/index.d.ts +3 -0
- package/types/layout-view/useView.d.ts +22 -0
- package/types/layout-view/useViewBroadcastChannel.d.ts +7 -0
- package/types/layout-view/useViewResize.d.ts +7 -0
- package/types/layout-view/viewTypes.d.ts +48 -0
- package/types/layout-view-actions/ViewContext.d.ts +37 -0
- package/types/layout-view-actions/index.d.ts +2 -0
- package/types/layout-view-actions/useViewActionDispatcher.d.ts +4 -0
- package/types/palette/Palette.d.ts +24 -0
- package/types/palette/index.d.ts +1 -0
- package/types/placeholder/LayoutStartPanel.d.ts +5 -0
- package/types/placeholder/Placeholder.d.ts +16 -0
- package/types/placeholder/index.d.ts +1 -0
- package/types/responsive/index.d.ts +2 -0
- package/types/responsive/measureMinimumNodeSize.d.ts +1 -0
- package/types/responsive/overflowUtils.d.ts +2 -0
- package/types/responsive/useResizeObserver.d.ts +13 -0
- package/types/responsive/utils.d.ts +6 -0
- package/types/stack/Stack.d.ts +3 -0
- package/types/stack/StackLayout.d.ts +5 -0
- package/types/stack/index.d.ts +3 -0
- package/types/stack/stackTypes.d.ts +24 -0
- package/types/tabs/TabPanel.d.ts +7 -0
- package/types/tabs/index.d.ts +1 -0
- package/types/tools/config-wrapper/ConfigWrapper.d.ts +1 -0
- package/types/tools/config-wrapper/index.d.ts +1 -0
- package/types/tools/devtools-box/layout-configurator.d.ts +31 -0
- package/types/tools/devtools-tree/layout-tree-viewer.d.ts +5 -0
- package/types/tools/index.d.ts +3 -0
- package/types/use-persistent-state.d.ts +11 -0
- package/types/utils/index.d.ts +5 -0
- package/types/utils/pathUtils.d.ts +31 -0
- package/types/utils/propUtils.d.ts +5 -0
- package/types/utils/refUtils.d.ts +2 -0
- package/types/utils/styleUtils.d.ts +3 -0
- package/types/utils/typeOf.d.ts +5 -0
|
@@ -214,7 +214,6 @@ const LayoutProvider = (props) => {
|
|
|
214
214
|
}, [dispatchLayoutAction, workspaceJSON]);
|
|
215
215
|
if (state.current === void 0) {
|
|
216
216
|
state.current = layoutUtils.cloneElementAddLayoutProps(children);
|
|
217
|
-
console.log({ state: state.current });
|
|
218
217
|
} else if (children !== childrenRef.current) {
|
|
219
218
|
state.current = layoutUtils.cloneElementAddLayoutProps(children, state.current);
|
|
220
219
|
childrenRef.current = children;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LayoutProvider.js","sources":["../../src/layout-provider/LayoutProvider.tsx"],"sourcesContent":["import {\n VuuShellLocation,\n logger,\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 type { SaveAction } from \"../layout-view\";\nimport { findTarget, getChildProp, getProp, getProps, typeOf } from \"../utils\";\nimport {\n LayoutProviderContext,\n LayoutProviderDispatch,\n} from \"./LayoutProviderContext\";\nimport { useLayoutDragDrop } from \"./useLayoutDragDrop\";\n\nconst { info } = logger(\"LayoutProvider\");\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 info?.(\"workspaceJSON changed. inject new layout into application\");\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 console.log({ state: state.current });\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":["logger","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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"}
|
|
1
|
+
{"version":3,"file":"LayoutProvider.js","sources":["../../src/layout-provider/LayoutProvider.tsx"],"sourcesContent":["import {\n VuuShellLocation,\n logger,\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 type { SaveAction } from \"../layout-view\";\nimport { findTarget, getChildProp, getProp, getProps, typeOf } from \"../utils\";\nimport {\n LayoutProviderContext,\n LayoutProviderDispatch,\n} from \"./LayoutProviderContext\";\nimport { useLayoutDragDrop } from \"./useLayoutDragDrop\";\n\nconst { info } = logger(\"LayoutProvider\");\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 info?.(\"workspaceJSON changed. inject new layout into application\");\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":["logger","VuuShellLocation","jsx","useRef","useState","useCallback","findTarget","typeOf","getProps","layoutToJSON","layoutReducer","layoutQuery","useLayoutDragDrop","useEffect","getChildProp","layoutFromJson","LayoutActionType","getProp","cloneElementAddLayoutProps","LayoutProviderContext","useContext","usePlaceholderJSON","useMemo","createNewChild"],"mappings":";;;;;;;;;;;;;;AAoCA,MAAM,EAAE,IAAA,EAAS,GAAAA,eAAA,CAAO,gBAAgB,CAAA;AAExC,MAAM,oBAAuB,GAAA,CAAC,KAC5B,KAAA,KAAA,CAAM,OAAOC,yBAAiB,CAAA,kBAAA;AAEhC,MAAM,yBAA4B,GAAA,CAAC,KACjC,KAAA,KAAA,CAAM,OAAOA,yBAAiB,CAAA,uBAAA;AAEhC,MAAM,UAAA,GAAa,CAAC,MAClB,KAAA;AAAA,EACE,KAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,iBAAA;AAAA,EACA;AACF,CAAE,CAAA,QAAA,CAAS,OAAO,IAAI,CAAA;AAExB,MAAM,qBAAA,GAAwB,CAC5B,MACuB,KAAA;AACvB,EAAA,QAAQ,OAAO,IAAM;AAAA,IACnB,KAAK,YAAA;AACH,MAAI,IAAA,MAAA,CAAO,EAAO,KAAAA,yBAAA,CAAiB,SAAW,EAAA;AAC5C,QAAO,OAAA,sBAAA;AAAA,OACF,MAAA;AACL,QAAO,OAAA,mBAAA;AAAA;AACT,IACF,KAAK,MAAA;AACH,MAAO,OAAA,oBAAA;AAAA,IACT,KAAK,WAAA;AACH,MAAO,OAAA,qBAAA;AAAA,IACT,KAAK,KAAA;AACH,MAAO,OAAA,eAAA;AAAA,IACT,KAAK,QAAA;AACH,MAAO,OAAA,kBAAA;AAAA,IACT,KAAK,iBAAA;AACH,MAAO,OAAA,kBAAA;AAAA,IACT,KAAK,WAAA;AACH,MAAO,OAAA,oBAAA;AAAA,IACT;AACE,MAAA,MAAM,MAAM,uBAAuB,CAAA;AAAA;AAEzC,CAAA;AASO,MAAM,wBAAwB,MAAM;AACzC,EAAA,MAAM,UAAU,wBAAyB,EAAA;AACzC,EAAA,uBAAQC,cAAA,CAAA,KAAA,EAAA,EAAK,QAAY,EAAA,CAAA,SAAA,EAAA,OAAO,CAAI,CAAA,CAAA,EAAA,CAAA;AACtC;AAEA,MAAM,gBAAA,GAAmB,CAAI,CAAA,EAAAD,yBAAA,CAAiB,SAAS,CAAA,aAAA,CAAA;AAE1C,MAAA,cAAA,GAAiB,CAAC,KAA6C,KAAA;AAC1E,EAAA,MAAM,EAAE,QAAA,EAAU,cAAgB,EAAA,aAAA,EAAe,gBAAmB,GAAA,KAAA;AACpE,EAAM,MAAA,KAAA,GAAQE,aAAiC,KAAS,CAAA,CAAA;AACxD,EAAM,MAAA,WAAA,GAAcA,aAAqB,QAAQ,CAAA;AAEjD,EAAA,MAAM,GAAG,YAAY,CAAA,GAAIC,eAAkB,IAAI,CAAA;AAE/C,EAAA,MAAM,cAAiB,GAAAC,iBAAA;AAAA,IACrB,CAAC,QAAsB,kBAA2C,KAAA;AAChE,MAAA,IAAI,cAAgB,EAAA;AAClB,QAAA,MAAM,kBACJ,GAAAC,oBAAA,CAAW,MAAQ,EAAA,oBAAoB,KAAK,KAAM,CAAA,OAAA;AACpD,QAAM,MAAA,iBAAA,GACJC,aAAO,CAAA,kBAAkB,CAAM,KAAA,iBAAA;AACjC,QAAA,MAAM,SAAS,iBACX,GAAAC,kBAAA,CAAS,kBAAkB,CAAE,CAAA,QAAA,CAAS,CAAC,CACvC,GAAA,kBAAA;AACJ,QAAM,MAAA,eAAA,GAAkBC,yBAAa,MAAM,CAAA;AAC3C,QAAA,cAAA,CAAe,iBAAiB,kBAAkB,CAAA;AAAA;AACpD,KACF;AAAA,IACA,CAAC,cAAc;AAAA,GACjB;AAEA,EAAA,MAAM,oBAAuB,GAAAJ,iBAAA;AAAA,IAC3B,CAAC,MAA6B,EAAA,YAAA,GAAe,KAAU,KAAA;AACrD,MAAA,MAAM,SAAY,GAAAK,2BAAA,CAAc,KAAM,CAAA,OAAA,EAAyB,MAAM,CAAA;AACrE,MAAI,IAAA,SAAA,KAAc,MAAM,OAAS,EAAA;AAC/B,QAAA,KAAA,CAAM,OAAU,GAAA,SAAA;AAChB,QAAA,YAAA,CAAa,EAAE,CAAA;AACf,QAAA,IAAI,CAAC,YAAA,IAAgB,UAAW,CAAA,MAAM,CAAG,EAAA;AACvC,UAAe,cAAA,CAAA,SAAA,EAAW,qBAAsB,CAAA,MAAM,CAAC,CAAA;AAAA;AACzD;AACF,KACF;AAAA,IACA,CAAC,cAAc,cAAc;AAAA,GAC/B;AAEA,EAAA,MAAM,uBAA0B,GAAAL,iBAAA;AAAA,IAC9B,CAAC,SAA4B,KAAA;AAC3B,MAAqB,oBAAA,CAAA;AAAA,QACnB,IAAM,EAAA,KAAA;AAAA,QACN,IAAA,EAAM,CAAI,CAAA,EAAAJ,yBAAA,CAAiB,SAAS,CAAA,CAAA;AAAA,QACpC;AAAA,OACD,CAAA;AAAA,KACH;AAAA,IACA,CAAC,oBAAoB;AAAA,GACvB;AAEA,EAAA,MAAM,eAAkB,GAAAI,iBAAA;AAAA,IACtB,CAAC,GAAgB,KAAA;AACf,MAAqB,oBAAA,CAAA;AAAA,QACnB,IAAM,EAAA,YAAA;AAAA,QACN,OAAS,EAAA,GAAA;AAAA,QACT,IAAA,EAAM,CAAI,CAAA,EAAAJ,yBAAA,CAAiB,uBAAuB,CAAA;AAAA,OACnD,CAAA;AAAA,KACH;AAAA,IACA,CAAC,oBAAoB;AAAA,GACvB;AAEA,EAAA,MAAM,2BAA8B,GAAAI,iBAAA;AAAA,IAClC,CACE,SACA,EAAA,KAAA,EACA,mBACG,KAAA;AACH,MAAqB,oBAAA,CAAA;AAAA,QACnB,IAAM,EAAA,WAAA;AAAA,QACN,IAAA,EAAM,CAAI,CAAA,EAAAJ,yBAAA,CAAiB,YAAY,CAAA,CAAA;AAAA,QACvC,KAAO,EAAA;AAAA,UACL,QAAU,EAAA,IAAA;AAAA,UACV,OAAS,EAAA,SAAA;AAAA,UACT,OAAS,EAAA,mBAAA;AAAA,UACT;AAAA;AACF,OACD,CAAA;AAAA,KACH;AAAA,IACA,CAAC,oBAAoB;AAAA,GACvB;AAEA,EAAA,MAAM,sBAAyB,GAAAI,iBAAA;AAAA,IAC7B,CAAC,MAAW,KAAA;AACV,MAAA,QAAQ,OAAO,IAAM;AAAA,QACnB,KAAK,YAAc,EAAA;AACjB,UAAA,mBAAA,CAAoB,MAAM,CAAA;AAC1B,UAAA;AAAA;AACF,QACA,KAAK,MAAQ,EAAA;AACX,UAAA,IAAI,MAAM,OAAS,EAAA;AACjB,YAAA,cAAA,CAAe,KAAM,CAAA,OAAA,EAAS,qBAAsB,CAAA,MAAM,CAAC,CAAA;AAAA;AAE7D,UAAA;AAAA;AACF,QACA,KAAK,OAAA;AACH,UAAI,IAAA,MAAA,CAAO,UAAU,kBAAoB,EAAA;AACvC,YAAA,OAAOM,wBAAY,MAAO,CAAA,KAAA,EAAO,MAAO,CAAA,IAAA,EAAM,MAAM,OAAO,CAAA;AAAA;AAE7D,UAAA;AAAA,QAEF,SAAS;AACP,UAAA,oBAAA,CAAqB,MAAM,CAAA;AAC3B,UAAA;AAAA;AACF;AACF,KACF;AAAA;AAAA,IAEA,CAAC,sBAAsB,cAAc;AAAA,GACvC;AAEA,EAAA,MAAM,mBAAsB,GAAAC,mCAAA;AAAA,IAC1B,KAAA;AAAA,IACA,sBAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,aAAe,EAAA;AACjB,MAAA,IAAA,GAAO,2DAA2D,CAAA;AAClE,MAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,aAAa,CAAG,EAAA;AAChC,QAAA,MAAM,eAAkB,GAAAP,oBAAA;AAAA,UACtB,KAAM,CAAA,OAAA;AAAA,UACN;AAAA,SACF;AACA,QAAA,IAAI,eAAiB,EAAA;AAEnB,UAAA,MAAM,EAAE,IAAA,EAAM,mBAAoB,EAAA,GAAI,eAAgB,CAAA,KAAA;AACtD,UAAM,MAAA,MAAA,GAASQ,uBAAa,eAAe,CAAA;AAC3C,UAAA,MAAM,aAAa,aAAc,CAAA,GAAA;AAAA,YAAI,CAAC,IAAI,CACxC,KAAAC,0BAAA,CAAe,IAAI,CAAG,EAAA,mBAAmB,CAAI,CAAA,EAAA,CAAC,CAAE,CAAA;AAAA,WAClD;AACA,UAAA,MAAM,SAAS,MACX,GAAA;AAAA,YACE,MAAMC,4BAAiB,CAAA,OAAA;AAAA,YACvB,MAAA;AAAA,YACA,WAAa,EAAA;AAAA,WAEf,GAAA;AAAA,YACE,MAAMA,4BAAiB,CAAA,GAAA;AAAA,YACvB,IAAM,EAAA,mBAAA;AAAA,YACN,SAAW,EAAA;AAAA,WACb;AACJ,UAAA,oBAAA,CAAqB,QAAQ,IAAI,CAAA;AAAA;AACnC,OACK,MAAA;AACL,QAAA,MAAM,eAAkB,GAAAV,oBAAA;AAAA,UACtB,KAAM,CAAA,OAAA;AAAA,UACN;AAAA,SACF;AACA,QAAA,IAAI,eAAiB,EAAA;AAEnB,UAAA,MAAM,EAAE,IAAA,EAAM,mBAAoB,EAAA,GAAI,eAAgB,CAAA,KAAA;AACtD,UAAM,MAAA,MAAA,GAASQ,uBAAa,eAAe,CAAA;AAC3C,UAAA,MAAM,SAAY,GAAAC,0BAAA;AAAA,YAChB,aAAA;AAAA,YACA,GAAG,mBAAmB,CAAA,EAAA;AAAA,WACxB;AACA,UAAA,MAAM,SAAS,MACX,GAAA;AAAA,YACE,MAAMC,4BAAiB,CAAA,OAAA;AAAA,YACvB,MAAA;AAAA,YACA,WAAa,EAAA;AAAA,WAEf,GAAA;AAAA,YACE,MAAMA,4BAAiB,CAAA,GAAA;AAAA,YACvB,IAAM,EAAA,mBAAA;AAAA,YACN,SAAW,EAAA;AAAA,WACb;AACJ,UAAA,oBAAA,CAAqB,QAAQ,IAAI,CAAA;AAAA,mBACxB,aAAc,CAAA,EAAA,KAAOC,kBAAQ,KAAM,CAAA,OAAA,EAAS,IAAI,CAAG,EAAA;AAC5D,UAAM,MAAA,SAAA,GAAYF,0BAAe,CAAA,aAAA,EAAe,GAAG,CAAA;AACnD,UAAA,MAAM,MAAS,GAAA;AAAA,YACb,MAAMC,4BAAiB,CAAA,OAAA;AAAA,YACvB,QAAQ,KAAM,CAAA,OAAA;AAAA,YACd,WAAa,EAAA;AAAA,WACf;AACA,UAAA,oBAAA,CAAqB,QAAQ,IAAI,CAAA;AAAA,SAC5B,MAAA;AACL,UAAM,MAAA,KAAA;AAAA,YACJ,CAAA,uKAAA,EAA0Kf,0BAAiB,SAAS,CAAA,EAAA;AAAA,WACtM;AAAA;AACF;AACF;AACF,GACC,EAAA,CAAC,oBAAsB,EAAA,aAAa,CAAC,CAAA;AAExC,EAAI,IAAA,KAAA,CAAM,YAAY,KAAW,CAAA,EAAA;AAC/B,IAAM,KAAA,CAAA,OAAA,GAAUiB,uCAA2B,QAAQ,CAAA;AAAA,GACrD,MAAA,IAAW,QAAa,KAAA,WAAA,CAAY,OAAS,EAAA;AAC3C,IAAA,KAAA,CAAM,OAAU,GAAAA,sCAAA,CAA2B,QAAU,EAAA,KAAA,CAAM,OAAO,CAAA;AAClE,IAAA,WAAA,CAAY,OAAU,GAAA,QAAA;AAAA;AAGxB,EACE,uBAAAhB,cAAA;AAAA,IAACiB,2CAAsB,CAAA,QAAA;AAAA,IAAtB;AAAA,MACC,KAAO,EAAA;AAAA,QACL,uBAAA;AAAA,QACA,cAAA;AAAA,QACA,sBAAwB,EAAA,sBAAA;AAAA,QACxB,2BAAA;AAAA,QACA,eAAA;AAAA,QACA,OAAS,EAAA;AAAA,OACX;AAAA,MAEC,QAAM,EAAA,KAAA,CAAA;AAAA;AAAA,GACT;AAEJ;AAEO,MAAM,4BAA4B,MAAM;AAC7C,EAAA,MAAM,EAAE,sBAAA,EAA2B,GAAAC,gBAAA,CAAWD,2CAAqB,CAAA;AACnE,EAAO,OAAA,sBAAA;AACT;AAEO,MAAM,qBAAqB,MAAM;AACtC,EAAM,MAAA;AAAA,IACJ,uBAAA;AAAA,IACA,2BAAA;AAAA,IACA;AAAA,GACF,GAAIC,iBAAWD,2CAAqB,CAAA;AACpC,EAAO,OAAA;AAAA,IACL,uBAAA;AAAA,IACA,2BAAA;AAAA,IACA;AAAA,GACF;AACF;AAEO,MAAM,0BAA0B,MAAM;AAC3C,EAAA,MAAM,wBAAwBE,2BAAmB,EAAA;AACjD,EAAA,MAAM,EAAE,cAAA,EAAmB,GAAAD,gBAAA,CAAWD,2CAAqB,CAAA;AAE3D,EAAA,MAAM,qBAAwB,GAAAG,aAAA;AAAA,IAC5B,MACE,SAASC,eAAiB,GAAA;AACxB,MAAA,IAAI,qBAAuB,EAAA;AACzB,QAAM,MAAA,EAAE,OAAU,GAAA,qBAAA;AAClB,QAAO,OAAAR,0BAAA;AAAA,UACL;AAAA,YACE,GAAG,qBAAA;AAAA,YACH,KAAO,EAAA;AAAA,cACL,GAAG,KAAA;AAAA,cACH,UAAY,EAAA,IAAA;AAAA,cACZ,KAAO,EAAA;AAAA,gBACL,GAAG,KAAO,EAAA,KAAA;AAAA,gBACV,QAAU,EAAA,CAAA;AAAA,gBACV,UAAY,EAAA,CAAA;AAAA,gBACZ,SAAW,EAAA;AAAA;AACb;AACF,WACF;AAAA,UACA;AAAA,SACF;AAAA;AAEF,MAAO,OAAAA,0BAAA;AAAA,QACL;AAAA,UACE,IAAM,EAAA,aAAA;AAAA,UACN,KAAO,EAAA;AAAA,YACL,UAAY,EAAA,IAAA;AAAA,YACZ,KAAO,EAAA;AAAA,cACL,QAAU,EAAA,CAAA;AAAA,cACV,UAAY,EAAA,CAAA;AAAA,cACZ,SAAW,EAAA;AAAA;AACb;AACF,SACF;AAAA,QACA;AAAA,OACF;AAAA,KACF;AAAA,IACF,CAAC,qBAAqB;AAAA,GACxB;AAEA,EAAA,OAAO,cAAkB,IAAA,qBAAA;AAC3B;AAEO,MAAM,2BAA2B,MAAM;AAC5C,EAAA,MAAM,EAAE,OAAA,EAAY,GAAAK,gBAAA,CAAWD,2CAAqB,CAAA;AACpD,EAAO,OAAA,OAAA;AACT;;;;;;;;;"}
|
|
@@ -212,7 +212,6 @@ const LayoutProvider = (props) => {
|
|
|
212
212
|
}, [dispatchLayoutAction, workspaceJSON]);
|
|
213
213
|
if (state.current === void 0) {
|
|
214
214
|
state.current = cloneElementAddLayoutProps(children);
|
|
215
|
-
console.log({ state: state.current });
|
|
216
215
|
} else if (children !== childrenRef.current) {
|
|
217
216
|
state.current = cloneElementAddLayoutProps(children, state.current);
|
|
218
217
|
childrenRef.current = children;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LayoutProvider.js","sources":["../../src/layout-provider/LayoutProvider.tsx"],"sourcesContent":["import {\n VuuShellLocation,\n logger,\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 type { SaveAction } from \"../layout-view\";\nimport { findTarget, getChildProp, getProp, getProps, typeOf } from \"../utils\";\nimport {\n LayoutProviderContext,\n LayoutProviderDispatch,\n} from \"./LayoutProviderContext\";\nimport { useLayoutDragDrop } from \"./useLayoutDragDrop\";\n\nconst { info } = logger(\"LayoutProvider\");\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 info?.(\"workspaceJSON changed. inject new layout into application\");\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 console.log({ state: state.current });\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":["createNewChild"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"LayoutProvider.js","sources":["../../src/layout-provider/LayoutProvider.tsx"],"sourcesContent":["import {\n VuuShellLocation,\n logger,\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 type { SaveAction } from \"../layout-view\";\nimport { findTarget, getChildProp, getProp, getProps, typeOf } from \"../utils\";\nimport {\n LayoutProviderContext,\n LayoutProviderDispatch,\n} from \"./LayoutProviderContext\";\nimport { useLayoutDragDrop } from \"./useLayoutDragDrop\";\n\nconst { info } = logger(\"LayoutProvider\");\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 info?.(\"workspaceJSON changed. inject new layout into application\");\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":["createNewChild"],"mappings":";;;;;;;;;;;;AAoCA,MAAM,EAAE,IAAA,EAAS,GAAA,MAAA,CAAO,gBAAgB,CAAA;AAExC,MAAM,oBAAuB,GAAA,CAAC,KAC5B,KAAA,KAAA,CAAM,OAAO,gBAAiB,CAAA,kBAAA;AAEhC,MAAM,yBAA4B,GAAA,CAAC,KACjC,KAAA,KAAA,CAAM,OAAO,gBAAiB,CAAA,uBAAA;AAEhC,MAAM,UAAA,GAAa,CAAC,MAClB,KAAA;AAAA,EACE,KAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,iBAAA;AAAA,EACA;AACF,CAAE,CAAA,QAAA,CAAS,OAAO,IAAI,CAAA;AAExB,MAAM,qBAAA,GAAwB,CAC5B,MACuB,KAAA;AACvB,EAAA,QAAQ,OAAO,IAAM;AAAA,IACnB,KAAK,YAAA;AACH,MAAI,IAAA,MAAA,CAAO,EAAO,KAAA,gBAAA,CAAiB,SAAW,EAAA;AAC5C,QAAO,OAAA,sBAAA;AAAA,OACF,MAAA;AACL,QAAO,OAAA,mBAAA;AAAA;AACT,IACF,KAAK,MAAA;AACH,MAAO,OAAA,oBAAA;AAAA,IACT,KAAK,WAAA;AACH,MAAO,OAAA,qBAAA;AAAA,IACT,KAAK,KAAA;AACH,MAAO,OAAA,eAAA;AAAA,IACT,KAAK,QAAA;AACH,MAAO,OAAA,kBAAA;AAAA,IACT,KAAK,iBAAA;AACH,MAAO,OAAA,kBAAA;AAAA,IACT,KAAK,WAAA;AACH,MAAO,OAAA,oBAAA;AAAA,IACT;AACE,MAAA,MAAM,MAAM,uBAAuB,CAAA;AAAA;AAEzC,CAAA;AASO,MAAM,wBAAwB,MAAM;AACzC,EAAA,MAAM,UAAU,wBAAyB,EAAA;AACzC,EAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA,EAAK,QAAY,EAAA,CAAA,SAAA,EAAA,OAAO,CAAI,CAAA,CAAA,EAAA,CAAA;AACtC;AAEA,MAAM,gBAAA,GAAmB,CAAI,CAAA,EAAA,gBAAA,CAAiB,SAAS,CAAA,aAAA,CAAA;AAE1C,MAAA,cAAA,GAAiB,CAAC,KAA6C,KAAA;AAC1E,EAAA,MAAM,EAAE,QAAA,EAAU,cAAgB,EAAA,aAAA,EAAe,gBAAmB,GAAA,KAAA;AACpE,EAAM,MAAA,KAAA,GAAQ,OAAiC,KAAS,CAAA,CAAA;AACxD,EAAM,MAAA,WAAA,GAAc,OAAqB,QAAQ,CAAA;AAEjD,EAAA,MAAM,GAAG,YAAY,CAAA,GAAI,SAAkB,IAAI,CAAA;AAE/C,EAAA,MAAM,cAAiB,GAAA,WAAA;AAAA,IACrB,CAAC,QAAsB,kBAA2C,KAAA;AAChE,MAAA,IAAI,cAAgB,EAAA;AAClB,QAAA,MAAM,kBACJ,GAAA,UAAA,CAAW,MAAQ,EAAA,oBAAoB,KAAK,KAAM,CAAA,OAAA;AACpD,QAAM,MAAA,iBAAA,GACJ,MAAO,CAAA,kBAAkB,CAAM,KAAA,iBAAA;AACjC,QAAA,MAAM,SAAS,iBACX,GAAA,QAAA,CAAS,kBAAkB,CAAE,CAAA,QAAA,CAAS,CAAC,CACvC,GAAA,kBAAA;AACJ,QAAM,MAAA,eAAA,GAAkB,aAAa,MAAM,CAAA;AAC3C,QAAA,cAAA,CAAe,iBAAiB,kBAAkB,CAAA;AAAA;AACpD,KACF;AAAA,IACA,CAAC,cAAc;AAAA,GACjB;AAEA,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAC3B,CAAC,MAA6B,EAAA,YAAA,GAAe,KAAU,KAAA;AACrD,MAAA,MAAM,SAAY,GAAA,aAAA,CAAc,KAAM,CAAA,OAAA,EAAyB,MAAM,CAAA;AACrE,MAAI,IAAA,SAAA,KAAc,MAAM,OAAS,EAAA;AAC/B,QAAA,KAAA,CAAM,OAAU,GAAA,SAAA;AAChB,QAAA,YAAA,CAAa,EAAE,CAAA;AACf,QAAA,IAAI,CAAC,YAAA,IAAgB,UAAW,CAAA,MAAM,CAAG,EAAA;AACvC,UAAe,cAAA,CAAA,SAAA,EAAW,qBAAsB,CAAA,MAAM,CAAC,CAAA;AAAA;AACzD;AACF,KACF;AAAA,IACA,CAAC,cAAc,cAAc;AAAA,GAC/B;AAEA,EAAA,MAAM,uBAA0B,GAAA,WAAA;AAAA,IAC9B,CAAC,SAA4B,KAAA;AAC3B,MAAqB,oBAAA,CAAA;AAAA,QACnB,IAAM,EAAA,KAAA;AAAA,QACN,IAAA,EAAM,CAAI,CAAA,EAAA,gBAAA,CAAiB,SAAS,CAAA,CAAA;AAAA,QACpC;AAAA,OACD,CAAA;AAAA,KACH;AAAA,IACA,CAAC,oBAAoB;AAAA,GACvB;AAEA,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,GAAgB,KAAA;AACf,MAAqB,oBAAA,CAAA;AAAA,QACnB,IAAM,EAAA,YAAA;AAAA,QACN,OAAS,EAAA,GAAA;AAAA,QACT,IAAA,EAAM,CAAI,CAAA,EAAA,gBAAA,CAAiB,uBAAuB,CAAA;AAAA,OACnD,CAAA;AAAA,KACH;AAAA,IACA,CAAC,oBAAoB;AAAA,GACvB;AAEA,EAAA,MAAM,2BAA8B,GAAA,WAAA;AAAA,IAClC,CACE,SACA,EAAA,KAAA,EACA,mBACG,KAAA;AACH,MAAqB,oBAAA,CAAA;AAAA,QACnB,IAAM,EAAA,WAAA;AAAA,QACN,IAAA,EAAM,CAAI,CAAA,EAAA,gBAAA,CAAiB,YAAY,CAAA,CAAA;AAAA,QACvC,KAAO,EAAA;AAAA,UACL,QAAU,EAAA,IAAA;AAAA,UACV,OAAS,EAAA,SAAA;AAAA,UACT,OAAS,EAAA,mBAAA;AAAA,UACT;AAAA;AACF,OACD,CAAA;AAAA,KACH;AAAA,IACA,CAAC,oBAAoB;AAAA,GACvB;AAEA,EAAA,MAAM,sBAAyB,GAAA,WAAA;AAAA,IAC7B,CAAC,MAAW,KAAA;AACV,MAAA,QAAQ,OAAO,IAAM;AAAA,QACnB,KAAK,YAAc,EAAA;AACjB,UAAA,mBAAA,CAAoB,MAAM,CAAA;AAC1B,UAAA;AAAA;AACF,QACA,KAAK,MAAQ,EAAA;AACX,UAAA,IAAI,MAAM,OAAS,EAAA;AACjB,YAAA,cAAA,CAAe,KAAM,CAAA,OAAA,EAAS,qBAAsB,CAAA,MAAM,CAAC,CAAA;AAAA;AAE7D,UAAA;AAAA;AACF,QACA,KAAK,OAAA;AACH,UAAI,IAAA,MAAA,CAAO,UAAU,kBAAoB,EAAA;AACvC,YAAA,OAAO,YAAY,MAAO,CAAA,KAAA,EAAO,MAAO,CAAA,IAAA,EAAM,MAAM,OAAO,CAAA;AAAA;AAE7D,UAAA;AAAA,QAEF,SAAS;AACP,UAAA,oBAAA,CAAqB,MAAM,CAAA;AAC3B,UAAA;AAAA;AACF;AACF,KACF;AAAA;AAAA,IAEA,CAAC,sBAAsB,cAAc;AAAA,GACvC;AAEA,EAAA,MAAM,mBAAsB,GAAA,iBAAA;AAAA,IAC1B,KAAA;AAAA,IACA,sBAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,aAAe,EAAA;AACjB,MAAA,IAAA,GAAO,2DAA2D,CAAA;AAClE,MAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,aAAa,CAAG,EAAA;AAChC,QAAA,MAAM,eAAkB,GAAA,UAAA;AAAA,UACtB,KAAM,CAAA,OAAA;AAAA,UACN;AAAA,SACF;AACA,QAAA,IAAI,eAAiB,EAAA;AAEnB,UAAA,MAAM,EAAE,IAAA,EAAM,mBAAoB,EAAA,GAAI,eAAgB,CAAA,KAAA;AACtD,UAAM,MAAA,MAAA,GAAS,aAAa,eAAe,CAAA;AAC3C,UAAA,MAAM,aAAa,aAAc,CAAA,GAAA;AAAA,YAAI,CAAC,IAAI,CACxC,KAAA,cAAA,CAAe,IAAI,CAAG,EAAA,mBAAmB,CAAI,CAAA,EAAA,CAAC,CAAE,CAAA;AAAA,WAClD;AACA,UAAA,MAAM,SAAS,MACX,GAAA;AAAA,YACE,MAAM,gBAAiB,CAAA,OAAA;AAAA,YACvB,MAAA;AAAA,YACA,WAAa,EAAA;AAAA,WAEf,GAAA;AAAA,YACE,MAAM,gBAAiB,CAAA,GAAA;AAAA,YACvB,IAAM,EAAA,mBAAA;AAAA,YACN,SAAW,EAAA;AAAA,WACb;AACJ,UAAA,oBAAA,CAAqB,QAAQ,IAAI,CAAA;AAAA;AACnC,OACK,MAAA;AACL,QAAA,MAAM,eAAkB,GAAA,UAAA;AAAA,UACtB,KAAM,CAAA,OAAA;AAAA,UACN;AAAA,SACF;AACA,QAAA,IAAI,eAAiB,EAAA;AAEnB,UAAA,MAAM,EAAE,IAAA,EAAM,mBAAoB,EAAA,GAAI,eAAgB,CAAA,KAAA;AACtD,UAAM,MAAA,MAAA,GAAS,aAAa,eAAe,CAAA;AAC3C,UAAA,MAAM,SAAY,GAAA,cAAA;AAAA,YAChB,aAAA;AAAA,YACA,GAAG,mBAAmB,CAAA,EAAA;AAAA,WACxB;AACA,UAAA,MAAM,SAAS,MACX,GAAA;AAAA,YACE,MAAM,gBAAiB,CAAA,OAAA;AAAA,YACvB,MAAA;AAAA,YACA,WAAa,EAAA;AAAA,WAEf,GAAA;AAAA,YACE,MAAM,gBAAiB,CAAA,GAAA;AAAA,YACvB,IAAM,EAAA,mBAAA;AAAA,YACN,SAAW,EAAA;AAAA,WACb;AACJ,UAAA,oBAAA,CAAqB,QAAQ,IAAI,CAAA;AAAA,mBACxB,aAAc,CAAA,EAAA,KAAO,QAAQ,KAAM,CAAA,OAAA,EAAS,IAAI,CAAG,EAAA;AAC5D,UAAM,MAAA,SAAA,GAAY,cAAe,CAAA,aAAA,EAAe,GAAG,CAAA;AACnD,UAAA,MAAM,MAAS,GAAA;AAAA,YACb,MAAM,gBAAiB,CAAA,OAAA;AAAA,YACvB,QAAQ,KAAM,CAAA,OAAA;AAAA,YACd,WAAa,EAAA;AAAA,WACf;AACA,UAAA,oBAAA,CAAqB,QAAQ,IAAI,CAAA;AAAA,SAC5B,MAAA;AACL,UAAM,MAAA,KAAA;AAAA,YACJ,CAAA,uKAAA,EAA0K,iBAAiB,SAAS,CAAA,EAAA;AAAA,WACtM;AAAA;AACF;AACF;AACF,GACC,EAAA,CAAC,oBAAsB,EAAA,aAAa,CAAC,CAAA;AAExC,EAAI,IAAA,KAAA,CAAM,YAAY,KAAW,CAAA,EAAA;AAC/B,IAAM,KAAA,CAAA,OAAA,GAAU,2BAA2B,QAAQ,CAAA;AAAA,GACrD,MAAA,IAAW,QAAa,KAAA,WAAA,CAAY,OAAS,EAAA;AAC3C,IAAA,KAAA,CAAM,OAAU,GAAA,0BAAA,CAA2B,QAAU,EAAA,KAAA,CAAM,OAAO,CAAA;AAClE,IAAA,WAAA,CAAY,OAAU,GAAA,QAAA;AAAA;AAGxB,EACE,uBAAA,GAAA;AAAA,IAAC,qBAAsB,CAAA,QAAA;AAAA,IAAtB;AAAA,MACC,KAAO,EAAA;AAAA,QACL,uBAAA;AAAA,QACA,cAAA;AAAA,QACA,sBAAwB,EAAA,sBAAA;AAAA,QACxB,2BAAA;AAAA,QACA,eAAA;AAAA,QACA,OAAS,EAAA;AAAA,OACX;AAAA,MAEC,QAAM,EAAA,KAAA,CAAA;AAAA;AAAA,GACT;AAEJ;AAEO,MAAM,4BAA4B,MAAM;AAC7C,EAAA,MAAM,EAAE,sBAAA,EAA2B,GAAA,UAAA,CAAW,qBAAqB,CAAA;AACnE,EAAO,OAAA,sBAAA;AACT;AAEO,MAAM,qBAAqB,MAAM;AACtC,EAAM,MAAA;AAAA,IACJ,uBAAA;AAAA,IACA,2BAAA;AAAA,IACA;AAAA,GACF,GAAI,WAAW,qBAAqB,CAAA;AACpC,EAAO,OAAA;AAAA,IACL,uBAAA;AAAA,IACA,2BAAA;AAAA,IACA;AAAA,GACF;AACF;AAEO,MAAM,0BAA0B,MAAM;AAC3C,EAAA,MAAM,wBAAwB,kBAAmB,EAAA;AACjD,EAAA,MAAM,EAAE,cAAA,EAAmB,GAAA,UAAA,CAAW,qBAAqB,CAAA;AAE3D,EAAA,MAAM,qBAAwB,GAAA,OAAA;AAAA,IAC5B,MACE,SAASA,eAAiB,GAAA;AACxB,MAAA,IAAI,qBAAuB,EAAA;AACzB,QAAM,MAAA,EAAE,OAAU,GAAA,qBAAA;AAClB,QAAO,OAAA,cAAA;AAAA,UACL;AAAA,YACE,GAAG,qBAAA;AAAA,YACH,KAAO,EAAA;AAAA,cACL,GAAG,KAAA;AAAA,cACH,UAAY,EAAA,IAAA;AAAA,cACZ,KAAO,EAAA;AAAA,gBACL,GAAG,KAAO,EAAA,KAAA;AAAA,gBACV,QAAU,EAAA,CAAA;AAAA,gBACV,UAAY,EAAA,CAAA;AAAA,gBACZ,SAAW,EAAA;AAAA;AACb;AACF,WACF;AAAA,UACA;AAAA,SACF;AAAA;AAEF,MAAO,OAAA,cAAA;AAAA,QACL;AAAA,UACE,IAAM,EAAA,aAAA;AAAA,UACN,KAAO,EAAA;AAAA,YACL,UAAY,EAAA,IAAA;AAAA,YACZ,KAAO,EAAA;AAAA,cACL,QAAU,EAAA,CAAA;AAAA,cACV,UAAY,EAAA,CAAA;AAAA,cACZ,SAAW,EAAA;AAAA;AACb;AACF,SACF;AAAA,QACA;AAAA,OACF;AAAA,KACF;AAAA,IACF,CAAC,qBAAqB;AAAA,GACxB;AAEA,EAAA,OAAO,cAAkB,IAAA,qBAAA;AAC3B;AAEO,MAAM,2BAA2B,MAAM;AAC5C,EAAA,MAAM,EAAE,OAAA,EAAY,GAAA,UAAA,CAAW,qBAAqB,CAAA;AACpD,EAAO,OAAA,OAAA;AACT;;;;"}
|
package/package.json
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.13.
|
|
2
|
+
"version": "0.13.6",
|
|
3
3
|
"description": "VUU Layout Components",
|
|
4
4
|
"author": "heswell",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
|
-
"types": "
|
|
6
|
+
"types": "types/index.d.ts",
|
|
7
7
|
"devDependencies": {
|
|
8
|
-
"@vuu-ui/vuu-data-types": "0.13.
|
|
9
|
-
"@vuu-ui/vuu-filter-types": "0.13.
|
|
8
|
+
"@vuu-ui/vuu-data-types": "0.13.6",
|
|
9
|
+
"@vuu-ui/vuu-filter-types": "0.13.6"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"@salt-ds/core": "1.43.0",
|
|
13
13
|
"@salt-ds/styles": "0.2.1",
|
|
14
14
|
"@salt-ds/window": "0.1.1",
|
|
15
|
-
"@vuu-ui/vuu-datatable": "0.13.
|
|
16
|
-
"@vuu-ui/vuu-filters": "0.13.
|
|
17
|
-
"@vuu-ui/vuu-popups": "0.13.
|
|
18
|
-
"@vuu-ui/vuu-table": "0.13.
|
|
19
|
-
"@vuu-ui/vuu-ui-controls": "0.13.
|
|
20
|
-
"@vuu-ui/vuu-utils": "0.13.
|
|
15
|
+
"@vuu-ui/vuu-datatable": "0.13.6",
|
|
16
|
+
"@vuu-ui/vuu-filters": "0.13.6",
|
|
17
|
+
"@vuu-ui/vuu-popups": "0.13.6",
|
|
18
|
+
"@vuu-ui/vuu-table": "0.13.6",
|
|
19
|
+
"@vuu-ui/vuu-ui-controls": "0.13.6",
|
|
20
|
+
"@vuu-ui/vuu-utils": "0.13.6"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
23
|
"clsx": "^2.0.0",
|
|
@@ -28,12 +28,14 @@
|
|
|
28
28
|
"files": [
|
|
29
29
|
"README.md",
|
|
30
30
|
"esm",
|
|
31
|
-
"cjs"
|
|
31
|
+
"cjs",
|
|
32
|
+
"/types"
|
|
32
33
|
],
|
|
33
34
|
"exports": {
|
|
34
35
|
".": {
|
|
35
36
|
"require": "./cjs/index.js",
|
|
36
|
-
"import": "./esm/index.js"
|
|
37
|
+
"import": "./esm/index.js",
|
|
38
|
+
"types": "./types/index.d.ts"
|
|
37
39
|
}
|
|
38
40
|
},
|
|
39
41
|
"main": "cjs/index.js",
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { HTMLAttributes } from "react";
|
|
2
|
+
export interface LayoutContainerProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
dropTarget?: boolean;
|
|
4
|
+
resizeable?: boolean;
|
|
5
|
+
}
|
|
6
|
+
export declare const LayoutContainer: import("react").ForwardRefExoticComponent<LayoutContainerProps & import("react").RefAttributes<HTMLDivElement>>;
|
package/types/debug.d.ts
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { HTMLAttributes } from "react";
|
|
2
|
+
export interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
clickToOpen?: boolean;
|
|
4
|
+
defaultOpen?: boolean;
|
|
5
|
+
inline?: boolean;
|
|
6
|
+
open?: boolean;
|
|
7
|
+
peekaboo?: boolean;
|
|
8
|
+
position?: "left" | "right" | "top" | "bottom";
|
|
9
|
+
sizeOpen?: number;
|
|
10
|
+
sizeClosed?: number;
|
|
11
|
+
toggleButton?: "start" | "end";
|
|
12
|
+
}
|
|
13
|
+
declare const Drawer: {
|
|
14
|
+
({ children, className: classNameProp, clickToOpen, defaultOpen, sizeOpen, sizeClosed, style: styleProp, open: openProp, position, inline, onClick, peekaboo, toggleButton, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
displayName: string;
|
|
16
|
+
};
|
|
17
|
+
export default Drawer;
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
import { ReactElement } from "react";
|
|
2
|
+
import { LayoutModel } from "@vuu-ui/vuu-utils";
|
|
3
|
+
import { DragDropRect, DropPos, RelativePosition } from "./dragDropTypes";
|
|
4
|
+
export declare const positionValues: {
|
|
5
|
+
north: number;
|
|
6
|
+
east: number;
|
|
7
|
+
south: number;
|
|
8
|
+
west: number;
|
|
9
|
+
header: number;
|
|
10
|
+
centre: number;
|
|
11
|
+
absolute: number;
|
|
12
|
+
};
|
|
13
|
+
export declare const RelativeDropPosition: {
|
|
14
|
+
AFTER: RelativePosition;
|
|
15
|
+
BEFORE: RelativePosition;
|
|
16
|
+
};
|
|
17
|
+
export declare const Position: Readonly<{
|
|
18
|
+
North: Readonly<{
|
|
19
|
+
offset: number;
|
|
20
|
+
valueOf: () => number;
|
|
21
|
+
toString: () => "north" | "south" | "east" | "west" | "header" | "centre" | "absolute";
|
|
22
|
+
North: boolean;
|
|
23
|
+
South: boolean;
|
|
24
|
+
East: boolean;
|
|
25
|
+
West: boolean;
|
|
26
|
+
Header: boolean;
|
|
27
|
+
Centre: boolean;
|
|
28
|
+
NorthOrSouth: boolean;
|
|
29
|
+
EastOrWest: boolean;
|
|
30
|
+
NorthOrWest: boolean;
|
|
31
|
+
SouthOrEast: boolean;
|
|
32
|
+
Absolute: boolean;
|
|
33
|
+
}>;
|
|
34
|
+
East: Readonly<{
|
|
35
|
+
offset: number;
|
|
36
|
+
valueOf: () => number;
|
|
37
|
+
toString: () => "north" | "south" | "east" | "west" | "header" | "centre" | "absolute";
|
|
38
|
+
North: boolean;
|
|
39
|
+
South: boolean;
|
|
40
|
+
East: boolean;
|
|
41
|
+
West: boolean;
|
|
42
|
+
Header: boolean;
|
|
43
|
+
Centre: boolean;
|
|
44
|
+
NorthOrSouth: boolean;
|
|
45
|
+
EastOrWest: boolean;
|
|
46
|
+
NorthOrWest: boolean;
|
|
47
|
+
SouthOrEast: boolean;
|
|
48
|
+
Absolute: boolean;
|
|
49
|
+
}>;
|
|
50
|
+
South: Readonly<{
|
|
51
|
+
offset: number;
|
|
52
|
+
valueOf: () => number;
|
|
53
|
+
toString: () => "north" | "south" | "east" | "west" | "header" | "centre" | "absolute";
|
|
54
|
+
North: boolean;
|
|
55
|
+
South: boolean;
|
|
56
|
+
East: boolean;
|
|
57
|
+
West: boolean;
|
|
58
|
+
Header: boolean;
|
|
59
|
+
Centre: boolean;
|
|
60
|
+
NorthOrSouth: boolean;
|
|
61
|
+
EastOrWest: boolean;
|
|
62
|
+
NorthOrWest: boolean;
|
|
63
|
+
SouthOrEast: boolean;
|
|
64
|
+
Absolute: boolean;
|
|
65
|
+
}>;
|
|
66
|
+
West: Readonly<{
|
|
67
|
+
offset: number;
|
|
68
|
+
valueOf: () => number;
|
|
69
|
+
toString: () => "north" | "south" | "east" | "west" | "header" | "centre" | "absolute";
|
|
70
|
+
North: boolean;
|
|
71
|
+
South: boolean;
|
|
72
|
+
East: boolean;
|
|
73
|
+
West: boolean;
|
|
74
|
+
Header: boolean;
|
|
75
|
+
Centre: boolean;
|
|
76
|
+
NorthOrSouth: boolean;
|
|
77
|
+
EastOrWest: boolean;
|
|
78
|
+
NorthOrWest: boolean;
|
|
79
|
+
SouthOrEast: boolean;
|
|
80
|
+
Absolute: boolean;
|
|
81
|
+
}>;
|
|
82
|
+
Header: Readonly<{
|
|
83
|
+
offset: number;
|
|
84
|
+
valueOf: () => number;
|
|
85
|
+
toString: () => "north" | "south" | "east" | "west" | "header" | "centre" | "absolute";
|
|
86
|
+
North: boolean;
|
|
87
|
+
South: boolean;
|
|
88
|
+
East: boolean;
|
|
89
|
+
West: boolean;
|
|
90
|
+
Header: boolean;
|
|
91
|
+
Centre: boolean;
|
|
92
|
+
NorthOrSouth: boolean;
|
|
93
|
+
EastOrWest: boolean;
|
|
94
|
+
NorthOrWest: boolean;
|
|
95
|
+
SouthOrEast: boolean;
|
|
96
|
+
Absolute: boolean;
|
|
97
|
+
}>;
|
|
98
|
+
Centre: Readonly<{
|
|
99
|
+
offset: number;
|
|
100
|
+
valueOf: () => number;
|
|
101
|
+
toString: () => "north" | "south" | "east" | "west" | "header" | "centre" | "absolute";
|
|
102
|
+
North: boolean;
|
|
103
|
+
South: boolean;
|
|
104
|
+
East: boolean;
|
|
105
|
+
West: boolean;
|
|
106
|
+
Header: boolean;
|
|
107
|
+
Centre: boolean;
|
|
108
|
+
NorthOrSouth: boolean;
|
|
109
|
+
EastOrWest: boolean;
|
|
110
|
+
NorthOrWest: boolean;
|
|
111
|
+
SouthOrEast: boolean;
|
|
112
|
+
Absolute: boolean;
|
|
113
|
+
}>;
|
|
114
|
+
Absolute: Readonly<{
|
|
115
|
+
offset: number;
|
|
116
|
+
valueOf: () => number;
|
|
117
|
+
toString: () => "north" | "south" | "east" | "west" | "header" | "centre" | "absolute";
|
|
118
|
+
North: boolean;
|
|
119
|
+
South: boolean;
|
|
120
|
+
East: boolean;
|
|
121
|
+
West: boolean;
|
|
122
|
+
Header: boolean;
|
|
123
|
+
Centre: boolean;
|
|
124
|
+
NorthOrSouth: boolean;
|
|
125
|
+
EastOrWest: boolean;
|
|
126
|
+
NorthOrWest: boolean;
|
|
127
|
+
SouthOrEast: boolean;
|
|
128
|
+
Absolute: boolean;
|
|
129
|
+
}>;
|
|
130
|
+
}>;
|
|
131
|
+
export interface Measurements {
|
|
132
|
+
[key: string]: DragDropRect;
|
|
133
|
+
}
|
|
134
|
+
export declare class BoxModel {
|
|
135
|
+
static measure(model: ReactElement, dropTargetPaths?: string[]): Measurements;
|
|
136
|
+
static allBoxesContainingPoint(layout: LayoutModel, measurements: Measurements, x: number, y: number, validDropTargets?: string[]): LayoutModel[];
|
|
137
|
+
}
|
|
138
|
+
export declare function pointPositionWithinRect(x: number, y: number, rect: DragDropRect, borderZone?: number): {
|
|
139
|
+
pctX: number;
|
|
140
|
+
pctY: number;
|
|
141
|
+
closeToTheEdge: number;
|
|
142
|
+
};
|
|
143
|
+
export declare function getPosition(x: number, y: number, rect: DragDropRect, targetOrientation?: "row" | "column"): DropPos;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { DragDropRect } from './dragDropTypes';
|
|
2
|
+
export type IntrinsicSizes = {
|
|
3
|
+
height?: number;
|
|
4
|
+
width?: number;
|
|
5
|
+
};
|
|
6
|
+
interface ZoneRange {
|
|
7
|
+
hi: number;
|
|
8
|
+
lo: number;
|
|
9
|
+
}
|
|
10
|
+
type DragConstraint = {
|
|
11
|
+
zone: {
|
|
12
|
+
x: ZoneRange;
|
|
13
|
+
y: ZoneRange;
|
|
14
|
+
};
|
|
15
|
+
pos: {
|
|
16
|
+
x: ZoneRange;
|
|
17
|
+
y: ZoneRange;
|
|
18
|
+
};
|
|
19
|
+
mouse: {
|
|
20
|
+
x: ZoneRange;
|
|
21
|
+
y: ZoneRange;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
interface ExtendedZoneRange {
|
|
25
|
+
lo: boolean;
|
|
26
|
+
hi: boolean;
|
|
27
|
+
mousePct: number;
|
|
28
|
+
mousePos: number;
|
|
29
|
+
pos: number;
|
|
30
|
+
}
|
|
31
|
+
export declare class DragState {
|
|
32
|
+
constraint: DragConstraint;
|
|
33
|
+
x: ExtendedZoneRange;
|
|
34
|
+
y: ExtendedZoneRange;
|
|
35
|
+
intrinsicSize: IntrinsicSizes | undefined;
|
|
36
|
+
constructor(zone: DragDropRect, mouseX: number, mouseY: number, measurements: DragDropRect, intrinsicSize?: IntrinsicSizes);
|
|
37
|
+
init(zone: DragDropRect, mouseX: number, mouseY: number, rect: DragDropRect, intrinsicSize?: IntrinsicSizes): void;
|
|
38
|
+
outOfBounds(): boolean;
|
|
39
|
+
inBounds(): boolean;
|
|
40
|
+
dropX(): number;
|
|
41
|
+
dropY(): number;
|
|
42
|
+
hasIntrinsicSize(): number | undefined;
|
|
43
|
+
update(xy: 'x' | 'y', mousePos: number): boolean;
|
|
44
|
+
private dropXY;
|
|
45
|
+
}
|
|
46
|
+
export {};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { rect } from "@vuu-ui/vuu-utils";
|
|
2
|
+
import { ReactElement } from "react";
|
|
3
|
+
import { IntrinsicSizes } from "./DragState";
|
|
4
|
+
import { DropTarget } from "./DropTarget";
|
|
5
|
+
export type DragStartCallback = (e: MouseEvent, x: number, y: number) => void;
|
|
6
|
+
export type DragMoveCallback = (x: number | undefined, y: number | undefined) => void;
|
|
7
|
+
export type DragEndCallback = (droppedTarget?: Partial<DropTarget>) => void;
|
|
8
|
+
export type DragInstructions = {
|
|
9
|
+
DoNotRemove?: boolean;
|
|
10
|
+
DoNotTransform?: boolean;
|
|
11
|
+
dragThreshold?: number;
|
|
12
|
+
DriftHomeIfNoDropTarget?: boolean;
|
|
13
|
+
RemoveDraggableOnDragEnd?: boolean;
|
|
14
|
+
};
|
|
15
|
+
export declare const Draggable: {
|
|
16
|
+
handleMousedown(e: MouseEvent, dragStartCallback: DragStartCallback, dragInstructions?: DragInstructions): void;
|
|
17
|
+
initDrag(rootContainer: ReactElement, dragContainerPath: string, { top, left, right, bottom }: rect, dragPos: {
|
|
18
|
+
x: number;
|
|
19
|
+
y: number;
|
|
20
|
+
}, dragHandler: {
|
|
21
|
+
drag: DragMoveCallback;
|
|
22
|
+
drop: DragEndCallback;
|
|
23
|
+
}, intrinsicSize?: IntrinsicSizes, dropTargets?: string[]): string;
|
|
24
|
+
};
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { LayoutModel, rectTuple } from "@vuu-ui/vuu-utils";
|
|
2
|
+
import { Measurements } from "./BoxModel";
|
|
3
|
+
import { DragDropRect, DropPos, DropPosTab } from "./dragDropTypes";
|
|
4
|
+
import { DragState } from "./DragState";
|
|
5
|
+
export declare const isTabstrip: (dropTarget: DropTarget) => boolean | undefined;
|
|
6
|
+
export interface DropTargetProps {
|
|
7
|
+
component: LayoutModel;
|
|
8
|
+
pos: DropPos;
|
|
9
|
+
clientRect: DragDropRect;
|
|
10
|
+
nextDropTarget: DropTarget | null;
|
|
11
|
+
}
|
|
12
|
+
export type GuideLine = [
|
|
13
|
+
number,
|
|
14
|
+
number,
|
|
15
|
+
number,
|
|
16
|
+
number,
|
|
17
|
+
number,
|
|
18
|
+
number,
|
|
19
|
+
number,
|
|
20
|
+
number
|
|
21
|
+
];
|
|
22
|
+
export interface TargetDropOutline {
|
|
23
|
+
l: number;
|
|
24
|
+
r: number;
|
|
25
|
+
t: number;
|
|
26
|
+
b: number;
|
|
27
|
+
tabLeft?: number;
|
|
28
|
+
tabWidth?: number;
|
|
29
|
+
tabHeight?: number;
|
|
30
|
+
guideLines?: GuideLine;
|
|
31
|
+
}
|
|
32
|
+
export declare class DropTarget {
|
|
33
|
+
private active;
|
|
34
|
+
box: unknown;
|
|
35
|
+
clientRect: DragDropRect;
|
|
36
|
+
component: LayoutModel;
|
|
37
|
+
dropRect: rectTuple | undefined;
|
|
38
|
+
nextDropTarget: DropTarget | null;
|
|
39
|
+
pos: DropPos;
|
|
40
|
+
constructor({ component, pos, clientRect, nextDropTarget, }: DropTargetProps);
|
|
41
|
+
targetTabPos(tab: DropPosTab): number;
|
|
42
|
+
/**
|
|
43
|
+
* Determine what will be rendered by the dropTargetRenderer
|
|
44
|
+
*
|
|
45
|
+
* @param {*} lineWidth
|
|
46
|
+
* @param {*} dragState
|
|
47
|
+
* @returns {l, t, r, b, tabLeft, tabWidth, tabHeight}
|
|
48
|
+
*/
|
|
49
|
+
getTargetDropOutline(lineWidth: number, dragState?: DragState): TargetDropOutline;
|
|
50
|
+
getDropTabOutline(lineWidth: number, tab: DropPosTab): TargetDropOutline;
|
|
51
|
+
getIntrinsicDropRect(dragState: DragState): TargetDropOutline;
|
|
52
|
+
/**
|
|
53
|
+
* @returns [left, top, right, bottom]
|
|
54
|
+
*/
|
|
55
|
+
getDropRectOutline(lineWidth: number, dragState?: DragState): number[] | null;
|
|
56
|
+
activate(): this;
|
|
57
|
+
toArray(this: DropTarget): DropTarget[];
|
|
58
|
+
static getActiveDropTarget(dropTarget: DropTarget | null): DropTarget | null;
|
|
59
|
+
}
|
|
60
|
+
export declare function identifyDropTarget(x: number, y: number, rootLayout: LayoutModel, measurements: Measurements, intrinsicSize?: number, validDropTargets?: string[]): DropTarget | null;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { DragDropRect } from "./dragDropTypes";
|
|
2
|
+
import { DragState } from "./DragState";
|
|
3
|
+
import { DropTarget } from "./DropTarget";
|
|
4
|
+
type Point = [number, number];
|
|
5
|
+
type TabMode = "full-view" | "tab-only";
|
|
6
|
+
export default class DropTargetCanvas {
|
|
7
|
+
private currentPath;
|
|
8
|
+
private tabMode;
|
|
9
|
+
constructor();
|
|
10
|
+
prepare(dragRect: DragDropRect, tabMode?: TabMode): void;
|
|
11
|
+
clear(): void;
|
|
12
|
+
get hoverDropTarget(): DropTarget | null;
|
|
13
|
+
getPoints(x: number, y: number, width: number, height: number, tabLeft?: number, tabWidth?: number, tabHeight?: number): Point[];
|
|
14
|
+
draw(dropTarget: DropTarget, dragState: DragState): void;
|
|
15
|
+
drawTarget(dropTarget: DropTarget, dragState?: DragState): void;
|
|
16
|
+
}
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import type { rect } from "@vuu-ui/vuu-utils";
|
|
2
|
+
export interface DragDropRect extends rect {
|
|
3
|
+
children?: DragDropRect[];
|
|
4
|
+
header?: {
|
|
5
|
+
top: number;
|
|
6
|
+
left: number;
|
|
7
|
+
right: number;
|
|
8
|
+
bottom: number;
|
|
9
|
+
titleWidth?: number;
|
|
10
|
+
};
|
|
11
|
+
height: number;
|
|
12
|
+
scrolling?: {
|
|
13
|
+
id: string;
|
|
14
|
+
scrollTop: number;
|
|
15
|
+
scrollHeight: number;
|
|
16
|
+
};
|
|
17
|
+
Stack?: {
|
|
18
|
+
left: number;
|
|
19
|
+
right: number;
|
|
20
|
+
}[];
|
|
21
|
+
width: number;
|
|
22
|
+
}
|
|
23
|
+
export interface DropPosition {
|
|
24
|
+
Absolute: boolean;
|
|
25
|
+
Centre: boolean;
|
|
26
|
+
East: boolean;
|
|
27
|
+
EastOrWest: boolean;
|
|
28
|
+
Header: boolean;
|
|
29
|
+
North: boolean;
|
|
30
|
+
NorthOrSouth: boolean;
|
|
31
|
+
offset: number;
|
|
32
|
+
South: boolean;
|
|
33
|
+
SouthOrEast: boolean;
|
|
34
|
+
West: boolean;
|
|
35
|
+
}
|
|
36
|
+
export type RelativePosition = "after" | "before";
|
|
37
|
+
export type DropPosTab = {
|
|
38
|
+
index: number;
|
|
39
|
+
left: number;
|
|
40
|
+
positionRelativeToTab: RelativePosition;
|
|
41
|
+
width: number;
|
|
42
|
+
};
|
|
43
|
+
export interface DropPos {
|
|
44
|
+
closeToTheEdge: number;
|
|
45
|
+
height?: number;
|
|
46
|
+
position: DropPosition;
|
|
47
|
+
tab?: DropPosTab;
|
|
48
|
+
width?: number;
|
|
49
|
+
x: number;
|
|
50
|
+
y: number;
|
|
51
|
+
}
|