npm - jmgraph - Versions diffs - 3.2.16 → 3.2.18 - Mend

jmgraph 3.2.16 → 3.2.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (77) hide show

package/LICENSE +21 -21
package/README.md +251 -428
package/build/gulpfile.js +142 -142
package/build/package-lock.json +10666 -0
package/build/package.json +71 -71
package/dev.js +9 -9
package/dist/jmgraph.core.min.js +1 -1
package/dist/jmgraph.core.min.js.map +1 -1
package/dist/jmgraph.js +3500 -2668
package/dist/jmgraph.min.js +1 -1
package/example/ball.html +216 -216
package/example/base.html +111 -111
package/example/canvas.html +53 -53
package/example/cell.html +283 -283
package/example/controls/arc.html +128 -128
package/example/controls/arrowline.html +77 -77
package/example/controls/bezier.html +298 -298
package/example/controls/img.html +96 -96
package/example/controls/label.html +86 -86
package/example/controls/line.html +172 -172
package/example/controls/prismatic.html +62 -62
package/example/controls/rect.html +63 -63
package/example/controls/resize.html +111 -111
package/example/controls/test.html +359 -359
package/example/es.html +69 -69
package/example/es5module.html +62 -63
package/example/heartarc.html +115 -115
package/example/index.html +46 -46
package/example/js/require.js +4 -4
package/example/love/img/bling/bling.tps +265 -265
package/example/love/img/bling.json +87 -87
package/example/love/img/bling.tps +295 -295
package/example/love/img/love.json +95 -95
package/example/love/img/love.tps +315 -315
package/example/love/img/qq/qq.tps +399 -399
package/example/love/img/qq.json +242 -242
package/example/love/index.html +40 -40
package/example/love/js/game.js +558 -558
package/example/music.html +210 -210
package/example/node/test.js +137 -137
package/example/pdf.html +186 -186
package/example/progress.html +172 -172
package/example/pso.html +147 -147
package/example/sort.html +804 -815
package/example/tweenjs.html +83 -83
package/example/webgl.html +278 -278
package/example/xfj/index.html +331 -331
package/example/xfj/shake.js +48 -48
package/example/xfj/testori.html +75 -75
package/index.js +99 -99
package/package.json +58 -56
package/src/core/jmControl.js +1376 -1531
package/src/core/jmEvents.js +240 -281
package/src/core/jmGradient.js +231 -231
package/src/core/jmGraph.js +569 -569
package/src/core/jmList.js +92 -157
package/src/core/jmObject.js +83 -103
package/src/core/jmPath.js +35 -35
package/src/core/jmProperty.js +71 -110
package/src/core/jmShadow.js +65 -65
package/src/core/jmUtils.js +906 -919
package/src/lib/earcut.js +680 -680
package/src/lib/earcut.md +73 -73
package/src/lib/webgl/base.js +522 -452
package/src/lib/webgl/core/buffer.js +48 -48
package/src/lib/webgl/core/mapSize.js +40 -40
package/src/lib/webgl/core/mapType.js +43 -43
package/src/lib/webgl/core/program.js +138 -138
package/src/lib/webgl/core/shader.js +13 -13
package/src/lib/webgl/core/texture.js +60 -60
package/src/lib/webgl/gradient.js +168 -168
package/src/lib/webgl/index.js +137 -11
package/src/lib/webgl/path.js +568 -561
package/src/shapes/jmArrowLine.js +36 -36
package/src/shapes/jmImage.js +244 -244
package/src/shapes/jmLabel.js +271 -271
package/src/shapes/jmResize.js +332 -330

package/example/controls/test.html CHANGED Viewed

@@ -1,360 +1,360 @@
-<!doctype html>
-<html>
-	<head>
-	<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
-	<meta name="viewport" content="width=device-width,initial-scale=1">
-	<style>
-		html,body{
-			margin:0;
-			padding: 0;
-		}
-		#mycanvas_container{
-			overflow: hidden;
-		}
-	</style>
-	</head>
-	<body>
-		<div id="mycanvas_container"></div>
-	</body>
-    <script type="module">
-        import {jmGraph} from "../../index.js";
-        import {jmRect} from "../../src/shapes/jmRect.js";
-        import {jmPath} from "../../src/core/jmPath.js";
-    /**
-     * 测试
-     */
-    class jmTest extends jmPath {
-        constructor(params) {
-            if(!params) params = {};
-            super(params);
-            this.center = params.center || {x:0, y:0};
-            this.radius = params.radius || 0;
-        }
-        //定义属性
-        /**
-         * 中心点
-         * point格式：{x:0,y:0,m:true}
-         * @property center
-         * @type {point}
-         */
-        get center() {
-            return this.property('center');
-        }
-        set center(v) {
-            return this.property('center', v);
-        }
-        /**
-        * 中心点
-        * point格式：{x:0,y:0,m:true}
-        * @property center
-        * @type {point}
-        */
-        get radius() {
-            return this.property('radius');
-        }
-        set radius(v) {
-            return this.property('radius', v);
-        }
-        /**
-        * 初始化图形点
-        * 控件都是由点形成
-        *
-        * @method initPoint
-        * @private
-        * @for jmArc
-        */
-        initPoints() {
-            //可以获取当前控件的左上坐标，可以用来画相对位置
-            var location = this.getLocation();//获取位置参数
-            var cx = location.center.x ;
-            var cy = location.center.y ;
-            this.points = [];
-            //简单的画一个X
-            //根据半径计算x,y偏移量
-            //由于是圆，偏移量相同
-            var offw = Math.sqrt(location.radius * location.radius / 2);
-            //左上角到右下角对角线
-            this.points.push({x:cx - offw, y:cy-offw}, {x:cx + offw, y:cy+offw});
-            //左下角到右上角对角线
-            //画完上面的线后，需要重新移到这条线的起点，指定m:true即可
-            this.points.push({x:cx - offw, y:cy+offw, m:true}, {x:cx + offw, y:cy-offw});
-            return this.points;
-        }
-    }
-    // 图片裁剪框
-    class ImageEditCover extends jmPath {
-    constructor(params = {}) {
-        super(params);
-        this.style.close = this.style.close || true;
-        this.init(params);
-    }
-    // 初始化控件元素
-    init(params) {
-        this.width = this.width || '100%';
-        this.height = this.height || '100%';
-        // 生成层
-        const rectStyle = {
-            stroke: 'transparent',
-            fill: 'rgba(100,100,100,0.4)',
-            lineWidth: 0.1,
-            zIndex: 1,
-        };
-        const graph = (this.graph || params.graph);
-        const leftRect = graph.createShape(jmRect, {
-            position:{x:0, y:0 },
-            width: 0,
-            height: '100%',
-            style: rectStyle,
-            interactive: false
-        });
-        const topRect = graph.createShape(jmRect, {
-            position:{x:0, y:0 },
-            width: '100%',
-            height: 0,
-            style: rectStyle,
-            interactive: false
-        });
-        const rightRect = graph.createShape(jmRect, {
-            position:{x:0, y:0 },
-            width: 0,
-            height: '100%',
-            style: rectStyle,
-            interactive: false
-        });
-        const bottomRect = graph.createShape(jmRect, {
-            position:{x:0, y:0 },
-            width: '100%',
-            height: 0,
-            style: rectStyle,
-            interactive: false
-        });
-        this.rects.push(leftRect, topRect, rightRect, bottomRect);
-        this.children.add(leftRect);
-        this.children.add(topRect);
-        this.children.add(rightRect);
-        this.children.add(bottomRect);
-        const controlStyle = {
-            lineWidth: 3,
-            stroke: '#fff',
-            zIndex: 100,
-        }
-        const c1 = graph.createShape(jmPath, {
-            style: controlStyle,
-            interactive: true
-        });
-        const c2 = graph.createShape(jmPath, {
-            style: controlStyle,
-            interactive: true
-        });
-        const c3 = graph.createShape(jmPath, {
-            style: controlStyle,
-            interactive: true
-        });
-        const c4 = graph.createShape(jmPath, {
-            style: controlStyle,
-            interactive: true
-        });
-        this.controls.push(c1, c2, c3, c4);
-        this.children.add(c1);
-        this.children.add(c2);
-        this.children.add(c3);
-        this.children.add(c4);
-        c1.canMove(true);
-        c2.canMove(true);
-        c3.canMove(true);
-        c4.canMove(true);
-    }
-    // 裁剪的目录区域
-    // 最终改变结果也是这个参数
-    targetBounds = {
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0
-    }
-    rects = [];
-    // 操作折角
-    controls = [];
-    /**
-     * 初始化图形点
-     * 控件都是由点形成
-     *
-     * @method initPoint
-     * @private
-     * @for jmArc
-     */
-    initPoints() {
-        //可以获取当前控件的左上坐标，可以用来画相对位置
-        const location = this.getLocation();//获取位置参数
-        const targetLeft = location.width / 2 - this.targetBounds.width / 2;
-        const targetRight = location.width / 2 + this.targetBounds.width / 2;
-        const targetBottom = this.targetBounds.y + this.targetBounds.height;
-        this.rects[0].width = targetLeft + 0.1;
-        this.rects[1].height = this.targetBounds.y;
-        this.rects[1].width = this.targetBounds.width + 0.1;
-        this.rects[1].position.x = targetLeft;
-        this.rects[2].width = location.width - targetRight;
-        this.rects[2].position.x = targetRight;
-        this.rects[3].height = location.height - targetBottom;
-        this.rects[3].width = this.targetBounds.width + 0.1;
-        this.rects[3].position.x = targetLeft;
-        this.rects[3].position.y = targetBottom;
-        return this.points;
-    }
-    resetControlsPosition() {
-        //可以获取当前控件的左上坐标，可以用来画相对位置
-        const location = this.getLocation();//获取位置参数
-        const targetLeft = location.width / 2 - this.targetBounds.width / 2;
-        const targetRight = location.width / 2 + this.targetBounds.width / 2;
-        const targetBottom = this.targetBounds.y + this.targetBounds.height;
-        // 操作折角位置
-        const controlWidth = 10;
-        const controlLineWidth = this.controls[0].style.lineWidth || 2;
-        this.controls[0].points = [
-            {
-            x: targetLeft - controlLineWidth/2,
-            y: this.targetBounds.y + controlWidth
-            },
-            {
-            x: targetLeft - controlLineWidth/2,
-            y: this.targetBounds.y - controlLineWidth/2
-            },
-            {
-            x: targetLeft + controlWidth,
-            y: this.targetBounds.y - controlLineWidth/2
-            }
-        ];
-        this.controls[1].points = [
-            {
-            x: targetRight - controlWidth,
-            y: this.targetBounds.y - controlLineWidth/2
-            },
-            {
-            x: targetRight + controlLineWidth/2,
-            y: this.targetBounds.y - controlLineWidth/2
-            },
-            {
-            x: targetRight + controlLineWidth/2,
-            y: this.targetBounds.y + controlWidth
-            }
-        ];
-        this.controls[2].points = [
-            {
-            x: targetRight - controlWidth,
-            y: targetBottom  + controlLineWidth/2
-            },
-            {
-            x: targetRight + controlLineWidth/2,
-            y: targetBottom + controlLineWidth/2
-            },
-            {
-            x: targetRight + controlLineWidth/2,
-            y: targetBottom - controlWidth
-            }
-        ];
-        this.controls[3].points = [
-            {
-            x: targetLeft - controlLineWidth/2,
-            y: targetBottom - controlWidth
-            },
-            {
-            x: targetLeft - controlLineWidth/2,
-            y: targetBottom + controlLineWidth/2
-            },
-            {
-            x: targetLeft + controlWidth,
-            y: targetBottom + controlLineWidth/2
-            }
-        ];
-    }
-    }
-    var container = document.getElementById('mycanvas_container');
-    var g = jmGraph.create(container, {
-        width: 800,
-        height: 600,
-        mode: '2d',
-        style: {
-            fill: '#000'
-        }
-    });
-    init(g);
-    function init(g){
-        var style = {
-            stroke: '#23f24e',
-            lineWidth: 5,
-            shadow: '0,0,20,#fff'
-        };
-        //style.opacity = 0.2;
-        //创建一个自定义的控件
-        var t = g.createShape(jmTest, {
-            style: style,
-            center: {x:100,y:100},
-            radius: 20,
-        });
-        g.children.add(t);
-        t.canMove(true);
-        const editorCover = g.createShape(ImageEditCover, {
-          style: {
-            fill: 'transparent',
-            stroke: 'transparent',
-          },
-          interactive: true
-        });
-        editorCover.targetBounds = {
-            x: 100,
-            y: 100,
-            width: 200,
-            height: 300,
-        };
-        //editorCover.visible = false;
-        g.children.add(editorCover);
-        editorCover.resetControlsPosition();
-        function update() {
-            if(g.needUpdate) g.redraw();
-            requestAnimationFrame(update);
-        }
-        update();
-    }
-	</script>
+<!doctype html>
+<html>
+	<head>
+	<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
+	<meta name="viewport" content="width=device-width,initial-scale=1">
+	<style>
+		html,body{
+			margin:0;
+			padding: 0;
+		}
+		#mycanvas_container{
+			overflow: hidden;
+		}
+	</style>
+	</head>
+	<body>
+		<div id="mycanvas_container"></div>
+	</body>
+    <script type="module">
+        import {jmGraph} from "../../index.js";
+        import {jmRect} from "../../src/shapes/jmRect.js";
+        import {jmPath} from "../../src/core/jmPath.js";
+    /**
+     * 测试
+     */
+    class jmTest extends jmPath {
+        constructor(params) {
+            if(!params) params = {};
+            super(params);
+            this.center = params.center || {x:0, y:0};
+            this.radius = params.radius || 0;
+        }
+        //定义属性
+        /**
+         * 中心点
+         * point格式：{x:0,y:0,m:true}
+         * @property center
+         * @type {point}
+         */
+        get center() {
+            return this.property('center');
+        }
+        set center(v) {
+            return this.property('center', v);
+        }
+        /**
+        * 中心点
+        * point格式：{x:0,y:0,m:true}
+        * @property center
+        * @type {point}
+        */
+        get radius() {
+            return this.property('radius');
+        }
+        set radius(v) {
+            return this.property('radius', v);
+        }
+        /**
+        * 初始化图形点
+        * 控件都是由点形成
+        *
+        * @method initPoint
+        * @private
+        * @for jmArc
+        */
+        initPoints() {
+            //可以获取当前控件的左上坐标，可以用来画相对位置
+            var location = this.getLocation();//获取位置参数
+            var cx = location.center.x ;
+            var cy = location.center.y ;
+            this.points = [];
+            //简单的画一个X
+            //根据半径计算x,y偏移量
+            //由于是圆，偏移量相同
+            var offw = Math.sqrt(location.radius * location.radius / 2);
+            //左上角到右下角对角线
+            this.points.push({x:cx - offw, y:cy-offw}, {x:cx + offw, y:cy+offw});
+            //左下角到右上角对角线
+            //画完上面的线后，需要重新移到这条线的起点，指定m:true即可
+            this.points.push({x:cx - offw, y:cy+offw, m:true}, {x:cx + offw, y:cy-offw});
+            return this.points;
+        }
+    }
+    // 图片裁剪框
+    class ImageEditCover extends jmPath {
+    constructor(params = {}) {
+        super(params);
+        this.style.close = this.style.close || true;
+        this.init(params);
+    }
+    // 初始化控件元素
+    init(params) {
+        this.width = this.width || '100%';
+        this.height = this.height || '100%';
+        // 生成层
+        const rectStyle = {
+            stroke: 'transparent',
+            fill: 'rgba(100,100,100,0.4)',
+            lineWidth: 0.1,
+            zIndex: 1,
+        };
+        const graph = (this.graph || params.graph);
+        const leftRect = graph.createShape(jmRect, {
+            position:{x:0, y:0 },
+            width: 0,
+            height: '100%',
+            style: rectStyle,
+            interactive: false
+        });
+        const topRect = graph.createShape(jmRect, {
+            position:{x:0, y:0 },
+            width: '100%',
+            height: 0,
+            style: rectStyle,
+            interactive: false
+        });
+        const rightRect = graph.createShape(jmRect, {
+            position:{x:0, y:0 },
+            width: 0,
+            height: '100%',
+            style: rectStyle,
+            interactive: false
+        });
+        const bottomRect = graph.createShape(jmRect, {
+            position:{x:0, y:0 },
+            width: '100%',
+            height: 0,
+            style: rectStyle,
+            interactive: false
+        });
+        this.rects.push(leftRect, topRect, rightRect, bottomRect);
+        this.children.add(leftRect);
+        this.children.add(topRect);
+        this.children.add(rightRect);
+        this.children.add(bottomRect);
+        const controlStyle = {
+            lineWidth: 3,
+            stroke: '#fff',
+            zIndex: 100,
+        }
+        const c1 = graph.createShape(jmPath, {
+            style: controlStyle,
+            interactive: true
+        });
+        const c2 = graph.createShape(jmPath, {
+            style: controlStyle,
+            interactive: true
+        });
+        const c3 = graph.createShape(jmPath, {
+            style: controlStyle,
+            interactive: true
+        });
+        const c4 = graph.createShape(jmPath, {
+            style: controlStyle,
+            interactive: true
+        });
+        this.controls.push(c1, c2, c3, c4);
+        this.children.add(c1);
+        this.children.add(c2);
+        this.children.add(c3);
+        this.children.add(c4);
+        c1.canMove(true);
+        c2.canMove(true);
+        c3.canMove(true);
+        c4.canMove(true);
+    }
+    // 裁剪的目录区域
+    // 最终改变结果也是这个参数
+    targetBounds = {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+    }
+    rects = [];
+    // 操作折角
+    controls = [];
+    /**
+     * 初始化图形点
+     * 控件都是由点形成
+     *
+     * @method initPoint
+     * @private
+     * @for jmArc
+     */
+    initPoints() {
+        //可以获取当前控件的左上坐标，可以用来画相对位置
+        const location = this.getLocation();//获取位置参数
+        const targetLeft = location.width / 2 - this.targetBounds.width / 2;
+        const targetRight = location.width / 2 + this.targetBounds.width / 2;
+        const targetBottom = this.targetBounds.y + this.targetBounds.height;
+        this.rects[0].width = targetLeft + 0.1;
+        this.rects[1].height = this.targetBounds.y;
+        this.rects[1].width = this.targetBounds.width + 0.1;
+        this.rects[1].position.x = targetLeft;
+        this.rects[2].width = location.width - targetRight;
+        this.rects[2].position.x = targetRight;
+        this.rects[3].height = location.height - targetBottom;
+        this.rects[3].width = this.targetBounds.width + 0.1;
+        this.rects[3].position.x = targetLeft;
+        this.rects[3].position.y = targetBottom;
+        return this.points;
+    }
+    resetControlsPosition() {
+        //可以获取当前控件的左上坐标，可以用来画相对位置
+        const location = this.getLocation();//获取位置参数
+        const targetLeft = location.width / 2 - this.targetBounds.width / 2;
+        const targetRight = location.width / 2 + this.targetBounds.width / 2;
+        const targetBottom = this.targetBounds.y + this.targetBounds.height;
+        // 操作折角位置
+        const controlWidth = 10;
+        const controlLineWidth = this.controls[0].style.lineWidth || 2;
+        this.controls[0].points = [
+            {
+            x: targetLeft - controlLineWidth/2,
+            y: this.targetBounds.y + controlWidth
+            },
+            {
+            x: targetLeft - controlLineWidth/2,
+            y: this.targetBounds.y - controlLineWidth/2
+            },
+            {
+            x: targetLeft + controlWidth,
+            y: this.targetBounds.y - controlLineWidth/2
+            }
+        ];
+        this.controls[1].points = [
+            {
+            x: targetRight - controlWidth,
+            y: this.targetBounds.y - controlLineWidth/2
+            },
+            {
+            x: targetRight + controlLineWidth/2,
+            y: this.targetBounds.y - controlLineWidth/2
+            },
+            {
+            x: targetRight + controlLineWidth/2,
+            y: this.targetBounds.y + controlWidth
+            }
+        ];
+        this.controls[2].points = [
+            {
+            x: targetRight - controlWidth,
+            y: targetBottom  + controlLineWidth/2
+            },
+            {
+            x: targetRight + controlLineWidth/2,
+            y: targetBottom + controlLineWidth/2
+            },
+            {
+            x: targetRight + controlLineWidth/2,
+            y: targetBottom - controlWidth
+            }
+        ];
+        this.controls[3].points = [
+            {
+            x: targetLeft - controlLineWidth/2,
+            y: targetBottom - controlWidth
+            },
+            {
+            x: targetLeft - controlLineWidth/2,
+            y: targetBottom + controlLineWidth/2
+            },
+            {
+            x: targetLeft + controlWidth,
+            y: targetBottom + controlLineWidth/2
+            }
+        ];
+    }
+    }
+    var container = document.getElementById('mycanvas_container');
+    var g = jmGraph.create(container, {
+        width: 800,
+        height: 600,
+        mode: '2d',
+        style: {
+            fill: '#000'
+        }
+    });
+    init(g);
+    function init(g){
+        var style = {
+            stroke: '#23f24e',
+            lineWidth: 5,
+            shadow: '0,0,20,#fff'
+        };
+        //style.opacity = 0.2;
+        //创建一个自定义的控件
+        var t = g.createShape(jmTest, {
+            style: style,
+            center: {x:100,y:100},
+            radius: 20,
+        });
+        g.children.add(t);
+        t.canMove(true);
+        const editorCover = g.createShape(ImageEditCover, {
+          style: {
+            fill: 'transparent',
+            stroke: 'transparent',
+          },
+          interactive: true
+        });
+        editorCover.targetBounds = {
+            x: 100,
+            y: 100,
+            width: 200,
+            height: 300,
+        };
+        //editorCover.visible = false;
+        g.children.add(editorCover);
+        editorCover.resetControlsPosition();
+        function update() {
+            if(g.needUpdate) g.redraw();
+            requestAnimationFrame(update);
+        }
+        update();
+    }
+	</script>
 </html>