@ebubekirylmaz/link-test 1.0.0

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

@@ -0,0 +1,107 @@
+import React from "react";
+
+import { Box, Card, Typography } from "@mui/material";
+
+const DefaultNodeCard = ({
+  title,
+  subtitle,
+  metaEntries,
+  nodeStyle,
+  baseStyle,
+  variant,
+  borderWidth,
+  borderColor,
+  cardWidth,
+  shape,
+  shadowLevel,
+  minHeight,
+  nodeSx = {},
+}) => {
+  const effectiveWidth = cardWidth || 220;
+  const effectiveBorderWidth = borderWidth || 1;
+  const effectiveRadius =
+    typeof shape === "number" ? shape : baseStyle.shape || 4;
+
+  const effectiveShadow =
+    typeof shadowLevel === "number" ? shadowLevel : variant === "card" ? 2 : 1;
+
+  const effectiveMinHeight = minHeight || 80;
+
+  return (
+    <Card
+      sx={{
+        p: 2,
+        width: effectiveWidth,
+        minHeight: effectiveMinHeight,
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 1,
+        position: "relative",
+        borderRadius: effectiveRadius,
+        bgcolor: nodeStyle.bg || "background.paper",
+        border: `${effectiveBorderWidth}px solid ${
+          borderColor || "transparent"
+        }`,
+        boxShadow: effectiveShadow,
+        transition: "background-color 0.3s ease, box-shadow 0.3s ease",
+        "&:hover": {
+          bgcolor: nodeStyle.hoverBg || nodeStyle.bg || "grey.100",
+          boxShadow: effectiveShadow + 1,
+          cursor: "pointer",
+        },
+        ...nodeSx,
+      }}
+    >
+      <Box sx={{ textAlign: "left", width: "100%" }}>
+        <Typography
+          variant="subtitle2"
+          sx={{
+            textAlign: "center",
+            fontWeight: 600,
+            fontSize: 13,
+            mb: subtitle ? 0.5 : 0,
+          }}
+        >
+          {title}
+        </Typography>
+
+        {subtitle && (
+          <Typography
+            variant="body2"
+            color="text.secondary"
+            sx={{
+              textAlign: "center",
+              fontSize: 11,
+              mb: metaEntries.length ? 0.5 : 0,
+            }}
+          >
+            {subtitle}
+          </Typography>
+        )}
+
+        {metaEntries.length > 0 && (
+          <Box sx={{ mt: 0.25 }}>
+            {metaEntries.map(([key, value]) => (
+              <Typography
+                key={key}
+                variant="caption"
+                color="text.secondary"
+                sx={{
+                  textAlign: "center",
+                  display: "block",
+                  fontSize: 10,
+                }}
+              >
+                {key}: {String(value)}
+              </Typography>
+            ))}
+          </Box>
+        )}
+      </Box>
+    </Card>
+  );
+};
+
+export default DefaultNodeCard;

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

@@ -0,0 +1,162 @@
+import { Box } from "@mui/material";
+import { useSelection } from "../selection/SelectionContext";
+
+import React, { useCallback, useEffect, useRef, useState } from "react";
+
+const DraggableNode = ({
+  children,
+  registerRef,
+  onDrag,
+  nodeId,
+  selectionColor = "#64748b",
+  initialPosition,
+  onConnect,
+}) => {
+  const [offset, setOffset] = useState(() =>
+    initialPosition ? { ...initialPosition } : { x: 0, y: 0 }
+  );
+
+  useEffect(() => {
+    if (initialPosition) {
+      setOffset({ ...initialPosition });
+    } else {
+      setOffset({ x: 0, y: 0 });
+    }
+  }, [initialPosition]);
+
+  const localRef = useRef(null);
+  const lastDeltaRef = useRef({ x: 0, y: 0 });
+  const onDragRef = useRef(onDrag);
+
+  const {
+    isSelected,
+    selectNode,
+    toggleSelection,
+    clearSelection,
+    registerNodeHandlers,
+    moveSelectedNodes,
+    selectedIds,
+  } = useSelection();
+
+  const selected = isSelected(nodeId);
+
+  useEffect(() => {
+    onDragRef.current = onDrag;
+  }, [onDrag]);
+
+  useEffect(() => {
+    if (!nodeId) return;
+
+    return registerNodeHandlers(nodeId, {
+      setOffset,
+      onDrag: () => onDragRef.current?.(),
+    });
+  }, [nodeId, registerNodeHandlers]);
+
+  const setRef = useCallback(
+    (el) => {
+      localRef.current = el;
+      registerRef?.(el);
+    },
+    [registerRef]
+  );
+
+  const handleMouseDown = useCallback(
+    (e) => {
+      if (e.button !== 0) return;
+      e.stopPropagation();
+
+      if (onConnect && e.altKey) {
+        e.preventDefault();
+        onConnect(nodeId, [...selectedIds]);
+        return;
+      }
+
+      if (e.shiftKey || e.ctrlKey || e.metaKey) {
+        toggleSelection(nodeId);
+        return;
+      }
+
+      if (!selected) {
+        clearSelection();
+        selectNode(nodeId);
+      }
+
+      const startX = e.clientX;
+      const startY = e.clientY;
+      const startOffset = { ...offset };
+      lastDeltaRef.current = { x: 0, y: 0 };
+
+      const handleMove = (ev) => {
+        const dx = ev.clientX - startX;
+        const dy = ev.clientY - startY;
+
+        const deltaDx = dx - lastDeltaRef.current.x;
+        const deltaDy = dy - lastDeltaRef.current.y;
+        lastDeltaRef.current = { x: dx, y: dy };
+
+        setOffset({
+          x: startOffset.x + dx,
+          y: startOffset.y + dy,
+        });
+
+        if (selectedIds.size > 1) {
+          moveSelectedNodes(deltaDx, deltaDy, nodeId);
+        }
+
+        onDragRef.current?.();
+      };
+
+      const handleUp = () => {
+        window.removeEventListener("mousemove", handleMove);
+        window.removeEventListener("mouseup", handleUp);
+      };
+
+      window.addEventListener("mousemove", handleMove);
+      window.addEventListener("mouseup", handleUp);
+    },
+    [
+      nodeId,
+      offset,
+      selected,
+      selectedIds,
+      selectNode,
+      toggleSelection,
+      clearSelection,
+      moveSelectedNodes,
+      onConnect,
+    ]
+  );
+
+  return (
+    <Box
+      ref={setRef}
+      data-node-id={nodeId}
+      onMouseDown={handleMouseDown}
+      sx={{
+        display: "inline-flex",
+        flexDirection: "column",
+        alignItems: "center",
+        position: "relative",
+        transform: `translate(${offset.x}px, ${offset.y}px)`,
+        cursor: "grab",
+        "&:active": { cursor: "grabbing" },
+        ...(selected && {
+          "&::after": {
+            content: '""',
+            position: "absolute",
+            inset: -6,
+            border: `2px solid ${selectionColor}`,
+            borderRadius: "12px",
+            pointerEvents: "none",
+            boxShadow: `0 0 8px ${selectionColor}66`,
+          },
+        }),
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default DraggableNode;

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;