@antv/l7-layers 2.9.21 → 2.9.22-alpha.0

package/es/tile/tmsTileLayer.js

@@ -11,8 +11,8 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import BaseTileLayer from './tileLayer/baseTileLayer';
-export var TMSTileLayer = function (_BaseTileLayer) {
+import BaseTileLayer from "./tileLayer/baseTileLayer";
+export var TMSTileLayer = /*#__PURE__*/function (_BaseTileLayer) {
   _inherits(TMSTileLayer, _BaseTileLayer);
 
   var _super = _createSuper(TMSTileLayer);
@@ -53,6 +53,7 @@ export var TMSTileLayer = function (_BaseTileLayer) {
         var _tile$data;
 
         if ((_tile$data = tile.data) !== null && _tile$data !== void 0 && _tile$data.layers && _this2.sourceLayer) {
+          // vector
           var vectorTileLayer = tile.data.layers[_this2.sourceLayer];
           var features = vectorTileLayer === null || vectorTileLayer === void 0 ? void 0 : vectorTileLayer.features;
 
@@ -90,11 +91,11 @@ export var TMSTileLayer = function (_BaseTileLayer) {
       this.parent.renderLayers();
 
       if (this.tilesetManager.isLoaded) {
+        // 将事件抛出，图层上可以使用瓦片
         this.parent.emit('tiles-loaded', this.tilesetManager.currentTiles);
       }
     }
   }]);
 
   return TMSTileLayer;
-}(BaseTileLayer);
-//# sourceMappingURL=tmsTileLayer.js.map
+}(BaseTileLayer);

package/es/tile/utils.js

@@ -87,7 +87,9 @@ export function readRasterValue(tile, mapService, x, y) {
   var tileMaxXY = mapService.lngLatToContainer([maxLng, maxLat]);
   var tilePixelWidth = tileMaxXY.x - tileXY.x;
   var tilePixelHeight = tileXY.y - tileMaxXY.y;
-  var pos = [(x - tileXY.x) / tilePixelWidth, (y - tileMaxXY.y) / tilePixelHeight];
+  var pos = [(x - tileXY.x) / tilePixelWidth, // x
+  (y - tileMaxXY.y) / tilePixelHeight // y
+  ];
   var tileWidth = (tile === null || tile === void 0 ? void 0 : (_tile$data = tile.data) === null || _tile$data === void 0 ? void 0 : _tile$data.width) || 1;
   var tileHeight = (tile === null || tile === void 0 ? void 0 : (_tile$data2 = tile.data) === null || _tile$data2 === void 0 ? void 0 : _tile$data2.height) || 1;
   var indexX = Math.floor(pos[0] * tileWidth);
@@ -115,11 +117,11 @@ export function readPixel(x, y, rendererService) {
 
   var pickedColors = readPixels({
     x: Math.floor(xInDevicePixel),
+    // 视口坐标系原点在左上，而 WebGL 在左下，需要翻转 Y 轴
     y: Math.floor(height - (y + 1) * DOM.DPR),
     width: 1,
     height: 1,
     data: new Uint8Array(1 * 1 * 4)
   });
   return pickedColors;
-}
-//# sourceMappingURL=utils.js.map
+}

package/es/utils/blend.js

@@ -51,5 +51,4 @@ export var BlendTypes = (_BlendTypes = {}, _defineProperty(_BlendTypes, BlendTyp
   equation: {
     rgb: gl.MIN_EXT
   }
-}), _BlendTypes);
-//# sourceMappingURL=blend.js.map
+}), _BlendTypes);

package/es/utils/collision-index.js

@@ -2,32 +2,24 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+// @mapbox/grid-index 并没有类似 hitTest 的单纯获取碰撞检测结果的方法，query 将导致计算大量多余的包围盒结果，因此使用改良版
 import { mat4, vec4 } from 'gl-matrix';
-import GridIndex from './grid-index';
+import GridIndex from "./grid-index";
+/**
+ * 基于网格实现文本避让，大幅提升包围盒碰撞检测效率
+ * @see https://zhuanlan.zhihu.com/p/74373214
+ */
 
-var CollisionIndex = function () {
+var CollisionIndex = /*#__PURE__*/function () {
   function CollisionIndex(width, height) {
     _classCallCheck(this, CollisionIndex);
 
-    _defineProperty(this, "width", void 0);
-
-    _defineProperty(this, "height", void 0);
-
-    _defineProperty(this, "grid", void 0);
-
     _defineProperty(this, "viewportPadding", 100);
 
-    _defineProperty(this, "screenRightBoundary", void 0);
-
-    _defineProperty(this, "screenBottomBoundary", void 0);
-
-    _defineProperty(this, "gridRightBoundary", void 0);
-
-    _defineProperty(this, "gridBottomBoundary", void 0);
-
     this.width = width;
     this.height = height;
-    this.viewportPadding = Math.max(width, height);
+    this.viewportPadding = Math.max(width, height); // 创建网格索引
+
     this.grid = new GridIndex(width + this.viewportPadding, height + this.viewportPadding, 25);
     this.screenRightBoundary = width + this.viewportPadding;
     this.screenBottomBoundary = height + this.viewportPadding;
@@ -38,6 +30,11 @@ var CollisionIndex = function () {
   _createClass(CollisionIndex, [{
     key: "placeCollisionBox",
     value: function placeCollisionBox(collisionBox) {
+      // const projectedPoint = this.project(
+      //   mvpMatrix,
+      //   collisionBox.anchorPointX,
+      //   collisionBox.anchorPointY,
+      // );
       var tlX = collisionBox.x1 + collisionBox.anchorPointX + this.viewportPadding;
       var tlY = collisionBox.y1 + collisionBox.anchorPointY + this.viewportPadding;
       var brX = collisionBox.x2 + collisionBox.anchorPointX + this.viewportPadding;
@@ -61,18 +58,37 @@ var CollisionIndex = function () {
       };
       this.grid.insert(key, box[0], box[1], box[2], box[3]);
     }
+    /**
+     * 后续碰撞检测都需要投影到 viewport 坐标系
+     * @param {THREE.Matrix4} mvpMatrix mvp矩阵
+     * @param {number} x P20 平面坐标X
+     * @param {number} y P20 平面坐标Y
+     * @return {Point} projectedPoint
+     */
+
   }, {
     key: "project",
     value: function project(mvpMatrix, x, y) {
       var point = vec4.fromValues(x, y, 0, 1);
-      var out = vec4.create();
+      var out = vec4.create(); // @ts-ignore
+
       var mat = mat4.fromValues.apply(mat4, _toConsumableArray(mvpMatrix));
-      vec4.transformMat4(out, point, mat);
+      vec4.transformMat4(out, point, mat); // GL 坐标系[-1, 1] -> viewport 坐标系[width, height]
+
       return {
         x: (out[0] / out[3] + 1) / 2 * this.width + this.viewportPadding,
         y: (-out[1] / out[3] + 1) / 2 * this.height + this.viewportPadding
       };
     }
+    /**
+     * 判断包围盒是否在整个网格内，需要加上 buffer
+     * @param {number} x1 x1
+     * @param {number} y1 y1
+     * @param {number} x2 x2
+     * @param {number} y2 y2
+     * @return {Point} isInside
+     */
+
   }, {
     key: "isInsideGrid",
     value: function isInsideGrid(x1, y1, x2, y2) {
@@ -83,5 +99,4 @@ var CollisionIndex = function () {
   return CollisionIndex;
 }();
 
-export { CollisionIndex as default };
-//# sourceMappingURL=collision-index.js.map
+export { CollisionIndex as default };

package/es/utils/dataMappingStyle.js

@@ -1,91 +1,147 @@
-import _isString from "lodash/isString";
-import _isNumber from "lodash/isNumber";
-import _isFunction from "lodash/isFunction";
+import { isFunction, isNumber, isString } from 'lodash';
+/**
+ * 该文件中的工具方法主要用于对 style 中的属性进行 数据映射
+ */
+
+// 画布默认的宽度
 var WIDTH = 1024;
+/**
+ * 当 style 中使用的 opacity 不是常数的时候根据数据进行映射
+ * @param field
+ * @param values
+ * @param updateOptions
+ */
 
 function registerStyleAttribute(fieldName, layer, field, values, updateOptions) {
   layer.updateStyleAttribute(fieldName, field, values, updateOptions);
 }
+/**
+ * 当样式发生变化时判断是否需要进行数据映射
+ * @param configToUpdate
+ * @param layer
+ */
+
 
 function handleStyleDataMapping(configToUpdate, layer) {
   if (configToUpdate.opacity) {
+    // 处理 style 中 opacity 属性的数据映射
     handleStyleFloat('opacity', layer, configToUpdate.opacity);
   }
 
   if (configToUpdate.strokeWidth) {
+    // 处理 style 中 strokeWidth 属性的数据映射
     handleStyleFloat('strokeWidth', layer, configToUpdate.strokeWidth);
   }
 
   if (configToUpdate.strokeOpacity) {
+    // 处理 style 中 strokeOpacity 属性的数据映射
     handleStyleFloat('strokeOpacity', layer, configToUpdate.strokeOpacity);
   }
 
   if (configToUpdate.stroke) {
+    // 处理 style 中 stroke (strokeColor) 属性的数据映射
     handleStyleColor('stroke', layer, configToUpdate.stroke);
   }
 
   if (configToUpdate.offsets) {
+    // 处理 style 中 offsets 属性的数据映射
     handleStyleOffsets('offsets', layer, configToUpdate.offsets);
   }
 
   if (configToUpdate.textOffset) {
+    // 处理 style 中 textOffset 属性的数据映射
     handleStyleOffsets('textOffset', layer, configToUpdate.textOffset);
   }
 
   if (configToUpdate.thetaOffset) {
+    // 处理 style 中 thetaOffset 属性的数据映射
     handleStyleFloat('thetaOffset', layer, configToUpdate.thetaOffset);
   }
 }
+/**
+ * 根据传入参数 float 的类型和值做相应的操作
+ */
+
 
 function handleStyleFloat(fieldName, layer, styleFloat) {
-  if (_isString(styleFloat)) {
+  if (isString(styleFloat)) {
+    // 如果传入的 styleFloat 是 string 类型，那么就认为其对应的是传入数据的字段
     registerStyleAttribute(fieldName, layer, styleFloat, function (value) {
       return value;
     });
-  } else if (_isNumber(styleFloat)) {
+  } else if (isNumber(styleFloat)) {
+    // 传入 number、默认值处理
     registerStyleAttribute(fieldName, layer, [styleFloat], undefined);
   } else if (Array.isArray(styleFloat) && styleFloat.length === 2) {
-    if (_isString(styleFloat[0]) && _isFunction(styleFloat[1])) {
+    // 传入的 styleFloat 是长度为 2 的数组
+    if (isString(styleFloat[0]) && isFunction(styleFloat[1])) {
+      // 字段回调函数 [string, callback]
       registerStyleAttribute(fieldName, layer, styleFloat[0], styleFloat[1]);
-    } else if (_isString(styleFloat[0]) && Array.isArray(styleFloat[1]) && _isNumber(styleFloat[1][0]) && _isNumber(styleFloat[1][1])) {
+    } else if (isString(styleFloat[0]) && Array.isArray(styleFloat[1]) && isNumber(styleFloat[1][0]) && isNumber(styleFloat[1][1])) {
+      // 字段映射 [string, [start: number, end: number]]
       registerStyleAttribute(fieldName, layer, styleFloat[0], styleFloat[1]);
     } else {
+      // 兼容
       registerStyleAttribute(fieldName, layer, [1.0], undefined);
     }
   } else {
+    // 兼容
     registerStyleAttribute(fieldName, layer, [1.0], undefined);
   }
 }
+/**
+ * 根据传入参数 offsets 的类型和值做相应的操作
+ * @param fieldName
+ * @param layer
+ * @param styleOffsets
+ */
+
 
 function handleStyleOffsets(fieldName, layer, styleOffsets) {
-  if (_isString(styleOffsets)) {
+  if (isString(styleOffsets)) {
+    // 如果传入的 styleOffsets 是 string 类型，那么就认为其对应的是传入数据的字段
     registerStyleAttribute(fieldName, layer, styleOffsets, function (value) {
       return value;
     });
-  } else if (Array.isArray(styleOffsets) && styleOffsets.length === 2 && _isString(styleOffsets[0]) && _isFunction(styleOffsets[1])) {
+  } else if (Array.isArray(styleOffsets) && styleOffsets.length === 2 && isString(styleOffsets[0]) && isFunction(styleOffsets[1])) {
+    // 字段回调函数 [string, callback]
     registerStyleAttribute(fieldName, layer, styleOffsets[0], styleOffsets[1]);
-  } else if (Array.isArray(styleOffsets) && styleOffsets.length === 2 && _isNumber(styleOffsets[0]) && _isNumber(styleOffsets[1])) {
+  } else if (Array.isArray(styleOffsets) && styleOffsets.length === 2 && isNumber(styleOffsets[0]) && isNumber(styleOffsets[1])) {
+    // 字段映射 [string, [start: number, end: number]]
     registerStyleAttribute(fieldName, layer, styleOffsets, undefined);
   } else {
+    // 兼容
     registerStyleAttribute(fieldName, layer, [0, 0], undefined);
   }
 }
+/**
+ * 根据传入参数 stroke / color 的类型和值做相应的操作
+ * @param fieldName
+ * @param layer
+ * @param styleColor
+ */
+
 
 function handleStyleColor(fieldName, layer, styleColor) {
-  if (_isString(styleColor)) {
+  if (isString(styleColor)) {
+    // 如果传入的 styleColor 是 string 类型，那么就认为其是颜色值
     registerStyleAttribute(fieldName, layer, styleColor, undefined);
   } else if (Array.isArray(styleColor) && styleColor.length === 2) {
-    if (_isString(styleColor[0]) && _isFunction(styleColor[1])) {
+    // 传入的 styleColor 是长度为 2 的数组
+    if (isString(styleColor[0]) && isFunction(styleColor[1])) {
+      // 字段回调函数 [string, callback]
       registerStyleAttribute(fieldName, layer, styleColor[0], styleColor[1]);
-    } else if (_isString(styleColor[0]) && Array.isArray(styleColor[1]) && styleColor[1].length > 0) {
+    } else if (isString(styleColor[0]) && Array.isArray(styleColor[1]) && styleColor[1].length > 0) {
+      // 字段映射 [string, [start: string, end: string]]
       registerStyleAttribute(fieldName, layer, styleColor[0], styleColor[1]);
     } else {
+      // 兼容
       registerStyleAttribute(fieldName, layer, '#fff', undefined);
     }
   } else {
+    // 兼容
     registerStyleAttribute(fieldName, layer, '#fff', undefined);
   }
 }
 
-export { handleStyleDataMapping, handleStyleFloat, handleStyleColor };
-//# sourceMappingURL=dataMappingStyle.js.map
+export { handleStyleDataMapping, handleStyleFloat, handleStyleColor };

package/es/utils/extrude_polyline.js

@@ -47,24 +47,12 @@ function getArrayUnique(matrix) {
   return matrix;
 }
 
-var ExtrudePolyline = function () {
+var ExtrudePolyline = /*#__PURE__*/function () {
   function ExtrudePolyline() {
     var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
     _classCallCheck(this, ExtrudePolyline);
 
-    _defineProperty(this, "complex", void 0);
-
-    _defineProperty(this, "join", void 0);
-
-    _defineProperty(this, "cap", void 0);
-
-    _defineProperty(this, "miterLimit", void 0);
-
-    _defineProperty(this, "thickness", void 0);
-
-    _defineProperty(this, "normal", void 0);
-
     _defineProperty(this, "lastFlip", -1);
 
     _defineProperty(this, "miter", vec2.fromValues(0, 0));
@@ -136,7 +124,9 @@ var ExtrudePolyline = function () {
       this.lastFlip = -1;
       this.started = false;
       this.normal = null;
-      this.totalDistance = 0;
+      this.totalDistance = 0; // 去除数组里重复的点
+      // points = getArrayUnique(points);
+
       var total = points.length;
       var count = complex.startIndex;
 
@@ -144,14 +134,21 @@ var ExtrudePolyline = function () {
         var _originPoints$, _originPoints$i$, _originPoints$2;
 
         var last = points[i - 1];
-        last.push((_originPoints$ = originPoints[i - 1][2]) !== null && _originPoints$ !== void 0 ? _originPoints$ : 0);
+        last.push((_originPoints$ = originPoints[i - 1][2]) !== null && _originPoints$ !== void 0 ? _originPoints$ : 0); // @ts-ignore
+
         var originLast = originPoints[i - 1];
         var cur = points[i];
-        cur.push((_originPoints$i$ = originPoints[i][2]) !== null && _originPoints$i$ !== void 0 ? _originPoints$i$ : 0);
+        cur.push((_originPoints$i$ = originPoints[i][2]) !== null && _originPoints$i$ !== void 0 ? _originPoints$i$ : 0); // @ts-ignore
+
         var originCur = originPoints[i];
         var next = i < points.length - 1 ? [].concat(_toConsumableArray(points[i + 1]), [(_originPoints$2 = originPoints[i + 1][2]) !== null && _originPoints$2 !== void 0 ? _originPoints$2 : 0]) : null;
         var originNext = i < originPoints.length - 1 ? originPoints[i + 1] : null;
-        var amt = this.simpleSegment(complex, count, last, cur, next, originLast, originCur, originNext);
+        var amt = this.simpleSegment(complex, count, // @ts-ignore
+        last, // @ts-ignore
+        cur, // @ts-ignore
+        next, // @ts-ignore
+        originLast, originCur, // @ts-ignore
+        originNext);
         count += amt;
       }
 
@@ -176,7 +173,9 @@ var ExtrudePolyline = function () {
       this.lastFlip = -1;
       this.started = false;
       this.normal = null;
-      this.totalDistance = 0;
+      this.totalDistance = 0; // 去除数组里重复的点
+      // points = getArrayUnique(points);
+
       var total = points.length;
       var count = complex.startIndex;
 
@@ -184,14 +183,21 @@ var ExtrudePolyline = function () {
         var _originPoints$3, _originPoints$i$2, _originPoints$4;
 
         var last = points[i - 1];
-        last.push((_originPoints$3 = originPoints[i - 1][2]) !== null && _originPoints$3 !== void 0 ? _originPoints$3 : 0);
+        last.push((_originPoints$3 = originPoints[i - 1][2]) !== null && _originPoints$3 !== void 0 ? _originPoints$3 : 0); // @ts-ignore
+
         var originLast = originPoints[i - 1];
         var cur = points[i];
-        cur.push((_originPoints$i$2 = originPoints[i][2]) !== null && _originPoints$i$2 !== void 0 ? _originPoints$i$2 : 0);
+        cur.push((_originPoints$i$2 = originPoints[i][2]) !== null && _originPoints$i$2 !== void 0 ? _originPoints$i$2 : 0); // @ts-ignore
+
         var originCur = originPoints[i];
         var next = i < points.length - 1 ? [].concat(_toConsumableArray(points[i + 1]), [(_originPoints$4 = originPoints[i + 1][2]) !== null && _originPoints$4 !== void 0 ? _originPoints$4 : 0]) : null;
         var originNext = i < originPoints.length - 1 ? originPoints[i + 1] : null;
-        var amt = this.segment_gaode2(complex, count, last, cur, next, originLast, originCur, originNext);
+        var amt = this.segment_gaode2(complex, count, // @ts-ignore
+        last, // @ts-ignore
+        cur, // @ts-ignore
+        next, // @ts-ignore
+        originLast, originCur, // @ts-ignore
+        originNext);
         count += amt;
       }
 
@@ -216,7 +222,9 @@ var ExtrudePolyline = function () {
       this.lastFlip = -1;
       this.started = false;
       this.normal = null;
-      this.totalDistance = 0;
+      this.totalDistance = 0; // 去除数组里重复的点
+      // points = getArrayUnique(points);
+
       var total = points.length;
       var count = complex.startIndex;
 
@@ -245,11 +253,13 @@ var ExtrudePolyline = function () {
       var positions = complex.positions;
       var normals = complex.normals;
       var flatCur = aProjectFlat([cur[0], cur[1]]);
-      var flatLast = aProjectFlat([last[0], last[1]]);
+      var flatLast = aProjectFlat([last[0], last[1]]); // @ts-ignore
+
       direction(lineA, flatCur, flatLast);
       var segmentDistance = 0;
 
       if (this.dash) {
+        // @ts-ignore
         segmentDistance = this.lineSegmentDistance(flatCur, flatLast);
         this.totalDistance += segmentDistance;
       }
@@ -278,17 +288,20 @@ var ExtrudePolyline = function () {
           vec2.add(flatNext, flatCur, vec2.normalize(flatNext, vec2.subtract(flatNext, flatCur, flatLast)));
         }
 
-        direction(lineB, flatNext, flatCur);
+        direction(lineB, flatNext, flatCur); // stores tangent & miter
 
         var _computeMiter = computeMiter(tangent, vec2.create(), lineA, lineB, this.thickness),
             _computeMiter2 = _slicedToArray(_computeMiter, 2),
             miterLen = _computeMiter2[0],
-            miter = _computeMiter2[1];
+            miter = _computeMiter2[1]; // normal(tmp, lineA)
+        // get orientation
+
 
         var flip = vec2.dot(tangent, this.normal) < 0 ? -1 : 1;
         this.extrusions(positions, normals, cur, miter, miterLen, this.totalDistance);
         indices.push.apply(indices, _toConsumableArray(this.lastFlip === 1 ? [index, index + 2, index + 3] : [index + 2, index + 1, index + 3]));
-        flip = -1;
+        flip = -1; // the miter is now the normal for our next join
+
         vec2.copy(this.normal, miter);
         count += 2;
         this.lastFlip = flip;
@@ -306,11 +319,13 @@ var ExtrudePolyline = function () {
       var capSquare = this.cap === 'square';
       var joinBevel = this.join === 'bevel';
       var flatCur = aProjectFlat([originCur[0], originCur[1]]);
-      var flatLast = aProjectFlat([originLast[0], originLast[1]]);
+      var flatLast = aProjectFlat([originLast[0], originLast[1]]); // @ts-ignore
+
       direction(lineA, cur, last);
       var segmentDistance = 0;
 
       if (this.dash) {
+        // @ts-ignore
         segmentDistance = this.lineSegmentDistance(flatCur, flatLast);
         this.totalDistance += segmentDistance;
       }
@@ -321,9 +336,10 @@ var ExtrudePolyline = function () {
       }
 
       if (!this.started) {
-        this.started = true;
+        this.started = true; // if the end cap is type square, we can just push the verts out a bit
 
         if (capSquare) {
+          // vec2.scaleAndAdd(capEnd, last, lineA, -this.thickness);
           var out1 = vec2.create();
           var out2 = vec2.create();
           vec2.add(out1, this.normal, lineA);
@@ -366,16 +382,24 @@ var ExtrudePolyline = function () {
         indices.push.apply(indices, _toConsumableArray(this.lastFlip === 1 ? [index, index + 2, index + 3] : [index + 2, index + 1, index + 3]));
         count += 2;
       } else {
+        // @ts-ignore
         if (isPointEqual(cur, next)) {
-          vec2.add(next, cur, vec2.normalize(next, vec2.subtract(next, cur, last)));
-        }
+          vec2.add( // @ts-ignore
+          next, // @ts-ignore
+          cur, vec2.normalize( // @ts-ignore
+          next, // @ts-ignore
+          vec2.subtract(next, cur, last)));
+        } // @ts-ignore
 
-        direction(lineB, next, cur);
+
+        direction(lineB, next, cur); // stores tangent & miter
 
         var _computeMiter3 = computeMiter(tangent, vec2.create(), lineA, lineB, this.thickness),
             _computeMiter4 = _slicedToArray(_computeMiter3, 2),
             miterLen = _computeMiter4[0],
-            miter = _computeMiter4[1];
+            miter = _computeMiter4[1]; // normal(tmp, lineA)
+        // get orientation
+
 
         var flip = vec2.dot(tangent, this.normal) < 0 ? -1 : 1;
         var bevel = joinBevel;
@@ -396,10 +420,12 @@ var ExtrudePolyline = function () {
           positions.push(cur[0], cur[1], cur[2] | 0, this.totalDistance, this.thickness * flip, cur[2] | 0);
           this.complex.indexes.push(this.currentIndex);
           this.currentIndex++;
-          indices.push.apply(indices, _toConsumableArray(this.lastFlip !== -flip ? [index, index + 2, index + 3] : [index + 2, index + 1, index + 3]));
+          indices.push.apply(indices, _toConsumableArray(this.lastFlip !== -flip ? [index, index + 2, index + 3] : [index + 2, index + 1, index + 3])); // now add the bevel triangle
+
           indices.push(index + 2, index + 3, index + 4);
           computeNormal(tmp, lineB);
-          vec2.copy(this.normal, tmp);
+          vec2.copy(this.normal, tmp); // store normal for next round
+
           normals.push(this.normal[0], this.normal[1], 0);
           positions.push(cur[0], cur[1], cur[2] | 0, this.totalDistance, -this.thickness * flip, cur[2] | 0);
           this.complex.indexes.push(this.currentIndex);
@@ -408,7 +434,8 @@ var ExtrudePolyline = function () {
         } else {
           this.extrusions(positions, normals, cur, miter, miterLen, this.totalDistance);
           indices.push.apply(indices, _toConsumableArray(this.lastFlip === 1 ? [index, index + 2, index + 3] : [index + 2, index + 1, index + 3]));
-          flip = -1;
+          flip = -1; // the miter is now the normal for our next join
+
           vec2.copy(this.normal, miter);
           count += 2;
         }
@@ -428,11 +455,13 @@ var ExtrudePolyline = function () {
       var capSquare = this.cap === 'square';
       var joinBevel = this.join === 'bevel';
       var flatCur = aProjectFlat([cur[0], cur[1]]);
-      var flatLast = aProjectFlat([last[0], last[1]]);
+      var flatLast = aProjectFlat([last[0], last[1]]); // @ts-ignore
+
       direction(lineA, flatCur, flatLast);
       var segmentDistance = 0;
 
       if (this.dash) {
+        // @ts-ignore
         segmentDistance = this.lineSegmentDistance(flatCur, flatLast);
         this.totalDistance += segmentDistance;
       }
@@ -443,9 +472,10 @@ var ExtrudePolyline = function () {
       }
 
       if (!this.started) {
-        this.started = true;
+        this.started = true; // if the end cap is type square, we can just push the verts out a bit
 
         if (capSquare) {
+          // vec2.scaleAndAdd(capEnd, last, lineA, -this.thickness);
           var out1 = vec2.create();
           var out2 = vec2.create();
           vec2.add(out1, this.normal, lineA);
@@ -456,7 +486,8 @@ var ExtrudePolyline = function () {
           this.complex.indexes.push(this.currentIndex);
           positions.push(last[0], last[1], last[2] | 0, this.totalDistance - segmentDistance, this.thickness, last[2] | 0);
           this.complex.indexes.push(this.currentIndex);
-          this.currentIndex++;
+          this.currentIndex++; // this.extrusions(positions, normals, last, out, this.thickness);
+          // last = capEnd;
         } else {
           this.extrusions(positions, normals, last, this.normal, this.thickness, this.totalDistance - segmentDistance);
         }
@@ -468,12 +499,15 @@ var ExtrudePolyline = function () {
         computeNormal(this.normal, lineA);
 
         if (capSquare) {
+          // vec2.scaleAndAdd(capEnd, cur, lineA, this.thickness);
+          // cur = capEnd;
           var _out3 = vec2.create();
 
           var _out4 = vec2.create();
 
           vec2.sub(_out4, lineA, this.normal);
-          vec2.add(_out3, lineA, this.normal);
+          vec2.add(_out3, lineA, this.normal); // this.extrusions(positions, normals, cur, out, this.thickness);
+
           normals.push(_out4[0], _out4[1], 0);
           normals.push(_out3[0], _out3[1], 0);
           positions.push(cur[0], cur[1], cur[2] | 0, this.totalDistance, this.thickness, cur[2] | 0);
@@ -483,7 +517,8 @@ var ExtrudePolyline = function () {
           this.currentIndex++;
         } else {
           this.extrusions(positions, normals, cur, this.normal, this.thickness, this.totalDistance);
-        }
+        } // this.extrusions(positions, normals, cur, this.normal, this.thickness);
+
 
         indices.push.apply(indices, _toConsumableArray(this.lastFlip === 1 ? [index, index + 2, index + 3] : [index + 2, index + 1, index + 3]));
         count += 2;
@@ -494,12 +529,14 @@ var ExtrudePolyline = function () {
           vec2.add(flatNext, flatCur, vec2.normalize(flatNext, vec2.subtract(flatNext, flatCur, flatLast)));
         }
 
-        direction(lineB, flatNext, flatCur);
+        direction(lineB, flatNext, flatCur); // stores tangent & miter
 
         var _computeMiter5 = computeMiter(tangent, vec2.create(), lineA, lineB, this.thickness),
             _computeMiter6 = _slicedToArray(_computeMiter5, 2),
             miterLen = _computeMiter6[0],
-            miter = _computeMiter6[1];
+            miter = _computeMiter6[1]; // normal(tmp, lineA)
+        // get orientation
+
 
         var flip = vec2.dot(tangent, this.normal) < 0 ? -1 : 1;
         var bevel = joinBevel;
@@ -520,10 +557,12 @@ var ExtrudePolyline = function () {
           positions.push(cur[0], cur[1], cur[2] | 0, this.totalDistance, this.thickness * flip, cur[2] | 0);
           this.complex.indexes.push(this.currentIndex);
           this.currentIndex++;
-          indices.push.apply(indices, _toConsumableArray(this.lastFlip !== -flip ? [index, index + 2, index + 3] : [index + 2, index + 1, index + 3]));
+          indices.push.apply(indices, _toConsumableArray(this.lastFlip !== -flip ? [index, index + 2, index + 3] : [index + 2, index + 1, index + 3])); // now add the bevel triangle
+
           indices.push(index + 2, index + 3, index + 4);
           computeNormal(tmp, lineB);
-          vec2.copy(this.normal, tmp);
+          vec2.copy(this.normal, tmp); // store normal for next round
+
           normals.push(this.normal[0], this.normal[1], 0);
           positions.push(cur[0], cur[1], cur[2] | 0, this.totalDistance, -this.thickness * flip, cur[2] | 0);
           this.complex.indexes.push(this.currentIndex);
@@ -532,7 +571,8 @@ var ExtrudePolyline = function () {
         } else {
           this.extrusions(positions, normals, cur, miter, miterLen, this.totalDistance);
           indices.push.apply(indices, _toConsumableArray(this.lastFlip === 1 ? [index, index + 2, index + 3] : [index + 2, index + 1, index + 3]));
-          flip = -1;
+          flip = -1; // the miter is now the normal for our next join
+
           vec2.copy(this.normal, miter);
           count += 2;
         }
@@ -544,7 +584,10 @@ var ExtrudePolyline = function () {
     }
   }, {
     key: "extrusions",
-    value: function extrusions(positions, normals, point, normal, thickness, distanceRadio) {
+    value: function extrusions(positions, normals, point, // 顶点
+    normal, // 法向量
+    thickness, // 高度
+    distanceRadio) {
       normals.push(normal[0], normal[1], 0);
       normals.push(normal[0], normal[1], 0);
       positions.push(point[0], point[1], point[2] | 0, distanceRadio, -thickness, point[2] | 0);
@@ -565,5 +608,4 @@ var ExtrudePolyline = function () {
   return ExtrudePolyline;
 }();
 
-export { ExtrudePolyline as default };
-//# sourceMappingURL=extrude_polyline.js.map
+export { ExtrudePolyline as default };