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

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)}
+    />
+  );
+};

package/src/components/edges/index.tsx

@@ -0,0 +1,475 @@
+import { getBetterBezierPath } from './offsetBezier';
+import {
+  getSimpleBezierPath,
+  getSmoothStepPath,
+  getStraightPath,
+  type EdgeProps,
+  useReactFlow,
+  Position
+} from 'reactflow';
+import { useSystem } from '@/system/provider.js';
+import { useStore } from 'zustand';
+import { EDGE_TYPE } from '@/store/settings';
+import { useState, useCallback, type MouseEvent } from 'react';
+
+interface ControlPoint {
+  x: number;
+  y: number;
+}
+
+/** The reactflow path builder that backs a given edge type when there are no
+ * control points. Unknown types fall back to the better-bezier builder. */
+function edgeFnForType(edgeType: string) {
+  switch (edgeType) {
+    case EDGE_TYPE.simpleBezier:
+      return getSimpleBezierPath;
+    case EDGE_TYPE.smoothStep:
+      return getSmoothStepPath;
+    case EDGE_TYPE.straight:
+      return getStraightPath;
+    case EDGE_TYPE.bezier:
+    default:
+      return getBetterBezierPath;
+  }
+}
+
+/** Straight polyline through every point. */
+function straightPathThrough(points: ControlPoint[]): string {
+  return points
+    .map((p, i) => (i === 0 ? `M ${p.x},${p.y}` : `L ${p.x},${p.y}`))
+    .join(' ');
+}
+
+/** Orthogonal "smooth step" path that jogs at the midpoint of each segment. */
+function smoothStepPathThrough(points: ControlPoint[]): string {
+  let path = `M ${points[0]?.x},${points[0]?.y}`;
+  for (let i = 0; i < points.length - 1; i++) {
+    const current = points[i];
+    const next = points[i + 1];
+    if (!current || !next) continue;
+    const midX = (current.x + next.x) / 2;
+    path += ` L ${midX},${current.y} L ${midX},${next.y}`;
+  }
+  path += ` L ${points[points.length - 1]?.x},${points[points.length - 1]?.y}`;
+  return path;
+}
+
+/** Curved path through every point, degrading to line/quadratic for 2/3 points. */
+function bezierPathThrough(points: ControlPoint[]): string {
+  if (points.length === 2) {
+    return `M ${points[0]?.x},${points[0]?.y} L ${points[1]?.x},${points[1]?.y}`;
+  }
+  if (points.length === 3) {
+    return `M ${points[0]?.x},${points[0]?.y} Q ${points[1]?.x},${points[1]?.y} ${points[2]?.x},${points[2]?.y}`;
+  }
+
+  // For multiple control points, chain quadratic segments and finish with a line.
+  let path = `M ${points[0]?.x},${points[0]?.y}`;
+  for (let i = 0; i < points.length - 1; i++) {
+    const p1 = points[i + 1];
+    if (!p1) continue;
+
+    if (i === points.length - 2) {
+      path += ` L ${p1.x},${p1.y}`;
+      continue;
+    }
+
+    path += ` Q ${p1.x},${p1.y}`;
+    const p2 = points[i + 2];
+    if (p2) {
+      const midX = (p1.x + p2.x) / 2;
+      const midY = (p1.y + p2.y) / 2;
+      path += ` ${midX},${midY}`;
+    }
+  }
+  return path;
+}
+
+// Generate path for different edge types with control points
+function generatePathWithControlPoints(
+  sourceX: number,
+  sourceY: number,
+  targetX: number,
+  targetY: number,
+  controlPoints: ControlPoint[],
+  edgeType: string,
+  _sourcePosition?: Position,
+  _targetPosition?: Position
+): string {
+  if (controlPoints.length === 0) {
+    // No control points, use the default builder for the edge type.
+    const [path] = edgeFnForType(edgeType)({
+      sourceX,
+      sourceY,
+      sourcePosition: _sourcePosition,
+      targetX,
+      targetY,
+      targetPosition: _targetPosition
+    });
+    return path;
+  }
+
+  // Build path through all control points
+  const allPoints = [
+    { x: sourceX, y: sourceY },
+    ...controlPoints,
+    { x: targetX, y: targetY }
+  ];
+
+  if (edgeType === EDGE_TYPE.straight) {
+    return straightPathThrough(allPoints);
+  }
+  if (edgeType === EDGE_TYPE.smoothStep) {
+    return smoothStepPathThrough(allPoints);
+  }
+  return bezierPathThrough(allPoints);
+}
+
+type CustomEdgeProps = EdgeProps & {
+  data: {
+    controlPoints?: ControlPoint[];
+    text?: string;
+  };
+};
+
+export const CustomEdge = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+  markerEnd,
+  selected
+}: CustomEdgeProps) => {
+  const sys = useSystem();
+  const edgeType = useStore(sys.systemSettings, (x) => x.edgeType);
+  const snapGrid = useStore(sys.systemSettings, (x) => x.snapGrid);
+  const gridSize = useStore(sys.systemSettings, (x) => x.gridSize);
+  const { setEdges } = useReactFlow();
+
+  // Get control points from edge data
+  const controlPoints: ControlPoint[] = data?.controlPoints || [];
+  const [draggingIndex, setDraggingIndex] = useState<number | null>(null);
+
+  const handleDoubleClick = useCallback(
+    (event: MouseEvent<SVGPathElement>) => {
+      event.stopPropagation();
+
+      // Get click position on SVG
+      const svgElement = (event.target as SVGElement).ownerSVGElement;
+      if (!svgElement) return;
+
+      const point = svgElement.createSVGPoint();
+      point.x = event.clientX;
+      point.y = event.clientY;
+      const svgPoint = point.matrixTransform(
+        svgElement.getScreenCTM()?.inverse()
+      );
+
+      // Build array of all points (source -> control points -> target)
+      const allPoints = [
+        { x: sourceX, y: sourceY },
+        ...controlPoints,
+        { x: targetX, y: targetY }
+      ];
+
+      // Find which segment was clicked by finding closest segment
+      let closestSegmentIndex = 0;
+      let minDistance = Infinity;
+
+      for (let i = 0; i < allPoints.length - 1; i++) {
+        const p1 = allPoints[i];
+        const p2 = allPoints[i + 1];
+        if (!p1 || !p2) continue;
+
+        // Calculate distance from click point to line segment
+        const dx = p2.x - p1.x;
+        const dy = p2.y - p1.y;
+        const lengthSquared = dx * dx + dy * dy;
+
+        let t = 0;
+        if (lengthSquared > 0) {
+          t = Math.max(
+            0,
+            Math.min(
+              1,
+              ((svgPoint.x - p1.x) * dx + (svgPoint.y - p1.y) * dy) /
+                lengthSquared
+            )
+          );
+        }
+
+        const projX = p1.x + t * dx;
+        const projY = p1.y + t * dy;
+        const distance = Math.sqrt(
+          (svgPoint.x - projX) ** 2 + (svgPoint.y - projY) ** 2
+        );
+
+        if (distance < minDistance) {
+          minDistance = distance;
+          closestSegmentIndex = i;
+        }
+      }
+
+      // Insert the new control point at the correct position
+      setEdges((edges) =>
+        edges.map((edge) => {
+          if (edge.id !== id) return edge;
+
+          const currentPoints = edge.data?.controlPoints || [];
+          const newPoints = [...currentPoints];
+
+          // closestSegmentIndex 0 means between source and first control point (or target if no control points)
+          // So we insert at index closestSegmentIndex
+          newPoints.splice(closestSegmentIndex, 0, {
+            x: svgPoint.x,
+            y: svgPoint.y
+          });
+
+          return {
+            ...edge,
+            data: {
+              ...edge.data,
+              controlPoints: newPoints
+            }
+          };
+        })
+      );
+    },
+    [id, sourceX, sourceY, targetX, targetY, controlPoints, setEdges]
+  );
+
+  const handleControlPointMouseDown = useCallback(
+    (event: MouseEvent<SVGGElement>, index: number) => {
+      event.stopPropagation();
+      setDraggingIndex(index);
+
+      const handleMouseMove = (moveEvent: globalThis.MouseEvent) => {
+        const svgElement = (event.target as SVGElement).ownerSVGElement;
+        if (!svgElement) return;
+
+        const point = svgElement.createSVGPoint();
+        point.x = moveEvent.clientX;
+        point.y = moveEvent.clientY;
+        const svgPoint = point.matrixTransform(
+          svgElement.getScreenCTM()?.inverse()
+        );
+
+        // Snap to grid if enabled
+        let x = svgPoint.x;
+        let y = svgPoint.y;
+        if (snapGrid) {
+          x = Math.round(x / gridSize) * gridSize;
+          y = Math.round(y / gridSize) * gridSize;
+        }
+
+        setEdges((edges) =>
+          edges.map((edge) => {
+            if (edge.id !== id) return edge;
+            const points: ControlPoint[] = edge.data?.controlPoints || [];
+            const newPoints = [...points];
+            newPoints[index] = { x, y };
+            return {
+              ...edge,
+              data: {
+                ...edge.data,
+                controlPoints: newPoints
+              }
+            };
+          })
+        );
+      };
+
+      const handleMouseUp = () => {
+        setDraggingIndex(null);
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+    },
+    [id, snapGrid, gridSize, setEdges]
+  );
+
+  const handleRemoveControlPoint = useCallback(
+    (event: MouseEvent, index: number) => {
+      event.stopPropagation();
+      setEdges((edges) =>
+        edges.map((edge) => {
+          if (edge.id !== id) return edge;
+          const points: ControlPoint[] = edge.data?.controlPoints || [];
+          const newPoints = points.filter((_, i) => i !== index);
+          return {
+            ...edge,
+            data: {
+              ...edge.data,
+              controlPoints: newPoints
+            }
+          };
+        })
+      );
+    },
+    [id, setEdges]
+  );
+
+  const edgePath = generatePathWithControlPoints(
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    controlPoints,
+    edgeType,
+    sourcePosition,
+    targetPosition
+  );
+
+  return (
+    <>
+      <path className="react-flow__edge-path-back" d={edgePath} />
+      <path
+        id={id}
+        fill="none"
+        className="react-flow__edge-path"
+        d={edgePath}
+        markerEnd={markerEnd}
+      />
+      <path
+        d={edgePath}
+        fill="none"
+        strokeOpacity="0"
+        strokeWidth="20"
+        className="react-flow__edge-interaction"
+        onDoubleClick={handleDoubleClick}
+        style={{ cursor: 'pointer' }}
+      />
+
+      {/* Render control points - only when selected */}
+      {selected &&
+        controlPoints.map((point, index) => {
+          const isDragging = draggingIndex === index;
+          return (
+            <g
+              key={`cp-${index}`}
+              onMouseDown={(e) => handleControlPointMouseDown(e, index)}
+              style={{ cursor: isDragging ? 'grabbing' : 'grab' }}
+            >
+              {/* Large invisible hit area for easier selection */}
+              <circle
+                cx={point.x}
+                cy={point.y}
+                r={15}
+                fill="transparent"
+                strokeWidth={0}
+                pointerEvents="all"
+              />
+              {/* Visible control point */}
+              <circle
+                cx={point.x}
+                cy={point.y}
+                r={7}
+                fill="#4CAF50"
+                stroke="#fff"
+                strokeWidth={2}
+                pointerEvents="none"
+              />
+              {/* Remove button (X) */}
+              <g
+                onClick={(e) => handleRemoveControlPoint(e, index)}
+                style={{ cursor: 'pointer', pointerEvents: 'all' }}
+              >
+                <circle
+                  cx={point.x + 10}
+                  cy={point.y - 10}
+                  r={6}
+                  fill="#f44336"
+                  stroke="#fff"
+                  strokeWidth={1}
+                />
+                <text
+                  x={point.x + 10}
+                  y={point.y - 10}
+                  textAnchor="middle"
+                  dominantBaseline="middle"
+                  fill="#fff"
+                  fontSize="10"
+                  fontWeight="bold"
+                  pointerEvents="none"
+                >
+                  ×
+                </text>
+              </g>
+            </g>
+          );
+        })}
+
+      {/* Guide lines showing control point influence - only when selected */}
+      {selected &&
+        controlPoints.length > 0 &&
+        controlPoints[0] &&
+        controlPoints[controlPoints.length - 1] && (
+          <>
+            <line
+              x1={sourceX}
+              y1={sourceY}
+              x2={controlPoints[0].x}
+              y2={controlPoints[0].y}
+              stroke="#4CAF50"
+              strokeWidth={1}
+              strokeDasharray="3,3"
+              opacity={0.2}
+              pointerEvents="none"
+            />
+            {controlPoints.map((point, index) => {
+              if (index < controlPoints.length - 1) {
+                const nextPoint = controlPoints[index + 1];
+                if (!nextPoint || !point) return null;
+                return (
+                  <line
+                    key={`guide-${index}`}
+                    x1={point.x}
+                    y1={point.y}
+                    x2={nextPoint.x}
+                    y2={nextPoint.y}
+                    stroke="#4CAF50"
+                    strokeWidth={1}
+                    strokeDasharray="3,3"
+                    opacity={0.2}
+                    pointerEvents="none"
+                  />
+                );
+              }
+              return null;
+            })}
+            {controlPoints[controlPoints.length - 1] && (
+              <line
+                x1={controlPoints[controlPoints.length - 1]!.x}
+                y1={controlPoints[controlPoints.length - 1]!.y}
+                x2={targetX}
+                y2={targetY}
+                stroke="#4CAF50"
+                strokeWidth={1}
+                strokeDasharray="3,3"
+                opacity={0.2}
+                pointerEvents="none"
+              />
+            )}
+          </>
+        )}
+
+      <text>
+        <textPath
+          href={`#${id}`}
+          style={{ fontSize: 12 }}
+          startOffset="50%"
+          textAnchor="middle"
+        >
+          {data?.text}
+        </textPath>
+      </text>
+    </>
+  );
+};