Make scrollbars interactable (#328)

* Make scrollbars interactable

* Add watcher for position change

* Fix case of data

* Fix updateHandlePosition capitalization

* Clean up class name thing

* Scroll bars between 0 and 1

* Allow width to be 100%

* Scrollbars reflect backend

* Include viewport in scrollbar

* Add half viewport padding for scrollbars

* Refactor scrollbar using lerp

* Send messages to backend

* Refactor

* Use glam::DVec2

* Remove glam::

* Remove unnecessary abs

* Add TrueDoctor's change

* Add missing minus

* Fix vue issues

* Fix viewport size

* Remove unnecessary log

* Linear dragging

frontend/src/components/panels/Document.vue

@@ -123,11 +123,23 @@
 						</div>
 					</LayoutCol>
 					<LayoutCol :class="'bar-area'">
-						<PersistentScrollbar :direction="ScrollbarDirection.Vertical" :class="'right-scrollbar'" />
+						<PersistentScrollbar
+							:direction="ScrollbarDirection.Vertical"
+							:handlePosition="scrollbarPos.y"
+							@update:handlePosition="translateCanvasY"
+							v-model:handleLength="scrollbarSize.y"
+							:class="'right-scrollbar'"
+						/>
 					</LayoutCol>
 				</LayoutRow>
 				<LayoutRow :class="'bar-area'">
-					<PersistentScrollbar :direction="ScrollbarDirection.Horizontal" :class="'bottom-scrollbar'" />
+					<PersistentScrollbar
+						:direction="ScrollbarDirection.Horizontal"
+						:handlePosition="scrollbarPos.x"
+						@update:handlePosition="translateCanvasX"
+						v-model:handleLength="scrollbarSize.x"
+						:class="'bottom-scrollbar'"
+					/>
 				</LayoutRow>
 			</LayoutCol>
 		</LayoutRow>
@@ -210,7 +222,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { ResponseType, registerResponseHandler, Response, UpdateCanvas, SetActiveTool, SetCanvasZoom, SetCanvasRotation } from "@/utilities/response-handler";
+import { ResponseType, registerResponseHandler, Response, UpdateCanvas, UpdateScrollbars, SetActiveTool, SetCanvasZoom, SetCanvasRotation } from "@/utilities/response-handler";
 import { SeparatorDirection, SeparatorType } from "@/components/widgets/widgets";
 import { comingSoon } from "@/utilities/errors";
 
@@ -271,6 +283,16 @@ export default defineComponent({
 		async setRotation(newRotation: number) {
 			(await wasm).set_rotation(newRotation * (Math.PI / 180));
 		},
+		async translateCanvasX(newValue: number) {
+			const delta = newValue - this.scrollbarPos.x;
+			this.scrollbarPos.x = newValue;
+			(await wasm).translate_canvas(-delta * this.scrollbarMultiplier.x, 0);
+		},
+		async translateCanvasY(newValue: number) {
+			const delta = newValue - this.scrollbarPos.y;
+			this.scrollbarPos.y = newValue;
+			(await wasm).translate_canvas(0, -delta * this.scrollbarMultiplier.y);
+		},
 		async selectTool(toolName: string) {
 			(await wasm).select_tool(toolName);
 		},
@@ -287,6 +309,15 @@ export default defineComponent({
 			if (updateData) this.viewportSvg = updateData.document;
 		});
 
+		registerResponseHandler(ResponseType.UpdateScrollbars, (responseData: Response) => {
+			const updateData = responseData as UpdateScrollbars;
+			if (updateData) {
+				this.scrollbarPos = updateData.position;
+				this.scrollbarSize = updateData.size;
+				this.scrollbarMultiplier = updateData.multiplier;
+			}
+		});
+
 		registerResponseHandler(ResponseType.SetActiveTool, (responseData: Response) => {
 			const toolData = responseData as SetActiveTool;
 			if (toolData) this.activeTool = toolData.tool_name;
@@ -325,6 +356,9 @@ export default defineComponent({
 			overlaysEnabled: true,
 			documentRotation: 0,
 			documentZoom: 100,
+			scrollbarPos: { x: 0.5, y: 0.5 },
+			scrollbarSize: { x: 0.5, y: 0.5 },
+			scrollbarMultiplier: { x: 0, y: 0 },
 			IncrementBehavior,
 			IncrementDirection,
 			MenuDirection,

frontend/src/components/widgets/scrollbars/PersistentScrollbar.vue

@@ -1,12 +1,10 @@
 <template>
 	<div class="persistent-scrollbar" :class="direction.toLowerCase()">
-		<button class="arrow decrease"></button>
-		<div class="scroll-track">
-			<div class="scroll-click-area decrease" :style="[trackStart, preThumb, sides]"></div>
-			<div class="scroll-thumb" :style="[thumbStart, thumbEnd, sides]"></div>
-			<div class="scroll-click-area increase" :style="[postThumb, trackEnd, sides]"></div>
+		<button class="arrow decrease" @mousedown="changePosition(-50)"></button>
+		<div class="scroll-track" ref="scrollTrack" @mousedown="grabArea">
+			<div class="scroll-thumb" @mousedown="grabHandle" :class="{ dragging }" ref="handle" :style="[thumbStart, thumbEnd, sides]"></div>
 		</div>
-		<button class="arrow increase"></button>
+		<button class="arrow increase" @click="changePosition(50)"></button>
 	</div>
 </template>
 
@@ -39,6 +37,9 @@
 			&:hover {
 				background: var(--color-6-lowergray);
 			}
+			&.dragging {
+				background: var(--color-accent-hover);
+			}
 		}
 
 		.scroll-click-area {
@@ -57,6 +58,9 @@
 			&:hover {
 				border-color: transparent transparent var(--color-6-lowergray) transparent;
 			}
+			&:active {
+				border-color: transparent transparent var(--color-c-brightgray) transparent;
+			}
 		}
 
 		.arrow.increase {
@@ -67,6 +71,9 @@
 			&:hover {
 				border-color: var(--color-6-lowergray) transparent transparent transparent;
 			}
+			&:active {
+				border-color: var(--color-c-brightgray) transparent transparent transparent;
+			}
 		}
 	}
 
@@ -81,6 +88,9 @@
 			&:hover {
 				border-color: transparent var(--color-6-lowergray) transparent transparent;
 			}
+			&:active {
+				border-color: transparent var(--color-c-brightgray) transparent transparent;
+			}
 		}
 
 		.arrow.increase {
@@ -91,6 +101,9 @@
 			&:hover {
 				border-color: transparent transparent transparent var(--color-6-lowergray);
 			}
+			&:active {
+				border-color: transparent transparent transparent var(--color-c-brightgray);
+			}
 		}
 	}
 }
@@ -99,6 +112,15 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
+// Linear Interpolation
+const lerp = (x: number, y: number, a: number) => x * (1 - a) + y * a;
+
+// Convert the position of the handle (0-1) to the position on the track (0-1).
+// This includes the 1/2 handle length gap  of the possible handle positionson each side so the end of the handle doesn't go off the track.
+const handleToTrack = (handleLen: number, handlePos: number) => lerp(handleLen / 2, 1 - handleLen / 2, handlePos);
+
+const mousePosition = (direction: ScrollbarDirection, e: MouseEvent) => (direction === ScrollbarDirection.Vertical ? e.clientY : e.clientX);
+
 export enum ScrollbarDirection {
 	"Horizontal" = "Horizontal",
 	"Vertical" = "Vertical",
@@ -107,33 +129,19 @@ export enum ScrollbarDirection {
 export default defineComponent({
 	props: {
 		direction: { type: String as PropType<ScrollbarDirection>, default: ScrollbarDirection.Vertical },
+		handlePosition: { type: Number, default: 0.5 },
+		handleLength: { type: Number, default: 0.5 },
 	},
 	computed: {
-		trackStart(): { left: string } | { top: string } {
-			return this.direction === ScrollbarDirection.Vertical ? { top: "0%" } : { left: "0%" };
-		},
-		preThumb(): { right: string } | { bottom: string } {
-			const start = 25;
-
-			return this.direction === ScrollbarDirection.Vertical ? { bottom: `${100 - start}%` } : { right: `${100 - start}%` };
-		},
 		thumbStart(): { left: string } | { top: string } {
-			const start = 25;
+			const start = handleToTrack(this.handleLength, this.handlePosition) - this.handleLength / 2;
 
-			return this.direction === ScrollbarDirection.Vertical ? { top: `${start}%` } : { left: `${start}%` };
+			return this.direction === ScrollbarDirection.Vertical ? { top: `${start * 100}%` } : { left: `${start * 100}%` };
 		},
 		thumbEnd(): { right: string } | { bottom: string } {
-			const end = 25;
+			const end = 1 - handleToTrack(this.handleLength, this.handlePosition) - this.handleLength / 2;
 
-			return this.direction === ScrollbarDirection.Vertical ? { bottom: `${end}%` } : { right: `${end}%` };
-		},
-		postThumb(): { left: string } | { top: string } {
-			const end = 25;
-
-			return this.direction === ScrollbarDirection.Vertical ? { top: `${100 - end}%` } : { left: `${100 - end}%` };
-		},
-		trackEnd(): { right: string } | { bottom: string } {
-			return this.direction === ScrollbarDirection.Vertical ? { bottom: "0%" } : { right: "0%" };
+			return this.direction === ScrollbarDirection.Vertical ? { bottom: `${end * 100}%` } : { right: `${end * 100}%` };
 		},
 		sides(): { left: string; right: string } | { top: string; bottom: string } {
 			return this.direction === ScrollbarDirection.Vertical ? { left: "0%", right: "0%" } : { top: "0%", bottom: "0%" };
@@ -142,7 +150,58 @@ export default defineComponent({
 	data() {
 		return {
 			ScrollbarDirection,
+			dragging: false,
+			mousePos: 0,
 		};
 	},
+	mounted() {
+		window.addEventListener("mouseup", () => {
+			this.dragging = false;
+		});
+		window.addEventListener("mousemove", this.mouseMove);
+	},
+	methods: {
+		trackLength(): number {
+			const track = this.$refs.scrollTrack as HTMLElement;
+			return this.direction === ScrollbarDirection.Vertical ? track.clientHeight - this.handleLength : track.clientWidth;
+		},
+		trackOffset(): number {
+			const track = this.$refs.scrollTrack as HTMLElement;
+			return this.direction === ScrollbarDirection.Vertical ? track.getBoundingClientRect().top : track.getBoundingClientRect().left;
+		},
+		clampHandlePosition(newPos: number) {
+			const clampedPosition = Math.min(Math.max(newPos, 0), 1);
+			this.$emit("update:handlePosition", clampedPosition);
+		},
+		updateHandlePosition(e: MouseEvent) {
+			const position = mousePosition(this.direction, e);
+			this.clampHandlePosition(this.handlePosition + (position - this.mousePos) / (this.trackLength() * (1 - this.handleLength)));
+			this.mousePos = position;
+		},
+		grabHandle(e: MouseEvent) {
+			if (!this.dragging) {
+				this.dragging = true;
+				this.mousePos = mousePosition(this.direction, e);
+			}
+		},
+		grabArea(e: MouseEvent) {
+			if (!this.dragging) {
+				this.dragging = true;
+				this.mousePos = mousePosition(this.direction, e);
+				this.clampHandlePosition(((this.mousePos - this.trackOffset()) / this.trackLength() - this.handleLength / 2) / (1 - this.handleLength));
+			}
+		},
+		mouseUp() {
+			this.dragging = false;
+		},
+		mouseMove(e: MouseEvent) {
+			if (this.dragging) {
+				this.updateHandlePosition(e);
+			}
+		},
+		changePosition(difference: number) {
+			this.clampHandlePosition(this.handlePosition + difference / this.trackLength());
+		},
+	},
 });
 </script>

frontend/src/utilities/response-handler.ts

@@ -14,6 +14,7 @@ const state = reactive({
 
 export enum ResponseType {
 	UpdateCanvas = "UpdateCanvas",
+	UpdateScrollbars = "UpdateScrollbars",
 	ExportDocument = "ExportDocument",
 	SaveDocument = "SaveDocument",
 	OpenDocumentBrowse = "OpenDocumentBrowse",
@@ -66,6 +67,8 @@ function parseResponse(responseType: string, data: any): Response {
 			return newUpdateOpenDocumentsList(data.UpdateOpenDocumentsList);
 		case "UpdateCanvas":
 			return newUpdateCanvas(data.UpdateCanvas);
+		case "UpdateScrollbars":
+			return newUpdateScrollbars(data.UpdateScrollbars);
 		case "UpdateLayer":
 			return newUpdateLayer(data.UpdateLayer);
 		case "SetCanvasZoom":
@@ -91,7 +94,7 @@ function parseResponse(responseType: string, data: any): Response {
 	}
 }
 
-export type Response = SetActiveTool | UpdateCanvas | DocumentChanged | CollapseFolder | ExpandFolder | UpdateWorkingColors | SetCanvasZoom | SetCanvasRotation;
+export type Response = SetActiveTool | UpdateCanvas | UpdateScrollbars | DocumentChanged | CollapseFolder | ExpandFolder | UpdateWorkingColors | SetCanvasZoom | SetCanvasRotation;
 
 export interface UpdateOpenDocumentsList {
 	open_documents: Array<string>;
@@ -171,6 +174,19 @@ function newUpdateCanvas(input: any): UpdateCanvas {
 	};
 }
 
+export interface UpdateScrollbars {
+	position: { x: number; y: number };
+	size: { x: number; y: number };
+	multiplier: { x: number; y: number };
+}
+function newUpdateScrollbars(input: any): UpdateScrollbars {
+	return {
+		position: { x: input.position[0], y: input.position[1] },
+		size: { x: input.size[0], y: input.size[1] },
+		multiplier: { x: input.multiplier[0], y: input.multiplier[1] },
+	};
+}
+
 export interface ExportDocument {
 	document: string;
 	name: string;