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

package/src/components/notifications/utils.ts

@@ -0,0 +1,71 @@
+import type { ToastOptions } from 'react-hot-toast';
+import type { PubSub } from '@/system/pubsub';
+
+export interface NotificationData {
+  type: 'success' | 'error' | 'info' | 'loading';
+  message: string;
+  options?: ToastOptions;
+}
+
+/**
+ * Emit a success notification
+ */
+export function notifySuccess(
+  pubsub: PubSub,
+  message: string,
+  options?: ToastOptions
+): void {
+  pubsub.publish('notification', {
+    type: 'success',
+    message,
+    options
+  });
+}
+
+/**
+ * Emit an error notification
+ */
+export function notifyError(
+  pubsub: PubSub,
+  message: string,
+  options?: ToastOptions
+): void {
+  pubsub.publish('notification', {
+    type: 'error',
+    message,
+    options
+  });
+}
+
+/**
+ * Emit an info notification
+ */
+export function notifyInfo(
+  pubsub: PubSub,
+  message: string,
+  options?: ToastOptions
+): void {
+  pubsub.publish('notification', {
+    type: 'info',
+    message,
+    options
+  });
+}
+
+/**
+ * Emit a loading notification
+ */
+export function notifyLoading(
+  pubsub: PubSub,
+  message: string,
+  options?: ToastOptions
+): string {
+  pubsub.publish('notification', {
+    type: 'loading',
+    message,
+    options
+  });
+  // Note: In a real implementation, you'd return the toast ID
+  // For now, we return a dummy ID since the pubsub is fire-and-forget
+  return `toast_${Date.now()}`;
+}

package/src/components/panels/alignment/index.module.css

@@ -0,0 +1,10 @@
+.content {
+    display: flex;
+    flex-direction: column;
+}
+
+.row {
+    display: flex;
+    flex: 1;
+    height: 100%;
+}

package/src/components/panels/alignment/index.tsx

@@ -0,0 +1,244 @@
+import type { Node } from 'reactflow';
+import {
+  AlignHorizontalCenters,
+  AlignHorizontalCentersSolid,
+  AlignVerticalCenters,
+  AlignVerticalCentersSolid,
+  CompAlignBottom,
+  CompAlignBottomSolid,
+  CompAlignLeft,
+  CompAlignLeftSolid,
+  CompAlignRight,
+  CompAlignRightSolid,
+  CompAlignTop,
+  CompAlignTopSolid
+} from 'iconoir-react';
+import { VscodeButton } from '@vscode-elements/react-elements';
+import { useActiveGraph } from '@/system/provider';
+import type { GraphSession } from '@/system';
+import styles from './index.module.css';
+import { BasePanel } from '../base';
+
+const partitionSelectedNodes = (nodes: Node[]) => {
+  return nodes.reduce(
+    (acc, node) => {
+      if (node.selected) {
+        acc.selectedNodes.push(node);
+      } else {
+        acc.unselectedNodes.push(node);
+      }
+
+      return acc;
+    },
+    {
+      selectedNodes: [] as Node[],
+      unselectedNodes: [] as Node[]
+    }
+  );
+};
+
+const handleChange =
+  (system: GraphSession) => (updater: (selectedNodes: Node[]) => void) => {
+    const { nodes, setNodes } = system.nodeStore.getState();
+
+    const { selectedNodes, unselectedNodes } = partitionSelectedNodes(nodes);
+    //Assume it changes it directly
+    updater(selectedNodes);
+    //Make sure unselected nodes are processed first for cases like groups
+    setNodes([...unselectedNodes, ...selectedNodes]);
+  };
+
+export const ALIGNMENT = {
+  START: 0,
+  CENTER: 1,
+  END: 2
+} as const;
+
+export type Alignment = (typeof ALIGNMENT)[keyof typeof ALIGNMENT];
+
+export const align =
+  (align: Alignment, prop: 'x' | 'y' = 'x') =>
+  (selectedNodes: Node[]) => {
+    // Align selected nodes to the left
+    let v = 0;
+    switch (align) {
+      case ALIGNMENT.START:
+        v = Math.min(...selectedNodes.map((node) => node.position[prop]));
+        break;
+      case ALIGNMENT.CENTER: {
+        const vmin = Math.min(
+          ...selectedNodes.map((node) => node.position[prop])
+        );
+        const vmax = Math.max(
+          ...selectedNodes.map((node) => node.position[prop])
+        );
+        v = (vmin + vmax) / 2;
+        break;
+      }
+      default:
+        v = Math.max(...selectedNodes.map((node) => node.position[prop]));
+    }
+    selectedNodes.forEach((node) => {
+      node.position[prop] = v;
+    });
+  };
+
+export const distribute =
+  (align: Alignment, prop: 'x' | 'y' = 'x') =>
+  (selectedNodes: Node[]) => {
+    if (selectedNodes.length < 3) {
+      return;
+    }
+
+    //Sort the nodes by position
+    selectedNodes = [...selectedNodes].sort(
+      (a, b) => a.position[prop] - b.position[prop]
+    );
+
+    const getLength = (node: Node) => {
+      if (prop === 'x') {
+        return node.width ?? 0;
+      }
+      return node.height ?? 0;
+    };
+
+    const getPos = (node: Node) => {
+      switch (align) {
+        case ALIGNMENT.START:
+          return node.position[prop];
+        case ALIGNMENT.CENTER:
+          return node.position[prop] + getLength(node) / 2;
+        default:
+          return node.position[prop] + getLength(node);
+      }
+    };
+
+    const startNode = selectedNodes.reduce((acc, node) => {
+      return getPos(node) < getPos(acc) ? node : acc;
+    }, selectedNodes[0] as Node);
+
+    const endNode = selectedNodes.reduce((acc, node) => {
+      return getPos(node) > getPos(acc) ? node : acc;
+    }, selectedNodes[0] as Node);
+    //Get the total length
+    const incrementLength =
+      (getPos(endNode) - getPos(startNode)) / (selectedNodes.length - 1);
+
+    selectedNodes.forEach((node, i) => {
+      node.position[prop] = startNode.position[prop] + i * incrementLength;
+    });
+  };
+
+export function AlignmentPanel() {
+  const graphEditor = useActiveGraph()!;
+  const updateNodes = handleChange(graphEditor);
+
+  return (
+    <BasePanel>
+      <div className={styles.content}>
+        <span>Align</span>
+        <div className={styles.row}>
+          <VscodeButton
+            secondary
+            title="Align X Left"
+            onClick={() => updateNodes(align(ALIGNMENT.START))}
+            icon-only
+          >
+            <CompAlignLeft />
+          </VscodeButton>
+          <VscodeButton
+            secondary
+            title="Align X Center"
+            onClick={() => updateNodes(align(ALIGNMENT.CENTER))}
+            icon-only
+          >
+            <AlignHorizontalCenters />
+          </VscodeButton>
+          <VscodeButton
+            secondary
+            title="Align X Right"
+            onClick={() => updateNodes(align(ALIGNMENT.END))}
+            icon-only
+          >
+            <CompAlignRight />
+          </VscodeButton>
+          <VscodeButton
+            secondary
+            title="Align Y Top"
+            onClick={() => updateNodes(align(ALIGNMENT.START, 'y'))}
+            icon-only
+          >
+            <CompAlignTop />
+          </VscodeButton>
+          <VscodeButton
+            secondary
+            title="Align Y Middle"
+            onClick={() => updateNodes(align(ALIGNMENT.CENTER, 'y'))}
+            icon-only
+          >
+            <AlignVerticalCenters />
+          </VscodeButton>
+          <VscodeButton
+            secondary
+            title="Align Y Bottom"
+            onClick={() => updateNodes(align(ALIGNMENT.END, 'y'))}
+            icon-only
+          >
+            <CompAlignBottom />
+          </VscodeButton>
+        </div>
+        <span>Distribute</span>
+        <div className={styles.row}>
+          <VscodeButton
+            secondary
+            title="Distribute horizontally left"
+            icon-only
+            onClick={() => updateNodes(distribute(ALIGNMENT.START))}
+          >
+            <CompAlignLeftSolid />
+          </VscodeButton>
+          <VscodeButton
+            secondary
+            title="Distribute horizontally center"
+            onClick={() => updateNodes(distribute(ALIGNMENT.CENTER))}
+            icon-only
+          >
+            <AlignHorizontalCentersSolid />
+          </VscodeButton>
+          <VscodeButton
+            secondary
+            title="Distribute horizontally right"
+            icon-only
+            onClick={() => updateNodes(distribute(ALIGNMENT.END))}
+          >
+            <CompAlignRightSolid />
+          </VscodeButton>
+          <VscodeButton
+            secondary
+            title="Distribute vertically top"
+            onClick={() => updateNodes(distribute(ALIGNMENT.START, 'y'))}
+            icon-only
+          >
+            <CompAlignTopSolid />
+          </VscodeButton>
+          <VscodeButton
+            secondary
+            title="Distribute vertically center"
+            onClick={() => updateNodes(distribute(ALIGNMENT.CENTER, 'y'))}
+            icon-only
+          >
+            <AlignVerticalCentersSolid />
+          </VscodeButton>
+          <VscodeButton
+            secondary
+            title="Distribute vertically bottom"
+            onClick={() => updateNodes(distribute(ALIGNMENT.END, 'y'))}
+            icon-only
+          >
+            <CompAlignBottomSolid />
+          </VscodeButton>
+        </div>
+      </div>
+    </BasePanel>
+  );
+}

package/src/components/panels/base/index.tsx

@@ -0,0 +1,5 @@
+import styles from './styles.module.css';
+
+export const BasePanel = ({ children }: { children: React.ReactNode }) => {
+  return <div className={styles.root}>{children}</div>;
+};

package/src/components/panels/base/styles.module.css

@@ -0,0 +1,12 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+    width: 100%;
+    padding: 0.5rem;
+    gap: 0.25rem;
+    overflow: auto;
+    background-color: var(--ds-tab-inactive-bg,#181818);
+    color: var(--ds-editor-fg);
+}

package/src/components/panels/common/PanelHeader.module.css

@@ -0,0 +1,24 @@
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.25rem 0;
+    flex-shrink: 0;
+}
+
+.title {
+    font-size: var(--fs-section, 0.7rem);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--ds-fg);
+    opacity: 0.65;
+}
+
+.actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+}

package/src/components/panels/common/PanelHeader.tsx

@@ -0,0 +1,22 @@
+import type React from 'react';
+import styles from './PanelHeader.module.css';
+
+/**
+ * A panel section header row: a compact uppercase title (matching SectionTitle)
+ * on the left with an optional actions slot (e.g. a "+" button) on the right.
+ * Shared so Variables, Events and similar panels render identical chrome.
+ */
+export const PanelHeader = ({
+  title,
+  actions
+}: {
+  title: React.ReactNode;
+  actions?: React.ReactNode;
+}) => {
+  return (
+    <div className={styles.header}>
+      <span className={styles.title}>{title}</span>
+      {actions ? <div className={styles.actions}>{actions}</div> : null}
+    </div>
+  );
+};

package/src/components/panels/common/SectionTitle.module.css

@@ -0,0 +1,13 @@
+.title {
+    font-size: var(--fs-section, 0.7rem);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--ds-fg);
+    opacity: 0.65;
+    margin: var(--space-3, 0.75rem) 0 var(--space-1, 0.25rem);
+}
+
+.title:first-child {
+    margin-top: 0;
+}

package/src/components/panels/common/SectionTitle.tsx

@@ -0,0 +1,10 @@
+import type React from 'react';
+import styles from './SectionTitle.module.css';
+
+/**
+ * Compact uppercase section header, shared across panels so every panel renders
+ * its groups with the same VSCode-settings-style chrome.
+ */
+export const SectionTitle = ({ children }: { children: React.ReactNode }) => {
+  return <div className={styles.title}>{children}</div>;
+};