|
@@ -1,7 +1,7 @@
|
|
|
import { SGraphyItem } from "@saga-web/graphy/lib";
|
|
|
import { SColor, SLine, SPainter, SPoint } from "@saga-web/draw/lib";
|
|
|
import { SMouseEvent } from "@saga-web/base";
|
|
|
-import { SRelationState } from "../enums/SRelationState";
|
|
|
+import { SRelationState } from "..";
|
|
|
import { SMathUtil } from "../utils/SMathUtil";
|
|
|
|
|
|
/**
|
|
@@ -13,7 +13,14 @@ export class SPolylineItem extends SGraphyItem {
|
|
|
/** 折点信息 */
|
|
|
pointList: SPoint[] = [];
|
|
|
/** 是否绘制完成 */
|
|
|
- status: SRelationState = SRelationState.Create;
|
|
|
+ _status: SRelationState = SRelationState.Create;
|
|
|
+ get status(): SRelationState {
|
|
|
+ return this._status;
|
|
|
+ }
|
|
|
+ set status(v: SRelationState) {
|
|
|
+ this._status = v;
|
|
|
+ this.update();
|
|
|
+ }
|
|
|
/** 鼠标移动时的点 */
|
|
|
lastPoint: SPoint | null = null;
|
|
|
/** 线条颜色 */
|
|
@@ -26,12 +33,13 @@ export class SPolylineItem extends SGraphyItem {
|
|
|
this.update();
|
|
|
}
|
|
|
/** 填充色 */
|
|
|
- _fillColor: string = "#ffffff";
|
|
|
+ _fillColor: string = "#2196f3";
|
|
|
get fillColor(): string {
|
|
|
return this._fillColor;
|
|
|
}
|
|
|
set fillColor(v: string) {
|
|
|
this._fillColor = v;
|
|
|
+ this.update();
|
|
|
}
|
|
|
/** 线条宽度 */
|
|
|
_lineWidth: number = 1;
|
|
@@ -92,6 +100,7 @@ export class SPolylineItem extends SGraphyItem {
|
|
|
} else {
|
|
|
this.pointList.push(p);
|
|
|
}
|
|
|
+ this.update();
|
|
|
} // Function addPoint()
|
|
|
|
|
|
/**
|
|
@@ -110,8 +119,9 @@ export class SPolylineItem extends SGraphyItem {
|
|
|
* @param index 添加到的索引
|
|
|
* */
|
|
|
private delPoint(index: number): void {
|
|
|
- if (this.canHandle(index)) {
|
|
|
+ if (this.canHandle(index) && this.pointList.length > 2) {
|
|
|
this.pointList.splice(index, 0);
|
|
|
+ this.update();
|
|
|
}
|
|
|
} // Function delPoint
|
|
|
|
|
@@ -126,8 +136,15 @@ export class SPolylineItem extends SGraphyItem {
|
|
|
if (this.status == SRelationState.Create) {
|
|
|
this.addPoint(new SPoint(event.x, event.y));
|
|
|
return true;
|
|
|
+ } else if (this.status == SRelationState.Edit) {
|
|
|
+ this.findNearestPoint(new SPoint(event.x, event.y));
|
|
|
+ if (event.altKey && this.canHandle(this.curIndex)) {
|
|
|
+ this.pointList.splice(this.curIndex, 1);
|
|
|
+ this.curIndex = -1;
|
|
|
+ this.update();
|
|
|
+ }
|
|
|
+ return true;
|
|
|
} else {
|
|
|
- //拖动点
|
|
|
}
|
|
|
}
|
|
|
return super.onMouseDown(event);
|
|
@@ -140,24 +157,39 @@ export class SPolylineItem extends SGraphyItem {
|
|
|
* @return boolean 是否处理事件
|
|
|
* */
|
|
|
onMouseMove(event: SMouseEvent): boolean {
|
|
|
- if (event.buttons == 1) {
|
|
|
- if (this.status == SRelationState.Create) {
|
|
|
- if (this.lastPoint) {
|
|
|
- this.lastPoint.x = event.x;
|
|
|
- this.lastPoint.y = event.y;
|
|
|
- } else {
|
|
|
- this.lastPoint = new SPoint(event.x, event.y);
|
|
|
- }
|
|
|
- return true;
|
|
|
+ if (this.status == SRelationState.Create) {
|
|
|
+ if (this.lastPoint) {
|
|
|
+ this.lastPoint.x = event.x;
|
|
|
+ this.lastPoint.y = event.y;
|
|
|
} else {
|
|
|
- return super.onMouseMove(event);
|
|
|
+ this.lastPoint = new SPoint(event.x, event.y);
|
|
|
+ }
|
|
|
+ this.update();
|
|
|
+ return true;
|
|
|
+ } else if (this.status == SRelationState.Edit) {
|
|
|
+ if (this.canHandle(this.curIndex)) {
|
|
|
+ this.pointList[this.curIndex].x = event.x;
|
|
|
+ this.pointList[this.curIndex].y = event.y;
|
|
|
}
|
|
|
+ this.update();
|
|
|
+ return true;
|
|
|
} else {
|
|
|
return super.onMouseMove(event);
|
|
|
}
|
|
|
} // Function onMouseMove()
|
|
|
|
|
|
/**
|
|
|
+ * 鼠标移动事件
|
|
|
+ *
|
|
|
+ * @param event 鼠标事件
|
|
|
+ * @return boolean 是否处理事件
|
|
|
+ * */
|
|
|
+ onMouseUp(event: SMouseEvent): boolean {
|
|
|
+ this.curIndex = -1;
|
|
|
+ return true;
|
|
|
+ } // Function onMouseMove()
|
|
|
+
|
|
|
+ /**
|
|
|
* 鼠标双击事件
|
|
|
*
|
|
|
* @param event 事件参数
|
|
@@ -166,7 +198,30 @@ export class SPolylineItem extends SGraphyItem {
|
|
|
onDoubleClick(event: SMouseEvent): boolean {
|
|
|
if (this.status == SRelationState.Create) {
|
|
|
this.status = SRelationState.Normal;
|
|
|
+ } else if (this.status == SRelationState.Edit) {
|
|
|
+ let len = SMathUtil.pointToLine(
|
|
|
+ new SPoint(event.x, event.y),
|
|
|
+ new SLine(this.pointList[0], this.pointList[1])
|
|
|
+ ),
|
|
|
+ index = 0;
|
|
|
+ if (this.pointList.length > 2) {
|
|
|
+ for (let i = 1; i < this.pointList.length - 1; i++) {
|
|
|
+ let dis = SMathUtil.pointToLine(
|
|
|
+ new SPoint(event.x, event.y),
|
|
|
+ new SLine(this.pointList[i], this.pointList[i + 1])
|
|
|
+ );
|
|
|
+ if (dis.MinDis < len.MinDis) {
|
|
|
+ len = dis;
|
|
|
+ index = i;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (len.Point) {
|
|
|
+ this.pointList.splice(index + 1, 0, len.Point);
|
|
|
+ this.update();
|
|
|
+ }
|
|
|
}
|
|
|
+ this.$emit("onDoubleClick", event);
|
|
|
return true;
|
|
|
} // Function onDoubleClick()
|
|
|
|
|
@@ -182,6 +237,27 @@ export class SPolylineItem extends SGraphyItem {
|
|
|
} // Function onKeyUp()
|
|
|
|
|
|
/**
|
|
|
+ * 获取点击点与点集中距离最近点
|
|
|
+ *
|
|
|
+ * @param p 鼠标点击点
|
|
|
+ * */
|
|
|
+ findNearestPoint(p: SPoint): void {
|
|
|
+ let len = this.sceneDis;
|
|
|
+ for (let i = 0; i < this.pointList.length; i++) {
|
|
|
+ let dis = SMathUtil.pointDistance(
|
|
|
+ p.x,
|
|
|
+ p.y,
|
|
|
+ this.pointList[i].x,
|
|
|
+ this.pointList[i].y
|
|
|
+ );
|
|
|
+ if (dis < len) {
|
|
|
+ len = dis;
|
|
|
+ this.curIndex = i;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } // Function findNearestPoint()
|
|
|
+
|
|
|
+ /**
|
|
|
* 判断点是否在区域内
|
|
|
*
|
|
|
* @param x
|