Skip to content

Commit

Permalink
Change actors size with proportions (#635)
Browse files Browse the repository at this point in the history
  • Loading branch information
TeterinaSvetlana authored Feb 26, 2020
1 parent 258c3d0 commit 839f68d
Show file tree
Hide file tree
Showing 6 changed files with 98 additions and 6 deletions.
33 changes: 30 additions & 3 deletions addon/components/fd-uml-diagram.js
Original file line number Diff line number Diff line change
Expand Up @@ -649,9 +649,35 @@ export default Component.extend(
let shiftedPositionY = y + shift.y;
if (data.widthResize || data.heightResize) {
const oldSize = data.ghost.size();
const position = data.ghost.position();
let coordinates = forPointerMethodOverrideResizeAndDnd(evt, x, y);
data.ghost.resize(data.widthResize ? Math.max(coordinates.x - position.x, view.model.attributes.inputWidth || 0, view.model.attributes.minWidth || 0) : oldSize.width, data.heightResize ? Math.max(coordinates.y - position.y, view.model.attributes.inputHeight || 0, view.model.attributes.minHeight || 0) : oldSize.height);
let newSize = {
width: oldSize.width,
height: oldSize.height
};
if (data.prop) {
if (data.widthResize && data.heightResize) {
newSize.width = x - view.model.getBBox().x;
} else {
if (data.widthResize) {
newSize.width = x - view.model.getBBox().x
}
if (data.heightResize) {
newSize.height = y - view.model.getBBox().y
}
}
if (newSize.height < view.model.attributes.minHeight) {
newSize.height = view.model.attributes.minHeight
}
if (newSize.width < view.model.attributes.minWidth) {
newSize.width = view.model.attributes.minWidth
}
let propHeight = newSize.height + ((newSize.width - oldSize.width) / oldSize.width) * newSize.height;
let propWidth = newSize.width + ((newSize.height - oldSize.height) / oldSize.height) * newSize.width;
data.ghost.resize(propWidth, propHeight);
} else {
const position = data.ghost.position();
let coordinates = forPointerMethodOverrideResizeAndDnd(evt, x, y);
data.ghost.resize(data.widthResize ? Math.max(coordinates.x - position.x, view.model.attributes.inputWidth || 0, view.model.attributes.minWidth || 0) : oldSize.width, data.heightResize ? Math.max(coordinates.y - position.y, view.model.attributes.inputHeight || 0, view.model.attributes.minHeight || 0) : oldSize.height);
}
} else {

//get border for embed element move restriction. [minX, maxX, minY, maxY]
Expand Down Expand Up @@ -686,6 +712,7 @@ export default Component.extend(
const button = $(evt.target.parentElement);
evt.data.widthResize = button.hasClass('right-down-size-button') || button.hasClass('right-size-button');
evt.data.heightResize = button.hasClass('right-down-size-button') || button.hasClass('down-size-button');
evt.data.prop = button.hasClass('prop');
evt.data.shift = { x: bbox.x - x, y: bbox.y - y};
}
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export default Mixin.create({
let jsonObject = getJsonForElement(
'STORMCASE.UML.ucd.Actor, UMLUCD',
{ x, y },
{ width: 25, height: 50 },
{ width: 5, height: 60 },
{ Name: '' }
);
let usecaseActorObject = fdUseCaseActor.create({ primitive: jsonObject });
Expand Down
11 changes: 10 additions & 1 deletion addon/objects/uml-primitives/fd-uml-note.js
Original file line number Diff line number Diff line change
Expand Up @@ -95,8 +95,17 @@ joint.util.setByPath(joint.shapes, 'flexberry.uml.Note', Note, '.');
joint.shapes.flexberry.uml.NoteView = joint.shapes.flexberry.uml.BaseObjectView.extend({
template: [
'<div class="uml-class-inputs">',
'<textarea class="class-name-input header-input" value="" rows="1" wrap="off"></textarea>',
'<textarea class="class-name-input header-input" value="" rows="1" wrap="off" style="text-align: left;"></textarea>',
'<div class="input-buffer"></div>',
'</div>'
].join(''),

initialize: function () {
joint.shapes.flexberry.uml.BaseObjectView.prototype.initialize.apply(this, arguments);
let paramsBox = this.$box.find('.header-input');
paramsBox.css({
left: 2,
position: 'absolute'
});
},
});
3 changes: 3 additions & 0 deletions addon/objects/uml-primitives/fd-uml-primitive.js
Original file line number Diff line number Diff line change
Expand Up @@ -449,6 +449,9 @@ joint.shapes.flexberry.uml.PrimitiveElementView = joint.dia.ElementView.extend({
buttons.addObjects(sizeChangers);
buttons.forEach(button => {
let style = {};
if (button.name.contains(' ')) {
button.name = button.name.replace(' ', '.');
}
style[`.${get(button, 'name')}`] = get(button, 'attrs.element');
style[`.${get(button, 'name')}>circle`] = get(button, 'attrs.circle');
style[`.${get(button, 'name')}>text`] = get(button, 'attrs.text');
Expand Down
17 changes: 17 additions & 0 deletions addon/objects/uml-primitives/fd-uml-use-case.js
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,23 @@ joint.shapes.flexberry.uml.UseCaseView = joint.shapes.flexberry.uml.BaseObjectVi
'</div>'
].join(''),

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

updateRectangles: function () {
joint.shapes.flexberry.uml.BaseObjectView.prototype.updateRectangles.apply(this, arguments);
let paramsBox = this.$box.find('.header-input');
let bbox = this.model.getBBox();

paramsBox.css({
top: (bbox.height - paramsBox[0].offsetHeight)/2,
left: (bbox.width - paramsBox[0].offsetWidth)/2,
position: 'absolute'
});
},

getUsecaseName: function() {
return this.model.attributes.objectModel.get('name');
},
Expand Down
38 changes: 37 additions & 1 deletion addon/objects/uml-primitives/fd-uml-usecase-actor.js
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 $ from 'jquery';
import { A } from '@ember/array';

import FdUmlElement from './fd-uml-element';
import { BaseObject } from './fd-uml-baseobject';
Expand Down Expand Up @@ -59,7 +60,7 @@ export let UsecaseActor = BaseObject.define('flexberry.uml.UsecaseActor', {
minWidth: 25,

// Minimum height.
minHeight: 50,
minHeight: 60,

attrs: {
text: {
Expand Down Expand Up @@ -108,6 +109,41 @@ joint.shapes.flexberry.uml.UsecaseActorView = joint.shapes.flexberry.uml.BaseObj
'</div>'
].join(''),

getSizeChangers() {
if (this.paper) {
let readonly = this.paper.options.interactive;
if (!readonly && typeof readonly !== 'object') {
return A();
}
}

return A([{
name: 'right-size-button prop',
text: '&#xf0da',
attrs: {
'element': { 'ref-dx': 0, 'ref-y': 0.5, 'ref': '.joint-highlight-stroke' },
'circle': { r: 6, fill: '#007aff', stroke: '#007aff', 'stroke-width': 1 },
'text': { fill: '#ffffff','font-size': 10, 'text-anchor': 'middle', x: 0.5, y: 3.5, 'font-family': 'Icons' },
}
}, {
name: 'right-down-size-button prop',
text: '&#xf0da',
attrs: {
'element': { 'ref-dx': 0, 'ref-dy': 0, 'ref': '.joint-highlight-stroke' },
'circle': { r: 6, fill: '#007aff', stroke: '#007aff', 'stroke-width': 1 },
'text': { fill: '#ffffff','font-size': 10, 'text-anchor': 'middle', x: 0.5, y: 3.5, 'transform': 'rotate(45)', 'font-family': 'Icons' },
}
}, {
name: 'down-size-button prop',
text: '&#xf0d7',
attrs: {
'element': { 'ref-x': 0.5, 'ref-dy': 0, 'ref': '.joint-highlight-stroke' },
'circle': { r: 6, fill: '#007aff', stroke: '#007aff', 'stroke-width': 1 },
'text': { fill: '#ffffff','font-size': 10, 'text-anchor': 'middle', x: 0, y: 3.5, 'font-family': 'Icons' },
}
}]);
},

updateRectangles: function (resizedWidth, resizedHeight) {
const minWidth = this.model.attributes.minWidth;
const minHeight = this.model.attributes.minHeight;
Expand Down

0 comments on commit 839f68d

Please sign in to comment.