leafer-game 2.1.11 → 2.2.1

package/dist/web.js

@@ -811,6 +811,11 @@ var LeaferUI = function(exports) {
         toOuterOf(t, matrix, to) {
             toOuterPoint$3(matrix, t, to);
         },
+        toVertical(t, rotation, verticalDistance, to) {
+            const r = rotation * OneRadian;
+            t.x += -Math.sin(r) * verticalDistance;
+            t.y += Math.cos(r) * verticalDistance;
+        },
         getCenter(t, to) {
             return {
                 x: t.x + (to.x - t.x) / 2,
@@ -4256,10 +4261,13 @@ var LeaferUI = function(exports) {
     function surfaceType(defaultValue) {
         return decorateLeafAttr(defaultValue, key => attr({
             set(value) {
-                this.__setAttr(key, value) && (this.__layout.surfaceChanged || this.__layout.surfaceChange());
+                this.__setAttr(key, value) && doSurfaceType(this);
             }
         }));
     }
+    function doSurfaceType(leaf) {
+        leaf.__layout.surfaceChanged || leaf.__layout.surfaceChange();
+    }
     function dimType(defaultValue) {
         return decorateLeafAttr(defaultValue, key => attr({
             set(value) {
@@ -4319,12 +4327,12 @@ var LeaferUI = function(exports) {
             }
         }));
     }
-    function maskType(defaultValue) {
+    function maskType(defaultValue, updateSelf) {
         return decorateLeafAttr(defaultValue, key => attr({
             set(value) {
                 if (this.__setAttr(key, value)) {
                     this.__layout.boxChanged || this.__layout.boxChange();
-                    this.waitParent(() => {
+                    updateSelf ? this.__updateMask() : this.waitParent(() => {
                         this.parent.__updateMask(value);
                     });
                 }
@@ -5855,7 +5863,8 @@ var LeaferUI = function(exports) {
             if (this.__worldOpacity && hasSize(nowWorld)) {
                 const data = this.__;
                 if (data.__useDim) {
-                    if (data.dim) options.dimOpacity = data.dim === true ? .2 : data.dim; else if (data.bright && !options.topRendering) return options.topList.add(this); else if (data.dimskip) options.dimOpacity && (options.dimOpacity = 0);
+                    if (data.bright && !options.topRendering) return options.topList.add(this);
+                    if (data.dim) options.dimOpacity = data.dim === true ? .2 : data.dim; else if (data.dimskip) options.dimOpacity && (options.dimOpacity = 0);
                 }
                 if (data.__single && !this.isBranchLeaf) {
                     if (data.eraser === "path") return this.__renderEraser(canvas, options);
@@ -5879,6 +5888,7 @@ var LeaferUI = function(exports) {
                     child = children[i];
                     excludeRenderBounds$1(child, options) || (child.__hasComplex ? LeafHelper.renderComplex(child, canvas, options) : child.__render(canvas, options));
                 }
+                if (this.__hasMask === 0) this.__rerenderMask(canvas, options);
             }
         },
         __clip(canvas, options) {
@@ -6087,11 +6097,19 @@ var LeaferUI = function(exports) {
         updateLayout() {
             this.__layout.update();
         }
-        forceUpdate(attrName) {
-            if (isUndefined(attrName)) attrName = "width"; else if (attrName === "surface") attrName = "blendMode";
-            const value = this.__.__getInput(attrName);
-            this.__[attrName] = isUndefined(value) ? null : undefined;
-            this[attrName] = value;
+        forceUpdate(typeOrAttrName) {
+            let quick;
+            if (!typeOrAttrName || typeOrAttrName === "bounds") doBoundsType(this), quick = true; else if (typeOrAttrName === "surface") doSurfaceType(this), 
+            quick = true; else if (typeOrAttrName === "stroke") doStrokeType(this), quick = true;
+            if (quick) {
+                const {leafer: leafer} = this;
+                return leafer && leafer.watcher && leafer.watcher.__onAttrChange({
+                    target: this
+                });
+            }
+            const value = this.__.__getInput(typeOrAttrName);
+            this.__[typeOrAttrName] = isUndefined(value) ? null : undefined;
+            this[typeOrAttrName] = value;
         }
         forceRender(_bounds, _sync) {
             this.forceUpdate("surface");
@@ -6110,7 +6128,8 @@ var LeaferUI = function(exports) {
             canvas.restore();
         }
         __updateMask(_value) {
-            this.__hasMask = this.children.some(item => item.__.mask && item.__.visible && item.__.opacity);
+            const hasMask = this.children.some(item => item.__.mask && item.__.visible && item.__.opacity);
+            this.__hasMask = this.__.maskskip ? hasMask && 0 : hasMask;
         }
         __getNowWorld(options) {
             if (options.matrix) {
@@ -6569,7 +6588,7 @@ var LeaferUI = function(exports) {
             this.levelMap = null;
         }
     }
-    const version = "2.1.11";
+    const version = "2.2.1";
     const debug$5 = Debug.get("LeaferCanvas");
     class LeaferCanvas extends LeaferCanvasBase {
         set zIndex(zIndex) {
@@ -7450,7 +7469,7 @@ var LeaferUI = function(exports) {
                 for (let i = 0, len = list.length; i < len; i++) {
                     find = list[i];
                     if (ignoreHittable || LeafHelper.worldHittable(find)) {
-                        this.hitChild(find, point);
+                        this.hitChild(find, find.hitThrough ? this.point : point);
                         if (findList.length) {
                             if (find.isBranchLeaf && list.some(item => item !== find && LeafHelper.hasParent(item, find))) {
                                 findList.reset();
@@ -7463,7 +7482,7 @@ var LeaferUI = function(exports) {
             }
             if (bottomList) {
                 for (let i = 0, len = bottomList.length; i < len; i++) {
-                    this.hitChild(bottomList[i].target, this.point, bottomList[i].proxy);
+                    this.hitChild(bottomList[i].target, this.point, undefined, bottomList[i].proxy);
                     if (findList.length) return findList.list[0];
                 }
             }
@@ -7521,42 +7540,38 @@ var LeaferUI = function(exports) {
         hitBranch(branch) {
             this.eachFind(branch.children, branch.__onlyHitMask);
         }
-        eachFind(children, hitMask) {
+        eachFind(children, onlyHitMask) {
             let child, hit, data;
             const {point: point} = this, len = children.length;
             for (let i = len - 1; i > -1; i--) {
                 child = children[i], data = child.__;
-                if (!data.visible || hitMask && !data.mask) continue;
+                if (!data.visible || onlyHitMask && !data.mask) continue;
                 hit = hitRadiusPoint$1(child.__world, data.hitRadius ? copyRadiusPoint$1(tempPoint$2, point, data.hitRadius) : point);
                 if (child.isBranch) {
                     if (hit || child.__ignoreHitWorld) {
                         if (child.isBranchLeaf && data.__clipAfterFill && !child.__hitWorld(point, true)) continue;
                         if (child.topChildren) this.eachFind(child.topChildren, false);
                         this.eachFind(child.children, child.__onlyHitMask);
-                        if (child.isBranchLeaf) this.hitChild(child, point);
+                        if (child.isBranchLeaf) this.hitChild(child, point, onlyHitMask);
                     }
                 } else {
-                    if (hit) this.hitChild(child, point);
+                    if (hit) this.hitChild(child, point, onlyHitMask);
                 }
             }
         }
-        hitChild(child, point, proxy) {
+        hitChild(child, point, onlyHitMask, proxy) {
             if (this.exclude && this.exclude.has(child)) return;
-            if (child.__hitWorld(point)) {
-                const {parent: parent} = child;
-                if (parent && parent.__hasMask && !child.__.mask) {
-                    let findMasks = [], item;
-                    const {children: children} = parent;
-                    for (let i = 0, len = children.length; i < len; i++) {
-                        item = children[i];
-                        if (item.__.mask) findMasks.push(item);
-                        if (item === child) {
-                            if (findMasks && !findMasks.every(value => value.__hitWorld(point))) return;
-                            break;
-                        }
-                    }
+            if (child.__hitWorld(point, onlyHitMask && child.mask === "path" ? true : undefined)) {
+                const {parent: parent, mask: mask} = child;
+                if (parent && parent.__hasMask && mask && !(mask === "clipping" || mask === "clipping-path")) {
+                    if (!parent.children.some(item => !item.mask && item.__hitWorld(point))) return;
                 }
-                this.findList.add(proxy || child);
+                const leaf = proxy || child, {hitThrough: hitThrough} = child, {findList: findList} = this;
+                if (hitThrough) {
+                    const index = findList.list.findIndex(item => item[hitThrough] === child[hitThrough]);
+                    if (index > 0) return findList.addAt(leaf, index);
+                }
+                findList.add(leaf);
             }
         }
         clear() {
@@ -8323,6 +8338,7 @@ var LeaferUI = function(exports) {
     __decorate([ dataType("auto") ], exports.UI.prototype, "dragBoundsType", void 0);
     __decorate([ dataType(false) ], exports.UI.prototype, "editable", void 0);
     __decorate([ hitType(true) ], exports.UI.prototype, "hittable", void 0);
+    __decorate([ hitType() ], exports.UI.prototype, "hitThrough", void 0);
     __decorate([ hitType("path") ], exports.UI.prototype, "hitFill", void 0);
     __decorate([ strokeType("path") ], exports.UI.prototype, "hitStroke", void 0);
     __decorate([ hitType(false) ], exports.UI.prototype, "hitBox", void 0);
@@ -9165,7 +9181,7 @@ var LeaferUI = function(exports) {
             data.__font = `${italic ? "italic " : ""}${textCase === "small-caps" ? "small-caps " : ""}${fontWeight !== "normal" ? fontWeight + " " : ""}${fontSize || 12}px ${fontFamily || "caption"}`;
             stintSet$1(data, "__padding", padding && MathHelper.fourNumber(padding));
             stintSet$1(data, "__clipText", textOverflow !== "show" && !data.__autoSize);
-            stintSet$1(data, "__isCharMode", width || height || data.__letterSpacing || textCase !== "none");
+            stintSet$1(data, "__isCharMode", width || height || data.__letterSpacing || data.motionText || textCase !== "none");
             data.__textDrawData = TextConvert.getDrawData((data.__isPlacehold = data.placeholder && data.text === "") ? data.placeholder : data.text, this.__);
         }
         __updateBoxBounds() {
@@ -9190,7 +9206,7 @@ var LeaferUI = function(exports) {
                 this.__updateNaturalSize();
             } else super.__updateBoxBounds();
             if (italic) b.width += fontSize * .16;
-            DataHelper.stintSet(this, "isOverflow", !includes(b, contentBounds));
+            DataHelper.stintSet(this, "isOverflow", !includes(b, contentBounds) && !data.motionText);
             if (this.isOverflow) setList(data.__textBoxBounds = {}, [ b, contentBounds ]), layout.renderChanged = true; else data.__textBoxBounds = b;
         }
         __updateRenderSpread() {
@@ -9912,6 +9928,7 @@ var LeaferUI = function(exports) {
         }
         dragEnd(data) {
             if (!this.dragging && !this.moving) return;
+            setTimeout(() => this.interaction.pointerMove(data));
             if (this.checkDragEndAnimate(data)) return;
             this.dragEndReal(data);
         }
@@ -10638,8 +10655,10 @@ var LeaferUI = function(exports) {
         if (!needHitFillPath && !needHitStrokePath) return false;
         const radiusWidth = inner.radiusX * 2;
         let hitWidth = radiusWidth;
+        let {strokeAlign: strokeAlign} = data;
+        if (data.motionText) hitWidth += data.fontSize / 2, strokeAlign = "center";
         if (needHitStrokePath) {
-            switch (data.strokeAlign) {
+            switch (strokeAlign) {
               case "inside":
                 hitWidth += strokeWidth * 2;
                 if (!needHitFillPath && this.__hitFill(inner) && this.__hitStroke(inner, hitWidth)) return true;
@@ -10669,9 +10688,9 @@ var LeaferUI = function(exports) {
         return this.__hitCanvas ? ui$4.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
     };
     exports.Text.prototype.__drawHitPath = function(canvas) {
-        const {__lineHeight: __lineHeight, fontSize: fontSize, __baseLine: __baseLine, __letterSpacing: __letterSpacing, __textDrawData: data} = this.__;
+        const data = this.__, {__lineHeight: __lineHeight, fontSize: fontSize, __baseLine: __baseLine, __letterSpacing: __letterSpacing, __textDrawData: drawData} = data;
         canvas.beginPath();
-        if (__letterSpacing < 0) this.__drawPathByBox(canvas); else data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight < fontSize ? fontSize : __lineHeight));
+        if (data.motionText) this.__drawPathByData(canvas, data.__pathForMotionText); else if (__letterSpacing < 0) this.__drawPathByBox(canvas); else drawData.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight < fontSize ? fontSize : __lineHeight));
     };
     exports.Group.prototype.pick = function(hitPoint, options) {
         options || (options = emptyData);
@@ -11065,7 +11084,8 @@ var LeaferUI = function(exports) {
     function fillPathOrText(ui, canvas, renderOptions) {
         ui.__.__font ? Paint.fillText(ui, canvas, renderOptions) : ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill();
     }
-    function fillText(ui, canvas, _renderOptions) {
+    function fillText(ui, canvas, renderOptions) {
+        if (ui.motionText) return Paint.fillMotionText(ui, canvas, renderOptions);
         const data = ui.__, {rows: rows, decorationY: decorationY} = data.__textDrawData;
         if (data.__isPlacehold && data.placeholderColor) canvas.fillStyle = data.placeholderColor;
         let row;
@@ -11435,7 +11455,7 @@ var LeaferUI = function(exports) {
             data.__naturalWidth = image.width / data.pixelRatio;
             data.__naturalHeight = image.height / data.pixelRatio;
             if (data.__autoSide) {
-                ui.forceUpdate("width");
+                ui.forceUpdate();
                 LeafHelper.updateBounds(ui);
                 ui.__layout.boundsChanged = true;
                 if (ui.__proxyData) {
@@ -12298,7 +12318,8 @@ var LeaferUI = function(exports) {
     const TextMode = 2;
     function layoutChar(drawData, style, width, _height) {
         const {rows: rows} = drawData;
-        const {textAlign: textAlign, paraIndent: paraIndent, __letterSpacing: __letterSpacing} = style;
+        const {textAlign: textAlign, paraIndent: paraIndent} = style;
+        const useLetter = style.__letterSpacing || style.motionText;
         const justifyLast = width && textAlign.includes("both");
         const justify = justifyLast || width && textAlign.includes("justify");
         const justifyLetter = justify && textAlign.includes("letter");
@@ -12311,8 +12332,8 @@ var LeaferUI = function(exports) {
                     remainingWidth = width - row.width - indentWidth;
                     if (justifyLetter) addLetterWidth = remainingWidth / (row.words.reduce((total, item) => total + item.data.length, 0) - 1); else addWordWidth = wordsLength > 1 ? remainingWidth / (wordsLength - 1) : 0;
                 }
-                mode = __letterSpacing || row.isOverflow || justifyLetter ? CharMode : addWordWidth ? WordMode : TextMode;
-                if (row.isOverflow && !__letterSpacing) row.textMode = true;
+                mode = useLetter || row.isOverflow || justifyLetter ? CharMode : addWordWidth ? WordMode : TextMode;
+                if (row.isOverflow && !useLetter) row.textMode = true;
                 if (mode === TextMode) {
                     row.x += indentWidth;
                     toTextChar$1(row);
@@ -12504,6 +12525,7 @@ var LeaferUI = function(exports) {
         let width = style.__getInput("width") || 0;
         let height = style.__getInput("height") || 0;
         const {__padding: padding} = style;
+        if (style.motionText) width = height = 0;
         if (padding) {
             if (width) x = padding[left], width -= padding[right] + padding[left], !width && (width = .01); else if (!style.autoSizeAlign) x = padding[left];
             if (height) y = padding[top], height -= padding[top] + padding[bottom], !height && (height = .01); else if (!style.autoSizeAlign) y = padding[top];
@@ -12695,7 +12717,7 @@ var LeaferUI = function(exports) {
                 const data = this.__;
                 const width = nowFrame.width / data.pixelRatio;
                 const height = nowFrame.height / data.pixelRatio;
-                if (data.width !== width || data.height !== height) this.forceUpdate("width");
+                if (data.width !== width || data.height !== height) this.forceUpdate();
                 data.__naturalWidth = width;
                 data.__naturalHeight = height;
             }
@@ -14125,7 +14147,7 @@ var LeaferUI = function(exports) {
         },
         getMotionPathData(data) {
             let total = 0, distance, segments = [];
-            let i = 0, x = 0, y = 0, toX, toY, command;
+            let i = 0, x = 0, y = 0, toX, toY, command, closed;
             const len = data.length;
             while (i < len) {
                 command = data[i];
@@ -14150,6 +14172,7 @@ var LeaferUI = function(exports) {
                     break;
 
                   case Z:
+                    closed = true;
                     i += 1;
 
                   default:
@@ -14161,13 +14184,16 @@ var LeaferUI = function(exports) {
             return {
                 total: total,
                 segments: segments,
-                data: data
+                data: data,
+                closed: closed
             };
         },
-        getDistancePoint(distanceData, motionDistance, motionPrecision) {
-            const {segments: segments, data: data} = distanceData;
-            motionDistance = UnitConvert.number(motionDistance, distanceData.total);
-            let total = 0, distance, to = {};
+        getDistancePoint(distanceData, motionDistance, motionPrecision, offsetX) {
+            const {segments: segments, data: data, total: total} = distanceData;
+            motionDistance = UnitConvert.number(motionDistance, total);
+            if (offsetX) motionDistance += offsetX;
+            if (motionDistance > total) motionDistance = motionDistance % total;
+            let nowDistance = 0, distance, to = {};
             let i = 0, index = 0, x = 0, y = 0, toX, toY, command;
             let x1, y1, x2, y2, t;
             const len = data.length;
@@ -14179,15 +14205,20 @@ var LeaferUI = function(exports) {
                     toX = data[i + 1];
                     toY = data[i + 2];
                     distance = segments[index];
-                    if (total + distance >= motionDistance || !distanceData.total) {
-                        if (!i) x = toX, y = toY;
-                        tempFrom.x = x;
-                        tempFrom.y = y;
+                    if (nowDistance + distance >= motionDistance || !distanceData.total) {
                         to.x = toX;
                         to.y = toY;
-                        PointHelper.getDistancePoint(tempFrom, to, motionDistance - total, true);
-                        to.rotation = PointHelper.getAngle(tempFrom, to);
-                        return to;
+                        if (i) {
+                            tempFrom.x = x;
+                            tempFrom.y = y;
+                            PointHelper.getDistancePoint(tempFrom, to, motionDistance - nowDistance, true);
+                            to.rotation = PointHelper.getAngle(tempFrom, to);
+                            return to;
+                        } else {
+                            const nextPoint = HighCurveHelper.getDistancePoint(distanceData, motionPrecision, motionPrecision, offsetX);
+                            to.rotation = nextPoint.rotation;
+                            return to;
+                        }
                     }
                     x = toX;
                     y = toY;
@@ -14198,9 +14229,9 @@ var LeaferUI = function(exports) {
                     toX = data[i + 5];
                     toY = data[i + 6];
                     distance = segments[index];
-                    if (total + distance >= motionDistance) {
+                    if (nowDistance + distance >= motionDistance) {
                         x1 = data[i + 1], y1 = data[i + 2], x2 = data[i + 3], y2 = data[i + 4];
-                        t = HighBezierHelper.getT(motionDistance - total, distance, x, y, x1, y1, x2, y2, toX, toY, motionPrecision);
+                        t = HighBezierHelper.getT(motionDistance - nowDistance, distance, x, y, x1, y1, x2, y2, toX, toY, motionPrecision);
                         BezierHelper.getPointAndSet(t, x, y, x1, y1, x2, y2, toX, toY, to);
                         to.rotation = HighBezierHelper.getRotation(t, x, y, x1, y1, x2, y2, toX, toY);
                         return to;
@@ -14217,7 +14248,7 @@ var LeaferUI = function(exports) {
                     distance = 0;
                 }
                 index++;
-                total += distance;
+                nowDistance += distance;
             }
             return to;
         },
@@ -14308,21 +14339,48 @@ var LeaferUI = function(exports) {
     const ui$1 = exports.UI.prototype;
     const {updateMatrix: updateMatrix, updateAllMatrix: updateAllMatrix} = LeafHelper;
     const {updateBounds: updateBounds} = BranchHelper;
+    const {toVertical: toVertical} = PointHelper;
     exports.UI.addAttr("motionPath", undefined, motionPathType);
     exports.UI.addAttr("motionPrecision", 1, motionPathType);
     exports.UI.addAttr("motion", undefined, motionPathType);
+    exports.UI.addAttr("motionVertical", "below", motionPathType);
     exports.UI.addAttr("motionRotation", true, motionPathType);
+    ui$1.getMotionPath = function() {
+        return getMotionPath(this);
+    };
     ui$1.getMotionPathData = function() {
         return getMotionPathData(getMotionPath(this));
     };
-    ui$1.getMotionPoint = function(motionDistance) {
-        const path = getMotionPath(this);
-        const data = getMotionPathData(path);
+    ui$1.getMotionContentHeight = function() {
+        return this.__layout.boxBounds.height;
+    };
+    ui$1.getMotionPoint = function(motionDistance, motionVertical, pathElement, offsetX = 0, offsetY = 0) {
+        if (!pathElement) pathElement = getMotionPath(this);
+        const data = getMotionPathData(pathElement);
         if (!data.total) return {};
-        const point = HighCurveHelper.getDistancePoint(data, motionDistance, path.motionPrecision);
-        MatrixHelper.toOuterPoint(path.localTransform, point);
+        const point = HighCurveHelper.getDistancePoint(data, motionDistance, pathElement.motionPrecision, offsetX);
         const {motionRotation: motionRotation} = this;
-        if (motionRotation === false) delete point.rotation; else if (isNumber(motionRotation)) point.rotation += motionRotation;
+        if (isNumber(motionRotation)) point.rotation += motionRotation;
+        let verticalType, verticalOffset;
+        if (isObject(motionVertical)) verticalType = motionVertical.type, verticalOffset = motionVertical.offset; else if (isNumber(motionVertical)) verticalOffset = motionVertical; else verticalType = motionVertical;
+        if (verticalType !== "below" || offsetY) {
+            const {rotation: rotation} = point, height = this.getMotionContentHeight();
+            if (verticalOffset) offsetY += verticalType === "above" ? -verticalOffset : verticalOffset;
+            switch (verticalType) {
+              case "above":
+                toVertical(point, rotation, -height + offsetY);
+                break;
+
+              case "center":
+                toVertical(point, rotation, -height / 2 + offsetY);
+                break;
+
+              case "below":
+              default:
+                toVertical(point, rotation, offsetY);
+            }
+        }
+        MatrixHelper.toOuterPoint(pathElement.localTransform, point);
         return point;
     };
     ui$1.getMotionTotal = function() {
@@ -14351,7 +14409,11 @@ var LeaferUI = function(exports) {
             const data = getMotionPathData(leaf);
             if (data.total) leaf.__.__pathForRender = HighCurveHelper.getDistancePath(data, motion, leaf.motionPrecision);
         } else {
-            leaf.set(leaf.getMotionPoint(motion));
+            if (leaf.motionText) leaf.__updateMotionText(); else {
+                const point = leaf.getMotionPoint(motion);
+                if (leaf.motionRotation === false) delete point.rotation;
+                leaf.set(point);
+            }
             if (!leaf.__hasAutoLayout) {
                 if (leaf.isBranch) updateAllMatrix(leaf), updateBounds(leaf, leaf); else updateMatrix(leaf);
             }
@@ -14371,7 +14433,8 @@ var LeaferUI = function(exports) {
     function getMotionPathData(leaf) {
         const data = leaf.__;
         if (data.__pathForMotion) return data.__pathForMotion;
-        return data.__pathForMotion = HighCurveHelper.getMotionPathData(leaf.getPath(true, true));
+        const path = data.__pathForMotion = HighCurveHelper.getMotionPathData(leaf.getPath(true, true));
+        return path;
     }
     const {Yes: Yes, NoAndSkip: NoAndSkip, YesAndSkip: YesAndSkip} = exports.Answer;
     const idCondition = {}, classNameCondition = {}, tagCondition = {};
@@ -14672,6 +14735,7 @@ var LeaferUI = function(exports) {
     exports.dimType = dimType;
     exports.doBoundsType = doBoundsType;
     exports.doStrokeType = doStrokeType;
+    exports.doSurfaceType = doSurfaceType;
     exports.effectType = effectType;
     exports.emptyData = emptyData;
     exports.eraserType = eraserType;