@ebubekirylmaz/link-test 1.0.0

package/src/lib/Flow/selection/SelectionContext.jsx

@@ -0,0 +1,259 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+const SelectionContext = createContext(null);
+
+const DEFAULT_CONTEXT = {
+  selectedIds: new Set(),
+  selectNode: () => {},
+  deselectNode: () => {},
+  toggleSelection: () => {},
+  clearSelection: () => {},
+  selectMultiple: () => {},
+  addToSelection: () => {},
+  isSelected: () => false,
+  registerNodeHandlers: () => () => {},
+  moveSelectedNodes: () => {},
+  cutSelectedNodes: () => {},
+  pasteNodes: () => {},
+  hasClipboard: false,
+};
+
+const filterNextToSelection = (next, selectedSet) => {
+  if (!next) return undefined;
+
+  if (Array.isArray(next)) {
+    const filtered = next.filter((id) => selectedSet.has(id));
+    return filtered.length > 0 ? filtered : undefined;
+  }
+
+  return selectedSet.has(next) ? next : undefined;
+};
+
+const buildClipboardNode = (id, node, selectedSet) => {
+  const filteredNext = filterNextToSelection(node.next, selectedSet);
+  const hasPreviousInSelection =
+    node.previous && selectedSet.has(node.previous);
+
+  return {
+    ...node,
+    id,
+    _originalId: id,
+    next: filteredNext,
+    previous: hasPreviousInSelection ? node.previous : undefined,
+  };
+};
+
+const buildPasteStructure = (clipboardNodes, position) => {
+  if (!clipboardNodes?.length) return null;
+
+  const seenIds = new Set();
+  const nodes = {};
+
+  clipboardNodes.forEach((clipNode) => {
+    const nodeId = clipNode._originalId || clipNode.id;
+    if (!nodeId || seenIds.has(nodeId)) return;
+
+    seenIds.add(nodeId);
+
+    nodes[nodeId] = {
+      id: nodeId,
+      label: clipNode.label,
+      next: clipNode.next,
+      previous: clipNode.previous,
+    };
+
+    Object.keys(clipNode).forEach((key) => {
+      if (!["_originalId", "id", "next", "previous", "label"].includes(key)) {
+        nodes[nodeId][key] = clipNode[key];
+      }
+    });
+  });
+
+  const rootIds = Object.keys(nodes).filter((id) => !nodes[id].previous);
+  const uniqueRoots = [...new Set(rootIds)];
+  const finalRoots =
+    uniqueRoots.length > 0 ? uniqueRoots : [Object.keys(nodes)[0]];
+
+  return {
+    nodes,
+    roots: finalRoots,
+    _pastePosition: position,
+  };
+};
+
+export const SelectionProvider = ({ children }) => {
+  const [selectedIds, setSelectedIds] = useState(new Set());
+  const [clipboard, setClipboard] = useState([]);
+  const nodeHandlersRef = useRef(new Map());
+  const isPastingRef = useRef(false);
+
+  const selectNode = useCallback((id, addToSelection = false) => {
+    setSelectedIds((prev) => {
+      const next = new Set(addToSelection ? prev : []);
+      next.add(id);
+      return next;
+    });
+  }, []);
+
+  const deselectNode = useCallback((id) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+
+  const toggleSelection = useCallback((id) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+  }, []);
+
+  const clearSelection = useCallback(() => setSelectedIds(new Set()), []);
+
+  const selectMultiple = useCallback((ids) => setSelectedIds(new Set(ids)), []);
+
+  const addToSelection = useCallback(
+    (ids) => setSelectedIds((prev) => new Set([...prev, ...ids])),
+    []
+  );
+
+  const isSelected = useCallback((id) => selectedIds.has(id), [selectedIds]);
+
+  const registerNodeHandlers = useCallback((id, handlers) => {
+    nodeHandlersRef.current.set(id, handlers);
+    return () => nodeHandlersRef.current.delete(id);
+  }, []);
+
+  const moveSelectedNodes = useCallback(
+    (deltaX, deltaY, excludeId = null) => {
+      selectedIds.forEach((id) => {
+        if (id === excludeId) return;
+
+        const handlers = nodeHandlersRef.current.get(id);
+        if (!handlers) return;
+
+        handlers.setOffset?.((prev) => ({
+          x: prev.x + deltaX,
+          y: prev.y + deltaY,
+        }));
+        handlers.onDrag?.();
+      });
+    },
+    [selectedIds]
+  );
+
+  const cutSelectedNodes = useCallback(
+    (nodesById, onCut) => {
+      if (!nodesById || selectedIds.size === 0) return;
+
+      const selectedSet = new Set(selectedIds);
+      const seenIds = new Set();
+      const cutNodes = [];
+
+      [...selectedIds].forEach((id) => {
+        if (!nodesById[id] || seenIds.has(id)) return;
+        seenIds.add(id);
+        cutNodes.push(buildClipboardNode(id, nodesById[id], selectedSet));
+      });
+
+      setClipboard(cutNodes);
+      onCut?.([...selectedIds]);
+      setSelectedIds(new Set());
+    },
+    [selectedIds]
+  );
+
+  const pasteNodes = useCallback(
+    (callback, x = 0, y = 0) => {
+      if (!clipboard.length || !callback || isPastingRef.current) return;
+
+      isPastingRef.current = true;
+      const nodesToPaste = [...clipboard];
+
+      const pasteData = buildPasteStructure(nodesToPaste, { x, y });
+      if (!pasteData) {
+        isPastingRef.current = false;
+        return;
+      }
+
+      let result;
+      try {
+        result = callback(pasteData, { x, y });
+      } catch (error) {
+        isPastingRef.current = false;
+        throw error;
+      }
+
+      if (result && typeof result.then === "function") {
+        return result
+          .then(() => {
+            setClipboard([]);
+          })
+          .finally(() => {
+            isPastingRef.current = false;
+          });
+      }
+
+      setClipboard([]);
+      isPastingRef.current = false;
+      return result;
+    },
+    [clipboard]
+  );
+
+  const hasClipboard = clipboard.length > 0;
+
+  const contextValue = useMemo(
+    () => ({
+      selectedIds,
+      selectNode,
+      deselectNode,
+      toggleSelection,
+      clearSelection,
+      selectMultiple,
+      addToSelection,
+      isSelected,
+      registerNodeHandlers,
+      moveSelectedNodes,
+      cutSelectedNodes,
+      pasteNodes,
+      hasClipboard,
+    }),
+    [
+      selectedIds,
+      selectNode,
+      deselectNode,
+      toggleSelection,
+      clearSelection,
+      selectMultiple,
+      addToSelection,
+      isSelected,
+      registerNodeHandlers,
+      moveSelectedNodes,
+      cutSelectedNodes,
+      pasteNodes,
+      hasClipboard,
+    ]
+  );
+
+  return (
+    <SelectionContext.Provider value={contextValue}>
+      {children}
+    </SelectionContext.Provider>
+  );
+};
+
+export const useSelection = () =>
+  useContext(SelectionContext) || DEFAULT_CONTEXT;
+
+export default SelectionContext;

package/src/lib/Flow/selection/SelectionOverlay.jsx

@@ -0,0 +1,31 @@
+import { Box } from "@mui/material";
+import { hexToRgba } from "../utils/flowUtils";
+
+const SelectionOverlay = ({ box, selectionColor = "#64748b" }) => {
+  if (!box) return null;
+
+  const { startX, startY, currentX, currentY } = box;
+  const left = Math.min(startX, currentX);
+  const top = Math.min(startY, currentY);
+  const width = Math.abs(currentX - startX);
+  const height = Math.abs(currentY - startY);
+
+  return (
+    <Box
+      sx={{
+        position: "fixed",
+        left,
+        top,
+        width,
+        height,
+        border: `2px solid ${selectionColor}`,
+        backgroundColor: hexToRgba(selectionColor, 0.1),
+        pointerEvents: "none",
+        zIndex: 9999,
+        borderRadius: "4px",
+      }}
+    />
+  );
+};
+
+export default SelectionOverlay;

package/src/lib/Flow/styles.js

@@ -0,0 +1,154 @@
+export const toPxNumber = (v, fallback = 1) => {
+  if (v == null) return fallback;
+  if (typeof v === "number") return v;
+  const n = parseFloat(String(v));
+  return Number.isFinite(n) ? n : fallback;
+};
+
+export const getBaseStyleForVariant = (v) => {
+  switch (v) {
+    case "card":
+      return {
+        lineColor: "#b1b1b7",
+        lineWidth: "2px",
+        lineStyle: "solid",
+        gap: 56,
+        shape: 10,
+        bg: "background.paper",
+        hoverBg: "grey.50",
+        borderColor: "#e2e8f0",
+        selectionColor: "#64748b",
+        showDots: false,
+        showArrow: true,
+        arrowSize: 6,
+        animated: false,
+        animationSpeed: 1,
+        gradient: null,
+        curvature: 0.5,
+      };
+    case "pill":
+      return {
+        lineColor: "#8b5cf6",
+        lineWidth: "2px",
+        lineStyle: "solid",
+        gap: 48,
+        shape: 9999,
+        bg: "rgba(139, 92, 246, 0.08)",
+        hoverBg: "rgba(139, 92, 246, 0.16)",
+        borderColor: "#8b5cf6",
+        selectionColor: "#8b5cf6",
+        showDots: false,
+        showArrow: true,
+        arrowSize: 6,
+        animated: false,
+        animationSpeed: 1,
+        gradient: null,
+        curvature: 0.4,
+      };
+    case "n8n":
+      return {
+        lineColor: "#b1b1b7",
+        lineWidth: "2px",
+        lineStyle: "solid",
+        gap: 60,
+        shape: 8,
+        bg: "#ffffff",
+        hoverBg: "#f8fafc",
+        borderColor: "#e2e8f0",
+        selectionColor: "#ff6d5a",
+        showDots: false,
+        showArrow: true,
+        arrowSize: 6,
+        animated: false,
+        animationSpeed: 1,
+        gradient: null,
+        curvature: 0.5,
+      };
+    case "simple":
+    default:
+      return {
+        lineColor: "#b1b1b7",
+        lineWidth: "2px",
+        lineStyle: "solid",
+        gap: 50,
+        shape: 8,
+        bg: "background.paper",
+        hoverBg: "grey.50",
+        borderColor: "#e2e8f0",
+        selectionColor: "#64748b",
+        showDots: false,
+        showArrow: true,
+        arrowSize: 6,
+        animated: false,
+        animationSpeed: 1,
+        gradient: null,
+        curvature: 0.5,
+      };
+  }
+};
+
+export const getDecisionNodeStyle = (nodeType) => {
+  const styles = {
+    start: { bg: "#E8F5E9", borderColor: "#4CAF50", shape: 8 },
+    decision: { bg: "#FFF3E0", borderColor: "#FF9800", shape: 24 },
+    process: { bg: "#E3F2FD", borderColor: "#2196F3", shape: 8 },
+    end: { bg: "#FFEBEE", borderColor: "#F44336", shape: 8 },
+  };
+  return styles[nodeType] || styles.process;
+};
+
+export const applySemanticTokens = (styleObj, base) => {
+  const s = { ...styleObj };
+
+  const borderWeightMap = { light: 1, normal: 3, bold: 5 };
+  if (
+    typeof s.border === "string" &&
+    ["light", "normal", "bold"].includes(s.border)
+  ) {
+    const w = borderWeightMap[s.border];
+    if (s.borderWidth == null) s.borderWidth = w;
+    if (s.lineWidth == null) s.lineWidth = `${w}px`;
+    if (!s.borderColor)
+      s.borderColor = base.borderColor || base.lineColor || "#E0E0E0";
+  } else if (
+    typeof s.border === "string" &&
+    (s.border.startsWith("#") || s.border.startsWith("rgb"))
+  ) {
+    s.borderColor = s.border;
+  }
+
+  const sizeMap = {
+    small: { cardWidth: 140, gap: 20 },
+    medium: { cardWidth: 180, gap: 30 },
+    large: { cardWidth: 220, gap: 40 },
+  };
+  if (s.size && sizeMap[s.size]) {
+    const { cardWidth, gap } = sizeMap[s.size];
+    if (s.cardWidth == null) s.cardWidth = cardWidth;
+    if (s.gap == null) s.gap = gap;
+  }
+
+  if (s.shape === "square") {
+    const defaultSize = 140;
+    if (s.cardWidth != null && s.minHeight == null) s.minHeight = s.cardWidth;
+    else if (s.minHeight != null && s.cardWidth == null)
+      s.cardWidth = s.minHeight;
+    else if (s.cardWidth == null && s.minHeight == null) {
+      s.cardWidth = defaultSize;
+      s.minHeight = defaultSize;
+    }
+  }
+
+  if (s.shape === "vertical") {
+    const defaultWidth = 160;
+    if (s.cardWidth == null) s.cardWidth = defaultWidth;
+    if (s.minHeight == null) s.minHeight = Math.max(s.cardWidth * 1.3, 110);
+  }
+
+  const shadowVariantMap = { none: 0, soft: 2, heavy: 6 };
+  if (s.shadow && shadowVariantMap[s.shadow] != null && s.shadowLevel == null) {
+    s.shadowLevel = shadowVariantMap[s.shadow];
+  }
+
+  return s;
+};

package/src/lib/Flow/utils/flowUtils.js

@@ -0,0 +1,268 @@
+export function assertLinkedGraph(data) {
+  if (!data || typeof data !== "object") {
+    throw new Error(
+      "FlowChart expected a linked graph object: { nodes, roots? }."
+    );
+  }
+  const { nodes, roots } = data;
+  if (!nodes || typeof nodes !== "object") {
+    throw new Error("FlowChart expected data.nodes to be an object.");
+  }
+
+  let useRoots = Array.isArray(roots) ? [...roots] : null;
+  if (!useRoots || useRoots.length === 0) {
+    useRoots = Object.keys(nodes).filter((id) => !nodes[id]?.previous);
+  }
+  if (useRoots.length === 0) {
+    const first = Object.keys(nodes)[0];
+    if (first) useRoots = [first];
+  }
+
+  for (const r of useRoots) {
+    if (!nodes[r]) throw new Error(`Root id "${r}" not found in data.nodes.`);
+  }
+
+  return { nodesById: nodes, roots: useRoots };
+}
+
+export function buildTreeFromLinked(rootId, nodesById) {
+  if (!rootId || !nodesById?.[rootId]) return null;
+  const seen = new Set();
+
+  const cloneNode = (node) => {
+    if (!node) return null;
+    const { next, previous, children, ...rest } = node;
+    return { ...rest, id: node.id, previous, next, children: [] };
+  };
+
+  const dfs = (id) => {
+    if (!id || seen.has(id) || !nodesById[id]) return null;
+    seen.add(id);
+
+    const node = nodesById[id];
+    const out = cloneNode(node);
+
+    const nextArr = Array.isArray(node.next)
+      ? node.next
+      : node.next != null
+      ? [node.next]
+      : [];
+
+    for (const nxt of nextArr) {
+      const nextId = typeof nxt === "string" ? nxt : nxt?.id;
+      if (!nextId || !nodesById[nextId]) continue;
+
+      const target = nodesById[nextId];
+      if (target.previous == null || target.previous === id) {
+        const built = dfs(nextId);
+        if (built) out.children.push(built);
+      }
+    }
+    return out;
+  };
+
+  return dfs(rootId);
+}
+
+export const getContentParts = (n) => {
+  const entries = Object.entries(n).filter(
+    ([key]) =>
+      key !== "children" && key !== "id" && key !== "previous" && key !== "next"
+  );
+
+  if (entries.length === 0) {
+    return {
+      title: "(empty)",
+      subtitle: null,
+      metaEntries: [],
+    };
+  }
+
+  const preferredTitleKeys = ["label", "title", "name"];
+  const titleEntry =
+    entries.find(([key]) => preferredTitleKeys.includes(key)) || entries[0];
+  const [titleKey, rawTitle] = titleEntry;
+  const title = String(rawTitle);
+  let remaining = entries.filter(([key]) => key !== titleKey);
+
+  const preferredSubtitleKeys = ["description", "role", "type", "status"];
+  const subtitleEntry =
+    remaining.find(([key]) => preferredSubtitleKeys.includes(key)) || null;
+
+  let subtitle = null;
+  if (subtitleEntry) {
+    const [subtitleKey, raw] = subtitleEntry;
+    subtitle = String(raw);
+    remaining = remaining.filter(([key]) => key !== subtitleKey);
+  }
+
+  const metaEntries = remaining
+    .filter(([, value]) => {
+      const t = typeof value;
+      return (
+        (t === "string" || t === "number" || t === "boolean") &&
+        value !== "" &&
+        value !== null
+      );
+    })
+    .map(([k, v]) => [k, v]);
+
+  return { title, subtitle, metaEntries };
+};
+
+export const toNextArray = (next) => {
+  if (!next) return [];
+  return Array.isArray(next) ? next : [next];
+};
+
+export const setNextProperty = (node, nextIds) => {
+  if (!nextIds || nextIds.length === 0) {
+    delete node.next;
+  } else if (nextIds.length === 1) {
+    node.next = nextIds[0];
+  } else {
+    node.next = nextIds;
+  }
+};
+
+export const addToNext = (node, childIds) => {
+  const current = toNextArray(node.next);
+  const newIds = childIds.filter((id) => !current.includes(id));
+  setNextProperty(node, [...current, ...newIds]);
+};
+
+export const removeFromNext = (node, childIds) => {
+  const removeSet = new Set(childIds);
+  const filtered = toNextArray(node.next).filter((id) => !removeSet.has(id));
+  setNextProperty(node, filtered);
+};
+
+export const cleanupReferences = (nodes, removedIds) => {
+  const removeSet = new Set(removedIds);
+  Object.values(nodes).forEach((node) => {
+    if (removeSet.has(node.next)) {
+      delete node.next;
+    } else if (Array.isArray(node.next)) {
+      const filtered = node.next.filter((n) => !removeSet.has(n));
+      setNextProperty(node, filtered);
+    }
+    if (removeSet.has(node.previous)) {
+      delete node.previous;
+    }
+  });
+};
+
+export const hexToRgba = (hex, alpha) => {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
+export const buildDetachedTree = (rootId, nodesById) => {
+  if (!rootId || !nodesById?.[rootId]) return null;
+  const seen = new Set();
+
+  const buildNode = (id) => {
+    if (!id || seen.has(id) || !nodesById[id]) return null;
+    seen.add(id);
+
+    const node = nodesById[id];
+    const { next, previous, ...rest } = node;
+    const result = { ...rest, id, children: [] };
+
+    const nextIds = Array.isArray(next) ? next : next != null ? [next] : [];
+
+    nextIds.forEach((nxt) => {
+      const nextId = typeof nxt === "string" ? nxt : nxt?.id;
+      if (!nextId || !nodesById[nextId]) return;
+
+      const child = buildNode(nextId);
+      if (child) result.children.push(child);
+    });
+
+    return result;
+  };
+
+  return buildNode(rootId);
+};
+
+export const getSelectedInStructure = (structure, selectedIds) =>
+  selectedIds.filter((id) => structure.nodes?.[id]);
+
+export const getRootsToConnect = (structure, selectedIds) => {
+  const selectedSet = new Set(selectedIds);
+  const roots = [];
+
+  selectedIds.forEach((id) => {
+    let current = structure.nodes[id];
+    if (!current) return;
+
+    let rootId = id;
+
+    while (current.previous && structure.nodes[current.previous]) {
+      if (selectedSet.has(current.previous)) {
+        rootId = current.previous;
+        current = structure.nodes[current.previous];
+      } else break;
+    }
+
+    if (!current.previous && !roots.includes(rootId)) {
+      roots.push(rootId);
+    }
+  });
+
+  if (roots.length > 0) return roots;
+
+  return selectedIds.filter((id) => {
+    const node = structure.nodes[id];
+    return node && (!node.previous || !structure.nodes[node.previous]);
+  });
+};
+
+export const collectSubtree = (structure, roots, selectedIds) => {
+  const selectedSet = new Set(selectedIds);
+  const collected = new Set();
+
+  const dfs = (id) => {
+    if (collected.has(id) || !structure.nodes[id]) return;
+    collected.add(id);
+
+    toNextArray(structure.nodes[id].next).forEach((childId) => {
+      if (structure.nodes[childId] && selectedSet.has(childId)) {
+        dfs(childId);
+      }
+    });
+  };
+
+  roots.forEach(dfs);
+  return collected;
+};
+
+export const splitFloatingStructure = (structure, removedIds) => {
+  const remainingNodes = {};
+
+  Object.entries(structure.nodes).forEach(([id, node]) => {
+    if (!removedIds.has(id)) {
+      remainingNodes[id] = node;
+    }
+  });
+
+  cleanupReferences(remainingNodes, [...removedIds]);
+
+  const remainingRoots =
+    structure.roots?.filter((r) => !removedIds.has(r)) ?? [];
+
+  const roots =
+    remainingRoots.length > 0
+      ? remainingRoots
+      : Object.keys(remainingNodes).filter(
+          (id) => !remainingNodes[id].previous
+        );
+
+  return {
+    ...structure,
+    nodes: remainingNodes,
+    roots: [...new Set(roots)],
+  };
+};