From 1c99d163d194683655e23448f5e719a3e7846d23 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 5 Aug 2021 02:58:52 +0200
Subject: [PATCH] Implement HandleBackground

---
 ts/editor/HandleBackground.svelte | 14 ++++++++++
 ts/editor/ImageHandle.svelte      | 46 ++++++++++++-------------------
 2 files changed, 32 insertions(+), 28 deletions(-)
 create mode 100644 ts/editor/HandleBackground.svelte

diff --git a/ts/editor/HandleBackground.svelte b/ts/editor/HandleBackground.svelte
new file mode 100644
index 000000000..b6da7ed78
--- /dev/null
+++ b/ts/editor/HandleBackground.svelte
@@ -0,0 +1,14 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<div on:mousedown|preventDefault on:click on:dblclick />
+
+<style lang="scss">
+    div {
+        width: 100%;
+        height: 100%;
+        background-color: black;
+        opacity: 0.2;
+    }
+</style>
diff --git a/ts/editor/ImageHandle.svelte b/ts/editor/ImageHandle.svelte
index 3c9ae55a3..508ece350 100644
--- a/ts/editor/ImageHandle.svelte
+++ b/ts/editor/ImageHandle.svelte
@@ -3,6 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import HandleBackground from "./HandleBackground.svelte";
     import HandleSelection from "./HandleSelection.svelte";
     import HandleControl from "./HandleControl.svelte";
     import ImageHandleFloat from "./ImageHandleFloat.svelte";
@@ -195,12 +196,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     --height="{height}px"
 >
     {#if activeImage}
-        <div
-            class="image-handle-bg"
-            on:mousedown|preventDefault
-            on:dblclick={onDblclick}
-        />
+        <HandleBackground on:dblclick={onDblclick} />
+    {/if}
 
+    {#if sheet}
+        <div class="image-handle-size-select" class:is-rtl={isRtl}>
+            <ImageHandleSizeSelect
+                bind:this={sizeSelect}
+                bind:active
+                {container}
+                {sheet}
+                {activeImage}
+                {isRtl}
+                on:update={updateSizesWithDimensions}
+            />
+        </div>
+    {/if}
+
+    {#if activeImage}
         {#if showFloat}
             <div
                 class="image-handle-float"
@@ -223,23 +236,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     >(Original: {naturalWidth}&times;{naturalHeight})</span
                 >{/if}
         </div>
-    {/if}
 
-    {#if sheet}
-        <div class="image-handle-size-select" class:is-rtl={isRtl}>
-            <ImageHandleSizeSelect
-                bind:this={sizeSelect}
-                bind:active
-                {container}
-                {sheet}
-                {activeImage}
-                {isRtl}
-                on:update={updateSizesWithDimensions}
-            />
-        </div>
-    {/if}
-
-    {#if activeImage}
         <HandleControl
             {active}
             on:pointerclick={setPointerCapture}
@@ -254,13 +251,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         position: absolute;
     }
 
-    .image-handle-bg {
-        width: 100%;
-        height: 100%;
-        background-color: black;
-        opacity: 0.2;
-    }
-
     .image-handle-float {
         top: 3px;
         left: 3px;