REFA,FEAT: Introduced DragAndDropImplementation as behaviour parameterr for components

src/component.js

@@ -236,29 +236,24 @@ class Component extends StyleAndScriptStoringComponent {
 
     /**
      * 
-     * @param {*} dndGroup 
+     * @param {DragAndDropImplementation} dadImpl 
      * @returns {Component}
      */
-    draggable(dndGroup = null) {
+    draggable(dadImpl = new DragAndDropImplementation()) {
         this.subscribeOnGenerate(CommonCompelGroups.DRAGGABLE);
         this.subscribeOnGenerate(CommonCompelGroups.HAS_DRAG_EVENT);
+
+        let addedClass = "comp-el-mech-draggable";
         let selector = this._element.getAttribute("data-autocompel");
-        Page.registerStyling(".grabbin-cursor", { "cursor": "grab" });
 
-        return this.addStyleClass("comp-el-mech-draggable")
+        selector = `.${addedClass}[data-autocompel="${selector}"]`;
+
+        return this.addStyleClass(addedClass)
             .setAttribute("draggable", "true")
             .setAttribute("dropEffect", "none")
             .addEventListener(
                 CommonEvents.DRAG_START,
-                function (event) {
-                    console.log("DragEvent", event, "on", selector);
-                    event.target.classList.toggle("grabbin-cursor");
-                    event.dataTransfer
-                        .setData(
-                            "text/html",
-                            selector
-                        );
-                }
+                dadImpl.dragStartAction("text/plain", selector)
             );
     }
 
@@ -279,24 +274,23 @@ class Component extends StyleAndScriptStoringComponent {
 
     /**
      * 
-     * @param {*} dndGroup 
+     * @param {DragAndDropImplementation} dadImpl 
      * @returns {Component}
      */
-    dropTarget(dndGroup = null) {
-        let selector = "comp-el-mech-droptarget";
-
-        function dropEventCall(event) {
-            return dropEventHandler(event, selector);
-        }
+    dropTarget(dadImpl = new DragAndDropImplementation()) {
         this.subscribeOnGenerate(CommonCompelGroups.DROP_TARGET);
+        let specialClass = "comp-el-mech-droptarget";
 
-        this.addStyleClass(selector)
+        this.addStyleClass(specialClass)
             .onDrag(EventDrag.OVER);
 
+        let selector = `.${specialClass}[data-autocompel="${this._compName}"]`
+
         this._element.addEventListener(
             "drop",
-            dropEventCall
+            dadImpl.dropEventAction("text/plain", selector)
         );
+
         return this;
     }
 

src/modifications/dragAndDrop.js

@@ -6,19 +6,116 @@ const EventDrag = Object.freeze({
     LEAVE: "leave"
 });
 
-function dropEventHandler(event, selector) {
-    event.preventDefault();
 
-    let draggedKey = event.dataTransfer.getData("text/html");
-    let draggedElement = document.querySelector(`[data-autocompel="${draggedKey}"]`);
+class DragAndDropImplementation {
+    _isMngmtElNeeded;
 
-    let target = event.target
-        .closest('.' + selector);
+    ensureManagementElementExists() {
 
-    //if (![...target.childNodes].includes(draggedElement)) {
-    target.appendChild(draggedElement);
-    //}
+    }
+
+    getManagementElement() {
+
+    }
+
+    /**
+     * 
+     * @param {string} datakey 
+     * @param {string} selector 
+     * @returns {Function}
+     */
+    dragStartAction(datakey, selector) {
+        return function (event) {
+            console.log("DragEvent", event, "on", selector);
+            event.dataTransfer
+                .setData(
+                    datakey,
+                    JSON.stringify({
+                        ["selector"]: selector,
+                        ["relDims"]: new TwoDimPoint(
+                            event.clientX - event.target.getBoundingClientRect().left,
+                            event.clientY - event.target.getBoundingClientRect().top
+                        )
+                    })
+                );
+        }
+    }
+
+    dragEventAction(selector) {
+        return function (event) {
+
+        }
+    }
+
+
+    /**
+     * 
+     * @param {string} datakey 
+     * @param {string} selector 
+     * @returns {Function}
+     */
+    dropEventAction(datakey, selector) {
+        return function (event) {
+            event.preventDefault();
+
+            let draggedData = JSON.parse(event.dataTransfer.getData(datakey));
+            let draggedElement = document.querySelector(draggedData.selector);
+
+            let target = event.target
+                .closest(selector);
+
+            console.log("Default drop event");
+
+            //if (![...target.childNodes].includes(draggedElement)) {
+            target.appendChild(draggedElement);
+            //}
+        }
+    }
+};
+
+
+const DADInPlace = new DragAndDropImplementation();
+DADInPlace.dropEventAction = function (datakey, selector) {
+    /**
+     * @param {Event} event 
+     */
+    return function (event) {
+        event.preventDefault();
+
+        let draggedData = JSON.parse(event.dataTransfer.getData(datakey));
+        let draggedElement = document.querySelector(draggedData.selector);
+
+        let target = event.target
+            .closest(selector);
+
+        let dimsDraggedEl = new Dimensions()
+            .width(draggedElement.offsetWidth)
+            .height(draggedElement.offsetHeight);
+
+        let pagePoint = new TwoDimPoint(
+            event.clientX,
+            event.clientY
+        );
+
+        let parentPagePoint = new TwoDimPoint(
+            target.getBoundingClientRect().left,
+            target.getBoundingClientRect().top
+        );
+
+        draggedElement.style["width"] = dimsDraggedEl._fFirst + "px";
+        draggedElement.style["height"] = dimsDraggedEl._fSecond + "px";
+
+        // x page to relative is (parent-page), then -rel
+
+        let dropPosition = pagePoint
+            .minusTDP(parentPagePoint)
+            .minusTDP(draggedData.relDims);
+
+        draggedElement.style.position = "relative";
+        draggedElement.style.left = dropPosition.x + "px";
+        draggedElement.style.top = dropPosition.y + "px";
+        //if (![...target.childNodes].includes(draggedElement)) {
+        target.appendChild(draggedElement);
+        //}
+    }
 }
-const DADGroups = Object.freeze({
-    DEFAULT: new DragAndDropGroup(),
-});