@canmingir/link 1.2.41 → 1.2.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmingir/link",
-  "version": "1.2.41",
+  "version": "1.2.43",
   "type": "module",
   "exports": {
     ".": "./index.js",

package/src/lib/Flow/core/FlowViewport.jsx

@@ -1,10 +1,10 @@
+import React, { useEffect, useRef, useState } from "react";
+
 import { Box } from "@mui/material";
 import FloatingGraph from "../graph/FloatingGraph";
 import SelectionOverlay from "../selection/SelectionOverlay";
 import { useSelection } from "../selection/SelectionContext";
 
-import React, { useEffect, useRef, useState } from "react";
-
 const FlowViewport = ({
   children,
   selectionColor = "#64748b",
@@ -32,6 +32,7 @@ const FlowViewport = ({
   const selectionBoxRef = useRef(null);
   const mousePositionRef = useRef({ x: 0, y: 0 });
   const innerRef = useRef(null);
+  const didDragRef = useRef(false);
 
   const {
     clearSelection,
@@ -168,12 +169,14 @@ const FlowViewport = ({
     if (e.target?.closest?.(".MuiCard-root") || e.target?.closest?.("button"))
       return;
 
-    if (e.button !== 0) return;
+    const isPan = e.button === 0 || e.button === 2;
+    if (!isPan) return;
 
     const startX = e.clientX;
     const startY = e.clientY;
+    didDragRef.current = false;
 
-    if (e.shiftKey || e.ctrlKey || e.metaKey) {
+    if (e.button === 0 && (e.shiftKey || e.ctrlKey || e.metaKey)) {
       setSelectionBox({ startX, startY, currentX: startX, currentY: startY });
       selectionBoxRef.current = {
         startX,
@@ -238,15 +241,20 @@ const FlowViewport = ({
       return;
     }
 
-    clearSelection();
+    if (e.button === 0) clearSelection();
 
     setIsDragging(true);
     const startOffset = { ...offset };
 
     const onMove = (ev) => {
+      const dx = ev.clientX - startX;
+      const dy = ev.clientY - startY;
+      if (!didDragRef.current && (Math.abs(dx) > 3 || Math.abs(dy) > 3)) {
+        didDragRef.current = true;
+      }
       setOffset({
-        x: startOffset.x + (ev.clientX - startX),
-        y: startOffset.y + (ev.clientY - startY),
+        x: startOffset.x + dx,
+        y: startOffset.y + dy,
       });
     };
 
@@ -260,10 +268,27 @@ const FlowViewport = ({
     window.addEventListener("mouseup", onUp);
   };
 
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const onClickCapture = (e) => {
+      if (didDragRef.current) {
+        e.stopPropagation();
+        e.preventDefault();
+        didDragRef.current = false;
+      }
+    };
+
+    container.addEventListener("click", onClickCapture, true);
+    return () => container.removeEventListener("click", onClickCapture, true);
+  }, []);
+
   return (
     <Box
       ref={containerRef}
       onMouseDown={handleViewportMouseDown}
+      onContextMenu={(e) => e.preventDefault()}
       sx={{
         width: "100%",
         height: "100vh",

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

@@ -1,8 +1,8 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+
 import { Box } from "@mui/material";
 import { useSelection } from "../selection/SelectionContext";
 
-import React, { useCallback, useEffect, useRef, useState } from "react";
-
 const DraggableNode = ({
   children,
   registerRef,
@@ -13,7 +13,7 @@ const DraggableNode = ({
   onConnect,
 }) => {
   const [offset, setOffset] = useState(() =>
-    initialPosition ? { ...initialPosition } : { x: 0, y: 0 }
+    initialPosition ? { ...initialPosition } : { x: 0, y: 0 },
   );
 
   useEffect(() => {
@@ -27,6 +27,7 @@ const DraggableNode = ({
   const localRef = useRef(null);
   const lastDeltaRef = useRef({ x: 0, y: 0 });
   const onDragRef = useRef(onDrag);
+  const didDragRef = useRef(false);
 
   const {
     isSelected,
@@ -58,14 +59,32 @@ const DraggableNode = ({
       localRef.current = el;
       registerRef?.(el);
     },
-    [registerRef]
+    [registerRef],
   );
 
+  useEffect(() => {
+    const el = localRef.current;
+    if (!el) return;
+
+    const onClickCapture = (e) => {
+      if (didDragRef.current) {
+        e.stopPropagation();
+        e.preventDefault();
+        didDragRef.current = false;
+      }
+    };
+
+    el.addEventListener("click", onClickCapture, true);
+    return () => el.removeEventListener("click", onClickCapture, true);
+  }, []);
+
   const handleMouseDown = useCallback(
     (e) => {
       if (e.button !== 0) return;
       e.stopPropagation();
 
+      didDragRef.current = false;
+
       if (onConnect && e.altKey) {
         e.preventDefault();
         onConnect(nodeId, [...selectedIds]);
@@ -91,6 +110,10 @@ const DraggableNode = ({
         const dx = ev.clientX - startX;
         const dy = ev.clientY - startY;
 
+        if (!didDragRef.current && (Math.abs(dx) > 3 || Math.abs(dy) > 3)) {
+          didDragRef.current = true;
+        }
+
         const deltaDx = dx - lastDeltaRef.current.x;
         const deltaDy = dy - lastDeltaRef.current.y;
         lastDeltaRef.current = { x: dx, y: dy };
@@ -125,7 +148,7 @@ const DraggableNode = ({
       clearSelection,
       moveSelectedNodes,
       onConnect,
-    ]
+    ],
   );
 
   return (

package/src/lib/GlassCard/GlassCard.jsx

@@ -0,0 +1,95 @@
+import { Box, Card, Divider, Typography } from "@mui/material";
+import { alpha, useTheme } from "@mui/material/styles";
+
+import React from "react";
+
+const GlassCard = ({
+  width = "100%",
+  height = "85vh",
+  header,
+  content,
+  actions,
+  contentSx = {},
+}) => {
+  const theme = useTheme();
+
+  return (
+    <Card
+      sx={{
+        width: width || "100%",
+        height: height || "85vh",
+        flexShrink: 0,
+        display: "flex",
+        flexDirection: "column",
+        background: `linear-gradient(135deg, ${theme.palette.primary.main}08 0%, ${theme.palette.secondary.main}05 100%)`,
+        backdropFilter: "blur(10px)",
+        border: `1px solid ${theme.palette.divider}`,
+        borderRadius: 2,
+        overflow: "hidden",
+      }}
+    >
+      {header && (
+        <>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              px: 2,
+              py: 1.5,
+              minHeight: 52,
+              flexShrink: 0,
+            }}
+          >
+            <Box sx={{ minWidth: 0, flex: 1 }}>
+              <Typography
+                variant="subtitle2"
+                noWrap
+                sx={{
+                  fontWeight: 600,
+                  color: "text.primary",
+                  lineHeight: 1.3,
+                }}
+              >
+                {header.title}
+              </Typography>
+              {header.subtitle && (
+                <Typography
+                  variant="caption"
+                  noWrap
+                  sx={{
+                    color: "text.secondary",
+                    lineHeight: 1.3,
+                    display: "block",
+                  }}
+                >
+                  {header.subtitle}
+                </Typography>
+              )}
+            </Box>
+            {actions && <Box sx={{ ml: 1, flexShrink: 0 }}>{actions}</Box>}
+          </Box>
+          <Divider />
+        </>
+      )}
+
+      <Box
+        sx={{
+          flex: 1,
+          overflow: "auto",
+          position: "relative",
+          ...contentSx,
+        }}
+      >
+        {!header && actions && (
+          <Box sx={{ position: "absolute", top: 8, right: 8, zIndex: 1 }}>
+            {actions}
+          </Box>
+        )}
+        {content}
+      </Box>
+    </Card>
+  );
+};
+
+export default GlassCard;

package/src/lib/GlassCard/index.js

@@ -0,0 +1 @@
+export { default } from "./GlassCard";

package/src/lib/index.js

@@ -49,3 +49,4 @@ export { default as Schema } from "./Schema";
 export { default as SchemaEditor } from "./SchemaEditor";
 export { default as ToggleableMenu } from "./ToggleableMenu";
 export { default as APIBody } from "./NewApiBody/NewAPIBody";
+export { default as GlassCard } from "./GlassCard/GlassCard";