react-simple-dock 0.1.2 → 0.1.3

package/index.css

@@ -0,0 +1,192 @@
+/* Light Theme, feel free to override */
+:root {
+    --sd-grid-gap: 3px;
+}
+
+:root[data-theme="light"] {
+    --sd-background-color: #fff;
+    --sd-text-color: #000;
+    --sd-tab-border-color: #bdbdbd;
+    --sd-tab-background-color: white;
+    --sd-header-background-color: white;
+    --sd-header-border-color: #cecece;
+    --sd-overlay-color: rgba(69, 159, 232, 0.51);
+    --sd-highlight-color: #4591e8;
+}
+
+/* Dark Theme, feel free to override */
+:root[data-theme="dark"] {
+    --sd-background-color: #22272e;
+    --sd-text-color: #fff;
+    --sd-border-color: #666;
+    --sd-tab-border-color: #111;
+    --sd-highlight-color: #4591e8;
+    --sd-tab-background-color: #1c2128;
+    --sd-header-background-color: #333;
+    --sd-header-border-color: #444;
+    --sd-overlay-color: rgba(105, 159, 232, 0.51);
+}
+
+body[data-jp-theme-light] {
+    /* don't care about the theme, just that we're in JupyterLab */
+    --sd-grid-gap: 7px;
+    --sd-background-color: var(--jp-layout-color3);
+}
+
+.resize-border {
+    position: absolute;
+    background-color: var(--sd-background-color, #fff);
+    opacity: 0;
+    z-index: 10;
+}
+
+.resize-border:hover {
+    opacity: 0.8;
+}
+
+.resize-border.bottom {
+    bottom: calc(0px - var(--sd-grid-gap));
+    left: 0;
+    right: 0;
+    height: calc((var(--sd-grid-gap)));
+    cursor: row-resize;
+}
+
+.resize-border.right {
+    top: 0;
+    bottom: 0;
+    right: calc(0px - var(--sd-grid-gap));
+    width: calc((var(--sd-grid-gap)));
+    cursor: col-resize;
+}
+
+.container {
+    width: 100%;
+    height: 100%;
+}
+
+.tab-handle-overlay {
+    position: absolute;
+    box-sizing: border-box;
+    display: none;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 100;
+    background: var(--sd-overlay-color, rgba(69, 159, 232, 0.51));
+    border: 2px dashed var(--sd-highlight-color, #4591e8);
+
+    pointer-events: none;
+    transition: 0s linear;
+    transition-property: left, right, top, bottom, width, height;
+}
+
+.panel {
+    position: relative;
+    display: flex;
+    flex: 1 100000000 0;
+    align-self: stretch;
+    height: 100%;
+    width: 100%;
+    background: var(--sd-background-color);
+}
+
+.panel.leaf {
+    flex-direction: column;
+}
+
+.row > .panel-content,
+.column > .panel-content {
+    display: grid;
+    grid-gap: var(--sd-grid-gap);
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.leaf > .panel-content {
+    position: relative;
+    flex: 1;
+}
+
+.leaf > .panel-content > div {
+    background: var(--sd-tab-background-color);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: scroll;
+}
+
+/* TAB HEADER */
+
+.tab-header {
+    display: flex;
+    flex-direction: row;
+    height: var(--sd-header-height);
+}
+
+.tab-header-border {
+    position: relative;
+    height: 1px;
+    background: var(--sd-tab-border-color, #cecece);
+    margin-top: -2px;
+    z-index: 0;
+}
+
+.tab-header-bottom {
+    position: relative;
+    background: var(--sd-tab-background-color, white);
+    height: 3px;
+    z-index: 2;
+    border: solid var(--sd-tab-border-color, #bdbdbd);
+    border-width: 0 1px 1px 1px;
+    /*
+    Why did I put this ? It messes up the overall width of the layout
+    margin-left: -1px;
+    margin-right: -1px;
+    */
+}
+
+.tab-placeholder {
+    width: 0;
+    transition: width 0.1s linear;
+    height: 0;
+}
+
+.tab-handle {
+    position: relative;
+    box-sizing: border-box;
+    padding: 5px;
+    color: var(--sd-text-color, #000);
+    background: var(--sd-tab-background-color, white);
+    font-size: calc((var(--sd-header-height) - 12px) * 0.8);
+    border: solid var(--sd-tab-border-color, #bdbdbd);
+    border-width: 1px 1px 1px 1px;
+    /* Too overlap the border of the next handle and avoid double borders */
+    margin-right: -1px;
+    z-index: 1;
+}
+
+.tab-handle:nth-child(2) {
+    border-left-width: 1px;
+}
+
+.tab-handle.tab-handle__hidden {
+    z-index: 0;
+}
+
+.tab-handle.tab-handle__visible:before {
+    content: "";
+    display: block;
+    background: var(--sd-highlight-color, #4591e8);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+}

package/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "./index.css";
+import { LayoutConfig, PanelProps } from "./types";
+export declare const Panel: (props: PanelProps) => any;
+export declare function Layout(props: {
+    children: React.ReactElement<PanelProps>[] | React.ReactElement<PanelProps>;
+    defaultConfig?: LayoutConfig;
+    wrapDnd?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace Layout {
+    var defaultProps: {
+        wrapDnd: boolean;
+    };
+}

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "react-simple-dock",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "main": "index.js",
-  "types": "index.d.ts",
   "description": "Simple dock component for React",
   "repository": "https://github.com/percevalw/react-simple-dock",
   "author": "Perceval Wajsbürt <perceval.wajsburt@gmail.com>",
@@ -14,11 +13,6 @@
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"
   },
-  "files": [
-    "dist",
-    "LICENSE",
-    "README.md"
-  ],
   "browserslist": {
     "production": [
       ">0.2%",
@@ -30,5 +24,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "types": "index.d.ts"
 }

package/types.d.ts

@@ -0,0 +1,67 @@
+import React from "react";
+/**
+ * Leaf layout configuration.
+ *
+ * Represents a panel that contains one or more tabs along with the current tab index and its size.
+ */
+export type LeafLayoutConfig = {
+    kind: "leaf";
+    tabs: string[];
+    tabIndex: number;
+    size: number;
+    nesting?: number;
+};
+/**
+ * Container layout configuration.
+ *
+ * Represents a container panel that arranges its child panels in either a row or a column.
+ */
+export type ContainerLayoutConfig = {
+    kind: "row" | "column";
+    children: LayoutConfig[];
+    size: number;
+    nesting?: number;
+};
+/**
+ * Layout configuration.
+ *
+ * A union type that represents either a leaf panel (with tabs) or a container panel (row/column with children).
+ */
+export type LayoutConfig = LeafLayoutConfig | ContainerLayoutConfig;
+/**
+ * Properties for a panel component.
+ *
+ * Defines the children to render within the panel, an optional name, and an optional header.
+ */
+export type PanelProps = {
+    children: React.ReactNode;
+    name?: string;
+    header?: React.ReactNode;
+};
+/**
+ * Represents a drop zone within the layout.
+ *
+ * Includes the rectangular coordinates, the associated layout configuration,
+ * an a to indicate the drop position, and a reference to the related DOM element.
+ */
+export type Zone = {
+    rect: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+    config: LayoutConfig;
+    index: "LEFT" | "RIGHT" | "TOP" | "BOTTOM" | "CENTER" | "TAB";
+    element: HTMLElement;
+    before?: string;
+};
+/**
+ * Drag and drop item for tab header drag operations.
+ *
+ * Contains the panel name and a reference to the draggable element.
+ */
+export type DnDItem = {
+    name: string;
+    handleElement: HTMLDivElement;
+};

package/types.js

@@ -0,0 +1 @@
+export {};

package/utils.d.ts

@@ -0,0 +1,26 @@
+import { Zone, LayoutConfig } from "./types";
+/**
+ * Moves a panel within the layout based on a drop zone and panel name.
+ *
+ * This function traverses the layout config tree, removing the panel from its original position,
+ * and re-inserting it based on the provided drop zone. It handles both leaf and container nodes,
+ * ensuring proper size calculations and layout updates.
+ *
+ * @param zone - The drop zone where the panel is to be moved.
+ * @param name - The name of the panel being moved.
+ * @param inside - The layout config in which the move operation takes place.
+ * @returns The updated layout config after moving the panel.
+ */
+export declare const movePanel: (zone: Zone | null, name: string, inside: LayoutConfig) => LayoutConfig;
+/**
+ * Filters panels from a layout configuration based on a provided list of panel names.
+ *
+ * Traverses the layout configuration tree and removes any panels (or tabs within panels)
+ * whose names are not included in the specified list. It simplifies nodes by filtering
+ * out unwanted tabs and recursively updating container nodes.
+ *
+ * @param names - An array of panel names that should remain in the layout.
+ * @param inside - The layout configuration to filter.
+ * @returns The updated layout configuration with only the specified panels, or null if empty.
+ */
+export declare const filterPanels: (names: string[], inside: LayoutConfig) => LayoutConfig;

package/utils.js

@@ -0,0 +1,248 @@
+/**
+ * Simplifies a layout configuration by flattening nested layouts with the same kind.
+ *
+ * If the layout configuration is a row or column, this function will flatten any nested child configurations
+ * that have the same kind as the parent. It recalculates the size of nested items based on their parent's size.
+ *
+ * @param config - The layout configuration to simplify.
+ * @returns The simplified layout configuration.
+ */
+const simplifyLayout = (config) => {
+    if (config.kind === "row" || config.kind === "column") {
+        let expandedChildren = [];
+        let changed = false;
+        config.children.forEach((child) => {
+            if (child.kind === config.kind) {
+                changed = true;
+                const totalChildContainerSize = child.children.reduce((a, b) => a + b.size, 0);
+                child.children.forEach((grandChild) => {
+                    expandedChildren.push({
+                        ...grandChild,
+                        size: (child.size * grandChild.size) / totalChildContainerSize,
+                    });
+                });
+            }
+            else {
+                expandedChildren.push(child);
+            }
+        });
+        if (changed) {
+            config = { ...config, children: expandedChildren };
+        }
+    }
+    return config;
+};
+/**
+ * Moves a panel within the layout based on a drop zone and panel name.
+ *
+ * This function traverses the layout config tree, removing the panel from its original position,
+ * and re-inserting it based on the provided drop zone. It handles both leaf and container nodes,
+ * ensuring proper size calculations and layout updates.
+ *
+ * @param zone - The drop zone where the panel is to be moved.
+ * @param name - The name of the panel being moved.
+ * @param inside - The layout config in which the move operation takes place.
+ * @returns The updated layout config after moving the panel.
+ */
+export const movePanel = (zone, name, inside) => {
+    const editLayout = (visitedConfig) => {
+        let config = visitedConfig;
+        if (config.kind === "leaf" && config.tabs.includes(name)) {
+            /* If it's a simple leaf, try to remove the matching tab if it was
+             * the tab that was picked by the user (since we're moving it) */
+            const newTabs = config.tabs.filter((tabName) => tabName !== name);
+            config = {
+                ...config,
+                tabs: newTabs,
+                tabIndex: Math.min(newTabs.length - 1, config.tabIndex),
+            };
+            if (config.tabs.length === 0) {
+                config = null;
+            }
+        }
+        /* If this zone is the zone targeted as drop-zone by the user */
+        if (zone && visitedConfig === zone.config) {
+            if (config === null) {
+                return {
+                    kind: "leaf",
+                    tabs: [name],
+                    tabIndex: 0,
+                    size: visitedConfig.size,
+                };
+            }
+            // or it's a container zone
+            else if (config.kind === "row" || config.kind === "column") {
+                const totalSize = config.children.reduce((a, b) => a + b.size, 0);
+                const fraction = config.kind === "column"
+                    ? zone.rect.height / zone.element.parentElement.offsetHeight
+                    : zone.rect.width / zone.element.parentElement.offsetWidth;
+                // x / (y + x) = a
+                // x = a y + a x
+                // x = a y / ( 1 - a )
+                const newConfigKind = zone.index === "TOP" || zone.index === "BOTTOM" ? "column" : "row";
+                if (config.kind === newConfigKind) {
+                    const newZone = {
+                        kind: "leaf",
+                        tabs: [name],
+                        tabIndex: 0,
+                        size: (totalSize * fraction) / (1 - fraction),
+                    };
+                    config = {
+                        ...config,
+                        children: zone.index === "LEFT" || zone.index === "TOP"
+                            ? [newZone, ...config.children.map(editLayout).filter((c) => c !== null)]
+                            : [...config.children.map(editLayout).filter((c) => c !== null), newZone],
+                    };
+                }
+                else {
+                    const newZone = {
+                        kind: "leaf",
+                        tabs: [name],
+                        tabIndex: 0,
+                        size: 50,
+                    };
+                    const oldConfig = {
+                        ...config,
+                        // Remove the panel that is being moved
+                        children: config.children.map(editLayout).filter((c) => c !== null),
+                        size: 50,
+                    };
+                    config = {
+                        kind: newConfigKind,
+                        children: zone.index === "TOP" || zone.index === "LEFT" ? [newZone, oldConfig] : [oldConfig, newZone],
+                        size: config.size,
+                    };
+                }
+            }
+            // Or it's a leaf zone
+            else if (config.kind === "leaf") {
+                if (zone.index === "CENTER") {
+                    const newTabs = [...config.tabs.filter((tabName) => tabName !== name), name];
+                    config = {
+                        ...config,
+                        tabs: newTabs,
+                        tabIndex: newTabs.length - 1,
+                    };
+                }
+                else if (zone.index === "TAB") {
+                    const newTabs = [...config.tabs];
+                    let insertIndex = newTabs.findIndex((tabName) => tabName === zone.before);
+                    if (insertIndex === -1) {
+                        insertIndex = newTabs.length;
+                    }
+                    newTabs.splice(insertIndex, 0, name);
+                    config = {
+                        ...config,
+                        tabs: newTabs,
+                        tabIndex: insertIndex,
+                    };
+                }
+                else {
+                    const newZone = {
+                        kind: "leaf",
+                        tabs: [name],
+                        tabIndex: 0,
+                        size: 50,
+                    };
+                    config = {
+                        kind: zone.index === "TOP" || zone.index === "BOTTOM" ? "column" : "row",
+                        children: zone.index === "TOP" || zone.index === "LEFT"
+                            ? [newZone, { ...config, size: 50 }]
+                            : [{ ...config, size: 50, }, newZone],
+                        size: config.size,
+                    };
+                }
+            }
+        }
+        // If there is nothing left after removing the dropped zone
+        else if (config === null) {
+            return null;
+        }
+        // Otherwise, recurse into the node
+        else {
+            let hasChanged = false;
+            if (config.kind !== "leaf") {
+                const children = config.children
+                    .map((child) => {
+                    const updated = editLayout(child);
+                    if (updated !== child) {
+                        hasChanged = true;
+                    }
+                    return updated;
+                })
+                    .filter((child) => child !== null);
+                if (hasChanged) {
+                    config = { ...config, children };
+                }
+            }
+        }
+        if ((config.kind === "leaf" && config.tabs.length === 0) ||
+            (config.kind !== "leaf" && config.children.length === 0)) {
+            return null;
+        }
+        /* Simplify a node of the layout by flattening row children of rows
+         * or column children of columns */
+        config = simplifyLayout(config);
+        return config;
+    };
+    return editLayout(inside);
+};
+/**
+ * Filters panels from a layout configuration based on a provided list of panel names.
+ *
+ * Traverses the layout configuration tree and removes any panels (or tabs within panels)
+ * whose names are not included in the specified list. It simplifies nodes by filtering
+ * out unwanted tabs and recursively updating container nodes.
+ *
+ * @param names - An array of panel names that should remain in the layout.
+ * @param inside - The layout configuration to filter.
+ * @returns The updated layout configuration with only the specified panels, or null if empty.
+ */
+export const filterPanels = (names, inside) => {
+    const editLayout = (visitedConfig) => {
+        let config = visitedConfig;
+        if (config.kind === "leaf" && !config.tabs.every((name) => names.includes(name))) {
+            /* If it's a simple leaf, try to remove the matching tab if it was
+             * the tab that was picked by the user (since we're moving it) */
+            config = {
+                ...config,
+                tabs: config.tabs.filter((name) => names.includes(name)),
+                tabIndex: Math.min(config.tabs.length - 1, config.tabIndex),
+            };
+            if (config.tabs.length === 0) {
+                config = null;
+            }
+        }
+        // If there is nothing left after removing the dropped zone
+        if (config === null) {
+            return null;
+        }
+        // Otherwise, recurse into the node
+        else {
+            let hasChanged = false;
+            if (config.kind !== "leaf") {
+                const children = config.children
+                    .map((child) => {
+                    const updated = editLayout(child);
+                    if (updated !== child) {
+                        hasChanged = true;
+                    }
+                    return updated;
+                })
+                    .filter((child) => child !== null);
+                if (hasChanged) {
+                    config = { ...config, children };
+                }
+            }
+        }
+        if ((config.kind === "leaf" && config.tabs.length === 0) ||
+            (config.kind !== "leaf" && config.children.length === 0)) {
+            return null;
+        }
+        /* Simplify a node of the layout by flattening row children of rows
+         * or column children of columns */
+        config = simplifyLayout(config);
+        return config;
+    };
+    return editLayout(inside);
+};