From 4beb3e555a5589086443f5338c9936a0047a05ad Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Tue, 12 Nov 2024 18:07:32 +0800
Subject: [PATCH 1/2] feat(polyline): support drawMode: lines

---
 src/graphic/helper/poly.ts    |  82 ++++++++++++++++++----
 src/graphic/shape/Polyline.ts |   1 +
 test/lineStrip.html           | 125 ++++++++++++++++++++++++++++++++++
 3 files changed, 194 insertions(+), 14 deletions(-)
 create mode 100644 test/lineStrip.html

diff --git a/src/graphic/helper/poly.ts b/src/graphic/helper/poly.ts
index 316838d0b..a506f5a9a 100644
--- a/src/graphic/helper/poly.ts
+++ b/src/graphic/helper/poly.ts
@@ -8,36 +8,90 @@ export function buildPath(
     shape: {
         points: VectorArray[],
         smooth?: number
-        smoothConstraint?: VectorArray[]
+        smoothConstraint?: VectorArray[],
+        drawMode?: 'lineStrip' | 'lines'
     },
     closePath: boolean
 ) {
     const smooth = shape.smooth;
+    const drawMode = shape.drawMode || 'lineStrip';
     let points = shape.points;
     if (points && points.length >= 2) {
         if (smooth) {
-            const controlPoints = smoothBezier(
-                points, smooth, closePath, shape.smoothConstraint
-            );
-
-            ctx.moveTo(points[0][0], points[0][1]);
-            const len = points.length;
-            for (let i = 0; i < (closePath ? len : len - 1); i++) {
-                const cp1 = controlPoints[i * 2];
-                const cp2 = controlPoints[i * 2 + 1];
-                const p = points[(i + 1) % len];
-                ctx.bezierCurveTo(
-                    cp1[0], cp1[1], cp2[0], cp2[1], p[0], p[1]
+            if (drawMode === 'lineStrip') {
+                buildBezierCurve(
+                    points,
+                    smooth,
+                    closePath,
+                    shape.smoothConstraint,
+                    ctx
                 );
             }
+            else {
+                let startIndex = 0;
+                while (startIndex < points.length - 1) {
+                    // Find the position where the line start point is
+                    // different from the end point
+                    let endIndex = startIndex + 2;
+                    const stripPoints = [points[startIndex], points[startIndex + 1]];
+                    while (endIndex < points.length) {
+                        if (points[endIndex - 1][0] !== points[endIndex][0]
+                            || points[endIndex - 1][1] !== points[endIndex][1]
+                        ) {
+                            break;
+                        }
+                        endIndex += 2;
+                        stripPoints.push(points[endIndex - 1]);
+                    }
+                    buildBezierCurve(
+                        stripPoints,
+                        smooth,
+                        closePath,
+                        shape.smoothConstraint,
+                        ctx
+                    );
+                    startIndex = endIndex;
+                }
+            }
         }
         else {
             ctx.moveTo(points[0][0], points[0][1]);
             for (let i = 1, l = points.length; i < l; i++) {
-                ctx.lineTo(points[i][0], points[i][1]);
+                if (drawMode === 'lineStrip' || i % 2 === 1) {
+                    ctx.lineTo(points[i][0], points[i][1]);
+                }
+                // If the new point is the same as the previous point, it can be ignored
+                else if (points[i][0] !== points[i - 1][0]
+                    || points[i][1] !== points[i - 1][1]
+                ) {
+                    ctx.moveTo(points[i][0], points[i][1]);
+                }
             }
         }
 
         closePath && ctx.closePath();
     }
 }
+
+function buildBezierCurve(
+    points: VectorArray[],
+    smooth: number,
+    closePath: boolean,
+    smoothConstraint: VectorArray[],
+    ctx: CanvasRenderingContext2D | PathProxy
+) {
+    const controlPoints = smoothBezier(
+        points, smooth, closePath, smoothConstraint
+    );
+
+    ctx.moveTo(points[0][0], points[0][1]);
+    const len = points.length;
+    for (let i = 0; i < (closePath ? len : len - 1); i++) {
+        const cp1 = controlPoints[i * 2];
+        const cp2 = controlPoints[i * 2 + 1];
+        const p = points[(i + 1) % len];
+        ctx.bezierCurveTo(
+            cp1[0], cp1[1], cp2[0], cp2[1], p[0], p[1]
+        );
+    }
+}
diff --git a/src/graphic/shape/Polyline.ts b/src/graphic/shape/Polyline.ts
index 2221eb260..d830ba51f 100644
--- a/src/graphic/shape/Polyline.ts
+++ b/src/graphic/shape/Polyline.ts
@@ -12,6 +12,7 @@ export class PolylineShape {
     percent?: number = 1
     smooth?: number = 0
     smoothConstraint?: VectorArray[] = null
+    drawMode?: 'lineStrip' | 'lines' = 'lineStrip'
 }
 
 export interface PolylineProps extends PathProps {
diff --git a/test/lineStrip.html b/test/lineStrip.html
new file mode 100644
index 000000000..ef33de41b
--- /dev/null
+++ b/test/lineStrip.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Animation</title>
+    <script src="../dist/zrender.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+        html, body, #main {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+</head>
+<body>
+    <div id="main"></div>
+    <script type="text/javascript">
+        var main = document.getElementById('main');
+        // 初始化zrender
+        var zr = zrender.init(main);
+
+        var polyline1 = new zrender.Polyline({
+            shape: {
+                points: [
+                    [100, 50],
+                    [200, 100],
+                    [200, 200],
+                    [300, 400],
+                    [300, 400],
+                    [200, 350],
+                    [200, 350],
+                    [100, 400]
+                ],
+                drawMode: 'lines'
+            },
+            style: {
+                fill: 'red',
+                lineWidth: 2
+            }
+        });
+        zr.add(polyline1);
+
+        zr.add(new zrender.Text({
+            style: {
+                text: 'drawMode: lines',
+                x: 150,
+                y: 20
+            }
+        }));
+
+        var polyline2 = new zrender.Polyline({
+            shape: {
+                points: [
+                    [400, 50],
+                    [500, 100],
+
+                    [500, 200],
+                    [600, 400],
+
+                    [600, 400],
+                    [500, 350],
+
+                    [500, 350],
+                    [400, 400]
+                ],
+                drawMode: 'lines',
+                smooth: 0.8
+            },
+            style: {
+                fill: 'blue',
+                lineWidth: 2
+            }
+        });
+        zr.add(polyline2);
+
+        zr.add(new zrender.Text({
+            style: {
+                text: 'drawMode: lines, with smooth',
+                x: 450,
+                y: 20
+            }
+        }));
+
+        var polyline3 = new zrender.Polyline({
+            shape: {
+                points: [
+                    [700, 50],
+                    [800, 100],
+                ],
+                smooth: 0.8
+            },
+            style: {
+                fill: 'green',
+                lineWidth: 2
+            }
+        });
+        zr.add(polyline3);
+
+        var polyline4 = new zrender.Polyline({
+            shape: {
+                points: [
+                    [800, 200],
+                    [900, 400],
+                    [800, 350],
+                    [700, 400]
+                ],
+                smooth: 0.8
+            },
+            style: {
+                fill: 'green',
+                lineWidth: 2
+            }
+        });
+        zr.add(polyline4);
+
+        zr.add(new zrender.Text({
+            style: {
+                text: 'drawMode: lineStrip, with smooth',
+                x: 750,
+                y: 20
+            }
+        }));
+    </script>
+</body>
+</html>
\ No newline at end of file

From 693f0143def6f9c3076c98624aa144405ec6e72e Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Tue, 12 Nov 2024 18:26:40 +0800
Subject: [PATCH 2/2] test(polyline): update test case

---
 test/lineStrip.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/test/lineStrip.html b/test/lineStrip.html
index ef33de41b..37b588429 100644
--- a/test/lineStrip.html
+++ b/test/lineStrip.html
@@ -2,7 +2,7 @@
 <html>
 <head>
     <meta charset="utf-8" />
-    <title>Animation</title>
+    <title>lineStrip</title>
     <script src="../dist/zrender.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style>
@@ -24,10 +24,13 @@
                 points: [
                     [100, 50],
                     [200, 100],
+
                     [200, 200],
                     [300, 400],
+
                     [300, 400],
                     [200, 350],
+
                     [200, 350],
                     [100, 400]
                 ],