@canmingir/link 1.2.19 → 1.2.20

package/package.json

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

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

@@ -11,6 +11,7 @@ export const Flow = ({
   plugin,
   editable = false,
   onChange,
+  height,
 }) => {
   const [floatingNodes, setFloatingNodes] = useState([]);
 
@@ -72,6 +73,7 @@ export const Flow = ({
       onCut={editable ? handleCut : undefined}
       onConnect={editable ? handleConnect : undefined}
       floatingNodes={floatingNodes}
+      height={height}
     />
   );
 };

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

@@ -16,6 +16,7 @@ const FlowNode = ({
   style,
   plugin,
   node,
+  height,
   ...props
 }) => {
   if (!isRoot) {
@@ -48,6 +49,7 @@ const FlowNode = ({
         variant={variant}
         style={style}
         plugin={plugin}
+        height={height}
       >
         {node && (
           <FlowNodeView

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

@@ -16,6 +16,9 @@ const FlowViewport = ({
   variant,
   style,
   plugin,
+  height = "100vh",
+  sx = {},
+  ...rest
 }) => {
   const clampZoom = (zoom) => Math.min(2.5, Math.max(0.25, zoom));
 
@@ -50,16 +53,34 @@ const FlowViewport = ({
   }, []);
 
   useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
     const onWheel = (e) => {
       const wantsZoom = e.ctrlKey || e.metaKey;
-      if (!wantsZoom) return;
-      e.preventDefault();
-      const direction = e.deltaY > 0 ? -1 : 1;
-      const factor = direction > 0 ? 1.1 : 1 / 1.1;
-      setZoom((z) => clampZoom(z * factor));
+
+      if (wantsZoom) {
+        e.preventDefault();
+        const direction = e.deltaY > 0 ? -1 : 1;
+        const factor = direction > 0 ? 1.1 : 1 / 1.1;
+        setZoom((z) => clampZoom(z * factor));
+      } else if (e.shiftKey) {
+        e.preventDefault();
+        const delta = e.deltaX !== 0 ? e.deltaX : e.deltaY;
+        setOffset((prev) => ({
+          x: prev.x - delta,
+          y: prev.y,
+        }));
+      } else {
+        e.preventDefault();
+        setOffset((prev) => ({
+          x: prev.x - e.deltaX,
+          y: prev.y - e.deltaY,
+        }));
+      }
     };
-    window.addEventListener("wheel", onWheel, { passive: false });
-    return () => window.removeEventListener("wheel", onWheel);
+    container.addEventListener("wheel", onWheel, { passive: false });
+    return () => container.removeEventListener("wheel", onWheel);
   }, []);
 
   useEffect(() => {
@@ -225,10 +246,10 @@ const FlowViewport = ({
           transform: `translate(${offset.x}px, ${offset.y}px) scale(${zoom})`,
           transformOrigin: "center center",
           width: "100%",
-          height: "100%",
+          height: height,
           display: "flex",
           alignItems: "center",
-          justifyContent: "center",
+          justifyContent: variant === "horizontal" ? "flex-start" : "center",
           transition: isDragging ? "none" : "transform 0.1s ease-out",
           pointerEvents: "auto",
           position: "relative",