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

package/src/components/contextMenus/node.tsx

@@ -0,0 +1,155 @@
+import { useReactFlow } from 'reactflow';
+import type { CSSProperties } from 'react';
+import { useCallback } from 'react';
+import clsx from 'classnames';
+import {
+  VscodeContextMenu,
+  VscodeContextMenuItem,
+  VscodeDivider
+} from '@vscode-elements/react-elements';
+import { useSystem } from '@/system';
+import { hidden, pinned } from '@/annotations';
+
+export interface INodeContextMenuProps extends CSSProperties {
+  nodeID: string;
+}
+
+export const NodeContextMenu = ({ nodeID, ...rest }: INodeContextMenuProps) => {
+  const reactFlowInstance = useReactFlow();
+  const sys = useSystem();
+
+  // Get the current node to check if it's hidden
+  const currentNode = sys.nodeStore
+    .getState()
+    .nodes.find((n) => n.id === nodeID);
+  const isHidden =
+    currentNode && 'data' in currentNode
+      ? (currentNode.data.annotations?.[hidden] ?? false)
+      : false;
+  const isPinned =
+    currentNode && 'data' in currentNode
+      ? (currentNode.data.annotations?.[pinned] ?? false)
+      : false;
+
+  const focus = useCallback(() => {
+    const nodeSearch = sys.nodeStore.getState().nodes;
+    const reactFlowInstance = sys.refStore.getState().getRef('reactflow');
+    const nodes = nodeID
+      ? nodeSearch.filter((x) => x.id === nodeID)
+      : nodeSearch.filter((x) => x.selected);
+    if (nodes) {
+      const focalCenter = nodes.reduce(
+        (acc, node) => {
+          return {
+            x: acc.x + node.position.x + (node.width || 0) / 2,
+            y: acc.y + node.position.y + (node.height || 0) / 2
+          };
+        },
+        { x: 0, y: 0 }
+      );
+
+      reactFlowInstance?.setCenter(focalCenter.x, focalCenter.y, {
+        duration: 200,
+        zoom: 1
+      });
+    }
+  }, [nodeID]);
+
+  const onResetTrace = useCallback(() => {
+    reactFlowInstance.setNodes((nodes) =>
+      nodes.map((x) => {
+        //Remove filtering
+        return {
+          ...x,
+          className: clsx(x.className, {
+            filtered: false
+          })
+        };
+      })
+    );
+  }, [reactFlowInstance]);
+
+  const onSelect = useCallback(
+    (e: any) => {
+      switch (e.detail.value) {
+        case 'traceUpstream':
+          sys.actionStore.getState().actions.traceUpstream(nodeID);
+          break;
+        case 'traceDownstream':
+          sys.actionStore.getState().actions.traceDownstream(nodeID);
+          break;
+        case 'resetTrace':
+          sys.actionStore.getState().actions.resetTrace();
+          break;
+
+        case 'focus':
+          focus();
+          break;
+
+        case 'pin':
+          sys.actionStore.getState().actions.toggleNodePinned(nodeID);
+          break;
+        case 'hide':
+          sys.actionStore.getState().actions.toggleNodeHidden(nodeID);
+          break;
+      }
+    },
+    [focus, nodeID, sys]
+  );
+
+  return (
+    <VscodeContextMenu
+      show
+      onVscContextMenuSelect={onSelect}
+      style={{ zIndex: 2000, position: 'absolute', ...rest }}
+      data={[
+        {
+          label: 'Focus',
+          keybinding: 'Ctrl+Shift+F',
+          value: 'focus'
+        },
+        {
+          separator: true
+        },
+        {
+          label: 'Trace Upstream',
+          keybinding: 'Ctrl+Shift+R',
+          value: 'traceUpstream'
+        },
+        {
+          label: 'Trace Downstream',
+          keybinding: 'Ctrl+Shift+T',
+          value: 'traceDownstream'
+        },
+        {
+          separator: true
+        },
+        {
+          label: 'Reset Trace',
+          keybinding: 'Ctrl+Shift+G',
+          value: 'resetTrace'
+        },
+
+        {
+          separator: true
+        },
+        {
+          label: isPinned ? 'Unpin' : 'Pin',
+          value: 'pin'
+        },
+        {
+          label: isHidden ? 'Show' : 'Hide',
+          value: 'hide'
+        }
+      ]}
+    >
+      <VscodeContextMenuItem onClick={focus}>Focus</VscodeContextMenuItem>
+      <VscodeDivider />
+
+      <VscodeContextMenuItem onClick={onResetTrace}>
+        Reset Trace
+      </VscodeContextMenuItem>
+      <VscodeDivider />
+    </VscodeContextMenu>
+  );
+};

package/src/components/contextMenus/selection.tsx

@@ -0,0 +1,77 @@
+import type { CSSProperties } from 'react';
+import { useCallback } from 'react';
+import {
+  VscodeContextMenu,
+  VscodeContextMenuItem,
+  VscodeDivider
+} from '@vscode-elements/react-elements';
+import { useSystem } from '@/system';
+
+export interface ISelectionContextMenuProps extends CSSProperties {}
+
+export const SelectionContextMenu = ({
+  ...rest
+}: ISelectionContextMenuProps) => {
+  const sys = useSystem();
+
+  const onCopy = useCallback(() => {
+    sys.actionStore.getState().actions.copySelectionToClipboard();
+  }, [sys]);
+
+  const onPaste = useCallback(async () => {
+    await sys.actionStore.getState().actions.pasteFromClipboard();
+  }, [sys]);
+
+  const onGroup = useCallback(() => {
+    sys.actionStore.getState().actions.groupNodes();
+  }, [sys]);
+
+  const onSelect = useCallback(
+    (e: any) => {
+      switch (e.detail.value) {
+        case 'copy':
+          onCopy();
+          break;
+        case 'paste':
+          void onPaste();
+          break;
+        case 'group':
+          onGroup();
+          break;
+      }
+    },
+    [onCopy, onGroup, onPaste]
+  );
+
+  return (
+    <VscodeContextMenu
+      show
+      onVscContextMenuSelect={onSelect}
+      style={{ zIndex: 2000, position: 'absolute', ...rest }}
+      data={[
+        {
+          label: 'Copy',
+          keybinding: 'Ctrl+C',
+          value: 'copy'
+        },
+        {
+          label: 'Paste',
+          keybinding: 'Ctrl+V',
+          value: 'paste'
+        },
+        {
+          separator: true
+        },
+        {
+          label: 'Group',
+          value: 'group'
+        }
+      ]}
+    >
+      <VscodeContextMenuItem onClick={onCopy}>Copy</VscodeContextMenuItem>
+      <VscodeContextMenuItem onClick={onPaste}>Paste</VscodeContextMenuItem>
+      <VscodeDivider />
+      <VscodeContextMenuItem onClick={onGroup}>Group</VscodeContextMenuItem>
+    </VscodeContextMenu>
+  );
+};

package/src/components/controls/any/index.tsx

@@ -0,0 +1,8 @@
+import type { ControlProps } from '@/store/controls';
+import { JsonEditor } from 'json-edit-react';
+
+export const AnyControl = (props: ControlProps) => {
+  return (
+    <JsonEditor data={props.value} setData={(data) => props.onChange(data)} />
+  );
+};

package/src/components/controls/boolean/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ControlProps } from '@/store/controls';
+import { VscodeCheckbox } from '@vscode-elements/react-elements';
+
+export const BooleanControl: React.FC<ControlProps> = ({ value, onChange }) => {
+  return (
+    <VscodeCheckbox
+      type="checkbox"
+      checked={!!value}
+      onChange={(e) => onChange((e.currentTarget as HTMLInputElement).checked)}
+    />
+  );
+};

package/src/components/controls/colorPicker/InputPopover.module.css

@@ -0,0 +1,100 @@
+@keyframes slideUpAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideRightAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideLeftAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.popoverContent {
+  border-radius: var(--component-radii-md);
+  border: 1px solid var(--color-neutral-stroke-subtle);
+  padding: 0;
+  z-index: 10000;
+  width: 300px;
+  background-color: var(--colors-bgCanvas);
+  box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+}
+
+.popoverContent[data-state="open"][data-side="top"] {
+  animation-name: slideDownAndFade;
+}
+
+.popoverContent[data-state="open"][data-side="right"] {
+  animation-name: slideLeftAndFade;
+}
+
+.popoverContent[data-state="open"][data-side="bottom"] {
+  animation-name: slideUpAndFade;
+}
+
+.popoverContent[data-state="open"][data-side="left"] {
+  animation-name: slideRightAndFade;
+}
+
+.popoverContent:focus {
+  box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px, 0 0 0 2px black;
+}
+
+.popoverArrow {
+  fill: var(--colors-bgCanvas);
+}
+
+.popoverClose {
+  all: unset;
+  cursor: pointer;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--colors-fg);
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}

package/src/components/controls/colorPicker/InputPopover.tsx

@@ -0,0 +1,31 @@
+import * as Popover from '@radix-ui/react-popover';
+import React from 'react';
+import styles from './InputPopover.module.css';
+import { Xmark } from 'iconoir-react';
+
+interface IInputPopover {
+  children: React.ReactNode;
+  trigger: React.ReactNode;
+  defaultOpen?: boolean;
+}
+
+const InputPopover = ({
+  defaultOpen = false,
+  children,
+  trigger
+}: IInputPopover) => (
+  <Popover.Root defaultOpen={defaultOpen}>
+    <Popover.Trigger asChild>{trigger}</Popover.Trigger>
+    <Popover.Portal>
+      <Popover.Content className={styles.popoverContent} sideOffset={5}>
+        {children}
+        <Popover.Close className={styles.popoverClose} aria-label="Close">
+          <Xmark />
+        </Popover.Close>
+        <Popover.Arrow className={styles.popoverArrow} />
+      </Popover.Content>
+    </Popover.Portal>
+  </Popover.Root>
+);
+
+export default InputPopover;

package/src/components/controls/colorPicker/index.module.css

@@ -0,0 +1,18 @@
+.colorPickerTrigger {
+  cursor: pointer;
+  border-radius: var(--component-radii-sm);
+  border: 1px solid var(--color-neutral-stroke-subtle);
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  padding: 0;
+
+  &:hover {
+    outline: 1px solid var(--color-neutral-stroke-default);
+  }
+}
+
+.popoverCloseRemoveButton {
+  all: unset;
+  margin: var(--component-spacing-md);
+}

package/src/components/controls/colorPicker/index.tsx

@@ -0,0 +1,61 @@
+import { VscodeButton, VscodeTextfield } from '@vscode-elements/react-elements';
+import { HexColorPicker } from 'react-colorful';
+import { PopoverClose } from '@radix-ui/react-popover';
+import InputPopover from './InputPopover.js';
+import styles from './index.module.css';
+
+export function ColorControl({
+  value,
+  onChange
+}: Pick<ColorPickerPopoverProps, 'value' | 'onChange'>) {
+  return (
+    <HexColorPicker
+      color={value}
+      onChange={onChange}
+      style={{ flexShrink: 0 }}
+    />
+  );
+}
+
+type ColorPickerPopoverProps = {
+  value: string;
+  defaultOpen?: boolean;
+  onChange: (value: string) => void;
+  showRemoveButton?: boolean;
+  onRemove?: () => void;
+};
+
+export function ColorPickerPopover({
+  value,
+  defaultOpen = false,
+  onChange,
+  showRemoveButton = false,
+  onRemove
+}: ColorPickerPopoverProps) {
+  return (
+    <InputPopover
+      defaultOpen={defaultOpen}
+      trigger={
+        <button
+          style={{ background: value }}
+          className={styles.colorPickerTrigger}
+        />
+      }
+    >
+      <ColorControl value={value} onChange={onChange} />
+      <VscodeTextfield
+        value={value}
+        onChange={(event) => {
+          onChange((event.target as HTMLInputElement).value);
+        }}
+      />
+      {showRemoveButton && (
+        <PopoverClose className={styles.popoverCloseRemoveButton}>
+          <VscodeButton onClick={onRemove} style={{ background: 'red' }}>
+            Remove color
+          </VscodeButton>
+        </PopoverClose>
+      )}
+    </InputPopover>
+  );
+}

package/src/components/controls/number/index.tsx

@@ -0,0 +1,35 @@
+import React, { useCallback } from 'react';
+import type { ControlProps } from '@/store/controls';
+import { VscodeTextfield } from '@vscode-elements/react-elements';
+
+export const NumberControl: React.FC<ControlProps> = ({
+  value,
+  onChange,
+  valueType
+}) => {
+  const isInteger = valueType === 'integer';
+
+  const handleChange = useCallback(
+    (e: Event) => {
+      //WOW the @vscode-elements/react-elements typings are really bad, we have to do this hack to get the value out of the event
+      const stringValue = (e as unknown as React.ChangeEvent<HTMLInputElement>)
+        .currentTarget.value;
+      const num = isInteger
+        ? parseInt(stringValue, 10)
+        : parseFloat(stringValue);
+      if (!isNaN(num)) {
+        onChange(num);
+      }
+    },
+    [isInteger, onChange]
+  );
+
+  return (
+    <VscodeTextfield
+      type="number"
+      value={value ?? ''}
+      onChange={handleChange}
+      step={isInteger ? 1 : undefined}
+    />
+  );
+};

package/src/components/controls/string/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ControlProps } from '@/store/controls';
+import {
+  VscodeTextarea,
+  VscodeTextfield
+} from '@vscode-elements/react-elements';
+
+export const StringControl: React.FC<ControlProps> = ({ value, onChange }) => {
+  return (
+    <VscodeTextarea
+      // type="text"
+      value={value ?? ''}
+      onChange={(e) => onChange((e.currentTarget as HTMLTextAreaElement).value)}
+    />
+  );
+};