@esfaenza/es-diagrams 12.2.8 → 12.2.12

package/bundles/esfaenza-es-diagrams.umd.js

@@ -938,7 +938,8 @@
         "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 */ var cytoscape$1 = cy___namespace;
@@ -986,7 +987,7 @@
                             return [3 /*break*/, 6];
                         case 1: return [2 /*return*/, import('cytoscape-cxtmenu').then(function (module) { return _this.modulesCache[moduleId] = module.default; }).catch(function (err) { return _this.handleError(moduleId, err); })];
                         case 2: return [2 /*return*/, import('cytoscape-expand-collapse').then(function (module) { return _this.modulesCache[moduleId] = module.default; }).catch(function (err) { return _this.handleError(moduleId, err); })];
-                        case 3: return [2 /*return*/, import('cytoscape-html-node').then(function (module) { return _this.modulesCache[moduleId] = module.register; }).catch(function (err) { return _this.handleError(moduleId, err); })];
+                        case 3: return [2 /*return*/, import('@esfaenza/cytoscape-html-node').then(function (module) { return _this.modulesCache[moduleId] = module.register; }).catch(function (err) { return _this.handleError(moduleId, err); })];
                         case 4: return [4 /*yield*/, import('dagre').catch(function (err) { return _this.handleError("dagre", err); })];
                         case 5:
                             _b.sent();
@@ -1296,6 +1297,27 @@
              * 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.
              *
@@ -1342,6 +1364,14 @@
              * Evento lanciato al click di un nodo, contiene l'oggetto **data** del nodo in questione
              */
             this.onNodeClick = new i0.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 i0.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 i0.EventEmitter();
             /**
              * Evento lanciato al termine del caricamento del diagramma
              */
@@ -1354,6 +1384,10 @@
              * 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
@@ -1408,6 +1442,8 @@
                 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
@@ -1452,12 +1488,42 @@
                             // 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();
                             return [2 /*return*/];
                     }
                 });
             });
         };
+        /**
+         * Prende tutti gli elementi appena assegnati, e se qualcuno era selezionato la situazione viene persistita su cytoscape
+         */
+        EsDiagramComponent.prototype.setupElementsSelectionIfNeeded = function () {
+            for (var i = 0; i < this.Elements.length; i++) {
+                var eldata = this.Elements[i].data;
+                if (eldata.__selected) {
+                    var el = this.cy.$id(eldata.id);
+                    el.select();
+                }
+            }
+        };
+        /**
+         * Carica gli stili per mostrare carina la selezione dei nodi
+         */
+        EsDiagramComponent.prototype.setupSelectionStyles = function () {
+            var 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
          */
@@ -1481,7 +1547,32 @@
         EsDiagramComponent.prototype.bindCytoscapeEvents = function () {
             var _this = this;
             this.cy.bind('click', 'node', function (event) {
-                _this.onNodeClick.emit({ data: event.target.data() });
+                var targetData = event.target.data();
+                if (_this.SmartSelection) {
+                    var id = targetData.id;
+                    var el = _this.cy.$id(id);
+                    var 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', function (event) {
+                var targetData = event.target.data();
+                _this.onNodeSelection.emit({ data: targetData, selected: true });
+            });
+            this.cy.bind('layoutstop', function (event) {
+                _this.onLayoutDone.emit();
+            });
+            this.cy.bind('unselect', 'node', function (event) {
+                var targetData = event.target.data();
+                _this.onNodeSelection.emit({ data: targetData, selected: false });
             });
             // Altri eventi...
         };
@@ -1551,8 +1642,8 @@
             }
             // Utilizzo dell'HTML node
             if (this.NodeHTMLTemplates && this.NodeHTMLTemplates.length > 0) {
-                var 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)
@@ -1564,6 +1655,13 @@
             if (this.ExtensionModulesApplyer)
                 this.ExtensionModulesApplyer(this.cy);
         };
+        EsDiagramComponent.prototype.updateCardData = function () {
+            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
          *
@@ -1680,12 +1778,16 @@
         AutoupdateSize: [{ type: i0.Input }],
         PreserveElementsPosition: [{ type: i0.Input }],
         AnimateLayoutChanges: [{ type: i0.Input }],
+        SmartSelection: [{ type: i0.Input }],
+        SmartSelectionStyles: [{ type: i0.Input }],
         ResizeThrottleTime: [{ type: i0.Input }],
         Layout: [{ type: i0.Input }],
         NodeHTMLTemplates: [{ type: i0.Input }],
         ExtensionModulesImporter: [{ type: i0.Input }],
         ExtensionModulesApplyer: [{ type: i0.Input }],
         onNodeClick: [{ type: i0.Output }],
+        onNodeSelection: [{ type: i0.Output }],
+        onLayoutDone: [{ type: i0.Output }],
         onLoaded: [{ type: i0.Output }]
     };