Bind to style properties instead of events

ts/editor/ImageHandle.svelte

@@ -89,6 +89,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const nightMode = getContext(nightModeKey);
 </script>
 
+{#if image}
     <div
         style="--top: {top}px; --left: {left}px; --width: {width}px; --height: {height}px;"
         class="image-handle-selection"
@@ -96,11 +97,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     >
         <div class="image-handle-bg" />
         <div class="image-handle-buttons">
-        <ImageHandleButtons
+            <ImageHandleButtons bind:float={image.style.float} />
-            on:floatleft={floatLeft}
-            on:floatright={floatRight}
-            on:floatreset={floatReset}
-        />
         </div>
         <div class="image-handle-dimensions">
             {width}&times;{height} (Original: {naturalWidth}&times;{naturalHeight})
@@ -115,6 +112,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             on:pointermove={resize}
         />
     </div>
+{/if}
 
 <style lang="scss">
     div {

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")}
+            <IconButton
-                >{@html resetIcon}</IconButton
+                active={float === "" || float === "none"}
+                on:click={() => (float = "")}>{@html resetIcon}</IconButton
             >
         </ButtonGroupItem>
     </ButtonGroup>