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

package/src/components/edges/offsetBezier.ts

@@ -0,0 +1,134 @@
+import { Position, getBezierPath } from 'reactflow';
+import type { EdgeProps } from 'reactflow';
+
+export type BetterBezierEdgeProps<T = unknown> = EdgeProps<T> & {
+  pathOptions?: {
+    offset?: number;
+  };
+};
+
+export interface GetBetterBezierPathParams {
+  sourceX: number;
+  sourceY: number;
+  sourcePosition?: Position;
+  targetX: number;
+  targetY: number;
+  targetPosition?: Position;
+  offset?: number;
+}
+
+interface GetControlParams {
+  pos: Position;
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}
+
+function getControl({
+  pos,
+  x1,
+  y1,
+  x2,
+  y2
+}: GetControlParams): [number, number] {
+  if (pos === Position.Left || pos === Position.Right) {
+    return [0.5 * (x1 + x2), y1];
+  }
+
+  return [x1, 0.5 * (y1 + y2)];
+}
+
+export function getBetterBezierPath({
+  sourceX,
+  sourceY,
+  sourcePosition = Position.Bottom,
+  targetX,
+  targetY,
+  targetPosition = Position.Top,
+  offset = 75
+}: GetBetterBezierPathParams): [
+  path: string,
+  labelX: number,
+  labelY: number,
+  offsetX: number,
+  offsetY: number
+] {
+  let [sourceControlX, sourceControlY] = getControl({
+    pos: sourcePosition,
+    x1: sourceX,
+    y1: sourceY,
+    x2: targetX,
+    y2: targetY
+  });
+  let [targetControlX, targetControlY] = getControl({
+    pos: targetPosition,
+    x1: targetX,
+    y1: targetY,
+    x2: sourceX,
+    y2: sourceY
+  });
+
+  if (offset) {
+    switch (sourcePosition) {
+      case Position.Top:
+        sourceControlX = sourceX;
+        sourceControlY = sourceY - offset;
+        break;
+      case Position.Bottom:
+        sourceControlX = sourceX;
+        sourceControlY = sourceY + offset;
+        break;
+      case Position.Left:
+        sourceControlX = sourceX - offset;
+        sourceControlY = sourceY;
+        break;
+      case Position.Right:
+        sourceControlX = sourceX + offset;
+        sourceControlY = sourceY;
+        break;
+      default:
+        sourceControlX = sourceX + offset;
+        sourceControlY = sourceY;
+    }
+
+    switch (targetPosition) {
+      case Position.Top:
+        targetControlX = targetX;
+        targetControlY = targetY - offset;
+        break;
+      case Position.Bottom:
+        targetControlX = targetX;
+        targetControlY = targetY + offset;
+        break;
+      case Position.Left:
+        targetControlX = targetX - offset;
+        targetControlY = targetY;
+        break;
+      case Position.Right:
+        targetControlX = targetX + offset;
+        targetControlY = targetY;
+        break;
+      default:
+        targetControlX = targetX - offset;
+        targetControlY = targetY;
+    }
+  }
+
+  const [, labelX, labelY, offsetX, offsetY] = getBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition
+  });
+
+  return [
+    `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`,
+    labelX,
+    labelY,
+    offsetX,
+    offsetY
+  ];
+}

package/src/components/hotKeys.tsx

@@ -0,0 +1,20 @@
+import { HotKeys as HotKeysComp } from 'react-hotkeys';
+import { useSystem } from '@/system';
+import { useStore } from 'zustand';
+
+export const HotKeys = ({ children }: { children: React.ReactNode }) => {
+  const sys = useSystem();
+  const keyMap = useStore(sys.hotKeyStore, (x) => x.keymap);
+  const handlers = useStore(sys.hotKeyStore, (x) => x.handlers);
+
+  return (
+    <HotKeysComp
+      keyMap={keyMap}
+      handlers={handlers}
+      allowChanges={true}
+      style={{ height: '100%', width: '100%' }}
+    >
+      {children}
+    </HotKeysComp>
+  );
+};

package/src/components/layoutController/index.module.css

@@ -0,0 +1,13 @@
+.panelExtra {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 0 4px;
+}
+
+.root {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}

package/src/components/layoutController/index.tsx

@@ -0,0 +1,140 @@
+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,
+  collectGraphSessionIds,
+  isGraphTabId,
+  sessionIdFromTabId
+} 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!);
+
+      // Keep the editor's active graph in sync with the focused graph tab so
+      // panels bound via useActiveGraph() rebind to it.
+      if (isGraphTabId(graphContainer.activeId)) {
+        system.activeGraph
+          .getState()
+          .setActiveGraph(sessionIdFromTabId(graphContainer.activeId));
+      }
+    }
+
+    // Dispose sessions whose tabs were closed in this layout change.
+    const before = collectGraphSessionIds(layout);
+    const after = collectGraphSessionIds(newLayout);
+    for (const id of before) {
+      if (!after.has(id)) {
+        system.disposeSession(id);
+      }
+    }
+
+    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,248 @@
+import type { BoxBase, LayoutBase, PanelBase, TabData } from 'rc-dock';
+
+/**
+ * Tab-id convention for graph tabs. The default graph uses the bare id `graph`
+ * (session id `graph`); every other graph uses `graph:<sessionId>`. These three
+ * helpers are the single source of truth for the convention.
+ */
+const GRAPH_TAB_PREFIX = 'graph:';
+export const DEFAULT_GRAPH_ID = 'graph';
+
+export function isGraphTabId(id: string | undefined): id is string {
+  return !!id && (id === DEFAULT_GRAPH_ID || id.startsWith(GRAPH_TAB_PREFIX));
+}
+
+export function sessionIdFromTabId(tabId: string): string {
+  return tabId === DEFAULT_GRAPH_ID
+    ? DEFAULT_GRAPH_ID
+    : tabId.slice(GRAPH_TAB_PREFIX.length);
+}
+
+export function tabIdForSession(sessionId: string): string {
+  return sessionId === DEFAULT_GRAPH_ID
+    ? DEFAULT_GRAPH_ID
+    : `${GRAPH_TAB_PREFIX}${sessionId}`;
+}
+
+/** Collect the session ids of every graph tab present in a layout. */
+export function collectGraphSessionIds(layout: LayoutBase): Set<string> {
+  const ids = new Set<string>();
+  const visit = (base?: BoxBase | PanelBase) => {
+    if (!base) return;
+    const panel = base as PanelBase;
+    if (panel.tabs) {
+      for (const tab of panel.tabs) {
+        if (isGraphTabId(tab.id)) ids.add(sessionIdFromTabId(tab.id!));
+      }
+    }
+    const box = base as BoxBase;
+    if (box.children) box.children.forEach(visit);
+  };
+  visit(layout.dockbox);
+  visit(layout.floatbox);
+  visit(layout.maxbox);
+  visit(layout.windowbox);
+  return ids;
+}
+
+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;
+}