@dualbox/editor 1.0.9 → 1.0.11

package/js/src/GraphEditor.js

@@ -66,6 +66,10 @@ class DualboxEditor {
         // signature: find( name, version ), return a Promise which, when resolved, is a package.json
         this.loadPackage = (name, version) => {
             version = version || "*";
+            if( name.startsWith('dualbox-core') ) {
+                name = "@dualbox/dualbox";
+            }
+
             return new Promise((resolve, reject) => {
                 if( this.packages[name] ) {
                     resolve(this.packages[name]);
@@ -104,10 +108,17 @@ class DualboxEditor {
         this.loadCorePackages();
 
         if( attrs.json ) {
-            this.setApp(attrs.json);
+            this.onReady(() => {
+                this.setApp(attrs.json);
+            });
         }
     }
 
+    // call cb when the editor is initialized
+    onReady(cb) {
+        this.v.onReady(cb);
+    }
+
     loadCorePackages() {
         this.loadPackage('@dualbox/dualbox');
         this.loadPackage('dualbox-core-if');

package/js/src/v/GraphView.js

@@ -60,6 +60,8 @@ class GraphView {
         this.cssCode = null;
 
         // load the main template
+        this.initialized = false;
+        this.initializing = false;
         this.initialize();
     }
 
@@ -77,29 +79,65 @@ class GraphView {
         });
     }
 
+    onReady(cb) {
+        if( this.initialized ) {
+            if(cb) cb();
+        }
+        else {
+            setTimeout(() => {
+                this.onReady(cb);
+            }, 100);
+        }
+    }
+
     initialize() {
-        // add main template
-        this.templateMgr.appendTemplate(this.div, "main", {showLoadSaveButtons: this.attrs.showLoadSaveButtons}, () => {
-            // for convenience, define thoses once the main div is ready
-            this.div.ready(() => {
-                this.graphContainer = this.div.find('.dualbox-graph-container');
-                this.canvas = this.div.find('.dualbox-graph-canvas');
-                this.selector = new Selector(this, this.graphContainer);
-                this.translater = new Translater(this, this.graphContainer, this.canvas);
-                this.zoomer = new Zoomer(this, this.graphContainer, this.canvas);
-                this.jsPlumbInstance = jsPlumb.getInstance({
-                    DragOptions: { cursor: 'pointer', zIndex: 2500 }, // default drag options
-                    Container: "dualbox-graph-canvas"
+        if( !this.initializing && !this.initialized ) {
+            this.initializing = true;
+
+            var templates = { "main": false, "addNode" : false };
+            var templateInitialized = (name) => {
+                if( templates[name] == false ) templates[name] = true;
+
+                var allInitialized = true;
+                _.each(templates, (initialized, name) => {
+                    if( !initialized ) {
+                        allInitialized = false;
+                    }
+                });
+
+                if( allInitialized ) {
+                    this.initializing = false;
+                    this.initialized = true;
+                }
+            }
+
+            // add main template
+            this.templateMgr.appendTemplate(this.div, "main", {showLoadSaveButtons: this.attrs.showLoadSaveButtons}, () => {
+                // for convenience, define thoses once the main div is ready
+                this.div.ready(() => {
+                    this.graphContainer = this.div.find('.dualbox-graph-container');
+                    this.canvas = this.div.find('.dualbox-graph-canvas');
+                    this.selector = new Selector(this, this.graphContainer);
+                    this.translater = new Translater(this, this.graphContainer, this.canvas);
+                    this.zoomer = new Zoomer(this, this.graphContainer, this.canvas);
+                    this.jsPlumbInstance = jsPlumb.getInstance({
+                        DragOptions: { cursor: 'pointer', zIndex: 2500 }, // default drag options
+                        Container: "dualbox-graph-canvas"
+                    });
+                    this.style.setDefault();
+                    this.initializeListeners();
+                    this.setNavigation();
+                    this.canvasSizeHandler = new CanvasSizeHandler(this, this.canvas);
+                    this.appManager = new AppManager(this, this.div.find('.application') );
+
+                    templateInitialized("main");
                 });
-                this.style.setDefault();
-                this.initializeListeners();
-                this.setNavigation();
-                this.canvasSizeHandler = new CanvasSizeHandler(this, this.canvas);
-                this.appManager = new AppManager(this, this.div.find('.application') );
             });
-        });
 
-        this.templateMgr.appendTemplate(this.div, "addNode"); // "add node" modal
+            this.templateMgr.appendTemplate(this.div, "addNode", {}, () => {
+                templateInitialized("addNode");
+            }); // "add node" modal
+        }
     }
 
     // bind jsplumb events

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dualbox/editor",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "Editor of Dualbox apps",
   "browser": "js/dist/GraphEditor.js",
   "main": "js/dist/GraphEditor.js",