Fixed event handlers, and changed them to jQuery

Assets/StreamingAssets/ScrollView_Server/build/Drop_facts.js

 "use strict";
-/**
- * @typedef point
- * @type {object}
- * @property {number} x
- * @property {number} y
- * @property {number} z
- */
-/**
- * @typedef {Object} fact
- * @property {string} id Fact id
- * @property {string} s_type Fact type
- * @property {string} label used in unity
- * @property {string | null} _CustomLabel Custom label
- * @property {boolean} hasCustomLabel
- * @property {number} labelId
- */
-/**
- * @property {Point} point
- * @property {Point} normal
- * @property {string} s_type
- * @property {string} label
- * @property {string|null} _CustomLabel
- * @property {boolean} hasCustomLabel
- * @property {number} labelId
- */
-var assignment;
-/** @param {DragEvent} event  */
 function dropHandler(event) {
     // ignore 
-    if (event.dataTransfer === null
-        || event.target === null
-        || !(event.target instanceof HTMLElement)) {
+    console.log("dropHandler", event);
+    if (event.originalEvent === undefined
+        || event.originalEvent.dataTransfer === null
+        || event.target === undefined
+        || !(event.target instanceof HTMLElement
+            || event.target instanceof MathMLElement)) {
         console.log("Ignored illegal DragEvent");
         return;
     }
     event.preventDefault();
-    console.log("dropHandler", event);
-    const data = event.dataTransfer.getData("application/json");
+    const data = event.originalEvent.dataTransfer;
     //const data = event.dataTransfer.getData("text/plain")
-    console.log(`Dropped data: '${event.dataTransfer.types}'`, event.dataTransfer.types);
-    const fact = JSON.parse(data);
+    console.log(`Dropped data: '${data.types}'`, data.types);
+    const fact = JSON.parse(data.getData("application/json"));
     console.warn(`Dropped Fact '${fact.label}':`, fact);
     const target = event.target;
     if (target.dataset.allowedTypes !== undefined) {
@@ -65,26 +40,25 @@ function dropHandler(event) {
 }
 /** @param {MouseEvent} event  */
 function clickHandler(event) {
-    // ignore 
-    if (event.target == null
-        || !(event.target instanceof HTMLElement)) {
-        console.warn("Ignored illegal DragEvent");
+    // ignore. Cannot happen if the event is triggered normally
+    console.log("clickHandler", event);
+    if (!(event.target instanceof HTMLElement
+        || event.target instanceof MathMLElement)) {
+        console.warn("Ignored illegal ClickEvent");
         return;
     }
     event.preventDefault();
-    console.log("clickHandler");
-    console.log("clickHandler", event);
     const target = event.target;
-    switch (event.button) {
-        case 0:
+    switch (event.which) {
+        case 1:
             console.log("Left button clicked");
             target.dataset.factId = undefined;
             target.dispatchEvent(new Event("factUnassigned"));
             break;
-        case 1:
+        case 2:
             console.log("Middle button clicked");
             break;
-        case 2:
+        case 3:
             console.log("Right button clicked");
             if (target.dataset.slotId) {
                 getHint(target.dataset.slotId);
@@ -94,33 +68,30 @@ function clickHandler(event) {
             console.log("Unknown button clicked");
     }
 }
+/** register the drag event listener. Otherwise drop events don't work */
+document.addEventListener("dragover", ev => ev.preventDefault());
+/** select all dropzones and add drop event listeners */
+function addDropZoneEventListeners() {
+    console.log("addDropZoneEventListeners");
+    $('[dropzone="copy"]')
+        .on({
+        drop: dropHandler,
+        mousedown: clickHandler,
+        contextmenu: event => event.preventDefault()
+    });
+}
+//#region Commented out Archive
 /*
 * register the drag event listeners
 */
 //document.addEventListener("dragstart", ev => printHandler(ev, "DragStartEvent"))
 //document.addEventListener("dragenter", ev => printHandler(ev, "DragEnterEvent"))
 //document.addEventListener("drag", ev => printHandler(ev, "DragEvent"))
-document.addEventListener("dragover", ev => ev.preventDefault());
+//document.addEventListener("dragover", ev => ev.preventDefault())
 //document.addEventListener("dragover", ev => printPreventDefaultHandler(ev, "DragOverEvent"))
 //document.addEventListener("dragleave", ev => printHandler(ev, "DragLeaveEvent"))
 //document.addEventListener("dragend", ev => printHandler(ev, "DragEndEvent"))
 // select all dropzones and add drop event listeners
 //let dropZones = document.querySelectorAll('[dropzone="copy"]')
 //dropZones.forEach( dropZone => dropZone.addEventListener("drop", ev => dropHandler(ev, "DropEvent")) )
-/** select all dropzones and add drop event listeners */
-function addDropZoneEventListeners() {
-    console.log("addDropZoneEventListeners");
-    document.querySelectorAll('[dropzone="copy"]')
-        .forEach(dropZone => {
-        if (dropZone instanceof HTMLElement) {
-            dropZone.removeEventListener("drop", dropHandler);
-            dropZone.removeEventListener("click", clickHandler);
-            dropZone.removeEventListener("contextmenu", clickHandler);
-            //dropZone.addEventListener("dragover", ev => ev.preventDefault())
-            dropZone.addEventListener("drop", dropHandler);
-            dropZone.addEventListener("click", clickHandler);
-            dropZone.addEventListener("contextmenu", clickHandler);
-        }
-    });
-}
-//addDropZoneEventListeners()
+//#endregion Commented out Archive

Assets/StreamingAssets/ScrollView_Server/src/Drop_facts.ts

+function dropHandler(event: JQuery.DropEvent) {
     // ignore 
-    if (event.dataTransfer === null
-        || event.target === null
-        || !(event.target instanceof HTMLElement)) {
+    console.log("dropHandler", event)
+    if (event.originalEvent === undefined
+        || event.originalEvent.dataTransfer === null
+        || event.target === undefined
+        || !(event.target instanceof HTMLElement
+            || event.target instanceof MathMLElement)
+    ) {
         console.log("Ignored illegal DragEvent")
         return
     }
+
     event.preventDefault()
-    console.log("dropHandler", event)
+    const data = event.originalEvent.dataTransfer
 
-    const data = event.dataTransfer.getData("application/json")
+    
     //const data = event.dataTransfer.getData("text/plain")
-    console.log(`Dropped data: '${event.dataTransfer.types}'`, event.dataTransfer.types)
+    console.log(`Dropped data: '${data.types}'`, data.types)
 
-    const fact: Fact = JSON.parse(data)
+    const fact: Fact = JSON.parse(data.getData("application/json"))
     console.warn(`Dropped Fact '${fact.label}':`, fact)
 
-    const target: HTMLElement = event.target
+    const target = event.target
 
     if (target.dataset.allowedTypes !== undefined) {
         //const allowedTypesStr = element.dataset["allowed-types"]
@@ -44,27 +50,27 @@
 }
 
 /** @param {MouseEvent} event  */
-function clickHandler(event: MouseEvent) {
-    // ignore 
-    if (event.target == null
-        || !(event.target instanceof HTMLElement)) {
-        console.warn("Ignored illegal DragEvent")
+function clickHandler(event: JQuery.MouseDownEvent) {
+    // ignore. Cannot happen if the event is triggered normally
+    console.debug("clickHandler", event)
+    if (!(event.target instanceof HTMLElement
+            || event.target instanceof MathMLElement)
+    ) {
+        console.warn("Ignored illegal ClickEvent")
         return
     }
     event.preventDefault()
-    console.log("clickHandler")
-    console.log("clickHandler", event)
-    const target: HTMLElement = event.target
-    switch (event.button) {
-        case 0:
+    const target: MathMLElement = event.target
+    switch (event.which) {
+        case 1:
             console.log("Left button clicked")
             target.dataset.factId = undefined
             target.dispatchEvent(new Event("factUnassigned"))
             break
-        case 1:
+        case 2:
             console.log("Middle button clicked")
             break
-        case 2:
+        case 3:
             console.log("Right button clicked")
             if (target.dataset.slotId) {
                 getHint(target.dataset.slotId)
@@ -75,13 +81,30 @@ function clickHandler(event: MouseEvent) {
     }
 }
 
+/** register the drag event listener. Otherwise drop events don't work */
+document.addEventListener("dragover", ev => ev.preventDefault())
+
+/** select all dropzones and add drop event listeners */
+function addDropZoneEventListeners() {
+    console.log("addDropZoneEventListeners")
+    $('[dropzone="copy"]')
+        .on({
+            drop: dropHandler,
+            mousedown: clickHandler,
+            contextmenu: event => event.preventDefault()
+        })
+}
+
+declare function getHint(slotId: string): void;
+
+//#region Commented out Archive
 /*
 * register the drag event listeners
 */
 //document.addEventListener("dragstart", ev => printHandler(ev, "DragStartEvent"))
 //document.addEventListener("dragenter", ev => printHandler(ev, "DragEnterEvent"))
 //document.addEventListener("drag", ev => printHandler(ev, "DragEvent"))
-document.addEventListener("dragover", ev => ev.preventDefault())
+//document.addEventListener("dragover", ev => ev.preventDefault())
 //document.addEventListener("dragover", ev => printPreventDefaultHandler(ev, "DragOverEvent"))
 //document.addEventListener("dragleave", ev => printHandler(ev, "DragLeaveEvent"))
 //document.addEventListener("dragend", ev => printHandler(ev, "DragEndEvent"))
@@ -89,24 +112,4 @@ document.addEventListener("dragover", ev => ev.preventDefault())
 // select all dropzones and add drop event listeners
 //let dropZones = document.querySelectorAll('[dropzone="copy"]')
 //dropZones.forEach( dropZone => dropZone.addEventListener("drop", ev => dropHandler(ev, "DropEvent")) )
-
-/** select all dropzones and add drop event listeners */
-function addDropZoneEventListeners() {
-    console.log("addDropZoneEventListeners")
-    document.querySelectorAll('[dropzone="copy"]')
-        .forEach(dropZone => {
-            if (dropZone instanceof HTMLElement) {
-                dropZone.removeEventListener("drop", dropHandler)
-                dropZone.removeEventListener("click", clickHandler)
-                dropZone.removeEventListener("contextmenu", clickHandler)
-                //dropZone.addEventListener("dragover", ev => ev.preventDefault())
-                dropZone.addEventListener("drop", dropHandler)
-                dropZone.addEventListener("click", clickHandler)
-                dropZone.addEventListener("contextmenu", clickHandler)
-            }
-        })
-}
-
-declare function getHint(slotId: string): void;
-//addDropZoneEventListeners()
 //#endregion Commented out Archive

Assets/StreamingAssets/ScrollView_Server/src/SetScrollContent.ts

@@ -52,7 +52,9 @@ function RenderScroll() {
             .html(fact.label)
             .attr("data-allowed-types", fact.type)
     })
+    
     console.log('Scroll rendered', scroll.label.textContent)
+    addDropZoneEventListeners()
 }