3 |
8 |
9 |
12 |
14 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | .vitepress/cache
15 | .vitepress/dist
16 | docs/.vitepress/dist
17 | docs/.vitepress/cache
18 |
19 | # Editor directories and files
20 | .vscode/*
21 | !.vscode/extensions.json
22 | .idea
23 | .DS_Store
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw?
29 |
--------------------------------------------------------------------------------
/demo-components/react/DemoDivider.tsx:
--------------------------------------------------------------------------------
1 | import { ChevronLeft, ChevronRight } from "lucide-react";
2 | import "../styles/DemoDivider.scss";
3 |
4 | const DemoDivider: React.FC = () => {
5 | return (
6 |
4 |
7 |
7 |
12 | );
13 | };
14 |
15 | export default DemoDivider;
16 |
--------------------------------------------------------------------------------
/demo-components/styles/Section.scss:
--------------------------------------------------------------------------------
1 | .demo-section {
2 | min-height: clamp(100px, 100vh, 800px);
3 | display: flex;
4 | flex-direction: column;
5 | justify-content: center;
6 | align-items: center;
7 | &__container {
8 | flex: 1;
9 | display: flex;
10 | // padding: 2rem;
11 | container-type: inline-size;
12 | width: 100%;
13 | overflow: hidden;
14 | }
15 | &__content {
16 | flex: 1;
17 | display: flex;
18 | justify-content: center;
19 | flex-direction: column;
20 | max-width: 100%;
21 | }
22 | }
--------------------------------------------------------------------------------
/vite.react.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import react from "@vitejs/plugin-react";
3 | import { createHtmlPlugin } from "vite-plugin-html";
4 |
5 | const htmlConfig = {
6 | minify: false,
7 | entry: "demo-components/react/main.tsx",
8 | template: "/index.react.html",
9 | inject: {
10 | data: {
11 | title: "TurtlePanes - React",
12 | injectScript: ``,
13 | },
14 | },
15 | };
16 |
17 | // https://vite.dev/config/
18 | export default defineConfig({
19 | plugins: [react(), createHtmlPlugin(htmlConfig)]
20 | });
21 |
--------------------------------------------------------------------------------
/demo-components/vue/Section.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
11 |
3 |
9 |
10 |
21 |
24 |
--------------------------------------------------------------------------------
/demo-components/react/Checkbox.tsx:
--------------------------------------------------------------------------------
1 | import { CheckCircle2 } from "lucide-react";
2 | import '../styles/Checkbox.scss';
3 |
4 | type CheckboxProps = {
5 | value: boolean;
6 | onChange: (value: boolean) => void;
7 | children?: React.ReactNode;
8 | };
9 |
10 | const Checkbox: React.FC
4 |
8 |
5 |
7 |
18 | onChange(e.target.checked)} />
19 |
22 | );
23 | };
24 |
25 | export default Checkbox;
26 |
--------------------------------------------------------------------------------
/demo-components/vue/Checkbox.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
15 |
16 |
21 |
23 |
--------------------------------------------------------------------------------
/packages/core/src/helpers/useLogs.ts:
--------------------------------------------------------------------------------
1 | export const useLogs = (): {
2 | logInfo: (...args: any[]) => void;
3 | logWarning: (...args: any[]) => void;
4 | logError: (...args: any[]) => void;
5 | } => {
6 | const isDevelopment = process.env.NODE_ENV === "development";
7 |
8 | if (!isDevelopment) {
9 | return {
10 | logInfo: () => {},
11 | logWarning: () => {},
12 | logError: () => {},
13 | };
14 | }
15 |
16 | return {
17 | logInfo: (...args) => {
18 | console.log(...args);
19 | },
20 | logWarning: (...args) => {
21 | console.warn(...args);
22 | },
23 | logError: (...args) => {
24 | console.error(...args);
25 | },
26 | };
27 | };
28 |
--------------------------------------------------------------------------------
/packages/core/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "module": "ESNext",
6 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
7 | "skipLibCheck": true,
8 | "moduleResolution": "bundler",
9 | "resolveJsonModule": true,
10 | "isolatedModules": true,
11 | "declaration": true,
12 | "declarationDir": "./dist",
13 | "outDir": "./dist",
14 | "baseUrl": ".",
15 | "paths": {
16 | "@/*": ["src/*"]
17 | },
18 | "esModuleInterop": true,
19 | "allowSyntheticDefaultImports": true
20 | },
21 | "include": ["src", "src/index.ts"],
22 | "exclude": ["node_modules", "dist", "**/*.spec.ts"]
23 | }
--------------------------------------------------------------------------------
/demo-components/styles/Checkbox.scss:
--------------------------------------------------------------------------------
1 | .turtle-panes {
2 | &__checkbox {
3 | display: flex;
4 | align-items: center;
5 | gap: 5px;
6 | border: solid 1px;
7 | padding: 4px 8px;
8 | border-radius: 20px;
9 | position: relative;
10 | font-size: clamp(14px, 2cqw, 2rem);
11 | input {
12 | position: absolute;
13 | left: 0;
14 | top: 0;
15 | width: 100%;
16 | height: 100%;
17 | opacity: 0;
18 | cursor: pointer;
19 | z-index: 2;
20 | &:not(:checked) + svg path {
21 | stroke: transparent;
22 | }
23 | }
24 | svg {
25 | width: 20px;
26 | height: 20px;
27 | }
28 | }
29 | }
--------------------------------------------------------------------------------
/tsconfig.react.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
6 | "module": "ESNext",
7 | "skipLibCheck": true,
8 |
9 | /* Bundler mode */
10 | "moduleResolution": "bundler",
11 | "allowImportingTsExtensions": true,
12 | "isolatedModules": true,
13 | "moduleDetection": "force",
14 | "noEmit": true,
15 | "jsx": "react-jsx",
16 | "jsxImportSource": "react",
17 |
18 | /* Linting */
19 | "strict": true,
20 | "noUnusedLocals": false,
21 | "noUnusedParameters": true,
22 | "noFallthroughCasesInSwitch": true
23 | },
24 | "include": ["demo-components/**/*.tsx", "demo-components/**/*.react.ts"],
25 | }
26 |
--------------------------------------------------------------------------------
/demo-components/styles/UseItForImageComparison.scss:
--------------------------------------------------------------------------------
1 | .before-after {
2 | &__wrapper {
3 | background: whitesmoke;
4 | border-radius: 20px;
5 | position: relative;
6 | container-type: inline-size;
7 | margin-top: 20px;
8 | border-radius: 20px;
9 | overflow: hidden;
10 | display: flex;
11 | align-items: center;
12 | img {
13 | width: 100%;
14 | }
15 | @media (max-width: 768px) {
16 | min-height: 300px;
17 | }
18 | }
19 | &__after-container {
20 | background-color: whitesmoke;
21 | height: 100%;
22 | position: relative;
23 | flex: 1;
24 | img {
25 | position: absolute;
26 | top:50%;
27 | transform: translateY(-50%);
28 | right:0;
29 | width: 100cqw;
30 | }
31 | }
32 | }
--------------------------------------------------------------------------------
/packages/react/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
6 | "module": "ESNext",
7 | "skipLibCheck": true,
8 | "moduleResolution": "bundler",
9 | "allowImportingTsExtensions": true,
10 | "resolveJsonModule": true,
11 | "isolatedModules": true,
12 | "noEmit": true,
13 | "jsx": "react-jsx",
14 | "strict": true,
15 | "noUnusedLocals": true,
16 | "noUnusedParameters": true,
17 | "noFallthroughCasesInSwitch": true,
18 | "declaration": true,
19 | "declarationDir": "./dist",
20 | "outDir": "./dist",
21 | "esModuleInterop": true
22 | },
23 | "include": ["src"],
24 | "exclude": ["node_modules", "dist"]
25 | }
--------------------------------------------------------------------------------
/demo-components/react/Section.tsx:
--------------------------------------------------------------------------------
1 | import '../styles/Section.scss';
2 | type SectionProps = React.HTMLAttributes
15 |
21 | );
22 | };
23 |
24 | export default Section;
25 |
--------------------------------------------------------------------------------
/packages/vue/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
6 | "module": "ESNext",
7 | "skipLibCheck": true,
8 | "moduleResolution": "bundler",
9 | "allowImportingTsExtensions": true,
10 | "resolveJsonModule": true,
11 | "isolatedModules": true,
12 | "noEmit": true,
13 | "strict": true,
14 | "noUnusedLocals": true,
15 | "noUnusedParameters": true,
16 | "noFallthroughCasesInSwitch": true,
17 | "declaration": true,
18 | "declarationDir": "./dist",
19 | "outDir": "./dist",
20 | "esModuleInterop": true,
21 | "jsx": "preserve" // Changed for Vue
22 | },
23 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"],
24 | "exclude": ["node_modules", "dist"]
25 | }
--------------------------------------------------------------------------------
/demo-components/styles/DemoDivider.scss:
--------------------------------------------------------------------------------
1 | .turtle-panes__demo-divider {
2 | align-self: center;
3 | display: inline-flex;
4 | align-items: center;
5 | height: 100%;
6 | width: 8px;
7 | svg {
8 | width: 12px;
9 | height: 12px;
10 | stroke: rgba(255, 255, 255, 0.75);
11 | stroke-width: 1px;
12 | position: absolute;
13 | top: 50%;
14 | transform: translate(0%, -50%);
15 | &.lucide:first-child {
16 | transform: translate(-100%, -50%);
17 | }
18 | &.lucide:last-child {
19 | left: 1px; // account for divider width
20 | }
21 | }
22 | &-divider {
23 | width: 1px;
24 | background-color: rgba(255, 255, 255, 0.15);
25 | height: 100%;
26 | position: absolute;
27 | left: 50%;
28 | transform: translateX(-50%);
29 | }
30 | }
--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "module": "ESNext",
6 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
7 | "skipLibCheck": true,
8 |
9 | /* Bundler mode */
10 | "moduleResolution": "node",
11 | "allowImportingTsExtensions": true,
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "noEmit": true,
15 | "jsx": "preserve",
16 |
17 | /* Linting */
18 | "strict": true,
19 | "noUnusedLocals": true,
20 | "noUnusedParameters": true,
21 | "noFallthroughCasesInSwitch": true,
22 | "typeRoots": ["node_modules/@types", "types"]
23 | },
24 | "include": ["demo-components/react/*.tsx", "demo-components/**/*.ts", "demo-components/vue/vite-env.d.ts"],
25 | "references": [{ "path": "./tsconfig.node.json" }]
26 | }
27 |
--------------------------------------------------------------------------------
/demo-components/styles/RawDashboard.scss:
--------------------------------------------------------------------------------
1 | .is-placeholder {
2 | background-color: var(--black);
3 | opacity: 0.1;
4 | border-radius: 10px;
5 | width: 100%;
6 | }
7 |
8 | .dashboard-demo {
9 | &__panes {
10 | margin: 20px 0px;
11 | border-radius: 20px;
12 | align-self: stretch;
13 | background-color: var(--white);
14 | height: 40cqw;
15 | }
16 | &__first-pane {
17 | padding: 10px;
18 | display: flex;
19 | flex-direction: column;
20 | align-items: space-between;
21 | justify-content: flex-start;
22 | width: 100%;
23 | overflow-y: hidden;
24 | }
25 | }
26 |
27 | .dashboard-demo {
28 | &__hide-manually {
29 | display: flex;
30 | gap: 15px;
31 | align-self: center;
32 | flex-wrap: wrap;
33 | margin-bottom: 20px;
34 | }
35 | }
--------------------------------------------------------------------------------
/demo-components/react/FrameworkSupport.tsx:
--------------------------------------------------------------------------------
1 | import Section from "./Section.tsx";
2 | import { SiReact, SiVuedotjs } from "react-icons/si";
3 | import '../styles/FrameworkSupport.scss';
4 |
5 | const FrameWorkSupport: React.FC = () => {
6 | return (
7 |
16 |
20 |
17 | {children}
18 |
19 |
14 |
19 | Framework support
15 |16 | Turtle-Panes plays nicely with some of the major frameworks 17 |
18 |
20 | < SiVuedotjs />
21 | < SiReact />
22 |
23 |
8 |
13 | Framework support
9 |10 | Turtle-Panes plays nicely with some of the major frameworks 11 |
12 |
14 |
15 |
23 |
15 |
21 | Give it all the space
16 |17 | You can let a pane breathe as much as it 18 | wants with flex='true' 19 |
20 |
24 |
26 | I'll eat all i can
25 |
29 |
34 |
30 | I'll take
31 | what i need
32 |
13 |
19 | Let the content decide
14 |15 | There is a prevent-overflow behavior you can use to make sure pane 16 | content is always visible. 17 |
18 |
22 |
24 | I will always be visible
23 |
27 |
29 | I might be clipped at certain widths
28 |
29 | {isTesting ? (
30 |
44 | );
45 | };
46 |
47 | export default DemoWrapper;
48 |
--------------------------------------------------------------------------------
/demo-components/style.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "Inter";
3 | font-style: normal;
4 | font-weight: 100 400 500 900;
5 | src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2)
6 | format("woff2");
7 | }
8 |
9 | :root {
10 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
11 | line-height: 1.5;
12 | font-weight: 400;
13 | font-size: 20px;
14 |
15 | font-synthesis: none;
16 | text-rendering: optimizeLegibility;
17 | -webkit-font-smoothing: antialiased;
18 | -moz-osx-font-smoothing: grayscale;
19 | -webkit-text-size-adjust: 100%;
20 |
21 | --yellow: #ffd14d;
22 | --red: #ff004d;
23 | --blue: #0e3ff2;
24 | --black: #000;
25 | --white: #fff;
26 | }
27 |
28 | html,
29 | body {
30 | height: 100%;
31 | width: 100%;
32 | }
33 | body {
34 | margin: 0px;
35 | padding: 0px;
36 | }
37 |
38 | #app {
39 | margin: 0 auto;
40 | height: 100%;
41 | display: flex;
42 | flex-direction: column;
43 | }
44 |
45 | ul {
46 | list-style: none;
47 | margin: 0px;
48 | padding: 0px;
49 | display: flex;
50 | flex-direction: column;
51 | }
52 | li {
53 | display: inline-flex;
54 | }
55 | nav {
56 | list-style: none;
57 | }
58 |
59 | a {
60 | text-decoration: none;
61 | color: inherit;
62 | }
63 |
64 | input,
65 | button,
66 | submit {
67 | border: none;
68 | }
69 | button {
70 | border-radius: 4cqw;
71 | font-size: clamp(1rem, 1.8cqw, 1.5rem);
72 | padding: 1cqw 2cqw;
73 | cursor: pointer;
74 | }
75 |
76 | * {
77 | box-sizing: border-box;
78 | }
79 |
--------------------------------------------------------------------------------
/demo-components/vue/FlexDemo.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
18 | Give it all the space
9 |10 | You can let a pane breathe as much as it 11 | wants with flex=’true’ 12 |
13 | 17 |
21 |
23 | I'll eat all I can
22 |
26 |
31 |
27 | I'll take
28 | what I need
29 |
25 |
28 | Or compare images
26 |Its all up to you really
27 |
29 | 
30 |
31 |
32 |
33 |
34 |
38 |
39 |
40 |
35 | 
36 |
37 |
8 |
18 | Let the content decide
9 |10 | There is a prevent-overflow behavior you can use to make sure pane 11 | content is always visible. 12 |
13 | 17 |
21 |
23 | I will always be visible
22 |
26 |
28 | I might be clipped at certain widths
27 |
18 |
22 | {["T", "U", "R", "T", "L", "E"].map((letter, index) => (
23 |
27 |
33 | ))}
34 |
35 |
37 | {letter}
32 | PANES
36 |38 | Easily build and manage multi-pane views 39 |
40 | 51 |
16 |
17 |
18 | {[1, 2, 3, 4, 5].map((_) => (
19 |
23 | ))}
24 |
25 |
26 |
27 |
30 |
31 |
32 |
35 |
36 |
37 |
40 |
41 |
42 | 🐢
26 |
27 | 🏎️
32 |
33 |
27 |
30 | Custom divider ?
28 |We got you covered.
29 |🐢
36 |
37 | }
38 | >
39 |
43 | 🏎️
49 |
50 | }
51 | >
52 |
56 |
24 |
35 | Or maybe hide it?
25 |26 | Once a pane reaches its min-width, you can also choose to hide it. 27 |
28 | 34 |
44 |
46 | If you don’t want me I’ll just leave
45 |
49 |
51 | My min width is very important to me
50 |
8 |
17 | Or maybe hide it ?
9 |
10 | Once a pane reaches its min-width,
you can also choose to hide it
11 |
23 |
25 | If you don’t want me I’ll just leave
24 |
28 |
30 | My min width is very important to me
29 |
6 |
18 |
19 |
20 |
57 |
58 |
--------------------------------------------------------------------------------
/demo-components/vue/LettersDemo.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
10 |
14 |
21 |
22 |
24 |
7 |
8 |
9 |
15 | {{ letter }}
16 |
17 |
18 | PANES
23 |
25 | Easily build and manage multi-pane views.
26 | Scroll down to see it in action.
27 |
29 |
51 |
30 |
31 |
39 |
50 |
10 |
11 |
12 |
21 |
13 |
17 |
18 |
19 |
20 |
24 |
25 |
26 |
33 |
34 |
38 |
39 |
46 |
47 |
48 |
7 |
9 |
10 |
73 |
90 |
--------------------------------------------------------------------------------
/demo-components/vue/UseItForImageComparison.vue:
--------------------------------------------------------------------------------
1 |
2 |
16 | ![]()
17 |
20 |
21 |
22 |
23 |
27 |
28 |
29 |
24 | ![]()
25 |
26 |
30 |
33 |
36 |
37 |
80 | {!children ? (
81 |
100 | );
101 | };
102 |
103 | export default Divider;
104 |
--------------------------------------------------------------------------------
/demo-components/vue/UseItForDashboards.vue:
--------------------------------------------------------------------------------
1 |
2 | handleMouseDown(e.nativeEvent)}
84 | onTouchStart={(e) => handleMouseDown(e.nativeEvent)}
85 | className="turtle-panes__divider-target"
86 | data-testid={`divider-${props.paneId}`}
87 | >
88 | ) : (
89 | handleMouseDown(e.nativeEvent)}
92 | onTouchStart={(e) => handleMouseDown(e.nativeEvent)}
93 | className="turtle-panes__divider-custom"
94 | data-testid={`divider-${props.paneId}`}
95 | >
96 | {children}
97 |
98 | )}
99 |
6 |
16 | Use it to make dashboards
7 |8 | This library was inspired first and foremost for building multi pane 9 | dashboards. 10 |
11 | 15 |
23 |
24 |
25 |
34 |
26 |
30 |
31 |
32 |
33 |
37 |
38 |
39 |
46 |
47 |
51 |
52 |
59 |
60 |
61 |
64 |
69 | Pane {{ pane.id }}
70 |
71 |
72 |
48 |
54 |
55 | Use it to make dashboards
49 |50 | This library was inspired first and foremost for building multi pane 51 | dashboards. 52 |
53 |
62 |
63 |
64 | {[1, 2, 3, 4, 5].map((_, index) => (
65 |
75 |
66 |
70 |
71 | ))}
72 |
73 |
74 |
79 |
80 |
81 |
85 |
86 |
90 |
91 |
95 |
96 |
100 |
101 |
104 | {paneVisibilityState.map((pane) => (
105 | handlePaneCheckbox(pane.id, value)}
109 | >
110 | Pane {pane.id}
111 |
112 | ))}
113 |
114 |
120 | {children}
121 |
122 | );
123 | },
124 | );
125 |
126 | Panes.displayName = "Panes";
127 |
128 | // Define a type that includes both the component and the static properties
129 | type PanesComponent = typeof Panes & {
130 | Pane: typeof Pane;
131 | Divider: typeof Divider;
132 | };
133 |
134 | // Assign static properties to Panes using Object.assign
135 | Object.assign(Panes, {
136 | Pane,
137 | Divider,
138 | });
139 |
140 | export default Panes as PanesComponent;
141 |
--------------------------------------------------------------------------------
/packages/core/src/state/context.spec.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from "./context";
2 | import { Pane, ContextType } from "../types";
3 | import { describe, beforeEach, it, expect } from "vitest";
4 |
5 | export const getDefaultPane = (id: number): Pane => ({
6 | width: 100,
7 | minWidth: 50,
8 | hideOnMinWidthExceeded: true,
9 | preventContentOverflow: true,
10 | isVisible: true,
11 | id: id,
12 | isFlex: false,
13 | });
14 |
15 | describe("Context", () => {
16 | let context: ContextType;
17 |
18 | beforeEach(() => {
19 | context = createContext();
20 | });
21 |
22 | it("should add a new pane and assign an id to it", async () => {
23 | await context.addPane({
24 | ...getDefaultPane(1),
25 | id: null,
26 | });
27 | await context.addPane({
28 | ...getDefaultPane(1),
29 | id: null,
30 | width: 150,
31 | });
32 |
33 | expect(Object.keys(context.state.panes).length).toBe(2);
34 | expect(context.state.panes[1].width).toBe(100);
35 | expect(context.state.panes[2].width).toBe(150);
36 | });
37 |
38 | it("should update a pane's properties correctly", () => {
39 | context.setPanes({
40 | 1: getDefaultPane(1),
41 | });
42 | context.updatePane(1, { width: 150 });
43 |
44 | expect(context.state.panes[1].width).toBe(150);
45 | });
46 |
47 | it("should set container width correctly", () => {
48 | context.setContainerWidth(300);
49 |
50 | expect(context.state.containerWidth).toBe(300);
51 | });
52 |
53 | it("should reset interaction state correctly", () => {
54 | context.setActivePane(1);
55 | context.setPixelsTravelled(50);
56 | context.resetInteractionState();
57 |
58 | expect(context.state.activePaneId).toBeNull();
59 | expect(context.state.pixelsTravelled).toBe(0);
60 | });
61 |
62 | it("should reset the entire state correctly", () => {
63 | context.setPanes({
64 | 1: getDefaultPane(1),
65 | });
66 | context.setContainerWidth(300);
67 | context.setActivePane(1);
68 | context.setPixelsTravelled(50);
69 | context.resetState();
70 |
71 | expect(Object.keys(context.state.panes).length).toBe(0);
72 | expect(context.state.containerWidth).toBe(0);
73 | expect(context.state.activePaneId).toBeNull();
74 | expect(context.state.pixelsTravelled).toBe(0);
75 | });
76 |
77 | it("on interaction start -> should update widthAtStartOfInteraction for all panes", () => {
78 | context.setPanes({
79 | 1: getDefaultPane(1),
80 | 2: getDefaultPane(2),
81 | });
82 | context.setActivePane(1);
83 |
84 | expect(context.state.panes[1].widthAtStartOfInteraction).toBe(100);
85 | expect(context.state.panes[2].widthAtStartOfInteraction).toBe(100);
86 | });
87 | describe("hiding and reshowing panes", () => {
88 | it("when a pane is hidden from its own divider -> should distribute width appropriately to closest siblings", () => {
89 | context.setPanes({
90 | 1: getDefaultPane(1),
91 | 2: getDefaultPane(2),
92 | 3: getDefaultPane(3),
93 | 4: getDefaultPane(4),
94 | });
95 | context.setContainerWidth(400);
96 | context.setActivePane(2);
97 | context.hidePane(2);
98 |
99 | expect(context.state.panes[3].width).toBe(200);
100 | });
101 | it("when a pane is manually hidden -> should distribute width appropriately to closest siblings ", () => {
102 | context.setPanes({
103 | 1: getDefaultPane(1),
104 | 2: getDefaultPane(2),
105 | 3: getDefaultPane(3),
106 | 4: getDefaultPane(4),
107 | });
108 | context.setContainerWidth(400);
109 | context.hidePaneManually(4);
110 |
111 | expect(context.state.panes[3].width).toBe(200);
112 |
113 | context.reShowPane(4);
114 | expect(context.state.panes[4].width).toBe(100);
115 |
116 | context.hidePaneManually(1);
117 | expect(context.state.panes[2].width).toBe(200);
118 | context.reShowPane(1);
119 | expect(context.state.panes[2].width).toBe(100);
120 |
121 | context.hidePaneManually(3);
122 | expect(context.state.panes[2].width).toBe(200);
123 | });
124 | it("when a hidden pane is re-shown -> should allocate enough space to re-show it", () => {
125 | context.setPanes({
126 | 1: getDefaultPane(1),
127 | 2: getDefaultPane(2),
128 | });
129 | context.setContainerWidth(200);
130 | context.setActivePane(1);
131 | context.hidePaneManually(1);
132 | expect(context.state.panes[2].width).toBe(200);
133 |
134 | context.reShowPane(1);
135 | expect(context.state.panes[1].width).toBe(100);
136 | expect(context.state.panes[2].width).toBe(100);
137 | });
138 | });
139 | });
140 |
--------------------------------------------------------------------------------
/packages/vue/src/Divider.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
11 |
22 |
23 |
26 |
110 |
152 |
--------------------------------------------------------------------------------
/packages/react/src/Pane.tsx:
--------------------------------------------------------------------------------
1 | import { FC, useMemo, useEffect, useState, useRef } from "react";
2 | import { useStateContext } from "./react-state-adapter";
3 | import Divider, { DividerProps } from "./Divider";
4 | import { PaneComponentProps } from "@turtle-panes/core/types";
5 | import { defaultPaneProps } from "@turtle-panes/core";
6 | import * as React from "react";
7 | import { useComputedHooks } from "./hooks/usePaneComputedHooks.react";
8 |
9 | export interface PaneProps extends PaneComponentProps {
10 | children?: React.ReactNode;
11 | divider?: React.ReactElement
19 |
21 |
119 |
132 | );
133 | };
134 |
135 | export default Pane;
136 |
--------------------------------------------------------------------------------
/demo-components/styles/App.scss:
--------------------------------------------------------------------------------
1 | @mixin center-demo-pane {
2 | .turtle-panes__section-description {
3 | align-self: center;
4 | text-align: center;
5 | }
6 | @media (max-width: 768px) {
7 | .turtle-panes__section-description {
8 | align-self: flex-start;
9 | text-align: left;
10 | }
11 | }
12 | }
13 | @mixin right-demo-pane {
14 | .turtle-panes__section-description {
15 | align-self: flex-end;
16 | text-align: right;
17 | }
18 | @media (max-width: 768px) {
19 | .turtle-panes__section-description {
20 | align-self: flex-start;
21 | text-align: left;
22 | }
23 | }
24 | }
25 | @mixin right-demo-pane-with-non-flex-container {
26 | .turtle-panes__section-description {
27 | align-self: flex-end;
28 | text-align: right;
29 | }
30 | .turtle-panes__wrapper {
31 | margin-left: auto !important;
32 | }
33 | @media (max-width: 768px) {
34 | .turtle-panes__section-description {
35 | align-self: flex-start;
36 | text-align: left;
37 | }
38 | .turtle-panes__wrapper {
39 | margin-left: 0px !important;
40 | }
41 | }
42 | }
43 |
44 | @mixin divider-on-mobile-increased-area {
45 | @media (max-width: 768px) {
46 | .turtle-panes__divider-target {
47 | width: 30px;
48 | }
49 | }
50 | }
51 |
52 | @mixin minimum-height-on-mobile {
53 | @media (max-width: 768px) {
54 | .demo-section:not(:first-child) .turtle-panes__wrapper {
55 | min-height: 45vh;
56 | }
57 | }
58 | }
59 |
60 | .turtle-panes {
61 | &__demo-wrapper {
62 | display: flex;
63 | flex-direction: column;
64 | width: 100%;
65 | @include divider-on-mobile-increased-area();
66 | @include minimum-height-on-mobile();
67 | }
68 | &__demo-wrapper > .demo-section {
69 | &:nth-child(8n + 1) {
70 | background-color: var(--yellow);
71 | color: var(--black);
72 | }
73 | &:nth-child(8n + 2) {
74 | background-color: var(--white);
75 | .turtle-panes__wrapper {
76 | min-height: 250px;
77 | }
78 | @include center-demo-pane();
79 | }
80 | &:nth-child(8n + 3) {
81 | background-color: var(--blue);
82 | color: var(--white);
83 | .turtle-panes__wrapper {
84 | color: var(--black);
85 | }
86 | @include right-demo-pane();
87 | .turtle-panes__wrapper {
88 | min-height: 250px;
89 | }
90 | }
91 | &:nth-child(8n + 4) {
92 | background-color: var(--black);
93 | color: var(--white);
94 | .turtle-panes__wrapper {
95 | color: var(--black);
96 | }
97 | }
98 | &:nth-child(8n + 5) {
99 | background-color: var(--red);
100 | @include right-demo-pane-with-non-flex-container();
101 | }
102 | &:nth-child(8n + 6) {
103 | background-color: var(--yellow);
104 | color: var(--black);
105 | }
106 | &:nth-child(8n + 7) {
107 | background-color: var(--blue);
108 | color: var(--white);
109 | .turtle-panes__wrapper {
110 | color: var(--black);
111 | }
112 | @include right-demo-pane-with-non-flex-container();
113 | }
114 | &:nth-child(8n + 8) {
115 | background-color: var(--white);
116 | @include center-demo-pane();
117 | }
118 | }
119 | &__description {
120 | margin: 4cqw;
121 | font-size: clamp(1rem, 3cqw, 2rem);
122 | font-weight: 300;
123 | }
124 | &__links {
125 | display: flex;
126 | padding: 40px 0px;
127 | align-items: center;
128 | justify-content: center;
129 | gap: 20px;
130 | a {
131 | display: flex;
132 | }
133 | }
134 | &__section-description {
135 | h1,
136 | p {
137 | padding: 0px;
138 | margin-left: 0px;
139 | margin-right: 0px;
140 | margin-bottom: 10px;
141 | }
142 | h1 {
143 | font-size: clamp(2rem, 6cqw, 3rem);
144 | font-weight: 900;
145 | margin-bottom: 10px;
146 | line-height: 1.2;
147 | }
148 | p {
149 | max-width: 600px;
150 | font-weight: 300;
151 | font-size: clamp(1rem, 3cqw, 3rem);
152 | margin-top: 0px;
153 | }
154 | @media (max-width: 768px) {
155 | h1 {
156 | font-size: clamp(1.8rem, 6cqw, 3rem);
157 | }
158 | p {
159 | font-size: clamp(0.8rem, 3cqw, 3rem);
160 | }
161 | }
162 | }
163 |
164 | &__demo-button {
165 | background-color: var(--black);
166 | color: var(--white);
167 | padding: 10px 20px;
168 | border: none;
169 | border-radius: 5px;
170 | cursor: pointer;
171 | outline: none;
172 | }
173 |
174 | &__demo-box {
175 | display: flex;
176 | justify-content: center;
177 | align-items: center;
178 | background-color: var(--white);
179 | padding: 20px;
180 | flex: 1;
181 | min-height: 240px;
182 | height: 100%;
183 | }
184 | }
185 |
186 | .demo-intro {
187 | &__source-code {
188 | display: inline-flex;
189 | gap: 10px;
190 | svg {
191 | width: 18px;
192 | height: 18px;
193 | }
194 | }
195 | &__button {
196 | display: flex;
197 | align-items: center;
198 | border: solid 2px var(--black);
199 | padding: 8px 16px;
200 | gap: 8px;
201 | border-radius: 20px;
202 | position: relative;
203 | font-size: clamp(16px, 2cqw, 2rem);
204 | background-color: var(--white);
205 | cursor: pointer;
206 | svg {
207 | width: 20px;
208 | height: 20px;
209 | }
210 | &:hover {
211 | background-color: var(--black);
212 | color: var(--white);
213 | }
214 | }
215 | }
216 |
--------------------------------------------------------------------------------
/packages/vue/src/Pane.vue:
--------------------------------------------------------------------------------
1 |
2 |
124 |
126 | {props.divider ? (
127 | React.cloneElement(props.divider, { paneId: id })
128 | ) : (
129 | {children}
125 |
12 |
23 |
24 |
27 |
28 |
29 |
137 |
166 |
--------------------------------------------------------------------------------
/packages/core/src/state/context.ts:
--------------------------------------------------------------------------------
1 | import {
2 | ContextAsyncMethods,
3 | ContextSyncMethods,
4 | ContextType,
5 | Pane,
6 | } from "../types";
7 | import {
8 | getNewPanesWidthToFillVacuumAfterPaneIsHidden,
9 | getNewPanesWidthToAccomodateReaddedPanes,
10 | calculateNewWidthForPanes,
11 | getPaneSiblingId,
12 | sortByClosestToPane,
13 | getVisiblePanes,
14 | getNewPanesWidthToAccomodateContainerShrinking,
15 | getNewPanesWidthToAccommodateContainerGrowing,
16 | getNewPanesWidthToAccomodateTargetShrinking,
17 | } from "./contextHelpers";
18 | import { useLogs } from "../helpers/useLogs";
19 |
20 | const { logInfo } = useLogs();
21 |
22 | export const createState = () => ({
23 | panes: {},
24 | containerWidth: 0,
25 | activePaneId: null,
26 | pixelsTravelled: 0,
27 | });
28 |
29 | export const createProxyState = (
30 | initialState: ContextType["state"],
31 | onUpdate: any,
32 | ) => {
33 | return new Proxy(initialState, {
34 | set(
35 | target: ContextType["state"],
36 | prop: keyof ContextType["state"],
37 | value: any,
38 | ) {
39 | target[prop] = value;
40 | onUpdate && onUpdate({ ...target });
41 | return true;
42 | },
43 | });
44 | };
45 |
46 | export const createActions = (
47 | state: ContextType["state"],
48 | ): ContextAsyncMethods & ContextSyncMethods => ({
49 | getPanes() {
50 | return JSON.parse(JSON.stringify(state.panes));
51 | },
52 | getNextId() {
53 | return Object.keys(state.panes).length + 1;
54 | },
55 | setPanes(newPanes) {
56 | state.panes = newPanes;
57 | },
58 | addPane(pane) {
59 | return new Promise((resolve) => {
60 | const id = pane?.id || Object.keys(state.panes).length + 1;
61 | state.panes[id] = { ...pane, id };
62 | resolve(id);
63 | });
64 | },
65 | addPaneSync(pane) {
66 | const id = pane?.id || Object.keys(state.panes).length + 1;
67 | state.panes[id] = { ...pane, id };
68 | return id;
69 | },
70 | updatePane(paneId, newProps) {
71 | if (!paneId) return;
72 | state.panes[paneId] = {
73 | ...state.panes[paneId],
74 | ...newProps,
75 | };
76 | },
77 | updatePaneWidth(paneId, newWidth) {
78 | const panes = this.getPanes();
79 | if (panes[paneId].isVisible === false) {
80 | logInfo("Pane is hidden. Cannot update width.");
81 | return;
82 | }
83 | const rightSiblingId = getPaneSiblingId(
84 | paneId,
85 | getVisiblePanes(panes),
86 | "right",
87 | );
88 | if (!rightSiblingId) {
89 | logInfo("Pane has no right sibling. Cannot update width.");
90 | return;
91 | }
92 | const [targetPane, siblingPane] = [panes[paneId], panes[rightSiblingId]];
93 |
94 | const {
95 | targetPane: updatedTargetPane,
96 | siblingPane: updatedSiblingPane,
97 | undistributedSpace,
98 | } = calculateNewWidthForPanes(targetPane, siblingPane, newWidth);
99 | if (undistributedSpace) {
100 | const otherPanesSorted = sortByClosestToPane(
101 | getVisiblePanes(state.panes),
102 | paneId,
103 | ).filter((p) => ![paneId, rightSiblingId].includes(p.id));
104 | getNewPanesWidthToAccomodateTargetShrinking(
105 | otherPanesSorted,
106 | undistributedSpace,
107 | ).forEach((updatedPane) => {
108 | panes[updatedPane.id].width = updatedPane.width;
109 | });
110 | }
111 | panes[paneId] = updatedTargetPane;
112 | panes[rightSiblingId] = updatedSiblingPane;
113 | this.setPanes(panes);
114 | },
115 | updatePaneContentWidth(paneId, widthOfContent, widthProvidedByPane) {
116 | const panes = this.getPanes();
117 | const isOverflowing = widthOfContent > widthProvidedByPane;
118 | const wasPaneAlreadyOverflowing = panes[paneId].isOverflowing;
119 | if (isOverflowing && wasPaneAlreadyOverflowing) {
120 | logInfo("Pane is already overflowing. Cannot update width.");
121 | return;
122 | }
123 | if (wasPaneAlreadyOverflowing && widthProvidedByPane === widthOfContent) {
124 | logInfo(
125 | "Pane width was reset to content. State is still overflowing.",
126 | );
127 | return;
128 | }
129 | panes[paneId].widthOfContent = widthOfContent;
130 | panes[paneId].widthProvidedByPane = widthProvidedByPane;
131 | panes[paneId].isOverflowing = isOverflowing;
132 | this.setPanes(panes);
133 | },
134 | reShowPane(paneId) {
135 | const currentPanes = this.getPanes();
136 | currentPanes[paneId].isVisible = true;
137 |
138 | const currentPanesArr = getVisiblePanes(currentPanes);
139 | const wasHiddenFromRight = currentPanes[paneId].hiddenFromSide === "right";
140 | if (wasHiddenFromRight) currentPanesArr.reverse();
141 |
142 | const sortedByClosestToTargetPane = sortByClosestToPane(
143 | currentPanesArr,
144 | paneId,
145 | );
146 |
147 | logInfo("Container width", state.containerWidth);
148 | const emptySpace =
149 | state.containerWidth -
150 | sortedByClosestToTargetPane.reduce((acc, curr) => (acc += curr.width), 0);
151 | sortedByClosestToTargetPane.length &&
152 | getNewPanesWidthToAccomodateReaddedPanes(
153 | currentPanes[paneId],
154 | sortedByClosestToTargetPane,
155 | emptySpace,
156 | ).forEach((updatedPane) => {
157 | currentPanes[updatedPane.id].width = updatedPane.width;
158 | });
159 |
160 | this.setPanes(currentPanes);
161 | },
162 | showPane(paneId) {
163 | const panes = this.getPanes();
164 | panes[paneId].isVisible = true;
165 | this.setPanes(panes);
166 | },
167 | hidePane(paneId) {
168 | if (!state.activePaneId) {
169 | throw new Error(
170 | "hidePane can only be called during interaction. Use hidePaneManually to hide panes without interaction.",
171 | );
172 | }
173 | const currentPanes = this.getPanes();
174 | currentPanes[paneId].hiddenFromSide =
175 | state.activePaneId === paneId ? "right" : "left";
176 |
177 | const currentPanesArr = getVisiblePanes(currentPanes);
178 | const wasHiddenFromRight = currentPanes[paneId].hiddenFromSide === "right";
179 | if (wasHiddenFromRight) currentPanesArr.reverse();
180 |
181 | const sortedByClosestToTargetPane = sortByClosestToPane(
182 | currentPanesArr,
183 | paneId,
184 | );
185 |
186 | const { width, minWidth } = currentPanes[paneId];
187 | const freedUpSpace = width || minWidth;
188 |
189 | sortedByClosestToTargetPane.length &&
190 | getNewPanesWidthToFillVacuumAfterPaneIsHidden(
191 | freedUpSpace,
192 | sortedByClosestToTargetPane,
193 | ).forEach((updatedPane) => {
194 | currentPanes[updatedPane.id].width = updatedPane.width;
195 | });
196 |
197 | currentPanes[paneId].width = currentPanes[paneId]
198 | .widthAtStartOfInteraction as number;
199 | currentPanes[paneId].isVisible = false;
200 | this.setPanes(currentPanes);
201 | },
202 | hidePaneManually(paneId) {
203 | const currentPanes = this.getPanes();
204 | const isFirstVisiblePane = getVisiblePanes(currentPanes)[0]?.id === paneId;
205 | currentPanes[paneId].hiddenFromSide = isFirstVisiblePane ? "right" : "left";
206 |
207 | const currentPanesArr = getVisiblePanes(currentPanes);
208 | const wasHiddenFromRight = currentPanes[paneId].hiddenFromSide === "right";
209 | if (wasHiddenFromRight) currentPanesArr.reverse();
210 |
211 | const sortedByClosestToTargetPane = sortByClosestToPane(
212 | currentPanesArr,
213 | paneId,
214 | );
215 |
216 | const { width, minWidth } = currentPanes[paneId];
217 | const freedUpSpace = width || minWidth;
218 |
219 | sortedByClosestToTargetPane.length &&
220 | getNewPanesWidthToFillVacuumAfterPaneIsHidden(
221 | freedUpSpace,
222 | sortedByClosestToTargetPane,
223 | ).forEach((updatedPane) => {
224 | currentPanes[updatedPane.id].width = updatedPane.width;
225 | });
226 |
227 | currentPanes[paneId].isVisible = false;
228 | this.setPanes(currentPanes);
229 | },
230 | setActivePane(paneId) {
231 | state.activePaneId = paneId;
232 | this.updateWidthsAtStartOfInteraction();
233 | },
234 | updateWidthsAtStartOfInteraction() {
235 | const panes = this.getPanes();
236 | Object.values(panes).forEach((pane: Pane) => {
237 | pane.widthAtStartOfInteraction = pane.width;
238 | });
239 | this.setPanes(panes);
240 | },
241 | setPixelsTravelled(pixels) {
242 | state.pixelsTravelled = pixels;
243 | },
244 | setContainerWidth(width) {
245 | state.containerWidth = width;
246 | },
247 | handleContainerResize(containerSize, widthUsedFromContent) {
248 | if (!state.containerWidth || state.activePaneId) return;
249 | const panes = this.getPanes();
250 | const difference = containerSize - state.containerWidth;// - overflownValue;
251 | if (difference === 0) return;
252 |
253 | const visiblePanes = getVisiblePanes(panes);
254 | const [isShrinking, isGrowing] = [difference < 0, difference > 0];
255 | this.setContainerWidth(containerSize);
256 | if (isGrowing && containerSize < widthUsedFromContent) {
257 | logInfo("Container is growing. Content will be expanding.");
258 | } else if (isShrinking && containerSize < widthUsedFromContent) {
259 | logInfo("Content is overflowing. Container is shrinking.");
260 | }
261 |
262 | if (isShrinking) {
263 | getNewPanesWidthToAccomodateContainerShrinking(
264 | visiblePanes,
265 | Math.abs(difference),
266 | ).forEach((updatedPane) => {
267 | panes[updatedPane.id] = {
268 | ...panes[updatedPane.id],
269 | ...updatedPane,
270 | };
271 | });
272 | } else if (isGrowing) {
273 | getNewPanesWidthToAccommodateContainerGrowing(
274 | visiblePanes,
275 | difference,
276 | ).forEach((updatedPane) => {
277 | panes[updatedPane.id] = {
278 | ...panes[updatedPane.id],
279 | ...updatedPane,
280 | };
281 | });
282 | }
283 | this.setPanes(panes);
284 | },
285 | resetInteractionState() {
286 | state.activePaneId = null;
287 | state.pixelsTravelled = 0;
288 | },
289 | resetState() {
290 | this.setPanes({});
291 | this.setContainerWidth(0);
292 | this.resetInteractionState();
293 | },
294 | });
295 |
296 | export const createContext = () => {
297 | const state = createState();
298 | const actions = createActions(state);
299 | return { state, ...actions };
300 | };
301 |
--------------------------------------------------------------------------------
/packages/core/src/state/contextHelpers.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Pane,
3 | PaneMap,
4 | PaneWithUpdatedWidth,
5 | PartialPaneWithId,
6 | } from "../types";
7 | import { useLogs } from "../helpers/useLogs";
8 | const { logError, logInfo } = useLogs();
9 |
10 | export const getNewPanesWidthToAccomodateTargetShrinking = (
11 | sortedByClosestToTargetPane: Pane[],
12 | newSpaceAvailable: number,
13 | ): PaneWithUpdatedWidth[] => {
14 | const panesThatNeedUpdates = [];
15 | let filledUpSpace = 0;
16 | for (const pane of sortedByClosestToTargetPane) {
17 | const remainingSpaceToBeFilled = newSpaceAvailable - filledUpSpace;
18 | const { width, maxWidth, id } = pane;
19 | const newPaneWidth = maxWidth
20 | ? Math.min(width + remainingSpaceToBeFilled, maxWidth)
21 | : width + remainingSpaceToBeFilled;
22 | panesThatNeedUpdates.push({
23 | id,
24 | width: newPaneWidth,
25 | });
26 | filledUpSpace += newPaneWidth - width;
27 | if (filledUpSpace === newSpaceAvailable) break;
28 | }
29 | return panesThatNeedUpdates;
30 | };
31 |
32 | export const getNewPanesWidthToAccomodateTargetGrowing = (
33 | sortedByClosestToTargetPane: Pane[],
34 | newSpaceRequired: number,
35 | ): PaneWithUpdatedWidth[] => {
36 | const panesThatNeedUpdates = [];
37 | let widthFilled = 0;
38 | for (const pane of sortedByClosestToTargetPane) {
39 | const remainingSpaceToBeAdded = newSpaceRequired - widthFilled;
40 | const { width, minWidth, id } = pane;
41 | const newPaneWidth = Math.max(width - remainingSpaceToBeAdded, minWidth);
42 | panesThatNeedUpdates.push({
43 | id,
44 | width: newPaneWidth,
45 | });
46 | widthFilled += width - newPaneWidth;
47 | if (widthFilled === newSpaceRequired) break;
48 | }
49 | if (widthFilled < newSpaceRequired) {
50 | throw new Error("Not enough space to accommodate the target pane growing");
51 | }
52 | return panesThatNeedUpdates;
53 | };
54 |
55 | export const calculateNewWidthForPanes = (
56 | targetPane: Pane,
57 | siblingPane: Pane,
58 | newWidth: number,
59 | ): {
60 | targetPane: Pane;
61 | siblingPane: Pane;
62 | undistributedSpace?: number;
63 | } => {
64 | const pixelsDiffFromLastWidth = newWidth - targetPane.width;
65 |
66 | const [targetPaneProposedNewWidth, siblingPaneProposedNewWidth] = [
67 | targetPane.width + pixelsDiffFromLastWidth,
68 | siblingPane.width - pixelsDiffFromLastWidth,
69 | ];
70 |
71 | const updatedPanes = [
72 | {
73 | ...targetPane,
74 | proposedNewWidth: targetPaneProposedNewWidth,
75 | correctionDifference: 0,
76 | },
77 | {
78 | ...siblingPane,
79 | proposedNewWidth: siblingPaneProposedNewWidth,
80 | correctionDifference: 0,
81 | },
82 | ].map((pane) => {
83 | const useContentWidthAsMinWidth =
84 | pane.preventContentOverflow &&
85 | pane.widthOfContent &&
86 | pane.widthProvidedByPane &&
87 | pane.widthOfContent > pane.widthProvidedByPane &&
88 | pane.widthOfContent > pane.minWidth;
89 | const minWidth = useContentWidthAsMinWidth
90 | ? pane.widthOfContent!
91 | : pane.minWidth;
92 | if (pane.proposedNewWidth < minWidth) {
93 | pane.correctionDifference = pane.proposedNewWidth - minWidth;
94 | pane.proposedNewWidth = minWidth;
95 | if (pane.hideOnMinWidthExceeded) {
96 | pane.isVisible = false;
97 | pane.correctionDifference += pane.proposedNewWidth;
98 | }
99 | }
100 | if (pane.maxWidth != null && pane.proposedNewWidth > pane.maxWidth) {
101 | pane.correctionDifference = pane.proposedNewWidth - pane.maxWidth;
102 | pane.proposedNewWidth = pane.maxWidth;
103 | }
104 | return pane;
105 | });
106 |
107 | const correctedPane = updatedPanes.find(
108 | (pane) => pane.correctionDifference !== 0,
109 | );
110 | const toBeAdjustedPane = updatedPanes.find(
111 | (pane) => pane.correctionDifference === 0,
112 | );
113 | if (correctedPane && toBeAdjustedPane) {
114 | toBeAdjustedPane.proposedNewWidth += correctedPane.correctionDifference;
115 | }
116 |
117 | const [oldTotalWidth, newTotalWidth] = [
118 | updatedPanes.reduce((acc, curr) => acc + curr.width, 0),
119 | updatedPanes
120 | .filter((p) => p.isVisible)
121 | .reduce((acc, curr) => acc + curr.proposedNewWidth, 0),
122 | ];
123 |
124 | // when panes get hidden upon minWidth, total width can be less (if the other pane has a maxWidth)
125 | const undistributedSpace = oldTotalWidth - newTotalWidth;
126 |
127 | const result = {
128 | targetPane: {
129 | ...targetPane,
130 | width: updatedPanes[0].proposedNewWidth,
131 | isVisible: updatedPanes[0].isVisible,
132 | },
133 | siblingPane: {
134 | ...siblingPane,
135 | width: updatedPanes[1].proposedNewWidth,
136 | isVisible: updatedPanes[1].isVisible,
137 | },
138 | };
139 | return undistributedSpace ? { ...result, undistributedSpace } : result;
140 | };
141 |
142 | export const getPaneSiblingId = (
143 | paneId: Pane["id"],
144 | visiblePanes: Pane[],
145 | direction: "left" | "right",
146 | ) => {
147 | const paneIndex = visiblePanes.findIndex((p) => p.id === paneId);
148 | return visiblePanes[paneIndex + (direction === "left" ? -1 : 1)]?.id || null;
149 | };
150 |
151 | export const sortByClosestToPane = (panes: Pane[], paneId: Pane["id"]) => {
152 | const panesWithVisibleIndex: Pane[] = panes.map((pane, idx) => ({
153 | ...pane,
154 | visiblePaneIndex: idx,
155 | }));
156 | const targetVisibleIndex = panesWithVisibleIndex.find(
157 | (pane) => pane.id === paneId,
158 | )?.visiblePaneIndex;
159 | if (targetVisibleIndex == null) {
160 | throw new Error("Pane to be compared with is not visible");
161 | }
162 | return panesWithVisibleIndex
163 | .filter((_, idx) => targetVisibleIndex !== idx)
164 | .sort((a, b) => {
165 | return (
166 | Math.abs(a.visiblePaneIndex! - targetVisibleIndex!) -
167 | Math.abs(b.visiblePaneIndex! - targetVisibleIndex!)
168 | );
169 | });
170 | };
171 |
172 | export const getVisiblePanes = (panes: PaneMap): Pane[] => {
173 | const paneValues: Pane[] = Object.values(JSON.parse(JSON.stringify(panes)));
174 | return paneValues
175 | .filter((pane) => pane.isVisible)
176 | .sort((a, b) => a.id - b.id);
177 | };
178 |
179 | export const getNewPanesWidthToAccomodateReaddedPanes = (
180 | paneToBeReadded: Pane,
181 | sortedByClosestToTargetPane: Pane[],
182 | emptySpace: number = 0,
183 | ): PaneWithUpdatedWidth[] => {
184 | if (sortedByClosestToTargetPane.some((p) => !p.isVisible)) {
185 | throw new Error(
186 | "Panes passed to getNewPanesWidthToAccomodateReaddedPanes must all be visible",
187 | );
188 | }
189 | const { width: requiredWidth, minWidth: requiredMinWidth } = paneToBeReadded;
190 | let allocatedWidthForReaddingPane = emptySpace;
191 | const updatedVisiblePanes = [];
192 | for (let i = 0; i < sortedByClosestToTargetPane.length; i++) {
193 | const remainingAllocationNeeded =
194 | requiredWidth - allocatedWidthForReaddingPane;
195 | const toHaveWidthUpdatedPane = sortedByClosestToTargetPane[i];
196 | const { width, minWidth, id } = toHaveWidthUpdatedPane;
197 | const proposedNewWidth = Math.max(
198 | width - remainingAllocationNeeded,
199 | minWidth,
200 | );
201 | allocatedWidthForReaddingPane += width - proposedNewWidth;
202 | proposedNewWidth !== width &&
203 | updatedVisiblePanes.push({
204 | id,
205 | width: proposedNewWidth,
206 | });
207 | if (allocatedWidthForReaddingPane >= requiredWidth) break;
208 | }
209 | if (
210 | allocatedWidthForReaddingPane >= requiredMinWidth &&
211 | allocatedWidthForReaddingPane !== requiredWidth
212 | ) {
213 | updatedVisiblePanes.push({
214 | id: paneToBeReadded.id,
215 | width: allocatedWidthForReaddingPane,
216 | });
217 | }
218 |
219 | if (allocatedWidthForReaddingPane < requiredMinWidth) {
220 | throw new Error("Not enough space to readd the pane");
221 | }
222 |
223 | return updatedVisiblePanes;
224 | };
225 |
226 | export const getNewPanesWidthToFillVacuumAfterPaneIsHidden = (
227 | freedUpSpace: number,
228 | sortedByClosestToTargetPane: Pane[],
229 | ): PaneWithUpdatedWidth[] => {
230 | if (sortedByClosestToTargetPane.some((p) => !p.isVisible)) {
231 | throw new Error(
232 | "Panes passed to getNewPanesWidthToFillVacuumAfterPaneIsHidden must all be visible",
233 | );
234 | }
235 | const panesThatNeedUpdates = [];
236 | let filledUpSpace = 0;
237 | for (let i = 0; i < sortedByClosestToTargetPane.length; i++) {
238 | const remainingFreeSpace = freedUpSpace - filledUpSpace;
239 | const pane = sortedByClosestToTargetPane[i];
240 | const { width, maxWidth, id } = pane;
241 | let newPaneWidth = maxWidth
242 | ? Math.min(width + remainingFreeSpace, maxWidth)
243 | : width + remainingFreeSpace;
244 | panesThatNeedUpdates.push({
245 | id,
246 | width: newPaneWidth,
247 | });
248 | filledUpSpace += newPaneWidth - width;
249 | if (filledUpSpace === freedUpSpace) break;
250 | }
251 |
252 | return panesThatNeedUpdates;
253 | };
254 |
255 | export const getNewPanesWidthToAccomodateContainerShrinking = (
256 | visiblePanes: Pane[],
257 | widthRemovedFromContainer: number,
258 | ): PartialPaneWithId[] => {
259 | const panesFromRight = [...visiblePanes].reverse();
260 | const panesThatNeedUpdates: { [key: number]: PartialPaneWithId } = {};
261 | let removedSpace = 0;
262 | let remainingSpaceToBeRemoved = widthRemovedFromContainer;
263 | for (let idx in panesFromRight) {
264 | const pane = panesFromRight[parseInt(idx)];
265 | remainingSpaceToBeRemoved = widthRemovedFromContainer - removedSpace;
266 | const { width, minWidth, id, hideOnMinWidthExceeded } = pane;
267 | let proposedNewPaneWidth = width - remainingSpaceToBeRemoved;
268 | const newPaneWidth = Math.max(proposedNewPaneWidth, minWidth);
269 | panesThatNeedUpdates[id] = {
270 | id,
271 | width: newPaneWidth,
272 | };
273 | if (hideOnMinWidthExceeded && proposedNewPaneWidth < minWidth) {
274 | panesThatNeedUpdates[id].isVisible = false;
275 | panesFromRight[parseInt(idx) + 1].width += minWidth;
276 | removedSpace += width - minWidth;
277 | } else removedSpace += width - newPaneWidth;
278 | if (removedSpace >= widthRemovedFromContainer) break;
279 | }
280 | if (removedSpace > widthRemovedFromContainer) {
281 | logError("Removed too much space.");
282 | } else {
283 | logInfo('Necessary space to remove', widthRemovedFromContainer);
284 | logInfo('Removed space', removedSpace);
285 | }
286 | return Object.values(panesThatNeedUpdates);
287 | };
288 |
289 | const sortByMiddleOut =
18 |
22 |
19 |
21 |