Fixed the panning with touch

Author: tlaukkanen

src/components/editor/canvas.tsx

@@ -235,10 +235,14 @@ export default function Canvas({
           edges={edges}
           nodeTypes={nodeTypes}
           nodes={nodes} // <-- This is the key change. We're now using the nodes directly which include the callbacks
+          panOnDrag={true}
+          panOnScroll={false}
           proOptions={proOptions}
           selectionOnDrag={true}
           snapGrid={[10, 10]}
           snapToGrid={showGrid}
+          zoomOnPinch={true}
+          zoomOnScroll={true}
           onConnect={onConnect}
           onEdgesChange={onEdgesChange}
           onInit={onInit}

src/components/editor/nodes/base-node.tsx

@@ -299,57 +299,12 @@ export const BaseNode = memo(
         const resolvedUrl = resolveNodeUrl(data.url);
         const textAlign = textProps?.textAlign ?? "left";
 
-        const forwardTouchPointer = (
-          event: React.PointerEvent<HTMLDivElement>,
-        ) => {
-          if (event.pointerType !== "touch") {
-            return;
-          }
-
-          const nodeElement = containerRef.current;
-
-          if (!nodeElement) {
-            return;
-          }
-
-          const interactiveAncestor = (
-            event.target as HTMLElement | null
-          )?.closest("button, a, textarea, input");
-
-          if (interactiveAncestor) {
-            return;
-          }
-
-          const pointerInit: PointerEventInit = {
-            bubbles: true,
-            cancelable: true,
-            pointerType: "touch",
-            clientX: event.clientX,
-            clientY: event.clientY,
-          };
-
-          if (typeof PointerEvent === "function") {
-            nodeElement.dispatchEvent(
-              new PointerEvent("pointerdown", pointerInit),
-            );
-          } else {
-            nodeElement.dispatchEvent(
-              new MouseEvent("mousedown", {
-                bubbles: true,
-                cancelable: true,
-                clientX: event.clientX,
-                clientY: event.clientY,
-              }),
-            );
-          }
-        };
-
         return (
           <div
             className={clsx(
               "h-full flex flex-col min-h-[16px]",
               resolvedDescriptionClass,
-              "px-1 touch-none select-none", // Add consistent padding and ensure touch dragging propagates
+              "px-1 ", // Add consistent padding
               // Text alignment horizontal
               textProps?.textAlign === "left" && "text-left",
               textProps?.textAlign === "center" && "text-center",
@@ -366,11 +321,10 @@ export const BaseNode = memo(
               textProps?.strikethrough && "line-through",
             )}
             onDoubleClick={handleDoubleClick}
-            onPointerDownCapture={forwardTouchPointer}
           >
             <div
               className={clsx(
-                "inline-flex w-full flex-wrap items-start gap-1 touch-none pointer-events-none select-none",
+                "inline-flex w-full flex-wrap items-start gap-1",
                 textAlign === "center" && "justify-center",
                 textAlign === "right" && "justify-end",
                 textAlign === "justify" && "justify-center",
@@ -383,7 +337,7 @@ export const BaseNode = memo(
                 <IconButton
                   disableRipple
                   aria-label="Open link"
-                  className="pointer-events-auto select-none"
+                  className="pointer-events-auto"
                   size="small"
                   sx={{
                     padding: "2px",