Various mobile fixes

src/components/board/Board.vue

@@ -137,14 +137,26 @@ export default defineComponent({
         onInit(panzoomInstance: any) {
             panzoomInstance.setTransformOrigin(null);
         },
-        mouseDown(e: MouseEvent, nodeID: number | null = null, draggable = false) {
+        mouseDown(e: MouseEvent | TouchEvent, nodeID: number | null = null, draggable = false) {
             if (this.dragging == null) {
                 e.preventDefault();
                 e.stopPropagation();
 
+                let clientX, clientY;
+                if ("touches" in e) {
+                    if (e.touches.length === 1) {
+                        clientX = e.touches[0].clientX;
+                        clientY = e.touches[0].clientY;
+                    } else {
+                        return;
+                    }
+                } else {
+                    clientX = e.clientX;
+                    clientY = e.clientY;
+                }
                 this.lastMousePosition = {
-                    x: e.clientX,
+                    x: clientX,
-                    y: e.clientY
+                    y: clientY
                 };
                 this.dragged = { x: 0, y: 0 };
                 this.hasDragged = false;
@@ -158,15 +170,30 @@ export default defineComponent({
                 player.layers[this.layer].boards[this.id].selectedAction = null;
             }
         },
-        drag(e: MouseEvent) {
+        drag(e: MouseEvent | TouchEvent) {
             const zoom = (this.getZoomLevel as () => number)();
+
+            let clientX, clientY;
+            if ("touches" in e) {
+                if (e.touches.length === 1) {
+                    clientX = e.touches[0].clientX;
+                    clientY = e.touches[0].clientY;
+                } else {
+                    this.endDragging(this.dragging);
+                    return;
+                }
+            } else {
+                clientX = e.clientX;
+                clientY = e.clientY;
+            }
+
             this.dragged = {
-                x: this.dragged.x + (e.clientX - this.lastMousePosition.x) / zoom,
+                x: this.dragged.x + (clientX - this.lastMousePosition.x) / zoom,
-                y: this.dragged.y + (e.clientY - this.lastMousePosition.y) / zoom
+                y: this.dragged.y + (clientY - this.lastMousePosition.y) / zoom
             };
             this.lastMousePosition = {
-                x: e.clientX,
+                x: clientX,
-                y: e.clientY
+                y: clientY
             };
 
             if (Math.abs(this.dragged.x) > 10 || Math.abs(this.dragged.y) > 10) {

src/components/board/BoardNode.vue

@@ -295,7 +295,7 @@ export default defineComponent({
         }
     },
     methods: {
-        mouseDown(e: MouseEvent) {
+        mouseDown(e: MouseEvent | TouchEvent) {
             this.$emit("mouseDown", e, this.node.id, this.draggable);
         },
         mouseUp() {
@@ -309,7 +309,7 @@ export default defineComponent({
         mouseLeave() {
             this.hovering = false;
         },
-        performAction(e: MouseEvent, action: BoardNodeAction) {
+        performAction(e: MouseEvent | TouchEvent, action: BoardNodeAction) {
             // If the onClick function made this action selected,
             // don't propagate the event (which will deselect everything)
             if (action.onClick(this.node) || this.board.selectedAction === action) {
@@ -317,7 +317,7 @@ export default defineComponent({
                 e.stopPropagation();
             }
         },
-        actionMouseUp(e: MouseEvent, action: BoardNodeAction) {
+        actionMouseUp(e: MouseEvent | TouchEvent, action: BoardNodeAction) {
             if (this.board.selectedAction === action) {
                 e.preventDefault();
                 e.stopPropagation();

src/components/system/Nav.vue

@@ -139,6 +139,7 @@ export default defineComponent({
     width: 46px;
     display: flex;
     cursor: pointer;
+    flex-shrink: 0;
 }
 
 .overlay-nav {
@@ -169,6 +170,9 @@ export default defineComponent({
 
 .nav > .title {
     width: unset;
+    flex-shrink: 1;
+    overflow: hidden;
+    white-space: nowrap;
 }
 
 .nav .saves,

src/data/layers/main.ts

@@ -167,6 +167,7 @@ const pinAction = {
 export default {
     id: "main",
     display: Main,
+    minWidth: undefined,
     startData() {
         return {
             openNode: null,

src/main.css

@@ -16,7 +16,6 @@
 
 body {
 	overflow: hidden;
-	min-width: 640px;
 	transition: none;
 	text-align: center;
 }