@kiberon-labs/behave-graph-flow 1.0.0 → 2.0.0

package/src/components/layoutController/index.tsx

@@ -0,0 +1,117 @@
+import type { LayoutBase, TabBase, TabData, TabGroup } from 'rc-dock';
+import { DockLayout } from 'rc-dock';
+import React, { useCallback } from 'react';
+import { VscodeButton } from '@vscode-elements/react-elements';
+import { Reduce, Maximize, Xmark } from 'iconoir-react';
+import { useSystem } from '@/system/provider.js';
+import { MenuBar } from '../menubar';
+import { useStore } from 'zustand';
+import { findGraphPanel } from './utils';
+
+import styles from './index.module.css';
+import { NotificationProvider } from '../notifications';
+
+const groups: Record<string, TabGroup> = {
+  default: {
+    animated: false,
+    floatable: true
+  },
+  headless: {
+    floatable: true,
+    maximizable: true,
+    disableDock: true,
+    panelExtra: () => <></>
+  },
+  popout: {
+    animated: false,
+    floatable: true,
+
+    panelExtra: (panelData, context) => {
+      const buttons: React.ReactElement[] = [];
+      buttons.push(
+        <VscodeButton
+          secondary
+          iconOnly
+          key="close"
+          title="Close"
+          onClick={() => context.dockMove(panelData, null, 'remove')}
+        >
+          <Xmark />
+        </VscodeButton>
+      );
+      return <div className={styles.panelExtra}>{buttons}</div>;
+    }
+  },
+  /**
+   * Note that the graph has a huge issue when ran in a popout window, as such we disable it for now
+   */
+  graph: {
+    animated: false,
+    floatable: true,
+    panelExtra: (panelData, context) => {
+      const buttons: React.ReactElement[] = [];
+      if (panelData?.parent?.mode !== 'window') {
+        const maxxed = panelData?.parent?.mode === 'maximize';
+        buttons.push(
+          <VscodeButton
+            key="maximize"
+            secondary
+            title={
+              panelData?.parent?.mode === 'maximize' ? 'Restore' : 'Maximize'
+            }
+            iconOnly
+            onClick={() => context.dockMove(panelData, null, 'maximize')}
+          >
+            {maxxed ? <Reduce /> : <Maximize />}
+          </VscodeButton>
+        );
+      }
+
+      return <div className={styles.panelExtra}>{buttons}</div>;
+    }
+  }
+};
+
+export const LayoutController = (props: {}) => {
+  const system = useSystem();
+  const showMenu = useStore(system.systemSettings, (x) => x.showMenu);
+  const setCurrentPanel = useStore(system.tabStore, (s) => s.setCurrentPanel);
+  const setLayout = useStore(system.tabStore, (s) => s.setLayout);
+  const layout = useStore(system.tabStore, (s) => s.layout);
+
+  const loadTab = useCallback(
+    (tab: TabBase): TabData => {
+      const loaded = system.tabLoader.load(tab);
+      if (!loaded) {
+        return tab as TabData;
+      }
+      return loaded;
+    },
+    [system, props]
+  );
+
+  const onLayoutChange = (newLayout: LayoutBase) => {
+    //We need to find the graph tab container in the newlayout
+    const graphContainer = findGraphPanel(newLayout);
+
+    if (graphContainer?.activeId) {
+      //Get the active Id to find the currently selected graph
+      setCurrentPanel(graphContainer.activeId!);
+    }
+    setLayout(newLayout);
+  };
+
+  return (
+    <div className={styles.root}>
+      {showMenu && <MenuBar />}
+      <DockLayout
+        layout={layout}
+        groups={groups}
+        loadTab={loadTab}
+        style={{ flex: 1, height: '100%', width: '100%' }}
+        onLayoutChange={onLayoutChange}
+      />
+      <NotificationProvider />
+    </div>
+  );
+};

package/src/components/layoutController/utils.ts

@@ -0,0 +1,205 @@
+import type { BoxBase, LayoutBase, PanelBase, TabData } from 'rc-dock';
+
+export function recurseFindGraphPanel(
+  base: BoxBase | PanelBase
+): PanelBase | null {
+  if (base.id === 'graphs') {
+    return base as PanelBase;
+  }
+  //Check if it has children
+  if ((base as BoxBase).children) {
+    for (const child of (base as BoxBase).children) {
+      const found = recurseFindGraphPanel(child);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+}
+
+export function findGraphPanel(layout: LayoutBase): PanelBase | null {
+  //We need to recursively search for the graph panel
+  // It is most likely in the dockbox
+  const dockbox = recurseFindGraphPanel(layout.dockbox);
+  if (dockbox) {
+    return dockbox;
+  }
+  if (layout.floatbox) {
+    const floatBox = recurseFindGraphPanel(layout.floatbox);
+    if (floatBox) {
+      return floatBox;
+    }
+  } else if (layout.maxbox) {
+    const tab = recurseFindGraphPanel(layout.maxbox);
+    if (tab) {
+      return tab;
+    }
+  } else if (layout.windowbox) {
+    const tab = recurseFindGraphPanel(layout.windowbox);
+    if (tab) {
+      return tab;
+    }
+  }
+  return null;
+}
+
+function recurseFindTab(
+  base: BoxBase | PanelBase,
+  tabId: string
+): PanelBase | null {
+  // Check if this is a panel with tabs
+  if ((base as PanelBase).tabs) {
+    const panel = base as PanelBase;
+    const hasTab = panel.tabs?.some((tab) => tab.id === tabId);
+    if (hasTab) {
+      return panel;
+    }
+  }
+
+  // Check if it has children
+  if ((base as BoxBase).children) {
+    for (const child of (base as BoxBase).children) {
+      const found = recurseFindTab(child, tabId);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+}
+
+export function findTabInLayout(
+  layout: LayoutBase,
+  tabId: string
+): PanelBase | null {
+  // Search in dockbox
+  if (layout.dockbox) {
+    const found = recurseFindTab(layout.dockbox, tabId);
+    if (found) return found;
+  }
+
+  // Search in floatbox
+  if (layout.floatbox) {
+    const found = recurseFindTab(layout.floatbox, tabId);
+    if (found) return found;
+  }
+
+  // Search in maxbox
+  if (layout.maxbox) {
+    const found = recurseFindTab(layout.maxbox, tabId);
+    if (found) return found;
+  }
+
+  // Search in windowbox
+  if (layout.windowbox) {
+    const found = recurseFindTab(layout.windowbox, tabId);
+    if (found) return found;
+  }
+
+  return null;
+}
+
+function removeTabFromPanel(panel: PanelBase, tabId: string): PanelBase {
+  return {
+    ...panel,
+    tabs: panel.tabs?.filter((tab) => tab.id !== tabId)
+  };
+}
+
+function recursiveRemoveTab(
+  base: BoxBase | PanelBase,
+  tabId: string
+): BoxBase | PanelBase | null {
+  // If this is a panel with tabs, remove the tab
+  if ((base as PanelBase).tabs) {
+    const panel = base as PanelBase;
+    const hasTab = panel.tabs?.some((tab) => tab.id === tabId);
+    if (hasTab) {
+      const updatedPanel = removeTabFromPanel(panel, tabId);
+      // If panel has no more tabs, return null to remove it
+      if (!updatedPanel.tabs || updatedPanel.tabs.length === 0) {
+        return null;
+      }
+      return updatedPanel;
+    }
+    return panel;
+  }
+
+  // If it has children, recursively update them
+  if ((base as BoxBase).children) {
+    const box = base as BoxBase;
+    const updatedChildren = box.children
+      .map((child) => recursiveRemoveTab(child, tabId))
+      .filter((child) => child !== null) as (BoxBase | PanelBase)[];
+
+    // If no children left, return null
+    if (updatedChildren.length === 0) {
+      return null;
+    }
+
+    return {
+      ...box,
+      children: updatedChildren
+    };
+  }
+
+  return base;
+}
+
+export function removeTabFromLayout(
+  layout: LayoutBase,
+  tabId: string
+): LayoutBase {
+  const newLayout = { ...layout };
+
+  if (newLayout.dockbox) {
+    const updated = recursiveRemoveTab(newLayout.dockbox, tabId);
+    if (updated) {
+      newLayout.dockbox = updated as BoxBase;
+    }
+  }
+
+  if (newLayout.floatbox) {
+    const updated = recursiveRemoveTab(newLayout.floatbox, tabId);
+    if (updated) {
+      newLayout.floatbox = updated as BoxBase;
+    } else {
+      delete newLayout.floatbox;
+    }
+  }
+
+  return newLayout;
+}
+
+export function addFloatingTab(
+  layout: LayoutBase,
+  tabData: Partial<TabData>,
+  position: { left: number; top: number; width: number; height: number }
+): LayoutBase {
+  const newLayout = { ...layout };
+
+  // Create or update floatbox
+  const newPanel: PanelBase = {
+    x: position.left,
+    y: position.top,
+    w: position.width,
+    h: position.height,
+    tabs: [tabData],
+    group: tabData.group || 'popout'
+  };
+
+  if (!newLayout.floatbox) {
+    newLayout.floatbox = {
+      mode: 'float',
+      children: [newPanel]
+    };
+  } else {
+    newLayout.floatbox = {
+      ...newLayout.floatbox,
+      children: [...(newLayout.floatbox.children || []), newPanel]
+    };
+  }
+
+  return newLayout;
+}