问MxGraph与Angular 10集成时出错

EN

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);
    }
    
  



    


        
        

        
        
        

  

}

<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>>