over-uml improvements - dynamic block sizes, colored labels, fixes

nikitaeverywhere · nikitaeverywhere · commit 90213617323f · 2015-05-07T21:40:53.000+03:00
diff --git a/web/css/classView.css b/web/css/classView.css
@@ -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;
 }
diff --git a/web/css/joint.min.css b/web/css/joint.min.css
diff --git a/web/js/ClassView.js b/web/js/ClassView.js
@@ -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,
@@ -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(
@@ -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
         }
     });
 
diff --git a/web/js/Lib.js b/web/js/Lib.js
@@ -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);
         }
diff --git a/web/jsLib/joint.js b/web/jsLib/joint.js
@@ -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
@@ -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');
diff --git a/web/jsLib/joint.shapes.uml.js b/web/jsLib/joint.shapes.uml.js
@@ -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: []
 
@@ -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();
@@ -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;
     }
 
 });
@@ -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' }
         }
@@ -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'));
     },
 
