Получение ошибки типа после обновления соединения js до 3.1.1 в приложении Angular - PullRequest
1 голос
/ 07 мая 2020
  1. Создан новый проект Angular 9 с одним компонентом:
import { Component, OnInit } from '@angular/core';
import * as dagre from 'dagre';
import * as graphlib from 'graphlib';
import * as joint from 'jointjs';

@Component({
  selector: 'app-diagram',
  templateUrl: './diagram.component.html',
  styleUrls: ['./diagram.component.scss']
})
export class DiagramComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    const graph = new joint.dia.Graph();

    const paper = new joint.dia.Paper({
      el: document.getElementById('my-holder'),
      model: graph,
      width: 600,
      height: 100,
      gridSize: 1,
      background: { color: 'cornflowerblue'}
    });

    joint.shapes.standard.Rectangle.define('examples.CustomRectangle', {
      attrs: {
        body: {
          rx: 10, // add a corner radius
          ry: 10,
          strokeWidth: 1,
          fill: 'cornflowerblue'
        },
        label: {
          textAnchor: 'left', // align text to left
          refX: 10, // offset text from right edge of model bbox
          fill: 'white',
          fontSize: 18,
          text: 'Hello'
        }
      }
    }, {
      // inherit joint.shapes.standard.Rectangle.markup
    }, {
      create() {
        const rectangle = new this();
        rectangle.resize(250, 50);
        return rectangle;
      }
    });
    const customRect = (joint.shapes as any).examples.CustomRectangle.create();
    customRect.addTo(graph);
  }

}

2. Установить зависимости:

"backbone": "^1.4.0",
"dagre": "^0.8.5",
"jointjs": "^3.0.3",
"jquery": "^3.4.1",
"lodash": "^4.17.15",
Запустить приложение. Ожидаем увидеть customRect. Chrome консоль показывает ошибку:
ERROR TypeError: Cannot read property 'CustomRectangle' of undefined
    at DiagramComponent.ngOnInit (VM10 main.js:237)
    at callHook (VM11 vendor.js:11079)
    at callHooks (VM11 vendor.js:11043)
    at executeInitAndCheckHooks (VM11 vendor.js:10983)
    at refreshView (VM11 vendor.js:17422)
    at refreshComponent (VM11 vendor.js:18842)
    at refreshChildComponents (VM11 vendor.js:17133)
    at refreshView (VM11 vendor.js:17456)
    at renderComponentOrTemplate (VM11 vendor.js:17530)
    at tickRootContext (VM11 vendor.js:19004)

Похоже, что настраиваемый прямоугольник не создан. Но возвращаясь к совместной js версии 2.2.1 без каких-либо изменений кода, все работает нормально. Ошибка отображается с любым соединением js версия> = 3.0.0

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...