Start adding SVG icons replacement

2024-12-22 19:53:49 +01:00 · 2021-12-26 21:54:43 -08:00 · 2021-12-26 21:54:43 -08:00 · 5496d66a90
commit 5496d66a90
parent c503c590d9
11 changed files with 311 additions and 183 deletions
--- a/packages/mindplot/assets/icons/bulb_light_off.svg
+++ b/packages/mindplot/assets/icons/bulb_light_off.svg
@ -0,0 +1,11 @@
+<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" enable-background="new 0 0 48 48">
+    <path fill="#FBC02D" d="M37,22c0-7.7-6.6-13.8-14.5-12.9c-6,0.7-10.8,5.5-11.4,11.5c-0.5,4.6,1.4,8.7,4.6,11.3 c1.4,1.2,2.3,2.9,2.3,4.8V37h12v-0.1c0-1.8,0.8-3.6,2.2-4.8C35.1,29.7,37,26.1,37,22z"/>
+    <path fill="#FFF59D" d="M30.6,20.2l-3-2c-0.3-0.2-0.8-0.2-1.1,0L24,19.8l-2.4-1.6c-0.3-0.2-0.8-0.2-1.1,0l-3,2 c-0.2,0.2-0.4,0.4-0.4,0.7s0,0.6,0.2,0.8l3.8,4.7V37h2V26c0-0.2-0.1-0.4-0.2-0.6l-3.3-4.1l1.5-1l2.4,1.6c0.3,0.2,0.8,0.2,1.1,0 l2.4-1.6l1.5,1l-3.3,4.1C25.1,25.6,25,25.8,25,26v11h2V26.4l3.8-4.7c0.2-0.2,0.3-0.5,0.2-0.8S30.8,20.3,30.6,20.2z"/>
+    <circle fill="#5C6BC0" cx="24" cy="44" r="3"/>
+    <path fill="#9FA8DA" d="M26,45h-4c-2.2,0-4-1.8-4-4v-5h12v5C30,43.2,28.2,45,26,45z"/>
+    <g fill="#5C6BC0">
+        <path d="M30,41l-11.6,1.6c0.3,0.7,0.9,1.4,1.6,1.8l9.4-1.3C29.8,42.5,30,41.8,30,41z"/>
+        <polygon points="18,38.7 18,40.7 30,39 30,37"/>
+    </g>
+    <rect x="22" y="-2.9" transform="matrix(.707 -.707 .707 .707 -9.941 24)" fill="#37474F" width="4" height="53.7"/>
+</svg>
--- a/packages/mindplot/assets/icons/bulb_light_on.svg
+++ b/packages/mindplot/assets/icons/bulb_light_on.svg
@ -0,0 +1,11 @@
+<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" enable-background="new 0 0 48 48">
+    <circle fill="#FFF59D" cx="24" cy="22" r="20"/>
+    <path fill="#FBC02D" d="M37,22c0-7.7-6.6-13.8-14.5-12.9c-6,0.7-10.8,5.5-11.4,11.5c-0.5,4.6,1.4,8.7,4.6,11.3 c1.4,1.2,2.3,2.9,2.3,4.8V37h12v-0.1c0-1.8,0.8-3.6,2.2-4.8C35.1,29.7,37,26.1,37,22z"/>
+    <path fill="#FFF59D" d="M30.6,20.2l-3-2c-0.3-0.2-0.8-0.2-1.1,0L24,19.8l-2.4-1.6c-0.3-0.2-0.8-0.2-1.1,0l-3,2 c-0.2,0.2-0.4,0.4-0.4,0.7s0,0.6,0.2,0.8l3.8,4.7V37h2V26c0-0.2-0.1-0.4-0.2-0.6l-3.3-4.1l1.5-1l2.4,1.6c0.3,0.2,0.8,0.2,1.1,0 l2.4-1.6l1.5,1l-3.3,4.1C25.1,25.6,25,25.8,25,26v11h2V26.4l3.8-4.7c0.2-0.2,0.3-0.5,0.2-0.8S30.8,20.3,30.6,20.2z"/>
+    <circle fill="#5C6BC0" cx="24" cy="44" r="3"/>
+    <path fill="#9FA8DA" d="M26,45h-4c-2.2,0-4-1.8-4-4v-5h12v5C30,43.2,28.2,45,26,45z"/>
+    <g fill="#5C6BC0">
+        <path d="M30,41l-11.6,1.6c0.3,0.7,0.9,1.4,1.6,1.8l9.4-1.3C29.8,42.5,30,41.8,30,41z"/>
+        <polygon points="18,38.7 18,40.7 30,39 30,37"/>
+    </g>
+</svg>
--- a/packages/mindplot/assets/icons/lock_close.svg
+++ b/packages/mindplot/assets/icons/lock_close.svg
@ -0,0 +1,5 @@
+<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" enable-background="new 0 0 48 48">
+    <path fill="#424242" d="M24,4c-5.5,0-10,4.5-10,10v4h4v-4c0-3.3,2.7-6,6-6s6,2.7,6,6v4h4v-4C34,8.5,29.5,4,24,4z"/>
+    <path fill="#FB8C00" d="M36,44H12c-2.2,0-4-1.8-4-4V22c0-2.2,1.8-4,4-4h24c2.2,0,4,1.8,4,4v18C40,42.2,38.2,44,36,44z"/>
+    <circle fill="#C76E00" cx="24" cy="31" r="3"/>
+</svg>
--- a/packages/mindplot/assets/icons/lock_open.svg
+++ b/packages/mindplot/assets/icons/lock_open.svg
@ -0,0 +1,5 @@
+<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" enable-background="new 0 0 48 48">
+    <path fill="#424242" d="M24,4c-5.5,0-10,4.5-10,10v4h4v-4c0-3.3,2.7-6,6-6s6,2.7,6,6v4h4v-4C34,8.5,29.5,4,24,4z"/>
+    <path fill="#FB8C00" d="M36,44H12c-2.2,0-4-1.8-4-4V22c0-2.2,1.8-4,4-4h24c2.2,0,4,1.8,4,4v18C40,42.2,38.2,44,36,44z"/>
+    <circle fill="#C76E00" cx="24" cy="31" r="3"/>
+</svg>
--- a/packages/mindplot/assets/icons/sign_info.svg
+++ b/packages/mindplot/assets/icons/sign_info.svg
@ -0,0 +1,5 @@
+<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" enable-background="new 0 0 48 48">
+    <circle fill="#2196F3" cx="24" cy="24" r="21"/>
+    <rect x="22" y="22" fill="#fff" width="4" height="11"/>
+    <circle fill="#fff" cx="24" cy="16.5" r="2.5"/>
+</svg>
--- a/packages/mindplot/assets/images/links.svg
+++ b/packages/mindplot/assets/images/links.svg
@ -0,0 +1,7 @@
+<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" enable-background="new 0 0 48 48">
+    <g fill="#1976D2">
+        <path d="M38,13h-3c-5.5,0-10,4.5-10,10s4.5,10,10,10h3c5.5,0,10-4.5,10-10S43.5,13,38,13z M38,29h-3 c-3.3,0-6-2.7-6-6s2.7-6,6-6h3c3.3,0,6,2.7,6,6S41.3,29,38,29z"/>
+        <path d="M13,13h-3C4.5,13,0,17.5,0,23s4.5,10,10,10h3c5.5,0,10-4.5,10-10S18.5,13,13,13z M13,29h-3 c-3.3,0-6-2.7-6-6s2.7-6,6-6h3c3.3,0,6,2.7,6,6S16.3,29,13,29z"/>
+    </g>
+    <path fill="#42A5F5" d="M33,21H15c-1.1,0-2,0.9-2,2s0.9,2,2,2h18c1.1,0,2-0.9,2-2S34.1,21,33,21z"/>
+</svg>
--- a/packages/mindplot/src/components/ImageIcon.js
+++ b/packages/mindplot/src/components/ImageIcon.js
@ -15,17 +15,21 @@
 *   See the License for the specific language governing permissions and
 *   limitations under the License.
 */
-import { $assert } from '@wisemapping/core-js';
+import {
+  $assert,
+} from '@wisemapping/core-js';
 import Icon from './Icon';
 import ActionDispatcher from './ActionDispatcher';

 function importAll(r) {
  const images = {};
-  r.keys().forEach((item) => { images[item.replace('./', '')] = r(item); });
+  r.keys().forEach((item) => {
+    images[item.replace('./', '')] = r(item);
+  });
  return images;
 }

-const images = importAll(require.context('../../assets/icons', false, /\.png$/));
+const images = importAll(require.context('../../assets/icons', false, /\.(png|svg)$/));

 class ImageIcon extends Icon {
  constructor(topic, iconModel, readOnly) {
@ -56,7 +60,11 @@ class ImageIcon extends Icon {
  }

  static _getImageUrl(iconId) {
-    return images[`${iconId}.png`];
+    let result = images[`${iconId}.svg`];
+    if (!result) {
+      result = images[`${iconId}.png`];
+    }
+    return result;
  }

  getModel() {
@ -108,63 +116,108 @@ class ImageIcon extends Icon {
  }
 }

-ImageIcon.prototype.ICON_FAMILIES = [
-  { id: 'face', icons: ['face_plain', 'face_sad', 'face_crying', 'face_smile', 'face_surprise', 'face_wink'] },
-  { id: 'funy', icons: ['funy_angel', 'funy_devilish', 'funy_glasses', 'funy_grin', 'funy_kiss', 'funy_monkey'] },
-  { id: 'conn', icons: ['conn_connect', 'conn_disconnect'] },
-  {
-    id: 'sport',
-    icons: ['sport_basketball', 'sport_football', 'sport_golf', 'sport_raquet', 'sport_shuttlecock', 'sport_soccer', 'sport_tennis'],
-  },
-  { id: 'bulb', icons: ['bulb_light_on', 'bulb_light_off'] },
-  { id: 'thumb', icons: ['thumb_thumb_up', 'thumb_thumb_down'] },
-  { id: 'tick', icons: ['tick_tick', 'tick_cross'] },
-  {
-    id: 'onoff',
-    icons: ['onoff_clock', 'onoff_clock_red', 'onoff_add', 'onoff_delete', 'onoff_status_offline', 'onoff_status_online'],
-  },
-  {
-    id: 'money',
-    icons: ['money_money', 'money_dollar', 'money_euro', 'money_pound', 'money_yen', 'money_coins', 'money_ruby'],
-  },
-  { id: 'time', icons: ['time_calendar', 'time_clock', 'time_hourglass'] },
-  {
-    id: 'number',
-    icons: ['number_1', 'number_2', 'number_3', 'number_4', 'number_5', 'number_6', 'number_7', 'number_8', 'number_9'],
-  },
-  { id: 'chart', icons: ['chart_bar', 'chart_line', 'chart_curve', 'chart_pie', 'chart_organisation'] },
-  { id: 'sign', icons: ['sign_warning', 'sign_info', 'sign_stop', 'sign_help', 'sign_cancel'] },
-  {
-    id: 'hard',
-    icons: ['hard_cd', 'hard_computer', 'hard_controller', 'hard_driver_disk', 'hard_ipod', 'hard_keyboard', 'hard_mouse', 'hard_printer'],
-  },
-  {
-    id: 'soft',
-    icons: ['soft_bug', 'soft_cursor', 'soft_database_table', 'soft_database', 'soft_feed', 'soft_folder_explore', 'soft_rss', 'soft_penguin'],
-  },
-  { id: 'arrow', icons: ['arrow_up', 'arrow_down', 'arrow_left', 'arrow_right'] },
-  {
-    id: 'arrowc',
-    icons: ['arrowc_rotate_anticlockwise', 'arrowc_rotate_clockwise', 'arrowc_turn_left', 'arrowc_turn_right'],
-  },
-  { id: 'people', icons: ['people_group', 'people_male1', 'people_male2', 'people_female1', 'people_female2'] },
-  { id: 'mail', icons: ['mail_envelop', 'mail_mailbox', 'mail_edit', 'mail_list'] },
-  { id: 'flag', icons: ['flag_blue', 'flag_green', 'flag_orange', 'flag_pink', 'flag_purple', 'flag_yellow'] },
-  {
-    id: 'bullet',
-    icons: ['bullet_black', 'bullet_blue', 'bullet_green', 'bullet_orange', 'bullet_red', 'bullet_pink', 'bullet_purple'],
-  },
-  { id: 'tag', icons: ['tag_blue', 'tag_green', 'tag_orange', 'tag_red', 'tag_pink', 'tag_yellow'] },
-  {
-    id: 'object',
-    icons: ['object_bell', 'object_clanbomber', 'object_key', 'object_pencil', 'object_phone', 'object_magnifier', 'object_clip',
-      'object_music', 'object_star', 'object_wizard', 'object_house', 'object_cake', 'object_camera', 'object_palette', 'object_rainbow'],
-  },
-  {
-    id: 'weather',
-    icons: ['weather_clear-night', 'weather_clear', 'weather_few-clouds-night', 'weather_few-clouds', 'weather_overcast', 'weather_severe-alert', 'weather_showers-scattered', 'weather_showers', 'weather_snow', 'weather_storm'],
-  },
-  { id: 'task', icons: ['task_0', 'task_25', 'task_50', 'task_75', 'task_100'] },
+ImageIcon.prototype.ICON_FAMILIES = [{
+  id: 'face',
+  icons: ['face_plain', 'face_sad', 'face_crying', 'face_smile', 'face_surprise', 'face_wink'],
+},
+{
+  id: 'funy',
+  icons: ['funy_angel', 'funy_devilish', 'funy_glasses', 'funy_grin', 'funy_kiss', 'funy_monkey'],
+},
+{
+  id: 'conn',
+  icons: ['conn_connect', 'conn_disconnect'],
+},
+{
+  id: 'sport',
+  icons: ['sport_basketball', 'sport_football', 'sport_golf', 'sport_raquet', 'sport_shuttlecock', 'sport_soccer', 'sport_tennis'],
+},
+{
+  id: 'bulb',
+  icons: ['bulb_light_on', 'bulb_light_off'],
+},
+{
+  id: 'thumb',
+  icons: ['thumb_thumb_up', 'thumb_thumb_down'],
+},
+{
+  id: 'tick',
+  icons: ['tick_tick', 'tick_cross'],
+},
+{
+  id: 'onoff',
+  icons: ['onoff_clock', 'onoff_clock_red', 'onoff_add', 'onoff_delete', 'onoff_status_offline', 'onoff_status_online'],
+},
+{
+  id: 'money',
+  icons: ['money_money', 'money_dollar', 'money_euro', 'money_pound', 'money_yen', 'money_coins', 'money_ruby'],
+},
+{
+  id: 'time',
+  icons: ['time_calendar', 'time_clock', 'time_hourglass'],
+},
+{
+  id: 'number',
+  icons: ['number_1', 'number_2', 'number_3', 'number_4', 'number_5', 'number_6', 'number_7', 'number_8', 'number_9'],
+},
+{
+  id: 'chart',
+  icons: ['chart_bar', 'chart_line', 'chart_curve', 'chart_pie', 'chart_organisation'],
+},
+{
+  id: 'sign',
+  icons: ['sign_warning', 'sign_info', 'sign_stop', 'sign_help', 'sign_cancel'],
+},
+{
+  id: 'hard',
+  icons: ['hard_cd', 'hard_computer', 'hard_controller', 'hard_driver_disk', 'hard_ipod', 'hard_keyboard', 'hard_mouse', 'hard_printer'],
+},
+{
+  id: 'soft',
+  icons: ['soft_bug', 'soft_cursor', 'soft_database_table', 'soft_database', 'soft_feed', 'soft_folder_explore', 'soft_rss', 'soft_penguin'],
+},
+{
+  id: 'arrow',
+  icons: ['arrow_up', 'arrow_down', 'arrow_left', 'arrow_right'],
+},
+{
+  id: 'arrowc',
+  icons: ['arrowc_rotate_anticlockwise', 'arrowc_rotate_clockwise', 'arrowc_turn_left', 'arrowc_turn_right'],
+},
+{
+  id: 'people',
+  icons: ['people_group', 'people_male1', 'people_male2', 'people_female1', 'people_female2'],
+},
+{
+  id: 'mail',
+  icons: ['mail_envelop', 'mail_mailbox', 'mail_edit', 'mail_list'],
+},
+{
+  id: 'flag',
+  icons: ['flag_blue', 'flag_green', 'flag_orange', 'flag_pink', 'flag_purple', 'flag_yellow'],
+},
+{
+  id: 'bullet',
+  icons: ['bullet_black', 'bullet_blue', 'bullet_green', 'bullet_orange', 'bullet_red', 'bullet_pink', 'bullet_purple'],
+},
+{
+  id: 'tag',
+  icons: ['tag_blue', 'tag_green', 'tag_orange', 'tag_red', 'tag_pink', 'tag_yellow'],
+},
+{
+  id: 'object',
+  icons: ['object_bell', 'object_clanbomber', 'object_key', 'object_pencil', 'object_phone', 'object_magnifier', 'object_clip',
+    'object_music', 'object_star', 'object_wizard', 'object_house', 'object_cake', 'object_camera', 'object_palette', 'object_rainbow',
+  ],
+},
+{
+  id: 'weather',
+  icons: ['weather_clear-night', 'weather_clear', 'weather_few-clouds-night', 'weather_few-clouds', 'weather_overcast', 'weather_severe-alert', 'weather_showers-scattered', 'weather_showers', 'weather_snow', 'weather_storm'],
+},
+{
+  id: 'task',
+  icons: ['task_0', 'task_25', 'task_50', 'task_75', 'task_100'],
+},
 ];

 export default ImageIcon;
--- a/packages/mindplot/src/components/LinkIcon.js
+++ b/packages/mindplot/src/components/LinkIcon.js
@ -19,7 +19,7 @@ import { $assert } from '@wisemapping/core-js';
 import $ from 'jquery';
 import Icon from './Icon';
 import LinkIconTooltip from './widget/LinkIconTooltip';
-import LinksImage from '../../assets/images/links.png';
+import LinksImage from '../../assets/images/links.svg';

 class LinkIcon extends Icon {
  constructor(topic, linkModel, readOnly) {
--- a/packages/mindplot/src/components/Topic.js
+++ b/packages/mindplot/src/components/Topic.js
@ -16,9 +16,16 @@
 *   limitations under the License.
 */
 import $ from 'jquery';
-import { $assert, $defined } from '@wisemapping/core-js';
 import {
-  Rect, Image, Line, Text, Group,
+  $assert,
+  $defined,
+} from '@wisemapping/core-js';
+import {
+  Rect,
+  Image,
+  Line,
+  Text,
+  Group,
 } from '@wisemapping/web2d';

 import NodeGraph from './NodeGraph';
@ -34,16 +41,22 @@ import NoteEditor from './widget/NoteEditor';
 import ActionDispatcher from './ActionDispatcher';
 import LinkEditor from './widget/LinkEditor';

-import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher';
-import INodeModel, { TopicShape } from './model/INodeModel';
+import TopicEventDispatcher, {
+  TopicEvent,
+} from './TopicEventDispatcher';
+import INodeModel, {
+  TopicShape,
+} from './model/INodeModel';
+
+const ICON_SCALING_FACTOR = 1;

 class Topic extends NodeGraph {
  /**
-       * @extends mindplot.NodeGraph
-       * @constructs
-       * @param model
-       * @param options
-       */
+   * @extends mindplot.NodeGraph
+   * @constructs
+   * @param model
+   * @param options
+   */
  constructor(model, options) {
    super(model, options);
    this._children = [];
@ -79,9 +92,9 @@ class Topic extends NodeGraph {
  }

  /**
-       * @param {String} type the topic shape type
-       * @see {@link mindplot.model.INodeModel}
-       */
+   * @param {String} type the topic shape type
+   * @see {@link mindplot.model.INodeModel}
+   */
  setShapeType(type) {
    this._setShapeType(type, true);
  }
@ -194,15 +207,21 @@ class Topic extends NodeGraph {
        return model.getImageSize();
      };

-      result.setPosition = function setPosition() { };
+      result.setPosition = function setPosition() {};
    } else if (shapeType === TopicShape.ELLIPSE) {
      result = new Rect(0.9, attributes);
    } else if (shapeType === TopicShape.ROUNDED_RECT) {
      result = new Rect(0.3, attributes);
    } else if (shapeType === TopicShape.LINE) {
-      result = new Line({ strokeColor: '#495879', strokeWidth: 1 });
+      result = new Line({
+        strokeColor: '#495879',
+        strokeWidth: 1,
+      });
      result.setSize = function setSize(width, height) {
-        this.size = { width, height };
+        this.size = {
+          width,
+          height,
+        };
        result.setFrom(0, height);
        result.setTo(width, height);

@ -215,9 +234,9 @@ class Topic extends NodeGraph {
        return this.size;
      };

-      result.setPosition = function setPosition() { };
-      result.setFill = function setFill() { };
-      result.setStroke = function setStroke() { };
+      result.setPosition = function setPosition() {};
+      result.setFill = function setFill() {};
+      result.setStroke = function setStroke() {};
    } else {
      $assert(false, `Unsupported figure shapeType:${shapeType}`);
    }
@ -283,30 +302,27 @@ class Topic extends NodeGraph {

  _buildIconGroup() {
    const textHeight = this.getTextShape().getFontHeight();
-    const result = new IconGroup(this.getId(), textHeight);
+    const iconSize = textHeight * ICON_SCALING_FACTOR;
+    const result = new IconGroup(this.getId(), iconSize);
    const padding = TopicStyle.getInnerPadding(this);
    result.setPosition(padding, padding);

    // Load topic features ...
    const model = this.getModel();
    const featuresModel = model.getFeatures();
-    for (let i = 0; i < featuresModel.length; i++) {
-      const featureModel = featuresModel[i];
-      const icon = TopicFeature.createIcon(this, featureModel, this.isReadOnly());
-      result.addIcon(
-        icon,
-        featureModel.getType() === TopicFeature.Icon.id && !this.isReadOnly(),
-      );
-    }
+    featuresModel.forEach((f) => {
+      const icon = TopicFeature.createIcon(this, f, this.isReadOnly());
+      result.addIcon(icon, f.getType() === TopicFeature.Icon.id && !this.isReadOnly());
+    });

    return result;
  }

  /**
-       * assigns the new feature model to the topic's node model and adds the respective icon
-       * @param {mindplot.model.FeatureModel} featureModel
-       * @return {mindplot.Icon} the icon corresponding to the feature model
-       */
+   * assigns the new feature model to the topic's node model and adds the respective icon
+   * @param {mindplot.model.FeatureModel} featureModel
+   * @return {mindplot.Icon} the icon corresponding to the feature model
+   */
  addFeature(featureModel) {
    const iconGroup = this.getOrBuildIconGroup();
    this.closeEditors();
@ -737,7 +753,9 @@ class Topic extends NodeGraph {

  /** */
  showTextEditor(text) {
-    this._getTopicEventDispatcher().show(this, { text });
+    this._getTopicEventDispatcher().show(this, {
+      text,
+    });
  }

  /** */
@ -822,8 +840,8 @@ class Topic extends NodeGraph {
  }

  /**
-       * Point: references the center of the rect shape.!!!
-       */
+   * Point: references the center of the rect shape.!!!
+   */
  setPosition(point) {
    $assert(point, 'position can not be null');
    // allowed param reassign to avoid risks of existing code relying in this side-effect
@ -858,18 +876,10 @@ class Topic extends NodeGraph {
    return this._outgoingLine;
  }

-  /** */
  getIncomingLines() {
-    const result = [];
    const children = this.getChildren();
-    for (let i = 0; i < children.length; i++) {
-      const node = children[i];
-      const line = node.getOutgoingLine();
-      if ($defined(line)) {
-        result.push(line);
-      }
-    }
-    return result;
+    return children.filter((node) => $defined(node.getOutgoingLine()))
+      .map(((node) => node.getOutgoingLine()));
  }

  /** */
@ -891,14 +901,10 @@ class Topic extends NodeGraph {

    // Update all the incoming lines ...
    const incomingLines = this.getIncomingLines();
-    for (let i = 0; i < incomingLines.length; i++) {
-      incomingLines[i].redraw();
-    }
+    incomingLines.forEach((line) => line.redraw());

    // Update relationship lines
-    for (let j = 0; j < this._relationships.length; j++) {
-      this._relationships[j].redraw();
-    }
+    this._relationships.forEach((r) => r.redraw());
  }

  /** */
@ -932,9 +938,8 @@ class Topic extends NodeGraph {
  /** */
  moveToBack() {
    // Update relationship lines
-    for (let j = 0; j < this._relationships.length; j++) {
-      this._relationships[j].moveToBack();
-    }
+    this._relationships.forEach((r) => r.moveToBack());
+
    const connector = this.getShrinkConnector();
    if ($defined(connector)) {
      connector.moveToBack();
@ -951,9 +956,7 @@ class Topic extends NodeGraph {
      connector.moveToFront();
    }
    // Update relationship lines
-    for (let j = 0; j < this._relationships.length; j++) {
-      this._relationships[j].moveToFront();
-    }
+    this._relationships.forEach((r) => r.moveToFront());
  }

  /** */
@ -970,9 +973,9 @@ class Topic extends NodeGraph {
      const targetParent = targetTopic.getModel().getParent();
      const sourceParent = sourceTopic.getModel().getParent();
      relationship.setVisibility(
-        value
-        && (targetParent == null || !targetParent.areChildrenShrunken())
-        && (sourceParent == null || !sourceParent.areChildrenShrunken()),
+        value &&
+        (targetParent == null || !targetParent.areChildrenShrunken()) &&
+        (sourceParent == null || !sourceParent.areChildrenShrunken()),
      );
    });
  }
@ -1034,11 +1037,14 @@ class Topic extends NodeGraph {
  setSize(size, force) {
    $assert(size, 'size can not be null');
    $assert($defined(size.width), 'size seem not to be a valid element');
-    const roundedSize = { width: Math.ceil(size.width), height: Math.ceil(size.height) };
+    const roundedSize = {
+      width: Math.ceil(size.width),
+      height: Math.ceil(size.height),
+    };

    const oldSize = this.getSize();
-    const hasSizeChanged = oldSize.width !== roundedSize.width
-      || oldSize.height !== roundedSize.height;
+    const hasSizeChanged = oldSize.width !== roundedSize.width ||
+      oldSize.height !== roundedSize.height;
    if (hasSizeChanged || force) {
      NodeGraph.prototype.setSize.call(this, roundedSize);

@ -1267,8 +1273,10 @@ class Topic extends NodeGraph {
        // Adjust the icon size to the size of the text ...
        const iconGroup = this.getOrBuildIconGroup();
        const fontHeight = this.getTextShape().getFontHeight();
+
+        const iconSize = ICON_SCALING_FACTOR * fontHeight;
        iconGroup.setPosition(topicPadding, topicPadding);
-        iconGroup.seIconSize(fontHeight, fontHeight);
+        iconGroup.seIconSize(iconSize, iconSize);

        // Add a extra padding between the text and the icons
        let iconsWidth = iconGroup.getSize().width;
@ -1279,12 +1287,15 @@ class Topic extends NodeGraph {
        const height = textHeight + topicPadding * 2;
        const width = textWidth + iconsWidth + topicPadding * 2;

-        this.setSize({ width, height });
+        this.setSize({
+          width,
+          height,
+        });

        // Position node ...
        textShape.setPosition(topicPadding + iconsWidth, topicPadding);
      } else {
-        // In case of images, the size if fixed ...
+        // In case of images, the size is fixed ...
        const size = this.getModel().getImageSize();
        this.setSize(size);
      }
@ -1311,9 +1322,9 @@ class Topic extends NodeGraph {
  }

  /**
-       * @param childTopic
-       * @return {Boolean} true if childtopic is a child topic of this topic or the topic itself
-       */
+   * @param childTopic
+   * @return {Boolean} true if childtopic is a child topic of this topic or the topic itself
+   */
  isChildTopic(childTopic) {
    let result = this.getId() === childTopic.getId();
    if (!result) {
@ -1335,4 +1346,4 @@ class Topic extends NodeGraph {
  }
 }

-export default Topic;
+export default Topic;
--- a/packages/mindplot/src/index.js
+++ b/packages/mindplot/src/index.js
@ -30,5 +30,10 @@ global.jQuery = jquery;
 require('@libraries/bootstrap/js/bootstrap');

 export {
-  Mindmap, PersistenceManager, Designer, LocalStorageManager, Menu, DesignerBuilder,
-};
+  Mindmap,
+  PersistenceManager,
+  Designer,
+  LocalStorageManager,
+  Menu,
+  DesignerBuilder,
+};
--- a/packages/web2d/src/components/peer/svg/GroupPeer.js
+++ b/packages/web2d/src/components/peer/svg/GroupPeer.js
@ -24,10 +24,19 @@ class GroupPeer extends ElementPeer {
    const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'g');
    super(svgElement);
    this._native.setAttribute('preserveAspectRatio', 'none');
-    this._coordSize = { width: 1, height: 1 };
+    this._coordSize = {
+      width: 1,
+      height: 1,
+    };
    this._native.setAttribute('focusable', 'true');
-    this._position = { x: 0, y: 0 };
-    this._coordOrigin = { x: 0, y: 0 };
+    this._position = {
+      x: 0,
+      y: 0,
+    };
+    this._coordOrigin = {
+      x: 0,
+      y: 0,
+    };
  }

  setCoordSize(width, height) {
@ -42,56 +51,56 @@ class GroupPeer extends ElementPeer {
  }

  getCoordSize() {
-    return { width: this._coordSize.width, height: this._coordSize.height };
+    return {
+      width: this._coordSize.width,
+      height: this._coordSize.height
+    };
  }

  /**
-     * http://www.w3.org/TR/SVG/coords.html#TransformAttribute
-     * 7.6 The transform  attribute
-     *
-     * The value of the transform attribute is a <transform-list>, which is defined
-     * as a list of transform definitions, which are applied in the order provided.
-     * The individual transform definitions are separated by whitespace and/or a comma.
-     * The available types of transform definitions include:
-     *
-     *    * matrix(<a> <b> <c> <d> <e> <f>), which specifies a transformation in the form
-     * of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying
-     * the transformation matrix [a b c d e f].
-     *
-     *    * translate(<tx> [<ty>]), which specifies a translation by tx and ty.
-     * If <ty> is not provided, it is assumed to be zero.
-     *
-     *    * scale(<sx> [<sy>]), which specifies a scale operation by sx and sy.
-     * If <sy> is not provided, it is assumed to be equal to <sx>.
-     *
-     *    * rotate(<rotate-angle> [<cx> <cy>]), which specifies a rotation
-     * by <rotate-angle> degrees about a given point.
-     *      If optional parameters <cx> and <cy> are not supplied, the rotate
-     * is about the origin of the current user coordinate system. The operation corresponds
-     * to the matrix [cos(a) sin(a) -sin(a) cos(a) 0 0].
-     *      If optional parameters <cx> and <cy> are supplied, the rotate is
-     * about the point (<cx>, <cy>). The operation represents the equivalent of the
-     *following specification: translate(<cx>, <cy>) rotate(<rotate-angle>) translate(-<cx>, -<cy>).
-     *
-     *    * skewX(<skew-angle>), which specifies a skew transformation along the x-axis.
-     *
-     *    * skewY(<skew-angle>), which specifies a skew transformation along the y-axis.
-     * */
+   * http://www.w3.org/TR/SVG/coords.html#TransformAttribute
+   * 7.6 The transform  attribute
+   *
+   * The value of the transform attribute is a <transform-list>, which is defined
+   * as a list of transform definitions, which are applied in the order provided.
+   * The individual transform definitions are separated by whitespace and/or a comma.
+   * The available types of transform definitions include:
+   *
+   *    * matrix(<a> <b> <c> <d> <e> <f>), which specifies a transformation in the form
+   * of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying
+   * the transformation matrix [a b c d e f].
+   *
+   *    * translate(<tx> [<ty>]), which specifies a translation by tx and ty.
+   * If <ty> is not provided, it is assumed to be zero.
+   *
+   *    * scale(<sx> [<sy>]), which specifies a scale operation by sx and sy.
+   * If <sy> is not provided, it is assumed to be equal to <sx>.
+   *
+   *    * rotate(<rotate-angle> [<cx> <cy>]), which specifies a rotation
+   * by <rotate-angle> degrees about a given point.
+   *      If optional parameters <cx> and <cy> are not supplied, the rotate
+   * is about the origin of the current user coordinate system. The operation corresponds
+   * to the matrix [cos(a) sin(a) -sin(a) cos(a) 0 0].
+   *      If optional parameters <cx> and <cy> are supplied, the rotate is
+   * about the point (<cx>, <cy>). The operation represents the equivalent of the
+   *following specification: translate(<cx>, <cy>) rotate(<rotate-angle>) translate(-<cx>, -<cy>).
+   *
+   *    * skewX(<skew-angle>), which specifies a skew transformation along the x-axis.
+   *
+   *    * skewY(<skew-angle>), which specifies a skew transformation along the y-axis.
+   * */

  updateTransform() {
-    let sx = this._size.width / this._coordSize.width;
-    let sy = this._size.height / this._coordSize.height;
+    if (this._coordSize.width > 0) {
+      const sx = (this._size.width / this._coordSize.width).toFixed(5);
+      const sy = (this._size.height / this._coordSize.height).toFixed(5);

-    let cx = this._position.x - this._coordOrigin.x * sx;
-    let cy = this._position.y - this._coordOrigin.y * sy;
-
-    // FIXME: are we sure of this values?
-    cx = Number.isNaN(cx) ? 0 : cx;
-    cy = Number.isNaN(cy) ? 0 : cy;
-    sx = Number.isNaN(sx) ? 0 : sx;
-    sy = Number.isNaN(sy) ? 0 : sy;
-
-    this._native.setAttribute('transform', `translate(${cx},${cy}) scale(${sx},${sy})`);
+      const cx = (this._position.x - this._coordOrigin.x * sx).toFixed(5);
+      const cy = (this._position.y - this._coordOrigin.y * sy).toFixed(5);
+      this._native.setAttribute('transform', `translate(${cx},${cy}) scale(${sx},${sy})`);
+    } else {
+      this._native.removeAttribute('transform');
+    }
  }

  setOpacity(value) {
@ -135,7 +144,10 @@ class GroupPeer extends ElementPeer {
  }

  getPosition() {
-    return { x: this._position.x, y: this._position.y };
+    return {
+      x: this._position.x,
+      y: this._position.y
+    };
  }

  append(child) {
@ -144,8 +156,11 @@ class GroupPeer extends ElementPeer {
  }

  getCoordOrigin() {
-    return { x: this._coordOrigin.x, y: this._coordOrigin.y };
+    return {
+      x: this._coordOrigin.x,
+      y: this._coordOrigin.y
+    };
  }
 }

-export default GroupPeer;
+export default GroupPeer;