From cc2641095fb381307aa16ac097fe82e4963b8b65 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 6 Aug 2021 03:53:44 +0200
Subject: [PATCH] Fix automatic positioning of ButtonDropdown after changing
 float property

---
 ts/components/WithDropdown.svelte | 30 +++++++++++++++++--
 ts/editor/HandleControl.svelte    |  4 +++
 ts/editor/ImageHandle.svelte      | 50 ++++++++++++++++++++-----------
 ts/editor/ImageHandleFloat.svelte | 20 +++++++++----
 4 files changed, 79 insertions(+), 25 deletions(-)

diff --git a/ts/components/WithDropdown.svelte b/ts/components/WithDropdown.svelte
index 487f7fa61..cf14700f5 100644
--- a/ts/components/WithDropdown.svelte
+++ b/ts/components/WithDropdown.svelte
@@ -8,27 +8,51 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { setContext, onDestroy } from "svelte";
     import { dropdownKey } from "./context-keys";
 
+    export let autoOpen = false;
+    export let autoClose: boolean | "inside" | "outside" = true;
+
+    export let placement = "bottom-start";
+
     setContext(dropdownKey, {
         dropdown: true,
         "data-bs-toggle": "dropdown",
     });
 
     let dropdown: Dropdown;
+    let dropdownObject: Dropdown;
 
     const noop = () => {};
     function createDropdown(toggle: HTMLElement): Dropdown {
         /* avoid focusing element toggle on menu activation */
         toggle.focus = noop;
-        dropdown = new Dropdown(toggle, {} as any);
+        dropdown = new Dropdown(toggle, {
+            autoClose,
+            popperConfig: (defaultConfig: Record<string, any>) => ({
+                ...defaultConfig,
+                placement,
+            }),
+        } as any);
 
-        return dropdown;
+        if (autoOpen) {
+            dropdown.show();
+        }
+
+        dropdownObject = {
+            show: dropdown.show.bind(dropdown),
+            toggle: dropdown.toggle.bind(dropdown),
+            hide: dropdown.hide.bind(dropdown),
+            update: dropdown.update.bind(dropdown),
+            dispose: dropdown.dispose.bind(dropdown),
+        };
+
+        return dropdownObject;
     }
 
     onDestroy(() => dropdown?.dispose());
 </script>
 
 <div class="dropdown">
-    <slot {createDropdown} dropdownObject={dropdown} />
+    <slot {createDropdown} {dropdownObject} />
 </div>
 
 <style lang="scss">
diff --git a/ts/editor/HandleControl.svelte b/ts/editor/HandleControl.svelte
index 3b44375a4..f15bf5acc 100644
--- a/ts/editor/HandleControl.svelte
+++ b/ts/editor/HandleControl.svelte
@@ -31,6 +31,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         class:active
         class="nw"
         on:mousedown|preventDefault
+        on:click
         on:pointerdown={onPointerdown(true, true)}
         on:pointerup
         on:pointermove
@@ -40,6 +41,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         class:active
         class="ne"
         on:mousedown|preventDefault
+        on:click
         on:pointerdown={onPointerdown(true, false)}
         on:pointerup
         on:pointermove
@@ -49,6 +51,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         class:active
         class="sw"
         on:mousedown|preventDefault
+        on:click
         on:pointerdown={onPointerdown(false, true)}
         on:pointerup
         on:pointermove
@@ -58,6 +61,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         class:active
         class="se"
         on:mousedown|preventDefault
+        on:click
         on:pointerdown={onPointerdown(false, false)}
         on:pointerup
         on:pointermove
diff --git a/ts/editor/ImageHandle.svelte b/ts/editor/ImageHandle.svelte
index 1adf8c559..f0e99f448 100644
--- a/ts/editor/ImageHandle.svelte
+++ b/ts/editor/ImageHandle.svelte
@@ -133,24 +133,31 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
 
         activeImage!.width = width;
-
-        await updateSizesWithDimensions();
     }
 
     onDestroy(() => resizeObserver.disconnect());
 </script>
 
 {#if sheet}
-    <WithImageConstrained
-        {sheet}
-        {container}
-        {activeImage}
-        on:update={updateSizesWithDimensions}
-        let:toggleActualSize
-        let:active
+    <WithDropdown
+        placement="bottom"
+        autoOpen={true}
+        autoClose={false}
+        let:createDropdown
+        let:dropdownObject
     >
-        {#if activeImage}
-            <WithDropdown let:createDropdown>
+        <WithImageConstrained
+            {sheet}
+            {container}
+            {activeImage}
+            on:update={() => {
+                updateSizesWithDimensions();
+                dropdownObject.update();
+            }}
+            let:toggleActualSize
+            let:active
+        >
+            {#if activeImage}
                 <HandleSelection
                     bind:updateSelection
                     {container}
@@ -158,8 +165,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     on:mount={(event) => createDropdown(event.detail.selection)}
                 >
                     <HandleBackground
+                        on:click={(event) => event.stopPropagation()}
                         on:dblclick={toggleActualSize}
-                        on:mount={(event) => createDropdown(event.detail.background)}
                     />
 
                     <HandleLabel {isRtl} on:mount={updateDimensions}>
@@ -175,19 +182,28 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                         activeSize={7}
                         offsetX={5}
                         offsetY={5}
+                        on:click={(event) => event.stopPropagation()}
                         on:pointerclick={(event) => {
                             if (active) {
                                 setPointerCapture(event);
                             }
                         }}
                         on:pointerup={startObserving}
-                        on:pointermove={resize}
+                        on:pointermove={(event) => {
+                            resize(event);
+                            updateSizesWithDimensions();
+                            dropdownObject.update();
+                        }}
                     />
                 </HandleSelection>
                 <ButtonDropdown>
                     <div on:click={updateSizesWithDimensions}>
                         <Item>
-                            <ImageHandleFloat image={activeImage} {isRtl} />
+                            <ImageHandleFloat
+                                image={activeImage}
+                                {isRtl}
+                                on:update={dropdownObject.update}
+                            />
                         </Item>
                         <Item>
                             <ImageHandleSizeSelect
@@ -198,7 +214,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                         </Item>
                     </div>
                 </ButtonDropdown>
-            </WithDropdown>
-        {/if}
-    </WithImageConstrained>
+            {/if}
+        </WithImageConstrained>
+    </WithDropdown>
 {/if}
diff --git a/ts/editor/ImageHandleFloat.svelte b/ts/editor/ImageHandleFloat.svelte
index 769721d88..60685b6b8 100644
--- a/ts/editor/ImageHandleFloat.svelte
+++ b/ts/editor/ImageHandleFloat.svelte
@@ -9,6 +9,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import ButtonGroupItem from "components/ButtonGroupItem.svelte";
     import IconButton from "components/IconButton.svelte";
 
+    import { createEventDispatcher } from "svelte";
     import { floatNoneIcon, floatLeftIcon, floatRightIcon } from "./icons";
 
     export let image: HTMLImageElement;
@@ -27,6 +28,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     $: inlineStart = isRtl ? rightValues : leftValues;
     $: inlineEnd = isRtl ? leftValues : rightValues;
+
+    const dispatch = createEventDispatcher();
 </script>
 
 <ButtonGroup size={1.6} wrap={false} reverse={isRtl}>
@@ -35,7 +38,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             tooltip={tr.editingFloatNone()}
             active={image.style.float === "" || image.style.float === "none"}
             flipX={isRtl}
-            on:click={() => (image.style.float = "")}>{@html floatNoneIcon}</IconButton
+            on:click={() => {
+                image.style.float = "";
+                setTimeout(() => dispatch("update"));
+            }}>{@html floatNoneIcon}</IconButton
         >
     </ButtonGroupItem>
 
@@ -44,8 +50,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             tooltip={inlineStart.label}
             active={image.style.float === inlineStart.position}
             flipX={isRtl}
-            on:click={() => (image.style.float = inlineStart.position)}
-            >{@html floatLeftIcon}</IconButton
+            on:click={() => {
+                image.style.float = inlineStart.position;
+                setTimeout(() => dispatch("update"));
+            }}>{@html floatLeftIcon}</IconButton
         >
     </ButtonGroupItem>
 
@@ -54,8 +62,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             tooltip={inlineEnd.label}
             active={image.style.float === inlineEnd.position}
             flipX={isRtl}
-            on:click={() => (image.style.float = inlineEnd.position)}
-            >{@html floatRightIcon}</IconButton
+            on:click={() => {
+                image.style.float = inlineEnd.position;
+                setTimeout(() => dispatch("update"));
+            }}>{@html floatRightIcon}</IconButton
         >
     </ButtonGroupItem>
 </ButtonGroup>