jmgraph 3.2.26 → 3.2.28

package/src/shapes/jmEllipse.js

@@ -1,9 +1,26 @@
+/**
+ * @fileoverview jmEllipse 椭圆类
+ * 
+ * jmEllipse 提供了椭圆图形的绘制功能。
+ * 椭圆是通过缩放圆形来实现的，支持完整的椭圆和椭圆弧。
+ * 
+ * 主要功能：
+ * - 椭圆绘制
+ * - 椭圆弧绘制
+ * - 支持 WebGL 和 Canvas 2D 模式
+ * 
+ * @module jmEllipse
+ * @author jmGraph Team
+ * @license MIT
+ */
+
 import {jmArc} from "./jmArc.js";
 
 /**
- * 画椭圆
- * 椭圆是通过缩放圆形来实现的，支持完整的椭圆和椭圆弧
- * 可以指定起始角度和结束角度来绘制椭圆弧
+ * 椭圆类
+ * 
+ * 绘制椭圆图形，继承自 jmArc。
+ * 可以指定起始角度和结束角度来绘制椭圆弧。
  *
  * @class jmEllipse
  * @extends jmArc
@@ -14,6 +31,15 @@ import {jmArc} from "./jmArc.js";
  * @param {number} [params.startAngle=0] 起始角度（弧度）
  * @param {number} [params.endAngle=Math.PI*2] 结束角度（弧度）
  * @param {boolean} [params.anticlockwise=false] 是否逆时针绘制
+ * 
+ * @example
+ * // 创建椭圆
+ * const ellipse = graph.createShape('ellipse', {
+ *     center: {x: 200, y: 200},
+ *     width: 200,
+ *     height: 100,
+ *     style: { fill: '#ff0000', stroke: '#000' }
+ * });
  */
 export default class jmEllipse extends jmArc {
 	

package/src/shapes/jmHArc.js

@@ -1,10 +1,47 @@
+/**
+ * @fileoverview jmHArc 空心圆弧类
+ * 
+ * jmHArc 提供了空心圆弧（圆环弧）的绘制功能。
+ * 由内圆和外圆两个半径定义，形成一个环形的弧。
+ * 
+ * 主要功能：
+ * - 空心圆弧绘制
+ * - 支持顺时针/逆时针绘制
+ * - 支持填充和描边
+ * 
+ * @module jmHArc
+ * @author jmGraph Team
+ * @license MIT
+ */
+
 import {jmArc} from "./jmArc.js";
+
 /**
- * 画空心圆弧,继承自jmPath
+ * 空心圆弧类
+ * 
+ * 绘制空心圆弧（圆环弧），继承自 jmArc。
+ * 由内圆半径和外圆半径定义环形区域。
  *
  * @class jmHArc
  * @extends jmArc
- * @param {object} params 空心圆参数:minRadius=中心小圆半径,maxRadius=大圆半径,start=起始角度,end=结束角度,anticlockwise=false  顺时针，true 逆时针
+ * @param {object} params 空心圆弧参数
+ * @param {object} [params.center] 圆弧中心点 {x, y}
+ * @param {number} [params.minRadius] 内圆半径
+ * @param {number} [params.maxRadius] 外圆半径
+ * @param {number} [params.start=0] 起始角度（弧度）
+ * @param {number} [params.end=Math.PI*2] 结束角度（弧度）
+ * @param {boolean} [params.anticlockwise=false] 是否逆时针绘制
+ * 
+ * @example
+ * // 创建空心圆弧
+ * const hArc = graph.createShape('hArc', {
+ *     center: {x: 200, y: 200},
+ *     minRadius: 30,
+ *     maxRadius: 50,
+ *     start: 0,
+ *     end: Math.PI,
+ *     style: { fill: '#ff0000' }
+ * });
  */
 
 export default class jmHArc extends jmArc {

package/src/shapes/jmImage.js

@@ -1,12 +1,58 @@
+/**
+ * @fileoverview jmImage 图片类
+ * 
+ * jmImage 提供了图片显示功能。
+ * 支持从 URL 或 Image 对象加载图片，支持图片裁剪和缩放。
+ * 
+ * 主要功能：
+ * - 图片加载和显示
+ * - 图片裁剪
+ * - 图片缩放
+ * - 支持 WebGL 和 Canvas 2D 模式
+ * 
+ * @module jmImage
+ * @author jmGraph Team
+ * @license MIT
+ */
+
 import {jmControl} from "../core/jmControl.js";
+
 /**
- * 图片控件，继承自jmControl
- * params参数中image为指定的图片源地址或图片img对象，
- * postion=当前控件的位置，width=其宽度，height=高度，sourcePosition=从当前图片中展示的位置，sourceWidth=从图片中截取的宽度,sourceHeight=从图片中截取的高度。
+ * 图片类
  * 
+ * 显示图片控件，支持从 URL 或 Image 对象加载图片。
+ * 支持图片裁剪和缩放功能。
+ *
  * @class jmImage
  * @extends jmControl
  * @param {object} params 控件参数
+ * @param {string|HTMLImageElement} [params.image] 图片源地址或图片对象
+ * @param {object} [params.position] 图片位置 {x, y}
+ * @param {number} [params.width] 图片显示宽度
+ * @param {number} [params.height] 图片显示高度
+ * @param {object} [params.sourcePosition] 图片裁剪起始位置 {x, y}
+ * @param {number} [params.sourceWidth] 图片裁剪宽度
+ * @param {number} [params.sourceHeight] 图片裁剪高度
+ * 
+ * @example
+ * // 从 URL 加载图片
+ * const img = graph.createShape('image', {
+ *     image: 'path/to/image.png',
+ *     position: {x: 100, y: 100},
+ *     width: 200,
+ *     height: 150
+ * });
+ * 
+ * // 裁剪图片
+ * const croppedImg = graph.createShape('image', {
+ *     image: 'path/to/sprite.png',
+ *     position: {x: 100, y: 100},
+ *     sourcePosition: {x: 0, y: 0},
+ *     sourceWidth: 50,
+ *     sourceHeight: 50,
+ *     width: 100,
+ *     height: 100
+ * });
  */
 export default class jmImage extends jmControl {
 

package/src/shapes/jmLabel.js

@@ -1,10 +1,49 @@
+/**
+ * @fileoverview jmLabel 文本标签类
+ * 
+ * jmLabel 提供了文本显示功能。
+ * 支持单行和多行文本，支持自动换行。
+ * 
+ * 主要功能：
+ * - 文本绘制
+ * - 自动换行
+ * - 文本对齐（水平/垂直）
+ * - 字体样式设置
+ * 
+ * @module jmLabel
+ * @author jmGraph Team
+ * @license MIT
+ */
+
 import {jmControl} from "../core/jmControl.js";
+
 /**
- * 显示文字控件
+ * 文本标签类
+ * 
+ * 显示文字控件，支持多种文本样式和对齐方式。
  *
  * @class jmLabel
  * @extends jmControl
- * @param {object} params params参数:style=样式，value=显示的文字
+ * @param {object} params 参数
+ * @param {string} [params.text=''] 显示的文字内容
+ * @param {object} [params.center] 文本中心点坐标
+ * @param {object} [params.style] 样式对象
+ * @param {string} [params.style.font] 字体样式
+ * @param {string} [params.style.textAlign='left'] 水平对齐方式
+ * @param {string} [params.style.textBaseline='middle'] 垂直对齐方式
+ * @param {number} [params.style.maxWidth] 最大宽度（用于自动换行）
+ * 
+ * @example
+ * // 创建文本标签
+ * const label = graph.createShape('label', {
+ *     position: {x: 100, y: 100},
+ *     text: 'Hello World',
+ *     style: {
+ *         fill: '#000',
+ *         font: '20px Arial',
+ *         textAlign: 'center'
+ *     }
+ * });
  */
 export default class jmLabel extends jmControl {
 

package/src/shapes/jmLine.js

@@ -1,10 +1,50 @@
+/**
+ * @fileoverview jmLine 直线类
+ * 
+ * jmLine 提供了直线图形的绘制功能，支持实线和虚线。
+ * 虚线支持自定义间隔长度。
+ * 
+ * 主要功能：
+ * - 直线绘制
+ * - 虚线模式
+ * - 自定义虚线间隔
+ * 
+ * @module jmLine
+ * @author jmGraph Team
+ * @license MIT
+ */
+
 import {jmPath} from "../core/jmPath.js";
+
 /**
- * 画一条直线
+ * 直线类
+ * 
+ * 绘制从起点到终点的直线，支持实线和虚线两种模式。
  *
  * @class jmLine
  * @extends jmPath
- * @param {object} params 直线参数:start=起始点,end=结束点,lineType=线类型(solid=实线，dotted=虚线),dashLength=虚线间隔(=4)
+ * @param {object} params 直线参数
+ * @param {object} [params.start] 起始点 {x, y}
+ * @param {object} [params.end] 结束点 {x, y}
+ * @param {string} [params.lineType='solid'] 线类型：'solid'=实线，'dotted'=虚线
+ * @param {number} [params.dashLength=4] 虚线间隔长度
+ * 
+ * @example
+ * // 创建实线
+ * const line = graph.createShape('line', {
+ *     start: {x: 0, y: 0},
+ *     end: {x: 100, y: 100},
+ *     style: { stroke: '#000', lineWidth: 2 }
+ * });
+ * 
+ * // 创建虚线
+ * const dottedLine = graph.createShape('line', {
+ *     start: {x: 0, y: 0},
+ *     end: {x: 100, y: 100},
+ *     lineType: 'dotted',
+ *     dashLength: 5,
+ *     style: { stroke: '#000' }
+ * });
  */
 export default class jmLine extends jmPath {	
 	

package/src/shapes/jmPolygon.js

@@ -1,9 +1,27 @@
+/**
+ * @fileoverview jmPolygon 多边形类
+ * 
+ * jmPolygon 提供了多边形图形的绘制功能。
+ * 支持规则多边形（正多边形）和自定义多边形。
+ * 
+ * 主要功能：
+ * - 规则多边形（正三角形、正方形、正五边形等）
+ * - 自定义多边形（通过顶点数组定义）
+ * - 填充和描边样式
+ * 
+ * @module jmPolygon
+ * @author jmGraph Team
+ * @license MIT
+ */
+
 import {jmPath} from "../core/jmPath.js";
 
 /**
- * 画多边形
- * 支持规则多边形（正多边形）和自定义多边形
- * 规则多边形通过边数和半径自动计算顶点，自定义多边形通过顶点数组定义
+ * 多边形类
+ * 
+ * 绘制多边形图形，支持规则多边形和自定义多边形。
+ * 规则多边形通过边数和半径自动计算顶点，
+ * 自定义多边形通过顶点数组定义。
  *
  * @class jmPolygon
  * @extends jmPath
@@ -12,6 +30,27 @@ import {jmPath} from "../core/jmPath.js";
  * @param {number} [params.sides=3] 多边形边数（3-100）
  * @param {number} [params.radius=50] 多边形半径（像素）
  * @param {object} [params.center={x:0,y:0}] 多边形中心点坐标
+ * 
+ * @example
+ * // 创建正六边形
+ * const hexagon = graph.createShape('polygon', {
+ *     center: {x: 200, y: 200},
+ *     sides: 6,
+ *     radius: 50,
+ *     style: { fill: '#ff0000', stroke: '#000' }
+ * });
+ * 
+ * // 创建自定义多边形
+ * const polygon = graph.createShape('polygon', {
+ *     points: [
+ *         {x: 100, y: 100},
+ *         {x: 200, y: 50},
+ *         {x: 300, y: 100},
+ *         {x: 250, y: 200},
+ *         {x: 150, y: 200}
+ *     ],
+ *     style: { fill: '#00ff00' }
+ * });
  */
 export default class jmPolygon extends jmPath {
 	

package/src/shapes/jmPrismatic.js

@@ -1,10 +1,42 @@
+/**
+ * @fileoverview jmPrismatic 棱形类
+ * 
+ * jmPrismatic 提供了棱形（菱形）图形的绘制功能。
+ * 棱形是一个四边形，其对角线互相垂直平分。
+ * 
+ * 主要功能：
+ * - 棱形绘制
+ * - 支持填充和描边
+ * - 自定义宽高
+ * 
+ * @module jmPrismatic
+ * @author jmGraph Team
+ * @license MIT
+ */
+
 import {jmPath} from "../core/jmPath.js";
+
 /**
- * 画棱形
+ * 棱形类
+ * 
+ * 绘制棱形（菱形）图形，继承自 jmPath。
+ * 棱形由中心点、宽度和高度定义。
  *
  * @class jmPrismatic
  * @extends jmPath
- * @param {object} params 参数 center=棱形中心点，width=棱形宽,height=棱形高
+ * @param {object} params 参数
+ * @param {object} [params.center] 棱形中心点 {x, y}
+ * @param {number} [params.width] 棱形宽度
+ * @param {number} [params.height] 棱形高度
+ * 
+ * @example
+ * // 创建棱形
+ * const prismatic = graph.createShape('prismatic', {
+ *     center: {x: 200, y: 200},
+ *     width: 100,
+ *     height: 80,
+ *     style: { fill: '#ff0000', stroke: '#000' }
+ * });
  */
 export default class jmPrismatic extends jmPath {	
 	

package/src/shapes/jmRect.js

@@ -1,14 +1,56 @@
+/**
+ * @fileoverview jmRect 矩形类
+ * 
+ * jmRect 提供了矩形图形的绘制功能，支持圆角矩形。
+ * 圆角支持四角独立设置，可以创建各种样式的矩形。
+ * 
+ * 主要功能：
+ * - 矩形绘制
+ * - 圆角矩形（支持四角独立圆角）
+ * - 虚线边框
+ * - 填充和描边样式
+ * 
+ * @module jmRect
+ * @author jmGraph Team
+ * @license MIT
+ */
+
 import {jmPath} from "../core/jmPath.js";
 import {jmArc} from './jmArc.js';
 import {jmLine} from './jmLine.js';
 
 /**
- * 画矩形
+ * 矩形类
+ * 
+ * 绘制矩形图形，支持圆角和虚线边框。
+ * 圆角可以统一设置或四角独立设置。
  *
  * @class jmRect
  * @extends jmPath
- * @param {object} params 参数 position=矩形左上角顶点坐标,width=宽，height=高,radius=边角弧度
- *   radius支持数字(四角相同)或对象 { topLeft, topRight, bottomRight, bottomLeft }
+ * @param {object} params 参数
+ * @param {object} [params.position] 矩形左上角顶点坐标 {x, y}
+ * @param {number} [params.width] 矩形宽度
+ * @param {number} [params.height] 矩形高度
+ * @param {number|object} [params.radius] 边角弧度，支持数字(四角相同)或对象 { topLeft, topRight, bottomRight, bottomLeft }
+ * 
+ * @example
+ * // 创建普通矩形
+ * const rect = graph.createShape('rect', {
+ *     position: {x: 100, y: 100},
+ *     width: 200,
+ *     height: 150,
+ *     style: { fill: '#ff0000', stroke: '#000' }
+ * });
+ * 
+ * // 创建圆角矩形
+ * const roundedRect = graph.createShape('rect', {
+ *     position: {x: 100, y: 100},
+ *     width: 200,
+ *     height: 150,
+ *     radius: 10,  // 四角统一圆角
+ *     // 或 radius: { topLeft: 5, topRight: 10, bottomRight: 15, bottomLeft: 20 }
+ *     style: { fill: '#00ff00' }
+ * });
  */ 
 export default class jmRect extends jmPath {		
 

package/src/shapes/jmResize.js

@@ -1,11 +1,49 @@
+/**
+ * @fileoverview jmResize 可缩放控件类
+ * 
+ * jmResize 提供了可缩放的矩形控件功能。
+ * 在矩形四边和四角添加可拖拽的控制点，实现图形的缩放和调整。
+ * 
+ * 主要功能：
+ * - 8个方向的控制点
+ * - 鼠标拖拽缩放
+ * - 支持旋转后的缩放
+ * - 自定义最小尺寸
+ * 
+ * @module jmResize
+ * @author jmGraph Team
+ * @license MIT
+ */
+
 import {jmRect} from "./jmRect.js";
+
 /**
- * 可拉伸的缩放控件
- * 继承jmRect
- * 如果此控件加入到了当前控制的对象的子控件中，请在参数中加入movable:false，否则导致当前控件会偏离被控制的控件。
+ * 可缩放控件类
+ * 
+ * 继承自 jmRect，在矩形四边和四角添加可拖拽的控制点。
+ * 用于实现图形的缩放和调整功能。
  *
  * @class jmResize
  * @extends jmRect
+ * @param {object} params 控件参数
+ * @param {boolean} [params.resizable=true] 是否可缩放
+ * @param {boolean} [params.movable] 是否可移动
+ * @param {number} [params.rectSize=8] 控制点大小
+ * 
+ * @example
+ * // 创建可缩放矩形
+ * const resize = graph.createShape('resize', {
+ *     position: {x: 100, y: 100},
+ *     width: 200,
+ *     height: 150,
+ *     resizable: true,
+ *     movable: true
+ * });
+ * 
+ * // 监听缩放事件
+ * resize.on('resize', (px, py, dx, dy) => {
+ *     console.log('缩放中', px, py, dx, dy);
+ * });
  */
 export default class jmResize extends jmRect {	
 
@@ -315,7 +353,7 @@ export default class jmResize extends jmRect {
 					break;
 				}
 				case 6: {
-					r.position.x = (newLocation.width - r.height) / 2;
+					r.position.x = (newLocation.width - r.width) / 2;
 					r.position.y = newLocation.height - r.height / 2;
 					break;
 				}

package/src/shapes/jmStar.js

@@ -1,18 +1,52 @@
+/**
+ * @fileoverview jmStar 星形类
+ * 
+ * jmStar 提供了星形图形的绘制功能。
+ * 支持自定义顶点数和内外半径，创建各种星形图案。
+ * 
+ * 主要功能：
+ * - 星形绘制
+ * - 自定义角数
+ * - 自定义内外半径
+ * 
+ * @module jmStar
+ * @author jmGraph Team
+ * @license MIT
+ */
+
 import {jmPath} from "../core/jmPath.js";
 
 /**
- * 画星形
- * 支持自定义顶点数和内外半径，创建各种星形图案
- * 星形由交替的外半径和内半径顶点组成
+ * 星形类
+ * 
+ * 绘制星形图形，支持自定义顶点数和内外半径。
+ * 星形由交替的外半径和内半径顶点组成。
  *
  * @class jmStar
  * @extends jmPath
  * @param {object} params 星形的参数
- * @param {array} [params.points] 自定义顶点数组，如果提供则忽略其他参数
  * @param {number} [params.points=5] 星形顶点数（角数，3-50）
  * @param {number} [params.radius=50] 星形外半径（从中心到尖角的距离）
  * @param {number} [params.innerRadius=25] 星形内半径（从中心到凹陷处的距离）
  * @param {object} [params.center={x:0,y:0}] 星形中心点坐标
+ * 
+ * @example
+ * // 创建五角星
+ * const star = graph.createShape('star', {
+ *     center: {x: 200, y: 200},
+ *     points: 5,
+ *     radius: 50,
+ *     innerRadius: 25,
+ *     style: { fill: '#ff0000', stroke: '#000' }
+ * });
+ * 
+ * // 创建六角星
+ * const hexStar = graph.createShape('star', {
+ *     center: {x: 200, y: 200},
+ *     points: 6,
+ *     radius: 60,
+ *     innerRadius: 30
+ * });
  */
 export default class jmStar extends jmPath {