From 96877abde659d540046db6ee58c2522c069fb876 Mon Sep 17 00:00:00 2001 From: nathan Date: Thu, 4 Jul 2024 13:28:14 -0600 Subject: [PATCH] Tree / Action changes - Remove dragover action handling, it takes too much time and we do nothing with it (use dragenter) - Fix unregistering actions did not remove eventListeners - Fix multiple binding of actions in Et2Tree --- api/js/egw_action/EgwActionObjectInterface.ts | 1 + .../egw_action/EgwDropActionImplementation.ts | 25 ++++++++------- .../egw_action/egwDragActionImplementation.ts | 31 ++++++++++++++----- api/js/etemplate/Et2Tree/Et2Tree.ts | 1 - 4 files changed, 39 insertions(+), 19 deletions(-) diff --git a/api/js/egw_action/EgwActionObjectInterface.ts b/api/js/egw_action/EgwActionObjectInterface.ts index 93f857a4c8..db83621dcd 100644 --- a/api/js/egw_action/EgwActionObjectInterface.ts +++ b/api/js/egw_action/EgwActionObjectInterface.ts @@ -23,6 +23,7 @@ export interface EgwActionObjectInterface { //properties id?:string _state: number; + handlers : { [type : string]? : [{ type : string, listener : Function }] }; stateChangeCallback: Function; stateChangeContext: any; reconnectActionsCallback: Function; diff --git a/api/js/egw_action/EgwDropActionImplementation.ts b/api/js/egw_action/EgwDropActionImplementation.ts index b40f8a3b82..4af5056fe0 100644 --- a/api/js/egw_action/EgwDropActionImplementation.ts +++ b/api/js/egw_action/EgwDropActionImplementation.ts @@ -9,7 +9,7 @@ */ import {EgwActionImplementation} from "./EgwActionImplementation"; -import {EGW_AI_DRAG_ENTER, EGW_AI_DRAG_OUT, EGW_AI_DRAG_OVER, EGW_AO_EXEC_THIS} from "./egw_action_constants"; +import {EGW_AI_DRAG_ENTER, EGW_AI_DRAG_OUT, EGW_AO_EXEC_THIS} from "./egw_action_constants"; import {egw_getObjectManager} from "./egw_action"; import {getPopupImplementation} from "./EgwPopupActionImplementation"; @@ -24,21 +24,17 @@ export class EgwDropActionImplementation implements EgwActionImplementation { const node = _aoi.getDOMNode() && _aoi.getDOMNode()[0] ? _aoi.getDOMNode()[0] : _aoi.getDOMNode(); const self:EgwDropActionImplementation = this; if (node) { - node.classList.add('et2dropzone'); + if(typeof _aoi.handlers == "undefined") + { + _aoi.handlers = {}; + } + _aoi.handlers[this.type] = []; + node.classList.add('et2dropzone'); const dragover = (event)=> { if (event.preventDefault) { event.preventDefault(); } - if (!this.getTheDraggedDOM()) return; - - const data = { - event: event, - ui: this.getTheDraggedData() - }; - _aoi.triggerEvent(EGW_AI_DRAG_OVER, data); - return true; - }; const dragenter = function (event) { @@ -192,12 +188,16 @@ export class EgwDropActionImplementation implements EgwActionImplementation { // DND Event listeners node.addEventListener('dragover', dragover, false); + _aoi.handlers[this.type].push({type: 'dragover', listener: dragover}); node.addEventListener('dragenter', dragenter, false); + _aoi.handlers[this.type].push({type: 'dragenter', listener: dragenter}); node.addEventListener('drop', drop, false); + _aoi.handlers[this.type].push({type: 'drop', listener: drop}); node.addEventListener('dragleave', dragleave, false); + _aoi.handlers[this.type].push({type: 'dragleave', listener: dragleave}); return true; } @@ -210,6 +210,9 @@ export class EgwDropActionImplementation implements EgwActionImplementation { if (node) { node.classList.remove('et2dropzone'); } + // Unregister handlers + _aoi.handlers[this.type]?.forEach(h => node.removeEventListener(h.type, h.listener)); + delete _aoi.handlers[this.type]; return true; }; diff --git a/api/js/egw_action/egwDragActionImplementation.ts b/api/js/egw_action/egwDragActionImplementation.ts index dcf099f48d..53d3709437 100644 --- a/api/js/egw_action/egwDragActionImplementation.ts +++ b/api/js/egw_action/egwDragActionImplementation.ts @@ -129,7 +129,12 @@ export class EgwDragActionImplementation implements EgwActionImplementation { const node = _aoi.getDOMNode() && _aoi.getDOMNode()[0] ? _aoi.getDOMNode()[0] : _aoi.getDOMNode(); if (node) { - // Prevent selection + if(typeof _aoi.handlers == "undefined") + { + _aoi.handlers = {}; + } + _aoi.handlers[this.type] = []; + // Prevent selection node.onselectstart = function () { return false; }; @@ -150,19 +155,26 @@ export class EgwDragActionImplementation implements EgwActionImplementation { //jQuery(node).off("mousedown",egwPreventSelect) //et2_dataview_view_aoi binds mousedown event in et2_dataview_rowAOI to "egwPreventSelect" function from egw_action_common via addEventListener //node.removeEventListener("mousedown",egwPreventSelect) - node.addEventListener("mousedown", (event) => { + const mousedown = (event) => + { if (_context.isSelection(event)) { node.setAttribute("draggable", false); } else if (event.which != 3) { document.getSelection().removeAllRanges(); } - }) - node.addEventListener("mouseup", (event) => { + }; + node.addEventListener("mousedown", mousedown) + _aoi.handlers[this.type].push({type: 'mousedown', listener: mousedown}); + + const mouseup = (event) => + { node.setAttribute("draggable", true); - // Set cursor back to auto. Seems FF can't handle cursor reversion - document.body.style.cursor = 'auto' - }) + // Set cursor back to auto. Seems FF can't handle cursor reversion + document.body.style.cursor = 'auto' + }; + node.addEventListener("mouseup", mouseup) + _aoi.handlers[this.type].push({type: 'mousedown', listener: mousedown}); node.setAttribute('draggable', true); @@ -280,7 +292,9 @@ export class EgwDragActionImplementation implements EgwActionImplementation { // Drag Event listeners node.addEventListener('dragstart', dragstart, false); + _aoi.handlers[this.type].push({type: 'dragstart', listener: dragstart}); node.addEventListener('dragend', dragend, false); + _aoi.handlers[this.type].push({type: 'dragend', listener: dragend}); return true; @@ -294,6 +308,9 @@ export class EgwDragActionImplementation implements EgwActionImplementation { if (node) { node.setAttribute('draggable', "false"); } + // Unregister handlers + _aoi.handlers[this.type]?.forEach(h => node.removeEventListener(h.type, h.listener)); + delete _aoi.handlers[this.type]; return true; }; diff --git a/api/js/etemplate/Et2Tree/Et2Tree.ts b/api/js/etemplate/Et2Tree/Et2Tree.ts index 341197ab6e..dd9a77c3ac 100644 --- a/api/js/etemplate/Et2Tree/Et2Tree.ts +++ b/api/js/etemplate/Et2Tree/Et2Tree.ts @@ -351,7 +351,6 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) if(new_options?.length) { this._selectOptions = new_options; - this.updateComplete.then(()=>this._link_actions(this.actions)) } }