Improve scrollbar behavior (#351)

* Change scrollbar behavior

* Leave space at the end of the scrollbar

* Change mid to center

* Use shorter array initialization

* Add space around scrollbar

* Fix scrollbar spacing

* Smooth end of scrollbars

* Add page up and down

* Page up and down on click in scrollbar track

* Add shift pageup to translate horizontally

frontend/src/components/panels/Document.vue

@@ -128,6 +128,7 @@
 							:handlePosition="scrollbarPos.y"
 							@update:handlePosition="translateCanvasY"
 							v-model:handleLength="scrollbarSize.y"
+							@pressTrack="pageY"
 							:class="'right-scrollbar'"
 						/>
 					</LayoutCol>
@@ -138,6 +139,7 @@
 						:handlePosition="scrollbarPos.x"
 						@update:handlePosition="translateCanvasX"
 						v-model:handleLength="scrollbarSize.x"
+						@pressTrack="pageX"
 						:class="'bottom-scrollbar'"
 					/>
 				</LayoutRow>
@@ -293,6 +295,14 @@ export default defineComponent({
 			this.scrollbarPos.y = newValue;
 			(await wasm).translate_canvas(0, -delta * this.scrollbarMultiplier.y);
 		},
+		async pageX(delta: number) {
+			const move = delta < 0 ? 1 : -1;
+			(await wasm).translate_canvas_by_fraction(move, 0);
+		},
+		async pageY(delta: number) {
+			const move = delta < 0 ? 1 : -1;
+			(await wasm).translate_canvas_by_fraction(0, move);
+		},
 		async selectTool(toolName: string) {
 			(await wasm).select_tool(toolName);
 		},

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

@@ -186,9 +186,9 @@ export default defineComponent({
 		},
 		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));
+				const mousePos = mousePosition(this.direction, e);
+				const oldMouse = handleToTrack(this.handleLength, this.handlePosition) * this.trackLength() + this.trackOffset();
+				this.$emit("pressTrack", mousePos - oldMouse);
 			}
 		},
 		mouseUp() {

frontend/wasm/src/document.rs

@@ -312,6 +312,13 @@ pub fn translate_canvas(delta_x: f64, delta_y: f64) -> Result<(), JsValue> {
 	EDITOR_STATE.with(|editor| editor.borrow_mut().handle_message(ev)).map_err(convert_error)
 }
 
+/// Translates document (in viewport coords)
+#[wasm_bindgen]
+pub fn translate_canvas_by_fraction(delta_x: f64, delta_y: f64) -> Result<(), JsValue> {
+	let ev = MovementMessage::TranslateCanvasByViewportFraction((delta_x, delta_y).into());
+	EDITOR_STATE.with(|editor| editor.borrow_mut().handle_message(ev)).map_err(convert_error)
+}
+
 /// Update the list of selected layers. The layer paths have to be stored in one array and are separated by LayerId::MAX
 #[wasm_bindgen]
 pub fn select_layers(paths: Vec<LayerId>) -> Result<(), JsValue> {

frontend/wasm/src/wrappers.rs

@@ -151,6 +151,8 @@ pub fn translate_key(name: &str) -> Key {
 		"]" => KeyRightBracket,
 		"{" => KeyLeftCurlyBracket,
 		"}" => KeyRightCurlyBracket,
+		"pageup" => KeyPageUp,
+		"pagedown" => KeyPageDown,
 		_ => UnknownKey,
 	}
 }