3742fa9f0c
Issues: - The `change` event was not dispatched in MaskEditor.svelte when an undo/redo was performed. Therefore, if the user then closed the editor or switched to another note without performing an operation that would cause the `change` event to be dispatched, the undone or redone changes were not saved to DB. - When `IOMode.kind === "edit"` (i.e., Edit Current or Browse), the beginning of the undo history was a blank canvas, not a canvas with existing masks. Therefore, if you continued to undo to the beginning of the history, the masks that existed when you opened the editor would be lost, and they would not be restored even when you performed a redo. - In the 'Add' dialog, the undo history was not reset when starting to create a new IO note after adding an IO note. Also add a small UI improvement: The undo/redo buttons are now disabled when there is no action to undo/redo.
117 lines
2.8 KiB
Svelte
117 lines
2.8 KiB
Svelte
<!--
|
|
Copyright: Ankitects Pty Ltd and contributors
|
|
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|
-->
|
|
<script context="module" lang="ts">
|
|
import { writable } from "svelte/store";
|
|
|
|
const changeSignal = writable(Symbol());
|
|
|
|
export function emitChangeSignal() {
|
|
changeSignal.set(Symbol());
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import type { PanZoom } from "panzoom";
|
|
import panzoom from "panzoom";
|
|
import { createEventDispatcher, onDestroy, onMount } from "svelte";
|
|
|
|
import type { IOMode } from "./lib";
|
|
import {
|
|
setCanvasZoomRatio,
|
|
setupMaskEditor,
|
|
setupMaskEditorForEdit,
|
|
} from "./mask-editor";
|
|
import Toolbar from "./Toolbar.svelte";
|
|
|
|
export let mode: IOMode;
|
|
const iconSize = 80;
|
|
let instance: PanZoom;
|
|
let innerWidth = 0;
|
|
const startingTool = mode.kind === "add" ? "draw-rectangle" : "cursor";
|
|
$: canvas = null;
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
function onChange() {
|
|
dispatch("change", { canvas });
|
|
}
|
|
|
|
$: $changeSignal, onChange();
|
|
|
|
function init(node) {
|
|
instance = panzoom(node, {
|
|
bounds: true,
|
|
maxZoom: 3,
|
|
minZoom: 0.1,
|
|
zoomDoubleClickSpeed: 1,
|
|
smoothScroll: false,
|
|
});
|
|
instance.pause();
|
|
|
|
if (mode.kind == "add") {
|
|
setupMaskEditor(mode.imagePath, instance, onChange).then((canvas1) => {
|
|
canvas = canvas1;
|
|
});
|
|
} else {
|
|
setupMaskEditorForEdit(mode.noteId, instance, onChange).then((canvas1) => {
|
|
canvas = canvas1;
|
|
});
|
|
}
|
|
}
|
|
|
|
onMount(() => {
|
|
window.addEventListener("resize", () => {
|
|
setCanvasZoomRatio(canvas, instance);
|
|
});
|
|
});
|
|
|
|
onDestroy(() => {
|
|
window.removeEventListener("resize", () => {
|
|
setCanvasZoomRatio(canvas, instance);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<Toolbar {canvas} {instance} {iconSize} activeTool={startingTool} />
|
|
<div class="editor-main" bind:clientWidth={innerWidth}>
|
|
<div class="editor-container" use:init>
|
|
<!-- svelte-ignore a11y-missing-attribute -->
|
|
<img id="image" />
|
|
<canvas id="canvas" />
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.editor-main {
|
|
position: absolute;
|
|
top: 42px;
|
|
left: 36px;
|
|
bottom: 2px;
|
|
right: 2px;
|
|
border: 1px solid var(--border);
|
|
overflow: auto;
|
|
padding-bottom: 100px;
|
|
}
|
|
|
|
.editor-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
#image {
|
|
position: absolute;
|
|
}
|
|
|
|
:global(.upper-canvas) {
|
|
border: 0.5px solid var(--border-strong);
|
|
border-width: thin;
|
|
}
|
|
|
|
:global(.canvas-container) {
|
|
position: absolute;
|
|
}
|
|
</style>
|