From 899434c682f465b8e8075f7368c3a4aafd9eb2a5 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 30 Jul 2021 20:37:10 +0200
Subject: [PATCH] Fix resetting image-handle-bg on no activeImage

---
 ts/editor/ImageHandle.svelte           | 69 +++++++++++++-------------
 ts/editor/ImageHandleSizeSelect.svelte |  1 -
 2 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/ts/editor/ImageHandle.svelte b/ts/editor/ImageHandle.svelte
index f7eca8e63..d46c25486 100644
--- a/ts/editor/ImageHandle.svelte
+++ b/ts/editor/ImageHandle.svelte
@@ -17,13 +17,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     $: naturalWidth = activeImage?.naturalWidth;
     $: naturalHeight = activeImage?.naturalHeight;
     $: aspectRatio = naturalWidth && naturalHeight ? naturalWidth / naturalHeight : NaN;
-
     $: showFloat = activeImage ? Number(activeImage!.width) >= 100 : false;
 
-    let actualWidth = "";
-    let actualHeight = "";
-    let customDimensions = false;
-
+    /* SIZES */
     let containerTop = 0;
     let containerLeft = 0;
 
@@ -32,6 +28,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let width = 0;
     let height = 0;
 
+    function updateSizes() {
+        const containerRect = container.getBoundingClientRect();
+        const imageRect = activeImage!.getBoundingClientRect();
+
+        containerTop = containerRect.top;
+        containerLeft = containerRect.left;
+
+        top = imageRect!.top - containerTop;
+        left = imageRect!.left - containerLeft;
+        width = activeImage!.clientWidth;
+        height = activeImage!.clientHeight;
+    }
+
     function resetSizes() {
         top = 0;
         left = 0;
@@ -39,9 +48,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         height = 0;
     }
 
+    $: if (activeImage) {
+        updateSizes();
+    } else {
+        resetSizes();
+    }
+
+    let actualWidth = "";
+    let actualHeight = "";
+    let customDimensions = false;
     let overflowFix = 0;
 
-    async function updateDimensions(dimensions: HTMLDivElement) {
+    function updateDimensions(dimensions: HTMLDivElement) {
         /* we do not want the actual width, but rather the intended display width */
         const widthAttribute = activeImage!.getAttribute("width");
         customDimensions = false;
@@ -63,40 +81,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             actualHeight = String(naturalHeight);
         }
 
-        await tick();
+        tick().then(() => {
+            const boundingClientRect = dimensions.getBoundingClientRect();
+            const overflow = isRtl
+                ? window.innerWidth - boundingClientRect.x - boundingClientRect.width
+                : boundingClientRect.x;
 
-        const boundingClientRect = dimensions.getBoundingClientRect();
-        const overflow = isRtl
-            ? window.innerWidth - boundingClientRect.x - boundingClientRect.width
-            : boundingClientRect.x;
-
-        overflowFix = Math.min(0, overflowFix + overflow, overflow);
-        console.log("b", overflowFix);
-    }
-
-    async function updateSizes(dimensions: HTMLDivElement) {
-        const containerRect = container.getBoundingClientRect();
-        const imageRect = activeImage!.getBoundingClientRect();
-
-        containerTop = containerRect.top;
-        containerLeft = containerRect.left;
-        top = imageRect!.top - containerTop;
-        left = imageRect!.left - containerLeft;
-        width = activeImage!.clientWidth;
-        height = activeImage!.clientHeight;
-
-        await updateDimensions(dimensions);
-    }
-
-    function initialUpdate(dimensions: HTMLDivElement) {
-        updateSizes(dimensions);
-        return { destroy: resetSizes };
+            overflowFix = Math.min(0, overflowFix + overflow, overflow);
+        });
     }
 
     let dimensions: HTMLDivElement;
 
     async function updateSizesWithDimensions() {
-        await updateSizes(dimensions);
+        updateSizes();
+        updateDimensions(dimensions);
     }
 
     /* window resizing */
@@ -214,7 +213,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             class="image-handle-dimensions"
             class:is-rtl={isRtl}
             style="--overflow-fix: {overflowFix}px"
-            use:initialUpdate
+            use:updateDimensions
         >
             <span>{actualWidth}&times;{actualHeight}</span>
             {#if customDimensions}<span
diff --git a/ts/editor/ImageHandleSizeSelect.svelte b/ts/editor/ImageHandleSizeSelect.svelte
index 3cb954d0f..7cac923f7 100644
--- a/ts/editor/ImageHandleSizeSelect.svelte
+++ b/ts/editor/ImageHandleSizeSelect.svelte
@@ -96,7 +96,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
             const width = Number(image.getAttribute("width")) || image.width;
             const height = Number(image.getAttribute("height")) || width / aspectRatio;
-            console.log(width, height);
             rule.style.setProperty(
                 "height",
                 height < maxHeight ? `${height}px` : "auto",