angular - MxGraph 与 Angular 10 集成期间出错

问题描述

我想实现一个流程图编辑器，它有一个图形组件和一个侧边栏组件。侧边栏将具有可重复使用的形状，如矩形、正方形、日食、菱形、圆形等。我应该能够将这些形状拖放到图形容器中以将它们自动添加为顶点。同样，我可以在图形中添加其他顶点通过拖放各种形状。此外，我应该能够在添加为顶点的这些形状之间添加/插入边缘或连接器。我想在 Angular 10 中使用 mxgraph 来实现此功能。

我在 Angular 10 中为相同的代码编写了下面的代码。

app.component.ts：

import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';

declare var mxClient: any;
declare var mxPerimeter: any;
declare var mxConstants: any;
declare var mxUtils: any;
declare var mxEvent: any;
declare var mxEventObject: any;
declare var mxEffects: any;
declare var mxDivResizer: any;
declare var mxGraphHandler: any;
declare var mxGuide: any;
declare var mxCodec: any;
declare var mxLog: any;
declare var mxConnectionHandler: any;


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

  @ViewChild('graphContainer') graphContainer: ElementRef;
  @ViewChild('sidebarContainer') sidebar: ElementRef

  

  ngAfterViewInit() {
    const graph = new mxGraph(this.graphContainer.nativeElement);

    try {
      
      const parent = graph.getDefaultParent();
      graph.getModel().beginUpdate();

      const vertex1 = graph.insertVertex(parent, '1', 'Vertex 1', 0, 0, 200, 80);
      const vertex2 = graph.insertVertex(parent, '2', 'Vertex 2', 0, 0, 200, 80);

      graph.insertEdge(parent, '', '', vertex1, vertex2);
    } finally {
      graph.getModel().endUpdate();
      new mxHierarchicalLayout(graph).execute(graph.getDefaultParent());
      this.addVertex(graph,'/assets/images/rectangle.gif', 100, 40, '');
      this.addVertex(graph,'/assets/images/rounded.gif', 100, 40, 'shape=rounded');
      this.addVertex(graph,'/assets/images/ellipse.png', 40, 40, 'shape=ellipse');
      this.addVertex(graph,'/assets/images/rhombus.png', 40, 40, 'shape=rhombus');
      this.addVertex(graph,'/assets/images/triangle.png', 40, 40, 'shape=triangle');
      this.addVertex(graph,'/assets/images/cylinder.png', 40, 40, 'shape=cylinder');
      this.addVertex(graph,'/assets/images/actor.png', 30, 40, 'shape=actor');
    }
  }
  
  
  




  addVertex(graph,icon, w, h, style): void {
    const vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
    vertex.setVertex(true);
  
    this.addToolbarItem(graph, toolbar, vertex, icon);
  }


  addToolbarItem(graph, toolbar, prototype, image): void {
            // Function that is executed when the image is dropped on
            // the graph. The cell argument points to the cell under
            // the mousepointer if there is one.
            var funct = function(graph, evt, cell)
            {
                graph.stopEditing(false);

                var pt = graph.getPointForEvent(evt);
                var vertex = graph.getModel().cloneCell(prototype);
                vertex.geometry.x = pt.x;
                vertex.geometry.y = pt.y;
                
                graph.setSelectionCells(graph.importCells([vertex], 0, 0, cell));
            }

            // Creates the image which is used as the drag icon (preview)
            var img = toolbar.addMode(null, image, funct);
            mxUtils.makeDraggable(img, graph, funct);
    }
    
  



    


        
        

        
        
        

  

}

app.component.html：

<div id="sidebarContainer"
        style="position:absolute;overflow:hidden;top:36px;left:0px;bottom:36px;max-width:52px;width:56px;padding-top:10px;padding-left:4px;background-image:url('/assets/images/sidebar_bg.gif');">
</div>
<div #graphContainer id="graphContainer"
        style="position:absolute;overflow:hidden;top:36px;left:60px;bottom:36px;right:0px;background-image:url('/assets/images/grid.gif');cursor:default;">
</div>>

但是我收到错误

src/app/app.component.ts(62,20) 中的错误：错误 TS2554：预期 0 个参数，但得到 3.src/app/app.component.ts(62,41)：错误 TS2304：找不到名称' mx几何'。

您能否告诉我如何在 angular 10 中包含 mxGraph 模型，如 mxGeometry 或 mxRectangle 或 mxCell 以解决上述错误。

另外请告诉我上面的代码是否正确？

标签： angulartypescriptmxgraph

angular - MxGraph 与 Angular 10 集成期间出错

问题描述

解决方案

推荐阅读