Skip to content

Commit

Permalink
Add resize and colors to deployment diagram (#495)
Browse files Browse the repository at this point in the history
  • Loading branch information
@PashaMasalkin
PashaMasalkin authored Feb 6, 2020
1 parent 23d7b01 commit 254e89d
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 37 deletions.
34 changes: 32 additions & 2 deletions addon/objects/uml-primitives/fd-uml-component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

import { computed } from '@ember/object';
import { isArray } from '@ember/array';
import { isNone } from '@ember/utils';

import { BaseObject } from './fd-uml-baseobject';
import FdUmlElement from './fd-uml-element';
Expand Down Expand Up @@ -60,7 +61,13 @@ export let Component = BaseObject.define('flexberry.uml.Component', {
attrs: {
'.firstRect': {'refY': '50%', 'refY2': '-8', 'fill': 'white', 'stroke': 'black', 'stroke-width': 1 },
'.secondRect': { 'refY': '50%', 'refY2': '2', 'fill': 'white', 'stroke': 'black', 'stroke-width': 1 }
}
},

// Minimum height.
minHeight: 30,

// Minimum width
minWidth: 80,
}, {
markup: [
'<g class="rotatable">',
Expand All @@ -71,7 +78,13 @@ export let Component = BaseObject.define('flexberry.uml.Component', {
'</g>',
'<text class="flexberry-uml-header-text"/>',
'</g>'
].join('')
].join(''),

getRectangles() {
return [
{ type: 'header', element: this }
];
},
});

joint.shapes.flexberry.uml.ComponentView = joint.shapes.flexberry.uml.BaseObjectView.extend({
Expand All @@ -81,4 +94,21 @@ joint.shapes.flexberry.uml.ComponentView = joint.shapes.flexberry.uml.BaseObject
'<div class="input-buffer"></div>',
'</div>'
].join(''),

setColors() {
joint.shapes.flexberry.uml.BaseObjectView.prototype.setColors.apply(this, arguments);

const brushColor = this.getBrushColor();
const textColor = this.getTextColor();

if (!isNone(textColor)) {
this.model.attr('.firstRect/stroke', textColor);
this.model.attr('.secondRect/stroke', textColor);
}

if (!isNone(brushColor)) {
this.model.attr('.firstRect/fill', brushColor);
this.model.attr('.secondRect/fill', brushColor);
}
}
});
15 changes: 14 additions & 1 deletion addon/objects/uml-primitives/fd-uml-connection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import FdUmlBaseLink from './fd-uml-link';
import { Dependency } from './fd-uml-dependency';
import { DescriptionView } from './links-view/fd-description-view';

import { isNone } from '@ember/utils';

import joint from 'npm:jointjs';

/**
Expand Down Expand Up @@ -40,4 +42,15 @@ export let Connection = Dependency.define('flexberry.uml.Connection', {
attrs: { '.connection': { 'stroke-dasharray': 0 } }
});

joint.shapes.flexberry.uml.ConnectionView = DescriptionView;
joint.shapes.flexberry.uml.ConnectionView = DescriptionView.extend({
setColors() {
DescriptionView.prototype.setColors.apply(this, arguments);

const textColor = this.getTextColor();

if (!isNone(textColor)) {
this.model.attr('.marker-target/stroke', textColor);
}
}
});

13 changes: 12 additions & 1 deletion addon/objects/uml-primitives/fd-uml-deployment-active-object.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,18 @@ export let DeploymentActiveObject = BaseObject.define('flexberry.uml.DeploymentA
'visibility': 'visible',
},
'.flexberry-uml-header-rect': { 'stroke-width': 3 },
}
},
// Minimum width.
minWidth: 80,

// Minimum height.
minHeight: 30,
}, {
getRectangles() {
return [
{ type: 'header', element: this }
];
},
});

joint.shapes.flexberry.uml.DeploymentActiveObjectView = joint.shapes.flexberry.uml.BaseObjectView.extend({
Expand Down
106 changes: 73 additions & 33 deletions addon/objects/uml-primitives/fd-uml-node.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

import { computed } from '@ember/object';
import { A, isArray } from '@ember/array';
import { isNone } from '@ember/utils';

import FdUmlElement from './fd-uml-element';
import { BaseObject } from './fd-uml-baseobject';
Expand Down Expand Up @@ -58,16 +59,29 @@ export default FdUmlElement.extend({
@constructor
*/
export let UmlNode = BaseObject.define('flexberry.uml.UmlNode', {
attrs: {
'.back-path': { 'd': 'M 0 0 L 5 -5 70 -5 70 12 65 17 M 65 0 L 70 -5', 'fill': 'white', 'stroke': 'black', 'stroke-width': 1 }
},
markup: [
'<g class="rotatable">',
'<path class="back-path"/>',
'<rect class="flexberry-uml-header-rect"/>',
'<text class="flexberry-uml-header-text"/>',
'</g>'
].join('')
attrs: {
'.back-path': { 'd': 'M 0 0 L 5 -5 70 -5 70 12 65 17 M 65 0 L 70 -5', 'fill': 'white', 'stroke': 'black', 'stroke-width': 1 }
},

// Minimum height.
minHeight: 30,

// Minimum width
minWidth: 80,
}, {
markup: [
'<g class="rotatable">',
'<path class="back-path"/>',
'<rect class="flexberry-uml-header-rect"/>',
'<text class="flexberry-uml-header-text"/>',
'</g>'
].join(''),

getRectangles() {
return [
{ type: 'header', element: this }
];
},
});


Expand All @@ -79,25 +93,26 @@ joint.shapes.flexberry.uml.UmlNodeView = joint.shapes.flexberry.uml.BaseObjectVi
'</div>'
].join(''),


updateRectangles() {
updateRectangles(resizedWidth, resizedHeight) {
let _this = this;
let rects = this.model.getRectangles();

let offsetY = 0;
let newHeight = 0;
let newWidth = 0;
rects.forEach(function (rect) {
const minWidth = this.model.attributes.minWidth;
const minHeight = this.model.attributes.minHeight;
const oldSize = this.model.size();
rects.forEach(function(rect, index, array) {
if (this.markup.includes('flexberry-uml-' + rect.type + '-rect') && rect.element.inputElements) {
let $buffer = rect.element.inputElements.find('.input-buffer');
let rectHeight = 0;
let inputs = rect.element.inputElements.find('.' + rect.type + '-input');
let inputsDiv = inputs[0].parentElement;
if (! inputsDiv.parentElement || ! inputsDiv.parentElement.className.includes('joint-paper')) {
let jointPaper = $('.joint-paper')[0];
jointPaper.appendChild(inputsDiv);
}

inputs.each(function () {
let $buffer = rect.element.inputElements.find('.input-buffer');
inputs.each(function() {
let $input = $(this);
$buffer.css('font-weight', $input.css('font-weight'));
$buffer.text($input.val());
Expand All @@ -111,7 +126,12 @@ joint.shapes.flexberry.uml.UmlNodeView = joint.shapes.flexberry.uml.BaseObjectVi

rectHeight += rect.element.get('heightBottomPadding') || 0;
newHeight += rectHeight;
rect.element.attr('.flexberry-uml-' + rect.type + '-rect/height', rectHeight);
if (array.length === index + 1) {
this.set('inputHeight', newHeight);
rect.element.attr('.flexberry-uml-' + rect.type + '-rect/height', Math.max((resizedHeight || oldSize.height) - offsetY, minHeight - offsetY, rectHeight));
} else {
rect.element.attr('.flexberry-uml-' + rect.type + '-rect/height', rectHeight);
}

rect.element.attr('.flexberry-uml-' + rect.type + '-rect/transform', 'translate(0,' + offsetY + ')');

Expand All @@ -120,33 +140,53 @@ joint.shapes.flexberry.uml.UmlNodeView = joint.shapes.flexberry.uml.BaseObjectVi
}, this.model);

newWidth += (this.model.get('widthPadding') || 0) * 2;
rects.forEach(function (rect) {
rect.element.attr('.flexberry-uml-' + rect.type + '-rect/width', newWidth);
let setWidth = Math.max(newWidth, resizedWidth || oldSize.width, minWidth);
let setHight = Math.max(newHeight, resizedHeight || oldSize.height, minHeight);

this.model.set('inputWidth', newWidth);
rects.forEach(function(rect) {
rect.element.attr('.flexberry-uml-' + rect.type + '-rect/width', setWidth);
});

this.model.resize(newWidth, newHeight);
this.model.resize(setWidth, setHight);

rects.forEach(function(rect) {
let points = _this.recalculatePathPoints(setWidth, setHight);
//set path
rect.element.attr('.back-path/d', 'M '+ points[0] + ' L ' + points[1] + ' ' + points[2] + ' ' + points[3] + ' ' + points[4] + 'M '+ points[5] + ' L ' + points[6] );
}, this.model);

if (this.model.get('highlighted')) {
this.unhighlight();
this.highlight();
}

rects.forEach((rect) => {
let points = this.recalculatePathPoints(newWidth, newHeight);
//set path
rect.element.attr('.back-path/d', 'M '+ points[0] + ' L ' + points[1] + ' ' + points[2] + ' ' + points[3] + ' ' + points[4] + 'M '+ points[5] + ' L ' + points[6] );
});
},

recalculatePathPoints(newWidth, newHeight) {
recalculatePathPoints(setWidth, setHight) {
//calculating path points
let points = A();
points[0] = '0 0';
points[1] = '5 -5';
points[2] = (newWidth + 5).toString() + ' -5';
points[3] = (newWidth + 5).toString() + ' ' + (newHeight - 5 ).toString();
points[4] = newWidth.toString() + ' ' + newHeight.toString();
points[5] = newWidth.toString() + ' 0';
points[6] = (newWidth + 5).toString() + ' -5';
points[2] = (setWidth + 5).toString() + ' -5';
points[3] = (setWidth + 5).toString() + ' ' + (setHight - 5 ).toString();
points[4] = setWidth.toString() + ' ' + setHight.toString();
points[5] = setWidth.toString() + ' 0';
points[6] = (setWidth + 5).toString() + ' -5';
return points;
},

setColors() {
joint.shapes.flexberry.uml.BaseObjectView.prototype.setColors.apply(this, arguments);

const brushColor = this.getBrushColor();
const textColor = this.getTextColor();

if (!isNone(textColor)) {
this.model.attr('.back-path/stroke', textColor);
}

if (!isNone(brushColor)) {
this.model.attr('.back-path/fill', brushColor);
}
}
});

0 comments on commit 254e89d

Please sign in to comment.