diff --git a/addon/mixins/actions-for-primitives/fd-actions-for-activity-primitives.js b/addon/mixins/actions-for-primitives/fd-actions-for-activity-primitives.js index 2c7fea991..83d96e808 100644 --- a/addon/mixins/actions-for-primitives/fd-actions-for-activity-primitives.js +++ b/addon/mixins/actions-for-primitives/fd-actions-for-activity-primitives.js @@ -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 }); @@ -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 }); @@ -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 }); @@ -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 }); @@ -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 }); @@ -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 }); @@ -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 }); diff --git a/addon/objects/uml-primitives/fd-uml-active-state.js b/addon/objects/uml-primitives/fd-uml-active-state.js index 9ebb0aff4..a1dd27070 100644 --- a/addon/objects/uml-primitives/fd-uml-active-state.js +++ b/addon/objects/uml-primitives/fd-uml-active-state.js @@ -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'; @@ -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: [ @@ -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. @@ -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() { diff --git a/addon/objects/uml-primitives/fd-uml-complex-transition.js b/addon/objects/uml-primitives/fd-uml-complex-transition.js index 420ecb99b..12d7409d4 100644 --- a/addon/objects/uml-primitives/fd-uml-complex-transition.js +++ b/addon/objects/uml-primitives/fd-uml-complex-transition.js @@ -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; @@ -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(); @@ -228,7 +228,7 @@ joint.shapes.flexberry.uml.ComplexTransitionHView = joint.shapes.flexberry.uml.P }]); }, - setColors() { + setColors() { const textColor = this.getTextColor(); if (!isNone(textColor)) { diff --git a/addon/objects/uml-primitives/fd-uml-decision.js b/addon/objects/uml-primitives/fd-uml-decision.js index dc4122064..aa8ed2f4b 100644 --- a/addon/objects/uml-primitives/fd-uml-decision.js +++ b/addon/objects/uml-primitives/fd-uml-decision.js @@ -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. @@ -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: [ '', '', '' - ].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); + } + } +}); diff --git a/addon/objects/uml-primitives/fd-uml-object-flow.js b/addon/objects/uml-primitives/fd-uml-object-flow.js index 4bf08a29d..9c7472e0b 100644 --- a/addon/objects/uml-primitives/fd-uml-object-flow.js +++ b/addon/objects/uml-primitives/fd-uml-object-flow.js @@ -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'; @@ -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); + } + } +}); diff --git a/addon/objects/uml-primitives/fd-uml-signal-receipt.js b/addon/objects/uml-primitives/fd-uml-signal-receipt.js index 33c75992d..f3d63b0cc 100644 --- a/addon/objects/uml-primitives/fd-uml-signal-receipt.js +++ b/addon/objects/uml-primitives/fd-uml-signal-receipt.js @@ -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'; @@ -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: [ '', '', '' - ].join('') + ].join(''), + + getRectangles() { + return [ + { type: 'header', element: this }, + ]; + }, }); joint.shapes.flexberry.uml.SignalReceiptRightView = joint.shapes.flexberry.uml.BaseObjectView.extend({ @@ -94,13 +107,15 @@ joint.shapes.flexberry.uml.SignalReceiptRightView = joint.shapes.flexberry.uml.B '' ].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'); @@ -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 + ')'); @@ -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) { @@ -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); + } } }); diff --git a/addon/objects/uml-primitives/fd-uml-transition.js b/addon/objects/uml-primitives/fd-uml-transition.js index 58b0d11e2..dd008f810 100644 --- a/addon/objects/uml-primitives/fd-uml-transition.js +++ b/addon/objects/uml-primitives/fd-uml-transition.js @@ -5,6 +5,7 @@ import joint from 'npm:jointjs'; import FdUmlBaseLink from './fd-uml-link'; import { computed } from '@ember/object'; +import { isNone } from '@ember/utils'; import { Connection } from './fd-uml-connection'; import { Dependency } from './fd-uml-dependency'; import { NormalizedDescriptionView } from './links-view/fd-normalized-description-view'; @@ -59,4 +60,14 @@ export let Transition = Connection.define('flexberry.uml.Transition', { } }); -joint.shapes.flexberry.uml.TransitionView = NormalizedDescriptionView.extend(); +joint.shapes.flexberry.uml.TransitionView = NormalizedDescriptionView.extend({ + setColors() { + NormalizedDescriptionView.prototype.setColors.apply(this, arguments); + + const textColor = this.getTextColor(); + + if (!isNone(textColor)) { + this.model.attr('.marker-target/stroke', textColor); + } + } +});