GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-24 16:56:36 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Use ResizeObserver to resize overlay if necessary

Browse source
This commit is contained in:
Henrik Giesel 2021-07-21 17:37:58 +02:00 committed by Damien Elmes
parent 30e0894ad9
commit d22aa72964
2 changed files with 66 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
ts/editor/ImageHandle.svelte
View file

@ -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());
</script>
{#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"
>
<div class="image-handle-bg" on:dblclick={onDblclick} />
<div
class="image-handle-bg"
on:mousedown|preventDefault
on:dblclick={onDblclick}
/>
<div class="image-handle-buttons" class:is-rtl={isRtl}>
<ImageHandleFloat {isRtl} bind:float={image.style.float} />
</div>
@ -119,20 +144,32 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
{width}&times;{height} (Original: {naturalWidth}&times;{naturalHeight})
</div>
{/if}
<div class:nightMode class="image-handle-control image-handle-control-nw" />
<div class:nightMode class="image-handle-control image-handle-control-ne" />
<div
class:nightMode
class="image-handle-control image-handle-control-nw"
on:mousedown|preventDefault
/>
<div
class:nightMode
class="image-handle-control image-handle-control-ne"
on:mousedown|preventDefault
/>
<div
class:nightMode
class:active
class="image-handle-control image-handle-control-sw"
on:mousedown|preventDefault
on:pointerdown={setPointerCapture}
on:pointerup={startObserving}
on:pointermove={resize}
/>
<div
class:nightMode
class:active
class="image-handle-control image-handle-control-se"
on:mousedown|preventDefault
on:pointerdown={setPointerCapture}
on:pointerup={startObserving}
on:pointermove={resize}
/>
</div>

36
ts/editor/editing-area.ts
View file

@ -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);
}