Start adding SVG icons replacement

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>

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>

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>

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>

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>

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>

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 = [
+ImageIcon.prototype.ICON_FAMILIES = [{
-  { id: 'face', icons: ['face_plain', 'face_sad', 'face_crying', 'face_smile', 'face_surprise', 'face_wink'] },
+  id: 'face',
-  { id: 'funy', icons: ['funy_angel', 'funy_devilish', 'funy_glasses', 'funy_grin', 'funy_kiss', 'funy_monkey'] },
+  icons: ['face_plain', 'face_sad', 'face_crying', 'face_smile', 'face_surprise', 'face_wink'],
-  { id: 'conn', icons: ['conn_connect', 'conn_disconnect'] },
+},
-  {
+{
+  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: 'bulb',
-  { id: 'tick', icons: ['tick_tick', 'tick_cross'] },
+  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: '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: '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: '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: 'people',
-  { id: 'flag', icons: ['flag_blue', 'flag_green', 'flag_orange', 'flag_pink', 'flag_purple', 'flag_yellow'] },
+  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: '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'],
+    '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'] },
+{
+  id: 'task',
+  icons: ['task_0', 'task_25', 'task_50', 'task_75', 'task_100'],
+},
 ];
 
 export default ImageIcon;

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) {

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,8 +41,14 @@ import NoteEditor from './widget/NoteEditor';
 import ActionDispatcher from './ActionDispatcher';
 import LinkEditor from './widget/LinkEditor';
 
-import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher';
+import TopicEventDispatcher, {
-import INodeModel, { TopicShape } from './model/INodeModel';
+  TopicEvent,
+} from './TopicEventDispatcher';
+import INodeModel, {
+  TopicShape,
+} from './model/INodeModel';
+
+const ICON_SCALING_FACTOR = 1;
 
 class Topic extends NodeGraph {
   /**
@@ -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.setPosition = function setPosition() {};
-      result.setFill = function setFill() { };
+      result.setFill = function setFill() {};
-      result.setStroke = function setStroke() { };
+      result.setStroke = function setStroke() {};
     } else {
       $assert(false, `Unsupported figure shapeType:${shapeType}`);
     }
@@ -283,21 +302,18 @@ 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++) {
+    featuresModel.forEach((f) => {
-      const featureModel = featuresModel[i];
+      const icon = TopicFeature.createIcon(this, f, this.isReadOnly());
-      const icon = TopicFeature.createIcon(this, featureModel, this.isReadOnly());
+      result.addIcon(icon, f.getType() === TopicFeature.Icon.id && !this.isReadOnly());
-      result.addIcon(
+    });
-        icon,
-        featureModel.getType() === TopicFeature.Icon.id && !this.isReadOnly(),
-      );
-    }
 
     return result;
   }
@@ -737,7 +753,9 @@ class Topic extends NodeGraph {
 
   /** */
   showTextEditor(text) {
-    this._getTopicEventDispatcher().show(this, { text });
+    this._getTopicEventDispatcher().show(this, {
+      text,
+    });
   }
 
   /** */
@@ -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++) {
+    return children.filter((node) => $defined(node.getOutgoingLine()))
-      const node = children[i];
+      .map(((node) => node.getOutgoingLine()));
-      const line = node.getOutgoingLine();
-      if ($defined(line)) {
-        result.push(line);
-      }
-    }
-    return result;
   }
 
   /** */
@@ -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.forEach((line) => line.redraw());
-      incomingLines[i].redraw();
-    }
 
     // Update relationship lines
-    for (let j = 0; j < this._relationships.length; j++) {
+    this._relationships.forEach((r) => r.redraw());
-      this._relationships[j].redraw();
-    }
   }
 
   /** */
@@ -932,9 +938,8 @@ class Topic extends NodeGraph {
   /** */
   moveToBack() {
     // Update relationship lines
-    for (let j = 0; j < this._relationships.length; j++) {
+    this._relationships.forEach((r) => r.moveToBack());
-      this._relationships[j].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.forEach((r) => r.moveToFront());
-      this._relationships[j].moveToFront();
-    }
   }
 
   /** */
@@ -970,9 +973,9 @@ class Topic extends NodeGraph {
       const targetParent = targetTopic.getModel().getParent();
       const sourceParent = sourceTopic.getModel().getParent();
       relationship.setVisibility(
-        value
+        value &&
-        && (targetParent == null || !targetParent.areChildrenShrunken())
+        (targetParent == null || !targetParent.areChildrenShrunken()) &&
-        && (sourceParent == null || !sourceParent.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
+    const hasSizeChanged = oldSize.width !== roundedSize.width ||
-      || oldSize.height !== roundedSize.height;
+      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);
       }

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,
 };

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._position = {
-    this._coordOrigin = { x: 0, y: 0 };
+      x: 0,
+      y: 0,
+    };
+    this._coordOrigin = {
+      x: 0,
+      y: 0,
+    };
   }
 
   setCoordSize(width, height) {
@@ -42,7 +51,10 @@ class GroupPeer extends ElementPeer {
   }
 
   getCoordSize() {
-    return { width: this._coordSize.width, height: this._coordSize.height };
+    return {
+      width: this._coordSize.width,
+      height: this._coordSize.height
+    };
   }
 
   /**
@@ -79,19 +91,16 @@ class GroupPeer extends ElementPeer {
    * */
 
   updateTransform() {
-    let sx = this._size.width / this._coordSize.width;
+    if (this._coordSize.width > 0) {
-    let sy = this._size.height / this._coordSize.height;
+      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;
 
+      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,7 +156,10 @@ class GroupPeer extends ElementPeer {
   }
 
   getCoordOrigin() {
-    return { x: this._coordOrigin.x, y: this._coordOrigin.y };
+    return {
+      x: this._coordOrigin.x,
+      y: this._coordOrigin.y
+    };
   }
 }