fix: temporary fix for mobile pan

services/frontend/src/components/Canvas/index.tsx

@@ -78,8 +78,23 @@ export const Canvas: FC<ICanvasProps> = (props) => {
     }
   };
 
+  const onCanvasMouseMove = (e: any) => {
+    if (!dragging) {
+      return;
+    }
+
+    if (e.pageX && e.pageY) {
+      const styles = {
+        left: _left + e.pageX - _initX + "px",
+        top: _top + e.pageY - _initY + "px"
+      };
+      setStyle(styles);
+    }
+  };
+
   const onCanvasMouseUpLeave = (e: any) => {
     if (dragging) {
+      if (e.pageX && e.pageY) {
         const left = _left + e.pageX - _initX;
         const top = _top + e.pageY - _initY;
 
@@ -91,25 +106,15 @@ export const Canvas: FC<ICanvasProps> = (props) => {
           top: top
         });
       }
-  };
-
-  const onCanvasMouseMove = (e: any) => {
-    if (!dragging) {
-      return;
     }
-
-    const styles = {
-      left: _left + e.pageX - _initX + "px",
-      top: _top + e.pageY - _initY + "px"
-    };
-
-    setStyle(styles);
   };
 
   const onCanvasMouseDown = (e: any) => {
+    if (e.pageX && e.pageY) {
       _setInitX(e.pageX);
       _setInitY(e.pageY);
       setDragging(true);
+    }
   };
 
   useEffect(() => {
@@ -166,7 +171,7 @@ export const Canvas: FC<ICanvasProps> = (props) => {
           <div
             id={CANVAS_ID}
             ref={containerCallbackRef}
-            className="canvas h-full w-full"
+            className="canvas"
             style={{
               transformOrigin: "0px 0px 0px",
               transform: `translate(${translateWidth}px, ${translateHeight}px) scale(${_scale})`