GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-19 22:42:25 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Refactor image overlay to not require second mutation observer

Browse source
This commit is contained in:
Henrik Giesel 2022-09-13 23:57:22 +02:00
parent 682d472d34
commit b94114aa0a
1 changed files with 22 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
ts/editor/image-overlay/ImageOverlay.svelte
View file

@ -41,20 +41,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
const { focusedInput } = context.get(); const { focusedInput } = context.get();
let cleanup: Callback; let cleanup: Callback;
let richTextInput: RichTextInputAPI | null = null;
async function initialize(input: EditingInputAPI | null): Promise<void> { async function initialize(input: EditingInputAPI | null): Promise<void> {
cleanup?.(); cleanup?.();
if (!input || !editingInputIsRichText(input)) { if (!input || !editingInputIsRichText(input)) {
richTextInput = null;
return; return;
} }
const container = await input.element; cleanup = on(await input.element, "click", maybeShowHandle);
cleanup = on(container, "click", maybeShowHandle);
richTextInput = input;
} }
$: initialize($focusedInput); $: initialize($focusedInput);
@ -80,23 +75,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
await tick(); await tick();
} }
async function maybeShowHandle(event: Event): Promise<void> { let naturalWidth: number;
if (event.target instanceof HTMLImageElement) { let naturalHeight: number;
const image = event.target; let aspectRatio: number;
if (!image.dataset.anki) {
activeImage = image;
}
}
}
$: naturalWidth = activeImage?.naturalWidth;
$: naturalHeight = activeImage?.naturalHeight;
$: aspectRatio = naturalWidth && naturalHeight ? naturalWidth / naturalHeight : NaN;
let customDimensions: boolean = false;
let actualWidth = "";
let actualHeight = "";
function updateDimensions() { function updateDimensions() {
/* we do not want the actual width, but rather the intended display width */ /* we do not want the actual width, but rather the intended display width */
@ -121,31 +102,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
} }
let updateSelection: () => Promise<void>; async function maybeShowHandle(event: Event): Promise<void> {
if (event.target instanceof HTMLImageElement) {
const image = event.target;
async function updateSizesWithDimensions() { if (!image.dataset.anki) {
await updateSelection?.(); activeImage = image;
updateDimensions();
}
/* window resizing */ naturalWidth = activeImage?.naturalWidth;
const resizeObserver = new ResizeObserver(async () => { naturalHeight = activeImage?.naturalHeight;
await updateSizesWithDimensions(); aspectRatio =
}); naturalWidth && naturalHeight ? naturalWidth / naturalHeight : NaN;
$: observes = Boolean(activeImage); updateDimensions();
}
async function toggleResizeObserver(observes: boolean) {
const container = await richTextInput!.element;
if (observes) {
resizeObserver.observe(container);
} else {
resizeObserver.unobserve(container);
} }
} }
$: toggleResizeObserver(observes); let customDimensions: boolean = false;
let actualWidth = "";
let actualHeight = "";
/* memoized position of image on resize start /* memoized position of image on resize start
* prevents frantic behavior when image shift into the next/previous line */ * prevents frantic behavior when image shift into the next/previous line */
@ -235,9 +211,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let restoringDisabled: boolean; let restoringDisabled: boolean;
$: restoringDisabled = !activeImage?.hasAttribute("width") ?? true; $: restoringDisabled = !activeImage?.hasAttribute("width") ?? true;
const widthObserver = new MutationObserver( const widthObserver = new MutationObserver(() => {
() => (restoringDisabled = !activeImage!.hasAttribute("width")), restoringDisabled = !activeImage!.hasAttribute("width");
); updateDimensions();
});
$: activeImage $: activeImage
? widthObserver.observe(activeImage, { ? widthObserver.observe(activeImage, {