stage-js 1.0.0 → 1.0.2

package/dist/stage.umd.cjs

@@ -1,8 +1,8 @@
 (function(global, factory) {
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.Stage = {}));
-})(this, function(exports2) {
+})(this, (function(exports2) {
   "use strict";/**
- * Stage.js v1.0.0
+ * Stage.js v1.0.2
  * @copyright Copyright Ali Shakiba
  * @license Licensed under the MIT (https://github.com/piqnt/stage.js/blob/main/LICENSE.md)
  */
@@ -56,7 +56,7 @@
   math.limit = clamp;
   var Matrix = (
     /** @class */
-    function() {
+    (function() {
       function Matrix2(a, b, c, d, e, f) {
         this.a = 1;
         this.b = 0;
@@ -220,7 +220,7 @@
         return this.b * x + this.d * y + this.f;
       };
       return Matrix2;
-    }()
+    })()
   );
   /*! *****************************************************************************
       Copyright (c) Microsoft Corporation.
@@ -377,7 +377,7 @@
   };
   var Texture = (
     /** @class */
-    function() {
+    (function() {
       function Texture2() {
         this.uid = "texture:" + uid();
         this.sx = 0;
@@ -435,11 +435,11 @@
         this.drawWithNormalizedArgs(context, sx, sy, sw, sh, dx, dy, dw, dh);
       };
       return Texture2;
-    }()
+    })()
   );
   var ImageTexture = (
     /** @class */
-    function(_super) {
+    (function(_super) {
       __extends(ImageTexture2, _super);
       function ImageTexture2(source, pixelRatio) {
         var _this = _super.call(this) || this;
@@ -496,11 +496,11 @@
         }
       };
       return ImageTexture2;
-    }(Texture)
+    })(Texture)
   );
   var PipeTexture = (
     /** @class */
-    function(_super) {
+    (function(_super) {
       __extends(PipeTexture2, _super);
       function PipeTexture2(source) {
         var _this = _super.call(this) || this;
@@ -529,11 +529,11 @@
         texture2.draw(context, sx, sy, sw, sh, dx, dy, dw, dh);
       };
       return PipeTexture2;
-    }(Texture)
+    })(Texture)
   );
   var Atlas = (
     /** @class */
-    function(_super) {
+    (function(_super) {
       __extends(Atlas2, _super);
       function Atlas2(def) {
         if (def === void 0) {
@@ -648,7 +648,7 @@
         });
       };
       return Atlas2;
-    }(ImageTexture)
+    })(ImageTexture)
   );
   function asyncLoadImage(src) {
     console.debug && console.debug("Loading image: " + src);
@@ -688,7 +688,7 @@
   }
   var TextureSelection = (
     /** @class */
-    function() {
+    (function() {
       function TextureSelection2(selection, atlas2) {
         this.selection = selection;
         this.atlas = atlas2;
@@ -731,10 +731,10 @@
         return array;
       };
       return TextureSelection2;
-    }()
+    })()
   );
   var NO_TEXTURE = new /** @class */
-  (function(_super) {
+  ((function(_super) {
     __extends(class_1, _super);
     function class_1() {
       var _this = _super.call(this) || this;
@@ -763,7 +763,7 @@
     class_1.prototype.draw = function() {
     };
     return class_1;
-  }(Texture))();
+  })(Texture))();
   var NO_SELECTION = new TextureSelection(NO_TEXTURE);
   var ATLAS_MEMO_BY_NAME = {};
   var ATLAS_ARRAY = [];
@@ -843,7 +843,7 @@
   }
   var ResizableTexture = (
     /** @class */
-    function(_super) {
+    (function(_super) {
       __extends(ResizableTexture2, _super);
       function ResizableTexture2(source, mode) {
         var _this = _super.call(this) || this;
@@ -940,7 +940,7 @@
         }
       };
       return ResizableTexture2;
-    }(Texture)
+    })(Texture)
   );
   function getDevicePixelRatio() {
     return typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
@@ -949,9 +949,12 @@
     return value && (value === "cover" || value === "contain" || value === "fill" || value === "in" || value === "in-pad" || value === "out" || value === "out-crop");
   }
   var iid$1 = 0;
+  function getIID() {
+    return iid$1++;
+  }
   var Pin = (
     /** @class */
-    function() {
+    (function() {
       function Pin2(owner) {
         this.uid = "pin:" + uid();
         this._directionX = 1;
@@ -1016,6 +1019,7 @@
         var abs = this._absoluteMatrix;
         abs.reset(this.relativeMatrix());
         this._parent && abs.concat(this._parent._absoluteMatrix);
+        this._owner._xf && abs.concat(this._owner._xf);
         this._ts_matrix = ++iid$1;
         return abs;
       };
@@ -1139,8 +1143,39 @@
         }
       };
       return Pin2;
-    }()
+    })()
   );
+  function fit(inWidth, inHeight, outWidth, outHeight, mode) {
+    if (mode === "contain")
+      mode = "in-pad";
+    if (mode === "cover")
+      mode = "out-crop";
+    var scaleX;
+    var scaleY;
+    var width;
+    var height;
+    if (typeof outWidth === "number") {
+      scaleX = outWidth / inWidth;
+      width = inWidth;
+    }
+    if (typeof outHeight === "number") {
+      scaleY = outHeight / inHeight;
+      height = inHeight;
+    }
+    if (typeof outWidth === "number" && typeof outHeight === "number" && typeof mode === "string") {
+      if (mode === "fill") ;
+      else if (mode === "out" || mode === "out-crop") {
+        scaleX = scaleY = Math.max(scaleX, scaleY);
+      } else if (mode === "in" || mode === "in-pad") {
+        scaleX = scaleY = Math.min(scaleX, scaleY);
+      }
+      if (mode === "out-crop" || mode === "in-pad") {
+        width = outWidth / scaleX;
+        height = outHeight / scaleY;
+      }
+    }
+    return { scaleX, scaleY, width, height };
+  }
   var getters = {
     alpha: function(pin) {
       return pin._alpha;
@@ -1368,7 +1403,7 @@
   };
   var Easing = (
     /** @class */
-    function() {
+    (function() {
       function Easing2() {
       }
       Easing2.init = function(query, params) {
@@ -1390,7 +1425,7 @@
         return easing;
       };
       return Easing2;
-    }()
+    })()
   );
   var initEasing = function(query, params) {
     var easing;
@@ -1450,6 +1485,9 @@
     return t < 1 / 2.75 ? 7.5625 * t * t : t < 2 / 2.75 ? 7.5625 * (t -= 1.5 / 2.75) * t + 0.75 : t < 2.5 / 2.75 ? 7.5625 * (t -= 2.25 / 2.75) * t + 0.9375 : 7.5625 * (t -= 2.625 / 2.75) * t + 0.984375;
   };
   var poly = function(e) {
+    if (e === void 0) {
+      e = 3;
+    }
     return function(t) {
       return Math.pow(t, e);
     };
@@ -1573,7 +1611,7 @@
   };
   var Transition = (
     /** @class */
-    function() {
+    (function() {
       function Transition2(owner, options) {
         if (options === void 0) {
           options = {};
@@ -1743,7 +1781,7 @@
         return this;
       };
       return Transition2;
-    }()
+    })()
   );
   function pinning(component2, map, key, value) {
     if (typeof component2._pin.get(key) === "number") {
@@ -1753,6 +1791,37 @@
       map[key + "Y"] = value;
     }
   }
+  function renderAxis(ctx, size) {
+    ctx.strokeStyle = "rgba(93, 173, 226)";
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(0, 0.8 * size);
+    ctx.lineTo(-0.2 * size, 0.8 * size);
+    ctx.lineTo(0, size);
+    ctx.lineTo(0.2 * size, 0.8 * size);
+    ctx.lineTo(0, 0.8 * size);
+    ctx.stroke();
+    ctx.strokeStyle = "rgba(236, 112, 99)";
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(0.8 * size, 0);
+    ctx.lineTo(0.8 * size, -0.2 * size);
+    ctx.lineTo(size, 0);
+    ctx.lineTo(0.8 * size, 0.2 * size);
+    ctx.lineTo(0.8 * size, 0);
+    ctx.stroke();
+  }
+  function renderPoint(ctx, px, py) {
+    ctx.beginPath();
+    ctx.beginPath();
+    ctx.moveTo(px - 0.2, py - 0.2);
+    ctx.lineTo(px + 0.2, py + 0.2);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(px - 0.2, py + 0.2);
+    ctx.lineTo(px + 0.2, py - 0.2);
+    ctx.stroke();
+  }
   var iid = 0;
   stats.create = 0;
   function assertType(obj) {
@@ -1790,7 +1859,7 @@
   }
   var Component = (
     /** @class */
-    function() {
+    (function() {
       function Component2() {
         var _this = this;
         this.uid = "component:" + uid();
@@ -1852,15 +1921,14 @@
         return this._pin.absoluteMatrix();
       };
       Component2.prototype.getPixelRatio = function() {
-        var _a;
-        var m = (_a = this._parent) === null || _a === void 0 ? void 0 : _a.matrix();
-        var pixelRatio = !m ? 1 : Math.max(Math.abs(m.a), Math.abs(m.b)) / getDevicePixelRatio();
-        return pixelRatio;
+        return this.getLogicalPixelRatio();
       };
       Component2.prototype.getDevicePixelRatio = function() {
         var _a;
         var parentMatrix = (_a = this._parent) === null || _a === void 0 ? void 0 : _a.matrix();
-        var pixelRatio = !parentMatrix ? 1 : Math.max(Math.abs(parentMatrix.a), Math.abs(parentMatrix.b));
+        if (!parentMatrix)
+          return 1;
+        var pixelRatio = Math.max(Math.abs(parentMatrix.a), Math.abs(parentMatrix.b));
         return pixelRatio;
       };
       Component2.prototype.getLogicalPixelRatio = function() {
@@ -2232,6 +2300,7 @@
         }
         stats.component++;
         var m = this.matrix();
+        this.renderDebug(context, m);
         context.setTransform(m.a, m.b, m.c, m.d, m.e, m.f);
         this._alpha = this._pin._alpha * (this._parent ? this._parent._alpha : 1);
         var alpha = this._pin._textureAlpha * this._alpha;
@@ -2622,8 +2691,30 @@
         this._spacing = space;
         return this;
       };
+      Component2.prototype.renderDebug = function(ctx, xf) {
+        if (!this._debug)
+          return;
+        var ppu = this.getLogicalPixelRatio();
+        ctx.lineWidth = 1 / ppu;
+        ctx.lineCap = "round";
+        ctx.lineJoin = "round";
+        renderAxis(ctx, 1);
+        var pin = this._pin;
+        if (pin._pivoted) {
+          ctx.strokeStyle = "orange";
+          renderPoint(ctx, pin._pivotX * pin._width, pin._pivotY * pin._height);
+        }
+        if (pin._aligned) {
+          ctx.strokeStyle = "green";
+          renderPoint(ctx, pin._alignX * pin._width, pin._alignY * pin._height);
+        }
+        if (pin._handled) {
+          ctx.strokeStyle = "yellow";
+          renderPoint(ctx, pin._handleX * pin._width, pin._handleY * pin._height);
+        }
+      };
       return Component2;
-    }()
+    })()
   );
   function sprite(frame) {
     var sprite2 = new Sprite();
@@ -2632,7 +2723,7 @@
   }
   var Sprite = (
     /** @class */
-    function(_super) {
+    (function(_super) {
       __extends(Sprite2, _super);
       function Sprite2() {
         var _this = _super.call(this) || this;
@@ -2700,11 +2791,11 @@
         this._texture.draw(context);
       };
       return Sprite2;
-    }(Component)
+    })(Component)
   );
   var CanvasTexture = (
     /** @class */
-    function(_super) {
+    (function(_super) {
       __extends(CanvasTexture2, _super);
       function CanvasTexture2() {
         var _this = _super.call(this, document.createElement("canvas")) || this;
@@ -2777,7 +2868,7 @@
         return this;
       };
       return CanvasTexture2;
-    }(ImageTexture)
+    })(ImageTexture)
   );
   function canvas(type, attributes, legacyTextureDrawer) {
     if (typeof type === "function") {
@@ -2829,7 +2920,7 @@
   var POINTER_END = "touchend mouseup";
   var EventPoint = (
     /** @class */
-    function() {
+    (function() {
       function EventPoint2() {
       }
       EventPoint2.prototype.clone = function(obj) {
@@ -2848,11 +2939,11 @@
         return (this.x | 0) + "x" + (this.y | 0);
       };
       return EventPoint2;
-    }()
+    })()
   );
   var PointerSyntheticEvent = (
     /** @class */
-    function() {
+    (function() {
       function PointerSyntheticEvent2() {
         this.abs = new EventPoint();
       }
@@ -2872,11 +2963,11 @@
         return this.type + ": " + (this.x | 0) + "x" + (this.y | 0);
       };
       return PointerSyntheticEvent2;
-    }()
+    })()
   );
   var VisitPayload = (
     /** @class */
-    function() {
+    (function() {
       function VisitPayload2() {
         this.type = "";
         this.x = 0;
@@ -2890,13 +2981,13 @@
         return this.type + ": " + (this.x | 0) + "x" + (this.y | 0);
       };
       return VisitPayload2;
-    }()
+    })()
   );
   var syntheticEvent = new PointerSyntheticEvent();
   var PAYLOAD = new VisitPayload();
   var Pointer = (
     /** @class */
-    function() {
+    (function() {
       function Pointer2() {
         var _this = this;
         this.ratio = 1;
@@ -3060,7 +3151,7 @@
       };
       Pointer2.DEBUG = false;
       return Pointer2;
-    }()
+    })()
   );
   var Mouse = {
     CLICK: "click",
@@ -3092,18 +3183,18 @@
   var DEFAULT_CANVAS_MOUNTED = false;
   var Root = (
     /** @class */
-    function(_super) {
+    (function(_super) {
       __extends(Root2, _super);
       function Root2() {
         var _this = _super.call(this) || this;
         _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;
@@ -3172,24 +3263,7 @@
             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) {
@@ -3201,12 +3275,9 @@
           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);
-              if (_this.debugDrawAxis > 0) {
-                _this.renderDebug(_this.context);
-              }
+              _this.context.clearRect(0, 0, _this.canvasWidth, _this.canvasHeight);
               _this.render(_this.context);
             }
           } else if (tickRequest) {
@@ -3216,39 +3287,44 @@
           }
           stats.fps = elapsed ? 1e3 / elapsed : 0;
         };
-        _this.debugDrawAxis = 0;
         _this.label("Root");
         return _this;
       }
-      Root2.prototype.renderDebug = function(context) {
-        var size = typeof this.debugDrawAxis === "number" ? this.debugDrawAxis : 10;
-        var m = this.matrix();
-        context.setTransform(m.a, m.b, m.c, m.d, m.e, m.f);
-        var lineWidth = 3 / m.a;
-        context.beginPath();
-        context.moveTo(0, 0);
-        context.lineTo(0, 0.8 * size);
-        context.lineTo(-0.2 * size, 0.8 * size);
-        context.lineTo(0, size);
-        context.lineTo(0.2 * size, 0.8 * size);
-        context.lineTo(0, 0.8 * size);
-        context.strokeStyle = "rgba(93, 173, 226)";
-        context.lineJoin = "round";
-        context.lineCap = "round";
-        context.lineWidth = lineWidth;
-        context.stroke();
-        context.beginPath();
-        context.moveTo(0, 0);
-        context.lineTo(0.8 * size, 0);
-        context.lineTo(0.8 * size, -0.2 * size);
-        context.lineTo(size, 0);
-        context.lineTo(0.8 * size, 0.2 * size);
-        context.lineTo(0.8 * size, 0);
-        context.strokeStyle = "rgba(236, 112, 99)";
-        context.lineJoin = "round";
-        context.lineCap = "round";
-        context.lineWidth = lineWidth;
-        context.stroke();
+      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(ctx, m) {
+        if (!this._debug)
+          return;
+        ctx.setTransform(m.a, m.b, m.c, m.d, m.e, m.f);
+        ctx.lineWidth = 3 / m.a;
+        renderAxis(ctx, 10);
       };
       Root2.prototype.resume = function() {
         if (this.sleep || this.paused) {
@@ -3305,7 +3381,7 @@
             height,
             ratio: typeof ratio === "number" ? ratio : 1
           };
-          this.viewbox();
+          this.rescale();
           var data_1 = Object.assign({}, this._viewport);
           this.visit({
             start: function(component2) {
@@ -3332,37 +3408,25 @@
         return this;
       };
       Root2.prototype.camera = function(matrix) {
-        this._camera = matrix;
-        this.rescale();
+        this._xf = matrix.clone();
+        this._pin._ts_transform = getIID();
+        this.touch();
         return this;
       };
       Root2.prototype.rescale = function() {
         var viewbox = this._viewbox;
         var viewport = this._viewport;
-        var camera = this._camera;
         if (viewport && viewbox) {
-          var viewportWidth = viewport.width;
-          var viewportHeight = viewport.height;
           var viewboxMode = isValidFitMode(viewbox.mode) ? viewbox.mode : "in-pad";
-          var viewboxWidth = viewbox.width;
-          var viewboxHeight = viewbox.height;
+          var fitted = fit(viewbox.width, viewbox.height, viewport.width, viewport.height, viewboxMode);
           this.pin({
-            width: viewboxWidth,
-            height: viewboxHeight
+            width: fitted.width,
+            height: fitted.height,
+            scaleX: fitted.scaleX,
+            scaleY: fitted.scaleY,
+            offsetX: -(viewbox.x || 0) * fitted.scaleX,
+            offsetY: -(viewbox.y || 0) * fitted.scaleY
           });
-          this.fit(viewportWidth, viewportHeight, viewboxMode);
-          var viewboxX = viewbox.x || 0;
-          var viewboxY = viewbox.y || 0;
-          var cameraZoomX = (camera === null || camera === void 0 ? void 0 : camera.a) || 1;
-          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);
         } else if (viewport) {
           this.pin({
             width: viewport.width,
@@ -3380,7 +3444,7 @@
         return this;
       };
       return Root2;
-    }(Component)
+    })(Component)
   );
   function anim(frames, fps) {
     var anim2 = new Anim();
@@ -3391,7 +3455,7 @@
   var FPS = 15;
   var Anim = (
     /** @class */
-    function(_super) {
+    (function(_super) {
       __extends(Anim2, _super);
       function Anim2() {
         var _this = _super.call(this) || this;
@@ -3496,14 +3560,14 @@
         return this;
       };
       return Anim2;
-    }(Component)
+    })(Component)
   );
   function monotype(chars) {
     return new Monotype().frames(chars);
   }
   var Monotype = (
     /** @class */
-    function(_super) {
+    (function(_super) {
       __extends(Monotype2, _super);
       function Monotype2() {
         var _this = _super.call(this) || this;
@@ -3570,7 +3634,7 @@
         return this;
       };
       return Monotype2;
-    }(Component)
+    })(Component)
   );
   const Stage = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
@@ -3610,6 +3674,8 @@
     column,
     component,
     create,
+    fit,
+    getIID,
     image: sprite,
     isValidFitMode,
     layer,
@@ -3668,6 +3734,8 @@
   exports2.component = component;
   exports2.create = create;
   exports2.default = Stage;
+  exports2.fit = fit;
+  exports2.getIID = getIID;
   exports2.image = sprite;
   exports2.isValidFitMode = isValidFitMode;
   exports2.layer = layer;
@@ -3689,5 +3757,5 @@
   exports2.texture = texture;
   exports2.wrap = wrap;
   Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-});
+}));
 //# sourceMappingURL=stage.umd.cjs.map