Skip to content

Commit

Permalink
Add resize and color to activity diagram (#633)
Browse files Browse the repository at this point in the history
  • Loading branch information
@DubrovinPavel
DubrovinPavel authored Feb 12, 2020
1 parent 8b30b74 commit 875957b
Show file tree
Hide file tree
Showing 7 changed files with 173 additions and 36 deletions.
14 changes: 7 additions & 7 deletions addon/mixins/actions-for-primitives/fd-actions-for-activity-primitives.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default Mixin.create({
let jsonObject = getJsonForElement(
'STORMCASE.UML.ad.Decision, UMLAD',
{ x, y },
{ width: 70, height: 40 },
{ width: 40, height: 20 },
);

let newDecisionObject = FdUmlDecision.create({ primitive: jsonObject });
Expand All @@ -62,7 +62,7 @@ export default Mixin.create({
let jsonObject = getJsonForElement(
'STORMCASE.UML.ad.State, UMLAD',
{ x, y },
{ width: 110, height: 90 },
{ width: 40, height: 40 },
{ Name: '', Text: '' },
);
let activeStateObject = FdUmlActiveState.create({ primitive: jsonObject });
Expand Down Expand Up @@ -162,7 +162,7 @@ export default Mixin.create({
let jsonObject = getJsonForElement(
'STORMCASE.UML.ad.ObjectInState, UMLAD',
{ x, y },
{ width: 110, height: 90 },
{ width: 40, height: 40 },
{ Name: '', Text: '' },
);
let objectInStateObject = FdUmlObjectInState.create({ primitive: jsonObject });
Expand All @@ -182,7 +182,7 @@ export default Mixin.create({
let jsonObject = getJsonForElement(
'STORMCASE.UML.ad.SignalReceiptLeft, UMLAD',
{ x, y },
{ width: 100, height: 30 },
{ width: 40, height: 20 },
{ Name: '' },
);
let signalReceiptObject = FdUmlSignalReceipt.create({ primitive: jsonObject });
Expand All @@ -202,7 +202,7 @@ export default Mixin.create({
let jsonObject = getJsonForElement(
'STORMCASE.UML.ad.SignalReceiptRight, UMLAD',
{ x, y },
{ width: 100, height: 30 },
{ width: 40, height: 20 },
{ Name: '' },
);
let signalReceiptObject = FdUmlSignalReceipt.create({ primitive: jsonObject });
Expand All @@ -222,7 +222,7 @@ export default Mixin.create({
let jsonObject = getJsonForElement(
'STORMCASE.UML.ad.SignalSendLeft, UMLAD',
{ x, y },
{ width: 100, height: 30 },
{ width: 40, height: 20 },
{ Name: '' },
);
let signalSendObject = FdUmlSignalSend.create({ primitive: jsonObject });
Expand All @@ -242,7 +242,7 @@ export default Mixin.create({
let jsonObject = getJsonForElement(
'STORMCASE.UML.ad.SignalSendRight, UMLAD',
{ x, y },
{ width: 100, height: 30 },
{ width: 40, height: 20 },
{ Name: '' },
);
let signalSendObject = FdUmlSignalSend.create({ primitive: jsonObject });
Expand Down
27 changes: 21 additions & 6 deletions addon/objects/uml-primitives/fd-uml-active-state.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,13 @@
@module ember-flexberry-designer
*/

import { BaseObject } from './fd-uml-baseobject';
import FdUmlObject from './fd-uml-baseobject';
import { computed } from '@ember/object';
import { isArray } from '@ember/array';
import { isBlank } from '@ember/utils';

import { BaseObject } from './fd-uml-baseobject';
import FdUmlObject from './fd-uml-baseobject';

import $ from 'jquery';
import joint from 'npm:jointjs';

Expand Down Expand Up @@ -73,7 +75,19 @@ export default FdUmlObject.extend({
@namespace flexberry.uml
@constructor
*/
export let ActiveState = BaseObject.define('flexberry.uml.ActiveState', {});
export let ActiveState = BaseObject.define('flexberry.uml.ActiveState', {
// Minimum height.
minHeight: 40,

// Minimum width.
minWidth: 40,
}, {
getRectangles() {
return [
{ type: 'header', element: this },
];
},
});

joint.shapes.flexberry.uml.ActiveStateView = joint.shapes.flexberry.uml.BaseObjectView.extend({
template: [
Expand All @@ -85,10 +99,8 @@ joint.shapes.flexberry.uml.ActiveStateView = joint.shapes.flexberry.uml.BaseObje
].join(''),

initialize: function () {
joint.dia.ElementView.prototype.initialize.apply(this, arguments);
joint.shapes.flexberry.uml.PrimitiveElementView.prototype.initialize.apply(this, arguments);

this.$box = $(this.template);
this.model.inputElements = this.$box;
let _this = this;

// Prevent paper from handling pointerdown.
Expand Down Expand Up @@ -140,6 +152,9 @@ joint.shapes.flexberry.uml.ActiveStateView = joint.shapes.flexberry.uml.BaseObje

// Remove the box when the model gets removed from the graph.
this.model.on('remove', this.removeBox, this);

const initSize = this.model.size();
this.updateRectangles(initSize.width, initSize.height);
},

updateInputValue() {
Expand Down
6 changes: 3 additions & 3 deletions addon/objects/uml-primitives/fd-uml-complex-transition.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ joint.shapes.flexberry.uml.ComplexTransitionHView = joint.shapes.flexberry.uml.P
].join(''),

initialize: function () {
joint.dia.ElementView.prototype.initialize.apply(this, arguments);
joint.shapes.flexberry.uml.PrimitiveElementView.prototype.initialize.apply(this, arguments);

this.$box = $(this.template);
this.model.inputElements = this.$box;
Expand Down Expand Up @@ -148,7 +148,7 @@ joint.shapes.flexberry.uml.ComplexTransitionHView = joint.shapes.flexberry.uml.P
},

render: function () {
joint.dia.ElementView.prototype.render.apply(this, arguments);
joint.shapes.flexberry.uml.PrimitiveElementView.prototype.render.apply(this, arguments);
this.paper.$el.prepend(this.$box);
this.paper.on('blank:pointerdown link:pointerdown element:pointerdown', function () {
this.$box.find('input:focus, textarea:focus').blur();
Expand Down Expand Up @@ -228,7 +228,7 @@ joint.shapes.flexberry.uml.ComplexTransitionHView = joint.shapes.flexberry.uml.P
}]);
},

setColors() {
setColors() {
const textColor = this.getTextColor();

if (!isNone(textColor)) {
Expand Down
78 changes: 73 additions & 5 deletions addon/objects/uml-primitives/fd-uml-decision.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,14 @@
@module ember-flexberry-designer
*/

import joint from 'npm:jointjs';
import { BaseObject } from './fd-uml-baseobject';
import { A } from '@ember/array';
import { isNone } from '@ember/utils';

import { BaseObject } from './fd-uml-baseobject';
import FdUmlElement from './fd-uml-element';

import joint from 'npm:jointjs';

/**
An object that describes a Decision on an activity UML diagram.
Expand Down Expand Up @@ -43,13 +46,78 @@ export let Decision = BaseObject.define('flexberry.uml.Decision', {
'stroke-width': 1,
'd': 'M 0 30 L 60 0 120 30 60 60 Z'
}
}
},

// Minimum height.
minHeight: 20,

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

joint.shapes.flexberry.uml.DecisionView = joint.shapes.flexberry.uml.PrimitiveElementView.extend({});
joint.shapes.flexberry.uml.DecisionView = joint.shapes.flexberry.uml.PrimitiveElementView.extend({

initialize: function () {
joint.shapes.flexberry.uml.PrimitiveElementView.prototype.initialize.apply(this, arguments);

const initSize = this.model.size();
this.updateRectangles(initSize.width, initSize.height);
},

updateRectangles(resizedWidth, resizedHeight) {
let _this = this;
let rects = this.model.getRectangles();
let newHeight = 0;
let newWidth = 0;
const minWidth = this.model.attributes.minWidth;
const minHeight = this.model.attributes.minHeight;
const oldSize = this.model.size();

newWidth += (this.model.get('widthPadding') || 0) * 2;
let setWidth = Math.max(newWidth, resizedWidth || oldSize.width, minWidth);
let setHight = Math.max(newHeight, resizedHeight || oldSize.height, minHeight);

this.model.resize(setWidth, setHight);
if (this.model.get('highlighted')) {
this.unhighlight();
this.highlight();
}

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

recalculatePathPoints(setWidth, setHight) {
//calculating path points
let points = A();
points[0] = '0 ' + (setHight/2).toString();
points[1] = (setWidth/2).toString() + ' 0';
points[2] = (setWidth).toString() + ' '+ (setHight/2).toString();
points[3] = (setWidth/2).toString() + ' '+ (setHight).toString();
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('.flexberry-uml-header-rombus-path/stroke', textColor);
}

if (!isNone(brushColor)) {
this.model.attr('.flexberry-uml-header-rombus-path/fill', brushColor);
}
}
});
13 changes: 12 additions & 1 deletion addon/objects/uml-primitives/fd-uml-object-flow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
import joint from 'npm:jointjs';

import FdUmlBaseLink from './fd-uml-link';
import { isNone } from '@ember/utils';
import { Dependency } from './fd-uml-dependency';
import { NormalizedDescriptionView } from './links-view/fd-normalized-description-view';

Expand Down Expand Up @@ -46,4 +47,14 @@ export let ObjectFlow = Dependency.define('flexberry.uml.ObjectFlow', {
},
});

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

const textColor = this.getTextColor();

if (!isNone(textColor)) {
this.model.attr('.marker-target/stroke', textColor);
}
}
});
58 changes: 45 additions & 13 deletions addon/objects/uml-primitives/fd-uml-signal-receipt.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 { BaseObject } from './fd-uml-baseobject';
import FdUmlElement from './fd-uml-element';
Expand Down Expand Up @@ -77,13 +78,25 @@ export let SignalReceiptRight = BaseObject.define('flexberry.uml.SignalReceiptRi
'stroke-width': 1,
'd': 'M 0 0 L 100 0 80 20 100 40 0 40 Z',
}
}
},

// Minimum width.
minWidth: 40,

// Minimum height.
minHeight: 20,
}, {
markup: [
'<g class="rotatable">',
'<path class="flexberry-uml-header-rect-path"/>',
'</g>'
].join('')
].join(''),

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

joint.shapes.flexberry.uml.SignalReceiptRightView = joint.shapes.flexberry.uml.BaseObjectView.extend({
Expand All @@ -94,13 +107,15 @@ joint.shapes.flexberry.uml.SignalReceiptRightView = joint.shapes.flexberry.uml.B
'</div>'
].join(''),

updateRectangles() {
updateRectangles: function (resizedWidth, resizedHeight) {
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 rectHeight = 0;
let inputs = rect.element.inputElements.find('.signal-input');
Expand All @@ -124,7 +139,12 @@ joint.shapes.flexberry.uml.SignalReceiptRightView = joint.shapes.flexberry.uml.B

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 @@ -134,22 +154,19 @@ joint.shapes.flexberry.uml.SignalReceiptRightView = joint.shapes.flexberry.uml.B

newWidth += (this.model.get('widthPadding') || 0) * 2;

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


rects.forEach((rect) => {
let points = this.recalculatePathPoints(newWidth, newHeight);
let points = this.recalculatePathPoints(Math.max(newWidth, resizedWidth || oldSize.width, minWidth), Math.max(newHeight, resizedHeight || oldSize.height, minHeight));
//set path
rect.element.attr('.flexberry-uml-header-rect-path/d', 'M '+ points[0] + ' L ' + points[1] + ' ' + points[2] + ' ' + points[3] + ' ' + points[4] + ' Z');
});

this.model.resize(newWidth, newHeight);

this.model.resize(Math.max(newWidth, resizedWidth || oldSize.width, minWidth), Math.max(newHeight, resizedHeight || oldSize.height, minHeight));
if (this.model.get('highlighted')) {
this.unhighlight();
this.highlight();
}
}
},

recalculatePathPoints(newWidth, newHeight) {
Expand All @@ -164,6 +181,21 @@ joint.shapes.flexberry.uml.SignalReceiptRightView = joint.shapes.flexberry.uml.B
points[4] = '0 ' + newHeight.toString();

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('.flexberry-uml-header-rect-path/stroke', textColor);
}

if (!isNone(brushColor)) {
this.model.attr('.flexberry-uml-header-rect-path/fill', brushColor);
}
}
});

Expand Down
Loading

0 comments on commit 875957b

Please sign in to comment.