Introduce HandleControl

ts/editor/HandleControl.svelte

@@ -0,0 +1,122 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import { createEventDispatcher, getContext } from "svelte";
+    import { nightModeKey } from "components/context-keys";
+
+    export let active: boolean;
+
+    const dispatch = createEventDispatcher();
+    const nightMode = getContext(nightModeKey);
+
+    const onPointerdown =
+        (north: boolean, west: boolean) =>
+        (event: PointerEvent): void => {
+            dispatch("pointerclick", { north, west, originalEvent: event });
+        };
+</script>
+
+<div
+    class:nightMode
+    class:active
+    class="nw"
+    on:mousedown|preventDefault
+    on:pointerdown={onPointerdown(true, true)}
+    on:pointerup
+    on:pointermove
+/>
+<div
+    class:nightMode
+    class:active
+    class="ne"
+    on:mousedown|preventDefault
+    on:pointerdown={onPointerdown(true, false)}
+    on:pointerup
+    on:pointermove
+/>
+<div
+    class:nightMode
+    class:active
+    class="sw"
+    on:mousedown|preventDefault
+    on:pointerdown={onPointerdown(false, true)}
+    on:pointerup
+    on:pointermove
+/>
+<div
+    class:nightMode
+    class:active
+    class="se"
+    on:mousedown|preventDefault
+    on:pointerdown={onPointerdown(false, false)}
+    on:pointerup
+    on:pointermove
+/>
+
+<style lang="scss">
+    div {
+        position: absolute;
+
+        width: 7px;
+        height: 7px;
+        border: 1px solid black;
+
+        &.active {
+            background-color: black;
+        }
+
+        &.nightMode {
+            border-color: white;
+
+            &.active {
+                background-color: white;
+            }
+        }
+    }
+
+    .nw {
+        top: -5px;
+        left: -5px;
+        border-bottom: none;
+        border-right: none;
+
+        &.active {
+            cursor: nw-resize;
+        }
+    }
+
+    .ne {
+        top: -5px;
+        right: -5px;
+        border-bottom: none;
+        border-left: none;
+
+        &.active {
+            cursor: ne-resize;
+        }
+    }
+
+    .sw {
+        bottom: -5px;
+        left: -5px;
+        border-top: none;
+        border-right: none;
+
+        &.active {
+            cursor: sw-resize;
+        }
+    }
+
+    .se {
+        bottom: -5px;
+        right: -5px;
+        border-top: none;
+        border-left: none;
+
+        &.active {
+            cursor: se-resize;
+        }
+    }
+</style>

ts/editor/ImageHandle.svelte

@@ -4,6 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import HandleSelection from "./HandleSelection.svelte";
+    import HandleControl from "./HandleControl.svelte";
     import ImageHandleFloat from "./ImageHandleFloat.svelte";
     import ImageHandleSizeSelect from "./ImageHandleSizeSelect.svelte";
 
@@ -117,10 +118,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let getDragWidth: (event: PointerEvent) => number;
     let getDragHeight: (event: PointerEvent) => number;
 
-    const setPointerCapture =
+    function setPointerCapture({ detail }: CustomEvent): void {
-        (north: boolean, west: boolean) =>
+        if (!active || detail.originalEvent.pointerId !== 1) {
-        (event: PointerEvent): void => {
-            if (!active || event.pointerId !== 1) {
             return;
         }
 
@@ -128,19 +127,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
         const imageLeft = imageRect!.left;
         const imageRight = imageRect!.right;
-            const [multX, imageX] = west ? [-1, imageRight] : [1, -imageLeft];
+        const [multX, imageX] = detail.west ? [-1, imageRight] : [1, -imageLeft];
 
         getDragWidth = ({ clientX }) => multX * clientX + imageX;
 
         const imageTop = imageRect!.top;
         const imageBottom = imageRect!.bottom;
-            const [multY, imageY] = north ? [-1, imageBottom] : [1, -imageTop];
+        const [multY, imageY] = detail.north ? [-1, imageBottom] : [1, -imageTop];
 
         getDragHeight = ({ clientY }) => multY * clientY + imageY;
 
         stopObserving();
-            (event.target as Element).setPointerCapture(event.pointerId);
+
-        };
+        const target = detail.originalEvent.target as Element;
+        target.setPointerCapture(detail.originalEvent.pointerId);
+    }
 
     $: [minResizeWidth, minResizeHeight] =
         aspectRatio > 1 ? [5 * aspectRatio, 5] : [5, 5 / aspectRatio];
@@ -242,39 +243,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     {/if}
 
     {#if activeImage}
-        <div
+        <HandleControl
-            class:nightMode
+            {active}
-            class:active
+            on:pointerclick={setPointerCapture}
-            class="image-handle-control image-handle-control-nw"
-            on:mousedown|preventDefault
-            on:pointerdown={setPointerCapture(true, true)}
-            on:pointerup={startObserving}
-            on:pointermove={resize}
-        />
-        <div
-            class:nightMode
-            class:active
-            class="image-handle-control image-handle-control-ne"
-            on:mousedown|preventDefault
-            on:pointerdown={setPointerCapture(true, false)}
-            on:pointerup={startObserving}
-            on:pointermove={resize}
-        />
-        <div
-            class:nightMode
-            class:active
-            class="image-handle-control image-handle-control-sw"
-            on:mousedown|preventDefault
-            on:pointerdown={setPointerCapture(false, true)}
-            on:pointerup={startObserving}
-            on:pointermove={resize}
-        />
-        <div
-            class:nightMode
-            class:active
-            class="image-handle-control image-handle-control-se"
-            on:mousedown|preventDefault
-            on:pointerdown={setPointerCapture(false, false)}
             on:pointerup={startObserving}
             on:pointermove={resize}
         />
@@ -286,13 +257,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         position: absolute;
     }
 
-    .image-handle-selection {
-        top: var(--top);
-        left: var(--left);
-        width: var(--width);
-        height: var(--height);
-    }
-
     .image-handle-bg {
         width: 100%;
         height: 100%;
@@ -343,66 +307,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             margin-left: var(--overflow-fix, 0);
         }
     }
-
-    .image-handle-control {
-        width: 7px;
-        height: 7px;
-        border: 1px solid black;
-
-        &.active {
-            background-color: black;
-        }
-
-        &.nightMode {
-            border-color: white;
-
-            &.active {
-                background-color: white;
-            }
-        }
-    }
-
-    .image-handle-control-nw {
-        top: -5px;
-        left: -5px;
-        border-bottom: none;
-        border-right: none;
-
-        &.active {
-            cursor: nw-resize;
-        }
-    }
-
-    .image-handle-control-ne {
-        top: -5px;
-        right: -5px;
-        border-bottom: none;
-        border-left: none;
-
-        &.active {
-            cursor: ne-resize;
-        }
-    }
-
-    .image-handle-control-sw {
-        bottom: -5px;
-        left: -5px;
-        border-top: none;
-        border-right: none;
-
-        &.active {
-            cursor: sw-resize;
-        }
-    }
-
-    .image-handle-control-se {
-        bottom: -5px;
-        right: -5px;
-        border-top: none;
-        border-left: none;
-
-        &.active {
-            cursor: se-resize;
-        }
-    }
 </style>