jbiason
/
Presentations
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

added some graphs to explain things a bit better

master
Julio Biason 10 years ago
parent
6db587880c
commit
0696ff355a
2 changed files with 415 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 313
      jointjs/joint.shapes.uml.js
  2. 104
      spa.html

313
jointjs/joint.shapes.uml.js
Unescape View File

@ -0,0 +1,313 @@
/*! JointJS v0.9.0 - JavaScript diagramming library 2014-05-13
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
if (typeof exports === 'object') {
var joint = {
util: require('../src/core').util,
shapes: {
basic: require('./joint.shapes.basic')
},
dia: {
ElementView: require('../src/joint.dia.element').ElementView,
Link: require('../src/joint.dia.link').Link
}
};
var _ = require('lodash');
}
joint.shapes.uml = {}
joint.shapes.uml.Class = joint.shapes.basic.Generic.extend({
markup: [
'<g class="rotatable">',
'<g class="scalable">',
'<rect class="uml-class-name-rect"/><rect class="uml-class-attrs-rect"/><rect class="uml-class-methods-rect"/>',
'</g>',
'<text class="uml-class-name-text"/><text class="uml-class-attrs-text"/><text class="uml-class-methods-text"/>',
'</g>'
].join(''),
defaults: joint.util.deepSupplement({
type: 'uml.Class',
attrs: {
rect: { 'width': 200 },
'.uml-class-name-rect': { 'stroke': 'black', 'stroke-width': 2, 'fill': '#3498db' },
'.uml-class-attrs-rect': { 'stroke': 'black', 'stroke-width': 2, 'fill': '#2980b9' },
'.uml-class-methods-rect': { 'stroke': 'black', 'stroke-width': 2, 'fill': '#2980b9' },
'.uml-class-name-text': {
'ref': '.uml-class-name-rect', 'ref-y': .5, 'ref-x': .5, 'text-anchor': 'middle', 'y-alignment': 'middle', 'font-weight': 'bold',
'fill': 'black', 'font-size': 12, 'font-family': 'Times New Roman'
},
'.uml-class-attrs-text': {
'ref': '.uml-class-attrs-rect', 'ref-y': 5, 'ref-x': 5,
'fill': 'black', 'font-size': 12, 'font-family': 'Times New Roman'
},
'.uml-class-methods-text': {
'ref': '.uml-class-methods-rect', 'ref-y': 5, 'ref-x': 5,
'fill': 'black', 'font-size': 12, 'font-family': 'Times New Roman'
}
},
name: [],
attributes: [],
methods: []
}, joint.shapes.basic.Generic.prototype.defaults),
initialize: function() {
_.bindAll(this, 'updateRectangles');
this.on('change:name change:attributes change:methods', function() {
this.updateRectangles();
this.trigger('uml-update');
});
this.updateRectangles();
joint.shapes.basic.Generic.prototype.initialize.apply(this, arguments);
},
getClassName: function() {
return this.get('name');
},
updateRectangles: function() {
var attrs = this.get('attrs');
var rects = [
{ type: 'name', text: this.getClassName() },
{ type: 'attrs', text: this.get('attributes') },
{ type: 'methods', text: this.get('methods') }
];
var offsetY = 0;
_.each(rects, function(rect) {
var lines = _.isArray(rect.text) ? rect.text : [rect.text];
var rectHeight = lines.length * 20 + 20;
attrs['.uml-class-' + rect.type + '-text'].text = lines.join('\n');
attrs['.uml-class-' + rect.type + '-rect'].height = rectHeight;
attrs['.uml-class-' + rect.type + '-rect'].transform = 'translate(0,'+ offsetY + ')';
offsetY += rectHeight;
});
}
});
joint.shapes.uml.ClassView = joint.dia.ElementView.extend({
initialize: function() {
joint.dia.ElementView.prototype.initialize.apply(this, arguments);
this.model.on('uml-update', _.bind(function() {
this.update();
this.resize();
}, this));
}
});
joint.shapes.uml.Abstract = joint.shapes.uml.Class.extend({
defaults: joint.util.deepSupplement({
type: 'uml.Abstract',
attrs: {
'.uml-class-name-rect': { fill : '#e74c3c' },
'.uml-class-attrs-rect': { fill : '#c0392b' },
'.uml-class-methods-rect': { fill : '#c0392b' }
}
}, joint.shapes.uml.Class.prototype.defaults),
getClassName: function() {
return ['<<Abstract>>', this.get('name')];
}
});
joint.shapes.uml.AbstractView = joint.shapes.uml.ClassView;
joint.shapes.uml.Interface = joint.shapes.uml.Class.extend({
defaults: joint.util.deepSupplement({
type: 'uml.Interface',
attrs: {
'.uml-class-name-rect': { fill : '#f1c40f' },
'.uml-class-attrs-rect': { fill : '#f39c12' },
'.uml-class-methods-rect': { fill : '#f39c12' }
}
}, joint.shapes.uml.Class.prototype.defaults),
getClassName: function() {
return ['<<Interface>>', this.get('name')];
}
});
joint.shapes.uml.InterfaceView = joint.shapes.uml.ClassView;
joint.shapes.uml.Generalization = joint.dia.Link.extend({
defaults: {
type: 'uml.Generalization',
attrs: { '.marker-target': { d: 'M 20 0 L 0 10 L 20 20 z', fill: 'white' }}
}
});
joint.shapes.uml.Implementation = joint.dia.Link.extend({
defaults: {
type: 'uml.Implementation',
attrs: {
'.marker-target': { d: 'M 20 0 L 0 10 L 20 20 z', fill: 'white' },
'.connection': { 'stroke-dasharray': '3,3' }
}
}
});
joint.shapes.uml.Aggregation = joint.dia.Link.extend({
defaults: {
type: 'uml.Aggregation',
attrs: { '.marker-target': { d: 'M 40 10 L 20 20 L 0 10 L 20 0 z', fill: 'white' }}
}
});
joint.shapes.uml.Composition = joint.dia.Link.extend({
defaults: {
type: 'uml.Composition',
attrs: { '.marker-target': { d: 'M 40 10 L 20 20 L 0 10 L 20 0 z', fill: 'black' }}
}
});
joint.shapes.uml.Association = joint.dia.Link.extend({
defaults: { type: 'uml.Association' }
});
// Statechart
joint.shapes.uml.State = joint.shapes.basic.Generic.extend({
markup: [
'<g class="rotatable">',
'<g class="scalable">',
'<rect/>',
'</g>',
'<path/><text class="uml-state-name"/><text class="uml-state-events"/>',
'</g>'
].join(''),
defaults: joint.util.deepSupplement({
type: 'uml.State',
attrs: {
rect: { 'width': 200, 'height': 200, 'fill': '#ecf0f1', 'stroke': '#bdc3c7', 'stroke-width': 3, 'rx': 10, 'ry': 10 },
path: { 'd': 'M 0 20 L 200 20', 'stroke': '#bdc3c7', 'stroke-width': 2 },
'.uml-state-name': {
'ref': 'rect', 'ref-x': .5, 'ref-y': 5, 'text-anchor': 'middle',
'font-family': 'Courier New', 'font-size': 14, fill: '#000000'
},
'.uml-state-events': {
'ref': 'path', 'ref-x': 5, 'ref-y': 5,
'font-family': 'Courier New', 'font-size': 14, fill: '#000000'
}
},
name: 'State',
events: []
}, joint.shapes.basic.Generic.prototype.defaults),
initialize: function() {
_.bindAll(this, 'updateEvents', 'updatePath');
this.on({
'change:name': function() { this.updateName(); this.trigger('change:attrs'); },
'change:events': function() { this.updateEvents(); this.trigger('change:attrs'); },
'change:size': this.updatePath
});
this.updateName();
this.updateEvents();
this.updatePath();
joint.shapes.basic.Generic.prototype.initialize.apply(this, arguments);
},
updateName: function() {
this.get('attrs')['.uml-state-name'].text = this.get('name');
},
updateEvents: function() {
this.get('attrs')['.uml-state-events'].text = this.get('events').join('\n');
},
updatePath: function() {
this.get('attrs')['path'].d = 'M 0 20 L ' + this.get('size').width + ' 20';
}
});
joint.shapes.uml.StartState = joint.shapes.basic.Circle.extend({
defaults: joint.util.deepSupplement({
type: 'uml.StartState',
attrs: { circle: { 'fill': '#34495e', 'stroke': '#2c3e50', 'stroke-width': 2, 'rx': 1 }}
}, joint.shapes.basic.Circle.prototype.defaults)
});
joint.shapes.uml.EndState = joint.shapes.basic.Generic.extend({
markup: '<g class="rotatable"><g class="scalable"><circle class="outer"/><circle class="inner"/></g></g>',
defaults: joint.util.deepSupplement({
type: 'uml.EndState',
size: { width: 20, height: 20 },
attrs: {
'circle.outer': {
transform: 'translate(10, 10)',
r: 10,
fill: 'white',
stroke: '#2c3e50'
},
'circle.inner': {
transform: 'translate(10, 10)',
r: 6,
fill: '#34495e'
}
}
}, joint.shapes.basic.Generic.prototype.defaults)
});
joint.shapes.uml.Transition = joint.dia.Link.extend({
defaults: {
type: 'uml.Transition',
attrs: {
'.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z', fill: '#34495e', stroke: '#2c3e50' },
'.connection': { stroke: '#2c3e50' }
}
}
});
if (typeof exports === 'object') {
module.exports = joint.shapes.uml;
}

104
spa.html
Unescape View File

@ -15,6 +15,7 @@
<link rel="stylesheet" href="_external/reveal.min.css">
<link rel="stylesheet" href="_external/default.css" id="theme">
<link rel="stylesheet" href="jointjs/joint.min.css">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="_external/zenburn.css">
@ -43,6 +44,10 @@
hyphens: none !important;
-moz-hyphens: none !important;
}
#traditional-1, #traditional-2 {
background-color: white;
}
</style>
</head>
@ -65,7 +70,15 @@
<section>
<section>
<h2>Modelo "Tradicional"</h2>
<h2>Modelo Dinâmico "Tradicional"</h2>
</section>
<section>
<div id='traditional-1'></div>
</section>
<section>
<div id='traditional-2'></div>
</section>
</section>
</div>
@ -74,8 +87,10 @@
<script src="_external/head.min.js"></script>
<script src="_external/reveal.min.js"></script>
<script>
<script src="jointjs/joint.min.js"></script>
<script src="jointjs/joint.shapes.uml.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
@ -97,8 +112,93 @@
{ src: '_external/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
<script id='traditional-1-graph'>
$(function() {
var graph = new joint.dia.Graph;
var uml = joint.shapes.uml;
var paper = new joint.dia.Paper({
el: $('#traditional-1'),
width: 800,
height: 600,
gridSize: 1,
model: graph
});
var elements = {
template: new uml.State({
position: { x:10, y: 100 },
size: { width: 200, height: 400 },
name: "Template"
}),
render: new uml.State({
position: { x: 550, y: 100 },
size: { width: 200, height: 400 },
name: "Página"
})
};
graph.addCells(elements);
var connectors = [
new uml.Transition({ source: { id: elements.template.id },
target: { id: elements.render.id } })
];
graph.addCells(connectors);
});
</script>
<script id='traditional-2-graph'>
$(function() {
var graph = new joint.dia.Graph;
var uml = joint.shapes.uml;
var paper = new joint.dia.Paper({
el: $('#traditional-2'),
width: 800,
height: 600,
gridSize: 1,
model: graph
});
var elements = {
template1: new uml.State({
position: { x: 100, y: 100 },
size: { width: 200, height: 100 },
name: "Template 1"
}),
template2: new uml.State({
position: { x: 100, y: 250 },
size: { width: 200, height: 100 },
name: "Template 2"
}),
template3: new uml.State({
position: { x: 100, y: 400 },
size: { width: 200, height: 100 },
name: "Template 3"
}),
render: new uml.State({
position: { x: 550, y: 100 },
size: { width: 200, height: 400 },
name: "Página"
})
};
graph.addCells(elements);
var connectors = [
new uml.Transition({ source: { id: elements.template1.id },
target: { id: elements.render.id } }),
new uml.Transition({ source: { id: elements.template2.id },
target: { id: elements.render.id } }),
new uml.Transition({ source: { id: elements.template3.id },
target: { id: elements.render.id } })
];
graph.addCells(connectors);
});
</script>
</body>
</html>

Write Preview
Loading…
Cancel
Save