@canmingir/link 1.2.8 → 1.2.11

package/src/lib/Flow/nodes/FlowNodeView.jsx

@@ -0,0 +1,214 @@
+import { Box } from "@mui/material";
+import DefaultNodeCard from "./DefaultCard";
+import DraggableNode from "./DraggableNode";
+import DynamicConnector from "../connectors/DynamicConnector";
+import FlowNode from "../core/FlowNode";
+import { getContentParts } from "../utils/flowUtils";
+import { toPxNumber } from "../styles";
+import { useNodeStyle } from "../hooks/useNodeStyle";
+
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+
+const FlowNodeView = ({
+  node,
+  type,
+  variant,
+  style,
+  plugin,
+  registerRef,
+  onDrag,
+  onConnect,
+}) => {
+  const hasChildren = Array.isArray(node.children) && node.children.length > 0;
+
+  const {
+    baseStyle,
+    nodeStyle,
+    plugin: _plugin,
+  } = useNodeStyle({
+    node,
+    type,
+    variant,
+    style,
+    plugin,
+  });
+
+  const {
+    direction = "vertical",
+    lineColor = baseStyle.lineColor,
+    lineWidth = baseStyle.lineWidth,
+    lineStyle = baseStyle.lineStyle,
+    gap = baseStyle.gap,
+    levelGap = baseStyle.levelGap ?? 2.5,
+    nodeSx = {},
+    borderWidth,
+    borderColor = baseStyle.borderColor,
+    cardWidth,
+    shape,
+    shadowLevel,
+    minHeight,
+    showDots = baseStyle.showDots ?? false,
+    dotRadius = baseStyle.dotRadius ?? 4,
+    dotColor = baseStyle.dotColor,
+    showArrow = baseStyle.showArrow ?? true,
+    arrowSize = baseStyle.arrowSize ?? 6,
+    animated = baseStyle.animated ?? false,
+    animationSpeed = baseStyle.animationSpeed ?? 1,
+    gradient = baseStyle.gradient ?? null,
+    curvature = baseStyle.curvature ?? 0.5,
+    selectionColor = baseStyle.selectionColor ?? "#64748b",
+  } = nodeStyle;
+
+  const isHorizontal = direction === "horizontal";
+
+  const strokeWidth = toPxNumber(lineWidth, 1.5);
+  const dashStyle =
+    lineStyle === "dashed" || lineStyle === "dotted" ? lineStyle : "solid";
+
+  const containerRef = useRef(null);
+  const parentRef = useRef(null);
+  const childRefs = useRef({});
+  const [childElList, setChildElList] = useState([]);
+
+  const [connectorTick, setConnectorTick] = useState(0);
+
+  const handleDrag = (newOffset) => {
+    setConnectorTick((t) => t + 1);
+    if (onDrag) onDrag(newOffset);
+  };
+
+  useLayoutEffect(() => {
+    const els = (node.children || [])
+      .map((c) => childRefs.current[c.id])
+      .filter(Boolean);
+    setChildElList(els);
+  }, [node.children]);
+
+  useEffect(() => {
+    const t = setTimeout(() => {
+      const els = (node.children || [])
+        .map((c) => childRefs.current[c.id])
+        .filter(Boolean);
+      setChildElList(els);
+    }, 0);
+    return () => clearTimeout(t);
+  }, [node.children]);
+
+  const { title, subtitle, metaEntries } = getContentParts(node);
+
+  const renderContent = () => {
+    if (_plugin && typeof _plugin.node === "function") {
+      return _plugin.node({
+        node,
+        title,
+        subtitle,
+        metaEntries,
+        nodeStyle,
+        baseStyle,
+      });
+    }
+    return (
+      <DefaultNodeCard
+        title={title}
+        subtitle={subtitle}
+        metaEntries={metaEntries}
+        nodeStyle={nodeStyle}
+        baseStyle={baseStyle}
+        variant={variant}
+        borderWidth={borderWidth}
+        borderColor={borderColor}
+        cardWidth={cardWidth}
+        shape={shape}
+        shadowLevel={shadowLevel}
+        minHeight={minHeight}
+        nodeSx={nodeSx}
+      />
+    );
+  };
+
+  return (
+    <Box
+      ref={containerRef}
+      sx={{
+        display: "inline-flex",
+        flexDirection: isHorizontal ? "row" : "column",
+        alignItems: "center",
+        position: "relative",
+      }}
+    >
+      <DraggableNode
+        registerRef={(el) => {
+          parentRef.current = el;
+          if (registerRef) registerRef(el);
+        }}
+        onDrag={handleDrag}
+        nodeId={node.id}
+        selectionColor={selectionColor}
+        initialPosition={node._pastePosition}
+        onConnect={onConnect}
+      >
+        {renderContent()}
+      </DraggableNode>
+
+      {hasChildren && (
+        <>
+          <DynamicConnector
+            containerEl={containerRef.current}
+            parentEl={parentRef.current}
+            childEls={childElList}
+            stroke={lineColor}
+            strokeWidth={strokeWidth}
+            lineStyle={dashStyle}
+            tick={connectorTick}
+            orientation={direction}
+            showDots={showDots}
+            dotRadius={dotRadius}
+            dotColor={dotColor}
+            showArrow={showArrow}
+            arrowSize={arrowSize}
+            animated={animated}
+            animationSpeed={animationSpeed}
+            gradient={gradient}
+            curvature={curvature}
+          />
+
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: isHorizontal ? "column" : "row",
+              ...(isHorizontal
+                ? {
+                    marginLeft: levelGap,
+                    rowGap: gap,
+                  }
+                : {
+                    marginTop: levelGap,
+                    columnGap: gap,
+                  }),
+              position: "relative",
+              alignItems: "flex-start",
+              justifyContent: "center",
+            }}
+          >
+            {node.children.map((child) => (
+              <FlowNode
+                key={child.id}
+                node={child}
+                type={type}
+                variant={variant}
+                style={style}
+                plugin={plugin}
+                registerRef={(el) => (childRefs.current[child.id] = el)}
+                onDrag={() => setConnectorTick((t) => t + 1)}
+                isRoot={false}
+                onConnect={onConnect}
+              />
+            ))}
+          </Box>
+        </>
+      )}
+    </Box>
+  );
+};
+
+export default FlowNodeView;

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

@@ -9,37 +9,80 @@ export const getBaseStyleForVariant = (v) => {
   switch (v) {
     case "card":
       return {
-        lineColor: "#BDBDBD",
+        lineColor: "#b1b1b7",
         lineWidth: "2px",
         lineStyle: "solid",
         gap: 56,
-        shape: 8,
+        shape: 10,
         bg: "background.paper",
-        hoverBg: "grey.100",
-        borderColor: "#9E9E9E",
+        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: "#9C27B0",
+        lineColor: "#8b5cf6",
         lineWidth: "2px",
-        lineStyle: "dashed",
+        lineStyle: "solid",
         gap: 48,
         shape: 9999,
-        bg: "rgba(156, 39, 176, 0.08)",
-        hoverBg: "rgba(156, 39, 176, 0.16)",
-        borderColor: "#9C27B0",
+        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: "#E0E0E0",
-        lineWidth: "1.5px",
+        lineColor: "#b1b1b7",
+        lineWidth: "2px",
         lineStyle: "solid",
-        gap: 40,
-        shape: 4,
-        bg: "background.default",
-        hoverBg: "grey.100",
-        borderColor: "#E0E0E0",
+        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,
       };
   }
 };
@@ -74,7 +117,6 @@ export const applySemanticTokens = (styleObj, base) => {
     s.borderColor = s.border;
   }
 
-  // size: small | medium | large
   const sizeMap = {
     small: { cardWidth: 140, gap: 20 },
     medium: { cardWidth: 180, gap: 30 },
@@ -86,7 +128,6 @@ export const applySemanticTokens = (styleObj, base) => {
     if (s.gap == null) s.gap = gap;
   }
 
-  // shape: "square" | "vertical" (affects dimensions)
   if (s.shape === "square") {
     const defaultSize = 140;
     if (s.cardWidth != null && s.minHeight == null) s.minHeight = s.cardWidth;
@@ -104,7 +145,6 @@ export const applySemanticTokens = (styleObj, base) => {
     if (s.minHeight == null) s.minHeight = Math.max(s.cardWidth * 1.3, 110);
   }
 
-  // shadow: "none" | "soft" | "heavy"
   const shadowVariantMap = { none: 0, soft: 2, heavy: 6 };
   if (s.shadow && shadowVariantMap[s.shadow] != null && s.shadowLevel == null) {
     s.shadowLevel = shadowVariantMap[s.shadow];