fix: ctxMenu réactivité Alpine — réassignation complète au lieu de propriétés
Alpine ne détecte pas les changements sur les propriétés imbriquées
d'un objet (ctxMenu.visible = true). Il faut réassigner l'objet entier:
this.ctxMenu = {visible:true, x:..., y:..., node:..., tags:...}
Impact: onContextMenu (show), ctxMenuOpenPage/OpenFolder/Rename/Duplicate/Delete (hide)
+ repositionnement dans nextTick
This commit is contained in:
@@ -746,16 +746,19 @@ window._wsInitData = (function() {
|
|||||||
onContextMenu(ev) {
|
onContextMenu(ev) {
|
||||||
console.log('onContextMenu fired', ev.clientX, ev.clientY);
|
console.log('onContextMenu fired', ev.clientX, ev.clientY);
|
||||||
var el = ev.target.closest('[data-ws-id]');
|
var el = ev.target.closest('[data-ws-id]');
|
||||||
if (!el) { this.ctxMenu.visible = false; return; }
|
if (!el) { this.ctxMenu = {visible:false,x:0,y:0,node:null,tags:[]}; return; }
|
||||||
var id = parseInt(el.getAttribute('data-ws-id'));
|
var id = parseInt(el.getAttribute('data-ws-id'));
|
||||||
if (!id) { this.ctxMenu.visible = false; return; }
|
if (!id) { this.ctxMenu = {visible:false,x:0,y:0,node:null,tags:[]}; return; }
|
||||||
var node = this._findNodeById(this.displayTree, id);
|
var node = this._findNodeById(this.displayTree, id);
|
||||||
if (!node) { this.ctxMenu.visible = false; return; }
|
if (!node) { this.ctxMenu = {visible:false,x:0,y:0,node:null,tags:[]}; return; }
|
||||||
this.ctxMenu.visible = true;
|
// Reassign whole object for Alpine reactivity
|
||||||
this.ctxMenu.x = ev.clientX;
|
this.ctxMenu = {
|
||||||
this.ctxMenu.y = ev.clientY;
|
visible: true,
|
||||||
this.ctxMenu.node = node;
|
x: ev.clientX,
|
||||||
this.ctxMenu.tags = [...(node.tags||[])];
|
y: ev.clientY,
|
||||||
|
node: node,
|
||||||
|
tags: [...(node.tags||[])]
|
||||||
|
};
|
||||||
this.ctxTagAdding = false;
|
this.ctxTagAdding = false;
|
||||||
this.ctxTagExistingOpen = false;
|
this.ctxTagExistingOpen = false;
|
||||||
this.ctxNewTagColor = '#787774';
|
this.ctxNewTagColor = '#787774';
|
||||||
@@ -775,8 +778,8 @@ window._wsInitData = (function() {
|
|||||||
if (y + rect.height > window.innerHeight - 4) y = window.innerHeight - rect.height - 4;
|
if (y + rect.height > window.innerHeight - 4) y = window.innerHeight - rect.height - 4;
|
||||||
if (x < 4) x = 4;
|
if (x < 4) x = 4;
|
||||||
if (y < 4) y = 4;
|
if (y < 4) y = 4;
|
||||||
self.ctxMenu.x = x;
|
// Reassign for reactivity
|
||||||
self.ctxMenu.y = y;
|
self.ctxMenu = {visible:true, x:x, y:y, node:self.ctxMenu.node, tags:self.ctxMenu.tags};
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -826,24 +829,24 @@ window._wsInitData = (function() {
|
|||||||
|
|
||||||
ctxMenuOpenPage() {
|
ctxMenuOpenPage() {
|
||||||
if (this.ctxMenu.node) this.openPage(this.ctxMenu.node.id);
|
if (this.ctxMenu.node) this.openPage(this.ctxMenu.node.id);
|
||||||
this.ctxMenu.visible = false;
|
this.ctxMenu = {visible:false,x:0,y:0,node:null,tags:[]};
|
||||||
},
|
},
|
||||||
|
|
||||||
ctxMenuOpenFolder() {
|
ctxMenuOpenFolder() {
|
||||||
if (this.ctxMenu.node) this.navigateToFolder(this.ctxMenu.node.id);
|
if (this.ctxMenu.node) this.navigateToFolder(this.ctxMenu.node.id);
|
||||||
this.ctxMenu.visible = false;
|
this.ctxMenu = {visible:false,x:0,y:0,node:null,tags:[]};
|
||||||
},
|
},
|
||||||
|
|
||||||
ctxMenuRename() {
|
ctxMenuRename() {
|
||||||
if (this.ctxMenu.node) { this.startRename(this.ctxMenu.node); this.ctxMenu.visible = false; }
|
if (this.ctxMenu.node) { this.startRename(this.ctxMenu.node); this.ctxMenu = {visible:false,x:0,y:0,node:null,tags:[]}; }
|
||||||
},
|
},
|
||||||
|
|
||||||
ctxMenuDuplicate() {
|
ctxMenuDuplicate() {
|
||||||
if (this.ctxMenu.node) { this.duplicateItem(this.ctxMenu.node); this.ctxMenu.visible = false; }
|
if (this.ctxMenu.node) { this.duplicateItem(this.ctxMenu.node); this.ctxMenu = {visible:false,x:0,y:0,node:null,tags:[]}; }
|
||||||
},
|
},
|
||||||
|
|
||||||
ctxMenuDelete() {
|
ctxMenuDelete() {
|
||||||
if (this.ctxMenu.node) { this.deleteWithUndo(this.ctxMenu.node); this.ctxMenu.visible = false; }
|
if (this.ctxMenu.node) { this.deleteWithUndo(this.ctxMenu.node); this.ctxMenu = {visible:false,x:0,y:0,node:null,tags:[]}; }
|
||||||
},
|
},
|
||||||
|
|
||||||
ctxRemoveTag(tagId) {
|
ctxRemoveTag(tagId) {
|
||||||
|
|||||||
Reference in New Issue
Block a user