[DEV] InkRanges workaround in shape rendering

Author: ystreibel

dist/myscript.js

@@ -5274,9 +5274,14 @@ MyScript = {
      */
     function ShapeDocument(obj) {
         this.segments = [];
+        this.inkRanges = [];
         if (obj) {
             for (var i in obj.segments) {
                 this.segments.push(new scope.ShapeSegment(obj.segments[i]));
+                for(j in this.segments[i].getInkRanges()){
+                    this.inkRanges.push(this.segments[i].getInkRanges()[j]);
+                }
+
             }
         }
     }
@@ -5298,11 +5303,7 @@ MyScript = {
      * @returns {ShapeInkRange[]}
      */
     ShapeDocument.prototype.getInkRanges = function () {
-        var inkRanges = [];
-        for (var i in this.segments) {
-            inkRanges = inkRanges.concat(this.segments[i].getInkRanges());
-        }
-        return inkRanges;
+        return this.inkRanges;
     };
 
     /**
@@ -12256,6 +12257,7 @@ MyScript = {
      */
     function ShapeRenderer(context) {
         scope.AbstractRenderer.call(this, context);
+        this.inkRanges = [];
     }
 
     /**
@@ -12279,16 +12281,7 @@ MyScript = {
         this.clear();
         if (document && (document instanceof scope.ShapeDocument)) {
             this.drawShapes(components, document.getSegments());
-            var lastComponents = [];
-            var processedComponents = _extractComponents(components, document.getInkRanges());
-
-            for (var i in components) {
-                var component = components[i];
-                if (processedComponents.indexOf(component) !== -1) {
-                    lastComponents.push(component);
-                }
-            }
-            this.drawComponents(lastComponents);
+            this.drawShapesNotYetRecognized(components, document.getInkRanges());
         } else {
             this.drawComponents(components);
         }
@@ -12326,6 +12319,30 @@ MyScript = {
         }
     };
 
+    ShapeRenderer.prototype.drawShapesNotYetRecognized = function (components, inkRanges){
+        for (var k in inkRanges) {
+            this.inkRanges.push(inkRanges[k]);
+        }
+        function contains(a, obj) {
+            var i = a.length;
+            while (i--) {
+                if (JSON.stringify(a[i]) === JSON.stringify(obj)) {
+                    return true;
+                }
+            }
+            return false;
+        }
+
+        var lastComponents = [];
+        for (var i in components) {
+            var component = components[i];
+            if (!contains(_extractComponents(components, this.inkRanges), component)) {
+                lastComponents.push(component);
+            }
+        }
+        this.drawComponents(lastComponents);
+    };
+
     /**
      * Draw shape segment
      *

dist/myscript.min.css

@@ -10,9 +10,14 @@
      */
     function ShapeDocument(obj) {
         this.segments = [];
+        this.inkRanges = [];
         if (obj) {
             for (var i in obj.segments) {
                 this.segments.push(new scope.ShapeSegment(obj.segments[i]));
+                for(j in this.segments[i].getInkRanges()){
+                    this.inkRanges.push(this.segments[i].getInkRanges()[j]);
+                }
+
             }
         }
     }
@@ -34,11 +39,7 @@
      * @returns {ShapeInkRange[]}
      */
     ShapeDocument.prototype.getInkRanges = function () {
-        var inkRanges = [];
-        for (var i in this.segments) {
-            inkRanges = inkRanges.concat(this.segments[i].getInkRanges());
-        }
-        return inkRanges;
+        return this.inkRanges;
     };
 
     /**

dist/myscript.min.js

@@ -11,6 +11,7 @@
      */
     function ShapeRenderer(context) {
         scope.AbstractRenderer.call(this, context);
+        this.inkRanges = [];
     }
 
     /**
@@ -34,16 +35,7 @@
         this.clear();
         if (document && (document instanceof scope.ShapeDocument)) {
             this.drawShapes(components, document.getSegments());
-            var lastComponents = [];
-            var processedComponents = _extractComponents(components, document.getInkRanges());
-
-            for (var i in components) {
-                var component = components[i];
-                if (processedComponents.indexOf(component) !== -1) {
-                    lastComponents.push(component);
-                }
-            }
-            this.drawComponents(lastComponents);
+            this.drawShapesNotYetRecognized(components, document.getInkRanges());
         } else {
             this.drawComponents(components);
         }
@@ -81,6 +73,30 @@
         }
     };
 
+    ShapeRenderer.prototype.drawShapesNotYetRecognized = function (components, inkRanges){
+        for (var k in inkRanges) {
+            this.inkRanges.push(inkRanges[k]);
+        }
+        function contains(a, obj) {
+            var i = a.length;
+            while (i--) {
+                if (JSON.stringify(a[i]) === JSON.stringify(obj)) {
+                    return true;
+                }
+            }
+            return false;
+        }
+
+        var lastComponents = [];
+        for (var i in components) {
+            var component = components[i];
+            if (!contains(_extractComponents(components, this.inkRanges), component)) {
+                lastComponents.push(component);
+            }
+        }
+        this.drawComponents(lastComponents);
+    };
+
     /**
      * Draw shape segment
      *