@galacean/effects-plugin-rich-text 2.1.0-alpha.12

package/dist/index.js

@@ -0,0 +1,537 @@
+/*!
+ * Name: @galacean/effects-plugin-rich-text
+ * Description: Galacean Effects player richtext plugin
+ * Author: Ant Group CO., Ltd.
+ * Contributors: 云垣
+ * Version: v2.1.0-alpha.12
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var EFFECTS = require('@galacean/effects');
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var EFFECTS__namespace = /*#__PURE__*/_interopNamespace(EFFECTS);
+
+function _set_prototype_of(o, p) {
+    _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+        o.__proto__ = p;
+        return o;
+    };
+    return _set_prototype_of(o, p);
+}
+
+function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+        throw new TypeError("Super expression must either be null or a function");
+    }
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+        constructor: {
+            value: subClass,
+            writable: true,
+            configurable: true
+        }
+    });
+    if (superClass) _set_prototype_of(subClass, superClass);
+}
+
+var RichTextLoader = /*#__PURE__*/ function(AbstractPlugin) {
+    _inherits(RichTextLoader, AbstractPlugin);
+    function RichTextLoader() {
+        var _this;
+        _this = AbstractPlugin.apply(this, arguments) || this;
+        _this.name = "richtext";
+        return _this;
+    }
+    return RichTextLoader;
+}(EFFECTS.AbstractPlugin);
+
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+
+function _create_for_of_iterator_helper_loose(o, allowArrayLike) {
+    var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+    if (it) return (it = it.call(o)).next.bind(it);
+    // Fallback for engines without symbol support
+    if (Array.isArray(o) || (it = _unsupported_iterable_to_array(o)) || allowArrayLike && o && typeof o.length === "number") {
+        if (it) o = it;
+        var i = 0;
+        return function() {
+            if (i >= o.length) return {
+                done: true
+            };
+            return {
+                done: false,
+                value: o[i++]
+            };
+        };
+    }
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var TokenType;
+(function(TokenType) {
+    TokenType["ContextStart"] = "ContextStart";
+    TokenType["Text"] = "Text";
+    TokenType["ContextEnd"] = "ContextEnd";
+})(TokenType || (TokenType = {}));
+var contextStartRegexp = /^<([a-z]+)(=([^>]+))?>$/;
+var contextEndRegexp = /^<\/([a-z]+)>$/;
+var rules = [
+    [
+        "ContextStart",
+        /^<[a-z]+(=[^>]+)?>/
+    ],
+    [
+        "Text",
+        /^[^</>=]+/
+    ],
+    [
+        "ContextEnd",
+        /^<\/[a-z]+>/
+    ]
+];
+var lexer = function(input, lexed, cursor) {
+    if (lexed === void 0) lexed = [];
+    if (cursor === void 0) cursor = 0;
+    if (!input) {
+        return lexed;
+    }
+    for(var _iterator = _create_for_of_iterator_helper_loose(rules), _step; !(_step = _iterator()).done;){
+        var _step_value = _step.value, tokenType = _step_value[0], regex = _step_value[1];
+        var _regex_exec;
+        var _ref = (_regex_exec = regex.exec(input)) != null ? _regex_exec : [], tokenMatch = _ref[0];
+        if (tokenMatch) {
+            var len = tokenMatch.length;
+            return lexer(input.slice(len), lexed.concat({
+                tokenType: tokenType,
+                value: tokenMatch
+            }), cursor + len);
+        }
+    }
+    throw new Error('Unexpected token: "' + input[0] + '" at position ' + cursor + ' while reading "' + input + '"');
+};
+var richTextParser = function(input) {
+    var Text = function Text() {
+        var maybeText = peek();
+        if ((maybeText == null ? void 0 : maybeText.tokenType) === "Text") {
+            shift();
+            return maybeText.value;
+        }
+        return undefined;
+    };
+    var ContextStart = function ContextStart() {
+        var maybeContextStart = peek();
+        if ((maybeContextStart == null ? void 0 : maybeContextStart.tokenType) === "ContextStart") {
+            shift();
+            var matches = maybeContextStart.value.match(contextStartRegexp);
+            if (matches) {
+                var attributeName = matches[1];
+                var _matches_;
+                var attributeParam = (_matches_ = matches[3]) != null ? _matches_ : "";
+                return {
+                    attributeName: attributeName,
+                    attributeParam: attributeParam
+                };
+            }
+            throw new Error("Expected a font style start tag at position " + cursor);
+        }
+        return {};
+    };
+    var ContextEnd = function ContextEnd() {
+        var maybeContextEnd = peek();
+        if ((maybeContextEnd == null ? void 0 : maybeContextEnd.tokenType) === "ContextEnd") {
+            shift();
+            var matches = maybeContextEnd.value.match(contextEndRegexp);
+            if (matches) {
+                var attributeName = matches[1];
+                return {
+                    attributeName: attributeName
+                };
+            }
+            throw new Error("Expected a font style end tag at position " + cursor);
+        }
+        return {};
+    };
+    var lexed = lexer(input);
+    var cursor = 0;
+    var shift = function() {
+        var shifted = lexed.shift();
+        var _shifted_value_length;
+        cursor += (_shifted_value_length = shifted == null ? void 0 : shifted.value.length) != null ? _shifted_value_length : 0;
+        return shifted;
+    };
+    var peek = function() {
+        return lexed[0];
+    };
+    var ast = [];
+    function Grammar(attributes, expectedEndAttributeName) {
+        if (attributes === void 0) attributes = [];
+        if (expectedEndAttributeName === void 0) expectedEndAttributeName = "";
+        var parsing = true;
+        while(parsing){
+            var maybeText = Text();
+            if (maybeText) {
+                ast.push({
+                    attributes: attributes,
+                    text: maybeText
+                });
+                continue;
+            }
+            var _ContextStart = ContextStart(), attributeName = _ContextStart.attributeName, attributeParam = _ContextStart.attributeParam;
+            if (attributeName) {
+                Grammar(attributes.concat({
+                    attributeName: attributeName,
+                    attributeParam: attributeParam
+                }), attributeName);
+                continue;
+            }
+            if (expectedEndAttributeName) {
+                var _ContextEnd = ContextEnd(), endAttributeName = _ContextEnd.attributeName;
+                if (!endAttributeName) {
+                    throw new Error('Expected end of font style with tag "' + expectedEndAttributeName + '" at position ' + cursor + " but not found any tag!");
+                }
+                if (endAttributeName !== expectedEndAttributeName) {
+                    throw new Error('Expected end of font style with tag "' + expectedEndAttributeName + '" at position ' + cursor + ' but found tag "' + endAttributeName + '"');
+                }
+                return;
+            }
+            break;
+        }
+    }
+    Grammar();
+    return ast;
+};
+function generateProgram(textHandler) {
+    return function(richText) {
+        var ast = richTextParser(richText);
+        for(var _iterator = _create_for_of_iterator_helper_loose(ast), _step; !(_step = _iterator()).done;){
+            var node = _step.value;
+            var text = node.text;
+            var context = node.attributes.reduce(function(ctx, param) {
+                var attributeName = param.attributeName, attributeParam = param.attributeParam;
+                if (attributeName) {
+                    ctx[attributeName] = attributeParam;
+                }
+                return ctx;
+            }, {});
+            textHandler(text, context);
+        }
+    };
+}
+function isRichText(text) {
+    var lexed = lexer(text);
+    var contextTokens = lexed.filter(function(param) {
+        var tokenType = param.tokenType;
+        return tokenType === "ContextStart" || tokenType === "ContextEnd";
+    });
+    var contextStartTokens = contextTokens.filter(function(param) {
+        var tokenType = param.tokenType;
+        return tokenType === "ContextStart";
+    });
+    var contextEndTokens = contextTokens.filter(function(param) {
+        var tokenType = param.tokenType;
+        return tokenType === "ContextEnd";
+    });
+    if (contextStartTokens.length !== contextEndTokens.length || !contextStartTokens.length) {
+        return false;
+    }
+    var tokensOfAttribute = contextTokens.map(function(param) {
+        var tokenType = param.tokenType, value = param.value;
+        return {
+            tokenType: tokenType,
+            value: tokenType === "ContextStart" ? value.match(contextStartRegexp)[1] : value.match(contextEndRegexp)[1]
+        };
+    });
+    function checkPaired(param, startContextAttributes) {
+        var token = param[0], restToken = param.slice(1);
+        if (startContextAttributes === void 0) startContextAttributes = [];
+        if (!token) {
+            return startContextAttributes.length === 0;
+        }
+        if (token.tokenType === "ContextStart") {
+            return checkPaired(restToken, startContextAttributes.concat(token.value));
+        } else if (token.tokenType === "ContextEnd") {
+            var attributeName = startContextAttributes[startContextAttributes.length - 1];
+            if (attributeName !== token.value) {
+                return false;
+            }
+            return checkPaired(restToken, startContextAttributes.slice(0, -1));
+        }
+        throw new Error("Unexpected token: " + token.tokenType);
+    }
+    return checkPaired(tokensOfAttribute);
+}
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+typeof SuppressedError === "function" ? SuppressedError : function _SuppressedError(error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * 将颜色名称转换为 RGBA
+ * @param colorName - 颜色名称
+ * @returns RGBA 颜色字符串
+ */ function colorNameToRGBA(colorName) {
+    if (typeof colorName !== "string" || !colorName) {
+        throw new Error("Invalid color name provided");
+    }
+    if (typeof document === "undefined") {
+        throw new Error("This method requires a browser environment");
+    }
+    var canvas = document.createElement("canvas");
+    var context = canvas.getContext("2d");
+    if (context) {
+        try {
+            context.fillStyle = colorName;
+            var result = context.fillStyle;
+            return result;
+        } finally{
+            // Clean up DOM element
+            canvas.remove();
+        }
+    }
+    throw new Error("Failed to get 2D context for color conversion!");
+}
+/**
+ * 将 16 进制颜色转换为 RGBA
+ * @param hex - 16 进制颜色
+ * @param alpha - 透明度
+ * @returns - RGBA 颜色
+ */ function hexToRGBA(hex, alpha) {
+    if (alpha === void 0) alpha = 1;
+    hex = hex.replace(/^#/, "");
+    if (hex.length === 3 || hex.length === 4) {
+        hex = hex.split("").map(function(char) {
+            return char + char;
+        }).join("");
+    }
+    // Handle alpha channel in hex
+    if (hex.length === 8) {
+        var a = parseInt(hex.slice(6, 8), 16) / 255;
+        hex = hex.slice(0, 6);
+        alpha = a;
+    }
+    var bigint = parseInt(hex, 16);
+    var r = bigint >> 16 & 255;
+    var g = bigint >> 8 & 255;
+    var b = bigint & 255;
+    return [
+        r,
+        g,
+        b,
+        alpha
+    ];
+}
+/**
+ * 将颜色字符串转换为 RGBA
+ * @param color - 颜色字符串
+ * @param alpha - 透明度
+ * @returns - RGBA 颜色
+ */ function toRGBA(color, alpha) {
+    if (alpha === void 0) alpha = 1;
+    if (typeof color !== "string" || !color) {
+        throw new Error("Invalid color string");
+    }
+    if (color.startsWith("#")) {
+        return hexToRGBA(color, alpha);
+    } else {
+        return hexToRGBA(colorNameToRGBA(color));
+    }
+}
+
+var seed = 0;
+exports.RichTextComponent = /*#__PURE__*/ function(TextComponent) {
+    _inherits(RichTextComponent, TextComponent);
+    function RichTextComponent(engine) {
+        var _this;
+        _this = TextComponent.call(this, engine) || this;
+        _this.processedTextOptions = [];
+        _this.singleLineHeight = 1.571;
+        _this.name = "MRichText" + seed++;
+        return _this;
+    }
+    var _proto = RichTextComponent.prototype;
+    _proto.generateTextProgram = function generateTextProgram(text) {
+        var _this = this;
+        var program = generateProgram(function(text, context) {
+            var textArr = text.split("\n");
+            textArr.forEach(function(text, index) {
+                var options = {
+                    text: text,
+                    fontSize: _this.textStyle.fontSize,
+                    isNewLine: false
+                };
+                if (index > 0) {
+                    options.isNewLine = true;
+                }
+                if ("b" in context) {
+                    options.fontWeight = EFFECTS.spec.TextWeight.bold;
+                }
+                if ("i" in context) {
+                    options.fontStyle = EFFECTS.spec.FontStyle.italic;
+                }
+                if ("size" in context && context.size) {
+                    options.fontSize = parseInt(context.size, 10);
+                }
+                if ("color" in context && context.color) {
+                    options.fontColor = toRGBA(context.color);
+                }
+                _this.processedTextOptions.push(options);
+            });
+        });
+        program(text);
+    };
+    _proto.updateTexture = function updateTexture(flipY) {
+        var _this = this;
+        if (flipY === void 0) flipY = true;
+        if (!this.isDirty || !this.context || !this.canvas) {
+            return;
+        }
+        this.generateTextProgram(this.text);
+        var width = 0, height = 0;
+        var _this1 = this, textLayout = _this1.textLayout, textStyle = _this1.textStyle;
+        var context = this.context;
+        var charsInfo = [];
+        var fontHeight = textStyle.fontSize * this.textStyle.fontScale;
+        var charInfo = {
+            richOptions: [],
+            offsetX: [],
+            width: 0,
+            lineHeight: fontHeight * this.singleLineHeight,
+            offsetY: fontHeight * (this.singleLineHeight - 1) / 2
+        };
+        this.processedTextOptions.forEach(function(options, index) {
+            var text = options.text, isNewLine = options.isNewLine, fontSize = options.fontSize;
+            if (isNewLine) {
+                charsInfo.push(charInfo);
+                width = Math.max(width, charInfo.width);
+                charInfo = {
+                    richOptions: [],
+                    offsetX: [],
+                    width: 0,
+                    lineHeight: fontHeight * _this.singleLineHeight,
+                    offsetY: fontHeight * (_this.singleLineHeight - 1) / 2
+                };
+                height += charInfo.lineHeight;
+            }
+            var textWidth = context.measureText(text).width;
+            var textHeight = fontSize * _this.singleLineHeight * _this.textStyle.fontScale;
+            if (textHeight > charInfo.lineHeight) {
+                height += textHeight - charInfo.lineHeight;
+                charInfo.lineHeight = textHeight;
+                charInfo.offsetY = fontSize * _this.textStyle.fontScale * (_this.singleLineHeight - 1) / 2;
+            }
+            charInfo.offsetX.push(charInfo.width);
+            charInfo.width += textWidth * fontSize * _this.SCALE_FACTOR * _this.textStyle.fontScale;
+            charInfo.richOptions.push(options);
+        });
+        charsInfo.push(charInfo);
+        width = Math.max(width, charInfo.width);
+        height += charInfo.lineHeight;
+        var scale = width / height;
+        this.item.transform.size.set(textStyle.fontSize * this.SCALE_FACTOR, textStyle.fontSize * this.SCALE_FACTOR * scale);
+        this.textLayout.width = width / textStyle.fontScale;
+        this.textLayout.height = height / textStyle.fontScale;
+        this.canvas.width = width;
+        this.canvas.height = height;
+        context.clearRect(0, 0, width, height);
+        // fix bug 1/255
+        context.fillStyle = "rgba(255, 255, 255, " + this.ALPHA_FIX_VALUE + ")";
+        if (!flipY) {
+            context.translate(0, height);
+            context.scale(1, -1);
+        }
+        var charsLineHeight = charsInfo[0].lineHeight - charsInfo[0].offsetY;
+        charsInfo.forEach(function(charInfo, index) {
+            var richOptions = charInfo.richOptions, offsetX = charInfo.offsetX;
+            var x = textLayout.getOffsetX(textStyle, charInfo.width);
+            if (index > 0) {
+                charsLineHeight += charInfo.lineHeight - charInfo.offsetY + charsInfo[index - 1].offsetY;
+            }
+            richOptions.forEach(function(options, index) {
+                var fontScale = textStyle.fontScale, textColor = textStyle.textColor, textFamily = textStyle.fontFamily, textWeight = textStyle.textWeight, richStyle = textStyle.fontStyle;
+                var text = options.text, fontSize = options.fontSize, _options_fontColor = options.fontColor, fontColor = _options_fontColor === void 0 ? textColor : _options_fontColor, _options_fontFamily = options.fontFamily, fontFamily = _options_fontFamily === void 0 ? textFamily : _options_fontFamily, _options_fontWeight = options.fontWeight, fontWeight = _options_fontWeight === void 0 ? textWeight : _options_fontWeight, _options_fontStyle = options.fontStyle, fontStyle = _options_fontStyle === void 0 ? richStyle : _options_fontStyle;
+                context.font = fontStyle + " " + fontWeight + " " + fontSize * fontScale + "px " + fontFamily;
+                context.fillStyle = "rgba(" + fontColor[0] + ", " + fontColor[1] + ", " + fontColor[2] + ", " + fontColor[3] + ")";
+                context.fillText(text, offsetX[index] + x, charsLineHeight);
+            });
+        });
+        //与 toDataURL() 两种方式都需要像素读取操作
+        var imageData = context.getImageData(0, 0, this.canvas.width, this.canvas.height);
+        this.material.setTexture("uSampler0", EFFECTS.Texture.createWithData(this.engine, {
+            data: new Uint8Array(imageData.data),
+            width: imageData.width,
+            height: imageData.height
+        }, {
+            flipY: flipY,
+            magFilter: EFFECTS.glContext.LINEAR,
+            minFilter: EFFECTS.glContext.LINEAR,
+            wrapS: EFFECTS.glContext.CLAMP_TO_EDGE,
+            wrapT: EFFECTS.glContext.CLAMP_TO_EDGE
+        }));
+        this.isDirty = false;
+    };
+    _proto.updateWithOptions = function updateWithOptions(options) {
+        this.textStyle = new EFFECTS.TextStyle(options);
+        this.textLayout = new EFFECTS.TextLayout(options);
+        this.text = options.text ? options.text.toString() : "";
+    };
+    return RichTextComponent;
+}(EFFECTS.TextComponent);
+exports.RichTextComponent = __decorate([
+    EFFECTS.effectsClass(EFFECTS.spec.DataType.RichTextComponent)
+], exports.RichTextComponent);
+
+/**
+ * 插件版本号
+ */ var version = "2.1.0-alpha.12";
+EFFECTS.registerPlugin("richtext", RichTextLoader, EFFECTS.VFXItem, true);
+EFFECTS.logger.info("Plugin rich text version: " + version + ".");
+if (version !== EFFECTS__namespace.version) {
+    console.error("注意：请统一 RichText 插件与 Player 版本，不统一的版本混用会有不可预知的后果！", "\nAttention: Please ensure the RichText plugin is synchronized with the Player version. Mixing and matching incompatible versions may result in unpredictable consequences!");
+}
+
+exports.generateProgram = generateProgram;
+exports.isRichText = isRichText;
+exports.lexer = lexer;
+exports.richTextParser = richTextParser;
+exports.version = version;
+//# sourceMappingURL=index.js.map