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

Implement interactive scaling/motion of rulers (#306) (#385)

Browse Source 
* Update ruler origin

* Fix ruler text

* Handle zoom

* Remove log

* Fix origin
This commit is contained in:
0HyperCube
2021-10-25 02:03:14 -07:00
committed by GitHub
parent 639862b2bc
commit a19c4be0b6
5 changed files with 78 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/panels/Document.vue
+15 -3
View File
@@ -111,11 +111,11 @@
</LayoutCol>
<LayoutCol :class="'viewport'">
<LayoutRow :class="'bar-area'">
<CanvasRuler :origin="0" :majorMarkSpacing="100" :direction="RulerDirection.Horizontal" :class="'top-ruler'" />
<CanvasRuler :origin="rulerOrigin.x" :majorMarkSpacing="rulerSpacing" :numberInterval="rulerInterval" :direction="RulerDirection.Horizontal" :class="'top-ruler'" />
</LayoutRow>
<LayoutRow :class="'canvas-area'">
<LayoutCol :class="'bar-area'">
<CanvasRuler :origin="0" :majorMarkSpacing="100" :direction="RulerDirection.Vertical" />
<CanvasRuler :origin="rulerOrigin.y" :majorMarkSpacing="rulerSpacing" :numberInterval="rulerInterval" :direction="RulerDirection.Vertical" />
</LayoutCol>
<LayoutCol :class="'canvas-area'">
<div class="canvas" ref="canvas">
@@ -224,7 +224,7 @@
<script lang="ts">
import { defineComponent } from "vue";
import { ResponseType, registerResponseHandler, Response, UpdateCanvas, UpdateScrollbars, SetActiveTool, SetCanvasZoom, SetCanvasRotation } from "@/utilities/response-handler";
import { ResponseType, registerResponseHandler, Response, UpdateCanvas, UpdateScrollbars, UpdateRulers, SetActiveTool, SetCanvasZoom, SetCanvasRotation } from "@/utilities/response-handler";
import { SeparatorDirection, SeparatorType } from "@/components/widgets/widgets";
import { comingSoon } from "@/utilities/errors";
import { panicProxy } from "@/utilities/panic-proxy";
@@ -329,6 +329,15 @@ export default defineComponent({
}
});
registerResponseHandler(ResponseType.UpdateRulers, (responseData: Response) => {
const updateData = responseData as UpdateRulers;
if (updateData) {
this.rulerOrigin = updateData.origin;
this.rulerSpacing = updateData.spacing;
this.rulerInterval = updateData.interval;
}
});
registerResponseHandler(ResponseType.SetActiveTool, (responseData: Response) => {
const toolData = responseData as SetActiveTool;
if (toolData) {
@@ -374,6 +383,9 @@ export default defineComponent({
scrollbarPos: { x: 0.5, y: 0.5 },
scrollbarSize: { x: 0.5, y: 0.5 },
scrollbarMultiplier: { x: 0, y: 0 },
rulerOrigin: { x: 0, y: 0 },
rulerSpacing: 100,
rulerInterval: 100,
IncrementBehavior,
IncrementDirection,
MenuDirection,
frontend/src/components/widgets/rulers/CanvasRuler.vue
+17 -7
View File
@@ -55,10 +55,17 @@ export enum RulerDirection {
"Vertical" = "Vertical",
}
// Apparently the modulo operator in js does not work properly.
const mod = (n: number, m: number) => {
const remain = n % m;
return Math.floor(remain >= 0 ? remain : remain + m);
};
export default defineComponent({
props: {
direction: { type: String as PropType<RulerDirection>, default: RulerDirection.Vertical },
origin: { type: Number, required: true },
numberInterval: { type: Number, required: true },
majorMarkSpacing: { type: Number, required: true },
mediumDivisions: { type: Number, default: 5 },
minorDivisions: { type: Number, default: 2 },
@@ -68,9 +75,8 @@ export default defineComponent({
const isVertical = this.direction === RulerDirection.Vertical;
const lineDirection = isVertical ? "H" : "V";
const offsetStart = this.origin % this.majorMarkSpacing;
const phasingShift = offsetStart < this.majorMarkSpacing ? this.majorMarkSpacing : 0;
const shiftedOffsetStart = offsetStart - phasingShift;
const offsetStart = mod(this.origin, this.majorMarkSpacing);
const shiftedOffsetStart = offsetStart - this.majorMarkSpacing;
const divisions = this.majorMarkSpacing / this.mediumDivisions / this.minorDivisions;
const majorMarksFrequency = this.mediumDivisions * this.minorDivisions;
@@ -94,11 +100,13 @@ export default defineComponent({
svgTexts(): {} {
const isVertical = this.direction === RulerDirection.Vertical;
const offsetStart = this.origin % this.majorMarkSpacing;
const phasingShift = offsetStart < this.majorMarkSpacing ? this.majorMarkSpacing : 0;
const shiftedOffsetStart = offsetStart - phasingShift;
const offsetStart = mod(this.origin, this.majorMarkSpacing);
const shiftedOffsetStart = offsetStart - this.majorMarkSpacing;
const svgTextCoordinates = [];
let text = (Math.ceil(-this.origin / this.majorMarkSpacing) - 1) * this.numberInterval;
for (let location = shiftedOffsetStart; location < this.rulerLength; location += this.majorMarkSpacing) {
const destination = Math.round(location);
const x = isVertical ? 9 : destination + 2;
@@ -107,7 +115,9 @@ export default defineComponent({
let transform = `translate(${x} ${y})`;
if (isVertical) transform += " rotate(270)";
svgTextCoordinates.push({ transform, text: location });
svgTextCoordinates.push({ transform, text });
text += this.numberInterval;
}
return svgTextCoordinates;