stage-js 1.0.0 → 1.0.2

package/dist/stage.js

@@ -1,5 +1,5 @@
 /**
- * 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)
  */
@@ -52,7 +52,7 @@ math.rotate = wrap;
 math.limit = clamp;
 var Matrix = (
   /** @class */
-  function() {
+  (function() {
     function Matrix2(a, b, c, d, e, f) {
       this.a = 1;
       this.b = 0;
@@ -216,7 +216,7 @@ var Matrix = (
       return this.b * x + this.d * y + this.f;
     };
     return Matrix2;
-  }()
+  })()
 );
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -373,7 +373,7 @@ var uid = function() {
 };
 var Texture = (
   /** @class */
-  function() {
+  (function() {
     function Texture2() {
       this.uid = "texture:" + uid();
       this.sx = 0;
@@ -431,11 +431,11 @@ var Texture = (
       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;
@@ -492,11 +492,11 @@ var ImageTexture = (
       }
     };
     return ImageTexture2;
-  }(Texture)
+  })(Texture)
 );
 var PipeTexture = (
   /** @class */
-  function(_super) {
+  (function(_super) {
     __extends(PipeTexture2, _super);
     function PipeTexture2(source) {
       var _this = _super.call(this) || this;
@@ -525,11 +525,11 @@ var PipeTexture = (
       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) {
@@ -644,7 +644,7 @@ var Atlas = (
       });
     };
     return Atlas2;
-  }(ImageTexture)
+  })(ImageTexture)
 );
 function asyncLoadImage(src) {
   console.debug && console.debug("Loading image: " + src);
@@ -684,7 +684,7 @@ function isAtlasSpriteDefinition(selection) {
 }
 var TextureSelection = (
   /** @class */
-  function() {
+  (function() {
     function TextureSelection2(selection, atlas2) {
       this.selection = selection;
       this.atlas = atlas2;
@@ -727,10 +727,10 @@ var TextureSelection = (
       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;
@@ -759,7 +759,7 @@ var NO_TEXTURE = new /** @class */
   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 = [];
@@ -839,7 +839,7 @@ function texture(query) {
 }
 var ResizableTexture = (
   /** @class */
-  function(_super) {
+  (function(_super) {
     __extends(ResizableTexture2, _super);
     function ResizableTexture2(source, mode) {
       var _this = _super.call(this) || this;
@@ -936,7 +936,7 @@ var ResizableTexture = (
       }
     };
     return ResizableTexture2;
-  }(Texture)
+  })(Texture)
 );
 function getDevicePixelRatio() {
   return typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
@@ -945,9 +945,12 @@ function isValidFitMode(value) {
   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;
@@ -1012,6 +1015,7 @@ var Pin = (
       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;
     };
@@ -1135,8 +1139,39 @@ var Pin = (
       }
     };
     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;
@@ -1364,7 +1399,7 @@ var IDENTITY = function(x) {
 };
 var Easing = (
   /** @class */
-  function() {
+  (function() {
     function Easing2() {
     }
     Easing2.init = function(query, params) {
@@ -1386,7 +1421,7 @@ var Easing = (
       return easing;
     };
     return Easing2;
-  }()
+  })()
 );
 var initEasing = function(query, params) {
   var easing;
@@ -1446,6 +1481,9 @@ var bounce = function(t) {
   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);
   };
@@ -1569,7 +1607,7 @@ var EasingFactories = {
 };
 var Transition = (
   /** @class */
-  function() {
+  (function() {
     function Transition2(owner, options) {
       if (options === void 0) {
         options = {};
@@ -1739,7 +1777,7 @@ var Transition = (
       return this;
     };
     return Transition2;
-  }()
+  })()
 );
 function pinning(component2, map, key, value) {
   if (typeof component2._pin.get(key) === "number") {
@@ -1749,6 +1787,37 @@ function pinning(component2, map, key, value) {
     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) {
@@ -1786,7 +1855,7 @@ function maximize() {
 }
 var Component = (
   /** @class */
-  function() {
+  (function() {
     function Component2() {
       var _this = this;
       this.uid = "component:" + uid();
@@ -1848,15 +1917,14 @@ var Component = (
       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() {
@@ -2228,6 +2296,7 @@ var Component = (
       }
       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;
@@ -2618,8 +2687,30 @@ var Component = (
       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();
@@ -2628,7 +2719,7 @@ function sprite(frame) {
 }
 var Sprite = (
   /** @class */
-  function(_super) {
+  (function(_super) {
     __extends(Sprite2, _super);
     function Sprite2() {
       var _this = _super.call(this) || this;
@@ -2696,11 +2787,11 @@ var Sprite = (
       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;
@@ -2773,7 +2864,7 @@ var CanvasTexture = (
       return this;
     };
     return CanvasTexture2;
-  }(ImageTexture)
+  })(ImageTexture)
 );
 function canvas(type, attributes, legacyTextureDrawer) {
   if (typeof type === "function") {
@@ -2825,7 +2916,7 @@ var POINTER_START = "touchstart mousedown";
 var POINTER_END = "touchend mouseup";
 var EventPoint = (
   /** @class */
-  function() {
+  (function() {
     function EventPoint2() {
     }
     EventPoint2.prototype.clone = function(obj) {
@@ -2844,11 +2935,11 @@ var EventPoint = (
       return (this.x | 0) + "x" + (this.y | 0);
     };
     return EventPoint2;
-  }()
+  })()
 );
 var PointerSyntheticEvent = (
   /** @class */
-  function() {
+  (function() {
     function PointerSyntheticEvent2() {
       this.abs = new EventPoint();
     }
@@ -2868,11 +2959,11 @@ var PointerSyntheticEvent = (
       return this.type + ": " + (this.x | 0) + "x" + (this.y | 0);
     };
     return PointerSyntheticEvent2;
-  }()
+  })()
 );
 var VisitPayload = (
   /** @class */
-  function() {
+  (function() {
     function VisitPayload2() {
       this.type = "";
       this.x = 0;
@@ -2886,13 +2977,13 @@ var VisitPayload = (
       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;
@@ -3056,7 +3147,7 @@ var Pointer = (
     };
     Pointer2.DEBUG = false;
     return Pointer2;
-  }()
+  })()
 );
 var Mouse = {
   CLICK: "click",
@@ -3088,18 +3179,18 @@ function mount(configs) {
 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;
@@ -3168,24 +3259,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,12 +3271,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);
-            if (_this.debugDrawAxis > 0) {
-              _this.renderDebug(_this.context);
-            }
+            _this.context.clearRect(0, 0, _this.canvasWidth, _this.canvasHeight);
             _this.render(_this.context);
           }
         } else if (tickRequest) {
@@ -3212,39 +3283,44 @@ var Root = (
         }
         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) {
@@ -3301,7 +3377,7 @@ var Root = (
           height,
           ratio: typeof ratio === "number" ? ratio : 1
         };
-        this.viewbox();
+        this.rescale();
         var data_1 = Object.assign({}, this._viewport);
         this.visit({
           start: function(component2) {
@@ -3328,37 +3404,25 @@ var Root = (
       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,
@@ -3376,7 +3440,7 @@ var Root = (
       return this;
     };
     return Root2;
-  }(Component)
+  })(Component)
 );
 function anim(frames, fps) {
   var anim2 = new Anim();
@@ -3387,7 +3451,7 @@ function anim(frames, fps) {
 var FPS = 15;
 var Anim = (
   /** @class */
-  function(_super) {
+  (function(_super) {
     __extends(Anim2, _super);
     function Anim2() {
       var _this = _super.call(this) || this;
@@ -3492,14 +3556,14 @@ var Anim = (
       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;
@@ -3566,7 +3630,7 @@ var Monotype = (
       return this;
     };
     return Monotype2;
-  }(Component)
+  })(Component)
 );
 const Stage = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
@@ -3606,6 +3670,8 @@ const Stage = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   column,
   component,
   create,
+  fit,
+  getIID,
   image: sprite,
   isValidFitMode,
   layer,
@@ -3665,6 +3731,8 @@ export {
   component,
   create,
   Stage as default,
+  fit,
+  getIID,
   sprite as image,
   isValidFitMode,
   layer,