jmgraph 3.2.2 → 3.2.3

package/src/core/jmPath.js

@@ -13,7 +13,7 @@ export default class jmPath extends jmControl {
 	constructor(params, t='jmPath') {
 		super(params, t);		
 		this.points = params && params.points ? params.points : [];	
-		
+		this.polygonIndices = params && params.polygonIndices ? params.polygonIndices : [];	
 	}
 	
 	/**
@@ -23,13 +23,29 @@ export default class jmPath extends jmControl {
 	 * @type {array}
 	 */
 	get points() {
-		let s = this.__pro('points');
+		let s = this.property('points');
 		return s;
 	}
 	set points(v) {
 		this.needUpdate = true;
-		return this.__pro('points', v);
+		return this.property('points', v);
 	}
+
+	/**
+	 * 顶点数组索引，对应points中的顶点
+	 * @property polygonIndices
+	 * @type {array} 
+	 */
+	get polygonIndices() {
+		let s = this.property('polygonIndices');
+		return s;
+	}
+	set polygonIndices(v) {
+		this.needUpdate = true;
+		return this.property('polygonIndices', v);
+	}
+	
+	
 }
 
 export { jmPath };

package/src/core/jmProperty.js

@@ -13,31 +13,31 @@ const PROPERTY_KEY = Symbol("properties");
  */
 export default class jmProperty extends jmObject {		
 	
-	constructor() {
+	constructor(params) {
 		super();
-		
 		this[PROPERTY_KEY] = {};
+		if(params && params.mode) this.mode = params.mode;
 	}
 
 	/**
 	 * 基础属性读写接口
-	 * @method __pro
+	 * @method property
 	 * @param {string} name 属性名
 	 * @param {any} value 属性的值
 	 * @returns {any} 属性的值
 	 */
-	__pro(...pars) {
+	 property(...pars) {
 		if(pars) {
-			let pros = this[PROPERTY_KEY];
-			let name = pars[0];
+			const pros = this[PROPERTY_KEY];
+			const name = pars[0];
 			if(pars.length > 1) {
-				let value = pars[1];
-				let args = {oldValue: pros[name], newValue: value};
+				const value = pars[1];
+				const args = {oldValue: pros[name], newValue: value};
 				pros[name] = pars[1];
 				if(this.emit) this.emit('propertyChange', name, args);
 				return pars[1];
 			}
-			else if(pars.length == 1) {
+			else if(name) {
 				return pros[name];
 			}
 		}
@@ -49,10 +49,10 @@ export default class jmProperty extends jmObject {
 	 * @type {boolean}
 	 */
 	get needUpdate() {
-		return this.__pro('needUpdate');
+		return this.property('needUpdate');
 	}
 	set needUpdate(v) {
-		this.__pro('needUpdate', v);
+		this.property('needUpdate', v);
 		//子控件属性改变，需要更新整个画板
 		if(v && !this.is('jmGraph') && this.graph) {
 			this.graph.needUpdate = true;
@@ -65,12 +65,27 @@ export default class jmProperty extends jmObject {
 	 * @type {jmGraph}
 	 */
 	get graph() {
-		let g = this.__pro('graph');
-		g = g || (this.__pro('graph', this.findParent('jmGraph')));
+		let g = this.property('graph');
+		g = g || (this.property('graph', this.findParent('jmGraph')));
 		return g;
 	}
 	set graph(v) {
-		return this.__pro('graph', v);
+		return this.property('graph', v);
+	}
+
+	/**
+	 * 绘制模式 2d/webgl
+	 * @property mode
+	 * @type {string}
+	 */
+	get mode() {
+		let m = this.property('mode');
+		if(m) return m;
+		else if(this.is('jmGraph')) return this.property('mode');		
+		return this.graph.mode;
+	}
+	set mode(v) {
+		return this.property('mode', v);
 	}
 
 	/**

package/src/core/jmUtils.js

@@ -1,6 +1,151 @@
 
 import { jmList } from './jmList.js';
 
+const colorKeywords = {
+    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",
+    cornflowerblue:       "#6495ed",
+    cornsilk:             "#fff8dc",
+    crimson:              "#dc143c",
+    cyan:                 "#00ffff",
+    darkblue:             "#00008b",
+    darkcyan:             "#008b8b",
+    darkgoldenrod:        "#b8860b",
+    darkgray:             "#a9a9a9",
+    darkgreen:            "#006400",
+    darkkhaki:            "#bdb76b",
+    darkmagenta:          "#8b008b",
+    darkolivegreen:       "#556b2f",
+    darkorange:           "#ff8c00",
+    darkorchid:           "#9932cc",
+    darkred:              "#8b0000",
+    darksalmon:           "#e9967a",
+    darkseagreen:         "#8fbc8f",
+    darkslateblue:        "#483d8b",
+    darkslategray:        "#2f4f4f",
+    darkturquoise:        "#00ced1",
+    darkviolet:           "#9400d3",
+    deeppink:             "#ff1493",
+    deepskyblue:          "#00bfff",
+    dimgray:              "#696969",
+    dodgerblue:           "#1e90ff",
+    firebrick:            "#b22222",
+    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",
+    lightgrey:            "#d3d3d3",
+    lightgreen:           "#90ee90",
+    lightpink:            "#ffb6c1",
+    lightsalmon:          "#ffa07a",
+    lightseagreen:        "#20b2aa",
+    lightskyblue:         "#87cefa",
+    lightslategray:       "#778899",
+    lightsteelblue:       "#b0c4de",
+    lightyellow:          "#ffffe0",
+    lime:                 "#00ff00",
+    limegreen:            "#32cd32",
+    linen:                "#faf0e6",
+    magenta:              "#ff00ff",
+    maroon:               "#800000",
+    mediumaquamarine:     "#66cdaa",
+    mediumblue:           "#0000cd",
+    mediumorchid:         "#ba55d3",
+    mediumpurple:         "#9370d8",
+    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:        "#d87093",
+    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",
+    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",
+    transparent:          "rgba(0,0,0,0)"
+  };
+
 /**
  * 画图基础对象
  * 当前库的工具类
@@ -63,7 +208,10 @@ export default class jmUtils {
                 if(k === 'constructor') continue;
                 const v = source[k];
                 // 不复制页面元素和class对象
-                if(v && (v.tagName || v.getContext)) continue;
+                if(v && (v.tagName || v.getContext)) {
+                    target[k] = v;
+                    continue;
+                }
 
                 // 如果不是对象和空，则采用target的属性
                 if(typeof target[k] === 'object' || typeof target[k] === 'undefined') {                    
@@ -613,65 +761,104 @@ export default class jmUtils {
      * @param {string}} hex 16进度的颜色
      */
     static hexToRGBA(hex) {
-        hex = this.trim(hex);        
+        if(typeof hex === 'string') hex = this.trim(hex);   
+        else return hex;
+
+        // 如果缓存存在，则直接返回
+        this.__hexToRGBA_Cache = this.__hexToRGBA_Cache || {};
+        if(this.__hexToRGBA_Cache[hex]) return this.__hexToRGBA_Cache[hex];
+
+        let res = hex;
+
+        // 系统颜色
+        if(colorKeywords[res]) res = colorKeywords[res];
 
         //当为7位时，表示需要转为带透明度的rgba
-        if(hex[0] == '#') {
+        if(res[0] == '#') {
             const color = {
                 a: 1
             };
-            if(hex.length >= 8) {
-                color.a = hex.substr(1,2);
-                color.g = hex.substr(5,2);
-                color.b = hex.substr(7,2);
-                color.r = hex.substr(3,2);
+            if(res.length >= 8) {
+                color.a = res.substr(1,2);
+                color.g = res.substr(5,2);
+                color.b = res.substr(7,2);
+                color.r = res.substr(3,2);
                 //透明度
-                color.a = (this.hexToNumber(color.a) / 255).toFixed(4);
+                color.a = Number((this.hexToNumber(color.a) / 255).toFixed(4));
 
                 color.r = this.hexToNumber(color.r||0);
                 color.g = this.hexToNumber(color.g||0);
                 color.b = this.hexToNumber(color.b||0);
-                return color; 
+                res = color; 
             }
             // #cccccc || #ccc
-            else if(hex.length === 7 || hex.length === 4) {
+            else if(res.length === 7 || res.length === 4) {
                 // #ccc这种情况，把每个位复制一份
-                if(hex.length === 4) {
-                    color.g = hex.substr(2, 1);
+                if(res.length === 4) {
+                    color.g = res.substr(2, 1);
                     color.g = color.g + color.g;
-                    color.b = hex.substr(3, 1);
+                    color.b = res.substr(3, 1);
                     color.b = color.b + color.b;
-                    color.r = hex.substr(1, 1);
+                    color.r = res.substr(1, 1);
                     color.r = color.r + color.r;
                 }
                 else {
-                    color.g = hex.substr(3, 2);//除#号外的第二位
-                    color.b = hex.substr(5, 2);
-                    color.r = hex.substr(1, 2);
+                    color.g = res.substr(3, 2);//除#号外的第二位
+                    color.b = res.substr(5, 2);
+                    color.r = res.substr(1, 2);
                 }
 
                 color.r = this.hexToNumber(color.r||0);
                 color.g = this.hexToNumber(color.g||0);
                 color.b = this.hexToNumber(color.b||0);
                 
-                return color; 
+                res = color; 
             }
             //如果是5位的话，# 则第2位表示A，后面依次是r,g,b
-            else if(hex.length === 5) {
-                color.a = hex.substr(1,1);
-                color.g = hex.substr(3,1);//除#号外的第二位
-                color.b = hex.substr(4,1);
-                color.r = hex.substr(2,1);
+            else if(res.length === 5) {
+                color.a = res.substr(1,1);
+                color.g = res.substr(3,1);//除#号外的第二位
+                color.b = res.substr(4,1);
+                color.r = res.substr(2,1);
 
                 color.r = this.hexToNumber(color.r||0);
                 color.g = this.hexToNumber(color.g||0);
                 color.b = this.hexToNumber(color.b||0);
                 //透明度
-                color.a = (this.hexToNumber(color.a) / 255).toFixed(4);
-                return color; 
+                color.a = Number((this.hexToNumber(color.a) / 255).toFixed(4));
+                res = color; 
             }
         }  
-        return hex;     
+        if(typeof res === 'string') {
+            const m = res.match(/rgb(a)?\s*\(\s*([\d\.]+)\s*,\s*([\d\.]+)\s*,\s*([\d\.]+)\s*(,\s*[\d\.]+)?\s*\)/i); 
+            if(m && m.length === 6) {
+                const color = {
+                    r: Number(m[2]),
+                    g: Number(m[3]),
+                    b: Number(m[4]),
+                    a: Number(this.trimStart(m[5]||'1', ','))
+                };
+                res = color;
+            }
+        }
+        return this.__hexToRGBA_Cache[hex] = res;     
+    }
+
+    /**
+     * 把255的rgb值转为0-1的值
+     * @param {rgba} color 颜色
+     */
+    static rgbToDecimal(color) {
+        color = this.clone(color);
+        color.r = this.byteToDecimal(color.r);
+        color.g = this.byteToDecimal(color.g);
+        color.b = this.byteToDecimal(color.b);
+        return color;
+    }
+
+    //255值转为0-1的小数
+    static byteToDecimal(b) {
+        return b / 255;
     }
 
     /**
@@ -691,10 +878,10 @@ export default class jmUtils {
             const color = this.hexToRGBA(r);
             if(typeof color === 'string') return color;
             
-            r = color.r || r;
-            g = color.g || g;
-            b = color.b || b;
-            a = color.a || a;
+            r = typeof color.r !== 'undefined'? color.r: r;
+            g = typeof color.g !== 'undefined'? color.g: g;
+            b = typeof color.b !== 'undefined'? color.b: b;
+            a = typeof color.a !== 'undefined'? color.a: a;
         }
         if(typeof r != 'undefined' && typeof g != 'undefined' && typeof b != 'undefined') {
             if(typeof a != 'undefined') {