29 |
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/demo/public/images/settings.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/demo/public/layouts/test_three_tabs.layout:
--------------------------------------------------------------------------------
1 | {
2 | "global": {},
3 | "borders": [],
4 | "layout": {
5 | "type": "row",
6 | "weight": 100,
7 | "children": [
8 | {
9 | "type": "tabset",
10 | "weight": 50,
11 | "children": [
12 | {
13 | "type": "tab",
14 | "name": "One",
15 | "component": "testing"
16 | }
17 | ]
18 | },
19 | {
20 | "type": "tabset",
21 | "weight": 50,
22 | "name": "TheHeader",
23 | "children": [
24 | {
25 | "type": "tab",
26 | "name": "Two",
27 | "icon": "/test/images/settings.svg",
28 | "component": "testing"
29 | }
30 | ]
31 | },
32 | {
33 | "type": "tabset",
34 | "weight": 50,
35 | "children": [
36 | {
37 | "type": "tab",
38 | "name": "Three",
39 | "component": "testing"
40 | }
41 | ]
42 | }
43 | ]
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "eslint/config";
2 | import js from "@eslint/js";
3 | import globals from "globals";
4 | import tseslint from "typescript-eslint";
5 | import pluginReact from "eslint-plugin-react";
6 |
7 | export default defineConfig([
8 | { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"], plugins: { js }, extends: ["js/recommended"] },
9 | { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"], languageOptions: { globals: globals.browser } },
10 | tseslint.configs.recommended, // This applies the recommended TypeScript rules
11 | pluginReact.configs.flat.recommended,
12 | {
13 | files: ["**/*.{ts,tsx}"], // Apply only to TypeScript and TSX files
14 | rules: {
15 | '@typescript-eslint/no-explicit-any': 'off',
16 | "no-unused-vars": "off",
17 | "@typescript-eslint/no-unused-vars": "off",
18 | "react/react-in-jsx-scope": "off",
19 | "react/display-name":"off"
20 | },
21 | },
22 | {
23 | settings: {
24 | react: {
25 | version: 'detect', // Automatically detects the React version
26 | },
27 | },
28 | },
29 | ]);
30 |
--------------------------------------------------------------------------------
/demo/JsonView.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Model } from "../src/index";
3 | import * as Prism from "prismjs";
4 |
5 | export function JsonView({ model }: { model: Model }) {
6 |
7 | const timer = React.useRef
24 | {renderState.content}
25 |
)
26 | : node.getNameForOverflowMenu();
27 |
28 | const leading = renderState.leading ? (
29 |
30 | {renderState.leading}
31 |
) : null;
32 |
33 | return (
34 |
38 | {leading}
39 | {content}
40 |
41 | );
42 | };
43 |
--------------------------------------------------------------------------------
/demo/Utils.tsx:
--------------------------------------------------------------------------------
1 | export class Utils {
2 |
3 | static downloadFile(downloadUrl: any, onSuccess: any, onError: any) {
4 | console.log("DownloadFile: " + downloadUrl);
5 | if (downloadUrl) {
6 | const xhr = new XMLHttpRequest();
7 | xhr.open('GET', downloadUrl);
8 | xhr.onload = function () {
9 | if (xhr.status == 200) {
10 | onSuccess(xhr.responseText);
11 | }
12 | else {
13 | onError(xhr.status + " " + xhr.statusText);
14 | }
15 | };
16 | xhr.onerror = function (e) {
17 | console.log(e);
18 | onError(e);
19 | };
20 | xhr.send();
21 | }
22 | }
23 |
24 | static getQueryParams() {
25 | const a = window.location.search.substr(1);
26 | if (a == "") return {};
27 | const params = a.split('&');
28 | const b: any = {};
29 | for (let i = 0; i < params.length; ++i) {
30 | const p = params[i].split('=', 2);
31 | if (p.length == 1)
32 | b[p[0]] = "";
33 | else
34 | b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
35 | }
36 | return b;
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/vite.config.lib.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig, PluginOption, UserConfig } from 'vite';
2 | import react from '@vitejs/plugin-react';
3 | import path from 'path';
4 | import pkg from './package.json';
5 |
6 | // Banner content
7 | const banner = `/**
8 | * ${pkg.name}
9 | * @version ${pkg.version}
10 | */\n`;
11 |
12 | // Banner injection plugin
13 | function bannerPlugin(): PluginOption {
14 | return {
15 | name: 'inject-banner',
16 | apply: 'build',
17 | generateBundle(_, bundle) {
18 | for (const [, file] of Object.entries(bundle)) {
19 | if (file.type === 'chunk' && file.fileName.endsWith('.js')) {
20 | file.code = banner + file.code;
21 | }
22 | }
23 | }
24 | };
25 | }
26 |
27 | export default defineConfig({
28 | plugins: [react(), bannerPlugin()],
29 | build: {
30 | lib: {
31 | entry: path.resolve(__dirname, 'src/index.ts'),
32 | name: 'index',
33 | fileName: 'index',
34 | formats: ['es'],
35 | },
36 | outDir: 'dist',
37 | minify: false,
38 | rollupOptions: {
39 | external: [
40 | 'react',
41 | 'react-dom',
42 | 'react-dom/client',
43 | 'react/jsx-runtime'
44 | ]
45 | }
46 | },
47 | define: {
48 | __VERSION__: JSON.stringify(pkg.version),
49 | },
50 | } as UserConfig);
51 |
--------------------------------------------------------------------------------
/src/view/SizeTracker.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Rect } from "../Rect";
3 | import { ErrorBoundary } from "./ErrorBoundary";
4 | import { I18nLabel } from "../I18nLabel";
5 | import { LayoutInternal } from "./Layout";
6 | import { TabNode } from "../model/TabNode";
7 |
8 | export interface ISizeTrackerProps {
9 | layout: LayoutInternal,
10 | node: TabNode,
11 | rect: Rect;
12 | visible: boolean;
13 | forceRevision: number;
14 | tabsRevision: number;
15 | }
16 |
17 | export const SizeTracker = React.memo(({ layout, node }: ISizeTrackerProps) => {
18 | return (
19 |
40 |
42 | );
43 | };
44 |
45 |
--------------------------------------------------------------------------------
/src/Attribute.ts:
--------------------------------------------------------------------------------
1 | /** @internal */
2 | export class Attribute {
3 | static NUMBER = "number";
4 | static STRING = "string";
5 | static BOOLEAN = "boolean";
6 |
7 | name: string;
8 | alias: string | undefined;
9 | modelName?: string;
10 | pairedAttr?: Attribute;
11 | pairedType?: string;
12 | defaultValue: any;
13 | alwaysWriteJson?: boolean;
14 | type?: string;
15 | required: boolean;
16 | fixed: boolean;
17 | description?: string;
18 |
19 | constructor(name: string, modelName: string | undefined, defaultValue: any, alwaysWriteJson?: boolean) {
20 | this.name = name;
21 | this.alias = undefined;
22 | this.modelName = modelName;
23 | this.defaultValue = defaultValue;
24 | this.alwaysWriteJson = alwaysWriteJson;
25 | this.required = false;
26 | this.fixed = false;
27 |
28 | this.type = "any";
29 | }
30 |
31 | setType(value: string) {
32 | this.type = value;
33 | return this;
34 | }
35 |
36 | setAlias(value: string) {
37 | this.alias = value;
38 | return this;
39 | }
40 |
41 | setDescription(value: string) {
42 | this.description = value;
43 | }
44 |
45 | setRequired() {
46 | this.required = true;
47 | return this;
48 | }
49 |
50 | setFixed() {
51 | this.fixed = true;
52 | return this;
53 | }
54 |
55 | // sets modelAttr for nodes, and nodeAttr for model
56 | setpairedAttr(value: Attribute) {
57 | this.pairedAttr = value;
58 | }
59 |
60 | setPairedType(value: string) {
61 | this.pairedType = value;
62 | }
63 |
64 | }
65 |
--------------------------------------------------------------------------------
/src/view/ErrorBoundary.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { ErrorInfo } from "react";
3 | import { CLASSES } from "../Types";
4 |
5 | /** @internal */
6 | export interface IErrorBoundaryProps {
7 | message: string;
8 | retryText: string;
9 | children: React.ReactNode;
10 | }
11 | /** @internal */
12 | export interface IErrorBoundaryState {
13 | hasError: boolean;
14 | }
15 |
16 | /** @internal */
17 | export class ErrorBoundary extends React.Component
40 |
48 | );
49 | }
50 |
51 | return this.props.children;
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/demo/SimpleForm.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | export function SimpleForm() {
4 |
5 | const timer = React.useRef
41 |
46 |
47 |
42 | {this.props.message}
43 |
44 |
45 |
37 |
61 | );
62 | }
--------------------------------------------------------------------------------
/demo/chart.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Bar } from 'react-chartjs-2';
3 | import {
4 | Chart as ChartJS,
5 | CategoryScale,
6 | LinearScale,
7 | BarElement,
8 | Title,
9 | Tooltip,
10 | Legend,
11 | } from 'chart.js';
12 |
13 | ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
14 |
15 | const BarChart: React.FC = () => {
16 | const chartData = {
17 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
18 | datasets: [
19 | {
20 | label: 'Sample Data',
21 | data: [65, 59, 80, 81, 56, 55, 40],
22 | backgroundColor: 'rgba(75, 192, 192, 0.2)',
23 | borderColor: 'rgba(75, 192, 192, 1)',
24 | borderWidth: 1,
25 | },
26 | ],
27 | };
28 |
29 | const options = {
30 | responsive: true,
31 | maintainAspectRatio: false,
32 | plugins: {
33 | legend: {
34 | position: 'top' as const,
35 | },
36 | title: {
37 | display: true,
38 | text: 'Bar Chart Example',
39 | },
40 | },
41 | };
42 |
43 | const selfRef = React.useRefSee that the form keeps state when popped out
38 | 60 |
60 | {bar}
61 |
62 | )
63 | };
64 |
65 | export default BarChart;
66 |
--------------------------------------------------------------------------------
/demo/MUIDataGrid.tsx:
--------------------------------------------------------------------------------
1 | import { DataGrid, GridColDef } from '@mui/x-data-grid';
2 |
3 | const columns: GridColDef<(typeof rows)[number]>[] = [
4 | { field: 'id', headerName: 'ID', width: 90 },
5 | {
6 | field: 'firstName',
7 | headerName: 'First name',
8 | width: 150,
9 | editable: true,
10 | },
11 | {
12 | field: 'lastName',
13 | headerName: 'Last name',
14 | width: 150,
15 | editable: true,
16 | },
17 | {
18 | field: 'age',
19 | headerName: 'Age',
20 | type: 'number',
21 | width: 110,
22 | editable: true,
23 | },
24 | {
25 | field: 'fullName',
26 | headerName: 'Full name',
27 | description: 'This column has a value getter and is not sortable.',
28 | sortable: false,
29 | width: 160,
30 | valueGetter: (_value, row) => `${row.firstName || ''} ${row.lastName || ''}`,
31 | },
32 | ];
33 |
34 | const rows = [
35 | { id: 1, lastName: 'Snow', firstName: 'Jon', age: 14 },
36 | { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 31 },
37 | { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 31 },
38 | { id: 4, lastName: 'Stark', firstName: 'Arya', age: 11 },
39 | { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
40 | { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
41 | { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
42 | { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
43 | { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
44 | ];
45 |
46 | export default function DataGridDemo() {
47 | return (
48 | -
5 |
-
6 | New tab set attribute: tabSetEnableTabWrap
7 | All tab sets in this layout will wrap their tabs onto multiple lines when needed 8 |
9 | -
10 | Customized tabset rendering using the layout onRenderTabSet property
11 | All tab sets in this layout have an additional menu button before the tabs and a settings button after the tabs 12 |
13 | -
14 | Customized tab rendering using the layout onRenderTab property
15 | The 'New' tab has an additional settings button 16 |
17 | -
18 | Help text (tooltip) option on tabs:
19 | Hover over this tab button 20 |
21 | -
22 | Action to close tab set:
23 | See added x button in this tab set 24 |
25 | -
26 | Allow narrow splitters with extended hit test areas:
27 | Uses the splitterExtra global attribute 28 |
29 | -
30 | Tab attributes: borderWidth, borderHeight to allow tabs to have individual sizes in borders:
31 | Try the 'With border sizes' tab 32 |
33 | -
34 | Customize the drag rectangle using the callback property: onRenderDragRect
35 | In this layout all drag rectangles are custom rendered 36 |
37 | -
38 | New border attribute: enableAutoHide, to hide border if it has zero tabs:
39 | Try moving all tabs from any of the borders 40 |
41 | -
42 | New onContextMenu prop:
43 | All tabs and tab sets in this layout have a custom context menu 44 |
45 |
45 |
59 | );
60 | }
61 |
--------------------------------------------------------------------------------
/src/view/Row.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { RowNode } from "../model/RowNode";
3 | import { TabSetNode } from "../model/TabSetNode";
4 | import { CLASSES } from "../Types";
5 | import { LayoutInternal } from "./Layout";
6 | import { TabSet } from "./TabSet";
7 | import { Splitter } from "./Splitter";
8 | import { Orientation } from "../Orientation";
9 |
10 | /** @internal */
11 | export interface IRowProps {
12 | layout: LayoutInternal;
13 | node: RowNode;
14 | }
15 |
16 | /** @internal */
17 | export const Row = (props: IRowProps) => {
18 | const { layout, node } = props;
19 | const selfRef = React.useRef
63 | {items}
64 |
65 | );
66 | };
67 |
68 |
69 |
--------------------------------------------------------------------------------
/demo/public/layouts/test_with_onRenderTab.layout:
--------------------------------------------------------------------------------
1 | {
2 | "global": {},
3 | "borders": [
4 | {
5 | "type": "border",
6 | "location": "top",
7 | "children": [
8 | {
9 | "type": "tab",
10 | "id": "onRenderTab2",
11 | "name": "top1",
12 | "component": "testing"
13 | }
14 | ]
15 | },
16 | {
17 | "type": "border",
18 | "location": "bottom",
19 | "children": [
20 | {
21 | "type": "tab",
22 | "name": "bottom1",
23 | "component": "testing"
24 | },
25 | {
26 | "type": "tab",
27 | "name": "bottom2",
28 | "component": "testing"
29 | }
30 | ]
31 | },
32 | {
33 | "type": "border",
34 | "location": "left",
35 | "children": [
36 | {
37 | "type": "tab",
38 | "name": "left1",
39 | "component": "testing"
40 | }
41 | ]
42 | },
43 | {
44 | "type": "border",
45 | "location": "right",
46 | "children": [
47 | {
48 | "type": "tab",
49 | "name": "right1",
50 | "component": "testing"
51 | }
52 | ]
53 | }
54 | ],
55 | "layout": {
56 | "type": "row",
57 | "weight": 100,
58 | "children": [
59 | {
60 | "type": "tabset",
61 | "id": "onRenderTabSet1",
62 | "weight": 50,
63 | "children": [
64 | {
65 | "type": "tab",
66 | "id": "345",
67 | "name": "One",
68 | "component": "testing"
69 | }
70 | ]
71 | },
72 | {
73 | "type": "tabset",
74 | "id": "onRenderTabSet2",
75 | "name": "will be replaced",
76 | "weight": 50,
77 | "children": [
78 | {
79 | "type": "tab",
80 | "id": "onRenderTab1",
81 | "name": "Two",
82 | "component": "testing"
83 | }
84 | ]
85 | },
86 | {
87 | "type": "tabset",
88 | "id": "onRenderTabSet3",
89 | "weight": 50,
90 | "children": [
91 | {
92 | "type": "tab",
93 | "id": "123",
94 | "name": "Three",
95 | "component": "testing"
96 | }
97 | ]
98 | }
99 | ]
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/playwright.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig, devices } from '@playwright/test';
2 |
3 | /**
4 | * Read environment variables from file.
5 | * https://github.com/motdotla/dotenv
6 | */
7 | // import dotenv from 'dotenv';
8 | // import path from 'path';
9 | // dotenv.config({ path: path.resolve(__dirname, '.env') });
10 |
11 | /**
12 | * See https://playwright.dev/docs/test-configuration.
13 | */
14 | export default defineConfig({
15 | testDir: './tests-playwright',
16 | /* Run tests in files in parallel */
17 | fullyParallel: true,
18 | /* Fail the build on CI if you accidentally left test.only in the source code. */
19 | forbidOnly: !!process.env.CI,
20 | /* Retry on CI only */
21 | retries: process.env.CI ? 2 : 0,
22 | /* Opt out of parallel tests on CI. */
23 | workers: process.env.CI ? 1 : undefined,
24 | /* Reporter to use. See https://playwright.dev/docs/test-reporters */
25 | reporter: 'html',
26 | /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
27 | use: {
28 | /* Base URL to use in actions like `await page.goto('/')`. */
29 | // baseURL: 'http://127.0.0.1:3000',
30 |
31 | /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
32 | trace: 'on-first-retry',
33 | },
34 |
35 | /* Configure projects for major browsers */
36 | projects: [
37 | {
38 | name: 'chromium',
39 | use: { ...devices['Desktop Chrome'] },
40 | },
41 |
42 | // {
43 | // name: 'firefox',
44 | // use: { ...devices['Desktop Firefox'] },
45 | // },
46 |
47 | {
48 | name: 'webkit',
49 | use: { ...devices['Desktop Safari'] },
50 | },
51 |
52 | /* Test against mobile viewports. */
53 | // {
54 | // name: 'Mobile Chrome',
55 | // use: { ...devices['Pixel 5'] },
56 | // },
57 | // {
58 | // name: 'Mobile Safari',
59 | // use: { ...devices['iPhone 12'] },
60 | // },
61 |
62 | /* Test against branded browsers. */
63 | // {
64 | // name: 'Microsoft Edge',
65 | // use: { ...devices['Desktop Edge'], channel: 'msedge' },
66 | // },
67 | // {
68 | // name: 'Google Chrome',
69 | // use: { ...devices['Desktop Chrome'], channel: 'chrome' },
70 | // },
71 | ],
72 |
73 | /* Run your local dev server before starting the tests */
74 | // webServer: {
75 | // command: 'npm run start',
76 | // url: 'http://127.0.0.1:3000',
77 | // reuseExistingServer: !process.env.CI,
78 | // },
79 | });
80 |
--------------------------------------------------------------------------------
/demo/public/layouts/sub.layout:
--------------------------------------------------------------------------------
1 | {
2 | "global": {
3 | "tabEnableFloat": true
4 | },
5 | "borders": [],
6 | "layout": {
7 | "type": "row",
8 | "children": [
9 | {
10 | "type": "tabset",
11 | "weight": 23.6,
12 | "children": [
13 | {
14 | "type": "tab",
15 | "name": "Tabbed Pane",
16 | "component": "sub",
17 | "config": {
18 | "model": {
19 | "global": {
20 | "tabSetTabLocation": "bottom"
21 | },
22 | "borders": [],
23 | "layout": {
24 | "type": "row",
25 | "children": [
26 | {
27 | "type": "tabset",
28 | "weight": 50,
29 | "selected": 1,
30 | "children": [
31 | {
32 | "type": "tab",
33 | "name": "AAAA",
34 | "component": "grid",
35 | "config": {
36 | "id": "1"
37 | }
38 | },
39 | {
40 | "type": "tab",
41 | "name": "BBBB",
42 | "component": "grid",
43 | "config": {
44 | "id": "2"
45 | }
46 | }
47 | ],
48 | "active": true
49 | }
50 | ]
51 | }
52 | }
53 | }
54 | }
55 | ]
56 | },
57 | {
58 | "type": "tabset",
59 | "weight": 26.4,
60 | "children": [
61 | {
62 | "type": "tab",
63 | "name": "Split Pane",
64 | "component": "sub",
65 | "config": {
66 | "model": {
67 | "global": {
68 | "tabSetEnableTabStrip": false
69 | },
70 | "borders": [],
71 | "layout": {
72 | "type": "row",
73 | "children": [
74 | {
75 | "type": "tabset",
76 | "weight": 50,
77 | "children": [
78 | {
79 | "type": "tab",
80 | "name": "1111",
81 | "component": "grid",
82 | "config": {
83 | "id": "1"
84 | }
85 | }
86 | ]
87 | },
88 | {
89 | "type": "tabset",
90 | "weight": 50,
91 | "children": [
92 | {
93 | "type": "tab",
94 | "name": "2222",
95 | "component": "grid",
96 | "config": {
97 | "id": "2"
98 | }
99 | }
100 | ]
101 | }
102 | ]
103 | }
104 | }
105 | }
106 | }
107 | ],
108 | "active": true
109 | }
110 | ]
111 | }
112 | }
113 |
--------------------------------------------------------------------------------
/demo/PopupMenu.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ReactDOM from "react-dom/client";
3 |
4 | /** @hidden @internal */
5 | export function showPopup(
6 | title: string,
7 | layoutDiv: HTMLElement,
8 | x: number, y: number,
9 | items: string[],
10 | onSelect: (item: string | undefined) => void,
11 | ) {
12 | const currentDocument = layoutDiv.ownerDocument;
13 | const layoutRect = layoutDiv.getBoundingClientRect();
14 |
15 | const elm = currentDocument.createElement("div");
16 | elm.className = "popup_menu_container";
17 |
18 | if (x < layoutRect.left + layoutRect.width / 2) {
19 | elm.style.left = x - layoutRect.left + "px";
20 | } else {
21 | elm.style.right = layoutRect.right - x + "px";
22 | }
23 |
24 | if (y < layoutRect.top + layoutRect.height / 2) {
25 | elm.style.top = y - layoutRect.top + "px";
26 | } else {
27 | elm.style.bottom = layoutRect.bottom - y + "px";
28 | }
29 |
30 | layoutDiv.appendChild(elm);
31 |
32 | const onHide = (item: string | undefined) => {
33 | onSelect(item);
34 | layoutDiv.removeChild(elm);
35 | root.unmount();
36 | elm.removeEventListener("pointerdown", onElementPointerDown);
37 | currentDocument.removeEventListener("pointerdown", onDocPointerDown);
38 | };
39 |
40 | const onElementPointerDown = (event: Event) => {
41 | event.stopPropagation();
42 | };
43 |
44 | const onDocPointerDown = (event: Event) => {
45 | onHide(undefined);
46 | };
47 |
48 | elm.addEventListener("pointerdown", onElementPointerDown);
49 | currentDocument.addEventListener("pointerdown", onDocPointerDown);
50 |
51 | const root = ReactDOM.createRoot(elm);
52 | root.render( onItemClick(item, event)}>
80 | {item}
81 |
82 | ));
83 |
84 | return (
85 |
86 |
);
89 | };
90 |
--------------------------------------------------------------------------------
/src/model/BorderSet.ts:
--------------------------------------------------------------------------------
1 | import { DockLocation } from "../DockLocation";
2 | import { DropInfo } from "../DropInfo";
3 | import { BorderNode } from "./BorderNode";
4 | import { IDraggable } from "./IDraggable";
5 | import { Model } from "./Model";
6 | import { Node } from "./Node";
7 |
8 | export class BorderSet {
9 | /** @internal */
10 | static fromJson(json: any, model: Model) {
11 | const borderSet = new BorderSet(model);
12 | borderSet.borders = json.map((borderJson: any) => BorderNode.fromJson(borderJson, model));
13 | for (const border of borderSet.borders) {
14 | borderSet.borderMap.set(border.getLocation(), border);
15 | }
16 | return borderSet;
17 | }
18 | /** @internal */
19 | private borders: BorderNode[];
20 | /** @internal */
21 | private borderMap: Map{title}
87 | {itemElements}
88 |
64 |
65 | {show &&
73 |
74 |
75 | );
76 |
77 | }
78 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "flexlayout-react",
3 | "version": "0.8.17",
4 | "description": "A multi-tab docking layout manager",
5 | "author": "Caplin Systems Ltd",
6 | "repository": {
7 | "type": "git",
8 | "url": "git+https://github.com/caplin/FlexLayout.git"
9 | },
10 | "license": "ISC",
11 | "type": "module",
12 | "main": "./dist/index.js",
13 | "module": "./dist/index.js",
14 | "types": "./types/index.d.ts",
15 | "exports": {
16 | ".": {
17 | "import": "./dist/index.js",
18 | "types": "./types/index.d.ts"
19 | },
20 | "./style/*": "./style/*"
21 | },
22 | "files": [
23 | "dist/",
24 | "types/",
25 | "style/"
26 | ],
27 | "keywords": [
28 | "react",
29 | "layout",
30 | "dock",
31 | "popout",
32 | "tabs",
33 | "tabset",
34 | "splitter",
35 | "drag",
36 | "drop",
37 | "reactjs",
38 | "flexlayout",
39 | "flex layout",
40 | "layout manager",
41 | "drag and drop",
42 | "split view",
43 | "docking library",
44 | "docking layout"
45 | ],
46 | "scripts": {
47 | "dev": "vite",
48 | "preview": "vite preview",
49 | "build": "npm run build:clean && npm run build:demo && npm run css && npm run build:lib && npm run build:types && npm run doc",
50 | "build:clean": "rimraf demo/dist dist/ types/ typedoc/",
51 | "build:demo": "vite build",
52 | "build:types": "tsc -p tsconfig-types.json",
53 | "build:lib": "vite build --config vite.config.lib.ts",
54 | "test": "vitest",
55 | "playwright": "playwright test --ui",
56 | "lint": "eslint src/*",
57 | "doc": "typedoc --out typedoc --exclude \"**/demo/**/*.tsx\" --excludeInternal --disableSources --excludePrivate --excludeProtected --readme none ./src",
58 | "css": "sass style:style"
59 | },
60 | "eslintConfig": {
61 | "extends": "react-app"
62 | },
63 | "peerDependencies": {
64 | "react": "^18.0.0 || ^19.0.0",
65 | "react-dom": "^18.0.0 || ^19.0.0"
66 | },
67 | "devDependencies": {
68 | "@emotion/react": "^11.14.0",
69 | "@emotion/styled": "^11.14.0",
70 | "@eslint/js": "^9.24.0",
71 | "@mui/material": "^7.0.2",
72 | "@mui/x-data-grid": "^7.28.3",
73 | "@playwright/test": "^1.51.1",
74 | "@types/node": "^22.14.1",
75 | "@types/prismjs": "^1.26.5",
76 | "@types/react": "^19.1.2",
77 | "@types/react-dom": "^19.1.2",
78 | "@vitejs/plugin-react": "^4.4.0",
79 | "ag-grid-community": "^33.2.3",
80 | "ag-grid-react": "^33.2.3",
81 | "chart.js": "^4.4.9",
82 | "eslint": "^9.24.0",
83 | "eslint-plugin-react": "^7.37.5",
84 | "globals": "^16.0.0",
85 | "ol": "^10.5.0",
86 | "prettier": "^3.5.3",
87 | "prismjs": "^1.30.0",
88 | "react": "^19.1.0",
89 | "react-chartjs-2": "^5.3.0",
90 | "react-dom": "^19.1.0",
91 | "react-scripts": "5.0.1",
92 | "rimraf": "^6.0.1",
93 | "sass": "^1.86.3",
94 | "styled-components": "^6.1.17",
95 | "typedoc": "^0.28.2",
96 | "typescript": "^5.8.3",
97 | "typescript-eslint": "^8.30.1",
98 | "vite": "^6.3.0",
99 | "vitest": "^3.1.1"
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/demo/public/layouts/test_with_min_size.layout:
--------------------------------------------------------------------------------
1 | {
2 | "global": {
3 | "tabSetMinHeight": 100,
4 | "tabSetMinWidth": 100,
5 | "borderMinSize": 100,
6 | "borderEnableAutoHide": true,
7 | "tabSetEnableClose": true
8 | },
9 | "borders": [
10 | {
11 | "type": "border",
12 | "location": "top",
13 | "children": [
14 | {
15 | "type": "tab",
16 | "name": "top1",
17 | "component": "testing"
18 | }
19 | ]
20 | },
21 | {
22 | "type": "border",
23 | "location": "bottom",
24 | "children": [
25 | {
26 | "type": "tab",
27 | "name": "bottom1",
28 | "component": "testing"
29 | },
30 | {
31 | "type": "tab",
32 | "name": "bottom2",
33 | "component": "testing"
34 | }
35 | ]
36 | },
37 | {
38 | "type": "border",
39 | "location": "left",
40 | "children": [
41 | {
42 | "type": "tab",
43 | "name": "left1",
44 | "component": "testing"
45 | }
46 | ]
47 | },
48 | {
49 | "type": "border",
50 | "location": "right",
51 | "children": [
52 | {
53 | "type": "tab",
54 | "name": "right1",
55 | "component": "testing"
56 | }
57 | ]
58 | }
59 | ],
60 | "layout": {
61 | "type": "row",
62 | "weight": 100,
63 | "children": [
64 | {
65 | "type": "tabset",
66 | "weight": 50,
67 | "children": [
68 | {
69 | "type": "tab",
70 | "name": "One",
71 | "component": "testing"
72 | }
73 | ]
74 | },
75 | {
76 | "type": "tabset",
77 | "weight": 50,
78 | "id": "#1",
79 | "children": [
80 | {
81 | "type": "tab",
82 | "name": "Two",
83 | "component": "testing"
84 | }
85 | ]
86 | },
87 | {
88 | "type": "row",
89 | "weight": 100,
90 | "children": [
91 | {
92 | "type": "tabset",
93 | "weight": 50,
94 | "children": [
95 | {
96 | "type": "tab",
97 | "name": "Three",
98 | "component": "testing"
99 | },
100 | {
101 | "type": "tab",
102 | "name": "Four",
103 | "component": "testing"
104 | },
105 | {
106 | "type": "tab",
107 | "name": "Five",
108 | "component": "testing"
109 | }
110 | ]
111 | },
112 | {
113 | "type": "tabset",
114 | "weight": 50,
115 | "children": [
116 | {
117 | "type": "tab",
118 | "name": "Six",
119 | "component": "testing"
120 | },
121 | {
122 | "type": "tab",
123 | "name": "Seven",
124 | "component": "testing"
125 | }
126 | ]
127 | }
128 | ]
129 | }
130 | ]
131 | }
132 | }
133 |
--------------------------------------------------------------------------------
/src/model/LayoutWindow.ts:
--------------------------------------------------------------------------------
1 | import { Rect } from "../Rect";
2 | import { IJsonPopout } from "./IJsonModel";
3 | import { Model } from "./Model";
4 | import { RowNode } from "./RowNode";
5 | import { Node } from "./Node";
6 | import { TabSetNode } from "./TabSetNode";
7 | import { LayoutInternal } from "../view/Layout";
8 |
9 | export class LayoutWindow {
10 | private _windowId: string;
11 | private _layout: LayoutInternal | undefined;
12 | private _rect: Rect;
13 | private _window?: Window | undefined;
14 | private _root?: RowNode | undefined;
15 | private _maximizedTabSet?: TabSetNode | undefined;
16 | private _activeTabSet?: TabSetNode | undefined;
17 | private _toScreenRectFunction: (rect: Rect) => Rect;
18 |
19 | constructor(windowId: string, rect: Rect) {
20 | this._windowId = windowId;
21 | this._rect = rect;
22 | this._toScreenRectFunction = (r) => r;
23 | }
24 |
25 | public visitNodes(fn: (node: Node, level: number) => void) {
26 | this.root!.forEachNode(fn, 0);
27 | }
28 |
29 | public get windowId(): string {
30 | return this._windowId;
31 | }
32 |
33 | public get rect(): Rect {
34 | return this._rect;
35 | }
36 |
37 | public get layout(): LayoutInternal | undefined {
38 | return this._layout;
39 | }
40 |
41 | public get window(): Window | undefined {
42 | return this._window;
43 | }
44 |
45 | public get root(): RowNode | undefined {
46 | return this._root;
47 | }
48 |
49 | public get maximizedTabSet(): TabSetNode | undefined {
50 | return this._maximizedTabSet;
51 | }
52 |
53 | public get activeTabSet(): TabSetNode | undefined {
54 | return this._activeTabSet;
55 | }
56 |
57 | /** @internal */
58 | public set rect(value: Rect) {
59 | this._rect = value;
60 | }
61 |
62 | /** @internal */
63 | public set layout(value: LayoutInternal) {
64 | this._layout = value;
65 | }
66 |
67 | /** @internal */
68 | public set window(value: Window | undefined) {
69 | this._window = value;
70 | }
71 |
72 | /** @internal */
73 | public set root(value: RowNode | undefined) {
74 | this._root = value;
75 | }
76 |
77 | /** @internal */
78 | public set maximizedTabSet(value: TabSetNode | undefined) {
79 | this._maximizedTabSet = value;
80 | }
81 |
82 | /** @internal */
83 | public set activeTabSet(value: TabSetNode | undefined) {
84 | this._activeTabSet = value;
85 | }
86 |
87 | /** @internal */
88 | public get toScreenRectFunction(): (rect: Rect) => Rect {
89 | return this._toScreenRectFunction!;
90 | }
91 |
92 | /** @internal */
93 | public set toScreenRectFunction(value: (rect: Rect) => Rect) {
94 | this._toScreenRectFunction = value;
95 | }
96 |
97 | public toJson(): IJsonPopout {
98 | // chrome sets top,left to large -ve values when minimized, dont save in this case
99 | if (this._window && this._window.screenTop > -10000) {
100 | this.rect = new Rect(
101 | this._window.screenLeft,
102 | this._window.screenTop,
103 | this._window.outerWidth,
104 | this._window.outerHeight
105 | );
106 | }
107 |
108 | return { layout: this.root!.toJson(), rect: this.rect.toJson() }
109 | }
110 |
111 | static fromJson(windowJson: IJsonPopout, model: Model, windowId: string): LayoutWindow {
112 | const count = model.getwindowsMap().size;
113 | const rect = windowJson.rect ? Rect.fromJson(windowJson.rect) : new Rect(50 + 50 * count, 50 + 50 * count, 600, 400);
114 | rect.snap(10); // snapping prevents issue where window moves 1 pixel per save/restore on Chrome
115 | const layoutWindow = new LayoutWindow(windowId, rect);
116 | layoutWindow.root = RowNode.fromJson(windowJson.layout, model, layoutWindow);
117 | return layoutWindow;
118 | }
119 | }
--------------------------------------------------------------------------------
/src/view/Tab.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { TabNode } from "../model/TabNode";
3 | import { TabSetNode } from "../model/TabSetNode";
4 | import { CLASSES } from "../Types";
5 | import { LayoutInternal } from "./Layout";
6 | import { BorderNode } from "../model/BorderNode";
7 | import { Actions } from "../model/Actions";
8 |
9 | /** @internal */
10 | export interface ITabProps {
11 | layout: LayoutInternal;
12 | node: TabNode;
13 | selected: boolean;
14 | path: string;
15 | }
16 |
17 | /** @internal */
18 | export const Tab = (props: ITabProps) => {
19 | const { layout, selected, node, path } = props;
20 | const selfRef = React.useRef onItemClick(item, event)}
134 | draggable={true}
135 | onDragStart={(e) => onDragStart(e, item.node)}
136 | onDragEnd={onDragEnd}
137 | title={item.node.getHelpText()} >
138 |
143 | )
144 | }
145 | );
146 |
147 | return (
148 |
154 | {itemElements}
155 |
);
156 | };
157 |
--------------------------------------------------------------------------------
/demo/styles.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | height: 100%;
4 | margin: 0;
5 | padding: 0;
6 | overflow: hidden;
7 | font-size: medium;
8 | font-family: Arial, sans-serif;
9 | }
10 |
11 | .app {
12 | display: flex;
13 | flex-direction: column;
14 | flex-grow: 1;
15 | }
16 |
17 | .toolbar {
18 | margin: 2px;
19 | display: flex;
20 | align-items: center;
21 | flex-wrap: wrap;
22 | }
23 |
24 | .toolbar_control {
25 | border-radius: 5px;
26 | border: 1px solid lightgray;
27 | }
28 |
29 | .tab_content {
30 | height: 100%;
31 | display: flex;
32 | justify-content: center;
33 | align-items: center;
34 | }
35 |
36 | #container {
37 | left: 10px;
38 | top: 10px;
39 | right: 10px;
40 | bottom: 10px;
41 | position: absolute;
42 | display: flex;
43 | overflow: hidden;
44 | background-color: white;
45 | }
46 |
47 | .contents {
48 | display: flex;
49 | flex-grow: 1;
50 | position: relative;
51 | border: 1px solid #ddd;
52 | }
53 |
54 | .drag-from {
55 | background-color: lightgray;
56 | color: black;
57 | border-radius: 5px;
58 | }
59 |
60 | .greenClass {
61 | background-color: #eeffee;
62 | }
63 |
64 | .blueClass {
65 | background-color: #eeeeff;
66 | }
67 |
68 | .simple_table {
69 | background-color: white;
70 | color: #333;
71 | border-collapse: collapse;
72 | }
73 |
74 | .simple_table th {
75 | background-color: #e0e0e0;
76 | border-right: 1px solid #ddd;
77 | padding: 4px;
78 | border-bottom-color: transparent;
79 | text-align: left;
80 | width: 100px;
81 | min-width: 100px;
82 | }
83 |
84 | .simple_table td {
85 | border-right: 1px solid #ddd;
86 | border-bottom-color: transparent;
87 | padding: 4px;
88 | }
89 |
90 | .simple_table tr:nth-child(even) {
91 | background: #f0f0f0
92 | }
93 |
94 | .simple_table tr:nth-child(odd) {
95 | background: white
96 | }
97 |
98 | ::-webkit-scrollbar {
99 | width: 8px;
100 | height: 8px;
101 | }
102 |
103 | ::-webkit-scrollbar-button {
104 | background-color: #ddd;
105 | }
106 |
107 | ::-webkit-scrollbar-track {
108 | background-color: #efefef;
109 | }
110 |
111 | ::-webkit-scrollbar-track-piece {
112 | background-color: #eee;
113 | }
114 |
115 | ::-webkit-scrollbar-thumb {
116 | height: 50px;
117 | background-color: #ccc;
118 | border-radius: 3px;
119 | }
120 |
121 | ::-webkit-scrollbar-corner {
122 | background-color: #fff;
123 | }
124 |
125 | ::-webkit-resizer {
126 | background-color: #999;
127 | }
128 |
129 | .flexlayout__theme_light {}
130 |
131 | .flexlayout__theme_dark {
132 |
133 | html,
134 | body {
135 | color: lightgray;
136 | background-color: black;
137 | }
138 |
139 | .toolbar_control {
140 | color: lightgray;
141 | background-color: black;
142 | border: 1px solid #444;
143 | }
144 |
145 | .drag-from {
146 | background-color: #666;
147 | color: white;
148 | }
149 |
150 | #container {
151 | background-color: black;
152 | }
153 |
154 | ::-webkit-scrollbar-button {
155 | background-color: #222;
156 | }
157 |
158 | ::-webkit-scrollbar-track {
159 | background-color: #444;
160 | }
161 |
162 | ::-webkit-scrollbar-track-piece {
163 | background-color: #333;
164 | }
165 |
166 | ::-webkit-scrollbar-thumb {
167 | background-color: #666;
168 | }
169 |
170 | ::-webkit-scrollbar-corner {
171 | background-color: #333;
172 | }
173 |
174 | ::-webkit-resizer {
175 | background-color: #666;
176 | }
177 |
178 | .contents {
179 | border: 1px solid gray;
180 | }
181 |
182 | /* simple_bundled table styling*/
183 | .simple_table {
184 | background-color: #222;
185 | color: gray;
186 | }
187 |
188 | .simple_table th {
189 | color: #ddd;
190 | background-color: #282828;
191 | border-right: 1px solid #333;
192 | border-bottom-color: transparent;
193 | }
194 |
195 | .simple_table td {
196 | border-right: 1px solid #333;
197 | border-bottom: 1px solid #333;
198 | }
199 |
200 | .simple_table tr:nth-child(even) {
201 | background: #242424
202 | }
203 |
204 | .simple_table tr:nth-child(odd) {
205 | background: #222
206 | }
207 | }
208 |
209 | .flexlayout__theme_gray {}
210 |
211 | .flexlayout__theme_underline {}
212 |
213 | .flexlayout__theme_rounded {
214 | .drag-from {
215 | background-color: #dce7f4;
216 | color: black;
217 | }
218 |
219 | #container {
220 | background-color: #f2f6fb;
221 | border-radius: 10px;
222 | }
223 |
224 | .toolbar {
225 | padding-left: 5px;
226 | padding-right: 5px;
227 | }
228 |
229 | ::-webkit-scrollbar-button {
230 | background-color: #e7ebf1;
231 | }
232 |
233 | ::-webkit-scrollbar-track {
234 | background-color: #e7ebf1;
235 | }
236 |
237 | ::-webkit-scrollbar-track-piece {
238 | background-color: #e7ebf1;
239 | }
240 |
241 | ::-webkit-scrollbar-thumb {
242 | background-color: #d5deeb;
243 | border-radius: 3px;
244 | }
245 |
246 | ::-webkit-scrollbar-corner {
247 | background-color: #e7ebf1;
248 | }
249 |
250 | ::-webkit-resizer {
251 | background-color: #e7ebf1;
252 | }
253 |
254 | .contents {
255 | border: 5px solid transparent;
256 | }
257 |
258 | .simple_table {
259 | background-color: white;
260 | color: #333;
261 | }
262 |
263 | .simple_table th {
264 | background-color: #dce5f2;
265 | border-right: 1px solid #ddd;
266 | border-bottom-color: transparent;
267 | }
268 |
269 | .simple_table td {
270 | border-right: 1px solid #ddd;
271 | border-bottom-color: transparent;
272 | }
273 |
274 | .simple_table tr:nth-child(even) {
275 | background: #ebeff3
276 | }
277 |
278 | .simple_table tr:nth-child(odd) {
279 | background: white
280 | }
281 |
282 | }
283 |
284 | .showLayout .flexlayout__row {
285 | margin:5px;
286 | border: 3px solid blue;
287 | }
288 |
289 | .showLayout .flexlayout__tabset {
290 | margin:5px;
291 | border: 3px solid orange;
292 | }
--------------------------------------------------------------------------------
/src/Types.ts:
--------------------------------------------------------------------------------
1 | export enum CLASSES {
2 | FLEXLAYOUT__BORDER = "flexlayout__border",
3 | FLEXLAYOUT__BORDER_ = "flexlayout__border_",
4 |
5 | FLEXLAYOUT__BORDER_TAB_CONTENTS = "flexlayout__border_tab_contents",
6 | FLEXLAYOUT__BORDER_BUTTON = "flexlayout__border_button",
7 | FLEXLAYOUT__BORDER_BUTTON_ = "flexlayout__border_button_",
8 | FLEXLAYOUT__BORDER_BUTTON_CONTENT = "flexlayout__border_button_content",
9 | FLEXLAYOUT__BORDER_BUTTON_LEADING = "flexlayout__border_button_leading",
10 | FLEXLAYOUT__BORDER_BUTTON_TRAILING = "flexlayout__border_button_trailing",
11 | FLEXLAYOUT__BORDER_BUTTON__SELECTED = "flexlayout__border_button--selected",
12 | FLEXLAYOUT__BORDER_BUTTON__UNSELECTED = "flexlayout__border_button--unselected",
13 | FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW = "flexlayout__border_toolbar_button_overflow",
14 | FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ = "flexlayout__border_toolbar_button_overflow_",
15 |
16 | FLEXLAYOUT__BORDER_INNER = "flexlayout__border_inner",
17 | FLEXLAYOUT__BORDER_INNER_ = "flexlayout__border_inner_",
18 | FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER = "flexlayout__border_inner_tab_container",
19 | FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ = "flexlayout__border_inner_tab_container_",
20 | FLEXLAYOUT__BORDER_TAB_DIVIDER = "flexlayout__border_tab_divider",
21 | FLEXLAYOUT__BORDER_LEADING = "flexlayout__border_leading",
22 |
23 | FLEXLAYOUT__BORDER_SIZER = "flexlayout__border_sizer",
24 |
25 | FLEXLAYOUT__BORDER_TOOLBAR = "flexlayout__border_toolbar",
26 | FLEXLAYOUT__BORDER_TOOLBAR_ = "flexlayout__border_toolbar_",
27 | FLEXLAYOUT__BORDER_TOOLBAR_BUTTON = "flexlayout__border_toolbar_button",
28 | FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT = "flexlayout__border_toolbar_button-float",
29 |
30 | FLEXLAYOUT__DRAG_RECT = "flexlayout__drag_rect",
31 |
32 | FLEXLAYOUT__EDGE_RECT = "flexlayout__edge_rect",
33 | FLEXLAYOUT__EDGE_RECT_TOP = "flexlayout__edge_rect_top",
34 | FLEXLAYOUT__EDGE_RECT_LEFT = "flexlayout__edge_rect_left",
35 | FLEXLAYOUT__EDGE_RECT_BOTTOM = "flexlayout__edge_rect_bottom",
36 | FLEXLAYOUT__EDGE_RECT_RIGHT = "flexlayout__edge_rect_right",
37 |
38 | FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER = "flexlayout__error_boundary_container",
39 | FLEXLAYOUT__ERROR_BOUNDARY_CONTENT = "flexlayout__error_boundary_content",
40 |
41 | FLEXLAYOUT__FLOATING_WINDOW_CONTENT = "flexlayout__floating_window_content",
42 |
43 | FLEXLAYOUT__LAYOUT = "flexlayout__layout",
44 | FLEXLAYOUT__LAYOUT_MOVEABLES = "flexlayout__layout_moveables",
45 | FLEXLAYOUT__LAYOUT_OVERLAY = "flexlayout__layout_overlay",
46 | FLEXLAYOUT__LAYOUT_TAB_STAMPS = "flexlayout__layout_tab_stamps",
47 | FLEXLAYOUT__LAYOUT_MAIN = "flexlayout__layout_main",
48 | FLEXLAYOUT__LAYOUT_BORDER_CONTAINER = "flexlayout__layout_border_container",
49 | FLEXLAYOUT__LAYOUT_BORDER_CONTAINER_INNER = "flexlayout__layout_border_container_inner",
50 |
51 | FLEXLAYOUT__OUTLINE_RECT = "flexlayout__outline_rect",
52 | FLEXLAYOUT__OUTLINE_RECT_EDGE = "flexlayout__outline_rect_edge",
53 |
54 | FLEXLAYOUT__SPLITTER = "flexlayout__splitter",
55 | FLEXLAYOUT__SPLITTER_EXTRA = "flexlayout__splitter_extra",
56 | FLEXLAYOUT__SPLITTER_ = "flexlayout__splitter_",
57 | FLEXLAYOUT__SPLITTER_BORDER = "flexlayout__splitter_border",
58 | FLEXLAYOUT__SPLITTER_DRAG = "flexlayout__splitter_drag",
59 | FLEXLAYOUT__SPLITTER_HANDLE = "flexlayout__splitter_handle",
60 | FLEXLAYOUT__SPLITTER_HANDLE_HORZ = "flexlayout__splitter_handle_horz",
61 | FLEXLAYOUT__SPLITTER_HANDLE_VERT = "flexlayout__splitter_handle_vert",
62 |
63 | FLEXLAYOUT__ROW = "flexlayout__row",
64 | FLEXLAYOUT__TAB = "flexlayout__tab",
65 | FLEXLAYOUT__TAB_POSITION = "flexlayout__tab_position",
66 | FLEXLAYOUT__TAB_MOVEABLE = "flexlayout__tab_moveable",
67 | FLEXLAYOUT__TAB_OVERLAY = "flexlayout__tab_overlay",
68 |
69 | FLEXLAYOUT__TABSET = "flexlayout__tabset",
70 | FLEXLAYOUT__TABSET_CONTAINER = "flexlayout__tabset_container",
71 | FLEXLAYOUT__TABSET_HEADER = "flexlayout__tabset_header",
72 | FLEXLAYOUT__TABSET_HEADER_CONTENT = "flexlayout__tabset_header_content",
73 | FLEXLAYOUT__TABSET_MAXIMIZED = "flexlayout__tabset-maximized",
74 | FLEXLAYOUT__TABSET_SELECTED = "flexlayout__tabset-selected",
75 | FLEXLAYOUT__TABSET_TAB_DIVIDER = "flexlayout__tabset_tab_divider",
76 | FLEXLAYOUT__TABSET_CONTENT = "flexlayout__tabset_content",
77 | FLEXLAYOUT__TABSET_TABBAR_INNER = "flexlayout__tabset_tabbar_inner",
78 | FLEXLAYOUT__TABSET_TABBAR_INNER_ = "flexlayout__tabset_tabbar_inner_",
79 | FLEXLAYOUT__TABSET_LEADING = "flexlayout__tabset_leading",
80 |
81 | FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER = "flexlayout__tabset_tabbar_inner_tab_container",
82 | FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_ = "flexlayout__tabset_tabbar_inner_tab_container_",
83 |
84 | FLEXLAYOUT__TABSET_TABBAR_OUTER = "flexlayout__tabset_tabbar_outer",
85 | FLEXLAYOUT__TABSET_TABBAR_OUTER_ = "flexlayout__tabset_tabbar_outer_",
86 |
87 | FLEXLAYOUT__TAB_BORDER = "flexlayout__tab_border",
88 | FLEXLAYOUT__TAB_BORDER_ = "flexlayout__tab_border_",
89 | FLEXLAYOUT__TAB_BUTTON = "flexlayout__tab_button",
90 | FLEXLAYOUT__TAB_BUTTON_STRETCH = "flexlayout__tab_button_stretch",
91 | FLEXLAYOUT__TAB_BUTTON_CONTENT = "flexlayout__tab_button_content",
92 | FLEXLAYOUT__TAB_BUTTON_LEADING = "flexlayout__tab_button_leading",
93 | FLEXLAYOUT__TAB_BUTTON_OVERFLOW = "flexlayout__tab_button_overflow",
94 | FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT = "flexlayout__tab_button_overflow_count",
95 | FLEXLAYOUT__TAB_BUTTON_TEXTBOX = "flexlayout__tab_button_textbox",
96 | FLEXLAYOUT__TAB_BUTTON_TRAILING = "flexlayout__tab_button_trailing",
97 | FLEXLAYOUT__TAB_BUTTON_STAMP = "flexlayout__tab_button_stamp",
98 |
99 | FLEXLAYOUT__TAB_TOOLBAR = "flexlayout__tab_toolbar",
100 | FLEXLAYOUT__TAB_TOOLBAR_BUTTON = "flexlayout__tab_toolbar_button",
101 | FLEXLAYOUT__TAB_TOOLBAR_ICON = "flexlayout__tab_toolbar_icon",
102 | FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ = "flexlayout__tab_toolbar_button-",
103 | FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT = "flexlayout__tab_toolbar_button-float",
104 | FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER = "flexlayout__tab_toolbar_sticky_buttons_container",
105 | FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE = "flexlayout__tab_toolbar_button-close",
106 |
107 | FLEXLAYOUT__POPUP_MENU_CONTAINER = "flexlayout__popup_menu_container",
108 | FLEXLAYOUT__POPUP_MENU_ITEM = "flexlayout__popup_menu_item",
109 | FLEXLAYOUT__POPUP_MENU_ITEM__SELECTED = "flexlayout__popup_menu_item--selected",
110 | FLEXLAYOUT__POPUP_MENU = "flexlayout__popup_menu",
111 |
112 | FLEXLAYOUT__MINI_SCROLLBAR = "flexlayout__mini_scrollbar",
113 | FLEXLAYOUT__MINI_SCROLLBAR_CONTAINER = "flexlayout__mini_scrollbar_container",
114 | }
115 |
--------------------------------------------------------------------------------
/src/view/PopoutWindow.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { createPortal } from "react-dom";
3 | import { CLASSES } from "../Types";
4 | import { LayoutInternal } from "./Layout";
5 | import { LayoutWindow } from "../model/LayoutWindow";
6 |
7 | /** @internal */
8 | export interface IPopoutWindowProps {
9 | title: string;
10 | layout: LayoutInternal;
11 | layoutWindow: LayoutWindow;
12 | url: string;
13 | onCloseWindow: (layoutWindow: LayoutWindow) => void;
14 | onSetWindow: (layoutWindow: LayoutWindow, window: Window) => void;
15 | }
16 |
17 | /** @internal */
18 | export const PopoutWindow = (props: React.PropsWithChildren
145 | {renderState.content}
146 |
) : null;
147 |
148 | const leading = renderState.leading ? (
149 |
150 | {renderState.leading}
151 |
) : null;
152 |
153 | if (layout.getEditingTab() === node) {
154 | content = (
155 |
165 | );
166 | }
167 |
168 | if (node.isEnableClose()) {
169 | const closeTitle = layout.i18nName(I18nLabel.Close_Tab);
170 | renderState.buttons.push(
171 |
178 | {(typeof icons.close === "function") ? icons.close(node) : icons.close}
179 |
180 | );
181 | }
182 |
183 | return (
184 |
196 | {leading}
197 | {content}
198 | {renderState.buttons}
199 |
200 | );
201 | };
202 |
--------------------------------------------------------------------------------
/src/view/TabButton.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { I18nLabel } from "../I18nLabel";
3 | import { Actions } from "../model/Actions";
4 | import { TabNode } from "../model/TabNode";
5 | import { TabSetNode } from "../model/TabSetNode";
6 | import { LayoutInternal } from "./Layout";
7 | import { ICloseType } from "../model/ICloseType";
8 | import { CLASSES } from "../Types";
9 | import { getRenderStateEx, isAuxMouseEvent } from "./Utils";
10 |
11 | /** @internal */
12 | export interface ITabButtonProps {
13 | layout: LayoutInternal;
14 | node: TabNode;
15 | selected: boolean;
16 | path: string;
17 | }
18 |
19 | /** @internal */
20 | export const TabButton = (props: ITabButtonProps) => {
21 | const { layout, node, selected, path } = props;
22 | const selfRef = React.useRef
143 | {renderState.content}
144 |
) : null;
145 |
146 | const leading = renderState.leading ? (
147 |
148 | {renderState.leading}
149 |
) : null;
150 |
151 | if (layout.getEditingTab() === node) {
152 | content = (
153 |
163 | );
164 | }
165 |
166 | if (node.isEnableClose() && !isStretch) {
167 | const closeTitle = layout.i18nName(I18nLabel.Close_Tab);
168 | renderState.buttons.push(
169 |
176 | {(typeof icons.close === "function") ? icons.close(node) : icons.close}
177 |
178 | );
179 | }
180 |
181 | return (
182 |
195 | {leading}
196 | {content}
197 | {renderState.buttons}
198 |
199 | );
200 | };
201 |
--------------------------------------------------------------------------------
/src/model/Actions.ts:
--------------------------------------------------------------------------------
1 | import { DockLocation } from "../DockLocation";
2 | import { Action } from "./Action";
3 | import { IJsonRect, IJsonRowNode } from "./IJsonModel";
4 |
5 | /**
6 | * The Action creator class for FlexLayout model actions
7 | */
8 | export class Actions {
9 | static ADD_NODE = "FlexLayout_AddNode";
10 | static MOVE_NODE = "FlexLayout_MoveNode";
11 | static DELETE_TAB = "FlexLayout_DeleteTab";
12 | static DELETE_TABSET = "FlexLayout_DeleteTabset";
13 | static RENAME_TAB = "FlexLayout_RenameTab";
14 | static SELECT_TAB = "FlexLayout_SelectTab";
15 | static SET_ACTIVE_TABSET = "FlexLayout_SetActiveTabset";
16 | static ADJUST_WEIGHTS = "FlexLayout_AdjustWeights";
17 | static ADJUST_BORDER_SPLIT = "FlexLayout_AdjustBorderSplit";
18 | static MAXIMIZE_TOGGLE = "FlexLayout_MaximizeToggle";
19 | static UPDATE_MODEL_ATTRIBUTES = "FlexLayout_UpdateModelAttributes";
20 | static UPDATE_NODE_ATTRIBUTES = "FlexLayout_UpdateNodeAttributes";
21 | static POPOUT_TAB = "FlexLayout_PopoutTab";
22 | static POPOUT_TABSET = "FlexLayout_PopoutTabset";
23 | static CLOSE_WINDOW = "FlexLayout_CloseWindow";
24 | static CREATE_WINDOW = "FlexLayout_CreateWindow";
25 |
26 | /**
27 | * Adds a tab node to the given tabset node
28 | * @param json the json for the new tab node e.g {type:"tab", component:"table"}
29 | * @param toNodeId the new tab node will be added to the tabset with this node id
30 | * @param location the location where the new tab will be added, one of the DockLocation enum values.
31 | * @param index for docking to the center this value is the index of the tab, use -1 to add to the end.
32 | * @param select (optional) whether to select the new tab, overriding autoSelectTab
33 | * @returns {Action} the action
34 | */
35 | static addNode(json: any, toNodeId: string, location: DockLocation, index: number, select?: boolean): Action {
36 | return new Action(Actions.ADD_NODE, {
37 | json,
38 | toNode: toNodeId,
39 | location: location.getName(),
40 | index,
41 | select,
42 | });
43 | }
44 |
45 | /**
46 | * Moves a node (tab or tabset) from one location to another
47 | * @param fromNodeId the id of the node to move
48 | * @param toNodeId the id of the node to receive the moved node
49 | * @param location the location where the moved node will be added, one of the DockLocation enum values.
50 | * @param index for docking to the center this value is the index of the tab, use -1 to add to the end.
51 | * @param select (optional) whether to select the moved tab(s) in new tabset, overriding autoSelectTab
52 | * @returns {Action} the action
53 | */
54 | static moveNode(fromNodeId: string, toNodeId: string, location: DockLocation, index: number, select?: boolean): Action {
55 | return new Action(Actions.MOVE_NODE, {
56 | fromNode: fromNodeId,
57 | toNode: toNodeId,
58 | location: location.getName(),
59 | index,
60 | select,
61 | });
62 | }
63 |
64 | /**
65 | * Deletes a tab node from the layout
66 | * @param tabNodeId the id of the tab node to delete
67 | * @returns {Action} the action
68 | */
69 | static deleteTab(tabNodeId: string): Action {
70 | return new Action(Actions.DELETE_TAB, { node: tabNodeId });
71 | }
72 |
73 | /**
74 | * Deletes a tabset node and all it's child tab nodes from the layout
75 | * @param tabsetNodeId the id of the tabset node to delete
76 | * @returns {Action} the action
77 | */
78 | static deleteTabset(tabsetNodeId: string): Action {
79 | return new Action(Actions.DELETE_TABSET, { node: tabsetNodeId });
80 | }
81 |
82 | /**
83 | * Change the given nodes tab text
84 | * @param tabNodeId the id of the node to rename
85 | * @param text the test of the tab
86 | * @returns {Action} the action
87 | */
88 | static renameTab(tabNodeId: string, text: string): Action {
89 | return new Action(Actions.RENAME_TAB, { node: tabNodeId, text });
90 | }
91 |
92 | /**
93 | * Selects the given tab in its parent tabset
94 | * @param tabNodeId the id of the node to set selected
95 | * @returns {Action} the action
96 | */
97 | static selectTab(tabNodeId: string): Action {
98 | return new Action(Actions.SELECT_TAB, { tabNode: tabNodeId });
99 | }
100 |
101 | /**
102 | * Set the given tabset node as the active tabset
103 | * @param tabsetNodeId the id of the tabset node to set as active
104 | * @returns {Action} the action
105 | */
106 | static setActiveTabset(tabsetNodeId: string | undefined, windowId?: string | undefined): Action {
107 | return new Action(Actions.SET_ACTIVE_TABSET, { tabsetNode: tabsetNodeId, windowId: windowId });
108 | }
109 |
110 | /**
111 | * Adjust the weights of a row, used when the splitter is moved
112 | * @param nodeId the row node whose childrens weights are being adjusted
113 | * @param weights an array of weights to be applied to the children
114 | * @returns {Action} the action
115 | */
116 | static adjustWeights(nodeId: string, weights: number[]): Action {
117 | return new Action(Actions.ADJUST_WEIGHTS, {nodeId, weights});
118 | }
119 |
120 | static adjustBorderSplit(nodeId: string, pos: number): Action {
121 | return new Action(Actions.ADJUST_BORDER_SPLIT, { node: nodeId, pos });
122 | }
123 |
124 | /**
125 | * Maximizes the given tabset
126 | * @param tabsetNodeId the id of the tabset to maximize
127 | * @returns {Action} the action
128 | */
129 | static maximizeToggle(tabsetNodeId: string, windowId?: string | undefined): Action {
130 | return new Action(Actions.MAXIMIZE_TOGGLE, { node: tabsetNodeId, windowId: windowId });
131 | }
132 |
133 | /**
134 | * Updates the global model jsone attributes
135 | * @param attributes the json for the model attributes to update (merge into the existing attributes)
136 | * @returns {Action} the action
137 | */
138 | static updateModelAttributes(attributes: any): Action {
139 | return new Action(Actions.UPDATE_MODEL_ATTRIBUTES, { json: attributes });
140 | }
141 |
142 | /**
143 | * Updates the given nodes json attributes
144 | * @param nodeId the id of the node to update
145 | * @param attributes the json attributes to update (merge with the existing attributes)
146 | * @returns {Action} the action
147 | */
148 | static updateNodeAttributes(nodeId: string, attributes: any): Action {
149 | return new Action(Actions.UPDATE_NODE_ATTRIBUTES, { node: nodeId, json: attributes });
150 | }
151 |
152 | /**
153 | * Pops out the given tab node into a new browser window
154 | * @param nodeId the tab node to popout
155 | * @returns
156 | */
157 | static popoutTab(nodeId: string): Action {
158 | return new Action(Actions.POPOUT_TAB, { node: nodeId });
159 | }
160 |
161 | /**
162 | * Pops out the given tab set node into a new browser window
163 | * @param nodeId the tab set node to popout
164 | * @returns
165 | */
166 | static popoutTabset(nodeId: string): Action {
167 | return new Action(Actions.POPOUT_TABSET, { node: nodeId });
168 | }
169 |
170 | /**
171 | * Closes the popout window
172 | * @param windowId the id of the popout window to close
173 | * @returns
174 | */
175 | static closeWindow(windowId: string): Action {
176 | return new Action(Actions.CLOSE_WINDOW, { windowId });
177 | }
178 |
179 | /**
180 | * Creates a new empty popout window with the given layout
181 | * @param layout the json layout for the new window
182 | * @param rect the window rectangle in screen coordinates
183 | * @returns
184 | */
185 | static createWindow(layout: IJsonRowNode, rect: IJsonRect): Action {
186 | return new Action(Actions.CREATE_WINDOW, { layout, rect});
187 | }
188 | }
189 |
--------------------------------------------------------------------------------
/src/model/Node.ts:
--------------------------------------------------------------------------------
1 | import { AttributeDefinitions } from "../AttributeDefinitions";
2 | import { DockLocation } from "../DockLocation";
3 | import { DropInfo } from "../DropInfo";
4 | import { Orientation } from "../Orientation";
5 | import { Rect } from "../Rect";
6 | import { IDraggable } from "./IDraggable";
7 | import { IJsonBorderNode, IJsonRowNode, IJsonTabNode, IJsonTabSetNode } from "./IJsonModel";
8 | import { Model } from "./Model";
9 |
10 | export abstract class Node {
11 | /** @internal */
12 | protected model: Model;
13 | /** @internal */
14 | protected attributes: Record
216 |
217 | );
218 | }
219 |
220 | if (extra === 0) {
221 | return (
227 | {handle}
228 |
);
229 | } else {
230 | // add extended transparent div for hit testing
231 |
232 | const style2: Record
253 |
);
260 | }
261 | };
262 |
263 |
--------------------------------------------------------------------------------
/src/view/BorderTabSet.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { DockLocation } from "../DockLocation";
3 | import { BorderNode } from "../model/BorderNode";
4 | import { TabNode } from "../model/TabNode";
5 | import { BorderButton } from "./BorderButton";
6 | import { LayoutInternal, ITabSetRenderValues } from "./Layout";
7 | import { showPopup } from "./PopupMenu";
8 | import { Actions } from "../model/Actions";
9 | import { I18nLabel } from "../I18nLabel";
10 | import { useTabOverflow } from "./TabOverflowHook";
11 | import { Orientation } from "../Orientation";
12 | import { CLASSES } from "../Types";
13 | import { isAuxMouseEvent } from "./Utils";
14 |
15 | /** @internal */
16 | export interface IBorderTabSetProps {
17 | border: BorderNode;
18 | layout: LayoutInternal;
19 | size: number;
20 | }
21 |
22 | /** @internal */
23 | export const BorderTabSet = (props: IBorderTabSetProps) => {
24 | const { border, layout, size } = props;
25 |
26 | const toolbarRef = React.useRef
258 |
259 | { e.preventDefault() }}
146 | className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER)}
147 | >
148 | {stickyButtons}
149 |
);
150 | }
151 | }
152 |
153 | if (isShowHiddenTabs) {
154 | const overflowTitle = layout.i18nName(I18nLabel.Overflow_Menu_Tooltip);
155 | let overflowContent;
156 | if (typeof icons.more === "function") {
157 | const items = hiddenTabs.map(h => { return { index: h, node: (border.getChildren()[h] as TabNode) }; });
158 |
159 | overflowContent = icons.more(border, items);
160 | } else {
161 | overflowContent = (<>
162 | {icons.more}
163 | {hiddenTabs.length>0?hiddenTabs.length: ""}
164 | );
165 | }
166 | buttons.splice(Math.min(renderState.overflowPosition, buttons.length), 0,
167 |
177 | );
178 | }
179 |
180 | const selectedIndex = border.getSelected();
181 | if (selectedIndex !== -1) {
182 | const selectedTabNode = border.getChildren()[selectedIndex] as TabNode;
183 | if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnablePopout()) {
184 | const popoutTitle = layout.i18nName(I18nLabel.Popout_Tab);
185 | buttons.push(
186 |
195 | );
196 | }
197 | }
198 | const toolbar = (
199 |
200 | {buttons}
201 |
202 | );
203 |
204 | let innerStyle = {};
205 | let outerStyle = {};
206 | const borderHeight = size - 1;
207 | if (border.getLocation() === DockLocation.LEFT) {
208 | innerStyle = { right: "100%", top: 0 };
209 | outerStyle = { width: borderHeight, overflowY: "auto" };
210 | } else if (border.getLocation() === DockLocation.RIGHT) {
211 | innerStyle = { left: "100%", top: 0 };
212 | outerStyle = { width: borderHeight, overflowY: "auto" };
213 | } else {
214 | innerStyle = { left: 0 };
215 | outerStyle = { height: borderHeight, overflowX: "auto" };
216 | }
217 |
218 | let miniScrollbar = undefined;
219 | if (border.isEnableTabScrollbar()) {
220 | miniScrollbar = (
221 |
225 | );
226 | }
227 |
228 | let leadingContainer: React.ReactNode = undefined;
229 | if (leading) {
230 | leadingContainer = (
231 |
232 | {leading}
233 |
234 | );
235 | }
236 |
237 | return (
238 |
251 | {leadingContainer}
252 |
270 | );
271 |
272 | };
273 |
--------------------------------------------------------------------------------
/src/view/TabOverflowHook.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { TabSetNode } from "../model/TabSetNode";
3 | import { BorderNode } from "../model/BorderNode";
4 | import { Orientation } from "../Orientation";
5 | import { LayoutInternal } from "./Layout";
6 | import { TabNode } from "../model/TabNode";
7 | import { startDrag } from "./Utils";
8 | import { Rect } from "../Rect";
9 |
10 | /** @internal */
11 | export const useTabOverflow = (
12 | layout: LayoutInternal,
13 | node: TabSetNode | BorderNode,
14 | orientation: Orientation,
15 | tabStripRef: React.RefObject
253 |
268 | {toolbar}
269 |
259 |
266 | {miniScrollbar}
267 |
263 | {tabButtons}
264 |
265 |