pts 0.10.9 → 0.10.10

package/dist/es2015/_module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_module.js","sourceRoot":"","sources":["../../src/_module.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,OAAO,CAAC;AACtB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,MAAM,CAAC;AACrB,cAAc,SAAS,CAAC"}

package/dist/es2015/uheprng.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uheprng.js","sourceRoot":"","sources":["../../src/uheprng.ts"],"names":[],"mappings":"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"}

package/dist/es5.js

@@ -1,5 +1,5 @@
 /*!
- * pts.js 0.10.9 - Copyright © 2017-2021 William Ngan and contributors.
+ * pts.js 0.10.10 - Copyright © 2017-2022 William Ngan and contributors.
  * Licensed under Apache 2.0 License.
  * See https://github.com/williamngan/pts for details.
  */
@@ -2855,14 +2855,43 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
+var __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+    function adopt(value) {
+        return value instanceof P ? value : new P(function (resolve) {
+            resolve(value);
+        });
+    }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) {
+            try {
+                step(generator.next(value));
+            } catch (e) {
+                reject(e);
+            }
+        }
+        function rejected(value) {
+            try {
+                step(generator["throw"](value));
+            } catch (e) {
+                reject(e);
+            }
+        }
+        function step(result) {
+            result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+        }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Img = void 0;
+var Canvas_1 = __webpack_require__(/*! ./Canvas */ "./src/Canvas.ts");
 var Pt_1 = __webpack_require__(/*! ./Pt */ "./src/Pt.ts");
+var LinearAlgebra_1 = __webpack_require__(/*! ./LinearAlgebra */ "./src/LinearAlgebra.ts");
 
 var Img = function () {
     function Img() {
         var editable = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-        var pixelScale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+        var space = arguments[1];
         var crossOrigin = arguments[2];
 
         _classCallCheck(this, Img);
@@ -2870,7 +2899,8 @@ var Img = function () {
         this._scale = 1;
         this._loaded = false;
         this._editable = editable;
-        this._scale = pixelScale;
+        this._space = space;
+        this._scale = this._space ? this._space.pixelScale : 1;
         this._img = new Image();
         if (crossOrigin) this._img.crossOrigin = "Anonymous";
     }
@@ -2881,6 +2911,9 @@ var Img = function () {
             var _this = this;
 
             return new Promise(function (resolve, reject) {
+                if (_this._editable && !document) {
+                    reject("Cannot create html canvas element. document not found.");
+                }
                 _this._img.src = src;
                 _this._img.onload = function () {
                     if (_this._editable) {
@@ -2899,14 +2932,27 @@ var Img = function () {
     }, {
         key: "_drawToScale",
         value: function _drawToScale(canvasScale, img) {
-            var cms = typeof canvasScale === 'number' ? [canvasScale, canvasScale] : canvasScale;
             var nw = img.width;
             var nh = img.height;
-            this._cv.width = nw * cms[0];
-            this._cv.height = nh * cms[1];
-            this._ctx = this._cv.getContext('2d');
+            this.initCanvas(nw, nh, canvasScale);
             if (img) this._ctx.drawImage(img, 0, 0, nw, nh, 0, 0, this._cv.width, this._cv.height);
         }
+    }, {
+        key: "initCanvas",
+        value: function initCanvas(width, height) {
+            var canvasScale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+
+            if (!this._editable) {
+                console.error('Cannot initiate canvas because this Img is not set to be editable');
+                return;
+            }
+            if (!this._cv) this._cv = document.createElement("canvas");
+            var cms = typeof canvasScale === 'number' ? [canvasScale, canvasScale] : canvasScale;
+            this._cv.width = width * cms[0];
+            this._cv.height = height * cms[1];
+            this._ctx = this._cv.getContext('2d');
+            this._loaded = true;
+        }
     }, {
         key: "bitmap",
         value: function bitmap(size) {
@@ -2914,6 +2960,15 @@ var Img = function () {
             var h = size ? size[1] : this._cv.height;
             return createImageBitmap(this._cv, 0, 0, w, h);
         }
+    }, {
+        key: "pattern",
+        value: function pattern() {
+            var reptition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'repeat';
+            var dynamic = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+            if (!this._space) throw "Cannot find CanvasSpace ctx to create image pattern";
+            return this._space.ctx.createPattern(dynamic ? this._cv : this._img, reptition);
+        }
     }, {
         key: "sync",
         value: function sync() {
@@ -2984,6 +3039,14 @@ var Img = function () {
                 });
             });
         }
+    }, {
+        key: "getForm",
+        value: function getForm() {
+            if (!this._editable) {
+                console.error("Cannot get a CanvasForm because this Img is not editable");
+            }
+            return this._ctx ? new Canvas_1.CanvasForm(this._ctx) : undefined;
+        }
     }, {
         key: "current",
         get: function get() {
@@ -3022,26 +3085,98 @@ var Img = function () {
     }, {
         key: "imageSize",
         get: function get() {
-            return new Pt_1.Pt(this._img.width, this._img.height);
+            if (!this._img.width || !this._img.height) {
+                return this.canvasSize.$divide(this._scale);
+            } else {
+                return new Pt_1.Pt(this._img.width, this._img.height);
+            }
         }
     }, {
         key: "canvasSize",
         get: function get() {
             return new Pt_1.Pt(this._cv.width, this._cv.height);
         }
+    }, {
+        key: "scaledMatrix",
+        get: function get() {
+            var s = 1 / this._scale;
+            return new LinearAlgebra_1.Mat().scale2D([s, s]);
+        }
     }], [{
         key: "load",
         value: function load(src) {
             var editable = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-            var pixelScale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+            var space = arguments[2];
             var ready = arguments[3];
 
-            var img = new Img(editable, pixelScale);
+            var img = new Img(editable, space);
             img.load(src).then(function (res) {
                 if (ready) ready(res);
             });
             return img;
         }
+    }, {
+        key: "loadAsync",
+        value: function loadAsync(src) {
+            var editable = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+            var space = arguments[2];
+
+            return __awaiter(this, void 0, void 0, regeneratorRuntime.mark(function _callee() {
+                var img;
+                return regeneratorRuntime.wrap(function _callee$(_context) {
+                    while (1) {
+                        switch (_context.prev = _context.next) {
+                            case 0:
+                                _context.next = 2;
+                                return new Img(editable, space).load(src);
+
+                            case 2:
+                                img = _context.sent;
+                                return _context.abrupt("return", img);
+
+                            case 4:
+                            case "end":
+                                return _context.stop();
+                        }
+                    }
+                }, _callee, this);
+            }));
+        }
+    }, {
+        key: "loadPattern",
+        value: function loadPattern(src, space) {
+            var repeat = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'repeat';
+            var editable = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+
+            return __awaiter(this, void 0, void 0, regeneratorRuntime.mark(function _callee2() {
+                var img;
+                return regeneratorRuntime.wrap(function _callee2$(_context2) {
+                    while (1) {
+                        switch (_context2.prev = _context2.next) {
+                            case 0:
+                                _context2.next = 2;
+                                return Img.loadAsync(src, editable, space);
+
+                            case 2:
+                                img = _context2.sent;
+                                return _context2.abrupt("return", img.pattern(repeat));
+
+                            case 4:
+                            case "end":
+                                return _context2.stop();
+                        }
+                    }
+                }, _callee2, this);
+            }));
+        }
+    }, {
+        key: "blank",
+        value: function blank(size, space, scale) {
+            var img = new Img(true, space);
+            var s = scale ? scale : space.pixelScale;
+            img.initCanvas(size[0], size[1], s);
+            return img;
+        }
     }, {
         key: "getPixel",
         value: function getPixel(imgData, p) {
@@ -3056,15 +3191,18 @@ var Img = function () {
         key: "fromBlob",
         value: function fromBlob(blob) {
             var editable = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-            var pixelScale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+            var space = arguments[2];
 
             var url = URL.createObjectURL(blob);
-            return new Img(editable, pixelScale).load(url);
+            return new Img(editable, space).load(url);
         }
     }, {
         key: "imageDataToBlob",
         value: function imageDataToBlob(data) {
-            return new Promise(function (resolve) {
+            return new Promise(function (resolve, reject) {
+                if (!document) {
+                    reject("Cannot create html canvas element. document not found.");
+                }
                 var cv = document.createElement("canvas");
                 cv.width = data.width;
                 cv.height = data.height;
@@ -3274,9 +3412,60 @@ exports.Vec = Vec;
 var Mat = function () {
     function Mat() {
         _classCallCheck(this, Mat);
+
+        this.reset();
     }
 
-    _createClass(Mat, null, [{
+    _createClass(Mat, [{
+        key: "reset",
+        value: function reset() {
+            this._33 = Mat.scale2DMatrix(1, 1);
+        }
+    }, {
+        key: "scale2D",
+        value: function scale2D(val) {
+            var at = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0];
+
+            var m = Mat.scaleAt2DMatrix(val[0] || 1, val[1] || 1, at);
+            this._33 = Mat.multiply(this._33, m);
+            return this;
+        }
+    }, {
+        key: "rotate2D",
+        value: function rotate2D(ang) {
+            var at = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0];
+
+            var m = Mat.rotateAt2DMatrix(Math.cos(ang), Math.sin(ang), at);
+            this._33 = Mat.multiply(this._33, m);
+            return this;
+        }
+    }, {
+        key: "translate2D",
+        value: function translate2D(val) {
+            var m = Mat.translate2DMatrix(val[0] || 0, val[1] || 0);
+            this._33 = Mat.multiply(this._33, m);
+            return this;
+        }
+    }, {
+        key: "shear2D",
+        value: function shear2D(val) {
+            var at = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0];
+
+            var m = Mat.shearAt2DMatrix(Math.tan(val[0] || 0), Math.tan(val[1] || 1), at);
+            this._33 = Mat.multiply(this._33, m);
+            return this;
+        }
+    }, {
+        key: "value",
+        get: function get() {
+            return this._33;
+        }
+    }, {
+        key: "domMatrix",
+        get: function get() {
+            return new DOMMatrix(Mat.toDOMMatrix(this._33));
+        }
+    }], [{
         key: "add",
         value: function add(a, b) {
             if (typeof b != "number") {
@@ -3357,6 +3546,11 @@ var Mat = function () {
 
             return Mat.zip(g, defaultValue, useLongest);
         }
+    }, {
+        key: "toDOMMatrix",
+        value: function toDOMMatrix(m) {
+            return [m[0][0], m[0][1], m[1][0], m[1][1], m[2][0], m[2][1]];
+        }
     }, {
         key: "transform2D",
         value: function transform2D(pt, m) {
@@ -7520,6 +7714,11 @@ var Group = function (_extendableBuiltin4) {
 
             return LinearAlgebra_1.Mat.zip(this, defaultValue, useLongest);
         }
+    }, {
+        key: "toBound",
+        value: function toBound() {
+            return Bound.fromGroup(this);
+        }
     }, {
         key: "toString",
         value: function toString() {
@@ -7839,7 +8038,7 @@ var Space = function () {
 
         this.id = "space";
         this.bound = new Pt_1.Bound();
-        this._time = { prev: 0, diff: 0, end: -1 };
+        this._time = { prev: 0, diff: 0, end: -1, min: 0 };
         this.players = {};
         this.playerCount = 0;
         this._animID = -1;
@@ -7856,6 +8055,13 @@ var Space = function () {
             this._refresh = b;
             return this;
         }
+    }, {
+        key: "minFrameTime",
+        value: function minFrameTime() {
+            var ms = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+
+            this._time.min = ms;
+        }
     }, {
         key: "add",
         value: function add(p) {
@@ -7891,6 +8097,7 @@ var Space = function () {
             this._animID = requestAnimationFrame(this.play.bind(this));
             if (this._pause) return this;
             this._time.diff = time - this._time.prev;
+            if (this._time.diff < this._time.min) return this;
             this._time.prev = time;
             try {
                 this.playItems(time);
@@ -8023,6 +8230,7 @@ var MultiTouchSpace = function (_Space) {
         _this._dragged = false;
         _this._hasMouse = false;
         _this._hasTouch = false;
+        _this._hasKeyboard = false;
         return _this;
     }
 
@@ -8030,22 +8238,45 @@ var MultiTouchSpace = function (_Space) {
         key: "bindCanvas",
         value: function bindCanvas(evt, callback) {
             var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+            var customTarget = arguments[3];
 
-            this._canvas.addEventListener(evt, callback, options);
+            var target = customTarget ? customTarget : this._canvas;
+            target.addEventListener(evt, callback, options);
         }
     }, {
         key: "unbindCanvas",
         value: function unbindCanvas(evt, callback) {
             var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+            var customTarget = arguments[3];
+
+            var target = customTarget ? customTarget : this._canvas;
+            target.removeEventListener(evt, callback, options);
+        }
+    }, {
+        key: "bindDoc",
+        value: function bindDoc(evt, callback) {
+            var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+            if (document) {
+                document.addEventListener(evt, callback, options);
+            }
+        }
+    }, {
+        key: "unbindDoc",
+        value: function unbindDoc(evt, callback) {
+            var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
-            this._canvas.removeEventListener(evt, callback, options);
+            if (document) {
+                document.removeEventListener(evt, callback, options);
+            }
         }
     }, {
         key: "bindMouse",
         value: function bindMouse() {
-            var _bind = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+            var bind = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+            var customTarget = arguments[1];
 
-            if (_bind) {
+            if (bind) {
                 this._mouseDown = this._mouseDown.bind(this);
                 this._mouseUp = this._mouseUp.bind(this);
                 this._mouseOver = this._mouseOver.bind(this);
@@ -8053,22 +8284,22 @@ var MultiTouchSpace = function (_Space) {
                 this._mouseMove = this._mouseMove.bind(this);
                 this._mouseClick = this._mouseClick.bind(this);
                 this._contextMenu = this._contextMenu.bind(this);
-                this.bindCanvas("mousedown", this._mouseDown);
-                this.bindCanvas("mouseup", this._mouseUp);
-                this.bindCanvas("mouseover", this._mouseOver);
-                this.bindCanvas("mouseout", this._mouseOut);
-                this.bindCanvas("mousemove", this._mouseMove);
-                this.bindCanvas("click", this._mouseClick);
-                this.bindCanvas("contextmenu", this._contextMenu);
+                this.bindCanvas("mousedown", this._mouseDown, {}, customTarget);
+                this.bindCanvas("mouseup", this._mouseUp, {}, customTarget);
+                this.bindCanvas("mouseover", this._mouseOver, {}, customTarget);
+                this.bindCanvas("mouseout", this._mouseOut, {}, customTarget);
+                this.bindCanvas("mousemove", this._mouseMove, {}, customTarget);
+                this.bindCanvas("click", this._mouseClick, {}, customTarget);
+                this.bindCanvas("contextmenu", this._contextMenu, {}, customTarget);
                 this._hasMouse = true;
             } else {
-                this.unbindCanvas("mousedown", this._mouseDown);
-                this.unbindCanvas("mouseup", this._mouseUp);
-                this.unbindCanvas("mouseover", this._mouseOver);
-                this.unbindCanvas("mouseout", this._mouseOut);
-                this.unbindCanvas("mousemove", this._mouseMove);
-                this.unbindCanvas("click", this._mouseClick);
-                this.unbindCanvas("contextmenu", this._contextMenu);
+                this.unbindCanvas("mousedown", this._mouseDown, {}, customTarget);
+                this.unbindCanvas("mouseup", this._mouseUp, {}, customTarget);
+                this.unbindCanvas("mouseover", this._mouseOver, {}, customTarget);
+                this.unbindCanvas("mouseout", this._mouseOut, {}, customTarget);
+                this.unbindCanvas("mousemove", this._mouseMove, {}, customTarget);
+                this.unbindCanvas("click", this._mouseClick, {}, customTarget);
+                this.unbindCanvas("contextmenu", this._contextMenu, {}, customTarget);
                 this._hasMouse = false;
             }
             return this;
@@ -8078,22 +8309,41 @@ var MultiTouchSpace = function (_Space) {
         value: function bindTouch() {
             var bind = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
             var passive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+            var customTarget = arguments[2];
 
             if (bind) {
-                this.bindCanvas("touchstart", this._touchStart.bind(this), { passive: passive });
-                this.bindCanvas("touchend", this._mouseUp.bind(this));
-                this.bindCanvas("touchmove", this._touchMove.bind(this), { passive: passive });
-                this.bindCanvas("touchcancel", this._mouseOut.bind(this));
+                this.bindCanvas("touchstart", this._touchStart.bind(this), { passive: passive }, customTarget);
+                this.bindCanvas("touchend", this._mouseUp.bind(this), {}, customTarget);
+                this.bindCanvas("touchmove", this._touchMove.bind(this), { passive: passive }, customTarget);
+                this.bindCanvas("touchcancel", this._mouseOut.bind(this), {}, customTarget);
                 this._hasTouch = true;
             } else {
-                this.unbindCanvas("touchstart", this._touchStart.bind(this), { passive: passive });
-                this.unbindCanvas("touchend", this._mouseUp.bind(this));
-                this.unbindCanvas("touchmove", this._touchMove.bind(this), { passive: passive });
-                this.unbindCanvas("touchcancel", this._mouseOut.bind(this));
+                this.unbindCanvas("touchstart", this._touchStart.bind(this), { passive: passive }, customTarget);
+                this.unbindCanvas("touchend", this._mouseUp.bind(this), {}, customTarget);
+                this.unbindCanvas("touchmove", this._touchMove.bind(this), { passive: passive }, customTarget);
+                this.unbindCanvas("touchcancel", this._mouseOut.bind(this), {}, customTarget);
                 this._hasTouch = false;
             }
             return this;
         }
+    }, {
+        key: "bindKeyboard",
+        value: function bindKeyboard() {
+            var bind = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+
+            if (bind) {
+                this._keyDownBind = this._keyDown.bind(this);
+                this._keyUpBind = this._keyUp.bind(this);
+                this.bindDoc("keydown", this._keyDownBind, {});
+                this.bindDoc("keyup", this._keyUpBind, {});
+                this._hasKeyboard = true;
+            } else {
+                this.unbindDoc("keydown", this._keyDownBind, {});
+                this.unbindDoc("keyup", this._keyUpBind, {});
+                this._hasKeyboard = false;
+            }
+            return this;
+        }
     }, {
         key: "touchesToPoints",
         value: function touchesToPoints(evt) {
@@ -8110,6 +8360,7 @@ var MultiTouchSpace = function (_Space) {
     }, {
         key: "_mouseAction",
         value: function _mouseAction(type, evt) {
+            if (!this.isPlaying) return;
             var px = 0,
                 py = 0;
             if (evt instanceof MouseEvent) {
@@ -8209,6 +8460,29 @@ var MultiTouchSpace = function (_Space) {
             evt.preventDefault();
             return false;
         }
+    }, {
+        key: "_keyDown",
+        value: function _keyDown(evt) {
+            this._keyboardAction(UI_1.UIPointerActions.keydown, evt);
+            return false;
+        }
+    }, {
+        key: "_keyUp",
+        value: function _keyUp(evt) {
+            this._keyboardAction(UI_1.UIPointerActions.keyup, evt);
+            return false;
+        }
+    }, {
+        key: "_keyboardAction",
+        value: function _keyboardAction(type, evt) {
+            if (!this.isPlaying) return;
+            for (var k in this.players) {
+                if (this.players.hasOwnProperty(k)) {
+                    var v = this.players[k];
+                    if (v.action) v.action(type, evt.shiftKey ? 1 : 0, evt.altKey ? 1 : 0, evt);
+                }
+            }
+        }
     }, {
         key: "pointer",
         get: function get() {
@@ -8847,7 +9121,11 @@ exports.UIShape = {
     rectangle: "rectangle", circle: "circle", polygon: "polygon", polyline: "polyline", line: "line"
 };
 exports.UIPointerActions = {
-    up: "up", down: "down", move: "move", drag: "drag", uidrag: "uidrag", drop: "drop", uidrop: "uidrop", over: "over", out: "out", enter: "enter", leave: "leave", click: "click", contextmenu: "contextmenu", all: "all"
+    up: "up", down: "down", move: "move",
+    drag: "drag", uidrag: "uidrag", drop: "drop", uidrop: "uidrop",
+    over: "over", out: "out", enter: "enter", leave: "leave", click: "click",
+    keydown: 'keydown', keyup: 'keyup',
+    contextmenu: "contextmenu", all: "all"
 };
 
 var UI = function () {
@@ -9418,6 +9696,25 @@ var Util = function () {
             };
             request.send();
         }
+    }, {
+        key: "download",
+        value: function download(space) {
+            var filename = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'pts_canvas_image';
+            var filetype = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "png";
+            var quality = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+
+            var ftype = filetype === 'jpg' ? 'jpeg' : filetype;
+            space.element.toBlob(function (blob) {
+                var link = document.createElement('a');
+                var url = URL.createObjectURL(blob);
+                link.href = url;
+                link.download = filename + "." + filetype;
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+                URL.revokeObjectURL(url);
+            }, "image/" + ftype, quality);
+        }
     }, {
         key: "performance",
         value: function performance() {