@vuu-ui/vuu-layout 0.0.26
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/LICENSE +201 -0
- package/README.md +1 -0
- package/cjs/Component.js +14 -0
- package/cjs/Component.js.map +1 -0
- package/cjs/DraggableLayout.css.js +6 -0
- package/cjs/DraggableLayout.css.js.map +1 -0
- package/cjs/DraggableLayout.js +33 -0
- package/cjs/DraggableLayout.js.map +1 -0
- package/cjs/dock-layout/DockLayout.css.js +6 -0
- package/cjs/dock-layout/DockLayout.css.js.map +1 -0
- package/cjs/dock-layout/DockLayout.js +36 -0
- package/cjs/dock-layout/DockLayout.js.map +1 -0
- package/cjs/dock-layout/Drawer.css.js +6 -0
- package/cjs/dock-layout/Drawer.css.js.map +1 -0
- package/cjs/dock-layout/Drawer.js +96 -0
- package/cjs/dock-layout/Drawer.js.map +1 -0
- package/cjs/drag-drop/BoxModel.js +422 -0
- package/cjs/drag-drop/BoxModel.js.map +1 -0
- package/cjs/drag-drop/DragState.js +154 -0
- package/cjs/drag-drop/DragState.js.map +1 -0
- package/cjs/drag-drop/Draggable.js +192 -0
- package/cjs/drag-drop/Draggable.js.map +1 -0
- package/cjs/drag-drop/DropMenu.css.js +6 -0
- package/cjs/drag-drop/DropMenu.css.js.map +1 -0
- package/cjs/drag-drop/DropMenu.js +55 -0
- package/cjs/drag-drop/DropMenu.js.map +1 -0
- package/cjs/drag-drop/DropTarget.js +244 -0
- package/cjs/drag-drop/DropTarget.js.map +1 -0
- package/cjs/drag-drop/DropTargetRenderer.js +244 -0
- package/cjs/drag-drop/DropTargetRenderer.js.map +1 -0
- package/cjs/flexbox/Flexbox.css.js +6 -0
- package/cjs/flexbox/Flexbox.css.js.map +1 -0
- package/cjs/flexbox/Flexbox.js +70 -0
- package/cjs/flexbox/Flexbox.js.map +1 -0
- package/cjs/flexbox/FlexboxLayout.js +30 -0
- package/cjs/flexbox/FlexboxLayout.js.map +1 -0
- package/cjs/flexbox/FluidGrid.css.js +6 -0
- package/cjs/flexbox/FluidGrid.css.js.map +1 -0
- package/cjs/flexbox/FluidGrid.js +87 -0
- package/cjs/flexbox/FluidGrid.js.map +1 -0
- package/cjs/flexbox/FluidGridLayout.js +14 -0
- package/cjs/flexbox/FluidGridLayout.js.map +1 -0
- package/cjs/flexbox/Splitter.css.js +6 -0
- package/cjs/flexbox/Splitter.css.js.map +1 -0
- package/cjs/flexbox/Splitter.js +122 -0
- package/cjs/flexbox/Splitter.js.map +1 -0
- package/cjs/flexbox/flexbox-utils.js +109 -0
- package/cjs/flexbox/flexbox-utils.js.map +1 -0
- package/cjs/flexbox/useResponsiveSizing.js +62 -0
- package/cjs/flexbox/useResponsiveSizing.js.map +1 -0
- package/cjs/flexbox/useSplitterResizing.js +209 -0
- package/cjs/flexbox/useSplitterResizing.js.map +1 -0
- package/cjs/index.js +133 -0
- package/cjs/index.js.map +1 -0
- package/cjs/layout-action.js +27 -0
- package/cjs/layout-action.js.map +1 -0
- package/cjs/layout-header/Header.css.js +6 -0
- package/cjs/layout-header/Header.css.js.map +1 -0
- package/cjs/layout-header/Header.js +131 -0
- package/cjs/layout-header/Header.js.map +1 -0
- package/cjs/layout-provider/LayoutProvider.js +178 -0
- package/cjs/layout-provider/LayoutProvider.js.map +1 -0
- package/cjs/layout-provider/LayoutProviderContext.js +14 -0
- package/cjs/layout-provider/LayoutProviderContext.js.map +1 -0
- package/cjs/layout-provider/useLayoutDragDrop.js +172 -0
- package/cjs/layout-provider/useLayoutDragDrop.js.map +1 -0
- package/cjs/layout-reducer/flexUtils.js +219 -0
- package/cjs/layout-reducer/flexUtils.js.map +1 -0
- package/cjs/layout-reducer/insert-layout-element.js +273 -0
- package/cjs/layout-reducer/insert-layout-element.js.map +1 -0
- package/cjs/layout-reducer/layout-reducer.js +198 -0
- package/cjs/layout-reducer/layout-reducer.js.map +1 -0
- package/cjs/layout-reducer/layoutTypes.js +41 -0
- package/cjs/layout-reducer/layoutTypes.js.map +1 -0
- package/cjs/layout-reducer/layoutUtils.js +226 -0
- package/cjs/layout-reducer/layoutUtils.js.map +1 -0
- package/cjs/layout-reducer/move-layout-element.js +31 -0
- package/cjs/layout-reducer/move-layout-element.js.map +1 -0
- package/cjs/layout-reducer/remove-layout-element.js +223 -0
- package/cjs/layout-reducer/remove-layout-element.js.map +1 -0
- package/cjs/layout-reducer/replace-layout-element.js +91 -0
- package/cjs/layout-reducer/replace-layout-element.js.map +1 -0
- package/cjs/layout-reducer/resize-flex-children.js +61 -0
- package/cjs/layout-reducer/resize-flex-children.js.map +1 -0
- package/cjs/layout-reducer/wrap-layout-element.js +212 -0
- package/cjs/layout-reducer/wrap-layout-element.js.map +1 -0
- package/cjs/layout-view/View.css.js +6 -0
- package/cjs/layout-view/View.css.js.map +1 -0
- package/cjs/layout-view/View.js +164 -0
- package/cjs/layout-view/View.js.map +1 -0
- package/cjs/layout-view/useView.js +92 -0
- package/cjs/layout-view/useView.js.map +1 -0
- package/cjs/layout-view/useViewResize.js +42 -0
- package/cjs/layout-view/useViewResize.js.map +1 -0
- package/cjs/layout-view-actions/ViewContext.js +16 -0
- package/cjs/layout-view-actions/ViewContext.js.map +1 -0
- package/cjs/layout-view-actions/useViewActionDispatcher.js +103 -0
- package/cjs/layout-view-actions/useViewActionDispatcher.js.map +1 -0
- package/cjs/palette/Palette.css.js +6 -0
- package/cjs/palette/Palette.css.js.map +1 -0
- package/cjs/palette/Palette.js +127 -0
- package/cjs/palette/Palette.js.map +1 -0
- package/cjs/placeholder/LayoutStartPanel.css.js +6 -0
- package/cjs/placeholder/LayoutStartPanel.css.js.map +1 -0
- package/cjs/placeholder/LayoutStartPanel.js +60 -0
- package/cjs/placeholder/LayoutStartPanel.js.map +1 -0
- package/cjs/placeholder/Placeholder.css.js +6 -0
- package/cjs/placeholder/Placeholder.css.js.map +1 -0
- package/cjs/placeholder/Placeholder.js +34 -0
- package/cjs/placeholder/Placeholder.js.map +1 -0
- package/cjs/registry/ComponentRegistry.js +27 -0
- package/cjs/registry/ComponentRegistry.js.map +1 -0
- package/cjs/responsive/breakpoints.js +36 -0
- package/cjs/responsive/breakpoints.js.map +1 -0
- package/cjs/responsive/use-breakpoints.js +76 -0
- package/cjs/responsive/use-breakpoints.js.map +1 -0
- package/cjs/responsive/useResizeObserver.js +118 -0
- package/cjs/responsive/useResizeObserver.js.map +1 -0
- package/cjs/responsive/utils.js +34 -0
- package/cjs/responsive/utils.js.map +1 -0
- package/cjs/stack/Stack.css.js +6 -0
- package/cjs/stack/Stack.css.js.map +1 -0
- package/cjs/stack/Stack.js +148 -0
- package/cjs/stack/Stack.js.map +1 -0
- package/cjs/stack/StackLayout.js +122 -0
- package/cjs/stack/StackLayout.js.map +1 -0
- package/cjs/use-persistent-state.js +109 -0
- package/cjs/use-persistent-state.js.map +1 -0
- package/cjs/utils/pathUtils.js +293 -0
- package/cjs/utils/pathUtils.js.map +1 -0
- package/cjs/utils/propUtils.js +27 -0
- package/cjs/utils/propUtils.js.map +1 -0
- package/cjs/utils/refUtils.js +12 -0
- package/cjs/utils/refUtils.js.map +1 -0
- package/cjs/utils/styleUtils.js +15 -0
- package/cjs/utils/styleUtils.js.map +1 -0
- package/cjs/utils/typeOf.js +27 -0
- package/cjs/utils/typeOf.js.map +1 -0
- package/esm/Component.js +12 -0
- package/esm/Component.js.map +1 -0
- package/esm/DraggableLayout.css.js +4 -0
- package/esm/DraggableLayout.css.js.map +1 -0
- package/esm/DraggableLayout.js +31 -0
- package/esm/DraggableLayout.js.map +1 -0
- package/esm/dock-layout/DockLayout.css.js +4 -0
- package/esm/dock-layout/DockLayout.css.js.map +1 -0
- package/esm/dock-layout/DockLayout.js +34 -0
- package/esm/dock-layout/DockLayout.js.map +1 -0
- package/esm/dock-layout/Drawer.css.js +4 -0
- package/esm/dock-layout/Drawer.css.js.map +1 -0
- package/esm/dock-layout/Drawer.js +94 -0
- package/esm/dock-layout/Drawer.js.map +1 -0
- package/esm/drag-drop/BoxModel.js +415 -0
- package/esm/drag-drop/BoxModel.js.map +1 -0
- package/esm/drag-drop/DragState.js +152 -0
- package/esm/drag-drop/DragState.js.map +1 -0
- package/esm/drag-drop/Draggable.js +190 -0
- package/esm/drag-drop/Draggable.js.map +1 -0
- package/esm/drag-drop/DropMenu.css.js +4 -0
- package/esm/drag-drop/DropMenu.css.js.map +1 -0
- package/esm/drag-drop/DropMenu.js +52 -0
- package/esm/drag-drop/DropMenu.js.map +1 -0
- package/esm/drag-drop/DropTarget.js +240 -0
- package/esm/drag-drop/DropTarget.js.map +1 -0
- package/esm/drag-drop/DropTargetRenderer.js +242 -0
- package/esm/drag-drop/DropTargetRenderer.js.map +1 -0
- package/esm/flexbox/Flexbox.css.js +4 -0
- package/esm/flexbox/Flexbox.css.js.map +1 -0
- package/esm/flexbox/Flexbox.js +68 -0
- package/esm/flexbox/Flexbox.js.map +1 -0
- package/esm/flexbox/FlexboxLayout.js +28 -0
- package/esm/flexbox/FlexboxLayout.js.map +1 -0
- package/esm/flexbox/FluidGrid.css.js +4 -0
- package/esm/flexbox/FluidGrid.css.js.map +1 -0
- package/esm/flexbox/FluidGrid.js +85 -0
- package/esm/flexbox/FluidGrid.js.map +1 -0
- package/esm/flexbox/FluidGridLayout.js +12 -0
- package/esm/flexbox/FluidGridLayout.js.map +1 -0
- package/esm/flexbox/Splitter.css.js +4 -0
- package/esm/flexbox/Splitter.css.js.map +1 -0
- package/esm/flexbox/Splitter.js +120 -0
- package/esm/flexbox/Splitter.js.map +1 -0
- package/esm/flexbox/flexbox-utils.js +103 -0
- package/esm/flexbox/flexbox-utils.js.map +1 -0
- package/esm/flexbox/useResponsiveSizing.js +60 -0
- package/esm/flexbox/useResponsiveSizing.js.map +1 -0
- package/esm/flexbox/useSplitterResizing.js +207 -0
- package/esm/flexbox/useSplitterResizing.js.map +1 -0
- package/esm/index.js +37 -0
- package/esm/index.js.map +1 -0
- package/esm/layout-action.js +25 -0
- package/esm/layout-action.js.map +1 -0
- package/esm/layout-header/Header.css.js +4 -0
- package/esm/layout-header/Header.css.js.map +1 -0
- package/esm/layout-header/Header.js +129 -0
- package/esm/layout-header/Header.js.map +1 -0
- package/esm/layout-provider/LayoutProvider.js +172 -0
- package/esm/layout-provider/LayoutProvider.js.map +1 -0
- package/esm/layout-provider/LayoutProviderContext.js +12 -0
- package/esm/layout-provider/LayoutProviderContext.js.map +1 -0
- package/esm/layout-provider/useLayoutDragDrop.js +170 -0
- package/esm/layout-provider/useLayoutDragDrop.js.map +1 -0
- package/esm/layout-reducer/flexUtils.js +210 -0
- package/esm/layout-reducer/flexUtils.js.map +1 -0
- package/esm/layout-reducer/insert-layout-element.js +269 -0
- package/esm/layout-reducer/insert-layout-element.js.map +1 -0
- package/esm/layout-reducer/layout-reducer.js +196 -0
- package/esm/layout-reducer/layout-reducer.js.map +1 -0
- package/esm/layout-reducer/layoutTypes.js +37 -0
- package/esm/layout-reducer/layoutTypes.js.map +1 -0
- package/esm/layout-reducer/layoutUtils.js +215 -0
- package/esm/layout-reducer/layoutUtils.js.map +1 -0
- package/esm/layout-reducer/move-layout-element.js +29 -0
- package/esm/layout-reducer/move-layout-element.js.map +1 -0
- package/esm/layout-reducer/remove-layout-element.js +221 -0
- package/esm/layout-reducer/remove-layout-element.js.map +1 -0
- package/esm/layout-reducer/replace-layout-element.js +87 -0
- package/esm/layout-reducer/replace-layout-element.js.map +1 -0
- package/esm/layout-reducer/resize-flex-children.js +58 -0
- package/esm/layout-reducer/resize-flex-children.js.map +1 -0
- package/esm/layout-reducer/wrap-layout-element.js +210 -0
- package/esm/layout-reducer/wrap-layout-element.js.map +1 -0
- package/esm/layout-view/View.css.js +4 -0
- package/esm/layout-view/View.css.js.map +1 -0
- package/esm/layout-view/View.js +162 -0
- package/esm/layout-view/View.js.map +1 -0
- package/esm/layout-view/useView.js +90 -0
- package/esm/layout-view/useView.js.map +1 -0
- package/esm/layout-view/useViewResize.js +40 -0
- package/esm/layout-view/useViewResize.js.map +1 -0
- package/esm/layout-view-actions/ViewContext.js +12 -0
- package/esm/layout-view-actions/ViewContext.js.map +1 -0
- package/esm/layout-view-actions/useViewActionDispatcher.js +101 -0
- package/esm/layout-view-actions/useViewActionDispatcher.js.map +1 -0
- package/esm/palette/Palette.css.js +4 -0
- package/esm/palette/Palette.css.js.map +1 -0
- package/esm/palette/Palette.js +124 -0
- package/esm/palette/Palette.js.map +1 -0
- package/esm/placeholder/LayoutStartPanel.css.js +4 -0
- package/esm/placeholder/LayoutStartPanel.css.js.map +1 -0
- package/esm/placeholder/LayoutStartPanel.js +58 -0
- package/esm/placeholder/LayoutStartPanel.js.map +1 -0
- package/esm/placeholder/Placeholder.css.js +4 -0
- package/esm/placeholder/Placeholder.css.js.map +1 -0
- package/esm/placeholder/Placeholder.js +32 -0
- package/esm/placeholder/Placeholder.js.map +1 -0
- package/esm/registry/ComponentRegistry.js +21 -0
- package/esm/registry/ComponentRegistry.js.map +1 -0
- package/esm/responsive/breakpoints.js +33 -0
- package/esm/responsive/breakpoints.js.map +1 -0
- package/esm/responsive/use-breakpoints.js +74 -0
- package/esm/responsive/use-breakpoints.js.map +1 -0
- package/esm/responsive/useResizeObserver.js +112 -0
- package/esm/responsive/useResizeObserver.js.map +1 -0
- package/esm/responsive/utils.js +31 -0
- package/esm/responsive/utils.js.map +1 -0
- package/esm/stack/Stack.css.js +4 -0
- package/esm/stack/Stack.css.js.map +1 -0
- package/esm/stack/Stack.js +146 -0
- package/esm/stack/Stack.js.map +1 -0
- package/esm/stack/StackLayout.js +120 -0
- package/esm/stack/StackLayout.js.map +1 -0
- package/esm/use-persistent-state.js +104 -0
- package/esm/use-persistent-state.js.map +1 -0
- package/esm/utils/pathUtils.js +280 -0
- package/esm/utils/pathUtils.js.map +1 -0
- package/esm/utils/propUtils.js +23 -0
- package/esm/utils/propUtils.js.map +1 -0
- package/esm/utils/refUtils.js +10 -0
- package/esm/utils/refUtils.js.map +1 -0
- package/esm/utils/styleUtils.js +13 -0
- package/esm/utils/styleUtils.js.map +1 -0
- package/esm/utils/typeOf.js +23 -0
- package/esm/utils/typeOf.js.map +1 -0
- package/package.json +43 -0
- package/types/Component.d.ts +7 -0
- package/types/DraggableLayout.d.ts +6 -0
- package/types/debug.d.ts +2 -0
- package/types/dock-layout/DockLayout.d.ts +9 -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/DropMenu.d.ts +9 -0
- package/types/drag-drop/DropTarget.d.ts +61 -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 +4 -0
- package/types/flexbox/Flexbox.d.ts +4 -0
- package/types/flexbox/FlexboxLayout.d.ts +6 -0
- package/types/flexbox/FluidGrid.d.ts +6 -0
- package/types/flexbox/FluidGridLayout.d.ts +6 -0
- package/types/flexbox/Splitter.d.ts +12 -0
- package/types/flexbox/flexbox-utils.d.ts +12 -0
- package/types/flexbox/flexboxTypes.d.ts +51 -0
- package/types/flexbox/index.d.ts +4 -0
- package/types/flexbox/useResponsiveSizing.d.ts +10 -0
- package/types/flexbox/useSplitterResizing.d.ts +2 -0
- package/types/index.d.ts +18 -0
- package/types/layout-action.d.ts +22 -0
- package/types/layout-header/ActionButton.d.ts +8 -0
- package/types/layout-header/Header.d.ts +12 -0
- package/types/layout-header/index.d.ts +1 -0
- package/types/layout-provider/LayoutProvider.d.ts +15 -0
- package/types/layout-provider/LayoutProviderContext.d.ts +9 -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 +193 -0
- package/types/layout-reducer/layoutUtils.d.ts +38 -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 +2 -0
- package/types/layout-view/useView.d.ts +21 -0
- package/types/layout-view/useViewResize.d.ts +7 -0
- package/types/layout-view/viewTypes.d.ts +21 -0
- package/types/layout-view-actions/ViewContext.d.ts +33 -0
- package/types/layout-view-actions/index.d.ts +2 -0
- package/types/layout-view-actions/useViewActionDispatcher.d.ts +9 -0
- package/types/palette/Palette.d.ts +21 -0
- package/types/palette/index.d.ts +1 -0
- package/types/placeholder/LayoutStartPanel.d.ts +5 -0
- package/types/placeholder/Placeholder.d.ts +17 -0
- package/types/placeholder/index.d.ts +1 -0
- package/types/registry/ComponentRegistry.d.ts +13 -0
- package/types/registry/index.d.ts +1 -0
- package/types/responsive/breakpoints.d.ts +4 -0
- package/types/responsive/index.d.ts +3 -0
- package/types/responsive/measureMinimumNodeSize.d.ts +1 -0
- package/types/responsive/overflowUtils.d.ts +2 -0
- package/types/responsive/use-breakpoints.d.ts +7 -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 +6 -0
- package/types/stack/index.d.ts +3 -0
- package/types/stack/stackTypes.d.ts +22 -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 +2 -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
|
@@ -0,0 +1,269 @@
|
|
|
1
|
+
import { uuid } from '@vuu-ui/vuu-utils';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { nextStep, resetPath } from '../utils/pathUtils.js';
|
|
4
|
+
import { getProps, getProp } from '../utils/propUtils.js';
|
|
5
|
+
import { typeOf } from '../utils/typeOf.js';
|
|
6
|
+
import { getIntrinsicSize, wrapIntrinsicSizeComponentWithFlexbox, createPlaceHolder, getFlexOrIntrinsicStyle, getFlexDimensions } from './flexUtils.js';
|
|
7
|
+
import { getManagedDimension, getDefaultTabLabel } from './layoutUtils.js';
|
|
8
|
+
|
|
9
|
+
function getInsertTabBeforeAfter(stack, pos) {
|
|
10
|
+
const tabs = stack.props.children;
|
|
11
|
+
const tabCount = tabs.length;
|
|
12
|
+
const { index = -1, positionRelativeToTab = "after" } = pos.tab || {};
|
|
13
|
+
return index === -1 || index >= tabCount ? [tabs[tabCount - 1], "after"] : [tabs[index] ?? null, positionRelativeToTab];
|
|
14
|
+
}
|
|
15
|
+
function insertIntoContainer(container, targetContainer, newComponent) {
|
|
16
|
+
const {
|
|
17
|
+
active: containerActive,
|
|
18
|
+
children: containerChildren = [],
|
|
19
|
+
path: containerPath
|
|
20
|
+
} = getProps(container);
|
|
21
|
+
const existingComponentPath = getProp(targetContainer, "path");
|
|
22
|
+
const { idx, finalStep } = nextStep(
|
|
23
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
24
|
+
containerPath,
|
|
25
|
+
existingComponentPath,
|
|
26
|
+
true
|
|
27
|
+
);
|
|
28
|
+
const [insertedIdx, children] = finalStep ? insertIntoChildren(container, containerChildren, newComponent) : [
|
|
29
|
+
containerActive,
|
|
30
|
+
containerChildren?.map(
|
|
31
|
+
(child, index) => index === idx ? insertIntoContainer(
|
|
32
|
+
child,
|
|
33
|
+
targetContainer,
|
|
34
|
+
newComponent
|
|
35
|
+
) : child
|
|
36
|
+
)
|
|
37
|
+
];
|
|
38
|
+
const active = typeOf(container) === "Stack" ? Array.isArray(insertedIdx) ? insertedIdx[0] : insertedIdx : containerActive;
|
|
39
|
+
return React.cloneElement(container, { active }, children);
|
|
40
|
+
}
|
|
41
|
+
const getDefaultTitle = (containerType, component, index, existingLabels) => containerType === "Stack" ? getDefaultTabLabel(component, index, existingLabels) : void 0;
|
|
42
|
+
const getChildrenTitles = (children) => children.map((child) => child.props.title);
|
|
43
|
+
function insertIntoChildren(container, containerChildren, newComponent) {
|
|
44
|
+
const containerPath = getProp(container, "path");
|
|
45
|
+
const count = containerChildren?.length;
|
|
46
|
+
const {
|
|
47
|
+
id = uuid(),
|
|
48
|
+
title = getDefaultTitle(
|
|
49
|
+
typeOf(container),
|
|
50
|
+
newComponent,
|
|
51
|
+
count ?? 0,
|
|
52
|
+
getChildrenTitles(containerChildren)
|
|
53
|
+
)
|
|
54
|
+
} = getProps(newComponent);
|
|
55
|
+
if (count) {
|
|
56
|
+
return [
|
|
57
|
+
count,
|
|
58
|
+
containerChildren.concat(
|
|
59
|
+
resetPath(newComponent, `${containerPath}.${count}`, {
|
|
60
|
+
id,
|
|
61
|
+
key: id,
|
|
62
|
+
title
|
|
63
|
+
})
|
|
64
|
+
)
|
|
65
|
+
];
|
|
66
|
+
} else {
|
|
67
|
+
return [0, [resetPath(newComponent, `${containerPath}.0`, { id, title })]];
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
function insertBesideChild(container, existingComponent, newComponent, insertionPosition, pos, clientRect, dropRect) {
|
|
71
|
+
const {
|
|
72
|
+
active: containerActive,
|
|
73
|
+
children: containerChildren,
|
|
74
|
+
path: containerPath
|
|
75
|
+
} = getProps(container);
|
|
76
|
+
const existingComponentPath = getProp(existingComponent, "path");
|
|
77
|
+
const { idx, finalStep } = nextStep(containerPath, existingComponentPath);
|
|
78
|
+
const [insertedIdx, children] = finalStep ? updateChildren(
|
|
79
|
+
container,
|
|
80
|
+
containerChildren,
|
|
81
|
+
idx,
|
|
82
|
+
newComponent,
|
|
83
|
+
insertionPosition,
|
|
84
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
85
|
+
pos,
|
|
86
|
+
clientRect,
|
|
87
|
+
dropRect
|
|
88
|
+
) : [
|
|
89
|
+
containerActive,
|
|
90
|
+
containerChildren.map(
|
|
91
|
+
(child, index) => index === idx ? insertBesideChild(
|
|
92
|
+
child,
|
|
93
|
+
existingComponent,
|
|
94
|
+
newComponent,
|
|
95
|
+
insertionPosition,
|
|
96
|
+
pos,
|
|
97
|
+
clientRect,
|
|
98
|
+
dropRect
|
|
99
|
+
) : child
|
|
100
|
+
)
|
|
101
|
+
];
|
|
102
|
+
const active = typeOf(container) === "Stack" ? insertedIdx : containerActive;
|
|
103
|
+
return React.cloneElement(container, { active }, children);
|
|
104
|
+
}
|
|
105
|
+
function updateChildren(container, containerChildren, idx, newComponent, insertionPosition, pos, clientRect, dropRect) {
|
|
106
|
+
const intrinsicSize = getIntrinsicSize(newComponent);
|
|
107
|
+
if (intrinsicSize?.width && intrinsicSize?.height) {
|
|
108
|
+
return insertIntrinsicSizedComponent(
|
|
109
|
+
container,
|
|
110
|
+
containerChildren,
|
|
111
|
+
idx,
|
|
112
|
+
newComponent,
|
|
113
|
+
insertionPosition,
|
|
114
|
+
clientRect,
|
|
115
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
116
|
+
dropRect
|
|
117
|
+
);
|
|
118
|
+
} else {
|
|
119
|
+
return insertFlexComponent(
|
|
120
|
+
container,
|
|
121
|
+
containerChildren,
|
|
122
|
+
idx,
|
|
123
|
+
newComponent,
|
|
124
|
+
insertionPosition,
|
|
125
|
+
pos?.width || pos?.height,
|
|
126
|
+
clientRect
|
|
127
|
+
);
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
const getLeadingPlaceholderSize = (flexDirection2, insertionPosition, { top, right, bottom, left }, [rectLeft, rectTop, rectRight, rectBottom]) => {
|
|
131
|
+
if (flexDirection2 === "column" && insertionPosition === "before") {
|
|
132
|
+
return rectTop - top;
|
|
133
|
+
} else if (flexDirection2 === "column") {
|
|
134
|
+
return bottom - rectBottom;
|
|
135
|
+
} else if (flexDirection2 === "row" && insertionPosition === "before") {
|
|
136
|
+
return rectLeft - left;
|
|
137
|
+
} else if (flexDirection2 === "row") {
|
|
138
|
+
return right - rectRight;
|
|
139
|
+
}
|
|
140
|
+
};
|
|
141
|
+
function insertIntrinsicSizedComponent(container, containerChildren, idx, newComponent, insertionPosition, clientRect, dropRect) {
|
|
142
|
+
const {
|
|
143
|
+
style: { flexDirection: flexDirection2 }
|
|
144
|
+
} = getProps(container);
|
|
145
|
+
const [dimension, crossDimension, contraDirection] = getFlexDimensions(flexDirection2);
|
|
146
|
+
const { [crossDimension]: intrinsicCrossSize, [dimension]: intrinsicSize } = getIntrinsicSize(newComponent);
|
|
147
|
+
const path = getProp(containerChildren[idx], "path");
|
|
148
|
+
const placeholderSize = getLeadingPlaceholderSize(
|
|
149
|
+
flexDirection2,
|
|
150
|
+
insertionPosition,
|
|
151
|
+
clientRect,
|
|
152
|
+
dropRect
|
|
153
|
+
);
|
|
154
|
+
const [itemToInsert, size] = intrinsicCrossSize < clientRect[crossDimension] ? [
|
|
155
|
+
wrapIntrinsicSizeComponentWithFlexbox(
|
|
156
|
+
newComponent,
|
|
157
|
+
contraDirection,
|
|
158
|
+
path,
|
|
159
|
+
clientRect,
|
|
160
|
+
dropRect
|
|
161
|
+
),
|
|
162
|
+
intrinsicSize
|
|
163
|
+
] : [newComponent, void 0];
|
|
164
|
+
const placeholder = placeholderSize ? createPlaceHolder(path, placeholderSize, { flexGrow: 0, flexShrink: 0 }) : void 0;
|
|
165
|
+
if (intrinsicCrossSize > clientRect[crossDimension]) {
|
|
166
|
+
containerChildren = containerChildren.map((child) => {
|
|
167
|
+
if (getProp(child, "placeholder")) {
|
|
168
|
+
return child;
|
|
169
|
+
} else {
|
|
170
|
+
const { [crossDimension]: intrinsicCrossChildSize } = getIntrinsicSize(
|
|
171
|
+
child
|
|
172
|
+
);
|
|
173
|
+
if (intrinsicCrossChildSize && intrinsicCrossChildSize < intrinsicCrossSize) {
|
|
174
|
+
return wrapIntrinsicSizeComponentWithFlexbox(
|
|
175
|
+
child,
|
|
176
|
+
contraDirection,
|
|
177
|
+
getProp(child, "path")
|
|
178
|
+
);
|
|
179
|
+
} else {
|
|
180
|
+
return child;
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
});
|
|
184
|
+
}
|
|
185
|
+
return insertFlexComponent(
|
|
186
|
+
container,
|
|
187
|
+
containerChildren,
|
|
188
|
+
idx,
|
|
189
|
+
itemToInsert,
|
|
190
|
+
insertionPosition,
|
|
191
|
+
size,
|
|
192
|
+
clientRect,
|
|
193
|
+
placeholder
|
|
194
|
+
);
|
|
195
|
+
}
|
|
196
|
+
function insertFlexComponent(container, containerChildren, idx, newComponent, insertionPosition, size, targetRect, placeholder) {
|
|
197
|
+
const containerPath = getProp(container, "path");
|
|
198
|
+
let insertedIdx = 0;
|
|
199
|
+
const children = !containerChildren || containerChildren.length === 0 ? [newComponent] : containerChildren.reduce((arr, child, i) => {
|
|
200
|
+
if (idx === i) {
|
|
201
|
+
const [existingComponent, insertedComponent] = getStyledComponents(container, child, newComponent, targetRect);
|
|
202
|
+
if (insertionPosition === "before") {
|
|
203
|
+
if (placeholder) {
|
|
204
|
+
arr.push(placeholder, insertedComponent, existingComponent);
|
|
205
|
+
} else {
|
|
206
|
+
arr.push(insertedComponent, existingComponent);
|
|
207
|
+
}
|
|
208
|
+
} else {
|
|
209
|
+
if (placeholder) {
|
|
210
|
+
arr.push(existingComponent, insertedComponent, placeholder);
|
|
211
|
+
} else {
|
|
212
|
+
arr.push(existingComponent, insertedComponent);
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
insertedIdx = arr.indexOf(insertedComponent);
|
|
216
|
+
} else {
|
|
217
|
+
arr.push(child);
|
|
218
|
+
}
|
|
219
|
+
return arr;
|
|
220
|
+
}, []).map(
|
|
221
|
+
(child, i) => i < insertedIdx ? child : resetPath(child, `${containerPath}.${i}`)
|
|
222
|
+
);
|
|
223
|
+
return [insertedIdx, children];
|
|
224
|
+
}
|
|
225
|
+
function getStyledComponents(container, existingComponent, newComponent, targetRect) {
|
|
226
|
+
const id = uuid();
|
|
227
|
+
let { version = 0 } = getProps(newComponent);
|
|
228
|
+
version += 1;
|
|
229
|
+
if (typeOf(container) === "Flexbox") {
|
|
230
|
+
const [dim] = getManagedDimension(container.props.style);
|
|
231
|
+
const splitterSize = 6;
|
|
232
|
+
const size = { [dim]: (targetRect[dim] - splitterSize) / 2 };
|
|
233
|
+
const existingComponentStyle = getFlexOrIntrinsicStyle(
|
|
234
|
+
existingComponent,
|
|
235
|
+
dim,
|
|
236
|
+
size
|
|
237
|
+
);
|
|
238
|
+
const newComponentStyle = getFlexOrIntrinsicStyle(newComponent, dim, size);
|
|
239
|
+
return [
|
|
240
|
+
React.cloneElement(existingComponent, {
|
|
241
|
+
style: existingComponentStyle
|
|
242
|
+
}),
|
|
243
|
+
React.cloneElement(newComponent, {
|
|
244
|
+
id,
|
|
245
|
+
version,
|
|
246
|
+
style: newComponentStyle
|
|
247
|
+
})
|
|
248
|
+
];
|
|
249
|
+
} else {
|
|
250
|
+
const {
|
|
251
|
+
style: { left: _1, top: _2, flex: _3, ...style } = {
|
|
252
|
+
left: void 0,
|
|
253
|
+
top: void 0,
|
|
254
|
+
flex: void 0
|
|
255
|
+
}
|
|
256
|
+
} = getProps(newComponent);
|
|
257
|
+
return [
|
|
258
|
+
existingComponent,
|
|
259
|
+
React.cloneElement(newComponent, {
|
|
260
|
+
id,
|
|
261
|
+
version,
|
|
262
|
+
style: { ...style, flex: "1 1 0px" }
|
|
263
|
+
})
|
|
264
|
+
];
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
export { getInsertTabBeforeAfter, insertBesideChild, insertIntoContainer };
|
|
269
|
+
//# sourceMappingURL=insert-layout-element.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"insert-layout-element.js","sources":["../../src/layout-reducer/insert-layout-element.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { rectTuple, uuid } from \"@vuu-ui/vuu-utils\";\nimport React, { ReactElement } from \"react\";\nimport { DropPos } from \"../drag-drop\";\nimport { DropTarget } from \"../drag-drop/DropTarget\";\nimport { getProp, getProps, nextStep, resetPath, typeOf } from \"../utils\";\nimport {\n createPlaceHolder,\n flexDirection,\n getFlexDimensions,\n getFlexOrIntrinsicStyle,\n getIntrinsicSize,\n wrapIntrinsicSizeComponentWithFlexbox,\n} from \"./flexUtils\";\nimport { LayoutModel } from \"./layoutTypes\";\nimport {\n getDefaultTabLabel,\n getManagedDimension,\n LayoutProps,\n} from \"./layoutUtils\";\n\ntype insertionPosition = \"before\" | \"after\";\n\nexport function getInsertTabBeforeAfter(stack: LayoutModel, pos: DropPos) {\n const tabs = stack.props.children;\n const tabCount = tabs.length;\n const { index = -1, positionRelativeToTab = \"after\" } = pos.tab || {};\n return index === -1 || index >= tabCount\n ? [tabs[tabCount - 1], \"after\"]\n : [tabs[index] ?? null, positionRelativeToTab];\n}\n\nexport function insertIntoContainer(\n container: ReactElement,\n targetContainer: ReactElement,\n newComponent: ReactElement\n): ReactElement {\n const {\n active: containerActive,\n children: containerChildren = [],\n path: containerPath,\n } = getProps(container) as LayoutProps;\n\n const existingComponentPath = getProp(targetContainer, \"path\");\n const { idx, finalStep } = nextStep(\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n containerPath!,\n existingComponentPath,\n true\n );\n const [insertedIdx, children] = finalStep\n ? insertIntoChildren(container, containerChildren, newComponent)\n : [\n containerActive,\n containerChildren?.map((child, index) =>\n index === idx\n ? (insertIntoContainer(\n child,\n targetContainer,\n newComponent\n ) as ReactElement)\n : child\n ),\n ];\n const active =\n typeOf(container) === \"Stack\"\n ? Array.isArray(insertedIdx)\n ? (insertedIdx[0] as number)\n : insertedIdx\n : containerActive;\n\n return React.cloneElement(container, { active }, children);\n}\n\nconst getDefaultTitle = (\n containerType: string | undefined,\n component: ReactElement,\n index: number,\n existingLabels: string[]\n) =>\n containerType === \"Stack\"\n ? getDefaultTabLabel(component, index, existingLabels)\n : undefined;\n\nconst getChildrenTitles = (children: ReactElement[]) =>\n children.map((child) => child.props.title);\n\nfunction insertIntoChildren(\n container: ReactElement,\n containerChildren: ReactElement[],\n newComponent: ReactElement\n): [number, ReactElement[]] {\n const containerPath = getProp(container, \"path\");\n const count = containerChildren?.length;\n const {\n id = uuid(),\n title = getDefaultTitle(\n typeOf(container),\n newComponent,\n count ?? 0,\n getChildrenTitles(containerChildren)\n ),\n } = getProps(newComponent);\n\n if (count) {\n return [\n count,\n containerChildren.concat(\n resetPath(newComponent, `${containerPath}.${count}`, {\n id,\n key: id,\n title,\n })\n ),\n ];\n } else {\n return [0, [resetPath(newComponent, `${containerPath}.0`, { id, title })]];\n }\n}\n\nexport function insertBesideChild(\n container: ReactElement,\n existingComponent: any,\n newComponent: any,\n insertionPosition: insertionPosition,\n pos?: DropPos,\n clientRect?: any,\n dropRect?: any\n): ReactElement {\n const {\n active: containerActive,\n children: containerChildren,\n path: containerPath,\n } = getProps(container);\n\n const existingComponentPath = getProp(existingComponent, \"path\");\n const { idx, finalStep } = nextStep(containerPath, existingComponentPath);\n const [insertedIdx, children] = finalStep\n ? updateChildren(\n container,\n containerChildren,\n idx,\n newComponent,\n insertionPosition,\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n pos!,\n clientRect,\n dropRect\n )\n : [\n containerActive,\n containerChildren.map((child: ReactElement, index: number) =>\n index === idx\n ? insertBesideChild(\n child,\n existingComponent,\n newComponent,\n insertionPosition,\n pos,\n clientRect,\n dropRect\n )\n : child\n ),\n ];\n\n const active = typeOf(container) === \"Stack\" ? insertedIdx : containerActive;\n return React.cloneElement(container, { active }, children);\n}\n\nfunction updateChildren(\n container: LayoutModel,\n containerChildren: ReactElement[],\n idx: number,\n newComponent: ReactElement,\n insertionPosition: insertionPosition,\n pos: DropPos,\n clientRect: DropTarget[\"clientRect\"],\n dropRect: DropTarget[\"dropRect\"]\n) {\n const intrinsicSize = getIntrinsicSize(newComponent);\n if (intrinsicSize?.width && intrinsicSize?.height) {\n return insertIntrinsicSizedComponent(\n container,\n containerChildren,\n idx,\n newComponent,\n insertionPosition,\n clientRect,\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n dropRect!\n );\n } else {\n return insertFlexComponent(\n container,\n containerChildren,\n idx,\n newComponent,\n insertionPosition,\n pos?.width || pos?.height,\n clientRect\n );\n }\n}\n\nconst getLeadingPlaceholderSize = (\n flexDirection: flexDirection,\n insertionPosition: insertionPosition,\n { top, right, bottom, left }: DropTarget[\"clientRect\"],\n [rectLeft, rectTop, rectRight, rectBottom]: rectTuple\n) => {\n if (flexDirection === \"column\" && insertionPosition === \"before\") {\n return rectTop - top;\n } else if (flexDirection === \"column\") {\n return bottom - rectBottom;\n } else if (flexDirection === \"row\" && insertionPosition === \"before\") {\n return rectLeft - left;\n } else if (flexDirection === \"row\") {\n return right - rectRight;\n }\n};\n\nfunction insertIntrinsicSizedComponent(\n container: LayoutModel,\n containerChildren: ReactElement[],\n idx: number,\n newComponent: ReactElement,\n insertionPosition: insertionPosition,\n clientRect: DropTarget[\"clientRect\"],\n dropRect: rectTuple\n) {\n const {\n style: { flexDirection },\n } = getProps(container);\n const [dimension, crossDimension, contraDirection] =\n getFlexDimensions(flexDirection);\n const { [crossDimension]: intrinsicCrossSize, [dimension]: intrinsicSize } =\n getIntrinsicSize(newComponent) as { height: number; width: number };\n const path = getProp(containerChildren[idx], \"path\");\n\n const placeholderSize = getLeadingPlaceholderSize(\n flexDirection,\n insertionPosition,\n clientRect,\n dropRect\n );\n\n const [itemToInsert, size] =\n intrinsicCrossSize < clientRect[crossDimension]\n ? [\n wrapIntrinsicSizeComponentWithFlexbox(\n newComponent,\n contraDirection,\n path,\n clientRect,\n dropRect\n ),\n intrinsicSize,\n ]\n : [newComponent, undefined];\n\n const placeholder = placeholderSize\n ? createPlaceHolder(path, placeholderSize, { flexGrow: 0, flexShrink: 0 })\n : undefined;\n\n if (intrinsicCrossSize > clientRect[crossDimension]) {\n containerChildren = containerChildren.map((child) => {\n if (getProp(child, \"placeholder\")) {\n return child;\n } else {\n const { [crossDimension]: intrinsicCrossChildSize } = getIntrinsicSize(\n child\n ) as {\n height: number;\n width: number;\n };\n if (\n intrinsicCrossChildSize &&\n intrinsicCrossChildSize < intrinsicCrossSize\n ) {\n return wrapIntrinsicSizeComponentWithFlexbox(\n child,\n contraDirection,\n getProp(child, \"path\")\n );\n } else {\n return child;\n }\n }\n });\n }\n\n return insertFlexComponent(\n container,\n containerChildren,\n idx,\n itemToInsert,\n insertionPosition,\n size,\n clientRect,\n placeholder\n );\n}\n\nfunction insertFlexComponent(\n container: LayoutModel,\n containerChildren: ReactElement[],\n idx: number,\n newComponent: ReactElement,\n insertionPosition: \"before\" | \"after\",\n size: number | undefined,\n targetRect: DropTarget[\"clientRect\"],\n placeholder?: ReactElement\n) {\n const containerPath = getProp(container, \"path\");\n let insertedIdx = 0;\n const children =\n !containerChildren || containerChildren.length === 0\n ? [newComponent]\n : containerChildren\n .reduce<ReactElement[]>((arr, child, i) => {\n if (idx === i) {\n const [existingComponent, insertedComponent] =\n getStyledComponents(container, child, newComponent, targetRect);\n if (insertionPosition === \"before\") {\n if (placeholder) {\n arr.push(placeholder, insertedComponent, existingComponent);\n } else {\n arr.push(insertedComponent, existingComponent);\n }\n } else {\n if (placeholder) {\n arr.push(existingComponent, insertedComponent, placeholder);\n } else {\n arr.push(existingComponent, insertedComponent);\n }\n }\n insertedIdx = arr.indexOf(insertedComponent);\n } else {\n arr.push(child);\n }\n return arr;\n }, [])\n .map((child, i) =>\n i < insertedIdx ? child : resetPath(child, `${containerPath}.${i}`)\n );\n\n return [insertedIdx, children];\n}\n\nfunction getStyledComponents(\n container: LayoutModel,\n existingComponent: ReactElement,\n newComponent: ReactElement,\n targetRect: DropTarget[\"clientRect\"]\n): [ReactElement, ReactElement] {\n const id = uuid();\n let { version = 0 } = getProps(newComponent);\n version += 1;\n if (typeOf(container) === \"Flexbox\") {\n const [dim] = getManagedDimension(container.props.style);\n const splitterSize = 6;\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n const size = { [dim]: (targetRect[dim] - splitterSize) / 2 };\n const existingComponentStyle = getFlexOrIntrinsicStyle(\n existingComponent,\n dim,\n size\n );\n const newComponentStyle = getFlexOrIntrinsicStyle(newComponent, dim, size);\n\n return [\n React.cloneElement(existingComponent, {\n style: existingComponentStyle,\n }),\n React.cloneElement(newComponent, {\n id,\n version,\n style: newComponentStyle,\n }),\n ];\n } else {\n const {\n style: { left: _1, top: _2, flex: _3, ...style } = {\n left: undefined,\n top: undefined,\n flex: undefined,\n },\n } = getProps(newComponent);\n return [\n existingComponent,\n React.cloneElement(newComponent, {\n id,\n version,\n style: { ...style, flex: \"1 1 0px\" },\n }),\n ];\n }\n}\n"],"names":["flexDirection"],"mappings":"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"}
|
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { isContainer } from '../registry/ComponentRegistry.js';
|
|
3
|
+
import { followPath, findTarget, followPathToParent } from '../utils/pathUtils.js';
|
|
4
|
+
import { getProps, getProp } from '../utils/propUtils.js';
|
|
5
|
+
import { typeOf } from '../utils/typeOf.js';
|
|
6
|
+
import { getIntrinsicSize } from './flexUtils.js';
|
|
7
|
+
import { getInsertTabBeforeAfter, insertIntoContainer, insertBesideChild } from './insert-layout-element.js';
|
|
8
|
+
import { moveChild } from './move-layout-element.js';
|
|
9
|
+
import { LayoutActionType } from './layoutTypes.js';
|
|
10
|
+
import { removeChild } from './remove-layout-element.js';
|
|
11
|
+
import { replaceChild, swapChild, _replaceChild } from './replace-layout-element.js';
|
|
12
|
+
import { resizeFlexChild, resizeFlexChildren } from './resize-flex-children.js';
|
|
13
|
+
import { wrap } from './wrap-layout-element.js';
|
|
14
|
+
|
|
15
|
+
const layoutReducer = (state, action) => {
|
|
16
|
+
switch (action.type) {
|
|
17
|
+
case LayoutActionType.ADD:
|
|
18
|
+
return addChild(state, action);
|
|
19
|
+
case LayoutActionType.DRAG_DROP:
|
|
20
|
+
return dragDrop(state, action);
|
|
21
|
+
case LayoutActionType.MAXIMIZE:
|
|
22
|
+
return setChildProps(state, action);
|
|
23
|
+
case LayoutActionType.REMOVE:
|
|
24
|
+
return removeChild(state, action);
|
|
25
|
+
case LayoutActionType.REPLACE:
|
|
26
|
+
return replaceChild(state, action);
|
|
27
|
+
case LayoutActionType.SET_PROP:
|
|
28
|
+
return setProp(state, action);
|
|
29
|
+
case LayoutActionType.SET_PROPS:
|
|
30
|
+
return setProps(state, action);
|
|
31
|
+
case LayoutActionType.SET_TITLE:
|
|
32
|
+
return setProp(state, {
|
|
33
|
+
type: "set-prop",
|
|
34
|
+
path: action.path,
|
|
35
|
+
propName: "title",
|
|
36
|
+
propValue: action.title
|
|
37
|
+
});
|
|
38
|
+
case LayoutActionType.SPLITTER_RESIZE:
|
|
39
|
+
return resizeFlexChildren(state, action);
|
|
40
|
+
case LayoutActionType.LAYOUT_RESIZE:
|
|
41
|
+
return resizeFlexChild(state, action);
|
|
42
|
+
case LayoutActionType.SWITCH_TAB:
|
|
43
|
+
return switchTab(state, action);
|
|
44
|
+
case LayoutActionType.MOVE_CHILD:
|
|
45
|
+
return moveChild(state, action);
|
|
46
|
+
default:
|
|
47
|
+
return state;
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
const switchTab = (state, { path, nextIdx }) => {
|
|
51
|
+
const target = followPath(state, path, true);
|
|
52
|
+
const replacement = React.cloneElement(target, {
|
|
53
|
+
active: nextIdx
|
|
54
|
+
});
|
|
55
|
+
return swapChild(state, target, replacement);
|
|
56
|
+
};
|
|
57
|
+
const setProp = (state, { path, propName, propValue }) => {
|
|
58
|
+
const target = followPath(state, path, true);
|
|
59
|
+
const replacement = React.cloneElement(target, {
|
|
60
|
+
[propName]: propValue
|
|
61
|
+
});
|
|
62
|
+
return swapChild(state, target, replacement);
|
|
63
|
+
};
|
|
64
|
+
const setProps = (state, { path, props }) => {
|
|
65
|
+
const target = followPath(state, path, true);
|
|
66
|
+
const replacement = React.cloneElement(target, props);
|
|
67
|
+
return swapChild(state, target, replacement);
|
|
68
|
+
};
|
|
69
|
+
const setChildProps = (state, { path, type }) => {
|
|
70
|
+
if (path) {
|
|
71
|
+
const target = followPath(state, path, true);
|
|
72
|
+
return swapChild(state, target, target, type);
|
|
73
|
+
} else {
|
|
74
|
+
return state;
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
|
+
const dragDrop = (layoutRoot, action) => {
|
|
78
|
+
const {
|
|
79
|
+
draggedReactElement: newComponent,
|
|
80
|
+
dragInstructions,
|
|
81
|
+
dropTarget
|
|
82
|
+
} = action;
|
|
83
|
+
const existingComponent = dropTarget.component;
|
|
84
|
+
const { pos } = dropTarget;
|
|
85
|
+
const destinationTabstrip = pos?.position?.Header && typeOf(existingComponent) === "Stack";
|
|
86
|
+
const { id, version } = getProps(newComponent);
|
|
87
|
+
const intrinsicSize = getIntrinsicSize(newComponent);
|
|
88
|
+
let newLayoutRoot;
|
|
89
|
+
if (destinationTabstrip) {
|
|
90
|
+
const [targetTab, insertionPosition] = getInsertTabBeforeAfter(
|
|
91
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
92
|
+
existingComponent,
|
|
93
|
+
pos
|
|
94
|
+
);
|
|
95
|
+
if (targetTab === void 0) {
|
|
96
|
+
newLayoutRoot = insertIntoContainer(
|
|
97
|
+
layoutRoot,
|
|
98
|
+
existingComponent,
|
|
99
|
+
newComponent
|
|
100
|
+
);
|
|
101
|
+
} else {
|
|
102
|
+
newLayoutRoot = insertBesideChild(
|
|
103
|
+
layoutRoot,
|
|
104
|
+
targetTab,
|
|
105
|
+
newComponent,
|
|
106
|
+
insertionPosition
|
|
107
|
+
);
|
|
108
|
+
}
|
|
109
|
+
} else if (!intrinsicSize && pos?.position?.Centre) {
|
|
110
|
+
newLayoutRoot = _replaceChild(
|
|
111
|
+
layoutRoot,
|
|
112
|
+
existingComponent,
|
|
113
|
+
newComponent
|
|
114
|
+
);
|
|
115
|
+
} else {
|
|
116
|
+
newLayoutRoot = dropLayoutIntoContainer(
|
|
117
|
+
layoutRoot,
|
|
118
|
+
dropTarget,
|
|
119
|
+
newComponent
|
|
120
|
+
);
|
|
121
|
+
}
|
|
122
|
+
if (dragInstructions.DoNotRemove) {
|
|
123
|
+
return newLayoutRoot;
|
|
124
|
+
}
|
|
125
|
+
const finalTarget = findTarget(
|
|
126
|
+
newLayoutRoot,
|
|
127
|
+
(props) => props.id === id && props.version === version
|
|
128
|
+
);
|
|
129
|
+
const finalPath = getProp(finalTarget, "path");
|
|
130
|
+
return removeChild(newLayoutRoot, { path: finalPath, type: "remove" });
|
|
131
|
+
};
|
|
132
|
+
const addChild = (layoutRoot, { path: containerPath, component }) => {
|
|
133
|
+
return insertIntoContainer(
|
|
134
|
+
layoutRoot,
|
|
135
|
+
followPath(layoutRoot, containerPath),
|
|
136
|
+
component
|
|
137
|
+
);
|
|
138
|
+
};
|
|
139
|
+
const dropLayoutIntoContainer = (layoutRoot, dropTarget, newComponent) => {
|
|
140
|
+
const { component, pos, clientRect, dropRect } = dropTarget;
|
|
141
|
+
const existingComponent = component;
|
|
142
|
+
const existingComponentPath = getProp(existingComponent, "path");
|
|
143
|
+
if (existingComponentPath === "0.0") {
|
|
144
|
+
return wrap(
|
|
145
|
+
layoutRoot,
|
|
146
|
+
existingComponent,
|
|
147
|
+
newComponent,
|
|
148
|
+
pos
|
|
149
|
+
);
|
|
150
|
+
}
|
|
151
|
+
const targetContainer = followPathToParent(
|
|
152
|
+
layoutRoot,
|
|
153
|
+
existingComponentPath
|
|
154
|
+
);
|
|
155
|
+
if (withTheGrain(pos, targetContainer)) {
|
|
156
|
+
const insertionPosition = pos.position.SouthOrEast ? "after" : "before";
|
|
157
|
+
return insertBesideChild(
|
|
158
|
+
layoutRoot,
|
|
159
|
+
existingComponent,
|
|
160
|
+
newComponent,
|
|
161
|
+
insertionPosition,
|
|
162
|
+
pos,
|
|
163
|
+
clientRect,
|
|
164
|
+
dropRect
|
|
165
|
+
);
|
|
166
|
+
}
|
|
167
|
+
if (!withTheGrain(pos, targetContainer)) {
|
|
168
|
+
return wrap(
|
|
169
|
+
layoutRoot,
|
|
170
|
+
existingComponent,
|
|
171
|
+
newComponent,
|
|
172
|
+
pos,
|
|
173
|
+
clientRect,
|
|
174
|
+
dropRect
|
|
175
|
+
);
|
|
176
|
+
}
|
|
177
|
+
if (isContainer(typeOf(targetContainer))) {
|
|
178
|
+
return wrap(layoutRoot, existingComponent, newComponent, pos);
|
|
179
|
+
}
|
|
180
|
+
throw Error(`no support right now for position = ${pos.position}`);
|
|
181
|
+
};
|
|
182
|
+
const withTheGrain = (pos, container) => {
|
|
183
|
+
if (pos.position.Centre) {
|
|
184
|
+
return isTerrace(container) || isTower(container);
|
|
185
|
+
}
|
|
186
|
+
return pos.position.NorthOrSouth ? isTower(container) : pos.position.EastOrWest ? isTerrace(container) : false;
|
|
187
|
+
};
|
|
188
|
+
const isTower = (container) => {
|
|
189
|
+
return typeOf(container) === "Flexbox" && container.props.style.flexDirection === "column";
|
|
190
|
+
};
|
|
191
|
+
const isTerrace = (container) => {
|
|
192
|
+
return typeOf(container) === "Flexbox" && container.props.style.flexDirection !== "column";
|
|
193
|
+
};
|
|
194
|
+
|
|
195
|
+
export { layoutReducer };
|
|
196
|
+
//# sourceMappingURL=layout-reducer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"layout-reducer.js","sources":["../../src/layout-reducer/layout-reducer.ts"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport { DropPos } from \"../drag-drop/dragDropTypes\";\nimport { DropTarget } from \"../drag-drop/DropTarget\";\nimport { isContainer } from \"../registry/ComponentRegistry\";\nimport {\n findTarget,\n followPath,\n followPathToParent,\n getProp,\n getProps,\n typeOf,\n} from \"../utils\";\nimport { getIntrinsicSize } from \"./flexUtils\";\nimport {\n getInsertTabBeforeAfter,\n insertBesideChild,\n insertIntoContainer,\n} from \"./insert-layout-element\";\nimport { moveChild } from \"./move-layout-element\";\nimport {\n AddAction,\n DragDropAction,\n LayoutActionType,\n LayoutReducerAction,\n MaximizeAction,\n SetPropAction,\n SetPropsAction,\n SwitchTabAction,\n} from \"./layoutTypes\";\nimport { LayoutProps } from \"./layoutUtils\";\nimport { removeChild } from \"./remove-layout-element\";\nimport {\n replaceChild,\n swapChild,\n _replaceChild,\n} from \"./replace-layout-element\";\nimport { resizeFlexChild, resizeFlexChildren } from \"./resize-flex-children\";\nimport { wrap } from \"./wrap-layout-element\";\n\nexport const layoutReducer = (\n state: ReactElement,\n action: LayoutReducerAction\n): ReactElement => {\n switch (action.type) {\n case LayoutActionType.ADD:\n return addChild(state, action);\n case LayoutActionType.DRAG_DROP:\n return dragDrop(state, action);\n case LayoutActionType.MAXIMIZE:\n return setChildProps(state, action);\n case LayoutActionType.REMOVE:\n return removeChild(state, action);\n case LayoutActionType.REPLACE:\n return replaceChild(state, action);\n case LayoutActionType.SET_PROP:\n return setProp(state, action);\n case LayoutActionType.SET_PROPS:\n return setProps(state, action);\n case LayoutActionType.SET_TITLE:\n return setProp(state, {\n type: \"set-prop\",\n path: action.path,\n propName: \"title\",\n propValue: action.title,\n });\n case LayoutActionType.SPLITTER_RESIZE:\n return resizeFlexChildren(state, action);\n case LayoutActionType.LAYOUT_RESIZE:\n return resizeFlexChild(state, action);\n case LayoutActionType.SWITCH_TAB:\n return switchTab(state, action);\n case LayoutActionType.MOVE_CHILD:\n return moveChild(state, action);\n default:\n return state;\n }\n};\n\nconst switchTab = (state: ReactElement, { path, nextIdx }: SwitchTabAction) => {\n const target = followPath(state, path, true);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const replacement = React.cloneElement<any>(target, {\n active: nextIdx,\n });\n return swapChild(state, target, replacement);\n};\n\nconst setProp = (\n state: ReactElement,\n { path, propName, propValue }: SetPropAction\n) => {\n const target = followPath(state, path, true);\n const replacement = React.cloneElement(target, {\n [propName]: propValue,\n });\n return swapChild(state, target, replacement);\n};\n\nconst setProps = (state: ReactElement, { path, props }: SetPropsAction) => {\n const target = followPath(state, path, true);\n const replacement = React.cloneElement(target, props);\n return swapChild(state, target, replacement);\n};\n\nconst setChildProps = (state: ReactElement, { path, type }: MaximizeAction) => {\n if (path) {\n const target = followPath(state, path, true);\n return swapChild(state, target, target, type);\n } else {\n return state;\n }\n};\n\nconst dragDrop = (\n layoutRoot: ReactElement,\n action: DragDropAction\n): ReactElement => {\n const {\n draggedReactElement: newComponent,\n dragInstructions,\n dropTarget,\n } = action;\n const existingComponent = dropTarget.component as ReactElement;\n const { pos } = dropTarget;\n const destinationTabstrip =\n pos?.position?.Header && typeOf(existingComponent) === \"Stack\";\n const { id, version } = getProps(newComponent);\n const intrinsicSize = getIntrinsicSize(newComponent);\n let newLayoutRoot: ReactElement;\n if (destinationTabstrip) {\n const [targetTab, insertionPosition] = getInsertTabBeforeAfter(\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n existingComponent!,\n pos\n );\n if (targetTab === undefined) {\n newLayoutRoot = insertIntoContainer(\n layoutRoot,\n existingComponent,\n newComponent\n );\n } else {\n newLayoutRoot = insertBesideChild(\n layoutRoot,\n targetTab,\n newComponent,\n insertionPosition\n );\n }\n } else if (!intrinsicSize && pos?.position?.Centre) {\n newLayoutRoot = _replaceChild(\n layoutRoot,\n existingComponent as ReactElement,\n newComponent\n );\n } else {\n newLayoutRoot = dropLayoutIntoContainer(\n layoutRoot,\n dropTarget as DropTarget,\n newComponent\n );\n }\n\n if (dragInstructions.DoNotRemove) {\n return newLayoutRoot;\n }\n\n const finalTarget = findTarget(\n newLayoutRoot,\n (props: LayoutProps) => props.id === id && props.version === version\n ) as ReactElement;\n const finalPath = getProp(finalTarget, \"path\");\n return removeChild(newLayoutRoot, { path: finalPath, type: \"remove\" });\n};\n\nconst addChild = (\n layoutRoot: ReactElement,\n { path: containerPath, component }: AddAction\n) => {\n return insertIntoContainer(\n layoutRoot,\n followPath(layoutRoot, containerPath) as ReactElement,\n component\n );\n};\n\nconst dropLayoutIntoContainer = (\n layoutRoot: ReactElement,\n dropTarget: DropTarget,\n newComponent: ReactElement\n): ReactElement => {\n const { component, pos, clientRect, dropRect } = dropTarget;\n const existingComponent = component as ReactElement;\n\n const existingComponentPath = getProp(existingComponent, \"path\");\n\n if (existingComponentPath === \"0.0\") {\n return wrap(\n layoutRoot,\n existingComponent as ReactElement,\n newComponent,\n pos\n );\n }\n\n const targetContainer = followPathToParent(\n layoutRoot,\n existingComponentPath\n ) as ReactElement;\n\n if (withTheGrain(pos, targetContainer)) {\n const insertionPosition = pos.position.SouthOrEast ? \"after\" : \"before\";\n return insertBesideChild(\n layoutRoot,\n existingComponent,\n newComponent,\n insertionPosition,\n pos,\n clientRect,\n dropRect\n );\n }\n\n if (!withTheGrain(pos, targetContainer)) {\n return wrap(\n layoutRoot,\n existingComponent,\n newComponent,\n pos,\n clientRect,\n dropRect\n );\n }\n\n if (isContainer(typeOf(targetContainer) as string)) {\n return wrap(layoutRoot, existingComponent, newComponent, pos);\n }\n\n throw Error(`no support right now for position = ${pos.position}`);\n};\n\nconst withTheGrain = (pos: DropPos, container: ReactElement) => {\n if (pos.position.Centre) {\n return isTerrace(container) || isTower(container);\n }\n\n return pos.position.NorthOrSouth\n ? isTower(container)\n : pos.position.EastOrWest\n ? isTerrace(container)\n : false;\n};\n\nconst isTower = (container: ReactElement) => {\n return (\n typeOf(container) === \"Flexbox\" &&\n container.props.style.flexDirection === \"column\"\n );\n};\n\nconst isTerrace = (container: ReactElement) => {\n return (\n typeOf(container) === \"Flexbox\" &&\n container.props.style.flexDirection !== \"column\"\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
const LayoutActionType = {
|
|
2
|
+
ADD: "add",
|
|
3
|
+
DRAG_START: "drag-start",
|
|
4
|
+
DRAG_DROP: "drag-drop",
|
|
5
|
+
LAYOUT_RESIZE: "layout-resize",
|
|
6
|
+
MAXIMIZE: "maximize",
|
|
7
|
+
MINIMIZE: "minimize",
|
|
8
|
+
MOVE_CHILD: "move-child",
|
|
9
|
+
QUERY: "query",
|
|
10
|
+
REMOVE: "remove",
|
|
11
|
+
REPLACE: "replace",
|
|
12
|
+
RESTORE: "restore",
|
|
13
|
+
SAVE: "save",
|
|
14
|
+
SET_PROP: "set-prop",
|
|
15
|
+
SET_PROPS: "set-props",
|
|
16
|
+
SET_TITLE: "set-title",
|
|
17
|
+
SPLITTER_RESIZE: "splitter-resize",
|
|
18
|
+
SWITCH_TAB: "switch-tab",
|
|
19
|
+
TEAROUT: "tearout"
|
|
20
|
+
};
|
|
21
|
+
const isApplicationLevelChange = (layoutChangeReason) => [
|
|
22
|
+
"switch-active-layout",
|
|
23
|
+
"open-layout",
|
|
24
|
+
"close-layout",
|
|
25
|
+
"rename-layout"
|
|
26
|
+
].includes(layoutChangeReason);
|
|
27
|
+
const isLayoutLevelChange = (layoutChangeReason) => [
|
|
28
|
+
"switch-active-tab",
|
|
29
|
+
"edit-feature-title",
|
|
30
|
+
"save-feature-props",
|
|
31
|
+
"remove-component",
|
|
32
|
+
"resize-component",
|
|
33
|
+
"drag-drop-operation"
|
|
34
|
+
].includes(layoutChangeReason);
|
|
35
|
+
|
|
36
|
+
export { LayoutActionType, isApplicationLevelChange, isLayoutLevelChange };
|
|
37
|
+
//# sourceMappingURL=layoutTypes.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"layoutTypes.js","sources":["../../src/layout-reducer/layoutTypes.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { NamedFilter } from \"@vuu-ui/vuu-filter-types\";\nimport { CSSProperties, ReactElement } from \"react\";\nimport { DragDropRect, DragInstructions } from \"../drag-drop\";\nimport { DropTarget } from \"../drag-drop/DropTarget\";\nimport { ContributionLocation } from \"../layout-view-actions\";\n\nexport interface WithProps {\n props?: { [key: string]: any };\n}\n\nexport interface WithType {\n props?: any;\n title?: string;\n type: string;\n}\n\nexport interface LayoutRoot extends WithProps {\n active?: number;\n children?: ReactElement[];\n type: string;\n}\n\nexport type ValueOf<T> = T[keyof T];\nexport interface ApplicationSettings {\n leftNav?: {\n activeTabIndex: number;\n expanded: boolean;\n };\n /**\n * filters are keyed by MODULE:tablename\n */\n filters?: { [key: string]: NamedFilter[] };\n}\nexport type ApplicationSetting = ValueOf<ApplicationSettings>;\n\nexport interface ApplicationJSON {\n layout: LayoutJSON;\n settings?: ApplicationSettings;\n}\n\nexport interface LayoutJSON extends WithType {\n active?: number;\n children?: LayoutJSON[];\n id?: string;\n props?: { [key: string]: any };\n state?: any;\n type: string;\n style?: CSSProperties;\n}\n\nexport interface WithActive {\n active?: number;\n}\n\nexport type LayoutModel = LayoutRoot | ReactElement | WithType;\n\nexport type layoutType = \"Flexbox\" | \"View\" | \"DraggableLayout\" | \"Stack\";\n\n// TODO duplicated in layout-action\nexport const LayoutActionType = {\n ADD: \"add\",\n DRAG_START: \"drag-start\",\n DRAG_DROP: \"drag-drop\",\n LAYOUT_RESIZE: \"layout-resize\",\n MAXIMIZE: \"maximize\",\n MINIMIZE: \"minimize\",\n MOVE_CHILD: \"move-child\",\n QUERY: \"query\",\n REMOVE: \"remove\",\n REPLACE: \"replace\",\n RESTORE: \"restore\",\n SAVE: \"save\",\n SET_PROP: \"set-prop\",\n SET_PROPS: \"set-props\",\n SET_TITLE: \"set-title\",\n SPLITTER_RESIZE: \"splitter-resize\",\n SWITCH_TAB: \"switch-tab\",\n TEAROUT: \"tearout\",\n} as const;\n\nexport type AddAction = {\n component: any;\n path: string;\n type: typeof LayoutActionType.ADD;\n};\n\nexport type DragDropAction = {\n draggedReactElement: ReactElement;\n dragInstructions: any;\n dropTarget: Partial<DropTarget>;\n type: typeof LayoutActionType.DRAG_DROP;\n};\n\nexport type MaximizeAction = {\n path?: string;\n type: typeof LayoutActionType.MAXIMIZE;\n};\n\nexport type MinimizeAction = {\n path?: string;\n type: typeof LayoutActionType.MINIMIZE;\n};\n\nexport type MoveChildAction = {\n fromIndex: number;\n toIndex: number;\n path: string;\n type: typeof LayoutActionType.MOVE_CHILD;\n};\n\nexport type QueryAction = {\n path?: string;\n query: string;\n type: typeof LayoutActionType.QUERY;\n};\n\nexport type RemoveAction = {\n path?: string;\n type: typeof LayoutActionType.REMOVE;\n};\n\nexport type ReplaceAction = {\n replacement: any;\n target: any;\n type: typeof LayoutActionType.REPLACE;\n};\n\nexport type RestoreAction = {\n path?: string;\n type: typeof LayoutActionType.RESTORE;\n};\n\nexport type SetPropAction = {\n path: string;\n propName: string;\n propValue: string | number | boolean;\n type: typeof LayoutActionType.SET_PROP;\n};\n\nexport type SetPropsAction = {\n path: string;\n props: { [key: string]: unknown };\n type: typeof LayoutActionType.SET_PROPS;\n};\n\nexport type SetTitleAction = {\n path: string;\n title: string;\n type: typeof LayoutActionType.SET_TITLE;\n};\n\nexport type SplitterResizeAction = {\n path: string;\n sizes: { currentSize: number; flexBasis: number }[];\n type: typeof LayoutActionType.SPLITTER_RESIZE;\n};\n\nexport type LayoutResizeAction = {\n path: string;\n size: number;\n type: typeof LayoutActionType.LAYOUT_RESIZE;\n};\n\nexport type SwitchTabAction = {\n id?: string;\n nextIdx: number;\n path: string;\n type: typeof LayoutActionType.SWITCH_TAB;\n};\n\nexport type TearoutAction = {\n path?: string;\n type: typeof LayoutActionType.TEAROUT;\n};\n\nexport type LayoutReducerAction =\n | AddAction\n | DragDropAction\n | LayoutResizeAction\n | MaximizeAction\n | MinimizeAction\n | MoveChildAction\n | RemoveAction\n | ReplaceAction\n | RestoreAction\n | SetPropAction\n | SetPropsAction\n | SetTitleAction\n | SplitterResizeAction\n | SwitchTabAction;\n\nexport type SaveAction = {\n type: typeof LayoutActionType.SAVE;\n};\n\nexport type AddToolbarContributionViewAction = {\n content: ReactElement;\n location: ContributionLocation;\n type: \"add-toolbar-contribution\";\n};\n\nexport type RemoveToolbarContributionViewAction = {\n location: ContributionLocation;\n type: \"remove-toolbar-contribution\";\n};\n\nexport type MousedownViewAction = {\n preDragActivity?: any;\n index?: number;\n type: \"mousedown\";\n};\n\nexport type DragStartAction = {\n payload?: ReactElement;\n dragContainerPath?: string;\n dragElement?: HTMLElement;\n dragRect: DragDropRect;\n dropTargets?: string[];\n evt: MouseEvent;\n instructions?: DragInstructions;\n path: string;\n type: typeof LayoutActionType.DRAG_START;\n};\n\nexport type LayoutLevelChange =\n | \"switch-active-tab\"\n | \"edit-feature-title\"\n | \"save-feature-props\"\n | \"resize-component\"\n | \"remove-component\"\n | \"drag-drop-operation\";\n\nexport type ApplicationLevelChange =\n | \"switch-active-layout\"\n | \"open-layout\"\n | \"close-layout\"\n | \"rename-layout\"\n | \"resize-application-chrome\";\n\nexport type LayoutChangeReason = LayoutLevelChange | ApplicationLevelChange;\n\nexport type LayoutChangeHandler = (\n layout: LayoutJSON,\n layoutChangeReason: LayoutChangeReason\n) => void;\n\nexport const isApplicationLevelChange = (\n layoutChangeReason: LayoutChangeReason\n): layoutChangeReason is ApplicationLevelChange =>\n [\n \"switch-active-layout\",\n \"open-layout\",\n \"close-layout\",\n \"rename-layout\",\n ].includes(layoutChangeReason);\n\nexport const isLayoutLevelChange = (\n layoutChangeReason: LayoutChangeReason\n): layoutChangeReason is LayoutLevelChange =>\n [\n \"switch-active-tab\",\n \"edit-feature-title\",\n \"save-feature-props\",\n \"remove-component\",\n \"resize-component\",\n \"drag-drop-operation\",\n ].includes(layoutChangeReason);\n"],"names":[],"mappings":"AA4DO,MAAM,gBAAmB,GAAA;AAAA,EAC9B,GAAK,EAAA,KAAA;AAAA,EACL,UAAY,EAAA,YAAA;AAAA,EACZ,SAAW,EAAA,WAAA;AAAA,EACX,aAAe,EAAA,eAAA;AAAA,EACf,QAAU,EAAA,UAAA;AAAA,EACV,QAAU,EAAA,UAAA;AAAA,EACV,UAAY,EAAA,YAAA;AAAA,EACZ,KAAO,EAAA,OAAA;AAAA,EACP,MAAQ,EAAA,QAAA;AAAA,EACR,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,IAAM,EAAA,MAAA;AAAA,EACN,QAAU,EAAA,UAAA;AAAA,EACV,SAAW,EAAA,WAAA;AAAA,EACX,SAAW,EAAA,WAAA;AAAA,EACX,eAAiB,EAAA,iBAAA;AAAA,EACjB,UAAY,EAAA,YAAA;AAAA,EACZ,OAAS,EAAA,SAAA;AACX,EAAA;AAwKa,MAAA,wBAAA,GAA2B,CACtC,kBAEA,KAAA;AAAA,EACE,sBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AACF,CAAA,CAAE,SAAS,kBAAkB,EAAA;AAElB,MAAA,mBAAA,GAAsB,CACjC,kBAEA,KAAA;AAAA,EACE,mBAAA;AAAA,EACA,oBAAA;AAAA,EACA,oBAAA;AAAA,EACA,kBAAA;AAAA,EACA,kBAAA;AAAA,EACA,qBAAA;AACF,CAAA,CAAE,SAAS,kBAAkB;;;;"}
|