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
This commit is contained in:
0HyperCube 2021-08-15 21:48:42 +01:00 committed by Keavon Chambers
parent 5c36242aeb
commit f63b0abfde
8 changed files with 183 additions and 45 deletions

View file

@ -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;