flexlayout-react 0.7.15 → 0.8.1

package/src/model/Utils.ts

@@ -3,32 +3,6 @@ import { BorderNode } from "./BorderNode";
 import { RowNode } from "./RowNode";
 import { TabNode } from "./TabNode";
 
-/** @internal */
-export function adjustSelectedIndexAfterFloat(node: TabNode) {
-    const parent = node.getParent();
-    if (parent !== null) {
-        if (parent instanceof TabSetNode) {
-            let found = false;
-            let newSelected = 0;
-            const children = parent.getChildren();
-            for (let i = 0; i < children.length; i++) {
-                const child = children[i] as TabNode;
-                if (child === node) {
-                    found = true;
-                } else {
-                    if (!child.isFloating()) {
-                        newSelected = i;
-                        if (found) break;
-                    }
-                }
-            }
-            parent._setSelected(newSelected);
-        } else if (parent instanceof BorderNode) {
-            parent._setSelected(-1);
-        }
-    }
-}
-
 /** @internal */
 export function adjustSelectedIndexAfterDock(node: TabNode) {
     const parent = node.getParent();
@@ -37,7 +11,7 @@ export function adjustSelectedIndexAfterDock(node: TabNode) {
         for (let i = 0; i < children.length; i++) {
             const child = children[i] as TabNode;
             if (child === node) {
-                parent._setSelected(i);
+                parent.setSelected(i);
                 return;
             }
         }
@@ -47,28 +21,28 @@ export function adjustSelectedIndexAfterDock(node: TabNode) {
 /** @internal */
 export function adjustSelectedIndex(parent: TabSetNode | BorderNode | RowNode, removedIndex: number) {
     // for the tabset/border being removed from set the selected index
-    if (parent !== undefined && (parent.getType() === TabSetNode.TYPE || parent.getType() === BorderNode.TYPE)) {
+    if (parent !== undefined && (parent instanceof TabSetNode || parent instanceof BorderNode)) {
         const selectedIndex = (parent as TabSetNode | BorderNode).getSelected();
         if (selectedIndex !== -1) {
             if (removedIndex === selectedIndex && parent.getChildren().length > 0) {
                 if (removedIndex >= parent.getChildren().length) {
                     // removed last tab; select new last tab
-                    parent._setSelected(parent.getChildren().length - 1);
+                    parent.setSelected(parent.getChildren().length - 1);
                 } else {
                     // leave selected index as is, selecting next tab after this one
                 }
             } else if (removedIndex < selectedIndex) {
-                parent._setSelected(selectedIndex - 1);
+                parent.setSelected(selectedIndex - 1);
             } else if (removedIndex > selectedIndex) {
                 // leave selected index as is
             } else {
-                parent._setSelected(-1);
+                parent.setSelected(-1);
             }
         }
     }
 }
 
-export function randomUUID() {
+export function randomUUID(): string {
     // @ts-ignore
     return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
       (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)

package/src/view/BorderButton.tsx

@@ -2,44 +2,48 @@ import * as React from "react";
 import { I18nLabel } from "../I18nLabel";
 import { Actions } from "../model/Actions";
 import { TabNode } from "../model/TabNode";
-import { Rect } from "../Rect";
-import { IconFactory, IIcons, ILayoutCallbacks, TitleFactory } from "./Layout";
+import { IIcons, LayoutInternal } from "./Layout";
 import { ICloseType } from "../model/ICloseType";
 import { CLASSES } from "../Types";
 import { getRenderStateEx, isAuxMouseEvent } from "./Utils";
 
 /** @internal */
 export interface IBorderButtonProps {
-    layout: ILayoutCallbacks;
+    layout: LayoutInternal;
     node: TabNode;
     selected: boolean;
     border: string;
-    iconFactory?: IconFactory;
-    titleFactory?: TitleFactory;
     icons: IIcons;
     path: string;
 }
 
 /** @internal */
 export const BorderButton = (props: IBorderButtonProps) => {
-    const { layout, node, selected, border, iconFactory, titleFactory, icons, path } = props;
+    const { layout, node, selected, border, icons, path } = props;
     const selfRef = React.useRef<HTMLDivElement | null>(null);
     const contentRef = React.useRef<HTMLInputElement | null>(null);
 
-    const onMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) => {
-
-        if (!isAuxMouseEvent(event) && !layout.getEditingTab()) {
-            layout.dragStart(event, undefined, node, node.isEnableDrag(), onClick, onDoubleClick);
+    const onDragStart = (event: React.DragEvent<HTMLElement>) => {
+        if (node.isEnableDrag()) {
+            event.stopPropagation();
+            layout.setDragNode(event.nativeEvent, node as TabNode);
+        } else {
+            event.preventDefault();
         }
     };
 
-    const onAuxMouseClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    const onDragEnd = (event: React.DragEvent<HTMLElement>) => {
+        event.stopPropagation();
+        layout.clearDragMain();
+    };
+
+    const onAuxMouseClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         if (isAuxMouseEvent(event)) {
             layout.auxMouseClick(node, event);
-        }
+        } 
     };
 
-    const onContextMenu = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    const onContextMenu = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         layout.showContextMenu(node, event);
     };
 
@@ -47,22 +51,20 @@ export const BorderButton = (props: IBorderButtonProps) => {
         layout.doAction(Actions.selectTab(node.getId()));
     };
 
-    const onDoubleClick = (event: Event) => {
-        // if (node.isEnableRename()) {
-        //     onRename();
-        // }
-    };
+    // const onDoubleClick = (event: Event) => {
+    //     // if (node.isEnableRename()) {
+    //     //     onRename();
+    //     // }
+    // };
 
     // const onRename = () => {
     //     layout.setEditingTab(node);
-    //     layout.getCurrentDocument()!.body.addEventListener("mousedown", onEndEdit);
-    //     layout.getCurrentDocument()!.body.addEventListener("touchstart", onEndEdit);
+    //     layout.getCurrentDocument()!.body.addEventListener("pointerdown", onEndEdit);
     // };
 
     const onEndEdit = (event: Event) => {
         if (event.target !== contentRef.current!) {
-            layout.getCurrentDocument()!.body.removeEventListener("mousedown", onEndEdit);
-            layout.getCurrentDocument()!.body.removeEventListener("touchstart", onEndEdit);
+            layout.getCurrentDocument()!.body.removeEventListener("pointerdown", onEndEdit);
             layout.setEditingTab(undefined);
         }
     };
@@ -81,7 +83,7 @@ export const BorderButton = (props: IBorderButtonProps) => {
         return false;
     };
 
-    const onClose = (event: React.MouseEvent<HTMLDivElement>) => {
+    const onClose = (event: React.MouseEvent<HTMLElement>) => {
         if (isClosable()) {
             layout.doAction(Actions.deleteTab(node.getId()));
         } else {
@@ -89,35 +91,18 @@ export const BorderButton = (props: IBorderButtonProps) => {
         }
     };
 
-    const onCloseMouseDown = (event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {
+    const onClosePointerDown = (event: React.PointerEvent<HTMLElement>) => {
         event.stopPropagation();
     };
 
     React.useLayoutEffect(() => {
-        updateRect();
+        node.setTabRect(layout.getBoundingClientRect(selfRef.current!));
         if (layout.getEditingTab() === node) {
             (contentRef.current! as HTMLInputElement).select();
         }
     });
 
-    const updateRect = () => {
-        // record position of tab in node
-        const layoutRect = layout.getDomRect();
-        const r = selfRef.current?.getBoundingClientRect();
-        if (r && layoutRect) {
-            node._setTabRect(
-                new Rect(
-                    r.left - layoutRect.left,
-                    r.top - layoutRect.top,
-                    r.width,
-                    r.height
-                )
-            );
-        }
-    };
-
-    const onTextBoxMouseDown = (event: React.MouseEvent<HTMLInputElement> | React.TouchEvent<HTMLInputElement>) => {
-        // console.log("onTextBoxMouseDown");
+    const onTextBoxPointerDown = (event: React.PointerEvent<HTMLInputElement>) => {
         event.stopPropagation();
     };
 
@@ -154,7 +139,7 @@ export const BorderButton = (props: IBorderButtonProps) => {
         }
     }
 
-    const renderState = getRenderStateEx(layout, node, iconFactory, titleFactory, iconAngle);
+    const renderState = getRenderStateEx(layout, node, iconAngle);
 
     let content = renderState.content ? (
         <div className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_CONTENT)}>
@@ -176,8 +161,7 @@ export const BorderButton = (props: IBorderButtonProps) => {
                 autoFocus={true}
                 defaultValue={node.getName()}
                 onKeyDown={onTextBoxKeyPress}
-                onMouseDown={onTextBoxMouseDown}
-                onTouchStart={onTextBoxMouseDown}
+                onPointerDown={onTextBoxPointerDown}
             />
         );
     }
@@ -190,9 +174,8 @@ export const BorderButton = (props: IBorderButtonProps) => {
                 data-layout-path={path + "/button/close"}
                 title={closeTitle}
                 className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_TRAILING)}
-                onMouseDown={onCloseMouseDown}
-                onClick={onClose}
-                onTouchStart={onCloseMouseDown}>
+                onPointerDown={onClosePointerDown}
+                onClick={onClose}>
                 {(typeof icons.close === "function") ? icons.close(node) : icons.close}
             </div>
         );
@@ -203,12 +186,13 @@ export const BorderButton = (props: IBorderButtonProps) => {
             ref={selfRef}
             data-layout-path={path}
             className={classNames}
-            onMouseDown={onMouseDown}
-            onClick={onAuxMouseClick}
+            onClick={onClick}
             onAuxClick={onAuxMouseClick}
             onContextMenu={onContextMenu}
-            onTouchStart={onMouseDown}
             title={node.getHelpText()}
+            draggable={true}
+            onDragStart={onDragStart}
+            onDragEnd={onDragEnd}
         >
             {leading}
             {content}

package/src/view/BorderTab.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { Orientation } from "../Orientation";
+import { LayoutInternal } from "./Layout";
+import { BorderNode } from "../model/BorderNode";
+import { Rect } from "../Rect";
+import { Splitter } from "./Splitter";
+import { DockLocation } from "../DockLocation";
+import { CLASSES } from "../Types";
+
+/** @internal */
+export interface IBorderTabProps {
+    layout: LayoutInternal;
+    border: BorderNode;
+    show: boolean;
+}
+
+export function BorderTab(props: IBorderTabProps) {
+    const { layout, border, show } = props;
+    const selfRef = React.useRef<HTMLDivElement | null>(null);
+
+    React.useLayoutEffect(() => {
+        const outerRect = layout.getBoundingClientRect(selfRef.current!);
+        const contentRect = Rect.getContentRect(selfRef.current!).relativeTo(layout.getDomRect()!);
+        if (outerRect.width > 0) {
+            border.setOuterRect(outerRect);
+            if (!border.getContentRect().equals(contentRect)) {
+                border.setContentRect(contentRect);
+                layout.redrawInternal("border content rect");
+            }
+        }
+
+    });
+
+    let horizontal = true;
+    const style: Record<string, any> = {};
+
+    if (border.getOrientation() === Orientation.HORZ) {
+        style.width = border.getSize();
+        style.minWidth = border.getMinSize();
+        style.maxWidth = border.getMaxSize();
+    } else {
+        style.height = border.getSize();
+        style.minHeight = border.getMinSize();
+        style.maxHeight = border.getMaxSize();
+        horizontal = false;
+    }
+
+    style.display = show ? "flex":"none";
+
+    const className = layout.getClassName(CLASSES.FLEXLAYOUT__BORDER_TAB_CONTENTS);
+
+    if (border.getLocation() === DockLocation.LEFT || border.getLocation() === DockLocation.TOP) {
+        return (
+            <>
+                <div ref={selfRef} style={style} className={className}>
+                </div>
+                {show && <Splitter layout={layout} node={border} index={0}  horizontal={horizontal} />}
+            </>
+        );
+    } else {
+        return (
+            <>
+                {show && <Splitter layout={layout} node={border} index={0}  horizontal={horizontal} />}
+                <div ref={selfRef} style={style}  className={className}>
+                </div>
+            </>
+        );
+
+    }
+}

package/src/view/BorderTabSet.tsx

@@ -3,46 +3,51 @@ import { DockLocation } from "../DockLocation";
 import { BorderNode } from "../model/BorderNode";
 import { TabNode } from "../model/TabNode";
 import { BorderButton } from "./BorderButton";
-import { IIcons, ILayoutCallbacks, ITabSetRenderValues, ITitleObject } from "./Layout";
-import { showPopup } from "../PopupMenu";
+import { LayoutInternal, ITabSetRenderValues } from "./Layout";
+import { showPopup } from "./PopupMenu";
 import { Actions } from "../model/Actions";
 import { I18nLabel } from "../I18nLabel";
 import { useTabOverflow } from "./TabOverflowHook";
 import { Orientation } from "../Orientation";
 import { CLASSES } from "../Types";
 import { isAuxMouseEvent } from "./Utils";
+import { Rect } from "../Rect";
 
 /** @internal */
 export interface IBorderTabSetProps {
     border: BorderNode;
-    layout: ILayoutCallbacks;
-    iconFactory?: (node: TabNode) => (React.ReactNode | undefined);
-    titleFactory?: (node: TabNode) => (ITitleObject | React.ReactNode | undefined);
-    icons: IIcons;
-    path: string;
+    layout: LayoutInternal;
+    size: number;
 }
 
 /** @internal */
 export const BorderTabSet = (props: IBorderTabSetProps) => {
-    const { border, layout, iconFactory, titleFactory, icons, path } = props;
+    const { border, layout, size } = props;
 
     const toolbarRef = React.useRef<HTMLDivElement | null>(null);
     const overflowbuttonRef = React.useRef<HTMLButtonElement | null>(null);
     const stickyButtonsRef = React.useRef<HTMLDivElement | null>(null);
 
-    const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated } = useTabOverflow(border, Orientation.flip(border.getOrientation()), toolbarRef, stickyButtonsRef);
+    const icons = layout.getIcons();
 
-    const onAuxMouseClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    React.useLayoutEffect(() => {
+        border.setTabHeaderRect(Rect.getBoundingClientRect(selfRef.current!).relativeTo(layout.getDomRect()!));
+    });
+    
+    const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated }
+        = useTabOverflow(border, Orientation.flip(border.getOrientation()), toolbarRef, stickyButtonsRef);
+
+    const onAuxMouseClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         if (isAuxMouseEvent(event)) {
             layout.auxMouseClick(border, event);
         }
     };
 
-    const onContextMenu = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    const onContextMenu = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         layout.showContextMenu(border, event);
     };
 
-    const onInterceptMouseDown = (event: React.MouseEvent | React.TouchEvent) => {
+    const onInterceptPointerDown = (event: React.PointerEvent) => {
         event.stopPropagation();
     };
 
@@ -55,9 +60,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
             showPopup(element,
                 hiddenTabs,
                 onOverflowItemSelect,
-                layout,
-                iconFactory,
-                titleFactory);
+                layout);
         }
         event.stopPropagation();
     };
@@ -67,42 +70,38 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
         userControlledLeft.current = false;
     };
 
-    const onFloatTab = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    const onPopoutTab = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         const selectedTabNode = border.getChildren()[border.getSelected()] as TabNode;
         if (selectedTabNode !== undefined) {
-            layout.doAction(Actions.floatTab(selectedTabNode.getId()));
+            layout.doAction(Actions.popoutTab(selectedTabNode.getId()));
         }
         event.stopPropagation();
     };
 
     const cm = layout.getClassName;
 
-    let style = border.getTabHeaderRect()!.styleWithPosition({});
-    const tabs: any = [];
+    const tabButtons: any = [];
 
     const layoutTab = (i: number) => {
         let isSelected = border.getSelected() === i;
         let child = border.getChildren()[i] as TabNode;
 
-        tabs.push(
+        tabButtons.push(
             <BorderButton
                 layout={layout}
                 border={border.getLocation().getName()}
                 node={child}
-                path={path + "/tb" + i}
+                path={border.getPath() + "/tb" + i}
                 key={child.getId()}
                 selected={isSelected}
-                iconFactory={iconFactory}
-                titleFactory={titleFactory}
                 icons={icons}
             />
         );
-        if (i < border.getChildren().length-1) {
-            tabs.push(
+        if (i < border.getChildren().length - 1) {
+            tabButtons.push(
                 <div key={"divider" + i} className={cm(CLASSES.FLEXLAYOUT__BORDER_TAB_DIVIDER)}></div>
             );
         }
-
     };
 
     for (let i = 0; i < border.getChildren().length; i++) {
@@ -117,10 +116,10 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
     // allow customization of tabset right/bottom buttons
     let buttons: any[] = [];
     let stickyButtons: any[] = [];
-    const renderState : ITabSetRenderValues= { headerContent: undefined, buttons, stickyButtons: stickyButtons, headerButtons: [], overflowPosition: undefined };
+    const renderState: ITabSetRenderValues = { buttons, stickyButtons: stickyButtons, overflowPosition: undefined };
     layout.customizeTabSet(border, renderState);
     buttons = renderState.buttons;
-    
+
     if (renderState.overflowPosition === undefined) {
         renderState.overflowPosition = stickyButtons.length;
     }
@@ -129,11 +128,10 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
         if (tabsTruncated) {
             buttons = [...stickyButtons, ...buttons];
         } else {
-            tabs.push(<div
+            tabButtons.push(<div
                 ref={stickyButtonsRef}
                 key="sticky_buttons_container"
-                onMouseDown={onInterceptMouseDown}
-                onTouchStart={onInterceptMouseDown}
+                onPointerDown={onInterceptPointerDown}
                 onDragStart={(e) => { e.preventDefault() }}
                 className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER)}
             >
@@ -160,8 +158,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
                 className={cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ + border.getLocation().getName())}
                 title={overflowTitle}
                 onClick={onOverflowClick}
-                onMouseDown={onInterceptMouseDown}
-                onTouchStart={onInterceptMouseDown}
+                onPointerDown={onInterceptPointerDown}
             >
                 {overflowContent}
             </button>
@@ -171,16 +168,15 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
     const selectedIndex = border.getSelected();
     if (selectedIndex !== -1) {
         const selectedTabNode = border.getChildren()[selectedIndex] as TabNode;
-        if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnableFloat() && !selectedTabNode.isFloating()) {
-            const floatTitle = layout.i18nName(I18nLabel.Float_Tab);
+        if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnablePopout()) {
+            const popoutTitle = layout.i18nName(I18nLabel.Popout_Tab);
             buttons.push(
                 <button
-                    key="float"
-                    title={floatTitle}
+                    key="popout"
+                    title={popoutTitle}
                     className={cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT)}
-                    onClick={onFloatTab}
-                    onMouseDown={onInterceptMouseDown}
-                    onTouchStart={onInterceptMouseDown}
+                    onClick={onPopoutTab}
+                    onPointerDown={onInterceptPointerDown}
                 >
                     {(typeof icons.popout === "function") ? icons.popout(selectedTabNode) : icons.popout}
                 </button>
@@ -193,31 +189,47 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
         </div>
     );
 
-    style = layout.styleFont(style);
-
     let innerStyle = {};
-    const borderHeight = border.getBorderBarSize() - 1;
+    let outerStyle = {};
+    const borderHeight = size - 1;
     if (border.getLocation() === DockLocation.LEFT) {
-        innerStyle = { right: borderHeight, height: borderHeight, top: position };
+        innerStyle = { right: "100%", top: position };
+        outerStyle = { width: borderHeight };
     } else if (border.getLocation() === DockLocation.RIGHT) {
-        innerStyle = { left: borderHeight, height: borderHeight, top: position };
+        innerStyle = { left: "100%" , top:position};
+        outerStyle = { width: borderHeight };
     } else {
-        innerStyle = { height: borderHeight, left: position };
+        innerStyle = { left:position};
+        outerStyle = { height: borderHeight };
     }
 
     return (
-        <div ref={selfRef} dir="ltr" style={style} className={borderClasses}
-            data-layout-path={path}
+        <div
+            ref={selfRef}
+            style={{
+                display: "flex",
+                flexDirection: (border.getOrientation() === Orientation.VERT ? "row" : "column")
+            }}
+            className={borderClasses}
+            data-layout-path={border.getPath()}
             onClick={onAuxMouseClick}
             onAuxClick={onAuxMouseClick}
             onContextMenu={onContextMenu}
-            onWheel={onMouseWheel}>
-            <div style={{ height: borderHeight }} className={cm(CLASSES.FLEXLAYOUT__BORDER_INNER) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_INNER_ + border.getLocation().getName())}>
-                <div style={innerStyle} className={cm(CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ + border.getLocation().getName())}>
-                    {tabs}
+            onWheel={onMouseWheel}
+        >
+            <div
+                style={outerStyle}
+                className={cm(CLASSES.FLEXLAYOUT__BORDER_INNER) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_INNER_ + border.getLocation().getName())}
+            >
+                <div
+                    style={innerStyle}
+                    className={cm(CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ + border.getLocation().getName())}
+                >
+                    {tabButtons}
                 </div>
             </div>
             {toolbar}
         </div>
     );
+
 };

package/src/view/DragContainer.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { TabNode } from "../model/TabNode";
+import { LayoutInternal } from "./Layout";
+import { CLASSES } from "../Types";
+import { TabButtonStamp } from "./TabButtonStamp";
+
+/** @internal */
+export interface IDragContainerProps {
+    node: TabNode;
+    layout: LayoutInternal;
+}
+
+/** @internal */
+export const DragContainer = (props: IDragContainerProps) => {
+    const { layout, node} = props;
+    const selfRef = React.useRef<HTMLDivElement | null>(null);
+
+    React.useEffect(()=> {
+        node.setTabStamp(selfRef.current);
+    }, [node, selfRef.current]);
+
+    const cm = layout.getClassName;
+
+    let classNames = cm(CLASSES.FLEXLAYOUT__DRAG_RECT);
+
+    return (<div
+            ref={selfRef}
+            className={classNames}>
+            <TabButtonStamp key={node.getId()} layout={layout} node={node} />
+        </div>
+    );
+};

package/src/view/Icons.tsx

@@ -51,3 +51,9 @@ export const RestoreIcon = () => {
         <svg xmlns="http://www.w3.org/2000/svg" style={style} viewBox="0 0 24 24" fill="var(--color-icon)"><path d="M0 0h24v24H0z" fill="none" /><path stroke="var(--color-icon)" d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" /></svg>
     );
 }
+
+export const AsterickIcon = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" style={style} height="24px" viewBox="0 -960 960 960" width="24px" ><path fill="var(--color-icon)" stroke="var(--color-icon)" d="M440-120v-264L254-197l-57-57 187-186H120v-80h264L197-706l57-57 186 187v-264h80v264l186-187 57 57-187 186h264v80H576l187 186-57 57-186-187v264h-80Z"/></svg>
+    );
+}