From bbf03a6b931edd3cc682692195685c5e8be2a795 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 2 Sep 2021 20:03:12 +0200
Subject: [PATCH] Fix ButtonDropdown disappearing when mouseupping on
 HandleBackground

---
 ts/editor/HandleBackground.svelte |  6 +++++-
 ts/editor/HandleControl.svelte    |  8 --------
 ts/editor/HandleSelection.svelte  |  1 +
 ts/editor/ImageHandle.svelte      | 24 +++++++++++++-----------
 4 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/ts/editor/HandleBackground.svelte b/ts/editor/HandleBackground.svelte
index 9446de3e6..fb5f80561 100644
--- a/ts/editor/HandleBackground.svelte
+++ b/ts/editor/HandleBackground.svelte
@@ -11,7 +11,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     onMount(() => dispatch("mount", { background }));
 </script>
 
-<div bind:this={background} on:mousedown|preventDefault on:click on:dblclick />
+<div
+    bind:this={background}
+    on:mousedown|preventDefault
+    on:dblclick
+/>
 
 <style lang="scss">
     div {
diff --git a/ts/editor/HandleControl.svelte b/ts/editor/HandleControl.svelte
index e00a7ab90..6e8f0e429 100644
--- a/ts/editor/HandleControl.svelte
+++ b/ts/editor/HandleControl.svelte
@@ -32,9 +32,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         class:active
         class="control nw"
         on:mousedown|preventDefault
-        on:click
         on:pointerdown={onPointerdown(true, true)}
-        on:pointerup
         on:pointermove
     />
     <div
@@ -42,9 +40,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         class:active
         class="control ne"
         on:mousedown|preventDefault
-        on:click
         on:pointerdown={onPointerdown(true, false)}
-        on:pointerup
         on:pointermove
     />
     <div
@@ -52,9 +48,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         class:active
         class="control sw"
         on:mousedown|preventDefault
-        on:click
         on:pointerdown={onPointerdown(false, true)}
-        on:pointerup
         on:pointermove
     />
     <div
@@ -62,9 +56,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         class:active
         class="control se"
         on:mousedown|preventDefault
-        on:click
         on:pointerdown={onPointerdown(false, false)}
-        on:pointerup
         on:pointermove
     />
 </div>
diff --git a/ts/editor/HandleSelection.svelte b/ts/editor/HandleSelection.svelte
index 8e9b10cc3..5de2a7045 100644
--- a/ts/editor/HandleSelection.svelte
+++ b/ts/editor/HandleSelection.svelte
@@ -37,6 +37,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <div
     bind:this={selection}
     use:updateSelection
+    on:click={(event) => /* prevent triggering Bootstrap dropdown */ event.stopImmediatePropagation()}
     style="--left: {left}px; --top: {top}px; --width: {width}px; --height: {height}px; --offsetX: {offsetX}px; --offsetY: {offsetY}px;"
 >
     <slot />
diff --git a/ts/editor/ImageHandle.svelte b/ts/editor/ImageHandle.svelte
index a42f7c546..307964e08 100644
--- a/ts/editor/ImageHandle.svelte
+++ b/ts/editor/ImageHandle.svelte
@@ -62,20 +62,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     /* window resizing */
     const resizeObserver = new ResizeObserver(async () => {
-        if (activeImage) {
-            await updateSizesWithDimensions();
-        }
+        await updateSizesWithDimensions();
     });
 
     function startObserving() {
+    console.log('start observe');
         resizeObserver.observe(container);
     }
 
     function stopObserving() {
+    console.log('stop observe');
         resizeObserver.unobserve(container);
     }
 
-    startObserving();
+    $: observes = Boolean(activeImage);
+    $: if (observes) {
+        startObserving();
+    } else {
+        stopObserving();
+    }
 
     /* memoized position of image on resize start
      * prevents frantic behavior when image shift into the next/previous line */
@@ -83,7 +88,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let getDragHeight: (event: PointerEvent) => number;
 
     function setPointerCapture({ detail }: CustomEvent): void {
-        if (detail.originalEvent.pointerId !== 1) {
+        const pointerId = detail.originalEvent.pointerId;
+
+        if (pointerId !== 1) {
             return;
         }
 
@@ -101,10 +108,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
         getDragHeight = ({ clientY }) => multY * clientY + imageY;
 
-        stopObserving();
-
         const target = detail.originalEvent.target as Element;
-        target.setPointerCapture(detail.originalEvent.pointerId);
+        target.setPointerCapture(pointerId);
     }
 
     $: [minResizeWidth, minResizeHeight] =
@@ -165,7 +170,6 @@ 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}
                     />
 
@@ -182,13 +186,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                         activeSize={8}
                         offsetX={5}
                         offsetY={5}
-                        on:click={(event) => event.stopPropagation()}
                         on:pointerclick={(event) => {
                             if (active) {
                                 setPointerCapture(event);
                             }
                         }}
-                        on:pointerup={startObserving}
                         on:pointermove={(event) => {
                             resize(event);
                             updateSizesWithDimensions();