mxGraphNodeProperties.js

/**
 * Adds the label menu items to the given menu and parent.
 */
NodePropertiesPanel.prototype.addProperties = function () {
 var ui = this.editorUi;
 var editor = ui.editor;
 var graph = editor.graph;
 var self = this;
 var cellLabel = null;
 var propertiesAPI = null;

 if (graph.isEnabled()) {

  var cell = graph.getSelectionCell();
  var cells = graph.getSelectionCells();

  // Multiple cell selection (Hide properties)
  if (cells.length > 1){
   vueApp.isObjectSelected = false;
   vueApp.activeNodeLabel = 'Not Available';
   return true;
  }

  /**
   * Add prefix label to cell
   */
  if (typeof cell.getValue() !== 'undefined'){

   vueApp.isNodeSelected = false;

   // If selection cell is not an edge (connector)
   if (cell.edge === false) {
    graph.getModel().beginUpdate();
    cellLabel = cell.nodeid + cell.getId();
    cell.setValue(cellLabel);
    graph.getModel().endUpdate();
    graph.refresh();
   }

  }

  // Set active node label on sidebar title
  if (cell.edge === false){
   vueApp.activeNodeLabel = 'Properties: ' + cell.getValue();
  } else {
   vueApp.activeNodeLabel = 'Connector';
  }

  /**
   * Set selected node ID for properties mutation
   */
  vueApp.selectedNodeId = cell.getId();

  /**
   * Check if we have persisted properties
   * if not than we load properties from API
   */
  if (typeof cell.data === 'undefined'){
   propertiesAPI = CTAPI.defaultPropertiesJSON;

   // Check if selected object is cell or edge
   if (cell.edge === true) {


    /**
     * We have to clone edge (connection) properties for
     * each and every connection since its not defined
     * separately for each edge (connection) within
     * the default properties JSON
     */
    propertiesAPI = JSON.parse(JSON.stringify(propertiesAPI['edge']));

   } else {
    // Extract properties for nodeid
    propertiesAPI = JSON.parse(JSON.stringify(propertiesAPI[cell.nodeid]));
   }

  } else {
   // We have persisted properties so load them
   propertiesAPI = JSON.parse(JSON.stringify(cell.data['value']));
  }

  // Edge = TRUE means we're dealing with connectors
  if (cell.edge === true){

   // Check if source and target are set for edge
   if (cell.source !== null && cell.target !== null){
    //vueApp.properties = propertiesAPI;
    vueApp.properties[cell.id] = propertiesAPI;

    // Pass options
    vueApp.properties[cell.id][0]['options'] = this.parseInterfaces(cell.source.data['value']);
    vueApp.properties[cell.id][1]['options'] = this.parseInterfaces(cell.target.data['value']);

    // Pass labels
    vueApp.properties[cell.id][0]['label'] = cell.source.value;
    vueApp.properties[cell.id][1]['label'] = cell.target.value;

    vueApp.isObjectSelected = true;

    cell.data = new CustomData(vueApp.properties[cell.id]);
   }
  } else {
   vueApp.properties[cell.id] = propertiesAPI;
   vueApp.isObjectSelected = true;

   // We have to update filteredTopologyStatus as well over here
   // to make sure it matches the exact selected node status
   var clusterProvisioned = vueApp.getClusterStatus('provisioned');

   if (clusterProvisioned === true){

    try{
     // Clone the object
     var tempTopologyStatus = JSON.parse(JSON.stringify(vueApp.topologyStatus));

     // Get toplogy status properties
     vueApp.filteredTopologyStatus = tempTopologyStatus[cell.value];
    } finally {

    }

   } else {
    vueApp.filteredTopologyStatus = null;
   }
   
   cell.data = new CustomData(vueApp.properties[cell.id]);
  }

 } else {

  vueApp.selectedNodeId = -1;
  vueApp.isObjectSelected = false;
  vueApp.activeNodeLabel = 'Not Available';
 }

 return true;

};