f6486da233
* Allow user to select I/O notetype instead of enforcing a specific name * Display a clearer error when I/O note is missing an image Opening the card layout screen from "manage notetypes" was showing an error about the Anki version being too old. Replacement error is not currently translatable. * Preserve existing notetype when adding I/O notetype * Add a 'from clipboard' string The intention is to use this in the future to allow an image occlusion to be created from an image on the clipboard. * Tweak I/O init - Use union type instead of multiple nullable values - Pass the notetype id in to initialization * Fix image insertion in I/O note - The regex expected double quotes, and we were using single ones - Image tags don't need to be closed * Use more consistent naming in image_occlusion.proto * Tweaks to default I/O notetype - Show the header on the front side as well (I presume this is what users expect; if not am happy to revert) - Don't show comments on card (again, I presume users expect to use this field to add notes that aren't displayed during review, as they can use back extra for that) * Fix sticky footer missing background Caused by earlier CSS refactoring
80 lines
1.9 KiB
Svelte
80 lines
1.9 KiB
Svelte
<!--
|
|
Copyright: Ankitects Pty Ltd and contributors
|
|
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|
-->
|
|
<script lang="ts">
|
|
import type { PanZoom } from "panzoom";
|
|
import panzoom from "panzoom";
|
|
|
|
import type { IOMode } from "./lib";
|
|
import { setupMaskEditor, setupMaskEditorForEdit } from "./mask-editor";
|
|
import SideToolbar from "./SideToolbar.svelte";
|
|
|
|
export let mode: IOMode;
|
|
|
|
let instance: PanZoom;
|
|
let innerWidth = 0;
|
|
$: canvas = null;
|
|
|
|
function initPanzoom(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).then((canvas1) => {
|
|
canvas = canvas1;
|
|
});
|
|
} else {
|
|
setupMaskEditorForEdit(mode.noteId, instance).then((canvas1) => {
|
|
canvas = canvas1;
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<SideToolbar {instance} {canvas} />
|
|
<div class="editor-main" bind:clientWidth={innerWidth}>
|
|
<div class="editor-container" use:initPanzoom>
|
|
<!-- svelte-ignore a11y-missing-attribute -->
|
|
<img id="image" />
|
|
<canvas id="canvas" />
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.editor-main {
|
|
position: absolute;
|
|
top: 84px;
|
|
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);
|
|
}
|
|
|
|
:global(.canvas-container) {
|
|
position: absolute;
|
|
}
|
|
</style>
|