You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
333 lines
11 KiB
333 lines
11 KiB
4 years ago
|
import { WorkingAreaComponent } from '../working-area.component';
|
||
|
|
import * as PIXI from 'pixi.js';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 管线
|
||
|
|
*/
|
||
|
|
export class Pipeline extends PIXI.Container {
|
||
|
|
public line: PIXI.Graphics = new PIXI.Graphics();
|
||
|
|
constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
|
||
|
|
super();
|
||
|
|
this.name = this.assetData.Id;
|
||
|
|
this.x = this.assetData.Point.x;
|
||
|
|
this.y = this.assetData.Point.y;
|
||
|
|
this.workingArea.backgroundImage.addChild(this);
|
||
|
|
this.addChild(this.line);
|
||
|
|
// 画线图标
|
||
|
|
this.refresh();
|
||
|
|
this.interactive = true;
|
||
|
|
this.on('mousedown', event => {
|
||
|
|
event.stopPropagation();
|
||
|
|
this.workingArea.selection.selectOne(this);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 刷新
|
||
|
|
*/
|
||
|
|
public refresh() {
|
||
|
|
|
||
|
|
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; }
|
||
|
|
// Base vector (between first points)
|
||
|
|
const pe = pts[pts.length - 1];
|
||
|
|
|
||
|
|
// Finds first non-overlapping point
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Computes the norm and the inverse norm
|
||
|
|
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;
|
||
|
|
|
||
|
|
// Stores the inbound function calls in reverse order in fns
|
||
|
|
const fns = [];
|
||
|
|
|
||
|
|
// if (isRounded) {
|
||
|
|
// // c.setLineJoin('round');
|
||
|
|
// c.lineTextureStyle({ join: PIXI.LINE_JOIN.ROUND });
|
||
|
|
// } else if (pts.length > 2) {
|
||
|
|
// // Only mitre if there are waypoints
|
||
|
|
// // c.setMiterLimit(1.42);
|
||
|
|
// c.lineTextureStyle({ miterLimit: 1.42 });
|
||
|
|
// }
|
||
|
|
// c.lineStyle(1, 0x000000, 1);
|
||
|
|
c.clear();
|
||
|
|
c.lineTextureStyle({ width: 1, color: 0x00000, join: PIXI.LINE_JOIN.ROUND });
|
||
|
|
// c.begin();
|
||
|
|
c.beginFill(0xffffff);
|
||
|
|
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 {
|
||
|
|
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++) {
|
||
|
|
// Work out in which direction the line is bending
|
||
|
|
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);
|
||
|
|
|
||
|
|
// Work out the normal orthogonal to the line through the control point and the edge sides intersection
|
||
|
|
nx2 = (nx + nx1);
|
||
|
|
ny2 = (ny + ny1);
|
||
|
|
|
||
|
|
const dist2 = Math.sqrt(nx2 * nx2 + ny2 * ny2);
|
||
|
|
|
||
|
|
if (dist2 !== 0) {
|
||
|
|
nx2 = nx2 / dist2;
|
||
|
|
ny2 = ny2 / dist2;
|
||
|
|
|
||
|
|
// Higher strokewidths require a larger minimum bend, 0.35 covers all but the most extreme cases
|
||
|
|
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) {
|
||
|
|
// If the two segments are aligned, or if we're not drawing curved sections between segments
|
||
|
|
// just draw straight to the intersection point
|
||
|
|
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();
|
||
|
|
// if (openEnded)
|
||
|
|
// {
|
||
|
|
// c.end();
|
||
|
|
// c.stroke();
|
||
|
|
// }
|
||
|
|
// else
|
||
|
|
// {
|
||
|
|
// c.close();
|
||
|
|
// c.fillAndStroke();
|
||
|
|
// }
|
||
|
|
|
||
|
|
// Workaround for shadow on top of base arrow
|
||
|
|
// c.setShadow(false);
|
||
|
|
|
||
|
|
// Need to redraw the markers without the low miter limit
|
||
|
|
// c.setMiterLimit(4);
|
||
|
|
|
||
|
|
// if (isRounded)
|
||
|
|
// {
|
||
|
|
// c.setLineJoin('flat');
|
||
|
|
// }
|
||
|
|
|
||
|
|
// if (pts.length > 2) {
|
||
|
|
// // Only to repaint markers if no waypoints
|
||
|
|
// // Need to redraw the markers without the low miter limit
|
||
|
|
// // c.setMiterLimit(4);
|
||
|
|
// c.lineTextureStyle({ width: 1, color: 0x00000, miterLimit: 4 });
|
||
|
|
// if (markerStart && !openEnded) {
|
||
|
|
// // c.begin();
|
||
|
|
// this.paintMarker(c, pts[0].x, pts[0].y, startNx, startNy, startSize, startWidth, edgeWidth, spacing, true);
|
||
|
|
// // c.stroke();
|
||
|
|
// // c.end();
|
||
|
|
// // c.closePath();
|
||
|
|
// }
|
||
|
|
|
||
|
|
// if (markerEnd && !openEnded) {
|
||
|
|
// // c.begin();
|
||
|
|
// this.paintMarker(c, pe.x, pe.y, -nx, -ny, endSize, endWidth, edgeWidth, spacing, true);
|
||
|
|
// // c.stroke();
|
||
|
|
// // c.end();
|
||
|
|
// // c.closePath();
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Function: paintMarker
|
||
|
|
*
|
||
|
|
* Paints the marker.
|
||
|
|
*/
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Function: relativeCcw
|
||
|
|
*
|
||
|
|
* Returns 1 if the given point on the right side of the segment, 0 if its
|
||
|
|
* on the segment, and -1 if the point is on the left side of the segment.
|
||
|
|
*
|
||
|
|
* Parameters:
|
||
|
|
*
|
||
|
|
* x1 - X-coordinate of the startpoint of the segment.
|
||
|
|
* y1 - Y-coordinate of the startpoint of the segment.
|
||
|
|
* x2 - X-coordinate of the endpoint of the segment.
|
||
|
|
* y2 - Y-coordinate of the endpoint of the segment.
|
||
|
|
* px - X-coordinate of the point.
|
||
|
|
* py - Y-coordinate of the point.
|
||
|
|
*/
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
}
|