Merge pull request #1351 from nockawa/master

Canvas2D: bug fixing

src/Canvas2d/babylon.canvas2d.ts

@@ -125,6 +125,11 @@
                     }
                 }
 
+                // Put a handler to resize the background whenever the canvas is resizing
+                this.propertyChanged.add((e, s) => {
+                    this._background.size = this.size;
+                }, Group2D.sizeProperty.flagId);
+
                 this._background._patchHierarchy(this);
             }
 
@@ -950,6 +955,14 @@
             this._setupInteraction(enable);
         }
 
+        public get designSize(): Size {
+            return this._designSize;
+        }
+
+        public get designSizeUseHorizAxis(): boolean {
+            return this._designUseHorizAxis;
+        }
+
         /**
          * Access the babylon.js' engine bound data, do not invoke this method, it's for internal purpose only
          * @returns {} 
@@ -1159,8 +1172,9 @@
                 let worldMtx = node.getWorldMatrix();
 
                 let proj = Vector3.Project(Canvas2D._v, worldMtx, Canvas2D._m, v);
-                group.x = Math.round(proj.x);
-                group.y = Math.round(rh - proj.y);
+                let s = this.scale;
+                group.x = Math.round(proj.x/s);
+                group.y = Math.round((rh - proj.y)/s);
             }
         }
 
@@ -1278,10 +1292,10 @@
 
             this._initPerfMetrics();
 
-            this._updateTrackedNodes();
-
             this._updateCanvasState(false);
 
+            this._updateTrackedNodes();
+
             // Nothing to do is the Canvas is not visible
             if (this.isVisible === false) {
                 return;

src/Canvas2d/babylon.group2d.ts

@@ -361,6 +361,16 @@
             let sw = Math.ceil(s.width * a.x);
             let sh = Math.ceil(s.height * a.y);
 
+            // The dimension must be overridden when using the designSize feature, the ratio is maintain to compute a uniform scale, which is mandatory but if the designSize's ratio is different from the rendering surface's ratio, content will be clipped in some cases.
+            // So we set the width/height to the rendering's one because that's what we want for the viewport!
+            if (this instanceof Canvas2D) {
+                let c = <Canvas2D><any>this;
+                if (c.designSize != null) {
+                    sw = this.owner.engine.getRenderWidth();
+                    sh = this.owner.engine.getRenderHeight();
+                }
+            }
+
             // Setup the size of the rendering viewport
             // In non cache mode, we're rendering directly to the rendering canvas, in this case we have to detect if the canvas size changed since the previous iteration, if it's the case all primitives must be prepared again because their transformation must be recompute
             if (!this._isCachedGroup) {

src/Canvas2d/babylon.renderablePrim2d.ts

@@ -424,14 +424,17 @@
                 if (gii.hasOpaqueData) {
                     let od = gii.opaqueData[0];
                     usedCount += od._partData.usedElementCount;
+                    gii.opaqueDirty = true;
                 }
                 if (gii.hasAlphaTestData) {
                     let atd = gii.alphaTestData[0];
                     usedCount += atd._partData.usedElementCount;
+                    gii.alphaTestDirty = true;
                 }
                 if (gii.hasTransparentData) {
                     let td = gii.transparentData[0];
                     usedCount += td._partData.usedElementCount;
+                    gii.transparentDirty = true;
                 }
 
                 if (usedCount === 0 && gii.modelRenderCache!=null) {