graph/graphComponent 的 JGraphX 新初始化未按预期工作并导致伪影

Question

您好，我正在使用 JGraphX 构建某种基于 Java swing 的图形编辑器应用程序。一般情况下，该应用程序工作正常并且按预期正常运行情况。一般来说，我有一个名为 Editor 的 class，它包含图形的所有基本声明，如下面的代码示例所示。

正在初始化图并重写它的一些方法

public class Editor extends JFrame implements Serializable {
Handler handler;
JTabbedPane tabPane;
mxGraphComponent graphComponent;
EntityDataTable dataTable;

protected static mxGraph graph = new mxGraph() {

    // Overrides method to disallow edge label editing
    public boolean isCellEditable(Object cell) {
        if (cell instanceof mxCell) {
            mxCell c = (mxCell) cell;
            if (c.isEdge()) {
                return false;
            } else {
                return false;
            }
        }
        return false;
    }

    // Overrides method to disallow edge selection
    public boolean isCellSelectable(Object cell)
    {
        if (model.isEdge(cell))
        {
            return false;
        }

        return super.isCellSelectable(cell);
    }

    // Overrides method to provide a cell label in the display
    public String convertValueToString(Object cell) {
        if (cell instanceof mxCell) {
            Object value = ((mxCell) cell).getValue();

            if (value instanceof Element) {
                Element elt = (Element) value;

               // String tag = elt.getTagName();
                String tag =  elt.getAttribute("name");


                return tag;

            }
        }

        return super.convertValueToString(cell);
    }

    public String getToolTipForCell(Object cell){

        return "Double Click to Edit";
    }
};

...

限制某些 undoEvents

 protected mxEventSource.mxIEventListener undoHandler = new mxEventSource.mxIEventListener(){
 public void invoke(Object source, mxEventObject evt)
 {

     mxUndoableEdit evt1 = (mxUndoableEdit) evt.getProperty("edit");
     List<mxUndoableEdit.mxUndoableChange> changes = evt1.getChanges();

     Object[] temp = graph.getSelectionCellsForChanges(changes);


      boolean islegal = true;
      for (int i = 0; i < temp.length; i++)
      {
      mxCell cell = (mxCell)temp[i];
      String value = cell.getValue().toString();
      if (value.equals("subprocess")||value.equals("optional")||value.equals("parallel")||value.equals("synchronous")||value.equals("activating")||value.equals("deactivating")){
      //System.out.println("is not legal");
      islegal = false;
      }
      }
      for (int i = 0; i < changes.size(); i++){
          if (changes.get(i).toString().contains("mxValueChange")){
              islegal = false;
          }
      }

      graph.setSelectionCells(graph.getSelectionCellsForChanges(changes));

      if (islegal == true){
      undoManager.undoableEditHappened((mxUndoableEdit) evt
      .getProperty("edit"));
      }else{
     // System.out.println("illegal undo");
      }
  }};

...

 protected boolean modified = false;
protected mxGraphOutline graphOutline;
protected JPanel actionPane;

mxUndoManager undoManager;

public Editor() {
    handler = new Handler(this);
    dataTable = new EntityDataTable(handler);


    initGUI();
    initGraphSettings();
}

public Editor(SaveData saveData) {

    handler = new Handler(this);

    dataTable = new EntityDataTable(handler);

    initGUI();
    initGraphSettings();

    //erst alle entities erstellen und submitten, dann alle verbindungselemente zu den entities hinzufügen und nochmal submit

    //Load entities
    ArrayList<DataSaveElement> saveDataList = saveData.getSaveData(); for (int i = 0; i < saveDataList.size(); i++){

        System.out.println("Loaded "+saveDataList.get(i).getType()+" "+saveDataList.get(i).getName());

        if (saveDataList.get(i).getType().equals("Process")){
            ProcessPopUp temp = new ProcessPopUp(handler, this);
            temp.setGlobalID(saveDataList.get(i).getGlobalID());
            temp.setName(saveDataList.get(i).getName());
            temp.setDesc(saveDataList.get(i).getDescription());
            temp.setType(saveDataList.get(i).getType());

...大量用于重建的代码、一些图形设置、GUI 等。在 initGui() 内部，我的 mxGraphComponent 被初始化

graphComponent = new mxGraphComponent(graph);

由于图形可视化只是应用程序的一部分，其他数据存在于后台，同时保存所有数据值，包括 post 顶点离子等。所以当加载保存文件时全新的应用程序是从头开始构建的，只需逐步添加所有保存的数据值。当我关闭整个 java 应用程序时，再次启动它并加载我保存的文件时完全没有问题。当应用程序仍然是运行时加载保存的文件时会出现问题。 g.

menuItem = new JMenuItem("Open...",
            new ImageIcon("images/middle.gif"));
    menuItem.addActionListener(new ActionListener() {
        @java.lang.Override
        public void actionPerformed(ActionEvent e) {
            LoadAndSaveManager manager = new LoadAndSaveManager();
            try {
                Object o = manager.load(new FileChooser(0).getSelectedFile().getAbsolutePath());
                SaveData saveData =(SaveData) o;

                Editor editorNew = new Editor(saveData);
                new MenuBar(editorNew);
                editorNew.setVisible(true);

                editor.dispose();

            } catch (Exception e1) {
                e1.printStackTrace();
            }
        }
    });

    menu.add(menuItem);

我的菜单栏非常基本，可以获取编辑器 als 参数。由于创建了一个新的编辑器，它创建了一个新的 mxGraph 以及一个新的 mxGraphComponent 并最终处置了旧的编辑器，所以应该没有干扰......至少据我所知。然而，尽管有一个新的 Editor 实例，它有自己的新 Graph 和 GraphComponent，旧的仍然以某种方式使用。如下面的示例图片所示。

这将被保存并完全关闭应用程序。两个节点和一个 link 用于保存：

启动应用程序并加载保存的数据时没有任何错误。

接下来我开始一个新节点并添加例如三个节点和两个 link。三个节点和两个 links:

现在我加载之前保存的数据。我希望 window 关闭并弹出一个带有 prevois 数据的新窗口。不是这种情况。数据已加载，但旧图似乎仍然处于活动状态，并且所有节点和 link 都在图上。混合数据：

如果这是唯一的问题，我可以简单地清除图表并在之后添加所有 "loading data"，但是不知何故 graphComponent 似乎也被破坏了。拖动节点时，link 有时会中断。中断 links:

根据我目前的观察，这似乎在选择区域时自行修复（我认为这会强制 graphComponent 刷新（））选择：

不幸的是，post编辑整个代码并不是一个很好的选择，所以我 post编辑了一些我认为可能对解决问题很重要的代码。如果需要进一步的代码，我会在之后专门 post 它。

我不确定为什么会发生这种情况，经过数小时的研究，我不知何故碰壁了，我不确定我做错了什么。我真的很感激一些建议。

这里是关于声明新的 graphComponents 干扰问题的最小完整代码示例。

public class Main {

Editor editor;

public Main() {
    editor = new Editor();
    new MenuBar(editor);
    editor.setVisible(true);
}

public static void main(String args[]) {
    new Main();
}}

public class Editor extends JFrame {

mxGraphComponent graphComponent;

protected static mxGraph graph = new mxGraph() {

    // Overrides method to disallow edge label editing
    public boolean isCellEditable(Object cell) {
        if (cell instanceof mxCell) {
            mxCell c = (mxCell) cell;
            if (c.isEdge()) {
                return false;
            } else {
                return false;
            }
        }
        return false;
    }

    // Overrides method to disallow edge selection
    public boolean isCellSelectable(Object cell)
    {
        if (model.isEdge(cell))
        {
            return false;
        }

        return super.isCellSelectable(cell);
    }

    // Overrides method to provide a cell label in the display
    public String convertValueToString(Object cell) {
        if (cell instanceof mxCell) {
            Object value = ((mxCell) cell).getValue();

            if (value instanceof Element) {
                Element elt = (Element) value;

                // String tag = elt.getTagName();
                String tag =  elt.getAttribute("name");


                return tag;

            }
        }

        return super.convertValueToString(cell);
    }

    public String getToolTipForCell(Object cell){

        return "Double Click to Edit";
    }
};

public Editor() {
    initGUI();
    initGraphSettings();
}

public Editor(ArrayList<SaveDataElement> saveData) {
    initGUI();
    initGraphSettings();

    //Load data
    addToGraph(saveData);
}

public void initGUI(){
    setExtendedState(JFrame.MAXIMIZED_BOTH);
    setSize(new Dimension(1200, 900));
    setLocationRelativeTo(null);
    setDefaultCloseOperation(EXIT_ON_CLOSE);

    graphComponent = new mxGraphComponent(graph);

    JPanel graphPanel = new JPanel(new BorderLayout());
    graphPanel.add(graphComponent);

    add(graphPanel);
}
public void initGraphSettings(){

    Map<String, Object> style = graph.getStylesheet().getDefaultEdgeStyle();
    style.put(mxConstants.STYLE_ALIGN, true);
    style.put(mxConstants.STYLE_EDGE, mxConstants.EDGESTYLE_TOPTOBOTTOM);

    graph.setCellsCloneable(false);
    graphComponent.setConnectable(false);
    graphComponent.getViewport().setBackground(Color.WHITE);

    new mxRubberband(graphComponent);
}

public mxGraph getGraph(){
    return graph;
}

public void addToGraph(ArrayList<SaveDataElement> saveData){
    for (int i = 0; i < saveData.size(); i++) {
        String name = saveData.get(i).getName();
        int vertPosX = saveData.get(i).getPosX();
        int vertPosY = saveData.get(i).getPosY();

        new AddGraphNode("node", name, "rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;", vertPosX, vertPosY);
    }

    Object[] cells = graph.getChildVertices(graph.getDefaultParent());
    Object startCell = null;
    Object endCell = null;

    for (int i = 0; i < saveData.size(); i++){
        for (int j = 0; j < cells.length; j++){
            if (((mxCell)cells[j]).getAttribute("name").equals(saveData.get(i).getName()))
                startCell = cells[j];

            for (int k = 0; k < saveData.get(i).getTargets().size(); k++){
                if (((mxCell)cells[j]).getAttribute("name").equals(saveData.get(i).getTargets().get(k))){
                    endCell = cells[j];
                    new AddGraphLink(startCell, endCell,"Link", "endArrow=classic;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;verticalAlign=top;verticalLabelPosition=bottom'");
                }
            }
        }
    }
}}

public class MenuBar extends JMenuBar {


MenuBar(Editor editor){

    JMenuBar menuBar = new JMenuBar();
    JMenuItem menuItem;
    JMenu menu = new JMenu("File");
    menuBar.add(menu);

    menuItem = new JMenuItem("Add");
    menuItem.addActionListener(new ActionListener() {
        @java.lang.Override
        public void actionPerformed(ActionEvent e) {
            //Setting up some data to create nodes and links
            ArrayList<SaveDataElement> saveData = new ArrayList<SaveDataElement>();

            ArrayList<String> targetsForTestX = new ArrayList<String>();
            targetsForTestX.add("Test Y");
            targetsForTestX.add("Test Z");
            saveData.add(new SaveDataElement("Test X", 200, 300, targetsForTestX));

            ArrayList<String> targetsForTestY = new ArrayList<String>();
            saveData.add(new SaveDataElement("Test Y", 300, 420, targetsForTestY));

            ArrayList<String> targetsForTestZ = new ArrayList<String>();
            saveData.add(new SaveDataElement("Test Z", 100, 420, targetsForTestZ));

            editor.addToGraph(saveData);

        }
    });
    menu.add(menuItem);

    menuItem = new JMenuItem("Load 1");
    menuItem.addActionListener(new ActionListener() {
        @java.lang.Override
        public void actionPerformed(ActionEvent e) {
            //Setting up some data to create nodes and links
            ArrayList<SaveDataElement> saveData = new ArrayList<SaveDataElement>();

            ArrayList<String> targetsForTest1 = new ArrayList<String>();
            targetsForTest1.add("Test 2");
            saveData.add(new SaveDataElement("Test 1", 40, 40, targetsForTest1));

            ArrayList<String> targetsForTest2 = new ArrayList<String>();
            saveData.add(new SaveDataElement("Test 2", 200, 40, targetsForTest2));


            Editor editorNew = new Editor(saveData);
            new MenuBar(editorNew);
            editorNew.setVisible(true);

            editor.dispose();
        }
    });

    menu.add(menuItem);

    editor.setJMenuBar(menuBar);
}}

public class SaveDataElement {
String name;
int posX, posY;
ArrayList<String> targets;

public SaveDataElement(String name, int posX, int posY, ArrayList<String> targets){
    this.name = name;
    this.posX = posX;

    this.posY = posY;
    this.targets = targets;
}

public String getName() {
    return name;
}

public int getPosX() {
    return posX;
}

public int getPosY() {
    return posY;
}

public ArrayList<String> getTargets() {
    return targets;
}}

public class AddGraphNode extends Editor {

public AddGraphNode(String tag, String name, String style, int vertPosX, int vertPoxY){

    this.getGraph().getModel().beginUpdate();
    Object parent = this.getGraph().getDefaultParent();

    Document doc = mxDomUtils.createDocument();

    Element entity = doc.createElement(tag);
    entity.setAttribute("name", name);

    try
    {

        Object v1 = this.getGraph().insertVertex(parent, "1",entity, vertPosX, vertPoxY, (int)(name.length()*8) ,
                40, style);

    }
    finally
    {
        this.getGraph().getModel().endUpdate();
    }
}}

public class AddGraphLink extends Editor{

public AddGraphLink(Object v1, Object v2, String relation, String style){

    this.getGraph().getModel().beginUpdate();
    Object parent = this.getGraph().getDefaultParent();

    try
    {
        this.getGraph().insertEdge(parent, null, relation, v1, v2,style);
    }
    finally
    {
        this.getGraph().getModel().endUpdate();
    }
}}

当使用添加菜单项时，一些节点和 links 被添加到图表中，并且加载 1 菜单项将创建一个新的编辑器（创建一个新的图表和 graphComponent）。但是，添加的节点和 links 仍然存在于新组件上。

关于我在上面提到的 link 视觉破损，这并没有发生...我将进一步调查。尽管如此，这也可能与 graphComponent 问题有关。

Answer 1

我发现您的代码存在 3 个主要问题：

静态字段使用不当：protected static mxGraph graph = new mxGraph() {
继承不当：public class AddGraphLink extends Editor {
同样，继承不当：class AddGraphNode extends Editor {

通过将图形字段设为静态，对一个变量所做的更改将在所有个变量中感受到，这可能是您所谓的 "artifacts" 的原因.您觉得必须将字段设置为静态的原因是因为上面的两个 classes 是从 Editor 继承的（再次不恰当）。解决方案很明显：

使图形字段成为实例字段，而不是静态字段，并且
不要在不属于的地方使用继承。相反，您的 AddGraphXxxx classes 不应该扩展 Editor，而是应该在其中包含 Editor 字段，一个可以通过构造函数设置，一个可以调用其方法，例如：

// protected static mxGraph graph = new mxGraph() { //!!  **** NO ****
private mxGraph graph = new mxGraph() {             //!!  **** YES ****
     .....
     .....

public class AddGraphNode {
    public AddGraphNode(Editor editor, String tag, String name, String style, int vertPosX, int vertPoxY) {
        // **** note use of the editor parameter below ****
        editor.getGraph().getModel().beginUpdate();

        Object parent = editor.getGraph().getDefaultParent();
        Document doc = mxDomUtils.createDocument();
        Element entity = doc.createElement(tag);
        entity.setAttribute("name", name);
        try {
            // **** same here ****
            Object v1 = editor.getGraph().insertVertex(parent, "1", entity, vertPosX, vertPoxY,
                    (int) (name.length() * 8), 40, style);
        } finally {
            // **** and the same here ****
            editor.getGraph().getModel().endUpdate();
        }
    }
}

您将通过传入 this 参数在编辑器中创建此实例：

new AddGraphNode2(this, "node", name,
        "rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;",
        vertPosX, vertPosY);

您可以对 AddGraphLink 进行类似的更改 class。

旁注，请查看 The Use of Multiple JFrames, Good/Bad Practice? 了解为什么交换 JFrames 不是最好的程序设计，以及如何更改代码以改进其结构和用户体验。

graph/graphComponent 的 JGraphX 新初始化未按预期工作并导致伪影

JGraphX new initialization of graph/graphComponent does not work as expected and causes artefacts

java

swing

jgraphx