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

* 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 1ee94f41f0
commit a570ff22e8
9 changed files with 97 additions and 45 deletions

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,