diff --git a/ts/editor/ImageHandle.svelte b/ts/editor/ImageHandle.svelte index b7ffa40a8..d3680388c 100644 --- a/ts/editor/ImageHandle.svelte +++ b/ts/editor/ImageHandle.svelte @@ -6,7 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import ImageHandleFloat from "./ImageHandleFloat.svelte"; import ImageHandleSizeSelect from "./ImageHandleSizeSelect.svelte"; - import { getContext } from "svelte"; + import { onDestroy, getContext } from "svelte"; import { nightModeKey } from "components/context-keys"; export let image: HTMLImageElement | null = null; @@ -37,6 +37,22 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html updateSizes(); } + const observer = new ResizeObserver(() => { + if (image) { + updateSizes(); + } + }); + + function startObserving() { + observer.observe(container); + } + + function stopObserving() { + observer.unobserve(container); + } + + startObserving(); + function updateSizes() { const imageRect = image!.getBoundingClientRect(); const containerRect = container.getBoundingClientRect(); @@ -57,11 +73,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html return; } + stopObserving(); (event.target as Element).setPointerCapture(event.pointerId); } function resize(event: PointerEvent): void { - if (!(event.target as Element).hasPointerCapture(event.pointerId)) { + const element = event.target! as Element; + + if (!element.hasPointerCapture(event.pointerId)) { return; } @@ -92,6 +111,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html } const nightMode = getContext(nightModeKey); + + onDestroy(() => observer.disconnect()); {#if image && imageRule} @@ -99,7 +120,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html style="--top: {top}px; --left: {left}px; --width: {width}px; --height: {height}px;" class="image-handle-selection" > -
+ @@ -119,20 +144,32 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html {width}×{height} (Original: {naturalWidth}×{naturalHeight}) {/if} - - + + diff --git a/ts/editor/editing-area.ts b/ts/editor/editing-area.ts index a7015bcc3..35ddc96d2 100644 --- a/ts/editor/editing-area.ts +++ b/ts/editor/editing-area.ts @@ -58,6 +58,9 @@ export class EditingArea extends HTMLDivElement { }) as Codable; this.appendChild(this.codable); + this.onFocus = this.onFocus.bind(this); + this.onBlur = this.onBlur.bind(this); + this.onKey = this.onKey.bind(this); this.onPaste = this.onPaste.bind(this); this.showImageHandle = this.showImageHandle.bind(this); } @@ -79,17 +82,11 @@ export class EditingArea extends HTMLDivElement { } connectedCallback(): void { - this.addEventListener("keydown", (event) => { - this.resetImageHandle(); - onKey(event); - }); + this.addEventListener("keydown", this.onKey); this.addEventListener("keyup", onKeyUp); this.addEventListener("input", onInput); - this.addEventListener("focusin", onFocus); - this.addEventListener("focusout", (event) => { - this.resetImageHandle(); - onBlur(event); - }); + this.addEventListener("focusin", this.onFocus); + this.addEventListener("focusout", this.onBlur); this.addEventListener("paste", this.onPaste); this.addEventListener("copy", onCutOrCopy); this.addEventListener("oncut", onCutOrCopy); @@ -98,11 +95,11 @@ export class EditingArea extends HTMLDivElement { } disconnectedCallback(): void { - this.removeEventListener("keydown", onKey); + this.removeEventListener("keydown", this.onKey); this.removeEventListener("keyup", onKeyUp); this.removeEventListener("input", onInput); - this.removeEventListener("focusin", onFocus); - this.removeEventListener("focusout", onBlur); + this.removeEventListener("focusin", this.onFocus); + this.removeEventListener("focusout", this.onBlur); this.removeEventListener("paste", this.onPaste); this.removeEventListener("copy", onCutOrCopy); this.removeEventListener("oncut", onCutOrCopy); @@ -164,11 +161,26 @@ export class EditingArea extends HTMLDivElement { this.activeInput.surroundSelection(before, after); } + onFocus(event: FocusEvent): void { + onFocus(event); + } + + onBlur(event: FocusEvent): void { + this.resetImageHandle(); + onBlur(event); + } + onEnter(event: KeyboardEvent): void { this.activeInput.onEnter(event); } + onKey(event: KeyboardEvent): void { + this.resetImageHandle(); + onKey(event); + } + onPaste(event: ClipboardEvent): void { + this.resetImageHandle(); this.activeInput.onPaste(event); }