Add image-handle-dimensions to show dimensions directly on image

ts/editor/ImageHandle.svelte

@@ -6,12 +6,41 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { getContext } from "svelte";
     import { nightModeKey } from "components/context-keys";
 
-    export let hidden: boolean;
+    export let image: HTMLImageElement | null = null;
+    export let container: HTMLElement | null = null;
 
-    export let top: number = 0;
-    export let left: number = 0;
-    export let width: number = 0;
-    export let height: number = 0;
+    let hidden = true;
+
+    let naturalWidth = 0;
+    let naturalHeight = 0;
+
+    let containerTop = 0;
+    let containerLeft = 0;
+
+    let top = 0;
+    let left = 0;
+    let width = 0;
+    let height = 0;
+
+    $: if (image) {
+        const imageRect = image.getBoundingClientRect();
+        const containerRect = (
+            container ?? document.documentElement
+        ).getBoundingClientRect();
+
+        naturalWidth = image.naturalWidth;
+        naturalHeight = image.naturalHeight;
+
+        (containerTop = containerRect.top),
+            (containerLeft = containerRect.left),
+            (top = imageRect.top - containerTop),
+            (left = imageRect.left - containerLeft),
+            (width = image.clientWidth),
+            (height = image.clientHeight),
+            (hidden = false);
+    } else {
+        hidden = true;
+    }
 
     function setPointerCapture(event: PointerEvent): void {
         if (event.pointerId !== 1) {
@@ -25,6 +54,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         if (!(event.target as Element).hasPointerCapture(event.pointerId)) {
             return;
         }
+
+        const dragWidth = event.clientX - containerLeft - left;
+        const dragHeight = event.clientY - containerTop - top;
+
+        width = dragWidth;
+        image!.style.width = `${dragWidth}px`;
+        height = dragHeight;
+        image!.style.height = `${dragHeight}px`;
     }
 
     const nightMode = getContext(nightModeKey);
@@ -36,6 +73,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     {hidden}
 >
     <div class="image-handle-bg" />
+    <div class="image-handle-dimensions">
+        {width}&times;{height} (Original: {naturalWidth}&times;{naturalHeight})
+    </div>
     <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-sw" />
@@ -66,6 +106,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         opacity: 0.2;
     }
 
+    .image-handle-dimensions {
+        pointer-events: none;
+        user-select: none;
+        bottom: 3px;
+        right: 3px;
+
+        background-color: rgba(0 0 0 / 0.3);
+        border-color: black;
+        border-radius: 0.25rem;
+        padding: 0 5px;
+    }
+
     .image-handle-control {
         width: 7px;
         height: 7px;

ts/editor/ImageHandleContainer.svelte

@@ -1,17 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<script lang="typescript">
-    import ImageHandle from "./ImageHandle.svelte";
-
-    export let hidden: boolean;
-    export let top: number;
-    export let left: number;
-    export let width: number;
-    export let height: number;
-</script>
-
-<div>
-    <ImageHandle {hidden} {top} {left} {width} {height} />
-</div>

ts/editor/editing-area.ts

@@ -5,7 +5,7 @@
 @typescript-eslint/no-non-null-assertion: "off",
  */
 
-import ImageHandleContainer from "./ImageHandleContainer.svelte";
+import ImageHandle from "./ImageHandle.svelte";
 
 import type { EditableContainer } from "./editable-container";
 import type { Editable } from "./editable";
@@ -22,7 +22,7 @@ function onCutOrCopy(): void {
 }
 
 export class EditingArea extends HTMLDivElement {
-    imageHandle: ImageHandleContainer;
+    imageHandle: ImageHandle;
     editableContainer: EditableContainer;
     editable: Editable;
     codable: Codable;
@@ -44,16 +44,10 @@ export class EditingArea extends HTMLDivElement {
             document.documentElement.classList.contains("night-mode")
         );
 
-        this.imageHandle = new ImageHandleContainer({
+        this.imageHandle = new ImageHandle({
             target: this,
             anchor: this.editableContainer,
-            props: {
-                hidden: true,
-                top: 0,
-                left: 0,
-                width: 0,
-                height: 0,
-            },
+            props: { container: this.editable },
             context,
         } as any);
 
@@ -172,20 +166,12 @@ export class EditingArea extends HTMLDivElement {
 
     showImageHandle(event: MouseEvent): void {
         if (event.target instanceof HTMLImageElement) {
-            const image = event.target;
-            const imageRect = image.getBoundingClientRect();
-            const editableRect = this.editable.getBoundingClientRect();
-
             (this.imageHandle as any).$set({
-                hidden: false,
-                top: imageRect.top - editableRect.top,
-                left: imageRect.left - editableRect.left,
-                width: image.clientWidth,
-                height: image.clientHeight,
+                image: event.target,
             });
         } else {
             (this.imageHandle as any).$set({
-                hidden: true,
+                image: null,
             });
         }
     }