mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-08-04 13:30:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Improve document zooming to work based on nice steps (#336)

Browse source 
* Improve document zooming to work based on nice steps

* Code review improvements
This commit is contained in:
Keavon Chambers 2021-08-10 16:21:18 -07:00
parent 74d0e6dbc0
commit 22947933b0
9 changed files with 97 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

23
frontend/src/components/panels/Document.vue
View file

@ -42,7 +42,7 @@
<Separator :type="SeparatorType.Section" />
<NumberInput @update:value="setRotation" v-model:value="documentRotation" :step="15" :unit="`°`" ref="rotation" />
<NumberInput @update:value="setRotation" v-model:value="documentRotation" :incrementFactor="15" :unit="`°`" ref="rotation" />
<Separator :type="SeparatorType.Section" />
@ -54,11 +54,12 @@
<NumberInput
v-model:value="documentZoom"
@update:value="setZoom"
@update:value="setCanvasZoom"
:min="0.000001"
:max="1000000"
:step="1.25"
:stepIsMultiplier="true"
:incrementBehavior="IncrementBehavior.Callback"
:incrementCallbackIncrease="increaseCanvasZoom"
:incrementCallbackDecrease="decreaseCanvasZoom"
:unit="`%`"
:displayDecimalPlaces="4"
ref="zoom"
@ -225,7 +226,7 @@ import CanvasRuler, { RulerDirection } from "@/components/widgets/rulers/CanvasR
import IconButton from "@/components/widgets/buttons/IconButton.vue";
import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
import RadioInput, { RadioEntries } from "@/components/widgets/inputs/RadioInput.vue";
import NumberInput, { IncrementDirection } from "@/components/widgets/inputs/NumberInput.vue";
import NumberInput, { IncrementDirection, IncrementBehavior } from "@/components/widgets/inputs/NumberInput.vue";
import DropdownInput from "@/components/widgets/inputs/DropdownInput.vue";
import OptionalInput from "@/components/widgets/inputs/OptionalInput.vue";
import ToolOptions from "@/components/widgets/options/ToolOptions.vue";
@ -283,9 +284,14 @@ export default defineComponent({
const modifiers = makeModifiersBitfield(e.ctrlKey, e.shiftKey, e.altKey);
on_mouse_scroll(e.deltaX, e.deltaY, e.deltaZ, modifiers);
},
async setZoom(newZoom: number) {
const { set_zoom } = await wasm;
set_zoom(newZoom / 100);
async setCanvasZoom(newZoom: number) {
(await wasm).set_canvas_zoom(newZoom / 100);
},
async increaseCanvasZoom() {
(await wasm).increase_canvas_zoom();
},
async decreaseCanvasZoom() {
(await wasm).decrease_canvas_zoom();
},
async setRotation(newRotation: number) {
const { set_rotation } = await wasm;
@ -364,6 +370,7 @@ export default defineComponent({
overlaysEnabled: true,
documentRotation: 0,
documentZoom: 100,
IncrementBehavior,
IncrementDirection,
MenuDirection,
SeparatorDirection,

39
frontend/src/components/widgets/inputs/NumberInput.vue
View file

@ -145,7 +145,14 @@
</style>
<script lang="ts">
import { defineComponent } from "vue";
import { defineComponent, PropType } from "vue";
export enum IncrementBehavior {
Add = "Add",
Multiply = "Multiply",
Callback = "Callback",
None = "None",
}
export enum IncrementDirection {
Decrease = "Decrease",
@ -158,8 +165,10 @@ export default defineComponent({
value: { type: Number, required: true },
min: { type: Number, required: false },
max: { type: Number, required: false },
step: { type: Number, default: 1 },
stepIsMultiplier: { type: Boolean, default: false },
incrementBehavior: { type: String as PropType<IncrementBehavior>, default: IncrementBehavior.Add },
incrementFactor: { type: Number, default: 1 },
incrementCallbackIncrease: { type: Function, required: false },
incrementCallbackDecrease: { type: Function, required: false },
isInteger: { type: Boolean, default: false },
unit: { type: String, default: "" },
unitIsHiddenWhenEditing: { type: Boolean, default: true },
@ -210,12 +219,24 @@ export default defineComponent({
onIncrement(direction: IncrementDirection) {
if (Number.isNaN(this.value)) return;
if (this.stepIsMultiplier) {
const directionMultiplier = direction === IncrementDirection.Increase ? this.step : 1 / this.step;
this.updateValue(this.value * directionMultiplier);
} else {
const directionAddend = direction === IncrementDirection.Increase ? this.step : -this.step;
this.updateValue(this.value + directionAddend);
switch (this.incrementBehavior) {
case IncrementBehavior.Add: {
const directionAddend = direction === IncrementDirection.Increase ? this.incrementFactor : -this.incrementFactor;
this.updateValue(this.value + directionAddend);
break;
}
case IncrementBehavior.Multiply: {
const directionMultiplier = direction === IncrementDirection.Increase ? this.incrementFactor : 1 / this.incrementFactor;
this.updateValue(this.value * directionMultiplier);
break;
}
case IncrementBehavior.Callback: {
if (direction === IncrementDirection.Increase && this.incrementCallbackIncrease) this.incrementCallbackIncrease();
if (direction === IncrementDirection.Decrease && this.incrementCallbackDecrease) this.incrementCallbackDecrease();
break;
}
default:
break;
}
},
updateValue(newValue: number) {

4
frontend/src/components/widgets/widgets.ts
View file

@ -63,8 +63,8 @@ export interface NumberInputProps {
value: number;
min?: number;
max?: number;
step?: number;
stepIsMultiplier?: boolean;
incrementBehavior?: boolean;
incrementFactor?: number;
isInteger?: boolean;
unit?: string;
unitIsHiddenWhenEditing?: boolean;

16
frontend/wasm/src/document.rs
View file

@ -253,11 +253,25 @@ pub fn export_document() -> Result<(), JsValue> {
/// Sets the zoom to the value
#[wasm_bindgen]
pub fn set_zoom(new_zoom: f64) -> Result<(), JsValue> {
pub fn set_canvas_zoom(new_zoom: f64) -> Result<(), JsValue> {
let ev = MovementMessage::SetCanvasZoom(new_zoom);
EDITOR_STATE.with(|editor| editor.borrow_mut().handle_message(ev)).map_err(convert_error)
}
/// Zoom in to the next step
#[wasm_bindgen]
pub fn increase_canvas_zoom() -> Result<(), JsValue> {
let ev = MovementMessage::IncreaseCanvasZoom;
EDITOR_STATE.with(|editor| editor.borrow_mut().handle_message(ev)).map_err(convert_error)
}
/// Zoom out to the next step
#[wasm_bindgen]
pub fn decrease_canvas_zoom() -> Result<(), JsValue> {
let ev = MovementMessage::DecreaseCanvasZoom;
EDITOR_STATE.with(|editor| editor.borrow_mut().handle_message(ev)).map_err(convert_error)
}
/// Sets the rotation to the new value (in radians)
#[wasm_bindgen]
pub fn set_rotation(new_radians: f64) -> Result<(), JsValue> {