mxGraph и его типы интеграции с угловым 8 - PullRequest
Новая
       14

mxGraph и его типы интеграции с угловым 8

1 голос
/ 01 октября 2019

Когда я использую любой из методов / значений mxgraph, мой mxgraph равен 'undefined'

Я уже попробовал ответить на этот вопрос виксам: Как интегрировать mxGraph с Angular 4?

но даже если это даст мне набор текста и intellisense работает нормально, у меня все еще есть неопределенный mxgraph.

Я должен упомянуть, что это совершенно новый угловой проект, и я просто последовал руководству Викса, чтобы получитьздесь. 

import { mxgraph } from "mxgraph";

declare var require: any;

const mx = require('mxgraph')({
  mxBasePath: 'assets/mxgraph'
});
@Component({...})
export class LetestComponent implements OnInit {
  ngOnInit() {
    var container = document.getElementById('graphContainer');
    var graph = new mx.mxGraph(container);
  }
}

с этим в файле HTML 

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

У меня не должно быть никаких ошибок, и я должен иметь возможность использовать mx для вызова любых методов mxGraph.

Когда я компилирую код, он, кажется, работает нормально, но затем, когда я смотрю на него в консоли браузера, у меня есть:

"Uncaught TypeError: Невозможно установить свойство 'mxBasePath' изundefined в build.js: 11 в модуле ../ src / app / letest / letest.component.ts (letest.component.ts: 6) "

Я не знаю, если этопроблема, потому что я использую угловой 8, где ответ Викс для угловых 4 oЕсли бы это было что-то с синтаксисом машинописи, которое могло бы измениться с тех пор.

Если бы кто-то мог помочь мне с этим, это было бы здорово,

заранее спасибо!

Редактировать: я все еще пытаюсь сделать кучу вещей, но я думаю, что я действительно не понимаю часть "require ('mxgraph')", именно там есть неопределенное, даже если я думаю, что константа mx не является неопределенной, если я войду в неек консоли в классе. Может быть, в angular 8 есть новый способ сделать то же самое?

Я должен также упомянуть, что Типы mxgraph, кажется, работают нормально в студии Visual Code, как будто у меня есть определения, но не настоящий код.

Редактировать 2: После более глубокого погружения я начал работать с https://itnext.io/how-to-integrate-mxgraph-with-angular-6-18c3a2bb8566, но проблема в том, что этим типам 4 года, поэтому в них нет огромного количества методов / переменных изпоследняя версия mxgraph.

Что я обнаружил, так это то, что в этих типах есть только (Работает) 

declare class mxGraph{..}

В то время как новейшие типы используют (Не работает) 

declare namespace mxgraph {
  export class mxGraph {..}
}

Может кто-нибудь объяснить разницу, пожалуйста?

1 Ответ

0 голосов
/ 02 октября 2019

MxGraph - это библиотека, написанная на JavaScript. TypeScript, используемый Angular, имеет типы (как следует из названия) и затем компилируется в JavaScript (который не имеет статических типов). Чтобы TypeScript знал о правильных типах и т. Д. В JS-библиотеке, вам нужны некоторые определения типов.

Насколько мне известно, таких определений типов для MxGraph не существует.

Тоне должен останавливать нас, мы все еще можем использовать библиотеки JS! Вот как я использую MxGraph в своем проекте:

У меня есть нормальная зависимость в моем package.json: "mxgraph": "^3.9.12",

Но мы также должны сказатьAngular, где найти JS-скрипт! Посмотрите на мой файл «angular.json»: 

{
   "projects": {
      "architect": {
        "build": {
          "options": {
              "scripts": [
                    "node_modules/mxgraph/javascript/mxClient.js"
              ]}
        }
      }
    }
}

Примечание: Я включил только соответствующий бит. Мне нужно было сказать angular, что этот внешний скрипт должен быть включен и доступен. См. Документы

Мой шаблон (mygraph.component.html) выглядит немного иначе: 

<div #graphContainer
     style="overflow:hidden;width:100%;height:100%; padding: 10px;">
</div>

Видите ли, Angular использует символ "#" для шаблонассылки!

Вот мой "mygraph.component.ts": 

import 'mxgraph/javascript/mxClient.js';

/**
* externally (in mxClient) defined vars
*/
declare var mxClient: any;
declare var mxUtils: any;
declare var mxRubberband: any;
declare var mxGraph: any;
declare var mxConstants: any;
declare var mxPerimeter: any;
declare var mxEdgeStyle: any;

@Component({
  selector: 'app-graph',
  templateUrl: './graph.component.html',
  styleUrls: ['./graph.component.scss']
})
export class GraphComponent {

  @ViewChild('graphContainer', { static: true }) graphContainer: Element;

  constructor(private http: HttpClient) {}

  // This I'm calling in my custom logic
  private draw() {
   // Checks if the browser is supported
    if (!mxClient.isBrowserSupported()) {
        mxUtils.error('Browser is not supported!', 200, false);
    } else {
        // Creates the graph inside the given container
        this.graphContainer['nativeElement'].innerHTML = '';
        const graph = new mxGraph(this.graphContainer['nativeElement']);

        // Get and clone style, just for demonstration
        let style = graph.getStylesheet().getDefaultVertexStyle();
        let style2 = mxUtils.clone(style);
        graph.getStylesheet().putCellStyle('myStyle', style2);

        // Gets the default parent for inserting new cells. This
        // is normally the first child of the root (ie. layer 0).
        const defaultParent = graph.getDefaultParent();

        // Adds cells to the model in a single step
        graph.getModel().beginUpdate();

        try {
          // Do some drawing
          // graph.insertVertex(...
          // graph.insertEdge(...
        } finally {
          // Updates the display
          graph.getModel().endUpdate();

          // Make Graph not changeable by User
          graph.setEnabled(false);
        }            
    }
  }
}

Хотя это не полный пример (я только что взял некоторые интересные биты из своего кода), он должен помочьВы получаете настройку и начинаете. О фактическом чертеже см. Документацию MxGraph.

...