Merge branch 'develop'

.gitignore

@@ -52,3 +52,6 @@ Thumbs.db
 .vscode
 
 */test/playground/dist
+
+# visual code local workspaces
+wisemapping-frontend.code-workspace

.prettierrc.json

@@ -1,6 +1,6 @@
 {
-    "trailingComma": "es5",
+    "trailingComma": "all",
-    "tabWidth": 4,
+    "tabWidth": 2,
     "semi": true,
     "singleQuote": true,
     "printWidth": 100

bitbucket-pipelines.yml

@@ -21,6 +21,7 @@ pipelines:
             - yarn bootstrap
             - yarn build
             - yarn lint
+            - yarn test:unit
             # - yarn test
           artifacts:
             - packages/**/cypress/snapshots/**/__diff_output__/*.diff.png

dist/src_components_editor-page_index_tsx.bundle.js

@@ -0,0 +1 @@
+../packages/webapp/dist/src_components_editor-page_index_tsx.bundle.js

dist/src_components_editor-page_index_tsx.bundle.js.map

@@ -0,0 +1 @@
+../packages/webapp/dist/src_components_editor-page_index_tsx.bundle.js.map

dist/src_components_maps-page_action-dispatcher_index_tsx.bundle.js

@@ -0,0 +1 @@
+../packages/webapp/dist/src_components_maps-page_action-dispatcher_index_tsx.bundle.js

dist/src_components_maps-page_action-dispatcher_index_tsx.bundle.js.map

@@ -0,0 +1 @@
+../packages/webapp/dist/src_components_maps-page_action-dispatcher_index_tsx.bundle.js.map

dist/src_components_maps-page_index_tsx.bundle.js

@@ -0,0 +1 @@
+../packages/webapp/dist/src_components_maps-page_index_tsx.bundle.js

dist/src_components_maps-page_index_tsx.bundle.js.map

@@ -0,0 +1 @@
+../packages/webapp/dist/src_components_maps-page_index_tsx.bundle.js.map

docker-compose.snapshots.update.yml

@@ -1,7 +1,7 @@
 version: '3'
 services:
     e2e:
-        image: cypress/included:8.4.1
+        image: cypress/included:10.7.0
         container_name: wisemapping-integration-tests
         entrypoint: '/bin/sh -c "yarn install && yarn bootstrap && yarn build && yarn test:integration"'
         working_dir: /e2e

docker-compose.snapshots.yml

@@ -1,7 +1,7 @@
 version: '3'
 services:
     e2e:
-        image: cypress/included:8.4.1
+        image: cypress/included:10.7.0
         container_name: wisemapping-integration-tests
         entrypoint: '/bin/sh -c "yarn bootstrap && yarn build && yarn test:integration"'
         working_dir: /e2e

lerna.json

@@ -4,5 +4,6 @@
   ],
   "version": "1.0.0",
   "npmClient": "yarn",
-  "useWorkspaces": true
+  "useWorkspaces": true,
+  "useNx": false
 }

libraries/bootstrap/css/bootstrap-colorpicker.css

@@ -13,7 +13,7 @@
   width: 100px;
   height: 100px;
   cursor: crosshair;
-  background-image: url("../img/bootstrap-colorpicker/saturation.png");
+  background-image: url('../img/bootstrap-colorpicker/saturation.png');
 }
 
 .colorpicker-saturation i {
@@ -26,8 +26,8 @@
   margin: -4px 0 0 -4px;
   border: 1px solid #000;
   -webkit-border-radius: 5px;
-     -moz-border-radius: 5px;
+  -moz-border-radius: 5px;
-          border-radius: 5px;
+  border-radius: 5px;
 }
 
 .colorpicker-saturation i b {
@@ -36,8 +36,8 @@
   height: 5px;
   border: 1px solid #fff;
   -webkit-border-radius: 5px;
-     -moz-border-radius: 5px;
+  -moz-border-radius: 5px;
-          border-radius: 5px;
+  border-radius: 5px;
 }
 
 .colorpicker-hue,
@@ -64,12 +64,12 @@
 }
 
 .colorpicker-hue {
-  background-image: url("../img/bootstrap-colorpicker/hue.png");
+  background-image: url('../img/bootstrap-colorpicker/hue.png');
 }
 
 .colorpicker-alpha {
   display: none;
-  background-image: url("../img/bootstrap-colorpicker/alpha.png");
+  background-image: url('../img/bootstrap-colorpicker/alpha.png');
 }
 
 .colorpicker {
@@ -80,8 +80,8 @@
   padding: 4px;
   margin-top: 1px;
   -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
+  -moz-border-radius: 4px;
-          border-radius: 4px;
+  border-radius: 4px;
   *zoom: 1;
 }
 
@@ -89,7 +89,7 @@
 .colorpicker:after {
   display: table;
   line-height: 0;
-  content: "";
+  content: '';
 }
 
 .colorpicker:after {
@@ -135,7 +135,7 @@
   height: 10px;
   margin-top: 5px;
   clear: both;
-  background-image: url("../img/bootstrap-colorpicker/alpha.png");
+  background-image: url('../img/bootstrap-colorpicker/alpha.png');
   background-position: 0 100%;
 }
 
@@ -194,11 +194,11 @@
 }
 
 .colorpicker.colorpicker-horizontal .colorpicker-hue {
-  background-image: url("../img/bootstrap-colorpicker/hue-horizontal.png");
+  background-image: url('../img/bootstrap-colorpicker/hue-horizontal.png');
 }
 
 .colorpicker.colorpicker-horizontal .colorpicker-alpha {
-  background-image: url("../img/bootstrap-colorpicker/alpha-horizontal.png");
+  background-image: url('../img/bootstrap-colorpicker/alpha-horizontal.png');
 }
 
 .colorpicker.colorpicker-hidden {

libraries/bootstrap/css/bootstrap-colorpicker.min.css

@@ -6,4 +6,180 @@
  * Licensed under the Apache License v2.0
  * http://www.apache.org/licenses/LICENSE-2.0.txt
  *
- */.colorpicker-saturation{float:left;width:100px;height:100px;cursor:crosshair;background-image:url("../img/bootstrap-colorpicker/saturation.png")}.colorpicker-saturation i{position:absolute;top:0;left:0;display:block;width:5px;height:5px;margin:-4px 0 0 -4px;border:1px solid #000;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.colorpicker-saturation i b{display:block;width:5px;height:5px;border:1px solid #fff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.colorpicker-hue,.colorpicker-alpha{float:left;width:15px;height:100px;margin-bottom:4px;margin-left:4px;cursor:row-resize}.colorpicker-hue i,.colorpicker-alpha i{position:absolute;top:0;left:0;display:block;width:100%;height:1px;margin-top:-1px;background:#000;border-top:1px solid #fff}.colorpicker-hue{background-image:url("../img/bootstrap-colorpicker/hue.png")}.colorpicker-alpha{display:none;background-image:url("../img/bootstrap-colorpicker/alpha.png")}.colorpicker{top:0;left:0;z-index:2500;min-width:130px;padding:4px;margin-top:1px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;*zoom:1}.colorpicker:before,.colorpicker:after{display:table;line-height:0;content:""}.colorpicker:after{clear:both}.colorpicker:before{position:absolute;top:-7px;left:6px;display:inline-block;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-left:7px solid transparent;border-bottom-color:rgba(0,0,0,0.2);content:''}.colorpicker:after{position:absolute;top:-6px;left:7px;display:inline-block;border-right:6px solid transparent;border-bottom:6px solid #fff;border-left:6px solid transparent;content:''}.colorpicker div{position:relative}.colorpicker.colorpicker-with-alpha{min-width:140px}.colorpicker.colorpicker-with-alpha .colorpicker-alpha{display:block}.colorpicker-color{height:10px;margin-top:5px;clear:both;background-image:url("../img/bootstrap-colorpicker/alpha.png");background-position:0 100%}.colorpicker-color div{height:10px}.colorpicker-element .input-group-addon i{display:block;width:16px;height:16px;cursor:pointer}.colorpicker.colorpicker-inline{position:relative;display:inline-block;float:none}.colorpicker.colorpicker-horizontal{width:110px;height:auto;min-width:110px}.colorpicker.colorpicker-horizontal .colorpicker-saturation{margin-bottom:4px}.colorpicker.colorpicker-horizontal .colorpicker-color{width:100px}.colorpicker.colorpicker-horizontal .colorpicker-hue,.colorpicker.colorpicker-horizontal .colorpicker-alpha{float:left;width:100px;height:15px;margin-bottom:4px;margin-left:0;cursor:col-resize}.colorpicker.colorpicker-horizontal .colorpicker-hue i,.colorpicker.colorpicker-horizontal .colorpicker-alpha i{position:absolute;top:0;left:0;display:block;width:1px;height:15px;margin-top:0;background:#fff;border:0}.colorpicker.colorpicker-horizontal .colorpicker-hue{background-image:url("../img/bootstrap-colorpicker/hue-horizontal.png")}.colorpicker.colorpicker-horizontal .colorpicker-alpha{background-image:url("../img/bootstrap-colorpicker/alpha-horizontal.png")}.colorpicker.colorpicker-hidden{display:none}.colorpicker.colorpicker-visible{display:block}.colorpicker-inline.colorpicker-visible{display:inline-block}
+ */
+.colorpicker-saturation {
+  float: left;
+  width: 100px;
+  height: 100px;
+  cursor: crosshair;
+  background-image: url('../img/bootstrap-colorpicker/saturation.png');
+}
+.colorpicker-saturation i {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 5px;
+  height: 5px;
+  margin: -4px 0 0 -4px;
+  border: 1px solid #000;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+.colorpicker-saturation i b {
+  display: block;
+  width: 5px;
+  height: 5px;
+  border: 1px solid #fff;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+.colorpicker-hue,
+.colorpicker-alpha {
+  float: left;
+  width: 15px;
+  height: 100px;
+  margin-bottom: 4px;
+  margin-left: 4px;
+  cursor: row-resize;
+}
+.colorpicker-hue i,
+.colorpicker-alpha i {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 1px;
+  margin-top: -1px;
+  background: #000;
+  border-top: 1px solid #fff;
+}
+.colorpicker-hue {
+  background-image: url('../img/bootstrap-colorpicker/hue.png');
+}
+.colorpicker-alpha {
+  display: none;
+  background-image: url('../img/bootstrap-colorpicker/alpha.png');
+}
+.colorpicker {
+  top: 0;
+  left: 0;
+  z-index: 2500;
+  min-width: 130px;
+  padding: 4px;
+  margin-top: 1px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  *zoom: 1;
+}
+.colorpicker:before,
+.colorpicker:after {
+  display: table;
+  line-height: 0;
+  content: '';
+}
+.colorpicker:after {
+  clear: both;
+}
+.colorpicker:before {
+  position: absolute;
+  top: -7px;
+  left: 6px;
+  display: inline-block;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid #ccc;
+  border-left: 7px solid transparent;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  content: '';
+}
+.colorpicker:after {
+  position: absolute;
+  top: -6px;
+  left: 7px;
+  display: inline-block;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #fff;
+  border-left: 6px solid transparent;
+  content: '';
+}
+.colorpicker div {
+  position: relative;
+}
+.colorpicker.colorpicker-with-alpha {
+  min-width: 140px;
+}
+.colorpicker.colorpicker-with-alpha .colorpicker-alpha {
+  display: block;
+}
+.colorpicker-color {
+  height: 10px;
+  margin-top: 5px;
+  clear: both;
+  background-image: url('../img/bootstrap-colorpicker/alpha.png');
+  background-position: 0 100%;
+}
+.colorpicker-color div {
+  height: 10px;
+}
+.colorpicker-element .input-group-addon i {
+  display: block;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+.colorpicker.colorpicker-inline {
+  position: relative;
+  display: inline-block;
+  float: none;
+}
+.colorpicker.colorpicker-horizontal {
+  width: 110px;
+  height: auto;
+  min-width: 110px;
+}
+.colorpicker.colorpicker-horizontal .colorpicker-saturation {
+  margin-bottom: 4px;
+}
+.colorpicker.colorpicker-horizontal .colorpicker-color {
+  width: 100px;
+}
+.colorpicker.colorpicker-horizontal .colorpicker-hue,
+.colorpicker.colorpicker-horizontal .colorpicker-alpha {
+  float: left;
+  width: 100px;
+  height: 15px;
+  margin-bottom: 4px;
+  margin-left: 0;
+  cursor: col-resize;
+}
+.colorpicker.colorpicker-horizontal .colorpicker-hue i,
+.colorpicker.colorpicker-horizontal .colorpicker-alpha i {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 1px;
+  height: 15px;
+  margin-top: 0;
+  background: #fff;
+  border: 0;
+}
+.colorpicker.colorpicker-horizontal .colorpicker-hue {
+  background-image: url('../img/bootstrap-colorpicker/hue-horizontal.png');
+}
+.colorpicker.colorpicker-horizontal .colorpicker-alpha {
+  background-image: url('../img/bootstrap-colorpicker/alpha-horizontal.png');
+}
+.colorpicker.colorpicker-hidden {
+  display: none;
+}
+.colorpicker.colorpicker-visible {
+  display: block;
+}
+.colorpicker-inline.colorpicker-visible {
+  display: inline-block;
+}

libraries/bootstrap/css/bootstrap-theme.css

@@ -10,9 +10,9 @@
 .btn-info,
 .btn-warning,
 .btn-danger {
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
-          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 .btn-default:active,
 .btn-primary:active,
@@ -26,8 +26,8 @@
 .btn-info.active,
 .btn-warning.active,
 .btn-danger.active {
-  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
 .btn:active,
 .btn.active {
@@ -36,7 +36,7 @@
 .btn-default {
   text-shadow: 0 1px 0 #fff;
   background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
-  background-image:         linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
+  background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
   background-repeat: repeat-x;
@@ -55,7 +55,7 @@
 }
 .btn-primary {
   background-image: -webkit-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
-  background-image:         linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%);
+  background-image: linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0);
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
   background-repeat: repeat-x;
@@ -73,7 +73,7 @@
 }
 .btn-success {
   background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
-  background-image:         linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
+  background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
   background-repeat: repeat-x;
@@ -91,7 +91,7 @@
 }
 .btn-info {
   background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
-  background-image:         linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
+  background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
   background-repeat: repeat-x;
@@ -109,7 +109,7 @@
 }
 .btn-warning {
   background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
-  background-image:         linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
+  background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
   background-repeat: repeat-x;
@@ -127,7 +127,7 @@
 }
 .btn-danger {
   background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
-  background-image:         linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
+  background-image: linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
   background-repeat: repeat-x;
@@ -145,14 +145,14 @@
 }
 .thumbnail,
 .img-thumbnail {
-  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
-          box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
 }
 .dropdown-menu > li > a:hover,
 .dropdown-menu > li > a:focus {
   background-color: #e8e8e8;
   background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
-  background-image:         linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
   background-repeat: repeat-x;
 }
@@ -161,50 +161,50 @@
 .dropdown-menu > .active > a:focus {
   background-color: #357ebd;
   background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
-  background-image:         linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
+  background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
   background-repeat: repeat-x;
 }
 .navbar-default {
   background-image: -webkit-linear-gradient(top, #fff 0%, #f8f8f8 100%);
-  background-image:         linear-gradient(to bottom, #fff 0%, #f8f8f8 100%);
+  background-image: linear-gradient(to bottom, #fff 0%, #f8f8f8 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
   background-repeat: repeat-x;
   border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
-          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
 }
 .navbar-default .navbar-nav > .active > a {
   background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f3f3f3 100%);
-  background-image:         linear-gradient(to bottom, #ebebeb 0%, #f3f3f3 100%);
+  background-image: linear-gradient(to bottom, #ebebeb 0%, #f3f3f3 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff3f3f3', GradientType=0);
   background-repeat: repeat-x;
-  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
+  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
-          box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
+  box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
 }
 .navbar-brand,
 .navbar-nav > li > a {
-  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
 }
 .navbar-inverse {
   background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222 100%);
-  background-image:         linear-gradient(to bottom, #3c3c3c 0%, #222 100%);
+  background-image: linear-gradient(to bottom, #3c3c3c 0%, #222 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
   background-repeat: repeat-x;
 }
 .navbar-inverse .navbar-nav > .active > a {
   background-image: -webkit-linear-gradient(top, #222 0%, #282828 100%);
-  background-image:         linear-gradient(to bottom, #222 0%, #282828 100%);
+  background-image: linear-gradient(to bottom, #222 0%, #282828 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff282828', GradientType=0);
   background-repeat: repeat-x;
-  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
+  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
-          box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
+  box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
 }
 .navbar-inverse .navbar-brand,
 .navbar-inverse .navbar-nav > li > a {
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 }
 .navbar-static-top,
 .navbar-fixed-top,
@@ -212,136 +212,136 @@
   border-radius: 0;
 }
 .alert {
-  text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
-          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 .alert-success {
   background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
-  background-image:         linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
+  background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
   background-repeat: repeat-x;
   border-color: #b2dba1;
 }
 .alert-info {
   background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
-  background-image:         linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
+  background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
   background-repeat: repeat-x;
   border-color: #9acfea;
 }
 .alert-warning {
   background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
-  background-image:         linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
+  background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
   background-repeat: repeat-x;
   border-color: #f5e79e;
 }
 .alert-danger {
   background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
-  background-image:         linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
+  background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
   background-repeat: repeat-x;
   border-color: #dca7a7;
 }
 .progress {
   background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
-  background-image:         linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%);
+  background-image: linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);
   background-repeat: repeat-x;
 }
 .progress-bar {
   background-image: -webkit-linear-gradient(top, #428bca 0%, #3071a9 100%);
-  background-image:         linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
+  background-image: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0);
   background-repeat: repeat-x;
 }
 .progress-bar-success {
   background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%);
-  background-image:         linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
+  background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
   background-repeat: repeat-x;
 }
 .progress-bar-info {
   background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
-  background-image:         linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
+  background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
   background-repeat: repeat-x;
 }
 .progress-bar-warning {
   background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
-  background-image:         linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
+  background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
   background-repeat: repeat-x;
 }
 .progress-bar-danger {
   background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
-  background-image:         linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
+  background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
   background-repeat: repeat-x;
 }
 .list-group {
   border-radius: 4px;
-  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
-          box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
 }
 .list-group-item.active,
 .list-group-item.active:hover,
 .list-group-item.active:focus {
   text-shadow: 0 -1px 0 #3071a9;
   background-image: -webkit-linear-gradient(top, #428bca 0%, #3278b3 100%);
-  background-image:         linear-gradient(to bottom, #428bca 0%, #3278b3 100%);
+  background-image: linear-gradient(to bottom, #428bca 0%, #3278b3 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3278b3', GradientType=0);
   background-repeat: repeat-x;
   border-color: #3278b3;
 }
 .panel {
-  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-          box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 .panel-default > .panel-heading {
   background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
-  background-image:         linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
   background-repeat: repeat-x;
 }
 .panel-primary > .panel-heading {
   background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
-  background-image:         linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
+  background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
   background-repeat: repeat-x;
 }
 .panel-success > .panel-heading {
   background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
-  background-image:         linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
+  background-image: linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);
   background-repeat: repeat-x;
 }
 .panel-info > .panel-heading {
   background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
-  background-image:         linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
+  background-image: linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);
   background-repeat: repeat-x;
 }
 .panel-warning > .panel-heading {
   background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
-  background-image:         linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%);
+  background-image: linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);
   background-repeat: repeat-x;
 }
 .panel-danger > .panel-heading {
   background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
-  background-image:         linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%);
+  background-image: linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);
   background-repeat: repeat-x;
 }
 .well {
   background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
-  background-image:         linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%);
+  background-image: linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);
   background-repeat: repeat-x;
   border-color: #dcdcdc;
-  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
+  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
-          box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 /*# sourceMappingURL=bootstrap-theme.css.map */

libraries/jquery.hotkeys.js

@@ -8,105 +8,186 @@
  *
  * Original idea by:
  * Binny V A, http://www.openjs.com/scripts/events/keyboard_shortcuts/
-*/
+ */
 
 /*
  * One small change is: now keys are passed by object { keys: '...' }
  * Might be useful, when you want to pass some other data to your handler
  */
 
-function initHotKeyPluggin(jQuery){
+function initHotKeyPluggin(jQuery) {
+  jQuery.hotkeys = {
+    version: '0.8',
 
-	jQuery.hotkeys = {
+    specialKeys: {
-		version: "0.8",
+      8: 'backspace',
+      9: 'tab',
+      10: 'return',
+      13: 'enter',
+      16: 'shift',
+      17: 'ctrl',
+      18: 'alt',
+      19: 'pause',
+      20: 'capslock',
+      27: 'esc',
+      32: 'space',
+      33: 'pageup',
+      34: 'pagedown',
+      35: 'end',
+      36: 'home',
+      37: 'left',
+      38: 'up',
+      39: 'right',
+      40: 'down',
+      45: 'insert',
+      46: 'del',
+      96: '0',
+      97: '1',
+      98: '2',
+      99: '3',
+      100: '4',
+      101: '5',
+      102: '6',
+      103: '7',
+      104: '8',
+      105: '9',
+      106: '*',
+      107: '+',
+      109: '-',
+      110: '.',
+      111: '/',
+      112: 'f1',
+      113: 'f2',
+      114: 'f3',
+      115: 'f4',
+      116: 'f5',
+      117: 'f6',
+      118: 'f7',
+      119: 'f8',
+      120: 'f9',
+      121: 'f10',
+      122: 'f11',
+      123: 'f12',
+      144: 'numlock',
+      145: 'scroll',
+      186: ';',
+      191: '/',
+      220: '\\',
+      222: "'",
+      224: 'meta',
+    },
 
-		specialKeys: {
+    shiftNums: {
-			8: "backspace", 9: "tab", 10: "return", 13: "enter", 16: "shift", 17: "ctrl", 18: "alt", 19: "pause",
+      '`': '~',
-			20: "capslock", 27: "esc", 32: "space", 33: "pageup", 34: "pagedown", 35: "end", 36: "home",
+      1: '!',
-			37: "left", 38: "up", 39: "right", 40: "down", 45: "insert", 46: "del", 
+      2: '@',
-			96: "0", 97: "1", 98: "2", 99: "3", 100: "4", 101: "5", 102: "6", 103: "7",
+      3: '#',
-			104: "8", 105: "9", 106: "*", 107: "+", 109: "-", 110: ".", 111 : "/", 
+      4: '$',
-			112: "f1", 113: "f2", 114: "f3", 115: "f4", 116: "f5", 117: "f6", 118: "f7", 119: "f8", 
+      5: '%',
-			120: "f9", 121: "f10", 122: "f11", 123: "f12", 144: "numlock", 145: "scroll", 186: ";", 191: "/",
+      6: '^',
-			220: "\\", 222: "'", 224: "meta"
+      7: '&',
-		},
+      8: '*',
+      9: '(',
+      0: ')',
+      '-': '_',
+      '=': '+',
+      ';': ': ',
+      "'": '"',
+      ',': '<',
+      '.': '>',
+      '/': '?',
+      '\\': '|',
+    },
+  };
 
-		shiftNums: {
+  function keyHandler(handleObj) {
-			"`": "~", "1": "!", "2": "@", "3": "#", "4": "$", "5": "%", "6": "^", "7": "&", 
+    if (typeof handleObj.data === 'string') {
-			"8": "*", "9": "(", "0": ")", "-": "_", "=": "+", ";": ": ", "'": "\"", ",": "<", 
+      handleObj.data = { keys: handleObj.data };
-			".": ">",  "/": "?",  "\\": "|"
+    }
-		}
-	};
 
-	function keyHandler( handleObj ) {
+    // Only care when a possible input has been specified
-		if ( typeof handleObj.data === "string" ) {
+    if (!handleObj.data || !handleObj.data.keys || typeof handleObj.data.keys !== 'string') {
-			handleObj.data = { keys: handleObj.data };
+      return;
-		}
+    }
 
-		// Only care when a possible input has been specified
+    var origHandler = handleObj.handler,
-		if ( !handleObj.data || !handleObj.data.keys || typeof handleObj.data.keys !== "string" ) {
+      keys = handleObj.data.keys.toLowerCase().split(' '),
-			return;
+      textAcceptingInputTypes = [
-		}
+        'text',
+        'password',
+        'number',
+        'email',
+        'url',
+        'range',
+        'date',
+        'month',
+        'week',
+        'time',
+        'datetime',
+        'datetime-local',
+        'search',
+        'color',
+        'tel',
+      ];
 
-		var origHandler = handleObj.handler,
+    handleObj.handler = function (event) {
-			keys = handleObj.data.keys.toLowerCase().split(" "),
+      // Don't fire in text-accepting inputs that we didn't directly bind to
-			textAcceptingInputTypes = ["text", "password", "number", "email", "url", "range", "date", "month", "week", "time", "datetime", "datetime-local", "search", "color", "tel"];
+      if (
+        this !== event.target &&
+        (/textarea|select/i.test(event.target.nodeName) ||
+          jQuery.inArray(event.target.type, textAcceptingInputTypes) > -1)
+      ) {
+        return;
+      }
 
-		handleObj.handler = function( event ) {
+      var special = jQuery.hotkeys.specialKeys[event.keyCode],
-			// Don't fire in text-accepting inputs that we didn't directly bind to
+        character = String.fromCharCode(event.which).toLowerCase(),
-			if ( this !== event.target && (/textarea|select/i.test( event.target.nodeName ) ||
+        modif = '',
-				jQuery.inArray(event.target.type, textAcceptingInputTypes) > -1 ) ) {
+        possible = {};
-				return;
-			}
 
-			var special = jQuery.hotkeys.specialKeys[ event.keyCode ],
+      // check combinations (alt|ctrl|shift+anything)
-				character = String.fromCharCode( event.which ).toLowerCase(),
+      if (event.altKey && special !== 'alt') {
-				modif = "", possible = {};
+        modif += 'alt+';
+      }
 
-			// check combinations (alt|ctrl|shift+anything)
+      if (event.ctrlKey && special !== 'ctrl') {
-			if ( event.altKey && special !== "alt" ) {
+        modif += 'ctrl+';
-				modif += "alt+";
+      }
-			}
 
-			if ( event.ctrlKey && special !== "ctrl" ) {
+      // TODO: Need to make sure this works consistently across platforms
-				modif += "ctrl+";
+      if (event.metaKey && !event.ctrlKey && special !== 'meta') {
-			}
+        modif += 'meta+';
+      }
 
-			// TODO: Need to make sure this works consistently across platforms
+      if (event.shiftKey && special !== 'shift') {
-			if ( event.metaKey && !event.ctrlKey && special !== "meta" ) {
+        modif += 'shift+';
-				modif += "meta+";
+      }
-			}
 
-			if ( event.shiftKey && special !== "shift" ) {
+      if (special) {
-				modif += "shift+";
+        possible[modif + special] = true;
-			}
+      }
 
-			if ( special ) {
+      if (character) {
-				possible[ modif + special ] = true;
+        possible[modif + character] = true;
-			}
+        possible[modif + jQuery.hotkeys.shiftNums[character]] = true;
 
-			if ( character ) {
+        // "$" can be triggered as "Shift+4" or "Shift+$" or just "$"
-				possible[ modif + character ] = true;
+        if (modif === 'shift+') {
-				possible[ modif + jQuery.hotkeys.shiftNums[ character ] ] = true;
+          possible[jQuery.hotkeys.shiftNums[character]] = true;
+        }
+      }
 
-				// "$" can be triggered as "Shift+4" or "Shift+$" or just "$"
+      for (var i = 0, l = keys.length; i < l; i++) {
-				if ( modif === "shift+" ) {
+        if (possible[keys[i]]) {
-					possible[ jQuery.hotkeys.shiftNums[ character ] ] = true;
+          return origHandler.apply(this, arguments);
-				}
+        }
-			}
+      }
+    };
+  }
 
-			for ( var i = 0, l = keys.length; i < l; i++ ) {
+  jQuery.each(['keydown', 'keyup', 'keypress'], function () {
-				if ( possible[ keys[i] ] ) {
+    jQuery.event.special[this] = { add: keyHandler };
-					return origHandler.apply( this, arguments );
+  });
-				}
+}
-			}
-		};
-	}
-
-	jQuery.each([ "keydown", "keyup", "keypress" ], function() {
-		jQuery.event.special[ this ] = { add: keyHandler };
-	});
-
-};
 
 export default initHotKeyPluggin;

libraries/jquery.touchevent.js

@@ -0,0 +1,15 @@
+// Passive event listeners
+function registerTouchHandler(jQuery) {
+
+    jQuery.event.special.touchstart = {
+        setup: function (_, ns, handle) {
+            this.addEventListener("touchstart", handle, { passive: true });
+        }
+    };
+    jQuery.event.special.touchmove = {
+        setup: function (_, ns, handle) {
+            this.addEventListener("touchmove", handle, { passive: true });
+        }
+    };
+}
+export default registerTouchHandler;

package.json

@@ -45,5 +45,20 @@
     "homepage": "http://localhost:8080/react",
     "license": "https://wisemapping.atlassian.net/wiki/spaces/WS/pages/524357/WiseMapping+Public+License+Version+1.0+WPL",
     "version": "0.4.0",
-    "dependencies": {}
+    "husky": {
+        "hooks": {
+            "pre-commit": "lint-staged",
+            "pre-push": "yarn lint && yarn test:unit"
+        }
+    },
+    "lint-staged": {
+        "**/*.{ts,tsx}": [
+            "prettier --write"
+        ]
+    },
+    "eslintConfig": {
+	"rules": {
+		"implicit-arrow-linebreak": "off" 
+	}
+    }
 }

packages/core-js/__tests__/core.test.js

@@ -3,5 +3,5 @@
 import coreJs from '..';
 
 describe('core-js', () => {
-    it('needs tests');
+  it('needs tests');
 });

packages/core-js/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wisemapping/core-js",
-    "version": "0.4.0",
+    "version": "0.4.1",
     "description": "WiseMapping - Core Common Libraries",
     "homepage": "http://www.wisemapping.org/",
     "license": "MIT",
@@ -21,12 +21,12 @@
     },
     "private": false,
     "devDependencies": {
-        "@babel/core": "^7.14.6",
+        "@babel/core": "^7.18.13",
         "@babel/preset-env": "^7.14.7",
         "babel-loader": "^8.2.2",
         "clean-webpack-plugin": "^4.0.0-alpha.0",
         "core-js": "^3.15.2",
-        "webpack": "^5.44.0",
+        "webpack": "^5.74.0",
         "webpack-cli": "^4.7.2",
         "webpack-merge": "^5.8.0"
     },

packages/core-js/src/index.js

@@ -20,22 +20,22 @@
  * Cross-browser implementation of creating an XML document object.
  */
 export const createDocument = function () {
-    var doc = null;
+  var doc = null;
-    if ($defined(window.ActiveXObject)) {
+  if ($defined(window.ActiveXObject)) {
-        //http://blogs.msdn.com/b/xmlteam/archive/2006/10/23/using-the-right-version-of-msxml-in-internet-explorer.aspx
+    //http://blogs.msdn.com/b/xmlteam/archive/2006/10/23/using-the-right-version-of-msxml-in-internet-explorer.aspx
-        var progIDs = ['Msxml2.DOMDocument.6.0', 'Msxml2.DOMDocument.3.0'];
+    var progIDs = ['Msxml2.DOMDocument.6.0', 'Msxml2.DOMDocument.3.0'];
-        for (var i = 0; i < progIDs.length; i++) {
+    for (var i = 0; i < progIDs.length; i++) {
-            try {
+      try {
-                doc = new ActiveXObject(progIDs[i]);
+        doc = new ActiveXObject(progIDs[i]);
-                break;
+        break;
-            } catch (ex) {}
+      } catch (ex) {}
-        }
-    } else if (window.document.implementation && window.document.implementation.createDocument) {
-        doc = window.document.implementation.createDocument('', '', null);
     }
-    $assert(doc, 'Parser could not be instantiated');
+  } else if (window.document.implementation && window.document.implementation.createDocument) {
+    doc = window.document.implementation.createDocument('', '', null);
+  }
+  $assert(doc, 'Parser could not be instantiated');
 
-    return doc;
+  return doc;
 };
 
 /*
@@ -47,47 +47,47 @@ export const createDocument = function () {
  */
 
 export const $defined = function (obj) {
-    return obj != undefined;
+  return obj != undefined;
 };
 
 export const $assert = function (assert, message) {
-    if (!$defined(assert) || !assert) {
+  if (!$defined(assert) || !assert) {
-        logStackTrace();
+    logStackTrace();
-        console.log(message);
+    console.log(message);
-        throw new Error(message);
+    throw new Error(message);
-    }
+  }
 };
 
 export const sign = function (value) {
-    return value >= 0 ? 1 : -1;
+  return value >= 0 ? 1 : -1;
 };
 
 export function logStackTrace(exception) {
-    if (!$defined(exception)) {
+  if (!$defined(exception)) {
-        try {
+    try {
-            throw Error('Unexpected Exception');
+      throw Error('Unexpected Exception');
-        } catch (e) {
+    } catch (e) {
-            exception = e;
+      exception = e;
-        }
     }
-    var result = '';
+  }
-    if (exception.stack) {
+  var result = '';
-        //Firefox  and Chrome...
+  if (exception.stack) {
-        result = exception.stack;
+    //Firefox  and Chrome...
-    } else if (window.opera && exception.message) {
+    result = exception.stack;
-        //Opera
+  } else if (window.opera && exception.message) {
-        result = exception.message;
+    //Opera
-    } else {
+    result = exception.message;
-        //IE and Safari
+  } else {
-        result = exception.sourceURL + ': ' + exception.line + '\n\n';
+    //IE and Safari
+    result = exception.sourceURL + ': ' + exception.line + '\n\n';
 
-        var currentFunction = arguments.callee.caller;
+    var currentFunction = arguments.callee.caller;
-        while (currentFunction) {
+    while (currentFunction) {
-            var fn = currentFunction.toString();
+      var fn = currentFunction.toString();
-            result = result + '\n' + fn;
+      result = result + '\n' + fn;
-            currentFunction = currentFunction.caller;
+      currentFunction = currentFunction.caller;
-        }
     }
-    window.errorStack = result;
+  }
-    return result;
+  window.errorStack = result;
+  return result;
 }

packages/core-js/webpack.common.js

@@ -2,34 +2,34 @@ const path = require('path');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 module.exports = {
-    output: {
+  output: {
-        path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(__dirname, 'dist'),
-        filename: 'core.js',
+    filename: 'core.js',
-        publicPath: '',
+    publicPath: '',
-        library: {
+    library: {
-            type: 'umd',
+      type: 'umd',
-        }
     },
-    target: 'web',
+  },
-    optimization: {
+  target: 'web',
-        usedExports: true,
+  optimization: {
-    },
+    usedExports: true,
-    module: {
+  },
-        rules: [
+  module: {
-            {
+    rules: [
-                use: 'babel-loader',
+      {
-                test: /.js$/,
+        use: 'babel-loader',
-                exclude: [
+        test: /.js$/,
-                    /node_modules/,
+        exclude: [/node_modules/],
-                ]
+      },
-            },
+    ],
-        ],
+  },
-    },
+  resolve: {
-    resolve: {
+    extensions: ['.js'],
-        extensions: ['.js'],
+  },
-    },
+  plugins: [
-    plugins: [new CleanWebpackPlugin({
+    new CleanWebpackPlugin({
-        dangerouslyAllowCleanPatternsOutsideProject: true,
+      dangerouslyAllowCleanPatternsOutsideProject: true,
-        dry: false,
+      dry: false,
-    })],
+    }),
+  ],
 };

packages/core-js/webpack.dev.js

@@ -3,9 +3,9 @@ const { merge } = require('webpack-merge');
 const common = require('./webpack.common');
 
 const devConfig = {
-    mode: 'development',
+  mode: 'development',
-    plugins: [new HotModuleReplacementPlugin()],
+  plugins: [new HotModuleReplacementPlugin()],
-    devtool: 'eval-source-map'
+  devtool: 'eval-source-map',
 };
 
 module.exports = merge(common, devConfig);

packages/core-js/webpack.prod.js

@@ -2,13 +2,13 @@ const { merge } = require('webpack-merge');
 const common = require('./webpack.common');
 
 const prodConfig = {
-    mode: 'production',
+  mode: 'production',
-    devtool: 'source-map',
+  devtool: 'source-map',
-    optimization: {
+  optimization: {
-        splitChunks: {
+    splitChunks: {
-            chunks: 'all',
+      chunks: 'all',
-        },
     },
+  },
 };
 
 module.exports = merge(common, prodConfig);

packages/editor/cypress.json

@@ -1,6 +1,7 @@
 {
     "video": false,
     "videoUploadOnPasses": false,
-    "baseUrl": "http://localhost:8081"
+    "baseUrl": "http://localhost:8081",
+    "includeShadowDom": true
   }
   

packages/editor/cypress/integration/playground.test.js

@@ -1,21 +1,30 @@
 context('Playground', () => {
   it('viewmode page should match its snapshot', () => {
-    ['welcome', 'sample1', 'sample2', 'sample3', 'sample4', 'sample5', 'sample6', 'complex', 'img-support', 'icon-sample'].forEach((mapId) => {
+    [
+      'welcome',
+      'sample1',
+      'sample2',
+      'sample3',
+      'sample4',
+      'sample5',
+      'sample6',
+      'complex',
+      'img-support',
+      'icon-sample',
+    ].forEach((mapId) => {
       cy.visit(`/viewmode.html?id=${mapId}`);
-      cy.get('#mindplot.ready').should('exist');
+      cy.get('#mindmap-comp.ready').should('exist');
       cy.matchImageSnapshot(`viewmode-${mapId}`);
     });
   });
-  it('the playground container.html page should match its snapshot', () => {
+  it('the playground showcase.html page should match its snapshot', () => {
-    cy.visit('/container.html');
+    cy.visit('/showcase.html');
-    cy.getIframeBody()
+    cy.getIframeBody().find('#mindmap-comp.ready').should('exist');
-      .find('#mindplot.ready')
-      .should('exist');
     cy.matchImageSnapshot('container');
   });
   it('the playground editor.html page should match its snapshot', () => {
     cy.visit('/editor.html');
-    cy.get('#mindplot.ready').should('exist');
+    cy.get('#mindmap-comp.ready').should('exist');
     // TODO: why is the editor appearing twice in the snapshot?
     cy.matchImageSnapshot('editor');
   });

packages/editor/cypress/integration/relationship.test.js

@@ -1,16 +1,16 @@
 context('Relationship Topics', () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        cy.visit('/editor.html');
+    cy.visit('/editor.html');
-        cy.reload();
+    cy.reload();
-        cy.get('[test-id="30-11-relationship"]').click({ force: true });
+    cy.get('[test-id="30-11-relationship"]').click({ force: true });
-    });
+  });
 
-    it('Change shape relationship', () => {
+  it('Change shape relationship', () => {
-        cy.get('[test-id="control-56"]').trigger('mousedown', { force: true });
+    cy.get('[test-id="control-56"]').trigger('mousedown', { force: true });
-        cy.get('body').trigger('mousemove', { clientX: 500, clientY: 200 });
+    cy.get('body').trigger('mousemove', { clientX: 500, clientY: 200 });
-        cy.get('body').trigger('mouseup');
+    cy.get('body').trigger('mouseup');
-        cy.matchImageSnapshot('changeShapeRealtionship');
+    cy.matchImageSnapshot('changeShapeRealtionship');
 
-        cy.get('[test-id="control-56"]').invoke('attr', 'cy').should('eq', '-131.75');
+    cy.get('[test-id="control-56"]').invoke('attr', 'cy').should('eq', '-131.75');
-    });
+  });
 });

packages/editor/cypress/support/commands.js

@@ -18,7 +18,6 @@ if (Cypress.env('imageSnaphots')) {
 }
 
 // https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/
-Cypress.Commands.add('getIframeBody', () => cy
+Cypress.Commands.add('getIframeBody', () =>
-  .get('iframe')
+  cy.get('iframe').its('0.contentDocument.body').should('not.be.empty').then(cy.wrap),
-  .its('0.contentDocument.body').should('not.be.empty')
+);
-  .then(cy.wrap));

packages/editor/images/close-dialog-icon.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 26 26" style="enable-background:new 0 0 26 26;" xml:space="preserve">
+<g>
+	<path style="fill:#030104;" d="M21.125,0H4.875C2.182,0,0,2.182,0,4.875v16.25C0,23.818,2.182,26,4.875,26h16.25
+		C23.818,26,26,23.818,26,21.125V4.875C26,2.182,23.818,0,21.125,0z M18.78,17.394l-1.388,1.387c-0.254,0.255-0.67,0.255-0.924,0
+		L13,15.313L9.533,18.78c-0.255,0.255-0.67,0.255-0.925-0.002L7.22,17.394c-0.253-0.256-0.253-0.669,0-0.926l3.468-3.467
+		L7.221,9.534c-0.254-0.256-0.254-0.672,0-0.925l1.388-1.388c0.255-0.257,0.671-0.257,0.925,0L13,10.689l3.468-3.468
+		c0.255-0.257,0.671-0.257,0.924,0l1.388,1.386c0.254,0.255,0.254,0.671,0.001,0.927l-3.468,3.467l3.468,3.467
+		C19.033,16.725,19.033,17.138,18.78,17.394z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

packages/editor/lang/de.json

@@ -4,6 +4,18 @@
     },
     "editor.try-welcome-description": {
         "defaultMessage": "Melden Sie sich an, um kostenlos eine unbegrenzte Anzahl von Mindmaps zu erstellen, zu teilen und zu veröffentlichen."
+    },
+	"editor.try-welcome-mobile": {
+		"defaultMessage": "Diese Edition zeigt einige der Mindmap-Funktionen!"
+	},
+    "editor.try-welcome-description-mobile": {
+        "defaultMessage": "Melden Sie sich an, um kostenlos eine unbegrenzte Anzahl von Mindmaps zu erstellen, zu teilen und zu veröffentlichen. Eingeschränkte Funktionen der Mindmap-Edition werden auf Mobilgeräten unterstützt. Verwenden Sie den Desktop-Browser für vollständige Editorfunktionen."
+    },
+    "editor.edit-mobile": {
+        "defaultMessage": "Hinweis für Mobilgeräte."
+    },
+    "editor.edit-description-mobile": {
+        "defaultMessage": "Eingeschränkte Funktionen der Mindmap-Edition werden auf Mobilgeräten unterstützt. Verwenden Sie den Desktop-Browser für vollständige Editorfunktionen."
     },
     "login.signup": {
         "defaultMessage": "Anmeldung"

packages/editor/lang/en.json

@@ -1,9 +1,21 @@
 {
     "editor.try-welcome": {
-        "defaultMessage": "This edition space showcases some of the mindmap editor capabilities !"
+        "defaultMessage": "This edition space showcases some of the mindmap editor capabilities!"
     },
     "editor.try-welcome-description": {
-        "defaultMessage": "Sign Up to start creating, sharing and publishing unlimited number of mindmaps for free."
+		"defaultMessage": "Sign Up to start creating, sharing and publishing unlimited number of mindmaps for free."
+    },
+	"editor.try-welcome-mobile": {
+		"defaultMessage": "This edition space showcases some of the mindmap capabilities!"
+	},
+    "editor.try-welcome-description-mobile": {
+        "defaultMessage": "Sign Up to start creating, sharing and publishing unlimited number of mindmaps for free. Limited mindmap edition capabilties are supported in Mobile devices. Use Desktop browser for full editor capabilies."
+    },
+    "editor.edit-mobile": {
+        "defaultMessage": "Note for mobile devices."
+    },
+    "editor.edit-description-mobile": {
+        "defaultMessage": "Limited mindmap edition capabilities are supported in Mobile devices. Use Desktop browser for full editor capabilities."
     },
     "login.signup": {
         "defaultMessage": "Sign Up"

packages/editor/lang/es.json

@@ -4,6 +4,18 @@
     },
     "editor.try-welcome-description": {
         "defaultMessage": "Registrate para comenzar a crear, compartir y publicar una cantidad ilimitada de mapas mentales de forma gratuita."
+    },
+	"editor.try-welcome-mobile": {
+		"defaultMessage": "¡Este espacio de edición muestra algunas de las capacidades de mapas mentales!"
+	},
+    "editor.try-welcome-description-mobile": {
+        "defaultMessage": "Registrate para comenzar a crear, compartir y publicar una cantidad ilimitada de mapas mentales de forma gratuita. En dispositivos móbiles las funciones son limitadas. Use la versión de escritorio para tener las funciones completas."
+    },
+    "editor.edit-mobile": {
+        "defaultMessage": "Nota para dispositivos móbiles."
+    },
+    "editor.edit-description-mobile": {
+        "defaultMessage": "En dispositivos móbiles las funciones son limitadas. Use la versión de escritorio para tener las funciones completas."
     },
     "login.signup": {
         "defaultMessage": "Crear cuenta"

packages/editor/lang/fr.json

@@ -1,9 +1,21 @@
 {
     "editor.try-welcome": {
-        "defaultMessage": "Cet espace d'édition présente certaines des fonctionnalités de l'éditeur de cartes mentales !"
+        "defaultMessage": "Cet espace d'édition présente certaines des fonctionnalités de l'éditeur de cartes mentales!"
     },
     "editor.try-welcome-description": {
         "defaultMessage": "Inscrivez-vous pour commencer à créer, partager et publier gratuitement un nombre illimité de cartes mentales."
+    },
+	"editor.try-welcome-mobile": {
+		"defaultMessage": "Cet espace d'édition présente certaines des fonctionnalités des cartes mentales!"
+	},
+    "editor.try-welcome-description-mobile": {
+        "defaultMessage": "Inscrivez-vous pour commencer à créer, partager et publier gratuitement un nombre illimité de cartes mentales. Les capacités d'édition limitées de mindmap sont prises en charge dans les appareils mobiles. Utilisez le navigateur de bureau pour bénéficier de toutes les fonctionnalités de l'éditeur."
+    },
+    "editor.edit-mobile": {
+        "defaultMessage": "Remarque pour les appareils mobiles."
+    },
+    "editor.edit-description-mobile": {
+        "defaultMessage": "Les capacités d'édition limitées de mindmap sont prises en charge dans les appareils mobiles. Utilisez le navigateur de bureau pour bénéficier de toutes les fonctionnalités de l'éditeur."
     },
     "login.signup": {
         "defaultMessage": "S'inscrire"

packages/editor/lang/ru.json

@@ -4,6 +4,18 @@
     },
     "editor.try-welcome-description": {
         "defaultMessage": "Чтобы получить бесплатный неограниченный доступ —  нужна только регистрация."
+    },
+	"editor.try-welcome-mobile": {
+		"defaultMessage": "В этом издании демонстрируются некоторые возможности ментальных карт!"
+	},
+    "editor.try-welcome-description-mobile": {
+        "defaultMessage": "Зарегистрируйтесь, чтобы начать создавать, делиться и публиковать неограниченное количество ментальных карт бесплатно. Возможности ограниченной версии Mindmap поддерживаются на мобильных устройствах. Используйте настольный браузер для полных возможностей редактора."
+    },
+    "editor.edit-mobile": {
+        "defaultMessage": "Примечание для мобильных устройств."
+    },
+    "editor.edit-description-mobile": {
+        "defaultMessage": "Возможности ограниченной версии Mindmap поддерживаются на мобильных устройствах. Используйте настольный браузер для полных возможностей редактора."
     },
     "login.signup": {
         "defaultMessage": "Регистрация"

packages/editor/lang/zh.json

@@ -1,14 +1,26 @@
 {
-  "editor.try-welcome": {
+	"editor.try-welcome": {
-      "defaultMessage": "这个编辑区域展示了一些思维导图编辑器的功能！"
+		"defaultMessage": "这个编辑区域展示了一些思维导图编辑器的功能！"
-  },
+	},
-  "editor.try-welcome-description": {
+	"editor.try-welcome-description": {
-      "defaultMessage": "注册后可以免费创建、分享和发布无限数量的思维导图。"
+		"defaultMessage": "注册后可以免费创建、分享和发布无限数量的思维导图。"
-  },
+	},
-  "login.signup": {
+	"editor.try-welcome-mobile": {
-      "defaultMessage": "注册"
+		"defaultMessage": "这个版本空间展示了一些思维导图功能！"
-  },
+	},
-  "action.share": {
+	"editor.try-welcome-description-mobile": {
-      "defaultMessage": "分享"
+		"defaultMessage": "注册以开始免费创建、共享和发布无限数量的思维导图。 移动设备支持有限的思维导图编辑功能。 使用桌面浏览器获得完整的编辑器功能。"
-  }
+	},
+	"editor.edit-mobile": {
+		"defaultMessage": "移动设备注意事项."
+	},
+	"editor.edit-description-mobile": {
+		"defaultMessage": "移动设备支持有限的思维导图编辑功能。 使用桌面浏览器获得完整的编辑器功能。"
+	},
+	"login.signup": {
+		"defaultMessage": "注册"
+	},
+	"action.share": {
+		"defaultMessage": "分享"
+	}
 }

packages/editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wisemapping/editor",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "main": "dist/editor.bundle.js",
   "scripts": {
     "build": "webpack --config webpack.prod.js",
@@ -16,11 +16,9 @@
   "license": "MIT",
   "private": false,
   "devDependencies": {
-    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-env": "^7.18.6",
-    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-react": "^7.18.6",
     "@formatjs/cli": "^4.8.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "@typescript-eslint/eslint-plugin": "^4.8.1",
     "@typescript-eslint/parser": "^4.8.1",
     "clean-webpack-plugin": "^4.0.0",
@@ -38,18 +36,18 @@
     "ts-loader": "^8.0.11",
     "ts-node": "^9.0.0",
     "typescript": "^4.1.2",
-    "webpack": "^5.67.0",
+    "webpack": "^5.74.0",
     "webpack-dev-server": "^4.7.3",
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "@types/styled-components": "^5.1.4",
+    "@wisemapping/mindplot": "^5.0.1"
-    "@wisemapping/mindplot": "^5.0.1",
-    "styled-components": "^5.2.1"
   },
   "peerDependencies": {
+    "@types/styled-components": "^5.1.26",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-intl": "^5.24.3"
+    "react-intl": "^5.24.3",
+    "styled-components": "^5.3.5"
   }
 }

packages/editor/src/@types/index.d.ts

@@ -1,4 +1,4 @@
-declare module "*.svg" {
+declare module '*.svg' {
   const content: any;
   export default content;
 }

packages/editor/src/bootstrap-fixes.css

@@ -6,15 +6,15 @@
 /* bootstrap modal */
 
 .wise-editor .modal {
-    overflow: hidden;
+  overflow: hidden;
 }
 
 .modal-backdrop {
-    position: fixed;
+  position: fixed;
-    left: 0;
+  left: 0;
-    top: 0;
+  top: 0;
-    width: 100vw;
+  width: 100vw;
-    height: 100vh;
+  height: 100vh;
-    background: rgba(0,0,0,0.5);
+  background: rgba(0, 0, 0, 0.5);
-    z-index: 1000;
+  z-index: 1000;
 }

packages/editor/src/classes/bootstrap/BootstrapDialog.js

@@ -75,9 +75,7 @@ class BootstrapDialog extends Options {
         )}</button>`,
       );
       footer.append(this.acceptButton);
-      this.acceptButton
+      this.acceptButton.unbind('click').on('click', this.options.onEventData, this.onAcceptClick);
-        .unbind('click')
-        .on('click', this.options.onEventData, this.onAcceptClick);
     }
     if (this.options.removeButton) {
       this.removeButton = $(
@@ -114,7 +112,7 @@ class BootstrapDialog extends Options {
     return header;
   }
 
-  onAcceptClick() {
+  onAcceptClick(event) {
     throw new Error('Unsupported operation');
   }
 
@@ -122,7 +120,7 @@ class BootstrapDialog extends Options {
     // Overwrite default behaviour ...
   }
 
-  onRemoveClick() {
+  onRemoveClick(event) {
     throw new Error('Unsupported operation');
   }
 

packages/editor/src/classes/bootstrap/BootstrapDialogRequest.js

@@ -49,10 +49,7 @@ class BootstrapDialogRequest extends BootstrapDialog {
 
     this._native.find('.modal-body').load(url, () => {
       me.acceptButton.unbind('click').click(() => {
-        if (
+        if ($defined(global.submitDialogForm) && typeof global.submitDialogForm === 'function') {
-          $defined(global.submitDialogForm)
-                    && typeof global.submitDialogForm === 'function'
-        ) {
           global.submitDialogForm();
         }
       });

packages/editor/src/classes/bootstrap/BootstrapWidgetManager.ts

@@ -0,0 +1,90 @@
+import {
+  WidgetManager,
+  Topic,
+  LinkModel,
+  LinkIcon,
+  NoteModel,
+  NoteIcon,
+  $msg,
+} from '@wisemapping/mindplot';
+import LinkIconTooltip from './LinkIconTooltip';
+import LinkEditor from './LinkEditor';
+import FloatingTip from './FloatingTip';
+import NoteEditor from './NoteEditor';
+import $ from 'jquery';
+
+export default class BootstrapWidgetManager extends WidgetManager {
+  createTooltipForLink(topic: Topic, linkModel: LinkModel, linkIcon: LinkIcon) {
+    const htmlImage = linkIcon.getImage().peer;
+    const toolTip = new LinkIconTooltip(linkIcon);
+    linkIcon.addEvent('mouseleave', (event) => {
+      setTimeout(() => {
+        if (!$('#linkPopover:hover').length) {
+          toolTip.hide();
+        }
+        event.stopPropagation();
+      }, 100);
+    });
+    $(htmlImage._native).mouseenter(() => {
+      toolTip.show();
+    });
+  }
+
+  showEditorForLink(topic: Topic, linkModel: LinkModel, linkIcon: LinkIcon) {
+    const editorModel = {
+      getValue(): string {
+        return topic.getLinkValue();
+      },
+      setValue(value: string) {
+        topic.setLinkValue(value);
+      },
+    };
+    topic.closeEditors();
+    const editor = new LinkEditor(editorModel);
+    editor.show();
+  }
+
+  private _buildTooltipContentForNote(noteModel: NoteModel): JQuery {
+    if ($('body').find('#textPopoverNote').length === 1) {
+      const text = $('body').find('#textPopoverNote');
+      text.text(noteModel.getText());
+      return text;
+    }
+    const result = $('<div id="textPopoverNote"></div>').css({ padding: '5px' });
+
+    const text = $('<div></div>').text(noteModel.getText()).css({
+      'white-space': 'pre-wrap',
+      'word-wrap': 'break-word',
+    });
+    result.append(text);
+    return result;
+  }
+
+  createTooltipForNote(topic: Topic, noteModel: NoteModel, noteIcon: NoteIcon) {
+    const htmlImage = noteIcon.getImage().peer;
+    const me = this;
+    const toolTip = new FloatingTip($(htmlImage._native), {
+      title: $msg('NOTE'),
+      content() {
+        return me._buildTooltipContentForNote(noteModel);
+      },
+      html: true,
+      placement: 'bottom',
+      destroyOnExit: true,
+    });
+  }
+
+  showEditorForNote(topic: Topic, noteModel: NoteModel, noteIcon: NoteIcon) {
+    const editorModel = {
+      getValue(): string {
+        return topic.getNoteValue();
+      },
+      setValue(value: string) {
+        topic.setNoteValue(value);
+      },
+    };
+    topic.closeEditors();
+    const editor = new NoteEditor(editorModel);
+    editor.show();
+  }
+}

packages/editor/src/classes/bootstrap/FloatingTip.ts

@@ -16,7 +16,7 @@
  *   limitations under the License.
  */
 import merge from 'lodash/merge';
-import Events from '../Events';
+import Events from '../menu/Events';
 
 const defaultOptions = {
   animation: true,
@@ -73,7 +73,7 @@ class FloatingTip extends Events {
 
     if (this.addEvent) {
       Object.keys(options).forEach((option) => {
-        if (options[option] instanceof Function && (/^on[A-Z]/).test(option)) {
+        if (options[option] instanceof Function && /^on[A-Z]/.test(option)) {
           this.addEvent(option, options[option]);
           delete options[option];
         }

packages/editor/src/classes/bootstrap/LinkEditor.ts

@@ -17,17 +17,20 @@
  */
 import $ from 'jquery';
 import { $assert } from '@wisemapping/core-js';
-import { $msg } from '../Messages';
+import { $msg } from '@wisemapping/mindplot';
-import BootstrapDialog from './bootstrap/BootstrapDialog';
+import BootstrapDialog from './BootstrapDialog';
+
+interface LinkEditorModel {
+  getValue(): string;
+  setValue(value: string): void;
+}
 
 class LinkEditor extends BootstrapDialog {
-  /**
+  private form: JQuery<HTMLElement>;
-     * @constructs
+
-     * @param model
+  private formSubmitted: boolean;
-     * @throws will throw an error if model is null or undefined
+
-     * @extends BootstrapDialog
+  constructor(model: LinkEditorModel) {
-     */
-  constructor(model) {
     $assert(model, 'model can not be null');
     super($msg('LINK'), {
       cancelButton: true,
@@ -37,13 +40,12 @@ class LinkEditor extends BootstrapDialog {
       errorMessage: true,
       onEventData: { model },
     });
-    this._model = model;
     this.css({ margin: '150px auto' });
     const panel = this._buildPanel(model);
     this.setContent(panel);
   }
 
-  _buildPanel(model) {
+  protected _buildPanel(model: LinkEditorModel) {
     const result = $('<div></div>').css('padding-top', '5px');
     this.form = $('<form></form>').attr({
       action: 'none',
@@ -80,8 +82,9 @@ class LinkEditor extends BootstrapDialog {
     });
 
     openButton.html($msg('OPEN_LINK')).css('margin-left', '0px');
-    openButton.click(() => {
+    openButton.on('click', () => {
-      window.open(input.val(), '_blank', 'status=1,width=700,height=450,resize=1');
+      const value = input.val() as string;
+      window.open(value, '_blank', 'status=1,width=700,height=450,resize=1');
     });
     const spanControl = $('<span class="input-group-btn"></span>').append(openButton);
 
@@ -90,13 +93,13 @@ class LinkEditor extends BootstrapDialog {
     this.form.append(section);
 
     const me = this;
-    this.form.unbind('submit').submit((event) => {
+    this.form.off('submit').on('submit', (event) => {
       event.preventDefault();
-      let inputValue = input.val();
+      let inputValue = input.val() as string;
       inputValue = this.hasProtocol(inputValue) ? inputValue : `https://${inputValue}`;
       if (me.checkURL(inputValue)) {
         me.cleanError();
-        if (inputValue != null && $.trim(inputValue) !== '') {
+        if (inputValue !== null && inputValue.trim() !== '') {
           model.setValue(inputValue);
         }
         me.close();
@@ -115,18 +118,19 @@ class LinkEditor extends BootstrapDialog {
    * checks whether the input is a valid url
    * @return {Boolean} true if the url is valid
    */
-  checkURL(url) {
+  private checkURL(url: string): boolean {
-    const regex = /^(http|https):\/\/[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i;
+    const regex =
-    return (regex.test(url));
+      /^(http|https):\/\/[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i;
+    return regex.test(url);
   }
 
   /**
    * checks whether the input is a valid url
    * @return {Boolean} true if the url is valid
    */
-  hasProtocol(url) {
+  private hasProtocol(url: string): boolean {
     const regex = /^(http|https):\/\//i;
-    return (regex.test(url));
+    return regex.test(url);
   }
 
   /**
@@ -134,7 +138,7 @@ class LinkEditor extends BootstrapDialog {
    * triggered when the user clicks the accept button - submits the url input
    * @param event
    */
-  onAcceptClick(event) {
+  onAcceptClick(event: Event): void {
     this.formSubmitted = false;
     $('#linkFormId').trigger('submit');
     if (!this.formSubmitted) {
@@ -146,7 +150,7 @@ class LinkEditor extends BootstrapDialog {
    * overrides parent method
    * sets the url input on focus
    */
-  onDialogShown() {
+  onDialogShown(): void {
     $(this).find('#inputUrl').focus();
   }
 

packages/editor/src/classes/bootstrap/LinkIconTooltip.ts

@@ -17,11 +17,13 @@
  */
 import { $assert } from '@wisemapping/core-js';
 import $ from 'jquery';
-import { $msg } from '../Messages';
+import { LinkIcon } from '@wisemapping/mindplot';
+import { LinkModel } from '@wisemapping/mindplot';
+import { $msg } from '@wisemapping/mindplot';
 import FloatingTip from './FloatingTip';
 
 class LinkIconTooltip extends FloatingTip {
-  constructor(linkIcon) {
+  constructor(linkIcon: LinkIcon) {
     $assert(linkIcon, 'linkIcon can not be null');
     const nativeElement = $(linkIcon.getImage().peer._native);
     super(nativeElement, {
@@ -33,52 +35,29 @@ class LinkIconTooltip extends FloatingTip {
       placement: 'bottom',
       title: $msg('LINK'),
       trigger: 'manual',
-      template: '<div id="linkPopover" class="popover" onmouseover="jQuery(this).mouseleave(function() {jQuery(this).fadeOut(200); });" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
+      template:
+        '<div id="linkPopover" class="popover" onmouseover="jQuery(this).mouseleave(function() {jQuery(this).fadeOut(200); });" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
       destroyOnExit: true,
     });
   }
 
-  static _buildContent(linkIcon) {
+  private static _buildContent(linkIcon: LinkIcon): JQuery<HTMLElement> {
-    const url = linkIcon.getModel().getUrl();
+    const model = linkIcon.getModel() as LinkModel;
+    const url = model.getUrl();
     const linkText = `${url}`;
-    const linkPreview = `https://free.pagepeeker.com/v2/thumbs.php?size=m&url=${url}`;
 
     const result = $('<div></div>').css({
       padding: '5px',
       width: '100%',
     });
-
-    const text = $('<div id="linkPopoverUrl"></div>').text(linkText)
-      .css({
-        'white-space': 'pre-wrap',
-        'word-wrap': 'break-word',
-      });
-    result.append(text);
-
-    const imgContainer = $('<div></div>')
-      .css({
-        width: '100%',
-        textAlign: 'right',
-        'padding-bottom': '5px',
-        'padding-top': '5px',
-      });
-
-    const img = $('<img id="linkPopoverPreview">')
-      .prop('src', linkPreview)
-      .prop('img', url)
-      .prop('alt', url);
-
-    img.css('padding', '5px');
-
     const link = $('<a id="linkPopoverAnchor"></a>').attr({
       href: url,
       alt: 'Open in new window ...',
       target: '_blank',
     });
 
-    link.append(img);
+    link.html(linkText);
-    imgContainer.append(link);
+    result.append(link);
-    result.append(imgContainer);
     return result;
   }
 }

packages/editor/src/classes/bootstrap/NoteEditor.ts

@@ -18,10 +18,15 @@
 import { $assert } from '@wisemapping/core-js';
 import $ from 'jquery';
 import BootstrapDialog from '../../../../editor/src/classes/bootstrap/BootstrapDialog';
-import { $msg } from '../Messages';
+import { $msg } from '@wisemapping/mindplot';
+
+interface NoteEditorModel {
+  getValue(): string;
+  setValue(value: string): void;
+}
 
 class NoteEditor extends BootstrapDialog {
-  constructor(model) {
+  constructor(model: NoteEditorModel) {
     $assert(model, 'model can not be null');
     super($msg('NOTE'), {
       cancelButton: true,
@@ -30,13 +35,12 @@ class NoteEditor extends BootstrapDialog {
       removeButton: typeof model.getValue() !== 'undefined',
       onEventData: { model },
     });
-    this._model = model;
     this.css({ margin: '150px auto' });
     const panel = this._buildPanel(model);
     this.setContent(panel);
   }
 
-  _buildPanel(model) {
+  _buildPanel(model: NoteEditorModel) {
     const result = $('<div></div>').css('padding-top', '5px');
 
     const form = $('<form></form>').attr({
@@ -68,20 +72,20 @@ class NoteEditor extends BootstrapDialog {
     return result;
   }
 
-  onAcceptClick(event) {
+  onAcceptClick(event): void {
     event.data.dialog._submitForm(event.data.model);
   }
 
-  _submitForm(model) {
+  _submitForm(model: NoteEditorModel) {
     const textarea = this._native.find('textarea');
     if (textarea.val()) {
-      model.setValue(textarea.val());
+      model.setValue(textarea.val() as string);
     }
     this.close();
   }
 
   onDialogShown() {
-    $(this).find('textarea').focus();
+    $(this).find('textarea').trigger('focus');
   }
 
   onRemoveClick(event) {

packages/editor/src/classes/i18n-msg/index.ts

@@ -5,26 +5,25 @@ import DE from './../../compiled-lang/de.json';
 import RU from './../../compiled-lang/ru.json';
 import ZH from './../../compiled-lang/zh.json';
 
-
 class I18nMsg {
-    static loadLocaleData(locale: string) {
+  static loadLocaleData(locale: string) {
-        switch (locale) {
+    switch (locale) {
-            case 'fr':
+      case 'fr':
-                return FR;
+        return FR;
-            case 'en':
+      case 'en':
-                return EN;
+        return EN;
-            case 'es':
+      case 'es':
-                return ES;
+        return ES;
-            case 'de':
+      case 'de':
-                return DE;
+        return DE;
-            case 'ru':
+      case 'ru':
-                return RU;
+        return RU;
-            case 'zh':
+      case 'zh':
-                return ZH;
+        return ZH;
-            default:
+      default:
-                return EN;
+        return EN;
-        }
     }
+  }
 }
 
 export default I18nMsg;

packages/editor/src/classes/menu/ColorPaletteHtml.js

@@ -96,26 +96,113 @@ export const buildHtml = () => {
   const palettes = [
     {
       id: ':3p',
-      colors: [['(0, 0, 0)', '(68, 68, 68)', '(102, 102, 102)', '(153, 153, 153)', '(204, 204, 204)', '(238, 238, 238)', '(243, 243, 243)', '(254, 255, 255)']],
+      colors: [
+        [
+          '(0, 0, 0)',
+          '(68, 68, 68)',
+          '(102, 102, 102)',
+          '(153, 153, 153)',
+          '(204, 204, 204)',
+          '(238, 238, 238)',
+          '(243, 243, 243)',
+          '(254, 255, 255)',
+        ],
+      ],
     },
     {
       id: '3q',
-      colors: [['(255, 0, 0)', '(255, 153, 0)', '(255, 255, 0)', '(0, 255, 0)', '(0, 255, 255)', '(0, 0, 255)', '(153, 0, 255)', '(255, 0, 255)']],
+      colors: [
+        [
+          '(255, 0, 0)',
+          '(255, 153, 0)',
+          '(255, 255, 0)',
+          '(0, 255, 0)',
+          '(0, 255, 255)',
+          '(0, 0, 255)',
+          '(153, 0, 255)',
+          '(255, 0, 255)',
+        ],
+      ],
     },
     {
       id: '3r',
       colors: [
-        ['(244, 204, 204)', '(252, 229, 205)', '(255, 242, 204)', '(217, 234, 211)', '(208, 224, 227)', '(207, 226, 243)', '(217, 210, 233)', '(234, 209, 220)'],
+        [
-        ['(234, 153, 153)', '(249, 203, 156)', '(255, 229, 153)', '(182, 215, 168)', '(162, 196, 201)', '(159, 197, 232)', '(180, 167, 214)', '(213, 166, 189)'],
+          '(244, 204, 204)',
-        ['(224, 102, 102)', '(246, 178, 107)', '(255, 217, 102)', '(147, 196, 125)', '(118, 165, 175)', '(111, 168, 220)', '(142, 124, 195)', '(194, 123, 160)'],
+          '(252, 229, 205)',
-        ['(204, 0, 0)', '(230, 145, 56)', '(241, 194, 50)', '(106, 168, 79)', '(69, 129, 142)', '(61, 133, 198)', '(103, 78, 167)', '(166, 77, 121)'],
+          '(255, 242, 204)',
-        ['(153, 0, 0)', '(180, 95, 6)', '(191, 144, 0)', '(56, 118, 29)', '(19, 79, 92)', '(11, 83, 148)', '(53, 28, 117)', '(116, 27, 71)'],
+          '(217, 234, 211)',
-        ['(102, 0, 0)', '(120, 63, 4)', '(127, 96, 0)', '(39, 78, 19)', '(12, 52, 61)', '(7, 55, 99)', '(32, 18, 77)', '(76, 17, 48)'],
+          '(208, 224, 227)',
+          '(207, 226, 243)',
+          '(217, 210, 233)',
+          '(234, 209, 220)',
+        ],
+        [
+          '(234, 153, 153)',
+          '(249, 203, 156)',
+          '(255, 229, 153)',
+          '(182, 215, 168)',
+          '(162, 196, 201)',
+          '(159, 197, 232)',
+          '(180, 167, 214)',
+          '(213, 166, 189)',
+        ],
+        [
+          '(224, 102, 102)',
+          '(246, 178, 107)',
+          '(255, 217, 102)',
+          '(147, 196, 125)',
+          '(118, 165, 175)',
+          '(111, 168, 220)',
+          '(142, 124, 195)',
+          '(194, 123, 160)',
+        ],
+        [
+          '(204, 0, 0)',
+          '(230, 145, 56)',
+          '(241, 194, 50)',
+          '(106, 168, 79)',
+          '(69, 129, 142)',
+          '(61, 133, 198)',
+          '(103, 78, 167)',
+          '(166, 77, 121)',
+        ],
+        [
+          '(153, 0, 0)',
+          '(180, 95, 6)',
+          '(191, 144, 0)',
+          '(56, 118, 29)',
+          '(19, 79, 92)',
+          '(11, 83, 148)',
+          '(53, 28, 117)',
+          '(116, 27, 71)',
+        ],
+        [
+          '(102, 0, 0)',
+          '(120, 63, 4)',
+          '(127, 96, 0)',
+          '(39, 78, 19)',
+          '(12, 52, 61)',
+          '(7, 55, 99)',
+          '(32, 18, 77)',
+          '(76, 17, 48)',
+        ],
       ],
     },
     {
       id: '2p',
-      colors: [['(255, 255, 255)', '(224, 229, 239)', '(80, 157, 192)', '(57, 113, 177)', '(2, 59, 185)', '(244, 184, 45)', '(241, 163, 39)', '(82, 92, 97)']],
+      colors: [
+        [
+          '(255, 255, 255)',
+          '(224, 229, 239)',
+          '(80, 157, 192)',
+          '(57, 113, 177)',
+          '(2, 59, 185)',
+          '(244, 184, 45)',
+          '(241, 163, 39)',
+          '(82, 92, 97)',
+        ],
+      ],
     },
   ];
 

packages/editor/src/classes/menu/ColorPalettePanel.js

@@ -21,11 +21,12 @@ import ToolbarPaneItem from './ToolbarPaneItem';
 import { buildHtml, css } from './ColorPaletteHtml';
 
 // rgbToHex implementation from https://stackoverflow.com/a/3627747/58128
-export const rgb2hex = (rgb) => `#${rgb
+export const rgb2hex = (rgb) =>
-  .match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
+  `#${rgb
-  .slice(1)
+    .match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
-  .map((n) => parseInt(n, 10).toString(16).padStart(2, '0'))
+    .slice(1)
-  .join('')}`;
+    .map((n) => parseInt(n, 10).toString(16).padStart(2, '0'))
+    .join('')}`;
 
 class ColorPalettePanel extends ToolbarPaneItem {
   constructor(buttonId, model, baseUrl) {
@@ -71,9 +72,7 @@ class ColorPalettePanel extends ToolbarPaneItem {
     const panelElem = this.getPanelElem();
 
     // Clear selected cell based on the color  ...
-    panelElem
+    panelElem.find("td[class='palette-cell palette-cell-selected']").attr('class', 'palette-cell');
-      .find("td[class='palette-cell palette-cell-selected']")
-      .attr('class', 'palette-cell');
 
     // Mark the cell as selected ...
     const colorCells = panelElem.find('div[class=palette-colorswatch]');

packages/editor/src/classes/menu/Events.ts

@@ -48,9 +48,9 @@ class Events {
     if (!events) return this;
 
     const args = Array.isArray(eventArgs) ? eventArgs : [eventArgs];
-    events.forEach(((fn) => {
+    events.forEach((fn) => {
       fn.apply(this, args);
-    }));
+    });
     return this;
   }
 

packages/editor/src/classes/menu/FontFamilyPanel.js

@@ -22,7 +22,20 @@ class FontFamilyPanel extends ListToolbarPanel {
   // eslint-disable-next-line class-methods-use-this
   buildPanel() {
     const content = $("<div class='toolbarPanel' id='fontFamilyPanel'></div>");
-    const list = ['Arial', 'Baskerville', 'Tahoma', 'Limunari', 'Brush Script MT', 'Verdana', 'Times', 'Cursive', 'Fantasy', 'Perpetua', 'Brush Script', 'Copperplate']
+    const list = [
+      'Arial',
+      'Baskerville',
+      'Tahoma',
+      'Limunari',
+      'Brush Script MT',
+      'Verdana',
+      'Times',
+      'Cursive',
+      'Fantasy',
+      'Perpetua',
+      'Brush Script',
+      'Copperplate',
+    ]
       .sort()
       .map((f) => `<div model="${f}" class="toolbarPanelLink" style="font-family:${f};">${f}</div>`)
       .join('\n');

packages/editor/src/classes/menu/FontSizePanel.js

@@ -22,11 +22,12 @@ class FontSizePanel extends ListToolbarPanel {
   // eslint-disable-next-line class-methods-use-this
   buildPanel() {
     const content = $("<div class='toolbarPanel' id='fontSizePanel'></div>");
-    content[0].innerHTML = ''
+    content[0].innerHTML =
-      + '<div id="small" model="6" style="font-size:8px">Small</div>'
+      '' +
-      + '<div id="normal" model="8" style="font-size:12px">Normal</div>'
+      '<div id="small" model="6" style="font-size:8px">Small</div>' +
-      + '<div id="large" model="10" style="font-size:15px">Large</div>'
+      '<div id="normal" model="8" style="font-size:12px">Normal</div>' +
-      + '<div id="huge"  model="15" style="font-size:24px">Huge</div>';
+      '<div id="large" model="10" style="font-size:15px">Large</div>' +
+      '<div id="huge"  model="15" style="font-size:24px">Huge</div>';
 
     return content;
   }

packages/editor/src/classes/menu/IconPanel.js

@@ -19,15 +19,16 @@ import $ from 'jquery';
 import ToolbarPaneItem from './ToolbarPaneItem';
 import { ImageIcon } from '@wisemapping/mindplot';
 
-
 class IconPanel extends ToolbarPaneItem {
   _updateSelectedItem() {
     return this.getPanelElem();
   }
 
   buildPanel() {
-    const content = $('<div class="toolbarPanel" id="IconsPanel"></div>')
+    const content = $('<div class="toolbarPanel" id="IconsPanel"></div>').css({
-      .css({ width: 295, height: 305 });
+      width: 295,
+      height: 305,
+    });
     content.on('click', (event) => {
       event.stopPropagation();
     });
@@ -37,7 +38,7 @@ class IconPanel extends ToolbarPaneItem {
     for (let i = 0; i < ImageIcon.prototype.ICON_FAMILIES.length; i += 1) {
       const familyIcons = ImageIcon.prototype.ICON_FAMILIES[i].icons;
       for (let j = 0; j < familyIcons.length; j += 1) {
-        if ((count % 12) === 0) {
+        if (count % 12 === 0) {
           familyContent = $('<div></div>');
           content.append(familyContent);
         }
@@ -52,10 +53,10 @@ class IconPanel extends ToolbarPaneItem {
 
         const panel = this;
         const model = this.getModel();
-        img.on('click', ((event) => {
+        img.on('click', (event) => {
           model.setValue($(event.target).attr('id'));
           panel.hide();
-        }));
+        });
 
         count += 1;
       }

packages/editor/src/classes/menu/KeyboardShortcutDialog.js

@@ -18,14 +18,13 @@
 import BootstrapDialog from '../bootstrap/BootstrapDialog';
 import { $msg } from '@wisemapping/mindplot';
 
-
 class KeyboardShortcutDialog extends BootstrapDialog {
-    constructor() {
+  constructor() {
-        super($msg('SHORTCUTS'), {
+    super($msg('SHORTCUTS'), {
-            closeButton: true,
+      closeButton: true,
-            acceptButton: false,
+      acceptButton: false,
-        });
+    });
-        this.setContent(`<div id="keyboardTable">
+    this.setContent(`<div id="keyboardTable">
     <table>
         <colgroup>
             <col width="40%"/>
@@ -42,8 +41,8 @@ class KeyboardShortcutDialog extends BootstrapDialog {
         <tbody>
         <tr>
             <td>${$msg('SAVE_CHANGES')}</td>
-            <td>Ctrl + s</td>
+            <td>${$msg('CTRL')} + S</td>
-            <td>⌘ + s</td>
+            <td>⌘ + S</td>
         </tr>
         <tr>
             <td>${$msg('CREATE_SIBLING_TOPIC')}</td>
@@ -52,12 +51,12 @@ class KeyboardShortcutDialog extends BootstrapDialog {
         </tr>
         <tr>
             <td>${$msg('CREATE_CHILD_TOPIC')}</td>
-            <td>Insert / Tab</td>
+            <td>${$msg('K_INSERT')} / Tab</td>
             <td>⌘ + Enter / Tab</td>
         </tr>
         <tr>
             <td>${$msg('DELETE_TOPIC')}</td>
-            <td>Delete</td>
+            <td>${$msg('K_DELETE')}</td>
             <td>Delete</td>
         </tr>
         <tr>
@@ -67,19 +66,19 @@ class KeyboardShortcutDialog extends BootstrapDialog {
         </tr>
         <tr>
             <td>${$msg('MULTIPLE_LINES')}</td>
-            <td>Ctrl + Enter</td>
+            <td>${$msg('CTRL')} + Enter</td>
             <td>⌘ + Enter</td>
         </tr>
         <tr>
             <td>${$msg('COPY_AND_PASTE_TOPICS')}</td>
-            <td>Ctrl + c/Ctrl + v</td>
+            <td>${$msg('CTRL')} + C / ${$msg('CTRL')} + V</td>
-            <td>⌘ + c/⌘ + v</td>
+            <td>⌘ + C / ⌘ + V</td>
         </tr>
 
         <tr>
             <td>${$msg('COLLAPSE_CHILDREN')}</td>
-            <td>Space bar</td>
+            <td>${$msg('SPACE_BAR')}</td>
-            <td>Space bar</td>
+            <td>${$msg('SPACE_BAR')}</td>
         </tr>
         <tr>
             <td>${$msg('TOPIC_NAVIGATION')}</td>
@@ -88,23 +87,23 @@ class KeyboardShortcutDialog extends BootstrapDialog {
         </tr>
         <tr>
             <td>${$msg('SELECT_MULTIPLE_NODES')}</td>
-            <td>Ctrl + Mouse Click</td>
+            <td>${$msg('CTRL')} + ${$msg('MOUSE_CLICK')}</td>
-            <td>Ctrl + Mouse Click</td>
+            <td>${$msg('CTRL')} + ${$msg('MOUSE_CLICK')}</td>
         </tr>
         <tr>
             <td>${$msg('UNDO_EDITION')}</td>
-            <td>Ctrl + z</td>
+            <td>${$msg('CTRL')} + Z</td>
-            <td>⌘ + z</td>
+            <td>⌘ + Z</td>
         </tr>
         <tr>
             <td>${$msg('REDO_EDITION')}</td>
-            <td>Ctrl + Shift + z</td>
+            <td>${$msg('CTRL')} + Shift + Z</td>
-            <td>⌘ + Shift + z</td>
+            <td>⌘ + Shift + Z</td>
         </tr>
         <tr>
             <td>${$msg('SELECT_ALL_TOPIC')}</td>
-            <td>Ctrl + a</td>
+            <td>${$msg('CTRL')} + A</td>
-            <td>⌘ + a</td>
+            <td>⌘ + A</td>
         </tr>
         <tr>
             <td>${$msg('CANCEL_TEXT_CHANGES')}</td>
@@ -113,34 +112,34 @@ class KeyboardShortcutDialog extends BootstrapDialog {
         </tr>
         <tr>
             <td>${$msg('DESELECT_ALL_TOPIC')}</td>
-            <td>Ctrl + Shift + a</td>
+            <td>${$msg('CTRL')} + Shift + A</td>
-            <td>⌘ + Shift + a</td>
+            <td>⌘ + Shift + A</td>
         </tr>
         <tr>
             <td>${$msg('CHANGE_TEXT_ITALIC')}</td>
-            <td>Ctrl + i</td>
+            <td>${$msg('CTRL')} + I</td>
-            <td>⌘ + i</td>
+            <td>⌘ + I</td>
         </tr>
         <tr>
             <td>${$msg('CHANGE_TEXT_BOLD')}</td>
-            <td>Ctrl + b</td>
+            <td>${$msg('CTRL')} + B</td>
-            <td>⌘ + b</td>
+            <td>⌘ + B</td>
         </tr>
         <tr>
             <td>${$msg('TOPIC_NOTE')}</td>
-            <td>Ctrl + k</td>
+            <td>${$msg('CTRL')} + K</td>
-            <td>⌘ + k</td>
+            <td>⌘ + K</td>
         </tr>
         <tr>
             <td>${$msg('TOPIC_LINK')}</td>
-            <td>Ctrl + l</td>
+            <td>${$msg('CTRL')} + L</td>
-            <td>⌘ + l</td>
+            <td>⌘ + L</td>
         </tr>
         </tbody>
     </table>
 </div>`);
-        this.show();
+    this.show();
-    }
+  }
 }
 
 export default KeyboardShortcutDialog;

packages/editor/src/classes/menu/KeyboardShortcutTooltip.js

@@ -17,7 +17,7 @@
  */
 import $ from 'jquery';
 import { $assert } from '@wisemapping/core-js';
-import FloatingTip from '@wisemapping/mindplot/src/components/widget/FloatingTip';
+import FloatingTip from '../bootstrap/FloatingTip';
 
 class KeyboardShortcutTooltip extends FloatingTip {
   constructor(buttonElem, text) {
@@ -36,7 +36,8 @@ class KeyboardShortcutTooltip extends FloatingTip {
       html: true,
       placement: 'bottom',
       className: 'keyboardShortcutTip',
-      template: '<div class="popover popoverBlack" role="tooltip"><div class="arrow arrowBlack"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
+      template:
+        '<div class="popover popoverBlack" role="tooltip"><div class="arrow arrowBlack"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
     });
     tipDiv.on('click', (e) => {
       tipDiv.trigger('mouseleave', e);

packages/editor/src/classes/menu/ListToolbarPanel.js

@@ -43,7 +43,9 @@ class ListToolbarPanel extends ToolbarPaneItem {
     const menuElems = panelElem.find('div');
     const value = this.getModel().getValue();
     menuElems.each((index, elem) => {
-      const elemValue = $defined($(elem).attr('model')) ? $(elem).attr('model') : $(elem).attr('id');
+      const elemValue = $defined($(elem).attr('model'))
+        ? $(elem).attr('model')
+        : $(elem).attr('id');
       $assert(elemValue, 'elemValue can not be null');
       if (elemValue === value) $(elem).attr('class', 'toolbarPanelLinkSelectedLink');
       else $(elem).attr('class', 'toolbarPanelLink');

packages/editor/src/classes/menu/Menu.ts

@@ -61,7 +61,9 @@ class Menu extends IMenu {
     this._addButton('position', false, false, () => {
       designer.zoomToFit();
     });
-    Menu._registerTooltip('position', $msg('CENTER_POSITION'));
+    // Disabled because this tooltip overflows the screen and makes the button un-clickeable
+    // This should be enabled when migrating to material-ui
+    //Menu._registerTooltip('position', $msg('CENTER_POSITION'));
 
     // Edition actions ...
     if (!readOnly) {
@@ -181,7 +183,9 @@ class Menu extends IMenu {
           designer.changeBorderColor(hex);
         },
       };
-      this._toolbarElems.push(new ColorPalettePanel('topicBorder', borderColorModel, widgetsBaseUrl));
+      this._toolbarElems.push(
+        new ColorPalettePanel('topicBorder', borderColorModel, widgetsBaseUrl),
+      );
       Menu._registerTooltip('topicBorder', $msg('TOPIC_BORDER_COLOR'));
 
       const fontColorModel = {
@@ -211,7 +215,7 @@ class Menu extends IMenu {
       if (undoButton) {
         undoButton.disable();
       }
-      Menu._registerTooltip('undoEdition', $msg('UNDO'));
+      Menu._registerTooltip('undoEdition', $msg('UNDO'), $msg('CTRL') + ' + Z');
 
       const redoButton = this._addButton('redoEdition', false, false, () => {
         designer.redo();
@@ -219,7 +223,7 @@ class Menu extends IMenu {
       if (redoButton) {
         redoButton.disable();
       }
-      Menu._registerTooltip('redoEdition', $msg('REDO'));
+      Menu._registerTooltip('redoEdition', $msg('REDO'), $msg('CTRL') + ' + Shift + Z');
 
       if (redoButton && undoButton) {
         designer.addEvent('modelUpdate', (event) => {
@@ -244,7 +248,7 @@ class Menu extends IMenu {
       this._addButton('deleteTopic', true, true, () => {
         designer.deleteSelectedEntities();
       });
-      Menu._registerTooltip('deleteTopic', $msg('TOPIC_DELETE'));
+      Menu._registerTooltip('deleteTopic', $msg('TOPIC_DELETE'), $msg('K_DELETE'));
 
       this._addButton('topicLink', true, false, () => {
         designer.addLink();
@@ -264,22 +268,20 @@ class Menu extends IMenu {
       this._addButton('fontBold', true, false, () => {
         designer.changeFontWeight();
       });
-      Menu._registerTooltip('fontBold', $msg('FONT_BOLD'), 'meta+B');
+      Menu._registerTooltip('fontBold', $msg('FONT_BOLD'), $msg('CTRL') + ' + B');
 
       this._addButton('fontItalic', true, false, () => {
         designer.changeFontStyle();
       });
-      Menu._registerTooltip('fontItalic', $msg('FONT_ITALIC'), 'meta+I');
+      Menu._registerTooltip('fontItalic', $msg('FONT_ITALIC'), $msg('CTRL') + ' + I');
-
 
       if (!readOnly) {
         // Register action on save  ...
         const saveElem = $('#save');
-        this._addButton('save', false, false,
+        this._addButton('save', false, false, () => {
-          () => {
+          this.save(saveElem, designer, true);
-            this.save(saveElem, designer, true);
+        });
-          });
+        Menu._registerTooltip('save', $msg('SAVE'), $msg('CTRL') + ' + S');
-        Menu._registerTooltip('save', $msg('SAVE'));
 
         // Register unload save ...
         window.addEventListener('beforeunload', () => {
@@ -290,13 +292,11 @@ class Menu extends IMenu {
         });
 
         // Autosave on a fixed period of time ...
-        setInterval(
+        setInterval(() => {
-          () => {
+          if (this.isSaveRequired()) {
-            if (this.isSaveRequired()) {
+            this.save(saveElem, designer, false);
-              this.save(saveElem, designer, false);
+          }
-            }
+        }, 10000);
-          }, 10000,
-        );
       }
     }
 
@@ -394,10 +394,14 @@ class Menu extends IMenu {
     // Register Events ...
     let result = null;
     if ($(`#${buttonId}`)) {
-      const button = new ToolbarItem(buttonId, ((event) => {
+      const button = new ToolbarItem(
-        fn(event);
+        buttonId,
-        this.clear();
+        (event) => {
-      }), { topicAction: isTopic, relAction: isRelationship });
+          fn(event);
+          this.clear();
+        },
+        { topicAction: isTopic, relAction: isRelationship },
+      );
 
       this._toolbarElems.push(button);
       result = button;
@@ -409,9 +413,10 @@ class Menu extends IMenu {
     if ($(`#${buttonId}`)) {
       let tooltip = text;
       if (shortcut) {
-        const platformedShortcut = navigator.appVersion.indexOf('Mac') !== -1
+        const platformedShortcut =
-          ? shortcut.replace('meta+', '⌘')
+          navigator.appVersion.indexOf('Mac') !== -1
-          : shortcut.replace('meta+', 'ctrl+');
+            ? shortcut.replace('meta+', '⌘')
+            : shortcut.replace('meta+', 'ctrl+');
         tooltip = `${tooltip} (${platformedShortcut})`;
       }
       return new KeyboardShortcutTooltip($(`#${buttonId}`), tooltip);

packages/editor/src/classes/menu/ToolbarPaneItem.js

@@ -17,7 +17,7 @@
  */
 import { $assert } from '@wisemapping/core-js';
 import ToolbarItem from './ToolbarItem';
-import FloatingTip from '@wisemapping/mindplot/src/components/widget/FloatingTip';
+import FloatingTip from '../bootstrap/FloatingTip';
 
 class ToolbarPaneItem extends ToolbarItem {
   constructor(buttonId, model, delayInit) {

packages/editor/src/compiled-lang/de.json

@@ -5,6 +5,18 @@
       "value": "Teilen"
     }
   ],
+  "editor.edit-description-mobile": [
+    {
+      "type": 0,
+      "value": "Eingeschränkte Funktionen der Mindmap-Edition werden auf Mobilgeräten unterstützt. Verwenden Sie den Desktop-Browser für vollständige Editorfunktionen."
+    }
+  ],
+  "editor.edit-mobile": [
+    {
+      "type": 0,
+      "value": "Hinweis für Mobilgeräte."
+    }
+  ],
   "editor.try-welcome": [
     {
       "type": 0,
@@ -17,6 +29,18 @@
       "value": "Melden Sie sich an, um kostenlos eine unbegrenzte Anzahl von Mindmaps zu erstellen, zu teilen und zu veröffentlichen."
     }
   ],
+  "editor.try-welcome-description-mobile": [
+    {
+      "type": 0,
+      "value": "Melden Sie sich an, um kostenlos eine unbegrenzte Anzahl von Mindmaps zu erstellen, zu teilen und zu veröffentlichen. Eingeschränkte Funktionen der Mindmap-Edition werden auf Mobilgeräten unterstützt. Verwenden Sie den Desktop-Browser für vollständige Editorfunktionen."
+    }
+  ],
+  "editor.try-welcome-mobile": [
+    {
+      "type": 0,
+      "value": "Diese Edition zeigt einige der Mindmap-Funktionen!"
+    }
+  ],
   "login.signup": [
     {
       "type": 0,

packages/editor/src/compiled-lang/en.json

@@ -5,10 +5,22 @@
       "value": "Share"
     }
   ],
+  "editor.edit-description-mobile": [
+    {
+      "type": 0,
+      "value": "Limited mindmap edition capabilities are supported in Mobile devices. Use Desktop browser for full editor capabilities."
+    }
+  ],
+  "editor.edit-mobile": [
+    {
+      "type": 0,
+      "value": "Note for mobile devices."
+    }
+  ],
   "editor.try-welcome": [
     {
       "type": 0,
-      "value": "This edition space showcases some of the mindmap editor capabilities !"
+      "value": "This edition space showcases some of the mindmap editor capabilities!"
     }
   ],
   "editor.try-welcome-description": [
@@ -17,6 +29,18 @@
       "value": "Sign Up to start creating, sharing and publishing unlimited number of mindmaps for free."
     }
   ],
+  "editor.try-welcome-description-mobile": [
+    {
+      "type": 0,
+      "value": "Sign Up to start creating, sharing and publishing unlimited number of mindmaps for free. Limited mindmap edition capabilties are supported in Mobile devices. Use Desktop browser for full editor capabilies."
+    }
+  ],
+  "editor.try-welcome-mobile": [
+    {
+      "type": 0,
+      "value": "This edition space showcases some of the mindmap capabilities!"
+    }
+  ],
   "login.signup": [
     {
       "type": 0,

packages/editor/src/compiled-lang/es.json

@@ -5,6 +5,18 @@
       "value": "Compartir"
     }
   ],
+  "editor.edit-description-mobile": [
+    {
+      "type": 0,
+      "value": "En dispositivos móbiles las funciones son limitadas. Use la versión de escritorio para tener las funciones completas."
+    }
+  ],
+  "editor.edit-mobile": [
+    {
+      "type": 0,
+      "value": "Nota para dispositivos móbiles."
+    }
+  ],
   "editor.try-welcome": [
     {
       "type": 0,
@@ -17,6 +29,18 @@
       "value": "Registrate para comenzar a crear, compartir y publicar una cantidad ilimitada de mapas mentales de forma gratuita."
     }
   ],
+  "editor.try-welcome-description-mobile": [
+    {
+      "type": 0,
+      "value": "Registrate para comenzar a crear, compartir y publicar una cantidad ilimitada de mapas mentales de forma gratuita. En dispositivos móbiles las funciones son limitadas. Use la versión de escritorio para tener las funciones completas."
+    }
+  ],
+  "editor.try-welcome-mobile": [
+    {
+      "type": 0,
+      "value": "¡Este espacio de edición muestra algunas de las capacidades de mapas mentales!"
+    }
+  ],
   "login.signup": [
     {
       "type": 0,

packages/editor/src/compiled-lang/fr.json

@@ -5,10 +5,22 @@
       "value": "Partager"
     }
   ],
+  "editor.edit-description-mobile": [
+    {
+      "type": 0,
+      "value": "Les capacités d'édition limitées de mindmap sont prises en charge dans les appareils mobiles. Utilisez le navigateur de bureau pour bénéficier de toutes les fonctionnalités de l'éditeur."
+    }
+  ],
+  "editor.edit-mobile": [
+    {
+      "type": 0,
+      "value": "Remarque pour les appareils mobiles."
+    }
+  ],
   "editor.try-welcome": [
     {
       "type": 0,
-      "value": "Cet espace d'édition présente certaines des fonctionnalités de l'éditeur de cartes mentales !"
+      "value": "Cet espace d'édition présente certaines des fonctionnalités de l'éditeur de cartes mentales!"
     }
   ],
   "editor.try-welcome-description": [
@@ -17,6 +29,18 @@
       "value": "Inscrivez-vous pour commencer à créer, partager et publier gratuitement un nombre illimité de cartes mentales."
     }
   ],
+  "editor.try-welcome-description-mobile": [
+    {
+      "type": 0,
+      "value": "Inscrivez-vous pour commencer à créer, partager et publier gratuitement un nombre illimité de cartes mentales. Les capacités d'édition limitées de mindmap sont prises en charge dans les appareils mobiles. Utilisez le navigateur de bureau pour bénéficier de toutes les fonctionnalités de l'éditeur."
+    }
+  ],
+  "editor.try-welcome-mobile": [
+    {
+      "type": 0,
+      "value": "Cet espace d'édition présente certaines des fonctionnalités des cartes mentales!"
+    }
+  ],
   "login.signup": [
     {
       "type": 0,

packages/editor/src/compiled-lang/ru.json

@@ -5,6 +5,18 @@
       "value": "Поделиться"
     }
   ],
+  "editor.edit-description-mobile": [
+    {
+      "type": 0,
+      "value": "Возможности ограниченной версии Mindmap поддерживаются на мобильных устройствах. Используйте настольный браузер для полных возможностей редактора."
+    }
+  ],
+  "editor.edit-mobile": [
+    {
+      "type": 0,
+      "value": "Примечание для мобильных устройств."
+    }
+  ],
   "editor.try-welcome": [
     {
       "type": 0,
@@ -17,6 +29,18 @@
       "value": "Чтобы получить бесплатный неограниченный доступ —  нужна только регистрация."
     }
   ],
+  "editor.try-welcome-description-mobile": [
+    {
+      "type": 0,
+      "value": "Зарегистрируйтесь, чтобы начать создавать, делиться и публиковать неограниченное количество ментальных карт бесплатно. Возможности ограниченной версии Mindmap поддерживаются на мобильных устройствах. Используйте настольный браузер для полных возможностей редактора."
+    }
+  ],
+  "editor.try-welcome-mobile": [
+    {
+      "type": 0,
+      "value": "В этом издании демонстрируются некоторые возможности ментальных карт!"
+    }
+  ],
   "login.signup": [
     {
       "type": 0,

packages/editor/src/compiled-lang/zh.json

@@ -5,6 +5,18 @@
       "value": "分享"
     }
   ],
+  "editor.edit-description-mobile": [
+    {
+      "type": 0,
+      "value": "移动设备支持有限的思维导图编辑功能。 使用桌面浏览器获得完整的编辑器功能。"
+    }
+  ],
+  "editor.edit-mobile": [
+    {
+      "type": 0,
+      "value": "移动设备注意事项."
+    }
+  ],
   "editor.try-welcome": [
     {
       "type": 0,
@@ -17,6 +29,18 @@
       "value": "注册后可以免费创建、分享和发布无限数量的思维导图。"
     }
   ],
+  "editor.try-welcome-description-mobile": [
+    {
+      "type": 0,
+      "value": "注册以开始免费创建、共享和发布无限数量的思维导图。 移动设备支持有限的思维导图编辑功能。 使用桌面浏览器获得完整的编辑器功能。"
+    }
+  ],
+  "editor.try-welcome-mobile": [
+    {
+      "type": 0,
+      "value": "这个版本空间展示了一些思维导图功能！"
+    }
+  ],
   "login.signup": [
     {
       "type": 0,

packages/editor/src/components/action-button/index.ts

@@ -1,25 +1,27 @@
 import styled from 'styled-components';
 
 const ActionButton = styled.div`
-    cursor: pointer;
+  cursor: pointer;
-    margin: 0px 10px;
+  margin: 0px 10px;
-    font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, sans-serif;
-    user-select: none;
+  user-select: none;
-    vertical-align: middle;
+  vertical-align: middle;
-    justify-content: center;
+  justify-content: center;
-    padding: 10px 25px;
+  padding: 10px 25px;
-    font-size: 15px;
+  font-size: 15px;
-    min-width: 64px;
+  min-width: 64px;
-    box-sizing: border-box;
+  box-sizing: border-box;
-    font-weight: 600;
+  font-weight: 600;
-    border-radius: 9px;
+  border-radius: 9px;
-    color: white;    
+  color: white;
-    background-color: #ffa800;
+  background-color: #ffa800;
-    display: inline-block;
+  display: inline-block;
 
-    &:hover {
+  &:hover {
-        transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-    }
+      box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  }
 `;
 
 export default ActionButton;

packages/editor/src/components/footer/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { StyledLogo, Notifier } from './styled';
 import { useIntl } from 'react-intl';
 
@@ -6,51 +6,99 @@ import KeyboardSvg from '../../../images/keyboard.svg';
 import AddSvg from '../../../images/add.svg';
 import MinusSvg from '../../../images/minus.svg';
 import CenterFocusSvg from '../../../images/center_focus.svg';
+import CloseDialogSvg from '../../../images/close-dialog-icon.svg';
+
 import ActionButton from '../action-button';
 import { EditorRenderMode } from '@wisemapping/mindplot';
 
 export type FooterPropsType = {
-    editorMode: EditorRenderMode;
+  editorMode: EditorRenderMode;
+  isMobile: boolean;
 };
 
-const Footer = ({ editorMode }: FooterPropsType): React.ReactElement => {
+const Footer = ({ editorMode, isMobile }: FooterPropsType): React.ReactElement => {
-    const intl = useIntl();
+  const intl = useIntl();
+  const [dialogClass, setDialogClass] = useState('tryInfoPanel');
 
-    return (
+  var titleKey = undefined;
-        <>
+  var descriptionKey = undefined;
-            <div id="floating-panel">
+  var showSignupButton = undefined;
-                <div id="keyboardShortcuts" className="buttonExtOn">
+
-                    <img src={KeyboardSvg} />
+  if (editorMode !== 'viewonly' && editorMode !== 'showcase' && isMobile) {
-                </div>
+    titleKey = 'editor.edit-mobile';
-                <div id="zoom-button">
+    descriptionKey = 'editor.edit-description-mobile';
-                    <button id="zoom-plus">
+    showSignupButton = false;
-                        <img src={AddSvg} />
+  }
-                    </button>
+  if (editorMode === 'showcase' && isMobile) {
-                    <button id="zoom-minus">
+    titleKey = 'editor.try-welcome-mobile';
-                        <img src={MinusSvg} />
+    descriptionKey = 'editor.edit-description-mobile';
-                    </button>
+    showSignupButton = true;
-                </div>
+  }
-                <div id="position">
+  if (editorMode === 'showcase' && !isMobile) {
-                    <button id="position-button">
+    titleKey = 'editor.try-welcome';
-                        <img src={CenterFocusSvg} />
+    descriptionKey = 'editor.try-welcome-description';
-                    </button>
+    showSignupButton = true;
-                </div>
+  }
+
+  // if the toolbar is present, the alert must not overlap
+  var alertTopAdjustmentStyle =
+    editorMode !== 'viewonly' && !isMobile
+      ? 'tryInfoPanelWithToolbar'
+      : 'tryInfoPanelWithoutToolbar';
+
+  return (
+    <>
+      <div id="floating-panel">
+        {!isMobile && (
+          <div id="keyboardShortcuts" className="buttonExtOn">
+            <img src={KeyboardSvg} />
+          </div>
+        )}
+        <div id="zoom-button">
+          <button id="zoom-plus">
+            <img src={AddSvg} />
+          </button>
+          <button id="zoom-minus">
+            <img src={MinusSvg} />
+          </button>
+        </div>
+        <div id="position">
+          <button id="position-button">
+            <img src={CenterFocusSvg} />
+          </button>
+        </div>
+      </div>
+      <StyledLogo id="bottom-logo"></StyledLogo>
+      <Notifier id="headerNotifier"></Notifier>
+      {titleKey && (
+        <div className={dialogClass + ' ' + alertTopAdjustmentStyle}>
+          <div className="tryInfoPanelInner">
+            <div className="closeButton">
+              <button
+                onClick={(e) => {
+                  setDialogClass('tryInfoPanelClosed');
+                  e.preventDefault();
+                  e.stopPropagation();
+                }}
+              >
+                <img src={CloseDialogSvg} />
+              </button>
             </div>
-            <StyledLogo id="bottom-logo"></StyledLogo>
+            <p>
-            <Notifier id="headerNotifier"></Notifier>
+              {intl.formatMessage({ id: titleKey })} {intl.formatMessage({ id: descriptionKey })}
-            {editorMode === 'showcase' && (
+            </p>
-                <div id="tryInfoPanel">
+            {showSignupButton && (
-                    <p>{intl.formatMessage({ id: 'editor.try-welcome' })}</p>
+              <a href="/c/registration">
-                    <p>{intl.formatMessage({ id: 'editor.try-welcome-description' })}</p>
+                <ActionButton>
-                    <a href="/c/registration">
+                  {intl.formatMessage({ id: 'login.signup', defaultMessage: 'Sign Up' })}
-                        <ActionButton>
+                </ActionButton>
-                            {intl.formatMessage({ id: 'login.signup', defaultMessage: 'Sign Up' })}
+              </a>
-                        </ActionButton>
-                    </a>
-                </div>
             )}
-        </>
+          </div>
-    );
+        </div>
+      )}
+    </>
+  );
 };
 
 export default Footer;

packages/editor/src/components/footer/styled.ts

@@ -3,29 +3,29 @@ import { times } from '../../size';
 import LogoTextBlackSvg from '../../../images/logo-text-black.svg';
 
 export const StyledFooter = styled.div`
-    height: ${times(10)};
+  height: ${times(10)};
-    width: 100%;
+  width: 100%;
-    border: 1px solid black;
+  border: 1px solid black;
 `;
 
 export const StyledLogo = styled.div`
-    position: fixed;
+  position: fixed;
-    left: 20px;
+  left: 20px;
-    bottom: 10px;
+  bottom: 10px;
-    background: url(${LogoTextBlackSvg}) no-repeat;
+  background: url(${LogoTextBlackSvg}) no-repeat;
-    width: 90px;
+  width: 90px;
-    height: 40px;
+  height: 40px;
 `;
 
 export const Notifier = styled.div`
-    border: 1px solid rgb(241, 163, 39);
+  border: 1px solid rgb(241, 163, 39);
-    background-color: rgb(252, 235, 192);
+  background-color: rgb(252, 235, 192);
-    border-radius: 3px;
+  border-radius: 3px;
-    position: fixed;
+  position: fixed;
-    padding: 5px 9px;
+  padding: 5px 9px;
-    color: back;
+  color: back;
-    white-space: nowrap;
+  white-space: nowrap;
-    margin-top: 5px;
+  margin-top: 5px;
-    display: none;
+  display: none;
-    bottom: 10px;
+  bottom: 10px;
 `;

packages/editor/src/components/toolbar/global-styled.css

@@ -1,103 +1,104 @@
 div#header {
-    width: 100%;
+  width: 100%;
-    height:50px;
+  height: 50px;
-    position: absolute;
+  position: absolute;
-    top: 0;
+  top: 0;
-    z-index:1000;
+  z-index: 1000;
 }
 
 div#headerNotifier {
-    border: 1px solid rgb(241, 163, 39);
+  border: 1px solid rgb(241, 163, 39);
-    background-color: rgb(252, 235, 192);
+  background-color: rgb(252, 235, 192);
-    border-radius: 3px;
+  border-radius: 3px;
-    position: fixed;
+  position: fixed;
-    padding: 5px 9px;
+  padding: 5px 9px;
-    color: back;
+  color: back;
-    white-space: nowrap;
+  white-space: nowrap;
-    margin-top: 5px;
+  margin-top: 5px;
-    display: none;
+  display: none;
-    bottom: 10px;
+  bottom: 10px;
 }
 
 div#toolbarRight {
-    float: right;
+  float: right;
-    white-space: nowrap;
+  white-space: nowrap;
-    vertical-align: middle;
+  vertical-align: middle;
-    justify-content: center;
+  justify-content: center;
-    margin: 6px 10px;
+  margin: 6px 10px;
-    height: 100%;
+  height: 100%;
 }
 
 #account {
-    float: right;
+  float: right;
-    display: inline;
+  display: inline;
 }
 
-#account >img {
+#account > img {
-    width: 36x;
+  width: 36x;
-    height: 36px;
+  height: 36px;
 }
 
-#accountSettingsPanel{
+#accountSettingsPanel {
-    padding:10px 10px;
+  padding: 10px 10px;
 }
 
 #share {
-    margin: 0 30px;
+  margin: 0 30px;
-    float: right;
+  float: right;
 }
 
 .actionButton {
-    cursor: pointer;
+  cursor: pointer;
-    font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, sans-serif;
-    user-select: none;
+  user-select: none;
-    vertical-align: middle;
+  vertical-align: middle;
-    justify-content: center;
+  justify-content: center;
-    padding: 10px 25px;
+  padding: 10px 25px;
-    font-size: 15px;
+  font-size: 15px;
-    min-width: 64px;
+  min-width: 64px;
-    box-sizing: border-box;
+  box-sizing: border-box;
-    font-weight: 600;
+  font-weight: 600;
-    border-radius: 9px;
+  border-radius: 9px;
-    color: white;    
+  color: white;
-    background-color: #ffa800;
+  background-color: #ffa800;
 }
 
 .actionButton:hover {
-    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
 div#toolbar {
-    width: 100%;
+  width: 100%;
-    height: 50px;
+  height: 50px;
-    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
-    background-color: #fff;
+  background-color: #fff;
-    min-width: 900px;
+  min-width: 900px;
-    overflow: hidden;
+  overflow: hidden;
 }
 
 div#toolbar .buttonContainer {
-    height: 50px;
+  height: 50px;
-    padding-top: 8px;
+  padding-top: 8px;
-    padding-right: 10px;
+  padding-right: 10px;
-    padding-left: 10px;
+  padding-left: 10px;
-    float: left;
+  float: left;
-    border-left: 1px solid lightgray;
+  border-left: 1px solid lightgray;
 }
 
-div#mapName >span {
+div#mapName > span {
-    border-radius: 4px;
+  border-radius: 4px;
-    float: left;
+  float: left;
-    padding: 8px;
+  padding: 8px;
-    min-width: 30px;
+  min-width: 30px;
-    font-weight: bold;
+  font-weight: bold;
 }
 
 div#backToList {
-    height: 24px;
+  height: 24px;
-    width: 24px;
+  width: 24px;
-    float: left;
+  float: left;
-    margin: 13px 20px;
+  margin: 13px 20px;
 }
 
 /******************************************************************************************/
@@ -108,120 +109,120 @@ div#toolbar .buttonOn,
 div#toolbar .buttonOff,
 div#toolbar .buttonActive,
 div#toolbar .buttonOn:hover {
-    width: 28px;
+  width: 28px;
-    height: 28px;
+  height: 28px;
-    float: left;
+  float: left;
-    text-align: center;
+  text-align: center;
-    z-index: 4;
+  z-index: 4;
-    margin-top: 3px;
+  margin-top: 3px;
-    padding-top: 2px;
+  padding-top: 2px;
-    padding-left: 2px;
+  padding-left: 2px;
-    margin-left: 3px;
+  margin-left: 3px;
 }
 
 div#toolbar .buttonOn:hover {
-    cursor: pointer;
+  cursor: pointer;
-    opacity: 1;
+  opacity: 1;
 }
 
 div#toolbar .buttonOn {
-    opacity: 0.8;
+  opacity: 0.8;
 }
 
 div#toolbar .buttonOff {
-    opacity: 0.4;
+  opacity: 0.4;
 }
 
 div#exportAnchor {
-    position: absolute;
+  position: absolute;
-    width: 100%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
-    top: 0;
+  top: 0;
-    left: 0;
+  left: 0;
 }
 
 div#toolbar .buttonExtOn,
 div#toolbar .buttonExtOff,
 div#toolbar .buttonExtActive,
 div#toolbar .buttonExtOn:hover {
-    width: 40px;
+  width: 40px;
-    height: 28px;
+  height: 28px;
-    float: left;
+  float: left;
-    text-align: left;
+  text-align: left;
-    z-index: 4;
+  z-index: 4;
-    margin-top: 3px;
+  margin-top: 3px;
-    padding-top: 2px;
+  padding-top: 2px;
-    padding-left: 5px;
+  padding-left: 5px;
-    margin-left: 3px;
+  margin-left: 3px;
 }
 
 div#toolbar .buttonExtOn:hover {
-    opacity: 1;
+  opacity: 1;
 }
 
 div#toolbar .buttonExtActive {
-    opacity: 1;
+  opacity: 1;
 }
 
 div#toolbar .buttonExtOn {
-    opacity: 0.8;
+  opacity: 0.8;
-    cursor: pointer
+  cursor: pointer;
 }
 
 div#toolbar .buttonExtOff {
-    opacity: 0.4;
+  opacity: 0.4;
 }
 
 div#exportAnchor {
-    position: absolute;
+  position: absolute;
-    width: 100%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
-    top: 0;
+  top: 0;
-    left: 0;
+  left: 0;
 }
 
 /***************************************************************************************************/
 /* Other toolbar styles */
 /***************************************************************************************************/
 .toolbarTip {
-    background-color: #000000;
+  background-color: #000000;
-    padding: 5px 5px;
+  padding: 5px 5px;
-    color: #f5f5f5;
+  color: #f5f5f5;
-    font-size: 11px;
+  font-size: 11px;
 }
 
 div#colorPalette {
-    border: 1px solid #bbb4d6;
+  border: 1px solid #bbb4d6;
-    display: none;
+  display: none;
-    position: absolute;
+  position: absolute;
-    z-index: 4;
+  z-index: 4;
-    width: 160px;
+  width: 160px;
-    top: 89px;
+  top: 89px;
 }
 
 div.toolbarPanelLink,
 div.toolbarPanelLinkSelectedLink {
-    cursor: pointer;
+  cursor: pointer;
-    color: black;
+  color: black;
-    margin: 1px;
+  margin: 1px;
-    cursor: pointer;
+  cursor: pointer;
-    font-size: 12px;
+  font-size: 12px;
-    padding: 5px 10px;
+  padding: 5px 10px;
-    font-weight: bold;
+  font-weight: bold;
 }
 
 div.toolbarPanelLink:hover,
 div.toolbarPanelLinkSelectedLink {
-    cursor: pointer;
+  cursor: pointer;
-    background-color: #efefef;
+  background-color: #efefef;
 }
 
 .toolbarPaneTip {
-    background-color: rgb(228, 226, 210);
+  background-color: rgb(228, 226, 210);
-    padding: 5px 5px;
+  padding: 5px 5px;
-    color: #f5f5f5;
+  color: #f5f5f5;
-    font-size: 11px;
+  font-size: 11px;
-    border-radius: 6px;
+  border-radius: 6px;
-    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
+  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
-    border: 3px double rgb(190, 190, 190);
+  border: 3px double rgb(190, 190, 190);
 }

packages/editor/src/components/toolbar/index.tsx

@@ -34,144 +34,131 @@ import { EditorRenderMode } from '@wisemapping/mindplot';
 export type ToolbarActionType = 'export' | 'publish' | 'history' | 'print' | 'share' | 'info';
 
 export type ToolbarPropsType = {
-    editorMode: EditorRenderMode;
+  editorMode: EditorRenderMode;
-    onAction: (action: ToolbarActionType) => void;
+  onAction: (action: ToolbarActionType) => void;
 };
 
 export default function Toolbar({
-    editorMode: editorMode,
+  editorMode: editorMode,
-    onAction,
+  onAction,
 }: ToolbarPropsType): React.ReactElement {
-    const intl = useIntl();
+  const intl = useIntl();
-    return (
+  return (
-        <HeaderContainer className="wise-editor">
+    <HeaderContainer className="wise-editor">
-            <div id="toolbar">
+      <div id="toolbar">
-                <div id="backToList">
+        <div id="backToList">
-                    <img src={BackIconSvg} />
+          <img src={BackIconSvg} />
-                </div>
+        </div>
-                {(editorMode === 'edition-editor' || editorMode === 'edition-owner') && (
+        {(editorMode === 'edition-editor' || editorMode === 'edition-owner') && (
-                    <div id="persist" className="buttonContainer">
+          <div id="persist" className="buttonContainer">
-                        <ToolbarButton id="save" className="buttonOn">
+            <ToolbarButton id="save" className="buttonOn">
-                            <img src={SaveSvg} />
+              <img src={SaveSvg} />
-                        </ToolbarButton>
+            </ToolbarButton>
-                    </div>
+          </div>
-                )}
+        )}
-                {(editorMode === 'edition-editor' || editorMode === 'edition-owner' || editorMode === 'showcase') && (
+        {(editorMode === 'edition-editor' ||
-                    <>
+          editorMode === 'edition-owner' ||
-                        <div id="edit" className="buttonContainer">
+          editorMode === 'showcase') && (
-                            <ToolbarButton id="undoEdition" className="buttonOn">
+          <>
-                                <img src={UndoSvg} />
+            <div id="edit" className="buttonContainer">
-                            </ToolbarButton>
+              <ToolbarButton id="undoEdition" className="buttonOn">
-                            <ToolbarButton id="redoEdition" className="buttonOn">
+                <img src={UndoSvg} />
-                                <img src={RedoSvg} />
+              </ToolbarButton>
-                            </ToolbarButton>
+              <ToolbarButton id="redoEdition" className="buttonOn">
-                        </div>
+                <img src={RedoSvg} />
-                        <div id="nodeStyle" className="buttonContainer">
+              </ToolbarButton>
-                            <ToolbarButton id="addTopic" className="buttonOn">
-                                <img src={TopicAddSvg} />
-                            </ToolbarButton>
-                            <ToolbarButton id="deleteTopic" className="buttonOn">
-                                <img src={TopicDeleteSvg} />
-                            </ToolbarButton>
-                            <ToolbarButtonExt id="topicBorder" className="buttonExtOn">
-                                <img src={TopicBorderSvg} />
-                            </ToolbarButtonExt>
-                            <ToolbarButtonExt id="topicColor" className="buttonExtOn">
-                                <img src={TopicColorSvg} />
-                            </ToolbarButtonExt>
-                            <ToolbarButtonExt id="topicShape" className="buttonExtOn">
-                                <img src={TopicShapeSvg} />
-                            </ToolbarButtonExt>
-                        </div>
-                        <div id="font" className="buttonContainer">
-                            <ToolbarButton id="fontFamily" className="buttonOn">
-                                <img src={FontTypeSvg} />
-                            </ToolbarButton>
-                            <ToolbarButtonExt id="fontSize" className="buttonExtOn">
-                                <img src={FontSizeSvg} />
-                            </ToolbarButtonExt>
-                            <ToolbarButton id="fontBold" className="buttonOn">
-                                <img src={FontBoldSvg} />
-                            </ToolbarButton>
-                            <ToolbarButton id="fontItalic" className="buttonOn">
-                                <img src={FontItalicSvg} />
-                            </ToolbarButton>
-                            <ToolbarButtonExt id="fontColor" className="buttonExtOn">
-                                <img src={FontColorSvg} />
-                            </ToolbarButtonExt>
-                        </div>
-                        <div id="nodeContent" className="buttonContainer">
-                            <ToolbarButtonExt id="topicIcon" className="buttonExtOn">
-                                <img src={TopicIconSvg} />
-                            </ToolbarButtonExt>
-                            <ToolbarButton id="topicNote" className="buttonOn">
-                                <img src={TopicNoteSvg} />
-                            </ToolbarButton>
-                            <ToolbarButton id="topicLink" className="buttonOn">
-                                <img src={TopicLinkSvg} />
-                            </ToolbarButton>
-                            <ToolbarButton id="topicRelation" className="buttonOn">
-                                <img src={TopicRelationSvg} />
-                            </ToolbarButton>
-                        </div>
-                        <div id="separator" className="buttonContainer"></div>
-                    </>
-                )}
-                <ToolbarRightContainer>
-                    <ToolbarButton
-                        id="export"
-                        className="buttonOn"
-                        onClick={() => onAction('export')}
-                    >
-                        <img src={ExportSvg} />
-                    </ToolbarButton>
-                    {(editorMode === 'edition-owner' || editorMode === 'edition-editor' || editorMode === 'edition-viewer') && (
-                        <ToolbarButton
-                            id="print"
-                            className="buttonOn"
-                            onClick={() => onAction('print')}
-                        >
-                            <img src={PrintSvg} />
-                        </ToolbarButton>
-                    )}
-                    <ToolbarButton
-                        id="info"
-                        className="buttonOn"
-                        onClick={() => onAction('info')}
-                    >
-                        <img src={InfoSvg} />
-                    </ToolbarButton>
-                    {editorMode === 'edition-owner' && (
-                        <>
-                            <ToolbarButton
-                                id="history"
-                                className="buttonOn"
-                                onClick={() => onAction('history')}
-                            >
-                                <img src={HistorySvg} />
-                            </ToolbarButton>
-                            <ToolbarButton
-                                id="publishIt"
-                                className="buttonOn"
-                                onClick={() => onAction('publish')}
-                            >
-                                <img src={PublicSvg} />
-                            </ToolbarButton>
-                        </>
-                    )}
-                    {(editorMode === 'edition-owner' || editorMode === 'edition-editor') && (
-                        <ToolbarButton id="account">
-                            <img src={AccountSvg} />
-                        </ToolbarButton>
-                    )}
-                    {editorMode === 'edition-owner' && (
-                        <ActionButton onClick={() => onAction('share')}>
-                            {intl.formatMessage({ id: 'action.share', defaultMessage: 'Share' })}
-                        </ActionButton>
-
-                    )}
-                </ToolbarRightContainer>
             </div>
-        </HeaderContainer>
+            <div id="nodeStyle" className="buttonContainer">
-    );
+              <ToolbarButton id="addTopic" className="buttonOn">
+                <img src={TopicAddSvg} />
+              </ToolbarButton>
+              <ToolbarButton id="deleteTopic" className="buttonOn">
+                <img src={TopicDeleteSvg} />
+              </ToolbarButton>
+              <ToolbarButtonExt id="topicBorder" className="buttonExtOn">
+                <img src={TopicBorderSvg} />
+              </ToolbarButtonExt>
+              <ToolbarButtonExt id="topicColor" className="buttonExtOn">
+                <img src={TopicColorSvg} />
+              </ToolbarButtonExt>
+              <ToolbarButtonExt id="topicShape" className="buttonExtOn">
+                <img src={TopicShapeSvg} />
+              </ToolbarButtonExt>
+            </div>
+            <div id="font" className="buttonContainer">
+              <ToolbarButton id="fontFamily" className="buttonOn">
+                <img src={FontTypeSvg} />
+              </ToolbarButton>
+              <ToolbarButtonExt id="fontSize" className="buttonExtOn">
+                <img src={FontSizeSvg} />
+              </ToolbarButtonExt>
+              <ToolbarButton id="fontBold" className="buttonOn">
+                <img src={FontBoldSvg} />
+              </ToolbarButton>
+              <ToolbarButton id="fontItalic" className="buttonOn">
+                <img src={FontItalicSvg} />
+              </ToolbarButton>
+              <ToolbarButtonExt id="fontColor" className="buttonExtOn">
+                <img src={FontColorSvg} />
+              </ToolbarButtonExt>
+            </div>
+            <div id="nodeContent" className="buttonContainer">
+              <ToolbarButtonExt id="topicIcon" className="buttonExtOn">
+                <img src={TopicIconSvg} />
+              </ToolbarButtonExt>
+              <ToolbarButton id="topicNote" className="buttonOn">
+                <img src={TopicNoteSvg} />
+              </ToolbarButton>
+              <ToolbarButton id="topicLink" className="buttonOn">
+                <img src={TopicLinkSvg} />
+              </ToolbarButton>
+              <ToolbarButton id="topicRelation" className="buttonOn">
+                <img src={TopicRelationSvg} />
+              </ToolbarButton>
+            </div>
+            <div id="separator" className="buttonContainer"></div>
+          </>
+        )}
+        <ToolbarRightContainer>
+          <ToolbarButton id="export" className="buttonOn" onClick={() => onAction('export')}>
+            <img src={ExportSvg} />
+          </ToolbarButton>
+          {(editorMode === 'edition-owner' ||
+            editorMode === 'edition-editor' ||
+            editorMode === 'edition-viewer') && (
+            <ToolbarButton id="print" className="buttonOn" onClick={() => onAction('print')}>
+              <img src={PrintSvg} />
+            </ToolbarButton>
+          )}
+          <ToolbarButton id="info" className="buttonOn" onClick={() => onAction('info')}>
+            <img src={InfoSvg} />
+          </ToolbarButton>
+          {editorMode === 'edition-owner' && (
+            <>
+              <ToolbarButton id="history" className="buttonOn" onClick={() => onAction('history')}>
+                <img src={HistorySvg} />
+              </ToolbarButton>
+              <ToolbarButton
+                id="publishIt"
+                className="buttonOn"
+                onClick={() => onAction('publish')}
+              >
+                <img src={PublicSvg} />
+              </ToolbarButton>
+            </>
+          )}
+          {(editorMode === 'edition-owner' || editorMode === 'edition-editor') && (
+            <ToolbarButton id="account">
+              <img src={AccountSvg} />
+            </ToolbarButton>
+          )}
+          {editorMode === 'edition-owner' && (
+            <ActionButton onClick={() => onAction('share')}>
+              {intl.formatMessage({ id: 'action.share', defaultMessage: 'Share' })}
+            </ActionButton>
+          )}
+        </ToolbarRightContainer>
+      </div>
+    </HeaderContainer>
+  );
 }

packages/editor/src/components/toolbar/styled.ts

@@ -1,50 +1,50 @@
 import styled from 'styled-components';
 
 export const HeaderContainer = styled.div`
-    width: 100%;
+  width: 100%;
-    height: 0px;
+  height: 0px;
-    background: #202020;
+  background: #202020;
-    z-index: 1000;
+  z-index: 1000;
-    position: absolute;
+  position: absolute;
-    top: 0;
+  top: 0;
-    display: flex;
+  display: flex;
 `;
 
 export const ToolbarContainer = styled.div`
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    flex: 1;
+  flex: 1;
 `;
 
 export const ToolbarButton = styled.div`
-    width: 28px;
+  width: 28px;
-    height: 28px;
+  height: 28px;
-    text-align: center;
+  text-align: center;
-    z-index: 4;
+  z-index: 4;
-    margin-top: 3px;
+  margin-top: 3px;
-    padding-top: 2px;
+  padding-top: 2px;
-    padding-left: 2px;
+  padding-left: 2px;
-    margin-left: 3px;
+  margin-left: 3px;
-    display: inline-block;
+  display: inline-block;
-    `;
+`;
 
 export const ToolbarButtonExt = styled(ToolbarButton)`
-    width: 40px;
+  width: 40px;
-    text-align: left;
+  text-align: left;
-    padding-left: 5px;
+  padding-left: 5px;
 `;
 
 export const AccountButton = styled.div`
-    display: inline-block;
+  display: inline-block;
-    margin-top: 3px;
+  margin-top: 3px;
 `;
 
 export const ToolbarRightContainer = styled.div`
-    flex-shrink: 1;
+  flex-shrink: 1;
-    display: flex;
+  display: flex;
-    flex-direction: row;
+  flex-direction: row;
-    align-items: center;
+  align-items: center;
-    justify-content: flex-end;
+  justify-content: flex-end;
-    height: 100%;
+  height: 100%;
-    overflow: hidden;
+  overflow: hidden;
 `;

packages/editor/src/global-styled.css

@@ -1,221 +1,280 @@
 /********************************************************************************/
 /* Header & Toolbar Styles */
 /********************************************************************************/
-@import "bootstrap-prefix.min.css";
+@import 'bootstrap-prefix.min.css';
-@import "bootstrap-fixes.css";
+@import 'bootstrap-fixes.css';
 
 html {
-    /* avoid bootstrap overriding font-size and breaking Mui */
+  /* avoid bootstrap overriding font-size and breaking Mui */
-    font-size: initial;
+  font-size: initial;
 }
 
-div#mindplot {
+body {
-    position: relative;
+  width: 100vw;
-    top: 50px;
+  height: 100vh;
-    left: 0;
+  min-width: 100vw;
-    width: 100%;
+  min-height: 100vh;
-    height: 100%;
+  margin: 0px;
-    border: 0;
+}
-    overflow: hidden;
+
-    opacity: 1;
+.mindplot-root {
-    background-color: #f2f2f2;
+  width: 100%;
-    background-image:  linear-gradient(#ebe9e7 1px, transparent 1px), linear-gradient(to right, #ebe9e7 1px, #f2f2f2 1px);
+  height: 100%;
-    background-size: 50px 50px;
 }
 
 .notesTip {
-    background-color: #dfcf3c;
+  background-color: #dfcf3c;
-    padding: 5px 15px;
+  padding: 5px 15px;
-    color: #666666;
+  color: #666666;
-    /*font-weight: bold;*/
+  /*font-weight: bold;*/
-    /*width: 100px;*/
+  /*width: 100px;*/
-    font-size: 13px;
+  font-size: 13px;
-    -moz-border-radius: 3px;
+  -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
+  -webkit-border-radius: 3px;
-    border-radius: 3px;
+  border-radius: 3px;
-    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
+  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
 }
 
 .linkTip {
-    background-color: #dfcf3c;
+  background-color: #dfcf3c;
-    padding: 5px 15px;
+  padding: 5px 15px;
-    color: #666666;
+  color: #666666;
-    /*font-weight: bold;*/
+  /*font-weight: bold;*/
-    /*width: 100px;*/
+  /*width: 100px;*/
-    font-size: 13px;
+  font-size: 13px;
-    -moz-border-radius: 3px;
+  -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
+  -webkit-border-radius: 3px;
-    border-radius: 3px;
+  border-radius: 3px;
-    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
+  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
 }
 
 .keyboardShortcutTip {
-    background-color: black;
+  background-color: black;
-    padding: 5px 15px;
+  padding: 5px 15px;
-    color: white;
+  color: white;
-    font-weight: bold;
+  font-weight: bold;
-    font-size: 11px;
+  font-size: 11px;
 }
 
 /** */
 /* Modal dialogs definitions */
 
 div.modalDialog {
-    position: fixed;
+  position: fixed;
-    top: 50%;
+  top: 50%;
-    left: 50%;
+  left: 50%;
-    z-index: 11000;
+  z-index: 11000;
-    width: 500px;
+  width: 500px;
-    margin: -250px 0 0 -250px;
+  margin: -250px 0 0 -250px;
-    background-color: #ffffff;
+  background-color: #ffffff;
-    border: 1px solid #999;
+  border: 1px solid #999;
-    padding: 10px;
+  padding: 10px;
-    overflow: auto;
+  overflow: auto;
-    -webkit-background-clip: padding-box;
+  -webkit-background-clip: padding-box;
-    -moz-background-clip: padding-box;
+  -moz-background-clip: padding-box;
-    background-clip: padding-box;
+  background-clip: padding-box;
 }
 
 div.modalDialog .content {
-    padding: 5px 5px;
+  padding: 5px 5px;
 }
 
 div.modalDialog .title {
-    font-weight: bold;
+  font-weight: bold;
-    text-shadow: 1px 1px 0 #fff;
+  text-shadow: 1px 1px 0 #fff;
-    border-bottom: 1px solid #eee;
+  border-bottom: 1px solid #eee;
-    padding: 5px 15px;
+  padding: 5px 15px;
-    font-size: 18px;
+  font-size: 18px;
 }
 
 /*---   End Modal Dialog Form  ---*/
 
 .publishModalDialog .content {
-    height: 420px;
+  height: 420px;
 }
 
 .exportModalDialog .content {
-    height: 400px;
+  height: 400px;
 }
 
 .shareModalDialog .content {
-    height: 440px;
+  height: 440px;
 }
 
 div.shareModalDialog {
-    width: 550px;
+  width: 550px;
 }
 
 .panelIcon {
-    width: 20px;
+  width: 20px;
-    height: 20px;
+  height: 20px;
-    margin-left: 4px;
+  margin-left: 4px;
-    margin-top: 3px;
+  margin-top: 3px;
-    cursor: pointer
+  cursor: pointer;
 }
 
 .panelIcon:hover {
-    background-color: #efefef;
+  background-color: #efefef;
 }
 
 .wise-editor .popover {
-    font-size: 13px;
+  font-size: 13px;
-    max-width: none;
+  max-width: none;
 }
 
 #floating-panel {
-    position: fixed;
+  position: fixed;
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    align-items: flex-end;
+  align-items: flex-end;
-    bottom: 20px;
+  bottom: 20px;
-    right: 20px;
+  right: 20px;
-    align-items: stretch;
+  align-items: stretch;
 }
 
 div#position {
-    margin-top: 5px;
+  margin-top: 5px;
 }
 
 #position-button {
-    cursor: pointer;
+  cursor: pointer;
-    border: solid black 1px;
+  border: solid black 1px;
-    width: 40px;
+  width: 40px;
-    height: 40px;
+  height: 40px;
-    background-position: center;
+  background-position: center;
-    background-repeat: no-repeat;
+  background-repeat: no-repeat;
-    background-size: 40px 40px;
+  background-size: 40px 40px;
-    background-color: #FFF;
+  background-color: #fff;
-    border-radius: 8px;
+  border-radius: 8px;
+  padding: 0;
+}
+
+#position-button>img {
+  vertical-align: middle;
 }
 
 #zoom-button {
-    width: 40px;
+  width: 40px;
-    border: 0;
+  border: 0;
 }
 
 #zoom-plus,
 #zoom-minus {
-    border: solid black 1px;
+  border: solid black 1px;
-    height: 40px;
+  height: 40px;
-    width: 40px;
+  width: 40px;
-    background-repeat: no-repeat;
+  background-repeat: no-repeat;
-    background-size: 40px 40px;
+  background-size: 40px 40px;
-    background-position: center;
+  background-position: center;
-    cursor: pointer;
+  cursor: pointer;
-    background-color: #FFF;
+  background-color: #fff;
+  padding: 0;
 }
 
+#zoom-plus,
+#zoom-minus>img {
+  vertical-align: middle;
+}
+
+
 #zoom-plus {
-    border-radius: 8px 8px 0 0;
+  border-radius: 8px 8px 0 0;
 }
 
 #zoom-minus {
-    border-radius: 0 0 8px 8px;
+  border-radius: 0 0 8px 8px;
 }
 
-div#shotcuts > img{
+div#shotcuts>img {
-    margin: 20px 0;
+  margin: 20px 0;
-    width: 40px;
+  width: 40px;
-    height: 40px;
+  height: 40px;
 }
 
 #keyboardTable {
-    font-family: Arial, verdana, serif;
+  font-family: Arial, verdana, serif;
-    font-size: 13px;
+  font-size: 13px;
-    width: 100%;
+  width: 100%;
 }
 
 #keyboardTable td {
-    padding: 3px;
+  padding: 3px;
-    white-space: nowrap;
+  white-space: nowrap;
 }
 
 #keyboardTable th {
-    padding: 5px;
+  padding: 5px;
-    white-space: nowrap;
+  white-space: nowrap;
 }
 
 #keyboardTable th {
-    background-color: #000000;
+  background-color: #000000;
-    color: #ffffff;
+  color: #ffffff;
 }
 
-div#tryInfoPanel {
+.tryInfoPanel {
-    position: absolute;
+  position: absolute;
-    margin: auto;
+  text-align: center;
-    text-align: center;
+  left: 0;
-    top: 80px;
+  right: 0;
-    left: 20px;
+  background-color: white;
-    width: 200px;
+  border: solid 2px #ffa800;
-    padding: 20px;
+  margin: auto;
+  width: 99%;
+  border-radius: 9px;
+  width: 96%;
+}
+
+@media (min-width: 600px) {
+  .tryInfoPanel {
     font-size: 15px;
-    border-radius: 9px;
+  }
-    background-color: white;
-    border: solid 2px #ffa800;
 }
 
-#tryInfoPanel > p {
+@media (max-width: 600px) {
-    justify-content: center;
+  .tryInfoPanel {
-    padding-bottom: 20px;
+    font-size: 13px;
+  }
+}
+
+.tryInfoPanel .tryInfoPanelInner {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.tryInfoPanel .tryInfoPanelInner .closeButton {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}
+
+.tryInfoPanel .tryInfoPanelInner .closeButton button {
+  cursor: pointer;
+  border-style: hidden;
+  background-color: transparent;
+  padding: 0px;
+}
+
+.tryInfoPanel .tryInfoPanelInner .closeButton button img {
+  width: 18px;
+  height: 18px;
+  filter: invert(73%) sepia(21%) saturate(4699%) hue-rotate(357deg) brightness(98%) contrast(108%);
+}
+
+.tryInfoPanelWithToolbar {
+  top: 55px;
+}
+
+.tryInfoPanelWithoutToolbar {
+  top: 5px;
+}
+
+.tryInfoPanelClosed {
+  display: none;
+}
+
+.tryInfoPanel>p {
+  justify-content: center;
 }

packages/editor/src/index.tsx

@@ -1,122 +1,175 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import Toolbar, { ToolbarActionType } from './components/toolbar';
 import Footer from './components/footer';
 import { IntlProvider } from 'react-intl';
 import {
-    $notify,
+  $notify,
-    buildDesigner,
+  buildDesigner,
-    PersistenceManager,
+  PersistenceManager,
-    DesignerOptionsBuilder,
+  DesignerOptionsBuilder,
-    Designer,
+  Designer,
-    DesignerKeyboard,
+  DesignerKeyboard,
-    EditorRenderMode,
+  EditorRenderMode,
+  MindplotWebComponentInterface,
+  Mindmap,
+  MockPersistenceManager,
+  LocalStorageManager,
+  RESTPersistenceManager,
+  TextExporterFactory,
+  ImageExporterFactory,
+  Exporter,
+  Importer,
+  TextImporterFactory,
 } from '@wisemapping/mindplot';
 import './global-styled.css';
 import I18nMsg from './classes/i18n-msg';
 import Menu from './classes/menu/Menu';
+import BootstrapWidgetManager from './classes/bootstrap/BootstrapWidgetManager';
+
+require('../../../libraries/bootstrap/js/bootstrap.min');
 
 declare global {
-    // used in mindplot
+  // used in mindplot
-    var designer: Designer;
+  var designer: Designer;
-    var accountEmail: string;
+  var accountEmail: string;
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      ['mindplot-component']: MindplotWebComponentInterface;
+    }
+  }
 }
 
 export type EditorOptions = {
-    mode: EditorRenderMode,
+  mode: EditorRenderMode;
-    locale: string,
+  locale: string;
-    zoom?: number,
+  zoom?: number;
-    locked?: boolean,
+  locked?: boolean;
-    lockedMsg?: string;
+  lockedMsg?: string;
-    mapTitle: string;
+  mapTitle: string;
-    enableKeyboardEvents: boolean;
+  enableKeyboardEvents: boolean;
-}
-
-export type EditorProps = {
-    mapId: string;
-    options: EditorOptions;
-    persistenceManager: PersistenceManager;
-    onAction: (action: ToolbarActionType) => void;
-    onLoad?: (designer: Designer) => void;
 };
 
-const Editor = ({
+export {
-    mapId,
+  PersistenceManager,
-    options,
+  DesignerOptionsBuilder,
-    persistenceManager,
+  Designer,
-    onAction,
+  DesignerKeyboard,
-    onLoad,
+  EditorRenderMode,
-}: EditorProps) => {
+  Mindmap,
+  MockPersistenceManager,
+  LocalStorageManager,
+  RESTPersistenceManager,
+  TextExporterFactory,
+  ImageExporterFactory,
+  Exporter,
+  Importer,
+  TextImporterFactory,
+};
 
-    useEffect(() => {
+export type EditorProps = {
-        // Change page title ...
+  mapId: string;
-        document.title = `${options.mapTitle} | WiseMapping `;
+  options: EditorOptions;
+  persistenceManager: PersistenceManager;
+  onAction: (action: ToolbarActionType) => void;
+  onLoad?: (designer: Designer) => void;
+};
 
-        // Load mindmap ...
+const Editor = ({ mapId, options, persistenceManager, onAction, onLoad }: EditorProps) => {
-        const designer = onLoadDesigner(mapId, options, persistenceManager);
+  const [isMobile, setIsMobile] = useState(undefined);
-        // Has extended actions been customized ...
+  const mindplotComponent: any = useRef();
-        if (onLoad) {
-            onLoad(designer);
-        }
 
-        // Load mindmap ...
+  useEffect(() => {
-        const instance = PersistenceManager.getInstance();
+    // Change page title ...
-        const mindmap = instance.load(mapId);
+    document.title = `${options.mapTitle} | WiseMapping `;
-        designer.loadMap(mindmap);
 
-        if (options.locked) {
+    // Load mindmap ...
-            $notify(options.lockedMsg, false);
-        }
-    }, []);
 
-    useEffect(() => {
+    const designer = onLoadDesigner(mapId, options, persistenceManager);
-        if (options.enableKeyboardEvents) {
+    // Has extended actions been customized ...
-            DesignerKeyboard.resume();
+    if (onLoad) {
-        } else {
+      onLoad(designer);
-            DesignerKeyboard.pause();
+    }
-        }
-    }, [options.enableKeyboardEvents]);
 
-    const onLoadDesigner = (mapId: string, options: EditorOptions, persistenceManager: PersistenceManager): Designer => {
+    mindplotComponent.current.loadMap(mapId);
-        const buildOptions = DesignerOptionsBuilder.buildOptions({
-            persistenceManager,
-            mode: options.mode,
-            mapId: mapId,
-            container: 'mindplot',
-            zoom: options.zoom,
-            locale: options.locale,
-        });
 
-        // Build designer ...
+    setIsMobile(checkMobile());
-        const result = buildDesigner(buildOptions);
 
-        // Register toolbar event ...
+    if (options.locked) {
-        if (options.mode === 'edition-owner' || options.mode === 'edition-editor' || options.mode === 'edition-viewer' || options.mode === 'showcase') {
+      $notify(options.lockedMsg, false);
-            const menu = new Menu(designer, 'toolbar');
+    }
+  }, []);
 
-            //  If a node has focus, focus can be move to another node using the keys.
+  useEffect(() => {
-            designer.cleanScreen = () => {
+    if (options.enableKeyboardEvents) {
-                menu.clear();
+      DesignerKeyboard.resume();
-            };
+    } else {
-        }
+      DesignerKeyboard.pause();
-        return result;
+    }
+  }, [options.enableKeyboardEvents]);
 
-    };
+  const checkMobile = () => {
+    const check =
+      /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(
+        navigator.userAgent.toLowerCase(),
+      ) ||
+      /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
+        navigator.userAgent.toLowerCase().substring(0, 4),
+      );
+    return check;
+  };
 
-    const locale = options.locale;
+  const onLoadDesigner = (
-    const msg = I18nMsg.loadLocaleData(locale);
+    mapId: string,
-    const mindplotStyle = (options.mode === 'viewonly') ? { top: 0 } : { top: 'inherit' };
+    options: EditorOptions,
-    return (
+    persistenceManager: PersistenceManager,
-        <IntlProvider locale={locale} messages={msg}>
+  ): Designer => {
-            {(options.mode !== 'viewonly') &&
+    mindplotComponent.current.buildDesigner(persistenceManager, new BootstrapWidgetManager());
-                <Toolbar
+
-                    editorMode={options.mode}
+    // Build designer ...
-                    onAction={onAction}
+    const result = mindplotComponent.current && mindplotComponent.current.getDesigner();
-                />
+
-            }
+    // Register toolbar event ...
-            <div id="mindplot" style={mindplotStyle} className="wise-editor"></div>
+    if (
-            <div id="mindplot-tooltips" className="wise-editor"></div>
+      options.mode === 'edition-owner' ||
-            <Footer editorMode={options.mode} />
+      options.mode === 'edition-editor' ||
-        </IntlProvider >
+      options.mode === 'edition-viewer' ||
-    );
+      options.mode === 'showcase'
-}
+    ) {
+      const menu = new Menu(designer, 'toolbar');
+
+      //  If a node has focus, focus can be move to another node using the keys.
+      designer.cleanScreen = () => {
+        menu.clear();
+      };
+    }
+    return result;
+  };
+
+  const locale = options.locale;
+  const msg = I18nMsg.loadLocaleData(locale);
+  const mindplotStyle = options.mode === 'viewonly' ? { top: 0 } : { top: 'inherit' };
+  // if the Toolbar is not hidden before the variable 'isMobile' is defined, it appears intermittently when the page loads
+  // if the Toolbar is not rendered, Menu.ts cant find buttons for create event listeners
+  // so, with this hack the Toolbar is rendered but no visible until the variable 'isMobile' is defined
+  const toolbarContainerStyle = isMobile === undefined ? { display: 'none' } : { display: 'block' };
+  return (
+    <IntlProvider locale={locale} messages={msg}>
+      <div style={toolbarContainerStyle}>
+        {options.mode !== 'viewonly' && !isMobile && (
+          <Toolbar editorMode={options.mode} onAction={onAction} />
+        )}
+      </div>
+      <mindplot-component
+        ref={mindplotComponent}
+        id="mindmap-comp"
+        mode={options.mode}
+      ></mindplot-component>
+      <div id="mindplot-tooltips" className="wise-editor"></div>
+      <Footer editorMode={options.mode} isMobile={isMobile} />
+    </IntlProvider>
+  );
+};
 export default Editor;

packages/editor/test/playground/index.html

@@ -2,31 +2,55 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8" />
+	<meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>@wisemapping/editor - Playground</title>
+	<title>@wisemapping/editor - Playground</title>
-    <style>
+	<style>
-        html * {
+		html * {
-            font-family: Arial !important;
+			font-family: Arial !important;
-        }
+		}
 
-        tbody tr td:first-child {
+		.section {
-            width: 20%;
+			font-weight: bold;
-        }
+		}
-    </style>
+
+		tbody tr td:first-child {
+			width: 20%;
+		}
+	</style>
 </head>
 
 
 <body>
-    <h1>@wisemapping/editor - Playground</h1>
+	<h1>@wisemapping/editor - Playground</h1>
-    <p>You will find here a set of examples that shows how you can use integrate WiseMapping Editor</p>
+	<p>You will find here a set of examples that shows how you can use integrate WiseMapping Editor</p>
-    <div>
+	<div>
-        <ul>
+		<p><span class="section">View Mode:</span>Simple integration to load and render mindaps in read only mode.</p>
-            <li><a href="/viewmode.html">View mode:</a> Simple integration to load and render mindaps in read
+		<ul>
-                only mode</li>
+			<li><a href="/viewmode.html?id=welcome">Welcome</a></li>
-            <li><a href="/editor.html">Editor mode:</a> Example on how mindplot can be used for mindmap edition. Browser local storage is used for persistance.</li>
+			<li><a href="/viewmode.html?id=sample1">Sample 1</a></li>
-        </ul>
+			<li><a href="/viewmode.html?id=sample2">Sample 2</a></li>
-    </div>
+			<li><a href="/viewmode.html?id=sample3">Sample 3</a></li>
+			<li><a href="/viewmode.html?id=sample4">Sample 4</a></li>
+			<li><a href="/viewmode.html?id=sample5">Sample 5</a></li>
+			<li><a href="/viewmode.html?id=sample6">Sample 6</a></li>
+			<li><a href="/viewmode.html?id=sample7">Sample 7</a></li>
+			<li><a href="/viewmode.html?id=sample8">Sample 8</a></li>
+			<li><a href="/viewmode.html?id=img-support">Image support</a></li>
+			<li><a href="/viewmode.html?id=error-on-load">Error on load</a></li>
+			<li><a href="/viewmode.html?id=complex">Complex</a></li>
+			<li><a href="/viewmode.html?id=huge">Huge</a></li>
+			<li><a href="/viewmode.html?id=icon-sample">Icon Sample</a></li>
+		</ul>
+		<p><span class="section">Editor Mode:</span>Example on how mindplot can be used for mindmap edition. Browser local storage is used for persistance.</p>
+		<ul>
+			<li><a href="/editor.html">Sample</a></li>
+		</ul>
+		<p><span class="section">Showcase Mode:</span>When an user wants to try the editor without creating an account.</p>
+		<ul>
+			<li><a href="/showcase.html">Sample</a></li>
+		</ul>
+	</div>
 </body>
 
 </html>

packages/editor/test/playground/map-render/css/viewmode.css

@@ -1,33 +1,33 @@
 /* Overwrite some styles */
 div#footer {
-    width: 100%;
+  width: 100%;
-    padding: 20px 30px;
+  padding: 20px 30px;
-    height: 80px;
+  height: 80px;
-    position: absolute;
+  position: absolute;
-    bottom: 0;
+  bottom: 0;
-    background-color: #ffa800;
+  background-color: #ffa800;
 }
 
 div#footer-desc {
-    float: left;
+  float: left;
-    height: 100px;
+  height: 100px;
-    padding: 0px 10px;
+  padding: 0px 10px;
 }
 
 div#footer-logo {
-    float: left;
+  float: left;
-    height: 100px;
+  height: 100px;
 }
 
 #floating-panel {
-    bottom: 80px;
+  bottom: 20px;
-    align-items: stretch;
+  align-items: stretch;
 }
 
 div#mindplot {
-    top:0;
+  top: 0;
 }
 
 #toolbar {
-    display: none;
+  display: none;
 }

packages/editor/test/playground/map-render/html/editor.html

@@ -11,7 +11,7 @@
 </head>
 
 <body>
-    <div id="root"></div>
+    <div id="root" class="mindplot-root"></div>
 </body>
 
 </html>

packages/editor/test/playground/map-render/html/showcase.html

@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+
+<html>
+
+<head>
+    <title>WiseMapping - Editor </title>
+    <meta name="viewport" content="initial-scale=1">
+    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+</head>
+
+<body>
+    <div id="root" class="mindplot-root"></div>
+</body>
+
+</html>

packages/editor/test/playground/map-render/html/viewmode.html

@@ -4,35 +4,14 @@
 
 <head>
     <title>WiseMapping - View Mode </title>
+    <meta name="viewport" content="initial-scale=1">
     <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
     <link rel="icon" href="images/favicon.ico" type="image/x-icon">
     <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
 </head>
 
 <body>
-    <div id="root" onselectstart="return false;"></div>    
+    <div id="root" class="mindplot-root" onselectstart="return false;"></div>    
-    <div id="footer">
-        <div id="footer-logo"><img src="../images/logo-small.svg" /></div>
-        <div id="footer-desc">
-            <p>The following example showcase rendering of mindmaps in read-only.</p>
-            <p>Select one map to render from the gallery: <select id="map-select">
-                    <option value="welcome">welcome</option>
-                    <option value="sample1">sample1</option>
-                    <option value="sample2">sample2</option>
-                    <option value="sample3">sample3</option>
-                    <option value="sample4">sample4</option>
-                    <option value="sample5">sample5</option>
-                    <option value="sample6">sample6</option>
-                    <option value="sample7">sample7</option>
-                    <option value="sample8">sample8</option>
-                    <option value="img-support">img-support</option>
-                    <option value="error-on-load">error-on-load</option>
-                    <option value="complex">complex</option>
-                    <option value="huge">huge</option>
-                    <option value="icon-sample">icon-sample</option>
-                </select>
-            </p>
-        </div>
     </div>
 </body>
 

packages/editor/test/playground/map-render/js/editor.tsx

@@ -21,9 +21,8 @@ import Editor, { EditorOptions } from '../../../../src/index';
 import { LocalStorageManager, Designer } from '@wisemapping/mindplot';
 
 const initialization = (designer: Designer) => {
-
   designer.addEvent('loadSuccess', () => {
-    const elem = document.getElementById('mindplot');
+    const elem = document.getElementById('mindmap-comp');
     if (elem) {
       elem.classList.add('ready');
     }
@@ -35,10 +34,10 @@ const mapId = 'welcome';
 const options: EditorOptions = {
   zoom: 0.8,
   locked: false,
-  mapTitle: "Develop WiseMapping",
+  mapTitle: 'Develop WiseMapping',
   mode: 'edition-owner',
   locale: 'en',
-  enableKeyboardEvents: true
+  enableKeyboardEvents: true,
 };
 
 ReactDOM.render(

packages/editor/test/playground/map-render/js/showcase.tsx

@@ -0,0 +1,52 @@
+/*
+ *    Copyright [2021] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Editor, { EditorOptions } from '../../../../src/index';
+import { LocalStorageManager, Designer } from '@wisemapping/mindplot';
+
+const initialization = (designer: Designer) => {
+  designer.addEvent('loadSuccess', () => {
+    const elem = document.getElementById('mindmap-comp');
+    if (elem) {
+      elem.classList.add('ready');
+    }
+  });
+};
+
+const persistence = new LocalStorageManager('samples/{id}.wxml', false, false);
+const mapId = 'welcome';
+const options: EditorOptions = {
+  zoom: 0.8,
+  locked: false,
+  mapTitle: 'Develop WiseMapping',
+  mode: 'showcase',
+  locale: 'en',
+  enableKeyboardEvents: true,
+};
+
+ReactDOM.render(
+  <Editor
+    mapId={mapId}
+    options={options}
+    persistenceManager={persistence}
+    onAction={(action) => console.log('action called:', action)}
+    onLoad={initialization}
+  />,
+  document.getElementById('root'),
+);

packages/editor/test/playground/map-render/js/viewmode.tsx

@@ -5,9 +5,8 @@ import Editor, { EditorOptions } from '../../../../src/index';
 import { LocalStorageManager, Designer } from '@wisemapping/mindplot';
 
 const initialization = (designer: Designer) => {
-
   designer.addEvent('loadSuccess', () => {
-    const elem = document.getElementById('mindplot');
+    const elem = document.getElementById('mindmap-comp');
     if (elem) {
       elem.classList.add('ready');
     }
@@ -25,7 +24,6 @@ const initialization = (designer: Designer) => {
         option.selected = option.value === mapId;
       });
     }
-
   });
 };
 
@@ -36,10 +34,10 @@ const persistence = new LocalStorageManager('samples/{id}.wxml', false);
 const options: EditorOptions = {
   zoom: 0.8,
   locked: false,
-  mapTitle: "Develop WiseMapping",
+  mapTitle: 'Develop WiseMapping',
   mode: 'viewonly',
   locale: 'en',
-  enableKeyboardEvents: true
+  enableKeyboardEvents: true,
 };
 
 ReactDOM.render(

packages/editor/webpack.common.js

@@ -10,23 +10,23 @@ module.exports = {
     },
   },
   stats: {
-    errorDetails: true
+    errorDetails: true,
   },
   entry: {
-    "editor.bundle": path.join(__dirname, 'src', 'index.tsx')
+    'editor.bundle': path.join(__dirname, 'src', 'index.tsx'),
   },
   mode: 'development',
   devtool: 'source-map',
   target: 'web',
   resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.jsx']
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
   },
   module: {
     rules: [
       {
         test: /\.tsx?$/,
         use: 'ts-loader',
-        exclude: '/node_modules/'
+        exclude: '/node_modules/',
       },
       {
         test: /\.(png|jpe?g|gif|svg)$/,
@@ -36,14 +36,15 @@ module.exports = {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,
         use: ['babel-loader'],
-      }, {
+      },
+      {
         test: /\.css$/i,
-        loader: 'style-loader'
+        loader: 'style-loader',
       },
       {
         test: /\.css$/,
         loader: 'css-loader',
-      }
+      },
     ],
   },
 };

packages/editor/webpack.playground.js

@@ -10,6 +10,7 @@ const playgroundConfig = {
   entry: {
     viewmode: path.resolve(__dirname, './test/playground/map-render/js/viewmode'),
     editor: path.resolve(__dirname, './test/playground/map-render/js/editor'),
+    showcase: path.resolve(__dirname, './test/playground/map-render/js/showcase'),
   },
   output: {
     path: path.resolve(__dirname, 'test/playground/dist'),
@@ -47,6 +48,11 @@ const playgroundConfig = {
       filename: 'editor.html',
       template: 'test/playground/map-render/html/editor.html',
     }),
+    new HtmlWebpackPlugin({
+      chunks: ['showcase'],
+      filename: 'showcase.html',
+      template: 'test/playground/map-render/html/showcase.html',
+    }),
   ],
 };
 

packages/editor/webpack.prod.js

@@ -9,12 +9,10 @@ const prodConfig = {
   },
   externals: {
     react: 'react',
-    "react-dom": 'react-dom',
+    'react-dom': 'react-dom',
-    "react-intl": 'react-intl',
+    'react-intl': 'react-intl',
   },
-  plugins: [
+  plugins: [new CleanWebpackPlugin()],
-    new CleanWebpackPlugin(),
-  ]
 };
 
 module.exports = merge(common, prodConfig);

packages/mindplot/.eslintrc.json

@@ -22,6 +22,23 @@
         "@typescript-eslint"
     ],
     "rules": {
+		// ignore errors when a line finishes with (setting this value to 0 ignores all errors)
+		"operator-linebreak": [
+			"error", "after", { 
+				"overrides": { 
+					"+": "ignore", 
+					"-": "ignore",
+					":": "ignore",
+					"*": "ignore",
+					"?": "ignore",
+					">": "ignore",
+					"||": "ignore",
+					"&&": "ignore",
+					"(": "ignore"
+				}
+			}
+		],
+		"object-curly-newline": "off",
         "no-underscore-dangle": "off",
         "no-plusplus": "off",
         "no-param-reassign": "off",
@@ -44,7 +61,8 @@
                 "ts": "never",
                 "tsx": "never"
             }
-        ]
+        ],
+	"implicit-arrow-linebreak": "off" 
     },
     "settings": {
         "import/resolver": {

packages/mindplot/README.md

@@ -1,7 +1,78 @@
 # WiseMapping Mindplot
 
-WiseMapping Mindplot module is the core mind map rerendering of WiseMapping. This lighway library allows eithe edition and visualization of saves mindmaps. 
+WiseMapping Mindplot module is the core mind map rerendering of WiseMapping. This lighway library allows eithe edition and visualization of saved mindmaps. 
 
 ## Usage
 
+A WebComponent implementation for mindplot designer is available.
+This component is registered as mindplot-component in customElements API. (see https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define)
+For use it you need to import minplot.js and put in your DOM a <mindplot-component id="mindplot-comp"/> tag. In order to create a Designer on it you need to call its buildDesigner method. Maps can be loaded through loadMap method.
+
+#### Code example
+
+```
+<!DOCTYPE html>
+<html>
+<head>
+  <script src='mindplot.js'></script>
+</head>
+<body>
+  <mindmap-comp id='mindmap-comp' mode="viewonly"></mindmap-comp>
+  <script>
+    var webComponent = document.getElementById('mindmap-comp');
+    webComponent.buildDesigner(persistence, widget);
+    webComponent.loadMap("1");
+  </script>
+</body>
+</html>
+```
+
+Optionaly you can use your own presistence manager and widget manager.
+If you don't have special requirements you can use the defaults.
+
+```
+var persistence = new LocalStorageManager(
+  'map.xml',
+  false, false
+);
+var widget = new MyAwesomeWidgetManager();
+// then build the designer with these params
+webComponent.buildDesigner(persistence, widget);
+```
+ 
+## Usage with React framework
+
+To use the web component in your JSX code, first you need to register it in the IntrinsicElements interface using provided MindplotWebComponentInterface
+
+#### TypeScript example
+```
+import { MindplotWebComponentInterface } from '@wisemapping/mindplot';
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      ['mindplot-component']: MindplotWebComponentInterface;
+    }
+  }
+}
+
+const App = ()=>{
+  const mindplotComponent: any = useRef();
+  
+  useEffect(()=>{
+    mindplotComponent.current.buildDesigner();
+    mindplotComponent.current.loadMap("map_id");
+  }, [])
+
+  return (<div>
+    <mindplot-component
+        ref={mindplotComponent}
+        id="mindmap-comp"
+        mode={options.mode}
+      ></mindplot-component>
+  </div>);
+}
+```
+
+
 Check out the examples located in `test/playground/map-render/js` for some hints on high level usage. You can browse them by running `yarn playground`.

packages/mindplot/cypress/support/commands.js

@@ -18,7 +18,6 @@ if (Cypress.env('imageSnaphots')) {
 }
 
 // https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/
-Cypress.Commands.add('getIframeBody', () => cy
+Cypress.Commands.add('getIframeBody', () =>
-  .get('iframe')
+  cy.get('iframe').its('0.contentDocument.body').should('not.be.empty').then(cy.wrap),
-  .its('0.contentDocument.body').should('not.be.empty')
+);
-  .then(cy.wrap));

packages/mindplot/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wisemapping/mindplot",
-    "version": "5.0.12",
+    "version": "5.0.14",
     "description": "WiseMapping - Mindplot Canvas Library",
     "homepage": "http://www.wisemapping.org/",
     "directories": {
@@ -41,7 +41,7 @@
         "xml-formatter": "^2.6.1"
     },
     "devDependencies": {
-        "@babel/core": "^7.14.6",
+        "@babel/core": "^7.18.13",
         "@babel/preset-env": "^7.14.7",
         "@babel/preset-typescript": "^7.16.5",
         "@babel/register": "^7.16.0",
@@ -71,7 +71,7 @@
         "ts-jest": "^27.1.2",
         "ts-loader": "^9.2.6",
         "ts-node": "^10.4.0",
-        "webpack": "^5.44.0",
+        "webpack": "^5.74.0",
         "webpack-bundle-analyzer": "^4.5.0",
         "webpack-cli": "^4.7.2",
         "webpack-dev-server": "^3.11.2",

packages/mindplot/src/@types/custom.d.ts

@@ -1,4 +1,4 @@
 declare module '*.svg' {
-    const content: any;
+  const content: any;
-    export default content;
+  export default content;
 }

packages/mindplot/src/components/Command.ts

@@ -1,20 +1,20 @@
 /*
-*    Copyright [2021] [wisemapping]
+ *    Copyright [2021] [wisemapping]
-*
+ *
-*   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
-*   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
-*   "powered by wisemapping" text requirement on every single page;
+ *   "powered by wisemapping" text requirement on every single page;
-*   you may not use this file except in compliance with the License.
+ *   you may not use this file except in compliance with the License.
-*   You may obtain a copy of the license at
+ *   You may obtain a copy of the license at
-*
+ *
-*       http://www.wisemapping.org/license
+ *       http://www.wisemapping.org/license
-*
+ *
-*   Unless required by applicable law or agreed to in writing, software
+ *   Unless required by applicable law or agreed to in writing, software
-*   distributed under the License is distributed on an "AS IS" BASIS,
+ *   distributed under the License is distributed on an "AS IS" BASIS,
-*   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-*   See the License for the specific language governing permissions and
+ *   See the License for the specific language governing permissions and
-*   limitations under the License.
+ *   limitations under the License.
-*/
+ */
 import { $defined } from '@wisemapping/core-js';
 import CommandContext from './CommandContext';
 

packages/mindplot/src/components/CommandContext.ts

@@ -47,9 +47,9 @@ class CommandContext {
 
     if (result.length !== topicsIds.length) {
       const ids = designerTopics.map((topic) => topic.getId());
-      throw new Error(`Could not find topic. Result:${result
+      throw new Error(
-      } Filter Criteria:${topicsIds
+        `Could not find topic. Result:${result} Filter Criteria:${topicsIds} Current Topics: [${ids}])`,
-      } Current Topics: [${ids}])`);
+      );
     }
     return result;
   }

packages/mindplot/src/components/ConnectionLine.ts

@@ -17,9 +17,7 @@
  */
 
 import { $assert, $defined } from '@wisemapping/core-js';
-import {
+import { Point, CurvedLine, PolyLine, Line } from '@wisemapping/web2d';
-  Point, CurvedLine, PolyLine, Line,
-} from '@wisemapping/web2d';
 import { TopicShape } from './model/INodeModel';
 import RelationshipModel from './model/RelationshipModel';
 import Topic from './Topic';

packages/mindplot/src/components/Designer.ts

@@ -56,6 +56,7 @@ import { DesignerOptions } from './DesignerOptionsBuilder';
 import DragTopic from './DragTopic';
 import CentralTopic from './CentralTopic';
 import FeatureType from './model/FeatureType';
+import WidgetManager from './WidgetManager';
 
 class Designer extends Events {
   private _mindmap: Mindmap;
@@ -82,7 +83,6 @@ class Designer extends Events {
     super();
     $assert(options, 'options must be defined');
     $assert(options.zoom, 'zoom must be defined');
-    $assert(options.containerSize, 'size must be defined');
     $assert(divElement, 'divElement must be defined');
 
     // Set up i18n location ...
@@ -91,10 +91,10 @@ class Designer extends Events {
 
     this._options = options;
 
-    // Set full div elem render area ...
+    // Set full div elem render area.The component must fill container size
-    if (options.containerSize) {
+    // container is responsible for location and size
-      divElement.css(options.containerSize);
+    divElement.css('width', '100%');
-    }
+    divElement.css('height', '100%');
 
     // Dispatcher manager ...
     const commandContext = new CommandContext(this);
@@ -138,14 +138,18 @@ class Designer extends Events {
 
   private _registerWheelEvents(): void {
     const zoomFactor = 1.02;
-    document.addEventListener('wheel', (event: WheelEvent) => {
+    document.addEventListener(
-      if (event.deltaX > 0 || event.deltaY > 0) {
+      'wheel',
-        this.zoomOut(zoomFactor);
+      (event: WheelEvent) => {
-      } else {
+        if (event.deltaX > 0 || event.deltaY > 0) {
-        this.zoomIn(zoomFactor);
+          this.zoomOut(zoomFactor);
-      }
+        } else {
-      event.preventDefault();
+          this.zoomIn(zoomFactor);
-    }, { passive: false });
+        }
+        event.preventDefault();
+      },
+      { passive: false },
+    );
   }
 
   getActionDispatcher(): StandaloneActionDispatcher {
@@ -187,8 +191,7 @@ class Designer extends Events {
     screenManager.addEvent('dblclick', (event: MouseEvent) => {
       if (workspace.isWorkspaceEventsEnabled()) {
         const mousePos = screenManager.getWorkspaceMousePosition(event);
-        const centralTopic: CentralTopic = me.getModel()
+        const centralTopic: CentralTopic = me.getModel().getCentralTopic();
-          .getCentralTopic();
 
         const model = me._createChildModel(centralTopic, mousePos);
         this._actionDispatcher.addTopics([model], [centralTopic.getId()]);
@@ -568,9 +571,9 @@ class Designer extends Events {
   }
 
   /**
-         * @param {mindplot.Mindmap} mindmap
+   * @param {mindplot.Mindmap} mindmap
-         * @throws will throw an error if mindmapModel is null or undefined
+   * @throws will throw an error if mindmapModel is null or undefined
-         */
+   */
   loadMap(mindmap: Mindmap): void {
     $assert(mindmap, 'mindmapModel can not be null');
     this._mindmap = mindmap;
@@ -644,11 +647,11 @@ class Designer extends Events {
   }
 
   /**
-     * @private
+   * @private
-     * @param {mindplot.model.RelationshipModel} model
+   * @param {mindplot.model.RelationshipModel} model
-     * @return {mindplot.Relationship} the relationship created to the model
+   * @return {mindplot.Relationship} the relationship created to the model
-     * @throws will throw an error if model is null or undefined
+   * @throws will throw an error if model is null or undefined
-     */
+   */
   private _relationshipModelToRelationship(model: RelationshipModel): Relationship {
     $assert(model, 'Node model can not be null');
 
@@ -667,9 +670,9 @@ class Designer extends Events {
   }
 
   /**
-         * @param {mindplot.model.RelationshipModel} model
+   * @param {mindplot.model.RelationshipModel} model
-         * @return {mindplot.Relationship} the relationship added to the mindmap
+   * @return {mindplot.Relationship} the relationship added to the mindmap
-         */
+   */
   addRelationship(model: RelationshipModel): Relationship {
     const mindmap = this.getMindmap();
     mindmap.addRelationship(model);
@@ -677,9 +680,9 @@ class Designer extends Events {
   }
 
   /**
-         * deletes the relationship from the linked topics, DesignerModel, Workspace and Mindmap
+   * deletes the relationship from the linked topics, DesignerModel, Workspace and Mindmap
-         * @param {mindplot.Relationship} rel the relationship to delete
+   * @param {mindplot.Relationship} rel the relationship to delete
-         */
+   */
   deleteRelationship(rel: Relationship): void {
     const sourceTopic = rel.getSourceTopic();
     sourceTopic.deleteRelationship(rel);
@@ -704,9 +707,7 @@ class Designer extends Events {
     const targetTopic = dmodel.findTopicById(targetTopicId);
     $assert(
       targetTopic,
-      `targetTopic could not be found:${targetTopicId},${dmodel
+      `targetTopic could not be found:${targetTopicId},${dmodel.getTopics().map((e) => e.getId())}`,
-        .getTopics()
-        .map((e) => e.getId())}`,
     );
 
     // Build relationship line ....
@@ -797,16 +798,14 @@ class Designer extends Events {
   }
 
   changeFontFamily(font: string) {
-    const topicsIds = this.getModel()
+    const topicsIds = this.getModel().filterTopicsIds();
-      .filterTopicsIds();
     if (topicsIds.length > 0) {
       this._actionDispatcher.changeFontFamilyToTopic(topicsIds, font);
     }
   }
 
   changeFontStyle(): void {
-    const topicsIds = this.getModel()
+    const topicsIds = this.getModel().filterTopicsIds();
-      .filterTopicsIds();
     if (topicsIds.length > 0) {
       this._actionDispatcher.changeFontStyleToTopic(topicsIds);
     }
@@ -815,8 +814,7 @@ class Designer extends Events {
   changeFontColor(color: string) {
     $assert(color, 'color can not be null');
 
-    const topicsIds = this.getModel()
+    const topicsIds = this.getModel().filterTopicsIds();
-      .filterTopicsIds();
 
     if (topicsIds.length > 0) {
       this._actionDispatcher.changeFontColorToTopic(topicsIds, color);
@@ -851,9 +849,8 @@ class Designer extends Events {
   }
 
   changeTopicShape(shape: string) {
-    const validateFunc = (topic: Topic) => !(
+    const validateFunc = (topic: Topic) =>
-      topic.getType() === 'CentralTopic' && shape === TopicShape.LINE
+      !(topic.getType() === 'CentralTopic' && shape === TopicShape.LINE);
-    );
 
     const validateError = 'Central Topic shape can not be changed to line figure.';
     const topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError);
@@ -872,9 +869,13 @@ class Designer extends Events {
   addIconType(iconType: string): void {
     const topicsIds = this.getModel().filterTopicsIds();
     if (topicsIds.length > 0) {
-      this._actionDispatcher.addFeatureToTopic(topicsIds[0], TopicFeatureFactory.Icon.id as FeatureType, {
+      this._actionDispatcher.addFeatureToTopic(
-        id: iconType,
+        topicsIds[0],
-      });
+        TopicFeatureFactory.Icon.id as FeatureType,
+        {
+          id: iconType,
+        },
+      );
     }
   }
 
@@ -882,7 +883,8 @@ class Designer extends Events {
     const model = this.getModel();
     const topic = model.selectedTopic();
     if (topic) {
-      topic.showLinkEditor();
+      const manager = WidgetManager.getInstance();
+      manager.showEditorForLink(topic, null, null);
       this.onObjectFocusEvent();
     }
   }
@@ -891,7 +893,8 @@ class Designer extends Events {
     const model = this.getModel();
     const topic = model.selectedTopic();
     if (topic) {
-      topic.showNoteEditor();
+      const manager = WidgetManager.getInstance();
+      manager.showEditorForNote(topic, null, null);
       this.onObjectFocusEvent();
     }
   }

packages/mindplot/src/components/DesignerBuilder.ts

@@ -20,11 +20,12 @@ import $ from 'jquery';
 import PersistenceManager from './PersistenceManager';
 import Designer from './Designer';
 import { DesignerOptions } from './DesignerOptionsBuilder';
+import WidgetManager from './WidgetManager';
 
 let designer: Designer;
 
 export function buildDesigner(options: DesignerOptions): Designer {
-  const divContainer = $(`#${options.container}`);
+  const divContainer = options.divContainer ? $(options.divContainer) : $(`#${options.container}`);
   $assert(divContainer, 'container could not be null');
 
   // Register load events ...
@@ -34,7 +35,8 @@ export function buildDesigner(options: DesignerOptions): Designer {
   const persistence = options.persistenceManager;
   $assert(persistence, 'persistence must be defined');
   PersistenceManager.init(persistence);
-
+  const widgetManager = options.widgetManager ? options.widgetManager : new WidgetManager();
+  WidgetManager.init(widgetManager);
   return designer;
 }
 

packages/mindplot/src/components/DesignerKeyboard.ts

@@ -33,7 +33,22 @@ class DesignerKeyboard extends Keyboard {
 
   private static _disabled: boolean;
 
-  private static excludeFromEditor = ['Enter', 'CapsLock', 'Escape', 'F1', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12'];
+  private static excludeFromEditor = [
+    'Enter',
+    'CapsLock',
+    'Escape',
+    'F1',
+    'F3',
+    'F4',
+    'F5',
+    'F6',
+    'F7',
+    'F8',
+    'F9',
+    'F10',
+    'F11',
+    'F12',
+  ];
 
   constructor(designer: Designer) {
     super();
@@ -53,9 +68,13 @@ class DesignerKeyboard extends Keyboard {
   private _registerEvents(designer: Designer) {
     // Try with the keyboard ..
     const model = designer.getModel();
-    this.addShortcut(['backspace', 'del'], () => { designer.deleteSelectedEntities(); });
+    this.addShortcut(['backspace', 'del'], () => {
+      designer.deleteSelectedEntities();
+    });
 
-    this.addShortcut('space', () => { designer.shrinkSelectedBranch(); });
+    this.addShortcut('space', () => {
+      designer.shrinkSelectedBranch();
+    });
 
     this.addShortcut('f2', () => {
       const node = model.selectedTopic();
@@ -64,103 +83,128 @@ class DesignerKeyboard extends Keyboard {
       }
     });
 
-    this.addShortcut(['insert', 'tab', 'meta+enter'], () => { designer.createChildForSelectedNode(); });
+    this.addShortcut(['insert', 'tab', 'meta+enter'], () => {
+      designer.createChildForSelectedNode();
+    });
 
-    this.addShortcut('enter', () => { designer.createSiblingForSelectedNode(); });
+    this.addShortcut('enter', () => {
+      designer.createSiblingForSelectedNode();
+    });
 
-    this.addShortcut(['ctrl+z', 'meta+z'], () => { designer.undo(); });
+    this.addShortcut(['ctrl+z', 'meta+z'], () => {
+      designer.undo();
+    });
 
-    this.addShortcut(['ctrl+shift+z', 'meta+shift+z'], () => { designer.redo(); });
+    this.addShortcut(['ctrl+shift+z', 'meta+shift+z'], () => {
+      designer.redo();
+    });
 
-    this.addShortcut(['ctrl+c', 'meta+c'], () => { designer.copyToClipboard(); });
+    this.addShortcut(['ctrl+c', 'meta+c'], () => {
+      designer.copyToClipboard();
+    });
 
-    this.addShortcut(['ctrl+l', 'meta+l'], () => { designer.addLink(); });
+    this.addShortcut(['ctrl+l', 'meta+l'], () => {
+      designer.addLink();
+    });
 
-    this.addShortcut(['ctrl+k', 'meta+k'], () => { designer.addNote(); });
+    this.addShortcut(['ctrl+k', 'meta+k'], () => {
+      designer.addNote();
+    });
 
-    this.addShortcut(['ctrl+v', 'meta+v'], () => { designer.pasteClipboard(); });
+    this.addShortcut(['ctrl+v', 'meta+v'], () => {
+      designer.pasteClipboard();
+    });
 
-    this.addShortcut(['ctrl+a', 'meta+a'], () => { designer.selectAll(); });
+    this.addShortcut(['ctrl+a', 'meta+a'], () => {
+      designer.selectAll();
+    });
 
-    this.addShortcut(['ctrl+b', 'meta+b'], () => { designer.changeFontWeight(); });
+    this.addShortcut(['ctrl+b', 'meta+b'], () => {
+      designer.changeFontWeight();
+    });
 
-    this.addShortcut(['ctrl+s', 'meta+s'], () => { $(document).find('#save').trigger('click'); });
+    this.addShortcut(['ctrl+s', 'meta+s'], () => {
+      $(document).find('#save').trigger('click');
+    });
 
-    this.addShortcut(['ctrl+i', 'meta+i'], () => { designer.changeFontStyle(); });
+    this.addShortcut(['ctrl+i', 'meta+i'], () => {
+      designer.changeFontStyle();
+    });
 
-    this.addShortcut(['ctrl+shift+a', 'meta+shift+a'], () => { designer.deselectAll(); });
+    this.addShortcut(['ctrl+shift+a', 'meta+shift+a'], () => {
+      designer.deselectAll();
+    });
 
-    this.addShortcut(['meta+=', 'ctrl+='], () => { designer.zoomIn(); });
+    this.addShortcut(['meta+=', 'ctrl+='], () => {
+      designer.zoomIn();
+    });
 
-    this.addShortcut(['meta+-', 'ctrl+-'], () => { designer.zoomOut(); });
+    this.addShortcut(['meta+-', 'ctrl+-'], () => {
+      designer.zoomOut();
+    });
 
     const me = this;
-    this.addShortcut(
+    this.addShortcut('right', () => {
-      'right', () => {
+      const node = model.selectedTopic();
-        const node = model.selectedTopic();
+      if (node) {
-        if (node) {
+        if (node.isCentralTopic()) {
-          if (node.isCentralTopic()) {
+          me._goToSideChild(designer, node, 'RIGHT');
-            me._goToSideChild(designer, node, 'RIGHT');
+        } else if (node.getPosition().x < 0) {
-          } else if (node.getPosition().x < 0) {
+          me._goToParent(designer, node);
-            me._goToParent(designer, node);
+        } else if (!node.areChildrenShrunken()) {
-          } else if (!node.areChildrenShrunken()) {
+          me._goToChild(designer, node);
-            me._goToChild(designer, node);
-          }
-        } else {
-          const centralTopic = model.getCentralTopic();
-          me._goToNode(designer, centralTopic);
         }
-      },
+      } else {
-    );
+        const centralTopic = model.getCentralTopic();
+        me._goToNode(designer, centralTopic);
+      }
+    });
 
-    this.addShortcut(
+    this.addShortcut('left', () => {
-      'left', () => {
+      const node = model.selectedTopic();
-        const node = model.selectedTopic();
+      if (node) {
-        if (node) {
+        if (node.isCentralTopic()) {
-          if (node.isCentralTopic()) {
+          me._goToSideChild(designer, node, 'LEFT');
-            me._goToSideChild(designer, node, 'LEFT');
+        } else if (node.getPosition().x > 0) {
-          } else if (node.getPosition().x > 0) {
+          me._goToParent(designer, node);
-            me._goToParent(designer, node);
+        } else if (!node.areChildrenShrunken()) {
-          } else if (!node.areChildrenShrunken()) {
+          me._goToChild(designer, node);
-            me._goToChild(designer, node);
-          }
-        } else {
-          const centralTopic = model.getCentralTopic();
-          me._goToNode(designer, centralTopic);
         }
-      },
+      } else {
-    );
+        const centralTopic = model.getCentralTopic();
+        me._goToNode(designer, centralTopic);
+      }
+    });
 
-    this.addShortcut(
+    this.addShortcut('up', () => {
-      'up', () => {
+      const node = model.selectedTopic();
-        const node = model.selectedTopic();
+      if (node) {
-        if (node) {
+        if (!node.isCentralTopic()) {
-          if (!node.isCentralTopic()) {
+          me._goToBrother(designer, node, 'UP');
-            me._goToBrother(designer, node, 'UP');
-          }
-        } else {
-          const centralTopic = model.getCentralTopic();
-          me._goToNode(designer, centralTopic);
         }
-      },
+      } else {
-    );
+        const centralTopic = model.getCentralTopic();
-    this.addShortcut(
+        me._goToNode(designer, centralTopic);
-      'down', () => {
+      }
-        const node = model.selectedTopic();
+    });
-        if (node) {
+    this.addShortcut('down', () => {
-          if (!node.isCentralTopic()) {
+      const node = model.selectedTopic();
-            me._goToBrother(designer, node, 'DOWN');
+      if (node) {
-          }
+        if (!node.isCentralTopic()) {
-        } else {
+          me._goToBrother(designer, node, 'DOWN');
-          const centralTopic = model.getCentralTopic();
-          me._goToNode(designer, centralTopic);
         }
-      },
+      } else {
-    );
+        const centralTopic = model.getCentralTopic();
+        me._goToNode(designer, centralTopic);
+      }
+    });
 
     $(document).on('keypress', (event) => {
       // Needs to be ignored ?
-      if (DesignerKeyboard.isDisabled() || DesignerKeyboard.excludeFromEditor.includes(event.code)) {
+      if (
+        DesignerKeyboard.isDisabled() ||
+        DesignerKeyboard.excludeFromEditor.includes(event.code)
+      ) {
         return;
       }
 
@@ -189,14 +233,14 @@ class DesignerKeyboard extends Keyboard {
       const { x } = node.getPosition();
       let dist = null;
       for (let i = 0; i < brothers.length; i++) {
-        const sameSide = (x * brothers[i].getPosition().x) >= 0;
+        const sameSide = x * brothers[i].getPosition().x >= 0;
         if (brothers[i] !== node && sameSide) {
           const brother = brothers[i];
           const brotherY = brother.getPosition().y;
           if (direction === 'DOWN' && brotherY > y) {
             let distancia = y - brotherY;
             if (distancia < 0) {
-              distancia *= (-1);
+              distancia *= -1;
             }
             if (dist == null || dist > distancia) {
               dist = distancia;
@@ -205,7 +249,7 @@ class DesignerKeyboard extends Keyboard {
           } else if (direction === 'UP' && brotherY < y) {
             let distance = y - brotherY;
             if (distance < 0) {
-              distance *= (-1);
+              distance *= -1;
             }
             if (dist == null || dist > distance) {
               dist = distance;

packages/mindplot/src/components/DesignerModel.ts

@@ -117,7 +117,7 @@ class DesignerModel extends Events {
 
   selectedTopic(): Topic | undefined {
     const topics = this.filterSelectedTopics();
-    return (topics.length > 0) ? topics[0] : undefined;
+    return topics.length > 0 ? topics[0] : undefined;
   }
 
   findTopicById(id: number): Topic | undefined {