时间戳

首页 > 解决方案 > 设置顶点值时属性丢失

angular - 设置顶点值时属性丢失

问题描述

我有一些顶点，我需要根据从服务器定期更新的数据以编程方式更新其值。首先顶点是这样创建的：

  const doc = (<any>window).mxUtils.createXmlDocument();
      var node = doc.createElement('kw');
      node.setAttribute(AppSettings.SINGLE_LINE_DIAGRAM_ATTRIBUTES.KEY, treeItem.tag.key.value);
      node.setAttribute(AppSettings.SINGLE_LINE_DIAGRAM_ATTRIBUTES.TYPE, treeItem.tag.key.type);
      node.setAttribute(AppSettings.SINGLE_LINE_DIAGRAM_ATTRIBUTES.MEASUREMENT_TYPE, measurementType);
      node.setAttribute(AppSettings.SINGLE_LINE_DIAGRAM_ATTRIBUTES.FIELD_NAME, fieldType);
      node.setAttribute(AppSettings.SINGLE_LINE_DIAGRAM_ATTRIBUTES.CELL_TYPE, 'label');

    try {
      const parent = this.graph.getDefaultParent();
      this.graph.getModel().beginUpdate();
      const vertex = this.graph.insertVertex(parent, uuid.v4(), node, 50, 50, 80, 40,"text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;editable=0;",''); 
    } finally {
      this.graph.getModel().endUpdate();
    }

然后，我需要使用来自服务器的数据更新值，我这样做：我从字典中获取单元格，然后更新它：

const value = this.getCellValue(item);
this.graph.model.setValue(cell, value);

唉! 单元格失去其所有属性。向服务器发出新请求所需的信息（如密钥）。

我将不胜感激任何帮助。

标签： angularangular7mxgraph

解决方案

我找到了解决方案。我用过这个链接。
我已经使用这个项目开始了我的项目。

我创建了一个继承自 mxgraph 覆盖 convertValueToString 和 cellLabelChanged 的​​类。

export class myMxGraph extends mxGraph
{
    convertValueToString(cell:mxCell)
    {
        if ((<any>window).mxUtils.isNode(cell.value))
        {
            return cell.getAttribute('label', '')
        }
    }


cellLabelChanged(cell, newValue, autoSize)
{
  if ((<any>window).mxUtils.isNode(cell.value))
  {
    // Clones the value for correct undo/redo
    var elt = cell.value.cloneNode(true);
    elt.setAttribute('label', newValue);
    newValue = elt;
  }

  super.cellLabelChanged(cell, newValue,autoSize);
};


}

如何使用它：

import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
import beautify from 'xml-beautifier';
import { myMxGraph } from './myMxGraph';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements AfterViewInit {

      @ViewChild('graphContainer') graphContainer: ElementRef;
      vertexCreated = false;
      graph: myMxGraph;
      vertex:mxCell;
      jsonText = "";
      ngAfterViewInit() {
        this.graph = new myMxGraph(this.graphContainer.nativeElement);
      }


    createNewVertex(): void {

      const itemStyle = "";
      const doc = (<any>window).mxUtils.createXmlDocument();
      var node = doc.createElement('vertex');
      node.setAttribute('type', 'aaaa');

      try {
        const parent = this.graph.getDefaultParent();
        this.graph.getModel().beginUpdate();
        this.vertex = this.graph.insertVertex(parent, "uuid.v4()", node, 50, 50, 30, 80,itemStyle,'');
        this.vertex.setAttribute('label', 'Vertex');
      } finally {
        this.graph.getModel().endUpdate();
      }
      this.vertexCreated = true;
    }


    updateInput()
    {
      var encoder = new (<any>window).mxCodec();
      var node = encoder.encode(this.graph.getModel());
      this.jsonText =   beautify((<any>window).mxUtils.getXml(node));
    }


    updateVertex()
    {
      try {
        this.graph.getModel().beginUpdate();
        this.vertex.value.setAttribute('label','yael');
        const color = '#ff69b4';
                const style = this.vertex.getStyle();
                var styleArr = style.split(';')

                var styleArr = style.split(';');
                var res = styleArr.filter(function (value) { 
                    return !value.includes('strokeColor'); 
                  });
                  res.unshift( 'strokeColor='+ color);
                  this.vertex.setStyle(res.join(';'));
        this.graph.refresh(this.vertex);
        }
        finally
        {
          this.graph.getModel().endUpdate();
        }
    }

    }

这样，即使在标签更改后，mxcell 也是克隆 xml 节点的一部分，因此属性不会丢失。

推荐阅读