@leafer-draw/worker 1.0.0-rc.21 → 1.0.0-rc.23

package/dist/worker.js

@@ -6,7 +6,7 @@ var LeaferUI = (function (exports) {
             hitCanvasSize: 100,
             maxCacheSize: 2560 * 1600,
             maxPatternSize: 4096 * 2160,
-            suffix: 'leaf',
+            suffix: '',
             crossOrigin: 'anonymous'
         }
     };
@@ -36,24 +36,12 @@ var LeaferUI = (function (exports) {
     const { round, pow: pow$1, PI: PI$4 } = Math;
     const MathHelper = {
         within(value, min, max) {
-            if (value < min)
+            if (min !== undefined && value < min)
                 value = min;
-            if (value > max)
+            if (max !== undefined && value > max)
                 value = max;
             return value;
         },
-        minus(value, isFourNumber) {
-            if (value instanceof Array) {
-                if (isFourNumber)
-                    value = MathHelper.fourNumber(value, 0);
-                for (let i = 0; i < value.length; i++)
-                    value[i] = -value[i];
-            }
-            else {
-                value = -value;
-            }
-            return value;
-        },
         fourNumber(num, maxValue) {
             let data;
             if (num instanceof Array) {
@@ -120,7 +108,7 @@ var LeaferUI = (function (exports) {
 
     const { sin: sin$5, cos: cos$5, acos, sqrt: sqrt$3 } = Math;
     const { float: float$1 } = MathHelper;
-    const tempPoint$3 = {};
+    const tempPoint$4 = {};
     function getWorld() {
         return Object.assign(Object.assign(Object.assign({}, getMatrixData()), getBoundsData()), { scaleX: 1, scaleY: 1, rotation: 0, skewX: 0, skewY: 0 });
     }
@@ -150,9 +138,11 @@ var LeaferUI = (function (exports) {
             t.e += x;
             t.f += y;
         },
-        translateInner(t, x, y) {
+        translateInner(t, x, y, isMoveOrigin) {
             t.e += t.a * x + t.c * y;
             t.f += t.b * x + t.d * y;
+            if (isMoveOrigin)
+                t.e -= x, t.f -= y;
         },
         scale(t, scaleX, scaleY = scaleX) {
             t.a *= scaleX;
@@ -161,8 +151,8 @@ var LeaferUI = (function (exports) {
             t.d *= scaleY;
         },
         scaleOfOuter(t, origin, scaleX, scaleY) {
-            M$6.toInnerPoint(t, origin, tempPoint$3);
-            M$6.scaleOfInner(t, tempPoint$3, scaleX, scaleY);
+            M$6.toInnerPoint(t, origin, tempPoint$4);
+            M$6.scaleOfInner(t, tempPoint$4, scaleX, scaleY);
         },
         scaleOfInner(t, origin, scaleX, scaleY = scaleX) {
             M$6.translateInner(t, origin.x, origin.y);
@@ -180,8 +170,8 @@ var LeaferUI = (function (exports) {
             t.d = c * sinR + d * cosR;
         },
         rotateOfOuter(t, origin, rotation) {
-            M$6.toInnerPoint(t, origin, tempPoint$3);
-            M$6.rotateOfInner(t, tempPoint$3, rotation);
+            M$6.toInnerPoint(t, origin, tempPoint$4);
+            M$6.rotateOfInner(t, tempPoint$4, rotation);
         },
         rotateOfInner(t, origin, rotation) {
             M$6.translateInner(t, origin.x, origin.y);
@@ -202,8 +192,8 @@ var LeaferUI = (function (exports) {
             }
         },
         skewOfOuter(t, origin, skewX, skewY) {
-            M$6.toInnerPoint(t, origin, tempPoint$3);
-            M$6.skewOfInner(t, tempPoint$3, skewX, skewY);
+            M$6.toInnerPoint(t, origin, tempPoint$4);
+            M$6.skewOfInner(t, tempPoint$4, skewX, skewY);
         },
         skewOfInner(t, origin, skewX, skewY = 0) {
             M$6.translateInner(t, origin.x, origin.y);
@@ -219,8 +209,10 @@ var LeaferUI = (function (exports) {
             t.e = child.e * a + child.f * c + e;
             t.f = child.e * b + child.f * d + f;
         },
-        multiplyParent(t, parent, to, abcdChanged, childScaleData) {
-            const { e, f } = t;
+        multiplyParent(t, parent, to, abcdChanged, childScaleData, scrollData) {
+            let { e, f } = t;
+            if (scrollData)
+                e += scrollData.scrollX, f += scrollData.scrollY;
             to || (to = t);
             if (abcdChanged === undefined)
                 abcdChanged = t.a !== 1 || t.b || t.c || t.d !== 1;
@@ -341,7 +333,7 @@ var LeaferUI = (function (exports) {
             t.e = x;
             t.f = y;
             if (origin)
-                M$6.translateInner(t, -origin.x, -origin.y);
+                M$6.translateInner(t, -origin.x, -origin.y, true);
         },
         getLayout(t, origin, firstSkewY) {
             const { a, b, c, d, e, f } = t;
@@ -597,7 +589,7 @@ var LeaferUI = (function (exports) {
             return this;
         }
     }
-    const tempPoint$2 = new Point();
+    const tempPoint$3 = new Point();
 
     class Matrix {
         constructor(a, b, c, d, e, f) {
@@ -761,7 +753,7 @@ var LeaferUI = (function (exports) {
     const { floor, ceil: ceil$2 } = Math;
     let right$1, bottom$1, boundsRight, boundsBottom;
     const point = {};
-    const toPoint$1 = {};
+    const toPoint$2 = {};
     const BoundsHelper = {
         tempBounds: {},
         set(t, x = 0, y = 0, width = 0, height = 0) {
@@ -776,15 +768,17 @@ var LeaferUI = (function (exports) {
             t.width = bounds.width;
             t.height = bounds.height;
         },
-        copyAndSpread(t, bounds, spreadX, spreadY) {
-            if (spreadX instanceof Array) {
-                const four = fourNumber(spreadX);
-                B.set(t, bounds.x - four[3], bounds.y - four[0], bounds.width + four[1] + four[3], bounds.height + four[2] + four[0]);
+        copyAndSpread(t, bounds, spread, isShrink) {
+            if (spread instanceof Array) {
+                const four = fourNumber(spread);
+                isShrink
+                    ? B.set(t, bounds.x + four[3], bounds.y + four[0], bounds.width - four[1] - four[3], bounds.height - four[2] - four[0])
+                    : B.set(t, bounds.x - four[3], bounds.y - four[0], bounds.width + four[1] + four[3], bounds.height + four[2] + four[0]);
             }
             else {
-                if (!spreadY)
-                    spreadY = spreadX;
-                B.set(t, bounds.x - spreadX, bounds.y - spreadY, bounds.width + spreadX * 2, bounds.height + spreadY * 2);
+                if (isShrink)
+                    spread = -spread;
+                B.set(t, bounds.x - spread, bounds.y - spread, bounds.width + spread * 2, bounds.height + spread * 2);
             }
         },
         minX(t) { return t.width > 0 ? t.x : t.x + t.width; },
@@ -861,17 +855,17 @@ var LeaferUI = (function (exports) {
             else {
                 point.x = t.x;
                 point.y = t.y;
-                toOuterPoint$1(matrix, point, toPoint$1);
-                setPoint$3(tempPointBounds$1, toPoint$1.x, toPoint$1.y);
+                toOuterPoint$1(matrix, point, toPoint$2);
+                setPoint$3(tempPointBounds$1, toPoint$2.x, toPoint$2.y);
                 point.x = t.x + t.width;
-                toOuterPoint$1(matrix, point, toPoint$1);
-                addPoint$3(tempPointBounds$1, toPoint$1.x, toPoint$1.y);
+                toOuterPoint$1(matrix, point, toPoint$2);
+                addPoint$3(tempPointBounds$1, toPoint$2.x, toPoint$2.y);
                 point.y = t.y + t.height;
-                toOuterPoint$1(matrix, point, toPoint$1);
-                addPoint$3(tempPointBounds$1, toPoint$1.x, toPoint$1.y);
+                toOuterPoint$1(matrix, point, toPoint$2);
+                addPoint$3(tempPointBounds$1, toPoint$2.x, toPoint$2.y);
                 point.x = t.x;
-                toOuterPoint$1(matrix, point, toPoint$1);
-                addPoint$3(tempPointBounds$1, toPoint$1.x, toPoint$1.y);
+                toOuterPoint$1(matrix, point, toPoint$2);
+                addPoint$3(tempPointBounds$1, toPoint$2.x, toPoint$2.y);
                 toBounds$4(tempPointBounds$1, to);
             }
         },
@@ -884,13 +878,16 @@ var LeaferUI = (function (exports) {
             const scale = Math.min(baseScale, Math.min(t.width / put.width, t.height / put.height));
             return new Matrix(scale, 0, 0, scale, -put.x * scale, -put.y * scale);
         },
-        getSpread(t, spreadX, spreadY) {
+        getSpread(t, spread) {
             const n = {};
-            B.copyAndSpread(n, t, spreadX, spreadY);
+            B.copyAndSpread(n, t, spread);
             return n;
         },
-        spread(t, spreadX, spreadY = spreadX) {
-            B.copyAndSpread(t, t, spreadX, spreadY);
+        spread(t, spread) {
+            B.copyAndSpread(t, t, spread);
+        },
+        shrink(t, shrink) {
+            B.copyAndSpread(t, t, shrink, true);
         },
         ceil(t) {
             const { x, y } = t;
@@ -1070,12 +1067,12 @@ var LeaferUI = (function (exports) {
         getFitMatrix(put, baseScale) {
             return BoundsHelper.getFitMatrix(this, put, baseScale);
         }
-        spread(fourNumber, spreadY) {
-            BoundsHelper.spread(this, fourNumber, spreadY);
+        spread(fourNumber) {
+            BoundsHelper.spread(this, fourNumber);
             return this;
         }
         shrink(fourNumber) {
-            BoundsHelper.spread(this, MathHelper.minus(fourNumber, true));
+            BoundsHelper.shrink(this, fourNumber);
             return this;
         }
         ceil() {
@@ -1192,6 +1189,10 @@ var LeaferUI = (function (exports) {
         Direction9[Direction9["bottomLeft"] = 6] = "bottomLeft";
         Direction9[Direction9["left"] = 7] = "left";
         Direction9[Direction9["center"] = 8] = "center";
+        Direction9[Direction9["top-left"] = 0] = "top-left";
+        Direction9[Direction9["top-right"] = 2] = "top-right";
+        Direction9[Direction9["bottom-right"] = 4] = "bottom-right";
+        Direction9[Direction9["bottom-left"] = 6] = "bottom-left";
     })(exports.Direction9 || (exports.Direction9 = {}));
 
     const directionData = [
@@ -1205,15 +1206,28 @@ var LeaferUI = (function (exports) {
         { x: 0, y: 0.5 },
         { x: 0.5, y: 0.5 }
     ];
+    directionData.forEach(item => item.type = 'percent');
     const AroundHelper = {
         directionData,
         tempPoint: {},
         get: get$5,
-        toPoint(around, bounds, to, onlySize) {
+        toPoint(around, bounds, to, onlySize, pointBounds) {
             to || (to = {});
             const point = get$5(around);
-            to.x = point.x * bounds.width;
-            to.y = point.y * bounds.height;
+            to.x = point.x;
+            to.y = point.y;
+            if (point.type === 'percent') {
+                to.x *= bounds.width;
+                to.y *= bounds.height;
+                if (pointBounds) {
+                    to.x -= pointBounds.x;
+                    to.y -= pointBounds.y;
+                    if (point.x)
+                        to.x -= (point.x === 1) ? pointBounds.width : (point.x === 0.5 ? point.x * pointBounds.width : 0);
+                    if (point.y)
+                        to.y -= (point.y === 1) ? pointBounds.height : (point.y === 0.5 ? point.y * pointBounds.height : 0);
+                }
+            }
             if (!onlySize) {
                 to.x += bounds.x;
                 to.y += bounds.y;
@@ -1224,6 +1238,13 @@ var LeaferUI = (function (exports) {
         return typeof around === 'string' ? directionData[exports.Direction9[around]] : around;
     }
 
+    const { toPoint: toPoint$1 } = AroundHelper;
+    const AlignHelper = {
+        toPoint(align, contentBounds, bounds, to, onlySize) {
+            toPoint$1(align, bounds, to, onlySize, contentBounds);
+        }
+    };
+
     const StringNumberMap = {
         '0': 1,
         '1': 1,
@@ -1456,13 +1477,19 @@ var LeaferUI = (function (exports) {
         },
         clone(data) {
             return JSON.parse(JSON.stringify(data));
+        },
+        toMap(list) {
+            const map = {};
+            for (let i = 0, len = list.length; i < len; i++)
+                map[list[i]] = true;
+            return map;
         }
     };
     const { assign } = DataHelper;
 
     class LeafData {
         get __blendMode() {
-            if (this.eraser)
+            if (this.eraser && this.eraser !== 'path')
                 return 'destination-out';
             const { blendMode } = this;
             return blendMode === 'pass-through' ? null : blendMode;
@@ -2092,7 +2119,7 @@ var LeaferUI = (function (exports) {
         }
         clear() {
             const { pixelRatio } = this;
-            this.clearRect(0, 0, this.width * pixelRatio, this.height * pixelRatio);
+            this.clearRect(0, 0, this.width * pixelRatio + 2, this.height * pixelRatio + 2);
         }
         isSameSize(size) {
             return this.width === size.width && this.height === size.height && this.pixelRatio === size.pixelRatio;
@@ -2211,7 +2238,7 @@ var LeaferUI = (function (exports) {
     const { setPoint: setPoint$2, addPoint: addPoint$2 } = TwoPointBoundsHelper;
     const { set: set$2 } = PointHelper;
     const { M: M$5, L: L$6, C: C$5, Q: Q$4, Z: Z$5 } = PathCommandMap;
-    const tempPoint$1 = {};
+    const tempPoint$2 = {};
     const BezierHelper = {
         points(data, points, curve, close) {
             data.push(M$5, points[0], points[1]);
@@ -2401,8 +2428,8 @@ var LeaferUI = (function (exports) {
             addMode ? addPoint$2(pointBounds, fromX, fromY) : setPoint$2(pointBounds, fromX, fromY);
             addPoint$2(pointBounds, toX, toY);
             for (let i = 0, len = tList.length; i < len; i++) {
-                getPointAndSet(tList[i], fromX, fromY, x1, y1, x2, y2, toX, toY, tempPoint$1);
-                addPoint$2(pointBounds, tempPoint$1.x, tempPoint$1.y);
+                getPointAndSet(tList[i], fromX, fromY, x1, y1, x2, y2, toX, toY, tempPoint$2);
+                addPoint$2(pointBounds, tempPoint$2.x, tempPoint$2.y);
             }
         },
         getPointAndSet(t, fromX, fromY, x1, y1, x2, y2, toX, toY, setPoint) {
@@ -3748,6 +3775,8 @@ var LeaferUI = (function (exports) {
                 this.__setAttr(key, value);
                 this.__layout.boxChanged || this.__layout.boxChange();
                 this.waitParent(() => { this.parent.__updateMask(value); });
+                if (typeof value === 'string')
+                    this.maskType = value;
             }
         }));
     }
@@ -3959,15 +3988,21 @@ var LeaferUI = (function (exports) {
             }
             return true;
         },
-        moveWorld(t, x, y) {
-            const local = { x, y };
+        moveWorld(t, x, y = 0) {
+            const local = typeof x === 'object' ? Object.assign({}, x) : { x, y };
             if (t.parent)
                 toInnerPoint$1(t.parent.worldTransform, local, local, true);
             L.moveLocal(t, local.x, local.y);
         },
         moveLocal(t, x, y = 0) {
-            t.x += x;
-            t.y += y;
+            if (typeof x === 'object') {
+                t.x += x.x;
+                t.y += x.y;
+            }
+            else {
+                t.x += x;
+                t.y += y;
+            }
         },
         zoomOfWorld(t, origin, scaleX, scaleY, resize) {
             L.zoomOfLocal(t, getTempLocal(t, origin), scaleX, scaleY, resize);
@@ -4171,11 +4206,19 @@ var LeaferUI = (function (exports) {
 
     const { getRelativeWorld: getRelativeWorld$1 } = LeafHelper;
     const { toOuterOf: toOuterOf$2, getPoints, copy: copy$5 } = BoundsHelper;
+    const localContent = '_localContentBounds';
+    const worldContent = '_worldContentBounds', worldBox = '_worldBoxBounds', worldStroke = '_worldStrokeBounds';
     class LeafLayout {
+        get contentBounds() { return this._contentBounds || this.boxBounds; }
+        set contentBounds(bounds) { this._contentBounds = bounds; }
         get strokeBounds() { return this._strokeBounds || this.boxBounds; }
         get renderBounds() { return this._renderBounds || this.boxBounds; }
+        get localContentBounds() { toOuterOf$2(this.contentBounds, this.leaf.__localMatrix, this[localContent] || (this[localContent] = {})); return this[localContent]; }
         get localStrokeBounds() { return this._localStrokeBounds || this; }
         get localRenderBounds() { return this._localRenderBounds || this; }
+        get worldContentBounds() { toOuterOf$2(this.contentBounds, this.leaf.__world, this[worldContent] || (this[worldContent] = {})); return this[worldContent]; }
+        get worldBoxBounds() { toOuterOf$2(this.boxBounds, this.leaf.__world, this[worldBox] || (this[worldBox] = {})); return this[worldBox]; }
+        get worldStrokeBounds() { toOuterOf$2(this.strokeBounds, this.leaf.__world, this[worldStroke] || (this[worldStroke] = {})); return this[worldStroke]; }
         get a() { return 1; }
         get b() { return 0; }
         get c() { return 0; }
@@ -4258,7 +4301,6 @@ var LeaferUI = (function (exports) {
                 case 'content':
                     if (this.contentBounds)
                         return this.contentBounds;
-                case 'margin':
                 case 'box':
                     return this.boxBounds;
                 case 'stroke':
@@ -4271,8 +4313,9 @@ var LeaferUI = (function (exports) {
                     return this.localRenderBounds;
                 case 'stroke':
                     return this.localStrokeBounds;
-                case 'margin':
                 case 'content':
+                    if (this.contentBounds)
+                        return this.localContentBounds;
                 case 'box':
                     return this.leaf.__localBoxBounds;
             }
@@ -4281,15 +4324,13 @@ var LeaferUI = (function (exports) {
             switch (type) {
                 case 'render':
                     return this.leaf.__world;
+                case 'stroke':
+                    return this.worldStrokeBounds;
                 case 'content':
                     if (this.contentBounds)
-                        return this.getWorldContentBounds();
-                case 'margin':
+                        return this.worldContentBounds;
                 case 'box':
-                    return this.getWorldBoxBounds();
-                case 'margin':
-                case 'stroke':
-                    return this.getWorldStrokeBounds();
+                    return this.worldBoxBounds;
             }
         }
         getLayoutBounds(type, relative = 'world', unscale) {
@@ -4352,20 +4393,24 @@ var LeaferUI = (function (exports) {
                 points.forEach(point => leaf.innerToWorld(point, null, false, relativeLeaf));
             return points;
         }
-        getWorldContentBounds() {
-            this._worldContentBounds || (this._worldContentBounds = {});
-            toOuterOf$2(this.contentBounds, this.leaf.__world, this._worldContentBounds);
-            return this._worldContentBounds;
+        shrinkContent() {
+            const { x, y, width, height } = this.boxBounds;
+            this._contentBounds = { x, y, width, height };
+        }
+        spreadStroke() {
+            const { x, y, width, height } = this.strokeBounds;
+            this._strokeBounds = { x, y, width, height };
+            this._localStrokeBounds = { x, y, width, height };
+            if (!this.renderSpread)
+                this.spreadRenderCancel();
         }
-        getWorldBoxBounds() {
-            this._worldBoxBounds || (this._worldBoxBounds = {});
-            toOuterOf$2(this.boxBounds, this.leaf.__world, this._worldBoxBounds);
-            return this._worldBoxBounds;
+        spreadRender() {
+            const { x, y, width, height } = this.renderBounds;
+            this._renderBounds = { x, y, width, height };
+            this._localRenderBounds = { x, y, width, height };
         }
-        getWorldStrokeBounds() {
-            this._worldStrokeBounds || (this._worldStrokeBounds = {});
-            toOuterOf$2(this.strokeBounds, this.leaf.__world, this._worldStrokeBounds);
-            return this._worldStrokeBounds;
+        shrinkContentCancel() {
+            this._contentBounds = undefined;
         }
         spreadStrokeCancel() {
             const same = this.renderBounds === this.strokeBounds;
@@ -4378,18 +4423,6 @@ var LeaferUI = (function (exports) {
             this._renderBounds = this._strokeBounds;
             this._localRenderBounds = this._localStrokeBounds;
         }
-        spreadStroke() {
-            const { x, y, width, height } = this.strokeBounds;
-            this._strokeBounds = { x, y, width, height };
-            this._localStrokeBounds = { x, y, width, height };
-            if (!this.renderSpread)
-                this.spreadRenderCancel();
-        }
-        spreadRender() {
-            const { x, y, width, height } = this.renderBounds;
-            this._renderBounds = { x, y, width, height };
-            this._localRenderBounds = { x, y, width, height };
-        }
         boxChange() {
             this.boxChanged = true;
             this.localBoxChanged || this.localBoxChange();
@@ -4476,24 +4509,40 @@ var LeaferUI = (function (exports) {
             });
         },
         off(type, listener, options) {
-            let capture;
-            if (options)
-                capture = typeof options === 'boolean' ? options : options.capture;
-            let events, index;
-            const map = __getListenerMap(this, capture);
-            const typeList = typeof type === 'string' ? type.split(' ') : type;
-            typeList.forEach(type => {
-                if (type) {
-                    events = map[type];
-                    if (events) {
-                        index = events.findIndex(item => item.listener === listener);
-                        if (index > -1)
-                            events.splice(index, 1);
-                        if (!events.length)
-                            delete map[type];
-                    }
+            if (type) {
+                const typeList = typeof type === 'string' ? type.split(' ') : type;
+                if (listener) {
+                    let capture;
+                    if (options)
+                        capture = typeof options === 'boolean' ? options : options.capture;
+                    let events, index;
+                    const map = __getListenerMap(this, capture);
+                    typeList.forEach(type => {
+                        if (type) {
+                            events = map[type];
+                            if (events) {
+                                index = events.findIndex(item => item.listener === listener);
+                                if (index > -1)
+                                    events.splice(index, 1);
+                                if (!events.length)
+                                    delete map[type];
+                            }
+                        }
+                    });
                 }
-            });
+                else {
+                    const { __bubbleMap: b, __captureMap: c } = this;
+                    typeList.forEach(type => {
+                        if (b)
+                            delete b[type];
+                        if (c)
+                            delete c[type];
+                    });
+                }
+            }
+            else {
+                this.__bubbleMap = this.__captureMap = undefined;
+            }
         },
         on_(type, listener, bind, options) {
             if (bind)
@@ -4529,12 +4578,15 @@ var LeaferUI = (function (exports) {
                         break;
                 }
             }
+            this.syncEventer && this.syncEventer.emitEvent(event, capture);
         },
         emitEvent(event, capture) {
             event.current = this;
             this.emit(event.type, event, capture);
         },
         hasEvent(type, capture) {
+            if (this.syncEventer && this.syncEventer.hasEvent(type, capture))
+                return true;
             const { __bubbleMap: b, __captureMap: c } = this;
             const hasB = b && b[type], hasC = c && c[type];
             return !!(capture === undefined ? (hasB || hasC) : (capture ? hasC : hasB));
@@ -4754,10 +4806,10 @@ var LeaferUI = (function (exports) {
     };
 
     const { setLayout, multiplyParent: multiplyParent$1, translateInner, defaultWorld } = MatrixHelper;
-    const { toPoint, tempPoint } = AroundHelper;
+    const { toPoint, tempPoint: tempPoint$1 } = AroundHelper;
     const LeafMatrix = {
         __updateWorldMatrix() {
-            multiplyParent$1(this.__local || this.__layout, this.parent ? this.parent.__world : defaultWorld, this.__world, !!this.__layout.affectScaleOrRotation, this.__);
+            multiplyParent$1(this.__local || this.__layout, this.parent ? this.parent.__world : defaultWorld, this.__world, !!this.__layout.affectScaleOrRotation, this.__, this.parent && this.parent.__);
         },
         __updateLocalMatrix() {
             if (this.__local) {
@@ -4768,11 +4820,11 @@ var LeaferUI = (function (exports) {
                         layout.scaleChanged = layout.rotationChanged = false;
                     }
                 }
-                local.e = data.x;
-                local.f = data.y;
-                if (data.around) {
-                    toPoint(data.around, layout.boxBounds, tempPoint);
-                    translateInner(local, -tempPoint.x, -tempPoint.y);
+                local.e = data.x + data.offsetX;
+                local.f = data.y + data.offsetY;
+                if (data.around || data.origin) {
+                    toPoint(data.around || data.origin, layout.boxBounds, tempPoint$1);
+                    translateInner(local, -tempPoint$1.x, -tempPoint$1.y, data.origin);
                 }
             }
             this.__layout.matrixChanged = false;
@@ -4878,6 +4930,8 @@ var LeaferUI = (function (exports) {
             if (this.isBranch) {
                 if (this.leafer)
                     this.leafer.layouter.addExtra(this);
+                if (this.__.flow)
+                    this.__updateFlowLayout();
                 if (hasParentAutoLayout(this)) {
                     updateMatrix$1(this);
                 }
@@ -4910,6 +4964,8 @@ var LeaferUI = (function (exports) {
                 canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
                 canvas.opacity = this.__.opacity;
                 if (this.__.__single) {
+                    if (this.__.eraser === 'path')
+                        return this.__renderEraser(canvas, options);
                     const tempCanvas = canvas.getSameCanvas(true, true);
                     this.__draw(tempCanvas, options);
                     if (this.__worldFlipped) {
@@ -4952,6 +5008,8 @@ var LeaferUI = (function (exports) {
         __render(canvas, options) {
             if (this.__worldOpacity) {
                 if (this.__.__single) {
+                    if (this.__.eraser === 'path')
+                        return this.__renderEraser(canvas, options);
                     const tempCanvas = canvas.getSameCanvas(false, true);
                     this.__renderBranch(tempCanvas, options);
                     const nowWorld = this.__getNowWorld(options);
@@ -5091,7 +5149,9 @@ var LeaferUI = (function (exports) {
         setProxyAttr(_attrName, _newValue) { }
         getProxyAttr(_attrName) { return undefined; }
         find(_condition, _options) { return undefined; }
+        findTag(_tag) { return undefined; }
         findOne(_condition, _options) { return undefined; }
+        findId(_id) { return undefined; }
         focus(_value) { }
         forceUpdate(attrName) {
             if (attrName === undefined)
@@ -5113,9 +5173,11 @@ var LeaferUI = (function (exports) {
         __updateLocalStrokeBounds() { }
         __updateLocalRenderBounds() { }
         __updateBoxBounds() { }
+        __updateContentBounds() { }
         __updateStrokeBounds() { }
         __updateRenderBounds() { }
         __updateAutoLayout() { }
+        __updateFlowLayout() { }
         __updateNaturalSize() { }
         __updateStrokeSpread() { return 0; }
         __updateRenderSpread() { return 0; }
@@ -5123,6 +5185,13 @@ var LeaferUI = (function (exports) {
         __updateEraser(value) {
             this.__hasEraser = value ? true : this.children.some(item => item.__.eraser);
         }
+        __renderEraser(canvas, options) {
+            canvas.save();
+            this.__clip(canvas, options);
+            const { renderBounds: r } = this.__layout;
+            canvas.clearRect(r.x, r.y, r.width, r.height);
+            canvas.restore();
+        }
         __updateMask(value) {
             this.__hasMask = value ? true : this.children.some(item => item.__.mask);
         }
@@ -5303,8 +5372,8 @@ var LeaferUI = (function (exports) {
         emit(_type, _event, _capture) { }
         emitEvent(_event, _capture) { }
         hasEvent(_type, _capture) { return false; }
-        static changeAttr(attrName, defaultValue) {
-            defineDataProcessor(this.prototype, attrName, defaultValue);
+        static changeAttr(attrName, defaultValue, fn) {
+            fn ? this.addAttr(attrName, defaultValue, fn) : defineDataProcessor(this.prototype, attrName, defaultValue);
         }
         static addAttr(attrName, defaultValue, fn) {
             if (!fn)
@@ -6231,8 +6300,11 @@ var LeaferUI = (function (exports) {
                 if (!bounds.includes(this.target.__world) || this.needFill || !e.samePixelRatio) {
                     this.addBlock(this.canvas.bounds);
                     this.target.forceUpdate('surface');
+                    return;
                 }
             }
+            this.addBlock(new Bounds(0, 0, 1, 1));
+            this.changed = true;
         }
         __onLayoutEnd(event) {
             if (event.data)
@@ -6338,7 +6410,11 @@ var LeaferUI = (function (exports) {
             defineKey(target, key, {
                 set(value) { if (this.isLeafer)
                     this[privateKey] = value; },
-                get() { return this.isLeafer ? (this[privateKey] || this) : this.leafer && this.leafer.zoomLayer; }
+                get() {
+                    return this.isApp
+                        ? this.tree.zoomLayer
+                        : (this.isLeafer ? (this[privateKey] || this) : this.leafer && this.leafer.zoomLayer);
+                }
             });
         };
     }
@@ -6478,7 +6554,7 @@ var LeaferUI = (function (exports) {
     const UnitConvert = {
         number(value, percentRefer) {
             if (typeof value === 'object')
-                return value.type === 'percent' ? value.value / 100 * percentRefer : value.value;
+                return value.type === 'percent' ? (value.value > 49 ? value.value / 100 : value.value) * percentRefer : value.value;
             return value;
         }
     };
@@ -6744,6 +6820,9 @@ var LeaferUI = (function (exports) {
             pen.set(this.path = this.__.path || []);
             return pen;
         }
+        get editConfig() { return undefined; }
+        get editOuter() { return 'EditTool'; }
+        get editInner() { return 'PathEditor'; }
         constructor(data) {
             super(data);
         }
@@ -6756,7 +6835,9 @@ var LeaferUI = (function (exports) {
         }
         createProxyData() { return undefined; }
         find(_condition, _options) { return undefined; }
+        findTag(tag) { return this.find({ tag }); }
         findOne(_condition, _options) { return undefined; }
+        findId(id) { return this.findOne({ id }); }
         getPath(curve, pathForRender) {
             this.__layout.update();
             let path = pathForRender ? this.__.__pathForRender : this.__.path;
@@ -6805,7 +6886,8 @@ var LeaferUI = (function (exports) {
         __drawPathByBox(drawer) {
             const { x, y, width, height } = this.__layout.boxBounds;
             if (this.__.cornerRadius) {
-                drawer.roundRect(x, y, width, height, this.__.cornerRadius);
+                const { cornerRadius } = this.__;
+                drawer.roundRect(x, y, width, height, typeof cornerRadius === 'number' ? [cornerRadius] : cornerRadius);
             }
             else {
                 drawer.rect(x, y, width, height);
@@ -6826,6 +6908,9 @@ var LeaferUI = (function (exports) {
         static registerData(data) {
             dataProcessor(data)(this.prototype);
         }
+        static setEditConfig(_config) { }
+        static setEditOuter(_toolName) { }
+        static setEditInner(_editorName) { }
         destroy() {
             this.fill = this.stroke = null;
             super.destroy();
@@ -6903,21 +6988,84 @@ var LeaferUI = (function (exports) {
     __decorate([
         rotationType(0, true)
     ], exports.UI.prototype, "skewY", void 0);
+    __decorate([
+        positionType(0, true)
+    ], exports.UI.prototype, "offsetX", void 0);
+    __decorate([
+        positionType(0, true)
+    ], exports.UI.prototype, "offsetY", void 0);
+    __decorate([
+        positionType(0, true)
+    ], exports.UI.prototype, "scrollX", void 0);
+    __decorate([
+        positionType(0, true)
+    ], exports.UI.prototype, "scrollY", void 0);
+    __decorate([
+        autoLayoutType()
+    ], exports.UI.prototype, "origin", void 0);
     __decorate([
         autoLayoutType()
     ], exports.UI.prototype, "around", void 0);
     __decorate([
         dataType(false)
-    ], exports.UI.prototype, "draggable", void 0);
+    ], exports.UI.prototype, "lazy", void 0);
     __decorate([
-        dataType(false)
-    ], exports.UI.prototype, "editable", void 0);
+        naturalBoundsType(1)
+    ], exports.UI.prototype, "pixelRatio", void 0);
+    __decorate([
+        pathInputType()
+    ], exports.UI.prototype, "path", void 0);
+    __decorate([
+        pathType()
+    ], exports.UI.prototype, "windingRule", void 0);
+    __decorate([
+        pathType(true)
+    ], exports.UI.prototype, "closed", void 0);
+    __decorate([
+        autoLayoutType(false)
+    ], exports.UI.prototype, "flow", void 0);
+    __decorate([
+        boundsType(0)
+    ], exports.UI.prototype, "padding", void 0);
+    __decorate([
+        boundsType(0)
+    ], exports.UI.prototype, "gap", void 0);
+    __decorate([
+        boundsType('top-left')
+    ], exports.UI.prototype, "align", void 0);
+    __decorate([
+        boundsType(false)
+    ], exports.UI.prototype, "wrap", void 0);
     __decorate([
-        dataType('size')
-    ], exports.UI.prototype, "editSize", void 0);
+        boundsType('box')
+    ], exports.UI.prototype, "itemBox", void 0);
+    __decorate([
+        boundsType(true)
+    ], exports.UI.prototype, "inFlow", void 0);
+    __decorate([
+        boundsType()
+    ], exports.UI.prototype, "autoWidth", void 0);
+    __decorate([
+        boundsType()
+    ], exports.UI.prototype, "autoHeight", void 0);
+    __decorate([
+        boundsType()
+    ], exports.UI.prototype, "autoBox", void 0);
+    __decorate([
+        boundsType()
+    ], exports.UI.prototype, "widthRange", void 0);
+    __decorate([
+        boundsType()
+    ], exports.UI.prototype, "heightRange", void 0);
+    __decorate([
+        dataType(false)
+    ], exports.UI.prototype, "draggable", void 0);
     __decorate([
         dataType()
-    ], exports.UI.prototype, "editorStyle", void 0);
+    ], exports.UI.prototype, "dragBounds", void 0);
+    __decorate([
+        dataType(false)
+    ], exports.UI.prototype, "editable", void 0);
     __decorate([
         hitType(true)
     ], exports.UI.prototype, "hittable", void 0);
@@ -6972,21 +7120,6 @@ var LeaferUI = (function (exports) {
     __decorate([
         strokeType(10)
     ], exports.UI.prototype, "miterLimit", void 0);
-    __decorate([
-        dataType(false)
-    ], exports.UI.prototype, "lazy", void 0);
-    __decorate([
-        naturalBoundsType(1)
-    ], exports.UI.prototype, "pixelRatio", void 0);
-    __decorate([
-        pathInputType()
-    ], exports.UI.prototype, "path", void 0);
-    __decorate([
-        pathType()
-    ], exports.UI.prototype, "windingRule", void 0);
-    __decorate([
-        pathType(true)
-    ], exports.UI.prototype, "closed", void 0);
     __decorate([
         arrowType('none')
     ], exports.UI.prototype, "startArrow", void 0);
@@ -7109,7 +7242,6 @@ var LeaferUI = (function (exports) {
     var Leafer_1;
     const debug$1 = Debug.get('Leafer');
     exports.Leafer = Leafer_1 = class Leafer extends exports.Group {
-        static get version() { return '1.0.0-rc.21'; }
         get __tag() { return 'Leafer'; }
         get isApp() { return false; }
         get app() { return this.parent || this; }
@@ -7162,7 +7294,6 @@ var LeaferUI = (function (exports) {
             if (this.isApp)
                 this.__setApp();
             this.__checkAutoLayout(config);
-            this.updateLazyBounds();
             this.view = canvas.view;
             if (parentApp) {
                 this.__bindApp(parentApp);
@@ -7222,9 +7353,6 @@ var LeaferUI = (function (exports) {
             const data = DataHelper.copyAttrs({}, size, canvasSizeAttrs);
             Object.keys(data).forEach(key => this[key] = data[key]);
         }
-        forceFullRender() {
-            this.forceRender();
-        }
         forceRender(bounds) {
             this.renderer.addBlock(bounds ? new Bounds(bounds) : this.canvas.bounds);
             if (this.viewReady)
@@ -7302,7 +7430,7 @@ var LeaferUI = (function (exports) {
                 this.canvas.backgroundColor = newValue;
             }
             else {
-                this.forceFullRender();
+                this.forceRender();
             }
         }
         __onCreated() {
@@ -7406,6 +7534,7 @@ var LeaferUI = (function (exports) {
         __listenEvents() {
             const runId = Run.start('FirstCreate ' + this.innerName);
             this.once(LeaferEvent.START, () => Run.end(runId));
+            this.once(LayoutEvent.START, () => this.updateLazyBounds());
             this.once(LayoutEvent.END, () => this.__onReady());
             this.once(RenderEvent.START, () => this.__onCreated());
             this.once(RenderEvent.END, () => this.__onViewReady());
@@ -7512,6 +7641,8 @@ var LeaferUI = (function (exports) {
             else {
                 this.__updateRectBoxBounds();
             }
+            if (data.flow)
+                this.__updateContentBounds();
         }
         __updateStrokeBounds() { }
         __updateRenderBounds() {
@@ -7921,9 +8052,10 @@ var LeaferUI = (function (exports) {
         registerUI()
     ], exports.Canvas);
 
-    const { copyAndSpread, includes, spread, setList } = BoundsHelper;
+    const { copyAndSpread, includes, isSame: isSame$1, spread, setList } = BoundsHelper;
     exports.Text = class Text extends exports.UI {
         get __tag() { return 'Text'; }
+        get editInner() { return 'TextEditor'; }
         get textDrawData() {
             this.__layout.update();
             return this.__.__textDrawData;
@@ -7993,7 +8125,7 @@ var LeaferUI = (function (exports) {
             if (italic)
                 b.width += fontSize * 0.16;
             const contentBounds = includes(b, bounds) ? b : bounds;
-            if (contentBounds !== layout.contentBounds) {
+            if (!isSame$1(contentBounds, layout.contentBounds)) {
                 layout.contentBounds = contentBounds;
                 layout.renderChanged = true;
                 setList(data.__textBoxBounds = {}, [b, bounds]);
@@ -8021,9 +8153,6 @@ var LeaferUI = (function (exports) {
     __decorate([
         boundsType(0)
     ], exports.Text.prototype, "height", void 0);
-    __decorate([
-        boundsType(0)
-    ], exports.Text.prototype, "padding", void 0);
     __decorate([
         surfaceType('#000000')
     ], exports.Text.prototype, "fill", void 0);
@@ -8152,7 +8281,7 @@ var LeaferUI = (function (exports) {
         };
     }
 
-    const version = "1.0.0-rc.21";
+    const version = "1.0.0-rc.23";
 
     function fillText(ui, canvas) {
         let row;
@@ -8373,7 +8502,7 @@ var LeaferUI = (function (exports) {
         }
         else {
             const { renderShapeSpread: spread } = ui.__layout;
-            const worldClipBounds = getIntersectData(spread ? getSpread(current.bounds, spread * scaleX, spread * scaleY) : current.bounds, nowWorld);
+            const worldClipBounds = getIntersectData(spread ? getSpread(current.bounds, scaleX === scaleY ? spread * scaleX : [spread * scaleY, spread * scaleX]) : current.bounds, nowWorld);
             fitMatrix = current.bounds.getFitMatrix(worldClipBounds);
             let { a: fitScaleX, d: fitScaleY } = fitMatrix;
             if (fitMatrix.a < 1) {
@@ -8456,79 +8585,75 @@ var LeaferUI = (function (exports) {
 
     let origin = {};
     const { get: get$4, rotateOfOuter: rotateOfOuter$2, translate: translate$1, scaleOfOuter: scaleOfOuter$2, scale: scaleHelper, rotate } = MatrixHelper;
-    function fillOrFitMode(data, mode, box, width, height, rotation) {
+    function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
         const transform = get$4();
-        const swap = rotation && rotation !== 180;
-        const sw = box.width / (swap ? height : width);
-        const sh = box.height / (swap ? width : height);
-        const scale = mode === 'fit' ? Math.min(sw, sh) : Math.max(sw, sh);
-        const x = box.x + (box.width - width * scale) / 2;
-        const y = box.y + (box.height - height * scale) / 2;
-        translate$1(transform, x, y);
-        scaleHelper(transform, scale);
+        translate$1(transform, box.x + x, box.y + y);
+        scaleHelper(transform, scaleX, scaleY);
         if (rotation)
             rotateOfOuter$2(transform, { x: box.x + box.width / 2, y: box.y + box.height / 2 }, rotation);
-        data.scaleX = data.scaleY = scale;
         data.transform = transform;
     }
     function clipMode(data, box, x, y, scaleX, scaleY, rotation) {
         const transform = get$4();
-        translate$1(transform, box.x, box.y);
-        if (x || y)
-            translate$1(transform, x, y);
-        if (scaleX) {
+        translate$1(transform, box.x + x, box.y + y);
+        if (scaleX)
             scaleHelper(transform, scaleX, scaleY);
-            data.scaleX = transform.a;
-            data.scaleY = transform.d;
-        }
         if (rotation)
             rotate(transform, rotation);
         data.transform = transform;
     }
-    function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation) {
+    function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, align) {
         const transform = get$4();
         if (rotation) {
-            rotate(transform, rotation);
-            switch (rotation) {
-                case 90:
-                    translate$1(transform, height, 0);
-                    break;
-                case 180:
-                    translate$1(transform, width, height);
-                    break;
-                case 270:
-                    translate$1(transform, 0, width);
-                    break;
+            if (align === 'center') {
+                rotateOfOuter$2(transform, { x: width / 2, y: height / 2 }, rotation);
+            }
+            else {
+                rotate(transform, rotation);
+                switch (rotation) {
+                    case 90:
+                        translate$1(transform, height, 0);
+                        break;
+                    case 180:
+                        translate$1(transform, width, height);
+                        break;
+                    case 270:
+                        translate$1(transform, 0, width);
+                        break;
+                }
             }
         }
-        origin.x = box.x;
-        origin.y = box.y;
-        if (x || y)
-            origin.x += x, origin.y += y;
+        origin.x = box.x + x;
+        origin.y = box.y + y;
         translate$1(transform, origin.x, origin.y);
-        if (scaleX) {
+        if (scaleX)
             scaleOfOuter$2(transform, origin, scaleX, scaleY);
-            data.scaleX = scaleX;
-            data.scaleY = scaleY;
-        }
         data.transform = transform;
     }
 
     const { get: get$3, translate } = MatrixHelper;
     const tempBox = new Bounds();
+    const tempPoint = {};
     function createData(leafPaint, image, paint, box) {
         let { width, height } = image;
         if (paint.padding)
             box = tempBox.set(box).shrink(paint.padding);
-        const { opacity, mode, offset, scale, size, rotation, blendMode, repeat } = paint;
+        const { opacity, mode, align, offset, scale, size, rotation, blendMode, repeat } = paint;
         const sameBox = box.width === width && box.height === height;
         if (blendMode)
             leafPaint.blendMode = blendMode;
         const data = leafPaint.data = { mode };
-        let x, y, scaleX, scaleY;
-        if (offset)
-            x = offset.x, y = offset.y;
-        if (size) {
+        const swapSize = align !== 'center' && (rotation || 0) % 180 === 90;
+        const swapWidth = swapSize ? height : width, swapHeight = swapSize ? width : height;
+        let x = 0, y = 0, scaleX, scaleY;
+        if (!mode || mode === 'cover' || mode === 'fit') {
+            if (!sameBox || rotation) {
+                const sw = box.width / swapWidth, sh = box.height / swapHeight;
+                scaleX = scaleY = mode === 'fit' ? Math.min(sw, sh) : Math.max(sw, sh);
+                x += (box.width - width * scaleX) / 2, y += (box.height - height * scaleY) / 2;
+            }
+        }
+        else if (size) {
             scaleX = (typeof size === 'number' ? size : size.width) / width;
             scaleY = (typeof size === 'number' ? size : size.height) / height;
         }
@@ -8536,26 +8661,36 @@ var LeaferUI = (function (exports) {
             scaleX = typeof scale === 'number' ? scale : scale.x;
             scaleY = typeof scale === 'number' ? scale : scale.y;
         }
+        if (align) {
+            const imageBounds = { x, y, width: swapWidth, height: swapHeight };
+            if (scaleX)
+                imageBounds.width *= scaleX, imageBounds.height *= scaleY;
+            AlignHelper.toPoint(align, imageBounds, box, tempPoint, true);
+            x += tempPoint.x, y += tempPoint.y;
+        }
+        if (offset)
+            x += offset.x, y += offset.y;
         switch (mode) {
             case 'strench':
                 if (!sameBox)
                     width = box.width, height = box.height;
                 break;
+            case 'normal':
             case 'clip':
-                if (offset || scaleX || rotation)
+                if (x || y || scaleX || rotation)
                     clipMode(data, box, x, y, scaleX, scaleY, rotation);
                 break;
             case 'repeat':
                 if (!sameBox || scaleX || rotation)
-                    repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation);
+                    repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, align);
                 if (!repeat)
                     data.repeat = 'repeat';
                 break;
             case 'fit':
             case 'cover':
             default:
-                if (!sameBox || rotation)
-                    fillOrFitMode(data, mode, box, width, height, rotation);
+                if (scaleX)
+                    fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation);
         }
         if (!data.transform) {
             if (box.x || box.y) {
@@ -8563,6 +8698,10 @@ var LeaferUI = (function (exports) {
                 translate(data.transform, box.x, box.y);
             }
         }
+        if (scaleX && mode !== 'strench') {
+            data.scaleX = scaleX;
+            data.scaleY = scaleY;
+        }
         data.width = width;
         data.height = height;
         if (opacity)
@@ -9460,11 +9599,13 @@ var LeaferUI = (function (exports) {
         const { rows, overflow } = drawData;
         let { textOverflow } = style;
         rows.splice(overflow);
-        if (textOverflow !== 'hide') {
-            if (textOverflow === 'ellipsis')
+        if (textOverflow && textOverflow !== 'show') {
+            if (textOverflow === 'hide')
+                textOverflow = '';
+            else if (textOverflow === 'ellipsis')
                 textOverflow = '...';
             let char, charRight;
-            const ellipsisWidth = Platform.canvas.measureText(textOverflow).width;
+            const ellipsisWidth = textOverflow ? Platform.canvas.measureText(textOverflow).width : 0;
             const right = style.x + style.width - ellipsisWidth;
             const list = style.textWrap === 'none' ? rows : [rows[overflow - 1]];
             list.forEach(row => {
@@ -9618,6 +9759,13 @@ var LeaferUI = (function (exports) {
                     resolve();
                     this.running = false;
                 };
+                if (filename === 'json') {
+                    return over({ data: leaf.toJSON() });
+                }
+                else if (FileHelper.fileType(filename) === 'json') {
+                    Platform.origin.download('data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(leaf.toJSON())), filename);
+                    return over({ data: true });
+                }
                 const { leafer } = leaf;
                 if (leafer) {
                     leafer.waitViewCompleted(() => __awaiter(this, void 0, void 0, function* () {
@@ -9625,8 +9773,12 @@ var LeaferUI = (function (exports) {
                         let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
                         const { worldTransform, isLeafer, isFrame } = leaf;
                         const { slice, trim, onCanvas } = options;
-                        const scale = options.scale || 1;
-                        const pixelRatio = options.pixelRatio || 1;
+                        let scale = options.scale || 1;
+                        let pixelRatio = options.pixelRatio || 1;
+                        if (leaf.isApp) {
+                            scale *= pixelRatio;
+                            pixelRatio = leaf.app.pixelRatio;
+                        }
                         const screenshot = options.screenshot || leaf.isApp;
                         const fill = (isLeafer && screenshot) ? (options.fill === undefined ? leaf.fill : options.fill) : options.fill;
                         const needFill = FileHelper.isOpaqueImage(filename) || fill, matrix = new Matrix();
@@ -9756,6 +9908,7 @@ var LeaferUI = (function (exports) {
 
     useCanvas();
 
+    exports.AlignHelper = AlignHelper;
     exports.AnimateEvent = AnimateEvent;
     exports.AroundHelper = AroundHelper;
     exports.AutoBounds = AutoBounds;
@@ -9901,7 +10054,7 @@ var LeaferUI = (function (exports) {
     exports.surfaceType = surfaceType;
     exports.tempBounds = tempBounds$1;
     exports.tempMatrix = tempMatrix;
-    exports.tempPoint = tempPoint$2;
+    exports.tempPoint = tempPoint$3;
     exports.useCanvas = useCanvas;
     exports.useModule = useModule;
     exports.version = version;