From b3c921b86cb576764dfe78d179697084b914b8de Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 21 Jul 2021 03:50:52 +0200
Subject: [PATCH] Bind to style properties instead of events

---
 ts/editor/ImageHandle.svelte        | 46 ++++++++++++++---------------
 ts/editor/ImageHandleButtons.svelte | 13 ++++----
 2 files changed, 28 insertions(+), 31 deletions(-)

diff --git a/ts/editor/ImageHandle.svelte b/ts/editor/ImageHandle.svelte
index 1e4553e5b..3a444877f 100644
--- a/ts/editor/ImageHandle.svelte
+++ b/ts/editor/ImageHandle.svelte
@@ -89,32 +89,30 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const nightMode = getContext(nightModeKey);
 </script>
 
-<div
-    style="--top: {top}px; --left: {left}px; --width: {width}px; --height: {height}px;"
-    class="image-handle-selection"
-    {hidden}
->
-    <div class="image-handle-bg" />
-    <div class="image-handle-buttons">
-        <ImageHandleButtons
-            on:floatleft={floatLeft}
-            on:floatright={floatRight}
-            on:floatreset={floatReset}
+{#if image}
+    <div
+        style="--top: {top}px; --left: {left}px; --width: {width}px; --height: {height}px;"
+        class="image-handle-selection"
+        {hidden}
+    >
+        <div class="image-handle-bg" />
+        <div class="image-handle-buttons">
+            <ImageHandleButtons bind:float={image.style.float} />
+        </div>
+        <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" />
+        <div
+            class:nightMode
+            class="image-handle-control image-handle-control-se is-active"
+            on:pointerdown={setPointerCapture}
+            on:pointermove={resize}
         />
     </div>
-    <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" />
-    <div
-        class:nightMode
-        class="image-handle-control image-handle-control-se is-active"
-        on:pointerdown={setPointerCapture}
-        on:pointermove={resize}
-    />
-</div>
+{/if}
 
 <style lang="scss">
     div {
diff --git a/ts/editor/ImageHandleButtons.svelte b/ts/editor/ImageHandleButtons.svelte
index ddcd9198a..3f71cd500 100644
--- a/ts/editor/ImageHandleButtons.svelte
+++ b/ts/editor/ImageHandleButtons.svelte
@@ -3,8 +3,6 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
-    import { createEventDispatcher } from "svelte";
-
     import ButtonToolbar from "components/ButtonToolbar.svelte";
     import ButtonGroup from "components/ButtonGroup.svelte";
     import ButtonGroupItem from "components/ButtonGroupItem.svelte";
@@ -12,26 +10,27 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import { floatLeftIcon, floatRightIcon, resetIcon } from "./icons";
 
-    const dispatch = createEventDispatcher();
+    export let float: string;
 </script>
 
 <ButtonToolbar size={1.6} wrap={false}>
     <ButtonGroup>
         <ButtonGroupItem>
-            <IconButton on:click={() => dispatch("floatleft")}
+            <IconButton active={float === "left"} on:click={() => (float = "left")}
                 >{@html floatLeftIcon}</IconButton
             >
         </ButtonGroupItem>
 
         <ButtonGroupItem>
-            <IconButton on:click={() => dispatch("floatright")}
+            <IconButton active={float === "right"} on:click={() => (float = "right")}
                 >{@html floatRightIcon}</IconButton
             >
         </ButtonGroupItem>
 
         <ButtonGroupItem>
-            <IconButton on:click={() => dispatch("floatreset")}
-                >{@html resetIcon}</IconButton
+            <IconButton
+                active={float === "" || float === "none"}
+                on:click={() => (float = "")}>{@html resetIcon}</IconButton
             >
         </ButtonGroupItem>
     </ButtonGroup>