jmgraph 3.2.20 → 3.2.22

package/src/core/jmGraph.js

@@ -3,10 +3,10 @@ import {jmList} from "./jmList.js";
 import {jmProperty} from './jmProperty.js';
 import {jmShadow} from "./jmShadow.js";
 import {jmGradient} from "./jmGradient.js";
+import {jmFilter} from "./jmFilter.js";
 import {jmEvents} from "./jmEvents.js";
 import {jmControl} from "./jmControl.js";
 import {jmPath} from "./jmPath.js";
-import {jmLayer} from "./jmLayer.js";
 
 /**
  * jmGraph画图类库
@@ -286,9 +286,7 @@ export default class jmGraph extends jmControl {
 		if(shape) {
 			if(!args) args = {};
 			args.graph = this;
-			let obj = new shape(args);
-			// 添加到活动图层
-			this.addShapeToLayer(obj);
+			const obj = new shape(args);
 			return obj;
 		}
 	}
@@ -414,13 +412,19 @@ export default class jmGraph extends jmControl {
 			this.context.clearRect(0, 0, w, h);
 		}
 		else if(this.mode === 'webgl' && this.context.clear) {
-			const color = this.style && this.style.fill? this.utils.hexToRGBA(this.style.fill): {
-				r: 0,
-				g: 0,
-				b: 0,
-				a: 0
-			};
-			this.context.clearColor(color.r, color.g, color.b, color.a); // 设置清空颜色缓冲时的颜色值
+			// 缓存 clearColor 对象，避免每帧创建
+			if(this.style && this.style.fill) {
+				const color = this.utils.hexToRGBA(this.style.fill);
+				this.__lastClearColor = color;
+				this.context.clearColor(color.r, color.g, color.b, color.a);
+			}
+			else if(!this.__lastClearColor) {
+				this.__lastClearColor = { r: 0, g: 0, b: 0, a: 0 };
+				this.context.clearColor(0, 0, 0, 0);
+			}
+			else {
+				this.context.clearColor(this.__lastClearColor.r, this.__lastClearColor.g, this.__lastClearColor.b, this.__lastClearColor.a);
+			}
         	this.context.clear(this.context.COLOR_BUFFER_BIT); // 清空颜色缓冲区，也就是清空画布
 		}
 	}
@@ -611,232 +615,6 @@ export default class jmGraph extends jmControl {
 		return this; // 支持链式调用
 	}
 
-	/**
-	 * 初始化图层系统
-	 * 创建图层管理的基础结构，包括默认图层
-	 * 
-	 * @method initLayers
-	 * @private
-	 */
-	initLayers() {
-		if(!this.layers) {
-			this.layers = new jmList();
-			// 创建默认图层
-			const defaultLayer = this.createLayer('Default Layer');
-			this.activeLayer = defaultLayer;
-		}
-	}
-
-	/**
-	 * 创建新图层
-	 * 图层用于组织和管理图形对象，支持可见性和锁定控制
-	 * 
-	 * @method createLayer
-	 * @param {string} name 图层名称（必须唯一）
-	 * @param {object} [options] 图层选项
-	 * @param {boolean} [options.visible=true] 图层是否可见
-	 * @param {boolean} [options.locked=false] 图层是否锁定（锁定后不可交互）
-	 * @return {jmLayer} 新创建的图层
-	 */
-	createLayer(name, options = {}) {
-		// 参数验证
-		if(!name || typeof name !== 'string') {
-			console.warn('jmGraph: createLayer - 图层名称必须是非空字符串');
-			name = `Layer_${Date.now()}`;
-		}
-		
-		this.initLayers();
-		
-		// 检查图层名称是否已存在
-		const existingLayer = this.getLayer(name);
-		if(existingLayer) {
-			console.warn(`jmGraph: 图层 "${name}" 已存在，将返回现有图层`);
-			return existingLayer;
-		}
-		
-		const layer = new jmLayer({
-			name: name,
-			graph: this,
-			...options
-		});
-		
-		this.layers.add(layer);
-		this.children.add(layer);
-		this.needUpdate = true;
-		return layer;
-	}
-
-	/**
-	 * 获取所有图层
-	 * 
-	 * @method getLayers
-	 * @return {jmList} 图层列表
-	 */
-	getLayers() {
-		this.initLayers();
-		return this.layers;
-	}
-
-	/**
-	 * 根据名称获取图层
-	 * 
-	 * @method getLayer
-	 * @param {string} name 图层名称
-	 * @return {jmLayer|null} 图层对象，如果不存在则返回null
-	 */
-	getLayer(name) {
-		this.initLayers();
-		
-		if(!name) return null;
-		
-		let result = null;
-		this.layers.each((i, layer) => {
-			if(layer.name === name) {
-				result = layer;
-				return false; // 找到后停止遍历
-			}
-		});
-		return result;
-	}
-
-	/**
-	 * 设置活动图层
-	 * 新创建的图形将自动添加到活动图层
-	 * 
-	 * @method setActiveLayer
-	 * @param {string|jmLayer} layer 图层名称或图层对象
-	 * @return {jmGraph} 返回当前实例，支持链式调用
-	 */
-	setActiveLayer(layer) {
-		this.initLayers();
-		
-		// 支持传入图层名称或图层对象
-		if(typeof layer === 'string') {
-			layer = this.getLayer(layer);
-		}
-		
-		if(!layer || !(layer instanceof jmLayer)) {
-			console.warn('jmGraph: setActiveLayer - 无效的图层');
-			return this;
-		}
-		
-		this.activeLayer = layer;
-		return this;
-	}
-
-	/**
-	 * 获取当前活动图层
-	 * 活动图层是新创建图形的默认容器
-	 * 
-	 * @method getActiveLayer
-	 * @return {jmLayer} 当前活动图层
-	 */
-	getActiveLayer() {
-		this.initLayers();
-		return this.activeLayer;
-	}
-
-	/**
-	 * 移除图层
-	 * 删除指定图层及其包含的所有图形
-	 * 注意：默认图层不可删除
-	 * 
-	 * @method removeLayer
-	 * @param {string|jmLayer} layer 图层名称或图层对象
-	 * @return {boolean} 是否成功删除
-	 */
-	removeLayer(layer) {
-		this.initLayers();
-		
-		// 支持传入图层名称或图层对象
-		if(typeof layer === 'string') {
-			layer = this.getLayer(layer);
-		}
-		
-		if(!layer) {
-			console.warn('jmGraph: removeLayer - 图层不存在');
-			return false;
-		}
-		
-		// 禁止删除默认图层
-		if(layer.name === 'Default Layer') {
-			console.warn('jmGraph: 不能删除默认图层');
-			return false;
-		}
-		
-		// 如果删除的是当前活动图层，切换到默认图层
-		if(this.activeLayer === layer) {
-			this.activeLayer = this.getLayer('Default Layer');
-		}
-		
-		this.layers.remove(layer);
-		this.children.remove(layer);
-		this.needUpdate = true;
-		return true;
-	}
-
-	/**
-	 * 将形状添加到指定图层
-	 * 如果未指定图层，则添加到当前活动图层
-	 * 
-	 * @method addShapeToLayer
-	 * @param {jmControl} shape 要添加的形状对象
-	 * @param {string|jmLayer} [layer] 图层名称或图层对象，默认为当前活动图层
-	 * @return {jmGraph} 返回当前实例，支持链式调用
-	 */
-	addShapeToLayer(shape, layer) {
-		this.initLayers();
-		
-		// 参数验证
-		if(!shape) {
-			console.warn('jmGraph: addShapeToLayer - 无效的形状对象');
-			return this;
-		}
-		
-		// 确定目标图层
-		if(!layer) {
-			layer = this.activeLayer;
-		} else if(typeof layer === 'string') {
-			layer = this.getLayer(layer);
-		}
-		
-		if(!layer) {
-			console.warn('jmGraph: addShapeToLayer - 图层不存在');
-			return this;
-		}
-		
-		layer.children.add(shape);
-		this.needUpdate = true;
-		return this;
-	}
-
-	/**
-	 * 从图层中移除形状
-	 * 
-	 * @method removeShapeFromLayer
-	 * @param {jmControl} shape 要移除的形状对象
-	 * @return {jmGraph} 返回当前实例，支持链式调用
-	 */
-	removeShapeFromLayer(shape) {
-		if(!shape) {
-			console.warn('jmGraph: removeShapeFromLayer - 无效的形状对象');
-			return this;
-		}
-		
-		// 从所有图层中查找并移除
-		if(this.layers) {
-			this.layers.each((i, layer) => {
-				if(layer.children.contains(shape)) {
-					layer.children.remove(shape);
-					this.needUpdate = true;
-					return false; // 找到后停止遍历
-				}
-			});
-		}
-		
-		return this;
-	}
-
 	/**
 	 * 保存为base64图形数据
 	 * 
@@ -903,48 +681,27 @@ export default class jmGraph extends jmControl {
 	}
 
 	/**
-	 * 转换为SVG字符串
-	 * 遍历所有图层和形状，生成SVG标记
-	 * 
+	 * 遍历所有形状，生成SVG标记
+	 *
 	 * @method toSVG
 	 * @return {string} SVG字符串
 	 */
 	toSVG() {
 		// SVG头部，包含命名空间和画布尺寸
 		let svg = `<svg width="${this.width}" height="${this.height}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${this.width} ${this.height}">`;
-		
+
 		// 添加背景色（如果有）
 		if(this.style && this.style.fill) {
 			svg += `<rect width="100%" height="100%" fill="${this.style.fill}"/>`;
 		}
-		
-		// 遍历所有图层
-		if(this.layers) {
-			this.layers.each((i, layer) => {
-				if(layer.visible) {
-					// 添加图层组，方便管理
-					svg += `<g id="${layer.name}" opacity="${layer.opacity || 1}">`;
-					
-					// 遍历图层中的所有形状
-					layer.children.each((j, shape) => {
-						if(shape.toSVG) {
-							svg += shape.toSVG();
-						}
-					});
-					
-					svg += '</g>';
-				}
-			});
-		}
-		else {
-			// 遍历直接添加的形状（兼容没有图层系统的情况）
-			this.children.each((i, shape) => {
-				if(shape.toSVG) {
-					svg += shape.toSVG();
-				}
-			});
-		}
-		
+
+		// 遍历所有直接添加的形状
+		this.children.each((i, shape) => {
+			if(shape.toSVG) {
+				svg += shape.toSVG();
+			}
+		});
+
 		svg += '</svg>';
 		return svg;
 	}
@@ -994,7 +751,7 @@ export default class jmGraph extends jmControl {
 			// 触发刷新事件
 			self.emit('update', time);
 
-			self.__requestAnimationFrameFunHandler && self.cancelAnimationFrame(self.__requestAnimationFrameFunHandler);
+			// 直接 requestAnimationFrame，无需先 cancel
 			self.__requestAnimationFrameFunHandler = self.requestAnimationFrame(update);
 			if(callback) callback();
 		}
@@ -1010,15 +767,15 @@ export default class jmGraph extends jmControl {
 	}
 }
 
-export { 
-	jmGraph, 
+export {
+	jmGraph,
 	jmUtils,
 	jmList,
 	jmProperty,
 	jmShadow,
 	jmGradient,
+	jmFilter,
 	jmEvents,
 	jmControl,
 	jmPath,
-	jmLayer,
  };

package/src/core/jmUtils.js

@@ -165,66 +165,75 @@ export default class jmUtils {
      * @param {function} copyHandler 复制对象回调，如果返回undefined，就走后面的逻辑，否则到这里中止
      * @return {object} 参数source的拷贝对象
      */
-    static clone(source, target, deep = false, copyHandler = null, deepIndex = 0) {
+    static clone(source, target, deep = false, copyHandler = null, deepIndex = 0, cloned = null) {
         // 如果有指定回调，则用回调处理，否则走后面的复制逻辑
         if(typeof copyHandler === 'function') {
             const obj = copyHandler(source, deep, deepIndex);
             if(obj) return obj;
         }
-        deepIndex++; // 每执行一次，需要判断最大拷贝深度        
+
+        // 首次调用时初始化克隆映射表（用于处理循环引用）
+        if(!cloned) cloned = new WeakMap();
 
         if(typeof target === 'boolean') {
             deep = target;
             target = undefined;
         }
 
-        // 超过100拷贝深度，直接返回
-        if(deepIndex > 100) {
-            return target;
+        // 非对象直接返回
+        if(!source || typeof source !== 'object') {
+            return typeof target !== 'undefined' ? target : source;
         }
 
-        if(source && typeof source === 'object') {
-            target = target || {};
+        // 如果source已经被克隆过，直接返回之前的克隆对象，打破循环引用
+        if(cloned.has(source)) return cloned.get(source);
 
+        // 数组处理
+        if(Array.isArray(source)) {
             //如果为当前泛型，则直接new
             if(this.isType(source, jmList)) {
                 return new jmList(source);
             }
-            else if(Array.isArray(source)) {
-                //如果是深度复，则拷贝每个对象
-                if(deep) {
-                    let dest = [];
-                    for(let i=0; i<source.length; i++) {
-                        dest.push(this.clone(source[i], target[i], deep, copyHandler, deepIndex));
-                    }
-                    return dest;
-                }
-                return source.slice(0);
-            }
-           
-            if(source.__proto__) target.__proto__ = source.__proto__;
-            
-            for(let k in source) {
-                if(k === 'constructor') continue;
-                const v = source[k];
-                // 不复制页面元素和class对象
-                if(v && (v.tagName || v.getContext)) {
-                    target[k] = v;
-                    continue;
-                }
-
-                // 如果不是对象和空，则采用target的属性
-                if(typeof target[k] === 'object' || typeof target[k] === 'undefined') {                    
-                    target[k] = this.clone(v, target[k], deep, copyHandler, deepIndex);
+            if(deep) {
+                let dest = [];
+                cloned.set(source, dest);
+                for(let i = 0; i < source.length; i++) {
+                    dest.push(this.clone(source[i], undefined, deep, copyHandler, deepIndex + 1, cloned));
                 }
+                return dest;
             }
-            return target;
+            return source.slice(0);
         }
-        else if(typeof target != 'undefined') {
-            return target;
+
+        // 不复制页面元素和class对象（如jmControl实例等复杂对象保持引用）
+        if(source.tagName || source.getContext || source.emit) {
+            return source;
         }
 
-        return source;
+        // 普通对象处理
+        target = target || {};
+        cloned.set(source, target);
+
+        // 保持原型链一致
+        if(source.__proto__) target.__proto__ = source.__proto__;
+        
+        // 遍历自身可枚举属性（字符串键 + Symbol键），避免触发原型链上宿主对象的getter
+        const keys = Object.keys(source).concat(Object.getOwnPropertySymbols(source));
+        for(const k of keys) {
+            if(k === 'constructor') continue;
+            const v = source[k];
+            // 不复制页面元素和class对象
+            if(v && (v.tagName || v.getContext || v.emit)) {
+                target[k] = v;
+                continue;
+            }
+
+            // 如果不是对象和空，则采用target的属性
+            if(typeof target[k] === 'object' || typeof target[k] === 'undefined') {                    
+                target[k] = this.clone(v, target[k], deep, copyHandler, deepIndex + 1, cloned);
+            }
+        }
+        return target;
     }
 
     /**

package/src/lib/webgl/base.js

@@ -265,7 +265,6 @@ class WeblBase {
 
     // 创建程序
     createProgram(vertexSrc, fragmentSrc) {        
-        this.context.lineWidth(1);
         return createProgram(this.context, vertexSrc, fragmentSrc);
     }
 
@@ -378,7 +377,9 @@ class WeblBase {
     // polygonIndices 顶点索引，
     earCutPointsToTriangles(points) {
         this.earCutCache = this.earCutCache || (this.earCutCache = {});
-        const key = JSON.stringify(points);
+        // 快速缓存 key：用长度和首尾点坐标
+        const len = points.length;
+        const key = len + '_' + points[0].x + '_' + points[0].y + '_' + points[len-1].x + '_' + points[len-1].y;
         if (this.earCutCache[key]) return this.earCutCache[key];
 
         const ps = this.earCutPoints(points);// 切割得到3角色顶点索引，
@@ -473,31 +474,11 @@ class WeblBase {
 
         this.textureContext.fillStyle = fillStyle;
 
-        this.textureContext.beginPath();
+        // 规则图形用 fillRect，比 beginPath/lineTo/fill 快
         if(!points || !points.length) {
-            points = [];
-            points.push({
-                x: bounds.left,
-                y: bounds.top
-            });
-            points.push({
-                x: bounds.left + bounds.width,
-                y: bounds.top
-            });
-            points.push({
-                x: bounds.left + bounds.width,
-                y: bounds.top + bounds.height
-            });
-            points.push({
-                x: bounds.left,
-                y: bounds.top + bounds.height
-            });
-            points.push({
-                x: bounds.left,
-                y: bounds.top
-            });
-        }
-        if(points && points.length) {
+            this.textureContext.fillRect(0, 0, bounds.width, bounds.height);
+        } else {
+            this.textureContext.beginPath();
             for(const p of points) {
                 //移至当前坐标
                 if(p.m) {
@@ -506,17 +487,10 @@ class WeblBase {
                 else {
                     this.textureContext.lineTo(p.x - bounds.left, p.y - bounds.top);
                 }			
-            }	
-        }
-        else {
-            this.textureContext.moveTo(0, 0);
-            this.textureContext.lineTo(bounds.width, 0);
-            this.textureContext.lineTo(bounds.width, bounds.height);
-            this.textureContext.lineTo(0, bounds.height);
-            this.textureContext.lineTo(0, 0);
+            }
+            this.textureContext.closePath();
+            this.textureContext.fill();
         }
-        this.textureContext.closePath();
-        this.textureContext.fill();
 
         const data = this.textureContext.getImageData(0, 0, canvas.width, canvas.height);
         return {

package/src/lib/webgl/gradient.js

@@ -53,8 +53,14 @@ class WebglGradient {
 
     // 转为渐变为纹理
     toImageData(control, bounds, points=null) {
-        //const key = this.key || this.toString();
-        //if(WebglGradientTextureCache[key]) return WebglGradientTextureCache[key];
+        // 缓存基于渐变参数（不含 bounds，因为同一个渐变只是位置不同时纹理相同）
+        const gradientKey = this.toString();
+        if(this.__cachedData && this.__cacheKey === gradientKey && 
+           this.__cachedData.data && this.__cachedData.data.width === Math.ceil(bounds.width) &&
+           this.__cachedData.data.data && this.__cachedData.data.data.height === Math.ceil(bounds.height)) {
+            return this.__cachedData;
+        }
+
         if(!control.textureContext) {
             return null;
         }
@@ -72,11 +78,18 @@ class WebglGradient {
         
         const data = control.toFillTexture(gradient, bounds, points);
 
-        //WebglGradientTextureCache[key] = data;
+        this.__cachedData = data;
+        this.__cacheKey = gradientKey;
 
         return data;
     }
 
+    // 当渐变参数变化时使缓存失效
+    invalidateCache() {
+        this.__cachedData = null;
+        this.__cacheKey = null;
+    }
+
     // 根据绘制图形的坐标计算出对应点的颜色
     /*
     toPointColors(points) {

package/src/lib/webgl/index.js

@@ -105,12 +105,13 @@ class webgl {
         // 由具体的绘制方法处理
     }
 
-    // 测量文本宽度
+    // 测量文本宽度（复用纹理 canvas 的 context）
     measureText(text) {
-        // 使用 2D canvas 测量
+        const ctx = this.base.textureContext;
+        if(ctx && ctx.measureText) return ctx.measureText(text);
         const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
-        return ctx.measureText(text);
+        const ctx2 = canvas.getContext('2d');
+        return ctx2.measureText(text);
     }
 
     // 创建线性渐变