FORder icons based type

packages/mindplot/src/components/IconGroup.js

@@ -16,12 +16,25 @@
  *   limitations under the License.
  */
 // eslint-disable-next-line max-classes-per-file
-import { $assert, $defined } from '@wisemapping/core-js';
-import { Group } from '@wisemapping/web2d';
+import {
+  $assert,
+  $defined
+} from '@wisemapping/core-js';
+import {
+  Group
+} from '@wisemapping/web2d';
 import IconGroupRemoveTip from './IconGroupRemoveTip';
 
+import NoteModel from './model/NoteModel';
+import LinkModel from './model/LinkModel';
+import IconModel from './model/IconModel';
 import Icon from './Icon';
 
+const ORDER_BY_TYPE = new Map();
+ORDER_BY_TYPE.set(IconModel.FEATURE_TYPE, 0);
+ORDER_BY_TYPE.set(NoteModel.FEATURE_TYPE, 1);
+ORDER_BY_TYPE.set(LinkModel.FEATURE_TYPE, 2);
+
 class IconGroup {
   constructor(topicId, iconSize) {
     $assert($defined(topicId), 'topicId can not be null');
@@ -64,7 +77,10 @@ class IconGroup {
 
   /** */
   seIconSize(width, height) {
-    this._iconSize = { width, height };
+    this._iconSize = {
+      width,
+      height,
+    };
     this._resize(this._icons.length);
   }
 
@@ -76,15 +92,23 @@ class IconGroup {
   addIcon(icon, remove) {
     $defined(icon, 'icon is not defined');
 
+    // Order could have change, need to re-add all.
+    const icons = this._icons.slice();
+    this._icons.forEach((i) => {
+      this._removeIcon(i);
+    });
+
     icon.setGroup(this);
-    this._icons.push(icon);
+    icons.push(icon);
+    this._icons = icons.sort((a, b) => ORDER_BY_TYPE.get(a.getModel().getType()) - ORDER_BY_TYPE.get(b.getModel().getType()));
 
-    // Adjust group and position ...
+    // Add all the nodes back ...
     this._resize(this._icons.length);
-    this._positionIcon(icon, this._icons.length - 1);
-
-    const imageShape = icon.getImage();
+    this._icons.forEach((i, index) => {
+      this._positionIcon(i, index);
+      const imageShape = i.getImage();
       this._group.append(imageShape);
+    });
 
     // Register event for the group ..
     if (remove) {
@@ -166,11 +190,5 @@ class IconGroup {
   }
 }
 
-/**
- * @constant
- * @type {Number}
- * @default
- */
 IconGroup.ICON_PADDING = 5;
-
 export default IconGroup;

packages/mindplot/src/components/Topic.js

@@ -48,7 +48,7 @@ import INodeModel, {
   TopicShape,
 } from './model/INodeModel';
 
-const ICON_SCALING_FACTOR = 1;
+const ICON_SCALING_FACTOR = 1.8;
 
 class Topic extends NodeGraph {
   /**
@@ -1263,37 +1263,31 @@ class Topic extends NodeGraph {
     if (this._isInWorkspace) {
       const textShape = this.getTextShape();
       if (this.getShapeType() !== TopicShape.IMAGE) {
+        // Calculate topic size and adjust elements ...
         const textWidth = textShape.getWidth();
+        const textHeight = textShape.getHeight();
+        const padding = TopicStyle.getInnerPadding(this);
 
-        let textHeight = textShape.getHeight();
-        textHeight = textHeight !== 0 ? textHeight : 20;
-
-        const topicPadding = TopicStyle.getInnerPadding(this);
-
-        // Adjust the icon size to the size of the text ...
+        // Adjust icons group based on the font size ...
         const iconGroup = this.getOrBuildIconGroup();
         const fontHeight = this.getTextShape().getFontHeight();
+        const iconHeight = ICON_SCALING_FACTOR * fontHeight;
+        iconGroup.seIconSize(iconHeight, iconHeight);
 
-        const iconSize = ICON_SCALING_FACTOR * fontHeight;
-        iconGroup.setPosition(topicPadding, topicPadding);
-        iconGroup.seIconSize(iconSize, iconSize);
-
-        // Add a extra padding between the text and the icons
-        let iconsWidth = iconGroup.getSize().width;
-        if (iconsWidth !== 0) {
-          iconsWidth += textHeight / 4;
-        }
-
-        const height = textHeight + topicPadding * 2;
-        const width = textWidth + iconsWidth + topicPadding * 2;
+        // Calculate size and adjust ...
+        const topicHeight = Math.max(iconHeight, textHeight) + padding * 2;
+        const textIconSpacing = Math.round(fontHeight / 4);
+        const iconGroupWith = iconGroup.getSize().width;
+        const topicWith = iconGroupWith + textIconSpacing + textWidth + padding * 2;
 
         this.setSize({
-          width,
-          height,
+          width: topicWith,
+          height: topicHeight,
         });
 
-        // Position node ...
-        textShape.setPosition(topicPadding + iconsWidth, topicPadding);
+        // Adjust all topic elements positions ...
+        iconGroup.setPosition(padding, (topicHeight - iconHeight) / 2);
+        textShape.setPosition(padding + iconGroupWith + textIconSpacing, (topicHeight - textHeight) / 2);
       } else {
         // In case of images, the size is fixed ...
         const size = this.getModel().getImageSize();

packages/mindplot/src/components/TopicStyle.js

@@ -15,9 +15,16 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import { $assert, $defined } from '@wisemapping/core-js';
-import { $msg } from './Messages';
-import { TopicShape } from './model/INodeModel';
+import {
+  $assert,
+  $defined,
+} from '@wisemapping/core-js';
+import {
+  $msg,
+} from './Messages';
+import {
+  TopicShape,
+} from './model/INodeModel';
 
 class TopicStyle {
   static _getStyles(topic) {
@@ -42,7 +49,9 @@ class TopicStyle {
   }
 
   static defaultText(topic) {
-    const { msgKey } = this._getStyles(topic);
+    const {
+      msgKey,
+    } = this._getStyles(topic);
     return $msg(msgKey);
   }
 
@@ -59,7 +68,7 @@ class TopicStyle {
   }
 
   static getInnerPadding(topic) {
-    return this._getStyles(topic).innerPadding;
+    return Math.round(topic.getTextShape().getFontHeight() * 0.5);
   }
 
   static defaultShapeType(topic) {
@@ -79,7 +88,6 @@ TopicStyle.STYLES = {
       color: '#ffffff',
     },
     msgKey: 'CENTRAL_TOPIC',
-    innerPadding: 11,
     shapeType: TopicShape.ROUNDED_RECT,
   },
 
@@ -94,7 +102,6 @@ TopicStyle.STYLES = {
       color: 'rgb(82,92,97)',
     },
     msgKey: 'MAIN_TOPIC',
-    innerPadding: 3,
     shapeType: TopicShape.LINE,
   },
 
@@ -109,7 +116,6 @@ TopicStyle.STYLES = {
       color: 'rgb(82,92,97)',
     },
     msgKey: 'SUB_TOPIC',
-    innerPadding: 3,
     shapeType: TopicShape.LINE,
   },
 
@@ -124,7 +130,6 @@ TopicStyle.STYLES = {
       color: 'rgb(82,92,97)',
     },
     msgKey: 'ISOLATED_TOPIC',
-    innerPadding: 4,
     shapeType: TopicShape.LINE,
   },
 };