stage-js 1.0.0 → 1.0.1

package/dist/stage.d.ts

@@ -552,6 +552,7 @@ export declare class Root extends Component {
 	sleep: boolean;
 	constructor();
 	mount: (configs?: RootConfig) => void;
+	resizeCanvas(): void;
 	/** @hidden */
 	debugDrawAxis: number;
 	private renderDebug;

package/dist/stage.js

@@ -1,5 +1,5 @@
 /**
- * Stage.js v1.0.0
+ * Stage.js v1.0.1
  * @copyright Copyright Ali Shakiba
  * @license Licensed under the MIT (https://github.com/piqnt/stage.js/blob/main/LICENSE.md)
  */
@@ -3095,11 +3095,11 @@ var Root = (
       _this.canvas = null;
       _this.dom = null;
       _this.context = null;
-      _this.pixelWidth = -1;
-      _this.pixelHeight = -1;
+      _this.clientWidth = -1;
+      _this.clientHeight = -1;
       _this.pixelRatio = 1;
-      _this.drawingWidth = 0;
-      _this.drawingHeight = 0;
+      _this.canvasWidth = 0;
+      _this.canvasHeight = 0;
       _this.mounted = false;
       _this.paused = false;
       _this.sleep = false;
@@ -3168,24 +3168,7 @@ var Root = (
           return;
         }
         _this.requestFrame();
-        var newPixelWidth = _this.canvas.clientWidth;
-        var newPixelHeight = _this.canvas.clientHeight;
-        if (_this.pixelWidth !== newPixelWidth || _this.pixelHeight !== newPixelHeight) {
-          _this.pixelWidth = newPixelWidth;
-          _this.pixelHeight = newPixelHeight;
-          _this.drawingWidth = newPixelWidth * _this.pixelRatio;
-          _this.drawingHeight = newPixelHeight * _this.pixelRatio;
-          if (_this.canvas.width !== _this.drawingWidth || _this.canvas.height !== _this.drawingHeight) {
-            _this.canvas.width = _this.drawingWidth;
-            _this.canvas.height = _this.drawingHeight;
-            console.debug && console.debug("Resize: [" + _this.drawingWidth + ", " + _this.drawingHeight + "] = " + _this.pixelRatio + " x [" + _this.pixelWidth + ", " + _this.pixelHeight + "]");
-            _this.viewport({
-              width: _this.drawingWidth,
-              height: _this.drawingHeight,
-              ratio: _this.pixelRatio
-            });
-          }
-        }
+        _this.resizeCanvas();
         var last = _this._lastFrameTime || now;
         var elapsed = now - last;
         if (!_this.mounted || _this.paused || _this.sleep) {
@@ -3197,9 +3180,9 @@ var Root = (
         if (_this._mo_touch != _this._ts_touch) {
           _this._mo_touch = _this._ts_touch;
           _this.sleep = false;
-          if (_this.drawingWidth > 0 && _this.drawingHeight > 0) {
+          if (_this.canvasWidth > 0 && _this.canvasHeight > 0) {
             _this.context.setTransform(1, 0, 0, 1, 0, 0);
-            _this.context.clearRect(0, 0, _this.drawingWidth, _this.drawingHeight);
+            _this.context.clearRect(0, 0, _this.canvasWidth, _this.canvasHeight);
             if (_this.debugDrawAxis > 0) {
               _this.renderDebug(_this.context);
             }
@@ -3216,6 +3199,35 @@ var Root = (
       _this.label("Root");
       return _this;
     }
+    Root2.prototype.resizeCanvas = function() {
+      var newClientWidth = this.canvas.clientWidth;
+      var newClientHeight = this.canvas.clientHeight;
+      if (this.clientWidth === newClientWidth && this.clientHeight === newClientHeight)
+        return;
+      this.clientWidth = newClientWidth;
+      this.clientHeight = newClientHeight;
+      var notStyled = this.canvas.clientWidth === this.canvas.width && this.canvas.clientHeight === this.canvas.height;
+      var pixelRatio;
+      if (notStyled) {
+        pixelRatio = 1;
+        this.canvasWidth = this.canvas.width;
+        this.canvasHeight = this.canvas.height;
+      } else {
+        pixelRatio = this.pixelRatio;
+        this.canvasWidth = this.clientWidth * pixelRatio;
+        this.canvasHeight = this.clientHeight * pixelRatio;
+        if (this.canvas.width !== this.canvasWidth || this.canvas.height !== this.canvasHeight) {
+          this.canvas.width = this.canvasWidth;
+          this.canvas.height = this.canvasHeight;
+        }
+      }
+      console.debug && console.debug("Resize: [" + this.canvasWidth + ", " + this.canvasHeight + "] = " + pixelRatio + " x [" + this.clientWidth + ", " + this.clientHeight + "]");
+      this.viewport({
+        width: this.canvasWidth,
+        height: this.canvasHeight,
+        ratio: pixelRatio
+      });
+    };
     Root2.prototype.renderDebug = function(context) {
       var size = typeof this.debugDrawAxis === "number" ? this.debugDrawAxis : 10;
       var m = this.matrix();
@@ -3353,12 +3365,14 @@ var Root = (
         var cameraZoomY = (camera === null || camera === void 0 ? void 0 : camera.d) || 1;
         var cameraX = (camera === null || camera === void 0 ? void 0 : camera.e) || 0;
         var cameraY = (camera === null || camera === void 0 ? void 0 : camera.f) || 0;
-        var scaleX = this.pin("scaleX");
-        var scaleY = this.pin("scaleY");
-        this.pin("scaleX", scaleX * cameraZoomX);
-        this.pin("scaleY", scaleY * cameraZoomY);
-        this.pin("offsetX", cameraX - viewboxX * scaleX * cameraZoomX);
-        this.pin("offsetY", cameraY - viewboxY * scaleY * cameraZoomY);
+        var pinScaleX = this.pin("scaleX");
+        var pinScaleY = this.pin("scaleY");
+        var scaleX = pinScaleX * cameraZoomX;
+        var scaleY = pinScaleY * cameraZoomY;
+        this.pin("scaleX", scaleX);
+        this.pin("scaleY", scaleY);
+        this.pin("offsetX", cameraX - viewboxX * scaleX);
+        this.pin("offsetY", cameraY - viewboxY * scaleY);
       } else if (viewport) {
         this.pin({
           width: viewport.width,