From 839f68d7fa8429d11a1b15cd8bb46941c03b6bd2 Mon Sep 17 00:00:00 2001
From: TeterinaSvetlana <40786685+TeterinaSvetlana@users.noreply.github.com>
Date: Wed, 26 Feb 2020 14:08:26 +0500
Subject: [PATCH] Change actors size with proportions (#635)

---
 addon/components/fd-uml-diagram.js            | 33 ++++++++++++++--
 .../fd-actions-for-ucd-primitives.js          |  2 +-
 addon/objects/uml-primitives/fd-uml-note.js   | 11 +++++-
 .../uml-primitives/fd-uml-primitive.js        |  3 ++
 .../objects/uml-primitives/fd-uml-use-case.js | 17 +++++++++
 .../uml-primitives/fd-uml-usecase-actor.js    | 38 ++++++++++++++++++-
 6 files changed, 98 insertions(+), 6 deletions(-)

diff --git a/addon/components/fd-uml-diagram.js b/addon/components/fd-uml-diagram.js
index 7254a6091..c9ae4c483 100644
--- a/addon/components/fd-uml-diagram.js
+++ b/addon/components/fd-uml-diagram.js
@@ -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]
@@ -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};
     }
   },
diff --git a/addon/mixins/actions-for-primitives/fd-actions-for-ucd-primitives.js b/addon/mixins/actions-for-primitives/fd-actions-for-ucd-primitives.js
index a37a7760e..8deb23924 100644
--- a/addon/mixins/actions-for-primitives/fd-actions-for-ucd-primitives.js
+++ b/addon/mixins/actions-for-primitives/fd-actions-for-ucd-primitives.js
@@ -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 });
diff --git a/addon/objects/uml-primitives/fd-uml-note.js b/addon/objects/uml-primitives/fd-uml-note.js
index c1fba61b8..2ba9936af 100644
--- a/addon/objects/uml-primitives/fd-uml-note.js
+++ b/addon/objects/uml-primitives/fd-uml-note.js
@@ -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'
+    });
+  },
 });
diff --git a/addon/objects/uml-primitives/fd-uml-primitive.js b/addon/objects/uml-primitives/fd-uml-primitive.js
index cc66794bc..d79ad4a20 100644
--- a/addon/objects/uml-primitives/fd-uml-primitive.js
+++ b/addon/objects/uml-primitives/fd-uml-primitive.js
@@ -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');
diff --git a/addon/objects/uml-primitives/fd-uml-use-case.js b/addon/objects/uml-primitives/fd-uml-use-case.js
index 6a0673d4b..00d550cd5 100644
--- a/addon/objects/uml-primitives/fd-uml-use-case.js
+++ b/addon/objects/uml-primitives/fd-uml-use-case.js
@@ -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');
   },
diff --git a/addon/objects/uml-primitives/fd-uml-usecase-actor.js b/addon/objects/uml-primitives/fd-uml-usecase-actor.js
index 7d02f219e..0c5f2b064 100644
--- a/addon/objects/uml-primitives/fd-uml-usecase-actor.js
+++ b/addon/objects/uml-primitives/fd-uml-usecase-actor.js
@@ -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';
@@ -59,7 +60,7 @@ export let UsecaseActor = BaseObject.define('flexberry.uml.UsecaseActor', {
   minWidth: 25,
 
   // Minimum height.
-  minHeight: 50,
+  minHeight: 60,
 
   attrs: {
     text: {
@@ -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;