@finsemble/finsemble-ui 6.2.1 → 6.3.1-beta-1

package/react/components/windowTitleBar/components/center/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../../../src/components/windowTitleBar/components/center/Tab.jsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport { FinsembleHoverDetector } from \"../../../legacyControls/FinsembleHoverDetector\";\r\nimport { Title } from \"../windowTitle\";\r\n/**\r\n * This component is pretty basic. It just takes a bunch of props and renders them.\r\n */\r\nexport default class Tab extends React.Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t\tthis.onDragOver = this.onDragOver.bind(this);\r\n\t\tthis.onDragLeave = this.onDragLeave.bind(this);\r\n\r\n\t\tthis.state = {\r\n\t\t\thoverState: \"false\",\r\n\t\t\ttitle: \"\",\r\n\t\t};\r\n\t\tthis.tabbingState = false;\r\n\t}\r\n\r\n\tonDragLeave() {\r\n\t\tthis.tabbingState = false;\r\n\t\tFSBL.Clients.RouterClient.publish(\"Finsemble.AmTabbing\", false);\r\n\t}\r\n\r\n\tonDragOver(e) {\r\n\t\tlet boundingBox = this.refs.Me.getBoundingClientRect();\r\n\t\tif (this.crossedMidline(e, boundingBox)) {\r\n\t\t\tthis.props.onTabDraggedOver(e, this.props.windowIdentifier);\r\n\t\t}\r\n\t\tif (!this.tabbingState) {\r\n\t\t\tFSBL.Clients.RouterClient.publish(\"Finsemble.AmTabbing\", true);\r\n\t\t\tthis.tabbingState = true;\r\n\t\t}\r\n\t}\r\n\r\n\tcrossedMidline(e, box) {\r\n\t\treturn FSBL.Clients.WindowClient.isPointInBox({ x: e.nativeEvent.clientX, y: e.nativeEvent.clientY }, box);\r\n\t}\r\n\r\n\thoverAction(newHoverState) {\r\n\t\tthis.setState({ hoverState: newHoverState });\r\n\t}\r\n\r\n\trender() {\r\n\t\tlet style = {\r\n\t\t\twidth: this.props.tabWidth,\r\n\t\t};\r\n\t\treturn (\r\n\t\t\t<div\r\n\t\t\t\tref=\"Me\"\r\n\t\t\t\tonDrop={this.props.onDrop}\r\n\t\t\t\tonClick={this.props.onClick}\r\n\t\t\t\tonDragStart={(e) => {\r\n\t\t\t\t\tthis.props.onDragStart(e, this.props.windowIdentifier);\r\n\t\t\t\t}}\r\n\t\t\t\tonDragEnd={this.props.onDragEnd}\r\n\t\t\t\tdraggable={true}\r\n\t\t\t\tclassName={this.props.className}\r\n\t\t\t\tdata-hover={this.state.hoverState}\r\n\t\t\t\tstyle={style}\r\n\t\t\t>\r\n\t\t\t\t{this.props.listenForDragOver && (\r\n\t\t\t\t\t<div className=\"tab-drop-region\" onDragOver={this.onDragOver} onDragLeave={this.onDragLeave}></div>\r\n\t\t\t\t)}\r\n\t\t\t\t<FinsembleHoverDetector edge=\"top\" hoverAction={this.hoverAction.bind(this)} />\r\n\t\t\t\t<Title titleWidth={this.props.titleWidth} windowIdentifier={this.props.windowIdentifier} />\r\n\t\t\t\t<div\r\n\t\t\t\t\tclassName=\"fsbl-tab-close\"\r\n\t\t\t\t\tonClick={(e) => {\r\n\t\t\t\t\t\te.preventDefault();\r\n\t\t\t\t\t\te.stopPropagation();\r\n\t\t\t\t\t\tthis.props.onTabClose(e);\r\n\t\t\t\t\t}}\r\n\t\t\t\t>\r\n\t\t\t\t\t<i className=\"ff-close\"></i>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t);\r\n\t}\r\n}\r\n"]}
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../../../src/components/windowTitleBar/components/center/Tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport { FinsembleHoverDetector } from \"../../../legacyControls/FinsembleHoverDetector\";\r\nimport { Title } from \"../windowTitle\";\r\n\r\nconst isPointInBox = (\r\n\tpoint: {\r\n\t\tx: number;\r\n\t\ty: number;\r\n\t},\r\n\tbox: {\r\n\t\ttop: number;\r\n\t\tleft: number;\r\n\t\tbottom?: number;\r\n\t\tright?: number;\r\n\t\twidth: number;\r\n\t\theight: number;\r\n\t}\r\n): boolean => {\r\n\tif (!box.bottom) box.bottom = box.top + box.height;\r\n\tif (!box.right) box.right = box.left + box.width;\r\n\treturn point.x > box.left && point.x < box.right && point.y < box.bottom && point.y > box.top;\r\n};\r\ninterface IProps {\r\n\tdraggable: string;\r\n\tclassName: string;\r\n\tonClick?: () => void;\r\n\tonDragStart: (e: any, identifier: any) => void;\r\n\tonDrop: (e?: React.DragEvent<HTMLDivElement>) => void;\r\n\tonDragEnd: (e?: any) => void;\r\n\tonTabClose: (e: React.MouseEvent<HTMLDivElement>) => void;\r\n\tonTabDraggedOver: (e: any, tabDraggedOver: any) => void;\r\n\tlistenForDragOver: boolean;\r\n\ttabWidth: number;\r\n\ttitleWidth: number;\r\n\twindowIdentifier: any;\r\n\tupdateTitle?: EventTarget;\r\n}\r\ninterface IState {\r\n\thoverState: string;\r\n\ttitle: string;\r\n}\r\n\r\n/**\r\n * This component is pretty basic. It just takes a bunch of props and renders them.\r\n */\r\nexport default class Tab extends React.Component<IProps, IState> {\r\n\ttabbingState: boolean;\r\n\r\n\tconstructor(props: IProps) {\r\n\t\tsuper(props);\r\n\t\tthis.onDragOver = this.onDragOver.bind(this);\r\n\t\tthis.onDragLeave = this.onDragLeave.bind(this);\r\n\r\n\t\tthis.state = {\r\n\t\t\thoverState: \"false\",\r\n\t\t\ttitle: \"\",\r\n\t\t};\r\n\t\tthis.tabbingState = false;\r\n\t}\r\n\r\n\tonDragLeave() {\r\n\t\tthis.tabbingState = false;\r\n\t\tFSBL.Clients.RouterClient.publish(\"Finsemble.AmTabbing\", false);\r\n\t}\r\n\r\n\tonDragOver(e: React.DragEvent<HTMLDivElement>) {\r\n\t\tconst boundingBox = (this.refs.Me as HTMLElement).getBoundingClientRect();\r\n\t\tif (this.crossedMidline(e, boundingBox)) {\r\n\t\t\tthis.props.onTabDraggedOver(e, this.props.windowIdentifier);\r\n\t\t}\r\n\t\tif (!this.tabbingState) {\r\n\t\t\tFSBL.Clients.RouterClient.publish(\"Finsemble.AmTabbing\", true);\r\n\t\t\tthis.tabbingState = true;\r\n\t\t}\r\n\t}\r\n\r\n\tcrossedMidline(e: React.DragEvent<HTMLDivElement>, box: any) {\r\n\t\treturn isPointInBox({ x: e.nativeEvent.clientX, y: e.nativeEvent.clientY }, box);\r\n\t}\r\n\r\n\thoverAction(newHoverState: string) {\r\n\t\tthis.setState({ hoverState: newHoverState });\r\n\t}\r\n\r\n\trender() {\r\n\t\tconst style = {\r\n\t\t\twidth: this.props.tabWidth,\r\n\t\t};\r\n\t\treturn (\r\n\t\t\t<div\r\n\t\t\t\tref=\"Me\"\r\n\t\t\t\tonDrop={this.props.onDrop}\r\n\t\t\t\tonClick={this.props.onClick}\r\n\t\t\t\tonDragStart={(e) => {\r\n\t\t\t\t\tthis.props.onDragStart(e, this.props.windowIdentifier);\r\n\t\t\t\t}}\r\n\t\t\t\tonDragEnd={this.props.onDragEnd}\r\n\t\t\t\tdraggable={true}\r\n\t\t\t\tclassName={this.props.className}\r\n\t\t\t\tdata-hover={this.state.hoverState}\r\n\t\t\t\tstyle={style}\r\n\t\t\t>\r\n\t\t\t\t{this.props.listenForDragOver && (\r\n\t\t\t\t\t<div className=\"tab-drop-region\" onDragOver={this.onDragOver} onDragLeave={this.onDragLeave}></div>\r\n\t\t\t\t)}\r\n\t\t\t\t<FinsembleHoverDetector edge=\"top\" hoverAction={this.hoverAction.bind(this)} />\r\n\t\t\t\t<Title\r\n\t\t\t\t\ttitleWidth={this.props.titleWidth}\r\n\t\t\t\t\twindowIdentifier={this.props.windowIdentifier}\r\n\t\t\t\t\tupdateTitle={this.props.updateTitle}\r\n\t\t\t\t/>\r\n\t\t\t\t<div\r\n\t\t\t\t\tclassName=\"fsbl-tab-close\"\r\n\t\t\t\t\tonClick={(e) => {\r\n\t\t\t\t\t\te.preventDefault();\r\n\t\t\t\t\t\te.stopPropagation();\r\n\t\t\t\t\t\tthis.props.onTabClose(e);\r\n\t\t\t\t\t}}\r\n\t\t\t\t>\r\n\t\t\t\t\t<i className=\"ff-close\"></i>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t);\r\n\t}\r\n}\r\n"]}

package/react/components/windowTitleBar/components/center/TabList.d.ts

@@ -1,36 +1,49 @@
-export class TabList extends React.Component<any, any, any> {
-    constructor(props: any);
+import * as React from "react";
+import { StandardError } from "@finsemble/finsemble-core/types/types";
+import { TabListProps, TabListState, GetTabWidthParams, TabProperties } from "../../../../types/windowTitleBar";
+import { WindowIdentifier } from "@finsemble/finsemble-core";
+export declare class TabList extends React.Component<TabListProps, TabListState> {
+    mousePositionOnDragEnd: {
+        x: number;
+        y: number;
+    };
+    onWindowResizeThrottled: (this: Window, ev: UIEvent) => any;
+    updateTitle: EventTarget;
+    constructor(props: TabListProps);
     bindCorrectContext(): void;
-    startDrag(e: any, windowIdentifier: any): void;
-    stopDrag(e: any): void;
-    cancelTabbing(): void;
-    drop(e: Event | undefined): void;
-    dragOver(e: Event | undefined): void;
-    dragLeave(e: Event | undefined): void;
-    onMouseWheel(e: Event | undefined): void;
-    findTabIndex(tab: any): any;
-    setActiveTab(tab: any): void;
-    onTabAdded(identifier: any, newIndex: any): void;
-    onTabClosed(identifier: any): void;
-    onStoreChanged(prop: any, value: any): void;
-    onTabsChanged(err: any, response: any): void;
-    onTabDraggedOver(e: any, tabDraggedOver: any): void;
-    isTabRegionOverflowing(): boolean;
+    getTabWidth(params?: GetTabWidthParams): number;
     onWindowResize(): void;
-    onWindowResizeThrottled: import("lodash").DebouncedFunc<() => void> | undefined;
-    getTabWidth(params?: {}): number;
-    setTabListTranslateX(translateX: any): void;
-    onTabListTranslateChanged(err: any, response: any): void;
-    mousePositionOnDragEnd: {
-        x: any;
-        y: any;
-    } | undefined;
-    extractWindowIdentifier(e: Event | undefined): any;
+    findTabIndex(tab: TabProperties): number;
+    startDrag(e: React.DragEvent<HTMLDivElement>, windowIdentifier: WindowIdentifier): void;
+    stopDrag(e: React.DragEvent<HTMLDivElement>): void;
+    extractWindowIdentifier(e: React.DragEvent<HTMLElement>): any;
+    drop(e?: React.DragEvent<HTMLElement>): void;
+    isTabRegionOverflowing(): boolean;
+    onMouseWheel(e: React.WheelEvent): void;
     scrollToActiveTab(): void;
     scrollToFirstTab(): void;
     scrollToLastTab(): void;
-    scrollToTab(tab: any): void;
-    getTabClasses(tab: any): string;
-    hoverAction(newHoverState: any): void;
+    scrollToTab(tab: TabProperties): void;
+    setTabListTranslateX(translateX: number): void;
+    dragOver(e: React.DragEvent): void;
+    dragLeave(e: React.DragEvent<HTMLDivElement>): void;
+    cancelTabbing(): void;
+    getTabClasses(tab: TabProperties): string;
+    onTabDraggedOver(e: React.DragEvent<HTMLElement>, tabDraggedOver: TabProperties): void;
+    onTabClosed(identifier: TabProperties): void;
+    onTabAdded(identifier: TabProperties, newIndex: number | undefined): void;
+    setActiveTab(tab: TabProperties): void;
+    onTabsChanged(err: StandardError, response: {
+        value: TabProperties[];
+    }): void;
+    onTabListTranslateChanged(err: StandardError, response: {
+        value: number;
+    }): void;
+    UNSAFE_componentWillMount(): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    hoverAction(newHoverState: string): void;
+    render(): JSX.Element;
+    renderTitle(): JSX.Element;
+    renderTabs(): JSX.Element[];
 }
-import * as React from "react";

package/react/components/windowTitleBar/components/center/TabList.js

@@ -8,22 +8,127 @@ let TAB_WIDTH = 300;
 const ICON_AREA = 16;
 const CLOSE_BUTTON_MARGIN = 12;
 const MINIMUM_TAB_SIZE = 100;
+const stopTilingOrTabbing = (params, cb) => {
+    const transmitAndQueryStop = () => {
+        FSBL.Clients.RouterClient.query("DockingService.stopTilingOrTabbing", params, () => {
+            cb === null || cb === void 0 ? void 0 : cb();
+        });
+        FSBL.Clients.RouterClient.transmit("DockingService.stopTilingOrTabbing", params);
+    };
+    if (!params.mousePosition) {
+        fin.desktop.System.getMousePosition((position) => {
+            params.mousePosition = position;
+            transmitAndQueryStop();
+            if (!params.allowDropOnSelf)
+                cb === null || cb === void 0 ? void 0 : cb();
+        });
+    }
+    else {
+        transmitAndQueryStop();
+        if (!params.allowDropOnSelf)
+            cb === null || cb === void 0 ? void 0 : cb();
+    }
+};
+const isPointInBox = (point, box) => {
+    if (!box.bottom)
+        box.bottom = box.top + box.height;
+    if (!box.right)
+        box.right = box.left + box.width;
+    return point.x > box.left && point.x < box.right && point.y < box.bottom && point.y > box.top;
+};
+function EditTab(props) {
+    const [editingTitle, setEditingTitle] = React.useState(false);
+    const [clickTimeout, setClickTimeout] = React.useState(undefined);
+    React.useEffect(() => {
+        FSBL.Clients.WindowClient.getComponentState({ field: "persistedTitle" }, (err, title) => {
+            if (title)
+                document.title = title;
+        });
+    }, []);
+    const inputEl = React.useRef(null);
+    const updateTabTitle = (e) => {
+        const title = e.target.value;
+        FSBL.Clients.WindowClient.setComponentState({
+            field: "persistedTitle",
+            value: title,
+        }, () => {
+            document.title = title;
+            setEditingTitle(false);
+        });
+    };
+    const beginEditing = async () => {
+        var _a;
+        await setEditingTitle(true);
+        await ((_a = inputEl === null || inputEl === void 0 ? void 0 : inputEl.current) === null || _a === void 0 ? void 0 : _a.focus());
+        const { wrap: win } = await FSBL.FinsembleWindow.getInstance(FSBL.Clients.WindowClient.getWindowIdentifier());
+        win.getComponentState({ field: "persistedTitle" }, (error, persistedTitle) => {
+            if (persistedTitle && (inputEl === null || inputEl === void 0 ? void 0 : inputEl.current)) {
+                inputEl.current.value = persistedTitle;
+            }
+            else {
+                win.getOptions((err, data) => {
+                    if (inputEl === null || inputEl === void 0 ? void 0 : inputEl.current) {
+                        inputEl.current.value = data.title;
+                    }
+                });
+            }
+        });
+    };
+    const clickHandler = () => {
+        if (clickTimeout) {
+            beginEditing();
+        }
+        else if (!editingTitle) {
+            let timeout = setTimeout(() => {
+                clearTimeout(clickTimeout);
+                setClickTimeout(undefined);
+            }, 500);
+            setClickTimeout(timeout);
+            if (props.tab && props.setActiveTab)
+                props.setActiveTab(props.tab);
+        }
+    };
+    const blurHandler = (e) => {
+        updateTabTitle(e);
+    };
+    const keyDownHandler = (e) => {
+        e.key === "Enter" && updateTabTitle(e);
+    };
+    return (React.createElement("div", { id: "tab-editor", onClick: clickHandler }, editingTitle ? (React.createElement("div", { className: "fsbl-tab fsbl-active-tab", style: { width: props.tabWidth || "auto" } },
+        React.createElement("input", { ref: inputEl, onBlur: blurHandler, onKeyDown: keyDownHandler, type: "text", className: "tab__input", maxLength: 32 }))) : (props.children)));
+}
 export class TabList extends React.Component {
     constructor(props) {
         super(props);
         let initialState = Store.getValues(["activeTab", "tabs"]);
         let activeIdentifier = finsembleWindow.identifier;
-        activeIdentifier.title = finsembleWindow.windowOptions.title;
+        if (activeIdentifier) {
+            activeIdentifier.title = finsembleWindow.windowOptions.title;
+        }
         this.state = {
             translateX: 0,
             tabs: initialState.tabs,
             activeTab: activeIdentifier,
-            boundingBox: {},
+            boundingBox: {
+                right: 0,
+                left: 0,
+                top: 0,
+                bottom: 0,
+                height: 0,
+                width: 0,
+            },
             iAmDragging: false,
-            hoverState: false,
+            hoverState: "false",
             tabWidth: TAB_WIDTH,
+            hoveredTabIndex: undefined,
         };
+        this.onWindowResizeThrottled = () => { };
         this.bindCorrectContext();
+        this.mousePositionOnDragEnd = {
+            x: 0,
+            y: 0,
+        };
+        this.updateTitle = new EventTarget();
     }
     bindCorrectContext() {
         this.startDrag = this.startDrag.bind(this);
@@ -33,14 +138,13 @@ export class TabList extends React.Component {
         this.dragOver = this.dragOver.bind(this);
         this.dragLeave = this.dragLeave.bind(this);
         this.onMouseWheel = this.onMouseWheel.bind(this);
-        renderTitle = renderTitle.bind(this);
-        renderTabs = renderTabs.bind(this);
+        this.renderTitle = this.renderTitle.bind(this);
+        this.renderTabs = this.renderTabs.bind(this);
         this.findTabIndex = this.findTabIndex.bind(this);
         this.setActiveTab = this.setActiveTab.bind(this);
         this.onTabAdded = this.onTabAdded.bind(this);
         this.onTabClosed = this.onTabClosed.bind(this);
         this.setActiveTab = this.setActiveTab.bind(this);
-        this.onStoreChanged = this.onStoreChanged.bind(this);
         this.onTabsChanged = this.onTabsChanged.bind(this);
         this.onTabDraggedOver = this.onTabDraggedOver.bind(this);
         this.isTabRegionOverflowing = this.isTabRegionOverflowing.bind(this);
@@ -80,8 +184,8 @@ export class TabList extends React.Component {
             iAmDragging: true,
         });
         e.dataTransfer.setData("application/fsbl-tab-data", JSON.stringify(windowIdentifier));
-        FSBL.Clients.WindowClient.startTilingOrTabbing({
-            windowIdentifier: windowIdentifier,
+        FSBL.Clients.RouterClient.transmit("DockingService.startTilingOrTabbing", {
+            windowIdentifier,
         });
     }
     stopDrag(e) {
@@ -92,16 +196,19 @@ export class TabList extends React.Component {
             y: e.nativeEvent.screenY,
         };
         const { boundingBox } = this.state;
-        FSBL.Clients.WindowClient.getBounds((err, bounds) => {
+        finsembleWindow.getBounds((err, bounds) => {
+            var _a, _b, _c, _d;
             const tabRegion = {
-                top: boundingBox.top + bounds.top,
-                bottom: boundingBox.bottom + bounds.top,
-                left: boundingBox.left + bounds.left,
-                right: boundingBox.right + bounds.left,
+                top: boundingBox.top + ((_a = bounds === null || bounds === void 0 ? void 0 : bounds.top) !== null && _a !== void 0 ? _a : 0),
+                bottom: boundingBox.bottom + ((_b = bounds === null || bounds === void 0 ? void 0 : bounds.top) !== null && _b !== void 0 ? _b : 0),
+                left: boundingBox.left + ((_c = bounds === null || bounds === void 0 ? void 0 : bounds.left) !== null && _c !== void 0 ? _c : 0),
+                right: boundingBox.right + ((_d = bounds === null || bounds === void 0 ? void 0 : bounds.left) !== null && _d !== void 0 ? _d : 0),
+                width: 0,
+                height: 0,
             };
-            if (!FSBL.Clients.WindowClient.isPointInBox(this.mousePositionOnDragEnd, tabRegion)) {
+            if (!isPointInBox(this.mousePositionOnDragEnd, tabRegion)) {
                 setTimeout(() => {
-                    FSBL.Clients.WindowClient.stopTilingOrTabbing({
+                    stopTilingOrTabbing({
                         mousePosition: this.mousePositionOnDragEnd,
                     });
                 }, 50);
@@ -112,7 +219,9 @@ export class TabList extends React.Component {
             }
             else {
                 setTimeout(() => {
-                    FSBL.Clients.WindowClient.cancelTilingOrTabbing();
+                    FSBL.Clients.RouterClient.transmit("DockingService.cancelTilingOrTabbing", {
+                        windowIdentifier: this.state.activeTab,
+                    });
                 }, 50);
             }
         });
@@ -137,15 +246,22 @@ export class TabList extends React.Component {
         }
     }
     drop(e) {
-        e.preventDefault();
-        e.stopPropagation();
+        let identifier;
+        if (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            identifier = this.extractWindowIdentifier(e);
+        }
         FSBL.Clients.Logger.system.debug("Tab drag drop.");
-        let identifier = this.extractWindowIdentifier(e);
         if (!identifier)
             return;
-        if (this.state.tabs.length === 1 && identifier.windowName === finsembleWindow.name)
-            return FSBL.Clients.WindowClient.cancelTilingOrTabbing();
-        FSBL.Clients.WindowClient.stopTilingOrTabbing({ allowDropOnSelf: true, action: "tabbing" }, () => {
+        if (this.state.tabs.length === 1 && identifier.windowName === finsembleWindow.name) {
+            FSBL.Clients.RouterClient.transmit("DockingService.cancelTilingOrTabbing", {
+                windowIdentifier: this.state.activeTab,
+            });
+            return;
+        }
+        stopTilingOrTabbing({ allowDropOnSelf: true, action: "tabbing" }, () => {
             FSBL.Clients.RouterClient.transmit("tabbingDragEnd", { success: true });
             if (identifier && identifier.windowName) {
                 this.onTabAdded(identifier, this.state.hoveredTabIndex);
@@ -207,7 +323,6 @@ export class TabList extends React.Component {
                 }
             }
             translateX = deltaY + currentX;
-            let maxRight = boundingBox.right - this.state.tabWidth;
             let newRightForLastTab = lastTab.right + translateX;
             let newLeftForFirstTab = firstTab.left + translateX;
             if (newLeftForFirstTab < 0) {
@@ -242,8 +357,6 @@ export class TabList extends React.Component {
                 translateX = 0;
             }
             else {
-                let leftEdgeOfTab = tabIndex * this.state.tabWidth;
-                let rightEdgeOfTab = leftEdgeOfTab + this.state.tabWidth;
                 translateX = boundingBox.right - boundingBox.left - rightEdgeOfTab;
                 if (rightEdgeOfTab < boundingBox.right) {
                     translateX = 0;
@@ -260,14 +373,14 @@ export class TabList extends React.Component {
     }
     dragLeave(e) {
         let boundingRect = this.state.boundingBox;
-        if (!FSBL.Clients.WindowClient.isPointInBox({ x: e.screenX, y: e.screenY }, boundingRect)) {
+        if (!isPointInBox({ x: e.screenX, y: e.screenY }, boundingRect)) {
             this.setState({
                 hoveredTabIndex: undefined,
             });
         }
     }
     cancelTabbing() {
-        FSBL.Clients.WindowClient.stopTilingOrTabbing({ allowDropOnSelf: true });
+        stopTilingOrTabbing({ allowDropOnSelf: true });
         this.onWindowResize();
     }
     getTabClasses(tab) {
@@ -295,11 +408,15 @@ export class TabList extends React.Component {
             newIndex = undefined;
         }
         let myIdentifier = finsembleWindow.identifier;
-        myIdentifier.title = finsembleWindow.windowOptions.title;
+        if (myIdentifier) {
+            myIdentifier.title = finsembleWindow.windowOptions.title;
+        }
         if (this.state.tabs.length === 1 && identifier.windowName == myIdentifier.windowName) {
             return;
         }
-        Actions.reorderTab(identifier, newIndex);
+        if (typeof newIndex === "number") {
+            Actions.reorderTab(identifier, newIndex);
+        }
         this.setState({
             hoveredTabIndex: undefined,
         });
@@ -307,17 +424,13 @@ export class TabList extends React.Component {
     setActiveTab(tab) {
         Actions.setActiveTab(tab);
     }
-    onStoreChanged(prop, value) {
-        this.setState({
-            [prop]: value,
-        });
-    }
     onTabsChanged(err, response) {
         let { value } = response;
         this.setState({
             tabs: value,
             tabWidth: this.getTabWidth({ tabList: value }),
         });
+        this.updateTitle.dispatchEvent(new Event("title-changed"));
     }
     onTabListTranslateChanged(err, response) {
         let { value } = response;
@@ -349,10 +462,8 @@ export class TabList extends React.Component {
         let { translateX } = this.state;
         translateX = Math.abs(translateX);
         let componentToRender = "title";
-        if (this.state.tabs.length === 1) {
-            if (this.props.listenForDragOver && !this.state.iAmDragging) {
-                componentToRender = "tabs";
-            }
+        if (this.state.tabs.length === 1 && this.props.listenForDragOver && !this.state.iAmDragging) {
+            componentToRender = "tabs";
         }
         if (this.state.tabs.length > 1) {
             componentToRender = "tabs";
@@ -363,35 +474,37 @@ export class TabList extends React.Component {
         if (this.refs.Me) {
             this.refs.Me.scrollLeft = translateX;
         }
-        let moveAreaClasses = "fsbl-tab-region-drag-area";
-        if (this.isTabRegionOverflowing()) {
-            moveAreaClasses = `${moveAreaClasses} gradient`;
-        }
-        return (React.createElement("div", { ref: "Me", onDragLeave: this.dragLeave, className: this.props.className, onWheel: this.onMouseWheel, onScroll: this.onMouseWheel, onDrop: this.drop, onDragOver: this.dragOver },
+        return (React.createElement("div", { ref: "Me", onDragLeave: this.dragLeave, className: this.props.className, onWheel: this.onMouseWheel, onScroll: (e) => {
+                this.onMouseWheel(e);
+            }, onDrop: this.drop, onDragOver: this.dragOver },
             React.createElement("div", { className: "tab-region-wrapper" },
-                componentToRender === "title" && renderTitle(),
-                componentToRender === "tabs" && renderTabs())));
+                componentToRender === "title" && this.renderTitle(),
+                componentToRender === "tabs" && this.renderTabs())));
+    }
+    renderTitle() {
+        const windowIdentifier = {
+            windowName: finsembleWindow.name,
+            uuid: finsembleWindow.uuid,
+        };
+        return (React.createElement(EditTab, null,
+            React.createElement("div", { draggable: "true", onDragStart: (e) => {
+                    FSBL.Clients.Logger.system.debug("Tab drag start - TITLE");
+                    let activeIdentifier = finsembleWindow.identifier;
+                    activeIdentifier.title = finsembleWindow.windowOptions.title;
+                    this.startDrag(e, activeIdentifier);
+                }, onDragEnd: this.stopDrag, "data-hover": this.state.hoverState, className: "fsbl-header-title" },
+                React.createElement(FinsembleHoverDetector, { edge: "top", hoverAction: this.hoverAction.bind(this) }),
+                React.createElement(Title, { onUpdate: this.props.onTitleUpdated, windowIdentifier: windowIdentifier }))));
+    }
+    renderTabs() {
+        let titleWidth = this.state.tabWidth - ICON_AREA - CLOSE_BUTTON_MARGIN;
+        return this.state.tabs.map((tab) => (React.createElement(EditTab, { tabWidth: this.state.tabWidth, key: tab.windowName, tab: tab, setActiveTab: this.setActiveTab },
+            React.createElement(Tab, { draggable: "true", key: tab.windowName, className: this.getTabClasses(tab), onDragStart: (e, identifier) => {
+                    FSBL.Clients.Logger.system.debug("Tab drag - TAB", identifier.windowName);
+                    this.startDrag(e, identifier);
+                }, onDrop: this.drop, onDragEnd: this.stopDrag, onTabClose: () => {
+                    this.onTabClosed(tab);
+                }, onTabDraggedOver: this.onTabDraggedOver, listenForDragOver: this.props.listenForDragOver, tabWidth: this.state.tabWidth, titleWidth: titleWidth, windowIdentifier: tab, updateTitle: this.updateTitle }))));
     }
-}
-function renderTitle() {
-    return (React.createElement("div", { draggable: "true", onDragStart: (e) => {
-            FSBL.Clients.Logger.system.debug("Tab drag start - TITLE");
-            let activeIdentifier = finsembleWindow.identifier;
-            activeIdentifier.title = finsembleWindow.windowOptions.title;
-            this.startDrag(e, activeIdentifier);
-        }, onDragEnd: this.stopDrag, "data-hover": this.state.hoverState, className: "fsbl-header-title" },
-        React.createElement(FinsembleHoverDetector, { edge: "top", hoverAction: this.hoverAction.bind(this) }),
-        React.createElement(Title, { onUpdate: this.props.onTitleUpdated, windowIdentifier: FSBL.Clients.WindowClient.getWindowIdentifier() })));
-}
-function renderTabs() {
-    let titleWidth = this.state.tabWidth - ICON_AREA - CLOSE_BUTTON_MARGIN;
-    return this.state.tabs.map((tab) => (React.createElement(Tab, { onClick: () => {
-            this.setActiveTab(tab);
-        }, draggable: "true", key: tab.windowName, className: this.getTabClasses(tab), onDragStart: (e, identifier) => {
-            FSBL.Clients.Logger.system.debug("Tab drag - TAB", identifier.windowName);
-            this.startDrag(e, identifier);
-        }, onDrop: this.drop, onDragEnd: this.stopDrag, onTabClose: () => {
-            this.onTabClosed(tab);
-        }, onTabDraggedOver: this.onTabDraggedOver, listenForDragOver: this.props.listenForDragOver, tabWidth: this.state.tabWidth, titleWidth: titleWidth, windowIdentifier: tab })));
 }
 //# sourceMappingURL=TabList.js.map