diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue index 608dd27..d01789e 100644 --- a/src/components/board/Board.vue +++ b/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, - y: e.clientY + x: clientX, + 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, - y: this.dragged.y + (e.clientY - this.lastMousePosition.y) / zoom + x: this.dragged.x + (clientX - this.lastMousePosition.x) / zoom, + y: this.dragged.y + (clientY - this.lastMousePosition.y) / zoom }; this.lastMousePosition = { - x: e.clientX, - y: e.clientY + x: clientX, + y: clientY }; if (Math.abs(this.dragged.x) > 10 || Math.abs(this.dragged.y) > 10) { diff --git a/src/components/board/BoardNode.vue b/src/components/board/BoardNode.vue index 5936777..3ca807d 100644 --- a/src/components/board/BoardNode.vue +++ b/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(); diff --git a/src/components/system/Nav.vue b/src/components/system/Nav.vue index 8e54b17..93a61b3 100644 --- a/src/components/system/Nav.vue +++ b/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, diff --git a/src/data/layers/main.ts b/src/data/layers/main.ts index 1d34797..fdac1c1 100644 --- a/src/data/layers/main.ts +++ b/src/data/layers/main.ts @@ -167,6 +167,7 @@ const pinAction = { export default { id: "main", display: Main, + minWidth: undefined, startData() { return { openNode: null, diff --git a/src/main.css b/src/main.css index e204b96..519e0e2 100644 --- a/src/main.css +++ b/src/main.css @@ -16,7 +16,6 @@ body { overflow: hidden; - min-width: 640px; transition: none; text-align: center; }