-
Notifications
You must be signed in to change notification settings - Fork 525
/
jointjs-diagram-table.js
49 lines (42 loc) · 1.46 KB
/
jointjs-diagram-table.js
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
import joint from 'jointjs/dist/joint';
import bindAll from 'lodash.bindall';
import template from 'lodash.template';
// Custom joint shape representing table/view object
joint.shapes.sqlectron = {};
joint.shapes.sqlectron.Table = joint.shapes.basic.Rect.extend({
defaults: joint.util.deepSupplement({
type: 'sqlectron.Table',
attrs: {
rect: { stroke: 'none', 'fill-opacity': 0 },
},
}, joint.shapes.basic.Rect.prototype.defaults),
});
joint.shapes.sqlectron.TableView = joint.dia.ElementView.extend({
template: '<div class="sqlectron-table"><p><span></span></p></div>',
initialize(...args) {
bindAll(this, 'updateBox');
joint.dia.ElementView.prototype.initialize.apply(this, args);
this.$box = $(template(this.template)());
this.$box.find('span').text(this.model.get('name'));
this.$box.addClass(this.model.get('name'));
// Update the box position whenever the underlying model changes.
this.model.on('change', this.updateBox, this);
this.updateBox();
},
render(...args) {
joint.dia.ElementView.prototype.render.apply(this, args);
this.paper.$el.prepend(this.$box);
return this;
},
updateBox() {
// Set the position and dimension of the box so that it covers the JointJS element.
const 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)`,
});
},
});