import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import * as $ from 'jquery'; import * as _ from 'lodash'; import * as joint from '../../../../../../node_modules/jointjs/dist/joint.js'; @Component({ selector: 'app-designer', templateUrl: './designer.component.html', styleUrls: ['./designer.component.css'], encapsulation: ViewEncapsulation.None }) export class DesignerComponent implements OnInit { private controllerSideBar: boolean; private attributesSideBar: boolean; public graph: any; public paper: any; constructor() { this.controllerSideBar = true; this.attributesSideBar = false; } private _toggleSidebar1() { this.controllerSideBar = !this.controllerSideBar; } private _toggleSidebar2() { this.attributesSideBar = !this.attributesSideBar; } ngOnInit() { this.attachEditorBarToCanvas(); } attachEditorBarToCanvas() { this.graph = new joint.dia.Graph, this.paper = new joint.dia.Paper({ el: $('#paper'), model: this.graph, height: 720, width: 1200, gridSize: 2, drawGrid: true, cellViewNamespace: joint.shapes }); this.paper.setGrid({ name: 'dot', args: { color: 'black', thickness: 2, scaleFactor: 8 } }).drawGrid(); joint.shapes["html"] = {}; joint.shapes["html"].Element = joint.shapes.basic.Rect.extend({ defaults: joint.util.deepSupplement({ type: 'html.Element' }, joint.shapes.basic.Rect.prototype.defaults) }); joint.shapes["html"].ElementView = joint.dia.ElementView.extend({ template: [ '