可视化调试某个js对象的属性UI插件 class HTUI

 

依赖的类:

"use strict";

var __emptyPoint = null, __emptyPointA = null;

const ColorRefTable = {
    "aliceblue": "#f0f8ff",
    "antiquewhite": "#faebd7",
    "aqua": "#00ffff",
    "aquamarine": "#7fffd4",
    "azure": "#f0ffff",
    "beige": "#f5f5dc",
    "bisque": "#ffe4c4",
    "black": "#000000",
    "blanchedalmond": "#ffebcd",
    "blue": "#0000ff",
    "blueviolet": "#8a2be2",
    "brown": "#a52a2a",
    "burlywood": "#deb887",
    "cadetblue": "#5f9ea0",
    "chartreuse": "#7fff00",
    "chocolate": "#d2691e",
    "coral": "#ff7f50",
    "cornsilk": "#fff8dc",
    "crimson": "#dc143c",
    "cyan": "#00ffff",
    "darkblue": "#00008b",
    "darkcyan": "#008b8b",
    "darkgoldenrod": "#b8860b",
    "darkgray": "#a9a9a9",
    "darkgreen": "#006400",
    "darkgrey": "#a9a9a9",
    "darkkhaki": "#bdb76b",
    "darkmagenta": "#8b008b",
    "firebrick": "#b22222",
    "darkolivegreen": "#556b2f",
    "darkorange": "#ff8c00",
    "darkorchid": "#9932cc",
    "darkred": "#8b0000",
    "darksalmon": "#e9967a",
    "darkseagreen": "#8fbc8f",
    "darkslateblue": "#483d8b",
    "darkslategray": "#2f4f4f",
    "darkslategrey": "#2f4f4f",
    "darkturquoise": "#00ced1",
    "darkviolet": "#9400d3",
    "deeppink": "#ff1493",
    "deepskyblue": "#00bfff",
    "dimgray": "#696969",
    "dimgrey": "#696969",
    "dodgerblue": "#1e90ff",
    "floralwhite": "#fffaf0",
    "forestgreen": "#228b22",
    "fuchsia": "#ff00ff",
    "gainsboro": "#dcdcdc",
    "ghostwhite": "#f8f8ff",
    "gold": "#ffd700",
    "goldenrod": "#daa520",
    "gray": "#808080",
    "green": "#008000",
    "greenyellow": "#adff2f",
    "grey": "#808080",
    "honeydew": "#f0fff0",
    "hotpink": "#ff69b4",
    "indianred": "#cd5c5c",
    "indigo": "#4b0082",
    "ivory": "#fffff0",
    "khaki": "#f0e68c",
    "lavender": "#e6e6fa",
    "lavenderblush": "#fff0f5",
    "lawngreen": "#7cfc00",
    "lemonchiffon": "#fffacd",
    "lightblue": "#add8e6",
    "lightcoral": "#f08080",
    "lightcyan": "#e0ffff",
    "lightgoldenrodyellow": "#fafad2",
    "lightgray": "#d3d3d3",
    "lightgreen": "#90ee90",
    "lightgrey": "#d3d3d3",
    "lightpink": "#ffb6c1",
    "lightsalmon": "#ffa07a",
    "lightseagreen": "#20b2aa",
    "lightskyblue": "#87cefa",
    "lightslategray": "#778899",
    "lightslategrey": "#778899",
    "lightsteelblue": "#b0c4de",
    "lightyellow": "#ffffe0",
    "lime": "#00ff00",
    "limegreen": "#32cd32",
    "linen": "#faf0e6",
    "magenta": "#ff00ff",
    "maroon": "#800000",
    "mediumaquamarine": "#66cdaa",
    "mediumblue": "#0000cd",
    "mediumorchid": "#ba55d3",
    "mediumpurple": "#9370db",
    "mediumseagreen": "#3cb371",
    "mediumslateblue": "#7b68ee",
    "mediumspringgreen": "#00fa9a",
    "mediumturquoise": "#48d1cc",
    "mediumvioletred": "#c71585",
    "midnightblue": "#191970",
    "mintcream": "#f5fffa",
    "mistyrose": "#ffe4e1",
    "moccasin": "#ffe4b5",
    "navajowhite": "#ffdead",
    "navy": "#000080",
    "oldlace": "#fdf5e6",
    "olive": "#808000",
    "olivedrab": "#6b8e23",
    "orange": "#ffa500",
    "orangered": "#ff4500",
    "orchid": "#da70d6",
    "palegoldenrod": "#eee8aa",
    "palegreen": "#98fb98",
    "paleturquoise": "#afeeee",
    "palevioletred": "#db7093",
    "papayawhip": "#ffefd5",
    "peachpuff": "#ffdab9",
    "peru": "#cd853f",
    "pink": "#ffc0cb",
    "plum": "#dda0dd",
    "powderblue": "#b0e0e6",
    "purple": "#800080",
    "red": "#ff0000",
    "rosybrown": "#bc8f8f",
    "royalblue": "#4169e1",
    "saddlebrown": "#8b4513",
    "salmon": "#fa8072",
    "sandybrown": "#f4a460",
    "seagreen": "#2e8b57",
    "seashell": "#fff5ee",
    "sienna": "#a0522d",
    "silver": "#c0c0c0",
    "skyblue": "#87ceeb",
    "slateblue": "#6a5acd",
    "slategray": "#708090",
    "slategrey": "#708090",
    "snow": "#fffafa",
    "springgreen": "#00ff7f",
    "steelblue": "#4682b4",
    "tan": "#d2b48c",
    "teal": "#008080",
    "thistle": "#d8bfd8",
    "tomato": "#ff6347",
    "turquoise": "#40e0d0",
    "violet": "#ee82ee",
    "wheat": "#f5deb3",
    "white": "#ffffff",
    "whitesmoke": "#f5f5f5",
    "yellow": "#ffff00",
    "yellowgreen": "#9acd32"
},

UTILS = {

    get time(){
        return Date.now();
    },

    get isMobile(){
        return /Android|webOS|iPhone|iPod|BlackBerry|SymbianOS|Windows Phone|iPad/i.test(navigator.userAgent);
    },

    get emptyPoint(){
        if(__emptyPoint === null) __emptyPoint = new Point();
        return __emptyPoint;
    },

    get emptyPointA(){
        if(__emptyPointA === null) __emptyPointA = new Point();
        return __emptyPointA;
    },

    get colorTable(){
        return ColorRefTable;
    },
    
    emptyArray(arr){
        return !Array.isArray(arr) || arr.length === 0;
    },

    isObject(obj){
        
        return obj !== null && typeof obj === "object" && Array.isArray(obj) === false;
        
    },
    
    isNumber(num){

        return typeof num === "number" && isNaN(num) === false;

    },

    //获取最后一个点后面的字符(不包含点)
    getExtension(fileName){
        /* let type = "", str = fileName.split('').reverse().join('');
        for(let k = 0, len = str.length; k < len; k++){
            if(str[k] === ".") break;
            type += str[k];
        }
        return type.split('').reverse().join(''); */
        return fileName.substring(fileName.lastIndexOf(".")+1);
    },
    get getFileType(){
        console.warn("现在用 getExtension 替代 getFileType");
        return this.getExtension;
    },

    getFileName(fileName){
        return fileName.substring(0, fileName.lastIndexOf("."));
    },

    //删除 string 所有的空格
    deleteSpaceAll(str){
        const len = str.length;
        var result = '';
        for(let i = 0; i < len; i++){
            if(str[i] !== ' ') result += str[i]
        }

        return result
    },

    //str 是否全是中文
    isChains(str){
        return !(/[^\u4E00-\u9FA5]/.test(str));
    },

    //删除 string 两边空格
    removeSpaceSides(string){

        return string.replace(/(^\s*)|(\s*$)/g, "");

    },

    //var str = "abcd[123]efg"; UTILS.replaceText([..."a{123}b"], "{", "}", (str: "123") => {return "-"}) //["a", "-", "b"]
    replaceText(strs, s, e, f){
        var si = -1, str = "";
        for(let i = 0; i < strs.length; i++){
            if(typeof strs[i] !== "string"){
                si = -1;
                str = "";
                continue;
            }
    
            if(si === -1){
                if(strs[i] === s) si = i;
                continue;
            }
    
            if(strs[i] === e){
                strs[i] = f(str);
                i = i-si;
                strs.splice(si, i <= 0 ? 1 : i);
                return this.replaceText(strs, s, e, f);
            }
            
            str += strs[i];
        }
    
        return strs;
    },

    //返回 num 与 num1 之间的随机数
    random(num, num1){
        
        if(num < num1) return Math.random() * (num1 - num) + num;

        else if(num > num1) return Math.random() * (num - num1) + num1;

        else return num;
        
    },

    getByteStr(str = ""){
        var byte = 0;
        for(let i = 0; i < str.length; i++){
            if(str.charCodeAt(i) > 255){
                byte += 2;
            } else {
                byte++;
            }
        }
        return byte;
    },

    //生成 UUID
    generateUUID: function (){
        const _lut = [];
    
        for ( let i = 0; i < 256; i ++ ) {
    
            _lut[ i ] = ( i < 16 ? '0' : '' ) + ( i ).toString( 16 );
    
        }
    
        return function (){
            const d0 = Math.random() * 0xffffffff | 0;
            const d1 = Math.random() * 0xffffffff | 0;
            const d2 = Math.random() * 0xffffffff | 0;
            const d3 = Math.random() * 0xffffffff | 0;
            const uuid = _lut[ d0 & 0xff ] + _lut[ d0 >> 8 & 0xff ] + _lut[ d0 >> 16 & 0xff ] + _lut[ d0 >> 24 & 0xff ] + '-' +
            _lut[ d1 & 0xff ] + _lut[ d1 >> 8 & 0xff ] + '-' + _lut[ d1 >> 16 & 0x0f | 0x40 ] + _lut[ d1 >> 24 & 0xff ] + '-' +
            _lut[ d2 & 0x3f | 0x80 ] + _lut[ d2 >> 8 & 0xff ] + '-' + _lut[ d2 >> 16 & 0xff ] + _lut[ d2 >> 24 & 0xff ] +
            _lut[ d3 & 0xff ] + _lut[ d3 >> 8 & 0xff ] + _lut[ d3 >> 16 & 0xff ] + _lut[ d3 >> 24 & 0xff ];
    
            return uuid.toLowerCase(); //toLowerCase() 这里展平连接的字符串以节省堆内存空间
        }
    }(),

    //欧几里得距离(两点的直线距离)
    distance(x, y, x1, y1){
        
        return Math.sqrt(Math.pow(x - x1, 2) + Math.pow(y - y1, 2));

    },

    getSameScale(oldSize, newSize){
        if(oldSize.width < oldSize.height && newSize.width < newSize.height){
            return newSize.width / oldSize.width;
        }
        if(oldSize.width > oldSize.height && newSize.width > newSize.height){
            return newSize.height / oldSize.height;
        }
        if(oldSize.width / newSize.width < oldSize.height / newSize.height){
            return newSize.height / oldSize.height;
        }
        const aspect = oldSize.width / oldSize.height;
        return aspect < 1 ? aspect * newSize.width / oldSize.width : newSize.width / oldSize.width;
    },

    /* 把 target 以相等的比例缩放至 result 大小
        target, result: Object{width, height}; //也可以是img元素
    */
    setSizeToSameScale(target, result = {width: 100, height: 100}){
        const scale = this.getSameScale(target, result);
        result.width = target.width * scale;
        result.height = target.height * scale;
        return result;
    },

    //小数保留 count 位
    floatKeep(float, count = 3){
        count = Math.pow(10, count);
        return Math.ceil(float * count) / count;
    },

}




/* AnimateLoop 动画循环
parameter:
    loopStep: Number; //默认 1000 / 60 (每秒运行60次)
    onupdate: Function(); //更新回调, 默认 null
    onUpdateFPS: Function(fps); //如果定义此参数就在每帧计算并传递fps值, 数值越高越好, 默认 null

attributes:
    onupdate: Func();

    //只读:
    delta: Number;    //延迟
    running: Bool;     //是否正在运行

method:
    play(onupdate: Func): this; //onupdate 可选 (如果动画循环正在运行那么此方法什么都不会做)
    stop(): this;
    update(): undefined; //使用前必须已定义.onupdate 属性 (如果动画循环正在运行那么此方法什么都不会做)

demo: 
    const animateLoop = new AnimateLoop(
        () => console.log(animateLoop.delta), 
        fps => console.log(fps)
    );
    animateLoop.play();
*/
class AnimateLoop{

    #nowTime = 0;
    #oldTime = 0;
    #id = -1;

    get running(){
        return this.#id !== -1;
    }

    get delta(){
        return this.#nowTime - this.#oldTime;
    }
    
    constructor(onupdate = null, onUpdateFPS = null, loopStep = 1000 / 60){
        if(typeof onUpdateFPS !== "function"){
            const animate = () => {
                this.#nowTime = UTILS.time;
                this.#id = requestAnimationFrame(animate);
                if(this.#nowTime - this.#oldTime >= loopStep){
                    this.onupdate();
                    this.#oldTime = this.#nowTime;
                }
            }

            this._animate = animate;
        } else {
            //更新fps
            let old = UTILS.time, frames = 0;
            const updateFPS = () => {
                frames++;
                if (this.#nowTime >= old + 1000){
                    onUpdateFPS(Math.floor((frames * 1000) / (this.#nowTime - old)));
                    old = this.#nowTime;
                    frames = 0;
                }
            },

            //动画循环
            animate = () => {
                this.#nowTime = UTILS.time;
                this.#id = requestAnimationFrame(animate);
                updateFPS();
                if(this.#nowTime - this.#oldTime >= loopStep){
                    this.onupdate();
                    this.#oldTime = this.#nowTime;
                }
            }

            this._animate = animate;
        }
        
        this.onupdate = onupdate;
    }

    stop(){
        if(this.#id !== -1){
            cancelAnimationFrame(this.#id);
            this.#id = -1;
            this.#oldTime = this.#nowTime;
        }
        return this;
    }

    play(onupdate){
        if(typeof onupdate === "function") this.onupdate = onupdate;
        if(this.onupdate !== null && this.#id === -1){
            this.#id = requestAnimationFrame(this._animate);
            this.#oldTime = UTILS.time;
        }
        return this;
    }

    update(){
        if(this.#id === -1){
            this.onupdate();
        }
    }

}




/* TweenCache
parameter:
    origin, end: Object{Number...}, 
    time: Number, //origin 到 end 花费的毫秒时间
    onend: Function //

demo:
    const tweenCache = new TweenCache({x:-50}, {x:100}, null, 3000);
    const animateLoop = new AnimateLoop(() => tweenCache.update());

    tweenCache.onend = () => {
        animateLoop.stop();
        tweenCache.reset();
    }

    animateLoop.play();
    tweenCache.start();
*/
class TweenCache{

    #t = 0;
    #v = {};
    #o = {};
    
    constructor(origin, end, time, onend){
        this.origin = origin;
        this.end = end;
        this.time = time;
        this.onend = onend;
    }

    start(){
        this.#t = UTILS.time;
        for(let v in this.origin){
            this.#v[v] = this.end[v] - this.origin[v];
            this.#o[v] = this.origin[v];
        }
    }

    update(){
        var ted = UTILS.time - this.#t;

        if(ted < this.time){

            ted = ted / this.time; 
            for(let n in this.origin) this.origin[n] = ted * this.#v[n] + this.#o[n];

        } else {
        
            for(ted in this.origin) this.origin[ted] = this.end[ted];
            if(typeof this.onend === "function") this.onend();

        }
    }
    
}




/* TweenTarget
parameter:    
    v1 = {x: 0}, 
    v2 = {x: 100}, 
    distance = 1,    //每次移动的距离
    onend = null    //

attribute:
    v1: Object;             //起点
    v2: Object;             //终点
    onend: Function;         //

method:
    update(): undefined;                        //一般在动画循环里执行此方法
    updateAxis(): undefined;                     //更新v1至v2的方向轴 (初始化时构造器自动调用一次)
    setDistance(distance: Number): undefined;     //设置每次移动的距离 (初始化时构造器自动调用一次)
*/
class TweenTarget{

    #distance = 1;
    #distancePow2 = 1;
    #axis = {};
    get axis(){return this.#axis;}
    get distance(){return this.#distance;}

    constructor(v1 = {x: 0}, v2 = {x: 100}, distance, onend = null){
        this.v1 = v1;
        this.v2 = v2;
        this.onend = onend;
        
        this.setDistance(distance);
        this.updateAxis();
    }

    setDistance(v = 1){
        this.#distance = v;
        this.#distancePow2 = Math.pow(v, 2);
    }

    updateAxis(){
        var n, v, len = 0;
        
        for(n in this.v1){
            v = this.v2[n] - this.v1[n];
            len += v * v;
            this.#axis[n] = v;
        }

        len = Math.sqrt(len);

        if(len !== 0){
            for(n in this.v1) this.#axis[n] *= 1 / len;
        }
    }

    update(){
        var n, len = 0;

        for(n in this.v1){
            len += Math.pow(this.v1[n] - this.v2[n], 2);
        }
        
        if(len > this.#distancePow2){

            for(n in this.v1){
                this.v1[n] += this.#axis[n] * this.#distance;
            }
            
        }

        else{

            for(n in this.v1){
                this.v1[n] = this.v2[n];
            }

            if(this.onend) this.onend();

        }
    }

}




/* SecurityDoor 安检门
作用: 有时候我们要给一个功能加一个启禁用锁, 就比如用一个.enable属性表示此功能是否启用, 
a, b是两个使用此功能的人; a 需要把此功能禁用(.enable = false), 
过了一会b也要禁用此功能(.enable = false), 又过了一会a又要在次启用此功能,
此时a让此功能启用了(.enable = true), 很显然这违背了b, 对于b来说此功能还在禁用状态,
实际并非如b所想, 所以当多个人使用此功能时一个.enable满足不了它们;
或许还有其它解决方法就比如让所有使用此功能的人(a,b)加一个属性表示自己是否可以使用此功能,
但我更希望用一个专门的数组去装载它们, 而不是在某个使用者身上都添加一个属性;

parameter:
    list: Array[];

attribute:
    list: Array; //私有, 默认 null
    empty: Bool; //只读, 列表是否为空

method:
    clear()
    equals(v)
    add(v)
    remove(v)
*/
class SecurityDoor{

    #list = null;
    
    get empty(){
        return this.#list === null;
    }

    constructor(list, onchange){
        if(UTILS.emptyArray(list) === false) this.#list = list;
        this._onchange = typeof onchange === "function" ? onchange : null;
    }

    add(sign){
        if(this.#list !== null){
            if(this.#list.includes(sign) === false) this.#list.push(sign);
        }
        else{
            this.#list = [sign];
            if(this._onchange !== null) this._onchange(false);
        }
    }
    
    clear(){
        this.#list = null;
    }

    equals(sign){
        return this.#list !== null && this.#list.includes(sign);
    }

    remove(sign){
        if(this.#list !== null){
            sign = this.#list.indexOf(sign);
            if(sign !== -1){
                if(this.#list.length > 1) this.#list.splice(sign, 1);
                else{
                    this.#list = null;
                    if(this._onchange !== null) this._onchange(true);
                }
            }
        }
    }

}




/* RunningList

*/
class RunningList{

    #runName = "";
    #running = false;
    #list = [];
    #disabls = [];
    get list(){
        return this.#list;
    }

    constructor(runName = 'update'){
        this.#runName = runName;
    }

    clear(){
        this.#list.length = 0;
        this.#disabls.length = 0;
    }

    add(v){
        if(this.#list.includes(v) === false) this.#list.push(v);
        else{
            const i = this.#disabls.indexOf(v);
            if(i !== -1) this.#disabls.splice(i, 1);
        }
    }

    remove(v){
        if(this.#running) this.#disabls.push(v);
        else{
            const i = this.#list.indexOf(v);
            if(i !== -1) this.#list.splice(i, 1);
        }
    }

    update(){
        var len = this.#list.length;
        if(len === 0) return;
        
        var k;
        this.#running = true;
        if(this.#runName !== ''){
            for(k = 0; k < len; k++) this.#list[k][this.#runName]();
        }else{
            for(k = 0; k < len; k++) this.#list[k]();
        }
        this.#running = false;

        var i;
        len = this.#disabls.length;
        for(k = 0; k < len; k++){
            i = this.#list.indexOf(this.#disabls[k]);
            if(i !== -1) this.#list.splice(i, 1);
        }
        this.#disabls.length = 0;
    }

}




/** Ajax
parameter:
    option = {
        url:        可选, 默认 ''
        method:        可选, post 或 get请求， 默认 post
        asy:        可选, 是否异步执行, 默认 true
        success:    可选, 成功回调, 默认 null
        error:        可选, 超时或失败调用, 默认 null
        change:        可选, 请求状态改变时调用, 默认 null
        data:        可选, 如果定义则在初始化时自动执行.send(data)方法
    }

demo:
    const data = `email=${email}&password=${password}`,

    //默认 post 请求:
    ajax = new Ajax({
        url: './login',
        data: data,
        success: mes => console.log(mes),
    });
    
    //get 请求:
    ajax.method = "get";
    ajax.send(data);
*/
class Ajax{
    
    constructor(option = {}){
        this.url = option.url || "";
        this.method = option.method || "post";
        this.asy = typeof option.asy === "boolean" ? option.asy : true;
        this.success = option.success || null;
        this.error = option.error || null;
        this.change = option.change || null;

        //init XML
        this.xhr = new XMLHttpRequest();

        this.xhr.onerror = this.xhr.ontimeout = event => {
            if(this.error !== null) this.error(event);
        }

        this.xhr.onreadystatechange = event => {
        
            if(event.target.readyState === 4 && event.target.status === 200){

                if(this.success !== null) this.success(event.target.responseText, event);
                
            }

            else if(this.change !== null) this.change(event);

        }

        if(option.data) this.send(option.data);
    }

    send(data = ""){
        if(this.method === "get"){
            this.xhr.open(this.method, this.url+"?"+data, this.asy);
            this.xhr.send();
        }
        
        else if(this.method === "post"){
            this.xhr.open(this.method, this.url, this.asy);
            this.xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            this.xhr.send(data);
        }
    }
    
}




/* IndexedDB 本地数据库

parameter:
    name: String;                //需要打开的数据库名称(如果不存在则会新建一个) 必须
    done: Function(IndexedDB);    //链接数据库成功时的回调 默认 null
    version: Number;             //数据库版本(高版本数据库将覆盖低版本的数据库) 默认 1 

attribute:
    database: IndexedDB;            //链接完成的数据库对象
    transaction: IDBTransaction;    //事务管理(读和写)
    objectStore: IDBObjectStore;    //当前的事务

method:
    set(data, key, callback)        //添加或更新
    get(key, callback)                //获取
    delete(key, callback)            //删除

    traverse(callback)                //遍历
    getAll(callback)                //获取全部
    clear(callback)                    //清理所以数据
    close()                         //关闭数据库链接

readOnly:

static:
    indexedDB: Object;

demo:
    
    new IndexedDB('TEST', db => {

        conosle.log(db);

    });

*/
class IndexedDB{

    static indexedDB = globalThis.indexedDB || globalThis.webkitIndexedDB || globalThis.mozIndexedDB || globalThis.msIndexedDB;

    get objectStore(){ //每个事务只能使用一次, 所以每次都需要重新创建
        return this.database.transaction(this.name, 'readwrite').objectStore(this.name);
    }

    constructor(name, done = null, version = 1){

        if(IndexedDB.indexedDB === undefined) return console.error("IndexedDB: 不支持IndexedDB");
        
        if(typeof name !== 'string') return console.warn('IndexedDB: 参数错误');

        this.name = name;
        this.database = null;

        const request = IndexedDB.indexedDB.open(name, version);
        
        request.onupgradeneeded = (e)=>{ //数据库不存在 或 版本号不同时 触发
            if(!this.database) this.database = e.target.result;
            if(this.database.objectStoreNames.contains(name) === false) this.database.createObjectStore(name);
        }
        
        request.onsuccess = (e)=>{
            this.database = e.target.result;
            if(typeof done === 'function') done(this);
        }
        
        request.onerror = (e)=>{
            console.error(e);
        }
        
    }

    close(){

        return this.database.close();

    }

    clear(callback){
        
        this.objectStore.clear().onsuccess = callback;
        
    }

    traverse(callback){
        
        this.objectStore.openCursor().onsuccess = callback;

    }

    set(data, key = 0, callback){
        
        this.objectStore.put(data, key).onsuccess = callback;

    }
    
    get(key = 0, callback){

        this.objectStore.get(key).onsuccess = callback;
        
    }

    del(key = 0, callback){

        this.objectStore.delete(key).onsuccess = callback;

    }
    
    getAll(callback){

        this.objectStore.getAll().onsuccess = callback;

    }

}




/* TreeStruct 树结构基类

attribute:
    parent: TreeStruct;
    children: Array[TreeStruct];

method:
    appendChild(v: TreeStruct): v;         //v添加到自己的子集
    removeChild(v: TreeStruct): v;     //删除v, 前提v必须是自己的子集
    export(): Array[Object];    //TreeStruct 转为 可导出的结构, 包括其所有的后代

    getPath(v: TreeStruct): Array[TreeStruct];     //获取自己到v的路径

    traverse(callback: Function): undefined;  //迭代自己的每一个后代, 包括自己
        callback(value: TreeStruct); //如返回 "continue" 则不在迭代其后代(不是结束迭代, 而是只结束当前节点的后代);

    traverseUp(callback): undefined; //向上遍历每一个父, 包括自己
        callback(value: TreeStruct); //如返回 "break" 立即停止遍历;

static:
    import(arr: Array[Object]): TreeStruct; //.export() 返回的 arr 转为 TreeStruct

*/
class TreeStruct{

    static import(arr){

        //json = JSON.parse(json);
        const len = arr.length;

        for(let k = 0, v; k < len; k++){
            v = Object.assign(new TreeStruct(), arr[k]);
            v.parent = arr[arr[k].parent] || null;
            if(v.parent !== null) v.parent.appendChild(v);
            arr[k] = v;
        }

        return arr[0];

    }

    constructor(){
        this.parent = null;
        this.children = [];
    }

    getPath(v){

        var path;

        const pathA = [];
        this.traverseUp(tar => {
            if(v === tar){
                path = pathA;
                return "break";
            }
            pathA.push(tar);
        });

        if(path) return path;

        const pathB = [];
        v.traverseUp(tar => {
            if(this === tar){
                path = pathB.reverse();
                return "break";
            }
            else{
                let i = pathA.indexOf(tar);
                if(i !== -1){
                    pathA.splice(i);
                    pathA.push(tar);
                    path = pathA.concat(pathB.reverse());
                    return "break";
                }
            }
            pathB.push(tar);
        });

        return path;
        
    }

    appendChild(v){
        v.parent = this;
        if(this.children.includes(v) === false) this.children.push(v);
        
        return v;
    }

    removeChild(v){
        const i = this.children.indexOf(v);
        if(i !== -1) this.children.splice(i, 1);
        v.parent = null;

        return v;
    }

    traverse(callback){

        if(callback(this) !== "continue"){

            for(let k = 0, len = this.children.length; k < len; k++){

                this.children[k].traverse(callback);
    
            }

        }

    }

    traverseUp(callback){

        var par = this.parent;

        while(par !== null){
            if(callback(par) === "break") return;
            par = par.parent;
        }

    }

    export(){

        const result = [], arr = [];
        var obj = null;

        this.traverse(v => {
            obj = Object.assign({}, v);
            obj.parent = arr.indexOf(v.parent);
            delete obj.children;
            result.push(obj);
            arr.push(v);
        });
        
        return result; //JSON.stringify(result);

    }

}




/* Point
parameter: 
    x = 0, y = 0;

attribute
    x, y: Number;

method:
    set(x, y): this;
    angle(origin): Number;
    copy(point): this;
    clone(): Point;
    distance(point): Number;            //获取欧几里得距离
    distanceMHD(point): Number;            //获取曼哈顿距离
    distanceCompare(point): Number;        //获取用于比较的距离(相对于.distance() 效率更高)
    equals(point): Bool;                //是否恒等
    reverse(): this;                    //取反值
    rotate(origin: Object{x,y}, angle): this;    //旋转点
    normalize(): this;                    //归一
    isClockwise(startPoint): Bool;        //startPoint 到自己是否是顺时针旋转
*/
class Point{

    get isPoint(){return true;}

    constructor(x = 0, y = 0){
        this.x = x;
        this.y = y;
    }

    set(x = 0, y = 0){
        this.x = x;
        this.y = y;

        return this;
    }

    radian(origin){

        return Math.atan2(this.y - origin.y, this.x - origin.x);

    }

    copy(point){
        
        this.x = point.x;
        this.y = point.y;
        return this;
        //return Object.assign(this, point);

    }
    
    clone(){

        return new this.constructor().copy(this);
        //return Object.assign(new this.constructor(), this);
        
    }

    distance(point){
        
        return Math.sqrt(Math.pow(point.x - this.x, 2) + Math.pow(point.y - this.y, 2));

    }

    distanceMHD(point){

        return Math.abs(this.x - point.x) + Math.abs(this.y - point.y);

    }

    distanceCompare(point){
    
        return Math.pow(this.x - point.x, 2) + Math.pow(this.y - point.y, 2);

    }

    equals(point){

        return point.x === this.x && point.y === this.y;

    }

    reverse(){
        this.x = -this.x;
        this.y = -this.y;

        return this;
    }

    rotate(origin, radian){
        const c = Math.cos(radian), s = Math.sin(radian), 
        x = this.x - origin.x, y = this.y - origin.y;

        this.x = x * c - y * s + origin.x;
        this.y = x * s + y * c + origin.y;

        return this;
    }

    normalize(){
        const len = 1 / (Math.sqrt(this.x * this.x + this.y * this.y) || 1);
        this.x *= len;
        this.y *= len;

        return this;
    }

    isClockwise(startPoint){

        return this.x * startPoint.y - this.y * startPoint.x < 0;

    }

    floatKeep(count = 3){
        count = Math.pow(10, count);
        this.x = Math.ceil(this.x * count) / count;
        this.y = Math.ceil(this.y * count) / count;
    }

/*     add(point){
        this.x += point.x;
        this.y += point.y;
        return this;
    }

    addScalar(v){
        this.x += v;
        this.y += v;
        return this;
    }

    sub(point){
        this.x -= point.x;
        this.y -= point.y;
        return this;
    }

    subScalar(v){
        this.x -= v;
        this.y -= v;
        return this;
    }

    multiply(point){
        this.x *= point.x;
        this.y *= point.y;
        return this;
    }

    multiplyScalar(v){
        this.x *= v;
        this.y *= v;
        return this;
    }

    divide(point){
        this.x /= point.x;
        this.y /= point.y;
        return this;
    }
    
    divideScalar(v){
        this.x /= v;
        this.y /= v;
        return this;
    } */

}




//BoundaryBox 边界框
class BoundaryBox{
    
    constructor(){
        this.x = 0;
        this.y = 0;
        this.mx = 0;
        this.my = 0;
    }

    setFromBox(box){
        this.x = box.x;
        this.y = box.y;
        this.mx = box.mx;
        this.my = box.my;
    }

    setFromPolygon(polygon){
        const len = polygon.path.length;
        let x = Infinity, y = Infinity, mx = -Infinity, my = -Infinity;
        for(let k = 0, v; k < len; k+=2){
            v = polygon.path[k];
            if(v < x) x = v;
            else if(v > mx) mx = v;

            v = polygon.path[k+1];
            if(v < y) y = v;
            else if(v > my) my = v;
        }

        this.x = x;
        this.y = y;
        this.mx = mx;
        this.my = my;
        return this;
    }

}




/* Line
parameter: x, y, x1, y1: Number;
attribute: x, y, x1, y1: Number;
method:
    set(x, y, x1, y1): this;                    
    copy(line): this;
    clone(): Line;
    containsPoint(x, y): Bool;                             //点是否在线上
    intersectPoint(line: Line, point: Point): Point;    //如果不相交则返回null, 否则返回交点Point
    isIntersect(line): Bool;                             //this与line是否相交
*/
class Line{

    constructor(x = 0, y = 0, x1 = 0, y1 = 0){
        this.x = x;
        this.y = y;
        this.x1 = x1;
        this.y1 = y1;
    }

    set(x = 0, y = 0, x1 = 0, y1 = 0){
        this.x = x;
        this.y = y;
        this.x1 = x1;
        this.y1 = y1;
        return this;
    }

    copy(line){
        this.x = line.x;
        this.y = line.y;
        this.x1 = line.x1;
        this.y1 = line.y1;
        return this;
        //return Object.assign(this, line);
    }
    
    clone(){
        return new this.constructor().copy(this);
        //return Object.assign(new this.constructor(), this);
    }

    containsPoint(x, y){
        return (x - this.x) * (x - this.x1) <= 0 && (y - this.y) * (y - this.y1) <= 0;
    }

    intersectPoint(line, point){
        //解线性方程组, 求线段交点
        //如果分母为0则平行或共线, 不相交
        var denominator = (this.y1 - this.y) * (line.x1 - line.x) - (this.x - this.x1) * (line.y - line.y1);
        if(denominator === 0) return null;

        //线段所在直线的交点坐标 (x , y)
        const x = ((this.x1 - this.x) * (line.x1 - line.x) * (line.y - this.y) 
        + (this.y1 - this.y) * (line.x1 - line.x) * this.x 
        - (line.y1 - line.y) * (this.x1 - this.x) * line.x) / denominator;

        const y = -((this.y1 - this.y) * (line.y1 - line.y) * (line.x - this.x) 
        + (this.x1 - this.x) * (line.y1 - line.y) * this.y 
        - (line.x1 - line.x) * (this.y1 - this.y) * line.y) / denominator;

        //判断交点是否在两条线段上
        if(this.containsPoint(x, y) && line.containsPoint(x, y)){
            point.x = x;
            point.y = y;
            return point;
        }

        return null;
    }

    isIntersect(line){
        //快速排斥：
        //两个线段为对角线组成的矩形，如果这两个矩形没有重叠的部分，那么两条线段是不可能出现重叠的

        //这里的确如此，这一步是判定两矩形是否相交
        //1.线段ab的低点低于cd的最高点（可能重合）
        //2.cd的最左端小于ab的最右端（可能重合）
        //3.cd的最低点低于ab的最高点（加上条件1，两线段在竖直方向上重合）
        //4.ab的最左端小于cd的最右端（加上条件2，两直线在水平方向上重合）
        //综上4个条件，两条线段组成的矩形是重合的
        //特别要注意一个矩形含于另一个矩形之内的情况
        if(!(Math.min(this.x,this.x1)<=Math.max(line.x,line.x1) && Math.min(line.y,line.y1)<=Math.max(this.y,this.y1) && Math.min(line.x,line.x1)<=Math.max(this.x,this.x1) && Math.min(this.y,this.y1)<=Math.max(line.y,line.y1))) return false;

        //跨立实验：
        //如果两条线段相交，那么必须跨立，就是以一条线段为标准，另一条线段的两端点一定在这条线段的两段
        //也就是说a b两点在线段cd的两端，c d两点在线段ab的两端
        var u=(line.x-this.x)*(this.y1-this.y)-(this.x1-this.x)*(line.y-this.y),
        v = (line.x1-this.x)*(this.y1-this.y)-(this.x1-this.x)*(line.y1-this.y),
        w = (this.x-line.x)*(line.y1-line.y)-(line.x1-line.x)*(this.y-line.y),
        z = (this.x1-line.x)*(line.y1-line.y)-(line.x1-line.x)*(this.y1-line.y);
        
        return u*v <= 0.00000001 && w*z <= 0.00000001;
    }

}




/* Box 矩形
parameter: 
    x = 0, y = 0, w = 0, h = 0;

attribute:
    x,y: Number; 位置
    w,h: Number; 大小

    只读
    mx, my: Number; //

method:
    set(x, y, w, h): this;
    pos(x, y): this; //设置位置
    size(w, h): this; //设置大小
    setFromRotate(rotate: Rotate): this;        //根据 rotate 旋转自己
    setFromShapeRect(shapeRect): this;            //ShapeRect 转为 Box (忽略 ShapeRect 的旋转和缩放)
    setFromCircle(circle, inner: Bool): this;    //
    setFromPolygon(polygon, inner = true): this;//
    toArray(array: Array, index: Integer): this;
    copy(box): this;                             //复制
    clone(): Box;                                  //克隆
    center(box): this;                            //设置位置在box居中
    distance(x, y): Number;                     //左上角原点 与 x,y 的直线距离
    distanceFromPoint(x,y, isMax: Bool): Number;//返回点 x,y 距自己四个角的 最大或最小(isMax) 距离
    isEmpty(): Boolean;                         //.w.h是否小于等于零
    maxX(): Number;                             //返回 max x(this.x+this.w);
    maxY(): Number;                             //返回 max y(this.y+this.h);
    expand(box): undefined;                     //扩容; 把box合并到this
    equals(box): Boolean;                         //this与box是否恒等
    intersectsBox(box): Boolean;                 //box与this是否相交(box在this内部也会返回true)
    containsPoint(x, y): Boolean;                 //x,y点是否在this内
    containsBox(box): Boolean;                    //box是否在this内(只是相交返回fasle)
    computeOverflow(b: Box, r: Box): undefined;    //this相对b超出的部分赋值到r; r的size小于或等于0的话说明完全超出
*/
class Box{

    get mx(){
        return this.x + this.w;
    }

    get my(){
        return this.y + this.h;
    }

    get cx(){
        return this.w / 2 + this.x;
    }

    get cy(){
        return this.h / 2 + this.y;
    }

    constructor(x = 0, y = 0, w = 0, h = 0){
        //this.set(x, y, w, h);
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
    }
    
    set(x, y, w, h){
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        return this;
    }

    pos(x, y){
        this.x = x;
        this.y = y;
        return this;
    }

    posSub(box){
        this.x -= box.x;
        this.y -= box.y;
        return this;
    }

    posSubScalar(v){
        this.x -= v;
        this.y -= v;
        return this;
    }
    
    size(w, h){
        this.w = w;
        this.h = h;
        return this;
    }

    sizeMultiply(box){
        this.w *= box.w;
        this.h *= box.h;
        return this;
    }

    sizeMultiplyScalar(v){
        this.w *= v;
        this.h *= v;
        
        return this;
    }

    setFromRotate(rotate){
        var minX = this.x, minY = this.y, maxX = 0, maxY = 0;
        const point = UTILS.emptyPoint,
        run = function (){
            if(point.x < minX) minX = point.x;
            else if(point.x > maxX) maxX = point.x;
            if(point.y < minY) minY = point.y;
            else if(point.y > maxY) maxY = point.y;
        }

        point.set(this.x, this.y).rotate(rotate.origin, rotate.radian); run();
        point.set(this.mx, this.y).rotate(rotate.origin, rotate.radian); run();
        point.set(this.mx, this.my).rotate(rotate.origin, rotate.radian); run();
        point.set(this.x, this.my).rotate(rotate.origin, rotate.radian); run();

        this.x = minX;
        this.y = minY;
        this.w = maxX - minX;
        this.h = maxY - minY;

        return this;
    }

    /* setFromShapeRect(shapeRect){
        this.width = shapeRect.width;
        this.height = shapeRect.height;
        this.x = shapeRect.position.x - this.width / 2;
        this.y = shapeRect.position.y - this.height / 2;
        return this;
    } */

    setFromCircle(circle, inner = true){
        if(inner === true){
            this.x = Math.sin(-135 / 180 * Math.PI) * circle.r + circle.x;
            this.y = Math.cos(-135 / 180 * Math.PI) * circle.r + circle.y;
            this.w = this.h = Math.sin(135 / 180 * Math.PI) * circle.r + circle.x - this.x;
        }

        else{
            this.x = circle.x - circle.r;
            this.y = circle.y - circle.r;
            this.w = this.h = circle.r * 2;
        }
        return this;
    }

    setFromPolygon(polygon, inner = true){
        if(inner === true){
            console.warn('Box: 暂不支持第二个参数为true');
        }

        else{
            const len = polygon.path.length;
            let x = Infinity, y = Infinity, mx = -Infinity, my = -Infinity;
            for(let k = 0, v; k < len; k+=2){
                v = polygon.path[k];
                if(v < x) x = v;
                else if(v > mx) mx = v;

                v = polygon.path[k+1];
                if(v < y) y = v;
                else if(v > my) my = v;

            }

            this.set(x, y, mx - x, my - y);

        }
        return this;
    }

    setFromBoundaryBox(boundaryBox){
        this.set(boundaryBox.x, boundaryBox.y, boundaryBox.mx - boundaryBox.x, boundaryBox.my - boundaryBox.y);
    }

    toArray(array, index){
        array[index] = this.x;
        array[index+1] = this.y;
        array[index+2] = this.w;
        array[index+3] = this.h;

        return this;
    }

    copy(box){
        this.x = box.x;
        this.y = box.y;
        this.w = box.w;
        this.h = box.h;
        return this;
        //return Object.assign(this, box); //this.set(box.x, box.y, box.w, box.h);
    }
    
    clone(){
        return new this.constructor().copy(this);
        //return Object.assign(new this.constructor(), this);
    }

    center(box){
        this.x = (box.w - this.w) / 2 + box.x;
        this.y = (box.h - this.h) / 2 + box.y;
        return this;
    }

    /* distance(x, y){
        return Math.sqrt(Math.pow(this.x - x, 2) + Math.pow(this.y - y, 2));
    } */

    distanceFromPoint(x, y, isMax = true){
        x -= this.x; y -= this.y;
        const cx = this.w / 2 < x ? (isMax === true ? 0 : this.w) : (isMax === true ? this.w : 0), 
        cy = this.h / 2 < y ? (isMax === true ? 0 : this.h) : (isMax === true ? this.h : 0);
        return Math.sqrt(Math.pow(x - cx, 2) + Math.pow(y - cy, 2));
    }

    isEmpty(){
        return this.w <= 0 || this.h <= 0;
    }

    maxX(){
        return this.x + this.w;
    }

    maxY(){
        return this.y + this.h;
    }

    equals(box){
        return this.x === box.x && this.w === box.w && this.y === box.y && this.h === box.h;
    }

    expand(box){
        var v = Math.min(this.x, box.x);
        this.w = Math.max(this.x + this.w - v, box.x + box.w - v);
        this.x = v;

        v = Math.min(this.y, box.y);
        this.h = Math.max(this.y + this.h - v, box.y + box.h - v);
        this.y = v;
    }

    intersectsBox(box){
        return box.x + box.w < this.x || box.x > this.x + this.w || box.y + box.h < this.y || box.y > this.y + this.h ? false : true;
    }

    containsPoint(x, y){
        return x < this.x || x > this.x + this.w || y < this.y || y > this.y + this.h ? false : true;
    }

    containsBox(box){
        return this.x <= box.x && box.x + box.w <= this.x + this.w && this.y <= box.y && box.y + box.h <= this.y + this.h;
    }

    computeOverflow(p, r){
        r["copy"](this);
        
        if(this["x"] < p["x"]){
            r["x"] = p["x"];
            r["w"] -= p["x"] - this["x"];
        }

        if(this["y"] < p["y"]){
            r["y"] = p["y"];
            r["h"] -= p["y"] - this["y"];
        }

        var m = p["x"] + p["w"];
        if(r["x"] + r["w"] > m) r["w"] = m - r["x"];

        m = p["y"] + p["h"];
        if(r["y"] + r["h"] > m) r["h"] = m - r["y"];
    }

}




//RoundedRectangle 圆角矩形
class RoundedRectangle extends Box{

    constructor(x, y, w, h, r){
        super(x, y, w, h);
        this.r = r;
    }

    containsPoint(x, y){
        if (this.w <= 0 || this.h <= 0) return false;
        if (x >= this.x && x <= this.x + this.w) {
          if (y >= this.y && y <= this.y + this.h) {
            const radius = Math.max(0, Math.min(this.r, Math.min(this.w, this.h) / 2));
            if (y >= this.y + radius && y <= this.y + this.h - radius || x >= this.x + radius && x <= this.x + this.w - radius) {
              return true;
            }
            let dx = x - (this.x + radius);
            let dy = y - (this.y + radius);
            const radius2 = radius * radius;
            if (dx * dx + dy * dy <= radius2) {
              return true;
            }
            dx = x - (this.x + this.w - radius);
            if (dx * dx + dy * dy <= radius2) {
              return true;
            }
            dy = y - (this.y + this.h - radius);
            if (dx * dx + dy * dy <= radius2) {
              return true;
            }
            dx = x - (this.x + radius);
            if (dx * dx + dy * dy <= radius2) {
              return true;
            }
          }
        }
        return false;
    }

}




/* Circle 圆形
parameter:
attribute:
    x,y: Number; 中心点
    r: Number; 半径

    //只读
    r2: Number; //返回直径 r*2

method:
    set(x, y, r): this;
    pos(x, y): this;
    copy(circle: Circle): this;
    clone(): Circle;
    distance(x, y): Number;
    equals(circle: Circle): Bool;
    expand(circle: Circle): undefined;                     //扩容; 把circle合并到this
    containsPoint(point: Point): Bool; 
    intersectsCircle(circle: Circle): Bool;
    intersectsBox(box: Box): Bool;
    setFromBox(box, inner = true): this;

*/
class Circle{

    get r2(){
        return this.r * 2;
    }

    constructor(x = 0, y = 0, r = -1){
        //this.set(0, 0, -1);
        this.x = x;
        this.y = y;
        this.r = r;
    }

    set(x, y, r){
        this.x = x;
        this.y = y;
        this.r = r;

        return this;
    }

    setFromPoint(point){
        this.x = point.x;
        this.y = point.y;
        return this;
    }

    setFromBox(box, inner = true){
        this.x = box.w / 2 + box.x;
        this.y = box.h / 2 + box.y;

        if(inner === true) this.r = Math.min(box.w, box.h) / 2;
        else this.r = Math.sqrt(box.w + box.h);

        return this;
    }

    toArray(array, index){
        array[index] = this.x;
        array[index+1] = this.y;
        array[index+2] = this.r;
        
        return this;
    }

    pos(x, y){
        this.x = x;
        this.y = y;

        return this;
    }

    copy(circle){
        this.r = circle.r;
        this.x = circle.x;
        this.y = circle.y;

        return this;
    }

    clone(){

        return new this.constructor().copy(this);

    }

    distance(x, y){
        
        return Math.sqrt(Math.pow(this.x - x, 2) + Math.pow(this.y - y, 2));

    }

    expand(circle){

    }

    equals(circle){

        return circle.x === this.x && circle.y === this.y && circle.r === this.r;

    }

    containsPoint(point){

        return (Math.pow(point.x - this.x, 2) + Math.pow(point.y - this.y, 2) <= Math.pow(this.r, 2));

    }

    intersectsCircle(circle){

        return (Math.pow(circle.x - this.x, 2) + Math.pow(circle.y - this.y, 2) <= Math.pow(circle.r + this.r, 2));

    }

    intersectsBox(box){
        
        return (Math.pow(Math.max(box.x, Math.min(box.x + box.w, this.x)) - this.x, 2) + Math.pow(Math.max(box.y, Math.min(box.y + box.h, this.y)) - this.y, 2) <= Math.pow(this.r, 2));
    
    }

}




//Ellipse 椭圆
class Ellipse {

    constructor(x = 0, y = 0, halfWidth = 0, halfHeight = 0) {
        this.x = x;
        this.y = y;
        this.width = halfWidth;
        this.height = halfHeight;
    }
    
    containsPoint(x, y){
      if (this.width <= 0 || this.height <= 0) {
        return false;
      }
      let normx = (x - this.x) / this.width;
      let normy = (y - this.y) / this.height;
      normx *= normx;
      normy *= normy;
      return normx + normy <= 1;
    }

    getBounds() {
        return new Box(this.x - this.width, this.y - this.height, this.width, this.height);
    }
    
}




/* Polygon 多边形
parameter: 
    points: Array[x, y];

attribute:

    //只读属性
    path: Array[x, y]; 

method:
    containsPoint(x, y): Bool;    //x,y是否在多边形的内部(注意: 在路径上也返回 true)
    
*/
class Polygon{

    get path(){return this.points;}

    constructor(path = []){
        this.points = path;
    }

    containsPoint(x, y){
        const length = this.points.length / 2;
        for (let i = 0, j = length - 1; i < length; j = i++) {
            const xi = this.points[i * 2];
            const yi = this.points[i * 2 + 1];
            const xj = this.points[j * 2];
            const yj = this.points[j * 2 + 1];
            const intersect = yi > y !== yj > y && x < (xj - xi) * ((y - yi) / (yj - yi)) + xi;
            if(intersect) return true;
        }
        return false;
    }

    isInPolygon(checkPoint, polygonPoints) {
        var counter = 0;
        var i;
        var xinters;
        var p1, p2;
        var pointCount = polygonPoints.length;
        p1 = polygonPoints[0];
        for (i = 1; i <= pointCount; i++) {
            p2 = polygonPoints[i % pointCount];
            if (
                checkPoint[0] > Math.min(p1[0], p2[0]) &&
                checkPoint[0] <= Math.max(p1[0], p2[0])
            ) {
                if (checkPoint[1] <= Math.max(p1[1], p2[1])) {
                    if (p1[0] != p2[0]) {
                        xinters =
                            (checkPoint[0] - p1[0]) *
                                (p2[1] - p1[1]) /
                                (p2[0] - p1[0]) +
                            p1[1];
                        if (p1[1] == p2[1] || checkPoint[1] <= xinters) {
                            counter++;
                        }
                    }
                }
            }
            p1 = p2;
        }
        if (counter % 2 == 0) {
            return false;
        } else {
            return true;
        }
    }

    containsPolygon(polygon){
        const path = polygon.path, len = path.length;
        for(let k = 0; k < len; k += 2){
            if(this.containsPoint(path[k], path[k+1]) === false) return false;
        }

        return true;
    }

    toPoints(){
        const path = this.path, len = path.length, result = [];
        
        for(let k = 0; k < len; k += 2) result.push(new Point(path[k], path[k+1]));

        return result;
    }

    toLines(){
        const path = this.path, len = path.length, result = [];
        
        for(let k = 0, x = NaN, y; k < len; k += 2){

            if(isNaN(x)){
                x = path[k];
                y = path[k+1];
                continue;
            }

            const line = new Line(x, y, path[k], path[k+1]);
            
            x = line.x1;
            y = line.y1;

            result.push(line);

        }

        return result;
    }

    merge(polygon){

        const linesA = this.toLines(), linesB = polygon.toLines(), nodes = [], newLines = [],
        
        pointA = new Point(), pointB = new Point(),

        forEachNodes = (pathA, pathB, funcA = null, funcB = null) => {
            for(let k = 0, lenA = pathA.length, lenB = pathB.length; k < lenA; k++){
                if(funcA !== null) funcA(pathA[k]);

                for(let i = 0; i < lenB; i++){
                    if(funcB !== null) funcB(pathB[i], pathA[k]);
                }
    
            }
        }

        if(this.containsPolygon(polygon)){console.log('this -> polygon');
            forEachNodes(linesA, linesB, lineA => newLines.push(lineA), (lineB, lineA) => {
                if(lineA.intersectPoint(lineB, pointA) === pointA) newLines.push(pointA.clone());
            });

            return newLines;
        }

        //收集所有的交点 (保存至 line)
        forEachNodes(linesA, linesB, lineA => lineA.nodes = [], (lineB, lineA) => {
            if(lineB.nodes === undefined) lineB.nodes = [];
            if(lineA.intersectPoint(lineB, pointA) === pointA){
                const node = {
                    lineA: lineA, 
                    lineB: lineB, 
                    point: pointA.clone(),
                    disA: pointA.distanceCompare(pointB.set(lineA.x, lineA.y)),
                    disB: pointA.distanceCompare(pointB.set(lineB.x, lineB.y)),
                }
                lineA.nodes.push(node);
                lineB.nodes.push(node);
                nodes.push(node);
            }
        });

        //交点以原点为目标排序
        for(let k = 0, sotr = function (a,b){return a.disA - b.disA;}, countA = linesA.length; k < countA; k++) linesA[k].nodes.sort(sotr);
        for(let k = 0, sotr = function (a,b){return a.disB - b.disB;}, countB = linesB.length; k < countB; k++) linesB[k].nodes.sort(sotr);

        var _loopTypeA, _loopTypeB;
        const result_loop = {
            lines: null,
            loopType: '',
            line: null,
            count: 0,
            indexed: 0,
        },
        
        //遍历某条线
        loop = (lines, index, loopType) => {
            const length = lines.length, indexed = lines.length, model = lines === linesA ? polygon : this;
        
            var line, i = 1;
            while(true){
                if(loopType === 'next') index = index === length - 1 ? 0 : index + 1;
                else if(loopType === 'back') index = index === 0 ? length - 1 : index - 1;
                line = lines[index];

                result_loop.count = line.nodes.length;
                if(result_loop.count !== 0){
                    result_loop.lines = lines;
                    result_loop.loopType = loopType;
                    result_loop.line = line;
                    result_loop.indexed = index;
                    if(loopType === 'next') addLine(line, model);

                    return result_loop;
                }
                
                addLine(line, model);
                if(indexed === i++) break;

            }
            
        },

        //更新或创建交点的索引
        setNodeIndex = (lines, index, loopType) => {
            const line = lines[index], count = line.nodes.length;
            if(loopType === undefined) loopType = lines === linesA ? _loopTypeA : _loopTypeB;

            if(loopType === undefined) return;
            
            if(line.nodeIndex === undefined){
                line.nodeIndex = loopType === 'next' ? 0 : count - 1;
                line.nodeState = count === 1 ? 'end' : 'start';
            
            }

            else{
                if(line.nodeState === 'end' || line.nodeState === ''){
                    line.nodeState = '';
                    return;
                }

                if(loopType === 'next'){
                    line.nodeIndex += 1;

                    if(line.nodeIndex === count - 1) line.nodeState = 'end';
                    else line.nodeState = 'run';
                }

                else if(loopType === 'back'){
                    line.nodeIndex -= 1;

                    if(line.nodeIndex === 0) line.nodeState = 'end';
                    else line.nodeState = 'run';
                }

            }

        },

        //只有在跳线的时候才执行此方法, 如果跳线的话: 某条线上的交点必然在两端;
        getLoopType = (lines, index, nodePoint) => {
            const line = lines[index], lineNext = lines[index === lines.length - 1 ? 0 : index + 1],

            model = lines === linesA ? polygon : this,
            isLineBack = newLines.includes(line) === false && model.containsPoint(line.x, line.y) === false,
            isLineNext = newLines.includes(lineNext) === false && model.containsPoint(lineNext.x, lineNext.y) === false;
            
            if(isLineBack && isLineNext){
                const len = line.nodes.length;
                if(len >= 2){
                    if(line.nodes[len - 1].point.equals(nodePoint)) return 'next';
                    else if(line.nodes[0].point.equals(nodePoint)) return 'back';
                }
                
                else console.warn('路径复杂', line);
                
            }

            else if(isLineNext){
                return 'next';
            }

            else if(isLineBack){
                return 'back';
            }

            return '';
        },

        //添加线至新的形状数组
        addLine = (line, model) => {
            //if(newLines.includes(line) === false && model.containsPoint(line.x, line.y) === false) newLines.push(line);
            if(line.nodes.length === 0) newLines.push(line);
            else if(model.containsPoint(line.x, line.y) === false) newLines.push(line);
            
        },

        //处理拥有交点的线
        computeNodes = v => {
            if(v === undefined || v.count === 0) return;
            
            setNodeIndex(v.lines, v.indexed, v.loopType);
        
            //添加交点
            const node = v.line.nodes[v.line.nodeIndex];
            if(newLines.includes(node.point) === false) newLines.push(node.point);
            else return;

            var lines = v.lines === linesA ? linesB : linesA, 
            line = lines === linesA ? node.lineA : node.lineB, 
            index = lines.indexOf(line);

            setNodeIndex(lines, index);
        
            //选择交点状态
            var nodeState = line.nodeState !== undefined ? line.nodeState : v.line.nodeState;
            if((v.count <= 2 && line.nodes.length > 2) || (v.count > 2 && line.nodes.length <= 2)){
                if(line.nodeState === 'start'){
                    const backLine = v.loopType === 'next' ? v.lines[v.indexed === 0 ? v.lines.length-1 : v.indexed-1] : v.lines[v.indexed === v.lines.length-1 ? 0 : v.indexed+1];
                    
                    if(newLines.includes(backLine) && backLine.nodes.length === 0){
                        nodeState = 'run';
                    }

                }
                else if(line.nodeState === 'end'){
                    const nextLine = v.loopType === 'next' ? v.lines[v.indexed === v.lines.length-1 ? 0 : v.indexed+1] : v.lines[v.indexed === 0 ? v.lines.length-1 : v.indexed-1];
                    const model = v.lines === linesA ? polygon : this;
                    if(model.containsPoint(nextLine.x, nextLine.y) === false && nextLine.nodes.length === 0){
                        nodeState = 'run';
                    }
                    
                }
            }

            switch(nodeState){

                //不跳线
                case 'run': 
                    if(v.loopType === 'back') addLine(v.line, v.lines === linesA ? polygon : this);
                    return computeNodes(loop(v.lines, v.indexed, v.loopType));

                //跳线
                case 'start': 
                case 'end': 
                    const loopType = getLoopType(lines, index, node.point);
                    if(loopType !== ''){
                        if(lines === linesA) _loopTypeA = loopType;
                        else _loopTypeB = loopType;
                        if(loopType === 'back') addLine(line, v.lines === linesA ? this : polygon);
                        return computeNodes(loop(lines, index, loopType));
                    }
                    break;

            }

        }
        
        //获取介入点
        var startLine = null;
        for(let k = 0, len = nodes.length, node; k < len; k++){
            node = nodes[k];
            if(node.lineA.nodes.length !== 0){
                startLine = node.lineA;
                if(node.lineA.nodes.length === 1 && node.lineB.nodes.length > 1){
                    startLine = node.lineB.nodes[0].lineB;
                    result_loop.lines = linesB;
                    result_loop.loopType = _loopTypeB = 'next';
                }
                else{
                    result_loop.lines = linesA;
                    result_loop.loopType = _loopTypeA = 'next';
                }
                result_loop.line = startLine;
                result_loop.count = startLine.nodes.length;
                result_loop.indexed = result_loop.lines.indexOf(startLine);
                break;
            }
        }

        if(startLine === null){
            console.warn('Polygon: 找不到介入点, 终止了合并');
            return newLines;
        }

        computeNodes(result_loop);
    
        return newLines;
    }

}




/* Meter 计量器
parameter: 
    min = -100, 
    max = 100, 
    value = 0

attribute: 
    min, max, value: number;
    ratio: number; //只读; 返回value与min至max之间的比率;

method: 
    setFromRatio(r: number): undefined;    //通过比率设置value
    normalize(): undefined;
*/
class Meter{
    
    #v = 0;
    get value(){return this.#v;}
    set value(v){
        if(v < this.min) v = this.min;
        else if(v > this.max) v = this.max;
        if(v !== this.#v) this.#v = v;
    }

    get ratio(){
        return (this.#v - this.min) / (this.max - this.min);
    }

    constructor(min = -100, max = 100, value){
        this.min = min;
        this.max = max;
        if(value !== undefined) this.value = value;
    }

    setFromRatio(r){
        this.value = r * (this.max - this.min) + this.min;
    }

    normalize(){
        const ratio = this.ratio;
        this.min = 0;
        this.max = 1;
        this.#v = ratio * 1;
    }

}




/* RGBColor
parameter: 
    r, g, b

method:
    set(r, g, b: Number): this;            //rgb: 0 - 255; 第一个参数可以为 css color
    setFormHex(hex: Number): this;         //
    setFormHSV(h, s, v: Number): this;    //h:0-360; s,v:0-100; 颜色, 明度, 暗度
    setFormString(str: String): Number;    //str: 英文|css color; 返回的是透明度 (如果为 rgba 则返回a; 否则总是返回1)

    copy(v: RGBColor): this;
    clone(): RGBColor;

    getHex(): Number;
    getHexString(): String;
    getHSV(result: Object{h, s, v}): result;    //result: 默认是一个新的Object
    getRGBA(alpha: Number): String;             //alpha: 0 - 1; 默认 1
    getStyle()                                     //.getRGBA()别名

    stringToColor(str: String): String; //str 转为 css color; 如果str不是color格式则返回 ""

*/
class RGBColor{

    get isRGBColor(){return true;}

    constructor(r = 255, g = 255, b = 255){
        this.r = r;
        this.g = g;
        this.b = b;
    }

    copy(v){
        this.r = v.r;
        this.g = v.g;
        this.b = v.b;
        return this;
    }

    clone(){
        return new this.constructor().copy(this);
    }

    set(r, g, b){
        if(typeof r !== "string"){
            this.r = UTILS.isNumber(r) ? r : 255;
            this.g = UTILS.isNumber(g) ? g : 255;
            this.b = UTILS.isNumber(b) ? b : 255;
        }

        else this.setFormString(r);
        
        return this;
    }

    setFormHex(hex){
        hex = Math.floor( hex );

        this.r = hex >> 16 & 255;
        this.g = hex >> 8 & 255;
        this.b = hex & 255;
        return this;
    }

    setFormHSV(h, s, v){
        h = h >= 360 ? 0 : h;
        var s=s/100;
        var v=v/100;
        var h1=Math.floor(h/60) % 6;
        var f=h/60-h1;
        var p=v*(1-s);
        var q=v*(1-f*s);
        var t=v*(1-(1-f)*s);
        var r,g,b;
        switch(h1){
            case 0:
                r=v;
                g=t;
                b=p;
                break;
            case 1:
                r=q;
                g=v;
                b=p;
                break;
            case 2:
                r=p;
                g=v;
                b=t;
                break;
            case 3:
                r=p;
                g=q;
                b=v;
                break;
            case 4:
                r=t;
                g=p;
                b=v;
                break;
            case 5:
                r=v;
                g=p;
                b=q;
                break;
        }

        this.r = Math.round(r*255);
        this.g = Math.round(g*255);
        this.b = Math.round(b*255);
        return this;
    }

    setFormString(color){
        if(typeof color !== "string") return 1;
        var _color = this.stringToColor(color);
        
        if(_color[0] === "#"){
            const len = _color.length;
            if(len === 4){
                _color = _color.slice(1);
                this.setFormHex(parseInt("0x"+_color + "" + _color));
            }
            else if(len === 7) this.setFormHex(parseInt("0x"+_color.slice(1)));
        }

        else if(_color[0] === "r" && _color[1] === "g" && _color[2] === "b"){
            const arr = [];
            for(let k = 0, len = _color.length, v = "", is = false; k < len; k++){
                
                if(is === true){
                    if(_color[k] === "," || _color[k] === ")"){
                        arr.push(parseFloat(v));
                        v = "";
                    }
                    else v += _color[k];
                    
                }

                else if(_color[k] === "(") is = true;
                
            }
            
            this.set(arr[0], arr[1], arr[2]);
            return arr[3] === undefined ? 1 : arr[3];
        }
        
        return 1;
    }

    getHex(){

        return Math.max( 0, Math.min( 255, this.r ) ) << 16 ^ Math.max( 0, Math.min( 255, this.g ) ) << 8 ^ Math.max( 0, Math.min( 255, this.b ) ) << 0;

    }

    getHexString(){

        return '#' + ( '000000' + this.getHex().toString( 16 ) ).slice( - 6 );

    }

    getHSV(result){
        result = result || {}
        var r=this.r/255;
        var g=this.g/255;
        var b=this.b/255;
        var h,s,v;
        var min=Math.min(r,g,b);
        var max=v=Math.max(r,g,b);
        var l=(min+max)/2;
        var difference = max-min;
        
        if(max==min){
            h=0;
        }else{
            switch(max){
                case r: h=(g-b)/difference+(g < b ? 6 : 0);break;
                case g: h=2.0+(b-r)/difference;break;
                case b: h=4.0+(r-g)/difference;break;
            }
            h=Math.round(h*60);
        }
        if(max==0){
            s=0;
        }else{
            s=1-min/max;
        }
        s=Math.round(s*100);
        v=Math.round(v*100);
        result.h = h;
        result.s = s;
        result.v = v;
        return result;
    }

    getStyle(){
        return this.getRGBA(1);
    }

    getRGBA(alpha = 1){
        return `rgba(${this.r},${this.g},${this.b},${alpha})`;
    }

    stringToColor(str){
        var _color = "";
        for(let k = 0, len = str.length; k < len; k++){
            if(str[k] === " ") continue;
            _color += str[k];
        }
        
        if(_color[0] === "#" || (_color[0] === "r" && _color[1] === "g" && _color[2] === "b")) return _color;

        return UTILS.colorTable[_color] || "";
    }

}




/* Timer 定时器

parameter:
    func: Function; //定时器运行时的回调; 默认 null, 如果定义构造器将自动调用一次.restart()方法
    speed: Number; //延迟多少毫秒执行一次 func; 默认 3000;
    step: Integer; //执行多少次: 延迟speed毫秒执行一次 func; 默认 Infinity;
    
attribute:
    func, speed, step;    //这些属性可以随时更改;

method:
    start(func, speed): this;    //启动定时器 (如果定时器正在运行则什么都不会做)
    stop(): undefined;            //停止定时器

demo:
    //每 3000 毫秒 打印一次 timer.number
    new Timer(timer => {
        console.log(timer.number);
    }, 3000);

*/
class Timer{

    #i = 0;
    #id = -1;

    get running(){
        return this.#id !== -1;
    }

    constructor(func = null, speed = 3000, step = Infinity, isStart = true){
        this.func = func;
        this.speed = speed;
        this.step = step;
        this.onend = null;
        
        const animate = () => {
            this.#i++;
            this.func(this);
            if(this.#id !== -1){
                if(this.#i < this.step) this.#id = setTimeout(animate, this.speed); 
                else{
                    this.#id = -1;
                    if(this.onend !== null) this.onend(this);
                }
            }
        }

        this._animate = animate;
        if(isStart === true && typeof this.func === "function"){
            this.#id = setTimeout(this._animate, this.speed);
            this.#i = 0;
        }
    }

    restart(){
        if(this.#id !== -1) clearTimeout(this.#id);
        this.#id = setTimeout(this._animate, this.speed);
        this.#i = 0;
    }

    start(func, speed){
        if(this.#id === -1){
            if(typeof func === 'function') this.func = func;
            if(UTILS.isNumber(speed) === true) this.speed = speed;
            this.#id = setTimeout(this._animate, this.speed);
            this.#i = 0;
        }
    }

    stop(){
        if(this.#id !== -1){
            clearTimeout(this.#id);
            this.#id = -1;
        }
    }

}




/* SeekPath A*寻路
parameter: 
    option: Object{
        angle: Number,         //8 || 16
        timeout: Number,     //单位为毫秒
        size: Number,         //每格的宽高
        lenX, lenY: Number,    //长度
        disables: Array[0||1],
        heights: Array[Number],
        path: Array[], //存放寻路结果 默认创建一个空数组
    }

attribute:
    size: Number;     //每个索引的大小
    lenX: Number;     //最大长度x (设置此属性时, 你需要重新.initMap(heights);)
    lenY: Number;     //最大长度y (设置此属性时, 你需要重新.initMap(heights);)

    //此属性已废弃 range: Box;            //本次的搜索范围, 默认: 0,0,lenX,lenY
    angle: Number;         //8四方向 或 16八方向 默认 16
    timeout: Number;     //超时毫秒 默认 500
    mapRange: Box;        //地图box
    //此属性已废弃(run方法不在检测相邻的高) maxHeight: Number;     //相邻可走的最大高 默认 6

    //只读属性
    success: Bool;            //只读; 本次搜索是否成功找到终点; (如果为false说明.run()返回的是 距终点最近的路径; 超时也会被判定为false)
    path: Array[node];    //存放.run()返回的路径
    map: Map;                 //地图的缓存数据

method:
    initMap(heights: Array[Number]): undefiend;     //初始化类时自动调用一次; heights:如果你的场景存在高请定义此参数
    run(x, y, x1, y1: Number): Array[x, y, z];         //参数索引坐标
    getDots(x, y, a, r): Array[ix, iy];             //获取周围的点 x,y, a:8|16, r:存放结果数组
    getLegalPoints(ix, iy, count, result = []): Array[node];    //获取 ix, iy 周围 合法的, 相邻的 count 个点

demo:
    const sp = new SeekPath({
        angle: 16,
        timeout: 500,
        size: 10,
        lenX: 1000,
        lenY: 1000,
    }),

    path = sp.run(0, 0, 1000, 1000);

    console.log(sp);
*/
class SeekPath{

    static _open = []
    static _dots = [] //.run() .getLegalPoints()
    static dots4 = []; //._check()
    static _sort = function (a, b){return a["f"] - b["f"];}

    #map = null;
    #path = null;
    #success = true;
    #halfX = 50;
    #halfY = 50;

    #size = 10;
    #lenX = 10;
    #lenY = 10;

    constructor(option = {}){
        this.angle = (option.angle === 8 || option.angle === 16) ? option.angle : 16; //8四方向 或 16八方向
        this.timeout = option.timeout || 500; //超时毫秒
        //this.maxHeight = option.maxHeight || 6;
        this.mapRange = new Box();
        this.size = option.size || 10;
        this.lenX = option.lenX || 10;
        this.lenY = option.lenY || 10;
        this.#path = Array.isArray(option.path) ? option.path : [];
        this.initMap(option.disable, option.height);
        option = undefined;
    }

    //this.#map[x][y] = Object{height: 此点的高,默认0, is: 此点是否可走,默认1(disable)};
    get map(){
        return this.#map;
    }

    //this.#path = Array[x,y,z]
    get path(){
        return this.#path;
    }

    get success(){
        return this.#success;
    }

    get size(){
        return this.#size;
    }

    set size(v){
        this.#size = v;
        v = v / 2;
        this.#halfX = v * this.#lenX;
        this.#halfY = v * this.#lenY;
    }

    get lenX(){
        return this.#lenX;
    }

    set lenX(v){
        this.#lenX = v;
        v = this.#size / 2;
        this.#halfX = v * this.#lenX;
        this.#halfY = v * this.#lenY;
    }

    get lenY(){
        return this.#lenY;
    }

    set lenY(v){
        this.#lenY = v;
        v = this.#size / 2;
        this.#halfX = v * this.#lenX;
        this.#halfY = v * this.#lenY;
    }

    getNode(sx, sy){
        sx = this.#map[Math.floor((this.#halfX + sx) / this.#size)];
        if(sx !== undefined) return sx[Math.floor((this.#halfY + sy) / this.#size)];
    }

    node(ix, iy){
        ix = this.#map[ix];
        if(ix !== undefined) return ix[iy];
    }
    
    toScene(n, v){ //n = "x|y"
        //n = n === "y" ? "lenY" : "lenX";
        if(n === "x") return v * this.#size - this.#halfX;
        return v * this.#size - this.#halfY;
    }
    
    toIndex(n, v){
        //n = n === "y" ? "lenY" : "lenX";
        if(n === "x") return Math.floor((this.#halfX + v) / this.#size);
        return Math.floor((this.#halfY + v) / this.#size);
    }

    initMap(disable, height){
        
        disable = Array.isArray(disable) === true ? disable : null;
        height = Array.isArray(height) === true ? height : null;
        
        const lenX = this.lenX, lenY = this.lenY;
        var getHeight = (ix, iy) => {
            if(height === null) return 0;
            ix = height[ix * lenY + iy];
            if(ix === undefined) return 0;
            return ix;
        },
        getDisable = (ix, iy) => {
            if(disable === null) return 1;
            ix = disable[ix * lenY + iy];
            if(ix === undefined) return 0;
            return ix;
        },

        map = []//new Map();

        for(let x = 0, y, m; x < lenX; x++){
            m = []//new Map();
            for(y = 0; y < lenY; y++) m[y] = {x:x, y:y, height:getHeight(x, y), is:getDisable(x, y),  g:0, h:0, f:0, p:null, id:""}//m.set(y, {x:x, y:y, height:getHeight(x, y),   g:0, h:0, f:0, p:null, id:""});
            map[x] = m;//map.set(x, m);
        }
        
        this.#map = map;
        this._id = -1;
        this._updateID();
        this.mapRange.set(0, 0, this.#lenX-1, this.#lenY-1);

        map = disable = height = getHeight = undefined;

    }

    getLegalPoints(ix, iy, count, result = []){  //不包括 ix, iy
        const sTime = UTILS.time, _dots = SeekPath._dots;
        result.length = 0;
        result[0] = this.#map[ix][iy];
        count += 1;
        
        while(result.length < count){
            for(let k = 0, i, n, d, len = result.length; k < len; k++){
                n = result[k];
                this.getDots(n.x, n.y, this.angle, _dots);
                for(i = 0; i < this.angle; i += 2){
                    d = this.#map[_dots[i]][_dots[i+1]];
                    if(d.is === 1 && this.mapRange.containsPoint(d.x, d.y) && !result.includes(d)){
                        if(Math.abs(n.x - d.x) + Math.abs(n.y - d.y) === 2 && this._check(n, d)){
                            result.push(d);
                        }
                    }
                }
            }

            if(UTILS.time - sTime >= this.timeout) break;
        }
    
        result.splice(0, 1);
        return result;
    }

    getLinePoints(now, next, count, result = []){ //不包括 now 
        if(count % 2 !== 0) count += 1;

        const len = count / 2, angle90 = 90/180*Math.PI;

        var i, ix, iy, n, nn = next, is = false;

        UTILS.emptyPoint.set(now.x, now.y).rotate(next, angle90);
        var disX = UTILS.emptyPoint.x - next.x, 
        disY = UTILS.emptyPoint.y - next.y;
        
        for(i = 0; i < len; i++){
            if(is){
                result[len-1-i] = nn;
                continue;
            }
            ix = disX + disX * i + next.x;
            iy = disY + disY * i + next.y;

            n = this.#map[ix][iy];
            if(n.is === 1) nn = n;
            else is = true;
            result[len-1-i] = nn;
        }

        //result[len] = next;
        is = false;
        nn = next;

        UTILS.emptyPoint.set(now.x, now.y).rotate(next, -angle90);
        disX = UTILS.emptyPoint.x - next.x, 
        disY = UTILS.emptyPoint.y - next.y;

        for(i = 0; i < len; i++){
            if(is){
                result[len+i] = nn;
                continue;
            }
            ix = disX + disX * i + next.x;
            iy = disY + disY * i + next.y;

            n = this.#map[ix][iy];
            if(n.is === 1) nn = n;
            else is = true;
            result[len+i] = nn;
        }

        return result;
    }

    getDots(x, y, a, r = []){ //获取周围的点 x,y, a:8|16, r:存放结果数组
        r.length = 0;
        const x_1 = x-1, x1 = x+1, y_1 = y-1, y1 = y+1;
        if(a === 16) r.push(x_1, y_1, x, y_1, x1, y_1, x_1, y, x1, y, x_1, y1, x, y1, x1, y1);
        else r.push(x, y_1, x, y1, x_1, y, x1, y);
    }

    getDisMHD(nodeA, nodeB){
        return Math.abs(nodeA.x - nodeB.x) + Math.abs(nodeA.y - nodeB.y);
    }

    _updateID(){ //更新标记
        this._id++;
        this._openID = "o_"+this._id;
        this._closeID = "c_"+this._id;
    }

    _check(dotA, dotB){ //检测 a 是否能到 b
        //获取 dotB 周围的4个点 并 遍历这4个点
        this.getDots(dotB.x, dotB.y, 8, SeekPath.dots4);
        for(let k = 0, x, y; k < 8; k += 2){
            x = SeekPath.dots4[k]; 
            y = SeekPath.dots4[k+1];
            if(this.mapRange.containsPoint(x, y) === false) continue;

            //找出 dotA 与 dotB 相交的两个点:
            if(Math.abs(dotA.x - x) + Math.abs(dotA.y - y) === 1){
                //如果其中一个交点是不可走的则 dotA 到 dotB 不可走, 既返回 false
                if(this.#map[x][y].is === 0) return false;
            }

        }

        return true;
    }

    run(x, y, x1, y1, path = this.#path){
        path.length = 0;
        if(this.#map === null || this.mapRange.containsPoint(x, y) === false) return path;
        
        var _n = this.#map[x][y];
        if(_n.is === 0) return path;

        const _sort = SeekPath._sort,
        _open = SeekPath._open,
        _dots = SeekPath._dots, 
        time = Date.now();

        //var isDot = true, 
        var suc = _n, k, mhd, g, h, f, _d;

        _n.g = 0;
        _n.h = _n.h = Math.abs(x1 - x) * 10 + Math.abs(y1 - y) * 10; 
        _n.f = _n.h;
        _n.p = null;
        this._updateID();
        _n.id = this._openID;
        _open.push(_n);
        
        while(_open.length !== 0){
            if(Date.now() - time > this.timeout) break;

            _open.sort(_sort);
            _n = _open.shift();
            if(_n.x === x1 && _n.y === y1){
                suc = _n;
                break;
            }
            
            if(suc.h > _n.h) suc = _n;
            _n.id = this._closeID;
            this.getDots(_n.x, _n.y, this.angle, _dots);
            
            for(k = 0; k < this.angle; k += 2){
                
                _d = this.#map[_dots[k]][_dots[k+1]];
                if(_d.id === this._closeID || _d.is === 0 || this.mapRange.containsPoint(_d.x, _d.y) === false) continue;

                mhd = Math["abs"](_n["x"] - _d.x) + Math["abs"](_n["y"] - _d.y);
                g = _n["g"] + (mhd === 1 ? 10 : 14);
                h = Math["abs"](x1 - _d.x) * 10 + Math["abs"](y1 - _d.y) * 10;
                f = g + h;
            
                if(_d.id !== this._openID){
                    //如果是斜角和8方向:
                    if(mhd !== 1 && this.angle === 16){
                        if(this._check(_n, _d)){
                            _d.g = g;
                            _d.h = h;
                            _d.f = f;
                            _d.p = _n;
                            _d.id = this._openID;
                            _open.push(_d);
                        }
                    }else{
                        _d.g = g;
                        _d.h = h;
                        _d.f = f;
                        _d.p = _n;
                        _d.id = this._openID;
                        _open.push(_d);
                    }
                }

                else if(g < _d.g){
                    _d.g = g;
                    _d.f = g + _d.h;
                    _d.p = _n;
                }
    
            }
        }

        this.#success = suc === _n;

        while(suc !== null){
            path.unshift(suc); //0为起始点,length-1为结束点
            //path.unshift(this.toScene("x", suc["x"]), suc["height"], this.toScene("y", suc["y"]));
            suc = suc["p"];
        }
        
        _open.length = _dots.length = 0;
        
        return path;
    }

}




/* TweenValue (从 原点 以规定的时间到达  终点)

parameter: origin, end, time, onUpdate, onEnd;

attribute:
    origin: Object; //原点(起点)
    end: Object; //终点
    time: Number; //origin 到 end 花费的时间
    onUpdate: Function; //更新回调; 一个回调参数 origin; 默认null;
    onEnd: Function; //结束回调; 没有回调参数; 默认null; (如果返回的是"restart"将不从队列删除, 你可以在onEnd中更新.end不间断的继续补间)

method:
    reset(origin, end: Object): undefined; //更换 .origin, .end; 它会清除其它对象的缓存属性
    reverse(): undefined; //this.end 复制 this.origin 的原始值
    update(): undefined; //Tween 通过此方法统一更新 TweenValue

demo: 
    //init Tween:
    const tween = new Tween(),
    animate = function (){
        requestAnimationFrame(animate);
        tween.update();
    }

    //init TweenValue:
    const v1 = new Tween.Value({x:0, y:0}, {x:5, y:10}, 1000, v => console.log(v));
    
    animate();
    tween.start(v1);

    //缓动
    const end = 100;
    var step, left = 0;
    new Timer(timer => {
        step = (end - left) / 10;
        left += step;
        if(Math.ceil(left) === end) timer.stop();
    }, 1000);
*/
class TweenValue{

    constructor(origin = {}, end = {}, time = 500, onEnd = null, onUpdate = null, onStart = null){
        this.origin = origin;
        this.end = end;
        this.time = time;

        this.onUpdate = onUpdate;
        this.onEnd = onEnd;
        this.onStart = onStart;
        
        //以下属性不能直接设置
        this._r = null;
        this._t = 0;
        this._v = Object.create(null);
    }

    _start(){
        var v = "";
        for(v in this.origin) this._v[v] = this.origin[v];
        if(this.onStart !== null) this.onStart(this);
        this._t = Date.now();
        //this.update();
    }

    reset(origin, end){
        this.origin = origin;
        this.end = end;
        this._v = Object.create(null);
    }

    reverse(){
        var n = "";
        for(n in this.origin) this.end[n] = this._v[n];
    }

    update(){

        if(this["_r"] !== null){

            var ted = Date["now"]() - this["_t"];

            if(ted >= this["time"]){

                for(ted in this["origin"]) this["origin"][ted] = this["end"][ted];

                if(this["onEnd"] !== null){

                    if(this["onEnd"](this) === "restart"){
                        if(this["onUpdate"] !== null) this["onUpdate"](this["origin"]);
                        this["_start"]();
                    }

                    else this["_r"]["stop"](this);
                    
                }

                else this["_r"]["stop"](this);

            }

            else{
                ted = ted / this["time"];
                let n = "";
                for(n in this["origin"]) this["origin"][n] = ted * (this["end"][n] - this["_v"][n]) + this["_v"][n];
                if(this["onUpdate"] !== null) this["onUpdate"](this["origin"]);
            }

        }

    }

}




/* Tween 动画补间 (TweenValue 的root, 可以管理多个TweenValue)

parameter:
attribute:
method:
    start(value: TweenValue): undefined;
    stop(value: TweenValue): undefined;

static:
    Value: TweenValue;

demo:
    //init Tween:
    const tween = new Tween(),
    animate = function (){
        requestAnimationFrame(animate);
        tween.update();
    }

    //init TweenValue:
    const v2 = new Tween.Value({x:0, y:0}, {x:5, y:10}, 1000, v => console.log(v), v => {
        v2.reverse(); //v2.end 复制起始值
        return "restart"; //返回"restart"表示不删除队列, 需要继续补间
    });
    
    animate();
    tween.start(v2);

*/
class Tween extends RunningList{

    static Value = TweenValue;

    constructor(){
        super();
    }

    start(value){
        this.add(value);
        value._r = this;
        value._start();
    }

    stop(value){
        this.remove(value);
        value._r = null;
    }

}




/* EventDispatcher 自定义事件管理器
parameter: 
attribute: 

method:
    clearEvents(eventName): undefined;             //清除eventName列表, 如果 eventName 未定义清除所有事件
    customEvents(eventName, eventParam): this;    //创建自定义事件 eventParam 可选 默认 undefined
    getParam(eventName): eventParam;
    trigger(eventName, callback): undefined;    //触发 (callback: 可选)
    register(eventName, callback): undefined;    //
    deleteEvent(eventName, callback): undefined; //

demo:
    const eventDispatcher = new EventDispatcher();
    eventDispatcher.customEvents("test", {name: "test"});

    eventDispatcher.register("test", eventParam => {
        console.log(eventParam) //Object{name: "test"}
    });

    eventDispatcher.trigger("test");

*/
class EventDispatcher{
    
    constructor(){
        this._eventsList = {};
    }

    clearEvents(eventName){ 
        if(this._eventsList[eventName] !== undefined) this._eventsList[eventName].func = []
        else this._eventsList = {}
    }
    
    customEvents(eventName, eventParam){ 
        if(this._eventsList[eventName] !== undefined) return console.warn("EventDispatcher: "+eventName+" 已存在");
        this._eventsList[eventName] = {func: [], param: eventParam}
        return this;
    }

    getParam(eventName){
        return this._eventsList[eventName]["param"];
    }
    
    trigger(eventName, callback){
        const obj = this._eventsList[eventName];
        
        if(obj.func.length > 0){
            if(typeof callback === "function") callback(obj["param"]);

            const len = obj["func"].length;
            for(let k = 0; k < len; k++){
                if(obj["func"][k] !== undefined) obj["func"][k](obj["param"]);
            }
        }
    }
    
    register(eventName, callback){
        if(this._eventsList[eventName] === undefined) return console.warn("EventDispatcher: "+eventName+" 不存在");
        const obj = this._eventsList[eventName];
        obj.func.push(callback);
    }
    
    deleteEvent(eventName, callback){
        if(this._eventsList[eventName] === undefined) return console.warn("EventDispatcher: "+eventName+" 不存在");
        const obj = this._eventsList[eventName], 
        i = obj.func.indexOf(callback);
        if(i !== -1) obj.func.splice(i, 1);
    }

}




export {
    UTILS, 
    TweenCache,
    AnimateLoop,
    Ajax, 
    IndexedDB, 
    TreeStruct, 
    Point, 
    Line, 
    BoundaryBox,
    Box, 
    RoundedRectangle,
    Circle, 
    Polygon, 
    Meter,
    RGBColor, 
    Timer, 
    SeekPath, 
    RunningList, 
    TweenValue, 
    Tween, 
    TweenTarget, 
    EventDispatcher, 
    SecurityDoor,
}

 

"use strict";
import {
    UTILS, 
    Box, 
    EventDispatcher,
    Point,
    AnimateLoop,
    TreeStruct,
    Timer,
    TweenCache,
    RGBColor,
    Line,
    Polygon,
    Circle,
    RoundedRectangle,
    Meter,
    SecurityDoor,
} from './Utils.js';


/* Touch 事件
touchstart
当用户在触摸平面上放置了一个触点时触发。事件的目标 element 将是触点位置上的那个目标 element

touchend
当一个触点被用户从触摸平面上移除（即用户的一个手指或手写笔离开触摸平面）时触发。当触点移出触摸平面的边界时也将触发。例如用户将手指划出屏幕边缘。
事件的目标 element 与触发 touchstart 事件的目标 element 相同，即使 touchend 事件触发时，触点已经移出了该 element 。
已经被从触摸平面上移除的触点，可以在 changedTouches 属性定义的 TouchList 中找到。

touchmove
当用户在触摸平面上移动触点时触发。事件的目标 element 和触发 touchstart 事件的目标 element 相同，即使当 touchmove 事件触发时，触点已经移出了该 element 。
当触点的半径、旋转角度以及压力大小发生变化时，也将触发此事件。
注意： 不同浏览器上 touchmove 事件的触发频率并不相同。这个触发频率还和硬件设备的性能有关。因此决不能让程序的运作依赖于某个特定的触发频率。

touchcancel
当触点由于某些原因被中断时触发。有几种可能的原因如下（具体的原因根据不同的设备和浏览器有所不同）：
由于某个事件出现而取消了触摸：例如触摸过程被弹窗打断。
触点离开了文档窗口，而进入了浏览器的界面元素、插件或者其他外部内容区域。
当用户产生的触点个数超过了设备支持的个数，从而导致 TouchList 中最早的 Touch 对象被取消。


TouchEvent.changedTouches
这个 TouchList 对象列出了和这个触摸事件对应的 Touch 对象。
对于 touchstart 事件，这个 TouchList 对象列出在此次事件中新增加的触点。
对于 touchmove 事件，列出和上一次事件相比较，发生了变化的触点。
对于 touchend 事件，changedTouches 是已经从触摸面的离开的触点的集合（也就是说，手指已经离开了屏幕/触摸面）。

TouchEvent.targetTouches
targetTouches 是一个只读的 TouchList 列表，包含仍与触摸面接触的所有触摸点的 Touch 对象。touchstart (en-US)事件触发在哪个element内，它就是当前目标元素。

TouchEvent.touches
一个 TouchList，其会列出所有当前在与触摸表面接触的 Touch 对象，不管触摸点是否已经改变或其目标元素是在处于 touchstart 阶段。

1 event.changedTouches 上一次的触点列表 
1 event.targetTouches 某个元素的当前触点列表 
1 event.touches 屏幕上所有的当前触点列表 
5 touches： Array[Object{
    clientX, clientY
    pageX, pageY
    screenX, screenY
    radiusX, radiusY 
    force
    identifier
    rotationAngle
    target
}]

*/


function _roundRect(con, x, y, w, h, r){ //con: context || Path2D
    const _x = x + r, 
    _y = y + r, 
    mx = x + w, 
    my = y + h, 
    _mx = mx - r, 
    _my = my - r;

    //上
    con.moveTo(_x, y);
    con.lineTo(_mx, y);
    con.arcTo(mx, y, mx, _y, r);

    //右
    con.lineTo(mx, _y);
    con.lineTo(mx, _my);
    con.arcTo(mx, my, _x, my, r);

    //下
    con.lineTo(_x, my);
    con.lineTo(_mx, my);
    con.arcTo(x, my, x, _my, r);

    //左
    con.lineTo(x, _y);
    con.lineTo(x, _my);
    con.arcTo(x, y, _x, y, r);
}


const PI2 = Math.PI*2;

const ElementUtils = {

    getRect(elem){
        return elem.getBoundingClientRect();
    },

    downloadFile(blob, fileName){
        const link = document.createElement("a");
        link.href = URL.createObjectURL(blob);
        link.download = fileName;
        link.click();
    },

    loadFileJSON(onload){
        const input = document.createElement("input");
        input.type = "file";
        input.accept = ".json";
        
        input.onchange = a => {
            if(a.target.files.length === 0) return;
            const fr = new FileReader();
            fr.onloadend = b => onload(b.target.result);
            fr.readAsText(a.target.files[0]); //fr.readAsDataURL(a.target.files[0]);
        }
        
        input.click();
    },

    loadFileImages(onload){
        const input = document.createElement("input");
        input.type = "file";
        input.multiple = "multiple";
        input.accept = ".png, .PNG, .jpg, .JPG, .jpeg, .JPEG, .bmp, .BMP, .gif, .GIF";
        
        input.onchange = e => {
            const files = e.target.files, len = files.length;
            if(len === 0) return;

            var i = 0;
            const fr = new FileReader(), result = [];
            fr.onerror = () => {
                i++; if(i === len && typeof onload === "function") onload(result);
            }
            fr.onloadend = ef => {
                if(typeof ef.target.result === "string" && ef.target.result.length > 0) result.push(ef.target.result);
                i++; 
                if(i === len && typeof onload === "function") onload(result);
                else fr.readAsDataURL(files[i]);
            }

            fr.readAsDataURL(files[0]);
        }
        
        input.click();
    },

    createCanvas(w = 1, h = 1, className = ""){
        const canvas = document.createElement("canvas");
        canvas.width = w;
        canvas.height = h;
        canvas.className = className;
        return canvas;
    },

    createContext(w = 1, h = 1, alpha = true){
        const canvas = document.createElement("canvas"),
        context = canvas.getContext("2d", {alpha: alpha});
        canvas.width = w;
        canvas.height = h;
        return context;
    },

    //加载图片并把图片缩放至 w, h 大小(如果与w,h大小一样则不缩放直接返回image而不是canvas);
    //urls: Array[string]; 此参数为引用(只对urls读操作)
    //constrainScale: 在缩放图像时是否约束其比例; 默认 false
    createCanvasFromURL(w, h, urls, constrainScale, onload, onchange){
        var i = 0; 
        const len = urls.length, images = [],
        done = () => {
            i++; if(len !== i){
                if(typeof onchange === "function") onchange(i, len);
                return;
            }
            
            for(let k = 0; k < len; k++){
                const image = images[k];
                if(image.width !== w || image.height !== h){
                    const context = this.createContext(w, h, true);
                    if(constrainScale === true){
                        const scale = UTILS.getSameScale(image, {width: w, height: h}),
                        nw = scale * image.width,
                        nh = scale * image.height;
                        context.drawImage(image, (w - nw) / 2, (h - nh) / 2, nw, nh);
                    } else {
                        context.drawImage(image, 0, 0, w, h);
                    }
                    images[k] = context.canvas;
                }
            }

            if(typeof onload === "function") onload(images);
        }

        for(let k = 0; k < len; k++){
            images[k] = new Image();
            images[k].onload = done;
            images[k].src = urls[k];
        }
    },

    //创建画布, 并且在此画布上绘制两种颜色交叉的底板色
    createCanvasTCC(width, height, size, round = 0, c1 = "rgb(255,255,255)", c2 = "rgb(127,127,127)"){
        const lenX = Math.ceil(width/size), lenY = Math.ceil(height/size),
        con = this.createContext(width, height, true), 
        l_2 = con.lineWidth / 2, p$1 = new Path2D(), p$2 = new Path2D();
        
        if(round < 1){
            con.rect(l_2, l_2, width - con.lineWidth, height - con.lineWidth);
        } else {
            _roundRect(con, l_2, l_2, width - con.lineWidth, height - con.lineWidth, round);
            con.clip();
        }

        for(let ix = 0, iy = 0; ix < lenX; ix++){
    
            for(iy = 0; iy < lenY; iy++){
                
                ((ix + iy) % 2 === 0 ? p$1 : p$2).rect(ix * size, iy * size, size, size);
                
            }
    
        }

        con.fillStyle = c1;
        con.fill(p$1);

        con.fillStyle = c2;
        con.fill(p$2);

        return con.canvas;
    },

    createElem(tagName, className = "", textContent = ""){
        const elem = document.createElement(tagName);
        elem.className = className;
        elem.textContent = textContent;
        return elem;
    },

    createInput(type, className = ""){
        const input = document.createElement("input");
        input.type = type;
        input.className = className;
        return input;
    },

    appendChilds(parentElem, ...nodes){
        const msgContainer = document.createDocumentFragment();
        for(let k = 0, len = nodes.length; k < len; k++) msgContainer.appendChild(nodes[k]);
        parentElem.appendChild(msgContainer);
    },

    removeChild(elem){
        if(elem.parentElement) elem.parentElement.removeChild(elem);
    },

    rotate(elem, a, o = "center"){
        elem.style.transformOrigin = o;
        elem.style.transform = `rotate(${a}deg)`;
    },

    bindButton(elem, callback, ondown = null){
        var timeout = 0;

        const param = {offsetX: 0, offsetY: 0},

        onUp = event => {
            elem.removeEventListener('pointerup', onUp);
            if(Date.now() - timeout < 300) callback(event, param);
        },

        onDown = event => {
            timeout = Date.now();
            param.offsetX = event.offsetX;
            param.offsetY = event.offsetY;
            if(ondown !== null) ondown(event, param);
            elem.removeEventListener('pointerup', onUp);
            elem.addEventListener('pointerup', onUp);
        }

        elem.addEventListener('pointerdown', onDown);

        return function (){
            elem.removeEventListener('pointerup', onUp);
            elem.removeEventListener('pointerdown', onDown);
        }
    },

    bindMobileButton(elem, callback, ondown = null){
        var timeout = 0, rect;

        const param = {offsetX: 0, offsetY: 0},
        
        onUp = event => {
            event.preventDefault();
            if(Date.now() - timeout < 300) callback(event, param);
        },

        onDown = event => {
            event.preventDefault();
            timeout = Date.now();
            rect = elem.getBoundingClientRect();
            param.offsetX = event.targetTouches[0].pageX - rect.x;
            param.offsetY = event.targetTouches[0].pageY - rect.y;
            if(ondown !== null) ondown(event, param);
        }

        elem.addEventListener('touchend', onUp);
        elem.addEventListener('touchstart', onDown);

        return function (){
            elem.removeEventListener('touchend', onUp);
            elem.removeEventListener('touchstart', onDown);
        }
    },

}


function gradientColor(gradient, colors, close = false){
    if(UTILS.emptyArray(colors)) return;
    const len = colors.length;
    if(close === false){
        for(let k = 0, _len = len - 1; k < len; k++) gradient.addColorStop(k / _len, colors[k]);
    }else{
        for(let k = 0; k < len; k++) gradient.addColorStop(k / len, colors[k]);
        gradient.addColorStop(1, colors[0]);
    }
    return gradient;
}

function gradientColorSymme(gradient, colors){
    if(Array.isArray(colors) === true){

        const len = Math.round(colors.length/2), count = len * 2;
        
        for(let k = 0; k < len; k++){
            gradient.addColorStop(k / count, colors[k]);
        }

        for(let k = len, i = len; k >= 0; k--, i++){
            gradient.addColorStop(i / count, colors[k]);
        }
        
    }
    return gradient;
}

//解决像素过高导致模糊问题
function setCS(c, w, h){ 
    if(devicePixelRatio <= 1){
        c.width = Math.round(w);
        c.height = Math.round(h);
    } else {
        c.style.width = w + 'px';
        c.style.height = h + 'px';
        c.width = Math.round(w * devicePixelRatio);
        c.height = Math.round(h * devicePixelRatio);
    }
}
function getCX(x){
    return devicePixelRatio <= 1 ? x : x * devicePixelRatio;
}


/* CanvasElementEvent domElement 绑定 移动 或 桌面 down, move, up 事件 (使两端的事件触发逻辑和参数保持一致)
parameter: null
attributes: null
method: 
    initEvent(domElement, list, box): function;
    initEventMobile(domElement, list, box): function;
        domElement: HTMLCanvasElement
        list: Array[CanvasEventTarget]
        box: Box
        function: 删除绑定的事件
*/
class CanvasElementEvent{

    initEvent(domElement, list, box, cis = null){
        const onups = [];

        const ondown = event => {
            let i, ci, len = list.length;
            for(i = 0; i < onups.length; i++) onups[i]();
            onups.length = 0;

            const sTime = Date.now();
            //为什么不用event.offsetX, 而是 rect, 用rect是为了鼠标即使移出了目标dom的范围其参数值也是有效的
            const targets = [], rect = domElement.getBoundingClientRect(),
            _offsetX = event.pageX - rect.x,
            _offsetY = event.pageY - rect.y,
            offsetX = _offsetX + box.x, 
            offsetY = _offsetY + box.y;
            
            for(i = 0; i < len; i++){
                ci = list[i];
                if(ci.visible === false) continue;
                if(ci.position === ""){
                    if(ci.box.containsPoint(offsetX, offsetY) === false) continue;
                } else if(ci.position === "fixed"){
                    if(ci.box.containsPoint(_offsetX, _offsetY) === false) continue;
                }
                
                if(targets.length === 0) targets[0] = ci;
                else{
                    if(ci.index === targets[0].index) targets.push(ci);
                    else if(ci.index > targets[0].index){
                        targets.length = 0;
                        targets[0] = ci;
                    }
                }
            }
            
            len = targets.length;

            if(len !== 0){
                if(cis !== null) cis.disable(this);
                const info = {targets: targets, target: targets[len-1], offsetX: offsetX, offsetY: offsetY, delta: 0, moveStep: 0},
                
                onmove = e => {
                    info.moveStep++;
                    info.offsetX = e.pageX - rect.x + box.x, 
                    info.offsetY = e.pageY - rect.y + box.y;
                    info.delta = Date.now() - sTime;
                    for(i = 0; i < len; i++){
                        if(targets[i].hasEventListener("move") === true) targets[i].trigger("move", info, e);
                    }
                },
        
                onup = e => {
                    domElement.releasePointerCapture(e.pointerId);
                    domElement.removeEventListener("pointerup", onup);
                    domElement.removeEventListener("pointermove", onmove);
                    info.delta = Date.now() - sTime;
                    for(i = 0; i < len; i++){
                        if(targets[i].hasEventListener("up") === true) targets[i].trigger("up", info, e);
                    }

                    //click
                    if(info.delta < 300 && info.moveStep === 0){
                        for(i = 0; i < len; i++){
                            if(targets[i].hasEventListener("click") === true) targets[i].trigger("click", info, e);
                        }
                    }

                    if(cis !== null) cis.enable(this);
                }

                onups.push(() => {
                    domElement.removeEventListener("pointerup", onup);
                    domElement.removeEventListener("pointermove", onmove);
                });

                domElement.setPointerCapture(event.pointerId);
                domElement.addEventListener("pointerup", onup);
                domElement.addEventListener("pointermove", onmove);
                for(i = 0; i < len; i++){
                    if(targets[i].hasEventListener("down") === true) targets[i].trigger("down", info, event);
                }

            }
            
        }

        domElement.addEventListener("pointerdown", ondown);
        return function (){
            for(let i = 0; i < onups.length; i++) onups[i]();
            onups.length = 0;
            domElement.removeEventListener("pointerdown", ondown);
            if(cis !== null) cis.enable(this);
        }
    }

    initEventMobile(domElement, list, box, cis = null){

        const ondown = event => {
            const sTime = Date.now();
            event.preventDefault();
            let i, ci, len = list.length;

            const targets = [], rect = domElement.getBoundingClientRect(),
            _offsetX = event.targetTouches[0].pageX - rect.x,
            _offsetY = event.targetTouches[0].pageY - rect.y,
            offsetX = _offsetX + box.x, 
            offsetY = _offsetY + box.y;

            for(i = 0; i < len; i++){
                ci = list[i];
                if(ci.visible === false) continue;
                if(ci.position === ""){
                    if(ci.box.containsPoint(offsetX, offsetY) === false) continue;
                } else if(ci.position === "fixed"){
                    if(ci.box.containsPoint(_offsetX, _offsetY) === false) continue;
                }
                if(targets.length === 0) targets[0] = ci;
                else{
                    if(ci.index === targets[0].index) targets.push(ci);
                    else if(ci.index > targets[0].index){
                        targets.length = 0;
                        targets[0] = ci;
                    }
                }
            }
            
            len = targets.length;

            if(len !== 0){
                if(cis !== null) cis.disable(this);
                const info = {targets: targets, target: targets[len-1], offsetX: offsetX, offsetY: offsetY, delta: 0, moveStep: 0},
                
                onmove = e => {
                    info.moveStep++;
                    info.offsetX = e.targetTouches[0].pageX - rect.x + box.x;
                    info.offsetY = e.targetTouches[0].pageY - rect.y + box.y;
                    info.delta = Date.now() - sTime;
                    for(i = 0; i < len; i++){
                        if(targets[i].hasEventListener("move") === true) targets[i].trigger("move", info, e);
                    }
                },
        
                onup = e => {
                    domElement.removeEventListener("touchmove", onmove);
                    domElement.removeEventListener("touchend", onup);
                    domElement.removeEventListener("touchcancel", onup);
                    info.delta = Date.now() - sTime;
                    for(i = 0; i < len; i++){
                        if(targets[i].hasEventListener("up") === true) targets[i].trigger("up", info, e);
                    }

                    //click
                    if(info.delta < 300 && info.moveStep === 0){
                        for(i = 0; i < len; i++){
                            if(targets[i].hasEventListener("click") === true) targets[i].trigger("click", info, e);
                        }
                    }

                    if(cis !== null) cis.enable(this);
                }

                domElement.addEventListener("touchcancel", onup);
                domElement.addEventListener("touchend", onup);
                domElement.addEventListener("touchmove", onmove);
                for(i = 0; i < len; i++){
                    if(targets[i].hasEventListener("down") === true) targets[i].trigger("down", info, event);
                }
            }
            
        }

        domElement.addEventListener("touchstart", ondown);
        return function (){
            domElement.removeEventListener("touchstart", ondown);
            if(cis !== null) cis.enable(this);
        }

    }

}


/* CanvasPath2D CanvasImage.path2D
注意: 线模糊问题任然存在(只有.rect().progress()做了模糊优化)
parameter: 
    drawType = "stroke", drawStyle = null, order = "after"

attributes:
    drawType: String;    //填充路径或描绘路径 可能值: 默认 stroke | fill
    drawStyle: Object;    //canvas.context的属性
    order: Bool;     //是否在 CanvasImage 之前绘制 "before"||"after"默认
    value: any;        

method:
    reset(): this;                                //设为零值(清空不在绘制)
    line(line: Line): this;                     //线段
    rect(rect: Box||RoundedRectangle): this;    //矩形
    circle(circle: Circle): this;                //圆
    path(polygon: Polygon): this;                //线
    progress(meter: Meter): this;                //进度条(为 CanvasImage 创建默认的进度条, 修改 meter.value 更新进度条视图)

demo:
    const test = new CanvasImageCustom().size(100, 100).pos(100, 100).rect().fill("#664466");
    test.path2D = new CanvasPath2D("stroke", {strokeStyle: "blue", lineWidth: 4});

    const path2D = new Path2D();
    path2D.roundRect(12, 12, 40, 40, 10); //圆角矩形
    test.path2D.path(path2D);

    //test.path2D.line(new Line(4, 4, 4, 150000));

*/
class CanvasPath2D{

    #pathType = "";
    get isDraw(){
        return this.value && this.#pathType !== "";
    }

    constructor(drawType = "stroke", drawStyle = null, order = "after"){
        this.order = order;
        this.drawType = drawType;
        this.drawStyle = drawStyle;
        this.value = undefined;
    }

    reset(){
        this.#pathType = "";
        this.value = undefined;
        return this;
    }

    line(line = new Line()){
        this.#pathType = "line";
        this.value = line;
        return this;
    }

    rect(rect = new RoundedRectangle()){
        this.#pathType = "rect";
        this.value = rect;
        return this;
    }

    circle(circle = new Circle()){
        this.#pathType = "circle";
        this.value = circle;
        return this;
    }

    path(polygon = new Polygon()){
        this.#pathType = "path";
        this.value = polygon;
        return this;
    }

    progress(meter = new Meter()){
        this.#pathType = "progress";
        this.value = meter;
        return this;
    }

    _drawPath(con){
        if(this.drawStyle === null) con[this.drawType]();
        else{
            con.save();
            for(let n in this.drawStyle){
                if(this.drawStyle[n] !== con[n]) con[n] = this.drawStyle[n];
            }
            con[this.drawType]();
            con.restore();
        }
    }

    _draw(con, x, y, w, h){
        var lw;
        con.save();
        con.beginPath();
        con.rect(x, y, w, h);
        con.clip();
        con.translate(x, y);
        const val = this.value;
        switch(this.#pathType){
            case "line": 
            con.beginPath();
            con.moveTo(val.x, val.y);
            con.lineTo(val.x1, val.y1);
            this._drawPath(con);
            break;

            case "rect": 
            con.beginPath();
            lw = this.drawStyle.lineWidth || con.lineWidth;
            if(lw % 2 === 0){
                const lw_2 = lw / 2;
                x = Math.floor(val.x+lw_2);
                y = Math.floor(val.y+lw_2);
            } else {
                const lw_2 = lw / 2;
                x = Math.floor(val.x+lw_2)+0.5;
                y = Math.floor(val.y+lw_2)+0.5;
            }
            if(val.r === undefined || val.r < 1) con.rect(x, y, Math.floor(val.w-lw), Math.floor(val.h-lw));
            else _roundRect(con, x, y, Math.floor(val.w-lw), Math.floor(val.h-lw), val.r);
            this._drawPath(con);
            break;

            case "circle": 
            con.beginPath();
            con.arc(val.x, val.y, val.r, 0, PI2);
            this._drawPath(con);
            break;

            case "path": 
            con.beginPath();
            con.moveTo(val.points[0], val.points[1]);
            for(let k = 2, len = val.points.length; k < len; k += 2) con.lineTo(val.points[k], val.points[k+1]);
            this._drawPath(con);
            break;

            case "progress": 
            con.beginPath();
            lw = this.drawStyle.lineWidth || con.lineWidth;
            if(w >= h){
                x = lw % 2 === 0 ? Math.round(h-lw) : Math.floor(h-lw)+0.5;
                con.moveTo(0, x);
                con.lineTo(w * val.ratio, x);
            } else {
                x = lw % 2 === 0 ? Math.round(w-lw) : Math.floor(w-lw)+0.5;
                con.moveTo(x, 0);
                con.lineTo(x, h * val.ratio);
            }
            this._drawPath(con);
            break;
        }
        con.restore();
    }

}


/* CanvasImageDraw 渲染器
parameter: 
    option = {
        drawType           //默认 3 
        alpha             //默认 true
        className        //默认 ""
        width, height: Number || objcet: HTMLCanvasElement, CanvasImageCustom
    }

attribute:
    domElement: HTMLCanvasElement;
    context: CanvasRenderingContext2D;
    list: Array[CanvasImage]
    drawType: Number; //怎么去绘制列表, 默认 3
        0: 纯净模式(遍历列表: context.drawImage(CI.image, CI.x, CI.y))
        1: 应用CIR内置属性
        2: 应用CI内置属性
        3: 1 + 2
    
method:
    append(...ci: CanvasImage): this;        //追加多个ci到列表
    size(w, h: Number): this;                //设置box和canvas的宽高
    render(parentElem: HTMLElement): this;    //重绘所有的 CanvasImage 并把 canvas 添加至dom树
    redraw(): undefined;                     //重绘所有的 CanvasImage
    redrawCI(ci: CanvasImage): undefined;    //重绘一个 CanvasImage
    exit(): undefined;                        //不在使用此类应调用此方法清除相关缓存并从dom树删除画布;
    sortCIIndex(): undefined;                //所有ci按其 index 属性值从小到大排序一次(视图的层级, 可以绑定 "beforeDraw" 事件, 达到自动更新)

    sortCIPosEquals(list, option): this; //平铺排序(假设list里的所有CanvasImage的大小都一样)
        list: Array[CanvasImage]; //默认 this.list
        option: Object{
            disX, disY: Number,        //CanvasImage 之间的间距,默认 0
            sx, sy: Number,            //开始位置, 默认 0
            size: Object{w,h},        //如果定义就计算并在其上设置所占的宽高 (x,y 为option.sx.sy)
            lenX: Number,            //x轴最多排多少个 默认 1
        }
        //根据参数算出每个item的宽
        const width = 600, lenX = 5, disX = 4, sx = 2, sy = 2,
        itemSize = (width - sx * 2 - disX * (lenX - 1)) / lenX;

    sortCIPos(list, option): this; //平铺排序 (此排序相对于 .sortCIPosEquals() 较慢)
        list: Array[CanvasImage]; //默认 this.list
        option: Object{
            disX, disY: Number,        //CanvasImage 之间的间距,默认 0
            sx, sy: Number,            //开始位置, 默认 0
            size: Object{w,h},        //如果定义就计算并在其上设置所占的宽高 (x,y 为option.sx.sy)
            width: Number            //默认 this.box.w
            lineHeight: String,        //可能值: top, middle, bottom; 默认 top
        }

    initEventDispatcher(): this; //初始化自定义事件 (如果不需要这些事件可以不用初始化)
        支持的事件名:
        beforeDraw: eventParam{target: CanvasImageDraw}
        afterDraw: eventParam{target: CanvasImageDraw}
        boxX: eventParam{target: CanvasImageDraw}
        boxY: eventParam{target: CanvasImageDraw}
        size: eventParam{target: CanvasImageDraw}
        exit: eventParam{target: CanvasImageDraw}
        append: eventParam{target: Array[CanvasImage]}
        add: eventParam{target: CanvasImage}
        remove: eventParam{target: CanvasImage}
    
    createCircleDiffusion(t, mr, fillStyle): Function; //点击画布时播放向外扩散的圆
        t: Number;             //扩散至最大半径的时间, 默认200
        mr: Number;         //扩散圆的最大半径, 默认25
        fillStyle: String;    //填充扩散圆的主要颜色; 默认"rgba(0,244,255,0.5)"
        Function            //返回值, 用于退出此程序的函数

demo:
    //用 new Image() 加载20万个图片直接崩了 (用canvas就稍微有点卡)
    //如果用 CanvasImageText 去绘制形状或文字一样会崩

    const cir = new CanvasImageDraw({width: 600, height: 300}),
    cis = new CanvasImageScroll(cir, {scrollSize: 4});
    cir.domElement.style = `
        background: rgb(127,127,127);
    `;
    
    const img = new CanvasImage().loadImage(`${RootDir}examples/img/Stuffs/1.png`, () => {
        const option = {
            disX: 10, disY: 10,        //CanvasImage 之间的间距,默认 0
            sx: 0, sy: 0,            //开始位置, 默认 0
            size: {},            //如果定义就在其上设置结束时的矩形 
            lineHeight: "",        //可能值: top, middle, bottom; 默认 top
            lenX: Math.floor(cir.box.w / 50),
        }

        //测试排序
        for(let i = 0; i < 20; i++){
            console.time("test");
            //cir.sortCIPos(null, option);
            cir.sortCIPosEquals(null, option);
            console.timeEnd("test");
        }

        cir.render();
        console.log(cir, cis, option.size);
    });

    for(let i = 0; i < 200000; i++){
        const ci = new CanvasImage(img);
        cis.bindScroll(ci); //cis 能够监听此ci
        cis.changeCIAdd(ci); //cis 初始化此ci
        cir.list[i] = ci; //cir 能够绘制此ci
    }
*/
class CanvasImageDraw{
    
    static arrSort = function (a, b){return a["index"] - b["index"];}
    static paramCon = {alpha: true}
    
    static defaultStyles = {
        imageSmoothingEnabled: false, //是否启用平滑处理
        imageSmoothingQuality: "low", //平滑处理的质量
        globalCompositeOperation: "source-over", //混合模式
        filter: "none", //过滤器
        globalAlpha: 1, //透明度
        
        font: "10px sans-serif", //"10px sans-serif" ("bold 48px serif");
        textAlign: "left", //start
        textBaseline: "top", //alphabetic
        direction: "inherit", //"ltr"左往右 || "rtl"右往左 || "inherit"继承父elem 默认 字体方向
        wordSpacing: "0px",  //字体之间的间距(空格的距离)
        letterSpacing: "0px", //字体之间的间距
        textRendering: "auto", //如何绘制字体: auto 默认 || optimizeSpeed 速度 || optimizeLegibility 质量 || geometricPrecision 几何精度(最接近字体大小)
        fontKerning: "auto", //字体紧排
        fontStretch: "normal", //字体拉伸
        fontVariantCaps: "normal",

        lineCap: "butt", //butt (默认), round, square 线末端
        lineJoin: "miter", //round, bevel, miter(默认) 线转角
        lineDashOffset: 0,
        lineWidth: 1,
        miterLimit: 10,

        shadowColor: "rgba(0, 0, 0, 0)",
        shadowBlur: 0,
        shadowOffsetX: 0,
        shadowOffsetY: 0,

        fillStyle: "#000000",
        strokeStyle: "#000000",
    }

    static setDefaultStyles(context){
        const styles = CanvasImageDraw.defaultStyles;
        for(let k in styles){
            if(context[k] !== styles[k]) context[k] = styles[k];
        }
    }

    static getContext(canvas, className, alpha = true){
        if(CanvasImageDraw.isCanvas(canvas) === false) canvas = document.createElement("canvas");
        CanvasImageDraw.paramCon.alpha = alpha;
        const context = canvas.getContext("2d", CanvasImageDraw.paramCon);

        if(typeof className === "string") canvas.className = className;
        //if(typeof id === "string") canvas.setAttribute('id', id);
        
        return context;
    }

    static isCanvasImage(img){ //OffscreenCanvas: ImageBitmap;

        return ImageBitmap["prototype"]["isPrototypeOf"](img) || 
        HTMLImageElement["prototype"]["isPrototypeOf"](img) || 
        HTMLCanvasElement["prototype"]["isPrototypeOf"](img) || 
        CanvasRenderingContext2D["prototype"]["isPrototypeOf"](img) || 
        HTMLVideoElement["prototype"]["isPrototypeOf"](img);
        
    }

    static isCanvas(canvas){
        return HTMLCanvasElement["prototype"]["isPrototypeOf"](canvas);
    }

    #eventDispatcher = null;
    get eventDispatcher(){return this.#eventDispatcher;}
    
    #pointEV = new Point();
    #boxV = new Box();
    #box = null;
    get box(){return this.#box;}
    
    constructor(option = {}){
        this.list = [];
        this.drawType = option.drawType === undefined ? 3 : option.drawType;
        
        if(UTILS.isObject(option.object) === false){
            
            this.#box = new Box();
            this.context = CanvasImageDraw.getContext(null, option.className, option.alpha);
            this.domElement = this.context.canvas;
            this.size(option.width, option.height);

        } else {

            if(CanvasImageDraw.isCanvas(option.object) === true){
                this.#box = new Box();
                this.context = CanvasImageDraw.getContext(option.object, option.className, option.alpha);
                this.domElement = this.context.canvas;
                this.size(option.object.width, option.object.height);
            }
    
            else if(CanvasImageCustom.prototype.isPrototypeOf(option.object) === true){
                this.#box = option.object.box;
                this.context = option.object.context;
                this.domElement = option.object.image;
            }

            else{
                this.#box = new Box();
                this.context = CanvasImageDraw.getContext(null, option.className, option.alpha);
                this.domElement = this.context.canvas;
                this.size(option.width, option.height);
            }

        }

    }

    createCircleDiffusion(t = 200, mr = 25, fillStyle = "rgba(0,244,255,0.5)"){
        var x = 0, y = 0, st = 0, r = 0;
        const PI2 = Math.PI*2, context = this.context, oldFillStyle = context.fillStyle, 
        colors = [
            "rgba(0,0,0,0)", 
            fillStyle,
            "rgba(0,0,0,0)",
        ],
        
        animateLoop = new AnimateLoop(() => {
            if(r <= mr){
                this.redraw();
                r = (Date.now() - st) / t * mr;
                context.beginPath();
                context.arc(x, y, r, 0, PI2);
                const radialGradient = context.createRadialGradient(x, y, 0, x, y, r);
                gradientColorSymme(radialGradient, colors);
                context.fillStyle = radialGradient;
                context.fill();
            }
            else onstop();
        }),

        onstop = () => {
            context.fillStyle = oldFillStyle;
            animateLoop.stop();
            this.redraw();
        },

        ondown = event => {
            x = event.offsetX;
            y = event.offsetY;
            st = Date.now();
            r = 0;
            animateLoop.play();
        }
        
        this.domElement.addEventListener("pointerdown", ondown);
        return function (){
            onstop();
            this.domElement.removeEventListener("pointerdown", ondown);
        }
    }

    initEventDispatcher(){
        this.#eventDispatcher = new EventDispatcher();
        const paramA = {target: this}, paramB = {target: null}

        this.#eventDispatcher
        .customEvents("beforeDraw", paramA)
        .customEvents("afterDraw", paramA)
        .customEvents("boxX", paramA)
        .customEvents("boxY", paramA)
        .customEvents("size", paramA)
        .customEvents("exit", paramA)
        .customEvents("append", paramB)
        .customEvents("add", paramB)
        .customEvents("remove", paramB);

        let _x = this.#box.x, _y = this.#box.y;
        Object.defineProperties(this.#box, {

            x: {
                get: () => {return _x;},
                set: v => {
                    if(v !== _x && isNaN(v) === false){
                        _x = v;
                        this.#eventDispatcher.trigger("boxX");
                    }
                }
            },

            y: {
                get: () => {return _y;},
                set: v => {
                    if(v !== _y && isNaN(v) === false){
                        _y = v;
                        this.#eventDispatcher.trigger("boxY");
                    }
                }
            },

        });

        return this;
    }

    sortCIIndex(){
        this.list.sort(CanvasImageDraw.arrSort);
    }

    sortCIPosEquals(list, option = {}){
        if(Array.isArray(list) === false) list = this.list;
        if(list.length === 0) return this;

        const lenX = option.lenX || 1, 
        disX = option.disX || 0,
        disY = option.disY || 0,
        x = option.sx || 0, y = option.sy || 0, 
        w = list[0].w, h = list[0].h;

        for(let i = 0, ix, iy; i < list.length; i++){
            ix = i % lenX;
            iy = Math.floor(i / lenX);
            list[i].box.pos(ix * w + ix * disX + x, iy * h + iy * disY + y);
        }

        if(option.size !== undefined){
            option.size.w = w * lenX + disX * lenX - disX;
            const lenY = Math.ceil(list.length / lenX);
            option.size.h = h * lenY + disY * lenY - disY;
        }
        
        return this;
    }

    sortCIPos(list, option = {}){
        if(Array.isArray(list) === false) list = this.list;
        const len = list.length;
        if(len === 0) return this;

        const mw = option.width || this.box.w,
        indexs = option.lineHeight === "middle" || option.lineHeight === "bottom" ? [] : null, //[sIndex, length, mHeight]
        sx = option.sx || 0,
        sy = option.sy || 0,
        disX = option.disX || 0,
        disY = option.disY || 0,
        rect = option.size || null;
        if(rect !== null){
            rect.w = list[0].box.mx;
            rect.h = list[0].box.my;
        }

        var y = sy, x = sx, w = 0, h = list[0].h;
        for(let i = 0; i < len; i++){
            if(indexs !== null && indexs.length % 3 === 0) indexs.push(i);
            w = list[i].w;
            if(x + w + disX > mw){
                if(indexs !== null) indexs.push(i, h, i);
                x = w + sx + disX;
                y += h + disY;
                h = list[i].h;
                list[i].box.pos(sx, y);
            } else {
                list[i].box.pos(x, y);
                x += w + disX;
                h = Math.max(list[i].h, h);
                if(rect !== null){
                    rect.w = Math.max(list[i].box.mx, rect.w);
                    rect.h = Math.max(list[i].box.my, rect.h);
                }
            }
        }

        if(indexs !== null){
            if(indexs.length % 3 === 1) indexs.push(len, h);
            switch(option.lineHeight){
                case "middle": 
                for(let i = 0; i < indexs.length; i += 3){
                    for(let k = indexs[i]; k < indexs[i + 1]; k++) list[k].box.y += (indexs[i + 2] - list[k].h) / 2;
                }
                break;
                case "bottom": 
                for(let i = 0; i < indexs.length; i += 3){
                    for(let k = indexs[i]; k < indexs[i + 1]; k++) list[k].box.y += indexs[i + 2] - list[k].h;
                }
                break;
            }
        }
        
        if(rect !== null){
            rect.w -= sx;
            rect.h -= sx;
        }

        return this;
    }

    size(w, h){
        switch(typeof w) {
            case "number": 
            this.box.size(w, h);
            break;
            case "object": 
            this.box.size(w.width||w.w||this.box.w, w.height||w.h||this.box.h);
            break;
        }

        this.domElement.width = this.box.w;
        this.domElement.height = this.box.h;
        this.context.imageSmoothingEnabled = false;

        if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("size");

        return this;
    }

    render(parentElem = document.body){
        this.redraw();
        if(this.domElement.parentElement === null) parentElem.appendChild(this.domElement);
        return this;
    }

    exit(){
        if(this.domElement.parentElement) this.domElement.parentElement.removeChild(this.domElement);
        if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("exit");
        if(this.#eventDispatcher !== null) this.#eventDispatcher.clearEvents();
        this.list.length = 0;
    }

    append(...cis){
        const len = this.list.length;
        for(let i = 0; i < cis.length; i++) this.list[i + len] = cis[i];
        if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("append", param => param.target = cis);
        return this;
    }

    add(ci = new CanvasImage()){
        if(this.list.includes(ci) === false){
            this.list.push(ci);
            if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("add", param => param.target = ci);
        }
        return ci;
    }

    remove(ci){
        const i = this.list.indexOf(ci);
        if(i !== -1){
            this.list.splice(i, 1);
            if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("remove", param => param.target = ci);
        }
        return ci;
    }

    isDraw(ca){
        switch(ca.position){
            case "fixed": 
            if(this.#boxV.equals(this.box) === false) this.#boxV.set(0, 0, this.box.w, this.box.h);
            return ca["visible"] === true && ca["image"] && this.#boxV["intersectsBox"](ca["box"]);

            default: 
            return ca["visible"] === true && ca["image"] && this["box"]["intersectsBox"](ca["box"]);
        }
    }

    redraw(){
        this['context']['clearRect'](0, 0, this['box']['w'], this['box']['h']);
        switch(this.drawType){
            case 0: 
            for(let k = 0, ci; k < this.list.length; k++){
                ci = this.list[k];
                if(ci["image"] && this["box"]["intersectsBox"](ci["box"])) this.context.drawImage(ci.image, ci.x, ci.y);
            }
            return;

            case 1: 
            if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("beforeDraw");
            for(let k = 0, ci; k < this.list.length; k++){
                ci = this.list[k];
                if(ci["image"] !== null && this["box"]["intersectsBox"](ci["box"])) this.context.drawImage(ci.image, ci.x, ci.y);
            }
            if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("beforeDraw");
            return;

            case 2: 
            for(let k = 0, ci; k < this.list.length; k++){
                ci = this.list[k];
                if(this.isDraw(ci) === true) this._draw(ci);
            }
            return;

            case 3: 
            if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("beforeDraw");
            for(let k = 0, ci; k < this.list.length; k++){
                ci = this.list[k];
                if(this.isDraw(ci) === true) this._draw(ci);
            }
            if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("afterDraw");
            return;
        }
    }

    redrawCI(ci){
        if(this.isDraw(ci) === true){
            if(ci.position === "fixed"){
                this.context.clearRect(ci.x, ci.y, ci.w, ci.h);
            } else {
                this.context.clearRect(ci.x - this.box.x, ci.y - this.box.y, ci.w, ci.h);
            }
            
            this._draw(ci);
        }
    }

    redrawTarget(box){
        if(CanvasImage["prototype"]["isPrototypeOf"](box) === true) box = box.box;

        const _list = [], list = [], len = this.list.length;

        for(let k = 0, tar, i = 0, c = 0, _c = 0, a = _list, b = list, loop = false; k < len; k++){
            tar = this["list"][k];
            
            if(this.isDraw(tar) === false) continue;

            if(box["intersectsBox"](tar["box"]) === true){
                tar["__overlap"] = true;
                box["expand"](tar["box"]);
                loop = true;

                while(loop === true){
                    b["length"] = 0;
                    loop = false;
                    c = _c;

                    for(i = 0; i < c; i++){
                        tar = a[i];

                        if(box["intersectsBox"](tar["box"]) === true){
                            tar["__overlap"] = true;
                            box["expand"](tar["box"]);
                            loop = true; _c--;
                        }

                        else b.push(tar);
                        
                    }

                    a = a === _list ? list : _list;
                    b = b === _list ? list : _list;

                }
                
            }

            else{
                _c++;
                a["push"](tar);
                tar["__overlap"] = false;
            }
        }

        this['context']['clearRect'](0, 0, this['box']['w'], this['box']['h']);
        if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("beforeDraw");
        for(let k = 0, ci; k < this.list.length; k++){
            ci = this.list[k];
            if(ci["__overlap"] === true) this._draw(ci);
        }
        if(this.#eventDispatcher !== null) this.#eventDispatcher.trigger("afterDraw");
    }

    _draw(ci){
        const con = this.context;
        
        switch(ci.position){
            case "fixed": 
            this.#pointEV.set(0, 0);
            break;
            case "": 
            default: 
            this.#pointEV.set(this.#box.x, this.#box.y);
            break;
        }

        if(ci.hasEventListener("beforeDraw") === true) ci.trigger("beforeDraw", con, this.#pointEV);
        
        const x = ci.x - this.#pointEV.x, y = ci.y - this.#pointEV.y;

        if(ci.opacity !== con.globalAlpha) con.globalAlpha = ci.opacity;

        if(ci.shadow === null){
            if(con.shadowColor !== "rgba(0, 0, 0, 0)") con.shadowColor = "rgba(0, 0, 0, 0)";
            //if(con.shadowBlur !== 0) con.shadowBlur = 0;
        } else {
            if(ci.shadow.blur !== con.shadowBlur) con.shadowBlur = ci.shadow.blur;
            if(ci.shadow.color !== con.shadowColor) con.shadowColor = ci.shadow.color;
            if(ci.shadow.offsetX !== con.shadowOffsetX) con.shadowOffsetX = ci.shadow.offsetX;
            if(ci.shadow.offsetY !== con.shadowOffsetY) con.shadowOffsetY = ci.shadow.offsetY;
        }
        
        if(ci.isDrawPath2D === true && ci.path2D.order === "before") ci.path2D._draw(con, x, y, ci.w, ci.h);

        if(ci.w === ci.width && ci.h === ci.height) con.drawImage(ci.image, x, y);
        else con.drawImage(ci.image, x, y, ci.w, ci.h);

        if(ci.isDrawPath2D === true && ci.path2D.order === "after") ci.path2D._draw(con, x, y, ci.w, ci.h);

        if(ci.hasEventListener("afterDraw") === true) ci.trigger("afterDraw", con, this.#pointEV);
    }

}


/* CanvasEvent 支持 移动 和 桌面 端
parameter: 
    cid: CanvasImageDraw;    //必须
    cis: CanvasImageScroll; //可选(如果定义,那么在down到up期间cis为禁用状态)

method: 
    unbindEvent(): undefined;    //如果不在使用调用
*/
class CanvasEvent extends CanvasElementEvent{

    constructor(cid, cis){
        super();
        if(UTILS.isMobile){
            this.__exitEventFunc = this.initEventMobile(cid.domElement, cid.list, cid.box, cis);
        }else{
            this.__exitEventFunc = this.initEvent(cid.domElement, cid.list, cid.box, cis);
        }
    }

    unbindEvent(){
        if(typeof this.__exitEventFunc === "function"){
            this.__exitEventFunc();
            this.__exitEventFunc = undefined;
        }
    }

}


/* CanvasImageScroll 画布滚动条(CanvasImageDraw.box.xy的控制器)
parameter:
    cid: CanvasImageDraw, 
    option: Object{
        scrollVisible: string,    //滚动条的显示; 可能值: 默认"visible" || "" || "auto"; //注意: auto 只支持移动端环境, 由事件驱动视图的显示或隐藏
        scrollSize: number,        //滚动条的宽或高; 默认10; (如果想隐藏滚动条最好 scrollVisible: "", 而不是把此属性设为0)

        scrollEventType: string,    //可能的值: "default", "touch" || ""; 默认 根据自己所处的环境自动选择创建
        inertia: bool,                //是否启用移动端滚动轴的惯性; 默认 true; (当前环境处于移动端才有效)
        inertiaLife: number,        //移动端滚动轴惯性生命(阻力强度); 0 - 1; 默认 0.06; (inertia 为true才有效)
        isPage: bool,                //是否添加分页效果,拖拽查看每一页,每一页的大小为cid.box.wh; 默认 false;  (inertia 为true才有效)

        domElement: HTMLElement,    //dom事件绑定的目标; 默认 cid.domElement
    }

attribute:
    scrollXView: CanvasImageCustom; //scroll的背景是.image, 游标是.path2D (参见 CanvasImage)
    scrollYView: CanvasImageCustom;
    cursorView: CanvasPath2D;        //
    maxSize: Point;        //只读, 最大边界

method: 
    enable(sign: any): undefined;    //启用(只对DOM事件有效)
    disable(sign: any): undefined;    //禁用
    resetMaxSizeX(): undefined;        //重新计算最大边界x
    resetMaxSizeX(): undefined;     //重新计算最大边界y
    unbindEvent(): undefined;         //如果不在使用此类调用

    bindScrolls(list: Array[CanvasImage]): undefined;    //监听数组里所有的ci, 并更新x或y轴最大边界; list: 默认 cid.list

    //其它无用的方法(内部自动调用)
    changeCursorX(): undefined;        //此方法保证游标不会超出可视范围
    changeCursorY(): undefined;
    changeCIAdd(ci): undefined;        //根据ci更新边界
    changeCIDel(ci): undefined;
    bindScroll(ci): undefined;        //监听ci
    unbindScroll(ci): undefined;    //ci解除监听
    drawScrollX(): undefined;        //绘制滚动条视图
    drawScrollY(): undefined;
    createScrollEventPC(): undefined;//滚动条创建dom事件
    createScrollEventMobile(): undefined;

demo:
    修改滚动条样式:
    cis.scrollXView.size(cis.scrollXView, true).rect(5, 1).fill("red").stroke("blue"); //修改X轴的背景框样式 (参考 CanvasImageCustom 类)

    cis.scrollYView.size(cis.scrollYView, true).rect(5, 1).fill("red").stroke("blue"); //修改Y轴的背景框样式 (参考 CanvasImageCustom 类)

    cis.cursorView = new CanvasPath2D("fill", {fillStyle: "yellow"}) //修改的游标样式 (参考 CanvasPath2D 类)
    .rect(new RoundedRectangle(0,0,0,0,5));    //游标的xywh每次绘制前更新,所以不用填xywh

    
    option.isPage 滚动条变成翻页效果例子(注意桌面端无效):
    const urls = ["1.jpg", "2.jpg", "3.jpg"],
    cid = new CanvasImageDraw({width: 300, height: 300, alpha: false}), 
    cis = new CanvasImageScroll(cid, {scrollVisible: "auto", scrollSize: 4, isPage: true});

    ElementUtils.createCanvasFromURL(cid.box.w, cid.box.h, urls, true, imgs => {

        //创建 CanvasImage 并将其位置从左往右排序
        for(let i = 0; i < imgs.length; i++) cid.list[i] = new CanvasImage(imgs[i]).pos(i * imgs[i].width, 0);

        //cis 能够监听 CanvasImage
        cis.bindScrolls();

        //绘制一次画布并把画布加入到DOM树
        cid.render();

    });
*/
class CanvasImageScroll{

    #cid = null;
    #maxSize = new Point();
    #securityDoor = new SecurityDoor();
    #cursorView = null;
    #scrollVisible = "";
    #eventType = "";
    get maxSize(){return this.#maxSize;}
    get cursorX(){return this.#cid.box.x/this.#maxSize.x*this.#cid.box.w;}
    get cursorY(){return this.#cid.box.y/this.#maxSize.y*this.#cid.box.h;}
    get cursorW(){return this.#maxSize.x <= this.#cid.box.w ? this.#cid.box.w : this.#cid.box.w / this.#maxSize.x * this.#cid.box.w;}
    get cursorH(){return this.#maxSize.y <= this.#cid.box.h ? this.#cid.box.h : this.#cid.box.h / this.#maxSize.y * this.#cid.box.h;}
    get cursorView(){return this.#cursorView;}
    set cursorView(v){this.#cursorView = this.scrollXView.path2D = this.scrollYView.path2D = v||null;}
    
    constructor(cid, option = {}){
        if(!cid.eventDispatcher) cid.initEventDispatcher();
        this.#cid = cid;

        switch(option.scrollVisible){
            case "auto": 
            case "": 
            this.#scrollVisible = option.scrollVisible;
            break;

            case "visible": 
            default: 
            this.#scrollVisible = "visible";
            break;
        }

        switch(option.scrollEventType){
            case "touch": 
            this.#eventType = "touch";
            this.__unbindEvent = this.createScrollEventMobile(option.domElement || cid.domElement, option.inertia, option.inertiaLife, option.isPage);
            break;

            case "default": 
            this.#eventType = "default";
            if(this.#scrollVisible !== "") this.__unbindEvent = this.createScrollEventPC(option.domElement || cid.domElement);
            break;

            default: 
            if(UTILS.isMobile){
                this.#eventType = "touch";
                this.__unbindEvent = this.createScrollEventMobile(option.domElement || cid.domElement, option.inertia, option.inertiaLife, option.isPage);
            } else {
                this.#eventType = "default";
                this.__unbindEvent = this.createScrollEventPC(option.domElement || cid.domElement);
            }
            break;
        }
        
        const cirED = cid.eventDispatcher;
        cirED.register("boxX", () => this.changeCursorX());
        cirED.register("boxY", () => this.changeCursorY());
        cirED.register("append", event => this.bindScrolls(event.target));
        
        cirED.register("add", event => {
            this.bindScroll(event.target);
            this.changeCIAdd(event.target);
        });

        cirED.register("remove", event => {
            this.unbindScroll(event.target);
            this.changeCIDel(event.target);
        });

        if(this.#scrollVisible !== ""){
            const scrollSize = option.scrollSize || 10;
            this.scrollXView = new CanvasImageCustom().pos(0, cid.box.h - scrollSize);
            this.scrollYView = new CanvasImageCustom().pos(cid.box.w - scrollSize, 0);

            if(this.#scrollVisible === "visible" || (this.#eventType === "default" && this.#scrollVisible === "auto")){
                this.scrollXView.size(cid.box.w-scrollSize, scrollSize).rect(scrollSize/2, 1).fill("#eeeeee").stroke("#aaaaaa");
                this.scrollYView.size(scrollSize, cid.box.h-scrollSize).rect(scrollSize/2, 1).fill("#eeeeee").stroke("#aaaaaa");
            } else {
                this.scrollXView.size(cid.box.w, scrollSize).rect(scrollSize/2, 1).fill("#eeeeee").stroke("#aaaaaa");
                this.scrollYView.size(scrollSize, cid.box.h).rect(scrollSize/2, 1).fill("#eeeeee").stroke("#aaaaaa");
            }

            cirED.register("afterDraw", () => {
                if(this.#scrollVisible === "visible"){
                    this.drawScrollX();
                    this.drawScrollY();
                } else if(this.#eventType === "default" && this.#scrollVisible === "auto"){
                    if(this.#maxSize.x > cid.box.w) this.drawScrollX();
                    if(this.#maxSize.y > cid.box.h) this.drawScrollY();
                }
            });
            
            cirED.register("size", () => {
                this.scrollXView.pos(0, cid.box.h - scrollSize);
                this.scrollYView.pos(cid.box.w - scrollSize, 0);
                this.changeCursorX();
                this.changeCursorY();
            });

            this.scrollXView.index = this.scrollYView.index = Infinity;
            this.scrollXView.position = this.scrollYView.position = "fixed";
            //this.scrollXView.shadow = this.scrollYView.shadow = {blur: 4, color: "#666666", offsetX: 0, offsetY: 0};
            this.cursorView = new CanvasPath2D("fill", {fillStyle: "#666666"}).rect(new RoundedRectangle(0,0,0,0,scrollSize/2));
        }

        if(cid.list.length !== 0) this.bindScrolls();
    }

    enable(sign){
        this.#securityDoor.remove(sign);
    }

    disable(sign){
        this.#securityDoor.add(sign);
    }

    unbindEvent(){
        if(typeof this.__unbindEvent === "function"){
            this.__unbindEvent();
            delete this.__unbindEvent;
        }
    }

    resetMaxSizeX(){
        var v = this.#cid.box.w;
        for(let k = 0, len = this.#cid.list.length, ci, m; k < len; k++){
            ci = this.#cid.list[k];
            if(ci.visible === true){
                m = ci.box.mx;
                if(m > v) v = m;
            }
        }
        if(v !== this.#maxSize.x){
            this.#maxSize.x = v;
            this.changeCursorX();
        }
    }

    resetMaxSizeY(){
        var v = this.#cid.box.h;
        const list = this.#cid.list, len = list.length;
        for(let k = 0, len = this.#cid.list.length, ci, m; k < len; k++){
            ci = this.#cid.list[k];
            if(ci.visible === true){
                m = ci.box.my;
                if(m > v) v = m;
            }
        }
        if(v !== this.#maxSize.y){
            this.#maxSize.y = v;
            this.changeCursorY();
        }
    }

    bindScrolls(list = this.#cid.list){
        var x = this.#cid.box.w, y = this.#cid.box.h;
        for(let k = 0, len = list.length, ci, m; k < len; k++){
            ci = list[k];
            this.bindScroll(ci);
            if(ci.visible === true){
                m = ci.box.mx;
                if(m > x) x = m;
                m = ci.box.my;
                if(m > y) y = m;
            }
        }
        if(x > this.#maxSize.x){
            this.#maxSize.x = x;
            this.changeCursorX();
        }
        if(y > this.#maxSize.y){
            this.#maxSize.y = y;
            this.changeCursorY();
        }
    }

    //以下方法内部自动调用
    changeCursorX(){
        if(this.#cid.box.x < 0 || this.#cid.box.w >= this.#maxSize.x) this.#cid.box.x = 0;
        else if(this.#cid.box.mx > this.#maxSize.x) this.#cid.box.x = this.#maxSize.x - this.#cid.box.w;
    }

    changeCursorY(){
        if(this.#cid.box.y < 0 || this.#cid.box.h >= this.#maxSize.y) this.#cid.box.y = 0;
        else if(this.#cid.box.my > this.#maxSize.y) this.#cid.box.y = this.#maxSize.y - this.#cid.box.h;
    }

    changeCIAdd(ci){
        if(ci.visible === false) return;
        var v = ci.box.mx;
        if(v > this.#maxSize.x){
            this.#maxSize.x = v;
            this.changeCursorX();
        }
        v = ci.box.my;
        if(v > this.#maxSize.y){
            this.#maxSize.y = v;
            this.changeCursorY();
        }
    }

    changeCIDel(ci){
        if(ci.visible === false) return;
        if(ci.box.mx >= this.#maxSize.x){
            this.resetMaxSizeX();
            this.changeCursorX();
        }
        if(ci.box.my >= this.#maxSize.y){
            this.resetMaxSizeY();
            this.changeCursorY();
        }
    }

    unbindScroll(ci){
        var x = ci.box.x;
        delete ci.box.x;
        ci.box.x = x;

        x = ci.box.y;
        delete ci.box.y;
        ci.box.y = x;

        x = ci.box.w;
        delete ci.box.w;
        ci.box.w = x;

        x = ci.box.h;
        delete ci.box.h;
        ci.box.h = x;

        x = ci.visible;
        delete ci.visible;
        ci.visible = x;
    }
    
    bindScroll(ci){
        var _visible = typeof ci.visible === "boolean" ? ci.visible : true, 
        _x = ci.box.x, _y = ci.box.y, _w = ci.box.w, _h = ci.box.h, nm, om;

        const writeBoxX = () => {
            if(nm > this.#maxSize.x){
                this.#maxSize.x = nm;
                this.changeCursorX();
            } else if(nm < this.#maxSize.x){
                if(om >= this.#maxSize.x) this.resetMaxSizeX();
            }
        },

        writeBoxY = () => {
            if(nm > this.#maxSize.y){
                this.#maxSize.y = nm;
                this.changeCursorY();
            } else if(nm < this.#maxSize.y){
                if(om >= this.#maxSize.y) this.resetMaxSizeY();
            }
        };

        Object.defineProperties(ci.box, {

            x: {
                get: () => {return _x;},
                set: v => {
                    if(_visible){
                        om = _x+_w;
                        _x = v;
                        nm = v+_w;
                        writeBoxX();
                    }else{
                        _x = v;
                    }
                }
            },

            y: {
                get: () => {return _y;},
                set: v => {
                    if(_visible){
                        om = _y+_h;
                        _y = v;
                        nm = v+_h;
                        writeBoxY();
                    }else{
                        _y = v;
                    }
                }
            },

            w: {
                get: () => {return _w;},
                set: v => {
                    if(_visible){
                        om = _w+_x;
                        _w = v;
                        nm = v+_x;
                        writeBoxX();
                    }else{
                        _w = v;
                    }
                }
            },

            h: {
                get: () => {return _h;},
                set: v => {
                    if(_visible){
                        om = _h+_y;
                        _h = v;
                        nm = v+_y;
                        writeBoxY();
                    }else{
                        _h = v;
                    }
                }
            },

        });

        Object.defineProperties(ci, {

            visible: {
                get: () => {return _visible;},
                set: v => {
                    if(v === true){
                        _visible = true;
                        this.changeCIAdd(ci);
                    }
                    else if(v === false){
                        this.changeCIDel(ci);
                        _visible = false;
                    }
                }
            },

        });
    }

    drawScrollX(){
        if(this.#cursorView === null) return;
        const num = this.#cid.box.w - this.scrollXView.w, cursorW = this.cursorW, cursorX = this.cursorX;
        this.#cursorView.value.size(cursorW < num ? num : cursorW - num, this.scrollXView.h)
        .pos(cursorX+this.#cursorView.value.w > this.scrollXView.w ? this.scrollXView.w-this.#cursorView.value.w : cursorX, 0);
        this.#cid._draw(this.scrollXView);
    }

    drawScrollY(){
        if(this.#cursorView === null) return;
        const num = this.#cid.box.h - this.scrollYView.h, cursorH = this.cursorH, cursorY = this.cursorY;
        this.#cursorView.value.size(this.scrollYView.w, cursorH < num ? num : cursorH - num);
        this.#cursorView.value.pos(0, cursorY+this.#cursorView.value.h > this.scrollYView.h ? this.scrollYView.h-this.#cursorView.value.h : cursorY);
        this.#cid._draw(this.scrollYView);
    }

    createScrollEventPC(domElement){
        var dPos = -1, rect;

        const box = this.#cid.box, 
        _redraw = () => {
            this.#cid.redraw();
            al_draw.stop();
        },
        redraw = () => this.#cid.redraw(),
        al_draw = new Timer(redraw, 1000/30, 1, false),
        
        setTop = top => {
            if(this.#securityDoor.empty === false) return;
            box.y = top / box.h * this.#maxSize.y;
            if(al_draw.running === false) redraw();
            al_draw.start();
        },

        setLeft = left => {
            if(this.#securityDoor.empty === false) return;
            box.x = left / box.w * this.#maxSize.x;
            if(al_draw.running === false) redraw();
            al_draw.start();
        },
        
        onMoveTop = event => {
            setTop(event.clientY - rect.y - dPos);
        },

        onMoveLeft = event => {
            setLeft(event.clientX - rect.x - dPos);
        },

        onUpTop = event => {
            domElement.releasePointerCapture(event.pointerId);
            domElement.removeEventListener('pointermove', onMoveTop);
            domElement.removeEventListener('pointerup', onUpTop);
            _redraw();
        },

        onUpLeft = event => {
            domElement.releasePointerCapture(event.pointerId);
            domElement.removeEventListener('pointermove', onMoveLeft);
            domElement.removeEventListener('pointerup', onUpLeft);
            _redraw();
        },

        ondown = event => {
            if(!this.scrollXView) return;
            onUpTop(event);
            onUpLeft(event);
            rect = domElement.getBoundingClientRect();
            domElement.setPointerCapture(event.pointerId);
            if(this.scrollXView.box.containsPoint(event.offsetX, event.offsetY)){
                domElement.addEventListener("pointermove", onMoveLeft);
                domElement.addEventListener("pointerup", onUpLeft);
                dPos = event.offsetX - this.cursorX;
            } else if(this.scrollYView.box.containsPoint(event.offsetX, event.offsetY)){
                domElement.addEventListener("pointermove", onMoveTop);
                domElement.addEventListener("pointerup", onUpTop);
                dPos = event.offsetY - this.cursorY;
            }
        },

        onwheel = event => {
            if(this.#maxSize.y > box.h){
                dPos = 50 / this.#maxSize.y * box.h;
                setTop(this.cursorY + (event.wheelDelta === 120 ? -dPos : dPos));
            } else if(this.#maxSize.x > box.w){
                dPos = 50 / this.#maxSize.x * box.w;
                setLeft(this.cursorX + (event.wheelDelta === 120 ? -dPos : dPos));
            }
        }

        domElement.addEventListener("pointerdown", ondown);
        domElement.addEventListener("mousewheel", onwheel);

        return function (){
            al_draw.stop();
            domElement.removeEventListener("pointerdown", ondown);
            domElement.removeEventListener("mousewheel", onwheel);
            domElement.removeEventListener('pointermove', onMoveTop);
            domElement.removeEventListener('pointerup', onUpTop);
            domElement.removeEventListener('pointermove', onMoveLeft);
            domElement.removeEventListener('pointerup', onUpLeft);
        }
    }

    createScrollEventMobile(domElement, inertia = true, inertiaLife = 0.06, isPage = false){
        var sTime = 0, dis = "", sx = 0, sy = 0, isRun = this.#securityDoor.empty; 
        const box = this.#cid.box,
        _redraw = () => {
            this.#cid.redraw();
            al_draw.stop();
        },
        redraw = () => {
            this.#cid.redraw();
            if(this.#scrollVisible === "auto"){
                switch(dis){
                    case "x": 
                    if(this.#maxSize.x > box.w) this.drawScrollX();
                    break;
                    case "y": 
                    if(this.#maxSize.y > box.h) this.drawScrollY();
                    break;
                }
            }
        },
        al_draw = new Timer(redraw, 1000/30, 1, false);

        if(inertia === true){
            let tweenCache;
            if(isPage === true) tweenCache = new TweenCache({x:0}, {x:0}, 300);
            const _inertiaLife = inertiaLife;
            inertiaLife = 1 - inertiaLife;
            var inertiaAnimate = new AnimateLoop(null, null, 1000/30),
            step = 1, aniamteRun = false, stepA = "", stepB = "", _sx = 0, _sy = 0,
            
            pageY = (sy, st) => {
                sy = Math.floor(sy / box.h)*box.h;
                const _v = box.y - sy;
                if(_v > 0 && sy + box.h <= this.#maxSize.y){ //下
                    if(_v > box.h * 0.4 || Date.now() - st < 300){ //翻页
                        tweenCache.end.x = sy + box.h;
                    } else { //不翻页
                        tweenCache.end.x = sy;
                    }
                } else if(_v < 0 && sy - box.h >= 0) { //上
                    if(Math.abs(_v) > box.h * 0.4 || Date.now() - st < 300){ //翻页
                        tweenCache.end.x = sy - box.h;
                    } else { //不翻页
                        tweenCache.end.x = sy;
                    }
                }
                
                tweenCache.origin.x = box.y;
                tweenCache.start();
                inertiaAnimate.play(() => {
                    tweenCache.update();
                    box.y = tweenCache.origin.x;
                    this.#cid.redraw();
                    if(tweenCache.origin.x !== tweenCache.end.x && this.#scrollVisible === "auto") this.drawScrollY();
                });
            },

            inertiaY = speed => {
                if(Math.abs(speed) < 0.7) return _redraw();
                stepA = speed < 0 ? "-top" : "top";
                if(aniamteRun && stepA === stepB) step += 0.3;
                else{
                    step = 1;
                    stepB = stepA;
                }
                inertiaAnimate.play(() => {
                    speed *= inertiaLife;
                    box.y += step * 20 * speed;
                    this.#cid.redraw();
                    if(Math.abs(speed) < _inertiaLife || box.y <= 0 || box.my >= this.#maxSize.y) inertiaAnimate.stop();
                    else {
                        if(this.#scrollVisible === "auto"){
                            if(this.#maxSize.y > box.h) this.drawScrollY();
                        }
                    }
                });
            },

            pageX = (sx, st) => {
                sx = Math.floor(sx / box.w)*box.w;
                const _v = box.x - sx;
                if(_v > 0 && sx + box.w <= this.#maxSize.x){ //右
                    if(_v > box.w * 0.4 || Date.now() - st < 300){ //翻页
                        tweenCache.end.x = sx + box.w;
                    } else { //不翻页
                        tweenCache.end.x = sx;
                    }
                } else if(_v < 0 && sx - box.w >= 0) { //左
                    if(Math.abs(_v) > box.w * 0.4 || Date.now() - st < 300){ //翻页
                        tweenCache.end.x = sx - box.w;
                    } else { //不翻页
                        tweenCache.end.x = sx;
                    }
                }
                
                tweenCache.origin.x = box.x;
                tweenCache.start();
                inertiaAnimate.play(() => {
                    tweenCache.update();
                    box.x = tweenCache.origin.x;
                    this.#cid.redraw();
                    if(tweenCache.origin.x !== tweenCache.end.x && this.#scrollVisible === "auto") this.drawScrollX();
                });
            },

            inertiaX = speed => {
                if(Math.abs(speed) < 0.7)  return _redraw();
                stepA = speed < 0 ? "-left" : "left";
                if(aniamteRun && stepA === stepB) step += 0.3;
                else{
                    step = 1;
                    stepB = stepA;
                }
                inertiaAnimate.play(() => {
                    speed *= inertiaLife;
                    box.x += step * 20 * speed;
                    this.#cid.redraw();
                    if(Math.abs(speed) < _inertiaLife || box.x <= 0 || box.mx >= this.#maxSize.x) inertiaAnimate.stop();
                    else {
                        if(this.#scrollVisible === "auto"){
                            if(this.#maxSize.x > box.w) this.drawScrollX();
                        }
                    }
                });
            }
        }
        
        const update = event => {
            if(dis === "x") box.x = sx - event.targetTouches[0].pageX;
            else if(dis === "y") box.y = sy - event.targetTouches[0].pageY;
            if(al_draw.running === false) redraw();
            al_draw.start();
        },
        
        onup = event => {
            event.preventDefault();
            if(isRun === false) return;
            if(inertia === true){
                if(dis === "x"){
                    if(isPage === false) inertiaX((box.x - _sx) / (Date.now() - sTime));
                    else pageX(_sx, sTime);
                }
                else if(dis === "y"){
                    if(isPage === false) inertiaY((box.y - _sy) / (Date.now() - sTime));
                    else pageY(_sy, sTime);
                }
                else _redraw();
            }
            else _redraw();
        },

        onmove = event => {
            isRun = this.#securityDoor.empty;
            if(isRun === false) return;
            if(dis !== "") return update(event);
            if(Date.now() - sTime < 60) return;
            
            if(Math.abs(event.targetTouches[0].pageX - sx) > Math.abs(event.targetTouches[0].pageY - sy) && this.#maxSize.x > box.w){
                sx = event.targetTouches[0].pageX + box.x;
                dis = "x";
            } else if(this.#maxSize.y > box.h){
                sy = event.targetTouches[0].pageY + box.y;
                dis = "y";
            }
            
            if(inertia === true){
                sTime = Date.now();
                _sx = box.x;
                _sy = box.y;
            }
        },
        
        ondown = event => {
            event.preventDefault();
            if(this.#maxSize.x <= box.w && this.#maxSize.y <= box.h) return;
            sx = event.targetTouches[0].pageX;
            sy = event.targetTouches[0].pageY;
            sTime = Date.now();
            dis = "";
            if(inertia === true){
                aniamteRun = inertiaAnimate.running;
                inertiaAnimate.stop();
            }
        }

        domElement.addEventListener("touchend", onup);
        domElement.addEventListener("touchmove", onmove);
        domElement.addEventListener("touchstart", ondown);

        return function (){
            al_draw.stop();
            if(inertia === true) inertiaAnimate.stop();
            domElement.removeEventListener("touchend", onup);
            domElement.removeEventListener("touchmove", onmove);
            domElement.removeEventListener("touchstart", ondown);
        }
    }

}


/* CanvasEventTarget 
parameter: 
    box: Box;            //默认创建一个新的Box

attribute: 
    box: Box;             //.x.y 相对于画布的位置, .w.h 宽高;
    visible: Boolean;    //默认true; 完全隐藏(既不绘制视图, 也不触发绑定的事件, scroll也忽略此ci)
    index: Integer;     //层级(不必唯一) -Infinity 最底层; Infinity 最上层
    position: String;    //定位 可能值: 默认"", "fixed" (如果为 fixed 其绘制的位置将无视滚动条, 如果存在的话)

method: 
    addEventListener(eventName, callback): undefined;        //添加事件
    removeEventListener(eventName, callback): undefined;    //删除事件
    clearEventListener(eventName): undefined;                //删除 eventName 栏的所有回调, 如果eventName未定义则清空所有回调
    hasEventListener(eventName): bool;                        //查询是否注册了 eventName 事件
    trigger(eventName, info, event): undefined;             //触发事件 (注意: .hasEventListener(eventName) 必须为true才能调用此方法)

eventNames: 
    click(info, event)    //点击(按下的时间和移动次数来模拟点击事件, 先触发up, 然后在是click)
    down(info, event)    //按下
    move(info, event)    //移动(按下触发才有效)
    up(info, event)        //抬起(按下触发才有效)
        info: Object{  //此参数的属性兼容于两端
            targets: Array[CanvasEventTarget],     //层级相同的CanvasEventTarget
            target: CanvasEventTarget,             //最顶层的CanvasEventTarget(相较于视图)
            offsetX: number,                     //画布左上角的距离
            offsetY: number,  
            delta: number,                      //延迟毫秒
            moveStep: number,                     //移动的次数
        }
        event: PointerEvent||TouchEvent;

    beforeDraw(context, point)     //绘制之前
    afterDraw(context, point)     //绘制之后
        context: CanvasRender2D; //当前绘制画布的上下文
        point: Point;             //CanvasImageDraw.box.xy(滚动条游标的坐标) (如果 .position 为 "fixed", 此对象的值总是 0)

demo: 
    //创建一个点击区域(cid: CanvasImageDraw):
    const eventTarget = new CanvasEventTarget(new Box(10, 10, 100, 100));
    eventTarget.addEventListener("click", event => console.log(event));
    cid.add(eventTarget); //cid 必须绑定到 CanvasEvent 的实例才有效
*/
class CanvasEventTarget{

    #eventObject = {
        click: null,
        down: null, //Array[function]
        move: null,
        up: null,
        beforeDraw: null,
        afterDraw: null,
    }

    constructor(box = new Box()){
        this.box = box;
        this.visible = true;
        this.index = 0;
        this.position = "";
    }

    trigger(eventName, info = null, event = null){
        const arr = this.#eventObject[eventName];
        for(let i = 0, len = arr.length; i < len; i++) arr[i](info, event);
    }

    addEventListener(eventName, callback){
        if(this.#eventObject[eventName] === undefined || typeof callback !== "function") return;
        if(this.#eventObject[eventName] === null) this.#eventObject[eventName] = [callback];
        else{
            const i = this.#eventObject[eventName].indexOf(callback);
            if(i === -1) this.#eventObject[eventName].push(callback);
            else this.#eventObject[eventName][i] = callback;
        }
    }

    removeEventListener(eventName, callback){
        if(Array.isArray(this.#eventObject[eventName]) === false) return;
        const i = this.#eventObject[eventName].indexOf(callback);
        if(i !== -1) this.#eventObject[eventName].splice(i, 1);
        if(this.#eventObject[eventName].length === 0) this.#eventObject[eventName] = null;
    }

    clearEventListener(eventName){
        if(this.#eventObject[eventName] !== undefined) this.#eventObject[eventName] = null;
        else{
            for(let n in this.#eventObject) this.#eventObject[n] = null;
        }
    }

    hasEventListener(eventName){
        return this.#eventObject[eventName] !== null;
    }
    
}


/* CanvasImage 
parameter: 
    image (构造器会调用一次 .setImage(image) 来处理 image 参数)

attribute:
    image: CanvasImage;        //目标图像, 默认为null;
    opacity: number;        //透明度; 值0至1之间; 默认1; (如果短暂的隐藏显示效果建议把此值设为0,而不是.visible,如果有滚动条时.visible会成为一个状态属性)
    path2D: CanvasPath2D;    //此属性一般用于动态绘制某个形状
    shadow: Object;            //阴影, 默认 null; shadow{blur, color, offsetX, offsetY}
    loadingImage: bool;     //只读, ci是否正在加载图片或视频
    x,y,w,h: number;        //只读, 返回 this.box.xywh 属性值
    width, height: number;    //只读, 返回 image 的宽高; 如果未定义就返回 0
    
method:
    pos(x, y): this;             //设置位置; x 可以是: Number, Object{x,y}
    setImage(image): this;         //设置图像 (image 如果是 CanvasImage 并它正在加载图像时, 则会在它加载完成时自动设置 image);

    loadImage(src, onload): this;    //加载并设置图像 (onload 如果是 CanvasImageDraw 则加载完后自动调用一次 redraw 或 render 方法);
    loadVideo(src, onload, type = "mp4") //与 .loadImage() 类似

    setScaleX(s, x): undefined;    //缩放x(注意: 是设置ci的box属性实现的缩放)
    setScaleY(s, y): undefined;    //缩放y
        s为必须, s小于1为缩小, 大于1放大;
        x默认为0, x是box的局部位置, 如果是居中缩放x应为: this.w/2, 

    createRotate(angle, cx , cy: Number): Object; //旋转(注意: 用 beforeDraw, afterDraw 事件设置ci新的绘制位置实现的旋转)
        angle: 旋转弧度, 默认0
        cx, cy: 旋转中心点(局部), 默认 this.w/2, this.h/2
        Object: {
            set(angle, cx , cy: Number): undefined; //
            offset(cx , cy: Number): undefined;     //更新旋转中心点(局部)
            angle(angle: Number): undefined;         //更新旋转弧度

            bind(): undefined;         //初始化时自动调用一次此方法
            unbind(): undefined;     //解除绑定(如果ci不在使用则不需要调用此方法)
        }

    setPath2DToCircleDiffusion(x,y,option): function; //圆形扩散特效(.path2D 实现的)
        x, y: Number;             //扩散原点 (相对于画布原点,event.offsetX,event.offsetY)
        option: Object{
            cir: CanvasImageDraw;     //必须;
            animateLoop: AnimateLoop;    //默认一个新的 AnimateLoop
            t: Number;                     //持续毫秒时间, 默认 200
            mr: Number;                 //扩散的最大半径, 默认 覆盖整个box: this.box.distanceFromPoint(x, y, true)
            path2D: CanvasPath2D;         //圆的样式, 默认: new CanvasPath2D("fill", {fillStyle: "rgba(255,255,255,0.2)"})
        }

demo:
    //CanvasImageDraw
    const cid = new CanvasImageDraw({width: WORLD.width, height: WORLD.height});

    //图片
    const ciA = cid.add(new CanvasImage()).pos(59, 59).load("view/img/test.png", cid);
    
    //视频
    cid.add(new CanvasImage())
    .loadVideo("view/examples/video/test.mp4", ci => {
        
        //同比例缩放视频
        const newSize = UTILS.setSizeToSameScale(ci.image, {width: 100, height: 100});
        ci.box.size(newSize.width, newSize.height).center(cid.box);

        //播放按钮
        const cic = cid.add(new CanvasImageCustom())
        .size(50, 30).text("PLAY", "#fff")
        .rect(4).stroke("blue");
        cic.box.center(cid.box);

        //动画循环
        const animateLoop = new AnimateLoop(() => cid.redraw());

        //谷歌浏览器必须要用户与文档交互一次才能播放视频 (点击后播放动画)
        cid.addEvent(cic, "up", () => {
            cic.visible = false;
            ci.image.play(); // ci.image 其实是一个 video 元素
            animateLoop.play(); //播放动画
        });
        
        //把 canvas 添加至 dom 树
        cid.render();

    });

    //鼠标位置缩放图片例子: (target: CanvasImage)
    cie.add(target, "wheel", event => {

        const scale = target.scaleX + event.wheelDelta * 0.001,

        //offsetX,offsetY 是鼠标到 element 的距离, 现在把它们转为 target 的局部距离
        localPositionX = event.offsetX - target.x,
        localPositionY = event.offsetY - target.y;

        //x,y缩放至 scale
        target.setScaleX(scale, localPositionX);
        target.setScaleY(scale, localPositionY);

        //重绘画布
        cid.redraw();

    });
*/
class CanvasImage extends CanvasEventTarget{

    #loadingImage = false;
    get loadingImage(){return this.#loadingImage;}
    get x(){return this.box.x;}
    get y(){return this.box.y;}
    get w(){return this.box.w;}
    get h(){return this.box.h;}
    get width(){return this.image === null ? 0 : this.image.width;}
    get height(){return this.image === null ? 0 : this.image.height;}
    get isDrawPath2D(){return this.path2D !== null && this.path2D.isDraw;}
    get className(){return this.constructor.name;}
    
    constructor(image){
        super();
        this.image = null;
        this.opacity = 1;
        this.path2D = null;
        this.shadow = null;//Object{blur, color, offsetX, offsetY}
        
        this.setImage(image);
    }

    pos(x, y){
        switch(typeof x) {
            case "number": 
            this.box.x = x;
            this.box.y = y;
            break;

            case "object": 
            this.box.x = UTILS.isNumber(x.x) ? x.x : this.box.x;
            this.box.y = UTILS.isNumber(x.y) ? x.y : this.box.y;
            break;
        }

        return this;
    }

    setImage(image){
        //如果是image
        if(CanvasImageDraw.isCanvasImage(image)){
            this.box.size(image.width, image.height);
            this.image = image;
        }
        //如果是 CanvasImage
        else if(CanvasImage.prototype.isPrototypeOf(image)){
            if(image.loadingImage){
                if(Array.isArray(image.__setImageList)) image.__setImageList.push(this);
                else image.__setImageList = [this];
            }
            else this.setImage(image.image);
        }
        //忽略此次操作
        else{
            this.box.size(0, 0);
            this.image = null;
        }
        return this;
    }

    setScaleX(s, x = 0){
        const oldVal = this.box.w;
        this.box.w = this.width * s;
        this.box.x += x - this.box.w / oldVal * x;
    }

    setScaleY(s, y = 0){
        const oldVal = this.box.h;
        this.box.h = this.height * s;
        this.box.y += y - this.box.h / oldVal * y;
    }

    loadImage(src, onload){
        /*
            // 加载成功
            image.onload = () => {...}

            // 加载错误
            image.onerror = () => {...}

            // 取消加载
            image.onabort = () => {...}
        */
        this.#loadingImage = true;
        const image = new Image();
        image.onload = image.onerror = image.onabort = () => this._loadSuccess(image, onload);
        image.src = src;
        return this;
    }

    loadVideo(src, onload, type = "mp4"){
        /*    video 加载事件 的顺序
            onloadstart
            ondurationchange
            onloadedmetadata //元数据加载完成包含: 时长，尺寸大小（视频），文本轨道。
            onloadeddata
            onprogress
            oncanplay
            oncanplaythrough

            //控制事件:
            onended //播放结束
            onpause //暂停播放
            onplay //开始播放
        */
        this.#loadingImage = true;
        const video = document.createElement("video"),
        source = document.createElement("source");
        video.appendChild(source);
        source.type = `video/${type}`;

        video.oncanplay = () => {
            //video 的 width, height 属性如果不设的话永远都是0
            video.width = video.videoWidth;
            video.height = video.videoHeight;
            this._loadSuccess(video, onload);
        };

        source.src = src;
        return this;
    }
    
    createRotate(angle = 0, cx = this.w/2, cy = this.h/2){
        var nx, ny;

        const beforeDraw = (con, point) => {
            nx = cx + this.x - point.x;
            ny = cy + this.y - point.y;

            con.translate(nx, ny);
            con.rotate(angle);

            //ci 减去translate的nx,ny 和 scroll的point
            point.set(nx + point.x, ny + point.y);

            //在此之后 cid 会这样操作:
            //x = ci.x - point.x
            //y = ci.y - point.y
            //con.drawImage(ci.image, x, y);
            //触发 afterDraw 事件
        },

        afterDraw = (con) => {
            con.rotate(-angle);
            con.translate(-nx, -ny);
        }

        this.addEventListener("beforeDraw", beforeDraw);
        this.addEventListener("afterDraw", afterDraw);

        return {
            set(x, y, a){
                cx = x;
                cy = y;
                angle = a;
            },

            offset(x, y){
                cx = x;
                cy = y;
            },

            angle(v){
                angle = v;
            },

            bind: () => {
                this.addEventListener("beforeDraw", beforeDraw);
                this.addEventListener("afterDraw", afterDraw);
            },

            unbind: () => {
                this.removeEventListener("beforeDraw", beforeDraw);
                this.removeEventListener("afterDraw", afterDraw);
            }
        }
    }

    setPath2DToCircleDiffusion(x, y, option = {}){
        const oldPath2D = this.path2D, circle = new Circle(x-this.x, y-this.y, 0);
        this.path2D = option.path2D || new CanvasPath2D("fill", {fillStyle: "rgba(255,255,255,0.2)"});
        this.path2D.circle(circle);
        
        const t = option.t || 200, 
        mr = option.mr || this.box.distanceFromPoint(x, y, true),
        cid = option.cir, 
        animateLoop = option.animateLoop || new AnimateLoop(null, null, 1000 / 30);
        
        var st = Date.now();

        animateLoop.play(() => {
            if(circle.r <= mr) circle.r = (Date.now() - st) / t * mr; 
            else {
                animateLoop.stop();
                this.path2D = oldPath2D;
            }
            
            cid.redraw();
        });

        return () => {
            animateLoop.stop();
            this.path2D = oldPath2D;
        }
    }

    _loadSuccess(image, onload){
        this.setImage(image);
        
        this.#loadingImage = false;
        if(Array.isArray(this.__setImageList)){
            this.__setImageList.forEach(ci => ci.setImage(image));
            delete this.__setImageList;
        }

        if(typeof onload === "function") onload(this);
        else if(CanvasImageDraw.prototype.isPrototypeOf(onload)){
            if(onload.domElement.parentElement !== null) onload.redraw();
            else onload.render();
        }
    }

}


/* CanvasImages
parameter: 
    images: Array[image]

attribute:
    images: Array[image]    
    cursor: Number;
    
method:
    next(): undefined;
    loadImages(urls, onDone, onUpdate): CanvasImages;
        urls: Array[String||Object{url||src:String}];
        onDone, onUpdate: Function;

demo:
    //加载图片, 显示加载进度例子:
    const cid = new CanvasImageDraw({width: innerWidth, height: innerHeight, alpha: true});
    
    const canvasPath2D = new CanvasPath2D("stroke", {strokeStyle: "#00ff00"}),
    meter = new Meter();
    canvasPath2D.progress(meter);

    const ci = new CanvasImages([ElementUtils.createCanvas(100, 100)]);
    ci.path2D = canvasPath2D;
    ci.loadImages(
        [
            "./img/0.jpg",
            "./img/1.jpg",
            "./img/2.jpg",
            "./img/3.jpeg",
            "./img/4.jpeg",
        ], 
        cid, 
        (i, c) => {
            console.log(i, c);
            meter.setFromRatio(i / c);
            ci.next();
            cid.redraw();
        }
    );
    
    cid.list[0] = ci.pos(10, 10);
    cid.render();
*/
class CanvasImages extends CanvasImage{

    #i = -1;
    get cursor(){return this.#i;}
    set cursor(i){this.set(i);}

    constructor(images = []){
        super(images[0]);
        this.images = images;
        if(this.image) this.#i = 0;
    }

    set(i){
        super.setImage(this.images[i]);
        this.#i = this.image ? i : -1;
    }

    next(){
        const len = this.images.length - 1;
        if(len !== -1){
            this.#i = this.#i < len ? this.#i+1 : 0;
            this.image = this.images[this.#i]; //super.setImage(this.images[this.#i]);
        }
    }

    setImage(image){
        super.setImage(image);
    
        if(this.image && Array.isArray(this.images)){
            const i = this.images.indexOf(this.image);
            if(i === -1){
                this.#i = this.images.length;
                this.images.push(this.image);
            }
            else this.#i = i;
        }

        return this;
    }

    loadImages(srcs, onDone, onUpdate){
        onUpdate = typeof onUpdate === "function" ? onUpdate : null;

        var i = 0, img = null, ty = "";
        const len = srcs.length, 

        func = () => {
            i++; if(onUpdate !== null) onUpdate(i, len);
            if(i === len){
                if(typeof onDone === "function") onDone(this.images, srcs);
                else if(CanvasImageDraw.prototype.isPrototypeOf(onDone)){
                    if(onDone.domElement.parentElement !== null) onDone.redraw();
                    else onDone.render();
                }
            }
        }

        for(let k = 0; k < len; k++){
            ty = typeof srcs[k];
            if(ty === "string" || ty === "object"){
                ty = ty === "string" ? srcs[k] : srcs[k].src || srcs[k].url;
                if(ty !== "" && typeof ty === "string"){
                    img = new Image();
                    img.onload = img.onerror = img.onabort = func;
                    this.images.push(img);
                    img.src = ty;
                }
                else func();
            }
        }

        return this;
    }

}


/* CanvasImageCustom
注意: 线模糊问题任然存在(只有.rect()做了模糊优化)
parameter:
    canvas || image || undefined
    value: Path2D || undefined //如果未定义,初始化时创建一个Path2D,如果是其它值则不创建(例如 null,new Path2D())

attribute:
    value: Path2D; //更换新的 value, 类似 context.beginPath();

method:
    //以下是操作 画布 的方法
    cloneCanvas(canvas, dx = 0, dy = 0)
    clear(): this;
    size(w, h: Number): this;
    stroke(color: strokeColor, lineWidth: Number): this;
    fill(color: fillColor): this;
    
    //以下是操作 Path2D 的方法
    line(x, y, x1, y1: Number): this;
    path(arr: Array[x,y], close: Bool): this;
    rect(round, lineWidth: Number): this;
    strokeRect(color: strokeColor, round, lineWidth: Number): this;
    fillRect(color: fillColor, round, lineWidth: Number): this;
*/
class CanvasImageCustom extends CanvasImage{

    constructor(canvas, value = new Path2D()){
        super(canvas);
        if(!this.image) this.setImage(ElementUtils.createCanvas());
        this.context = this.image.getContext("2d");
        this.value = value;
    }

    cloneCanvas(canvas, dx = 0, dy = 0){
        if(CanvasImageDraw.isCanvas(canvas) === false){
            canvas = document.createElement("canvas");
            canvas.width = this.width;
            canvas.height = this.height;
        }
    
        canvas.getContext("2d").drawImage(this.image, dx, dy);
    
        return canvas;
    }

    clear(){
        this.context.clearRect(0, 0, this.width, this.height); //this.context.clearRect(0, 0, this.box.w, this.box.h);
        return this;
    }

    size(w, h, np = false){
        switch(typeof w) {
            case "number": 
            this.box.size(w, h);
            break;
            case "object": 
            this.box.size(w.width||w.w||this.box.w, w.height||w.h||this.box.h);
            np = h;
            break;
        }
        
        if(np === true) this.value = new Path2D();

        this.image.width = this.box.w;
        this.image.height = this.box.h;

        return this;
    }

    stroke(color){
        if(color && this.context.strokeStyle !== color) this.context.strokeStyle = color;
        this.context.stroke(this.value);
        return this;
    }

    fill(color){
        if(color && this.context.fillStyle !== color) this.context.fillStyle = color;
        this.context.fill(this.value);
        return this;
    }

    line(x, y, x1, y1, lineWidth){
        if(lineWidth !== undefined && this.context.lineWidth !== lineWidth) this.context.lineWidth = lineWidth;
        this.value.moveTo(x, y);
        this.value.lineTo(x1, y1);
        return this;
    }

    path(arr, close = false, lineWidth){
        if(lineWidth !== undefined && this.context.lineWidth !== lineWidth) this.context.lineWidth = lineWidth;
        this.value.moveTo(arr[0], arr[1]);
        for(let k = 2; k < arr.length; k += 2) this.value.lineTo(arr[k], arr[k+1]);
        if(close === true) this.value.closePath();
        return this;
    }

    rect(round, lineWidth){
        if(lineWidth !== undefined && this.context.lineWidth !== lineWidth) this.context.lineWidth = lineWidth;

        const lw = this.context.lineWidth, 
        w = Math.floor(this.box.w-lw), 
        h = Math.floor(this.box.h-lw),
        x = lw % 2 === 0 ? Math.floor(lw/2) : Math.floor(lw/2)+0.5;

        if(typeof round !== "number" || round < 1){
            this.value.rect(x, x, w, h);
            return this;
        }

        //.roundRect() 兼容处理
        if(typeof this.value.roundRect === "function"){
            this.value.roundRect(x, x, w, h, round);
        } else {
            _roundRect(this.value, x, x, w, h, round);
        }
        
        return this;
    }

    strokeRect(color, round, lineWidth){
        this.rect(round, lineWidth);
        this.stroke(color);
        return this;
    }

    fillRect(color, round, lineWidth){
        this.rect(round, lineWidth);
        this.fill(color);
        return this;
    }

}


/* CanvasImageText
method:
    setFont(font: string||number): this; 
    getTextWidth(text): Number;

    fillText(text, color, x, y): this; //填充文字, x,y 默认为居中

    fillTextWrap(value, option): this; //填充文字,可以自动换行
        value: string || Array[...string]
        option: Object{
            color,         //context.fillStyle, 默认 this.fillStyle
            padding,    //内边距, 可能的值: Number || Object{top,right,bottom,left:Number}, 默认 0
            distance,    //文字之间的间距, 可能的值: Number || Object{x,y:Number}, 默认 0
            width,         //如果定义则内部调用.size(w, h)方法
            height,        //必须定义width才有效, 默认 text排序后占的高
            ePos: Object{x, y}, //如果定义就在其上设置结束时的位置
        }


    const ciB = new CanvasImageText(ElementUtils.createCanvas(200, 20)).setFont("bold 18px serif").fillText("TEST test 撒旦给个", "#000000");
    const ciC = new CanvasImageText(ElementUtils.createCanvas(200, 20)).setFont("bold 18px sans-serif").fillText("TEST test 撒旦给个", "#000000");
    const ciD = new CanvasImageText(ElementUtils.createCanvas(200, 20)).setFont("bold 18px cursive").fillText("TEST test 撒旦给个", "#000000");
    const ciE = new CanvasImageText(ElementUtils.createCanvas(200, 20)).setFont("bold 18px fantasy").fillText("TEST test 撒旦给个", "#000000");
    const ciF = new CanvasImageText(ElementUtils.createCanvas(200, 20)).setFont("bold 18px monospace").fillText("TEST test 撒旦给个", "#000000");
    const ciG = new CanvasImageText(ElementUtils.createCanvas(200, 20)).setFont("bold 18px 微软雅黑").fillText("TEST test 撒旦给个", "#000000");
    cid.list.push(ciB.pos(0, 100), ciC.pos(0, 120), ciD.pos(0, 140), ciE.pos(0, 160), ciF.pos(0, 180), ciG.pos(0, 200), new CanvasImage(ExitImage20).pos(100, 220));
*/
class CanvasImageText extends CanvasImageCustom{

    get fontSize(){
        const strs = this.context.font.split(" ");
        if(UTILS.emptyArray(strs) === false){
            let s = 0;
            for(let i = 0; i < strs.length; i++){
                s = parseFloat(strs[i]);
                if(UTILS.isNumber(s)) return s;
            }
        }
        return 10;
    }

    constructor(canvas, value = null){
        super(canvas, value);
        this.context.textAlign = "left";
        this.context.textBaseline = "top";
        this.context.font = "10px serif, monospace, SimSun";
    }

    size(w, h, np){
        super.size(w, h, np);
        this.context.textAlign = "left";
        this.context.textBaseline = "top";
        return this;
    }

    setFont(font){
        switch(typeof font){
            case "string": 
            if(font !== this.context.font) this.context.font = font;
            break;
            case "number": 
            font = font+"px serif, SimSun, monospace";
            if(font !== this.context.font) this.context.font = font;
            break;
        }

        return this;
    }

    getTextWidth(text){
        return this.context.measureText(text).width;
    }

    fillText(value, color, x, y){
        if(!value) return this;
        if(color && this.context.fillStyle !== color) this.context.fillStyle = color;
        if(x === undefined){
            const w = this.context.measureText(value).width;
            x = w < this.box.w ? (this.box.w - w) / 2 : 0;
        }
        if(y === undefined){
            y = (this.box.h - this.fontSize) / 2;
        }
        this.context.fillText(value, x, y);
        return this;
    }

    fillTextWrap(value, option = {}){
        if(value.length === 0) return this;
        if(option.color && this.context.fillStyle !== option.color) this.context.fillStyle = option.color;

        const con = this.context, pos = [], 
        mw = option.width || this.box.w, fontSize = this.fontSize,

        padIsObj = UTILS.isObject(option.padding),
        padT = padIsObj ? padIsObj.top : option.padding || 0,
        padR = padIsObj ? padIsObj.right : option.padding || 0,
        padB = padIsObj ? padIsObj.bottom : option.padding || 0,
        padL = padIsObj ? padIsObj.left : option.padding || 0,

        disIsObj = UTILS.isObject(option.distance),
        disX = disIsObj ? disIsObj.x : option.distance || 0,
        disY = disIsObj ? disIsObj.y : option.distance || 0;

        var y = padT, x = padL;
        for(let i = 0, w; i < value.length; i++){
            w = con.measureText(value[i]).width;
            if(x + w + disX + padR > mw){
                x = w + padL + disX;
                y += fontSize + disY;
                pos.push(padL, y);
            } else {
                pos.push(x, y);
                x += w + disX;
            }
        }
        
        if(option.width !== undefined) this.size(option.width, option.height || (y + fontSize + padB));
        for(let i = 0; i < pos.length; i += 2) con.fillText(value[i / 2], pos[i], pos[i+1]);
        
        if(option.ePos !== undefined){
            option.ePos.x = x;
            option.ePos.y = y;
        }

        return this;
    }

}


/* CarouselFigure 轮播图 (走马灯)
parameter: 
attribute:
method:
    init(option: Object{
        animateStep: number,    //动画每秒刷新多少次; 默认 30
        timerSpeed: number,        //计时器的速度; 默认 1000
        speed: number,            //每次花费的时间(0 -> this.box.w); 默认 timerSpeed/2 (不应该大于 timerSpeed);
    }): this;
    play(): this; //开始自动播放
    stop(): this; //停止自动播放

demo: 
    const cf = new CarouselFigure({width: 100, height: 100}),
    urls = ["1.jpg", "2.jpg"];
    ElementUtils.createCanvasFromURL(cf.box.w, cf.box.h, urls, true, canvass => {
        for(let i = 0; i < canvass.length; i++) cf.list[i] = new CanvasImage(canvass[i]);
        cf.init().start().render();
    });
*/
class CarouselFigure extends CanvasImageDraw{

    #timer = null;
    #animateLoop = null;

    constructor(option){
        super(option);
    }

    init(option = {}){
        if(this.list.length <= 0){
            console.warn("CarouselFigure: 轮播图初始化失败");
            return this;
        }

        var sKey = -1, eKey = 0;
        const width = this.box.w, timerSpeed = option.timerSpeed || 1000, s = 4, d = 10, len = this.list.length, mKey = len - 1, 
        defDotImg = new CanvasImageCustom().size(s, s).fillRect("rgba(255,255,255,0.2)", s/2).stroke("#666666").image,
        selDotImg = new CanvasImageCustom().size(s, s).fillRect("#0000ff", s/2).stroke("#666666").image,
        sTween = new TweenCache({x: 0}, {x: 0}, option.speed || timerSpeed / 2),
        eTween = new TweenCache({x: 0}, {x: 0}, sTween.time, () => animateLoop.stop()),
        animateLoop = new AnimateLoop(() => {
            sTween.update();
            eTween.update();
            this.list[sKey].box.x = sTween.origin.x;
            this.list[eKey].box.x = eTween.origin.x;
            this.redraw();
        }, null, option.animateStep === undefined ? 1000 / 30 : 1000 / option.animateStep),
        onup = () => this.#timer.start(),
        ondown = () => this.#timer.stop();

        for(let i = 0; i < len; i++){
            this.list[i].pos(width * i, 0);
            this.list[len + i] = new CanvasImage(defDotImg).pos(i * s + i * d + (width - (len * s + len * d)) / 2, this.box.h - s - 10);
            this.list[i].addEventListener("up", onup);
            this.list[i].addEventListener("down", ondown);
        }

        this.#timer = new Timer(() => {
            for(let i = 0; i < len; i++){
                this.list[len + eKey].image = defDotImg;
                this.list[i].box.x = width;
            }

            sKey = sKey === mKey ? 0 : sKey + 1;
            eKey = eKey === mKey ? 0 : eKey + 1;
            
            this.list[sKey].box.x = sTween.origin.x = 0;
            sTween.end.x = width;
            sTween.start();
            
            this.list[eKey].box.x = eTween.origin.x = -width;
            eTween.end.x = 0;
            eTween.start();

            this.list[len + eKey].image = selDotImg;
            animateLoop.play();
        }, timerSpeed, Infinity, false);
        this.#animateLoop = animateLoop;
        
        return this;
    }

    play(){
        if(this.#timer !== null) this.#timer.start();
        return this;
    }

    stop(){
        if(this.#timer !== null) this.#timer.stop();
        return this;
    }

    exit(){
        if(this.#timer !== null){
            this.#timer.stop();
            this.#timer = null;
        }
        if(this.#animateLoop !== null){
            this.#animateLoop.stop();
            this.#animateLoop = null;
        }
        super.exit();
    }

}




const emptyColor = new RGBColor(),
emptyCIC = new CanvasImageCustom(null, null),
emptyCIT = new CanvasImageText();

const CPath2DMeter = new CanvasPath2D("stroke", {strokeStyle: "#84c3f9"});
CPath2DMeter.progress(new Meter());

const ExitImage20 = new CanvasImageText(ElementUtils.createCanvas(20, 20), new Path2D())
.rect(2, 1).fill("#eeeeee")
.setFont("bold 14px sans-serif").fillText("✘", "#000000")
.stroke("#666666").image;


/* CanvasProgressBar 进度条
parameter: 
    option: Object{
        min: number,
        max: number,

        width: number,
        height: number,
        cursorSize: number,
        position: string,

        bgColor: string,
        valueColor: string,
        cursorColor: string,
        borderColor: string,
    }

attribute:
    meter: Meter;
    
method:
    setValue(v: number): undefined;     //v 为 min 与 max 之间
    pos(x, y: number): undefined;         //初始化或设置位置
    addToList(arr: Array): undefined;    //
    removeToList(arr: Array): undefined;//
    bindEvent(cid: CanvasImageDraw, onchange: function): undefined;

demo:
    const cid = new CanvasImageDraw();
    const progress = new CanvasProgressBar({
        min: -100,
        max: 100,
        width: 120,
        height: 10,
        cursorSize: 20,
    });

    progress.pos(10, 10);
    progress.addToList(cid.list);
    progress.bindEvent(cid, v => console.log(v));
*/
class CanvasProgressBar{

    #background = null;
    #rBox = null;
    #cursor = null;
    
    constructor(option = {}){
        this.meter = new Meter(option.min, option.max);

        const width = option.width || 100, height = option.height || 10;

        //init cursor
        if(width > height){
            var round = height / 2;
            const cursorSize = option.cursorSize || height;
            emptyCIC.size(cursorSize, cursorSize, true).rect(cursorSize/2, 1);
        } else {
            var round = width / 2;
            const cursorSize = option.cursorSize || width;
            emptyCIC.size(cursorSize, cursorSize, true).rect(cursorSize/2, 1);
        }
        this.#cursor = new CanvasImage(emptyCIC.fill(option.cursorColor || "#ffffff").cloneCanvas());
        
        //init background
        this.#background = new CanvasImage(emptyCIC.size(width, height, true).fillRect(option.bgColor || "#000000", round, 1).stroke(option.borderColor||"rgba(0,0,0,0)").cloneCanvas());
        this.#rBox = new RoundedRectangle(0, 0, 0, 0, round);
        this.#background.path2D = new CanvasPath2D("fill", {fillStyle: option.valueColor || "rgba(255,255,255,0.2)"});
        this.#background.path2D.rect(this.#rBox);
        this.#background.position = this.#cursor.position = option.position || "";
    }

    _updateCX(){
        const nx = this.meter.ratio * this.#background.w, hs = this.#cursor.w / 2;
        this.#rBox.w = nx < this.#background.h ? this.#background.h : nx;
        this.#cursor.box.x = nx - hs < 0 ? 
        this.#background.x : nx + hs >= this.#background.w ? 
        this.#background.box.mx - this.#cursor.w : nx + this.#background.x - hs;
    }

    _updateCY(){
        const nx = this.meter.ratio * this.#background.h, hs = this.#cursor.h / 2;
        this.#rBox.h = nx < this.#background.w ? this.#background.w : nx;
        this.#cursor.box.y = nx - hs < 0 ? 
        this.#background.y : nx + hs >= this.#background.h ? 
        this.#background.box.my - this.#cursor.h : nx + this.#background.y - hs;
    }

    setValue(v){
        this.meter.value = v;
        if(this.#background.w > this.#background.h) this._updateCX();
        else this._updateCY();
    }

    pos(x, y){
        if(this.#background.w > this.#background.h){
            this.#cursor.pos(this.#cursor.x - this.#background.x + x, y - (this.#cursor.h - this.#background.h) / 2);
            this.#rBox.size(this.#cursor.x - x + this.#cursor.w, this.#background.h);
        } else {
            this.#cursor.pos(x - (this.#cursor.w - this.#background.w) / 2, this.#cursor.y - this.#background.y + y);
            this.#rBox.size(this.#background.w, this.#cursor.y - y + this.#cursor.h);
        }

        this.#rBox.pos(0, 0);
        this.#background.pos(x, y);
    }

    addToList(arr){
        arr.push(this.#background, this.#cursor);
    }

    removeToList(arr){
        const i = arr.indexOf(this.#background);
        if(i !== -1) arr.splice(i, 2);
    }

    addToCID(cid){
        cid.append(this.#background, this.#cursor);
    }
    
    bindEvent(cid, cis, onchange = null){
        var ov;
        if(cis){
            this.#cursor.addEventListener("down", () => cis.disable(this));
            this.#cursor.addEventListener("up", () => cis.enable(this));
        }

        if(this.#background.w > this.#background.h){
            this.#cursor.addEventListener("move", event => {
                ov = this.meter.value;
                this.meter.setFromRatio((event.offsetX - this.#background.x - cid.box.x) / this.#background.w);
                if(ov !== this.meter.value){
                    ov = this.meter.value;
                    if(onchange !== null) onchange(this);
                    this._updateCX();
                    cid.redraw();
                }
            });
        } else {
            this.#cursor.addEventListener("move", event => {
                ov = this.meter.value;
                this.meter.setFromRatio((event.offsetY - this.#background.y - cid.box.y) / this.#background.h);
                if(ov !== this.meter.value){
                    ov = this.meter.value;
                    if(onchange !== null) onchange(this);
                    this._updateCY();
                    cid.redraw();
                }
            });
        }
    }

}


/* CanvasColorTestViewer 颜色调试器
parameter:
    option = {
        width,             //默认 250 
        height:         //默认 w*0.618
        bgColor,        //默认 #ffffff
        borderRadius,    //默认 4
        textColor        //默认 #002e23
    }

attribute:
    hsv: Object{h,s,v};
    alpha: Number;
    只读: value: RGBColor, box: Box;

method:
    visible(v: Bool): undefined;//显示或隐藏所以的ci
    pos(x, y): undefined;         //如果你不希望排版错乱的话用此方法设置它们的位置位置
    update(): undefined;         //当颜色发送改变时更新: ctv.set("red").update()
    set(r, g, b, a): this;         //第一个参数r可以时字符串样式的颜色(rgb|rgba|十进制|英文)

    addToList(arr): undefined;         //把所有的 CanvasImage 追加到arr数组
    removeToList(arr): undefined;     //所有的 CanvasImage 从arr数组删除

    bindEvent(cir: CanvasImageRender, onchange: Func): this; //cir必须已开启dom事件,否则无效

demo:
    const ctv = new CanvasColorTestViewer(),
    cir = new CanvasImageRender({width: ctv.box.w - 5, height: ctv.box.h - 5}),
    cie = new CanvasEvent(cir); //启用dom事件
    
    ctv.set("blue").update();
    ctv.addToList(cir.list);
    ctv.bindEvent(cir, null, v => console.log(v));
    cir.render();

    // 将图片变灰，灰度算法公式: 0.299*r + 0.587*g + 0.114*b 
*/
class CanvasColorTestViewer{

    #value = new RGBColor();
    get value(){return this.#value;}

    #box = null;
    get box(){return this.#box;}

    #alpha = 1;
    get alpha(){return this.#alpha;}
    set alpha(v){this.#alpha = UTILS.floatKeep(v);}

    constructor(option = {}){
        this.textColor = option.textColor || "#002e23";
        this.hsv = {h:0, s:100, v:100};

        const w = option.width || 250, h = option.height||Math.round(0.618*w), r = option.borderRadius || 4, 
        colors = [], lw = w * 0.3, rw = w - lw, sh = 10;
        const cursorImage = emptyCIC.size(10, 10, true).fillRect("#ffffff", 5).cloneCanvas();


        //h
        this.ciH = new CanvasImageCustom().size(w, h).rect(r);

        colors.length = 0;
        for(let h = 0, c = emptyColor; h < 6; h++){
            c.setFormHSV(h/6*360, 100, 100);
            colors[h] = `rgb(${c.r},${c.g},${c.b})`;
        }

        emptyCIC.size(rw-10, sh, true).rect(2);
        const linearGradientH = emptyCIC.context.createLinearGradient(0, sh, rw-10, sh);
        emptyCIC.fill(gradientColor(linearGradientH, colors, true));
        this.ciH_scroll = new CanvasImage(emptyCIC.cloneCanvas());
        this.cursorH = new CanvasImage(cursorImage);

        
        //sv 饱和度&明度
        emptyCIC.size(w, h, true).rect(r);
        colors.length = 0;
        for(let s = 0; s < 100; s++) colors[s] = `rgba(255,255,255,${1 - s / 99})`;
        const linearGradientS = emptyCIC.context.createLinearGradient(0, h, w, h);
        emptyCIC.fill(gradientColor(linearGradientS, colors));
        
        colors.length = 0;
        for(let v = 0; v < 100; v++) colors[v] = `rgba(0,0,0,${1 - v / 99})`;
        const linearGradientV = emptyCIC.context.createLinearGradient(w, h, w, 0);
        emptyCIC.fill(gradientColor(linearGradientV, colors));

        this.ciSV = new CanvasImage(emptyCIC.cloneCanvas());
        this.cursorSV = new CanvasImage(emptyCIC.size(10, 10, true).rect(5).fill("rgba(255,255,255,0.4)").stroke("rgba(0,0,0,0.6)").cloneCanvas());
        

        //a
        this.ciA = new CanvasImage(ElementUtils.createCanvasTCC(rw-10, sh, sh/2, 2));

        colors.length = 0;
        for(let a = 0; a < 10; a++) colors[a] = `rgba(0,0,0,${a / 9})`;
        const linearGradientA = emptyCIC.context.createLinearGradient(0, sh, this.ciA.box.w, sh);
        this.ciA_scroll = new CanvasImage(emptyCIC.size(this.ciA.box.w, sh, true).rect(2).fill(gradientColor(linearGradientA, colors)).cloneCanvas());
        this.cursorA = new CanvasImage(cursorImage);
        

        //bottom bg
        this.bottomBG = new CanvasImage(emptyCIC.size(w, lw, true).rect(r, null, 1).fill(option.bgColor||"#ffffff").cloneCanvas());


        //result
        this.resultBG = new CanvasImage(ElementUtils.createCanvasTCC(lw-10, lw-10, 5, 2));
        this.resultColor = new CanvasImageCustom().size(this.resultBG).rect(2, 1);
        this.resultText = new CanvasImageText().size(this.ciA.box.w, this.resultColor.box.h - this.ciH_scroll.box.h - this.ciA_scroll.box.h - 15);
        

        //box
        const _box = new Box(), scope = this;
        Object.defineProperties(_box, {
            x: {get: () => {return scope.ciH.box.x;}},
            y: {get: () => {return scope.ciH.box.y;}},
            w: {get: () => {return scope.ciH.box.w;}},
            h: {get: () => {return scope.ciH.box.h + scope.bottomBG.box.h;}},
        });

        this.#box = _box;
        this.updateCIH();
        this.updateResult();
        this.pos(0, 0);
    }

    pos(x, y){
        this.ciH.box.pos(x, y);
        this.ciSV.box.pos(x, y);
        this.updateCursorSV();

        this.bottomBG.pos(this.ciH.x, this.ciH.box.my);
        this.resultBG.pos(this.bottomBG.x+5, this.bottomBG.y+5);
        this.resultColor.pos(this.resultBG.x, this.resultBG.y);

        this.ciH_scroll.pos(this.resultBG.box.mx + 5, this.resultBG.y + 5);
        this.updateCursorH();

        this.ciA.pos(this.ciH_scroll.x, this.ciH_scroll.box.my + 5);
        this.ciA_scroll.pos(this.ciA.x, this.ciA.y);
        this.updateCursorA();

        this.resultText.pos(this.ciA_scroll.x, this.ciA_scroll.box.my + 5);
    }
    
    addToList(arr){
        arr.push(
            this.ciH, 
            this.ciSV, 
            this.bottomBG, 
            this.resultBG, 
            this.resultColor, 
            this.resultText, 
            this.ciH_scroll, 
            this.ciA, 
            this.ciA_scroll, 
            this.cursorSV, 
            this.cursorH, 
            this.cursorA
        );
    }

    removeToList(arr){
        const i = arr.indexOf(this.ciH);
        if(i !== -1) arr.splice(i, 12);
    }

    addToCID(cid){
        cid.append(
            this.ciH, 
            this.ciSV, 
            this.bottomBG, 
            this.resultBG, 
            this.resultColor, 
            this.resultText, 
            this.ciH_scroll, 
            this.ciA, 
            this.ciA_scroll, 
            this.cursorSV, 
            this.cursorH, 
            this.cursorA
        );
    }

    bindEvent(cid, cis, onchange = null){
        var sx = 0, sy = 0, v;
        const cursorSV_half = this.cursorSV.box.w / 2,
        cis_d = cis ? () => cis.disable(this) : null, 
        cis_e = cis ? () => cis.enable(this) : null;


        //SV
        const setSV = (x, y) => {
            var m = this.#box.x-cursorSV_half;
            if(x < m) x = m;
            else{
                v = this.ciSV.box.mx - cursorSV_half;
                if(x > v) x = v;
            }

            m = this.#box.y-cursorSV_half;
            if(y < m) y = m;
            else{
                v = this.ciSV.box.my - cursorSV_half;
                if(y > v) y = v;
            }

            this.cursorSV.box.pos(x, y);
            
            x += cursorSV_half;
            y += cursorSV_half;
            this.hsv.s = (x - this.ciSV.box.x) / this.ciSV.box.w * 100;
            this.hsv.v = (1 - (y - this.ciSV.box.y) / this.ciSV.box.h) * 100;
            this.updateResult();

            if(onchange !== null) onchange(this.#value.getRGBA(this.#alpha));
            cid.redraw();
        },

        onmoveSV = event => {
            if(event.target === this.cursorSV || event.target === this.ciSV) setSV(event.offsetX - sx, event.offsetY - sy);
        },

        ondownSV = event => {
            sx = event.offsetX - this.cursorSV.box.x;
            sy = event.offsetY - this.cursorSV.box.y;
            onmoveSV(event);
        }

        this.cursorSV.addEventListener("down", ondownSV);
        this.ciSV.addEventListener("down", ondownSV);
        this.cursorSV.addEventListener("move", onmoveSV);
        this.ciSV.addEventListener("move", onmoveSV);
        if(cis){
            this.cursorSV.addEventListener("down", cis_d);
            this.cursorSV.addEventListener("up", cis_e);
            this.ciSV.addEventListener("down", cis_d);
            this.ciSV.addEventListener("up", cis_e);
        }
        
        
        //H
        const setH = x => {
            v = this.ciH_scroll.box.x - cursorSV_half;
            if(x < v) x = v;
            else{
                v = this.ciH_scroll.box.mx - cursorSV_half;
                if(x > v) x = v;
            }

            this.cursorH.box.x = x;
            
            x += cursorSV_half;
            this.hsv.h = (x - this.ciH_scroll.box.x) / this.ciH_scroll.box.w * 360;
            this.updateCIH();
            this.updateResult();

            if(onchange !== null) onchange(this.#value.getRGBA(this.#alpha));
            cid.redraw();
        },

        onmoveH = event => {
            if(event.target === this.cursorH || event.target === this.ciH_scroll) setH(event.offsetX - sx);
        },

        ondownH = event => {
            sx = event.offsetX - this.cursorH.box.x;
            sy = event.offsetY - this.cursorH.box.y;
            onmoveH(event);
        }

        this.cursorH.addEventListener("down", ondownH);
        this.ciH_scroll.addEventListener("down", ondownH);
        this.cursorH.addEventListener("move", onmoveH);
        this.ciH_scroll.addEventListener("move", onmoveH);
        if(cis){
            this.cursorH.addEventListener("down", cis_d);
            this.cursorH.addEventListener("up", cis_e);
            this.ciH_scroll.addEventListener("down", cis_d);
            this.ciH_scroll.addEventListener("up", cis_e);
        }


        //A
        const setA = x => {
            v = this.ciA_scroll.box.x - cursorSV_half;
            if(x < v) x = v;
            else{
                v = this.ciA_scroll.box.mx - cursorSV_half;
                if(x > v) x = v;
            }

            this.cursorA.box.x = x;
            
            x += cursorSV_half;
            this.alpha = (x - this.ciA_scroll.box.x) / this.ciA_scroll.box.w * 1;
            this.updateResult();

            if(onchange !== null) onchange(this.#value.getRGBA(this.#alpha));
            cid.redraw();
        },

        onmoveA = event => {
            if(event.target === this.cursorA || event.target === this.ciA_scroll) setA(event.offsetX - sx);
        },

        ondownA = event => {
            sx = event.offsetX - this.cursorA.box.x;
            sy = event.offsetY - this.cursorA.box.y;
            onmoveA(event);
        }

        this.cursorA.addEventListener("down", ondownA);
        this.ciA_scroll.addEventListener("down", ondownA);
        this.cursorA.addEventListener("move", onmoveA);
        this.ciA_scroll.addEventListener("move", onmoveA);
        if(cis){
            this.cursorA.addEventListener("down", cis_d);
            this.cursorA.addEventListener("up", cis_e);
            this.ciA_scroll.addEventListener("down", cis_d);
            this.ciA_scroll.addEventListener("up", cis_e);
        }

        return this;
    }

    set(r, g, b, a){
        if(typeof r !== "string"){
            emptyColor.set(r, g, b).getHSV(this.hsv);
            this.alpha = a || 1;
        }
        else{
            this.alpha = emptyColor.setFormString(r);
            emptyColor.getHSV(this.hsv);
        }
        return this;
    }

    update(){
        this.updateCIH();
        this.updateResult();

        this.updateCursorSV();
        this.updateCursorH();
        this.updateCursorA();
    }

    updateCursorSV(){
        this.cursorSV.box.x = this.hsv.s / 100 * this.ciSV.box.w + this.ciSV.box.x - this.cursorSV.box.w / 2;
        this.cursorSV.box.y = (1 - this.hsv.v / 100) * this.ciSV.box.h + this.ciSV.box.y - this.cursorSV.box.h / 2;
    }

    updateCursorH(){
        this.cursorH.box.x = this.hsv.h / 360 * this.ciH_scroll.box.w + this.ciH_scroll.box.x - this.cursorH.box.w / 2;
        this.cursorH.box.y = this.ciH_scroll.box.y;
    }

    updateCursorA(){
        this.cursorA.box.x = this.alpha * this.ciA_scroll.box.w + this.ciA_scroll.box.x - this.cursorA.box.w / 2;
        this.cursorA.box.y = this.ciA_scroll.box.y;
    }

    updateCIH(){
        const c = emptyColor.setFormHSV(this.hsv.h, 100, 100);
        this.ciH.fill(`rgb(${c.r},${c.g},${c.b})`);
    }

    updateResult(){
        this.#value.setFormHSV(this.hsv.h, this.hsv.s, this.hsv.v);
        const str = this.#value.getRGBA(this.#alpha);
        this.resultColor.clear().fill(str);
        this.resultText.clear().fillText(str, this.textColor);
    }

}


/* CanvasIconMenu 图标菜单

备注: 
    每个 CanvasIconMenu 会创建3个CanvasImage对象
    
parameter:
    icon: Image, //左边不可以更换的图标
    text,
    option: Object{
        padding: number,            //border 以内的间隔
        margin: number,             //border 以外的间隔
        iconSize: number,                //
        backgroundColor: string,    //border 以内的背景颜色(最底层的)
        
        //text
        textWidth: number,     //如果为0或未定义则根据文字内容自适应宽
        textSize: number,     //最好不要大于 iconSize
        textColor: string,    //

        //边框
        borderSize: number,     //默认 0
        borderColor: string,     //默认 #ffffff
        borderRadius: number,    //默认 0
    }

attributes:
    background: CanvasImage;    //它同时实现了 backgroundColor, icon, text
    icons: CanvasImages;    //右边可更换的图标 宽高为 option.iconSize, option.iconSize
    masks: CanvasImages;     //遮罩层(最顶层) 宽高为 this.contentWidth, this.contentHeight;

method:
    pos(x, y)
    addToList(arr)
    removeToList(arr)

demo:
    const iconMenu = new CanvasIconMenu(null, "test");
    iconMenu.pos(10, 10);
    iconMenu.addToList(cir.list);
*/
class CanvasIconMenu{

    static option = {
        padding: 2,
        margin: 0, 
        iconSize: 20,
        backgroundColor: "#000000",
        textWidth: 0,
        textSize: 12,
        textColor: "#ffffff",
        borderSize: 0,
        borderColor: "#ffffff",
        borderRadius: 0,
    }

    #borderRadius = 0;
    #iconsOffsetX = 0;
    #iconsOffsetY = 0;

    #background = null;
    #icons = null;
    #masks = null;
    get background(){return this.#background;}
    get icons(){return this.#icons;}
    get masks(){return this.#masks;}
    get box(){return this.#background.box}

    #masksOffset = 0;
    #contentHeight = 0;
    get masksOffset(){return this.#masksOffset;}
    get contentHeight(){return this.#contentHeight;}

    #contentWidth = 0;
    get contentWidth(){return this.#contentWidth;}

    constructor(icon, text, option = CanvasIconMenu.option){
        if(typeof text !== "string" || text === "") text = "empty";

        const padding = UTILS.isNumber(option.padding) ? option.padding : 0,
        margin = UTILS.isNumber(option.margin) ? option.margin : 0,
        iconSize = UTILS.isNumber(option.iconSize) ? option.iconSize : 12,
        backgroundColor = option.backgroundColor || "#000000",
        
        textSize = option.textSize || 12,
        textColor = option.textColor || "#ffffff",

        borderSize = UTILS.isNumber(option.borderSize) ? option.borderSize : 0,
        borderColor = option.borderColor || textColor,
        borderRadius = option.borderRadius || 0;
        
        emptyCIT.setFont(textSize);
        const textWidth = option.textWidth || emptyCIT.getTextWidth(text), 
        contentWidth = padding * 4 + borderSize * 2 + iconSize * 2 + textWidth, 
        contentHeight = padding * 2 + borderSize * 2 + iconSize,
        contentOffset = borderSize + padding;
        
        //background
        emptyCIT.size(contentWidth, contentHeight, true).rect(borderRadius, borderSize).fill(backgroundColor);
        if(CanvasImageDraw.isCanvasImage(icon)){
            const size = UTILS.setSizeToSameScale(icon, {width: iconSize, height: iconSize});
            emptyCIT.context.drawImage(icon, contentOffset, contentOffset, size.width, size.height);
        }

        //text
        emptyCIT.fillText(text, textColor, contentOffset + iconSize + padding);
        if(borderSize > 0) emptyCIT.stroke(borderColor, borderSize);
        const backgroundImage = emptyCIT.cloneCanvas();
        
        //icons
        this.#icons = new CanvasImages();
        this.#icons.box.size(iconSize, iconSize);

        //masks
        this.#masks = new CanvasImages();
        this.#masks.box.size(contentWidth, contentHeight);
        
        //margin
        if(UTILS.isNumber(margin) && margin > 0){
            const margin2 = margin * 2;
            emptyCIT.size(contentWidth + margin2, contentHeight + margin2);
            emptyCIT.context.drawImage(backgroundImage, margin, margin);
            this.#background = new CanvasImage(emptyCIT.cloneCanvas());
            this.#masksOffset = margin;
        }else{
            this.#background = new CanvasImage(backgroundImage);
            this.#masksOffset = 0;
        }

        this.#iconsOffsetX = emptyCIT.box.w - this.#masksOffset - contentOffset - iconSize;
        this.#iconsOffsetY = this.#masksOffset + contentOffset;
        this.#borderRadius = borderRadius;
        this.#contentHeight = contentHeight;
        this.#contentWidth = contentWidth;
        //this.#contentOffset = contentOffset;
    }

    pos(x, y){
        this.#background.pos(x, y);
        this.#icons.pos(x + this.#iconsOffsetX, y + this.#iconsOffsetY);
        this.#masks.pos(x + this.#masksOffset, y + this.#masksOffset);
    }

    addToList(arr){
        arr.push(this.#background, this.#icons, this.#masks);
    }

    removeToList(arr){
        const i = arr.indexOf(this.#background);
        if(i !== -1) arr.splice(i, 3);
    }

    visible(v){
        this.#background.visible = 
        this.#icons.visible = 
        this.#masks.visible = v;
    }

    disableStyle(){
        if(this.#masks.cursor !== 0) this.#masks.cursor = 0;
    }

    selectStyle(){
        if(this.#masks.cursor !== 1) this.#masks.cursor = 1;
    }

    defaultStyle(){
        if(this.#masks.cursor !== 2) this.#masks.cursor = 2;
    }

    createMasksImages(colorA = "rgba(0,0,0,0.75)", colorB = "rgba(0,173,230,0.5)"){
        emptyCIC.size(this.contentWidth, this.contentHeight, true).rect(this.#borderRadius, 1);
        const a = emptyCIC.cloneCanvas(),
        b = emptyCIC.fill(colorA).cloneCanvas(),
        c = emptyCIC.clear().fill(colorB).cloneCanvas();
        this.#masks.images.push(b,c,a);
        this.#masks.cursor = 2;
    }

    createIconsTriangle(fillStyle = CanvasIconMenu.option.textColor, padding = CanvasIconMenu.option.padding){
        const size = this.#icons.box.w, x = size - padding;
        emptyCIC.size(size, size, true).path([padding,padding, x,size/2, padding,x], true).fill(fillStyle);
        this.#icons.images.push(emptyCIC.cloneCanvas());
    }

    createIconsImages(texts, textSize = CanvasIconMenu.option.textSize, fillStyle = CanvasIconMenu.option.textColor){
        emptyCIT.size(this.#icons.box.w, this.#icons.box.h).setFont(textSize);
        if(Array.isArray(texts)){
            texts.forEach(str => {
                this.#icons.images.push(emptyCIT.clear().fillText(str, fillStyle).cloneCanvas());
            });
        } else if(typeof texts === "string"){
            this.#icons.images.push(emptyCIT.clear().fillText(texts, fillStyle).cloneCanvas());
        }
        if(this.#icons.cursor === -1) this.#icons.cursor = 0;
    }

}


/* CanvasTreeList extends TreeStruct 树结构展示对象
parameter:
    object: Object,
    info: Object{
        name_attributesName: String, //object[name_attributesName]
        iamges_attributesName: String,
        iamges: Object{
            object[iamges_attributesName]: Image
        },
    },
    option: Object, //参见 CanvasIconMenu 的 option

attribute:
    objectView: CanvasIconMenu;        //object 展示视图(文字)
    childIcon: CanvasImages;        //子视图隐藏开关(三角形图标)
    childView: CanvasImageCustom;    //子视图 (线)

    //此属性内部自动更新, 表示自己子视图的高 
    //为什么不直接用 childView.box.h 代替? 
    //因为如果cir存在scroll则box的属性将会变成一个"状态机", 
    //所以就是为了不让它高频率的更新box的属性
    childViewHeight: Number;
    
    //只读: 
    object: Object;            //
    visible: Bool;            //自己是否已经显示
    root: CanvasTreeList;    //向上遍历查找自己的root
    rect: Box;                //new一个新的box并根据自己和所有子更新此box的值
    box: Box;                //返回 CanvasIconMenu.box

method:
    bindEvent(cir: CanvasImageDraw, root: CanvasTreeList): this; //绑定默认事件
    unbindEvent(): undefined;                 //解绑默认事件 (如果此类不在使用的话可以不用解除事件)

    addToList(arr: Array);                    //添加到数组, arr一般是 CanvasImageDraw.list 渲染队列
    removeToList(arr: Array);                //从数组删除
    
    visibleChild(root): undefined;             //显示 (如果自己为隐藏状态则会想查找已显示的ctl,并从ctl展开至自己为止)
    hiddenChild(root): undefined;            //隐藏

    getByObject(object): CanvasTreeList;    //查找 如果不存在返回 undefined;
    setName(name: String, arr: Array);        //销毁已有的.objectView, 重新创建.objectView
    pos(x, y: Number): this;                //此方法是专门为 root 设的; 如果你让不是root的root调用root的方法的话 也行

    //删除自己和所有的下级 例子:
    removeChild(cir){
        const i = cir.list.length;
        this.traverse(v => {
            v.unbindEvent(); //删除事件
            v.removeToList(cir.list); //删除视图
        });
        
        //删除结构
        const parent = this.parent;
        parent.removeChild(this);
        
        //结尾
        parent.visibleChild(); //如果已知 root 就戴上, 否则它会自己寻找root
        cir.redraw();
    }

demo:
    const info = {
        name_attributesName: "CTL_name",
        iamges_attributesName: "className",
        images: {
            CanvasImage: emptyCIC.size(20, 20).rect().fill("blue").shear(),
            CanvasImages: emptyCIC.size(20, 20).rect().stroke("blue").shear(),
        },
    }

    const cir = new CanvasImageDraw({width: innerWidth, height: innerHeight});
    const cie = new CanvasImageEvent(cir);

    const onclick = function (event) {
        ctl_root.traverse(ctl => console.log(ctl.visible, ctl.childViewHeight))
    }

    const ctl_root = new CanvasTreeList(new CanvasImage(), info)
    .addToList(cir.list)
    .bindEvent(cir, cie, onclick);

    ctl_root.appendChild(new CanvasTreeList(new CanvasImages(), info))
    .addToList(cir.list)
    .bindEvent(cir, cie, onclick);

    ctl_root.pos(10, 10).visibleChild();
    cir.render();
*/
class CanvasTreeList extends TreeStruct{

    static info = null;

    static childLineStyle = {
        strokeStyle: "#ffffff",
        lineWidth: 2,
    }

    #info = null;
    #option = null;
    #object = null;
    get object(){
        return this.#object;
    }

    #visible = false;
    get visible(){
        return this.#visible;
    }

    get root(){
        var par = this;
        while(true){
            if(par.parent === null) break;
            par = par.parent;
        }
        return par;
    }

    get rect(){
        var maxX = this.objectView.background.box.mx, _x;
        this.traverse(ctl => {
            if(ctl.visible === true){
                _x = ctl.objectView.background.box.mx;
                maxX = Math.max(_x, maxX);
            }
        });
        
        const masksOffset = this.objectView.masksOffset, x = this.childIcon.box.x - masksOffset;

        return new Box(x, this.childIcon.box.y - masksOffset, maxX - x, this.childViewHeight + this.objectView.background.box.h);
    }

    get box(){
        return this.objectView.box;
    }

    constructor(object, info = CanvasTreeList.info, option = Object.assign({}, CanvasIconMenu.option)){
        if(UTILS.isObject(object) === false) return console.warn("[CanvasTreeList] 参数错误: ", object);
        super();
        this.#object = object;
        this.#info = info;
        this.#option = option;
    
        //this.objectView
        this.setName();

        //this.childIcon
        const size = this.objectView.contentHeight, x = (size - option.textSize) / 2, s = x + option.textSize;
        this.childIcon = new CanvasImages([
            emptyCIC.size(size, size).rect(option.borderRadius, option.borderSize).fill(option.backgroundColor)
            .path([x, x, x, s, s, size/2], true).fill(option.textColor).cloneCanvas(),
            emptyCIC.size(size, size).rect(option.borderRadius, option.borderSize).fill(option.backgroundColor)
            .path([x, x, s, x, size/2, s], true).fill(option.textColor).cloneCanvas(),
        ]);
        
        //this.childView
        this.childView = new CanvasImageCustom().size(1,1);
        this.childView.box.size(CanvasTreeList.childLineStyle.lineWidth || 1, 0);
        this.childView.path2D = new CanvasPath2D("stroke", CanvasTreeList.childLineStyle, "before");
        this.path2DLine = new Line();
        this.childView.path2D.line(this.path2DLine);
        this.childViewHeight = 0;
        
        //visible
        this.childIcon.cursor = 0;
        this.childIcon.visible = 
        this.objectView.background.visible = 
        this.objectView.icons.visible = 
        this.objectView.masks.visible = 
        this.childView.visible = false;
    }

    getByObject(object){
        if(UTILS.isObject(object) === false) return;
        var result;
        this.traverse(ctl => {
            if(result !== undefined) return "continue";
            if(ctl.object === object){
                result = ctl;
                return "continue";
            }
        });
        return result;
    }

    setName(name, arr, cis){
        var objectView;

        if(UTILS.isObject(this.#info)){
            const objectType = this.#object[this.#info.iamges_attributesName];

            if(typeof name === "string" && name !== ""){
                this.#object[this.#info.name_attributesName] = name;
            }else if(typeof this.#object[this.#info.name_attributesName] === "string" && this.#object[this.#info.name_attributesName] !== ""){
                name = this.#object[this.#info.name_attributesName];
            }else{
                name = objectType;
            }

            objectView = new CanvasIconMenu(this.#info.images[objectType], name, this.#option);
        }

        else objectView = new CanvasIconMenu(null, "", this.#option);

        //补遮罩层样式
        objectView.createMasksImages();

        //const scope = this;
        //Object.defineProperty(objectView.background, "scope", {get (){return scope;}});

        //更改渲染队列
        if(CanvasIconMenu.prototype.isPrototypeOf(this.objectView)){
            if(Array.isArray(arr)){
                const i = arr.indexOf(this.objectView.background);
                if(i !== -1){
                    //scroll
                    if(CanvasImageScroll.prototype.isPrototypeOf(cis)){
                        cis.bindScroll(objectView.background);
                        cis.bindScroll(objectView.icons);
                        cis.bindScroll(objectView.masks);
                        cis.changeCIAdd(objectView.background);
                        cis.changeCIAdd(objectView.icons);
                        cis.changeCIAdd(objectView.masks);
                    }

                    arr[i] = objectView.background;
                    arr[i+1] = objectView.icons;
                    arr[i+2] = objectView.masks;
                    
                    objectView.background.visible = this.objectView.background.visible;
                    objectView.icons.visible = this.objectView.icons.visible;
                    objectView.masks.visible = this.objectView.masks.visible;

                    objectView.icons.cursor =  this.objectView.icons.cursor;
                    objectView.masks.cursor =  this.objectView.masks.cursor;

                    objectView.pos(this.objectView.box.x, this.objectView.box.y);

                    this.objectView = objectView;

                }else console.warn("[CanvasTreeList] setName: 修改失败, 无法找到目标");
            }else console.warn("[CanvasTreeList] setName: 第二个参数为Array");
        }

        else this.objectView = objectView;
    }

    pos(x, y){
        if(this.#visible === false){
            this.childIcon.cursor = 1;
            this.childIcon.visible = 
            this.childView.visible = true;

            this.#visible = 
            this.objectView.background.visible = 
            this.objectView.icons.visible = 
            this.objectView.masks.visible = true;
        }
    
        const masksOffset = this.objectView.masksOffset;
        this.childIcon.pos(masksOffset+x, masksOffset+y); 
        this.objectView.pos(this.childIcon.box.mx, this.childIcon.box.y - masksOffset);
        this.childView.box.pos(this.childIcon.box.x + this.childIcon.box.w / 2, this.objectView.background.box.my);
        return this;
    }

    addToList(arr){
        this.traverse(ctl => {
            arr.push(ctl.childIcon, ctl.objectView.background, ctl.objectView.icons, ctl.objectView.masks, ctl.childView);
        });
        
        return this;
    }

    removeToList(arr){
        this.traverse(ctl => {
            const i = arr.indexOf(ctl.childIcon);
            if(i !== -1) arr.splice(i, 5);
        });
    }

    visibleChild(root = this.root){
        this.childIcon.cursor = 1;
        if(root !== this){
            this.childIcon.visible = 
            this.childView.visible = this.children.length === 0 ? false : true;
        }
        
        if(this.#visible){
            this._visibleChild();
            root.childViewHeight = 0;
            root._updateSizeChild();
            root._updatePositionChild();
            root.childView.box.h = root.path2DLine.y1 = root.childViewHeight;
        }else{
            if(root === this) return console.warn("[CanvasTreeList] visibleChild: 展开失败, 请使用 root.pos() 方法初始化root");
            let _ctl = root;
            this.traverseUp(ctl => {
                if(ctl.visible){
                    _ctl = ctl;
                    return "break";
                }
                if(ctl.childIcon.cursor !== 1) ctl.childIcon.cursor = 1;
            });
            _ctl.visibleChild(root);
        }
    }

    hiddenChild(root = this.root){
        if(this.#visible){
            this.childIcon.cursor = 0;
            this._hiddenChild();
            root.childViewHeight = 0;
            root._updateSizeChild();
            root._updatePositionChild();
            root.childView.box.h = root.path2DLine.y1 = root.childViewHeight;
        }
    }

    //修改: 包括自己所有的子
    bindEvent(cir, root){
        if(CanvasTreeList.prototype.isPrototypeOf(root) === false || root.parent !== null) console.warn("CanvasTreeList: 请显示声明 root");
        
        const onup = info => {
            if(info.delta < 600){
                if(this.childIcon.cursor === 0) this.visibleChild(root);
                else if(this.childIcon.cursor === 1) this.hiddenChild(root);
                cir.redraw();
            }
        }

        this.childIcon.addEventListener("up", onup);
    }

    //以下属性限内部使用
    _visible(){
        if(this.#visible === false){
            this.childIcon.visible = 
            this.childView.visible = this.children.length === 0 ? false : true;

            this.#visible = 
            this.objectView.background.visible = 
            this.objectView.icons.visible = 
            this.objectView.masks.visible = true;
        }
    }

    _visibleChild(){
        for(let k = 0, len = this.children.length, child; k < len; k++){
            child = this.children[k];
            child._visible();
            if(child.childIcon.cursor === 1) child._visibleChild();
        }
    }

    _hidden(){
        if(this.#visible === true){
            this.#visible = 
            this.childIcon.visible = 
            this.objectView.background.visible = 
            this.objectView.icons.visible = 
            this.objectView.masks.visible = 
            this.childView.visible = false;
        }
    }

    _hiddenChild(){
        for(let k = 0, len = this.children.length, child; k < len; k++){
            child = this.children[k];
            child._hidden();
            child._hiddenChild();
        }
    }

    _updateSize(){
        const itemHeight = this.objectView.background.box.h;
        var par = this.parent;
        while(par !== null){
            par.childViewHeight += itemHeight;
            par.path2DLine.y1 = par.childViewHeight;
            par = par.parent;
        }
    }

    _updateSizeChild(){
        for(let k = 0, len = this.children.length, child; k < len; k++){
            child = this.children[k];
            child.path2DLine.y1 = child.childViewHeight = 0;
            if(child.visible){
                child._updateSize();
                child._updateSizeChild();
            }
        }
    }

    _updatePosition(outCTL){
        const masksOffset = this.parent.objectView.masksOffset,  
        mx_parent = this.parent.childIcon.box.mx,
        my_outCTL = outCTL !== undefined ? outCTL.childView.box.y+outCTL.childViewHeight : this.parent.objectView.background.box.my;
        
        //childIcon
        this.childIcon.pos(
            mx_parent + masksOffset, 
            my_outCTL + masksOffset
        );
        
        //objectView
        this.objectView.pos(
            this.childIcon.visible === true ? this.childIcon.box.mx : mx_parent, 
            my_outCTL
        );
        
        //childView
        this.childView.box.pos(mx_parent + this.childIcon.box.w / 2, this.objectView.background.box.my);
        this.childView.box.h = this.childViewHeight;
    }

    _updatePositionChild(){
        for(let k = 0, len = this.children.length, outChild, child; k < len; k++){
            child = this.children[k];
            if(child.visible){
                child._updatePosition(outChild);
                child._updatePositionChild();
                outChild = child;
            }
        }
    }

}


/* HTUI 调试某对象的属性
static: 
    getData(object: Object): Array; //根据 object 生成 HTUI 所需的 data;

parameter: 
    object: Object, //任意一个对象

    data: Array[{
        //必须:
        valueUrl: string, //相对于.target 对象的路径; (内部使用示例: eval("object"+valueUrl))
        
        //可选:
        twoWayBind: boolean;     //是否双向绑定; 默认是单向(控件 -> object)
        type: String;             //指定控件类型, 如果可以最好定义此属性, 如果未定义 HTUI 通过object的属性值来自动选择控件类型; 值参见下面 '支持的类型' 栏
        title: String;             //标题
        onchange: Function,     //控件改变时触发
        // 暂不支持: explain: String;         //详细说明

        mini: boolean; //控件 mini 型; 默认true; (text, select 控件才有效)
        range: object{min, max, step: Number}, //(number 控件才有效)
        select: Array[name, value || Object{name:String, value:Any}], //(select 控件才有效)
        butVal: string; //按钮的value, (button 控件才有效)
    }],

    title: string, //标题 默认为 ""

attributes: 
    target: Object;
    data: Array;
    title: string;
    domElement: HTMLDivElement;
    setTypeAuto: boolean; //如果遇到未定义type的data是否自动设置type; 默认false (data如果定义了type, visible时较快)

method: 
    render(parentElem): this;     //
    visible(): this;    //显示 (根据data创建控件并添加至 DocumentFragment, 然后把 DocumentFragment 丢进 domElement)
    hidden(): this;        //隐藏

支持的类型: 
    text    (单行文本控件) 
    textarea(多行文本控件) 
    select    (单选控件)    

    color    (颜色控件)    
    number    (数值控件)    
    bool    (bool控件)    
    button    (按钮控件)    
    image    (上传图片控件)

    //特殊
    line    (分界线, .type = 'line'; .value = valueUrl|Array[valueUrl])

demo: 
    const object = {
        name: "test",
        nameB: "abbbb",
        color: "#ff0000",
        bool: true,
        select: {name: "#ff0000"},
        selectA: 0,
        numA: 0,
    }

    const data = HTUI.getData(object);
    const htui = new HTUI(object, data, "test 测试 TEST").visible().render();
    console.log(data);
*/
class HTUI {

    static CCTV = {
        cid: null,
        cie: null,
        value: null,
        elH: null,
        visible(v, x, y, w, h, f){
            this.hidden();
            
            const elH = ElementUtils.createElem("div");
            elH.onclick = () => this.hidden();
            elH.style = `
                position: absolute;
                width: ${innerWidth}px;
                height: ${innerHeight}px;
            `;
            document.body.appendChild(elH);
            
            const cctv = new CanvasColorTestViewer({
                width: w,             //默认 250 
                height: h,         //默认 w*0.618
            }),
            cid = new CanvasImageDraw({width: cctv.box.w, height: cctv.box.h}),
            cie = new CanvasEvent(cid);
            
            
            cctv.set(v).update();
            cctv.addToList(cid.list);
            cctv.bindEvent(cid, null, f);
            cid.domElement.style = `
                position: absolute;
                top: ${y}px;
                left: ${x}px;
                -webkit-box-shadow:#666 1px 2px 4px 1px; -moz-box-shadow:#666 1px 2px 4px 1px; box-shadow:#666 1px 2px 4px 1px;
            `;
            cid.render();
            this.cid = cid;
            this.cie = cie;
            this.value = cctv;
            this.elH = elH;
        },
        hidden(){
            if(this.cid === null) return;
            this.cie.unbindEvent();
            this.cid.exit();
            ElementUtils.removeChild(this.elH);
            this.elH = this.cid = this.cie = this.value = null;
        }
    }

    static getValueByUrl(object, valueUrl){
        try{
            return eval("object" + valueUrl);
        }
        catch(e){
            console.error(e);
        }
    }

    static readValueUrl(object, valueUrl){
        var urls = [], str = "";

        for(let k = 0, v, len = valueUrl.length; k < len; k++){
            v = valueUrl[k];
            if(v === " ") continue;
            
            if(v === '.' || v === '[' || v === ']'){
                if(str !== ""){
                    urls.push(str);
                    str = "";
                }
                
            }

            else str += v;

        }

        if(str !== "") urls.push(str);
        
        if(urls.length > 1){
            let _len = urls.length - 1;
            for(let k = 0; k < _len; k++) object = object[urls[k]];
            str = urls[_len];
        }

        else str = urls[0];
        
        urls = undefined;
        
        return {
            object: object,
            name: str,
        }
    }

    static isValueUrl(object, valueUrl){
        const v = HTUI.getValueByUrl(object, valueUrl);

        if(v === undefined) return false;
        
        switch(typeof v){
            case "object":
            if(v === null) return false;
            else if(v.isColor === true || v.isRGBColor === true || CanvasImageDraw.isCanvasImage(v) === true) return true;
            return false;

            case "string": 
            case "number": 
            case "boolean": 
            case "function": 
            return true;

            default: return false;
        }
    }

    static getData(object){
        const data = [];
        for(let n in object){
            const url = "."+n;
            if(HTUI.isValueUrl(object, url) === false) continue;
            data.push({
                valueUrl: url,
                title: n,
            });
        }
        return data;
    }

    #isLine = false;
    #itemH = 20;
    #df = document.createDocumentFragment();
    #clear = document.createElement("div");
    
    constructor(object = {}, data = [], title = ""){
        this.target = object;
        this.data = data;
        this.title =  title;
        this.domElement = document.createElement("div");
        this.setTypeAuto = false;
        this.#clear.style.clear = "both";
        this.domElement.style = `
            min-width: 120px;
            max-width: 600px;
            width: 250px;
            border: 1px solid #000000;
            background: #ffffff;
            position: absolute;
            font-size: 12px;
            color: #000000;
            overflow: hidden auto;
        `;
    }

    render(parentElem = document.body){
        parentElem.appendChild(this.domElement);
        this.domElement.style.maxHeight = (innerHeight - this.domElement.getBoundingClientRect().y)+"px";
        return this;
    }

    visible(){
        this.createTitleG(true);
        for(let k = 0; k < this.data.length; k++){
            this.handler(this.data[k]);
            this.#isLine = this.data[k].type === 'line';
        }
        this.#df.appendChild(this.#clear);
        this.domElement.innerHTML = "";
        this.domElement.appendChild(this.#df);
        return this;
    }

    hidden(){
        this.createTitleG(false);
        this.#df.appendChild(this.#clear);
        this.domElement.innerHTML = "";
        this.domElement.appendChild(this.#df);
        return this;
    }

    //以下方法限内部调用
    handler(data){
        if(data.type === 'line'){
            if(this.#isLine === true) return;
            return this.createLine(data);
        }

        const v = HTUI.getValueByUrl(this.target, data.valueUrl);

        if(v === undefined) return;
        
        switch(data.type){
            case "text": 
            this.createText(data, v);
            return true;

            case "textarea": 
            this.createTextarea(data, v);
            return true;

            case "bool": 
            this.createCheckbox(data, v);
            return true;

            case "color": 
            this.createColor(data, v);
            return true;

            case "number": 
            this.createNumber(data, v);
            return true;

            case "button": 
            this.createFunc(data);
            return true;

            case "image":
            this.createFileImage(data, v);
            return true;

            case "select":
            this.createSelect(data, v);
            return true;
        }

        if(Array.isArray(data.select) === true){
            if(this.setTypeAuto === true) data.type = "select";
            this.createSelect(data, v);
            return true;
        }
        
        switch(typeof v){
            case "object": 
            if(v === null) return;
            else if(v.isColor === true || v.isRGBColor === true){
                if(this.setTypeAuto === true) data.type = "color";
                this.createColor(data, v);
            }
            else if(CanvasImageDraw.isCanvasImage(v) === true){
                if(this.setTypeAuto === true) data.type = "image";
                this.createFileImage(data, v);
            }
            else return;
            break;

            case "string": 
            const _v = emptyColor.stringToColor(v);
            if(_v !== ""){
                if(this.setTypeAuto === true) data.type = "color";
                this.createColor(data, _v);
            } else {
                if(this.setTypeAuto === true) data.type = "text";
                this.createText(data, v);
            }
            break;

            case "number": 
            if(this.setTypeAuto === true) data.type = "number";
            this.createNumber(data, v);
            break;

            case "boolean": 
            if(this.setTypeAuto === true) data.type = "bool";
            this.createCheckbox(data, v);
            break;
            
            case "function": 
            if(this.setTypeAuto === true) data.type = "button";
            this.createFunc(data);
            break;

            default: return;
        }

        return true;
    }

    createTitleG(v){
        const el = document.createElement("div"),
        elA = ElementUtils.createElem("h5", "", v ? "▼" : "▶"),
        elT = ElementUtils.createElem("h5", "", this.title),
        elM = ElementUtils.createElem("h5", "", ":::");

        var sx, sy, rect;
        const onup = event => {
            elM.releasePointerCapture(event.pointerId);
            elM.onpointermove = elM.onpointerup = null;
        },
        onmove = event => {
            const y = event.pageY - sy;
            this.domElement.style.left = (event.pageX - sx)+"px";
            this.domElement.style.top = y+"px";
            this.domElement.style.maxHeight = (innerHeight - y)+"px";
        }

        elM.onpointerdown = event => {
            rect = this.domElement.getBoundingClientRect();
            sx = event.pageX - rect.x;
            sy = event.pageY - rect.y;

            elM.setPointerCapture(event.pointerId);
            elM.onpointermove = onmove;
            elM.onpointerup = onup;
        }

        elA.onclick = elT.onclick = () => {
            if(v) this.hidden();
            else this.visible();
        }

        el.style = `
            width: 100%;
            height: ${this.#itemH}px;
            float: left;
            overflow: hidden;
            line-height: ${this.#itemH}px;
            cursor: default;
            text-align: center;
            background: #ffffff;
            -moz-user-select: none; -o-user-select:none; -khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none; user-select:none;
        `;
        elA.style = elT.style = elM.style = `
            height: ${this.#itemH}px;
            position: absolute;
        `;

        this.domElement.onscroll = () => {
            if(this.domElement.scrollTop > this.#itemH){
                el.style.width = this.domElement.offsetWidth+"px";
                el.style.position = "fixed";
                el.style.float = "unset";
            } else {
                el.style.width = "100%";
                el.style.position = "unset";
                el.style.float = "left";
            }
        }

        elA.style.width = elM.style.width = this.#itemH+"px";
        elA.style.left = elM.style.right = "2px";
        elT.style.width = "100%";

        elA.title = v ? "点击关闭" : "点击打开";
        elT.title = this.title;
        elM.title = "按下拖动";
        
        el.appendChild(elT);
        el.appendChild(elA);
        el.appendChild(elM);
        this.#df.appendChild(el);
    }

    createTitle(p, v, ptb = "0"){
        const el = ElementUtils.createElem("p", "", v);
        const elB = ElementUtils.createElem("p", "", ":");
        el.title = elB.title = v;
        el.style = `
            width: 20%;
            height: ${this.#itemH}px;
            float: left;
            line-height: ${this.#itemH}px;
            text-indent: 2px;
            padding-top: ${ptb};
            padding-bottom: ${ptb};
            cursor: default;
            overflow: hidden;
        `;
        elB.style = `
            width: 4%;
            height: ${this.#itemH}px;
            float: left;
            text-align: center;
            line-height: ${this.#itemH}px;
            padding-top: ${ptb};
            padding-bottom: ${ptb};
            cursor: default;
        `;
        p.appendChild(el);
        p.appendChild(elB);
    }

    createLine(d){
        var is;

        if(typeof d.value === "string") is = HTUI.getValueByUrl(this.target, d.value) !== undefined;

        else if(Array.isArray(d.value) === true){
            for(let k = 0, len = d.value.length; k < len; k++){
                if(HTUI.getValueByUrl(this.target, d.value[k]) !== undefined){
                    is = true;
                    break;
                }
            }
        }

        if(is === true){
            const p = ElementUtils.createElem("div");
            p.style = `
                width: 100%;
                float: left;
                padding-top: 5px;
                padding-bottom: 5px;
                height: ${this.#itemH}px;
            `;

            const el = ElementUtils.createElem("div");
            el.style = `
                width: 98%;
                height: 1px;
                float: left;
                margin-left: 1%;
                border-top: 1px dashed #000000;
                margin-top: ${this.#itemH/2}px;
            `;

            p.appendChild(el);
            this.#df.appendChild(p);
        }
        
        return is;
    }

    createText(d, v){
        const p = ElementUtils.createElem("div");
        p.style = `
            float: left;
            padding-top: 5px;
            padding-bottom: 5px;
        `;

        const el = ElementUtils.createInput("text");
        el.style = `
            float: left;
            text-indent: 2px;
        `;
        
        el.onchange = event => {
            v = event.target.value;
            eval("this.target"+d.valueUrl+"=v");
            if(typeof d.onchange === "function") d.onchange(v);
        };

        if(d.twoWayBind === true){
            const read = HTUI.readValueUrl(this.target, d.valueUrl);
            Object.defineProperty(read.object, read.name, {
                get (){return v;},
                set (a){v = el.value = a;},
            });
        }

        if(d.mini !== false){
            p.style.width = "26%";
            p.style.height = this.#itemH+"px";
            el.style.width = "90%";
            el.style.height = "100%";
            this.createTitle(this.#df, d.title, "5px");
        } else {
            p.style.width = "100%";
            el.style.width = "72%";
            el.style.height = this.#itemH+"px";
            this.createTitle(p, d.title);
        }

        el.value = v;
        p.appendChild(el);
        this.#df.appendChild(p);
    }

    createTextarea(d, v){
        const p = ElementUtils.createElem("div");
        p.style = `
            width: 100%;
            float: left;
            padding-top: 5px;
            padding-bottom: 5px;
        `;

        this.createTitle(p, d.title);

        const el = ElementUtils.createElem("textarea");
        el.style = `
            max-width: 72%;
            width: 72%;
            height: ${this.#itemH*3}px;
            min-height: ${this.#itemH*3}px;
            float: left;
            padding: 1px;
        `;
        
        el.onchange = event => {
            v = event.target.value;
            eval("this.target"+d.valueUrl+"=v");
            if(typeof d.onchange === "function") d.onchange(v);
        };

        if(d.twoWayBind === true){
            const read = HTUI.readValueUrl(this.target, d.valueUrl);
            Object.defineProperty(read.object, read.name, {
                get (){return v;},
                set (a){v = el.value = a;},
            });
        }

        el.value = v;
        p.appendChild(el);
        this.#df.appendChild(p);
    }

    createSelect(d, v){
        const p = ElementUtils.createElem("div");
        p.style = `
            float: left;
            padding-top: 5px;
            padding-bottom: 5px;
            font-size: 12px;
        `;
        
        const el = ElementUtils.createElem("select");
        el.style = `
            float: left;
        `;
        
        const values = []
        switch(typeof d.select[0]){
            case "string": 
            for(let i = 0; i < d.select.length; i += 2){
                const o = ElementUtils.createElem("option");
                o.value = values[i/2] = d.select[i+1];
                o.textContent = d.select[i];
                el.appendChild(o);
            }
            break;

            case "object": 
            for(let i = 0; i < d.select.length; i++){
                const o = ElementUtils.createElem("option");
                o.value = values[i] = d.select[i].value;
                o.textContent = d.select[i].name;
                el.appendChild(o);
            }
            break;
        }

        el.onchange = () => {
            v = values[el.options.selectedIndex];
            eval("this.target"+d.valueUrl+"=v");
            if(typeof d.onchange === "function") d.onchange(v);
        };

        if(d.twoWayBind === true){
            const read = HTUI.readValueUrl(this.target, d.valueUrl);
            Object.defineProperty(read.object, read.name, {
                get (){return v;},
                set (a){
                    v = a;
                    el.options.selectedIndex = values.indexOf(a);
                },
            });
        }

        if(d.mini !== false){
            p.style.width = "26%";
            p.style.height = this.#itemH+"px";
            el.style.width = "90%";
            el.style.height = "100%";
            this.createTitle(this.#df, d.title, "5px");
        } else {
            p.style.width = "100%";
            el.style.width = "72%";
            el.style.height = this.#itemH+"px";
            this.createTitle(p, d.title);
        }

        el.options.selectedIndex = values.indexOf(v);
        p.appendChild(el);
        this.#df.appendChild(p);
    }

    createNumber(d, v){
        const p = ElementUtils.createElem("div");
        p.style = `
            width: 26%;
            float: left;
            padding-top: 5px;
            padding-bottom: 5px;
            height: ${this.#itemH}px;
        `;

        this.createTitle(this.#df, d.title, "5px");

        const el = ElementUtils.createInput("number");
        el.style = `
            width: 90%;
            height: 100%;
        `;

        if(d.range){
            el.min = d.range.min;
            el.max = d.range.max;
            el.step = d.range.step;
        }
        
        el.onchange = () => {
            if(v !== el.valueAsNumber){
                v = el.valueAsNumber;
                eval("this.target"+d.valueUrl+"=v");
                if(typeof d.onchange === "function") d.onchange(v);
            }
        };
        const timer = new Timer(el.onchange, 1000/30, Infinity, false),
        onup = event => {
            el.releasePointerCapture(event.pointerId);
            timer.stop();
            el.onchange();
        }
        el.onpointerdown = event => {
            el.setPointerCapture(event.pointerId);
            el.onpointerup = onup;
            el.onchange();
            timer.restart();
        }
        if(d.twoWayBind === true){
            const read = HTUI.readValueUrl(this.target, d.valueUrl);
            Object.defineProperty(read.object, read.name, {
                get (){return v;},
                set (a){
                    v = a;
                    el.value = String(a);
                },
            });
        }

        el.value = String(v);
        p.appendChild(el);
        this.#df.appendChild(p);
    }

    createCheckbox(d, v){
        const p = ElementUtils.createElem("div");
        p.style = `
            width: 26%;
            float: left;
            padding-top: 5px;
            padding-bottom: 5px;
            height: ${this.#itemH}px;
        `;

        this.createTitle(this.#df, d.title, "5px");

        const el = ElementUtils.createInput("checkbox");
        const s = this.#itemH * 0.8;
        el.style = `
            width: ${s}px;
            height: ${s}px;
            margin-top: ${(this.#itemH - s) / 2}px;
        `;
        
        el.onchange = event => {
            v = event.target.checked;
            eval("this.target"+d.valueUrl+"=v");
            if(typeof d.onchange === "function") d.onchange(v);
        };

        if(d.twoWayBind === true){
            const read = HTUI.readValueUrl(this.target, d.valueUrl);
            Object.defineProperty(read.object, read.name, {
                get (){return v;},
                set (a){el.checked = v = a;},
            });
        }
        
        el.checked = v;
        p.appendChild(el);
        this.#df.appendChild(p);
    }

    createFunc(d){
        const p = ElementUtils.createElem("div");
        p.style = `
            width: 26%;
            float: left;
            padding-top: 5px;
            padding-bottom: 5px;
            height: ${this.#itemH}px;
        `;

        this.createTitle(this.#df, d.title, "5px");

        const el = ElementUtils.createInput("button");
        el.value = d.butVal||"Button";
        el.style = `
            width: 90%;
            height: 100%;
        `;
        
        el.onclick = () => {
            if(typeof d.onchange === "function") d.onchange();
            else eval('this.target'+d.valueUrl+'()');
        }

        p.appendChild(el);
        this.#df.appendChild(p);
    }

    createColor(d, v){
        const p = ElementUtils.createElem("div");
        p.style = `
            width: 26%;
            float: left;
            padding-top: 5px;
            padding-bottom: 5px;
            height: ${this.#itemH}px;
        `;

        this.createTitle(this.#df, d.title, "5px");

        const el = ElementUtils.createElem("div");
        const s = this.#itemH * 0.8;
        el.style = `
            width: 90%;
            height: ${s}px;
            margin-top: ${(this.#itemH - s) / 2}px;
            border: 1px solid #000000;
            border-radius: 2px;
        `;
        
        const iso = typeof v !== "string",
        setColor = color => {
            _c = color;
            el.style.background = color;
            if(iso) v.set(color);
            else eval("this.target"+d.valueUrl+"=color");
        };

        el.onclick = () => {
            const rect = this.domElement.getBoundingClientRect();
            HTUI.CCTV.visible(_c, rect.x, rect.y+p.offsetTop+this.#itemH+5, rect.width, 0, color => {
                if(typeof d.onchange === "function") d.onchange(color);
                setColor(color);
            });
        }

        if(d.twoWayBind === true){
            const read = HTUI.readValueUrl(this.target, d.valueUrl);
            Object.defineProperty(read.object, read.name, {
                get (){return iso ? v : _c;},
                set (a){
                    _c = iso ? a.getStyle() : emptyColor.stringToColor(a)||"#ffffff";
                    el.style.background = _c;
                },
            });
        }

        var _c = iso ? v.getStyle() : v;
        el.style.background = _c;
        p.appendChild(el);
        this.#df.appendChild(p);
    }

    createFileImage(d, v){
        const p = ElementUtils.createElem("div");
        p.style = `
            width: 26%;
            float: left;
            padding-top: 5px;
            padding-bottom: 5px;
            height: ${this.#itemH}px;
        `;

        this.createTitle(this.#df, d.title, "5px");
        
        const bg = ElementUtils.createCanvasTCC(this.#itemH, this.#itemH, Math.ceil(this.#itemH/5), 2);
        const con = ElementUtils.createContext(bg.width, bg.height, true);
        con.canvas.style = `
            float: left;
            border-radius: 2px;
        `;

        const setVal = image => {
            v = CanvasImageDraw.isCanvasImage(image) ? image : null;
            con.clearRect(0,0,bg.width,bg.height);
            con.drawImage(bg, 0, 0);
            if(v !== null){
                const scale = UTILS.getSameScale(v, {width: bg.width, height: bg.height}),
                nw = scale * v.width, nh = scale * v.height;
                con.drawImage(v, (bg.width - nw) / 2, (bg.height - nh) / 2, nw, nh);
            }
        }

        con.canvas.onpointerdown = () => {
            setVal();
            eval("this.target"+d.valueUrl+"=null");
            if(typeof d.onchange === "function") d.onchange(null);
        }

        con.canvas.onclick = () => {
            ElementUtils.loadFileImages(urls => {
                const image = new Image();
                image.onload = () => {
                    setVal(image);
                    eval("this.target"+d.valueUrl+"=image");
                    if(typeof d.onchange === "function") d.onchange(image);
                }
                image.src = urls[0];
            });
        }

        if(d.twoWayBind === true){
            const read = HTUI.readValueUrl(this.target, d.valueUrl);
            Object.defineProperty(read.object, read.name, {
                get (){return v;},
                set (a){setVal(a);},
            });
        }

        setVal(v);
        p.appendChild(con.canvas);
        this.#df.appendChild(p);
    }

}


export {
    ElementUtils,
    CPath2DMeter,
    ExitImage20,
    CanvasPath2D,
    CanvasImageDraw,
    CanvasEvent,
    CanvasImageScroll,
    CanvasEventTarget,
    CanvasImage, 
    CanvasImages,
    CanvasImageCustom,
    CanvasImageText,
    CanvasProgressBar,
    CanvasColorTestViewer,
    CarouselFigure,
    CanvasIconMenu,
    CanvasTreeList,
    HTUI,
}

 

 

HTUI 使用示例:

import { HTUI } from "./ElementUtils.js";

　　const object = {
        text: "text",
        textarea: " a: 阿萨的解决\n b: i是独立精神的\n c: SOS大家",
        color: "#00ff00",
        bool: true,
        select: {v:"#00ff00"},
        num: 0,
        selectM: 1,
    },

    data = [
        //文本控件 object.text
        {
            valueUrl: ".text",
            title: "text",
            mini: false,
        },

        //多行文本控件 object.textarea
        {
            valueUrl: ".textarea",
            title: "textarea",
            type: "textarea",
        },

        //颜色和bool控件
        {
            valueUrl: ".color",
            title: "color",
            twoWayBind: true, //此控件为双向绑定
        },
        {
            valueUrl: ".bool",
            title: "bool",
        },

        //select单选控件(值可以是任意类型)
        {
            valueUrl: ".select",
            title: "select",
            mini: false,
            select: ["红色", {v: "#ff0000"}, "绿色", object.select, "蓝色", {v: "#0000ff"}],
            onchange: v => object.color = v.v, //Object{v}
        },

        //数值控件和迷你型单选控件
        {
            valueUrl: ".num",
            title: "num",
        },
        {
            valueUrl: ".selectM",
            title: "selectM",
            twoWayBind: true,
            select: ["零", 0, "一", 1, "二", 2],
            onchange: v => console.log(v), //v: number
        },
    ];

    const htui = new HTUI(object, data).visible().render();

 

结果图: