Merged in web2d-coreJS-solutions (pull request #5)

Core-js, web2d and mindplot working baseline

* fix .eslintignore
remove Raphael dependency

* Fix to avoid crashes in  _plotPrediction whitout Raphael

* Fix minplot basic code inspections

* Fix last inspections errors

* Inital refactor copying files

* Clean up.

* Fix web2d cyclic dependencies
remove only-warn eslint plugin
set import/no-extraneous-dependencies to warn (incorrectly complaining about root package)

* Fix web2d Point references (no need to assign it to core)
Fix web2d imports in mindplot and update Point refs

* Merge 'feature/mindplot_tests' into web2d-coreJS-solutions

* mindplot fixes and add viewmode.html playground

setup playground config to run the map-render examples
fix mindplot components export
mootools Static was not working so refactored it
fix some references to _peer
fix messages __bundle undefined
add web2d missing export: Image
downgrade cypress to avoid SIGSEGV error


Approved-by: Paulo Veiga

README.md

@@ -0,0 +1,10 @@
+# wisemapping-frontend
+
+This monorepo uses lerna and contains all the packages that compose the wisemapping frontend.
+
+This is a WIP migration from [legacy wisemapping](https://bitbucket.org/wisemapping/wisemapping-open-source/) into a modern web development project with multiple improvements.
+
+`nvm use`
+`yarn install`
+`yarn bootstrap`
+`yarn run build`

libraries/mootools-core-1.4.5.js

@@ -16,61 +16,787 @@
  ...
  */
 
-(function(){this.MooTools={version:"1.4.5",build:"ab8ea8824dc3b24b6666867a2c4ed58ebb762cf0"};var o=this.typeOf=function(i){if(i==null){return"null";}if(i.$family!=null){return i.$family();
+(function () { 
-}if(i.nodeName){if(i.nodeType==1){return"element";}if(i.nodeType==3){return(/\S/).test(i.nodeValue)?"textnode":"whitespace";}}else{if(typeof i.length=="number"){if(i.callee){return"arguments";
+    this.MooTools = { version: '1.4.5', build: 'ab8ea8824dc3b24b6666867a2c4ed58ebb762cf0' };  
-}if("item" in i){return"collection";}}}return typeof i;};var j=this.instanceOf=function(t,i){if(t==null){return false;}var s=t.$constructor||t.constructor;
+    var o = (this.typeOf = function (i) {
-    while(s){if(s===i){return true;}s=s.parent;}if(!t.hasOwnProperty){return false;}return t instanceof i;};var f=this.Function;var p=true;for(var k in {toString:1}){p=null;
+        if (i == null) {
-}if(p){p=["hasOwnProperty","valueOf","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","constructor"];}f.prototype.overloadSetter=function(s){var i=this;
+            return 'null';
-    return function(u,t){if(u==null){return this;}if(s||typeof u!="string"){for(var v in u){i.call(this,v,u[v]);}if(p){for(var w=p.length;w--;){v=p[w];if(u.hasOwnProperty(v)){i.call(this,v,u[v]);
+        }
-    }}}}else{i.call(this,u,t);}return this;};};f.prototype.overloadGetter=function(s){var i=this;return function(u){var v,t;if(typeof u!="string"){v=u;}else{if(arguments.length>1){v=arguments;
+        if (i.$family != null) {
-}else{if(s){v=[u];}}}if(v){t={};for(var w=0;w<v.length;w++){t[v[w]]=i.call(this,v[w]);}}else{t=i.call(this,u);}return t;};};f.prototype.extend=function(i,s){this[i]=s;
+            return i.$family();
-}.overloadSetter();f.prototype.implement=function(i,s){this.prototype[i]=s;}.overloadSetter();var n=Array.prototype.slice;f.from=function(i){return(o(i)=="function")?i:function(){return i;
+        }
-};};Array.from=function(i){if(i==null){return[];}return(a.isEnumerable(i)&&typeof i!="string")?(o(i)=="array")?i:n.call(i):[i];};Number.from=function(s){var i=parseFloat(s);
+        if (i.nodeName) {
-    return isFinite(i)?i:null;};String.from=function(i){return i+"";};f.implement({hide:function(){this.$hidden=true;return this;},protect:function(){this.$protected=true;
+            if (i.nodeType == 1) {
-    return this;}});var a=this.Type=function(u,t){if(u){var s=u.toLowerCase();var i=function(v){return(o(v)==s);};a["is"+u]=i;if(t!=null){t.prototype.$family=(function(){return s;
+                return 'element';
-}).hide();}}if(t==null){return null;}t.extend(this);t.$constructor=a;t.prototype.$constructor=t;return t;};var e=Object.prototype.toString;a.isEnumerable=function(i){return(i!=null&&typeof i.length=="number"&&e.call(i)!="[object Function]");
+            }
-};var q={};var r=function(i){var s=o(i.prototype);return q[s]||(q[s]=[]);};var b=function(t,x){if(x&&x.$hidden){return;}var s=r(this);for(var u=0;u<s.length;
+            if (i.nodeType == 3) {
-                                                                                                                                          u++){var w=s[u];if(o(w)=="type"){b.call(w,t,x);}else{w.call(this,t,x);}}var v=this.prototype[t];if(v==null||!v.$protected){this.prototype[t]=x;}if(this[t]==null&&o(x)=="function"){m.call(this,t,function(i){return x.apply(i,n.call(arguments,1));
+                return /\S/.test(i.nodeValue) ? 'textnode' : 'whitespace';
-});}};var m=function(i,t){if(t&&t.$hidden){return;}var s=this[i];if(s==null||!s.$protected){this[i]=t;}};a.implement({implement:b.overloadSetter(),extend:m.overloadSetter(),alias:function(i,s){b.call(this,i,this.prototype[s]);
+            }
-}.overloadSetter(),mirror:function(i){r(this).push(i);return this;}});new a("Type",a);var d=function(s,x,v){var u=(x!=Object),B=x.prototype;if(u){x=new a(s,x);
+        } else {
-}for(var y=0,w=v.length;y<w;y++){var C=v[y],A=x[C],z=B[C];if(A){A.protect();}if(u&&z){x.implement(C,z.protect());}}if(u){var t=B.propertyIsEnumerable(v[0]);
+            if (typeof i.length == 'number') {
-    x.forEachMethod=function(G){if(!t){for(var F=0,D=v.length;F<D;F++){G.call(B,B[v[F]],v[F]);}}for(var E in B){G.call(B,B[E],E);}};}return d;};d("String",String,["charAt","charCodeAt","concat","indexOf","lastIndexOf","match","quote","replace","search","slice","split","substr","substring","trim","toLowerCase","toUpperCase"])("Array",Array,["pop","push","reverse","shift","sort","splice","unshift","concat","join","slice","indexOf","lastIndexOf","filter","forEach","every","map","some","reduce","reduceRight"])("Number",Number,["toExponential","toFixed","toLocaleString","toPrecision"])("Function",f,["apply","call","bind"])("RegExp",RegExp,["exec","test"])("Object",Object,["create","defineProperty","defineProperties","keys","getPrototypeOf","getOwnPropertyDescriptor","getOwnPropertyNames","preventExtensions","isExtensible","seal","isSealed","freeze","isFrozen"])("Date",Date,["now"]);
+                if (i.callee) {
-    Object.extend=m.overloadSetter();Date.extend("now",function(){return +(new Date);});new a("Boolean",Boolean);Number.prototype.$family=function(){return isFinite(this)?"number":"null";
+                    return 'arguments';
-    }.hide();Number.extend("random",function(s,i){return Math.floor(Math.random()*(i-s+1)+s);});var g=Object.prototype.hasOwnProperty;Object.extend("forEach",function(i,t,u){for(var s in i){if(g.call(i,s)){t.call(u,i[s],s,i);
+                }
-    }}});Object.each=Object.forEach;Array.implement({forEach:function(u,v){for(var t=0,s=this.length;t<s;t++){if(t in this){u.call(v,this[t],t,this);}}},each:function(i,s){Array.forEach(this,i,s);
+                if ('item' in i) {
-        return this;}});var l=function(i){switch(o(i)){case"array":return i.clone();case"object":return Object.clone(i);default:return i;}};Array.implement("clone",function(){var s=this.length,t=new Array(s);
+                    return 'collection';
-        while(s--){t[s]=l(this[s]);}return t;});var h=function(s,i,t){switch(o(t)){case"object":if(o(s[i])=="object"){Object.merge(s[i],t);}else{s[i]=Object.clone(t);
+                }
-    }break;case"array":s[i]=t.clone();break;default:s[i]=t;}return s;};Object.extend({merge:function(z,u,t){if(o(u)=="string"){return h(z,u,t);}for(var y=1,s=arguments.length;
+            }
-                                                                                                                                                    y<s;y++){var w=arguments[y];for(var x in w){h(z,x,w[x]);}}return z;},clone:function(i){var t={};for(var s in i){t[s]=l(i[s]);}return t;},append:function(w){for(var v=1,t=arguments.length;
+        }
-                                                                                                                                                                                                                                                                                                                    v<t;v++){var s=arguments[v]||{};for(var u in s){w[u]=s[u];}}return w;}});["Object","WhiteSpace","TextNode","Collection","Arguments"].each(function(i){new a(i);
+        return typeof i;
-    });var c=Date.now();String.extend("uniqueID",function(){return(c++).toString(36);});})();Array.implement({every:function(c,d){for(var b=0,a=this.length>>>0;
+    });
-                                                                                                                                      b<a;b++){if((b in this)&&!c.call(d,this[b],b,this)){return false;}}return true;},filter:function(d,f){var c=[];for(var e,b=0,a=this.length>>>0;b<a;b++){if(b in this){e=this[b];
+    var j = (this.instanceOf = function (t, i) {
-    if(d.call(f,e,b,this)){c.push(e);}}}return c;},indexOf:function(c,d){var b=this.length>>>0;for(var a=(d<0)?Math.max(0,b+d):d||0;a<b;a++){if(this[a]===c){return a;
+        if (t == null) {
-}}return -1;},map:function(c,e){var d=this.length>>>0,b=Array(d);for(var a=0;a<d;a++){if(a in this){b[a]=c.call(e,this[a],a,this);}}return b;},some:function(c,d){for(var b=0,a=this.length>>>0;
+            return false;
-                                                                                                                                                                      b<a;b++){if((b in this)&&c.call(d,this[b],b,this)){return true;}}return false;},clean:function(){return this.filter(function(a){return a!=null;});},invoke:function(a){var b=Array.slice(arguments,1);
+        }
-    return this.map(function(c){return c[a].apply(c,b);});},associate:function(c){var d={},b=Math.min(this.length,c.length);for(var a=0;a<b;a++){d[c[a]]=this[a];
+        var s = t.$constructor || t.constructor;
-}return d;},link:function(c){var a={};for(var e=0,b=this.length;e<b;e++){for(var d in c){if(c[d](this[e])){a[d]=this[e];delete c[d];break;}}}return a;},contains:function(a,b){return this.indexOf(a,b)!=-1;
+        while (s) {
-},append:function(a){this.push.apply(this,a);return this;},getLast:function(){return(this.length)?this[this.length-1]:null;},getRandom:function(){return(this.length)?this[Number.random(0,this.length-1)]:null;
+            if (s === i) {
-},include:function(a){if(!this.contains(a)){this.push(a);}return this;},combine:function(c){for(var b=0,a=c.length;b<a;b++){this.include(c[b]);}return this;
+                return true;
-},erase:function(b){for(var a=this.length;a--;){if(this[a]===b){this.splice(a,1);}}return this;},empty:function(){this.length=0;return this;},flatten:function(){var d=[];
+            }
-    for(var b=0,a=this.length;b<a;b++){var c=typeOf(this[b]);if(c=="null"){continue;}d=d.concat((c=="array"||c=="collection"||c=="arguments"||instanceOf(this[b],Array))?Array.flatten(this[b]):this[b]);
+            s = s.parent;
-    }return d;},pick:function(){for(var b=0,a=this.length;b<a;b++){if(this[b]!=null){return this[b];}}return null;},rgbToHex:function(d){if(this.length<3){return null;}if(this.length==4&&this[3]==0&&!d){return"transparent";
+        }
-}var b=[];for(var a=0;a<3;a++){var c=(this[a]-0).toString(16);b.push((c.length==1)?"0"+c:c);}return(d)?b:"#"+b.join("");}});String.implement({test:function(a,b){return((typeOf(a)=="regexp")?a:new RegExp(""+a,b)).test(this);
+        if (!t.hasOwnProperty) {
-},contains:function(a,b){return(b)?(b+this+b).indexOf(b+a+b)>-1:String(this).indexOf(a)>-1;},trim:function(){return String(this).replace(/^\s+|\s+$/g,"");
+            return false;
-},clean:function(){return String(this).replace(/\s+/g," ").trim();},camelCase:function(){return String(this).replace(/-\D/g,function(a){return a.charAt(1).toUpperCase();
+        }
-});},hyphenate:function(){return String(this).replace(/[A-Z]/g,function(a){return("-"+a.charAt(0).toLowerCase());});},capitalize:function(){return String(this).replace(/\b[a-z]/g,function(a){return a.toUpperCase();
+        return t instanceof i;
-});},escapeRegExp:function(){return String(this).replace(/([-.*+?^${}()|[\]\/\\])/g,"\\$1");},rgbToHex:function(b){var a=String(this).match(/\d{1,3}/g);
+    });
-    return(a)?a.rgbToHex(b):null;},substitute:function(a,b){return String(this).replace(b||(/\\?\{([^{}]+)\}/g),function(d,c){if(d.charAt(0)=="\\"){return d.slice(1);
+    var f = this.Function;
-}return(a[c]!=null)?a[c]:"";});}});
+    var p = true;
-Function.implement({bind:function(e){var a=this,b=arguments.length>1?Array.slice(arguments,1):null,d=function(){};var c=function(){var g=e,h=arguments.length;if(this instanceof c){d.prototype=a.prototype;g=new d;}var f=(!b&&!h)?a.call(g):a.apply(g,b&&h?b.concat(Array.slice(arguments)):b||arguments);return g==e?f:g;};return c;},pass:function(b,c){var a=this;if(b!=null){b=Array.from(b);}return function(){return a.apply(c,b||arguments);};},delay:function(b,c,a){return setTimeout(this.pass((a==null?[]:a),c),b);},});
+    for (var k in { toString: 1 }) {
-Number.alias("each","times");(function(b){var a={};b.each(function(c){if(!Number[c]){a[c]=function(){return Math[c].apply(null,[this].concat(Array.from(arguments)));
+        p = null;
-};}});Number.implement(a);})(["abs","acos","asin","atan","atan2","ceil","cos","exp","floor","log","max","min","pow","sin","sqrt","tan"]);(function(){var a=this.Class=new Type("Class",function(h){if(instanceOf(h,Function)){h={initialize:h};
+    }
-}var g=function(){e(this);if(g.$prototyping){return this;}this.$caller=null;var i=(this.initialize)?this.initialize.apply(this,arguments):this;this.$caller=this.caller=null;
+    if (p) {
-    return i;}.extend(this).implement(h);g.$constructor=a;g.prototype.$constructor=g;g.prototype.parent=c;return g;});var c=function(){if(!this.$caller){throw new Error('The method "parent" cannot be called.');
+        p = [
-}var g=this.$caller.$name,h=this.$caller.$owner.parent,i=(h)?h.prototype[g]:null;if(!i){throw new Error('The method "'+g+'" has no parent.');}return i.apply(this,arguments);
+            'hasOwnProperty',
-};var e=function(g){for(var h in g){var j=g[h];switch(typeOf(j)){case"object":var i=function(){};i.prototype=j;g[h]=e(new i);break;case"array":g[h]=j.clone();
+            'valueOf',
-    break;}}return g;};var b=function(g,h,j){if(j.$origin){j=j.$origin;}var i=function(){if(j.$protected&&this.$caller==null){throw new Error('The method "'+h+'" cannot be called.');
+            'isPrototypeOf',
-}var l=this.caller,m=this.$caller;this.caller=m;this.$caller=i;var k=j.apply(this,arguments);this.$caller=m;this.caller=l;return k;}.extend({$owner:g,$origin:j,$name:h});
+            'propertyIsEnumerable',
-    return i;};var f=function(h,i,g){if(a.Mutators.hasOwnProperty(h)){i=a.Mutators[h].call(this,i);if(i==null){return this;}}if(typeOf(i)=="function"){if(i.$hidden){return this;
+            'toLocaleString',
-}this.prototype[h]=(g)?i:b(this,h,i);}else{Object.merge(this.prototype,h,i);}return this;};var d=function(g){g.$prototyping=true;var h=new g;delete g.$prototyping;
+            'toString',
-    return h;};a.implement("implement",f.overloadSetter());a.Mutators={Extends:function(g){this.parent=g;this.prototype=d(g);},Implements:function(g){Array.from(g).each(function(j){var h=new j;for(var i in h){f.call(this,i,h[i],true);}},this);}};})();
+            'constructor',
+        ];
+    }
+    f.prototype.overloadSetter = function (s) {
+        var i = this;
+        return function (u, t) {
+            if (u == null) {
+                return this;
+            }
+            if (s || typeof u != 'string') {
+                for (var v in u) {
+                    i.call(this, v, u[v]);
+                }
+                if (p) {
+                    for (var w = p.length; w--; ) {
+                        v = p[w];
+                        if (u.hasOwnProperty(v)) {
+                            i.call(this, v, u[v]);
+                        }
+                    }
+                }
+            } else {
+                i.call(this, u, t);
+            }
+            return this;
+        };
+    };
+    f.prototype.overloadGetter = function (s) {
+        var i = this;
+        return function (u) {
+            var v, t;
+            if (typeof u != 'string') {
+                v = u;
+            } else {
+                if (arguments.length > 1) {
+                    v = arguments;
+                } else {
+                    if (s) {
+                        v = [u];
+                    }
+                }
+            }
+            if (v) {
+                t = {};
+                for (var w = 0; w < v.length; w++) {
+                    t[v[w]] = i.call(this, v[w]);
+                }
+            } else {
+                t = i.call(this, u);
+            }
+            return t;
+        };
+    };
+    f.prototype.extend = function (i, s) {
+        this[i] = s;
+    }.overloadSetter();
+    f.prototype.implement = function (i, s) {
+        this.prototype[i] = s;
+    }.overloadSetter();
+    var n = Array.prototype.slice;
+    f.from = function (i) {
+        return o(i) == 'function'
+            ? i
+            : function () {
+                  return i;
+              };
+    };
+    Array.from = function (i) {
+        if (i == null) {
+            return [];
+        }
+        return a.isEnumerable(i) && typeof i != 'string' ? (o(i) == 'array' ? i : n.call(i)) : [i];
+    };
+    Number.from = function (s) {
+        var i = parseFloat(s);
+        return isFinite(i) ? i : null;
+    };
+    String.from = function (i) {
+        return i + '';
+    };
+    f.implement({
+        hide: function () {
+            this.$hidden = true;
+            return this;
+        },
+        protect: function () {
+            this.$protected = true;
+            return this;
+        },
+    });
+    var a = (this.Type = function (u, t) {
+        if (u) {
+            var s = u.toLowerCase();
+            var i = function (v) {
+                return o(v) == s;
+            };
+            a['is' + u] = i;
+            if (t != null) {
+                t.prototype.$family = function () {
+                    return s;
+                }.hide();
+            }
+        }
+        if (t == null) {
+            return null;
+        }
+        t.extend(this);
+        t.$constructor = a;
+        t.prototype.$constructor = t;
+        return t;
+    });
+    var e = Object.prototype.toString;
+    a.isEnumerable = function (i) {
+        return i != null && typeof i.length == 'number' && e.call(i) != '[object Function]';
+    };
+    var q = {};
+    var r = function (i) {
+        var s = o(i.prototype);
+        return q[s] || (q[s] = []);
+    };
+    var b = function (t, x) {
+        if (x && x.$hidden) {
+            return;
+        }
+        var s = r(this);
+        for (var u = 0; u < s.length; u++) {
+            var w = s[u];
+            if (o(w) == 'type') {
+                b.call(w, t, x);
+            } else {
+                w.call(this, t, x);
+            }
+        }
+        var v = this.prototype[t];
+        if (v == null || !v.$protected) {
+            this.prototype[t] = x;
+        }
+        if (this[t] == null && o(x) == 'function') {
+            m.call(this, t, function (i) {
+                return x.apply(i, n.call(arguments, 1));
+            });
+        }
+    };
+    var m = function (i, t) {
+        if (t && t.$hidden) {
+            return;
+        }
+        var s = this[i];
+        if (s == null || !s.$protected) {
+            this[i] = t;
+        }
+    };
+    a.implement({
+        implement: b.overloadSetter(),
+        extend: m.overloadSetter(),
+        alias: function (i, s) {
+            b.call(this, i, this.prototype[s]);
+        }.overloadSetter(),
+        mirror: function (i) {
+            r(this).push(i);
+            return this;
+        },
+    });
+    new a('Type', a);
+    var d = function (s, x, v) {
+        var u = x != Object,
+            B = x.prototype;
+        if (u) {
+            x = new a(s, x);
+        }
+        for (var y = 0, w = v.length; y < w; y++) {
+            var C = v[y],
+                A = x[C],
+                z = B[C];
+            if (A) {
+                A.protect();
+            }
+            if (u && z) {
+                x.implement(C, z.protect());
+            }
+        }
+        if (u) {
+            var t = B.propertyIsEnumerable(v[0]);
+            x.forEachMethod = function (G) {
+                if (!t) {
+                    for (var F = 0, D = v.length; F < D; F++) {
+                        G.call(B, B[v[F]], v[F]);
+                    }
+                }
+                for (var E in B) {
+                    G.call(B, B[E], E);
+                }
+            };
+        }
+        return d;
+    };
+    d('String', String, [
+        'charAt',
+        'charCodeAt',
+        'concat',
+        'indexOf',
+        'lastIndexOf',
+        'match',
+        'quote',
+        'replace',
+        'search',
+        'slice',
+        'split',
+        'substr',
+        'substring',
+        'trim',
+        'toLowerCase',
+        'toUpperCase',
+    ])('Array', Array, [
+        'pop',
+        'push',
+        'reverse',
+        'shift',
+        'sort',
+        'splice',
+        'unshift',
+        'concat',
+        'join',
+        'slice',
+        'indexOf',
+        'lastIndexOf',
+        'filter',
+        'forEach',
+        'every',
+        'map',
+        'some',
+        'reduce',
+        'reduceRight',
+    ])('Number', Number, ['toExponential', 'toFixed', 'toLocaleString', 'toPrecision'])(
+        'Function',
+        f,
+        ['apply', 'call', 'bind']
+    )('RegExp', RegExp, ['exec', 'test'])('Object', Object, [
+        'create',
+        'defineProperty',
+        'defineProperties',
+        'keys',
+        'getPrototypeOf',
+        'getOwnPropertyDescriptor',
+        'getOwnPropertyNames',
+        'preventExtensions',
+        'isExtensible',
+        'seal',
+        'isSealed',
+        'freeze',
+        'isFrozen',
+    ])('Date', Date, ['now']);
+    Object.extend = m.overloadSetter();
+    Date.extend('now', function () {
+        return +new Date();
+    });
+    new a('Boolean', Boolean);
+    Number.prototype.$family = function () {
+        return isFinite(this) ? 'number' : 'null';
+    }.hide();
+    Number.extend('random', function (s, i) {
+        return Math.floor(Math.random() * (i - s + 1) + s);
+    });
+    var g = Object.prototype.hasOwnProperty;
+    Object.extend('forEach', function (i, t, u) {
+        for (var s in i) {
+            if (g.call(i, s)) {
+                t.call(u, i[s], s, i);
+            }
+        }
+    });
+    Object.each = Object.forEach;
+    Array.implement({
+        forEach: function (u, v) {
+            for (var t = 0, s = this.length; t < s; t++) {
+                if (t in this) {
+                    u.call(v, this[t], t, this);
+                }
+            }
+        },
+        each: function (i, s) {
+            Array.forEach(this, i, s);
+            return this;
+        },
+    });
+    var l = function (i) {
+        switch (o(i)) {
+            case 'array':
+                return i.clone();
+            case 'object':
+                return Object.clone(i);
+            default:
+                return i;
+        }
+    };
+    Array.implement('clone', function () {
+        var s = this.length,
+            t = new Array(s);
+        while (s--) {
+            t[s] = l(this[s]);
+        }
+        return t;
+    });
+    var h = function (s, i, t) {
+        switch (o(t)) {
+            case 'object':
+                if (o(s[i]) == 'object') {
+                    Object.merge(s[i], t);
+                } else {
+                    s[i] = Object.clone(t);
+                }
+                break;
+            case 'array':
+                s[i] = t.clone();
+                break;
+            default:
+                s[i] = t;
+        }
+        return s;
+    };
+    Object.extend({
+        merge: function (z, u, t) {
+            if (o(u) == 'string') {
+                return h(z, u, t);
+            }
+            for (var y = 1, s = arguments.length; y < s; y++) {
+                var w = arguments[y];
+                for (var x in w) {
+                    h(z, x, w[x]);
+                }
+            }
+            return z;
+        },
+        clone: function (i) {
+            var t = {};
+            for (var s in i) {
+                t[s] = l(i[s]);
+            }
+            return t;
+        },
+        append: function (w) {
+            for (var v = 1, t = arguments.length; v < t; v++) {
+                var s = arguments[v] || {};
+                for (var u in s) {
+                    w[u] = s[u];
+                }
+            }
+            return w;
+        },
+    });
+    ['Object', 'WhiteSpace', 'TextNode', 'Collection', 'Arguments'].each(function (i) {
+        new a(i);
+    });
+    var c = Date.now();
+    String.extend('uniqueID', function () {
+        return (c++).toString(36);
+    });
+})();
+Array.implement({
+    every: function (c, d) {
+        for (var b = 0, a = this.length >>> 0; b < a; b++) {
+            if (b in this && !c.call(d, this[b], b, this)) {
+                return false;
+            }
+        }
+        return true;
+    },
+    filter: function (d, f) {
+        var c = [];
+        for (var e, b = 0, a = this.length >>> 0; b < a; b++) {
+            if (b in this) {
+                e = this[b];
+                if (d.call(f, e, b, this)) {
+                    c.push(e);
+                }
+            }
+        }
+        return c;
+    },
+    indexOf: function (c, d) {
+        var b = this.length >>> 0;
+        for (var a = d < 0 ? Math.max(0, b + d) : d || 0; a < b; a++) {
+            if (this[a] === c) {
+                return a;
+            }
+        }
+        return -1;
+    },
+    map: function (c, e) {
+        var d = this.length >>> 0,
+            b = Array(d);
+        for (var a = 0; a < d; a++) {
+            if (a in this) {
+                b[a] = c.call(e, this[a], a, this);
+            }
+        }
+        return b;
+    },
+    some: function (c, d) {
+        for (var b = 0, a = this.length >>> 0; b < a; b++) {
+            if (b in this && c.call(d, this[b], b, this)) {
+                return true;
+            }
+        }
+        return false;
+    },
+    clean: function () {
+        return this.filter(function (a) {
+            return a != null;
+        });
+    },
+    invoke: function (a) {
+        var b = Array.slice(arguments, 1);
+        return this.map(function (c) {
+            return c[a].apply(c, b);
+        });
+    },
+    associate: function (c) {
+        var d = {},
+            b = Math.min(this.length, c.length);
+        for (var a = 0; a < b; a++) {
+            d[c[a]] = this[a];
+        }
+        return d;
+    },
+    link: function (c) {
+        var a = {};
+        for (var e = 0, b = this.length; e < b; e++) {
+            for (var d in c) {
+                if (c[d](this[e])) {
+                    a[d] = this[e];
+                    delete c[d];
+                    break;
+                }
+            }
+        }
+        return a;
+    },
+    contains: function (a, b) {
+        return this.indexOf(a, b) != -1;
+    },
+    append: function (a) {
+        this.push.apply(this, a);
+        return this;
+    },
+    getLast: function () {
+        return this.length ? this[this.length - 1] : null;
+    },
+    getRandom: function () {
+        return this.length ? this[Number.random(0, this.length - 1)] : null;
+    },
+    include: function (a) {
+        if (!this.contains(a)) {
+            this.push(a);
+        }
+        return this;
+    },
+    combine: function (c) {
+        for (var b = 0, a = c.length; b < a; b++) {
+            this.include(c[b]);
+        }
+        return this;
+    },
+    erase: function (b) {
+        for (var a = this.length; a--; ) {
+            if (this[a] === b) {
+                this.splice(a, 1);
+            }
+        }
+        return this;
+    },
+    empty: function () {
+        this.length = 0;
+        return this;
+    },
+    flatten: function () {
+        var d = [];
+        for (var b = 0, a = this.length; b < a; b++) {
+            var c = typeOf(this[b]);
+            if (c == 'null') {
+                continue;
+            }
+            d = d.concat(
+                c == 'array' || c == 'collection' || c == 'arguments' || instanceOf(this[b], Array)
+                    ? Array.flatten(this[b])
+                    : this[b]
+            );
+        }
+        return d;
+    },
+    pick: function () {
+        for (var b = 0, a = this.length; b < a; b++) {
+            if (this[b] != null) {
+                return this[b];
+            }
+        }
+        return null;
+    },
+    rgbToHex: function (d) {
+        if (this.length < 3) {
+            return null;
+        }
+        if (this.length == 4 && this[3] == 0 && !d) {
+            return 'transparent';
+        }
+        var b = [];
+        for (var a = 0; a < 3; a++) {
+            var c = (this[a] - 0).toString(16);
+            b.push(c.length == 1 ? '0' + c : c);
+        }
+        return d ? b : '#' + b.join('');
+    },
+});
+String.implement({
+    test: function (a, b) {
+        return (typeOf(a) == 'regexp' ? a : new RegExp('' + a, b)).test(this);
+    },
+    contains: function (a, b) {
+        return b ? (b + this + b).indexOf(b + a + b) > -1 : String(this).indexOf(a) > -1;
+    },
+    trim: function () {
+        return String(this).replace(/^\s+|\s+$/g, '');
+    },
+    clean: function () {
+        return String(this).replace(/\s+/g, ' ').trim();
+    },
+    camelCase: function () {
+        return String(this).replace(/-\D/g, function (a) {
+            return a.charAt(1).toUpperCase();
+        });
+    },
+    hyphenate: function () {
+        return String(this).replace(/[A-Z]/g, function (a) {
+            return '-' + a.charAt(0).toLowerCase();
+        });
+    },
+    capitalize: function () {
+        return String(this).replace(/\b[a-z]/g, function (a) {
+            return a.toUpperCase();
+        });
+    },
+    escapeRegExp: function () {
+        return String(this).replace(/([-.*+?^${}()|[\]\/\\])/g, '\\$1');
+    },
+    rgbToHex: function (b) {
+        var a = String(this).match(/\d{1,3}/g);
+        return a ? a.rgbToHex(b) : null;
+    },
+    substitute: function (a, b) {
+        return String(this).replace(b || /\\?\{([^{}]+)\}/g, function (d, c) {
+            if (d.charAt(0) == '\\') {
+                return d.slice(1);
+            }
+            return a[c] != null ? a[c] : '';
+        });
+    },
+});
+Function.implement({
+    bind: function (e) {
+        var a = this,
+            b = arguments.length > 1 ? Array.slice(arguments, 1) : null,
+            d = function () {};
+        var c = function () {
+            var g = e,
+                h = arguments.length;
+            if (this instanceof c) {
+                d.prototype = a.prototype;
+                g = new d();
+            }
+            var f =
+                !b && !h
+                    ? a.call(g)
+                    : a.apply(g, b && h ? b.concat(Array.slice(arguments)) : b || arguments);
+            return g == e ? f : g;
+        };
+        return c;
+    },
+    pass: function (b, c) {
+        var a = this;
+        if (b != null) {
+            b = Array.from(b);
+        }
+        return function () {
+            return a.apply(c, b || arguments);
+        };
+    },
+    delay: function (b, c, a) {
+        return setTimeout(this.pass(a == null ? [] : a, c), b);
+    },
+});
+Number.alias('each', 'times');
+(function (b) {
+    var a = {};
+    b.each(function (c) {
+        if (!Number[c]) {
+            a[c] = function () {
+                return Math[c].apply(null, [this].concat(Array.from(arguments)));
+            };
+        }
+    });
+    Number.implement(a);
+})([
+    'abs',
+    'acos',
+    'asin',
+    'atan',
+    'atan2',
+    'ceil',
+    'cos',
+    'exp',
+    'floor',
+    'log',
+    'max',
+    'min',
+    'pow',
+    'sin',
+    'sqrt',
+    'tan',
+]);
+(function () {
+    var a = (this.Class = new Type('Class', function (h) {
+        if (instanceOf(h, Function)) {
+            h = { initialize: h };
+        }
+        var g = function () {
+            e(this);
+            if (g.$prototyping) {
+                return this;
+            }
+            this.$caller = null;
+            var i = this.initialize ? this.initialize.apply(this, arguments) : this;
+            this.$caller = this.caller = null;
+            return i;
+        }
+            .extend(this)
+            .implement(h);
+        g.$constructor = a;
+        g.prototype.$constructor = g;
+        g.prototype.parent = c;
+        return g;
+    }));
+    var c = function () {
+        if (!this.$caller) {
+            throw new Error('The method "parent" cannot be called.');
+        }
+        var g = this.$caller.$name,
+            h = this.$caller.$owner.parent,
+            i = h ? h.prototype[g] : null;
+        if (!i) {
+            throw new Error('The method "' + g + '" has no parent.');
+        }
+        return i.apply(this, arguments);
+    };
+    var e = function (g) {
+        for (var h in g) {
+            var j = g[h];
+            switch (typeOf(j)) {
+                case 'object':
+                    var i = function () {};
+                    i.prototype = j;
+                    g[h] = e(new i());
+                    break;
+                case 'array':
+                    g[h] = j.clone();
+                    break;
+            }
+        }
+        return g;
+    };
+    var b = function (g, h, j) {
+        if (j.$origin) {
+            j = j.$origin;
+        }
+        var i = function () {
+            if (j.$protected && this.$caller == null) {
+                throw new Error('The method "' + h + '" cannot be called.');
+            }
+            var l = this.caller,
+                m = this.$caller;
+            this.caller = m;
+            this.$caller = i;
+            var k = j.apply(this, arguments);
+            this.$caller = m;
+            this.caller = l;
+            return k;
+        }.extend({ $owner: g, $origin: j, $name: h });
+        return i;
+    };
+    var f = function (h, i, g) {
+        if (a.Mutators.hasOwnProperty(h)) {
+            i = a.Mutators[h].call(this, i);
+            if (i == null) {
+                return this;
+            }
+        }
+        if (typeOf(i) == 'function') {
+            if (i.$hidden) {
+                return this;
+            }
+            this.prototype[h] = g ? i : b(this, h, i);
+        } else {
+            Object.merge(this.prototype, h, i);
+        }
+        return this;
+    };
+    var d = function (g) {
+        g.$prototyping = true;
+        var h = new g();
+        delete g.$prototyping;
+        return h;
+    };
+    a.implement('implement', f.overloadSetter());
+    a.Mutators = {
+        Extends: function (g) {
+            this.parent = g;
+            this.prototype = d(g);
+        },
+        Implements: function (g) {
+            Array.from(g).each(function (j) {
+                var h = new j();
+                for (var i in h) {
+                    f.call(this, i, h[i], true);
+                }
+            }, this);
+        },
+    };
+})();

package.json

@@ -5,7 +5,8 @@
         "build": "lerna run build",
         "clean": "lerna clean && rm -rf node_modules",
         "lint": "lerna run lint --stream",
-        "test": "lerna run test --stream"
+        "test": "lerna run test --stream",
+        "test:snapshots": "lerna run test:snapshots --stream"
     },
     "private": true,
     "devDependencies": {

packages/core-js/README.md

@@ -11,6 +11,6 @@ To build up the package core-js and use in production, you have to use command `
 To start using core-js it has to be required as a module and then intanciarce as a function
 
 ```
-const coreJs = require('core-js');
+import coreJs from 'core-js';
 coreJs();
 ```

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

@@ -1,6 +1,6 @@
 'use strict';
 
-const coreJs = require('..');
+import coreJs from '..';
 
 describe('core-js', () => {
     it('needs tests');

packages/core-js/babel.config.json

@@ -13,5 +13,6 @@
                 }
             }
         ]
-    ]
+    ],
+    "sourceType": "unambiguous"
 }

packages/core-js/jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "module": "commonjs",
+    "paths": {
+      "@libraries/*": ["../../libraries/*"]
+    }
+  },
+  "exclude": ["node_modules"]
+}

packages/core-js/lib/core.js

@@ -1,13 +0,0 @@
-'use strict';
-
-module.exports = coreJs; // eslint-disable-line
-
-function coreJs() {
-    global.core = require('./header'); // eslint-disable-line
-    require('./Functions'); // eslint-disable-line
-    require('./Utils'); // eslint-disable-line
-    global.Options = require('@wisemapping/mindplot/lib/components/Options');
-    global.BootstrapDialog = require('@wisemapping/mindplot/lib/components/libraries/bootstrap/BootstrapDialog');
-    require('@wisemapping/mindplot/lib/components/libraries/bootstrap/BootstrapDialog.Request');
-    return global.core; // eslint-disable-line no-undef
-}

packages/core-js/package.json

@@ -1,15 +1,15 @@
 {
-    "name": "@wismapping/core-js",
+    "name": "@wisemapping/core-js",
     "version": "0.0.1",
     "description": "core-js",
     "license": "ISC",
-    "main": "lib/core.js",
+    "main": "dist/core.js",
     "directories": {
-        "lib": "lib",
+        "lib": "src",
         "test": "__tests__"
     },
     "files": [
-        "lib"
+        "src"
     ],
     "publishConfig": {
         "registry": "https://registry.yarnpkg.com"
@@ -20,7 +20,7 @@
     },
     "scripts": {
         "build": "webpack --config webpack.prod.js",
-        "dev": "webpack --mode development"
+        "dev": "webpack --mode development --config webpack.dev.js"
     },
     "devDependencies": {
         "@babel/core": "^7.14.6",
@@ -32,7 +32,5 @@
         "webpack-cli": "^4.7.2",
         "webpack-merge": "^5.8.0"
     },
-    "dependencies": {
+    "dependencies": {}
-        "@wisemapping/mindplot": "^0.0.1"
-    }
 }

packages/core-js/src/Functions.js

@@ -6,12 +6,11 @@
  obj - object to inspect
  */
 
-global.$defined = function (obj) {
+export const $defined = function (obj) {
-    return (obj != undefined);
+    return obj != undefined;
 };
 
-
+export const $assert = function (assert, message) {
-global.$assert = function (assert, message) {
     if (!$defined(assert) || !assert) {
         logStackTrace();
         console.log(message);
@@ -19,32 +18,33 @@ global.$assert = function (assert, message) {
     }
 };
 
-Math.sign = function (value) {
+export const sign = function (value) {
-    return (value >= 0) ? 1 : -1;
+    return value >= 0 ? 1 : -1;
 };
 
-function logStackTrace(exception) {
+export function logStackTrace(exception) {
-
     if (!$defined(exception)) {
         try {
-            throw Error("Unexpected Exception");
+            throw Error('Unexpected Exception');
         } catch (e) {
             exception = e;
         }
     }
-    var result = "";
+    var result = '';
-    if (exception.stack) { //Firefox  and Chrome...
+    if (exception.stack) {
+        //Firefox  and Chrome...
         result = exception.stack;
-    }
+    } else if (window.opera && exception.message) {
-    else if (window.opera && exception.message) { //Opera
+        //Opera
         result = exception.message;
-    } else {  //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;
         while (currentFunction) {
             var fn = currentFunction.toString();
-            result = result + "\n" + fn;
+            result = result + '\n' + fn;
             currentFunction = currentFunction.caller;
         }
     }

packages/core-js/src/Utils.js

@@ -16,9 +16,7 @@
  *   limitations under the License.
  */
 
-core.Utils = {};
+export const innerXML = function (node) {
-
-core.Utils.innerXML = function (node) {
     //	summary:
     //		Implementation of MS's innerXML function.
     if ($defined(node.innerXML)) {
@@ -36,7 +34,7 @@ core.Utils.innerXML = function (node) {
 /**
  * Cross-browser implementation of creating an XML document object.
  */
-core.Utils.createDocument = function () {
+export const createDocument = function () {
     var doc = null;
     if ($defined(window.ActiveXObject)) {
         //http://blogs.msdn.com/b/xmlteam/archive/2006/10/23/using-the-right-version-of-msxml-in-internet-explorer.aspx
@@ -54,4 +52,3 @@ core.Utils.createDocument = function () {
 
     return doc;
 };
-

packages/core-js/src/core.js

@@ -0,0 +1,18 @@
+import * as Functions from './Functions';
+import * as Util from './Utils';
+
+export const Function = Functions;
+export const Utils = Util;
+
+function coreJs() {
+    global.core = {
+        Function,
+        Utils
+    };
+    Math.sign = Function.sign;
+    global.$assert = Function.$assert;
+    global.$defined = Function.$defined;
+    return global.core;
+}
+
+export default coreJs;

packages/core-js/webpack.common.js

@@ -2,11 +2,14 @@ const path = require('path');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 module.exports = {
-    entry: './lib/core.js',
+    entry: './src/core.js',
     output: {
         path: path.resolve(__dirname, 'dist'),
         filename: 'core.js',
         publicPath: '',
+        library: {
+            type: 'umd',
+        },
     },
     target: 'web',
     module: {
@@ -14,11 +17,18 @@ module.exports = {
             {
                 use: 'babel-loader',
                 test: /.js$/,
-                exclude: /node_modules/,
+                exclude: [
-            }
+                    /node_modules/,
+                    path.resolve(__dirname, '../../libraries/mootools-core-1.4.5'),
+                    path.resolve(__dirname, '../../libraries/underscore-min'),
+                ]
+            },
         ],
     },
     resolve: {
+        alias: {
+            '@libraries': path.resolve(__dirname, '../../libraries/'),
+        },
         extensions: ['.js'],
     },
     plugins: [new CleanWebpackPlugin()],

packages/editor/package.json

@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@types/styled-components": "^5.1.4",
-    "@wismapping/core-js": "^0.0.1",
+    "@wisemapping/core-js": "^0.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "styled-components": "^5.2.1"

packages/mindplot/.eslintignore

@@ -0,0 +1,2 @@
+dist/
+node_modules/

packages/mindplot/.eslintrc.json

@@ -4,10 +4,28 @@
         "commonjs": true
     },
     "extends": [
-        "airbnb-base"
+        "airbnb-base",
+        "plugin:cypress/recommended"
     ],
+    "globals":{
+        "Class": "readonly",
+        "$": "readonly",
+        "$assert": "readonly",
+        "$defined": "readonly",
+        "$msg": "readonly",
+        "$notify": "readonly",
+        "_": "readonly"
+    },
     "plugins": ["only-warn"],
     "rules": {
-        "no-underscore-dangle": "off"
+        "no-underscore-dangle": "off",
-    }
+        "import/no-extraneous-dependencies": ["error", {"devDependencies": ["!cypress/**/*.js"]}]
+    },
+    "settings": {
+		    "import/resolver": {
+			    "webpack": {
+				    "config": "./webpack.common.js"
+			    }
+		    }
+	  }
 }

packages/mindplot/.gitignore

@@ -0,0 +1,4 @@
+cypress/screenshots
+cypress/videos
+cypress/downloads
+cypress/snapshots/*/__diff_output__

packages/mindplot/README.md

@@ -38,6 +38,6 @@ once this is done, it will open the explorer where you can see a menu with the t
 To start using mindplot it has to be required as a module and then intanciarce as a function
 
 ```
-const mindplot = require('@wisemapping/mindplot');
+import mindplot from '@wisemapping/mindplot';
 mindplot();
 ```

packages/mindplot/__tests__/mindplot.test.js

@@ -1,7 +1,5 @@
-'use strict';
+import mindplot from '..';
-
-const mindplot = require('..');
 
 describe('mindplot', () => {
-    it('needs tests');
+  it('needs tests');
 });

packages/mindplot/babel.config.json

@@ -13,5 +13,6 @@
                 }
             }
         ]
-    ]
+    ],
+    "sourceType": "unambiguous"
 }

packages/mindplot/cypress.json

@@ -0,0 +1,4 @@
+{
+    "video": false,
+    "videoUploadOnPasses": false
+}

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

@@ -0,0 +1,17 @@
+const BASE_URL = 'http://localhost:8081';
+
+context('Playground', () => {
+  it('the playground layout page should match its snapshot', () => {
+    // TODO: check why this error is happening, and remove this handling
+    cy.on('uncaught:exception', (err) => {
+      expect(err.message).to.include('Prediction is incorrectly positioned');
+      return false;
+    });
+    cy.visit(`${BASE_URL}/layout.html`);
+    cy.matchImageSnapshot('layout');
+  });
+  it('the playground viewmode.html page should match its snapshot', () => {
+    cy.visit(`${BASE_URL}/viewmode.html`);
+    cy.matchImageSnapshot('viewmode');
+  });
+});

packages/mindplot/cypress/plugins/index.js

@@ -0,0 +1,24 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+  addMatchImageSnapshotPlugin(on, config);
+};

packages/mindplot/cypress/support/commands.js

@@ -0,0 +1,29 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
+
+addMatchImageSnapshotCommand();

packages/mindplot/cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

packages/mindplot/jsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "module": "commonjs",
+    "paths": {
+      "@libraries/*": ["../../libraries/*"],
+      "@commands/*": ["./src/components/commands/*"],
+      "@layout/*": ["./src/components/layout/*"],
+      "@libs/*": ["./src/components/libraries/*"],
+      "@model/*": ["./src/components/model/*"],
+      "@persistence/*": ["./src/components/persistence/*"],
+      "@util/*": ["./src/components/util/*"],
+      "@widget/*": ["./src/components/widget/*"],
+      "@components/*": ["./src/components/*"]
+    }
+  },
+  "exclude": ["node_modules"]
+}

packages/mindplot/lib/components/IconGroup.js

@@ -1,337 +0,0 @@
-/*
- *    Copyright [2015] [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.
- */
-const web2D = require('@wismapping/web2d');
-
-const web2d = web2D();
-const Icon = require('./Icon');
-
-const IconGroup = new Class(/** @lends IconGroup */{
-  /**
-     * @constructs
-     * @param topicId
-     * @param iconSize
-     * @throws will throw an error if topicId is null or undefined
-     * @throws will throw an error if iconSize is null or undefined
-     */
-  initialize(topicId, iconSize) {
-    $assert($defined(topicId), 'topicId can not be null');
-    $assert($defined(iconSize), 'iconSize can not be null');
-
-    this._icons = [];
-    this._group = new web2d.Group({
-      width: 0,
-      height: iconSize,
-      x: 0,
-      y: 0,
-      coordSizeWidth: 0,
-      coordSizeHeight: 100,
-    });
-    this._removeTip = new IconGroup.RemoveTip(this._group, topicId);
-    this.seIconSize(iconSize, iconSize);
-
-    this._registerListeners();
-  },
-
-  /** */
-  setPosition(x, y) {
-    this._group.setPosition(x, y);
-  },
-
-  /** */
-  getPosition() {
-    return this._group.getPosition();
-  },
-
-  /** */
-  getNativeElement() {
-    return this._group;
-  },
-
-  /** */
-  getSize() {
-    return this._group.getSize();
-  },
-
-  /** */
-  seIconSize(width, height) {
-    this._iconSize = { width, height };
-    this._resize(this._icons.length);
-  },
-
-  /**
-     * @param icon the icon to be added to the icon group
-     * @param {Boolean} remove
-     * @throws will throw an error if icon is not defined
-     */
-  addIcon(icon, remove) {
-    $defined(icon, 'icon is not defined');
-
-    icon.setGroup(this);
-    this._icons.push(icon);
-
-    // Adjust group and position ...
-    this._resize(this._icons.length);
-    this._positionIcon(icon, this._icons.length - 1);
-
-    const imageShape = icon.getImage();
-    this._group.append(imageShape);
-
-    // Register event for the group ..
-    if (remove) {
-      this._removeTip.decorate(this._topicId, icon);
-    }
-  },
-
-  _findIconFromModel(iconModel) {
-    let result = null;
-    _.each(this._icons, (icon) => {
-      const elModel = icon.getModel();
-      if (elModel.getId() == iconModel.getId()) {
-        result = icon;
-      }
-    }, this);
-
-    if (result == null) {
-      throw new Error(`Icon can no be found:${iconModel.getId()}, Icons:${this._icons}`);
-    }
-
-    return result;
-  },
-
-  /** */
-  removeIconByModel(featureModel) {
-    $assert(featureModel, 'featureModel can not be null');
-
-    const icon = this._findIconFromModel(featureModel);
-    this._removeIcon(icon);
-  },
-
-  _removeIcon(icon) {
-    $assert(icon, 'icon can not be null');
-
-    this._removeTip.close(0);
-    this._group.removeChild(icon.getImage());
-
-    this._icons.erase(icon);
-    this._resize(this._icons.length);
-    const me = this;
-    // Add all again ...
-    _.each(this._icons, (elem, i) => {
-      me._positionIcon(elem, i);
-    });
-  },
-
-  /** */
-  moveToFront() {
-    this._group.moveToFront();
-  },
-
-  _registerListeners() {
-    this._group.addEvent('click', (event) => {
-      // Avoid node creation ...
-      event.stopPropagation();
-    });
-
-    this._group.addEvent('dblclick', (event) => {
-      event.stopPropagation();
-    });
-  },
-
-  _resize(iconsLength) {
-    this._group.setSize(iconsLength * this._iconSize.width, this._iconSize.height);
-
-    const iconSize = Icon.SIZE + (IconGroup.ICON_PADDING * 2);
-    this._group.setCoordSize(iconsLength * iconSize, iconSize);
-  },
-
-  _positionIcon(icon, order) {
-    const iconSize = Icon.SIZE + (IconGroup.ICON_PADDING * 2);
-    icon.getImage().setPosition(iconSize * order + IconGroup.ICON_PADDING, IconGroup.ICON_PADDING);
-  },
-});
-
-/**
- * @constant
- * @type {Number}
- * @default
- */
-IconGroup.ICON_PADDING = 5;
-
-IconGroup.RemoveTip = new Class(/** @lends IconGroup.RemoveTip */{
-  /**
-     * @classdesc inner class of IconGroup
-     * @constructs
-     * @param container
-     */
-  initialize(container) {
-    $assert(container, 'group can not be null');
-    this._fadeElem = container;
-  },
-
-  /**
-     * @param topicId
-     * @param icon
-     * @throws will throw an error if icon is null or undefined
-     */
-  show(topicId, icon) {
-    $assert(icon, 'icon can not be null');
-
-    // Nothing to do ...
-    if (this._activeIcon != icon) {
-      // If there is an active icon, close it first ...
-      if (this._activeIcon) {
-        this.close(0);
-      }
-
-      // Now, let move the position the icon...
-      const pos = icon.getPosition();
-
-      // Register events ...
-      const widget = this._buildWeb2d();
-      widget.addEvent('click', () => {
-        icon.remove();
-      });
-
-      const me = this;
-
-      widget.addEvent('mouseover', () => {
-        me.show(topicId, icon);
-      });
-
-      widget.addEvent('mouseout', () => {
-        me.hide();
-      });
-
-      widget.setPosition(pos.x + 80, pos.y - 50);
-      this._fadeElem.append(widget);
-
-      // Setup current element ...
-      this._activeIcon = icon;
-      this._widget = widget;
-    } else {
-      clearTimeout(this._closeTimeoutId);
-    }
-  },
-
-  /** */
-  hide() {
-    this.close(200);
-  },
-
-  /**
-     * @param delay
-     */
-  close(delay) {
-    // This is not ok, trying to close the same dialog twice ?
-    if (this._closeTimeoutId) {
-      clearTimeout(this._closeTimeoutId);
-    }
-
-    const me = this;
-    if (this._activeIcon) {
-      const widget = this._widget;
-      const close = function () {
-        me._activeIcon = null;
-        me._fadeElem.removeChild(widget);
-        me._widget = null;
-        me._closeTimeoutId = null;
-      };
-
-      if (!$defined(delay) || delay == 0) {
-        close();
-      } else {
-        this._closeTimeoutId = close.delay(delay);
-      }
-    }
-  },
-
-  _buildWeb2d() {
-    const result = new web2d.Group({
-      width: 10,
-      height: 10,
-      x: 0,
-      y: 0,
-      coordSizeWidth: 10,
-      coordSizeHeight: 10,
-    });
-
-    const outerRect = new web2d.Rect(0, {
-      x: 0,
-      y: 0,
-      width: 10,
-      height: 10,
-      stroke: '0',
-      fillColor: 'black',
-    });
-    result.append(outerRect);
-    outerRect.setCursor('pointer');
-
-    const innerRect = new web2d.Rect(0, {
-      x: 1,
-      y: 1,
-      width: 8,
-      height: 8,
-      stroke: '1 solid white',
-      fillColor: 'gray',
-    });
-    result.append(innerRect);
-
-    const line = new web2d.Line({ stroke: '1 solid white' });
-    line.setFrom(1, 1);
-    line.setTo(9, 9);
-    result.append(line);
-
-    const line2 = new web2d.Line({ stroke: '1 solid white' });
-    line2.setFrom(1, 9);
-    line2.setTo(9, 1);
-    result.append(line2);
-
-    // Some events ...
-    result.addEvent('mouseover', () => {
-      innerRect.setFill('#CC0033');
-    });
-    result.addEvent('mouseout', () => {
-      innerRect.setFill('gray');
-    });
-
-    result.setSize(50, 50);
-    return result;
-  },
-
-  /**
-     * @param topicId
-     * @param icon
-     */
-  decorate(topicId, icon) {
-    const me = this;
-
-    if (!icon.__remove) {
-      icon.addEvent('mouseover', () => {
-        me.show(topicId, icon);
-      });
-
-      icon.addEvent('mouseout', () => {
-        me.hide();
-      });
-      icon.__remove = true;
-    }
-  },
-
-});
-
-export default IconGroup;

packages/mindplot/lib/components/MainTopic.js

@@ -1,170 +0,0 @@
-/*
- *    Copyright [2015] [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.
- */
-const Core = require('@wismapping/core-js');
-
-const core = Core();
-const web2D = require('@wismapping/web2d');
-
-const web2d = web2D();
-
-const Topic = require('./Topic').default;
-const { TopicShape } = require('./model/INodeModel');
-const Shape = require('./util/Shape').default;
-
-const MainTopic = new Class(/** @lends MainTopic */ {
-  Extends: Topic,
-  /**
-         * @extends mindplot.Topic
-         * @constructs
-         * @param model
-         * @param options
-         */
-  initialize(model, options) {
-    this.parent(model, options);
-  },
-
-  INNER_RECT_ATTRIBUTES: { stroke: '0.5 solid #009900' },
-
-  _buildDragShape() {
-    const innerShape = this._buildShape(this.INNER_RECT_ATTRIBUTES, this.getShapeType());
-    const size = this.getSize();
-    innerShape.setSize(size.width, size.height);
-    innerShape.setPosition(0, 0);
-    innerShape.setOpacity(0.5);
-    innerShape.setCursor('default');
-    innerShape.setVisibility(true);
-
-    const brColor = this.getBorderColor();
-    innerShape.setAttribute('strokeColor', brColor);
-
-    const bgColor = this.getBackgroundColor();
-    innerShape.setAttribute('fillColor', bgColor);
-
-    //  Create group ...
-    const groupAttributes = {
-      width: 100,
-      height: 100,
-      coordSizeWidth: 100,
-      coordSizeHeight: 100,
-    };
-    const group = new web2d.Group(groupAttributes);
-    group.append(innerShape);
-
-    // Add Text ...
-    if (this.getShapeType() != TopicShape.IMAGE) {
-      const textShape = this._buildTextShape(true);
-      const text = this.getText();
-      textShape.setText(text);
-      textShape.setOpacity(0.5);
-      group.append(textShape);
-    }
-    return group;
-  },
-
-  /** */
-  updateTopicShape(targetTopic, workspace) {
-    // Change figure based on the connected topic ...
-    const model = this.getModel();
-    let shapeType = model.getShapeType();
-    if (!targetTopic.isCentralTopic()) {
-      if (!$defined(shapeType)) {
-        // Get the real shape type ...
-        shapeType = this.getShapeType();
-        this._setShapeType(shapeType, false);
-      }
-    }
-  },
-
-  /** */
-  disconnect(workspace) {
-    this.parent(workspace);
-    const size = this.getSize();
-
-    const model = this.getModel();
-    let shapeType = model.getShapeType();
-    if (!$defined(shapeType)) {
-      // Change figure ...
-      shapeType = this.getShapeType();
-      this._setShapeType(TopicShape.ROUNDED_RECT, false);
-    }
-    const innerShape = this.getInnerShape();
-    innerShape.setVisibility(true);
-  },
-
-  _updatePositionOnChangeSize(oldSize, newSize) {
-    const xOffset = Math.round((newSize.width - oldSize.width) / 2);
-    const pos = this.getPosition();
-    if ($defined(pos)) {
-      if (pos.x > 0) {
-        pos.x += xOffset;
-      } else {
-        pos.x -= xOffset;
-      }
-      this.setPosition(pos);
-    }
-  },
-
-  /** */
-  workoutIncomingConnectionPoint(sourcePosition) {
-    return Shape.workoutIncomingConnectionPoint(this, sourcePosition);
-  },
-
-  /** */
-  workoutOutgoingConnectionPoint(targetPosition) {
-    $assert(targetPosition, 'targetPoint can not be null');
-    const pos = this.getPosition();
-    const isAtRight = Shape.isAtRight(targetPosition, pos);
-    const size = this.getSize();
-
-    let result;
-    if (this.getShapeType() == TopicShape.LINE) {
-      result = new core.Point();
-      const groupPosition = this._elem2d.getPosition();
-      const innerShareSize = this.getInnerShape().getSize();
-
-      if (innerShareSize) {
-        const magicCorrectionNumber = 0.3;
-        if (!isAtRight) {
-          result.x = groupPosition.x + innerShareSize.width - magicCorrectionNumber;
-        } else {
-          result.x = groupPosition.x + magicCorrectionNumber;
-        }
-        result.y = groupPosition.y + innerShareSize.height;
-      } else {
-        // Hack: When the size has not being defined. This is because the node has not being added.
-        // Try to do our best ...
-        if (!isAtRight) {
-          result.x = pos.x + size.width / 2;
-        } else {
-          result.x = pos.x - size.width / 2;
-        }
-        result.y = pos.y + size.height / 2;
-      }
-    } else {
-      result = Shape.calculateRectConnectionPoint(
-        pos,
-        size,
-        isAtRight,
-        true,
-      );
-    }
-    return result;
-  },
-});
-
-export default MainTopic;

packages/mindplot/lib/components/commands/AddFeatureToTopicCommand.js

@@ -1,68 +0,0 @@
-/*
- *    Copyright [2015] [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.
- */
-const Command = require('../Command').default;
-
-const AddFeatureToTopicCommand = new Class(/** @lends AddFeatureToTopicCommand */{
-  Extends: Command,
-  /**
-     * @classdesc This command class handles do/undo of adding features to topics, e.g. an
-     * icon or a note. For a reference of existing features, refer to {@link mindplot.TopicFeature}
-     * @constructs
-     * @param {String} topicId the id of the topic
-     * @param {String} featureType the id of the feature type to add, e.g. "icon"
-     * @param {Object} attributes the attribute(s) of the respective feature model
-     * @extends mindplot.Command
-     * @see mindplot.model.FeatureModel and subclasses
-     */
-  initialize(topicId, featureType, attributes) {
-    $assert($defined(topicId), 'topicId can not be null');
-    $assert(featureType, 'featureType can not be null');
-    $assert(attributes, 'attributes can not be null');
-
-    this.parent();
-    this._topicId = topicId;
-    this._featureType = featureType;
-    this._attributes = attributes;
-    this._featureModel = null;
-  },
-
-  /**
-     * Overrides abstract parent method
-     */
-  execute(commandContext) {
-    const topic = commandContext.findTopics(this._topicId)[0];
-
-    // Feature must be created only one time.
-    if (!this._featureModel) {
-      const model = topic.getModel();
-      this._featureModel = model.createFeature(this._featureType, this._attributes);
-    }
-    topic.addFeature(this._featureModel);
-  },
-
-  /**
-     * Overrides abstract parent method
-     * @see {@link mindplot.Command.undoExecute}
-     */
-  undoExecute(commandContext) {
-    const topic = commandContext.findTopics(this._topicId)[0];
-    topic.removeFeature(this._featureModel);
-  },
-});
-
-export default AddFeatureToTopicCommand;

packages/mindplot/lib/components/commands/index.js

@@ -1,21 +0,0 @@
-const addFeatureToTopicCommand = require('./AddFeatureToTopicCommand').default;
-const addRelationshipCommand = require('./AddRelationshipCommand').default;
-const addTopicCommand = require('./AddTopicCommand').default;
-const changeFeatureToTopicCommand = require('./ChangeFeatureToTopicCommand').default;
-const deleteCommand = require('./DeleteCommand').default;
-const dragTopicCommand = require('./DragTopicCommand').default;
-const genericFunctionCommand = require('./GenericFunctionCommand').default;
-const moveControlPointCommand = require('./MoveControlPointCommand').default;
-const removeFeatureFromTopicCommand = require('./RemoveFeatureFromTopicCommand').default;
-
-export const Commands = {
-  AddFeatureToTopicCommand: addFeatureToTopicCommand,
-  AddRelationshipCommand: addRelationshipCommand,
-  AddTopicCommand: addTopicCommand,
-  ChangeFeatureToTopicCommand: changeFeatureToTopicCommand,
-  DeleteCommand: deleteCommand,
-  DragTopicCommand: dragTopicCommand,
-  GenericFunctionCommand: genericFunctionCommand,
-  MoveControlPointCommand: moveControlPointCommand,
-  RemoveFeatureFromTopicCommand: removeFeatureFromTopicCommand,
-};

packages/mindplot/lib/components/index.js

@@ -1,108 +0,0 @@
-const actionDispatcher = require('./ActionDispatcher').default;
-const actionIcon = require('./ActionIcon').default;
-const centralTopic = require('./CentralTopic').default;
-const command = require('./Command').default;
-const connectionLine = require('./ConnectionLine').default;
-const controlPoint = require('./ControlPoint').default;
-const designer = require('./Designer').default;
-const designerActionRunner = require('./DesignerActionRunner').default;
-const designerKeyboard = require('./DesignerKeyboard').default;
-const designerModal = require('./DesignerModel').default;
-const designerUndoManager = require('./DesignerUndoManager').default;
-const dragConnector = require('./DragConnector').default;
-const dragManager = require('./DragManager').default;
-const dragPivot = require('./DragPivot').default;
-const dragTopic = require('./DragTopic').default;
-const editorOptions = require('./EditorOptions').default;
-const editorProperties = require('./EditorProperties').default;
-const events = require('./Events').default;
-const footer = require('./footer');
-const header = require('./header');
-const icon = require('./Icon').default;
-const iconGroup = require('./IconGroup').default;
-const imageIcon = require('./ImageIcon').default;
-const keyboard = require('./Keyboard').default;
-const linkIcon = require('./LinkIcon').default;
-const localSorageManager = require('./LocalStorageManager').default;
-const mainTopic = require('./MainTopic').default;
-const messages = require('./Messages').default;
-const multilineTextEditor = require('./MultilineTextEditor').default;
-const nodeGraph = require('./NodeGraph').default;
-const noteIcon = require('./NoteIcon').default;
-const options = require('./Options').default;
-
-const persistenceManager = require('./PersistenceManager').default;
-const relationship = require('./Relationship').default;
-const relationshipPivot = require('./RelationshipPivot').default;
-const resetPersistenceManager = require('./RestPersistenceManager').default;
-
-const screenManager = require('./ScreenManager').default;
-const shrinkConnector = require('./ShrinkConnector').default;
-const standaloneActionDispatcher = require('./StandaloneActionDispatcher').default;
-const textEditor = require('./TextEditor').default;
-
-const textEditorFactory = require('./TextEditorFactory').default;
-
-const topic = require('./Topic').default;
-const topicEventDispatcher = require('./TopicEventDispatcher').default;
-const topicFeature = require('./TopicFeature').default;
-const topicStyle = require('./TopicStyle').default;
-const workspace = require('./Workspace').default;
-
-export const Components = {
-  ActionDispatcher: actionDispatcher,
-
-  ActionIcon: actionIcon,
-  CentralTopic: centralTopic,
-  Command: command,
-  ConnectionLine: connectionLine,
-  ControlPoint: controlPoint,
-  Designer: designer,
-
-  DesignerActionRunner: designerActionRunner,
-  DesignerKeyboard: designerKeyboard,
-  DesignerModel: designerModal,
-  DesignerUndoManager: designerUndoManager,
-
-  DragConnector: dragConnector,
-  DragManager: dragManager,
-  DragPivot: dragPivot,
-  DragTopic: dragTopic,
-  EditorOptions: editorOptions,
-  EditorProperties: editorProperties,
-  Events: events,
-
-  footer,
-  header,
-
-  Icon: icon,
-  IconGroup: iconGroup,
-  ImageIcon: imageIcon,
-  Keyboard: keyboard,
-  LinkIcon: linkIcon,
-
-  localSorageManager,
-  MainTopic: mainTopic,
-
-  Messages: messages,
-  MultilineTextEditor: multilineTextEditor,
-  NodeGraph: nodeGraph,
-  NoteIcon: noteIcon,
-  Options: options,
-
-  PersistenceManager: persistenceManager,
-  Relationship: relationship,
-  RelationshipPivot: relationshipPivot,
-  RestPersistenceManager: resetPersistenceManager,
-  ScreenManager: screenManager,
-  ShrinkConnector: shrinkConnector,
-  StandaloneActionDispatcher: standaloneActionDispatcher,
-  TextEditor: textEditor,
-  TextEditorFactory: textEditorFactory,
-
-  Topic: topic,
-  TopicEventDispatcher: topicEventDispatcher,
-  TopicFeature: topicFeature,
-  TopicStyle: topicStyle,
-  Workspace: workspace,
-};

packages/mindplot/lib/components/layout/index.js

@@ -1,27 +0,0 @@
-const abstractBasicSorter = require('./AbstractBasicSorter').default;
-const balancedSorter = require('./BalancedSorter').default;
-const changeEvent = require('./ChangeEvent').default;
-const childrenSorterStrategy = require('./ChildrenSorterStrategy').default;
-const eventBus = require('./EventBus').default;
-const eventBusDispatcher = require('./EventBusDispatcher').default;
-const gridSorter = require('./GridSorter').default;
-const layoutManager = require('./LayoutManager').default;
-const node = require('./Node').default;
-const originalLayout = require('./OriginalLayout').default;
-const rootedTreeSet = require('./RootedTreeSet').default;
-const symmetricSorter = require('./SymmetricSorter').default;
-
-export const Layout = {
-  AbstractBasicSorter: abstractBasicSorter,
-  BalancedSorter: balancedSorter,
-  ChangeEvent: changeEvent,
-  ChildrenSorterStrategy: childrenSorterStrategy,
-  EventBus: eventBus,
-  EventBusDispatcher: eventBusDispatcher,
-  GridSorter: gridSorter,
-  LayoutManager: layoutManager,
-  Node: node,
-  OriginalLayout: originalLayout,
-  RootedTreeSet: rootedTreeSet,
-  SymmetricSorter: symmetricSorter,
-};

packages/mindplot/lib/components/model/index.js

@@ -1,21 +0,0 @@
-const featureModel = require('./FeatureModel').default;
-const iconModel = require('./IconModel').default;
-const iMindmap = require('./IMindmap').default;
-const iNodeModel = require('./INodeModel').default;
-const linkModel = require('./LinkModel').default;
-const noteModel = require('./NoteModel').default;
-const mindmap = require('./Mindmap').default;
-const nodeModel = require('./NodeModel').default;
-const relationshipModel = require('./RelationshipModel').default;
-
-export const Model = {
-  FeatureModel: featureModel,
-  IconModel: iconModel,
-  IMindmap: iMindmap,
-  INodeModel: iNodeModel,
-  LinkModel: linkModel,
-  NoteModel: noteModel,
-  Mindmap: mindmap,
-  NodeModel: nodeModel,
-  RelationshipModel: relationshipModel,
-};

packages/mindplot/lib/components/persistence/index.js

@@ -1,17 +0,0 @@
-const beta2PelaMigrator = require('./Beta2PelaMigrator').default;
-const modelCodeName = require('./ModelCodeName').default;
-const pela2TangoMigrator = require('./Pela2TangoMigrator').default;
-const xmlSerializer_Beta = require('./XMLSerializer_Beta').default;
-const xmlSerializer_Pela = require('./XMLSerializer_Pela').default;
-const xmlSerializer_Tango = require('./XMLSerializer_Tango').default;
-const xmlSerializerFactory = require('./XMLSerializerFactory').default;
-
-export const Persistence = {
-  Beta2PelaMigrator: beta2PelaMigrator,
-  ModelCodeName: modelCodeName,
-  Pela2TangoMigrator: pela2TangoMigrator,
-  XMLSerializer_Beta: xmlSerializer_Beta,
-  XMLSerializer_Pela: xmlSerializer_Pela,
-  XMLSerializer_Tango: xmlSerializer_Tango,
-  XMLSerializerFactory: xmlSerializerFactory,
-};

packages/mindplot/lib/components/util/index.js

@@ -1,7 +0,0 @@
-const fadeEffect = require('./FadeEffect').default;
-const shape = require('./Shape').default;
-
-export const Utils = {
-  FadeEffect: fadeEffect,
-  Shape: shape,
-};

packages/mindplot/lib/components/widget/index.js

@@ -1,37 +0,0 @@
-const colorPalettePanel = require('./ColorPalettePanel').default;
-const floatingTip = require('./FloatingTip').default;
-const fontFamilyPanel = require('./FontFamilyPanel').default;
-const fontSizePanel = require('./FontSizePanel').default;
-const iconPanel = require('./IconPanel').default;
-const iMenu = require('./IMenu').default;
-const keyboardShortcutTooltip = require('./KeyboardShortcutTooltip').default;
-const linkEditor = require('./LinkEditor').default;
-const linkIconTooltip = require('./LinkIconTooltip').default;
-const listToolbarPanel = require('./ListToolbarPanel').default;
-const menu = require('./Menu').default;
-const modalDialogNotifier = require('./ModalDialogNotifier').default;
-const noteEditor = require('./NoteEditor').default;
-const toolbarItem = require('./ToolbarItem').default;
-const toolbarNotifier = require('./ToolbarNotifier').default;
-const toolbarPanelItem = require('./ToolbarPaneItem').default;
-const topicShapePanel = require('./TopicShapePanel').default;
-
-export const Widgets = {
-  ColorPalettePanel: colorPalettePanel,
-  FloatingTip: floatingTip,
-  FontFamilyPanel: fontFamilyPanel,
-  FontSizePanel: fontSizePanel,
-  IconPanel: iconPanel,
-  IMenu: iMenu,
-  KeyboardShortcutTooltip: keyboardShortcutTooltip,
-  LinkEditor: linkEditor,
-  LinkIconTooltip: linkIconTooltip,
-  ListToolbarPanel: listToolbarPanel,
-  Menu: menu,
-  ModalDialogNotifier: modalDialogNotifier,
-  NoteEditor: noteEditor,
-  ToolbarItem: toolbarItem,
-  ToolbarNotifier: toolbarNotifier,
-  ToolbarPaneItem: toolbarPanelItem,
-  TopicShapePanel: topicShapePanel,
-};

packages/mindplot/lib/mindplot.js

@@ -1,56 +0,0 @@
-module.exports = mindplot; //eslint-disable-line
-
-function mindplot() {
-  // Jquery for mindplot and bootstrap
-  global.$ = require('jquery');
-  global.jQuery = require('jquery');
-
-  // Mootools for the classes of Mindplot
-  require('mootools');
-
-  // Underscore handling common tasks
-  global._ = require('underscore');
-
-  // Core-js packages of Wisemapping
-  global.core = require('@wismapping/core-js');
-
-  define(['raphael'], (Raphael) => {
-    global.Raphael = Raphael;
-  });
-  require('../test/playground/lib/raphael-plugins');
-
-  // Bootsrap for styles
-  require('./components/libraries/bootstrap/js/bootstrap.min');
-
-  /* * * * * * * *
-     *   MINDPLOT  *
-     * * * * * * * */
-
-  // Commands
-  const { Commands } = require('./components/commands');
-
-  // Layout
-  const { Layout } = require('./components/layout');
-
-  // Model
-
-  const { Model } = require('./components/model');
-
-  // Persistence
-  const { Persistence } = require('./components/persistence');
-
-  // Widgets
-  const { Widgets } = require('./components/widget');
-
-  // Components
-  const { Components } = require('./components');
-
-  return {
-    commands: Commands,
-    layout: Layout,
-    models: Model,
-    persistence: Persistence,
-    widget: Widgets,
-    component: Components,
-  };
-}

packages/mindplot/package.json

@@ -2,15 +2,15 @@
     "name": "@wisemapping/mindplot",
     "version": "0.0.1",
     "description": "mindplot",
-    "homepage": "http://localhost:8080/react/packages/mindplot",
+    "homepage": "http://localhost:8081/react/packages/mindplot",
     "license": "ISC",
-    "main": "lib/mindplot.js",
+    "main": "dist/main.js",
     "directories": {
-        "lib": "lib",
+        "lib": "src",
         "test": "__tests__"
     },
     "files": [
-        "lib"
+        "src"
     ],
     "publishConfig": {
         "registry": "https://registry.yarnpkg.com"
@@ -22,14 +22,18 @@
     "scripts": {
         "build": "webpack --config webpack.prod.js",
         "dev": "webpack serve --config webpack.dev.js",
-        "playground": "webpack serve --config webpack.playground.js"
+        "lint": "eslint src",
+        "playground": "webpack serve --config webpack.playground.js",
+        "cy:run": "cypress run",
+        "cy:run:update": "cypress run --env updateSnapshots=true",
+        "test:snapshots": "start-server-and-test playground http-get://localhost:8081 cy:run",
+        "test:snapshots:update": "start-server-and-test playground http-get://localhost:8081 cy:run:update"
     },
     "dependencies": {
-        "@wismapping/core-js": "^0.0.1",
+        "@wisemapping/core-js": "^0.0.1",
-        "@wismapping/web2d": "^0.0.1",
+        "@wisemapping/web2d": "^0.0.1",
         "jquery": "2.1.0",
         "mootools": "1.4.5",
-        "raphael": "^2.3.0",
         "underscore": "^1.13.1"
     },
     "devDependencies": {
@@ -38,15 +42,20 @@
         "@babel/preset-env": "^7.14.7",
         "babel-loader": "^8.2.2",
         "clean-webpack-plugin": "^4.0.0-alpha.0",
+        "copy-webpack-plugin": "^10.0.0",
         "core-js": "^3.15.2",
+        "cypress": "^8.6.0",
+        "cypress-image-snapshot": "^4.0.1",
         "eslint": "^5.16.0",
         "eslint-config-airbnb-base": "^14.2.1",
         "eslint-config-standard": "^16.0.3",
         "eslint-loader": "^4.0.2",
+        "eslint-plugin-cypress": "^2.12.1",
         "eslint-plugin-import": "^2.24.2",
         "eslint-plugin-only-warn": "^1.0.3",
         "html-webpack-plugin": "^5.3.2",
         "nodemon": "^2.0.12",
+        "start-server-and-test": "^1.14.0",
         "webpack": "^5.44.0",
         "webpack-cli": "^4.7.2",
         "webpack-dev-server": "^3.11.2",

packages/mindplot/src/components/ActionDispatcher.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 /*
  *    Copyright [2015] [wisemapping]
  *
@@ -15,7 +16,7 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Events = require('./Events').default;
+import Events from './Events';
 
 // noinspection JSUnusedLocalSymbols
 const ActionDispatcher = new Class({
@@ -25,79 +26,79 @@ const ActionDispatcher = new Class({
   },
 
   addRelationship(model, mindmap) {
-    throw 'method must be implemented.';
+    throw new Error('method must be implemented.');
   },
 
   addTopics(models, parentTopicId) {
-    throw 'method must be implemented.';
+    throw new Error('method must be implemented.');
   },
 
   deleteEntities(topicsIds, relIds) {
-    throw 'method must be implemented.';
+    throw new Error('method must be implemented.');
   },
 
   dragTopic(topicId, position, order, parentTopic) {
-    throw 'method must be implemented.';
+    throw new Error('method must be implemented.');
   },
 
   moveTopic(topicId, position) {
-    throw 'method must be implemented.';
+    throw new Error('method must be implemented.');
   },
 
   moveControlPoint(ctrlPoint, point) {
-    throw 'method must be implemented.';
+    throw new Error('method must be implemented.');
   },
 
   changeFontFamilyToTopic(topicIds, fontFamily) {
-    throw 'method must be implemented.';
+    throw new Error('method must be implemented.');
   },
 
   changeFontStyleToTopic(topicsIds) {
-    throw 'method must be implemented.';
+    throw new Error('method must be implemented.');
   },
 
   changeFontColorToTopic(topicsIds, color) {
-    throw 'method must be implemented.';
+    throw new Error('method must be implemented.');
   },
 
   changeFontSizeToTopic(topicsIds, size) {
-    throw 'method must be implemented.';
+    throw new Error('method must be implemented.');
   },
 
   changeBackgroundColorToTopic(topicsIds, color) {
-    throw 'method must be implemented.';
+    throw new Error('method must be implemented.');
   },
 
   changeBorderColorToTopic(topicsIds, color) {
-    throw 'method must be implemented.';
+    throw new Error('method must be implemented.');
   },
 
   changeShapeTypeToTopic(topicsIds, shapeType) {
-    throw 'method must be implemented.';
+    throw new Error('method must be implemented.');
   },
 
   changeFontWeightToTopic(topicsIds) {
-    throw 'method must be implemented.';
+    throw new Error('method must be implemented.');
   },
 
   changeTextToTopic(topicsIds, text) {
-    throw 'method must be implemented.';
+    throw new Error('method must be implemented.');
   },
 
   shrinkBranch(topicsIds, collapse) {
-    throw 'method must be implemented.';
+    throw new Error('method must be implemented.');
   },
 
   addFeatureToTopic(topicId, type, attributes) {
-    throw 'method must be implemented.';
+    throw new Error('method must be implemented.');
   },
 
   changeFeatureToTopic(topicId, featureId, attributes) {
-    throw 'method must be implemented.';
+    throw new Error('method must be implemented.');
   },
 
   removeFeatureFromTopic(topicId, featureId) {
-    throw 'method must be implemented.';
+    throw new Error('method must be implemented.');
   },
 });
 

packages/mindplot/src/components/ActionIcon.js

@@ -15,7 +15,7 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Icon = require('./Icon').default;
+import Icon from './Icon';
 
 const ActionIcon = new Class({
   Extends: Icon,

packages/mindplot/src/components/CentralTopic.js

@@ -15,11 +15,9 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Core = require('@wismapping/core-js');
+import web2d from '@wisemapping/web2d';
-
+import Topic from './Topic';
-const core = Core();
+import Shape from './util/Shape';
-const Topic = require('./Topic').default;
-const Shape = require('./util/Shape').default;
 
 const CentralTopic = new Class(
   /** @lends CentralTopic */ {
@@ -37,7 +35,8 @@ const CentralTopic = new Class(
     _registerEvents() {
       this.parent();
 
-      // This disable the drag of the central topic. But solves the problem of deselecting the nodes when the screen is clicked.
+      // This disable the drag of the central topic.
+      // But solves the problem of deselecting the nodes when the screen is clicked.
       this.addEvent('mousedown', (event) => {
         event.stopPropagation();
       });
@@ -59,7 +58,7 @@ const CentralTopic = new Class(
 
     _updatePositionOnChangeSize() {
       // Center main topic ...
-      const zeroPoint = new core.Point(0, 0);
+      const zeroPoint = new web2d.Point(0, 0);
       this.setPosition(zeroPoint);
     },
 

packages/mindplot/src/components/ConnectionLine.js

@@ -15,16 +15,10 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Core = require('@wismapping/core-js');
+import web2d from '@wisemapping/web2d';
 
-const core = Core();
+import INodeModel, { TopicShape } from './model/INodeModel';
-const web2D = require('@wismapping/web2d');
+import TopicConfig from './TopicConfig';
-
-const web2d = web2D();
-
-const INodeModel = require('./model/INodeModel').default;
-const { TopicShape } = require('./model/INodeModel');
-const Topic = require('./Topic').default;
 
 const ConnectionLine = new Class({
   initialize(sourceNode, targetNode, lineType) {
@@ -58,7 +52,7 @@ const ConnectionLine = new Class({
     const srcPos = sourceNode.workoutOutgoingConnectionPoint(targetNode.getPosition());
     const destPos = targetNode.workoutIncomingConnectionPoint(sourceNode.getPosition());
     const deltaX = (srcPos.x - destPos.x) / 3;
-    return [new core.Point(deltaX, 0), new core.Point(-deltaX, 0)];
+    return [new web2d.Point(deltaX, 0), new web2d.Point(-deltaX, 0)];
   },
 
   _createLine(lineType, defaultStyle) {
@@ -106,8 +100,8 @@ const ConnectionLine = new Class({
     const targetTopic = this._targetTopic;
     const targetPosition = targetTopic.getPosition();
 
-    let sPos; let
+    let sPos;
-      tPos;
+    let tPos;
     sPos = sourceTopic.workoutOutgoingConnectionPoint(targetPosition);
     tPos = targetTopic.workoutIncomingConnectionPoint(sourcePosition);
 
@@ -126,10 +120,10 @@ const ConnectionLine = new Class({
 
   _positionateConnector(targetTopic) {
     const targetPosition = targetTopic.getPosition();
-    const offset = Topic.CONNECTOR_WIDTH / 2;
+    const offset = TopicConfig.CONNECTOR_WIDTH / 2;
     const targetTopicSize = targetTopic.getSize();
-    let y; let
+    let y;
-      x;
+    let x;
     if (targetTopic.getShapeType() == TopicShape.LINE) {
       y = targetTopicSize.height;
     } else {
@@ -143,7 +137,7 @@ const ConnectionLine = new Class({
         x = targetTopicSize.width;
         connector.setPosition(x, y);
       } else {
-        x = -Topic.CONNECTOR_WIDTH;
+        x = -TopicConfig.CONNECTOR_WIDTH;
       }
       connector.setPosition(x, y);
     }

packages/mindplot/src/components/ControlPoint.js

@@ -15,15 +15,10 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Core = require('@wismapping/core-js');
+import web2d from '@wisemapping/web2d';
 
-const core = Core();
+import Shape from './util/Shape';
-const web2D = require('@wismapping/web2d');
+import ActionDispatcher from './ActionDispatcher';
-
-const web2d = web2D();
-
-const Shape = require('./util/Shape').default;
-const ActionDispatcher = require('./ActionDispatcher').default;
 
 const ControlPoint = new Class({
   initialize() {
@@ -46,29 +41,31 @@ const ControlPoint = new Class({
     control2.setCursor('pointer');
 
     this._controlPointsController = [control1, control2];
-    this._controlLines = [new web2d.Line({ strokeColor: '#6589de', strokeWidth: 1, opacity: 0.3 }),
+    this._controlLines = [
-      new web2d.Line({ strokeColor: '#6589de', strokeWidth: 1, opacity: 0.3 })];
+      new web2d.Line({ strokeColor: '#6589de', strokeWidth: 1, opacity: 0.3 }),
+      new web2d.Line({ strokeColor: '#6589de', strokeWidth: 1, opacity: 0.3 }),
+    ];
 
     this._isBinded = false;
     const me = this;
     this._controlPointsController[0].addEvent('mousedown', (event) => {
-      (me._mouseDown)(event, ControlPoint.FROM, me);
+      me._mouseDown(event, ControlPoint.FROM, me);
     });
     this._controlPointsController[0].addEvent('click', (event) => {
-      (me._mouseClick)(event);
+      me._mouseClick(event);
     });
     this._controlPointsController[0].addEvent('dblclick', (event) => {
-      (me._mouseClick)(event);
+      me._mouseClick(event);
     });
 
     this._controlPointsController[1].addEvent('mousedown', (event) => {
-      (me._mouseDown)(event, ControlPoint.TO, me);
+      me._mouseDown(event, ControlPoint.TO, me);
     });
     this._controlPointsController[1].addEvent('click', (event) => {
-      (me._mouseClick)(event);
+      me._mouseClick(event);
     });
     this._controlPointsController[1].addEvent('dblclick', (event) => {
-      (me._mouseClick)(event);
+      me._mouseClick(event);
     });
   },
 
@@ -93,29 +90,39 @@ const ControlPoint = new Class({
   _createControlPoint() {
     this._controls = this._line.getLine().getControlPoints();
     let pos = this._line.getLine().getFrom();
-    this._controlPointsController[0].setPosition(this._controls[ControlPoint.FROM].x + pos.x, this._controls[ControlPoint.FROM].y + pos.y - 3);
+    this._controlPointsController[0].setPosition(
+      this._controls[ControlPoint.FROM].x + pos.x,
+      this._controls[ControlPoint.FROM].y + pos.y - 3,
+    );
     this._controlLines[0].setFrom(pos.x, pos.y);
-    this._controlLines[0].setTo(this._controls[ControlPoint.FROM].x + pos.x + 3, this._controls[ControlPoint.FROM].y + pos.y);
+    this._controlLines[0].setTo(
+      this._controls[ControlPoint.FROM].x + pos.x + 3,
+      this._controls[ControlPoint.FROM].y + pos.y,
+    );
     pos = this._line.getLine().getTo();
     this._controlLines[1].setFrom(pos.x, pos.y);
-    this._controlLines[1].setTo(this._controls[ControlPoint.TO].x + pos.x + 3, this._controls[ControlPoint.TO].y + pos.y);
+    this._controlLines[1].setTo(
-    this._controlPointsController[1].setPosition(this._controls[ControlPoint.TO].x + pos.x, this._controls[ControlPoint.TO].y + pos.y - 3);
+      this._controls[ControlPoint.TO].x + pos.x + 3,
+      this._controls[ControlPoint.TO].y + pos.y,
+    );
+    this._controlPointsController[1].setPosition(
+      this._controls[ControlPoint.TO].x + pos.x,
+      this._controls[ControlPoint.TO].y + pos.y - 3,
+    );
   },
 
-  _removeLine() {
+  _removeLine() {},
-
-  },
 
   _mouseDown(event, point, me) {
     if (!this._isBinded) {
       this._isBinded = true;
       this._mouseMoveFunction = function (event) {
-        (me._mouseMoveEvent)(event, point, me);
+        me._mouseMoveEvent(event, point, me);
       };
 
       this._workspace.getScreenManager().addEvent('mousemove', this._mouseMoveFunction);
       this._mouseUpFunction = function (event) {
-        (me._mouseUp)(event, point, me);
+        me._mouseUp(event, point, me);
       };
       this._workspace.getScreenManager().addEvent('mouseup', this._mouseUpFunction);
     }
@@ -132,15 +139,15 @@ const ControlPoint = new Class({
     if (point == 0) {
       cords = Shape.calculateRelationShipPointCoordinates(this._line.getSourceTopic(), pos);
       this._line.setFrom(cords.x, cords.y);
-      this._line.setSrcControlPoint(new core.Point(pos.x - cords.x, pos.y - cords.y));
+      this._line.setSrcControlPoint(new web2d.Point(pos.x - cords.x, pos.y - cords.y));
     } else {
       cords = Shape.calculateRelationShipPointCoordinates(this._line.getTargetTopic(), pos);
       this._line.setTo(cords.x, cords.y);
-      this._line.setDestControlPoint(new core.Point(pos.x - cords.x, pos.y - cords.y));
+      this._line.setDestControlPoint(new web2d.Point(pos.x - cords.x, pos.y - cords.y));
     }
 
-    this._controls[point].x = (pos.x - cords.x);
+    this._controls[point].x = pos.x - cords.x;
-    this._controls[point].y = (pos.y - cords.y);
+    this._controls[point].y = pos.y - cords.y;
     this._controlPointsController[point].setPosition(pos.x - 5, pos.y - 3);
     this._controlLines[point].setFrom(cords.x, cords.y);
     this._controlLines[point].setTo(pos.x - 2, pos.y);

packages/mindplot/src/components/Designer.js

@@ -15,34 +15,33 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Events = require('./Events').default;
+import Events from './Events';
-const Messages = require('./Messages').default;
+import Messages from './Messages';
 
-const { StandaloneActionDispatcher, CommandContext } = require('./StandaloneActionDispatcher');
+import { StandaloneActionDispatcher, CommandContext } from './StandaloneActionDispatcher';
-const ActionDispatcher = require('./ActionDispatcher').default;
+import ActionDispatcher from './ActionDispatcher';
 
-const DesignerModel = require('./DesignerModel').default;
+import DesignerModel from './DesignerModel';
-const DesignerKeyboard = require('./DesignerKeyboard').default;
+import DesignerKeyboard from './DesignerKeyboard';
 
-const ScreenManager = require('./ScreenManager').default;
+import ScreenManager from './ScreenManager';
-const Workspace = require('./Workspace').default;
+import Workspace from './Workspace';
 
-const DragConnector = require('./DragConnector').default;
+import DragConnector from './DragConnector';
-const DragManager = require('./DragManager').default;
+import DragManager from './DragManager';
-const RelationshipPivot = require('./RelationshipPivot').default;
+import RelationshipPivot from './RelationshipPivot';
-const Relationship = require('./Relationship').default;
+import Relationship from './Relationship';
 
-const TopicEventDispatcher = require('./TopicEventDispatcher').default;
+import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher';
-const TopicFeature = require('./TopicFeature').default;
+import TopicFeature from './TopicFeature';
-const { TopicEvent } = require('./TopicEventDispatcher');
 
-const NodeGraph = require('./NodeGraph').default;
+import NodeGraphUtils from './NodeGraphUtils';
 
-const EventBusDispatcher = require('./layout/EventBusDispatcher').default;
+import EventBus from './layout/EventBus';
-const LayoutManager = require('./layout/LayoutManager').default;
+import EventBusDispatcher from './layout/EventBusDispatcher';
+import LayoutManager from './layout/LayoutManager';
 
-const INodeModel = require('./model/INodeModel').default;
+import INodeModel, { TopicShape } from './model/INodeModel';
-const { TopicShape } = require('./model/INodeModel');
 
 const Designer = new Class(
   /** @lends Designer */ {
@@ -163,17 +162,14 @@ const Designer = new Class(
       });
 
       // Create nodes on double click...
-      screenManager.addEvent(
+      screenManager.addEvent('dblclick', (event) => {
-        'dblclick',
+        if (workspace.isWorkspaceEventsEnabled()) {
-        (event) => {
+          const mousePos = screenManager.getWorkspaceMousePosition(event);
-          if (workspace.isWorkspaceEventsEnabled()) {
+          const centralTopic = me.getModel().getCentralTopic();
-            const mousePos = screenManager.getWorkspaceMousePosition(event);
+          const model = me._createChildModel(centralTopic, mousePos);
-            const centralTopic = me.getModel().getCentralTopic();
+          this._actionDispatcher.addTopics([model], [centralTopic.getId()]);
-            const model = me._createChildModel(centralTopic, mousePos);
+        }
-            this._actionDispatcher.addTopics([model], [centralTopic.getId()]);
+      });
-          }
-        },
-      );
 
       // Register mouse drag and drop event ...
       function noopHandler(evt) {
@@ -242,7 +238,7 @@ const Designer = new Class(
          */
     _buildNodeGraph(model, readOnly) {
       // Create node graph ...
-      const topic = NodeGraph.create(model, { readOnly });
+      const topic = NodeGraphUtils.create(model, { readOnly });
       this.getModel().addTopic(topic);
       const me = this;
       // Add Topic events ...
@@ -520,7 +516,7 @@ const Designer = new Class(
     /**
          * @private
          * @param {mindplot.Topic} topic the parent topic of the child to create the NodeModel for
-         * @param {core.Point} mousePos the mouse position
+         * @param {web2d.Point} mousePos the mouse position
          * @return {mindplot.NodeModel} the node model for the new child
          */
     _createChildModel(topic, mousePos) {
@@ -803,9 +799,9 @@ const Designer = new Class(
       const targetTopic = dmodel.findTopicById(targetTopicId);
       $assert(
         targetTopic,
-        `targetTopic could not be found:${
+        `targetTopic could not be found:${targetTopicId}${dmodel
-          targetTopicId
+          .getTopics()
-        }${dmodel.getTopics().map((e) => e.getId())}`,
+          .map((e) => e.getId())}`,
       );
 
       // Build relationship line ....
@@ -884,7 +880,8 @@ const Designer = new Class(
         // If there are more than one node selected,
         $notify($msg('ENTITIES_COULD_NOT_BE_DELETED'));
         return;
-      } if (topics.length == 1 && topics[0].isCentralTopic()) {
+      }
+      if (topics.length == 1 && topics[0].isCentralTopic()) {
         $notify($msg('CENTRAL_TOPIC_CAN_NOT_BE_DELETED'));
         return;
       }

packages/mindplot/src/components/DesignerActionRunner.js

@@ -15,8 +15,8 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const DesignerUndoManager = require('./DesignerUndoManager').default;
+import DesignerUndoManager from './DesignerUndoManager';
-const EventBus = require('./layout/EventBus').default;
+import EventBus from './layout/EventBus';
 
 const DesignerActionRunner = new Class({
   initialize(commandContext, notifier) {

packages/mindplot/src/components/DesignerKeyboard.js

@@ -15,19 +15,10 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Keyboard = require('./Keyboard').default;
+import Keyboard from './Keyboard';
 
 const DesignerKeyboard = new Class({
   Extends: Keyboard,
-  Static: {
-    register(designer) {
-      this._instance = new DesignerKeyboard(designer);
-    },
-
-    getInstance() {
-      return this._instance;
-    },
-  },
 
   initialize(designer) {
     $assert(designer, 'designer can not be null');
@@ -430,4 +421,12 @@ DesignerKeyboard.specialKeys = {
   224: 'meta',
 };
 
+DesignerKeyboard.register = function register(designer) {
+  this._instance = new DesignerKeyboard(designer);
+};
+
+DesignerKeyboard.getInstance = function getInstance() {
+  return this._instance;
+};
+
 export default DesignerKeyboard;

packages/mindplot/src/components/DesignerModel.js

@@ -15,7 +15,7 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Events = require('./Events').default;
+import Events from './Events';
 
 const DesignerModel = new Class(/** @lends DesignerModel */{
   Implements: [Events],

packages/mindplot/src/components/DragManager.js

@@ -15,7 +15,7 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const DragTopic = require('./DragTopic').default;
+import DragTopic from './DragTopic';
 
 const DragManager = new Class({
   initialize(workspace, eventDispatcher) {

packages/mindplot/src/components/DragPivot.js

@@ -15,21 +15,16 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Core = require('@wismapping/core-js');
+import web2d from '@wisemapping/web2d';
 
-const core = Core();
+import DragTopicConfig from './DragTopicConfig';
-const web2D = require('@wismapping/web2d');
+import Shape from './util/Shape';
-
+import INodeModel from './model/INodeModel';
-const web2d = web2D();
-
-const DragTopic = require('./DragTopic').default;
-const Shape = require('./util/Shape').default;
-const INodeModel = require('./model/INodeModel').default;
 
 const DragPivot = new Class({
   initialize() {
-    this._position = new core.Point();
+    this._position = new web2d.Point();
-    this._size = DragTopic.PIVOT_SIZE;
+    this._size = DragTopicConfig.PIVOT_SIZE;
 
     this._straightLine = this._buildStraightLine();
     this._curvedLine = this._buildCurvedLine();
@@ -86,8 +81,8 @@ const DragPivot = new Class({
     line.setFrom(pivotPoint.x, pivotPoint.y);
 
     // Update rect position
-    const cx = position.x - (parseInt(size.width) / 2);
+    const cx = position.x - parseInt(size.width) / 2;
-    const cy = position.y - (parseInt(size.height) / 2);
+    const cy = position.y - parseInt(size.height) / 2;
     pivotRect.setPosition(cx, cy);
 
     // Make line visible only when the position has been already changed.
@@ -108,7 +103,11 @@ const DragPivot = new Class({
   _buildRect() {
     const size = this._size;
     const rectAttributes = {
-      fillColor: '#CC0033', opacity: 0.4, width: size.width, height: size.height, strokeColor: '#FF9933',
+      fillColor: '#CC0033',
+      opacity: 0.4,
+      width: size.width,
+      height: size.height,
+      strokeColor: '#FF9933',
     };
     const rect = new web2d.Rect(0, rectAttributes);
     rect.setVisibility(false);
@@ -216,8 +215,8 @@ const DragPivot = new Class({
     connectRect.setSize(width, height);
 
     const targetPosition = targetTopic.getPosition();
-    const cx = Math.ceil(targetPosition.x - (width / 2));
+    const cx = Math.ceil(targetPosition.x - width / 2);
-    const cy = Math.ceil(targetPosition.y - (height / 2));
+    const cy = Math.ceil(targetPosition.y - height / 2);
     connectRect.setPosition(cx, cy);
 
     // Change elements position ...

packages/mindplot/src/components/DragTopic.js

@@ -15,12 +15,10 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Core = require('@wismapping/core-js');
+import web2d from '@wisemapping/web2d';
 
-const core = Core();
+import ActionDispatcher from './ActionDispatcher';
-
+import DragPivot from './DragPivot';
-const ActionDispatcher = require('./ActionDispatcher').default;
-const DragPivot = require('./DragPivot').default;
 
 const DragTopic = new Class({
   initialize(dragShape, draggedNode, layoutManger) {
@@ -32,7 +30,7 @@ const DragTopic = new Class({
     this._order = null;
     this._draggedNode = draggedNode;
     this._layoutManager = layoutManger;
-    this._position = new core.Point();
+    this._position = new web2d.Point();
     this._isInWorkspace = false;
     this._isFreeLayoutEnabled = false;
   },
@@ -47,7 +45,12 @@ const DragTopic = new Class({
     if (this.isFreeLayoutOn() && this.isConnected()) {
       const { _layoutManager } = this;
       const par = this.getConnectedToTopic();
-      position = _layoutManager.predict(par.getId(), this._draggedNode.getId(), position, true).position;
+      position = _layoutManager.predict(
+        par.getId(),
+        this._draggedNode.getId(),
+        position,
+        true,
+      ).position;
     }
     this._position.setValue(position.x, position.y);
 
@@ -56,13 +59,17 @@ const DragTopic = new Class({
     const draggedNode = this._draggedNode;
     const size = draggedNode.getSize();
     const cx = position.x - (position.x > 0 ? 0 : size.width);
-    const cy = Math.ceil(position.y - (size.height / 2));
+    const cy = Math.ceil(position.y - size.height / 2);
     this._elem2d.setPosition(cx, cy);
 
     // In case is not free, pivot must be draw ...
     if (this.isConnected() && !this.isFreeLayoutOn()) {
       const parent = this.getConnectedToTopic();
-      const predict = this._layoutManager.predict(parent.getId(), this._draggedNode.getId(), this.getPosition());
+      const predict = this._layoutManager.predict(
+        parent.getId(),
+        this._draggedNode.getId(),
+        this.getPosition(),
+      );
       if (this._order != predict.order) {
         const dragPivot = this._getDragPivot();
         const pivotPosition = predict.position;
@@ -105,7 +112,11 @@ const DragTopic = new Class({
     $assert(parent, 'Parent connection node can not be null.');
 
     // Where it should be connected ?
-    const predict = designer._eventBussDispatcher._layoutManager.predict(parent.getId(), this._draggedNode.getId(), this.getPosition());
+    const predict = designer._eventBussDispatcher._layoutManager.predict(
+      parent.getId(),
+      this._draggedNode.getId(),
+      this.getPosition(),
+    );
 
     // Connect pivot ...
     const dragPivot = this._getDragPivot();
@@ -197,11 +208,8 @@ const DragTopic = new Class({
     // Disable free layout ...
     return false;
   },
-
 });
 
-DragTopic.PIVOT_SIZE = { width: 50, height: 6 };
-
 DragTopic.init = function (workspace) {
   $assert(workspace, 'workspace can not be null');
   const pivot = DragTopic.__getDragPivot();

packages/mindplot/src/components/DragTopicConfig.js

@@ -0,0 +1,5 @@
+export const PIVOT_SIZE = { width: 50, height: 6 };
+
+export default {
+  PIVOT_SIZE,
+};

packages/mindplot/src/components/Icon.js

@@ -15,9 +15,7 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const web2D = require('@wismapping/web2d');
+import web2d from '@wisemapping/web2d';
-
-const web2d = web2D();
 
 const Icon = new Class({
   initialize(url) {

packages/mindplot/src/components/IconGroup.js

@@ -0,0 +1,346 @@
+/*
+ *    Copyright [2015] [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 web2d from '@wisemapping/web2d';
+
+import Icon from './Icon';
+
+const IconGroup = new Class(
+  /** @lends IconGroup */ {
+    /**
+         * @constructs
+         * @param topicId
+         * @param iconSize
+         * @throws will throw an error if topicId is null or undefined
+         * @throws will throw an error if iconSize is null or undefined
+         */
+    initialize(topicId, iconSize) {
+      $assert($defined(topicId), 'topicId can not be null');
+      $assert($defined(iconSize), 'iconSize can not be null');
+
+      this._icons = [];
+      this._group = new web2d.Group({
+        width: 0,
+        height: iconSize,
+        x: 0,
+        y: 0,
+        coordSizeWidth: 0,
+        coordSizeHeight: 100,
+      });
+      this._removeTip = new IconGroup.RemoveTip(this._group, topicId);
+      this.seIconSize(iconSize, iconSize);
+
+      this._registerListeners();
+    },
+
+    /** */
+    setPosition(x, y) {
+      this._group.setPosition(x, y);
+    },
+
+    /** */
+    getPosition() {
+      return this._group.getPosition();
+    },
+
+    /** */
+    getNativeElement() {
+      return this._group;
+    },
+
+    /** */
+    getSize() {
+      return this._group.getSize();
+    },
+
+    /** */
+    seIconSize(width, height) {
+      this._iconSize = { width, height };
+      this._resize(this._icons.length);
+    },
+
+    /**
+         * @param icon the icon to be added to the icon group
+         * @param {Boolean} remove
+         * @throws will throw an error if icon is not defined
+         */
+    addIcon(icon, remove) {
+      $defined(icon, 'icon is not defined');
+
+      icon.setGroup(this);
+      this._icons.push(icon);
+
+      // Adjust group and position ...
+      this._resize(this._icons.length);
+      this._positionIcon(icon, this._icons.length - 1);
+
+      const imageShape = icon.getImage();
+      this._group.append(imageShape);
+
+      // Register event for the group ..
+      if (remove) {
+        this._removeTip.decorate(this._topicId, icon);
+      }
+    },
+
+    _findIconFromModel(iconModel) {
+      let result = null;
+      _.each(
+        this._icons,
+        (icon) => {
+          const elModel = icon.getModel();
+          if (elModel.getId() == iconModel.getId()) {
+            result = icon;
+          }
+        },
+        this,
+      );
+
+      if (result == null) {
+        throw new Error(`Icon can no be found:${iconModel.getId()}, Icons:${this._icons}`);
+      }
+
+      return result;
+    },
+
+    /** */
+    removeIconByModel(featureModel) {
+      $assert(featureModel, 'featureModel can not be null');
+
+      const icon = this._findIconFromModel(featureModel);
+      this._removeIcon(icon);
+    },
+
+    _removeIcon(icon) {
+      $assert(icon, 'icon can not be null');
+
+      this._removeTip.close(0);
+      this._group.removeChild(icon.getImage());
+
+      this._icons.erase(icon);
+      this._resize(this._icons.length);
+      const me = this;
+      // Add all again ...
+      _.each(this._icons, (elem, i) => {
+        me._positionIcon(elem, i);
+      });
+    },
+
+    /** */
+    moveToFront() {
+      this._group.moveToFront();
+    },
+
+    _registerListeners() {
+      this._group.addEvent('click', (event) => {
+        // Avoid node creation ...
+        event.stopPropagation();
+      });
+
+      this._group.addEvent('dblclick', (event) => {
+        event.stopPropagation();
+      });
+    },
+
+    _resize(iconsLength) {
+      this._group.setSize(iconsLength * this._iconSize.width, this._iconSize.height);
+
+      const iconSize = Icon.SIZE + IconGroup.ICON_PADDING * 2;
+      this._group.setCoordSize(iconsLength * iconSize, iconSize);
+    },
+
+    _positionIcon(icon, order) {
+      const iconSize = Icon.SIZE + IconGroup.ICON_PADDING * 2;
+      icon.getImage().setPosition(
+        iconSize * order + IconGroup.ICON_PADDING,
+        IconGroup.ICON_PADDING,
+      );
+    },
+  },
+);
+
+/**
+ * @constant
+ * @type {Number}
+ * @default
+ */
+IconGroup.ICON_PADDING = 5;
+
+IconGroup.RemoveTip = new Class(
+  /** @lends IconGroup.RemoveTip */ {
+    /**
+         * @classdesc inner class of IconGroup
+         * @constructs
+         * @param container
+         */
+    initialize(container) {
+      $assert(container, 'group can not be null');
+      this._fadeElem = container;
+    },
+
+    /**
+         * @param topicId
+         * @param icon
+         * @throws will throw an error if icon is null or undefined
+         */
+    show(topicId, icon) {
+      $assert(icon, 'icon can not be null');
+
+      // Nothing to do ...
+      if (this._activeIcon != icon) {
+        // If there is an active icon, close it first ...
+        if (this._activeIcon) {
+          this.close(0);
+        }
+
+        // Now, let move the position the icon...
+        const pos = icon.getPosition();
+
+        // Register events ...
+        const widget = this._buildWeb2d();
+        widget.addEvent('click', () => {
+          icon.remove();
+        });
+
+        const me = this;
+
+        widget.addEvent('mouseover', () => {
+          me.show(topicId, icon);
+        });
+
+        widget.addEvent('mouseout', () => {
+          me.hide();
+        });
+
+        widget.setPosition(pos.x + 80, pos.y - 50);
+        this._fadeElem.append(widget);
+
+        // Setup current element ...
+        this._activeIcon = icon;
+        this._widget = widget;
+      } else {
+        clearTimeout(this._closeTimeoutId);
+      }
+    },
+
+    /** */
+    hide() {
+      this.close(200);
+    },
+
+    /**
+         * @param delay
+         */
+    close(delay) {
+      // This is not ok, trying to close the same dialog twice ?
+      if (this._closeTimeoutId) {
+        clearTimeout(this._closeTimeoutId);
+      }
+
+      const me = this;
+      if (this._activeIcon) {
+        const widget = this._widget;
+        const close = function () {
+          me._activeIcon = null;
+          me._fadeElem.removeChild(widget);
+          me._widget = null;
+          me._closeTimeoutId = null;
+        };
+
+        if (!$defined(delay) || delay == 0) {
+          close();
+        } else {
+          this._closeTimeoutId = close.delay(delay);
+        }
+      }
+    },
+
+    _buildWeb2d() {
+      const result = new web2d.Group({
+        width: 10,
+        height: 10,
+        x: 0,
+        y: 0,
+        coordSizeWidth: 10,
+        coordSizeHeight: 10,
+      });
+
+      const outerRect = new web2d.Rect(0, {
+        x: 0,
+        y: 0,
+        width: 10,
+        height: 10,
+        stroke: '0',
+        fillColor: 'black',
+      });
+      result.append(outerRect);
+      outerRect.setCursor('pointer');
+
+      const innerRect = new web2d.Rect(0, {
+        x: 1,
+        y: 1,
+        width: 8,
+        height: 8,
+        stroke: '1 solid white',
+        fillColor: 'gray',
+      });
+      result.append(innerRect);
+
+      const line = new web2d.Line({ stroke: '1 solid white' });
+      line.setFrom(1, 1);
+      line.setTo(9, 9);
+      result.append(line);
+
+      const line2 = new web2d.Line({ stroke: '1 solid white' });
+      line2.setFrom(1, 9);
+      line2.setTo(9, 1);
+      result.append(line2);
+
+      // Some events ...
+      result.addEvent('mouseover', () => {
+        innerRect.setFill('#CC0033');
+      });
+      result.addEvent('mouseout', () => {
+        innerRect.setFill('gray');
+      });
+
+      result.setSize(50, 50);
+      return result;
+    },
+
+    /**
+         * @param topicId
+         * @param icon
+         */
+    decorate(topicId, icon) {
+      const me = this;
+
+      if (!icon.__remove) {
+        icon.addEvent('mouseover', () => {
+          me.show(topicId, icon);
+        });
+
+        icon.addEvent('mouseout', () => {
+          me.hide();
+        });
+        icon.__remove = true;
+      }
+    },
+  },
+);
+
+export default IconGroup;

packages/mindplot/src/components/ImageIcon.js

@@ -15,8 +15,8 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Icon = require('./Icon').default;
+import Icon from './Icon';
-const ActionDispatcher = require('./ActionDispatcher').default;
+import ActionDispatcher from './ActionDispatcher';
 
 const ImageIcon = new Class({
   Extends: Icon,

packages/mindplot/src/components/LinkIcon.js

@@ -15,8 +15,8 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Icon = require('./Icon').default;
+import Icon from './Icon';
-const LinkIconTooltip = require('./widget/LinkIconTooltip').default;
+import LinkIconTooltip from './widget/LinkIconTooltip';
 
 const LinkIcon = new Class({
 
@@ -56,7 +56,7 @@ const LinkIcon = new Class({
       });
     }
 
-    $(this.getImage()._peer._native).mouseenter(() => {
+    $(this.getImage().peer._native).mouseenter(() => {
       me._tip.show();
     });
   },

packages/mindplot/src/components/LocalStorageManager.js

@@ -15,7 +15,7 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const PersistenceManager = require('./PersistenceManager').default;
+import PersistenceManager from './PersistenceManager';
 
 const LocalStorageManager = new Class({
   Extends: PersistenceManager,

packages/mindplot/src/components/MainTopic.js

@@ -0,0 +1,162 @@
+/*
+ *    Copyright [2015] [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 web2d from '@wisemapping/web2d';
+
+import Topic from './Topic';
+import { TopicShape } from './model/INodeModel';
+import Shape from './util/Shape';
+
+const MainTopic = new Class(
+  /** @lends MainTopic */ {
+    Extends: Topic,
+    /**
+         * @extends mindplot.Topic
+         * @constructs
+         * @param model
+         * @param options
+         */
+    initialize(model, options) {
+      this.parent(model, options);
+    },
+
+    INNER_RECT_ATTRIBUTES: { stroke: '0.5 solid #009900' },
+
+    _buildDragShape() {
+      const innerShape = this._buildShape(this.INNER_RECT_ATTRIBUTES, this.getShapeType());
+      const size = this.getSize();
+      innerShape.setSize(size.width, size.height);
+      innerShape.setPosition(0, 0);
+      innerShape.setOpacity(0.5);
+      innerShape.setCursor('default');
+      innerShape.setVisibility(true);
+
+      const brColor = this.getBorderColor();
+      innerShape.setAttribute('strokeColor', brColor);
+
+      const bgColor = this.getBackgroundColor();
+      innerShape.setAttribute('fillColor', bgColor);
+
+      //  Create group ...
+      const groupAttributes = {
+        width: 100,
+        height: 100,
+        coordSizeWidth: 100,
+        coordSizeHeight: 100,
+      };
+      const group = new web2d.Group(groupAttributes);
+      group.append(innerShape);
+
+      // Add Text ...
+      if (this.getShapeType() !== TopicShape.IMAGE) {
+        const textShape = this._buildTextShape(true);
+        const text = this.getText();
+        textShape.setText(text);
+        textShape.setOpacity(0.5);
+        group.append(textShape);
+      }
+      return group;
+    },
+
+    /** */
+    updateTopicShape(targetTopic, workspace) {
+      // Change figure based on the connected topic ...
+      const model = this.getModel();
+      let shapeType = model.getShapeType();
+      if (!targetTopic.isCentralTopic()) {
+        if (!$defined(shapeType)) {
+          // Get the real shape type ...
+          shapeType = this.getShapeType();
+          this._setShapeType(shapeType, false);
+        }
+      }
+    },
+
+    /** */
+    disconnect(workspace) {
+      this.parent(workspace);
+      const size = this.getSize();
+
+      const model = this.getModel();
+      let shapeType = model.getShapeType();
+      if (!$defined(shapeType)) {
+        // Change figure ...
+        shapeType = this.getShapeType();
+        this._setShapeType(TopicShape.ROUNDED_RECT, false);
+      }
+      const innerShape = this.getInnerShape();
+      innerShape.setVisibility(true);
+    },
+
+    _updatePositionOnChangeSize(oldSize, newSize) {
+      const xOffset = Math.round((newSize.width - oldSize.width) / 2);
+      const pos = this.getPosition();
+      if ($defined(pos)) {
+        if (pos.x > 0) {
+          pos.x += xOffset;
+        } else {
+          pos.x -= xOffset;
+        }
+        this.setPosition(pos);
+      }
+    },
+
+    /** */
+    workoutIncomingConnectionPoint(sourcePosition) {
+      return Shape.workoutIncomingConnectionPoint(this, sourcePosition);
+    },
+
+    /** */
+    workoutOutgoingConnectionPoint(targetPosition) {
+      $assert(targetPosition, 'targetPoint can not be null');
+      const pos = this.getPosition();
+      const isAtRight = Shape.isAtRight(targetPosition, pos);
+      const size = this.getSize();
+
+      let result;
+      if (this.getShapeType() === TopicShape.LINE) {
+        result = new web2d.Point();
+        const groupPosition = this._elem2d.getPosition();
+        const innerShareSize = this.getInnerShape().getSize();
+
+        if (innerShareSize) {
+          const magicCorrectionNumber = 0.3;
+          if (!isAtRight) {
+            result.x = groupPosition.x + innerShareSize.width - magicCorrectionNumber;
+          } else {
+            result.x = groupPosition.x + magicCorrectionNumber;
+          }
+          result.y = groupPosition.y + innerShareSize.height;
+        } else {
+          // Hack: When the size has not being defined. This is because the node has not being added.
+          // Try to do our best ...
+          if (!isAtRight) {
+            result.x = pos.x + size.width / 2;
+          } else {
+            result.x = pos.x - size.width / 2;
+          }
+          result.y = pos.y + size.height / 2;
+        }
+      } else {
+        result = Shape.calculateRectConnectionPoint(pos, size, isAtRight, true);
+      }
+      return result;
+    },
+  },
+);
+
+export default MainTopic;

packages/mindplot/src/components/Messages.js

@@ -17,25 +17,24 @@
  */
 
 const Messages = new Class({
-  Static: {
+
-    init(locale) {
-      locale = $defined(locale) ? locale : 'en';
-      let bundle = Messages.BUNDLES[locale];
-      if (bundle == null && locale.indexOf('_') != -1) {
-        // Try to locate without the specialization ...
-        locale = locale.substring(0, locale.indexOf('_'));
-        bundle = Messages.BUNDLES[locale];
-      }
-      Messages.__bundle = bundle;
-    },
-  },
 });
 
-global.$msg = function (key) {
+Messages.init = (locale) => {
+  locale = $defined(locale) ? locale : 'en';
+  let bundle = Messages.BUNDLES[locale];
+  if (bundle == null && locale.indexOf('_') !== -1) {
+    // Try to locate without the specialization ...
+    locale = locale.substring(0, locale.indexOf('_'));
+    bundle = Messages.BUNDLES[locale];
+  }
+  Messages.__bundle = bundle || {};
+};
+
+global.$msg = function $msg(key) {
   if (!Messages.__bundle) {
     Messages.init('en');
   }
-
   const msg = Messages.__bundle[key];
   return msg || key;
 };

packages/mindplot/src/components/MultilineTextEditor.js

@@ -15,8 +15,8 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Events = require('./Events').default;
+import Events from './Events';
-const ActionDispatcher = require('./ActionDispatcher').default;
+import ActionDispatcher from './ActionDispatcher';
 
 const MultilineTextEditor = new Class({
   Extends: Events,

packages/mindplot/src/components/NodeGraph.js

@@ -15,9 +15,8 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Topic = require('./Topic').default;
+import TopicConfig from './TopicConfig';
-const DragTopic = require('./DragTopic').default;
+import DragTopic from './DragTopic';
-const INodeModel = require('./model/INodeModel').default;
 
 const NodeGraph = new Class(
   /** @lends NodeGraph */ {
@@ -72,7 +71,7 @@ const NodeGraph = new Class(
 
     /** @abstract */
     setPosition(point, fireEvent) {
-      throw 'Unsupported operation';
+      throw new Error('Unsupported operation');
     },
 
     /** */
@@ -110,8 +109,8 @@ const NodeGraph = new Class(
 
     /** @param {Object<Number>} size */
     setSize(size) {
-      this._size.width = parseInt(size.width);
+      this._size.width = parseInt(size.width, 10);
-      this._size.height = parseInt(size.height);
+      this._size.height = parseInt(size.height, 10);
     },
 
     /**
@@ -138,14 +137,14 @@ const NodeGraph = new Class(
 
     /** */
     setOnFocus(focus) {
-      if (this._onFocus != focus) {
+      if (this._onFocus !== focus) {
         this._onFocus = focus;
         const outerShape = this.getOuterShape();
         if (focus) {
-          outerShape.setFill(Topic.OUTER_SHAPE_ATTRIBUTES_FOCUS.fillColor);
+          outerShape.setFill(TopicConfig.OUTER_SHAPE_ATTRIBUTES_FOCUS.fillColor);
           outerShape.setOpacity(1);
         } else {
-          outerShape.setFill(Topic.OUTER_SHAPE_ATTRIBUTES.fillColor);
+          outerShape.setFill(TopicConfig.OUTER_SHAPE_ATTRIBUTES.fillColor);
           outerShape.setOpacity(0);
         }
         this.setCursor('move');
@@ -187,36 +186,4 @@ const NodeGraph = new Class(
   },
 );
 
-/**
- * creates a new topic from the given node model
- * @memberof mindplot.Nodegraph
- * @param {mindplot.model.NodeModel} nodeModel
- * @param {Object} options
- * @throws will throw an error if nodeModel is null or undefined
- * @throws will throw an error if the nodeModel's type is null or undefined
- * @throws will throw an error if the node type cannot be recognized as either central or main
- * topic type
- * @return {mindplot.CentralTopic|mindplot.MainTopic} the new topic
- */
-NodeGraph.create = function (nodeModel, options) {
-  const CentralTopic = require('./CentralTopic').default;
-  const MainTopic = require('./MainTopic').default;
-
-  $assert(nodeModel, 'Model can not be null');
-
-  const type = nodeModel.getType();
-  $assert(type, 'Node model type can not be null');
-
-  let result;
-  if (type == INodeModel.CENTRAL_TOPIC_TYPE) {
-    result = new CentralTopic(nodeModel, options);
-  } else if (type == INodeModel.MAIN_TOPIC_TYPE) {
-    result = new MainTopic(nodeModel, options);
-  } else {
-    $assert(false, `unsupported node type:${type}`);
-  }
-
-  return result;
-};
-
 export default NodeGraph;

packages/mindplot/src/components/NodeGraphUtils.js

@@ -0,0 +1,36 @@
+import CentralTopic from './CentralTopic';
+import MainTopic from './MainTopic';
+import INodeModel from './model/INodeModel';
+
+/**
+ * creates a new topic from the given node model
+ * @memberof mindplot.Nodegraph
+ * @param {mindplot.model.NodeModel} nodeModel
+ * @param {Object} options
+ * @throws will throw an error if nodeModel is null or undefined
+ * @throws will throw an error if the nodeModel's type is null or undefined
+ * @throws will throw an error if the node type cannot be recognized as either central or main
+ * topic type
+ * @return {mindplot.CentralTopic|mindplot.MainTopic} the new topic
+ */
+export const create = (nodeModel, options) => {
+  $assert(nodeModel, 'Model can not be null');
+
+  const type = nodeModel.getType();
+  $assert(type, 'Node model type can not be null');
+
+  let result;
+  if (type === INodeModel.CENTRAL_TOPIC_TYPE) {
+    result = new CentralTopic(nodeModel, options);
+  } else if (type === INodeModel.MAIN_TOPIC_TYPE) {
+    result = new MainTopic(nodeModel, options);
+  } else {
+    $assert(false, `unsupported node type:${type}`);
+  }
+
+  return result;
+};
+
+export default {
+  create,
+};

packages/mindplot/src/components/NoteIcon.js

@@ -15,8 +15,8 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Icon = require('./Icon').default;
+import Icon from './Icon';
-const FloatingTip = require('./widget/FloatingTip').default;
+import FloatingTip from './widget/FloatingTip';
 
 const NoteIcon = new Class({
   Extends: Icon,
@@ -42,7 +42,7 @@ const NoteIcon = new Class({
         event.stopPropagation();
       });
     }
-    this._tip = new FloatingTip($(me.getImage()._peer._native), {
+    this._tip = new FloatingTip($(me.getImage().peer._native), {
       title: $msg('NOTE'),
       container: 'body',
       // Content can also be a function of the target element!
@@ -56,13 +56,13 @@ const NoteIcon = new Class({
   },
 
   _buildTooltipContent() {
-    if ($('body').find('#textPopoverNote').length == 1) {
+    if ($('body').find('#textPopoverNote').length === 1) {
-      var text = $('body').find('#textPopoverNote');
+      const text = $('body').find('#textPopoverNote');
       text.text(this._linksModel.getText());
     } else {
       const result = $('<div id="textPopoverNote"></div>').css({ padding: '5px' });
 
-      var text = $('<div></div>').text(this._linksModel.getText())
+      const text = $('<div></div>').text(this._linksModel.getText())
         .css({
           'white-space': 'pre-wrap',
           'word-wrap': 'break-word',

packages/mindplot/src/components/PersistenceManager.js

@@ -15,22 +15,12 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Core = require('@wismapping/core-js');
+import Core from '@wisemapping/core-js';
+import XMLSerializerFactory from './persistence/XMLSerializerFactory';
 
 const core = Core();
-const XMLSerializerFactory = require('./persistence/XMLSerializerFactory');
 
 const PersistenceManager = new Class({
-  Static: {
-    loadFromDom(mapId, mapDom) {
-      $assert(mapId, 'mapId can not be null');
-      $assert(mapDom, 'mapDom can not be null');
-
-      const serializer = XMLSerializerFactory.getSerializerFromDocument(mapDom);
-      return serializer.loadFromDom(mapDom, mapId);
-    },
-  },
-
   initialize() {},
 
   save(mindmap, editorProperties, saveHistory, events, sync) {
@@ -84,4 +74,12 @@ PersistenceManager.getInstance = function () {
   return PersistenceManager._instance;
 };
 
+PersistenceManager.loadFromDom = function loadFromDom(mapId, mapDom) {
+  $assert(mapId, 'mapId can not be null');
+  $assert(mapDom, 'mapDom can not be null');
+
+  const serializer = XMLSerializerFactory.getSerializerFromDocument(mapDom);
+  return serializer.loadFromDom(mapDom, mapId);
+};
+
 export default PersistenceManager;

packages/mindplot/src/components/Relationship.js

@@ -15,29 +15,18 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Core = require('@wismapping/core-js');
+import web2d from '@wisemapping/web2d';
 
-const core = Core();
+import ConnectionLine from './ConnectionLine';
+import ControlPoint from './ControlPoint';
 
-const web2D = require('@wismapping/web2d');
+import INodeModel from './model/INodeModel';
 
-const web2d = web2D();
+import Shape from './util/Shape';
-
-const ConnectionLine = require('./ConnectionLine').default;
-const ControlPoint = require('./ControlPoint').default;
-
-const INodeModel = require('./model/INodeModel').default;
-
-const Shape = require('./util/Shape').default;
 
 const Relationship = new Class({
   Extends: ConnectionLine,
-  Static: {
+
-    getStrokeColor() {
-      return '#9b74e6';
-    },
-    type: 'Relationship',
-  },
   initialize(sourceNode, targetNode, model) {
     $assert(sourceNode, 'sourceNode can not be null');
     $assert(targetNode, 'targetNode can not be null');
@@ -98,29 +87,32 @@ const Relationship = new Class({
 
     const targetTopic = this._targetTopic;
     let targetPosition = targetTopic.getPosition();
-    if (targetTopic.getType() == INodeModel.CENTRAL_TOPIC_TYPE) {
+    if (targetTopic.getType() === INodeModel.CENTRAL_TOPIC_TYPE) {
       targetPosition = Shape.workoutIncomingConnectionPoint(targetTopic, sourcePosition);
     }
 
-    let sPos; let
+    let sPos;
-      tPos;
+    let tPos;
     this._line2d.setStroke(2);
     const ctrlPoints = this._line2d.getControlPoints();
     if (!this._line2d.isDestControlPointCustom() && !this._line2d.isSrcControlPointCustom()) {
-      const defaultPoints = Shape.calculateDefaultControlPoints(sourcePosition, targetPosition);
+      const defaultPoints = Shape.calculateDefaultControlPoints(
+        sourcePosition,
+        targetPosition,
+      );
       ctrlPoints[0].x = defaultPoints[0].x;
       ctrlPoints[0].y = defaultPoints[0].y;
 
       ctrlPoints[1].x = defaultPoints[1].x;
       ctrlPoints[1].y = defaultPoints[1].y;
     }
-    const spoint = new core.Point();
+    const spoint = new web2d.Point();
-    spoint.x = parseInt(ctrlPoints[0].x) + parseInt(sourcePosition.x);
+    spoint.x = parseInt(ctrlPoints[0].x, 10) + parseInt(sourcePosition.x, 10);
-    spoint.y = parseInt(ctrlPoints[0].y) + parseInt(sourcePosition.y);
+    spoint.y = parseInt(ctrlPoints[0].y, 10) + parseInt(sourcePosition.y, 10);
 
-    const tpoint = new core.Point();
+    const tpoint = new web2d.Point();
-    tpoint.x = parseInt(ctrlPoints[1].x) + parseInt(targetPosition.x);
+    tpoint.x = parseInt(ctrlPoints[1].x, 10) + parseInt(targetPosition.x, 10);
-    tpoint.y = parseInt(ctrlPoints[1].y) + parseInt(targetPosition.y);
+    tpoint.y = parseInt(ctrlPoints[1].y, 10) + parseInt(targetPosition.y, 10);
 
     sPos = Shape.calculateRelationShipPointCoordinates(sourceTopic, spoint);
     tPos = Shape.calculateRelationShipPointCoordinates(targetTopic, tpoint);
@@ -155,7 +147,7 @@ const Relationship = new Class({
       this._endArrow.moveToBack();
     }
 
-    if (this._line2d.getType() == 'CurvedLine') {
+    if (this._line2d.getType() === 'CurvedLine') {
       const controlPoints = this._line2d.getControlPoints();
       this._startArrow.setControlPoint(controlPoints[0]);
       if (this._endArrow) {
@@ -211,7 +203,7 @@ const Relationship = new Class({
 
   setOnFocus(focus) {
     // Change focus shape
-    if (this.isOnFocus() != focus) {
+    if (this.isOnFocus() !== focus) {
       if (focus) {
         this._refreshShape();
         this._controlPointsController.setLine(this);
@@ -240,7 +232,7 @@ const Relationship = new Class({
 
   addEvent(type, listener) {
     // Translate to web 2d events ...
-    if (type == 'onfocus') {
+    if (type === 'onfocus') {
       type = 'mousedown';
     }
 
@@ -334,4 +326,10 @@ const Relationship = new Class({
   },
 });
 
+Relationship.getStrokeColor = function getStrokeColor() {
+  return '#9b74e6';
+};
+
+Relationship.type = 'Relationship';
+
 export default Relationship;

packages/mindplot/src/components/RelationshipPivot.js

@@ -15,14 +15,10 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Core = require('@wismapping/core-js');
+import web2d from '@wisemapping/web2d';
 
-const core = Core();
+import INodeModel from './model/INodeModel';
-const web2D = require('@wismapping/web2d');
+import Shape from './util/Shape';
-
-const web2d = web2D();
-const INodeModel = require('./model/INodeModel').default;
-const Shape = require('./util/Shape').default;
 
 const RelationshipPivot = new Class({
   initialize(workspace, designer) {
@@ -134,14 +130,14 @@ const RelationshipPivot = new Class({
   _calculateFromPosition(toPosition) {
     // Calculate origin position ...
     let sourcePosition = this._sourceTopic.getPosition();
-    if (this._sourceTopic.getType() == INodeModel.CENTRAL_TOPIC_TYPE) {
+    if (this._sourceTopic.getType() === INodeModel.CENTRAL_TOPIC_TYPE) {
       sourcePosition = Shape.workoutIncomingConnectionPoint(this._sourceTopic, toPosition);
     }
     const controlPoint = Shape.calculateDefaultControlPoints(sourcePosition, toPosition);
 
-    const spoint = new core.Point();
+    const spoint = new web2d.Point();
-    spoint.x = parseInt(controlPoint[0].x) + parseInt(sourcePosition.x);
+    spoint.x = parseInt(controlPoint[0].x, 10) + parseInt(sourcePosition.x, 10);
-    spoint.y = parseInt(controlPoint[0].y) + parseInt(sourcePosition.y);
+    spoint.y = parseInt(controlPoint[0].y, 10) + parseInt(sourcePosition.y, 10);
     return Shape.calculateRelationShipPointCoordinates(this._sourceTopic, spoint);
   },
 
@@ -150,7 +146,7 @@ const RelationshipPivot = new Class({
     const mindmap = this._designer.getMindmap();
 
     // Avoid circular connections ...
-    if (targetTopic.getId() != sourceTopic.getId()) {
+    if (targetTopic.getId() !== sourceTopic.getId()) {
       const relModel = mindmap.createRelationship(targetTopic.getId(), sourceTopic.getId());
       this._designer._actionDispatcher.addRelationship(relModel);
     }

packages/mindplot/src/components/RestPersistenceManager.js

@@ -15,7 +15,7 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const PersistenceManager = require('./PersistenceManager').default;
+import PersistenceManager from './PersistenceManager';
 
 const RESTPersistenceManager = new Class({
   Extends: PersistenceManager,
@@ -81,7 +81,7 @@ const RESTPersistenceManager = new Class({
           let userMsg = { severity: 'SEVERE', message: $msg('SAVE_COULD_NOT_BE_COMPLETED') };
 
           const contentType = xhr.getResponseHeader('Content-Type');
-          if (contentType != null && contentType.indexOf('application/json') != -1) {
+          if (contentType != null && contentType.indexOf('application/json') !== -1) {
             let serverMsg = null;
             try {
               serverMsg = $.parseJSON(responseText);

packages/mindplot/src/components/ScreenManager.js

@@ -15,9 +15,7 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Core = require('@wismapping/core-js');
+import web2d from '@wisemapping/web2d';
-
-const core = Core();
 
 const ScreenManager = new Class({
   initialize(divElement) {
@@ -43,12 +41,12 @@ const ScreenManager = new Class({
   },
 
   addEvent(event, listener) {
-    if (event == 'click') this._clickEvents.push(listener);
+    if (event === 'click') this._clickEvents.push(listener);
     else this._divContainer.bind(event, listener);
   },
 
   removeEvent(event, listener) {
-    if (event == 'click') {
+    if (event === 'click') {
       this._clickEvents.remove(listener);
     } else {
       this._divContainer.unbind(event, listener);
@@ -56,7 +54,7 @@ const ScreenManager = new Class({
   },
 
   fireEvent(type, event) {
-    if (type == 'click') {
+    if (type === 'click') {
       _.each(this._clickEvents, (listener) => {
         listener(type, event);
       });
@@ -96,10 +94,13 @@ const ScreenManager = new Class({
     const groupSize = group.getSize();
     const coordSize = group.getCoordSize();
 
-    const scale = { x: coordSize.width / parseInt(groupSize.width), y: coordSize.height / parseInt(groupSize.height) };
+    const scale = {
+      x: coordSize.width / parseInt(groupSize.width, 10),
+      y: coordSize.height / parseInt(groupSize.height, 10),
+    };
 
-    let x = (elementPosition.x - coordOrigin.x - (parseInt(imageSize.width) / 2)) / scale.x;
+    let x = (elementPosition.x - coordOrigin.x - parseInt(imageSize.width, 10) / 2) / scale.x;
-    let y = (elementPosition.y - coordOrigin.y - (parseInt(imageSize.height) / 2)) / scale.y;
+    let y = (elementPosition.y - coordOrigin.y - parseInt(imageSize.height, 10) / 2) / scale.y;
 
     // Retrieve iconGroup Position
     const groupPosition = iconGroup.getPosition();
@@ -109,7 +110,7 @@ const ScreenManager = new Class({
     // Retrieve topic Position
     const topic = iconGroup.getTopic();
     const topicPosition = this._getElementPosition(topic);
-    topicPosition.x -= (parseInt(topic.getSize().width) / 2);
+    topicPosition.x -= parseInt(topic.getSize().width, 10) / 2;
 
     // Remove decimal part..
     return { x: x + topicPosition.x, y: y + topicPosition.y };
@@ -134,7 +135,7 @@ const ScreenManager = new Class({
     y += this._padding.y;
 
     // Remove decimal part..
-    return new core.Point(x, y);
+    return new web2d.Point(x, y);
   },
 
   getContainer() {

packages/mindplot/src/components/ShrinkConnector.js

@@ -15,20 +15,18 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const web2D = require('@wismapping/web2d');
+import web2d from '@wisemapping/web2d';
 
-const web2d = web2D();
+import TopicConfig from './TopicConfig';
-
+import ActionDispatcher from './ActionDispatcher';
-const Topic = require('./Topic').default;
-const ActionDispatcher = require('./ActionDispatcher').default;
 
 const ShirinkConnector = new Class({
   initialize(topic) {
-    const ellipse = new web2D.Elipse(Topic.prototype.INNER_RECT_ATTRIBUTES);
+    const ellipse = new web2d.Elipse(TopicConfig.INNER_RECT_ATTRIBUTES);
     this._ellipse = ellipse;
     ellipse.setFill('rgb(62,118,179)');
 
-    ellipse.setSize(Topic.CONNECTOR_WIDTH, Topic.CONNECTOR_WIDTH);
+    ellipse.setSize(TopicConfig.CONNECTOR_WIDTH, TopicConfig.CONNECTOR_WIDTH);
     ellipse.addEvent('click', (event) => {
       const model = topic.getModel();
       const collapse = !model.areChildrenShrunken();
@@ -50,11 +48,11 @@ const ShirinkConnector = new Class({
       event.stopPropagation();
     });
 
-    ellipse.addEvent('mouseover', (event) => {
+    ellipse.addEvent('mouseover', () => {
       ellipse.setFill('rgb(153, 0, 255)');
     });
     const me = this;
-    ellipse.addEvent('mouseout', (event) => {
+    ellipse.addEvent('mouseout', () => {
       const color = topic.getBackgroundColor();
       me.setFill(color);
     });

packages/mindplot/src/components/StandaloneActionDispatcher.js

@@ -15,18 +15,18 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const ActionDispatcher = require('./ActionDispatcher').default;
+import ActionDispatcher from './ActionDispatcher';
-const DesignerActionRunner = require('./DesignerActionRunner').default;
+import DesignerActionRunner from './DesignerActionRunner';
-const AddTopicCommand = require('./commands/AddTopicCommand').default;
+import AddTopicCommand from './commands/AddTopicCommand';
-const AddRelationshipCommand = require('./commands/AddRelationshipCommand').default;
+import AddRelationshipCommand from './commands/AddRelationshipCommand';
-const AddFeatureToTopicCommand = require('./commands/AddFeatureToTopicCommand').default;
+import AddFeatureToTopicCommand from './commands/AddFeatureToTopicCommand';
-const DeleteCommand = require('./commands/DeleteCommand').default;
+import DeleteCommand from './commands/DeleteCommand';
-const RemoveFeatureFromTopicCommand = require('./commands/RemoveFeatureFromTopicCommand').default;
+import RemoveFeatureFromTopicCommand from './commands/RemoveFeatureFromTopicCommand';
-const DragTopicCommand = require('./commands/DragTopicCommand').default;
+import DragTopicCommand from './commands/DragTopicCommand';
-const GenericFunctionCommand = require('./commands/GenericFunctionCommand').default;
+import GenericFunctionCommand from './commands/GenericFunctionCommand';
-const MoveControlPointCommand = require('./commands/MoveControlPointCommand').default;
+import MoveControlPointCommand from './commands/MoveControlPointCommand';
-const ChangeFeatureToTopicCommand = require('./commands/ChangeFeatureToTopicCommand').default;
+import ChangeFeatureToTopicCommand from './commands/ChangeFeatureToTopicCommand';
-const NodeModel = require('./model/NodeModel').default;
+import NodeModel from './model/NodeModel';
 
 const StandaloneActionDispatcher = new Class(
   /** @lends StandaloneActionDispatcher */ {
@@ -93,7 +93,7 @@ const StandaloneActionDispatcher = new Class(
     changeFontStyleToTopic(topicsIds) {
       const commandFunc = function (topic) {
         const result = topic.getFontStyle();
-        const style = result == 'italic' ? 'normal' : 'italic';
+        const style = result === 'italic' ? 'normal' : 'italic';
         topic.setFontStyle(style, true);
         return result;
       };
@@ -219,7 +219,7 @@ const StandaloneActionDispatcher = new Class(
 
       const commandFunc = function (topic) {
         const result = topic.getFontWeight();
-        const weight = result == 'bold' ? 'normal' : 'bold';
+        const weight = result === 'bold' ? 'normal' : 'bold';
         topic.setFontWeight(weight, true);
 
         topic._adjustShapes();
@@ -289,10 +289,10 @@ const CommandContext = new Class(
       const designerTopics = this._designer.getModel().getTopics();
       const result = designerTopics.filter((topic) => topicsIds.contains(topic.getId()));
 
-      if (result.length != topicsIds.length) {
+      if (result.length !== topicsIds.length) {
         const ids = designerTopics.map((topic) => topic.getId());
         $assert(
-          result.length == topicsIds.length,
+          result.length === topicsIds.length,
           `Could not find topic. Result:${
             result
           }, Filter Criteria:${

packages/mindplot/src/components/TextEditor.js

@@ -12,11 +12,9 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const web2D = require('@wismapping/web2d');
+import web2d from '@wisemapping/web2d';
 
-const web2d = web2D();
+import ActionDispatcher from './ActionDispatcher';
-
-const ActionDispatcher = require('./ActionDispatcher').default;
 
 // FIXME: Not used!
 const TextEditor = new Class({
@@ -42,12 +40,11 @@ const TextEditor = new Class({
     });
     inputContainer.inject(result);
 
-    const inputText = new Element('input',
+    const inputText = new Element('input', {
-      {
+      type: 'text',
-        type: 'text',
+      tabindex: '-1',
-        tabindex: '-1',
+      value: '',
-        value: '',
+    });
-      });
     inputText.setStyles({
       border: 'none',
       background: 'transparent',
@@ -82,8 +79,9 @@ const TextEditor = new Class({
         default:
           spanElem.innerHTML = inputElem.value;
           var size = inputElem.value.length + 1;
+
           inputElem.size = size;
-          if (spanElem.offsetWidth > (parseInt(divElem.style.width) - 100)) {
+          if (spanElem.offsetWidth > parseInt(divElem.style.width, 10) - 100) {
             divElem.style.width = `${spanElem.offsetWidth + 100}px`;
           }
           break;
@@ -104,11 +102,11 @@ const TextEditor = new Class({
   },
 
   isVisible() {
-    return $defined(this._containerElem) && this._containerElem.getStyle('display') == 'block';
+    return $defined(this._containerElem) && this._containerElem.getStyle('display') === 'block';
   },
 
   _updateModel() {
-    if (this._topic.getText() != this._getText()) {
+    if (this._topic.getText() !== this._getText()) {
       const text = this._getText();
       const topicId = this._topic.getId();
 
@@ -196,7 +194,9 @@ const TextEditor = new Class({
   _setText(text) {
     const inputField = this._getTextareaElem();
     inputField.size = text.length + 1;
-    this._containerElem.style.width = `${inputField.size * parseInt(inputField.style.fontSize) + 100}px`;
+    this._containerElem.style.width = `${
+      inputField.size * parseInt(inputField.style.fontSize, 10) + 100
+    }px`;
     const spanField = this._getSpanElem();
     spanField.innerHTML = text;
     inputField.value = text;
@@ -216,7 +216,7 @@ const TextEditor = new Class({
 
   _setEditorSize(width, height) {
     const textShape = this._topic.getTextShape();
-    const scale = web2d.utils.TransformUtil.workoutScale(textShape._peer);
+    const scale = web2d.utils.TransformUtil.workoutScale(textShape.peer);
     this._size = { width: width * scale.width, height: height * scale.height };
     this._containerElem.style.width = `${this._size.width * 2}px`;
     this._containerElem.style.height = `${this._size.height}px`;
@@ -224,8 +224,8 @@ const TextEditor = new Class({
 
   _positionCursor(inputElem, selectText) {
     // Select text if it's required ...
-    if (inputElem.createTextRange) // ie
+    if (inputElem.createTextRange) {
-    {
+      // ie
       const range = inputElem.createTextRange();
       const pos = inputElem.value.length;
       if (!selectText) {

packages/mindplot/src/components/TextEditorFactory.js

@@ -15,7 +15,7 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const TextEditor = require('./TextEditor').default;
+import TextEditor from './TextEditor';
 
 const TextEditorFactory = {};
 

packages/mindplot/src/components/Topic.js

@@ -15,23 +15,22 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const web2D = require('@wismapping/web2d');
+import web2d from '@wisemapping/web2d';
 
-const web2d = web2D();
+import NodeGraph from './NodeGraph';
-const NodeGraph = require('./NodeGraph').default;
+import TopicConfig from './TopicConfig';
-const { TopicShape } = require('./model/INodeModel');
+import TopicStyle from './TopicStyle';
-const TopicStyle = require('./TopicStyle').default;
+import TopicFeature from './TopicFeature';
-const TopicFeature = require('./TopicFeature').default;
+import ConnectionLine from './ConnectionLine';
-const ConnectionLine = require('./ConnectionLine').default;
+import IconGroup from './IconGroup';
-const IconGroup = require('./IconGroup').default;
+import FadeEffect from './util/FadeEffect';
-const FadeEffect = require('./util/FadeEffect').default;
+import EventBus from './layout/EventBus';
-const EventBus = require('./layout/EventBus').default;
+import ShirinkConnector from './ShrinkConnector';
-const ShirinkConnector = require('./ShrinkConnector').default;
+import NoteEditor from './widget/NoteEditor';
-const NoteEditor = require('./widget/NoteEditor').default;
+import ActionDispatcher from './ActionDispatcher';
-const ActionDispatcher = require('./ActionDispatcher').default;
+import LinkEditor from './widget/LinkEditor';
-const LinkEditor = require('./widget/LinkEditor').default;
+import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher';
-const TopicEventDispatcher = require('./TopicEventDispatcher').default;
+import INodeModel, { TopicShape } from './model/INodeModel';
-const INodeModel = require('./model/INodeModel').default;
 
 const Topic = new Class(
   /** @lends Topic */ {
@@ -151,7 +150,7 @@ const Topic = new Class(
       if (!$defined(this._innerShape)) {
         // Create inner box.
         this._innerShape = this._buildShape(
-          Topic.INNER_RECT_ATTRIBUTES,
+          TopicConfig.INNER_RECT_ATTRIBUTES,
           this.getShapeType(),
         );
 
@@ -178,9 +177,9 @@ const Topic = new Class(
       $assert(shapeType, 'shapeType can not be null');
 
       let result;
-      if (shapeType == TopicShape.RECTANGLE) {
+      if (shapeType === TopicShape.RECTANGLE) {
         result = new web2d.Rect(0, attributes);
-      } else if (shapeType == TopicShape.IMAGE) {
+      } else if (shapeType === TopicShape.IMAGE) {
         const model = this.getModel();
         const url = model.getImageUrl();
         const size = model.getImageSize();
@@ -194,11 +193,11 @@ const Topic = new Class(
         };
 
         result.setPosition = function () {};
-      } else if (shapeType == TopicShape.ELLIPSE) {
+      } else if (shapeType === TopicShape.ELLIPSE) {
         result = new web2d.Rect(0.9, attributes);
-      } else if (shapeType == TopicShape.ROUNDED_RECT) {
+      } else if (shapeType === TopicShape.ROUNDED_RECT) {
         result = new web2d.Rect(0.3, attributes);
-      } else if (shapeType == TopicShape.LINE) {
+      } else if (shapeType === TopicShape.LINE) {
         result = new web2d.Line({ strokeColor: '#495879', strokeWidth: 1 });
         result.setSize = function (width, height) {
           this.size = { width, height };
@@ -241,7 +240,10 @@ const Topic = new Class(
     /** @return outer shape */
     getOuterShape() {
       if (!$defined(this._outerShape)) {
-        const rect = this._buildShape(Topic.OUTER_SHAPE_ATTRIBUTES, TopicShape.ROUNDED_RECT);
+        const rect = this._buildShape(
+          TopicConfig.OUTER_SHAPE_ATTRIBUTES,
+          TopicShape.ROUNDED_RECT,
+        );
         rect.setPosition(-2, -3);
         rect.setOpacity(0);
         this._outerShape = rect;
@@ -293,7 +295,7 @@ const Topic = new Class(
         const icon = TopicFeature.createIcon(this, featureModel, this.isReadOnly());
         result.addIcon(
           icon,
-          featureModel.getType() == TopicFeature.Icon.id && !this.isReadOnly(),
+          featureModel.getType() === TopicFeature.Icon.id && !this.isReadOnly(),
         );
       }
 
@@ -316,7 +318,7 @@ const Topic = new Class(
       const result = TopicFeature.createIcon(this, featureModel, this.isReadOnly());
       iconGroup.addIcon(
         result,
-        featureModel.getType() == TopicFeature.Icon.id && !this.isReadOnly(),
+        featureModel.getType() === TopicFeature.Icon.id && !this.isReadOnly(),
       );
 
       this._adjustShapes();
@@ -506,7 +508,7 @@ const Topic = new Class(
     /** */
     setText(text) {
       // Avoid empty nodes ...
-      if (!text || $.trim(text).length == 0) {
+      if (!text || $.trim(text).length === 0) {
         text = null;
       }
 
@@ -606,7 +608,7 @@ const Topic = new Class(
 
       // Update figure size ...
       const model = this.getModel();
-      if (model.getFeatures().length != 0) {
+      if (model.getFeatures().length !== 0) {
         this.getOrBuildIconGroup();
       }
 
@@ -1334,34 +1336,4 @@ const Topic = new Class(
   },
 );
 
-/**
- * @constant
- * @type {Number}
- * @default
- */
-Topic.CONNECTOR_WIDTH = 6;
-/**
- * @constant
- * @type {Object<String, Number>}
- * @default
- */
-Topic.OUTER_SHAPE_ATTRIBUTES = {
-  fillColor: 'rgb(252,235,192)',
-  stroke: '1 dot rgb(241,163,39)',
-  x: 0,
-  y: 0,
-};
-/**
- * @constant
- * @type {Object<String, Number>}
- * @default
- */
-Topic.OUTER_SHAPE_ATTRIBUTES_FOCUS = { fillColor: 'rgb(244,184,45)', x: 0, y: 0 };
-/**
- * @constant
- * @type {Object<String>}
- * @default
- * */
-Topic.INNER_RECT_ATTRIBUTES = { stroke: '2 solid' };
-
 export default Topic;

packages/mindplot/src/components/TopicConfig.js

@@ -0,0 +1,36 @@
+/**
+ * @constant
+ * @type {Number}
+ * @default
+ */
+export const CONNECTOR_WIDTH = 6;
+/**
+ * @constant
+ * @type {Object<String, Number>}
+ * @default
+ */
+export const OUTER_SHAPE_ATTRIBUTES = {
+  fillColor: 'rgb(252,235,192)',
+  stroke: '1 dot rgb(241,163,39)',
+  x: 0,
+  y: 0,
+};
+/**
+ * @constant
+ * @type {Object<String, Number>}
+ * @default
+ */
+export const OUTER_SHAPE_ATTRIBUTES_FOCUS = { fillColor: 'rgb(244,184,45)', x: 0, y: 0 };
+/**
+ * @constant
+ * @type {Object<String>}
+ * @default
+ * */
+export const INNER_RECT_ATTRIBUTES = { stroke: '2 solid' };
+
+export default {
+  CONNECTOR_WIDTH,
+  OUTER_SHAPE_ATTRIBUTES,
+  OUTER_SHAPE_ATTRIBUTES_FOCUS,
+  INNER_RECT_ATTRIBUTES,
+};

packages/mindplot/src/components/TopicEventDispatcher.js

@@ -15,23 +15,17 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Events = require('./Events').default;
+import Events from './Events';
-const MultilineTextEditor = require('./MultilineTextEditor').default;
+import MultilineTextEditor from './MultilineTextEditor';
-const { TopicShape } = require('./model/INodeModel');
+import { TopicShape } from './model/INodeModel';
+
+const TopicEvent = {
+  EDIT: 'editnode',
+  CLICK: 'clicknode',
+};
 
 const TopicEventDispatcher = new Class({
   Extends: Events,
-  Static: {
-    _instance: null,
-
-    configure(readOnly) {
-      this._instance = new TopicEventDispatcher(readOnly);
-    },
-
-    getInstance() {
-      return this._instance;
-    },
-  },
 
   initialize(readOnly) {
     this._readOnly = readOnly;
@@ -61,9 +55,9 @@ const TopicEventDispatcher = new Class({
     // Open the new editor ...
     const model = topic.getModel();
     if (
-      model.getShapeType() != TopicShape.IMAGE
+      model.getShapeType() !== TopicShape.IMAGE
             && !this._readOnly
-            && eventType == TopicEvent.EDIT
+            && eventType === TopicEvent.EDIT
     ) {
       this._multilineEditor.show(topic, options ? options.text : null);
       this._activeEditor = this._multilineEditor;
@@ -77,10 +71,15 @@ const TopicEventDispatcher = new Class({
   },
 });
 
-const TopicEvent = {
+TopicEventDispatcher._instance = null;
-  EDIT: 'editnode',
+
-  CLICK: 'clicknode',
+TopicEventDispatcher.configure = function configure(readOnly) {
+  this._instance = new TopicEventDispatcher(readOnly);
+};
+
+TopicEventDispatcher.getInstance = function getInstance() {
+  return this._instance;
 };
 
 export { TopicEvent };
-export default TopicEvent;
+export default TopicEventDispatcher;

packages/mindplot/src/components/TopicFeature.js

@@ -17,12 +17,12 @@
  */
 
 /** */
-const IconModel = require('./model/IconModel').default;
+import IconModel from './model/IconModel';
-const ImageIcon = require('./ImageIcon').default;
+import ImageIcon from './ImageIcon';
-const LinkModel = require('./model/LinkModel').default;
+import LinkModel from './model/LinkModel';
-const LinkIcon = require('./LinkIcon').default;
+import LinkIcon from './LinkIcon';
-const NoteModel = require('./model/NoteModel').default;
+import NoteModel from './model/NoteModel';
-const NoteIcon = require('./NoteIcon').default;
+import NoteIcon from './NoteIcon';
 
 const TopicFeature = {
   /** the icon object */
@@ -51,7 +51,7 @@ const TopicFeature = {
      * @return {Boolean} returns true if the given id is contained in the metadata array
      */
   isSupported(id) {
-    return TopicFeature._featuresMetadataById.some((elem) => elem.id == id);
+    return TopicFeature._featuresMetadataById.some((elem) => elem.id === id);
   },
 
   /**
@@ -66,7 +66,7 @@ const TopicFeature = {
     $assert(type, 'type can not be null');
     $assert(attributes, 'attributes can not be null');
 
-    const { model } = TopicFeature._featuresMetadataById.filter((elem) => elem.id == type)[0];
+    const { model } = TopicFeature._featuresMetadataById.filter((elem) => elem.id === type)[0];
     return new model(attributes);
   },
 
@@ -82,7 +82,7 @@ const TopicFeature = {
     $assert(topic, 'topic can not be null');
     $assert(model, 'model can not be null');
 
-    const { icon } = TopicFeature._featuresMetadataById.filter((elem) => elem.id == model.getType())[0];
+    const { icon } = TopicFeature._featuresMetadataById.filter((elem) => elem.id === model.getType())[0];
     return new icon(topic, model, readOnly);
   },
 };

packages/mindplot/src/components/TopicStyle.js

@@ -15,57 +15,55 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const { TopicShape } = require('./model/INodeModel');
+import { TopicShape } from './model/INodeModel';
 
-const TopicStyle = new Class({
+const TopicStyle = new Class({});
-  Static: {
-    _getStyles(topic) {
-      $assert(topic, 'topic can not be null');
 
-      let result;
+TopicStyle._getStyles = function _getStyles(topic) {
-      if (topic.isCentralTopic()) {
+  $assert(topic, 'topic can not be null');
-        result = TopicStyle.STYLES.CENTRAL_TOPIC;
+
+  let result;
+  if (topic.isCentralTopic()) {
+    result = TopicStyle.STYLES.CENTRAL_TOPIC;
+  } else {
+    const targetTopic = topic.getOutgoingConnectedTopic();
+    if ($defined(targetTopic)) {
+      if (targetTopic.isCentralTopic()) {
+        result = TopicStyle.STYLES.MAIN_TOPIC;
       } else {
-        const targetTopic = topic.getOutgoingConnectedTopic();
+        result = TopicStyle.STYLES.SUB_TOPIC;
-        if ($defined(targetTopic)) {
-          if (targetTopic.isCentralTopic()) {
-            result = TopicStyle.STYLES.MAIN_TOPIC;
-          } else {
-            result = TopicStyle.STYLES.SUB_TOPIC;
-          }
-        } else {
-          result = TopicStyle.STYLES.ISOLATED_TOPIC;
-        }
       }
-      return result;
+    } else {
-    },
+      result = TopicStyle.STYLES.ISOLATED_TOPIC;
+    }
+  }
+  return result;
+};
 
-    defaultText(topic) {
+TopicStyle.defaultText = function defaultText(topic) {
-      const { msgKey } = this._getStyles(topic);
+  const { msgKey } = this._getStyles(topic);
-      return $msg(msgKey);
+  return $msg(msgKey);
-    },
+};
 
-    defaultFontStyle(topic) {
+TopicStyle.defaultFontStyle = function defaultFontStyle(topic) {
-      return this._getStyles(topic).fontStyle;
+  return this._getStyles(topic).fontStyle;
-    },
+};
 
-    defaultBackgroundColor(topic) {
+TopicStyle.defaultBackgroundColor = function defaultBackgroundColor(topic) {
-      return this._getStyles(topic).backgroundColor;
+  return this._getStyles(topic).backgroundColor;
-    },
+};
 
-    defaultBorderColor(topic) {
+TopicStyle.defaultBorderColor = function defaultBorderColor(topic) {
-      return this._getStyles(topic).borderColor;
+  return this._getStyles(topic).borderColor;
-    },
+};
 
-    getInnerPadding(topic) {
+TopicStyle.getInnerPadding = function getInnerPadding(topic) {
-      return this._getStyles(topic).innerPadding;
+  return this._getStyles(topic).innerPadding;
-    },
+};
 
-    defaultShapeType(topic) {
+TopicStyle.defaultShapeType = function defaultShapeType(topic) {
-      return this._getStyles(topic).shapeType;
+  return this._getStyles(topic).shapeType;
-    },
+};
-  },
-});
 
 TopicStyle.STYLES = {
   CENTRAL_TOPIC: {

packages/mindplot/src/components/Workspace.js

@@ -15,9 +15,7 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const web2D = require('@wismapping/web2d');
+import web2d from '@wisemapping/web2d';
-
-const web2d = web2D();
 
 const Workspace = new Class({
   initialize(screenManager, zoom) {
@@ -29,8 +27,8 @@ const Workspace = new Class({
     this._screenManager = screenManager;
 
     const divContainer = screenManager.getContainer();
-    this._screenWidth = parseInt(divContainer.css('width'));
+    this._screenWidth = parseInt(divContainer.css('width'), 10);
-    this._screenHeight = parseInt(divContainer.css('height'));
+    this._screenHeight = parseInt(divContainer.css('height'), 10);
 
     // Initialize web2d workspace.
     const workspace = this._createWorkspace();

packages/mindplot/src/components/commands/AddFeatureToTopicCommand.js

@@ -0,0 +1,70 @@
+/*
+ *    Copyright [2015] [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 Command from '../Command';
+
+const AddFeatureToTopicCommand = new Class(
+  /** @lends AddFeatureToTopicCommand */ {
+    Extends: Command,
+    /*
+    * @classdesc This command class handles do/undo of adding features to topics, e.g. an
+    * icon or a note. For a reference of existing features, refer to {@link mindplot.TopicFeature}
+    * @constructs
+    * @param {String} topicId the id of the topic
+    * @param {String} featureType the id of the feature type to add, e.g. "icon"
+    * @param {Object} attributes the attribute(s) of the respective feature model
+    * @extends mindplot.Command
+    * @see mindplot.model.FeatureModel and subclasses
+    */
+    initialize(topicId, featureType, attributes) {
+      $assert($defined(topicId), 'topicId can not be null');
+      $assert(featureType, 'featureType can not be null');
+      $assert(attributes, 'attributes can not be null');
+
+      this.parent();
+      this._topicId = topicId;
+      this._featureType = featureType;
+      this._attributes = attributes;
+      this._featureModel = null;
+    },
+
+    /**
+         * Overrides abstract parent method
+         */
+    execute(commandContext) {
+      const topic = commandContext.findTopics(this._topicId)[0];
+
+      // Feature must be created only one time.
+      if (!this._featureModel) {
+        const model = topic.getModel();
+        this._featureModel = model.createFeature(this._featureType, this._attributes);
+      }
+      topic.addFeature(this._featureModel);
+    },
+
+    /**
+         * Overrides abstract parent method
+         * @see {@link mindplot.Command.undoExecute}
+         */
+    undoExecute(commandContext) {
+      const topic = commandContext.findTopics(this._topicId)[0];
+      topic.removeFeature(this._featureModel);
+    },
+  },
+);
+
+export default AddFeatureToTopicCommand;

packages/mindplot/src/components/commands/AddRelationshipCommand.js

@@ -15,7 +15,7 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Command = require('../Command').default;
+import Command from '../Command';
 
 const AddRelationshipCommand = new Class(/** @lends AddRelationshipCommand */{
   Extends: Command,

packages/mindplot/src/components/commands/AddTopicCommand.js

@@ -15,20 +15,20 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Command = require('../Command').default;
+import Command from '../Command';
 
 const AddTopicCommand = new Class(
   /** @lends AddTopicCommand */ {
     Extends: Command,
     /**
-         * @classdesc This command class handles do/undo of adding one or multiple topics to
+     * @classdesc This command class handles do/undo of adding one or multiple topics to
-         * the mindmap.
+     * the mindmap.
-         * @constructs
+     * @constructs
-         * @param {Array<mindplot.model.NodeModel>} models one or multiple models
+     * @param {Array<mindplot.model.NodeModel>} models one or multiple models
-         * @param {Array<String>} parentTopicsId ids of the parent topics to add the children to, or null
+     * @param {Array<String>} parentTopicsId ids of the parent topics to add the children to, or null
-         * when attaching a dragged node or a node/branch from clipboard
+     * when attaching a dragged node or a node/branch from clipboard
-         * @extends mindplot.Command
+     * @extends mindplot.Command
-         */
+     */
     initialize(models, parentTopicsId) {
       $assert(models, 'models can not be null');
       $assert(

packages/mindplot/src/components/commands/ChangeFeatureToTopicCommand.js

@@ -15,7 +15,7 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Command = require('../Command').default;
+import Command from '../Command';
 
 const ChangeFeatureToTopicCommand = new Class(/** @lends ChangeFeatureToTopicCommand */{
   Extends: Command,

packages/mindplot/src/components/commands/DeleteCommand.js

@@ -15,7 +15,7 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Command = require('../Command').default;
+import Command from '../Command';
 
 const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{
   Extends: Command,

packages/mindplot/src/components/commands/DragTopicCommand.js

@@ -15,7 +15,7 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Command = require('../Command').default;
+import Command from '../Command';
 
 const DragTopicCommand = new Class(/** @lends DragTopicCommand */{
   Extends: Command,
@@ -54,7 +54,7 @@ const DragTopicCommand = new Class(/** @lends DragTopicCommand */{
     const origPosition = topic.getPosition();
 
     // Disconnect topic ..
-    if ($defined(origParentTopic) && origParentTopic != this._parentId) {
+    if ($defined(origParentTopic) && origParentTopic !== this._parentId) {
       commandContext.disconnect(topic);
     }
 
@@ -68,7 +68,7 @@ const DragTopicCommand = new Class(/** @lends DragTopicCommand */{
     }
 
     // Finally, connect topic ...
-    if (origParentTopic != this._parentId) {
+    if (origParentTopic !== this._parentId) {
       if ($defined(this._parentId)) {
         const parentTopic = commandContext.findTopics(this._parentId)[0];
         commandContext.connect(topic, parentTopic);

packages/mindplot/src/components/commands/GenericFunctionCommand.js

@@ -15,7 +15,7 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Command = require('../Command').default;
+import Command from '../Command';
 
 const GenericFunctionCommand = new Class(/** @lends GenericFunctionCommand */{
   Extends: Command,
@@ -87,7 +87,7 @@ const GenericFunctionCommand = new Class(/** @lends GenericFunctionCommand */{
       this.applied = false;
       this._oldValues = [];
     } else {
-      throw 'undo can not be applied.';
+      throw new Error('undo can not be applied.');
     }
   },
 });

packages/mindplot/src/components/commands/MoveControlPointCommand.js

@@ -15,7 +15,7 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Command = require('../Command').default;
+import Command from '../Command';
 
 const MoveControlPointCommand = new Class(
   /** @lends MoveControlPointCommand */ {
@@ -50,6 +50,8 @@ const MoveControlPointCommand = new Class(
           this._wasCustom = this._line.getLine().isDestControlPointCustom();
           this._endPoint = this._line.getLine().getTo().clone();
           break;
+        default:
+          break;
       }
       this._point = point;
     },
@@ -57,7 +59,7 @@ const MoveControlPointCommand = new Class(
     /**
          * Overrides abstract parent method
          */
-    execute(commandContext) {
+    execute() {
       const model = this._line.getModel();
       switch (this._point) {
         case 0:
@@ -73,6 +75,8 @@ const MoveControlPointCommand = new Class(
           this._line.setIsDestControlPointCustom(true);
           this._line.setDestControlPoint(this._controlPoint.clone());
           break;
+        default:
+          break;
       }
       if (this._line.isOnFocus()) {
         this._line._refreshShape();
@@ -85,7 +89,7 @@ const MoveControlPointCommand = new Class(
          * Overrides abstract parent method
          * @see {@link mindplot.Command.undoExecute}
          */
-    undoExecute(commandContext) {
+    undoExecute() {
       const line = this._line;
       const model = line.getModel();
       switch (this._point) {
@@ -105,6 +109,8 @@ const MoveControlPointCommand = new Class(
             line.setIsDestControlPointCustom(this._wasCustom);
           }
           break;
+        default:
+          break;
       }
       this._line.getLine().updateLine(this._point);
       if (this._line.isOnFocus()) {

packages/mindplot/src/components/commands/RemoveFeatureFromTopicCommand.js

@@ -15,7 +15,7 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Command = require('../Command').default;
+import Command from '../Command';
 
 const RemoveFeatureFromTopicCommand = new Class(/** @lends RemoveFeatureFromTopicCommand */{
   Extends: Command,

packages/mindplot/src/components/commands/index.js

@@ -0,0 +1,21 @@
+import addFeatureToTopicCommand from './AddFeatureToTopicCommand';
+import addRelationshipCommand from './AddRelationshipCommand';
+import addTopicCommand from './AddTopicCommand';
+import changeFeatureToTopicCommand from './ChangeFeatureToTopicCommand';
+import deleteCommand from './DeleteCommand';
+import dragTopicCommand from './DragTopicCommand';
+import genericFunctionCommand from './GenericFunctionCommand';
+import moveControlPointCommand from './MoveControlPointCommand';
+import removeFeatureFromTopicCommand from './RemoveFeatureFromTopicCommand';
+
+export default {
+  AddFeatureToTopicCommand: addFeatureToTopicCommand,
+  AddRelationshipCommand: addRelationshipCommand,
+  AddTopicCommand: addTopicCommand,
+  ChangeFeatureToTopicCommand: changeFeatureToTopicCommand,
+  DeleteCommand: deleteCommand,
+  DragTopicCommand: dragTopicCommand,
+  GenericFunctionCommand: genericFunctionCommand,
+  MoveControlPointCommand: moveControlPointCommand,
+  RemoveFeatureFromTopicCommand: removeFeatureFromTopicCommand,
+};