fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-19 02:48:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Make scrollbars interactable (#328)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/components/panels/Document.vue
View File

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