From e581d593d339a2dfbb69368e41bdd4d3eb87bece Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 27 Jul 2021 16:54:23 +0200
Subject: [PATCH] Hide Float icons when width too small + Avoid too small
 resizing

---
 ts/editor/ImageHandle.svelte | 31 +++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/ts/editor/ImageHandle.svelte b/ts/editor/ImageHandle.svelte
index 36e0d687e..40d2f6d72 100644
--- a/ts/editor/ImageHandle.svelte
+++ b/ts/editor/ImageHandle.svelte
@@ -21,7 +21,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     $: aspectRatio = naturalWidth && naturalHeight ? naturalWidth / naturalHeight : NaN;
 
     $: showDimensions = image
-        ? parseInt(getComputedStyle(image).getPropertyValue("width")) > 100
+        ? parseInt(getComputedStyle(image).getPropertyValue("height")) >= 50
+        : false;
+
+    $: showFloat = image
+        ? parseInt(getComputedStyle(image).getPropertyValue("width")) >= 100
         : false;
 
     $: active = imageRule?.selectorText.includes(selector) as boolean;
@@ -88,13 +92,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
 
         const heightProperty = image!.style.height;
-        if (heightProperty) {
+        if (inPixel || heightProperty === "auto") {
+            actualHeight = String(Math.trunc(Number(actualWidth) / aspectRatio));
+        } else if (heightProperty) {
             actualHeight = heightProperty.endsWith("px")
                 ? heightProperty.substring(0, heightProperty.length - 2)
                 : heightProperty;
             customDimensions = true;
-        } else if (inPixel) {
-            actualHeight = String(Math.trunc(Number(actualWidth) / aspectRatio));
         } else {
             actualHeight = String(naturalHeight);
         }
@@ -123,14 +127,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         const heightIncrease = dragHeight / naturalHeight!;
 
         if (widthIncrease > heightIncrease) {
-            width = Math.trunc(dragWidth);
-            height = Math.trunc(naturalHeight! * widthIncrease);
+            width = Math.max(Math.trunc(dragWidth), 12);
+            height = Math.trunc(naturalHeight! * (width / naturalWidth!));
         } else {
-            height = Math.trunc(dragHeight);
-            width = Math.trunc(naturalWidth! * heightIncrease);
+            height = Math.max(Math.trunc(dragHeight), 10);
+            width = Math.trunc(naturalWidth! * (height / naturalHeight!));
         }
 
-        showDimensions = width > 100;
+        showDimensions = height >= 50;
+        showFloat = width >= 100;
 
         image!.style.width = `${width}px`;
         image!.style.removeProperty("height");
@@ -157,9 +162,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             on:mousedown|preventDefault
             on:dblclick={onDblclick}
         />
-        <div class="image-handle-float" class:is-rtl={isRtl}>
-            <ImageHandleFloat {isRtl} bind:float={image.style.float} />
-        </div>
+        {#if showFloat}
+            <div class="image-handle-float" class:is-rtl={isRtl}>
+                <ImageHandleFloat {isRtl} bind:float={image.style.float} />
+            </div>
+        {/if}
         <div class="image-handle-size-select" class:is-rtl={isRtl}>
             <ImageHandleSizeSelect
                 bind:this={sizeSelect}