Skip to content

Commit

Permalink
over-uml improvements - dynamic block sizes, colored labels, fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@nikitaeverywhere
nikitaeverywhere committed May 7, 2015
1 parent 0bcac39 commit 9021361
Show file tree
Hide file tree
Showing 6 changed files with 94 additions and 41 deletions.
18 changes: 18 additions & 0 deletions web/css/classView.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,22 @@ text {

.uml-class-name-text:hover {
fill: red;
}

.uml-class-attrs-label {
font-family: monospace;
font-weight: 900;
fill: orange;
}

.uml-class-methods-label {
font-family: monospace;
font-weight: 900;
fill: blue;
}

.uml-class-params-label {
font-family: monospace;
font-weight: 900;
fill: magenta;
}
2 changes: 1 addition & 1 deletion web/css/joint.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

24 changes: 10 additions & 14 deletions web/js/ClassView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,25 +79,26 @@ ClassView.prototype.openClassDoc = function (className, nameSpace) {
*/
ClassView.prototype.createClassInstance = function (name, classMetaData) {

var attrArr, methArr, nameArr,
classParams = classMetaData["parameters"],
var classParams = classMetaData["parameters"],
classProps = classMetaData["properties"],
classMethods = classMetaData["methods"],
self = this;

var insertString = function (array, string, extraString) {
string.match(/.{1,44}/g).forEach(function (p) {
array.push(p + (extraString ? extraString : ""));
});
array.push(string + (extraString ? extraString : ""));
};

return new joint.shapes.uml.Class({
name: nameArr = (classMetaData["ABSTRACT"] ? ["<<Abstract>>", name] : [name]),
attributes: attrArr = (function (params, ps) {
name: (classMetaData["ABSTRACT"] ? ["<<Abstract>>", name] : [name]),
params: (function (params) {
var arr = [], n;
for (n in params) {
insertString(arr, n + (params[n]["type"] ? ": " + params[n]["type"] : ""));
}
return arr;
})(classParams),
attributes: (function (ps) {
var arr = [], n;
for (n in ps) {
insertString(
arr,
Expand All @@ -106,8 +107,8 @@ ClassView.prototype.createClassInstance = function (name, classMetaData) {
);
}
return arr;
})(classParams, classProps),
methods: methArr = (function (met) {
})(classProps),
methods: (function (met) {
var arr = [], n;
for (n in met) {
insertString(
Expand All @@ -126,11 +127,6 @@ ClassView.prototype.createClassInstance = function (name, classMetaData) {
nameClickHandler: function () {
self.openClassDoc(name, classMetaData["NAMESPACE"]);
}
},
size: {
width: 300,
height: Math.max(nameArr.length*12.1, 0) + Math.max(attrArr.length*12.1, 0)
+ Math.max(methArr.length*12.1, 0) + 30
}
});

Expand Down
16 changes: 8 additions & 8 deletions web/js/Lib.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@ Lib.prototype.load = function (url, data, callback) {

xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
try {
//try {
return callback(null, JSON.parse(xhr.responseText) || {})
} catch (e) {
console.error(e);
return callback(
"<h1>Unable to parse server response</h1><p>" + xhr.responseText + "</p>",
null
);
}
//} catch (e) {
// console.error(e);
// return callback(
// "<h1>Unable to parse server response</h1><p>" + xhr.responseText + "</p>",
// null
// );
//}
} else if (xhr.readyState === 4) {
callback(xhr.responseText + ", " + xhr.status + ": " + xhr.statusText);
}
Expand Down
4 changes: 1 addition & 3 deletions web/jsLib/joint.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17145,7 +17145,7 @@ if ( typeof window === "object" && typeof window.document === "object" ) {
// in the top left corner we translate the `<text>` element by `0.8em`.
// See `http://www.w3.org/Graphics/SVG/WG/wiki/How_to_determine_dominant_baseline`.
// See also `http://apike.ca/prog_svg_text_style.html`.
this.attr('y', '0.8em');
this.attr('y', opt.paddingTop || '0.8em');

// An empty text gets rendered into the DOM in webkit-based browsers.
// In order to unify this behaviour across all browsers
Expand Down Expand Up @@ -20943,9 +20943,7 @@ joint.dia.ElementView = joint.dia.CellView.extend({
// Vectorizer `text()` method sets on the element its own attributes and it has to be possible
// to rewrite them, if needed. (i.e display: 'none')
if (!_.isUndefined(attrs.text)) {

$selected.each(function() {

V(this).text(attrs.text + '', attrs);
});
specialAttributes.push('lineHeight','textPath');
Expand Down
71 changes: 56 additions & 15 deletions web/jsLib/joint.shapes.uml.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,38 +27,56 @@ 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"/>',
'<rect class="uml-class-name-rect"/><rect class="uml-class-params-rect"/><text class="uml-class-params-label">Parameters</text><rect class="uml-class-attrs-rect"/><text class="uml-class-attrs-label">Properties</text><rect class="uml-class-methods-rect"/><text class="uml-class-methods-label">Methods</text>',
'</g>',
'<text class="uml-class-name-text"/><text class="uml-class-attrs-text"/><text class="uml-class-methods-text"/>',
'<text class="uml-class-name-text"/><text class="uml-class-params-text"/><text class="uml-class-attrs-text"/><text class="uml-class-methods-text"/>',
'</g>'
].join(''),

defaults: joint.util.deepSupplement({

type: 'uml.Class',

size: { width: 300, height: 300 },

attrs: {
rect: { 'width': 200 },

'.uml-class-name-rect': { 'stroke': 'black', 'stroke-width': 1, 'fill': '#3498db' },
'.uml-class-params-rect': { 'stroke': 'black', 'stroke-width': 1, 'fill': 'white' },
'.uml-class-attrs-rect': { 'stroke': 'black', 'stroke-width': 1, 'fill': '#2980b9' },
'.uml-class-methods-rect': { 'stroke': 'black', 'stroke-width': 1, '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'
'fill': 'black', 'font-size': 12
},
'.uml-class-params-text': {
'ref': '.uml-class-params-rect', 'ref-y': 5, 'ref-x': 5,
'fill': 'black', 'font-size': 12
},
'.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'
'fill': 'black', 'font-size': 12
},
'.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'
'fill': 'black', 'font-size': 12
},
'.uml-class-attrs-label': {
ref: '.uml-class-attrs-label', fill: "black", 'font-size': 10,
xPos: -56
},
'.uml-class-methods-label': {
ref: '.uml-class-methods-label', fill: "black", 'font-size': 10
},
'.uml-class-params-label': {
ref: '.uml-class-methods-label', fill: "black", 'font-size': 10
}
},

name: [],
params: [],
attributes: [],
methods: []

Expand All @@ -68,7 +86,7 @@ joint.shapes.uml.Class = joint.shapes.basic.Generic.extend({

this.on('change:name change:attributes change:methods', function() {
this.updateRectangles();
this.trigger('uml-update');
this.trigger('uml-update');
}, this);

this.updateRectangles();
Expand All @@ -87,31 +105,55 @@ joint.shapes.uml.Class = joint.shapes.basic.Generic.extend({

var rects = [
{ type: 'name', text: this.getClassName() },
{ type: 'params', text: this.get('params') },
{ type: 'attrs', text: this.get('attributes') },
{ type: 'methods', text: this.get('methods') }
];

var offsetY = 0;
var offsetY = 0,
maxWidth = 100;

var dp = self.get("directProps") || {},
nameClickHandler = dp.nameClickHandler;

_.each(rects, function (rect) {
(rect.text instanceof Array ? rect.text : [rect.text]).forEach(function (s) { var t = s.split("\x1b")[0].length*6.66 + 8; if (t > maxWidth) {
maxWidth = t;
}});
});

this.attributes.size.width = maxWidth; // max width assign

_.each(rects, function(rect) {

var lines = _.isArray(rect.text) ? rect.text : [rect.text];
var rectHeight = lines.length * 20 + 20;
var lines = _.isArray(rect.text) ? rect.text : [rect.text],
rectHeight = lines.length * 12 + (lines.length ? 10 : 0),
rectText = attrs['.uml-class-' + rect.type + '-text'],
rectRect = attrs['.uml-class-' + rect.type + '-rect'],
rectLabel = attrs['.uml-class-' + rect.type + '-label'];

attrs['.uml-class-' + rect.type + '-text'].text = lines.join('\n');
rectText.text = lines.join('\n');
if (nameClickHandler) {
if (rect.type === "name") {
attrs['.uml-class-' + rect.type + '-text'].clickHandler = nameClickHandler;
rectText.clickHandler = nameClickHandler;
}
}
rectRect.transform = 'translate(0,'+ offsetY + ')';
if (rectLabel) {
if (lines.length) {
rectText.paddingTop = "17px"; rectHeight += 5;
rectLabel.transform = 'translate(' + (2) + ','+ (offsetY + 9) + ')';
} else {
rectLabel.display = "none";
}
}
attrs['.uml-class-' + rect.type + '-rect'].height = rectHeight;
attrs['.uml-class-' + rect.type + '-rect'].transform = 'translate(0,'+ offsetY + ')';
rectRect.height = rectHeight;
offsetY += rectHeight;

});

this.attributes.size.height = offsetY;
this.attributes.attrs.rect.width = maxWidth;
}

});
Expand All @@ -135,6 +177,7 @@ joint.shapes.uml.Abstract = joint.shapes.uml.Class.extend({
type: 'uml.Abstract',
attrs: {
'.uml-class-name-rect': { fill : '#e74c3c' },
'.uml-class-params-rect': { fill : '#c0392b' },
'.uml-class-attrs-rect': { fill : '#c0392b' },
'.uml-class-methods-rect': { fill : '#c0392b' }
}
Expand Down Expand Up @@ -258,12 +301,10 @@ joint.shapes.uml.State = joint.shapes.basic.Generic.extend({
},

updateName: function() {

this.attr('.uml-state-name/text', this.get('name'));
},

updateEvents: function() {

this.attr('.uml-state-events/text', this.get('events').join('\n'));
},

Expand Down

0 comments on commit 9021361

Please sign in to comment.