{String(e)}
+ }
+ } else if (component === "tabstorage") {
+ return
+
+ This is a customized +
+ drag rectangle +
+
+ )
+ } else {
+ return undefined // use default rendering
+ }
+ },
+ onRenderTab(node, renderValues) {
+ // renderValues.content = (+ This is a customized +
+ drag rectangle +
);
+ },
+
+ onRenderTabSet(node, renderValues) {
+ if (ctx.layoutFile === "default") {
+ //renderValues.headerContent = "-- " + renderValues.headerContent + " --";
+ //renderValues.buttons.push();
+ renderValues.stickyButtons.push(
+ 
onAddFromTabSetButton(node)}
+ />
+ )
+ }
+ },
+
+ onTabSetPlaceHolder(node) {
+ return Drag tabs to this area
+ },
+
+ onExternalDrag(e) {
+ // console.log("onExternaldrag ", e.dataTransfer.types);
+ // Check for supported content type
+ const validTypes = ["text/uri-list", "text/html", "text/plain"]
+ if (e.dataTransfer.types.find((t) => validTypes.indexOf(t) !== -1) === undefined) return
+ // Set dropEffect (icon)
+ e.dataTransfer.dropEffect = "link"
+ return {
+ dragText: "Drag To New Tab",
+ json: {
+ type: "tab",
+ component: "multitype",
+ },
+ onDrop: (node?: Node, event?: Event) => {
+ if (!node || !event) return // aborted drag
+
+ if (node instanceof TabNode && event instanceof DragEvent) {
+ const dragEvent = event as DragEvent
+ if (dragEvent.dataTransfer) {
+ if (dragEvent.dataTransfer.types.indexOf("text/uri-list") !== -1) {
+ const data = dragEvent.dataTransfer!.getData("text/uri-list")
+ ctx.model!.doAction(Actions.updateNodeAttributes(node.getId(), { name: "Url", config: { data, type: "url" } }))
+ } else if (dragEvent.dataTransfer.types.indexOf("text/html") !== -1) {
+ const data = dragEvent.dataTransfer!.getData("text/html")
+ ctx.model!.doAction(Actions.updateNodeAttributes(node.getId(), { name: "Html", config: { data, type: "html" } }))
+ } else if (dragEvent.dataTransfer.types.indexOf("text/plain") !== -1) {
+ const data = dragEvent.dataTransfer!.getData("text/plain")
+ ctx.model!.doAction(Actions.updateNodeAttributes(node.getId(), { name: "Text", config: { data, type: "text" } }))
+ }
+ }
+ }
+ },
+ }
+ },
+
+ titleFactory(node) {
+ if (node.getId() === "custom-tab") {
+ // return "(Added by titleFactory) " + node.getName();
+ return {
+ titleContent: (Added by titleFactory) {node.getName()}
,
+ name: "the name for custom tab",
+ }
+ }
+ return
+ },
+
+ // icons={{
+ // more: (node: (TabSetNode | BorderNode), hiddenTabs: { node: TabNode; index: number }[]) => {
+ // return ({hiddenTabs.length}
);
+ // }
+ // }}
+
+ // classNameMapper={
+ // className => {
+ // console.log(className);
+ // if (className === "flexlayout__tab_button--selected") {
+ // className = "override__tab_button--selected";
+ // }
+ // return className;
+ // }
+ // }
+ // i18nMapper = {
+ // (id, param?) => {
+ // if (id === I18nLabel.Move_Tab) {
+ // return `move this tab: ${param}`;
+ // } else if (id === I18nLabel.Move_Tabset) {
+ // return `move this tabset`
+ // }
+ // return undefined;
+ // }
+ // }
+ }
+
+ let additionalProps: Omit
+
+
+ {!ctx.model && "loading ..."}
+ {ctx.model &&
+ -
+
-
+ Help text (tooltip) option on tabs:
+ Hover over this tab button +
+ -
+ Action to close tabset:
+
+ See added x button in this tabset +
+ -
+ Intercept drag drop to allow dropping tabs into custom areas:
+
+ See Tab Storage tab +
+ -
+ Allow narrow splitters with extended hit test areas:
+
+ Uses the splitterExtra global attribute +
+ -
+ Tab attributes: borderWidth, borderHeight to allow tabs to have individual sizes in borders:
+
+ Try the 'With border sizes' tab +
+ -
+ Customize the drag rectangle using the callback property: onRenderDragRect
+ In this layout all drag rectangles are custom rendered +
+ -
+ New border attribute: enableAutoHide, to hide border if it has zero tabs:
+
+ Try moving all tabs from any of the borders +
+ -
+ New onRenderFloatingTabPlaceholder prop:
+
+ Popout one of the tabs to see the custom rendered placeholder +
+ -
+ New onContextMenu prop:
+
+ All tabs and tabsets in this layout have a custom context menu +
+
onItemClick(item, event)}>
+ {item}
+
+ ))
+
+ return (
+
+
+ )
+}
+
+export default PopupMenu
diff --git a/examples/flexlayout-react-demo/src/components/SelectFontsize.tsx b/examples/flexlayout-react-demo/src/components/SelectFontsize.tsx
new file mode 100644
index 00000000..beb7b134
--- /dev/null
+++ b/examples/flexlayout-react-demo/src/components/SelectFontsize.tsx
@@ -0,0 +1,43 @@
+// Libs
+
+// Project imports
+import { useAppContext } from "../Context"
+
+const options = [
+ { text: "Size xx-small", value: "xx-small" },
+ { text: "Size x-small", value: "x-small" },
+ { text: "Size small", value: "small" },
+ { text: "Size medium", value: "medium" },
+ { text: "Size large", value: "large" },
+ { text: "Size 8px", value: "8px" },
+ { text: "Size 10px", value: "10px" },
+ { text: "Size 12px", value: "12px" },
+ { text: "Size 14px", value: "14px" },
+ { text: "Size 16px", value: "16px" },
+ { text: "Size 18px", value: "18px" },
+ { text: "Size 20px", value: "20px" },
+ { text: "Size 25px", value: "25px" },
+ { text: "Size 30px", value: "30px" },
+]
+
+interface ComponentProps extends React.ComponentProps<"select"> {}
+
+const SelectFontsize: React.FC{title}
+ {itemElements}
+
+
+ )
+}
+
+export default TabStorage
diff --git a/examples/flexlayout-react-demo/src/components/Table.tsx b/examples/flexlayout-react-demo/src/components/Table.tsx
new file mode 100644
index 00000000..ee6ec3aa
--- /dev/null
+++ b/examples/flexlayout-react-demo/src/components/Table.tsx
@@ -0,0 +1,40 @@
+// Libs
+
+// Project imports
+
+interface ComponentProps extends React.ComponentProps<"table"> {
+ fields: any
+ data: any
+}
+
+const Table: React.FC+ This component demonstrates the custom drag and drop features of FlexLayout, by allowing you to store tabs in a list. You can drag tabs into the list, reorder the list, and drag tabs out of + the list, all using the layout's built-in drag system! +
+
+ {storedTabs.length === 0 && (
+
+
+ Looks like there's nothing here! Try dragging a tab over this text.
+
+ )}
+ {storedTabs.map((stored, i) => (
+ (ref ? refs.set(stored.id!, ref) : refs.delete(stored.id!))}
+ className="tab-storage-entry"
+ key={stored.id}
+ onMouseDown={(e) => {
+ e.preventDefault()
+ layout.addTabWithDragAndDrop(stored.name ?? "Unnamed", stored, (node) => node && setStoredTabs((tabs) => tabs.filter((tab) => tab !== stored)))
+ }}
+ onTouchStart={(e) => {
+ layout.addTabWithDragAndDrop(stored.name ?? "Unnamed", stored, (node) => node && setStoredTabs((tabs) => tabs.filter((tab) => tab !== stored)))
+ }}
+ >
+ {stored.name ?? "Unnamed"}
+
+ ))}
+
+
+ )
+}
+
+export default Toolbar
diff --git a/examples/flexlayout-react-demo/src/main.tsx b/examples/flexlayout-react-demo/src/main.tsx
new file mode 100644
index 00000000..4e5dca2b
--- /dev/null
+++ b/examples/flexlayout-react-demo/src/main.tsx
@@ -0,0 +1,15 @@
+import React from "react"
+import ReactDOM from "react-dom/client"
+
+import App from "./App"
+import { AppContextProvider } from "./Context"
+
+import "prismjs/themes/prism-coy.css"
+
+ReactDOM.createRoot(document.getElementById("container") as HTMLElement).render(
+