#5 Working with loading progress status

Author: SeungpilPark

src/main/webapp/examples/develope.html

@@ -321,6 +321,10 @@
             // Shape 이 Disconnect 되었을 때의 이벤트 리스너
             canvas.onDisconnectShape(function (event, edgeElement, fromElement, toElement) {
             });
+
+            canvas.onLoading(function(event, progress){
+                console.log(progress);
+            });
 //            window.canvas = canvas;
 //
 //            var worker = new Worker('../src/worker/og-worker.js');

src/main/webapp/opengraph/OpenGraph-0.1.2-SNAPSHOT-All.js

@@ -33011,7 +33011,7 @@ OG.graph.Canvas.prototype = {
         });
         sliderBar.css({
             position: 'relative',
-            'writing-mode': 'bt-lr', /* IE */
+            //'writing-mode': 'bt-lr', /* IE */
             'width': '100%',
             'height': '8px'
         });
@@ -34423,6 +34423,8 @@ OG.graph.Canvas.prototype = {
             fromEdge, toEdge, label, fromLabel, toLabel, angle, value, data, dataExt, element, loopType, taskType, swimlane, textList;
 
         this._RENDERER.clear();
+        var renderer = this._RENDERER;
+        $(renderer._PAPER.canvas).trigger('loading', ['start']);
 
         if (json && json.opengraph && json.opengraph.cell && OG.Util.isArray(json.opengraph.cell)) {
             canvasWidth = json.opengraph['@width'];
@@ -34447,6 +34449,9 @@ OG.graph.Canvas.prototype = {
             }
 
             cell = json.opengraph.cell;
+            var totalCount = cell.length;
+            var cellCount = 0;
+
             for (var i = 0, leni = cell.length; i < leni; i++) {
                 id = cell[i]['@id'];
                 parent = cell[i]['@parent'];
@@ -34595,9 +34600,13 @@ OG.graph.Canvas.prototype = {
                 if (dataExt) {
                     element.dataExt = OG.JSON.decode(unescape(dataExt));
                 }
+
+                cellCount++;
+                $(renderer._PAPER.canvas).trigger('loading', [Math.round((cellCount/totalCount)*100)]);
             }
 
             this.fastLoadingOFF();
+            $(renderer._PAPER.canvas).trigger('loading', ['end']);
 
             return {
                 width: maxX - minX,
@@ -34610,6 +34619,7 @@ OG.graph.Canvas.prototype = {
         }
 
         this.fastLoadingOFF();
+        $(renderer._PAPER.canvas).trigger('loading', ['end']);
 
         return {
             width: 0,
@@ -34947,6 +34957,15 @@ OG.graph.Canvas.prototype = {
         $(this.getRootElement()).bind('expanded', function (event, element) {
             callbackFunc(event, element);
         });
+    },
+
+    /**
+     * 캔버스 로딩 이벤트 리스너
+     */
+    onLoading: function(callbackFunc){
+        $(this.getRootElement()).bind('loading', function (event, progress) {
+            callbackFunc(event, progress);
+        });
     }
 }
 ;

src/main/webapp/opengraph/OpenGraph-0.1.2-SNAPSHOT-min.js

@@ -972,7 +972,7 @@ OG.graph.Canvas.prototype = {
         });
         sliderBar.css({
             position: 'relative',
-            'writing-mode': 'bt-lr', /* IE */
+            //'writing-mode': 'bt-lr', /* IE */
             'width': '100%',
             'height': '8px'
         });
@@ -2384,6 +2384,8 @@ OG.graph.Canvas.prototype = {
             fromEdge, toEdge, label, fromLabel, toLabel, angle, value, data, dataExt, element, loopType, taskType, swimlane, textList;
 
         this._RENDERER.clear();
+        var renderer = this._RENDERER;
+        $(renderer._PAPER.canvas).trigger('loading', ['start']);
 
         if (json && json.opengraph && json.opengraph.cell && OG.Util.isArray(json.opengraph.cell)) {
             canvasWidth = json.opengraph['@width'];
@@ -2408,6 +2410,9 @@ OG.graph.Canvas.prototype = {
             }
 
             cell = json.opengraph.cell;
+            var totalCount = cell.length;
+            var cellCount = 0;
+
             for (var i = 0, leni = cell.length; i < leni; i++) {
                 id = cell[i]['@id'];
                 parent = cell[i]['@parent'];
@@ -2556,9 +2561,13 @@ OG.graph.Canvas.prototype = {
                 if (dataExt) {
                     element.dataExt = OG.JSON.decode(unescape(dataExt));
                 }
+
+                cellCount++;
+                $(renderer._PAPER.canvas).trigger('loading', [Math.round((cellCount/totalCount)*100)]);
             }
 
             this.fastLoadingOFF();
+            $(renderer._PAPER.canvas).trigger('loading', ['end']);
 
             return {
                 width: maxX - minX,
@@ -2571,6 +2580,7 @@ OG.graph.Canvas.prototype = {
         }
 
         this.fastLoadingOFF();
+        $(renderer._PAPER.canvas).trigger('loading', ['end']);
 
         return {
             width: 0,
@@ -2908,6 +2918,15 @@ OG.graph.Canvas.prototype = {
         $(this.getRootElement()).bind('expanded', function (event, element) {
             callbackFunc(event, element);
         });
+    },
+
+    /**
+     * 캔버스 로딩 이벤트 리스너
+     */
+    onLoading: function(callbackFunc){
+        $(this.getRootElement()).bind('loading', function (event, progress) {
+            callbackFunc(event, progress);
+        });
     }
 }
 ;