@esfaenza/es-diagrams 12.2.8 → 12.2.12

package/fesm2015/esfaenza-es-diagrams.js

@@ -543,7 +543,8 @@ const Loc = {
     "is loaded and managed directly by this library. You don't need to import it or use it directly, just be sure to set the relative options": { "en-US": "is loaded and managed directly by this library. You don't need to import it or use it directly, just be sure to set the relative options", "it-IT": "viene caricato e gestito nativamente dalla libreria. Non c'è bisogno di reimportarlo, né di configurarlo (usare le opzioni specifiche)" },
     "If you don't specify a source and a target for an edge you have to write its id in the format {source}-{target}": { "en-US": "If you don't specify a source and a target for an edge you have to write its id in the format {source}-{target}", "it-IT": "Se non è specificata una sorgente e una destinazione per il collegamento è opportuno scriverne l'id nel formato {sorgente}-{destinazione}" },
     "Elements have been changed after diagram initialization": { "en-US": "Elements have been changed after diagram initialization", "it-IT": "Rilevato un cambio di Elementi dopo l'inizializzazione del Diagramma" },
-    "Layout have been changed after diagram initialization": { "en-US": "Layout have been changed after diagram initialization", "it-IT": "Rilevato un cambio di Layout dopo l'inizializzazione del Diagramma" }
+    "Layout have been changed after diagram initialization": { "en-US": "Layout have been changed after diagram initialization", "it-IT": "Rilevato un cambio di Layout dopo l'inizializzazione del Diagramma" },
+    "Cannot update NodeHTMLTemplates as they don't seem to be used": { "en-US": "Cannot update NodeHTMLTemplates as they don't seem to be used", "it-IT": "Impossibile aggiornare i NodeHTMLTemplates dato che non sembra siano utilizzati" }
 };
 
 /** @ignore */ const cytoscape$1 = cy_;
@@ -581,7 +582,7 @@ class EsDiagramService {
                 switch (moduleId) {
                     case "cytoscape-cxtmenu": return import('cytoscape-cxtmenu').then((module) => this.modulesCache[moduleId] = module.default).catch(err => this.handleError(moduleId, err));
                     case "cytoscape-expand-collapse": return import('cytoscape-expand-collapse').then((module) => this.modulesCache[moduleId] = module.default).catch(err => this.handleError(moduleId, err));
-                    case "cytoscape-html-node": return import('cytoscape-html-node').then((module) => this.modulesCache[moduleId] = module.register).catch(err => this.handleError(moduleId, err));
+                    case "cytoscape-html-node": return import('@esfaenza/cytoscape-html-node').then((module) => this.modulesCache[moduleId] = module.register).catch(err => this.handleError(moduleId, err));
                     case "cytoscape-dagre":
                         yield import('dagre').catch(err => this.handleError("dagre", err));
                         return import('cytoscape-dagre').then((module) => this.modulesCache[moduleId] = module.default).catch(err => this.handleError(moduleId, err));
@@ -880,6 +881,27 @@ class EsDiagramComponent {
          * Funziona solamente se il **Layout** corrente del diagramma supporta le animazioni
          */
         this.AnimateLayoutChanges = true;
+        /**
+         * Attiva una modalità di selezione "smart"... o perlomeno "smarter" del default di Cytoscape.
+         *
+         * - Il click di un elemento non selezionato lo seleziona
+         * - Il click di un elemento selezionato lo deseleziona
+         * - Lo stato di selezione viene persistito sull'oggetto originale invece di rimanere in un internal
+         * - All'assegnazione di oggetti selezionati, questi vengono marcati correttamente con l'overlay di selezione
+         *
+         * N.B: la chiamata all'evento **onNodeClick** avviene **DOPO** la gestione della selezione
+         */
+        this.SmartSelection = false;
+        /**
+         * CSS per la graficazione della selezione dei nodi. Quando un nodo verrà selezionato avrà sopra di se un overlay che 'sborda' di **overlay-padding** pixel,
+         * di colore **overlay-color** e con un opacità **overlay-opacity**
+         *
+         * Assegnando "{}" a questo input, la Smart selection viene gestita ma la gestione grafica è affidata all'utente,
+         * ad esempio usando dei **NodeHTMLTemplates** che definiscano selettori su nodi ":selected"
+         *
+         * @default {'overlay-color':'blue','overlay-opacity':0.5,'overlay-padding':7}
+         */
+        this.SmartSelectionStyles = null;
         /**
          * Periodo di throttle da quando viene effettuato un resize a quando ricalcolare le dimensioni del diagramma.
          *
@@ -926,6 +948,14 @@ class EsDiagramComponent {
          * Evento lanciato al click di un nodo, contiene l'oggetto **data** del nodo in questione
          */
         this.onNodeClick = new EventEmitter();
+        /**
+         * Evento lanciato alla selezione o deselezione di un nodo, contiene l'oggetto **data** del nodo in questione e informazioni sul suo stato di selezione
+         */
+        this.onNodeSelection = new EventEmitter();
+        /**
+         * Evento lanciato al termine del Layouting. Se si vuole eseguire codice dopo che il Layout è fatto e completamente graficato, questo è il punto
+         */
+        this.onLayoutDone = new EventEmitter();
         /**
          * Evento lanciato al termine del caricamento del diagramma
          */
@@ -938,6 +968,10 @@ class EsDiagramComponent {
          * Api dell'estensione expand-collapse per permettere di effettuare operazioni dall'esterno del diagramma. Vengono valorizzate se **UseExpandCollapse** è **true**
          */
         this.ExpandCollapseApi = null;
+        /**
+         * Api dell'estensione html-node per permettere di effettuare operazioni dall'esterno del diagramma. Vengono valorizzate se sono impostati dei **NodeHTMLTemplates**
+         */
+        this.HtmlNodeApi = null;
     }
     /**
      * @ignore
@@ -991,6 +1025,8 @@ class EsDiagramComponent {
             if (elements && elements.length && elements.length > 0) {
                 this.reviewCytoscapeElements(elements, previous_elements);
                 this.cy.add(elements);
+                if (this.SmartSelection)
+                    this.setupElementsSelectionIfNeeded();
                 // Se solo gli elementi cambiano, riapplico il Layout precedente
                 if (!layoutChanges && this.LastLayout) {
                     // Se devo animare le modifche al layout forzo il parametro relativo
@@ -1029,9 +1065,39 @@ class EsDiagramComponent {
             // Se devo aggiornare in automatico in base alla dimensione del contenitore collego il ResizeObserver
             if (this.AutoupdateSize)
                 this.listenOnChanges();
+            if (this.SmartSelection) {
+                this.setupSelectionStyles();
+                this.setupElementsSelectionIfNeeded();
+            }
             this.onLoaded.emit();
         });
     }
+    /**
+     * Prende tutti gli elementi appena assegnati, e se qualcuno era selezionato la situazione viene persistita su cytoscape
+     */
+    setupElementsSelectionIfNeeded() {
+        for (let i = 0; i < this.Elements.length; i++) {
+            let eldata = this.Elements[i].data;
+            if (eldata.__selected) {
+                let el = this.cy.$id(eldata.id);
+                el.select();
+            }
+        }
+    }
+    /**
+     * Carica gli stili per mostrare carina la selezione dei nodi
+     */
+    setupSelectionStyles() {
+        let cssItem = this.SmartSelectionStyles || {
+            'overlay-color': 'blue',
+            'overlay-opacity': 0.5,
+            'overlay-padding': 7
+        };
+        // Backdoor per poter assegnare "{}" a SmartSelectionStyles in modo di utilizzare la smart selection ma senza che nessuno stile venga applicato
+        // ad esempio qualora si volesse utilizzare l'htmlnode per gestire la grafica degli elementi selezionati
+        if (cssItem['overlay-color'] && cssItem['overlay-opacity'] && cssItem['overlay-padding'])
+            this.cy.style().selector('node:selected').css(cssItem);
+    }
     /**
      * Registra l'ascolto al contenitore del grafico e in caso di modifiche alla dimensione, al massimo una volta ogni 500 millisecondi, lo ridisegna
      */
@@ -1053,7 +1119,32 @@ class EsDiagramComponent {
      */
     bindCytoscapeEvents() {
         this.cy.bind('click', 'node', (event) => {
-            this.onNodeClick.emit({ data: event.target.data() });
+            let targetData = event.target.data();
+            if (this.SmartSelection) {
+                let id = targetData.id;
+                let el = this.cy.$id(id);
+                let selected = el.selected();
+                el.selectify();
+                if (selected)
+                    el.unselect();
+                else
+                    el.select();
+                el.unselectify();
+                // Questo va anche nella lista degli elementi originali (this.Elements) dato che cytoscape li prende per riferimento (bbbbbravo cyto-chan)
+                el.data("__selected", !selected);
+            }
+            this.onNodeClick.emit({ data: targetData });
+        });
+        this.cy.bind('select', 'node', (event) => {
+            let targetData = event.target.data();
+            this.onNodeSelection.emit({ data: targetData, selected: true });
+        });
+        this.cy.bind('layoutstop', (event) => {
+            this.onLayoutDone.emit();
+        });
+        this.cy.bind('unselect', 'node', (event) => {
+            let targetData = event.target.data();
+            this.onNodeSelection.emit({ data: targetData, selected: false });
         });
         // Altri eventi...
     }
@@ -1098,8 +1189,8 @@ class EsDiagramComponent {
         }
         // Utilizzo dell'HTML node
         if (this.NodeHTMLTemplates && this.NodeHTMLTemplates.length > 0) {
-            let htmlnode = anyCy.htmlnode();
-            htmlnode.createHtmlNode(cytoscape, this.cy, this.NodeHTMLTemplates);
+            this.HtmlNodeApi = anyCy.htmlnode();
+            this.HtmlNodeApi.createHtmlNode(cytoscape, this.cy, this.NodeHTMLTemplates);
         }
         // Utilizzo del Context Menu
         if (this.UseContextMenu)
@@ -1111,6 +1202,13 @@ class EsDiagramComponent {
         if (this.ExtensionModulesApplyer)
             this.ExtensionModulesApplyer(this.cy);
     }
+    updateCardData() {
+        if (!this.HtmlNodeApi) {
+            this.service.log("E", "Cannot update NodeHTMLTemplates as they don't seem to be used");
+            return;
+        }
+        this.HtmlNodeApi.update();
+    }
     /**
      * Metodo interno per il caricamento dei moduli di estensione
      *
@@ -1218,12 +1316,16 @@ EsDiagramComponent.propDecorators = {
     AutoupdateSize: [{ type: Input }],
     PreserveElementsPosition: [{ type: Input }],
     AnimateLayoutChanges: [{ type: Input }],
+    SmartSelection: [{ type: Input }],
+    SmartSelectionStyles: [{ type: Input }],
     ResizeThrottleTime: [{ type: Input }],
     Layout: [{ type: Input }],
     NodeHTMLTemplates: [{ type: Input }],
     ExtensionModulesImporter: [{ type: Input }],
     ExtensionModulesApplyer: [{ type: Input }],
     onNodeClick: [{ type: Output }],
+    onNodeSelection: [{ type: Output }],
+    onLayoutDone: [{ type: Output }],
     onLoaded: [{ type: Output }]
 };