@antv/f2/dist/index.js

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
    typeof define === 'function' && define.amd ? define(['exports'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.F2 = {}));
}(this, (function (exports) { 'use strict';

    /******************************************************************************
    Copyright (c) Microsoft Corporation.

    Permission to use, copy, modify, and/or distribute this software for any
    purpose with or without fee is hereby granted.

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
    PERFORMANCE OF THIS SOFTWARE.
    ***************************************************************************** */
    /* global Reflect, Promise, SuppressedError, Symbol, Iterator */

    var extendStatics = function(d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };

    function __extends(d, b) {
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    }

    var __assign = function() {
        __assign = Object.assign || function __assign(t) {
            for (var s, i = 1, n = arguments.length; i < n; i++) {
                s = arguments[i];
                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
            }
            return t;
        };
        return __assign.apply(this, arguments);
    };

    function __rest(s, e) {
        var t = {};
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
            t[p] = s[p];
        if (s != null && typeof Object.getOwnPropertySymbols === "function")
            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                    t[p[i]] = s[p[i]];
            }
        return t;
    }

    function __awaiter(thisArg, _arguments, P, generator) {
        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
        return new (P || (P = Promise))(function (resolve, reject) {
            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
            step((generator = generator.apply(thisArg, _arguments || [])).next());
        });
    }

    function __generator(thisArg, body) {
        var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
        return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
        function verb(n) { return function (v) { return step([n, v]); }; }
        function step(op) {
            if (f) throw new TypeError("Generator is already executing.");
            while (g && (g = 0, op[0] && (_ = 0)), _) try {
                if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
                if (y = 0, t) op = [op[0] & 2, t.value];
                switch (op[0]) {
                    case 0: case 1: t = op; break;
                    case 4: _.label++; return { value: op[1], done: false };
                    case 5: _.label++; y = op[1]; op = [0]; continue;
                    case 7: op = _.ops.pop(); _.trys.pop(); continue;
                    default:
                        if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                        if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                        if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                        if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                        if (t[2]) _.ops.pop();
                        _.trys.pop(); continue;
                }
                op = body.call(thisArg, _);
            } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
            if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
        }
    }

    function __values(o) {
        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
        if (m) return m.call(o);
        if (o && typeof o.length === "number") return {
            next: function () {
                if (o && i >= o.length) o = void 0;
                return { value: o && o[i++], done: !o };
            }
        };
        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
    }

    function __read(o, n) {
        var m = typeof Symbol === "function" && o[Symbol.iterator];
        if (!m) return o;
        var i = m.call(o), r, ar = [], e;
        try {
            while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
        }
        catch (error) { e = { error: error }; }
        finally {
            try {
                if (r && !r.done && (m = i["return"])) m.call(i);
            }
            finally { if (e) throw e.error; }
        }
        return ar;
    }

    function __spreadArray(to, from, pack) {
        if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
            if (ar || !(i in from)) {
                if (!ar) ar = Array.prototype.slice.call(from, 0, i);
                ar[i] = from[i];
            }
        }
        return to.concat(ar || Array.prototype.slice.call(from));
    }

    var _SuppressedError = typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
        var e = new Error(message);
        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
    };

    var isArrayLike = function (value) {
        /**
         * isArrayLike([1, 2, 3]) => true
         * isArrayLike(document.body.children) => true
         * isArrayLike('abc') => true
         * isArrayLike(Function) => false
         */
        return value !== null && typeof value !== 'function' && isFinite(value.length);
    };

    var filter = function (arr, func) {
        if (!isArrayLike(arr)) {
            return arr;
        }
        var result = [];
        for (var index = 0; index < arr.length; index++) {
            var value = arr[index];
            if (func(value, index)) {
                result.push(value);
            }
        }
        return result;
    };

    /**
     * @see https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_isfunction
     */
    var isFunction = (function (value) {
        return typeof value === 'function';
    });

    // isFinite,
    var isNil = function (value) {
        /**
         * isNil(null) => true
         * isNil() => true
         */
        return value === null || value === undefined;
    };

    var toString = {}.toString;
    var isType = function (value, type) { return toString.call(value) === '[object ' + type + ']'; };

    var isArray = (function (value) {
        return Array.isArray ? Array.isArray(value) : isType(value, 'Array');
    });

    var isObject = (function (value) {
        /**
         * isObject({}) => true
         * isObject([1, 2, 3]) => true
         * isObject(Function) => true
         * isObject(null) => false
         */
        var type = typeof value;
        return (value !== null && type === 'object') || type === 'function';
    });

    function each(elements, func) {
        if (!elements) {
            return;
        }
        var rst;
        if (isArray(elements)) {
            for (var i = 0, len = elements.length; i < len; i++) {
                rst = func(elements[i], i);
                if (rst === false) {
                    break;
                }
            }
        }
        else if (isObject(elements)) {
            for (var k in elements) {
                if (elements.hasOwnProperty(k)) {
                    rst = func(elements[k], k);
                    if (rst === false) {
                        break;
                    }
                }
            }
        }
    }

    var keys = Object.keys
        ? function (obj) { return Object.keys(obj); }
        : function (obj) {
            var result = [];
            each(obj, function (value, key) {
                if (!(isFunction(obj) && key === 'prototype')) {
                    result.push(key);
                }
            });
            return result;
        };

    function isMatch(obj, attrs) {
        var _keys = keys(attrs);
        var length = _keys.length;
        if (isNil(obj))
            return !length;
        for (var i = 0; i < length; i += 1) {
            var key = _keys[i];
            if (attrs[key] !== obj[key] || !(key in obj)) {
                return false;
            }
        }
        return true;
    }

    var isObjectLike = function (value) {
        /**
         * isObjectLike({}) => true
         * isObjectLike([1, 2, 3]) => true
         * isObjectLike(Function) => false
         * isObjectLike(null) => false
         */
        return typeof value === 'object' && value !== null;
    };

    var isPlainObject = function (value) {
        /**
         * isObjectLike(new Foo) => false
         * isObjectLike([1, 2, 3]) => false
         * isObjectLike({ x: 0, y: 0 }) => true
         * isObjectLike(Object.create(null)) => true
         */
        if (!isObjectLike(value) || !isType(value, 'Object')) {
            return false;
        }
        if (Object.getPrototypeOf(value) === null) {
            return true;
        }
        var proto = value;
        while (Object.getPrototypeOf(proto) !== null) {
            proto = Object.getPrototypeOf(proto);
        }
        return Object.getPrototypeOf(value) === proto;
    };

    function find(arr, predicate) {
        if (!isArray(arr))
            return null;
        var _predicate;
        if (isFunction(predicate)) {
            _predicate = predicate;
        }
        if (isPlainObject(predicate)) {
            _predicate = function (a) { return isMatch(a, predicate); };
        }
        if (_predicate) {
            for (var i = 0; i < arr.length; i += 1) {
                if (_predicate(arr[i])) {
                    return arr[i];
                }
            }
        }
        return null;
    }

    function findIndex(arr, predicate, fromIndex) {
        if (fromIndex === void 0) { fromIndex = 0; }
        for (var i = fromIndex; i < arr.length; i++) {
            if (predicate(arr[i], i)) {
                // 找到终止循环
                return i;
            }
        }
        return -1;
    }

    /**
     * Flattens `array` a single level deep.
     *
     * @param {Array} arr The array to flatten.
     * @return {Array} Returns the new flattened array.
     * @example
     *
     * flatten([1, [2, [3, [4]], 5]]);  // => [1, 2, [3, [4]], 5]
     */
    var flatten = function (arr) {
        if (!isArray(arr)) {
            return [];
        }
        var rst = [];
        for (var i = 0; i < arr.length; i++) {
            rst = rst.concat(arr[i]);
        }
        return rst;
    };

    /**
     * @param {Array} arr The array to iterate over.
     * @return {*} Returns the maximum value.
     * @example
     *
     * max([1, 2]);
     * // => 2
     *
     * max([]);
     * // => undefined
     *
     * const data = new Array(1250010).fill(1).map((d,idx) => idx);
     *
     * max(data);
     * // => 1250010
     * // Math.max(...data) will encounter "Maximum call stack size exceeded" error
     */
    var max = (function (arr) {
        if (!isArray(arr)) {
            return undefined;
        }
        return arr.reduce(function (prev, curr) {
            return Math.max(prev, curr);
        }, arr[0]);
    });

    /**
     * @param {Array} arr The array to iterate over.
     * @return {*} Returns the minimum value.
     * @example
     *
     * min([1, 2]);
     * // => 1
     *
     * min([]);
     * // => undefined
     *
     * const data = new Array(1250010).fill(1).map((d,idx) => idx);
     *
     * min(data);
     * // => 1250010
     * // Math.min(...data) will encounter "Maximum call stack size exceeded" error
     */
    var min = (function (arr) {
        if (!isArray(arr)) {
            return undefined;
        }
        return arr.reduce(function (prev, curr) {
            return Math.min(prev, curr);
        }, arr[0]);
    });

    var getRange = function (values) {
        // 存在 NaN 时，min,max 判定会出问题
        var filterValues = values.filter(function (v) { return !isNaN(v); });
        if (!filterValues.length) {
            // 如果没有数值则直接返回0
            return {
                min: 0,
                max: 0,
            };
        }
        if (isArray(values[0])) {
            var tmp = [];
            for (var i = 0; i < values.length; i++) {
                tmp = tmp.concat(values[i]);
            }
            filterValues = tmp;
        }
        var max$1 = max(filterValues);
        var min$1 = min(filterValues);
        return {
            min: min$1,
            max: max$1,
        };
    };

    var reduce = function (arr, fn, init) {
        if (!isArray(arr) && !isPlainObject(arr)) {
            return arr;
        }
        var result = init;
        each(arr, function (data, i) {
            result = fn(result, data, i);
        });
        return result;
    };

    var isString = (function (str) {
        return isType(str, 'String');
    });

    var valuesOfKey = (function (data, name) {
        var rst = [];
        var tmpMap = {};
        for (var i = 0; i < data.length; i++) {
            var obj = data[i];
            var value = obj[name];
            if (!isNil(value)) {
                // flatten
                if (!isArray(value)) {
                    value = [value];
                }
                for (var j = 0; j < value.length; j++) {
                    var val = value[j];
                    // unique
                    if (!tmpMap[val]) {
                        rst.push(val);
                        tmpMap[val] = true;
                    }
                }
            }
        }
        return rst;
    });

    function head(o) {
        if (isArrayLike(o)) {
            return o[0];
        }
        return undefined;
    }

    function last(o) {
        if (isArrayLike(o)) {
            var arr = o;
            return arr[arr.length - 1];
        }
        return undefined;
    }

    var hasOwnProperty = Object.prototype.hasOwnProperty;
    function groupBy(data, condition) {
        if (!condition || !isArray(data)) {
            return {};
        }
        var result = {};
        // 兼容方法和 字符串的写法
        var predicate = isFunction(condition) ? condition : function (item) { return item[condition]; };
        var key;
        for (var i = 0; i < data.length; i++) {
            var item = data[i];
            key = predicate(item);
            if (hasOwnProperty.call(result, key)) {
                result[key].push(item);
            }
            else {
                result[key] = [item];
            }
        }
        return result;
    }

    /**
     * 将数据分组成 map
     * @param data
     * @param condition
     */
    function groupToMap(data, condition) {
        if (!condition) {
            return {
                0: data,
            };
        }
        if (!isFunction(condition)) {
            // 如果是字符串，则按照 a*b 风格成数组
            var paramscondition_1 = isArray(condition) ? condition : condition.replace(/\s+/g, '').split('*');
            condition = function (row) {
                var unique = '_'; // 避免出现数字作为Key的情况，会进行按照数字的排序
                // 根据字段列表的值，拼接成 key
                for (var i = 0, l = paramscondition_1.length; i < l; i++) {
                    unique += row[paramscondition_1[i]] && row[paramscondition_1[i]].toString();
                }
                return unique;
            };
        }
        return groupBy(data, condition);
    }

    var group = (function (data, condition) {
        if (!condition) {
            // 没有条件，则自身改成数组
            return [data];
        }
        var groups = groupToMap(data, condition);
        var array = [];
        for (var i in groups) {
            array.push(groups[i]);
        }
        return array;
    });

    var clamp = function (a, min, max) {
        if (a < min) {
            return min;
        }
        else if (a > max) {
            return max;
        }
        return a;
    };

    /**
     * 判断是否数字
     * @return {Boolean} 是否数字
     */
    var isNumber = function (value) {
        return isType(value, 'Number');
    };

    var PRECISION = 0.00001; // numbers less than this is considered as 0
    function isNumberEqual(a, b, precision) {
        if (precision === void 0) { precision = PRECISION; }
        return Math.abs(a - b) < precision;
    }

    var mod = function (n, m) {
        return ((n % m) + m) % m;
    };

    var toString$1 = (function (value) {
        if (isNil(value))
            return '';
        return value.toString();
    });

    var upperFirst = function (value) {
        var str = toString$1(value);
        return str.charAt(0).toUpperCase() + str.substring(1);
    };

    var toString$2 = {}.toString;
    var getType = function (value) {
        return toString$2
            .call(value)
            .replace(/^\[object /, '')
            .replace(/]$/, '');
    };

    /**
     * 是否是布尔类型
     *
     * @param {Object} value 测试的值
     * @return {Boolean}
     */
    var isBoolean = function (value) {
        return isType(value, 'Boolean');
    };

    var isDate = function (value) {
        return isType(value, 'Date');
    };

    var isNull = function (value) {
        return value === null;
    };

    var objectProto = Object.prototype;
    var isPrototype = function (value) {
        var Ctor = value && value.constructor;
        var proto = (typeof Ctor === 'function' && Ctor.prototype) || objectProto;
        return value === proto;
    };

    var isUndefined = function (value) {
        return value === undefined;
    };

    // FIXME: Mutable param should be forbidden in static lang.
    function _mix(dist, obj) {
        for (var key in obj) {
            if (obj.hasOwnProperty(key) && key !== 'constructor' && obj[key] !== undefined) {
                dist[key] = obj[key];
            }
        }
    }
    function mix(dist, src1, src2, src3) {
        if (src1)
            _mix(dist, src1);
        if (src2)
            _mix(dist, src2);
        if (src3)
            _mix(dist, src3);
        return dist;
    }

    var clone = function (obj) {
        if (typeof obj !== 'object' || obj === null) {
            return obj;
        }
        var rst;
        if (isArray(obj)) {
            rst = [];
            for (var i = 0, l = obj.length; i < l; i++) {
                if (typeof obj[i] === 'object' && obj[i] != null) {
                    rst[i] = clone(obj[i]);
                }
                else {
                    rst[i] = obj[i];
                }
            }
        }
        else {
            rst = {};
            for (var k in obj) {
                if (typeof obj[k] === 'object' && obj[k] != null) {
                    rst[k] = clone(obj[k]);
                }
                else {
                    rst[k] = obj[k];
                }
            }
        }
        return rst;
    };

    var MAX_MIX_LEVEL = 5;
    function hasOwn(object, property) {
        if (Object.hasOwn) {
            return Object.hasOwn(object, property);
        }
        if (object == null) {
            throw new TypeError('Cannot convert undefined or null to object');
        }
        return Object.prototype.hasOwnProperty.call(Object(object), property);
    }
    function _deepMix(dist, src, level, maxLevel) {
        level = level || 0;
        maxLevel = maxLevel || MAX_MIX_LEVEL;
        for (var key in src) {
            if (hasOwn(src, key)) {
                var value = src[key];
                if (value !== null && isPlainObject(value)) {
                    if (!isPlainObject(dist[key])) {
                        dist[key] = {};
                    }
                    if (level < maxLevel) {
                        _deepMix(dist[key], value, level + 1, maxLevel);
                    }
                    else {
                        dist[key] = src[key];
                    }
                }
                else if (isArray(value)) {
                    dist[key] = [];
                    dist[key] = dist[key].concat(value);
                }
                else if (value !== undefined) {
                    dist[key] = value;
                }
            }
        }
    }
    // todo 重写
    var deepMix = function (rst) {
        var args = [];
        for (var _i = 1; _i < arguments.length; _i++) {
            args[_i - 1] = arguments[_i];
        }
        for (var i = 0; i < args.length; i += 1) {
            _deepMix(rst, args[i]);
        }
        return rst;
    };

    var hasOwnProperty$1 = Object.prototype.hasOwnProperty;
    function isEmpty(value) {
        /**
         * isEmpty(null) => true
         * isEmpty() => true
         * isEmpty(true) => true
         * isEmpty(1) => true
         * isEmpty([1, 2, 3]) => false
         * isEmpty('abc') => false
         * isEmpty({ a: 1 }) => false
         */
        if (isNil(value)) {
            return true;
        }
        if (isArrayLike(value)) {
            return !value.length;
        }
        var type = getType(value);
        if (type === 'Map' || type === 'Set') {
            return !value.size;
        }
        if (isPrototype(value)) {
            return !Object.keys(value).length;
        }
        for (var key in value) {
            if (hasOwnProperty$1.call(value, key)) {
                return false;
            }
        }
        return true;
    }

    var isEqual = function (value, other) {
        if (value === other) {
            return true;
        }
        if (!value || !other) {
            return false;
        }
        if (isString(value) || isString(other)) {
            return false;
        }
        if (isArrayLike(value) || isArrayLike(other)) {
            if (value.length !== other.length) {
                return false;
            }
            var rst = true;
            for (var i = 0; i < value.length; i++) {
                rst = isEqual(value[i], other[i]);
                if (!rst) {
                    break;
                }
            }
            return rst;
        }
        if (isObjectLike(value) || isObjectLike(other)) {
            var valueKeys = Object.keys(value);
            var otherKeys = Object.keys(other);
            if (valueKeys.length !== otherKeys.length) {
                return false;
            }
            var rst = true;
            for (var i = 0; i < valueKeys.length; i++) {
                rst = isEqual(value[valueKeys[i]], other[valueKeys[i]]);
                if (!rst) {
                    break;
                }
            }
            return rst;
        }
        return false;
    };

    var map = function (arr, func) {
        if (!isArrayLike(arr)) {
            // @ts-ignore
            return arr;
        }
        var result = [];
        for (var index = 0; index < arr.length; index++) {
            var value = arr[index];
            result.push(func(value, index));
        }
        return result;
    };

    var identity = function (v) { return v; };
    var mapValues = (function (object, func) {
        if (func === void 0) { func = identity; }
        var r = {};
        if (isObject(object) && !isNil(object)) {
            Object.keys(object).forEach(function (key) {
                // @ts-ignore
                r[key] = func(object[key], key);
            });
        }
        return r;
    });

    /**
     * https://github.com/developit/dlv/blob/master/index.js
     * @param obj
     * @param key
     * @param defaultValue
     */
    var get = (function (obj, key, defaultValue) {
        var p = 0;
        var keyArr = isString(key) ? key.split('.') : key;
        while (obj && p < keyArr.length) {
            obj = obj[keyArr[p++]];
        }
        return obj === undefined || p < keyArr.length ? defaultValue : obj;
    });

    var hasOwnProperty$2 = Object.prototype.hasOwnProperty;
    var pick = (function (object, keys) {
        if (object === null || !isPlainObject(object)) {
            return {};
        }
        var result = {};
        each(keys, function (key) {
            if (hasOwnProperty$2.call(object, key)) {
                result[key] = object[key];
            }
        });
        return result;
    });

    var omit = (function (obj, keys) {
        return reduce(obj, function (r, curr, key) {
            if (!keys.includes(key)) {
                r[key] = curr;
            }
            return r;
        }, {});
    });

    /**
     * k-v 存储
     */
    var default_1 = /** @class */ (function () {
        function default_1() {
            this.map = {};
        }
        default_1.prototype.has = function (key) {
            return this.map[key] !== undefined;
        };
        default_1.prototype.get = function (key, def) {
            var v = this.map[key];
            return v === undefined ? def : v;
        };
        default_1.prototype.set = function (key, value) {
            this.map[key] = value;
        };
        default_1.prototype.clear = function () {
            this.map = {};
        };
        default_1.prototype.delete = function (key) {
            delete this.map[key];
        };
        default_1.prototype.size = function () {
            return Object.keys(this.map).length;
        };
        return default_1;
    }());

    /**
     * Common utilities
     * @module glMatrix
     */
    // Configuration Constants
    var EPSILON = 0.000001;
    var ARRAY_TYPE = typeof Float32Array !== 'undefined' ? Float32Array : Array;
    if (!Math.hypot) Math.hypot = function () {
      var y = 0,
          i = arguments.length;

      while (i--) {
        y += arguments[i] * arguments[i];
      }

      return Math.sqrt(y);
    };

    /**
     * Rotates a mat2d by the given angle
     *
     * @param {mat2d} out the receiving matrix
     * @param {ReadonlyMat2d} a the matrix to rotate
     * @param {Number} rad the angle to rotate the matrix by
     * @returns {mat2d} out
     */

    function rotate(out, a, rad) {
      var a0 = a[0],
          a1 = a[1],
          a2 = a[2],
          a3 = a[3],
          a4 = a[4],
          a5 = a[5];
      var s = Math.sin(rad);
      var c = Math.cos(rad);
      out[0] = a0 * c + a2 * s;
      out[1] = a1 * c + a3 * s;
      out[2] = a0 * -s + a2 * c;
      out[3] = a1 * -s + a3 * c;
      out[4] = a4;
      out[5] = a5;
      return out;
    }

    /**
     * 3x3 Matrix
     * @module mat3
     */

    /**
     * Creates a new identity mat3
     *
     * @returns {mat3} a new 3x3 matrix
     */

    function create() {
      var out = new ARRAY_TYPE(9);

      if (ARRAY_TYPE != Float32Array) {
        out[1] = 0;
        out[2] = 0;
        out[3] = 0;
        out[5] = 0;
        out[6] = 0;
        out[7] = 0;
      }

      out[0] = 1;
      out[4] = 1;
      out[8] = 1;
      return out;
    }
    /**
     * Copies the upper-left 3x3 values into the given mat3.
     *
     * @param {mat3} out the receiving 3x3 matrix
     * @param {ReadonlyMat4} a   the source 4x4 matrix
     * @returns {mat3} out
     */

    function fromMat4(out, a) {
      out[0] = a[0];
      out[1] = a[1];
      out[2] = a[2];
      out[3] = a[4];
      out[4] = a[5];
      out[5] = a[6];
      out[6] = a[8];
      out[7] = a[9];
      out[8] = a[10];
      return out;
    }
    /**
     * Create a new mat3 with the given values
     *
     * @param {Number} m00 Component in column 0, row 0 position (index 0)
     * @param {Number} m01 Component in column 0, row 1 position (index 1)
     * @param {Number} m02 Component in column 0, row 2 position (index 2)
     * @param {Number} m10 Component in column 1, row 0 position (index 3)
     * @param {Number} m11 Component in column 1, row 1 position (index 4)
     * @param {Number} m12 Component in column 1, row 2 position (index 5)
     * @param {Number} m20 Component in column 2, row 0 position (index 6)
     * @param {Number} m21 Component in column 2, row 1 position (index 7)
     * @param {Number} m22 Component in column 2, row 2 position (index 8)
     * @returns {mat3} A new mat3
     */

    function fromValues(m00, m01, m02, m10, m11, m12, m20, m21, m22) {
      var out = new ARRAY_TYPE(9);
      out[0] = m00;
      out[1] = m01;
      out[2] = m02;
      out[3] = m10;
      out[4] = m11;
      out[5] = m12;
      out[6] = m20;
      out[7] = m21;
      out[8] = m22;
      return out;
    }

    /**
     * 4x4 Matrix<br>Format: column-major, when typed out it looks like row-major<br>The matrices are being post multiplied.
     * @module mat4
     */

    /**
     * Creates a new identity mat4
     *
     * @returns {mat4} a new 4x4 matrix
     */

    function create$1() {
      var out = new ARRAY_TYPE(16);

      if (ARRAY_TYPE != Float32Array) {
        out[1] = 0;
        out[2] = 0;
        out[3] = 0;
        out[4] = 0;
        out[6] = 0;
        out[7] = 0;
        out[8] = 0;
        out[9] = 0;
        out[11] = 0;
        out[12] = 0;
        out[13] = 0;
        out[14] = 0;
      }

      out[0] = 1;
      out[5] = 1;
      out[10] = 1;
      out[15] = 1;
      return out;
    }
    /**
     * Creates a new mat4 initialized with values from an existing matrix
     *
     * @param {ReadonlyMat4} a matrix to clone
     * @returns {mat4} a new 4x4 matrix
     */

    function clone$1(a) {
      var out = new ARRAY_TYPE(16);
      out[0] = a[0];
      out[1] = a[1];
      out[2] = a[2];
      out[3] = a[3];
      out[4] = a[4];
      out[5] = a[5];
      out[6] = a[6];
      out[7] = a[7];
      out[8] = a[8];
      out[9] = a[9];
      out[10] = a[10];
      out[11] = a[11];
      out[12] = a[12];
      out[13] = a[13];
      out[14] = a[14];
      out[15] = a[15];
      return out;
    }
    /**
     * Copy the values from one mat4 to another
     *
     * @param {mat4} out the receiving matrix
     * @param {ReadonlyMat4} a the source matrix
     * @returns {mat4} out
     */

    function copy(out, a) {
      out[0] = a[0];
      out[1] = a[1];
      out[2] = a[2];
      out[3] = a[3];
      out[4] = a[4];
      out[5] = a[5];
      out[6] = a[6];
      out[7] = a[7];
      out[8] = a[8];
      out[9] = a[9];
      out[10] = a[10];
      out[11] = a[11];
      out[12] = a[12];
      out[13] = a[13];
      out[14] = a[14];
      out[15] = a[15];
      return out;
    }
    /**
     * Create a new mat4 with the given values
     *
     * @param {Number} m00 Component in column 0, row 0 position (index 0)
     * @param {Number} m01 Component in column 0, row 1 position (index 1)
     * @param {Number} m02 Component in column 0, row 2 position (index 2)
     * @param {Number} m03 Component in column 0, row 3 position (index 3)
     * @param {Number} m10 Component in column 1, row 0 position (index 4)
     * @param {Number} m11 Component in column 1, row 1 position (index 5)
     * @param {Number} m12 Component in column 1, row 2 position (index 6)
     * @param {Number} m13 Component in column 1, row 3 position (index 7)
     * @param {Number} m20 Component in column 2, row 0 position (index 8)
     * @param {Number} m21 Component in column 2, row 1 position (index 9)
     * @param {Number} m22 Component in column 2, row 2 position (index 10)
     * @param {Number} m23 Component in column 2, row 3 position (index 11)
     * @param {Number} m30 Component in column 3, row 0 position (index 12)
     * @param {Number} m31 Component in column 3, row 1 position (index 13)
     * @param {Number} m32 Component in column 3, row 2 position (index 14)
     * @param {Number} m33 Component in column 3, row 3 position (index 15)
     * @returns {mat4} A new mat4
     */

    function fromValues$1(m00, m01, m02, m03, m10, m11, m12, m13, m20, m21, m22, m23, m30, m31, m32, m33) {
      var out = new ARRAY_TYPE(16);
      out[0] = m00;
      out[1] = m01;
      out[2] = m02;
      out[3] = m03;
      out[4] = m10;
      out[5] = m11;
      out[6] = m12;
      out[7] = m13;
      out[8] = m20;
      out[9] = m21;
      out[10] = m22;
      out[11] = m23;
      out[12] = m30;
      out[13] = m31;
      out[14] = m32;
      out[15] = m33;
      return out;
    }
    /**
     * Set the components of a mat4 to the given values
     *
     * @param {mat4} out the receiving matrix
     * @param {Number} m00 Component in column 0, row 0 position (index 0)
     * @param {Number} m01 Component in column 0, row 1 position (index 1)
     * @param {Number} m02 Component in column 0, row 2 position (index 2)
     * @param {Number} m03 Component in column 0, row 3 position (index 3)
     * @param {Number} m10 Component in column 1, row 0 position (index 4)
     * @param {Number} m11 Component in column 1, row 1 position (index 5)
     * @param {Number} m12 Component in column 1, row 2 position (index 6)
     * @param {Number} m13 Component in column 1, row 3 position (index 7)
     * @param {Number} m20 Component in column 2, row 0 position (index 8)
     * @param {Number} m21 Component in column 2, row 1 position (index 9)
     * @param {Number} m22 Component in column 2, row 2 position (index 10)
     * @param {Number} m23 Component in column 2, row 3 position (index 11)
     * @param {Number} m30 Component in column 3, row 0 position (index 12)
     * @param {Number} m31 Component in column 3, row 1 position (index 13)
     * @param {Number} m32 Component in column 3, row 2 position (index 14)
     * @param {Number} m33 Component in column 3, row 3 position (index 15)
     * @returns {mat4} out
     */

    function set(out, m00, m01, m02, m03, m10, m11, m12, m13, m20, m21, m22, m23, m30, m31, m32, m33) {
      out[0] = m00;
      out[1] = m01;
      out[2] = m02;
      out[3] = m03;
      out[4] = m10;
      out[5] = m11;
      out[6] = m12;
      out[7] = m13;
      out[8] = m20;
      out[9] = m21;
      out[10] = m22;
      out[11] = m23;
      out[12] = m30;
      out[13] = m31;
      out[14] = m32;
      out[15] = m33;
      return out;
    }
    /**
     * Set a mat4 to the identity matrix
     *
     * @param {mat4} out the receiving matrix
     * @returns {mat4} out
     */

    function identity$1(out) {
      out[0] = 1;
      out[1] = 0;
      out[2] = 0;
      out[3] = 0;
      out[4] = 0;
      out[5] = 1;
      out[6] = 0;
      out[7] = 0;
      out[8] = 0;
      out[9] = 0;
      out[10] = 1;
      out[11] = 0;
      out[12] = 0;
      out[13] = 0;
      out[14] = 0;
      out[15] = 1;
      return out;
    }
    /**
     * Transpose the values of a mat4
     *
     * @param {mat4} out the receiving matrix
     * @param {ReadonlyMat4} a the source matrix
     * @returns {mat4} out
     */

    function transpose(out, a) {
      // If we are transposing ourselves we can skip a few steps but have to cache some values
      if (out === a) {
        var a01 = a[1],
            a02 = a[2],
            a03 = a[3];
        var a12 = a[6],
            a13 = a[7];
        var a23 = a[11];
        out[1] = a[4];
        out[2] = a[8];
        out[3] = a[12];
        out[4] = a01;
        out[6] = a[9];
        out[7] = a[13];
        out[8] = a02;
        out[9] = a12;
        out[11] = a[14];
        out[12] = a03;
        out[13] = a13;
        out[14] = a23;
      } else {
        out[0] = a[0];
        out[1] = a[4];
        out[2] = a[8];
        out[3] = a[12];
        out[4] = a[1];
        out[5] = a[5];
        out[6] = a[9];
        out[7] = a[13];
        out[8] = a[2];
        out[9] = a[6];
        out[10] = a[10];
        out[11] = a[14];
        out[12] = a[3];
        out[13] = a[7];
        out[14] = a[11];
        out[15] = a[15];
      }

      return out;
    }
    /**
     * Inverts a mat4
     *
     * @param {mat4} out the receiving matrix
     * @param {ReadonlyMat4} a the source matrix
     * @returns {mat4} out
     */

    function invert(out, a) {
      var a00 = a[0],
          a01 = a[1],
          a02 = a[2],
          a03 = a[3];
      var a10 = a[4],
          a11 = a[5],
          a12 = a[6],
          a13 = a[7];
      var a20 = a[8],
          a21 = a[9],
          a22 = a[10],
          a23 = a[11];
      var a30 = a[12],
          a31 = a[13],
          a32 = a[14],
          a33 = a[15];
      var b00 = a00 * a11 - a01 * a10;
      var b01 = a00 * a12 - a02 * a10;
      var b02 = a00 * a13 - a03 * a10;
      var b03 = a01 * a12 - a02 * a11;
      var b04 = a01 * a13 - a03 * a11;
      var b05 = a02 * a13 - a03 * a12;
      var b06 = a20 * a31 - a21 * a30;
      var b07 = a20 * a32 - a22 * a30;
      var b08 = a20 * a33 - a23 * a30;
      var b09 = a21 * a32 - a22 * a31;
      var b10 = a21 * a33 - a23 * a31;
      var b11 = a22 * a33 - a23 * a32; // Calculate the determinant

      var det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06;

      if (!det) {
        return null;
      }

      det = 1.0 / det;
      out[0] = (a11 * b11 - a12 * b10 + a13 * b09) * det;
      out[1] = (a02 * b10 - a01 * b11 - a03 * b09) * det;
      out[2] = (a31 * b05 - a32 * b04 + a33 * b03) * det;
      out[3] = (a22 * b04 - a21 * b05 - a23 * b03) * det;
      out[4] = (a12 * b08 - a10 * b11 - a13 * b07) * det;
      out[5] = (a00 * b11 - a02 * b08 + a03 * b07) * det;
      out[6] = (a32 * b02 - a30 * b05 - a33 * b01) * det;
      out[7] = (a20 * b05 - a22 * b02 + a23 * b01) * det;
      out[8] = (a10 * b10 - a11 * b08 + a13 * b06) * det;
      out[9] = (a01 * b08 - a00 * b10 - a03 * b06) * det;
      out[10] = (a30 * b04 - a31 * b02 + a33 * b00) * det;
      out[11] = (a21 * b02 - a20 * b04 - a23 * b00) * det;
      out[12] = (a11 * b07 - a10 * b09 - a12 * b06) * det;
      out[13] = (a00 * b09 - a01 * b07 + a02 * b06) * det;
      out[14] = (a31 * b01 - a30 * b03 - a32 * b00) * det;
      out[15] = (a20 * b03 - a21 * b01 + a22 * b00) * det;
      return out;
    }
    /**
     * Calculates the adjugate of a mat4
     *
     * @param {mat4} out the receiving matrix
     * @param {ReadonlyMat4} a the source matrix
     * @returns {mat4} out
     */

    function adjoint(out, a) {
      var a00 = a[0],
          a01 = a[1],
          a02 = a[2],
          a03 = a[3];
      var a10 = a[4],
          a11 = a[5],
          a12 = a[6],
          a13 = a[7];
      var a20 = a[8],
          a21 = a[9],
          a22 = a[10],
          a23 = a[11];
      var a30 = a[12],
          a31 = a[13],
          a32 = a[14],
          a33 = a[15];
      out[0] = a11 * (a22 * a33 - a23 * a32) - a21 * (a12 * a33 - a13 * a32) + a31 * (a12 * a23 - a13 * a22);
      out[1] = -(a01 * (a22 * a33 - a23 * a32) - a21 * (a02 * a33 - a03 * a32) + a31 * (a02 * a23 - a03 * a22));
      out[2] = a01 * (a12 * a33 - a13 * a32) - a11 * (a02 * a33 - a03 * a32) + a31 * (a02 * a13 - a03 * a12);
      out[3] = -(a01 * (a12 * a23 - a13 * a22) - a11 * (a02 * a23 - a03 * a22) + a21 * (a02 * a13 - a03 * a12));
      out[4] = -(a10 * (a22 * a33 - a23 * a32) - a20 * (a12 * a33 - a13 * a32) + a30 * (a12 * a23 - a13 * a22));
      out[5] = a00 * (a22 * a33 - a23 * a32) - a20 * (a02 * a33 - a03 * a32) + a30 * (a02 * a23 - a03 * a22);
      out[6] = -(a00 * (a12 * a33 - a13 * a32) - a10 * (a02 * a33 - a03 * a32) + a30 * (a02 * a13 - a03 * a12));
      out[7] = a00 * (a12 * a23 - a13 * a22) - a10 * (a02 * a23 - a03 * a22) + a20 * (a02 * a13 - a03 * a12);
      out[8] = a10 * (a21 * a33 - a23 * a31) - a20 * (a11 * a33 - a13 * a31) + a30 * (a11 * a23 - a13 * a21);
      out[9] = -(a00 * (a21 * a33 - a23 * a31) - a20 * (a01 * a33 - a03 * a31) + a30 * (a01 * a23 - a03 * a21));
      out[10] = a00 * (a11 * a33 - a13 * a31) - a10 * (a01 * a33 - a03 * a31) + a30 * (a01 * a13 - a03 * a11);
      out[11] = -(a00 * (a11 * a23 - a13 * a21) - a10 * (a01 * a23 - a03 * a21) + a20 * (a01 * a13 - a03 * a11));
      out[12] = -(a10 * (a21 * a32 - a22 * a31) - a20 * (a11 * a32 - a12 * a31) + a30 * (a11 * a22 - a12 * a21));
      out[13] = a00 * (a21 * a32 - a22 * a31) - a20 * (a01 * a32 - a02 * a31) + a30 * (a01 * a22 - a02 * a21);
      out[14] = -(a00 * (a11 * a32 - a12 * a31) - a10 * (a01 * a32 - a02 * a31) + a30 * (a01 * a12 - a02 * a11));
      out[15] = a00 * (a11 * a22 - a12 * a21) - a10 * (a01 * a22 - a02 * a21) + a20 * (a01 * a12 - a02 * a11);
      return out;
    }
    /**
     * Calculates the determinant of a mat4
     *
     * @param {ReadonlyMat4} a the source matrix
     * @returns {Number} determinant of a
     */

    function determinant(a) {
      var a00 = a[0],
          a01 = a[1],
          a02 = a[2],
          a03 = a[3];
      var a10 = a[4],
          a11 = a[5],
          a12 = a[6],
          a13 = a[7];
      var a20 = a[8],
          a21 = a[9],
          a22 = a[10],
          a23 = a[11];
      var a30 = a[12],
          a31 = a[13],
          a32 = a[14],
          a33 = a[15];
      var b00 = a00 * a11 - a01 * a10;
      var b01 = a00 * a12 - a02 * a10;
      var b02 = a00 * a13 - a03 * a10;
      var b03 = a01 * a12 - a02 * a11;
      var b04 = a01 * a13 - a03 * a11;
      var b05 = a02 * a13 - a03 * a12;
      var b06 = a20 * a31 - a21 * a30;
      var b07 = a20 * a32 - a22 * a30;
      var b08 = a20 * a33 - a23 * a30;
      var b09 = a21 * a32 - a22 * a31;
      var b10 = a21 * a33 - a23 * a31;
      var b11 = a22 * a33 - a23 * a32; // Calculate the determinant

      return b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06;
    }
    /**
     * Multiplies two mat4s
     *
     * @param {mat4} out the receiving matrix
     * @param {ReadonlyMat4} a the first operand
     * @param {ReadonlyMat4} b the second operand
     * @returns {mat4} out
     */

    function multiply(out, a, b) {
      var a00 = a[0],
          a01 = a[1],
          a02 = a[2],
          a03 = a[3];
      var a10 = a[4],
          a11 = a[5],
          a12 = a[6],
          a13 = a[7];
      var a20 = a[8],
          a21 = a[9],
          a22 = a[10],
          a23 = a[11];
      var a30 = a[12],
          a31 = a[13],
          a32 = a[14],
          a33 = a[15]; // Cache only the current line of the second matrix

      var b0 = b[0],
          b1 = b[1],
          b2 = b[2],
          b3 = b[3];
      out[0] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
      out[1] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
      out[2] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
      out[3] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
      b0 = b[4];
      b1 = b[5];
      b2 = b[6];
      b3 = b[7];
      out[4] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
      out[5] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
      out[6] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
      out[7] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
      b0 = b[8];
      b1 = b[9];
      b2 = b[10];
      b3 = b[11];
      out[8] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
      out[9] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
      out[10] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
      out[11] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
      b0 = b[12];
      b1 = b[13];
      b2 = b[14];
      b3 = b[15];
      out[12] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
      out[13] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
      out[14] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
      out[15] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
      return out;
    }
    /**
     * Translate a mat4 by the given vector
     *
     * @param {mat4} out the receiving matrix
     * @param {ReadonlyMat4} a the matrix to translate
     * @param {ReadonlyVec3} v vector to translate by
     * @returns {mat4} out
     */

    function translate(out, a, v) {
      var x = v[0],
          y = v[1],
          z = v[2];
      var a00, a01, a02, a03;
      var a10, a11, a12, a13;
      var a20, a21, a22, a23;

      if (a === out) {
        out[12] = a[0] * x + a[4] * y + a[8] * z + a[12];
        out[13] = a[1] * x + a[5] * y + a[9] * z + a[13];
        out[14] = a[2] * x + a[6] * y + a[10] * z + a[14];
        out[15] = a[3] * x + a[7] * y + a[11] * z + a[15];
      } else {
        a00 = a[0];
        a01 = a[1];
        a02 = a[2];
        a03 = a[3];
        a10 = a[4];
        a11 = a[5];
        a12 = a[6];
        a13 = a[7];
        a20 = a[8];
        a21 = a[9];
        a22 = a[10];
        a23 = a[11];
        out[0] = a00;
        out[1] = a01;
        out[2] = a02;
        out[3] = a03;
        out[4] = a10;
        out[5] = a11;
        out[6] = a12;
        out[7] = a13;
        out[8] = a20;
        out[9] = a21;
        out[10] = a22;
        out[11] = a23;
        out[12] = a00 * x + a10 * y + a20 * z + a[12];
        out[13] = a01 * x + a11 * y + a21 * z + a[13];
        out[14] = a02 * x + a12 * y + a22 * z + a[14];
        out[15] = a03 * x + a13 * y + a23 * z + a[15];
      }

      return out;
    }
    /**
     * Scales the mat4 by the dimensions in the given vec3 not using vectorization
     *
     * @param {mat4} out the receiving matrix
     * @param {ReadonlyMat4} a the matrix to scale
     * @param {ReadonlyVec3} v the vec3 to scale the matrix by
     * @returns {mat4} out
     **/

    function scale(out, a, v) {
      var x = v[0],
          y = v[1],
          z = v[2];
      out[0] = a[0] * x;
      out[1] = a[1] * x;
      out[2] = a[2] * x;
      out[3] = a[3] * x;
      out[4] = a[4] * y;
      out[5] = a[5] * y;
      out[6] = a[6] * y;
      out[7] = a[7] * y;
      out[8] = a[8] * z;
      out[9] = a[9] * z;
      out[10] = a[10] * z;
      out[11] = a[11] * z;
      out[12] = a[12];
      out[13] = a[13];
      out[14] = a[14];
      out[15] = a[15];
      return out;
    }
    /**
     * Rotates a mat4 by the given angle around the given axis
     *
     * @param {mat4} out the receiving matrix
     * @param {ReadonlyMat4} a the matrix to rotate
     * @param {Number} rad the angle to rotate the matrix by
     * @param {ReadonlyVec3} axis the axis to rotate around
     * @returns {mat4} out
     */

    function rotate$1(out, a, rad, axis) {
      var x = axis[0],
          y = axis[1],
          z = axis[2];
      var len = Math.hypot(x, y, z);
      var s, c, t;
      var a00, a01, a02, a03;
      var a10, a11, a12, a13;
      var a20, a21, a22, a23;
      var b00, b01, b02;
      var b10, b11, b12;
      var b20, b21, b22;

      if (len < EPSILON) {
        return null;
      }

      len = 1 / len;
      x *= len;
      y *= len;
      z *= len;
      s = Math.sin(rad);
      c = Math.cos(rad);
      t = 1 - c;
      a00 = a[0];
      a01 = a[1];
      a02 = a[2];
      a03 = a[3];
      a10 = a[4];
      a11 = a[5];
      a12 = a[6];
      a13 = a[7];
      a20 = a[8];
      a21 = a[9];
      a22 = a[10];
      a23 = a[11]; // Construct the elements of the rotation matrix

      b00 = x * x * t + c;
      b01 = y * x * t + z * s;
      b02 = z * x * t - y * s;
      b10 = x * y * t - z * s;
      b11 = y * y * t + c;
      b12 = z * y * t + x * s;
      b20 = x * z * t + y * s;
      b21 = y * z * t - x * s;
      b22 = z * z * t + c; // Perform rotation-specific matrix multiplication

      out[0] = a00 * b00 + a10 * b01 + a20 * b02;
      out[1] = a01 * b00 + a11 * b01 + a21 * b02;
      out[2] = a02 * b00 + a12 * b01 + a22 * b02;
      out[3] = a03 * b00 + a13 * b01 + a23 * b02;
      out[4] = a00 * b10 + a10 * b11 + a20 * b12;
      out[5] = a01 * b10 + a11 * b11 + a21 * b12;
      out[6] = a02 * b10 + a12 * b11 + a22 * b12;
      out[7] = a03 * b10 + a13 * b11 + a23 * b12;
      out[8] = a00 * b20 + a10 * b21 + a20 * b22;
      out[9] = a01 * b20 + a11 * b21 + a21 * b22;
      out[10] = a02 * b20 + a12 * b21 + a22 * b22;
      out[11] = a03 * b20 + a13 * b21 + a23 * b22;

      if (a !== out) {
        // If the source and destination differ, copy the unchanged last row
        out[12] = a[12];
        out[13] = a[13];
        out[14] = a[14];
        out[15] = a[15];
      }

      return out;
    }
    /**
     * Rotates a matrix by the given angle around the X axis
     *
     * @param {mat4} out the receiving matrix
     * @param {ReadonlyMat4} a the matrix to rotate
     * @param {Number} rad the angle to rotate the matrix by
     * @returns {mat4} out
     */

    function rotateX(out, a, rad) {
      var s = Math.sin(rad);
      var c = Math.cos(rad);
      var a10 = a[4];
      var a11 = a[5];
      var a12 = a[6];
      var a13 = a[7];
      var a20 = a[8];
      var a21 = a[9];
      var a22 = a[10];
      var a23 = a[11];

      if (a !== out) {
        // If the source and destination differ, copy the unchanged rows
        out[0] = a[0];
        out[1] = a[1];
        out[2] = a[2];
        out[3] = a[3];
        out[12] = a[12];
        out[13] = a[13];
        out[14] = a[14];
        out[15] = a[15];
      } // Perform axis-specific matrix multiplication


      out[4] = a10 * c + a20 * s;
      out[5] = a11 * c + a21 * s;
      out[6] = a12 * c + a22 * s;
      out[7] = a13 * c + a23 * s;
      out[8] = a20 * c - a10 * s;
      out[9] = a21 * c - a11 * s;
      out[10] = a22 * c - a12 * s;
      out[11] = a23 * c - a13 * s;
      return out;
    }
    /**
     * Rotates a matrix by the given angle around the Y axis
     *
     * @param {mat4} out the receiving matrix
     * @param {ReadonlyMat4} a the matrix to rotate
     * @param {Number} rad the angle to rotate the matrix by
     * @returns {mat4} out
     */

    function rotateY(out, a, rad) {
      var s = Math.sin(rad);
      var c = Math.cos(rad);
      var a00 = a[0];
      var a01 = a[1];
      var a02 = a[2];
      var a03 = a[3];
      var a20 = a[8];
      var a21 = a[9];
      var a22 = a[10];
      var a23 = a[11];

      if (a !== out) {
        // If the source and destination differ, copy the unchanged rows
        out[4] = a[4];
        out[5] = a[5];
        out[6] = a[6];
        out[7] = a[7];
        out[12] = a[12];
        out[13] = a[13];
        out[14] = a[14];
        out[15] = a[15];
      } // Perform axis-specific matrix multiplication


      out[0] = a00 * c - a20 * s;
      out[1] = a01 * c - a21 * s;
      out[2] = a02 * c - a22 * s;
      out[3] = a03 * c - a23 * s;
      out[8] = a00 * s + a20 * c;
      out[9] = a01 * s + a21 * c;
      out[10] = a02 * s + a22 * c;
      out[11] = a03 * s + a23 * c;
      return out;
    }
    /**
     * Rotates a matrix by the given angle around the Z axis
     *
     * @param {mat4} out the receiving matrix
     * @param {ReadonlyMat4} a the matrix to rotate
     * @param {Number} rad the angle to rotate the matrix by
     * @returns {mat4} out
     */

    function rotateZ(out, a, rad) {
      var s = Math.sin(rad);
      var c = Math.cos(rad);
      var a00 = a[0];
      var a01 = a[1];
      var a02 = a[2];
      var a03 = a[3];
      var a10 = a[4];
      var a11 = a[5];
      var a12 = a[6];
      var a13 = a[7];

      if (a !== out) {
        // If the source and destination differ, copy the unchanged last row
        out[8] = a[8];
        out[9] = a[9];
        out[10] = a[10];
        out[11] = a[11];
        out[12] = a[12];
        out[13] = a[13];
        out[14] = a[14];
        out[15] = a[15];
      } // Perform axis-specific matrix multiplication


      out[0] = a00 * c + a10 * s;
      out[1] = a01 * c + a11 * s;
      out[2] = a02 * c + a12 * s;
      out[3] = a03 * c + a13 * s;
      out[4] = a10 * c - a00 * s;
      out[5] = a11 * c - a01 * s;
      out[6] = a12 * c - a02 * s;
      out[7] = a13 * c - a03 * s;
      return out;
    }
    /**
     * Creates a matrix from a vector translation
     * This is equivalent to (but much faster than):
     *
     *     mat4.identity(dest);
     *     mat4.translate(dest, dest, vec);
     *
     * @param {mat4} out mat4 receiving operation result
     * @param {ReadonlyVec3} v Translation vector
     * @returns {mat4} out
     */

    function fromTranslation(out, v) {
      out[0] = 1;
      out[1] = 0;
      out[2] = 0;
      out[3] = 0;
      out[4] = 0;
      out[5] = 1;
      out[6] = 0;
      out[7] = 0;
      out[8] = 0;
      out[9] = 0;
      out[10] = 1;
      out[11] = 0;
      out[12] = v[0];
      out[13] = v[1];
      out[14] = v[2];
      out[15] = 1;
      return out;
    }
    /**
     * Creates a matrix from a vector scaling
     * This is equivalent to (but much faster than):
     *
     *     mat4.identity(dest);
     *     mat4.scale(dest, dest, vec);
     *
     * @param {mat4} out mat4 receiving operation result
     * @param {ReadonlyVec3} v Scaling vector
     * @returns {mat4} out
     */

    function fromScaling(out, v) {
      out[0] = v[0];
      out[1] = 0;
      out[2] = 0;
      out[3] = 0;
      out[4] = 0;
      out[5] = v[1];
      out[6] = 0;
      out[7] = 0;
      out[8] = 0;
      out[9] = 0;
      out[10] = v[2];
      out[11] = 0;
      out[12] = 0;
      out[13] = 0;
      out[14] = 0;
      out[15] = 1;
      return out;
    }
    /**
     * Creates a matrix from a given angle around a given axis
     * This is equivalent to (but much faster than):
     *
     *     mat4.identity(dest);
     *     mat4.rotate(dest, dest, rad, axis);
     *
     * @param {mat4} out mat4 receiving operation result
     * @param {Number} rad the angle to rotate the matrix by
     * @param {ReadonlyVec3} axis the axis to rotate around
     * @returns {mat4} out
     */

    function fromRotation(out, rad, axis) {
      var x = axis[0],
          y = axis[1],
          z = axis[2];
      var len = Math.hypot(x, y, z);
      var s, c, t;

      if (len < EPSILON) {
        return null;
      }

      len = 1 / len;
      x *= len;
      y *= len;
      z *= len;
      s = Math.sin(rad);
      c = Math.cos(rad);
      t = 1 - c; // Perform rotation-specific matrix multiplication

      out[0] = x * x * t + c;
      out[1] = y * x * t + z * s;
      out[2] = z * x * t - y * s;
      out[3] = 0;
      out[4] = x * y * t - z * s;
      out[5] = y * y * t + c;
      out[6] = z * y * t + x * s;
      out[7] = 0;
      out[8] = x * z * t + y * s;
      out[9] = y * z * t - x * s;
      out[10] = z * z * t + c;
      out[11] = 0;
      out[12] = 0;
      out[13] = 0;
      out[14] = 0;
      out[15] = 1;
      return out;
    }
    /**
     * Creates a matrix from the given angle around the X axis
     * This is equivalent to (but much faster than):
     *
     *     mat4.identity(dest);
     *     mat4.rotateX(dest, dest, rad);
     *
     * @param {mat4} out mat4 receiving operation result
     * @param {Number} rad the angle to rotate the matrix by
     * @returns {mat4} out
     */

    function fromXRotation(out, rad) {
      var s = Math.sin(rad);
      var c = Math.cos(rad); // Perform axis-specific matrix multiplication

      out[0] = 1;
      out[1] = 0;
      out[2] = 0;
      out[3] = 0;
      out[4] = 0;
      out[5] = c;
      out[6] = s;
      out[7] = 0;
      out[8] = 0;
      out[9] = -s;
      out[10] = c;
      out[11] = 0;
      out[12] = 0;
      out[13] = 0;
      out[14] = 0;
      out[15] = 1;
      return out;
    }
    /**
     * Creates a matrix from the given angle around the Y axis
     * This is equivalent to (but much faster than):
     *
     *     mat4.identity(dest);
     *     mat4.rotateY(dest, dest, rad);
     *
     * @param {mat4} out mat4 receiving operation result
     * @param {Number} rad the angle to rotate the matrix by
     * @returns {mat4} out
     */

    function fromYRotation(out, rad) {
      var s = Math.sin(rad);
      var c = Math.cos(rad); // Perform axis-specific matrix multiplication

      out[0] = c;
      out[1] = 0;
      out[2] = -s;
      out[3] = 0;
      out[4] = 0;
      out[5] = 1;
      out[6] = 0;
      out[7] = 0;
      out[8] = s;
      out[9] = 0;
      out[10] = c;
      out[11] = 0;
      out[12] = 0;
      out[13] = 0;
      out[14] = 0;
      out[15] = 1;
      return out;
    }
    /**
     * Creates a matrix from the given angle around the Z axis
     * This is equivalent to (but much faster than):
     *
     *     mat4.identity(dest);
     *     mat4.rotateZ(dest, dest, rad);
     *
     * @param {mat4} out mat4 receiving operation result
     * @param {Number} rad the angle to rotate the matrix by
     * @returns {mat4} out
     */

    function fromZRotation(out, rad) {
      var s = Math.sin(rad);
      var c = Math.cos(rad); // Perform axis-specific matrix multiplication

      out[0] = c;
      out[1] = s;
      out[2] = 0;
      out[3] = 0;
      out[4] = -s;
      out[5] = c;
      out[6] = 0;
      out[7] = 0;
      out[8] = 0;
      out[9] = 0;
      out[10] = 1;
      out[11] = 0;
      out[12] = 0;
      out[13] = 0;
      out[14] = 0;
      out[15] = 1;
      return out;
    }
    /**
     * Creates a matrix from a quaternion rotation and vector translation
     * This is equivalent to (but much faster than):
     *
     *     mat4.identity(dest);
     *     mat4.translate(dest, vec);
     *     let quatMat = mat4.create();
     *     quat4.toMat4(quat, quatMat);
     *     mat4.multiply(dest, quatMat);
     *
     * @param {mat4} out mat4 receiving operation result
     * @param {quat4} q Rotation quaternion
     * @param {ReadonlyVec3} v Translation vector
     * @returns {mat4} out
     */

    function fromRotationTranslation(out, q, v) {
      // Quaternion math
      var x = q[0],
          y = q[1],
          z = q[2],
          w = q[3];
      var x2 = x + x;
      var y2 = y + y;
      var z2 = z + z;
      var xx = x * x2;
      var xy = x * y2;
      var xz = x * z2;
      var yy = y * y2;
      var yz = y * z2;
      var zz = z * z2;
      var wx = w * x2;
      var wy = w * y2;
      var wz = w * z2;
      out[0] = 1 - (yy + zz);
      out[1] = xy + wz;
      out[2] = xz - wy;
      out[3] = 0;
      out[4] = xy - wz;
      out[5] = 1 - (xx + zz);
      out[6] = yz + wx;
      out[7] = 0;
      out[8] = xz + wy;
      out[9] = yz - wx;
      out[10] = 1 - (xx + yy);
      out[11] = 0;
      out[12] = v[0];
      out[13] = v[1];
      out[14] = v[2];
      out[15] = 1;
      return out;
    }
    /**
     * Creates a new mat4 from a dual quat.
     *
     * @param {mat4} out Matrix
     * @param {ReadonlyQuat2} a Dual Quaternion
     * @returns {mat4} mat4 receiving operation result
     */

    function fromQuat2(out, a) {
      var translation = new ARRAY_TYPE(3);
      var bx = -a[0],
          by = -a[1],
          bz = -a[2],
          bw = a[3],
          ax = a[4],
          ay = a[5],
          az = a[6],
          aw = a[7];
      var magnitude = bx * bx + by * by + bz * bz + bw * bw; //Only scale if it makes sense

      if (magnitude > 0) {
        translation[0] = (ax * bw + aw * bx + ay * bz - az * by) * 2 / magnitude;
        translation[1] = (ay * bw + aw * by + az * bx - ax * bz) * 2 / magnitude;
        translation[2] = (az * bw + aw * bz + ax * by - ay * bx) * 2 / magnitude;
      } else {
        translation[0] = (ax * bw + aw * bx + ay * bz - az * by) * 2;
        translation[1] = (ay * bw + aw * by + az * bx - ax * bz) * 2;
        translation[2] = (az * bw + aw * bz + ax * by - ay * bx) * 2;
      }

      fromRotationTranslation(out, a, translation);
      return out;
    }
    /**
     * Returns the translation vector component of a transformation
     *  matrix. If a matrix is built with fromRotationTranslation,
     *  the returned vector will be the same as the translation vector
     *  originally supplied.
     * @param  {vec3} out Vector to receive translation component
     * @param  {ReadonlyMat4} mat Matrix to be decomposed (input)
     * @return {vec3} out
     */

    function getTranslation(out, mat) {
      out[0] = mat[12];
      out[1] = mat[13];
      out[2] = mat[14];
      return out;
    }
    /**
     * Returns the scaling factor component of a transformation
     *  matrix. If a matrix is built with fromRotationTranslationScale
     *  with a normalized Quaternion paramter, the returned vector will be
     *  the same as the scaling vector
     *  originally supplied.
     * @param  {vec3} out Vector to receive scaling factor component
     * @param  {ReadonlyMat4} mat Matrix to be decomposed (input)
     * @return {vec3} out
     */

    function getScaling(out, mat) {
      var m11 = mat[0];
      var m12 = mat[1];
      var m13 = mat[2];
      var m21 = mat[4];
      var m22 = mat[5];
      var m23 = mat[6];
      var m31 = mat[8];
      var m32 = mat[9];
      var m33 = mat[10];
      out[0] = Math.hypot(m11, m12, m13);
      out[1] = Math.hypot(m21, m22, m23);
      out[2] = Math.hypot(m31, m32, m33);
      return out;
    }
    /**
     * Returns a quaternion representing the rotational component
     *  of a transformation matrix. If a matrix is built with
     *  fromRotationTranslation, the returned quaternion will be the
     *  same as the quaternion originally supplied.
     * @param {quat} out Quaternion to receive the rotation component
     * @param {ReadonlyMat4} mat Matrix to be decomposed (input)
     * @return {quat} out
     */

    function getRotation(out, mat) {
      var scaling = new ARRAY_TYPE(3);
      getScaling(scaling, mat);
      var is1 = 1 / scaling[0];
      var is2 = 1 / scaling[1];
      var is3 = 1 / scaling[2];
      var sm11 = mat[0] * is1;
      var sm12 = mat[1] * is2;
      var sm13 = mat[2] * is3;
      var sm21 = mat[4] * is1;
      var sm22 = mat[5] * is2;
      var sm23 = mat[6] * is3;
      var sm31 = mat[8] * is1;
      var sm32 = mat[9] * is2;
      var sm33 = mat[10] * is3;
      var trace = sm11 + sm22 + sm33;
      var S = 0;

      if (trace > 0) {
        S = Math.sqrt(trace + 1.0) * 2;
        out[3] = 0.25 * S;
        out[0] = (sm23 - sm32) / S;
        out[1] = (sm31 - sm13) / S;
        out[2] = (sm12 - sm21) / S;
      } else if (sm11 > sm22 && sm11 > sm33) {
        S = Math.sqrt(1.0 + sm11 - sm22 - sm33) * 2;
        out[3] = (sm23 - sm32) / S;
        out[0] = 0.25 * S;
        out[1] = (sm12 + sm21) / S;
        out[2] = (sm31 + sm13) / S;
      } else if (sm22 > sm33) {
        S = Math.sqrt(1.0 + sm22 - sm11 - sm33) * 2;
        out[3] = (sm31 - sm13) / S;
        out[0] = (sm12 + sm21) / S;
        out[1] = 0.25 * S;
        out[2] = (sm23 + sm32) / S;
      } else {
        S = Math.sqrt(1.0 + sm33 - sm11 - sm22) * 2;
        out[3] = (sm12 - sm21) / S;
        out[0] = (sm31 + sm13) / S;
        out[1] = (sm23 + sm32) / S;
        out[2] = 0.25 * S;
      }

      return out;
    }
    /**
     * Creates a matrix from a quaternion rotation, vector translation and vector scale
     * This is equivalent to (but much faster than):
     *
     *     mat4.identity(dest);
     *     mat4.translate(dest, vec);
     *     let quatMat = mat4.create();
     *     quat4.toMat4(quat, quatMat);
     *     mat4.multiply(dest, quatMat);
     *     mat4.scale(dest, scale)
     *
     * @param {mat4} out mat4 receiving operation result
     * @param {quat4} q Rotation quaternion
     * @param {ReadonlyVec3} v Translation vector
     * @param {ReadonlyVec3} s Scaling vector
     * @returns {mat4} out
     */

    function fromRotationTranslationScale(out, q, v, s) {
      // Quaternion math
      var x = q[0],
          y = q[1],
          z = q[2],
          w = q[3];
      var x2 = x + x;
      var y2 = y + y;
      var z2 = z + z;
      var xx = x * x2;
      var xy = x * y2;
      var xz = x * z2;
      var yy = y * y2;
      var yz = y * z2;
      var zz = z * z2;
      var wx = w * x2;
      var wy = w * y2;
      var wz = w * z2;
      var sx = s[0];
      var sy = s[1];
      var sz = s[2];
      out[0] = (1 - (yy + zz)) * sx;
      out[1] = (xy + wz) * sx;
      out[2] = (xz - wy) * sx;
      out[3] = 0;
      out[4] = (xy - wz) * sy;
      out[5] = (1 - (xx + zz)) * sy;
      out[6] = (yz + wx) * sy;
      out[7] = 0;
      out[8] = (xz + wy) * sz;
      out[9] = (yz - wx) * sz;
      out[10] = (1 - (xx + yy)) * sz;
      out[11] = 0;
      out[12] = v[0];
      out[13] = v[1];
      out[14] = v[2];
      out[15] = 1;
      return out;
    }
    /**
     * Creates a matrix from a quaternion rotation, vector translation and vector scale, rotating and scaling around the given origin
     * This is equivalent to (but much faster than):
     *
     *     mat4.identity(dest);
     *     mat4.translate(dest, vec);
     *     mat4.translate(dest, origin);
     *     let quatMat = mat4.create();
     *     quat4.toMat4(quat, quatMat);
     *     mat4.multiply(dest, quatMat);
     *     mat4.scale(dest, scale)
     *     mat4.translate(dest, negativeOrigin);
     *
     * @param {mat4} out mat4 receiving operation result
     * @param {quat4} q Rotation quaternion
     * @param {ReadonlyVec3} v Translation vector
     * @param {ReadonlyVec3} s Scaling vector
     * @param {ReadonlyVec3} o The origin vector around which to scale and rotate
     * @returns {mat4} out
     */

    function fromRotationTranslationScaleOrigin(out, q, v, s, o) {
      // Quaternion math
      var x = q[0],
          y = q[1],
          z = q[2],
          w = q[3];
      var x2 = x + x;
      var y2 = y + y;
      var z2 = z + z;
      var xx = x * x2;
      var xy = x * y2;
      var xz = x * z2;
      var yy = y * y2;
      var yz = y * z2;
      var zz = z * z2;
      var wx = w * x2;
      var wy = w * y2;
      var wz = w * z2;
      var sx = s[0];
      var sy = s[1];
      var sz = s[2];
      var ox = o[0];
      var oy = o[1];
      var oz = o[2];
      var out0 = (1 - (yy + zz)) * sx;
      var out1 = (xy + wz) * sx;
      var out2 = (xz - wy) * sx;
      var out4 = (xy - wz) * sy;
      var out5 = (1 - (xx + zz)) * sy;
      var out6 = (yz + wx) * sy;
      var out8 = (xz + wy) * sz;
      var out9 = (yz - wx) * sz;
      var out10 = (1 - (xx + yy)) * sz;
      out[0] = out0;
      out[1] = out1;
      out[2] = out2;
      out[3] = 0;
      out[4] = out4;
      out[5] = out5;
      out[6] = out6;
      out[7] = 0;
      out[8] = out8;
      out[9] = out9;
      out[10] = out10;
      out[11] = 0;
      out[12] = v[0] + ox - (out0 * ox + out4 * oy + out8 * oz);
      out[13] = v[1] + oy - (out1 * ox + out5 * oy + out9 * oz);
      out[14] = v[2] + oz - (out2 * ox + out6 * oy + out10 * oz);
      out[15] = 1;
      return out;
    }
    /**
     * Calculates a 4x4 matrix from the given quaternion
     *
     * @param {mat4} out mat4 receiving operation result
     * @param {ReadonlyQuat} q Quaternion to create matrix from
     *
     * @returns {mat4} out
     */

    function fromQuat(out, q) {
      var x = q[0],
          y = q[1],
          z = q[2],
          w = q[3];
      var x2 = x + x;
      var y2 = y + y;
      var z2 = z + z;
      var xx = x * x2;
      var yx = y * x2;
      var yy = y * y2;
      var zx = z * x2;
      var zy = z * y2;
      var zz = z * z2;
      var wx = w * x2;
      var wy = w * y2;
      var wz = w * z2;
      out[0] = 1 - yy - zz;
      out[1] = yx + wz;
      out[2] = zx - wy;
      out[3] = 0;
      out[4] = yx - wz;
      out[5] = 1 - xx - zz;
      out[6] = zy + wx;
      out[7] = 0;
      out[8] = zx + wy;
      out[9] = zy - wx;
      out[10] = 1 - xx - yy;
      out[11] = 0;
      out[12] = 0;
      out[13] = 0;
      out[14] = 0;
      out[15] = 1;
      return out;
    }
    /**
     * Generates a frustum matrix with the given bounds
     *
     * @param {mat4} out mat4 frustum matrix will be written into
     * @param {Number} left Left bound of the frustum
     * @param {Number} right Right bound of the frustum
     * @param {Number} bottom Bottom bound of the frustum
     * @param {Number} top Top bound of the frustum
     * @param {Number} near Near bound of the frustum
     * @param {Number} far Far bound of the frustum
     * @returns {mat4} out
     */

    function frustum(out, left, right, bottom, top, near, far) {
      var rl = 1 / (right - left);
      var tb = 1 / (top - bottom);
      var nf = 1 / (near - far);
      out[0] = near * 2 * rl;
      out[1] = 0;
      out[2] = 0;
      out[3] = 0;
      out[4] = 0;
      out[5] = near * 2 * tb;
      out[6] = 0;
      out[7] = 0;
      out[8] = (right + left) * rl;
      out[9] = (top + bottom) * tb;
      out[10] = (far + near) * nf;
      out[11] = -1;
      out[12] = 0;
      out[13] = 0;
      out[14] = far * near * 2 * nf;
      out[15] = 0;
      return out;
    }
    /**
     * Generates a perspective projection matrix with the given bounds.
     * The near/far clip planes correspond to a normalized device coordinate Z range of [-1, 1],
     * which matches WebGL/OpenGL's clip volume.
     * Passing null/undefined/no value for far will generate infinite projection matrix.
     *
     * @param {mat4} out mat4 frustum matrix will be written into
     * @param {number} fovy Vertical field of view in radians
     * @param {number} aspect Aspect ratio. typically viewport width/height
     * @param {number} near Near bound of the frustum
     * @param {number} far Far bound of the frustum, can be null or Infinity
     * @returns {mat4} out
     */

    function perspectiveNO(out, fovy, aspect, near, far) {
      var f = 1.0 / Math.tan(fovy / 2),
          nf;
      out[0] = f / aspect;
      out[1] = 0;
      out[2] = 0;
      out[3] = 0;
      out[4] = 0;
      out[5] = f;
      out[6] = 0;
      out[7] = 0;
      out[8] = 0;
      out[9] = 0;
      out[11] = -1;
      out[12] = 0;
      out[13] = 0;
      out[15] = 0;

      if (far != null && far !== Infinity) {
        nf = 1 / (near - far);
        out[10] = (far + near) * nf;
        out[14] = 2 * far * near * nf;
      } else {
        out[10] = -1;
        out[14] = -2 * near;
      }

      return out;
    }
    /**
     * Alias for {@link mat4.perspectiveNO}
     * @function
     */

    var perspective = perspectiveNO;
    /**
     * Generates a perspective projection matrix suitable for WebGPU with the given bounds.
     * The near/far clip planes correspond to a normalized device coordinate Z range of [0, 1],
     * which matches WebGPU/Vulkan/DirectX/Metal's clip volume.
     * Passing null/undefined/no value for far will generate infinite projection matrix.
     *
     * @param {mat4} out mat4 frustum matrix will be written into
     * @param {number} fovy Vertical field of view in radians
     * @param {number} aspect Aspect ratio. typically viewport width/height
     * @param {number} near Near bound of the frustum
     * @param {number} far Far bound of the frustum, can be null or Infinity
     * @returns {mat4} out
     */

    function perspectiveZO(out, fovy, aspect, near, far) {
      var f = 1.0 / Math.tan(fovy / 2),
          nf;
      out[0] = f / aspect;
      out[1] = 0;
      out[2] = 0;
      out[3] = 0;
      out[4] = 0;
      out[5] = f;
      out[6] = 0;
      out[7] = 0;
      out[8] = 0;
      out[9] = 0;
      out[11] = -1;
      out[12] = 0;
      out[13] = 0;
      out[15] = 0;

      if (far != null && far !== Infinity) {
        nf = 1 / (near - far);
        out[10] = far * nf;
        out[14] = far * near * nf;
      } else {
        out[10] = -1;
        out[14] = -near;
      }

      return out;
    }
    /**
     * Generates a perspective projection matrix with the given field of view.
     * This is primarily useful for generating projection matrices to be used
     * with the still experiemental WebVR API.
     *
     * @param {mat4} out mat4 frustum matrix will be written into
     * @param {Object} fov Object containing the following values: upDegrees, downDegrees, leftDegrees, rightDegrees
     * @param {number} near Near bound of the frustum
     * @param {number} far Far bound of the frustum
     * @returns {mat4} out
     */

    function perspectiveFromFieldOfView(out, fov, near, far) {
      var upTan = Math.tan(fov.upDegrees * Math.PI / 180.0);
      var downTan = Math.tan(fov.downDegrees * Math.PI / 180.0);
      var leftTan = Math.tan(fov.leftDegrees * Math.PI / 180.0);
      var rightTan = Math.tan(fov.rightDegrees * Math.PI / 180.0);
      var xScale = 2.0 / (leftTan + rightTan);
      var yScale = 2.0 / (upTan + downTan);
      out[0] = xScale;
      out[1] = 0.0;
      out[2] = 0.0;
      out[3] = 0.0;
      out[4] = 0.0;
      out[5] = yScale;
      out[6] = 0.0;
      out[7] = 0.0;
      out[8] = -((leftTan - rightTan) * xScale * 0.5);
      out[9] = (upTan - downTan) * yScale * 0.5;
      out[10] = far / (near - far);
      out[11] = -1.0;
      out[12] = 0.0;
      out[13] = 0.0;
      out[14] = far * near / (near - far);
      out[15] = 0.0;
      return out;
    }
    /**
     * Generates a orthogonal projection matrix with the given bounds.
     * The near/far clip planes correspond to a normalized device coordinate Z range of [-1, 1],
     * which matches WebGL/OpenGL's clip volume.
     *
     * @param {mat4} out mat4 frustum matrix will be written into
     * @param {number} left Left bound of the frustum
     * @param {number} right Right bound of the frustum
     * @param {number} bottom Bottom bound of the frustum
     * @param {number} top Top bound of the frustum
     * @param {number} near Near bound of the frustum
     * @param {number} far Far bound of the frustum
     * @returns {mat4} out
     */

    function orthoNO(out, left, right, bottom, top, near, far) {
      var lr = 1 / (left - right);
      var bt = 1 / (bottom - top);
      var nf = 1 / (near - far);
      out[0] = -2 * lr;
      out[1] = 0;
      out[2] = 0;
      out[3] = 0;
      out[4] = 0;
      out[5] = -2 * bt;
      out[6] = 0;
      out[7] = 0;
      out[8] = 0;
      out[9] = 0;
      out[10] = 2 * nf;
      out[11] = 0;
      out[12] = (left + right) * lr;
      out[13] = (top + bottom) * bt;
      out[14] = (far + near) * nf;
      out[15] = 1;
      return out;
    }
    /**
     * Alias for {@link mat4.orthoNO}
     * @function
     */

    var ortho = orthoNO;
    /**
     * Generates a orthogonal projection matrix with the given bounds.
     * The near/far clip planes correspond to a normalized device coordinate Z range of [0, 1],
     * which matches WebGPU/Vulkan/DirectX/Metal's clip volume.
     *
     * @param {mat4} out mat4 frustum matrix will be written into
     * @param {number} left Left bound of the frustum
     * @param {number} right Right bound of the frustum
     * @param {number} bottom Bottom bound of the frustum
     * @param {number} top Top bound of the frustum
     * @param {number} near Near bound of the frustum
     * @param {number} far Far bound of the frustum
     * @returns {mat4} out
     */

    function orthoZO(out, left, right, bottom, top, near, far) {
      var lr = 1 / (left - right);
      var bt = 1 / (bottom - top);
      var nf = 1 / (near - far);
      out[0] = -2 * lr;
      out[1] = 0;
      out[2] = 0;
      out[3] = 0;
      out[4] = 0;
      out[5] = -2 * bt;
      out[6] = 0;
      out[7] = 0;
      out[8] = 0;
      out[9] = 0;
      out[10] = nf;
      out[11] = 0;
      out[12] = (left + right) * lr;
      out[13] = (top + bottom) * bt;
      out[14] = near * nf;
      out[15] = 1;
      return out;
    }
    /**
     * Generates a look-at matrix with the given eye position, focal point, and up axis.
     * If you want a matrix that actually makes an object look at another object, you should use targetTo instead.
     *
     * @param {mat4} out mat4 frustum matrix will be written into
     * @param {ReadonlyVec3} eye Position of the viewer
     * @param {ReadonlyVec3} center Point the viewer is looking at
     * @param {ReadonlyVec3} up vec3 pointing up
     * @returns {mat4} out
     */

    function lookAt(out, eye, center, up) {
      var x0, x1, x2, y0, y1, y2, z0, z1, z2, len;
      var eyex = eye[0];
      var eyey = eye[1];
      var eyez = eye[2];
      var upx = up[0];
      var upy = up[1];
      var upz = up[2];
      var centerx = center[0];
      var centery = center[1];
      var centerz = center[2];

      if (Math.abs(eyex - centerx) < EPSILON && Math.abs(eyey - centery) < EPSILON && Math.abs(eyez - centerz) < EPSILON) {
        return identity$1(out);
      }

      z0 = eyex - centerx;
      z1 = eyey - centery;
      z2 = eyez - centerz;
      len = 1 / Math.hypot(z0, z1, z2);
      z0 *= len;
      z1 *= len;
      z2 *= len;
      x0 = upy * z2 - upz * z1;
      x1 = upz * z0 - upx * z2;
      x2 = upx * z1 - upy * z0;
      len = Math.hypot(x0, x1, x2);

      if (!len) {
        x0 = 0;
        x1 = 0;
        x2 = 0;
      } else {
        len = 1 / len;
        x0 *= len;
        x1 *= len;
        x2 *= len;
      }

      y0 = z1 * x2 - z2 * x1;
      y1 = z2 * x0 - z0 * x2;
      y2 = z0 * x1 - z1 * x0;
      len = Math.hypot(y0, y1, y2);

      if (!len) {
        y0 = 0;
        y1 = 0;
        y2 = 0;
      } else {
        len = 1 / len;
        y0 *= len;
        y1 *= len;
        y2 *= len;
      }

      out[0] = x0;
      out[1] = y0;
      out[2] = z0;
      out[3] = 0;
      out[4] = x1;
      out[5] = y1;
      out[6] = z1;
      out[7] = 0;
      out[8] = x2;
      out[9] = y2;
      out[10] = z2;
      out[11] = 0;
      out[12] = -(x0 * eyex + x1 * eyey + x2 * eyez);
      out[13] = -(y0 * eyex + y1 * eyey + y2 * eyez);
      out[14] = -(z0 * eyex + z1 * eyey + z2 * eyez);
      out[15] = 1;
      return out;
    }
    /**
     * Generates a matrix that makes something look at something else.
     *
     * @param {mat4} out mat4 frustum matrix will be written into
     * @param {ReadonlyVec3} eye Position of the viewer
     * @param {ReadonlyVec3} center Point the viewer is looking at
     * @param {ReadonlyVec3} up vec3 pointing up
     * @returns {mat4} out
     */

    function targetTo(out, eye, target, up) {
      var eyex = eye[0],
          eyey = eye[1],
          eyez = eye[2],
          upx = up[0],
          upy = up[1],
          upz = up[2];
      var z0 = eyex - target[0],
          z1 = eyey - target[1],
          z2 = eyez - target[2];
      var len = z0 * z0 + z1 * z1 + z2 * z2;

      if (len > 0) {
        len = 1 / Math.sqrt(len);
        z0 *= len;
        z1 *= len;
        z2 *= len;
      }

      var x0 = upy * z2 - upz * z1,
          x1 = upz * z0 - upx * z2,
          x2 = upx * z1 - upy * z0;
      len = x0 * x0 + x1 * x1 + x2 * x2;

      if (len > 0) {
        len = 1 / Math.sqrt(len);
        x0 *= len;
        x1 *= len;
        x2 *= len;
      }

      out[0] = x0;
      out[1] = x1;
      out[2] = x2;
      out[3] = 0;
      out[4] = z1 * x2 - z2 * x1;
      out[5] = z2 * x0 - z0 * x2;
      out[6] = z0 * x1 - z1 * x0;
      out[7] = 0;
      out[8] = z0;
      out[9] = z1;
      out[10] = z2;
      out[11] = 0;
      out[12] = eyex;
      out[13] = eyey;
      out[14] = eyez;
      out[15] = 1;
      return out;
    }
    /**
     * Returns a string representation of a mat4
     *
     * @param {ReadonlyMat4} a matrix to represent as a string
     * @returns {String} string representation of the matrix
     */

    function str(a) {
      return "mat4(" + a[0] + ", " + a[1] + ", " + a[2] + ", " + a[3] + ", " + a[4] + ", " + a[5] + ", " + a[6] + ", " + a[7] + ", " + a[8] + ", " + a[9] + ", " + a[10] + ", " + a[11] + ", " + a[12] + ", " + a[13] + ", " + a[14] + ", " + a[15] + ")";
    }
    /**
     * Returns Frobenius norm of a mat4
     *
     * @param {ReadonlyMat4} a the matrix to calculate Frobenius norm of
     * @returns {Number} Frobenius norm
     */

    function frob(a) {
      return Math.hypot(a[0], a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8], a[9], a[10], a[11], a[12], a[13], a[14], a[15]);
    }
    /**
     * Adds two mat4's
     *
     * @param {mat4} out the receiving matrix
     * @param {ReadonlyMat4} a the first operand
     * @param {ReadonlyMat4} b the second operand
     * @returns {mat4} out
     */

    function add(out, a, b) {
      out[0] = a[0] + b[0];
      out[1] = a[1] + b[1];
      out[2] = a[2] + b[2];
      out[3] = a[3] + b[3];
      out[4] = a[4] + b[4];
      out[5] = a[5] + b[5];
      out[6] = a[6] + b[6];
      out[7] = a[7] + b[7];
      out[8] = a[8] + b[8];
      out[9] = a[9] + b[9];
      out[10] = a[10] + b[10];
      out[11] = a[11] + b[11];
      out[12] = a[12] + b[12];
      out[13] = a[13] + b[13];
      out[14] = a[14] + b[14];
      out[15] = a[15] + b[15];
      return out;
    }
    /**
     * Subtracts matrix b from matrix a
     *
     * @param {mat4} out the receiving matrix
     * @param {ReadonlyMat4} a the first operand
     * @param {ReadonlyMat4} b the second operand
     * @returns {mat4} out
     */

    function subtract(out, a, b) {
      out[0] = a[0] - b[0];
      out[1] = a[1] - b[1];
      out[2] = a[2] - b[2];
      out[3] = a[3] - b[3];
      out[4] = a[4] - b[4];
      out[5] = a[5] - b[5];
      out[6] = a[6] - b[6];
      out[7] = a[7] - b[7];
      out[8] = a[8] - b[8];
      out[9] = a[9] - b[9];
      out[10] = a[10] - b[10];
      out[11] = a[11] - b[11];
      out[12] = a[12] - b[12];
      out[13] = a[13] - b[13];
      out[14] = a[14] - b[14];
      out[15] = a[15] - b[15];
      return out;
    }
    /**
     * Multiply each element of the matrix by a scalar.
     *
     * @param {mat4} out the receiving matrix
     * @param {ReadonlyMat4} a the matrix to scale
     * @param {Number} b amount to scale the matrix's elements by
     * @returns {mat4} out
     */

    function multiplyScalar(out, a, b) {
      out[0] = a[0] * b;
      out[1] = a[1] * b;
      out[2] = a[2] * b;
      out[3] = a[3] * b;
      out[4] = a[4] * b;
      out[5] = a[5] * b;
      out[6] = a[6] * b;
      out[7] = a[7] * b;
      out[8] = a[8] * b;
      out[9] = a[9] * b;
      out[10] = a[10] * b;
      out[11] = a[11] * b;
      out[12] = a[12] * b;
      out[13] = a[13] * b;
      out[14] = a[14] * b;
      out[15] = a[15] * b;
      return out;
    }
    /**
     * Adds two mat4's after multiplying each element of the second operand by a scalar value.
     *
     * @param {mat4} out the receiving vector
     * @param {ReadonlyMat4} a the first operand
     * @param {ReadonlyMat4} b the second operand
     * @param {Number} scale the amount to scale b's elements by before adding
     * @returns {mat4} out
     */

    function multiplyScalarAndAdd(out, a, b, scale) {
      out[0] = a[0] + b[0] * scale;
      out[1] = a[1] + b[1] * scale;
      out[2] = a[2] + b[2] * scale;
      out[3] = a[3] + b[3] * scale;
      out[4] = a[4] + b[4] * scale;
      out[5] = a[5] + b[5] * scale;
      out[6] = a[6] + b[6] * scale;
      out[7] = a[7] + b[7] * scale;
      out[8] = a[8] + b[8] * scale;
      out[9] = a[9] + b[9] * scale;
      out[10] = a[10] + b[10] * scale;
      out[11] = a[11] + b[11] * scale;
      out[12] = a[12] + b[12] * scale;
      out[13] = a[13] + b[13] * scale;
      out[14] = a[14] + b[14] * scale;
      out[15] = a[15] + b[15] * scale;
      return out;
    }
    /**
     * Returns whether or not the matrices have exactly the same elements in the same position (when compared with ===)
     *
     * @param {ReadonlyMat4} a The first matrix.
     * @param {ReadonlyMat4} b The second matrix.
     * @returns {Boolean} True if the matrices are equal, false otherwise.
     */

    function exactEquals(a, b) {
      return a[0] === b[0] && a[1] === b[1] && a[2] === b[2] && a[3] === b[3] && a[4] === b[4] && a[5] === b[5] && a[6] === b[6] && a[7] === b[7] && a[8] === b[8] && a[9] === b[9] && a[10] === b[10] && a[11] === b[11] && a[12] === b[12] && a[13] === b[13] && a[14] === b[14] && a[15] === b[15];
    }
    /**
     * Returns whether or not the matrices have approximately the same elements in the same position.
     *
     * @param {ReadonlyMat4} a The first matrix.
     * @param {ReadonlyMat4} b The second matrix.
     * @returns {Boolean} True if the matrices are equal, false otherwise.
     */

    function equals(a, b) {
      var a0 = a[0],
          a1 = a[1],
          a2 = a[2],
          a3 = a[3];
      var a4 = a[4],
          a5 = a[5],
          a6 = a[6],
          a7 = a[7];
      var a8 = a[8],
          a9 = a[9],
          a10 = a[10],
          a11 = a[11];
      var a12 = a[12],
          a13 = a[13],
          a14 = a[14],
          a15 = a[15];
      var b0 = b[0],
          b1 = b[1],
          b2 = b[2],
          b3 = b[3];
      var b4 = b[4],
          b5 = b[5],
          b6 = b[6],
          b7 = b[7];
      var b8 = b[8],
          b9 = b[9],
          b10 = b[10],
          b11 = b[11];
      var b12 = b[12],
          b13 = b[13],
          b14 = b[14],
          b15 = b[15];
      return Math.abs(a0 - b0) <= EPSILON * Math.max(1.0, Math.abs(a0), Math.abs(b0)) && Math.abs(a1 - b1) <= EPSILON * Math.max(1.0, Math.abs(a1), Math.abs(b1)) && Math.abs(a2 - b2) <= EPSILON * Math.max(1.0, Math.abs(a2), Math.abs(b2)) && Math.abs(a3 - b3) <= EPSILON * Math.max(1.0, Math.abs(a3), Math.abs(b3)) && Math.abs(a4 - b4) <= EPSILON * Math.max(1.0, Math.abs(a4), Math.abs(b4)) && Math.abs(a5 - b5) <= EPSILON * Math.max(1.0, Math.abs(a5), Math.abs(b5)) && Math.abs(a6 - b6) <= EPSILON * Math.max(1.0, Math.abs(a6), Math.abs(b6)) && Math.abs(a7 - b7) <= EPSILON * Math.max(1.0, Math.abs(a7), Math.abs(b7)) && Math.abs(a8 - b8) <= EPSILON * Math.max(1.0, Math.abs(a8), Math.abs(b8)) && Math.abs(a9 - b9) <= EPSILON * Math.max(1.0, Math.abs(a9), Math.abs(b9)) && Math.abs(a10 - b10) <= EPSILON * Math.max(1.0, Math.abs(a10), Math.abs(b10)) && Math.abs(a11 - b11) <= EPSILON * Math.max(1.0, Math.abs(a11), Math.abs(b11)) && Math.abs(a12 - b12) <= EPSILON * Math.max(1.0, Math.abs(a12), Math.abs(b12)) && Math.abs(a13 - b13) <= EPSILON * Math.max(1.0, Math.abs(a13), Math.abs(b13)) && Math.abs(a14 - b14) <= EPSILON * Math.max(1.0, Math.abs(a14), Math.abs(b14)) && Math.abs(a15 - b15) <= EPSILON * Math.max(1.0, Math.abs(a15), Math.abs(b15));
    }
    /**
     * Alias for {@link mat4.multiply}
     * @function
     */

    var mul = multiply;
    /**
     * Alias for {@link mat4.subtract}
     * @function
     */

    var sub = subtract;

    var mat4 = /*#__PURE__*/Object.freeze({
        __proto__: null,
        create: create$1,
        clone: clone$1,
        copy: copy,
        fromValues: fromValues$1,
        set: set,
        identity: identity$1,
        transpose: transpose,
        invert: invert,
        adjoint: adjoint,
        determinant: determinant,
        multiply: multiply,
        translate: translate,
        scale: scale,
        rotate: rotate$1,
        rotateX: rotateX,
        rotateY: rotateY,
        rotateZ: rotateZ,
        fromTranslation: fromTranslation,
        fromScaling: fromScaling,
        fromRotation: fromRotation,
        fromXRotation: fromXRotation,
        fromYRotation: fromYRotation,
        fromZRotation: fromZRotation,
        fromRotationTranslation: fromRotationTranslation,
        fromQuat2: fromQuat2,
        getTranslation: getTranslation,
        getScaling: getScaling,
        getRotation: getRotation,
        fromRotationTranslationScale: fromRotationTranslationScale,
        fromRotationTranslationScaleOrigin: fromRotationTranslationScaleOrigin,
        fromQuat: fromQuat,
        frustum: frustum,
        perspectiveNO: perspectiveNO,
        perspective: perspective,
        perspectiveZO: perspectiveZO,
        perspectiveFromFieldOfView: perspectiveFromFieldOfView,
        orthoNO: orthoNO,
        ortho: ortho,
        orthoZO: orthoZO,
        lookAt: lookAt,
        targetTo: targetTo,
        str: str,
        frob: frob,
        add: add,
        subtract: subtract,
        multiplyScalar: multiplyScalar,
        multiplyScalarAndAdd: multiplyScalarAndAdd,
        exactEquals: exactEquals,
        equals: equals,
        mul: mul,
        sub: sub
    });

    /**
     * 3 Dimensional Vector
     * @module vec3
     */

    /**
     * Creates a new, empty vec3
     *
     * @returns {vec3} a new 3D vector
     */

    function create$2() {
      var out = new ARRAY_TYPE(3);

      if (ARRAY_TYPE != Float32Array) {
        out[0] = 0;
        out[1] = 0;
        out[2] = 0;
      }

      return out;
    }
    /**
     * Creates a new vec3 initialized with values from an existing vector
     *
     * @param {ReadonlyVec3} a vector to clone
     * @returns {vec3} a new 3D vector
     */

    function clone$2(a) {
      var out = new ARRAY_TYPE(3);
      out[0] = a[0];
      out[1] = a[1];
      out[2] = a[2];
      return out;
    }
    /**
     * Calculates the length of a vec3
     *
     * @param {ReadonlyVec3} a vector to calculate length of
     * @returns {Number} length of a
     */

    function length(a) {
      var x = a[0];
      var y = a[1];
      var z = a[2];
      return Math.hypot(x, y, z);
    }
    /**
     * Creates a new vec3 initialized with the given values
     *
     * @param {Number} x X component
     * @param {Number} y Y component
     * @param {Number} z Z component
     * @returns {vec3} a new 3D vector
     */

    function fromValues$2(x, y, z) {
      var out = new ARRAY_TYPE(3);
      out[0] = x;
      out[1] = y;
      out[2] = z;
      return out;
    }
    /**
     * Copy the values from one vec3 to another
     *
     * @param {vec3} out the receiving vector
     * @param {ReadonlyVec3} a the source vector
     * @returns {vec3} out
     */

    function copy$1(out, a) {
      out[0] = a[0];
      out[1] = a[1];
      out[2] = a[2];
      return out;
    }
    /**
     * Set the components of a vec3 to the given values
     *
     * @param {vec3} out the receiving vector
     * @param {Number} x X component
     * @param {Number} y Y component
     * @param {Number} z Z component
     * @returns {vec3} out
     */

    function set$1(out, x, y, z) {
      out[0] = x;
      out[1] = y;
      out[2] = z;
      return out;
    }
    /**
     * Adds two vec3's
     *
     * @param {vec3} out the receiving vector
     * @param {ReadonlyVec3} a the first operand
     * @param {ReadonlyVec3} b the second operand
     * @returns {vec3} out
     */

    function add$1(out, a, b) {
      out[0] = a[0] + b[0];
      out[1] = a[1] + b[1];
      out[2] = a[2] + b[2];
      return out;
    }
    /**
     * Subtracts vector b from vector a
     *
     * @param {vec3} out the receiving vector
     * @param {ReadonlyVec3} a the first operand
     * @param {ReadonlyVec3} b the second operand
     * @returns {vec3} out
     */

    function subtract$1(out, a, b) {
      out[0] = a[0] - b[0];
      out[1] = a[1] - b[1];
      out[2] = a[2] - b[2];
      return out;
    }
    /**
     * Multiplies two vec3's
     *
     * @param {vec3} out the receiving vector
     * @param {ReadonlyVec3} a the first operand
     * @param {ReadonlyVec3} b the second operand
     * @returns {vec3} out
     */

    function multiply$1(out, a, b) {
      out[0] = a[0] * b[0];
      out[1] = a[1] * b[1];
      out[2] = a[2] * b[2];
      return out;
    }
    /**
     * Scales a vec3 by a scalar number
     *
     * @param {vec3} out the receiving vector
     * @param {ReadonlyVec3} a the vector to scale
     * @param {Number} b amount to scale the vector by
     * @returns {vec3} out
     */

    function scale$1(out, a, b) {
      out[0] = a[0] * b;
      out[1] = a[1] * b;
      out[2] = a[2] * b;
      return out;
    }
    /**
     * Normalize a vec3
     *
     * @param {vec3} out the receiving vector
     * @param {ReadonlyVec3} a vector to normalize
     * @returns {vec3} out
     */

    function normalize(out, a) {
      var x = a[0];
      var y = a[1];
      var z = a[2];
      var len = x * x + y * y + z * z;

      if (len > 0) {
        //TODO: evaluate use of glm_invsqrt here?
        len = 1 / Math.sqrt(len);
      }

      out[0] = a[0] * len;
      out[1] = a[1] * len;
      out[2] = a[2] * len;
      return out;
    }
    /**
     * Calculates the dot product of two vec3's
     *
     * @param {ReadonlyVec3} a the first operand
     * @param {ReadonlyVec3} b the second operand
     * @returns {Number} dot product of a and b
     */

    function dot(a, b) {
      return a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
    }
    /**
     * Computes the cross product of two vec3's
     *
     * @param {vec3} out the receiving vector
     * @param {ReadonlyVec3} a the first operand
     * @param {ReadonlyVec3} b the second operand
     * @returns {vec3} out
     */

    function cross(out, a, b) {
      var ax = a[0],
          ay = a[1],
          az = a[2];
      var bx = b[0],
          by = b[1],
          bz = b[2];
      out[0] = ay * bz - az * by;
      out[1] = az * bx - ax * bz;
      out[2] = ax * by - ay * bx;
      return out;
    }
    /**
     * Performs a linear interpolation between two vec3's
     *
     * @param {vec3} out the receiving vector
     * @param {ReadonlyVec3} a the first operand
     * @param {ReadonlyVec3} b the second operand
     * @param {Number} t interpolation amount, in the range [0-1], between the two inputs
     * @returns {vec3} out
     */

    function lerp(out, a, b, t) {
      var ax = a[0];
      var ay = a[1];
      var az = a[2];
      out[0] = ax + t * (b[0] - ax);
      out[1] = ay + t * (b[1] - ay);
      out[2] = az + t * (b[2] - az);
      return out;
    }
    /**
     * Transforms the vec3 with a mat4.
     * 4th vector component is implicitly '1'
     *
     * @param {vec3} out the receiving vector
     * @param {ReadonlyVec3} a the vector to transform
     * @param {ReadonlyMat4} m matrix to transform with
     * @returns {vec3} out
     */

    function transformMat4(out, a, m) {
      var x = a[0],
          y = a[1],
          z = a[2];
      var w = m[3] * x + m[7] * y + m[11] * z + m[15];
      w = w || 1.0;
      out[0] = (m[0] * x + m[4] * y + m[8] * z + m[12]) / w;
      out[1] = (m[1] * x + m[5] * y + m[9] * z + m[13]) / w;
      out[2] = (m[2] * x + m[6] * y + m[10] * z + m[14]) / w;
      return out;
    }
    /**
     * Transforms the vec3 with a mat3.
     *
     * @param {vec3} out the receiving vector
     * @param {ReadonlyVec3} a the vector to transform
     * @param {ReadonlyMat3} m the 3x3 matrix to transform with
     * @returns {vec3} out
     */

    function transformMat3(out, a, m) {
      var x = a[0],
          y = a[1],
          z = a[2];
      out[0] = x * m[0] + y * m[3] + z * m[6];
      out[1] = x * m[1] + y * m[4] + z * m[7];
      out[2] = x * m[2] + y * m[5] + z * m[8];
      return out;
    }
    /**
     * Transforms the vec3 with a quat
     * Can also be used for dual quaternions. (Multiply it with the real part)
     *
     * @param {vec3} out the receiving vector
     * @param {ReadonlyVec3} a the vector to transform
     * @param {ReadonlyQuat} q quaternion to transform with
     * @returns {vec3} out
     */

    function transformQuat(out, a, q) {
      // benchmarks: https://jsperf.com/quaternion-transform-vec3-implementations-fixed
      var qx = q[0],
          qy = q[1],
          qz = q[2],
          qw = q[3];
      var x = a[0],
          y = a[1],
          z = a[2]; // var qvec = [qx, qy, qz];
      // var uv = vec3.cross([], qvec, a);

      var uvx = qy * z - qz * y,
          uvy = qz * x - qx * z,
          uvz = qx * y - qy * x; // var uuv = vec3.cross([], qvec, uv);

      var uuvx = qy * uvz - qz * uvy,
          uuvy = qz * uvx - qx * uvz,
          uuvz = qx * uvy - qy * uvx; // vec3.scale(uv, uv, 2 * w);

      var w2 = qw * 2;
      uvx *= w2;
      uvy *= w2;
      uvz *= w2; // vec3.scale(uuv, uuv, 2);

      uuvx *= 2;
      uuvy *= 2;
      uuvz *= 2; // return vec3.add(out, a, vec3.add(out, uv, uuv));

      out[0] = x + uvx + uuvx;
      out[1] = y + uvy + uuvy;
      out[2] = z + uvz + uuvz;
      return out;
    }
    /**
     * Returns whether or not the vectors have approximately the same elements in the same position.
     *
     * @param {ReadonlyVec3} a The first vector.
     * @param {ReadonlyVec3} b The second vector.
     * @returns {Boolean} True if the vectors are equal, false otherwise.
     */

    function equals$1(a, b) {
      var a0 = a[0],
          a1 = a[1],
          a2 = a[2];
      var b0 = b[0],
          b1 = b[1],
          b2 = b[2];
      return Math.abs(a0 - b0) <= EPSILON * Math.max(1.0, Math.abs(a0), Math.abs(b0)) && Math.abs(a1 - b1) <= EPSILON * Math.max(1.0, Math.abs(a1), Math.abs(b1)) && Math.abs(a2 - b2) <= EPSILON * Math.max(1.0, Math.abs(a2), Math.abs(b2));
    }
    /**
     * Alias for {@link vec3.length}
     * @function
     */

    var len = length;
    /**
     * Perform some operation over an array of vec3s.
     *
     * @param {Array} a the array of vectors to iterate over
     * @param {Number} stride Number of elements between the start of each vec3. If 0 assumes tightly packed
     * @param {Number} offset Number of elements to skip at the beginning of the array
     * @param {Number} count Number of vec3s to iterate over. If 0 iterates over entire array
     * @param {Function} fn Function to call for each vector in the array
     * @param {Object} [arg] additional argument to pass to fn
     * @returns {Array} a
     * @function
     */

    var forEach = function () {
      var vec = create$2();
      return function (a, stride, offset, count, fn, arg) {
        var i, l;

        if (!stride) {
          stride = 3;
        }

        if (!offset) {
          offset = 0;
        }

        if (count) {
          l = Math.min(count * stride + offset, a.length);
        } else {
          l = a.length;
        }

        for (i = offset; i < l; i += stride) {
          vec[0] = a[i];
          vec[1] = a[i + 1];
          vec[2] = a[i + 2];
          fn(vec, vec, arg);
          a[i] = vec[0];
          a[i + 1] = vec[1];
          a[i + 2] = vec[2];
        }

        return a;
      };
    }();

    /**
     * 4 Dimensional Vector
     * @module vec4
     */

    /**
     * Creates a new, empty vec4
     *
     * @returns {vec4} a new 4D vector
     */

    function create$3() {
      var out = new ARRAY_TYPE(4);

      if (ARRAY_TYPE != Float32Array) {
        out[0] = 0;
        out[1] = 0;
        out[2] = 0;
        out[3] = 0;
      }

      return out;
    }
    /**
     * Creates a new vec4 initialized with the given values
     *
     * @param {Number} x X component
     * @param {Number} y Y component
     * @param {Number} z Z component
     * @param {Number} w W component
     * @returns {vec4} a new 4D vector
     */

    function fromValues$3(x, y, z, w) {
      var out = new ARRAY_TYPE(4);
      out[0] = x;
      out[1] = y;
      out[2] = z;
      out[3] = w;
      return out;
    }
    /**
     * Copy the values from one vec4 to another
     *
     * @param {vec4} out the receiving vector
     * @param {ReadonlyVec4} a the source vector
     * @returns {vec4} out
     */

    function copy$2(out, a) {
      out[0] = a[0];
      out[1] = a[1];
      out[2] = a[2];
      out[3] = a[3];
      return out;
    }
    /**
     * Normalize a vec4
     *
     * @param {vec4} out the receiving vector
     * @param {ReadonlyVec4} a vector to normalize
     * @returns {vec4} out
     */

    function normalize$1(out, a) {
      var x = a[0];
      var y = a[1];
      var z = a[2];
      var w = a[3];
      var len = x * x + y * y + z * z + w * w;

      if (len > 0) {
        len = 1 / Math.sqrt(len);
      }

      out[0] = x * len;
      out[1] = y * len;
      out[2] = z * len;
      out[3] = w * len;
      return out;
    }
    /**
     * Transforms the vec4 with a mat4.
     *
     * @param {vec4} out the receiving vector
     * @param {ReadonlyVec4} a the vector to transform
     * @param {ReadonlyMat4} m matrix to transform with
     * @returns {vec4} out
     */

    function transformMat4$1(out, a, m) {
      var x = a[0],
          y = a[1],
          z = a[2],
          w = a[3];
      out[0] = m[0] * x + m[4] * y + m[8] * z + m[12] * w;
      out[1] = m[1] * x + m[5] * y + m[9] * z + m[13] * w;
      out[2] = m[2] * x + m[6] * y + m[10] * z + m[14] * w;
      out[3] = m[3] * x + m[7] * y + m[11] * z + m[15] * w;
      return out;
    }
    /**
     * Perform some operation over an array of vec4s.
     *
     * @param {Array} a the array of vectors to iterate over
     * @param {Number} stride Number of elements between the start of each vec4. If 0 assumes tightly packed
     * @param {Number} offset Number of elements to skip at the beginning of the array
     * @param {Number} count Number of vec4s to iterate over. If 0 iterates over entire array
     * @param {Function} fn Function to call for each vector in the array
     * @param {Object} [arg] additional argument to pass to fn
     * @returns {Array} a
     * @function
     */

    var forEach$1 = function () {
      var vec = create$3();
      return function (a, stride, offset, count, fn, arg) {
        var i, l;

        if (!stride) {
          stride = 4;
        }

        if (!offset) {
          offset = 0;
        }

        if (count) {
          l = Math.min(count * stride + offset, a.length);
        } else {
          l = a.length;
        }

        for (i = offset; i < l; i += stride) {
          vec[0] = a[i];
          vec[1] = a[i + 1];
          vec[2] = a[i + 2];
          vec[3] = a[i + 3];
          fn(vec, vec, arg);
          a[i] = vec[0];
          a[i + 1] = vec[1];
          a[i + 2] = vec[2];
          a[i + 3] = vec[3];
        }

        return a;
      };
    }();

    /**
     * Quaternion
     * @module quat
     */

    /**
     * Creates a new identity quat
     *
     * @returns {quat} a new quaternion
     */

    function create$4() {
      var out = new ARRAY_TYPE(4);

      if (ARRAY_TYPE != Float32Array) {
        out[0] = 0;
        out[1] = 0;
        out[2] = 0;
      }

      out[3] = 1;
      return out;
    }
    /**
     * Sets a quat from the given angle and rotation axis,
     * then returns it.
     *
     * @param {quat} out the receiving quaternion
     * @param {ReadonlyVec3} axis the axis around which to rotate
     * @param {Number} rad the angle in radians
     * @returns {quat} out
     **/

    function setAxisAngle(out, axis, rad) {
      rad = rad * 0.5;
      var s = Math.sin(rad);
      out[0] = s * axis[0];
      out[1] = s * axis[1];
      out[2] = s * axis[2];
      out[3] = Math.cos(rad);
      return out;
    }
    /**
     * Multiplies two quat's
     *
     * @param {quat} out the receiving quaternion
     * @param {ReadonlyQuat} a the first operand
     * @param {ReadonlyQuat} b the second operand
     * @returns {quat} out
     */

    function multiply$2(out, a, b) {
      var ax = a[0],
          ay = a[1],
          az = a[2],
          aw = a[3];
      var bx = b[0],
          by = b[1],
          bz = b[2],
          bw = b[3];
      out[0] = ax * bw + aw * bx + ay * bz - az * by;
      out[1] = ay * bw + aw * by + az * bx - ax * bz;
      out[2] = az * bw + aw * bz + ax * by - ay * bx;
      out[3] = aw * bw - ax * bx - ay * by - az * bz;
      return out;
    }
    /**
     * Performs a spherical linear interpolation between two quat
     *
     * @param {quat} out the receiving quaternion
     * @param {ReadonlyQuat} a the first operand
     * @param {ReadonlyQuat} b the second operand
     * @param {Number} t interpolation amount, in the range [0-1], between the two inputs
     * @returns {quat} out
     */

    function slerp(out, a, b, t) {
      // benchmarks:
      //    http://jsperf.com/quaternion-slerp-implementations
      var ax = a[0],
          ay = a[1],
          az = a[2],
          aw = a[3];
      var bx = b[0],
          by = b[1],
          bz = b[2],
          bw = b[3];
      var omega, cosom, sinom, scale0, scale1; // calc cosine

      cosom = ax * bx + ay * by + az * bz + aw * bw; // adjust signs (if necessary)

      if (cosom < 0.0) {
        cosom = -cosom;
        bx = -bx;
        by = -by;
        bz = -bz;
        bw = -bw;
      } // calculate coefficients


      if (1.0 - cosom > EPSILON) {
        // standard case (slerp)
        omega = Math.acos(cosom);
        sinom = Math.sin(omega);
        scale0 = Math.sin((1.0 - t) * omega) / sinom;
        scale1 = Math.sin(t * omega) / sinom;
      } else {
        // "from" and "to" quaternions are very close
        //  ... so we can do a linear interpolation
        scale0 = 1.0 - t;
        scale1 = t;
      } // calculate final values


      out[0] = scale0 * ax + scale1 * bx;
      out[1] = scale0 * ay + scale1 * by;
      out[2] = scale0 * az + scale1 * bz;
      out[3] = scale0 * aw + scale1 * bw;
      return out;
    }
    /**
     * Calculates the inverse of a quat
     *
     * @param {quat} out the receiving quaternion
     * @param {ReadonlyQuat} a quat to calculate inverse of
     * @returns {quat} out
     */

    function invert$1(out, a) {
      var a0 = a[0],
          a1 = a[1],
          a2 = a[2],
          a3 = a[3];
      var dot = a0 * a0 + a1 * a1 + a2 * a2 + a3 * a3;
      var invDot = dot ? 1.0 / dot : 0; // TODO: Would be faster to return [0,0,0,0] immediately if dot == 0

      out[0] = -a0 * invDot;
      out[1] = -a1 * invDot;
      out[2] = -a2 * invDot;
      out[3] = a3 * invDot;
      return out;
    }
    /**
     * Creates a quaternion from the given 3x3 rotation matrix.
     *
     * NOTE: The resultant quaternion is not normalized, so you should be sure
     * to renormalize the quaternion yourself where necessary.
     *
     * @param {quat} out the receiving quaternion
     * @param {ReadonlyMat3} m rotation matrix
     * @returns {quat} out
     * @function
     */

    function fromMat3(out, m) {
      // Algorithm in Ken Shoemake's article in 1987 SIGGRAPH course notes
      // article "Quaternion Calculus and Fast Animation".
      var fTrace = m[0] + m[4] + m[8];
      var fRoot;

      if (fTrace > 0.0) {
        // |w| > 1/2, may as well choose w > 1/2
        fRoot = Math.sqrt(fTrace + 1.0); // 2w

        out[3] = 0.5 * fRoot;
        fRoot = 0.5 / fRoot; // 1/(4w)

        out[0] = (m[5] - m[7]) * fRoot;
        out[1] = (m[6] - m[2]) * fRoot;
        out[2] = (m[1] - m[3]) * fRoot;
      } else {
        // |w| <= 1/2
        var i = 0;
        if (m[4] > m[0]) i = 1;
        if (m[8] > m[i * 3 + i]) i = 2;
        var j = (i + 1) % 3;
        var k = (i + 2) % 3;
        fRoot = Math.sqrt(m[i * 3 + i] - m[j * 3 + j] - m[k * 3 + k] + 1.0);
        out[i] = 0.5 * fRoot;
        fRoot = 0.5 / fRoot;
        out[3] = (m[j * 3 + k] - m[k * 3 + j]) * fRoot;
        out[j] = (m[j * 3 + i] + m[i * 3 + j]) * fRoot;
        out[k] = (m[k * 3 + i] + m[i * 3 + k]) * fRoot;
      }

      return out;
    }
    /**
     * Creates a quaternion from the given euler angle x, y, z.
     *
     * @param {quat} out the receiving quaternion
     * @param {x} Angle to rotate around X axis in degrees.
     * @param {y} Angle to rotate around Y axis in degrees.
     * @param {z} Angle to rotate around Z axis in degrees.
     * @returns {quat} out
     * @function
     */

    function fromEuler(out, x, y, z) {
      var halfToRad = 0.5 * Math.PI / 180.0;
      x *= halfToRad;
      y *= halfToRad;
      z *= halfToRad;
      var sx = Math.sin(x);
      var cx = Math.cos(x);
      var sy = Math.sin(y);
      var cy = Math.cos(y);
      var sz = Math.sin(z);
      var cz = Math.cos(z);
      out[0] = sx * cy * cz - cx * sy * sz;
      out[1] = cx * sy * cz + sx * cy * sz;
      out[2] = cx * cy * sz - sx * sy * cz;
      out[3] = cx * cy * cz + sx * sy * sz;
      return out;
    }
    /**
     * Creates a new quat initialized with the given values
     *
     * @param {Number} x X component
     * @param {Number} y Y component
     * @param {Number} z Z component
     * @param {Number} w W component
     * @returns {quat} a new quaternion
     * @function
     */

    var fromValues$4 = fromValues$3;
    /**
     * Copy the values from one quat to another
     *
     * @param {quat} out the receiving quaternion
     * @param {ReadonlyQuat} a the source quaternion
     * @returns {quat} out
     * @function
     */

    var copy$3 = copy$2;
    /**
     * Alias for {@link quat.multiply}
     * @function
     */

    var mul$1 = multiply$2;
    /**
     * Normalize a quat
     *
     * @param {quat} out the receiving quaternion
     * @param {ReadonlyQuat} a quaternion to normalize
     * @returns {quat} out
     * @function
     */

    var normalize$2 = normalize$1;
    /**
     * Sets a quaternion to represent the shortest rotation from one
     * vector to another.
     *
     * Both vectors are assumed to be unit length.
     *
     * @param {quat} out the receiving quaternion.
     * @param {ReadonlyVec3} a the initial vector
     * @param {ReadonlyVec3} b the destination vector
     * @returns {quat} out
     */

    var rotationTo = function () {
      var tmpvec3 = create$2();
      var xUnitVec3 = fromValues$2(1, 0, 0);
      var yUnitVec3 = fromValues$2(0, 1, 0);
      return function (out, a, b) {
        var dot$1 = dot(a, b);

        if (dot$1 < -0.999999) {
          cross(tmpvec3, xUnitVec3, a);
          if (len(tmpvec3) < 0.000001) cross(tmpvec3, yUnitVec3, a);
          normalize(tmpvec3, tmpvec3);
          setAxisAngle(out, tmpvec3, Math.PI);
          return out;
        } else if (dot$1 > 0.999999) {
          out[0] = 0;
          out[1] = 0;
          out[2] = 0;
          out[3] = 1;
          return out;
        } else {
          cross(tmpvec3, a, b);
          out[0] = tmpvec3[0];
          out[1] = tmpvec3[1];
          out[2] = tmpvec3[2];
          out[3] = 1 + dot$1;
          return normalize$2(out, out);
        }
      };
    }();
    /**
     * Performs a spherical linear interpolation with two control points
     *
     * @param {quat} out the receiving quaternion
     * @param {ReadonlyQuat} a the first operand
     * @param {ReadonlyQuat} b the second operand
     * @param {ReadonlyQuat} c the third operand
     * @param {ReadonlyQuat} d the fourth operand
     * @param {Number} t interpolation amount, in the range [0-1], between the two inputs
     * @returns {quat} out
     */

    var sqlerp = function () {
      var temp1 = create$4();
      var temp2 = create$4();
      return function (out, a, b, c, d, t) {
        slerp(temp1, a, d, t);
        slerp(temp2, b, c, t);
        slerp(out, temp1, temp2, 2 * t * (1 - t));
        return out;
      };
    }();
    /**
     * Sets the specified quaternion with values corresponding to the given
     * axes. Each axis is a vec3 and is expected to be unit length and
     * perpendicular to all other specified axes.
     *
     * @param {ReadonlyVec3} view  the vector representing the viewing direction
     * @param {ReadonlyVec3} right the vector representing the local "right" direction
     * @param {ReadonlyVec3} up    the vector representing the local "up" direction
     * @returns {quat} out
     */

    var setAxes = function () {
      var matr = create();
      return function (out, view, right, up) {
        matr[0] = right[0];
        matr[3] = right[1];
        matr[6] = right[2];
        matr[1] = up[0];
        matr[4] = up[1];
        matr[7] = up[2];
        matr[2] = -view[0];
        matr[5] = -view[1];
        matr[8] = -view[2];
        return normalize$2(out, fromMat3(out, matr));
      };
    }();

    /**
     * 2 Dimensional Vector
     * @module vec2
     */

    /**
     * Creates a new, empty vec2
     *
     * @returns {vec2} a new 2D vector
     */

    function create$5() {
      var out = new ARRAY_TYPE(2);

      if (ARRAY_TYPE != Float32Array) {
        out[0] = 0;
        out[1] = 0;
      }

      return out;
    }
    /**
     * Creates a new vec2 initialized with the given values
     *
     * @param {Number} x X component
     * @param {Number} y Y component
     * @returns {vec2} a new 2D vector
     */

    function fromValues$5(x, y) {
      var out = new ARRAY_TYPE(2);
      out[0] = x;
      out[1] = y;
      return out;
    }
    /**
     * Copy the values from one vec2 to another
     *
     * @param {vec2} out the receiving vector
     * @param {ReadonlyVec2} a the source vector
     * @returns {vec2} out
     */

    function copy$4(out, a) {
      out[0] = a[0];
      out[1] = a[1];
      return out;
    }
    /**
     * Adds two vec2's
     *
     * @param {vec2} out the receiving vector
     * @param {ReadonlyVec2} a the first operand
     * @param {ReadonlyVec2} b the second operand
     * @returns {vec2} out
     */

    function add$2(out, a, b) {
      out[0] = a[0] + b[0];
      out[1] = a[1] + b[1];
      return out;
    }
    /**
     * Subtracts vector b from vector a
     *
     * @param {vec2} out the receiving vector
     * @param {ReadonlyVec2} a the first operand
     * @param {ReadonlyVec2} b the second operand
     * @returns {vec2} out
     */

    function subtract$2(out, a, b) {
      out[0] = a[0] - b[0];
      out[1] = a[1] - b[1];
      return out;
    }
    /**
     * Returns the minimum of two vec2's
     *
     * @param {vec2} out the receiving vector
     * @param {ReadonlyVec2} a the first operand
     * @param {ReadonlyVec2} b the second operand
     * @returns {vec2} out
     */

    function min$1(out, a, b) {
      out[0] = Math.min(a[0], b[0]);
      out[1] = Math.min(a[1], b[1]);
      return out;
    }
    /**
     * Returns the maximum of two vec2's
     *
     * @param {vec2} out the receiving vector
     * @param {ReadonlyVec2} a the first operand
     * @param {ReadonlyVec2} b the second operand
     * @returns {vec2} out
     */

    function max$1(out, a, b) {
      out[0] = Math.max(a[0], b[0]);
      out[1] = Math.max(a[1], b[1]);
      return out;
    }
    /**
     * Scales a vec2 by a scalar number
     *
     * @param {vec2} out the receiving vector
     * @param {ReadonlyVec2} a the vector to scale
     * @param {Number} b amount to scale the vector by
     * @returns {vec2} out
     */

    function scale$2(out, a, b) {
      out[0] = a[0] * b;
      out[1] = a[1] * b;
      return out;
    }
    /**
     * Calculates the euclidian distance between two vec2's
     *
     * @param {ReadonlyVec2} a the first operand
     * @param {ReadonlyVec2} b the second operand
     * @returns {Number} distance between a and b
     */

    function distance(a, b) {
      var x = b[0] - a[0],
          y = b[1] - a[1];
      return Math.hypot(x, y);
    }
    /**
     * Calculates the length of a vec2
     *
     * @param {ReadonlyVec2} a vector to calculate length of
     * @returns {Number} length of a
     */

    function length$1(a) {
      var x = a[0],
          y = a[1];
      return Math.hypot(x, y);
    }
    /**
     * Normalize a vec2
     *
     * @param {vec2} out the receiving vector
     * @param {ReadonlyVec2} a vector to normalize
     * @returns {vec2} out
     */

    function normalize$3(out, a) {
      var x = a[0],
          y = a[1];
      var len = x * x + y * y;

      if (len > 0) {
        //TODO: evaluate use of glm_invsqrt here?
        len = 1 / Math.sqrt(len);
      }

      out[0] = a[0] * len;
      out[1] = a[1] * len;
      return out;
    }
    /**
     * Calculates the dot product of two vec2's
     *
     * @param {ReadonlyVec2} a the first operand
     * @param {ReadonlyVec2} b the second operand
     * @returns {Number} dot product of a and b
     */

    function dot$1(a, b) {
      return a[0] * b[0] + a[1] * b[1];
    }
    /**
     * Transforms the vec2 with a mat2d
     *
     * @param {vec2} out the receiving vector
     * @param {ReadonlyVec2} a the vector to transform
     * @param {ReadonlyMat2d} m matrix to transform with
     * @returns {vec2} out
     */

    function transformMat2d(out, a, m) {
      var x = a[0],
          y = a[1];
      out[0] = m[0] * x + m[2] * y + m[4];
      out[1] = m[1] * x + m[3] * y + m[5];
      return out;
    }
    /**
     * Get the angle between two 2D vectors
     * @param {ReadonlyVec2} a The first operand
     * @param {ReadonlyVec2} b The second operand
     * @returns {Number} The angle in radians
     */

    function angle(a, b) {
      var x1 = a[0],
          y1 = a[1],
          x2 = b[0],
          y2 = b[1],
          // mag is the product of the magnitudes of a and b
      mag = Math.sqrt(x1 * x1 + y1 * y1) * Math.sqrt(x2 * x2 + y2 * y2),
          // mag &&.. short circuits if mag == 0
      cosine = mag && (x1 * x2 + y1 * y2) / mag; // Math.min(Math.max(cosine, -1), 1) clamps the cosine between -1 and 1

      return Math.acos(Math.min(Math.max(cosine, -1), 1));
    }
    /**
     * Returns whether or not the vectors exactly have the same elements in the same position (when compared with ===)
     *
     * @param {ReadonlyVec2} a The first vector.
     * @param {ReadonlyVec2} b The second vector.
     * @returns {Boolean} True if the vectors are equal, false otherwise.
     */

    function exactEquals$1(a, b) {
      return a[0] === b[0] && a[1] === b[1];
    }
    /**
     * Alias for {@link vec2.subtract}
     * @function
     */

    var sub$1 = subtract$2;
    /**
     * Perform some operation over an array of vec2s.
     *
     * @param {Array} a the array of vectors to iterate over
     * @param {Number} stride Number of elements between the start of each vec2. If 0 assumes tightly packed
     * @param {Number} offset Number of elements to skip at the beginning of the array
     * @param {Number} count Number of vec2s to iterate over. If 0 iterates over entire array
     * @param {Function} fn Function to call for each vector in the array
     * @param {Object} [arg] additional argument to pass to fn
     * @returns {Array} a
     * @function
     */

    var forEach$2 = function () {
      var vec = create$5();
      return function (a, stride, offset, count, fn, arg) {
        var i, l;

        if (!stride) {
          stride = 2;
        }

        if (!offset) {
          offset = 0;
        }

        if (count) {
          l = Math.min(count * stride + offset, a.length);
        } else {
          l = a.length;
        }

        for (i = offset; i < l; i += stride) {
          vec[0] = a[i];
          vec[1] = a[i + 1];
          fn(vec, vec, arg);
          a[i] = vec[0];
          a[i + 1] = vec[1];
        }

        return a;
      };
    }();

    /**
     * Rounds the values of a `PathArray` instance to
     * a specified amount of decimals and returns it.
     */
    function roundPath(path, round) {
        if (round === 'off')
            return [].concat(path);
        // to round values to the power
        // the `round` value must be integer
        var pow = typeof round === 'number' && round >= 1 ? Math.pow(10, round) : 1;
        return path.map(function (pi) {
            var values = pi
                .slice(1)
                .map(Number)
                .map(function (n) { return (round ? Math.round(n * pow) / pow : Math.round(n)); });
            // @ts-ignore
            return [pi[0]].concat(values);
        });
    }

    /**
     * Returns a valid `d` attribute string value created
     * by rounding values and concatenating the `pathArray` segments.
     */
    function path2String(path, round) {
        if (round === void 0) { round = 'off'; }
        return roundPath(path, round)
            .map(function (x) { return x[0] + x.slice(1).join(' '); })
            .join('');
    }

    var paramsParser = {
        x1: 0,
        y1: 0,
        x2: 0,
        y2: 0,
        x: 0,
        y: 0,
        qx: null,
        qy: null,
    };

    function fixArc(pathArray, allPathCommands, i) {
        if (pathArray[i].length > 7) {
            pathArray[i].shift();
            var pi = pathArray[i];
            // const ni = i + 1;
            var ni = i;
            while (pi.length) {
                // if created multiple C:s, their original seg is saved
                allPathCommands[i] = 'A';
                // @ts-ignore
                pathArray.splice((ni += 1), 0, ['C'].concat(pi.splice(0, 6)));
            }
            pathArray.splice(i, 1);
        }
    }

    var paramsCount = {
        a: 7,
        c: 6,
        h: 1,
        l: 2,
        m: 2,
        r: 4,
        q: 4,
        s: 4,
        t: 2,
        v: 1,
        z: 0,
    };

    /**
     * Iterates an array to check if it's an actual `PathArray`.
     */
    function isPathArray(path) {
        return (Array.isArray(path) &&
            path.every(function (seg) {
                var lk = seg[0].toLowerCase();
                return paramsCount[lk] === seg.length - 1 && 'achlmqstvz'.includes(lk);
            }));
    }

    /**
     * Iterates an array to check if it's a `PathArray`
     * with all absolute values.
     */
    function isAbsoluteArray(path) {
        return (isPathArray(path) &&
            // @ts-ignore -- `isPathArray` also checks if it's `Array`
            path.every(function (_a) {
                var x = _a[0];
                return x === x.toUpperCase();
            }));
    }

    /**
     * Iterates an array to check if it's a `PathArray`
     * with all segments are in non-shorthand notation
     * with absolute values.
     */
    function isNormalizedArray(path) {
        return isAbsoluteArray(path) && path.every(function (_a) {
            var pc = _a[0];
            return 'ACLMQZ'.includes(pc);
        });
    }

    /**
     * Breaks the parsing of a pathString once a segment is finalized.
     */
    function finalizeSegment(path) {
        var pathCommand = path.pathValue[path.segmentStart];
        var LK = pathCommand.toLowerCase();
        var data = path.data;
        while (data.length >= paramsCount[LK]) {
            // overloaded `moveTo`
            // https://github.com/rveciana/svg-path-properties/blob/master/src/parse.ts
            if (LK === 'm' && data.length > 2) {
                // @ts-ignore
                path.segments.push([pathCommand].concat(data.splice(0, 2)));
                LK = 'l';
                pathCommand = pathCommand === 'm' ? 'l' : 'L';
            }
            else {
                // @ts-ignore
                path.segments.push([pathCommand].concat(data.splice(0, paramsCount[LK])));
            }
            if (!paramsCount[LK]) {
                break;
            }
        }
    }

    /**
     * Validates an A (arc-to) specific path command value.
     * Usually a `large-arc-flag` or `sweep-flag`.
     */
    function scanFlag(path) {
        var index = path.index, pathValue = path.pathValue;
        var code = pathValue.charCodeAt(index);
        if (code === 0x30 /* 0 */) {
            path.param = 0;
            path.index += 1;
            return;
        }
        if (code === 0x31 /* 1 */) {
            path.param = 1;
            path.index += 1;
            return;
        }
        path.err = "[path-util]: invalid Arc flag \"" + pathValue[index] + "\", expecting 0 or 1 at index " + index;
    }

    /**
     * Checks if the character is or belongs to a number.
     * [0-9]|+|-|.
     */
    function isDigitStart(code) {
        return ((code >= 48 && code <= 57) /* 0..9 */ || code === 0x2b /* + */ || code === 0x2d /* - */ || code === 0x2e); /* . */
    }
    function isDigit(code) {
        return code >= 48 && code <= 57; // 0..9
    }

    /**
     * Validates every character of the path string,
     * every path command, negative numbers or floating point numbers.
     */
    function scanParam(path) {
        var max = path.max, pathValue = path.pathValue, start = path.index;
        var index = start;
        var zeroFirst = false;
        var hasCeiling = false;
        var hasDecimal = false;
        var hasDot = false;
        var ch;
        if (index >= max) {
            // path.err = 'SvgPath: missed param (at pos ' + index + ')';
            path.err = "[path-util]: Invalid path value at index " + index + ", \"pathValue\" is missing param";
            return;
        }
        ch = pathValue.charCodeAt(index);
        if (ch === 0x2b /* + */ || ch === 0x2d /* - */) {
            index += 1;
            // ch = (index < max) ? pathValue.charCodeAt(index) : 0;
            ch = pathValue.charCodeAt(index);
        }
        // This logic is shamelessly borrowed from Esprima
        // https://github.com/ariya/esprimas
        if (!isDigit(ch) && ch !== 0x2e /* . */) {
            // path.err = 'SvgPath: param should start with 0..9 or `.` (at pos ' + index + ')';
            path.err = "[path-util]: Invalid path value at index " + index + ", \"" + pathValue[index] + "\" is not a number";
            return;
        }
        if (ch !== 0x2e /* . */) {
            zeroFirst = ch === 0x30 /* 0 */;
            index += 1;
            ch = pathValue.charCodeAt(index);
            if (zeroFirst && index < max) {
                // decimal number starts with '0' such as '09' is illegal.
                if (ch && isDigit(ch)) {
                    // path.err = 'SvgPath: numbers started with `0` such as `09`
                    // are illegal (at pos ' + start + ')';
                    path.err = "[path-util]: Invalid path value at index " + start + ", \"" + pathValue[start] + "\" illegal number";
                    return;
                }
            }
            while (index < max && isDigit(pathValue.charCodeAt(index))) {
                index += 1;
                hasCeiling = true;
            }
            ch = pathValue.charCodeAt(index);
        }
        if (ch === 0x2e /* . */) {
            hasDot = true;
            index += 1;
            while (isDigit(pathValue.charCodeAt(index))) {
                index += 1;
                hasDecimal = true;
            }
            ch = pathValue.charCodeAt(index);
        }
        if (ch === 0x65 /* e */ || ch === 0x45 /* E */) {
            if (hasDot && !hasCeiling && !hasDecimal) {
                path.err = "[path-util]: Invalid path value at index " + index + ", \"" + pathValue[index] + "\" invalid float exponent";
                return;
            }
            index += 1;
            ch = pathValue.charCodeAt(index);
            if (ch === 0x2b /* + */ || ch === 0x2d /* - */) {
                index += 1;
            }
            if (index < max && isDigit(pathValue.charCodeAt(index))) {
                while (index < max && isDigit(pathValue.charCodeAt(index))) {
                    index += 1;
                }
            }
            else {
                path.err = "[path-util]: Invalid path value at index " + index + ", \"" + pathValue[index] + "\" invalid integer exponent";
                return;
            }
        }
        path.index = index;
        path.param = +path.pathValue.slice(start, index);
    }

    /**
     * Checks if the character is a space.
     */
    function isSpace(ch) {
        var specialSpaces = [
            0x1680, 0x180e, 0x2000, 0x2001, 0x2002, 0x2003, 0x2004, 0x2005, 0x2006, 0x2007, 0x2008, 0x2009, 0x200a, 0x202f,
            0x205f, 0x3000, 0xfeff,
        ];
        /* istanbul ignore next */
        return (ch === 0x0a ||
            ch === 0x0d ||
            ch === 0x2028 ||
            ch === 0x2029 || // Line terminators
            // White spaces
            ch === 0x20 ||
            ch === 0x09 ||
            ch === 0x0b ||
            ch === 0x0c ||
            ch === 0xa0 ||
            (ch >= 0x1680 && specialSpaces.includes(ch)));
    }

    /**
     * Points the parser to the next character in the
     * path string every time it encounters any kind of
     * space character.
     */
    function skipSpaces(path) {
        var pathValue = path.pathValue, max = path.max;
        while (path.index < max && isSpace(pathValue.charCodeAt(path.index))) {
            path.index += 1;
        }
    }

    /**
     * Checks if the character is a path command.
     */
    function isPathCommand(code) {
        // eslint-disable-next-line no-bitwise -- Impossible to satisfy
        switch (code | 0x20) {
            case 0x6d /* m */:
            case 0x7a /* z */:
            case 0x6c /* l */:
            case 0x68 /* h */:
            case 0x76 /* v */:
            case 0x63 /* c */:
            case 0x73 /* s */:
            case 0x71 /* q */:
            case 0x74 /* t */:
            case 0x61 /* a */:
                // case 0x72/* r */:
                return true;
            default:
                return false;
        }
    }

    /**
     * Checks if the character is an A (arc-to) path command.
     */
    function isArcCommand(code) {
        return (code | 0x20) === 0x61;
    }

    /**
     * Scans every character in the path string to determine
     * where a segment starts and where it ends.
     */
    function scanSegment(path) {
        var max = path.max, pathValue = path.pathValue, index = path.index;
        var cmdCode = pathValue.charCodeAt(index);
        var reqParams = paramsCount[pathValue[index].toLowerCase()];
        path.segmentStart = index;
        if (!isPathCommand(cmdCode)) {
            path.err = "[path-util]: Invalid path value \"" + pathValue[index] + "\" is not a path command";
            return;
        }
        path.index += 1;
        skipSpaces(path);
        path.data = [];
        if (!reqParams) {
            // Z
            finalizeSegment(path);
            return;
        }
        for (;;) {
            for (var i = reqParams; i > 0; i -= 1) {
                if (isArcCommand(cmdCode) && (i === 3 || i === 4))
                    scanFlag(path);
                else
                    scanParam(path);
                if (path.err.length) {
                    return;
                }
                path.data.push(path.param);
                skipSpaces(path);
                // after ',' param is mandatory
                if (path.index < max && pathValue.charCodeAt(path.index) === 0x2c /* , */) {
                    path.index += 1;
                    skipSpaces(path);
                }
            }
            if (path.index >= path.max) {
                break;
            }
            // Stop on next segment
            if (!isDigitStart(pathValue.charCodeAt(path.index))) {
                break;
            }
        }
        finalizeSegment(path);
    }

    /**
     * The `PathParser` is used by the `parsePathString` static method
     * to generate a `pathArray`.
     */
    var PathParser = /** @class */ (function () {
        function PathParser(pathString) {
            this.pathValue = pathString;
            // @ts-ignore
            this.segments = [];
            this.max = pathString.length;
            this.index = 0;
            this.param = 0.0;
            this.segmentStart = 0;
            this.data = [];
            this.err = '';
        }
        return PathParser;
    }());

    /**
     * Parses a path string value and returns an array
     * of segments we like to call `pathArray`.
     */
    function parsePathString(pathInput) {
        if (isPathArray(pathInput)) {
            return [].concat(pathInput);
        }
        var path = new PathParser(pathInput);
        skipSpaces(path);
        while (path.index < path.max && !path.err.length) {
            scanSegment(path);
        }
        return path.err ? path.err : path.segments;
    }

    function path2Absolute(pathInput) {
        if (isAbsoluteArray(pathInput)) {
            return [].concat(pathInput);
        }
        var path = parsePathString(pathInput);
        // if (!path || !path.length) {
        //   return [['M', 0, 0]];
        // }
        var x = 0;
        var y = 0;
        var mx = 0;
        var my = 0;
        // @ts-ignore
        return path.map(function (segment) {
            var values = segment.slice(1).map(Number);
            var pathCommand = segment[0];
            var absCommand = pathCommand.toUpperCase();
            if (pathCommand === 'M') {
                x = values[0], y = values[1];
                mx = x;
                my = y;
                return ['M', x, y];
            }
            var absoluteSegment;
            if (pathCommand !== absCommand) {
                switch (absCommand) {
                    case 'A':
                        absoluteSegment = [
                            absCommand,
                            values[0],
                            values[1],
                            values[2],
                            values[3],
                            values[4],
                            values[5] + x,
                            values[6] + y,
                        ];
                        break;
                    case 'V':
                        absoluteSegment = [absCommand, values[0] + y];
                        break;
                    case 'H':
                        absoluteSegment = [absCommand, values[0] + x];
                        break;
                    default: {
                        // use brakets for `eslint: no-case-declaration`
                        // https://stackoverflow.com/a/50753272/803358
                        var absValues = values.map(function (n, j) { return n + (j % 2 ? y : x); });
                        // for n, l, c, s, q, t
                        // @ts-ignore
                        absoluteSegment = [absCommand].concat(absValues);
                    }
                }
            }
            else {
                // @ts-ignore
                absoluteSegment = [absCommand].concat(values);
            }
            var segLength = absoluteSegment.length;
            switch (absCommand) {
                case 'Z':
                    x = mx;
                    y = my;
                    break;
                case 'H':
                    x = absoluteSegment[1];
                    break;
                case 'V':
                    y = absoluteSegment[1];
                    break;
                default:
                    x = absoluteSegment[segLength - 2];
                    y = absoluteSegment[segLength - 1];
                    if (absCommand === 'M') {
                        mx = x;
                        my = y;
                    }
            }
            return absoluteSegment;
        });
    }

    /**
     * Normalizes a single segment of a `PathArray` object.
     * eg. H/V -> L, T -> Q
     */
    function normalizeSegment(segment, params) {
        var pathCommand = segment[0];
        var px1 = params.x1, py1 = params.y1, px2 = params.x2, py2 = params.y2;
        var values = segment.slice(1).map(Number);
        var result = segment;
        if (!'TQ'.includes(pathCommand)) {
            // optional but good to be cautious
            params.qx = null;
            params.qy = null;
        }
        if (pathCommand === 'H') {
            result = ['L', segment[1], py1];
        }
        else if (pathCommand === 'V') {
            result = ['L', px1, segment[1]];
        }
        else if (pathCommand === 'S') {
            var x1 = px1 * 2 - px2;
            var y1 = py1 * 2 - py2;
            params.x1 = x1;
            params.y1 = y1;
            result = ['C', x1, y1].concat(values);
        }
        else if (pathCommand === 'T') {
            var qx = px1 * 2 - params.qx;
            var qy = py1 * 2 - params.qy;
            params.qx = qx;
            params.qy = qy;
            result = ['Q', qx, qy].concat(values);
        }
        else if (pathCommand === 'Q') {
            var nqx = values[0], nqy = values[1];
            params.qx = nqx;
            params.qy = nqy;
        }
        return result;
    }

    /**
     * @example
     * const path = 'M0 0 H50';
     * const normalizedPath = SVGPathCommander.normalizePath(path);
     * // result => [['M', 0, 0], ['L', 50, 0]]
     */
    function normalizePath(pathInput) {
        if (isNormalizedArray(pathInput)) {
            return [].concat(pathInput);
        }
        var path = path2Absolute(pathInput);
        var params = __assign({}, paramsParser);
        for (var i = 0; i < path.length; i += 1) {
            // Save current path command
            path[i] = normalizeSegment(path[i], params);
            var segment = path[i];
            var seglen = segment.length;
            params.x1 = +segment[seglen - 2];
            params.y1 = +segment[seglen - 1];
            params.x2 = +segment[seglen - 4] || params.x1;
            params.y2 = +segment[seglen - 3] || params.y1;
        }
        return path;
    }

    /**
     * Iterates an array to check if it's a `PathArray`
     * with all C (cubic bezier) segments.
     *
     * @param {string | PathArray} path the `Array` to be checked
     * @returns {boolean} iteration result
     */
    function isCurveArray(path) {
        return isNormalizedArray(path) && path.every(function (_a) {
            var pc = _a[0];
            return 'MC'.includes(pc);
        });
    }

    function rotateVector(x, y, rad) {
        var X = x * Math.cos(rad) - y * Math.sin(rad);
        var Y = x * Math.sin(rad) + y * Math.cos(rad);
        return { x: X, y: Y };
    }

    /**
     * Converts A (arc-to) segments to C (cubic-bezier-to).
     *
     * For more information of where this math came from visit:
     * http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
     */
    function arcToCubic(X1, Y1, RX, RY, angle, LAF, SF, X2, Y2, recursive) {
        var x1 = X1;
        var y1 = Y1;
        var rx = RX;
        var ry = RY;
        var x2 = X2;
        var y2 = Y2;
        // for more information of where this Math came from visit:
        // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
        var d120 = (Math.PI * 120) / 180;
        var rad = (Math.PI / 180) * (+angle || 0);
        /** @type {number[]} */
        var res = [];
        var xy;
        var f1;
        var f2;
        var cx;
        var cy;
        if (!recursive) {
            xy = rotateVector(x1, y1, -rad);
            x1 = xy.x;
            y1 = xy.y;
            xy = rotateVector(x2, y2, -rad);
            x2 = xy.x;
            y2 = xy.y;
            var x = (x1 - x2) / 2;
            var y = (y1 - y2) / 2;
            var h = (x * x) / (rx * rx) + (y * y) / (ry * ry);
            if (h > 1) {
                h = Math.sqrt(h);
                rx *= h;
                ry *= h;
            }
            var rx2 = rx * rx;
            var ry2 = ry * ry;
            var k = (LAF === SF ? -1 : 1) *
                Math.sqrt(Math.abs((rx2 * ry2 - rx2 * y * y - ry2 * x * x) / (rx2 * y * y + ry2 * x * x)));
            cx = (k * rx * y) / ry + (x1 + x2) / 2;
            cy = (k * -ry * x) / rx + (y1 + y2) / 2;
            // eslint-disable-next-line no-bitwise -- Impossible to satisfy no-bitwise
            f1 = Math.asin(((((y1 - cy) / ry) * Math.pow(10, 9)) >> 0) / Math.pow(10, 9));
            // eslint-disable-next-line no-bitwise -- Impossible to satisfy no-bitwise
            f2 = Math.asin(((((y2 - cy) / ry) * Math.pow(10, 9)) >> 0) / Math.pow(10, 9));
            f1 = x1 < cx ? Math.PI - f1 : f1;
            f2 = x2 < cx ? Math.PI - f2 : f2;
            if (f1 < 0)
                f1 = Math.PI * 2 + f1;
            if (f2 < 0)
                f2 = Math.PI * 2 + f2;
            if (SF && f1 > f2) {
                f1 -= Math.PI * 2;
            }
            if (!SF && f2 > f1) {
                f2 -= Math.PI * 2;
            }
        }
        else {
            f1 = recursive[0], f2 = recursive[1], cx = recursive[2], cy = recursive[3];
        }
        var df = f2 - f1;
        if (Math.abs(df) > d120) {
            var f2old = f2;
            var x2old = x2;
            var y2old = y2;
            f2 = f1 + d120 * (SF && f2 > f1 ? 1 : -1);
            x2 = cx + rx * Math.cos(f2);
            y2 = cy + ry * Math.sin(f2);
            res = arcToCubic(x2, y2, rx, ry, angle, 0, SF, x2old, y2old, [f2, f2old, cx, cy]);
        }
        df = f2 - f1;
        var c1 = Math.cos(f1);
        var s1 = Math.sin(f1);
        var c2 = Math.cos(f2);
        var s2 = Math.sin(f2);
        var t = Math.tan(df / 4);
        var hx = (4 / 3) * rx * t;
        var hy = (4 / 3) * ry * t;
        var m1 = [x1, y1];
        var m2 = [x1 + hx * s1, y1 - hy * c1];
        var m3 = [x2 + hx * s2, y2 - hy * c2];
        var m4 = [x2, y2];
        m2[0] = 2 * m1[0] - m2[0];
        m2[1] = 2 * m1[1] - m2[1];
        if (recursive) {
            return m2.concat(m3, m4, res);
            // return [...m2, ...m3, ...m4, ...res];
        }
        res = m2.concat(m3, m4, res);
        // res = [...m2, ...m3, ...m4, ...res];
        var newres = [];
        for (var i = 0, ii = res.length; i < ii; i += 1) {
            newres[i] = i % 2 ? rotateVector(res[i - 1], res[i], rad).y : rotateVector(res[i], res[i + 1], rad).x;
        }
        return newres;
    }
    // const TAU = Math.PI * 2;
    // const mapToEllipse = (
    //   { x, y }: { x: number; y: number },
    //   rx: number,
    //   ry: number,
    //   cosphi: number,
    //   sinphi: number,
    //   centerx: number,
    //   centery: number,
    // ) => {
    //   x *= rx;
    //   y *= ry;
    //   const xp = cosphi * x - sinphi * y;
    //   const yp = sinphi * x + cosphi * y;
    //   return {
    //     x: xp + centerx,
    //     y: yp + centery,
    //   };
    // };
    // const approxUnitArc = (ang1: number, ang2: number) => {
    //   // If 90 degree circular arc, use a constant
    //   // as derived from http://spencermortensen.com/articles/bezier-circle
    //   const a =
    //     ang2 === 1.5707963267948966
    //       ? 0.551915024494
    //       : ang2 === -1.5707963267948966
    //       ? -0.551915024494
    //       : (4 / 3) * Math.tan(ang2 / 4);
    //   const x1 = Math.cos(ang1);
    //   const y1 = Math.sin(ang1);
    //   const x2 = Math.cos(ang1 + ang2);
    //   const y2 = Math.sin(ang1 + ang2);
    //   return [
    //     {
    //       x: x1 - y1 * a,
    //       y: y1 + x1 * a,
    //     },
    //     {
    //       x: x2 + y2 * a,
    //       y: y2 - x2 * a,
    //     },
    //     {
    //       x: x2,
    //       y: y2,
    //     },
    //   ];
    // };
    // const vectorAngle = (ux: number, uy: number, vx: number, vy: number) => {
    //   const sign = ux * vy - uy * vx < 0 ? -1 : 1;
    //   let dot = ux * vx + uy * vy;
    //   if (dot > 1) {
    //     dot = 1;
    //   }
    //   if (dot < -1) {
    //     dot = -1;
    //   }
    //   return sign * Math.acos(dot);
    // };
    // const getArcCenter = (
    //   px: any,
    //   py: any,
    //   cx: any,
    //   cy: any,
    //   rx: number,
    //   ry: number,
    //   largeArcFlag: number,
    //   sweepFlag: number,
    //   sinphi: number,
    //   cosphi: number,
    //   pxp: number,
    //   pyp: number,
    // ) => {
    //   const rxsq = Math.pow(rx, 2);
    //   const rysq = Math.pow(ry, 2);
    //   const pxpsq = Math.pow(pxp, 2);
    //   const pypsq = Math.pow(pyp, 2);
    //   let radicant = rxsq * rysq - rxsq * pypsq - rysq * pxpsq;
    //   if (radicant < 0) {
    //     radicant = 0;
    //   }
    //   radicant /= rxsq * pypsq + rysq * pxpsq;
    //   radicant = Math.sqrt(radicant) * (largeArcFlag === sweepFlag ? -1 : 1);
    //   const centerxp = ((radicant * rx) / ry) * pyp;
    //   const centeryp = ((radicant * -ry) / rx) * pxp;
    //   const centerx = cosphi * centerxp - sinphi * centeryp + (px + cx) / 2;
    //   const centery = sinphi * centerxp + cosphi * centeryp + (py + cy) / 2;
    //   const vx1 = (pxp - centerxp) / rx;
    //   const vy1 = (pyp - centeryp) / ry;
    //   const vx2 = (-pxp - centerxp) / rx;
    //   const vy2 = (-pyp - centeryp) / ry;
    //   const ang1 = vectorAngle(1, 0, vx1, vy1);
    //   let ang2 = vectorAngle(vx1, vy1, vx2, vy2);
    //   if (sweepFlag === 0 && ang2 > 0) {
    //     ang2 -= TAU;
    //   }
    //   if (sweepFlag === 1 && ang2 < 0) {
    //     ang2 += TAU;
    //   }
    //   return [centerx, centery, ang1, ang2];
    // };
    // const arcToBezier = ({ px, py, cx, cy, rx, ry, xAxisRotation = 0, largeArcFlag = 0, sweepFlag = 0 }) => {
    //   const curves = [];
    //   if (rx === 0 || ry === 0) {
    //     return [{ x1: 0, y1: 0, x2: 0, y2: 0, x: cx, y: cy }];
    //   }
    //   const sinphi = Math.sin((xAxisRotation * TAU) / 360);
    //   const cosphi = Math.cos((xAxisRotation * TAU) / 360);
    //   const pxp = (cosphi * (px - cx)) / 2 + (sinphi * (py - cy)) / 2;
    //   const pyp = (-sinphi * (px - cx)) / 2 + (cosphi * (py - cy)) / 2;
    //   if (pxp === 0 && pyp === 0) {
    //     return [{ x1: 0, y1: 0, x2: 0, y2: 0, x: cx, y: cy }];
    //   }
    //   rx = Math.abs(rx);
    //   ry = Math.abs(ry);
    //   const lambda = Math.pow(pxp, 2) / Math.pow(rx, 2) + Math.pow(pyp, 2) / Math.pow(ry, 2);
    //   if (lambda > 1) {
    //     rx *= Math.sqrt(lambda);
    //     ry *= Math.sqrt(lambda);
    //   }
    //   let [centerx, centery, ang1, ang2] = getArcCenter(
    //     px,
    //     py,
    //     cx,
    //     cy,
    //     rx,
    //     ry,
    //     largeArcFlag,
    //     sweepFlag,
    //     sinphi,
    //     cosphi,
    //     pxp,
    //     pyp,
    //   );
    //   // If 'ang2' == 90.0000000001, then `ratio` will evaluate to
    //   // 1.0000000001. This causes `segments` to be greater than one, which is an
    //   // unecessary split, and adds extra points to the bezier curve. To alleviate
    //   // this issue, we round to 1.0 when the ratio is close to 1.0.
    //   let ratio = Math.abs(ang2) / (TAU / 4);
    //   if (Math.abs(1.0 - ratio) < 0.0000001) {
    //     ratio = 1.0;
    //   }
    //   const segments = Math.max(Math.ceil(ratio), 1);
    //   ang2 /= segments;
    //   for (let i = 0; i < segments; i++) {
    //     curves.push(approxUnitArc(ang1, ang2));
    //     ang1 += ang2;
    //   }
    //   return curves.map((curve) => {
    //     const { x: x1, y: y1 } = mapToEllipse(curve[0], rx, ry, cosphi, sinphi, centerx, centery);
    //     const { x: x2, y: y2 } = mapToEllipse(curve[1], rx, ry, cosphi, sinphi, centerx, centery);
    //     const { x, y } = mapToEllipse(curve[2], rx, ry, cosphi, sinphi, centerx, centery);
    //     return { x1, y1, x2, y2, x, y };
    //   });
    // };
    // export function arcToCubic(
    //   x1: number,
    //   y1: number,
    //   rx: number,
    //   ry: number,
    //   angle: number,
    //   LAF: number,
    //   SF: number,
    //   x2: number,
    //   y2: number,
    // ) {
    //   const curves = arcToBezier({
    //     px: x1,
    //     py: y1,
    //     cx: x2,
    //     cy: y2,
    //     rx,
    //     ry,
    //     xAxisRotation: angle,
    //     largeArcFlag: LAF,
    //     sweepFlag: SF,
    //   });
    //   return curves.reduce((prev, cur) => {
    //     const { x1, y1, x2, y2, x, y } = cur;
    //     prev.push(x1, y1, x2, y2, x, y);
    //     return prev;
    //   }, [] as number[]);
    // }

    function quadToCubic(x1, y1, qx, qy, x2, y2) {
        var r13 = 1 / 3;
        var r23 = 2 / 3;
        return [
            r13 * x1 + r23 * qx,
            r13 * y1 + r23 * qy,
            r13 * x2 + r23 * qx,
            r13 * y2 + r23 * qy,
            x2,
            y2, // x,y
        ];
    }

    function midPoint(a, b, t) {
        var ax = a[0];
        var ay = a[1];
        var bx = b[0];
        var by = b[1];
        return [ax + (bx - ax) * t, ay + (by - ay) * t];
    }

    var lineToCubic = function (x1, y1, x2, y2) {
        var t = 0.5;
        var mid = midPoint([x1, y1], [x2, y2], t);
        return __spreadArray(__spreadArray([], mid, true), [x2, y2, x2, y2], false);
    };

    function segmentToCubic(segment, params) {
        var pathCommand = segment[0];
        var values = segment.slice(1).map(Number);
        var x = values[0], y = values[1];
        var args;
        var px1 = params.x1, py1 = params.y1, px = params.x, py = params.y;
        if (!'TQ'.includes(pathCommand)) {
            params.qx = null;
            params.qy = null;
        }
        switch (pathCommand) {
            case 'M':
                params.x = x;
                params.y = y;
                return segment;
            case 'A':
                args = [px1, py1].concat(values);
                // @ts-ignore
                return ['C'].concat(arcToCubic(args[0], args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8], args[9]));
            case 'Q':
                params.qx = x;
                params.qy = y;
                args = [px1, py1].concat(values);
                // @ts-ignore
                return ['C'].concat(quadToCubic(args[0], args[1], args[2], args[3], args[4], args[5]));
            case 'L':
                // @ts-ignore
                return ['C'].concat(lineToCubic(px1, py1, x, y));
            case 'Z':
                // prevent NaN from divide 0
                if (px1 === px && py1 === py) {
                    return ['C', px1, py1, px, py, px, py];
                }
                // @ts-ignore
                return ['C'].concat(lineToCubic(px1, py1, px, py));
        }
        return segment;
    }

    // import { fixPath } from '../process/fix-path';
    function path2Curve(pathInput, needZCommandIndexes) {
        if (needZCommandIndexes === void 0) { needZCommandIndexes = false; }
        if (isCurveArray(pathInput)) {
            var cloned = [].concat(pathInput);
            if (needZCommandIndexes) {
                return [cloned, []];
            }
            else {
                return cloned;
            }
        }
        // fixPath will remove 'Z' command
        // const path = fixPath(normalizePath(pathInput));
        var path = normalizePath(pathInput);
        var params = __assign({}, paramsParser);
        var allPathCommands = [];
        var pathCommand = '';
        var ii = path.length;
        var segment;
        var seglen;
        var zCommandIndexes = [];
        for (var i = 0; i < ii; i += 1) {
            if (path[i])
                pathCommand = path[i][0];
            allPathCommands[i] = pathCommand;
            var curveSegment = segmentToCubic(path[i], params);
            path[i] = curveSegment;
            fixArc(path, allPathCommands, i);
            ii = path.length; // solves curveArrays ending in Z
            // keep Z command account for lineJoin
            // @see https://github.com/antvis/util/issues/68
            if (pathCommand === 'Z') {
                zCommandIndexes.push(i);
            }
            segment = path[i];
            seglen = segment.length;
            params.x1 = +segment[seglen - 2];
            params.y1 = +segment[seglen - 1];
            params.x2 = +segment[seglen - 4] || params.x1;
            params.y2 = +segment[seglen - 3] || params.y1;
        }
        // validate
        if (needZCommandIndexes) {
            return [path, zCommandIndexes];
        }
        else {
            return path;
        }
    }

    function clonePath(path) {
        return path.map(function (x) { return (Array.isArray(x) ? [].concat(x) : x); });
    }

    // reverse CURVE based pathArray segments only
    function reverseCurve(pathArray) {
        var rotatedCurve = pathArray
            .slice(1)
            .map(function (x, i, curveOnly) {
            // @ts-ignore
            return !i ? pathArray[0].slice(1).concat(x.slice(1)) : curveOnly[i - 1].slice(-2).concat(x.slice(1));
        })
            // @ts-ignore
            .map(function (x) { return x.map(function (y, i) { return x[x.length - i - 2 * (1 - (i % 2))]; }); })
            .reverse();
        return [['M'].concat(rotatedCurve[0].slice(0, 2))].concat(rotatedCurve.map(function (x) { return ['C'].concat(x.slice(2)); }));
    }

    function distanceSquareRoot(a, b) {
        return Math.sqrt((a[0] - b[0]) * (a[0] - b[0]) + (a[1] - b[1]) * (a[1] - b[1]));
    }

    /**
     * Returns a {x,y} point at a given length, the total length and
     * the minimum and maximum {x,y} coordinates of a line (L,V,H,Z) segment.
     */
    function segmentLineFactory(x1, y1, x2, y2, distance) {
        var length = distanceSquareRoot([x1, y1], [x2, y2]);
        var point = { x: 0, y: 0 };
        if (typeof distance === 'number') {
            if (distance <= 0) {
                point = { x: x1, y: y1 };
            }
            else if (distance >= length) {
                point = { x: x2, y: y2 };
            }
            else {
                var _a = midPoint([x1, y1], [x2, y2], distance / length), x = _a[0], y = _a[1];
                point = { x: x, y: y };
            }
        }
        return {
            length: length,
            point: point,
            min: {
                x: Math.min(x1, x2),
                y: Math.min(y1, y2),
            },
            max: {
                x: Math.max(x1, x2),
                y: Math.max(y1, y2),
            },
        };
    }

    function angleBetween(v0, v1) {
        var v0x = v0.x, v0y = v0.y;
        var v1x = v1.x, v1y = v1.y;
        var p = v0x * v1x + v0y * v1y;
        var n = Math.sqrt((Math.pow(v0x, 2) + Math.pow(v0y, 2)) * (Math.pow(v1x, 2) + Math.pow(v1y, 2)));
        var sign = v0x * v1y - v0y * v1x < 0 ? -1 : 1;
        var angle = sign * Math.acos(p / n);
        return angle;
    }
    /**
     * Returns a {x,y} point at a given length, the total length and
     * the minimum and maximum {x,y} coordinates of a C (cubic-bezier) segment.
     * @see https://github.com/MadLittleMods/svg-curve-lib/blob/master/src/js/svg-curve-lib.js
     */
    function getPointAtArcSegmentLength(x1, y1, RX, RY, angle, LAF, SF, x, y, t) {
        var abs = Math.abs, sin = Math.sin, cos = Math.cos, sqrt = Math.sqrt, PI = Math.PI;
        var rx = abs(RX);
        var ry = abs(RY);
        var xRot = ((angle % 360) + 360) % 360;
        var xRotRad = xRot * (PI / 180);
        if (x1 === x && y1 === y) {
            return { x: x1, y: y1 };
        }
        if (rx === 0 || ry === 0) {
            return segmentLineFactory(x1, y1, x, y, t).point;
        }
        var dx = (x1 - x) / 2;
        var dy = (y1 - y) / 2;
        var transformedPoint = {
            x: cos(xRotRad) * dx + sin(xRotRad) * dy,
            y: -sin(xRotRad) * dx + cos(xRotRad) * dy,
        };
        var radiiCheck = Math.pow(transformedPoint.x, 2) / Math.pow(rx, 2) + Math.pow(transformedPoint.y, 2) / Math.pow(ry, 2);
        if (radiiCheck > 1) {
            rx *= sqrt(radiiCheck);
            ry *= sqrt(radiiCheck);
        }
        var cSquareNumerator = Math.pow(rx, 2) * Math.pow(ry, 2) - Math.pow(rx, 2) * Math.pow(transformedPoint.y, 2) - Math.pow(ry, 2) * Math.pow(transformedPoint.x, 2);
        var cSquareRootDenom = Math.pow(rx, 2) * Math.pow(transformedPoint.y, 2) + Math.pow(ry, 2) * Math.pow(transformedPoint.x, 2);
        var cRadicand = cSquareNumerator / cSquareRootDenom;
        cRadicand = cRadicand < 0 ? 0 : cRadicand;
        var cCoef = (LAF !== SF ? 1 : -1) * sqrt(cRadicand);
        var transformedCenter = {
            x: cCoef * ((rx * transformedPoint.y) / ry),
            y: cCoef * (-(ry * transformedPoint.x) / rx),
        };
        var center = {
            x: cos(xRotRad) * transformedCenter.x - sin(xRotRad) * transformedCenter.y + (x1 + x) / 2,
            y: sin(xRotRad) * transformedCenter.x + cos(xRotRad) * transformedCenter.y + (y1 + y) / 2,
        };
        var startVector = {
            x: (transformedPoint.x - transformedCenter.x) / rx,
            y: (transformedPoint.y - transformedCenter.y) / ry,
        };
        var startAngle = angleBetween({ x: 1, y: 0 }, startVector);
        var endVector = {
            x: (-transformedPoint.x - transformedCenter.x) / rx,
            y: (-transformedPoint.y - transformedCenter.y) / ry,
        };
        var sweepAngle = angleBetween(startVector, endVector);
        if (!SF && sweepAngle > 0) {
            sweepAngle -= 2 * PI;
        }
        else if (SF && sweepAngle < 0) {
            sweepAngle += 2 * PI;
        }
        sweepAngle %= 2 * PI;
        var alpha = startAngle + sweepAngle * t;
        var ellipseComponentX = rx * cos(alpha);
        var ellipseComponentY = ry * sin(alpha);
        var point = {
            x: cos(xRotRad) * ellipseComponentX - sin(xRotRad) * ellipseComponentY + center.x,
            y: sin(xRotRad) * ellipseComponentX + cos(xRotRad) * ellipseComponentY + center.y,
        };
        // to be used later
        // point.ellipticalArcStartAngle = startAngle;
        // point.ellipticalArcEndAngle = startAngle + sweepAngle;
        // point.ellipticalArcAngle = alpha;
        // point.ellipticalArcCenter = center;
        // point.resultantRx = rx;
        // point.resultantRy = ry;
        return point;
    }
    /**
     * Returns a {x,y} point at a given length, the total length and
     * the shape minimum and maximum {x,y} coordinates of an A (arc-to) segment.
     *
     * For better performance, it can skip calculate bbox or length in some scenario.
     */
    function segmentArcFactory(X1, Y1, RX, RY, angle, LAF, SF, X2, Y2, distance, options) {
        var _a;
        var _b = options.bbox, bbox = _b === void 0 ? true : _b, _c = options.length, length = _c === void 0 ? true : _c, _d = options.sampleSize, sampleSize = _d === void 0 ? 30 : _d;
        var distanceIsNumber = typeof distance === 'number';
        var x = X1;
        var y = Y1;
        var LENGTH = 0;
        var prev = [x, y, LENGTH];
        var cur = [x, y];
        var t = 0;
        var POINT = { x: 0, y: 0 };
        var POINTS = [{ x: x, y: y }];
        if (distanceIsNumber && distance <= 0) {
            POINT = { x: x, y: y };
        }
        // bad perf when size > 100
        for (var j = 0; j <= sampleSize; j += 1) {
            t = j / sampleSize;
            (_a = getPointAtArcSegmentLength(X1, Y1, RX, RY, angle, LAF, SF, X2, Y2, t), x = _a.x, y = _a.y);
            if (bbox) {
                POINTS.push({ x: x, y: y });
            }
            if (length) {
                LENGTH += distanceSquareRoot(cur, [x, y]);
            }
            cur = [x, y];
            if (distanceIsNumber && LENGTH >= distance && distance > prev[2]) {
                var dv = (LENGTH - distance) / (LENGTH - prev[2]);
                POINT = {
                    x: cur[0] * (1 - dv) + prev[0] * dv,
                    y: cur[1] * (1 - dv) + prev[1] * dv,
                };
            }
            prev = [x, y, LENGTH];
        }
        if (distanceIsNumber && distance >= LENGTH) {
            POINT = { x: X2, y: Y2 };
        }
        return {
            length: LENGTH,
            point: POINT,
            min: {
                x: Math.min.apply(null, POINTS.map(function (n) { return n.x; })),
                y: Math.min.apply(null, POINTS.map(function (n) { return n.y; })),
            },
            max: {
                x: Math.max.apply(null, POINTS.map(function (n) { return n.x; })),
                y: Math.max.apply(null, POINTS.map(function (n) { return n.y; })),
            },
        };
    }

    /**
     * Returns a {x,y} point at a given length, the total length and
     * the minimum and maximum {x,y} coordinates of a C (cubic-bezier) segment.
     */
    function getPointAtCubicSegmentLength(x1, y1, c1x, c1y, c2x, c2y, x2, y2, t) {
        var t1 = 1 - t;
        return {
            x: Math.pow(t1, 3) * x1 + 3 * Math.pow(t1, 2) * t * c1x + 3 * t1 * Math.pow(t, 2) * c2x + Math.pow(t, 3) * x2,
            y: Math.pow(t1, 3) * y1 + 3 * Math.pow(t1, 2) * t * c1y + 3 * t1 * Math.pow(t, 2) * c2y + Math.pow(t, 3) * y2,
        };
    }
    /**
     * Returns the length of a C (cubic-bezier) segment
     * or an {x,y} point at a given length.
     */
    function segmentCubicFactory(x1, y1, c1x, c1y, c2x, c2y, x2, y2, distance, options) {
        var _a;
        var _b = options.bbox, bbox = _b === void 0 ? true : _b, _c = options.length, length = _c === void 0 ? true : _c, _d = options.sampleSize, sampleSize = _d === void 0 ? 10 : _d;
        var distanceIsNumber = typeof distance === 'number';
        var x = x1;
        var y = y1;
        var LENGTH = 0;
        var prev = [x, y, LENGTH];
        var cur = [x, y];
        var t = 0;
        var POINT = { x: 0, y: 0 };
        var POINTS = [{ x: x, y: y }];
        if (distanceIsNumber && distance <= 0) {
            POINT = { x: x, y: y };
        }
        // bad perf when size = 300
        for (var j = 0; j <= sampleSize; j += 1) {
            t = j / sampleSize;
            (_a = getPointAtCubicSegmentLength(x1, y1, c1x, c1y, c2x, c2y, x2, y2, t), x = _a.x, y = _a.y);
            if (bbox) {
                POINTS.push({ x: x, y: y });
            }
            if (length) {
                LENGTH += distanceSquareRoot(cur, [x, y]);
            }
            cur = [x, y];
            if (distanceIsNumber && LENGTH >= distance && distance > prev[2]) {
                var dv = (LENGTH - distance) / (LENGTH - prev[2]);
                POINT = {
                    x: cur[0] * (1 - dv) + prev[0] * dv,
                    y: cur[1] * (1 - dv) + prev[1] * dv,
                };
            }
            prev = [x, y, LENGTH];
        }
        if (distanceIsNumber && distance >= LENGTH) {
            POINT = { x: x2, y: y2 };
        }
        return {
            length: LENGTH,
            point: POINT,
            min: {
                x: Math.min.apply(null, POINTS.map(function (n) { return n.x; })),
                y: Math.min.apply(null, POINTS.map(function (n) { return n.y; })),
            },
            max: {
                x: Math.max.apply(null, POINTS.map(function (n) { return n.x; })),
                y: Math.max.apply(null, POINTS.map(function (n) { return n.y; })),
            },
        };
    }

    /**
     * Returns the {x,y} coordinates of a point at a
     * given length of a quadratic-bezier segment.
     *
     * @see https://github.com/substack/point-at-length
     */
    function getPointAtQuadSegmentLength(x1, y1, cx, cy, x2, y2, t) {
        var t1 = 1 - t;
        return {
            x: Math.pow(t1, 2) * x1 + 2 * t1 * t * cx + Math.pow(t, 2) * x2,
            y: Math.pow(t1, 2) * y1 + 2 * t1 * t * cy + Math.pow(t, 2) * y2,
        };
    }
    /**
     * Returns a {x,y} point at a given length, the total length and
     * the minimum and maximum {x,y} coordinates of a Q (quadratic-bezier) segment.
     */
    function segmentQuadFactory(x1, y1, qx, qy, x2, y2, distance, options) {
        var _a;
        var _b = options.bbox, bbox = _b === void 0 ? true : _b, _c = options.length, length = _c === void 0 ? true : _c, _d = options.sampleSize, sampleSize = _d === void 0 ? 10 : _d;
        var distanceIsNumber = typeof distance === 'number';
        var x = x1;
        var y = y1;
        var LENGTH = 0;
        var prev = [x, y, LENGTH];
        var cur = [x, y];
        var t = 0;
        var POINT = { x: 0, y: 0 };
        var POINTS = [{ x: x, y: y }];
        if (distanceIsNumber && distance <= 0) {
            POINT = { x: x, y: y };
        }
        for (var j = 0; j <= sampleSize; j += 1) {
            t = j / sampleSize;
            (_a = getPointAtQuadSegmentLength(x1, y1, qx, qy, x2, y2, t), x = _a.x, y = _a.y);
            if (bbox) {
                POINTS.push({ x: x, y: y });
            }
            if (length) {
                LENGTH += distanceSquareRoot(cur, [x, y]);
            }
            cur = [x, y];
            if (distanceIsNumber && LENGTH >= distance && distance > prev[2]) {
                var dv = (LENGTH - distance) / (LENGTH - prev[2]);
                POINT = {
                    x: cur[0] * (1 - dv) + prev[0] * dv,
                    y: cur[1] * (1 - dv) + prev[1] * dv,
                };
            }
            prev = [x, y, LENGTH];
        }
        /* istanbul ignore else */
        if (distanceIsNumber && distance >= LENGTH) {
            POINT = { x: x2, y: y2 };
        }
        return {
            length: LENGTH,
            point: POINT,
            min: {
                x: Math.min.apply(null, POINTS.map(function (n) { return n.x; })),
                y: Math.min.apply(null, POINTS.map(function (n) { return n.y; })),
            },
            max: {
                x: Math.max.apply(null, POINTS.map(function (n) { return n.x; })),
                y: Math.max.apply(null, POINTS.map(function (n) { return n.y; })),
            },
        };
    }

    /**
     * Returns a {x,y} point at a given length
     * of a shape, the shape total length and
     * the shape minimum and maximum {x,y} coordinates.
     */
    function pathLengthFactory(pathInput, distance, options) {
        var _a, _b, _c, _d, _e, _f;
        var path = normalizePath(pathInput);
        var distanceIsNumber = typeof distance === 'number';
        var isM;
        var data = [];
        var pathCommand;
        var x = 0;
        var y = 0;
        var mx = 0;
        var my = 0;
        var seg;
        var MIN = [];
        var MAX = [];
        var length = 0;
        var min = { x: 0, y: 0 };
        var max = min;
        var point = min;
        var POINT = min;
        var LENGTH = 0;
        for (var i = 0, ll = path.length; i < ll; i += 1) {
            seg = path[i];
            pathCommand = seg[0];
            isM = pathCommand === 'M';
            data = !isM ? [x, y].concat(seg.slice(1)) : data;
            // this segment is always ZERO
            /* istanbul ignore else */
            if (isM) {
                // remember mx, my for Z
                mx = seg[1], my = seg[2];
                min = { x: mx, y: my };
                max = min;
                length = 0;
                if (distanceIsNumber && distance < 0.001) {
                    POINT = min;
                }
            }
            else if (pathCommand === 'L') {
                (_a = segmentLineFactory(data[0], data[1], data[2], data[3], (distance || 0) - LENGTH), length = _a.length, min = _a.min, max = _a.max, point = _a.point);
            }
            else if (pathCommand === 'A') {
                (_b = segmentArcFactory(data[0], data[1], data[2], data[3], data[4], data[5], data[6], data[7], data[8], (distance || 0) - LENGTH, options || {}), length = _b.length, min = _b.min, max = _b.max, point = _b.point);
            }
            else if (pathCommand === 'C') {
                (_c = segmentCubicFactory(data[0], data[1], data[2], data[3], data[4], data[5], data[6], data[7], (distance || 0) - LENGTH, options || {}), length = _c.length, min = _c.min, max = _c.max, point = _c.point);
            }
            else if (pathCommand === 'Q') {
                (_d = segmentQuadFactory(data[0], data[1], data[2], data[3], data[4], data[5], (distance || 0) - LENGTH, options || {}), length = _d.length, min = _d.min, max = _d.max, point = _d.point);
            }
            else if (pathCommand === 'Z') {
                data = [x, y, mx, my];
                (_e = segmentLineFactory(data[0], data[1], data[2], data[3], (distance || 0) - LENGTH), length = _e.length, min = _e.min, max = _e.max, point = _e.point);
            }
            if (distanceIsNumber && LENGTH < distance && LENGTH + length >= distance) {
                POINT = point;
            }
            MAX.push(max);
            MIN.push(min);
            LENGTH += length;
            _f = pathCommand !== 'Z' ? seg.slice(-2) : [mx, my], x = _f[0], y = _f[1];
        }
        // native `getPointAtLength` behavior when the given distance
        // is higher than total length
        if (distanceIsNumber && distance >= LENGTH) {
            POINT = { x: x, y: y };
        }
        return {
            length: LENGTH,
            point: POINT,
            min: {
                x: Math.min.apply(null, MIN.map(function (n) { return n.x; })),
                y: Math.min.apply(null, MIN.map(function (n) { return n.y; })),
            },
            max: {
                x: Math.max.apply(null, MAX.map(function (n) { return n.x; })),
                y: Math.max.apply(null, MAX.map(function (n) { return n.y; })),
            },
        };
    }

    /**
     * Returns the shape total length, or the equivalent to `shape.getTotalLength()`.
     *
     * The `normalizePath` version is lighter, faster, more efficient and more accurate
     * with paths that are not `curveArray`.
     */
    function getTotalLength(pathInput, options) {
        return pathLengthFactory(pathInput, undefined, __assign(__assign({}, options), { bbox: false, length: true })).length;
    }

    function getRotations(a) {
        var segCount = a.length;
        var pointCount = segCount - 1;
        return a.map(function (f, idx) {
            return a.map(function (p, i) {
                var oldSegIdx = idx + i;
                var seg;
                if (i === 0 || (a[oldSegIdx] && a[oldSegIdx][0] === 'M')) {
                    seg = a[oldSegIdx];
                    return ['M'].concat(seg.slice(-2));
                }
                if (oldSegIdx >= segCount)
                    oldSegIdx -= pointCount;
                return a[oldSegIdx];
            });
        });
    }
    function getRotatedCurve(a, b) {
        var segCount = a.length - 1;
        var lineLengths = [];
        var computedIndex = 0;
        var sumLensSqrd = 0;
        var rotations = getRotations(a);
        rotations.forEach(function (r, i) {
            a.slice(1).forEach(function (s, j) {
                // @ts-ignore
                sumLensSqrd += distanceSquareRoot(a[(i + j) % segCount].slice(-2), b[j % segCount].slice(-2));
            });
            lineLengths[i] = sumLensSqrd;
            sumLensSqrd = 0;
        });
        computedIndex = lineLengths.indexOf(Math.min.apply(null, lineLengths));
        return rotations[computedIndex];
    }

    /**
     * Returns the area of a single cubic-bezier segment.
     *
     * http://objectmix.com/graphics/133553-area-closed-bezier-curve.html
     */
    function getCubicSegArea(x1, y1, c1x, c1y, c2x, c2y, x2, y2) {
        // https://stackoverflow.com/a/15845996
        return ((3 *
            ((y2 - y1) * (c1x + c2x) -
                (x2 - x1) * (c1y + c2y) +
                c1y * (x1 - c2x) -
                c1x * (y1 - c2y) +
                y2 * (c2x + x1 / 3) -
                x2 * (c2y + y1 / 3))) /
            20);
    }
    /**
     * Returns the area of a shape.
     * @author Jürg Lehni & Jonathan Puckey
     *
     * @see https://github.com/paperjs/paper.js/blob/develop/src/path/Path.js
     */
    function getPathArea(path) {
        var x = 0;
        var y = 0;
        var len = 0;
        return path2Curve(path)
            .map(function (seg) {
            var _a;
            switch (seg[0]) {
                case 'M':
                    x = seg[1], y = seg[2];
                    return 0;
                default:
                    // @ts-ignore
                    var _b = seg.slice(1), c1x = _b[0], c1y = _b[1], c2x = _b[2], c2y = _b[3], x2 = _b[4], y2 = _b[5];
                    len = getCubicSegArea(x, y, c1x, c1y, c2x, c2y, x2, y2);
                    _a = seg.slice(-2), x = _a[0], y = _a[1];
                    return len;
            }
        })
            .reduce(function (a, b) { return a + b; }, 0);
    }
    // export function getPathArea(pathArray: AbsoluteArray) {
    //   let x = 0;
    //   let y = 0;
    //   let mx = 0;
    //   let my = 0;
    //   let len = 0;
    //   return pathArray
    //     .map((seg) => {
    //       switch (seg[0]) {
    //         case 'M':
    //         case 'Z':
    //           mx = seg[0] === 'M' ? seg[1] : mx;
    //           my = seg[0] === 'M' ? seg[2] : my;
    //           x = mx;
    //           y = my;
    //           return 0;
    //         default:
    //           // @ts-ignore
    //           len = getCubicSegArea.apply(0, [x, y].concat(seg.slice(1)));
    //           [x, y] = seg.slice(-2) as [number, number];
    //           return len;
    //       }
    //     })
    //     .reduce((a, b) => a + b, 0);
    // }

    function getDrawDirection(pathArray) {
        return getPathArea(pathArray) >= 0;
    }

    /**
     * Returns [x,y] coordinates of a point at a given length of a shape.
     */
    function getPointAtLength(pathInput, distance, options) {
        return pathLengthFactory(pathInput, distance, __assign(__assign({}, options), { bbox: false, length: true })).point;
    }

    function splitCubic(pts, t) {
        if (t === void 0) { t = 0.5; }
        var p0 = pts.slice(0, 2);
        var p1 = pts.slice(2, 4);
        var p2 = pts.slice(4, 6);
        var p3 = pts.slice(6, 8);
        var p4 = midPoint(p0, p1, t);
        var p5 = midPoint(p1, p2, t);
        var p6 = midPoint(p2, p3, t);
        var p7 = midPoint(p4, p5, t);
        var p8 = midPoint(p5, p6, t);
        var p9 = midPoint(p7, p8, t);
        return [
            // @ts-ignore
            ['C'].concat(p4, p7, p9),
            // @ts-ignore
            ['C'].concat(p8, p6, p3),
        ];
    }
    function getCurveArray(segments) {
        return segments.map(function (segment, i, pathArray) {
            // @ts-ignore
            var segmentData = i && pathArray[i - 1].slice(-2).concat(segment.slice(1));
            // @ts-ignore
            var curveLength = i
                ? segmentCubicFactory(segmentData[0], segmentData[1], segmentData[2], segmentData[3], segmentData[4], segmentData[5], segmentData[6], segmentData[7], segmentData[8], { bbox: false }).length
                : 0;
            var subsegs;
            if (i) {
                // must be [segment,segment]
                subsegs = curveLength ? splitCubic(segmentData) : [segment, segment];
            }
            else {
                subsegs = [segment];
            }
            return {
                s: segment,
                ss: subsegs,
                l: curveLength,
            };
        });
    }
    function equalizeSegments(path1, path2, TL) {
        var c1 = getCurveArray(path1);
        var c2 = getCurveArray(path2);
        var L1 = c1.length;
        var L2 = c2.length;
        var l1 = c1.filter(function (x) { return x.l; }).length;
        var l2 = c2.filter(function (x) { return x.l; }).length;
        var m1 = c1.filter(function (x) { return x.l; }).reduce(function (a, _a) {
            var l = _a.l;
            return a + l;
        }, 0) / l1 || 0;
        var m2 = c2.filter(function (x) { return x.l; }).reduce(function (a, _a) {
            var l = _a.l;
            return a + l;
        }, 0) / l2 || 0;
        var tl = TL || Math.max(L1, L2);
        var mm = [m1, m2];
        var dif = [tl - L1, tl - L2];
        var canSplit = 0;
        var result = [c1, c2].map(function (x, i) {
            // @ts-ignore
            return x.l === tl
                ? x.map(function (y) { return y.s; })
                : x
                    .map(function (y, j) {
                    canSplit = j && dif[i] && y.l >= mm[i];
                    dif[i] -= canSplit ? 1 : 0;
                    return canSplit ? y.ss : [y.s];
                })
                    .flat();
        });
        return result[0].length === result[1].length ? result : equalizeSegments(result[0], result[1], tl);
    }

    var Component = /** @class */function () {
      function Component(props, context, updater) {
        this.isMounted = false;
        // State 内部私有属性
        this.destroyed = false;
        this.props = props;
        this.state = {};
        this.context = context;
        this.updater = updater;
      }
      Component.prototype.willMount = function () {};
      Component.prototype.didMount = function () {};
      Component.prototype.shouldUpdate = function (_nextProps) {
        return true;
      };
      Component.prototype.willReceiveProps = function (_props, _context) {};
      Component.prototype.willUpdate = function () {};
      Component.prototype.didUpdate = function () {};
      Component.prototype.render = function () {
        return null;
      };
      Component.prototype.willUnmount = function () {};
      Component.prototype.didUnmount = function () {};
      Component.prototype.setState = function (partialState, callback) {
        if (this.destroyed) {
          return;
        }
        this.updater.enqueueSetState(this, partialState, callback);
      };
      Component.prototype.forceUpdate = function (callback) {
        if (this.destroyed) {
          return;
        }
        this.updater.enqueueForceUpdate(this, {}, callback);
      };
      Component.prototype.setAnimate = function (animate) {
        this.animate = animate;
        this._vNode.animate = animate;
      };
      Component.prototype.destroy = function () {
        this.destroyed = true;
        this.animator = null;
      };
      return Component;
    }();
    // 标识是否是组件
    // @ts-ignore
    Component.prototype.isF2Component = true;

    function cloneElement(element, props) {
      if (!element) return element;
      return __assign(__assign({}, element), {
        props: __assign(__assign({}, element.props), props)
      });
    }
    function map$1(children, fn) {
      if (!children) {
        return fn(children);
      }
      if (isArray(children)) {
        return children.map(function (child) {
          return map$1(child, fn);
        });
      }
      return fn(children);
    }
    function compareArray(nextElements, lastElements, callback) {
      var keyed = {};
      var nextLength = nextElements.length;
      var lastLength = lastElements.length;
      for (var i = 0, len = lastLength; i < len; i++) {
        var element = lastElements[i];
        if (element && !isNil(element.key)) {
          var key = element.key;
          keyed[key] = element;
        }
      }
      var result = [];
      // 比较元素
      for (var i = 0, len = nextLength; i < len; i++) {
        var element = nextElements[i];
        if (!element) {
          continue;
        }
        var key = element.key;
        var lastElement = void 0;
        // 有key值定义
        if (!isNil(element.key)) {
          lastElement = keyed[key];
          if (lastElement) delete keyed[key];
        } else {
          // 取相同位置的元素
          lastElement = lastElements[i];
        }
        // 没有直接返回
        if (!lastElement) {
          result.push(compare(element, null, callback));
          continue;
        }
        // 如果 lastElement 已经被处理过, next 处理成新增
        if (lastElement === null || lastElement === void 0 ? void 0 : lastElement.__processed) {
          result.push(compare(element, null, callback));
          continue;
        }
        // 标记 element 已经被处理过
        lastElement.__processed = true;
        result.push(compare(element, lastElement, callback));
      }
      // 处理 lastElements 里面还未被处理的元素
      for (var i = 0, len = lastLength; i < len; i++) {
        var lastElement = lastElements[i];
        if (!lastElement) {
          continue;
        }
        if (!(lastElement === null || lastElement === void 0 ? void 0 : lastElement.__processed)) {
          result.push(compare(null, lastElement, callback));
        } else {
          delete lastElement.__processed;
        }
      }
      return result;
    }
    // 比较2棵树
    function compare(nextElement, lastElement, callback) {
      // 有一个为空
      if (!nextElement || !lastElement) {
        return callback(nextElement, lastElement);
      }
      if (isArray(nextElement) || isArray(lastElement)) {
        var nextElementArray = isArray(nextElement) ? nextElement : [nextElement];
        var lastElementArray = isArray(lastElement) ? lastElement : [lastElement];
        return compareArray(nextElementArray, lastElementArray, callback);
      }
      return callback(nextElement, lastElement);
    }
    function toArray(element) {
      if (!element) {
        return element;
      }
      if (!isArray(element)) {
        return [element];
      }
      var newArray = [];
      for (var i = 0, len = element.length; i < len; i++) {
        var item = element[i];
        if (isArray(item)) {
          newArray = newArray.concat(toArray(item));
        } else {
          newArray.push(item);
        }
      }
      return newArray;
    }
    var Children = {
      cloneElement: cloneElement,
      map: map$1,
      toArray: toArray,
      compare: compare
    };

    function getDefaultExportFromCjs (x) {
    	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
    }

    function createCommonjsModule(fn, basedir, module) {
    	return module = {
    		path: basedir,
    		exports: {},
    		require: function (path, base) {
    			return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
    		}
    	}, fn(module, module.exports), module.exports;
    }

    function commonjsRequire () {
    	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
    }

    var eventemitter3 = createCommonjsModule(function (module) {

    var has = Object.prototype.hasOwnProperty
      , prefix = '~';

    /**
     * Constructor to create a storage for our `EE` objects.
     * An `Events` instance is a plain object whose properties are event names.
     *
     * @constructor
     * @private
     */
    function Events() {}

    //
    // We try to not inherit from `Object.prototype`. In some engines creating an
    // instance in this way is faster than calling `Object.create(null)` directly.
    // If `Object.create(null)` is not supported we prefix the event names with a
    // character to make sure that the built-in object properties are not
    // overridden or used as an attack vector.
    //
    if (Object.create) {
      Events.prototype = Object.create(null);

      //
      // This hack is needed because the `__proto__` property is still inherited in
      // some old browsers like Android 4, iPhone 5.1, Opera 11 and Safari 5.
      //
      if (!new Events().__proto__) prefix = false;
    }

    /**
     * Representation of a single event listener.
     *
     * @param {Function} fn The listener function.
     * @param {*} context The context to invoke the listener with.
     * @param {Boolean} [once=false] Specify if the listener is a one-time listener.
     * @constructor
     * @private
     */
    function EE(fn, context, once) {
      this.fn = fn;
      this.context = context;
      this.once = once || false;
    }

    /**
     * Add a listener for a given event.
     *
     * @param {EventEmitter} emitter Reference to the `EventEmitter` instance.
     * @param {(String|Symbol)} event The event name.
     * @param {Function} fn The listener function.
     * @param {*} context The context to invoke the listener with.
     * @param {Boolean} once Specify if the listener is a one-time listener.
     * @returns {EventEmitter}
     * @private
     */
    function addListener(emitter, event, fn, context, once) {
      if (typeof fn !== 'function') {
        throw new TypeError('The listener must be a function');
      }

      var listener = new EE(fn, context || emitter, once)
        , evt = prefix ? prefix + event : event;

      if (!emitter._events[evt]) emitter._events[evt] = listener, emitter._eventsCount++;
      else if (!emitter._events[evt].fn) emitter._events[evt].push(listener);
      else emitter._events[evt] = [emitter._events[evt], listener];

      return emitter;
    }

    /**
     * Clear event by name.
     *
     * @param {EventEmitter} emitter Reference to the `EventEmitter` instance.
     * @param {(String|Symbol)} evt The Event name.
     * @private
     */
    function clearEvent(emitter, evt) {
      if (--emitter._eventsCount === 0) emitter._events = new Events();
      else delete emitter._events[evt];
    }

    /**
     * Minimal `EventEmitter` interface that is molded against the Node.js
     * `EventEmitter` interface.
     *
     * @constructor
     * @public
     */
    function EventEmitter() {
      this._events = new Events();
      this._eventsCount = 0;
    }

    /**
     * Return an array listing the events for which the emitter has registered
     * listeners.
     *
     * @returns {Array}
     * @public
     */
    EventEmitter.prototype.eventNames = function eventNames() {
      var names = []
        , events
        , name;

      if (this._eventsCount === 0) return names;

      for (name in (events = this._events)) {
        if (has.call(events, name)) names.push(prefix ? name.slice(1) : name);
      }

      if (Object.getOwnPropertySymbols) {
        return names.concat(Object.getOwnPropertySymbols(events));
      }

      return names;
    };

    /**
     * Return the listeners registered for a given event.
     *
     * @param {(String|Symbol)} event The event name.
     * @returns {Array} The registered listeners.
     * @public
     */
    EventEmitter.prototype.listeners = function listeners(event) {
      var evt = prefix ? prefix + event : event
        , handlers = this._events[evt];

      if (!handlers) return [];
      if (handlers.fn) return [handlers.fn];

      for (var i = 0, l = handlers.length, ee = new Array(l); i < l; i++) {
        ee[i] = handlers[i].fn;
      }

      return ee;
    };

    /**
     * Return the number of listeners listening to a given event.
     *
     * @param {(String|Symbol)} event The event name.
     * @returns {Number} The number of listeners.
     * @public
     */
    EventEmitter.prototype.listenerCount = function listenerCount(event) {
      var evt = prefix ? prefix + event : event
        , listeners = this._events[evt];

      if (!listeners) return 0;
      if (listeners.fn) return 1;
      return listeners.length;
    };

    /**
     * Calls each of the listeners registered for a given event.
     *
     * @param {(String|Symbol)} event The event name.
     * @returns {Boolean} `true` if the event had listeners, else `false`.
     * @public
     */
    EventEmitter.prototype.emit = function emit(event, a1, a2, a3, a4, a5) {
      var evt = prefix ? prefix + event : event;

      if (!this._events[evt]) return false;

      var listeners = this._events[evt]
        , len = arguments.length
        , args
        , i;

      if (listeners.fn) {
        if (listeners.once) this.removeListener(event, listeners.fn, undefined, true);

        switch (len) {
          case 1: return listeners.fn.call(listeners.context), true;
          case 2: return listeners.fn.call(listeners.context, a1), true;
          case 3: return listeners.fn.call(listeners.context, a1, a2), true;
          case 4: return listeners.fn.call(listeners.context, a1, a2, a3), true;
          case 5: return listeners.fn.call(listeners.context, a1, a2, a3, a4), true;
          case 6: return listeners.fn.call(listeners.context, a1, a2, a3, a4, a5), true;
        }

        for (i = 1, args = new Array(len -1); i < len; i++) {
          args[i - 1] = arguments[i];
        }

        listeners.fn.apply(listeners.context, args);
      } else {
        var length = listeners.length
          , j;

        for (i = 0; i < length; i++) {
          if (listeners[i].once) this.removeListener(event, listeners[i].fn, undefined, true);

          switch (len) {
            case 1: listeners[i].fn.call(listeners[i].context); break;
            case 2: listeners[i].fn.call(listeners[i].context, a1); break;
            case 3: listeners[i].fn.call(listeners[i].context, a1, a2); break;
            case 4: listeners[i].fn.call(listeners[i].context, a1, a2, a3); break;
            default:
              if (!args) for (j = 1, args = new Array(len -1); j < len; j++) {
                args[j - 1] = arguments[j];
              }

              listeners[i].fn.apply(listeners[i].context, args);
          }
        }
      }

      return true;
    };

    /**
     * Add a listener for a given event.
     *
     * @param {(String|Symbol)} event The event name.
     * @param {Function} fn The listener function.
     * @param {*} [context=this] The context to invoke the listener with.
     * @returns {EventEmitter} `this`.
     * @public
     */
    EventEmitter.prototype.on = function on(event, fn, context) {
      return addListener(this, event, fn, context, false);
    };

    /**
     * Add a one-time listener for a given event.
     *
     * @param {(String|Symbol)} event The event name.
     * @param {Function} fn The listener function.
     * @param {*} [context=this] The context to invoke the listener with.
     * @returns {EventEmitter} `this`.
     * @public
     */
    EventEmitter.prototype.once = function once(event, fn, context) {
      return addListener(this, event, fn, context, true);
    };

    /**
     * Remove the listeners of a given event.
     *
     * @param {(String|Symbol)} event The event name.
     * @param {Function} fn Only remove the listeners that match this function.
     * @param {*} context Only remove the listeners that have this context.
     * @param {Boolean} once Only remove one-time listeners.
     * @returns {EventEmitter} `this`.
     * @public
     */
    EventEmitter.prototype.removeListener = function removeListener(event, fn, context, once) {
      var evt = prefix ? prefix + event : event;

      if (!this._events[evt]) return this;
      if (!fn) {
        clearEvent(this, evt);
        return this;
      }

      var listeners = this._events[evt];

      if (listeners.fn) {
        if (
          listeners.fn === fn &&
          (!once || listeners.once) &&
          (!context || listeners.context === context)
        ) {
          clearEvent(this, evt);
        }
      } else {
        for (var i = 0, events = [], length = listeners.length; i < length; i++) {
          if (
            listeners[i].fn !== fn ||
            (once && !listeners[i].once) ||
            (context && listeners[i].context !== context)
          ) {
            events.push(listeners[i]);
          }
        }

        //
        // Reset the array, or remove it completely if we have no more listeners.
        //
        if (events.length) this._events[evt] = events.length === 1 ? events[0] : events;
        else clearEvent(this, evt);
      }

      return this;
    };

    /**
     * Remove all listeners, or those of the specified event.
     *
     * @param {(String|Symbol)} [event] The event name.
     * @returns {EventEmitter} `this`.
     * @public
     */
    EventEmitter.prototype.removeAllListeners = function removeAllListeners(event) {
      var evt;

      if (event) {
        evt = prefix ? prefix + event : event;
        if (this._events[evt]) clearEvent(this, evt);
      } else {
        this._events = new Events();
        this._eventsCount = 0;
      }

      return this;
    };

    //
    // Alias methods names because people roll like that.
    //
    EventEmitter.prototype.off = EventEmitter.prototype.removeListener;
    EventEmitter.prototype.addListener = EventEmitter.prototype.on;

    //
    // Expose the prefix.
    //
    EventEmitter.prefixed = prefix;

    //
    // Allow `EventEmitter` to be imported as module namespace.
    //
    EventEmitter.EventEmitter = EventEmitter;

    //
    // Expose the module.
    //
    {
      module.exports = EventEmitter;
    }
    });

    function define(constructor, factory, prototype) {
      constructor.prototype = factory.prototype = prototype;
      prototype.constructor = constructor;
    }

    function extend(parent, definition) {
      var prototype = Object.create(parent.prototype);
      for (var key in definition) prototype[key] = definition[key];
      return prototype;
    }

    function Color() {}

    var darker = 0.7;
    var brighter = 1 / darker;

    var reI = "\\s*([+-]?\\d+)\\s*",
        reN = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)\\s*",
        reP = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)%\\s*",
        reHex = /^#([0-9a-f]{3,8})$/,
        reRgbInteger = new RegExp("^rgb\\(" + [reI, reI, reI] + "\\)$"),
        reRgbPercent = new RegExp("^rgb\\(" + [reP, reP, reP] + "\\)$"),
        reRgbaInteger = new RegExp("^rgba\\(" + [reI, reI, reI, reN] + "\\)$"),
        reRgbaPercent = new RegExp("^rgba\\(" + [reP, reP, reP, reN] + "\\)$"),
        reHslPercent = new RegExp("^hsl\\(" + [reN, reP, reP] + "\\)$"),
        reHslaPercent = new RegExp("^hsla\\(" + [reN, reP, reP, reN] + "\\)$");

    var named = {
      aliceblue: 0xf0f8ff,
      antiquewhite: 0xfaebd7,
      aqua: 0x00ffff,
      aquamarine: 0x7fffd4,
      azure: 0xf0ffff,
      beige: 0xf5f5dc,
      bisque: 0xffe4c4,
      black: 0x000000,
      blanchedalmond: 0xffebcd,
      blue: 0x0000ff,
      blueviolet: 0x8a2be2,
      brown: 0xa52a2a,
      burlywood: 0xdeb887,
      cadetblue: 0x5f9ea0,
      chartreuse: 0x7fff00,
      chocolate: 0xd2691e,
      coral: 0xff7f50,
      cornflowerblue: 0x6495ed,
      cornsilk: 0xfff8dc,
      crimson: 0xdc143c,
      cyan: 0x00ffff,
      darkblue: 0x00008b,
      darkcyan: 0x008b8b,
      darkgoldenrod: 0xb8860b,
      darkgray: 0xa9a9a9,
      darkgreen: 0x006400,
      darkgrey: 0xa9a9a9,
      darkkhaki: 0xbdb76b,
      darkmagenta: 0x8b008b,
      darkolivegreen: 0x556b2f,
      darkorange: 0xff8c00,
      darkorchid: 0x9932cc,
      darkred: 0x8b0000,
      darksalmon: 0xe9967a,
      darkseagreen: 0x8fbc8f,
      darkslateblue: 0x483d8b,
      darkslategray: 0x2f4f4f,
      darkslategrey: 0x2f4f4f,
      darkturquoise: 0x00ced1,
      darkviolet: 0x9400d3,
      deeppink: 0xff1493,
      deepskyblue: 0x00bfff,
      dimgray: 0x696969,
      dimgrey: 0x696969,
      dodgerblue: 0x1e90ff,
      firebrick: 0xb22222,
      floralwhite: 0xfffaf0,
      forestgreen: 0x228b22,
      fuchsia: 0xff00ff,
      gainsboro: 0xdcdcdc,
      ghostwhite: 0xf8f8ff,
      gold: 0xffd700,
      goldenrod: 0xdaa520,
      gray: 0x808080,
      green: 0x008000,
      greenyellow: 0xadff2f,
      grey: 0x808080,
      honeydew: 0xf0fff0,
      hotpink: 0xff69b4,
      indianred: 0xcd5c5c,
      indigo: 0x4b0082,
      ivory: 0xfffff0,
      khaki: 0xf0e68c,
      lavender: 0xe6e6fa,
      lavenderblush: 0xfff0f5,
      lawngreen: 0x7cfc00,
      lemonchiffon: 0xfffacd,
      lightblue: 0xadd8e6,
      lightcoral: 0xf08080,
      lightcyan: 0xe0ffff,
      lightgoldenrodyellow: 0xfafad2,
      lightgray: 0xd3d3d3,
      lightgreen: 0x90ee90,
      lightgrey: 0xd3d3d3,
      lightpink: 0xffb6c1,
      lightsalmon: 0xffa07a,
      lightseagreen: 0x20b2aa,
      lightskyblue: 0x87cefa,
      lightslategray: 0x778899,
      lightslategrey: 0x778899,
      lightsteelblue: 0xb0c4de,
      lightyellow: 0xffffe0,
      lime: 0x00ff00,
      limegreen: 0x32cd32,
      linen: 0xfaf0e6,
      magenta: 0xff00ff,
      maroon: 0x800000,
      mediumaquamarine: 0x66cdaa,
      mediumblue: 0x0000cd,
      mediumorchid: 0xba55d3,
      mediumpurple: 0x9370db,
      mediumseagreen: 0x3cb371,
      mediumslateblue: 0x7b68ee,
      mediumspringgreen: 0x00fa9a,
      mediumturquoise: 0x48d1cc,
      mediumvioletred: 0xc71585,
      midnightblue: 0x191970,
      mintcream: 0xf5fffa,
      mistyrose: 0xffe4e1,
      moccasin: 0xffe4b5,
      navajowhite: 0xffdead,
      navy: 0x000080,
      oldlace: 0xfdf5e6,
      olive: 0x808000,
      olivedrab: 0x6b8e23,
      orange: 0xffa500,
      orangered: 0xff4500,
      orchid: 0xda70d6,
      palegoldenrod: 0xeee8aa,
      palegreen: 0x98fb98,
      paleturquoise: 0xafeeee,
      palevioletred: 0xdb7093,
      papayawhip: 0xffefd5,
      peachpuff: 0xffdab9,
      peru: 0xcd853f,
      pink: 0xffc0cb,
      plum: 0xdda0dd,
      powderblue: 0xb0e0e6,
      purple: 0x800080,
      rebeccapurple: 0x663399,
      red: 0xff0000,
      rosybrown: 0xbc8f8f,
      royalblue: 0x4169e1,
      saddlebrown: 0x8b4513,
      salmon: 0xfa8072,
      sandybrown: 0xf4a460,
      seagreen: 0x2e8b57,
      seashell: 0xfff5ee,
      sienna: 0xa0522d,
      silver: 0xc0c0c0,
      skyblue: 0x87ceeb,
      slateblue: 0x6a5acd,
      slategray: 0x708090,
      slategrey: 0x708090,
      snow: 0xfffafa,
      springgreen: 0x00ff7f,
      steelblue: 0x4682b4,
      tan: 0xd2b48c,
      teal: 0x008080,
      thistle: 0xd8bfd8,
      tomato: 0xff6347,
      turquoise: 0x40e0d0,
      violet: 0xee82ee,
      wheat: 0xf5deb3,
      white: 0xffffff,
      whitesmoke: 0xf5f5f5,
      yellow: 0xffff00,
      yellowgreen: 0x9acd32
    };

    define(Color, color, {
      copy: function(channels) {
        return Object.assign(new this.constructor, this, channels);
      },
      displayable: function() {
        return this.rgb().displayable();
      },
      hex: color_formatHex, // Deprecated! Use color.formatHex.
      formatHex: color_formatHex,
      formatHsl: color_formatHsl,
      formatRgb: color_formatRgb,
      toString: color_formatRgb
    });

    function color_formatHex() {
      return this.rgb().formatHex();
    }

    function color_formatHsl() {
      return hslConvert(this).formatHsl();
    }

    function color_formatRgb() {
      return this.rgb().formatRgb();
    }

    function color(format) {
      var m, l;
      format = (format + "").trim().toLowerCase();
      return (m = reHex.exec(format)) ? (l = m[1].length, m = parseInt(m[1], 16), l === 6 ? rgbn(m) // #ff0000
          : l === 3 ? new Rgb((m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), ((m & 0xf) << 4) | (m & 0xf), 1) // #f00
          : l === 8 ? rgba(m >> 24 & 0xff, m >> 16 & 0xff, m >> 8 & 0xff, (m & 0xff) / 0xff) // #ff000000
          : l === 4 ? rgba((m >> 12 & 0xf) | (m >> 8 & 0xf0), (m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), (((m & 0xf) << 4) | (m & 0xf)) / 0xff) // #f000
          : null) // invalid hex
          : (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) // rgb(255, 0, 0)
          : (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) // rgb(100%, 0%, 0%)
          : (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) // rgba(255, 0, 0, 1)
          : (m = reRgbaPercent.exec(format)) ? rgba(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) // rgb(100%, 0%, 0%, 1)
          : (m = reHslPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) // hsl(120, 50%, 50%)
          : (m = reHslaPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) // hsla(120, 50%, 50%, 1)
          : named.hasOwnProperty(format) ? rgbn(named[format]) // eslint-disable-line no-prototype-builtins
          : format === "transparent" ? new Rgb(NaN, NaN, NaN, 0)
          : null;
    }

    function rgbn(n) {
      return new Rgb(n >> 16 & 0xff, n >> 8 & 0xff, n & 0xff, 1);
    }

    function rgba(r, g, b, a) {
      if (a <= 0) r = g = b = NaN;
      return new Rgb(r, g, b, a);
    }

    function rgbConvert(o) {
      if (!(o instanceof Color)) o = color(o);
      if (!o) return new Rgb;
      o = o.rgb();
      return new Rgb(o.r, o.g, o.b, o.opacity);
    }

    function rgb(r, g, b, opacity) {
      return arguments.length === 1 ? rgbConvert(r) : new Rgb(r, g, b, opacity == null ? 1 : opacity);
    }

    function Rgb(r, g, b, opacity) {
      this.r = +r;
      this.g = +g;
      this.b = +b;
      this.opacity = +opacity;
    }

    define(Rgb, rgb, extend(Color, {
      brighter: function(k) {
        k = k == null ? brighter : Math.pow(brighter, k);
        return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
      },
      darker: function(k) {
        k = k == null ? darker : Math.pow(darker, k);
        return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
      },
      rgb: function() {
        return this;
      },
      displayable: function() {
        return (-0.5 <= this.r && this.r < 255.5)
            && (-0.5 <= this.g && this.g < 255.5)
            && (-0.5 <= this.b && this.b < 255.5)
            && (0 <= this.opacity && this.opacity <= 1);
      },
      hex: rgb_formatHex, // Deprecated! Use color.formatHex.
      formatHex: rgb_formatHex,
      formatRgb: rgb_formatRgb,
      toString: rgb_formatRgb
    }));

    function rgb_formatHex() {
      return "#" + hex(this.r) + hex(this.g) + hex(this.b);
    }

    function rgb_formatRgb() {
      var a = this.opacity; a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
      return (a === 1 ? "rgb(" : "rgba(")
          + Math.max(0, Math.min(255, Math.round(this.r) || 0)) + ", "
          + Math.max(0, Math.min(255, Math.round(this.g) || 0)) + ", "
          + Math.max(0, Math.min(255, Math.round(this.b) || 0))
          + (a === 1 ? ")" : ", " + a + ")");
    }

    function hex(value) {
      value = Math.max(0, Math.min(255, Math.round(value) || 0));
      return (value < 16 ? "0" : "") + value.toString(16);
    }

    function hsla(h, s, l, a) {
      if (a <= 0) h = s = l = NaN;
      else if (l <= 0 || l >= 1) h = s = NaN;
      else if (s <= 0) h = NaN;
      return new Hsl(h, s, l, a);
    }

    function hslConvert(o) {
      if (o instanceof Hsl) return new Hsl(o.h, o.s, o.l, o.opacity);
      if (!(o instanceof Color)) o = color(o);
      if (!o) return new Hsl;
      if (o instanceof Hsl) return o;
      o = o.rgb();
      var r = o.r / 255,
          g = o.g / 255,
          b = o.b / 255,
          min = Math.min(r, g, b),
          max = Math.max(r, g, b),
          h = NaN,
          s = max - min,
          l = (max + min) / 2;
      if (s) {
        if (r === max) h = (g - b) / s + (g < b) * 6;
        else if (g === max) h = (b - r) / s + 2;
        else h = (r - g) / s + 4;
        s /= l < 0.5 ? max + min : 2 - max - min;
        h *= 60;
      } else {
        s = l > 0 && l < 1 ? 0 : h;
      }
      return new Hsl(h, s, l, o.opacity);
    }

    function hsl(h, s, l, opacity) {
      return arguments.length === 1 ? hslConvert(h) : new Hsl(h, s, l, opacity == null ? 1 : opacity);
    }

    function Hsl(h, s, l, opacity) {
      this.h = +h;
      this.s = +s;
      this.l = +l;
      this.opacity = +opacity;
    }

    define(Hsl, hsl, extend(Color, {
      brighter: function(k) {
        k = k == null ? brighter : Math.pow(brighter, k);
        return new Hsl(this.h, this.s, this.l * k, this.opacity);
      },
      darker: function(k) {
        k = k == null ? darker : Math.pow(darker, k);
        return new Hsl(this.h, this.s, this.l * k, this.opacity);
      },
      rgb: function() {
        var h = this.h % 360 + (this.h < 0) * 360,
            s = isNaN(h) || isNaN(this.s) ? 0 : this.s,
            l = this.l,
            m2 = l + (l < 0.5 ? l : 1 - l) * s,
            m1 = 2 * l - m2;
        return new Rgb(
          hsl2rgb(h >= 240 ? h - 240 : h + 120, m1, m2),
          hsl2rgb(h, m1, m2),
          hsl2rgb(h < 120 ? h + 240 : h - 120, m1, m2),
          this.opacity
        );
      },
      displayable: function() {
        return (0 <= this.s && this.s <= 1 || isNaN(this.s))
            && (0 <= this.l && this.l <= 1)
            && (0 <= this.opacity && this.opacity <= 1);
      },
      formatHsl: function() {
        var a = this.opacity; a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
        return (a === 1 ? "hsl(" : "hsla(")
            + (this.h || 0) + ", "
            + (this.s || 0) * 100 + "%, "
            + (this.l || 0) * 100 + "%"
            + (a === 1 ? ")" : ", " + a + ")");
      }
    }));

    /* From FvD 13.37, CSS Color Module Level 3 */
    function hsl2rgb(h, m1, m2) {
      return (h < 60 ? m1 + (m2 - m1) * h / 60
          : h < 180 ? m2
          : h < 240 ? m1 + (m2 - m1) * (240 - h) / 60
          : m1) * 255;
    }

    function distance$1(x1, y1, x2, y2) {
        var dx = x1 - x2;
        var dy = y1 - y2;
        return Math.sqrt(dx * dx + dy * dy);
    }
    function getBBoxByArray(xArr, yArr) {
        var minX = Math.min.apply(Math, __spreadArray([], __read(xArr), false));
        var minY = Math.min.apply(Math, __spreadArray([], __read(yArr), false));
        var maxX = Math.max.apply(Math, __spreadArray([], __read(xArr), false));
        var maxY = Math.max.apply(Math, __spreadArray([], __read(yArr), false));
        return {
            x: minX,
            y: minY,
            width: maxX - minX,
            height: maxY - minY,
        };
    }
    // x 的极值
    function xExtrema(rx, ry, xRotation) {
        return Math.atan((-ry / rx) * Math.tan(xRotation));
    }
    // y 的极值
    function yExtrema(rx, ry, xRotation) {
        return Math.atan(ry / (rx * Math.tan(xRotation)));
    }
    // 根据角度求 x 坐标
    function xAt(cx, cy, rx, ry, xRotation, angle) {
        return (rx * Math.cos(xRotation) * Math.cos(angle) -
            ry * Math.sin(xRotation) * Math.sin(angle) +
            cx);
    }
    // 根据角度求 y 坐标
    function yAt(cx, cy, rx, ry, xRotation, angle) {
        return (rx * Math.sin(xRotation) * Math.cos(angle) +
            ry * Math.cos(xRotation) * Math.sin(angle) +
            cy);
    }
    function box$5(cx, cy, rx, ry, xRotation, startAngle, endAngle) {
        var xDim = xExtrema(rx, ry, xRotation);
        var minX = Infinity;
        var maxX = -Infinity;
        var xs = [startAngle, endAngle];
        for (var i = -Math.PI * 2; i <= Math.PI * 2; i += Math.PI) {
            var xAngle = xDim + i;
            if (startAngle < endAngle) {
                if (startAngle < xAngle && xAngle < endAngle) {
                    xs.push(xAngle);
                }
            }
            else {
                if (endAngle < xAngle && xAngle < startAngle) {
                    xs.push(xAngle);
                }
            }
        }
        for (var i = 0; i < xs.length; i++) {
            var x = xAt(cx, cy, rx, ry, xRotation, xs[i]);
            if (x < minX) {
                minX = x;
            }
            if (x > maxX) {
                maxX = x;
            }
        }
        var yDim = yExtrema(rx, ry, xRotation);
        var minY = Infinity;
        var maxY = -Infinity;
        var ys = [startAngle, endAngle];
        for (var i = -Math.PI * 2; i <= Math.PI * 2; i += Math.PI) {
            var yAngle = yDim + i;
            if (startAngle < endAngle) {
                if (startAngle < yAngle && yAngle < endAngle) {
                    ys.push(yAngle);
                }
            }
            else {
                if (endAngle < yAngle && yAngle < startAngle) {
                    ys.push(yAngle);
                }
            }
        }
        for (var i = 0; i < ys.length; i++) {
            var y = yAt(cx, cy, rx, ry, xRotation, ys[i]);
            if (y < minY) {
                minY = y;
            }
            if (y > maxY) {
                maxY = y;
            }
        }
        return {
            x: minX,
            y: minY,
            width: maxX - minX,
            height: maxY - minY,
        };
    }

    var EPSILON$1 = 0.0001;
    /**
     * 使用牛顿切割法求最近的点
     * @param {number[]} xArr      点的 x 数组
     * @param {number[]} yArr      点的 y 数组
     * @param {number}   x         指定的点 x
     * @param {number}   y         指定的点 y
     * @param {Function} tCallback 差值函数
     */
    function nearestPoint$2(xArr, yArr, x, y, tCallback, length) {
        var t = -1;
        var d = Infinity;
        var v0 = [x, y];
        var segNum = 20;
        if (length && length > 200) {
            segNum = length / 10;
        }
        var increaseRate = 1 / segNum;
        var interval = increaseRate / 10;
        for (var i = 0; i <= segNum; i++) {
            var _t = i * increaseRate;
            var v1 = [
                tCallback.apply(void 0, __spreadArray([], __read(xArr.concat([_t])), false)),
                tCallback.apply(void 0, __spreadArray([], __read(yArr.concat([_t])), false)),
            ];
            var d1 = distance$1(v0[0], v0[1], v1[0], v1[1]);
            if (d1 < d) {
                t = _t;
                d = d1;
            }
        }
        // 提前终止
        if (t === 0) {
            return {
                x: xArr[0],
                y: yArr[0],
            };
        }
        if (t === 1) {
            var count = xArr.length;
            return {
                x: xArr[count - 1],
                y: yArr[count - 1],
            };
        }
        d = Infinity;
        for (var i = 0; i < 32; i++) {
            if (interval < EPSILON$1) {
                break;
            }
            var prev = t - interval;
            var next = t + interval;
            var v1 = [
                tCallback.apply(void 0, __spreadArray([], __read(xArr.concat([prev])), false)),
                tCallback.apply(void 0, __spreadArray([], __read(yArr.concat([prev])), false)),
            ];
            var d1 = distance$1(v0[0], v0[1], v1[0], v1[1]);
            if (prev >= 0 && d1 < d) {
                t = prev;
                d = d1;
            }
            else {
                var v2 = [
                    tCallback.apply(void 0, __spreadArray([], __read(xArr.concat([next])), false)),
                    tCallback.apply(void 0, __spreadArray([], __read(yArr.concat([next])), false)),
                ];
                var d2 = distance$1(v0[0], v0[1], v2[0], v2[1]);
                if (next <= 1 && d2 < d) {
                    t = next;
                    d = d2;
                }
                else {
                    interval *= 0.5;
                }
            }
        }
        return {
            x: tCallback.apply(void 0, __spreadArray([], __read(xArr.concat([t])), false)),
            y: tCallback.apply(void 0, __spreadArray([], __read(yArr.concat([t])), false)),
        };
    }
    function length$4(x1, y1, x2, y2) {
        return distance$1(x1, y1, x2, y2);
    }
    function pointAt$3(x1, y1, x2, y2, t) {
        return {
            x: (1 - t) * x1 + t * x2,
            y: (1 - t) * y1 + t * y2,
        };
    }
    function pointToLine(x1, y1, x2, y2, x, y) {
        var d = [x2 - x1, y2 - y1];
        // 如果端点相等，则判定点到点的距离
        if (exactEquals$1(d, [0, 0])) {
            return Math.sqrt((x - x1) * (x - x1) + (y - y1) * (y - y1));
        }
        var u = [-d[1], d[0]];
        normalize$3(u, u);
        var a = [x - x1, y - y1];
        return Math.abs(dot$1(a, u));
    }

    function cubicAt(p0, p1, p2, p3, t) {
        var onet = 1 - t; // t * t * t 的性能大概是 Math.pow(t, 3) 的三倍
        return (onet * onet * onet * p0 +
            3 * p1 * t * onet * onet +
            3 * p2 * t * t * onet +
            p3 * t * t * t);
    }
    function extrema$1(p0, p1, p2, p3) {
        var a = -3 * p0 + 9 * p1 - 9 * p2 + 3 * p3;
        var b = 6 * p0 - 12 * p1 + 6 * p2;
        var c = 3 * p1 - 3 * p0;
        var extremas = [];
        var t1;
        var t2;
        var discSqrt;
        if (isNumberEqual(a, 0)) {
            if (!isNumberEqual(b, 0)) {
                t1 = -c / b;
                if (t1 >= 0 && t1 <= 1) {
                    extremas.push(t1);
                }
            }
        }
        else {
            var disc = b * b - 4 * a * c;
            if (isNumberEqual(disc, 0)) {
                extremas.push(-b / (2 * a));
            }
            else if (disc > 0) {
                discSqrt = Math.sqrt(disc);
                t1 = (-b + discSqrt) / (2 * a);
                t2 = (-b - discSqrt) / (2 * a);
                if (t1 >= 0 && t1 <= 1) {
                    extremas.push(t1);
                }
                if (t2 >= 0 && t2 <= 1) {
                    extremas.push(t2);
                }
            }
        }
        return extremas;
    }
    function box$3(x1, y1, x2, y2, x3, y3, x4, y4) {
        var xArr = [x1, x4];
        var yArr = [y1, y4];
        var xExtrema = extrema$1(x1, x2, x3, x4);
        var yExtrema = extrema$1(y1, y2, y3, y4);
        for (var i = 0; i < xExtrema.length; i++) {
            xArr.push(cubicAt(x1, x2, x3, x4, xExtrema[i]));
        }
        for (var i = 0; i < yExtrema.length; i++) {
            yArr.push(cubicAt(y1, y2, y3, y4, yExtrema[i]));
        }
        return getBBoxByArray(xArr, yArr);
    }
    function nearestPoint$1(x1, y1, x2, y2, x3, y3, x4, y4, x0, y0, length) {
        return nearestPoint$2([x1, x2, x3, x4], [y1, y2, y3, y4], x0, y0, cubicAt, length);
    }
    function pointDistance$3(x1, y1, x2, y2, x3, y3, x4, y4, x0, y0, length) {
        var point = nearestPoint$1(x1, y1, x2, y2, x3, y3, x4, y4, x0, y0, length);
        return distance$1(point.x, point.y, x0, y0);
    }
    function lengthOfSegment(points) {
        if (points.length < 2) {
            return 0;
        }
        var totalLength = 0;
        for (var i = 0; i < points.length - 1; i++) {
            var from = points[i];
            var to = points[i + 1];
            totalLength += distance$1(from[0], from[1], to[0], to[1]);
        }
        return totalLength;
    }
    function length$2(points) {
        return lengthOfSegment(points);
    }

    // 差值公式
    function quadraticAt(p0, p1, p2, t) {
        var onet = 1 - t;
        return onet * onet * p0 + 2 * t * onet * p1 + t * t * p2;
    }
    // 求极值
    function extrema(p0, p1, p2) {
        var a = p0 + p2 - 2 * p1;
        if (isNumberEqual(a, 0)) {
            return [0.5];
        }
        var rst = (p0 - p1) / a;
        if (rst <= 1 && rst >= 0) {
            return [rst];
        }
        return [];
    }
    function box(x1, y1, x2, y2, x3, y3) {
        var xExtrema = extrema(x1, x2, x3)[0];
        var yExtrema = extrema(y1, y2, y3)[0];
        // 控制点不加入 box 的计算
        var xArr = [x1, x3];
        var yArr = [y1, y3];
        if (xExtrema !== undefined) {
            xArr.push(quadraticAt(x1, x2, x3, xExtrema));
        }
        if (yExtrema !== undefined) {
            yArr.push(quadraticAt(y1, y2, y3, yExtrema));
        }
        return getBBoxByArray(xArr, yArr);
    }
    function nearestPoint(x1, y1, x2, y2, x3, y3, x0, y0) {
        return nearestPoint$2([x1, x2, x3], [y1, y2, y3], x0, y0, quadraticAt);
    }
    function pointDistance(x1, y1, x2, y2, x3, y3, x0, y0) {
        var point = nearestPoint(x1, y1, x2, y2, x3, y3, x0, y0);
        return distance$1(point.x, point.y, x0, y0);
    }

    var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

    var rbush = {exports: {}};

    (function (module, exports) {
    (function (global, factory) {
    module.exports = factory() ;
    }(commonjsGlobal, function () {
    function quickselect(arr, k, left, right, compare) {
        quickselectStep(arr, k, left || 0, right || (arr.length - 1), compare || defaultCompare);
    }

    function quickselectStep(arr, k, left, right, compare) {

        while (right > left) {
            if (right - left > 600) {
                var n = right - left + 1;
                var m = k - left + 1;
                var z = Math.log(n);
                var s = 0.5 * Math.exp(2 * z / 3);
                var sd = 0.5 * Math.sqrt(z * s * (n - s) / n) * (m - n / 2 < 0 ? -1 : 1);
                var newLeft = Math.max(left, Math.floor(k - m * s / n + sd));
                var newRight = Math.min(right, Math.floor(k + (n - m) * s / n + sd));
                quickselectStep(arr, k, newLeft, newRight, compare);
            }

            var t = arr[k];
            var i = left;
            var j = right;

            swap(arr, left, k);
            if (compare(arr[right], t) > 0) { swap(arr, left, right); }

            while (i < j) {
                swap(arr, i, j);
                i++;
                j--;
                while (compare(arr[i], t) < 0) { i++; }
                while (compare(arr[j], t) > 0) { j--; }
            }

            if (compare(arr[left], t) === 0) { swap(arr, left, j); }
            else {
                j++;
                swap(arr, j, right);
            }

            if (j <= k) { left = j + 1; }
            if (k <= j) { right = j - 1; }
        }
    }

    function swap(arr, i, j) {
        var tmp = arr[i];
        arr[i] = arr[j];
        arr[j] = tmp;
    }

    function defaultCompare(a, b) {
        return a < b ? -1 : a > b ? 1 : 0;
    }

    var RBush = function RBush(maxEntries) {
        if ( maxEntries === void 0 ) maxEntries = 9;

        // max entries in a node is 9 by default; min node fill is 40% for best performance
        this._maxEntries = Math.max(4, maxEntries);
        this._minEntries = Math.max(2, Math.ceil(this._maxEntries * 0.4));
        this.clear();
    };

    RBush.prototype.all = function all () {
        return this._all(this.data, []);
    };

    RBush.prototype.search = function search (bbox) {
        var node = this.data;
        var result = [];

        if (!intersects(bbox, node)) { return result; }

        var toBBox = this.toBBox;
        var nodesToSearch = [];

        while (node) {
            for (var i = 0; i < node.children.length; i++) {
                var child = node.children[i];
                var childBBox = node.leaf ? toBBox(child) : child;

                if (intersects(bbox, childBBox)) {
                    if (node.leaf) { result.push(child); }
                    else if (contains(bbox, childBBox)) { this._all(child, result); }
                    else { nodesToSearch.push(child); }
                }
            }
            node = nodesToSearch.pop();
        }

        return result;
    };

    RBush.prototype.collides = function collides (bbox) {
        var node = this.data;

        if (!intersects(bbox, node)) { return false; }

        var nodesToSearch = [];
        while (node) {
            for (var i = 0; i < node.children.length; i++) {
                var child = node.children[i];
                var childBBox = node.leaf ? this.toBBox(child) : child;

                if (intersects(bbox, childBBox)) {
                    if (node.leaf || contains(bbox, childBBox)) { return true; }
                    nodesToSearch.push(child);
                }
            }
            node = nodesToSearch.pop();
        }

        return false;
    };

    RBush.prototype.load = function load (data) {
        if (!(data && data.length)) { return this; }

        if (data.length < this._minEntries) {
            for (var i = 0; i < data.length; i++) {
                this.insert(data[i]);
            }
            return this;
        }

        // recursively build the tree with the given data from scratch using OMT algorithm
        var node = this._build(data.slice(), 0, data.length - 1, 0);

        if (!this.data.children.length) {
            // save as is if tree is empty
            this.data = node;

        } else if (this.data.height === node.height) {
            // split root if trees have the same height
            this._splitRoot(this.data, node);

        } else {
            if (this.data.height < node.height) {
                // swap trees if inserted one is bigger
                var tmpNode = this.data;
                this.data = node;
                node = tmpNode;
            }

            // insert the small tree into the large tree at appropriate level
            this._insert(node, this.data.height - node.height - 1, true);
        }

        return this;
    };

    RBush.prototype.insert = function insert (item) {
        if (item) { this._insert(item, this.data.height - 1); }
        return this;
    };

    RBush.prototype.clear = function clear () {
        this.data = createNode([]);
        return this;
    };

    RBush.prototype.remove = function remove (item, equalsFn) {
        if (!item) { return this; }

        var node = this.data;
        var bbox = this.toBBox(item);
        var path = [];
        var indexes = [];
        var i, parent, goingUp;

        // depth-first iterative tree traversal
        while (node || path.length) {

            if (!node) { // go up
                node = path.pop();
                parent = path[path.length - 1];
                i = indexes.pop();
                goingUp = true;
            }

            if (node.leaf) { // check current node
                var index = findItem(item, node.children, equalsFn);

                if (index !== -1) {
                    // item found, remove the item and condense tree upwards
                    node.children.splice(index, 1);
                    path.push(node);
                    this._condense(path);
                    return this;
                }
            }

            if (!goingUp && !node.leaf && contains(node, bbox)) { // go down
                path.push(node);
                indexes.push(i);
                i = 0;
                parent = node;
                node = node.children[0];

            } else if (parent) { // go right
                i++;
                node = parent.children[i];
                goingUp = false;

            } else { node = null; } // nothing found
        }

        return this;
    };

    RBush.prototype.toBBox = function toBBox (item) { return item; };

    RBush.prototype.compareMinX = function compareMinX (a, b) { return a.minX - b.minX; };
    RBush.prototype.compareMinY = function compareMinY (a, b) { return a.minY - b.minY; };

    RBush.prototype.toJSON = function toJSON () { return this.data; };

    RBush.prototype.fromJSON = function fromJSON (data) {
        this.data = data;
        return this;
    };

    RBush.prototype._all = function _all (node, result) {
        var nodesToSearch = [];
        while (node) {
            if (node.leaf) { result.push.apply(result, node.children); }
            else { nodesToSearch.push.apply(nodesToSearch, node.children); }

            node = nodesToSearch.pop();
        }
        return result;
    };

    RBush.prototype._build = function _build (items, left, right, height) {

        var N = right - left + 1;
        var M = this._maxEntries;
        var node;

        if (N <= M) {
            // reached leaf level; return leaf
            node = createNode(items.slice(left, right + 1));
            calcBBox(node, this.toBBox);
            return node;
        }

        if (!height) {
            // target height of the bulk-loaded tree
            height = Math.ceil(Math.log(N) / Math.log(M));

            // target number of root entries to maximize storage utilization
            M = Math.ceil(N / Math.pow(M, height - 1));
        }

        node = createNode([]);
        node.leaf = false;
        node.height = height;

        // split the items into M mostly square tiles

        var N2 = Math.ceil(N / M);
        var N1 = N2 * Math.ceil(Math.sqrt(M));

        multiSelect(items, left, right, N1, this.compareMinX);

        for (var i = left; i <= right; i += N1) {

            var right2 = Math.min(i + N1 - 1, right);

            multiSelect(items, i, right2, N2, this.compareMinY);

            for (var j = i; j <= right2; j += N2) {

                var right3 = Math.min(j + N2 - 1, right2);

                // pack each entry recursively
                node.children.push(this._build(items, j, right3, height - 1));
            }
        }

        calcBBox(node, this.toBBox);

        return node;
    };

    RBush.prototype._chooseSubtree = function _chooseSubtree (bbox, node, level, path) {
        while (true) {
            path.push(node);

            if (node.leaf || path.length - 1 === level) { break; }

            var minArea = Infinity;
            var minEnlargement = Infinity;
            var targetNode = (void 0);

            for (var i = 0; i < node.children.length; i++) {
                var child = node.children[i];
                var area = bboxArea(child);
                var enlargement = enlargedArea(bbox, child) - area;

                // choose entry with the least area enlargement
                if (enlargement < minEnlargement) {
                    minEnlargement = enlargement;
                    minArea = area < minArea ? area : minArea;
                    targetNode = child;

                } else if (enlargement === minEnlargement) {
                    // otherwise choose one with the smallest area
                    if (area < minArea) {
                        minArea = area;
                        targetNode = child;
                    }
                }
            }

            node = targetNode || node.children[0];
        }

        return node;
    };

    RBush.prototype._insert = function _insert (item, level, isNode) {
        var bbox = isNode ? item : this.toBBox(item);
        var insertPath = [];

        // find the best node for accommodating the item, saving all nodes along the path too
        var node = this._chooseSubtree(bbox, this.data, level, insertPath);

        // put the item into the node
        node.children.push(item);
        extend(node, bbox);

        // split on node overflow; propagate upwards if necessary
        while (level >= 0) {
            if (insertPath[level].children.length > this._maxEntries) {
                this._split(insertPath, level);
                level--;
            } else { break; }
        }

        // adjust bboxes along the insertion path
        this._adjustParentBBoxes(bbox, insertPath, level);
    };

    // split overflowed node into two
    RBush.prototype._split = function _split (insertPath, level) {
        var node = insertPath[level];
        var M = node.children.length;
        var m = this._minEntries;

        this._chooseSplitAxis(node, m, M);

        var splitIndex = this._chooseSplitIndex(node, m, M);

        var newNode = createNode(node.children.splice(splitIndex, node.children.length - splitIndex));
        newNode.height = node.height;
        newNode.leaf = node.leaf;

        calcBBox(node, this.toBBox);
        calcBBox(newNode, this.toBBox);

        if (level) { insertPath[level - 1].children.push(newNode); }
        else { this._splitRoot(node, newNode); }
    };

    RBush.prototype._splitRoot = function _splitRoot (node, newNode) {
        // split root node
        this.data = createNode([node, newNode]);
        this.data.height = node.height + 1;
        this.data.leaf = false;
        calcBBox(this.data, this.toBBox);
    };

    RBush.prototype._chooseSplitIndex = function _chooseSplitIndex (node, m, M) {
        var index;
        var minOverlap = Infinity;
        var minArea = Infinity;

        for (var i = m; i <= M - m; i++) {
            var bbox1 = distBBox(node, 0, i, this.toBBox);
            var bbox2 = distBBox(node, i, M, this.toBBox);

            var overlap = intersectionArea(bbox1, bbox2);
            var area = bboxArea(bbox1) + bboxArea(bbox2);

            // choose distribution with minimum overlap
            if (overlap < minOverlap) {
                minOverlap = overlap;
                index = i;

                minArea = area < minArea ? area : minArea;

            } else if (overlap === minOverlap) {
                // otherwise choose distribution with minimum area
                if (area < minArea) {
                    minArea = area;
                    index = i;
                }
            }
        }

        return index || M - m;
    };

    // sorts node children by the best axis for split
    RBush.prototype._chooseSplitAxis = function _chooseSplitAxis (node, m, M) {
        var compareMinX = node.leaf ? this.compareMinX : compareNodeMinX;
        var compareMinY = node.leaf ? this.compareMinY : compareNodeMinY;
        var xMargin = this._allDistMargin(node, m, M, compareMinX);
        var yMargin = this._allDistMargin(node, m, M, compareMinY);

        // if total distributions margin value is minimal for x, sort by minX,
        // otherwise it's already sorted by minY
        if (xMargin < yMargin) { node.children.sort(compareMinX); }
    };

    // total margin of all possible split distributions where each node is at least m full
    RBush.prototype._allDistMargin = function _allDistMargin (node, m, M, compare) {
        node.children.sort(compare);

        var toBBox = this.toBBox;
        var leftBBox = distBBox(node, 0, m, toBBox);
        var rightBBox = distBBox(node, M - m, M, toBBox);
        var margin = bboxMargin(leftBBox) + bboxMargin(rightBBox);

        for (var i = m; i < M - m; i++) {
            var child = node.children[i];
            extend(leftBBox, node.leaf ? toBBox(child) : child);
            margin += bboxMargin(leftBBox);
        }

        for (var i$1 = M - m - 1; i$1 >= m; i$1--) {
            var child$1 = node.children[i$1];
            extend(rightBBox, node.leaf ? toBBox(child$1) : child$1);
            margin += bboxMargin(rightBBox);
        }

        return margin;
    };

    RBush.prototype._adjustParentBBoxes = function _adjustParentBBoxes (bbox, path, level) {
        // adjust bboxes along the given tree path
        for (var i = level; i >= 0; i--) {
            extend(path[i], bbox);
        }
    };

    RBush.prototype._condense = function _condense (path) {
        // go through the path, removing empty nodes and updating bboxes
        for (var i = path.length - 1, siblings = (void 0); i >= 0; i--) {
            if (path[i].children.length === 0) {
                if (i > 0) {
                    siblings = path[i - 1].children;
                    siblings.splice(siblings.indexOf(path[i]), 1);

                } else { this.clear(); }

            } else { calcBBox(path[i], this.toBBox); }
        }
    };

    function findItem(item, items, equalsFn) {
        if (!equalsFn) { return items.indexOf(item); }

        for (var i = 0; i < items.length; i++) {
            if (equalsFn(item, items[i])) { return i; }
        }
        return -1;
    }

    // calculate node's bbox from bboxes of its children
    function calcBBox(node, toBBox) {
        distBBox(node, 0, node.children.length, toBBox, node);
    }

    // min bounding rectangle of node children from k to p-1
    function distBBox(node, k, p, toBBox, destNode) {
        if (!destNode) { destNode = createNode(null); }
        destNode.minX = Infinity;
        destNode.minY = Infinity;
        destNode.maxX = -Infinity;
        destNode.maxY = -Infinity;

        for (var i = k; i < p; i++) {
            var child = node.children[i];
            extend(destNode, node.leaf ? toBBox(child) : child);
        }

        return destNode;
    }

    function extend(a, b) {
        a.minX = Math.min(a.minX, b.minX);
        a.minY = Math.min(a.minY, b.minY);
        a.maxX = Math.max(a.maxX, b.maxX);
        a.maxY = Math.max(a.maxY, b.maxY);
        return a;
    }

    function compareNodeMinX(a, b) { return a.minX - b.minX; }
    function compareNodeMinY(a, b) { return a.minY - b.minY; }

    function bboxArea(a)   { return (a.maxX - a.minX) * (a.maxY - a.minY); }
    function bboxMargin(a) { return (a.maxX - a.minX) + (a.maxY - a.minY); }

    function enlargedArea(a, b) {
        return (Math.max(b.maxX, a.maxX) - Math.min(b.minX, a.minX)) *
               (Math.max(b.maxY, a.maxY) - Math.min(b.minY, a.minY));
    }

    function intersectionArea(a, b) {
        var minX = Math.max(a.minX, b.minX);
        var minY = Math.max(a.minY, b.minY);
        var maxX = Math.min(a.maxX, b.maxX);
        var maxY = Math.min(a.maxY, b.maxY);

        return Math.max(0, maxX - minX) *
               Math.max(0, maxY - minY);
    }

    function contains(a, b) {
        return a.minX <= b.minX &&
               a.minY <= b.minY &&
               b.maxX <= a.maxX &&
               b.maxY <= a.maxY;
    }

    function intersects(a, b) {
        return b.minX <= a.maxX &&
               b.minY <= a.maxY &&
               b.maxX >= a.minX &&
               b.maxY >= a.minY;
    }

    function createNode(children) {
        return {
            children: children,
            height: 1,
            leaf: true,
            minX: Infinity,
            minY: Infinity,
            maxX: -Infinity,
            maxY: -Infinity
        };
    }

    // sort an array so that items come in groups of n unsorted items, with groups sorted between each other;
    // combines selection algorithm with binary divide & conquer approach

    function multiSelect(arr, left, right, n, compare) {
        var stack = [left, right];

        while (stack.length) {
            right = stack.pop();
            left = stack.pop();

            if (right - left <= n) { continue; }

            var mid = left + Math.ceil((right - left) / n / 2) * n;
            quickselect(arr, mid, left, right, compare);

            stack.push(left, mid, mid, right);
        }
    }

    return RBush;

    }));
    }(rbush));

    var RBush = rbush.exports;

    var Shape;
    (function (Shape) {
        Shape["GROUP"] = "g";
        Shape["CIRCLE"] = "circle";
        Shape["ELLIPSE"] = "ellipse";
        Shape["IMAGE"] = "image";
        Shape["RECT"] = "rect";
        Shape["LINE"] = "line";
        Shape["POLYLINE"] = "polyline";
        Shape["POLYGON"] = "polygon";
        Shape["TEXT"] = "text";
        Shape["PATH"] = "path";
        Shape["HTML"] = "html";
        Shape["MESH"] = "mesh";
    })(Shape || (Shape = {}));
    var ClipSpaceNearZ;
    (function (ClipSpaceNearZ) {
        ClipSpaceNearZ[ClipSpaceNearZ["ZERO"] = 0] = "ZERO";
        ClipSpaceNearZ[ClipSpaceNearZ["NEGATIVE_ONE"] = 1] = "NEGATIVE_ONE";
    })(ClipSpaceNearZ || (ClipSpaceNearZ = {}));

    var AbstractRendererPlugin = /** @class */ (function () {
        function AbstractRendererPlugin() {
            this.plugins = [];
        }
        AbstractRendererPlugin.prototype.addRenderingPlugin = function (plugin) {
            this.plugins.push(plugin);
            this.context.renderingPlugins.push(plugin);
        };
        AbstractRendererPlugin.prototype.removeAllRenderingPlugins = function () {
            var _this = this;
            this.plugins.forEach(function (plugin) {
                var index = _this.context.renderingPlugins.indexOf(plugin);
                if (index >= 0) {
                    _this.context.renderingPlugins.splice(index, 1);
                }
            });
        };
        return AbstractRendererPlugin;
    }());
    var AbstractRenderer = /** @class */ (function () {
        function AbstractRenderer(config) {
            this.clipSpaceNearZ = ClipSpaceNearZ.NEGATIVE_ONE;
            this.plugins = [];
            this.config = __assign({ 
                /**
                 * only dirty object will cause re-render
                 */
                enableDirtyCheck: true, enableCulling: false, 
                /**
                 * enable auto rendering by default
                 */
                enableAutoRendering: true, 
                /**
                 * enable dirty rectangle rendering by default
                 */
                enableDirtyRectangleRendering: true, enableDirtyRectangleRenderingDebug: false, enableSizeAttenuation: true }, config);
        }
        AbstractRenderer.prototype.registerPlugin = function (plugin) {
            var index = this.plugins.findIndex(function (p) { return p === plugin; });
            if (index === -1) {
                this.plugins.push(plugin);
            }
        };
        AbstractRenderer.prototype.unregisterPlugin = function (plugin) {
            var index = this.plugins.findIndex(function (p) { return p === plugin; });
            if (index > -1) {
                this.plugins.splice(index, 1);
            }
        };
        AbstractRenderer.prototype.getPlugins = function () {
            return this.plugins;
        };
        AbstractRenderer.prototype.getPlugin = function (name) {
            return this.plugins.find(function (plugin) { return plugin.name === name; });
        };
        AbstractRenderer.prototype.getConfig = function () {
            return this.config;
        };
        AbstractRenderer.prototype.setConfig = function (config) {
            Object.assign(this.config, config);
        };
        return AbstractRenderer;
    }());

    function copyVec3(a, b) {
        a[0] = b[0];
        a[1] = b[1];
        a[2] = b[2];
        return a;
    }
    function subVec3(o, a, b) {
        o[0] = a[0] - b[0];
        o[1] = a[1] - b[1];
        o[2] = a[2] - b[2];
        return o;
    }
    function addVec3(o, a, b) {
        o[0] = a[0] + b[0];
        o[1] = a[1] + b[1];
        o[2] = a[2] + b[2];
        return o;
    }
    function scaleVec3(o, a, b) {
        o[0] = a[0] * b;
        o[1] = a[1] * b;
        o[2] = a[2] * b;
        return o;
    }
    function maxVec3(o, a, b) {
        o[0] = Math.max(a[0], b[0]);
        o[1] = Math.max(a[1], b[1]);
        o[2] = Math.max(a[2], b[2]);
        return o;
    }
    function minVec3(o, a, b) {
        o[0] = Math.min(a[0], b[0]);
        o[1] = Math.min(a[1], b[1]);
        o[2] = Math.min(a[2], b[2]);
        return o;
    }
    function getAngle(angle) {
        if (angle === undefined) {
            return 0;
        }
        else if (angle > 360 || angle < -360) {
            return angle % 360;
        }
        return angle;
    }
    function createVec3(x, y, z) {
        if (y === void 0) { y = 0; }
        if (z === void 0) { z = 0; }
        if (Array.isArray(x) && x.length === 3) {
            return clone$2(x);
        }
        if (isNumber(x)) {
            return fromValues$2(x, y, z);
        }
        return fromValues$2(x[0], x[1] || y, x[2] || z);
    }
    function deg2rad(deg) {
        return deg * (Math.PI / 180);
    }
    function rad2deg(rad) {
        return rad * (180 / Math.PI);
    }
    function turn2deg(turn) {
        return 360 * turn;
    }
    function getEulerFromQuat(out, quat) {
        var x = quat[0];
        var y = quat[1];
        var z = quat[2];
        var w = quat[3];
        var x2 = x * x;
        var y2 = y * y;
        var z2 = z * z;
        var w2 = w * w;
        var unit = x2 + y2 + z2 + w2;
        var test = x * w - y * z;
        if (test > 0.499995 * unit) {
            // TODO: Use glmatrix.EPSILON
            // singularity at the north pole
            out[0] = Math.PI / 2;
            out[1] = 2 * Math.atan2(y, x);
            out[2] = 0;
        }
        else if (test < -0.499995 * unit) {
            //TODO: Use glmatrix.EPSILON
            // singularity at the south pole
            out[0] = -Math.PI / 2;
            out[1] = 2 * Math.atan2(y, x);
            out[2] = 0;
        }
        else {
            out[0] = Math.asin(2 * (x * z - w * y));
            out[1] = Math.atan2(2 * (x * w + y * z), 1 - 2 * (z2 + w2));
            out[2] = Math.atan2(2 * (x * y + z * w), 1 - 2 * (y2 + z2));
        }
        // TODO: Return them as degrees and not as radians
        return out;
    }
    function getEulerFromMat4(out, m) {
        var x;
        var z;
        var halfPi = Math.PI * 0.5;
        var _a = __read(getScaling(create$2(), m), 3), sx = _a[0], sy = _a[1], sz = _a[2];
        var y = Math.asin(-m[2] / sx);
        if (y < halfPi) {
            if (y > -halfPi) {
                x = Math.atan2(m[6] / sy, m[10] / sz);
                z = Math.atan2(m[1] / sx, m[0] / sx);
            }
            else {
                // Not a unique solution
                z = 0;
                x = -Math.atan2(m[4] / sy, m[5] / sy);
            }
        }
        else {
            // Not a unique solution
            z = 0;
            x = Math.atan2(m[4] / sy, m[5] / sy);
        }
        out[0] = x;
        out[1] = y;
        out[2] = z;
        return out;
    }
    /**
     * @see https://github.com/toji/gl-matrix/issues/329
     * @see https://doc.babylonjs.com/divingDeeper/mesh/transforms/center_origin/rotation_conventions
     */
    function getEuler(out, quat) {
        if (quat.length === 16) {
            return getEulerFromMat4(out, quat);
        }
        else {
            return getEulerFromQuat(out, quat);
        }
    }
    function fromRotationTranslationScale$1(rotation, x, y, scaleX, scaleY) {
        var cos = Math.cos(rotation);
        var sin = Math.sin(rotation);
        return fromValues(scaleX * cos, scaleY * sin, 0, -scaleX * sin, scaleY * cos, 0, x, y, 1);
    }
    function makePerspective(out, left, right, top, bottom, near, far, zero) {
        if (zero === void 0) { zero = false; }
        var x = (2 * near) / (right - left);
        var y = (2 * near) / (top - bottom);
        var a = (right + left) / (right - left);
        var b = (top + bottom) / (top - bottom);
        var c;
        var d;
        if (zero) {
            c = -far / (far - near);
            d = (-far * near) / (far - near);
        }
        else {
            c = -(far + near) / (far - near);
            d = (-2 * far * near) / (far - near);
        }
        out[0] = x;
        out[1] = 0;
        out[2] = 0;
        out[3] = 0;
        out[4] = 0;
        out[5] = y;
        out[6] = 0;
        out[7] = 0;
        out[8] = a;
        out[9] = b;
        out[10] = c;
        out[11] = -1;
        out[12] = 0;
        out[13] = 0;
        out[14] = d;
        out[15] = 0;
        return out;
    }
    function decompose(mat) {
        var row0x = mat[0];
        var row0y = mat[1];
        var row1x = mat[3];
        var row1y = mat[4];
        // decompose 3x3 matrix
        // @see https://www.w3.org/TR/css-transforms-1/#decomposing-a-2d-matrix
        var scalingX = Math.sqrt(row0x * row0x + row0y * row0y);
        var scalingY = Math.sqrt(row1x * row1x + row1y * row1y);
        // If determinant is negative, one axis was flipped.
        var determinant = row0x * row1y - row0y * row1x;
        if (determinant < 0) {
            // Flip axis with minimum unit vector dot product.
            if (row0x < row1y) {
                scalingX = -scalingX;
            }
            else {
                scalingY = -scalingY;
            }
        }
        // Renormalize matrix to remove scale.
        if (scalingX) {
            row0x *= 1 / scalingX;
            row0y *= 1 / scalingX;
        }
        if (scalingY) {
            row1x *= 1 / scalingY;
            row1y *= 1 / scalingY;
        }
        // Compute rotation and renormalize matrix.
        var rotation = Math.atan2(row0y, row0x);
        var angle = rad2deg(rotation);
        return [mat[6], mat[7], scalingX, scalingY, angle];
    }
    var tmp = create$1();
    var perspectiveMatrix = create$1();
    var tmpVec4 = create$3();
    var row = [create$2(), create$2(), create$2()];
    var pdum3 = create$2();
    /*
    Input:  matrix      ; a 4x4 matrix
    Output: translation ; a 3 component vector
            scale       ; a 3 component vector
            skew        ; skew factors XY,XZ,YZ represented as a 3 component vector
            perspective ; a 4 component vector
            quaternion  ; a 4 component vector
    Returns false if the matrix cannot be decomposed, true if it can


    References:
    https://github.com/kamicane/matrix3d/blob/master/lib/Matrix3d.js
    https://github.com/ChromiumWebApps/chromium/blob/master/ui/gfx/transform_util.cc
    http://www.w3.org/TR/css3-transforms/#decomposing-a-3d-matrix
    */
    function decomposeMat4(matrix, translation, scale, skew, perspective, quaternion) {
        //normalize, if not possible then bail out early
        if (!normalize$4(tmp, matrix))
            return false;
        // perspectiveMatrix is used to solve for perspective, but it also provides
        // an easy way to test for singularity of the upper 3x3 component.
        copy(perspectiveMatrix, tmp);
        perspectiveMatrix[3] = 0;
        perspectiveMatrix[7] = 0;
        perspectiveMatrix[11] = 0;
        perspectiveMatrix[15] = 1;
        // If the perspectiveMatrix is not invertible, we are also unable to
        // decompose, so we'll bail early. Constant taken from SkMatrix44::invert.
        if (Math.abs(determinant(perspectiveMatrix)) < 1e-8)
            return false;
        var a03 = tmp[3], a13 = tmp[7], a23 = tmp[11], a30 = tmp[12], a31 = tmp[13], a32 = tmp[14], a33 = tmp[15];
        // First, isolate perspective.
        if (a03 !== 0 || a13 !== 0 || a23 !== 0) {
            tmpVec4[0] = a03;
            tmpVec4[1] = a13;
            tmpVec4[2] = a23;
            tmpVec4[3] = a33;
            // Solve the equation by inverting perspectiveMatrix and multiplying
            // rightHandSide by the inverse.
            // resuing the perspectiveMatrix here since it's no longer needed
            var ret = invert(perspectiveMatrix, perspectiveMatrix);
            if (!ret)
                return false;
            transpose(perspectiveMatrix, perspectiveMatrix);
            //multiply by transposed inverse perspective matrix, into perspective vec4
            transformMat4$1(perspective, tmpVec4, perspectiveMatrix);
        }
        else {
            //no perspective
            perspective[0] = perspective[1] = perspective[2] = 0;
            perspective[3] = 1;
        }
        // Next take care of translation
        translation[0] = a30;
        translation[1] = a31;
        translation[2] = a32;
        // Now get scale and shear. 'row' is a 3 element array of 3 component vectors
        mat3from4(row, tmp);
        // Compute X scale factor and normalize first row.
        scale[0] = length(row[0]);
        normalize(row[0], row[0]);
        // Compute XY shear factor and make 2nd row orthogonal to 1st.
        skew[0] = dot(row[0], row[1]);
        combine(row[1], row[1], row[0], 1.0, -skew[0]);
        // Now, compute Y scale and normalize 2nd row.
        scale[1] = length(row[1]);
        normalize(row[1], row[1]);
        skew[0] /= scale[1];
        // Compute XZ and YZ shears, orthogonalize 3rd row
        skew[1] = dot(row[0], row[2]);
        combine(row[2], row[2], row[0], 1.0, -skew[1]);
        skew[2] = dot(row[1], row[2]);
        combine(row[2], row[2], row[1], 1.0, -skew[2]);
        // Next, get Z scale and normalize 3rd row.
        scale[2] = length(row[2]);
        normalize(row[2], row[2]);
        skew[1] /= scale[2];
        skew[2] /= scale[2];
        // At this point, the matrix (in rows) is orthonormal.
        // Check for a coordinate system flip.  If the determinant
        // is -1, then negate the matrix and the scaling factors.
        cross(pdum3, row[1], row[2]);
        if (dot(row[0], pdum3) < 0) {
            for (var i = 0; i < 3; i++) {
                scale[i] *= -1;
                row[i][0] *= -1;
                row[i][1] *= -1;
                row[i][2] *= -1;
            }
        }
        // Now, get the rotations out
        quaternion[0] =
            0.5 * Math.sqrt(Math.max(1 + row[0][0] - row[1][1] - row[2][2], 0));
        quaternion[1] =
            0.5 * Math.sqrt(Math.max(1 - row[0][0] + row[1][1] - row[2][2], 0));
        quaternion[2] =
            0.5 * Math.sqrt(Math.max(1 - row[0][0] - row[1][1] + row[2][2], 0));
        quaternion[3] =
            0.5 * Math.sqrt(Math.max(1 + row[0][0] + row[1][1] + row[2][2], 0));
        if (row[2][1] > row[1][2])
            quaternion[0] = -quaternion[0];
        if (row[0][2] > row[2][0])
            quaternion[1] = -quaternion[1];
        if (row[1][0] > row[0][1])
            quaternion[2] = -quaternion[2];
        return true;
    }
    function normalize$4(out, mat) {
        var m44 = mat[15];
        // Cannot normalize.
        if (m44 === 0)
            return false;
        var scale = 1 / m44;
        for (var i = 0; i < 16; i++)
            out[i] = mat[i] * scale;
        return true;
    }
    //gets upper-left of a 4x4 matrix into a 3x3 of vectors
    function mat3from4(out, mat4x4) {
        out[0][0] = mat4x4[0];
        out[0][1] = mat4x4[1];
        out[0][2] = mat4x4[2];
        out[1][0] = mat4x4[4];
        out[1][1] = mat4x4[5];
        out[1][2] = mat4x4[6];
        out[2][0] = mat4x4[8];
        out[2][1] = mat4x4[9];
        out[2][2] = mat4x4[10];
    }
    function combine(out, a, b, scale1, scale2) {
        out[0] = a[0] * scale1 + b[0] * scale2;
        out[1] = a[1] * scale1 + b[1] * scale2;
        out[2] = a[2] * scale1 + b[2] * scale2;
    }

    /**
     * Axis-Aligned Bounding Box
     * 为了便于后续 Frustum Culling，通过查找表定义 p-vertex 和 n-vertex
     * @see https://github.com/antvis/GWebGPUEngine/issues/3
     */
    var AABB = /** @class */ (function () {
        function AABB() {
            this.center = [0, 0, 0];
            this.halfExtents = [0, 0, 0];
            this.min = [0, 0, 0];
            this.max = [0, 0, 0];
        }
        AABB.isEmpty = function (aabb) {
            return (!aabb ||
                (aabb.halfExtents[0] === 0 &&
                    aabb.halfExtents[1] === 0 &&
                    aabb.halfExtents[2] === 0));
        };
        // center: vec3 = vec3.create();
        // halfExtents: vec3 = vec3.create();
        // min: vec3 = vec3.create();
        // max: vec3 = vec3.create();
        AABB.prototype.update = function (center, halfExtents) {
            copyVec3(this.center, center);
            copyVec3(this.halfExtents, halfExtents);
            subVec3(this.min, this.center, this.halfExtents);
            addVec3(this.max, this.center, this.halfExtents);
            // vec3.copy(this.center, center);
            // vec3.copy(this.halfExtents, halfExtents);
            // vec3.sub(this.min, this.center, this.halfExtents);
            // vec3.add(this.max, this.center, this.halfExtents);
        };
        AABB.prototype.setMinMax = function (min, max) {
            // vec3.add(this.center, max, min);
            // vec3.scale(this.center, this.center, 0.5);
            // vec3.sub(this.halfExtents, max, min);
            // vec3.scale(this.halfExtents, this.halfExtents, 0.5);
            // vec3.copy(this.min, min);
            // vec3.copy(this.max, max);
            addVec3(this.center, max, min);
            scaleVec3(this.center, this.center, 0.5);
            subVec3(this.halfExtents, max, min);
            scaleVec3(this.halfExtents, this.halfExtents, 0.5);
            copyVec3(this.min, min);
            copyVec3(this.max, max);
        };
        AABB.prototype.getMin = function () {
            return this.min;
        };
        AABB.prototype.getMax = function () {
            return this.max;
        };
        AABB.prototype.add = function (aabb) {
            if (AABB.isEmpty(aabb)) {
                return;
            }
            if (AABB.isEmpty(this)) {
                this.setMinMax(aabb.getMin(), aabb.getMax());
                return;
            }
            var tc = this.center;
            var tcx = tc[0];
            var tcy = tc[1];
            var tcz = tc[2];
            var th = this.halfExtents;
            var thx = th[0];
            var thy = th[1];
            var thz = th[2];
            var tminx = tcx - thx;
            var tmaxx = tcx + thx;
            var tminy = tcy - thy;
            var tmaxy = tcy + thy;
            var tminz = tcz - thz;
            var tmaxz = tcz + thz;
            var oc = aabb.center;
            var ocx = oc[0];
            var ocy = oc[1];
            var ocz = oc[2];
            var oh = aabb.halfExtents;
            var ohx = oh[0];
            var ohy = oh[1];
            var ohz = oh[2];
            var ominx = ocx - ohx;
            var omaxx = ocx + ohx;
            var ominy = ocy - ohy;
            var omaxy = ocy + ohy;
            var ominz = ocz - ohz;
            var omaxz = ocz + ohz;
            if (ominx < tminx) {
                tminx = ominx;
            }
            if (omaxx > tmaxx) {
                tmaxx = omaxx;
            }
            if (ominy < tminy) {
                tminy = ominy;
            }
            if (omaxy > tmaxy) {
                tmaxy = omaxy;
            }
            if (ominz < tminz) {
                tminz = ominz;
            }
            if (omaxz > tmaxz) {
                tmaxz = omaxz;
            }
            tc[0] = (tminx + tmaxx) * 0.5;
            tc[1] = (tminy + tmaxy) * 0.5;
            tc[2] = (tminz + tmaxz) * 0.5;
            th[0] = (tmaxx - tminx) * 0.5;
            th[1] = (tmaxy - tminy) * 0.5;
            th[2] = (tmaxz - tminz) * 0.5;
            this.min[0] = tminx;
            this.min[1] = tminy;
            this.min[2] = tminz;
            this.max[0] = tmaxx;
            this.max[1] = tmaxy;
            this.max[2] = tmaxz;
        };
        AABB.prototype.setFromTransformedAABB = function (aabb, m) {
            var bc = this.center;
            var br = this.halfExtents;
            var ac = aabb.center;
            var ar = aabb.halfExtents;
            var mx0 = m[0];
            var mx1 = m[4];
            var mx2 = m[8];
            var my0 = m[1];
            var my1 = m[5];
            var my2 = m[9];
            var mz0 = m[2];
            var mz1 = m[6];
            var mz2 = m[10];
            var mx0a = Math.abs(mx0);
            var mx1a = Math.abs(mx1);
            var mx2a = Math.abs(mx2);
            var my0a = Math.abs(my0);
            var my1a = Math.abs(my1);
            var my2a = Math.abs(my2);
            var mz0a = Math.abs(mz0);
            var mz1a = Math.abs(mz1);
            var mz2a = Math.abs(mz2);
            bc[0] = m[12] + mx0 * ac[0] + mx1 * ac[1] + mx2 * ac[2];
            bc[1] = m[13] + my0 * ac[0] + my1 * ac[1] + my2 * ac[2];
            bc[2] = m[14] + mz0 * ac[0] + mz1 * ac[1] + mz2 * ac[2];
            // vec3.set(
            //   bc,
            //   m[12] + mx0 * ac[0] + mx1 * ac[1] + mx2 * ac[2],
            //   m[13] + my0 * ac[0] + my1 * ac[1] + my2 * ac[2],
            //   m[14] + mz0 * ac[0] + mz1 * ac[1] + mz2 * ac[2],
            // );
            br[0] = mx0a * ar[0] + mx1a * ar[1] + mx2a * ar[2];
            br[1] = my0a * ar[0] + my1a * ar[1] + my2a * ar[2];
            br[2] = mz0a * ar[0] + mz1a * ar[1] + mz2a * ar[2];
            // vec3.set(
            //   br,
            //   mx0a * ar[0] + mx1a * ar[1] + mx2a * ar[2],
            //   my0a * ar[0] + my1a * ar[1] + my2a * ar[2],
            //   mz0a * ar[0] + mz1a * ar[1] + mz2a * ar[2],
            // );
            // this.min = vec3.sub(this.min, bc, br);
            // this.max = vec3.add(this.max, bc, br);
            subVec3(this.min, bc, br);
            addVec3(this.max, bc, br);
        };
        AABB.prototype.intersects = function (aabb) {
            var aMax = this.getMax();
            var aMin = this.getMin();
            var bMax = aabb.getMax();
            var bMin = aabb.getMin();
            return (aMin[0] <= bMax[0] &&
                aMax[0] >= bMin[0] &&
                aMin[1] <= bMax[1] &&
                aMax[1] >= bMin[1] &&
                aMin[2] <= bMax[2] &&
                aMax[2] >= bMin[2]);
        };
        AABB.prototype.intersection = function (aabb) {
            if (!this.intersects(aabb)) {
                return null;
            }
            var intersection = new AABB();
            // const min = vec3.max(vec3.create(), this.getMin(), aabb.getMin());
            // const max = vec3.min(vec3.create(), this.getMax(), aabb.getMax());
            var min = maxVec3([0, 0, 0], this.getMin(), aabb.getMin());
            var max = minVec3([0, 0, 0], this.getMax(), aabb.getMax());
            intersection.setMinMax(min, max);
            return intersection;
        };
        // containsPoint(point: vec3) {
        //   const min = this.getMin();
        //   const max = this.getMax();
        //   return !(
        //     point[0] < min[0] ||
        //     point[0] > max[0] ||
        //     point[1] < min[1] ||
        //     point[1] > max[1] ||
        //     point[2] < min[2] ||
        //     point[2] > max[2]
        //   );
        // }
        /**
         * get n-vertex
         * @param plane plane of CullingVolume
         */
        AABB.prototype.getNegativeFarPoint = function (plane) {
            if (plane.pnVertexFlag === 0x111) {
                return copyVec3([0, 0, 0], this.min);
                // return vec3.copy(vec3.create(), this.min);
            }
            else if (plane.pnVertexFlag === 0x110) {
                return [this.min[0], this.min[1], this.max[2]];
                // return vec3.fromValues(this.min[0], this.min[1], this.max[2]);
            }
            else if (plane.pnVertexFlag === 0x101) {
                return [this.min[0], this.max[1], this.min[2]];
                // return vec3.fromValues(this.min[0], this.max[1], this.min[2]);
            }
            else if (plane.pnVertexFlag === 0x100) {
                return [this.min[0], this.max[1], this.max[2]];
                // return vec3.fromValues(this.min[0], this.max[1], this.max[2]);
            }
            else if (plane.pnVertexFlag === 0x011) {
                return [this.max[0], this.min[1], this.min[2]];
                // return vec3.fromValues(this.max[0], this.min[1], this.min[2]);
            }
            else if (plane.pnVertexFlag === 0x010) {
                return [this.max[0], this.min[1], this.max[2]];
                // return vec3.fromValues(this.max[0], this.min[1], this.max[2]);
            }
            else if (plane.pnVertexFlag === 0x001) {
                return [this.max[0], this.max[1], this.min[2]];
                // return vec3.fromValues(this.max[0], this.max[1], this.min[2]);
            }
            else {
                return [this.max[0], this.max[1], this.max[2]];
                // return vec3.fromValues(this.max[0], this.max[1], this.max[2]);
            }
        };
        /**
         * get p-vertex
         * @param plane plane of CullingVolume
         */
        AABB.prototype.getPositiveFarPoint = function (plane) {
            if (plane.pnVertexFlag === 0x111) {
                return copyVec3([0, 0, 0], this.max);
                // return vec3.copy(vec3.create(), this.max);
            }
            else if (plane.pnVertexFlag === 0x110) {
                return [this.max[0], this.max[1], this.min[2]];
                // return vec3.fromValues(this.max[0], this.max[1], this.min[2]);
            }
            else if (plane.pnVertexFlag === 0x101) {
                return [this.max[0], this.min[1], this.max[2]];
                // return vec3.fromValues(this.max[0], this.min[1], this.max[2]);
            }
            else if (plane.pnVertexFlag === 0x100) {
                return [this.max[0], this.min[1], this.min[2]];
                // return vec3.fromValues(this.max[0], this.min[1], this.min[2]);
            }
            else if (plane.pnVertexFlag === 0x011) {
                return [this.min[0], this.max[1], this.max[2]];
                // return vec3.fromValues(this.min[0], this.max[1], this.max[2]);
            }
            else if (plane.pnVertexFlag === 0x010) {
                return [this.min[0], this.max[1], this.min[2]];
                // return vec3.fromValues(this.min[0], this.max[1], this.min[2]);
            }
            else if (plane.pnVertexFlag === 0x001) {
                return [this.min[0], this.min[1], this.max[2]];
                // return vec3.fromValues(this.min[0], this.min[1], this.max[2]);
            }
            else {
                return [this.min[0], this.min[1], this.min[2]];
                // return vec3.fromValues(this.min[0], this.min[1], this.min[2]);
            }
        };
        return AABB;
    }());

    var Plane = /** @class */ (function () {
        function Plane(distance, normal) {
            this.distance = distance || 0;
            this.normal = normal || fromValues$2(0, 1, 0);
            this.updatePNVertexFlag();
        }
        Plane.prototype.updatePNVertexFlag = function () {
            this.pnVertexFlag =
                (Number(this.normal[0] >= 0) << 8) +
                    (Number(this.normal[1] >= 0) << 4) +
                    Number(this.normal[2] >= 0);
        };
        Plane.prototype.distanceToPoint = function (point) {
            return dot(point, this.normal) - this.distance;
        };
        Plane.prototype.normalize = function () {
            var invLen = 1 / len(this.normal);
            scale$1(this.normal, this.normal, invLen);
            this.distance *= invLen;
        };
        Plane.prototype.intersectsLine = function (start, end, point) {
            var d0 = this.distanceToPoint(start);
            var d1 = this.distanceToPoint(end);
            var t = d0 / (d0 - d1);
            var intersects = t >= 0 && t <= 1;
            if (intersects && point) {
                lerp(point, start, end, t);
            }
            return intersects;
        };
        return Plane;
    }());

    var Mask;
    (function (Mask) {
        Mask[Mask["OUTSIDE"] = 4294967295] = "OUTSIDE";
        Mask[Mask["INSIDE"] = 0] = "INSIDE";
        Mask[Mask["INDETERMINATE"] = 2147483647] = "INDETERMINATE";
    })(Mask || (Mask = {}));
    var Frustum = /** @class */ (function () {
        function Frustum(planes) {
            this.planes = [];
            if (planes) {
                this.planes = planes;
            }
            else {
                for (var i = 0; i < 6; i++) {
                    this.planes.push(new Plane());
                }
            }
        }
        /**
         * extract 6 planes from projectionMatrix
         * @see http://www8.cs.umu.se/kurser/5DV051/HT12/lab/plane_extraction.pdf
         */
        Frustum.prototype.extractFromVPMatrix = function (projectionMatrix) {
            // @ts-ignore
            var _a = __read(projectionMatrix, 16), m0 = _a[0], m1 = _a[1], m2 = _a[2], m3 = _a[3], m4 = _a[4], m5 = _a[5], m6 = _a[6], m7 = _a[7], m8 = _a[8], m9 = _a[9], m10 = _a[10], m11 = _a[11], m12 = _a[12], m13 = _a[13], m14 = _a[14], m15 = _a[15];
            // right
            set$1(this.planes[0].normal, m3 - m0, m7 - m4, m11 - m8);
            this.planes[0].distance = m15 - m12;
            // left
            set$1(this.planes[1].normal, m3 + m0, m7 + m4, m11 + m8);
            this.planes[1].distance = m15 + m12;
            // bottom
            set$1(this.planes[2].normal, m3 + m1, m7 + m5, m11 + m9);
            this.planes[2].distance = m15 + m13;
            // top
            set$1(this.planes[3].normal, m3 - m1, m7 - m5, m11 - m9);
            this.planes[3].distance = m15 - m13;
            // far
            set$1(this.planes[4].normal, m3 - m2, m7 - m6, m11 - m10);
            this.planes[4].distance = m15 - m14;
            // near
            set$1(this.planes[5].normal, m3 + m2, m7 + m6, m11 + m10);
            this.planes[5].distance = m15 + m14;
            this.planes.forEach(function (plane) {
                plane.normalize();
                plane.updatePNVertexFlag();
            });
        };
        return Frustum;
    }());

    var Point = /** @class */ (function () {
        function Point(x, y) {
            if (x === void 0) { x = 0; }
            if (y === void 0) { y = 0; }
            this.x = 0;
            this.y = 0;
            this.x = x;
            this.y = y;
        }
        Point.prototype.clone = function () {
            return new Point(this.x, this.y);
        };
        Point.prototype.copyFrom = function (p) {
            this.x = p.x;
            this.y = p.y;
        };
        return Point;
    }());

    var Rectangle = /** @class */ (function () {
        function Rectangle(x, y, width, height) {
            this.x = x;
            this.y = y;
            this.width = width;
            this.height = height;
            this.left = x;
            this.right = x + width;
            this.top = y;
            this.bottom = y + height;
        }
        Rectangle.prototype.toJSON = function () { };
        return Rectangle;
    }());

    var ERROR_MSG_METHOD_NOT_IMPLEMENTED = 'Method not implemented.';
    var ERROR_MSG_USE_DOCUMENT_ELEMENT = 'Use document.documentElement instead.';
    var ERROR_MSG_APPEND_DESTROYED_ELEMENT = 'Cannot append a destroyed element.';

    /**
     * Different type of cameras, eg. simple camera used in 2D scene or
     * advanced camera which can do actions & switch between landmarks.
     */
    var CameraType;
    (function (CameraType) {
        /**
         * Performs all the rotational operations with the focal point instead of the camera position.
         * This type of camera is useful in applications(like CAD) where 3D objects are being designed or explored.
         * Camera cannot orbits over the north & south poles.
         * @see http://voxelent.com/tutorial-cameras/
         *
         * In Three.js it's used in OrbitControls.
         * @see https://threejs.org/docs/#examples/zh/controls/OrbitControls
         */
        CameraType[CameraType["ORBITING"] = 0] = "ORBITING";
        /**
         * It's similar to the ORBITING camera, but it allows the camera to orbit over the north or south poles.
         *
         * In Three.js it's used in OrbitControls.
         * @see https://threejs.org/docs/#examples/en/controls/TrackballControls
         */
        CameraType[CameraType["EXPLORING"] = 1] = "EXPLORING";
        /**
         * Performs all the rotational operations with the camera position.
         * It's useful in first person shooting games.
         * Camera cannot orbits over the north & south poles.
         *
         * In Three.js it's used in FirstPersonControls.
         * @see https://threejs.org/docs/#examples/en/controls/FirstPersonControls
         */
        CameraType[CameraType["TRACKING"] = 2] = "TRACKING";
    })(CameraType || (CameraType = {}));
    /**
     * CameraType must be TRACKING
     */
    var CameraTrackingMode;
    (function (CameraTrackingMode) {
        CameraTrackingMode[CameraTrackingMode["DEFAULT"] = 0] = "DEFAULT";
        CameraTrackingMode[CameraTrackingMode["ROTATIONAL"] = 1] = "ROTATIONAL";
        CameraTrackingMode[CameraTrackingMode["TRANSLATIONAL"] = 2] = "TRANSLATIONAL";
        CameraTrackingMode[CameraTrackingMode["CINEMATIC"] = 3] = "CINEMATIC";
    })(CameraTrackingMode || (CameraTrackingMode = {}));
    var CameraProjectionMode;
    (function (CameraProjectionMode) {
        CameraProjectionMode[CameraProjectionMode["ORTHOGRAPHIC"] = 0] = "ORTHOGRAPHIC";
        CameraProjectionMode[CameraProjectionMode["PERSPECTIVE"] = 1] = "PERSPECTIVE";
    })(CameraProjectionMode || (CameraProjectionMode = {}));
    var CameraEvent = {
        UPDATED: 'updated',
    };

    var MIN_DISTANCE = 0.0002;
    /**
     * 参考「WebGL Insights - 23.Designing Cameras for WebGL Applications」，基于 Responsible Camera 思路设计
     * @see https://github.com/d13g0/nucleo.js/blob/master/source/camera/Camera.js
     *
     * 保存相机参数，定义相机动作：
     * 1. dolly 沿 n 轴移动
     * 2. pan 沿 u v 轴移动
     * 3. rotate 以方位角旋转
     * 4. 移动到 Landmark，具有平滑的动画效果，其间禁止其他用户交互
     */
    var Camera = /** @class */ (function () {
        function Camera() {
            /**
             * Clip space near Z, default to range `[-1, 1]`
             */
            this.clipSpaceNearZ = ClipSpaceNearZ.NEGATIVE_ONE;
            this.eventEmitter = new eventemitter3();
            /**
             * Matrix of camera
             */
            this.matrix = create$1();
            /**
             * u axis +X is right
             * @see http://learnwebgl.brown37.net/07_cameras/camera_introduction.html#a-camera-definition
             */
            this.right = fromValues$2(1, 0, 0);
            /**
             * v axis +Y is up
             */
            this.up = fromValues$2(0, 1, 0);
            /**
             * n axis +Z is inside
             */
            this.forward = fromValues$2(0, 0, 1);
            /**
             * Position of camera.
             */
            this.position = fromValues$2(0, 0, 1);
            /**
             * Position of focal point.
             */
            this.focalPoint = fromValues$2(0, 0, 0);
            /**
             * vector from focalPoint to position
             */
            this.distanceVector = fromValues$2(0, 0, -1);
            /**
             * length(focalPoint - position)
             */
            this.distance = 1;
            /**
             * @see https://en.wikipedia.org/wiki/Azimuth
             */
            this.azimuth = 0;
            this.elevation = 0;
            this.roll = 0;
            this.relAzimuth = 0;
            this.relElevation = 0;
            this.relRoll = 0;
            /**
             * 沿 n 轴移动时，保证移动速度从快到慢
             */
            this.dollyingStep = 0;
            this.maxDistance = Infinity;
            this.minDistance = -Infinity;
            /**
             * zoom factor of the camera, default is 1
             * eg. https://threejs.org/docs/#api/en/cameras/OrthographicCamera.zoom
             */
            this.zoom = 1;
            /**
             * invert the horizontal coordinate system HCS
             */
            this.rotateWorld = false;
            /**
             * 投影矩阵参数
             */
            /**
             * field of view [0-360]
             * @see http://en.wikipedia.org/wiki/Angle_of_view
             */
            this.fov = 30;
            this.near = 0.1;
            this.far = 1000;
            this.aspect = 1;
            this.projectionMatrix = create$1();
            this.projectionMatrixInverse = create$1();
            this.jitteredProjectionMatrix = undefined;
            this.enableUpdate = true;
            // protected following = undefined;
            this.type = CameraType.EXPLORING;
            this.trackingMode = CameraTrackingMode.DEFAULT;
            this.projectionMode = CameraProjectionMode.PERSPECTIVE;
            /**
             * for culling use
             */
            this.frustum = new Frustum();
            /**
             * ortho matrix for Canvas2D & SVG
             */
            this.orthoMatrix = create$1();
        }
        // constructor(type = CameraType.EXPLORING, trackingMode = CameraTrackingMode.DEFAULT) {
        //   this.setType(type, trackingMode);
        // }
        Camera.prototype.isOrtho = function () {
            return this.projectionMode === CameraProjectionMode.ORTHOGRAPHIC;
        };
        Camera.prototype.getProjectionMode = function () {
            return this.projectionMode;
        };
        Camera.prototype.getPerspective = function () {
            // account for TAA
            return this.jitteredProjectionMatrix || this.projectionMatrix;
        };
        Camera.prototype.getPerspectiveInverse = function () {
            return this.projectionMatrixInverse;
        };
        Camera.prototype.getFrustum = function () {
            return this.frustum;
        };
        Camera.prototype.getPosition = function () {
            return this.position;
        };
        Camera.prototype.getFocalPoint = function () {
            return this.focalPoint;
        };
        Camera.prototype.getDollyingStep = function () {
            return this.dollyingStep;
        };
        Camera.prototype.getNear = function () {
            return this.near;
        };
        Camera.prototype.getFar = function () {
            return this.far;
        };
        Camera.prototype.getZoom = function () {
            return this.zoom;
        };
        Camera.prototype.getOrthoMatrix = function () {
            return this.orthoMatrix;
        };
        Camera.prototype.getView = function () {
            return this.view;
        };
        Camera.prototype.setEnableUpdate = function (enabled) {
            this.enableUpdate = enabled;
        };
        Camera.prototype.setType = function (type, trackingMode) {
            this.type = type;
            if (this.type === CameraType.EXPLORING) {
                this.setWorldRotation(true);
            }
            else {
                this.setWorldRotation(false);
            }
            this._getAngles();
            if (this.type === CameraType.TRACKING && trackingMode !== undefined) {
                this.setTrackingMode(trackingMode);
            }
            return this;
        };
        Camera.prototype.setProjectionMode = function (projectionMode) {
            this.projectionMode = projectionMode;
            return this;
        };
        Camera.prototype.setTrackingMode = function (trackingMode) {
            if (this.type !== CameraType.TRACKING) {
                throw new Error('Impossible to set a tracking mode if the camera is not of tracking type');
            }
            this.trackingMode = trackingMode;
            return this;
        };
        /**
         * If flag is true, it reverses the azimuth and elevation angles.
         * Subsequent calls to rotate, setAzimuth, setElevation,
         * changeAzimuth or changeElevation will cause the inverted effect.
         * setRoll or changeRoll is not affected by this method.
         *
         * This inversion is useful when one wants to simulate that the world
         * is moving, instead of the camera.
         *
         * By default the camera angles are not reversed.
         * @param {Boolean} flag the boolean flag to reverse the angles.
         */
        Camera.prototype.setWorldRotation = function (flag) {
            this.rotateWorld = flag;
            this._getAngles();
            return this;
        };
        /**
         * 计算 MV 矩阵，为相机矩阵的逆矩阵
         */
        Camera.prototype.getViewTransform = function () {
            return invert(create$1(), this.matrix);
        };
        Camera.prototype.getWorldTransform = function () {
            return this.matrix;
        };
        Camera.prototype.jitterProjectionMatrix = function (x, y) {
            var translation = fromTranslation(create$1(), [x, y, 0]);
            this.jitteredProjectionMatrix = multiply(create$1(), translation, this.projectionMatrix);
        };
        Camera.prototype.clearJitterProjectionMatrix = function () {
            this.jitteredProjectionMatrix = undefined;
        };
        /**
         * 设置相机矩阵
         */
        Camera.prototype.setMatrix = function (matrix) {
            this.matrix = matrix;
            this._update();
            return this;
        };
        Camera.prototype.setFov = function (fov) {
            this.setPerspective(this.near, this.far, fov, this.aspect);
            return this;
        };
        Camera.prototype.setAspect = function (aspect) {
            this.setPerspective(this.near, this.far, this.fov, aspect);
            return this;
        };
        Camera.prototype.setNear = function (near) {
            if (this.projectionMode === CameraProjectionMode.PERSPECTIVE) {
                this.setPerspective(near, this.far, this.fov, this.aspect);
            }
            else {
                this.setOrthographic(this.left, this.rright, this.top, this.bottom, near, this.far);
            }
            return this;
        };
        Camera.prototype.setFar = function (far) {
            if (this.projectionMode === CameraProjectionMode.PERSPECTIVE) {
                this.setPerspective(this.near, far, this.fov, this.aspect);
            }
            else {
                this.setOrthographic(this.left, this.rright, this.top, this.bottom, this.near, far);
            }
            return this;
        };
        /**
         * Sets an offset in a larger frustum, used in PixelPicking
         */
        Camera.prototype.setViewOffset = function (fullWidth, fullHeight, x, y, width, height) {
            this.aspect = fullWidth / fullHeight;
            if (this.view === undefined) {
                this.view = {
                    enabled: true,
                    fullWidth: 1,
                    fullHeight: 1,
                    offsetX: 0,
                    offsetY: 0,
                    width: 1,
                    height: 1,
                };
            }
            this.view.enabled = true;
            this.view.fullWidth = fullWidth;
            this.view.fullHeight = fullHeight;
            this.view.offsetX = x;
            this.view.offsetY = y;
            this.view.width = width;
            this.view.height = height;
            if (this.projectionMode === CameraProjectionMode.PERSPECTIVE) {
                this.setPerspective(this.near, this.far, this.fov, this.aspect);
            }
            else {
                this.setOrthographic(this.left, this.rright, this.top, this.bottom, this.near, this.far);
            }
            return this;
        };
        Camera.prototype.clearViewOffset = function () {
            if (this.view !== undefined) {
                this.view.enabled = false;
            }
            if (this.projectionMode === CameraProjectionMode.PERSPECTIVE) {
                this.setPerspective(this.near, this.far, this.fov, this.aspect);
            }
            else {
                this.setOrthographic(this.left, this.rright, this.top, this.bottom, this.near, this.far);
            }
            return this;
        };
        Camera.prototype.setZoom = function (zoom) {
            this.zoom = zoom;
            if (this.projectionMode === CameraProjectionMode.ORTHOGRAPHIC) {
                this.setOrthographic(this.left, this.rright, this.top, this.bottom, this.near, this.far);
            }
            else if (this.projectionMode === CameraProjectionMode.PERSPECTIVE) {
                this.setPerspective(this.near, this.far, this.fov, this.aspect);
            }
            return this;
        };
        /**
         * Zoom by specified point in viewport coordinates.
         */
        Camera.prototype.setZoomByViewportPoint = function (zoom, viewportPoint) {
            var _a = this.canvas.viewport2Canvas({
                x: viewportPoint[0],
                y: viewportPoint[1],
            }), ox = _a.x, oy = _a.y;
            var roll = this.roll;
            this.rotate(0, 0, -roll);
            this.setPosition(ox, oy);
            this.setFocalPoint(ox, oy);
            this.setZoom(zoom);
            this.rotate(0, 0, roll);
            var _b = this.canvas.viewport2Canvas({
                x: viewportPoint[0],
                y: viewportPoint[1],
            }), cx = _b.x, cy = _b.y;
            // project to rotated axis
            var dvec = fromValues$2(cx - ox, cy - oy, 0);
            var dx = dot(dvec, this.right) / length(this.right);
            var dy = dot(dvec, this.up) / length(this.up);
            this.pan(-dx, -dy);
            return this;
        };
        Camera.prototype.setPerspective = function (near, far, fov, aspect) {
            var _a;
            this.projectionMode = CameraProjectionMode.PERSPECTIVE;
            this.fov = fov;
            this.near = near;
            this.far = far;
            this.aspect = aspect;
            var top = (this.near * Math.tan(deg2rad(0.5 * this.fov))) / this.zoom;
            var height = 2 * top;
            var width = this.aspect * height;
            var left = -0.5 * width;
            if ((_a = this.view) === null || _a === void 0 ? void 0 : _a.enabled) {
                var fullWidth = this.view.fullWidth;
                var fullHeight = this.view.fullHeight;
                left += (this.view.offsetX * width) / fullWidth;
                top -= (this.view.offsetY * height) / fullHeight;
                width *= this.view.width / fullWidth;
                height *= this.view.height / fullHeight;
            }
            makePerspective(this.projectionMatrix, left, left + width, top, top - height, near, this.far, this.clipSpaceNearZ === ClipSpaceNearZ.ZERO);
            // flipY since the origin of OpenGL/WebGL is bottom-left compared with top-left in Canvas2D
            scale(this.projectionMatrix, this.projectionMatrix, fromValues$2(1, -1, 1));
            invert(this.projectionMatrixInverse, this.projectionMatrix);
            this.triggerUpdate();
            return this;
        };
        Camera.prototype.setOrthographic = function (l, r, t, b, near, far) {
            var _a;
            this.projectionMode = CameraProjectionMode.ORTHOGRAPHIC;
            this.rright = r;
            this.left = l;
            this.top = t;
            this.bottom = b;
            this.near = near;
            this.far = far;
            var dx = (this.rright - this.left) / (2 * this.zoom);
            var dy = (this.top - this.bottom) / (2 * this.zoom);
            var cx = (this.rright + this.left) / 2;
            var cy = (this.top + this.bottom) / 2;
            var left = cx - dx;
            var right = cx + dx;
            var top = cy + dy;
            var bottom = cy - dy;
            if ((_a = this.view) === null || _a === void 0 ? void 0 : _a.enabled) {
                var scaleW = (this.rright - this.left) / this.view.fullWidth / this.zoom;
                var scaleH = (this.top - this.bottom) / this.view.fullHeight / this.zoom;
                left += scaleW * this.view.offsetX;
                right = left + scaleW * this.view.width;
                top -= scaleH * this.view.offsetY;
                bottom = top - scaleH * this.view.height;
            }
            if (this.clipSpaceNearZ === ClipSpaceNearZ.NEGATIVE_ONE) {
                ortho(this.projectionMatrix, left, right, bottom, top, near, far);
            }
            else {
                orthoZO(this.projectionMatrix, left, right, bottom, top, near, far);
            }
            // flipY since the origin of OpenGL/WebGL is bottom-left compared with top-left in Canvas2D
            scale(this.projectionMatrix, this.projectionMatrix, fromValues$2(1, -1, 1));
            invert(this.projectionMatrixInverse, this.projectionMatrix);
            this._getOrthoMatrix();
            this.triggerUpdate();
            return this;
        };
        /**
         * Move the camera in world coordinates.
         * It will keep looking at the current focal point.
         *
         * support scalars or vectors.
         * @example
         * setPosition(1, 2, 3);
         * setPosition([1, 2, 3]);
         */
        Camera.prototype.setPosition = function (x, y, z) {
            if (y === void 0) { y = this.position[1]; }
            if (z === void 0) { z = this.position[2]; }
            var position = createVec3(x, y, z);
            this._setPosition(position);
            this.setFocalPoint(this.focalPoint);
            this.triggerUpdate();
            return this;
        };
        /**
         * Sets the focal point of this camera in world coordinates.
         *
         * support scalars or vectors.
         * @example
         * setFocalPoint(1, 2, 3);
         * setFocalPoint([1, 2, 3]);
         */
        Camera.prototype.setFocalPoint = function (x, y, z) {
            if (y === void 0) { y = this.focalPoint[1]; }
            if (z === void 0) { z = this.focalPoint[2]; }
            var up = fromValues$2(0, 1, 0);
            this.focalPoint = createVec3(x, y, z);
            if (this.trackingMode === CameraTrackingMode.CINEMATIC) {
                var d = subtract$1(create$2(), this.focalPoint, this.position);
                x = d[0];
                y = d[1];
                z = d[2];
                var r = length(d);
                var el = rad2deg(Math.asin(y / r));
                var az = 90 + rad2deg(Math.atan2(z, x));
                var m = create$1();
                rotateY(m, m, deg2rad(az));
                rotateX(m, m, deg2rad(el));
                up = transformMat4(create$2(), [0, 1, 0], m);
            }
            invert(this.matrix, lookAt(create$1(), this.position, this.focalPoint, up));
            this._getAxes();
            this._getDistance();
            this._getAngles();
            this.triggerUpdate();
            return this;
        };
        Camera.prototype.getDistance = function () {
            return this.distance;
        };
        Camera.prototype.getDistanceVector = function () {
            return this.distanceVector;
        };
        /**
         * Moves the camera towards/from the focal point.
         */
        Camera.prototype.setDistance = function (d) {
            if (this.distance === d || d < 0) {
                return this;
            }
            this.distance = d;
            if (this.distance < MIN_DISTANCE) {
                this.distance = MIN_DISTANCE;
            }
            this.dollyingStep = this.distance / 100;
            var pos = create$2();
            d = this.distance;
            var n = this.forward;
            var f = this.focalPoint;
            pos[0] = d * n[0] + f[0];
            pos[1] = d * n[1] + f[1];
            pos[2] = d * n[2] + f[2];
            this._setPosition(pos);
            this.triggerUpdate();
            return this;
        };
        Camera.prototype.setMaxDistance = function (d) {
            this.maxDistance = d;
            return this;
        };
        Camera.prototype.setMinDistance = function (d) {
            this.minDistance = d;
            return this;
        };
        /**
         * 设置相机方位角，不同相机模式下需要重新计算相机位置或者是视点位置
         * the azimuth in degrees
         */
        Camera.prototype.setAzimuth = function (az) {
            this.azimuth = getAngle(az);
            this.computeMatrix();
            this._getAxes();
            if (this.type === CameraType.ORBITING ||
                this.type === CameraType.EXPLORING) {
                this._getPosition();
            }
            else if (this.type === CameraType.TRACKING) {
                this._getFocalPoint();
            }
            this.triggerUpdate();
            return this;
        };
        Camera.prototype.getAzimuth = function () {
            return this.azimuth;
        };
        /**
         * 设置相机方位角，不同相机模式下需要重新计算相机位置或者是视点位置
         */
        Camera.prototype.setElevation = function (el) {
            this.elevation = getAngle(el);
            this.computeMatrix();
            this._getAxes();
            if (this.type === CameraType.ORBITING ||
                this.type === CameraType.EXPLORING) {
                this._getPosition();
            }
            else if (this.type === CameraType.TRACKING) {
                this._getFocalPoint();
            }
            this.triggerUpdate();
            return this;
        };
        Camera.prototype.getElevation = function () {
            return this.elevation;
        };
        /**
         * 设置相机方位角，不同相机模式下需要重新计算相机位置或者是视点位置
         */
        Camera.prototype.setRoll = function (angle) {
            this.roll = getAngle(angle);
            this.computeMatrix();
            this._getAxes();
            if (this.type === CameraType.ORBITING ||
                this.type === CameraType.EXPLORING) {
                this._getPosition();
            }
            else if (this.type === CameraType.TRACKING) {
                this._getFocalPoint();
            }
            this.triggerUpdate();
            return this;
        };
        Camera.prototype.getRoll = function () {
            return this.roll;
        };
        /**
         * 根据相机矩阵重新计算各种相机参数
         */
        Camera.prototype._update = function () {
            this._getAxes();
            this._getPosition();
            this._getDistance();
            this._getAngles();
            this._getOrthoMatrix();
            this.triggerUpdate();
        };
        /**
         * 计算相机矩阵
         */
        Camera.prototype.computeMatrix = function () {
            // 使用四元数描述 3D 旋转
            // @see https://xiaoiver.github.io/coding/2018/12/28/Camera-%E8%AE%BE%E8%AE%A1-%E4%B8%80.html
            var rotZ = setAxisAngle(create$4(), [0, 0, 1], deg2rad(this.roll));
            identity$1(this.matrix);
            // only consider HCS for EXPLORING and ORBITING cameras
            var rotX = setAxisAngle(create$4(), [1, 0, 0], deg2rad(((this.rotateWorld && this.type !== CameraType.TRACKING) ||
                this.type === CameraType.TRACKING
                ? 1
                : -1) * this.elevation));
            var rotY = setAxisAngle(create$4(), [0, 1, 0], deg2rad(((this.rotateWorld && this.type !== CameraType.TRACKING) ||
                this.type === CameraType.TRACKING
                ? 1
                : -1) * this.azimuth));
            var rotQ = multiply$2(create$4(), rotY, rotX);
            rotQ = multiply$2(create$4(), rotQ, rotZ);
            var rotMatrix = fromQuat(create$1(), rotQ);
            if (this.type === CameraType.ORBITING ||
                this.type === CameraType.EXPLORING) {
                translate(this.matrix, this.matrix, this.focalPoint);
                multiply(this.matrix, this.matrix, rotMatrix);
                translate(this.matrix, this.matrix, [0, 0, this.distance]);
            }
            else if (this.type === CameraType.TRACKING) {
                translate(this.matrix, this.matrix, this.position);
                multiply(this.matrix, this.matrix, rotMatrix);
            }
        };
        /**
         * Sets the camera position in the camera matrix
         */
        Camera.prototype._setPosition = function (x, y, z) {
            this.position = createVec3(x, y, z);
            var m = this.matrix;
            m[12] = this.position[0];
            m[13] = this.position[1];
            m[14] = this.position[2];
            m[15] = 1;
            this._getOrthoMatrix();
        };
        /**
         * Recalculates axes based on the current matrix
         */
        Camera.prototype._getAxes = function () {
            copy$1(this.right, createVec3(transformMat4$1(create$3(), [1, 0, 0, 0], this.matrix)));
            copy$1(this.up, createVec3(transformMat4$1(create$3(), [0, 1, 0, 0], this.matrix)));
            copy$1(this.forward, createVec3(transformMat4$1(create$3(), [0, 0, 1, 0], this.matrix)));
            normalize(this.right, this.right);
            normalize(this.up, this.up);
            normalize(this.forward, this.forward);
        };
        /**
         * Recalculates euler angles based on the current state
         */
        Camera.prototype._getAngles = function () {
            // Recalculates angles
            var x = this.distanceVector[0];
            var y = this.distanceVector[1];
            var z = this.distanceVector[2];
            var r = length(this.distanceVector);
            // FAST FAIL: If there is no distance we cannot compute angles
            if (r === 0) {
                this.elevation = 0;
                this.azimuth = 0;
                return;
            }
            if (this.type === CameraType.TRACKING) {
                this.elevation = rad2deg(Math.asin(y / r));
                this.azimuth = rad2deg(Math.atan2(-x, -z));
            }
            else {
                if (this.rotateWorld) {
                    this.elevation = rad2deg(Math.asin(y / r));
                    this.azimuth = rad2deg(Math.atan2(-x, -z));
                }
                else {
                    this.elevation = -rad2deg(Math.asin(y / r));
                    this.azimuth = -rad2deg(Math.atan2(-x, -z));
                }
            }
        };
        /**
         * 重新计算相机位置，只有 ORBITING 模式相机位置才会发生变化
         */
        Camera.prototype._getPosition = function () {
            copy$1(this.position, createVec3(transformMat4$1(create$3(), [0, 0, 0, 1], this.matrix)));
            // 相机位置变化，需要重新计算视距
            this._getDistance();
        };
        /**
         * 重新计算视点，只有 TRACKING 模式视点才会发生变化
         */
        Camera.prototype._getFocalPoint = function () {
            transformMat3(this.distanceVector, [0, 0, -this.distance], fromMat4(create(), this.matrix));
            add$1(this.focalPoint, this.position, this.distanceVector);
            // 视点变化，需要重新计算视距
            this._getDistance();
        };
        /**
         * 重新计算视距
         */
        Camera.prototype._getDistance = function () {
            this.distanceVector = subtract$1(create$2(), this.focalPoint, this.position);
            this.distance = length(this.distanceVector);
            this.dollyingStep = this.distance / 100;
        };
        Camera.prototype._getOrthoMatrix = function () {
            if (this.projectionMode !== CameraProjectionMode.ORTHOGRAPHIC) {
                return;
            }
            var position = this.position;
            var rotZ = setAxisAngle(create$4(), [0, 0, 1], (-this.roll * Math.PI) / 180);
            fromRotationTranslationScaleOrigin(this.orthoMatrix, rotZ, fromValues$2((this.rright - this.left) / 2 - position[0], (this.top - this.bottom) / 2 - position[1], 0), fromValues$2(this.zoom, this.zoom, 1), position);
        };
        Camera.prototype.triggerUpdate = function () {
            if (this.enableUpdate) {
                // update frustum
                var viewMatrix = this.getViewTransform();
                var vpMatrix = multiply(create$1(), this.getPerspective(), viewMatrix);
                this.getFrustum().extractFromVPMatrix(vpMatrix);
                this.eventEmitter.emit(CameraEvent.UPDATED);
            }
        };
        Camera.prototype.rotate = function (azimuth, elevation, roll) {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        Camera.prototype.pan = function (tx, ty) {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        Camera.prototype.dolly = function (value) {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        Camera.prototype.createLandmark = function (name, params) {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        Camera.prototype.gotoLandmark = function (name, options) {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        Camera.prototype.cancelLandmarkAnimation = function () {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        return Camera;
    }());

    function memoize(func, resolver) {
        if (typeof func !== 'function' ||
            (resolver != null && typeof resolver !== 'function')) {
            throw new TypeError('Expected a function');
        }
        var memoized = function () {
            var args = [];
            for (var _i = 0; _i < arguments.length; _i++) {
                args[_i] = arguments[_i];
            }
            var key = resolver ? resolver.apply(this, args) : args[0];
            var cache = memoized.cache;
            if (cache.has(key)) {
                return cache.get(key);
            }
            var result = func.apply(this, args);
            memoized.cache = cache.set(key, result) || cache;
            return result;
        };
        memoized.cache = new (memoize.Cache || Map)();
        return memoized;
    }
    memoize.Cache = Map;

    // These units are iterated through, so be careful when adding or changing the
    // order.
    var UnitType;
    (function (UnitType) {
        UnitType[UnitType["kUnknown"] = 0] = "kUnknown";
        UnitType[UnitType["kNumber"] = 1] = "kNumber";
        UnitType[UnitType["kPercentage"] = 2] = "kPercentage";
        // Length units
        UnitType[UnitType["kEms"] = 3] = "kEms";
        // kExs,
        UnitType[UnitType["kPixels"] = 4] = "kPixels";
        // kCentimeters,
        // kMillimeters,
        // kInches,
        // kPoints,
        // kPicas,
        // kQuarterMillimeters,
        // https://drafts.csswg.org/css-values-4/#viewport-relative-lengths
        //
        // See also IsViewportPercentageLength.
        // kViewportWidth,
        // kViewportHeight,
        // kViewportInlineSize,
        // kViewportBlockSize,
        // kViewportMin,
        // kViewportMax,
        // kSmallViewportWidth,
        // kSmallViewportHeight,
        // kSmallViewportInlineSize,
        // kSmallViewportBlockSize,
        // kSmallViewportMin,
        // kSmallViewportMax,
        // kLargeViewportWidth,
        // kLargeViewportHeight,
        // kLargeViewportInlineSize,
        // kLargeViewportBlockSize,
        // kLargeViewportMin,
        // kLargeViewportMax,
        // kDynamicViewportWidth,
        // kDynamicViewportHeight,
        // kDynamicViewportInlineSize,
        // kDynamicViewportBlockSize,
        // kDynamicViewportMin,
        // kDynamicViewportMax,
        // https://drafts.csswg.org/css-contain-3/#container-lengths
        //
        // See also IsContainerPercentageLength.
        // kContainerWidth,
        // kContainerHeight,
        // kContainerInlineSize,
        // kContainerBlockSize,
        // kContainerMin,
        // kContainerMax,
        UnitType[UnitType["kRems"] = 5] = "kRems";
        // kChs,
        // kUserUnits, // The SVG term for unitless lengths
        // Angle units
        UnitType[UnitType["kDegrees"] = 6] = "kDegrees";
        UnitType[UnitType["kRadians"] = 7] = "kRadians";
        UnitType[UnitType["kGradians"] = 8] = "kGradians";
        UnitType[UnitType["kTurns"] = 9] = "kTurns";
        // Time units
        UnitType[UnitType["kMilliseconds"] = 10] = "kMilliseconds";
        UnitType[UnitType["kSeconds"] = 11] = "kSeconds";
        // kHertz,
        // kKilohertz,
        // Resolution
        // kDotsPerPixel,
        // kDotsPerInch,
        // kDotsPerCentimeter,
        // Other units
        // kFraction,
        UnitType[UnitType["kInteger"] = 12] = "kInteger";
        // This value is used to handle quirky margins in reflow roots (body, td,
        // and th) like WinIE. The basic idea is that a stylesheet can use the value
        // __qem (for quirky em) instead of em. When the quirky value is used, if
        // you're in quirks mode, the margin will collapse away inside a table cell.
        // This quirk is specified in the HTML spec but our impl is different.
        // TODO: Remove this. crbug.com/443952
        // kQuirkyEms,
    })(UnitType || (UnitType = {}));
    var UnitCategory;
    (function (UnitCategory) {
        UnitCategory[UnitCategory["kUNumber"] = 0] = "kUNumber";
        UnitCategory[UnitCategory["kUPercent"] = 1] = "kUPercent";
        UnitCategory[UnitCategory["kULength"] = 2] = "kULength";
        UnitCategory[UnitCategory["kUAngle"] = 3] = "kUAngle";
        UnitCategory[UnitCategory["kUTime"] = 4] = "kUTime";
        // kUFrequency,
        // kUResolution,
        UnitCategory[UnitCategory["kUOther"] = 5] = "kUOther";
    })(UnitCategory || (UnitCategory = {}));
    var ValueRange;
    (function (ValueRange) {
        ValueRange[ValueRange["kAll"] = 0] = "kAll";
        ValueRange[ValueRange["kNonNegative"] = 1] = "kNonNegative";
        ValueRange[ValueRange["kInteger"] = 2] = "kInteger";
        ValueRange[ValueRange["kNonNegativeInteger"] = 3] = "kNonNegativeInteger";
        ValueRange[ValueRange["kPositiveInteger"] = 4] = "kPositiveInteger";
    })(ValueRange || (ValueRange = {}));
    var Nested;
    (function (Nested) {
        Nested[Nested["kYes"] = 0] = "kYes";
        Nested[Nested["kNo"] = 1] = "kNo";
    })(Nested || (Nested = {}));
    var ParenLess;
    (function (ParenLess) {
        ParenLess[ParenLess["kYes"] = 0] = "kYes";
        ParenLess[ParenLess["kNo"] = 1] = "kNo";
    })(ParenLess || (ParenLess = {}));

    // This file specifies the unit strings used in CSSPrimitiveValues.
    var data = [
        {
            name: 'em',
            unit_type: UnitType.kEms,
        },
        // {
        //   name: 'ex',
        //   unit_type: UnitType.kExs,
        // },
        {
            name: 'px',
            unit_type: UnitType.kPixels,
        },
        // {
        //   name: "cm",
        //   unit_type: UnitType.kCentimeters,
        // },
        // {
        //   name: "mm",
        //   unit_type: UnitType.kMillimeters,
        // },
        // {
        //   name: "q",
        //   unit_type: UnitType.kQuarterMillimeters,
        // },
        // {
        //   name: "in",
        //   unit_type: UnitType.kInches,
        // },
        // {
        //   name: "pt",
        //   unit_type: UnitType.kPoints,
        // },
        // {
        //   name: "pc",
        //   unit_type: UnitType.kPicas,
        // },
        {
            name: 'deg',
            unit_type: UnitType.kDegrees,
        },
        {
            name: 'rad',
            unit_type: UnitType.kRadians,
        },
        {
            name: 'grad',
            unit_type: UnitType.kGradians,
        },
        {
            name: 'ms',
            unit_type: UnitType.kMilliseconds,
        },
        {
            name: 's',
            unit_type: UnitType.kSeconds,
        },
        // {
        //   name: "hz",
        //   unit_type: UnitType.kHertz,
        // },
        // {
        //   name: "khz",
        //   unit_type: UnitType.kKilohertz,
        // },
        // {
        //   name: "dpi",
        //   unit_type: "kDotsPerInch",
        // },
        // {
        //   name: "dpcm",
        //   unit_type: "kDotsPerCentimeter",
        // },
        // {
        //   name: "dppx",
        //   unit_type: "kDotsPerPixel",
        // },
        // {
        //   name: "x",
        //   unit_type: "kDotsPerPixel",
        // },
        // {
        //   name: "vw",
        //   unit_type: "kViewportWidth",
        // },
        // {
        //   name: "vh",
        //   unit_type: "kViewportHeight",
        // },
        // {
        //   name: "vi",
        //   unit_type: "kViewportInlineSize",
        // },
        // {
        //   name: "vb",
        //   unit_type: "kViewportBlockSize",
        // },
        // {
        //   name: "vmin",
        //   unit_type: UnitType.kViewportMin,
        // },
        // {
        //   name: "vmax",
        //   unit_type: UnitType.kViewportMax,
        // },
        // {
        //   name: "svw",
        //   unit_type: "kSmallViewportWidth",
        // },
        // {
        //   name: "svh",
        //   unit_type: "kSmallViewportHeight",
        // },
        // {
        //   name: "svi",
        //   unit_type: "kSmallViewportInlineSize",
        // },
        // {
        //   name: "svb",
        //   unit_type: "kSmallViewportBlockSize",
        // },
        // {
        //   name: "svmin",
        //   unit_type: "kSmallViewportMin",
        // },
        // {
        //   name: "svmax",
        //   unit_type: "kSmallViewportMax",
        // },
        // {
        //   name: "lvw",
        //   unit_type: "kLargeViewportWidth",
        // },
        // {
        //   name: "lvh",
        //   unit_type: "kLargeViewportHeight",
        // },
        // {
        //   name: "lvi",
        //   unit_type: "kLargeViewportInlineSize",
        // },
        // {
        //   name: "lvb",
        //   unit_type: "kLargeViewportBlockSize",
        // },
        // {
        //   name: "lvmin",
        //   unit_type: UnitType.kLargeViewportMin,
        // },
        // {
        //   name: "lvmax",
        //   unit_type: UnitType.kLargeViewportMax,
        // },
        // {
        //   name: "dvw",
        //   unit_type: UnitType.kDynamicViewportWidth,
        // },
        // {
        //   name: "dvh",
        //   unit_type: UnitType.kDynamicViewportHeight,
        // },
        // {
        //   name: "dvi",
        //   unit_type: UnitType.kDynamicViewportInlineSize,
        // },
        // {
        //   name: "dvb",
        //   unit_type: UnitType.kDynamicViewportBlockSize,
        // },
        // {
        //   name: "dvmin",
        //   unit_type: UnitType.kDynamicViewportMin,
        // },
        // {
        //   name: "dvmax",
        //   unit_type: UnitType.kDynamicViewportMax,
        // },
        // {
        //   name: "cqw",
        //   unit_type: UnitType.kContainerWidth,
        // },
        // {
        //   name: "cqh",
        //   unit_type: UnitType.kContainerHeight,
        // },
        // {
        //   name: "cqi",
        //   unit_type: UnitType.kContainerInlineSize,
        // },
        // {
        //   name: "cqb",
        //   unit_type: UnitType.kContainerBlockSize,
        // },
        // {
        //   name: "cqmin",
        //   unit_type: UnitType.kContainerMin,
        // },
        // {
        //   name: "cqmax",
        //   unit_type: UnitType.kContainerMax,
        // },
        {
            name: 'rem',
            unit_type: UnitType.kRems,
        },
        // {
        //   name: 'fr',
        //   unit_type: UnitType.kFraction,
        // },
        {
            name: 'turn',
            unit_type: UnitType.kTurns,
        },
        // {
        //   name: 'ch',
        //   unit_type: UnitType.kChs,
        // },
        // {
        //   name: '__qem',
        //   unit_type: UnitType.kQuirkyEms,
        // },
    ];
    var CSSStyleValueType;
    (function (CSSStyleValueType) {
        CSSStyleValueType[CSSStyleValueType["kUnknownType"] = 0] = "kUnknownType";
        CSSStyleValueType[CSSStyleValueType["kUnparsedType"] = 1] = "kUnparsedType";
        CSSStyleValueType[CSSStyleValueType["kKeywordType"] = 2] = "kKeywordType";
        // Start of CSSNumericValue subclasses
        CSSStyleValueType[CSSStyleValueType["kUnitType"] = 3] = "kUnitType";
        CSSStyleValueType[CSSStyleValueType["kSumType"] = 4] = "kSumType";
        CSSStyleValueType[CSSStyleValueType["kProductType"] = 5] = "kProductType";
        CSSStyleValueType[CSSStyleValueType["kNegateType"] = 6] = "kNegateType";
        CSSStyleValueType[CSSStyleValueType["kInvertType"] = 7] = "kInvertType";
        CSSStyleValueType[CSSStyleValueType["kMinType"] = 8] = "kMinType";
        CSSStyleValueType[CSSStyleValueType["kMaxType"] = 9] = "kMaxType";
        CSSStyleValueType[CSSStyleValueType["kClampType"] = 10] = "kClampType";
        // End of CSSNumericValue subclasses
        CSSStyleValueType[CSSStyleValueType["kTransformType"] = 11] = "kTransformType";
        CSSStyleValueType[CSSStyleValueType["kPositionType"] = 12] = "kPositionType";
        CSSStyleValueType[CSSStyleValueType["kURLImageType"] = 13] = "kURLImageType";
        CSSStyleValueType[CSSStyleValueType["kColorType"] = 14] = "kColorType";
        CSSStyleValueType[CSSStyleValueType["kUnsupportedColorType"] = 15] = "kUnsupportedColorType";
    })(CSSStyleValueType || (CSSStyleValueType = {}));
    // function parseCSSStyleValue(propertyName: string, value: string): CSSStyleValue[] {
    //   // const propertyId = cssPropertyID(propertyName);
    //   // if (propertyId === CSSPropertyID.kInvalid) {
    //   //   return [];
    //   // }
    //   // const customPropertyName = propertyId === CSSPropertyID.kVariable ? propertyName : null;
    //   // return fromString(propertyId, customPropertyName, value);
    //   return [];
    // }
    var stringToUnitType = function (name) {
        return data.find(function (item) { return item.name === name; }).unit_type;
    };
    var unitFromName = function (name) {
        if (!name) {
            return UnitType.kUnknown;
        }
        if (name === 'number') {
            return UnitType.kNumber;
        }
        if (name === 'percent' || name === '%') {
            return UnitType.kPercentage;
        }
        return stringToUnitType(name);
    };
    var unitTypeToUnitCategory = function (type) {
        switch (type) {
            case UnitType.kNumber:
            case UnitType.kInteger:
                return UnitCategory.kUNumber;
            case UnitType.kPercentage:
                return UnitCategory.kUPercent;
            case UnitType.kPixels:
                // case UnitType.kCentimeters:
                // case UnitType.kMillimeters:
                // case UnitType.kQuarterMillimeters:
                // case UnitType.kInches:
                // case UnitType.kPoints:
                // case UnitType.kPicas:
                // case UnitType.kUserUnits:
                return UnitCategory.kULength;
            case UnitType.kMilliseconds:
            case UnitType.kSeconds:
                return UnitCategory.kUTime;
            case UnitType.kDegrees:
            case UnitType.kRadians:
            case UnitType.kGradians:
            case UnitType.kTurns:
                return UnitCategory.kUAngle;
            // case UnitType.kHertz:
            // case UnitType.kKilohertz:
            //   return UnitCategory.kUFrequency;
            // case UnitType.kDotsPerPixel:
            // case UnitType.kDotsPerInch:
            // case UnitType.kDotsPerCentimeter:
            //   return UnitCategory.kUResolution;
            default:
                return UnitCategory.kUOther;
        }
    };
    var canonicalUnitTypeForCategory = function (category) {
        // The canonical unit type is chosen according to the way
        // CSSPropertyParser.ValidUnit() chooses the default unit in each category
        // (based on unitflags).
        switch (category) {
            case UnitCategory.kUNumber:
                return UnitType.kNumber;
            case UnitCategory.kULength:
                return UnitType.kPixels;
            case UnitCategory.kUPercent:
                return UnitType.kPercentage;
            // return UnitType.kUnknown; // Cannot convert between numbers and percent.
            case UnitCategory.kUTime:
                return UnitType.kSeconds;
            case UnitCategory.kUAngle:
                return UnitType.kDegrees;
            // case UnitCategory.kUFrequency:
            //   return UnitType.kHertz;
            // case UnitCategory.kUResolution:
            //   return UnitType.kDotsPerPixel;
            default:
                return UnitType.kUnknown;
        }
    };
    /**
     * @see https://chromium.googlesource.com/chromium/src/+/refs/heads/main/third_party/blink/renderer/core/css/css_primitive_value.cc#353
     */
    var conversionToCanonicalUnitsScaleFactor = function (unit_type) {
        var factor = 1.0;
        // FIXME: the switch can be replaced by an array of scale factors.
        switch (unit_type) {
            // These are "canonical" units in their respective categories.
            case UnitType.kPixels:
            // case UnitType.kUserUnits:
            case UnitType.kDegrees:
            case UnitType.kSeconds:
                // case UnitType.kHertz:
                break;
            case UnitType.kMilliseconds:
                factor = 0.001;
                break;
            // case UnitType.kCentimeters:
            //   // factor = kCssPixelsPerCentimeter;
            //   break;
            // case UnitType.kDotsPerCentimeter:
            //   // factor = 1 / kCssPixelsPerCentimeter;
            //   break;
            // case UnitType.kMillimeters:
            //   // factor = kCssPixelsPerMillimeter;
            //   break;
            // case UnitType.kQuarterMillimeters:
            //   // factor = kCssPixelsPerQuarterMillimeter;
            //   break;
            // case UnitType.kInches:
            //   // factor = kCssPixelsPerInch;
            //   break;
            // case UnitType.kDotsPerInch:
            //   // factor = 1 / kCssPixelsPerInch;
            //   break;
            // case UnitType.kPoints:
            //   // factor = kCssPixelsPerPoint;
            //   break;
            // case UnitType.kPicas:
            //   // factor = kCssPixelsPerPica;
            //   break;
            case UnitType.kRadians:
                factor = 180 / Math.PI;
                break;
            case UnitType.kGradians:
                factor = 0.9;
                break;
            case UnitType.kTurns:
                factor = 360;
                break;
        }
        return factor;
    };
    var unitTypeToString = function (type) {
        switch (type) {
            case UnitType.kNumber:
            case UnitType.kInteger:
                // case UnitType.kUserUnits:
                return '';
            case UnitType.kPercentage:
                return '%';
            case UnitType.kEms:
                // case UnitType.kQuirkyEms:
                return 'em';
            // case UnitType.kExs:
            //   return 'ex';
            case UnitType.kRems:
                return 'rem';
            // case UnitType.kChs:
            //   return 'ch';
            case UnitType.kPixels:
                return 'px';
            // case UnitType.kCentimeters:
            //   return 'cm';
            // case UnitType.kDotsPerPixel:
            //   return 'dppx';
            // case UnitType.kDotsPerInch:
            //   return 'dpi';
            // case UnitType.kDotsPerCentimeter:
            //   return 'dpcm';
            // case UnitType.kMillimeters:
            //   return 'mm';
            // case UnitType.kQuarterMillimeters:
            //   return 'q';
            // case UnitType.kInches:
            //   return 'in';
            // case UnitType.kPoints:
            //   return 'pt';
            // case UnitType.kPicas:
            //   return 'pc';
            case UnitType.kDegrees:
                return 'deg';
            case UnitType.kRadians:
                return 'rad';
            case UnitType.kGradians:
                return 'grad';
            case UnitType.kMilliseconds:
                return 'ms';
            case UnitType.kSeconds:
                return 's';
            // case UnitType.kHertz:
            //   return 'hz';
            // case UnitType.kKilohertz:
            //   return 'khz';
            case UnitType.kTurns:
                return 'turn';
        }
        return '';
    };
    /**
     * CSSStyleValue is the base class for all CSS values accessible from Typed OM.
     * Values that are not yet supported as specific types are also returned as base CSSStyleValues.
     *
     * Spec @see https://drafts.css-houdini.org/css-typed-om/#stylevalue-objects
     * Docs @see https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleValue
     */
    var CSSStyleValue = /** @class */ (function () {
        function CSSStyleValue() {
        }
        // static parse(propertyName: string, value: string): CSSStyleValue {
        //   return parseCSSStyleValue(propertyName, value)[0];
        // }
        // static parseAll(propertyName: string, value: string): CSSStyleValue[] {
        //   return parseCSSStyleValue(propertyName, value);
        // }
        CSSStyleValue.isAngle = function (unit) {
            return (unit === UnitType.kDegrees ||
                unit === UnitType.kRadians ||
                unit === UnitType.kGradians ||
                unit === UnitType.kTurns);
        };
        // static isViewportPercentageLength(type: UnitType) {
        //   return type >= UnitType.kViewportWidth && type <= UnitType.kDynamicViewportMax;
        // }
        // static isContainerPercentageLength(type: UnitType) {
        //   return type >= UnitType.kContainerWidth && type <= UnitType.kContainerMax;
        // }
        CSSStyleValue.isLength = function (type) {
            // return (type >= UnitType.kEms && type <= UnitType.kUserUnits) || type == UnitType.kQuirkyEms;
            return type >= UnitType.kEms && type < UnitType.kDegrees;
        };
        CSSStyleValue.isRelativeUnit = function (type) {
            return (type === UnitType.kPercentage ||
                type === UnitType.kEms ||
                // type === UnitType.kExs ||
                type === UnitType.kRems
            // type === UnitType.kChs ||
            // this.isViewportPercentageLength(type) ||
            // this.isContainerPercentageLength(type)
            );
        };
        CSSStyleValue.isTime = function (unit) {
            return unit === UnitType.kSeconds || unit === UnitType.kMilliseconds;
        };
        // protected abstract toCSSValue(): CSSValue;
        CSSStyleValue.prototype.toString = function () {
            return this.buildCSSText(Nested.kNo, ParenLess.kNo, '');
        };
        CSSStyleValue.prototype.isNumericValue = function () {
            return (this.getType() >= CSSStyleValueType.kUnitType &&
                this.getType() <= CSSStyleValueType.kClampType);
        };
        return CSSStyleValue;
    }());

    /**
     * CSSColorValue is the base class used for the various CSS color interfaces.
     *
     * @see https://drafts.css-houdini.org/css-typed-om-1/#colorvalue-objects
     */
    var CSSColorValue = /** @class */ (function (_super) {
        __extends(CSSColorValue, _super);
        function CSSColorValue(colorSpace) {
            var _this = _super.call(this) || this;
            _this.colorSpace = colorSpace;
            return _this;
        }
        CSSColorValue.prototype.getType = function () {
            return CSSStyleValueType.kColorType;
        };
        // buildCSSText(n: Nested, p: ParenLess, result: string): string {
        //   let text = '';
        //   if (this.colorSpace === 'rgb') {
        //     text = `rgba(${this.channels.join(',')},${this.alpha})`;
        //   }
        //   return (result += text);
        // }
        /**
         * @see https://drafts.css-houdini.org/css-typed-om-1/#dom-csscolorvalue-to
         */
        CSSColorValue.prototype.to = function (colorSpace) {
            return this;
        };
        return CSSColorValue;
    }(CSSStyleValue));

    var GradientType;
    (function (GradientType) {
        GradientType[GradientType["Constant"] = 0] = "Constant";
        GradientType[GradientType["LinearGradient"] = 1] = "LinearGradient";
        GradientType[GradientType["RadialGradient"] = 2] = "RadialGradient";
    })(GradientType || (GradientType = {}));
    var CSSGradientValue = /** @class */ (function (_super) {
        __extends(CSSGradientValue, _super);
        function CSSGradientValue(type, value) {
            var _this = _super.call(this) || this;
            _this.type = type;
            _this.value = value;
            return _this;
        }
        CSSGradientValue.prototype.clone = function () {
            return new CSSGradientValue(this.type, this.value);
        };
        CSSGradientValue.prototype.buildCSSText = function (n, p, result) {
            return result;
        };
        CSSGradientValue.prototype.getType = function () {
            return CSSStyleValueType.kColorType;
        };
        return CSSGradientValue;
    }(CSSStyleValue));

    /**
     * CSSKeywordValue represents CSS Values that are specified as keywords
     * eg. 'initial'
     * @see https://developer.mozilla.org/en-US/docs/Web/API/CSSKeywordValue
     * @see https://chromium.googlesource.com/chromium/src/+/refs/heads/main/third_party/blink/renderer/core/css/cssom/css_keyword_value.idl
     */
    var CSSKeywordValue = /** @class */ (function (_super) {
        __extends(CSSKeywordValue, _super);
        function CSSKeywordValue(value) {
            var _this = _super.call(this) || this;
            _this.value = value;
            return _this;
        }
        CSSKeywordValue.prototype.clone = function () {
            return new CSSKeywordValue(this.value);
        };
        CSSKeywordValue.prototype.getType = function () {
            return CSSStyleValueType.kKeywordType;
        };
        CSSKeywordValue.prototype.buildCSSText = function (n, p, result) {
            return result + this.value;
        };
        return CSSKeywordValue;
    }(CSSStyleValue));

    var camelCase = memoize(function (str) {
        if (str === void 0) { str = ''; }
        return str.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
    });
    var kebabize = function (str) {
        return str
            .split('')
            .map(function (letter, idx) {
            return letter.toUpperCase() === letter
                ? "".concat(idx !== 0 ? '-' : '').concat(letter.toLowerCase())
                : letter;
        })
            .join('');
    };

    function DCHECK(bool) {
        if (!bool) {
            throw new Error();
        }
    }
    function isFunction$1(func) {
        return typeof func === 'function';
    }
    function isSymbol(value) {
        // @see https://github.com/lodash/lodash/blob/master/isSymbol.js
        return typeof value === 'symbol';
    }
    var definedProps = function (obj) {
        return Object.fromEntries(Object.entries(obj).filter(function (_a) {
            var _b = __read(_a, 2), v = _b[1];
            return v !== undefined;
        }));
    };
    var FORMAT_ATTR_MAP = {
        d: {
            alias: 'path',
        },
        strokeDasharray: {
            alias: 'lineDash',
        },
        strokeWidth: {
            alias: 'lineWidth',
        },
        textAnchor: {
            alias: 'textAlign',
        },
        src: {
            alias: 'img',
        },
    };
    var formatAttributeName = memoize(function (name) {
        var attributeName = camelCase(name);
        var map = FORMAT_ATTR_MAP[attributeName];
        attributeName = (map === null || map === void 0 ? void 0 : map.alias) || attributeName;
        return attributeName;
    });

    // type CSSNumericBaseType =
    //   | 'length'
    //   | 'angle'
    //   | 'time'
    //   | 'frequency'
    //   | 'resolution'
    //   | 'flex'
    //   | 'percent';
    // https://drafts.css-houdini.org/css-typed-om/#dictdef-cssnumerictype
    // interface CSSNumericType {
    //   length: number;
    //   angle: number;
    //   time: number;
    //   frequency: number;
    //   resolution: number;
    //   flex: number;
    //   percent: number;
    //   percentHint: CSSNumericBaseType;
    // }
    var formatInfinityOrNaN = function (number, suffix) {
        if (suffix === void 0) { suffix = ''; }
        var result = '';
        if (!Number.isFinite(number)) {
            if (number > 0)
                result = 'infinity';
            else
                result = '-infinity';
        }
        else {
            DCHECK(Number.isNaN(number));
            result = 'NaN';
        }
        return (result += suffix);
    };
    var toCanonicalUnit = function (unit) {
        return canonicalUnitTypeForCategory(unitTypeToUnitCategory(unit));
    };
    /**
     * CSSNumericValue is the base class for numeric and length typed CSS Values.
     * @see https://drafts.css-houdini.org/css-typed-om/#numeric-objects
     * @see https://developer.mozilla.org/en-US/docs/Web/API/CSSNumericValue
     * @see https://chromium.googlesource.com/chromium/src/+/refs/heads/main/third_party/blink/renderer/core/css/cssom/css_numeric_value.idl
     */
    /**
     * Represents numeric values that can be expressed as a single number plus a
     * unit (or a naked number or percentage).
     * @see https://drafts.css-houdini.org/css-typed-om/#cssunitvalue
     */
    var CSSUnitValue = /** @class */ (function (_super) {
        __extends(CSSUnitValue, _super);
        function CSSUnitValue(value, unitOrName) {
            if (unitOrName === void 0) { unitOrName = UnitType.kNumber; }
            var _this = _super.call(this) || this;
            var unit;
            if (typeof unitOrName === 'string') {
                unit = unitFromName(unitOrName);
            }
            else {
                unit = unitOrName;
            }
            _this.unit = unit;
            _this.value = value;
            return _this;
        }
        CSSUnitValue.prototype.clone = function () {
            return new CSSUnitValue(this.value, this.unit);
        };
        CSSUnitValue.prototype.equals = function (other) {
            var other_unit_value = other;
            return (this.value === other_unit_value.value &&
                this.unit === other_unit_value.unit);
        };
        CSSUnitValue.prototype.getType = function () {
            return CSSStyleValueType.kUnitType;
        };
        CSSUnitValue.prototype.convertTo = function (target_unit) {
            if (this.unit === target_unit) {
                return new CSSUnitValue(this.value, this.unit);
            }
            // Instead of defining the scale factors for every unit to every other unit,
            // we simply convert to the canonical unit and back since we already have
            // the scale factors for canonical units.
            var canonical_unit = toCanonicalUnit(this.unit);
            if (canonical_unit !== toCanonicalUnit(target_unit) ||
                canonical_unit === UnitType.kUnknown) {
                return null;
            }
            var scale_factor = conversionToCanonicalUnitsScaleFactor(this.unit) /
                conversionToCanonicalUnitsScaleFactor(target_unit);
            return new CSSUnitValue(this.value * scale_factor, target_unit);
        };
        CSSUnitValue.prototype.buildCSSText = function (n, p, result) {
            var text;
            switch (this.unit) {
                case UnitType.kUnknown:
                    // FIXME
                    break;
                case UnitType.kInteger:
                    text = Number(this.value).toFixed(0);
                    break;
                case UnitType.kNumber:
                case UnitType.kPercentage:
                case UnitType.kEms:
                // case UnitType.kQuirkyEms:
                // case UnitType.kExs:
                case UnitType.kRems:
                // case UnitType.kChs:
                case UnitType.kPixels:
                // case UnitType.kCentimeters:
                // case UnitType.kDotsPerPixel:
                // case UnitType.kDotsPerInch:
                // case UnitType.kDotsPerCentimeter:
                // case UnitType.kMillimeters:
                // case UnitType.kQuarterMillimeters:
                // case UnitType.kInches:
                // case UnitType.kPoints:
                // case UnitType.kPicas:
                // case UnitType.kUserUnits:
                case UnitType.kDegrees:
                case UnitType.kRadians:
                case UnitType.kGradians:
                case UnitType.kMilliseconds:
                case UnitType.kSeconds:
                // case UnitType.kHertz:
                // case UnitType.kKilohertz:
                case UnitType.kTurns: // case UnitType.kContainerMax: { // case UnitType.kContainerMin: // case UnitType.kContainerBlockSize: // case UnitType.kContainerInlineSize: // case UnitType.kContainerHeight: // case UnitType.kContainerWidth: // case UnitType.kDynamicViewportMax: // case UnitType.kDynamicViewportMin: // case UnitType.kDynamicViewportBlockSize: // case UnitType.kDynamicViewportInlineSize: // case UnitType.kDynamicViewportHeight: // case UnitType.kDynamicViewportWidth: // case UnitType.kLargeViewportMax: // case UnitType.kLargeViewportMin: // case UnitType.kLargeViewportBlockSize: // case UnitType.kLargeViewportInlineSize: // case UnitType.kLargeViewportHeight: // case UnitType.kLargeViewportWidth: // case UnitType.kSmallViewportMax: // case UnitType.kSmallViewportMin: // case UnitType.kSmallViewportBlockSize: // case UnitType.kSmallViewportInlineSize: // case UnitType.kSmallViewportHeight: // case UnitType.kSmallViewportWidth: // case UnitType.kViewportMax: // case UnitType.kViewportMin: // case UnitType.kViewportBlockSize: // case UnitType.kViewportInlineSize: // case UnitType.kViewportHeight: // case UnitType.kViewportWidth: // case UnitType.kFraction:
                    {
                        var kMinInteger = -999999;
                        var kMaxInteger = 999999;
                        var value = this.value;
                        var unit = unitTypeToString(this.unit);
                        if (value < kMinInteger || value > kMaxInteger) {
                            var unit_1 = unitTypeToString(this.unit);
                            if (!Number.isFinite(value) || Number.isNaN(value)) {
                                text = formatInfinityOrNaN(value, unit_1);
                            }
                            else {
                                text = value + (unit_1 || '');
                            }
                        }
                        else {
                            text = "".concat(value).concat(unit);
                        }
                    }
            }
            result += text;
            return result;
        };
        return CSSUnitValue;
    }(CSSStyleValue));
    var Opx = new CSSUnitValue(0, 'px');
    new CSSUnitValue(1, 'px');
    var Odeg = new CSSUnitValue(0, 'deg');

    /**
     * The CSSRGB class represents the CSS rgb()/rgba() functions.
     *
     * @see https://drafts.css-houdini.org/css-typed-om-1/#cssrgb
     */
    var CSSRGB = /** @class */ (function (_super) {
        __extends(CSSRGB, _super);
        function CSSRGB(r, g, b, alpha, 
        /**
         * 'transparent' & 'none' has the same rgba data
         */
        isNone) {
            if (alpha === void 0) { alpha = 1; }
            if (isNone === void 0) { isNone = false; }
            var _this = _super.call(this, 'rgb') || this;
            _this.r = r;
            _this.g = g;
            _this.b = b;
            _this.alpha = alpha;
            _this.isNone = isNone;
            return _this;
        }
        CSSRGB.prototype.clone = function () {
            return new CSSRGB(this.r, this.g, this.b, this.alpha);
        };
        CSSRGB.prototype.buildCSSText = function (n, p, result) {
            return result + "rgba(".concat(this.r, ",").concat(this.g, ",").concat(this.b, ",").concat(this.alpha, ")");
        };
        return CSSRGB;
    }(CSSColorValue));

    /**
     * CSSKeywordValue
     */
    var unsetKeywordValue = new CSSKeywordValue('unset');
    var initialKeywordValue = new CSSKeywordValue('initial');
    var inheritKeywordValue = new CSSKeywordValue('inherit');
    var keywordCache = {
        '': unsetKeywordValue,
        unset: unsetKeywordValue,
        initial: initialKeywordValue,
        inherit: inheritKeywordValue,
    };
    var getOrCreateKeyword = function (name) {
        if (!keywordCache[name]) {
            keywordCache[name] = new CSSKeywordValue(name);
        }
        return keywordCache[name];
    };
    /**
     * CSSColor
     */
    var noneColor = new CSSRGB(0, 0, 0, 0, true);
    var transparentColor = new CSSRGB(0, 0, 0, 0);
    var getOrCreateRGBA = memoize(function (r, g, b, a) {
        return new CSSRGB(r, g, b, a);
    }, function (r, g, b, a) {
        return "rgba(".concat(r, ",").concat(g, ",").concat(b, ",").concat(a, ")");
    });
    // export const getOrCreateUnitValue = memoize(
    //   (value: number, unitOrName: UnitType | string = UnitType.kNumber) => {
    //     return new CSSUnitValue(value, unitOrName);
    //   },
    //   (value: number, unitOrName: UnitType | string = UnitType.kNumber) => {
    //     return `${value}${unitOrName}`;
    //   },
    // );
    var getOrCreateUnitValue = function (value, unitOrName) {
        if (unitOrName === void 0) { unitOrName = UnitType.kNumber; }
        return new CSSUnitValue(value, unitOrName);
    };
    var PECENTAGE_50 = new CSSUnitValue(50, '%');

    /**
     * @see https://doc.babylonjs.com/how_to/optimizing_your_scene#changing-mesh-culling-strategy
     */
    var Strategy;
    (function (Strategy) {
        Strategy[Strategy["Standard"] = 0] = "Standard";
    })(Strategy || (Strategy = {}));

    var SortReason;
    (function (SortReason) {
        SortReason[SortReason["ADDED"] = 0] = "ADDED";
        SortReason[SortReason["REMOVED"] = 1] = "REMOVED";
        SortReason[SortReason["Z_INDEX_CHANGED"] = 2] = "Z_INDEX_CHANGED";
    })(SortReason || (SortReason = {}));

    var EMPTY_PARSED_PATH = {
        absolutePath: [],
        hasArc: false,
        segments: [],
        polygons: [],
        polylines: [],
        curve: null,
        totalLength: 0,
        rect: new Rectangle(0, 0, 0, 0),
    };

    /**
     * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Content_type
     */
    var PropertySyntax;
    (function (PropertySyntax) {
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Content_type#coordinate
         */
        PropertySyntax["COORDINATE"] = "<coordinate>";
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Content_type#color
         */
        PropertySyntax["COLOR"] = "<color>";
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Content_type#paint
         */
        PropertySyntax["PAINT"] = "<paint>";
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Content_type#number
         */
        PropertySyntax["NUMBER"] = "<number>";
        /**
         * @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/angle
         */
        PropertySyntax["ANGLE"] = "<angle>";
        /**
         * <number> with range 0..1
         * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Content_type#opacity_value
         */
        PropertySyntax["OPACITY_VALUE"] = "<opacity-value>";
        /**
         * <number> with range 0..Infinity
         */
        PropertySyntax["SHADOW_BLUR"] = "<shadow-blur>";
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Content_type#length
         */
        PropertySyntax["LENGTH"] = "<length>";
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Content_type#percentage
         */
        PropertySyntax["PERCENTAGE"] = "<percentage>";
        PropertySyntax["LENGTH_PERCENTAGE"] = "<length> | <percentage>";
        PropertySyntax["LENGTH_PERCENTAGE_12"] = "[<length> | <percentage>]{1,2}";
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/margin#formal_syntax
         */
        PropertySyntax["LENGTH_PERCENTAGE_14"] = "[<length> | <percentage>]{1,4}";
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Content_type#list-of-ts
         */
        PropertySyntax["LIST_OF_POINTS"] = "<list-of-points>";
        PropertySyntax["PATH"] = "<path>";
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/filter#formal_syntax
         */
        PropertySyntax["FILTER"] = "<filter>";
        PropertySyntax["Z_INDEX"] = "<z-index>";
        PropertySyntax["OFFSET_DISTANCE"] = "<offset-distance>";
        PropertySyntax["DEFINED_PATH"] = "<defined-path>";
        PropertySyntax["MARKER"] = "<marker>";
        PropertySyntax["TRANSFORM"] = "<transform>";
        PropertySyntax["TRANSFORM_ORIGIN"] = "<transform-origin>";
        PropertySyntax["TEXT"] = "<text>";
        PropertySyntax["TEXT_TRANSFORM"] = "<text-transform>";
    })(PropertySyntax || (PropertySyntax = {}));

    /**
     * borrow from gradient-parser, but we delete some browser compatible prefix such as `-webkit-`
     * @see https://github.com/rafaelcaricio/gradient-parser
     */
    function colorStopToString(colorStop) {
        var type = colorStop.type, value = colorStop.value;
        if (type === 'hex') {
            return "#".concat(value);
        }
        else if (type === 'literal') {
            return value;
        }
        else if (type === 'rgb') {
            return "rgb(".concat(value.join(','), ")");
        }
        else {
            return "rgba(".concat(value.join(','), ")");
        }
    }
    var parseGradient$1 = (function () {
        var tokens = {
            linearGradient: /^(linear\-gradient)/i,
            repeatingLinearGradient: /^(repeating\-linear\-gradient)/i,
            radialGradient: /^(radial\-gradient)/i,
            repeatingRadialGradient: /^(repeating\-radial\-gradient)/i,
            /**
             * @see https://projects.verou.me/conic-gradient/
             */
            conicGradient: /^(conic\-gradient)/i,
            sideOrCorner: /^to (left (top|bottom)|right (top|bottom)|top (left|right)|bottom (left|right)|left|right|top|bottom)/i,
            extentKeywords: /^(closest\-side|closest\-corner|farthest\-side|farthest\-corner|contain|cover)/,
            positionKeywords: /^(left|center|right|top|bottom)/i,
            pixelValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/,
            percentageValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))\%/,
            emValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/,
            angleValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
            startCall: /^\(/,
            endCall: /^\)/,
            comma: /^,/,
            hexColor: /^\#([0-9a-fA-F]+)/,
            literalColor: /^([a-zA-Z]+)/,
            rgbColor: /^rgb/i,
            rgbaColor: /^rgba/i,
            number: /^(([0-9]*\.[0-9]+)|([0-9]+\.?))/,
        };
        var input = '';
        function error(msg) {
            throw new Error(input + ': ' + msg);
        }
        function getAST() {
            var ast = matchListDefinitions();
            if (input.length > 0) {
                error('Invalid input not EOF');
            }
            return ast;
        }
        function matchListDefinitions() {
            return matchListing(matchDefinition);
        }
        function matchDefinition() {
            return (matchGradient('linear-gradient', tokens.linearGradient, matchLinearOrientation) ||
                matchGradient('repeating-linear-gradient', tokens.repeatingLinearGradient, matchLinearOrientation) ||
                matchGradient('radial-gradient', tokens.radialGradient, matchListRadialOrientations) ||
                matchGradient('repeating-radial-gradient', tokens.repeatingRadialGradient, matchListRadialOrientations) ||
                matchGradient('conic-gradient', tokens.conicGradient, matchListRadialOrientations));
        }
        function matchGradient(gradientType, pattern, orientationMatcher) {
            return matchCall(pattern, function (captures) {
                var orientation = orientationMatcher();
                if (orientation) {
                    if (!scan(tokens.comma)) {
                        error('Missing comma before color stops');
                    }
                }
                return {
                    type: gradientType,
                    orientation: orientation,
                    colorStops: matchListing(matchColorStop),
                };
            });
        }
        function matchCall(pattern, callback) {
            var captures = scan(pattern);
            if (captures) {
                if (!scan(tokens.startCall)) {
                    error('Missing (');
                }
                var result = callback(captures);
                if (!scan(tokens.endCall)) {
                    error('Missing )');
                }
                return result;
            }
        }
        function matchLinearOrientation() {
            return matchSideOrCorner() || matchAngle();
        }
        function matchSideOrCorner() {
            return match('directional', tokens.sideOrCorner, 1);
        }
        function matchAngle() {
            return match('angular', tokens.angleValue, 1);
        }
        function matchListRadialOrientations() {
            var radialOrientations, radialOrientation = matchRadialOrientation(), lookaheadCache;
            if (radialOrientation) {
                radialOrientations = [];
                radialOrientations.push(radialOrientation);
                lookaheadCache = input;
                if (scan(tokens.comma)) {
                    radialOrientation = matchRadialOrientation();
                    if (radialOrientation) {
                        radialOrientations.push(radialOrientation);
                    }
                    else {
                        input = lookaheadCache;
                    }
                }
            }
            return radialOrientations;
        }
        function matchRadialOrientation() {
            var radialType = matchCircle() || matchEllipse();
            if (radialType) {
                // @ts-ignore
                radialType.at = matchAtPosition();
            }
            else {
                var extent = matchExtentKeyword();
                if (extent) {
                    radialType = extent;
                    var positionAt = matchAtPosition();
                    if (positionAt) {
                        // @ts-ignore
                        radialType.at = positionAt;
                    }
                }
                else {
                    var defaultPosition = matchPositioning();
                    if (defaultPosition) {
                        radialType = {
                            type: 'default-radial',
                            // @ts-ignore
                            at: defaultPosition,
                        };
                    }
                }
            }
            return radialType;
        }
        function matchCircle() {
            var circle = match('shape', /^(circle)/i, 0);
            if (circle) {
                // @ts-ignore
                circle.style = matchLength() || matchExtentKeyword();
            }
            return circle;
        }
        function matchEllipse() {
            var ellipse = match('shape', /^(ellipse)/i, 0);
            if (ellipse) {
                // @ts-ignore
                ellipse.style = matchDistance() || matchExtentKeyword();
            }
            return ellipse;
        }
        function matchExtentKeyword() {
            return match('extent-keyword', tokens.extentKeywords, 1);
        }
        function matchAtPosition() {
            if (match('position', /^at/, 0)) {
                var positioning = matchPositioning();
                if (!positioning) {
                    error('Missing positioning value');
                }
                return positioning;
            }
        }
        function matchPositioning() {
            var location = matchCoordinates();
            if (location.x || location.y) {
                return {
                    type: 'position',
                    value: location,
                };
            }
        }
        function matchCoordinates() {
            return {
                x: matchDistance(),
                y: matchDistance(),
            };
        }
        function matchListing(matcher) {
            var captures = matcher();
            var result = [];
            if (captures) {
                result.push(captures);
                while (scan(tokens.comma)) {
                    captures = matcher();
                    if (captures) {
                        result.push(captures);
                    }
                    else {
                        error('One extra comma');
                    }
                }
            }
            return result;
        }
        function matchColorStop() {
            var color = matchColor();
            if (!color) {
                error('Expected color definition');
            }
            color.length = matchDistance();
            return color;
        }
        function matchColor() {
            return (matchHexColor() ||
                matchRGBAColor() ||
                matchRGBColor() ||
                matchLiteralColor());
        }
        function matchLiteralColor() {
            return match('literal', tokens.literalColor, 0);
        }
        function matchHexColor() {
            return match('hex', tokens.hexColor, 1);
        }
        function matchRGBColor() {
            return matchCall(tokens.rgbColor, function () {
                return {
                    type: 'rgb',
                    value: matchListing(matchNumber),
                };
            });
        }
        function matchRGBAColor() {
            return matchCall(tokens.rgbaColor, function () {
                return {
                    type: 'rgba',
                    value: matchListing(matchNumber),
                };
            });
        }
        function matchNumber() {
            return scan(tokens.number)[1];
        }
        function matchDistance() {
            return (match('%', tokens.percentageValue, 1) ||
                matchPositionKeyword() ||
                matchLength());
        }
        function matchPositionKeyword() {
            return match('position-keyword', tokens.positionKeywords, 1);
        }
        function matchLength() {
            return match('px', tokens.pixelValue, 1) || match('em', tokens.emValue, 1);
        }
        function match(type, pattern, captureIndex) {
            var captures = scan(pattern);
            if (captures) {
                return {
                    type: type,
                    value: captures[captureIndex],
                };
            }
        }
        function scan(regexp) {
            var blankCaptures = /^[\n\r\t\s]+/.exec(input);
            if (blankCaptures) {
                consume(blankCaptures[0].length);
            }
            var captures = regexp.exec(input);
            if (captures) {
                consume(captures[0].length);
            }
            return captures;
        }
        function consume(size) {
            input = input.substring(size);
        }
        return function (code) {
            input = code;
            return getAST();
        };
    })();
    function computeLinearGradient(width, height, angle) {
        var rad = deg2rad(angle.value);
        var rx = 0;
        var ry = 0;
        var rcx = rx + width / 2;
        var rcy = ry + height / 2;
        // get the length of gradient line
        // @see https://observablehq.com/@danburzo/css-gradient-line
        var length = Math.abs(width * Math.cos(rad)) + Math.abs(height * Math.sin(rad));
        var x1 = rcx - (Math.cos(rad) * length) / 2;
        var y1 = rcy - (Math.sin(rad) * length) / 2;
        var x2 = rcx + (Math.cos(rad) * length) / 2;
        var y2 = rcy + (Math.sin(rad) * length) / 2;
        return { x1: x1, y1: y1, x2: x2, y2: y2 };
    }
    function computeRadialGradient(width, height, cx, cy, size) {
        // 'px'
        var x = cx.value;
        var y = cy.value;
        // TODO: 'em'
        // '%'
        if (cx.unit === UnitType.kPercentage) {
            x = (cx.value / 100) * width;
        }
        if (cy.unit === UnitType.kPercentage) {
            y = (cy.value / 100) * height;
        }
        // default to farthest-side
        var r = Math.max(distanceSquareRoot([0, 0], [x, y]), distanceSquareRoot([0, height], [x, y]), distanceSquareRoot([width, height], [x, y]), distanceSquareRoot([width, 0], [x, y]));
        if (size) {
            if (size instanceof CSSUnitValue) {
                r = size.value;
            }
            else if (size instanceof CSSKeywordValue) {
                // @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients#example_closest-side_for_circles
                if (size.value === 'closest-side') {
                    r = Math.min(x, width - x, y, height - y);
                }
                else if (size.value === 'farthest-side') {
                    r = Math.max(x, width - x, y, height - y);
                }
                else if (size.value === 'closest-corner') {
                    r = Math.min(distanceSquareRoot([0, 0], [x, y]), distanceSquareRoot([0, height], [x, y]), distanceSquareRoot([width, height], [x, y]), distanceSquareRoot([width, 0], [x, y]));
                }
            }
        }
        return { x: x, y: y, r: r };
    }

    var regexLG = /^l\s*\(\s*([\d.]+)\s*\)\s*(.*)/i;
    var regexRG = /^r\s*\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)\s*(.*)/i;
    var regexPR = /^p\s*\(\s*([axyn])\s*\)\s*(.*)/i;
    var regexColorStop = /[\d.]+:(#[^\s]+|[^\)]+\))/gi;
    function spaceColorStops(colorStops) {
        var _a, _b, _c;
        var length = colorStops.length;
        colorStops[length - 1].length = (_a = colorStops[length - 1].length) !== null && _a !== void 0 ? _a : {
            type: '%',
            value: '100',
        };
        if (length > 1) {
            colorStops[0].length = (_b = colorStops[0].length) !== null && _b !== void 0 ? _b : {
                type: '%',
                value: '0',
            };
        }
        var previousIndex = 0;
        var previousOffset = Number(colorStops[0].length.value);
        for (var i = 1; i < length; i++) {
            // support '%' & 'px'
            var offset = (_c = colorStops[i].length) === null || _c === void 0 ? void 0 : _c.value;
            if (!isNil(offset) && !isNil(previousOffset)) {
                for (var j = 1; j < i - previousIndex; j++)
                    colorStops[previousIndex + j].length = {
                        type: '%',
                        value: "".concat(previousOffset +
                            ((Number(offset) - previousOffset) * j) / (i - previousIndex)),
                    };
                previousIndex = i;
                previousOffset = Number(offset);
            }
        }
    }
    // The position of the gradient line's starting point.
    // different from CSS side(to top) @see https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient#values
    var SideOrCornerToDegMap = {
        left: 270 - 90,
        top: 0 - 90,
        bottom: 180 - 90,
        right: 90 - 90,
        'left top': 315 - 90,
        'top left': 315 - 90,
        'left bottom': 225 - 90,
        'bottom left': 225 - 90,
        'right top': 45 - 90,
        'top right': 45 - 90,
        'right bottom': 135 - 90,
        'bottom right': 135 - 90,
    };
    var angleToDeg = memoize(function (orientation) {
        var angle;
        if (orientation.type === 'angular') {
            angle = Number(orientation.value);
        }
        else {
            angle = SideOrCornerToDegMap[orientation.value] || 0;
        }
        return getOrCreateUnitValue(angle, 'deg');
    });
    var positonToCSSUnitValue = memoize(function (position) {
        var cx = 50;
        var cy = 50;
        var unitX = '%';
        var unitY = '%';
        if ((position === null || position === void 0 ? void 0 : position.type) === 'position') {
            var _a = position.value, x = _a.x, y = _a.y;
            if ((x === null || x === void 0 ? void 0 : x.type) === 'position-keyword') {
                if (x.value === 'left') {
                    cx = 0;
                }
                else if (x.value === 'center') {
                    cx = 50;
                }
                else if (x.value === 'right') {
                    cx = 100;
                }
                else if (x.value === 'top') {
                    cy = 0;
                }
                else if (x.value === 'bottom') {
                    cy = 100;
                }
            }
            if ((y === null || y === void 0 ? void 0 : y.type) === 'position-keyword') {
                if (y.value === 'left') {
                    cx = 0;
                }
                else if (y.value === 'center') {
                    cy = 50;
                }
                else if (y.value === 'right') {
                    cx = 100;
                }
                else if (y.value === 'top') {
                    cy = 0;
                }
                else if (y.value === 'bottom') {
                    cy = 100;
                }
            }
            if ((x === null || x === void 0 ? void 0 : x.type) === 'px' || (x === null || x === void 0 ? void 0 : x.type) === '%' || (x === null || x === void 0 ? void 0 : x.type) === 'em') {
                unitX = x === null || x === void 0 ? void 0 : x.type;
                cx = Number(x.value);
            }
            if ((y === null || y === void 0 ? void 0 : y.type) === 'px' || (y === null || y === void 0 ? void 0 : y.type) === '%' || (y === null || y === void 0 ? void 0 : y.type) === 'em') {
                unitY = y === null || y === void 0 ? void 0 : y.type;
                cy = Number(y.value);
            }
        }
        return {
            cx: getOrCreateUnitValue(cx, unitX),
            cy: getOrCreateUnitValue(cy, unitY),
        };
    });
    var parseGradient = memoize(function (colorStr) {
        var _a;
        if (colorStr.indexOf('linear') > -1 || colorStr.indexOf('radial') > -1) {
            var ast = parseGradient$1(colorStr);
            return ast.map(function (_a) {
                var type = _a.type, orientation = _a.orientation, colorStops = _a.colorStops;
                spaceColorStops(colorStops);
                var steps = colorStops.map(function (colorStop) {
                    // TODO: only support % for now, should calc percentage of axis length when using px/em
                    return {
                        offset: getOrCreateUnitValue(Number(colorStop.length.value), '%'),
                        color: colorStopToString(colorStop),
                    };
                });
                if (type === 'linear-gradient') {
                    return new CSSGradientValue(GradientType.LinearGradient, {
                        angle: orientation
                            ? angleToDeg(orientation)
                            : Odeg,
                        steps: steps,
                    });
                }
                else if (type === 'radial-gradient') {
                    if (!orientation) {
                        orientation = [
                            {
                                type: 'shape',
                                value: 'circle',
                            },
                        ];
                    }
                    if (orientation[0].type === 'shape' &&
                        orientation[0].value === 'circle') {
                        var _b = positonToCSSUnitValue(orientation[0].at), cx = _b.cx, cy = _b.cy;
                        var size = void 0;
                        if (orientation[0].style) {
                            var _c = orientation[0].style, type_1 = _c.type, value = _c.value;
                            if (type_1 === 'extent-keyword') {
                                size = getOrCreateKeyword(value);
                            }
                            else {
                                size = getOrCreateUnitValue(value, type_1);
                            }
                        }
                        return new CSSGradientValue(GradientType.RadialGradient, {
                            cx: cx,
                            cy: cy,
                            size: size,
                            steps: steps,
                        });
                    }
                    // TODO: support ellipse shape
                    // TODO: repeating-linear-gradient & repeating-radial-gradient
                    // } else if (type === 'repeating-linear-gradient') {
                    // } else if (type === 'repeating-radial-gradient') {
                }
            });
        }
        // legacy format, should be deprecated later
        var type = colorStr[0];
        if (colorStr[1] === '(' || colorStr[2] === '(') {
            if (type === 'l') {
                var arr = regexLG.exec(colorStr);
                if (arr) {
                    var steps = ((_a = arr[2].match(regexColorStop)) === null || _a === void 0 ? void 0 : _a.map(function (stop) { return stop.split(':'); })) || [];
                    return [
                        new CSSGradientValue(GradientType.LinearGradient, {
                            angle: getOrCreateUnitValue(parseFloat(arr[1]), 'deg'),
                            steps: steps.map(function (_a) {
                                var _b = __read(_a, 2), offset = _b[0], color = _b[1];
                                return ({
                                    offset: getOrCreateUnitValue(Number(offset) * 100, '%'),
                                    color: color,
                                });
                            }),
                        }),
                    ];
                }
            }
            else if (type === 'r') {
                var parsedRadialGradient = parseRadialGradient(colorStr);
                if (parsedRadialGradient) {
                    if (isString(parsedRadialGradient)) {
                        colorStr = parsedRadialGradient;
                    }
                    else {
                        return [
                            new CSSGradientValue(GradientType.RadialGradient, parsedRadialGradient),
                        ];
                    }
                }
            }
            else if (type === 'p') {
                return parsePattern(colorStr);
            }
        }
    });
    function parseRadialGradient(gradientStr) {
        var _a;
        var arr = regexRG.exec(gradientStr);
        if (arr) {
            var steps = ((_a = arr[4].match(regexColorStop)) === null || _a === void 0 ? void 0 : _a.map(function (stop) { return stop.split(':'); })) || [];
            return {
                cx: getOrCreateUnitValue(50, '%'),
                cy: getOrCreateUnitValue(50, '%'),
                steps: steps.map(function (_a) {
                    var _b = __read(_a, 2), offset = _b[0], color = _b[1];
                    return ({
                        offset: getOrCreateUnitValue(Number(offset) * 100, '%'),
                        color: color,
                    });
                }),
            };
        }
        return null;
    }
    function parsePattern(patternStr) {
        var arr = regexPR.exec(patternStr);
        if (arr) {
            var repetition = arr[1];
            var src = arr[2];
            switch (repetition) {
                case 'a':
                    repetition = 'repeat';
                    break;
                case 'x':
                    repetition = 'repeat-x';
                    break;
                case 'y':
                    repetition = 'repeat-y';
                    break;
                case 'n':
                    repetition = 'no-repeat';
                    break;
                default:
                    repetition = 'no-repeat';
            }
            return {
                image: src,
                // @ts-ignore
                repetition: repetition,
            };
        }
        return null;
    }
    function isPattern(object) {
        return object && !!object.image;
    }
    function isCSSRGB(object) {
        return (object &&
            !isNil(object.r) &&
            !isNil(object.g) &&
            !isNil(object.b));
    }
    /**
     * @see https://github.com/WebKit/WebKit/blob/main/Source/WebCore/css/parser/CSSParser.cpp#L97
     */
    var parseColor = memoize(function (colorStr) {
        if (isPattern(colorStr)) {
            return __assign({ repetition: 'repeat' }, colorStr);
        }
        if (isNil(colorStr)) {
            colorStr = '';
        }
        if (colorStr === 'transparent') {
            // transparent black
            return transparentColor;
        }
        else if (colorStr === 'currentColor') {
            // @see https://github.com/adobe-webplatform/Snap.svg/issues/526
            colorStr = 'black';
        }
        // support CSS gradient syntax
        var g = parseGradient(colorStr);
        if (g) {
            return g;
        }
        // constants
        var color$1 = color(colorStr);
        var rgba = [0, 0, 0, 0];
        if (color$1 !== null) {
            rgba[0] = color$1.r || 0;
            rgba[1] = color$1.g || 0;
            rgba[2] = color$1.b || 0;
            rgba[3] = color$1.opacity;
        }
        // return new CSSRGB(...rgba);
        return getOrCreateRGBA.apply(void 0, __spreadArray([], __read(rgba), false));
    });
    function mergeColors(left, right) {
        // only support constant value, exclude gradient & pattern
        if (!isCSSRGB(left) || !isCSSRGB(right)) {
            return;
        }
        return [
            [Number(left.r), Number(left.g), Number(left.b), Number(left.alpha)],
            [Number(right.r), Number(right.g), Number(right.b), Number(right.alpha)],
            function (color) {
                var rgba = color.slice();
                if (rgba[3]) {
                    for (var i = 0; i < 3; i++)
                        rgba[i] = Math.round(clamp(rgba[i], 0, 255));
                }
                rgba[3] = clamp(rgba[3], 0, 1);
                return "rgba(".concat(rgba.join(','), ")");
            },
        ];
    }

    function parseDimension(unitRegExp, string) {
        if (isNil(string)) {
            return getOrCreateUnitValue(0, 'px');
        }
        string = "".concat(string).trim().toLowerCase();
        if (isFinite(Number(string))) {
            if ('px'.search(unitRegExp) >= 0) {
                return getOrCreateUnitValue(Number(string), 'px');
            }
            else if ('deg'.search(unitRegExp) >= 0) {
                return getOrCreateUnitValue(Number(string), 'deg');
            }
        }
        var matchedUnits = [];
        string = string.replace(unitRegExp, function (match) {
            matchedUnits.push(match);
            return 'U' + match;
        });
        var taggedUnitRegExp = 'U(' + unitRegExp.source + ')';
        return matchedUnits.map(function (unit) {
            return getOrCreateUnitValue(Number(string
                .replace(new RegExp('U' + unit, 'g'), '')
                .replace(new RegExp(taggedUnitRegExp, 'g'), '*0')), unit);
        })[0];
    }
    /**
     * <length>
     * @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/length
     * length with only absolute unit, eg. 1px
     */
    var parseLengthUnmemoize = function (css) {
        return parseDimension(new RegExp('px', 'g'), css);
    };
    var parseLength = memoize(parseLengthUnmemoize);
    /**
     * <percentage>
     * @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/percentage
     */
    var parserPercentageUnmemoize = function (css) {
        return parseDimension(new RegExp('%', 'g'), css);
    };
    memoize(parserPercentageUnmemoize);
    /**
     * length with absolute or relative unit,
     * eg. 1px, 0.7em, 50%, calc(100% - 200px);
     *
     * @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/length-percentage
     */
    var parseLengthOrPercentageUnmemoize = function (css) {
        if (isNumber(css) || isFinite(Number(css))) {
            // Number(css) is NaN
            return getOrCreateUnitValue(Number(css) || 0, 'px');
            // return Number(css);
        }
        return parseDimension(new RegExp('px|%|em|rem', 'g'), css);
    };
    var parseLengthOrPercentage = memoize(parseLengthOrPercentageUnmemoize);
    var parseAngleUnmemoize = function (css) {
        return parseDimension(new RegExp('deg|rad|grad|turn', 'g'), css);
    };
    var parseAngle = memoize(parseAngleUnmemoize);
    /**
     * merge CSSUnitValue
     *
     * @example
     * 10px + 20px = 30px
     * 10deg + 10rad
     * 10% + 20% = 30%
     */
    function mergeDimensions(left, right, target, nonNegative, index) {
        if (index === void 0) { index = 0; }
        var unit = '';
        var leftValue = left.value || 0;
        var rightValue = right.value || 0;
        var canonicalUnit = toCanonicalUnit(left.unit);
        var leftCanonicalUnitValue = left.convertTo(canonicalUnit);
        var rightCanonicalUnitValue = right.convertTo(canonicalUnit);
        if (leftCanonicalUnitValue && rightCanonicalUnitValue) {
            leftValue = leftCanonicalUnitValue.value;
            rightValue = rightCanonicalUnitValue.value;
            unit = unitTypeToString(left.unit);
        }
        else {
            // format '%' to 'px'
            if (CSSUnitValue.isLength(left.unit) || CSSUnitValue.isLength(right.unit)) {
                leftValue = convertPercentUnit(left, index, target);
                rightValue = convertPercentUnit(right, index, target);
                unit = 'px';
            }
        }
        // // format 'rad' 'turn' to 'deg'
        // if (CSSUnitValue.isAngle(left.unit) || CSSUnitValue.isAngle(right.unit)) {
        //   leftValue = convertAngleUnit(left);
        //   rightValue = convertAngleUnit(right);
        //   unit = 'deg';
        // }
        return [
            leftValue,
            rightValue,
            function (value) {
                if (nonNegative) {
                    value = Math.max(value, 0);
                }
                return value + unit;
            },
        ];
    }
    function convertAngleUnit(value) {
        var deg = 0;
        if (value.unit === UnitType.kDegrees) {
            deg = value.value;
        }
        else if (value.unit === UnitType.kRadians) {
            deg = rad2deg(Number(value.value));
        }
        else if (value.unit === UnitType.kTurns) {
            deg = turn2deg(Number(value.value));
        }
        return deg;
    }
    function parseDimensionArrayFormat(string, size) {
        var parsed;
        if (Array.isArray(string)) {
            // [1, '2px', 3]
            parsed = string.map(function (segment) { return Number(segment); });
        }
        else if (isString(string)) {
            parsed = string.split(' ').map(function (segment) { return Number(segment); });
        }
        else if (isNumber(string)) {
            parsed = [string];
        }
        if (size === 2) {
            if (parsed.length === 1) {
                return [parsed[0], parsed[0]];
            }
            else {
                return [parsed[0], parsed[1]];
            }
        }
        else {
            if (parsed.length === 1) {
                return [parsed[0], parsed[0], parsed[0], parsed[0]];
            }
            else if (parsed.length === 2) {
                return [parsed[0], parsed[1], parsed[0], parsed[1]];
            }
            else if (parsed.length === 3) {
                return [parsed[0], parsed[1], parsed[2], parsed[1]];
            }
            else {
                return [parsed[0], parsed[1], parsed[2], parsed[3]];
            }
        }
    }
    function parseDimensionArray(string) {
        if (isString(string)) {
            // "1px 2px 3px"
            return string.split(' ').map(function (segment) { return parseLengthOrPercentage(segment); });
        }
        else {
            // [1, '2px', 3]
            return string.map(function (segment) { return parseLengthOrPercentage(segment.toString()); });
        }
    }
    // export function mergeDimensionList(
    //   left: CSSUnitValue[],
    //   right: CSSUnitValue[],
    //   target: IElement | null,
    // ): [number[], number[], (list: number[]) => string] | undefined {
    //   if (left.length !== right.length) {
    //     return;
    //   }
    //   const unit = left[0].unit;
    //   return [
    //     left.map((l) => l.value),
    //     right.map((l) => l.value),
    //     (values: number[]) => {
    //       return values.map((n) => new CSSUnitValue(n, unit)).join(' ');
    //     },
    //   ];
    // }
    function convertPercentUnit(valueWithUnit, vec3Index, target) {
        if (valueWithUnit.value === 0) {
            return 0;
        }
        if (valueWithUnit.unit === UnitType.kPixels) {
            return Number(valueWithUnit.value);
        }
        else if (valueWithUnit.unit === UnitType.kPercentage && target) {
            var bounds = target.nodeName === Shape.GROUP
                ? target.getLocalBounds()
                : // : target.getGeometryBounds();
                    target.geometry.contentBounds;
            return (valueWithUnit.value / 100) * bounds.halfExtents[vec3Index] * 2;
        }
        return 0;
    }

    var parseParam = function (css) {
        return parseDimension(/deg|rad|grad|turn|px|%/g, css);
    };
    var supportedFilters = [
        'blur',
        'brightness',
        'drop-shadow',
        'contrast',
        'grayscale',
        'sepia',
        'saturate',
        'hue-rotate',
        'invert',
    ];
    function parseFilter(filterStr) {
        if (filterStr === void 0) { filterStr = ''; }
        filterStr = filterStr.toLowerCase().trim();
        if (filterStr === 'none') {
            return [];
        }
        var filterRegExp = /\s*([\w-]+)\(([^)]*)\)/g;
        var result = [];
        var match;
        var prevLastIndex = 0;
        while ((match = filterRegExp.exec(filterStr))) {
            if (match.index !== prevLastIndex) {
                return [];
            }
            prevLastIndex = match.index + match[0].length;
            if (supportedFilters.indexOf(match[1]) > -1) {
                result.push({
                    name: match[1],
                    params: match[2].split(' ').map(function (p) { return parseParam(p) || parseColor(p); }),
                });
            }
            if (filterRegExp.lastIndex === filterStr.length) {
                return result;
            }
        }
        return [];
    }

    function numberToString(x) {
        // scale(0.00000001) -> scale(0)
        // return x.toFixed(6).replace(/0+$/, '').replace(/\.$/, '');
        return x.toString();
    }
    /**
     * parse string or number to CSSUnitValue(numeric)
     *
     * eg.
     * * 0 -> CSSUnitValue(0)
     * * '2' -> CSSUnitValue(2)
     */
    var parseNumberUnmemoize = function (string) {
        if (typeof string === 'number') {
            return getOrCreateUnitValue(string);
        }
        if (/^\s*[-+]?(\d*\.)?\d+\s*$/.test(string)) {
            return getOrCreateUnitValue(Number(string));
        }
        else {
            return getOrCreateUnitValue(0);
        }
    };
    var parseNumber = memoize(parseNumberUnmemoize);
    memoize(function (string) {
        if (isString(string)) {
            return string.split(' ').map(parseNumber);
        }
        else {
            return string.map(parseNumber);
        }
    });
    function mergeNumbers(left, right) {
        return [left, right, numberToString];
    }
    function clampedMergeNumbers(min, max) {
        return function (left, right) { return [
            left,
            right,
            function (x) { return numberToString(clamp(x, min, max)); },
        ]; };
    }
    function mergeNumberLists(left, right) {
        if (left.length !== right.length) {
            return;
        }
        return [
            left,
            right,
            function (numberList) {
                return numberList;
            },
        ];
    }

    function getOrCalculatePathTotalLength(path) {
        if (path.parsedStyle.path.totalLength === 0) {
            path.parsedStyle.path.totalLength = getTotalLength(path.parsedStyle.path.absolutePath);
        }
        return path.parsedStyle.path.totalLength;
    }
    function removeRedundantMCommand(path) {
        for (var i = 0; i < path.length; i++) {
            var prevSegment = path[i - 1];
            var segment = path[i];
            var cmd = segment[0];
            if (cmd === 'M') {
                if (prevSegment) {
                    var prevCmd = prevSegment[0];
                    var srcPoint = [segment[1], segment[2]];
                    var destPoint = void 0;
                    if (prevCmd === 'L' || prevCmd === 'M') {
                        destPoint = [prevSegment[1], prevSegment[2]];
                    }
                    else if (prevCmd === 'C' || prevCmd === 'A' || prevCmd === 'Q') {
                        destPoint = [
                            prevSegment[prevSegment.length - 2],
                            prevSegment[prevSegment.length - 1],
                        ];
                    }
                    if (destPoint && isSamePoint(srcPoint, destPoint)) {
                        path.splice(i, 1);
                        i--;
                    }
                }
            }
        }
    }
    function hasArcOrBezier(path) {
        var hasArc = false;
        var count = path.length;
        for (var i = 0; i < count; i++) {
            var params = path[i];
            var cmd = params[0];
            if (cmd === 'C' || cmd === 'A' || cmd === 'Q') {
                hasArc = true;
                break;
            }
        }
        return hasArc;
    }
    function extractPolygons(pathArray) {
        var polygons = [];
        var polylines = [];
        var points = []; // 防止第一个命令不是 'M'
        for (var i = 0; i < pathArray.length; i++) {
            var params = pathArray[i];
            var cmd = params[0];
            if (cmd === 'M') {
                // 遇到 'M' 判定是否是新数组，新数组中没有点
                if (points.length) {
                    // 如果存在点，则说明没有遇到 'Z'，开始了一个新的多边形
                    polylines.push(points);
                    points = []; // 创建新的点
                }
                points.push([params[1], params[2]]);
            }
            else if (cmd === 'Z') {
                if (points.length) {
                    // 存在点
                    polygons.push(points);
                    points = []; // 开始新的点集合
                }
                // 如果不存在点，同时 'Z'，则说明是错误，不处理
            }
            else {
                points.push([params[1], params[2]]);
            }
        }
        // 说明 points 未放入 polygons 或者 polyline
        // 仅当只有一个 M，没有 Z 时会发生这种情况
        if (points.length > 0) {
            polylines.push(points);
        }
        return {
            polygons: polygons,
            polylines: polylines,
        };
    }
    function isSamePoint(point1, point2) {
        return point1[0] === point2[0] && point1[1] === point2[1];
    }
    function getPathBBox(segments, lineWidth) {
        var xArr = [];
        var yArr = [];
        var segmentsWithAngle = [];
        for (var i = 0; i < segments.length; i++) {
            var segment = segments[i];
            var currentPoint = segment.currentPoint, params = segment.params, prePoint = segment.prePoint;
            var box$1 = void 0;
            switch (segment.command) {
                case 'Q':
                    box$1 = box(prePoint[0], prePoint[1], params[1], params[2], params[3], params[4]);
                    break;
                case 'C':
                    box$1 = box$3(prePoint[0], prePoint[1], params[1], params[2], params[3], params[4], params[5], params[6]);
                    break;
                case 'A':
                    var arcParams = segment.arcParams;
                    box$1 = box$5(arcParams.cx, arcParams.cy, arcParams.rx, arcParams.ry, arcParams.xRotation, arcParams.startAngle, arcParams.endAngle);
                    break;
                default:
                    xArr.push(currentPoint[0]);
                    yArr.push(currentPoint[1]);
                    break;
            }
            if (box$1) {
                segment.box = box$1;
                xArr.push(box$1.x, box$1.x + box$1.width);
                yArr.push(box$1.y, box$1.y + box$1.height);
            }
            if (lineWidth &&
                (segment.command === 'L' || segment.command === 'M') &&
                segment.prePoint &&
                segment.nextPoint) {
                segmentsWithAngle.push(segment);
            }
        }
        // bbox calculation should ignore NaN for path attribute
        // ref: https://github.com/antvis/g/issues/210
        // ref: https://github.com/antvis/G2/issues/3109
        xArr = xArr.filter(function (item) { return !Number.isNaN(item) && item !== Infinity && item !== -Infinity; });
        yArr = yArr.filter(function (item) { return !Number.isNaN(item) && item !== Infinity && item !== -Infinity; });
        var minX = min(xArr);
        var minY = min(yArr);
        var maxX = max(xArr);
        var maxY = max(yArr);
        if (segmentsWithAngle.length === 0) {
            return {
                x: minX,
                y: minY,
                width: maxX - minX,
                height: maxY - minY,
            };
        }
        for (var i = 0; i < segmentsWithAngle.length; i++) {
            var segment = segmentsWithAngle[i];
            var currentPoint = segment.currentPoint;
            var extra = void 0;
            if (currentPoint[0] === minX) {
                extra = getExtraFromSegmentWithAngle(segment, lineWidth);
                minX = minX - extra.xExtra;
            }
            else if (currentPoint[0] === maxX) {
                extra = getExtraFromSegmentWithAngle(segment, lineWidth);
                maxX = maxX + extra.xExtra;
            }
            if (currentPoint[1] === minY) {
                extra = getExtraFromSegmentWithAngle(segment, lineWidth);
                minY = minY - extra.yExtra;
            }
            else if (currentPoint[1] === maxY) {
                extra = getExtraFromSegmentWithAngle(segment, lineWidth);
                maxY = maxY + extra.yExtra;
            }
        }
        return {
            x: minX,
            y: minY,
            width: maxX - minX,
            height: maxY - minY,
        };
    }
    function getExtraFromSegmentWithAngle(segment, lineWidth) {
        var prePoint = segment.prePoint, currentPoint = segment.currentPoint, nextPoint = segment.nextPoint;
        var currentAndPre = Math.pow(currentPoint[0] - prePoint[0], 2) +
            Math.pow(currentPoint[1] - prePoint[1], 2);
        var currentAndNext = Math.pow(currentPoint[0] - nextPoint[0], 2) +
            Math.pow(currentPoint[1] - nextPoint[1], 2);
        var preAndNext = Math.pow(prePoint[0] - nextPoint[0], 2) +
            Math.pow(prePoint[1] - nextPoint[1], 2);
        // 以 currentPoint 为顶点的夹角
        var currentAngle = Math.acos((currentAndPre + currentAndNext - preAndNext) /
            (2 * Math.sqrt(currentAndPre) * Math.sqrt(currentAndNext)));
        // 夹角为空、 0 或 PI 时，不需要计算夹角处的额外宽度
        // 注意: 由于计算精度问题，夹角为 0 的情况计算出来的角度可能是一个很小的值，还需要判断其与 0 是否近似相等
        if (!currentAngle ||
            Math.sin(currentAngle) === 0 ||
            isNumberEqual(currentAngle, 0)) {
            return {
                xExtra: 0,
                yExtra: 0,
            };
        }
        var xAngle = Math.abs(Math.atan2(nextPoint[1] - currentPoint[1], nextPoint[0] - currentPoint[0]));
        var yAngle = Math.abs(Math.atan2(nextPoint[0] - currentPoint[0], nextPoint[1] - currentPoint[1]));
        // 将夹角转为锐角
        xAngle = xAngle > Math.PI / 2 ? Math.PI - xAngle : xAngle;
        yAngle = yAngle > Math.PI / 2 ? Math.PI - yAngle : yAngle;
        // 这里不考虑在水平和垂直方向的投影，直接使用最大差值
        // 由于上层统一加减了二分之一线宽，这里需要进行弥补
        var extra = {
            // 水平方向投影
            xExtra: Math.cos(currentAngle / 2 - xAngle) *
                ((lineWidth / 2) * (1 / Math.sin(currentAngle / 2))) -
                lineWidth / 2 || 0,
            // 垂直方向投影
            yExtra: Math.cos(yAngle - currentAngle / 2) *
                ((lineWidth / 2) * (1 / Math.sin(currentAngle / 2))) -
                lineWidth / 2 || 0,
        };
        return extra;
    }
    // 点对称
    function toSymmetry(point, center) {
        return [
            center[0] + (center[0] - point[0]),
            center[1] + (center[1] - point[1]),
        ];
    }
    var angleBetween$1 = function (v0, v1) {
        var p = v0.x * v1.x + v0.y * v1.y;
        var n = Math.sqrt((Math.pow(v0.x, 2) + Math.pow(v0.y, 2)) *
            (Math.pow(v1.x, 2) + Math.pow(v1.y, 2)));
        var sign = v0.x * v1.y - v0.y * v1.x < 0 ? -1 : 1;
        var angle = sign * Math.acos(p / n);
        return angle;
    };
    /**
     * @see https://github.com/rveciana/svg-path-properties/blob/b6bd9a322966f6ef7a311872d80c56e3718de861/src/arc.ts#L121
     */
    var pointOnEllipticalArc = function (p0, rx, ry, xAxisRotation, largeArcFlag, sweepFlag, p1, t) {
        // In accordance to: http://www.w3.org/TR/SVG/implnote.html#ArcOutOfRangeParameters
        rx = Math.abs(rx);
        ry = Math.abs(ry);
        xAxisRotation = mod(xAxisRotation, 360);
        var xAxisRotationRadians = deg2rad(xAxisRotation);
        // If the endpoints are identical, then this is equivalent to omitting the elliptical arc segment entirely.
        if (p0.x === p1.x && p0.y === p1.y) {
            return { x: p0.x, y: p0.y, ellipticalArcAngle: 0 }; // Check if angle is correct
        }
        // If rx = 0 or ry = 0 then this arc is treated as a straight line segment joining the endpoints.
        if (rx === 0 || ry === 0) {
            //return this.pointOnLine(p0, p1, t);
            return { x: 0, y: 0, ellipticalArcAngle: 0 }; // Check if angle is correct
        }
        // Following "Conversion from endpoint to center parameterization"
        // http://www.w3.org/TR/SVG/implnote.html#ArcConversionEndpointToCenter
        // Step #1: Compute transformedPoint
        var dx = (p0.x - p1.x) / 2;
        var dy = (p0.y - p1.y) / 2;
        var transformedPoint = {
            x: Math.cos(xAxisRotationRadians) * dx + Math.sin(xAxisRotationRadians) * dy,
            y: -Math.sin(xAxisRotationRadians) * dx +
                Math.cos(xAxisRotationRadians) * dy,
        };
        // Ensure radii are large enough
        var radiiCheck = Math.pow(transformedPoint.x, 2) / Math.pow(rx, 2) +
            Math.pow(transformedPoint.y, 2) / Math.pow(ry, 2);
        if (radiiCheck > 1) {
            rx = Math.sqrt(radiiCheck) * rx;
            ry = Math.sqrt(radiiCheck) * ry;
        }
        // Step #2: Compute transformedCenter
        var cSquareNumerator = Math.pow(rx, 2) * Math.pow(ry, 2) -
            Math.pow(rx, 2) * Math.pow(transformedPoint.y, 2) -
            Math.pow(ry, 2) * Math.pow(transformedPoint.x, 2);
        var cSquareRootDenom = Math.pow(rx, 2) * Math.pow(transformedPoint.y, 2) +
            Math.pow(ry, 2) * Math.pow(transformedPoint.x, 2);
        var cRadicand = cSquareNumerator / cSquareRootDenom;
        // Make sure this never drops below zero because of precision
        cRadicand = cRadicand < 0 ? 0 : cRadicand;
        var cCoef = (largeArcFlag !== sweepFlag ? 1 : -1) * Math.sqrt(cRadicand);
        var transformedCenter = {
            x: cCoef * ((rx * transformedPoint.y) / ry),
            y: cCoef * (-(ry * transformedPoint.x) / rx),
        };
        // Step #3: Compute center
        var center = {
            x: Math.cos(xAxisRotationRadians) * transformedCenter.x -
                Math.sin(xAxisRotationRadians) * transformedCenter.y +
                (p0.x + p1.x) / 2,
            y: Math.sin(xAxisRotationRadians) * transformedCenter.x +
                Math.cos(xAxisRotationRadians) * transformedCenter.y +
                (p0.y + p1.y) / 2,
        };
        // Step #4: Compute start/sweep angles
        // Start angle of the elliptical arc prior to the stretch and rotate operations.
        // Difference between the start and end angles
        var startVector = {
            x: (transformedPoint.x - transformedCenter.x) / rx,
            y: (transformedPoint.y - transformedCenter.y) / ry,
        };
        var startAngle = angleBetween$1({
            x: 1,
            y: 0,
        }, startVector);
        var endVector = {
            x: (-transformedPoint.x - transformedCenter.x) / rx,
            y: (-transformedPoint.y - transformedCenter.y) / ry,
        };
        var sweepAngle = angleBetween$1(startVector, endVector);
        if (!sweepFlag && sweepAngle > 0) {
            sweepAngle -= 2 * Math.PI;
        }
        else if (sweepFlag && sweepAngle < 0) {
            sweepAngle += 2 * Math.PI;
        }
        // We use % instead of `mod(..)` because we want it to be -360deg to 360deg(but actually in radians)
        sweepAngle %= 2 * Math.PI;
        // From http://www.w3.org/TR/SVG/implnote.html#ArcParameterizationAlternatives
        var angle = startAngle + sweepAngle * t;
        var ellipseComponentX = rx * Math.cos(angle);
        var ellipseComponentY = ry * Math.sin(angle);
        var point = {
            x: Math.cos(xAxisRotationRadians) * ellipseComponentX -
                Math.sin(xAxisRotationRadians) * ellipseComponentY +
                center.x,
            y: Math.sin(xAxisRotationRadians) * ellipseComponentX +
                Math.cos(xAxisRotationRadians) * ellipseComponentY +
                center.y,
            ellipticalArcStartAngle: startAngle,
            ellipticalArcEndAngle: startAngle + sweepAngle,
            ellipticalArcAngle: angle,
            ellipticalArcCenter: center,
            resultantRx: rx,
            resultantRy: ry,
        };
        return point;
    };
    function path2Segments(path) {
        var segments = [];
        var currentPoint = null; // 当前图形
        var nextParams = null; // 下一节点的 path 参数
        var startMovePoint = null; // 开始 M 的点，可能会有多个
        var lastStartMovePointIndex = 0; // 最近一个开始点 M 的索引
        var count = path.length;
        for (var i = 0; i < count; i++) {
            var params = path[i];
            nextParams = path[i + 1];
            var command = params[0];
            // 数学定义上的参数，便于后面的计算
            var segment = {
                command: command,
                prePoint: currentPoint,
                params: params,
                startTangent: null,
                endTangent: null,
                currentPoint: null,
                nextPoint: null,
                arcParams: null,
                box: null,
                cubicParams: null,
            };
            switch (command) {
                case 'M':
                    startMovePoint = [params[1], params[2]];
                    lastStartMovePointIndex = i;
                    break;
                case 'A':
                    var arcParams = getArcParams(currentPoint, params);
                    segment.arcParams = arcParams;
                    break;
            }
            if (command === 'Z') {
                // 有了 Z 后，当前节点从开始 M 的点开始
                currentPoint = startMovePoint;
                // 如果当前点的命令为 Z，相当于当前点为最近一个 M 点，则下一个点直接指向最近一个 M 点的下一个点
                nextParams = path[lastStartMovePointIndex + 1];
            }
            else {
                var len = params.length;
                currentPoint = [params[len - 2], params[len - 1]];
            }
            if (nextParams && nextParams[0] === 'Z') {
                // 如果下一个点的命令为 Z，则下一个点直接指向最近一个 M 点
                nextParams = path[lastStartMovePointIndex];
                if (segments[lastStartMovePointIndex]) {
                    // 如果下一个点的命令为 Z，则最近一个 M 点的前一个点为当前点
                    segments[lastStartMovePointIndex].prePoint = currentPoint;
                }
            }
            segment.currentPoint = currentPoint;
            // 如果当前点与最近一个 M 点相同，则最近一个 M 点的前一个点为当前点的前一个点
            if (segments[lastStartMovePointIndex] &&
                isSamePoint(currentPoint, segments[lastStartMovePointIndex].currentPoint)) {
                segments[lastStartMovePointIndex].prePoint = segment.prePoint;
            }
            var nextPoint = nextParams
                ? [nextParams[nextParams.length - 2], nextParams[nextParams.length - 1]]
                : null;
            segment.nextPoint = nextPoint;
            // Add startTangent and endTangent
            var prePoint = segment.prePoint;
            if (['L', 'H', 'V'].includes(command)) {
                segment.startTangent = [
                    prePoint[0] - currentPoint[0],
                    prePoint[1] - currentPoint[1],
                ];
                segment.endTangent = [
                    currentPoint[0] - prePoint[0],
                    currentPoint[1] - prePoint[1],
                ];
            }
            else if (command === 'Q') {
                // 二次贝塞尔曲线只有一个控制点
                var cp = [params[1], params[2]];
                // 二次贝塞尔曲线的终点为 currentPoint
                segment.startTangent = [prePoint[0] - cp[0], prePoint[1] - cp[1]];
                segment.endTangent = [currentPoint[0] - cp[0], currentPoint[1] - cp[1]];
            }
            else if (command === 'T') {
                var preSegment = segments[i - 1];
                var cp = toSymmetry(preSegment.currentPoint, prePoint);
                if (preSegment.command === 'Q') {
                    segment.command = 'Q';
                    segment.startTangent = [prePoint[0] - cp[0], prePoint[1] - cp[1]];
                    segment.endTangent = [currentPoint[0] - cp[0], currentPoint[1] - cp[1]];
                }
                else {
                    // @ts-ignore
                    segment.command = 'TL';
                    segment.startTangent = [
                        prePoint[0] - currentPoint[0],
                        prePoint[1] - currentPoint[1],
                    ];
                    segment.endTangent = [
                        currentPoint[0] - prePoint[0],
                        currentPoint[1] - prePoint[1],
                    ];
                }
            }
            else if (command === 'C') {
                // 三次贝塞尔曲线有两个控制点
                var cp1 = [params[1], params[2]];
                var cp2 = [params[3], params[4]];
                segment.startTangent = [prePoint[0] - cp1[0], prePoint[1] - cp1[1]];
                segment.endTangent = [currentPoint[0] - cp2[0], currentPoint[1] - cp2[1]];
                // horizontal line, eg. ['C', 100, 100, 100, 100, 200, 200]
                if (segment.startTangent[0] === 0 && segment.startTangent[1] === 0) {
                    segment.startTangent = [cp1[0] - cp2[0], cp1[1] - cp2[1]];
                }
                if (segment.endTangent[0] === 0 && segment.endTangent[1] === 0) {
                    segment.endTangent = [cp2[0] - cp1[0], cp2[1] - cp1[1]];
                }
            }
            else if (command === 'S') {
                var preSegment = segments[i - 1];
                var cp1 = toSymmetry(preSegment.currentPoint, prePoint);
                var cp2 = [params[1], params[2]];
                if (preSegment.command === 'C') {
                    segment.command = 'C'; // 将 S 命令变换为 C 命令
                    segment.startTangent = [prePoint[0] - cp1[0], prePoint[1] - cp1[1]];
                    segment.endTangent = [
                        currentPoint[0] - cp2[0],
                        currentPoint[1] - cp2[1],
                    ];
                }
                else {
                    // @ts-ignore
                    segment.command = 'SQ'; // 将 S 命令变换为 SQ 命令
                    segment.startTangent = [prePoint[0] - cp2[0], prePoint[1] - cp2[1]];
                    segment.endTangent = [
                        currentPoint[0] - cp2[0],
                        currentPoint[1] - cp2[1],
                    ];
                }
            }
            else if (command === 'A') {
                var _a = getTangentAtRatio(segment, 0), dx1 = _a.x, dy1 = _a.y;
                var _b = getTangentAtRatio(segment, 1, false), dx2 = _b.x, dy2 = _b.y;
                segment.startTangent = [dx1, dy1];
                segment.endTangent = [dx2, dy2];
            }
            segments.push(segment);
        }
        return segments;
    }
    /**
     * Use length instead of ratio
     */
    function getTangentAtRatio(segment, ratio, sign) {
        if (sign === void 0) { sign = true; }
        var _a = segment.arcParams, _b = _a.rx, rx = _b === void 0 ? 0 : _b, _c = _a.ry, ry = _c === void 0 ? 0 : _c, xRotation = _a.xRotation, arcFlag = _a.arcFlag, sweepFlag = _a.sweepFlag;
        var p1 = pointOnEllipticalArc({ x: segment.prePoint[0], y: segment.prePoint[1] }, rx, ry, xRotation, !!arcFlag, !!sweepFlag, { x: segment.currentPoint[0], y: segment.currentPoint[1] }, ratio);
        var p2 = pointOnEllipticalArc({ x: segment.prePoint[0], y: segment.prePoint[1] }, rx, ry, xRotation, !!arcFlag, !!sweepFlag, { x: segment.currentPoint[0], y: segment.currentPoint[1] }, sign ? ratio + 0.005 : ratio - 0.005);
        var xDist = p2.x - p1.x;
        var yDist = p2.y - p1.y;
        var dist = Math.sqrt(xDist * xDist + yDist * yDist);
        return { x: -xDist / dist, y: -yDist / dist };
    }
    // 向量长度
    function vMag(v) {
        return Math.sqrt(v[0] * v[0] + v[1] * v[1]);
    }
    // u.v/|u||v|，计算夹角的余弦值
    function vRatio(u, v) {
        // 当存在一个向量的长度为 0 时，夹角也为 0，即夹角的余弦值为 1
        return vMag(u) * vMag(v)
            ? (u[0] * v[0] + u[1] * v[1]) / (vMag(u) * vMag(v))
            : 1;
    }
    // 向量角度
    function vAngle(u, v) {
        return (u[0] * v[1] < u[1] * v[0] ? -1 : 1) * Math.acos(vRatio(u, v));
    }
    function getArcParams(startPoint, params) {
        var rx = params[1];
        var ry = params[2];
        var xRotation = mod(deg2rad(params[3]), Math.PI * 2);
        var arcFlag = params[4];
        var sweepFlag = params[5];
        // 弧形起点坐标
        var x1 = startPoint[0];
        var y1 = startPoint[1];
        // 弧形终点坐标
        var x2 = params[6];
        var y2 = params[7];
        var xp = (Math.cos(xRotation) * (x1 - x2)) / 2.0 +
            (Math.sin(xRotation) * (y1 - y2)) / 2.0;
        var yp = (-1 * Math.sin(xRotation) * (x1 - x2)) / 2.0 +
            (Math.cos(xRotation) * (y1 - y2)) / 2.0;
        var lambda = (xp * xp) / (rx * rx) + (yp * yp) / (ry * ry);
        if (lambda > 1) {
            rx *= Math.sqrt(lambda);
            ry *= Math.sqrt(lambda);
        }
        var diff = rx * rx * (yp * yp) + ry * ry * (xp * xp);
        var f = diff ? Math.sqrt((rx * rx * (ry * ry) - diff) / diff) : 1;
        if (arcFlag === sweepFlag) {
            f *= -1;
        }
        if (isNaN(f)) {
            f = 0;
        }
        // 旋转前的起点坐标，且当长半轴和短半轴的长度为 0 时，坐标按 (0, 0) 处理
        var cxp = ry ? (f * rx * yp) / ry : 0;
        var cyp = rx ? (f * -ry * xp) / rx : 0;
        // 椭圆圆心坐标
        var cx = (x1 + x2) / 2.0 + Math.cos(xRotation) * cxp - Math.sin(xRotation) * cyp;
        var cy = (y1 + y2) / 2.0 + Math.sin(xRotation) * cxp + Math.cos(xRotation) * cyp;
        // 起始点的单位向量
        var u = [(xp - cxp) / rx, (yp - cyp) / ry];
        // 终止点的单位向量
        var v = [(-1 * xp - cxp) / rx, (-1 * yp - cyp) / ry];
        // 计算起始点和圆心的连线，与 x 轴正方向的夹角
        var theta = vAngle([1, 0], u);
        // 计算圆弧起始点和终止点与椭圆圆心连线的夹角
        var dTheta = vAngle(u, v);
        if (vRatio(u, v) <= -1) {
            dTheta = Math.PI;
        }
        if (vRatio(u, v) >= 1) {
            dTheta = 0;
        }
        if (sweepFlag === 0 && dTheta > 0) {
            dTheta = dTheta - 2 * Math.PI;
        }
        if (sweepFlag === 1 && dTheta < 0) {
            dTheta = dTheta + 2 * Math.PI;
        }
        return {
            cx: cx,
            cy: cy,
            // 弧形的起点和终点相同时，长轴和短轴的长度按 0 处理
            rx: isSamePoint(startPoint, [x2, y2]) ? 0 : rx,
            ry: isSamePoint(startPoint, [x2, y2]) ? 0 : ry,
            startAngle: theta,
            endAngle: theta + dTheta,
            xRotation: xRotation,
            arcFlag: arcFlag,
            sweepFlag: sweepFlag,
        };
    }
    function commandsToPathString(commands, object, transform) {
        var _a = object.parsedStyle, _b = _a.defX, defX = _b === void 0 ? 0 : _b, _c = _a.defY, defY = _c === void 0 ? 0 : _c;
        return commands.reduce(function (prev, cur) {
            var path = '';
            if (cur[0] === 'M' || cur[0] === 'L') {
                var p = fromValues$2(cur[1] - defX, cur[2] - defY, 0);
                if (transform) {
                    transformMat4(p, p, transform);
                }
                path = "".concat(cur[0]).concat(p[0], ",").concat(p[1]);
            }
            else if (cur[0] === 'Z') {
                path = cur[0];
            }
            else if (cur[0] === 'C') {
                var p1 = fromValues$2(cur[1] - defX, cur[2] - defY, 0);
                var p2 = fromValues$2(cur[3] - defX, cur[4] - defY, 0);
                var p3 = fromValues$2(cur[5] - defX, cur[6] - defY, 0);
                if (transform) {
                    transformMat4(p1, p1, transform);
                    transformMat4(p2, p2, transform);
                    transformMat4(p3, p3, transform);
                }
                path = "".concat(cur[0]).concat(p1[0], ",").concat(p1[1], ",").concat(p2[0], ",").concat(p2[1], ",").concat(p3[0], ",").concat(p3[1]);
            }
            else if (cur[0] === 'A') {
                var c = fromValues$2(cur[6] - defX, cur[7] - defY, 0);
                if (transform) {
                    transformMat4(c, c, transform);
                }
                path = "".concat(cur[0]).concat(cur[1], ",").concat(cur[2], ",").concat(cur[3], ",").concat(cur[4], ",").concat(cur[5], ",").concat(c[0], ",").concat(c[1]);
            }
            else if (cur[0] === 'Q') {
                var p1 = fromValues$2(cur[1] - defX, cur[2] - defY, 0);
                var p2 = fromValues$2(cur[3] - defX, cur[4] - defY, 0);
                if (transform) {
                    transformMat4(p1, p1, transform);
                    transformMat4(p2, p2, transform);
                }
                path = "".concat(cur[0]).concat(cur[1], ",").concat(cur[2], ",").concat(cur[3], ",").concat(cur[4], "}");
            }
            return (prev += path);
        }, '');
    }
    function lineToCommands(x1, y1, x2, y2) {
        return [
            ['M', x1, y1],
            ['L', x2, y2],
        ];
    }
    function ellipseToCommands(rx, ry, cx, cy) {
        var factor = ((-1 + Math.sqrt(2)) / 3) * 4;
        var dx = rx * factor;
        var dy = ry * factor;
        var left = cx - rx;
        var right = cx + rx;
        var top = cy - ry;
        var bottom = cy + ry;
        return [
            ['M', left, cy],
            ['C', left, cy - dy, cx - dx, top, cx, top],
            ['C', cx + dx, top, right, cy - dy, right, cy],
            ['C', right, cy + dy, cx + dx, bottom, cx, bottom],
            ['C', cx - dx, bottom, left, cy + dy, left, cy],
            ['Z'],
        ];
    }
    function polygonToCommands(points, closed) {
        var result = points.map(function (point, i) {
            return [i === 0 ? 'M' : 'L', point[0], point[1]];
        });
        if (closed) {
            result.push(['Z']);
        }
        return result;
    }
    function rectToCommands(width, height, x, y, radius) {
        // @see https://gist.github.com/danielpquinn/dd966af424030d47e476
        if (radius) {
            var _a = __read(radius, 4), tlr = _a[0], trr = _a[1], brr = _a[2], blr = _a[3];
            var signX = width > 0 ? 1 : -1;
            var signY = height > 0 ? 1 : -1;
            // sweep-flag @see https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths#arcs
            var sweepFlag = signX + signY !== 0 ? 1 : 0;
            return [
                ['M', signX * tlr + x, y],
                ['L', width - signX * trr + x, y],
                trr ? ['A', trr, trr, 0, 0, sweepFlag, width + x, signY * trr + y] : null,
                ['L', width + x, height - signY * brr + y],
                brr
                    ? ['A', brr, brr, 0, 0, sweepFlag, width + x - signX * brr, height + y]
                    : null,
                ['L', x + signX * blr, height + y],
                blr
                    ? ['A', blr, blr, 0, 0, sweepFlag, x, height + y - signY * blr]
                    : null,
                ['L', x, signY * tlr + y],
                tlr ? ['A', tlr, tlr, 0, 0, sweepFlag, signX * tlr + x, y] : null,
                ['Z'],
            ].filter(function (command) { return command; });
        }
        return [
            ['M', x, y],
            ['L', x + width, y],
            ['L', x + width, y + height],
            ['L', x, y + height],
            ['Z'],
        ];
    }
    /**
     * convert object to path, should account for:
     * * transform & origin
     * * anchor
     * * lineWidth
     */
    function convertToPath(object, transform) {
        if (transform === void 0) { transform = object.getLocalTransform(); }
        var commands = [];
        switch (object.nodeName) {
            case Shape.LINE:
                var _a = object.parsedStyle, _b = _a.x1, x1 = _b === void 0 ? 0 : _b, _c = _a.y1, y1 = _c === void 0 ? 0 : _c, _d = _a.x2, x2 = _d === void 0 ? 0 : _d, _e = _a.y2, y2 = _e === void 0 ? 0 : _e;
                commands = lineToCommands(x1, y1, x2, y2);
                break;
            case Shape.CIRCLE: {
                var _f = object.parsedStyle, _g = _f.r, r = _g === void 0 ? 0 : _g, _h = _f.cx, cx = _h === void 0 ? 0 : _h, _j = _f.cy, cy = _j === void 0 ? 0 : _j;
                commands = ellipseToCommands(r, r, cx, cy);
                break;
            }
            case Shape.ELLIPSE: {
                var _k = object.parsedStyle, _l = _k.rx, rx = _l === void 0 ? 0 : _l, _m = _k.ry, ry = _m === void 0 ? 0 : _m, _o = _k.cx, cx = _o === void 0 ? 0 : _o, _p = _k.cy, cy = _p === void 0 ? 0 : _p;
                commands = ellipseToCommands(rx, ry, cx, cy);
                break;
            }
            case Shape.POLYLINE:
            case Shape.POLYGON:
                var points = object.parsedStyle.points;
                commands = polygonToCommands(points.points, object.nodeName === Shape.POLYGON);
                break;
            case Shape.RECT:
                var _q = object.parsedStyle, _r = _q.width, width_1 = _r === void 0 ? 0 : _r, _s = _q.height, height_1 = _s === void 0 ? 0 : _s, _t = _q.x, x = _t === void 0 ? 0 : _t, _u = _q.y, y = _u === void 0 ? 0 : _u, radius = _q.radius;
                var hasRadius = radius && radius.some(function (r) { return r !== 0; });
                commands = rectToCommands(width_1, height_1, x, y, hasRadius &&
                    radius.map(function (r) {
                        return clamp(r, 0, Math.min(Math.abs(width_1) / 2, Math.abs(height_1) / 2));
                    }));
                break;
            case Shape.PATH:
                var absolutePath = object.parsedStyle.path.absolutePath;
                commands = __spreadArray([], __read(absolutePath), false);
                break;
        }
        if (commands.length) {
            return commandsToPathString(commands, object, transform);
        }
    }

    var internalParsePath = function (path) {
        // empty path
        if (path === '' || (Array.isArray(path) && path.length === 0)) {
            return {
                absolutePath: [],
                hasArc: false,
                segments: [],
                polygons: [],
                polylines: [],
                curve: null,
                totalLength: 0,
                rect: {
                    x: 0,
                    y: 0,
                    width: 0,
                    height: 0,
                },
            };
        }
        var absolutePath;
        try {
            absolutePath = normalizePath(path);
        }
        catch (e) {
            absolutePath = normalizePath('');
            console.error("[g]: Invalid SVG Path definition: ".concat(path));
        }
        removeRedundantMCommand(absolutePath);
        var hasArc = hasArcOrBezier(absolutePath);
        var _a = extractPolygons(absolutePath), polygons = _a.polygons, polylines = _a.polylines;
        // for later use
        var segments = path2Segments(absolutePath);
        // Only calculate bbox here since we don't need length now.
        var _b = getPathBBox(segments, 0), x = _b.x, y = _b.y, width = _b.width, height = _b.height;
        return {
            absolutePath: absolutePath,
            hasArc: hasArc,
            segments: segments,
            polygons: polygons,
            polylines: polylines,
            // curve,
            // Delay the calculation of length.
            totalLength: 0,
            rect: {
                x: Number.isFinite(x) ? x : 0,
                y: Number.isFinite(y) ? y : 0,
                width: Number.isFinite(width) ? width : 0,
                height: Number.isFinite(height) ? height : 0,
            },
        };
    };
    var memoizedParsePath = memoize(internalParsePath);
    function parsePath(path) {
        return (isString(path) ? memoizedParsePath(path) : internalParsePath(path));
    }
    function mergePaths(left, right, object) {
        var curve1 = left.curve;
        var curve2 = right.curve;
        if (!curve1 || curve1.length === 0) {
            // convert to curves to do morphing & picking later
            // @see http://thednp.github.io/kute.js/svgCubicMorph.html
            curve1 = path2Curve(left.absolutePath, false);
            left.curve = curve1;
        }
        if (!curve2 || curve2.length === 0) {
            curve2 = path2Curve(right.absolutePath, false);
            right.curve = curve2;
        }
        var curves = [curve1, curve2];
        if (curve1.length !== curve2.length) {
            curves = equalizeSegments(curve1, curve2);
        }
        var curve0 = getDrawDirection(curves[0]) !== getDrawDirection(curves[1])
            ? reverseCurve(curves[0])
            : clonePath(curves[0]);
        return [
            curve0,
            getRotatedCurve(curves[1], curve0),
            function (pathArray) {
                // need converting to path string?
                return pathArray;
            },
        ];
    }

    /**
     * @see https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/points
     *
     * @example
     * points="100,10 250,150 200,110"
     */
    function parsePoints(pointsOrStr, object) {
        var points;
        if (isString(pointsOrStr)) {
            points = pointsOrStr.split(' ').map(function (pointStr) {
                var _a = __read(pointStr.split(','), 2), x = _a[0], y = _a[1];
                return [Number(x), Number(y)];
            });
        }
        else {
            points = pointsOrStr;
        }
        var segments = [];
        var tempLength = 0;
        var segmentT;
        var segmentL;
        var totalLength = length$2(points);
        points.forEach(function (p, i) {
            if (points[i + 1]) {
                segmentT = [0, 0];
                segmentT[0] = tempLength / totalLength;
                segmentL = length$4(p[0], p[1], points[i + 1][0], points[i + 1][1]);
                tempLength += segmentL;
                segmentT[1] = tempLength / totalLength;
                segments.push(segmentT);
            }
        });
        var minX = Math.min.apply(Math, __spreadArray([], __read(points.map(function (point) { return point[0]; })), false));
        var minY = Math.min.apply(Math, __spreadArray([], __read(points.map(function (point) { return point[1]; })), false));
        if (object) {
            object.parsedStyle.defX = minX;
            object.parsedStyle.defY = minY;
        }
        return {
            points: points,
            totalLength: totalLength,
            segments: segments,
        };
    }
    function mergePoints(left, right) {
        return [
            left.points,
            right.points,
            function (points) {
                return points;
            },
        ];
    }

    var _ = null;
    function cast(pattern) {
        return function (contents) {
            var i = 0;
            return pattern.map(function (x) {
                return x === _ ? contents[i++] : x;
            });
        };
    }
    function id(x) {
        return x;
    }
    // type: [argTypes, convertTo3D, convertTo2D]
    // In the argument types string, lowercase characters represent optional arguments
    var transformFunctions = {
        // @ts-ignore
        matrix: ['NNNNNN', [_, _, 0, 0, _, _, 0, 0, 0, 0, 1, 0, _, _, 0, 1], id],
        matrix3d: ['NNNNNNNNNNNNNNNN', id],
        rotate: ['A'],
        rotatex: ['A'],
        rotatey: ['A'],
        rotatez: ['A'],
        rotate3d: ['NNNA'],
        perspective: ['L'],
        scale: ['Nn', cast([_, _, new CSSUnitValue(1)]), id],
        scalex: [
            'N',
            cast([_, new CSSUnitValue(1), new CSSUnitValue(1)]),
            cast([_, new CSSUnitValue(1)]),
        ],
        scaley: [
            'N',
            cast([new CSSUnitValue(1), _, new CSSUnitValue(1)]),
            cast([new CSSUnitValue(1), _]),
        ],
        scalez: ['N', cast([new CSSUnitValue(1), new CSSUnitValue(1), _])],
        scale3d: ['NNN', id],
        skew: ['Aa', null, id],
        skewx: ['A', null, cast([_, Odeg])],
        skewy: ['A', null, cast([Odeg, _])],
        translate: ['Tt', cast([_, _, Opx]), id],
        translatex: ['T', cast([_, Opx, Opx]), cast([_, Opx])],
        translatey: ['T', cast([Opx, _, Opx]), cast([Opx, _])],
        translatez: ['L', cast([Opx, Opx, _])],
        translate3d: ['TTL', id],
    };
    /**
     * none
     * scale(1) scale(1, 2)
     * scaleX(1)
     */
    function parseTransform(string) {
        string = (string || 'none').toLowerCase().trim();
        if (string === 'none') {
            return [];
        }
        var transformRegExp = /\s*(\w+)\(([^)]*)\)/g;
        var result = [];
        var match;
        var prevLastIndex = 0;
        while ((match = transformRegExp.exec(string))) {
            if (match.index !== prevLastIndex) {
                return [];
            }
            prevLastIndex = match.index + match[0].length;
            var functionName = match[1]; // scale
            var functionData = transformFunctions[functionName]; // scale(1, 2)
            if (!functionData) {
                // invalid, eg. scale()
                return [];
            }
            var args = match[2].split(','); // 1,2
            var argTypes = functionData[0]; // Nn
            if (argTypes.length < args.length) {
                // scale(N, n)
                return [];
            }
            var parsedArgs = [];
            for (var i = 0; i < argTypes.length; i++) {
                var arg = args[i];
                var type = argTypes[i];
                var parsedArg = void 0;
                if (!arg) {
                    // @ts-ignore
                    parsedArg = {
                        a: Odeg,
                        n: parsedArgs[0],
                        t: Opx,
                    }[type];
                }
                else {
                    // @ts-ignore
                    parsedArg = {
                        A: function (s) {
                            return s.trim() === '0' ? Odeg : parseAngle(s);
                        },
                        N: parseNumber,
                        T: parseLengthOrPercentage,
                        L: parseLength,
                    }[type.toUpperCase()](arg);
                }
                if (parsedArg === undefined) {
                    return [];
                }
                parsedArgs.push(parsedArg);
            }
            result.push({ t: functionName, d: parsedArgs }); // { t: scale, d: [1, 2] }
            if (transformRegExp.lastIndex === string.length) {
                return result;
            }
        }
        return [];
    }
    function parseTransformUnmemoize(string) {
        string = (string || 'none').toLowerCase().trim();
        if (string === 'none') {
            return [];
        }
        var transformRegExp = /\s*(\w+)\(([^)]*)\)/g;
        var result = [];
        var match;
        var prevLastIndex = 0;
        while ((match = transformRegExp.exec(string))) {
            if (match.index !== prevLastIndex) {
                return [];
            }
            prevLastIndex = match.index + match[0].length;
            var functionName = match[1]; // scale
            var functionData = transformFunctions[functionName]; // scale(1, 2)
            if (!functionData) {
                // invalid, eg. scale()
                return [];
            }
            var args = match[2].split(','); // 1,2
            var argTypes = functionData[0]; // Nn
            if (argTypes.length < args.length) {
                // scale(N, n)
                return [];
            }
            var parsedArgs = [];
            for (var i = 0; i < argTypes.length; i++) {
                var arg = args[i];
                var type = argTypes[i];
                var parsedArg = void 0;
                if (!arg) {
                    // @ts-ignore
                    parsedArg = {
                        a: Odeg,
                        n: parsedArgs[0],
                        t: Opx,
                    }[type];
                }
                else {
                    // @ts-ignore
                    parsedArg = {
                        A: function (s) {
                            return s.trim() === '0' ? Odeg : parseAngleUnmemoize(s);
                        },
                        N: parseNumberUnmemoize,
                        T: parseLengthOrPercentageUnmemoize,
                        L: parseLengthUnmemoize,
                    }[type.toUpperCase()](arg);
                }
                if (parsedArg === undefined) {
                    return [];
                }
                parsedArgs.push(parsedArg);
            }
            result.push({ t: functionName, d: parsedArgs }); // { t: scale, d: [1, 2] }
            if (transformRegExp.lastIndex === string.length) {
                return result;
            }
        }
        return [];
    }
    function convertItemToMatrix(item) {
        var x;
        var y;
        var z;
        var angle;
        switch (item.t) {
            case 'rotatex':
                angle = deg2rad(convertAngleUnit(item.d[0]));
                return [
                    1,
                    0,
                    0,
                    0,
                    0,
                    Math.cos(angle),
                    Math.sin(angle),
                    0,
                    0,
                    -Math.sin(angle),
                    Math.cos(angle),
                    0,
                    0,
                    0,
                    0,
                    1,
                ];
            case 'rotatey':
                angle = deg2rad(convertAngleUnit(item.d[0]));
                return [
                    Math.cos(angle),
                    0,
                    -Math.sin(angle),
                    0,
                    0,
                    1,
                    0,
                    0,
                    Math.sin(angle),
                    0,
                    Math.cos(angle),
                    0,
                    0,
                    0,
                    0,
                    1,
                ];
            case 'rotate':
            case 'rotatez':
                angle = deg2rad(convertAngleUnit(item.d[0]));
                return [
                    Math.cos(angle),
                    Math.sin(angle),
                    0,
                    0,
                    -Math.sin(angle),
                    Math.cos(angle),
                    0,
                    0,
                    0,
                    0,
                    1,
                    0,
                    0,
                    0,
                    0,
                    1,
                ];
            case 'rotate3d':
                x = item.d[0].value;
                y = item.d[1].value;
                z = item.d[2].value;
                angle = deg2rad(convertAngleUnit(item.d[3]));
                var sqrLength = x * x + y * y + z * z;
                if (sqrLength === 0) {
                    x = 1;
                    y = 0;
                    z = 0;
                }
                else if (sqrLength !== 1) {
                    var length_1 = Math.sqrt(sqrLength);
                    x /= length_1;
                    y /= length_1;
                    z /= length_1;
                }
                var s = Math.sin(angle / 2);
                var sc = s * Math.cos(angle / 2);
                var sq = s * s;
                return [
                    1 - 2 * (y * y + z * z) * sq,
                    2 * (x * y * sq + z * sc),
                    2 * (x * z * sq - y * sc),
                    0,
                    2 * (x * y * sq - z * sc),
                    1 - 2 * (x * x + z * z) * sq,
                    2 * (y * z * sq + x * sc),
                    0,
                    2 * (x * z * sq + y * sc),
                    2 * (y * z * sq - x * sc),
                    1 - 2 * (x * x + y * y) * sq,
                    0,
                    0,
                    0,
                    0,
                    1,
                ];
            case 'scale':
                return [
                    item.d[0].value,
                    0,
                    0,
                    0,
                    0,
                    item.d[1].value,
                    0,
                    0,
                    0,
                    0,
                    1,
                    0,
                    0,
                    0,
                    0,
                    1,
                ];
            case 'scalex':
                return [item.d[0].value, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
            case 'scaley':
                return [1, 0, 0, 0, 0, item.d[0].value, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
            case 'scalez':
                return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, item.d[0].value, 0, 0, 0, 0, 1];
            case 'scale3d':
                return [
                    item.d[0].value,
                    0,
                    0,
                    0,
                    0,
                    item.d[1].value,
                    0,
                    0,
                    0,
                    0,
                    item.d[2].value,
                    0,
                    0,
                    0,
                    0,
                    1,
                ];
            case 'skew':
                var xAngle = deg2rad(convertAngleUnit(item.d[0]));
                var yAngle = deg2rad(convertAngleUnit(item.d[1]));
                return [
                    1,
                    Math.tan(yAngle),
                    0,
                    0,
                    Math.tan(xAngle),
                    1,
                    0,
                    0,
                    0,
                    0,
                    1,
                    0,
                    0,
                    0,
                    0,
                    1,
                ];
            case 'skewx':
                angle = deg2rad(convertAngleUnit(item.d[0]));
                return [1, 0, 0, 0, Math.tan(angle), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
            case 'skewy':
                angle = deg2rad(convertAngleUnit(item.d[0]));
                return [1, Math.tan(angle), 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
            case 'translate':
                // TODO: pass target
                x = convertPercentUnit(item.d[0], 0, null) || 0;
                y = convertPercentUnit(item.d[1], 0, null) || 0;
                return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, x, y, 0, 1];
            case 'translatex':
                x = convertPercentUnit(item.d[0], 0, null) || 0;
                return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, x, 0, 0, 1];
            case 'translatey':
                y = convertPercentUnit(item.d[0], 0, null) || 0;
                return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, y, 0, 1];
            case 'translatez':
                z = convertPercentUnit(item.d[0], 0, null) || 0;
                return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, z, 1];
            case 'translate3d':
                x = convertPercentUnit(item.d[0], 0, null) || 0;
                y = convertPercentUnit(item.d[1], 0, null) || 0;
                z = convertPercentUnit(item.d[2], 0, null) || 0;
                return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, x, y, z, 1];
            case 'perspective':
                var t = convertPercentUnit(item.d[0], 0, null) || 0;
                var p = t ? -1 / t : 0;
                return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, p, 0, 0, 0, 1];
            case 'matrix':
                return [
                    item.d[0].value,
                    item.d[1].value,
                    0,
                    0,
                    item.d[2].value,
                    item.d[3].value,
                    0,
                    0,
                    0,
                    0,
                    1,
                    0,
                    item.d[4].value,
                    item.d[5].value,
                    0,
                    1,
                ];
            case 'matrix3d':
                return item.d.map(function (d) { return d.value; });
        }
    }
    function multiplyMatrices(a, b) {
        return [
            a[0] * b[0] + a[4] * b[1] + a[8] * b[2] + a[12] * b[3],
            a[1] * b[0] + a[5] * b[1] + a[9] * b[2] + a[13] * b[3],
            a[2] * b[0] + a[6] * b[1] + a[10] * b[2] + a[14] * b[3],
            a[3] * b[0] + a[7] * b[1] + a[11] * b[2] + a[15] * b[3],
            a[0] * b[4] + a[4] * b[5] + a[8] * b[6] + a[12] * b[7],
            a[1] * b[4] + a[5] * b[5] + a[9] * b[6] + a[13] * b[7],
            a[2] * b[4] + a[6] * b[5] + a[10] * b[6] + a[14] * b[7],
            a[3] * b[4] + a[7] * b[5] + a[11] * b[6] + a[15] * b[7],
            a[0] * b[8] + a[4] * b[9] + a[8] * b[10] + a[12] * b[11],
            a[1] * b[8] + a[5] * b[9] + a[9] * b[10] + a[13] * b[11],
            a[2] * b[8] + a[6] * b[9] + a[10] * b[10] + a[14] * b[11],
            a[3] * b[8] + a[7] * b[9] + a[11] * b[10] + a[15] * b[11],
            a[0] * b[12] + a[4] * b[13] + a[8] * b[14] + a[12] * b[15],
            a[1] * b[12] + a[5] * b[13] + a[9] * b[14] + a[13] * b[15],
            a[2] * b[12] + a[6] * b[13] + a[10] * b[14] + a[14] * b[15],
            a[3] * b[12] + a[7] * b[13] + a[11] * b[14] + a[15] * b[15],
        ];
    }
    function convertToMatrix(transformList) {
        if (transformList.length === 0) {
            return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
        }
        return transformList.map(convertItemToMatrix).reduce(multiplyMatrices);
    }
    function makeMatrixDecomposition(transformList) {
        var translate = [0, 0, 0];
        var scale = [1, 1, 1];
        var skew = [0, 0, 0];
        var perspective = [0, 0, 0, 1];
        var quaternion = [0, 0, 0, 1];
        decomposeMat4(
        // @ts-ignore
        convertToMatrix(transformList), translate, scale, skew, perspective, quaternion);
        return [[translate, scale, skew, quaternion, perspective]];
    }
    var composeMatrix = (function () {
        function multiply(a, b) {
            var result = [
                [0, 0, 0, 0],
                [0, 0, 0, 0],
                [0, 0, 0, 0],
                [0, 0, 0, 0],
            ];
            for (var i = 0; i < 4; i++) {
                for (var j = 0; j < 4; j++) {
                    for (var k = 0; k < 4; k++) {
                        result[i][j] += b[i][k] * a[k][j];
                    }
                }
            }
            return result;
        }
        function is2D(m) {
            return (m[0][2] == 0 &&
                m[0][3] == 0 &&
                m[1][2] == 0 &&
                m[1][3] == 0 &&
                m[2][0] == 0 &&
                m[2][1] == 0 &&
                m[2][2] == 1 &&
                m[2][3] == 0 &&
                m[3][2] == 0 &&
                m[3][3] == 1);
        }
        function composeMatrix(translate, scale, skew, quat, perspective) {
            var matrix = [
                [1, 0, 0, 0],
                [0, 1, 0, 0],
                [0, 0, 1, 0],
                [0, 0, 0, 1],
            ];
            for (var i = 0; i < 4; i++) {
                matrix[i][3] = perspective[i];
            }
            for (var i = 0; i < 3; i++) {
                for (var j = 0; j < 3; j++) {
                    matrix[3][i] += translate[j] * matrix[j][i];
                }
            }
            var x = quat[0], y = quat[1], z = quat[2], w = quat[3];
            var rotMatrix = [
                [1, 0, 0, 0],
                [0, 1, 0, 0],
                [0, 0, 1, 0],
                [0, 0, 0, 1],
            ];
            rotMatrix[0][0] = 1 - 2 * (y * y + z * z);
            rotMatrix[0][1] = 2 * (x * y - z * w);
            rotMatrix[0][2] = 2 * (x * z + y * w);
            rotMatrix[1][0] = 2 * (x * y + z * w);
            rotMatrix[1][1] = 1 - 2 * (x * x + z * z);
            rotMatrix[1][2] = 2 * (y * z - x * w);
            rotMatrix[2][0] = 2 * (x * z - y * w);
            rotMatrix[2][1] = 2 * (y * z + x * w);
            rotMatrix[2][2] = 1 - 2 * (x * x + y * y);
            matrix = multiply(matrix, rotMatrix);
            var temp = [
                [1, 0, 0, 0],
                [0, 1, 0, 0],
                [0, 0, 1, 0],
                [0, 0, 0, 1],
            ];
            if (skew[2]) {
                temp[2][1] = skew[2];
                matrix = multiply(matrix, temp);
            }
            if (skew[1]) {
                temp[2][1] = 0;
                temp[2][0] = skew[0];
                matrix = multiply(matrix, temp);
            }
            if (skew[0]) {
                temp[2][0] = 0;
                temp[1][0] = skew[0];
                matrix = multiply(matrix, temp);
            }
            for (var i = 0; i < 3; i++) {
                for (var j = 0; j < 3; j++) {
                    matrix[i][j] *= scale[i];
                }
            }
            if (is2D(matrix)) {
                return [
                    matrix[0][0],
                    matrix[0][1],
                    matrix[1][0],
                    matrix[1][1],
                    matrix[3][0],
                    matrix[3][1],
                ];
            }
            return matrix[0].concat(matrix[1], matrix[2], matrix[3]);
        }
        return composeMatrix;
    })();
    function numberToLongString(x) {
        return x.toFixed(6).replace('.000000', '');
    }
    function mergeMatrices(left, right) {
        var leftArgs;
        var rightArgs;
        // @ts-ignore
        if (left.decompositionPair !== right) {
            // @ts-ignore
            left.decompositionPair = right;
            // @ts-ignore
            leftArgs = makeMatrixDecomposition(left);
        }
        // @ts-ignore
        if (right.decompositionPair !== left) {
            // @ts-ignore
            right.decompositionPair = left;
            // @ts-ignore
            rightArgs = makeMatrixDecomposition(right);
        }
        if (leftArgs[0] === null || rightArgs[0] === null)
            return [
                // @ts-ignore
                [false],
                // @ts-ignore
                [true],
                // @ts-ignore
                function (x) {
                    return x ? right[0].d : left[0].d;
                },
            ];
        leftArgs[0].push(0);
        rightArgs[0].push(1);
        return [
            leftArgs,
            rightArgs,
            // @ts-ignore
            function (list) {
                // @ts-ignore
                var q = quat(leftArgs[0][3], rightArgs[0][3], list[5]);
                var mat = composeMatrix(list[0], list[1], list[2], q, list[4]);
                var stringifiedArgs = mat.map(numberToLongString).join(',');
                return stringifiedArgs;
            },
        ];
    }
    function dot$2(v1, v2) {
        var result = 0;
        for (var i = 0; i < v1.length; i++) {
            result += v1[i] * v2[i];
        }
        return result;
    }
    function quat(fromQ, toQ, f) {
        var product = dot$2(fromQ, toQ);
        product = clamp(product, -1.0, 1.0);
        var quat = [];
        if (product === 1.0) {
            quat = fromQ;
        }
        else {
            var theta = Math.acos(product);
            var w = (Math.sin(f * theta) * 1) / Math.sqrt(1 - product * product);
            for (var i = 0; i < 4; i++) {
                quat.push(fromQ[i] * (Math.cos(f * theta) - product * w) + toQ[i] * w);
            }
        }
        return quat;
    }
    // scalex/y/z -> scale
    function typeTo2D(type) {
        return type.replace(/[xy]/, '');
    }
    // scalex/y/z -> scale3d
    function typeTo3D(type) {
        return type.replace(/(x|y|z|3d)?$/, '3d');
    }
    var isMatrixOrPerspective = function (lt, rt) {
        return ((lt === 'perspective' && rt === 'perspective') ||
            ((lt === 'matrix' || lt === 'matrix3d') &&
                (rt === 'matrix' || rt === 'matrix3d')));
    };
    function mergeTransforms(left, right, target) {
        var flipResults = false;
        // padding empty transform, eg. merge 'scale(10)' with 'none' -> scale(1)
        if (!left.length || !right.length) {
            if (!left.length) {
                flipResults = true;
                left = right;
                right = [];
            }
            var _loop_1 = function (i) {
                var _a = left[i], type = _a.t, args = _a.d;
                // none -> scale(1)/translateX(0)
                var defaultValue = type.substring(0, 5) === 'scale' ? 1 : 0;
                right.push({
                    t: type,
                    d: args.map(function (arg) {
                        if (typeof arg === 'number') {
                            return getOrCreateUnitValue(defaultValue);
                        }
                        return getOrCreateUnitValue(defaultValue, arg.unit);
                        //   {
                        //     unit: arg.unit,
                        //     value: defaultValue,
                        //   };
                    }),
                });
            };
            for (var i = 0; i < left.length; i++) {
                _loop_1(i);
            }
        }
        var leftResult = [];
        var rightResult = [];
        var types = [];
        // merge matrix() with matrix3d()
        if (left.length !== right.length) {
            var merged = mergeMatrices(left, right);
            // @ts-ignore
            leftResult = [merged[0]];
            // @ts-ignore
            rightResult = [merged[1]];
            types = [['matrix', [merged[2]]]];
        }
        else {
            for (var i = 0; i < left.length; i++) {
                var leftType = left[i].t;
                var rightType = right[i].t;
                var leftArgs = left[i].d;
                var rightArgs = right[i].d;
                var leftFunctionData = transformFunctions[leftType];
                var rightFunctionData = transformFunctions[rightType];
                var type = void 0;
                if (isMatrixOrPerspective(leftType, rightType)) {
                    var merged = mergeMatrices([left[i]], [right[i]]);
                    // @ts-ignore
                    leftResult.push(merged[0]);
                    // @ts-ignore
                    rightResult.push(merged[1]);
                    types.push(['matrix', [merged[2]]]);
                    continue;
                }
                else if (leftType === rightType) {
                    type = leftType;
                }
                else if (leftFunctionData[2] &&
                    rightFunctionData[2] &&
                    typeTo2D(leftType) === typeTo2D(rightType)) {
                    type = typeTo2D(leftType);
                    // @ts-ignore
                    leftArgs = leftFunctionData[2](leftArgs);
                    // @ts-ignore
                    rightArgs = rightFunctionData[2](rightArgs);
                }
                else if (leftFunctionData[1] &&
                    rightFunctionData[1] &&
                    typeTo3D(leftType) === typeTo3D(rightType)) {
                    type = typeTo3D(leftType);
                    // @ts-ignore
                    leftArgs = leftFunctionData[1](leftArgs);
                    // @ts-ignore
                    rightArgs = rightFunctionData[1](rightArgs);
                }
                else {
                    var merged = mergeMatrices(left, right);
                    // @ts-ignore
                    leftResult = [merged[0]];
                    // @ts-ignore
                    rightResult = [merged[1]];
                    types = [['matrix', [merged[2]]]];
                    break;
                }
                var leftArgsCopy = [];
                var rightArgsCopy = [];
                var stringConversions = [];
                for (var j = 0; j < leftArgs.length; j++) {
                    // const merge = leftArgs[j].unit === UnitType.kNumber ? mergeDimensions : mergeDimensions;
                    var merged = mergeDimensions(leftArgs[j], rightArgs[j], target, false, j);
                    leftArgsCopy[j] = merged[0];
                    rightArgsCopy[j] = merged[1];
                    stringConversions.push(merged[2]);
                }
                leftResult.push(leftArgsCopy);
                rightResult.push(rightArgsCopy);
                types.push([type, stringConversions]);
            }
        }
        if (flipResults) {
            var tmp = leftResult;
            leftResult = rightResult;
            rightResult = tmp;
        }
        return [
            leftResult,
            rightResult,
            function (list) {
                return list
                    .map(function (args, i) {
                    var stringifiedArgs = args
                        .map(function (arg, j) {
                        return types[i][1][j](arg);
                    })
                        .join(',');
                    if (types[i][0] === 'matrix' &&
                        stringifiedArgs.split(',').length === 16) {
                        types[i][0] = 'matrix3d';
                    }
                    if (types[i][0] === 'matrix3d' &&
                        stringifiedArgs.split(',').length === 6) {
                        types[i][0] = 'matrix';
                    }
                    return types[i][0] + '(' + stringifiedArgs + ')';
                })
                    .join(' ');
            },
        ];
    }

    /**
     * @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin
     * eg. 'center' 'top left' '50px 50px'
     */
    var parseTransformOrigin = memoize(function (value) {
        if (isString(value)) {
            if (value === 'text-anchor') {
                return [getOrCreateUnitValue(0, 'px'), getOrCreateUnitValue(0, 'px')];
            }
            var values = value.split(' ');
            if (values.length === 1) {
                if (values[0] === 'top' || values[0] === 'bottom') {
                    // 'top' -> 'center top'
                    values[1] = values[0];
                    values[0] = 'center';
                }
                else {
                    // '50px' -> '50px center'
                    values[1] = 'center';
                }
            }
            if (values.length !== 2) {
                return null;
            }
            // eg. center bottom
            return [
                parseLengthOrPercentage(convertKeyword2Percent(values[0])),
                parseLengthOrPercentage(convertKeyword2Percent(values[1])),
            ];
        }
        else {
            return [
                getOrCreateUnitValue(value[0] || 0, 'px'),
                getOrCreateUnitValue(value[1] || 0, 'px'),
            ];
        }
    });
    var parseTransformOriginUnmemoize = function (value) {
        if (isString(value)) {
            if (value === 'text-anchor') {
                return [getOrCreateUnitValue(0, 'px'), getOrCreateUnitValue(0, 'px')];
            }
            var values = value.split(' ');
            if (values.length === 1) {
                if (values[0] === 'top' || values[0] === 'bottom') {
                    // 'top' -> 'center top'
                    values[1] = values[0];
                    values[0] = 'center';
                }
                else {
                    // '50px' -> '50px center'
                    values[1] = 'center';
                }
            }
            if (values.length !== 2) {
                return null;
            }
            // eg. center bottom
            return [
                parseLengthOrPercentageUnmemoize(convertKeyword2Percent(values[0])),
                parseLengthOrPercentageUnmemoize(convertKeyword2Percent(values[1])),
            ];
        }
        else {
            return [
                getOrCreateUnitValue(value[0] || 0, 'px'),
                getOrCreateUnitValue(value[1] || 0, 'px'),
            ];
        }
    };
    function convertKeyword2Percent(keyword) {
        if (keyword === 'center') {
            return '50%';
        }
        else if (keyword === 'left' || keyword === 'top') {
            return '0';
        }
        else if (keyword === 'right' || keyword === 'bottom') {
            return '100%';
        }
        return keyword;
    }

    /**
     * Blink used them in code generation(css_properties.json5)
     */
    var BUILT_IN_PROPERTIES = [
        {
            /**
             * used in CSS Layout API
             * eg. `display: 'flex'`
             */
            n: 'display',
            k: ['none'],
        },
        {
            /**
             * range [0.0, 1.0]
             * @see https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
             */
            n: 'opacity',
            int: true,
            inh: true,
            d: '1',
            syntax: PropertySyntax.OPACITY_VALUE,
        },
        {
            /**
             * inheritable, range [0.0, 1.0]
             * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-opacity
             * @see https://svgwg.org/svg2-draft/painting.html#FillOpacity
             */
            n: 'fillOpacity',
            int: true,
            inh: true,
            d: '1',
            syntax: PropertySyntax.OPACITY_VALUE,
        },
        {
            /**
             * inheritable, range [0.0, 1.0]
             * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-opacity
             * @see https://svgwg.org/svg2-draft/painting.html#StrokeOpacity
             */
            n: 'strokeOpacity',
            int: true,
            inh: true,
            d: '1',
            syntax: PropertySyntax.OPACITY_VALUE,
        },
        {
            /**
             * background-color is not inheritable
             * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
             */
            n: 'fill',
            int: true,
            k: ['none'],
            d: 'none',
            syntax: PropertySyntax.PAINT,
        },
        {
            n: 'fillRule',
            k: ['nonzero', 'evenodd'],
            d: 'nonzero',
        },
        /**
         * default to none
         * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke#usage_notes
         */
        {
            n: 'stroke',
            int: true,
            k: ['none'],
            d: 'none',
            syntax: PropertySyntax.PAINT,
            /**
             * Stroke 'none' won't affect geometry but others will.
             */
            l: true,
        },
        {
            n: 'shadowType',
            k: ['inner', 'outer', 'both'],
            d: 'outer',
            l: true,
        },
        {
            n: 'shadowColor',
            int: true,
            syntax: PropertySyntax.COLOR,
        },
        {
            n: 'shadowOffsetX',
            int: true,
            l: true,
            d: '0',
            syntax: PropertySyntax.LENGTH_PERCENTAGE,
        },
        {
            n: 'shadowOffsetY',
            int: true,
            l: true,
            d: '0',
            syntax: PropertySyntax.LENGTH_PERCENTAGE,
        },
        {
            n: 'shadowBlur',
            int: true,
            l: true,
            d: '0',
            syntax: PropertySyntax.SHADOW_BLUR,
        },
        {
            /**
             * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width
             */
            n: 'lineWidth',
            int: true,
            inh: true,
            d: '1',
            l: true,
            a: ['strokeWidth'],
            syntax: PropertySyntax.LENGTH_PERCENTAGE,
        },
        {
            n: 'increasedLineWidthForHitTesting',
            inh: true,
            d: '0',
            l: true,
            syntax: PropertySyntax.LENGTH_PERCENTAGE,
        },
        {
            n: 'lineJoin',
            inh: true,
            l: true,
            a: ['strokeLinejoin'],
            k: ['miter', 'bevel', 'round'],
            d: 'miter',
        },
        {
            n: 'lineCap',
            inh: true,
            l: true,
            a: ['strokeLinecap'],
            k: ['butt', 'round', 'square'],
            d: 'butt',
        },
        {
            n: 'lineDash',
            int: true,
            inh: true,
            k: ['none'],
            a: ['strokeDasharray'],
            syntax: PropertySyntax.LENGTH_PERCENTAGE_12,
        },
        {
            n: 'lineDashOffset',
            int: true,
            inh: true,
            d: '0',
            a: ['strokeDashoffset'],
            syntax: PropertySyntax.LENGTH_PERCENTAGE,
        },
        {
            n: 'offsetPath',
            syntax: PropertySyntax.DEFINED_PATH,
        },
        {
            n: 'offsetDistance',
            int: true,
            syntax: PropertySyntax.OFFSET_DISTANCE,
        },
        {
            n: 'dx',
            int: true,
            l: true,
            d: '0',
            syntax: PropertySyntax.LENGTH_PERCENTAGE,
        },
        {
            n: 'dy',
            int: true,
            l: true,
            d: '0',
            syntax: PropertySyntax.LENGTH_PERCENTAGE,
        },
        {
            n: 'zIndex',
            ind: true,
            int: true,
            d: '0',
            k: ['auto'],
            syntax: PropertySyntax.Z_INDEX,
        },
        {
            n: 'visibility',
            k: ['visible', 'hidden'],
            ind: true,
            inh: true,
            /**
             * support interpolation
             * @see https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#interpolation
             */
            int: true,
            d: 'visible',
        },
        {
            n: 'pointerEvents',
            inh: true,
            k: [
                'none',
                'auto',
                'stroke',
                'fill',
                'painted',
                'visible',
                'visiblestroke',
                'visiblefill',
                'visiblepainted',
                // 'bounding-box',
                'all',
            ],
            d: 'auto',
        },
        {
            n: 'filter',
            ind: true,
            l: true,
            k: ['none'],
            d: 'none',
            syntax: PropertySyntax.FILTER,
        },
        {
            n: 'clipPath',
            syntax: PropertySyntax.DEFINED_PATH,
        },
        {
            n: 'textPath',
            syntax: PropertySyntax.DEFINED_PATH,
        },
        {
            n: 'textPathSide',
            k: ['left', 'right'],
            d: 'left',
        },
        {
            n: 'textPathStartOffset',
            l: true,
            d: '0',
            syntax: PropertySyntax.LENGTH_PERCENTAGE,
        },
        {
            n: 'transform',
            p: 100,
            int: true,
            k: ['none'],
            d: 'none',
            syntax: PropertySyntax.TRANSFORM,
        },
        {
            n: 'transformOrigin',
            p: 100,
            // int: true,
            d: function (nodeName) {
                if (nodeName === Shape.CIRCLE || nodeName === Shape.ELLIPSE) {
                    return 'center';
                }
                if (nodeName === Shape.TEXT) {
                    return 'text-anchor';
                }
                return 'left top';
            },
            l: true,
            syntax: PropertySyntax.TRANSFORM_ORIGIN,
        },
        {
            n: 'anchor',
            p: 99,
            d: function (nodeName) {
                if (nodeName === Shape.CIRCLE || nodeName === Shape.ELLIPSE) {
                    return '0.5 0.5';
                }
                return '0 0';
            },
            l: true,
            syntax: PropertySyntax.LENGTH_PERCENTAGE_12,
        },
        // <circle> & <ellipse>
        {
            n: 'cx',
            int: true,
            d: '0',
            syntax: PropertySyntax.COORDINATE,
        },
        {
            n: 'cy',
            int: true,
            d: '0',
            syntax: PropertySyntax.COORDINATE,
        },
        {
            n: 'cz',
            int: true,
            d: '0',
            syntax: PropertySyntax.COORDINATE,
        },
        {
            n: 'r',
            int: true,
            l: true,
            d: '0',
            syntax: PropertySyntax.LENGTH_PERCENTAGE,
        },
        {
            n: 'rx',
            int: true,
            l: true,
            d: '0',
            syntax: PropertySyntax.LENGTH_PERCENTAGE,
        },
        {
            n: 'ry',
            int: true,
            l: true,
            d: '0',
            syntax: PropertySyntax.LENGTH_PERCENTAGE,
        },
        // Rect Image Group
        {
            // x in local space
            n: 'x',
            int: true,
            d: '0',
            syntax: PropertySyntax.COORDINATE,
        },
        {
            // y in local space
            n: 'y',
            int: true,
            d: '0',
            syntax: PropertySyntax.COORDINATE,
        },
        {
            // z in local space
            n: 'z',
            int: true,
            d: '0',
            syntax: PropertySyntax.COORDINATE,
        },
        {
            n: 'width',
            int: true,
            l: true,
            /**
             * @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/width
             */
            k: ['auto', 'fit-content', 'min-content', 'max-content'],
            d: '0',
            syntax: PropertySyntax.LENGTH_PERCENTAGE,
        },
        {
            n: 'height',
            int: true,
            l: true,
            /**
             * @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/height
             */
            k: ['auto', 'fit-content', 'min-content', 'max-content'],
            d: '0',
            syntax: PropertySyntax.LENGTH_PERCENTAGE,
        },
        {
            n: 'radius',
            int: true,
            l: true,
            d: '0',
            syntax: PropertySyntax.LENGTH_PERCENTAGE_14,
        },
        // Line
        {
            n: 'x1',
            int: true,
            l: true,
            syntax: PropertySyntax.COORDINATE,
        },
        {
            n: 'y1',
            int: true,
            l: true,
            syntax: PropertySyntax.COORDINATE,
        },
        {
            n: 'z1',
            int: true,
            l: true,
            syntax: PropertySyntax.COORDINATE,
        },
        {
            n: 'x2',
            int: true,
            l: true,
            syntax: PropertySyntax.COORDINATE,
        },
        {
            n: 'y2',
            int: true,
            l: true,
            syntax: PropertySyntax.COORDINATE,
        },
        {
            n: 'z2',
            int: true,
            l: true,
            syntax: PropertySyntax.COORDINATE,
        },
        // Path
        {
            n: 'path',
            int: true,
            l: true,
            d: '',
            a: ['d'],
            syntax: PropertySyntax.PATH,
            p: 50,
        },
        // Polyline & Polygon
        {
            n: 'points',
            /**
             * support interpolation
             */
            int: true,
            l: true,
            syntax: PropertySyntax.LIST_OF_POINTS,
            p: 50,
        },
        // Text
        {
            n: 'text',
            l: true,
            d: '',
            syntax: PropertySyntax.TEXT,
            p: 50,
        },
        {
            n: 'textTransform',
            l: true,
            inh: true,
            k: ['capitalize', 'uppercase', 'lowercase', 'none'],
            d: 'none',
            syntax: PropertySyntax.TEXT_TRANSFORM,
            p: 51, // it must get parsed after text
        },
        {
            n: 'font',
            l: true,
        },
        {
            n: 'fontSize',
            int: true,
            inh: true,
            /**
             * @see https://www.w3schools.com/css/css_font_size.asp
             */
            d: '16px',
            l: true,
            syntax: PropertySyntax.LENGTH_PERCENTAGE,
        },
        {
            n: 'fontFamily',
            l: true,
            inh: true,
            d: 'sans-serif',
        },
        {
            n: 'fontStyle',
            l: true,
            inh: true,
            k: ['normal', 'italic', 'oblique'],
            d: 'normal',
        },
        {
            n: 'fontWeight',
            l: true,
            inh: true,
            k: ['normal', 'bold', 'bolder', 'lighter'],
            d: 'normal',
        },
        {
            n: 'fontVariant',
            l: true,
            inh: true,
            k: ['normal', 'small-caps'],
            d: 'normal',
        },
        {
            n: 'lineHeight',
            l: true,
            syntax: PropertySyntax.LENGTH,
            int: true,
            d: '0',
        },
        {
            n: 'letterSpacing',
            l: true,
            syntax: PropertySyntax.LENGTH,
            int: true,
            d: '0',
        },
        {
            n: 'miterLimit',
            l: true,
            syntax: PropertySyntax.NUMBER,
            d: function (nodeName) {
                if (nodeName === Shape.PATH ||
                    nodeName === Shape.POLYGON ||
                    nodeName === Shape.POLYLINE) {
                    return '4';
                }
                return '10';
            },
        },
        {
            n: 'wordWrap',
            l: true,
        },
        {
            n: 'wordWrapWidth',
            l: true,
        },
        {
            n: 'maxLines',
            l: true,
        },
        {
            n: 'textOverflow',
            l: true,
            d: 'clip',
        },
        {
            n: 'leading',
            l: true,
        },
        {
            n: 'textBaseline',
            l: true,
            inh: true,
            k: ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'],
            d: 'alphabetic',
        },
        {
            n: 'textAlign',
            l: true,
            inh: true,
            k: ['start', 'center', 'middle', 'end', 'left', 'right'],
            d: 'start',
        },
        // {
        //   n: 'whiteSpace',
        //   l: true,
        // },
        {
            n: 'markerStart',
            syntax: PropertySyntax.MARKER,
        },
        {
            n: 'markerEnd',
            syntax: PropertySyntax.MARKER,
        },
        {
            n: 'markerMid',
            syntax: PropertySyntax.MARKER,
        },
        {
            n: 'markerStartOffset',
            syntax: PropertySyntax.LENGTH,
            l: true,
            int: true,
            d: '0',
        },
        {
            n: 'markerEndOffset',
            syntax: PropertySyntax.LENGTH,
            l: true,
            int: true,
            d: '0',
        },
    ];
    var GEOMETRY_ATTRIBUTE_NAMES = BUILT_IN_PROPERTIES.filter(function (n) { return !!n.l; }).map(function (n) { return n.n; });
    var propertyMetadataCache = {};
    var unresolvedProperties = new WeakMap();
    // const uniqueAttributeSet = new Set<string>();
    // const tmpVec3a = vec3.create();
    // const tmpVec3b = vec3.create();
    // const tmpVec3c = vec3.create();
    var isPropertyResolved = function (object, name) {
        var properties = unresolvedProperties.get(object);
        if (!properties || properties.length === 0) {
            return true;
        }
        return properties.includes(name);
    };
    var DefaultStyleValueRegistry = /** @class */ (function () {
        /**
         * need recalc later
         */
        // dirty = false;
        function DefaultStyleValueRegistry(runtime) {
            var _this = this;
            this.runtime = runtime;
            BUILT_IN_PROPERTIES.forEach(function (property) {
                _this.registerMetadata(property);
            });
        }
        DefaultStyleValueRegistry.prototype.registerMetadata = function (metadata) {
            __spreadArray([metadata.n], __read((metadata.a || [])), false).forEach(function (name) {
                propertyMetadataCache[name] = metadata;
            });
        };
        DefaultStyleValueRegistry.prototype.unregisterMetadata = function (name) {
            delete propertyMetadataCache[name];
        };
        DefaultStyleValueRegistry.prototype.getPropertySyntax = function (syntax) {
            return this.runtime.CSSPropertySyntaxFactory[syntax];
        };
        /**
         * * parse value, eg.
         * fill: 'red' => CSSRGB
         * translateX: '10px' => CSSUnitValue { unit: 'px', value: 10 }
         * fontSize: '2em' => { unit: 'px', value: 32 }
         *
         * * calculate used value
         * * post process
         */
        DefaultStyleValueRegistry.prototype.processProperties = function (object, attributes, options) {
            var _this = this;
            if (options === void 0) { options = {
                skipUpdateAttribute: false,
                skipParse: false,
                forceUpdateGeometry: false,
                usedAttributes: [],
                memoize: true,
            }; }
            if (!this.runtime.enableCSSParsing) {
                Object.assign(object.attributes, attributes);
                var attributeNames_1 = Object.keys(attributes);
                // clipPath
                var oldClipPath = object.parsedStyle.clipPath;
                var oldOffsetPath = object.parsedStyle.offsetPath;
                object.parsedStyle = Object.assign(object.parsedStyle, attributes);
                var needUpdateGeometry_1 = !!options.forceUpdateGeometry;
                if (!needUpdateGeometry_1) {
                    for (var i = 0; i < GEOMETRY_ATTRIBUTE_NAMES.length; i++) {
                        if (GEOMETRY_ATTRIBUTE_NAMES[i] in attributes) {
                            needUpdateGeometry_1 = true;
                            break;
                        }
                    }
                }
                if (attributes.fill) {
                    object.parsedStyle.fill = parseColor(attributes.fill);
                }
                if (attributes.stroke) {
                    object.parsedStyle.stroke = parseColor(attributes.stroke);
                }
                if (attributes.shadowColor) {
                    object.parsedStyle.shadowColor = parseColor(attributes.shadowColor);
                }
                if (attributes.filter) {
                    object.parsedStyle.filter = parseFilter(attributes.filter);
                }
                // Rect
                // @ts-ignore
                if (!isNil(attributes.radius)) {
                    // @ts-ignore
                    object.parsedStyle.radius = parseDimensionArrayFormat(
                    // @ts-ignore
                    attributes.radius, 4);
                }
                // Polyline
                if (!isNil(attributes.lineDash)) {
                    object.parsedStyle.lineDash = parseDimensionArrayFormat(attributes.lineDash, 2);
                }
                // @ts-ignore
                if (attributes.points) {
                    // @ts-ignore
                    object.parsedStyle.points = parsePoints(attributes.points, object);
                }
                // Path
                // @ts-ignore
                if (attributes.path === '') {
                    object.parsedStyle.path = __assign({}, EMPTY_PARSED_PATH);
                }
                // @ts-ignore
                if (attributes.path) {
                    object.parsedStyle.path = parsePath(
                    // @ts-ignore
                    attributes.path);
                    object.parsedStyle.defX = object.parsedStyle.path.rect.x;
                    object.parsedStyle.defY = object.parsedStyle.path.rect.y;
                }
                // Text
                if (attributes.textTransform) {
                    this.runtime.CSSPropertySyntaxFactory['<text-transform>'].calculator(null, null, { value: attributes.textTransform }, object, null);
                }
                if (attributes.clipPath) {
                    this.runtime.CSSPropertySyntaxFactory['<defined-path>'].calculator('clipPath', oldClipPath, attributes.clipPath, object, this.runtime);
                }
                if (attributes.offsetPath) {
                    this.runtime.CSSPropertySyntaxFactory['<defined-path>'].calculator('offsetPath', oldOffsetPath, attributes.offsetPath, object, this.runtime);
                }
                if (attributes.anchor) {
                    object.parsedStyle.anchor = parseDimensionArrayFormat(
                    // @ts-ignorex
                    attributes.anchor, 2);
                }
                if (attributes.transform) {
                    object.parsedStyle.transform = parseTransform(attributes.transform);
                }
                if (attributes.transformOrigin) {
                    object.parsedStyle.transformOrigin = parseTransformOrigin(attributes.transformOrigin);
                }
                // Marker
                // @ts-ignore
                if (attributes.markerStart) {
                    object.parsedStyle.markerStart = this.runtime.CSSPropertySyntaxFactory['<marker>'].calculator(null, 
                    // @ts-ignore
                    attributes.markerStart, 
                    // @ts-ignore
                    attributes.markerStart, null, null);
                }
                // @ts-ignore
                if (attributes.markerEnd) {
                    object.parsedStyle.markerEnd = this.runtime.CSSPropertySyntaxFactory['<marker>'].calculator(null, 
                    // @ts-ignore
                    attributes.markerEnd, 
                    // @ts-ignore
                    attributes.markerEnd, null, null);
                }
                // @ts-ignore
                if (attributes.markerMid) {
                    object.parsedStyle.markerMid = this.runtime.CSSPropertySyntaxFactory['<marker>'].calculator('', 
                    // @ts-ignore
                    attributes.markerMid, 
                    // @ts-ignore
                    attributes.markerMid, null, null);
                }
                if (
                // Circle & Ellipse
                ((object.nodeName === Shape.CIRCLE ||
                    object.nodeName === Shape.ELLIPSE) &&
                    // @ts-ignore
                    (!isNil(attributes.cx) ||
                        // @ts-ignore
                        !isNil(attributes.cy))) ||
                    ((object.nodeName === Shape.RECT ||
                        object.nodeName === Shape.IMAGE ||
                        object.nodeName === Shape.GROUP ||
                        object.nodeName === Shape.HTML ||
                        object.nodeName === Shape.TEXT ||
                        object.nodeName === Shape.MESH) &&
                        // @ts-ignore
                        (!isNil(attributes.x) ||
                            // @ts-ignore
                            !isNil(attributes.y) ||
                            // @ts-ignore
                            !isNil(attributes.z))) ||
                    // Line
                    (object.nodeName === Shape.LINE &&
                        // @ts-ignore
                        (!isNil(attributes.x1) ||
                            // @ts-ignore
                            !isNil(attributes.y1) ||
                            // @ts-ignore
                            !isNil(attributes.z1) ||
                            // @ts-ignore
                            !isNil(attributes.x2) ||
                            // @ts-ignore
                            !isNil(attributes.y2) ||
                            // @ts-ignore
                            !isNil(attributes.z2)))) {
                    this.runtime.CSSPropertySyntaxFactory['<coordinate>'].postProcessor(object, attributeNames_1);
                }
                if (!isNil(attributes.zIndex)) {
                    this.runtime.CSSPropertySyntaxFactory['<z-index>'].postProcessor(object, attributeNames_1);
                }
                // @ts-ignore
                if (attributes.path) {
                    this.runtime.CSSPropertySyntaxFactory['<path>'].postProcessor(object, attributeNames_1);
                }
                // @ts-ignore
                if (attributes.points) {
                    this.runtime.CSSPropertySyntaxFactory['<list-of-points>'].postProcessor(object, attributeNames_1);
                }
                if (!isNil(attributes.offsetDistance)) {
                    this.runtime.CSSPropertySyntaxFactory['<offset-distance>'].postProcessor(object, attributeNames_1);
                }
                if (attributes.transform) {
                    this.runtime.CSSPropertySyntaxFactory['<transform>'].postProcessor(object, attributeNames_1);
                }
                if (needUpdateGeometry_1) {
                    this.updateGeometry(object);
                }
                return;
            }
            var skipUpdateAttribute = options.skipUpdateAttribute, skipParse = options.skipParse, forceUpdateGeometry = options.forceUpdateGeometry, usedAttributes = options.usedAttributes, memoize = options.memoize;
            var needUpdateGeometry = forceUpdateGeometry;
            var attributeNames = Object.keys(attributes);
            attributeNames.forEach(function (attributeName) {
                var _a;
                if (!skipUpdateAttribute) {
                    object.attributes[attributeName] = attributes[attributeName];
                }
                if (!needUpdateGeometry && ((_a = propertyMetadataCache[attributeName]) === null || _a === void 0 ? void 0 : _a.l)) {
                    needUpdateGeometry = true;
                }
            });
            if (!skipParse) {
                attributeNames.forEach(function (name) {
                    object.computedStyle[name] = _this.parseProperty(name, object.attributes[name], object, memoize);
                });
            }
            // let hasUnresolvedProperties = false;
            // parse according to priority
            // path 50
            // points 50
            // text 50
            // textTransform 51
            // anchor 99
            // transform 100
            // transformOrigin 100
            if (usedAttributes === null || usedAttributes === void 0 ? void 0 : usedAttributes.length) {
                // uniqueAttributeSet.clear();
                attributeNames = Array.from(new Set(attributeNames.concat(usedAttributes)));
            }
            // [
            //   'path',
            //   'points',
            //   'text',
            //   'textTransform',
            //   'anchor',
            //   'transform',
            //   'transformOrigin',
            // ].forEach((name) => {
            //   const index = attributeNames.indexOf(name);
            //   if (index > -1) {
            //     attributeNames.splice(index, 1);
            //     attributeNames.push(name);
            //   }
            // });
            attributeNames.forEach(function (name) {
                // some style props maybe deleted after parsing such as `anchor` in Text
                if (name in object.computedStyle) {
                    object.parsedStyle[name] = _this.computeProperty(name, object.computedStyle[name], object, memoize);
                }
            });
            // if (hasUnresolvedProperties) {
            //   this.dirty = true;
            //   return;
            // }
            // update geometry
            if (needUpdateGeometry) {
                // object.geometry.dirty = true;
                // runtime.sceneGraphService.dirtifyToRoot(object);
                this.updateGeometry(object);
            }
            attributeNames.forEach(function (name) {
                if (name in object.parsedStyle) {
                    _this.postProcessProperty(name, object, attributeNames);
                }
            });
            if (this.runtime.enableCSSParsing && object.children.length) {
                attributeNames.forEach(function (name) {
                    if (name in object.parsedStyle && _this.isPropertyInheritable(name)) {
                        // update children's inheritable
                        object.children.forEach(function (child) {
                            child.internalSetAttribute(name, null, {
                                skipUpdateAttribute: true,
                                skipParse: true,
                            });
                        });
                    }
                });
            }
        };
        /**
         * string -> parsed value
         */
        DefaultStyleValueRegistry.prototype.parseProperty = function (name, value, object, memoized) {
            var metadata = propertyMetadataCache[name];
            var computed = value;
            if (value === '' || isNil(value)) {
                value = 'unset';
            }
            if (value === 'unset' || value === 'initial' || value === 'inherit') {
                // computed = new CSSKeywordValue(value);
                computed = getOrCreateKeyword(value);
            }
            else {
                if (metadata) {
                    var keywords = metadata.k, syntax = metadata.syntax;
                    var handler = syntax && this.getPropertySyntax(syntax);
                    // use keywords
                    if (keywords && keywords.indexOf(value) > -1) {
                        // computed = new CSSKeywordValue(value);
                        computed = getOrCreateKeyword(value);
                    }
                    else if (handler) {
                        if (!memoized && handler.parserUnmemoize) {
                            computed = handler.parserUnmemoize(value, object);
                        }
                        else if (handler.parser) {
                            // try to parse it to CSSStyleValue, eg. '10px' -> CSS.px(10)
                            computed = handler.parser(value, object);
                        }
                    }
                }
            }
            return computed;
        };
        /**
         * computed value -> used value
         */
        DefaultStyleValueRegistry.prototype.computeProperty = function (name, computed, object, memoized) {
            var metadata = propertyMetadataCache[name];
            var isDocumentElement = object.id === 'g-root';
            // let used: CSSStyleValue = computed instanceof CSSStyleValue ? computed.clone() : computed;
            var used = computed;
            if (metadata) {
                var syntax = metadata.syntax, inherited = metadata.inh, defaultValue = metadata.d;
                if (computed instanceof CSSKeywordValue) {
                    var value = computed.value;
                    /**
                     * @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/unset
                     */
                    if (value === 'unset') {
                        if (inherited && !isDocumentElement) {
                            value = 'inherit';
                        }
                        else {
                            value = 'initial';
                        }
                    }
                    if (value === 'initial') {
                        // @see https://developer.mozilla.org/en-US/docs/Web/CSS/initial
                        if (!isNil(defaultValue)) {
                            computed = this.parseProperty(name, isFunction$1(defaultValue)
                                ? defaultValue(object.nodeName)
                                : defaultValue, object, memoized);
                        }
                    }
                    else if (value === 'inherit') {
                        // @see https://developer.mozilla.org/en-US/docs/Web/CSS/inherit
                        // behave like `inherit`
                        var resolved = this.tryToResolveProperty(object, name, {
                            inherited: true,
                        });
                        if (!isNil(resolved)) {
                            // object.parsedStyle[name] = resolved;
                            // return false;
                            return resolved;
                        }
                        else {
                            this.addUnresolveProperty(object, name);
                            return;
                        }
                    }
                }
                var handler = syntax && this.getPropertySyntax(syntax);
                if (handler && handler.calculator) {
                    // convert computed value to used value
                    var oldParsedValue = object.parsedStyle[name];
                    used = handler.calculator(name, oldParsedValue, computed, object, this.runtime);
                }
                else if (computed instanceof CSSKeywordValue) {
                    used = computed.value;
                }
                else {
                    used = computed;
                }
            }
            // object.parsedStyle[name] = used;
            // return false;
            return used;
        };
        DefaultStyleValueRegistry.prototype.postProcessProperty = function (name, object, attributes) {
            var metadata = propertyMetadataCache[name];
            if (metadata && metadata.syntax) {
                var handler = metadata.syntax && this.getPropertySyntax(metadata.syntax);
                var propertyHandler = handler;
                if (propertyHandler && propertyHandler.postProcessor) {
                    propertyHandler.postProcessor(object, attributes);
                }
            }
        };
        /**
         * resolve later
         */
        DefaultStyleValueRegistry.prototype.addUnresolveProperty = function (object, name) {
            var properties = unresolvedProperties.get(object);
            if (!properties) {
                unresolvedProperties.set(object, []);
                properties = unresolvedProperties.get(object);
            }
            if (properties.indexOf(name) === -1) {
                properties.push(name);
            }
        };
        DefaultStyleValueRegistry.prototype.tryToResolveProperty = function (object, name, options) {
            if (options === void 0) { options = {}; }
            var inherited = options.inherited;
            if (inherited) {
                if (object.parentElement &&
                    isPropertyResolved(object.parentElement, name)) {
                    // const computedValue = object.parentElement.computedStyle[name];
                    var usedValue = object.parentElement.parsedStyle[name];
                    if (
                    // usedValue instanceof CSSKeywordValue &&
                    usedValue === 'unset' ||
                        usedValue === 'initial' ||
                        usedValue === 'inherit') {
                        return;
                    }
                    // else if (
                    //   usedValue instanceof CSSUnitValue &&
                    //   CSSUnitValue.isRelativeUnit(usedValue.unit)
                    // ) {
                    //   return false;
                    // }
                    return usedValue;
                }
            }
            return;
        };
        DefaultStyleValueRegistry.prototype.recalc = function (object) {
            var properties = unresolvedProperties.get(object);
            if (properties && properties.length) {
                var attributes_1 = {};
                properties.forEach(function (property) {
                    attributes_1[property] = object.attributes[property];
                });
                this.processProperties(object, attributes_1);
                unresolvedProperties.delete(object);
            }
        };
        /**
         * update geometry when relative props changed,
         * eg. r of Circle, width/height of Rect
         */
        DefaultStyleValueRegistry.prototype.updateGeometry = function (object) {
            var nodeName = object.nodeName;
            var geometryUpdater = this.runtime.geometryUpdaterFactory[nodeName];
            if (geometryUpdater) {
                var geometry_1 = object.geometry;
                if (!geometry_1.contentBounds) {
                    geometry_1.contentBounds = new AABB();
                }
                if (!geometry_1.renderBounds) {
                    geometry_1.renderBounds = new AABB();
                }
                var parsedStyle = object.parsedStyle;
                var _a = geometryUpdater.update(parsedStyle, object), width = _a.width, height = _a.height, _b = _a.depth, depth = _b === void 0 ? 0 : _b, _c = _a.offsetX, offsetX = _c === void 0 ? 0 : _c, _d = _a.offsetY, offsetY = _d === void 0 ? 0 : _d, _e = _a.offsetZ, offsetZ = _e === void 0 ? 0 : _e;
                // init with content box
                var halfExtents = [
                    Math.abs(width) / 2,
                    Math.abs(height) / 2,
                    depth / 2,
                ];
                // const halfExtents = vec3.set(
                //   tmpVec3a,
                //   Math.abs(width) / 2,
                //   Math.abs(height) / 2,
                //   depth / 2,
                // );
                // anchor is center by default, don't account for lineWidth here
                var _f = parsedStyle, stroke = _f.stroke, lineWidth = _f.lineWidth, 
                // lineCap,
                // lineJoin,
                // miterLimit,
                increasedLineWidthForHitTesting = _f.increasedLineWidthForHitTesting, shadowType = _f.shadowType, shadowColor = _f.shadowColor, _g = _f.filter, filter = _g === void 0 ? [] : _g, transformOrigin = _f.transformOrigin;
                var anchor = parsedStyle.anchor;
                // <Text> use textAlign & textBaseline instead of anchor
                if (nodeName === Shape.TEXT) {
                    delete parsedStyle.anchor;
                }
                else if (nodeName === Shape.MESH) {
                    parsedStyle.anchor[2] = 0.5;
                }
                var center = [
                    ((1 - ((anchor && anchor[0]) || 0) * 2) * width) / 2 + offsetX,
                    ((1 - ((anchor && anchor[1]) || 0) * 2) * height) / 2 + offsetY,
                    (1 - ((anchor && anchor[2]) || 0) * 2) * halfExtents[2] + offsetZ,
                ];
                // const center = vec3.set(
                //   tmpVec3b,
                //   ((1 - ((anchor && anchor[0]) || 0) * 2) * width) / 2 + offsetX,
                //   ((1 - ((anchor && anchor[1]) || 0) * 2) * height) / 2 + offsetY,
                //   (1 - ((anchor && anchor[2]) || 0) * 2) * halfExtents[2] + offsetZ,
                // );
                // update geometry's AABB
                geometry_1.contentBounds.update(center, halfExtents);
                // @see https://github.molgen.mpg.de/git-mirror/cairo/blob/master/src/cairo-stroke-style.c#L97..L128
                var expansion = nodeName === Shape.POLYLINE ||
                    nodeName === Shape.POLYGON ||
                    nodeName === Shape.PATH
                    ? Math.SQRT2
                    : 0.5;
                // if (lineCap?.value === 'square') {
                //   expansion = Math.SQRT1_2;
                // }
                // if (lineJoin?.value === 'miter' && expansion < Math.SQRT2 * miterLimit) {
                //   expansion = Math.SQRT1_2 * miterLimit;
                // }
                // append border only if stroke existed
                var hasStroke = stroke && !stroke.isNone;
                if (hasStroke) {
                    var halfLineWidth = ((lineWidth || 0) + (increasedLineWidthForHitTesting || 0)) *
                        expansion;
                    // halfExtents[0] += halfLineWidth[0];
                    // halfExtents[1] += halfLineWidth[1];
                    halfExtents[0] += halfLineWidth;
                    halfExtents[1] += halfLineWidth;
                    // vec3.add(
                    //   halfExtents,
                    //   halfExtents,
                    //   vec3.set(tmpVec3c, halfLineWidth, halfLineWidth, 0),
                    // );
                }
                geometry_1.renderBounds.update(center, halfExtents);
                // account for shadow, only support constant value now
                if (shadowColor && shadowType && shadowType !== 'inner') {
                    var _h = geometry_1.renderBounds, min = _h.min, max = _h.max;
                    var _j = parsedStyle, shadowBlur = _j.shadowBlur, shadowOffsetX = _j.shadowOffsetX, shadowOffsetY = _j.shadowOffsetY;
                    var shadowBlurInPixels = shadowBlur || 0;
                    var shadowOffsetXInPixels = shadowOffsetX || 0;
                    var shadowOffsetYInPixels = shadowOffsetY || 0;
                    var shadowLeft = min[0] - shadowBlurInPixels + shadowOffsetXInPixels;
                    var shadowRight = max[0] + shadowBlurInPixels + shadowOffsetXInPixels;
                    var shadowTop = min[1] - shadowBlurInPixels + shadowOffsetYInPixels;
                    var shadowBottom = max[1] + shadowBlurInPixels + shadowOffsetYInPixels;
                    min[0] = Math.min(min[0], shadowLeft);
                    max[0] = Math.max(max[0], shadowRight);
                    min[1] = Math.min(min[1], shadowTop);
                    max[1] = Math.max(max[1], shadowBottom);
                    geometry_1.renderBounds.setMinMax(min, max);
                }
                // account for filter, eg. blur(5px), drop-shadow()
                filter.forEach(function (_a) {
                    var name = _a.name, params = _a.params;
                    if (name === 'blur') {
                        var blurRadius = params[0].value;
                        geometry_1.renderBounds.update(geometry_1.renderBounds.center, addVec3(geometry_1.renderBounds.halfExtents, geometry_1.renderBounds.halfExtents, [blurRadius, blurRadius, 0]));
                    }
                    else if (name === 'drop-shadow') {
                        var shadowOffsetX = params[0].value;
                        var shadowOffsetY = params[1].value;
                        var shadowBlur = params[2].value;
                        var _b = geometry_1.renderBounds, min = _b.min, max = _b.max;
                        var shadowLeft = min[0] - shadowBlur + shadowOffsetX;
                        var shadowRight = max[0] + shadowBlur + shadowOffsetX;
                        var shadowTop = min[1] - shadowBlur + shadowOffsetY;
                        var shadowBottom = max[1] + shadowBlur + shadowOffsetY;
                        min[0] = Math.min(min[0], shadowLeft);
                        max[0] = Math.max(max[0], shadowRight);
                        min[1] = Math.min(min[1], shadowTop);
                        max[1] = Math.max(max[1], shadowBottom);
                        geometry_1.renderBounds.setMinMax(min, max);
                    }
                });
                anchor = parsedStyle.anchor;
                // if (nodeName === Shape.RECT) {
                // account for negative width / height of Rect
                // @see https://github.com/antvis/g/issues/957
                var flipY = width < 0;
                var flipX = height < 0;
                // } else {
                // }
                // set transform origin
                var usedOriginXValue = (flipY ? -1 : 1) *
                    (transformOrigin
                        ? convertPercentUnit(transformOrigin[0], 0, object)
                        : 0);
                var usedOriginYValue = (flipX ? -1 : 1) *
                    (transformOrigin
                        ? convertPercentUnit(transformOrigin[1], 1, object)
                        : 0);
                usedOriginXValue =
                    usedOriginXValue -
                        (flipY ? -1 : 1) *
                            ((anchor && anchor[0]) || 0) *
                            geometry_1.contentBounds.halfExtents[0] *
                            2;
                usedOriginYValue =
                    usedOriginYValue -
                        (flipX ? -1 : 1) *
                            ((anchor && anchor[1]) || 0) *
                            geometry_1.contentBounds.halfExtents[1] *
                            2;
                object.setOrigin(usedOriginXValue, usedOriginYValue);
                // FIXME setOrigin may have already dirtified to root.
                this.runtime.sceneGraphService.dirtifyToRoot(object);
            }
        };
        DefaultStyleValueRegistry.prototype.updateSizeAttenuation = function (node, zoom) {
            if (node.style.isSizeAttenuation) {
                if (!node.style.rawLineWidth) {
                    node.style.rawLineWidth = node.style.lineWidth;
                }
                node.style.lineWidth = node.style.rawLineWidth / zoom;
                if (node.nodeName === Shape.CIRCLE) {
                    if (!node.style.rawR) {
                        node.style.rawR = node.style.r;
                    }
                    node.style.r = node.style.rawR / zoom;
                }
            }
            else {
                if (node.style.rawLineWidth) {
                    node.style.lineWidth = node.style.rawLineWidth;
                    delete node.style.rawLineWidth;
                }
                if (node.nodeName === Shape.CIRCLE) {
                    if (node.style.rawR) {
                        node.style.r = node.style.rawR;
                        delete node.style.rawR;
                    }
                }
            }
        };
        DefaultStyleValueRegistry.prototype.isPropertyInheritable = function (name) {
            var metadata = propertyMetadataCache[name];
            if (!metadata) {
                return false;
            }
            return metadata.inh;
        };
        return DefaultStyleValueRegistry;
    }());

    var CSSPropertyAngle = /** @class */ (function () {
        function CSSPropertyAngle() {
            this.parser = parseAngle;
            this.parserUnmemoize = parseAngleUnmemoize;
            this.parserWithCSSDisabled = null;
            this.mixer = mergeNumbers;
        }
        CSSPropertyAngle.prototype.calculator = function (name, oldParsed, parsed, object) {
            return convertAngleUnit(parsed);
        };
        return CSSPropertyAngle;
    }());

    /**
     * clipPath / textPath / offsetPath
     */
    var CSSPropertyClipPath = /** @class */ (function () {
        function CSSPropertyClipPath() {
        }
        CSSPropertyClipPath.prototype.calculator = function (name, oldPath, newPath, object, runtime) {
            // unset
            if (newPath instanceof CSSKeywordValue) {
                newPath = null;
            }
            runtime.sceneGraphService.updateDisplayObjectDependency(name, oldPath, newPath, object);
            if (name === 'clipPath') {
                // should affect children
                object.forEach(function (leaf) {
                    if (leaf.childNodes.length === 0) {
                        runtime.sceneGraphService.dirtifyToRoot(leaf);
                    }
                });
            }
            return newPath;
        };
        return CSSPropertyClipPath;
    }());

    var CSSPropertyColor = /** @class */ (function () {
        function CSSPropertyColor() {
            this.parser = parseColor;
            this.parserWithCSSDisabled = parseColor;
            this.mixer = mergeColors;
        }
        CSSPropertyColor.prototype.calculator = function (name, oldParsed, parsed, object) {
            if (parsed instanceof CSSKeywordValue) {
                // 'unset' 'none'
                return parsed.value === 'none' ? noneColor : transparentColor;
            }
            return parsed;
        };
        return CSSPropertyColor;
    }());

    var CSSPropertyFilter = /** @class */ (function () {
        function CSSPropertyFilter() {
            this.parser = parseFilter;
        }
        CSSPropertyFilter.prototype.calculator = function (name, oldParsed, parsed) {
            // unset or none
            if (parsed instanceof CSSKeywordValue) {
                return [];
            }
            return parsed;
        };
        return CSSPropertyFilter;
    }());

    function getFontSize(object) {
        var fontSize = object.parsedStyle.fontSize;
        return isNil(fontSize) ? null : fontSize;
    }
    /**
     * <length> & <percentage>
     */
    var CSSPropertyLengthOrPercentage = /** @class */ (function () {
        function CSSPropertyLengthOrPercentage() {
            this.parser = parseLengthOrPercentage;
            this.parserUnmemoize = parseLengthOrPercentageUnmemoize;
            this.parserWithCSSDisabled = null;
            this.mixer = mergeNumbers;
        }
        /**
         * according to parent's bounds
         *
         * @example
         * CSS.percent(50) -> CSS.px(0.5 * parent.width)
         */
        CSSPropertyLengthOrPercentage.prototype.calculator = function (name, oldParsed, computed, object, runtime) {
            var _a;
            if (isNumber(computed)) {
                return computed;
            }
            if (CSSUnitValue.isRelativeUnit(computed.unit)) {
                var registry = runtime.styleValueRegistry;
                if (computed.unit === UnitType.kPercentage) {
                    // TODO: merge dimensions
                    return 0;
                }
                else if (computed.unit === UnitType.kEms) {
                    if (object.parentNode) {
                        var fontSize = getFontSize(object.parentNode);
                        if (fontSize) {
                            fontSize *= computed.value;
                            return fontSize;
                        }
                        else {
                            registry.addUnresolveProperty(object, name);
                        }
                    }
                    else {
                        registry.addUnresolveProperty(object, name);
                    }
                    return 0;
                }
                else if (computed.unit === UnitType.kRems) {
                    if ((_a = object === null || object === void 0 ? void 0 : object.ownerDocument) === null || _a === void 0 ? void 0 : _a.documentElement) {
                        var fontSize = getFontSize(object.ownerDocument.documentElement);
                        if (fontSize) {
                            fontSize *= computed.value;
                            return fontSize;
                        }
                        else {
                            registry.addUnresolveProperty(object, name);
                        }
                    }
                    else {
                        registry.addUnresolveProperty(object, name);
                    }
                    return 0;
                }
            }
            else {
                // remove listener if exists
                // registry.unregisterParentGeometryBoundsChangedHandler(object, name);
                // return absolute value
                return computed.value;
            }
        };
        return CSSPropertyLengthOrPercentage;
    }());

    /**
     * format to Tuple2<CSSUnitValue>
     *
     * @example
     * rect.style.lineDash = 10;
     * rect.style.lineDash = [10, 10];
     * rect.style.lineDash = '10 10';
     */
    var CSSPropertyLengthOrPercentage12 = /** @class */ (function () {
        function CSSPropertyLengthOrPercentage12() {
            this.mixer = mergeNumberLists;
        }
        CSSPropertyLengthOrPercentage12.prototype.parser = function (radius) {
            var parsed = parseDimensionArray(isNumber(radius) ? [radius] : radius);
            var formatted;
            if (parsed.length === 1) {
                formatted = [parsed[0], parsed[0]];
            }
            else {
                formatted = [parsed[0], parsed[1]];
            }
            return formatted;
        };
        CSSPropertyLengthOrPercentage12.prototype.calculator = function (name, oldParsed, computed) {
            return computed.map(function (c) { return c.value; });
        };
        return CSSPropertyLengthOrPercentage12;
    }());

    /**
     * used in rounded rect
     *
     * @example
     * rect.style.radius = 10;
     * rect.style.radius = '10 10';
     * rect.style.radius = '10 10 10 10';
     */
    var CSSPropertyLengthOrPercentage14 = /** @class */ (function () {
        function CSSPropertyLengthOrPercentage14() {
            this.mixer = mergeNumberLists;
        }
        CSSPropertyLengthOrPercentage14.prototype.parser = function (radius) {
            var parsed = parseDimensionArray(isNumber(radius) ? [radius] : radius);
            var formatted;
            // format to Tuple<CSSUnitValue>
            if (parsed.length === 1) {
                formatted = [parsed[0], parsed[0], parsed[0], parsed[0]];
            }
            else if (parsed.length === 2) {
                formatted = [parsed[0], parsed[1], parsed[0], parsed[1]];
            }
            else if (parsed.length === 3) {
                formatted = [parsed[0], parsed[1], parsed[2], parsed[1]];
            }
            else {
                formatted = [parsed[0], parsed[1], parsed[2], parsed[3]];
            }
            return formatted;
        };
        CSSPropertyLengthOrPercentage14.prototype.calculator = function (name, oldParsed, computed) {
            return computed.map(function (c) { return c.value; });
        };
        return CSSPropertyLengthOrPercentage14;
    }());

    var tmpMat4 = create$1();
    function parsedTransformToMat4(transform, object) {
        var defX = object.parsedStyle.defX || 0;
        var defY = object.parsedStyle.defY || 0;
        // reset transform
        object.resetLocalTransform();
        object.setLocalPosition(defX, defY);
        transform.forEach(function (parsed) {
            var t = parsed.t, d = parsed.d;
            if (t === 'scale') {
                // scale(1) scale(1, 1)
                var newScale = (d === null || d === void 0 ? void 0 : d.map(function (s) { return s.value; })) || [1, 1];
                object.scaleLocal(newScale[0], newScale[1], 1);
            }
            else if (t === 'scalex') {
                var newScale = (d === null || d === void 0 ? void 0 : d.map(function (s) { return s.value; })) || [1];
                object.scaleLocal(newScale[0], 1, 1);
            }
            else if (t === 'scaley') {
                var newScale = (d === null || d === void 0 ? void 0 : d.map(function (s) { return s.value; })) || [1];
                object.scaleLocal(1, newScale[0], 1);
            }
            else if (t === 'scalez') {
                var newScale = (d === null || d === void 0 ? void 0 : d.map(function (s) { return s.value; })) || [1];
                object.scaleLocal(1, 1, newScale[0]);
            }
            else if (t === 'scale3d') {
                var newScale = (d === null || d === void 0 ? void 0 : d.map(function (s) { return s.value; })) || [1, 1, 1];
                object.scaleLocal(newScale[0], newScale[1], newScale[2]);
            }
            else if (t === 'translate') {
                var newTranslation = d || [Opx, Opx];
                object.translateLocal(newTranslation[0].value, newTranslation[1].value, 0);
            }
            else if (t === 'translatex') {
                var newTranslation = d || [Opx];
                object.translateLocal(newTranslation[0].value, 0, 0);
            }
            else if (t === 'translatey') {
                var newTranslation = d || [Opx];
                object.translateLocal(0, newTranslation[0].value, 0);
            }
            else if (t === 'translatez') {
                var newTranslation = d || [Opx];
                object.translateLocal(0, 0, newTranslation[0].value);
            }
            else if (t === 'translate3d') {
                var newTranslation = d || [Opx, Opx, Opx];
                object.translateLocal(newTranslation[0].value, newTranslation[1].value, newTranslation[2].value);
            }
            else if (t === 'rotate') {
                var newAngles = d || [Odeg];
                object.rotateLocal(0, 0, convertAngleUnit(newAngles[0]));
            }
            else if (t === 'rotatex') {
                var newAngles = d || [Odeg];
                object.rotateLocal(convertAngleUnit(newAngles[0]), 0, 0);
            }
            else if (t === 'rotatey') {
                var newAngles = d || [Odeg];
                object.rotateLocal(0, convertAngleUnit(newAngles[0]), 0);
            }
            else if (t === 'rotatez') {
                var newAngles = d || [Odeg];
                object.rotateLocal(0, 0, convertAngleUnit(newAngles[0]));
            }
            else if (t === 'rotate3d') ;
            else if (t === 'skew') {
                var newSkew = (d === null || d === void 0 ? void 0 : d.map(function (s) { return s.value; })) || [0, 0];
                object.setLocalSkew(deg2rad(newSkew[0]), deg2rad(newSkew[1]));
            }
            else if (t === 'skewx') {
                var newSkew = (d === null || d === void 0 ? void 0 : d.map(function (s) { return s.value; })) || [0];
                object.setLocalSkew(deg2rad(newSkew[0]), object.getLocalSkew()[1]);
            }
            else if (t === 'skewy') {
                var newSkew = (d === null || d === void 0 ? void 0 : d.map(function (s) { return s.value; })) || [0];
                object.setLocalSkew(object.getLocalSkew()[0], deg2rad(newSkew[0]));
            }
            else if (t === 'matrix') {
                var _a = __read(d.map(function (s) { return s.value; }), 6), a = _a[0], b = _a[1], c = _a[2], dd = _a[3], tx = _a[4], ty = _a[5];
                object.setLocalTransform(set(tmpMat4, a, b, 0, 0, c, dd, 0, 0, 0, 0, 1, 0, tx + defX, ty + defY, 0, 1));
            }
            else if (t === 'matrix3d') {
                // @ts-ignore
                set.apply(mat4, __spreadArray([tmpMat4], __read(d.map(function (s) { return s.value; })), false));
                tmpMat4[12] += defX;
                tmpMat4[13] += defY;
                object.setLocalTransform(tmpMat4);
            }
        });
        return object.getLocalTransform();
    }

    /**
     * local position
     */
    var CSSPropertyLocalPosition = /** @class */ (function (_super) {
        __extends(CSSPropertyLocalPosition, _super);
        function CSSPropertyLocalPosition() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        /**
         * update local position
         */
        CSSPropertyLocalPosition.prototype.postProcessor = function (object, attributes) {
            var x;
            var y;
            var z;
            switch (object.nodeName) {
                case Shape.CIRCLE:
                case Shape.ELLIPSE:
                    var _a = object.parsedStyle, cx = _a.cx, cy = _a.cy, cz = _a.cz;
                    if (!isNil(cx)) {
                        x = cx;
                    }
                    if (!isNil(cy)) {
                        y = cy;
                    }
                    if (!isNil(cz)) {
                        z = cz;
                    }
                    break;
                case Shape.LINE:
                    var _b = object.parsedStyle, x1 = _b.x1, x2 = _b.x2, y1 = _b.y1, y2 = _b.y2;
                    var minX = Math.min(x1, x2);
                    var minY = Math.min(y1, y2);
                    x = minX;
                    y = minY;
                    z = 0;
                    break;
                case Shape.RECT:
                case Shape.IMAGE:
                case Shape.GROUP:
                case Shape.HTML:
                case Shape.TEXT:
                case Shape.MESH:
                    if (!isNil(object.parsedStyle.x)) {
                        x = object.parsedStyle.x;
                    }
                    if (!isNil(object.parsedStyle.y)) {
                        y = object.parsedStyle.y;
                    }
                    if (!isNil(object.parsedStyle.z)) {
                        z = object.parsedStyle.z;
                    }
                    break;
            }
            if (object.nodeName !== Shape.PATH &&
                object.nodeName !== Shape.POLYLINE &&
                object.nodeName !== Shape.POLYGON) {
                object.parsedStyle.defX = x || 0;
                object.parsedStyle.defY = y || 0;
            }
            var needResetLocalPosition = !isNil(x) || !isNil(y) || !isNil(z);
            // only if `transform` won't be processed later
            if (needResetLocalPosition && attributes.indexOf('transform') === -1) {
                // account for current transform if needed
                var transform = object.parsedStyle.transform;
                if (transform && transform.length) {
                    parsedTransformToMat4(transform, object);
                }
                else {
                    var _c = __read(object.getLocalPosition(), 3), ox = _c[0], oy = _c[1], oz = _c[2];
                    object.setLocalPosition(isNil(x) ? ox : x, isNil(y) ? oy : y, isNil(z) ? oz : z);
                }
            }
        };
        return CSSPropertyLocalPosition;
    }(CSSPropertyLengthOrPercentage));

    var CSSPropertyMarker = /** @class */ (function () {
        function CSSPropertyMarker() {
        }
        CSSPropertyMarker.prototype.calculator = function (name, oldMarker, newMarker, object) {
            // unset
            if (newMarker instanceof CSSKeywordValue) {
                newMarker = null;
            }
            var cloned = newMarker === null || newMarker === void 0 ? void 0 : newMarker.cloneNode(true);
            if (cloned) {
                // FIXME: SVG should not inherit parent's style, add a flag here
                cloned.style.isMarker = true;
            }
            return cloned;
        };
        return CSSPropertyMarker;
    }());

    var CSSPropertyNumber = /** @class */ (function () {
        function CSSPropertyNumber() {
            this.mixer = mergeNumbers;
            this.parser = parseNumber;
            this.parserUnmemoize = parseNumberUnmemoize;
            this.parserWithCSSDisabled = null;
        }
        CSSPropertyNumber.prototype.calculator = function (name, oldParsed, computed) {
            return computed.value;
        };
        return CSSPropertyNumber;
    }());

    var CSSPropertyOffsetDistance = /** @class */ (function () {
        function CSSPropertyOffsetDistance() {
            this.parser = parseNumber;
            this.parserUnmemoize = parseNumberUnmemoize;
            this.parserWithCSSDisabled = null;
            this.mixer = clampedMergeNumbers(0, 1);
        }
        CSSPropertyOffsetDistance.prototype.calculator = function (name, oldParsed, computed) {
            return computed.value;
        };
        CSSPropertyOffsetDistance.prototype.postProcessor = function (object) {
            var _a = object.parsedStyle, offsetPath = _a.offsetPath, offsetDistance = _a.offsetDistance;
            if (!offsetPath) {
                return;
            }
            var nodeName = offsetPath.nodeName;
            if (nodeName === Shape.LINE ||
                nodeName === Shape.PATH ||
                nodeName === Shape.POLYLINE) {
                // set position in world space
                var point = offsetPath.getPoint(offsetDistance);
                if (point) {
                    object.parsedStyle.defX = point.x;
                    object.parsedStyle.defY = point.y;
                    object.setLocalPosition(point.x, point.y);
                }
            }
        };
        return CSSPropertyOffsetDistance;
    }());

    /**
     * opacity
     */
    var CSSPropertyOpacity = /** @class */ (function () {
        function CSSPropertyOpacity() {
            this.parser = parseNumber;
            this.parserUnmemoize = parseNumberUnmemoize;
            this.parserWithCSSDisabled = null;
            this.mixer = clampedMergeNumbers(0, 1);
        }
        CSSPropertyOpacity.prototype.calculator = function (name, oldParsed, computed) {
            return computed.value;
        };
        return CSSPropertyOpacity;
    }());

    var CSSPropertyPath = /** @class */ (function () {
        function CSSPropertyPath() {
            /**
             * path2Curve
             */
            this.parser = parsePath;
            this.parserWithCSSDisabled = parsePath;
            this.mixer = mergePaths;
        }
        CSSPropertyPath.prototype.calculator = function (name, oldParsed, parsed) {
            // unset
            if (parsed instanceof CSSKeywordValue && parsed.value === 'unset') {
                return {
                    absolutePath: [],
                    hasArc: false,
                    segments: [],
                    polygons: [],
                    polylines: [],
                    curve: null,
                    totalLength: 0,
                    rect: new Rectangle(0, 0, 0, 0),
                };
            }
            return parsed;
        };
        /**
         * update local position
         */
        CSSPropertyPath.prototype.postProcessor = function (object, attributes) {
            object.parsedStyle.defX = object.parsedStyle.path.rect.x;
            object.parsedStyle.defY = object.parsedStyle.path.rect.y;
            if (object.nodeName === Shape.PATH &&
                attributes.indexOf('transform') === -1) {
                var _a = object.parsedStyle, _b = _a.defX, defX = _b === void 0 ? 0 : _b, _c = _a.defY, defY = _c === void 0 ? 0 : _c;
                object.setLocalPosition(defX, defY);
            }
        };
        return CSSPropertyPath;
    }());

    var CSSPropertyPoints = /** @class */ (function () {
        function CSSPropertyPoints() {
            this.parser = parsePoints;
            this.mixer = mergePoints;
        }
        /**
         * update local position
         */
        CSSPropertyPoints.prototype.postProcessor = function (object, attributes) {
            if ((object.nodeName === Shape.POLYGON ||
                object.nodeName === Shape.POLYLINE) &&
                attributes.indexOf('transform') === -1) {
                var _a = object.parsedStyle, defX = _a.defX, defY = _a.defY;
                object.setLocalPosition(defX, defY);
            }
        };
        return CSSPropertyPoints;
    }());

    var CSSPropertyShadowBlur = /** @class */ (function (_super) {
        __extends(CSSPropertyShadowBlur, _super);
        function CSSPropertyShadowBlur() {
            var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
            _this.mixer = clampedMergeNumbers(0, Infinity);
            return _this;
        }
        return CSSPropertyShadowBlur;
    }(CSSPropertyLengthOrPercentage));

    var CSSPropertyText = /** @class */ (function () {
        function CSSPropertyText() {
        }
        CSSPropertyText.prototype.calculator = function (name, oldParsed, parsed, object) {
            if (parsed instanceof CSSKeywordValue) {
                if (parsed.value === 'unset') {
                    return '';
                }
                else {
                    return parsed.value;
                }
            }
            // allow number as valid text content
            return "".concat(parsed);
        };
        CSSPropertyText.prototype.postProcessor = function (object) {
            object.nodeValue = "".concat(object.parsedStyle.text) || '';
        };
        return CSSPropertyText;
    }());

    /**
     * it must transform after text get parsed
     * @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-transform
     */
    var CSSPropertyTextTransform = /** @class */ (function () {
        function CSSPropertyTextTransform() {
        }
        CSSPropertyTextTransform.prototype.calculator = function (name, oldParsed, parsed, object) {
            var rawText = object.getAttribute('text');
            if (rawText) {
                var transformedText = rawText;
                if (parsed.value === 'capitalize') {
                    transformedText = rawText.charAt(0).toUpperCase() + rawText.slice(1);
                }
                else if (parsed.value === 'lowercase') {
                    transformedText = rawText.toLowerCase();
                }
                else if (parsed.value === 'uppercase') {
                    transformedText = rawText.toUpperCase();
                }
                object.parsedStyle.text = transformedText;
            }
            return parsed.value;
        };
        return CSSPropertyTextTransform;
    }());

    var canvasMap = {};
    var defaultCanvasIdCounter = 0;
    /**
     * destroy existed canvas with the same id
     */
    function cleanExistedCanvas(container, canvas) {
        if (container) {
            var id = typeof container === 'string'
                ? container
                : container.id || defaultCanvasIdCounter++;
            if (canvasMap[id]) {
                canvasMap[id].destroy();
            }
            canvasMap[id] = canvas;
        }
    }
    var isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';

    function isElement(target) {
        return !!target.getAttribute;
    }
    function sortedIndex(array, value) {
        var low = 0;
        var high = array.length;
        while (low < high) {
            var mid = (low + high) >>> 1;
            if (sortByZIndex(array[mid], value) < 0) {
                low = mid + 1;
            }
            else {
                high = mid;
            }
        }
        return low;
    }
    function sortByZIndex(o1, o2) {
        var zIndex1 = Number(o1.parsedStyle.zIndex);
        var zIndex2 = Number(o2.parsedStyle.zIndex);
        if (zIndex1 === zIndex2) {
            var parent_1 = o1.parentNode;
            if (parent_1) {
                var children = parent_1.childNodes || [];
                return children.indexOf(o1) - children.indexOf(o2);
            }
        }
        return zIndex1 - zIndex2;
    }
    function findClosestClipPathTarget(object) {
        var _a;
        var el = object;
        do {
            var clipPath = (_a = el.parsedStyle) === null || _a === void 0 ? void 0 : _a.clipPath;
            if (clipPath)
                return el;
            el = el.parentElement;
        } while (el !== null);
        return null;
    }
    function getStyle($el, property) {
        if (isBrowser) {
            return document.defaultView
                .getComputedStyle($el, null)
                .getPropertyValue(property);
        }
    }
    function getWidth($el) {
        var width = getStyle($el, 'width');
        if (width === 'auto') {
            return $el.offsetWidth;
        }
        return parseFloat(width);
    }
    function getHeight($el) {
        var height = getStyle($el, 'height');
        if (height === 'auto') {
            return $el.offsetHeight;
        }
        return parseFloat(height);
    }

    // borrow from hammer.js
    var MOUSE_POINTER_ID = 1;
    var TOUCH_TO_POINTER = {
        touchstart: 'pointerdown',
        touchend: 'pointerup',
        touchendoutside: 'pointerupoutside',
        touchmove: 'pointermove',
        touchcancel: 'pointercancel',
    };
    var clock = typeof performance === 'object' && performance.now ? performance : Date;

    function isFillOrStrokeAffected(pointerEvents, fill, stroke) {
        // account for pointerEvents
        // @see https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
        var hasFill = false;
        var hasStroke = false;
        var isFillOtherThanNone = !!fill && !fill.isNone;
        var isStrokeOtherThanNone = !!stroke && !stroke.isNone;
        if (pointerEvents === 'visiblepainted' ||
            pointerEvents === 'painted' ||
            pointerEvents === 'auto') {
            hasFill = isFillOtherThanNone;
            hasStroke = isStrokeOtherThanNone;
        }
        else if (pointerEvents === 'visiblefill' || pointerEvents === 'fill') {
            hasFill = true;
        }
        else if (pointerEvents === 'visiblestroke' || pointerEvents === 'stroke') {
            hasStroke = true;
        }
        else if (pointerEvents === 'visible' || pointerEvents === 'all') {
            // The values of the fill and stroke do not affect event processing.
            hasFill = true;
            hasStroke = true;
        }
        return [hasFill, hasStroke];
    }

    /**
     * Thanks for following contributor of codes
     * https://gist.github.com/1866474
     * http://paulirish.com/2011/requestanimationframe-for-smart-animating/
     * http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
     * https://github.com/Financial-Times/polyfill-library/blob/master/polyfills/requestAnimationFrame/polyfill.js
     **/
    var uId = 1;
    var uniqueId = function () { return uId++; };
    // We use `self` instead of `window` for `WebWorker` support.
    var root = typeof self === 'object' && self.self == self
        ? self
        : // @ts-ignore
            typeof global === 'object' && global.global == global
                ? // @ts-ignore
                    global
                : {};
    var nowOffset = Date.now();
    // use performance api if exist, otherwise use Date.now.
    // Date.now polyfill required.
    var pnow = function () {
        if (root.performance && typeof root.performance.now === 'function') {
            return root.performance.now();
        }
        // fallback
        return Date.now() - nowOffset;
    };
    var reservedCBs = {};
    var lastTime = Date.now();
    var polyfillRaf = function (callback) {
        if (typeof callback !== 'function') {
            throw new TypeError(callback + ' is not a function');
        }
        var currentTime = Date.now();
        var gap = currentTime - lastTime;
        var delay = gap > 16 ? 0 : 16 - gap;
        var id = uniqueId();
        reservedCBs[id] = callback;
        // keys(reservedCBs).length > 1 의미는 이미 setTimeout 이 걸려있는 경우.
        // 함께 callback 이 실행될 수 있게 reservedCBs 에만 추가해주고 return
        if (Object.keys(reservedCBs).length > 1)
            return id;
        setTimeout(function () {
            lastTime = currentTime;
            var copied = reservedCBs;
            reservedCBs = {};
            Object.keys(copied).forEach(function (key) { return copied[key](pnow()); });
        }, delay);
        return id;
    };
    var polyfillCaf = function (id) {
        delete reservedCBs[id];
    };
    var vendorPrefixes = ['', 'webkit', 'moz', 'ms', 'o'];
    var getRequestAnimationFrame = function (vp) {
        if (typeof vp !== 'string')
            return polyfillRaf;
        if (vp === '')
            return root['requestAnimationFrame'];
        return root[vp + 'RequestAnimationFrame'];
    };
    var getCancelAnimationFrame = function (vp) {
        if (typeof vp !== 'string')
            return polyfillCaf;
        if (vp === '')
            return root['cancelAnimationFrame'];
        return (root[vp + 'CancelAnimationFrame'] ||
            root[vp + 'CancelRequestAnimationFrame']);
    };
    var find$1 = function (arr, predicate) {
        var i = 0;
        while (arr[i] !== void 0) {
            if (predicate(arr[i]))
                return arr[i];
            i = i + 1;
        }
    };
    var vp = find$1(vendorPrefixes, function (vp) { return !!getRequestAnimationFrame(vp); });
    var raf = getRequestAnimationFrame(vp);
    var caf = getCancelAnimationFrame(vp);
    root.requestAnimationFrame = raf;
    root.cancelAnimationFrame = caf;

    var AsyncParallelHook = /** @class */ (function () {
        function AsyncParallelHook() {
            this.callbacks = [];
        }
        AsyncParallelHook.prototype.getCallbacksNum = function () {
            return this.callbacks.length;
        };
        AsyncParallelHook.prototype.tapPromise = function (options, fn) {
            this.callbacks.push(fn);
        };
        AsyncParallelHook.prototype.promise = function () {
            var args = [];
            for (var _i = 0; _i < arguments.length; _i++) {
                args[_i] = arguments[_i];
            }
            return Promise.all(this.callbacks.map(function (callback) {
                return callback.apply(void 0, __spreadArray([], __read(args), false));
            }));
        };
        return AsyncParallelHook;
    }());

    var AsyncSeriesWaterfallHook = /** @class */ (function () {
        function AsyncSeriesWaterfallHook() {
            this.callbacks = [];
        }
        AsyncSeriesWaterfallHook.prototype.tapPromise = function (options, fn) {
            this.callbacks.push(fn);
        };
        AsyncSeriesWaterfallHook.prototype.promise = function () {
            var args = [];
            for (var _i = 0; _i < arguments.length; _i++) {
                args[_i] = arguments[_i];
            }
            return __awaiter(this, void 0, void 0, function () {
                var result, i, callback;
                var _a;
                return __generator(this, function (_b) {
                    switch (_b.label) {
                        case 0:
                            if (!this.callbacks.length) return [3 /*break*/, 6];
                            return [4 /*yield*/, (_a = this.callbacks)[0].apply(_a, __spreadArray([], __read(args), false))];
                        case 1:
                            result = _b.sent();
                            i = 0;
                            _b.label = 2;
                        case 2:
                            if (!(i < this.callbacks.length - 1)) return [3 /*break*/, 5];
                            callback = this.callbacks[i];
                            return [4 /*yield*/, callback(result)];
                        case 3:
                            // @ts-ignore
                            result = _b.sent();
                            _b.label = 4;
                        case 4:
                            i++;
                            return [3 /*break*/, 2];
                        case 5: return [2 /*return*/, result];
                        case 6: return [2 /*return*/, null];
                    }
                });
            });
        };
        return AsyncSeriesWaterfallHook;
    }());

    var SyncHook = /** @class */ (function () {
        function SyncHook() {
            this.callbacks = [];
        }
        SyncHook.prototype.tap = function (options, fn) {
            this.callbacks.push(fn);
        };
        SyncHook.prototype.call = function () {
            /* eslint-disable-next-line prefer-rest-params */
            var argsArr = arguments;
            this.callbacks.forEach(function (callback) {
                /* eslint-disable-next-line prefer-spread */
                callback.apply(void 0, argsArr);
            });
        };
        return SyncHook;
    }());

    var SyncWaterfallHook = /** @class */ (function () {
        function SyncWaterfallHook() {
            this.callbacks = [];
        }
        SyncWaterfallHook.prototype.tap = function (options, fn) {
            this.callbacks.push(fn);
        };
        SyncWaterfallHook.prototype.call = function () {
            if (this.callbacks.length) {
                /* eslint-disable-next-line prefer-rest-params */
                var argsArr = arguments;
                /* eslint-disable-next-line prefer-spread */
                var result = this.callbacks[0].apply(void 0, argsArr);
                for (var i = 0; i < this.callbacks.length - 1; i++) {
                    var callback = this.callbacks[i];
                    // @ts-ignore
                    result = callback(result);
                }
                return result;
            }
            return null;
        };
        return SyncWaterfallHook;
    }());

    var genericFontFamilies = [
        'serif',
        'sans-serif',
        'monospace',
        'cursive',
        'fantasy',
        'system-ui',
    ];
    var stringRegExp = /([\"\'])[^\'\"]+\1/;
    function toFontString(attributes) {
        var fontSize = attributes.fontSize, fontFamily = attributes.fontFamily, fontStyle = attributes.fontStyle, fontVariant = attributes.fontVariant, fontWeight = attributes.fontWeight;
        // build canvas api font setting from individual components. Convert a numeric this.fontSize to px
        // const fontSizeString: string = isNumber(fontSize) ? `${fontSize}px` : fontSize.toString();
        var fontSizeString = (isNumber(fontSize) && "".concat(fontSize, "px")) || '16px';
        // Clean-up fontFamily property by quoting each font name
        // this will support font names with spaces
        var fontFamilies = fontFamily.split(',');
        for (var i = fontFamilies.length - 1; i >= 0; i--) {
            // Trim any extra white-space
            var fontFamily_1 = fontFamilies[i].trim();
            // Check if font already contains strings
            if (!stringRegExp.test(fontFamily_1) &&
                genericFontFamilies.indexOf(fontFamily_1) < 0) {
                fontFamily_1 = "\"".concat(fontFamily_1, "\"");
            }
            fontFamilies[i] = fontFamily_1;
        }
        return "".concat(fontStyle, " ").concat(fontVariant, " ").concat(fontWeight, " ").concat(fontSizeString, " ").concat(fontFamilies.join(','));
    }

    /**
     * @see /zh/docs/api/animation#支持变换的属性
     *
     * support the following formats like CSS Transform:
     *
     * scale
     * * scale(x, y)
     * * scaleX(x)
     * * scaleY(x)
     * * scaleZ(z)
     * * scale3d(x, y, z)
     *
     * translate (unit: none, px, %(relative to its bounds))
     * * translate(x, y) eg. translate(0, 0) translate(0, 30px) translate(100%, 100%)
     * * translateX(0)
     * * translateY(0)
     * * translateZ(0)
     * * translate3d(0, 0, 0)
     *
     * rotate (unit: deg rad turn)
     * * rotate(0.5turn) rotate(30deg) rotate(1rad)
     *
     * none
     *
     * unsupported for now:
     * * calc() eg. translate(calc(100% + 10px))
     * * matrix/matrix3d()
     * * skew/skewX/skewY
     * * perspective
     */
    var CSSPropertyTransform = /** @class */ (function () {
        function CSSPropertyTransform() {
            this.parser = parseTransform;
            this.parserUnmemoize = parseTransformUnmemoize;
            this.parserWithCSSDisabled = parseTransformUnmemoize;
            this.mixer = mergeTransforms;
        }
        CSSPropertyTransform.prototype.calculator = function (name, oldParsed, parsed, object) {
            // 'none'
            if (parsed instanceof CSSKeywordValue) {
                return [];
            }
            return parsed;
        };
        CSSPropertyTransform.prototype.postProcessor = function (object) {
            var transform = object.parsedStyle.transform;
            parsedTransformToMat4(transform, object);
        };
        return CSSPropertyTransform;
    }());

    /**
     * @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin
     * @example
     * [10px, 10px] [10%, 10%]
     */
    var CSSPropertyTransformOrigin = /** @class */ (function () {
        function CSSPropertyTransformOrigin() {
            this.parser = parseTransformOrigin;
            this.parserUnmemoize = parseTransformOriginUnmemoize;
            // calculator(
            //   name: string,
            //   oldParsed: [CSSUnitValue, CSSUnitValue],
            //   parsed: [CSSUnitValue, CSSUnitValue],
            //   object: DisplayObject,
            // ): [number, number] {
            //   console.log(object, parsed);
            //   return [parsed[0].value, parsed[1].value];
            //   // return [convertPercentUnit(parsed[0], 0, object), convertPercentUnit(parsed[1], 1, object)];
            // }
        }
        return CSSPropertyTransformOrigin;
    }());

    var CSSPropertyZIndex = /** @class */ (function () {
        function CSSPropertyZIndex() {
            this.parser = parseNumber;
            this.parserUnmemoize = parseNumberUnmemoize;
        }
        CSSPropertyZIndex.prototype.calculator = function (name, oldParsed, computed, object) {
            return computed.value;
        };
        CSSPropertyZIndex.prototype.postProcessor = function (object) {
            if (object.parentNode) {
                var parentEntity = object.parentNode;
                var parentRenderable = parentEntity.renderable;
                var parentSortable = parentEntity.sortable;
                if (parentRenderable) {
                    parentRenderable.dirty = true;
                }
                // need re-sort on parent
                if (parentSortable) {
                    parentSortable.dirty = true;
                    parentSortable.dirtyReason = SortReason.Z_INDEX_CHANGED;
                }
            }
        };
        return CSSPropertyZIndex;
    }());

    var CircleUpdater = /** @class */ (function () {
        function CircleUpdater() {
        }
        CircleUpdater.prototype.update = function (parsedStyle, object) {
            var r = parsedStyle.r;
            var width = r * 2;
            var height = r * 2;
            return {
                width: width,
                height: height,
            };
        };
        return CircleUpdater;
    }());

    var EllipseUpdater = /** @class */ (function () {
        function EllipseUpdater() {
        }
        EllipseUpdater.prototype.update = function (parsedStyle, object) {
            var rx = parsedStyle.rx, ry = parsedStyle.ry;
            var width = rx * 2;
            var height = ry * 2;
            return {
                width: width,
                height: height,
            };
        };
        return EllipseUpdater;
    }());

    var LineUpdater = /** @class */ (function () {
        function LineUpdater() {
        }
        LineUpdater.prototype.update = function (parsedStyle) {
            var x1 = parsedStyle.x1, y1 = parsedStyle.y1, x2 = parsedStyle.x2, y2 = parsedStyle.y2;
            var minX = Math.min(x1, x2);
            var maxX = Math.max(x1, x2);
            var minY = Math.min(y1, y2);
            var maxY = Math.max(y1, y2);
            var width = maxX - minX;
            var height = maxY - minY;
            return {
                width: width,
                height: height,
            };
        };
        return LineUpdater;
    }());

    var PathUpdater = /** @class */ (function () {
        function PathUpdater() {
        }
        PathUpdater.prototype.update = function (parsedStyle) {
            var path = parsedStyle.path;
            var _a = path.rect, width = _a.width, height = _a.height;
            return {
                width: width,
                height: height,
            };
        };
        return PathUpdater;
    }());

    var PolylineUpdater = /** @class */ (function () {
        function PolylineUpdater() {
        }
        PolylineUpdater.prototype.update = function (parsedStyle) {
            if (parsedStyle.points && isArray(parsedStyle.points.points)) {
                var points = parsedStyle.points.points;
                // FIXME: account for miter lineJoin
                var minX = Math.min.apply(Math, __spreadArray([], __read(points.map(function (point) { return point[0]; })), false));
                var maxX = Math.max.apply(Math, __spreadArray([], __read(points.map(function (point) { return point[0]; })), false));
                var minY = Math.min.apply(Math, __spreadArray([], __read(points.map(function (point) { return point[1]; })), false));
                var maxY = Math.max.apply(Math, __spreadArray([], __read(points.map(function (point) { return point[1]; })), false));
                var width = maxX - minX;
                var height = maxY - minY;
                return {
                    width: width,
                    height: height,
                };
            }
            return {
                width: 0,
                height: 0,
            };
        };
        return PolylineUpdater;
    }());

    var RectUpdater = /** @class */ (function () {
        function RectUpdater() {
        }
        RectUpdater.prototype.update = function (parsedStyle, object) {
            var img = parsedStyle.img, _a = parsedStyle.width, width = _a === void 0 ? 0 : _a, _b = parsedStyle.height, height = _b === void 0 ? 0 : _b;
            var contentWidth = width;
            var contentHeight = height;
            // resize with HTMLImageElement's size
            if (img && !isString(img)) {
                if (!contentWidth) {
                    contentWidth = img.width;
                    parsedStyle.width = contentWidth;
                }
                if (!contentHeight) {
                    contentHeight = img.height;
                    parsedStyle.height = contentHeight;
                }
            }
            return {
                width: contentWidth,
                height: contentHeight,
            };
        };
        return RectUpdater;
    }());

    var TextUpdater = /** @class */ (function () {
        function TextUpdater(globalRuntime) {
            this.globalRuntime = globalRuntime;
        }
        TextUpdater.prototype.isReadyToMeasure = function (parsedStyle, object) {
            var text = parsedStyle.text, textAlign = parsedStyle.textAlign, textBaseline = parsedStyle.textBaseline, fontSize = parsedStyle.fontSize, fontStyle = parsedStyle.fontStyle, fontWeight = parsedStyle.fontWeight, fontVariant = parsedStyle.fontVariant, lineWidth = parsedStyle.lineWidth;
            return (text &&
                fontSize &&
                fontStyle &&
                fontWeight &&
                fontVariant &&
                textAlign &&
                textBaseline &&
                !isNil(lineWidth));
        };
        TextUpdater.prototype.update = function (parsedStyle, object) {
            var _a, _b;
            var text = parsedStyle.text, textAlign = parsedStyle.textAlign, lineWidth = parsedStyle.lineWidth, textBaseline = parsedStyle.textBaseline, dx = parsedStyle.dx, dy = parsedStyle.dy;
            if (!this.isReadyToMeasure(parsedStyle, object)) {
                parsedStyle.metrics = {
                    font: '',
                    width: 0,
                    height: 0,
                    lines: [],
                    lineWidths: [],
                    lineHeight: 0,
                    maxLineWidth: 0,
                    fontProperties: {
                        ascent: 0,
                        descent: 0,
                        fontSize: 0,
                    },
                    lineMetrics: [],
                };
                return {
                    width: 0,
                    height: 0,
                    x: 0,
                    y: 0,
                    offsetX: 0,
                    offsetY: 0,
                };
            }
            var offscreenCanvas = (((_b = (_a = object === null || object === void 0 ? void 0 : object.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView) === null || _b === void 0 ? void 0 : _b.getConfig()) || {}).offscreenCanvas;
            var metrics = this.globalRuntime.textService.measureText(text, parsedStyle, offscreenCanvas);
            parsedStyle.metrics = metrics;
            var width = metrics.width, height = metrics.height, lineHeight = metrics.lineHeight, fontProperties = metrics.fontProperties;
            // anchor is left-top by default
            var halfExtents = [width / 2, height / 2, 0];
            // default 'left'
            var anchor = [0, 1];
            var lineXOffset = 0;
            if (textAlign === 'center' || textAlign === 'middle') {
                lineXOffset = lineWidth / 2;
                anchor = [0.5, 1];
            }
            else if (textAlign === 'right' || textAlign === 'end') {
                lineXOffset = lineWidth;
                anchor = [1, 1];
            }
            var lineYOffset = 0;
            if (textBaseline === 'middle') {
                // eslint-disable-next-line prefer-destructuring
                lineYOffset = halfExtents[1];
            }
            else if (textBaseline === 'top' || textBaseline === 'hanging') {
                lineYOffset = halfExtents[1] * 2;
            }
            else if (textBaseline === 'alphabetic') {
                // prevent calling getImageData for ascent metrics
                lineYOffset = this.globalRuntime.enableCSSParsing
                    ? lineHeight - fontProperties.ascent
                    : 0;
            }
            else if (textBaseline === 'bottom' || textBaseline === 'ideographic') {
                lineYOffset = 0;
            }
            // TODO: ideographic & bottom
            if (dx) {
                lineXOffset += dx;
            }
            if (dy) {
                lineYOffset += dy;
            }
            // update anchor
            parsedStyle.anchor = [anchor[0], anchor[1], 0];
            return {
                width: halfExtents[0] * 2,
                height: halfExtents[1] * 2,
                offsetX: lineXOffset,
                offsetY: lineYOffset,
            };
        };
        return TextUpdater;
    }());

    function isFederatedEvent(value) {
        return !!value.type;
    }
    /**
     * An DOM-compatible synthetic event implementation that is "forwarded" on behalf of an original
     * FederatedEvent or native Event.
     */
    var FederatedEvent = /** @class */ (function () {
        /**
         * The event boundary which manages this event. Propagation can only occur
         *  within the boundary's jurisdiction.
         */
        function FederatedEvent(manager) {
            /**
             * The propagation phase.
             * @see https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase
             */
            this.eventPhase = FederatedEvent.prototype.NONE;
            /**
             * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Event/bubbles
             */
            this.bubbles = true;
            /**
             * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Event/cancelBubble
             */
            this.cancelBubble = true;
            /**
             * @see https://developer.mozilla.org/en-US/docs/Web/API/Event/cancelable
             */
            this.cancelable = false;
            /** Flags whether the default response of the user agent was prevent through this event. */
            this.defaultPrevented = false;
            /** Flags whether propagation was stopped. */
            this.propagationStopped = false;
            /** Flags whether propagation was immediately stopped. */
            this.propagationImmediatelyStopped = false;
            /**
             * The coordinates of the evnet relative to the nearest DOM layer.
             * This is a non-standard property.
             */
            this.layer = new Point();
            /**
             * The coordinates of the event relative to the DOM document.
             * This is a non-standard property.
             * relative to the DOM document.
             * @see https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/pageX
             */
            this.page = new Point();
            /**
             * relative to Canvas, origin is left-top
             */
            this.canvas = new Point();
            /**
             * relative to Viewport, account for Camera
             */
            this.viewport = new Point();
            this.composed = false;
            this.NONE = 0;
            this.CAPTURING_PHASE = 1;
            this.AT_TARGET = 2;
            this.BUBBLING_PHASE = 3;
            this.manager = manager;
        }
        Object.defineProperty(FederatedEvent.prototype, "name", {
            /**
             * @deprecated
             */
            get: function () {
                return this.type;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(FederatedEvent.prototype, "layerX", {
            get: function () {
                return this.layer.x;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(FederatedEvent.prototype, "layerY", {
            get: function () {
                return this.layer.y;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(FederatedEvent.prototype, "pageX", {
            get: function () {
                return this.page.x;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(FederatedEvent.prototype, "pageY", {
            get: function () {
                return this.page.y;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(FederatedEvent.prototype, "x", {
            get: function () {
                return this.canvas.x;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(FederatedEvent.prototype, "y", {
            get: function () {
                return this.canvas.y;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(FederatedEvent.prototype, "canvasX", {
            get: function () {
                return this.canvas.x;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(FederatedEvent.prototype, "canvasY", {
            get: function () {
                return this.canvas.y;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(FederatedEvent.prototype, "viewportX", {
            get: function () {
                return this.viewport.x;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(FederatedEvent.prototype, "viewportY", {
            get: function () {
                return this.viewport.y;
            },
            enumerable: false,
            configurable: true
        });
        /**
         * The propagation path for this event
         * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Event/composedPath
         *
         * So composedPath()[0] represents the original target.
         * @see https://polymer-library.polymer-project.org/3.0/docs/devguide/events#retargeting
         */
        FederatedEvent.prototype.composedPath = function () {
            if (this.manager && (!this.path || this.path[0] !== this.target)) {
                this.path = this.target ? this.manager.propagationPath(this.target) : [];
            }
            return this.path;
        };
        Object.defineProperty(FederatedEvent.prototype, "propagationPath", {
            /**
             * @deprecated
             */
            get: function () {
                return this.composedPath();
            },
            enumerable: false,
            configurable: true
        });
        /**
         * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Event/preventDefault
         */
        FederatedEvent.prototype.preventDefault = function () {
            if (this.nativeEvent instanceof Event && this.nativeEvent.cancelable) {
                this.nativeEvent.preventDefault();
            }
            this.defaultPrevented = true;
        };
        /**
         * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Event/stopImmediatePropagation
         */
        FederatedEvent.prototype.stopImmediatePropagation = function () {
            this.propagationImmediatelyStopped = true;
        };
        /**
         * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Event/stopPropagation
         */
        FederatedEvent.prototype.stopPropagation = function () {
            this.propagationStopped = true;
        };
        /**
         * added for compatibility with DOM Event,
         * deprecated props and methods
         */
        FederatedEvent.prototype.initEvent = function () { };
        FederatedEvent.prototype.initUIEvent = function () { };
        FederatedEvent.prototype.clone = function () {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        return FederatedEvent;
    }());

    var FederatedMouseEvent = /** @class */ (function (_super) {
        __extends(FederatedMouseEvent, _super);
        function FederatedMouseEvent() {
            var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
            /**
             * The coordinates of the mouse event relative to the canvas.
             */
            _this.client = new Point();
            /**
             * The movement in this pointer relative to the last `mousemove` event.
             */
            _this.movement = new Point();
            /**
             * The offset of the pointer coordinates w.r.t. target DisplayObject in world space. This is
             * not supported at the moment.
             */
            _this.offset = new Point();
            /**
             * The pointer coordinates in world space.
             */
            _this.global = new Point();
            /**
             * The pointer coordinates in sceen space.
             */
            _this.screen = new Point();
            return _this;
        }
        Object.defineProperty(FederatedMouseEvent.prototype, "clientX", {
            get: function () {
                return this.client.x;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(FederatedMouseEvent.prototype, "clientY", {
            get: function () {
                return this.client.y;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(FederatedMouseEvent.prototype, "movementX", {
            get: function () {
                return this.movement.x;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(FederatedMouseEvent.prototype, "movementY", {
            get: function () {
                return this.movement.y;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(FederatedMouseEvent.prototype, "offsetX", {
            get: function () {
                return this.offset.x;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(FederatedMouseEvent.prototype, "offsetY", {
            get: function () {
                return this.offset.y;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(FederatedMouseEvent.prototype, "globalX", {
            get: function () {
                return this.global.x;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(FederatedMouseEvent.prototype, "globalY", {
            get: function () {
                return this.global.y;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(FederatedMouseEvent.prototype, "screenX", {
            get: function () {
                return this.screen.x;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(FederatedMouseEvent.prototype, "screenY", {
            get: function () {
                return this.screen.y;
            },
            enumerable: false,
            configurable: true
        });
        FederatedMouseEvent.prototype.getModifierState = function (key) {
            return ('getModifierState' in this.nativeEvent &&
                this.nativeEvent.getModifierState(key));
        };
        FederatedMouseEvent.prototype.initMouseEvent = function () {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        return FederatedMouseEvent;
    }(FederatedEvent));

    // @ts-ignore
    var FederatedPointerEvent = /** @class */ (function (_super) {
        __extends(FederatedPointerEvent, _super);
        function FederatedPointerEvent() {
            var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
            /**
             * The width of the pointer's contact along the x-axis, measured in CSS pixels.
             * radiusX of TouchEvents will be represented by this value.
             *
             * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width
             */
            _this.width = 0;
            /**
             * The height of the pointer's contact along the y-axis, measured in CSS pixels.
             * radiusY of TouchEvents will be represented by this value.
             *
             * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height
             */
            _this.height = 0;
            /**
             * Indicates whether or not the pointer device that created the event is the primary pointer.
             *
             * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary
             */
            _this.isPrimary = false;
            return _this;
        }
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/getCoalescedEvents
         */
        FederatedPointerEvent.prototype.getCoalescedEvents = function () {
            if (this.type === 'pointermove' ||
                this.type === 'mousemove' ||
                this.type === 'touchmove') {
                // @ts-ignore
                return [this];
            }
            return [];
        };
        /**
         * @see https://chromestatus.com/feature/5765569655603200
         */
        FederatedPointerEvent.prototype.getPredictedEvents = function () {
            throw new Error('getPredictedEvents is not supported!');
        };
        /**
         * @see https://github.com/antvis/G/issues/1115
         * We currently reuses event objects in the event system,
         * avoiding the creation of a large number of event objects.
         * Reused objects are only used to carry different data,
         * such as coordinate information, native event objects,
         * and therefore the lifecycle is limited to the event handler,
         * which can lead to unintended consequences if an attempt is made to cache the entire event object.
         *
         * Therefore, while keeping the above performance considerations in mind, it is possible to provide a clone method that creates a new object when the user really wants to cache it, e.g.
         */
        FederatedPointerEvent.prototype.clone = function () {
            return this.manager.clonePointerEvent(this);
        };
        return FederatedPointerEvent;
    }(FederatedMouseEvent));

    // @ts-ignore
    var FederatedWheelEvent = /** @class */ (function (_super) {
        __extends(FederatedWheelEvent, _super);
        function FederatedWheelEvent() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        FederatedWheelEvent.prototype.clone = function () {
            return this.manager.cloneWheelEvent(this);
        };
        return FederatedWheelEvent;
    }(FederatedMouseEvent));

    /**
     * @see https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events
     *
     * @example
      const event = new CustomEvent('build', { detail: { prop1: 'xx' } });
      circle.addEventListener('build', (e) => {
        e.target; // circle
        e.detail; // { prop1: 'xx' }
      });

      circle.dispatchEvent(event);
     */
    var CustomEvent = /** @class */ (function (_super) {
        __extends(CustomEvent, _super);
        // eslint-disable-next-line @typescript-eslint/ban-types
        function CustomEvent(eventName, object) {
            var _this = _super.call(this, null) || this;
            _this.type = eventName;
            _this.detail = object;
            // compatible with G 3.0
            Object.assign(_this, object);
            return _this;
        }
        return CustomEvent;
    }(FederatedEvent));

    var DELEGATION_SPLITTER = ':';
    /**
     * Objects that can receive events and may have listeners for them.
     * eg. Element, Canvas, DisplayObject
     * @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
     */
    var EventTarget = /** @class */ (function () {
        function EventTarget() {
            /**
             * event emitter
             */
            this.emitter = new eventemitter3();
        }
        /**
         * @deprecated
         * @alias addEventListener
         */
        EventTarget.prototype.on = function (type, listener, options) {
            this.addEventListener(type, listener, options);
            return this;
        };
        /**
         * support `capture` & `once` in options
         * @see https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
         */
        EventTarget.prototype.addEventListener = function (type, listener, options) {
            var capture = (isBoolean(options) && options) || (isObject(options) && options.capture);
            var once = isObject(options) && options.once;
            var context = isFunction$1(listener) ? undefined : listener;
            // compatible with G 3.0
            // support using delegate name in event type, eg. 'node:click'
            var useDelegatedName = false;
            var delegatedName = '';
            if (type.indexOf(DELEGATION_SPLITTER) > -1) {
                var _a = __read(type.split(DELEGATION_SPLITTER), 2), name_1 = _a[0], eventType = _a[1];
                type = eventType;
                delegatedName = name_1;
                useDelegatedName = true;
            }
            type = capture ? "".concat(type, "capture") : type;
            listener = isFunction$1(listener) ? listener : listener.handleEvent;
            // compatible with G 3.0
            if (useDelegatedName) {
                var originListener_1 = listener;
                listener = function () {
                    var _a;
                    var args = [];
                    for (var _i = 0; _i < arguments.length; _i++) {
                        args[_i] = arguments[_i];
                    }
                    if (((_a = args[0].target) === null || _a === void 0 ? void 0 : _a.name) !== delegatedName) {
                        return;
                    }
                    // @ts-ignore
                    originListener_1.apply(void 0, __spreadArray([], __read(args), false));
                };
            }
            if (once) {
                this.emitter.once(type, listener, context);
            }
            else {
                this.emitter.on(type, listener, context);
            }
            return this;
        };
        /**
         * @deprecated
         * @alias removeEventListener
         */
        EventTarget.prototype.off = function (type, listener, options) {
            if (type) {
                this.removeEventListener(type, listener, options);
            }
            else {
                // remove all listeners
                this.removeAllEventListeners();
            }
            return this;
        };
        EventTarget.prototype.removeAllEventListeners = function () {
            this.emitter.removeAllListeners();
        };
        EventTarget.prototype.removeEventListener = function (type, listener, options) {
            var capture = (isBoolean(options) && options) || (isObject(options) && options.capture);
            var context = isFunction$1(listener) ? undefined : listener;
            type = capture ? "".concat(type, "capture") : type;
            listener = isFunction$1(listener) ? listener : listener === null || listener === void 0 ? void 0 : listener.handleEvent;
            this.emitter.off(type, listener, context);
            return this;
        };
        /**
         * @deprecated
         * @alias dispatchEvent
         */
        // eslint-disable-next-line @typescript-eslint/ban-types
        EventTarget.prototype.emit = function (eventName, object) {
            this.dispatchEvent(new CustomEvent(eventName, object));
        };
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent
         */
        EventTarget.prototype.dispatchEvent = function (e, skipPropagate) {
            var _a, _b;
            if (skipPropagate === void 0) { skipPropagate = false; }
            if (!isFederatedEvent(e)) {
                throw new Error('DisplayObject cannot propagate events outside of the Federated Events API');
            }
            // should account for Element / Document / Canvas
            var canvas;
            // @ts-ignore
            if (this.document) {
                canvas = this;
                // @ts-ignore
            }
            else if (this.defaultView) {
                canvas = this.defaultView;
            }
            else {
                canvas = (_a = this.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
            }
            // assign event manager
            if (canvas) {
                e.manager = canvas.getEventService() || null;
                if (!e.manager) {
                    return false;
                }
                e.defaultPrevented = false;
                e.path = [];
                if (!skipPropagate) {
                    e.target = this;
                }
                (_b = e.manager) === null || _b === void 0 ? void 0 : _b.dispatchEvent(e, e.type, skipPropagate);
            }
            return !e.defaultPrevented;
        };
        return EventTarget;
    }());

    /**
     * @see https://developer.mozilla.org/en-US/docs/Web/API/Node
     */
    var Node = /** @class */ (function (_super) {
        __extends(Node, _super);
        function Node() {
            var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
            _this.shadow = false;
            /**
             * points to canvas.document
             * @see https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument
             */
            _this.ownerDocument = null;
            /**
             * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Node/isConnected
             * @example
                circle.isConnected; // false
                canvas.appendChild(circle);
                circle.isConnected; // true
             */
            _this.isConnected = false;
            /**
             * Returns node's node document's document base URL.
             * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Node
             */
            _this.baseURI = '';
            /**
             * Returns the children.
             * @see https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes
             */
            _this.childNodes = [];
            /**
             * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType
             */
            _this.nodeType = 0;
            /**
             * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeName
             */
            _this.nodeName = '';
            /**
             * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeValue
             */
            _this.nodeValue = null;
            /**
             * @see https://developer.mozilla.org/en-US/docs/Web/API/ParentNode
             */
            _this.parentNode = null;
            return _this;
        }
        Node.isNode = function (target) {
            return !!target.childNodes;
        };
        Object.defineProperty(Node.prototype, "textContent", {
            /**
             * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Node/textContent
             */
            get: function () {
                var e_1, _a;
                var out = '';
                if (this.nodeName === Shape.TEXT) {
                    // @ts-ignore
                    out += this.style.text;
                }
                try {
                    for (var _b = __values(this.childNodes), _c = _b.next(); !_c.done; _c = _b.next()) {
                        var child = _c.value;
                        if (child.nodeName === Shape.TEXT) {
                            out += child.nodeValue;
                        }
                        else {
                            out += child.textContent;
                        }
                    }
                }
                catch (e_1_1) { e_1 = { error: e_1_1 }; }
                finally {
                    try {
                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                    }
                    finally { if (e_1) throw e_1.error; }
                }
                return out;
            },
            set: function (content) {
                var _this = this;
                // remove all children
                this.childNodes.slice().forEach(function (child) {
                    _this.removeChild(child);
                });
                if (this.nodeName === Shape.TEXT) {
                    // @ts-ignore
                    this.style.text = "".concat(content);
                }
            },
            enumerable: false,
            configurable: true
        });
        /**
         * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Node/getRootNode
         */
        Node.prototype.getRootNode = function (opts) {
            if (opts === void 0) { opts = {}; }
            if (this.parentNode) {
                return this.parentNode.getRootNode(opts);
            }
            if (opts.composed && this.host) {
                return this.host.getRootNode(opts);
            }
            return this;
        };
        Node.prototype.hasChildNodes = function () {
            return this.childNodes.length > 0;
        };
        Node.prototype.isDefaultNamespace = function (namespace) {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        Node.prototype.lookupNamespaceURI = function (prefix) {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        Node.prototype.lookupPrefix = function (namespace) {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        Node.prototype.normalize = function () {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        /**
         * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Node/isEqualNode
         */
        Node.prototype.isEqualNode = function (otherNode) {
            // TODO: compare 2 nodes, not sameness
            return this === otherNode;
        };
        Node.prototype.isSameNode = function (otherNode) {
            return this.isEqualNode(otherNode);
        };
        Object.defineProperty(Node.prototype, "parent", {
            /**
             * @deprecated
             * @alias parentNode
             */
            get: function () {
                return this.parentNode;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Node.prototype, "parentElement", {
            get: function () {
                return null;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Node.prototype, "nextSibling", {
            get: function () {
                return null;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Node.prototype, "previousSibling", {
            get: function () {
                return null;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Node.prototype, "firstChild", {
            get: function () {
                return this.childNodes.length > 0 ? this.childNodes[0] : null;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Node.prototype, "lastChild", {
            get: function () {
                return this.childNodes.length > 0
                    ? this.childNodes[this.childNodes.length - 1]
                    : null;
            },
            enumerable: false,
            configurable: true
        });
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition
         * @see https://github.com/b-fuze/deno-dom/blob/master/src/dom/node.ts#L338
         */
        Node.prototype.compareDocumentPosition = function (other) {
            var _a;
            if (other === this) {
                // same node
                return 0;
            }
            // if (!(other instanceof Node)) {
            //   throw new TypeError(
            //     'Node.compareDocumentPosition: Argument 1 does not implement interface Node.',
            //   );
            // }
            var node1Root = other;
            // eslint-disable-next-line @typescript-eslint/no-this-alias
            var node2Root = this;
            var node1Hierarchy = [node1Root];
            var node2Hierarchy = [node2Root];
            while ((_a = node1Root.parentNode) !== null && _a !== void 0 ? _a : node2Root.parentNode) {
                node1Root = node1Root.parentNode
                    ? (node1Hierarchy.push(node1Root.parentNode), node1Root.parentNode)
                    : node1Root;
                node2Root = node2Root.parentNode
                    ? (node2Hierarchy.push(node2Root.parentNode), node2Root.parentNode)
                    : node2Root;
            }
            // Check if they don't share the same root node
            if (node1Root !== node2Root) {
                return (Node.DOCUMENT_POSITION_DISCONNECTED |
                    Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC |
                    Node.DOCUMENT_POSITION_PRECEDING);
            }
            var longerHierarchy = node1Hierarchy.length > node2Hierarchy.length
                ? node1Hierarchy
                : node2Hierarchy;
            var shorterHierarchy = longerHierarchy === node1Hierarchy ? node2Hierarchy : node1Hierarchy;
            // Check if either is a container of the other
            if (longerHierarchy[longerHierarchy.length - shorterHierarchy.length] ===
                shorterHierarchy[0]) {
                return longerHierarchy === node1Hierarchy
                    ? // other is a child of this
                        Node.DOCUMENT_POSITION_CONTAINED_BY | Node.DOCUMENT_POSITION_FOLLOWING
                    : // this is a child of other
                        Node.DOCUMENT_POSITION_CONTAINS | Node.DOCUMENT_POSITION_PRECEDING;
            }
            // Find their first common ancestor and see whether they
            // are preceding or following
            var longerStart = longerHierarchy.length - shorterHierarchy.length;
            for (var i = shorterHierarchy.length - 1; i >= 0; i--) {
                var shorterHierarchyNode = shorterHierarchy[i];
                var longerHierarchyNode = longerHierarchy[longerStart + i];
                // We found the first common ancestor
                if (longerHierarchyNode !== shorterHierarchyNode) {
                    var siblings = shorterHierarchyNode.parentNode.childNodes;
                    if (siblings.indexOf(shorterHierarchyNode) <
                        siblings.indexOf(longerHierarchyNode)) {
                        // Shorter is before longer
                        if (shorterHierarchy === node1Hierarchy) {
                            // Other is before this
                            return Node.DOCUMENT_POSITION_PRECEDING;
                        }
                        else {
                            // This is before other
                            return Node.DOCUMENT_POSITION_FOLLOWING;
                        }
                    }
                    else {
                        // Longer is before shorter
                        if (longerHierarchy === node1Hierarchy) {
                            // Other is before this
                            return Node.DOCUMENT_POSITION_PRECEDING;
                        }
                        else {
                            // Other is after this
                            return Node.DOCUMENT_POSITION_FOLLOWING;
                        }
                    }
                }
            }
            return Node.DOCUMENT_POSITION_FOLLOWING;
        };
        /**
         * @deprecated
         * @alias contains
         */
        Node.prototype.contain = function (other) {
            return this.contains(other);
        };
        Node.prototype.contains = function (other) {
            // the node itself, one of its direct children
            var tmp = other;
            // @see https://developer.mozilla.org/en-US/docs/Web/API/Node/contains
            while (tmp && this !== tmp) {
                tmp = tmp.parentNode;
            }
            return !!tmp;
        };
        Node.prototype.getAncestor = function (n) {
            // eslint-disable-next-line @typescript-eslint/no-this-alias
            var temp = this;
            while (n > 0 && temp) {
                temp = temp.parentNode;
                n--;
            }
            return temp;
        };
        Node.prototype.forEach = function (callback, assigned) {
            if (assigned === void 0) { assigned = false; }
            if (!callback(this)) {
                (assigned ? this.childNodes.slice() : this.childNodes).forEach(function (child) {
                    child.forEach(callback);
                });
            }
        };
        /**
         * Both nodes are in different documents or different trees in the same document.
         */
        Node.DOCUMENT_POSITION_DISCONNECTED = 1;
        /**
         * otherNode precedes the node in either a pre-order depth-first traversal
         * of a tree containing both (e.g., as an ancestor or previous sibling or a descendant of a previous sibling or previous sibling of an ancestor) or (if they are disconnected) in an arbitrary but consistent ordering.
         */
        Node.DOCUMENT_POSITION_PRECEDING = 2;
        /**
         * otherNode follows the node in either a pre-order depth-first traversal of a tree containing both (e.g., as a descendant or following sibling or a descendant of a following sibling or following sibling of an ancestor) or (if they are disconnected) in an arbitrary but consistent ordering.
         */
        Node.DOCUMENT_POSITION_FOLLOWING = 4;
        /**
         * otherNode is an ancestor of the node.
         */
        Node.DOCUMENT_POSITION_CONTAINS = 8;
        /**
         * otherNode is a descendant of the node.
         */
        Node.DOCUMENT_POSITION_CONTAINED_BY = 16;
        /**
         * The result relies upon arbitrary and/or implementation-specific behavior and is not guaranteed to be portable.
         */
        Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC = 32;
        return Node;
    }(EventTarget));

    var PROPAGATION_LIMIT = 2048;
    var EventService = /** @class */ (function () {
        function EventService(globalRuntime, context) {
            var _this = this;
            this.globalRuntime = globalRuntime;
            this.context = context;
            this.emitter = new eventemitter3();
            /**
             * Store HTML elements in current canvas.
             */
            this.nativeHTMLMap = new WeakMap();
            this.cursor = 'default';
            this.mappingTable = {};
            this.mappingState = {
                trackingData: {},
            };
            this.eventPool = new Map();
            this.tmpMatrix = create$1();
            this.tmpVec3 = create$2();
            this.onPointerDown = function (from) {
                var e = _this.createPointerEvent(from);
                _this.dispatchEvent(e, 'pointerdown');
                if (e.pointerType === 'touch') {
                    _this.dispatchEvent(e, 'touchstart');
                }
                else if (e.pointerType === 'mouse' || e.pointerType === 'pen') {
                    var isRightButton = e.button === 2;
                    _this.dispatchEvent(e, isRightButton ? 'rightdown' : 'mousedown');
                }
                var trackingData = _this.trackingData(from.pointerId);
                trackingData.pressTargetsByButton[from.button] = e.composedPath();
                _this.freeEvent(e);
            };
            this.onPointerUp = function (from) {
                var _a;
                var now = clock.now();
                var e = _this.createPointerEvent(from, undefined, undefined, _this.context.config.alwaysTriggerPointerEventOnCanvas
                    ? _this.rootTarget
                    : undefined);
                _this.dispatchEvent(e, 'pointerup');
                if (e.pointerType === 'touch') {
                    _this.dispatchEvent(e, 'touchend');
                }
                else if (e.pointerType === 'mouse' || e.pointerType === 'pen') {
                    var isRightButton = e.button === 2;
                    _this.dispatchEvent(e, isRightButton ? 'rightup' : 'mouseup');
                }
                var trackingData = _this.trackingData(from.pointerId);
                var pressTarget = _this.findMountedTarget(trackingData.pressTargetsByButton[from.button]);
                var clickTarget = pressTarget;
                // pointerupoutside only bubbles. It only bubbles upto the parent that doesn't contain
                // the pointerup location.
                if (pressTarget && !e.composedPath().includes(pressTarget)) {
                    var currentTarget = pressTarget;
                    while (currentTarget && !e.composedPath().includes(currentTarget)) {
                        e.currentTarget = currentTarget;
                        _this.notifyTarget(e, 'pointerupoutside');
                        if (e.pointerType === 'touch') {
                            _this.notifyTarget(e, 'touchendoutside');
                        }
                        else if (e.pointerType === 'mouse' || e.pointerType === 'pen') {
                            var isRightButton = e.button === 2;
                            _this.notifyTarget(e, isRightButton ? 'rightupoutside' : 'mouseupoutside');
                        }
                        if (Node.isNode(currentTarget)) {
                            currentTarget = currentTarget.parentNode;
                        }
                    }
                    delete trackingData.pressTargetsByButton[from.button];
                    // currentTarget is the most specific ancestor holding both the pointerdown and pointerup
                    // targets. That is - it's our click target!
                    clickTarget = currentTarget;
                }
                if (clickTarget) {
                    var clickEvent = _this.clonePointerEvent(e, 'click');
                    clickEvent.target = clickTarget;
                    clickEvent.path = [];
                    if (!trackingData.clicksByButton[from.button]) {
                        trackingData.clicksByButton[from.button] = {
                            clickCount: 0,
                            target: clickEvent.target,
                            timeStamp: now,
                        };
                    }
                    var clickHistory = trackingData.clicksByButton[from.button];
                    if (clickHistory.target === clickEvent.target &&
                        now - clickHistory.timeStamp < 200) {
                        ++clickHistory.clickCount;
                    }
                    else {
                        clickHistory.clickCount = 1;
                    }
                    clickHistory.target = clickEvent.target;
                    clickHistory.timeStamp = now;
                    clickEvent.detail = clickHistory.clickCount;
                    // @see https://github.com/antvis/G/issues/1091
                    if (!((_a = e.detail) === null || _a === void 0 ? void 0 : _a.preventClick)) {
                        if (!_this.context.config.useNativeClickEvent &&
                            (clickEvent.pointerType === 'mouse' ||
                                clickEvent.pointerType === 'touch')) {
                            _this.dispatchEvent(clickEvent, 'click');
                        }
                        _this.dispatchEvent(clickEvent, 'pointertap');
                    }
                    _this.freeEvent(clickEvent);
                }
                _this.freeEvent(e);
            };
            this.onPointerMove = function (from) {
                var e = _this.createPointerEvent(from, undefined, undefined, _this.context.config.alwaysTriggerPointerEventOnCanvas
                    ? _this.rootTarget
                    : undefined);
                var isMouse = e.pointerType === 'mouse' || e.pointerType === 'pen';
                var trackingData = _this.trackingData(from.pointerId);
                var outTarget = _this.findMountedTarget(trackingData.overTargets);
                // First pointerout/pointerleave
                if (trackingData.overTargets && outTarget !== e.target) {
                    // pointerout always occurs on the overTarget when the pointer hovers over another element.
                    var outType = from.type === 'mousemove' ? 'mouseout' : 'pointerout';
                    var outEvent = _this.createPointerEvent(from, outType, outTarget || undefined);
                    _this.dispatchEvent(outEvent, 'pointerout');
                    if (isMouse)
                        _this.dispatchEvent(outEvent, 'mouseout');
                    // If the pointer exits overTarget and its descendants, then a pointerleave event is also fired. This event
                    // is dispatched to all ancestors that no longer capture the pointer.
                    if (!e.composedPath().includes(outTarget)) {
                        var leaveEvent = _this.createPointerEvent(from, 'pointerleave', outTarget || undefined);
                        leaveEvent.eventPhase = leaveEvent.AT_TARGET;
                        while (leaveEvent.target &&
                            !e.composedPath().includes(leaveEvent.target)) {
                            leaveEvent.currentTarget = leaveEvent.target;
                            _this.notifyTarget(leaveEvent);
                            if (isMouse) {
                                _this.notifyTarget(leaveEvent, 'mouseleave');
                            }
                            if (Node.isNode(leaveEvent.target)) {
                                leaveEvent.target = leaveEvent.target.parentNode;
                            }
                        }
                        _this.freeEvent(leaveEvent);
                    }
                    _this.freeEvent(outEvent);
                }
                // Then pointerover
                if (outTarget !== e.target) {
                    // pointerover always occurs on the new overTarget
                    var overType = from.type === 'mousemove' ? 'mouseover' : 'pointerover';
                    var overEvent = _this.clonePointerEvent(e, overType); // clone faster
                    _this.dispatchEvent(overEvent, 'pointerover');
                    if (isMouse)
                        _this.dispatchEvent(overEvent, 'mouseover');
                    // Probe whether the newly hovered Node is an ancestor of the original overTarget.
                    var overTargetAncestor = outTarget && Node.isNode(outTarget) && outTarget.parentNode;
                    while (overTargetAncestor &&
                        overTargetAncestor !==
                            (Node.isNode(_this.rootTarget) && _this.rootTarget.parentNode)) {
                        if (overTargetAncestor === e.target)
                            break;
                        overTargetAncestor = overTargetAncestor.parentNode;
                    }
                    // The pointer has entered a non-ancestor of the original overTarget. This means we need a pointerentered
                    // event.
                    var didPointerEnter = !overTargetAncestor ||
                        overTargetAncestor ===
                            (Node.isNode(_this.rootTarget) && _this.rootTarget.parentNode);
                    if (didPointerEnter) {
                        var enterEvent = _this.clonePointerEvent(e, 'pointerenter');
                        enterEvent.eventPhase = enterEvent.AT_TARGET;
                        while (enterEvent.target &&
                            enterEvent.target !== outTarget &&
                            enterEvent.target !==
                                (Node.isNode(_this.rootTarget) && _this.rootTarget.parentNode)) {
                            enterEvent.currentTarget = enterEvent.target;
                            _this.notifyTarget(enterEvent);
                            if (isMouse)
                                _this.notifyTarget(enterEvent, 'mouseenter');
                            if (Node.isNode(enterEvent.target)) {
                                enterEvent.target = enterEvent.target.parentNode;
                            }
                        }
                        _this.freeEvent(enterEvent);
                    }
                    _this.freeEvent(overEvent);
                }
                // Then pointermove
                _this.dispatchEvent(e, 'pointermove');
                if (e.pointerType === 'touch')
                    _this.dispatchEvent(e, 'touchmove');
                if (isMouse) {
                    _this.dispatchEvent(e, 'mousemove');
                    _this.cursor = _this.getCursor(e.target);
                }
                trackingData.overTargets = e.composedPath();
                _this.freeEvent(e);
            };
            this.onPointerOut = function (from) {
                var trackingData = _this.trackingData(from.pointerId);
                if (trackingData.overTargets) {
                    var isMouse = from.pointerType === 'mouse' || from.pointerType === 'pen';
                    var outTarget = _this.findMountedTarget(trackingData.overTargets);
                    // pointerout first
                    var outEvent = _this.createPointerEvent(from, 'pointerout', outTarget || undefined);
                    _this.dispatchEvent(outEvent);
                    if (isMouse)
                        _this.dispatchEvent(outEvent, 'mouseout');
                    // pointerleave(s) are also dispatched b/c the pointer must've left rootTarget and its descendants to
                    // get an upstream pointerout event (upstream events do not know rootTarget has descendants).
                    var leaveEvent = _this.createPointerEvent(from, 'pointerleave', outTarget || undefined);
                    leaveEvent.eventPhase = leaveEvent.AT_TARGET;
                    while (leaveEvent.target &&
                        leaveEvent.target !==
                            (Node.isNode(_this.rootTarget) && _this.rootTarget.parentNode)) {
                        leaveEvent.currentTarget = leaveEvent.target;
                        _this.notifyTarget(leaveEvent);
                        if (isMouse) {
                            _this.notifyTarget(leaveEvent, 'mouseleave');
                        }
                        if (Node.isNode(leaveEvent.target)) {
                            leaveEvent.target = leaveEvent.target.parentNode;
                        }
                    }
                    trackingData.overTargets = null;
                    _this.freeEvent(outEvent);
                    _this.freeEvent(leaveEvent);
                }
                _this.cursor = null;
            };
            this.onPointerOver = function (from) {
                var trackingData = _this.trackingData(from.pointerId);
                var e = _this.createPointerEvent(from);
                var isMouse = e.pointerType === 'mouse' || e.pointerType === 'pen';
                _this.dispatchEvent(e, 'pointerover');
                if (isMouse)
                    _this.dispatchEvent(e, 'mouseover');
                if (e.pointerType === 'mouse')
                    _this.cursor = _this.getCursor(e.target);
                // pointerenter events must be fired since the pointer entered from upstream.
                var enterEvent = _this.clonePointerEvent(e, 'pointerenter');
                enterEvent.eventPhase = enterEvent.AT_TARGET;
                while (enterEvent.target &&
                    enterEvent.target !==
                        (Node.isNode(_this.rootTarget) && _this.rootTarget.parentNode)) {
                    enterEvent.currentTarget = enterEvent.target;
                    _this.notifyTarget(enterEvent);
                    if (isMouse) {
                        // mouseenter should not bubble
                        // @see https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event#usage_notes
                        _this.notifyTarget(enterEvent, 'mouseenter');
                    }
                    if (Node.isNode(enterEvent.target)) {
                        enterEvent.target = enterEvent.target.parentNode;
                    }
                }
                trackingData.overTargets = e.composedPath();
                _this.freeEvent(e);
                _this.freeEvent(enterEvent);
            };
            this.onPointerUpOutside = function (from) {
                var trackingData = _this.trackingData(from.pointerId);
                var pressTarget = _this.findMountedTarget(trackingData.pressTargetsByButton[from.button]);
                var e = _this.createPointerEvent(from);
                if (pressTarget) {
                    var currentTarget = pressTarget;
                    while (currentTarget) {
                        e.currentTarget = currentTarget;
                        _this.notifyTarget(e, 'pointerupoutside');
                        if (e.pointerType === 'touch') ;
                        else if (e.pointerType === 'mouse' || e.pointerType === 'pen') {
                            _this.notifyTarget(e, e.button === 2 ? 'rightupoutside' : 'mouseupoutside');
                        }
                        if (Node.isNode(currentTarget)) {
                            currentTarget = currentTarget.parentNode;
                        }
                    }
                    delete trackingData.pressTargetsByButton[from.button];
                }
                _this.freeEvent(e);
            };
            this.onWheel = function (from) {
                var wheelEvent = _this.createWheelEvent(from);
                _this.dispatchEvent(wheelEvent);
                _this.freeEvent(wheelEvent);
            };
            this.onClick = function (from) {
                if (_this.context.config.useNativeClickEvent) {
                    var e = _this.createPointerEvent(from);
                    _this.dispatchEvent(e);
                    _this.freeEvent(e);
                }
            };
            this.onPointerCancel = function (from) {
                var e = _this.createPointerEvent(from, undefined, undefined, _this.context.config.alwaysTriggerPointerEventOnCanvas
                    ? _this.rootTarget
                    : undefined);
                _this.dispatchEvent(e);
                _this.freeEvent(e);
            };
        }
        EventService.prototype.init = function () {
            this.rootTarget = this.context.renderingContext.root.parentNode; // document
            this.addEventMapping('pointerdown', this.onPointerDown);
            this.addEventMapping('pointerup', this.onPointerUp);
            this.addEventMapping('pointermove', this.onPointerMove);
            this.addEventMapping('pointerout', this.onPointerOut);
            this.addEventMapping('pointerleave', this.onPointerOut);
            this.addEventMapping('pointercancel', this.onPointerCancel);
            this.addEventMapping('pointerover', this.onPointerOver);
            this.addEventMapping('pointerupoutside', this.onPointerUpOutside);
            this.addEventMapping('wheel', this.onWheel);
            this.addEventMapping('click', this.onClick);
        };
        EventService.prototype.destroy = function () {
            this.emitter.removeAllListeners();
            this.mappingTable = {};
            this.mappingState = {};
            this.eventPool.clear();
        };
        EventService.prototype.client2Viewport = function (client) {
            var bbox = this.context.contextService.getBoundingClientRect();
            return new Point(client.x - ((bbox === null || bbox === void 0 ? void 0 : bbox.left) || 0), client.y - ((bbox === null || bbox === void 0 ? void 0 : bbox.top) || 0));
        };
        EventService.prototype.viewport2Client = function (canvas) {
            var bbox = this.context.contextService.getBoundingClientRect();
            return new Point(canvas.x + ((bbox === null || bbox === void 0 ? void 0 : bbox.left) || 0), canvas.y + ((bbox === null || bbox === void 0 ? void 0 : bbox.top) || 0));
        };
        EventService.prototype.viewport2Canvas = function (_a) {
            var x = _a.x, y = _a.y;
            var canvas = this.rootTarget.defaultView;
            var camera = canvas.getCamera();
            var _b = this.context.config, width = _b.width, height = _b.height;
            var projectionMatrixInverse = camera.getPerspectiveInverse();
            var worldMatrix = camera.getWorldTransform();
            var vpMatrix = multiply(this.tmpMatrix, worldMatrix, projectionMatrixInverse);
            var viewport = set$1(this.tmpVec3, (x / width) * 2 - 1, (1 - y / height) * 2 - 1, 0);
            transformMat4(viewport, viewport, vpMatrix);
            return new Point(viewport[0], viewport[1]);
        };
        EventService.prototype.canvas2Viewport = function (canvasP) {
            var canvas = this.rootTarget.defaultView;
            var camera = canvas.getCamera();
            // World -> Clip
            var projectionMatrix = camera.getPerspective();
            var viewMatrix = camera.getViewTransform();
            var vpMatrix = multiply(this.tmpMatrix, projectionMatrix, viewMatrix);
            var clip = set$1(this.tmpVec3, canvasP.x, canvasP.y, 0);
            transformMat4(this.tmpVec3, this.tmpVec3, vpMatrix);
            // Clip -> NDC -> Viewport, flip Y
            var _a = this.context.config, width = _a.width, height = _a.height;
            return new Point(((clip[0] + 1) / 2) * width, (1 - (clip[1] + 1) / 2) * height);
        };
        EventService.prototype.setPickHandler = function (pickHandler) {
            this.pickHandler = pickHandler;
        };
        EventService.prototype.addEventMapping = function (type, fn) {
            if (!this.mappingTable[type]) {
                this.mappingTable[type] = [];
            }
            this.mappingTable[type].push({
                fn: fn,
                priority: 0,
            });
            this.mappingTable[type].sort(function (a, b) { return a.priority - b.priority; });
        };
        EventService.prototype.mapEvent = function (e) {
            if (!this.rootTarget) {
                return;
            }
            var mappers = this.mappingTable[e.type];
            if (mappers) {
                for (var i = 0, j = mappers.length; i < j; i++) {
                    mappers[i].fn(e);
                }
            }
            else {
                console.warn("[EventService]: Event mapping not defined for ".concat(e.type));
            }
        };
        EventService.prototype.dispatchEvent = function (e, type, skipPropagate) {
            // Canvas should skip
            if (!skipPropagate) {
                e.propagationStopped = false;
                e.propagationImmediatelyStopped = false;
                this.propagate(e, type);
            }
            else {
                // target phase
                e.eventPhase = e.AT_TARGET;
                var canvas = this.rootTarget.defaultView || null;
                e.currentTarget = canvas;
                this.notifyListeners(e, type);
            }
            this.emitter.emit(type || e.type, e);
        };
        EventService.prototype.propagate = function (e, type) {
            if (!e.target) {
                return;
            }
            // [target, parent, root, Canvas]
            var composedPath = e.composedPath();
            // event flow: capture -> target -> bubbling
            // capture phase
            e.eventPhase = e.CAPTURING_PHASE;
            for (var i = composedPath.length - 1; i >= 1; i--) {
                e.currentTarget = composedPath[i];
                this.notifyTarget(e, type);
                if (e.propagationStopped || e.propagationImmediatelyStopped)
                    return;
            }
            // target phase
            e.eventPhase = e.AT_TARGET;
            e.currentTarget = e.target;
            this.notifyTarget(e, type);
            if (e.propagationStopped || e.propagationImmediatelyStopped)
                return;
            // find current target in composed path
            var index = composedPath.indexOf(e.currentTarget);
            // bubbling phase
            e.eventPhase = e.BUBBLING_PHASE;
            for (var i = index + 1; i < composedPath.length; i++) {
                e.currentTarget = composedPath[i];
                this.notifyTarget(e, type);
                if (e.propagationStopped || e.propagationImmediatelyStopped)
                    return;
            }
        };
        EventService.prototype.propagationPath = function (target) {
            var propagationPath = [target];
            var canvas = this.rootTarget.defaultView || null;
            if (canvas && canvas === target) {
                propagationPath.unshift(canvas.document);
                return propagationPath;
            }
            for (var i = 0; i < PROPAGATION_LIMIT && target !== this.rootTarget; i++) {
                // if (Node.isNode(target) && !target.parentNode) {
                //   throw new Error('Cannot find propagation path to disconnected target');
                // }
                if (Node.isNode(target) && target.parentNode) {
                    // [target, parent, parent, root]
                    propagationPath.push(target.parentNode);
                    target = target.parentNode;
                }
            }
            if (canvas) {
                // @ts-ignore
                propagationPath.push(canvas);
            }
            return propagationPath;
        };
        EventService.prototype.hitTest = function (position) {
            var viewportX = position.viewportX, viewportY = position.viewportY;
            var _a = this.context.config, width = _a.width, height = _a.height, disableHitTesting = _a.disableHitTesting;
            // outside canvas
            if (viewportX < 0 ||
                viewportY < 0 ||
                viewportX > width ||
                viewportY > height) {
                return null;
            }
            return ((!disableHitTesting && this.pickHandler(position)) ||
                this.rootTarget || // return Document
                null);
        };
        /**
         * whether the native event trigger came from Canvas,
         * should account for HTML shape
         */
        EventService.prototype.isNativeEventFromCanvas = function ($el, nativeEvent) {
            var target = nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.target;
            // Get event target inside a web component.
            // @see https://stackoverflow.com/questions/57963312/get-event-target-inside-a-web-component
            if (target === null || target === void 0 ? void 0 : target.shadowRoot) {
                target = nativeEvent.composedPath()[0];
            }
            if (target) {
                // from <canvas>
                if (target === $el) {
                    return true;
                }
                // from <svg>
                if ($el && $el.contains) {
                    return $el.contains(target);
                }
            }
            if (nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.composedPath) {
                return nativeEvent.composedPath().indexOf($el) > -1;
            }
            // account for Touch
            return false;
        };
        /**
         * Find HTML from composed path in native UI event.
         */
        EventService.prototype.getExistedHTML = function (event) {
            var e_1, _a;
            if (event.nativeEvent.composedPath) {
                try {
                    for (var _b = __values(event.nativeEvent.composedPath()), _c = _b.next(); !_c.done; _c = _b.next()) {
                        var eventTarget = _c.value;
                        var existed = this.nativeHTMLMap.get(eventTarget);
                        if (existed) {
                            return existed;
                        }
                    }
                }
                catch (e_1_1) { e_1 = { error: e_1_1 }; }
                finally {
                    try {
                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                    }
                    finally { if (e_1) throw e_1.error; }
                }
            }
            return null;
        };
        EventService.prototype.pickTarget = function (event) {
            return this.hitTest({
                clientX: event.clientX,
                clientY: event.clientY,
                viewportX: event.viewportX,
                viewportY: event.viewportY,
                x: event.canvasX,
                y: event.canvasY,
            });
        };
        EventService.prototype.createPointerEvent = function (from, type, target, fallbackTarget) {
            var event = this.allocateEvent(FederatedPointerEvent);
            this.copyPointerData(from, event);
            this.copyMouseData(from, event);
            this.copyData(from, event);
            event.nativeEvent = from.nativeEvent;
            event.originalEvent = from;
            var existedHTML = this.getExistedHTML(event);
            var $el = this.context.contextService.getDomElement();
            event.target =
                target !== null && target !== void 0 ? target : (existedHTML ||
                    (this.isNativeEventFromCanvas($el, event.nativeEvent) &&
                        this.pickTarget(event)) ||
                    fallbackTarget);
            if (typeof type === 'string') {
                event.type = type;
            }
            return event;
        };
        EventService.prototype.createWheelEvent = function (from) {
            var event = this.allocateEvent(FederatedWheelEvent);
            this.copyWheelData(from, event);
            this.copyMouseData(from, event);
            this.copyData(from, event);
            event.nativeEvent = from.nativeEvent;
            event.originalEvent = from;
            var existedHTML = this.getExistedHTML(event);
            var $el = this.context.contextService.getDomElement();
            event.target =
                existedHTML ||
                    (this.isNativeEventFromCanvas($el, event.nativeEvent) &&
                        this.pickTarget(event));
            return event;
        };
        EventService.prototype.trackingData = function (id) {
            if (!this.mappingState.trackingData[id]) {
                this.mappingState.trackingData[id] = {
                    pressTargetsByButton: {},
                    clicksByButton: {},
                    overTarget: null,
                };
            }
            return this.mappingState.trackingData[id];
        };
        EventService.prototype.cloneWheelEvent = function (from) {
            var event = this.allocateEvent(FederatedWheelEvent);
            event.nativeEvent = from.nativeEvent;
            event.originalEvent = from.originalEvent;
            this.copyWheelData(from, event);
            this.copyMouseData(from, event);
            this.copyData(from, event);
            event.target = from.target;
            event.path = from.composedPath().slice();
            event.type = from.type;
            return event;
        };
        EventService.prototype.clonePointerEvent = function (from, type) {
            var event = this.allocateEvent(FederatedPointerEvent);
            event.nativeEvent = from.nativeEvent;
            event.originalEvent = from.originalEvent;
            this.copyPointerData(from, event);
            this.copyMouseData(from, event);
            this.copyData(from, event);
            event.target = from.target;
            event.path = from.composedPath().slice();
            event.type = type !== null && type !== void 0 ? type : event.type;
            return event;
        };
        EventService.prototype.copyPointerData = function (from, to) {
            // if (
            //   !(
            //     from instanceof FederatedPointerEvent &&
            //     to instanceof FederatedPointerEvent
            //   )
            // )
            //   return;
            to.pointerId = from.pointerId;
            to.width = from.width;
            to.height = from.height;
            to.isPrimary = from.isPrimary;
            to.pointerType = from.pointerType;
            to.pressure = from.pressure;
            to.tangentialPressure = from.tangentialPressure;
            to.tiltX = from.tiltX;
            to.tiltY = from.tiltY;
            to.twist = from.twist;
        };
        EventService.prototype.copyMouseData = function (from, to) {
            // if (
            //   !(
            //     from instanceof FederatedMouseEvent && to instanceof FederatedMouseEvent
            //   )
            // )
            //   return;
            to.altKey = from.altKey;
            to.button = from.button;
            to.buttons = from.buttons;
            to.ctrlKey = from.ctrlKey;
            to.metaKey = from.metaKey;
            to.shiftKey = from.shiftKey;
            to.client.copyFrom(from.client);
            to.movement.copyFrom(from.movement);
            to.canvas.copyFrom(from.canvas);
            to.screen.copyFrom(from.screen);
            to.global.copyFrom(from.global);
            to.offset.copyFrom(from.offset);
        };
        EventService.prototype.copyWheelData = function (from, to) {
            to.deltaMode = from.deltaMode;
            to.deltaX = from.deltaX;
            to.deltaY = from.deltaY;
            to.deltaZ = from.deltaZ;
        };
        EventService.prototype.copyData = function (from, to) {
            to.isTrusted = from.isTrusted;
            to.timeStamp = clock.now();
            to.type = from.type;
            to.detail = from.detail;
            to.view = from.view;
            to.page.copyFrom(from.page);
            to.viewport.copyFrom(from.viewport);
        };
        EventService.prototype.allocateEvent = function (constructor) {
            if (!this.eventPool.has(constructor)) {
                this.eventPool.set(constructor, []);
            }
            // @ts-ignore
            var event = this.eventPool.get(constructor).pop() ||
                new constructor(this);
            event.eventPhase = event.NONE;
            event.currentTarget = null;
            event.path = [];
            event.target = null;
            return event;
        };
        EventService.prototype.freeEvent = function (event) {
            if (event.manager !== this)
                throw new Error('It is illegal to free an event not managed by this EventBoundary!');
            var constructor = event.constructor;
            if (!this.eventPool.has(constructor)) {
                this.eventPool.set(constructor, []);
            }
            // @ts-ignore
            this.eventPool.get(constructor).push(event);
        };
        EventService.prototype.notifyTarget = function (e, type) {
            type = type !== null && type !== void 0 ? type : e.type;
            var key = e.eventPhase === e.CAPTURING_PHASE || e.eventPhase === e.AT_TARGET
                ? "".concat(type, "capture")
                : type;
            this.notifyListeners(e, key);
            if (e.eventPhase === e.AT_TARGET) {
                this.notifyListeners(e, type);
            }
        };
        EventService.prototype.notifyListeners = function (e, type) {
            // hack EventEmitter, stops if the `propagationImmediatelyStopped` flag is set
            // @ts-ignore
            var emitter = e.currentTarget.emitter;
            // @ts-ignore
            var listeners = emitter._events[type];
            if (!listeners)
                return;
            if ('fn' in listeners) {
                if (listeners.once) {
                    emitter.removeListener(type, listeners.fn, undefined, true);
                }
                listeners.fn.call(e.currentTarget || listeners.context, e);
                // listeners.fn.call(listeners.context, e);
            }
            else {
                for (var i = 0; i < listeners.length && !e.propagationImmediatelyStopped; i++) {
                    if (listeners[i].once) {
                        emitter.removeListener(type, listeners[i].fn, undefined, true);
                    }
                    listeners[i].fn.call(e.currentTarget || listeners[i].context, e);
                    // listeners[i].fn.call(listeners[i].context, e);
                }
            }
        };
        /**
         * some detached nodes may exist in propagation path, need to skip them
         */
        EventService.prototype.findMountedTarget = function (propagationPath) {
            if (!propagationPath) {
                return null;
            }
            var currentTarget = propagationPath[propagationPath.length - 1];
            for (var i = propagationPath.length - 2; i >= 0; i--) {
                var target = propagationPath[i];
                if (target === this.rootTarget ||
                    (Node.isNode(target) && target.parentNode === currentTarget)) {
                    currentTarget = propagationPath[i];
                }
                else {
                    break;
                }
            }
            return currentTarget;
        };
        EventService.prototype.getCursor = function (target) {
            var tmp = target;
            while (tmp) {
                var cursor = isElement(tmp) && tmp.getAttribute('cursor');
                if (cursor) {
                    return cursor;
                }
                tmp = Node.isNode(tmp) && tmp.parentNode;
            }
        };
        return EventService;
    }());

    /**
     * used in following scenes:
     * - g `ctx.measureText`
     * - g-plugin-canvas-picker `ctx.isPointInPath`
     * - g-plugin-device-renderer `ctx.createLinearGradient` and generate texture
     *
     * @see https://blog.scottlogic.com/2020/03/19/offscreen-canvas.html
     */
    var OffscreenCanvasCreator = /** @class */ (function () {
        function OffscreenCanvasCreator() {
        }
        OffscreenCanvasCreator.prototype.getOrCreateCanvas = function (offscreenCanvas, contextAttributes) {
            if (this.canvas) {
                return this.canvas;
            }
            // user-defined offscreen canvas
            if (offscreenCanvas || runtime.offscreenCanvas) {
                this.canvas = offscreenCanvas || runtime.offscreenCanvas;
                this.context = this.canvas.getContext('2d', __assign({ willReadFrequently: true }, contextAttributes));
            }
            else {
                try {
                    // OffscreenCanvas2D measureText can be up to 40% faster.
                    this.canvas = new window.OffscreenCanvas(0, 0);
                    this.context = this.canvas.getContext('2d', __assign({ willReadFrequently: true }, contextAttributes));
                    if (!this.context || !this.context.measureText) {
                        this.canvas = document.createElement('canvas');
                        this.context = this.canvas.getContext('2d');
                    }
                }
                catch (ex) {
                    this.canvas = document.createElement('canvas');
                    this.context = this.canvas.getContext('2d', __assign({ willReadFrequently: true }, contextAttributes));
                }
            }
            this.canvas.width = 10;
            this.canvas.height = 10;
            return this.canvas;
        };
        OffscreenCanvasCreator.prototype.getOrCreateContext = function (offscreenCanvas, contextAttributes) {
            if (this.context) {
                return this.context;
            }
            this.getOrCreateCanvas(offscreenCanvas, contextAttributes);
            return this.context;
        };
        return OffscreenCanvasCreator;
    }());

    /**
     * why we need re-render
     */
    var RenderReason;
    (function (RenderReason) {
        RenderReason[RenderReason["CAMERA_CHANGED"] = 0] = "CAMERA_CHANGED";
        RenderReason[RenderReason["DISPLAY_OBJECT_CHANGED"] = 1] = "DISPLAY_OBJECT_CHANGED";
        RenderReason[RenderReason["NONE"] = 2] = "NONE";
    })(RenderReason || (RenderReason = {}));

    /**
     * Use frame renderer implemented by `g-canvas/svg/webgl`, in every frame we do followings:
     * * update & merge dirty rectangles
     * * begin frame
     * * filter by visible
     * * sort by z-index in scene graph
     * * culling with strategies registered in `g-canvas/webgl`
     * * end frame
     */
    var RenderingService = /** @class */ (function () {
        function RenderingService(globalRuntime, context) {
            this.globalRuntime = globalRuntime;
            this.context = context;
            this.inited = false;
            this.stats = {
                /**
                 * total display objects in scenegraph
                 */
                total: 0,
                /**
                 * number of display objects need to render in current frame
                 */
                rendered: 0,
            };
            this.zIndexCounter = 0;
            this.hooks = {
                /**
                 * called before any frame rendered
                 */
                init: new SyncHook(),
                initAsync: new AsyncParallelHook(),
                /**
                 * only dirty object which has sth changed will be rendered
                 */
                dirtycheck: new SyncWaterfallHook(),
                /**
                 * do culling
                 */
                cull: new SyncWaterfallHook(),
                /**
                 * called at beginning of each frame, won't get called if nothing to re-render
                 */
                beginFrame: new SyncHook(),
                /**
                 * called before every dirty object get rendered
                 */
                beforeRender: new SyncHook(),
                /**
                 * called when every dirty object rendering even it's culled
                 */
                render: new SyncHook(),
                /**
                 * called after every dirty object get rendered
                 */
                afterRender: new SyncHook(),
                endFrame: new SyncHook(),
                destroy: new SyncHook(),
                /**
                 * use async but faster method such as GPU-based picking in `g-plugin-device-renderer`
                 */
                pick: new AsyncSeriesWaterfallHook(),
                /**
                 * Unsafe but sync version of pick.
                 */
                pickSync: new SyncWaterfallHook(),
                /**
                 * used in event system
                 */
                pointerDown: new SyncHook(),
                pointerUp: new SyncHook(),
                pointerMove: new SyncHook(),
                pointerOut: new SyncHook(),
                pointerOver: new SyncHook(),
                pointerWheel: new SyncHook(),
                pointerCancel: new SyncHook(),
                click: new SyncHook(),
            };
        }
        RenderingService.prototype.init = function (callback) {
            var _this = this;
            var context = __assign(__assign({}, this.globalRuntime), this.context);
            // register rendering plugins
            this.context.renderingPlugins.forEach(function (plugin) {
                plugin.apply(context, _this.globalRuntime);
            });
            this.hooks.init.call();
            if (this.hooks.initAsync.getCallbacksNum() === 0) {
                this.inited = true;
                callback();
            }
            else {
                this.hooks.initAsync.promise().then(function () {
                    _this.inited = true;
                    callback();
                });
            }
        };
        RenderingService.prototype.getStats = function () {
            return this.stats;
        };
        /**
         * Meet the following conditions:
         * * disable DirtyRectangleRendering
         * * camera changed
         */
        RenderingService.prototype.disableDirtyRectangleRendering = function () {
            var renderer = this.context.config.renderer;
            var enableDirtyRectangleRendering = renderer.getConfig().enableDirtyRectangleRendering;
            return (!enableDirtyRectangleRendering ||
                this.context.renderingContext.renderReasons.has(RenderReason.CAMERA_CHANGED));
        };
        RenderingService.prototype.render = function (canvasConfig, rerenderCallback) {
            var _this = this;
            this.stats.total = 0;
            this.stats.rendered = 0;
            this.zIndexCounter = 0;
            var renderingContext = this.context.renderingContext;
            this.globalRuntime.sceneGraphService.syncHierarchy(renderingContext.root);
            this.globalRuntime.sceneGraphService.triggerPendingEvents();
            if (renderingContext.renderReasons.size && this.inited) {
                // @ts-ignore
                renderingContext.dirtyRectangleRenderingDisabled =
                    this.disableDirtyRectangleRendering();
                var onlyCameraChanged = renderingContext.renderReasons.size === 1 &&
                    renderingContext.renderReasons.has(RenderReason.CAMERA_CHANGED);
                var shouldTriggerRenderHooks = !canvasConfig.disableRenderHooks ||
                    !(canvasConfig.disableRenderHooks && onlyCameraChanged);
                if (shouldTriggerRenderHooks) {
                    this.renderDisplayObject(renderingContext.root, canvasConfig, renderingContext);
                }
                this.hooks.beginFrame.call();
                if (shouldTriggerRenderHooks) {
                    renderingContext.renderListCurrentFrame.forEach(function (object) {
                        _this.hooks.beforeRender.call(object);
                        _this.hooks.render.call(object);
                        _this.hooks.afterRender.call(object);
                    });
                }
                this.hooks.endFrame.call();
                renderingContext.renderListCurrentFrame = [];
                renderingContext.renderReasons.clear();
                rerenderCallback();
            }
            // console.log('stats', this.stats);
        };
        RenderingService.prototype.renderDisplayObject = function (displayObject, canvasConfig, renderingContext) {
            var _this = this;
            var _a = canvasConfig.renderer.getConfig(), enableDirtyCheck = _a.enableDirtyCheck, enableCulling = _a.enableCulling;
            // recalc style values
            if (this.globalRuntime.enableCSSParsing) {
                this.globalRuntime.styleValueRegistry.recalc(displayObject);
            }
            // TODO: relayout
            // dirtycheck first
            var renderable = displayObject.renderable;
            var objectChanged = enableDirtyCheck
                ? // @ts-ignore
                    renderable.dirty || renderingContext.dirtyRectangleRenderingDisabled
                        ? displayObject
                        : null
                : displayObject;
            if (objectChanged) {
                var objectToRender = enableCulling
                    ? this.hooks.cull.call(objectChanged, this.context.camera)
                    : objectChanged;
                if (objectToRender) {
                    this.stats.rendered++;
                    renderingContext.renderListCurrentFrame.push(objectToRender);
                }
            }
            displayObject.renderable.dirty = false;
            displayObject.sortable.renderOrder = this.zIndexCounter++;
            this.stats.total++;
            // sort is very expensive, use cached result if possible
            var sortable = displayObject.sortable;
            if (sortable.dirty) {
                this.sort(displayObject, sortable);
                sortable.dirty = false;
                sortable.dirtyChildren = [];
                sortable.dirtyReason = undefined;
            }
            // recursive rendering its children
            (sortable.sorted || displayObject.childNodes).forEach(function (child) {
                _this.renderDisplayObject(child, canvasConfig, renderingContext);
            });
        };
        RenderingService.prototype.sort = function (displayObject, sortable) {
            if (sortable.sorted &&
                sortable.dirtyReason !== SortReason.Z_INDEX_CHANGED) {
                // avoid re-sorting the whole children list
                sortable.dirtyChildren.forEach(function (child) {
                    var index = displayObject.childNodes.indexOf(child);
                    if (index === -1) {
                        // remove from sorted list
                        var index_1 = sortable.sorted.indexOf(child);
                        if (index_1 >= 0) {
                            sortable.sorted.splice(index_1, 1);
                        }
                    }
                    else {
                        if (sortable.sorted.length === 0) {
                            sortable.sorted.push(child);
                        }
                        else {
                            var index_2 = sortedIndex(sortable.sorted, child);
                            sortable.sorted.splice(index_2, 0, child);
                        }
                    }
                });
            }
            else {
                sortable.sorted = displayObject.childNodes.slice().sort(sortByZIndex);
            }
        };
        RenderingService.prototype.destroy = function () {
            this.inited = false;
            this.hooks.destroy.call();
            this.globalRuntime.sceneGraphService.clearPendingEvents();
        };
        RenderingService.prototype.dirtify = function () {
            // need re-render
            this.context.renderingContext.renderReasons.add(RenderReason.DISPLAY_OBJECT_CHANGED);
        };
        return RenderingService;
    }());

    var ATTRIBUTE_REGEXP = /\[\s*(.*)=(.*)\s*\]/;
    /**
     * support the following DOM API:
     * * getElementById
     * * getElementsByClassName
     * * getElementsByName
     * * getElementsByTag
     * * querySelector
     * * querySelectorAll
     */
    var DefaultSceneGraphSelector = /** @class */ (function () {
        function DefaultSceneGraphSelector() {
        }
        DefaultSceneGraphSelector.prototype.selectOne = function (query, root) {
            var _this = this;
            if (query.startsWith('.')) {
                return root.find(function (node) {
                    // return !node.shadow && node.id === query.substring(1);
                    return (((node === null || node === void 0 ? void 0 : node.classList) || []).indexOf(_this.getIdOrClassname(query)) > -1);
                });
            }
            else if (query.startsWith('#')) {
                // getElementById('id')
                return root.find(function (node) {
                    // return !node.shadow && node.id === query.substring(1);
                    return node.id === _this.getIdOrClassname(query);
                });
            }
            else if (query.startsWith('[')) {
                var _a = this.getAttribute(query), name_1 = _a.name, value_1 = _a.value;
                if (name_1) {
                    // getElementByName();
                    return root.find(function (node) {
                        return root !== node &&
                            (name_1 === 'name'
                                ? node.name === value_1
                                : _this.attributeToString(node, name_1) === value_1);
                    });
                }
                else {
                    return null;
                }
            }
            else {
                // getElementsByTag('circle');
                return root.find(function (node) { return root !== node && node.nodeName === query; });
            }
        };
        DefaultSceneGraphSelector.prototype.selectAll = function (query, root) {
            var _this = this;
            // only support `[name="${name}"]` `.className` `#id`
            if (query.startsWith('.')) {
                // getElementsByClassName('className');
                // should not include itself
                return root.findAll(function (node) {
                    return root !== node &&
                        ((node === null || node === void 0 ? void 0 : node.classList) || []).indexOf(_this.getIdOrClassname(query)) > -1;
                });
            }
            else if (query.startsWith('#')) {
                return root.findAll(function (node) {
                    return root !== node &&
                        node.id === _this.getIdOrClassname(query);
                });
            }
            else if (query.startsWith('[')) {
                var _a = this.getAttribute(query), name_2 = _a.name, value_2 = _a.value;
                if (name_2) {
                    // getElementsByName();
                    return root.findAll(function (node) {
                        return root !== node &&
                            (name_2 === 'name'
                                ? node.name === value_2
                                : _this.attributeToString(node, name_2) === value_2);
                    });
                }
                else {
                    return [];
                }
            }
            else {
                // getElementsByTag('circle');
                return root.findAll(function (node) { return root !== node && node.nodeName === query; });
            }
        };
        DefaultSceneGraphSelector.prototype.is = function (query, node) {
            // a simple `matches` implementation
            if (query.startsWith('.')) {
                return node.className === this.getIdOrClassname(query);
            }
            else if (query.startsWith('#')) {
                return node.id === this.getIdOrClassname(query);
            }
            else if (query.startsWith('[')) {
                var _a = this.getAttribute(query), name_3 = _a.name, value = _a.value;
                return name_3 === 'name'
                    ? node.name === value
                    : this.attributeToString(node, name_3) === value;
            }
            else {
                return node.nodeName === query;
            }
        };
        DefaultSceneGraphSelector.prototype.getIdOrClassname = function (query) {
            return query.substring(1);
        };
        DefaultSceneGraphSelector.prototype.getAttribute = function (query) {
            var matches = query.match(ATTRIBUTE_REGEXP);
            var name = '';
            var value = '';
            if (matches && matches.length > 2) {
                name = matches[1].replace(/"/g, '');
                value = matches[2].replace(/"/g, '');
            }
            return { name: name, value: value };
        };
        DefaultSceneGraphSelector.prototype.attributeToString = function (node, name) {
            if (!node.getAttribute) {
                return '';
            }
            var value = node.getAttribute(name);
            if (isNil(value)) {
                return '';
            }
            if (value.toString) {
                return value.toString();
            }
            return '';
        };
        return DefaultSceneGraphSelector;
    }());

    var MutationEvent = /** @class */ (function (_super) {
        __extends(MutationEvent, _super);
        function MutationEvent(typeArg, relatedNode, prevValue, newValue, attrName, attrChange, prevParsedValue, newParsedValue) {
            var _this = _super.call(this, null) || this;
            _this.relatedNode = relatedNode;
            _this.prevValue = prevValue;
            _this.newValue = newValue;
            _this.attrName = attrName;
            _this.attrChange = attrChange;
            _this.prevParsedValue = prevParsedValue;
            _this.newParsedValue = newParsedValue;
            _this.type = typeArg;
            return _this;
        }
        MutationEvent.ADDITION = 2;
        MutationEvent.MODIFICATION = 1;
        MutationEvent.REMOVAL = 3;
        return MutationEvent;
    }(FederatedEvent));

    /**
     * built-in events for element
     * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationEvent
     *
     * TODO: use MutationObserver instead
     * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
     */
    var ElementEvent;
    (function (ElementEvent) {
        ElementEvent["REPARENT"] = "reparent";
        ElementEvent["DESTROY"] = "destroy";
        /**
         * @see https://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMAttrModified
         */
        ElementEvent["ATTR_MODIFIED"] = "DOMAttrModified";
        /**
         * it has been inserted
         * @see https://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted
         */
        ElementEvent["INSERTED"] = "DOMNodeInserted";
        /**
         * it is being removed
         * @see https://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemoved
         */
        ElementEvent["REMOVED"] = "removed";
        /**
         * @see https://www.w3.org/TR/DOM-Level-3-Events/#domnodeinsertedintodocument
         */
        ElementEvent["MOUNTED"] = "DOMNodeInsertedIntoDocument";
        /**
         * @see https://www.w3.org/TR/DOM-Level-3-Events/#domnoderemovedfromdocument
         */
        ElementEvent["UNMOUNTED"] = "DOMNodeRemovedFromDocument";
        ElementEvent["BOUNDS_CHANGED"] = "bounds-changed";
        ElementEvent["CULLED"] = "culled";
    })(ElementEvent || (ElementEvent = {}));

    function markRenderableDirty(e) {
        var renderable = e.renderable;
        if (renderable) {
            renderable.renderBoundsDirty = true;
            renderable.boundsDirty = true;
        }
    }
    var reparentEvent = new MutationEvent(ElementEvent.REPARENT, null, '', '', '', 0, '', '');
    /**
     * update transform in scene graph
     *
     * @see https://community.khronos.org/t/scene-graphs/50542/7
     */
    var DefaultSceneGraphService = /** @class */ (function () {
        function DefaultSceneGraphService(runtime) {
            var _this = this;
            this.runtime = runtime;
            this.pendingEvents = [];
            this.boundsChangedEvent = new CustomEvent(ElementEvent.BOUNDS_CHANGED);
            /**
             * rotate in world space
             */
            this.rotate = (function () {
                var parentInvertRotation = create$4();
                return function (element, degrees, y, z) {
                    if (y === void 0) { y = 0; }
                    if (z === void 0) { z = 0; }
                    if (typeof degrees === 'number') {
                        degrees = fromValues$2(degrees, y, z);
                    }
                    var transform = element.transformable;
                    if (element.parentNode === null ||
                        !element.parentNode.transformable) {
                        _this.rotateLocal(element, degrees);
                    }
                    else {
                        var rotation = create$4();
                        fromEuler(rotation, degrees[0], degrees[1], degrees[2]);
                        var rot = _this.getRotation(element);
                        var parentRot = _this.getRotation(element.parentNode);
                        copy$3(parentInvertRotation, parentRot);
                        invert$1(parentInvertRotation, parentInvertRotation);
                        multiply$2(rotation, parentInvertRotation, rotation);
                        multiply$2(transform.localRotation, rotation, rot);
                        normalize$2(transform.localRotation, transform.localRotation);
                        _this.dirtifyLocal(element, transform);
                    }
                };
            })();
            /**
             * rotate in local space
             * @see @see https://docs.microsoft.com/en-us/windows/win32/api/directxmath/nf-directxmath-xmquaternionrotationrollpitchyaw
             */
            this.rotateLocal = (function () {
                var rotation = create$4();
                return function (element, degrees, y, z) {
                    if (y === void 0) { y = 0; }
                    if (z === void 0) { z = 0; }
                    if (typeof degrees === 'number') {
                        degrees = fromValues$2(degrees, y, z);
                    }
                    var transform = element.transformable;
                    fromEuler(rotation, degrees[0], degrees[1], degrees[2]);
                    mul$1(transform.localRotation, transform.localRotation, rotation);
                    _this.dirtifyLocal(element, transform);
                };
            })();
            /**
             * set euler angles(degrees) in world space
             */
            this.setEulerAngles = (function () {
                var invParentRot = create$4();
                return function (element, degrees, y, z) {
                    if (y === void 0) { y = 0; }
                    if (z === void 0) { z = 0; }
                    if (typeof degrees === 'number') {
                        degrees = fromValues$2(degrees, y, z);
                    }
                    var transform = element.transformable;
                    if (element.parentNode === null ||
                        !element.parentNode.transformable) {
                        _this.setLocalEulerAngles(element, degrees);
                    }
                    else {
                        fromEuler(transform.localRotation, degrees[0], degrees[1], degrees[2]);
                        var parentRotation = _this.getRotation(element.parentNode);
                        copy$3(invParentRot, invert$1(create$4(), parentRotation));
                        mul$1(transform.localRotation, transform.localRotation, invParentRot);
                        _this.dirtifyLocal(element, transform);
                    }
                };
            })();
            /**
             * translate in local space
             *
             * @example
             * ```
             * translateLocal(x, y, z)
             * translateLocal(vec3(x, y, z))
             * ```
             */
            this.translateLocal = (function () {
                return function (element, translation, y, z) {
                    if (y === void 0) { y = 0; }
                    if (z === void 0) { z = 0; }
                    if (typeof translation === 'number') {
                        translation = fromValues$2(translation, y, z);
                    }
                    var transform = element.transformable;
                    if (equals$1(translation, create$2())) {
                        return;
                    }
                    transformQuat(translation, translation, transform.localRotation);
                    add$1(transform.localPosition, transform.localPosition, translation);
                    _this.dirtifyLocal(element, transform);
                };
            })();
            /**
             * move to position in world space
             *
             * 对应 g 原版的 move/moveTo
             * @see https://github.com/antvis/g/blob/master/packages/g-base/src/abstract/element.ts#L684-L689
             */
            this.setPosition = (function () {
                var parentInvertMatrix = create$1();
                var tmpPosition = create$2();
                return function (element, position) {
                    var transform = element.transformable;
                    tmpPosition[0] = position[0];
                    tmpPosition[1] = position[1];
                    tmpPosition[2] = position[2] || 0;
                    if (equals$1(_this.getPosition(element), tmpPosition)) {
                        return;
                    }
                    copy$1(transform.position, tmpPosition);
                    if (element.parentNode === null ||
                        !element.parentNode.transformable) {
                        copy$1(transform.localPosition, tmpPosition);
                    }
                    else {
                        var parentTransform = element.parentNode.transformable;
                        copy(parentInvertMatrix, parentTransform.worldTransform);
                        invert(parentInvertMatrix, parentInvertMatrix);
                        transformMat4(transform.localPosition, tmpPosition, parentInvertMatrix);
                    }
                    _this.dirtifyLocal(element, transform);
                };
            })();
            /**
             * move to position in local space
             */
            this.setLocalPosition = (function () {
                var tmpPosition = create$2();
                return function (element, position) {
                    var transform = element.transformable;
                    tmpPosition[0] = position[0];
                    tmpPosition[1] = position[1];
                    tmpPosition[2] = position[2] || 0;
                    if (equals$1(transform.localPosition, tmpPosition)) {
                        return;
                    }
                    copy$1(transform.localPosition, tmpPosition);
                    _this.dirtifyLocal(element, transform);
                };
            })();
            /**
             * translate in world space
             *
             * @example
             * ```
             * translate(x, y, z)
             * translate(vec3(x, y, z))
             * ```
             *
             * 对应 g 原版的 translate 2D
             * @see https://github.com/antvis/g/blob/master/packages/g-base/src/abstract/element.ts#L665-L676
             */
            this.translate = (function () {
                var zeroVec3 = create$2();
                var tmpVec3 = create$2();
                var tr = create$2();
                return function (element, translation, y, z) {
                    if (y === void 0) { y = 0; }
                    if (z === void 0) { z = 0; }
                    if (typeof translation === 'number') {
                        translation = set$1(tmpVec3, translation, y, z);
                    }
                    if (equals$1(translation, zeroVec3)) {
                        return;
                    }
                    add$1(tr, _this.getPosition(element), translation);
                    _this.setPosition(element, tr);
                };
            })();
            this.setRotation = function () {
                var parentInvertRotation = create$4();
                return function (element, rotation, y, z, w) {
                    var transform = element.transformable;
                    if (typeof rotation === 'number') {
                        rotation = fromValues$4(rotation, y, z, w);
                    }
                    if (element.parentNode === null ||
                        !element.parentNode.transformable) {
                        _this.setLocalRotation(element, rotation);
                    }
                    else {
                        var parentRot = _this.getRotation(element.parentNode);
                        copy$3(parentInvertRotation, parentRot);
                        invert$1(parentInvertRotation, parentInvertRotation);
                        multiply$2(transform.localRotation, parentInvertRotation, rotation);
                        normalize$2(transform.localRotation, transform.localRotation);
                        _this.dirtifyLocal(element, transform);
                    }
                };
            };
            this.displayObjectDependencyMap = new WeakMap();
            this.calcLocalTransform = (function () {
                var tmpMat = create$1();
                var tmpPosition = create$2();
                var tmpQuat = fromValues$4(0, 0, 0, 1);
                return function (transform) {
                    var hasSkew = transform.localSkew[0] !== 0 || transform.localSkew[1] !== 0;
                    if (hasSkew) {
                        fromRotationTranslationScaleOrigin(transform.localTransform, transform.localRotation, transform.localPosition, fromValues$2(1, 1, 1), transform.origin);
                        // apply skew2D
                        if (transform.localSkew[0] !== 0 || transform.localSkew[1] !== 0) {
                            var tmpMat4 = identity$1(tmpMat);
                            tmpMat4[4] = Math.tan(transform.localSkew[0]);
                            tmpMat4[1] = Math.tan(transform.localSkew[1]);
                            multiply(transform.localTransform, transform.localTransform, tmpMat4);
                        }
                        var scaling = fromRotationTranslationScaleOrigin(tmpMat, tmpQuat, tmpPosition, transform.localScale, transform.origin);
                        multiply(transform.localTransform, transform.localTransform, scaling);
                    }
                    else {
                        // @see https://github.com/mattdesl/css-mat4/blob/master/index.js
                        fromRotationTranslationScaleOrigin(transform.localTransform, transform.localRotation, transform.localPosition, transform.localScale, transform.origin);
                    }
                };
            })();
        }
        DefaultSceneGraphService.prototype.matches = function (query, root) {
            return this.runtime.sceneGraphSelector.is(query, root);
        };
        DefaultSceneGraphService.prototype.querySelector = function (query, root) {
            return this.runtime.sceneGraphSelector.selectOne(query, root);
        };
        DefaultSceneGraphService.prototype.querySelectorAll = function (query, root) {
            return this.runtime.sceneGraphSelector.selectAll(query, root);
            // .filter((node) => !node.shadow);
        };
        DefaultSceneGraphService.prototype.attach = function (child, parent, index) {
            var _a, _b;
            var detached = false;
            if (child.parentNode) {
                detached = child.parentNode !== parent;
                this.detach(child);
            }
            child.parentNode = parent;
            if (!isNil(index)) {
                child.parentNode.childNodes.splice(index, 0, child);
            }
            else {
                child.parentNode.childNodes.push(child);
            }
            // parent needs re-sort
            var sortable = parent.sortable;
            if (((_a = sortable === null || sortable === void 0 ? void 0 : sortable.sorted) === null || _a === void 0 ? void 0 : _a.length) ||
                ((_b = child.style) === null || _b === void 0 ? void 0 : _b.zIndex)) {
                if (sortable.dirtyChildren.indexOf(child) === -1) {
                    sortable.dirtyChildren.push(child);
                }
                // if (sortable) {
                // only child has z-Index
                sortable.dirty = true;
                sortable.dirtyReason = SortReason.ADDED;
            }
            // this.updateGraphDepth(child);
            var transform = child.transformable;
            if (transform) {
                this.dirtifyWorld(child, transform);
            }
            if (transform.frozen) {
                this.unfreezeParentToRoot(child);
            }
            if (detached) {
                child.dispatchEvent(reparentEvent);
            }
        };
        DefaultSceneGraphService.prototype.detach = function (child) {
            var _a, _b;
            if (child.parentNode) {
                var transform = child.transformable;
                // if (transform) {
                //   const worldTransform = this.getWorldTransform(child, transform);
                //   mat4.getScaling(transform.localScale, worldTransform);
                //   mat4.getTranslation(transform.localPosition, worldTransform);
                //   mat4.getRotation(transform.localRotation, worldTransform);
                //   transform.localDirtyFlag = true;
                // }
                // parent needs re-sort
                var sortable = child.parentNode.sortable;
                // if (sortable) {
                if (((_a = sortable === null || sortable === void 0 ? void 0 : sortable.sorted) === null || _a === void 0 ? void 0 : _a.length) ||
                    ((_b = child.style) === null || _b === void 0 ? void 0 : _b.zIndex)) {
                    if (sortable.dirtyChildren.indexOf(child) === -1) {
                        sortable.dirtyChildren.push(child);
                    }
                    sortable.dirty = true;
                    sortable.dirtyReason = SortReason.REMOVED;
                }
                var index = child.parentNode.childNodes.indexOf(child);
                if (index > -1) {
                    child.parentNode.childNodes.splice(index, 1);
                }
                if (transform) {
                    this.dirtifyWorld(child, transform);
                }
                child.parentNode = null;
            }
        };
        DefaultSceneGraphService.prototype.getOrigin = function (element) {
            return element.transformable.origin;
        };
        /**
         * same as pivot in Pixi.js
         *
         * @see https://stackoverflow.com/questions/40748452/how-to-change-css-transform-origin-but-preserve-transformation
         */
        DefaultSceneGraphService.prototype.setOrigin = function (element, origin, y, z) {
            if (y === void 0) { y = 0; }
            if (z === void 0) { z = 0; }
            if (typeof origin === 'number') {
                origin = [origin, y, z];
            }
            var transform = element.transformable;
            if (origin[0] === transform.origin[0] &&
                origin[1] === transform.origin[1] &&
                origin[2] === transform.origin[2]) {
                return;
            }
            var originVec = transform.origin;
            // const delta = vec3.subtract(vec3.create(), origin, originVec);
            // vec3.add(transform.localPosition, transform.localPosition, delta);
            // update origin
            originVec[0] = origin[0];
            originVec[1] = origin[1];
            originVec[2] = origin[2] || 0;
            this.dirtifyLocal(element, transform);
        };
        /**
         * set euler angles(degrees) in local space
         */
        DefaultSceneGraphService.prototype.setLocalEulerAngles = function (element, degrees, y, z) {
            if (y === void 0) { y = 0; }
            if (z === void 0) { z = 0; }
            if (typeof degrees === 'number') {
                degrees = fromValues$2(degrees, y, z);
            }
            var transform = element.transformable;
            fromEuler(transform.localRotation, degrees[0], degrees[1], degrees[2]);
            this.dirtifyLocal(element, transform);
        };
        /**
         * scale in local space
         */
        DefaultSceneGraphService.prototype.scaleLocal = function (element, scaling) {
            var transform = element.transformable;
            multiply$1(transform.localScale, transform.localScale, fromValues$2(scaling[0], scaling[1], scaling[2] || 1));
            this.dirtifyLocal(element, transform);
        };
        DefaultSceneGraphService.prototype.setLocalScale = function (element, scaling) {
            var transform = element.transformable;
            var updatedScaling = fromValues$2(scaling[0], scaling[1], scaling[2] || transform.localScale[2]);
            if (equals$1(updatedScaling, transform.localScale)) {
                return;
            }
            copy$1(transform.localScale, updatedScaling);
            this.dirtifyLocal(element, transform);
        };
        DefaultSceneGraphService.prototype.setLocalRotation = function (element, rotation, y, z, w) {
            if (typeof rotation === 'number') {
                rotation = fromValues$4(rotation, y, z, w);
            }
            var transform = element.transformable;
            copy$3(transform.localRotation, rotation);
            this.dirtifyLocal(element, transform);
        };
        DefaultSceneGraphService.prototype.setLocalSkew = function (element, skew, y) {
            if (typeof skew === 'number') {
                skew = fromValues$5(skew, y);
            }
            var transform = element.transformable;
            copy$4(transform.localSkew, skew);
            this.dirtifyLocal(element, transform);
        };
        DefaultSceneGraphService.prototype.dirtifyLocal = function (element, transform) {
            if (!transform.localDirtyFlag) {
                transform.localDirtyFlag = true;
                if (!transform.dirtyFlag) {
                    this.dirtifyWorld(element, transform);
                }
            }
        };
        DefaultSceneGraphService.prototype.dirtifyWorld = function (element, transform) {
            if (!transform.dirtyFlag) {
                this.unfreezeParentToRoot(element);
            }
            this.dirtifyWorldInternal(element, transform);
            this.dirtifyToRoot(element, true);
        };
        DefaultSceneGraphService.prototype.triggerPendingEvents = function () {
            var _this = this;
            var set = new Set();
            var trigger = function (element, detail) {
                if (element.isConnected && !set.has(element.entity)) {
                    _this.boundsChangedEvent.detail = detail;
                    _this.boundsChangedEvent.target = element;
                    if (element.isMutationObserved) {
                        element.dispatchEvent(_this.boundsChangedEvent);
                    }
                    else {
                        element.ownerDocument.defaultView.dispatchEvent(_this.boundsChangedEvent, true);
                    }
                    set.add(element.entity);
                }
            };
            this.pendingEvents.forEach(function (_a) {
                var _b = __read(_a, 2), element = _b[0], detail = _b[1];
                if (detail.affectChildren) {
                    element.forEach(function (e) {
                        trigger(e, detail);
                    });
                }
                else {
                    trigger(element, detail);
                }
            });
            this.clearPendingEvents();
            set.clear();
        };
        DefaultSceneGraphService.prototype.clearPendingEvents = function () {
            this.pendingEvents = [];
        };
        DefaultSceneGraphService.prototype.dirtifyToRoot = function (element, affectChildren) {
            if (affectChildren === void 0) { affectChildren = false; }
            var p = element;
            // only need to re-render itself
            if (p.renderable) {
                p.renderable.dirty = true;
            }
            while (p) {
                markRenderableDirty(p);
                p = p.parentNode;
            }
            if (affectChildren) {
                element.forEach(function (e) {
                    markRenderableDirty(e);
                });
            }
            // inform dependencies
            this.informDependentDisplayObjects(element);
            // reuse the same custom event
            this.pendingEvents.push([element, { affectChildren: affectChildren }]);
        };
        DefaultSceneGraphService.prototype.updateDisplayObjectDependency = function (name, oldPath, newPath, object) {
            // clear ref to old clip path
            if (oldPath && oldPath !== newPath) {
                var oldDependencyMap = this.displayObjectDependencyMap.get(oldPath);
                if (oldDependencyMap && oldDependencyMap[name]) {
                    var index = oldDependencyMap[name].indexOf(object);
                    oldDependencyMap[name].splice(index, 1);
                }
            }
            if (newPath) {
                var newDependencyMap = this.displayObjectDependencyMap.get(newPath);
                if (!newDependencyMap) {
                    this.displayObjectDependencyMap.set(newPath, {});
                    newDependencyMap = this.displayObjectDependencyMap.get(newPath);
                }
                if (!newDependencyMap[name]) {
                    newDependencyMap[name] = [];
                }
                newDependencyMap[name].push(object);
            }
        };
        DefaultSceneGraphService.prototype.informDependentDisplayObjects = function (object) {
            var _this = this;
            var dependencyMap = this.displayObjectDependencyMap.get(object);
            if (dependencyMap) {
                Object.keys(dependencyMap).forEach(function (name) {
                    dependencyMap[name].forEach(function (target) {
                        _this.dirtifyToRoot(target, true);
                        target.dispatchEvent(new MutationEvent(ElementEvent.ATTR_MODIFIED, target, _this, _this, name, MutationEvent.MODIFICATION, _this, _this));
                        if (target.isCustomElement && target.isConnected) {
                            if (target.attributeChangedCallback) {
                                target.attributeChangedCallback(name, _this, _this);
                            }
                        }
                    });
                });
            }
        };
        DefaultSceneGraphService.prototype.getPosition = function (element) {
            var transform = element.transformable;
            return getTranslation(transform.position, this.getWorldTransform(element, transform));
        };
        DefaultSceneGraphService.prototype.getRotation = function (element) {
            var transform = element.transformable;
            return getRotation(transform.rotation, this.getWorldTransform(element, transform));
        };
        DefaultSceneGraphService.prototype.getScale = function (element) {
            var transform = element.transformable;
            return getScaling(transform.scaling, this.getWorldTransform(element, transform));
        };
        DefaultSceneGraphService.prototype.getWorldTransform = function (element, transform) {
            if (transform === void 0) { transform = element.transformable; }
            if (!transform.localDirtyFlag && !transform.dirtyFlag) {
                return transform.worldTransform;
            }
            if (element.parentNode && element.parentNode.transformable) {
                this.getWorldTransform(element.parentNode);
            }
            this.sync(element, transform);
            return transform.worldTransform;
        };
        DefaultSceneGraphService.prototype.getLocalPosition = function (element) {
            return element.transformable.localPosition;
        };
        DefaultSceneGraphService.prototype.getLocalRotation = function (element) {
            return element.transformable.localRotation;
        };
        DefaultSceneGraphService.prototype.getLocalScale = function (element) {
            return element.transformable.localScale;
        };
        DefaultSceneGraphService.prototype.getLocalSkew = function (element) {
            return element.transformable.localSkew;
        };
        DefaultSceneGraphService.prototype.getLocalTransform = function (element) {
            var transform = element.transformable;
            if (transform.localDirtyFlag) {
                this.calcLocalTransform(transform);
                transform.localDirtyFlag = false;
            }
            return transform.localTransform;
        };
        DefaultSceneGraphService.prototype.setLocalTransform = function (element, transform) {
            var t = getTranslation(create$2(), transform);
            var r = getRotation(create$4(), transform);
            var s = getScaling(create$2(), transform);
            this.setLocalScale(element, s);
            this.setLocalPosition(element, t);
            this.setLocalRotation(element, r);
        };
        DefaultSceneGraphService.prototype.resetLocalTransform = function (element) {
            this.setLocalScale(element, [1, 1, 1]);
            this.setLocalPosition(element, [0, 0, 0]);
            this.setLocalEulerAngles(element, [0, 0, 0]);
            this.setLocalSkew(element, [0, 0]);
        };
        DefaultSceneGraphService.prototype.getTransformedGeometryBounds = function (element, render, existedAABB) {
            if (render === void 0) { render = false; }
            var bounds = this.getGeometryBounds(element, render);
            if (!AABB.isEmpty(bounds)) {
                var aabb = existedAABB || new AABB();
                aabb.setFromTransformedAABB(bounds, this.getWorldTransform(element));
                return aabb;
            }
            else {
                return null;
            }
        };
        /**
         * won't account for children
         */
        DefaultSceneGraphService.prototype.getGeometryBounds = function (element, render) {
            if (render === void 0) { render = false; }
            var geometry = element.geometry;
            var bounds = render
                ? geometry.renderBounds
                : geometry.contentBounds || null;
            // return (bounds && new AABB(bounds.center, bounds.halfExtents)) || new AABB();
            return bounds || new AABB();
        };
        /**
         * account for children in world space
         */
        DefaultSceneGraphService.prototype.getBounds = function (element, render) {
            var _this = this;
            if (render === void 0) { render = false; }
            var renderable = element.renderable;
            if (!renderable.boundsDirty && !render && renderable.bounds) {
                return renderable.bounds;
            }
            if (!renderable.renderBoundsDirty && render && renderable.renderBounds) {
                return renderable.renderBounds;
            }
            // reuse existed if possible
            var existedAABB = render ? renderable.renderBounds : renderable.bounds;
            // reset with geometry's aabb
            var aabb = this.getTransformedGeometryBounds(element, render, existedAABB);
            // merge children's aabbs
            var children = element.childNodes;
            children.forEach(function (child) {
                var childBounds = _this.getBounds(child, render);
                if (childBounds) {
                    if (!aabb) {
                        aabb = existedAABB || new AABB();
                        aabb.update(childBounds.center, childBounds.halfExtents);
                    }
                    else {
                        aabb.add(childBounds);
                    }
                }
            });
            if (!aabb) {
                aabb = new AABB();
            }
            if (render) {
                // FIXME: account for clip path
                var clipped = findClosestClipPathTarget(element);
                if (clipped) {
                    // use bounds under world space
                    var clipPathBounds = clipped.parsedStyle.clipPath.getBounds(render);
                    if (!aabb) {
                        aabb.update(clipPathBounds.center, clipPathBounds.halfExtents);
                    }
                    else if (clipPathBounds) {
                        aabb = clipPathBounds.intersection(aabb);
                    }
                }
            }
            if (render) {
                renderable.renderBounds = aabb;
                renderable.renderBoundsDirty = false;
            }
            else {
                renderable.bounds = aabb;
                renderable.boundsDirty = false;
            }
            return aabb;
        };
        /**
         * account for children in local space
         */
        DefaultSceneGraphService.prototype.getLocalBounds = function (element) {
            if (element.parentNode) {
                var parentInvert = create$1();
                if (element.parentNode.transformable) {
                    parentInvert = invert(create$1(), this.getWorldTransform(element.parentNode));
                }
                var bounds = this.getBounds(element);
                if (!AABB.isEmpty(bounds)) {
                    var localBounds = new AABB();
                    localBounds.setFromTransformedAABB(bounds, parentInvert);
                    return localBounds;
                }
            }
            return this.getBounds(element);
        };
        DefaultSceneGraphService.prototype.getBoundingClientRect = function (element) {
            var _a, _b;
            var aabb;
            var bounds = this.getGeometryBounds(element);
            if (!AABB.isEmpty(bounds)) {
                aabb = new AABB();
                // apply transformation to aabb
                aabb.setFromTransformedAABB(bounds, this.getWorldTransform(element));
            }
            // calc context's offset
            var bbox = (_b = (_a = element.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView) === null || _b === void 0 ? void 0 : _b.getContextService().getBoundingClientRect();
            if (aabb) {
                var _c = __read(aabb.getMin(), 2), left = _c[0], top_1 = _c[1];
                var _d = __read(aabb.getMax(), 2), right = _d[0], bottom = _d[1];
                return new Rectangle(left + ((bbox === null || bbox === void 0 ? void 0 : bbox.left) || 0), top_1 + ((bbox === null || bbox === void 0 ? void 0 : bbox.top) || 0), right - left, bottom - top_1);
            }
            return new Rectangle((bbox === null || bbox === void 0 ? void 0 : bbox.left) || 0, (bbox === null || bbox === void 0 ? void 0 : bbox.top) || 0, 0, 0);
        };
        DefaultSceneGraphService.prototype.dirtifyWorldInternal = function (element, transform) {
            var _this = this;
            if (!transform.dirtyFlag) {
                transform.dirtyFlag = true;
                transform.frozen = false;
                element.childNodes.forEach(function (child) {
                    var childTransform = child.transformable;
                    if (!childTransform.dirtyFlag) {
                        _this.dirtifyWorldInternal(child, childTransform);
                    }
                });
                var renderable = element.renderable;
                if (renderable) {
                    renderable.renderBoundsDirty = true;
                    renderable.boundsDirty = true;
                    renderable.dirty = true;
                }
            }
        };
        DefaultSceneGraphService.prototype.syncHierarchy = function (element) {
            var transform = element.transformable;
            if (transform.frozen) {
                return;
            }
            transform.frozen = true;
            if (transform.localDirtyFlag || transform.dirtyFlag) {
                this.sync(element, transform);
            }
            var children = element.childNodes;
            for (var i = 0; i < children.length; i++) {
                this.syncHierarchy(children[i]);
            }
        };
        DefaultSceneGraphService.prototype.sync = function (element, transform) {
            if (transform.localDirtyFlag) {
                this.calcLocalTransform(transform);
                transform.localDirtyFlag = false;
            }
            if (transform.dirtyFlag) {
                var parent_1 = element.parentNode;
                var parentTransform = parent_1 && parent_1.transformable;
                if (parent_1 === null || !parentTransform) {
                    copy(transform.worldTransform, transform.localTransform);
                }
                else {
                    // TODO: should we support scale compensation?
                    // @see https://github.com/playcanvas/engine/issues/1077#issuecomment-359765557
                    multiply(transform.worldTransform, parentTransform.worldTransform, transform.localTransform);
                }
                transform.dirtyFlag = false;
            }
        };
        DefaultSceneGraphService.prototype.unfreezeParentToRoot = function (child) {
            var p = child.parentNode;
            while (p) {
                var transform = p.transformable;
                if (transform) {
                    transform.frozen = false;
                }
                p = p.parentNode;
            }
        };
        return DefaultSceneGraphService;
    }());

    var TEXT_METRICS = {
        MetricsString: '|ÉqÅ',
        BaselineSymbol: 'M',
        BaselineMultiplier: 1.4,
        HeightMultiplier: 2,
        Newlines: [
            0x000a, // line feed
            0x000d, // carriage return
        ],
        BreakingSpaces: [
            0x0009, // character tabulation
            0x0020, // space
            0x2000, // en quad
            0x2001, // em quad
            0x2002, // en space
            0x2003, // em space
            0x2004, // three-per-em space
            0x2005, // four-per-em space
            0x2006, // six-per-em space
            0x2008, // punctuation space
            0x2009, // thin space
            0x200a, // hair space
            0x205f, // medium mathematical space
            0x3000, // ideographic space
        ],
    };
    var LATIN_REGEX = /[a-zA-Z0-9\u00C0-\u00D6\u00D8-\u00f6\u00f8-\u00ff!"#$%&'()*+,-./:;]/;
    // Line breaking rules in CJK (Kinsoku Shori)
    // Refer from https://en.wikipedia.org/wiki/Line_breaking_rules_in_East_Asian_languages
    var regexCannotStartZhCn = /[!%),.:;?\]}¢°·'""†‡›℃∶、。〃〆〕〗〞﹚﹜！＂％＇），．：；？！］｝～]/;
    var regexCannotEndZhCn = /[$(£¥·'"〈《「『【〔〖〝﹙﹛＄（．［｛￡￥]/;
    var regexCannotStartZhTw = /[!),.:;?\]}¢·–—'"•"、。〆〞〕〉》」︰︱︲︳﹐﹑﹒﹓﹔﹕﹖﹘﹚﹜！），．：；？︶︸︺︼︾﹀﹂﹗］｜｝､]/;
    var regexCannotEndZhTw = /[([{£¥'"‵〈《「『〔〝︴﹙﹛（｛︵︷︹︻︽︿﹁﹃﹏]/;
    var regexCannotStartJaJp = /[)\]｝〕〉》」』】〙〗〟'"｠»ヽヾーァィゥェォッャュョヮヵヶぁぃぅぇぉっゃゅょゎゕゖㇰㇱㇲㇳㇴㇵㇶㇷㇸㇹㇺㇻㇼㇽㇾㇿ々〻‐゠–〜?!‼⁇⁈⁉・、:;,。.]/;
    var regexCannotEndJaJp = /[([｛〔〈《「『【〘〖〝'"｟«—...‥〳〴〵]/;
    var regexCannotStartKoKr = /[!%),.:;?\]}¢°'"†‡℃〆〈《「『〕！％），．：；？］｝]/;
    var regexCannotEndKoKr = /[$([{£¥'"々〇〉》」〔＄（［｛｠￥￦#]/;
    var regexCannotStart = new RegExp("".concat(regexCannotStartZhCn.source, "|").concat(regexCannotStartZhTw.source, "|").concat(regexCannotStartJaJp.source, "|").concat(regexCannotStartKoKr.source));
    var regexCannotEnd = new RegExp("".concat(regexCannotEndZhCn.source, "|").concat(regexCannotEndZhTw.source, "|").concat(regexCannotEndJaJp.source, "|").concat(regexCannotEndKoKr.source));
    /**
     * Borrow from pixi/packages/text/src/TextMetrics.ts
     */
    var TextService = /** @class */ (function () {
        function TextService(runtime) {
            var _this = this;
            this.runtime = runtime;
            /**
             * font metrics cache
             */
            this.fontMetricsCache = {};
            this.shouldBreakByKinsokuShorui = function (char, nextChar) {
                if (_this.isBreakingSpace(nextChar))
                    return false;
                if (char) {
                    // Line breaking rules in CJK (Kinsoku Shori)
                    if (regexCannotEnd.exec(nextChar) || regexCannotStart.exec(char)) {
                        return true;
                    }
                }
                return false;
            };
            this.trimByKinsokuShorui = function (prev) {
                var next = __spreadArray([], __read(prev), false);
                var prevLine = next[next.length - 2];
                if (!prevLine) {
                    return prev;
                }
                var lastChar = prevLine[prevLine.length - 1];
                next[next.length - 2] = prevLine.slice(0, -1);
                next[next.length - 1] = lastChar + next[next.length - 1];
                return next;
            };
        }
        /**
         * Calculates the ascent, descent and fontSize of a given font-style.
         */
        TextService.prototype.measureFont = function (font, offscreenCanvas) {
            // as this method is used for preparing assets, don't recalculate things if we don't need to
            if (this.fontMetricsCache[font]) {
                return this.fontMetricsCache[font];
            }
            var properties = {
                ascent: 0,
                descent: 0,
                fontSize: 0,
            };
            var canvas = this.runtime.offscreenCanvasCreator.getOrCreateCanvas(offscreenCanvas);
            var context = this.runtime.offscreenCanvasCreator.getOrCreateContext(offscreenCanvas, {
                willReadFrequently: true,
            });
            context.font = font;
            var metricsString = TEXT_METRICS.MetricsString + TEXT_METRICS.BaselineSymbol;
            var width = Math.ceil(context.measureText(metricsString).width);
            var baseline = Math.ceil(context.measureText(TEXT_METRICS.BaselineSymbol).width);
            var height = TEXT_METRICS.HeightMultiplier * baseline;
            baseline = (baseline * TEXT_METRICS.BaselineMultiplier) | 0;
            // @ts-ignore
            canvas.width = width;
            // @ts-ignore
            canvas.height = height;
            context.fillStyle = '#f00';
            context.fillRect(0, 0, width, height);
            context.font = font;
            context.textBaseline = 'alphabetic';
            context.fillStyle = '#000';
            context.fillText(metricsString, 0, baseline);
            var imagedata = context.getImageData(0, 0, width || 1, height || 1).data;
            var pixels = imagedata.length;
            var line = width * 4;
            var i = 0;
            var idx = 0;
            var stop = false;
            // ascent. scan from top to bottom until we find a non red pixel
            for (i = 0; i < baseline; ++i) {
                for (var j = 0; j < line; j += 4) {
                    if (imagedata[idx + j] !== 255) {
                        stop = true;
                        break;
                    }
                }
                if (!stop) {
                    idx += line;
                }
                else {
                    break;
                }
            }
            properties.ascent = baseline - i;
            idx = pixels - line;
            stop = false;
            // descent. scan from bottom to top until we find a non red pixel
            for (i = height; i > baseline; --i) {
                for (var j = 0; j < line; j += 4) {
                    if (imagedata[idx + j] !== 255) {
                        stop = true;
                        break;
                    }
                }
                if (!stop) {
                    idx -= line;
                }
                else {
                    break;
                }
            }
            properties.descent = i - baseline;
            properties.fontSize = properties.ascent + properties.descent;
            this.fontMetricsCache[font] = properties;
            return properties;
        };
        TextService.prototype.measureText = function (text, parsedStyle, offscreenCanvas) {
            var fontSize = parsedStyle.fontSize, wordWrap = parsedStyle.wordWrap, strokeHeight = parsedStyle.lineHeight, lineWidth = parsedStyle.lineWidth, textBaseline = parsedStyle.textBaseline, textAlign = parsedStyle.textAlign, letterSpacing = parsedStyle.letterSpacing, textPath = parsedStyle.textPath; parsedStyle.textPathSide; parsedStyle.textPathStartOffset; 
            var // dropShadow = 0,
            // dropShadowDistance = 0,
            _a = parsedStyle.leading, 
            // dropShadow = 0,
            // dropShadowDistance = 0,
            leading = _a === void 0 ? 0 : _a;
            var font = toFontString(parsedStyle);
            // if (runtime.enableCSSParsing) {
            var fontProperties = this.measureFont(font, offscreenCanvas);
            // fallback in case UA disallow canvas data extraction
            // (toDataURI, getImageData functions)
            if (fontProperties.fontSize === 0) {
                fontProperties.fontSize = fontSize;
                fontProperties.ascent = fontSize;
            }
            // } else {
            //   fontProperties = {
            //     fontSize,
            //   };
            // }
            var context = this.runtime.offscreenCanvasCreator.getOrCreateContext(offscreenCanvas);
            context.font = font;
            // no overflowing by default
            parsedStyle.isOverflowing = false;
            var outputText = wordWrap
                ? this.wordWrap(text, parsedStyle, offscreenCanvas)
                : text;
            var lines = outputText.split(/(?:\r\n|\r|\n)/);
            var lineWidths = new Array(lines.length);
            var maxLineWidth = 0;
            // account for textPath
            if (textPath) {
                textPath.getTotalLength();
                // const startingPoint = textPath.getPoint(0);
                for (var i = 0; i < lines.length; i++) {
                    var width = context.measureText(lines[i]).width +
                        (lines[i].length - 1) * letterSpacing;
                    // for (
                    //   let i = reverse ? lines[0].length - 1 : 0;
                    //   reverse ? i >= 0 : i < lines[0].length;
                    //   reverse ? i-- : i++
                    // ) {
                    //   graphemeInfo = lineBounds[i];
                    //   if (positionInPath > totalPathLength) {
                    //     positionInPath %= totalPathLength;
                    //   } else if (positionInPath < 0) {
                    //     positionInPath += totalPathLength;
                    //   }
                    //   // it would probably much faster to send all the grapheme position for a line
                    //   // and calculate path position/angle at once.
                    //   this.setGraphemeOnPath(
                    //     positionInPath,
                    //     graphemeInfo,
                    //     startingPoint
                    //   );
                    //   positionInPath += graphemeInfo.kernedWidth;
                    // }
                }
            }
            else {
                for (var i = 0; i < lines.length; i++) {
                    // char width + letterSpacing
                    var lineWidth_1 = context.measureText(lines[i]).width +
                        (lines[i].length - 1) * letterSpacing;
                    lineWidths[i] = lineWidth_1;
                    maxLineWidth = Math.max(maxLineWidth, lineWidth_1);
                }
                var width = maxLineWidth + lineWidth;
                // if (dropShadow) {
                //   width += dropShadowDistance;
                // }
                var lineHeight_1 = strokeHeight || fontProperties.fontSize + lineWidth;
                var height = Math.max(lineHeight_1, fontProperties.fontSize + lineWidth) +
                    (lines.length - 1) * (lineHeight_1 + leading);
                // if (dropShadow) {
                //   height += dropShadowDistance;
                // }
                lineHeight_1 += leading;
                // handle vertical text baseline
                var offsetY_1 = 0;
                if (textBaseline === 'middle') {
                    offsetY_1 = -height / 2;
                }
                else if (textBaseline === 'bottom' ||
                    textBaseline === 'alphabetic' ||
                    textBaseline === 'ideographic') {
                    offsetY_1 = -height;
                }
                else if (textBaseline === 'top' || textBaseline === 'hanging') {
                    offsetY_1 = 0;
                }
                return {
                    font: font,
                    width: width,
                    height: height,
                    lines: lines,
                    lineWidths: lineWidths,
                    lineHeight: lineHeight_1,
                    maxLineWidth: maxLineWidth,
                    fontProperties: fontProperties,
                    lineMetrics: lineWidths.map(function (width, i) {
                        var offsetX = 0;
                        // handle horizontal text align
                        if (textAlign === 'center' || textAlign === 'middle') {
                            offsetX -= width / 2;
                        }
                        else if (textAlign === 'right' || textAlign === 'end') {
                            offsetX -= width;
                        }
                        return new Rectangle(offsetX - lineWidth / 2, offsetY_1 + i * lineHeight_1, width + lineWidth, lineHeight_1);
                    }),
                };
            }
        };
        TextService.prototype.setGraphemeOnPath = function () { };
        TextService.prototype.wordWrap = function (text, parsedStyle, offscreenCanvas) {
            var _this = this;
            var _a = parsedStyle.wordWrapWidth, wordWrapWidth = _a === void 0 ? 0 : _a, letterSpacing = parsedStyle.letterSpacing, _b = parsedStyle.maxLines, maxLines = _b === void 0 ? Infinity : _b, textOverflow = parsedStyle.textOverflow;
            var context = this.runtime.offscreenCanvasCreator.getOrCreateContext(offscreenCanvas);
            var maxWidth = wordWrapWidth + letterSpacing;
            var ellipsis = '';
            if (textOverflow === 'ellipsis') {
                ellipsis = '...';
            }
            else if (textOverflow && textOverflow !== 'clip') {
                ellipsis = textOverflow;
            }
            var lines = [];
            var currentIndex = 0;
            var currentWidth = 0;
            var cache = {};
            var calcWidth = function (char) {
                return _this.getFromCache(char, letterSpacing, cache, context);
            };
            var ellipsisWidth = Array.from(ellipsis).reduce(function (prev, cur) {
                return prev + calcWidth(cur);
            }, 0);
            var chars = Array.from(text);
            for (var i = 0; i < chars.length; i++) {
                var char = chars[i];
                var prevChar = text[i - 1];
                var nextChar = text[i + 1];
                var charWidth = calcWidth(char);
                if (this.isNewline(char)) {
                    currentIndex++;
                    // exceed maxLines, break immediately
                    if (currentIndex >= maxLines) {
                        parsedStyle.isOverflowing = true;
                        break;
                    }
                    currentWidth = 0;
                    lines[currentIndex] = '';
                    continue;
                }
                if (currentWidth > 0 && currentWidth + charWidth > maxWidth) {
                    if (currentIndex + 1 >= maxLines) {
                        parsedStyle.isOverflowing = true;
                        // If there is not enough space to display the string itself, it is clipped.
                        // @see https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#values
                        if (ellipsisWidth > 0 && ellipsisWidth <= maxWidth) {
                            // Backspace from line's end.
                            var currentLineLength = lines[currentIndex].length;
                            var lastLineWidth = 0;
                            var lastLineIndex = currentLineLength;
                            for (var i_1 = 0; i_1 < currentLineLength; i_1++) {
                                var width = calcWidth(lines[currentIndex][i_1]);
                                if (lastLineWidth + width + ellipsisWidth > maxWidth) {
                                    lastLineIndex = i_1;
                                    break;
                                }
                                lastLineWidth += width;
                            }
                            lines[currentIndex] =
                                (lines[currentIndex] || '').slice(0, lastLineIndex) + ellipsis;
                        }
                        break;
                    }
                    currentIndex++;
                    currentWidth = 0;
                    lines[currentIndex] = '';
                    if (this.isBreakingSpace(char)) {
                        continue;
                    }
                    if (!this.canBreakInLastChar(char)) {
                        lines = this.trimToBreakable(lines);
                        currentWidth = this.sumTextWidthByCache(lines[currentIndex] || '', cache);
                    }
                    if (this.shouldBreakByKinsokuShorui(char, nextChar)) {
                        lines = this.trimByKinsokuShorui(lines);
                        currentWidth += calcWidth(prevChar || '');
                    }
                }
                currentWidth += charWidth;
                lines[currentIndex] = (lines[currentIndex] || '') + char;
            }
            return lines.join('\n');
        };
        TextService.prototype.isBreakingSpace = function (char) {
            if (typeof char !== 'string') {
                return false;
            }
            return TEXT_METRICS.BreakingSpaces.indexOf(char.charCodeAt(0)) >= 0;
        };
        TextService.prototype.isNewline = function (char) {
            if (typeof char !== 'string') {
                return false;
            }
            return TEXT_METRICS.Newlines.indexOf(char.charCodeAt(0)) >= 0;
        };
        TextService.prototype.trimToBreakable = function (prev) {
            var next = __spreadArray([], __read(prev), false);
            var prevLine = next[next.length - 2];
            var index = this.findBreakableIndex(prevLine);
            if (index === -1 || !prevLine)
                return next;
            var trimmedChar = prevLine.slice(index, index + 1);
            var isTrimmedWithSpace = this.isBreakingSpace(trimmedChar);
            var trimFrom = index + 1;
            var trimTo = index + (isTrimmedWithSpace ? 0 : 1);
            next[next.length - 1] += prevLine.slice(trimFrom, prevLine.length);
            next[next.length - 2] = prevLine.slice(0, trimTo);
            return next;
        };
        TextService.prototype.canBreakInLastChar = function (char) {
            if (char && LATIN_REGEX.test(char))
                return false;
            return true;
        };
        TextService.prototype.sumTextWidthByCache = function (text, cache) {
            return text.split('').reduce(function (sum, c) {
                if (!cache[c])
                    throw Error('cannot count the word without cache');
                return sum + cache[c];
            }, 0);
        };
        TextService.prototype.findBreakableIndex = function (line) {
            for (var i = line.length - 1; i >= 0; i--) {
                if (!LATIN_REGEX.test(line[i]))
                    return i;
            }
            return -1;
        };
        TextService.prototype.getFromCache = function (key, letterSpacing, cache, context) {
            var width = cache[key];
            if (typeof width !== 'number') {
                var spacing = key.length * letterSpacing;
                width = context.measureText(key).width + spacing;
                cache[key] = width;
            }
            return width;
        };
        return TextService;
    }());

    var runtime = {};
    /**
     * Replace with IoC container
     */
    var geometryUpdaterFactory = (function () {
        var _a;
        var rectUpdater = new RectUpdater();
        var polylineUpdater = new PolylineUpdater();
        return _a = {},
            _a[Shape.CIRCLE] = new CircleUpdater(),
            _a[Shape.ELLIPSE] = new EllipseUpdater(),
            _a[Shape.RECT] = rectUpdater,
            _a[Shape.IMAGE] = rectUpdater,
            _a[Shape.GROUP] = rectUpdater,
            _a[Shape.LINE] = new LineUpdater(),
            _a[Shape.TEXT] = new TextUpdater(runtime),
            _a[Shape.POLYLINE] = polylineUpdater,
            _a[Shape.POLYGON] = polylineUpdater,
            _a[Shape.PATH] = new PathUpdater(),
            _a[Shape.HTML] = null,
            _a[Shape.MESH] = null,
            _a;
    })();
    var CSSPropertySyntaxFactory = (function () {
        var _a;
        var color = new CSSPropertyColor();
        var length = new CSSPropertyLengthOrPercentage();
        return _a = {},
            _a[PropertySyntax.PERCENTAGE] = null,
            _a[PropertySyntax.NUMBER] = new CSSPropertyNumber(),
            _a[PropertySyntax.ANGLE] = new CSSPropertyAngle(),
            _a[PropertySyntax.DEFINED_PATH] = new CSSPropertyClipPath(),
            _a[PropertySyntax.PAINT] = color,
            _a[PropertySyntax.COLOR] = color,
            _a[PropertySyntax.FILTER] = new CSSPropertyFilter(),
            _a[PropertySyntax.LENGTH] = length,
            _a[PropertySyntax.LENGTH_PERCENTAGE] = length,
            _a[PropertySyntax.LENGTH_PERCENTAGE_12] = new CSSPropertyLengthOrPercentage12(),
            _a[PropertySyntax.LENGTH_PERCENTAGE_14] = new CSSPropertyLengthOrPercentage14(),
            _a[PropertySyntax.COORDINATE] = new CSSPropertyLocalPosition(),
            _a[PropertySyntax.OFFSET_DISTANCE] = new CSSPropertyOffsetDistance(),
            _a[PropertySyntax.OPACITY_VALUE] = new CSSPropertyOpacity(),
            _a[PropertySyntax.PATH] = new CSSPropertyPath(),
            _a[PropertySyntax.LIST_OF_POINTS] = new CSSPropertyPoints(),
            _a[PropertySyntax.SHADOW_BLUR] = new CSSPropertyShadowBlur(),
            _a[PropertySyntax.TEXT] = new CSSPropertyText(),
            _a[PropertySyntax.TEXT_TRANSFORM] = new CSSPropertyTextTransform(),
            _a[PropertySyntax.TRANSFORM] = new CSSPropertyTransform(),
            _a[PropertySyntax.TRANSFORM_ORIGIN] = new CSSPropertyTransformOrigin(),
            _a[PropertySyntax.Z_INDEX] = new CSSPropertyZIndex(),
            _a[PropertySyntax.MARKER] = new CSSPropertyMarker(),
            _a;
    })();
    var getGlobalThis = function () {
        if (typeof globalThis !== 'undefined')
            return globalThis;
        if (typeof self !== 'undefined')
            return self;
        if (typeof window !== 'undefined')
            return window;
        // @ts-ignore
        if (typeof global !== 'undefined')
            return global;
        return {};
        // [!] Error: The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
        // @see https://rollupjs.org/troubleshooting/#error-this-is-undefined
        // if (typeof this !== 'undefined') return this;
    };
    /**
     * Camera
     * `g-camera-api` will provide an advanced implementation
     */
    runtime.CameraContribution = Camera;
    /**
     * `g-web-animations-api` will provide an AnimationTimeline
     */
    runtime.AnimationTimeline = null;
    runtime.EasingFunction = null;
    runtime.offscreenCanvasCreator = new OffscreenCanvasCreator();
    runtime.sceneGraphSelector = new DefaultSceneGraphSelector();
    runtime.sceneGraphService = new DefaultSceneGraphService(runtime);
    runtime.textService = new TextService(runtime);
    runtime.geometryUpdaterFactory = geometryUpdaterFactory;
    runtime.CSSPropertySyntaxFactory = CSSPropertySyntaxFactory;
    runtime.styleValueRegistry = new DefaultStyleValueRegistry(runtime);
    runtime.layoutRegistry = null;
    runtime.globalThis = getGlobalThis();
    runtime.enableCSSParsing = true;
    runtime.enableDataset = false;
    runtime.enableStyleSyntax = true;
    runtime.enableSizeAttenuation = false;

    var entityCounter = 0;
    var insertedEvent = new MutationEvent(ElementEvent.INSERTED, null, '', '', '', 0, '', '');
    var removedEvent = new MutationEvent(ElementEvent.REMOVED, null, '', '', '', 0, '', '');
    var destroyEvent = new CustomEvent(ElementEvent.DESTROY);
    /**
     * Has following capabilities:
     * * Node insert/remove, eg. appendChild, removeChild, remove...
     * * Query eg. querySelector getElementById...
     * * Animation
     */
    var Element = /** @class */ (function (_super) {
        __extends(Element, _super);
        function Element() {
            var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
            /**
             * Unique id.
             */
            _this.entity = entityCounter++;
            _this.renderable = {
                bounds: undefined,
                boundsDirty: true,
                renderBounds: undefined,
                renderBoundsDirty: true,
                dirtyRenderBounds: undefined,
                dirty: false,
            };
            _this.cullable = {
                strategy: Strategy.Standard,
                visibilityPlaneMask: -1,
                visible: true,
                enable: true,
            };
            _this.transformable = {
                dirtyFlag: false,
                localDirtyFlag: false,
                frozen: false,
                localPosition: [0, 0, 0],
                localRotation: [0, 0, 0, 1],
                localScale: [1, 1, 1],
                localTransform: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
                localSkew: [0, 0],
                position: [0, 0, 0],
                rotation: [0, 0, 0, 1],
                scaling: [1, 1, 1],
                worldTransform: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
                origin: [0, 0, 0],
            };
            _this.sortable = {
                dirty: false,
                sorted: undefined,
                renderOrder: 0,
                dirtyChildren: [],
                dirtyReason: undefined,
            };
            _this.geometry = {
                contentBounds: undefined,
                renderBounds: undefined,
            };
            _this.rBushNode = {
                aabb: undefined,
            };
            /**
             * https://developer.mozilla.org/zh-CN/docs/Web/API/Element/namespaceURI
             */
            _this.namespaceURI = 'g';
            _this.scrollLeft = 0;
            _this.scrollTop = 0;
            /**
             * We don't support border now
             * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop
             */
            _this.clientTop = 0;
            _this.clientLeft = 0;
            /**
             * is destroyed or not
             */
            _this.destroyed = false;
            /**
             * compatible with `style`
             * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
             */
            _this.style = {};
            _this.computedStyle = runtime.enableCSSParsing
                ? {
                    anchor: unsetKeywordValue,
                    opacity: unsetKeywordValue,
                    fillOpacity: unsetKeywordValue,
                    strokeOpacity: unsetKeywordValue,
                    fill: unsetKeywordValue,
                    stroke: unsetKeywordValue,
                    transform: unsetKeywordValue,
                    transformOrigin: unsetKeywordValue,
                    visibility: unsetKeywordValue,
                    pointerEvents: unsetKeywordValue,
                    lineWidth: unsetKeywordValue,
                    lineCap: unsetKeywordValue,
                    lineJoin: unsetKeywordValue,
                    increasedLineWidthForHitTesting: unsetKeywordValue,
                    fontSize: unsetKeywordValue,
                    fontFamily: unsetKeywordValue,
                    fontStyle: unsetKeywordValue,
                    fontWeight: unsetKeywordValue,
                    fontVariant: unsetKeywordValue,
                    textAlign: unsetKeywordValue,
                    textBaseline: unsetKeywordValue,
                    textTransform: unsetKeywordValue,
                    zIndex: unsetKeywordValue,
                    filter: unsetKeywordValue,
                    shadowType: unsetKeywordValue,
                }
                : null;
            /**
             * Renderers will use these used values.
             */
            _this.parsedStyle = {
            // opacity: '',
            // fillOpacity: '',
            // strokeOpacity: '',
            // transformOrigin: '',
            // visibility: '',
            // pointerEvents: '',
            // lineWidth: '',
            // lineCap: '',
            // lineJoin: '',
            // increasedLineWidthForHitTesting: '',
            // fontSize: '',
            // fontFamily: '',
            // fontStyle: '',
            // fontWeight: '',
            // fontVariant: '',
            // textAlign: '',
            // textBaseline: '',
            // textTransform: '',
            };
            /**
             * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes
             */
            _this.attributes = {};
            return _this;
        }
        Object.defineProperty(Element.prototype, "className", {
            /**
             * used in `getElementsByClassName`
             * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
             */
            get: function () {
                // @ts-ignore
                return this.getAttribute('class') || '';
            },
            set: function (className) {
                this.setAttribute('class', className);
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Element.prototype, "classList", {
            /**
             * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
             */
            get: function () {
                return this.className.split(' ').filter(function (c) { return c !== ''; });
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Element.prototype, "tagName", {
            get: function () {
                return this.nodeName;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Element.prototype, "children", {
            get: function () {
                return this.childNodes;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Element.prototype, "childElementCount", {
            get: function () {
                return this.childNodes.length;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Element.prototype, "firstElementChild", {
            get: function () {
                return this.firstChild;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Element.prototype, "lastElementChild", {
            get: function () {
                return this.lastChild;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Element.prototype, "parentElement", {
            get: function () {
                return this.parentNode;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Element.prototype, "nextSibling", {
            get: function () {
                if (this.parentNode) {
                    var index = this.parentNode.childNodes.indexOf(this);
                    return this.parentNode.childNodes[index + 1] || null;
                }
                return null;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Element.prototype, "previousSibling", {
            get: function () {
                if (this.parentNode) {
                    var index = this.parentNode.childNodes.indexOf(this);
                    return this.parentNode.childNodes[index - 1] || null;
                }
                return null;
            },
            enumerable: false,
            configurable: true
        });
        Element.prototype.cloneNode = function (deep) {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        Element.prototype.appendChild = function (child, index) {
            var _a;
            if (child.destroyed) {
                throw new Error(ERROR_MSG_APPEND_DESTROYED_ELEMENT);
            }
            runtime.sceneGraphService.attach(child, this, index);
            if ((_a = this.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView) {
                this.ownerDocument.defaultView.mountChildren(child);
            }
            insertedEvent.relatedNode = this;
            child.dispatchEvent(insertedEvent);
            return child;
        };
        Element.prototype.insertBefore = function (newChild, refChild) {
            if (!refChild) {
                this.appendChild(newChild);
            }
            else {
                if (newChild.parentElement) {
                    newChild.parentElement.removeChild(newChild);
                }
                var index = this.childNodes.indexOf(refChild);
                if (index === -1) {
                    this.appendChild(newChild);
                }
                else {
                    this.appendChild(newChild, index);
                }
            }
            return newChild;
        };
        Element.prototype.replaceChild = function (newChild, oldChild) {
            var index = this.childNodes.indexOf(oldChild);
            this.removeChild(oldChild);
            this.appendChild(newChild, index);
            return oldChild;
        };
        Element.prototype.removeChild = function (child) {
            var _a;
            // should emit on itself before detach
            removedEvent.relatedNode = this;
            child.dispatchEvent(removedEvent);
            if ((_a = child.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView) {
                child.ownerDocument.defaultView.unmountChildren(child);
            }
            // remove from scene graph
            runtime.sceneGraphService.detach(child);
            return child;
        };
        /**
         * Remove all children which can be appended to its original parent later again.
         */
        Element.prototype.removeChildren = function () {
            for (var i = this.childNodes.length - 1; i >= 0; i--) {
                var child = this.childNodes[i];
                this.removeChild(child);
            }
        };
        /**
         * Recursively destroy all children which can not be appended to its original parent later again.
         */
        Element.prototype.destroyChildren = function () {
            for (var i = this.childNodes.length - 1; i >= 0; i--) {
                var child = this.childNodes[i];
                if (child.childNodes.length) {
                    child.destroyChildren();
                }
                child.destroy();
            }
        };
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
         */
        Element.prototype.matches = function (selector) {
            return runtime.sceneGraphService.matches(selector, this);
        };
        Element.prototype.getElementById = function (id) {
            return runtime.sceneGraphService.querySelector("#".concat(id), this);
        };
        Element.prototype.getElementsByName = function (name) {
            return runtime.sceneGraphService.querySelectorAll("[name=\"".concat(name, "\"]"), this);
        };
        Element.prototype.getElementsByClassName = function (className) {
            return runtime.sceneGraphService.querySelectorAll(".".concat(className), this);
        };
        Element.prototype.getElementsByTagName = function (tagName) {
            return runtime.sceneGraphService.querySelectorAll(tagName, this);
        };
        Element.prototype.querySelector = function (selectors) {
            return runtime.sceneGraphService.querySelector(selectors, this);
        };
        Element.prototype.querySelectorAll = function (selectors) {
            return runtime.sceneGraphService.querySelectorAll(selectors, this);
        };
        /**
         * should traverses the element and its parents (heading toward the document root)
         * until it finds a node that matches the specified CSS selector.
         * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/closest
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#polyfill
         */
        Element.prototype.closest = function (selectors) {
            var el = this;
            do {
                if (runtime.sceneGraphService.matches(selectors, el))
                    return el;
                el = el.parentElement;
            } while (el !== null);
            return null;
        };
        /**
         * search in scene group, but should not include itself
         */
        Element.prototype.find = function (filter) {
            var _this = this;
            var target = null;
            this.forEach(function (object) {
                if (object !== _this && filter(object)) {
                    target = object;
                    return true;
                }
                return false;
            });
            return target;
        };
        Element.prototype.findAll = function (filter) {
            var _this = this;
            var objects = [];
            this.forEach(function (object) {
                if (object !== _this && filter(object)) {
                    objects.push(object);
                }
            });
            return objects;
        };
        /**
         * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/after
         */
        Element.prototype.after = function () {
            var _this = this;
            var nodes = [];
            for (var _i = 0; _i < arguments.length; _i++) {
                nodes[_i] = arguments[_i];
            }
            if (this.parentNode) {
                var index_1 = this.parentNode.childNodes.indexOf(this);
                nodes.forEach(function (node, i) { var _a; return (_a = _this.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(node, index_1 + i + 1); });
            }
        };
        /**
         * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/before
         */
        Element.prototype.before = function () {
            var _a;
            var nodes = [];
            for (var _i = 0; _i < arguments.length; _i++) {
                nodes[_i] = arguments[_i];
            }
            if (this.parentNode) {
                var index = this.parentNode.childNodes.indexOf(this);
                var _b = __read(nodes), first = _b[0], rest = _b.slice(1);
                this.parentNode.appendChild(first, index);
                (_a = first).after.apply(_a, __spreadArray([], __read(rest), false));
            }
        };
        /**
         * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/replaceWith
         */
        Element.prototype.replaceWith = function () {
            var nodes = [];
            for (var _i = 0; _i < arguments.length; _i++) {
                nodes[_i] = arguments[_i];
            }
            this.after.apply(this, __spreadArray([], __read(nodes), false));
            this.remove();
        };
        /**
         * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/append
         */
        Element.prototype.append = function () {
            var _this = this;
            var nodes = [];
            for (var _i = 0; _i < arguments.length; _i++) {
                nodes[_i] = arguments[_i];
            }
            nodes.forEach(function (node) { return _this.appendChild(node); });
        };
        /**
         * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/prepend
         */
        Element.prototype.prepend = function () {
            var _this = this;
            var nodes = [];
            for (var _i = 0; _i < arguments.length; _i++) {
                nodes[_i] = arguments[_i];
            }
            nodes.forEach(function (node, i) { return _this.appendChild(node, i); });
        };
        /**
         * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/replaceChildren
         */
        Element.prototype.replaceChildren = function () {
            var nodes = [];
            for (var _i = 0; _i < arguments.length; _i++) {
                nodes[_i] = arguments[_i];
            }
            while (this.childNodes.length && this.firstChild) {
                this.removeChild(this.firstChild);
            }
            this.append.apply(this, __spreadArray([], __read(nodes), false));
        };
        /**
         * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/remove
         */
        Element.prototype.remove = function () {
            if (this.parentNode) {
                return this.parentNode.removeChild(this);
            }
            return this;
        };
        Element.prototype.destroy = function () {
            // destroy itself before remove
            this.dispatchEvent(destroyEvent);
            // remove from scenegraph first
            this.remove();
            // remove event listeners
            this.emitter.removeAllListeners();
            this.destroyed = true;
        };
        Element.prototype.getGeometryBounds = function () {
            return runtime.sceneGraphService.getGeometryBounds(this);
        };
        Element.prototype.getRenderBounds = function () {
            return runtime.sceneGraphService.getBounds(this, true);
        };
        /**
         * get bounds in world space, account for children
         */
        Element.prototype.getBounds = function () {
            return runtime.sceneGraphService.getBounds(this);
        };
        /**
         * get bounds in local space, account for children
         */
        Element.prototype.getLocalBounds = function () {
            return runtime.sceneGraphService.getLocalBounds(this);
        };
        /**
         * account for context's bounds in client space,
         * but not accounting for children
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
         */
        Element.prototype.getBoundingClientRect = function () {
            return runtime.sceneGraphService.getBoundingClientRect(this);
        };
        /**
         * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getClientRects
         */
        Element.prototype.getClientRects = function () {
            return [this.getBoundingClientRect()];
        };
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/computedStyleMap
         * eg. circle.computedStyleMap().get('fill');
         */
        Element.prototype.computedStyleMap = function () {
            return new Map(Object.entries(this.computedStyle));
        };
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttributeNames
         */
        Element.prototype.getAttributeNames = function () {
            return Object.keys(this.attributes);
        };
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute
         */
        Element.prototype.getAttribute = function (name) {
            // @see https://github.com/antvis/G/issues/1267
            if (isSymbol(name)) {
                return runtime.enableCSSParsing ? null : undefined;
            }
            var value = this.attributes[name];
            if (value === undefined) {
                var attributeName = formatAttributeName(name);
                value = this.attributes[attributeName];
                // if the given attribute does not exist, the value returned will either be null or ""
                return runtime.enableCSSParsing ? (isNil(value) ? null : value) : value;
            }
            else {
                return value;
            }
        };
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttribute
         */
        Element.prototype.hasAttribute = function (qualifiedName) {
            return this.getAttributeNames().includes(qualifiedName);
        };
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttributes
         */
        Element.prototype.hasAttributes = function () {
            return !!this.getAttributeNames().length;
        };
        /**
         * should use removeAttribute() instead of setting the attribute value to null either directly or using setAttribute(). Many attributes will not behave as expected if you set them to null.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute
         */
        Element.prototype.removeAttribute = function (attributeName) {
            this.setAttribute(attributeName, null);
            delete this.attributes[attributeName];
        };
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
         */
        Element.prototype.setAttribute = function (attributeName, value, force) {
            this.attributes[attributeName] = value;
        };
        Element.prototype.getAttributeNS = function (namespace, localName) {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        Element.prototype.getAttributeNode = function (qualifiedName) {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        Element.prototype.getAttributeNodeNS = function (namespace, localName) {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        Element.prototype.hasAttributeNS = function (namespace, localName) {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        Element.prototype.removeAttributeNS = function (namespace, localName) {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        Element.prototype.removeAttributeNode = function (attr) {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        Element.prototype.setAttributeNS = function (namespace, qualifiedName, value) {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        Element.prototype.setAttributeNode = function (attr) {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        Element.prototype.setAttributeNodeNS = function (attr) {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        Element.prototype.toggleAttribute = function (qualifiedName, force) {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        return Element;
    }(Node));

    function isDisplayObject(value) {
        return !!(value === null || value === void 0 ? void 0 : value.nodeName);
    }
    var mutationEvent = new MutationEvent(ElementEvent.ATTR_MODIFIED, null, null, null, null, MutationEvent.MODIFICATION, null, null);
    var DEFAULT_STYLE_PROPS = {
        anchor: '',
        opacity: '',
        fillOpacity: '',
        strokeOpacity: '',
        fill: '',
        stroke: '',
        transform: '',
        transformOrigin: '',
        visibility: '',
        pointerEvents: '',
        lineWidth: '',
        lineCap: '',
        lineJoin: '',
        increasedLineWidthForHitTesting: '',
        fontSize: '',
        fontFamily: '',
        fontStyle: '',
        fontWeight: '',
        fontVariant: '',
        textAlign: '',
        textBaseline: '',
        textTransform: '',
        zIndex: '',
        filter: '',
        shadowType: '',
    };
    var DEFAULT_PARSED_STYLE_PROPS = {
        anchor: [0, 0],
        fill: noneColor,
        stroke: noneColor,
        transform: [],
        zIndex: 0,
        filter: [],
        shadowType: 'outer',
        miterLimit: 10,
    };
    var DEFAULT_PARSED_STYLE_PROPS_CSS_DISABLED = __assign(__assign({}, DEFAULT_PARSED_STYLE_PROPS), { opacity: 1, fillOpacity: 1, strokeOpacity: 1, visibility: 'visible', pointerEvents: 'auto', lineWidth: 1, lineCap: 'butt', lineJoin: 'miter', increasedLineWidthForHitTesting: 0, fillRule: 'nonzero' });
    var INHERITABLE_BASE_STYLE_PROPS = [
        'opacity',
        'fillOpacity',
        'strokeOpacity',
        'transformOrigin',
        'visibility',
        'pointerEvents',
        'lineWidth',
        'lineCap',
        'lineJoin',
        'increasedLineWidthForHitTesting',
    ];
    var INHERITABLE_STYLE_PROPS = __spreadArray(__spreadArray([], __read(INHERITABLE_BASE_STYLE_PROPS), false), [
        'fontSize',
        'fontFamily',
        'fontStyle',
        'fontWeight',
        'fontVariant',
        'textAlign',
        'textBaseline',
        'textTransform',
    ], false);
    var DATASET_PREFIX = 'data-';
    /**
     * prototype chains: DisplayObject -> Element -> Node -> EventTarget
     *
     * mixins: Animatable, Transformable, Visible
     * @see https://github.com/tannerntannern/ts-mixer/blob/master/README.md#mixing-generic-classes
     *
     * Provide abilities in scene graph, such as:
     * * transform `translate/rotate/scale`
     * * add/remove child
     * * visibility and z-index
     *
     * Those abilities are implemented with those components: `Transform/Sortable/Visible`.
     *
     * Emit following events:
     * * init
     * * destroy
     * * attributeChanged
     */
    var DisplayObject = /** @class */ (function (_super) {
        __extends(DisplayObject, _super);
        function DisplayObject(config) {
            var _a;
            var _this = _super.call(this) || this;
            _this.isCustomElement = false;
            _this.isMutationObserved = false;
            /**
             * push to active animations after calling `animate()`
             */
            _this.activeAnimations = [];
            /**
             * Use `this.style.clipPath` instead.
             * @deprecated
             */
            _this.getClip = function () {
                return this.style.clipPath || null;
            };
            // assign name, id to config
            // eg. group.get('name')
            _this.config = config;
            // compatible with G 3.0
            _this.config.interactive = (_a = _this.config.capture) !== null && _a !== void 0 ? _a : _this.config.interactive;
            // init scene graph node
            _this.id = _this.config.id || '';
            _this.name = _this.config.name || '';
            if (_this.config.className || _this.config.class) {
                _this.className = _this.config.className || _this.config.class;
            }
            _this.nodeName = _this.config.type || Shape.GROUP;
            // compatible with G 3.0
            _this.config.style =
                _this.config.style || _this.config.attrs || {};
            Object.assign(_this.config.style, _this.config.attrs);
            // this.config.style = {
            //   // ...DEFAULT_STYLE_PROPS,
            //   ...this.config.style,
            //   ...this.config.attrs,
            // };
            if (_this.config.visible != null) {
                _this.config.style.visibility =
                    _this.config.visible === false ? 'hidden' : 'visible';
            }
            if (_this.config.interactive != null) {
                _this.config.style.pointerEvents =
                    _this.config.interactive === false ? 'none' : 'auto';
            }
            // merge parsed value
            Object.assign(_this.parsedStyle, runtime.enableCSSParsing
                ? DEFAULT_PARSED_STYLE_PROPS
                : DEFAULT_PARSED_STYLE_PROPS_CSS_DISABLED, _this.config.initialParsedStyle);
            if (runtime.enableCSSParsing) {
                Object.assign(_this.attributes, DEFAULT_STYLE_PROPS);
            }
            // start to process attributes
            _this.initAttributes(_this.config.style);
            var Proxy = runtime.globalThis.Proxy
                ? runtime.globalThis.Proxy
                : function () { };
            if (runtime.enableDataset) {
                _this.dataset = new Proxy({}, {
                    get: function (target, name) {
                        var formattedName = "".concat(DATASET_PREFIX).concat(kebabize(name));
                        if (target[formattedName] !== undefined) {
                            return target[formattedName];
                        }
                        return _this.getAttribute(formattedName);
                    },
                    set: function (_, prop, value) {
                        _this.setAttribute("".concat(DATASET_PREFIX).concat(kebabize(prop)), value);
                        return true;
                    },
                });
            }
            if (runtime.enableStyleSyntax) {
                _this.style = new Proxy(
                // @ts-ignore
                {
                    // ...this.attributes,
                    setProperty: function (propertyName, value) {
                        _this.setAttribute(propertyName, value);
                    },
                    getPropertyValue: function (propertyName) {
                        return _this.getAttribute(propertyName);
                    },
                    removeProperty: function (propertyName) {
                        _this.removeAttribute(propertyName);
                    },
                    item: function () {
                        return '';
                    },
                }, {
                    get: function (target, name) {
                        if (target[name] !== undefined) {
                            // if (name in target) {
                            return target[name];
                        }
                        return _this.getAttribute(name);
                    },
                    set: function (_, prop, value) {
                        _this.setAttribute(prop, value);
                        return true;
                    },
                });
            }
            return _this;
        }
        DisplayObject.prototype.destroy = function () {
            _super.prototype.destroy.call(this);
            // stop all active animations
            this.getAnimations().forEach(function (animation) {
                animation.cancel();
            });
            // FIXME
            // this.renderable = null;
            // this.cullable = null;
            // this.transformable = null;
            // this.rBushNode = null;
            // this.geometry = null;
            // this.sortable = null;
        };
        DisplayObject.prototype.cloneNode = function (deep, customCloneFunc) {
            var clonedStyle = __assign({}, this.attributes);
            for (var attributeName in clonedStyle) {
                var attribute = clonedStyle[attributeName];
                // @see https://github.com/antvis/G/issues/1095
                if (isDisplayObject(attribute) &&
                    // share the same clipPath if possible
                    attributeName !== 'clipPath' &&
                    attributeName !== 'offsetPath' &&
                    attributeName !== 'textPath') {
                    clonedStyle[attributeName] = attribute.cloneNode(deep);
                }
                // TODO: clone other type
                if (customCloneFunc) {
                    clonedStyle[attributeName] = customCloneFunc(attributeName, attribute);
                }
            }
            var cloned = new this.constructor({
                // copy id & name
                // @see https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode#notes
                id: this.id,
                name: this.name,
                className: this.name,
                interactive: this.interactive,
                style: clonedStyle,
            });
            // apply transform
            cloned.setLocalTransform(this.getLocalTransform());
            if (deep) {
                this.children.forEach(function (child) {
                    // skip marker
                    if (!child.style.isMarker) {
                        var clonedChild = child.cloneNode(deep);
                        cloned.appendChild(clonedChild);
                    }
                });
            }
            return cloned;
        };
        DisplayObject.prototype.initAttributes = function (attributes) {
            if (attributes === void 0) { attributes = {}; }
            var renderable = this.renderable;
            var options = {
                forceUpdateGeometry: true,
                // usedAttributes:
                //   // only Group / Text should account for text relative props
                //   this.tagName === Shape.GROUP || this.tagName === Shape.TEXT
                //     ? INHERITABLE_STYLE_PROPS
                //     : INHERITABLE_BASE_STYLE_PROPS,
            };
            if (runtime.enableCSSParsing) {
                // @ts-ignore
                options.usedAttributes = INHERITABLE_STYLE_PROPS;
            }
            // account for FCP, process properties as less as possible
            var formattedAttributes = {};
            for (var name_1 in attributes) {
                var attributeName = formatAttributeName(name_1);
                formattedAttributes[attributeName] = attributes[name_1];
            }
            runtime.styleValueRegistry.processProperties(this, formattedAttributes, options);
            // redraw at next frame
            renderable.dirty = true;
        };
        DisplayObject.prototype.setAttribute = function (name, value, force, memoize) {
            if (force === void 0) { force = false; }
            if (memoize === void 0) { memoize = true; }
            var attributeName = formatAttributeName(name);
            // ignore undefined value
            if (isUndefined(value)) {
                return;
            }
            if (force || value !== this.attributes[attributeName]) {
                this.internalSetAttribute(attributeName, value, { memoize: memoize });
                _super.prototype.setAttribute.call(this, attributeName, value);
            }
        };
        /**
         * called when attributes get changed or initialized
         */
        DisplayObject.prototype.internalSetAttribute = function (name, value, parseOptions) {
            var _a;
            if (parseOptions === void 0) { parseOptions = {}; }
            var renderable = this.renderable;
            var oldValue = this.attributes[name];
            var oldParsedValue = this.parsedStyle[name];
            runtime.styleValueRegistry.processProperties(this, (_a = {},
                _a[name] = value,
                _a), parseOptions);
            // redraw at next frame
            renderable.dirty = true;
            var newParsedValue = this.parsedStyle[name];
            if (this.isConnected) {
                mutationEvent.relatedNode = this;
                mutationEvent.prevValue = oldValue;
                mutationEvent.newValue = value;
                mutationEvent.attrName = name;
                mutationEvent.prevParsedValue = oldParsedValue;
                mutationEvent.newParsedValue = newParsedValue;
                if (this.isMutationObserved) {
                    this.dispatchEvent(mutationEvent);
                }
                else {
                    mutationEvent.target = this;
                    this.ownerDocument.defaultView.dispatchEvent(mutationEvent, true);
                }
            }
            if (((this.isCustomElement && this.isConnected) || !this.isCustomElement) &&
                this.attributeChangedCallback) {
                this.attributeChangedCallback(name, oldValue, value, oldParsedValue, newParsedValue);
            }
        };
        // #region transformable
        /**
         * returns different values than getBoundingClientRect(), as the latter returns value relative to the viewport
         * @see https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/getBBox
         *
         * FIXME: It is worth noting that getBBox responds to original untransformed values of a drawn object.
         * @see https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#getBBox
         */
        DisplayObject.prototype.getBBox = function () {
            var aabb = this.getBounds();
            var _a = __read(aabb.getMin(), 2), left = _a[0], top = _a[1];
            var _b = __read(aabb.getMax(), 2), right = _b[0], bottom = _b[1];
            return new Rectangle(left, top, right - left, bottom - top);
        };
        DisplayObject.prototype.setOrigin = function (position, y, z) {
            if (y === void 0) { y = 0; }
            if (z === void 0) { z = 0; }
            runtime.sceneGraphService.setOrigin(this, createVec3(position, y, z));
            return this;
        };
        DisplayObject.prototype.getOrigin = function () {
            return runtime.sceneGraphService.getOrigin(this);
        };
        /**
         * set position in world space
         */
        DisplayObject.prototype.setPosition = function (position, y, z) {
            if (y === void 0) { y = 0; }
            if (z === void 0) { z = 0; }
            runtime.sceneGraphService.setPosition(this, createVec3(position, y, z));
            return this;
        };
        /**
         * set position in local space
         */
        DisplayObject.prototype.setLocalPosition = function (position, y, z) {
            if (y === void 0) { y = 0; }
            if (z === void 0) { z = 0; }
            runtime.sceneGraphService.setLocalPosition(this, createVec3(position, y, z));
            return this;
        };
        /**
         * translate in world space
         */
        DisplayObject.prototype.translate = function (position, y, z) {
            if (y === void 0) { y = 0; }
            if (z === void 0) { z = 0; }
            runtime.sceneGraphService.translate(this, createVec3(position, y, z));
            return this;
        };
        /**
         * translate in local space
         */
        DisplayObject.prototype.translateLocal = function (position, y, z) {
            if (y === void 0) { y = 0; }
            if (z === void 0) { z = 0; }
            runtime.sceneGraphService.translateLocal(this, createVec3(position, y, z));
            return this;
        };
        DisplayObject.prototype.getPosition = function () {
            return runtime.sceneGraphService.getPosition(this);
        };
        DisplayObject.prototype.getLocalPosition = function () {
            return runtime.sceneGraphService.getLocalPosition(this);
        };
        /**
         * compatible with G 3.0
         *
         * scaling in local space
         * scale(10) = scale(10, 10, 10)
         *
         * we can't set scale in world space
         */
        DisplayObject.prototype.scale = function (scaling, y, z) {
            return this.scaleLocal(scaling, y, z);
        };
        DisplayObject.prototype.scaleLocal = function (scaling, y, z) {
            if (typeof scaling === 'number') {
                y = y || scaling;
                z = z || scaling;
                scaling = createVec3(scaling, y, z);
            }
            runtime.sceneGraphService.scaleLocal(this, scaling);
            return this;
        };
        /**
         * set scaling in local space
         */
        DisplayObject.prototype.setLocalScale = function (scaling, y, z) {
            if (typeof scaling === 'number') {
                y = y || scaling;
                z = z || scaling;
                scaling = createVec3(scaling, y, z);
            }
            runtime.sceneGraphService.setLocalScale(this, scaling);
            return this;
        };
        /**
         * get scaling in local space
         */
        DisplayObject.prototype.getLocalScale = function () {
            return runtime.sceneGraphService.getLocalScale(this);
        };
        /**
         * get scaling in world space
         */
        DisplayObject.prototype.getScale = function () {
            return runtime.sceneGraphService.getScale(this);
        };
        /**
         * only return degrees of Z axis in world space
         */
        DisplayObject.prototype.getEulerAngles = function () {
            var _a = __read(getEuler(create$2(), runtime.sceneGraphService.getWorldTransform(this)), 3), ez = _a[2];
            return rad2deg(ez);
        };
        /**
         * only return degrees of Z axis in local space
         */
        DisplayObject.prototype.getLocalEulerAngles = function () {
            var _a = __read(getEuler(create$2(), runtime.sceneGraphService.getLocalRotation(this)), 3), ez = _a[2];
            return rad2deg(ez);
        };
        /**
         * set euler angles(degrees) in world space
         */
        DisplayObject.prototype.setEulerAngles = function (z) {
            runtime.sceneGraphService.setEulerAngles(this, 0, 0, z);
            return this;
        };
        /**
         * set euler angles(degrees) in local space
         */
        DisplayObject.prototype.setLocalEulerAngles = function (z) {
            runtime.sceneGraphService.setLocalEulerAngles(this, 0, 0, z);
            return this;
        };
        DisplayObject.prototype.rotateLocal = function (x, y, z) {
            if (isNil(y) && isNil(z)) {
                runtime.sceneGraphService.rotateLocal(this, 0, 0, x);
            }
            else {
                runtime.sceneGraphService.rotateLocal(this, x, y, z);
            }
            return this;
        };
        DisplayObject.prototype.rotate = function (x, y, z) {
            if (isNil(y) && isNil(z)) {
                runtime.sceneGraphService.rotate(this, 0, 0, x);
            }
            else {
                runtime.sceneGraphService.rotate(this, x, y, z);
            }
            return this;
        };
        DisplayObject.prototype.setRotation = function (rotation, y, z, w) {
            runtime.sceneGraphService.setRotation(this, rotation, y, z, w);
            return this;
        };
        DisplayObject.prototype.setLocalRotation = function (rotation, y, z, w) {
            runtime.sceneGraphService.setLocalRotation(this, rotation, y, z, w);
            return this;
        };
        DisplayObject.prototype.setLocalSkew = function (skew, y) {
            runtime.sceneGraphService.setLocalSkew(this, skew, y);
            return this;
        };
        DisplayObject.prototype.getRotation = function () {
            return runtime.sceneGraphService.getRotation(this);
        };
        DisplayObject.prototype.getLocalRotation = function () {
            return runtime.sceneGraphService.getLocalRotation(this);
        };
        DisplayObject.prototype.getLocalSkew = function () {
            return runtime.sceneGraphService.getLocalSkew(this);
        };
        DisplayObject.prototype.getLocalTransform = function () {
            return runtime.sceneGraphService.getLocalTransform(this);
        };
        DisplayObject.prototype.getWorldTransform = function () {
            return runtime.sceneGraphService.getWorldTransform(this);
        };
        DisplayObject.prototype.setLocalTransform = function (transform) {
            runtime.sceneGraphService.setLocalTransform(this, transform);
            return this;
        };
        DisplayObject.prototype.resetLocalTransform = function () {
            runtime.sceneGraphService.resetLocalTransform(this);
        };
        // #endregion transformable
        // #region animatable
        /**
         * returns an array of all Animation objects affecting this element
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/getAnimations
         */
        DisplayObject.prototype.getAnimations = function () {
            return this.activeAnimations;
        };
        /**
         * create an animation with WAAPI
         * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/animate
         */
        DisplayObject.prototype.animate = function (keyframes, options) {
            var _a;
            var timeline = (_a = this.ownerDocument) === null || _a === void 0 ? void 0 : _a.timeline;
            if (timeline) {
                return timeline.play(this, keyframes, options);
            }
            return null;
        };
        // #endregion animatable
        // #region visible
        /**
         * shortcut for Used value of `visibility`
         */
        DisplayObject.prototype.isVisible = function () {
            var _a;
            return ((_a = this.parsedStyle) === null || _a === void 0 ? void 0 : _a.visibility) === 'visible';
        };
        Object.defineProperty(DisplayObject.prototype, "interactive", {
            get: function () {
                return this.isInteractive();
            },
            set: function (b) {
                this.style.pointerEvents = b ? 'auto' : 'none';
            },
            enumerable: false,
            configurable: true
        });
        DisplayObject.prototype.isInteractive = function () {
            var _a;
            return ((_a = this.parsedStyle) === null || _a === void 0 ? void 0 : _a.pointerEvents) !== 'none';
        };
        DisplayObject.prototype.isCulled = function () {
            return !!(this.cullable && this.cullable.enable && !this.cullable.visible);
        };
        /**
         * bring to front in current group
         */
        DisplayObject.prototype.toFront = function () {
            if (this.parentNode) {
                this.style.zIndex =
                    Math.max.apply(Math, __spreadArray([], __read(this.parentNode.children.map(function (child) {
                        return Number(child.style.zIndex);
                    })), false)) + 1;
            }
            return this;
        };
        /**
         * send to back in current group
         */
        DisplayObject.prototype.toBack = function () {
            if (this.parentNode) {
                this.style.zIndex =
                    Math.min.apply(Math, __spreadArray([], __read(this.parentNode.children.map(function (child) {
                        return Number(child.style.zIndex);
                    })), false)) - 1;
            }
            return this;
        };
        // #endregion visible
        // #region deprecated
        /**
         * compatible with G 3.0
         * @alias object.config
         * @deprecated
         */
        DisplayObject.prototype.getConfig = function () {
            return this.config;
        };
        DisplayObject.prototype.attr = function () {
            var _this = this;
            var args = [];
            for (var _i = 0; _i < arguments.length; _i++) {
                args[_i] = arguments[_i];
            }
            var _a = __read(args, 2), name = _a[0], value = _a[1];
            if (!name) {
                return this.attributes;
            }
            if (isObject(name)) {
                Object.keys(name).forEach(function (key) {
                    _this.setAttribute(key, name[key]);
                });
                return this;
            }
            if (args.length === 2) {
                this.setAttribute(name, value);
                return this;
            }
            return this.attributes[name];
        };
        /**
         * return 3x3 matrix in world space
         * @deprecated
         */
        DisplayObject.prototype.getMatrix = function (transformMat4) {
            var transform = transformMat4 || this.getWorldTransform();
            var _a = __read(getTranslation(create$2(), transform), 2), tx = _a[0], ty = _a[1];
            var _b = __read(getScaling(create$2(), transform), 2), sx = _b[0], sy = _b[1];
            var rotation = getRotation(create$4(), transform);
            var _c = __read(getEuler(create$2(), rotation), 3), eux = _c[0], euz = _c[2];
            // gimbal lock at 90 degrees
            return fromRotationTranslationScale$1(eux || euz, tx, ty, sx, sy);
        };
        /**
         * return 3x3 matrix in local space
         * @deprecated
         */
        DisplayObject.prototype.getLocalMatrix = function () {
            return this.getMatrix(this.getLocalTransform());
        };
        /**
         * set 3x3 matrix in world space
         * @deprecated
         */
        DisplayObject.prototype.setMatrix = function (mat) {
            var _a = __read(decompose(mat), 5), tx = _a[0], ty = _a[1], scalingX = _a[2], scalingY = _a[3], angle = _a[4];
            this.setEulerAngles(angle)
                .setPosition(tx, ty)
                .setLocalScale(scalingX, scalingY);
        };
        /**
         * set 3x3 matrix in local space
         * @deprecated
         */
        DisplayObject.prototype.setLocalMatrix = function (mat) {
            var _a = __read(decompose(mat), 5), tx = _a[0], ty = _a[1], scalingX = _a[2], scalingY = _a[3], angle = _a[4];
            this.setLocalEulerAngles(angle)
                .setLocalPosition(tx, ty)
                .setLocalScale(scalingX, scalingY);
        };
        /**
         * Use `visibility: visible` instead.
         * @deprecated
         */
        DisplayObject.prototype.show = function () {
            if (runtime.enableCSSParsing) {
                this.style.visibility = 'visible';
            }
            else {
                this.forEach(function (object) {
                    object.style.visibility = 'visible';
                });
            }
        };
        /**
         * Use `visibility: hidden` instead.
         * @deprecated
         */
        DisplayObject.prototype.hide = function () {
            if (runtime.enableCSSParsing) {
                this.style.visibility = 'hidden';
            }
            else {
                this.forEach(function (object) {
                    object.style.visibility = 'hidden';
                });
            }
        };
        /**
         * Use `childElementCount` instead.
         * @deprecated
         */
        DisplayObject.prototype.getCount = function () {
            return this.childElementCount;
        };
        /**
         * Use `parentElement` instead.
         * @deprecated
         */
        DisplayObject.prototype.getParent = function () {
            return this.parentElement;
        };
        /**
         * Use `children` instead.
         * @deprecated
         */
        DisplayObject.prototype.getChildren = function () {
            return this.children;
        };
        /**
         * Use `firstElementChild` instead.
         * @deprecated
         */
        DisplayObject.prototype.getFirst = function () {
            return this.firstElementChild;
        };
        /**
         * Use `lastElementChild` instead.
         * @deprecated
         */
        DisplayObject.prototype.getLast = function () {
            return this.lastElementChild;
        };
        /**
         * Use `this.children[index]` instead.
         * @deprecated
         */
        DisplayObject.prototype.getChildByIndex = function (index) {
            return this.children[index] || null;
        };
        /**
         * Use `appendChild` instead.
         * @deprecated
         */
        DisplayObject.prototype.add = function (child, index) {
            return this.appendChild(child, index);
        };
        /**
         * Use `this.style.clipPath` instead.
         * @deprecated
         */
        DisplayObject.prototype.setClip = function (clipPath) {
            this.style.clipPath = clipPath;
        };
        /**
         * @deprecated
         */
        DisplayObject.prototype.set = function (name, value) {
            // @ts-ignore
            this.config[name] = value;
        };
        /**
         * @deprecated
         */
        DisplayObject.prototype.get = function (name) {
            return this.config[name];
        };
        /**
         * Use `setPosition` instead.
         * @deprecated
         */
        DisplayObject.prototype.moveTo = function (position, y, z) {
            if (y === void 0) { y = 0; }
            if (z === void 0) { z = 0; }
            this.setPosition(position, y, z);
            return this;
        };
        /**
         * Use `setPosition` instead.
         * @deprecated
         */
        DisplayObject.prototype.move = function (position, y, z) {
            if (y === void 0) { y = 0; }
            if (z === void 0) { z = 0; }
            this.setPosition(position, y, z);
            return this;
        };
        /**
         * Use `this.style.zIndex` instead.
         * @deprecated
         */
        DisplayObject.prototype.setZIndex = function (zIndex) {
            this.style.zIndex = zIndex;
            return this;
        };
        return DisplayObject;
    }(Element));

    /**
     * holds useful CSS-related methods.
     * @see https://developer.mozilla.org/en-US/docs/Web/API/CSS
     *
     * * CSS Typed OM @see https://developer.mozilla.org/en-US/docs/Web/API/CSS/factory_functions
     * * register property @see https://developer.mozilla.org/en-US/docs/Web/API/CSS/RegisterProperty
     * * CSS Layout API
     */
    var CSS = {
        /**
         * <number>
         * @see https://drafts.csswg.org/css-values-4/#number-value
         */
        number: function (n) {
            return new CSSUnitValue(n);
        },
        /**
         * <percentage>
         * @see https://drafts.csswg.org/css-values-4/#percentage-value
         */
        percent: function (n) {
            return new CSSUnitValue(n, '%');
        },
        /**
         * <length>
         */
        px: function (n) {
            return new CSSUnitValue(n, 'px');
        },
        /**
         * <length>
         */
        em: function (n) {
            return new CSSUnitValue(n, 'em');
        },
        rem: function (n) {
            return new CSSUnitValue(n, 'rem');
        },
        /**
         * <angle>
         */
        deg: function (n) {
            return new CSSUnitValue(n, 'deg');
        },
        /**
         * <angle>
         */
        grad: function (n) {
            return new CSSUnitValue(n, 'grad');
        },
        /**
         * <angle>
         */
        rad: function (n) {
            return new CSSUnitValue(n, 'rad');
        },
        /**
         * <angle>
         */
        turn: function (n) {
            return new CSSUnitValue(n, 'turn');
        },
        /**
         * <time>
         */
        s: function (n) {
            return new CSSUnitValue(n, 's');
        },
        /**
         * <time>
         */
        ms: function (n) {
            return new CSSUnitValue(n, 'ms');
        },
        /**
         * CSS Properties & Values API
         *
         * @see https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API
         * @see https://drafts.css-houdini.org/css-properties-values-api/#registering-custom-properties
         * @see https://developer.mozilla.org/en-US/docs/Web/API/CSS/RegisterProperty
         */
        registerProperty: function (definition) {
            var name = definition.name, inherits = definition.inherits, interpolable = definition.interpolable, initialValue = definition.initialValue, syntax = definition.syntax;
            runtime.styleValueRegistry.registerMetadata({
                n: name,
                inh: inherits,
                int: interpolable,
                d: initialValue,
                syntax: syntax,
            });
        },
        /**
         * CSS Layout API
         * register layout
         *
         * @see https://github.com/w3c/css-houdini-drafts/blob/main/css-layout-api/EXPLAINER.md
         * @see https://developer.mozilla.org/en-US/docs/Web/Guide/Houdini#css_layout_api
         */
        registerLayout: function (name, clazz) {
            runtime.layoutRegistry.registerLayout(name, clazz);
        },
    };

    var Circle = /** @class */ (function (_super) {
        __extends(Circle, _super);
        function Circle(_a) {
            if (_a === void 0) { _a = {}; }
            var style = _a.style, rest = __rest(_a, ["style"]);
            return _super.call(this, __assign({ type: Shape.CIRCLE, style: runtime.enableCSSParsing
                    ? __assign({ cx: '', cy: '', r: '' }, style) : __assign({}, style), initialParsedStyle: {
                    anchor: [0.5, 0.5],
                    transformOrigin: runtime.enableCSSParsing
                        ? null
                        : [PECENTAGE_50, PECENTAGE_50],
                } }, rest)) || this;
        }
        return Circle;
    }(DisplayObject));

    /**
     * shadow root
     * @see https://yuque.antfin-inc.com/antv/czqvg5/pgqipg
     */
    var CustomElement = /** @class */ (function (_super) {
        __extends(CustomElement, _super);
        // private shadowNodes: DisplayObject[] = [];
        function CustomElement(_a) {
            if (_a === void 0) { _a = {}; }
            var _this = this;
            var style = _a.style, rest = __rest(_a, ["style"]);
            _this = _super.call(this, __assign({ style: runtime.enableCSSParsing
                    ? __assign({ x: '', y: '' }, style) : __assign({}, style) }, rest)) || this;
            // static get observedAttributes(): string[] {
            //   return [];
            // }
            _this.isCustomElement = true;
            return _this;
        }
        return CustomElement;
    }(DisplayObject));

    var Ellipse = /** @class */ (function (_super) {
        __extends(Ellipse, _super);
        function Ellipse(_a) {
            if (_a === void 0) { _a = {}; }
            var style = _a.style, rest = __rest(_a, ["style"]);
            return _super.call(this, __assign({ type: Shape.ELLIPSE, style: runtime.enableCSSParsing
                    ? __assign({ cx: '', cy: '', rx: '', ry: '' }, style) : __assign({}, style), initialParsedStyle: {
                    anchor: [0.5, 0.5],
                    transformOrigin: runtime.enableCSSParsing
                        ? null
                        : [PECENTAGE_50, PECENTAGE_50],
                } }, rest)) || this;
        }
        return Ellipse;
    }(DisplayObject));

    /**
     * its attributes are inherited by its children.
     * @see https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/g
     *
     * @example
     * <g fill="white" stroke="green" stroke-width="5">
        <circle cx="40" cy="40" r="25" />
        <circle cx="60" cy="60" r="25" />
      </g>
     */
    var Group = /** @class */ (function (_super) {
        __extends(Group, _super);
        function Group(_a) {
            if (_a === void 0) { _a = {}; }
            var style = _a.style, rest = __rest(_a, ["style"]);
            return _super.call(this, __assign({ type: Shape.GROUP, style: runtime.enableCSSParsing
                    ? __assign({ x: '', y: '', width: '', height: '' }, style) : __assign({}, style) }, rest)) || this;
        }
        return Group;
    }(DisplayObject));

    /**
     * HTML container
     * @see https://github.com/pmndrs/drei#html
     */
    var HTML = /** @class */ (function (_super) {
        __extends(HTML, _super);
        function HTML(_a) {
            if (_a === void 0) { _a = {}; }
            var _this = this;
            var style = _a.style, rest = __rest(_a, ["style"]);
            _this = _super.call(this, __assign({ type: Shape.HTML, style: runtime.enableCSSParsing
                    ? __assign({ x: '', y: '', width: 'auto', height: 'auto', innerHTML: '' }, style) : __assign({}, style) }, rest)) || this;
            _this.cullable.enable = false;
            return _this;
        }
        /**
         * return wrapper HTMLElement
         * * <div> in g-webgl/canvas
         * * <foreignObject> in g-svg
         */
        HTML.prototype.getDomElement = function () {
            return this.parsedStyle.$el;
        };
        /**
         * override with $el.getBoundingClientRect
         * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect
         */
        HTML.prototype.getBoundingClientRect = function () {
            if (this.parsedStyle.$el) {
                return this.parsedStyle.$el.getBoundingClientRect();
            }
            else {
                var _a = this.parsedStyle, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
                return new Rectangle(x, y, width, height);
            }
        };
        HTML.prototype.getClientRects = function () {
            return [this.getBoundingClientRect()];
        };
        HTML.prototype.getBounds = function () {
            var _a, _b;
            var clientRect = this.getBoundingClientRect();
            // calc context's offset
            // @ts-ignore
            var canvasRect = (_b = (_a = this.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView) === null || _b === void 0 ? void 0 : _b.getContextService().getBoundingClientRect();
            var aabb = new AABB();
            var minX = clientRect.left - ((canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.left) || 0);
            var minY = clientRect.top - ((canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.top) || 0);
            aabb.setMinMax([minX, minY, 0], [minX + clientRect.width, minY + clientRect.height, 0]);
            return aabb;
        };
        HTML.prototype.getLocalBounds = function () {
            if (this.parentNode) {
                var parentInvert = invert(create$1(), this.parentNode.getWorldTransform());
                var bounds = this.getBounds();
                if (!AABB.isEmpty(bounds)) {
                    var localBounds = new AABB();
                    localBounds.setFromTransformedAABB(bounds, parentInvert);
                    return localBounds;
                }
            }
            return this.getBounds();
        };
        return HTML;
    }(DisplayObject));

    var Image = /** @class */ (function (_super) {
        __extends(Image, _super);
        function Image(_a) {
            if (_a === void 0) { _a = {}; }
            var style = _a.style, rest = __rest(_a, ["style"]);
            return _super.call(this, __assign({ type: Shape.IMAGE, style: runtime.enableCSSParsing
                    ? __assign({ x: '', y: '', img: '', width: '', height: '' }, style) : __assign({}, style) }, rest)) || this;
        }
        return Image;
    }(DisplayObject));

    /**
     * Create a line connecting two points.
     * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line
     *
     * Also support for using marker.
     */
    var Line = /** @class */ (function (_super) {
        __extends(Line, _super);
        function Line(_a) {
            if (_a === void 0) { _a = {}; }
            var _this = this;
            var style = _a.style, rest = __rest(_a, ["style"]);
            _this = _super.call(this, __assign({ type: Shape.LINE, style: __assign({ x1: 0, y1: 0, x2: 0, y2: 0, z1: 0, z2: 0 }, style) }, rest)) || this;
            _this.markerStartAngle = 0;
            _this.markerEndAngle = 0;
            var _b = _this.parsedStyle, markerStart = _b.markerStart, markerEnd = _b.markerEnd;
            if (markerStart && isDisplayObject(markerStart)) {
                _this.markerStartAngle = markerStart.getLocalEulerAngles();
                _this.appendChild(markerStart);
            }
            if (markerEnd && isDisplayObject(markerEnd)) {
                _this.markerEndAngle = markerEnd.getLocalEulerAngles();
                _this.appendChild(markerEnd);
            }
            _this.transformMarker(true);
            _this.transformMarker(false);
            return _this;
        }
        Line.prototype.attributeChangedCallback = function (attrName, oldValue, newValue, prevParsedValue, newParsedValue) {
            if (attrName === 'x1' ||
                attrName === 'y1' ||
                attrName === 'x2' ||
                attrName === 'y2' ||
                attrName === 'markerStartOffset' ||
                attrName === 'markerEndOffset') {
                this.transformMarker(true);
                this.transformMarker(false);
            }
            else if (attrName === 'markerStart') {
                if (prevParsedValue && isDisplayObject(prevParsedValue)) {
                    this.markerStartAngle = 0;
                    prevParsedValue.remove();
                }
                // CSSKeyword 'unset'
                if (newParsedValue && isDisplayObject(newParsedValue)) {
                    this.markerStartAngle = newParsedValue.getLocalEulerAngles();
                    this.appendChild(newParsedValue);
                    this.transformMarker(true);
                }
            }
            else if (attrName === 'markerEnd') {
                if (prevParsedValue && isDisplayObject(prevParsedValue)) {
                    this.markerEndAngle = 0;
                    prevParsedValue.remove();
                }
                if (newParsedValue && isDisplayObject(newParsedValue)) {
                    this.markerEndAngle = newParsedValue.getLocalEulerAngles();
                    this.appendChild(newParsedValue);
                    this.transformMarker(false);
                }
            }
        };
        Line.prototype.transformMarker = function (isStart) {
            var _a = this.parsedStyle, markerStart = _a.markerStart, markerEnd = _a.markerEnd, markerStartOffset = _a.markerStartOffset, markerEndOffset = _a.markerEndOffset, x1 = _a.x1, x2 = _a.x2, y1 = _a.y1, y2 = _a.y2, defX = _a.defX, defY = _a.defY;
            var marker = isStart ? markerStart : markerEnd;
            if (!marker || !isDisplayObject(marker)) {
                return;
            }
            var rad = 0;
            var x;
            var y;
            var ox;
            var oy;
            var offset;
            var originalAngle;
            if (isStart) {
                ox = x1 - defX;
                oy = y1 - defY;
                x = x2 - x1;
                y = y2 - y1;
                offset = markerStartOffset || 0;
                originalAngle = this.markerStartAngle;
            }
            else {
                ox = x2 - defX;
                oy = y2 - defY;
                x = x1 - x2;
                y = y1 - y2;
                offset = markerEndOffset || 0;
                originalAngle = this.markerEndAngle;
            }
            rad = Math.atan2(y, x);
            // account for markerOffset
            marker.setLocalEulerAngles((rad * 180) / Math.PI + originalAngle);
            marker.setLocalPosition(ox + Math.cos(rad) * offset, oy + Math.sin(rad) * offset);
        };
        Line.prototype.getPoint = function (ratio, inWorldSpace) {
            if (inWorldSpace === void 0) { inWorldSpace = false; }
            // TODO: account for z1/z2 in 3D line
            var _a = this.parsedStyle, x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2, defX = _a.defX, defY = _a.defY;
            var _b = pointAt$3(x1, y1, x2, y2, ratio), x = _b.x, y = _b.y;
            var transformed = transformMat4(create$2(), fromValues$2(x - defX, y - defY, 0), inWorldSpace ? this.getWorldTransform() : this.getLocalTransform());
            // apply local transformation
            return new Point(transformed[0], transformed[1]);
        };
        Line.prototype.getPointAtLength = function (distance, inWorldSpace) {
            if (inWorldSpace === void 0) { inWorldSpace = false; }
            return this.getPoint(distance / this.getTotalLength(), inWorldSpace);
        };
        Line.prototype.getTotalLength = function () {
            // TODO: account for z1/z2 in 3D line
            var _a = this.parsedStyle, x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2;
            return length$4(x1, y1, x2, y2);
        };
        return Line;
    }(DisplayObject));

    var Path = /** @class */ (function (_super) {
        __extends(Path, _super);
        function Path(_a) {
            if (_a === void 0) { _a = {}; }
            var _this = this;
            var style = _a.style, rest = __rest(_a, ["style"]);
            _this = _super.call(this, __assign({ type: Shape.PATH, style: runtime.enableCSSParsing
                    ? __assign({ path: '', miterLimit: '' }, style) : __assign({}, style), initialParsedStyle: runtime.enableCSSParsing
                    ? null
                    : {
                        miterLimit: 4,
                        path: __assign({}, EMPTY_PARSED_PATH),
                    } }, rest)) || this;
            _this.markerStartAngle = 0;
            _this.markerEndAngle = 0;
            /**
             * markers placed at the mid
             */
            _this.markerMidList = [];
            var _b = _this.parsedStyle, markerStart = _b.markerStart, markerEnd = _b.markerEnd, markerMid = _b.markerMid;
            if (markerStart && isDisplayObject(markerStart)) {
                _this.markerStartAngle = markerStart.getLocalEulerAngles();
                _this.appendChild(markerStart);
            }
            if (markerMid && isDisplayObject(markerMid)) {
                _this.placeMarkerMid(markerMid);
            }
            if (markerEnd && isDisplayObject(markerEnd)) {
                _this.markerEndAngle = markerEnd.getLocalEulerAngles();
                _this.appendChild(markerEnd);
            }
            _this.transformMarker(true);
            _this.transformMarker(false);
            return _this;
        }
        Path.prototype.attributeChangedCallback = function (attrName, oldValue, newValue, prevParsedValue, newParsedValue) {
            if (attrName === 'path') {
                // recalc markers
                this.transformMarker(true);
                this.transformMarker(false);
                this.placeMarkerMid(this.parsedStyle.markerMid);
            }
            else if (attrName === 'markerStartOffset' ||
                attrName === 'markerEndOffset') {
                this.transformMarker(true);
                this.transformMarker(false);
            }
            else if (attrName === 'markerStart') {
                if (prevParsedValue && isDisplayObject(prevParsedValue)) {
                    this.markerStartAngle = 0;
                    prevParsedValue.remove();
                }
                // CSSKeyword 'unset'
                if (newParsedValue && isDisplayObject(newParsedValue)) {
                    this.markerStartAngle = newParsedValue.getLocalEulerAngles();
                    this.appendChild(newParsedValue);
                    this.transformMarker(true);
                }
            }
            else if (attrName === 'markerEnd') {
                if (prevParsedValue && isDisplayObject(prevParsedValue)) {
                    this.markerEndAngle = 0;
                    prevParsedValue.remove();
                }
                if (newParsedValue && isDisplayObject(newParsedValue)) {
                    this.markerEndAngle = newParsedValue.getLocalEulerAngles();
                    this.appendChild(newParsedValue);
                    this.transformMarker(false);
                }
            }
            else if (attrName === 'markerMid') {
                this.placeMarkerMid(newParsedValue);
            }
        };
        Path.prototype.transformMarker = function (isStart) {
            var _a = this.parsedStyle, markerStart = _a.markerStart, markerEnd = _a.markerEnd, markerStartOffset = _a.markerStartOffset, markerEndOffset = _a.markerEndOffset, defX = _a.defX, defY = _a.defY;
            var marker = isStart ? markerStart : markerEnd;
            if (!marker || !isDisplayObject(marker)) {
                return;
            }
            var rad = 0;
            var x;
            var y;
            var ox;
            var oy;
            var offset;
            var originalAngle;
            if (isStart) {
                var _b = __read(this.getStartTangent(), 2), p1 = _b[0], p2 = _b[1];
                ox = p2[0] - defX;
                oy = p2[1] - defY;
                x = p1[0] - p2[0];
                y = p1[1] - p2[1];
                offset = markerStartOffset || 0;
                originalAngle = this.markerStartAngle;
            }
            else {
                var _c = __read(this.getEndTangent(), 2), p1 = _c[0], p2 = _c[1];
                ox = p2[0] - defX;
                oy = p2[1] - defY;
                x = p1[0] - p2[0];
                y = p1[1] - p2[1];
                offset = markerEndOffset || 0;
                originalAngle = this.markerEndAngle;
            }
            rad = Math.atan2(y, x);
            // account for markerOffset
            marker.setLocalEulerAngles((rad * 180) / Math.PI + originalAngle);
            marker.setLocalPosition(ox + Math.cos(rad) * offset, oy + Math.sin(rad) * offset);
        };
        Path.prototype.placeMarkerMid = function (marker) {
            var _a = this.parsedStyle, segments = _a.path.segments, defX = _a.defX, defY = _a.defY;
            // clear all existed markers
            this.markerMidList.forEach(function (marker) {
                marker.remove();
            });
            if (marker && isDisplayObject(marker)) {
                for (var i = 1; i < segments.length - 1; i++) {
                    var _b = __read(segments[i].currentPoint, 2), ox = _b[0], oy = _b[1];
                    var cloned = i === 1 ? marker : marker.cloneNode(true);
                    this.markerMidList.push(cloned);
                    this.appendChild(cloned);
                    cloned.setLocalPosition(ox - defX, oy - defY);
                    // TODO: orient of marker
                }
            }
        };
        /**
         * Returns the total length of the path.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength
         */
        Path.prototype.getTotalLength = function () {
            return getOrCalculatePathTotalLength(this);
        };
        /**
         * Returns the point at a given distance along the path.
         * @see https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getPointAtLength
         */
        Path.prototype.getPointAtLength = function (distance, inWorldSpace) {
            if (inWorldSpace === void 0) { inWorldSpace = false; }
            var _a = this.parsedStyle, defX = _a.defX, defY = _a.defY, absolutePath = _a.path.absolutePath;
            var _b = getPointAtLength(absolutePath, distance), x = _b.x, y = _b.y;
            var transformed = transformMat4(create$2(), fromValues$2(x - defX, y - defY, 0), inWorldSpace ? this.getWorldTransform() : this.getLocalTransform());
            // apply local transformation
            return new Point(transformed[0], transformed[1]);
        };
        /**
         * Returns the point at a given ratio of the total length in path.
         */
        Path.prototype.getPoint = function (ratio, inWorldSpace) {
            if (inWorldSpace === void 0) { inWorldSpace = false; }
            return this.getPointAtLength(ratio * getOrCalculatePathTotalLength(this), inWorldSpace);
        };
        /**
         * Get start tangent vector
         */
        Path.prototype.getStartTangent = function () {
            var segments = this.parsedStyle.path.segments;
            var result = [];
            if (segments.length > 1) {
                var startPoint = segments[0].currentPoint;
                var endPoint = segments[1].currentPoint;
                var tangent = segments[1].startTangent;
                result = [];
                if (tangent) {
                    result.push([startPoint[0] - tangent[0], startPoint[1] - tangent[1]]);
                    result.push([startPoint[0], startPoint[1]]);
                }
                else {
                    result.push([endPoint[0], endPoint[1]]);
                    result.push([startPoint[0], startPoint[1]]);
                }
            }
            return result;
        };
        /**
         * Get end tangent vector
         */
        Path.prototype.getEndTangent = function () {
            var segments = this.parsedStyle.path.segments;
            var length = segments.length;
            var result = [];
            if (length > 1) {
                var startPoint = segments[length - 2].currentPoint;
                var endPoint = segments[length - 1].currentPoint;
                var tangent = segments[length - 1].endTangent;
                result = [];
                if (tangent) {
                    result.push([endPoint[0] - tangent[0], endPoint[1] - tangent[1]]);
                    result.push([endPoint[0], endPoint[1]]);
                }
                else {
                    result.push([startPoint[0], startPoint[1]]);
                    result.push([endPoint[0], endPoint[1]]);
                }
            }
            return result;
        };
        return Path;
    }(DisplayObject));

    var Polygon = /** @class */ (function (_super) {
        __extends(Polygon, _super);
        function Polygon(_a) {
            if (_a === void 0) { _a = {}; }
            var _this = this;
            var style = _a.style, rest = __rest(_a, ["style"]);
            _this = _super.call(this, __assign({ type: Shape.POLYGON, style: runtime.enableCSSParsing
                    ? __assign({ points: '', miterLimit: '', isClosed: true }, style) : __assign({}, style), initialParsedStyle: runtime.enableCSSParsing
                    ? null
                    : {
                        points: {
                            points: [],
                            totalLength: 0,
                            segments: [],
                        },
                        miterLimit: 4,
                        isClosed: true,
                    } }, rest)) || this;
            _this.markerStartAngle = 0;
            _this.markerEndAngle = 0;
            /**
             * markers placed at the mid
             */
            _this.markerMidList = [];
            var _b = _this.parsedStyle, markerStart = _b.markerStart, markerEnd = _b.markerEnd, markerMid = _b.markerMid;
            if (markerStart && isDisplayObject(markerStart)) {
                _this.markerStartAngle = markerStart.getLocalEulerAngles();
                _this.appendChild(markerStart);
            }
            if (markerMid && isDisplayObject(markerMid)) {
                _this.placeMarkerMid(markerMid);
            }
            if (markerEnd && isDisplayObject(markerEnd)) {
                _this.markerEndAngle = markerEnd.getLocalEulerAngles();
                _this.appendChild(markerEnd);
            }
            _this.transformMarker(true);
            _this.transformMarker(false);
            return _this;
        }
        Polygon.prototype.attributeChangedCallback = function (attrName, oldValue, newValue, prevParsedValue, newParsedValue) {
            if (attrName === 'points') {
                // recalc markers
                this.transformMarker(true);
                this.transformMarker(false);
                this.placeMarkerMid(this.parsedStyle.markerMid);
            }
            else if (attrName === 'markerStartOffset' ||
                attrName === 'markerEndOffset') {
                this.transformMarker(true);
                this.transformMarker(false);
            }
            else if (attrName === 'markerStart') {
                if (prevParsedValue && isDisplayObject(prevParsedValue)) {
                    this.markerStartAngle = 0;
                    prevParsedValue.remove();
                }
                // CSSKeyword 'unset'
                if (newParsedValue && isDisplayObject(newParsedValue)) {
                    this.markerStartAngle = newParsedValue.getLocalEulerAngles();
                    this.appendChild(newParsedValue);
                    this.transformMarker(true);
                }
            }
            else if (attrName === 'markerEnd') {
                if (prevParsedValue && isDisplayObject(prevParsedValue)) {
                    this.markerEndAngle = 0;
                    prevParsedValue.remove();
                }
                if (newParsedValue && isDisplayObject(newParsedValue)) {
                    this.markerEndAngle = newParsedValue.getLocalEulerAngles();
                    this.appendChild(newParsedValue);
                    this.transformMarker(false);
                }
            }
            else if (attrName === 'markerMid') {
                this.placeMarkerMid(newParsedValue);
            }
        };
        Polygon.prototype.transformMarker = function (isStart) {
            var _a = this.parsedStyle, markerStart = _a.markerStart, markerEnd = _a.markerEnd, markerStartOffset = _a.markerStartOffset, markerEndOffset = _a.markerEndOffset, P = _a.points, defX = _a.defX, defY = _a.defY;
            var points = (P || {}).points;
            var marker = isStart ? markerStart : markerEnd;
            if (!marker || !isDisplayObject(marker) || !points) {
                return;
            }
            var rad = 0;
            var x;
            var y;
            var ox;
            var oy;
            var offset;
            var originalAngle;
            ox = points[0][0] - defX;
            oy = points[0][1] - defY;
            if (isStart) {
                x = points[1][0] - points[0][0];
                y = points[1][1] - points[0][1];
                offset = markerStartOffset || 0;
                originalAngle = this.markerStartAngle;
            }
            else {
                var length_1 = points.length;
                if (!this.parsedStyle.isClosed) {
                    ox = points[length_1 - 1][0] - defX;
                    oy = points[length_1 - 1][1] - defY;
                    x = points[length_1 - 2][0] - points[length_1 - 1][0];
                    y = points[length_1 - 2][1] - points[length_1 - 1][1];
                }
                else {
                    x = points[length_1 - 1][0] - points[0][0];
                    y = points[length_1 - 1][1] - points[0][1];
                }
                offset = markerEndOffset || 0;
                originalAngle = this.markerEndAngle;
            }
            rad = Math.atan2(y, x);
            // account for markerOffset
            marker.setLocalEulerAngles((rad * 180) / Math.PI + originalAngle);
            marker.setLocalPosition(ox + Math.cos(rad) * offset, oy + Math.sin(rad) * offset);
        };
        Polygon.prototype.placeMarkerMid = function (marker) {
            var _a = this.parsedStyle, P = _a.points, defX = _a.defX, defY = _a.defY;
            var points = (P || {}).points;
            // clear all existed markers
            this.markerMidList.forEach(function (marker) {
                marker.remove();
            });
            this.markerMidList = [];
            if (marker && isDisplayObject(marker) && points) {
                for (var i = 1; i < (this.parsedStyle.isClosed ? points.length : points.length - 1); i++) {
                    var ox = points[i][0] - defX;
                    var oy = points[i][1] - defY;
                    var cloned = i === 1 ? marker : marker.cloneNode(true);
                    this.markerMidList.push(cloned);
                    this.appendChild(cloned);
                    cloned.setLocalPosition(ox, oy);
                    // TODO: orient of marker
                }
            }
        };
        return Polygon;
    }(DisplayObject));

    /**
     * Polyline inherits the marker-related capabilities of Polygon.
     */
    var Polyline = /** @class */ (function (_super) {
        __extends(Polyline, _super);
        function Polyline(_a) {
            if (_a === void 0) { _a = {}; }
            var style = _a.style, rest = __rest(_a, ["style"]);
            return _super.call(this, __assign({ type: Shape.POLYLINE, style: runtime.enableCSSParsing
                    ? __assign({ points: '', miterLimit: '', isClosed: false }, style) : __assign({}, style), initialParsedStyle: runtime.enableCSSParsing
                    ? null
                    : {
                        points: {
                            points: [],
                            totalLength: 0,
                            segments: [],
                        },
                        miterLimit: 4,
                        isClosed: false,
                    } }, rest)) || this;
        }
        Polyline.prototype.getTotalLength = function () {
            return this.parsedStyle.points.totalLength;
        };
        Polyline.prototype.getPointAtLength = function (distance, inWorldSpace) {
            if (inWorldSpace === void 0) { inWorldSpace = false; }
            return this.getPoint(distance / this.getTotalLength(), inWorldSpace);
        };
        Polyline.prototype.getPoint = function (ratio, inWorldSpace) {
            if (inWorldSpace === void 0) { inWorldSpace = false; }
            var _a = this.parsedStyle, defX = _a.defX, defY = _a.defY, _b = _a.points, points = _b.points, segments = _b.segments;
            var subt = 0;
            var index = 0;
            segments.forEach(function (v, i) {
                if (ratio >= v[0] && ratio <= v[1]) {
                    subt = (ratio - v[0]) / (v[1] - v[0]);
                    index = i;
                }
            });
            var _c = pointAt$3(points[index][0], points[index][1], points[index + 1][0], points[index + 1][1], subt), x = _c.x, y = _c.y;
            var transformed = transformMat4(create$2(), fromValues$2(x - defX, y - defY, 0), inWorldSpace ? this.getWorldTransform() : this.getLocalTransform());
            // apply local transformation
            return new Point(transformed[0], transformed[1]);
        };
        Polyline.prototype.getStartTangent = function () {
            var points = this.parsedStyle.points.points;
            var result = [];
            result.push([points[1][0], points[1][1]]);
            result.push([points[0][0], points[0][1]]);
            return result;
        };
        Polyline.prototype.getEndTangent = function () {
            var points = this.parsedStyle.points.points;
            var l = points.length - 1;
            var result = [];
            result.push([points[l - 1][0], points[l - 1][1]]);
            result.push([points[l][0], points[l][1]]);
            return result;
        };
        return Polyline;
    }(Polygon));

    var Rect = /** @class */ (function (_super) {
        __extends(Rect, _super);
        function Rect(_a) {
            if (_a === void 0) { _a = {}; }
            var style = _a.style, rest = __rest(_a, ["style"]);
            return _super.call(this, __assign({ type: Shape.RECT, style: runtime.enableCSSParsing
                    ? __assign({ x: '', y: '', width: '', height: '', radius: '' }, style) : __assign({}, style) }, rest)) || this;
        }
        return Rect;
    }(DisplayObject));

    /**
     * <text> @see https://developer.mozilla.org/en-US/docs/Web/API/SVGTextElement
     */
    var Text = /** @class */ (function (_super) {
        __extends(Text, _super);
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/API/SVGTextContentElement#constants
         */
        // LENGTHADJUST_SPACING: number = 1;
        // LENGTHADJUST_SPACINGANDGLYPHS: number = 2;
        // LENGTHADJUST_UNKNOWN: number = 0;
        function Text(_a) {
            if (_a === void 0) { _a = {}; }
            var style = _a.style, rest = __rest(_a, ["style"]);
            return _super.call(this, __assign({ type: Shape.TEXT, style: runtime.enableCSSParsing
                    ? __assign({ x: '', y: '', text: '', fontSize: '', fontFamily: '', fontStyle: '', fontWeight: '', fontVariant: '', textAlign: '', textBaseline: '', textTransform: '', fill: 'black', letterSpacing: '', lineHeight: '', miterLimit: '', 
                        // whiteSpace: 'pre',
                        wordWrap: false, wordWrapWidth: 0, leading: 0, dx: '', dy: '' }, style) : __assign({ fill: 'black' }, style), initialParsedStyle: runtime.enableCSSParsing
                    ? {}
                    : {
                        x: 0,
                        y: 0,
                        fontSize: 16,
                        fontFamily: 'sans-serif',
                        fontStyle: 'normal',
                        fontWeight: 'normal',
                        fontVariant: 'normal',
                        lineHeight: 0,
                        letterSpacing: 0,
                        textBaseline: 'alphabetic',
                        textAlign: 'start',
                        wordWrap: false,
                        wordWrapWidth: 0,
                        leading: 0,
                        dx: 0,
                        dy: 0,
                    } }, rest)) || this;
        }
        // lengthAdjust: SVGAnimatedEnumeration;
        // textLength: SVGAnimatedLength;
        // getCharNumAtPosition(point?: DOMPointInit): number {
        //   throw new Error('Method not implemented.');
        // }
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/API/SVGTextContentElement
         */
        Text.prototype.getComputedTextLength = function () {
            var _a;
            return ((_a = this.parsedStyle.metrics) === null || _a === void 0 ? void 0 : _a.maxLineWidth) || 0;
        };
        // getEndPositionOfChar(charnum: number): DOMPoint {
        //   throw new Error('Method not implemented.');
        // }
        // getExtentOfChar(charnum: number): DOMRect {
        //   throw new Error('Method not implemented.');
        // }
        // getNumberOfChars(): number {
        //   throw new Error('Method not implemented.');
        // }
        // getRotationOfChar(charnum: number): number {
        //   throw new Error('Method not implemented.');
        // }
        // getStartPositionOfChar(charnum: number): DOMPoint {
        //   throw new Error('Method not implemented.');
        // }
        // getSubStringLength(charnum: number, nchars: number): number {
        //   throw new Error('Method not implemented.');
        // }
        // selectSubString(charnum: number, nchars: number): void {
        //   throw new Error('Method not implemented.');
        // }
        Text.prototype.getLineBoundingRects = function () {
            var _a;
            return ((_a = this.parsedStyle.metrics) === null || _a === void 0 ? void 0 : _a.lineMetrics) || [];
        };
        Text.prototype.isOverflowing = function () {
            return !!this.parsedStyle.isOverflowing;
        };
        return Text;
    }(DisplayObject));

    /**
     * canvas.customElements
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry
     */
    var CustomElementRegistry = /** @class */ (function () {
        function CustomElementRegistry() {
            this.registry = {};
            this.define(Shape.CIRCLE, Circle);
            this.define(Shape.ELLIPSE, Ellipse);
            this.define(Shape.RECT, Rect);
            this.define(Shape.IMAGE, Image);
            this.define(Shape.LINE, Line);
            this.define(Shape.GROUP, Group);
            this.define(Shape.PATH, Path);
            this.define(Shape.POLYGON, Polygon);
            this.define(Shape.POLYLINE, Polyline);
            this.define(Shape.TEXT, Text);
            this.define(Shape.HTML, HTML);
        }
        CustomElementRegistry.prototype.define = function (name, constructor) {
            this.registry[name] = constructor;
        };
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/get
         */
        CustomElementRegistry.prototype.get = function (name) {
            return this.registry[name];
        };
        return CustomElementRegistry;
    }());

    /**
     * the entry of DOM tree
     * Document -> Node -> EventTarget
     * @see https://developer.mozilla.org/en-US/docs/Web/API/Document
     */
    var Document = /** @class */ (function (_super) {
        __extends(Document, _super);
        function Document() {
            var _this = _super.call(this) || this;
            /**
             * only document has defaultView, points to canvas,
             * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/defaultView
             */
            _this.defaultView = null;
            _this.ownerDocument = null;
            _this.nodeName = 'document';
            // create timeline
            try {
                _this.timeline = new runtime.AnimationTimeline(_this);
            }
            catch (e) { }
            /**
             * for inherited properties, the initial value is used on the root element only,
             * as long as no specified value is supplied.
             * @see https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value
             */
            var initialStyle = {};
            BUILT_IN_PROPERTIES.forEach(function (_a) {
                var n = _a.n, inh = _a.inh, d = _a.d;
                if (inh && d) {
                    initialStyle[n] = isFunction$1(d) ? d(Shape.GROUP) : d;
                }
            });
            // like <html> in DOM tree
            _this.documentElement = new Group({
                id: 'g-root',
                style: initialStyle,
            });
            _this.documentElement.ownerDocument = _this;
            _this.documentElement.parentNode = _this;
            _this.childNodes = [_this.documentElement];
            return _this;
        }
        Object.defineProperty(Document.prototype, "children", {
            get: function () {
                return this.childNodes;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Document.prototype, "childElementCount", {
            get: function () {
                return this.childNodes.length;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Document.prototype, "firstElementChild", {
            get: function () {
                return this.firstChild;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Document.prototype, "lastElementChild", {
            get: function () {
                return this.lastChild;
            },
            enumerable: false,
            configurable: true
        });
        /**
         * @example const circle = document.createElement('circle', { style: { r: 10 } });
         */
        Document.prototype.createElement = function (tagName, options) {
            // @observablehq/plot will create <svg>
            if (tagName === 'svg') {
                return this.documentElement;
            }
            // d3 will use <tspan>
            var clazz = this.defaultView.customElements.get(tagName);
            if (!clazz) {
                console.warn('Unsupported tagName: ', tagName);
                clazz = tagName === 'tspan' ? Text : Group;
            }
            var shape = new clazz(options);
            shape.ownerDocument = this;
            return shape;
        };
        Document.prototype.createElementNS = function (namespaceURI, tagName, options) {
            return this.createElement(tagName, options);
        };
        Document.prototype.cloneNode = function (deep) {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        Document.prototype.destroy = function () {
            try {
                this.documentElement.destroyChildren();
                this.timeline.destroy();
            }
            catch (e) { }
        };
        /**
         * Picking 2D graphics with RBush based on BBox, fast but inaccurate.
         */
        Document.prototype.elementsFromBBox = function (minX, minY, maxX, maxY) {
            var rBush = this.defaultView.context.rBushRoot;
            var rBushNodes = rBush.search({ minX: minX, minY: minY, maxX: maxX, maxY: maxY });
            var hitTestList = [];
            rBushNodes.forEach(function (_a) {
                var displayObject = _a.displayObject;
                var pointerEvents = displayObject.parsedStyle.pointerEvents;
                // account for `visibility`
                // @see https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
                var isVisibilityAffected = [
                    'auto',
                    'visiblepainted',
                    'visiblefill',
                    'visiblestroke',
                    'visible',
                ].includes(pointerEvents);
                if ((!isVisibilityAffected ||
                    (isVisibilityAffected && displayObject.isVisible())) &&
                    !displayObject.isCulled() &&
                    displayObject.isInteractive()) {
                    hitTestList.push(displayObject);
                }
            });
            // find group with max z-index
            hitTestList.sort(function (a, b) { return b.sortable.renderOrder - a.sortable.renderOrder; });
            return hitTestList;
        };
        Document.prototype.elementFromPointSync = function (x, y) {
            var _a = this.defaultView.canvas2Viewport({
                x: x,
                y: y,
            }), viewportX = _a.x, viewportY = _a.y;
            var _b = this.defaultView.getConfig(), width = _b.width, height = _b.height;
            // outside canvas' viewport
            if (viewportX < 0 ||
                viewportY < 0 ||
                viewportX > width ||
                viewportY > height) {
                return null;
            }
            var _c = this.defaultView.viewport2Client({
                x: viewportX,
                y: viewportY,
            }), clientX = _c.x, clientY = _c.y;
            var picked = this.defaultView
                .getRenderingService()
                .hooks.pickSync.call({
                topmost: true,
                position: {
                    x: x,
                    y: y,
                    viewportX: viewportX,
                    viewportY: viewportY,
                    clientX: clientX,
                    clientY: clientY,
                },
                picked: [],
            }).picked;
            return (picked && picked[0]) || this.documentElement;
        };
        /**
         * Do picking with API instead of triggering interactive events.
         *
         * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Document/elementFromPoint
         */
        Document.prototype.elementFromPoint = function (x, y) {
            return __awaiter(this, void 0, void 0, function () {
                var _a, viewportX, viewportY, _b, width, height, _c, clientX, clientY, picked;
                return __generator(this, function (_d) {
                    switch (_d.label) {
                        case 0:
                            _a = this.defaultView.canvas2Viewport({
                                x: x,
                                y: y,
                            }), viewportX = _a.x, viewportY = _a.y;
                            _b = this.defaultView.getConfig(), width = _b.width, height = _b.height;
                            // outside canvas' viewport
                            if (viewportX < 0 ||
                                viewportY < 0 ||
                                viewportX > width ||
                                viewportY > height) {
                                return [2 /*return*/, null];
                            }
                            _c = this.defaultView.viewport2Client({
                                x: viewportX,
                                y: viewportY,
                            }), clientX = _c.x, clientY = _c.y;
                            return [4 /*yield*/, this.defaultView
                                    .getRenderingService()
                                    .hooks.pick.promise({
                                    topmost: true,
                                    position: {
                                        x: x,
                                        y: y,
                                        viewportX: viewportX,
                                        viewportY: viewportY,
                                        clientX: clientX,
                                        clientY: clientY,
                                    },
                                    picked: [],
                                })];
                        case 1:
                            picked = (_d.sent()).picked;
                            return [2 /*return*/, (picked && picked[0]) || this.documentElement];
                    }
                });
            });
        };
        Document.prototype.elementsFromPointSync = function (x, y) {
            var _a = this.defaultView.canvas2Viewport({
                x: x,
                y: y,
            }), viewportX = _a.x, viewportY = _a.y;
            var _b = this.defaultView.getConfig(), width = _b.width, height = _b.height;
            // outside canvas' viewport
            if (viewportX < 0 ||
                viewportY < 0 ||
                viewportX > width ||
                viewportY > height) {
                return [];
            }
            var _c = this.defaultView.viewport2Client({
                x: viewportX,
                y: viewportY,
            }), clientX = _c.x, clientY = _c.y;
            var picked = this.defaultView
                .getRenderingService()
                .hooks.pickSync.call({
                topmost: false,
                position: {
                    x: x,
                    y: y,
                    viewportX: viewportX,
                    viewportY: viewportY,
                    clientX: clientX,
                    clientY: clientY,
                },
                picked: [],
            }).picked;
            if (picked[picked.length - 1] !== this.documentElement) {
                picked.push(this.documentElement);
            }
            return picked;
        };
        /**
         * Do picking with API instead of triggering interactive events.
         *
         * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Document/elementsFromPoint
         */
        Document.prototype.elementsFromPoint = function (x, y) {
            return __awaiter(this, void 0, void 0, function () {
                var _a, viewportX, viewportY, _b, width, height, _c, clientX, clientY, picked;
                return __generator(this, function (_d) {
                    switch (_d.label) {
                        case 0:
                            _a = this.defaultView.canvas2Viewport({
                                x: x,
                                y: y,
                            }), viewportX = _a.x, viewportY = _a.y;
                            _b = this.defaultView.getConfig(), width = _b.width, height = _b.height;
                            // outside canvas' viewport
                            if (viewportX < 0 ||
                                viewportY < 0 ||
                                viewportX > width ||
                                viewportY > height) {
                                return [2 /*return*/, []];
                            }
                            _c = this.defaultView.viewport2Client({
                                x: viewportX,
                                y: viewportY,
                            }), clientX = _c.x, clientY = _c.y;
                            return [4 /*yield*/, this.defaultView
                                    .getRenderingService()
                                    .hooks.pick.promise({
                                    topmost: false,
                                    position: {
                                        x: x,
                                        y: y,
                                        viewportX: viewportX,
                                        viewportY: viewportY,
                                        clientX: clientX,
                                        clientY: clientY,
                                    },
                                    picked: [],
                                })];
                        case 1:
                            picked = (_d.sent()).picked;
                            if (picked[picked.length - 1] !== this.documentElement) {
                                picked.push(this.documentElement);
                            }
                            return [2 /*return*/, picked];
                    }
                });
            });
        };
        /**
         * eg. Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.
         */
        Document.prototype.appendChild = function (newChild, index) {
            throw new Error(ERROR_MSG_USE_DOCUMENT_ELEMENT);
        };
        Document.prototype.insertBefore = function (newChild, refChild) {
            throw new Error(ERROR_MSG_USE_DOCUMENT_ELEMENT);
        };
        Document.prototype.removeChild = function (oldChild, destroy) {
            throw new Error(ERROR_MSG_USE_DOCUMENT_ELEMENT);
        };
        Document.prototype.replaceChild = function (newChild, oldChild, destroy) {
            throw new Error(ERROR_MSG_USE_DOCUMENT_ELEMENT);
        };
        Document.prototype.append = function () {
            throw new Error(ERROR_MSG_USE_DOCUMENT_ELEMENT);
        };
        Document.prototype.prepend = function () {
            throw new Error(ERROR_MSG_USE_DOCUMENT_ELEMENT);
        };
        /**
         * Execute query on documentElement.
         */
        Document.prototype.getElementById = function (id) {
            return this.documentElement.getElementById(id);
        };
        Document.prototype.getElementsByName = function (name) {
            return this.documentElement.getElementsByName(name);
        };
        Document.prototype.getElementsByTagName = function (tagName) {
            return this.documentElement.getElementsByTagName(tagName);
        };
        Document.prototype.getElementsByClassName = function (className) {
            return this.documentElement.getElementsByClassName(className);
        };
        Document.prototype.querySelector = function (selectors) {
            return this.documentElement.querySelector(selectors);
        };
        Document.prototype.querySelectorAll = function (selectors) {
            return this.documentElement.querySelectorAll(selectors);
        };
        Document.prototype.find = function (filter) {
            return this.documentElement.find(filter);
        };
        Document.prototype.findAll = function (filter) {
            return this.documentElement.findAll(filter);
        };
        return Document;
    }(Node));

    /**
     * apply following rules:
     * 1. `visibility` in scenegraph node
     * 2. other custom culling strategies, eg. frustum culling
     */
    var CullingPlugin = /** @class */ (function () {
        function CullingPlugin(strategies) {
            this.strategies = strategies;
        }
        CullingPlugin.prototype.apply = function (context) {
            var camera = context.camera, renderingService = context.renderingService, renderingContext = context.renderingContext;
            var strategies = this.strategies;
            renderingService.hooks.cull.tap(CullingPlugin.tag, function (object) {
                if (object) {
                    var cullable = object.cullable;
                    // cullable.visible = true;
                    // const renderBounds = object.getRenderBounds();
                    // if (AABB.isEmpty(renderBounds)) {
                    //   cullable.visible = false;
                    // } else {
                    //   const isShape2D = shape2D.indexOf(object.nodeName as Shape) > -1;
                    //   const [p0, p1, p2, p3] = camera.getFrustum().planes;
                    //   tmpAABB.setMinMax([-p1.distance, -p3.distance, 0], [p0.distance, p2.distance, 0]);
                    //   cullable.visible = isShape2D ? renderBounds.intersects(tmpAABB) : true;
                    // }
                    if (strategies.length === 0) {
                        cullable.visible = renderingContext.unculledEntities.indexOf(object.entity) > -1;
                    }
                    else {
                        // eg. implemented by g-webgl(frustum culling)
                        cullable.visible = strategies.every(function (strategy) { return strategy.isVisible(camera, object); });
                    }
                    if (!object.isCulled() && object.isVisible()) {
                        return object;
                    }
                    else {
                        // if (this.renderingContext.renderListLastFrame.indexOf(object) > -1) {
                        object.dispatchEvent(new CustomEvent(ElementEvent.CULLED));
                        // }
                    }
                    return null;
                }
                return object;
            });
            renderingService.hooks.afterRender.tap(CullingPlugin.tag, function (object) {
                object.cullable.visibilityPlaneMask = -1;
            });
        };
        CullingPlugin.tag = 'Culling';
        return CullingPlugin;
    }());

    /**
     * support mouse & touch events
     * @see https://github.com/pixijs/pixi.js/blob/dev/packages/interaction/README.md
     *
     * also provide some extra events such as `drag`
     */
    var EventPlugin = /** @class */ (function () {
        function EventPlugin() {
            var _this = this;
            this.autoPreventDefault = false;
            this.rootPointerEvent = new FederatedPointerEvent(null);
            this.rootWheelEvent = new FederatedWheelEvent(null);
            this.onPointerMove = function (nativeEvent) {
                var e_1, _a;
                var _b, _c;
                var canvas = (_c = (_b = _this.context.renderingContext.root) === null || _b === void 0 ? void 0 : _b.ownerDocument) === null || _c === void 0 ? void 0 : _c.defaultView;
                if (canvas.supportsTouchEvents &&
                    nativeEvent.pointerType === 'touch')
                    return;
                var normalizedEvents = _this.normalizeToPointerEvent(nativeEvent, canvas);
                try {
                    for (var normalizedEvents_1 = __values(normalizedEvents), normalizedEvents_1_1 = normalizedEvents_1.next(); !normalizedEvents_1_1.done; normalizedEvents_1_1 = normalizedEvents_1.next()) {
                        var normalizedEvent = normalizedEvents_1_1.value;
                        var event_1 = _this.bootstrapEvent(_this.rootPointerEvent, normalizedEvent, canvas, nativeEvent);
                        _this.context.eventService.mapEvent(event_1);
                    }
                }
                catch (e_1_1) { e_1 = { error: e_1_1 }; }
                finally {
                    try {
                        if (normalizedEvents_1_1 && !normalizedEvents_1_1.done && (_a = normalizedEvents_1.return)) _a.call(normalizedEvents_1);
                    }
                    finally { if (e_1) throw e_1.error; }
                }
                _this.setCursor(_this.context.eventService.cursor);
            };
            this.onClick = function (nativeEvent) {
                var e_2, _a;
                var _b, _c;
                var canvas = (_c = (_b = _this.context.renderingContext.root) === null || _b === void 0 ? void 0 : _b.ownerDocument) === null || _c === void 0 ? void 0 : _c.defaultView;
                var normalizedEvents = _this.normalizeToPointerEvent(nativeEvent, canvas);
                try {
                    for (var normalizedEvents_2 = __values(normalizedEvents), normalizedEvents_2_1 = normalizedEvents_2.next(); !normalizedEvents_2_1.done; normalizedEvents_2_1 = normalizedEvents_2.next()) {
                        var normalizedEvent = normalizedEvents_2_1.value;
                        var event_2 = _this.bootstrapEvent(_this.rootPointerEvent, normalizedEvent, canvas, nativeEvent);
                        _this.context.eventService.mapEvent(event_2);
                    }
                }
                catch (e_2_1) { e_2 = { error: e_2_1 }; }
                finally {
                    try {
                        if (normalizedEvents_2_1 && !normalizedEvents_2_1.done && (_a = normalizedEvents_2.return)) _a.call(normalizedEvents_2);
                    }
                    finally { if (e_2) throw e_2.error; }
                }
                _this.setCursor(_this.context.eventService.cursor);
            };
        }
        EventPlugin.prototype.apply = function (context) {
            var _this = this;
            this.context = context;
            var renderingService = context.renderingService;
            var canvas = this.context.renderingContext.root.ownerDocument.defaultView;
            this.context.eventService.setPickHandler(function (position) {
                var picked = _this.context.renderingService.hooks.pickSync.call({
                    position: position,
                    picked: [],
                    topmost: true, // we only concern the topmost element
                }).picked;
                return picked[0] || null;
            });
            renderingService.hooks.pointerWheel.tap(EventPlugin.tag, function (nativeEvent) {
                var wheelEvent = _this.normalizeWheelEvent(nativeEvent);
                _this.context.eventService.mapEvent(wheelEvent);
            });
            renderingService.hooks.pointerDown.tap(EventPlugin.tag, function (nativeEvent) {
                var e_3, _a;
                if (canvas.supportsTouchEvents &&
                    nativeEvent.pointerType === 'touch')
                    return;
                var events = _this.normalizeToPointerEvent(nativeEvent, canvas);
                if (_this.autoPreventDefault && events[0].isNormalized) {
                    var cancelable = nativeEvent.cancelable || !('cancelable' in nativeEvent);
                    if (cancelable) {
                        nativeEvent.preventDefault();
                    }
                }
                try {
                    for (var events_1 = __values(events), events_1_1 = events_1.next(); !events_1_1.done; events_1_1 = events_1.next()) {
                        var event_3 = events_1_1.value;
                        var federatedEvent = _this.bootstrapEvent(_this.rootPointerEvent, event_3, canvas, nativeEvent);
                        _this.context.eventService.mapEvent(federatedEvent);
                    }
                }
                catch (e_3_1) { e_3 = { error: e_3_1 }; }
                finally {
                    try {
                        if (events_1_1 && !events_1_1.done && (_a = events_1.return)) _a.call(events_1);
                    }
                    finally { if (e_3) throw e_3.error; }
                }
                _this.setCursor(_this.context.eventService.cursor);
            });
            renderingService.hooks.pointerUp.tap(EventPlugin.tag, function (nativeEvent) {
                var e_4, _a;
                if (canvas.supportsTouchEvents &&
                    nativeEvent.pointerType === 'touch')
                    return;
                // account for element in SVG
                var $element = _this.context.contextService.getDomElement();
                var isNativeEventFromCanvas = _this.context.eventService.isNativeEventFromCanvas($element, nativeEvent);
                var outside = !isNativeEventFromCanvas ? 'outside' : '';
                var normalizedEvents = _this.normalizeToPointerEvent(nativeEvent, canvas);
                try {
                    for (var normalizedEvents_3 = __values(normalizedEvents), normalizedEvents_3_1 = normalizedEvents_3.next(); !normalizedEvents_3_1.done; normalizedEvents_3_1 = normalizedEvents_3.next()) {
                        var normalizedEvent = normalizedEvents_3_1.value;
                        var event_4 = _this.bootstrapEvent(_this.rootPointerEvent, normalizedEvent, canvas, nativeEvent);
                        event_4.type += outside;
                        _this.context.eventService.mapEvent(event_4);
                    }
                }
                catch (e_4_1) { e_4 = { error: e_4_1 }; }
                finally {
                    try {
                        if (normalizedEvents_3_1 && !normalizedEvents_3_1.done && (_a = normalizedEvents_3.return)) _a.call(normalizedEvents_3);
                    }
                    finally { if (e_4) throw e_4.error; }
                }
                _this.setCursor(_this.context.eventService.cursor);
            });
            renderingService.hooks.pointerMove.tap(EventPlugin.tag, this.onPointerMove);
            renderingService.hooks.pointerOver.tap(EventPlugin.tag, this.onPointerMove);
            renderingService.hooks.pointerOut.tap(EventPlugin.tag, this.onPointerMove);
            renderingService.hooks.click.tap(EventPlugin.tag, this.onClick);
            renderingService.hooks.pointerCancel.tap(EventPlugin.tag, function (nativeEvent) {
                var e_5, _a;
                var normalizedEvents = _this.normalizeToPointerEvent(nativeEvent, canvas);
                try {
                    for (var normalizedEvents_4 = __values(normalizedEvents), normalizedEvents_4_1 = normalizedEvents_4.next(); !normalizedEvents_4_1.done; normalizedEvents_4_1 = normalizedEvents_4.next()) {
                        var normalizedEvent = normalizedEvents_4_1.value;
                        var event_5 = _this.bootstrapEvent(_this.rootPointerEvent, normalizedEvent, canvas, nativeEvent);
                        _this.context.eventService.mapEvent(event_5);
                    }
                }
                catch (e_5_1) { e_5 = { error: e_5_1 }; }
                finally {
                    try {
                        if (normalizedEvents_4_1 && !normalizedEvents_4_1.done && (_a = normalizedEvents_4.return)) _a.call(normalizedEvents_4);
                    }
                    finally { if (e_5) throw e_5.error; }
                }
                _this.setCursor(_this.context.eventService.cursor);
            });
        };
        EventPlugin.prototype.getViewportXY = function (nativeEvent) {
            var x;
            var y;
            /**
             * Should account for CSS Transform applied on container.
             * @see https://github.com/antvis/G/issues/1161
             * @see https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/offsetX
             */
            var offsetX = nativeEvent.offsetX, offsetY = nativeEvent.offsetY, clientX = nativeEvent.clientX, clientY = nativeEvent.clientY;
            if (this.context.config.supportsCSSTransform &&
                !isNil(offsetX) &&
                !isNil(offsetY)) {
                x = offsetX;
                y = offsetY;
            }
            else {
                var point = this.context.eventService.client2Viewport(new Point(clientX, clientY));
                x = point.x;
                y = point.y;
            }
            return { x: x, y: y };
        };
        EventPlugin.prototype.bootstrapEvent = function (event, normalizedEvent, view, nativeEvent) {
            event.view = view;
            event.originalEvent = null;
            event.nativeEvent = nativeEvent;
            event.pointerId = normalizedEvent.pointerId;
            event.width = normalizedEvent.width;
            event.height = normalizedEvent.height;
            event.isPrimary = normalizedEvent.isPrimary;
            event.pointerType = normalizedEvent.pointerType;
            event.pressure = normalizedEvent.pressure;
            event.tangentialPressure = normalizedEvent.tangentialPressure;
            event.tiltX = normalizedEvent.tiltX;
            event.tiltY = normalizedEvent.tiltY;
            event.twist = normalizedEvent.twist;
            this.transferMouseData(event, normalizedEvent);
            var _a = this.getViewportXY(normalizedEvent), x = _a.x, y = _a.y;
            event.viewport.x = x;
            event.viewport.y = y;
            var _b = this.context.eventService.viewport2Canvas(event.viewport), canvasX = _b.x, canvasY = _b.y;
            event.canvas.x = canvasX;
            event.canvas.y = canvasY;
            event.global.copyFrom(event.canvas);
            event.offset.copyFrom(event.canvas);
            event.isTrusted = nativeEvent.isTrusted;
            if (event.type === 'pointerleave') {
                event.type = 'pointerout';
            }
            if (event.type.startsWith('mouse')) {
                event.type = event.type.replace('mouse', 'pointer');
            }
            if (event.type.startsWith('touch')) {
                event.type = TOUCH_TO_POINTER[event.type] || event.type;
            }
            return event;
        };
        EventPlugin.prototype.normalizeWheelEvent = function (nativeEvent) {
            var event = this.rootWheelEvent;
            this.transferMouseData(event, nativeEvent);
            event.deltaMode = nativeEvent.deltaMode;
            event.deltaX = nativeEvent.deltaX;
            event.deltaY = nativeEvent.deltaY;
            event.deltaZ = nativeEvent.deltaZ;
            var _a = this.getViewportXY(nativeEvent), x = _a.x, y = _a.y;
            event.viewport.x = x;
            event.viewport.y = y;
            var _b = this.context.eventService.viewport2Canvas(event.viewport), canvasX = _b.x, canvasY = _b.y;
            event.canvas.x = canvasX;
            event.canvas.y = canvasY;
            event.global.copyFrom(event.canvas);
            event.offset.copyFrom(event.canvas);
            event.nativeEvent = nativeEvent;
            event.type = nativeEvent.type;
            return event;
        };
        /**
         * Transfers base & mouse event data from the nativeEvent to the federated event.
         */
        EventPlugin.prototype.transferMouseData = function (event, nativeEvent) {
            event.isTrusted = nativeEvent.isTrusted;
            event.srcElement = nativeEvent.srcElement;
            event.timeStamp = clock.now();
            event.type = nativeEvent.type;
            event.altKey = nativeEvent.altKey;
            event.metaKey = nativeEvent.metaKey;
            event.shiftKey = nativeEvent.shiftKey;
            event.ctrlKey = nativeEvent.ctrlKey;
            event.button = nativeEvent.button;
            event.buttons = nativeEvent.buttons;
            event.client.x = nativeEvent.clientX;
            event.client.y = nativeEvent.clientY;
            event.movement.x = nativeEvent.movementX;
            event.movement.y = nativeEvent.movementY;
            event.page.x = nativeEvent.pageX;
            event.page.y = nativeEvent.pageY;
            event.screen.x = nativeEvent.screenX;
            event.screen.y = nativeEvent.screenY;
            event.relatedTarget = null;
        };
        EventPlugin.prototype.setCursor = function (cursor) {
            this.context.contextService.applyCursorStyle(cursor || this.context.config.cursor || 'default');
        };
        EventPlugin.prototype.normalizeToPointerEvent = function (event, canvas) {
            var normalizedEvents = [];
            if (canvas.isTouchEvent(event)) {
                for (var i = 0; i < event.changedTouches.length; i++) {
                    var touch = event.changedTouches[i];
                    // use changedTouches instead of touches since touchend has no touches
                    // @see https://stackoverflow.com/a/10079076
                    if (isUndefined(touch.button))
                        touch.button = 0;
                    if (isUndefined(touch.buttons))
                        touch.buttons = 1;
                    if (isUndefined(touch.isPrimary)) {
                        touch.isPrimary =
                            event.touches.length === 1 && event.type === 'touchstart';
                    }
                    if (isUndefined(touch.width))
                        touch.width = touch.radiusX || 1;
                    if (isUndefined(touch.height))
                        touch.height = touch.radiusY || 1;
                    if (isUndefined(touch.tiltX))
                        touch.tiltX = 0;
                    if (isUndefined(touch.tiltY))
                        touch.tiltY = 0;
                    if (isUndefined(touch.pointerType))
                        touch.pointerType = 'touch';
                    // @see https://developer.mozilla.org/zh-CN/docs/Web/API/Touch/identifier
                    if (isUndefined(touch.pointerId))
                        touch.pointerId = touch.identifier || 0;
                    if (isUndefined(touch.pressure))
                        touch.pressure = touch.force || 0.5;
                    if (isUndefined(touch.twist))
                        touch.twist = 0;
                    if (isUndefined(touch.tangentialPressure))
                        touch.tangentialPressure = 0;
                    touch.isNormalized = true;
                    touch.type = event.type;
                    normalizedEvents.push(touch);
                }
            }
            else if (canvas.isMouseEvent(event)) {
                var tempEvent = event;
                if (isUndefined(tempEvent.isPrimary))
                    tempEvent.isPrimary = true;
                if (isUndefined(tempEvent.width))
                    tempEvent.width = 1;
                if (isUndefined(tempEvent.height))
                    tempEvent.height = 1;
                if (isUndefined(tempEvent.tiltX))
                    tempEvent.tiltX = 0;
                if (isUndefined(tempEvent.tiltY))
                    tempEvent.tiltY = 0;
                if (isUndefined(tempEvent.pointerType))
                    tempEvent.pointerType = 'mouse';
                if (isUndefined(tempEvent.pointerId))
                    tempEvent.pointerId = MOUSE_POINTER_ID;
                if (isUndefined(tempEvent.pressure))
                    tempEvent.pressure = 0.5;
                if (isUndefined(tempEvent.twist))
                    tempEvent.twist = 0;
                if (isUndefined(tempEvent.tangentialPressure))
                    tempEvent.tangentialPressure = 0;
                tempEvent.isNormalized = true;
                normalizedEvents.push(tempEvent);
            }
            else {
                normalizedEvents.push(event);
            }
            return normalizedEvents;
        };
        EventPlugin.tag = 'Event';
        return EventPlugin;
    }());

    // group is not a 2d shape
    var shape2D = [
        Shape.CIRCLE,
        Shape.ELLIPSE,
        Shape.IMAGE,
        Shape.RECT,
        Shape.LINE,
        Shape.POLYLINE,
        Shape.POLYGON,
        Shape.TEXT,
        Shape.PATH,
        Shape.HTML,
    ];
    var FrustumCullingStrategy = /** @class */ (function () {
        function FrustumCullingStrategy() {
        }
        FrustumCullingStrategy.prototype.isVisible = function (camera, object) {
            // return true;
            var _a, _b;
            var cullable = object.cullable;
            if (!cullable.enable) {
                return true;
            }
            var renderBounds = object.getRenderBounds();
            if (AABB.isEmpty(renderBounds)) {
                return false;
            }
            // get VP matrix from camera
            var frustum = camera.getFrustum();
            var parentVisibilityPlaneMask = (_b = (_a = object.parentNode) === null || _a === void 0 ? void 0 : _a.cullable) === null || _b === void 0 ? void 0 : _b.visibilityPlaneMask;
            cullable.visibilityPlaneMask = this.computeVisibilityWithPlaneMask(object, renderBounds, parentVisibilityPlaneMask || Mask.INDETERMINATE, frustum.planes);
            cullable.visible = cullable.visibilityPlaneMask !== Mask.OUTSIDE;
            return cullable.visible;
        };
        /**
         *
         * @see「Optimized View Frustum Culling Algorithms for Bounding Boxes」
         * @see https://github.com/antvis/GWebGPUEngine/issues/3
         *
         * * 基础相交测试 the basic intersection test
         * * 标记 masking @see https://cesium.com/blog/2015/08/04/fast-hierarchical-culling/
         * * TODO: 平面一致性测试 the plane-coherency test
         * * TODO: 支持 mesh 指定自身的剔除策略，参考 Babylon.js @see https://doc.babylonjs.com/how_to/optimizing_your_scene#changing-mesh-culling-strategy
         *
         * @param aabb aabb
         * @param parentPlaneMask mask of parent
         * @param planes planes of frustum
         */
        FrustumCullingStrategy.prototype.computeVisibilityWithPlaneMask = function (object, aabb, parentPlaneMask, planes) {
            if (parentPlaneMask === Mask.OUTSIDE || parentPlaneMask === Mask.INSIDE) {
                // 父节点完全位于视锥内或者外部，直接返回
                return parentPlaneMask;
            }
            // Start with MASK_INSIDE (all zeros) so that after the loop, the return value can be compared with MASK_INSIDE.
            // (Because if there are fewer than 31 planes, the upper bits wont be changed.)
            var mask = Mask.INSIDE;
            var isShape2D = shape2D.indexOf(object.nodeName) > -1;
            // Use viewport culling for 2D shapes
            // @see https://github.com/antvis/g/issues/914
            for (var k = 0, len = planes.length; k < len; ++k) {
                // For k greater than 31 (since 31 is the maximum number of INSIDE/INTERSECTING bits we can store), skip the optimization.
                var flag = 1 << k;
                if ((parentPlaneMask & flag) === 0) {
                    // 父节点处于当前面内部，可以跳过
                    continue;
                }
                // skip near & far planes when testing 2D shapes
                if (isShape2D && (k === 4 || k === 5)) {
                    continue;
                }
                // p-vertex n-vertex <-|plane p-vertex n-vertex
                // 使用 p-vertex 和 n-vertex 加速，避免进行平面和 aabb 全部顶点的相交检测
                var _a = planes[k], normal = _a.normal, distance = _a.distance;
                if (dot(normal, aabb.getPositiveFarPoint(planes[k])) + distance <
                    0) {
                    return Mask.OUTSIDE;
                }
                if (dot(normal, aabb.getNegativeFarPoint(planes[k])) + distance <
                    0) {
                    // 和当前面相交，对应位置为1，继续检测下一个面
                    mask |= flag;
                }
            }
            return mask;
        };
        return FrustumCullingStrategy;
    }());

    var PrepareRendererPlugin = /** @class */ (function () {
        function PrepareRendererPlugin() {
            /**
             * sync to RBush later
             */
            this.toSync = new Set();
        }
        // private isFirstTimeRendering = true;
        // private syncing = false;
        PrepareRendererPlugin.prototype.apply = function (context) {
            var _this = this;
            var renderingService = context.renderingService, renderingContext = context.renderingContext, rBushRoot = context.rBushRoot;
            var canvas = renderingContext.root.ownerDocument.defaultView;
            this.rBush = rBushRoot;
            var handleAttributeChanged = function (e) {
                var object = e.target;
                object.renderable.dirty = true;
                renderingService.dirtify();
            };
            var handleBoundsChanged = function (e) {
                var affectChildren = e.detail.affectChildren;
                var object = e.target;
                if (affectChildren) {
                    object.forEach(function (node) {
                        _this.toSync.add(node);
                    });
                }
                var p = object;
                while (p) {
                    if (p.renderable) {
                        _this.toSync.add(p);
                    }
                    p = p.parentElement;
                }
                // this.pushToSync(e.composedPath().slice(0, -2) as DisplayObject[]);
                renderingService.dirtify();
            };
            var handleMounted = function (e) {
                var object = e.target;
                if (runtime.enableSizeAttenuation) {
                    runtime.styleValueRegistry.updateSizeAttenuation(object, canvas.getCamera().getZoom());
                }
                if (runtime.enableCSSParsing) {
                    // recalc style values
                    runtime.styleValueRegistry.recalc(object);
                }
                runtime.sceneGraphService.dirtifyToRoot(object);
                renderingService.dirtify();
            };
            var handleUnmounted = function (e) {
                var object = e.target;
                var rBushNode = object.rBushNode;
                if (rBushNode.aabb) {
                    _this.rBush.remove(rBushNode.aabb);
                }
                _this.toSync.delete(object);
                runtime.sceneGraphService.dirtifyToRoot(object);
                renderingService.dirtify();
            };
            renderingService.hooks.init.tap(PrepareRendererPlugin.tag, function () {
                canvas.addEventListener(ElementEvent.MOUNTED, handleMounted);
                canvas.addEventListener(ElementEvent.UNMOUNTED, handleUnmounted);
                canvas.addEventListener(ElementEvent.ATTR_MODIFIED, handleAttributeChanged);
                canvas.addEventListener(ElementEvent.BOUNDS_CHANGED, handleBoundsChanged);
            });
            renderingService.hooks.destroy.tap(PrepareRendererPlugin.tag, function () {
                canvas.removeEventListener(ElementEvent.MOUNTED, handleMounted);
                canvas.removeEventListener(ElementEvent.UNMOUNTED, handleUnmounted);
                canvas.removeEventListener(ElementEvent.ATTR_MODIFIED, handleAttributeChanged);
                canvas.removeEventListener(ElementEvent.BOUNDS_CHANGED, handleBoundsChanged);
                _this.toSync.clear();
            });
            renderingService.hooks.endFrame.tap(PrepareRendererPlugin.tag, function () {
                // if (this.isFirstTimeRendering) {
                //   this.isFirstTimeRendering = false;
                //   this.syncing = true;
                //   // @see https://github.com/antvis/G/issues/1117
                //   setTimeout(() => {
                //     this.syncRTree();
                //     console.log('fcp...');
                //   });
                // } else {
                //   console.log('next...');
                _this.syncRTree();
                // }
            });
        };
        PrepareRendererPlugin.prototype.syncRTree = function () {
            // if (this.syncing) {
            //   return;
            // }
            var _this = this;
            // bounds changed, need re-inserting its children
            var bulk = [];
            Array.from(this.toSync)
                // some objects may be removed since last frame
                .filter(function (object) { return object.isConnected; })
                .forEach(function (node) {
                var rBushNode = node.rBushNode;
                // clear dirty node
                if (rBushNode && rBushNode.aabb) {
                    _this.rBush.remove(rBushNode.aabb);
                }
                var renderBounds = node.getRenderBounds();
                if (renderBounds) {
                    var _a = __read(renderBounds.getMin(), 2), minX = _a[0], minY = _a[1];
                    var _b = __read(renderBounds.getMax(), 2), maxX = _b[0], maxY = _b[1];
                    if (!rBushNode.aabb) {
                        rBushNode.aabb = {};
                    }
                    rBushNode.aabb.displayObject = node;
                    rBushNode.aabb.minX = minX;
                    rBushNode.aabb.minY = minY;
                    rBushNode.aabb.maxX = maxX;
                    rBushNode.aabb.maxY = maxY;
                }
                if (rBushNode.aabb) {
                    // TODO: NaN occurs when width/height of Rect is 0
                    if (!isNaN(rBushNode.aabb.maxX) &&
                        !isNaN(rBushNode.aabb.maxX) &&
                        !isNaN(rBushNode.aabb.minX) &&
                        !isNaN(rBushNode.aabb.minY)) {
                        bulk.push(rBushNode.aabb);
                    }
                }
            });
            // use bulk inserting, which is ~2-3 times faster
            // @see https://github.com/mourner/rbush#bulk-inserting-data
            this.rBush.load(bulk);
            bulk.length = 0;
            this.toSync.clear();
            // this.syncing = false;
        };
        PrepareRendererPlugin.tag = 'Prepare';
        return PrepareRendererPlugin;
    }());

    function isCanvas(value) {
        return !!value.document;
    }
    var CanvasEvent;
    (function (CanvasEvent) {
        CanvasEvent["READY"] = "ready";
        CanvasEvent["BEFORE_RENDER"] = "beforerender";
        CanvasEvent["RERENDER"] = "rerender";
        CanvasEvent["AFTER_RENDER"] = "afterrender";
        CanvasEvent["BEFORE_DESTROY"] = "beforedestroy";
        CanvasEvent["AFTER_DESTROY"] = "afterdestroy";
        CanvasEvent["RESIZE"] = "resize";
        CanvasEvent["DIRTY_RECTANGLE"] = "dirtyrectangle";
        CanvasEvent["RENDERER_CHANGED"] = "rendererchanged";
    })(CanvasEvent || (CanvasEvent = {}));
    var DEFAULT_CAMERA_Z = 500;
    var DEFAULT_CAMERA_NEAR = 0.1;
    var DEFAULT_CAMERA_FAR = 1000;
    /**
     * reuse custom event preventing from re-create them in every frame
     */
    var mountedEvent = new CustomEvent(ElementEvent.MOUNTED);
    var unmountedEvent = new CustomEvent(ElementEvent.UNMOUNTED);
    var beforeRenderEvent = new CustomEvent(CanvasEvent.BEFORE_RENDER);
    var rerenderEvent = new CustomEvent(CanvasEvent.RERENDER);
    var afterRenderEvent = new CustomEvent(CanvasEvent.AFTER_RENDER);
    /**
     * can be treated like Window in DOM
     * provide some extra methods like `window`, such as:
     * * `window.requestAnimationFrame`
     * * `window.devicePixelRatio`
     *
     * prototype chains: Canvas(Window) -> EventTarget
     */
    var Canvas = /** @class */ (function (_super) {
        __extends(Canvas, _super);
        function Canvas(config) {
            var _this = _super.call(this) || this;
            /**
             * @see https://developer.mozilla.org/en-US/docs/Web/API/Element
             */
            _this.Element = DisplayObject;
            _this.inited = false;
            _this.context = {};
            // create document
            _this.document = new Document();
            _this.document.defaultView = _this;
            // create registry of custom elements
            _this.customElements = new CustomElementRegistry();
            var container = config.container, canvas = config.canvas, offscreenCanvas = config.offscreenCanvas, width = config.width, height = config.height, devicePixelRatio = config.devicePixelRatio, renderer = config.renderer, background = config.background, cursor = config.cursor, document = config.document, requestAnimationFrame = config.requestAnimationFrame, cancelAnimationFrame = config.cancelAnimationFrame, createImage = config.createImage, supportsPointerEvents = config.supportsPointerEvents, supportsTouchEvents = config.supportsTouchEvents, supportsCSSTransform = config.supportsCSSTransform, supportsMutipleCanvasesInOneContainer = config.supportsMutipleCanvasesInOneContainer, useNativeClickEvent = config.useNativeClickEvent, alwaysTriggerPointerEventOnCanvas = config.alwaysTriggerPointerEventOnCanvas, isTouchEvent = config.isTouchEvent, isMouseEvent = config.isMouseEvent;
            if (!supportsMutipleCanvasesInOneContainer) {
                cleanExistedCanvas(container, _this);
            }
            var canvasWidth = width;
            var canvasHeight = height;
            var dpr = devicePixelRatio;
            // use user-defined <canvas> or OffscreenCanvas
            if (canvas) {
                // infer width & height with dpr
                dpr = devicePixelRatio || (isBrowser && window.devicePixelRatio) || 1;
                dpr = dpr >= 1 ? Math.ceil(dpr) : 1;
                canvasWidth = width || getWidth(canvas) || canvas.width / dpr;
                canvasHeight = height || getHeight(canvas) || canvas.height / dpr;
            }
            // override it in runtime
            if (offscreenCanvas) {
                runtime.offscreenCanvas = offscreenCanvas;
            }
            /**
             * implements `Window` interface
             */
            _this.devicePixelRatio = dpr;
            _this.requestAnimationFrame =
                requestAnimationFrame !== null && requestAnimationFrame !== void 0 ? requestAnimationFrame : raf.bind(runtime.globalThis);
            _this.cancelAnimationFrame =
                cancelAnimationFrame !== null && cancelAnimationFrame !== void 0 ? cancelAnimationFrame : caf.bind(runtime.globalThis);
            /**
             * limits query
             */
            // the following feature-detect from hammer.js
            // @see https://github.com/hammerjs/hammer.js/blob/master/src/inputjs/input-consts.js#L5
            _this.supportsTouchEvents =
                supportsTouchEvents !== null && supportsTouchEvents !== void 0 ? supportsTouchEvents : 'ontouchstart' in runtime.globalThis;
            _this.supportsPointerEvents =
                supportsPointerEvents !== null && supportsPointerEvents !== void 0 ? supportsPointerEvents : !!runtime.globalThis.PointerEvent;
            _this.isTouchEvent =
                isTouchEvent !== null && isTouchEvent !== void 0 ? isTouchEvent : (function (event) {
                    return _this.supportsTouchEvents &&
                        event instanceof runtime.globalThis.TouchEvent;
                });
            _this.isMouseEvent =
                isMouseEvent !== null && isMouseEvent !== void 0 ? isMouseEvent : (function (event) {
                    return !runtime.globalThis.MouseEvent ||
                        (event instanceof runtime.globalThis.MouseEvent &&
                            (!_this.supportsPointerEvents ||
                                !(event instanceof runtime.globalThis.PointerEvent)));
                });
            _this.initRenderingContext({
                container: container,
                canvas: canvas,
                width: canvasWidth,
                height: canvasHeight,
                renderer: renderer,
                offscreenCanvas: offscreenCanvas,
                devicePixelRatio: dpr,
                cursor: cursor || 'default',
                background: background || 'transparent',
                createImage: createImage,
                document: document,
                supportsCSSTransform: supportsCSSTransform,
                useNativeClickEvent: useNativeClickEvent,
                alwaysTriggerPointerEventOnCanvas: alwaysTriggerPointerEventOnCanvas,
            });
            _this.initDefaultCamera(canvasWidth, canvasHeight, renderer.clipSpaceNearZ);
            _this.initRenderer(renderer, true);
            return _this;
        }
        Canvas.prototype.initRenderingContext = function (mergedConfig) {
            this.context.config = mergedConfig;
            // bind rendering context, shared by all renderers
            this.context.renderingContext = {
                /**
                 * the root node in scene graph
                 */
                root: this.document.documentElement,
                renderListCurrentFrame: [],
                unculledEntities: [],
                renderReasons: new Set(),
                force: false,
                dirty: false,
            };
        };
        Canvas.prototype.initDefaultCamera = function (width, height, clipSpaceNearZ) {
            var _this = this;
            // set a default ortho camera
            var camera = new runtime.CameraContribution();
            camera.clipSpaceNearZ = clipSpaceNearZ;
            camera
                .setType(CameraType.EXPLORING, CameraTrackingMode.DEFAULT)
                .setPosition(width / 2, height / 2, DEFAULT_CAMERA_Z)
                .setFocalPoint(width / 2, height / 2, 0)
                .setOrthographic(width / -2, width / 2, height / 2, height / -2, DEFAULT_CAMERA_NEAR, DEFAULT_CAMERA_FAR);
            // keep ref since it will use raf in camera animation
            camera.canvas = this;
            // redraw when camera changed
            camera.eventEmitter.on(CameraEvent.UPDATED, function () {
                _this.context.renderingContext.renderReasons.add(RenderReason.CAMERA_CHANGED);
                if (runtime.enableSizeAttenuation &&
                    _this.getConfig().renderer.getConfig().enableSizeAttenuation) {
                    _this.updateSizeAttenuation();
                }
            });
            // bind camera
            this.context.camera = camera;
        };
        Canvas.prototype.updateSizeAttenuation = function () {
            var zoom = this.getCamera().getZoom();
            this.document.documentElement.forEach(function (node) {
                runtime.styleValueRegistry.updateSizeAttenuation(node, zoom);
            });
        };
        Canvas.prototype.getConfig = function () {
            return this.context.config;
        };
        /**
         * get the root displayObject in scenegraph
         * @alias this.document.documentElement
         */
        Canvas.prototype.getRoot = function () {
            return this.document.documentElement;
        };
        /**
         * get the camera of canvas
         */
        Canvas.prototype.getCamera = function () {
            return this.context.camera;
        };
        Canvas.prototype.getContextService = function () {
            return this.context.contextService;
        };
        Canvas.prototype.getEventService = function () {
            return this.context.eventService;
        };
        Canvas.prototype.getRenderingService = function () {
            return this.context.renderingService;
        };
        Canvas.prototype.getRenderingContext = function () {
            return this.context.renderingContext;
        };
        Canvas.prototype.getStats = function () {
            return this.getRenderingService().getStats();
        };
        Object.defineProperty(Canvas.prototype, "ready", {
            // /**
            //  * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle
            //  */
            // getComputedStyle(node: DisplayObject) {
            //   return node.computedStyle;
            // }
            get: function () {
                var _this = this;
                if (!this.readyPromise) {
                    this.readyPromise = new Promise(function (resolve) {
                        _this.resolveReadyPromise = function () {
                            resolve(_this);
                        };
                    });
                    if (this.inited) {
                        this.resolveReadyPromise();
                    }
                }
                return this.readyPromise;
            },
            enumerable: false,
            configurable: true
        });
        /**
         * `cleanUp` means clean all the internal services of Canvas which happens when calling `canvas.destroy()`.
         */
        Canvas.prototype.destroy = function (cleanUp, skipTriggerEvent) {
            if (cleanUp === void 0) { cleanUp = true; }
            if (skipTriggerEvent === void 0) { skipTriggerEvent = false; }
            if (!skipTriggerEvent) {
                this.dispatchEvent(new CustomEvent(CanvasEvent.BEFORE_DESTROY));
            }
            if (this.frameId) {
                var cancelRAF = this.getConfig().cancelAnimationFrame || cancelAnimationFrame;
                cancelRAF(this.frameId);
            }
            // unmount all children
            var root = this.getRoot();
            this.unmountChildren(root);
            if (cleanUp) {
                // destroy Document
                this.document.destroy();
                this.getEventService().destroy();
            }
            // destroy services
            this.getRenderingService().destroy();
            this.getContextService().destroy();
            // clear root after renderservice destroyed
            if (cleanUp && this.context.rBushRoot) {
                // clear rbush
                this.context.rBushRoot.clear();
                this.context.rBushRoot = null;
                this.context.renderingContext.root = null;
            }
            if (!skipTriggerEvent) {
                this.dispatchEvent(new CustomEvent(CanvasEvent.AFTER_DESTROY));
            }
        };
        /**
         * compatible with G 3.0
         * @deprecated
         * @alias resize
         */
        Canvas.prototype.changeSize = function (width, height) {
            this.resize(width, height);
        };
        Canvas.prototype.resize = function (width, height) {
            // update canvas' config
            var canvasConfig = this.context.config;
            canvasConfig.width = width;
            canvasConfig.height = height;
            // resize context
            this.getContextService().resize(width, height);
            // resize camera
            var camera = this.context.camera;
            var projectionMode = camera.getProjectionMode();
            camera
                .setPosition(width / 2, height / 2, DEFAULT_CAMERA_Z)
                .setFocalPoint(width / 2, height / 2, 0);
            if (projectionMode === CameraProjectionMode.ORTHOGRAPHIC) {
                camera.setOrthographic(width / -2, width / 2, height / 2, height / -2, camera.getNear(), camera.getFar());
            }
            else {
                camera.setAspect(width / height);
            }
            this.dispatchEvent(new CustomEvent(CanvasEvent.RESIZE, { width: width, height: height }));
        };
        // proxy to document.documentElement
        Canvas.prototype.appendChild = function (child, index) {
            return this.document.documentElement.appendChild(child, index);
        };
        Canvas.prototype.insertBefore = function (newChild, refChild) {
            return this.document.documentElement.insertBefore(newChild, refChild);
        };
        Canvas.prototype.removeChild = function (child) {
            return this.document.documentElement.removeChild(child);
        };
        /**
         * Remove all children which can be appended to its original parent later again.
         */
        Canvas.prototype.removeChildren = function () {
            this.document.documentElement.removeChildren();
        };
        /**
         * Recursively destroy all children which can not be appended to its original parent later again.
         * But the canvas remains running which means display objects can be appended later.
         */
        Canvas.prototype.destroyChildren = function () {
            this.document.documentElement.destroyChildren();
        };
        Canvas.prototype.render = function () {
            var _this = this;
            this.dispatchEvent(beforeRenderEvent);
            var renderingService = this.getRenderingService();
            renderingService.render(this.getConfig(), function () {
                // trigger actual rerender event
                // @see https://github.com/antvis/G/issues/1268
                _this.dispatchEvent(rerenderEvent);
            });
            this.dispatchEvent(afterRenderEvent);
        };
        Canvas.prototype.run = function () {
            var _this = this;
            var tick = function () {
                _this.render();
                _this.frameId = _this.requestAnimationFrame(tick);
            };
            tick();
        };
        Canvas.prototype.initRenderer = function (renderer, firstContentfullPaint) {
            var _this = this;
            if (firstContentfullPaint === void 0) { firstContentfullPaint = false; }
            if (!renderer) {
                throw new Error('Renderer is required.');
            }
            // reset
            this.inited = false;
            this.readyPromise = undefined;
            // FIXME: should re-create here?
            this.context.rBushRoot = new RBush();
            // reset rendering plugins
            this.context.renderingPlugins = [];
            this.context.renderingPlugins.push(new EventPlugin(), new PrepareRendererPlugin(), 
            // new DirtyCheckPlugin(),
            new CullingPlugin([new FrustumCullingStrategy()]));
            //
            this.loadRendererContainerModule(renderer);
            // init context service
            this.context.contextService = new this.context.ContextService(__assign(__assign({}, runtime), this.context));
            // init rendering service
            this.context.renderingService = new RenderingService(runtime, this.context);
            // init event service
            this.context.eventService = new EventService(runtime, this.context);
            this.context.eventService.init();
            if (this.context.contextService.init) {
                this.context.contextService.init();
                this.initRenderingService(renderer, firstContentfullPaint, true);
            }
            else {
                this.context.contextService.initAsync().then(function () {
                    _this.initRenderingService(renderer, firstContentfullPaint);
                });
            }
        };
        Canvas.prototype.initRenderingService = function (renderer, firstContentfullPaint, async) {
            var _this = this;
            if (firstContentfullPaint === void 0) { firstContentfullPaint = false; }
            if (async === void 0) { async = false; }
            this.context.renderingService.init(function () {
                _this.inited = true;
                if (firstContentfullPaint) {
                    if (async) {
                        _this.requestAnimationFrame(function () {
                            _this.dispatchEvent(new CustomEvent(CanvasEvent.READY));
                        });
                    }
                    else {
                        _this.dispatchEvent(new CustomEvent(CanvasEvent.READY));
                    }
                    if (_this.readyPromise) {
                        _this.resolveReadyPromise();
                    }
                }
                else {
                    _this.dispatchEvent(new CustomEvent(CanvasEvent.RENDERER_CHANGED));
                }
                if (!firstContentfullPaint) {
                    _this.getRoot().forEach(function (node) {
                        var renderable = node.renderable;
                        if (renderable) {
                            renderable.renderBoundsDirty = true;
                            renderable.boundsDirty = true;
                            renderable.dirty = true;
                        }
                    });
                }
                // keep current scenegraph unchanged, just trigger mounted event
                _this.mountChildren(_this.getRoot());
                if (renderer.getConfig().enableAutoRendering) {
                    _this.run();
                }
            });
        };
        Canvas.prototype.loadRendererContainerModule = function (renderer) {
            var _this = this;
            // load other container modules provided by g-canvas/g-svg/g-webgl
            var plugins = renderer.getPlugins();
            plugins.forEach(function (plugin) {
                plugin.context = _this.context;
                plugin.init(runtime);
            });
        };
        Canvas.prototype.setRenderer = function (renderer) {
            // update canvas' config
            var canvasConfig = this.getConfig();
            if (canvasConfig.renderer === renderer) {
                return;
            }
            var oldRenderer = canvasConfig.renderer;
            canvasConfig.renderer = renderer;
            // keep all children undestroyed
            this.destroy(false, true);
            // destroy all plugins, reverse will mutate origin array
            __spreadArray([], __read(oldRenderer === null || oldRenderer === void 0 ? void 0 : oldRenderer.getPlugins()), false).reverse().forEach(function (plugin) {
                plugin.destroy(runtime);
            });
            this.initRenderer(renderer);
        };
        Canvas.prototype.setCursor = function (cursor) {
            var canvasConfig = this.getConfig();
            canvasConfig.cursor = cursor;
            this.getContextService().applyCursorStyle(cursor);
        };
        Canvas.prototype.unmountChildren = function (parent) {
            var _this = this;
            // unmountChildren recursively
            parent.childNodes.forEach(function (child) {
                _this.unmountChildren(child);
            });
            if (this.inited) {
                if (parent.isMutationObserved) {
                    parent.dispatchEvent(unmountedEvent);
                }
                else {
                    unmountedEvent.target = parent;
                    this.dispatchEvent(unmountedEvent, true);
                }
                // skip document.documentElement
                if (parent !== this.document.documentElement) {
                    parent.ownerDocument = null;
                }
                parent.isConnected = false;
            }
            // trigger after unmounted
            if (parent.isCustomElement) {
                if (parent.disconnectedCallback) {
                    parent.disconnectedCallback();
                }
            }
        };
        Canvas.prototype.mountChildren = function (parent) {
            var _this = this;
            if (this.inited) {
                if (!parent.isConnected) {
                    parent.ownerDocument = this.document;
                    parent.isConnected = true;
                    if (parent.isMutationObserved) {
                        parent.dispatchEvent(mountedEvent);
                    }
                    else {
                        mountedEvent.target = parent;
                        this.dispatchEvent(mountedEvent, true);
                    }
                }
            }
            else {
                console.warn("[g]: You are trying to call `canvas.appendChild` before canvas' initialization finished. You can either await `canvas.ready` or listen to `CanvasEvent.READY` manually.", 'appended child: ', parent.nodeName);
            }
            // recursively mount children
            parent.childNodes.forEach(function (child) {
                _this.mountChildren(child);
            });
            // trigger after mounted
            if (parent.isCustomElement) {
                if (parent.connectedCallback) {
                    parent.connectedCallback();
                }
            }
        };
        Canvas.prototype.client2Viewport = function (client) {
            return this.getEventService().client2Viewport(client);
        };
        Canvas.prototype.viewport2Client = function (canvas) {
            return this.getEventService().viewport2Client(canvas);
        };
        Canvas.prototype.viewport2Canvas = function (viewport) {
            return this.getEventService().viewport2Canvas(viewport);
        };
        Canvas.prototype.canvas2Viewport = function (canvas) {
            return this.getEventService().canvas2Viewport(canvas);
        };
        /**
         * @deprecated
         * @alias client2Viewport
         */
        Canvas.prototype.getPointByClient = function (clientX, clientY) {
            return this.client2Viewport({ x: clientX, y: clientY });
        };
        /**
         * @deprecated
         * @alias viewport2Client
         */
        Canvas.prototype.getClientByPoint = function (x, y) {
            return this.viewport2Client({ x: x, y: y });
        };
        return Canvas;
    }(EventTarget));

    var polarToCartesian = function polarToCartesian(centerX, centerY, radius, angleInRadian) {
      return {
        x: centerX + radius * Math.cos(angleInRadian),
        y: centerY + radius * Math.sin(angleInRadian)
      };
    };

    function computeArcSweep(startAngle, endAngle, anticlockwise) {
      // 顺时针方向
      if (!anticlockwise) {
        if (endAngle >= startAngle) {
          return endAngle - startAngle <= Math.PI ? 0 : 1;
        }
        return endAngle - startAngle <= -Math.PI ? 0 : 1;
      }
      // 逆时针方向
      if (endAngle >= startAngle) {
        return endAngle - startAngle <= Math.PI ? 1 : 0;
      }
      return endAngle - startAngle <= -Math.PI ? 1 : 0;
    }
    var Arc = /** @class */function (_super) {
      __extends(Arc, _super);
      function Arc(config) {
        var _this = _super.call(this, config) || this;
        _this.updatePath();
        return _this;
      }
      Arc.prototype.setAttribute = function (name, value, force) {
        _super.prototype.setAttribute.call(this, name, value, force);
        if (['cx', 'cy', 'startAngle', 'endAngle', 'r', 'anticlockwise'].indexOf(name) > -1) {
          this.updatePath();
        }
      };
      Arc.prototype.updatePath = function () {
        var _a = this.parsedStyle,
          _b = _a.cx,
          cx = _b === void 0 ? 0 : _b,
          _c = _a.cy,
          cy = _c === void 0 ? 0 : _c,
          startAngle = _a.startAngle,
          endAngle = _a.endAngle,
          r = _a.r,
          anticlockwise = _a.anticlockwise;
        if (isNil(startAngle) || isNil(endAngle) || startAngle === endAngle || isNil(r) || r <= 0) {
          _super.prototype.setAttribute.call(this, 'path', '');
          return;
        }
        var path = this.createPath(cx, cy, deg2rad(startAngle), deg2rad(endAngle), r, anticlockwise);
        _super.prototype.setAttribute.call(this, 'path', path);
      };
      Arc.prototype.createPath = function (x, y, startAngle, endAngle, r, anticlockwise) {
        var start = polarToCartesian(x, y, r, startAngle);
        var end = polarToCartesian(x, y, r, endAngle);
        var angle = Math.abs(endAngle - startAngle);
        if (angle >= Math.PI * 2 || isNumberEqual(angle, Math.PI * 2)) {
          var middlePoint = polarToCartesian(x, y, r, startAngle + Math.PI);
          return [['M', start.x, start.y], ['A', r, r, 0, 1, anticlockwise ? 0 : 1, middlePoint.x, middlePoint.y], ['A', r, r, 0, 1, anticlockwise ? 0 : 1, start.x, start.y], ['Z']];
        }
        var arcSweep = computeArcSweep(startAngle, endAngle, anticlockwise);
        return [['M', start.x, start.y], ['A', r, r, 0, arcSweep, anticlockwise ? 0 : 1, end.x, end.y]];
      };
      return Arc;
    }(Path);

    var SYMBOLS = {
      circle: function circle(x, y, r) {
        return [['M', x - r, y], ['A', r, r, 0, 1, 0, x + r, y], ['A', r, r, 0, 1, 0, x - r, y]];
      },
      square: function square(x, y, r) {
        return [['M', x - r, y - r], ['L', x + r, y - r], ['L', x + r, y + r], ['L', x - r, y + r], ['Z']];
      },
      arrow: function arrow(x, y, r) {
        return [['M', x - r, y + 2 * r / Math.sqrt(3)], ['L', x + r, y + 2 * r / Math.sqrt(3)], ['L', x, y - 2 * r / Math.sqrt(3)], ['Z']];
      }
    };
    var Marker = /** @class */function (_super) {
      __extends(Marker, _super);
      function Marker(config) {
        var _this = _super.call(this, config) || this;
        _this.updatePath();
        return _this;
      }
      Marker.prototype.setAttribute = function (name, value, force) {
        _super.prototype.setAttribute.call(this, name, value, force);
        if (['x', 'y', 'symbol', 'radius'].indexOf(name) > -1) {
          this.updatePath();
        }
      };
      Marker.prototype.updatePath = function () {
        var _a = this.parsedStyle,
          _b = _a.x,
          x = _b === void 0 ? 0 : _b,
          _c = _a.y,
          y = _c === void 0 ? 0 : _c;
        var _d = this.attributes,
          radius = _d.radius,
          symbol = _d.symbol;
        if (!symbol) return;
        var method = SYMBOLS[symbol];
        if (!method) return;
        var path = method(x, y, radius);
        _super.prototype.setAttribute.call(this, 'path', path);
      };
      return Marker;
    }(Path);

    var PI = Math.PI;
    var PI2 = PI * 2;
    var mathSin = Math.sin;
    var mathCos = Math.cos;
    var mathACos = Math.acos;
    var mathATan2 = Math.atan2;
    // const mathAbs = Math.abs;
    var mathSqrt = Math.sqrt;
    var mathMax = Math.max;
    var mathMin = Math.min;
    var e = 1e-4;
    function intersect(x0, y0, x1, y1, x2, y2, x3, y3) {
      var dx10 = x1 - x0;
      var dy10 = y1 - y0;
      var dx32 = x3 - x2;
      var dy32 = y3 - y2;
      var t = dy32 * dx10 - dx32 * dy10;
      if (t * t < e) {
        return;
      }
      t = (dx32 * (y0 - y2) - dy32 * (x0 - x2)) / t;
      return [x0 + t * dx10, y0 + t * dy10];
    }
    // Compute perpendicular offset line of length rc.
    function computeCornerTangents(x0, y0, x1, y1, radius, cr, clockwise) {
      var x01 = x0 - x1;
      var y01 = y0 - y1;
      var lo = (clockwise ? cr : -cr) / mathSqrt(x01 * x01 + y01 * y01);
      var ox = lo * y01;
      var oy = -lo * x01;
      var x11 = x0 + ox;
      var y11 = y0 + oy;
      var x10 = x1 + ox;
      var y10 = y1 + oy;
      var x00 = (x11 + x10) / 2;
      var y00 = (y11 + y10) / 2;
      var dx = x10 - x11;
      var dy = y10 - y11;
      var d2 = dx * dx + dy * dy;
      var r = radius - cr;
      var s = x11 * y10 - x10 * y11;
      var d = (dy < 0 ? -1 : 1) * mathSqrt(mathMax(0, r * r * d2 - s * s));
      var cx0 = (s * dy - dx * d) / d2;
      var cy0 = (-s * dx - dy * d) / d2;
      var cx1 = (s * dy + dx * d) / d2;
      var cy1 = (-s * dx + dy * d) / d2;
      var dx0 = cx0 - x00;
      var dy0 = cy0 - y00;
      var dx1 = cx1 - x00;
      var dy1 = cy1 - y00;
      // Pick the closer of the two intersection points
      // TODO: Is there a faster way to determine which intersection to use?
      if (dx0 * dx0 + dy0 * dy0 > dx1 * dx1 + dy1 * dy1) {
        cx0 = cx1;
        cy0 = cy1;
      }
      return {
        cx: cx0,
        cy: cy0,
        x0: -ox,
        y0: -oy,
        x1: cx0 * (radius / r - 1),
        y1: cy0 * (radius / r - 1)
      };
    }
    function computeArcSweep$1(startAngle, endAngle, clockwise) {
      if (clockwise === void 0) {
        clockwise = true;
      }
      if (!clockwise) {
        var replaceAngle = endAngle;
        endAngle = startAngle;
        startAngle = replaceAngle;
      }
      endAngle = endAngle - startAngle < 0 ? endAngle + PI2 : endAngle;
      return Math.abs(endAngle - startAngle) % PI2 <= PI ? 0 : 1;
    }
    var Sector = /** @class */function (_super) {
      __extends(Sector, _super);
      function Sector(config) {
        var _this = _super.call(this, config) || this;
        _this.updatePath();
        return _this;
      }
      Sector.prototype.setAttribute = function (name, value, force) {
        _super.prototype.setAttribute.call(this, name, value, force);
        if (['startAngle', 'endAngle', 'r', 'r0', 'radius', 'cx', 'cy'].indexOf(name) > -1) {
          this.updatePath();
        }
      };
      Sector.prototype.updatePath = function () {
        var _a = this.parsedStyle,
          cx = _a.cx,
          cy = _a.cy,
          startAngle = _a.startAngle,
          endAngle = _a.endAngle,
          r = _a.r,
          r0 = _a.r0,
          radius = _a.radius,
          _b = _a.anticlockwise,
          anticlockwise = _b === void 0 ? false : _b;
        if (isNil(startAngle) || isNil(endAngle) || startAngle === endAngle || isNil(r) || r <= 0) {
          _super.prototype.setAttribute.call(this, 'path', '');
          return;
        }
        var path = this.createPath(cx, cy, deg2rad(startAngle), deg2rad(endAngle), r, r0 ? r0 : 0, radius ? radius : [0, 0, 0, 0], anticlockwise);
        _super.prototype.setAttribute.call(this, 'path', path);
      };
      Sector.prototype.createPath = function (x, y, startAngle, endAngle, r, r0, borderRadius, anticlockwise) {
        var start = polarToCartesian(x, y, r, startAngle);
        var end = polarToCartesian(x, y, r, endAngle);
        var innerStart = polarToCartesian(x, y, r0, startAngle);
        var innerEnd = polarToCartesian(x, y, r0, endAngle);
        var clockwise = !anticlockwise;
        var angle = clockwise ? endAngle - startAngle : startAngle - endAngle;
        // 整圆
        if (Math.abs(angle) >= PI2 || isNumberEqual(Math.abs(angle), PI2)) {
          // 整个圆是分割成两个圆
          var middlePoint = polarToCartesian(x, y, r, startAngle + Math.PI);
          var innerMiddlePoint = polarToCartesian(x, y, r0, startAngle + Math.PI);
          var circlePathCommands = [['M', start.x, start.y], ['A', r, r, 0, 1, clockwise ? 1 : 0, middlePoint.x, middlePoint.y], ['A', r, r, 0, 1, clockwise ? 1 : 0, end.x, end.y]];
          if (r0 > 0) {
            circlePathCommands.push(['M', innerStart.x, innerStart.y]);
            circlePathCommands.push(['A', r0, r0, 0, 1, clockwise ? 0 : 1, innerMiddlePoint.x, innerMiddlePoint.y]);
            circlePathCommands.push(['A', r0, r0, 0, 1, clockwise ? 0 : 1, innerEnd.x, innerEnd.y]);
          }
          circlePathCommands.push(['M', start.x, start.y]);
          circlePathCommands.push(['Z']);
          return circlePathCommands;
        }
        var xrs = r * mathCos(startAngle);
        var yrs = r * mathSin(startAngle);
        var xire = r0 * mathCos(endAngle);
        var yire = r0 * mathSin(endAngle);
        var xre = r * mathCos(endAngle);
        var yre = r * mathSin(endAngle);
        var xirs = r0 * mathCos(startAngle);
        var yirs = r0 * mathSin(startAngle);
        // 顺时针反向，同 radius
        var outStartRadius = borderRadius[0],
          outEndRadius = borderRadius[1],
          innerEndRadius = borderRadius[2],
          innerStartRadius = borderRadius[3];
        var halfRadius = (r - r0) / 2;
        var outStartBorderRadius = mathMin(halfRadius, outStartRadius);
        var outEndBorderRadius = mathMin(halfRadius, outEndRadius);
        var innerEndBorderRadius = mathMin(halfRadius, innerEndRadius);
        var innerStartBorderRadius = mathMin(halfRadius, innerStartRadius);
        var outBorderRadiusMax = mathMax(outStartBorderRadius, outEndBorderRadius);
        var innerBorderRadiusMax = mathMax(innerEndBorderRadius, innerStartBorderRadius);
        var limitedOutBorderRadiusMax = outBorderRadiusMax;
        var limitedInnerBorderRadiusMax = innerBorderRadiusMax;
        // draw corner radius
        if (outBorderRadiusMax > e || innerBorderRadiusMax > e) {
          // restrict the max value of corner radius
          if (angle < PI) {
            var it_1 = intersect(xrs, yrs, xirs, yirs, xre, yre, xire, yire);
            if (it_1) {
              var x0 = xrs - it_1[0];
              var y0 = yrs - it_1[1];
              var x1 = xre - it_1[0];
              var y1 = yre - it_1[1];
              var a = 1 / mathSin(mathACos((x0 * x1 + y0 * y1) / (mathSqrt(x0 * x0 + y0 * y0) * mathSqrt(x1 * x1 + y1 * y1))) / 2);
              var b = mathSqrt(it_1[0] * it_1[0] + it_1[1] * it_1[1]);
              limitedOutBorderRadiusMax = mathMin(outBorderRadiusMax, (r - b) / (a + 1));
              limitedInnerBorderRadiusMax = mathMin(innerBorderRadiusMax, (r0 - b) / (a - 1));
            }
          }
        }
        var arcSweep = computeArcSweep$1(startAngle, endAngle, clockwise);
        var sectorPathCommands = [];
        if (limitedOutBorderRadiusMax > e) {
          var crStart = mathMin(outStartRadius, limitedOutBorderRadiusMax);
          var crEnd = mathMin(outEndRadius, limitedOutBorderRadiusMax);
          var ct0 = computeCornerTangents(xirs, yirs, xrs, yrs, r, crStart, clockwise);
          var ct1 = computeCornerTangents(xre, yre, xire, yire, r, crEnd, clockwise);
          sectorPathCommands.push(['M', x + ct0.cx + ct0.x0, y + ct0.cy + ct0.y0]);
          // Have the corners merged?
          if (limitedOutBorderRadiusMax < outBorderRadiusMax && crStart === crEnd) {
            var outStartBorderRadiusStartAngle = mathATan2(ct0.cy + ct0.y0, ct0.cx + ct0.x0);
            var outStartBorderRadiusEndAngle = mathATan2(ct1.cy + ct1.y0, ct1.cx + ct1.x0);
            sectorPathCommands.push(['A', limitedOutBorderRadiusMax, limitedOutBorderRadiusMax, 0, computeArcSweep$1(outStartBorderRadiusStartAngle, outStartBorderRadiusEndAngle, !clockwise), clockwise ? 1 : 0, x + ct1.cx + ct1.x0, y + ct1.cy + ct1.y0]);
          } else {
            // draw the two corners and the ring
            if (crStart > 0) {
              var outStartBorderRadiusStartAngle = mathATan2(ct0.y0, ct0.x0);
              var outStartBorderRadiusEndAngle = mathATan2(ct0.y1, ct0.x1);
              var outStartBorderRadiusEndPoint = polarToCartesian(x, y, r, outStartBorderRadiusEndAngle);
              sectorPathCommands.push(['A', crStart, crStart, 0, computeArcSweep$1(outStartBorderRadiusStartAngle, outStartBorderRadiusEndAngle, clockwise), clockwise ? 1 : 0, outStartBorderRadiusEndPoint.x, outStartBorderRadiusEndPoint.y]);
            }
            var outRadiusStartAngle = mathATan2(ct0.cy + ct0.y1, ct0.cx + ct0.x1);
            var outRadiusEndAngle = mathATan2(ct1.cy + ct1.y1, ct1.cx + ct1.x1);
            var outRadiusEndPoint = polarToCartesian(x, y, r, outRadiusEndAngle);
            sectorPathCommands.push(['A', r, r, 1, computeArcSweep$1(outRadiusStartAngle, outRadiusEndAngle, clockwise), clockwise ? 1 : 0, outRadiusEndPoint.x, outRadiusEndPoint.y]);
            if (crEnd > 0) {
              var outEndBorderRadiusStartAngle = mathATan2(ct1.y1, ct1.x1);
              var outEndBorderRadiusEndAngle = mathATan2(ct1.y0, ct1.x0);
              sectorPathCommands.push(['A', crEnd, crEnd, 0, computeArcSweep$1(outEndBorderRadiusStartAngle, outEndBorderRadiusEndAngle, clockwise), clockwise ? 1 : 0, x + ct1.cx + ct1.x0, y + ct1.cy + ct1.y0]);
            }
          }
        } else {
          sectorPathCommands.push(['M', start.x, start.y]);
          sectorPathCommands.push(['A', r, r, 0, arcSweep, clockwise ? 1 : 0, end.x, end.y]);
        }
        // no inner ring, is a circular sector
        if (r0 < e) {
          sectorPathCommands.push(['L', innerEnd.x, innerEnd.y]);
        } else if (limitedInnerBorderRadiusMax > e) {
          var crStart = mathMin(innerStartRadius, limitedInnerBorderRadiusMax);
          var crEnd = mathMin(innerEndRadius, limitedInnerBorderRadiusMax);
          var ct0 = computeCornerTangents(0, 0, xire, yire, r0, -crEnd, clockwise);
          var ct1 = computeCornerTangents(xirs, yirs, 0, 0, r0, -crStart, clockwise);
          sectorPathCommands.push(['L', x + ct0.cx + ct0.x0, y + ct0.cy + ct0.y0]);
          // Have the corners merged?
          if (limitedInnerBorderRadiusMax < innerBorderRadiusMax && crStart === crEnd) {
            var innerStartBorderRadiusStartAngle = mathATan2(ct0.y0, ct0.x0);
            var innerStartBorderRadiusEndAngle = mathATan2(ct1.y0, ct1.x0);
            sectorPathCommands.push(['A', limitedInnerBorderRadiusMax, limitedInnerBorderRadiusMax, 0, computeArcSweep$1(innerStartBorderRadiusStartAngle, innerStartBorderRadiusEndAngle), 1, x + ct1.cx + ct1.x0, y + ct1.cy + ct1.y0]);
          } else {
            // draw the two corners and the ring
            if (crEnd > 0) {
              var innerStartBorderRadiusStartAngle = mathATan2(ct0.y0, ct0.x0);
              var innerStartBorderRadiusEndAngle = mathATan2(ct0.y1, ct0.x1);
              sectorPathCommands.push(['A', crEnd, crEnd, 0, computeArcSweep$1(innerStartBorderRadiusStartAngle, innerStartBorderRadiusEndAngle, clockwise), clockwise ? 1 : 0, x + ct0.cx + ct0.x1, y + ct0.cy + ct0.y1]);
            }
            var innerRadiusStartAngle = mathATan2(ct0.cy + ct0.y1, ct0.cx + ct0.x1);
            var innerRadiusEndAngle = mathATan2(ct1.cy + ct1.y1, ct1.cx + ct1.x1);
            var innerRadiusEndPoint = polarToCartesian(x, y, r0, innerRadiusEndAngle);
            sectorPathCommands.push(['A', r0, r0, 0, computeArcSweep$1(innerRadiusEndAngle, innerRadiusStartAngle, clockwise), clockwise ? 0 : 1, innerRadiusEndPoint.x, innerRadiusEndPoint.y]);
            if (crStart > 0) {
              var innerEndBorderRadiusStartAngle = mathATan2(ct1.y1, ct1.x1);
              var innerEndBorderRadiusEndAngle = mathATan2(ct1.y0, ct1.x0);
              sectorPathCommands.push(['A', crStart, crStart, 0, computeArcSweep$1(innerEndBorderRadiusStartAngle, innerEndBorderRadiusEndAngle, clockwise), clockwise ? 1 : 0, x + ct1.cx + ct1.x0, y + ct1.cy + ct1.y0]);
            }
          }
        }
        // the inner ring is just a circular arc
        else {
          sectorPathCommands.push(['L', innerEnd.x, innerEnd.y]);
          sectorPathCommands.push(['A', r0, r0, 0, arcSweep, clockwise ? 0 : 1, innerStart.x, innerStart.y]);
        }
        sectorPathCommands.push(['Z']);
        return sectorPathCommands;
      };
      return Sector;
    }(Path);

    /**
     * @fileOverview convert the line to curve
     * @author dxq613@gmail.com
     */
    function getPoint(v) {
      return [v.x, v.y];
    }
    function smoothBezier(points, smooth, isLoop, constraint) {
      var cps = [];
      var prevPoint;
      var nextPoint;
      var hasConstraint = !!constraint;
      var min;
      var max;
      var point;
      var len;
      var l;
      var i;
      if (hasConstraint) {
        min = [Infinity, Infinity];
        max = [-Infinity, -Infinity];
        for (i = 0, l = points.length; i < l; i++) {
          point = getPoint(points[i]);
          min$1(min, min, point);
          max$1(max, max, point);
        }
        min$1(min, min, constraint[0]);
        max$1(max, max, constraint[1]);
      }
      for (i = 0, len = points.length; i < len; i++) {
        point = getPoint(points[i]);
        if (isLoop) {
          prevPoint = getPoint(points[i ? i - 1 : len - 1]);
          nextPoint = getPoint(points[(i + 1) % len]);
        } else {
          if (i === 0 || i === len - 1) {
            cps.push([point[0], point[1]]);
            continue;
          } else {
            prevPoint = getPoint(points[i - 1]);
            nextPoint = getPoint(points[i + 1]);
          }
        }
        var v = sub$1([], nextPoint, prevPoint);
        scale$2(v, v, smooth);
        var d0 = distance(point, prevPoint);
        var d1 = distance(point, nextPoint);
        var sum = d0 + d1;
        if (sum !== 0) {
          d0 /= sum;
          d1 /= sum;
        }
        var v1 = scale$2([], v, -d0);
        var v2 = scale$2([], v, d1);
        var cp0 = add$2([], point, v1);
        var cp1 = add$2([], point, v2);
        if (hasConstraint) {
          max$1(cp0, cp0, min);
          min$1(cp0, cp0, max);
          max$1(cp1, cp1, min);
          min$1(cp1, cp1, max);
        }
        cps.push([cp0[0], cp0[1]]);
        cps.push([cp1[0], cp1[1]]);
      }
      if (isLoop) {
        cps.push(cps.shift());
      }
      return cps;
    }
    function catmullRom2bezier(pointList, z, constraint) {
      var isLoop = !!z;
      var controlPointList = smoothBezier(pointList, 0.4, isLoop, constraint);
      var len = pointList.length;
      var d1 = [];
      var cp1;
      var cp2;
      var p;
      for (var i = 0; i < len - 1; i++) {
        cp1 = controlPointList[i * 2];
        cp2 = controlPointList[i * 2 + 1];
        p = pointList[i + 1];
        d1.push(['C', cp1[0], cp1[1], cp2[0], cp2[1], p.x, p.y]);
      }
      if (isLoop) {
        cp1 = controlPointList[len];
        cp2 = controlPointList[len + 1];
        p = pointList[0];
        d1.push(['C', cp1[0], cp1[1], cp2[0], cp2[1], p.x, p.y]);
      }
      return d1;
    }

    var smooth = /*#__PURE__*/Object.freeze({
        __proto__: null,
        smooth: catmullRom2bezier
    });

    var SmoothPolyline = /** @class */function (_super) {
      __extends(SmoothPolyline, _super);
      function SmoothPolyline(config) {
        var _this = _super.call(this, config) || this;
        _this.updatePath();
        return _this;
      }
      SmoothPolyline.prototype.setAttribute = function (name, value, force) {
        _super.prototype.setAttribute.call(this, name, value, force);
        if (['smooth', 'points', 'step'].indexOf(name) > -1) {
          this.updatePath();
        }
      };
      SmoothPolyline.prototype.updatePath = function () {
        var _a = this.parsedStyle,
          smooth$1 = _a.smooth,
          points = _a.points,
          step = _a.step;
        var pos = points.points;
        var d = [['M', pos[0][0], pos[0][1]]];
        if (smooth$1) {
          var constaint = [[0, 0], [1, 1]];
          var sps = catmullRom2bezier(pos.map(function (d) {
            return {
              x: d[0],
              y: d[1]
            };
          }), false, constaint);
          for (var i = 0, n = sps.length; i < n; i++) {
            var sp = sps[i];
            d.push(['C', sp[1], sp[2], sp[3], sp[4], sp[5], sp[6]]);
          }
        } else if (step) {
          var i = void 0;
          var l = void 0;
          switch (step) {
            case "start":
              for (i = 1, l = pos.length; i < l; i++) {
                var x = pos[i - 1][0];
                d.push(['L', x, pos[i - 1][1]]);
                d.push(['L', x, pos[i][1]]);
                d.push(['L', pos[i][0], pos[i][1]]);
              }
              break;
            case "middle":
              for (i = 1, l = pos.length; i < l; i++) {
                var x = (pos[i][0] + pos[i - 1][0]) / 2;
                d.push(['L', x, pos[i - 1][1]]);
                d.push(['L', x, pos[i][1]]);
                d.push(['L', pos[i][0], pos[i][1]]);
              }
              break;
            case "end":
              for (i = 1, l = pos.length; i < l; i++) {
                var x = pos[i][0];
                d.push(['L', x, pos[i - 1][1]]);
                d.push(['L', x, pos[i][1]]);
                d.push(['L', pos[i][0], pos[i][1]]);
              }
              break;
          }
        } else {
          var i = void 0;
          var l = void 0;
          for (i = 1, l = pos.length - 1; i < l; i++) {
            d.push(['L', pos[i][0], pos[i][1]]);
          }
          d.push(['L', pos[l][0], pos[l][1]]);
        }
        _super.prototype.setAttribute.call(this, 'path', d);
      };
      SmoothPolyline.tag = 'smooth-polyline';
      return SmoothPolyline;
    }(Path);

    var Gesture = /** @class */function () {
      function Gesture(element) {
        this.el = element;
      }
      Gesture.prototype.on = function (eventName, listener) {
        if (!eventName) return;
        var el = this.el;
        el.addEventListener(eventName, listener);
      };
      Gesture.prototype.off = function (eventName, listener) {
        if (!eventName) return;
        var el = this.el;
        el.removeEventListener(eventName, listener);
      };
      return Gesture;
    }();

    var SHAPE_TAG = {};
    /**
     * 注册新的标签
     */
    var registerTag = function registerTag(name, ShapeConstructor) {
      SHAPE_TAG[name] = ShapeConstructor;
    };
    var getTag = function getTag(type) {
      return SHAPE_TAG[type];
    };

    var EVENT_LIST = [['click', 'onClick'], ['touchstart', 'onTouchStart'], ['touchmove', 'onTouchMove'], ['touchend', 'onTouchEnd'], ['touchendoutside', 'onTouchEndOutside'],
    // drage 相关
    ['dragenter', 'onDragEnter'], ['dragleave', 'onDragLeave'], ['dragover', 'onDragOver'], ['drop', 'onDrop'], ['dragstart', 'onDragStart'], ['drag', 'onDrag'], ['dragend', 'onDragEnd'],
    // pan
    ['panstart', 'onPanStart'], ['pan', 'onPan'], ['panend', 'onPanEnd'],
    // press
    ['pressstart', 'onPressStart'], ['press', 'onPress'], ['pressend', 'onPressEnd'],
    // swipe
    ['swipe', 'onSwipe'],
    // pinch
    ['pinchstart', 'onPinchStart'], ['pinch', 'onPinch'], ['pinchend', 'onPinchEnd']];
    // 默认标签
    var TagElements = [['group', Rect], ['text', Text], ['circle', Circle], ['path', Path], ['ellipse', Ellipse], ['rect', Rect], ['image', Image], ['line', Line], ['polyline', SmoothPolyline], ['polygon', Polygon], ['arc', Arc], ['marker', Marker], ['sector', Sector]];
    TagElements.map(function (_a) {
      var type = _a[0],
        ShapeClass = _a[1];
      registerTag(type, ShapeClass);
    });
    // 注册 css 属性，不能注册已有属性，比如 r width等
    var SECTOR_CSS_PROPERTY = [{
      name: 'r0',
      inherits: false,
      interpolable: true,
      syntax: PropertySyntax.LENGTH_PERCENTAGE
    }, {
      name: 'startAngle',
      inherits: false,
      interpolable: true,
      syntax: PropertySyntax.ANGLE
    }, {
      name: 'endAngle',
      inherits: false,
      interpolable: true,
      syntax: PropertySyntax.ANGLE
    }];
    SECTOR_CSS_PROPERTY.forEach(function (property) {
      CSS.registerProperty(property);
    });
    function createShape(type, props) {
      if (!type) return null;
      var ShapeClass = getTag(type);
      if (!ShapeClass) return null;
      // const result = checkCSSRule(type, originStyle);
      var shape = new ShapeClass(props);
      // @ts-ignore
      shape.gesture = addEvent(shape, props);
      return shape;
    }
    function updateShape(shape, props, lastProps) {
      // @ts-ignore
      var gesture = shape.gesture;
      // 如果 shape 上存在 gesture，说明是 jsx 标签创建的元素，才需要更新事件
      if (gesture) {
        // 先清除上次 props 绑定的事件
        EVENT_LIST.forEach(function (_a) {
          var eventName = _a[0],
            handlerName = _a[1];
          if (!lastProps[handlerName]) return;
          gesture.off(eventName, lastProps[handlerName]);
        });
        // 绑定最新的事件
        EVENT_LIST.forEach(function (_a) {
          var eventName = _a[0],
            handlerName = _a[1];
          if (!props[handlerName]) return;
          gesture.on(eventName, props[handlerName]);
        });
      }
      return shape;
    }
    function addEvent(shape, props) {
      var gesture = new Gesture(shape);
      EVENT_LIST.forEach(function (_a) {
        var eventName = _a[0],
          handlerName = _a[1];
        if (!props[handlerName]) return;
        gesture.on(eventName, props[handlerName]);
      });
      return gesture;
    }

    function _typeof(o) {
      "@babel/helpers - typeof";

      return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
        return typeof o;
      } : function (o) {
        return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
      }, _typeof(o);
    }

    function objToString(obj) {
      return Object.prototype.toString.call(obj);
    }
    function objectKeys(obj) {
      return Object.keys(obj);
    }
    function equal(a, b) {
      if (a === b) return true;
      if (_typeof(a) !== _typeof(b)) {
        return false;
      }
      // null 和 undefined
      if (a == null || b == null) {
        return false;
      }
      // 特殊处理NaN
      if (Number.isNaN(a) && Number.isNaN(b)) {
        return true;
      }
      if (objToString(a) !== objToString(b)) {
        return false;
      }
      // 函数不相等，也认为不同
      if (isFunction(a)) {
        return false;
      }
      // 值类型，Number String Boolean
      if (_typeof(a) !== 'object') {
        return false;
      }
      if (isArray(a)) {
        if (a.length !== b.length) {
          return false;
        }
        for (var i = a.length - 1; i >= 0; i--) {
          if (!equal(a[i], b[i])) {
            return false;
          }
        }
        return true;
      }
      if (!isPlainObject(a)) {
        return false;
      }
      var ka = objectKeys(a);
      var kb = objectKeys(b);
      // having the same number of owned properties (keys incorporates hasOwnProperty)
      if (ka.length !== kb.length) {
        return false;
      }
      // the same set of keys (although not necessarily the same order),
      ka.sort();
      kb.sort();
      // ~~~cheap key test
      for (var i = ka.length - 1; i >= 0; i--) {
        if (ka[i] != kb[i]) {
          return false;
        }
      }
      // equivalent values for every corresponding key, and ~~~possibly expensive deep test
      for (var i = ka.length - 1; i >= 0; i--) {
        var key = ka[i];
        if (!equal(a[key], b[key])) {
          return false;
        }
      }
      return true;
    }

    var FunctionComponent = 0;
    var ClassComponent = 1;
    var Shape$1 = 2;
    function getWorkTag(type) {
      if (isString(type)) {
        return Shape$1;
      }
      if (type.prototype && type.prototype.isF2Component) {
        return ClassComponent;
      }
      return FunctionComponent;
    }

    // 查找 transform 最近的 shape 元素
    function findClosestShapeNode(vNode) {
      var tag = vNode.tag,
        children = vNode.children;
      if (tag === Shape$1) {
        return vNode;
      }
      var shapeNode;
      Children.map(children, function (child) {
        if (shapeNode) return;
        shapeNode = findClosestShapeNode(child);
      });
      return shapeNode;
    }

    var eventemitter3$1 = createCommonjsModule(function (module) {

    var has = Object.prototype.hasOwnProperty
      , prefix = '~';

    /**
     * Constructor to create a storage for our `EE` objects.
     * An `Events` instance is a plain object whose properties are event names.
     *
     * @constructor
     * @private
     */
    function Events() {}

    //
    // We try to not inherit from `Object.prototype`. In some engines creating an
    // instance in this way is faster than calling `Object.create(null)` directly.
    // If `Object.create(null)` is not supported we prefix the event names with a
    // character to make sure that the built-in object properties are not
    // overridden or used as an attack vector.
    //
    if (Object.create) {
      Events.prototype = Object.create(null);

      //
      // This hack is needed because the `__proto__` property is still inherited in
      // some old browsers like Android 4, iPhone 5.1, Opera 11 and Safari 5.
      //
      if (!new Events().__proto__) prefix = false;
    }

    /**
     * Representation of a single event listener.
     *
     * @param {Function} fn The listener function.
     * @param {*} context The context to invoke the listener with.
     * @param {Boolean} [once=false] Specify if the listener is a one-time listener.
     * @constructor
     * @private
     */
    function EE(fn, context, once) {
      this.fn = fn;
      this.context = context;
      this.once = once || false;
    }

    /**
     * Add a listener for a given event.
     *
     * @param {EventEmitter} emitter Reference to the `EventEmitter` instance.
     * @param {(String|Symbol)} event The event name.
     * @param {Function} fn The listener function.
     * @param {*} context The context to invoke the listener with.
     * @param {Boolean} once Specify if the listener is a one-time listener.
     * @returns {EventEmitter}
     * @private
     */
    function addListener(emitter, event, fn, context, once) {
      if (typeof fn !== 'function') {
        throw new TypeError('The listener must be a function');
      }

      var listener = new EE(fn, context || emitter, once)
        , evt = prefix ? prefix + event : event;

      if (!emitter._events[evt]) emitter._events[evt] = listener, emitter._eventsCount++;
      else if (!emitter._events[evt].fn) emitter._events[evt].push(listener);
      else emitter._events[evt] = [emitter._events[evt], listener];

      return emitter;
    }

    /**
     * Clear event by name.
     *
     * @param {EventEmitter} emitter Reference to the `EventEmitter` instance.
     * @param {(String|Symbol)} evt The Event name.
     * @private
     */
    function clearEvent(emitter, evt) {
      if (--emitter._eventsCount === 0) emitter._events = new Events();
      else delete emitter._events[evt];
    }

    /**
     * Minimal `EventEmitter` interface that is molded against the Node.js
     * `EventEmitter` interface.
     *
     * @constructor
     * @public
     */
    function EventEmitter() {
      this._events = new Events();
      this._eventsCount = 0;
    }

    /**
     * Return an array listing the events for which the emitter has registered
     * listeners.
     *
     * @returns {Array}
     * @public
     */
    EventEmitter.prototype.eventNames = function eventNames() {
      var names = []
        , events
        , name;

      if (this._eventsCount === 0) return names;

      for (name in (events = this._events)) {
        if (has.call(events, name)) names.push(prefix ? name.slice(1) : name);
      }

      if (Object.getOwnPropertySymbols) {
        return names.concat(Object.getOwnPropertySymbols(events));
      }

      return names;
    };

    /**
     * Return the listeners registered for a given event.
     *
     * @param {(String|Symbol)} event The event name.
     * @returns {Array} The registered listeners.
     * @public
     */
    EventEmitter.prototype.listeners = function listeners(event) {
      var evt = prefix ? prefix + event : event
        , handlers = this._events[evt];

      if (!handlers) return [];
      if (handlers.fn) return [handlers.fn];

      for (var i = 0, l = handlers.length, ee = new Array(l); i < l; i++) {
        ee[i] = handlers[i].fn;
      }

      return ee;
    };

    /**
     * Return the number of listeners listening to a given event.
     *
     * @param {(String|Symbol)} event The event name.
     * @returns {Number} The number of listeners.
     * @public
     */
    EventEmitter.prototype.listenerCount = function listenerCount(event) {
      var evt = prefix ? prefix + event : event
        , listeners = this._events[evt];

      if (!listeners) return 0;
      if (listeners.fn) return 1;
      return listeners.length;
    };

    /**
     * Calls each of the listeners registered for a given event.
     *
     * @param {(String|Symbol)} event The event name.
     * @returns {Boolean} `true` if the event had listeners, else `false`.
     * @public
     */
    EventEmitter.prototype.emit = function emit(event, a1, a2, a3, a4, a5) {
      var evt = prefix ? prefix + event : event;

      if (!this._events[evt]) return false;

      var listeners = this._events[evt]
        , len = arguments.length
        , args
        , i;

      if (listeners.fn) {
        if (listeners.once) this.removeListener(event, listeners.fn, undefined, true);

        switch (len) {
          case 1: return listeners.fn.call(listeners.context), true;
          case 2: return listeners.fn.call(listeners.context, a1), true;
          case 3: return listeners.fn.call(listeners.context, a1, a2), true;
          case 4: return listeners.fn.call(listeners.context, a1, a2, a3), true;
          case 5: return listeners.fn.call(listeners.context, a1, a2, a3, a4), true;
          case 6: return listeners.fn.call(listeners.context, a1, a2, a3, a4, a5), true;
        }

        for (i = 1, args = new Array(len -1); i < len; i++) {
          args[i - 1] = arguments[i];
        }

        listeners.fn.apply(listeners.context, args);
      } else {
        var length = listeners.length
          , j;

        for (i = 0; i < length; i++) {
          if (listeners[i].once) this.removeListener(event, listeners[i].fn, undefined, true);

          switch (len) {
            case 1: listeners[i].fn.call(listeners[i].context); break;
            case 2: listeners[i].fn.call(listeners[i].context, a1); break;
            case 3: listeners[i].fn.call(listeners[i].context, a1, a2); break;
            case 4: listeners[i].fn.call(listeners[i].context, a1, a2, a3); break;
            default:
              if (!args) for (j = 1, args = new Array(len -1); j < len; j++) {
                args[j - 1] = arguments[j];
              }

              listeners[i].fn.apply(listeners[i].context, args);
          }
        }
      }

      return true;
    };

    /**
     * Add a listener for a given event.
     *
     * @param {(String|Symbol)} event The event name.
     * @param {Function} fn The listener function.
     * @param {*} [context=this] The context to invoke the listener with.
     * @returns {EventEmitter} `this`.
     * @public
     */
    EventEmitter.prototype.on = function on(event, fn, context) {
      return addListener(this, event, fn, context, false);
    };

    /**
     * Add a one-time listener for a given event.
     *
     * @param {(String|Symbol)} event The event name.
     * @param {Function} fn The listener function.
     * @param {*} [context=this] The context to invoke the listener with.
     * @returns {EventEmitter} `this`.
     * @public
     */
    EventEmitter.prototype.once = function once(event, fn, context) {
      return addListener(this, event, fn, context, true);
    };

    /**
     * Remove the listeners of a given event.
     *
     * @param {(String|Symbol)} event The event name.
     * @param {Function} fn Only remove the listeners that match this function.
     * @param {*} context Only remove the listeners that have this context.
     * @param {Boolean} once Only remove one-time listeners.
     * @returns {EventEmitter} `this`.
     * @public
     */
    EventEmitter.prototype.removeListener = function removeListener(event, fn, context, once) {
      var evt = prefix ? prefix + event : event;

      if (!this._events[evt]) return this;
      if (!fn) {
        clearEvent(this, evt);
        return this;
      }

      var listeners = this._events[evt];

      if (listeners.fn) {
        if (
          listeners.fn === fn &&
          (!once || listeners.once) &&
          (!context || listeners.context === context)
        ) {
          clearEvent(this, evt);
        }
      } else {
        for (var i = 0, events = [], length = listeners.length; i < length; i++) {
          if (
            listeners[i].fn !== fn ||
            (once && !listeners[i].once) ||
            (context && listeners[i].context !== context)
          ) {
            events.push(listeners[i]);
          }
        }

        //
        // Reset the array, or remove it completely if we have no more listeners.
        //
        if (events.length) this._events[evt] = events.length === 1 ? events[0] : events;
        else clearEvent(this, evt);
      }

      return this;
    };

    /**
     * Remove all listeners, or those of the specified event.
     *
     * @param {(String|Symbol)} [event] The event name.
     * @returns {EventEmitter} `this`.
     * @public
     */
    EventEmitter.prototype.removeAllListeners = function removeAllListeners(event) {
      var evt;

      if (event) {
        evt = prefix ? prefix + event : event;
        if (this._events[evt]) clearEvent(this, evt);
      } else {
        this._events = new Events();
        this._eventsCount = 0;
      }

      return this;
    };

    //
    // Alias methods names because people roll like that.
    //
    EventEmitter.prototype.off = EventEmitter.prototype.removeListener;
    EventEmitter.prototype.addListener = EventEmitter.prototype.on;

    //
    // Expose the prefix.
    //
    EventEmitter.prefixed = prefix;

    //
    // Allow `EventEmitter` to be imported as module namespace.
    //
    EventEmitter.EventEmitter = EventEmitter;

    //
    // Expose the module.
    //
    {
      module.exports = EventEmitter;
    }
    });

    function applyStyle(shape, style) {
      if (!style) return;
      Object.keys(style).forEach(function (key) {
        // 特殊处理 clip 和 offset
        if (key === 'clip' || key === 'offset') {
          var effect = style[key];
          // value 为 ref
          if (isDisplayObject(effect === null || effect === void 0 ? void 0 : effect.current)) {
            shape.setAttribute("".concat(key, "Path"), effect.current);
            return;
          }
          var effectConfig = isFunction(effect) ? effect(style) : effect;
          if (effectConfig) {
            var type = effectConfig.type,
              style_1 = effectConfig.style;
            var effectShape = createShape(type, {
              style: style_1
            });
            shape.setAttribute("".concat(key, "Path"), effectShape);
          }
        } else {
          shape.setAttribute(key, style[key]);
        }
      });
    }

    var Animator = /** @class */function (_super) {
      __extends(Animator, _super);
      function Animator() {
        return _super.call(this) || this;
      }
      Animator.prototype.animate = function (shape, start, end, effect) {
        this.shape = shape;
        this.start = start;
        this.end = end;
        this.effect = effect;
      };
      // 首次播放
      Animator.prototype.run = function () {
        var _a = this,
          vNode = _a.vNode,
          shape = _a.shape,
          start = _a.start,
          end = _a.end,
          effect = _a.effect,
          children = _a.children;
        var animations = [];
        if (effect) {
          var _b = effect.property,
            property = _b === void 0 ? [] : _b,
            easing = effect.easing,
            duration = effect.duration,
            delay = effect.delay,
            iterations = effect.iterations,
            clip = effect.clip,
            _c = effect.direction,
            direction = _c === void 0 ? 'normal' : _c,
            onFrame_1 = effect.onFrame,
            onEnd_1 = effect.onEnd;
          // shape 动画
          if ((property.length || onFrame_1) && duration > 0) {
            // 应用样式
            var style = __assign(__assign({}, omit(start, property)), omit(end, property));
            applyStyle(shape, style);
            // 开始帧
            var keyframeStart = property.reduce(function (prev, cur) {
              prev[cur] = start[cur];
              return prev;
            }, {});
            // 结束帧
            var keyframeEnd = pick(end, property);
            var animation = shape.animate([keyframeStart, keyframeEnd], {
              fill: 'both',
              easing: easing,
              duration: duration,
              delay: delay,
              iterations: iterations,
              direction: direction
            });
            if (animation) {
              var onframe_1 = onFrame_1 ? function (e) {
                var animationTarget = e.target;
                var effect = animationTarget.effect;
                var timing = effect.getTiming();
                var duration = timing.duration;
                var delay = timing.delay;
                var t = e.currentTime > delay ? (e.currentTime - delay) / duration : 0;
                var shape = effect.target;
                // 动画的一些上下文信息
                var context = {
                  t: t,
                  start: start,
                  end: end,
                  animation: animationTarget,
                  shape: shape
                };
                applyStyle(shape, onFrame_1(t, context));
              } : null;
              animation.onframe = onframe_1;
              animation.onfinish = onframe_1 || onEnd_1 ? function (e) {
                onframe_1 && onframe_1(e);
                onEnd_1 && onEnd_1(e);
              } : null;
              // 过滤无限循环的动画
              if (iterations !== Infinity) {
                animations.push(animation);
              }
            } else {
              // 如果没有执行动画，直接应用结束样式
              applyStyle(shape, end);
            }
          } else {
            // 直接应用结束样式
            applyStyle(shape, end);
          }
          // clip 动画
          if (clip) {
            var clipConfig = isFunction(clip) ? clip(end) : clip;
            if (clipConfig) {
              var clipType = clipConfig.type,
                _d = clipConfig.deleteAfterComplete,
                deleteAfterComplete = _d === void 0 ? true : _d,
                clipStyle = clipConfig.style,
                _e = clipConfig.property,
                clipProperty = _e === void 0 ? [] : _e,
                clipEasing = clipConfig.easing,
                clipDuration = clipConfig.duration,
                clipDelay = clipConfig.delay,
                clipIterations = clipConfig.iterations,
                clipStart = clipConfig.start,
                clipEnd = clipConfig.end,
                clipDirection = clipConfig.direction;
              if (clipProperty.length && (clipDuration || duration) > 0) {
                var clipStartStyle_1 = __assign(__assign({}, clipStyle), clipStart);
                var clipEndStyle = __assign(__assign({}, clipStyle), clipEnd);
                // 开始帧
                var clipKeyframeStart = clipProperty.reduce(function (prev, cur) {
                  prev[cur] = clipStartStyle_1[cur];
                  return prev;
                }, {});
                // 结束帧
                var clipKeyframeEnd = pick(clipEndStyle, clipProperty);
                var clipShape_1 = createShape(clipType, {
                  style: clipStartStyle_1
                });
                shape.setAttribute('clipPath', clipShape_1);
                // g 中 clip 为全局，且如果要在 clip上加动画，需要手动加到canvas上
                shape.ownerDocument.documentElement.appendChild(clipShape_1);
                var clipAnimation = clipShape_1.animate([clipKeyframeStart, clipKeyframeEnd], {
                  fill: 'both',
                  easing: clipEasing || easing,
                  duration: clipDuration || duration,
                  delay: clipDelay || delay,
                  iterations: clipIterations || iterations,
                  direction: clipDirection || direction
                });
                // 过滤无限循环的动画
                if (clipAnimation) {
                  var clipFinished = clipAnimation.finished;
                  deleteAfterComplete && clipFinished.then(function () {
                    // 删掉 clip
                    shape.setAttribute('clipPath', null);
                    clipShape_1.destroy();
                  });
                  if ((clipIterations || iterations) !== Infinity) {
                    animations.push(clipAnimation);
                  }
                } else {
                  // 没有动画，直接删掉 clip
                  shape.setAttribute('clipPath', null);
                  clipShape_1.destroy();
                }
              }
            }
          }
        }
        if (children && children.length) {
          children.forEach(function (child) {
            if (!child) return;
            var childAnimator = child.run();
            if (childAnimator) {
              animations.push.apply(animations, childAnimator);
            }
          });
        }
        this.animations = animations;
        // TODO：这段代码放这个位置感觉挺奇怪，看看是否有更合适的地方
        if (vNode) {
          var component = vNode.component;
          if (vNode && vNode.component) {
            // @ts-ignore
            component.animationWillPlay && component.animationWillPlay();
          }
        }
        this.endEmit(animations);
        return animations;
      };
      Animator.prototype.play = function () {
        var animations = this.animations;
        if (!animations || !animations.length) return;
        animations.forEach(function (d) {
          d.play();
        });
      };
      Animator.prototype.pause = function () {
        var animations = this.animations;
        if (!animations || !animations.length) return;
        animations.forEach(function (d) {
          d.pause();
        });
      };
      Animator.prototype.goTo = function (frame) {
        var animations = this.animations;
        if (!animations || !animations.length) return;
        animations.forEach(function (d) {
          d.currentTime = frame;
        });
      };
      Animator.prototype.finish = function () {
        var animations = this.animations;
        if (!animations || !animations.length) return;
        animations.forEach(function (d) {
          d.finish();
        });
      };
      Animator.prototype.setPlaybackRate = function (speed) {
        var animations = this.animations;
        if (!animations || !animations.length) return;
        animations.forEach(function (d) {
          d.playbackRate = speed;
        });
      };
      Animator.prototype.endEmit = function (animations) {
        var _this = this;
        if (!animations.length) {
          this.emit('end');
          return null;
        }
        var finished = Promise.all(animations.map(function (d) {
          return d.finished;
        }));
        finished.then(function () {
          _this.emit('end');
        });
      };
      Animator.prototype.reset = function (shape) {
        this.shape = shape;
        this.start = null;
        this.end = null;
        this.effect = null;
        this.children = null;
      };
      Animator.prototype.clone = function () {
        // 浅拷贝
        var animator = new Animator();
        animator.shape = this.shape;
        animator.start = this.start;
        animator.end = this.end;
        animator.effect = this.effect;
        animator.children = this.children;
        animator.vNode = this.vNode;
        return animator;
      };
      return Animator;
    }(eventemitter3$1);

    function findAllShapeNode(vNode) {
      var shapeNodes = [];
      Children.map(vNode, function (node) {
        if (!node) return;
        var tag = node.tag,
          type = node.type,
          children = node.children;
        if (tag === Shape$1 && type !== 'group') {
          shapeNodes.push(node);
        }
        if (children) {
          shapeNodes.push.apply(shapeNodes, findAllShapeNode(children));
        }
      });
      return shapeNodes;
    }
    function morphShape(lastNode, nextNode, animator) {
      var nextProps = nextNode.props,
        nextShape = nextNode.shape,
        nextStyle = nextNode.style;
      var lastShape = lastNode.shape,
        lastStyle = lastNode.style,
        lastAnimation = lastNode.animator;
      // 形变动画之前先把原 shape 销毁
      lastShape.destroy();
      var animate = nextProps.animate,
        animation = nextProps.animation;
      var animationEffect = animation ? animation.update : null;
      if (animate === false || !animationEffect) {
        return animator;
      }
      animator = animator || new Animator();
      // shape 形变
      var start = animationEffect.start,
        end = animationEffect.end,
        _a = animationEffect.property,
        property = _a === void 0 ? [] : _a;
      var nextParsedStyle = nextShape.parsedStyle;
      var lastParsedStyle = lastShape.parsedStyle;
      var lastPath = convertToPath(lastShape);
      var nextPath = convertToPath(nextShape);
      var startStyle = __assign(__assign(__assign({}, lastStyle), start), {
        path: lastPath
      });
      var endStyle = __assign(__assign(__assign({}, nextStyle), end), {
        path: nextPath
      });
      var pathShape = createShape('path', {
        style: __assign(__assign({}, startStyle), {
          path: ''
        })
      });
      // 形变双方都有的属性才能动画
      var animateProperty = property.filter(function (key) {
        return nextParsedStyle.hasOwnProperty(key) && lastParsedStyle.hasOwnProperty(key);
      }).concat('path');
      animator.animate(pathShape, startStyle, endStyle, __assign(__assign({}, animationEffect), {
        property: animateProperty
      }));
      var timeline = (nextNode === null || nextNode === void 0 ? void 0 : nextNode.context).timeline;
      timeline && timeline.delete(lastAnimation);
      animator.once('end', function () {
        if (nextShape.destroyed) {
          return;
        }
        applyStyle(nextShape, endStyle);
        pathShape.replaceWith(nextShape);
      });
      return animator;
    }
    function appearAnimation(vNode) {
      return Children.map(vNode, function (node) {
        if (!node) return;
        var tag = node.tag,
          shape = node.shape,
          style = node.style,
          children = node.children,
          animate = node.animate,
          props = node.props,
          animator = node.animator;
        animator.reset(shape);
        // 有叶子节点，先执行叶子节点
        animator.children = children ? createAnimation(node, children, null) : null;
        // 不需要执行动画
        if (animate === false || tag !== Shape$1) {
          applyStyle(shape, style);
          return animator;
        }
        var animation = props.animation;
        var animationEffect = animation ? animation.appear : null;
        if (!animationEffect) {
          // 没有动画直接应用样式
          applyStyle(shape, style);
          return animator;
        }
        var _a = animationEffect.start,
          start = _a === void 0 ? {} : _a,
          end = animationEffect.end;
        var endStyle = __assign(__assign({}, style), end);
        animator.animate(shape, start, endStyle, animationEffect);
        return animator;
      });
    }
    function updateAnimation(nextNode, lastNode) {
      var nextTag = nextNode.tag,
        nextType = nextNode.type,
        nextStyle = nextNode.style,
        nextChildren = nextNode.children,
        nextProps = nextNode.props,
        nextShape = nextNode.shape,
        animator = nextNode.animator,
        animate = nextNode.animate;
      var lastTag = lastNode.tag,
        lastType = lastNode.type,
        lastStyle = lastNode.style,
        lastChildren = lastNode.children,
        lastShape = lastNode.shape;
      animator.reset(nextShape);
      // 先处理叶子节点
      animator.children = createAnimation(nextNode, nextChildren, lastChildren);
      var animation = nextProps.animation;
      var animationEffect = animation ? animation.update : null;
      // 类型相同
      if (nextType === lastType) {
        // 清除之前的样式
        var resetStyle = lastStyle ? Object.keys(lastStyle).reduce(function (prev, cur) {
          prev[cur] = '';
          return prev;
        }, {}) : null;
        // 需要更新的样式
        var style = __assign(__assign({}, resetStyle), nextStyle);
        // 组件，直接更新
        if (nextTag !== Shape$1) {
          applyStyle(nextShape, style);
          return animator;
        }
        // 样式无改变，无更新
        if (isEqual(nextStyle, lastStyle)) {
          return animator;
        }
        // 没有动画直接应用样式
        if (animate === false || !animationEffect) {
          applyStyle(nextShape, style);
          return animator;
        }
        var start = animationEffect.start,
          end = animationEffect.end;
        var startStyle = __assign(__assign({}, lastStyle), start);
        var endStyle = __assign(__assign({}, style), end);
        animator.animate(nextShape, startStyle, endStyle, animationEffect);
        return animator;
      }
      // 无法处理形变
      if (nextTag !== Shape$1 || lastTag !== Shape$1) {
        lastShape.destroy();
        return animator;
      }
      // 从 shape 到 group
      if (nextType === 'group') {
        var shapeNodes = findAllShapeNode(nextNode.children);
        return shapeNodes.map(function (node) {
          return morphShape(lastNode, node);
        });
      }
      // 从 group 到 shape
      if (lastType === 'group') {
        var shapeNodes = findAllShapeNode(lastNode.children);
        return shapeNodes.map(function (node) {
          return morphShape(node, nextNode);
        });
      }
      // 没有动画直接应用样式
      if (animate === false || !animationEffect) {
        applyStyle(nextShape, nextStyle);
        return animator;
      }
      return morphShape(lastNode, nextNode, animator);
    }
    function destroyAnimation(node) {
      return Children.map(node, function (vNode) {
        if (!vNode) return null;
        var tag = vNode.tag,
          shape = vNode.shape,
          children = vNode.children,
          animate = vNode.animate,
          style = vNode.style,
          props = vNode.props,
          animator = vNode.animator,
          context = vNode.context;
        var timeline = context.timeline;
        if (shape.destroyed) {
          return null;
        }
        // 重置
        animator.reset(shape);
        // 先处理叶子节点
        var childrenAnimation = children ? Children.toArray(children).map(function (child) {
          return destroyAnimation(child);
        }).filter(Boolean) : null;
        // 不需要动画直接删除
        if (animate === false) {
          shape.destroy();
          return animator;
        }
        var animation = props.animation;
        var animationEffect = animation ? animation.leave : null;
        // 没有叶子节点的动画， 直接删除
        if (!(childrenAnimation && childrenAnimation.length) && !animationEffect) {
          shape.destroy();
          return animator;
        }
        animator.children = childrenAnimation;
        // 图形有动画
        if (animationEffect && tag === Shape$1) {
          var start = animationEffect.start,
            _a = animationEffect.end,
            end = _a === void 0 ? {} : _a;
          var startStyle = __assign(__assign({}, style), start);
          var endStyle = end;
          animator.animate(shape, startStyle, endStyle, animationEffect);
          timeline && timeline.delete(animator.animations);
        }
        // 动画结束后，删除图形（包括子元素动画）
        animator.once('end', function () {
          shape.destroy();
        });
        return animator;
      });
    }
    function createAnimator(nextNode, lastNode) {
      if (!nextNode && !lastNode) {
        return null;
      }
      // delete 动画
      if (!nextNode && lastNode) {
        return destroyAnimation(lastNode);
      }
      // 如果有 transform 则从 transform 比
      var transform = nextNode.transform;
      if (transform) {
        var closestShapeNode = findClosestShapeNode(nextNode);
        nextNode.transform = null;
        closestShapeNode.transform = transform;
      }
      if (nextNode.transform) {
        if (!lastNode) {
          return updateAnimation(nextNode, nextNode.transform);
        }
        return [updateAnimation(nextNode, nextNode.transform), destroyAnimation(lastNode)];
      }
      // appear 动画
      if (nextNode && !lastNode) {
        return appearAnimation(nextNode);
      }
      // update 动画
      return updateAnimation(nextNode, lastNode);
    }
    function insertShape(parent, shape, nextSibling) {
      if (nextSibling) {
        parent.insertBefore(shape, nextSibling);
      } else {
        parent.appendChild(shape);
      }
    }
    // 处理 children 的动画
    function createAnimation(parent, nextChildren, lastChildren) {
      if (!nextChildren && !lastChildren) {
        return [];
      }
      var parentShape = parent.shape;
      // 上一个处理的元素
      var prevSibling;
      var childrenAnimator = [];
      Children.compare(nextChildren, lastChildren, function (nextNode, lastNode) {
        // shape 层才执行动画
        var animator = createAnimator(nextNode, lastNode);
        Children.map(animator, function (item) {
          if (!item) return;
          childrenAnimator.push(item);
          var shape = item.shape;
          if (!shape || shape.destroyed) return;
          var nextSibling;
          // 更新文档流
          if (!prevSibling) {
            nextSibling = parentShape.firstChild;
          } else {
            nextSibling = prevSibling.nextSibling;
          }
          if (nextSibling !== shape) {
            insertShape(parentShape, shape, nextSibling);
          }
          prevSibling = shape;
        });
      });
      return childrenAnimator;
    }
    function calAnimationTime(childrenAnimation, keyFrame, parentEffect) {
      if (!childrenAnimation) return {
        animators: null,
        time: 0
      };
      var animators = [];
      var time = 0;
      Children.map(childrenAnimation, function (item) {
        if (!item) return;
        var animator = item.clone();
        var vNode = animator.vNode,
          children = animator.children;
        var _a = keyFrame[vNode === null || vNode === void 0 ? void 0 : vNode.key] || {},
          duration = _a.duration,
          delay = _a.delay;
        var globalEffect = mix(parentEffect || {}, {
          duration: duration,
          delay: delay
        });
        var effect = __assign(__assign({}, animator.effect), globalEffect);
        animator.effect = effect;
        // computed time
        var _b = effect.duration,
          gDuration = _b === void 0 ? 0 : _b,
          _c = effect.delay,
          gDelay = _c === void 0 ? 0 : _c;
        var animUnits = calAnimationTime(children, keyFrame, globalEffect);
        time = Math.max(time, gDuration + gDelay, animUnits.time);
        animator.children = animUnits.animators;
        animators.push(animator);
      });
      return {
        animators: animators,
        time: time
      };
    }

    var rect = (function (layout) {
      var left = layout.left,
        top = layout.top,
        width = layout.width,
        height = layout.height;
      return {
        x: left,
        y: top,
        width: width,
        height: height
      };
    });

    var line = (function (layout) {
      var left = layout.left,
        top = layout.top,
        width = layout.width,
        height = layout.height;
      return {
        x1: left,
        y1: top,
        x2: left + width,
        y2: top + height
      };
    });

    var text = (function (layout) {
      var height = layout.height,
        left = layout.left,
        top = layout.top;
      return {
        x: left,
        y: top + height / 2,
        // 通过middle + top 才能比较好的实现文本对齐
        textBaseline: 'middle'
      };
    });

    var circle = (function (layout) {
      var left = layout.left,
        top = layout.top,
        width = layout.width;
      var r = width / 2;
      return {
        cx: left + r,
        cy: top + r,
        r: r
      };
    });

    var marker = (function (layout) {
      var left = layout.left,
        top = layout.top,
        width = layout.width;
      var r = width / 2;
      return {
        x: left + r,
        y: top,
        radius: r
      };
    });

    var map$2 = {
      rect: rect,
      line: line,
      text: text,
      circle: circle,
      marker: marker,
      group: rect
    };
    var getShapeAttrs = (function (type, layout) {
      if (!layout) return null;
      var fn = map$2[type] || rect;
      return fn(layout);
    });

    /* eslint-disable */
    // @ts-nocheck
    // from css-layout
    var CSS_UNDEFINED;
    var CSS_DIRECTION_INHERIT = 'inherit';
    var CSS_DIRECTION_LTR = 'ltr';
    var CSS_DIRECTION_RTL = 'rtl';
    var CSS_FLEX_DIRECTION_ROW = 'row';
    var CSS_FLEX_DIRECTION_ROW_REVERSE = 'row-reverse';
    var CSS_FLEX_DIRECTION_COLUMN = 'column';
    var CSS_FLEX_DIRECTION_COLUMN_REVERSE = 'column-reverse';
    var CSS_JUSTIFY_FLEX_START = 'flex-start';
    var CSS_JUSTIFY_CENTER = 'center';
    var CSS_JUSTIFY_FLEX_END = 'flex-end';
    var CSS_JUSTIFY_SPACE_BETWEEN = 'space-between';
    var CSS_JUSTIFY_SPACE_AROUND = 'space-around';
    var CSS_ALIGN_FLEX_START = 'flex-start';
    var CSS_ALIGN_CENTER = 'center';
    var CSS_ALIGN_FLEX_END = 'flex-end';
    var CSS_ALIGN_STRETCH = 'stretch';
    var CSS_POSITION_RELATIVE = 'relative';
    var CSS_POSITION_ABSOLUTE = 'absolute';
    var leading = {
      row: 'left',
      'row-reverse': 'right',
      column: 'top',
      'column-reverse': 'bottom'
    };
    var trailing = {
      row: 'right',
      'row-reverse': 'left',
      column: 'bottom',
      'column-reverse': 'top'
    };
    var pos = {
      row: 'left',
      'row-reverse': 'right',
      column: 'top',
      'column-reverse': 'bottom'
    };
    var dim = {
      row: 'width',
      'row-reverse': 'width',
      column: 'height',
      'column-reverse': 'height'
    };
    // When transpiled to Java / C the node type has layout, children and style
    // properties. For the JavaScript version this function adds these properties
    // if they don't already exist.
    function fillNodes(node) {
      if (!node.layout || node.isDirty) {
        node.layout = {
          width: undefined,
          height: undefined,
          top: 0,
          left: 0,
          right: 0,
          bottom: 0
        };
      }
      if (!node.style) {
        node.style = {};
      }
      if (!node.children) {
        node.children = [];
      }
      node.children.forEach(fillNodes);
      return node;
    }
    function isUndefined$1(value) {
      return value === undefined;
    }
    function isRowDirection(flexDirection) {
      return flexDirection === CSS_FLEX_DIRECTION_ROW || flexDirection === CSS_FLEX_DIRECTION_ROW_REVERSE;
    }
    function isColumnDirection(flexDirection) {
      return flexDirection === CSS_FLEX_DIRECTION_COLUMN || flexDirection === CSS_FLEX_DIRECTION_COLUMN_REVERSE;
    }
    function getLeadingMargin(node, axis) {
      if (node.style.marginStart !== undefined && isRowDirection(axis)) {
        return node.style.marginStart;
      }
      var value = null;
      switch (axis) {
        case 'row':
          value = node.style.marginLeft;
          break;
        case 'row-reverse':
          value = node.style.marginRight;
          break;
        case 'column':
          value = node.style.marginTop;
          break;
        case 'column-reverse':
          value = node.style.marginBottom;
          break;
      }
      if (value !== undefined) {
        return value;
      }
      if (node.style.margin !== undefined) {
        return node.style.margin;
      }
      return 0;
    }
    function getTrailingMargin(node, axis) {
      if (node.style.marginEnd !== undefined && isRowDirection(axis)) {
        return node.style.marginEnd;
      }
      var value = null;
      switch (axis) {
        case 'row':
          value = node.style.marginRight;
          break;
        case 'row-reverse':
          value = node.style.marginLeft;
          break;
        case 'column':
          value = node.style.marginBottom;
          break;
        case 'column-reverse':
          value = node.style.marginTop;
          break;
      }
      if (value != null) {
        return value;
      }
      if (node.style.margin !== undefined) {
        return node.style.margin;
      }
      return 0;
    }
    function getLeadingPadding(node, axis) {
      if (node.style.paddingStart !== undefined && node.style.paddingStart >= 0 && isRowDirection(axis)) {
        return node.style.paddingStart;
      }
      var value = null;
      switch (axis) {
        case 'row':
          value = node.style.paddingLeft;
          break;
        case 'row-reverse':
          value = node.style.paddingRight;
          break;
        case 'column':
          value = node.style.paddingTop;
          break;
        case 'column-reverse':
          value = node.style.paddingBottom;
          break;
      }
      if (value != null && value >= 0) {
        return value;
      }
      if (node.style.padding !== undefined && node.style.padding >= 0) {
        return node.style.padding;
      }
      return 0;
    }
    function getTrailingPadding(node, axis) {
      if (node.style.paddingEnd !== undefined && node.style.paddingEnd >= 0 && isRowDirection(axis)) {
        return node.style.paddingEnd;
      }
      var value = null;
      switch (axis) {
        case 'row':
          value = node.style.paddingRight;
          break;
        case 'row-reverse':
          value = node.style.paddingLeft;
          break;
        case 'column':
          value = node.style.paddingBottom;
          break;
        case 'column-reverse':
          value = node.style.paddingTop;
          break;
      }
      if (value != null && value >= 0) {
        return value;
      }
      if (node.style.padding !== undefined && node.style.padding >= 0) {
        return node.style.padding;
      }
      return 0;
    }
    function getLeadingBorder(node, axis) {
      if (node.style.borderStartWidth !== undefined && node.style.borderStartWidth >= 0 && isRowDirection(axis)) {
        return node.style.borderStartWidth;
      }
      var value = null;
      switch (axis) {
        case 'row':
          value = node.style.borderLeftWidth;
          break;
        case 'row-reverse':
          value = node.style.borderRightWidth;
          break;
        case 'column':
          value = node.style.borderTopWidth;
          break;
        case 'column-reverse':
          value = node.style.borderBottomWidth;
          break;
      }
      if (value != null && value >= 0) {
        return value;
      }
      if (node.style.borderWidth !== undefined && node.style.borderWidth >= 0) {
        return node.style.borderWidth;
      }
      return 0;
    }
    function getTrailingBorder(node, axis) {
      if (node.style.borderEndWidth !== undefined && node.style.borderEndWidth >= 0 && isRowDirection(axis)) {
        return node.style.borderEndWidth;
      }
      var value = null;
      switch (axis) {
        case 'row':
          value = node.style.borderRightWidth;
          break;
        case 'row-reverse':
          value = node.style.borderLeftWidth;
          break;
        case 'column':
          value = node.style.borderBottomWidth;
          break;
        case 'column-reverse':
          value = node.style.borderTopWidth;
          break;
      }
      if (value != null && value >= 0) {
        return value;
      }
      if (node.style.borderWidth !== undefined && node.style.borderWidth >= 0) {
        return node.style.borderWidth;
      }
      return 0;
    }
    function getLeadingPaddingAndBorder(node, axis) {
      return getLeadingPadding(node, axis) + getLeadingBorder(node, axis);
    }
    function getTrailingPaddingAndBorder(node, axis) {
      return getTrailingPadding(node, axis) + getTrailingBorder(node, axis);
    }
    function getBorderAxis(node, axis) {
      return getLeadingBorder(node, axis) + getTrailingBorder(node, axis);
    }
    function getMarginAxis(node, axis) {
      return getLeadingMargin(node, axis) + getTrailingMargin(node, axis);
    }
    function getPaddingAndBorderAxis(node, axis) {
      return getLeadingPaddingAndBorder(node, axis) + getTrailingPaddingAndBorder(node, axis);
    }
    function getJustifyContent(node) {
      if (node.style.justifyContent) {
        return node.style.justifyContent;
      }
      return 'flex-start';
    }
    function getAlignContent(node) {
      if (node.style.alignContent) {
        return node.style.alignContent;
      }
      return 'flex-start';
    }
    function getAlignItem(node, child) {
      if (child.style.alignSelf) {
        return child.style.alignSelf;
      }
      if (node.style.alignItems) {
        return node.style.alignItems;
      }
      return 'stretch';
    }
    function resolveAxis(axis, direction) {
      if (direction === CSS_DIRECTION_RTL) {
        if (axis === CSS_FLEX_DIRECTION_ROW) {
          return CSS_FLEX_DIRECTION_ROW_REVERSE;
        } else if (axis === CSS_FLEX_DIRECTION_ROW_REVERSE) {
          return CSS_FLEX_DIRECTION_ROW;
        }
      }
      return axis;
    }
    function resolveDirection(node, parentDirection) {
      var direction;
      if (node.style.direction) {
        direction = node.style.direction;
      } else {
        direction = CSS_DIRECTION_INHERIT;
      }
      if (direction === CSS_DIRECTION_INHERIT) {
        direction = parentDirection === undefined ? CSS_DIRECTION_LTR : parentDirection;
      }
      return direction;
    }
    function getFlexDirection(node) {
      if (node.style.flexDirection) {
        return node.style.flexDirection;
      }
      return CSS_FLEX_DIRECTION_COLUMN;
    }
    function getCrossFlexDirection(flexDirection, direction) {
      if (isColumnDirection(flexDirection)) {
        return resolveAxis(CSS_FLEX_DIRECTION_ROW, direction);
      } else {
        return CSS_FLEX_DIRECTION_COLUMN;
      }
    }
    function getPositionType(node) {
      if (node.style.position) {
        return node.style.position;
      }
      return 'relative';
    }
    function isFlex(node) {
      return getPositionType(node) === CSS_POSITION_RELATIVE && node.style.flex > 0;
    }
    function isFlexWrap(node) {
      return node.style.flexWrap === 'wrap';
    }
    function getDimWithMargin(node, axis) {
      return node.layout[dim[axis]] + getMarginAxis(node, axis);
    }
    function isDimDefined(node, axis) {
      return node.style[dim[axis]] !== undefined && node.style[dim[axis]] >= 0;
    }
    function isPosDefined(node, pos) {
      return node.style[pos] !== undefined;
    }
    function isMeasureDefined(node) {
      return node.style.measure !== undefined;
    }
    function getPosition(node, pos) {
      if (node.style[pos] !== undefined) {
        return node.style[pos];
      }
      return 0;
    }
    function boundAxis(node, axis, value) {
      var min = {
        row: node.style.minWidth,
        'row-reverse': node.style.minWidth,
        column: node.style.minHeight,
        'column-reverse': node.style.minHeight
      }[axis];
      var max = {
        row: node.style.maxWidth,
        'row-reverse': node.style.maxWidth,
        column: node.style.maxHeight,
        'column-reverse': node.style.maxHeight
      }[axis];
      var boundValue = value;
      if (max !== undefined && max >= 0 && boundValue > max) {
        boundValue = max;
      }
      if (min !== undefined && min >= 0 && boundValue < min) {
        boundValue = min;
      }
      return boundValue;
    }
    function fmaxf(a, b) {
      if (a > b) {
        return a;
      }
      return b;
    }
    // When the user specifically sets a value for width or height
    function setDimensionFromStyle(node, axis) {
      // The parent already computed us a width or height. We just skip it
      if (node.layout[dim[axis]] !== undefined) {
        return;
      }
      // We only run if there's a width or height defined
      if (!isDimDefined(node, axis)) {
        return;
      }
      // The dimensions can never be smaller than the padding and border
      node.layout[dim[axis]] = fmaxf(boundAxis(node, axis, node.style[dim[axis]]), getPaddingAndBorderAxis(node, axis));
    }
    function setTrailingPosition(node, child, axis) {
      child.layout[trailing[axis]] = node.layout[dim[axis]] - child.layout[dim[axis]] - child.layout[pos[axis]];
    }
    // If both left and right are defined, then use left. Otherwise return
    // +left or -right depending on which is defined.
    function getRelativePosition(node, axis) {
      if (node.style[leading[axis]] !== undefined) {
        return getPosition(node, leading[axis]);
      }
      return -getPosition(node, trailing[axis]);
    }
    function layoutNodeImpl(node, parentMaxWidth, /*css_direction_t*/parentDirection) {
      var /*css_direction_t*/direction = resolveDirection(node, parentDirection);
      var /*(c)!css_flex_direction_t*/ /*(java)!int*/mainAxis = resolveAxis(getFlexDirection(node), direction);
      var /*(c)!css_flex_direction_t*/ /*(java)!int*/crossAxis = getCrossFlexDirection(mainAxis, direction);
      var /*(c)!css_flex_direction_t*/ /*(java)!int*/resolvedRowAxis = resolveAxis(CSS_FLEX_DIRECTION_ROW, direction);
      // Handle width and height style attributes
      setDimensionFromStyle(node, mainAxis);
      setDimensionFromStyle(node, crossAxis);
      // Set the resolved resolution in the node's layout
      node.layout.direction = direction;
      // The position is set by the parent, but we need to complete it with a
      // delta composed of the margin and left/top/right/bottom
      node.layout[leading[mainAxis]] += getLeadingMargin(node, mainAxis) + getRelativePosition(node, mainAxis);
      node.layout[trailing[mainAxis]] += getTrailingMargin(node, mainAxis) + getRelativePosition(node, mainAxis);
      node.layout[leading[crossAxis]] += getLeadingMargin(node, crossAxis) + getRelativePosition(node, crossAxis);
      node.layout[trailing[crossAxis]] += getTrailingMargin(node, crossAxis) + getRelativePosition(node, crossAxis);
      // Inline immutable values from the target node to avoid excessive method
      // invocations during the layout calculation.
      var /*int*/childCount = node.children.length;
      var /*float*/paddingAndBorderAxisResolvedRow = getPaddingAndBorderAxis(node, resolvedRowAxis);
      if (isMeasureDefined(node)) {
        var /*bool*/isResolvedRowDimDefined = !isUndefined$1(node.layout[dim[resolvedRowAxis]]);
        var /*float*/width = CSS_UNDEFINED;
        if (isDimDefined(node, resolvedRowAxis)) {
          width = node.style.width;
        } else if (isResolvedRowDimDefined) {
          width = node.layout[dim[resolvedRowAxis]];
        } else {
          width = parentMaxWidth - getMarginAxis(node, resolvedRowAxis);
        }
        width -= paddingAndBorderAxisResolvedRow;
        // We only need to give a dimension for the text if we haven't got any
        // for it computed yet. It can either be from the style attribute or because
        // the element is flexible.
        var /*bool*/isRowUndefined = !isDimDefined(node, resolvedRowAxis) && !isResolvedRowDimDefined;
        var /*bool*/isColumnUndefined = !isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN) && isUndefined$1(node.layout[dim[CSS_FLEX_DIRECTION_COLUMN]]);
        // Let's not measure the text if we already know both dimensions
        if (isRowUndefined || isColumnUndefined) {
          var /*css_dim_t*/measureDim = node.style.measure(/*(c)!node->context,*/
          /*(java)!layoutContext.measureOutput,*/
          width);
          if (isRowUndefined) {
            node.layout.width = measureDim.width + paddingAndBorderAxisResolvedRow;
          }
          if (isColumnUndefined) {
            node.layout.height = measureDim.height + getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_COLUMN);
          }
        }
        if (childCount === 0) {
          return;
        }
      }
      var /*bool*/isNodeFlexWrap = isFlexWrap(node);
      var /*css_justify_t*/justifyContent = getJustifyContent(node);
      var /*float*/leadingPaddingAndBorderMain = getLeadingPaddingAndBorder(node, mainAxis);
      var /*float*/leadingPaddingAndBorderCross = getLeadingPaddingAndBorder(node, crossAxis);
      var /*float*/paddingAndBorderAxisMain = getPaddingAndBorderAxis(node, mainAxis);
      var /*float*/paddingAndBorderAxisCross = getPaddingAndBorderAxis(node, crossAxis);
      var /*bool*/isMainDimDefined = !isUndefined$1(node.layout[dim[mainAxis]]);
      var /*bool*/isCrossDimDefined = !isUndefined$1(node.layout[dim[crossAxis]]);
      var /*bool*/isMainRowDirection = isRowDirection(mainAxis);
      var /*int*/i;
      var /*int*/ii;
      var /*css_node_t**/child;
      var /*(c)!css_flex_direction_t*/ /*(java)!int*/axis;
      var /*css_node_t**/firstAbsoluteChild = null;
      var /*css_node_t**/currentAbsoluteChild = null;
      var /*float*/definedMainDim = CSS_UNDEFINED;
      if (isMainDimDefined) {
        definedMainDim = node.layout[dim[mainAxis]] - paddingAndBorderAxisMain;
      }
      // We want to execute the next two loops one per line with flex-wrap
      var /*int*/startLine = 0;
      var /*int*/endLine = 0;
      // var/*int*/ nextOffset = 0;
      var /*int*/alreadyComputedNextLayout = 0;
      // We aggregate the total dimensions of the container in those two variables
      var /*float*/linesCrossDim = 0;
      var /*float*/linesMainDim = 0;
      var /*int*/linesCount = 0;
      while (endLine < childCount) {
        // <Loop A> Layout non flexible children and count children by type
        // mainContentDim is accumulation of the dimensions and margin of all the
        // non flexible children. This will be used in order to either set the
        // dimensions of the node if none already exist, or to compute the
        // remaining space left for the flexible children.
        var /*float*/mainContentDim = 0;
        // There are three kind of children, non flexible, flexible and absolute.
        // We need to know how many there are in order to distribute the space.
        var /*int*/flexibleChildrenCount = 0;
        var /*float*/totalFlexible = 0;
        var /*int*/nonFlexibleChildrenCount = 0;
        // Use the line loop to position children in the main axis for as long
        // as they are using a simple stacking behaviour. Children that are
        // immediately stacked in the initial loop will not be touched again
        // in <Loop C>.
        var /*bool*/isSimpleStackMain = isMainDimDefined && justifyContent === CSS_JUSTIFY_FLEX_START || !isMainDimDefined && justifyContent !== CSS_JUSTIFY_CENTER;
        var /*int*/firstComplexMain = isSimpleStackMain ? childCount : startLine;
        // Use the initial line loop to position children in the cross axis for
        // as long as they are relatively positioned with alignment STRETCH or
        // FLEX_START. Children that are immediately stacked in the initial loop
        // will not be touched again in <Loop D>.
        var /*bool*/isSimpleStackCross = true;
        var /*int*/firstComplexCross = childCount;
        var /*css_node_t**/firstFlexChild = null;
        var /*css_node_t**/currentFlexChild = null;
        var /*float*/mainDim = leadingPaddingAndBorderMain;
        var /*float*/crossDim = 0;
        var /*float*/maxWidth;
        for (i = startLine; i < childCount; ++i) {
          child = node.children[i];
          child.lineIndex = linesCount;
          child.nextAbsoluteChild = null;
          child.nextFlexChild = null;
          var /*css_align_t*/alignItem = getAlignItem(node, child);
          // Pre-fill cross axis dimensions when the child is using stretch before
          // we call the recursive layout pass
          if (alignItem === CSS_ALIGN_STRETCH && getPositionType(child) === CSS_POSITION_RELATIVE && isCrossDimDefined && !isDimDefined(child, crossAxis)) {
            child.layout[dim[crossAxis]] = fmaxf(boundAxis(child, crossAxis, node.layout[dim[crossAxis]] - paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)),
            // You never want to go smaller than padding
            getPaddingAndBorderAxis(child, crossAxis));
          } else if (getPositionType(child) === CSS_POSITION_ABSOLUTE) {
            // Store a private linked list of absolutely positioned children
            // so that we can efficiently traverse them later.
            if (firstAbsoluteChild === null) {
              firstAbsoluteChild = child;
            }
            if (currentAbsoluteChild !== null) {
              currentAbsoluteChild.nextAbsoluteChild = child;
            }
            currentAbsoluteChild = child;
            // Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both
            // left and right or top and bottom).
            for (ii = 0; ii < 2; ii++) {
              axis = ii !== 0 ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
              if (!isUndefined$1(node.layout[dim[axis]]) && !isDimDefined(child, axis) && isPosDefined(child, leading[axis]) && isPosDefined(child, trailing[axis])) {
                child.layout[dim[axis]] = fmaxf(boundAxis(child, axis, node.layout[dim[axis]] - getPaddingAndBorderAxis(node, axis) - getMarginAxis(child, axis) - getPosition(child, leading[axis]) - getPosition(child, trailing[axis])),
                // You never want to go smaller than padding
                getPaddingAndBorderAxis(child, axis));
              }
            }
          }
          var /*float*/nextContentDim = 0;
          // It only makes sense to consider a child flexible if we have a computed
          // dimension for the node.
          if (isMainDimDefined && isFlex(child)) {
            flexibleChildrenCount++;
            totalFlexible += child.style.flex;
            // Store a private linked list of flexible children so that we can
            // efficiently traverse them later.
            if (firstFlexChild === null) {
              firstFlexChild = child;
            }
            if (currentFlexChild !== null) {
              currentFlexChild.nextFlexChild = child;
            }
            currentFlexChild = child;
            // Even if we don't know its exact size yet, we already know the padding,
            // border and margin. We'll use this partial information, which represents
            // the smallest possible size for the child, to compute the remaining
            // available space.
            nextContentDim = getPaddingAndBorderAxis(child, mainAxis) + getMarginAxis(child, mainAxis);
          } else {
            maxWidth = CSS_UNDEFINED;
            if (!isMainRowDirection) {
              if (isDimDefined(node, resolvedRowAxis)) {
                maxWidth = node.layout[dim[resolvedRowAxis]] - paddingAndBorderAxisResolvedRow;
              } else {
                maxWidth = parentMaxWidth - getMarginAxis(node, resolvedRowAxis) - paddingAndBorderAxisResolvedRow;
              }
            }
            // This is the main recursive call. We layout non flexible children.
            if (alreadyComputedNextLayout === 0) {
              layoutNode(/*(java)!layoutContext, */child, maxWidth, direction);
            }
            // Absolute positioned elements do not take part of the layout, so we
            // don't use them to compute mainContentDim
            if (getPositionType(child) === CSS_POSITION_RELATIVE) {
              nonFlexibleChildrenCount++;
              // At this point we know the final size and margin of the element.
              nextContentDim = getDimWithMargin(child, mainAxis);
            }
          }
          // The element we are about to add would make us go to the next line
          if (isNodeFlexWrap && isMainDimDefined && mainContentDim + nextContentDim > definedMainDim &&
          // If there's only one element, then it's bigger than the content
          // and needs its own line
          i !== startLine) {
            nonFlexibleChildrenCount--;
            alreadyComputedNextLayout = 1;
            break;
          }
          // Disable simple stacking in the main axis for the current line as
          // we found a non-trivial child. The remaining children will be laid out
          // in <Loop C>.
          if (isSimpleStackMain && (getPositionType(child) !== CSS_POSITION_RELATIVE || isFlex(child))) {
            isSimpleStackMain = false;
            firstComplexMain = i;
          }
          // Disable simple stacking in the cross axis for the current line as
          // we found a non-trivial child. The remaining children will be laid out
          // in <Loop D>.
          if (isSimpleStackCross && (getPositionType(child) !== CSS_POSITION_RELATIVE || alignItem !== CSS_ALIGN_STRETCH && alignItem !== CSS_ALIGN_FLEX_START || isUndefined$1(child.layout[dim[crossAxis]]))) {
            isSimpleStackCross = false;
            firstComplexCross = i;
          }
          if (isSimpleStackMain) {
            child.layout[pos[mainAxis]] += mainDim;
            if (isMainDimDefined) {
              setTrailingPosition(node, child, mainAxis);
            }
            mainDim += getDimWithMargin(child, mainAxis);
            crossDim = fmaxf(crossDim, boundAxis(child, crossAxis, getDimWithMargin(child, crossAxis)));
          }
          if (isSimpleStackCross) {
            child.layout[pos[crossAxis]] += linesCrossDim + leadingPaddingAndBorderCross;
            if (isCrossDimDefined) {
              setTrailingPosition(node, child, crossAxis);
            }
          }
          alreadyComputedNextLayout = 0;
          mainContentDim += nextContentDim;
          endLine = i + 1;
        }
        // <Loop B> Layout flexible children and allocate empty space
        // In order to position the elements in the main axis, we have two
        // controls. The space between the beginning and the first element
        // and the space between each two elements.
        var /*float*/leadingMainDim = 0;
        var /*float*/betweenMainDim = 0;
        // The remaining available space that needs to be allocated
        var /*float*/remainingMainDim = 0;
        if (isMainDimDefined) {
          remainingMainDim = definedMainDim - mainContentDim;
        } else {
          remainingMainDim = fmaxf(mainContentDim, 0) - mainContentDim;
        }
        // If there are flexible children in the mix, they are going to fill the
        // remaining space
        if (flexibleChildrenCount !== 0) {
          var /*float*/flexibleMainDim = remainingMainDim / totalFlexible;
          var /*float*/baseMainDim;
          var /*float*/boundMainDim;
          // If the flex share of remaining space doesn't meet min/max bounds,
          // remove this child from flex calculations.
          currentFlexChild = firstFlexChild;
          while (currentFlexChild !== null) {
            baseMainDim = flexibleMainDim * currentFlexChild.style.flex + getPaddingAndBorderAxis(currentFlexChild, mainAxis);
            boundMainDim = boundAxis(currentFlexChild, mainAxis, baseMainDim);
            if (baseMainDim !== boundMainDim) {
              remainingMainDim -= boundMainDim;
              totalFlexible -= currentFlexChild.style.flex;
            }
            currentFlexChild = currentFlexChild.nextFlexChild;
          }
          flexibleMainDim = remainingMainDim / totalFlexible;
          // The non flexible children can overflow the container, in this case
          // we should just assume that there is no space available.
          if (flexibleMainDim < 0) {
            flexibleMainDim = 0;
          }
          currentFlexChild = firstFlexChild;
          while (currentFlexChild !== null) {
            // At this point we know the final size of the element in the main
            // dimension
            currentFlexChild.layout[dim[mainAxis]] = boundAxis(currentFlexChild, mainAxis, flexibleMainDim * currentFlexChild.style.flex + getPaddingAndBorderAxis(currentFlexChild, mainAxis));
            maxWidth = CSS_UNDEFINED;
            if (isDimDefined(node, resolvedRowAxis)) {
              maxWidth = node.layout[dim[resolvedRowAxis]] - paddingAndBorderAxisResolvedRow;
            } else if (!isMainRowDirection) {
              maxWidth = parentMaxWidth - getMarginAxis(node, resolvedRowAxis) - paddingAndBorderAxisResolvedRow;
            }
            // And we recursively call the layout algorithm for this child
            layoutNode(/*(java)!layoutContext, */currentFlexChild, maxWidth, direction);
            child = currentFlexChild;
            currentFlexChild = currentFlexChild.nextFlexChild;
            child.nextFlexChild = null;
          }
          // We use justifyContent to figure out how to allocate the remaining
          // space available
        } else if (justifyContent !== CSS_JUSTIFY_FLEX_START) {
          if (justifyContent === CSS_JUSTIFY_CENTER) {
            leadingMainDim = remainingMainDim / 2;
          } else if (justifyContent === CSS_JUSTIFY_FLEX_END) {
            leadingMainDim = remainingMainDim;
          } else if (justifyContent === CSS_JUSTIFY_SPACE_BETWEEN) {
            remainingMainDim = fmaxf(remainingMainDim, 0);
            if (flexibleChildrenCount + nonFlexibleChildrenCount - 1 !== 0) {
              betweenMainDim = remainingMainDim / (flexibleChildrenCount + nonFlexibleChildrenCount - 1);
            } else {
              betweenMainDim = 0;
            }
          } else if (justifyContent === CSS_JUSTIFY_SPACE_AROUND) {
            // Space on the edges is half of the space between elements
            betweenMainDim = remainingMainDim / (flexibleChildrenCount + nonFlexibleChildrenCount);
            leadingMainDim = betweenMainDim / 2;
          }
        }
        // <Loop C> Position elements in the main axis and compute dimensions
        // At this point, all the children have their dimensions set. We need to
        // find their position. In order to do that, we accumulate data in
        // variables that are also useful to compute the total dimensions of the
        // container!
        mainDim += leadingMainDim;
        for (i = firstComplexMain; i < endLine; ++i) {
          child = node.children[i];
          if (getPositionType(child) === CSS_POSITION_ABSOLUTE && isPosDefined(child, leading[mainAxis])) {
            // In case the child is position absolute and has left/top being
            // defined, we override the position to whatever the user said
            // (and margin/border).
            child.layout[pos[mainAxis]] = getPosition(child, leading[mainAxis]) + getLeadingBorder(node, mainAxis) + getLeadingMargin(child, mainAxis);
          } else {
            // If the child is position absolute (without top/left) or relative,
            // we put it at the current accumulated offset.
            child.layout[pos[mainAxis]] += mainDim;
            // Define the trailing position accordingly.
            if (isMainDimDefined) {
              setTrailingPosition(node, child, mainAxis);
            }
            // Now that we placed the element, we need to update the variables
            // We only need to do that for relative elements. Absolute elements
            // do not take part in that phase.
            if (getPositionType(child) === CSS_POSITION_RELATIVE) {
              // The main dimension is the sum of all the elements dimension plus
              // the spacing.
              mainDim += betweenMainDim + getDimWithMargin(child, mainAxis);
              // The cross dimension is the max of the elements dimension since there
              // can only be one element in that cross dimension.
              crossDim = fmaxf(crossDim, boundAxis(child, crossAxis, getDimWithMargin(child, crossAxis)));
            }
          }
        }
        var /*float*/containerCrossAxis = node.layout[dim[crossAxis]];
        if (!isCrossDimDefined) {
          containerCrossAxis = fmaxf(
          // For the cross dim, we add both sides at the end because the value
          // is aggregate via a max function. Intermediate negative values
          // can mess this computation otherwise
          boundAxis(node, crossAxis, crossDim + paddingAndBorderAxisCross), paddingAndBorderAxisCross);
        }
        // <Loop D> Position elements in the cross axis
        for (i = firstComplexCross; i < endLine; ++i) {
          child = node.children[i];
          if (getPositionType(child) === CSS_POSITION_ABSOLUTE && isPosDefined(child, leading[crossAxis])) {
            // In case the child is absolutely positionned and has a
            // top/left/bottom/right being set, we override all the previously
            // computed positions to set it correctly.
            child.layout[pos[crossAxis]] = getPosition(child, leading[crossAxis]) + getLeadingBorder(node, crossAxis) + getLeadingMargin(child, crossAxis);
          } else {
            var /*float*/leadingCrossDim = leadingPaddingAndBorderCross;
            // For a relative children, we're either using alignItems (parent) or
            // alignSelf (child) in order to determine the position in the cross axis
            if (getPositionType(child) === CSS_POSITION_RELATIVE) {
              // This variable is intentionally re-defined as the code is transpiled to a block scope language
              var /*css_align_t*/alignItem = getAlignItem(node, child);
              if (alignItem === CSS_ALIGN_STRETCH) {
                // You can only stretch if the dimension has not already been set
                // previously.
                if (isUndefined$1(child.layout[dim[crossAxis]])) {
                  child.layout[dim[crossAxis]] = fmaxf(boundAxis(child, crossAxis, containerCrossAxis - paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)),
                  // You never want to go smaller than padding
                  getPaddingAndBorderAxis(child, crossAxis));
                }
              } else if (alignItem !== CSS_ALIGN_FLEX_START) {
                // The remaining space between the parent dimensions+padding and child
                // dimensions+margin.
                var /*float*/remainingCrossDim = containerCrossAxis - paddingAndBorderAxisCross - getDimWithMargin(child, crossAxis);
                if (alignItem === CSS_ALIGN_CENTER) {
                  leadingCrossDim += remainingCrossDim / 2;
                } else {
                  // CSS_ALIGN_FLEX_END
                  leadingCrossDim += remainingCrossDim;
                }
              }
            }
            // And we apply the position
            child.layout[pos[crossAxis]] += linesCrossDim + leadingCrossDim;
            // Define the trailing position accordingly.
            if (isCrossDimDefined) {
              setTrailingPosition(node, child, crossAxis);
            }
          }
        }
        linesCrossDim += crossDim;
        linesMainDim = fmaxf(linesMainDim, mainDim);
        linesCount += 1;
        startLine = endLine;
      }
      // <Loop E>
      //
      // Note(prenaux): More than one line, we need to layout the crossAxis
      // according to alignContent.
      //
      // Note that we could probably remove <Loop D> and handle the one line case
      // here too, but for the moment this is safer since it won't interfere with
      // previously working code.
      //
      // See specs:
      // http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#layout-algorithm
      // section 9.4
      //
      if (linesCount > 1 && isCrossDimDefined) {
        var /*float*/nodeCrossAxisInnerSize = node.layout[dim[crossAxis]] - paddingAndBorderAxisCross;
        var /*float*/remainingAlignContentDim = nodeCrossAxisInnerSize - linesCrossDim;
        var /*float*/crossDimLead = 0;
        var /*float*/currentLead = leadingPaddingAndBorderCross;
        var /*css_align_t*/alignContent = getAlignContent(node);
        if (alignContent === CSS_ALIGN_FLEX_END) {
          currentLead += remainingAlignContentDim;
        } else if (alignContent === CSS_ALIGN_CENTER) {
          currentLead += remainingAlignContentDim / 2;
        } else if (alignContent === CSS_ALIGN_STRETCH) {
          if (nodeCrossAxisInnerSize > linesCrossDim) {
            crossDimLead = remainingAlignContentDim / linesCount;
          }
        }
        var /*int*/endIndex = 0;
        for (i = 0; i < linesCount; ++i) {
          var /*int*/startIndex = endIndex;
          // compute the line's height and find the endIndex
          var /*float*/lineHeight = 0;
          for (ii = startIndex; ii < childCount; ++ii) {
            child = node.children[ii];
            if (getPositionType(child) !== CSS_POSITION_RELATIVE) {
              continue;
            }
            if (child.lineIndex !== i) {
              break;
            }
            if (!isUndefined$1(child.layout[dim[crossAxis]])) {
              lineHeight = fmaxf(lineHeight, child.layout[dim[crossAxis]] + getMarginAxis(child, crossAxis));
            }
          }
          endIndex = ii;
          lineHeight += crossDimLead;
          for (ii = startIndex; ii < endIndex; ++ii) {
            child = node.children[ii];
            if (getPositionType(child) !== CSS_POSITION_RELATIVE) {
              continue;
            }
            var /*css_align_t*/alignContentAlignItem = getAlignItem(node, child);
            if (alignContentAlignItem === CSS_ALIGN_FLEX_START) {
              child.layout[pos[crossAxis]] = currentLead + getLeadingMargin(child, crossAxis);
            } else if (alignContentAlignItem === CSS_ALIGN_FLEX_END) {
              child.layout[pos[crossAxis]] = currentLead + lineHeight - getTrailingMargin(child, crossAxis) - child.layout[dim[crossAxis]];
            } else if (alignContentAlignItem === CSS_ALIGN_CENTER) {
              var /*float*/childHeight = child.layout[dim[crossAxis]];
              child.layout[pos[crossAxis]] = currentLead + (lineHeight - childHeight) / 2;
            } else if (alignContentAlignItem === CSS_ALIGN_STRETCH) {
              child.layout[pos[crossAxis]] = currentLead + getLeadingMargin(child, crossAxis);
              // TODO(prenaux): Correctly set the height of items with undefined
              //                (auto) crossAxis dimension.
            }
          }
          currentLead += lineHeight;
        }
      }
      var /*bool*/needsMainTrailingPos = false;
      var /*bool*/needsCrossTrailingPos = false;
      // If the user didn't specify a width or height, and it has not been set
      // by the container, then we set it via the children.
      if (!isMainDimDefined) {
        node.layout[dim[mainAxis]] = fmaxf(
        // We're missing the last padding at this point to get the final
        // dimension
        boundAxis(node, mainAxis, linesMainDim + getTrailingPaddingAndBorder(node, mainAxis)),
        // We can never assign a width smaller than the padding and borders
        paddingAndBorderAxisMain);
        if (mainAxis === CSS_FLEX_DIRECTION_ROW_REVERSE || mainAxis === CSS_FLEX_DIRECTION_COLUMN_REVERSE) {
          needsMainTrailingPos = true;
        }
      }
      if (!isCrossDimDefined) {
        node.layout[dim[crossAxis]] = fmaxf(
        // For the cross dim, we add both sides at the end because the value
        // is aggregate via a max function. Intermediate negative values
        // can mess this computation otherwise
        boundAxis(node, crossAxis, linesCrossDim + paddingAndBorderAxisCross), paddingAndBorderAxisCross);
        if (crossAxis === CSS_FLEX_DIRECTION_ROW_REVERSE || crossAxis === CSS_FLEX_DIRECTION_COLUMN_REVERSE) {
          needsCrossTrailingPos = true;
        }
      }
      // <Loop F> Set trailing position if necessary
      if (needsMainTrailingPos || needsCrossTrailingPos) {
        for (i = 0; i < childCount; ++i) {
          child = node.children[i];
          if (needsMainTrailingPos) {
            setTrailingPosition(node, child, mainAxis);
          }
          if (needsCrossTrailingPos) {
            setTrailingPosition(node, child, crossAxis);
          }
        }
      }
      // <Loop G> Calculate dimensions for absolutely positioned elements
      currentAbsoluteChild = firstAbsoluteChild;
      while (currentAbsoluteChild !== null) {
        // Pre-fill dimensions when using absolute position and both offsets for
        // the axis are defined (either both left and right or top and bottom).
        for (ii = 0; ii < 2; ii++) {
          axis = ii !== 0 ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
          if (!isUndefined$1(node.layout[dim[axis]]) && !isDimDefined(currentAbsoluteChild, axis) && isPosDefined(currentAbsoluteChild, leading[axis]) && isPosDefined(currentAbsoluteChild, trailing[axis])) {
            currentAbsoluteChild.layout[dim[axis]] = fmaxf(boundAxis(currentAbsoluteChild, axis, node.layout[dim[axis]] - getBorderAxis(node, axis) - getMarginAxis(currentAbsoluteChild, axis) - getPosition(currentAbsoluteChild, leading[axis]) - getPosition(currentAbsoluteChild, trailing[axis])),
            // You never want to go smaller than padding
            getPaddingAndBorderAxis(currentAbsoluteChild, axis));
          }
          if (isPosDefined(currentAbsoluteChild, trailing[axis]) && !isPosDefined(currentAbsoluteChild, leading[axis])) {
            currentAbsoluteChild.layout[leading[axis]] = node.layout[dim[axis]] - currentAbsoluteChild.layout[dim[axis]] - getPosition(currentAbsoluteChild, trailing[axis]);
          }
        }
        child = currentAbsoluteChild;
        currentAbsoluteChild = currentAbsoluteChild.nextAbsoluteChild;
        child.nextAbsoluteChild = null;
      }
    }
    // 在外层做的margin补丁
    function saveMargin(node) {
      var style = node.style;
      var margin = {};
      ['marginTop', 'marginRight', 'marginBottom', 'marginLeft' // 只支持marginLeft
      ].forEach(function (key) {
        // 只处理百分号
        var value = style[key];
        if (value && /^-?\d+%$/.test(value)) {
          margin[key] = value;
          style[key] = 0;
        }
      });
      node.margin = margin;
    }
    function percent2Num(value) {
      var percent = Number(value.substr(0, value.length - 1));
      return percent / 100;
    }
    function layoutMargin(node) {
      var margin = node.margin,
        layout = node.layout;
      Object.keys(margin).forEach(function (key) {
        var percent = percent2Num(margin[key]);
        if ((key === 'marginLeft' || key === 'marginRight') && layout.width) {
          layout.left += layout.width * percent;
        } else if ((key === 'marginTop' || key === 'marginBottom') && layout.height) {
          layout.top += layout.height * percent;
        }
      });
    }
    function layoutNode(node, parentMaxWidth, parentDirection) {
      node.shouldUpdate = true;
      // hack
      saveMargin(node);
      var direction = node.style.direction || CSS_DIRECTION_LTR;
      var skipLayout = !node.isDirty && node.lastLayout && node.lastLayout.requestedHeight === node.layout.height && node.lastLayout.requestedWidth === node.layout.width && node.lastLayout.parentMaxWidth === parentMaxWidth && node.lastLayout.direction === direction;
      if (skipLayout) {
        node.layout.width = node.lastLayout.width;
        node.layout.height = node.lastLayout.height;
        node.layout.top = node.lastLayout.top;
        node.layout.left = node.lastLayout.left;
      } else {
        if (!node.lastLayout) {
          node.lastLayout = {};
        }
        node.lastLayout.requestedWidth = node.layout.width;
        node.lastLayout.requestedHeight = node.layout.height;
        node.lastLayout.parentMaxWidth = parentMaxWidth;
        node.lastLayout.direction = direction;
        // Reset child layouts
        node.children.forEach(function (child) {
          child.layout.width = undefined;
          child.layout.height = undefined;
          child.layout.top = 0;
          child.layout.left = 0;
        });
        layoutNodeImpl(node, parentMaxWidth, parentDirection);
        node.lastLayout.width = node.layout.width;
        node.lastLayout.height = node.layout.height;
        node.lastLayout.top = node.layout.top;
        node.lastLayout.left = node.layout.left;
      }
      // hack
      layoutMargin(node);
    }
    /* eslint-enable */
    function computeLayout(node) {
      if (!node) return node;
      fillNodes(node);
      layoutNode(node, null, null);
      return node;
    }

    function createMeasure(style, measureText) {
      return function /* width */
      () {
        var text = style.text,
          width = style.width,
          height = style.height;
        var outputWidth = width;
        var outputHeight = height;
        if (!isNumber(width) || !isNumber(height)) {
          var _a = measureText(text, style),
            measureWidth = _a.width,
            measureHeight = _a.height;
          if (!isNumber(width)) {
            outputWidth = measureWidth;
          }
          if (!isNumber(height)) {
            outputHeight = measureHeight;
          }
        }
        return {
          width: outputWidth,
          height: outputHeight
        };
      };
    }
    function getChildrenLayout(nodeTree) {
      if (!nodeTree) return;
      var left = 0;
      var top = 0;
      var right = 0;
      var bottom = 0;
      var width = 0;
      var height = 0;
      nodeTree.forEach(function (node) {
        var layout = node.layout;
        if (!layout) return;
        left = Math.min(left, layout.left);
        top = Math.min(top, layout.top);
        right = Math.min(right, layout.left + layout.width);
        bottom = Math.min(bottom, layout.top + layout.height);
        width = Math.max(width, layout.width);
        height = Math.max(height, layout.height);
      });
      return {
        left: left,
        top: top,
        right: right,
        bottom: bottom,
        width: width,
        height: height
      };
    }
    var NodeTree = /** @class */function () {
      function NodeTree(node) {
        var className = node.className,
          children = node.children,
          layout = node.layout;
        var nodeChildren = children && children.length ? children.map(function (child) {
          return new NodeTree(child);
        }) : undefined;
        var nodeLayout = layout ? layout : getChildrenLayout(nodeChildren);
        this.children = nodeChildren;
        this.layout = nodeLayout;
        this.className = className;
      }
      NodeTree.prototype.getElementsByClassName = function (targetClassName) {
        var result = [];
        var _a = this,
          className = _a.className,
          children = _a.children;
        if (className === targetClassName) {
          result.push(this);
        }
        if (children) {
          children.forEach(function (child) {
            result.push.apply(result, child.getElementsByClassName(targetClassName));
          });
        }
        return result;
      };
      return NodeTree;
    }();
    // 展开数组
    function extendMap(arr, fn) {
      if (!arr) {
        return arr;
      }
      var newArray = [];
      if (!isArray(arr)) {
        var rst = fn(arr);
        if (!rst) {
          return newArray;
        }
        if (isArray(rst)) {
          newArray = newArray.concat(rst);
        } else {
          newArray.push(rst);
        }
        return newArray;
      }
      for (var i = 0; i < arr.length; i++) {
        var element = arr[i];
        if (isArray(element)) {
          newArray = newArray.concat(extendMap(element, fn));
        } else if (element) {
          var rst = fn(element);
          if (!rst) {
            continue;
          }
          if (isArray(rst)) {
            newArray = newArray.concat(rst);
          } else {
            newArray.push(rst);
          }
        }
      }
      return newArray;
    }
    // 主要是把function节点，全部转换成string标签节点
    function renderJSXElement(element, context, updater) {
      if (!element) return element;
      var px2hd = context.px2hd,
        measureText = context.measureText;
      var type = element.type,
        props = element.props;
      var tag = getWorkTag(type);
      // 只处理 function 组件
      if (tag === FunctionComponent) {
        // @ts-ignore
        var newElement = type(element.props, context, updater);
        // return element if type is string
        return renderJSXElement(newElement, context, updater);
      }
      var className = props.className,
        _a = props.style,
        customStyle = _a === void 0 ? {} : _a,
        attrs = props.attrs,
        newChildren = props.children;
      var style = px2hd(__assign(__assign({}, customStyle), attrs));
      // 文本需要计算文本的宽高来进行flex布局
      if (type === 'text') {
        style.measure = createMeasure(style, measureText);
      }
      // render children first
      var nextChildren = newChildren ? Children.toArray(newChildren).map(function (child) {
        return renderJSXElement(child, context, updater);
      }) : [];
      return {
        type: type,
        className: className,
        children: nextChildren.filter(Boolean),
        style: style
      };
    }
    // 计算布局
    function computeLayout$1(component, newChildren) {
      var context = component.context,
        updater = component.updater;
      var nodeTree = renderJSXElement(newChildren, context, updater);
      computeLayout(nodeTree);
      // 构造一个 NodeTree, 方便外部使用
      return new NodeTree(nodeTree);
    }
    function createChildNodeTree(parent, vNodeChildren) {
      var tag = parent.tag;
      var children = extendMap(vNodeChildren, function (child) {
        var childTag = child.tag,
          childStyle = child.style,
          childChildren = child.children;
        // 如果组件的根节点不是 flex, 则该组件不需要计算 flex 布局
        if (tag !== Shape$1 && childTag === Shape$1 && childStyle.display !== 'flex') {
          return null;
        }
        // 如果子组件不是 shape，则布局计算时，忽略当前节点
        if (childTag !== Shape$1) {
          return createChildNodeTree(child, childChildren);
        }
        return createNodeTree(child);
      });
      return children;
    }
    // 创建组件的布局树
    function createNodeTree(vNode) {
      var tag = vNode.tag,
        type = vNode.type,
        style = vNode.style,
        context = vNode.context,
        vNodeChildren = vNode.children;
      var measureText = context.measureText;
      var children = createChildNodeTree(vNode, vNodeChildren);
      // 文本需要计算文本的宽高来进行flex布局
      if (type === 'text') {
        style.measure = createMeasure(style, measureText);
      }
      return {
        tag: tag,
        type: type,
        style: style,
        children: children,
        // 保留对 vNode 的引用，用于把布局结果回填
        vNode: vNode
      };
    }
    function fillElementLayout(node) {
      var type = node.type,
        style = node.style,
        vNode = node.vNode,
        children = node.children,
        layout = node.layout;
      var attrs = getShapeAttrs(type, layout);
      if (style.measure) {
        delete style.measure;
      }
      // 更新布局和样式
      vNode.layout = layout;
      vNode.style = __assign(__assign({}, attrs), style);
      if (!children || !children.length) {
        return;
      }
      for (var i = 0, len = children.length; i < len; i++) {
        var child = children[i];
        fillElementLayout(child);
      }
    }
    function fillComponentLayout(vNode) {
      var layout = vNode.layout,
        vNodeChildren = vNode.children;
      Children.map(vNodeChildren, function (child) {
        if (!child) {
          return;
        }
        var childTag = child.tag,
          childLayout = child.layout,
          style = child.style;
        if (childTag !== Shape$1 && layout && !childLayout) {
          child.layout = layout;
          child.style = __assign({
            width: layout.width,
            height: layout.height
          }, style);
        }
        fillComponentLayout(child);
      });
    }

    function pickElement(element) {
      if (!element) return element;
      return Children.map(element, function (item) {
        if (!item) return item;
        // 只需要这几个元素就可以了
        return pick(item, ['key', 'ref', 'type', 'props']);
      });
    }
    function getStyle$1(tagType, props, context) {
      var _a = props.style,
        customStyle = _a === void 0 ? {} : _a,
        attrs = props.attrs,
        zIndex = props.zIndex;
      if (tagType === Shape$1) {
        return context.px2hd(__assign(__assign({}, customStyle), attrs));
      }
      if (isNumber(zIndex)) {
        return {
          zIndex: zIndex
        };
      }
      return {};
    }
    // vnode 上的 context 做父子节点的 context 传递
    function readVNodeContext(vNodeType, parentContext) {
      // @ts-ignore
      var contextInjecter = vNodeType.contextInjecter;
      if (!contextInjecter) {
        return parentContext;
      }
      // copy parentContext
      return __assign({}, parentContext);
    }
    // component 上的 context 是实际使用的 context
    function readComponentContext(vNodeType, vNodeContext) {
      // @ts-ignore
      var contextType = vNodeType.contextType;
      if (!contextType) {
        return vNodeContext;
      }
      var _currentValue = contextType._currentValue;
      if (!_currentValue) {
        return vNodeContext;
      }
      return _currentValue;
    }
    function createVNode(parent, vNode) {
      var canvas = parent.canvas,
        parentContext = parent.context,
        updater = parent.updater,
        parentAnimate = parent.animate;
      var ref = vNode.ref,
        type = vNode.type,
        originProps = vNode.props;
      var animate = originProps.animate,
        transformFrom = originProps.transformFrom,
        props = __rest(originProps, ["animate", "transformFrom"]);
      var tag = getWorkTag(type);
      var context = readVNodeContext(type, parentContext);
      var animator = new Animator();
      var style = getStyle$1(tag, props, context);
      animator.vNode = vNode;
      vNode.parent = parent;
      vNode.tag = tag;
      vNode.style = style;
      vNode.context = context;
      vNode.updater = updater;
      vNode.canvas = canvas;
      vNode.animate = isBoolean(animate) ? animate : parentAnimate;
      vNode.animator = animator;
      // shape 标签
      if (tag === Shape$1) {
        var shape = createShape(type, __assign(__assign({}, props), {
          style: style
        }));
        if (ref) {
          ref.current = shape;
        }
        // @ts-ignore
        shape._vNode = vNode; // shape 保留 vNode 的引用
        vNode.shape = shape;
      } else {
        var componentContext = readComponentContext(type, context);
        // 组件
        var component = void 0;
        if (tag === ClassComponent) {
          // @ts-ignore
          component = new type(props, componentContext, updater);
        } else {
          component = new Component(props, componentContext, updater);
          component.render = function () {
            // @ts-ignore update的时候用最新的context
            return type(this.props, this.context, updater);
          };
        }
        var group = new Group();
        component.container = group;
        // 设置ref
        if (ref) {
          ref.current = component;
        }
        component.context = componentContext;
        component.updater = updater;
        component.animator = animator;
        component._vNode = vNode;
        vNode.shape = group;
        vNode.component = component;
      }
      if (transformFrom && transformFrom.current) {
        var transformVNode = transformFrom.current._vNode;
        vNode.transform = findClosestShapeNode(transformVNode);
        if (vNode.transform) {
          vNode.transform.parent.children = null;
        }
      }
      return vNode;
    }
    function updateVNode(parent, nextNode, lastNode) {
      var canvas = parent.canvas,
        context = parent.context,
        updater = parent.updater,
        parentAnimate = parent.animate;
      var tag = lastNode.tag,
        animator = lastNode.animator,
        component = lastNode.component,
        shape = lastNode.shape,
        children = lastNode.children,
        lastProps = lastNode.props;
      var type = nextNode.type,
        props = nextNode.props;
      var animate = props.animate;
      animator.vNode = nextNode;
      nextNode.parent = parent;
      nextNode.tag = tag;
      nextNode.canvas = canvas;
      nextNode.context = readVNodeContext(type, context);
      nextNode.updater = updater;
      nextNode.component = component;
      nextNode.shape = updateShape(shape, props, lastProps);
      nextNode.parent = parent;
      nextNode.children = children;
      nextNode.animate = isBoolean(animate) ? animate : parentAnimate;
      nextNode.animator = animator;
      nextNode.style = getStyle$1(tag, props, context);
      // 更新 component
      if (component) {
        component._vNode = nextNode;
      } else {
        // 说明是 shape 标签
        // @ts-ignore
        shape._vNode = nextNode;
      }
      return nextNode;
    }
    function createElement(parent, element) {
      return Children.map(element, function (el) {
        if (!el) return el;
        return createVNode(parent, el);
      });
    }
    function destroyElement(vNode) {
      Children.map(vNode, function (node) {
        if (!node) return;
        var component = node.component,
          children = node.children;
        if (component) {
          component.willUnmount();
          destroyElement(children);
          component.didUnmount();
          component.destroy();
        } else {
          destroyElement(children);
        }
      });
    }
    function updateElement(parent, nextElement, lastElement) {
      var nextType = nextElement.type,
        nextProps = nextElement.props;
      var lastType = lastElement.type,
        lastProps = lastElement.props;
      if (nextType === lastType) {
        var nextVNode_1 = updateVNode(parent, nextElement, lastElement);
        // props 无变化 和 context 都无变化
        if (equal(nextProps, lastProps) && parent.context === lastElement.context) {
          return null;
        }
        return nextVNode_1;
      }
      var nextVNode = createVNode(parent, nextElement);
      destroyElement(lastElement);
      return nextVNode;
    }
    function diffElement(parent, nextElement, lastElement) {
      if (!nextElement && !lastElement) {
        return null;
      }
      // 删除
      if (!nextElement && lastElement) {
        destroyElement(lastElement);
        return null;
      }
      // 新建
      if (nextElement && !lastElement) {
        return createElement(parent, nextElement);
      }
      // 更新
      return updateElement(parent, nextElement, lastElement);
    }
    function renderComponentNodes(componentNodes) {
      if (!componentNodes || !componentNodes.length) {
        return;
      }
      // 1. shouldUpdate & willReceiveProps
      var shouldProcessChildren = componentNodes.filter(function (node) {
        var type = node.type,
          component = node.component,
          props = node.props,
          context = node.context,
          layout = node.layout;
        // 更新组件 layout
        component.layout = layout;
        // 新创建的 component
        if (!component.isMounted) return true;
        // 不需要更新
        if (component.shouldUpdate(props) === false) {
          return false;
        }
        var componentContext = readComponentContext(type, context);
        component.willReceiveProps(props, componentContext);
        component.props = props;
        component.context = context;
        return true;
      });
      if (!shouldProcessChildren.length) {
        return;
      }
      // 2. willMount / willUpdate
      shouldProcessChildren.forEach(function (child) {
        var component = child.component;
        if (!component.isMounted) {
          component.willMount();
        } else {
          component.willUpdate();
        }
      });
      // 3. render
      shouldProcessChildren.forEach(function (child) {
        var canvas = child.canvas,
          component = child.component,
          children = child.children;
        var newChildren = canvas.toRawChildren(component.render());
        renderChildren(child, newChildren, children);
        if (!component.isMounted) {
          component.didMount();
          component.isMounted = true;
        } else {
          component.didUpdate();
        }
      });
    }
    function renderVNode(vNode, nextChildren, lastChildren) {
      var component = vNode.component;
      // 不修改原始对象，这里重新 pick 一次，
      var newChildren = pickElement(nextChildren);
      // 设置新的 children
      vNode.children = newChildren;
      // 如果是组件，需要同时更新组件的 children
      // 等同于 vNode.tag === ClassComponent || vNode.tag === FunctionComponent
      if (component) {
        component.children = newChildren;
      }
      var componentNodeChildren = [];
      Children.compare(newChildren, lastChildren, function (next, last) {
        var element = diffElement(vNode, next, last);
        Children.map(element, function (child) {
          if (!child) return;
          var tag = child.tag,
            childProps = child.props,
            childLastChildren = child.children;
          var childrenNode = [];
          if (tag === Shape$1) {
            childrenNode = renderVNode(child, childProps.children, childLastChildren);
          } else {
            childrenNode = [child];
          }
          componentNodeChildren = componentNodeChildren.concat(childrenNode);
        });
      });
      return componentNodeChildren;
    }
    function renderChildren(parent, nextChildren, lastChildren) {
      // 返回的都是 classComponent 的节点
      var componentNodeChildren = renderVNode(parent, nextChildren, lastChildren);
      // 计算 flex 布局
      var nodeTree = createNodeTree(parent);
      computeLayout(nodeTree);
      fillElementLayout(nodeTree);
      fillComponentLayout(parent);
      var newChildren = parent.children;
      if (!componentNodeChildren.length) {
        return newChildren;
      }
      renderComponentNodes(componentNodeChildren);
      return newChildren;
    }
    function render(vNode) {
      var lastChildren = vNode.children,
        props = vNode.props;
      var nextChildren = props.children;
      // render 节点
      var children = renderChildren(vNode, nextChildren, lastChildren);
      // 创建动画
      var childrenAnimation = createAnimation(vNode, children, lastChildren);
      // 执行动画
      if (childrenAnimation.length) {
        childrenAnimation.forEach(function (animator) {
          animator.run();
        });
      }
    }
    // setState 触发的更新
    function updateComponents(components) {
      if (!components.length) return;
      components.forEach(function (component) {
        var vNode = component._vNode,
          lastChildren = component.children,
          props = component.props,
          animator = component.animator;
        // 是否需要更新
        if (component.shouldUpdate(props) === false) {
          return false;
        }
        component.willUpdate();
        var canvas = vNode.canvas;
        var newChildren = canvas.toRawChildren(component.render());
        var nextChildren = renderChildren(vNode, newChildren, lastChildren);
        // 更新 children
        component.children = nextChildren;
        vNode.children = nextChildren;
        // 创建动画
        var childrenAnimation = createAnimation(vNode, nextChildren, lastChildren);
        if (childrenAnimation.length) {
          animator.children = childrenAnimation;
        }
        // 执行动画
        animator.run();
        component.didUpdate();
      });
    }
    function getUpdateAnimation(component, newChildren, keyFrame) {
      var preNode = component.preNode;
      var lastChildren = preNode.children,
        props = preNode.props;
      // 是否需要更新
      if (component.shouldUpdate(props) === false) {
        return false;
      }
      component.willUpdate();
      var nextChildren = renderChildren(preNode, newChildren, lastChildren);
      // 更新 children
      component.preNode.children = nextChildren;
      // 创建动画
      var childrenAnimation = createAnimation(preNode, nextChildren, lastChildren);
      component.didUpdate();
      // 处理 animator
      var animUnits = calAnimationTime(childrenAnimation, keyFrame);
      return animUnits;
    }

    function generatePath$6(context, parsedStyle) {
        var r = parsedStyle.r;
        context.arc(r, r, r, 0, Math.PI * 2, false);
    }

    function generatePath$5(context, parsedStyle) {
        var rxInPixels = parsedStyle.rx, ryInPixels = parsedStyle.ry;
        var rx = rxInPixels;
        var ry = ryInPixels;
        // @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/ellipse
        if (context.ellipse) {
            context.ellipse(rx, ry, rx, ry, 0, 0, Math.PI * 2, false);
        }
        else {
            // 如果不支持，则使用圆来绘制，进行变形
            var r = rx > ry ? rx : ry;
            var scaleX = rx > ry ? 1 : rx / ry;
            var scaleY = rx > ry ? ry / rx : 1;
            context.save();
            context.scale(scaleX, scaleY);
            context.arc(r, r, r, 0, Math.PI * 2);
        }
    }

    function generatePath$4(context, parsedStyle) {
        var x1 = parsedStyle.x1, y1 = parsedStyle.y1, x2 = parsedStyle.x2, y2 = parsedStyle.y2, _a = parsedStyle.defX, defX = _a === void 0 ? 0 : _a, _b = parsedStyle.defY, defY = _b === void 0 ? 0 : _b, markerStart = parsedStyle.markerStart, markerEnd = parsedStyle.markerEnd, markerStartOffset = parsedStyle.markerStartOffset, markerEndOffset = parsedStyle.markerEndOffset;
        var startOffsetX = 0;
        var startOffsetY = 0;
        var endOffsetX = 0;
        var endOffsetY = 0;
        var rad = 0;
        var x;
        var y;
        if (markerStart && isDisplayObject(markerStart) && markerStartOffset) {
            x = x2 - x1;
            y = y2 - y1;
            rad = Math.atan2(y, x);
            startOffsetX = Math.cos(rad) * (markerStartOffset || 0);
            startOffsetY = Math.sin(rad) * (markerStartOffset || 0);
        }
        if (markerEnd && isDisplayObject(markerEnd) && markerEndOffset) {
            x = x1 - x2;
            y = y1 - y2;
            rad = Math.atan2(y, x);
            endOffsetX = Math.cos(rad) * (markerEndOffset || 0);
            endOffsetY = Math.sin(rad) * (markerEndOffset || 0);
        }
        context.moveTo(x1 - defX + startOffsetX, y1 - defY + startOffsetY);
        context.lineTo(x2 - defX + endOffsetX, y2 - defY + endOffsetY);
    }

    function generatePath$3(context, parsedStyle) {
        var _a = parsedStyle.defX, defX = _a === void 0 ? 0 : _a, _b = parsedStyle.defY, defY = _b === void 0 ? 0 : _b, markerStart = parsedStyle.markerStart, markerEnd = parsedStyle.markerEnd, markerStartOffset = parsedStyle.markerStartOffset, markerEndOffset = parsedStyle.markerEndOffset;
        var _c = parsedStyle.path, absolutePath = _c.absolutePath, segments = _c.segments;
        var startOffsetX = 0;
        var startOffsetY = 0;
        var endOffsetX = 0;
        var endOffsetY = 0;
        var rad = 0;
        var x;
        var y;
        if (markerStart && isDisplayObject(markerStart) && markerStartOffset) {
            var _d = __read(markerStart.parentNode.getStartTangent(), 2), p1 = _d[0], p2 = _d[1];
            x = p1[0] - p2[0];
            y = p1[1] - p2[1];
            rad = Math.atan2(y, x);
            startOffsetX = Math.cos(rad) * (markerStartOffset || 0);
            startOffsetY = Math.sin(rad) * (markerStartOffset || 0);
        }
        if (markerEnd && isDisplayObject(markerEnd) && markerEndOffset) {
            var _e = __read(markerEnd.parentNode.getEndTangent(), 2), p1 = _e[0], p2 = _e[1];
            x = p1[0] - p2[0];
            y = p1[1] - p2[1];
            rad = Math.atan2(y, x);
            endOffsetX = Math.cos(rad) * (markerEndOffset || 0);
            endOffsetY = Math.sin(rad) * (markerEndOffset || 0);
        }
        for (var i = 0; i < absolutePath.length; i++) {
            var params = absolutePath[i];
            var command = params[0];
            var nextSegment = absolutePath[i + 1];
            var useStartOffset = i === 0 && (startOffsetX !== 0 || startOffsetY !== 0);
            var useEndOffset = (i === absolutePath.length - 1 ||
                (nextSegment && (nextSegment[0] === 'M' || nextSegment[0] === 'Z'))) &&
                endOffsetX !== 0 &&
                endOffsetY !== 0;
            switch (command) {
                case 'M':
                    // Use start marker offset
                    if (useStartOffset) {
                        context.moveTo(params[1] - defX + startOffsetX, params[2] - defY + startOffsetY);
                        context.lineTo(params[1] - defX, params[2] - defY);
                    }
                    else {
                        context.moveTo(params[1] - defX, params[2] - defY);
                    }
                    break;
                case 'L':
                    if (useEndOffset) {
                        context.lineTo(params[1] - defX + endOffsetX, params[2] - defY + endOffsetY);
                    }
                    else {
                        context.lineTo(params[1] - defX, params[2] - defY);
                    }
                    break;
                case 'Q':
                    context.quadraticCurveTo(params[1] - defX, params[2] - defY, params[3] - defX, params[4] - defY);
                    if (useEndOffset) {
                        context.lineTo(params[3] - defX + endOffsetX, params[4] - defY + endOffsetY);
                    }
                    break;
                case 'C':
                    context.bezierCurveTo(params[1] - defX, params[2] - defY, params[3] - defX, params[4] - defY, params[5] - defX, params[6] - defY);
                    if (useEndOffset) {
                        context.lineTo(params[5] - defX + endOffsetX, params[6] - defY + endOffsetY);
                    }
                    break;
                case 'A': {
                    var arcParams = segments[i].arcParams;
                    var cx = arcParams.cx, cy = arcParams.cy, rx = arcParams.rx, ry = arcParams.ry, startAngle = arcParams.startAngle, endAngle = arcParams.endAngle, xRotation = arcParams.xRotation, sweepFlag = arcParams.sweepFlag;
                    // @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/ellipse
                    if (context.ellipse) {
                        context.ellipse(cx - defX, cy - defY, rx, ry, xRotation, startAngle, endAngle, !!(1 - sweepFlag));
                    }
                    else {
                        // @see https://stackoverflow.com/a/47494351
                        var r = rx > ry ? rx : ry;
                        var scaleX = rx > ry ? 1 : rx / ry;
                        var scaleY = rx > ry ? ry / rx : 1;
                        context.translate(cx - defX, cy - defY);
                        context.rotate(xRotation);
                        context.scale(scaleX, scaleY);
                        context.arc(0, 0, r, startAngle, endAngle, !!(1 - sweepFlag));
                        context.scale(1 / scaleX, 1 / scaleY);
                        context.rotate(-xRotation);
                        context.translate(-(cx - defX), -(cy - defY));
                    }
                    if (useEndOffset) {
                        context.lineTo(params[6] - defX + endOffsetX, params[7] - defY + endOffsetY);
                    }
                    break;
                }
                case 'Z':
                    context.closePath();
                    break;
            }
        }
    }

    function generatePath$2(context, parsedStyle) {
        var _a = parsedStyle.defX, defX = _a === void 0 ? 0 : _a, _b = parsedStyle.defY, defY = _b === void 0 ? 0 : _b, markerStart = parsedStyle.markerStart, markerEnd = parsedStyle.markerEnd, markerStartOffset = parsedStyle.markerStartOffset, markerEndOffset = parsedStyle.markerEndOffset;
        var points = parsedStyle.points.points;
        var length = points.length;
        var x1 = points[0][0] - defX;
        var y1 = points[0][1] - defY;
        var x2 = points[length - 1][0] - defX;
        var y2 = points[length - 1][1] - defY;
        var startOffsetX = 0;
        var startOffsetY = 0;
        var endOffsetX = 0;
        var endOffsetY = 0;
        var rad = 0;
        var x;
        var y;
        if (markerStart && isDisplayObject(markerStart) && markerStartOffset) {
            x = points[1][0] - points[0][0];
            y = points[1][1] - points[0][1];
            rad = Math.atan2(y, x);
            startOffsetX = Math.cos(rad) * (markerStartOffset || 0);
            startOffsetY = Math.sin(rad) * (markerStartOffset || 0);
        }
        if (markerEnd && isDisplayObject(markerEnd) && markerEndOffset) {
            x = points[length - 1][0] - points[0][0];
            y = points[length - 1][1] - points[0][1];
            rad = Math.atan2(y, x);
            endOffsetX = Math.cos(rad) * (markerEndOffset || 0);
            endOffsetY = Math.sin(rad) * (markerEndOffset || 0);
        }
        context.moveTo(x1 + (startOffsetX || endOffsetX), y1 + (startOffsetY || endOffsetY));
        for (var i = 1; i < length - 1; i++) {
            var point = points[i];
            context.lineTo(point[0] - defX, point[1] - defY);
        }
        context.lineTo(x2, y2);
    }

    function generatePath$1(context, parsedStyle) {
        var _a = parsedStyle.defX, defX = _a === void 0 ? 0 : _a, _b = parsedStyle.defY, defY = _b === void 0 ? 0 : _b, markerStart = parsedStyle.markerStart, markerEnd = parsedStyle.markerEnd, markerStartOffset = parsedStyle.markerStartOffset, markerEndOffset = parsedStyle.markerEndOffset;
        var points = parsedStyle.points.points;
        var length = points.length;
        var x1 = points[0][0] - defX;
        var y1 = points[0][1] - defY;
        var x2 = points[length - 1][0] - defX;
        var y2 = points[length - 1][1] - defY;
        var startOffsetX = 0;
        var startOffsetY = 0;
        var endOffsetX = 0;
        var endOffsetY = 0;
        var rad = 0;
        var x;
        var y;
        if (markerStart && isDisplayObject(markerStart) && markerStartOffset) {
            x = points[1][0] - points[0][0];
            y = points[1][1] - points[0][1];
            rad = Math.atan2(y, x);
            startOffsetX = Math.cos(rad) * (markerStartOffset || 0);
            startOffsetY = Math.sin(rad) * (markerStartOffset || 0);
        }
        if (markerEnd && isDisplayObject(markerEnd) && markerEndOffset) {
            x = points[length - 2][0] - points[length - 1][0];
            y = points[length - 2][1] - points[length - 1][1];
            rad = Math.atan2(y, x);
            endOffsetX = Math.cos(rad) * (markerEndOffset || 0);
            endOffsetY = Math.sin(rad) * (markerEndOffset || 0);
        }
        context.moveTo(x1 + startOffsetX, y1 + startOffsetY);
        for (var i = 1; i < length - 1; i++) {
            var point = points[i];
            context.lineTo(point[0] - defX, point[1] - defY);
        }
        context.lineTo(x2 + endOffsetX, y2 + endOffsetY);
    }

    function generatePath(context, parsedStyle) {
        var radius = parsedStyle.radius, width = parsedStyle.width, height = parsedStyle.height;
        var w = width;
        var h = height;
        var hasRadius = radius && radius.some(function (r) { return r !== 0; });
        if (!hasRadius) {
            // Canvas support negative width/height of rect
            context.rect(0, 0, w, h);
        }
        else {
            var signX = width > 0 ? 1 : -1;
            var signY = height > 0 ? 1 : -1;
            var sweepFlag = signX + signY === 0;
            var _a = __read(radius.map(function (r) {
                return clamp(r, 0, Math.min(Math.abs(w) / 2, Math.abs(h) / 2));
            }), 4), tlr = _a[0], trr = _a[1], brr = _a[2], blr = _a[3];
            context.moveTo(signX * tlr, 0);
            context.lineTo(w - signX * trr, 0);
            if (trr !== 0) {
                context.arc(w - signX * trr, signY * trr, trr, (-signY * Math.PI) / 2, signX > 0 ? 0 : Math.PI, sweepFlag);
            }
            context.lineTo(w, h - signY * brr);
            if (brr !== 0) {
                context.arc(w - signX * brr, h - signY * brr, brr, signX > 0 ? 0 : Math.PI, signY > 0 ? Math.PI / 2 : 1.5 * Math.PI, sweepFlag);
            }
            context.lineTo(signX * blr, h);
            if (blr !== 0) {
                context.arc(signX * blr, h - signY * blr, blr, signY > 0 ? Math.PI / 2 : -Math.PI / 2, signX > 0 ? Math.PI : 0, sweepFlag);
            }
            context.lineTo(0, signY * tlr);
            if (tlr !== 0) {
                context.arc(signX * tlr, signY * tlr, tlr, signX > 0 ? Math.PI : 0, signY > 0 ? Math.PI * 1.5 : Math.PI / 2, sweepFlag);
            }
        }
    }

    var Plugin = /** @class */ (function (_super) {
        __extends(Plugin, _super);
        function Plugin() {
            var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
            _this.name = 'canvas-path-generator';
            return _this;
        }
        Plugin.prototype.init = function () {
            var _a;
            var pathGeneratorFactory = (_a = {},
                _a[Shape.CIRCLE] = generatePath$6,
                _a[Shape.ELLIPSE] = generatePath$5,
                _a[Shape.RECT] = generatePath,
                _a[Shape.LINE] = generatePath$4,
                _a[Shape.POLYLINE] = generatePath$1,
                _a[Shape.POLYGON] = generatePath$2,
                _a[Shape.PATH] = generatePath$3,
                _a[Shape.TEXT] = undefined,
                _a[Shape.GROUP] = undefined,
                _a[Shape.IMAGE] = undefined,
                _a[Shape.HTML] = undefined,
                _a[Shape.MESH] = undefined,
                _a);
            // @ts-ignore
            this.context.pathGeneratorFactory = pathGeneratorFactory;
        };
        Plugin.prototype.destroy = function () {
            // @ts-ignore
            delete this.context.pathGeneratorFactory;
        };
        return Plugin;
    }(AbstractRendererPlugin));

    var tmpVec3a = create$2();
    var tmpVec3b = create$2();
    var tmpVec3c = create$2();
    var tmpMat4$1 = create$1();
    /**
     * pick shape(s) with Mouse/Touch event
     *
     * 1. find AABB with r-tree
     * 2. do math calculation with geometry in an accurate way
     */
    var CanvasPickerPlugin = /** @class */ (function () {
        function CanvasPickerPlugin() {
            var _this = this;
            this.isHit = function (displayObject, position, worldTransform, isClipPath) {
                // use picker for current shape's type
                var pick = _this.context.pointInPathPickerFactory[displayObject.nodeName];
                if (pick) {
                    // invert with world matrix
                    var invertWorldMat = invert(tmpMat4$1, worldTransform);
                    // transform client position to local space, do picking in local space
                    var localPosition = transformMat4(tmpVec3b, set$1(tmpVec3c, position[0], position[1], 0), invertWorldMat);
                    // account for anchor
                    var halfExtents = displayObject.getGeometryBounds().halfExtents;
                    var anchor = displayObject.parsedStyle.anchor;
                    localPosition[0] += ((anchor && anchor[0]) || 0) * halfExtents[0] * 2;
                    localPosition[1] += ((anchor && anchor[1]) || 0) * halfExtents[1] * 2;
                    if (pick(displayObject, new Point(localPosition[0], localPosition[1]), isClipPath, _this.isPointInPath, _this.context, _this.runtime)) {
                        return true;
                    }
                }
                return false;
            };
            /**
             * use native picking method
             * @see https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/isPointInPath
             */
            this.isPointInPath = function (displayObject, position) {
                var context = _this.runtime.offscreenCanvasCreator.getOrCreateContext(_this.context.config.offscreenCanvas);
                var generatePath = _this.context.pathGeneratorFactory[displayObject.nodeName];
                if (generatePath) {
                    context.beginPath();
                    generatePath(context, displayObject.parsedStyle);
                    context.closePath();
                }
                return context.isPointInPath(position.x, position.y);
            };
        }
        CanvasPickerPlugin.prototype.apply = function (context, runtime) {
            var _this = this;
            var _a;
            var renderingService = context.renderingService, renderingContext = context.renderingContext;
            this.context = context;
            this.runtime = runtime;
            var document = (_a = renderingContext.root) === null || _a === void 0 ? void 0 : _a.ownerDocument;
            renderingService.hooks.pick.tapPromise(CanvasPickerPlugin.tag, function (result) { return __awaiter(_this, void 0, void 0, function () {
                return __generator(this, function (_a) {
                    return [2 /*return*/, this.pick(document, result)];
                });
            }); });
            renderingService.hooks.pickSync.tap(CanvasPickerPlugin.tag, function (result) {
                return _this.pick(document, result);
            });
        };
        CanvasPickerPlugin.prototype.pick = function (document, result) {
            var e_1, _a;
            var topmost = result.topmost, _b = result.position, x = _b.x, y = _b.y;
            // position in world space
            var position = set$1(tmpVec3a, x, y, 0);
            // query by AABB first with spatial index(r-tree)
            var hitTestList = document.elementsFromBBox(position[0], position[1], position[0], position[1]);
            // test with clip path & origin shape
            // @see https://github.com/antvis/g/issues/1064
            var pickedDisplayObjects = [];
            try {
                for (var hitTestList_1 = __values(hitTestList), hitTestList_1_1 = hitTestList_1.next(); !hitTestList_1_1.done; hitTestList_1_1 = hitTestList_1.next()) {
                    var displayObject = hitTestList_1_1.value;
                    var worldTransform = displayObject.getWorldTransform();
                    var isHitOriginShape = this.isHit(displayObject, position, worldTransform, false);
                    if (isHitOriginShape) {
                        // should look up in the ancestor node
                        var clipped = findClosestClipPathTarget(displayObject);
                        if (clipped) {
                            var clipPath = clipped.parsedStyle.clipPath;
                            var isHitClipPath = this.isHit(clipPath, position, clipPath.getWorldTransform(), true);
                            if (isHitClipPath) {
                                if (topmost) {
                                    result.picked = [displayObject];
                                    return result;
                                }
                                else {
                                    pickedDisplayObjects.push(displayObject);
                                }
                            }
                        }
                        else {
                            if (topmost) {
                                result.picked = [displayObject];
                                return result;
                            }
                            else {
                                pickedDisplayObjects.push(displayObject);
                            }
                        }
                    }
                }
            }
            catch (e_1_1) { e_1 = { error: e_1_1 }; }
            finally {
                try {
                    if (hitTestList_1_1 && !hitTestList_1_1.done && (_a = hitTestList_1.return)) _a.call(hitTestList_1);
                }
                finally { if (e_1) throw e_1.error; }
            }
            result.picked = pickedDisplayObjects;
            return result;
        };
        CanvasPickerPlugin.tag = 'CanvasPicker';
        return CanvasPickerPlugin;
    }());

    function isPointInPath$7(displayObject, position, isClipPath) {
        var _a = displayObject.parsedStyle, r = _a.r, fill = _a.fill, stroke = _a.stroke, lineWidth = _a.lineWidth, increasedLineWidthForHitTesting = _a.increasedLineWidthForHitTesting, pointerEvents = _a.pointerEvents;
        var halfLineWidth = ((lineWidth || 0) + (increasedLineWidthForHitTesting || 0)) / 2;
        var absDistance = distance$1(r, r, position.x, position.y);
        var _b = __read(isFillOrStrokeAffected(pointerEvents, fill, stroke), 2), hasFill = _b[0], hasStroke = _b[1];
        if ((hasFill && hasStroke) || isClipPath) {
            return absDistance <= r + halfLineWidth;
        }
        if (hasFill) {
            return absDistance <= r;
        }
        if (hasStroke) {
            return absDistance >= r - halfLineWidth && absDistance <= r + halfLineWidth;
        }
        return false;
    }

    function ellipseDistance(squareX, squareY, rx, ry) {
        return squareX / (rx * rx) + squareY / (ry * ry);
    }
    function isPointInPath$6(displayObject, position, isClipPath) {
        var _a = displayObject.parsedStyle, rx = _a.rx, ry = _a.ry, fill = _a.fill, stroke = _a.stroke, lineWidth = _a.lineWidth, increasedLineWidthForHitTesting = _a.increasedLineWidthForHitTesting, pointerEvents = _a.pointerEvents;
        var x = position.x, y = position.y;
        var _b = __read(isFillOrStrokeAffected(pointerEvents, fill, stroke), 2), hasFill = _b[0], hasStroke = _b[1];
        var halfLineWith = ((lineWidth || 0) + (increasedLineWidthForHitTesting || 0)) / 2;
        var squareX = (x - rx) * (x - rx);
        var squareY = (y - ry) * (y - ry);
        // 使用椭圆的公式： x*x/rx*rx + y*y/ry*ry = 1;
        if ((hasFill && hasStroke) || isClipPath) {
            return (ellipseDistance(squareX, squareY, rx + halfLineWith, ry + halfLineWith) <=
                1);
        }
        if (hasFill) {
            return ellipseDistance(squareX, squareY, rx, ry) <= 1;
        }
        if (hasStroke) {
            return (ellipseDistance(squareX, squareY, rx - halfLineWith, ry - halfLineWith) >=
                1 &&
                ellipseDistance(squareX, squareY, rx + halfLineWith, ry + halfLineWith) <=
                    1);
        }
        return false;
    }

    function inBox(minX, minY, width, height, x, y) {
        return x >= minX && x <= minX + width && y >= minY && y <= minY + height;
    }
    function inRect(minX, minY, width, height, lineWidth, x, y) {
        var halfWidth = lineWidth / 2;
        // 将四个边看做矩形来检测，比边的检测算法要快
        return (inBox(minX - halfWidth, minY - halfWidth, width, lineWidth, x, y) || // 上边
            inBox(minX + width - halfWidth, minY - halfWidth, lineWidth, height, x, y) || // 右边
            inBox(minX + halfWidth, minY + height - halfWidth, width, lineWidth, x, y) || // 下边
            inBox(minX - halfWidth, minY + halfWidth, lineWidth, height, x, y)); // 左边
    }
    function inArc(cx, cy, r, startAngle, endAngle, lineWidth, x, y) {
        var angle = (Math.atan2(y - cy, x - cx) + Math.PI * 2) % (Math.PI * 2); // 转换到 0 - 2 * Math.PI 之间
        // if (angle < startAngle || angle > endAngle) {
        //   return false;
        // }
        var point = {
            x: cx + r * Math.cos(angle),
            y: cy + r * Math.sin(angle),
        };
        return distance$1(point.x, point.y, x, y) <= lineWidth / 2;
    }
    function inLine(x1, y1, x2, y2, lineWidth, x, y) {
        var minX = Math.min(x1, x2);
        var maxX = Math.max(x1, x2);
        var minY = Math.min(y1, y2);
        var maxY = Math.max(y1, y2);
        var halfWidth = lineWidth / 2;
        // 因为目前的方案是计算点到直线的距离，而有可能会在延长线上，所以要先判断是否在包围盒内
        // 这种方案会在水平或者竖直的情况下载线的延长线上有半 lineWidth 的误差
        if (!(x >= minX - halfWidth &&
            x <= maxX + halfWidth &&
            y >= minY - halfWidth &&
            y <= maxY + halfWidth)) {
            return false;
        }
        // 因为已经计算了包围盒，所以仅需要计算到直线的距离即可，可以显著提升性能
        return pointToLine(x1, y1, x2, y2, x, y) <= lineWidth / 2;
    }
    function inPolyline(points, lineWidth, x, y, isClose) {
        var count = points.length;
        if (count < 2) {
            return false;
        }
        for (var i = 0; i < count - 1; i++) {
            var x1 = points[i][0];
            var y1 = points[i][1];
            var x2 = points[i + 1][0];
            var y2 = points[i + 1][1];
            if (inLine(x1, y1, x2, y2, lineWidth, x, y)) {
                return true;
            }
        }
        // 如果封闭，则计算起始点和结束点的边
        if (isClose) {
            var first = points[0];
            var last = points[count - 1];
            if (inLine(first[0], first[1], last[0], last[1], lineWidth, x, y)) {
                return true;
            }
        }
        return false;
    }
    // 多边形的射线检测，参考：https://blog.csdn.net/WilliamSun0122/article/details/77994526
    var tolerance = 1e-6;
    // 三态函数，判断两个double在eps精度下的大小关系
    function dcmp(x) {
        if (Math.abs(x) < tolerance) {
            return 0;
        }
        return x < 0 ? -1 : 1;
    }
    // 判断点Q是否在p1和p2的线段上
    function onSegment(p1, p2, q) {
        if ((q[0] - p1[0]) * (p2[1] - p1[1]) === (p2[0] - p1[0]) * (q[1] - p1[1]) &&
            Math.min(p1[0], p2[0]) <= q[0] &&
            q[0] <= Math.max(p1[0], p2[0]) &&
            Math.min(p1[1], p2[1]) <= q[1] &&
            q[1] <= Math.max(p1[1], p2[1])) {
            return true;
        }
        return false;
    }
    // 判断点P在多边形内-射线法
    function inPolygon(points, x, y) {
        var isHit = false;
        var n = points.length;
        if (n <= 2) {
            // svg 中点小于 3 个时，不显示，也无法被拾取
            return false;
        }
        for (var i = 0; i < n; i++) {
            var p1 = points[i];
            var p2 = points[(i + 1) % n];
            if (onSegment(p1, p2, [x, y])) {
                // 点在多边形一条边上
                return true;
            }
            // 前一个判断min(p1[1],p2[1])<P.y<=max(p1[1],p2[1])
            // 后一个判断被测点 在 射线与边交点 的左边
            if (dcmp(p1[1] - y) > 0 !== dcmp(p2[1] - y) > 0 &&
                dcmp(x - ((y - p1[1]) * (p1[0] - p2[0])) / (p1[1] - p2[1]) - p1[0]) < 0) {
                isHit = !isHit;
            }
        }
        return isHit;
    }
    function inPolygons(polygons, x, y) {
        var isHit = false;
        for (var i = 0; i < polygons.length; i++) {
            var points = polygons[i];
            isHit = inPolygon(points, x, y);
            if (isHit) {
                break;
            }
        }
        return isHit;
    }

    function isPointInPath$5(displayObject, position, isClipPath) {
        var _a = displayObject.parsedStyle, x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2, lineWidth = _a.lineWidth, increasedLineWidthForHitTesting = _a.increasedLineWidthForHitTesting, _b = _a.defX, x = _b === void 0 ? 0 : _b, _c = _a.defY, y = _c === void 0 ? 0 : _c, pointerEvents = _a.pointerEvents, fill = _a.fill, stroke = _a.stroke;
        var _d = __read(isFillOrStrokeAffected(pointerEvents, fill, stroke), 2), hasStroke = _d[1];
        if ((!hasStroke && !isClipPath) || !lineWidth) {
            return false;
        }
        return inLine(x1, y1, x2, y2, (lineWidth || 0) + (increasedLineWidthForHitTesting || 0), position.x + x, position.y + y);
    }

    // TODO: replace it with method in @antv/util
    function isPointInStroke(segments, lineWidth, px, py, length) {
        var isHit = false;
        var halfWidth = lineWidth / 2;
        for (var i = 0; i < segments.length; i++) {
            var segment = segments[i];
            var currentPoint = segment.currentPoint, params = segment.params, prePoint = segment.prePoint, box = segment.box;
            // 如果在前面已经生成过包围盒，直接按照包围盒计算
            if (box &&
                !inBox(box.x - halfWidth, box.y - halfWidth, box.width + lineWidth, box.height + lineWidth, px, py)) {
                continue;
            }
            switch (segment.command) {
                // L 和 Z 都是直线， M 不进行拾取
                case 'L':
                case 'Z':
                    isHit = inLine(prePoint[0], prePoint[1], currentPoint[0], currentPoint[1], lineWidth, px, py);
                    if (isHit) {
                        return true;
                    }
                    break;
                case 'Q':
                    var qDistance = pointDistance(prePoint[0], prePoint[1], params[1], params[2], params[3], params[4], px, py);
                    isHit = qDistance <= lineWidth / 2;
                    if (isHit) {
                        return true;
                    }
                    break;
                case 'C':
                    var cDistance = pointDistance$3(prePoint[0], // 上一段结束位置, 即 C 的起始点
                    prePoint[1], params[1], // 'C' 的参数，1、2 为第一个控制点，3、4 为第二个控制点，5、6 为结束点
                    params[2], params[3], params[4], params[5], params[6], px, py, length);
                    isHit = cDistance <= lineWidth / 2;
                    if (isHit) {
                        return true;
                    }
                    break;
                case 'A':
                    // cache conversion result
                    if (!segment.cubicParams) {
                        segment.cubicParams = arcToCubic(prePoint[0], prePoint[1], params[1], params[2], params[3], params[4], params[5], params[6], params[7], undefined);
                    }
                    var args = segment.cubicParams;
                    // fixArc
                    var prePointInCubic = prePoint;
                    for (var i_1 = 0; i_1 < args.length; i_1 += 6) {
                        var cDistance_1 = pointDistance$3(prePointInCubic[0], // 上一段结束位置, 即 C 的起始点
                        prePointInCubic[1], args[i_1], args[i_1 + 1], args[i_1 + 2], args[i_1 + 3], args[i_1 + 4], args[i_1 + 5], px, py, length);
                        prePointInCubic = [args[i_1 + 4], args[i_1 + 5]];
                        isHit = cDistance_1 <= lineWidth / 2;
                        if (isHit) {
                            return true;
                        }
                    }
                    break;
            }
        }
        return isHit;
    }
    function isPointInPath$4(displayObject, position, isClipPath, isPointInPath, renderingPluginContext, runtime) {
        var _a = displayObject.parsedStyle, lineWidth = _a.lineWidth, increasedLineWidthForHitTesting = _a.increasedLineWidthForHitTesting, stroke = _a.stroke, fill = _a.fill, _b = _a.defX, x = _b === void 0 ? 0 : _b, _c = _a.defY, y = _c === void 0 ? 0 : _c, path = _a.path, pointerEvents = _a.pointerEvents;
        var segments = path.segments, hasArc = path.hasArc, polylines = path.polylines, polygons = path.polygons;
        var _d = __read(isFillOrStrokeAffected(pointerEvents, 
        // Only a closed path can be filled.
        (polygons === null || polygons === void 0 ? void 0 : polygons.length) && fill, stroke), 2), hasFill = _d[0], hasStroke = _d[1];
        var totalLength = getOrCalculatePathTotalLength(displayObject);
        var isHit = false;
        if (hasFill || isClipPath) {
            if (hasArc) {
                // 存在曲线时，暂时使用 canvas 的 api 计算，后续可以进行多边形切割
                isHit = isPointInPath(displayObject, position);
            }
            else {
                // 提取出来的多边形包含闭合的和非闭合的，在这里统一按照多边形处理
                isHit =
                    inPolygons(polygons, position.x + x, position.y + y) ||
                        inPolygons(polylines, position.x + x, position.y + y);
            }
            return isHit;
        }
        else if (hasStroke || isClipPath) {
            isHit = isPointInStroke(segments, (lineWidth || 0) + (increasedLineWidthForHitTesting || 0), position.x + x, position.y + y, totalLength);
        }
        return isHit;
    }

    function isPointInPath$3(displayObject, position, isClipPath) {
        var _a = displayObject.parsedStyle, stroke = _a.stroke, fill = _a.fill, lineWidth = _a.lineWidth, increasedLineWidthForHitTesting = _a.increasedLineWidthForHitTesting, points = _a.points, _b = _a.defX, x = _b === void 0 ? 0 : _b, _c = _a.defY, y = _c === void 0 ? 0 : _c, pointerEvents = _a.pointerEvents;
        var _d = __read(isFillOrStrokeAffected(pointerEvents, fill, stroke), 2), hasFill = _d[0], hasStroke = _d[1];
        var isHit = false;
        if (hasStroke || isClipPath) {
            isHit = inPolyline(points.points, (lineWidth || 0) + (increasedLineWidthForHitTesting || 0), position.x + x, position.y + y, true);
        }
        if (!isHit && (hasFill || isClipPath)) {
            isHit = inPolygon(points.points, position.x + x, position.y + y);
        }
        return isHit;
    }

    function isPointInPath$2(displayObject, position, isClipPath) {
        var _a = displayObject.parsedStyle, lineWidth = _a.lineWidth, increasedLineWidthForHitTesting = _a.increasedLineWidthForHitTesting, points = _a.points, _b = _a.defX, x = _b === void 0 ? 0 : _b, _c = _a.defY, y = _c === void 0 ? 0 : _c, pointerEvents = _a.pointerEvents, fill = _a.fill, stroke = _a.stroke;
        var _d = __read(isFillOrStrokeAffected(pointerEvents, fill, stroke), 2), hasStroke = _d[1];
        if ((!hasStroke && !isClipPath) || !lineWidth) {
            return false;
        }
        return inPolyline(points.points, (lineWidth || 0) + (increasedLineWidthForHitTesting || 0), position.x + x, position.y + y, false);
    }

    function isPointInPath$1(displayObject, position, isClipPath, isPointInPath, runtime) {
        var _a = displayObject.parsedStyle, radius = _a.radius, fill = _a.fill, stroke = _a.stroke, lineWidth = _a.lineWidth, increasedLineWidthForHitTesting = _a.increasedLineWidthForHitTesting, width = _a.width, height = _a.height, pointerEvents = _a.pointerEvents;
        var _b = __read(isFillOrStrokeAffected(pointerEvents, fill, stroke), 2), hasFill = _b[0], hasStroke = _b[1];
        var hasRadius = radius && radius.some(function (r) { return r !== 0; });
        var lineWidthForHitTesting = (lineWidth || 0) + (increasedLineWidthForHitTesting || 0);
        // 无圆角时的策略
        if (!hasRadius) {
            var halfWidth = lineWidthForHitTesting / 2;
            // 同时填充和带有边框
            if ((hasFill && hasStroke) || isClipPath) {
                return inBox(0 - halfWidth, 0 - halfWidth, width + halfWidth, height + halfWidth, position.x, position.y);
            }
            // 仅填充
            if (hasFill) {
                return inBox(0, 0, width, height, position.x, position.y);
            }
            if (hasStroke) {
                return inRect(0, 0, width, height, lineWidthForHitTesting, position.x, position.y);
            }
        }
        else {
            var isHit = false;
            if (hasStroke || isClipPath) {
                isHit = inRectWithRadius(0, 0, width, height, radius.map(function (r) {
                    return clamp(r, 0, Math.min(Math.abs(width) / 2, Math.abs(height) / 2));
                }), lineWidthForHitTesting, position.x, position.y);
            }
            // 仅填充时带有圆角的矩形直接通过图形拾取
            // 以后可以改成纯数学的近似拾取，将圆弧切割成多边形
            if (!isHit && (hasFill || isClipPath)) {
                isHit = isPointInPath(displayObject, position);
            }
            return isHit;
        }
        return false;
    }
    function inRectWithRadius(minX, minY, width, height, radiusArray, lineWidth, x, y) {
        var _a = __read(radiusArray, 4), tlr = _a[0], trr = _a[1], brr = _a[2], blr = _a[3];
        return (inLine(minX + tlr, minY, minX + width - trr, minY, lineWidth, x, y) ||
            inLine(minX + width, minY + trr, minX + width, minY + height - brr, lineWidth, x, y) ||
            inLine(minX + width - brr, minY + height, minX + blr, minY + height, lineWidth, x, y) ||
            inLine(minX, minY + height - blr, minX, minY + tlr, lineWidth, x, y) ||
            inArc(minX + width - trr, minY + trr, trr, 1.5 * Math.PI, 2 * Math.PI, lineWidth, x, y) ||
            inArc(minX + width - brr, minY + height - brr, brr, 0, 0.5 * Math.PI, lineWidth, x, y) ||
            inArc(minX + blr, minY + height - blr, blr, 0.5 * Math.PI, Math.PI, lineWidth, x, y) ||
            inArc(minX + tlr, minY + tlr, tlr, Math.PI, 1.5 * Math.PI, lineWidth, x, y));
    }

    function isPointInPath(displayObject, position, isClipPath, isPointInPath, renderingPluginContext, runtime) {
        var _a = displayObject.parsedStyle, pointerEvents = _a.pointerEvents, width = _a.width, height = _a.height;
        if (pointerEvents === 'non-transparent-pixel') {
            var offscreenCanvas = renderingPluginContext.config.offscreenCanvas;
            var canvas = runtime.offscreenCanvasCreator.getOrCreateCanvas(offscreenCanvas);
            var context = runtime.offscreenCanvasCreator.getOrCreateContext(offscreenCanvas, {
                willReadFrequently: true,
            });
            canvas.width = width;
            canvas.height = height;
            renderingPluginContext.defaultStyleRendererFactory[Shape.IMAGE].render(context, displayObject.parsedStyle, displayObject, undefined, undefined, undefined);
            var imagedata = context.getImageData(position.x, position.y, 1, 1).data;
            return imagedata.every(function (component) { return component !== 0; });
        }
        return true;
    }

    var Plugin$1 = /** @class */ (function (_super) {
        __extends(Plugin, _super);
        function Plugin() {
            var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
            _this.name = 'canvas-picker';
            return _this;
        }
        Plugin.prototype.init = function () {
            var _a;
            var trueFunc = function () { return true; };
            var pointInPathPickerFactory = (_a = {},
                _a[Shape.CIRCLE] = isPointInPath$7,
                _a[Shape.ELLIPSE] = isPointInPath$6,
                _a[Shape.RECT] = isPointInPath$1,
                _a[Shape.LINE] = isPointInPath$5,
                _a[Shape.POLYLINE] = isPointInPath$2,
                _a[Shape.POLYGON] = isPointInPath$3,
                _a[Shape.PATH] = isPointInPath$4,
                _a[Shape.TEXT] = trueFunc,
                _a[Shape.GROUP] = null,
                _a[Shape.IMAGE] = isPointInPath,
                _a[Shape.HTML] = null,
                _a[Shape.MESH] = null,
                _a);
            // @ts-ignore
            this.context.pointInPathPickerFactory = pointInPathPickerFactory;
            this.addRenderingPlugin(new CanvasPickerPlugin());
        };
        Plugin.prototype.destroy = function () {
            // @ts-ignore
            delete this.context.pointInPathPickerFactory;
            this.removeAllRenderingPlugins();
        };
        return Plugin;
    }(AbstractRendererPlugin));

    /**
     * support 2 modes in rendering:
     * * immediate
     * * delayed: render at the end of frame with dirty-rectangle
     */
    var CanvasRendererPlugin = /** @class */ (function () {
        function CanvasRendererPlugin(canvasRendererPluginOptions) {
            this.canvasRendererPluginOptions = canvasRendererPluginOptions;
            this.removedRBushNodeAABBs = [];
            this.renderQueue = [];
            /**
             * This stack is only used by clipPath for now.
             */
            this.restoreStack = [];
            this.clearFullScreen = false;
            /**
             * view projection matrix
             */
            this.vpMatrix = create$1();
            this.dprMatrix = create$1();
            this.tmpMat4 = create$1();
            this.vec3a = create$2();
            this.vec3b = create$2();
            this.vec3c = create$2();
            this.vec3d = create$2();
        }
        CanvasRendererPlugin.prototype.apply = function (context, runtime) {
            var _this = this;
            this.context = context;
            var config = context.config, camera = context.camera, renderingService = context.renderingService, renderingContext = context.renderingContext, rBushRoot = context.rBushRoot, 
            // @ts-ignore
            pathGeneratorFactory = context.pathGeneratorFactory;
            this.rBush = rBushRoot;
            this.pathGeneratorFactory = pathGeneratorFactory;
            var contextService = context.contextService;
            var canvas = renderingContext.root.ownerDocument.defaultView;
            var handleUnmounted = function (e) {
                var object = e.target;
                // remove r-bush node
                // @ts-ignore
                var rBushNode = object.rBushNode;
                if (rBushNode.aabb) {
                    // save removed aabbs for dirty-rectangle rendering later
                    _this.removedRBushNodeAABBs.push(rBushNode.aabb);
                }
            };
            var handleCulled = function (e) {
                var object = e.target;
                // @ts-ignore
                var rBushNode = object.rBushNode;
                if (rBushNode.aabb) {
                    // save removed aabbs for dirty-rectangle rendering later
                    _this.removedRBushNodeAABBs.push(rBushNode.aabb);
                }
            };
            renderingService.hooks.init.tap(CanvasRendererPlugin.tag, function () {
                canvas.addEventListener(ElementEvent.UNMOUNTED, handleUnmounted);
                canvas.addEventListener(ElementEvent.CULLED, handleCulled);
                // clear fullscreen
                var dpr = contextService.getDPR();
                var width = config.width, height = config.height;
                var context = contextService.getContext();
                _this.clearRect(context, 0, 0, width * dpr, height * dpr, config.background);
            });
            renderingService.hooks.destroy.tap(CanvasRendererPlugin.tag, function () {
                canvas.removeEventListener(ElementEvent.UNMOUNTED, handleUnmounted);
                canvas.removeEventListener(ElementEvent.CULLED, handleCulled);
                _this.renderQueue = [];
                _this.removedRBushNodeAABBs = [];
                _this.restoreStack = [];
            });
            renderingService.hooks.beginFrame.tap(CanvasRendererPlugin.tag, function () {
                var context = contextService.getContext();
                var dpr = contextService.getDPR();
                var width = config.width, height = config.height;
                var _a = _this.canvasRendererPluginOptions, dirtyObjectNumThreshold = _a.dirtyObjectNumThreshold, dirtyObjectRatioThreshold = _a.dirtyObjectRatioThreshold;
                // some heuristic conditions such as 80% object changed
                var _b = renderingService.getStats(), total = _b.total, rendered = _b.rendered;
                var ratio = rendered / total;
                _this.clearFullScreen =
                    renderingService.disableDirtyRectangleRendering() ||
                        (rendered > dirtyObjectNumThreshold &&
                            ratio > dirtyObjectRatioThreshold);
                if (context) {
                    context.resetTransform
                        ? context.resetTransform()
                        : context.setTransform(1, 0, 0, 1, 0, 0);
                    if (_this.clearFullScreen) {
                        _this.clearRect(context, 0, 0, width * dpr, height * dpr, config.background);
                    }
                }
            });
            var renderByZIndex = function (object, context) {
                if (object.isVisible() && !object.isCulled()) {
                    _this.renderDisplayObject(object, context, _this.context, _this.restoreStack, runtime);
                    // if (object.renderable.) {
                    // if we did a full screen rendering last frame
                    _this.saveDirtyAABB(object);
                    // }
                }
                var sorted = object.sortable.sorted || object.childNodes;
                // should account for z-index
                sorted.forEach(function (child) {
                    renderByZIndex(child, context);
                });
            };
            // render at the end of frame
            renderingService.hooks.endFrame.tap(CanvasRendererPlugin.tag, function () {
                var context = contextService.getContext();
                // clear & clip dirty rectangle
                var dpr = contextService.getDPR();
                fromScaling(_this.dprMatrix, [dpr, dpr, 1]);
                multiply(_this.vpMatrix, _this.dprMatrix, camera.getOrthoMatrix());
                // if (this.clearFullScreen) {
                if (_this.clearFullScreen) {
                    // console.log('canvas renderer fcp...');
                    renderByZIndex(renderingContext.root, context);
                }
                else {
                    // console.log('canvas renderer next...');
                    // merge removed AABB
                    var dirtyRenderBounds = _this.safeMergeAABB.apply(_this, __spreadArray([_this.mergeDirtyAABBs(_this.renderQueue)], __read(_this.removedRBushNodeAABBs.map(function (_a) {
                        var minX = _a.minX, minY = _a.minY, maxX = _a.maxX, maxY = _a.maxY;
                        var aabb = new AABB();
                        aabb.setMinMax(
                        // vec3.fromValues(minX, minY, 0),
                        // vec3.fromValues(maxX, maxY, 0),
                        [minX, minY, 0], [maxX, maxY, 0]);
                        return aabb;
                    })), false));
                    _this.removedRBushNodeAABBs = [];
                    if (AABB.isEmpty(dirtyRenderBounds)) {
                        _this.renderQueue = [];
                        return;
                    }
                    var dirtyRect = _this.convertAABB2Rect(dirtyRenderBounds);
                    var x = dirtyRect.x, y = dirtyRect.y, width = dirtyRect.width, height = dirtyRect.height;
                    var tl = transformMat4(_this.vec3a, [x, y, 0], _this.vpMatrix);
                    var tr = transformMat4(_this.vec3b, [x + width, y, 0], _this.vpMatrix);
                    var bl = transformMat4(_this.vec3c, [x, y + height, 0], _this.vpMatrix);
                    var br = transformMat4(_this.vec3d, [x + width, y + height, 0], _this.vpMatrix);
                    var minx = Math.min(tl[0], tr[0], br[0], bl[0]);
                    var miny = Math.min(tl[1], tr[1], br[1], bl[1]);
                    var maxx = Math.max(tl[0], tr[0], br[0], bl[0]);
                    var maxy = Math.max(tl[1], tr[1], br[1], bl[1]);
                    var ix = Math.floor(minx);
                    var iy = Math.floor(miny);
                    var iwidth = Math.ceil(maxx - minx);
                    var iheight = Math.ceil(maxy - miny);
                    context.save();
                    _this.clearRect(context, ix, iy, iwidth, iheight, config.background);
                    context.beginPath();
                    context.rect(ix, iy, iwidth, iheight);
                    context.clip();
                    // @see https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations
                    context.setTransform(_this.vpMatrix[0], _this.vpMatrix[1], _this.vpMatrix[4], _this.vpMatrix[5], _this.vpMatrix[12], _this.vpMatrix[13]);
                    // draw dirty rectangle
                    var enableDirtyRectangleRenderingDebug = config.renderer.getConfig().enableDirtyRectangleRenderingDebug;
                    if (enableDirtyRectangleRenderingDebug) {
                        canvas.dispatchEvent(new CustomEvent(CanvasEvent.DIRTY_RECTANGLE, {
                            dirtyRect: {
                                x: ix,
                                y: iy,
                                width: iwidth,
                                height: iheight,
                            },
                        }));
                    }
                    // search objects intersect with dirty rectangle
                    var dirtyObjects = _this.searchDirtyObjects(dirtyRenderBounds);
                    // do rendering
                    dirtyObjects
                        // sort by z-index
                        .sort(function (a, b) { return a.sortable.renderOrder - b.sortable.renderOrder; })
                        .forEach(function (object) {
                        // culled object should not be rendered
                        if (object && object.isVisible() && !object.isCulled()) {
                            _this.renderDisplayObject(object, context, _this.context, _this.restoreStack, runtime);
                        }
                    });
                    context.restore();
                    // save dirty AABBs in last frame
                    _this.renderQueue.forEach(function (object) {
                        _this.saveDirtyAABB(object);
                    });
                    // clear queue
                    _this.renderQueue = [];
                }
                // pop restore stack, eg. root -> parent -> child
                _this.restoreStack.forEach(function () {
                    context.restore();
                });
                // clear restore stack
                _this.restoreStack = [];
            });
            renderingService.hooks.render.tap(CanvasRendererPlugin.tag, function (object) {
                if (!_this.clearFullScreen) {
                    // render at the end of frame
                    _this.renderQueue.push(object);
                }
            });
        };
        CanvasRendererPlugin.prototype.clearRect = function (context, x, y, width, height, background) {
            // clearRect is faster than fillRect @see https://stackoverflow.com/a/30830253
            context.clearRect(x, y, width, height);
            if (background) {
                context.fillStyle = background;
                context.fillRect(x, y, width, height);
            }
        };
        CanvasRendererPlugin.prototype.renderDisplayObject = function (object, context, canvasContext, restoreStack, runtime) {
            var nodeName = object.nodeName;
            // console.log('canvas render:', object);
            // restore to its ancestor
            var parent = restoreStack[restoreStack.length - 1];
            if (parent &&
                !(object.compareDocumentPosition(parent) & Node.DOCUMENT_POSITION_CONTAINS)) {
                context.restore();
                restoreStack.pop();
            }
            // @ts-ignore
            var styleRenderer = this.context.styleRendererFactory[nodeName];
            var generatePath = this.pathGeneratorFactory[nodeName];
            // clip path
            var clipPath = object.parsedStyle.clipPath;
            if (clipPath) {
                this.applyWorldTransform(context, clipPath);
                // generate path in local space
                var generatePath_1 = this.pathGeneratorFactory[clipPath.nodeName];
                if (generatePath_1) {
                    context.save();
                    // save clip
                    restoreStack.push(object);
                    context.beginPath();
                    generatePath_1(context, clipPath.parsedStyle);
                    context.closePath();
                    context.clip();
                }
            }
            // fill & stroke
            if (styleRenderer) {
                this.applyWorldTransform(context, object);
                context.save();
                // apply attributes to context
                this.applyAttributesToContext(context, object);
            }
            if (generatePath) {
                context.beginPath();
                generatePath(context, object.parsedStyle);
                if (object.nodeName !== Shape.LINE &&
                    object.nodeName !== Shape.PATH &&
                    object.nodeName !== Shape.POLYLINE) {
                    context.closePath();
                }
            }
            // fill & stroke
            if (styleRenderer) {
                styleRenderer.render(context, object.parsedStyle, object, canvasContext, this, runtime);
                // restore applied attributes, eg. shadowBlur shadowColor...
                context.restore();
            }
            // finish rendering, clear dirty flag
            object.renderable.dirty = false;
        };
        CanvasRendererPlugin.prototype.convertAABB2Rect = function (aabb) {
            var min = aabb.getMin();
            var max = aabb.getMax();
            // expand the rectangle a bit to avoid artifacts
            // @see https://www.yuque.com/antv/ou292n/bi8nix#ExvCu
            var minX = Math.floor(min[0]);
            var minY = Math.floor(min[1]);
            var maxX = Math.ceil(max[0]);
            var maxY = Math.ceil(max[1]);
            var width = maxX - minX;
            var height = maxY - minY;
            return { x: minX, y: minY, width: width, height: height };
        };
        /**
         * TODO: merge dirty rectangles with some strategies.
         * For now, we just simply merge all the rectangles into one.
         * @see https://idom.me/articles/841.html
         */
        CanvasRendererPlugin.prototype.mergeDirtyAABBs = function (dirtyObjects) {
            // merge into a big AABB
            // TODO: skip descendant if ancestor is caculated, but compareNodePosition is really slow
            var aabb = new AABB();
            dirtyObjects.forEach(function (object) {
                var renderBounds = object.getRenderBounds();
                aabb.add(renderBounds);
                var dirtyRenderBounds = object.renderable.dirtyRenderBounds;
                if (dirtyRenderBounds) {
                    aabb.add(dirtyRenderBounds);
                }
            });
            return aabb;
        };
        CanvasRendererPlugin.prototype.searchDirtyObjects = function (dirtyRectangle) {
            // search in r-tree, get all affected nodes
            var _a = __read(dirtyRectangle.getMin(), 2), minX = _a[0], minY = _a[1];
            var _b = __read(dirtyRectangle.getMax(), 2), maxX = _b[0], maxY = _b[1];
            var rBushNodes = this.rBush.search({
                minX: minX,
                minY: minY,
                maxX: maxX,
                maxY: maxY,
            });
            return rBushNodes.map(function (_a) {
                var displayObject = _a.displayObject;
                return displayObject;
            });
        };
        CanvasRendererPlugin.prototype.saveDirtyAABB = function (object) {
            var renderable = object.renderable;
            if (!renderable.dirtyRenderBounds) {
                renderable.dirtyRenderBounds = new AABB();
            }
            var renderBounds = object.getRenderBounds();
            if (renderBounds) {
                // save last dirty aabb
                renderable.dirtyRenderBounds.update(renderBounds.center, renderBounds.halfExtents);
            }
        };
        /**
         * TODO: batch the same global attributes
         */
        CanvasRendererPlugin.prototype.applyAttributesToContext = function (context, object) {
            var _a = object.parsedStyle, stroke = _a.stroke, fill = _a.fill, opacity = _a.opacity, lineDash = _a.lineDash, lineDashOffset = _a.lineDashOffset;
            // @see https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/setLineDash
            if (lineDash) {
                context.setLineDash(lineDash);
            }
            // @see https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
            if (!isNil(lineDashOffset)) {
                context.lineDashOffset = lineDashOffset;
            }
            if (!isNil(opacity)) {
                context.globalAlpha *= opacity;
            }
            if (!isNil(stroke) &&
                !Array.isArray(stroke) &&
                !stroke.isNone) {
                context.strokeStyle = object.attributes.stroke;
            }
            if (!isNil(fill) && !Array.isArray(fill) && !fill.isNone) {
                context.fillStyle = object.attributes.fill;
            }
        };
        CanvasRendererPlugin.prototype.applyWorldTransform = function (context, object, matrix) {
            var tx = 0;
            var ty = 0;
            var anchor = (object.parsedStyle || {}).anchor;
            var anchorX = (anchor && anchor[0]) || 0;
            var anchorY = (anchor && anchor[1]) || 0;
            if (anchorX !== 0 || anchorY !== 0) {
                // const bounds = object.getGeometryBounds();
                var bounds = object.geometry.contentBounds;
                var width = (bounds && bounds.halfExtents[0] * 2) || 0;
                var height = (bounds && bounds.halfExtents[1] * 2) || 0;
                tx = -(anchorX * width);
                ty = -(anchorY * height);
            }
            // apply clip shape's RTS
            if (matrix) {
                copy(this.tmpMat4, object.getLocalTransform());
                this.vec3a[0] = tx;
                this.vec3a[1] = ty;
                this.vec3a[2] = 0;
                translate(this.tmpMat4, this.tmpMat4, this.vec3a);
                multiply(this.tmpMat4, matrix, this.tmpMat4);
                multiply(this.tmpMat4, this.vpMatrix, this.tmpMat4);
            }
            else {
                // apply RTS transformation in world space
                copy(this.tmpMat4, object.getWorldTransform());
                this.vec3a[0] = tx;
                this.vec3a[1] = ty;
                this.vec3a[2] = 0;
                translate(this.tmpMat4, this.tmpMat4, this.vec3a);
                multiply(this.tmpMat4, this.vpMatrix, this.tmpMat4);
            }
            // @see https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations
            context.setTransform(this.tmpMat4[0], this.tmpMat4[1], this.tmpMat4[4], this.tmpMat4[5], this.tmpMat4[12], this.tmpMat4[13]);
        };
        CanvasRendererPlugin.prototype.safeMergeAABB = function () {
            var aabbs = [];
            for (var _i = 0; _i < arguments.length; _i++) {
                aabbs[_i] = arguments[_i];
            }
            var merged = new AABB();
            aabbs.forEach(function (aabb) {
                merged.add(aabb);
            });
            return merged;
        };
        CanvasRendererPlugin.tag = 'CanvasRenderer';
        return CanvasRendererPlugin;
    }());

    var DefaultRenderer = /** @class */ (function () {
        function DefaultRenderer(imagePool) {
            this.imagePool = imagePool;
        }
        DefaultRenderer.prototype.render = function (context, parsedStyle, object, canvasContext, plugin, runtime) {
            var fill = parsedStyle.fill, fillRule = parsedStyle.fillRule, opacity = parsedStyle.opacity, fillOpacity = parsedStyle.fillOpacity, stroke = parsedStyle.stroke, strokeOpacity = parsedStyle.strokeOpacity, lineWidth = parsedStyle.lineWidth, lineCap = parsedStyle.lineCap, lineJoin = parsedStyle.lineJoin, shadowType = parsedStyle.shadowType, shadowColor = parsedStyle.shadowColor, shadowBlur = parsedStyle.shadowBlur, filter = parsedStyle.filter, miterLimit = parsedStyle.miterLimit;
            var hasFill = !isNil(fill) && !fill.isNone;
            var hasStroke = !isNil(stroke) && !stroke.isNone && lineWidth > 0;
            var isFillTransparent = fill.alpha === 0;
            var hasFilter = !!(filter && filter.length);
            var hasShadow = !isNil(shadowColor) && shadowBlur > 0;
            var nodeName = object.nodeName;
            var isInnerShadow = shadowType === 'inner';
            var shouldDrawShadowWithStroke = hasStroke &&
                hasShadow &&
                (nodeName === Shape.PATH ||
                    nodeName === Shape.LINE ||
                    nodeName === Shape.POLYLINE ||
                    isFillTransparent ||
                    isInnerShadow);
            if (hasFill) {
                context.globalAlpha = opacity * fillOpacity;
                if (!shouldDrawShadowWithStroke) {
                    setShadowAndFilter(object, context, hasShadow);
                }
                this.fill(context, object, fill, fillRule, canvasContext, plugin, runtime);
                if (!shouldDrawShadowWithStroke) {
                    this.clearShadowAndFilter(context, hasFilter, hasShadow);
                }
            }
            if (hasStroke) {
                context.globalAlpha = opacity * strokeOpacity;
                context.lineWidth = lineWidth;
                if (!isNil(miterLimit)) {
                    context.miterLimit = miterLimit;
                }
                if (!isNil(lineCap)) {
                    context.lineCap = lineCap;
                }
                if (!isNil(lineJoin)) {
                    context.lineJoin = lineJoin;
                }
                if (shouldDrawShadowWithStroke) {
                    if (isInnerShadow) {
                        context.globalCompositeOperation = 'source-atop';
                    }
                    setShadowAndFilter(object, context, true);
                    if (isInnerShadow) {
                        this.stroke(context, object, stroke, canvasContext, plugin, runtime);
                        context.globalCompositeOperation = 'source-over';
                        this.clearShadowAndFilter(context, hasFilter, true);
                    }
                }
                this.stroke(context, object, stroke, canvasContext, plugin, runtime);
            }
        };
        DefaultRenderer.prototype.clearShadowAndFilter = function (context, hasFilter, hasShadow) {
            if (hasShadow) {
                context.shadowColor = 'transparent';
                context.shadowBlur = 0;
            }
            if (hasFilter) {
                // save drop-shadow filter
                var oldFilter = context.filter;
                if (!isNil(oldFilter) && oldFilter.indexOf('drop-shadow') > -1) {
                    context.filter =
                        oldFilter.replace(/drop-shadow\([^)]*\)/, '').trim() || 'none';
                }
            }
        };
        DefaultRenderer.prototype.fill = function (context, object, fill, fillRule, canvasContext, plugin, runtime) {
            var _this = this;
            if (Array.isArray(fill)) {
                fill.forEach(function (gradient) {
                    context.fillStyle = _this.getColor(gradient, object, context);
                    fillRule ? context.fill(fillRule) : context.fill();
                });
            }
            else {
                if (isPattern(fill)) {
                    context.fillStyle = this.getPattern(fill, object, context, canvasContext, plugin, runtime);
                }
                fillRule ? context.fill(fillRule) : context.fill();
            }
        };
        DefaultRenderer.prototype.stroke = function (context, object, stroke, canvasContext, plugin, runtime) {
            var _this = this;
            if (Array.isArray(stroke)) {
                stroke.forEach(function (gradient) {
                    context.strokeStyle = _this.getColor(gradient, object, context);
                    context.stroke();
                });
            }
            else {
                if (isPattern(stroke)) {
                    context.strokeStyle = this.getPattern(stroke, object, context, canvasContext, plugin, runtime);
                }
                context.stroke();
            }
        };
        DefaultRenderer.prototype.getPattern = function (pattern, object, context, canvasContext, plugin, runtime) {
            var $offscreenCanvas;
            var dpr;
            if (pattern.image.nodeName === 'rect') {
                var _a = pattern.image.parsedStyle, width = _a.width, height = _a.height;
                dpr = canvasContext.contextService.getDPR();
                var offscreenCanvas = canvasContext.config.offscreenCanvas;
                $offscreenCanvas = runtime.offscreenCanvasCreator.getOrCreateCanvas(offscreenCanvas);
                $offscreenCanvas.width = width * dpr;
                $offscreenCanvas.height = height * dpr;
                var offscreenCanvasContext_1 = runtime.offscreenCanvasCreator.getOrCreateContext(offscreenCanvas);
                var restoreStack_1 = [];
                // offscreenCanvasContext.scale(1 / dpr, 1 / dpr);
                pattern.image.forEach(function (object) {
                    plugin.renderDisplayObject(object, offscreenCanvasContext_1, canvasContext, restoreStack_1, runtime);
                });
                restoreStack_1.forEach(function () {
                    offscreenCanvasContext_1.restore();
                });
            }
            var canvasPattern = this.imagePool.getOrCreatePatternSync(pattern, context, $offscreenCanvas, dpr, function () {
                // set dirty rectangle flag
                object.renderable.dirty = true;
                canvasContext.renderingService.dirtify();
            });
            return canvasPattern;
        };
        DefaultRenderer.prototype.getColor = function (parsedColor, object, context) {
            var color;
            if (parsedColor.type === GradientType.LinearGradient ||
                parsedColor.type === GradientType.RadialGradient) {
                var bounds = object.getGeometryBounds();
                var width = (bounds && bounds.halfExtents[0] * 2) || 1;
                var height = (bounds && bounds.halfExtents[1] * 2) || 1;
                color = this.imagePool.getOrCreateGradient(__assign(__assign({ type: parsedColor.type }, parsedColor.value), { width: width, height: height }), context);
            }
            return color;
        };
        return DefaultRenderer;
    }());
    /**
     * apply before fill and stroke but only once
     */
    function setShadowAndFilter(object, context, hasShadow) {
        var _a = object.parsedStyle, filter = _a.filter, shadowColor = _a.shadowColor, shadowBlur = _a.shadowBlur, shadowOffsetX = _a.shadowOffsetX, shadowOffsetY = _a.shadowOffsetY;
        if (filter && filter.length) {
            // use raw filter string
            context.filter = object.style.filter;
        }
        if (hasShadow) {
            context.shadowColor = shadowColor.toString();
            context.shadowBlur = shadowBlur || 0;
            context.shadowOffsetX = shadowOffsetX || 0;
            context.shadowOffsetY = shadowOffsetY || 0;
        }
    }

    var ImageRenderer = /** @class */ (function () {
        function ImageRenderer(imagePool) {
            this.imagePool = imagePool;
        }
        ImageRenderer.prototype.render = function (context, parsedStyle, object) {
            var width = parsedStyle.width, height = parsedStyle.height, img = parsedStyle.img, shadowColor = parsedStyle.shadowColor, shadowBlur = parsedStyle.shadowBlur;
            var image;
            var iw = width;
            var ih = height;
            if (isString(img)) {
                // image has been loaded in `mounted` hook
                image = this.imagePool.getImageSync(img);
            }
            else {
                iw || (iw = img.width);
                ih || (ih = img.height);
                image = img;
            }
            if (image) {
                var hasShadow = !isNil(shadowColor) && shadowBlur > 0;
                setShadowAndFilter(object, context, hasShadow);
                // node-canvas will throw the following err:
                // Error: Image given has not completed loading
                try {
                    context.drawImage(image, 0, 0, iw, ih);
                }
                catch (e) { }
            }
        };
        return ImageRenderer;
    }());

    var TextRenderer = /** @class */ (function () {
        function TextRenderer() {
        }
        TextRenderer.prototype.render = function (context, parsedStyle, object, canvasContext, plugin, runtime) {
            var _a = parsedStyle, lineWidth = _a.lineWidth, textAlign = _a.textAlign, textBaseline = _a.textBaseline, lineJoin = _a.lineJoin, miterLimit = _a.miterLimit, letterSpacing = _a.letterSpacing, stroke = _a.stroke, fill = _a.fill, fillOpacity = _a.fillOpacity, strokeOpacity = _a.strokeOpacity, opacity = _a.opacity, metrics = _a.metrics, dx = _a.dx, dy = _a.dy, shadowColor = _a.shadowColor, shadowBlur = _a.shadowBlur;
            var font = metrics.font, lines = metrics.lines, height = metrics.height, lineHeight = metrics.lineHeight, lineMetrics = metrics.lineMetrics;
            context.font = font;
            context.lineWidth = lineWidth;
            context.textAlign = textAlign === 'middle' ? 'center' : textAlign;
            var formattedTextBaseline = textBaseline;
            if (
            // formattedTextBaseline === 'bottom' ||
            !runtime.enableCSSParsing &&
                formattedTextBaseline === 'alphabetic') {
                formattedTextBaseline = 'bottom';
            }
            context.lineJoin = lineJoin;
            if (!isNil(miterLimit)) {
                context.miterLimit = miterLimit;
            }
            var linePositionY = 0;
            // handle vertical text baseline
            if (textBaseline === 'middle') {
                linePositionY = -height / 2 - lineHeight / 2;
            }
            else if (textBaseline === 'bottom' ||
                textBaseline === 'alphabetic' ||
                textBaseline === 'ideographic') {
                linePositionY = -height;
            }
            else if (textBaseline === 'top' || textBaseline === 'hanging') {
                linePositionY = -lineHeight;
            }
            // account for dx & dy
            var offsetX = dx || 0;
            linePositionY += dy || 0;
            if (lines.length === 1) {
                if (formattedTextBaseline === 'bottom') {
                    formattedTextBaseline = 'middle';
                    linePositionY -= 0.5 * height;
                }
                else if (formattedTextBaseline === 'top') {
                    formattedTextBaseline = 'middle';
                    linePositionY += 0.5 * height;
                }
            }
            context.textBaseline = formattedTextBaseline;
            var hasShadow = !isNil(shadowColor) && shadowBlur > 0;
            setShadowAndFilter(object, context, hasShadow);
            // draw lines line by line
            for (var i = 0; i < lines.length; i++) {
                var linePositionX = lineWidth / 2 + offsetX;
                linePositionY += lineHeight;
                // no need to re-position X, cause we already set text align
                // @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign
                if (!isNil(stroke) && !stroke.isNone && lineWidth) {
                    this.drawLetterSpacing(context, lines[i], lineMetrics[i], textAlign, linePositionX, linePositionY, letterSpacing, fillOpacity, strokeOpacity, opacity, true);
                }
                if (!isNil(fill)) {
                    this.drawLetterSpacing(context, lines[i], lineMetrics[i], textAlign, linePositionX, linePositionY, letterSpacing, fillOpacity, strokeOpacity, opacity);
                }
            }
        };
        TextRenderer.prototype.drawLetterSpacing = function (context, text, lineMetrics, textAlign, x, y, letterSpacing, fillOpacity, strokeOpacity, opacity, isStroke) {
            if (isStroke === void 0) { isStroke = false; }
            // letterSpacing of 0 means normal, render all texts directly
            if (letterSpacing === 0) {
                if (isStroke) {
                    this.strokeText(context, text, x, y, strokeOpacity);
                }
                else {
                    this.fillText(context, text, x, y, fillOpacity, opacity);
                }
                return;
            }
            // draw text using left align
            var currentTextAlign = context.textAlign;
            context.textAlign = 'left';
            var currentPosition = x;
            if (textAlign === 'center' || textAlign === 'middle') {
                currentPosition = x - lineMetrics.width / 2;
            }
            else if (textAlign === 'right' || textAlign === 'end') {
                currentPosition = x - lineMetrics.width;
            }
            var stringArray = Array.from(text);
            var previousWidth = context.measureText(text).width;
            var currentWidth = 0;
            for (var i = 0; i < stringArray.length; ++i) {
                var currentChar = stringArray[i];
                if (isStroke) {
                    this.strokeText(context, currentChar, currentPosition, y, strokeOpacity);
                }
                else {
                    this.fillText(context, currentChar, currentPosition, y, fillOpacity, opacity);
                }
                currentWidth = context.measureText(text.substring(i + 1)).width;
                currentPosition += previousWidth - currentWidth + letterSpacing;
                previousWidth = currentWidth;
            }
            context.textAlign = currentTextAlign;
        };
        TextRenderer.prototype.fillText = function (context, text, x, y, fillOpacity, opacity) {
            var currentGlobalAlpha;
            var applyOpacity = !isNil(fillOpacity) && fillOpacity !== 1;
            if (applyOpacity) {
                currentGlobalAlpha = context.globalAlpha;
                context.globalAlpha = fillOpacity * opacity;
            }
            context.fillText(text, x, y);
            if (applyOpacity) {
                context.globalAlpha = currentGlobalAlpha;
            }
        };
        TextRenderer.prototype.strokeText = function (context, text, x, y, strokeOpacity) {
            var currentGlobalAlpha;
            var applyOpacity = !isNil(strokeOpacity) && strokeOpacity !== 1;
            if (applyOpacity) {
                currentGlobalAlpha = context.globalAlpha;
                context.globalAlpha = strokeOpacity;
            }
            context.strokeText(text, x, y);
            if (applyOpacity) {
                context.globalAlpha = currentGlobalAlpha;
            }
        };
        return TextRenderer;
    }());

    var RectRenderer = /** @class */ (function (_super) {
        __extends(RectRenderer, _super);
        function RectRenderer() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        return RectRenderer;
    }(DefaultRenderer));

    var CircleRenderer = /** @class */ (function (_super) {
        __extends(CircleRenderer, _super);
        function CircleRenderer() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        return CircleRenderer;
    }(DefaultRenderer));

    var EllipseRenderer = /** @class */ (function (_super) {
        __extends(EllipseRenderer, _super);
        function EllipseRenderer() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        return EllipseRenderer;
    }(DefaultRenderer));

    var LineRenderer = /** @class */ (function (_super) {
        __extends(LineRenderer, _super);
        function LineRenderer() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        return LineRenderer;
    }(DefaultRenderer));

    var PolylineRenderer = /** @class */ (function (_super) {
        __extends(PolylineRenderer, _super);
        function PolylineRenderer() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        return PolylineRenderer;
    }(DefaultRenderer));

    var PolygonRenderer = /** @class */ (function (_super) {
        __extends(PolygonRenderer, _super);
        function PolygonRenderer() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        return PolygonRenderer;
    }(DefaultRenderer));

    var PathRenderer = /** @class */ (function (_super) {
        __extends(PathRenderer, _super);
        function PathRenderer() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        return PathRenderer;
    }(DefaultRenderer));

    var Plugin$2 = /** @class */ (function (_super) {
        __extends(Plugin, _super);
        function Plugin(options) {
            if (options === void 0) { options = {}; }
            var _this = _super.call(this) || this;
            _this.options = options;
            _this.name = 'canvas-renderer';
            return _this;
        }
        Plugin.prototype.init = function () {
            var _a;
            var canvasRendererPluginOptions = __assign({ dirtyObjectNumThreshold: 500, dirtyObjectRatioThreshold: 0.8 }, this.options);
            // @ts-ignore
            var imagePool = this.context.imagePool;
            var defaultRenderer = new DefaultRenderer(imagePool);
            var defaultStyleRendererFactory = (_a = {},
                _a[Shape.CIRCLE] = defaultRenderer,
                _a[Shape.ELLIPSE] = defaultRenderer,
                _a[Shape.RECT] = defaultRenderer,
                _a[Shape.IMAGE] = new ImageRenderer(imagePool),
                _a[Shape.TEXT] = new TextRenderer(),
                _a[Shape.LINE] = defaultRenderer,
                _a[Shape.POLYLINE] = defaultRenderer,
                _a[Shape.POLYGON] = defaultRenderer,
                _a[Shape.PATH] = defaultRenderer,
                _a[Shape.GROUP] = undefined,
                _a[Shape.HTML] = undefined,
                _a[Shape.MESH] = undefined,
                _a);
            this.context.defaultStyleRendererFactory = defaultStyleRendererFactory;
            this.context.styleRendererFactory = defaultStyleRendererFactory;
            this.addRenderingPlugin(new CanvasRendererPlugin(canvasRendererPluginOptions));
        };
        Plugin.prototype.destroy = function () {
            this.removeAllRenderingPlugins();
            delete this.context.defaultStyleRendererFactory;
            delete this.context.styleRendererFactory;
        };
        return Plugin;
    }(AbstractRendererPlugin));

    var DragndropPlugin = /** @class */ (function () {
        function DragndropPlugin(dragndropPluginOptions) {
            this.dragndropPluginOptions = dragndropPluginOptions;
        }
        DragndropPlugin.prototype.apply = function (context) {
            var _this = this;
            var renderingService = context.renderingService, renderingContext = context.renderingContext;
            var document = renderingContext.root.ownerDocument;
            // TODO: should we add an option like `draggable` to Canvas
            var canvas = document.defaultView;
            var handlePointerdown = function (event) {
                var target = event.target;
                var isDocument = target === document;
                var draggableEventTarget = isDocument && _this.dragndropPluginOptions.isDocumentDraggable
                    ? document
                    : target.closest && target.closest('[draggable=true]');
                // `draggable` may be set on ancestor nodes:
                // @see https://github.com/antvis/G/issues/1088
                if (draggableEventTarget) {
                    // delay triggering dragstart event
                    var dragstartTriggered_1 = false;
                    var dragstartTimeStamp_1 = event.timeStamp;
                    var dragstartClientCoordinates_1 = [
                        event.clientX,
                        event.clientY,
                    ];
                    var currentDroppable_1 = null;
                    var lastDragClientCoordinates_1 = [event.clientX, event.clientY];
                    // @ts-ignore
                    // eslint-disable-next-line no-inner-declarations
                    var handlePointermove_1 = function (event) { return __awaiter(_this, void 0, void 0, function () {
                        var timeElapsed, distanceMoved, point, elementsBelow, elementBelow, droppableBelow;
                        return __generator(this, function (_a) {
                            switch (_a.label) {
                                case 0:
                                    if (!dragstartTriggered_1) {
                                        timeElapsed = event.timeStamp - dragstartTimeStamp_1;
                                        distanceMoved = distanceSquareRoot([event.clientX, event.clientY], dragstartClientCoordinates_1);
                                        // check thresholds
                                        if (timeElapsed <=
                                            this.dragndropPluginOptions.dragstartTimeThreshold ||
                                            distanceMoved <=
                                                this.dragndropPluginOptions.dragstartDistanceThreshold) {
                                            return [2 /*return*/];
                                        }
                                        // @see https://developer.mozilla.org/zh-CN/docs/Web/API/Document/dragstart_event
                                        event.type = 'dragstart';
                                        draggableEventTarget.dispatchEvent(event);
                                        dragstartTriggered_1 = true;
                                    }
                                    // @see https://developer.mozilla.org/zh-CN/docs/Web/API/Document/drag_event
                                    event.type = 'drag';
                                    // @ts-ignore
                                    event.dx = event.clientX - lastDragClientCoordinates_1[0];
                                    // @ts-ignore
                                    event.dy = event.clientY - lastDragClientCoordinates_1[1];
                                    draggableEventTarget.dispatchEvent(event);
                                    lastDragClientCoordinates_1 = [event.clientX, event.clientY];
                                    if (!!isDocument) return [3 /*break*/, 2];
                                    point = this.dragndropPluginOptions.overlap === 'pointer'
                                        ? [event.canvasX, event.canvasY]
                                        : target.getBounds().center;
                                    return [4 /*yield*/, document.elementsFromPoint(point[0], point[1])];
                                case 1:
                                    elementsBelow = _a.sent();
                                    elementBelow = elementsBelow[elementsBelow.indexOf(target) + 1];
                                    droppableBelow = (elementBelow === null || elementBelow === void 0 ? void 0 : elementBelow.closest('[droppable=true]')) ||
                                        (this.dragndropPluginOptions.isDocumentDroppable
                                            ? document
                                            : null);
                                    if (currentDroppable_1 !== droppableBelow) {
                                        if (currentDroppable_1) {
                                            // null when we were not over a droppable before this event
                                            // @see https://developer.mozilla.org/zh-CN/docs/Web/API/Document/dragleave_event
                                            event.type = 'dragleave';
                                            event.target = currentDroppable_1;
                                            currentDroppable_1.dispatchEvent(event);
                                        }
                                        if (droppableBelow) {
                                            // @see https://developer.mozilla.org/zh-CN/docs/Web/API/Document/dragleave_event
                                            event.type = 'dragenter';
                                            event.target = droppableBelow;
                                            droppableBelow.dispatchEvent(event);
                                        }
                                        currentDroppable_1 = droppableBelow;
                                        if (currentDroppable_1) {
                                            // null if we're not coming over a droppable now
                                            // @see https://developer.mozilla.org/zh-CN/docs/Web/API/Document/dragover_event
                                            event.type = 'dragover';
                                            event.target = currentDroppable_1;
                                            currentDroppable_1.dispatchEvent(event);
                                        }
                                    }
                                    _a.label = 2;
                                case 2: return [2 /*return*/];
                            }
                        });
                    }); };
                    canvas.addEventListener('pointermove', handlePointermove_1);
                    var stopDragging = function (originalPointerUpEvent) {
                        if (dragstartTriggered_1) {
                            // prevent click event being triggerd
                            // @see https://github.com/antvis/G/issues/1091
                            originalPointerUpEvent.detail = {
                                preventClick: true,
                            };
                            // clone event first
                            var event_1 = originalPointerUpEvent.clone();
                            // drop should fire before dragend
                            // @see https://javascript.tutorialink.com/is-there-a-defined-ordering-between-dragend-and-drop-events/
                            if (currentDroppable_1) {
                                // @see https://developer.mozilla.org/zh-CN/docs/Web/API/Document/drop_event
                                event_1.type = 'drop';
                                event_1.target = currentDroppable_1;
                                currentDroppable_1.dispatchEvent(event_1);
                            }
                            // @see https://developer.mozilla.org/zh-CN/docs/Web/API/Document/dragend_event
                            event_1.type = 'dragend';
                            draggableEventTarget.dispatchEvent(event_1);
                            dragstartTriggered_1 = false;
                        }
                        canvas.removeEventListener('pointermove', handlePointermove_1);
                    };
                    target.addEventListener('pointerup', stopDragging, { once: true });
                    target.addEventListener('pointerupoutside', stopDragging, {
                        once: true,
                    });
                }
            };
            renderingService.hooks.init.tap(DragndropPlugin.tag, function () {
                canvas.addEventListener('pointerdown', handlePointerdown);
            });
            renderingService.hooks.destroy.tap(DragndropPlugin.tag, function () {
                canvas.removeEventListener('pointerdown', handlePointerdown);
            });
        };
        DragndropPlugin.tag = 'Dragndrop';
        return DragndropPlugin;
    }());

    var Plugin$3 = /** @class */ (function (_super) {
        __extends(Plugin, _super);
        function Plugin(options) {
            if (options === void 0) { options = {}; }
            var _this = _super.call(this) || this;
            _this.options = options;
            _this.name = 'dragndrop';
            return _this;
        }
        Plugin.prototype.init = function () {
            this.addRenderingPlugin(new DragndropPlugin(__assign({ overlap: 'pointer', isDocumentDraggable: false, isDocumentDroppable: false, dragstartDistanceThreshold: 0, dragstartTimeThreshold: 0 }, this.options)));
        };
        Plugin.prototype.destroy = function () {
            this.removeAllRenderingPlugins();
        };
        Plugin.prototype.setOptions = function (options) {
            Object.assign(this.plugins[0].dragndropPluginOptions, options);
        };
        return Plugin;
    }(AbstractRendererPlugin));

    var ImagePool = /** @class */ (function () {
        function ImagePool(canvasConfig) {
            this.canvasConfig = canvasConfig;
            this.imageCache = {};
            this.gradientCache = {};
            this.patternCache = {};
        }
        ImagePool.prototype.getImageSync = function (src, callback) {
            if (!this.imageCache[src]) {
                this.getOrCreateImage(src).then(function (img) {
                    if (callback) {
                        callback(img);
                    }
                });
            }
            else {
                if (callback) {
                    callback(this.imageCache[src]);
                }
            }
            return this.imageCache[src];
        };
        ImagePool.prototype.getOrCreateImage = function (src) {
            var _this = this;
            if (this.imageCache[src]) {
                return Promise.resolve(this.imageCache[src]);
            }
            // @see https://github.com/antvis/g/issues/938
            var createImage = this.canvasConfig.createImage;
            return new Promise(function (resolve, reject) {
                var image;
                if (createImage) {
                    image = createImage(src);
                }
                else if (isBrowser) {
                    image = new window.Image();
                }
                if (image) {
                    image.onload = function () {
                        _this.imageCache[src] = image;
                        resolve(image);
                    };
                    image.onerror = function (ev) {
                        reject(ev);
                    };
                    image.crossOrigin = 'Anonymous';
                    image.src = src;
                }
            });
        };
        ImagePool.prototype.getOrCreatePatternSync = function (pattern, context, $offscreenCanvas, dpr, callback) {
            var patternKey = this.generatePatternKey(pattern);
            if (patternKey && this.patternCache[patternKey]) {
                return this.patternCache[patternKey];
            }
            var image = pattern.image, repetition = pattern.repetition, transform = pattern.transform;
            var src;
            var needScaleWithDPR = false;
            // Image URL
            if (isString(image)) {
                src = this.getImageSync(image, callback);
            }
            else if ($offscreenCanvas) {
                src = $offscreenCanvas;
                needScaleWithDPR = true;
            }
            else {
                src = image;
            }
            // @see https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/createPattern
            var canvasPattern = src && context.createPattern(src, repetition);
            if (canvasPattern) {
                var mat = void 0;
                // @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern/setTransform
                if (transform) {
                    mat = parsedTransformToMat4(parseTransform(transform), new DisplayObject({}));
                }
                else {
                    mat = identity$1(create$1());
                }
                if (needScaleWithDPR) {
                    scale(mat, mat, [1 / dpr, 1 / dpr, 1]);
                }
                canvasPattern.setTransform({
                    a: mat[0],
                    b: mat[1],
                    c: mat[4],
                    d: mat[5],
                    e: mat[12],
                    f: mat[13],
                });
            }
            if (patternKey && canvasPattern) {
                this.patternCache[patternKey] = canvasPattern;
            }
            return canvasPattern;
        };
        ImagePool.prototype.getOrCreateGradient = function (params, context) {
            var key = this.generateGradientKey(params);
            var type = params.type, steps = params.steps, width = params.width, height = params.height, angle = params.angle, cx = params.cx, cy = params.cy, size = params.size;
            if (this.gradientCache[key]) {
                return this.gradientCache[key];
            }
            var gradient = null;
            if (type === GradientType.LinearGradient) {
                var _a = computeLinearGradient(width, height, angle), x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2;
                // @see https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/createLinearGradient
                gradient = context.createLinearGradient(x1, y1, x2, y2);
            }
            else if (type === GradientType.RadialGradient) {
                var _b = computeRadialGradient(width, height, cx, cy, size), x = _b.x, y = _b.y, r = _b.r;
                // @see https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/createRadialGradient
                gradient = context.createRadialGradient(x, y, 0, x, y, r);
            }
            if (gradient) {
                steps.forEach(function (_a) {
                    var offset = _a.offset, color = _a.color;
                    if (offset.unit === UnitType.kPercentage) {
                        gradient === null || gradient === void 0 ? void 0 : gradient.addColorStop(offset.value / 100, color.toString());
                    }
                });
                this.gradientCache[key] = gradient;
            }
            return this.gradientCache[key];
        };
        ImagePool.prototype.generateGradientKey = function (params) {
            var type = params.type, width = params.width, height = params.height, steps = params.steps, angle = params.angle, cx = params.cx, cy = params.cy, size = params.size;
            return "gradient-".concat(type, "-").concat((angle === null || angle === void 0 ? void 0 : angle.toString()) || 0, "-").concat((cx === null || cx === void 0 ? void 0 : cx.toString()) || 0, "-").concat((cy === null || cy === void 0 ? void 0 : cy.toString()) || 0, "-").concat((size === null || size === void 0 ? void 0 : size.toString()) || 0, "-").concat(width, "-").concat(height, "-").concat(steps
                .map(function (_a) {
                var offset = _a.offset, color = _a.color;
                return "".concat(offset).concat(color);
            })
                .join('-'));
        };
        ImagePool.prototype.generatePatternKey = function (pattern) {
            var image = pattern.image, repetition = pattern.repetition;
            // only generate cache for Image
            if (isString(image)) {
                return "pattern-".concat(image, "-").concat(repetition);
            }
            else if (image.nodeName === 'rect') {
                return "pattern-".concat(image.entity, "-").concat(repetition);
            }
        };
        return ImagePool;
    }());

    var LoadImagePlugin = /** @class */ (function () {
        function LoadImagePlugin() {
        }
        LoadImagePlugin.prototype.apply = function (context) {
            var renderingService = context.renderingService, renderingContext = context.renderingContext, imagePool = context.imagePool;
            var canvas = renderingContext.root.ownerDocument.defaultView;
            var calculateWithAspectRatio = function (object, imageWidth, imageHeight) {
                var _a = object.parsedStyle, width = _a.width, height = _a.height;
                if (width && !height) {
                    object.setAttribute('height', (imageHeight / imageWidth) * width);
                }
                else if (!width && height) {
                    object.setAttribute('width', (imageWidth / imageHeight) * height);
                }
            };
            var handleMounted = function (e) {
                var object = e.target;
                var nodeName = object.nodeName, attributes = object.attributes;
                if (nodeName === Shape.IMAGE) {
                    var img = attributes.img, keepAspectRatio_1 = attributes.keepAspectRatio;
                    if (isString(img)) {
                        imagePool.getImageSync(img, function (_a) {
                            var width = _a.width, height = _a.height;
                            if (keepAspectRatio_1) {
                                calculateWithAspectRatio(object, width, height);
                            }
                            // set dirty rectangle flag
                            object.renderable.dirty = true;
                            renderingService.dirtify();
                        });
                    }
                }
            };
            var handleAttributeChanged = function (e) {
                var object = e.target;
                var attrName = e.attrName, newValue = e.newValue;
                if (object.nodeName === Shape.IMAGE) {
                    if (attrName === 'img') {
                        if (isString(newValue)) {
                            imagePool.getOrCreateImage(newValue).then(function (_a) {
                                var width = _a.width, height = _a.height;
                                if (object.attributes.keepAspectRatio) {
                                    calculateWithAspectRatio(object, width, height);
                                }
                                // set dirty rectangle flag
                                object.renderable.dirty = true;
                                renderingService.dirtify();
                            });
                        }
                    }
                }
            };
            renderingService.hooks.init.tap(LoadImagePlugin.tag, function () {
                canvas.addEventListener(ElementEvent.MOUNTED, handleMounted);
                canvas.addEventListener(ElementEvent.ATTR_MODIFIED, handleAttributeChanged);
            });
            renderingService.hooks.destroy.tap(LoadImagePlugin.tag, function () {
                canvas.removeEventListener(ElementEvent.MOUNTED, handleMounted);
                canvas.removeEventListener(ElementEvent.ATTR_MODIFIED, handleAttributeChanged);
            });
        };
        LoadImagePlugin.tag = 'LoadImage';
        return LoadImagePlugin;
    }());

    var Plugin$4 = /** @class */ (function (_super) {
        __extends(Plugin, _super);
        function Plugin() {
            var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
            _this.name = 'image-loader';
            return _this;
        }
        Plugin.prototype.init = function () {
            // @ts-ignore
            this.context.imagePool = new ImagePool(this.context.config);
            this.addRenderingPlugin(new LoadImagePlugin());
        };
        Plugin.prototype.destroy = function () {
            this.removeAllRenderingPlugins();
        };
        return Plugin;
    }(AbstractRendererPlugin));

    /**
     * listen to mouse/touch/pointer events on DOM wrapper, trigger pointer events
     */
    var MobileInteractionPlugin = /** @class */ (function () {
        function MobileInteractionPlugin() {
        }
        MobileInteractionPlugin.prototype.apply = function (context) {
            var renderingService = context.renderingService, contextService = context.contextService, config = context.config;
            // 获取小程序上下文
            var canvasEl = contextService.getDomElement();
            var onPointerDown = function (ev) {
                renderingService.hooks.pointerDown.call(ev);
            };
            var onPointerUp = function (ev) {
                renderingService.hooks.pointerUp.call(ev);
            };
            var onPointerMove = function (ev) {
                // 触发 G 定义的标准 pointerMove 事件
                renderingService.hooks.pointerMove.call(ev);
            };
            var onPointerOver = function (ev) {
                renderingService.hooks.pointerOver.call(ev);
            };
            var onPointerOut = function (ev) {
                renderingService.hooks.pointerOut.call(ev);
            };
            var onClick = function (ev) {
                renderingService.hooks.click.call(ev);
            };
            var onPointerCancel = function (ev) {
                renderingService.hooks.pointerCancel.call(ev);
            };
            renderingService.hooks.init.tap(MobileInteractionPlugin.tag, function () {
                // 基于小程序上下文的事件监听方式，绑定事件监听，可以参考下面基于 DOM 的方式
                canvasEl.addEventListener('touchstart', onPointerDown, true);
                canvasEl.addEventListener('touchend', onPointerUp, true);
                canvasEl.addEventListener('touchmove', onPointerMove, true);
                canvasEl.addEventListener('touchcancel', onPointerCancel, true);
                // FIXME: 这里不应该只在 canvasEl 上监听 mousemove 和 mouseup，而应该在更高层级的节点上例如 document 监听。
                // 否则无法判断是否移出了 canvasEl
                // canvasEl.addEventListener('mousemove', onPointerMove, true);
                // canvasEl.addEventListener('mousedown', onPointerDown, true);
                canvasEl.addEventListener('mouseout', onPointerOut, true);
                canvasEl.addEventListener('mouseover', onPointerOver, true);
                // canvasEl.addEventListener('mouseup', onPointerUp, true);
                if (config.useNativeClickEvent) {
                    canvasEl.addEventListener('click', onClick, true);
                }
            });
            renderingService.hooks.destroy.tap(MobileInteractionPlugin.tag, function () {
                // 基于小程序上下文的事件监听方式，移除事件监听
                canvasEl.removeEventListener('touchstart', onPointerDown, true);
                canvasEl.removeEventListener('touchend', onPointerUp, true);
                canvasEl.removeEventListener('touchmove', onPointerMove, true);
                canvasEl.removeEventListener('touchcancel', onPointerCancel, true);
                // canvasEl.removeEventListener('mousemove', onPointerMove, true);
                // canvasEl.removeEventListener('mousedown', onPointerDown, true);
                canvasEl.removeEventListener('mouseout', onPointerOut, true);
                canvasEl.removeEventListener('mouseover', onPointerOver, true);
                // canvasEl.removeEventListener('mouseup', onPointerUp, true);
                if (config.useNativeClickEvent) {
                    canvasEl.removeEventListener('click', onClick, true);
                }
            });
        };
        MobileInteractionPlugin.tag = 'MobileInteraction';
        return MobileInteractionPlugin;
    }());

    var Plugin$5 = /** @class */ (function (_super) {
        __extends(Plugin, _super);
        function Plugin() {
            var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
            _this.name = 'mobile-interaction';
            return _this;
        }
        Plugin.prototype.init = function () {
            this.addRenderingPlugin(new MobileInteractionPlugin());
        };
        Plugin.prototype.destroy = function () {
            this.removeAllRenderingPlugins();
        };
        return Plugin;
    }(AbstractRendererPlugin));

    /**
     * TODO: use clock from g later.
     */
    var clock$1 = typeof performance === 'object' && performance.now ? performance : Date;
    // 计算滑动的方向
    var calcDirection = function (start, end) {
        var xDistance = end.x - start.x;
        var yDistance = end.y - start.y;
        // x 的距离大于y 说明是横向，否则就是纵向
        if (Math.abs(xDistance) > Math.abs(yDistance)) {
            return xDistance > 0 ? 'right' : 'left';
        }
        return yDistance > 0 ? 'down' : 'up';
    };
    // 计算2点之间的距离
    var calcDistance = function (point1, point2) {
        var xDistance = Math.abs(point2.x - point1.x);
        var yDistance = Math.abs(point2.y - point1.y);
        return Math.sqrt(xDistance * xDistance + yDistance * yDistance);
    };
    var getCenter = function (point1, point2) {
        var x = point1.x + (point2.x - point1.x) / 2;
        var y = point1.y + (point2.y - point1.y) / 2;
        return { x: x, y: y };
    };

    var PRESS_DELAY = 250;
    var GesturePlugin = /** @class */ (function () {
        function GesturePlugin(options) {
            var _this = this;
            this.options = options;
            this.evCache = [];
            this.startPoints = [];
            // 用来记录当前触发的事件
            this.processEvent = {};
            this.throttleTimer = 0;
            this.emitThrottles = [];
            this._start = function (ev, target) {
                var _a;
                // 每次触点开始都重置事件
                _this.reset();
                // 记录touch start 的时间
                _this.startTime = clock$1.now();
                var _b = _this, evCache = _b.evCache, startPoints = _b.startPoints;
                if (ev) {
                    var pointerId_1 = ev.pointerId, x = ev.x, y = ev.y;
                    // evcache 已经存在的 pointerId, 做替换
                    var existIdx = evCache.findIndex(function (item) { return pointerId_1 === item.pointerId; });
                    if (existIdx !== -1) {
                        evCache.splice(existIdx, 1);
                    }
                    // evCache 不存在的 pointerId, 添加
                    evCache.push({
                        pointerId: pointerId_1,
                        x: x,
                        y: y,
                        ev: ev,
                    });
                    // @ts-ignore 对齐touches evCache 存在，touches 不存在，移除
                    var evTouches = __spreadArray([], __read((((_a = ev.nativeEvent) === null || _a === void 0 ? void 0 : _a.touches) || [])), false);
                    var _loop_1 = function (i) {
                        var isInTouches = evTouches.find(function (touch) {
                            return evCache[i].pointerId === touch.identifier;
                        });
                        // 在touches中存在
                        if (isInTouches) {
                            return "continue";
                        }
                        // 在touches中不存在
                        evCache.splice(i, 1);
                    };
                    for (var i = evCache.length - 1; i > -1; i--) {
                        _loop_1(i);
                    }
                }
                // 重置 startPoints
                startPoints.length = evCache.length;
                for (var i = 0; i < evCache.length; i++) {
                    var _c = evCache[i], x = _c.x, y = _c.y;
                    var point = { x: x, y: y };
                    startPoints[i] = point;
                }
                // 单指事件
                if (startPoints.length === 1) {
                    var event_1 = evCache[0].ev;
                    // 如果touchstart后停顿250ms, 则也触发press事件
                    // @ts-ignore
                    _this.pressTimeout = setTimeout(function () {
                        // 这里固定触发press事件
                        var eventType = 'press';
                        var direction = 'none';
                        event_1.direction = direction;
                        event_1.deltaX = 0;
                        event_1.deltaY = 0;
                        event_1.points = startPoints;
                        _this.emitStart(eventType, event_1, target);
                        event_1.type = eventType;
                        target.dispatchEvent(event_1);
                        _this.eventType = eventType;
                        _this.direction = direction;
                        _this.movingTarget = target;
                    }, PRESS_DELAY);
                    return;
                }
                // 目前只处理双指
                _this.startDistance = calcDistance(startPoints[0], startPoints[1]);
                _this.center = getCenter(startPoints[0], startPoints[1]);
            };
            this._move = function (ev, target) {
                _this.clearPressTimeout();
                var _a = _this, startPoints = _a.startPoints, evCache = _a.evCache;
                if (!startPoints.length)
                    return;
                var x = ev.x, y = ev.y, pointerId = ev.pointerId;
                // Find this event in the cache and update its record with this event
                for (var i = 0, len = evCache.length; i < len; i++) {
                    if (pointerId === evCache[i].pointerId) {
                        evCache[i] = {
                            pointerId: pointerId,
                            x: x,
                            y: y,
                            ev: ev,
                        };
                        break;
                    }
                }
                var point = { x: x, y: y };
                var points = evCache.map(function (ev) {
                    return { x: ev.x, y: ev.y };
                });
                // 记录最后2次move的时间和坐标，为了给swipe事件用
                var now = clock$1.now();
                _this.prevMoveTime = _this.lastMoveTime;
                _this.prevMovePoint = _this.lastMovePoint;
                _this.lastMoveTime = now;
                _this.lastMovePoint = point;
                if (startPoints.length === 1) {
                    var startPoint = startPoints[0];
                    var deltaX = x - startPoint.x;
                    var deltaY = y - startPoint.y;
                    var direction = _this.direction || calcDirection(startPoint, point);
                    _this.direction = direction;
                    // 获取press或者pan的事件类型
                    // press 按住滑动, pan表示平移
                    // 如果start后立刻move，则触发pan, 如果有停顿，则触发press
                    var eventType = _this.getEventType(point, target, ev);
                    ev.direction = direction;
                    ev.deltaX = deltaX;
                    ev.deltaY = deltaY;
                    ev.points = points;
                    _this.emitStart(eventType, ev, target);
                    ev.type = eventType;
                    _this.refreshAndGetTarget(target).dispatchEvent(ev);
                    return;
                }
                // 多指触控
                var startDistance = _this.startDistance;
                var currentDistance = calcDistance(points[0], points[1]);
                // 缩放比例
                ev.zoom = currentDistance / startDistance;
                ev.center = _this.center;
                ev.points = points;
                // 触发缩放事件
                _this.emitStart('pinch', ev, target);
                // touch 多指会被拆成多个手指的 move, 会触发多次 move，所以这里需要做节流
                _this._throttleEmit('pinch', ev, target);
            };
            this._end = function (ev, target) {
                var _a = _this, evCache = _a.evCache, startPoints = _a.startPoints;
                var points = evCache.map(function (ev) {
                    return { x: ev.x, y: ev.y };
                });
                ev.points = points;
                _this.emitEnd(ev, _this.refreshAndGetTarget(target));
                // 单指
                if (evCache.length === 1) {
                    // swipe事件处理, 在end之后触发
                    var now = clock$1.now();
                    var lastMoveTime = _this.lastMoveTime;
                    // 做这个判断是为了最后一次touchmove后到end前，是否还有一个停顿的过程
                    // 100 是拍的一个值，理论这个值会很短，一般不卡顿的话在10ms以内
                    if (now - lastMoveTime < 100) {
                        var prevMoveTime = _this.prevMoveTime || _this.startTime;
                        var intervalTime = lastMoveTime - prevMoveTime;
                        // 时间间隔一定要大于0, 否则计算没意义
                        if (intervalTime > 0) {
                            var prevMovePoint = _this.prevMovePoint || startPoints[0];
                            var lastMovePoint = _this.lastMovePoint || startPoints[0];
                            // move速率
                            var velocity = calcDistance(prevMovePoint, lastMovePoint) / intervalTime;
                            // 0.3 是参考hammerjs的设置
                            if (velocity > 0.3) {
                                ev.velocity = velocity;
                                ev.direction = calcDirection(prevMovePoint, lastMovePoint);
                                ev.type = 'swipe';
                                target.dispatchEvent(ev);
                            }
                        }
                    }
                }
                // remove event from cache
                for (var i = 0, len = evCache.length; i < len; i++) {
                    if (evCache[i].pointerId === ev.pointerId) {
                        evCache.splice(i, 1);
                        startPoints.splice(i, 1);
                        break;
                    }
                }
                _this.reset();
                // 多指离开 1 指后，重新触发一次start
                if (evCache.length > 0) {
                    _this._start(undefined, target);
                }
            };
            this._cancel = function (ev, target) {
                var evCache = _this.evCache;
                var points = evCache.map(function (ev) {
                    return { x: ev.x, y: ev.y };
                });
                ev.points = points;
                _this.emitEnd(ev, _this.refreshAndGetTarget(target));
                _this.evCache = [];
                _this.reset();
            };
        }
        GesturePlugin.prototype.apply = function (context) {
            var _this = this;
            var renderingService = context.renderingService, renderingContext = context.renderingContext;
            var document = renderingContext.root.ownerDocument;
            var canvas = document.defaultView;
            this.canvas = canvas;
            var getGestureEventTarget = function (target) {
                var isDocument = target === document;
                return isDocument && _this.options.isDocumentGestureEnabled
                    ? document
                    : target;
            };
            var handlePointermove = function (ev) {
                var target = getGestureEventTarget(ev.target);
                target && _this._move(ev, target);
            };
            var handlePointerdown = function (ev) {
                var target = getGestureEventTarget(ev.target);
                target && _this._start(ev, target);
            };
            var handlePointerup = function (ev) {
                var target = getGestureEventTarget(ev.target);
                target && _this._end(ev, target);
            };
            var handlePointercancel = function (ev) {
                var target = getGestureEventTarget(ev.target);
                target && _this._cancel(ev, target);
            };
            var handlePointercanceloutside = function (ev) {
                var target = getGestureEventTarget(ev.target);
                target && _this._end(ev, target);
            };
            renderingService.hooks.init.tap(GesturePlugin.tag, function () {
                canvas.addEventListener('pointermove', handlePointermove);
                canvas.addEventListener('pointerdown', handlePointerdown);
                canvas.addEventListener('pointerup', handlePointerup);
                canvas.addEventListener('pointercancel', handlePointercancel);
                canvas.addEventListener('pointerupoutside', handlePointercanceloutside);
            });
            renderingService.hooks.destroy.tap(GesturePlugin.tag, function () {
                canvas.removeEventListener('pointermove', handlePointermove);
                canvas.removeEventListener('pointerdown', handlePointerdown);
                canvas.removeEventListener('pointerup', handlePointerup);
                canvas.removeEventListener('pointercancel', handlePointercancel);
                canvas.removeEventListener('pointerupoutside', handlePointercanceloutside);
            });
        };
        GesturePlugin.prototype.getEventType = function (point, target, ev) {
            var _a = this, eventType = _a.eventType, startTime = _a.startTime, startPoints = _a.startPoints;
            if (eventType) {
                return eventType;
            }
            // move的时候缓存节点，后续move和end都会使用这个target派发事件
            this.movingTarget = target;
            // 冒泡路径中是否有pan事件
            this.isPanListenerInPath = ev.path.some(function (ele) { var _a, _b; return !!((_b = (_a = ele.emitter) === null || _a === void 0 ? void 0 : _a.eventNames()) === null || _b === void 0 ? void 0 : _b.includes('pan')); });
            var type;
            // 如果没有pan事件的监听，默认都是press
            if (!this.isPanListenerInPath) {
                type = 'press';
            }
            else {
                // 如果有pan事件的处理，press则需要停顿250ms, 且移动距离小于10
                var now = clock$1.now();
                if (now - startTime > PRESS_DELAY &&
                    calcDistance(startPoints[0], point) < 10) {
                    type = 'press';
                }
                else {
                    type = 'pan';
                }
            }
            this.eventType = type;
            return type;
        };
        GesturePlugin.prototype.enable = function (eventType) {
            this.processEvent[eventType] = true;
        };
        // 是否进行中的事件
        GesturePlugin.prototype.isProcess = function (eventType) {
            return this.processEvent[eventType];
        };
        // 触发start事件
        GesturePlugin.prototype.emitStart = function (type, ev, target) {
            if (this.isProcess(type)) {
                return;
            }
            this.enable(type);
            ev.type = "".concat(type, "start");
            target.dispatchEvent(ev);
        };
        // 触发事件
        GesturePlugin.prototype._throttleEmit = function (type, ev, target) {
            var _this = this;
            // 主要是节流处理
            this.pushEvent(type, ev);
            var _a = this, throttleTimer = _a.throttleTimer, emitThrottles = _a.emitThrottles, processEvent = _a.processEvent;
            if (throttleTimer) {
                return;
            }
            this.throttleTimer = this.canvas.requestAnimationFrame(function () {
                for (var i = 0, len = emitThrottles.length; i < len; i++) {
                    var _a = emitThrottles[i], type_1 = _a.type, ev_1 = _a.ev;
                    if (processEvent[type_1]) {
                        ev_1.type = type_1;
                        target.dispatchEvent(ev_1);
                    }
                }
                // 清空
                _this.throttleTimer = 0;
                _this.emitThrottles.length = 0;
            });
        };
        // 触发end事件
        GesturePlugin.prototype.emitEnd = function (ev, target) {
            var processEvent = this.processEvent;
            Object.keys(processEvent).forEach(function (type) {
                ev.type = "".concat(type, "end");
                target.dispatchEvent(ev);
                delete processEvent[type];
            });
        };
        GesturePlugin.prototype.pushEvent = function (type, ev) {
            var emitThrottles = this.emitThrottles;
            var newEvent = { type: type, ev: ev };
            for (var i = 0, len = emitThrottles.length; i < len; i++) {
                if (emitThrottles[i].type === type) {
                    emitThrottles.splice(i, 1, newEvent);
                    return;
                }
            }
            emitThrottles.push(newEvent);
        };
        GesturePlugin.prototype.clearPressTimeout = function () {
            if (this.pressTimeout) {
                clearTimeout(this.pressTimeout);
                this.pressTimeout = null;
            }
        };
        GesturePlugin.prototype.refreshAndGetTarget = function (target) {
            if (this.movingTarget) {
                // @ts-ignore
                if (this.movingTarget && !this.movingTarget.isConnected) {
                    this.movingTarget = target;
                }
                return this.movingTarget;
            }
            return target;
        };
        GesturePlugin.prototype.reset = function () {
            this.clearPressTimeout();
            this.startTime = 0;
            this.startDistance = 0;
            this.direction = null;
            this.eventType = null;
            this.prevMoveTime = 0;
            this.prevMovePoint = null;
            this.lastMoveTime = 0;
            this.lastMovePoint = null;
            this.movingTarget = null;
            this.isPanListenerInPath = null;
        };
        GesturePlugin.tag = 'Gesture';
        return GesturePlugin;
    }());

    var Plugin$6 = /** @class */ (function (_super) {
        __extends(Plugin, _super);
        function Plugin(options) {
            if (options === void 0) { options = {}; }
            var _this = _super.call(this) || this;
            _this.options = options;
            _this.name = 'gesture';
            return _this;
        }
        Plugin.prototype.init = function () {
            this.addRenderingPlugin(new GesturePlugin(__assign({ isDocumentGestureEnabled: false }, this.options)));
        };
        Plugin.prototype.destroy = function () {
            this.removeAllRenderingPlugins();
        };
        return Plugin;
    }(AbstractRendererPlugin));

    function isCanvasElement(el) {
        if (!el || typeof el !== 'object')
            return false;
        if (el.nodeType === 1 && el.nodeName) {
            // HTMLCanvasElement
            return true;
        }
        // CanvasElement
        return !!el.isCanvasElement;
    }

    var Canvas2DContextService = /** @class */ (function () {
        function Canvas2DContextService(context) {
            this.canvasConfig = context.config;
        }
        Canvas2DContextService.prototype.init = function () {
            return __awaiter(this, void 0, void 0, function () {
                var _a, canvas, devicePixelRatio, dpr;
                return __generator(this, function (_b) {
                    _a = this.canvasConfig, canvas = _a.canvas, devicePixelRatio = _a.devicePixelRatio;
                    this.$canvas = canvas;
                    // 实际获取到小程序环境的上下文
                    this.context = this.$canvas.getContext('2d');
                    dpr = devicePixelRatio || 1;
                    dpr = dpr >= 1 ? Math.ceil(dpr) : 1;
                    this.dpr = dpr;
                    this.resize(this.canvasConfig.width, this.canvasConfig.height);
                    return [2 /*return*/];
                });
            });
        };
        Canvas2DContextService.prototype.getContext = function () {
            return this.context;
        };
        Canvas2DContextService.prototype.getDomElement = function () {
            return this.$canvas;
        };
        Canvas2DContextService.prototype.getDPR = function () {
            return this.dpr;
        };
        Canvas2DContextService.prototype.getBoundingClientRect = function () {
            if (this.$canvas.getBoundingClientRect) {
                return this.$canvas.getBoundingClientRect();
            }
        };
        Canvas2DContextService.prototype.destroy = function () {
            // TODO: 小程序环境销毁 context
            this.context = null;
            this.$canvas = null;
        };
        Canvas2DContextService.prototype.resize = function (width, height) {
            var devicePixelRatio = this.canvasConfig.devicePixelRatio;
            var pixelRatio = devicePixelRatio;
            var canvasDOM = this.$canvas; // HTMLCanvasElement or canvasElement
            // 浏览器环境设置style样式
            if (canvasDOM.style) {
                canvasDOM.style.width = width + 'px';
                canvasDOM.style.height = height + 'px';
            }
            if (isCanvasElement(canvasDOM)) {
                canvasDOM.width = width * pixelRatio;
                canvasDOM.height = height * pixelRatio;
                if (pixelRatio !== 1) {
                    this.context.scale(pixelRatio, pixelRatio);
                }
            }
        };
        Canvas2DContextService.prototype.applyCursorStyle = function (cursor) {
            // 小程序环境无需设置鼠标样式
        };
        Canvas2DContextService.prototype.toDataURL = function (options) {
            return __awaiter(this, void 0, void 0, function () {
                var type, encoderOptions;
                return __generator(this, function (_a) {
                    type = options.type, encoderOptions = options.encoderOptions;
                    return [2 /*return*/, this.context.canvas.toDataURL(type, encoderOptions)];
                });
            });
        };
        return Canvas2DContextService;
    }());

    var ContextRegisterPlugin = /** @class */ (function (_super) {
        __extends(ContextRegisterPlugin, _super);
        function ContextRegisterPlugin() {
            var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
            _this.name = 'mobile-canvas-context-register';
            return _this;
        }
        ContextRegisterPlugin.prototype.init = function () {
            this.context.ContextService = Canvas2DContextService;
        };
        ContextRegisterPlugin.prototype.destroy = function () {
            delete this.context.ContextService;
        };
        return ContextRegisterPlugin;
    }(AbstractRendererPlugin));

    var Renderer = /** @class */ (function (_super) {
        __extends(Renderer, _super);
        function Renderer(config) {
            var _this = _super.call(this, config) || this;
            // register Canvas2DContext
            _this.registerPlugin(new ContextRegisterPlugin());
            _this.registerPlugin(new Plugin$4());
            _this.registerPlugin(new Plugin());
            // enable rendering with Canvas2D API
            _this.registerPlugin(new Plugin$2());
            _this.registerPlugin(new Plugin$5());
            // enable picking with Canvas2D API
            _this.registerPlugin(new Plugin$1());
            _this.registerPlugin(new Plugin$3({
                isDocumentDraggable: isNil(config === null || config === void 0 ? void 0 : config.isDocumentDraggable)
                    ? true
                    : config.isDocumentDraggable,
                isDocumentDroppable: isNil(config === null || config === void 0 ? void 0 : config.isDocumentDroppable)
                    ? true
                    : config.isDocumentDroppable,
                dragstartDistanceThreshold: isNil(config === null || config === void 0 ? void 0 : config.dragstartDistanceThreshold)
                    ? 10
                    : config.dragstartDistanceThreshold,
                dragstartTimeThreshold: isNil(config === null || config === void 0 ? void 0 : config.dragstartTimeThreshold)
                    ? 50
                    : config.dragstartTimeThreshold,
            }));
            _this.registerPlugin(new Plugin$6({
                isDocumentGestureEnabled: true,
            }));
            return _this;
        }
        return Renderer;
    }(AbstractRenderer));

    // 实现jsx-classic 入口
    function jsx(type, config) {
      var children = [];
      for (var _i = 2; _i < arguments.length; _i++) {
        children[_i - 2] = arguments[_i];
      }
      var _a = config || {},
        key = _a.key,
        ref = _a.ref,
        props = __rest(_a, ["key", "ref"]);
      // 保持和automatic模式一致
      if (children.length) {
        props.children = children.length === 1 ? children[0] : children;
      }
      return {
        key: key,
        ref: ref,
        type: type,
        props: props
      };
    }

    var fragment = (function (props) {
      return props.children;
    });

    var CanvasElement = /** @class */ (function () {
        function CanvasElement(ctx) {
            this.isCanvasElement = true;
            this.emitter = new eventemitter3();
            this.context = ctx;
            // 有可能是 node canvas 创建的 context 对象
            var canvas = ctx.canvas || {};
            this.width = canvas.width || 0;
            this.height = canvas.height || 0;
        }
        CanvasElement.prototype.getContext = function (contextId, contextAttributes) {
            return this.context;
        };
        CanvasElement.prototype.getBoundingClientRect = function () {
            var width = this.width;
            var height = this.height;
            // 默认都处理成可视窗口的顶部位置
            return {
                top: 0,
                right: width,
                bottom: height,
                left: 0,
                width: width,
                height: height,
                x: 0,
                y: 0,
            };
        };
        CanvasElement.prototype.addEventListener = function (type, listener, options) {
            // TODO: implement options
            this.emitter.on(type, listener);
        };
        CanvasElement.prototype.removeEventListener = function (type, listener, options) {
            this.emitter.off(type, listener);
        };
        /**
         * @see https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-dispatchEvent
         */
        CanvasElement.prototype.dispatchEvent = function (e) {
            this.emitter.emit(e.type, e);
            return true;
        };
        return CanvasElement;
    }());
    function supportEventListener(canvas) {
        if (!canvas) {
            return false;
        }
        // 非 HTMLCanvasElement
        if (canvas.nodeType !== 1 ||
            !canvas.nodeName ||
            canvas.nodeName.toLowerCase() !== 'canvas') {
            return false;
        }
        // 微信小程序canvas.getContext('2d')时也是CanvasRenderingContext2D
        // 也会有ctx.canvas, 而且nodeType也是1，所以还要在看下是否支持addEventListener
        var support = false;
        try {
            canvas.addEventListener('eventTest', function () {
                support = true;
            });
            canvas.dispatchEvent(new Event('eventTest'));
        }
        catch (error) {
            support = false;
        }
        return support;
    }
    function createMobileCanvasElement(ctx) {
        if (!ctx) {
            return null;
        }
        if (supportEventListener(ctx.canvas)) {
            return ctx.canvas;
        }
        return new CanvasElement(ctx);
    }

    function createUpdater(canvas) {
      var setStateQueue = [];
      function process() {
        var item;
        var renderComponents = [];
        var renderCallbackQueue = [];
        while (item = setStateQueue.shift()) {
          var state = item.state,
            component = item.component,
            callback = item.callback;
          // 组件已销毁，不再触发 setState
          if (component.destroyed) {
            continue;
          }
          // 如果没有prevState，则将当前的state作为初始的prevState
          if (!component.prevState) {
            component.prevState = Object.assign({}, component.state);
          }
          // 如果stateChange是一个方法，也就是setState的第二种形式
          if (typeof state === 'function') {
            Object.assign(component.state, state(component.prevState, component.props));
          } else {
            // 如果stateChange是一个对象，则直接合并到setState中
            Object.assign(component.state, state);
          }
          component.prevState = component.state;
          if (typeof callback === 'function') {
            renderCallbackQueue.push({
              callback: callback,
              component: component
            });
          }
          if (renderComponents.indexOf(component) < 0) {
            renderComponents.push(component);
          }
        }
        canvas.updateComponents(renderComponents);
        // callback queue
        commitRenderQueue(renderCallbackQueue);
      }
      function enqueueSetState(component, state, callback) {
        if (setStateQueue.length === 0) {
          setTimeout(process, 0);
        }
        setStateQueue.push({
          component: component,
          state: state,
          callback: callback
        });
      }
      function commitRenderQueue(callbackQueue) {
        for (var i = 0; i < callbackQueue.length; i++) {
          var _a = callbackQueue[i],
            callback = _a.callback,
            component = _a.component;
          callback.call(component);
        }
      }
      var updater = {
        // isMounted: function(publicInstance) {
        //   return false;
        // },
        enqueueForceUpdate: enqueueSetState,
        // enqueueReplaceState: function(publicInstance, completeState) {
        // },
        enqueueSetState: enqueueSetState
      };
      return updater;
    }

    var THEME = {
      fontSize: '24px',
      fontFamily: '"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif',
      pixelRatio: 1,
      padding: [0, 0, 0, 0]
    };

    var elementStyle = {
      fillStyle: 'String',
      font: 'String',
      globalAlpha: 'Number',
      lineCap: 'String',
      lineWidth: ['Number', 'String'],
      lineJoin: 'String',
      miterLimit: 'Number',
      shadowBlur: 'Number',
      shadowColor: 'String',
      shadowOffsetX: 'Number',
      shadowOffsetY: 'Number',
      strokeStyle: 'String',
      textAlign: 'String',
      textBaseline: 'String',
      lineDash: ['Array', 'Number'],
      shadow: 'String',
      matrix: 'Array',
      stroke: 'String',
      fill: ['String', 'Object'],
      opacity: 'Number',
      fillOpacity: 'Number',
      strokeOpacity: 'Number'
    };
    // css规则表 TODO：补充 / 多种类型
    var DEFAULT_CSS_RULE = {
      group: __assign({}, elementStyle),
      text: __assign(__assign({}, elementStyle), {
        x: 'Number',
        y: 'Number',
        text: 'String',
        width: 'Number',
        height: 'Number',
        fontSize: ['Number', 'String'],
        fontFamily: 'String',
        fontStyle: 'String',
        fontWeight: ['Number', 'String'],
        fontVariant: 'String'
      }),
      circle: __assign(__assign({}, elementStyle), {
        cx: 'Number',
        cy: 'Number',
        r: 'Number'
      }),
      path: __assign({}, elementStyle),
      ellipse: __assign(__assign({}, elementStyle), {
        cy: 'Number',
        cx: 'Number',
        ry: 'Number',
        rx: 'Number'
      }),
      rect: __assign(__assign({}, elementStyle), {
        width: 'Number',
        height: 'Number',
        x: 'Number',
        y: 'Number',
        radius: ['Array', 'Number']
      }),
      image: __assign(__assign({}, elementStyle), {
        width: 'Number',
        height: 'Number',
        x: 'Number',
        y: 'Number',
        img: 'String',
        src: 'String'
      }),
      line: __assign(__assign({}, elementStyle), {
        x1: 'Number',
        x2: 'Number',
        y1: 'Number',
        y2: 'Number'
      }),
      polyline: __assign(__assign({}, elementStyle), {
        points: 'Array',
        smooth: 'Boolean'
      }),
      polygon: __assign(__assign({}, elementStyle), {
        points: 'Array'
      }),
      arc: __assign(__assign({}, elementStyle), {
        x: 'Number',
        y: 'Number',
        r: 'Number',
        startAngle: ['Number', 'String'],
        endAngle: ['Number', 'String'],
        anticlockwise: 'Boolean'
      }),
      marker: __assign(__assign({}, elementStyle), {
        x: 'Number',
        y: 'Number',
        radius: 'Number',
        symbol: 'String'
      }),
      sector: __assign(__assign({}, elementStyle), {
        x: 'Number',
        y: 'Number',
        startAngle: ['Number', 'String'],
        endAngle: ['Number', 'String'],
        r: 'Number',
        r0: 'Number',
        anticlockwise: 'Boolean'
      })
    };
    function checkCSSRule(type, style) {
      if (!style) {
        return style;
      }
      var cssStyle = {};
      Object.keys(style).forEach(function (key) {
        var value = style[key];
        if (isNil(value)) {
          return;
        }
        var rule = DEFAULT_CSS_RULE[type] && DEFAULT_CSS_RULE[type][key];
        if (!rule) {
          cssStyle[key] = value;
          return;
        }
        var valueType = Object.prototype.toString.call(value);
        if (isArray(rule)) {
          for (var i = 0, len = rule.length; i < len; i++) {
            if (valueType === "[object ".concat(rule[i], "]")) {
              cssStyle[key] = value;
              return;
            }
          }
          // 没有匹配的类型
          return;
        }
        // string
        if (valueType === "[object ".concat(rule, "]")) {
          cssStyle[key] = value;
        }
      });
      return cssStyle;
    }

    // 默认设置50
    var ONE_REM;
    try {
      // xgraph下这段会抛错
      ONE_REM = parseInt(document.documentElement.style.fontSize, 10) || 50;
    } catch (e) {
      ONE_REM = 50;
    }
    var SCALE = ONE_REM / 100;
    /**
     * 像素转换
     * @param {Number} px - 750视觉稿像素
     * @return {Number} 屏幕上实际像素
     */
    function defaultPx2hd(px) {
      if (!px) {
        return 0;
      }
      return Number((px * SCALE).toFixed(1));
    }
    function parsePadding(padding) {
      if (isNumber(padding)) {
        return [padding, padding, padding, padding];
      }
      var top = padding[0];
      var right = isNumber(padding[1]) ? padding[1] : padding[0];
      var bottom = isNumber(padding[2]) ? padding[2] : top;
      var left = isNumber(padding[3]) ? padding[3] : right;
      return [top, right, bottom, left];
    }
    function batch2hd(px2hd) {
      var _batchPx2hd = function batchPx2hd(value) {
        // 处理带px的数据
        if (isString(value) && /^-?\d+(\.\d+)?px$/.test(value)) {
          var num = value.substr(0, value.length - 2);
          return px2hd(Number(num));
        }
        if (isArray(value)) {
          return value.map(function (v) {
            return _batchPx2hd(v);
          });
        }
        if (isPlainObject(value)) {
          var result = {};
          for (var key in value) {
            if (value.hasOwnProperty(key)) {
              var rst = _batchPx2hd(value[key]);
              if (!rst) {
                result[key] = rst;
                continue;
              }
              if (key === 'padding' || key === 'margin') {
                var paddingArray = parsePadding(rst);
                result[key] = paddingArray;
                result["".concat(key, "Top")] = paddingArray[0];
                result["".concat(key, "Right")] = paddingArray[1];
                result["".concat(key, "Bottom")] = paddingArray[2];
                result["".concat(key, "Left")] = paddingArray[3];
                continue;
              }
              result[key] = rst;
            }
          }
          return result;
        }
        // 默认直接返回
        return value;
      };
      return _batchPx2hd;
    }
    var px2hd = batch2hd(defaultPx2hd);

    /**
     * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationPlaybackEvent
     */
    // @ts-ignore
    var AnimationEvent = /** @class */ (function (_super) {
        __extends(AnimationEvent, _super);
        function AnimationEvent(manager, target, currentTime, timelineTime) {
            var _this = _super.call(this, manager) || this;
            _this.currentTime = currentTime;
            _this.timelineTime = timelineTime;
            // @ts-ignore
            _this.target = target;
            _this.type = 'finish';
            _this.bubbles = false;
            // @ts-ignore
            _this.currentTarget = target;
            _this.defaultPrevented = false;
            _this.eventPhase = _this.AT_TARGET;
            _this.timeStamp = Date.now();
            _this.currentTime = currentTime;
            _this.timelineTime = timelineTime;
            return _this;
        }
        return AnimationEvent;
    }(FederatedEvent));

    var sequenceNumber = 0;
    /**
     * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/Animation
     */
    var Animation = /** @class */ (function () {
        function Animation(effect, timeline) {
            var _a;
            this.currentTimePending = false;
            /**
             * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/playState
             */
            // playState: AnimationPlayState;
            this._idle = true;
            this._paused = false;
            this._finishedFlag = true;
            /**
             * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/currentTime
             */
            this._currentTime = 0;
            this._playbackRate = 1;
            this._inTimeline = true;
            this.effect = effect;
            effect.animation = this;
            this.timeline = timeline;
            this.id = "".concat(sequenceNumber++);
            this._inEffect = !!this.effect.update(0);
            this._totalDuration = Number((_a = this.effect) === null || _a === void 0 ? void 0 : _a.getComputedTiming().endTime);
            this._holdTime = 0;
            this._paused = false;
            this.oldPlayState = 'idle';
            this.updatePromises();
        }
        Object.defineProperty(Animation.prototype, "pending", {
            // animation: InternalAnimation | null;
            /**
             * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/pending
             */
            get: function () {
                return ((this._startTime === null && !this._paused && this.playbackRate !== 0) ||
                    this.currentTimePending);
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Animation.prototype, "playState", {
            get: function () {
                if (this._idle)
                    return 'idle';
                if (this._isFinished)
                    return 'finished';
                if (this._paused)
                    return 'paused';
                return 'running';
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Animation.prototype, "ready", {
            /**
             * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/ready
             * @example
              animation.pause();
              animation.ready.then(function() {
                // Displays 'running'
                alert(animation.playState);
              });
              animation.play();
             */
            get: function () {
                var _this = this;
                if (!this.readyPromise) {
                    if (this.timeline.animationsWithPromises.indexOf(this) === -1) {
                        this.timeline.animationsWithPromises.push(this);
                    }
                    this.readyPromise = new Promise(function (resolve, reject) {
                        _this.resolveReadyPromise = function () {
                            resolve(_this);
                        };
                        _this.rejectReadyPromise = function () {
                            reject(new Error());
                        };
                    });
                    if (!this.pending) {
                        this.resolveReadyPromise();
                    }
                }
                return this.readyPromise;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Animation.prototype, "finished", {
            /**
             * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/finished
             * @example
              Promise.all(
                elem.getAnimations().map(
                  function(animation) {
                    return animation.finished
                  }
                )
              ).then(
                function() {
                  return elem.remove();
                }
              );
             */
            get: function () {
                var _this = this;
                if (!this.finishedPromise) {
                    if (this.timeline.animationsWithPromises.indexOf(this) === -1) {
                        this.timeline.animationsWithPromises.push(this);
                    }
                    this.finishedPromise = new Promise(function (resolve, reject) {
                        _this.resolveFinishedPromise = function () {
                            resolve(_this);
                        };
                        _this.rejectFinishedPromise = function () {
                            reject(new Error());
                        };
                    });
                    if (this.playState === 'finished') {
                        this.resolveFinishedPromise();
                    }
                }
                return this.finishedPromise;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Animation.prototype, "currentTime", {
            get: function () {
                this.updatePromises();
                return this._idle || this.currentTimePending ? null : this._currentTime;
            },
            set: function (newTime) {
                var _a;
                newTime = Number(newTime);
                if (isNaN(newTime))
                    return;
                this.timeline.restart();
                if (!this._paused && this._startTime !== null) {
                    this._startTime =
                        Number((_a = this.timeline) === null || _a === void 0 ? void 0 : _a.currentTime) - newTime / this.playbackRate;
                }
                this.currentTimePending = false;
                if (this._currentTime === newTime) {
                    return;
                }
                if (this._idle) {
                    this._idle = false;
                    this._paused = true;
                }
                this.tickCurrentTime(newTime, true);
                this.timeline.applyDirtiedAnimation(this);
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Animation.prototype, "startTime", {
            get: function () {
                return this._startTime;
            },
            set: function (newTime) {
                if (newTime !== null) {
                    this.updatePromises();
                    newTime = Number(newTime);
                    if (isNaN(newTime))
                        return;
                    if (this._paused || this._idle)
                        return;
                    this._startTime = newTime;
                    this.tickCurrentTime((Number(this.timeline.currentTime) - this._startTime) *
                        this.playbackRate);
                    this.timeline.applyDirtiedAnimation(this);
                    this.updatePromises();
                }
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Animation.prototype, "playbackRate", {
            get: function () {
                return this._playbackRate;
            },
            set: function (value) {
                if (value === this._playbackRate) {
                    return;
                }
                this.updatePromises();
                var oldCurrentTime = this.currentTime;
                this._playbackRate = value;
                this.startTime = null;
                if (this.playState !== 'paused' && this.playState !== 'idle') {
                    this._finishedFlag = false;
                    this._idle = false;
                    this.ensureAlive();
                    this.timeline.applyDirtiedAnimation(this);
                }
                if (oldCurrentTime !== null) {
                    this.currentTime = oldCurrentTime;
                }
                this.updatePromises();
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Animation.prototype, "_isFinished", {
            get: function () {
                return (!this._idle &&
                    ((this._playbackRate > 0 &&
                        Number(this._currentTime) >= this._totalDuration) ||
                        (this._playbackRate < 0 && Number(this._currentTime) <= 0)));
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Animation.prototype, "totalDuration", {
            get: function () {
                return this._totalDuration;
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(Animation.prototype, "_needsTick", {
            get: function () {
                return this.pending || this.playState === 'running' || !this._finishedFlag;
            },
            enumerable: false,
            configurable: true
        });
        /**
         * state machine,
         * resolve/reject ready/finished Promise according to current state
         */
        Animation.prototype.updatePromises = function () {
            var oldPlayState = this.oldPlayState;
            var newPlayState = this.pending ? 'pending' : this.playState;
            if (this.readyPromise && newPlayState !== oldPlayState) {
                if (newPlayState === 'idle') {
                    this.rejectReadyPromise();
                    this.readyPromise = undefined;
                }
                else if (oldPlayState === 'pending') {
                    this.resolveReadyPromise();
                }
                else if (newPlayState === 'pending') {
                    this.readyPromise = undefined;
                }
            }
            if (this.finishedPromise && newPlayState !== oldPlayState) {
                if (newPlayState === 'idle') {
                    this.rejectFinishedPromise();
                    this.finishedPromise = undefined;
                }
                else if (newPlayState === 'finished') {
                    this.resolveFinishedPromise();
                }
                else if (oldPlayState === 'finished') {
                    this.finishedPromise = undefined;
                }
            }
            this.oldPlayState = newPlayState;
            return this.readyPromise || this.finishedPromise;
        };
        Animation.prototype.play = function () {
            this.updatePromises();
            this._paused = false;
            if (this._isFinished || this._idle) {
                this.rewind();
                this._startTime = null;
            }
            this._finishedFlag = false;
            this._idle = false;
            this.ensureAlive();
            this.timeline.applyDirtiedAnimation(this);
            if (this.timeline.animations.indexOf(this) === -1) {
                this.timeline.animations.push(this);
            }
            this.updatePromises();
        };
        Animation.prototype.pause = function () {
            this.updatePromises();
            if (this.currentTime) {
                this._holdTime = this.currentTime;
            }
            if (!this._isFinished && !this._paused && !this._idle) {
                this.currentTimePending = true;
            }
            else if (this._idle) {
                this.rewind();
                this._idle = false;
            }
            this._startTime = null;
            this._paused = true;
            this.updatePromises();
        };
        Animation.prototype.finish = function () {
            this.updatePromises();
            if (this._idle)
                return;
            this.currentTime = this._playbackRate > 0 ? this._totalDuration : 0;
            this._startTime = this._totalDuration - this.currentTime;
            this.currentTimePending = false;
            this.timeline.applyDirtiedAnimation(this);
            this.updatePromises();
        };
        Animation.prototype.cancel = function () {
            var _this = this;
            this.updatePromises();
            if (!this._inEffect)
                return;
            this._inEffect = false;
            this._idle = true;
            this._paused = false;
            this._finishedFlag = true;
            this._currentTime = 0;
            this._startTime = null;
            this.effect.update(null);
            // effects are invalid after cancellation as the animation state
            // needs to un-apply.
            this.timeline.applyDirtiedAnimation(this);
            this.updatePromises();
            /**
             * 1. Reject the current finished promise with a DOMException named "AbortError".
             * 2. Let current finished promise be a new promise
             * @see https://w3c.github.io/csswg-drafts/web-animations-1/#canceling-an-animation-section
             */
            // if (this.finishedPromise) {
            //   this.rejectFinishedPromise();
            //   this.finishedPromise = undefined;
            // }
            if (this.oncancel) {
                var event_1 = new AnimationEvent(null, this, this.currentTime, null);
                setTimeout(function () {
                    _this.oncancel(event_1);
                });
            }
        };
        Animation.prototype.reverse = function () {
            this.updatePromises();
            var oldCurrentTime = this.currentTime;
            this.playbackRate *= -1;
            this.play();
            if (oldCurrentTime !== null) {
                this.currentTime = oldCurrentTime;
            }
            this.updatePromises();
        };
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/updatePlaybackRate
         */
        Animation.prototype.updatePlaybackRate = function (playbackRate) {
            this.playbackRate = playbackRate;
        };
        Animation.prototype.targetAnimations = function () {
            var _a;
            var target = (_a = this.effect) === null || _a === void 0 ? void 0 : _a.target;
            return target.getAnimations();
        };
        Animation.prototype.markTarget = function () {
            var animations = this.targetAnimations();
            if (animations.indexOf(this) === -1) {
                animations.push(this);
            }
        };
        Animation.prototype.unmarkTarget = function () {
            var animations = this.targetAnimations();
            var index = animations.indexOf(this);
            if (index !== -1) {
                animations.splice(index, 1);
            }
        };
        Animation.prototype.tick = function (timelineTime, isAnimationFrame) {
            if (!this._idle && !this._paused) {
                if (this._startTime === null) {
                    if (isAnimationFrame) {
                        this.startTime = timelineTime - this._currentTime / this.playbackRate;
                    }
                }
                else if (!this._isFinished) {
                    this.tickCurrentTime((timelineTime - this._startTime) * this.playbackRate);
                }
            }
            if (isAnimationFrame) {
                this.currentTimePending = false;
                this.fireEvents(timelineTime);
            }
        };
        Animation.prototype.rewind = function () {
            if (this.playbackRate >= 0) {
                this.currentTime = 0;
            }
            else if (this._totalDuration < Infinity) {
                this.currentTime = this._totalDuration;
            }
            else {
                throw new Error('Unable to rewind negative playback rate animation with infinite duration');
            }
        };
        Animation.prototype.persist = function () {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        Animation.prototype.addEventListener = function (type, listener, options) {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        Animation.prototype.removeEventListener = function (type, listener, options) {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        Animation.prototype.dispatchEvent = function (event) {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        // replaceState: AnimationReplaceState;
        Animation.prototype.commitStyles = function () {
            throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
        };
        Animation.prototype.ensureAlive = function () {
            var _a, _b;
            // If an animation is playing backwards and is not fill backwards/both
            // then it should go out of effect when it reaches the start of its
            // active interval (currentTime === 0).
            if (this.playbackRate < 0 && this.currentTime === 0) {
                this._inEffect = !!((_a = this.effect) === null || _a === void 0 ? void 0 : _a.update(-1));
            }
            else {
                this._inEffect = !!((_b = this.effect) === null || _b === void 0 ? void 0 : _b.update(this.currentTime));
            }
            if (!this._inTimeline && (this._inEffect || !this._finishedFlag)) {
                this._inTimeline = true;
                this.timeline.animations.push(this);
            }
        };
        Animation.prototype.tickCurrentTime = function (newTime, ignoreLimit) {
            if (newTime !== this._currentTime) {
                this._currentTime = newTime;
                if (this._isFinished && !ignoreLimit) {
                    this._currentTime = this._playbackRate > 0 ? this._totalDuration : 0;
                }
                this.ensureAlive();
            }
        };
        Animation.prototype.fireEvents = function (baseTime) {
            var _this = this;
            if (this._isFinished) {
                if (!this._finishedFlag) {
                    if (this.onfinish) {
                        var event_2 = new AnimationEvent(null, this, this.currentTime, baseTime);
                        setTimeout(function () {
                            if (_this.onfinish) {
                                _this.onfinish(event_2);
                            }
                        });
                    }
                    this._finishedFlag = true;
                }
            }
            else {
                if (this.onframe && this.playState === 'running') {
                    var event_3 = new AnimationEvent(null, this, this.currentTime, baseTime);
                    this.onframe(event_3);
                }
                this._finishedFlag = false;
            }
        };
        return Animation;
    }());

    /**
     * https://github.com/gre/bezier-easing
     * BezierEasing - use bezier curve for transition easing function
     * by Gaëtan Renaudeau 2014 - 2015 – MIT License
     */
    // These values are established by empiricism with tests (tradeoff: performance VS precision)
    var NEWTON_ITERATIONS = 4;
    var NEWTON_MIN_SLOPE = 0.001;
    var SUBDIVISION_PRECISION = 0.0000001;
    var SUBDIVISION_MAX_ITERATIONS = 10;
    var kSplineTableSize = 11;
    var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
    var float32ArraySupported = typeof Float32Array === 'function';
    var A = function (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; };
    var B = function (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; };
    var C = function (aA1) { return 3.0 * aA1; };
    // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
    var calcBezier = function (aT, aA1, aA2) {
        return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT;
    };
    // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
    var getSlope = function (aT, aA1, aA2) {
        return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
    };
    var binarySubdivide = function (aX, aA, aB, mX1, mX2) {
        var currentX, currentT, i = 0;
        do {
            currentT = aA + (aB - aA) / 2.0;
            currentX = calcBezier(currentT, mX1, mX2) - aX;
            if (currentX > 0.0)
                aB = currentT;
            else
                aA = currentT;
        } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
        return currentT;
    };
    var newtonRaphsonIterate = function (aX, aGuessT, mX1, mX2) {
        for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
            var currentSlope = getSlope(aGuessT, mX1, mX2);
            if (currentSlope === 0.0)
                return aGuessT;
            var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
            aGuessT -= currentX / currentSlope;
        }
        return aGuessT;
    };
    var bezier = function (mX1, mY1, mX2, mY2) {
        if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1))
            throw new Error('bezier x values must be in [0, 1] range');
        if (mX1 === mY1 && mX2 === mY2)
            return function (t) { return t; };
        // Precompute samples table
        var sampleValues = float32ArraySupported
            ? new Float32Array(kSplineTableSize)
            : new Array(kSplineTableSize);
        for (var i = 0; i < kSplineTableSize; ++i) {
            sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
        }
        var getTForX = function (aX) {
            var intervalStart = 0.0;
            var currentSample = 1;
            var lastSample = kSplineTableSize - 1;
            for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample)
                intervalStart += kSampleStepSize;
            --currentSample;
            // Interpolate to provide an initial guess for t
            var dist = (aX - sampleValues[currentSample]) /
                (sampleValues[currentSample + 1] - sampleValues[currentSample]);
            var guessForT = intervalStart + dist * kSampleStepSize;
            var initialSlope = getSlope(guessForT, mX1, mX2);
            if (initialSlope >= NEWTON_MIN_SLOPE)
                return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
            else if (initialSlope === 0.0)
                return guessForT;
            else {
                return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
            }
        };
        return function (t) {
            // Because JavaScript number are imprecise, we should guarantee the extremes are right.
            if (t === 0 || t === 1)
                return t;
            return calcBezier(getTForX(t), mY1, mY2);
        };
    };

    var convertToDash = function (str) {
        str = str.replace(/([A-Z])/g, function (letter) { return "-".concat(letter.toLowerCase()); });
        // Remove first dash
        return str.charAt(0) === '-' ? str.substring(1) : str;
    };
    /**
      Easing Functions from anime.js, they are tried and true, so, its better to use them instead of other alternatives
    */
    var Quad = function (t) { return Math.pow(t, 2); };
    var Cubic = function (t) { return Math.pow(t, 3); };
    var Quart = function (t) { return Math.pow(t, 4); };
    var Quint = function (t) { return Math.pow(t, 5); };
    var Expo = function (t) { return Math.pow(t, 6); };
    var Sine = function (t) { return 1 - Math.cos((t * Math.PI) / 2); };
    var Circ = function (t) { return 1 - Math.sqrt(1 - t * t); };
    var Back = function (t) { return t * t * (3 * t - 2); };
    var Bounce = function (t) {
        var pow2, b = 4;
        while (t < ((pow2 = Math.pow(2, --b)) - 1) / 11) { }
        return 1 / Math.pow(4, 3 - b) - 7.5625 * Math.pow((pow2 * 3 - 2) / 22 - t, 2);
    };
    var Elastic = function (t, params) {
        if (params === void 0) { params = []; }
        var _a = __read(params, 2), _b = _a[0], amplitude = _b === void 0 ? 1 : _b, _c = _a[1], period = _c === void 0 ? 0.5 : _c;
        var a = clamp(Number(amplitude), 1, 10);
        var p = clamp(Number(period), 0.1, 2);
        if (t === 0 || t === 1)
            return t;
        return (-a *
            Math.pow(2, 10 * (t - 1)) *
            Math.sin(((t - 1 - (p / (Math.PI * 2)) * Math.asin(1 / a)) * (Math.PI * 2)) / p));
    };
    var Spring = function (t, params, duration) {
        if (params === void 0) { params = []; }
        var _a = __read(params, 4), _b = _a[0], mass = _b === void 0 ? 1 : _b, _c = _a[1], stiffness = _c === void 0 ? 100 : _c, _d = _a[2], damping = _d === void 0 ? 10 : _d, _e = _a[3], velocity = _e === void 0 ? 0 : _e;
        mass = clamp(mass, 0.1, 1000);
        stiffness = clamp(stiffness, 0.1, 1000);
        damping = clamp(damping, 0.1, 1000);
        velocity = clamp(velocity, 0.1, 1000);
        var w0 = Math.sqrt(stiffness / mass);
        var zeta = damping / (2 * Math.sqrt(stiffness * mass));
        var wd = zeta < 1 ? w0 * Math.sqrt(1 - zeta * zeta) : 0;
        var a = 1;
        var b = zeta < 1 ? (zeta * w0 + -velocity) / wd : -velocity + w0;
        var progress = duration ? (duration * t) / 1000 : t;
        if (zeta < 1) {
            progress =
                Math.exp(-progress * zeta * w0) * (a * Math.cos(wd * progress) + b * Math.sin(wd * progress));
        }
        else {
            progress = (a + b * progress) * Math.exp(-progress * w0);
        }
        if (t === 0 || t === 1)
            return t;
        return 1 - progress;
    };
    /**
     * Cache the durations at set easing parameters
     */
    // export const EasingDurationCache: Map<string | TypeEasingFunction, number> = new Map();
    /**
     * The threshold for an infinite loop
     */
    // const INTINITE_LOOP_LIMIT = 10000;
    /** Convert easing parameters to Array of numbers, e.g. "spring(2, 500)" to [2, 500] */
    // export const parseEasingParameters = (str: string) => {
    //   const match = /(\(|\s)([^)]+)\)?/.exec(str);
    //   return match
    //     ? match[2].split(',').map((value) => {
    //         const num = parseFloat(value);
    //         return !Number.isNaN(num) ? num : value.trim();
    //       })
    //     : [];
    // };
    /**
     * The spring easing function will only look smooth at certain durations, with certain parameters.
     * This functions returns the optimal duration to create a smooth springy animation based on physics
     *
     * Note: it can also be used to determine the optimal duration of other types of easing function, but be careful of 'in-'
     * easing functions, because of the nature of the function it can sometimes create an infinite loop, I suggest only using
     * `getEasingDuration` for `spring`, specifically 'out-spring' and 'spring'
     */
    // export const getEasingDuration = (easing: string | TypeEasingFunction = 'spring') => {
    //   if (EasingDurationCache.has(easing)) return EasingDurationCache.get(easing);
    //   // eslint-disable-next-line @typescript-eslint/no-use-before-define
    //   const easingFunction = typeof easing == 'function' ? easing : getEasingFunction(easing as string);
    //   const params = typeof easing == 'function' ? [] : parseEasingParameters(easing);
    //   const frame = 1 / 6;
    //   let elapsed = 0;
    //   let rest = 0;
    //   let count = 0;
    //   while (++count < INTINITE_LOOP_LIMIT) {
    //     elapsed += frame;
    //     if (easingFunction(elapsed, params, undefined) === 1) {
    //       rest++;
    //       if (rest >= 16) break;
    //     } else {
    //       rest = 0;
    //     }
    //   }
    //   const duration = elapsed * frame * 1000;
    //   EasingDurationCache.set(easing, duration);
    //   return duration;
    // };
    /**
      These Easing Functions are based off of the Sozi Project's easing functions
      https://github.com/sozi-projects/Sozi/blob/d72e44ebd580dc7579d1e177406ad41e632f961d/src/js/player/Timing.js
    */
    var Steps = function (t, params) {
        if (params === void 0) { params = []; }
        var _a = __read(params, 2), _b = _a[0], steps = _b === void 0 ? 10 : _b, type = _a[1];
        var trunc = type == 'start' ? Math.ceil : Math.floor;
        return trunc(clamp(t, 0, 1) * steps) / steps;
    };
    // @ts-ignore
    var Bezier = function (t, params) {
        if (params === void 0) { params = []; }
        var _a = __read(params, 4), mX1 = _a[0], mY1 = _a[1], mX2 = _a[2], mY2 = _a[3];
        return bezier(mX1, mY1, mX2, mY2)(t);
    };
    /** The default `ease-in` easing function */
    var easein = bezier(0.42, 0.0, 1.0, 1.0);
    /** Converts easing functions to their `out`counter parts */
    var EaseOut = function (ease) {
        return function (t, params, duration) {
            if (params === void 0) { params = []; }
            return 1 - ease(1 - t, params, duration);
        };
    };
    /** Converts easing functions to their `in-out` counter parts */
    var EaseInOut = function (ease) {
        return function (t, params, duration) {
            if (params === void 0) { params = []; }
            return t < 0.5 ? ease(t * 2, params, duration) / 2 : 1 - ease(t * -2 + 2, params, duration) / 2;
        };
    };
    /** Converts easing functions to their `out-in` counter parts */
    var EaseOutIn = function (ease) {
        return function (t, params, duration) {
            if (params === void 0) { params = []; }
            return t < 0.5
                ? (1 - ease(1 - t * 2, params, duration)) / 2
                : (ease(t * 2 - 1, params, duration) + 1) / 2;
        };
    };
    var EasingFunctions = {
        steps: Steps,
        'step-start': function (t) { return Steps(t, [1, 'start']); },
        'step-end': function (t) { return Steps(t, [1, 'end']); },
        linear: function (t) { return t; },
        'cubic-bezier': Bezier,
        ease: function (t) { return Bezier(t, [0.25, 0.1, 0.25, 1.0]); },
        in: easein,
        out: EaseOut(easein),
        'in-out': EaseInOut(easein),
        'out-in': EaseOutIn(easein),
        'in-quad': Quad,
        'out-quad': EaseOut(Quad),
        'in-out-quad': EaseInOut(Quad),
        'out-in-quad': EaseOutIn(Quad),
        'in-cubic': Cubic,
        'out-cubic': EaseOut(Cubic),
        'in-out-cubic': EaseInOut(Cubic),
        'out-in-cubic': EaseOutIn(Cubic),
        'in-quart': Quart,
        'out-quart': EaseOut(Quart),
        'in-out-quart': EaseInOut(Quart),
        'out-in-quart': EaseOutIn(Quart),
        'in-quint': Quint,
        'out-quint': EaseOut(Quint),
        'in-out-quint': EaseInOut(Quint),
        'out-in-quint': EaseOutIn(Quint),
        'in-expo': Expo,
        'out-expo': EaseOut(Expo),
        'in-out-expo': EaseInOut(Expo),
        'out-in-expo': EaseOutIn(Expo),
        'in-sine': Sine,
        'out-sine': EaseOut(Sine),
        'in-out-sine': EaseInOut(Sine),
        'out-in-sine': EaseOutIn(Sine),
        'in-circ': Circ,
        'out-circ': EaseOut(Circ),
        'in-out-circ': EaseInOut(Circ),
        'out-in-circ': EaseOutIn(Circ),
        'in-back': Back,
        'out-back': EaseOut(Back),
        'in-out-back': EaseInOut(Back),
        'out-in-back': EaseOutIn(Back),
        'in-bounce': Bounce,
        'out-bounce': EaseOut(Bounce),
        'in-out-bounce': EaseInOut(Bounce),
        'out-in-bounce': EaseOutIn(Bounce),
        'in-elastic': Elastic,
        'out-elastic': EaseOut(Elastic),
        'in-out-elastic': EaseInOut(Elastic),
        'out-in-elastic': EaseOutIn(Elastic),
        spring: Spring,
        'spring-in': Spring,
        'spring-out': EaseOut(Spring),
        'spring-in-out': EaseInOut(Spring),
        'spring-out-in': EaseOutIn(Spring),
    };
    /**
     * Convert string easing to their proper form
     */
    var complexEasingSyntax = function (ease) {
        return convertToDash(ease)
            .replace(/^ease-/, '') // Remove the "ease-" keyword
            .replace(/(\(|\s).+/, '') // Remove the function brackets and parameters
            .toLowerCase()
            .trim();
    };
    /** Re-maps a number from one range to another. Numbers outside the range are not clamped to 0 and 1, because out-of-range values are often intentional and useful. */
    var getEasingFunction = function (ease) {
        return EasingFunctions[complexEasingSyntax(ease)] || EasingFunctions.linear;
    };
    // /**
    //  * Allows you to register new easing functions
    //  */
    // export const registerEasingFunction = (key: string, fn: TypeEasingFunction) => {
    //   Object.assign(EasingFunctions, {
    //     [key]: fn,
    //   });
    // };
    // /**
    //  * Allows you to register multiple new easing functions
    //  */
    // export const registerEasingFunctions = (...obj: typeof EasingFunctions[]) => {
    //   Object.assign(EasingFunctions, ...obj);
    // };

    var linear = function (x) {
        return x;
    };
    var Start = 1;
    var Middle = 0.5;
    var End = 0;
    function step(count, pos) {
        return function (x) {
            if (x >= 1) {
                return 1;
            }
            var stepSize = 1 / count;
            x += pos * stepSize;
            return x - (x % stepSize);
        };
    }
    var numberString = '\\s*(-?\\d+\\.?\\d*|-?\\.\\d+)\\s*';
    var cubicBezierRe = new RegExp('cubic-bezier\\(' +
        numberString +
        ',' +
        numberString +
        ',' +
        numberString +
        ',' +
        numberString +
        '\\)');
    var step1Re = /steps\(\s*(\d+)\s*\)/;
    var step2Re = /steps\(\s*(\d+)\s*,\s*(start|middle|end)\s*\)/;
    function parseEasingFunction(normalizedEasing) {
        var cubicData = cubicBezierRe.exec(normalizedEasing);
        if (cubicData) {
            // @ts-ignore
            return bezier.apply(void 0, __spreadArray([], __read(cubicData.slice(1).map(Number)), false));
        }
        var step1Data = step1Re.exec(normalizedEasing);
        if (step1Data) {
            return step(Number(step1Data[1]), End);
        }
        var step2Data = step2Re.exec(normalizedEasing);
        if (step2Data) {
            // @ts-ignore
            return step(Number(step2Data[1]), { start: Start, middle: Middle, end: End }[step2Data[2]]);
        }
        return getEasingFunction(normalizedEasing);
    }
    function calculateActiveDuration(timing) {
        // @ts-ignore
        return Math.abs(repeatedDuration(timing) / (timing.playbackRate || 1));
    }
    function repeatedDuration(timing) {
        var _a;
        // https://drafts.csswg.org/web-animations/#calculating-the-active-duration
        if (timing.duration === 0 || timing.iterations === 0) {
            return 0;
        }
        // @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/duration#value
        // if (timing.duration === 'auto') {
        //   timing.duration = 0;
        // }
        return (timing.duration === 'auto' ? 0 : Number(timing.duration)) * ((_a = timing.iterations) !== null && _a !== void 0 ? _a : 1);
    }
    var PhaseNone = 0;
    var PhaseBefore = 1;
    var PhaseAfter = 2;
    var PhaseActive = 3;
    function calculatePhase(activeDuration, localTime, timing) {
        // https://drafts.csswg.org/web-animations/#animation-effect-phases-and-states
        if (localTime === null) {
            return PhaseNone;
        }
        var endTime = timing.endTime;
        if (localTime < Math.min(timing.delay, endTime)) {
            return PhaseBefore;
        }
        if (localTime >= Math.min(timing.delay + activeDuration + timing.endDelay, endTime)) {
            return PhaseAfter;
        }
        return PhaseActive;
    }
    function calculateActiveTime(activeDuration, fillMode, localTime, phase, delay) {
        // https://drafts.csswg.org/web-animations/#calculating-the-active-time
        switch (phase) {
            case PhaseBefore:
                if (fillMode === 'backwards' || fillMode === 'both')
                    return 0;
                return null;
            case PhaseActive:
                return localTime - delay;
            case PhaseAfter:
                if (fillMode === 'forwards' || fillMode === 'both')
                    return activeDuration;
                return null;
            case PhaseNone:
                return null;
        }
    }
    function calculateOverallProgress(iterationDuration, phase, iterations, activeTime, iterationStart) {
        // https://drafts.csswg.org/web-animations/#calculating-the-overall-progress
        var overallProgress = iterationStart;
        if (iterationDuration === 0) {
            if (phase !== PhaseBefore) {
                overallProgress += iterations;
            }
        }
        else {
            overallProgress += activeTime / iterationDuration;
        }
        return overallProgress;
    }
    function calculateSimpleIterationProgress(overallProgress, iterationStart, phase, iterations, activeTime, iterationDuration) {
        // https://drafts.csswg.org/web-animations/#calculating-the-simple-iteration-progress
        var simpleIterationProgress = overallProgress === Infinity ? iterationStart % 1 : overallProgress % 1;
        if (simpleIterationProgress === 0 &&
            phase === PhaseAfter &&
            iterations !== 0 &&
            (activeTime !== 0 || iterationDuration === 0)) {
            simpleIterationProgress = 1;
        }
        return simpleIterationProgress;
    }
    function calculateCurrentIteration(phase, iterations, simpleIterationProgress, overallProgress) {
        // https://drafts.csswg.org/web-animations/#calculating-the-current-iteration
        if (phase === PhaseAfter && iterations === Infinity) {
            return Infinity;
        }
        if (simpleIterationProgress === 1) {
            return Math.floor(overallProgress) - 1;
        }
        return Math.floor(overallProgress);
    }
    function calculateDirectedProgress(playbackDirection, currentIteration, simpleIterationProgress) {
        // https://drafts.csswg.org/web-animations/#calculating-the-directed-progress
        var currentDirection = playbackDirection;
        if (playbackDirection !== 'normal' && playbackDirection !== 'reverse') {
            var d = currentIteration;
            if (playbackDirection === 'alternate-reverse') {
                d += 1;
            }
            currentDirection = 'normal';
            if (d !== Infinity && d % 2 !== 0) {
                currentDirection = 'reverse';
            }
        }
        if (currentDirection === 'normal') {
            return simpleIterationProgress;
        }
        return 1 - simpleIterationProgress;
    }
    function calculateIterationProgress(activeDuration, localTime, timing) {
        var phase = calculatePhase(activeDuration, localTime, timing);
        var activeTime = calculateActiveTime(activeDuration, timing.fill, localTime, phase, timing.delay);
        if (activeTime === null)
            return null;
        var duration = timing.duration === 'auto' ? 0 : timing.duration;
        var overallProgress = calculateOverallProgress(duration, phase, timing.iterations, activeTime, timing.iterationStart);
        var simpleIterationProgress = calculateSimpleIterationProgress(overallProgress, timing.iterationStart, phase, timing.iterations, activeTime, duration);
        var currentIteration = calculateCurrentIteration(phase, timing.iterations, simpleIterationProgress, overallProgress);
        var directedProgress = calculateDirectedProgress(timing.direction, currentIteration, simpleIterationProgress);
        timing.currentIteration = currentIteration;
        timing.progress = directedProgress;
        // https://drafts.csswg.org/web-animations/#calculating-the-transformed-progress
        // https://drafts.csswg.org/web-animations/#calculating-the-iteration-progress
        return timing.easingFunction(directedProgress);
    }

    function convertEffectInput(keyframes, timing, target) {
        var propertySpecificKeyframeGroups = makePropertySpecificKeyframeGroups(keyframes, timing);
        var interpolations = makeInterpolations(propertySpecificKeyframeGroups, target);
        return function (target, fraction) {
            if (fraction !== null) {
                interpolations
                    .filter(function (interpolation) {
                    return (fraction >= interpolation.applyFrom &&
                        fraction < interpolation.applyTo);
                })
                    .forEach(function (interpolation) {
                    var offsetFraction = fraction - interpolation.startOffset;
                    var localDuration = interpolation.endOffset - interpolation.startOffset;
                    var scaledLocalTime = localDuration === 0
                        ? 0
                        : interpolation.easingFunction(offsetFraction / localDuration);
                    // apply updated attribute
                    target.setAttribute(interpolation.property, interpolation.interpolation(scaledLocalTime), false, false);
                    // if (interpolation.property === 'visibility') {
                    //   console.log(
                    //     scaledLocalTime,
                    //     interpolation.interpolation(scaledLocalTime),
                    //   );
                    // }
                });
            }
            else {
                for (var property in propertySpecificKeyframeGroups)
                    if (isNotReservedWord(property)) {
                        // clear attribute
                        target.setAttribute(property, null);
                    }
            }
        };
    }
    function isNotReservedWord(member) {
        return (member !== 'offset' &&
            member !== 'easing' &&
            member !== 'composite' &&
            member !== 'computedOffset');
    }
    function makePropertySpecificKeyframeGroups(keyframes, timing) {
        var propertySpecificKeyframeGroups = {};
        for (var i = 0; i < keyframes.length; i++) {
            for (var member in keyframes[i]) {
                if (isNotReservedWord(member)) {
                    var propertySpecificKeyframe = {
                        offset: keyframes[i].offset,
                        computedOffset: keyframes[i].computedOffset,
                        easing: keyframes[i].easing,
                        easingFunction: parseEasingFunction(keyframes[i].easing) || timing.easingFunction,
                        value: keyframes[i][member],
                    };
                    propertySpecificKeyframeGroups[member] =
                        propertySpecificKeyframeGroups[member] || [];
                    propertySpecificKeyframeGroups[member].push(propertySpecificKeyframe);
                }
            }
        }
        return propertySpecificKeyframeGroups;
    }
    function makeInterpolations(propertySpecificKeyframeGroups, target) {
        var interpolations = [];
        for (var groupName in propertySpecificKeyframeGroups) {
            var keyframes = propertySpecificKeyframeGroups[groupName];
            for (var i = 0; i < keyframes.length - 1; i++) {
                var startIndex = i;
                var endIndex = i + 1;
                var startOffset = keyframes[startIndex].computedOffset;
                var endOffset = keyframes[endIndex].computedOffset;
                var applyFrom = startOffset;
                var applyTo = endOffset;
                if (i === 0) {
                    applyFrom = -Infinity;
                    if (endOffset === 0) {
                        endIndex = startIndex;
                    }
                }
                if (i === keyframes.length - 2) {
                    applyTo = Infinity;
                    if (startOffset === 1) {
                        startIndex = endIndex;
                    }
                }
                interpolations.push({
                    applyFrom: applyFrom,
                    applyTo: applyTo,
                    startOffset: keyframes[startIndex].computedOffset,
                    endOffset: keyframes[endIndex].computedOffset,
                    easingFunction: keyframes[startIndex].easingFunction,
                    property: groupName,
                    interpolation: propertyInterpolation(groupName, keyframes[startIndex].value, keyframes[endIndex].value, target),
                });
            }
        }
        interpolations.sort(function (leftInterpolation, rightInterpolation) {
            return leftInterpolation.startOffset - rightInterpolation.startOffset;
        });
        return interpolations;
    }
    var InterpolationFactory = function (from, to, 
    // eslint-disable-next-line @typescript-eslint/ban-types
    convertToString) {
        return function (f) {
            var interpolated = interpolate(from, to, f);
            return !runtime.enableCSSParsing && isNumber(interpolated)
                ? interpolated
                : convertToString(interpolated);
        };
    };
    function propertyInterpolation(property, left, right, target) {
        var metadata = propertyMetadataCache[property];
        // discrete step
        // if (property === 'visibility') {
        //   return function (t: number) {
        //     if (t === 0) return left;
        //     if (t === 1) return right;
        //     debugger;
        //     return t < 0.5 ? left : right;
        //   };
        // }
        if (metadata && metadata.syntax && metadata.int) {
            var propertyHandler = runtime.styleValueRegistry.getPropertySyntax(metadata.syntax);
            if (propertyHandler) {
                var usedLeft = void 0;
                var usedRight = void 0;
                if (runtime.enableCSSParsing) {
                    var computedLeft = runtime.styleValueRegistry.parseProperty(property, left, target, false);
                    var computedRight = runtime.styleValueRegistry.parseProperty(property, right, target, false);
                    usedLeft = runtime.styleValueRegistry.computeProperty(property, computedLeft, target, false);
                    usedRight = runtime.styleValueRegistry.computeProperty(property, computedRight, target, false);
                }
                else {
                    var parser = propertyHandler.parserWithCSSDisabled;
                    usedLeft = parser ? parser(left, target) : left;
                    usedRight = parser ? parser(right, target) : right;
                }
                // merger [left, right, n2string()]
                var interpolationArgs = propertyHandler.mixer(usedLeft, usedRight, target);
                if (interpolationArgs) {
                    var interp_1 = InterpolationFactory.apply(void 0, __spreadArray([], __read(interpolationArgs), false));
                    return function (t) {
                        if (t === 0)
                            return left;
                        if (t === 1)
                            return right;
                        return interp_1(t);
                    };
                }
            }
        }
        // eslint-disable-next-line @typescript-eslint/no-use-before-define
        return InterpolationFactory(false, true, function (bool) {
            return bool ? right : left;
        });
    }
    /**
     * interpolate with number, boolean, number[], boolean[]
     */
    function interpolate(from, to, f) {
        if (typeof from === 'number' && typeof to === 'number') {
            return from * (1 - f) + to * f;
        }
        if ((typeof from === 'boolean' && typeof to === 'boolean') ||
            (typeof from === 'string' && typeof to === 'string') // skip string, eg. path ['M', 10, 10]
        ) {
            return f < 0.5 ? from : to;
        }
        if (Array.isArray(from) && Array.isArray(to)) {
            // interpolate arrays/matrix
            var fromLength = from.length;
            var toLength = to.length;
            var length_1 = Math.max(fromLength, toLength);
            var r = [];
            for (var i = 0; i < length_1; i++) {
                r.push(interpolate(from[i < fromLength ? i : fromLength - 1], to[i < toLength ? i : toLength - 1], f));
            }
            return r;
        }
        throw new Error('Mismatched interpolation arguments ' + from + ':' + to);
    }

    /**
     * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming
     */
    var AnimationEffectTiming = /** @class */ (function () {
        function AnimationEffectTiming() {
            /**
             * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/delay
             */
            this.delay = 0;
            /**
             * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/direction
             */
            this.direction = 'normal';
            /**
             * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/duration
             */
            this.duration = 'auto';
            /**
             * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/easing
             */
            this._easing = 'linear';
            this.easingFunction = linear;
            /**
             * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/endDelay
             */
            this.endDelay = 0;
            /**
             * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/fill
             */
            this.fill = 'auto';
            /**
             * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/iterationStart
             */
            this.iterationStart = 0;
            /**
             * @see https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/iterations
             */
            this.iterations = 1;
            this.currentIteration = null;
            this.progress = null;
        }
        Object.defineProperty(AnimationEffectTiming.prototype, "easing", {
            get: function () {
                return this._easing;
            },
            set: function (value) {
                this.easingFunction = parseEasingFunction(value);
                this._easing = value;
            },
            enumerable: false,
            configurable: true
        });
        return AnimationEffectTiming;
    }());

    /**
     * @example
      {
        translateY: [200, 300],
        scale: [1, 10],
      }

     * groups' length can be different, the following config should generate 3 frames:
      @example
      {
        translateY: [200, 300, 400],
        scale: [1, 10],
      }
     */
    function convertToArrayForm(effectInput) {
        var normalizedEffectInput = [];
        for (var property in effectInput) {
            // skip reserved props
            if (property in ['easing', 'offset', 'composite']) {
                continue;
            }
            // @ts-ignore
            var values = effectInput[property];
            if (!Array.isArray(values)) {
                values = [values];
            }
            var numKeyframes = values.length;
            for (var i = 0; i < numKeyframes; i++) {
                if (!normalizedEffectInput[i]) {
                    var keyframe = {};
                    if ('offset' in effectInput) {
                        keyframe.offset = Number(effectInput.offset);
                    }
                    if ('easing' in effectInput) {
                        // @ts-ignore
                        keyframe.easing = effectInput.easing;
                    }
                    if ('composite' in effectInput) {
                        // @ts-ignore
                        keyframe.composite = effectInput.composite;
                    }
                    normalizedEffectInput[i] = keyframe;
                }
                if (values[i] !== undefined && values[i] !== null) {
                    normalizedEffectInput[i][property] = values[i];
                }
            }
        }
        normalizedEffectInput.sort(function (a, b) {
            return (a.computedOffset || 0) - (b.computedOffset || 0);
        });
        return normalizedEffectInput;
    }
    function normalizeKeyframes(effectInput, timing) {
        if (effectInput === null) {
            return [];
        }
        if (!Array.isArray(effectInput)) {
            effectInput = convertToArrayForm(effectInput);
        }
        var keyframes = effectInput.map(function (originalKeyframe) {
            var keyframe = {};
            if (timing === null || timing === void 0 ? void 0 : timing.composite) {
                // This will be auto if the composite operation specified on the effect is being used.
                // @see https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats
                keyframe.composite = 'auto';
            }
            for (var member in originalKeyframe) {
                var memberValue = originalKeyframe[member];
                if (member === 'offset') {
                    if (memberValue !== null) {
                        memberValue = Number(memberValue);
                        if (!isFinite(memberValue))
                            throw new Error('Keyframe offsets must be numbers.');
                        if (memberValue < 0 || memberValue > 1)
                            throw new Error('Keyframe offsets must be between 0 and 1.');
                        keyframe.computedOffset = memberValue;
                    }
                }
                else if (member === 'composite') {
                    // TODO: Support add & accumulate in KeyframeEffect.composite
                    // @see https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/composite
                    if (['replace', 'add', 'accumulate', 'auto'].indexOf(memberValue) === -1) {
                        throw new Error("".concat(memberValue, " compositing is not supported"));
                    }
                }
                else ;
                // assign to keyframe, no need to parse shorthand value
                keyframe[member] = memberValue;
            }
            if (keyframe.offset === undefined) {
                keyframe.offset = null;
            }
            if (keyframe.easing === undefined) {
                // override with timing.easing
                keyframe.easing = (timing === null || timing === void 0 ? void 0 : timing.easing) || 'linear';
            }
            if (keyframe.composite === undefined) {
                keyframe.composite = 'auto';
            }
            return keyframe;
        });
        var everyFrameHasOffset = true;
        var previousOffset = -Infinity;
        for (var i = 0; i < keyframes.length; i++) {
            var offset = keyframes[i].offset;
            if (!isNil(offset)) {
                if (offset < previousOffset) {
                    throw new TypeError('Keyframes are not loosely sorted by offset. Sort or specify offsets.');
                }
                previousOffset = offset;
            }
            else {
                everyFrameHasOffset = false;
            }
        }
        keyframes = keyframes.filter(function (keyframe) {
            return Number(keyframe.offset) >= 0 && Number(keyframe.offset) <= 1;
        });
        function spaceKeyframes() {
            var _a, _b;
            var length = keyframes.length;
            keyframes[length - 1].computedOffset = Number((_a = keyframes[length - 1].offset) !== null && _a !== void 0 ? _a : 1);
            if (length > 1) {
                keyframes[0].computedOffset = Number((_b = keyframes[0].offset) !== null && _b !== void 0 ? _b : 0);
            }
            var previousIndex = 0;
            var previousOffset = Number(keyframes[0].computedOffset);
            for (var i = 1; i < length; i++) {
                var offset = keyframes[i].computedOffset;
                if (!isNil(offset) && !isNil(previousOffset)) {
                    for (var j = 1; j < i - previousIndex; j++)
                        keyframes[previousIndex + j].computedOffset =
                            previousOffset + ((Number(offset) - previousOffset) * j) / (i - previousIndex);
                    previousIndex = i;
                    previousOffset = Number(offset);
                }
            }
        }
        if (!everyFrameHasOffset)
            spaceKeyframes();
        return keyframes;
    }

    var fills = 'backwards|forwards|both|none'.split('|');
    var directions = 'reverse|alternate|alternate-reverse'.split('|');
    function makeTiming(timingInput, forGroup) {
        var timing = new AnimationEffectTiming();
        if (forGroup) {
            timing.fill = 'both';
            timing.duration = 'auto';
        }
        if (typeof timingInput === 'number' && !isNaN(timingInput)) {
            timing.duration = timingInput;
        }
        else if (timingInput !== undefined) {
            Object.keys(timingInput).forEach(function (property) {
                if (timingInput[property] !== undefined &&
                    timingInput[property] !== null &&
                    timingInput[property] !== 'auto') {
                    if (typeof timing[property] === 'number' || property === 'duration') {
                        if (typeof timingInput[property] !== 'number' ||
                            isNaN(timingInput[property])) {
                            return;
                        }
                    }
                    if (property === 'fill' &&
                        fills.indexOf(timingInput[property]) === -1) {
                        return;
                    }
                    if (property === 'direction' &&
                        directions.indexOf(timingInput[property]) === -1) {
                        return;
                    }
                    // @ts-ignore
                    timing[property] = timingInput[property];
                }
            });
        }
        return timing;
    }
    function normalizeTimingInput(timingInput, forGroup) {
        timingInput = numericTimingToObject(timingInput !== null && timingInput !== void 0 ? timingInput : { duration: 'auto' });
        return makeTiming(timingInput, forGroup);
    }
    function numericTimingToObject(timingInput) {
        if (typeof timingInput === 'number') {
            if (isNaN(timingInput)) {
                timingInput = { duration: 'auto' };
            }
            else {
                timingInput = { duration: timingInput };
            }
        }
        return timingInput;
    }
    /**
     * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect
     * @example
      const circleDownKeyframes = new KeyframeEffect(
        circle, // element to animate
        [
          { transform: 'translateY(0)' }, // keyframe
          { transform: 'translateY(100)' } // keyframe
        ],
        { duration: 3000, fill: 'forwards' } // keyframe options
      );
     *
     */
    var KeyframeEffect = /** @class */ (function () {
        function KeyframeEffect(target, effectInput, timingInput) {
            var _this = this;
            this.composite = 'replace';
            this.iterationComposite = 'replace';
            this.target = target;
            this.timing = normalizeTimingInput(timingInput, false);
            this.timing.effect = this;
            this.timing.activeDuration = calculateActiveDuration(this.timing);
            this.timing.endTime = Math.max(0, this.timing.delay + this.timing.activeDuration + this.timing.endDelay);
            this.normalizedKeyframes = normalizeKeyframes(effectInput, this.timing);
            this.interpolations = convertEffectInput(this.normalizedKeyframes, this.timing, this.target);
            // 不支持 proxy 时降级成 this.timing
            var Proxy = runtime.globalThis.Proxy;
            this.computedTiming = Proxy
                ? new Proxy(this.timing, {
                    get: function (target, prop) {
                        if (prop === 'duration') {
                            return target.duration === 'auto' ? 0 : target.duration;
                        }
                        else if (prop === 'fill') {
                            return target.fill === 'auto' ? 'none' : target.fill;
                        }
                        else if (prop === 'localTime') {
                            return (_this.animation && _this.animation.currentTime) || null;
                        }
                        else if (prop === 'currentIteration') {
                            if (!_this.animation || _this.animation.playState !== 'running') {
                                return null;
                            }
                            return target.currentIteration || 0;
                        }
                        else if (prop === 'progress') {
                            if (!_this.animation || _this.animation.playState !== 'running') {
                                return null;
                            }
                            return target.progress || 0;
                        }
                        return target[prop];
                    },
                    set: function () {
                        return true;
                    },
                })
                : this.timing;
        }
        KeyframeEffect.prototype.applyInterpolations = function () {
            this.interpolations(this.target, Number(this.timeFraction));
        };
        KeyframeEffect.prototype.update = function (localTime) {
            if (localTime === null) {
                return false;
            }
            this.timeFraction = calculateIterationProgress(this.timing.activeDuration, localTime, this.timing);
            return this.timeFraction !== null;
        };
        KeyframeEffect.prototype.getKeyframes = function () {
            return this.normalizedKeyframes;
        };
        KeyframeEffect.prototype.setKeyframes = function (keyframes) {
            this.normalizedKeyframes = normalizeKeyframes(keyframes);
        };
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/getComputedTiming
         */
        KeyframeEffect.prototype.getComputedTiming = function () {
            return this.computedTiming;
        };
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/getTiming
         */
        KeyframeEffect.prototype.getTiming = function () {
            return this.timing;
        };
        /**
         * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/updateTiming
         */
        KeyframeEffect.prototype.updateTiming = function (timing) {
            var _this = this;
            Object.keys(timing || {}).forEach(function (name) {
                _this.timing[name] = timing[name];
            });
        };
        return KeyframeEffect;
    }());

    function compareAnimations(leftAnimation, rightAnimation) {
        return Number(leftAnimation.id) - Number(rightAnimation.id);
    }
    /**
     * @see https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/web-animations-js/index.d.ts
     */
    var AnimationTimeline = /** @class */ (function () {
        function AnimationTimeline(document) {
            var _this = this;
            this.document = document;
            /**
             * all active animations
             */
            this.animations = [];
            this.ticking = false;
            this.timelineTicking = false;
            this.hasRestartedThisFrame = false;
            this.animationsWithPromises = [];
            this.inTick = false;
            this.pendingEffects = [];
            this.currentTime = null;
            this.rafId = 0;
            this.rafCallbacks = [];
            this.webAnimationsNextTick = function (t) {
                _this.currentTime = t;
                _this.discardAnimations();
                if (_this.animations.length === 0) {
                    _this.timelineTicking = false;
                }
                else {
                    _this.requestAnimationFrame(_this.webAnimationsNextTick);
                }
            };
            this.processRafCallbacks = function (t) {
                var processing = _this.rafCallbacks;
                _this.rafCallbacks = [];
                if (t < Number(_this.currentTime))
                    t = Number(_this.currentTime);
                _this.animations.sort(compareAnimations);
                _this.animations = _this.tick(t, true, _this.animations)[0];
                processing.forEach(function (entry) {
                    entry[1](t);
                });
                _this.applyPendingEffects();
            };
        }
        AnimationTimeline.prototype.getAnimations = function () {
            this.discardAnimations();
            return this.animations.slice();
        };
        AnimationTimeline.prototype.isTicking = function () {
            return this.inTick;
        };
        AnimationTimeline.prototype.play = function (target, keyframes, options) {
            var effect = new KeyframeEffect(target, keyframes, options);
            var animation = new Animation(effect, this);
            this.animations.push(animation);
            this.restartWebAnimationsNextTick();
            animation.updatePromises();
            animation.play();
            animation.updatePromises();
            return animation;
        };
        // RAF is supposed to be the last script to occur before frame rendering but not
        // all browsers behave like this. This function is for synchonously updating an
        // animation's effects whenever its state is mutated by script to work around
        // incorrect script execution ordering by the browser.
        AnimationTimeline.prototype.applyDirtiedAnimation = function (animation) {
            var _this = this;
            if (this.inTick) {
                return;
            }
            // update active animations in displayobject
            animation.markTarget();
            var animations = animation.targetAnimations();
            animations.sort(compareAnimations);
            // clear inactive animations
            var inactiveAnimations = this.tick(Number(this.currentTime), false, animations.slice())[1];
            inactiveAnimations.forEach(function (animation) {
                var index = _this.animations.indexOf(animation);
                if (index !== -1) {
                    _this.animations.splice(index, 1);
                }
            });
            this.applyPendingEffects();
        };
        AnimationTimeline.prototype.restart = function () {
            if (!this.ticking) {
                this.ticking = true;
                this.requestAnimationFrame(function () { });
                this.hasRestartedThisFrame = true;
            }
            return this.hasRestartedThisFrame;
        };
        AnimationTimeline.prototype.destroy = function () {
            this.document.defaultView.cancelAnimationFrame(this.frameId);
        };
        AnimationTimeline.prototype.applyPendingEffects = function () {
            this.pendingEffects.forEach(function (effect) {
                effect === null || effect === void 0 ? void 0 : effect.applyInterpolations();
            });
            this.pendingEffects = [];
        };
        AnimationTimeline.prototype.updateAnimationsPromises = function () {
            this.animationsWithPromises = this.animationsWithPromises.filter(function (animation) {
                return animation.updatePromises();
            });
        };
        AnimationTimeline.prototype.discardAnimations = function () {
            this.updateAnimationsPromises();
            this.animations = this.animations.filter(function (animation) {
                return animation.playState !== 'finished' && animation.playState !== 'idle';
            });
        };
        AnimationTimeline.prototype.restartWebAnimationsNextTick = function () {
            if (!this.timelineTicking) {
                this.timelineTicking = true;
                this.requestAnimationFrame(this.webAnimationsNextTick);
            }
        };
        AnimationTimeline.prototype.rAF = function (f) {
            var id = this.rafId++;
            if (this.rafCallbacks.length === 0) {
                this.frameId = this.document.defaultView.requestAnimationFrame(this.processRafCallbacks);
            }
            this.rafCallbacks.push([id, f]);
            return id;
        };
        AnimationTimeline.prototype.requestAnimationFrame = function (f) {
            var _this = this;
            return this.rAF(function (x) {
                _this.updateAnimationsPromises();
                f(x);
                _this.updateAnimationsPromises();
            });
        };
        AnimationTimeline.prototype.tick = function (t, isAnimationFrame, updatingAnimations) {
            var _a, _b;
            var _this = this;
            this.inTick = true;
            this.hasRestartedThisFrame = false;
            this.currentTime = t;
            this.ticking = false;
            var newPendingClears = [];
            var newPendingEffects = [];
            var activeAnimations = [];
            var inactiveAnimations = [];
            updatingAnimations.forEach(function (animation) {
                animation.tick(t, isAnimationFrame);
                if (!animation._inEffect) {
                    newPendingClears.push(animation.effect);
                    animation.unmarkTarget();
                }
                else {
                    newPendingEffects.push(animation.effect);
                    animation.markTarget();
                }
                if (animation._needsTick)
                    _this.ticking = true;
                var alive = animation._inEffect || animation._needsTick;
                animation._inTimeline = alive;
                if (alive) {
                    activeAnimations.push(animation);
                }
                else {
                    inactiveAnimations.push(animation);
                }
            });
            (_a = this.pendingEffects).push.apply(_a, __spreadArray([], __read(newPendingClears), false));
            (_b = this.pendingEffects).push.apply(_b, __spreadArray([], __read(newPendingEffects), false));
            if (this.ticking)
                this.requestAnimationFrame(function () { });
            this.inTick = false;
            return [activeAnimations, inactiveAnimations];
        };
        return AnimationTimeline;
    }());

    runtime.EasingFunction = parseEasingFunction;
    runtime.AnimationTimeline = AnimationTimeline;

    function measureText(container, px2hd, theme) {
      return function (text, font) {
        var _a = font || {},
          _b = _a.fontSize,
          fontSize = _b === void 0 ? theme.fontSize : _b,
          _c = _a.fontFamily,
          fontFamily = _c === void 0 ? theme.fontFamily : _c,
          _d = _a.fontWeight,
          fontWeight = _d === void 0 ? theme.fontWeight : _d,
          _e = _a.fontVariant,
          fontVariant = _e === void 0 ? theme.fontVariant : _e,
          _f = _a.fontStyle,
          fontStyle = _f === void 0 ? theme.fontStyle : _f,
          _g = _a.textAlign,
          textAlign = _g === void 0 ? theme.textAlign : _g,
          _h = _a.textBaseline,
          textBaseline = _h === void 0 ? theme.textBaseline : _h,
          _j = _a.lineWidth,
          lineWidth = _j === void 0 ? 1 : _j;
        var style = {
          x: 0,
          y: 0,
          fontSize: px2hd(fontSize),
          fontFamily: fontFamily,
          fontStyle: fontStyle,
          fontWeight: fontWeight,
          fontVariant: fontVariant,
          text: text,
          textAlign: textAlign,
          textBaseline: textBaseline,
          lineWidth: lineWidth,
          visibility: 'hidden'
        };
        var result = checkCSSRule('text', style);
        var shape = new Text({
          style: result
        });
        container.appendChild(shape);
        var _k = shape.getBBox(),
          width = _k.width,
          height = _k.height;
        shape.remove();
        return {
          width: width,
          height: height
        };
      };
    }
    function computeLayout$2(style) {
      var left = style.left,
        top = style.top,
        width = style.width,
        height = style.height,
        padding = style.padding;
      var paddingTop = padding[0],
        paddingRight = padding[1],
        paddingBottom = padding[2],
        paddingLeft = padding[3];
      return {
        left: left + paddingLeft,
        top: top + paddingTop,
        width: width - paddingLeft - paddingRight,
        height: height - paddingTop - paddingBottom
      };
    }
    // 顶层Canvas标签
    var Canvas$1 = /** @class */function () {
      function Canvas$1(props) {
        var context = props.context,
          _a = props.renderer,
          renderer = _a === void 0 ? new Renderer() : _a,
          width = props.width,
          height = props.height,
          customTheme = props.theme,
          customPx2hd = props.px2hd,
          customPixelRatio = props.pixelRatio,
          landscape = props.landscape,
          rendererContainer = props.container,
          // style: customStyle,
          _b = props.animate,
          // style: customStyle,
          animate = _b === void 0 ? true : _b,
          createImage = props.createImage,
          requestAnimationFrame = props.requestAnimationFrame,
          cancelAnimationFrame = props.cancelAnimationFrame,
          offscreenCanvas = props.offscreenCanvas,
          isTouchEvent = props.isTouchEvent,
          isMouseEvent = props.isMouseEvent,
          _c = props.useNativeClickEvent,
          useNativeClickEvent = _c === void 0 ? true : _c,
          onRender = props.onRender;
        var px2hd$1 = isFunction(customPx2hd) ? batch2hd(customPx2hd) : px2hd;
        // 初始化主题
        var theme = px2hd$1(__assign(__assign({}, THEME), customTheme));
        var pixelRatio = theme.pixelRatio,
          fontSize = theme.fontSize,
          fontFamily = theme.fontFamily;
        var devicePixelRatio = customPixelRatio ? customPixelRatio : pixelRatio;
        // 组件更新器
        var updater = createUpdater(this);
        var canvasElement = createMobileCanvasElement(context);
        var canvas = new Canvas({
          container: rendererContainer,
          canvas: canvasElement,
          devicePixelRatio: devicePixelRatio,
          renderer: renderer,
          width: width,
          height: height,
          supportsTouchEvents: true,
          // https://caniuse.com/?search=PointerEvent ios 13 以下不支持 Pointer
          supportsPointerEvents: runtime.globalThis.PointerEvent ? true : false,
          // 允许在canvas外部触发
          alwaysTriggerPointerEventOnCanvas: true,
          createImage: createImage,
          requestAnimationFrame: requestAnimationFrame,
          cancelAnimationFrame: cancelAnimationFrame,
          useNativeClickEvent: useNativeClickEvent,
          offscreenCanvas: offscreenCanvas,
          isTouchEvent: isTouchEvent,
          isMouseEvent: isMouseEvent
        });
        onRender && canvas.addEventListener('rerender', function () {
          return onRender(canvas);
        }, {
          once: true
        });
        var container = canvas.getRoot();
        var _d = canvas.getConfig(),
          canvasWidth = _d.width,
          canvasHeight = _d.height;
        // 设置默认的全局样式
        container.setAttribute('fontSize', fontSize);
        container.setAttribute('fontFamily', fontFamily);
        var gesture = new Gesture(container);
        // 供全局使用的一些变量
        var componentContext = {
          ctx: context,
          root: this,
          canvas: canvas,
          px2hd: px2hd$1,
          theme: theme,
          gesture: gesture,
          measureText: measureText(container, px2hd$1, theme),
          timeline: null
        };
        var vNode = {
          key: undefined,
          tag: ClassComponent,
          // style: layout,
          // @ts-ignore
          type: Canvas$1,
          props: props,
          shape: container,
          animate: animate,
          // @ts-ignore
          component: this,
          canvas: this,
          context: componentContext,
          updater: updater
        };
        this._ee = new eventemitter3$1();
        this.props = props;
        this.context = componentContext;
        this.updater = updater;
        this.gesture = gesture;
        this.theme = theme;
        this.canvas = canvas;
        this.container = container;
        this.el = canvasElement;
        this.vNode = vNode;
        // todo: 横屏事件逻辑
        this.landscape = landscape;
        this.updateLayout(__assign(__assign({}, props), {
          width: canvasWidth,
          height: canvasHeight
        }));
      }
      Canvas$1.prototype.updateComponents = function (components) {
        updateComponents(components);
      };
      Canvas$1.prototype.update = function (nextProps) {
        return __awaiter(this, void 0, void 0, function () {
          var _a, props, vNode, _b, animate;
          return __generator(this, function (_c) {
            switch (_c.label) {
              case 0:
                _a = this, props = _a.props, vNode = _a.vNode;
                if (equal(nextProps, props)) {
                  return [2 /*return*/];
                }
                _b = props.animate, animate = _b === void 0 ? true : _b;
                this.props = nextProps;
                vNode.props = nextProps;
                vNode.animate = animate;
                return [4 /*yield*/, this.render()];
              case 1:
                _c.sent();
                return [2 /*return*/];
            }
          });
        });
      };
      Canvas$1.prototype.render = function () {
        return __awaiter(this, void 0, void 0, function () {
          var _a, canvas, vNode;
          return __generator(this, function (_b) {
            switch (_b.label) {
              case 0:
                _a = this, canvas = _a.canvas, vNode = _a.vNode;
                return [4 /*yield*/, canvas.ready];
              case 1:
                _b.sent();
                render(vNode);
                return [2 /*return*/];
            }
          });
        });
      };
      Canvas$1.prototype.emit = function (type, event) {
        this._ee.emit(type, event);
      };
      Canvas$1.prototype.on = function (type, listener) {
        this._ee.on(type, listener);
      };
      Canvas$1.prototype.off = function (type, listener) {
        this._ee.off(type, listener);
      };
      Canvas$1.prototype.getCanvasEl = function () {
        return this.el;
      };
      Canvas$1.prototype.resize = function (width, height) {
        return __awaiter(this, void 0, void 0, function () {
          var canvas;
          return __generator(this, function (_a) {
            switch (_a.label) {
              case 0:
                canvas = this.canvas;
                canvas.resize(width, height);
                this.updateLayout(__assign(__assign({}, this.props), {
                  width: width,
                  height: height
                }));
                return [4 /*yield*/, this.render()];
              case 1:
                _a.sent();
                return [2 /*return*/];
            }
          });
        });
      };
      Canvas$1.prototype.toDataURL = function (type, encoderOptions) {
        return __awaiter(this, void 0, void 0, function () {
          var canvas;
          return __generator(this, function (_a) {
            canvas = this.canvas;
            return [2 /*return*/, new Promise(function (resolve) {
              canvas.addEventListener('rerender', function () {
                canvas.getContextService().toDataURL({
                  type: type,
                  encoderOptions: encoderOptions
                }).then(resolve);
              }, {
                once: true
              });
            })];
          });
        });
      };
      Canvas$1.prototype.updateLayout = function (props) {
        var width = props.width,
          height = props.height;
        var _a = this.context,
          px2hd = _a.px2hd,
          theme = _a.theme;
        var style = px2hd(__assign({
          left: 0,
          top: 0,
          width: width,
          height: height,
          padding: theme.padding
        }, props.style));
        var layout = computeLayout$2(style);
        var left = layout.left,
          top = layout.top;
        // 设置 container 的位置
        this.container.setAttribute('x', left);
        this.container.setAttribute('y', top);
        this.context = __assign(__assign({}, this.context), {
          left: left,
          top: top,
          width: layout.width,
          height: layout.height
        });
        this.vNode = __assign(__assign({}, this.vNode), {
          style: layout,
          context: this.context
        });
      };
      Canvas$1.prototype.toRawChildren = function (children) {
        return children;
      };
      Canvas$1.prototype.destroy = function () {
        var _a = this,
          canvas = _a.canvas,
          children = _a.children,
          el = _a.el;
        destroyElement(children);
        // 需要清理 canvas 画布内容，否则会导致 spa 应用 ios 下 canvas 白屏
        // https://stackoverflow.com/questions/52532614/total-canvas-memory-use-exceeds-the-maximum-limit-safari-12
        // https://github.com/antvis/F2/issues/630
        el.width = 0;
        el.height = 0;
        this.props = null;
        this.context = null;
        this.updater = null;
        this.theme = null;
        this.canvas = null;
        this.container = null;
        this.el = null;
        this.vNode = null;
        // 销毁也需要等 ready
        canvas.ready.then(function () {
          canvas.destroy();
        });
      };
      return Canvas$1;
    }();

    function createRef() {
      var ref = {
        current: null
      };
      return ref;
    }

    function createContext(defaultValue) {
      // 创建 Context 对象
      var context = {
        _currentValue: defaultValue
      };
      // 定义 Provider 组件
      var Provider = function Provider(_a) {
        var value = _a.value,
          children = _a.children;
        context._currentValue = value;
        return children;
      };
      // Injecter 可以往全局的 context 注入内容
      var Injecter = function Injecter(_a, context) {
        var children = _a.children,
          props = __rest(_a, ["children"]);
        Object.assign(context, props);
        return children;
      };
      Injecter.contextInjecter = context;
      // 定义 Consumer 组件
      var Consumer = function Consumer(_a) {
        var children = _a.children;
        return children(context._currentValue);
      };
      context.Provider = Provider;
      context.Injecter = Injecter;
      context.Consumer = Consumer;
      return context;
    }

    var Timeline = /** @class */function (_super) {
      __extends(Timeline, _super);
      function Timeline(props) {
        var _this = _super.call(this, props) || this;
        _this.next = function () {
          var _a = _this,
            state = _a.state,
            props = _a.props;
          var index = state.index,
            count = state.count,
            delay = state.delay,
            autoPlay = state.autoPlay;
          var loop = props.loop;
          if (autoPlay === false) {
            return;
          }
          var next = loop ? (index + 1) % count : index + 1;
          if (next >= count) {
            return;
          }
          _this.timer = setTimeout(function () {
            _this.setState({
              index: next
            });
          }, delay || 0);
        };
        var delay = props.delay,
          _a = props.start,
          start = _a === void 0 ? 0 : _a,
          children = props.children,
          autoPlay = props.autoPlay;
        var count = Children.toArray(children).length;
        _this.state = {
          delay: delay,
          count: count,
          index: start,
          autoPlay: autoPlay
        };
        return _this;
      }
      Timeline.prototype.didMount = function () {
        this.animator.on('end', this.next);
      };
      Timeline.prototype.willReceiveProps = function (nextProps) {
        var nextStart = nextProps.start,
          nextDelay = nextProps.delay,
          nextAutoPlay = nextProps.autoPlay;
        var _a = this.state,
          index = _a.index,
          delay = _a.delay,
          autoPlay = _a.autoPlay;
        if (isNumber(nextStart) || nextDelay !== delay || nextAutoPlay !== autoPlay) {
          // 更新时清除 setTimeout
          clearTimeout(this.timer);
          this.setState({
            delay: nextDelay,
            index: isNumber(nextStart) ? nextStart : index,
            autoPlay: nextAutoPlay
          });
        }
      };
      Timeline.prototype.didUnmount = function () {
        this.animator.off('end', this.next);
      };
      Timeline.prototype.render = function () {
        var _a = this,
          state = _a.state,
          props = _a.props;
        var children = props.children;
        var index = state.index;
        var childrenArray = Children.toArray(children);
        return childrenArray[index];
      };
      return Timeline;
    }(Component);

    var Timeline$1 = /** @class */function (_super) {
      __extends(Timeline, _super);
      function Timeline(props) {
        var _this = _super.call(this) || this;
        _this.animUnits = [];
        _this.frame = 0;
        _this.playState = 'play';
        _this.next = function () {
          var _a = _this,
            frame = _a.frame,
            playState = _a.playState,
            endFrame = _a.endFrame,
            speed = _a.speed;
          if (playState !== 'play') return;
          _this.frame = frame + 1;
          if (frame < endFrame) {
            _this.drawFrame();
            _this.animator.run();
            _this.setPlaybackRate(speed);
          } else {
            _this.emit('end');
            _this.playState = 'finish';
          }
        };
        var animUnits = props.animUnits,
          playState = props.playState,
          root = props.root,
          _a = props.speed,
          speed = _a === void 0 ? 1 : _a,
          time = props.time;
        _this.animator = new Animator();
        var rootShape = new Group();
        _this.animator.reset(rootShape);
        root.appendChild(rootShape);
        _this.animUnits = animUnits;
        _this.playState = playState;
        _this.endFrame = animUnits.length - 1;
        _this.speed = speed;
        _this.time = time;
        _this.totalDuration = animUnits.reduce(function (accumulator, current) {
          return accumulator + current.time;
        }, 0);
        return _this;
      }
      Timeline.prototype.start = function () {
        var _a = this,
          animator = _a.animator,
          frame = _a.frame,
          playState = _a.playState,
          endFrame = _a.endFrame,
          time = _a.time,
          speed = _a.speed;
        animator.on('end', this.next);
        if (frame < endFrame && playState === 'finish') {
          this.setFinishState();
          return;
        }
        this.drawFrame();
        this.animator.run();
        this.setPlayState(playState);
        time && this.goTo(time);
        this.setPlaybackRate(speed);
      };
      Timeline.prototype.drawFrame = function () {
        var _a = this,
          animator = _a.animator,
          animUnits = _a.animUnits,
          frame = _a.frame;
        var childAnimator = animUnits[frame].animators;
        animator.shape.removeChildren();
        childAnimator.map(function (d) {
          animator.shape.appendChild(d === null || d === void 0 ? void 0 : d.shape);
        });
        animator.children = childAnimator;
      };
      Timeline.prototype.setPlayState = function (state) {
        var animator = this.animator;
        switch (state) {
          case 'play':
            animator.play();
            break;
          case 'pause':
            animator.pause();
            break;
          case 'finish':
            animator.finish();
            break;
        }
      };
      Timeline.prototype.setPlaybackRate = function (speed) {
        var animator = this.animator;
        this.speed = speed;
        animator.setPlaybackRate(speed);
      };
      Timeline.prototype.getPlayState = function () {
        return this.playState;
      };
      Timeline.prototype.updateState = function (state) {
        // 播放状态不同
        if (state === 'finish') {
          this.setFinishState();
          return;
        }
        this.playState = state;
        this.setPlayState(state);
      };
      Timeline.prototype.clear = function () {
        this.animator = null;
        this.animUnits = [];
        this.playState = null;
        this.endFrame = null;
      };
      Timeline.prototype.goTo = function (time) {
        var _a = this,
          frame = _a.frame,
          animUnits = _a.animUnits,
          playState = _a.playState,
          totalDuration = _a.totalDuration;
        // 超出了总时长
        if (time > totalDuration && playState !== 'finish') {
          this.setFinishState();
          return;
        }
        var target;
        for (target = 0; target < animUnits.length; target++) {
          var cur = animUnits[target];
          if (time > cur.time) {
            time -= cur.time; // 计算剩余时间
          } else {
            break;
          }
        }
        if (frame !== target) {
          this.frame = target;
          this.drawFrame();
          // 结束当前动画
          this.setPlayState('finish');
          this.animator.run();
          this.setPlayState(playState);
        }
        this.animator.goTo(time);
      };
      Timeline.prototype.setFinishState = function () {
        var endFrame = this.endFrame;
        this.frame = endFrame;
        this.drawFrame();
        this.animator.run();
        this.setPlayState('finish');
        this.playState = 'finish';
        this.frame = endFrame + 1;
        this.animator.animations = [];
      };
      return Timeline;
    }(eventemitter3$1);

    function generateFrameElement(cur, element) {
      if (!element) return;
      return Children.map(element, function (child) {
        var key = child.key,
          props = child.props;
        var newProps = cur[key] ? cur[key].to : {};
        var children = generateFrameElement(cur, props.children);
        return Children.cloneElement(child, __assign(__assign({}, newProps), {
          children: children
        }));
      });
    }

    function cloneNode(vnode) {
      return Children.map(vnode, function (child) {
        if (!child) {
          return;
        }
        var shape = child.shape,
          children = child.children,
          animator = child.animator;
        var _a = animator.end,
          end = _a === void 0 ? {} : _a;
        // 拿到上一帧的snapshot
        var snapshot = shape.cloneNode();
        applyStyle(snapshot, end);
        return __assign(__assign({}, child), {
          shape: snapshot,
          children: cloneNode(children)
        });
      });
    }
    var Player = /** @class */function (_super) {
      __extends(Player, _super);
      function Player(props) {
        return _super.call(this, props) || this;
      }
      Player.prototype.didMount = function () {
        var _this = this;
        var _a = this.props,
          keyFrames = _a.keyFrames,
          children = _a.children,
          state = _a.state,
          onend = _a.onend,
          goTo = _a.goTo,
          speed = _a.speed;
        this.playerFrames = keyFrames.reduce(function (array, cur) {
          var frames = generateFrameElement(cur, array[array.length - 1] || children);
          array.push(frames);
          return array;
        }, []);
        var array = this.playerFrames.map(function (cur, index) {
          var keyFrame = keyFrames[index];
          _this.preNode = cloneNode(_this.preNode || _this._vNode);
          var animUnits = getUpdateAnimation(_this, cur, keyFrame) || {};
          return animUnits;
        });
        this.timeline = new Timeline$1({
          animUnits: array,
          playState: state,
          root: this.context.canvas,
          speed: speed,
          time: goTo
        });
        this.timeline.start();
        onend && this.timeline.on('end', onend);
      };
      Player.prototype.willReceiveProps = function (nextProps, _context) {
        var _a = this,
          lastProps = _a.props,
          timeline = _a.timeline;
        var state = nextProps.state,
          nextTime = nextProps.goTo,
          newSpeed = nextProps.speed;
        var lastTime = lastProps.goTo,
          lastSpeed = lastProps.speed;
        if (!isEqual(state, timeline.getPlayState()) && timeline.getPlayState() === 'finish') {
          // 重播
          if (nextTime < timeline.totalDuration) {
            timeline.updateState(state);
            timeline.goTo(nextTime);
          }
          //保持结束播放状态
          return;
        }
        // state 更新
        if (!isEqual(state, timeline.getPlayState())) {
          timeline.updateState(state);
        }
        if (!isEqual(nextTime, lastTime)) {
          timeline.goTo(nextTime);
        }
        // 播放速度
        if (!isEqual(newSpeed, lastSpeed)) {
          timeline.setPlaybackRate(newSpeed);
        }
      };
      /*外部ref调用方式 */
      Player.prototype.setPlayState = function (state) {
        var timeline = this.timeline;
        timeline.updateState(state);
      };
      Player.prototype.goTo = function (time) {
        var timeline = this.timeline;
        timeline.goTo(time);
      };
      Player.prototype.setPlaybackRate = function (speed) {
        var timeline = this.timeline;
        timeline.setPlaybackRate(speed);
      };
      Player.prototype.render = function () {
        return null;
      };
      return Player;
    }(Component);

    function transposedRect(_a) {
      var xMin = _a.xMin,
        xMax = _a.xMax,
        yMin = _a.yMin,
        yMax = _a.yMax;
      return {
        xMin: yMin,
        xMax: yMax,
        yMin: xMin,
        yMax: xMax
      };
    }
    function convertRect(_a) {
      var x = _a.x,
        y = _a.y,
        size = _a.size,
        y0 = _a.y0;
      var xMin;
      var xMax;
      if (isArray(x)) {
        xMin = x[0];
        xMax = x[1];
      } else {
        xMin = x - size / 2;
        xMax = x + size / 2;
      }
      var yMin;
      var yMax;
      if (isArray(y)) {
        if (y[0] === y[1]) {
          yMin = y[0];
          yMax = y[1];
        } else {
          yMin = Math.min(y[0], y[1]);
          yMax = Math.max(y[0], y[1]);
        }
      } else {
        yMin = Math.min(y0, y);
        yMax = Math.max(y0, y);
      }
      return {
        xMin: xMin,
        xMax: xMax,
        yMin: yMin,
        yMax: yMax
      };
    }
    /**
     * 直角坐标系
     * convert相关的方法，涉及将标准坐标系映射到实际坐标系内
     * transform相关的方法，是仅将某一种关键点转换成另一种关键点 (比如将x/y/size/y0转换成yMin/yMax/..)
     */
    var Base = /** @class */function () {
      function Base(option) {
        this.left = 0;
        this.top = 0;
        this.width = 0;
        this.height = 0;
        // x y 调换
        this.transposed = false;
        // x，y 的值域，在极坐标中对应的就是弧度和半径
        this.x = [0, 1];
        this.y = [0, 1];
        this.update(option);
      }
      Base.prototype.update = function (option) {
        mix(this, option);
        var _a = this,
          left = _a.left,
          top = _a.top,
          width = _a.width,
          height = _a.height;
        this.right = left + width;
        this.bottom = top + height;
        this.center = {
          x: left + width / 2,
          y: top + height / 2
        };
        return this;
      };
      // 是循环， 比如极坐标是以 2π 循环的
      Base.prototype.isCyclic = function () {
        return false;
      };
      Base.prototype._zoomVal = function (val, func) {
        return isArray(val) ? val.map(function (v) {
          return func(v);
        }) : func(val);
      };
      /**
       * 把归一后的值映射到对应的定义域
       * @param point
       */
      Base.prototype.convert = function (point) {
        var _a = this,
          transposed = _a.transposed,
          x = _a.x,
          y = _a.y;
        var xDim = transposed ? 'y' : 'x';
        var yDim = transposed ? 'x' : 'y';
        var pointX = point[xDim];
        var pointY = point[yDim];
        // 超出边界不绘制
        if (pointX < 0 || pointX > 1 || pointY < 0 || pointY > 1) {
          return {
            x: NaN,
            y: NaN
          };
        }
        return {
          x: this._zoomVal(point[xDim], function (v) {
            return x[0] + (x[1] - x[0]) * v;
          }),
          y: this._zoomVal(point[yDim], function (v) {
            return y[0] + (y[1] - y[0]) * v;
          })
        };
      };
      /**
       * convert 的反处理，把定义域的值，反处理到归一的值
       */
      Base.prototype.invert = function (point) {
        var _a;
        var _b = this,
          transposed = _b.transposed,
          x = _b.x,
          y = _b.y;
        var xDim = transposed ? 'y' : 'x';
        var yDim = transposed ? 'x' : 'y';
        return _a = {}, _a[xDim] = this._zoomVal(point.x, function (v) {
          return (v - x[0]) / (x[1] - x[0]);
        }), _a[yDim] = this._zoomVal(point.y, function (v) {
          return (v - y[0]) / (y[1] - y[0]);
        }), _a;
      };
      /**
       * 把归一化的值映射到 canvas 的坐标点
       * @param point
       * @returns
       */
      Base.prototype.convertPoint = function (point) {
        return this.convert(point);
      };
      /**
       * 把canvas坐标的点位映射回归一的值
       */
      Base.prototype.invertPoint = function (point) {
        return this.invert(point);
      };
      // 将标准坐标系下的矩形绘制关键点映射成实际绘制的坐标点
      Base.prototype.convertRect = function (rectPoint) {
        var _a = this,
          xRange = _a.x,
          yRange = _a.y,
          transposed = _a.transposed;
        var xStart = xRange[0],
          xEnd = xRange[1];
        var yStart = yRange[0],
          yEnd = yRange[1];
        var rect = convertRect(rectPoint);
        var _b = transposed ? transposedRect(rect) : rect,
          xMin = _b.xMin,
          xMax = _b.xMax,
          yMin = _b.yMin,
          yMax = _b.yMax;
        var x0 = xStart + (xEnd - xStart) * xMin;
        var x1 = xStart + (xEnd - xStart) * xMax;
        var y0 = yStart + (yEnd - yStart) * yMin;
        var y1 = yStart + (yEnd - yStart) * yMax;
        return {
          xMin: Math.min(x0, x1),
          xMax: Math.max(x0, x1),
          yMin: Math.min(y0, y1),
          yMax: Math.max(y0, y1)
        };
      };
      // 将已经映射好的矩形绘制关键点转换成实际绘制的坐标点
      Base.prototype.transformToRect = function (rectPoint) {
        var x = rectPoint.x,
          y = rectPoint.y,
          y0 = rectPoint.y0,
          size = rectPoint.size;
        var coordOrigin = this.convertPoint({
          x: 0,
          y: y0
        });
        var transposed = this.transposed;
        var _rectPoint = {
          size: size,
          x: transposed ? y : x,
          y: transposed ? x : y,
          y0: transposed ? coordOrigin.x : coordOrigin.y
        };
        var rect = convertRect(_rectPoint);
        var _a = transposed ? transposedRect(rect) : rect,
          xMin = _a.xMin,
          xMax = _a.xMax,
          yMin = _a.yMin,
          yMax = _a.yMax;
        return {
          xMin: xMin,
          xMax: xMax,
          yMin: yMin,
          yMax: yMax
        };
      };
      return Base;
    }();

    var Rect$1 = /** @class */function (_super) {
      __extends(Rect, _super);
      function Rect() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.type = 'rect';
        return _this;
      }
      Rect.prototype.update = function (option) {
        _super.prototype.update.call(this, option);
        var _a = this,
          left = _a.left,
          top = _a.top,
          width = _a.width,
          height = _a.height;
        var x = [left, left + width];
        var y = [top + height, top];
        this.x = x;
        this.y = y;
        return this;
      };
      return Rect;
    }(Base);

    /**
     *  expand Vec2
     */
    var vec2Direction = function vec2Direction(v1, v2) {
      return v1[0] * v2[1] - v2[0] * v1[1];
    };
    var vec2Zero = function vec2Zero(v) {
      return v[0] === 0 && v[1] === 0;
    };
    var vec2AngleTo = function vec2AngleTo(v1, v2, direction) {
      var angle$1 = angle(v1, v2);
      var angleLargeThanPI = vec2Direction(v1, v2) >= 0;
      if (direction) {
        if (angleLargeThanPI) {
          return Math.PI * 2 - angle$1;
        }
        return angle$1;
      }
      if (angleLargeThanPI) {
        return angle$1;
      }
      return Math.PI * 2 - angle$1;
    };

    var Polar = /** @class */function (_super) {
      __extends(Polar, _super);
      function Polar() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.type = 'polar';
        _this.isPolar = true;
        return _this;
      }
      Polar.prototype.update = function (option) {
        _super.prototype.update.call(this, option);
        if (!this.option) {
          this.option = option;
        }
        var _a = this.option,
          _b = _a.radius,
          radiusRatio = _b === void 0 ? 1 : _b,
          _c = _a.innerRadius,
          innerRadiusRatio = _c === void 0 ? 0 : _c;
        var _d = this,
          width = _d.width,
          height = _d.height,
          _e = _d.startAngle,
          startAngle = _e === void 0 ? -Math.PI / 2 : _e,
          _f = _d.endAngle,
          endAngle = _f === void 0 ? Math.PI * 3 / 2 : _f;
        // 半径取宽高的最小值
        var radius = radiusRatio * (Math.min(width, height) / 2);
        // 极坐标下 x 表示弧度， y 代表 半径
        var x = [startAngle, endAngle];
        var y = [innerRadiusRatio * radius, radius];
        this.x = x;
        this.y = y;
        this.startAngle = startAngle;
        this.endAngle = endAngle;
        this.radius = radius;
        this.innnerRadius = innerRadiusRatio * radius;
        return this;
      };
      Polar.prototype.isCyclic = function () {
        var _a = this,
          startAngle = _a.startAngle,
          endAngle = _a.endAngle;
        if (endAngle - startAngle < Math.PI * 2) {
          return false;
        }
        return true;
      };
      Polar.prototype.convertPoint = function (point) {
        var _a = this,
          center = _a.center,
          transposed = _a.transposed,
          x = _a.x,
          y = _a.y;
        var xDim = transposed ? 'y' : 'x';
        var yDim = transposed ? 'x' : 'y';
        var xStart = x[0],
          xEnd = x[1];
        var yStart = y[0],
          yEnd = y[1];
        var angle = xStart + (xEnd - xStart) * point[xDim];
        var radius = yStart + (yEnd - yStart) * point[yDim];
        return {
          x: center.x + Math.cos(angle) * radius,
          y: center.y + Math.sin(angle) * radius
        };
      };
      Polar.prototype.invertPoint = function (point) {
        var _a = this,
          center = _a.center,
          transposed = _a.transposed,
          x = _a.x,
          y = _a.y;
        var xDim = transposed ? 'y' : 'x';
        var yDim = transposed ? 'x' : 'y';
        var xStart = x[0],
          xEnd = x[1];
        var yStart = y[0],
          yEnd = y[1];
        var m = [1, 0, 0, 1, 0, 0];
        rotate(m, m, xStart);
        var startV = [1, 0];
        transformMat2d(startV, startV, m);
        startV = [startV[0], startV[1]];
        var pointV = [point.x - center.x, point.y - center.y];
        if (vec2Zero(pointV)) {
          return {
            x: 0,
            y: 0
          };
        }
        var theta = vec2AngleTo(startV, pointV, xEnd < xStart);
        if (Math.abs(theta - Math.PI * 2) < 0.001) {
          theta = 0;
        }
        var l = length$1(pointV);
        var percentX = theta / (xEnd - xStart);
        percentX = xEnd - xStart > 0 ? percentX : -percentX;
        var percentY = (l - yStart) / (yEnd - yStart);
        var rst = {};
        rst[xDim] = percentX;
        rst[yDim] = percentY;
        return rst;
      };
      return Polar;
    }(Base);

    var coordMap = {
      rect: Rect$1,
      polar: Polar
    };
    var coordController = /** @class */function () {
      function coordController() {}
      coordController.prototype.getOption = function (cfg) {
        if (isString(cfg)) {
          return {
            type: coordMap[cfg] || Rect$1
          };
        }
        if (isFunction(cfg)) {
          return {
            type: cfg
          };
        }
        var type = (cfg || {}).type;
        return __assign(__assign({}, cfg), {
          // 默认直角坐标系
          type: isFunction(type) ? type : coordMap[type] || Rect$1
        });
      };
      coordController.prototype.create = function (cfg) {
        var layout = this.layout;
        var option = this.getOption(cfg);
        var type = option.type;
        var coord = new type(__assign(__assign({}, option), layout));
        this.coord = coord;
        return coord;
      };
      coordController.prototype.updateLayout = function (style) {
        var coord = this.coord;
        var left = style.left,
          top = style.top,
          width = style.width,
          height = style.height,
          padding = style.padding;
        var _a = padding || [0, 0, 0, 0],
          paddingTop = _a[0],
          paddingRight = _a[1],
          paddingBottom = _a[2],
          paddingLeft = _a[3];
        this.layout = {
          left: left + paddingLeft,
          top: top + paddingTop,
          width: width - paddingLeft - paddingRight,
          height: height - paddingTop - paddingBottom
        };
        if (coord) {
          coord.update(this.layout);
        }
      };
      coordController.prototype.useLayout = function (positionLayout) {
        var coord = this.coord;
        var position = positionLayout.position,
          boxWidth = positionLayout.width,
          boxHeight = positionLayout.height;
        var left = coord.left,
          top = coord.top,
          width = coord.width,
          height = coord.height;
        switch (position) {
          case 'left':
            left += boxWidth;
            width = Math.max(0, width - boxWidth);
            break;
          case 'right':
            width = Math.max(0, width - boxWidth);
            break;
          case 'top':
            top += boxHeight;
            height = Math.max(0, height - boxHeight);
            break;
          case 'bottom':
            height = Math.max(0, height - boxHeight);
            break;
        }
        coord.update({
          left: left,
          top: top,
          width: width,
          height: height
        });
      };
      coordController.prototype.update = function () {};
      coordController.prototype.getCoord = function () {
        return this.coord;
      };
      return coordController;
    }();

    var methodCache = {};
    /**
     * 获取计算 ticks 的方法
     * @param key 键值
     * @returns 计算 ticks 的方法
     */
    function getTickMethod(key) {
      return methodCache[key];
    }
    /**
     * 注册计算 ticks 的方法
     * @param key 键值
     * @param method 方法
     */
    function registerTickMethod(key, method) {
      methodCache[key] = method;
    }

    var Scale = /** @class */function () {
      function Scale(cfg) {
        /**
         * 度量的类型
         */
        this.type = 'base';
        /**
         * 是否分类类型的度量
         */
        this.isCategory = false;
        /**
         * 是否线性度量，有linear, time 度量
         */
        this.isLinear = false;
        /**
         * 是否连续类型的度量，linear,time,log, pow, quantile, quantize 都支持
         */
        this.isContinuous = false;
        /**
         * 是否是常量的度量，传入和传出一致
         */
        this.isIdentity = false;
        this.values = [];
        this.range = [0, 1];
        this.ticks = [];
        this.__cfg__ = cfg;
        this.initCfg();
        this.init();
      }
      // 对于原始值的必要转换，如分类、时间字段需转换成数值，用transform/map命名可能更好
      Scale.prototype.translate = function (v) {
        return v;
      };
      /** 重新初始化 */
      Scale.prototype.change = function (cfg) {
        // 覆盖配置项，而不替代
        mix(this.__cfg__, cfg);
        this.init();
      };
      Scale.prototype.clone = function () {
        return this.constructor(this.__cfg__);
      };
      /** 获取坐标轴需要的ticks */
      Scale.prototype.getTicks = function () {
        var _this = this;
        return map(this.ticks, function (tick, idx) {
          if (isObject(tick)) {
            // 仅当符合Tick类型时才有意义
            return tick;
          }
          return {
            text: _this.getText(tick, idx),
            tickValue: tick,
            value: _this.scale(tick) // scaled
          };
        });
      };
      /** 获取Tick的格式化结果 */
      Scale.prototype.getText = function (value, key) {
        var formatter = this.formatter;
        var res = formatter ? formatter(value, key) : value;
        if (isNil(res) || !isFunction(res.toString)) {
          return '';
        }
        return res.toString();
      };
      // 获取配置项中的值，当前 scale 上的值可能会被修改
      Scale.prototype.getConfig = function (key) {
        return this.__cfg__[key];
      };
      // scale初始化
      Scale.prototype.init = function () {
        mix(this, this.__cfg__);
        this.setDomain();
        if (isEmpty(this.getConfig('ticks'))) {
          this.ticks = this.calculateTicks();
        }
      };
      // 子类上覆盖某些属性，不能直接在类上声明，否则会被覆盖
      Scale.prototype.initCfg = function () {};
      Scale.prototype.setDomain = function () {};
      Scale.prototype.calculateTicks = function () {
        var tickMethod = this.tickMethod;
        var ticks = [];
        if (isString(tickMethod)) {
          var method = getTickMethod(tickMethod);
          if (!method) {
            throw new Error('There is no method to to calculate ticks!');
          }
          ticks = method(this);
        } else if (isFunction(tickMethod)) {
          ticks = tickMethod(this);
        }
        return ticks;
      };
      // range 的最小值
      Scale.prototype.rangeMin = function () {
        return this.range[0];
      };
      // range 的最大值
      Scale.prototype.rangeMax = function () {
        return this.range[1];
      };
      /** 定义域转 0~1 */
      Scale.prototype.calcPercent = function (value, min, max) {
        if (isNumber(value)) {
          return (value - min) / (max - min);
        }
        return NaN;
      };
      /** 0~1转定义域 */
      Scale.prototype.calcValue = function (percent, min, max) {
        return min + percent * (max - min);
      };
      return Scale;
    }();

    /**
     * 分类度量
     * @class
     */
    var Category = /** @class */function (_super) {
      __extends(Category, _super);
      function Category() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.type = 'cat';
        _this.isCategory = true;
        return _this;
      }
      Category.prototype.buildIndexMap = function () {
        if (!this.translateIndexMap) {
          this.translateIndexMap = new Map();
          // 重新构建缓存
          for (var i = 0; i < this.values.length; i++) {
            this.translateIndexMap.set(this.values[i], i);
          }
        }
      };
      Category.prototype.translate = function (value) {
        // 按需构建 map
        this.buildIndexMap();
        // 找得到
        var idx = this.translateIndexMap.get(value);
        if (idx === undefined) {
          idx = isNumber(value) ? value : NaN;
        }
        return idx;
      };
      Category.prototype.scale = function (value) {
        var order = this.translate(value);
        // 分类数据允许 0.5 范围内调整
        // if (order < this.min - 0.5 || order > this.max + 0.5) {
        //   return NaN;
        // }
        var percent = this.calcPercent(order, this.min, this.max);
        return this.calcValue(percent, this.rangeMin(), this.rangeMax());
      };
      Category.prototype.invert = function (scaledValue) {
        var domainRange = this.max - this.min;
        var percent = this.calcPercent(scaledValue, this.rangeMin(), this.rangeMax());
        var idx = Math.round(domainRange * percent) + this.min;
        if (idx < this.min || idx > this.max) {
          return NaN;
        }
        return this.values[idx];
      };
      Category.prototype.getText = function (value) {
        var args = [];
        for (var _i = 1; _i < arguments.length; _i++) {
          args[_i - 1] = arguments[_i];
        }
        var v = value;
        // value为index
        if (isNumber(value) && !this.values.includes(value)) {
          v = this.values[v];
        }
        return _super.prototype.getText.apply(this, __spreadArray([v], args, false));
      };
      // 复写属性
      Category.prototype.initCfg = function () {
        this.tickMethod = 'cat';
      };
      // 设置 min, max
      Category.prototype.setDomain = function () {
        // 用户有可能设置 min
        if (isNil(this.getConfig('min'))) {
          this.min = 0;
        }
        if (isNil(this.getConfig('max'))) {
          var size = this.values.length;
          this.max = size > 1 ? size - 1 : size;
        }
        // scale.init 的时候清除缓存
        if (this.translateIndexMap) {
          this.translateIndexMap = undefined;
        }
      };
      return Category;
    }(Scale);

    var token = /d{1,4}|M{1,4}|YY(?:YY)?|S{1,3}|Do|ZZ|Z|([HhMsDm])\1?|[aA]|"[^"]*"|'[^']*'/g;
    var literal = /\[([^]*?)\]/gm;
    function shorten(arr, sLen) {
        var newArr = [];
        for (var i = 0, len = arr.length; i < len; i++) {
            newArr.push(arr[i].substr(0, sLen));
        }
        return newArr;
    }
    function assign(origObj) {
        var args = [];
        for (var _i = 1; _i < arguments.length; _i++) {
            args[_i - 1] = arguments[_i];
        }
        for (var _a = 0, args_1 = args; _a < args_1.length; _a++) {
            var obj = args_1[_a];
            for (var key in obj) {
                // @ts-ignore ex
                origObj[key] = obj[key];
            }
        }
        return origObj;
    }
    var dayNames = [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday"
    ];
    var monthNames = [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ];
    var monthNamesShort = shorten(monthNames, 3);
    var dayNamesShort = shorten(dayNames, 3);
    var defaultI18n = {
        dayNamesShort: dayNamesShort,
        dayNames: dayNames,
        monthNamesShort: monthNamesShort,
        monthNames: monthNames,
        amPm: ["am", "pm"],
        DoFn: function (dayOfMonth) {
            return (dayOfMonth +
                ["th", "st", "nd", "rd"][dayOfMonth % 10 > 3
                    ? 0
                    : ((dayOfMonth - (dayOfMonth % 10) !== 10 ? 1 : 0) * dayOfMonth) % 10]);
        }
    };
    var globalI18n = assign({}, defaultI18n);
    var pad = function (val, len) {
        if (len === void 0) { len = 2; }
        val = String(val);
        while (val.length < len) {
            val = "0" + val;
        }
        return val;
    };
    var formatFlags = {
        D: function (dateObj) { return String(dateObj.getDate()); },
        DD: function (dateObj) { return pad(dateObj.getDate()); },
        Do: function (dateObj, i18n) {
            return i18n.DoFn(dateObj.getDate());
        },
        d: function (dateObj) { return String(dateObj.getDay()); },
        dd: function (dateObj) { return pad(dateObj.getDay()); },
        ddd: function (dateObj, i18n) {
            return i18n.dayNamesShort[dateObj.getDay()];
        },
        dddd: function (dateObj, i18n) {
            return i18n.dayNames[dateObj.getDay()];
        },
        M: function (dateObj) { return String(dateObj.getMonth() + 1); },
        MM: function (dateObj) { return pad(dateObj.getMonth() + 1); },
        MMM: function (dateObj, i18n) {
            return i18n.monthNamesShort[dateObj.getMonth()];
        },
        MMMM: function (dateObj, i18n) {
            return i18n.monthNames[dateObj.getMonth()];
        },
        YY: function (dateObj) {
            return pad(String(dateObj.getFullYear()), 4).substr(2);
        },
        YYYY: function (dateObj) { return pad(dateObj.getFullYear(), 4); },
        h: function (dateObj) { return String(dateObj.getHours() % 12 || 12); },
        hh: function (dateObj) { return pad(dateObj.getHours() % 12 || 12); },
        H: function (dateObj) { return String(dateObj.getHours()); },
        HH: function (dateObj) { return pad(dateObj.getHours()); },
        m: function (dateObj) { return String(dateObj.getMinutes()); },
        mm: function (dateObj) { return pad(dateObj.getMinutes()); },
        s: function (dateObj) { return String(dateObj.getSeconds()); },
        ss: function (dateObj) { return pad(dateObj.getSeconds()); },
        S: function (dateObj) {
            return String(Math.round(dateObj.getMilliseconds() / 100));
        },
        SS: function (dateObj) {
            return pad(Math.round(dateObj.getMilliseconds() / 10), 2);
        },
        SSS: function (dateObj) { return pad(dateObj.getMilliseconds(), 3); },
        a: function (dateObj, i18n) {
            return dateObj.getHours() < 12 ? i18n.amPm[0] : i18n.amPm[1];
        },
        A: function (dateObj, i18n) {
            return dateObj.getHours() < 12
                ? i18n.amPm[0].toUpperCase()
                : i18n.amPm[1].toUpperCase();
        },
        ZZ: function (dateObj) {
            var offset = dateObj.getTimezoneOffset();
            return ((offset > 0 ? "-" : "+") +
                pad(Math.floor(Math.abs(offset) / 60) * 100 + (Math.abs(offset) % 60), 4));
        },
        Z: function (dateObj) {
            var offset = dateObj.getTimezoneOffset();
            return ((offset > 0 ? "-" : "+") +
                pad(Math.floor(Math.abs(offset) / 60), 2) +
                ":" +
                pad(Math.abs(offset) % 60, 2));
        }
    };
    // Some common format strings
    var globalMasks = {
        default: "ddd MMM DD YYYY HH:mm:ss",
        shortDate: "M/D/YY",
        mediumDate: "MMM D, YYYY",
        longDate: "MMMM D, YYYY",
        fullDate: "dddd, MMMM D, YYYY",
        isoDate: "YYYY-MM-DD",
        isoDateTime: "YYYY-MM-DDTHH:mm:ssZ",
        shortTime: "HH:mm",
        mediumTime: "HH:mm:ss",
        longTime: "HH:mm:ss.SSS"
    };
    /***
     * Format a date
     * @method format
     * @param {Date|number} dateObj
     * @param {string} mask Format of the date, i.e. 'mm-dd-yy' or 'shortDate'
     * @returns {string} Formatted date string
     */
    var format = function (dateObj, mask, i18n) {
        if (mask === void 0) { mask = globalMasks["default"]; }
        if (i18n === void 0) { i18n = {}; }
        if (typeof dateObj === "number") {
            dateObj = new Date(dateObj);
        }
        if (Object.prototype.toString.call(dateObj) !== "[object Date]" ||
            isNaN(dateObj.getTime())) {
            throw new Error("Invalid Date pass to format");
        }
        mask = globalMasks[mask] || mask;
        var literals = [];
        // Make literals inactive by replacing them with @@@
        mask = mask.replace(literal, function ($0, $1) {
            literals.push($1);
            return "@@@";
        });
        var combinedI18nSettings = assign(assign({}, globalI18n), i18n);
        // Apply formatting rules
        mask = mask.replace(token, function ($0) {
            return formatFlags[$0](dateObj, combinedI18nSettings);
        });
        // Inline literal values back into the formatted value
        return mask.replace(/@@@/g, function () { return literals.shift(); });
    };

    function timeFormat(time, mask) {
      return format(time, mask);
    }
    /**
     * 转换成时间戳
     * @param value 时间值
     */
    function toTimeStamp(value) {
      if (isString(value)) {
        if (value.indexOf('T') > 0) {
          value = new Date(value).getTime();
        } else {
          // new Date('2010/01/10') 和 new Date('2010-01-10') 的差别在于:
          // 如果仅有年月日时，前者是带有时区的: Fri Jan 10 2020 02:40:13 GMT+0800 (中国标准时间)
          // 后者会格式化成 Sun Jan 10 2010 08:00:00 GMT+0800 (中国标准时间)
          value = new Date(value.replace(/-/gi, '/')).getTime();
        }
      }
      if (isDate(value)) {
        value = value.getTime();
      }
      return value;
    }

    /**
     * 时间分类度量
     * @class
     */
    var TimeCat = /** @class */function (_super) {
      __extends(TimeCat, _super);
      function TimeCat() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.type = 'timeCat';
        return _this;
      }
      /**
       * @override
       */
      TimeCat.prototype.translate = function (value) {
        value = toTimeStamp(value);
        var index = this.values.indexOf(value);
        if (index === -1) {
          if (isNumber(value) && value < this.values.length) {
            index = value;
          } else {
            index = NaN;
          }
        }
        return index;
      };
      /**
       * 由于时间类型数据需要转换一下，所以复写 getText
       * @override
       */
      TimeCat.prototype.getText = function (value, tickIndex) {
        var index = this.translate(value);
        if (index > -1) {
          var result = this.values[index];
          var formatter = this.formatter;
          result = formatter ? formatter(result, tickIndex) : timeFormat(result, this.mask);
          return result;
        }
        return value;
      };
      TimeCat.prototype.initCfg = function () {
        this.tickMethod = 'time-cat';
        this.mask = 'YYYY-MM-DD';
        this.tickCount = 7; // 一般时间数据会显示 7， 14， 30 天的数字
      };
      TimeCat.prototype.setDomain = function () {
        var values = this.values;
        // 针对时间分类类型，会将时间统一转换为时间戳
        each(values, function (v, i) {
          values[i] = toTimeStamp(v);
        });
        values.sort(function (v1, v2) {
          return v1 - v2;
        });
        _super.prototype.setDomain.call(this);
      };
      return TimeCat;
    }(Category);

    /**
     * 连续度量的基类
     * @class
     */
    var Continuous = /** @class */function (_super) {
      __extends(Continuous, _super);
      function Continuous() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.isContinuous = true;
        return _this;
      }
      Continuous.prototype.scale = function (value) {
        if (isNil(value)) {
          return NaN;
        }
        var rangeMin = this.rangeMin();
        var rangeMax = this.rangeMax();
        var max = this.max;
        var min = this.min;
        if (max === min) {
          return rangeMin;
        }
        var percent = this.getScalePercent(value);
        return rangeMin + percent * (rangeMax - rangeMin);
      };
      Continuous.prototype.init = function () {
        _super.prototype.init.call(this);
        // init 完成后保证 min, max 包含 ticks 的范围
        var ticks = this.ticks;
        var firstTick = head(ticks);
        var lastTick = last(ticks);
        if (firstTick < this.min) {
          this.min = firstTick;
        }
        if (lastTick > this.max) {
          this.max = lastTick;
        }
        // strict-limit 方式
        if (!isNil(this.minLimit)) {
          this.min = firstTick;
        }
        if (!isNil(this.maxLimit)) {
          this.max = lastTick;
        }
      };
      Continuous.prototype.setDomain = function () {
        var _a = getRange(this.values),
          min = _a.min,
          max = _a.max;
        if (isNil(this.min)) {
          this.min = min;
        }
        if (isNil(this.max)) {
          this.max = max;
        }
        if (this.min > this.max) {
          this.min = min;
          this.max = max;
        }
      };
      Continuous.prototype.calculateTicks = function () {
        var _this = this;
        var ticks = _super.prototype.calculateTicks.call(this);
        if (!this.nice) {
          ticks = filter(ticks, function (tick) {
            return tick >= _this.min && tick <= _this.max;
          });
        }
        return ticks;
      };
      // 计算原始值值占的百分比
      Continuous.prototype.getScalePercent = function (value) {
        var max = this.max;
        var min = this.min;
        return (value - min) / (max - min);
      };
      Continuous.prototype.getInvertPercent = function (value) {
        return (value - this.rangeMin()) / (this.rangeMax() - this.rangeMin());
      };
      return Continuous;
    }(Scale);

    /**
     * 线性度量
     * @class
     */
    var Linear = /** @class */function (_super) {
      __extends(Linear, _super);
      function Linear() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.type = 'linear';
        _this.isLinear = true;
        return _this;
      }
      Linear.prototype.invert = function (value) {
        var percent = this.getInvertPercent(value);
        return this.min + percent * (this.max - this.min);
      };
      Linear.prototype.initCfg = function () {
        this.tickMethod = 'wilkinson-extended';
        this.nice = false;
      };
      return Linear;
    }(Continuous);

    // 求以a为次幂，结果为b的基数，如 x^^a = b;求x
    // 虽然数学上 b 不支持负数，但是这里需要支持 负数
    function calBase(a, b) {
      var e = Math.E;
      var value;
      if (b >= 0) {
        value = Math.pow(e, Math.log(b) / a); // 使用换底公式求底
      } else {
        value = Math.pow(e, Math.log(-b) / a) * -1; // 使用换底公式求底
      }
      return value;
    }
    function log(a, b) {
      if (a === 1) {
        return 1;
      }
      return Math.log(b) / Math.log(a);
    }
    function getLogPositiveMin(values, base, max) {
      if (isNil(max)) {
        max = Math.max.apply(null, values);
      }
      var positiveMin = max;
      each(values, function (value) {
        if (value > 0 && value < positiveMin) {
          positiveMin = value;
        }
      });
      if (positiveMin === max) {
        positiveMin = max / base;
      }
      if (positiveMin > 1) {
        positiveMin = 1;
      }
      return positiveMin;
    }

    /**
     * Log 度量，处理非均匀分布
     */
    var Log = /** @class */function (_super) {
      __extends(Log, _super);
      function Log() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.type = 'log';
        return _this;
      }
      /**
       * @override
       */
      Log.prototype.invert = function (value) {
        var base = this.base;
        var max = log(base, this.max);
        var rangeMin = this.rangeMin();
        var range = this.rangeMax() - rangeMin;
        var min;
        var positiveMin = this.positiveMin;
        if (positiveMin) {
          if (value === 0) {
            return 0;
          }
          min = log(base, positiveMin / base);
          var appendPercent = 1 / (max - min) * range; // 0 到 positiveMin的占比
          if (value < appendPercent) {
            // 落到 0 - positiveMin 之间
            return value / appendPercent * positiveMin;
          }
        } else {
          min = log(base, this.min);
        }
        var percent = (value - rangeMin) / range;
        var tmp = percent * (max - min) + min;
        return Math.pow(base, tmp);
      };
      Log.prototype.initCfg = function () {
        this.tickMethod = 'log';
        this.base = 10;
        this.tickCount = 6;
        this.nice = true;
      };
      // 设置
      Log.prototype.setDomain = function () {
        _super.prototype.setDomain.call(this);
        var min = this.min;
        if (min < 0) {
          throw new Error('When you use log scale, the minimum value must be greater than zero!');
        }
        if (min === 0) {
          this.positiveMin = getLogPositiveMin(this.values, this.base, this.max);
        }
      };
      // 根据当前值获取占比
      Log.prototype.getScalePercent = function (value) {
        var max = this.max;
        var min = this.min;
        if (max === min) {
          return 0;
        }
        // 如果值小于等于0，则按照0处理
        if (value <= 0) {
          return 0;
        }
        var base = this.base;
        var positiveMin = this.positiveMin;
        // 如果min == 0, 则根据比0大的最小值，计算比例关系。这个最小值作为坐标轴上的第二个tick，第一个是0但是不显示
        if (positiveMin) {
          min = positiveMin * 1 / base;
        }
        var percent;
        // 如果数值小于次小值，那么就计算 value / 次小值 占整体的比例
        if (value < positiveMin) {
          percent = value / positiveMin / (log(base, max) - log(base, min));
        } else {
          percent = (log(base, value) - log(base, min)) / (log(base, max) - log(base, min));
        }
        return percent;
      };
      return Log;
    }(Continuous);

    /**
     * Pow 度量，处理非均匀分布
     */
    var Pow = /** @class */function (_super) {
      __extends(Pow, _super);
      function Pow() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.type = 'pow';
        return _this;
      }
      /**
       * @override
       */
      Pow.prototype.invert = function (value) {
        var percent = this.getInvertPercent(value);
        var exponent = this.exponent;
        var max = calBase(exponent, this.max);
        var min = calBase(exponent, this.min);
        var tmp = percent * (max - min) + min;
        var factor = tmp >= 0 ? 1 : -1;
        return Math.pow(tmp, exponent) * factor;
      };
      Pow.prototype.initCfg = function () {
        this.tickMethod = 'pow';
        this.exponent = 2;
        this.tickCount = 5;
        this.nice = true;
      };
      // 获取度量计算时，value占的定义域百分比
      Pow.prototype.getScalePercent = function (value) {
        var max = this.max;
        var min = this.min;
        if (max === min) {
          return 0;
        }
        var exponent = this.exponent;
        var percent = (calBase(exponent, value) - calBase(exponent, min)) / (calBase(exponent, max) - calBase(exponent, min));
        return percent;
      };
      return Pow;
    }(Continuous);

    /**
     * 时间度量
     * @class
     */
    var Time = /** @class */function (_super) {
      __extends(Time, _super);
      function Time() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.type = 'time';
        return _this;
      }
      /**
       * @override
       */
      Time.prototype.getText = function (value, index) {
        var numberValue = this.translate(value);
        var formatter = this.formatter;
        return formatter ? formatter(numberValue, index) : timeFormat(numberValue, this.mask);
      };
      /**
       * @override
       */
      Time.prototype.scale = function (value) {
        var v = value;
        if (isString(v) || isDate(v)) {
          v = this.translate(v);
        }
        return _super.prototype.scale.call(this, v);
      };
      /**
       * 将时间转换成数字
       * @override
       */
      Time.prototype.translate = function (v) {
        return toTimeStamp(v);
      };
      Time.prototype.initCfg = function () {
        this.tickMethod = 'time-pretty';
        this.mask = 'YYYY-MM-DD';
        this.tickCount = 7;
        this.nice = false;
      };
      Time.prototype.setDomain = function () {
        var values = this.values;
        // 是否设置了 min, max，而不是直接取 this.min, this.max
        var minConfig = this.getConfig('min');
        var maxConfig = this.getConfig('max');
        // 如果设置了 min,max 则转换成时间戳
        if (!isNil(minConfig) || !isNumber(minConfig)) {
          this.min = this.translate(this.min);
        }
        if (!isNil(maxConfig) || !isNumber(maxConfig)) {
          this.max = this.translate(this.max);
        }
        // 没有设置 min, max 时
        if (values && values.length) {
          // 重新计算最大最小值
          var timeStamps_1 = [];
          var min_1 = Infinity; // 最小值
          var secondMin_1 = min_1; // 次小值
          var max_1 = 0;
          // 使用一个循环，计算min,max,secondMin
          each(values, function (v) {
            var timeStamp = toTimeStamp(v);
            if (isNaN(timeStamp)) {
              throw new TypeError("Invalid Time: ".concat(v, " in time scale!"));
            }
            if (min_1 > timeStamp) {
              secondMin_1 = min_1;
              min_1 = timeStamp;
            } else if (secondMin_1 > timeStamp) {
              secondMin_1 = timeStamp;
            }
            if (max_1 < timeStamp) {
              max_1 = timeStamp;
            }
            timeStamps_1.push(timeStamp);
          });
          // 存在多个值时，设置最小间距
          if (values.length > 1) {
            this.minTickInterval = secondMin_1 - min_1;
          }
          if (isNil(minConfig)) {
            this.min = min_1;
          }
          if (isNil(maxConfig)) {
            this.max = max_1;
          }
        }
      };
      return Time;
    }(Linear);

    /**
     * 分段度量
     */
    var Quantize = /** @class */function (_super) {
      __extends(Quantize, _super);
      function Quantize() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.type = 'quantize';
        return _this;
      }
      Quantize.prototype.invert = function (value) {
        var ticks = this.ticks;
        var length = ticks.length;
        var percent = this.getInvertPercent(value);
        var minIndex = Math.floor(percent * (length - 1));
        // 最后一个
        if (minIndex >= length - 1) {
          return last(ticks);
        }
        // 超出左边界， 则取第一个
        if (minIndex < 0) {
          return head(ticks);
        }
        var minTick = ticks[minIndex];
        var nextTick = ticks[minIndex + 1];
        // 比当前值小的 tick 在度量上的占比
        var minIndexPercent = minIndex / (length - 1);
        var maxIndexPercent = (minIndex + 1) / (length - 1);
        return minTick + (percent - minIndexPercent) / (maxIndexPercent - minIndexPercent) * (nextTick - minTick);
      };
      Quantize.prototype.initCfg = function () {
        this.tickMethod = 'r-pretty';
        this.tickCount = 5;
        this.nice = true;
      };
      Quantize.prototype.calculateTicks = function () {
        var ticks = _super.prototype.calculateTicks.call(this);
        if (!this.nice) {
          // 如果 nice = false ,补充 min, max
          if (last(ticks) !== this.max) {
            ticks.push(this.max);
          }
          if (head(ticks) !== this.min) {
            ticks.unshift(this.min);
          }
        }
        return ticks;
      };
      // 计算当前值在刻度中的占比
      Quantize.prototype.getScalePercent = function (value) {
        var ticks = this.ticks;
        // 超出左边界
        if (value < head(ticks)) {
          return 0;
        }
        // 超出右边界
        if (value > last(ticks)) {
          return 1;
        }
        var minIndex = 0;
        each(ticks, function (tick, index) {
          if (value >= tick) {
            minIndex = index;
          } else {
            return false;
          }
        });
        return minIndex / (ticks.length - 1);
      };
      return Quantize;
    }(Continuous);

    var Quantile = /** @class */function (_super) {
      __extends(Quantile, _super);
      function Quantile() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.type = 'quantile';
        return _this;
      }
      Quantile.prototype.initCfg = function () {
        this.tickMethod = 'quantile';
        this.tickCount = 5;
        this.nice = true;
      };
      return Quantile;
    }(Quantize);

    var map$3 = {};
    function getClass(key) {
      return map$3[key];
    }
    function registerClass(key, cls) {
      if (getClass(key)) {
        throw new Error("type '".concat(key, "' existed."));
      }
      map$3[key] = cls;
    }

    /**
     * identity scale原则上是定义域和值域一致，scale/invert方法也是一致的
     * 参考R的实现：https://github.com/r-lib/scales/blob/master/R/pal-identity.r
     * 参考d3的实现（做了下转型）：https://github.com/d3/d3-scale/blob/master/src/identity.js
     */
    var Identity = /** @class */function (_super) {
      __extends(Identity, _super);
      function Identity() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.type = 'identity';
        _this.isIdentity = true;
        return _this;
      }
      Identity.prototype.calculateTicks = function () {
        return this.values;
      };
      Identity.prototype.scale = function (value) {
        // 如果传入的值不等于 identity 的值，则直接返回，用于一维图时的 dodge
        if (this.values[0] !== value && isNumber(value)) {
          return value;
        }
        return this.range[0];
      };
      Identity.prototype.invert = function (value) {
        var range = this.range;
        if (value < range[0] || value > range[1]) {
          return NaN;
        }
        return this.values[0];
      };
      return Identity;
    }(Scale);

    // cat平均算法，保头保尾
    var CatTick = (function (cfg) {
      var values = cfg.values,
        tickCount = cfg.tickCount;
      if (!tickCount) {
        return values;
      }
      if (values.length <= 1) {
        return values;
      }
      // 获取间隔步长, 最小是1
      var step = Math.floor(values.length / (tickCount - 1)) || 1;
      var ticks = [];
      // 按间隔数取对应节点
      for (var index = 0; index < values.length; index = index + step) {
        ticks.push(values[index]);
      }
      var last = values[values.length - 1];
      // 如果最后一个tick不等于原数据的最后一个
      if (ticks[ticks.length - 1] !== last) {
        if (ticks.length >= tickCount) {
          // 如果当前的tick个数满足要求
          ticks[ticks.length - 1] = last;
        } else {
          // 不满足tickCount则直接加入最后一个
          ticks.push(last);
        }
      }
      return ticks;
    });

    // 认为是nice的刻度
    var SNAP_COUNT_ARRAY = [1, 1.2, 1.5, 2, 2.2, 2.4, 2.5, 3, 4, 5, 6, 7.5, 8, 10];
    var DEFAULT_COUNT = 5; // 默认刻度值
    var LinearTick = (function (cfg) {
      var _a = cfg || {},
        tickCount = _a.tickCount,
        tickInterval = _a.tickInterval;
      var _b = cfg || {},
        min = _b.min,
        max = _b.max;
      min = isNaN(min) ? 0 : min;
      max = isNaN(max) ? 0 : max;
      var count = tickCount && tickCount >= 2 ? tickCount : DEFAULT_COUNT;
      // 计算interval， 优先取tickInterval
      var interval = tickInterval || getBestInterval({
        tickCount: count,
        max: max,
        min: min
      });
      // 通过interval计算最小tick
      var minTick = Math.floor(min / interval) * interval;
      // 如果指定了tickInterval, count 需要根据指定的tickInterval来算计
      if (tickInterval) {
        var intervalCount = Math.abs(Math.ceil((max - minTick) / tickInterval)) + 1;
        // tickCount 作为最小 count 处理
        count = Math.max(count, intervalCount);
      }
      var tickLength = 0;
      var fixedLength = getFixedLength(interval);
      if (min < 0 && max > 0 && count === 2) {
        return [toFixed(minTick, fixedLength), toFixed(Math.ceil(max / interval) * interval, fixedLength)];
      }
      var ticks = [];
      while (tickLength < count) {
        ticks.push(toFixed(minTick + tickLength * interval, fixedLength));
        tickLength++;
      }
      return ticks;
    });
    var DECIMAL_LENGTH = 12;
    function getFactor(number) {
      // 取正数
      number = Math.abs(number);
      var factor = 1;
      if (number === 0) {
        return factor;
      }
      // 小于1,逐渐放大
      if (number < 1) {
        var count = 0;
        while (number < 1) {
          factor = factor / 10;
          number = number * 10;
          count++;
        }
        // 浮点数计算出现问题
        if (factor.toString().length > DECIMAL_LENGTH) {
          factor = parseFloat(factor.toFixed(count));
        }
        return factor;
      }
      // 大于10逐渐缩小
      while (number > 10) {
        factor = factor * 10;
        number = number / 10;
      }
      return factor;
    }
    // 获取最佳匹配刻度
    function getBestInterval(_a) {
      var tickCount = _a.tickCount,
        min = _a.min,
        max = _a.max;
      // 如果最大最小相等，则直接按1处理
      if (min === max) {
        return 1 * getFactor(max);
      }
      // 1.计算平均刻度间隔
      var avgInterval = (max - min) / (tickCount - 1);
      // 2.数据标准归一化 映射到[1-10]区间
      var factor = getFactor(avgInterval);
      var calInterval = avgInterval / factor;
      var calMax = max / factor;
      var calMin = min / factor;
      // 根据平均值推算最逼近刻度值
      var similarityIndex = 0;
      for (var index = 0; index < SNAP_COUNT_ARRAY.length; index++) {
        var item = SNAP_COUNT_ARRAY[index];
        if (calInterval <= item) {
          similarityIndex = index;
          break;
        }
      }
      var similarityInterval = min < 0 && max > 0 && tickCount === 2 ? SNAP_COUNT_ARRAY[similarityIndex] : getInterval(similarityIndex, tickCount, calMin, calMax);
      // 小数点位数还原到数据的位数, 因为similarityIndex有可能是小数，所以需要保留similarityIndex自己的小数位数
      var fixedLength = getFixedLength(similarityInterval) + getFixedLength(factor);
      return toFixed(similarityInterval * factor, fixedLength);
    }
    function getInterval(startIndex, tickCount, min, max) {
      var verify = false;
      var interval = SNAP_COUNT_ARRAY[startIndex];
      // 刻度值校验，如果不满足，循环下去
      for (var i = startIndex; i < SNAP_COUNT_ARRAY.length; i++) {
        if (intervalIsVerify({
          interval: SNAP_COUNT_ARRAY[i],
          tickCount: tickCount,
          max: max,
          min: min
        })) {
          // 有符合条件的interval
          interval = SNAP_COUNT_ARRAY[i];
          verify = true;
          break;
        }
      }
      // 如果不满足, 依次缩小10倍，再计算
      if (!verify) {
        return 10 * getInterval(0, tickCount, min / 10, max / 10);
      }
      return interval;
    }
    // 刻度是否满足展示需求
    function intervalIsVerify(_a) {
      var interval = _a.interval,
        tickCount = _a.tickCount,
        max = _a.max,
        min = _a.min;
      var minTick = Math.floor(min / interval) * interval;
      if (minTick + (tickCount - 1) * interval >= max) {
        return true;
      }
      return false;
    }
    // 计算小数点应该保留的位数
    function getFixedLength(num) {
      var str = num.toString();
      var index = str.indexOf('.');
      var indexOfExp = str.indexOf('e-');
      var length = indexOfExp >= 0 ? parseInt(str.substr(indexOfExp + 2), 10) : str.substr(index + 1).length;
      if (length > 20) {
        // 最多保留20位小数
        length = 20;
      }
      return length;
    }
    // @antv/util fixedbase不支持科学计数法的判断，需要提mr
    function toFixed(v, length) {
      return parseFloat(v.toFixed(length));
    }

    registerClass('cat', Category);
    registerClass('category', Category);
    registerClass('identity', Identity);
    registerClass('linear', Linear);
    registerClass('log', Log);
    registerClass('pow', Pow);
    registerClass('time', Time);
    registerClass('timeCat', TimeCat);
    registerClass('quantize', Quantize);
    registerClass('quantile', Quantile);
    // 覆盖0.3.x的 cat 方法
    registerTickMethod('cat', CatTick);
    registerTickMethod('time-cat', CatTick);
    // 覆盖linear 度量的tick算法
    registerTickMethod('wilkinson-extended', LinearTick);
    var ScaleController = /** @class */function () {
      function ScaleController(data) {
        this.data = data;
        this.options = {};
        this.scales = {};
      }
      ScaleController.prototype._getType = function (option) {
        var type = option.type,
          values = option.values,
          field = option.field;
        if (type) {
          return type;
        }
        if (isNumber(field) || isNil(values[0]) && field) {
          return 'identity';
        }
        if (typeof values[0] === 'number') {
          return 'linear';
        }
        return 'cat';
      };
      ScaleController.prototype._getOption = function (option) {
        var values = option.values,
          field = option.field,
          justifyContent = option.justifyContent;
        var type = this._getType(option);
        option.type = type;
        // identity
        if (type === 'identity') {
          option.field = field.toString();
          option.values = [field];
          return option;
        }
        // linear 类型
        if (type === 'linear') {
          // 设置默认nice
          if (typeof option.nice !== 'boolean') {
            option.nice = true;
          }
          // 重置最大最小
          var _a = getRange(values),
            min = _a.min,
            max = _a.max;
          if (isNil(option.min)) {
            option.min = min;
          }
          if (isNil(option.max)) {
            option.max = max;
          }
          option.values = values.sort(function (a, b) {
            return a - b;
          });
          return option;
        }
        // 分类类型和 timeCat 类型，调整 range
        if (type === 'cat' || type === 'timeCat') {
          if (option.range) {
            return option;
          }
          var count = values.length;
          var range = [0, 1];
          // 如果只有一项，显示在中间
          if (count === 1) {
            range = [0.5, 1];
          } else if (justifyContent) {
            // 居中
            var offset = 1 / count * 0.5;
            range = [offset, 1 - offset];
          } else {
            // 最后留 1 / count
            var offset = 1 / count;
            range = [0, 1 - offset];
          }
          option.range = range;
        }
        return option;
      };
      ScaleController.prototype.createScale = function (option) {
        var type = option.type;
        if (isFunction(type)) {
          return new type(option);
        }
        var ScaleClass = getClass(type);
        return new ScaleClass(option);
      };
      // 更新或创建scale
      ScaleController.prototype.setScale = function (field, option) {
        var _a = this,
          options = _a.options,
          scales = _a.scales;
        options[field] = mix({}, options[field], option);
        // 如果scale有更新，scale 也需要重新创建
        if (scales[field]) {
          scales[field].change(options[field]);
          // delete scales[field];
        }
      };
      ScaleController.prototype.create = function (options) {
        this.update(options);
      };
      ScaleController.prototype.update = function (options) {
        var _this = this;
        if (!options) return;
        each(options, function (option, field) {
          _this.setScale(field, option);
        });
      };
      ScaleController.prototype.changeData = function (data) {
        this.data = data;
        this.scales = {};
      };
      ScaleController.prototype.getData = function () {
        return this.data;
      };
      ScaleController.prototype.getScale = function (field) {
        var _a = this,
          scales = _a.scales,
          options = _a.options,
          data = _a.data;
        var scale = scales[field];
        if (scale) {
          // for adjust=dodge, 需要更新 range
          var option_1 = this._getOption(__assign(__assign({}, options[field]), {
            values: scale.values
          }));
          if (option_1.range) {
            scale.range = option_1.range;
          }
          return scale;
        }
        var option = options[field];
        if (!option) {
          return null;
        }
        var values = option.values ? option.values : data ? valuesOfKey(data, field) : [];
        var scaleOption = this._getOption(__assign(__assign({}, option), {
          field: field,
          values: values
        }));
        var newScale = this.createScale(scaleOption);
        scales[field] = newScale;
        return newScale;
      };
      ScaleController.prototype.getScales = function () {
        var _this = this;
        var _a = this,
          options = _a.options,
          scales = _a.scales;
        each(options, function (option, field) {
          _this.getScale(field);
        });
        return scales;
      };
      ScaleController.prototype.getOptions = function () {
        var scales = this.scales;
        var options = {};
        each(scales, function (scale, field) {
          options[field] = __assign({}, scale.__cfg__);
        });
        return options;
      };
      ScaleController.prototype.adjustStartZero = function (scale) {
        var options = this.options;
        var field = scale.field,
          min = scale.min,
          max = scale.max;
        var option = options[field];
        // 如果有定义，则不处理
        if (option && option.min) {
          return;
        }
        if (min > 0) {
          scale.change({
            min: 0
          });
        } else if (max < 0) {
          scale.change({
            max: 0
          });
        }
      };
      // 饼图下的scale调整
      ScaleController.prototype.adjustPieScale = function (scale) {
        var options = this.options;
        var field = scale.field;
        var option = options[field];
        if (option && !isNil(option.nice)) {
          return null;
        }
        scale.change({
          nice: false
        });
      };
      //堆叠下的scale调整
      ScaleController.prototype._updateStackRange = function (scale, flattenArray) {
        var options = this.options;
        var field = scale.field;
        var option = options[field];
        var dataMin = Infinity;
        var dataMax = -Infinity;
        for (var i = 0, len = flattenArray.length; i < len; i++) {
          var obj = flattenArray[i];
          var tmpMin = Math.min.apply(null, obj[field]);
          var tmpMax = Math.max.apply(null, obj[field]);
          if (tmpMin < dataMin) {
            dataMin = tmpMin;
          }
          if (tmpMax > dataMax) {
            dataMax = tmpMax;
          }
        }
        // 如果有定义，则优先级更高
        var min = (option === null || option === void 0 ? void 0 : option.min) || dataMin;
        var max = (option === null || option === void 0 ? void 0 : option.max) || dataMax;
        if (min !== scale.min || max !== scale.max) {
          scale.change({
            min: min,
            max: max
          });
        }
      };
      // 获取scale 在 0点对位置的值
      ScaleController.prototype.getZeroValue = function (scale) {
        var min = scale.min,
          max = scale.max;
        var value;
        if (min >= 0) {
          value = min;
        } else if (max <= 0) {
          value = max;
        } else {
          value = 0;
        }
        return scale.scale(value);
      };
      return ScaleController;
    }();

    var axis = {
      labelOffset: '15px',
      line: {
        stroke: '#E8E8E8',
        lineWidth: '1px'
      },
      symbol: {
        fill: '#E8E8E8',
        radius: '10px'
      },
      tickLine: {
        stroke: '#E8E8E8'
      },
      label: {
        fill: '#808080',
        fontSize: '20px'
      },
      grid: {
        stroke: '#E8E8E8',
        lineWidth: '1px',
        lineDash: ['4px']
      }
    };
    var guide = {
      line: {
        style: {
          stroke: '#a3a3a3',
          lineWidth: 1
        },
        offsetX: 0,
        offsetY: 0
      },
      text: {
        style: {
          fill: '#787878',
          // textAlign: 'center',
          textBaseline: 'middle'
        },
        offsetX: 0,
        offsetY: 0
      },
      rect: {
        style: {
          fill: '#fafafa'
        }
      },
      arc: {
        style: {
          stroke: '#a3a3a3'
        }
      },
      html: {
        offsetX: 0,
        offsetY: 0,
        alignX: 'center',
        alignY: 'middle'
      },
      tag: {
        offsetX: 0,
        offsetY: 0,
        side: 4,
        background: {
          padding: 5,
          radius: 2,
          fill: '#1890FF'
        },
        textStyle: {
          fontSize: 12,
          fill: '#fff',
          textAlign: 'center',
          textBaseline: 'middle'
        }
      },
      point: {
        offsetX: 0,
        offsetY: 0,
        style: {
          fill: '#fff',
          r: 3,
          lineWidth: 2,
          stroke: '#1890ff'
        }
      },
      polyline: {
        style: {
          lineWidth: '4px',
          lineJoin: 'round',
          lineCap: 'round'
        },
        offsetX: 0,
        offsetY: 0
      }
    };
    var chart = {
      padding: ['30px', '30px', '30px', '30px']
    };
    var Theme = {
      chart: chart,
      colors: ['#1890FF', '#2FC25B', '#FACC14', '#223273', '#8543E0', '#13C2C2', '#3436C7', '#F04864'],
      shapes: {
        line: ['line', 'dash', 'smooth'],
        point: ['circle', 'hollowCircle', 'rect'],
        area: ['area', 'smooth'],
        interval: ['rect', 'pyramid', 'funnel']
      },
      sizes: ['4px', '6px', '8px', '10px', '12px'],
      shape: {
        line: {
          default: {
            lineWidth: '4px',
            lineJoin: 'round',
            lineCap: 'round'
          },
          smooth: {
            smooth: true
          },
          'step-start': {
            step: 'start'
          },
          'step-middle': {
            step: 'middle'
          },
          'step-end': {
            step: 'end'
          },
          dash: {
            lineDash: ['8px', '8px']
          }
        },
        point: {
          default: {
            size: '6px'
          },
          hollowCircle: {
            lineWidth: '2px'
          }
        },
        area: {
          default: {
            fillOpacity: 0.1
          }
        },
        interval: {
          default: {}
        }
      },
      axis: axis,
      guide: guide
    };

    // 统计图表
    var Chart = /** @class */function (_super) {
      __extends(Chart, _super);
      function Chart(props, context) {
        var _this = _super.call(this, props) || this;
        // 坐标系
        _this.componentsPosition = [];
        var theme = context.theme,
          px2hd = context.px2hd;
        // hack 处理，设置默认的主题样式
        // 目前没想到其他更合适的方式，只能先这样处理
        context.theme = deepMix(px2hd(Theme), theme);
        var data = props.data;
        _this.scale = new ScaleController(data);
        _this.coord = new coordController();
        _this.coordRef = createRef();
        // state
        _this.state = {
          filters: {}
        };
        return _this;
      }
      Chart.prototype.getStyle = function (props) {
        var _a = this,
          context = _a.context,
          layout = _a.layout;
        var theme = context.theme,
          px2hd = context.px2hd;
        var left = layout.left,
          top = layout.top,
          width = layout.width,
          height = layout.height;
        var customStyle = props.style;
        return px2hd(__assign(__assign({
          left: left,
          top: top,
          width: width,
          height: height
        }, theme.chart), customStyle));
      };
      Chart.prototype.willMount = function () {
        var _a = this,
          props = _a.props,
          coord = _a.coord,
          scale = _a.scale;
        var scaleOptions = props.scale,
          coordOption = props.coord;
        this.resetCoordLayout();
        // 初始化 scale
        scale.create(scaleOptions);
        // 初始化 coord
        coord.create(coordOption);
      };
      // props 更新
      Chart.prototype.willReceiveProps = function (nextProps, context) {
        var _a = this,
          scale = _a.scale,
          coord = _a.coord,
          lastProps = _a.props;
        var nextStyle = nextProps.style,
          nextData = nextProps.data,
          nextScale = nextProps.scale;
        var lastStyle = lastProps.style,
          lastData = lastProps.data,
          lastScale = lastProps.scale;
        // style 更新
        if (!equal(nextStyle, lastStyle) || context !== this.context) {
          var style = this.getStyle(nextProps);
          coord.updateLayout(style);
        }
        if (nextData !== lastData) {
          scale.changeData(nextData);
        }
        // scale
        if (!equal(nextScale, lastScale)) {
          scale.update(nextScale);
        }
      };
      Chart.prototype.willUpdate = function () {
        this.coord.create(this.props.coord);
      };
      Chart.prototype.on = function (eventName, listener) {
        var roolEl = this.coordRef.current;
        if (!roolEl || !roolEl.gesture) return;
        var gesture = roolEl.gesture;
        gesture.on(eventName, listener);
      };
      Chart.prototype.off = function (eventName, listener) {
        var roolEl = this.coordRef.current;
        if (!roolEl || !roolEl.gesture) return;
        var gesture = roolEl.gesture;
        gesture.off(eventName, listener);
      };
      // 给需要显示的组件留空
      Chart.prototype.layoutCoord = function (layout) {
        this.coord.useLayout(layout);
      };
      Chart.prototype.resetCoordLayout = function () {
        var _a = this,
          coord = _a.coord,
          props = _a.props;
        var style = this.getStyle(props);
        coord.updateLayout(style);
      };
      Chart.prototype.updateCoordLayout = function (layout) {
        var _this = this;
        if (isArray(layout)) {
          layout.forEach(function (item) {
            _this.layoutCoord(item);
          });
          return;
        }
        this.layoutCoord(layout);
      };
      Chart.prototype.updateCoordFor = function (component, layout) {
        var _this = this;
        if (!layout) return;
        var componentsPosition = this.componentsPosition;
        var componentPosition = {
          component: component,
          layout: layout
        };
        var existIndex = findIndex(componentsPosition, function (item) {
          return item.component === component;
        });
        // 说明是已经存在的组件
        if (existIndex > -1) {
          componentsPosition.splice(existIndex, 1, componentPosition);
          // 先重置，然后整体重新算一次
          this.resetCoordLayout();
          // 再整体计算前，需要去掉已经销毁的组件
          this.removeComponentsPositionCache();
          componentsPosition.forEach(function (componentPosition) {
            var layout = componentPosition.layout;
            _this.updateCoordLayout(layout);
          });
          return;
        }
        // 是新组件，直接添加
        componentsPosition.push(componentPosition);
        this.updateCoordLayout(layout);
      };
      Chart.prototype.removeComponentsPositionCache = function () {
        var _a;
        if (!((_a = this.componentsPosition) === null || _a === void 0 ? void 0 : _a.length)) return;
        for (var i = this.componentsPosition.length; i > -1; i--) {
          var item = this.componentsPosition[i];
          if (item && item.component && item.component.destroyed) {
            this.componentsPosition.splice(i, 1);
          }
        }
      };
      Chart.prototype.getGeometrys = function () {
        // @ts-ignore
        var children = this.children.children;
        var geometrys = [];
        Children.toArray(children).forEach(function (element) {
          if (!element) return false;
          var component = element.component;
          // @ts-ignore
          if (component && component.isGeometry) {
            geometrys.push(component);
          }
        });
        return geometrys;
      };
      /**
       * calculate dataset's position on canvas
       * @param  {Object} record the dataset
       * @return {Object} return the position
       */
      Chart.prototype.getPosition = function (record) {
        var coord = this.getCoord();
        var xScale = this.getXScales()[0];
        var xField = xScale.field;
        var yScales = this.getYScales();
        // default first
        var yScale = yScales[0];
        var yField = yScale.field;
        for (var i = 0, len = yScales.length; i < len; i++) {
          var scale = yScales[i];
          var field = scale.field;
          if (record[field]) {
            yScale = scale;
            yField = field;
            break;
          }
        }
        var x = xScale.scale(record[xField]);
        var y = yScale.scale(record[yField]);
        return coord.convertPoint({
          x: x,
          y: y
        });
      };
      Chart.prototype.getSnapRecords = function (point, inCoordRange) {
        var geometrys = this.getGeometrys();
        if (!geometrys.length) return;
        // @ts-ignore
        return geometrys[0].getSnapRecords(point, inCoordRange);
      };
      Chart.prototype.getRecords = function (data, field) {
        var geometrys = this.getGeometrys();
        if (!geometrys.length) return;
        // @ts-ignore
        return geometrys[0].getRecords(data, field);
      };
      Chart.prototype.getLegendItems = function (point) {
        var geometrys = this.getGeometrys();
        if (!geometrys.length) return;
        // @ts-ignore
        return geometrys[0].getLegendItems(point);
      };
      Chart.prototype.setScale = function (field, option) {
        this.scale.setScale(field, option);
      };
      Chart.prototype.getScale = function (field) {
        return this.scale.getScale(field);
      };
      Chart.prototype.getScales = function () {
        return this.scale.getScales();
      };
      Chart.prototype.getXScales = function () {
        var geometrys = this.getGeometrys();
        return geometrys.map(function (component) {
          // @ts-ignore
          return component.getXScale();
        });
      };
      Chart.prototype.getYScales = function () {
        var geometrys = this.getGeometrys();
        return geometrys.map(function (component) {
          // @ts-ignore
          return component.getYScale();
        });
      };
      Chart.prototype.getLayout = function () {
        return this.coord.layout;
      };
      Chart.prototype.getCoord = function () {
        return this.coord.coord;
      };
      Chart.prototype.filter = function (field, condition) {
        var _a;
        var filters = this.state.filters;
        this.setState({
          filters: __assign(__assign({}, filters), (_a = {}, _a[field] = condition, _a))
        });
      };
      Chart.prototype._getRenderData = function () {
        var _a = this,
          props = _a.props,
          state = _a.state;
        var data = props.data;
        var filters = state.filters;
        if (!filters || !Object.keys(filters).length) {
          return data;
        }
        var filteredData = data;
        each(filters, function (condition, field) {
          if (!condition) return;
          filteredData = filteredData.filter(function (record) {
            return condition(record[field], record);
          });
        });
        return filteredData;
      };
      Chart.prototype.render = function () {
        var _this = this;
        var _a = this,
          props = _a.props,
          scale = _a.scale,
          chartLayout = _a.layout;
        var children = props.children,
          originData = props.data;
        if (!originData) return null;
        var data = this._getRenderData();
        var layout = this.getLayout();
        var coord = this.getCoord();
        var scaleOptions = scale.getOptions();
        var width = chartLayout.width,
          height = chartLayout.height;
        return jsx("group", {
          ref: this.coordRef,
          style: {
            width: width,
            height: height,
            fill: 'transparent'
          }
        }, Children.map(children, function (child) {
          return Children.cloneElement(child, {
            data: data,
            chart: _this,
            layout: layout,
            coord: coord,
            // 传 scaleOptions 是为了让 child 感知到 props 的的变化，合理的做法的应该是传递 scale，但是现在无法感知到 scale 的变化, 所以暂时只能先这么处理，scaleOptions 子组件目前是使用不到的。
            scaleOptions: scaleOptions
          });
        }));
      };
      return Chart;
    }(Component);

    function isEqual$1(origin1, origin2, fields) {
      if (origin1 === origin2) {
        return true;
      }
      for (var i = 0, len = fields.length; i < len; i++) {
        var field = fields[i];
        if (origin1[field] !== origin2[field]) {
          return false;
        }
      }
      return true;
    }
    var Selection = /** @class */function (_super) {
      __extends(Selection, _super);
      function Selection(props, context) {
        var _this = _super.call(this, props, context) || this;
        var selection = props.selection;
        if (!selection) return _this;
        var defaultSelected = selection.defaultSelected;
        _this.state.selected = defaultSelected;
        return _this;
      }
      Selection.prototype.didMount = function () {
        var _this = this;
        var _a = this,
          props = _a.props,
          state = _a.state;
        var selection = props.selection,
          chart = props.chart;
        if (!selection) return;
        // 默认为 click
        var _b = selection.triggerOn,
          triggerOn = _b === void 0 ? 'click' : _b,
          onChange = selection.onChange;
        chart.on(triggerOn, function (ev) {
          var points = ev.points,
            x = ev.canvasX,
            y = ev.canvasY;
          var point = triggerOn === 'click' ? {
            x: x,
            y: y
          } : points[0];
          var records = _this.getSnapRecords(point);
          var _a = selection.type,
            type = _a === void 0 ? 'single' : _a,
            _b = selection.cancelable,
            cancelable = _b === void 0 ? true : _b;
          if (!records || !records.length) {
            if (cancelable) {
              onChange && onChange({
                selected: null
              });
              _this.setState({
                selected: null
              });
            }
            return;
          }
          var selected = state.selected;
          var origins = records.map(function (record) {
            return record.origin;
          });
          if (!selected || !selected.length) {
            onChange && onChange({
              selected: origins
            });
            _this.setState({
              selected: origins
            });
          }
          if (type === 'single') {
            if (!cancelable) {
              onChange && onChange({
                selected: origins
              });
              _this.setState({
                selected: origins
              });
              return;
            }
            var newSelected_1 = [];
            records.forEach(function (record) {
              if (!_this.isSelected(record)) {
                newSelected_1.push(record.origin);
              }
            });
            onChange && onChange({
              selected: newSelected_1
            });
            _this.setState({
              selected: newSelected_1
            });
            return;
          }
          // 多选
          var scales = chart.getScales();
          var fields = Object.keys(scales);
          var selectedMap = {};
          selected.forEach(function (item) {
            var key = fields.map(function (field) {
              return item[field];
            }).join('-');
            selectedMap[key] = item;
          });
          records.forEach(function (record) {
            var origin = record.origin;
            var key = fields.map(function (field) {
              return origin[field];
            }).join('-');
            selectedMap[key] = selectedMap[key] ? null : origin;
          });
          var newSelected = Object.keys(selectedMap).map(function (key) {
            return selectedMap[key];
          }).filter(Boolean);
          onChange && onChange({
            selected: newSelected
          });
          _this.setState({
            selected: newSelected
          });
        });
      };
      Selection.prototype.willReceiveProps = function (nextProps) {
        var nextSelection = nextProps.selection;
        var lastSelection = this.props.selection;
        if (!nextSelection || !lastSelection) {
          return;
        }
        var nextDefaultSelected = nextSelection.defaultSelected;
        var lastDefaultSelected = lastSelection.defaultSelected;
        if (!equal(nextDefaultSelected, lastDefaultSelected)) {
          this.state.selected = nextDefaultSelected;
        }
      };
      Selection.prototype.getSnapRecords = function (_point) {
        return null;
      };
      Selection.prototype.isSelected = function (record) {
        var _a = this,
          state = _a.state,
          props = _a.props;
        var selected = state.selected;
        if (!selected || !selected.length) {
          return false;
        }
        var chart = props.chart;
        var scales = chart.getScales();
        var fields = Object.keys(scales);
        for (var i = 0, len = selected.length; i < len; i++) {
          var item = selected[i];
          if (isEqual$1(record.origin, item, fields)) {
            return true;
          }
        }
        return false;
      };
      Selection.prototype.getSelectionStyle = function (record) {
        var _a = this,
          state = _a.state,
          props = _a.props;
        var selected = state.selected;
        if (!selected || !selected.length) {
          return null;
        }
        var selection = props.selection;
        var selectedStyle = selection.selectedStyle,
          unSelectedStyle = selection.unSelectedStyle;
        var isSelected = this.isSelected(record);
        if (isSelected) {
          return isFunction(selectedStyle) ? selectedStyle(record) : selectedStyle;
        }
        return isFunction(unSelectedStyle) ? unSelectedStyle(record) : unSelectedStyle;
      };
      return Selection;
    }(Component);

    var DEFAULT_Y = 0; // 默认的 y 的值
    // 偏移之后，间距
    var MARGIN_RATIO = 1 / 2;
    var DODGE_RATIO = 1 / 2;
    // 散点分开之后，距离边界的距离
    var GAP = 0.05;

    var Adjust = /** @class */function () {
      function Adjust(cfg) {
        var xField = cfg.xField,
          yField = cfg.yField,
          _a = cfg.adjustNames,
          adjustNames = _a === void 0 ? ['x', 'y'] : _a,
          dimValuesMap = cfg.dimValuesMap;
        this.adjustNames = adjustNames;
        this.xField = xField;
        this.yField = yField;
        this.dimValuesMap = dimValuesMap;
      }
      /**
       * 查看维度是否是 adjust 字段
       * @param dim
       */
      Adjust.prototype.isAdjust = function (dim) {
        return this.adjustNames.indexOf(dim) >= 0;
      };
      Adjust.prototype.getAdjustRange = function (dim, dimValue, values) {
        var yField = this.yField;
        var index = values.indexOf(dimValue);
        var length = values.length;
        var pre;
        var next;
        // 没有 y 字段，但是需要根据 y 调整
        if (!yField && this.isAdjust('y')) {
          pre = 0;
          next = 1;
        } else if (length > 1) {
          // 如果以其开头，则取之，否则取他前面一个
          pre = values[index === 0 ? 0 : index - 1];
          // 如果以其结尾，则取之，否则取他后面一个
          next = values[index === length - 1 ? length - 1 : index + 1];
          if (index !== 0) {
            pre += (dimValue - pre) / 2;
          } else {
            pre -= (next - dimValue) / 2;
          }
          if (index !== length - 1) {
            next -= (next - dimValue) / 2;
          } else {
            next += (dimValue - values[length - 2]) / 2;
          }
        } else {
          pre = dimValue === 0 ? 0 : dimValue - 0.5;
          next = dimValue === 0 ? 1 : dimValue + 0.5;
        }
        return {
          pre: pre,
          next: next
        };
      };
      Adjust.prototype.adjustData = function (groupedDataArray, mergedData) {
        var _this = this;
        // 所有调整维度的值数组
        var dimValuesMap = this.getDimValues(mergedData);
        // 按照每一个分组来进行调整
        each(groupedDataArray, function (dataArray, index) {
          // 遍历所有数据集合
          // 每个分组中，分别按照不同的 dim 进行调整
          each(dimValuesMap, function (values, dim) {
            // 根据不同的度量分别调整位置
            _this.adjustDim(dim, values, dataArray, index);
          });
        });
      };
      /**
       * 对数据进行分组adjustData
       * @param data 数据
       * @param dim 分组的字段
       * @return 分组结果
       */
      Adjust.prototype.groupData = function (data, dim) {
        // 补齐数据空数据为默认值
        each(data, function (record) {
          if (record[dim] === undefined) {
            record[dim] = DEFAULT_Y;
          }
        });
        // 按照 dim 维度分组
        return groupBy(data, dim);
      };
      /** @override */
      Adjust.prototype.adjustDim = function (_dim, _values, _data, _index) {};
      /**
       * 获取可调整度量对应的值
       * @param mergedData 数据
       * @return 值的映射
       */
      Adjust.prototype.getDimValues = function (mergedData) {
        var _a = this,
          xField = _a.xField,
          yField = _a.yField;
        var dimValuesMap = mix({}, this.dimValuesMap);
        // 所有的维度
        var dims = [];
        if (xField && this.isAdjust('x')) {
          dims.push(xField);
        }
        if (yField && this.isAdjust('y')) {
          dims.push(yField);
        }
        dims.forEach(function (dim) {
          if (dimValuesMap && dimValuesMap[dim]) {
            return;
          }
          // 在每个维度上，所有的值
          dimValuesMap[dim] = valuesOfKey(mergedData, dim).sort(function (v1, v2) {
            return v1 - v2;
          }).filter(function (v) {
            return !isNaN(v);
          });
        });
        // 只有一维的情况下，同时调整 y，赋予默认值
        if (!yField && this.isAdjust('y')) {
          var dim = 'y';
          dimValuesMap[dim] = [DEFAULT_Y, 1]; // 默认分布在 y 轴的 0 与 1 之间
        }
        return dimValuesMap;
      };
      return Adjust;
    }();

    var Dodge = /** @class */function (_super) {
      __extends(Dodge, _super);
      function Dodge(cfg) {
        var _this = _super.call(this, cfg) || this;
        _this.cacheMap = {};
        _this.adjustDataArray = [];
        _this.mergeData = [];
        var _a = cfg.marginRatio,
          marginRatio = _a === void 0 ? MARGIN_RATIO : _a,
          _b = cfg.dodgeRatio,
          dodgeRatio = _b === void 0 ? DODGE_RATIO : _b,
          dodgeBy = cfg.dodgeBy,
          intervalPadding = cfg.intervalPadding,
          dodgePadding = cfg.dodgePadding,
          xDimensionLength = cfg.xDimensionLength,
          groupNum = cfg.groupNum,
          defaultSize = cfg.defaultSize,
          maxColumnWidth = cfg.maxColumnWidth,
          minColumnWidth = cfg.minColumnWidth,
          columnWidthRatio = cfg.columnWidthRatio,
          customOffset = cfg.customOffset;
        _this.marginRatio = marginRatio;
        _this.dodgeRatio = dodgeRatio;
        _this.dodgeBy = dodgeBy;
        _this.intervalPadding = intervalPadding;
        _this.dodgePadding = dodgePadding;
        _this.xDimensionLegenth = xDimensionLength;
        _this.groupNum = groupNum;
        _this.defaultSize = defaultSize;
        _this.maxColumnWidth = maxColumnWidth;
        _this.minColumnWidth = minColumnWidth;
        _this.columnWidthRatio = columnWidthRatio;
        _this.customOffset = customOffset;
        return _this;
      }
      Dodge.prototype.process = function (groupDataArray) {
        var groupedDataArray = clone(groupDataArray);
        // 将数据数组展开一层
        var mergeData = flatten(groupedDataArray);
        var dodgeBy = this.dodgeBy;
        // 如果指定了分组 dim 的字段
        var adjustDataArray = dodgeBy ? group(mergeData, dodgeBy) : groupedDataArray;
        this.cacheMap = {};
        this.adjustDataArray = adjustDataArray;
        this.mergeData = mergeData;
        this.adjustData(adjustDataArray, mergeData);
        this.adjustDataArray = [];
        this.mergeData = [];
        return groupedDataArray;
      };
      Dodge.prototype.adjustDim = function (dim, values, data, frameIndex) {
        var _this = this;
        var customOffset = this.customOffset;
        var map = this.getDistribution(dim);
        var groupData = this.groupData(data, dim); // 根据值分组
        each(groupData, function (group, key) {
          var range;
          // xField 中只有一个值，不需要做 dodge
          if (values.length === 1) {
            range = {
              pre: values[0] - 1,
              next: values[0] + 1
            };
          } else {
            // 如果有多个，则需要获取调整的范围
            range = _this.getAdjustRange(dim, parseFloat(key), values);
          }
          each(group, function (d) {
            var value = d[dim];
            var valueArr = map[value];
            var valIndex = valueArr.indexOf(frameIndex);
            if (!isNil(customOffset)) {
              var pre = range.pre,
                next = range.next;
              d[dim] = isFunction(customOffset) ? customOffset(d, range) : (pre + next) / 2 + customOffset;
            } else {
              d[dim] = _this.getDodgeOffset(range, valIndex, valueArr.length);
            }
          });
        });
        return [];
      };
      Dodge.prototype.getDodgeOffset = function (range, idx, len) {
        var _a = this,
          dodgeRatio = _a.dodgeRatio,
          marginRatio = _a.marginRatio,
          intervalPadding = _a.intervalPadding,
          dodgePadding = _a.dodgePadding;
        var pre = range.pre,
          next = range.next;
        var tickLength = next - pre;
        var position;
        // 分多种输入情况
        if (!isNil(intervalPadding) && isNil(dodgePadding) && intervalPadding >= 0) {
          // 仅配置intervalPadding
          var offset = this.getIntervalOnlyOffset(len, idx);
          position = pre + offset;
        } else if (!isNil(dodgePadding) && isNil(intervalPadding) && dodgePadding >= 0) {
          // 仅配置dodgePadding
          var offset = this.getDodgeOnlyOffset(len, idx);
          position = pre + offset;
        } else if (!isNil(intervalPadding) && !isNil(dodgePadding) && intervalPadding >= 0 && dodgePadding >= 0) {
          // 同时配置intervalPadding和dodgePadding
          var offset = this.getIntervalAndDodgeOffset(len, idx);
          position = pre + offset;
        } else {
          // 默认情况
          var width = tickLength * dodgeRatio / len;
          var margin = marginRatio * width;
          var offset = 1 / 2 * (tickLength - len * width - (len - 1) * margin) + ((idx + 1) * width + idx * margin) - 1 / 2 * width - 1 / 2 * tickLength;
          position = (pre + next) / 2 + offset;
        }
        return position;
      };
      Dodge.prototype.getIntervalOnlyOffset = function (len, idx) {
        var _a = this,
          defaultSize = _a.defaultSize,
          intervalPadding = _a.intervalPadding,
          xDimensionLegenth = _a.xDimensionLegenth,
          groupNum = _a.groupNum,
          dodgeRatio = _a.dodgeRatio,
          maxColumnWidth = _a.maxColumnWidth,
          minColumnWidth = _a.minColumnWidth,
          columnWidthRatio = _a.columnWidthRatio;
        var normalizedIntervalPadding = intervalPadding / xDimensionLegenth;
        var normalizedDodgePadding = (1 - (groupNum - 1) * normalizedIntervalPadding) / groupNum * dodgeRatio / (len - 1);
        var geomWidth = ((1 - normalizedIntervalPadding * (groupNum - 1)) / groupNum - normalizedDodgePadding * (len - 1)) / len;
        // 根据columnWidthRatio/defaultSize/maxColumnWidth/minColumnWidth调整宽度
        geomWidth = !isNil(columnWidthRatio) ? 1 / groupNum / len * columnWidthRatio : geomWidth;
        if (!isNil(maxColumnWidth)) {
          var normalizedMaxWidht = maxColumnWidth / xDimensionLegenth;
          geomWidth = Math.min(geomWidth, normalizedMaxWidht);
        }
        if (!isNil(minColumnWidth)) {
          var normalizedMinWidht = minColumnWidth / xDimensionLegenth;
          geomWidth = Math.max(geomWidth, normalizedMinWidht);
        }
        geomWidth = defaultSize ? defaultSize / xDimensionLegenth : geomWidth;
        // 调整组内间隔
        normalizedDodgePadding = ((1 - (groupNum - 1) * normalizedIntervalPadding) / groupNum - len * geomWidth) / (len - 1);
        var offset = ((1 / 2 + idx) * geomWidth + idx * normalizedDodgePadding + 1 / 2 * normalizedIntervalPadding) * groupNum - normalizedIntervalPadding / 2;
        return offset;
      };
      Dodge.prototype.getDodgeOnlyOffset = function (len, idx) {
        var _a = this,
          defaultSize = _a.defaultSize,
          dodgePadding = _a.dodgePadding,
          xDimensionLegenth = _a.xDimensionLegenth,
          groupNum = _a.groupNum,
          marginRatio = _a.marginRatio,
          maxColumnWidth = _a.maxColumnWidth,
          minColumnWidth = _a.minColumnWidth,
          columnWidthRatio = _a.columnWidthRatio;
        var normalizedDodgePadding = dodgePadding / xDimensionLegenth;
        var normalizedIntervalPadding = 1 * marginRatio / (groupNum - 1);
        var geomWidth = ((1 - normalizedIntervalPadding * (groupNum - 1)) / groupNum - normalizedDodgePadding * (len - 1)) / len;
        // 根据columnWidthRatio/defaultSize/maxColumnWidth/minColumnWidth调整宽度
        geomWidth = columnWidthRatio ? 1 / groupNum / len * columnWidthRatio : geomWidth;
        if (!isNil(maxColumnWidth)) {
          var normalizedMaxWidht = maxColumnWidth / xDimensionLegenth;
          geomWidth = Math.min(geomWidth, normalizedMaxWidht);
        }
        if (!isNil(minColumnWidth)) {
          var normalizedMinWidht = minColumnWidth / xDimensionLegenth;
          geomWidth = Math.max(geomWidth, normalizedMinWidht);
        }
        geomWidth = defaultSize ? defaultSize / xDimensionLegenth : geomWidth;
        // 调整组间距
        normalizedIntervalPadding = (1 - (geomWidth * len + normalizedDodgePadding * (len - 1)) * groupNum) / (groupNum - 1);
        var offset = ((1 / 2 + idx) * geomWidth + idx * normalizedDodgePadding + 1 / 2 * normalizedIntervalPadding) * groupNum - normalizedIntervalPadding / 2;
        return offset;
      };
      Dodge.prototype.getIntervalAndDodgeOffset = function (len, idx) {
        var _a = this,
          intervalPadding = _a.intervalPadding,
          dodgePadding = _a.dodgePadding,
          xDimensionLegenth = _a.xDimensionLegenth,
          groupNum = _a.groupNum;
        var normalizedIntervalPadding = intervalPadding / xDimensionLegenth;
        var normalizedDodgePadding = dodgePadding / xDimensionLegenth;
        var geomWidth = ((1 - normalizedIntervalPadding * (groupNum - 1)) / groupNum - normalizedDodgePadding * (len - 1)) / len;
        var offset = ((1 / 2 + idx) * geomWidth + idx * normalizedDodgePadding + 1 / 2 * normalizedIntervalPadding) * groupNum - normalizedIntervalPadding / 2;
        return offset;
      };
      Dodge.prototype.getDistribution = function (dim) {
        var groupedDataArray = this.adjustDataArray;
        var cacheMap = this.cacheMap;
        var map = cacheMap[dim];
        if (!map) {
          map = {};
          each(groupedDataArray, function (data, index) {
            var values = valuesOfKey(data, dim);
            if (!values.length) {
              values.push(0);
            }
            each(values, function (val) {
              if (!map[val]) {
                map[val] = [];
              }
              map[val].push(index);
            });
          });
          cacheMap[dim] = map;
        }
        return map;
      };
      return Dodge;
    }(Adjust);

    function randomNumber(min, max) {
      return (max - min) * Math.random() + min;
    }
    var Jitter = /** @class */function (_super) {
      __extends(Jitter, _super);
      function Jitter() {
        return _super !== null && _super.apply(this, arguments) || this;
      }
      Jitter.prototype.process = function (groupDataArray) {
        var groupedDataArray = clone(groupDataArray);
        // 之前分组之后的数据，然后有合并回去（和分组前可以理解成是一样的）
        var mergeData = flatten(groupedDataArray);
        // 返回值
        this.adjustData(groupedDataArray, mergeData);
        return groupedDataArray;
      };
      /**
       * 当前数据分组（index）中，按照维度 dim 进行 jitter 调整
       * @param dim
       * @param values
       * @param dataArray
       */
      Jitter.prototype.adjustDim = function (dim, values, dataArray) {
        var _this = this;
        // 在每一个分组中，将数据再按照 dim 分组，用于散列
        var groupDataArray = this.groupData(dataArray, dim);
        return each(groupDataArray, function (data, dimValue) {
          return _this.adjustGroup(data, dim, parseFloat(dimValue), values);
        });
      };
      // 随机出来的字段值
      Jitter.prototype.getAdjustOffset = function (range) {
        var pre = range.pre,
          next = range.next;
        // 随机的范围
        var margin = (next - pre) * GAP;
        return randomNumber(pre + margin, next - margin);
      };
      // adjust group data
      Jitter.prototype.adjustGroup = function (group, dim, dimValue, values) {
        var _this = this;
        // 调整范围
        var range = this.getAdjustRange(dim, dimValue, values);
        each(group, function (data) {
          data[dim] = _this.getAdjustOffset(range); // 获取调整的位置
        });
        return group;
      };
      return Jitter;
    }(Adjust);

    var Stack = /** @class */function (_super) {
      __extends(Stack, _super);
      function Stack(cfg) {
        var _this = _super.call(this, cfg) || this;
        var _a = cfg.adjustNames,
          adjustNames = _a === void 0 ? ['y'] : _a,
          _b = cfg.height,
          height = _b === void 0 ? NaN : _b,
          _c = cfg.size,
          size = _c === void 0 ? 10 : _c,
          _d = cfg.reverseOrder,
          reverseOrder = _d === void 0 ? false : _d;
        _this.adjustNames = adjustNames;
        _this.height = height;
        _this.size = size;
        _this.reverseOrder = reverseOrder;
        return _this;
      }
      /**
       * 方法入参是经过数据分组、数据数字化之后的二维数组
       * @param groupDataArray 分组之后的数据
       */
      Stack.prototype.process = function (groupDataArray) {
        var _a = this,
          yField = _a.yField,
          reverseOrder = _a.reverseOrder;
        // 如果有指定 y 字段，那么按照 y 字段来 stack
        // 否则，按照高度均分
        var d = yField ? this.processStack(groupDataArray) : this.processOneDimStack(groupDataArray);
        return reverseOrder ? this.reverse(d) : d;
      };
      Stack.prototype.reverse = function (groupedDataArray) {
        return groupedDataArray.slice(0).reverse();
      };
      Stack.prototype.processStack = function (groupDataArray) {
        var _a = this,
          xField = _a.xField,
          yField = _a.yField,
          reverseOrder = _a.reverseOrder;
        // 层叠顺序翻转
        var groupedDataArray = reverseOrder ? this.reverse(groupDataArray) : groupDataArray;
        // 用来缓存，正数和负数的堆叠问题
        var positive = new default_1();
        var negative = new default_1();
        return groupedDataArray.map(function (dataArray) {
          return dataArray.map(function (data) {
            var _a;
            var x = get(data, xField, 0);
            var y = get(data, [yField]);
            var xKey = x.toString();
            // todo 是否应该取 _origin？因为 y 可能取到的值不正确，比如先 symmetric，再 stack！
            y = isArray(y) ? y[1] : y;
            if (!isNil(y)) {
              var cache = y >= 0 ? positive : negative;
              if (!cache.has(xKey)) {
                cache.set(xKey, 0);
              }
              var xValue = cache.get(xKey);
              var newXValue = y + xValue;
              // 存起来
              cache.set(xKey, newXValue);
              return __assign(__assign({}, data), (_a = {}, _a[yField] = [xValue, newXValue], _a));
            }
            // 没有修改，则直接返回
            return data;
          });
        });
      };
      Stack.prototype.processOneDimStack = function (groupDataArray) {
        var _this = this;
        var _a = this,
          xField = _a.xField,
          height = _a.height,
          reverseOrder = _a.reverseOrder;
        var yField = 'y';
        // 如果层叠的顺序翻转
        var groupedDataArray = reverseOrder ? this.reverse(groupDataArray) : groupDataArray;
        // 缓存累加数据
        var cache = new default_1();
        return groupedDataArray.map(function (dataArray) {
          return dataArray.map(function (data) {
            var _a;
            var size = _this.size;
            var xValue = data[xField];
            // todo 没有看到这个 stack 计算原理
            var stackHeight = size * 2 / height;
            if (!cache.has(xValue)) {
              cache.set(xValue, stackHeight / 2); // 初始值大小
            }
            var stackValue = cache.get(xValue);
            // 增加一层 stackHeight
            cache.set(xValue, stackValue + stackHeight);
            return __assign(__assign({}, data), (_a = {}, _a[yField] = stackValue, _a));
          });
        });
      };
      return Stack;
    }(Adjust);

    var Symmetric = /** @class */function (_super) {
      __extends(Symmetric, _super);
      function Symmetric() {
        return _super !== null && _super.apply(this, arguments) || this;
      }
      Symmetric.prototype.process = function (groupDataArray) {
        var mergeData = flatten(groupDataArray);
        var _a = this,
          xField = _a.xField,
          yField = _a.yField;
        // 每个 x 值对应的 最大值
        var cache = this.getXValuesMaxMap(mergeData);
        // 所有数据的最大的值
        var max = Math.max.apply(Math, Object.keys(cache).map(function (key) {
          return cache[key];
        }));
        return map(groupDataArray, function (dataArray) {
          return map(dataArray, function (data) {
            var _a, _b;
            var yValue = data[yField];
            var xValue = data[xField];
            // 数组处理逻辑
            if (isArray(yValue)) {
              var off_1 = (max - cache[xValue]) / 2;
              return __assign(__assign({}, data), (_a = {}, _a[yField] = map(yValue, function (y) {
                return off_1 + y;
              }), _a));
            }
            // 非数组处理逻辑
            var offset = (max - yValue) / 2;
            return __assign(__assign({}, data), (_b = {}, _b[yField] = [offset, yValue + offset], _b));
          });
        });
      };
      // 获取每个 x 对应的最大的值
      Symmetric.prototype.getXValuesMaxMap = function (mergeData) {
        var _this = this;
        var _a = this,
          xField = _a.xField,
          yField = _a.yField;
        // 根据 xField 的值进行分组
        var groupDataArray = groupBy(mergeData, function (data) {
          return data[xField];
        });
        // 获取每个 xField 值中的最大值
        return mapValues(groupDataArray, function (dataArray) {
          return _this.getDimMaxValue(dataArray, yField);
        });
      };
      Symmetric.prototype.getDimMaxValue = function (mergeData, dim) {
        // 所有的 value 值
        var dimValues = map(mergeData, function (data) {
          return get(data, dim, []);
        });
        // 将数组打平（dim value 有可能是数组，比如 stack 之后的）
        var flattenValues = flatten(dimValues);
        // 求出数组的最大值
        return Math.max.apply(Math, flattenValues);
      };
      return Symmetric;
    }(Adjust);

    function toTimeStamp$1(value) {
      if (isString(value)) {
        if (value.indexOf('T') > 0) {
          value = new Date(value).getTime();
        } else {
          // new Date('2010/01/10') 和 new Date('2010-01-10') 的差别在于:
          // 如果仅有年月日时，前者是带有时区的: Fri Jan 10 2020 02:40:13 GMT+0800 (中国标准时间)
          // 后者会格式化成 Sun Jan 10 2010 08:00:00 GMT+0800 (中国标准时间)
          value = new Date(value.replace(/-/gi, '/')).getTime();
        }
      }
      if (isDate(value)) {
        value = value.getTime();
      }
      return value;
    }

    var Base$1 = /** @class */function () {
      function Base(options) {
        mix(this, options);
        var _a = this,
          scale = _a.scale,
          field = _a.field,
          data = _a.data;
        if (!scale && data) {
          var values = valuesOfKey(data, field);
          this.scale = this.createScale({
            values: values,
            field: field
          });
        }
      }
      Base.prototype.createScale = function (_scaleConfig) {
        return null;
      };
      // 数据映射方法
      Base.prototype._mapping = function (value) {
        return value;
      };
      Base.prototype.update = function (options) {
        mix(this, options);
      };
      Base.prototype.setRange = function (range) {
        this.range = range;
      };
      // 归一化，参数是原始数据，返回是归一化的数据
      Base.prototype.normalize = function (value) {
        var scale = this.scale;
        if (isArray(value)) {
          return value.map(function (v) {
            return scale.scale(v);
          });
        }
        return scale.scale(value);
      };
      // convert 参数是归一化的数据，返回定义域的值
      Base.prototype.convert = function (value) {
        return value;
      };
      // 等于 normalize + convert， 参数是原始数据，返回是定义域的值
      Base.prototype.mapping = function (value, child) {
        if (child === void 0) {
          child = null;
        }
        var rst = isFunction(this.callback) ? this.callback(value, child) : null;
        if (!isNil(rst)) {
          return rst;
        }
        return this._mapping(value);
      };
      return Base;
    }();

    var _typeof_1 = createCommonjsModule(function (module) {
    function _typeof(o) {
      "@babel/helpers - typeof";

      return module.exports = _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
        return typeof o;
      } : function (o) {
        return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
      }, module.exports.__esModule = true, module.exports["default"] = module.exports, _typeof(o);
    }
    module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports;
    });

    function define$1 (constructor, factory, prototype) {
      constructor.prototype = factory.prototype = prototype;
      prototype.constructor = constructor;
    }
    function extend$1(parent, definition) {
      var prototype = Object.create(parent.prototype);
      for (var key in definition) prototype[key] = definition[key];
      return prototype;
    }

    function Color$1() {}
    var _darker = 0.7;
    var _brighter = 1 / _darker;
    var reI$1 = "\\s*([+-]?\\d+)\\s*",
      reN$1 = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)\\s*",
      reP$1 = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)%\\s*",
      reHex$1 = /^#([0-9a-f]{3,8})$/,
      reRgbInteger$1 = new RegExp("^rgb\\(" + [reI$1, reI$1, reI$1] + "\\)$"),
      reRgbPercent$1 = new RegExp("^rgb\\(" + [reP$1, reP$1, reP$1] + "\\)$"),
      reRgbaInteger$1 = new RegExp("^rgba\\(" + [reI$1, reI$1, reI$1, reN$1] + "\\)$"),
      reRgbaPercent$1 = new RegExp("^rgba\\(" + [reP$1, reP$1, reP$1, reN$1] + "\\)$"),
      reHslPercent$1 = new RegExp("^hsl\\(" + [reN$1, reP$1, reP$1] + "\\)$"),
      reHslaPercent$1 = new RegExp("^hsla\\(" + [reN$1, reP$1, reP$1, reN$1] + "\\)$");
    var named$1 = {
      aliceblue: 0xf0f8ff,
      antiquewhite: 0xfaebd7,
      aqua: 0x00ffff,
      aquamarine: 0x7fffd4,
      azure: 0xf0ffff,
      beige: 0xf5f5dc,
      bisque: 0xffe4c4,
      black: 0x000000,
      blanchedalmond: 0xffebcd,
      blue: 0x0000ff,
      blueviolet: 0x8a2be2,
      brown: 0xa52a2a,
      burlywood: 0xdeb887,
      cadetblue: 0x5f9ea0,
      chartreuse: 0x7fff00,
      chocolate: 0xd2691e,
      coral: 0xff7f50,
      cornflowerblue: 0x6495ed,
      cornsilk: 0xfff8dc,
      crimson: 0xdc143c,
      cyan: 0x00ffff,
      darkblue: 0x00008b,
      darkcyan: 0x008b8b,
      darkgoldenrod: 0xb8860b,
      darkgray: 0xa9a9a9,
      darkgreen: 0x006400,
      darkgrey: 0xa9a9a9,
      darkkhaki: 0xbdb76b,
      darkmagenta: 0x8b008b,
      darkolivegreen: 0x556b2f,
      darkorange: 0xff8c00,
      darkorchid: 0x9932cc,
      darkred: 0x8b0000,
      darksalmon: 0xe9967a,
      darkseagreen: 0x8fbc8f,
      darkslateblue: 0x483d8b,
      darkslategray: 0x2f4f4f,
      darkslategrey: 0x2f4f4f,
      darkturquoise: 0x00ced1,
      darkviolet: 0x9400d3,
      deeppink: 0xff1493,
      deepskyblue: 0x00bfff,
      dimgray: 0x696969,
      dimgrey: 0x696969,
      dodgerblue: 0x1e90ff,
      firebrick: 0xb22222,
      floralwhite: 0xfffaf0,
      forestgreen: 0x228b22,
      fuchsia: 0xff00ff,
      gainsboro: 0xdcdcdc,
      ghostwhite: 0xf8f8ff,
      gold: 0xffd700,
      goldenrod: 0xdaa520,
      gray: 0x808080,
      green: 0x008000,
      greenyellow: 0xadff2f,
      grey: 0x808080,
      honeydew: 0xf0fff0,
      hotpink: 0xff69b4,
      indianred: 0xcd5c5c,
      indigo: 0x4b0082,
      ivory: 0xfffff0,
      khaki: 0xf0e68c,
      lavender: 0xe6e6fa,
      lavenderblush: 0xfff0f5,
      lawngreen: 0x7cfc00,
      lemonchiffon: 0xfffacd,
      lightblue: 0xadd8e6,
      lightcoral: 0xf08080,
      lightcyan: 0xe0ffff,
      lightgoldenrodyellow: 0xfafad2,
      lightgray: 0xd3d3d3,
      lightgreen: 0x90ee90,
      lightgrey: 0xd3d3d3,
      lightpink: 0xffb6c1,
      lightsalmon: 0xffa07a,
      lightseagreen: 0x20b2aa,
      lightskyblue: 0x87cefa,
      lightslategray: 0x778899,
      lightslategrey: 0x778899,
      lightsteelblue: 0xb0c4de,
      lightyellow: 0xffffe0,
      lime: 0x00ff00,
      limegreen: 0x32cd32,
      linen: 0xfaf0e6,
      magenta: 0xff00ff,
      maroon: 0x800000,
      mediumaquamarine: 0x66cdaa,
      mediumblue: 0x0000cd,
      mediumorchid: 0xba55d3,
      mediumpurple: 0x9370db,
      mediumseagreen: 0x3cb371,
      mediumslateblue: 0x7b68ee,
      mediumspringgreen: 0x00fa9a,
      mediumturquoise: 0x48d1cc,
      mediumvioletred: 0xc71585,
      midnightblue: 0x191970,
      mintcream: 0xf5fffa,
      mistyrose: 0xffe4e1,
      moccasin: 0xffe4b5,
      navajowhite: 0xffdead,
      navy: 0x000080,
      oldlace: 0xfdf5e6,
      olive: 0x808000,
      olivedrab: 0x6b8e23,
      orange: 0xffa500,
      orangered: 0xff4500,
      orchid: 0xda70d6,
      palegoldenrod: 0xeee8aa,
      palegreen: 0x98fb98,
      paleturquoise: 0xafeeee,
      palevioletred: 0xdb7093,
      papayawhip: 0xffefd5,
      peachpuff: 0xffdab9,
      peru: 0xcd853f,
      pink: 0xffc0cb,
      plum: 0xdda0dd,
      powderblue: 0xb0e0e6,
      purple: 0x800080,
      rebeccapurple: 0x663399,
      red: 0xff0000,
      rosybrown: 0xbc8f8f,
      royalblue: 0x4169e1,
      saddlebrown: 0x8b4513,
      salmon: 0xfa8072,
      sandybrown: 0xf4a460,
      seagreen: 0x2e8b57,
      seashell: 0xfff5ee,
      sienna: 0xa0522d,
      silver: 0xc0c0c0,
      skyblue: 0x87ceeb,
      slateblue: 0x6a5acd,
      slategray: 0x708090,
      slategrey: 0x708090,
      snow: 0xfffafa,
      springgreen: 0x00ff7f,
      steelblue: 0x4682b4,
      tan: 0xd2b48c,
      teal: 0x008080,
      thistle: 0xd8bfd8,
      tomato: 0xff6347,
      turquoise: 0x40e0d0,
      violet: 0xee82ee,
      wheat: 0xf5deb3,
      white: 0xffffff,
      whitesmoke: 0xf5f5f5,
      yellow: 0xffff00,
      yellowgreen: 0x9acd32
    };
    define$1(Color$1, color$1, {
      copy: function copy(channels) {
        return Object.assign(new this.constructor(), this, channels);
      },
      displayable: function displayable() {
        return this.rgb().displayable();
      },
      hex: color_formatHex$1,
      // Deprecated! Use color.formatHex.
      formatHex: color_formatHex$1,
      formatHsl: color_formatHsl$1,
      formatRgb: color_formatRgb$1,
      toString: color_formatRgb$1
    });
    function color_formatHex$1() {
      return this.rgb().formatHex();
    }
    function color_formatHsl$1() {
      return hslConvert$1(this).formatHsl();
    }
    function color_formatRgb$1() {
      return this.rgb().formatRgb();
    }
    function color$1(format) {
      var m, l;
      format = (format + "").trim().toLowerCase();
      return (m = reHex$1.exec(format)) ? (l = m[1].length, m = parseInt(m[1], 16), l === 6 ? rgbn$1(m) // #ff0000
      : l === 3 ? new Rgb$1(m >> 8 & 0xf | m >> 4 & 0xf0, m >> 4 & 0xf | m & 0xf0, (m & 0xf) << 4 | m & 0xf, 1) // #f00
      : l === 8 ? rgba$1(m >> 24 & 0xff, m >> 16 & 0xff, m >> 8 & 0xff, (m & 0xff) / 0xff) // #ff000000
      : l === 4 ? rgba$1(m >> 12 & 0xf | m >> 8 & 0xf0, m >> 8 & 0xf | m >> 4 & 0xf0, m >> 4 & 0xf | m & 0xf0, ((m & 0xf) << 4 | m & 0xf) / 0xff) // #f000
      : null // invalid hex
      ) : (m = reRgbInteger$1.exec(format)) ? new Rgb$1(m[1], m[2], m[3], 1) // rgb(255, 0, 0)
      : (m = reRgbPercent$1.exec(format)) ? new Rgb$1(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) // rgb(100%, 0%, 0%)
      : (m = reRgbaInteger$1.exec(format)) ? rgba$1(m[1], m[2], m[3], m[4]) // rgba(255, 0, 0, 1)
      : (m = reRgbaPercent$1.exec(format)) ? rgba$1(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) // rgb(100%, 0%, 0%, 1)
      : (m = reHslPercent$1.exec(format)) ? hsla$1(m[1], m[2] / 100, m[3] / 100, 1) // hsl(120, 50%, 50%)
      : (m = reHslaPercent$1.exec(format)) ? hsla$1(m[1], m[2] / 100, m[3] / 100, m[4]) // hsla(120, 50%, 50%, 1)
      : named$1.hasOwnProperty(format) ? rgbn$1(named$1[format]) // eslint-disable-line no-prototype-builtins
      : format === "transparent" ? new Rgb$1(NaN, NaN, NaN, 0) : null;
    }
    function rgbn$1(n) {
      return new Rgb$1(n >> 16 & 0xff, n >> 8 & 0xff, n & 0xff, 1);
    }
    function rgba$1(r, g, b, a) {
      if (a <= 0) r = g = b = NaN;
      return new Rgb$1(r, g, b, a);
    }
    function rgbConvert$1(o) {
      if (!(o instanceof Color$1)) o = color$1(o);
      if (!o) return new Rgb$1();
      o = o.rgb();
      return new Rgb$1(o.r, o.g, o.b, o.opacity);
    }
    function rgb$1(r, g, b, opacity) {
      return arguments.length === 1 ? rgbConvert$1(r) : new Rgb$1(r, g, b, opacity == null ? 1 : opacity);
    }
    function Rgb$1(r, g, b, opacity) {
      this.r = +r;
      this.g = +g;
      this.b = +b;
      this.opacity = +opacity;
    }
    define$1(Rgb$1, rgb$1, extend$1(Color$1, {
      brighter: function brighter(k) {
        k = k == null ? _brighter : Math.pow(_brighter, k);
        return new Rgb$1(this.r * k, this.g * k, this.b * k, this.opacity);
      },
      darker: function darker(k) {
        k = k == null ? _darker : Math.pow(_darker, k);
        return new Rgb$1(this.r * k, this.g * k, this.b * k, this.opacity);
      },
      rgb: function rgb() {
        return this;
      },
      displayable: function displayable() {
        return -0.5 <= this.r && this.r < 255.5 && -0.5 <= this.g && this.g < 255.5 && -0.5 <= this.b && this.b < 255.5 && 0 <= this.opacity && this.opacity <= 1;
      },
      hex: rgb_formatHex$1,
      // Deprecated! Use color.formatHex.
      formatHex: rgb_formatHex$1,
      formatRgb: rgb_formatRgb$1,
      toString: rgb_formatRgb$1
    }));
    function rgb_formatHex$1() {
      return "#" + hex$1(this.r) + hex$1(this.g) + hex$1(this.b);
    }
    function rgb_formatRgb$1() {
      var a = this.opacity;
      a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
      return (a === 1 ? "rgb(" : "rgba(") + Math.max(0, Math.min(255, Math.round(this.r) || 0)) + ", " + Math.max(0, Math.min(255, Math.round(this.g) || 0)) + ", " + Math.max(0, Math.min(255, Math.round(this.b) || 0)) + (a === 1 ? ")" : ", " + a + ")");
    }
    function hex$1(value) {
      value = Math.max(0, Math.min(255, Math.round(value) || 0));
      return (value < 16 ? "0" : "") + value.toString(16);
    }
    function hsla$1(h, s, l, a) {
      if (a <= 0) h = s = l = NaN;else if (l <= 0 || l >= 1) h = s = NaN;else if (s <= 0) h = NaN;
      return new Hsl$1(h, s, l, a);
    }
    function hslConvert$1(o) {
      if (o instanceof Hsl$1) return new Hsl$1(o.h, o.s, o.l, o.opacity);
      if (!(o instanceof Color$1)) o = color$1(o);
      if (!o) return new Hsl$1();
      if (o instanceof Hsl$1) return o;
      o = o.rgb();
      var r = o.r / 255,
        g = o.g / 255,
        b = o.b / 255,
        min = Math.min(r, g, b),
        max = Math.max(r, g, b),
        h = NaN,
        s = max - min,
        l = (max + min) / 2;
      if (s) {
        if (r === max) h = (g - b) / s + (g < b) * 6;else if (g === max) h = (b - r) / s + 2;else h = (r - g) / s + 4;
        s /= l < 0.5 ? max + min : 2 - max - min;
        h *= 60;
      } else {
        s = l > 0 && l < 1 ? 0 : h;
      }
      return new Hsl$1(h, s, l, o.opacity);
    }
    function hsl$1(h, s, l, opacity) {
      return arguments.length === 1 ? hslConvert$1(h) : new Hsl$1(h, s, l, opacity == null ? 1 : opacity);
    }
    function Hsl$1(h, s, l, opacity) {
      this.h = +h;
      this.s = +s;
      this.l = +l;
      this.opacity = +opacity;
    }
    define$1(Hsl$1, hsl$1, extend$1(Color$1, {
      brighter: function brighter(k) {
        k = k == null ? _brighter : Math.pow(_brighter, k);
        return new Hsl$1(this.h, this.s, this.l * k, this.opacity);
      },
      darker: function darker(k) {
        k = k == null ? _darker : Math.pow(_darker, k);
        return new Hsl$1(this.h, this.s, this.l * k, this.opacity);
      },
      rgb: function rgb() {
        var h = this.h % 360 + (this.h < 0) * 360,
          s = isNaN(h) || isNaN(this.s) ? 0 : this.s,
          l = this.l,
          m2 = l + (l < 0.5 ? l : 1 - l) * s,
          m1 = 2 * l - m2;
        return new Rgb$1(hsl2rgb$1(h >= 240 ? h - 240 : h + 120, m1, m2), hsl2rgb$1(h, m1, m2), hsl2rgb$1(h < 120 ? h + 240 : h - 120, m1, m2), this.opacity);
      },
      displayable: function displayable() {
        return (0 <= this.s && this.s <= 1 || isNaN(this.s)) && 0 <= this.l && this.l <= 1 && 0 <= this.opacity && this.opacity <= 1;
      },
      formatHsl: function formatHsl() {
        var a = this.opacity;
        a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
        return (a === 1 ? "hsl(" : "hsla(") + (this.h || 0) + ", " + (this.s || 0) * 100 + "%, " + (this.l || 0) * 100 + "%" + (a === 1 ? ")" : ", " + a + ")");
      }
    }));

    /* From FvD 13.37, CSS Color Module Level 3 */
    function hsl2rgb$1(h, m1, m2) {
      return (h < 60 ? m1 + (m2 - m1) * h / 60 : h < 180 ? m2 : h < 240 ? m1 + (m2 - m1) * (240 - h) / 60 : m1) * 255;
    }

    var constant = (function (x) {
      return function () {
        return x;
      };
    });

    function linear$1(a, d) {
      return function (t) {
        return a + t * d;
      };
    }
    function exponential(a, b, y) {
      return a = Math.pow(a, y), b = Math.pow(b, y) - a, y = 1 / y, function (t) {
        return Math.pow(a + t * b, y);
      };
    }
    function gamma(y) {
      return (y = +y) === 1 ? nogamma : function (a, b) {
        return b - a ? exponential(a, b, y) : constant(isNaN(a) ? b : a);
      };
    }
    function nogamma(a, b) {
      var d = b - a;
      return d ? linear$1(a, d) : constant(isNaN(a) ? b : a);
    }

    var interpolateRgb = (function rgbGamma(y) {
      var color = gamma(y);
      function rgb(start, end) {
        var r = color((start = rgb$1(start)).r, (end = rgb$1(end)).r),
          g = color(start.g, end.g),
          b = color(start.b, end.b),
          opacity = nogamma(start.opacity, end.opacity);
        return function (t) {
          start.r = r(t);
          start.g = g(t);
          start.b = b(t);
          start.opacity = opacity(t);
          return start + '';
        };
      }
      rgb.gamma = rgbGamma;
      return rgb;
    })(1);

    function interpolateNumber (a, b) {
      return a = +a, b = +b, function (t) {
        return a * (1 - t) + b * t;
      };
    }

    // 只处理 number 和 color
    var interpolate$1 = function interpolate(a, b) {
      if (isNumber(b)) {
        return interpolateNumber(a, b);
      }
      return interpolateRgb(a, b);
    };
    var Linear$1 = /** @class */function (_super) {
      __extends(Linear$1, _super);
      function Linear$1(options) {
        var _this = _super.call(this, options) || this;
        _this._updateInterpolate();
        return _this;
      }
      Linear$1.prototype.createScale = function (scaleConfig) {
        return new Linear(scaleConfig);
      };
      Linear$1.prototype._updateInterpolate = function () {
        var _a = this.range,
          min = _a[0],
          max = _a[1];
        this.interpolate = interpolate$1(min, max);
      };
      Linear$1.prototype.update = function (options) {
        _super.prototype.update.call(this, options);
        this._updateInterpolate();
      };
      Linear$1.prototype._mapping = function (value) {
        var _a = this,
          scale = _a.scale,
          interpolate = _a.interpolate;
        if (isArray(value)) {
          return value.map(function (v) {
            return interpolate(scale.scale(v));
          });
        }
        return interpolate(scale.scale(value));
      };
      Linear$1.prototype.normalize = function (value) {
        var scale = this.scale;
        if (isArray(value)) {
          return value.map(function (v) {
            return scale.scale(v);
          });
        }
        return scale.scale(value);
      };
      Linear$1.prototype.convert = function (value) {
        var range = this.range;
        var min = range[0],
          max = range[1];
        if (isArray(value)) {
          return value.map(function (v) {
            return min + (max - min) * v;
          });
        }
        return min + (max - min) * value;
      };
      return Linear$1;
    }(Base$1);

    var Category$1 = /** @class */function (_super) {
      __extends(Category$1, _super);
      function Category$1() {
        return _super !== null && _super.apply(this, arguments) || this;
      }
      Category$1.prototype.createScale = function (scaleConfig) {
        return new Category(scaleConfig);
      };
      Category$1.prototype._mapping = function (value) {
        var _a = this,
          scale = _a.scale,
          range = _a.range;
        if (scale.type === 'cat') {
          var index_1 = scale.translate(value);
          return range[index_1 % range.length];
        }
        var normalizeValue = scale.scale(value);
        var index = Math.round(normalizeValue * (range.length - 1));
        return range[index];
      };
      return Category$1;
    }(Base$1);

    var Identity$1 = /** @class */function (_super) {
      __extends(Identity$1, _super);
      function Identity$1() {
        return _super !== null && _super.apply(this, arguments) || this;
      }
      Identity$1.prototype.createScale = function (scaleConfig) {
        return new Identity(scaleConfig);
      };
      Identity$1.prototype._mapping = function () {
        var _a = this,
          field = _a.field,
          range = _a.range;
        return field || range && range[0];
      };
      return Identity$1;
    }(Base$1);

    var Attrs = /*#__PURE__*/Object.freeze({
        __proto__: null,
        Attr: Base$1,
        Linear: Linear$1,
        Category: Category$1,
        Identity: Identity$1
    });

    var Identity$2 = Identity$1,
      Linear$2 = Linear$1,
      Category$2 = Category$1;
    // 需要映射的属性名
    var ATTRS = ['x', 'y', 'color', 'size', 'shape'];
    // 分组处理的属性
    var GROUP_ATTRS = ['color', 'size', 'shape'];
    function cloneScale(scale, scaleConfig) {
      // @ts-ignore
      return new scale.constructor(__assign(__assign({}, scale.__cfg__), scaleConfig));
    }
    var AttrController = /** @class */function () {
      function AttrController(scaleController, attrsRange) {
        this.scaleController = scaleController;
        this.attrsRange = attrsRange;
        this.options = {};
        this.attrs = {};
      }
      AttrController.prototype.parseOption = function (option, attrName) {
        if (!option) {
          return {
            type: 'identity'
          };
        }
        if (isString(option)) {
          return {
            field: option,
            type: 'category'
          };
        }
        if (isNumber(option)) {
          if (attrName === 'size') {
            return {
              type: 'identity',
              field: option
            };
          }
        }
        if (isArray(option)) {
          return {
            field: option[0],
            range: option[1]
          };
        }
        return option;
      };
      AttrController.prototype.getAttrOptions = function (props, justifyContentCenter) {
        var _this = this;
        if (!props.x || !props.y) {
          throw new Error('x, y are required !');
        }
        var options = {};
        var ranges = this.attrsRange;
        ATTRS.forEach(function (attrName) {
          if (!props[attrName]) return;
          var option = _this.parseOption(props[attrName], attrName);
          if (!option.range) {
            option.range = ranges[attrName];
          }
          options[attrName] = option;
        });
        // @ts-ignore
        var x = options.x,
          y = options.y;
        x.justifyContent = justifyContentCenter;
        // x, y 都是固定Linear 映射
        x.type = Linear$2;
        y.type = Linear$2;
        return options;
      };
      AttrController.prototype.getDefaultAttrValues = function () {
        var _a = this.attrsRange,
          color = _a.color,
          shape = _a.shape;
        return {
          color: color[0],
          shape: shape && shape[0]
        };
      };
      AttrController.prototype.getGroupScales = function () {
        var attrs = this.attrs;
        var scales = [];
        each(GROUP_ATTRS, function (attrName) {
          var attr = attrs[attrName];
          if (!attr) {
            return;
          }
          var scale = attr.scale;
          if (scale && scale.isCategory && scales.indexOf(scale) === -1) {
            scales.push(scale);
          }
        });
        return scales;
      };
      AttrController.prototype.createAttr = function (option) {
        var type = option.type,
          field = option.field,
          scaleConfig = option.scale;
        if (isNil(field) || type === Identity$2) {
          return new Identity$2(option);
        }
        var scale = this.scaleController.getScale(field);
        var attrOption = __assign(__assign({}, option), {
          data: this.scaleController.getData(),
          // scaleConfig 只在属性映射中生效
          scale: scaleConfig ? cloneScale(scale, scaleConfig) : scale
        });
        // identity
        if (scale && scale.type === 'identity') {
          return new Identity$2(attrOption);
        }
        // Attr的默认类型和scale类型保持一致
        var AttrConstructor = scale.isLinear ? Linear$2 : Category$2;
        // custom Attr Constructor
        if (isFunction(type)) {
          AttrConstructor = type;
        }
        if (isString(type) && Attrs[upperFirst(type)]) {
          AttrConstructor = Attrs[upperFirst(type)];
        }
        return new AttrConstructor(attrOption);
      };
      AttrController.prototype.create = function (options) {
        this.update(options);
      };
      AttrController.prototype.update = function (nextOptions) {
        var _a = this,
          scaleController = _a.scaleController,
          lastOptions = _a.options,
          lastAttrs = _a.attrs;
        var nextAttrs = {};
        each(nextOptions, function (nextOption, attrName) {
          var lastOption = lastOptions[attrName];
          if (equal(nextOption, lastOption)) {
            nextAttrs[attrName] = lastAttrs[attrName];
          }
          var field = nextOption.field,
            justifyContent = nextOption.justifyContent;
          if (field) {
            scaleController.setScale(field, {
              justifyContent: justifyContent
            });
          }
        });
        this.options = nextOptions;
        this.attrs = nextAttrs;
      };
      AttrController.prototype.getAttr = function (attrName) {
        var _a = this,
          attrs = _a.attrs,
          options = _a.options;
        var attr = attrs[attrName];
        if (attr) {
          return attr;
        }
        var option = options[attrName];
        if (!option) {
          return null;
        }
        var newAttr = this.createAttr(option);
        attrs[attrName] = newAttr;
        return newAttr;
      };
      AttrController.prototype.getAttrs = function () {
        var _this = this;
        var _a = this,
          options = _a.options,
          attrs = _a.attrs;
        each(options, function (option, attrName) {
          _this.getAttr(attrName);
        });
        return attrs;
      };
      AttrController.prototype.isGroupAttr = function (attrName) {
        return GROUP_ATTRS.indexOf(attrName) !== -1;
      };
      AttrController.prototype.getAttrsByLinear = function () {
        var attrs = this.attrs;
        var attrNames = Object.keys(attrs);
        var linearAttrs = [];
        var nonlinearAttrs = [];
        attrNames.forEach(function (attrName) {
          if (attrName === 'x' || attrName === 'y') {
            linearAttrs.push(attrName);
            return;
          }
          var scale = attrs[attrName].scale;
          if (scale && scale.type === 'linear') {
            linearAttrs.push(attrName);
          } else {
            nonlinearAttrs.push(attrName);
          }
        });
        return {
          linearAttrs: linearAttrs,
          nonlinearAttrs: nonlinearAttrs
        };
      };
      return AttrController;
    }();

    var AdjustMap = {
      Stack: Stack,
      Dodge: Dodge,
      Jitter: Jitter,
      Symmetric: Symmetric
    };
    // 保留原始数据的字段
    var FIELD_ORIGIN = 'origin';
    var Geometry = /** @class */function (_super) {
      __extends(Geometry, _super);
      function Geometry(props, context) {
        var _this = _super.call(this, props, context) || this;
        _this.isGeometry = true;
        // x 轴居中
        _this.justifyContent = false;
        // y 轴是否从0开始
        _this.startOnZero = false;
        // 是否连接空值
        _this.connectNulls = false;
        // 是否需要排序
        _this.sortable = false;
        mix(_this, _this.getDefaultCfg());
        var chart = props.chart;
        var attrsRange = _this._getThemeAttrsRange();
        _this.attrController = new AttrController(chart.scale, attrsRange);
        var attrController = _this.attrController;
        var attrOptions = _this.getAttrOptions(props);
        attrController.create(attrOptions);
        return _this;
      }
      Geometry.prototype.getDefaultCfg = function () {
        return {};
      };
      Geometry.prototype.getAttrOptions = function (props) {
        var coord = props.coord;
        var _a = this,
          attrController = _a.attrController,
          justifyContent = _a.justifyContent;
        var justifyContentCenter = !coord.isCyclic() || justifyContent;
        var args = {};
        ATTRS.forEach(function (d) {
          return args[d] = props[d];
        });
        var attrOptions = attrController.getAttrOptions(this.context.px2hd(args), justifyContentCenter);
        return attrOptions;
      };
      Geometry.prototype.willReceiveProps = function (nextProps) {
        var _a = this,
          lastProps = _a.props,
          attrController = _a.attrController;
        var nextData = nextProps.data,
          nextAdjust = nextProps.adjust,
          selection = nextProps.selection;
        var lastData = lastProps.data,
          lastAdjust = lastProps.adjust,
          lastSelection = lastProps.selection;
        var lastAttrOptions = this.getAttrOptions(lastProps);
        attrController.attrsRange = this._getThemeAttrsRange();
        var nextAttrOptions = this.getAttrOptions(nextProps);
        if (!equal(nextAttrOptions, lastAttrOptions)) {
          attrController.update(nextAttrOptions);
          this.dataRecords = null;
        }
        // 重新处理数据
        if (nextData !== lastData) {
          this.dataRecords = null;
        }
        // 重新处理数据
        if (nextAdjust !== lastAdjust) {
          this.dataRecords = null;
        }
        // selection 发生变化
        if (!equal(selection, lastSelection)) {
          _super.prototype.willReceiveProps.call(this, nextProps);
        }
      };
      Geometry.prototype.willMount = function () {
        this._createAttrs();
        if (!this.dataRecords) {
          this._processData();
        }
      };
      Geometry.prototype.willUpdate = function () {
        this._createAttrs();
        if (!this.dataRecords) {
          this._processData();
        } else {
          this._readjustData(this.dataRecords);
        }
      };
      Geometry.prototype.didMount = function () {
        this._initEvent();
        _super.prototype.didMount.call(this);
        // 更新 attrController
        this.attrController.attrsRange = this._getThemeAttrsRange();
      };
      Geometry.prototype._initEvent = function () {
        var _this = this;
        var props = this.props;
        var chart = props.chart;
        ['onPressStart', 'onPress', 'onPressEnd', 'onPan', 'onPanStart', 'onPanEnd'].forEach(function (eventName) {
          if (props[eventName]) {
            chart.on(eventName.substr(2).toLowerCase(), function (ev) {
              ev.geometry = _this;
              props[eventName](ev);
            });
          }
        });
      };
      Geometry.prototype._createAttrs = function () {
        var attrController = this.attrController;
        attrController.attrs = {};
        this.attrs = attrController.getAttrs();
      };
      Geometry.prototype._getThemeAttrsRange = function () {
        var _a = this,
          context = _a.context,
          props = _a.props,
          geomType = _a.geomType;
        var coord = props.coord;
        var theme = context.theme;
        var colors = theme.colors,
          sizes = theme.sizes,
          shapes = theme.shapes;
        return {
          x: coord.x,
          y: coord.y,
          color: colors,
          size: sizes,
          shape: shapes[geomType]
        };
      };
      Geometry.prototype._createAdjust = function () {
        var _a = this,
          attrs = _a.attrs,
          props = _a.props;
        var adjust = props.adjust;
        if (!adjust) {
          return null;
        }
        var adjustCfg = typeof adjust === 'string' ? {
          type: adjust
        } : adjust;
        var adjustType = upperFirst(adjustCfg.type);
        var AdjustConstructor = AdjustMap[adjustType];
        if (!AdjustConstructor) {
          throw new Error('not support such adjust : ' + adjust);
        }
        if (adjustType === 'Dodge') {
          // @ts-ignore
          adjustCfg.adjustNames = ['x'];
        }
        var x = attrs.x,
          y = attrs.y;
        // @ts-ignore
        adjustCfg.xField = x.field;
        // @ts-ignore
        adjustCfg.yField = y.field;
        var adjustInstance = new AdjustConstructor(adjustCfg);
        this.adjust = {
          type: adjustCfg.type,
          adjust: adjustInstance
        };
        return this.adjust;
      };
      Geometry.prototype._adjustScales = function () {
        var _a = this,
          attrs = _a.attrs,
          props = _a.props,
          defaultStartOnZero = _a.startOnZero;
        var chart = props.chart,
          _b = props.startOnZero,
          startOnZero = _b === void 0 ? defaultStartOnZero : _b,
          coord = props.coord,
          adjust = props.adjust;
        var isPolar = coord.isPolar,
          transposed = coord.transposed;
        var y = attrs.y;
        // 如果从 0 开始，只调整 y 轴 scale
        if (startOnZero) {
          chart.scale.adjustStartZero(y.scale);
        }
        // 饼图的scale调整，关闭nice
        if (isPolar && transposed && (adjust === 'stack' || (adjust === null || adjust === void 0 ? void 0 : adjust.type) === 'stack')) {
          chart.scale.adjustPieScale(y.scale);
        }
        if (adjust === 'stack' || (adjust === null || adjust === void 0 ? void 0 : adjust.type) === 'stack') {
          chart.scale._updateStackRange(y.scale, flatten(this.dataArray));
        }
      };
      Geometry.prototype._groupData = function (data) {
        var attrController = this.attrController;
        var groupScales = attrController.getGroupScales();
        if (!groupScales.length) {
          return [{
            children: data
          }];
        }
        var names = [];
        groupScales.forEach(function (scale) {
          var field = scale.field;
          names.push(field);
        });
        var groups = groupToMap(data, names);
        var records = [];
        for (var key in groups) {
          records.push({
            key: key.replace(/^_/, ''),
            children: groups[key]
          });
        }
        return records;
      };
      Geometry.prototype._saveOrigin = function (originData) {
        var _a;
        var len = originData.length;
        var data = new Array(len);
        for (var i = 0; i < len; i++) {
          var record = originData[i];
          data[i] = __assign(__assign({}, record), (_a = {}, _a[FIELD_ORIGIN] = record, _a));
        }
        return data;
      };
      Geometry.prototype._numberic = function (data) {
        var attrs = this.attrs;
        var scales = [attrs.x.scale, attrs.y.scale];
        for (var j = 0, len = data.length; j < len; j++) {
          var obj = data[j];
          var count = scales.length;
          for (var i = 0; i < count; i++) {
            var scale = scales[i];
            if (scale.isCategory) {
              var field = scale.field;
              var value = scale.translate(obj.origin[field]);
              obj[field] = value;
            }
          }
        }
      };
      Geometry.prototype._adjustData = function (records) {
        var adjust = this.adjust;
        // groupedArray 是二维数组
        var groupedArray = records.map(function (record) {
          return record.children;
        });
        if (!adjust) {
          return groupedArray;
        }
        var attrs = this.attrs;
        var scales = [attrs.x.scale, attrs.y.scale];
        for (var i = 0, len = groupedArray.length; i < len; i++) {
          var records_1 = groupedArray[i];
          for (var j = 0, len_1 = records_1.length; j < len_1; j++) {
            var record = records_1[j];
            var count = scales.length;
            for (var i_1 = 0; i_1 < count; i_1++) {
              var scale = scales[i_1];
              var field = scale.field;
              record[field] = record.origin[field];
            }
          }
        }
        if (adjust.type === 'dodge') {
          for (var i = 0, len = groupedArray.length; i < len; i++) {
            // 如果是dodge, 需要处理数字再处理
            this._numberic(groupedArray[i]);
          }
        }
        var adjustData = adjust.adjust.process(groupedArray);
        // process 返回的是新数组，所以要修改 records
        records.forEach(function (record, index) {
          record.children = adjustData[index];
        });
        return adjustData;
      };
      Geometry.prototype._processData = function () {
        var props = this.props;
        var originData = props.data;
        var data = this._saveOrigin(originData);
        // 根据分类度量进行数据分组
        var records = this._groupData(data);
        this._createAdjust();
        // 根据adjust分组
        var dataArray = this._adjustData(records);
        this.dataArray = dataArray;
        // scale适配调整，主要是调整 y 轴是否从 0 开始 以及 饼图
        this._adjustScales();
        // 数据排序（非必须）
        if (this.sortable) {
          this._sortData(records);
        }
        this.dataRecords = records;
      };
      Geometry.prototype._readjustData = function (records) {
        var adjust = this.adjust;
        if (!adjust) return;
        // 根据adjust分组
        var dataArray = this._adjustData(records);
        this.dataArray = dataArray;
      };
      Geometry.prototype._sortData = function (records) {
        var xScale = this.getXScale();
        var field = xScale.field,
          type = xScale.type;
        if (type !== 'identity' && xScale.values.length > 1) {
          each(records, function (_a) {
            var children = _a.children;
            children.sort(function (record1, record2) {
              if (type === 'timeCat') {
                return toTimeStamp$1(record1[FIELD_ORIGIN][field]) - toTimeStamp$1(record2[FIELD_ORIGIN][field]);
              }
              var normalized1 = xScale.translate(record1[FIELD_ORIGIN][field]);
              var normalized2 = xScale.translate(record2[FIELD_ORIGIN][field]);
              if (isNaN(normalized1)) {
                return 1;
              }
              if (isNaN(normalized2)) {
                return -1;
              }
              return normalized1 - normalized2;
            });
          });
        }
      };
      Geometry.prototype.getY0Value = function () {
        var _a = this,
          attrs = _a.attrs,
          props = _a.props;
        var chart = props.chart;
        var field = attrs.y.field;
        var scale = chart.getScale(field);
        return chart.scale.getZeroValue(scale);
      };
      // 根据各属性映射的值域来获取真正的绘图属性
      Geometry.prototype._getShapeStyle = function (shape, origin) {
        var _a = this,
          context = _a.context,
          props = _a.props,
          geomType = _a.geomType;
        var theme = context.theme;
        var shapeTheme = theme.shape[geomType] || {};
        var defaultShapeStyle = shapeTheme.default;
        var shapeThemeStyle = shapeTheme[shape];
        var style = props.style;
        var shapeStyle = __assign(__assign({}, defaultShapeStyle), shapeThemeStyle);
        if (!style || !isObject(style)) {
          return shapeStyle;
        }
        // @ts-ignore
        var field = style.field,
          styles = __rest(style, ["field"]);
        var value = field ? origin[field] : origin;
        each(styles, function (attr, key) {
          if (isFunction(attr)) {
            var attrValue = attr(value);
            if (!attrValue) {
              return;
            }
            shapeStyle[key] = attrValue;
            return;
          }
          shapeStyle[key] = attr;
        });
        return shapeStyle;
      };
      /**
       * 数据映射到视图属性核心逻辑
       * x、y 每个元素走 normalize 然后 convertPoint
       * color、size、shape
       *  如果是Linear，则每个元素 走 mapping
       *  如果是Category/Identity 则第一个元素走 mapping
       */
      Geometry.prototype._mapping = function (records) {
        var _a = this,
          attrs = _a.attrs,
          props = _a.props,
          attrController = _a.attrController;
        var coord = props.coord;
        var _b = attrController.getAttrsByLinear(),
          linearAttrs = _b.linearAttrs,
          nonlinearAttrs = _b.nonlinearAttrs;
        var defaultAttrValues = attrController.getDefaultAttrValues();
        var mappedRecords = [];
        for (var i = 0, len = records.length; i < len; i++) {
          var record = records[i];
          var children = record.children;
          var attrValues = __assign({}, defaultAttrValues);
          var firstChild = children[0];
          if (children.length === 0) {
            mappedRecords.push(__assign({}, record));
            continue;
          }
          // 非线性映射
          for (var k = 0, len_2 = nonlinearAttrs.length; k < len_2; k++) {
            var attrName = nonlinearAttrs[k];
            var attr = attrs[attrName];
            // 非线性映射只用映射第一项就可以了
            attrValues[attrName] = attr.mapping(firstChild[attr.field], firstChild.origin);
          }
          // 线性属性映射
          var mappedChildren = [];
          for (var j = 0, childrenLen = children.length; j < childrenLen; j++) {
            var child = children[j];
            var normalized = {};
            for (var k = 0; k < linearAttrs.length; k++) {
              var attrName = linearAttrs[k];
              var attr = attrs[attrName];
              var value = child[attr.field];
              // 分类属性的线性映射
              if (attrController.isGroupAttr(attrName)) {
                attrValues[attrName] = attr.mapping(value, child);
              } else {
                normalized[attrName] = attr.normalize(value);
              }
            }
            var _c = coord.convertPoint({
                x: normalized.x,
                y: normalized.y
              }),
              x = _c.x,
              y = _c.y;
            // 获取 shape 的 style
            var origin_1 = child.origin;
            var shapeName = attrValues.shape;
            var shape = this._getShapeStyle(shapeName, origin_1);
            var selected = this.isSelected(child);
            mappedChildren.push(__assign(__assign(__assign({}, child), attrValues), {
              normalized: normalized,
              x: x,
              y: y,
              shapeName: shapeName,
              shape: shape,
              selected: selected
            }));
          }
          mappedRecords.push(__assign(__assign({}, record), {
            children: mappedChildren
          }));
        }
        return mappedRecords;
      };
      // 数据映射
      Geometry.prototype.mapping = function () {
        var dataRecords = this.dataRecords;
        // 数据映射
        this.records = this._mapping(dataRecords);
        return this.records;
      };
      Geometry.prototype.getClip = function () {
        var _a = this.props,
          coord = _a.coord,
          viewClip = _a.viewClip;
        var contentWidth = coord.width,
          contentHeight = coord.height,
          left = coord.left,
          top = coord.top;
        if (viewClip) {
          return {
            type: 'rect',
            style: {
              x: left,
              y: top,
              width: contentWidth,
              height: contentHeight
            }
          };
        }
        return null;
      };
      Geometry.prototype.getAttr = function (attrName) {
        return this.attrController.getAttr(attrName);
      };
      Geometry.prototype.getXScale = function () {
        return this.getAttr('x').scale;
      };
      Geometry.prototype.getYScale = function () {
        return this.getAttr('y').scale;
      };
      Geometry.prototype._getXSnap = function (invertPointX) {
        var xScale = this.getXScale();
        if (xScale.isCategory) {
          return xScale.invert(invertPointX);
        }
        // linear 类型
        var invertValue = xScale.invert(invertPointX);
        var values = xScale.values;
        var len = values.length;
        // 如果只有1个点直接返回第1个点
        if (len === 1) {
          return values[0];
        }
        // 第1个点和第2个点之间
        if ((values[0] + values[1]) / 2 > invertValue) {
          return values[0];
        }
        // 最后2个点
        if ((values[len - 2] + values[len - 1]) / 2 <= invertValue) {
          return values[len - 1];
        }
        for (var i = 1; i < len; i++) {
          // 中间的点
          if ((values[i - 1] + values[i]) / 2 <= invertValue && (values[i + 1] + values[i]) / 2 > invertValue) {
            return values[i];
          }
        }
        return null;
      };
      Geometry.prototype._getYSnapRecords = function (invertPointY, records) {
        var yScale = this.getYScale();
        var yField = yScale.field;
        var yValue = yScale.invert(invertPointY);
        // category
        if (yScale.isCategory) {
          return records.filter(function (record) {
            return record[FIELD_ORIGIN][yField] === yValue;
          });
        }
        // linear
        return records.filter(function (record) {
          var rangeY = record[yField];
          if (rangeY[0] <= yValue && rangeY[1] >= yValue) {
            return true;
          }
          return false;
        });
      };
      Geometry.prototype._getXSnapRecords = function (invertPointX, records) {
        var xScale = this.getXScale();
        var xField = xScale.field;
        var xValue = xScale.invert(invertPointX);
        // category
        if (xScale.isCategory) {
          return records.filter(function (record) {
            return record[FIELD_ORIGIN][xField] === xValue;
          });
        }
        // linear
        return records.filter(function (record) {
          var rangeX = record[xField];
          if (rangeX[0] <= xValue && rangeX[1] >= xValue) {
            return true;
          }
          return false;
        });
      };
      // 把 records 拍平
      Geometry.prototype.flatRecords = function () {
        var records = this.records;
        return records.reduce(function (prevRecords, record) {
          return prevRecords.concat(record.children);
        }, []);
      };
      Geometry.prototype.getSnapRecords = function (point, inCoordRange) {
        var props = this.props;
        var coord = props.coord,
          adjust = props.adjust;
        var invertPoint = coord.invertPoint(point);
        var xScale = this.getXScale();
        var yScale = this.getYScale();
        // 如果不在coord坐标范围内，直接返回空
        // if (invertPoint.x < 0 || invertPoint.y < 0) {
        //   return [];
        // }
        // 是否调整 point，默认为不调整
        if (inCoordRange) {
          var xRange = xScale.range;
          var yRange = yScale.range;
          // 如果 inCoordRange=true，当 point 不在 coord 坐标范围内时，调整到 range 内
          invertPoint.x = Math.min(Math.max(invertPoint.x, xRange[0]), xRange[1]);
          invertPoint.y = Math.min(Math.max(invertPoint.y, yRange[0]), yRange[1]);
        }
        var records = this.flatRecords();
        var xValue = xScale.invert(invertPoint.x);
        var yValue = yScale.invert(invertPoint.y);
        var coordPoint = coord.convertPoint(invertPoint);
        var coordRecord = {
          // 坐标点
          x: coordPoint.x,
          y: coordPoint.y,
          xValue: xValue,
          yValue: yValue,
          xText: xScale.getText(xValue),
          yText: yScale.getText(yValue)
        };
        // 处理饼图
        if (adjust === 'stack' && coord.isPolar) {
          if (coord.transposed) {
            // 弧度在半径范围内
            if (invertPoint.x >= 0 && invertPoint.x <= 1) {
              var snapRecords = this._getYSnapRecords(invertPoint.y, records);
              return snapRecords;
            }
          } else {
            if (invertPoint.y >= 0 && invertPoint.y <= 1) {
              var snapRecords = this._getXSnapRecords(invertPoint.x, records);
              return snapRecords;
            }
          }
        }
        var rst = [];
        var value = this._getXSnap(invertPoint.x);
        if (isNull(value)) {
          return rst;
        }
        var xField = xScale.field;
        var yField = yScale.field;
        for (var i = 0, len = records.length; i < len; i++) {
          var record = __assign(__assign({}, records[i]), {
            xField: xField,
            yField: yField,
            coord: coordRecord
          });
          var originValue = record[FIELD_ORIGIN][xField];
          if (xScale.type === 'timeCat' && toTimeStamp$1(originValue) === value) {
            rst.push(record);
          } else if (originValue === value) {
            rst.push(record);
          }
        }
        return rst;
      };
      Geometry.prototype.getRecords = function (data, field) {
        if (field === void 0) {
          field = 'xfield';
        }
        var records = this.flatRecords();
        var xScale = this.getXScale();
        var yScale = this.getYScale();
        var xField = xScale.field;
        var yField = yScale.field;
        var value = data[xField];
        var rst = [];
        for (var i = 0, len = records.length; i < len; i++) {
          var record = __assign(__assign({}, records[i]), {
            xField: xField,
            yField: yField
          });
          var originValue = record[FIELD_ORIGIN][field === 'xfield' ? xField : yField];
          if (originValue === value) {
            rst.push(record);
          }
        }
        return rst;
      };
      Geometry.prototype.getLegendItems = function () {
        var _a = this,
          attrController = _a.attrController,
          records = _a.records;
        var colorAttr = attrController.getAttr('color');
        if (!colorAttr) return null;
        var scale = colorAttr.scale;
        var isCategory = scale.isCategory,
          field = scale.field;
        if (!isCategory) return null;
        var flatRecords = records ? this.flatRecords() : [];
        var ticks = scale.getTicks();
        var items = ticks.map(function (tick) {
          var text = tick.text,
            tickValue = tick.tickValue;
          var record = find(flatRecords, function (item) {
            if (!item) return false;
            var origin = item.origin;
            return origin[field] === tickValue;
          });
          // @ts-ignore
          var color = record ? record.color : colorAttr.mapping(tickValue);
          return {
            field: scale.field,
            color: color,
            name: text,
            tickValue: tickValue
          };
        });
        return items;
      };
      return Geometry;
    }(Selection);

    var withLine = (function (View) {
      return /** @class */function (_super) {
        __extends(Line, _super);
        function Line() {
          return _super !== null && _super.apply(this, arguments) || this;
        }
        Line.prototype.getDefaultCfg = function () {
          return {
            geomType: 'line',
            sortable: true
          };
        };
        Line.prototype.splitPoints = function (points) {
          var topPoints = [];
          var bottomPoints = [];
          for (var i = 0, len = points.length; i < len; i++) {
            var point = points[i];
            var x = point.x,
              y = point.y;
            topPoints.push(__assign(__assign({}, point), {
              x: x,
              y: y[1]
            }));
            bottomPoints.push(__assign(__assign({}, point), {
              x: x,
              y: y[0]
            }));
          }
          return [topPoints, bottomPoints];
        };
        Line.prototype.splitNulls = function (points, connectNulls) {
          if (connectNulls) {
            var tmpPoints_1 = [];
            for (var i = 0, len = points.length; i < len; i++) {
              var point = points[i];
              var x = point.x,
                y = point.y;
              // 过滤 x 为 NaN 的点
              if (isNaN(x)) {
                continue;
              }
              if (isArray(y)) {
                if (isNaN(y[0])) {
                  continue;
                }
                tmpPoints_1.push(point);
                continue;
              }
              if (isNaN(y)) {
                continue;
              }
              tmpPoints_1.push(point);
            }
            if (tmpPoints_1.length) {
              return [tmpPoints_1];
            }
            return [];
          }
          var result = [];
          var tmpPoints = [];
          for (var i = 0, len = points.length; i < len; i++) {
            var point = points[i];
            var x = point.x,
              y = point.y;
            // 过滤 x 为 NaN 的点
            if (isNaN(x)) {
              continue;
            }
            if (isArray(y)) {
              if (isNaN(y[0])) {
                if (tmpPoints.length) {
                  result.push(tmpPoints);
                  tmpPoints = [];
                }
                continue;
              }
              tmpPoints.push(point);
              continue;
            }
            if (isNaN(y)) {
              if (tmpPoints.length) {
                result.push(tmpPoints);
                tmpPoints = [];
              }
              continue;
            }
            tmpPoints.push(point);
          }
          if (tmpPoints.length) {
            result.push(tmpPoints);
          }
          return result;
        };
        Line.prototype.mapping = function () {
          var _this = this;
          var records = _super.prototype.mapping.call(this);
          var _a = this,
            props = _a.props,
            defaultConnectNulls = _a.connectNulls,
            context = _a.context;
          var coord = props.coord,
            _b = props.connectNulls,
            connectNulls = _b === void 0 ? defaultConnectNulls : _b,
            sizeZoom = props.sizeZoom;
          return records.map(function (record) {
            var _a;
            var children = record.children;
            // children 有可能为空
            var _b = children[0] || {},
              size = _b.size,
              color = _b.color,
              shape = _b.shape,
              y = _b.y,
              origin = _b.origin;
            // 极坐标时，需加入起点，从而闭合所绘图形
            var points = coord.isPolar ? __spreadArray(__spreadArray([], children, true), [children[0]], false) : children;
            var sizeZoomRatio = (_a = isFunction(sizeZoom) ? sizeZoom(origin) : sizeZoom) !== null && _a !== void 0 ? _a : 1;
            var splitPoints = _this.splitNulls(points, connectNulls);
            var newChildren = splitPoints.map(function (points) {
              var _a = isArray(y) ? _this.splitPoints(points) : [points, undefined],
                topPoints = _a[0],
                bottomPoints = _a[1];
              return {
                size: context.px2hd(size || shape.lineWidth) * sizeZoomRatio,
                color: color,
                shape: shape,
                points: [].concat(topPoints),
                topPoints: topPoints,
                bottomPoints: bottomPoints
              };
            });
            return __assign(__assign({}, record), {
              children: newChildren
            });
          });
        };
        Line.prototype.concatPoints = function (topPoints, bottomPoints) {
          if (!bottomPoints || !bottomPoints.length) {
            return topPoints;
          }
          var adjust = this.adjust;
          // 堆叠产生的 bottomPoints 不绘制
          if (adjust && adjust.type === 'stack') {
            return topPoints;
          }
          // 说明是 y 轴对应字段为数组， 这种情况下首尾默认相连，如果想画 2 根线，在数据里对数组分拆
          var points = topPoints.concat(bottomPoints.reverse());
          points.push(topPoints[0]);
          return points;
        };
        Line.prototype.render = function () {
          var props = this.props;
          var coord = props.coord;
          var records = this.mapping();
          var clip = this.getClip();
          for (var i = 0, len = records.length; i < len; i++) {
            var record = records[i];
            var children = record.children;
            for (var j = 0, len_1 = children.length; j < len_1; j++) {
              var child = children[j];
              var points = child.points,
                bottomPoints = child.bottomPoints;
              child.points = this.concatPoints(points, bottomPoints);
            }
          }
          return jsx(View, __assign({}, props, {
            coord: coord,
            records: records,
            clip: clip
          }));
        };
        return Line;
      }(Geometry);
    });

    function concatPoints(children) {
      var result = [];
      for (var i = 0; i < children.length; i++) {
        var child = children[i];
        result = result.concat(child.points);
      }
      return result;
    }
    var LineView = (function (props) {
      var records = props.records,
        coord = props.coord,
        animation = props.animation,
        EndView = props.endView,
        clip = props.clip;
      var _a = coord,
        left = _a.left,
        top = _a.top,
        width = _a.width,
        height = _a.height,
        center = _a.center,
        startAngle = _a.startAngle,
        endAngle = _a.endAngle,
        radius = _a.radius;
      var appear = coord.isPolar ? {
        easing: 'quadraticOut',
        duration: 450,
        clip: {
          type: 'sector',
          property: ['endAngle'],
          style: {
            cx: center.x,
            cy: center.y,
            startAngle: "".concat(startAngle, "rad"),
            r: radius
          },
          start: {
            endAngle: "".concat(startAngle, "rad")
          },
          end: {
            endAngle: "".concat(endAngle, "rad")
          }
        }
      } : {
        easing: 'quadraticOut',
        duration: 450,
        clip: {
          type: 'rect',
          property: ['width'],
          style: {
            x: left,
            y: top,
            height: height
          },
          start: {
            width: 0
          },
          end: {
            width: width
          }
        }
      };
      return jsx("group", {
        style: {
          clip: clip
        }
      }, records.map(function (record) {
        var _a;
        var key = record.key,
          children = record.children;
        var points = concatPoints(children);
        var ref = createRef();
        return jsx("group", {
          key: key
        }, children.map(function (child) {
          var points = child.points,
            color = child.color,
            size = child.size,
            shape = child.shape;
          var fliterPoints = points.filter(function (point) {
            return !isNaN(point.x) && !isNaN(point.y);
          });
          if (fliterPoints.length === 0) return;
          return jsx("polyline", {
            key: key,
            ref: ref,
            style: __assign(__assign({
              points: fliterPoints.map(function (point) {
                return [point.x, point.y];
              }),
              stroke: color
            }, shape), {
              lineWidth: size || shape.lineWidth
            }),
            animation: deepMix({
              update: {
                easing: 'linear',
                duration: 450,
                property: ['points']
              },
              appear: appear
            }, animation)
          });
        }), EndView ? jsx("group", {
          style: {
            offset: ref
          },
          animation: deepMix({
            appear: {
              easing: 'quadraticOut',
              duration: 450,
              property: ['offsetDistance'],
              start: {
                offsetDistance: 0
              },
              end: {
                offsetDistance: 1
              }
            }
          }, animation)
        }, jsx(EndView, {
          origin: (_a = points[0]) === null || _a === void 0 ? void 0 : _a.origin
        })) : null);
      }));
    });

    var index = withLine(LineView);

    var withArea = (function (View) {
      return /** @class */function (_super) {
        __extends(Area, _super);
        function Area() {
          return _super !== null && _super.apply(this, arguments) || this;
        }
        Area.prototype.getDefaultCfg = function () {
          return {
            geomType: 'area',
            // 面积图默认设为从0开始
            startOnZero: true,
            // 点需要排序
            sortable: true
          };
        };
        Area.prototype.getBaseY = function () {
          // 坐标轴 y0
          var y0 = this.getY0Value();
          var _a = this,
            props = _a.props,
            defaultStartOnZero = _a.startOnZero;
          var coord = props.coord,
            _b = props.startOnZero,
            startOnZero = _b === void 0 ? defaultStartOnZero : _b;
          if (startOnZero) {
            // 零点映射到绝对坐标
            var originCoord = coord.convertPoint({
              x: 0,
              y: y0
            });
            return originCoord.y;
          }
          return coord.y[0];
        };
        Area.prototype.mapping = function () {
          var records = _super.prototype.mapping.call(this);
          var baseY = this.getBaseY();
          for (var i = 0, len = records.length; i < len; i++) {
            var record = records[i];
            var children = record.children;
            for (var j = 0, len_1 = children.length; j < len_1; j++) {
              var child = children[j];
              var points = child.points,
                bottomPoints = child.bottomPoints;
              if (bottomPoints && bottomPoints.length) {
                bottomPoints.reverse();
                child.points = points.concat(bottomPoints);
              } else {
                points.unshift({
                  x: points[0].x,
                  y: baseY
                });
                points.unshift({
                  x: points[points.length - 1].x,
                  y: baseY
                });
              }
            }
          }
          return records;
        };
        Area.prototype.render = function () {
          var props = this.props;
          var coord = props.coord;
          var records = this.mapping();
          var clip = this.getClip();
          var baseY = this.getBaseY();
          return jsx(View, __assign({}, props, {
            baseY: baseY,
            coord: coord,
            records: records,
            clip: clip
          }));
        };
        return Area;
      }(withLine(View));
    });

    var AreaView = (function (props) {
      var coord = props.coord,
        records = props.records,
        baseY = props.baseY,
        shape = props.shape,
        animation = props.animation;
      var isSmooth = shape === 'smooth';
      var _a = coord,
        left = _a.left,
        top = _a.top,
        width = _a.width,
        height = _a.height,
        center = _a.center,
        startAngle = _a.startAngle,
        endAngle = _a.endAngle,
        radius = _a.radius;
      var appear = coord.isPolar ? {
        easing: 'quadraticOut',
        duration: 450,
        clip: {
          type: 'sector',
          property: ['endAngle'],
          style: {
            cx: center.x,
            cy: center.y,
            startAngle: "".concat(startAngle, "rad"),
            r: radius
          },
          start: {
            endAngle: "".concat(startAngle, "rad")
          },
          end: {
            endAngle: "".concat(endAngle, "rad")
          }
        }
      } : {
        easing: 'quadraticOut',
        duration: 450,
        clip: {
          type: 'rect',
          property: ['width'],
          style: {
            x: left,
            y: top,
            height: height
          },
          start: {
            width: 0
          },
          end: {
            width: width
          }
        }
      };
      return jsx("group", null, records.map(function (record) {
        var key = record.key,
          children = record.children;
        return jsx("group", {
          key: key
        }, children.map(function (child) {
          var points = child.points,
            topPoints = child.topPoints,
            bottomPoints = child.bottomPoints,
            color = child.color,
            shape = child.shape;
          if (isSmooth) {
            var generatePath = function generatePath() {
              var d = [];
              var constaint = [[0, 0], [1, 1]];
              var topSps = catmullRom2bezier(topPoints, false, constaint);
              d.push(['M', topPoints[0].x, topPoints[0].y]);
              for (var i = 0, n = topSps.length; i < n; i++) {
                var sp = topSps[i];
                d.push(['C', sp[1], sp[2], sp[3], sp[4], sp[5], sp[6]]);
              }
              if (bottomPoints && bottomPoints.length) {
                var bottomSps = catmullRom2bezier(bottomPoints, false, constaint);
                d.push(['L', bottomPoints[0].x, bottomPoints[0].y]);
                for (var i = 0, n = bottomSps.length; i < n; i++) {
                  var sp = bottomSps[i];
                  d.push(['C', sp[1], sp[2], sp[3], sp[4], sp[5], sp[6]]);
                }
              } else {
                d.push(['L', topPoints[topPoints.length - 1].x, baseY]);
                d.push(['L', topPoints[0].x, baseY]);
              }
              return d;
            };
            return jsx("path", {
              style: __assign({
                path: generatePath(),
                lineWidth: '2px',
                fill: color
              }, shape)
            });
          }
          return jsx("polygon", {
            style: __assign({
              points: points.map(function (point) {
                return [point.x, point.y];
              }),
              lineWidth: '2px',
              fill: color
            }, shape),
            animation: deepMix({
              appear: appear,
              update: {
                easing: 'linear',
                duration: 450,
                property: ['points']
              }
            }, animation)
          });
        }));
      }));
    });

    var index$1 = withArea(AreaView);

    /**
     * 计算两个坐标的中点坐标
     * @param start 起始点{x:number, y:number}
     * @param end 结束点{x:number, y:number}
     * @returns 中点坐标{x:number, y:number}
     */
    function getMiddlePoint(start, end) {
      var x = (end.x - start.x) / 2 + start.x;
      var y = (end.y - start.y) / 2 + start.y;
      return {
        x: x,
        y: y
      };
    }

    var DEFAULT_LABEL_CFG = {
      textBaseline: 'middle',
      fill: '#808080'
    };
    function LabelView(props) {
      var _a;
      var record = props.record,
        offsetX = props.offsetX,
        offsetY = props.offsetY,
        points = props.points,
        label = props.label,
        guide = props.guide;
      var origin = record.origin,
        color = record.color;
      var labelAttrs, guideAttrs;
      if (isFunction(label)) {
        var point = points.length === 4 // 如果是金字塔图，顶部只有 3 个点
        ? getMiddlePoint(points[1], points[2]) : getMiddlePoint(points[0], points[1]);
        labelAttrs = mix({
          x: point.x + offsetX,
          y: point.y + offsetY
        }, DEFAULT_LABEL_CFG, label(origin, color));
      }
      if (isFunction(guide)) {
        var point = getMiddlePoint(points.length === 4 ? getMiddlePoint(points[0], points[1]) : points[0], getMiddlePoint(points[2], (_a = points[3]) !== null && _a !== void 0 ? _a : points[1]));
        guideAttrs = mix({
          x: point.x,
          y: point.y,
          textBaseline: 'middle',
          textAlign: 'center'
        }, DEFAULT_LABEL_CFG, guide(origin, color));
      }
      return jsx("group", null, labelAttrs && jsx("text", {
        attrs: labelAttrs
      }), guideAttrs && jsx("text", {
        attrs: guideAttrs
      }));
    }

    var LabelViews = /*#__PURE__*/Object.freeze({
        __proto__: null,
        pyramid: LabelView,
        funnel: LabelView
    });

    var withInterval = (function (Views) {
      return /** @class */function (_super) {
        __extends(Interval, _super);
        function Interval() {
          return _super !== null && _super.apply(this, arguments) || this;
        }
        Interval.prototype.getDefaultCfg = function () {
          return {
            geomType: 'interval',
            justifyContent: true,
            startOnZero: true
          };
        };
        Interval.prototype.getDefaultSize = function () {
          var _a = this,
            attrs = _a.attrs,
            props = _a.props,
            adjust = _a.adjust,
            records = _a.records;
          var coord = props.coord,
            sizeRatio = props.sizeRatio;
          var x = attrs.x;
          var scale = x.scale;
          var values = scale.values;
          if (sizeRatio) {
            return 1 / values.length * sizeRatio;
          }
          var defaultWithRatio = {
            column: 1 / 2,
            rose: 0.999999,
            multiplePie: 3 / 4 // 多饼图
          };
          var count = values.length;
          var ratio;
          if (coord.isPolar) {
            if (coord.transposed && count > 1) {
              ratio = defaultWithRatio.multiplePie;
            } else {
              ratio = defaultWithRatio.rose;
            }
          } else {
            ratio = defaultWithRatio.column;
          }
          var size = 1 / values.length * ratio;
          // 分组时size要除以类别个数
          if (adjust && adjust.type === 'dodge') {
            return size / records.length;
          }
          return size;
        };
        Interval.prototype.mapping = function () {
          var _a;
          var records = _super.prototype.mapping.call(this);
          var props = this.props;
          var coord = props.coord,
            sizeZoom = props.sizeZoom;
          var y0 = this.getY0Value();
          var defaultSize = this.getDefaultSize();
          for (var i = 0, len = records.length; i < len; i++) {
            var record = records[i];
            var children = record.children;
            for (var j = 0, len_1 = children.length; j < len_1; j++) {
              var child = children[j];
              var normalized = child.normalized,
                mappedSize = child.size,
                origin_1 = child.origin;
              // 没有指定size，则根据数据来计算默认size
              if (isNil(mappedSize)) {
                var x = normalized.x,
                  y = normalized.y,
                  _b = normalized.size,
                  size = _b === void 0 ? defaultSize : _b;
                var zoomRatio = (_a = isFunction(sizeZoom) ? sizeZoom(origin_1) : sizeZoom) !== null && _a !== void 0 ? _a : 1;
                mix(child, coord.convertRect({
                  x: x,
                  y: y,
                  y0: y0,
                  size: size * zoomRatio
                }));
              } else {
                var x = child.x,
                  y = child.y;
                var rect = {
                  size: mappedSize,
                  x: x,
                  y: y,
                  y0: y0
                };
                mix(child, coord.transformToRect(rect));
              }
              mix(child.shape, this.getSelectionStyle(child));
            }
          }
          return records;
        };
        // 获取Y轴坐标零点的画布位置
        Interval.prototype.getPointY0 = function () {
          var props = this.props;
          var coord = props.coord;
          var y0 = this.getY0Value();
          var y0Point = coord.convertPoint({
            y: y0,
            x: 0
          });
          return y0Point === null || y0Point === void 0 ? void 0 : y0Point.y;
        };
        Interval.prototype.render = function () {
          var _a = this,
            props = _a.props,
            state = _a.state;
          var coord = props.coord,
            _b = props.shape,
            shape = _b === void 0 ? 'rect' : _b,
            animation = props.animation,
            showLabel = props.showLabel,
            customLabelCfg = props.labelCfg;
          var View = isFunction(Views) ? Views : Views[shape];
          var LabelView = LabelViews[shape];
          var labelCfg = deepMix({
            label: null,
            offsetX: 0,
            offsetY: 0
          }, customLabelCfg);
          if (!View) return null;
          var selected = state.selected;
          var records = this.mapping();
          var pointY0 = this.getPointY0();
          var clip = this.getClip();
          return jsx(View, {
            coord: coord,
            records: records,
            selected: selected,
            shape: shape,
            animation: animation,
            showLabel: showLabel,
            labelCfg: labelCfg,
            LabelView: LabelView,
            y0: pointY0,
            clip: clip
          });
        };
        return Interval;
      }(Geometry);
    });

    var Rect$2 = (function (props) {
      var records = props.records,
        animation = props.animation,
        y0 = props.y0,
        clip = props.clip,
        onClick = props.onClick;
      return jsx("group", {
        attrs: {
          clip: clip
        }
      }, records.map(function (record) {
        var key = record.key,
          children = record.children;
        return jsx("group", {
          key: key
        }, children.map(function (item) {
          var key = item.key,
            xMin = item.xMin,
            xMax = item.xMax,
            yMin = item.yMin,
            yMax = item.yMax,
            color = item.color,
            shape = item.shape;
          if (isNaN(xMin) || isNaN(xMax) || isNaN(yMin) || isNaN(yMax)) {
            return null;
          }
          return jsx("rect", {
            key: key,
            attrs: __assign({
              x: xMin,
              y: yMin,
              width: xMax - xMin,
              height: yMax - yMin,
              fill: color
            }, shape),
            onClick: onClick,
            animation: deepMix({
              appear: {
                easing: 'linear',
                duration: 450,
                property: ['y', 'height'],
                start: {
                  y: y0,
                  height: 0
                }
              },
              update: {
                easing: 'linear',
                duration: 450,
                property: ['x', 'y', 'width', 'height']
              }
            }, animation)
          });
        }));
      }));
    });

    var Polar$1 = (function (props) {
      var coord = props.coord,
        records = props.records,
        animation = props.animation,
        onClick = props.onClick;
      var center = coord.center,
        startAngle = coord.startAngle,
        endAngle = coord.endAngle,
        radius = coord.radius;
      return jsx("group", {
        animation: {
          appear: __assign({
            easing: 'quadraticOut',
            duration: 450,
            clip: {
              type: 'sector',
              property: ['endAngle'],
              style: {
                cx: center.x,
                cy: center.y,
                startAngle: "".concat(startAngle, "rad"),
                r: radius
              },
              start: {
                endAngle: "".concat(startAngle, "rad")
              },
              end: {
                endAngle: "".concat(endAngle, "rad")
              }
            }
          }, animation && animation.appear)
        }
      }, records.map(function (record) {
        var key = record.key,
          children = record.children;
        return jsx("group", {
          key: key
        }, children.map(function (item) {
          var key = item.key,
            xMin = item.xMin,
            xMax = item.xMax,
            yMin = item.yMin,
            yMax = item.yMax,
            color = item.color,
            shape = item.shape;
          return jsx("sector", {
            key: key,
            attrs: __assign({
              cx: center.x,
              cy: center.y,
              fill: color,
              lineWidth: 1,
              startAngle: "".concat(xMin, "rad"),
              endAngle: "".concat(xMax, "rad"),
              r0: yMin,
              r: yMax
            }, shape),
            onClick: onClick,
            animation: deepMix({
              update: {
                easing: 'linear',
                duration: 450,
                property: ['x', 'y', 'startAngle', 'endAngle', 'r0', 'r']
              }
            }, animation)
          });
        }));
      }));
    });

    var intervalView = (function (props) {
      var coord = props.coord;
      var coordType = coord.type;
      // 直角坐标系
      if (coordType === 'rect') {
        return jsx(Rect$2, __assign({}, props));
      }
      // 极坐标系
      return jsx(Polar$1, __assign({}, props));
    });

    function convertToPoints(_a) {
      var xMin = _a.xMin,
        xMax = _a.xMax,
        yMin = _a.yMin,
        yMax = _a.yMax;
      return [{
        x: xMin,
        y: yMin
      }, {
        x: xMax,
        y: yMin
      }, {
        x: xMax,
        y: yMax
      }, {
        x: xMin,
        y: yMax
      } // bl
      ];
    }

    // 金字塔图和漏斗图的View
    var polygonView = (function (props) {
      var records = props.records,
        shape = props.shape,
        showLabel = props.showLabel,
        labelCfg = props.labelCfg,
        LabelView = props.LabelView;
      // 是否倒置
      var overturn = false;
      return jsx("group", null, records.map(function (record, index) {
        var key = record.key,
          children = record.children;
        var isLastRecord = index === records.length - 1;
        var nextRecord = isLastRecord ? record : records[index + 1];
        var nextChildren = nextRecord.children;
        var nextFirstPoint = convertToPoints(nextChildren[0]);
        var nextLastPoints = convertToPoints(nextChildren[nextChildren.length - 1]);
        if (!overturn) {
          overturn = nextChildren[0].yMax > children[0].yMax;
        }
        if (overturn) {
          nextFirstPoint.reverse();
          nextLastPoints.reverse();
        }
        var polygonPoints = children.map(function (child, childIndex) {
          var points = convertToPoints(child);
          if (overturn) {
            points.reverse();
          }
          if (isLastRecord) {
            if (shape === 'pyramid') {
              points = [getMiddlePoint(points[0], points[1]), points[2], points[3]];
            }
          } else {
            if (childIndex === 0) {
              points[0] = nextFirstPoint[3];
            }
            if (childIndex === children.length - 1) {
              points[1] = nextLastPoints[2];
            }
          }
          return __assign(__assign({}, child), {
            points: points
          });
        });
        return jsx("group", {
          key: key
        }, polygonPoints.map(function (child) {
          var points = child.points,
            color = child.color,
            shape = child.shape;
          return jsx("group", null, jsx("polygon", {
            attrs: __assign({
              points: points.map(function (d) {
                return [d.x, d.y];
              }),
              fill: color
            }, shape)
          }), showLabel && LabelView ? jsx(LabelView, __assign({
            record: child,
            points: points
          }, labelCfg)) : null);
        }));
      }));
    });

    // 柱图/条图

    var Views = /*#__PURE__*/Object.freeze({
        __proto__: null,
        rect: intervalView,
        pyramid: polygonView,
        funnel: polygonView
    });

    var index$2 = withInterval(Views);

    var withPoint = (function (View) {
      return /** @class */function (_super) {
        __extends(Point, _super);
        function Point() {
          return _super !== null && _super.apply(this, arguments) || this;
        }
        Point.prototype.getDefaultCfg = function () {
          return {
            geomType: 'point'
          };
        };
        Point.prototype.render = function () {
          var props = this.props;
          var coord = props.coord;
          var records = this.mapping();
          var clip = this.getClip();
          return jsx(View, __assign({}, props, {
            coord: coord,
            records: records,
            clip: clip
          }));
        };
        return Point;
      }(Geometry);
    });

    var PointView = (function (props) {
      var records = props.records,
        animation = props.animation,
        clip = props.clip;
      return jsx("group", {
        attrs: {
          clip: clip
        }
      }, records.map(function (record) {
        var key = record.key,
          children = record.children;
        return jsx("group", {
          key: key
        }, children.map(function (item) {
          var x = item.x,
            y = item.y,
            size = item.size,
            color = item.color,
            shapeName = item.shapeName,
            shape = item.shape;
          if (isNaN(x) || isNaN(y)) {
            return null;
          }
          if (shapeName === 'rect') {
            var rectSize = isNil(size) ? shape.size : size;
            return jsx("rect", {
              key: key,
              attrs: __assign(__assign({
                x: x - rectSize,
                y: y - rectSize,
                fill: color,
                stroke: color
              }, shape), {
                width: rectSize * 2,
                height: rectSize * 2
              }),
              animation: deepMix({
                appear: {
                  easing: 'linear',
                  duration: 450
                },
                update: {
                  easing: 'linear',
                  duration: 450,
                  property: ['x', 'y', 'width', 'height', 'fill']
                }
              }, animation)
            });
          }
          return jsx("circle", {
            key: key,
            style: __assign(__assign({
              cx: x,
              cy: y,
              fill: shapeName === 'circle' ? color : null,
              stroke: shapeName === 'hollowCircle' ? color : null
            }, shape), {
              r: isNil(size) ? shape.size : size
            }),
            animation: deepMix({
              appear: {
                easing: 'linear',
                duration: 450
              },
              update: {
                easing: 'linear',
                duration: 450,
                property: ['cx', 'cy', 'r', 'fill']
              }
            }, animation)
          });
        }));
      }));
    });

    var index$3 = withPoint(PointView);

    var withAxis = (function (View) {
      return /** @class */function (_super) {
        __extends(Axis, _super);
        function Axis(props) {
          var _this = _super.call(this, props) || this;
          _this.axisStyle = {};
          var chart = props.chart,
            field = props.field;
          var scaleOption = _this.getScaleOption(props);
          chart.setScale(field, scaleOption);
          return _this;
        }
        Axis.prototype.willReceiveProps = function (nextProps) {
          var lastProps = this.props;
          var chart = nextProps.chart,
            field = nextProps.field;
          var nextScaleOption = this.getScaleOption(nextProps);
          var lastScaleOption = this.getScaleOption(lastProps);
          if (!equal(nextScaleOption, lastScaleOption)) {
            chart.setScale(field, nextScaleOption);
          }
        };
        Axis.prototype.willMount = function () {
          this.updateCoord();
        };
        Axis.prototype.willUpdate = function () {
          this.updateCoord();
        };
        Axis.prototype.getScaleOption = function (props) {
          var type = props.type,
            tickCount = props.tickCount,
            range = props.range,
            mask = props.mask,
            formatter = props.formatter,
            ticks = props.ticks,
            min = props.min,
            max = props.max,
            nice = props.nice;
          return {
            type: type,
            tickCount: tickCount,
            range: range,
            mask: mask,
            formatter: formatter,
            min: min,
            max: max,
            nice: nice,
            ticks: ticks
          };
        };
        Axis.prototype._getDimType = function () {
          var props = this.props;
          var field = props.field,
            chart = props.chart;
          var xScales = chart.getXScales();
          var scales = xScales.filter(function (scale) {
            return scale.field === field;
          });
          return scales.length > 0 ? 'x' : 'y';
        };
        // 获取ticks最大的宽高
        Axis.prototype.getMaxBBox = function (ticks, style) {
          var context = this.context;
          var measureText = context.measureText;
          var label = style.label,
            labelOffset = style.labelOffset;
          var width = 0;
          var height = 0;
          ticks.forEach(function (tick) {
            if (!label) return;
            var _a = tick.labelStyle,
              labelStyle = _a === void 0 ? {} : _a,
              text = tick.text;
            var bbox = measureText(labelStyle.text || text, __assign(__assign({}, label), labelStyle));
            width = Math.max(width, bbox.width);
            height = Math.max(height, bbox.height);
          });
          if (!width && !height) {
            return {
              width: width,
              height: height
            };
          }
          var bbox = {
            width: width + labelOffset,
            height: height + labelOffset
          };
          return bbox;
        };
        Axis.prototype._getPosition = function () {
          var props = this.props;
          var position = props.position,
            coord = props.coord;
          if (position) {
            return position;
          }
          var dimType = this._getDimType();
          if (coord.transposed) {
            return dimType === 'x' ? 'left' : 'bottom';
          }
          return dimType === 'x' ? 'bottom' : 'left';
        };
        Axis.prototype.getTicks = function () {
          var props = this.props;
          var field = props.field,
            chart = props.chart;
          var scale = chart.getScale(field);
          var ticks = scale.getTicks();
          // 设置tick的样式
          ticks = this._setTicksStyle(ticks);
          ticks = this._generateGridPoints(ticks);
          return ticks;
        };
        /**
         * 生成极坐标下网格线的交叉点
         * @param ticks
         * @returns
         */
        Axis.prototype._generateGridPoints = function (ticks) {
          var props = this.props;
          var chart = props.chart,
            coord = props.coord;
          if (!coord.isPolar) {
            return ticks;
          }
          var dimType = this._getDimType();
          // 只需要在 y 的时候生成
          if (dimType !== 'y') {
            return ticks;
          }
          var xScale = chart.getXScales()[0];
          var xTicks = xScale.getTicks();
          ticks.forEach(function (tick) {
            var gridPoints = xTicks.map(function (xTick) {
              return coord.convertPoint({
                x: xTick.value,
                y: tick.value
              });
            });
            // 添加第 1 个点，形成环状
            gridPoints.push(gridPoints[0]);
            tick.gridPoints = gridPoints;
          });
          return ticks;
        };
        Axis.prototype._setTicksStyle = function (ticks) {
          var _this = this;
          var _a = this,
            props = _a.props,
            context = _a.context;
          var theme = context.theme,
            px2hd = context.px2hd;
          var _b = props.style,
            style = _b === void 0 ? {} : _b;
          var themeAxis = theme.axis;
          each(themeAxis, function (value, key) {
            // 关闭tick的样式
            if (style[key] === null) {
              return;
            }
            var styleValue = isFunction(style[key]) ? undefined : style[key];
            if (isString(value) || isNumber(value)) {
              _this.axisStyle[key] = px2hd(styleValue) || value;
            } else if (isArray(styleValue)) {
              _this.axisStyle[key] = styleValue.map(function (d) {
                return px2hd(deepMix(clone(value), d));
              });
            } else {
              _this.axisStyle[key] = px2hd(deepMix(clone(value), styleValue));
            }
          });
          return ticks.map(function (tick, index) {
            var label = style.label,
              grid = style.grid;
            var defaultLabelStyle = themeAxis.label,
              defaultGridStyle = themeAxis.grid;
            if (isFunction(label)) {
              tick.labelStyle = px2hd(mix({}, defaultLabelStyle, label(tick.text, index, ticks)));
            }
            if (isFunction(grid)) {
              tick.gridStyle = px2hd(mix({}, defaultGridStyle, grid(tick.text, index, ticks.length)));
            }
            return tick;
          });
        };
        Axis.prototype.convertTicks = function (ticks) {
          var props = this.props;
          var coord = props.coord;
          var dimType = this._getDimType();
          var otherDim = dimType === 'x' ? 'y' : 'x';
          return ticks.map(function (tick) {
            var _a, _b;
            var start = coord.convertPoint((_a = {}, _a[dimType] = tick.value, _a[otherDim] = 0, _a));
            var end = coord.convertPoint((_b = {}, _b[dimType] = tick.value, _b[otherDim] = 1, _b));
            return __assign(__assign({}, tick), {
              points: [start, end]
            });
          });
        };
        Axis.prototype.measureLayout = function () {
          var _a = this,
            props = _a.props,
            context = _a.context;
          var visible = props.visible,
            coord = props.coord,
            style = props.style;
          if (visible === false) {
            return null;
          }
          var _b = style || {},
            customWidth = _b.width,
            customHeight = _b.height;
          var ticks = this.getTicks();
          var bbox = this.getMaxBBox(ticks, this.axisStyle);
          var isPolar = coord.isPolar;
          var dimType = this._getDimType();
          // const { width, height } = bbox;
          var width = isNil(customWidth) ? bbox.width : context.px2hd(customWidth);
          var height = isNil(customHeight) ? bbox.height : context.px2hd(customHeight);
          if (isPolar) {
            // 机坐标系的 y 不占位置
            if (dimType === 'y') {
              return null;
            }
            // 4 个方向都需要留空
            return ['top', 'right', 'bottom', 'left'].map(function (position) {
              return {
                position: position,
                width: width,
                height: height
              };
            });
          }
          // 直角坐标系下
          var position = this._getPosition();
          return {
            position: position,
            width: width,
            height: height
          };
        };
        // 主要是计算coord的布局
        Axis.prototype.updateCoord = function () {
          var props = this.props;
          var chart = props.chart;
          var layout = this.measureLayout();
          chart.updateCoordFor(this, layout);
        };
        Axis.prototype.render = function () {
          var _a = this,
            props = _a.props,
            axisStyle = _a.axisStyle;
          var visible = props.visible,
            coord = props.coord;
          if (visible === false) {
            return null;
          }
          var ticks = this.getTicks();
          var position = this._getPosition();
          var dimType = this._getDimType();
          return jsx(View, __assign({}, props, {
            style: axisStyle,
            ticks: this.convertTicks(ticks),
            coord: coord,
            position: position,
            dimType: dimType
          }));
        };
        return Axis;
      }(Component);
    });

    // 相对圆心偏移量的点
    function getOffsetPoint(center, point, offset) {
      var vectorX = point.x - center.x;
      var vectorY = point.y - center.y;
      var vectorLength = length$1([vectorX, vectorY]);
      var offsetLength = vectorLength + offset;
      var x = vectorX / vectorLength * offsetLength;
      var y = vectorY / vectorLength * offsetLength;
      return {
        x: center.x + x,
        y: center.y + y
      };
    }
    // 获取文本的对齐方式
    function getTextAlignInfo(center, point) {
      // 文本点向量
      var vector = [point.x - center.x, point.y - center.y];
      var align;
      var baseLine;
      // 水平对齐
      if (vector[0] > 0) {
        align = 'left';
      } else if (vector[0] < 0) {
        align = 'right';
      } else {
        align = 'center';
      }
      // 垂直对齐
      if (vector[1] > 0) {
        baseLine = 'top';
      } else if (vector[1] < 0) {
        baseLine = 'bottom';
      } else {
        baseLine = 'middle';
      }
      return {
        textAlign: align,
        textBaseline: baseLine
      };
    }
    var Line$1 = function Line(props) {
      var line = props.line,
        gridType = props.gridType,
        center = props.center,
        radius = props.radius,
        ticks = props.ticks;
      if (!line) return null;
      if (gridType !== 'line') {
        return jsx("arc", {
          attrs: __assign({
            cx: center.x,
            cy: center.y,
            r: radius,
            startAngle: 0,
            endAngle: 360
          }, line)
        });
      }
      var points = ticks.map(function (tick) {
        var points = tick.points;
        return points[points.length - 1];
      });
      // 头尾相连
      points.push(points[0]);
      return jsx("polyline", {
        attrs: __assign({
          points: points.map(function (d) {
            return [d.x, d.y];
          })
        }, line)
      });
    };
    var PolarX = (function (props) {
      var originTicks = props.ticks,
        coord = props.coord,
        style = props.style,
        gridType = props.grid;
      var center = coord.center;
      var grid = style.grid,
        tickLine = style.tickLine,
        line = style.line,
        labelOffset = style.labelOffset,
        label = style.label;
      var ticks = originTicks.filter(function (d) {
        return !isNaN(d.value);
      });
      var firstTicks = ticks[0];
      var points = firstTicks.points;
      var end = points[points.length - 1];
      var radius = length$1([end.x - center.x, end.y - center.y]);
      return jsx("group", null, grid ? ticks.map(function (tick) {
        var points = tick.points,
          gridStyle = tick.gridStyle;
        var end = points[points.length - 1];
        return jsx("line", {
          attrs: __assign(__assign({
            x1: center.x,
            y1: center.y,
            x2: end.x,
            y2: end.y
          }, grid), gridStyle)
        });
      }) : null, tickLine && tickLine.length ? ticks.map(function (tick) {
        var points = tick.points;
        var end = points[points.length - 1];
        var offsetPoint = getOffsetPoint(center, end, tickLine.length);
        return jsx("line", {
          attrs: __assign({
            x1: end.x,
            y1: end.y,
            x2: offsetPoint.x,
            y2: offsetPoint.y
          }, tickLine)
        });
      }) : null, jsx(Line$1, {
        line: line,
        gridType: gridType,
        center: center,
        radius: radius,
        ticks: ticks
      }), label ? ticks.map(function (tick) {
        var points = tick.points,
          text = tick.text,
          labelStyle = tick.labelStyle;
        var end = points[points.length - 1];
        var offsetPoint = getOffsetPoint(center, end, labelOffset);
        return jsx("text", {
          attrs: __assign(__assign(__assign({
            x: offsetPoint.x,
            y: offsetPoint.y,
            text: text
          }, getTextAlignInfo(center, end)), label), labelStyle)
        });
      }) : null);
    });

    var PolarY = (function (props) {
      var originTicks = props.ticks,
        coord = props.coord,
        style = props.style,
        gridType = props.grid;
      var center = coord.center;
      var grid = style.grid,
        tickLine = style.tickLine,
        line = style.line,
        labelOffset = style.labelOffset,
        label = style.label;
      var ticks = originTicks.filter(function (d) {
        return !isNaN(d.value);
      });
      return jsx("group", null, grid ? ticks.map(function (tick) {
        var points = tick.points,
          gridStyle = tick.gridStyle,
          gridPoints = tick.gridPoints;
        var end = points[points.length - 1];
        if (gridType !== 'line') {
          return jsx("arc", {
            style: __assign(__assign({
              cx: center.x,
              cy: center.y,
              startAngle: 0,
              endAngle: 360,
              r: length$1([end.x - center.x, end.y - center.y])
            }, grid), gridStyle)
          });
        }
        return jsx("polyline", {
          attrs: __assign(__assign({
            points: gridPoints.map(function (d) {
              return [d.x, d.y];
            })
          }, grid), gridStyle)
        });
      }) : null, tickLine && tickLine.length ? ticks.map(function (tick) {
        var points = tick.points;
        var end = points[points.length - 1];
        return jsx("line", {
          attrs: __assign({
            x1: end.x,
            y1: end.y,
            x2: end.x - tickLine.length,
            y2: end.y
          }, tickLine)
        });
      }) : null, line ? jsx("line", {
        attrs: __assign({
          x1: ticks[0].points[0].x,
          y1: ticks[0].points[0].y,
          x2: ticks[ticks.length - 1].points[0].x,
          y2: ticks[ticks.length - 1].points[0].y
        }, line)
      }) : null, label ? ticks.map(function (tick) {
        var points = tick.points,
          text = tick.text,
          labelStyle = tick.labelStyle;
        var end = points[points.length - 1];
        return jsx("text", {
          attrs: __assign(__assign({
            x: end.x - labelOffset,
            y: end.y,
            text: text,
            textAlign: 'right',
            textBaseline: 'middle'
          }, label), labelStyle)
        });
      }) : null);
    });

    var Top = (function (props, context) {
      var originTicks = props.ticks,
        coord = props.coord,
        style = props.style;
      var px2hd = context.px2hd;
      var left = coord.left,
        top = coord.top,
        right = coord.right;
      var grid = style.grid,
        tickLine = style.tickLine,
        line = style.line,
        labelOffset = style.labelOffset,
        label = style.label,
        symbol = style.symbol;
      var ticks = originTicks.filter(function (d) {
        return !isNaN(d.value);
      });
      var symbols = isArray(symbol) ? symbol : [symbol];
      var _a = tickLine || {},
        tickLineLength = _a.length,
        tickLineStyle = __rest(_a, ["length"]);
      return jsx("group", null, grid ? ticks.map(function (tick) {
        var points = tick.points,
          tickValue = tick.tickValue,
          gridStyle = tick.gridStyle;
        var start = points[0];
        var end = points[points.length - 1];
        return jsx("line", {
          key: "grid-".concat(tickValue),
          style: __assign(__assign({
            x1: start.x,
            y1: start.y,
            x2: end.x,
            y2: end.y
          }, grid), gridStyle)
        });
      }) : null, tickLine && tickLine.length ? ticks.map(function (tick) {
        var points = tick.points,
          tickValue = tick.tickValue;
        var end = points[points.length - 1];
        return jsx("line", {
          key: "tickLine-".concat(tickValue),
          style: __assign({
            x1: end.x,
            y1: end.y,
            x2: end.x,
            y2: end.y - px2hd(tickLineLength)
          }, tickLineStyle)
        });
      }) : null, symbols[0] ? jsx("marker", {
        style: __assign(__assign({
          x: right,
          y: top,
          transform: 'rotate(90deg)',
          transformOrigin: '50% 50%'
        }, symbols[0]), {
          symbol: symbols[0].type
        })
      }) : null, line ? jsx("line", {
        style: __assign({
          x1: left,
          y1: top,
          x2: right,
          y2: top
        }, line)
      }) : null, symbols[1] ? jsx("marker", {
        style: __assign(__assign({
          x: left,
          y: top,
          transform: 'rotate(-90deg)',
          transformOrigin: '50% 50%'
        }, symbols[0]), {
          symbol: symbols[1].type
        })
      }) : null, label ? ticks.map(function (tick, _index) {
        var tickValue = tick.tickValue,
          points = tick.points,
          text = tick.text,
          labelStyle = tick.labelStyle;
        var end = points[points.length - 1];
        return jsx("text", {
          key: "text-".concat(tickValue),
          style: __assign(__assign({
            x: end.x,
            y: end.y - labelOffset,
            textAlign: 'center',
            textBaseline: 'bottom',
            text: text
          }, label), labelStyle)
        });
      }) : null);
    });

    var Bottom = (function (props, context) {
      var ticks = props.ticks,
        coord = props.coord,
        style = props.style,
        animation = props.animation;
      var px2hd = context.px2hd,
        measureText = context.measureText;
      var left = coord.left,
        right = coord.right,
        bottom = coord.bottom;
      var grid = style.grid,
        tickLine = style.tickLine,
        line = style.line,
        labelOffset = style.labelOffset,
        label = style.label,
        symbol = style.symbol;
      var filterTicks = ticks.filter(function (d) {
        return !isNaN(d.value);
      });
      var symbols = isArray(symbol) ? symbol : [symbol];
      var _a = tickLine || {},
        tickLineLength = _a.length,
        tickLineStyle = __rest(_a, ["length"]);
      return jsx("group", null, grid ? filterTicks.map(function (tick) {
        var points = tick.points,
          tickValue = tick.tickValue,
          gridStyle = tick.gridStyle;
        var start = points[0];
        var end = points[points.length - 1];
        return jsx("line", {
          key: "grid-".concat(tickValue),
          style: __assign(__assign({
            x1: start.x,
            y1: start.y,
            x2: end.x,
            y2: end.y
          }, grid), gridStyle)
        });
      }) : null, tickLineLength ? filterTicks.map(function (tick) {
        var points = tick.points,
          tickValue = tick.tickValue;
        var start = points[0];
        return jsx("line", {
          key: "tickLine-".concat(tickValue),
          style: __assign({
            x1: start.x,
            y1: start.y,
            x2: start.x,
            y2: start.y + px2hd(tickLineLength)
          }, tickLineStyle)
        });
      }) : null, symbols[0] ? jsx("marker", {
        style: __assign(__assign({
          x: right,
          y: bottom,
          transform: 'rotate(90deg)',
          transformOrigin: '50% 50%'
        }, symbols[0]), {
          symbol: symbols[0].type
        })
      }) : null, line ? jsx("line", {
        style: __assign({
          x1: left,
          y1: bottom,
          x2: right,
          y2: bottom
        }, line)
      }) : null, symbols[1] ? jsx("marker", {
        style: __assign(__assign({
          x: left,
          y: bottom,
          transform: 'rotate(-90deg)',
          transformOrigin: '50% 50%'
        }, symbols[0]), {
          symbol: symbols[1].type
        })
      }) : null, label ? filterTicks.map(function (tick, index) {
        var points = tick.points,
          text = tick.text,
          tickValue = tick.tickValue,
          labelStyle = tick.labelStyle;
        var _a = points[0],
          x = _a.x,
          y = _a.y;
        var _b = (labelStyle || label || {}).align,
          align = _b === void 0 ? 'center' : _b;
        var textAttrs = __assign(__assign({
          x: x,
          y: y + labelOffset,
          textBaseline: 'top',
          text: text
        }, label), labelStyle);
        if (align === 'between') {
          if (index === 0) {
            textAttrs.textAlign = 'start';
          } else if (index === ticks.length - 1) {
            textAttrs.textAlign = 'end';
          } else {
            textAttrs.textAlign = 'center';
          }
        } else if (align === 'auto') {
          textAttrs.textAlign = 'center';
          var width = measureText(text, textAttrs).width;
          var halfWidth = width / 2;
          if (x - halfWidth < left) {
            textAttrs.x = left + width / 2;
          } else if (x + halfWidth > right) {
            textAttrs.x = right - width / 2;
          }
        } else {
          textAttrs.textAlign = align;
        }
        return jsx("text", {
          key: "text-".concat(tickValue),
          style: textAttrs,
          animation: animation || {
            appear: {
              easing: 'linear',
              duration: 300,
              delay: 0,
              property: ['fillOpacity'],
              start: {
                fillOpacity: 0
              },
              end: {
                fillOpacity: 1
              }
            },
            update: {
              easing: 'linear',
              duration: 450,
              delay: 0,
              property: ['x', 'y']
            },
            leave: {
              easing: 'linear',
              duration: 450,
              delay: 0,
              property: ['fillOpacity'],
              start: {
                fillOpacity: 1
              },
              end: {
                fillOpacity: 0
              }
            }
          }
        });
      }) : null);
    });

    var Right = (function (props, context) {
      var originTicks = props.ticks,
        coord = props.coord,
        style = props.style;
      var px2hd = context.px2hd;
      var top = coord.top,
        right = coord.right,
        bottom = coord.bottom;
      var grid = style.grid,
        tickLine = style.tickLine,
        line = style.line,
        labelOffset = style.labelOffset,
        label = style.label,
        symbol = style.symbol;
      var ticks = originTicks.filter(function (d) {
        return !isNaN(d.value);
      });
      var symbols = isArray(symbol) ? symbol : [symbol];
      var _a = tickLine || {},
        tickLineLength = _a.length,
        tickLineStyle = __rest(_a, ["length"]);
      return jsx("group", null, grid ? ticks.map(function (tick) {
        var points = tick.points,
          tickValue = tick.tickValue,
          gridStyle = tick.gridStyle;
        var start = points[0];
        var end = points[points.length - 1];
        return jsx("line", {
          key: "grid-".concat(tickValue),
          style: __assign(__assign({
            x1: start.x,
            y1: start.y,
            x2: end.x,
            y2: end.y
          }, grid), gridStyle)
        });
      }) : null, tickLineLength ? ticks.map(function (tick) {
        var points = tick.points,
          tickValue = tick.tickValue;
        var end = points[points.length - 1];
        return jsx("line", {
          key: "tickLine-".concat(tickValue),
          style: __assign({
            x1: end.x,
            y1: end.y,
            x2: end.x + px2hd(tickLineLength),
            y2: end.y
          }, tickLineStyle)
        });
      }) : null, symbols[0] ? jsx("marker", {
        style: __assign(__assign({
          x: right,
          y: top
        }, symbols[0]), {
          symbol: symbols[0].type
        })
      }) : null, line ? jsx("line", {
        style: __assign({
          x1: right,
          y1: top,
          x2: right,
          y2: bottom
        }, line)
      }) : null, symbols[1] ? jsx("marker", {
        style: __assign(__assign({
          x: right,
          y: bottom,
          transform: 'rotate(180deg)',
          transformOrigin: '50% 50%'
        }, symbols[1]), {
          symbol: symbols[1].type
        })
      }) : null, label ? ticks.map(function (tick, _index) {
        var tickValue = tick.tickValue,
          points = tick.points,
          text = tick.text,
          labelStyle = tick.labelStyle;
        var end = points[points.length - 1];
        return jsx("text", {
          key: "text-".concat(tickValue),
          style: __assign(__assign({
            x: end.x + labelOffset,
            y: end.y,
            textAlign: 'left',
            textBaseline: 'middle',
            text: text
          }, label), labelStyle)
        });
      }) : null);
    });

    var Left = (function (props, context) {
      var originTicks = props.ticks,
        coord = props.coord,
        style = props.style,
        animation = props.animation;
      var px2hd = context.px2hd;
      var left = coord.left,
        top = coord.top,
        bottom = coord.bottom;
      var grid = style.grid,
        tickLine = style.tickLine,
        line = style.line,
        labelOffset = style.labelOffset,
        label = style.label,
        symbol = style.symbol;
      var ticks = originTicks.filter(function (d) {
        return !isNaN(d.value);
      });
      var symbols = isArray(symbol) ? symbol : [symbol];
      var _a = tickLine || {},
        tickLineLength = _a.length,
        tickLineStyle = __rest(_a, ["length"]);
      return jsx("group", null, grid ? ticks.map(function (tick) {
        var points = tick.points,
          tickValue = tick.tickValue,
          gridStyle = tick.gridStyle;
        var start = points[0];
        var end = points[points.length - 1];
        return jsx("line", {
          key: "grid-".concat(tickValue),
          style: __assign(__assign({
            x1: start.x,
            y1: start.y,
            x2: end.x,
            y2: end.y
          }, grid), gridStyle)
        });
      }) : null, tickLineLength ? ticks.map(function (tick) {
        var points = tick.points,
          tickValue = tick.tickValue;
        var start = points[0];
        return jsx("line", {
          key: "tickLine-".concat(tickValue),
          style: __assign({
            x1: start.x,
            y1: start.y,
            x2: start.x - px2hd(tickLineLength),
            y2: start.y
          }, tickLineStyle)
        });
      }) : null, symbols[0] ? jsx("marker", {
        style: __assign(__assign({
          x: left,
          y: top
        }, symbols[0]), {
          symbol: symbols[0].type
        })
      }) : null, line ? jsx("line", {
        style: __assign({
          x1: left,
          y1: top,
          x2: left,
          y2: bottom
        }, line)
      }) : null, symbols[1] ? jsx("marker", {
        style: __assign(__assign({
          x: left,
          y: bottom,
          transform: 'rotate(180deg)',
          transformOrigin: '50% 50%'
        }, symbols[1]), {
          symbol: symbols[1].type
        })
      }) : null, label ? ticks.map(function (tick, _index) {
        var tickValue = tick.tickValue,
          points = tick.points,
          text = tick.text,
          labelStyle = tick.labelStyle;
        var start = points[0];
        return jsx("text", {
          key: "text-".concat(tickValue),
          style: __assign(__assign({
            x: start.x - labelOffset,
            y: start.y,
            textAlign: 'right',
            textBaseline: 'middle',
            text: text
          }, label), labelStyle),
          animation: animation || {
            appear: {
              easing: 'linear',
              duration: 300,
              delay: 0,
              property: ['fillOpacity'],
              start: {
                fillOpacity: 0
              },
              end: {
                fillOpacity: 1
              }
            },
            update: {
              easing: 'linear',
              duration: 450,
              delay: 0,
              property: ['x', 'y']
            },
            leave: {
              easing: 'linear',
              duration: 450,
              delay: 0,
              property: ['fillOpacity'],
              start: {
                fillOpacity: 1
              },
              end: {
                fillOpacity: 0
              }
            }
          }
        });
      }) : null);
    });

    function isPolar(props) {
      return props.coord.isPolar;
    }
    var AxisView = (function (props) {
      // 极坐标
      if (isPolar(props)) {
        var dimType = props.dimType;
        if (dimType === 'x') {
          return jsx(PolarX, __assign({}, props));
        }
        return jsx(PolarY, __assign({}, props));
      }
      var position = props.position;
      // 直角坐标
      if (position === 'right') {
        return jsx(Right, __assign({}, props));
      }
      if (position === 'left') {
        return jsx(Left, __assign({}, props));
      }
      if (position === 'top') {
        return jsx(Top, __assign({}, props));
      }
      return jsx(Bottom, __assign({}, props));
    });

    var index$4 = withAxis(AxisView);

    var withLegend = (function (View) {
      return /** @class */function (_super) {
        __extends(Legend, _super);
        function Legend(props) {
          var _this = _super.call(this, props) || this;
          _this._onclick = function (item) {
            var _a;
            var props = _this.props;
            var chart = props.chart,
              _b = props.clickable,
              clickable = _b === void 0 ? true : _b,
              onClick = props.onClick;
            if (!clickable) return;
            var clickItem = item.currentTarget;
            if (!clickItem) {
              return;
            }
            // @ts-ignore
            var dataItem = clickItem.config['data-item'];
            if (!dataItem) {
              return;
            }
            if (isFunction(onClick)) {
              onClick(dataItem);
            }
            var field = dataItem.field,
              tickValue = dataItem.tickValue;
            var prevFiltered = _this.state.filtered;
            var filtered = __assign(__assign({}, prevFiltered), (_a = {}, _a[tickValue] = !prevFiltered[tickValue], _a));
            _this.setState({
              filtered: filtered
            });
            chart.filter(field, function (value) {
              return !filtered[value];
            });
          };
          _this.state = {
            filtered: {},
            items: []
          };
          return _this;
        }
        Legend.prototype.getOriginItems = function () {
          var chart = this.props.chart;
          return chart.getLegendItems();
        };
        Legend.prototype.getItems = function () {
          var _a;
          var _b = this,
            props = _b.props,
            state = _b.state;
          var filtered = state.filtered;
          var renderItems = ((_a = props.items) === null || _a === void 0 ? void 0 : _a.length) ? props.items : this.getOriginItems();
          if (!renderItems) return null;
          return renderItems.map(function (item) {
            var tickValue = item.tickValue;
            return __assign(__assign({}, item), {
              filtered: filtered[tickValue]
            });
          });
        };
        Legend.prototype.setItems = function (items) {
          this.setState({
            items: items
          });
        };
        Legend.prototype.getMaxItemBox = function (node) {
          var maxItemWidth = 0;
          var maxItemHeight = 0;
          (node.children || []).forEach(function (child) {
            var layout = child.layout;
            var width = layout.width,
              height = layout.height;
            maxItemWidth = Math.max(maxItemWidth, width);
            maxItemHeight = Math.max(maxItemHeight, height);
          });
          return {
            width: maxItemWidth,
            height: maxItemHeight
          };
        };
        // 计算 legend 的位置
        Legend.prototype._init = function () {
          var _a = this,
            props = _a.props,
            context = _a.context;
          var
            // @ts-ignore
            parentLayout = props.layout,
            customWidth = props.width,
            customHeight = props.height,
            _b = props.position,
            position = _b === void 0 ? 'top' : _b;
          var items = this.getItems();
          if (!items || !items.length) return;
          var left = parentLayout.left,
            top = parentLayout.top,
            layoutWidth = parentLayout.width,
            layoutHeight = parentLayout.height;
          var width = context.px2hd(customWidth) || layoutWidth;
          var node = computeLayout$1(this, this.render());
          var _c = this.getMaxItemBox(node),
            itemMaxWidth = _c.width,
            itemMaxHeight = _c.height;
          // 每行最多的个数
          var lineMaxCount = Math.max(1, Math.floor(width / itemMaxWidth));
          var itemCount = items.length;
          // legend item 的行数
          var lineCount = Math.ceil(itemCount / lineMaxCount);
          var itemWidth = width / lineMaxCount;
          var autoHeight = itemMaxHeight * lineCount;
          var style = {
            left: left,
            top: top,
            width: width,
            // height 默认自适应
            height: undefined,
            flexDirection: 'row',
            flexWrap: 'wrap',
            alignItems: 'center',
            justifyContent: 'flex-start'
          };
          // 如果只有一行，2端对齐
          if (lineCount === 1) {
            style.justifyContent = 'space-between';
          }
          if (position === 'top') {
            style.height = customHeight ? customHeight : autoHeight;
          }
          if (position === 'left') {
            style.flexDirection = 'column';
            style.justifyContent = 'center';
            style.width = itemMaxWidth;
            style.height = customHeight ? customHeight : layoutHeight;
          }
          if (position === 'right') {
            style.flexDirection = 'column';
            style.alignItems = 'flex-start';
            style.justifyContent = 'center';
            style.width = itemMaxWidth;
            style.height = customHeight ? customHeight : layoutHeight;
            style.left = left + (width - itemMaxWidth);
          }
          if (position === 'bottom') {
            style.top = top + (layoutHeight - autoHeight);
            style.height = customHeight ? customHeight : autoHeight;
          }
          this.itemWidth = itemWidth;
          this.legendStyle = style;
        };
        Legend.prototype.updateCoord = function () {
          var _a = this,
            context = _a.context,
            props = _a.props,
            legendStyle = _a.legendStyle;
          var _b = props.position,
            position = _b === void 0 ? 'top' : _b,
            _c = props.margin,
            margin = _c === void 0 ? '30px' : _c,
            chart = props.chart;
          var width = legendStyle.width,
            height = legendStyle.height;
          var marginNumber = context.px2hd(margin);
          chart.updateCoordFor(this, {
            position: position,
            width: width + marginNumber,
            height: height + marginNumber
          });
        };
        Legend.prototype.willMount = function () {
          var items = this.getItems();
          if (!items || !items.length) return;
          this._init();
          this.updateCoord();
        };
        Legend.prototype.didMount = function () {
          // this._initEvent();
        };
        Legend.prototype.willUpdate = function () {
          var items = this.getItems();
          if (!items || !items.length) return;
          this._init();
          this.updateCoord();
        };
        Legend.prototype.render = function () {
          var _a = this,
            props = _a.props,
            itemWidth = _a.itemWidth,
            legendStyle = _a.legendStyle;
          var items = this.getItems();
          if (!items || !items.length) {
            return null;
          }
          return jsx(View, __assign({}, props, {
            items: items,
            itemWidth: itemWidth,
            style: __assign(__assign({}, legendStyle), props.style),
            onClick: this._onclick
          }));
        };
        return Legend;
      }(Component);
    });

    var Marker$1 = function Marker(_a) {
      var type = _a.type,
        color = _a.color;
      if (type === 'square') {
        return jsx("rect", {
          style: {
            width: '12px',
            height: '12px',
            marginRight: '10px'
          },
          attrs: {
            fill: color
          }
        });
      }
      if (type === 'line') {
        return jsx("line", {
          style: {
            width: '19px',
            marginRight: '10px'
          },
          attrs: {
            stroke: color,
            lineCap: 'round',
            lineWidth: '4px'
          }
        });
      }
      return jsx("circle", {
        style: {
          width: '12px',
          height: '12px',
          marginRight: '10px',
          fill: color
        }
      });
    };
    var LegendView = (function (props) {
      var items = props.items,
        itemWidth = props.itemWidth,
        itemFormatter = props.itemFormatter,
        style = props.style,
        _a = props.marker,
        marker = _a === void 0 ? 'circle' : _a,
        // 图例标记默认为 circle
        itemStyle = props.itemStyle,
        nameStyle = props.nameStyle,
        valueStyle = props.valueStyle,
        valuePrefix = props.valuePrefix,
        onClick = props.onClick;
      var formatValue = function formatValue(value, valuePrefix) {
        if (valuePrefix === void 0) {
          valuePrefix = ': ';
        }
        return "".concat(valuePrefix).concat(value);
      };
      return jsx("group", {
        style: __assign({
          display: 'flex'
        }, style)
      }, items.map(function (item) {
        var color = item.color,
          name = item.name,
          value = item.value,
          filtered = item.filtered,
          tickValue = item.tickValue;
        var valueText = isFunction(itemFormatter) ? itemFormatter(value, tickValue) : value;
        return jsx("group", {
          className: "legend-item",
          style: __assign({
            width: itemWidth,
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'flex-start',
            //TODO: padding改为’12px‘ 就和原来一致了
            padding: ['6px', '6px', '6px', 0]
          }, itemStyle),
          "data-item": item,
          onClick: onClick
        }, Marker$1({
          color: filtered ? '#bfbfbf' : color,
          type: marker
        }), jsx("text", {
          attrs: __assign({
            fill: filtered ? '#bfbfbf' : '#808080',
            text: name
          }, nameStyle)
        }), valueText ? jsx("text", {
          attrs: __assign({
            fill: '#808080',
            text: formatValue(valueText, valuePrefix)
          }, valueStyle)
        }) : null);
      }));
    });

    var index$5 = withLegend(LegendView);

    function withGuide (View) {
      return /** @class */function (_super) {
        __extends(Guide, _super);
        function Guide(props) {
          return _super.call(this, props) || this;
        }
        Guide.prototype.getGuideBBox = function () {
          var node = computeLayout$1(this, this.render());
          var layout = node.layout;
          if (!layout) return;
          return layout;
        };
        // 解析record里的模板字符串，如min、max、50%...
        Guide.prototype.parseReplaceStr = function (value, scale) {
          var replaceMap = {
            min: 0,
            max: 1,
            median: 0.5
          };
          // 传入的是 min、max、median 的
          if (!isNil(replaceMap[value])) {
            return replaceMap[value];
          }
          // 传入的是 xx%
          if (isString(value) && value.indexOf('%') != -1 && !isNaN(Number(value.slice(0, -1)))) {
            var rateValue = Number(value.slice(0, -1));
            var percent = rateValue / 100;
            return percent;
          }
          return scale.scale(value);
        };
        Guide.prototype.parsePoint = function (record) {
          var props = this.props;
          var chart = props.chart,
            coord = props.coord;
          var xScale = chart.getXScales()[0];
          // 只取第一个yScale
          var yScale = chart.getYScales()[0];
          // 解析 record 为归一化后的坐标
          var x = this.parseReplaceStr(record[xScale.field], xScale);
          var y = this.parseReplaceStr(record[yScale.field], yScale);
          return coord.convertPoint({
            x: x,
            y: y
          });
        };
        Guide.prototype.convertPoints = function (records) {
          var _this = this;
          return records.map(function (record) {
            return _this.parsePoint(record);
          });
        };
        Guide.prototype.getGuideTheme = function () {
          var context = this.context;
          var theme = context.theme;
          return theme.guide;
        };
        Guide.prototype.render = function () {
          var _a = this,
            props = _a.props,
            context = _a.context;
          var coord = props.coord,
            _b = props.records,
            records = _b === void 0 ? [] : _b,
            animation = props.animation,
            chart = props.chart,
            style = props.style,
            _onClick = props.onClick,
            _c = props.visible,
            visible = _c === void 0 ? true : _c;
          if (!visible) return;
          var width = context.width,
            height = context.height;
          var points = this.convertPoints(records);
          var theme = this.getGuideTheme();
          return jsx("group", {
            onClick: function onClick(ev) {
              _onClick && _onClick(ev);
            }
          }, jsx(View, __assign({
            points: points,
            theme: theme,
            coord: coord
          }, props, {
            canvasWidth: width,
            canvasHeight: height,
            style: isFunction(style) ? style(points, chart) : style,
            animation: isFunction(animation) ? animation(points, chart) : animation
          })));
        };
        return Guide;
      }(Component);
    }

    var TextGuideView = (function (props, context) {
      var _a = props.theme,
        theme = _a === void 0 ? {} : _a;
      var _b = deepMix(__assign({}, theme.text), props),
        points = _b.points,
        style = _b.style,
        offsetX = _b.offsetX,
        offsetY = _b.offsetY,
        content = _b.content,
        animation = _b.animation;
      var _c = points[0] || {},
        x = _c.x,
        y = _c.y;
      if (isNaN(x) || isNaN(y)) return null;
      var offsetXNum = context.px2hd(offsetX);
      var offsetYNum = context.px2hd(offsetY);
      var posX = x + (offsetXNum || 0);
      var posY = y + (offsetYNum || 0);
      return jsx("text", {
        attrs: __assign({
          text: "".concat(content),
          x: posX,
          y: posY
        }, style),
        animation: deepMix({
          update: {
            easing: 'linear',
            duration: 450,
            property: ['x', 'y']
          }
        }, animation)
      });
    });

    var PointGuideView = (function (props, context) {
      var theme = props.theme;
      var _a = deepMix(__assign({}, theme.point), props),
        points = _a.points,
        style = _a.style,
        offsetX = _a.offsetX,
        offsetY = _a.offsetY,
        animation = _a.animation;
      var _b = points[0] || {},
        x = _b.x,
        y = _b.y;
      if (isNaN(x) || isNaN(y)) return null;
      var offsetXNum = context.px2hd(offsetX);
      var offsetYNum = context.px2hd(offsetY);
      var posX = x + (offsetXNum || 0);
      var posY = y + (offsetYNum || 0);
      return jsx("group", null, jsx("circle", {
        style: __assign({
          cx: posX,
          cy: posY
        }, style),
        animation: animation
      }));
    });

    var LineGuideView = (function (props, context) {
      var _a = props.theme,
        theme = _a === void 0 ? {} : _a;
      var _b = deepMix(__assign({}, theme.line), props),
        points = _b.points,
        style = _b.style,
        offsetX = _b.offsetX,
        offsetY = _b.offsetY,
        animation = _b.animation;
      var checkNaN = points.some(function (d) {
        return isNaN(d.x) || isNaN(d.y);
      });
      if (checkNaN) return;
      var _c = points[0] || {},
        x1 = _c.x,
        y1 = _c.y;
      var _d = points[1] || {},
        x2 = _d.x,
        y2 = _d.y;
      var offsetXNum = context.px2hd(offsetX);
      var offsetYNum = context.px2hd(offsetY);
      var posX1 = x1 + (isArray(offsetXNum) ? offsetXNum[0] || 0 : offsetXNum || 0);
      var posY1 = y1 + (isArray(offsetYNum) ? offsetYNum[0] || 0 : offsetYNum || 0);
      var posX2 = x2 + (isArray(offsetXNum) ? offsetXNum[1] || 0 : offsetXNum || 0);
      var posY2 = y2 + (isArray(offsetYNum) ? offsetYNum[1] || 0 : offsetYNum || 0);
      return jsx("group", null, jsx("line", {
        style: __assign({
          x1: posX1,
          y1: posY1,
          x2: posX2,
          y2: posY2
        }, style),
        animation: animation
      }));
    });

    var ArcGuideView = (function (props) {
      var _a = props.theme,
        theme = _a === void 0 ? {} : _a;
      var _b = deepMix(__assign({}, theme.line), props),
        coord = _b.coord,
        points = _b.points,
        style = _b.style,
        animation = _b.animation;
      var checkNaN = points.some(function (d) {
        return isNaN(d.x) || isNaN(d.y);
      });
      if (checkNaN) return null;
      var start = points[0] || {};
      var end = points[1] || {};
      var coordCenter = coord.center;
      var radius = Math.sqrt((start.x - coordCenter.x) * (start.x - coordCenter.x) + (start.y - coordCenter.y) * (start.y - coordCenter.y));
      var startAngle = Math.atan2(start.y - coordCenter.y, start.x - coordCenter.x);
      var endAngle = Math.atan2(end.y - coordCenter.y, end.x - coordCenter.x);
      return jsx("group", null, jsx("arc", {
        style: __assign({
          cx: coordCenter.x,
          cy: coordCenter.y,
          r: radius,
          startAngle: "".concat(startAngle, "rad"),
          endAngle: "".concat(endAngle, "rad")
        }, style),
        animation: animation
      }));
    });

    var RectGuideView = (function (props, context) {
      var _a = props.theme,
        theme = _a === void 0 ? {} : _a;
      var _b = deepMix(__assign({}, theme.rect), props),
        points = _b.points,
        style = _b.style,
        animation = _b.animation,
        offsetX = _b.offsetX,
        offsetY = _b.offsetY;
      var checkNaN = points.some(function (d) {
        return isNaN(d.x) || isNaN(d.y);
      });
      if (checkNaN) return null;
      var start = points[0] || {};
      var end = points[1] || {};
      var offsetXNum = context.px2hd(offsetX);
      var offsetYNum = context.px2hd(offsetY);
      var posX = Math.min(start.x, end.x) + (offsetXNum || 0);
      var posY = Math.min(start.y, end.y) + (offsetYNum || 0);
      return jsx("group", null, jsx("rect", {
        style: __assign({
          x: posX,
          y: posY,
          width: Math.abs(end.x - start.x),
          height: Math.abs(start.y - end.y)
        }, style),
        animation: animation
      }));
    });

    var defaultProps = {
      offsetX: 0,
      offsetY: 0,
      points: [],
      src: ''
    };
    var ImageGuideView = (function (props, context) {
      var cfg = deepMix({}, defaultProps, props);
      var points = cfg.points,
        style = cfg.style,
        attrs = cfg.attrs,
        offsetX = cfg.offsetX,
        offsetY = cfg.offsetY,
        src = cfg.src,
        animation = cfg.animation;
      var _a = points[0] || {},
        x = _a.x,
        y = _a.y;
      if (isNaN(x) || isNaN(y)) return null;
      var _b = __assign(__assign({}, attrs), style),
        _c = _b.height,
        height = _c === void 0 ? 0 : _c,
        _d = _b.width,
        width = _d === void 0 ? 0 : _d;
      var heightNum = isNumber(height) ? context.px2hd(height + 'px') : context.px2hd(height);
      var widthNum = isNumber(width) ? context.px2hd(width + 'px') : context.px2hd(width);
      var offsetXNum = context.px2hd(offsetX);
      var offsetYNum = context.px2hd(offsetY);
      var posX = x + (offsetXNum || 0) - widthNum / 2;
      var posY = y + (offsetYNum || 0) - heightNum / 2;
      return jsx("group", null, jsx("image", {
        style: __assign(__assign(__assign({}, attrs), style), {
          height: heightNum,
          width: widthNum,
          x: posX,
          y: posY,
          src: src
        }),
        animation: deepMix({
          update: {
            easing: 'linear',
            duration: 450,
            property: ['x', 'y']
          }
        }, animation)
      }));
    });

    var defaultProps$1 = {
      offsetX: 0,
      offsetY: 0,
      points: [],
      direct: 'tl',
      side: '8px',
      autoAdjust: true
    };
    var defaultStyle = {
      container: {
        fill: '#1677FF',
        radius: '4px',
        padding: ['4px', '8px']
      },
      text: {
        fontSize: '22px',
        fill: '#fff'
      },
      arrow: {
        fill: '#1677FF'
      }
    };
    var Label = function Label(_a) {
      var content = _a.content,
        background = _a.background,
        textStyle = _a.textStyle,
        _b = _a.animation,
        animation = _b === void 0 ? {} : _b;
      return jsx("rect", {
        style: __assign({
          display: 'flex',
          fill: defaultStyle.container.fill,
          padding: defaultStyle.container.padding,
          radius: defaultStyle.container.radius
        }, background),
        animation: animation
      }, jsx("text", {
        style: __assign({
          text: content,
          fontSize: defaultStyle.text.fontSize,
          fill: defaultStyle.text.fill
        }, textStyle),
        animation: animation
      }));
    };
    var Tag = /** @class */function (_super) {
      __extends(Tag, _super);
      function Tag() {
        return _super !== null && _super.apply(this, arguments) || this;
      }
      Tag.prototype.render = function () {
        var _a = this,
          props = _a.props,
          context = _a.context;
        var px2hd = context.px2hd;
        var cfg = __assign(__assign({}, defaultProps$1), props);
        var _b = px2hd(cfg),
          points = _b.points,
          content = _b.content,
          offsetX = _b.offsetX,
          offsetY = _b.offsetY,
          direct = _b.direct,
          side = _b.side,
          autoAdjust = _b.autoAdjust,
          canvasWidth = _b.canvasWidth,
          canvasHeight = _b.canvasHeight,
          background = _b.background,
          textStyle = _b.textStyle,
          animation = _b.animation;
        var _c = points[0] || {},
          x = _c.x,
          y = _c.y;
        if (isNaN(x) || isNaN(y)) return null;
        var offsetXNum = context.px2hd(offsetX);
        var offsetYNum = context.px2hd(offsetY);
        var posX = x + (offsetXNum || 0);
        var posY = y + (offsetYNum || 0);
        var layout = computeLayout$1(this, jsx(Label, {
          content: content,
          background: background,
          textStyle: textStyle
        })).layout;
        var guideWidth = layout.width,
          guideHeight = layout.height;
        var _getDirect = function _getDirect(point) {
          var newDirect = direct;
          var x = point.x,
            y = point.y;
          var vertical = newDirect[0];
          var horizontal = newDirect[1];
          // adjust for vertical direction
          if (vertical === 't' && y - side - guideHeight < 0) {
            vertical = 'b';
          } else if (vertical === 'b' && y + side + guideHeight > canvasHeight) {
            vertical = 't';
          }
          // adjust for horizontal direction
          var diff = vertical === 'c' ? side : 0;
          if (horizontal === 'l' && x - diff - guideWidth < 0) {
            horizontal = 'r';
          } else if (horizontal === 'r' && x + diff + guideWidth > canvasWidth) {
            horizontal = 'l';
          } else if (horizontal === 'c') {
            if (guideWidth / 2 + x + diff > canvasWidth) {
              horizontal = 'l';
            } else if (x - guideWidth / 2 - diff < 0) {
              horizontal = 'r';
            }
          }
          newDirect = vertical + horizontal;
          return newDirect;
        };
        var _getArrowPoints = function _getArrowPoints(direct) {
          var arrowPoints = [];
          if (direct === 'tl') {
            arrowPoints = [{
              x: guideWidth,
              y: guideHeight - 1
            }, {
              x: guideWidth,
              y: guideHeight + side
            }, {
              x: guideWidth - side,
              y: guideHeight - 1
            }];
            posX -= guideWidth || 0;
            posY = posY - (guideHeight || 0) - side;
          } else if (direct === 'cl') {
            arrowPoints = [{
              x: guideWidth,
              y: guideHeight / 2 - side
            }, {
              x: guideWidth,
              y: guideHeight / 2 + side
            }, {
              x: guideWidth + side,
              y: guideHeight / 2
            }];
            posX = posX - (guideWidth || 0) - side;
            posY -= guideHeight / 2 || 0;
          } else if (direct === 'bl') {
            arrowPoints = [{
              x: guideWidth,
              y: -side
            }, {
              x: guideWidth,
              y: 1
            }, {
              x: guideWidth - side,
              y: 1
            }];
            posX = posX - (guideWidth || 0);
            posY += side;
          } else if (direct === 'bc') {
            arrowPoints = [{
              x: guideWidth / 2,
              y: -side
            }, {
              x: guideWidth / 2 - side,
              y: 1
            }, {
              x: guideWidth / 2 + side,
              y: 1
            }];
            posX = posX - (guideWidth / 2 || 0);
            posY = posY + side;
          } else if (direct === 'br') {
            arrowPoints = [{
              x: 0,
              y: -side
            }, {
              x: 0,
              y: 1
            }, {
              x: +side,
              y: 1
            }];
            posY += side;
          } else if (direct === 'cr') {
            arrowPoints = [{
              x: -side,
              y: guideHeight / 2
            }, {
              x: 0,
              y: guideHeight / 2 - side
            }, {
              x: 0,
              y: guideHeight / 2 + side
            }];
            posX += side;
            posY -= guideHeight / 2 || 0;
          } else if (direct === 'tr') {
            arrowPoints = [{
              x: 0,
              y: guideHeight + side
            }, {
              x: 0,
              y: guideHeight - 1
            }, {
              x: side,
              y: guideHeight - 1
            }];
            posY = posY - (guideHeight || 0) - side;
          } else if (direct === 'tc') {
            arrowPoints = [{
              x: guideWidth / 2,
              y: guideHeight + side
            }, {
              x: guideWidth / 2 - side,
              y: guideHeight - 1
            }, {
              x: guideWidth / 2 + side,
              y: guideHeight - 1
            }];
            posX -= guideWidth / 2 || 0;
            posY = posY - guideHeight - side;
          }
          return arrowPoints;
        };
        var dr = autoAdjust ? _getDirect(points[0]) : direct;
        var arrowPoints = _getArrowPoints(dr);
        return jsx("group", {
          style: {
            x: posX,
            y: posY
          }
        }, jsx(Label, {
          content: content,
          background: background,
          textStyle: textStyle,
          animation: animation
        }), jsx("polygon", {
          style: {
            points: arrowPoints.map(function (d) {
              return [d.x, d.y];
            }),
            fill: (background === null || background === void 0 ? void 0 : background.fill) || defaultStyle.arrow.fill
          },
          animation: animation
        }));
      };
      return Tag;
    }(Component);

    var eps = 0.0001;
    /**
     * Provides some control methods like:
     * - play
     * - pause
     * - stop
     * - goToAndStop
     * - goToAndPlay
     * @see https://github.com/airbnb/lottie-web/blob/master/player/js/animation/AnimationItem.js
     */
    var LottieAnimation = /** @class */ (function () {
        function LottieAnimation(width, height, elements, context) {
            var _this = this;
            this.width = width;
            this.height = height;
            this.elements = elements;
            this.context = context;
            this.keyframeAnimationMap = new WeakMap();
            this.displayObjectElementMap = new WeakMap();
            this.animations = [];
            this.isPaused = false;
            this.direction = 1;
            this.displayObjects = elements.map(function (element) {
                return _this.buildHierachy(element);
            });
            // TODO: preload images
            // TODO: preload fonts
        }
        LottieAnimation.prototype.generateTransform = function (tx, ty, scaleX, scaleY, rotation) {
            var transformStr = '';
            if (tx !== 0 || ty !== 0) {
                transformStr += "translate(".concat(tx, ", ").concat(ty, ")");
            }
            if (scaleX !== 1 || scaleY !== 1) {
                transformStr += " scale(".concat(scaleX === 0 ? eps : scaleX, ", ").concat(scaleY === 0 ? eps : scaleY, ")");
            }
            if (rotation !== 0) {
                transformStr += " rotate(".concat(rotation, "deg)");
            }
            return transformStr;
        };
        LottieAnimation.prototype.buildHierachy = function (element) {
            var _this = this;
            var type = element.type, name = element.name, _a = element.anchorX, anchorX = _a === void 0 ? 0 : _a, _b = element.anchorY, anchorY = _b === void 0 ? 0 : _b, _c = element.rotation, rotation = _c === void 0 ? 0 : _c, _d = element.scaleX, scaleX = _d === void 0 ? 1 : _d, _e = element.scaleY, scaleY = _e === void 0 ? 1 : _e, _f = element.x, x = _f === void 0 ? 0 : _f, _g = element.y, y = _g === void 0 ? 0 : _g, 
            // skew = 0,
            // skewAxis = 0,
            children = element.children, shape = element.shape, style = element.style, keyframeAnimation = element.keyframeAnimation;
            var displayObject;
            var transform = this.generateTransform(x - anchorX, y - anchorY, scaleX, scaleY, rotation);
            // const transformMat = mat4.fromRotationTranslationScaleOrigin(
            //   mat4.create(),
            //   quat.fromEuler(quat.create(), 0, 0, rotation),
            //   [x - anchorX, y - anchorY, 0],
            //   [scaleX, scaleY, 1],
            //   [anchorX, anchorY, 0],
            // );
            // TODO: repeater @see https://lottiefiles.github.io/lottie-docs/shapes/#repeater
            // @see https://lottiefiles.github.io/lottie-docs/shapes/#shape
            // TODO: polystar, convert to Bezier @see https://lottiefiles.github.io/lottie-docs/rendering/#polystar
            if (type === Shape.GROUP) {
                displayObject = new Group({
                    style: {
                        transformOrigin: "".concat(anchorX, "px ").concat(anchorY, "px"),
                        transform: transform,
                    },
                });
            }
            else if (type === Shape.ELLIPSE) {
                var cx = shape.cx, cy = shape.cy, rx = shape.rx, ry = shape.ry;
                // const center = vec3.fromValues(cx, cy, 0);
                // vec3.transformMat4(center, center, transformMat);
                displayObject = new Ellipse({
                    style: {
                        // cx: center[0],
                        // cy: center[1],
                        cx: cx,
                        cy: cy,
                        rx: rx,
                        ry: ry,
                        // reset transform-origin based on anchor & center
                        transformOrigin: "".concat(anchorX - cx + rx, "px ").concat(anchorY - cy + ry, "px"),
                        transform: transform,
                    },
                });
            }
            else if (type === Shape.PATH) {
                var d = this.generatePathFromShape(shape);
                displayObject = new Path({
                    style: {
                        d: d, // use Path Array which can be skipped when parsing
                        transformOrigin: "".concat(anchorX, "px ").concat(anchorY, "px"),
                        transform: transform,
                    },
                });
            }
            else if (type === Shape.RECT) {
                // @see https://lottiefiles.github.io/lottie-docs/shapes/#rectangle
                var cx = shape.x, cy = shape.y, width = shape.width, height = shape.height, r = shape.r;
                displayObject = new Rect({
                    style: {
                        x: cx,
                        y: cy,
                        width: width,
                        height: height,
                        anchor: [0.5, 0.5], // position means the center of the rectangle
                        radius: r,
                        transformOrigin: "".concat(anchorX - cx + width / 2, "px ").concat(anchorY - cy + height / 2, "px"),
                        transform: transform,
                    },
                });
            }
            else if (type === Shape.IMAGE) {
                var width = shape.width, height = shape.height, src = shape.src;
                displayObject = new Image({
                    style: {
                        x: 0,
                        y: 0,
                        width: width,
                        height: height,
                        src: src,
                        transformOrigin: "".concat(anchorX, "px ").concat(anchorY, "px"),
                        transform: transform,
                    },
                });
            }
            if (name) {
                displayObject.name = name;
            }
            // TODO: match name `mn`, used in expressions
            if (style) {
                // { fill, fillOpacity, fillRule, opacity, lineDash, lineDashOffset }
                displayObject.attr(style);
            }
            if (keyframeAnimation) {
                this.keyframeAnimationMap.set(displayObject, keyframeAnimation);
            }
            if (children) {
                var childNodes = children.map(function (child) { return _this.buildHierachy(child); });
                displayObject.append.apply(displayObject, __spreadArray([], __read(childNodes), false));
            }
            this.displayObjectElementMap.set(displayObject, element);
            return displayObject;
        };
        LottieAnimation.prototype.getAnimations = function () {
            return this.animations;
        };
        /**
         * Returns the animation duration in seconds or frames.
         * @see https://github.com/airbnb/lottie-web#getdurationinframes
         */
        LottieAnimation.prototype.getDuration = function (inFrames) {
            if (inFrames === void 0) { inFrames = false; }
            return (((inFrames ? this.fps() : 1) *
                (this.context.endFrame - this.context.startFrame) *
                this.context.frameTime) /
                1000);
        };
        /**
         * Returns the animation frame rate (frames / second).
         */
        LottieAnimation.prototype.fps = function () {
            return this.context.fps;
        };
        LottieAnimation.prototype.isSameKeyframeOptions = function (options1, options2) {
            return (options1.delay === options2.delay &&
                options1.duration === options2.duration &&
                options1.easing === options2.easing);
        };
        LottieAnimation.prototype.isSameKeyframes = function (keyframe1, keyframe2) {
            // const { offset: o1, easing: e1, ...rest1 } = keyframe1;
            // const { offset: o2, easing: e2, ...rest2 } = keyframe2;
            // const isAllApplyToTransform =
            //   Object.keys(rest1).every((key) =>
            //     ['x', 'y', 'scaleX', 'scaleY', 'rotation'].includes(key),
            //   ) &&
            //   Object.keys(rest2).every((key) =>
            //     ['x', 'y', 'scaleX', 'scaleY', 'rotation'].includes(key),
            //   );
            return (keyframe1.offset === keyframe2.offset &&
                keyframe1.easing === keyframe2.easing
            // (keyframe1.easing === keyframe2.easing || isAllApplyToTransform)
            );
        };
        LottieAnimation.prototype.generatePathFromShape = function (shape) {
            // @see https://lottiefiles.github.io/lottie-docs/shapes/#path
            var close = shape.close, v = shape.v, i = shape.in, out = shape.out;
            var d = [];
            d.push(['M', v[0][0], v[0][1]]);
            for (var n = 1; n < v.length; n++) {
                // @see https://lottiefiles.github.io/lottie-docs/concepts/#bezier
                // The nth bezier segment is defined as:
                // v[n], v[n]+o[n], v[n+1]+i[n+1], v[n+1]
                d.push([
                    'C',
                    out[n - 1][0],
                    out[n - 1][1],
                    i[n][0],
                    i[n][1],
                    v[n][0],
                    v[n][1],
                ]);
            }
            if (close) {
                d.push([
                    'C',
                    out[v.length - 1][0],
                    out[v.length - 1][1],
                    i[0][0],
                    i[0][1],
                    v[0][0],
                    v[0][1],
                ]);
                d.push(['Z']);
            }
            return d;
        };
        /**
         * render Lottie Group to canvas or a mounted display object
         */
        LottieAnimation.prototype.render = function (canvasOrDisplayObject) {
            var _this = this;
            var wrapper = new Group();
            wrapper.append.apply(wrapper, __spreadArray([], __read(this.displayObjects), false));
            if (isCanvas(canvasOrDisplayObject)) {
                canvasOrDisplayObject.appendChild(wrapper);
            }
            else if (isDisplayObject(canvasOrDisplayObject)) {
                if (!canvasOrDisplayObject.isConnected) {
                    throw new Error('[g-lottie-player]: Cannot render Lottie to an unmounted DisplayObject.');
                }
                else {
                    canvasOrDisplayObject.appendChild(wrapper);
                }
            }
            else {
                throw new Error('[g-lottie-player]: We should render Lottie to a mounted DisplayObject or Canvas.');
            }
            this.displayObjects.forEach(function (parent) {
                parent.forEach(function (child) {
                    var _a;
                    var keyframeAnimation = _this.keyframeAnimationMap.get(child);
                    // console.log('keyframeAnimation', keyframeAnimation);
                    var element = _this.displayObjectElementMap.get(child);
                    if (element && element.clipPath) {
                        var _b = element.clipPath, shape = _b.shape, keyframeAnimation_1 = _b.keyframeAnimation;
                        var clipPath = new Path();
                        // use clipPath as target's siblings
                        child.parentElement.appendChild(clipPath);
                        child.style.clipPath = clipPath;
                        if (shape) {
                            clipPath.style.d = _this.generatePathFromShape(shape);
                        }
                        // TODO: only support one clipPath now
                        if (keyframeAnimation_1 && keyframeAnimation_1.length) {
                            var _c = keyframeAnimation_1[0], delay = _c.delay, duration = _c.duration, easing = _c.easing, keyframes = _c.keyframes;
                            // animate clipPath with its `d` property
                            var clipPathAnimation = clipPath.animate(keyframes.map(function (_a) {
                                var offset = _a.offset, shape = _a.shape, easing = _a.easing;
                                return {
                                    offset: offset,
                                    d: path2String(_this.generatePathFromShape(shape)),
                                    easing: easing,
                                };
                            }), {
                                delay: delay,
                                duration: duration,
                                easing: easing,
                                iterations: _this.context.iterations,
                            });
                            _this.animations.push(clipPathAnimation);
                        }
                    }
                    // account for animation only apply to visibility, e.g. spring
                    var visibilityStartOffset = element.visibilityStartOffset, visibilityEndOffset = element.visibilityEndOffset, visibilityFrame = element.visibilityFrame;
                    if (visibilityFrame &&
                        (!keyframeAnimation || !keyframeAnimation.length)) {
                        keyframeAnimation = [
                            {
                                duration: _this.context.frameTime * visibilityFrame,
                                keyframes: [
                                    { offset: 0, style: { opacity: 1 } },
                                    { offset: 1, style: { opacity: 1 } },
                                ],
                            },
                        ];
                    }
                    if (keyframeAnimation && keyframeAnimation.length) {
                        var keyframesOptions_1 = [];
                        keyframeAnimation.map(function (_a) {
                            var _b = _a.delay, delay = _b === void 0 ? 0 : _b, duration = _a.duration, easing = _a.easing, keyframes = _a.keyframes;
                            var formattedKeyframes = keyframes.map(function (keyframe) {
                                return definedProps(keyframe);
                            });
                            var options = definedProps({
                                delay: delay,
                                duration: duration,
                                easing: easing,
                                iterations: _this.context.iterations,
                                fill: _this.context.fill,
                            });
                            keyframesOptions_1.push([formattedKeyframes, options]);
                        });
                        var mergedKeyframesOptions = [keyframesOptions_1[0]];
                        var _loop_1 = function (i) {
                            var _d = __read(keyframesOptions_1[i], 2), currentKeyframes = _d[0], currentOptions = _d[1];
                            // can merge options?
                            var existedKeyframeOptions = mergedKeyframesOptions.find(function (_a) {
                                var _b = __read(_a, 2), keyframes = _b[0], options = _b[1];
                                return keyframes.length === currentKeyframes.length &&
                                    _this.isSameKeyframeOptions(currentOptions, options);
                            });
                            if (existedKeyframeOptions) {
                                currentKeyframes.forEach(function (currentKeyframe) {
                                    var existedKeyframe = existedKeyframeOptions[0].find(function (keyframe) { return _this.isSameKeyframes(currentKeyframe, keyframe); });
                                    if (existedKeyframe) {
                                        currentKeyframe.offset; 
                                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
                                        currentKeyframe.easing; 
                                        var rest = __rest(currentKeyframe, ["offset", "easing"]);
                                        // merge interpolated properties
                                        Object.assign(existedKeyframe, rest);
                                    }
                                    else {
                                        // append if cannot be merged
                                        existedKeyframeOptions[0].push(currentKeyframe);
                                    }
                                });
                            }
                            else {
                                // cannot be merged since options are different
                                mergedKeyframesOptions.push(keyframesOptions_1[i]);
                            }
                        };
                        // merge [{ offset: 0, cx: 1 }, { offset: 0, cy: 1 }] into { offset: 0, cx: 1, cy: 1 }
                        for (var i = 1; i < keyframesOptions_1.length; i++) {
                            _loop_1(i);
                        }
                        // restore animations for later use
                        (_a = _this.animations).push.apply(_a, __spreadArray([], __read(mergedKeyframesOptions
                            .map(function (_a) {
                            var _b = __read(_a, 2), merged = _b[0], options = _b[1];
                            // format interpolated properties, e.g. scaleX -> transform
                            var formatted = _this.formatKeyframes(merged, child);
                            if (formatted.length) {
                                // console.log(child, formatted);
                                var animation_1 = child.animate(formatted, options);
                                if (!isNil(visibilityStartOffset) &&
                                    !isNil(visibilityEndOffset)) {
                                    child.style.visibility = 'hidden';
                                    animation_1.onframe = function () {
                                        var progress = animation_1.effect.getComputedTiming().progress;
                                        if (progress >= visibilityStartOffset &&
                                            progress < visibilityEndOffset) {
                                            child.style.visibility = 'visible';
                                        }
                                        else {
                                            child.style.visibility = 'hidden';
                                        }
                                    };
                                }
                                if (!_this.context.autoplay) {
                                    animation_1.pause();
                                }
                                return animation_1;
                            }
                        })
                            .filter(function (animation) { return !!animation; })), false));
                    }
                });
            });
            return wrapper;
        };
        LottieAnimation.prototype.formatKeyframes = function (keyframes, object) {
            keyframes.forEach(function (keyframe) {
                // if ('offsetPath' in keyframe) {
                //   if (!object.style.offsetPath) {
                //     const [ox, oy] = object.getOrigin();
                //     (keyframe.offsetPath as AbsoluteArray).forEach((segment) => {
                //       if (segment[0] === 'M') {
                //         segment[1] -= ox;
                //         segment[2] -= oy;
                //       } else if (segment[0] === 'C') {
                //         segment[1] -= ox;
                //         segment[2] -= oy;
                //         segment[3] -= ox;
                //         segment[4] -= oy;
                //         segment[5] -= ox;
                //         segment[6] -= oy;
                //       }
                //     });
                //     const offsetPath = new Path({
                //       style: {
                //         d: keyframe.offsetPath,
                //       },
                //     });
                //     object.style.offsetPath = offsetPath;
                //     console.log(offsetPath);
                //   }
                //   delete keyframe.offsetPath;
                //   // offsetPath should override x/y
                //   delete keyframe.x;
                //   delete keyframe.y;
                // }
                // should keep transform during initialization
                // if (!object.style.offsetPath) {
                //   keyframe.transform = object.style.transform || '';
                // }
                keyframe.transform = object.style.transform || '';
                // TODO: transforms with different easing functions will conflict
                if ('scaleX' in keyframe) {
                    keyframe.transform =
                        (keyframe.transform || '') +
                            " scaleX(".concat(keyframe.scaleX === 0 ? eps : keyframe.scaleX, ")");
                    delete keyframe.scaleX;
                }
                if ('scaleY' in keyframe) {
                    keyframe.transform =
                        (keyframe.transform || '') +
                            " scaleY(".concat(keyframe.scaleY === 0 ? eps : keyframe.scaleY, ")");
                    delete keyframe.scaleY;
                }
                if ('rotation' in keyframe) {
                    keyframe.transform =
                        (keyframe.transform || '') + " rotate(".concat(keyframe.rotation, "deg)");
                    delete keyframe.rotation;
                }
                // TODO: skew & skewAxis
                // if ('skew' in keyframe) {
                //   keyframe.transform = (keyframe.transform || '') + ` skew(${keyframe.skew}deg)`;
                //   delete keyframe.skew;
                // }
                if ('x' in keyframe) {
                    keyframe.transform =
                        (keyframe.transform || '') + " translateX(".concat(keyframe.x, "px)");
                    delete keyframe.x;
                }
                if ('y' in keyframe) {
                    keyframe.transform =
                        (keyframe.transform || '') + " translateY(".concat(keyframe.y, "px)");
                    delete keyframe.y;
                }
                // { style: { opacity: 1 } }
                if ('style' in keyframe) {
                    Object.keys(keyframe.style).forEach(function (name) {
                        keyframe[name] = keyframe.style[name];
                    });
                    delete keyframe.style;
                }
            });
            // ignore empty interpolable attributes
            keyframes = keyframes.filter(function (keyframe) {
                // TODO: support negative offset
                keyframe.ignore; keyframe.easing; var offset = keyframe.offset, rest = __rest(keyframe, ["ignore", "easing", "offset"]);
                return offset >= 0 && Object.keys(rest).length > 0;
                // return Object.keys(rest).length > 0;
            });
            if (keyframes.length) {
                // padding offset = 1
                if (keyframes[keyframes.length - 1].offset !== 1) {
                    keyframes.push(__assign(__assign({}, keyframes[keyframes.length - 1]), { offset: 1 }));
                }
            }
            // sort by offset
            keyframes.sort(function (a, b) { return a.offset - b.offset; });
            // remove empty attributes
            keyframes.forEach(function (keyframe) {
                Object.keys(keyframe).forEach(function (name) {
                    if (keyframe[name] === '') {
                        delete keyframe[name];
                    }
                });
            });
            return keyframes;
        };
        /**
         * Destroy all internal displayobjects.
         */
        LottieAnimation.prototype.destroy = function () {
            this.displayObjects.forEach(function (object) {
                object.destroy();
            });
        };
        /**
         * Return the size of this animation.
         * @param outputSize - If provided, the size will be copied into here as width, height.
         */
        LottieAnimation.prototype.size = function (outputSize) {
            return { width: this.width, height: this.height };
        };
        /**
         * Bodymovin version
         */
        LottieAnimation.prototype.version = function () {
            return this.context.version;
        };
        LottieAnimation.prototype.play = function () {
            this.isPaused = false;
            this.animations.forEach(function (animation) {
                animation.play();
            });
        };
        /**
         * Can contain 2 numeric values that will be used as first and last frame of the animation.
         * @see https://github.com/airbnb/lottie-web#playsegmentssegments-forceflag
         */
        LottieAnimation.prototype.playSegments = function (segments) {
            var _this = this;
            var _a = __read(segments, 2), firstFrame = _a[0], lastFrame = _a[1];
            this.isPaused = false;
            this.animations.forEach(function (animation) {
                animation.currentTime = (firstFrame / _this.fps()) * 1000;
                var originOnFrame = animation.onframe;
                animation.onframe = function (e) {
                    if (originOnFrame) {
                        // @ts-ignore
                        originOnFrame(e);
                    }
                    if (animation.currentTime >= (lastFrame / _this.fps()) * 1000) {
                        animation.finish();
                        if (originOnFrame) {
                            animation.onframe = originOnFrame;
                        }
                        else {
                            animation.onframe = null;
                        }
                    }
                };
                animation.play();
            });
        };
        LottieAnimation.prototype.pause = function () {
            this.isPaused = true;
            this.animations.forEach(function (animation) {
                animation.pause();
            });
        };
        /**
         *
         */
        LottieAnimation.prototype.togglePause = function () {
            if (this.isPaused) {
                this.play();
            }
            else {
                this.pause();
            }
        };
        /**
         * Goto and stop at a specific time(in seconds) or frame.
         * Split goToAndStop/Play into goTo & stop/play
         * @see https://github.com/airbnb/lottie-web
         */
        LottieAnimation.prototype.goTo = function (value, isFrame) {
            var _this = this;
            if (isFrame === void 0) { isFrame = false; }
            if (isFrame) {
                this.animations.forEach(function (animation) {
                    animation.currentTime = (value / _this.fps()) * 1000;
                });
            }
            else {
                this.animations.forEach(function (animation) {
                    animation.currentTime = value * 1000;
                });
            }
        };
        /**
         * @see https://github.com/airbnb/lottie-web#stop
         */
        LottieAnimation.prototype.stop = function () {
            this.animations.forEach(function (animation) {
                animation.finish();
            });
        };
        /**
         * 1 is normal speed.
         * @see https://github.com/airbnb/lottie-web#setspeedspeed
         */
        LottieAnimation.prototype.setSpeed = function (speed) {
            var _this = this;
            this.animations.forEach(function (animation) {
                animation.playbackRate = speed * _this.direction;
            });
        };
        /**
         * 1 is forward, -1 is reverse.
         * @see https://github.com/airbnb/lottie-web#setdirectiondirection
         */
        LottieAnimation.prototype.setDirection = function (direction) {
            this.direction = direction;
            this.animations.forEach(function (animation) {
                animation.playbackRate *= direction;
            });
        };
        return LottieAnimation;
    }());

    /**
     * borrow from https://github.com/airbnb/lottie-web/blob/master/player/js/utils/DataManager.js#L40-L493
     */
    function completeLayers(layers, comps) {
        var layerData;
        var i;
        var len = layers.length;
        var j;
        var jLen;
        var k;
        var kLen;
        for (i = 0; i < len; i += 1) {
            layerData = layers[i];
            if ('ks' in layerData && !layerData.completed) {
                layerData.completed = true;
                if (layerData.tt) {
                    layers[i - 1].td = layerData.tt;
                }
                if (layerData.hasMask) {
                    var maskProps = layerData.masksProperties;
                    jLen = maskProps.length;
                    for (j = 0; j < jLen; j += 1) {
                        if (maskProps[j].pt.k.i) {
                            convertPathsToAbsoluteValues(maskProps[j].pt.k);
                        }
                        else {
                            kLen = maskProps[j].pt.k.length;
                            for (k = 0; k < kLen; k += 1) {
                                if (maskProps[j].pt.k[k].s) {
                                    convertPathsToAbsoluteValues(maskProps[j].pt.k[k].s[0]);
                                }
                                if (maskProps[j].pt.k[k].e) {
                                    convertPathsToAbsoluteValues(maskProps[j].pt.k[k].e[0]);
                                }
                            }
                        }
                    }
                }
                if (layerData.ty === 0) {
                    layerData.layers = findCompLayers(layerData.refId, comps);
                    completeLayers(layerData.layers, comps);
                }
                else if (layerData.ty === 4) {
                    completeShapes(layerData.shapes);
                }
                else if (layerData.ty === 5) {
                    completeText(layerData);
                }
            }
        }
    }
    function completeChars(chars, assets) {
        if (chars) {
            var i = 0;
            var len = chars.length;
            for (i = 0; i < len; i += 1) {
                if (chars[i].t === 1) {
                    // var compData = findComp(chars[i].data.refId, assets);
                    chars[i].data.layers = findCompLayers(chars[i].data.refId, assets);
                    // chars[i].data.ip = 0;
                    // chars[i].data.op = 99999;
                    // chars[i].data.st = 0;
                    // chars[i].data.sr = 1;
                    // chars[i].w = compData.w;
                    // chars[i].data.ks = {
                    //   a: { k: [0, 0, 0], a: 0 },
                    //   p: { k: [0, -compData.h, 0], a: 0 },
                    //   r: { k: 0, a: 0 },
                    //   s: { k: [100, 100], a: 0 },
                    //   o: { k: 100, a: 0 },
                    // };
                    completeLayers(chars[i].data.layers, assets);
                }
            }
        }
    }
    function findComp(id, comps) {
        var i = 0;
        var len = comps.length;
        while (i < len) {
            if (comps[i].id === id) {
                return comps[i];
            }
            i += 1;
        }
        return null;
    }
    function findCompLayers(id, comps) {
        var comp = findComp(id, comps);
        if (comp) {
            if (!comp.layers.__used) {
                comp.layers.__used = true;
                return comp.layers;
            }
            return JSON.parse(JSON.stringify(comp.layers));
        }
        return null;
    }
    function completeShapes(arr) {
        var i;
        var len = arr.length;
        var j;
        var jLen;
        for (i = len - 1; i >= 0; i -= 1) {
            if (arr[i].ty === 'sh') {
                if (arr[i].ks.k.i) {
                    convertPathsToAbsoluteValues(arr[i].ks.k);
                }
                else {
                    jLen = arr[i].ks.k.length;
                    for (j = 0; j < jLen; j += 1) {
                        if (arr[i].ks.k[j].s) {
                            convertPathsToAbsoluteValues(arr[i].ks.k[j].s[0]);
                        }
                        if (arr[i].ks.k[j].e) {
                            convertPathsToAbsoluteValues(arr[i].ks.k[j].e[0]);
                        }
                    }
                }
            }
            else if (arr[i].ty === 'gr') {
                completeShapes(arr[i].it);
            }
        }
    }
    function convertPathsToAbsoluteValues(path) {
        var i;
        var len = path.i.length;
        for (i = 0; i < len; i += 1) {
            path.i[i][0] += path.v[i][0];
            path.i[i][1] += path.v[i][1];
            path.o[i][0] += path.v[i][0];
            path.o[i][1] += path.v[i][1];
        }
    }
    function checkVersion(minimum, animVersionString) {
        var animVersion = animVersionString ? animVersionString.split('.') : [100, 100, 100];
        if (minimum[0] > animVersion[0]) {
            return true;
        }
        if (animVersion[0] > minimum[0]) {
            return false;
        }
        if (minimum[1] > animVersion[1]) {
            return true;
        }
        if (animVersion[1] > minimum[1]) {
            return false;
        }
        if (minimum[2] > animVersion[2]) {
            return true;
        }
        if (animVersion[2] > minimum[2]) {
            return false;
        }
        return null;
    }
    var checkText = (function () {
        var minimumVersion = [4, 4, 14];
        function updateTextLayer(textLayer) {
            var documentData = textLayer.t.d;
            textLayer.t.d = {
                k: [
                    {
                        s: documentData,
                        t: 0,
                    },
                ],
            };
        }
        function iterateLayers(layers) {
            var i;
            var len = layers.length;
            for (i = 0; i < len; i += 1) {
                if (layers[i].ty === 5) {
                    updateTextLayer(layers[i]);
                }
            }
        }
        return function (animationData) {
            if (checkVersion(minimumVersion, animationData.v)) {
                iterateLayers(animationData.layers);
                if (animationData.assets) {
                    var i = void 0;
                    var len = animationData.assets.length;
                    for (i = 0; i < len; i += 1) {
                        if (animationData.assets[i].layers) {
                            iterateLayers(animationData.assets[i].layers);
                        }
                    }
                }
            }
        };
    })();
    var checkChars = (function () {
        var minimumVersion = [4, 7, 99];
        return function (animationData) {
            if (animationData.chars && !checkVersion(minimumVersion, animationData.v)) {
                var i = void 0;
                var len = animationData.chars.length;
                for (i = 0; i < len; i += 1) {
                    var charData = animationData.chars[i];
                    if (charData.data && charData.data.shapes) {
                        completeShapes(charData.data.shapes);
                        charData.data.ip = 0;
                        charData.data.op = 99999;
                        charData.data.st = 0;
                        charData.data.sr = 1;
                        charData.data.ks = {
                            p: { k: [0, 0], a: 0 },
                            s: { k: [100, 100], a: 0 },
                            a: { k: [0, 0], a: 0 },
                            r: { k: 0, a: 0 },
                            o: { k: 100, a: 0 },
                        };
                        if (!animationData.chars[i].t) {
                            charData.data.shapes.push({
                                ty: 'no',
                            });
                            charData.data.shapes[0].it.push({
                                p: { k: [0, 0], a: 0 },
                                s: { k: [100, 100], a: 0 },
                                a: { k: [0, 0], a: 0 },
                                r: { k: 0, a: 0 },
                                o: { k: 100, a: 0 },
                                sk: { k: 0, a: 0 },
                                sa: { k: 0, a: 0 },
                                ty: 'tr',
                            });
                        }
                    }
                }
            }
        };
    })();
    var checkPathProperties = (function () {
        var minimumVersion = [5, 7, 15];
        function updateTextLayer(textLayer) {
            var pathData = textLayer.t.p;
            if (typeof pathData.a === 'number') {
                pathData.a = {
                    a: 0,
                    k: pathData.a,
                };
            }
            if (typeof pathData.p === 'number') {
                pathData.p = {
                    a: 0,
                    k: pathData.p,
                };
            }
            if (typeof pathData.r === 'number') {
                pathData.r = {
                    a: 0,
                    k: pathData.r,
                };
            }
        }
        function iterateLayers(layers) {
            var i;
            var len = layers.length;
            for (i = 0; i < len; i += 1) {
                if (layers[i].ty === 5) {
                    updateTextLayer(layers[i]);
                }
            }
        }
        return function (animationData) {
            if (checkVersion(minimumVersion, animationData.v)) {
                iterateLayers(animationData.layers);
                if (animationData.assets) {
                    var i = void 0;
                    var len = animationData.assets.length;
                    for (i = 0; i < len; i += 1) {
                        if (animationData.assets[i].layers) {
                            iterateLayers(animationData.assets[i].layers);
                        }
                    }
                }
            }
        };
    })();
    var checkColors = (function () {
        var minimumVersion = [4, 1, 9];
        function iterateShapes(shapes) {
            var i;
            var len = shapes.length;
            var j;
            var jLen;
            for (i = 0; i < len; i += 1) {
                if (shapes[i].ty === 'gr') {
                    iterateShapes(shapes[i].it);
                }
                else if (shapes[i].ty === 'fl' || shapes[i].ty === 'st') {
                    if (shapes[i].c.k && shapes[i].c.k[0].i) {
                        jLen = shapes[i].c.k.length;
                        for (j = 0; j < jLen; j += 1) {
                            if (shapes[i].c.k[j].s) {
                                shapes[i].c.k[j].s[0] /= 255;
                                shapes[i].c.k[j].s[1] /= 255;
                                shapes[i].c.k[j].s[2] /= 255;
                                shapes[i].c.k[j].s[3] /= 255;
                            }
                            if (shapes[i].c.k[j].e) {
                                shapes[i].c.k[j].e[0] /= 255;
                                shapes[i].c.k[j].e[1] /= 255;
                                shapes[i].c.k[j].e[2] /= 255;
                                shapes[i].c.k[j].e[3] /= 255;
                            }
                        }
                    }
                    else {
                        shapes[i].c.k[0] /= 255;
                        shapes[i].c.k[1] /= 255;
                        shapes[i].c.k[2] /= 255;
                        shapes[i].c.k[3] /= 255;
                    }
                }
            }
        }
        function iterateLayers(layers) {
            var i;
            var len = layers.length;
            for (i = 0; i < len; i += 1) {
                if (layers[i].ty === 4) {
                    iterateShapes(layers[i].shapes);
                }
            }
        }
        return function (animationData) {
            if (checkVersion(minimumVersion, animationData.v)) {
                iterateLayers(animationData.layers);
                if (animationData.assets) {
                    var i = void 0;
                    var len = animationData.assets.length;
                    for (i = 0; i < len; i += 1) {
                        if (animationData.assets[i].layers) {
                            iterateLayers(animationData.assets[i].layers);
                        }
                    }
                }
            }
        };
    })();
    var checkShapes = (function () {
        var minimumVersion = [4, 4, 18];
        function completeClosingShapes(arr) {
            var i;
            var len = arr.length;
            var j;
            var jLen;
            for (i = len - 1; i >= 0; i -= 1) {
                if (arr[i].ty === 'sh') {
                    if (arr[i].ks.k.i) {
                        arr[i].ks.k.c = arr[i].closed;
                    }
                    else {
                        jLen = arr[i].ks.k.length;
                        for (j = 0; j < jLen; j += 1) {
                            if (arr[i].ks.k[j].s) {
                                arr[i].ks.k[j].s[0].c = arr[i].closed;
                            }
                            if (arr[i].ks.k[j].e) {
                                arr[i].ks.k[j].e[0].c = arr[i].closed;
                            }
                        }
                    }
                }
                else if (arr[i].ty === 'gr') {
                    completeClosingShapes(arr[i].it);
                }
            }
        }
        function iterateLayers(layers) {
            var layerData;
            var i;
            var len = layers.length;
            var j;
            var jLen;
            var k;
            var kLen;
            for (i = 0; i < len; i += 1) {
                layerData = layers[i];
                if (layerData.hasMask) {
                    var maskProps = layerData.masksProperties;
                    jLen = maskProps.length;
                    for (j = 0; j < jLen; j += 1) {
                        if (maskProps[j].pt.k.i) {
                            maskProps[j].pt.k.c = maskProps[j].cl;
                        }
                        else {
                            kLen = maskProps[j].pt.k.length;
                            for (k = 0; k < kLen; k += 1) {
                                if (maskProps[j].pt.k[k].s) {
                                    maskProps[j].pt.k[k].s[0].c = maskProps[j].cl;
                                }
                                if (maskProps[j].pt.k[k].e) {
                                    maskProps[j].pt.k[k].e[0].c = maskProps[j].cl;
                                }
                            }
                        }
                    }
                }
                if (layerData.ty === 4) {
                    completeClosingShapes(layerData.shapes);
                }
            }
        }
        return function (animationData) {
            if (checkVersion(minimumVersion, animationData.v)) {
                iterateLayers(animationData.layers);
                if (animationData.assets) {
                    var i = void 0;
                    var len = animationData.assets.length;
                    for (i = 0; i < len; i += 1) {
                        if (animationData.assets[i].layers) {
                            iterateLayers(animationData.assets[i].layers);
                        }
                    }
                }
            }
        };
    })();
    function completeData(animationData) {
        if (animationData.__complete) {
            return;
        }
        checkColors(animationData);
        checkText(animationData);
        checkChars(animationData);
        checkPathProperties(animationData);
        checkShapes(animationData);
        completeLayers(animationData.layers, animationData.assets);
        completeChars(animationData.chars, animationData.assets);
        animationData.__complete = true;
    }
    function completeText(data) {
        if (data.t.a.length === 0 && !('m' in data.t.p)) ;
    }

    /**
     * https://lottiefiles.github.io/lottie-docs/constants/
     */
    var BlendMode;
    (function (BlendMode) {
        BlendMode[BlendMode["Normal"] = 0] = "Normal";
        BlendMode[BlendMode["Multiply"] = 1] = "Multiply";
        BlendMode[BlendMode["Screen"] = 2] = "Screen";
        BlendMode[BlendMode["Overlay"] = 3] = "Overlay";
        BlendMode[BlendMode["Darken"] = 4] = "Darken";
        BlendMode[BlendMode["Lighten"] = 5] = "Lighten";
        BlendMode[BlendMode["ColorDodge"] = 6] = "ColorDodge";
        BlendMode[BlendMode["ColorBurn"] = 7] = "ColorBurn";
        BlendMode[BlendMode["HardLight"] = 8] = "HardLight";
        BlendMode[BlendMode["SoftLight"] = 9] = "SoftLight";
        BlendMode[BlendMode["Difference"] = 10] = "Difference";
        BlendMode[BlendMode["Exclusion"] = 11] = "Exclusion";
        BlendMode[BlendMode["Hue"] = 12] = "Hue";
        BlendMode[BlendMode["Saturation"] = 13] = "Saturation";
        BlendMode[BlendMode["Color"] = 14] = "Color";
        BlendMode[BlendMode["Luminosity"] = 15] = "Luminosity";
        BlendMode[BlendMode["Add"] = 16] = "Add";
        BlendMode[BlendMode["HardMix"] = 17] = "HardMix";
    })(BlendMode || (BlendMode = {}));
    /**
     * @see https://lottiefiles.github.io/lottie-docs/constants/#mattemode
     */
    var MatteMode;
    (function (MatteMode) {
        MatteMode[MatteMode["Normal"] = 0] = "Normal";
        MatteMode[MatteMode["Alpha"] = 1] = "Alpha";
        MatteMode[MatteMode["InvertedAlpha"] = 2] = "InvertedAlpha";
        MatteMode[MatteMode["Luma"] = 3] = "Luma";
        MatteMode[MatteMode["InvertedLuma"] = 4] = "InvertedLuma";
    })(MatteMode || (MatteMode = {}));
    var Layer3DMode;
    (function (Layer3DMode) {
        Layer3DMode[Layer3DMode["Off"] = 0] = "Off";
        Layer3DMode[Layer3DMode["On"] = 1] = "On";
    })(Layer3DMode || (Layer3DMode = {}));
    var AutoOrientMode;
    (function (AutoOrientMode) {
        AutoOrientMode[AutoOrientMode["Off"] = 0] = "Off";
        AutoOrientMode[AutoOrientMode["On"] = 1] = "On";
    })(AutoOrientMode || (AutoOrientMode = {}));
    var EffectValueType;
    (function (EffectValueType) {
        EffectValueType[EffectValueType["Number"] = 0] = "Number";
        EffectValueType[EffectValueType["Color"] = 2] = "Color";
        EffectValueType[EffectValueType["MultiDimensional"] = 3] = "MultiDimensional";
        EffectValueType[EffectValueType["Boolean"] = 7] = "Boolean";
    })(EffectValueType || (EffectValueType = {}));
    var EffectType;
    (function (EffectType) {
        EffectType[EffectType["Transform"] = 5] = "Transform";
        EffectType[EffectType["DropShadow"] = 25] = "DropShadow";
    })(EffectType || (EffectType = {}));
    var MaskMode;
    (function (MaskMode) {
        MaskMode["No"] = "n";
        MaskMode["Add"] = "a";
        MaskMode["Subtract"] = "s";
        MaskMode["Intersect"] = "i";
        MaskMode["Lighten"] = "l";
        MaskMode["Darken"] = "d";
        MaskMode["Difference"] = "f";
    })(MaskMode || (MaskMode = {}));
    var LayerType;
    (function (LayerType) {
        LayerType[LayerType["precomp"] = 0] = "precomp";
        LayerType[LayerType["solid"] = 1] = "solid";
        LayerType[LayerType["image"] = 2] = "image";
        LayerType[LayerType["null"] = 3] = "null";
        LayerType[LayerType["shape"] = 4] = "shape";
        LayerType[LayerType["text"] = 5] = "text";
        LayerType[LayerType["audio"] = 6] = "audio";
        LayerType[LayerType["pholderVideo"] = 7] = "pholderVideo";
        LayerType[LayerType["imageSeq"] = 8] = "imageSeq";
        LayerType[LayerType["video"] = 9] = "video";
        LayerType[LayerType["pholderStill"] = 10] = "pholderStill";
        LayerType[LayerType["guide"] = 11] = "guide";
        LayerType[LayerType["adjustment"] = 12] = "adjustment";
        LayerType[LayerType["camera"] = 13] = "camera";
        LayerType[LayerType["light"] = 14] = "light";
        LayerType[LayerType["data"] = 15] = "data";
    })(LayerType || (LayerType = {}));
    var TextJustify;
    (function (TextJustify) {
        TextJustify[TextJustify["Left"] = 0] = "Left";
        TextJustify[TextJustify["Right"] = 1] = "Right";
        TextJustify[TextJustify["Center"] = 2] = "Center";
    })(TextJustify || (TextJustify = {}));
    var VerticalJustify;
    (function (VerticalJustify) {
        VerticalJustify[VerticalJustify["Top"] = 0] = "Top";
        VerticalJustify[VerticalJustify["Center"] = 1] = "Center";
        VerticalJustify[VerticalJustify["Bottom"] = 2] = "Bottom";
    })(VerticalJustify || (VerticalJustify = {}));
    var RangeSelectorDomain;
    (function (RangeSelectorDomain) {
        RangeSelectorDomain[RangeSelectorDomain["Characters"] = 1] = "Characters";
        RangeSelectorDomain[RangeSelectorDomain["CharactersExcludingSpaces"] = 2] = "CharactersExcludingSpaces";
        RangeSelectorDomain[RangeSelectorDomain["Words"] = 3] = "Words";
        RangeSelectorDomain[RangeSelectorDomain["Lines"] = 4] = "Lines";
    })(RangeSelectorDomain || (RangeSelectorDomain = {}));
    var RangeSelectorShape;
    (function (RangeSelectorShape) {
        RangeSelectorShape[RangeSelectorShape["Square"] = 1] = "Square";
        RangeSelectorShape[RangeSelectorShape["RampUp"] = 2] = "RampUp";
        RangeSelectorShape[RangeSelectorShape["RampDown"] = 3] = "RampDown";
        RangeSelectorShape[RangeSelectorShape["Triangle"] = 4] = "Triangle";
        RangeSelectorShape[RangeSelectorShape["Round"] = 5] = "Round";
        RangeSelectorShape[RangeSelectorShape["Smooth"] = 6] = "Smooth";
    })(RangeSelectorShape || (RangeSelectorShape = {}));
    var RangeSelectorUnits;
    (function (RangeSelectorUnits) {
        RangeSelectorUnits[RangeSelectorUnits["Percentage"] = 1] = "Percentage";
        RangeSelectorUnits[RangeSelectorUnits["Index"] = 2] = "Index";
    })(RangeSelectorUnits || (RangeSelectorUnits = {}));
    var RangeSelectorMode;
    (function (RangeSelectorMode) {
        RangeSelectorMode[RangeSelectorMode["Add"] = 1] = "Add";
        RangeSelectorMode[RangeSelectorMode["Subtract"] = 2] = "Subtract";
        RangeSelectorMode[RangeSelectorMode["Intersect"] = 3] = "Intersect";
        RangeSelectorMode[RangeSelectorMode["Min"] = 4] = "Min";
        RangeSelectorMode[RangeSelectorMode["Max"] = 5] = "Max";
        RangeSelectorMode[RangeSelectorMode["Difference"] = 6] = "Difference";
    })(RangeSelectorMode || (RangeSelectorMode = {}));
    /**
     * @see https://lottiefiles.github.io/lottie-docs/shapes/#shape-types
     */
    var ShapeType;
    (function (ShapeType) {
        ShapeType["Rectangle"] = "rc";
        ShapeType["Ellipse"] = "el";
        ShapeType["PolyStar"] = "sr";
        ShapeType["Path"] = "sh";
        ShapeType["Fill"] = "fl";
        ShapeType["Stroke"] = "st";
        ShapeType["GradientFill"] = "gf";
        ShapeType["GradientStroke"] = "gs";
        ShapeType["NoStyle"] = "no";
        ShapeType["Group"] = "gr";
        ShapeType["Transform"] = "tr";
        ShapeType["Repeater"] = "rp";
        ShapeType["Trim"] = "tm";
        ShapeType["RoundedCorners"] = "rd";
        ShapeType["PuckerOrBloat"] = "pb";
        ShapeType["Merge"] = "mm";
        ShapeType["Twist"] = "tw";
        ShapeType["OffsetPath"] = "op";
        ShapeType["ZigZag"] = "zz";
    })(ShapeType || (ShapeType = {}));
    /**
     * @see https://lottiefiles.github.io/lottie-docs/constants/#fillrule
     */
    var FillRule;
    (function (FillRule) {
        FillRule[FillRule["NonZero"] = 1] = "NonZero";
        FillRule[FillRule["EvenOdd"] = 2] = "EvenOdd";
    })(FillRule || (FillRule = {}));
    /**
     * @see https://lottiefiles.github.io/lottie-docs/constants/#linejoin
     */
    var LineJoin;
    (function (LineJoin) {
        LineJoin[LineJoin["Miter"] = 1] = "Miter";
        LineJoin[LineJoin["Round"] = 2] = "Round";
        LineJoin[LineJoin["Bevel"] = 3] = "Bevel";
    })(LineJoin || (LineJoin = {}));
    /**
     * @see https://lottiefiles.github.io/lottie-docs/constants/#linecap
     */
    var LineCap;
    (function (LineCap) {
        LineCap[LineCap["Butt"] = 1] = "Butt";
        LineCap[LineCap["Round"] = 2] = "Round";
        LineCap[LineCap["Square"] = 3] = "Square";
    })(LineCap || (LineCap = {}));
    /**
     * @see https://lottiefiles.github.io/lottie-docs/constants/#gradienttype
     */
    var GradientType$1;
    (function (GradientType) {
        GradientType[GradientType["Linear"] = 1] = "Linear";
        GradientType[GradientType["Radial"] = 2] = "Radial";
    })(GradientType$1 || (GradientType$1 = {}));
    var FontPathOrigin;
    (function (FontPathOrigin) {
        FontPathOrigin[FontPathOrigin["CssUrl"] = 1] = "CssUrl";
        FontPathOrigin[FontPathOrigin["ScriptUrl"] = 2] = "ScriptUrl";
        FontPathOrigin[FontPathOrigin["FontUrl"] = 3] = "FontUrl";
    })(FontPathOrigin || (FontPathOrigin = {}));

    var ParseContext = /** @class */ (function () {
        function ParseContext() {
            this.frameTime = 1000 / 30;
            this.startFrame = 0;
            this.autoplay = false;
            this.fill = 'auto';
            this.iterations = 0;
            this.assetsMap = new Map();
        }
        return ParseContext;
    }());
    function isNumberArray(val) {
        return Array.isArray(val) && typeof val[0] === 'number';
    }
    function isMultiDimensionalValue(val) {
        return isNumberArray(val === null || val === void 0 ? void 0 : val.k);
    }
    function isMultiDimensionalKeyframedValue(val) {
        var k = val === null || val === void 0 ? void 0 : val.k;
        return Array.isArray(k) && k[0].t !== undefined && isNumberArray(k[0].s);
    }
    function isValue(val) {
        // TODO is [100] sort of value?
        return typeof (val === null || val === void 0 ? void 0 : val.k) === 'number';
    }
    function isKeyframedValue(val) {
        var k = val === null || val === void 0 ? void 0 : val.k;
        return Array.isArray(k) && k[0].t !== undefined && typeof k[0].s === 'number';
    }
    function toColorString(val) {
        var opacity = getMultiDimensionValue(val, 3);
        return "rgba(".concat([
            Math.round(getMultiDimensionValue(val, 0) * 255),
            Math.round(getMultiDimensionValue(val, 1) * 255),
            Math.round(getMultiDimensionValue(val, 2) * 255),
            !isNil(opacity) ? opacity : 1,
        ].join(','), ")");
    }
    function getMultiDimensionValue(val, dimIndex) {
        return val != null
            ? typeof val === 'number'
                ? val
                : val[dimIndex || 0]
            : NaN;
    }
    /**
     * @see https://lottiefiles.github.io/lottie-docs/concepts/#easing-handles
     */
    function getMultiDimensionEasingBezierString(kf, nextKf, dimIndex) {
        var _a, _b, _c, _d;
        var bezierEasing = [];
        bezierEasing.push((((_a = kf.o) === null || _a === void 0 ? void 0 : _a.x) &&
            (getMultiDimensionValue(kf.o.x, dimIndex) ||
                getMultiDimensionValue(kf.o.x, 0))) ||
            0, (((_b = kf.o) === null || _b === void 0 ? void 0 : _b.y) &&
            (getMultiDimensionValue(kf.o.y, dimIndex) ||
                getMultiDimensionValue(kf.o.y, 0))) ||
            0, (((_c = kf.i) === null || _c === void 0 ? void 0 : _c.x) &&
            (getMultiDimensionValue(kf.i.x, dimIndex) ||
                getMultiDimensionValue(kf.i.x, 0))) ||
            1, (((_d = kf.i) === null || _d === void 0 ? void 0 : _d.y) &&
            (getMultiDimensionValue(kf.i.y, dimIndex) ||
                getMultiDimensionValue(kf.i.y, 0))) ||
            1);
        // linear by default
        if (!(bezierEasing[0] === 0 &&
            bezierEasing[1] === 0 &&
            bezierEasing[2] === 1 &&
            bezierEasing[3] === 1)) {
            return "cubic-bezier(".concat(bezierEasing.join(','), ")");
        }
        return;
    }
    /**
     * @see https://lottiefiles.github.io/lottie-docs/concepts/#keyframe
     */
    function parseKeyframe(kfs, bezierEasingDimIndex, context, setVal) {
        var kfsLen = kfs.length;
        // const offset = context.layerStartTime;
        var duration = context.endFrame - context.startFrame;
        var out = {
            duration: 0,
            delay: 0,
            keyframes: [],
        };
        var prevKf;
        for (var i = 0; i < kfsLen; i++) {
            var kf = kfs[i];
            var nextKf = kfs[i + 1];
            // If h is present and it's 1, you don't need i and o,
            // as the property will keep the same value until the next keyframe.
            var isDiscrete = kf.h === 1;
            var offset = (kf.t + context.layerOffsetTime - context.startFrame) / duration;
            var outKeyframe = {
                offset: offset,
            };
            if (!isDiscrete) {
                outKeyframe.easing = getMultiDimensionEasingBezierString(kf, nextKf, bezierEasingDimIndex);
            }
            // Use end state of later frame if start state not exits.
            // @see https://lottiefiles.github.io/lottie-docs/concepts/#old-lottie-keyframes
            var startVal = kf.s || (prevKf === null || prevKf === void 0 ? void 0 : prevKf.e);
            if (startVal) {
                setVal(outKeyframe, startVal);
            }
            if (outKeyframe.offset > 0 && i === 0) {
                // Set initial
                var initialKeyframe = {
                    offset: 0,
                };
                if (startVal) {
                    setVal(initialKeyframe, startVal);
                }
                out.keyframes.push(initialKeyframe);
            }
            out.keyframes.push(outKeyframe);
            if (isDiscrete && nextKf) {
                // Use two keyframe to simulate the discrete animation.
                var extraKeyframe = {
                    offset: Math.max((nextKf.t + context.layerOffsetTime - context.startFrame) / duration, 0),
                };
                setVal(extraKeyframe, startVal);
                out.keyframes.push(extraKeyframe);
            }
            prevKf = kf;
        }
        if (kfsLen) {
            out.duration = context.frameTime * duration;
        }
        return out;
    }
    function parseOffsetKeyframe(kfs, targetPropName, propNames, keyframeAnimations, context, convertVal) {
        var _loop_1 = function (dimIndex) {
            var propName = propNames[dimIndex];
            var keyframeAnim = parseKeyframe(kfs, dimIndex, context, function (outKeyframe, startVal) {
                var val = getMultiDimensionValue(startVal, dimIndex);
                if (convertVal) {
                    val = convertVal(val);
                }
                (targetPropName
                    ? (outKeyframe[targetPropName] = {})
                    : outKeyframe)[propName] = val;
            });
            // moving position around a curved path
            var needOffsetPath = kfs.some(function (kf) { return kf.ti && kf.to; });
            if (needOffsetPath) {
                var offsetPath_1 = [];
                kfs.forEach(function (kf, i) {
                    keyframeAnim.keyframes[i].offsetPath = offsetPath_1;
                    // convert to & ti(Tangent for values (eg: moving position around a curved path)) to offsetPath & offsetDistance
                    // @see https://lottiefiles.github.io/lottie-docs/concepts/#animated-position
                    if (kf.ti && kf.to) {
                        if (i === 0) {
                            offsetPath_1.push(['M', kf.s[0], kf.s[1]]);
                        }
                        keyframeAnim.keyframes[i].segmentLength = getTotalLength(offsetPath_1);
                        // @see https://lottiefiles.github.io/lottie-docs/concepts/#bezier
                        // The nth bezier segment is defined as:
                        // v[n], v[n]+o[n], v[n+1]+i[n+1], v[n+1]
                        offsetPath_1.push([
                            'C',
                            kf.s[0] + kf.to[0],
                            kf.s[1] + kf.to[1],
                            kf.s[0] + kf.ti[0],
                            kf.s[1] + kf.ti[1],
                            kf.e[0],
                            kf.e[1],
                        ]);
                    }
                });
                // calculate offsetDistance: segmentLength / totalLength
                var totalLength_1 = getTotalLength(offsetPath_1);
                keyframeAnim.keyframes.forEach(function (kf) {
                    kf.offsetDistance = isNil(kf.segmentLength)
                        ? 1
                        : kf.segmentLength / totalLength_1;
                    delete kf.segmentLength;
                });
            }
            if (keyframeAnim.keyframes.length) {
                keyframeAnimations.push(keyframeAnim);
            }
        };
        for (var dimIndex = 0; dimIndex < propNames.length; dimIndex++) {
            _loop_1(dimIndex);
        }
    }
    function parseColorOffsetKeyframe(kfs, targetPropName, propName, keyframeAnimations, context) {
        var keyframeAnim = parseKeyframe(kfs, 0, context, function (outKeyframe, startVal) {
            (targetPropName
                ? (outKeyframe[targetPropName] = {})
                : outKeyframe)[propName] = toColorString(startVal);
        });
        if (keyframeAnim.keyframes.length) {
            keyframeAnimations.push(keyframeAnim);
        }
    }
    function parseValue(lottieVal, attrs, targetPropName, propNames, animations, context, convertVal) {
        if (targetPropName) {
            attrs[targetPropName] = attrs[targetPropName] || {};
        }
        var target = targetPropName ? attrs[targetPropName] : attrs;
        if (isValue(lottieVal)) {
            var val = lottieVal.k;
            target[propNames[0]] = convertVal ? convertVal(val) : val;
        }
        else if (isKeyframedValue(lottieVal)) {
            parseOffsetKeyframe(lottieVal.k, targetPropName, propNames, animations, context, convertVal);
        }
        else if (isMultiDimensionalValue(lottieVal)) {
            for (var i = 0; i < propNames.length; i++) {
                var val = getMultiDimensionValue(lottieVal.k, i);
                target[propNames[i]] = convertVal ? convertVal(val) : val;
            }
        }
        else if (isMultiDimensionalKeyframedValue(lottieVal)) {
            // TODO Merge dimensions
            parseOffsetKeyframe(lottieVal.k, targetPropName, propNames, animations, context, convertVal);
        }
    }
    /**
     * @see https://lottiefiles.github.io/lottie-docs/concepts/#transform
     */
    function parseTransforms(ks, attrs, animations, context, targetProp, transformProps) {
        if (targetProp === void 0) { targetProp = ''; }
        if (transformProps === void 0) { transformProps = {
            x: 'x',
            y: 'y',
            rotation: 'rotation',
            scaleX: 'scaleX',
            scaleY: 'scaleY',
            anchorX: 'anchorX',
            anchorY: 'anchorY',
            skew: 'skew',
            skewAxis: 'skewAxis',
        }; }
        // @see https://lottiefiles.github.io/lottie-docs/concepts/#split-vector
        if (ks.p.s) {
            parseValue(ks.p.x, attrs, targetProp, [transformProps.x], animations, context);
            parseValue(ks.p.y, attrs, targetProp, [transformProps.y], animations, context);
        }
        else {
            parseValue(ks.p, attrs, targetProp, [transformProps.x, transformProps.y], animations, context);
        }
        parseValue(ks.s, attrs, targetProp, [transformProps.scaleX, transformProps.scaleY], animations, context, function (val) { return val / 100; });
        parseValue(ks.r, attrs, targetProp, [transformProps.rotation], animations, context);
        parseValue(ks.a, attrs, targetProp, [transformProps.anchorX, transformProps.anchorY], animations, context);
        parseValue(ks.sk, attrs, targetProp, [transformProps.skew], animations, context);
        parseValue(ks.sa, attrs, targetProp, [transformProps.skewAxis], animations, context);
    }
    function isGradientFillOrStroke(fl) {
        return fl.g && fl.s && fl.e;
    }
    function convertColorStops(arr, count) {
        var colorStops = [];
        for (var i = 0; i < count * 4;) {
            var offset = arr[i++];
            var r = Math.round(arr[i++] * 255);
            var g = Math.round(arr[i++] * 255);
            var b = Math.round(arr[i++] * 255);
            colorStops.push({
                offset: offset,
                color: "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")"),
            });
        }
        return colorStops;
    }
    function joinColorStops(colorStops) {
        return "".concat(colorStops
            .map(function (_a) {
            var offset = _a.offset, color = _a.color;
            return "".concat(color, " ").concat(offset * 100, "%");
        })
            .join(', '));
    }
    /**
     * TODO:
     * * Transition
     * * Highlight length & angle in Radial Gradient
     *
     * @see https://lottiefiles.github.io/lottie-docs/concepts/#gradients
     * @see https://lottiefiles.github.io/lottie-docs/shapes/#gradients
     */
    function parseGradient$2(shape) {
        var colorArr = shape.g.k.k;
        var colorStops = convertColorStops(colorArr, shape.g.p);
        // @see https://lottiefiles.github.io/lottie-docs/constants/#gradienttype
        if (shape.t === GradientType$1.Linear) {
            var angle = rad2deg(Math.atan2(shape.e.k[1] - shape.s.k[1], shape.e.k[0] - shape.s.k[0]));
            // @see https://g-next.antv.vision/zh/docs/api/css/css-properties-values-api#linear-gradient
            return "linear-gradient(".concat(angle, "deg, ").concat(joinColorStops(colorStops), ")");
        }
        else if (shape.t === GradientType$1.Radial) {
            // TODO: highlight length & angle (h & a)
            // Highlight Length, as a percentage between s and e
            // Highlight Angle, relative to the direction from s to e
            var size = distanceSquareRoot(shape.e.k, shape.s.k);
            // @see https://g-next.antv.vision/zh/docs/api/css/css-properties-values-api#radial-gradient
            return "radial-gradient(circle ".concat(size, "px at ").concat(shape.s.k[0], "px ").concat(shape.s.k[1], "px, ").concat(joinColorStops(colorStops), ")");
        }
        else {
            // Invalid gradient
            return '#000';
        }
    }
    function parseFill(fl, attrs, animations, context) {
        attrs.style = attrs.style || {};
        // Color
        if (isGradientFillOrStroke(fl)) {
            attrs.style.fill = parseGradient$2(fl);
        }
        else {
            if (isMultiDimensionalValue(fl.c)) {
                attrs.style.fill = toColorString(fl.c.k);
            }
            else if (isMultiDimensionalKeyframedValue(fl.c)) {
                parseColorOffsetKeyframe(fl.c.k, 'style', 'fill', animations, context);
            }
        }
        // FillRule @see https://lottiefiles.github.io/lottie-docs/constants/#fillrule
        attrs.style.fillRule =
            fl.r === FillRule.EvenOdd ? 'evenodd' : 'nonzero';
        // Opacity
        parseValue(fl.o, attrs, 'style', ['fillOpacity'], animations, context, function (opacity) { return opacity / 100; });
    }
    function parseStroke(st, attrs, animations, context) {
        attrs.style = attrs.style || {};
        // Color
        if (isGradientFillOrStroke(st)) {
            attrs.style.stroke = parseGradient$2(st);
        }
        else {
            if (isMultiDimensionalValue(st.c)) {
                attrs.style.stroke = toColorString(st.c.k);
            }
            else if (isMultiDimensionalKeyframedValue(st.c)) {
                parseColorOffsetKeyframe(st.c.k, 'style', 'stroke', animations, context);
            }
        }
        // Opacity
        parseValue(st.o, attrs, 'style', ['strokeOpacity'], animations, context, function (opacity) { return opacity / 100; });
        // Line width
        parseValue(st.w, attrs, 'style', ['lineWidth'], animations, context);
        switch (st.lj) {
            case LineJoin.Bevel:
                attrs.style.lineJoin = 'bevel';
                break;
            case LineJoin.Round:
                attrs.style.lineJoin = 'round';
                break;
            case LineJoin.Miter:
                attrs.style.lineJoin = 'miter';
                break;
        }
        switch (st.lc) {
            case LineCap.Butt:
                attrs.style.lineCap = 'butt';
                break;
            case LineCap.Round:
                attrs.style.lineCap = 'round';
                break;
            case LineCap.Square:
                attrs.style.lineCap = 'square';
                break;
        }
        // Line dash
        var dashArray = [];
        var dashOffset = 0;
        if (st.d) {
            st.d.forEach(function (item) {
                if (item.n !== 'o') {
                    dashArray.push(item.v.k);
                }
                else {
                    dashOffset = item.v.k;
                }
            });
            attrs.style.lineDash = dashArray;
            attrs.style.lineDashOffset = dashOffset;
        }
    }
    function isBezier(k) {
        return k && k.i && k.o && k.v;
    }
    /**
     * @see https://lottiefiles.github.io/lottie-docs/shapes/#path
     */
    function parseShapePaths(shape, animations, context) {
        var attrs = {
            type: Shape.PATH,
            // Should have no fill and stroke by default
            style: {
                fill: 'none',
                stroke: 'none',
            },
        };
        // @see https://lottiefiles.github.io/lottie-docs/concepts/#bezier
        if (isBezier(shape.ks.k)) {
            attrs.shape = {
                in: shape.ks.k.i,
                out: shape.ks.k.o,
                v: shape.ks.k.v,
                close: shape.ks.k.c,
            };
        }
        else if (Array.isArray(shape.ks.k)) {
            var keyframeAnim = parseKeyframe(shape.ks.k, 0, context, function (outKeyframe, startVal) {
                outKeyframe.shape = {
                    in: startVal[0].i,
                    out: startVal[0].o,
                    v: startVal[0].v,
                    close: startVal[0].c,
                };
            });
            if (keyframeAnim.keyframes.length) {
                animations.push(keyframeAnim);
            }
        }
        return attrs;
    }
    /**
     * @see https://lottiefiles.github.io/lottie-docs/shapes/#rectangle
     */
    function parseShapeRect(shape, animations, context) {
        var attrs = {
            type: Shape.RECT,
            // Should have no fill and stroke by default
            style: {
                fill: 'none',
                stroke: 'none',
            },
            shape: {},
        };
        parseValue(shape.p, attrs, 'shape', ['x', 'y'], animations, context);
        parseValue(shape.s, attrs, 'shape', ['width', 'height'], animations, context);
        parseValue(shape.r, attrs, 'shape', ['r'], animations, context);
        return attrs;
    }
    /**
     * @see https://lottiefiles.github.io/lottie-docs/layers/#image-layer
     */
    function parseImageLayer(layer, context) {
        var attrs = {
            type: Shape.IMAGE,
            style: {},
            shape: {
                width: 0,
                height: 0,
                src: '',
            },
        };
        var asset = context.assetsMap.get(layer.refId);
        if (asset) {
            attrs.shape.width = asset.w;
            attrs.shape.height = asset.h;
            // TODO: url to fetch
            attrs.shape.src = asset.p;
        }
        return attrs;
    }
    /**
     * @see https://lottiefiles.github.io/lottie-docs/shapes/#ellipse
     */
    function parseShapeEllipse(shape, animations, context) {
        var attrs = {
            type: Shape.ELLIPSE,
            // Should have no fill and stroke by default
            style: {
                fill: 'none',
                stroke: 'none',
            },
            shape: {},
        };
        parseValue(shape.p, attrs, 'shape', ['cx', 'cy'], animations, context);
        parseValue(shape.s, attrs, 'shape', ['rx', 'ry'], animations, context, function (val) { return val / 2; });
        return attrs;
    }
    function parseShapeLayer(layer, context) {
        function tryCreateShape(shape, keyframeAnimations) {
            var ecEl;
            // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
            switch (shape.ty) {
                case ShapeType.Path:
                    ecEl = parseShapePaths(shape, keyframeAnimations, context);
                    break;
                case ShapeType.Ellipse:
                    ecEl = parseShapeEllipse(shape, keyframeAnimations, context);
                    break;
                case ShapeType.Rectangle:
                    ecEl = parseShapeRect(shape, keyframeAnimations, context);
                    break;
                case ShapeType.PolyStar:
                    // TODO: parseShapePolyStar
                    break;
            }
            return ecEl;
        }
        function parseModifiers(shapes, modifiers) {
            shapes.forEach(function (shape) {
                if (shape.hd) {
                    return;
                }
                // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
                switch (shape.ty) {
                    case ShapeType.Repeater:
                        parseValue(shape.c, modifiers.attrs, 'shape', ['repeat'], modifiers.keyframeAnimations, context);
                        parseTransforms(shape.tr, modifiers.attrs, modifiers.keyframeAnimations, context, 'shape', {
                            x: 'repeatX',
                            y: 'repeatY',
                            rotation: 'repeatRot',
                            scaleX: 'repeatScaleX',
                            scaleY: 'repeatScaleY',
                            anchorX: 'repeatAnchorX',
                            anchorY: 'repeatAnchorY',
                            skew: 'repeatSkew',
                            skewAxis: 'repeatSkewAxis',
                        });
                        break;
                    case ShapeType.Trim:
                        parseValue(shape.s, modifiers.attrs, 'shape', ['trimStart'], modifiers.keyframeAnimations, context);
                        parseValue(shape.e, modifiers.attrs, 'shape', ['trimEnd'], modifiers.keyframeAnimations, context);
                        break;
                }
            });
        }
        function parseIterations(shapes, modifiers) {
            var ecEls = [];
            var attrs = {};
            var keyframeAnimations = [];
            // Order is reversed
            shapes = shapes.slice().reverse();
            // Modifiers first:
            parseModifiers(shapes, modifiers);
            shapes.forEach(function (shape) {
                if (shape.hd) {
                    return;
                }
                var ecEl;
                switch (shape.ty) {
                    case ShapeType.Group:
                        ecEl = {
                            type: Shape.GROUP,
                            children: parseIterations(shape.it, 
                            // Modifiers will be applied to all childrens.
                            modifiers),
                        };
                        break;
                    // TODO Multiple fill and stroke
                    case ShapeType.Fill:
                    case ShapeType.GradientFill:
                        parseFill(shape, attrs, keyframeAnimations, context);
                        break;
                    case ShapeType.Stroke:
                    case ShapeType.GradientStroke:
                        parseStroke(shape, attrs, keyframeAnimations, context);
                        break;
                    case ShapeType.Transform:
                        parseTransforms(shape, attrs, keyframeAnimations, context);
                        break;
                    // TODO Multiple shapes.
                    default:
                        ecEl = tryCreateShape(shape, keyframeAnimations);
                }
                if (ecEl) {
                    ecEl.name = shape.nm;
                    ecEls.push(ecEl);
                }
            });
            ecEls.forEach(function (el, idx) {
                // Apply modifiers first
                el = __assign(__assign(__assign({}, el), definedProps(modifiers.attrs)), attrs);
                if (keyframeAnimations.length || modifiers.keyframeAnimations.length) {
                    el.keyframeAnimation = __spreadArray(__spreadArray([], __read(modifiers.keyframeAnimations), false), __read(keyframeAnimations), false);
                }
                ecEls[idx] = el;
            });
            return ecEls;
        }
        return {
            type: Shape.GROUP,
            children: parseIterations(layer.shapes, {
                attrs: {},
                keyframeAnimations: [],
            }),
        };
    }
    function traverse(el, cb) {
        var _a;
        cb(el);
        if (el.type === Shape.GROUP) {
            (_a = el.children) === null || _a === void 0 ? void 0 : _a.forEach(function (child) {
                traverse(child, cb);
            });
        }
    }
    function addLayerOpacity(layer, layerGroup, context) {
        var _a, _b;
        var opacityAttrs = {};
        var opacityAnimations = [];
        if ((_a = layer.ks) === null || _a === void 0 ? void 0 : _a.o) {
            parseValue(layer.ks.o, opacityAttrs, 'style', ['opacity'], opacityAnimations, context, function (val) { return val / 100; });
            if (((_b = opacityAttrs.style) === null || _b === void 0 ? void 0 : _b.opacity) || opacityAnimations.length) {
                // apply opacity to group's children
                traverse(layerGroup, function (el) {
                    if (el.type !== Shape.GROUP && el.style) {
                        Object.assign(el.style, opacityAttrs.style);
                        if (opacityAnimations.length) {
                            el.keyframeAnimation = (el.keyframeAnimation || []).concat(opacityAnimations);
                        }
                    }
                });
            }
        }
    }
    function parseSolidShape(layer) {
        return {
            type: Shape.RECT,
            shape: {
                x: 0,
                y: 0,
                width: layer.sw,
                height: layer.sh,
            },
            style: {
                fill: layer.sc,
            },
        };
    }
    function parseLayers(layers, context, precompLayerTl) {
        var elements = [];
        // Order is reversed
        layers = layers.slice().reverse();
        var layerIndexMap = new Map();
        var offsetTime = (precompLayerTl === null || precompLayerTl === void 0 ? void 0 : precompLayerTl.st) || 0;
        layers === null || layers === void 0 ? void 0 : layers.forEach(function (layer) {
            // Layer time is offseted by the precomp layer.
            var _a, _b;
            // Use the ip, op, st of ref from.
            var layerIp = offsetTime + layer.ip;
            var layerOp = offsetTime + layer.op;
            var layerSt = offsetTime + layer.st;
            context.layerOffsetTime = offsetTime;
            var layerGroup;
            // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
            switch (layer.ty) {
                case LayerType.shape:
                    // @see https://lottiefiles.github.io/lottie-docs/layers/#shape-layer
                    layerGroup = parseShapeLayer(layer, context);
                    break;
                case LayerType.null:
                    // @see https://lottiefiles.github.io/lottie-docs/layers/#null-layer
                    layerGroup = {
                        type: Shape.GROUP,
                        children: [],
                    };
                    break;
                case LayerType.solid:
                    // @see https://lottiefiles.github.io/lottie-docs/layers/#solid-color-layer
                    layerGroup = {
                        type: Shape.GROUP,
                        children: [],
                    };
                    // Anything you can do with solid layers, you can do better with a shape layer and a rectangle shape
                    // since none of this layer's own properties can be animated.
                    if (layer.sc) {
                        layerGroup.children.push(parseSolidShape(layer));
                    }
                    break;
                case LayerType.precomp:
                    // @see https://lottiefiles.github.io/lottie-docs/layers/#precomposition-layer
                    layerGroup = {
                        type: Shape.GROUP,
                        children: parseLayers(((_a = context.assetsMap.get(layer.refId)) === null || _a === void 0 ? void 0 : _a.layers) || [], context, {
                            st: layerSt,
                        }),
                    };
                    break;
                case LayerType.text:
                    // TODO: https://lottiefiles.github.io/lottie-docs/layers/#text-layer
                    break;
                case LayerType.image:
                    // TODO: https://lottiefiles.github.io/lottie-docs/layers/#image-layer
                    layerGroup = layerGroup = {
                        type: Shape.GROUP,
                        children: [parseImageLayer(layer, context)],
                    };
                    break;
            }
            if (layerGroup) {
                var keyframeAnimations = [];
                var attrs = {
                    name: layer.nm,
                };
                if (layer.ks) {
                    parseTransforms(layer.ks, attrs, keyframeAnimations, context);
                }
                Object.assign(layerGroup, attrs);
                if (layer.ind != null) {
                    layerIndexMap.set(layer.ind, layerGroup);
                }
                layerGroup.extra = {
                    layerParent: layer.parent,
                };
                // Masks @see https://lottiefiles.github.io/lottie-docs/layers/#masks
                // @see https://lottie-animation-community.github.io/docs/specs/layers/common/#clipping-masks
                // TODO: not support alpha and other modes.
                // @see https://lottie-animation-community.github.io/docs/specs/properties/mask-mode-types/
                if (layer.hasMask && ((_b = layer.masksProperties) === null || _b === void 0 ? void 0 : _b.length)) {
                    var maskKeyframeAnimations = [];
                    // TODO: Only support one mask now.
                    var attrs_1 = parseShapePaths({
                        ks: layer.masksProperties[0].pt,
                    }, maskKeyframeAnimations, context);
                    layerGroup.clipPath = __assign({ type: Shape.PATH }, attrs_1);
                    if (maskKeyframeAnimations.length) {
                        layerGroup.clipPath.keyframeAnimation = maskKeyframeAnimations;
                    }
                }
                addLayerOpacity(layer, layerGroup, context);
                // Update in and out animation.
                if (layerIp != null &&
                    layerOp != null &&
                    (layerIp > context.startFrame || layerOp < context.endFrame)) {
                    var duration = context.endFrame - context.startFrame;
                    var visibilityStartOffset = (layerIp - context.startFrame) / duration;
                    var visibilityEndOffset = (layerOp - context.startFrame) / duration;
                    layerGroup.visibilityStartOffset = visibilityStartOffset;
                    layerGroup.visibilityEndOffset = visibilityEndOffset;
                    layerGroup.visibilityFrame = duration;
                }
                if (keyframeAnimations.length) {
                    layerGroup.keyframeAnimation = keyframeAnimations;
                }
                elements.push(layerGroup);
            }
        });
        // Build hierarchy
        return elements.filter(function (el) {
            var _a, _b;
            var parentLayer = layerIndexMap.get((_a = el.extra) === null || _a === void 0 ? void 0 : _a.layerParent);
            if (parentLayer) {
                (_b = parentLayer.children) === null || _b === void 0 ? void 0 : _b.push(el);
                return false;
            }
            return true;
        });
    }
    var DEFAULT_LOAD_ANIMATION_OPTIONS = {
        loop: true,
        autoplay: false,
        fill: 'both',
    };
    function parse(data, options) {
        var _a;
        completeData(data);
        var _b = __assign(__assign({}, DEFAULT_LOAD_ANIMATION_OPTIONS), options), loop = _b.loop, autoplay = _b.autoplay, fill = _b.fill;
        var context = new ParseContext();
        context.fps = data.fr || 30;
        context.frameTime = 1000 / context.fps;
        context.startFrame = data.ip;
        context.endFrame = data.op;
        context.version = data.v;
        context.autoplay = !!autoplay;
        context.fill = fill;
        context.iterations = isNumber(loop) ? loop : loop ? Infinity : 1;
        // @see https://lottiefiles.github.io/lottie-docs/assets/
        (_a = data.assets) === null || _a === void 0 ? void 0 : _a.forEach(function (asset) {
            context.assetsMap.set(asset.id, asset);
        });
        var elements = parseLayers(data.layers || [], context);
        return {
            width: data.w,
            height: data.h,
            elements: elements,
            context: context,
        };
    }

    /**
     * @see https://github.com/airbnb/lottie-web/wiki/loadAnimation-options
     * @see https://github.com/airbnb/lottie-web#other-loading-options
     */
    function loadAnimation(data, options) {
        var _a = parse(data, options), width = _a.width, height = _a.height, elements = _a.elements, context = _a.context;
        return new LottieAnimation(width, height, elements, context);
    }

    var Lottie = /** @class */function (_super) {
      __extends(Lottie, _super);
      function Lottie(props) {
        var _this = _super.call(this, props) || this;
        _this.addLottie = function () {
          var _a = _this,
            props = _a.props,
            context = _a.context;
          var data = props.data,
            options = props.options,
            play = props.play;
          var canvas = context.canvas;
          if (!data) return;
          // 文档流后挂载lottie
          canvas.ready.then(function () {
            _this.animation = _this.animation ? _this.animation : loadAnimation(data, options);
            _this.animation.render(_this.ref.current);
            _this.size = _this.animation.size();
            _this.updateSize();
            // 播放控制
            if (play) {
              var _a = play.speed,
                speed = _a === void 0 ? 1 : _a,
                _b = play.start,
                start = _b === void 0 ? 0 : _b,
                _c = play.end,
                end = _c === void 0 ? _this.animation.getDuration(true) : _c;
              _this.animation.setSpeed(speed);
              _this.animation.playSegments([start, end]);
            }
          });
        };
        _this.updateSize = function () {
          var _a = _this.size,
            currentWidth = _a.width,
            currentHeight = _a.height;
          var style = _this.props.style;
          if (!style) return;
          var _b = style.width,
            width = _b === void 0 ? currentWidth : _b,
            _c = style.height,
            height = _c === void 0 ? currentHeight : _c;
          _this.ref.current.scale(width / currentWidth, height / currentHeight);
          _this.size = {
            width: width,
            height: height
          };
        };
        _this.ref = createRef();
        return _this;
      }
      Lottie.prototype.didMount = function () {
        this.addLottie();
      };
      Lottie.prototype.willUpdate = function () {
        this.addLottie();
      };
      Lottie.prototype.render = function () {
        var _a = this.props,
          style = _a.style,
          animation = _a.animation;
        return jsx("group", {
          ref: this.ref,
          style: style,
          animation: animation
        });
      };
      return Lottie;
    }(Component);

    var defaultProps$2 = {
      offsetX: 0,
      offsetY: 0,
      points: [],
      data: '',
      animation: null,
      options: {
        loop: true,
        autoplay: true
      }
    };
    var LottieGuideView = (function (props, context) {
      var cfg = deepMix({}, defaultProps$2, props);
      var points = cfg.points,
        style = cfg.style,
        offsetX = cfg.offsetX,
        offsetY = cfg.offsetY,
        lottieJson = cfg.lottieJson,
        animation = cfg.animation,
        options = cfg.options;
      var _a = points[0] || {},
        x = _a.x,
        y = _a.y;
      if (isNaN(x) || isNaN(y)) return null;
      var _b = style.height,
        height = _b === void 0 ? 0 : _b,
        _c = style.width,
        width = _c === void 0 ? 0 : _c;
      var offsetXNum = context.px2hd(offsetX);
      var offsetYNum = context.px2hd(offsetY);
      var posX = x + (offsetXNum || 0) - width / 2;
      var posY = y + (offsetYNum || 0) - height / 2;
      return jsx(Lottie, {
        data: lottieJson,
        options: options,
        style: {
          x: posX,
          y: posY,
          width: width,
          height: height
        },
        animation: deepMix({
          update: {
            easing: 'linear',
            duration: 450,
            property: ['x', 'y']
          }
        }, animation)
      });
    });

    var PolylineGuideView = (function (props, context) {
      var _a = props.theme,
        theme = _a === void 0 ? {} : _a;
      var _b = deepMix(__assign({}, theme.polyline), props),
        points = _b.points,
        style = _b.style,
        offsetX = _b.offsetX,
        offsetY = _b.offsetY,
        animation = _b.animation;
      var checkNaN = points.some(function (d) {
        return isNaN(d.x) || isNaN(d.y);
      });
      if (checkNaN) return;
      var offsetXNum = context.px2hd(offsetX);
      var offsetYNum = context.px2hd(offsetY);
      return jsx("group", null, jsx("polyline", {
        style: __assign({
          points: points.map(function (point) {
            return [point.x + offsetXNum, point.y + offsetYNum];
          })
        }, style),
        animation: animation
      }));
    });

    var DefaultGuideView = function DefaultGuideView() {
      return null;
    };
    var TextGuide = withGuide(TextGuideView);
    var PointGuide = withGuide(PointGuideView);
    var LineGuide = withGuide(LineGuideView);
    var ArcGuide = withGuide(ArcGuideView);
    var RectGuide = withGuide(RectGuideView);
    var ImageGuide = withGuide(ImageGuideView);
    var TagGuide = withGuide(Tag);
    var LottieGuide = withGuide(LottieGuideView);
    var PolylineGuide = withGuide(PolylineGuideView);
    var index$6 = withGuide(DefaultGuideView);

    var withTooltip = (function (View) {
      return /** @class */function (_super) {
        __extends(Tooltip, _super);
        function Tooltip(props) {
          var _this = _super.call(this, props) || this;
          _this._triggerOn = function (ev) {
            var x = ev.x,
              y = ev.y;
            _this.show({
              x: x,
              y: y
            }, ev);
          };
          _this._triggerOff = function () {
            var _a = _this.props.alwaysShow,
              alwaysShow = _a === void 0 ? false : _a;
            if (!alwaysShow) {
              _this.hide();
            }
          };
          _this.state = {
            records: null
          };
          return _this;
        }
        Tooltip.prototype.updateCoord = function () {
          var _a = this,
            props = _a.props,
            context = _a.context;
          var _b = props.padding,
            padding = _b === void 0 ? '10px' : _b,
            chart = props.chart;
          chart.updateCoordFor(this, {
            position: 'top',
            width: 0,
            height: context.px2hd(padding)
          });
        };
        Tooltip.prototype.willMount = function () {
          this.updateCoord();
        };
        Tooltip.prototype.didMount = function () {
          this._initShow();
          this._initEvent();
        };
        Tooltip.prototype._initEvent = function () {
          var _a = this.props,
            chart = _a.chart,
            _b = _a.triggerOn,
            triggerOn = _b === void 0 ? 'press' : _b,
            _c = _a.triggerOff,
            triggerOff = _c === void 0 ? 'pressend' : _c;
          chart.on(triggerOn, this._triggerOn);
          chart.on(triggerOff, this._triggerOff);
        };
        Tooltip.prototype.willReceiveProps = function (nextProps) {
          var nextDefaultItem = nextProps.defaultItem,
            nextCoord = nextProps.coord;
          var _a = this.props,
            lastDefaultItem = _a.defaultItem,
            lastCoord = _a.coord;
          // 默认元素或坐标有变动，均需重新渲染
          if (!equal(nextDefaultItem, lastDefaultItem) || !equal(nextCoord, lastCoord)) {
            this._showByData(nextDefaultItem);
          }
        };
        Tooltip.prototype._initShow = function () {
          var props = this.props;
          var defaultItem = props.defaultItem;
          this._showByData(defaultItem);
        };
        Tooltip.prototype._showByData = function (dataItem) {
          var _this = this;
          if (!dataItem) return;
          var props = this.props;
          var chart = props.chart;
          // 因为 tooltip 有可能在 geometry 之前，所以需要等 geometry render 完后再执行
          setTimeout(function () {
            var snapRecords = chart.getRecords(dataItem, 'xfield');
            _this.showSnapRecords(snapRecords);
          }, 0);
        };
        Tooltip.prototype.show = function (point, _ev) {
          var props = this.props;
          var chart = props.chart;
          var snapRecords = chart.getSnapRecords(point, true); // 超出边界会自动调整
          if (!snapRecords || !snapRecords.length) return;
          this.showSnapRecords(snapRecords);
        };
        Tooltip.prototype.showSnapRecords = function (snapRecords) {
          var _a = this.props,
            chart = _a.chart,
            onChange = _a.onChange;
          var legendItems = chart.getLegendItems();
          var _b = snapRecords[0],
            xField = _b.xField,
            yField = _b.yField;
          var xScale = chart.getScale(xField);
          var yScale = chart.getScale(yField);
          var records = snapRecords.map(function (record) {
            var origin = record.origin,
              xField = record.xField,
              yField = record.yField;
            var value = isArray(origin[yField]) ? origin[yField].map(function (v) {
              return yScale.getText(v);
            }) : yScale.getText(origin[yField]);
            // 默认取 alias 的配置
            var name = yScale.alias;
            if (!name) {
              name = xScale.getText(origin[xField]);
              if (legendItems && legendItems.length) {
                var item = find(legendItems, function (item) {
                  var field = item.field,
                    tickValue = item.tickValue;
                  return origin[field] === tickValue;
                });
                if (item && item.name) {
                  name = item.name;
                }
              }
            }
            return __assign(__assign({}, record), {
              name: name,
              value: "".concat(value)
            });
          });
          if (!isArray(records) || !records.length) {
            return;
          }
          this.setState({
            records: records
          });
          if (isFunction(onChange)) {
            onChange(records);
          }
        };
        Tooltip.prototype.hide = function () {
          this.setState({
            records: null
          });
        };
        Tooltip.prototype.render = function () {
          var _a = this,
            props = _a.props,
            state = _a.state;
          var visible = props.visible;
          if (visible === false) {
            return null;
          }
          var records = state.records;
          return records && records.length && jsx(View, __assign({}, props, {
            records: records
          }));
        };
        return Tooltip;
      }(Component);
    });

    // view 的默认配置
    var defaultStyle$1 = {
      showTitle: false,
      showCrosshairs: false,
      crosshairsType: 'y',
      crosshairsStyle: {
        stroke: 'rgba(0, 0, 0, 0.25)',
        lineWidth: '2px'
      },
      showTooltipMarker: false,
      markerBackgroundStyle: {
        fill: '#CCD6EC',
        opacity: 0.3,
        padding: '6px'
      },
      tooltipMarkerStyle: {
        fill: '#fff',
        lineWidth: '3px'
      },
      background: {
        radius: '4px',
        fill: 'rgba(0, 0, 0, 0.65)',
        padding: ['6px', '10px']
      },
      titleStyle: {
        fontSize: '24px',
        fill: '#fff',
        textAlign: 'start',
        textBaseline: 'top'
      },
      nameStyle: {
        fontSize: '24px',
        fill: 'rgba(255, 255, 255, 0.65)',
        textAlign: 'start',
        textBaseline: 'middle'
      },
      valueStyle: {
        fontSize: '24px',
        fill: '#fff',
        textAlign: 'start',
        textBaseline: 'middle'
      },
      joinString: ': ',
      showItemMarker: true,
      itemMarkerStyle: {
        width: '12px',
        radius: '6px',
        symbol: 'circle',
        lineWidth: '2px',
        stroke: '#fff'
      },
      layout: 'horizontal',
      snap: false,
      xTipTextStyle: {
        fontSize: '24px',
        fill: '#fff'
      },
      yTipTextStyle: {
        fontSize: '24px',
        fill: '#fff'
      },
      xTipBackground: {
        radius: '4px',
        fill: 'rgba(0, 0, 0, 0.65)',
        padding: ['6px', '10px'],
        marginLeft: '-50%',
        marginTop: '6px'
      },
      yTipBackground: {
        radius: '4px',
        fill: 'rgba(0, 0, 0, 0.65)',
        padding: ['6px', '10px'],
        marginLeft: '-100%',
        marginTop: '-50%'
      }
    };
    function directionEnabled(mode, dir) {
      if (mode === undefined) {
        return true;
      } else if (typeof mode === 'string') {
        return mode.indexOf(dir) !== -1;
      }
      return false;
    }
    var RenderItemMarker = function RenderItemMarker(props) {
      var records = props.records,
        coord = props.coord,
        context = props.context,
        markerBackgroundStyle = props.markerBackgroundStyle;
      var point = coord.convertPoint({
        x: 1,
        y: 1
      });
      var padding = context.px2hd(markerBackgroundStyle.padding || '6px');
      var xPoints = __spreadArray(__spreadArray([], records.map(function (record) {
        return record.xMin;
      }), true), records.map(function (record) {
        return record.xMax;
      }), true);
      var yPoints = __spreadArray(__spreadArray([], records.map(function (record) {
        return record.yMin;
      }), true), records.map(function (record) {
        return record.yMax;
      }), true);
      if (coord.transposed) {
        xPoints.push(point.x);
      } else {
        yPoints.push(point.y);
      }
      var xMin = Math.min.apply(null, xPoints);
      var xMax = Math.max.apply(null, xPoints);
      var yMin = Math.min.apply(null, yPoints);
      var yMax = Math.max.apply(null, yPoints);
      var x = coord.transposed ? xMin : xMin - padding;
      var y = coord.transposed ? yMin - padding : yMin;
      var width = coord.transposed ? xMax - xMin : xMax - xMin + 2 * padding;
      var height = coord.transposed ? yMax - yMin + 2 * padding : yMax - yMin;
      return jsx("rect", {
        style: __assign({
          x: x,
          y: y,
          width: width,
          height: height
        }, markerBackgroundStyle)
      });
    };
    var RenderCrosshairs = function RenderCrosshairs(props) {
      var records = props.records,
        coord = props.coord,
        chart = props.chart,
        crosshairsType = props.crosshairsType,
        crosshairsStyle = props.crosshairsStyle,
        xPositionType = props.xPositionType,
        yPositionType = props.yPositionType;
      var coordLeft = coord.left,
        coordTop = coord.top,
        coordRight = coord.right,
        coordBottom = coord.bottom,
        center = coord.center;
      var firstRecord = records[0];
      var x = firstRecord.x,
        y = firstRecord.y,
        origin = firstRecord.origin,
        xField = firstRecord.xField,
        coordData = firstRecord.coord;
      if (coord.isPolar) {
        // 极坐标下的辅助线
        var xScale = chart.getScale(xField);
        var ticks = xScale.getTicks();
        var tick = find(ticks, function (tick) {
          return origin[xField] === tick.tickValue;
        });
        var end = coord.convertPoint({
          x: tick.value,
          y: 1
        });
        return jsx("line", {
          style: __assign({
            x1: center.x,
            y1: center.y,
            x2: end.x,
            y2: end.y
          }, crosshairsStyle)
        });
      }
      return jsx("group", null, directionEnabled(crosshairsType, 'x') ? jsx("line", {
        style: __assign({
          x1: coordLeft,
          y1: yPositionType === 'coord' ? coordData.y : y,
          x2: coordRight,
          y2: yPositionType === 'coord' ? coordData.y : y
        }, crosshairsStyle)
      }) : null, directionEnabled(crosshairsType, 'y') ? jsx("line", {
        style: __assign({
          x1: xPositionType === 'coord' ? coordData.x : x,
          y1: coordTop,
          x2: xPositionType === 'coord' ? coordData.x : x,
          y2: coordBottom
        }, crosshairsStyle)
      }) : null);
    };
    var RenderXTip = function RenderXTip(props) {
      var records = props.records,
        coord = props.coord,
        xTip = props.xTip,
        xPositionType = props.xPositionType,
        xTipTextStyle = props.xTipTextStyle,
        xTipBackground = props.xTipBackground;
      var coordBottom = coord.bottom;
      var firstRecord = records[0];
      var x = firstRecord.x,
        coordData = firstRecord.coord;
      var xFirstText = firstRecord.name;
      return jsx("rect", {
        style: __assign({
          display: 'flex',
          left: xPositionType === 'coord' ? coordData.x : x,
          top: coordBottom
        }, xTipBackground)
      }, jsx("text", {
        style: __assign(__assign({}, xTipTextStyle), {
          text: xPositionType === 'coord' ? coordData.xText : isFunction(xTip) ? xTip(xFirstText, firstRecord) : xFirstText
        })
      }));
    };
    var RenderYTip = function RenderYTip(props) {
      var records = props.records,
        coord = props.coord,
        yTip = props.yTip,
        yPositionType = props.yPositionType,
        yTipTextStyle = props.yTipTextStyle,
        yTipBackground = props.yTipBackground;
      var coordLeft = coord.left;
      var firstRecord = records[0];
      var y = firstRecord.y,
        coordData = firstRecord.coord;
      var yFirstText = firstRecord.value;
      return jsx("rect", {
        style: __assign({
          display: 'flex',
          left: coordLeft,
          top: yPositionType === 'coord' ? coordData.y : y
        }, yTipBackground)
      }, jsx("text", {
        style: __assign(__assign({}, yTipTextStyle), {
          text: yPositionType === 'coord' ? coordData.yText : isFunction(yTip) ? yTip(yFirstText, firstRecord) : yFirstText
        })
      }));
    };
    // tooltip 内容框
    var RenderLabel = /** @class */function (_super) {
      __extends(RenderLabel, _super);
      function RenderLabel() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.style = {};
        return _this;
      }
      RenderLabel.prototype.getMaxItemBox = function (node) {
        var maxItemWidth = 0;
        var maxItemHeight = 0;
        (node.children || []).forEach(function (child) {
          var layout = child.layout;
          var width = layout.width,
            height = layout.height;
          maxItemWidth = Math.max(maxItemWidth, width);
          maxItemHeight = Math.max(maxItemHeight, height);
        });
        return {
          width: maxItemWidth,
          height: maxItemHeight
        };
      };
      RenderLabel.prototype._getContainerLayout = function () {
        var _a = this.props,
          records = _a.records,
          coord = _a.coord;
        if (!records || !records.length) return;
        var width = coord.width;
        var node = computeLayout$1(this, this.render());
        var itemMaxWidth = this.getMaxItemBox(node === null || node === void 0 ? void 0 : node.children[0]).width;
        // 每行最多的个数
        var lineMaxCount = Math.max(1, Math.floor(width / itemMaxWidth));
        var itemCount = records.length;
        // 是否需要换行
        if (itemCount > lineMaxCount) {
          this.style = {
            width: width
          };
        }
      };
      RenderLabel.prototype.willMount = function () {
        this._getContainerLayout();
      };
      RenderLabel.prototype.render = function () {
        var _this = this;
        var _a = this.props,
          records = _a.records,
          background = _a.background,
          showItemMarker = _a.showItemMarker,
          itemMarkerStyle = _a.itemMarkerStyle,
          customText = _a.customText,
          nameStyle = _a.nameStyle,
          valueStyle = _a.valueStyle,
          joinString = _a.joinString,
          arrowWidth = _a.arrowWidth,
          x = _a.x,
          coord = _a.coord,
          itemWidth = _a.itemWidth;
        // 显示内容
        var labelView = function labelView(left, top) {
          return jsx("group", {
            style: {
              display: 'flex'
            }
          }, jsx("group", {
            style: __assign(__assign({
              display: 'flex',
              flexDirection: 'row',
              flexWrap: 'wrap',
              padding: [0, 0, 0, '6px'],
              left: left,
              top: top
            }, _this.style), background)
          }, records.map(function (record) {
            var name = record.name,
              value = record.value;
            return jsx("group", {
              style: {
                display: 'flex',
                flexDirection: 'row',
                alignItems: 'center',
                padding: [0, '6px', 0, 0],
                width: itemWidth
              }
            }, showItemMarker ? jsx("marker", {
              style: __assign(__assign({
                width: itemMarkerStyle.width,
                marginRight: '6px'
              }, itemMarkerStyle), {
                fill: record.color
              })
            }) : null, customText && isFunction(customText) ? customText(record) : jsx("group", {
              style: {
                display: 'flex',
                flexDirection: 'row'
              }
            }, jsx("text", {
              style: __assign(__assign({}, nameStyle), {
                text: value ? "".concat(name).concat(joinString) : name
              })
            }), jsx("text", {
              style: __assign(__assign({}, valueStyle), {
                text: value
              })
            })));
          })), jsx("group", null, jsx("polygon", {
            style: {
              points: [[x - arrowWidth, top], [x + arrowWidth, top], [x, top + arrowWidth]],
              fill: background.fill
            }
          })));
        };
        // 计算显示位置
        var layout = computeLayout$1(this, labelView(0, 0)).layout; // 获取内容区大小
        var coordLeft = coord.left,
          coordTop = coord.top,
          coordRight = coord.right;
        var width = layout.width,
          height = layout.height;
        var halfWidth = width / 2;
        // 让 tooltip 限制在 coord 的显示范围内
        var advanceLeft = x - halfWidth;
        var advanceTop = coordTop - height;
        var left = advanceLeft < coordLeft ? coordLeft : advanceLeft > coordRight - width ? coordRight - width : advanceLeft;
        var top = advanceTop < 0 ? 0 : advanceTop;
        return labelView(left, top);
      };
      return RenderLabel;
    }(Component);
    var TooltipView = /** @class */function (_super) {
      __extends(TooltipView, _super);
      function TooltipView() {
        return _super !== null && _super.apply(this, arguments) || this;
      }
      TooltipView.prototype.render = function () {
        var _a = this,
          props = _a.props,
          context = _a.context;
        var records = props.records,
          coord = props.coord;
        var firstRecord = records[0];
        var x = firstRecord.x,
          coordData = firstRecord.coord;
        var chart = props.chart,
          customBackground = props.background,
          _b = props.showTooltipMarker,
          showTooltipMarker = _b === void 0 ? defaultStyle$1.showTooltipMarker : _b,
          _c = props.markerBackgroundStyle,
          markerBackgroundStyle = _c === void 0 ? defaultStyle$1.markerBackgroundStyle : _c,
          _d = props.showItemMarker,
          showItemMarker = _d === void 0 ? defaultStyle$1.showItemMarker : _d,
          customItemMarkerStyle = props.itemMarkerStyle,
          nameStyle = props.nameStyle,
          valueStyle = props.valueStyle,
          _e = props.joinString,
          joinString = _e === void 0 ? defaultStyle$1.joinString : _e,
          _f = props.showCrosshairs,
          showCrosshairs = _f === void 0 ? defaultStyle$1.showCrosshairs : _f,
          crosshairsStyle = props.crosshairsStyle,
          _g = props.crosshairsType,
          crosshairsType = _g === void 0 ? defaultStyle$1.crosshairsType : _g,
          _h = props.snap,
          snap = _h === void 0 ? defaultStyle$1.snap : _h,
          _j = props.tooltipMarkerStyle,
          tooltipMarkerStyle = _j === void 0 ? defaultStyle$1.tooltipMarkerStyle : _j,
          showXTip = props.showXTip,
          xPositionType = props.xPositionType,
          showYTip = props.showYTip,
          yPositionType = props.yPositionType,
          xTip = props.xTip,
          yTip = props.yTip,
          _k = props.xTipTextStyle,
          xTipTextStyle = _k === void 0 ? defaultStyle$1.xTipTextStyle : _k,
          _l = props.yTipTextStyle,
          yTipTextStyle = _l === void 0 ? defaultStyle$1.yTipTextStyle : _l,
          _m = props.xTipBackground,
          xTipBackground = _m === void 0 ? defaultStyle$1.xTipBackground : _m,
          _o = props.yTipBackground,
          yTipBackground = _o === void 0 ? defaultStyle$1.yTipBackground : _o,
          _p = props.custom,
          custom = _p === void 0 ? false : _p,
          customText = props.customText,
          itemWidth = props.itemWidth;
        var itemMarkerStyle = __assign(__assign({}, customItemMarkerStyle), defaultStyle$1.itemMarkerStyle);
        var background = __assign(__assign({}, defaultStyle$1.background), customBackground);
        var arrowWidth = context.px2hd('6px');
        return jsx("group", null, showTooltipMarker ? jsx(RenderItemMarker, {
          coord: coord,
          context: context,
          records: records,
          markerBackgroundStyle: markerBackgroundStyle
        }) : null, showCrosshairs ? jsx(RenderCrosshairs, {
          chart: chart,
          coord: coord,
          records: records,
          xPositionType: xPositionType,
          yPositionType: yPositionType,
          crosshairsType: crosshairsType,
          crosshairsStyle: __assign(__assign({}, defaultStyle$1.crosshairsStyle), crosshairsStyle)
        }) : null, snap ? records.map(function (item) {
          var x = item.x,
            y = item.y,
            color = item.color,
            shape = item.shape;
          return jsx("circle", {
            style: __assign(__assign({
              cx: xPositionType === 'coord' ? coordData.x : x,
              cy: yPositionType === 'coord' ? coordData.y : y,
              r: '6px',
              stroke: color,
              fill: color
            }, shape), tooltipMarkerStyle)
          });
        }) : null, showXTip && jsx(RenderXTip, {
          records: records,
          coord: coord,
          xTip: xTip,
          xPositionType: xPositionType,
          xTipTextStyle: __assign(__assign({}, defaultStyle$1.xTipTextStyle), xTipTextStyle),
          xTipBackground: __assign(__assign({}, defaultStyle$1.xTipBackground), xTipBackground)
        }), showYTip && jsx(RenderYTip, {
          records: records,
          coord: coord,
          yTip: yTip,
          yPositionType: yPositionType,
          yTipTextStyle: __assign(__assign({}, defaultStyle$1.yTipTextStyle), yTipTextStyle),
          yTipBackground: __assign(__assign({}, defaultStyle$1.yTipBackground), yTipBackground)
        }), !custom && jsx(RenderLabel, {
          records: records,
          coord: coord,
          itemMarkerStyle: itemMarkerStyle,
          customText: customText,
          showItemMarker: showItemMarker,
          x: x,
          arrowWidth: arrowWidth,
          background: background,
          nameStyle: __assign(__assign({}, defaultStyle$1.nameStyle), nameStyle),
          valueStyle: __assign(__assign({}, defaultStyle$1.valueStyle), valueStyle),
          joinString: joinString,
          itemWidth: itemWidth
        }));
      };
      return TooltipView;
    }(Component);

    var index$7 = withTooltip(TooltipView);

    var toPrimitive_1 = createCommonjsModule(function (module) {
    var _typeof = _typeof_1["default"];
    function toPrimitive(t, r) {
      if ("object" != _typeof(t) || !t) return t;
      var e = t[Symbol.toPrimitive];
      if (void 0 !== e) {
        var i = e.call(t, r || "default");
        if ("object" != _typeof(i)) return i;
        throw new TypeError("@@toPrimitive must return a primitive value.");
      }
      return ("string" === r ? String : Number)(t);
    }
    module.exports = toPrimitive, module.exports.__esModule = true, module.exports["default"] = module.exports;
    });

    var toPropertyKey_1 = createCommonjsModule(function (module) {
    var _typeof = _typeof_1["default"];

    function toPropertyKey(t) {
      var i = toPrimitive_1(t, "string");
      return "symbol" == _typeof(i) ? i : i + "";
    }
    module.exports = toPropertyKey, module.exports.__esModule = true, module.exports["default"] = module.exports;
    });

    var defineProperty = createCommonjsModule(function (module) {
    function _defineProperty(e, r, t) {
      return (r = toPropertyKey_1(r)) in e ? Object.defineProperty(e, r, {
        value: t,
        enumerable: !0,
        configurable: !0,
        writable: !0
      }) : e[r] = t, e;
    }
    module.exports = _defineProperty, module.exports.__esModule = true, module.exports["default"] = module.exports;
    });

    var _defineProperty = /*@__PURE__*/getDefaultExportFromCjs(defineProperty);

    function count(node) {
      var sum = 0,
        children = node.children,
        i = children && children.length;
      if (!i) sum = 1;else while (--i >= 0) sum += children[i].value;
      node.value = sum;
    }
    function node_count () {
      return this.eachAfter(count);
    }

    var arrayLikeToArray = createCommonjsModule(function (module) {
    function _arrayLikeToArray(r, a) {
      (null == a || a > r.length) && (a = r.length);
      for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
      return n;
    }
    module.exports = _arrayLikeToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
    });

    var unsupportedIterableToArray = createCommonjsModule(function (module) {
    function _unsupportedIterableToArray(r, a) {
      if (r) {
        if ("string" == typeof r) return arrayLikeToArray(r, a);
        var t = {}.toString.call(r).slice(8, -1);
        return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? arrayLikeToArray(r, a) : void 0;
      }
    }
    module.exports = _unsupportedIterableToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
    });

    var createForOfIteratorHelper = createCommonjsModule(function (module) {
    function _createForOfIteratorHelper(r, e) {
      var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
      if (!t) {
        if (Array.isArray(r) || (t = unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
          t && (r = t);
          var _n = 0,
            F = function F() {};
          return {
            s: F,
            n: function n() {
              return _n >= r.length ? {
                done: !0
              } : {
                done: !1,
                value: r[_n++]
              };
            },
            e: function e(r) {
              throw r;
            },
            f: F
          };
        }
        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 o,
        a = !0,
        u = !1;
      return {
        s: function s() {
          t = t.call(r);
        },
        n: function n() {
          var r = t.next();
          return a = r.done, r;
        },
        e: function e(r) {
          u = !0, o = r;
        },
        f: function f() {
          try {
            a || null == t["return"] || t["return"]();
          } finally {
            if (u) throw o;
          }
        }
      };
    }
    module.exports = _createForOfIteratorHelper, module.exports.__esModule = true, module.exports["default"] = module.exports;
    });

    var _createForOfIteratorHelper = /*@__PURE__*/getDefaultExportFromCjs(createForOfIteratorHelper);

    function node_each (callback, that) {
      var index = -1;
      var _iterator = _createForOfIteratorHelper(this),
        _step;
      try {
        for (_iterator.s(); !(_step = _iterator.n()).done;) {
          var node = _step.value;
          callback.call(that, node, ++index, this);
        }
      } catch (err) {
        _iterator.e(err);
      } finally {
        _iterator.f();
      }
      return this;
    }

    function node_eachBefore (callback, that) {
      var node = this,
        nodes = [node],
        children,
        i,
        index = -1;
      while (node = nodes.pop()) {
        callback.call(that, node, ++index, this);
        if (children = node.children) {
          for (i = children.length - 1; i >= 0; --i) {
            nodes.push(children[i]);
          }
        }
      }
      return this;
    }

    function node_eachAfter (callback, that) {
      var node = this,
        nodes = [node],
        next = [],
        children,
        i,
        n,
        index = -1;
      while (node = nodes.pop()) {
        next.push(node);
        if (children = node.children) {
          for (i = 0, n = children.length; i < n; ++i) {
            nodes.push(children[i]);
          }
        }
      }
      while (node = next.pop()) {
        callback.call(that, node, ++index, this);
      }
      return this;
    }

    function node_find (callback, that) {
      var index = -1;
      var _iterator = _createForOfIteratorHelper(this),
        _step;
      try {
        for (_iterator.s(); !(_step = _iterator.n()).done;) {
          var node = _step.value;
          if (callback.call(that, node, ++index, this)) {
            return node;
          }
        }
      } catch (err) {
        _iterator.e(err);
      } finally {
        _iterator.f();
      }
    }

    function node_sum (value) {
      return this.eachAfter(function (node) {
        var sum = +value(node.data) || 0,
          children = node.children,
          i = children && children.length;
        while (--i >= 0) sum += children[i].value;
        node.value = sum;
      });
    }

    function node_sort (compare) {
      return this.eachBefore(function (node) {
        if (node.children) {
          node.children.sort(compare);
        }
      });
    }

    function node_path (end) {
      var start = this,
        ancestor = leastCommonAncestor(start, end),
        nodes = [start];
      while (start !== ancestor) {
        start = start.parent;
        nodes.push(start);
      }
      var k = nodes.length;
      while (end !== ancestor) {
        nodes.splice(k, 0, end);
        end = end.parent;
      }
      return nodes;
    }
    function leastCommonAncestor(a, b) {
      if (a === b) return a;
      var aNodes = a.ancestors(),
        bNodes = b.ancestors(),
        c = null;
      a = aNodes.pop();
      b = bNodes.pop();
      while (a === b) {
        c = a;
        a = aNodes.pop();
        b = bNodes.pop();
      }
      return c;
    }

    function node_ancestors () {
      var node = this,
        nodes = [node];
      while (node = node.parent) {
        nodes.push(node);
      }
      return nodes;
    }

    function node_descendants () {
      return Array.from(this);
    }

    function node_leaves () {
      var leaves = [];
      this.eachBefore(function (node) {
        if (!node.children) {
          leaves.push(node);
        }
      });
      return leaves;
    }

    function node_links () {
      var root = this,
        links = [];
      root.each(function (node) {
        if (node !== root) {
          // Don’t include the root’s parent, if any.
          links.push({
            source: node.parent,
            target: node
          });
        }
      });
      return links;
    }

    var regeneratorRuntime$1 = createCommonjsModule(function (module) {
    var _typeof = _typeof_1["default"];
    function _regeneratorRuntime() {
      module.exports = _regeneratorRuntime = function _regeneratorRuntime() {
        return e;
      }, module.exports.__esModule = true, module.exports["default"] = module.exports;
      var t,
        e = {},
        r = Object.prototype,
        n = r.hasOwnProperty,
        o = Object.defineProperty || function (t, e, r) {
          t[e] = r.value;
        },
        i = "function" == typeof Symbol ? Symbol : {},
        a = i.iterator || "@@iterator",
        c = i.asyncIterator || "@@asyncIterator",
        u = i.toStringTag || "@@toStringTag";
      function define(t, e, r) {
        return Object.defineProperty(t, e, {
          value: r,
          enumerable: !0,
          configurable: !0,
          writable: !0
        }), t[e];
      }
      try {
        define({}, "");
      } catch (t) {
        define = function define(t, e, r) {
          return t[e] = r;
        };
      }
      function wrap(t, e, r, n) {
        var i = e && e.prototype instanceof Generator ? e : Generator,
          a = Object.create(i.prototype),
          c = new Context(n || []);
        return o(a, "_invoke", {
          value: makeInvokeMethod(t, r, c)
        }), a;
      }
      function tryCatch(t, e, r) {
        try {
          return {
            type: "normal",
            arg: t.call(e, r)
          };
        } catch (t) {
          return {
            type: "throw",
            arg: t
          };
        }
      }
      e.wrap = wrap;
      var h = "suspendedStart",
        l = "suspendedYield",
        f = "executing",
        s = "completed",
        y = {};
      function Generator() {}
      function GeneratorFunction() {}
      function GeneratorFunctionPrototype() {}
      var p = {};
      define(p, a, function () {
        return this;
      });
      var d = Object.getPrototypeOf,
        v = d && d(d(values([])));
      v && v !== r && n.call(v, a) && (p = v);
      var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
      function defineIteratorMethods(t) {
        ["next", "throw", "return"].forEach(function (e) {
          define(t, e, function (t) {
            return this._invoke(e, t);
          });
        });
      }
      function AsyncIterator(t, e) {
        function invoke(r, o, i, a) {
          var c = tryCatch(t[r], t, o);
          if ("throw" !== c.type) {
            var u = c.arg,
              h = u.value;
            return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
              invoke("next", t, i, a);
            }, function (t) {
              invoke("throw", t, i, a);
            }) : e.resolve(h).then(function (t) {
              u.value = t, i(u);
            }, function (t) {
              return invoke("throw", t, i, a);
            });
          }
          a(c.arg);
        }
        var r;
        o(this, "_invoke", {
          value: function value(t, n) {
            function callInvokeWithMethodAndArg() {
              return new e(function (e, r) {
                invoke(t, n, e, r);
              });
            }
            return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
          }
        });
      }
      function makeInvokeMethod(e, r, n) {
        var o = h;
        return function (i, a) {
          if (o === f) throw Error("Generator is already running");
          if (o === s) {
            if ("throw" === i) throw a;
            return {
              value: t,
              done: !0
            };
          }
          for (n.method = i, n.arg = a;;) {
            var c = n.delegate;
            if (c) {
              var u = maybeInvokeDelegate(c, n);
              if (u) {
                if (u === y) continue;
                return u;
              }
            }
            if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
              if (o === h) throw o = s, n.arg;
              n.dispatchException(n.arg);
            } else "return" === n.method && n.abrupt("return", n.arg);
            o = f;
            var p = tryCatch(e, r, n);
            if ("normal" === p.type) {
              if (o = n.done ? s : l, p.arg === y) continue;
              return {
                value: p.arg,
                done: n.done
              };
            }
            "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
          }
        };
      }
      function maybeInvokeDelegate(e, r) {
        var n = r.method,
          o = e.iterator[n];
        if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y;
        var i = tryCatch(o, e.iterator, r.arg);
        if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
        var a = i.arg;
        return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y);
      }
      function pushTryEntry(t) {
        var e = {
          tryLoc: t[0]
        };
        1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
      }
      function resetTryEntry(t) {
        var e = t.completion || {};
        e.type = "normal", delete e.arg, t.completion = e;
      }
      function Context(t) {
        this.tryEntries = [{
          tryLoc: "root"
        }], t.forEach(pushTryEntry, this), this.reset(!0);
      }
      function values(e) {
        if (e || "" === e) {
          var r = e[a];
          if (r) return r.call(e);
          if ("function" == typeof e.next) return e;
          if (!isNaN(e.length)) {
            var o = -1,
              i = function next() {
                for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
                return next.value = t, next.done = !0, next;
              };
            return i.next = i;
          }
        }
        throw new TypeError(_typeof(e) + " is not iterable");
      }
      return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
        value: GeneratorFunctionPrototype,
        configurable: !0
      }), o(GeneratorFunctionPrototype, "constructor", {
        value: GeneratorFunction,
        configurable: !0
      }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
        var e = "function" == typeof t && t.constructor;
        return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
      }, e.mark = function (t) {
        return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
      }, e.awrap = function (t) {
        return {
          __await: t
        };
      }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
        return this;
      }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
        void 0 === i && (i = Promise);
        var a = new AsyncIterator(wrap(t, r, n, o), i);
        return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
          return t.done ? t.value : a.next();
        });
      }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
        return this;
      }), define(g, "toString", function () {
        return "[object Generator]";
      }), e.keys = function (t) {
        var e = Object(t),
          r = [];
        for (var n in e) r.push(n);
        return r.reverse(), function next() {
          for (; r.length;) {
            var t = r.pop();
            if (t in e) return next.value = t, next.done = !1, next;
          }
          return next.done = !0, next;
        };
      }, e.values = values, Context.prototype = {
        constructor: Context,
        reset: function reset(e) {
          if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
        },
        stop: function stop() {
          this.done = !0;
          var t = this.tryEntries[0].completion;
          if ("throw" === t.type) throw t.arg;
          return this.rval;
        },
        dispatchException: function dispatchException(e) {
          if (this.done) throw e;
          var r = this;
          function handle(n, o) {
            return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
          }
          for (var o = this.tryEntries.length - 1; o >= 0; --o) {
            var i = this.tryEntries[o],
              a = i.completion;
            if ("root" === i.tryLoc) return handle("end");
            if (i.tryLoc <= this.prev) {
              var c = n.call(i, "catchLoc"),
                u = n.call(i, "finallyLoc");
              if (c && u) {
                if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
                if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
              } else if (c) {
                if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
              } else {
                if (!u) throw Error("try statement without catch or finally");
                if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
              }
            }
          }
        },
        abrupt: function abrupt(t, e) {
          for (var r = this.tryEntries.length - 1; r >= 0; --r) {
            var o = this.tryEntries[r];
            if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
              var i = o;
              break;
            }
          }
          i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
          var a = i ? i.completion : {};
          return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
        },
        complete: function complete(t, e) {
          if ("throw" === t.type) throw t.arg;
          return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y;
        },
        finish: function finish(t) {
          for (var e = this.tryEntries.length - 1; e >= 0; --e) {
            var r = this.tryEntries[e];
            if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
          }
        },
        "catch": function _catch(t) {
          for (var e = this.tryEntries.length - 1; e >= 0; --e) {
            var r = this.tryEntries[e];
            if (r.tryLoc === t) {
              var n = r.completion;
              if ("throw" === n.type) {
                var o = n.arg;
                resetTryEntry(r);
              }
              return o;
            }
          }
          throw Error("illegal catch attempt");
        },
        delegateYield: function delegateYield(e, r, n) {
          return this.delegate = {
            iterator: values(e),
            resultName: r,
            nextLoc: n
          }, "next" === this.method && (this.arg = t), y;
        }
      }, e;
    }
    module.exports = _regeneratorRuntime, module.exports.__esModule = true, module.exports["default"] = module.exports;
    });

    // TODO(Babel 8): Remove this file.

    var runtime$1 = regeneratorRuntime$1();
    var regenerator = runtime$1;

    // Copied from https://github.com/facebook/regenerator/blob/main/packages/runtime/runtime.js#L736=
    try {
      regeneratorRuntime = runtime$1;
    } catch (accidentalStrictMode) {
      if (typeof globalThis === "object") {
        globalThis.regeneratorRuntime = runtime$1;
      } else {
        Function("r", "regeneratorRuntime = r")(runtime$1);
      }
    }

    var _marked = /*#__PURE__*/regenerator.mark(_callee);
    function _callee() {
      var node, current, next, children, i, n;
      return regenerator.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            node = this, next = [node];
          case 1:
            current = next.reverse(), next = [];
          case 2:
            if (!(node = current.pop())) {
              _context.next = 8;
              break;
            }
            _context.next = 5;
            return node;
          case 5:
            if (children = node.children) {
              for (i = 0, n = children.length; i < n; ++i) {
                next.push(children[i]);
              }
            }
            _context.next = 2;
            break;
          case 8:
            if (next.length) {
              _context.next = 1;
              break;
            }
          case 9:
          case "end":
            return _context.stop();
        }
      }, _marked, this);
    }

    function hierarchy(data, children) {
      if (data instanceof Map) {
        data = [undefined, data];
        if (children === undefined) children = mapChildren;
      } else if (children === undefined) {
        children = objectChildren;
      }
      var root = new Node$1(data),
        node,
        nodes = [root],
        child,
        childs,
        i,
        n;
      while (node = nodes.pop()) {
        if ((childs = children(node.data)) && (n = (childs = Array.from(childs)).length)) {
          node.children = childs;
          for (i = n - 1; i >= 0; --i) {
            nodes.push(child = childs[i] = new Node$1(childs[i]));
            child.parent = node;
            child.depth = node.depth + 1;
          }
        }
      }
      return root.eachBefore(computeHeight);
    }
    function node_copy() {
      return hierarchy(this).eachBefore(copyData);
    }
    function objectChildren(d) {
      return d.children;
    }
    function mapChildren(d) {
      return Array.isArray(d) ? d[1] : null;
    }
    function copyData(node) {
      if (node.data.value !== undefined) node.value = node.data.value;
      node.data = node.data.data;
    }
    function computeHeight(node) {
      var height = 0;
      do node.height = height; while ((node = node.parent) && node.height < ++height);
    }
    function Node$1(data) {
      this.data = data;
      this.depth = this.height = 0;
      this.parent = null;
    }
    Node$1.prototype = hierarchy.prototype = _defineProperty({
      constructor: Node$1,
      count: node_count,
      each: node_each,
      eachAfter: node_eachAfter,
      eachBefore: node_eachBefore,
      find: node_find,
      sum: node_sum,
      sort: node_sort,
      path: node_path,
      ancestors: node_ancestors,
      descendants: node_descendants,
      leaves: node_leaves,
      links: node_links,
      copy: node_copy
    }, Symbol.iterator, _callee);

    function required(f) {
      if (typeof f !== "function") throw new Error();
      return f;
    }

    function constantZero() {
      return 0;
    }
    function constant$1 (x) {
      return function () {
        return x;
      };
    }

    function roundNode (node) {
      node.x0 = Math.round(node.x0);
      node.y0 = Math.round(node.y0);
      node.x1 = Math.round(node.x1);
      node.y1 = Math.round(node.y1);
    }

    function treemapDice (parent, x0, y0, x1, y1) {
      var nodes = parent.children,
        node,
        i = -1,
        n = nodes.length,
        k = parent.value && (x1 - x0) / parent.value;
      while (++i < n) {
        node = nodes[i], node.y0 = y0, node.y1 = y1;
        node.x0 = x0, node.x1 = x0 += node.value * k;
      }
    }

    function partition () {
      var dx = 1,
        dy = 1,
        padding = 0,
        round = false;
      function partition(root) {
        var n = root.height + 1;
        root.x0 = root.y0 = padding;
        root.x1 = dx;
        root.y1 = dy / n;
        root.eachBefore(positionNode(dy, n));
        if (round) root.eachBefore(roundNode);
        return root;
      }
      function positionNode(dy, n) {
        return function (node) {
          if (node.children) {
            treemapDice(node, node.x0, dy * (node.depth + 1) / n, node.x1, dy * (node.depth + 2) / n);
          }
          var x0 = node.x0,
            y0 = node.y0,
            x1 = node.x1 - padding,
            y1 = node.y1 - padding;
          if (x1 < x0) x0 = x1 = (x0 + x1) / 2;
          if (y1 < y0) y0 = y1 = (y0 + y1) / 2;
          node.x0 = x0;
          node.y0 = y0;
          node.x1 = x1;
          node.y1 = y1;
        };
      }
      partition.round = function (x) {
        return arguments.length ? (round = !!x, partition) : round;
      };
      partition.size = function (x) {
        return arguments.length ? (dx = +x[0], dy = +x[1], partition) : [dx, dy];
      };
      partition.padding = function (x) {
        return arguments.length ? (padding = +x, partition) : padding;
      };
      return partition;
    }

    function treemapSlice (parent, x0, y0, x1, y1) {
      var nodes = parent.children,
        node,
        i = -1,
        n = nodes.length,
        k = parent.value && (y1 - y0) / parent.value;
      while (++i < n) {
        node = nodes[i], node.x0 = x0, node.x1 = x1;
        node.y0 = y0, node.y1 = y0 += node.value * k;
      }
    }

    var phi = (1 + Math.sqrt(5)) / 2;
    function squarifyRatio(ratio, parent, x0, y0, x1, y1) {
      var rows = [],
        nodes = parent.children,
        row,
        nodeValue,
        i0 = 0,
        i1 = 0,
        n = nodes.length,
        dx,
        dy,
        value = parent.value,
        sumValue,
        minValue,
        maxValue,
        newRatio,
        minRatio,
        alpha,
        beta;
      while (i0 < n) {
        dx = x1 - x0, dy = y1 - y0;

        // Find the next non-empty node.
        do sumValue = nodes[i1++].value; while (!sumValue && i1 < n);
        minValue = maxValue = sumValue;
        alpha = Math.max(dy / dx, dx / dy) / (value * ratio);
        beta = sumValue * sumValue * alpha;
        minRatio = Math.max(maxValue / beta, beta / minValue);

        // Keep adding nodes while the aspect ratio maintains or improves.
        for (; i1 < n; ++i1) {
          sumValue += nodeValue = nodes[i1].value;
          if (nodeValue < minValue) minValue = nodeValue;
          if (nodeValue > maxValue) maxValue = nodeValue;
          beta = sumValue * sumValue * alpha;
          newRatio = Math.max(maxValue / beta, beta / minValue);
          if (newRatio > minRatio) {
            sumValue -= nodeValue;
            break;
          }
          minRatio = newRatio;
        }

        // Position and record the row orientation.
        rows.push(row = {
          value: sumValue,
          dice: dx < dy,
          children: nodes.slice(i0, i1)
        });
        if (row.dice) treemapDice(row, x0, y0, x1, value ? y0 += dy * sumValue / value : y1);else treemapSlice(row, x0, y0, value ? x0 += dx * sumValue / value : x1, y1);
        value -= sumValue, i0 = i1;
      }
      return rows;
    }
    var squarify = (function custom(ratio) {
      function squarify(parent, x0, y0, x1, y1) {
        squarifyRatio(ratio, parent, x0, y0, x1, y1);
      }
      squarify.ratio = function (x) {
        return custom((x = +x) > 1 ? x : 1);
      };
      return squarify;
    })(phi);

    function treemap () {
      var tile = squarify,
        round = false,
        dx = 1,
        dy = 1,
        paddingStack = [0],
        paddingInner = constantZero,
        paddingTop = constantZero,
        paddingRight = constantZero,
        paddingBottom = constantZero,
        paddingLeft = constantZero;
      function treemap(root) {
        root.x0 = root.y0 = 0;
        root.x1 = dx;
        root.y1 = dy;
        root.eachBefore(positionNode);
        paddingStack = [0];
        if (round) root.eachBefore(roundNode);
        return root;
      }
      function positionNode(node) {
        var p = paddingStack[node.depth],
          x0 = node.x0 + p,
          y0 = node.y0 + p,
          x1 = node.x1 - p,
          y1 = node.y1 - p;
        if (x1 < x0) x0 = x1 = (x0 + x1) / 2;
        if (y1 < y0) y0 = y1 = (y0 + y1) / 2;
        node.x0 = x0;
        node.y0 = y0;
        node.x1 = x1;
        node.y1 = y1;
        if (node.children) {
          p = paddingStack[node.depth + 1] = paddingInner(node) / 2;
          x0 += paddingLeft(node) - p;
          y0 += paddingTop(node) - p;
          x1 -= paddingRight(node) - p;
          y1 -= paddingBottom(node) - p;
          if (x1 < x0) x0 = x1 = (x0 + x1) / 2;
          if (y1 < y0) y0 = y1 = (y0 + y1) / 2;
          tile(node, x0, y0, x1, y1);
        }
      }
      treemap.round = function (x) {
        return arguments.length ? (round = !!x, treemap) : round;
      };
      treemap.size = function (x) {
        return arguments.length ? (dx = +x[0], dy = +x[1], treemap) : [dx, dy];
      };
      treemap.tile = function (x) {
        return arguments.length ? (tile = required(x), treemap) : tile;
      };
      treemap.padding = function (x) {
        return arguments.length ? treemap.paddingInner(x).paddingOuter(x) : treemap.paddingInner();
      };
      treemap.paddingInner = function (x) {
        return arguments.length ? (paddingInner = typeof x === "function" ? x : constant$1(+x), treemap) : paddingInner;
      };
      treemap.paddingOuter = function (x) {
        return arguments.length ? treemap.paddingTop(x).paddingRight(x).paddingBottom(x).paddingLeft(x) : treemap.paddingTop();
      };
      treemap.paddingTop = function (x) {
        return arguments.length ? (paddingTop = typeof x === "function" ? x : constant$1(+x), treemap) : paddingTop;
      };
      treemap.paddingRight = function (x) {
        return arguments.length ? (paddingRight = typeof x === "function" ? x : constant$1(+x), treemap) : paddingRight;
      };
      treemap.paddingBottom = function (x) {
        return arguments.length ? (paddingBottom = typeof x === "function" ? x : constant$1(+x), treemap) : paddingBottom;
      };
      treemap.paddingLeft = function (x) {
        return arguments.length ? (paddingLeft = typeof x === "function" ? x : constant$1(+x), treemap) : paddingLeft;
      };
      return treemap;
    }

    function treemapBinary (parent, x0, y0, x1, y1) {
      var nodes = parent.children,
        i,
        n = nodes.length,
        sum,
        sums = new Array(n + 1);
      for (sums[0] = sum = i = 0; i < n; ++i) {
        sums[i + 1] = sum += nodes[i].value;
      }
      partition(0, n, parent.value, x0, y0, x1, y1);
      function partition(i, j, value, x0, y0, x1, y1) {
        if (i >= j - 1) {
          var node = nodes[i];
          node.x0 = x0, node.y0 = y0;
          node.x1 = x1, node.y1 = y1;
          return;
        }
        var valueOffset = sums[i],
          valueTarget = value / 2 + valueOffset,
          k = i + 1,
          hi = j - 1;
        while (k < hi) {
          var mid = k + hi >>> 1;
          if (sums[mid] < valueTarget) k = mid + 1;else hi = mid;
        }
        if (valueTarget - sums[k - 1] < sums[k] - valueTarget && i + 1 < k) --k;
        var valueLeft = sums[k] - valueOffset,
          valueRight = value - valueLeft;
        if (x1 - x0 > y1 - y0) {
          var xk = value ? (x0 * valueRight + x1 * valueLeft) / value : x1;
          partition(i, k, valueLeft, x0, y0, xk, y1);
          partition(k, j, valueRight, xk, y0, x1, y1);
        } else {
          var yk = value ? (y0 * valueRight + y1 * valueLeft) / value : y1;
          partition(i, k, valueLeft, x0, y0, x1, yk);
          partition(k, j, valueRight, x0, yk, x1, y1);
        }
      }
    }

    var withTreemap = function withTreemap(View) {
      return /** @class */function (_super) {
        __extends(Treemap, _super);
        function Treemap(props, context) {
          var _this = _super.call(this, props, context) || this;
          var color = props.color,
            data = props.data,
            theme = props.theme,
            _a = props.selection,
            selection = _a === void 0 ? {} : _a;
          var px2hd = context.px2hd;
          context.theme = deepMix(px2hd(Theme), theme);
          _this.coord = new coordController();
          _this.color = new Category$1(__assign(__assign({
            range: context.theme.colors
          }, color), {
            data: data
          }));
          var _b = selection.defaultSelected,
            defaultSelected = _b === void 0 ? null : _b;
          _this.state.selected = defaultSelected;
          _this.coordRef = createRef();
          _this.records = [];
          return _this;
        }
        Treemap.prototype.isSelected = function (record) {
          var state = this.state;
          var selected = state.selected;
          if (!selected || !selected.length) {
            return false;
          }
          for (var i = 0, len = selected.length; i < len; i++) {
            var item = selected[i];
            if (equal(record, item)) {
              return true;
            }
          }
          return false;
        };
        Treemap.prototype.getSelectionStyle = function (record) {
          var _a = this,
            state = _a.state,
            props = _a.props;
          var selected = state.selected;
          if (!selected || !selected.length) {
            return null;
          }
          var selection = props.selection;
          var selectedStyle = selection.selectedStyle,
            unSelectedStyle = selection.unSelectedStyle;
          var isSelected = this.isSelected(record);
          if (isSelected) {
            return isFunction(selectedStyle) ? selectedStyle(record) : selectedStyle;
          }
          return isFunction(unSelectedStyle) ? unSelectedStyle(record) : unSelectedStyle;
        };
        Treemap.prototype.willMount = function () {
          var _a = this,
            props = _a.props,
            coord = _a.coord,
            layout = _a.layout;
          var coordOption = props.coord;
          coord.updateLayout(layout);
          coord.create(coordOption);
        };
        Treemap.prototype.willReceiveProps = function (nextProps) {
          var nextSelection = nextProps.selection;
          var lastSelection = this.props.selection;
          if (!nextSelection || !lastSelection) {
            return;
          }
          var nextDefaultSelected = nextSelection.defaultSelected;
          var lastDefaultSelected = lastSelection.defaultSelected;
          if (!equal(nextDefaultSelected, lastDefaultSelected)) {
            this.state.selected = nextDefaultSelected;
          }
        };
        Treemap.prototype.treemapLayout = function () {
          var _this = this;
          var _a = this,
            props = _a.props,
            coord = _a.coord,
            colorAttr = _a.color;
          var _b = coord.getCoord(),
            width = _b.width,
            height = _b.height;
          var data = props.data,
            value = props.value,
            _c = props.space,
            space = _c === void 0 ? 0 : _c;
          var root = hierarchy({
            children: data
          }).sum(function (d) {
            return d[value];
          }).sort(function (a, b) {
            return b[value] - a[value];
          });
          var treemapLayout = treemap()
          // 默认treemapSquarify
          .tile(treemapBinary).round(false).size([width, height])
          // .padding(1);
          .paddingInner(space);
          // .paddingOuter(options.paddingOuter)
          // .paddingTop(options.paddingTop)
          // .paddingRight(options.paddingRight)
          // .paddingBottom(options.paddingBottom)
          // .paddingLeft(options.paddingLeft);
          var nodes = treemapLayout(root);
          return nodes.children.map(function (item) {
            var data = item.data,
              x0 = item.x0,
              y0 = item.y0,
              x1 = item.x1,
              y1 = item.y1;
            var color = colorAttr.mapping(data[colorAttr.field]);
            var rect = {
              xMin: x0,
              xMax: x1,
              yMin: y0,
              yMax: y1
            };
            var style = _this.getSelectionStyle(data);
            return __assign(__assign({
              key: data.key,
              origin: data,
              color: color
            }, rect), {
              style: style
            });
          });
        };
        Treemap.prototype.select = function (ev, trigger) {
          var _this = this;
          var points = ev.points,
            x = ev.canvasX,
            y = ev.canvasY;
          var _a = this.props.selection,
            selection = _a === void 0 ? {} : _a;
          var triggerOn = selection.triggerOn,
            _b = selection.type,
            type = _b === void 0 ? 'single' : _b,
            _c = selection.cancelable,
            cancelable = _c === void 0 ? true : _c;
          if (!triggerOn || trigger !== triggerOn) return;
          var point = triggerOn === 'click' ? {
            x: x,
            y: y
          } : points[0];
          var selected = this.state.selected;
          var origin = [];
          each(this.records, function (record) {
            if (point.x >= record.xMin && point.x <= record.xMax && point.y >= record.yMin && point.y <= record.yMax) {
              origin.push(record === null || record === void 0 ? void 0 : record.origin);
            }
          });
          // 没选中元素
          if (!origin) {
            this.setState({
              selected: null
            });
            return;
          }
          if (!selected) {
            this.setState({
              selected: origin
            });
            return;
          }
          // 单选
          var newSelected = [];
          origin.forEach(function (record) {
            if (!_this.isSelected(record)) {
              newSelected.push(record);
            }
          });
          if (type === 'single') {
            this.setState({
              selected: cancelable ? newSelected : origin
            });
            return;
          }
          this.setState({
            selected: __spreadArray(__spreadArray([], newSelected, true), selected, true)
          });
        };
        Treemap.prototype.render = function () {
          var _this = this;
          var nodes = this.treemapLayout();
          this.records = nodes;
          var _a = this,
            props = _a.props,
            coord = _a.coord;
          var _b = coord.getCoord(),
            width = _b.width,
            height = _b.height;
          return jsx("group", {
            style: {
              width: width,
              height: height,
              fill: 'transparent'
            },
            onClick: function onClick(ev) {
              return _this.select(ev, 'click');
            },
            onPress: function onPress(ev) {
              return _this.select(ev, 'press');
            }
          }, jsx(View, __assign({
            nodes: nodes
          }, props, {
            coord: coord.getCoord()
          })));
        };
        return Treemap;
      }(Component);
    };

    var TreemapView = (function (props // Coord 在 withTreemap 被转成 Coord 类型了，所以这里需要重新定义
    ) {
      var nodes = props.nodes,
        coord = props.coord,
        onClick = props.onClick,
        _a = props.label,
        label = _a === void 0 ? false : _a;
      if (coord.isPolar) {
        var center = coord.center;
        var x_1 = center.x,
          y_1 = center.y;
        return jsx("group", null, nodes.map(function (node) {
          var xMin = node.xMin,
            xMax = node.xMax,
            yMin = node.yMin,
            yMax = node.yMax,
            color = node.color,
            style = node.style;
          return jsx("sector", {
            style: __assign({
              cx: x_1,
              cy: y_1,
              lineWidth: '1px',
              stroke: '#fff',
              startAngle: xMin,
              endAngle: xMax,
              r0: yMin,
              r: yMax,
              fill: color
            }, style),
            onClick: onClick ? function () {
              return onClick(node);
            } : null
          });
        }));
      }
      return jsx("group", null, nodes.map(function (node) {
        var key = node.key,
          xMin = node.xMin,
          xMax = node.xMax,
          yMin = node.yMin,
          yMax = node.yMax,
          color = node.color,
          style = node.style;
        return jsx("group", null, jsx("rect", {
          key: key,
          style: __assign({
            x: xMin,
            y: yMin,
            width: xMax - xMin,
            height: yMax - yMin,
            fill: color,
            lineWidth: '4px',
            stroke: '#fff',
            radius: '8px'
          }, style),
          animation: {
            appear: {
              easing: 'linear',
              duration: 450,
              property: ['fillOpacity', 'strokeOpacity'],
              start: {
                fillOpacity: 0,
                strokeOpacity: 0
              }
            },
            update: {
              easing: 'linear',
              duration: 450,
              property: ['x', 'y', 'width', 'height', 'radius', 'lineWidth', 'fillOpacity', 'strokeOpacity']
            }
          },
          onClick: onClick ? function () {
            return onClick(node);
          } : null
        }), label && jsx("text", {
          style: __assign({
            x: (xMin + xMax) / 2,
            y: (yMin + yMax) / 2,
            text: node.origin.name,
            fill: 'white',
            textAlign: 'center',
            textBaseline: 'middle'
          }, label)
        }));
      }));
    });

    var index$8 = withTreemap(TreemapView);

    function rootParent(data) {
      var d = data;
      while (d.depth > 1) {
        d = d.parent;
      }
      return d;
    }
    var withSunburst = (function (View) {
      return /** @class */function (_super) {
        __extends(Sunburst, _super);
        function Sunburst(props, context) {
          var _this = _super.call(this, props, context) || this;
          var color = props.color,
            data = props.data;
          _this.coord = new coordController();
          _this.color = new Category$1(__assign(__assign({
            range: Theme.colors
          }, color), {
            data: data
          }));
          return _this;
        }
        Sunburst.prototype.willMount = function () {
          var _a = this,
            props = _a.props,
            coord = _a.coord,
            layout = _a.layout;
          var coordOption = props.coord;
          coord.updateLayout(layout);
          coord.create(coordOption);
        };
        Sunburst.prototype.didMount = function () {};
        Sunburst.prototype._mapping = function (children) {
          var _a = this,
            colorAttr = _a.color,
            coord = _a.coord;
          for (var i = 0, len = children.length; i < len; i++) {
            var node = children[i];
            var root = rootParent(node);
            var color = colorAttr.mapping(root.data[colorAttr.field]);
            node.color = color;
            var x0 = node.x0,
              x1 = node.x1,
              y0 = node.y0,
              y1 = node.y1;
            var rect = coord.getCoord().convertRect({
              x: [x0, x1],
              y: [y0, y1]
            });
            mix(node, rect);
            // 递归处理
            if (node.children && node.children.length) {
              this._mapping(node.children);
            }
          }
        };
        Sunburst.prototype.sunburst = function () {
          var props = this.props;
          var data = props.data,
            value = props.value,
            _a = props.sort,
            sort = _a === void 0 ? true : _a;
          var root = hierarchy({
            children: data
          }).sum(function (d) {
            return d[value];
          });
          // 内置按value大小顺序排序，支持传入sort函数
          if (sort === true || isFunction(sort)) {
            var sortFn = isFunction(sort) ? sort : function (a, b) {
              return b[value] - a[value];
            };
            root.sort(sortFn);
          }
          var nodes = partition()(root);
          var children = nodes.children;
          this._mapping(children);
          return nodes;
        };
        Sunburst.prototype.render = function () {
          var node = this.sunburst();
          var _a = this,
            coord = _a.coord,
            props = _a.props;
          return jsx(View, __assign({}, props, {
            coord: coord.getCoord(),
            node: node,
            triggerRef: this.triggerRef
          }));
        };
        return Sunburst;
      }(Component);
    });

    var SunburstView = (function (props) {
      var coord = props.coord,
        node = props.node,
        onClick = props.onClick;
      var children = node.children;
      var _a = coord.center,
        x = _a.x,
        y = _a.y;
      var _renderNodes = function renderNodes(nodes) {
        return jsx("group", null, nodes.map(function (node) {
          var xMin = node.xMin,
            xMax = node.xMax,
            yMin = node.yMin,
            yMax = node.yMax,
            color = node.color,
            children = node.children;
          return jsx("group", {
            onClick: onClick
          }, jsx("sector", {
            attrs: {
              cx: x,
              cy: y,
              lineWidth: '1px',
              stroke: '#fff',
              startAngle: "".concat(xMin, " rad"),
              endAngle: "".concat(xMax, " rad"),
              r0: yMin,
              r: yMax,
              fill: color
            }
          }), children && children.length ? _renderNodes(children) : null);
        }));
      };
      return _renderNodes(children);
    });

    var IcicleView = (function (props) {
      var node = props.node,
        onClick = props.onClick;
      var children = node.children;
      var _renderNodes = function renderNodes(nodes) {
        return jsx("group", null, nodes.map(function (node) {
          var xMin = node.xMin,
            xMax = node.xMax,
            yMin = node.yMin,
            yMax = node.yMax,
            color = node.color,
            children = node.children;
          return jsx("group", {
            onClick: onClick
          }, jsx("rect", {
            attrs: {
              x: xMin,
              y: yMin,
              width: xMax - xMin,
              height: yMax - yMin,
              lineWidth: '1px',
              stroke: '#fff',
              fill: color
            }
          }), children && children.length ? _renderNodes(children) : null);
        }));
      };
      return _renderNodes(children);
    });

    var View = (function (props) {
      var coord = props.coord;
      if (coord.type === 'polar') {
        return jsx(SunburstView, __assign({}, props));
      }
      return jsx(IcicleView, __assign({}, props));
    });

    var index$9 = withSunburst(View);

    var DEFAULT_CONFIG = {
      anchorOffset: '10px',
      inflectionOffset: '30px',
      sidePadding: '15px',
      height: '64px',
      adjustOffset: '30',
      triggerOn: 'click',
      // activeShape: false, // 当有图形被选中的时候，是否激活图形
      // activeStyle: {
      //   offset: '1px',
      //   appendRadius: '8px',
      //   fillOpacity: 0.5,
      // },
      label1OffsetY: '-4px',
      label2OffsetY: '4px'
    };
    function getEndPoint(center, angle, r) {
      return {
        x: center.x + r * Math.cos(angle),
        y: center.y + r * Math.sin(angle)
      };
    }
    // 计算中间角度
    function getMiddleAngle(startAngle, endAngle) {
      if (endAngle < startAngle) {
        endAngle += Math.PI * 2;
      }
      return (endAngle + startAngle) / 2;
    }
    function move(from, to, count, center) {
      var x = center.x;
      var sort = from.sort(function (a, b) {
        var aDistance = Math.abs(a.x - x);
        var bDistance = Math.abs(b.x - x);
        return bDistance - aDistance;
      });
      return [sort.slice(0, sort.length - count), sort.slice(sort.length - count).concat(to)];
    }
    // 第一象限
    function isFirstQuadrant(angle) {
      return angle >= -Math.PI / 2 && angle < 0;
    }
    // 第二象限
    function isSecondQuadrant(angle) {
      return angle >= 0 && angle < Math.PI / 2;
    }
    function isThirdQuadrant(angle) {
      return angle >= Math.PI / 2 && angle < Math.PI;
    }
    function isFourthQuadrant(angle) {
      return angle >= Math.PI && angle < Math.PI * 3 / 2;
    }
    var withPieLabel = (function (View) {
      return /** @class */function (_super) {
        __extends(PieLabel, _super);
        function PieLabel(props) {
          return _super.call(this, props) || this;
        }
        PieLabel.prototype.willMount = function () {};
        /**
         * 绑定事件
         */
        PieLabel.prototype.didMount = function () {};
        PieLabel.prototype.getLabels = function (props) {
          var chart = props.chart,
            coord = props.coord,
            anchorOffset = props.anchorOffset,
            inflectionOffset = props.inflectionOffset,
            label1 = props.label1,
            label2 = props.label2,
            itemHeight = props.height,
            sidePadding = props.sidePadding;
          var center = coord.center,
            radius = coord.radius,
            coordWidth = coord.width,
            coordHeight = coord.height,
            coordLeft = coord.left,
            coordRight = coord.right,
            coordTop = coord.top;
          var maxCountForOneSide = Math.floor(coordHeight / itemHeight);
          var maxCount = maxCountForOneSide * 2;
          var geometry = chart.getGeometrys()[0];
          var records = geometry.flatRecords()
          // 按角度大到小排序
          .sort(function (a, b) {
            var angle1 = a.xMax - a.xMin;
            var angle2 = b.xMax - b.xMin;
            return angle2 - angle1;
          })
          // 只取前 maxCount 个显示
          .slice(0, maxCount);
          // 存储左右 labels
          var halves = [[], [] // right
          ];
          records.forEach(function (record) {
            var xMin = record.xMin,
              xMax = record.xMax,
              color = record.color,
              origin = record.origin;
            // 锚点角度
            var anchorAngle = getMiddleAngle(xMin, xMax);
            // 锚点坐标
            var anchorPoint = getEndPoint(center, anchorAngle, radius + anchorOffset);
            // 拐点坐标
            var inflectionPoint = getEndPoint(center, anchorAngle, radius + inflectionOffset);
            // 锚点方向
            var side = anchorPoint.x < center.x ? 'left' : 'right';
            var label = {
              origin: origin,
              angle: anchorAngle,
              anchor: anchorPoint,
              inflection: inflectionPoint,
              side: side,
              x: inflectionPoint.x,
              y: inflectionPoint.y,
              r: radius + inflectionOffset,
              color: color,
              label1: isFunction(label1) ? label1(origin, record) : label1,
              label2: isFunction(label2) ? label2(origin, record) : label2
            };
            // 判断文本的方向
            if (side === 'left') {
              halves[0].push(label);
            } else {
              halves[1].push(label);
            }
          });
          // 判断是有一边超过了显示的最大
          if (halves[0].length > maxCountForOneSide) {
            halves = move(halves[0], halves[1], halves[0].length - maxCountForOneSide, center);
          } else if (halves[1].length > maxCountForOneSide) {
            var _a = move(halves[1], halves[0], halves[1].length - maxCountForOneSide, center),
              right = _a[0],
              left = _a[1];
            halves = [left, right];
          }
          // label 的最大宽度
          var labelWidth = coordWidth / 2 - radius - anchorOffset - inflectionOffset - 2 * sidePadding;
          var labels = [];
          halves.forEach(function (half, index) {
            var showSide = index === 0 ? 'left' : 'right';
            // 顺时针方向排序
            half.sort(function (a, b) {
              var aAngle = a.angle;
              var bAngle = b.angle;
              if (showSide === 'left') {
                // 是否在第一象限
                aAngle = isFirstQuadrant(aAngle) ? aAngle + Math.PI * 2 : aAngle;
                bAngle = isFirstQuadrant(bAngle) ? bAngle + Math.PI * 2 : bAngle;
                return bAngle - aAngle;
              } else {
                // 是否在第四象限
                aAngle = isFourthQuadrant(aAngle) ? aAngle - Math.PI * 2 : aAngle;
                bAngle = isFourthQuadrant(bAngle) ? bAngle - Math.PI * 2 : bAngle;
                return aAngle - bAngle;
              }
            });
            var pointsY = half.map(function (label) {
              return label.y;
            });
            var maxY = Math.max.apply(null, pointsY);
            var minY = Math.min.apply(null, pointsY);
            // 每个 label 占用的高度
            var labelCount = half.length;
            var labelHeight = coordHeight / labelCount;
            var halfLabelHeight = labelHeight / 2;
            // 线之间的间隔
            var lineInterval = 2;
            if (showSide === 'left') {
              half.forEach(function (label, index) {
                var anchor = label.anchor,
                  inflection = label.inflection,
                  angle = label.angle,
                  x = label.x,
                  y = label.y;
                var points = [anchor, inflection];
                var endX = coordLeft + sidePadding;
                var endY = coordTop + halfLabelHeight + labelHeight * index;
                // 文本开始点
                var labelStart = {
                  x: endX + labelWidth + lineInterval * index,
                  y: endY
                };
                // 文本结束点
                var labelEnd = {
                  x: endX,
                  y: endY
                };
                // 第四象限
                if (isFirstQuadrant(angle)) {
                  var pointY = minY - lineInterval * (labelCount - index);
                  points.push({
                    x: x,
                    y: pointY
                  });
                  points.push({
                    x: labelStart.x,
                    y: pointY
                  });
                } else if (isThirdQuadrant(angle) || isFourthQuadrant(angle)) {
                  points.push({
                    x: labelStart.x,
                    y: y
                  });
                } else if (isSecondQuadrant(angle)) {
                  var pointY = maxY + lineInterval * index;
                  points.push({
                    x: x,
                    y: pointY
                  });
                  points.push({
                    x: labelStart.x,
                    y: pointY
                  });
                }
                points.push(labelStart);
                points.push(labelEnd);
                label.points = points;
                label.side = showSide;
                labels.push(label);
              });
            } else {
              half.forEach(function (label, index) {
                var anchor = label.anchor,
                  inflection = label.inflection,
                  angle = label.angle,
                  x = label.x,
                  y = label.y;
                // 折线的点
                var points = [anchor, inflection];
                var endX = coordRight - sidePadding;
                var endY = coordTop + halfLabelHeight + labelHeight * index;
                // 文本开始点
                var labelStart = {
                  x: endX - labelWidth - lineInterval * index,
                  y: endY
                };
                // 文本结束点
                var labelEnd = {
                  x: endX,
                  y: endY
                };
                // 第四象限
                if (isFourthQuadrant(angle)) {
                  var pointY = minY - lineInterval * (labelCount - index);
                  points.push({
                    x: x,
                    y: pointY
                  });
                  points.push({
                    x: labelStart.x,
                    y: pointY
                  });
                } else if (isFirstQuadrant(angle) || isSecondQuadrant(angle)) {
                  points.push({
                    x: labelStart.x,
                    y: y
                  });
                } else if (isThirdQuadrant(angle)) {
                  var pointY = maxY + lineInterval * index;
                  points.push({
                    x: x,
                    y: pointY
                  });
                  points.push({
                    x: labelStart.x,
                    y: pointY
                  });
                }
                points.push(labelStart);
                points.push(labelEnd);
                label.points = points;
                label.side = showSide;
                labels.push(label);
              });
            }
          });
          return labels;
        };
        PieLabel.prototype.render = function () {
          var context = this.context;
          var props = context.px2hd(deepMix({}, DEFAULT_CONFIG, this.props));
          var labels = this.getLabels(props);
          return jsx(View, __assign({
            labels: labels
          }, props));
        };
        return PieLabel;
      }(Component);
    });

    var PieLabelView = (function (props) {
      var lineStyle = props.lineStyle,
        anchorStyle = props.anchorStyle,
        labels = props.labels,
        label1OffsetY = props.label1OffsetY,
        label2OffsetY = props.label2OffsetY,
        triggerRef = props.triggerRef,
        onClick = props.onClick;
      return jsx("group", {
        ref: triggerRef
      }, labels.map(function (label) {
        var origin = label.origin,
          anchor = label.anchor,
          side = label.side,
          color = label.color,
          label1 = label.label1,
          label2 = label.label2,
          points = label.points;
        var end = points[points.length - 1];
        return jsx("group", {
          onClick: onClick ? function () {
            onClick(label);
          } : null
        }, jsx("circle", {
          attrs: __assign({
            r: '4px',
            cx: anchor.x,
            cy: anchor.y,
            fill: color
          }, anchorStyle)
        }), jsx("polyline", {
          attrs: __assign({
            points: points.map(function (d) {
              return [d.x, d.y];
            }),
            lineWidth: '2px',
            stroke: color
          }, lineStyle)
        }), jsx("text", {
          className: "click",
          attrs: __assign({
            x: end.x,
            y: end.y + label1OffsetY,
            fontSize: '24px',
            lineHeight: '24px',
            fill: color,
            textBaseline: 'bottom',
            textAlign: side === 'left' ? 'left' : 'right'
          }, label1),
          data: origin
        }), jsx("text", {
          className: "click",
          attrs: __assign({
            x: end.x,
            y: end.y + label2OffsetY,
            fontSize: '24px',
            lineHeight: '24px',
            fill: '#808080',
            textBaseline: 'top',
            textAlign: side === 'left' ? 'left' : 'right'
          }, label2),
          data: origin
        }));
      }));
    });

    var index$a = withPieLabel(PieLabelView);

    var getPoint$1 = function getPoint(cener, angle, r) {
      var x = cener.x + Math.cos(angle) * r;
      var y = cener.y + Math.sin(angle) * r;
      return {
        x: x,
        y: y
      };
    };
    var getTicks = function getTicks(start, end, tickCount, center, r, tickOffset, tickLength) {
      var ticks = [];
      var diff = end - start;
      for (var i = 0; i <= tickCount; i++) {
        var tickValue = start + diff * i / tickCount;
        var startPoint = getPoint$1(center, tickValue, r + tickOffset - tickLength);
        var endPoint = getPoint$1(center, tickValue, r + tickOffset);
        ticks.push({
          tickValue: tickValue,
          start: startPoint,
          end: endPoint
        });
      }
      return ticks;
    };
    var withGauge = function withGauge(View) {
      return /** @class */function (_super) {
        __extends(Gauge, _super);
        function Gauge() {
          return _super !== null && _super.apply(this, arguments) || this;
        }
        Gauge.prototype.render = function () {
          var _a = this,
            props = _a.props,
            context = _a.context;
          var startAngle = props.startAngle,
            endAngle = props.endAngle,
            tickCount = props.tickCount,
            center = props.center,
            r = props.r,
            tickOffset = props.tickOffset,
            tickLength = props.tickLength;
          var ticks = getTicks(startAngle, endAngle, tickCount, center, context.px2hd(r), context.px2hd(tickOffset), context.px2hd(tickLength));
          return jsx(View, __assign({}, props, {
            ticks: ticks
          }));
        };
        return Gauge;
      }(Component);
    };

    var GaugeView = (function (props) {
      var center = props.center,
        startAngle = props.startAngle,
        endAngle = props.endAngle,
        r = props.r,
        percent = props.percent,
        ticks = props.ticks;
      var x = center.x,
        y = center.y;
      var diff = endAngle - startAngle;
      return jsx("group", null, jsx("arc", {
        attrs: {
          cx: x,
          cy: y,
          r: r,
          startAngle: "".concat(startAngle, " rad"),
          endAngle: "".concat(endAngle, " rad"),
          lineWidth: '20px',
          lineCap: 'round',
          stroke: '#e7e7e7'
        }
      }), jsx("arc", {
        attrs: {
          cx: x,
          cy: y,
          r: r,
          startAngle: "".concat(startAngle, " rad"),
          endAngle: "".concat(startAngle, " rad"),
          lineWidth: '40px',
          lineCap: 'round',
          stroke: '#0075ff'
        },
        animation: {
          appear: {
            easing: 'linear',
            duration: 500,
            property: ['endAngle'],
            start: {
              endAngle: "".concat(startAngle, " rad")
            },
            end: {
              endAngle: "".concat(startAngle + diff * percent, " rad")
            }
          }
        }
      }), ticks.map(function (tick) {
        var start = tick.start,
          end = tick.end;
        return jsx("line", {
          attrs: {
            x1: start.x,
            y1: start.y,
            x2: end.x,
            y2: end.y,
            lineWidth: '6px',
            lineCap: 'round',
            stroke: '#e7e7e7'
          }
        });
      }));
    });

    var index$b = withGauge(GaugeView);

    // 判断新老values是否相等，这里只要判断前后是否相等即可
    function isValuesEqual(values, newValues) {
      if (values.length !== newValues.length) {
        return false;
      }
      var lastIndex = values.length - 1;
      return values[0] === newValues[0] && values[lastIndex] === newValues[lastIndex];
    }
    function updateCategoryRange(scale, originScale, range) {
      var currentValues = scale.values,
        currentTicks = scale.ticks,
        tickMethod = scale.tickMethod,
        tickCount = scale.tickCount;
      var originValues = originScale.values;
      var start = range[0],
        end = range[1];
      var len = originValues.length;
      var valueStart = start * len;
      var valueEnd = end * len;
      // 保持滑动时个数的稳定
      var diff = valueEnd - valueStart;
      var precision = parseFloat(diff.toFixed(3)); // js 计算精度问题
      var count = Math.round(precision);
      var sliceSatrt = Math.min(Math.round(valueStart), len - count);
      // 从原始数据里截取需要显示的数据
      var newValues = originValues.slice(sliceSatrt, sliceSatrt + count);
      // 根据当前数据的比例，和定义的tickCount计算应该需要多少个ticks
      var newTickCount = Math.round(tickCount * originValues.length / newValues.length);
      // 计算新的ticks
      var catTicks = getTickMethod(tickMethod);
      var newTicks = catTicks({
        tickCount: newTickCount,
        values: originValues
      });
      // 如果新数组和当前显示的数组相同，则不更新
      if (isValuesEqual(currentValues, newValues) && isValuesEqual(currentTicks, newTicks)) {
        return;
      }
      scale.change({
        values: newValues,
        ticks: newTicks
      });
      return scale;
    }
    function updateLinearRange(scale, originScale, range) {
      var min = originScale.min,
        max = originScale.max;
      var start = range[0],
        end = range[1];
      var newMin = min + (max - min) * start;
      var newMax = min + (max - min) * end;
      scale.change({
        min: newMin,
        max: newMax,
        nice: false
      });
    }
    function updateScale(scale, values) {
      var isLinear = scale.isLinear;
      if (isLinear) {
        var _a = getRange(values),
          min = _a.min,
          max = _a.max;
        return scale.change({
          min: min,
          max: max,
          nice: true
        });
      }
    }
    function updateRange(scale, originScale, range) {
      var isCategory = scale.isCategory,
        isLinear = scale.isLinear;
      if (isCategory) {
        return updateCategoryRange(scale, originScale, range);
      }
      if (isLinear) {
        return updateLinearRange(scale, originScale, range);
      }
    }
    function updateFollow(scales, mainScale, data) {
      var mainField = mainScale.field,
        mainType = mainScale.type,
        mainValues = mainScale.values;
      // 转成 map 提高查询性能
      var mainValuesMap = {};
      mainValues.forEach(function (item) {
        mainValuesMap[item] = true;
      });
      return scales.map(function (scale) {
        var followField = scale.field;
        var values = [];
        data.forEach(function (item) {
          var value = mainType === 'timeCat' ? toTimeStamp$1(item[mainField]) : item[mainField];
          if (mainValuesMap[value]) {
            var followItemValue = item[followField];
            if (isArray(followItemValue)) {
              values.push.apply(values, followItemValue);
            } else {
              values.push(followItemValue);
            }
          }
        });
        return updateScale(scale, values);
      });
    }

    function quadraticOut(k) {
      return k * (2 - k);
    }

    function lerp$1(min, max, fraction) {
      return (max - min) * fraction + min;
    }
    function isNumberEqualRange(aRange, bRange) {
      if (!bRange) return false;
      for (var i = 0, len = aRange.length; i < len; i++) {
        if (!isNumberEqual(aRange[i], bRange[i])) return false;
      }
      return true;
    }
    function isEqualRange(aRange, bRange) {
      if (!bRange) return false;
      if (isArray(aRange)) {
        return isNumberEqualRange(aRange, bRange);
      }
      // object
      for (var i in aRange) {
        if (!isNumberEqualRange(aRange[i], bRange[i])) return false;
      }
      return true;
    }
    function cloneScale$1(scale, scaleConfig) {
      // @ts-ignore
      return new scale.constructor(__assign(__assign({}, scale.__cfg__), scaleConfig));
    }
    var withZoom = (function (View) {
      return /** @class */function (_super) {
        __extends(Zoom, _super);
        function Zoom(props) {
          var _this = this;
          var defaultProps = {
            onPanStart: function onPanStart() {},
            onPinchStart: function onPinchStart() {},
            onPan: function onPan() {},
            onPinch: function onPinch() {},
            onInit: function onInit() {},
            onPanEnd: function onPanEnd() {},
            onPinchEnd: function onPinchEnd() {},
            minCount: 10
          };
          _this = _super.call(this, __assign(__assign({}, defaultProps), props)) || this;
          _this.scale = {};
          _this.originScale = {};
          //swipe end x y
          _this.swipeEnd = {
            startX: 0,
            startY: 0,
            endX: 0,
            endY: 0
          };
          _this.onPanStart = function () {
            var scale = _this.scale;
            var onPanStart = _this.props.onPanStart;
            _this.onStart();
            onPanStart === null || onPanStart === void 0 ? void 0 : onPanStart({
              scale: scale
            });
          };
          _this.onPan = function (ev) {
            var onPan = _this.props.onPan;
            var dims = _this.dims;
            var range = {};
            each(dims, function (dim) {
              if (dim === 'x') {
                range['x'] = _this._doXPan(ev);
                return;
              }
              if (dim === 'y') {
                range['y'] = _this._doYPan(ev);
                return;
              }
            });
            _this.renderRange(range);
            onPan === null || onPan === void 0 ? void 0 : onPan(ev);
          };
          _this.onPanEnd = function () {
            var scale = _this.scale;
            var onPanEnd = _this.props.onPanEnd;
            _this.onEnd();
            onPanEnd === null || onPanEnd === void 0 ? void 0 : onPanEnd({
              scale: scale
            });
          };
          _this.onPinchStart = function () {
            var onPinchStart = _this.props.onPinchStart;
            _this.onStart();
            onPinchStart === null || onPinchStart === void 0 ? void 0 : onPinchStart();
          };
          _this.onPinch = function (ev) {
            var onPinch = _this.props.onPinch;
            var dims = _this.dims;
            var range = {};
            each(dims, function (dim) {
              if (dim === 'x') {
                range['x'] = _this._doXPinch(ev);
                return;
              }
              if (dim === 'y') {
                range['y'] = _this._doYPinch(ev);
                return;
              }
            });
            _this.renderRange(range);
            onPinch === null || onPinch === void 0 ? void 0 : onPinch(ev);
          };
          _this.onPinchEnd = function () {
            var scale = _this.scale;
            var onPinchEnd = _this.props.onPinchEnd;
            _this.onEnd();
            onPinchEnd === null || onPinchEnd === void 0 ? void 0 : onPinchEnd({
              scale: scale
            });
          };
          _this.onStart = function () {
            var state = _this.state;
            var range = state.range;
            _this.startRange = range;
            _this._cancelAnimationFrame();
          };
          _this.onSwipe = function (ev) {
            var _a = _this,
              props = _a.props,
              state = _a.state;
            // 滑动速率
            var velocity = ev.velocity,
              direction = ev.direction,
              _b = ev.velocityX,
              velocityX = _b === void 0 ? 0 : _b,
              _c = ev.velocityY,
              velocityY = _c === void 0 ? 0 : _c,
              points = ev.points;
            var mode = props.mode,
              swipe = props.swipe;
            var range = state.range;
            if (!swipe || !mode) {
              return;
            }
            if (mode.length === 1) {
              _this.animateSwipe(mode, range[mode], direction === 'right' || direction === 'down' ? -velocity : velocity);
              return;
            }
            var _d = points[0],
              x = _d.x,
              y = _d.y;
            // 边界处理
            if (Math.abs((range === null || range === void 0 ? void 0 : range.x[0]) - 0) < 0.0005 && velocityX > 0) return;
            if (Math.abs((range === null || range === void 0 ? void 0 : range.x[1]) - 1) < 0.0005 && velocityX < 0) return;
            if (Math.abs((range === null || range === void 0 ? void 0 : range.y[0]) - 0) < 0.0005 && velocityY < 0) return;
            if (Math.abs((range === null || range === void 0 ? void 0 : range.x[1]) - 1) < 0.0005 && velocityY > 0) return;
            _this.swipeEnd = {
              startX: x,
              startY: y,
              endX: x + velocityX * 50,
              endY: y - velocityY * 50
            };
            _this.onStart();
            _this.update();
          };
          _this.onEnd = function () {
            _this.startRange = null;
          };
          var mode = props.mode;
          _this.dims = isArray(mode) ? mode : [mode];
          return _this;
        }
        Zoom.prototype.didMount = function () {
          var scale = this.scale;
          var onInit = this.props.onInit;
          onInit({
            scale: scale
          });
          this._bindEvents();
        };
        Zoom.prototype.willReceiveProps = function (nextProps) {
          // @ts-ignore
          var nextRange = nextProps.range,
            nextData = nextProps.data;
          var _a = this.props,
            lastRange = _a.range,
            lastData = _a.data;
          if (nextData !== lastData) {
            this._cancelAnimationFrame();
          }
          if (!equal(nextRange, lastRange)) {
            var cacheRange_1 = {};
            each(this.dims, function (dim) {
              cacheRange_1[dim] = nextRange;
            });
            this.state = {
              range: cacheRange_1
            };
          }
        };
        Zoom.prototype.willMount = function () {
          var _this = this;
          var _a = this,
            props = _a.props,
            dims = _a.dims;
          var minCount = props.minCount,
            range = props.range;
          var valueLength = Number.MIN_VALUE;
          var cacheRange = {};
          each(dims, function (dim) {
            var scale = _this._getScale(dim);
            var values = scale.values;
            valueLength = values.length > valueLength ? values.length : valueLength;
            _this.scale[dim] = scale;
            _this.originScale[dim] = cloneScale$1(scale);
            _this.updateRange(range, dim);
            cacheRange[dim] = range;
          });
          // 图表上最少显示 MIN_COUNT 个数据
          this.minScale = minCount / valueLength;
          this.renderRange(cacheRange);
        };
        Zoom.prototype.willUpdate = function () {
          var _this = this;
          var _a = this,
            props = _a.props,
            state = _a.state,
            dims = _a.dims;
          var minCount = props.minCount,
            range = props.range;
          var valueLength = Number.MIN_VALUE;
          var cacheRange = {};
          each(dims, function (dim) {
            var scale = _this._getScale(dim);
            // scale 没有变化, 不处理
            if (scale === _this.scale[dim]) {
              return;
            }
            var values = scale.values;
            valueLength = values.length > valueLength ? values.length : valueLength;
            _this.scale[dim] = scale;
            _this.originScale[dim] = cloneScale$1(scale);
            // 让 range 触发更新
            _this.state.range[dim] = [0, 1];
            _this.updateRange(range, dim);
            cacheRange[dim] = range;
          });
          // 有变化
          if (Object.keys(cacheRange).length > 0) {
            this.minScale = minCount / valueLength;
            var newRange = __assign(__assign({}, state.range), cacheRange);
            this.renderRange(newRange);
          }
        };
        Zoom.prototype.didUnmount = function () {
          this._cancelAnimationFrame();
          this._unBindEvents();
        };
        Zoom.prototype._requestAnimationFrame = function (calllback) {
          var context = this.context;
          var requestAnimationFrame = context.canvas.requestAnimationFrame;
          this.loop = requestAnimationFrame(calllback);
          return this.loop;
        };
        Zoom.prototype._cancelAnimationFrame = function () {
          var _a = this,
            loop = _a.loop,
            context = _a.context;
          if (loop) {
            context.canvas.cancelAnimationFrame(loop);
          }
        };
        Zoom.prototype._bindEvents = function () {
          var _a = this.props,
            chart = _a.chart,
            pan = _a.pan,
            pinch = _a.pinch,
            swipe = _a.swipe;
          // 统一绑定事件
          if (pan !== false) {
            chart.on('panstart', this.onPanStart);
            chart.on('pan', this.onPan);
            chart.on('panend', this.onPanEnd);
          }
          if (pinch !== false) {
            chart.on('pinch', this.onPinch);
            chart.on('pinchstart', this.onPinchStart);
            chart.on('pinchend', this.onPinchEnd);
          }
          if (swipe !== false) {
            chart.on('swipe', this.onSwipe);
          }
        };
        Zoom.prototype._unBindEvents = function () {
          var _a = this.props,
            chart = _a.chart,
            pan = _a.pan,
            pinch = _a.pinch,
            swipe = _a.swipe;
          // 统一绑定事件
          if (pan !== false) {
            chart.off('panstart', this.onPanStart);
            chart.off('pan', this.onPan);
            chart.off('panend', this.onPanEnd);
          }
          if (pinch !== false) {
            chart.off('pinch', this.onPinch);
            chart.off('pinchstart', this.onPinchStart);
            chart.off('pinchend', this.onPinchEnd);
          }
          if (swipe !== false) {
            chart.off('swipe', this.onSwipe);
          }
        };
        Zoom.prototype.update = function () {
          var _this = this;
          var _a = this.swipeEnd,
            startX = _a.startX,
            startY = _a.startY,
            endX = _a.endX,
            endY = _a.endY;
          var x = lerp$1(startX, endX, 0.05);
          var y = lerp$1(startY, endY, 0.05);
          this.swipeEnd = {
            startX: x,
            startY: y,
            endX: endX,
            endY: endY
          };
          var props = this.props;
          var coord = props.coord;
          var coordWidth = coord.width,
            coordHeight = coord.height;
          var range = {};
          range['x'] = this._doPan((x - startX) / coordWidth, 'x');
          range['y'] = this._doPan((y - startY) / coordHeight, 'y');
          this.renderRange(range);
          this.startRange = range;
          this._requestAnimationFrame(function () {
            return _this.update();
          });
          if (Math.abs(x - endX) < 0.0005 && Math.abs(y - endY) < 0.0005) {
            this.onEnd();
            this._cancelAnimationFrame();
          }
        };
        Zoom.prototype.animateSwipe = function (dim, dimRange, velocity) {
          var _this = this;
          var props = this.props;
          var _a = props.swipeDuration,
            swipeDuration = _a === void 0 ? 1000 : _a;
          var diff = (dimRange[1] - dimRange[0]) * velocity;
          var startTime = Date.now();
          var updateRange = function updateRange(t) {
            var newDimRange = [dimRange[0] + diff * t, dimRange[1] + diff * t];
            var newRange = _this.updateRange(newDimRange, dim);
            _this.renderRange({
              x: newRange
            });
          };
          // 更新动画
          var _update = function update() {
            // 计算动画已经进行的时间
            var currentTime = Date.now() - startTime;
            // 如果动画已经结束，则清除定时器
            if (currentTime >= swipeDuration) {
              updateRange(1);
              return;
            }
            // 计算缓动值
            var progress = currentTime / swipeDuration;
            var easedProgress = quadraticOut(progress);
            updateRange(easedProgress);
            _this._requestAnimationFrame(function () {
              _update();
            });
          };
          _update();
        };
        Zoom.prototype._doXPan = function (ev) {
          var direction = ev.direction,
            deltaX = ev.deltaX;
          if (this.props.mode.length === 1 && (direction === 'up' || direction === 'down')) {
            return this.state.range['x'];
          }
          ev.preventDefault && ev.preventDefault();
          var props = this.props;
          var coord = props.coord,
            _a = props.panSensitive,
            panSensitive = _a === void 0 ? 1 : _a;
          var coordWidth = coord.width;
          var ratio = deltaX / coordWidth * panSensitive;
          var newRange = this._doPan(ratio, 'x');
          return newRange;
        };
        Zoom.prototype._doYPan = function (ev) {
          var direction = ev.direction,
            deltaY = ev.deltaY;
          if (this.props.mode.length === 1 && (direction === 'left' || direction === 'right')) {
            return this.state.range['y'];
          }
          ev.preventDefault && ev.preventDefault();
          var props = this.props;
          var coord = props.coord,
            _a = props.panSensitive,
            panSensitive = _a === void 0 ? 1 : _a;
          var coordHeight = coord.height;
          var ratio = -deltaY / coordHeight * panSensitive;
          var newRange = this._doPan(ratio, 'y');
          return newRange;
        };
        Zoom.prototype._doPan = function (ratio, dim) {
          var startRange = this.startRange;
          var _a = startRange[dim],
            start = _a[0],
            end = _a[1];
          var rangeLen = end - start;
          var rangeOffset = rangeLen * ratio;
          var newStart = start - rangeOffset;
          var newEnd = end - rangeOffset;
          var newRange = this.updateRange([newStart, newEnd], dim);
          return newRange;
        };
        Zoom.prototype._doXPinch = function (ev) {
          ev.preventDefault && ev.preventDefault();
          var zoom = ev.zoom,
            center = ev.center;
          var props = this.props;
          var coord = props.coord;
          var coordWidth = coord.width,
            left = coord.left,
            right = coord.right;
          var leftLen = Math.abs(center.x - left);
          var rightLen = Math.abs(right - center.x);
          // 计算左右缩放的比例
          var leftZoom = leftLen / coordWidth;
          var rightZoom = rightLen / coordWidth;
          var newRange = this._doPinch(leftZoom, rightZoom, zoom, 'x');
          return newRange;
        };
        Zoom.prototype._doYPinch = function (ev) {
          ev.preventDefault && ev.preventDefault();
          var zoom = ev.zoom,
            center = ev.center;
          var props = this.props;
          var coord = props.coord;
          var coordHeight = coord.height,
            top = coord.top,
            bottom = coord.bottom;
          var topLen = Math.abs(center.y - top);
          var bottomLen = Math.abs(bottom - center.y);
          // 计算左右缩放的比例
          var topZoom = topLen / coordHeight;
          var bottomZoom = bottomLen / coordHeight;
          var newRange = this._doPinch(topZoom, bottomZoom, zoom, 'y');
          return newRange;
        };
        Zoom.prototype._doPinch = function (startRatio, endRatio, zoom, dim) {
          var _a = this,
            startRange = _a.startRange,
            minScale = _a.minScale,
            props = _a.props;
          var _b = props.pinchSensitive,
            pinchSensitive = _b === void 0 ? 1 : _b;
          var _c = startRange[dim],
            start = _c[0],
            end = _c[1];
          var zoomOffset = zoom < 1 ? (1 / zoom - 1) * pinchSensitive : (1 - zoom) * pinchSensitive;
          var rangeLen = end - start;
          var rangeOffset = rangeLen * zoomOffset;
          var startOffset = rangeOffset * startRatio;
          var endOffset = rangeOffset * endRatio;
          var newStart = Math.max(0, start - startOffset);
          var newEnd = Math.min(1, end + endOffset);
          var newRange = [newStart, newEnd];
          // 如果已经到了最小比例，则不能再继续再放大
          if (newEnd - newStart < minScale) {
            return this.state.range[dim];
          }
          return this.updateRange(newRange, dim);
        };
        Zoom.prototype.updateRange = function (originalRange, dim) {
          if (!originalRange) return;
          var start = originalRange[0],
            end = originalRange[1];
          var rangeLength = end - start;
          // 处理边界值
          var newRange;
          if (start < 0) {
            newRange = [0, rangeLength];
          } else if (end > 1) {
            newRange = [1 - rangeLength, 1];
          } else {
            newRange = originalRange;
          }
          var _a = this,
            props = _a.props,
            scale = _a.scale,
            originScale = _a.originScale,
            state = _a.state;
          var data = props.data,
            autoFit = props.autoFit;
          var range = state.range;
          if (range && isEqualRange(newRange, range[dim])) return newRange;
          // 更新主 scale
          updateRange(scale[dim], originScale[dim], newRange);
          if (autoFit) {
            var followScale = this._getFollowScales(dim);
            this.updateFollow(followScale, scale[dim], data);
          }
          return newRange;
        };
        Zoom.prototype.updateFollow = function (scales, mainScale, data) {
          updateFollow(scales, mainScale, data);
        };
        Zoom.prototype._getScale = function (dim) {
          var _a = this.props,
            coord = _a.coord,
            chart = _a.chart;
          if (dim === 'x') {
            return coord.transposed ? chart.getYScales()[0] : chart.getXScales()[0];
          } else {
            return coord.transposed ? chart.getXScales()[0] : chart.getYScales()[0];
          }
        };
        Zoom.prototype._getFollowScales = function (dim) {
          var _a = this.props,
            coord = _a.coord,
            chart = _a.chart;
          if (dim === 'x') {
            return coord.transposed ? chart.getXScales() : chart.getYScales();
          }
          if (dim === 'y') {
            return coord.transposed ? chart.getYScales() : chart.getXScales();
          }
        };
        Zoom.prototype.renderRange = function (range) {
          var _a = this,
            state = _a.state,
            props = _a.props;
          if (isEqualRange(range, state.range)) return;
          var chart = props.chart;
          // 手势变化不执行动画
          var animate = chart.animate;
          chart.setAnimate(false);
          // 后面的 forceUpdate 会强制更新，所以不用 setState，直接更新
          state.range = range;
          chart.forceUpdate(function () {
            chart.setAnimate(animate);
          });
        };
        Zoom.prototype.render = function () {
          return jsx(View, __assign({}, this.props, this.state));
        };
        return Zoom;
      }(Component);
    });

    var withScrollBar = (function (View) {
      return /** @class */function (_super) {
        __extends(ScrollBar, _super);
        function ScrollBar() {
          return _super !== null && _super.apply(this, arguments) || this;
        }
        ScrollBar.prototype.willMount = function () {
          _super.prototype.willMount.call(this);
          var _a = this,
            context = _a.context,
            props = _a.props;
          var visible = props.visible,
            _b = props.position,
            position = _b === void 0 ? 'bottom' : _b,
            _c = props.margin,
            margin = _c === void 0 ? '16px' : _c,
            chart = props.chart;
          var marginNumber = context.px2hd(margin);
          if (visible === false) {
            return null;
          }
          chart.updateCoordFor(this, {
            position: position,
            width: position === 'left' || position === 'right' ? marginNumber : 0,
            height: position === 'bottom' || position === 'top' ? marginNumber : 0
          });
        };
        ScrollBar.prototype.render = function () {
          var _a = this,
            props = _a.props,
            state = _a.state;
          var visible = props.visible;
          if (visible === false) {
            return null;
          }
          return jsx(View, __assign({
            position: "bottom"
          }, props, state));
        };
        return ScrollBar;
      }(withZoom(View));
    });

    var Horizontal = (function (props, context) {
      var coord = props.coord,
        range = props.range,
        position = props.position,
        layout = props.layout,
        style = props.style,
        background = props.background,
        barStyle = props.barStyle;
      var left = coord.left,
        width = coord.width;
      var top = layout.top,
        height = layout.height;
      var _a = (range === null || range === void 0 ? void 0 : range.x) || (range === null || range === void 0 ? void 0 : range.y),
        start = _a[0],
        end = _a[1];
      var barLeft = width * start;
      var barWidth = width * (end - start);
      if (isNaN(barWidth)) return;
      return jsx("group", {
        style: __assign({
          display: 'flex',
          left: left,
          top: position === 'top' ? top - context.px2hd('8px') : top + height
        }, style)
      }, jsx("line", {
        style: __assign({
          display: 'flex',
          position: 'absolute',
          left: 0,
          width: width,
          height: 0,
          stroke: 'rgba(202, 215, 239, .2)',
          lineCap: 'round',
          lineWidth: '8px'
        }, background)
      }), jsx("line", {
        style: __assign({
          display: 'flex',
          position: 'absolute',
          left: barLeft,
          width: barWidth,
          height: 0,
          stroke: 'rgba(202, 215, 239, .5)',
          lineCap: 'round',
          lineWidth: '8px'
        }, barStyle)
      }));
    });

    var Vertical = (function (props, context) {
      var coord = props.coord,
        range = props.range,
        position = props.position,
        layout = props.layout,
        style = props.style,
        background = props.background,
        barStyle = props.barStyle;
      var top = coord.top,
        height = coord.height;
      var left = layout.left,
        width = layout.width;
      var _a = (range === null || range === void 0 ? void 0 : range.y) || (range === null || range === void 0 ? void 0 : range.x),
        start = _a[0],
        end = _a[1];
      var barTop = height * start;
      var barHeight = height * (end - start);
      return jsx("group", {
        style: __assign({
          display: 'flex',
          top: top,
          left: position === 'left' ? left - context.px2hd('8px') : left + width
        }, style)
      }, jsx("line", {
        style: __assign({
          position: 'absolute',
          top: 0,
          left: 0,
          width: 0,
          height: height,
          stroke: 'rgba(202, 215, 239, .2)',
          lineCap: 'round',
          lineWidth: '8px'
        }, background)
      }), jsx("line", {
        style: __assign({
          position: 'absolute',
          top: barTop,
          width: 0,
          height: barHeight,
          stroke: 'rgba(202, 215, 239, .5)',
          lineCap: 'round',
          lineWidth: '8px'
        }, barStyle)
      }));
    });

    var ScrollBarView = (function (props) {
      var position = props.position,
        mode = props.mode;
      if (mode.length > 1) {
        return jsx("group", null, jsx(Vertical, __assign({}, props)), jsx(Horizontal, __assign({}, props)));
      }
      if (position === 'left' || position === 'right') {
        return jsx(Vertical, __assign({}, props));
      }
      return jsx(Horizontal, __assign({}, props));
    });

    var index$c = withScrollBar(ScrollBarView);

    // 默认配色
    var COLORS = ['#E62C3B', '#0E9976', '#999999' // 平盘
    ];
    var withCandlestick = (function (View) {
      return /** @class */function (_super) {
        __extends(Candlestick, _super);
        function Candlestick() {
          return _super !== null && _super.apply(this, arguments) || this;
        }
        Candlestick.prototype.getDefaultCfg = function () {
          return {
            geomType: 'candlestick'
          };
        };
        Candlestick.prototype.getSize = function () {
          var _a = this,
            attrs = _a.attrs,
            props = _a.props;
          var _b = props.sizeRatio,
            sizeRatio = _b === void 0 ? 0.5 : _b;
          var x = attrs.x;
          var scale = x.scale;
          var values = scale.values;
          return 1 / values.length * sizeRatio;
        };
        Candlestick.prototype._getColor = function (colors, child, prevChild) {
          var normalized = child.normalized;
          // 处理颜色
          var y = normalized.y;
          var open = y[0],
            close = y[1];
          if (close > open) {
            return colors[0];
          }
          if (close < open) {
            return colors[1];
          }
          // 相等的情况下，再和昨日的收盘价比较
          if (!prevChild) {
            // 第一个固定为涨
            return colors[0];
          }
          var prevNormalized = prevChild.normalized;
          // 处理颜色
          var prevY = prevNormalized.y;
          var prevClose = prevY[1];
          if (close > prevClose) {
            return colors[0];
          }
          if (close < prevClose) {
            return colors[1];
          }
          return colors[2];
        };
        Candlestick.prototype.mapping = function () {
          var records = _super.prototype.mapping.call(this);
          var props = this.props;
          var coord = props.coord;
          var y0 = this.getY0Value();
          var defaultSize = this.getSize();
          var colorAttr = this.getAttr('color');
          var colors = colorAttr ? colorAttr.range : COLORS;
          for (var i = 0, len = records.length; i < len; i++) {
            var record = records[i];
            var children = record.children;
            for (var j = 0, len_1 = children.length; j < len_1; j++) {
              var child = children[j];
              var normalized = child.normalized,
                mappedSize = child.size;
              // 没有指定size，则根据数据来计算默认size
              if (isNil(mappedSize)) {
                var x = normalized.x,
                  y = normalized.y,
                  _a = normalized.size,
                  size = _a === void 0 ? defaultSize : _a;
                mix(child, coord.convertRect({
                  x: x,
                  y: y,
                  y0: y0,
                  size: size
                }));
              } else {
                var x = child.x,
                  y = child.y;
                var rect = {
                  x: x,
                  y: y,
                  y0: y0,
                  size: mappedSize
                };
                mix(child, coord.transformToRect(rect));
              }
              // 处理颜色
              child.color = this._getColor(colors, child, children[j - 1]);
              mix(child.shape, this.getSelectionStyle(child));
            }
          }
          return records;
        };
        Candlestick.prototype.render = function () {
          var props = this.props;
          var records = this.mapping();
          return jsx(View, __assign({}, props, {
            records: records
          }));
        };
        return Candlestick;
      }(Geometry);
    });

    var CandlestickView = (function (props) {
      var records = props.records,
        animation = props.animation,
        y0 = props.y0,
        onClick = props.onClick;
      return jsx("group", null, records.map(function (record) {
        var key = record.key,
          children = record.children;
        return jsx("group", {
          key: key
        }, children.map(function (item) {
          var key = item.key,
            xMin = item.xMin,
            xMax = item.xMax,
            yMin = item.yMin,
            yMax = item.yMax,
            x = item.x,
            y = item.y,
            color = item.color,
            shape = item.shape;
          if (isNaN(xMin) || isNaN(xMax) || isNaN(yMin) || isNaN(yMax)) {
            return null;
          }
          return jsx("group", null, jsx("line", {
            key: "".concat(key, "-line"),
            style: {
              x1: x,
              y1: y[2],
              x2: x,
              y2: y[3],
              stroke: color,
              lineWidth: '2px',
              lineCap: 'round'
            },
            animation: {
              appear: {
                easing: 'linear',
                duration: 300,
                property: ['y1', 'y2'],
                // @ts-ignore
                start: {
                  y1: 0,
                  y2: 0
                }
              },
              update: {
                easing: 'linear',
                duration: 300,
                property: ['x1', 'y1', 'x2', 'y2']
              }
            }
          }), jsx("rect", {
            key: "".concat(key, "-rect"),
            style: __assign({
              x: xMin,
              y: yMin,
              // 当 min === max 时，设置 1，否则会出现 0 的情况
              width: Math.max(xMax - xMin, 1),
              height: Math.max(yMax - yMin, 1),
              fill: color,
              radius: '2px'
            }, shape),
            onClick: onClick,
            animation: deepMix({
              appear: {
                easing: 'linear',
                duration: 300,
                property: ['y', 'height'],
                start: {
                  y: y0,
                  height: 0
                }
              },
              update: {
                easing: 'linear',
                duration: 300,
                property: ['x', 'y', 'width', 'height']
              }
            }, animation)
          }));
        }));
      }));
    });

    var index$d = withCandlestick(CandlestickView);

    var Pictorial = /** @class */function (_super) {
      __extends(Pictorial, _super);
      function Pictorial() {
        return _super !== null && _super.apply(this, arguments) || this;
      }
      Pictorial.prototype.render = function () {
        var _a = this,
          props = _a.props,
          context = _a.context;
        var px2hd = context.px2hd;
        var _Symbol = px2hd(props).symbol;
        var records = this.mapping();
        return jsx("group", null, records.map(function (record) {
          var key = record.key,
            children = record.children;
          return jsx("group", {
            key: key
          }, children.map(function (item) {
            var xMax = item.xMax,
              xMin = item.xMin,
              yMax = item.yMax,
              yMin = item.yMin;
            return jsx(_Symbol, __assign({}, item, {
              width: xMax - xMin,
              height: yMax - yMin,
              px2hd: px2hd
            }));
          }));
        }));
      };
      return Pictorial;
    }(withInterval({}));

    // 把 FEngine 全部透出
    //@ts-ignore
    var index$e = {
      version: "\"5.5.2\""
    };

    exports.ArcGuide = ArcGuide;
    exports.Area = index$1;
    exports.AreaView = AreaView;
    exports.Axis = index$4;
    exports.AxisView = AxisView;
    exports.Candlestick = index$d;
    exports.CandlestickView = CandlestickView;
    exports.Canvas = Canvas$1;
    exports.CanvasRenderer = Renderer;
    exports.Chart = Chart;
    exports.Children = Children;
    exports.Component = Component;
    exports.Fragment = fragment;
    exports.Gauge = index$b;
    exports.GaugeView = GaugeView;
    exports.Geometry = Geometry;
    exports.Gesture = Gesture;
    exports.Guide = index$6;
    exports.ImageGuide = ImageGuide;
    exports.Interval = index$2;
    exports.IntervalView = intervalView;
    exports.Legend = index$5;
    exports.LegendView = LegendView;
    exports.Line = index;
    exports.LineGuide = LineGuide;
    exports.LineView = LineView;
    exports.LottieGuide = LottieGuide;
    exports.Pictorial = Pictorial;
    exports.PieLabel = index$a;
    exports.PieLabelView = PieLabelView;
    exports.Player = Player;
    exports.Point = index$3;
    exports.PointGuide = PointGuide;
    exports.PointView = PointView;
    exports.PolylineGuide = PolylineGuide;
    exports.RectGuide = RectGuide;
    exports.Scale = Scale;
    exports.ScrollBar = index$c;
    exports.ScrollBarView = ScrollBarView;
    exports.Smooth = smooth;
    exports.Sunburst = index$9;
    exports.SunburstView = SunburstView;
    exports.TagGuide = TagGuide;
    exports.TextGuide = TextGuide;
    exports.Timeline = Timeline;
    exports.Tooltip = index$7;
    exports.TooltipView = TooltipView;
    exports.Treemap = index$8;
    exports.TreemapView = TreemapView;
    exports.Zoom = withZoom;
    exports.computeLayout = computeLayout$1;
    exports.createContext = createContext;
    exports.createElement = jsx;
    exports.createRef = createRef;
    exports.default = index$e;
    exports.isEqual = equal;
    exports.jsx = jsx;
    exports.parseColor = parseColor;
    exports.registerTag = registerTag;
    exports.withArea = withArea;
    exports.withAxis = withAxis;
    exports.withCandlestick = withCandlestick;
    exports.withGauge = withGauge;
    exports.withGuide = withGuide;
    exports.withInterval = withInterval;
    exports.withLegend = withLegend;
    exports.withLine = withLine;
    exports.withPieLabel = withPieLabel;
    exports.withPoint = withPoint;
    exports.withScrollBar = withScrollBar;
    exports.withSunburst = withSunburst;
    exports.withTooltip = withTooltip;
    exports.withTreemap = withTreemap;

    Object.defineProperty(exports, '__esModule', { value: true });

})));