@aptre/flex-layout 0.1.0

package/package.json

@@ -0,0 +1,73 @@
+{
+    "name": "@aptre/flex-layout",
+    "author": "Caplin Systems Ltd",
+    "description": "A multi-tab docking layout manager",
+    "version": "0.1.0",
+    "license": "ISC",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/aperturerobotics/flex-layout.git"
+    },
+    "keywords": [
+        "react",
+        "layout",
+        "dock",
+        "popout",
+        "tabs",
+        "drag-and-drop",
+        "tabset",
+        "splitter",
+        "drag",
+        "drop",
+        "reactjs",
+        "react-dom"
+    ],
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./declarations/index.d.ts",
+    "exports": {
+        ".": "./dist/index.js"
+    },
+    "files": [
+        "README.md",
+        "LICENSE",
+        "tsconfig.json",
+        "style/",
+        "declarations/",
+        "typedoc/",
+        "dist/"
+    ],
+    "scripts": {
+        "build": "npm run build:style && npm run build:doc && npm run build:lib",
+        "build:min": "npm run build:style && npm run build:doc && npm run build:lib:min",
+        "build:lib": "esbuild --bundle --external:react --external:react-dom --format=esm --target=es2022 --platform=browser --outfile=./dist/index.js ./src/index.ts",
+        "build:lib:min": "npm run build:lib -- --minify",
+        "build:doc": "typedoc --out typedoc --exclude \"**/examples/**/*.tsx\" --excludeInternal --disableSources --excludePrivate --excludeProtected --readme none ./src",
+        "build:style": "sass style/underline.scss style/underline.css && sass style/gray.scss style/gray.css && sass style/light.scss style/light.css && sass style/dark.scss style/dark.css",
+        "test": "tsc --project tsconfig.json --noEmit",
+        "lint": "eslint src/*"
+    },
+    "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+    },
+    "eslintConfig": {
+        "extends": "react-app"
+    },
+    "dependencies": {},
+    "devDependencies": {
+        "@types/node": "^18.15.13",
+        "@types/prismjs": "^1.26.0",
+        "@types/react": "^18.0.5",
+        "@types/react-dom": "^18.0.1",
+        "esbuild": "^0.19.5",
+        "prettier": "^2.6.2",
+        "prismjs": "^1.28.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
+        "react-scripts": "5.0.1",
+        "sass": "^1.50.0",
+        "typedoc": "^0.24.4",
+        "typescript": "^4.9.5"
+    }
+}

package/style/_base.scss

@@ -0,0 +1,631 @@
+@mixin absoluteFill {
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    position: absolute;
+}
+
+.flexlayout {
+    &__layout {
+        @include absoluteFill;
+        overflow: hidden;
+    }
+
+    &__splitter {
+        background-color: var(--color-splitter);
+        @include splitter_mixin;
+
+        @media (hover: hover) {
+            &:hover {
+                background-color: var(--color-splitter-hover);
+                transition: background-color ease-in .1s;
+                transition-delay: 0.05s;
+                @include splitter_hover_mixin;
+            }
+        }
+        &_border {
+            z-index: 10;
+            @include splitter_border_mixin;
+        }
+        &_drag {
+            z-index: 1000;
+            background-color: var(--color-splitter-drag);
+            @include splitter_drag_mixin;
+        }
+        &_extra {
+            background-color: transparent;
+        }
+    }
+
+    &__outline_rect {
+        position: absolute;
+        pointer-events: none;
+        box-sizing: border-box;
+        border: 2px solid var(--color-drag1);
+        background: var(--color-drag1-background);
+        border-radius: 5px;
+        z-index: 1000;
+
+        &_edge {
+            pointer-events: none;
+            border: 2px solid var(--color-drag2);
+            background: var(--color-drag2-background);
+            border-radius: 5px;
+            z-index: 1000;
+            box-sizing: border-box;
+        }
+    }
+
+    &__edge_rect {
+        position: absolute;
+        z-index: 1000;
+        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+        background-color: var(--color-edge-marker);
+        pointer-events: none;
+    }
+
+    &__drag_rect {
+        position: absolute;
+        cursor: move;
+        color: var(--color-drag-rect);
+        background-color: var(--color-drag-rect-background);
+        border: 2px solid var(--color-drag-rect-border);
+        // box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3);
+        border-radius: 5px;
+        z-index: 1000;
+        box-sizing: border-box;
+        opacity: 0.9;
+        text-align: center;
+
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        overflow: hidden;
+        padding: 0.3em 1em;
+        word-wrap: break-word;
+        font-size: var(--font-size);
+        font-family: var(--font-family);
+    }
+
+    &__tabset {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background-color: var(--color-tabset-background);
+        box-sizing: border-box;
+        font-size: var(--font-size);
+        font-family: var(--font-family);
+        @include tabset_mixin;
+
+        &_tab_divider {
+            width: 4px;
+            @include tabset_tab_divider_mixin;
+        }
+
+        &_content {
+            display: flex;
+            flex-grow: 1;
+            align-items: center;
+            justify-content: center;
+        }
+
+        &_header {
+            // tabset header bar
+            display: flex;
+            align-items: center;
+            padding: 3px 3px 3px 5px;
+            box-sizing: border-box;
+            border-bottom: 1px solid var(--color-tabset-divider-line);
+            color: var(--color-tabset-header);
+            background-color: var(--color-tabset-header-background);
+            @include tabset_header_mixin;
+
+            &_content {
+                flex-grow: 1;
+            }
+        }
+
+        &_tabbar {
+            &_outer {
+                // tabset tabbar outer
+                box-sizing: border-box;
+                background-color: var(--color-tabset-background);
+                overflow: hidden;
+                display: flex;
+                @include tabset_tabbar_mixin;
+            }
+
+            &_outer_top {
+                border-bottom: 1px solid var(--color-tabset-divider-line);
+            }
+
+            &_outer_bottom {
+                border-top: 1px solid var(--color-tabset-divider-line);
+            }
+
+            &_inner {
+                // tabset tabbar inner
+                position: relative;
+                box-sizing: border-box;
+                display: flex;
+                flex-grow: 1;
+                overflow: hidden;
+
+                &_tab_container {
+                    display: flex;
+                    padding-left: 4px;
+                    padding-right: 4px;
+                    box-sizing: border-box;
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    width: 10000px;
+
+                    &_top {
+                        border-top: 2px solid transparent; // if you change this, update the _sizer above
+                    }
+                    &_bottom {
+                        border-bottom: 2px solid transparent;
+                    }
+                }
+            }
+        }
+
+        &-selected {
+            background-color: var(--color-tabset-background-selected);
+            @include tabset_selected_mixin;
+        }
+
+        &-maximized {
+            background-color: var(--color-tabset-background-maximized);
+            @include tabset_maximized_mixin;
+        }
+    }
+
+    &__tab_button_stamp {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.3em;
+        white-space: nowrap;
+        box-sizing: border-box;
+    }
+
+    &__tab {
+        overflow: auto;
+        position: absolute;
+        box-sizing: border-box;
+        background-color: var(--color-background);
+        color: var(--color-text);
+
+        &_button {
+            display: flex;
+            gap: 0.3em;
+            align-items: center;
+            box-sizing: border-box;
+            padding: 3px 0.5em; // if you change top or bottom update the tabset_sizer above
+
+            cursor: pointer;
+            @include tab_button_mixin;
+
+            &--selected {
+                background-color:var(--color-tab-selected-background);
+                color:var(--color-tab-selected);
+                @include tab_button_selected_mixin;
+            }
+            @media (hover: hover) {
+                &:hover {
+                    background-color:var(--color-tab-selected-background);
+                    color:var(--color-tab-selected);
+                    @include tab_button_hovered_mixin;
+                }
+            }
+
+            &--unselected {
+                background-color:var(--color-tab-unselected-background);
+                color:var(--color-tab-unselected);
+                @include tab_button_unselected_mixin;
+            }
+
+            &_top {
+                @include tab_top_mixin;
+            }
+
+            &_bottom {
+                @include tab_bottom_mixin;
+            }
+
+            &_leading {
+                display: flex;
+            }
+
+            &_content {
+                display: flex;
+            }
+
+            &_textbox {
+                border: none;
+                font-family: var(--font-family);
+                font-size: var(--font-size);
+                color: var(--color-tab-textbox);
+                background-color: var(--color-tab-textbox-background);
+                border: 1px inset var(--color-1);
+                border-radius: 3px;
+                width: 10em;
+            }
+
+            &_textbox:focus {
+                outline: none;
+            }
+
+            &_trailing {
+                display: flex;
+                visibility: hidden;
+                border-radius: 4px;
+                &:hover {
+                    @include close_button_hovered_mixin;
+                }
+            }
+            @media (pointer: coarse) {
+                &_trailing {
+                }
+            }
+            @media (hover: hover) {
+                &:hover &_trailing {
+                    visibility: visible;
+                }
+            }
+
+            &--selected &_trailing {
+                visibility: visible;
+            }
+
+            &_overflow {
+                display: flex;
+                align-items: center;
+                border: none;
+                color: var(--color-overflow);
+                font-size: inherit;
+                background-color: transparent;
+            }
+        }
+
+        &_toolbar {
+            display: flex;
+            align-items: center;
+            gap: .3em;
+            padding-left: .5em;
+            padding-right: .3em;
+
+            &_button {
+                border: none;
+                outline: none;
+                font-size: inherit;
+                margin: 0px;
+                background-color: transparent;
+                border-radius: 4px;
+                padding: 1px;
+                @media (hover: hover) {
+                    &:hover {
+                        @include toolbar_button_hovered_mixin;
+                    }
+                }
+
+                &-min {
+                }
+
+                &-max {
+                }
+
+                &-float {
+                }
+
+                &-close {
+                }
+            }
+
+            &_sticky_buttons_container {
+                display: flex;
+                gap: 0.3em;
+                padding-left: 5px;
+                align-items: center;
+            }
+        }
+
+        &_floating {
+            overflow: auto;
+            position: absolute;
+            box-sizing: border-box;
+            color: var(--color-text);
+            background-color: var(--color-background);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            &_inner {
+                overflow: auto;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+            }
+
+            &_inner div {
+                margin-bottom: 5px;
+                text-align: center;
+            }
+
+            &_inner div a {
+                color: royalblue;
+            }
+        }
+    }
+
+    &__border {
+        box-sizing: border-box;
+        overflow: hidden;
+        display: flex;
+        font-size: var(--font-size);
+        font-family: var(--font-family);
+        color: var(--color-border);
+        background-color: var(--color-border-background);
+        @include border_mixin;
+
+        &_top {
+            border-bottom: 1px solid var(--color-border-divider-line);
+            align-items: center;
+        }
+
+        &_bottom {
+            border-top: 1px solid var(--color-border-divider-line);
+            align-items: center;
+        }
+
+        &_left {
+            border-right: 1px solid var(--color-border-divider-line);
+            align-content: center;
+            flex-direction: column;
+        }
+
+        &_right {
+            border-left: 1px solid var(--color-border-divider-line);
+            align-content: center;
+            flex-direction: column;
+        }
+
+        &_inner {
+            position: relative;
+            box-sizing: border-box;
+            display: flex;
+            overflow: hidden;
+            flex-grow: 1;
+
+            &_tab_container {
+                white-space: nowrap;
+                display: flex;
+                padding-left: 2px;
+                padding-right: 2px;
+                box-sizing: border-box;
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 10000px;
+
+                &_right {
+                    transform-origin: top left;
+                    transform: rotate(90deg);
+                }
+                &_left {
+                    flex-direction: row-reverse;
+                    transform-origin: top right;
+                    transform: rotate(-90deg);
+                }
+            }
+        }
+
+        &_tab_divider {
+            width: 4px;
+            @include border_tab_divider_mixin;
+            }
+
+        &_button {
+            display: flex;
+            gap: 0.3em;
+            align-items: center;
+            cursor: pointer;
+            padding: 3px 0.5em;
+            margin: 2px 0px;
+            box-sizing: border-box;
+            white-space: nowrap;
+            @include border_button_mixin;
+
+            &--selected {
+                background-color: var(--color-border-tab-selected-background);
+                color: var(--color-border-tab-selected);
+                @include border_button_selected_mixin;
+            }
+            @media (hover: hover) {
+                &:hover {
+                    background-color: var(--color-border-tab-selected-background);
+                    color: var(--color-border-tab-selected);
+                    @include border_button_hovered_mixin;
+                }
+            }
+
+            &--unselected {
+                background-color: var(--color-border-tab-unselected-background);
+                color: var(--color-border-tab-unselected);
+                @include border_button_unselected_mixin;
+            }
+
+            &_leading {
+                display: flex;
+            }
+
+            &_content {
+                display: flex;
+            }
+
+            &_trailing {
+                display: flex;
+                border-radius: 4px;
+                visibility: hidden;
+                &:hover {
+                    @include close_button_hovered_mixin;
+                }
+            }
+            @media (pointer: coarse) {
+                &_trailing {
+                }
+            }
+            @media (hover: hover) {
+                &:hover &_trailing {
+                    visibility: visible;
+                }
+            }
+
+            &--selected &_trailing {
+                visibility: visible;
+            }
+        }
+
+        &_toolbar {
+            display: flex;
+            gap: .3em;
+            align-items: center;
+
+            &_left,
+            &_right {
+                flex-direction: column;
+                padding-top: .5em;
+                padding-bottom: .3em;
+            }
+
+            &_top,
+            &_bottom {
+                padding-left: .5em;
+                padding-right: .3em;
+            }
+
+            &_button {
+                border: none;
+                outline: none;
+                font-size: inherit;
+                background-color: transparent;
+                border-radius: 4px;
+                padding: 1px;
+                @media (hover: hover) {
+                    &:hover {
+                        @include toolbar_button_hovered_mixin;
+                    }
+                }
+                
+                &-float {
+                }
+
+                &_overflow {
+                    display: flex;
+                    align-items: center;
+                    border: none;
+                    color: var(--color-overflow);
+                    font-size: inherit;
+                    background-color: transparent;
+                }
+
+                &_overflow_top,
+                &_overflow_bottom {
+                }
+
+                &_overflow_right,
+                &_overflow_left {
+                }
+            }
+        }
+    }
+
+    &__popup_menu {
+        font-size: var(--font-size);
+        font-family: var(--font-family);
+
+        &_item {
+            padding: 2px 0.5em;
+            white-space: nowrap;
+            cursor: pointer;
+            border-radius: 2px;
+        }
+
+        @media (hover: hover) {
+            &_item:hover {
+                background-color: var(--color-6);
+            }
+        }
+
+        &_container {
+            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
+            border: 1px solid var(--color-popup-border);
+            color: var(--color-popup-unselected);
+            background: var(--color-popup-unselected-background);
+            border-radius: 3px;
+            position: absolute;
+            z-index: 1000;
+            max-height: 50%;
+            min-width: 100px;
+            overflow: auto;
+            padding: 2px;
+        }
+    }
+
+    &__floating_window {
+        _body {
+            height: 100%;
+        }
+
+        &_content {
+            @include absoluteFill;
+        }
+
+        &_tab {
+            overflow: auto;
+            @include absoluteFill;
+
+            box-sizing: border-box;
+            background-color: var(--color-background);
+            color: var(--color-text);
+        }
+    }
+
+    &__error_boundary_container {
+        @include absoluteFill;
+        display: flex;
+        justify-content: center;
+    }
+    &__error_boundary_content {
+        display: flex;
+        align-items: center;
+    }
+
+    // These classes are used to measure the sizes for tab header bar, tab bar and border bars,
+    // only the height is used, the padding should match the vertical spacing (padding & margins)
+    // that have been used in the above classes
+
+    &__tabset_sizer {
+        padding-top: 5px; // tab_button has 3 padding top, tabset header inner has 2 border
+        padding-bottom: 3px; // tab_button has 3 padding bottom
+        font-size: var(--font-size);
+        font-family: var(--font-family);
+    }
+
+    &__tabset_header_sizer {
+        padding-top: 3px;
+        padding-bottom: 3px;
+        font-size: var(--font-size);
+        font-family: var(--font-family);
+    }
+
+    &__border_sizer {
+        padding-top: 6px;
+        padding-bottom: 5px;
+        font-size: var(--font-size);
+        font-family: var(--font-family);
+    }
+}