1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
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: [
'<div>',
'<div id="editbar" class="editBar text-center">',
'<div class="btn-group mr-2" role="group" aria-label="First group">',
'<button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Undo">',
'<img src="/assets/img/icon-undoActive.svg">',
'</button>',
'<button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Redo">',
'<img src="/assets/img/icon-redo.svg">',
'</button>',
'</div>',
'<div class="btn-group mr-2" role="group" aria-label="Second group">',
'<button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom Out">',
'<img src="/assets/img/icon-zoomOut.svg">',
'</button>',
'<button type="button" class="btn btn-secondary pl-0 pr-0">100%</button>',
'<button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom In">',
'<img src="/assets/img/icon-zoomIn.svg">',
'</button>',
'</div>',
'<div class="btn-group viewBtns" role="group" aria-label="Third group">',
'<button type="button" class="btn btn-secondary topologySource active">View</button>',
'<button type="button" class="btn btn-secondary topologyView">Source</button>',
'</div>',
'</div>',
'</div>'
].join(''),
initialize: function() {
_.bindAll(this, 'updateBox');
joint.dia.ElementView.prototype.initialize.apply(this, arguments);
this.$box = $(_.template(this.template)());
// Prevent paper from handling pointerdown.
this.$box.find('input,select').on('mousedown click', function(evt) {
evt.stopPropagation();
});
this.model.on('change', this.updateBox, this);
this.updateBox();
},
render: function() {
joint.dia.ElementView.prototype.render.apply(this, arguments);
this.paper.$el.prepend(this.$box);
this.updateBox();
return this;
},
updateBox: function() {
// Set the position and dimension of the box so that it covers the JointJS element.
var bbox = this.model.getBBox();
this.$box.css({
width: bbox.width,
height: bbox.height,
left: bbox.x,
top: bbox.y,
transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)'
});
}
});
var el1 = new joint.shapes["html"].Element({});
this.graph.addCells([el1]);
}
}
|
