如何将mxGraph与角4集成？

Question

我正在致力于角4，我想将mxGraph集成到我的项目中。我已经搜索了它，但我没有得到完整的工作例子。

我试过跟随，但它也不适用于我。

我所遵循的步骤：

1. 已安装的mxgraph图：npm install mxgraph --save for图的npm包：https://www.npmjs.com/package/mxgraph
2. 已安装的mxgraph图-类型：npm install lgleim/mxgraph-typings --save of图的Github Repo - https://github.com/lgleim/mxgraph-typings
3. 现在我已经将它导入到我的组件：import {mxgraph} from 'mxgraph';中
4. 在.ange-cli.json资产数组中添加了以下一行，以使mxGraph资产可用。 {"glob":"**/*"，"input":"node_modules/mxgraph/javascript/src"，“输出”："./mxgraph"}
5. 如果我尝试像：const graph: mxgraph.mxGraph = new mxgraph.mxGraph(document.getElementById('graphContainer'));那样使用它 当我运行ng serve时 然后我就会遇到这样的问题/错误： Module not found: Error: Can't resolve 'mxgraph' in 'path to my file where I have imported and used mxgraph'
6. 现在，如果我尝试设置mxBasePath： const =需要量(‘mx图’)({ mxImageBasePath：‘mx图/图像’，mxBasePath：‘mx图’})； 像这样使用： const graph: mxgraph.mxGraph = mx.mxGraph(document.getElementById('graphContainer')); 当我运行ng serve时 这一次，我也遇到了同样的问题/错误： Module not found: Error: Can't resolve 'mxgraph' in 'path to my file where I have imported and used mxgraph'

有人知道我在这里错过了什么吗？或者它为什么不起作用？

如果有人知道其他/更好的方法集成mxGraph与角4，那么请让我知道。

提前谢谢!！

Answer 1

如果有人仍然在角形4/5/6的角度上挣扎于mxGraph集成，那么下面是完整的解决方案：

很少有关于不同mxGraph Repos的详细信息：

Repo-1: https://github.com/jgraph/mxgraph
        This is an official release repo of mxGraph. With npm issues.

Repo-2: https://bitbucket.org/jgraph/mxgraph2
        This is an official development repo of mxGraph. With npm issues.

If anyone wants to see what npm issues with these above repos(i.e. Repo-1 and Repo-2), then check these following issues:  
            - https://github.com/jgraph/mxgraph/issues/169
            - https://github.com/jgraph/mxgraph/issues/175

Repo-3: https://bitbucket.org/lgleim/mxgraph2
        Fork of Repo-2. With npm fixes.

Repo-4: https://github.com/ViksYelapale/mxgraph2
        Fork of Repo-2. Merged npm fixes from Repo-3 as well. Added changes(i.e. required for local installation of mxGraph) to this repo.

步骤：

1. 克隆人回购-4。另外，添加官方回购的远程(即Repo-2)，以获取最新的mxGraph更新/发布/修复。
2. 将目录更改为mxgraph2并运行npm $ cd mxgraph2 $ npm install
3. 现在转到您的并安装mxGraph(即我们在本地构建的mxgraph2 )。 $ npm install /path/to/mxgraph2 例如npm install /home/user/workspace/mxgraph2 它将在您的package.json文件中添加类似的条目如下： "mxgraph": "file:../mxgraph2"
4. 运行正常npm安装一次。用于添加任何缺少的/依赖项包。 $ npm install
5. 现在，我们将安装mxgraph类型。 注:打字本的最低要求版本为2.4.0 $ npm install lgleim/mxgraph-typings --save
6. 现在，您可以在应用程序中使用mxGraph。 一. component.ts 从“mx图”导入{ mxgraph }；声明var需要量: any；const mx=需要量(‘mx图’)({ mxImageBasePath：‘assets/mx图/映像’，mxBasePath：'assets/mxgraph‘})。。。ngOnInit() { // Note -使用mx.xyz // Eg访问的所有mxGraph方法。mx.mxGraph，mx.mxClient，mx.mxKeyHandler，mx.mxUtils等。//创建图var容器= document.getElementById('graphContainer')；var图=新的mx.mxGraph(容器)；//您可以尝试在正式文档中给出的演示代码，并进行上述更改。} 二、component.html <div id="graphContainer"></div>
7. 就这样!！

希望这会有帮助。

Answer 2

这就是我如何在角上实现mxGraph的使用。我希望这能对其他人有所帮助。

重要的是:这并不适用于角/cli-prod构建。必须在angular.json上禁用优化选项

"production": {
              "outputPath": "dist/PRO",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              **"optimization": false,**
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
... and so on

首先，将npm中的of图和类型作为依赖项和dev依赖项进行安装。

npm install mxgrapf --save
npm install @types/mxgraph --save-dev

这必须在项目的package.json中生成两个条目。

"@types/mxgraph": "github:lgleim/mxgraph-typings",
"mxgraph": "4.0.4",

在此之后，我在同一个文件中声明了所有我需要的类，扩展了mx图，这就节省了在所有使用mx图的类中声明const的成本。

扩展mxgraph类的文件如下所示：

​

import { mxgraph } from 'mxgraph'; // Typings only - no code!
declare var require: any;

/**
 *  init mxGraph whith a config object
 */
const mx: typeof mxgraph = require('mxgraph')({
    // mxgraph assets base path
    mxBasePath: 'assets/mxgraph',
    // mxgraph images
    mxImageBasePath: 'assets/mxgraph/images',
    // avoid mxgraph resources load
    mxLoadResources: false,
    mxForceIncludes: false

});

// Objects load in window object
// The original library load, loads object into the window object, this is necesray if you use
// the decode and encode models funcionality of mxgraph. Is necesary that you include all object you 
// use into your models. this is only my case.
window['mxGraphModel'] = mx.mxGraphModel;
window['mxGeometry'] = mx.mxGeometry;
window['MxGeometry'] = mx.mxGeometry;
window['MxPoint'] = mx.mxPoint;
window['mxPoint'] = mx.mxPoint;

/**
 * Into MXUTILITIES exports all the object created by mxgraph as staric properties as we need
 **/
export class MXUTILITIES {
    static mxEvent = mx.mxEvent;
    static mxUtils = mx.mxUtils;
    static mxConstants = mx.mxConstants;
    static mxStencilRegistry = mx.mxStencilRegistry;
    static mxPerimeter = mx.mxPerimeter;
    static mxEdgeStyle = mx.mxEdgeStyle;
    static mxEffects = mx.mxEffects;
    static mxClient = mx.mxClient;
    static mxCodecRegistry = mx.mxCodecRegistry;

}

/**
 * Exports for all classes we need extending mxgrah, you can extend, overwrite methods and so on
 * 
 */
export class MxGraphModel extends mx.mxGraphModel {}
export class MxOutline extends mx.mxOutline { }
export class MxKeyHandler extends mx.mxKeyHandler { }
export class MxCompactTreeLayout extends mx.mxCompactTreeLayout { }
export class MxLayoutManager extends mx.mxLayoutManager { }
export class MxDivResizer extends mx.mxDivResizer { }
export class MxCellOverlay extends mx.mxCellOverlay { }
export class MxImage extends mx.mxImage { }
export class MxEdgeHandler extends mx.mxEdgeHandler { }
export class MxPrintPreview extends mx.mxPrintPreview { }
export class MxWindow extends mx.mxWindow { }
export class MxGraphView extends mx.mxGraphView { }
export class MxGraphHandler extends mx.mxGraphHandler { }
export class MxGraphSelectionModel extends mx.mxGraphSelectionModel { }
export class MxToolbar extends mx.mxToolbar { }
export class MxEventObject extends mx.mxEventObject { }
export class MxCodec extends mx.mxCodec { }
export class MxObjectCodec extends mx.mxObjectCodec { }
export class MxFastOrganicLayout extends mx.mxFastOrganicLayout { }
export class MxGeometry extends mx.mxGeometry { }
export class MxHierarchicalLayout extends mx.mxHierarchicalLayout { }
export class MxStencil extends mx.mxStencil { }
export class MxRubberband extends mx.mxRubberband { }
export class MxCellRenderer extends mx.mxCellRenderer { }
export class MxPoint extends mx.mxPoint { }
export class MxConnector extends mx.mxConnector { }
export class MxLine extends mx.mxLine { }
export class MxArrowConnector extends mx.mxArrowConnector { }
export class MxCell extends mx.mxCell {}
export class MxGraph extends mx.mxGraph {}

​

要创建一个新的图，我使用一个服务来存储生成的图形并通知所选的单元格和为所有被描述的组件创建的新图表。

​

import { Injectable, ElementRef } from '@angular/core';
import { Observable } from 'rxjs/internal/Observable';
import { BehaviorSubject, Subject } from 'rxjs';
import { MxCell, MxGraph, MxEventObject, MXUTILITIES, MxGraphSelectionModel } from '../classes/mxgraph.class';


@Injectable({ providedIn: 'root' })
export class GraphsService { 

  private graphsSubject: BehaviorSubject<MxGraph[]> = new BehaviorSubject([]);
  private graphs$: Observable<MxGraph[]>;
  private graphs: MxGraph[] = [];
  
  private selectedCellsSubject: BehaviorSubject<MxCell[]> = new BehaviorSubject([]);
  private selectedCells$: Observable<MxCell[]>;
  private selectedCells: MxCell[];
  
  constructor() {
    this.graphs$ = this.graphsSubject.asObservable();
    this.stamp = Date.now();
  }
 
 /**
   * Generate a new graph into the received container
   *
   * @memberOf GraphsService
   */
  newGraph(graphContainer: ElementRef, name?: string): MxGraph {
    const newGraph: MxGraph = this.initNewGraph(graphContainer, name);
    this.graphs.push(newGraph);
    this.graphsSubject.next(this.graphs);
    return newGraph;
  }

  /**
   * Init new graph
   *
   * @memberOf GraphsService
   */
  private initNewGraph(graphContainer: ElementRef, name: string) {
    let newGraph: MxGraph;
    newGraph = new MxGraph(graphContainer.nativeElement);
    if (!name) name = 'Nuevo gráfico';
    newGraph.getModel().getRoot().setValue(name);
    newGraph.setConnectable(true);
    newGraph.setMultigraph(false);
    newGraph.selectionModel.addListener(MXUTILITIES.mxEvent.CHANGE, (mxGraphSelectionModel: MxGraphSelectionModel, evt: MxEventObject) => {
      this.emitSelectedCell(mxGraphSelectionModel.cells as MxCell[]);

    });

    return newGraph;
  }
  
  /**
   * Emits the selected cells from the graph
   * @memberOf GraphsService
   */
  private emitSelectedCell(cells: MxCell[]) {

    if (!cells) this.selectedCells = [];
    else this.selectedCells = cells;
    this.selectedCellsSubject.next(this.selectedCells);
  }

  
  }

​

Answer 3

我也遇到过同样的问题。根据“lgleim”的说法，问题在于mxgraph包。这里讨论的问题是：https://github.com/jgraph/mxgraph/issues/169。

我不能解决这个问题。不过，我通过以下文章成功地将mxgraph与角7集成在一起：https://itnext.io/how-to-integrate-mxgraph-with-angular-6-18c3a2bb8566

步骤1

首先，安装mxgraph的最新版本：

npm install mxgraph

步骤2

然后从https://github.com/gooddaytoday/mxgraph-typescript-definitions.git下载这些类型。将该文件解压缩到角项目的“src”文件夹中。

步骤3

在angular.json文件中添加以下内容：

1. 在资产数组中添加： { "glob"："**/*"，“输入”：“src/资产/”，“输出”：“/资产/”}， { "glob"："**/*"，"input"："./node_modules/mxgraph/javascript/src"，"output"："/assets/mxgraph“}
2. 在脚本数组中添加： “node_modules/mxGraph.javascript/mxClient.js”

有两个脚本和资产数组。一次在“构建”，一次在“测试”。两者相加。

做完这一切之后，你就可以走了。:)

示例代码：

component.html：

<div #graphContainer id="graphContainer"></div>

component.ts

​

import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
declare var mxPerimeter: any;
declare var mxConstants: any;

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

  @ViewChild('graphContainer') graphContainer: ElementRef;
  graph: mxGraph;

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

    // set default styles for graph
    const style = this.graph.getStylesheet().getDefaultVertexStyle();
    style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
    style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
    style[mxConstants.DEFAULT_VALID_COLOR] = '#00FF00';
    this.graph.getStylesheet().putDefaultVertexStyle (style);

    // add cells
    try {
      const parent = this.graph.getDefaultParent();
      this.graph.getModel().beginUpdate();
      const vertex1 = this.graph.insertVertex(parent, '1', 'Vertex 1', 0, 0, 200, 80);
      const vertex2 = this.graph.insertVertex(parent, '2', 'Vertex 2', 0, 0, 200, 80);
      this.graph.insertEdge(parent, '', '', vertex1, vertex2);
    } finally {
      this.graph.getModel().endUpdate();
      new mxHierarchicalLayout(this.graph).execute(this.graph.getDefaultParent());
    }
  }

}

​

注意，我使用了declare语句来声明mxConstants.、、mxPerimeter、和原因是类型定义不完整。因此，我不得不自己声明一些类名。这只是为了避免编译器错误而进行的小黑客攻击。通过使用declare语句，我实际上是在告诉编译器允许这个类。但是，它将无助于各种文本编辑器使用的intellisense。