@sqlrooms/layout 0.18.1 → 0.19.1
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/dist/LayoutSlice.d.ts +39 -0
- package/dist/LayoutSlice.d.ts.map +1 -0
- package/dist/LayoutSlice.js +101 -0
- package/dist/LayoutSlice.js.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/mosaic/MosaicTile.js +1 -1
- package/dist/mosaic/MosaicTile.js.map +1 -1
- package/dist/mosaic/mosaic-utils.d.ts +2 -2
- package/dist/mosaic/mosaic-utils.d.ts.map +1 -1
- package/dist/mosaic/mosaic-utils.js +1 -1
- package/dist/mosaic/mosaic-utils.js.map +1 -1
- package/package.json +6 -4
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { RoomState } from '@sqlrooms/room-store';
|
|
2
|
+
import { BaseRoomConfig } from '@sqlrooms/room-config';
|
|
3
|
+
import { z } from 'zod';
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { StateCreator } from 'zustand';
|
|
6
|
+
import { LayoutConfig } from '@sqlrooms/layout-config';
|
|
7
|
+
export type RoomPanelInfo = {
|
|
8
|
+
title?: string;
|
|
9
|
+
icon?: React.ComponentType<{
|
|
10
|
+
className?: string;
|
|
11
|
+
}>;
|
|
12
|
+
component: React.ComponentType;
|
|
13
|
+
placement: 'sidebar' | 'sidebar-bottom' | 'main' | 'top-bar';
|
|
14
|
+
};
|
|
15
|
+
export declare const LayoutSliceConfig: z.ZodObject<{
|
|
16
|
+
layout: z.ZodDefault<z.ZodAny>;
|
|
17
|
+
}, "strip", z.ZodTypeAny, {
|
|
18
|
+
layout?: any;
|
|
19
|
+
}, {
|
|
20
|
+
layout?: any;
|
|
21
|
+
}>;
|
|
22
|
+
export type LayoutSliceConfig = z.infer<typeof LayoutSliceConfig>;
|
|
23
|
+
export declare function createDefaultLayoutConfig(): LayoutSliceConfig;
|
|
24
|
+
export type LayoutSliceState = {
|
|
25
|
+
layout: {
|
|
26
|
+
panels: Record<string, RoomPanelInfo>;
|
|
27
|
+
setLayout(layout: LayoutConfig): void;
|
|
28
|
+
togglePanel: (panel: string, show?: boolean) => void;
|
|
29
|
+
togglePanelPin: (panel: string) => void;
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
export declare function createLayoutSlice<PC extends BaseRoomConfig & LayoutSliceConfig>({ panels, }?: {
|
|
33
|
+
panels?: Record<string, RoomPanelInfo>;
|
|
34
|
+
}): StateCreator<LayoutSliceState>;
|
|
35
|
+
type RoomConfigWithLayout = BaseRoomConfig & LayoutSliceConfig;
|
|
36
|
+
type RoomStateWithLayout = RoomState<RoomConfigWithLayout> & LayoutSliceState;
|
|
37
|
+
export declare function useStoreWithLayout<T>(selector: (state: RoomStateWithLayout) => T): T;
|
|
38
|
+
export {};
|
|
39
|
+
//# sourceMappingURL=LayoutSlice.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LayoutSlice.d.ts","sourceRoot":"","sources":["../src/LayoutSlice.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAGV,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAC,cAAc,EAAC,MAAM,uBAAuB,CAAC;AAErD,OAAO,EAAC,CAAC,EAAC,MAAM,KAAK,CAAC;AAEtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AACrC,OAAO,EACL,YAAY,EAIb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC,CAAC;IACjD,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC;IAC/B,SAAS,EAAE,SAAS,GAAG,gBAAgB,GAAG,MAAM,GAAG,SAAS,CAAC;CAC9D,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;EAK5B,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAElE,wBAAgB,yBAAyB,IAAI,iBAAiB,CAI7D;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;QACtC,SAAS,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC;QACtC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;QACrD,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;KACzC,CAAC;CACH,CAAC;AAEF,wBAAgB,iBAAiB,CAC/B,EAAE,SAAS,cAAc,GAAG,iBAAiB,EAC7C,EACA,MAAW,GACZ,GAAE;IACD,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;CACnC,GAAG,YAAY,CAAC,gBAAgB,CAAC,CA8FtC;AAED,KAAK,oBAAoB,GAAG,cAAc,GAAG,iBAAiB,CAAC;AAC/D,KAAK,mBAAmB,GAAG,SAAS,CAAC,oBAAoB,CAAC,GAAG,gBAAgB,CAAC;AAE9E,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,CAAC,GAC1C,CAAC,CAMH"}
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import { createBaseSlice, useBaseRoomStore, } from '@sqlrooms/room-store';
|
|
2
|
+
import { produce } from 'immer';
|
|
3
|
+
import { z } from 'zod';
|
|
4
|
+
import { makeMosaicStack, removeMosaicNodeByKey } from './mosaic';
|
|
5
|
+
import { DEFAULT_MOSAIC_LAYOUT, MAIN_VIEW, isMosaicLayoutParent, } from '@sqlrooms/layout-config';
|
|
6
|
+
export const LayoutSliceConfig = z.object({
|
|
7
|
+
layout: z
|
|
8
|
+
.any()
|
|
9
|
+
.describe('Mosaic layout configuration.')
|
|
10
|
+
.default(DEFAULT_MOSAIC_LAYOUT),
|
|
11
|
+
});
|
|
12
|
+
export function createDefaultLayoutConfig() {
|
|
13
|
+
return {
|
|
14
|
+
layout: DEFAULT_MOSAIC_LAYOUT,
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
export function createLayoutSlice({ panels = {}, } = {}) {
|
|
18
|
+
return createBaseSlice((set, get) => ({
|
|
19
|
+
layout: {
|
|
20
|
+
panels,
|
|
21
|
+
setLayout: (layout) => set((state) => produce(state, (draft) => {
|
|
22
|
+
draft.config.layout = layout;
|
|
23
|
+
})),
|
|
24
|
+
togglePanel: (panel, show) => {
|
|
25
|
+
const { config } = get();
|
|
26
|
+
if (config.layout?.nodes === panel) {
|
|
27
|
+
// don't hide the view if it's the only one
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
const result = removeMosaicNodeByKey(config.layout?.nodes, panel);
|
|
31
|
+
const isShown = result.success;
|
|
32
|
+
if (isShown) {
|
|
33
|
+
if (show || panel === MAIN_VIEW /*&& areViewsReadyToRender()*/) {
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
set((state) => produce(state, (draft) => {
|
|
37
|
+
const layout = draft.config.layout;
|
|
38
|
+
layout.nodes = result.nextTree;
|
|
39
|
+
if (layout.pinned?.includes(panel)) {
|
|
40
|
+
layout.pinned = layout.pinned.filter((p) => p !== panel);
|
|
41
|
+
}
|
|
42
|
+
}));
|
|
43
|
+
}
|
|
44
|
+
else {
|
|
45
|
+
if (show === false) {
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
set((state) => produce(state, (draft) => {
|
|
49
|
+
const layout = draft.config.layout;
|
|
50
|
+
const root = layout.nodes;
|
|
51
|
+
const placement = get().layout.panels[panel]?.placement;
|
|
52
|
+
const side = placement === 'sidebar' ? 'first' : 'second';
|
|
53
|
+
const toReplace = isMosaicLayoutParent(root)
|
|
54
|
+
? root[side]
|
|
55
|
+
: undefined;
|
|
56
|
+
if (toReplace &&
|
|
57
|
+
isMosaicLayoutParent(root) &&
|
|
58
|
+
!isMosaicLayoutParent(toReplace) &&
|
|
59
|
+
toReplace !== MAIN_VIEW &&
|
|
60
|
+
!layout.fixed?.includes(toReplace) &&
|
|
61
|
+
!layout.pinned?.includes(toReplace)) {
|
|
62
|
+
// replace first un-pinned leaf
|
|
63
|
+
root[side] = panel;
|
|
64
|
+
}
|
|
65
|
+
else {
|
|
66
|
+
const panelNode = { node: panel, weight: 1 };
|
|
67
|
+
const restNode = {
|
|
68
|
+
node: config.layout?.nodes,
|
|
69
|
+
weight: 3,
|
|
70
|
+
};
|
|
71
|
+
// add to to the left
|
|
72
|
+
layout.nodes = makeMosaicStack(placement === 'sidebar-bottom' ? 'column' : 'row', side === 'first'
|
|
73
|
+
? [panelNode, restNode]
|
|
74
|
+
: [restNode, panelNode]);
|
|
75
|
+
}
|
|
76
|
+
}));
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
/**
|
|
80
|
+
* Toggle the pin state of a panel.
|
|
81
|
+
* @param panel - The panel to toggle the pin state of.
|
|
82
|
+
*/
|
|
83
|
+
togglePanelPin: (panel) => {
|
|
84
|
+
set((state) => produce(state, (draft) => {
|
|
85
|
+
const layout = draft.config.layout;
|
|
86
|
+
const pinned = layout.pinned ?? [];
|
|
87
|
+
if (pinned.includes(panel)) {
|
|
88
|
+
layout.pinned = pinned.filter((p) => p !== panel);
|
|
89
|
+
}
|
|
90
|
+
else {
|
|
91
|
+
layout.pinned = [...pinned, panel];
|
|
92
|
+
}
|
|
93
|
+
}));
|
|
94
|
+
},
|
|
95
|
+
},
|
|
96
|
+
}));
|
|
97
|
+
}
|
|
98
|
+
export function useStoreWithLayout(selector) {
|
|
99
|
+
return useBaseRoomStore((state) => selector(state));
|
|
100
|
+
}
|
|
101
|
+
//# sourceMappingURL=LayoutSlice.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LayoutSlice.js","sourceRoot":"","sources":["../src/LayoutSlice.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n RoomState,\n createBaseSlice,\n useBaseRoomStore,\n} from '@sqlrooms/room-store';\nimport {BaseRoomConfig} from '@sqlrooms/room-config';\nimport {produce} from 'immer';\nimport {z} from 'zod';\nimport {makeMosaicStack, removeMosaicNodeByKey} from './mosaic';\nimport React from 'react';\nimport {StateCreator} from 'zustand';\nimport {\n LayoutConfig,\n DEFAULT_MOSAIC_LAYOUT,\n MAIN_VIEW,\n isMosaicLayoutParent,\n} from '@sqlrooms/layout-config';\n\nexport type RoomPanelInfo = {\n title?: string;\n icon?: React.ComponentType<{className?: string}>;\n component: React.ComponentType;\n placement: 'sidebar' | 'sidebar-bottom' | 'main' | 'top-bar';\n};\n\nexport const LayoutSliceConfig = z.object({\n layout: z\n .any()\n .describe('Mosaic layout configuration.')\n .default(DEFAULT_MOSAIC_LAYOUT),\n});\n\nexport type LayoutSliceConfig = z.infer<typeof LayoutSliceConfig>;\n\nexport function createDefaultLayoutConfig(): LayoutSliceConfig {\n return {\n layout: DEFAULT_MOSAIC_LAYOUT,\n };\n}\n\nexport type LayoutSliceState = {\n layout: {\n panels: Record<string, RoomPanelInfo>;\n setLayout(layout: LayoutConfig): void;\n togglePanel: (panel: string, show?: boolean) => void;\n togglePanelPin: (panel: string) => void;\n };\n};\n\nexport function createLayoutSlice<\n PC extends BaseRoomConfig & LayoutSliceConfig,\n>({\n panels = {},\n}: {\n panels?: Record<string, RoomPanelInfo>;\n} = {}): StateCreator<LayoutSliceState> {\n return createBaseSlice<PC, LayoutSliceState>((set, get) => ({\n layout: {\n panels,\n setLayout: (layout) =>\n set((state) =>\n produce(state, (draft) => {\n draft.config.layout = layout;\n }),\n ),\n togglePanel: (panel, show) => {\n const {config} = get();\n if (config.layout?.nodes === panel) {\n // don't hide the view if it's the only one\n return;\n }\n const result = removeMosaicNodeByKey(config.layout?.nodes, panel);\n const isShown = result.success;\n if (isShown) {\n if (show || panel === MAIN_VIEW /*&& areViewsReadyToRender()*/) {\n return;\n }\n set((state) =>\n produce(state, (draft) => {\n const layout = draft.config.layout;\n layout.nodes = result.nextTree;\n if (layout.pinned?.includes(panel)) {\n layout.pinned = layout.pinned.filter(\n (p: string) => p !== panel,\n );\n }\n }),\n );\n } else {\n if (show === false) {\n return;\n }\n set((state) =>\n produce(state, (draft) => {\n const layout = draft.config.layout;\n const root = layout.nodes;\n const placement = get().layout.panels[panel]?.placement;\n const side = placement === 'sidebar' ? 'first' : 'second';\n const toReplace = isMosaicLayoutParent(root)\n ? root[side]\n : undefined;\n if (\n toReplace &&\n isMosaicLayoutParent(root) &&\n !isMosaicLayoutParent(toReplace) &&\n toReplace !== MAIN_VIEW &&\n !layout.fixed?.includes(toReplace) &&\n !layout.pinned?.includes(toReplace)\n ) {\n // replace first un-pinned leaf\n root[side] = panel;\n } else {\n const panelNode = {node: panel, weight: 1};\n const restNode = {\n node: config.layout?.nodes,\n weight: 3,\n };\n // add to to the left\n layout.nodes = makeMosaicStack(\n placement === 'sidebar-bottom' ? 'column' : 'row',\n side === 'first'\n ? [panelNode, restNode]\n : [restNode, panelNode],\n );\n }\n }),\n );\n }\n },\n\n /**\n * Toggle the pin state of a panel.\n * @param panel - The panel to toggle the pin state of.\n */\n togglePanelPin: (panel: string) => {\n set((state) =>\n produce(state, (draft) => {\n const layout = draft.config.layout;\n const pinned = layout.pinned ?? [];\n if (pinned.includes(panel)) {\n layout.pinned = pinned.filter((p: string) => p !== panel);\n } else {\n layout.pinned = [...pinned, panel];\n }\n }),\n );\n },\n },\n }));\n}\n\ntype RoomConfigWithLayout = BaseRoomConfig & LayoutSliceConfig;\ntype RoomStateWithLayout = RoomState<RoomConfigWithLayout> & LayoutSliceState;\n\nexport function useStoreWithLayout<T>(\n selector: (state: RoomStateWithLayout) => T,\n): T {\n return useBaseRoomStore<\n BaseRoomConfig & LayoutSliceConfig,\n RoomState<RoomConfigWithLayout>,\n T\n >((state) => selector(state as unknown as RoomStateWithLayout));\n}\n"]}
|
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,UAAU,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,yBAAyB,CAAC"}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,UAAU,CAAC","sourcesContent":["/**\n * {@include ../README.md}\n * @packageDocumentation\n */\n\nexport * from './mosaic';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,yBAAyB,CAAC","sourcesContent":["/**\n * {@include ../README.md}\n * @packageDocumentation\n */\n\nexport * from './LayoutSlice';\nexport * from './mosaic';\nexport * from '@sqlrooms/layout-config';\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { MAIN_VIEW } from '@sqlrooms/
|
|
2
|
+
import { MAIN_VIEW } from '@sqlrooms/layout-config';
|
|
3
3
|
import { cn } from '@sqlrooms/ui';
|
|
4
4
|
import { MosaicWindow } from 'react-mosaic-component';
|
|
5
5
|
const ENABLE_LAYOUT_REARRANGE = false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MosaicTile.js","sourceRoot":"","sources":["../../src/mosaic/MosaicTile.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"MosaicTile.js","sourceRoot":"","sources":["../../src/mosaic/MosaicTile.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAEhC,OAAO,EAAe,YAAY,EAAC,MAAM,wBAAwB,CAAC;AAElE,MAAM,uBAAuB,GAAG,KAAK,CAAC;AAEtC,MAAM,UAAU,GAMX,CAAC,KAAK,EAAE,EAAE;IACb,MAAM,EAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAC,GAAG,KAAK,CAAC;IACzD,MAAM,IAAI,GAAG,CACX,cACE,SAAS,EAAE,EAAE,CACX,uDAAuD,EACvD,SAAS,EACT,UAAU,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CACxC,YAEA,OAAO,GACJ,CACP,CAAC;IACF,IAAI,CAAC,uBAAuB,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC;QACjD,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,CACL,KAAC,YAAY,IACX,KAAK,EAAE,EAAE;QACT,uBAAuB;QACvB,IAAI;QACJ,qCAAqC;QACrC,IAAI,EAAE,IAAI;QACV,8DAA8D;QAC9D,oEAAoE;QACpE,aAAa,EAAE,GAAG,EAAE,CAClB,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,CACjB,eAAO,CACR,CAAC,CAAC,CAAC,CACF,cAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAC,GAEtD,CACP,YAGF,IAAI,GACQ,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import {MAIN_VIEW} from '@sqlrooms/layout-config';\nimport {cn} from '@sqlrooms/ui';\nimport {FC} from 'react';\nimport {MosaicBranch, MosaicWindow} from 'react-mosaic-component';\n\nconst ENABLE_LAYOUT_REARRANGE = false;\n\nconst MosaicTile: FC<{\n id: string;\n path: MosaicBranch[];\n content: React.ReactNode;\n isDragging: boolean;\n className?: string;\n}> = (props) => {\n const {id, content, path, isDragging, className} = props;\n const body = (\n <div\n className={cn(\n 'h-full flex-1 flex-col overflow-hidden rounded-md p-2',\n className,\n isDragging ? 'pointer-events-none' : '',\n )}\n >\n {content}\n </div>\n );\n if (!ENABLE_LAYOUT_REARRANGE || id === MAIN_VIEW) {\n return body;\n }\n return (\n <MosaicWindow<string>\n title={id}\n // additionalControls={\n // }\n // createNode={() => genRandomStr(6)}\n path={path}\n // onDragStart={() => console.log('MosaicWindow.onDragStart')}\n // onDragEnd={(type) => console.log('MosaicWindow.onDragEnd', type)}\n renderToolbar={() =>\n id === MAIN_VIEW ? (\n <div />\n ) : (\n <div style={{display: 'flex', width: '100%', height: '100%'}}>\n {/* <RoomPanelHeader panelKey={id as RoomPanelTypes} /> */}\n </div>\n )\n }\n >\n {body}\n </MosaicWindow>\n );\n};\n\nexport default MosaicTile;\n"]}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { MosaicLayoutNode } from '@sqlrooms/room-config';
|
|
2
1
|
import { MosaicDirection, MosaicNode, MosaicPath } from 'react-mosaic-component';
|
|
2
|
+
import { MosaicLayoutNode } from '@sqlrooms/layout-config';
|
|
3
3
|
export declare function makeMosaicStack(direction: MosaicDirection, children: {
|
|
4
4
|
node: string | MosaicNode<string> | null;
|
|
5
5
|
weight: number;
|
|
6
6
|
}[]): MosaicNode<string> | null;
|
|
7
7
|
export declare function visitMosaicLeafNodes<T = void>(root: MosaicLayoutNode | undefined | null, visitor: (node: string, path: MosaicPath) => T, // return a truthy value to stop visiting
|
|
8
8
|
path?: MosaicPath): T | undefined;
|
|
9
|
-
export declare function getVisibleMosaicLayoutPanels(root?: string | import("@sqlrooms/
|
|
9
|
+
export declare function getVisibleMosaicLayoutPanels(root?: string | import("@sqlrooms/layout-config").MosaicLayoutParent | null): string[];
|
|
10
10
|
export declare function findMosaicNodePathByKey(root: MosaicLayoutNode | undefined | null, key: string): MosaicPath | undefined;
|
|
11
11
|
export declare function removeMosaicNodeByKey(root: MosaicLayoutNode | undefined | null, key: string): {
|
|
12
12
|
success: true;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mosaic-utils.d.ts","sourceRoot":"","sources":["../../src/mosaic/mosaic-utils.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"mosaic-utils.d.ts","sourceRoot":"","sources":["../../src/mosaic/mosaic-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,eAAe,EACf,UAAU,EACV,UAAU,EAEX,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AAEjC,wBAAgB,eAAe,CAC7B,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE;IAAC,IAAI,EAAE,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAC,EAAE,GACrE,UAAU,CAAC,MAAM,CAAC,GAAG,IAAI,CA8B3B;AAED,wBAAgB,oBAAoB,CAAC,CAAC,GAAG,IAAI,EAC3C,IAAI,EAAE,gBAAgB,GAAG,SAAS,GAAG,IAAI,EACzC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,KAAK,CAAC,EAAE,yCAAyC;AACzF,IAAI,GAAE,UAAe,GACpB,CAAC,GAAG,SAAS,CAaf;AAED,wBAAgB,4BAA4B,CAC1C,IAAI,uEAA8B,GACjC,MAAM,EAAE,CAQV;AAED,wBAAgB,uBAAuB,CACrC,IAAI,EAAE,gBAAgB,GAAG,SAAS,GAAG,IAAI,EACzC,GAAG,EAAE,MAAM,GACV,UAAU,GAAG,SAAS,CAMxB;AAED,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,gBAAgB,GAAG,SAAS,GAAG,IAAI,EACzC,GAAG,EAAE,MAAM,GACV;IAAC,OAAO,EAAE,IAAI,CAAC;IAAC,QAAQ,EAAE,gBAAgB,CAAA;CAAC,GAAG;IAAC,OAAO,EAAE,KAAK,CAAA;CAAC,CAehE"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { DEFAULT_MOSAIC_LAYOUT, isMosaicLayoutParent, } from '@sqlrooms/room-config';
|
|
2
1
|
import { createRemoveUpdate, updateTree, } from 'react-mosaic-component';
|
|
2
|
+
import { isMosaicLayoutParent, DEFAULT_MOSAIC_LAYOUT, } from '@sqlrooms/layout-config';
|
|
3
3
|
export function makeMosaicStack(direction, children) {
|
|
4
4
|
const childrenWithoutEmpty = children.filter(({ node }) => node !== null);
|
|
5
5
|
if (!childrenWithoutEmpty?.length) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mosaic-utils.js","sourceRoot":"","sources":["../../src/mosaic/mosaic-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,
|
|
1
|
+
{"version":3,"file":"mosaic-utils.js","sourceRoot":"","sources":["../../src/mosaic/mosaic-utils.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n createRemoveUpdate,\n MosaicDirection,\n MosaicNode,\n MosaicPath,\n updateTree,\n} from 'react-mosaic-component';\nimport {\n MosaicLayoutNode,\n isMosaicLayoutParent,\n DEFAULT_MOSAIC_LAYOUT,\n} from '@sqlrooms/layout-config';\n\nexport function makeMosaicStack(\n direction: MosaicDirection,\n children: {node: string | MosaicNode<string> | null; weight: number}[],\n): MosaicNode<string> | null {\n const childrenWithoutEmpty = children.filter(({node}) => node !== null) as {\n node: string | MosaicNode<string>;\n weight: number;\n }[];\n if (!childrenWithoutEmpty?.length) {\n return null;\n }\n if (childrenWithoutEmpty.length === 1) {\n return childrenWithoutEmpty[0]?.node ?? null;\n }\n\n let stack = childrenWithoutEmpty[0]?.node;\n if (!stack) return null;\n let accumulatedWeight = childrenWithoutEmpty[0]?.weight ?? 0;\n for (let i = 1; i < childrenWithoutEmpty.length; i++) {\n const child = childrenWithoutEmpty[i];\n if (!child) continue;\n const {node, weight} = child;\n const splitPercentage =\n (accumulatedWeight * 100) / (accumulatedWeight + weight);\n accumulatedWeight += weight;\n stack = {\n direction,\n first: stack,\n second: node,\n splitPercentage: Math.round(splitPercentage),\n };\n }\n return stack;\n}\n\nexport function visitMosaicLeafNodes<T = void>(\n root: MosaicLayoutNode | undefined | null,\n visitor: (node: string, path: MosaicPath) => T, // return a truthy value to stop visiting\n path: MosaicPath = [],\n): T | undefined {\n if (!root) return undefined;\n if (isMosaicLayoutParent(root)) {\n if (root.direction) {\n const rv: T | undefined =\n visitMosaicLeafNodes(root.first, visitor, [...path, 'first']) ||\n visitMosaicLeafNodes(root.second, visitor, [...path, 'second']);\n if (rv) return rv;\n }\n return undefined;\n } else {\n return visitor(root, path);\n }\n}\n\nexport function getVisibleMosaicLayoutPanels(\n root = DEFAULT_MOSAIC_LAYOUT.nodes,\n): string[] {\n const visiblePanels: string[] = [];\n if (root) {\n visitMosaicLeafNodes(root, (node) => {\n visiblePanels.push(node);\n });\n }\n return visiblePanels;\n}\n\nexport function findMosaicNodePathByKey(\n root: MosaicLayoutNode | undefined | null,\n key: string,\n): MosaicPath | undefined {\n return visitMosaicLeafNodes<MosaicPath | undefined>(root, (node, path) => {\n if (node === key) {\n return path;\n }\n });\n}\n\nexport function removeMosaicNodeByKey(\n root: MosaicLayoutNode | undefined | null,\n key: string,\n): {success: true; nextTree: MosaicLayoutNode} | {success: false} {\n const path = findMosaicNodePathByKey(root, key);\n if (!root || !path) return {success: false};\n try {\n return {\n success: true,\n nextTree: updateTree<string>(root, [\n createRemoveUpdate<string>(root, path),\n ]),\n };\n } catch (err) {\n console.error(err);\n // might happen when removing main view\n return {success: false};\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sqlrooms/layout",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.19.1",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -18,8 +18,10 @@
|
|
|
18
18
|
"access": "public"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@sqlrooms/
|
|
22
|
-
"@sqlrooms/
|
|
21
|
+
"@sqlrooms/layout-config": "0.19.1",
|
|
22
|
+
"@sqlrooms/room-config": "0.19.1",
|
|
23
|
+
"@sqlrooms/room-store": "0.19.1",
|
|
24
|
+
"@sqlrooms/ui": "0.19.1"
|
|
23
25
|
},
|
|
24
26
|
"peerDependencies": {
|
|
25
27
|
"react": ">=18",
|
|
@@ -32,5 +34,5 @@
|
|
|
32
34
|
"typecheck": "tsc --noEmit",
|
|
33
35
|
"typedoc": "typedoc"
|
|
34
36
|
},
|
|
35
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "9cd7bbec3d915fa8b3997af840574a8430f74523"
|
|
36
38
|
}
|