mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-10-02 05:58:12 +08:00
Replace the Vue frontend with Svelte
This commit is contained in:
Keavon Chambers
@@ -1,148 +1,141 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent, type PropType } from "vue";
|
||||
|
||||
const RULER_THICKNESS = 16;
|
||||
const MAJOR_MARK_THICKNESS = 16;
|
||||
const MEDIUM_MARK_THICKNESS = 6;
|
||||
const MINOR_MARK_THICKNESS = 3;
|
||||
|
||||
export type RulerDirection = "Horizontal" | "Vertical";
|
||||
|
||||
// Modulo function that works for negative numbers, unlike the JS % operator
|
||||
const mod = (n: number, m: number): number => {
|
||||
const remainder = n % m;
|
||||
return Math.floor(remainder >= 0 ? remainder : remainder + m);
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
direction: { type: String as PropType<RulerDirection>, default: "Vertical" },
|
||||
origin: { type: Number as PropType<number>, required: true },
|
||||
numberInterval: { type: Number as PropType<number>, required: true },
|
||||
majorMarkSpacing: { type: Number as PropType<number>, required: true },
|
||||
mediumDivisions: { type: Number as PropType<number>, default: 5 },
|
||||
minorDivisions: { type: Number as PropType<number>, default: 2 },
|
||||
},
|
||||
computed: {
|
||||
svgPath(): string {
|
||||
const isVertical = this.direction === "Vertical";
|
||||
const lineDirection = isVertical ? "H" : "V";
|
||||
|
||||
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;
|
||||
|
||||
let dPathAttribute = "";
|
||||
let i = 0;
|
||||
for (let location = shiftedOffsetStart; location < this.rulerLength; location += divisions) {
|
||||
let length;
|
||||
if (i % majorMarksFrequency === 0) length = MAJOR_MARK_THICKNESS;
|
||||
else if (i % this.minorDivisions === 0) length = MEDIUM_MARK_THICKNESS;
|
||||
else length = MINOR_MARK_THICKNESS;
|
||||
i += 1;
|
||||
|
||||
const destination = Math.round(location) + 0.5;
|
||||
const startPoint = isVertical ? `${RULER_THICKNESS - length},${destination}` : `${destination},${RULER_THICKNESS - length}`;
|
||||
dPathAttribute += `M${startPoint}${lineDirection}${RULER_THICKNESS} `;
|
||||
}
|
||||
|
||||
return dPathAttribute;
|
||||
},
|
||||
svgTexts(): { transform: string; text: number }[] {
|
||||
const isVertical = this.direction === "Vertical";
|
||||
|
||||
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;
|
||||
const y = isVertical ? destination + 1 : 9;
|
||||
|
||||
let transform = `translate(${x} ${y})`;
|
||||
if (isVertical) transform += " rotate(270)";
|
||||
|
||||
svgTextCoordinates.push({ transform, text });
|
||||
|
||||
text += this.numberInterval;
|
||||
}
|
||||
|
||||
return svgTextCoordinates;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
resize() {
|
||||
const canvasRuler = this.$refs.canvasRuler as HTMLDivElement | undefined;
|
||||
if (!canvasRuler) return;
|
||||
|
||||
const isVertical = this.direction === "Vertical";
|
||||
|
||||
const newLength = isVertical ? canvasRuler.clientHeight : canvasRuler.clientWidth;
|
||||
const roundedUp = (Math.floor(newLength / this.majorMarkSpacing) + 1) * this.majorMarkSpacing;
|
||||
|
||||
if (roundedUp !== this.rulerLength) {
|
||||
this.rulerLength = roundedUp;
|
||||
const thickness = `${RULER_THICKNESS}px`;
|
||||
const length = `${roundedUp}px`;
|
||||
this.svgBounds = isVertical ? { width: thickness, height: length } : { width: length, height: thickness };
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rulerLength: 0,
|
||||
svgBounds: { width: "0px", height: "0px" },
|
||||
};
|
||||
},
|
||||
});
|
||||
<script lang="ts" context="module">
|
||||
export type RulerDirection = "Horizontal" | "Vertical";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="canvas-ruler" :class="direction.toLowerCase()" ref="canvasRuler">
|
||||
<svg :style="svgBounds">
|
||||
<path :d="svgPath" />
|
||||
<text v-for="(svgText, index) in svgTexts" :key="index" :transform="svgText.transform">{{ svgText.text }}</text>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
const RULER_THICKNESS = 16;
|
||||
const MAJOR_MARK_THICKNESS = 16;
|
||||
const MEDIUM_MARK_THICKNESS = 6;
|
||||
const MINOR_MARK_THICKNESS = 3;
|
||||
|
||||
<style lang="scss">
|
||||
.canvas-ruler {
|
||||
flex: 1 1 100%;
|
||||
background: var(--color-4-dimgray);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
export let direction: RulerDirection = "Vertical";
|
||||
export let origin: number;
|
||||
export let numberInterval: number;
|
||||
export let majorMarkSpacing: number;
|
||||
export let mediumDivisions: number = 5;
|
||||
export let minorDivisions: number = 2;
|
||||
|
||||
&.horizontal {
|
||||
height: 16px;
|
||||
let canvasRuler: HTMLDivElement;
|
||||
let rulerLength = 0;
|
||||
let svgBounds = { width: "0px", height: "0px" };
|
||||
|
||||
$: svgPath = computeSvgPath(direction, origin, majorMarkSpacing, mediumDivisions, minorDivisions, rulerLength);
|
||||
$: svgTexts = computeSvgTexts(direction, origin, majorMarkSpacing, numberInterval, rulerLength);
|
||||
|
||||
function computeSvgPath(direction: RulerDirection, origin: number, majorMarkSpacing: number, mediumDivisions: number, minorDivisions: number, rulerLength: number): string {
|
||||
const isVertical = direction === "Vertical";
|
||||
const lineDirection = isVertical ? "H" : "V";
|
||||
|
||||
const offsetStart = mod(origin, majorMarkSpacing);
|
||||
const shiftedOffsetStart = offsetStart - majorMarkSpacing;
|
||||
|
||||
const divisions = majorMarkSpacing / mediumDivisions / minorDivisions;
|
||||
const majorMarksFrequency = mediumDivisions * minorDivisions;
|
||||
|
||||
let dPathAttribute = "";
|
||||
let i = 0;
|
||||
for (let location = shiftedOffsetStart; location < rulerLength; location += divisions) {
|
||||
let length;
|
||||
if (i % majorMarksFrequency === 0) length = MAJOR_MARK_THICKNESS;
|
||||
else if (i % minorDivisions === 0) length = MEDIUM_MARK_THICKNESS;
|
||||
else length = MINOR_MARK_THICKNESS;
|
||||
i += 1;
|
||||
|
||||
const destination = Math.round(location) + 0.5;
|
||||
const startPoint = isVertical ? `${RULER_THICKNESS - length},${destination}` : `${destination},${RULER_THICKNESS - length}`;
|
||||
dPathAttribute += `M${startPoint}${lineDirection}${RULER_THICKNESS} `;
|
||||
}
|
||||
|
||||
return dPathAttribute;
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
width: 16px;
|
||||
function computeSvgTexts(direction: RulerDirection, origin: number, majorMarkSpacing: number, numberInterval: number, rulerLength: number): { transform: string; text: number }[] {
|
||||
const isVertical = direction === "Vertical";
|
||||
|
||||
svg text {
|
||||
text-anchor: end;
|
||||
const offsetStart = mod(origin, majorMarkSpacing);
|
||||
const shiftedOffsetStart = offsetStart - majorMarkSpacing;
|
||||
|
||||
const svgTextCoordinates = [];
|
||||
|
||||
let text = (Math.ceil(-origin / majorMarkSpacing) - 1) * numberInterval;
|
||||
|
||||
for (let location = shiftedOffsetStart; location < rulerLength; location += majorMarkSpacing) {
|
||||
const destination = Math.round(location);
|
||||
const x = isVertical ? 9 : destination + 2;
|
||||
const y = isVertical ? destination + 1 : 9;
|
||||
|
||||
let transform = `translate(${x} ${y})`;
|
||||
if (isVertical) transform += " rotate(270)";
|
||||
|
||||
svgTextCoordinates.push({ transform, text });
|
||||
|
||||
text += numberInterval;
|
||||
}
|
||||
|
||||
return svgTextCoordinates;
|
||||
}
|
||||
|
||||
export function resize() {
|
||||
const isVertical = direction === "Vertical";
|
||||
|
||||
const newLength = isVertical ? canvasRuler.clientHeight : canvasRuler.clientWidth;
|
||||
const roundedUp = (Math.floor(newLength / majorMarkSpacing) + 1) * majorMarkSpacing;
|
||||
|
||||
if (roundedUp !== rulerLength) {
|
||||
rulerLength = roundedUp;
|
||||
const thickness = `${RULER_THICKNESS}px`;
|
||||
const length = `${roundedUp}px`;
|
||||
svgBounds = isVertical ? { width: thickness, height: length } : { width: length, height: thickness };
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
// Modulo function that works for negative numbers, unlike the JS `%` operator
|
||||
function mod(n: number, m: number): number {
|
||||
const remainder = n % m;
|
||||
return Math.floor(remainder >= 0 ? remainder : remainder + m);
|
||||
}
|
||||
</script>
|
||||
|
||||
path {
|
||||
stroke-width: 1px;
|
||||
stroke: var(--color-7-middlegray);
|
||||
<div class={`canvas-ruler ${direction.toLowerCase()}`} bind:this={canvasRuler}>
|
||||
<svg style:width={svgBounds.width} style:height={svgBounds.height}>
|
||||
<path d={svgPath} />
|
||||
{#each svgTexts as svgText, index (index)}
|
||||
<text transform={svgText.transform}>{svgText.text}</text>
|
||||
{/each}
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<style lang="scss" global>
|
||||
.canvas-ruler {
|
||||
flex: 1 1 100%;
|
||||
background: var(--color-4-dimgray);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&.horizontal {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 12px;
|
||||
fill: var(--color-8-uppergray);
|
||||
&.vertical {
|
||||
width: 16px;
|
||||
|
||||
svg text {
|
||||
text-anchor: end;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
|
||||
path {
|
||||
stroke-width: 1px;
|
||||
stroke: var(--color-7-middlegray);
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 12px;
|
||||
fill: var(--color-8-uppergray);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user