From cb744f31c17164991063871043cd456c66f8f6b8 Mon Sep 17 00:00:00 2001
From: DanyLE <xsang.le@gmail.com>
Date: Sat, 7 Jan 2023 22:57:00 +0100
Subject: [PATCH] Add custom dragging event support for all HTMLElement

---
 d.ts/antos.d.ts               | 24 ++++++++++-----
 src/core/tags/FloatListTag.ts | 55 ++++++++++-------------------------
 src/core/tags/tag.ts          | 45 +++++++++++++++++++++++++++-
 3 files changed, 76 insertions(+), 48 deletions(-)

diff --git a/d.ts/antos.d.ts b/d.ts/antos.d.ts
index 02406e5..53d2521 100644
--- a/d.ts/antos.d.ts
+++ b/d.ts/antos.d.ts
@@ -3629,6 +3629,22 @@ interface HTMLElement {
      * @memberof HTMLElement
      */
     afxml(o: OS.API.Announcer): void;
+    /**
+     * Enable the drag event dispatching on this
+     * element
+     *
+     * This will trigger the `drag` event on the enabled
+     * on the element when the mouse is down, then move
+     *
+     * The event can be listened using the traditional way,
+     * Example:
+     * ```
+     * elem.addEventListener('drag', (e) => {  }, false);
+     * ```
+     *
+     * @meberof HTMLElement
+     */
+    enable_drag(): void;
     /**
      * Perform DOM generation ([[afxml]]) then mount ([[sync]]) all the
      * elements.
@@ -8763,14 +8779,6 @@ declare namespace OS {
                  * @memberof FloatListTag
                  */
                 push(v: GenericObject<any>): ListViewItemTag;
-                /**
-                 * Enable drag and drop on the list
-                 *
-                 * @private
-                 * @param {ListViewItemTag} el the list item DOM element
-                 * @memberof FloatListTag
-                 */
-                private enable_drag;
                 /**
                  * Calibrate the view of the list
                  *
diff --git a/src/core/tags/FloatListTag.ts b/src/core/tags/FloatListTag.ts
index e670374..388a406 100644
--- a/src/core/tags/FloatListTag.ts
+++ b/src/core/tags/FloatListTag.ts
@@ -123,49 +123,26 @@ namespace OS {
                  */
                 push(v: GenericObject<any>) {
                     const el = super.push(v);
-                    this.enable_drag(el);
-                    return el;
-                }
-
-                /**
-                 * Enable drag and drop on the list
-                 *
-                 * @private
-                 * @param {ListViewItemTag} el the list item DOM element
-                 * @memberof FloatListTag
-                 */
-                private enable_drag(el: ListViewItemTag): void {
                     $(el)
                         .css("user-select", "none")
                         .css("cursor", "default")
                         .css("display", "block")
-                        .css("position", "absolute")
-                        .on("pointerdown", (evt) => {
-                            const globalof = $(this.refs.mlist).offset();
-                            //evt.preventDefault();
-                            const offset = $(el).offset();
-                            offset.top = evt.clientY - offset.top;
-                            offset.left = evt.clientX - offset.left;
-                            const mouse_move = function (
-                                e: JQuery.MouseEventBase
-                            ) {
-                                let top = e.clientY - offset.top - globalof.top;
-                                let left =
-                                    e.clientX - globalof.left - offset.left;
-                                left = left < 0 ? 0 : left;
-                                top = top < 0 ? 0 : top;
-                                return $(el)
-                                    .css("top", `${top}px`)
-                                    .css("left", `${left}px`);
-                            };
-
-                            var mouse_up = function (e: JQuery.MouseEventBase) {
-                                $(window).off("pointermove", mouse_move);
-                                return $(window).off("pointerup", mouse_up);
-                            };
-                            $(window).on("pointermove", mouse_move);
-                            return $(window).on("pointerup", mouse_up);
-                        });
+                        .css("position", "absolute");
+                    el.enable_drag();
+                    $(el).on("dragging", (evt) => {
+                        const e = evt.originalEvent as CustomEvent;
+                        const globalof = $(this.refs.mlist).offset();
+                        const offset = e.detail.offset;
+                        let top = e.detail.current.clientY - offset.top - globalof.top;
+                        let left =
+                            e.detail.current.clientX - globalof.left - offset.left;
+                        left = left < 0 ? 0 : left;
+                        top = top < 0 ? 0 : top;
+                        $(el)
+                            .css("top", `${top}px`)
+                            .css("left", `${left}px`);
+                    })
+                    return el;
                 }
 
                 /**
diff --git a/src/core/tags/tag.ts b/src/core/tags/tag.ts
index 2eb28c9..5c96854 100644
--- a/src/core/tags/tag.ts
+++ b/src/core/tags/tag.ts
@@ -50,6 +50,23 @@ interface HTMLElement {
      */
     afxml(o: OS.API.Announcer): void;
 
+    /**
+     * Enable the drag event dispatching on this
+     * element
+     * 
+     * This will trigger the `dragging` event on the enabled
+     * on the element when the mouse is down, then move
+     * 
+     * The event can be listened using the traditional way,
+     * Example:
+     * ```
+     * elem.addEventListener('dragging', (e) => {  }, false);
+     * ```
+     * 
+     * @meberof HTMLElement
+     */
+    enable_drag():void;
+
     /**
      * Perform DOM generation ([[afxml]]) then mount ([[sync]]) all the
      * elements.
@@ -595,7 +612,33 @@ namespace OS {
                 return element.hasAttribute(v);
             }
         }
-        
+
+        HTMLElement.prototype.enable_drag = function()
+        {
+            $(this)
+                .on("pointerdown", (evt: JQuery.MouseEventBase) => {
+                    const offset = $(this).offset();
+                    offset.top = evt.clientY - offset.top;
+                    offset.left = evt.clientX - offset.left;
+                    const mouse_move = (
+                        e: JQuery.MouseEventBase
+                    )  => {
+                        const custom_event = new CustomEvent('dragging', { detail:{
+                            origin: evt,
+                            current: e,
+                            offset: offset
+                        }});
+                        this.dispatchEvent(custom_event);
+                    };
+
+                    var mouse_up = function (e: JQuery.MouseEventBase) {
+                        $(window).off("pointermove", mouse_move);
+                        return $(window).off("pointerup", mouse_up);
+                    };
+                    $(window).on("pointermove", mouse_move);
+                    $(window).on("pointerup", mouse_up);
+                });
+        }        
 
         HTMLElement.prototype.update = function (d): void {
             $(this)