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
This commit is contained in:
0HyperCube
2021-08-16 21:25:00 +01:00
committed by Keavon Chambers
parent f63b0abfde
commit 6deecad9c0
10 changed files with 63 additions and 14 deletions
@@ -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);
},
@@ -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() {