fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-24 13:18: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 10:03:14 +01:00
committed by Keavon Chambers
parent 5641f5d822
commit 029b8ff8b3
5 changed files with 78 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
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;