[修正] 在管线绘制过程中点击右键没有正确的销毁绘制中的管线

[新增] 新的管线绘制算法

src/app/working-area/working-area.component.ts

@@ -185,7 +185,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
             && item.assetData.Type !== 3
             && item.assetData.Type !== 4) {
             // 删除选中的图标
-            let obj = this.backgroundImage.getChildByName(item.assetData.Id);
+            const obj = this.backgroundImage.getChildByName(item.assetData.Id);
             // this.backgroundImage.removeChild(obj);
             // 找到ll
             obj.destroy();
@@ -194,7 +194,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
             this.emit('deleteIcon');
             if (obj instanceof Pipeline) {
               obj.assetData.LinkedObjects.forEach(element => {
-                let index = element.assetData.Pipelines.indexOf(obj);
+                const index = element.assetData.Pipelines.indexOf(obj);
                 if (index !== -1) {
                   element.assetData.Pipelines.splice(index, 1);
                 }
@@ -310,7 +310,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     // this.createEnterPaintEndButton();
     // this.backgroundImage.addChild(this.paintingLine);
     this.on('select', obj => {
-      console.log(obj+"1111");
       // tslint:disable-next-line: curly
       if (obj === null) return;
       this.moveIconToScreenCenter(obj);
@@ -484,7 +483,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    */
   public refresh(): void {
     console.log(this.canvasData.planSelectData);
-    
+
     console.log(this.canvasData.getCarTypesAndCount());
 
     this.destroyBackgroundImage();
@@ -1599,7 +1598,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
           this.setPaintMode(PaintMode.Car);
           this.selectCar = this.carData.get(data.Id);
           // event.currentTarget.name = '';
-          //event.currentTarget.visible = false;
+          // event.currentTarget.visible = false;
           this.selectedButton.visible = false;
           this.previewSinglePointIcon.texture = PIXI.Texture.from(data.ImageUrl);
           this.previewSinglePointIcon.visible = true;
@@ -1632,7 +1631,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     carButton.setParent(this.app.stage);
     if (this.count >= 12) {
       this.count = 0;
-      this.clumn +=3;
+      this.clumn += 3;
     }
     carButton.position.set(this.clumn * 25, this.count * 65);
     this.count++;
@@ -2111,6 +2110,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         this.paintingLine.clear();
         this.paintMode = PaintMode.endPaint;
         break;
+      default:
+        break;
     }
   }
   /**
@@ -2136,6 +2137,14 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
             }
           }
         });
+        if (this.paintingPipeline !== null) {
+          // this.backgroundImage.removeChild(this.paintingPipeline);
+          // this.paintingPipeline = null;
+          this.paintingPipeline.destroy();
+          this.paintingPipeline = null;
+        }
+        this.previewLineSegment.visible = false;
+        this.paintPoints.splice(0, this.paintPoints.length);
         break;
       case PaintMode.MoveCar:
         this.previewSinglePointIcon.visible = true;
@@ -2321,12 +2330,13 @@ export class SinglePointIcon extends PIXI.Container {
     this.image.interactive = true;
     this.image
       .on('mousedown', event => {
-        console.log(this.assetData.Pipelines);
+        console.log(this.workingArea.getPaintMode());
         event.stopPropagation();
         this.workingArea.selection.selectOne(this);
         if (this.assetData.CanConnection && this.parent === this.workingArea.backgroundImage) {
           if (this.workingArea.getPaintMode() === PaintMode.Pipeline) {
-            if (this.workingArea.paintingPipeline === null) {
+            if (this.workingArea.paintingPipeline === null
+              || this.workingArea.paintingPipeline === undefined) {
               this.workingArea.previewLineSegment.visible = true;
               this.workingArea.currentClickPoint.position =
                 new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y);
@@ -3021,33 +3031,228 @@ export class Pipeline extends PIXI.Container {
    * 刷新
    */
   public refresh() {
-    this.line.clear();
-    this.line.lineStyle(5, 0x0000ff, 1);
-    for (let i = 0, count = this.assetData.MultiPoint.length; i < count; i++) {
-      const pointA = this.assetData.MultiPoint[i];
-      if (i === 0) {
-        this.line.moveTo(pointA.x, pointA.y);
-      } else {
-        this.line.lineTo(pointA.x, pointA.y);
-        if (i === count - 1) {
-          const pointB = this.assetData.MultiPoint[i - 1];
-          const angle = Math.atan2((pointA.y - pointB.y), (pointA.x - pointB.x)) * (180 / Math.PI) + 90;
-          this.line.beginFill(0x0000ff);
-          this.line.drawStar(pointA.x, pointA.y, 3, 5, 0, (Math.PI / 180 * angle));
+
+        const strokeWidth = 1;
+        const startWidth = 30 + strokeWidth;
+        const endWidth = 30 + strokeWidth;
+        const edgeWidth = 10;
+        const openEnded = false;
+        const markerStart = false;
+        const markerEnd = true;
+        const spacing = (openEnded) ? 0 : 0 + strokeWidth / 2;
+        const startSize = 30 + strokeWidth;
+        const endSize = 30 + strokeWidth;
+        const isRounded = true;
+        const pts = this.assetData.MultiPoint;
+        const c = this.line;
+        if (pts.length < 2) { return; }
+        const pe = pts[pts.length - 1];
+
+        let i0 = 1;
+
+        while (i0 < pts.length - 1 && pts[i0].x === pts[0].x && pts[i0].y === pts[0].y) {
+            i0++;
+            }
+
+        const dx = pts[i0].x - pts[0].x;
+        const dy = pts[i0].y - pts[0].y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+
+        if (dist === 0) {
+            return;
+            }
+
+        let nx = dx / dist;
+        let nx1 = nx;
+        let nx2 = nx;
+        let ny = dy / dist;
+        let ny2 = ny;
+        let ny1 = ny;
+        let orthx = edgeWidth * ny;
+        let orthy = -edgeWidth * nx;
+
+        const fns = [];
+        c.clear();
+        c.lineTextureStyle({ width: 1, color: 0x00000, join: PIXI.LINE_JOIN.ROUND });
+        c.beginFill(0x0000ff);
+        const startNx = nx;
+        const startNy = ny;
+
+        if (markerStart && !openEnded) {
+            this.paintMarker(c, pts[0].x, pts[0].y, nx, ny, startSize, startWidth, edgeWidth, spacing, true);
         } else {
-          this.line.drawCircle(pointA.x, pointA.y, 5);
+            const outStartX = pts[0].x + orthx / 2 + spacing * nx;
+            const outStartY = pts[0].y + orthy / 2 + spacing * ny;
+            const inEndX = pts[0].x - orthx / 2 + spacing * nx;
+            const inEndY = pts[0].y - orthy / 2 + spacing * ny;
+
+            if (openEnded) {
+                c.moveTo(outStartX, outStartY);
+                fns.push( () => {
+                c.lineTo(inEndX, inEndY);
+                });
+            } else {
+                c.moveTo(inEndX, inEndY);
+                c.lineTo(outStartX, outStartY);
+            }
+        }
+        let dx1 = 0;
+        let dy1 = 0;
+        let dist1 = 0;
+
+        for (let i = 0; i < pts.length - 2; i++) {
+        const pos = this.relativeCcw(pts[i].x, pts[i].y, pts[i + 1].x, pts[i + 1].y, pts[i + 2].x, pts[i + 2].y);
+
+        dx1 = pts[i + 2].x - pts[i + 1].x;
+        dy1 = pts[i + 2].y - pts[i + 1].y;
+
+        dist1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+
+        if (dist1 !== 0) {
+            nx1 = dx1 / dist1;
+            ny1 = dy1 / dist1;
+
+            const tmp1 = nx * nx1 + ny * ny1;
+            const tmp = Math.max(Math.sqrt((tmp1 + 1) / 2), 0.04);
+
+            nx2 = (nx + nx1);
+            ny2 = (ny + ny1);
+
+            const dist2 = Math.sqrt(nx2 * nx2 + ny2 * ny2);
+
+            if (dist2 !== 0) {
+                nx2 = nx2 / dist2;
+                ny2 = ny2 / dist2;
+
+                const strokeWidthFactor = Math.max(tmp, Math.min(1 / 200 + 0.04, 0.35));
+                const angleFactor = (pos !== 0 && isRounded) ? Math.max(0.1, strokeWidthFactor) : Math.max(tmp, 0.06);
+
+                const outX = pts[i + 1].x + ny2 * edgeWidth / 2 / angleFactor;
+                const outY = pts[i + 1].y - nx2 * edgeWidth / 2 / angleFactor;
+                const inX = pts[i + 1].x - ny2 * edgeWidth / 2 / angleFactor;
+                const inY = pts[i + 1].y + nx2 * edgeWidth / 2 / angleFactor;
+
+                if (pos === 0 || !isRounded) {
+                    c.lineTo(outX, outY);
+
+                    ((x, y) => {
+                        fns.push(() => {
+                            c.lineTo(x, y);
+                        });
+                    })(inX, inY);
+                } else if (pos === -1) {
+                    const c1x = inX + ny * edgeWidth;
+                    const c1y = inY - nx * edgeWidth;
+                    const c2x = inX + ny1 * edgeWidth;
+                    const c2y = inY - nx1 * edgeWidth;
+                    c.lineTo(c1x, c1y);
+                    if (isRounded) {
+                        c.quadraticCurveTo(outX, outY, c2x, c2y); // 圆角
+                    } else {
+                        c.lineTo(outX, outY);
+                    }
+                    ((x, y) => {
+                        fns.push(() => {
+                            c.lineTo(x, y);
+                        });
+                    })(inX, inY);
+                } else {
+                    c.lineTo(outX, outY);
+
+                    ((x, y) => {
+                        const c1x = outX - ny * edgeWidth;
+                        const c1y = outY + nx * edgeWidth;
+                        const c2x = outX - ny1 * edgeWidth;
+                        const c2y = outY + nx1 * edgeWidth;
+
+                        fns.push(() => {
+                            if (isRounded) {
+                                c.quadraticCurveTo(x, y, c1x, c1y);
+                            } else {
+                                c.lineTo(x, y);
+                            }
+                        });
+                        fns.push(() => {
+                            c.lineTo(c2x, c2y);
+                        });
+                            })(inX, inY);
+                }
+
+                nx = nx1;
+                ny = ny1;
+                }
+            }
         }
+        orthx = edgeWidth * ny1;
+        orthy = - edgeWidth * nx1;
+
+        if (markerEnd && !openEnded) {
+            this.paintMarker(c, pe.x, pe.y, -nx, -ny, endSize, endWidth, edgeWidth, spacing, false);
+        } else {
+            c.lineTo(pe.x - spacing * nx1 + orthx / 2, pe.y - spacing * ny1 + orthy / 2);
+
+            const inStartX = pe.x - spacing * nx1 - orthx / 2;
+            const inStartY = pe.y - spacing * ny1 - orthy / 2;
+
+            if (!openEnded) {
+                c.lineTo(inStartX, inStartY);
+            } else {
+                c.moveTo(inStartX, inStartY);
+
+                fns.splice(0, 0, () => {
+                    c.moveTo(inStartX, inStartY);
+                });
+            }
+        }
+
+        for (let i = fns.length - 1; i >= 0; i--) {
+            fns[i]();
+        }
+        c.closePath();
+        c.endFill();
+  }
+
+  paintMarker(c: PIXI.Graphics, ptX: number, ptY: number, nx: number, ny: number,
+              size: number, arrowWidth: number, edgeWidth: number, spacing: number, initialMove: boolean) {
+      const widthArrowRatio = edgeWidth / arrowWidth;
+      const orthx = edgeWidth * ny / 2;
+      const orthy = -edgeWidth * nx / 2;
+
+      const spaceX = (spacing + size) * nx;
+      const spaceY = (spacing + size) * ny;
+
+      if (initialMove) {
+          c.moveTo(ptX - orthx + spaceX, ptY - orthy + spaceY);
+      } else {
+          c.lineTo(ptX - orthx + spaceX, ptY - orthy + spaceY);
       }
-    }
-    this.line.endFill();
-    // if (this.assetData.MultiPoint.length >= 2) {
-    //   const pointA = this.assetData.MultiPoint[this.assetData.MultiPoint.length - 2];
-    //   const pointB = this.assetData.MultiPoint[this.assetData.MultiPoint.length - 1];
-    //   const angle = Math.atan2((pointB.y - pointA.y), (pointB.x - pointA.x)) * (180 / Math.PI) + 90;
-    //   this.beginFill(0x0000ff);
-    //   this.drawStar(pointB.x, pointB.y, 3, 5, 0, (Math.PI / 180 * angle));
-    //   this.endFill();
-    // }
+      c.lineTo(ptX - orthx / widthArrowRatio + spaceX, ptY - orthy / widthArrowRatio + spaceY);
+      c.lineTo(ptX + spacing * nx, ptY + spacing * ny);
+      c.lineTo(ptX + orthx / widthArrowRatio + spaceX, ptY + orthy / widthArrowRatio + spaceY);
+      c.lineTo(ptX + orthx + spaceX, ptY + orthy + spaceY);
+  }
+
+  relativeCcw(x1: number, y1: number, x2: number, y2: number, px: number, py: number) {
+      x2 -= x1;
+      y2 -= y1;
+      px -= x1;
+      py -= y1;
+      let ccw = px * y2 - py * x2;
+
+      if (ccw === 0.0) {
+          ccw = px * x2 + py * y2;
+
+          if (ccw > 0.0) {
+              px -= x2;
+              py -= y2;
+              ccw = px * x2 + py * y2;
+
+              if (ccw < 0.0) {
+                  ccw = 0.0;
+              }
+          }
+      }
+      return (ccw < 0.0) ? -1 : ((ccw > 0.0) ? 1 : 0);
   }
 }
 /**