Merge pull request #109 from center-for-threat-informed-defense/AF-18…

…1_fix_drag_events_safari AF-181: Fix Drag Events in Safari
center-for-threat-informed-defense · Aug 30, 2023 · 5c51a5c · 5c51a5c
2 parents b0091b5 + 8b566cb
commit 5c51a5c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/src/attack_flow_builder/src/App.vue b/src/attack_flow_builder/src/App.vue
@@ -118,7 +118,8 @@ export default defineComponent({
     startResize(event: PointerEvent, handle: number) {
       let origin = this.frameSize[handle];
       this.drag.handle = handle;
-      this.drag.track.capture(event, (_, track) => {
+      this.drag.track.capture(event, (e, track) => {
+        e.preventDefault();
         this.onResize(origin, track);
       });
       document.addEventListener("pointerup", this.stopResize, { once: true });

diff --git a/src/attack_flow_builder/src/components/Containers/AccordionBox.vue b/src/attack_flow_builder/src/components/Containers/AccordionBox.vue
@@ -159,7 +159,9 @@ export default defineComponent({
      * @param track
      *  The mouse tracker.
      */
-    onDrag(_: PointerEvent, track: PointerTracker) {
+    onDrag(event: PointerEvent, track: PointerTracker) {
+      event.preventDefault();
+
       let p = this.panes;
 
       // Ignore no movement

diff --git a/src/attack_flow_builder/src/components/Containers/ScrollBox.vue b/src/attack_flow_builder/src/components/Containers/ScrollBox.vue
@@ -116,6 +116,8 @@ export default defineComponent({
      */
     startDrag(event: PointerEvent) {
       this.handle.trk.capture(event, this.onDrag);
+      // Configure stop drag
+      document.addEventListener("pointerup", this.stopDrag, { once: true });
     },
 
     /**
@@ -125,12 +127,23 @@ export default defineComponent({
      * @param track
      *  The mouse tracker.
      */
-    onDrag(_: PointerEvent, track: PointerTracker) {
+    onDrag(event: PointerEvent, track: PointerTracker) {
+      event.preventDefault();
       this.moveScrollPosition(
         this.handleTopToTop(this.handle.pos + track.movementY)
       );
     },
 
+    /**
+     * Scroll handle drag stop behavior.
+     * @param event
+     *  The pointer event.
+     */
+    stopDrag(event: PointerEvent) {
+      // Release pointer
+      this.handle.trk.release(event);
+    },
+
     /**
      * Scroll content behavior.
      */