fix: bevel joint in dashline

src/geom/shape/line.js

@@ -77,27 +77,17 @@ export function Line(path, props, positionsIndex, lengthPerDashSegment = 200) {
   const colors = [];
   const dashArray = [];
 
-  const { normals, attrIndex, attrPos } = getNormals(path, false, positionsIndex);
+  const { normals, attrIndex, attrPos, attrDistance } = getNormals(path, false, positionsIndex);
 
-  let attrDistance = [];
   const sizes = [];
   let { size, color, id } = props;
   !Array.isArray(size) && (size = [ size ]);
-  attrPos.forEach((point, pointIndex) => {
+  attrPos.forEach(point => {
     colors.push(...color);
     pickingIds.push(id);
     sizes.push(size[0]);
     point[2] = size[1] || 0;
     positions.push(...point);
-
-    if (pointIndex === 0 || pointIndex === 1) {
-      attrDistance.push(0);
-    } else if (pointIndex % 2 === 0) {
-      attrDistance.push(attrDistance[pointIndex - 2]
-        + lineSegmentDistance(attrPos[pointIndex - 2], attrPos[pointIndex]));
-    } else {
-      attrDistance.push(attrDistance[pointIndex - 1]);
-    }
   });
 
   const totalLength = attrDistance[attrDistance.length - 1];
@@ -110,9 +100,6 @@ export function Line(path, props, positionsIndex, lengthPerDashSegment = 200) {
     dashArray.push(ratio);
   });
 
-  attrDistance = attrDistance.map(d => {
-    return d / totalLength;
-  });
   return {
     positions,
     normal,
@@ -121,14 +108,10 @@ export function Line(path, props, positionsIndex, lengthPerDashSegment = 200) {
     colors,
     sizes,
     pickingIds,
-    attrDistance,
+    attrDistance: attrDistance.map(d => {
+      return d / totalLength;
+    }),
     dashArray
   };
+}
 
-}
-function lineSegmentDistance(end, start) {
-  const dx = start[0] - end[0];
-  const dy = start[1] - end[1];
-  const dz = start[2] - end[2];
-  return Math.sqrt(dx * dx + dy * dy + dz * dz);
-}

src/util/polyline-normals.js

@@ -18,6 +18,13 @@ function addNext(out, normal, length) {
   out.push([[ normal[0], normal[1] ], length ]);
 }
 
+function lineSegmentDistance(end, start) {
+  const dx = start[0] - end[0];
+  const dy = start[1] - end[1];
+  const dz = start[2] - end[2];
+  return Math.sqrt(dx * dx + dy * dy + dz * dz);
+}
+
 export default function(points, closed, indexOffset) {
   const lineA = [ 0, 0 ];
   const lineB = [ 0, 0 ];
@@ -33,7 +40,7 @@ export default function(points, closed, indexOffset) {
   const out = [];
   const attrPos = [];
   const attrIndex = [];
-  const attrCounters = [ 0, 0 ];
+  const attrDistance = [ 0, 0 ];
   if (closed) {
     points = points.slice();
     points.push(points[0]);
@@ -46,8 +53,7 @@ export default function(points, closed, indexOffset) {
     const last = points[i - 1];
     const cur = points[i];
     const next = i < points.length - 1 ? points[i + 1] : null;
-
-    attrCounters.push(i / total, i / total);
+    const d = lineSegmentDistance(cur, last) + attrDistance[attrDistance.length - 1];
 
     direction(lineA, cur, last);
 
@@ -68,6 +74,7 @@ export default function(points, closed, indexOffset) {
        // reset normal
       normal(_normal, lineA);
       extrusions(attrPos, out, cur, _normal, 1);
+      attrDistance.push(d, d);
       attrIndex.push(
         _lastFlip === 1 ? [ index + 1, index + 3, index + 2 ] : [ index, index + 2, index + 3 ]);
 
@@ -84,7 +91,6 @@ export default function(points, closed, indexOffset) {
       const bevel = miterLen > miterLimit;
       if (bevel) {
         miterLen = miterLimit;
-        attrCounters.push(i / total);
 
         // next two points in our first segment
         addNext(out, _normal, -flip);
@@ -103,12 +109,14 @@ export default function(points, closed, indexOffset) {
 
         addNext(out, _normal, -flip);
         attrPos.push(cur);
+        attrDistance.push(d, d, d);
 
         // the miter is now the normal for our next join
         count += 3;
       } else {
         // next two points for our miter join
         extrusions(attrPos, out, cur, miter, miterLen);
+        attrDistance.push(d, d);
         attrIndex.push(_lastFlip === 1
           ? [ index + 1, index + 3, index + 2 ] : [ index, index + 2, index + 3 ]);
 
@@ -126,6 +134,6 @@ export default function(points, closed, indexOffset) {
     normals: out,
     attrIndex,
     attrPos,
-    attrCounters
+    attrDistance
   };
 }