Update test code

rexrainbow · Nov 13, 2024 · cf65870 · cf65870
1 parent 9756e05
commit cf65870
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 30 deletions.
diff --git a/examples/graph/dagre-layout.js b/examples/graph/dagre-layout.js
@@ -1,5 +1,6 @@
 import phaser from 'phaser/src/phaser.js';
 import GraphPlugin from '../../plugins/graph-plugin.js';
+import LineShapePlugin from '../../plugins/lineshape-plugin.js';
 
 class Demo extends Phaser.Scene {
     constructor() {
@@ -27,12 +28,8 @@ class Demo extends Phaser.Scene {
             .addEdge(edgeBD, nodeB, nodeD)
             .addEdge(edgeCD, nodeC, nodeD)
 
-        graph.on('layout.edge', function (edgeGameObject, path) {
-            var startPoint = path[0];
-            var endPoint = path[path.length - 1];
-            edgeGameObject
-                .setPosition(startPoint.x, startPoint.y)
-                .setTo(0, 0, endPoint.x - startPoint.x, endPoint.y - startPoint.y)
+        graph.on('layout.edge', function (edgeGameObject, points) {
+            edgeGameObject.setLine(points);
         });
 
 
@@ -58,7 +55,11 @@ var CreateNode = function (scene, color) {
 }
 
 var CreateEdge = function (scene) {
-    return scene.add.line(0, 0, 0, 0, 0, 0, 0xff0000).setLineWidth(2).setOrigin(0)
+    return scene.add.rexLineShape({
+        color: 0xff0000,
+        lineWidth: 2,
+        lineType: 'poly'
+    });
 }
 
 var config = {
@@ -78,6 +79,13 @@ var config = {
                 plugin: GraphPlugin,
                 mapping: 'rexGraph'
             }
+        ],
+        global: [
+            {
+                key: 'rexLineShape',
+                plugin: LineShapePlugin,
+                start: true
+            }
         ]
     }
 };

diff --git a/examples/graph/elk-layout.js b/examples/graph/elk-layout.js
@@ -1,5 +1,6 @@
 import phaser from 'phaser/src/phaser.js';
 import GraphPlugin from '../../plugins/graph-plugin.js';
+import LineShapePlugin from '../../plugins/lineshape-plugin.js';
 
 class Demo extends Phaser.Scene {
     constructor() {
@@ -27,12 +28,8 @@ class Demo extends Phaser.Scene {
             .addEdge(edgeBD, nodeB, nodeD)
             .addEdge(edgeCD, nodeC, nodeD)
 
-        graph.on('layout.edge', function (edgeGameObject, path) {
-            var startPoint = path[0];
-            var endPoint = path[path.length - 1];
-            edgeGameObject
-                .setPosition(startPoint.x, startPoint.y)
-                .setTo(0, 0, endPoint.x - startPoint.x, endPoint.y - startPoint.y)
+        graph.on('layout.edge', function (edgeGameObject, points) {            
+            edgeGameObject.setLine(points);
         });
 
 
@@ -62,7 +59,11 @@ var CreateNode = function (scene, color) {
 }
 
 var CreateEdge = function (scene) {
-    return scene.add.line(0, 0, 0, 0, 0, 0, 0xff0000).setLineWidth(2).setOrigin(0)
+    return scene.add.rexLineShape({
+        color: 0xff0000,
+        lineWidth: 2,
+        lineType: 'poly'
+    });
 }
 
 var config = {
@@ -82,6 +83,13 @@ var config = {
                 plugin: GraphPlugin,
                 mapping: 'rexGraph'
             }
+        ],
+        global: [
+            {
+                key: 'rexLineShape',
+                plugin: LineShapePlugin,
+                start: true
+            }
         ]
     }
 };

diff --git a/examples/lineshape/line-type.js b/examples/lineshape/line-type.js
@@ -1,5 +1,5 @@
 import phaser from 'phaser/src/phaser.js';
-import CurveShapePlugin from '../../plugins/lineshape-plugin.js';
+import LineShapePlugin from '../../plugins/lineshape-plugin.js';
 
 class Demo extends Phaser.Scene {
     constructor() {
@@ -15,10 +15,10 @@ class Demo extends Phaser.Scene {
     create() {
         var graphics = this.add.graphics().setDepth(1);
 
-        CreateCurve(this, 0, 350, undefined, graphics);
-        CreateCurve(this, 200, 350, 'spline', graphics);
-        CreateCurve(this, 400, 350, 'poly', graphics);
-        CreateCurve(this, 600, 350, 'straight', graphics);
+        CreateLine(this, 0, 350, undefined, graphics);
+        CreateLine(this, 200, 350, 'spline', graphics);
+        CreateLine(this, 400, 350, 'poly', graphics);
+        CreateLine(this, 600, 350, 'straight', graphics);
     }
 }
 
@@ -31,7 +31,7 @@ var GetPoints = function (offsetX, offsetY) {
     ]
 }
 
-var CreateCurve = function (scene, startX, startY, lineType, graphics) {
+var CreateLine = function (scene, startX, startY, lineType, graphics) {
     var points = GetPoints(startX, startY);
     var curve = scene.add.rexLineShape({
         points: points,
@@ -69,8 +69,8 @@ var config = {
     scene: Demo,
     plugins: {
         global: [{
-            key: 'rexCurveShape',
-            plugin: CurveShapePlugin,
+            key: 'rexLineShape',
+            plugin: LineShapePlugin,
             start: true
         }]
     }

diff --git a/plugins/gameobjects/shape/line/Line.js b/plugins/gameobjects/shape/line/Line.js
@@ -30,15 +30,15 @@ class Line extends BaseShapes {
         super(scene);
         this.type = 'rexPath';
 
-        this.setCurve(points, lineType);
+        this.setLine(points, lineType);
         this.setStrokeStyle(lineWidth, color, alpha);
 
         this.buildShapes();
 
         this.updateData();
     }
 
-    setCurve(points, lineType) {
+    setLine(points, lineType) {
         if (points === undefined) {
             points = [];
         }

diff --git a/plugins/gameobjects/shape/line/methods/SetTransform.js b/plugins/gameobjects/shape/line/methods/SetTransform.js
@@ -3,9 +3,11 @@ import GetBounds from './GetBounds.js';
 var SetTransform = function (line) {
     // Size
     var bounds = GetBounds.call(this, line.pathData, true);
-    this.setSize(bounds.width, bounds.height);
+    var width = Math.max(bounds.width, this.lineWidth);
+    var height = Math.max(bounds.height, this.lineWidth);
+    this.setSize(width, height);
     // Origin
-    this.setOrigin(-bounds.x / bounds.width, -bounds.y / bounds.height);
+    this.setOrigin(-bounds.x / width, -bounds.y / height);
     // Position
     var point = this.points[0];
     this.setPosition(point.x, point.y);

diff --git a/plugins/gameobjects/shape/line/methods/ShapesUpdateMethods.js b/plugins/gameobjects/shape/line/methods/ShapesUpdateMethods.js
@@ -19,12 +19,19 @@ export default {
             .lineStyle(this.lineWidth, this.strokeColor, this.strokeAlpha)
 
         var points = this.points;
+        var pointCount = points.length;
 
-        if ((this.lineType === STRAIGHTLINE) || (points.length == 2)) {
+        line.setVisible(pointCount >= 2);
+
+        if (pointCount <= 1) {
+            return;
+        }
+
+        if ((this.lineType === STRAIGHTLINE) || (pointCount == 2)) {
             DrawStraightLine.call(this, line);
-        } else if ((this.lineType === BEZIER) && (points.length === 3)) {
+        } else if ((this.lineType === BEZIER) && (pointCount === 3)) {
             DrawQuadraticBezierCurve.call(this, line);
-        } else if ((this.lineType === BEZIER) && (points.length === 4)) {
+        } else if ((this.lineType === BEZIER) && (pointCount === 4)) {
             DrawCubicBezierCurve.call(this, line);
         } else if (this.lineType === POLYLINE) {
             DrawPolyLine.call(this, line);
@@ -33,6 +40,5 @@ export default {
         }
 
         SetTransform.call(this, line);
-
     }
 }