|
@@ -37,19 +37,18 @@ import {
|
|
|
} from "@persagy-web/graph";
|
|
|
|
|
|
/**
|
|
|
- * 折线item
|
|
|
+ * 折线 item
|
|
|
*
|
|
|
- * @author 郝建龙
|
|
|
- * */
|
|
|
-
|
|
|
+ * @author 郝建龙 <haojianlong@sagacloud.cn>
|
|
|
+ */
|
|
|
export class SPolylineItem extends SGraphItem {
|
|
|
- /** X坐标最小值 */
|
|
|
+ /** X 坐标最小值 */
|
|
|
private minX = Number.MAX_SAFE_INTEGER;
|
|
|
- /** X坐标最大值 */
|
|
|
+ /** X 坐标最大值 */
|
|
|
private maxX = Number.MIN_SAFE_INTEGER;
|
|
|
- /** Y坐标最小值 */
|
|
|
+ /** Y 坐标最小值 */
|
|
|
private minY = Number.MAX_SAFE_INTEGER;
|
|
|
- /** Y坐标最大值 */
|
|
|
+ /** Y 坐标最大值 */
|
|
|
private maxY = Number.MIN_SAFE_INTEGER;
|
|
|
/** 折点信息 */
|
|
|
pointList: SPoint[] = [];
|
|
@@ -63,6 +62,7 @@ export class SPolylineItem extends SGraphItem {
|
|
|
this.undoStack.clear();
|
|
|
this.update();
|
|
|
} // Set status
|
|
|
+
|
|
|
/** 鼠标移动时的点 */
|
|
|
protected lastPoint: SPoint | null = null;
|
|
|
/** 线条颜色 */
|
|
@@ -74,6 +74,7 @@ export class SPolylineItem extends SGraphItem {
|
|
|
this._strokeColor = v;
|
|
|
this.update();
|
|
|
} // Set strokeColor
|
|
|
+
|
|
|
/** 填充色 */
|
|
|
_fillColor: SColor = new SColor("#2196f3");
|
|
|
get fillColor(): SColor {
|
|
@@ -83,6 +84,7 @@ export class SPolylineItem extends SGraphItem {
|
|
|
this._fillColor = v;
|
|
|
this.update();
|
|
|
} // Set fillColor
|
|
|
+
|
|
|
/** 线条宽度 */
|
|
|
_lineWidth: number = 1;
|
|
|
get lineWidth(): number {
|
|
@@ -92,6 +94,7 @@ export class SPolylineItem extends SGraphItem {
|
|
|
this._lineWidth = v;
|
|
|
this.update();
|
|
|
} // Set lineWidth
|
|
|
+
|
|
|
/** 边框样式 */
|
|
|
_lineStyle: SLineStyle = SLineStyle.Solid;
|
|
|
get lineStyle(): SLineStyle {
|
|
@@ -101,6 +104,7 @@ export class SPolylineItem extends SGraphItem {
|
|
|
this._lineStyle = v;
|
|
|
this.update();
|
|
|
} // Set lineStyle
|
|
|
+
|
|
|
/** 全局灵敏度 */
|
|
|
dis: number = 10;
|
|
|
/** 灵敏度转换为场景长度 */
|
|
@@ -109,31 +113,31 @@ export class SPolylineItem extends SGraphItem {
|
|
|
protected curIndex: number = -1;
|
|
|
/** 当前点 */
|
|
|
private curPoint: SPoint | null = null;
|
|
|
- /** undo/redo堆栈 */
|
|
|
+ /** undo/redo 堆栈 */
|
|
|
private undoStack: SUndoStack = new SUndoStack();
|
|
|
|
|
|
/**
|
|
|
* 构造函数
|
|
|
*
|
|
|
- * @param parent 父级
|
|
|
- * @param list 坐标集合
|
|
|
- * */
|
|
|
+ * @param parent 父级
|
|
|
+ * @param list 坐标集合
|
|
|
+ */
|
|
|
constructor(parent: null | SGraphItem, list: SPoint[]);
|
|
|
|
|
|
/**
|
|
|
* 构造函数
|
|
|
*
|
|
|
- * @param parent 父级
|
|
|
- * @param list 第一个坐标
|
|
|
- * */
|
|
|
+ * @param parent 父级
|
|
|
+ * @param list 第一个坐标
|
|
|
+ */
|
|
|
constructor(parent: null | SGraphItem, list: SPoint);
|
|
|
|
|
|
/**
|
|
|
* 构造函数
|
|
|
*
|
|
|
- * @param parent 父级
|
|
|
- * @param list 第一个坐标|坐标集合
|
|
|
- * */
|
|
|
+ * @param parent 父级
|
|
|
+ * @param list 第一个坐标|坐标集合
|
|
|
+ */
|
|
|
constructor(parent: null | SGraphItem, list: SPoint | SPoint[]) {
|
|
|
super(parent);
|
|
|
if (list instanceof SPoint) {
|
|
@@ -146,9 +150,9 @@ export class SPolylineItem extends SGraphItem {
|
|
|
/**
|
|
|
* 添加点至数组中
|
|
|
*
|
|
|
- * @param p 添加的点
|
|
|
- * @param index 添加到的索引
|
|
|
- * */
|
|
|
+ * @param p 添加的点
|
|
|
+ * @param index 添加到的索引
|
|
|
+ */
|
|
|
private addPoint(p: SPoint, index?: number): void {
|
|
|
if (index && this.canHandle(index)) {
|
|
|
this.pointList.splice(index, 0, p);
|
|
@@ -161,15 +165,16 @@ export class SPolylineItem extends SGraphItem {
|
|
|
this.pointList.push(p);
|
|
|
this.recordAction(SGraphPointListInsert, [this.pointList, p]);
|
|
|
}
|
|
|
+
|
|
|
this.update();
|
|
|
} // Function addPoint()
|
|
|
|
|
|
/**
|
|
|
* 是否可以添加点到数组中
|
|
|
*
|
|
|
- * @param index 要添加到的索引
|
|
|
- * @return boolean 是否可添加
|
|
|
- * */
|
|
|
+ * @param index 要添加到的索引
|
|
|
+ * @return 是否可添加
|
|
|
+ */
|
|
|
private canHandle(index: number): boolean {
|
|
|
return index >= 0 && index <= this.pointList.length;
|
|
|
} // Function canHandle()
|
|
@@ -177,8 +182,8 @@ export class SPolylineItem extends SGraphItem {
|
|
|
/**
|
|
|
* 根据索引删除点
|
|
|
*
|
|
|
- * @param index 删除点
|
|
|
- * */
|
|
|
+ * @param index 删除点
|
|
|
+ */
|
|
|
deletePoint(index: number): void {
|
|
|
if (this.canHandle(index) && this.pointList.length > 2) {
|
|
|
const p = new SPoint(
|
|
@@ -200,15 +205,16 @@ export class SPolylineItem extends SGraphItem {
|
|
|
/**
|
|
|
* 鼠标按下事件
|
|
|
*
|
|
|
- * @param event 鼠标事件
|
|
|
- * @return boolean 是否处理事件
|
|
|
- * */
|
|
|
+ * @param event 鼠标事件
|
|
|
+ * @return 是否处理事件
|
|
|
+ */
|
|
|
onMouseDown(event: SMouseEvent): boolean {
|
|
|
this.curIndex = -1;
|
|
|
this.curPoint = null;
|
|
|
if (event.shiftKey) {
|
|
|
event = this.compare(event);
|
|
|
}
|
|
|
+
|
|
|
if (event.buttons == 1) {
|
|
|
if (this.status == SItemStatus.Create) {
|
|
|
this.addPoint(new SPoint(event.x, event.y));
|
|
@@ -220,29 +226,33 @@ export class SPolylineItem extends SGraphItem {
|
|
|
if (this.curIndex < 0) {
|
|
|
this.findAddPos(new SPoint(event.x, event.y));
|
|
|
}
|
|
|
+
|
|
|
// 删除点
|
|
|
if (event.altKey && this.canHandle(this.curIndex)) {
|
|
|
this.deletePoint(this.curIndex);
|
|
|
}
|
|
|
+
|
|
|
this.update();
|
|
|
return true;
|
|
|
} else {
|
|
|
return super.onMouseDown(event);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
return super.onMouseDown(event);
|
|
|
} // Function onMouseDown()
|
|
|
|
|
|
/**
|
|
|
* 鼠标移动事件
|
|
|
*
|
|
|
- * @param event 鼠标事件
|
|
|
- * @return boolean 是否处理事件
|
|
|
- * */
|
|
|
+ * @param event 鼠标事件
|
|
|
+ * @return 是否处理事件
|
|
|
+ */
|
|
|
onMouseMove(event: SMouseEvent): boolean {
|
|
|
if (event.shiftKey) {
|
|
|
event = this.compare(event);
|
|
|
}
|
|
|
+
|
|
|
if (this.status == SItemStatus.Create) {
|
|
|
if (this.lastPoint) {
|
|
|
this.lastPoint.x = event.x;
|
|
@@ -250,6 +260,7 @@ export class SPolylineItem extends SGraphItem {
|
|
|
} else {
|
|
|
this.lastPoint = new SPoint(event.x, event.y);
|
|
|
}
|
|
|
+
|
|
|
this.update();
|
|
|
return true;
|
|
|
} else if (this.status == SItemStatus.Edit) {
|
|
@@ -259,6 +270,7 @@ export class SPolylineItem extends SGraphItem {
|
|
|
this.pointList[this.curIndex].y = event.y;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
this.update();
|
|
|
return true;
|
|
|
} else {
|
|
@@ -269,9 +281,9 @@ export class SPolylineItem extends SGraphItem {
|
|
|
/**
|
|
|
* 鼠标移动事件
|
|
|
*
|
|
|
- * @param event 鼠标事件
|
|
|
- * @return boolean 是否处理事件
|
|
|
- * */
|
|
|
+ * @param event 鼠标事件
|
|
|
+ * @return 是否处理事件
|
|
|
+ */
|
|
|
onMouseUp(event: SMouseEvent): boolean {
|
|
|
if (this.status == SItemStatus.Edit) {
|
|
|
if (this.curIndex > -1) {
|
|
@@ -290,14 +302,15 @@ export class SPolylineItem extends SGraphItem {
|
|
|
this.moveToOrigin(this.x, this.y);
|
|
|
return super.onMouseUp(event);
|
|
|
}
|
|
|
+
|
|
|
return true;
|
|
|
} // Function onMouseUp()
|
|
|
|
|
|
/**
|
|
|
* 鼠标双击事件
|
|
|
*
|
|
|
- * @param event 事件参数
|
|
|
- * @return boolean
|
|
|
+ * @param event 事件参数
|
|
|
+ * @return 是否处理
|
|
|
*/
|
|
|
onDoubleClick(event: SMouseEvent): boolean {
|
|
|
if (this.status == SItemStatus.Normal) {
|
|
@@ -313,6 +326,7 @@ export class SPolylineItem extends SGraphItem {
|
|
|
this.$emit("finishCreated");
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
this.$emit("onDoubleClick", event);
|
|
|
return true;
|
|
|
} // Function onDoubleClick()
|
|
@@ -320,7 +334,7 @@ export class SPolylineItem extends SGraphItem {
|
|
|
/***
|
|
|
* 键盘按键弹起事件
|
|
|
*
|
|
|
- * @param event 事件参数
|
|
|
+ * @param event 事件参数
|
|
|
*/
|
|
|
onKeyUp(event: KeyboardEvent): void {
|
|
|
if (event.keyCode == SKeyCode.Enter) {
|
|
@@ -328,10 +342,12 @@ export class SPolylineItem extends SGraphItem {
|
|
|
if (this.status == SItemStatus.Create) {
|
|
|
this.$emit("finishCreated");
|
|
|
}
|
|
|
+
|
|
|
this.status = SItemStatus.Normal;
|
|
|
this.releaseItem();
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
// delete删除点
|
|
|
if (
|
|
|
event.keyCode == SKeyCode.Delete &&
|
|
@@ -344,9 +360,9 @@ export class SPolylineItem extends SGraphItem {
|
|
|
/**
|
|
|
* 移动后处理所有坐标,并肩原点置为场景原点
|
|
|
*
|
|
|
- * @param x x坐标
|
|
|
- * @param y y坐标
|
|
|
- * */
|
|
|
+ * @param x x 坐标
|
|
|
+ * @param y y 坐标
|
|
|
+ */
|
|
|
moveToOrigin(x: number, y: number): void {
|
|
|
super.moveToOrigin(x, y);
|
|
|
this.pointList = this.pointList.map(t => {
|
|
@@ -361,8 +377,8 @@ export class SPolylineItem extends SGraphItem {
|
|
|
/**
|
|
|
* 获取点击点与点集中距离最近点
|
|
|
*
|
|
|
- * @param p 鼠标点击点
|
|
|
- * */
|
|
|
+ * @param p 鼠标点击点
|
|
|
+ */
|
|
|
findNearestPoint(p: SPoint): void {
|
|
|
let len = this.sceneDis;
|
|
|
for (let i = 0; i < this.pointList.length; i++) {
|
|
@@ -386,8 +402,8 @@ export class SPolylineItem extends SGraphItem {
|
|
|
/**
|
|
|
* 计算增加点的位置
|
|
|
*
|
|
|
- * @param p 鼠标点击点
|
|
|
- * */
|
|
|
+ * @param p 鼠标点击点
|
|
|
+ */
|
|
|
findAddPos(p: SPoint): void {
|
|
|
let len = SMathUtil.pointToLine(
|
|
|
p,
|
|
@@ -406,19 +422,18 @@ export class SPolylineItem extends SGraphItem {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- if (len.MinDis < this.sceneDis) {
|
|
|
- if (len.Point) {
|
|
|
- this.addPoint(len.Point, index + 1);
|
|
|
- }
|
|
|
+
|
|
|
+ if (len.MinDis < this.sceneDis && len.Point) {
|
|
|
+ this.addPoint(len.Point, index + 1);
|
|
|
}
|
|
|
} // Function findAddPos()
|
|
|
|
|
|
/**
|
|
|
- * shift垂直水平创建或编辑
|
|
|
+ * shift 垂直水平创建或编辑
|
|
|
*
|
|
|
- * @param event 事件
|
|
|
- * @return 事件对象
|
|
|
- * */
|
|
|
+ * @param event 事件
|
|
|
+ * @return 事件对象
|
|
|
+ */
|
|
|
compare(event: SMouseEvent): SMouseEvent {
|
|
|
if (this.pointList.length) {
|
|
|
let last = new SPoint(event.x, event.y);
|
|
@@ -429,6 +444,7 @@ export class SPolylineItem extends SGraphItem {
|
|
|
last = this.pointList[this.curIndex - 1];
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
const dx = Math.abs(event.x - last.x);
|
|
|
const dy = Math.abs(event.y - last.y);
|
|
|
if (dy > dx) {
|
|
@@ -437,14 +453,15 @@ export class SPolylineItem extends SGraphItem {
|
|
|
event.y = last.y;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
return event;
|
|
|
} // Function compare()
|
|
|
|
|
|
/**
|
|
|
* 记录相关动作并推入栈中
|
|
|
*
|
|
|
- * @param SGraphCommand 相关命令类
|
|
|
- * @param any 对应传入参数
|
|
|
+ * @param SGraphCommand 相关命令类
|
|
|
+ * @param any 对应传入参数
|
|
|
*/
|
|
|
protected recordAction(SGraphCommand: any, any: any[]): void {
|
|
|
// 记录相关命令并推入堆栈中
|
|
@@ -453,10 +470,10 @@ export class SPolylineItem extends SGraphItem {
|
|
|
} // Function recordAction()
|
|
|
|
|
|
/**
|
|
|
- * Item对象边界区域
|
|
|
+ * Item 对象边界区域
|
|
|
*
|
|
|
- * @return SRect 外接矩阵
|
|
|
- * */
|
|
|
+ * @return 外接矩阵
|
|
|
+ */
|
|
|
boundingRect(): SRect {
|
|
|
if (this.pointList.length) {
|
|
|
this.minX = this.pointList[0].x;
|
|
@@ -469,17 +486,21 @@ export class SPolylineItem extends SGraphItem {
|
|
|
if (x < this.minX) {
|
|
|
this.minX = x;
|
|
|
}
|
|
|
+
|
|
|
if (y < this.minY) {
|
|
|
this.minY = y;
|
|
|
}
|
|
|
+
|
|
|
if (x > this.maxX) {
|
|
|
this.maxX = x;
|
|
|
}
|
|
|
+
|
|
|
if (y > this.maxY) {
|
|
|
this.maxY = y;
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
+
|
|
|
return new SRect(
|
|
|
this.minX,
|
|
|
this.minY,
|
|
@@ -491,9 +512,9 @@ export class SPolylineItem extends SGraphItem {
|
|
|
/**
|
|
|
* 判断点是否在区域内
|
|
|
*
|
|
|
- * @param x
|
|
|
- * @param y
|
|
|
- * @return true-是
|
|
|
+ * @param x x 坐标
|
|
|
+ * @param y y 坐标
|
|
|
+ * @return 是否在区域内
|
|
|
*/
|
|
|
contains(x: number, y: number): boolean {
|
|
|
let p = new SPoint(x, y);
|
|
@@ -516,7 +537,6 @@ export class SPolylineItem extends SGraphItem {
|
|
|
|
|
|
/**
|
|
|
* 撤销操作
|
|
|
- *
|
|
|
*/
|
|
|
undo(): void {
|
|
|
if (this._status != SItemStatus.Normal) {
|
|
@@ -526,7 +546,6 @@ export class SPolylineItem extends SGraphItem {
|
|
|
|
|
|
/**
|
|
|
* 重做操作
|
|
|
- *
|
|
|
*/
|
|
|
redo(): void {
|
|
|
if (this._status != SItemStatus.Normal) {
|
|
@@ -536,8 +555,7 @@ export class SPolylineItem extends SGraphItem {
|
|
|
|
|
|
/**
|
|
|
* 取消操作执行
|
|
|
- *
|
|
|
- * */
|
|
|
+ */
|
|
|
cancelOperate(): void {
|
|
|
if (this.status == SItemStatus.Create) {
|
|
|
this.parent = null;
|
|
@@ -551,8 +569,8 @@ export class SPolylineItem extends SGraphItem {
|
|
|
/**
|
|
|
* 绘制基本图形
|
|
|
*
|
|
|
- * @param painter painter对象
|
|
|
- * */
|
|
|
+ * @param painter 绘制对象
|
|
|
+ */
|
|
|
drawBaseLine(painter: SPainter): void {
|
|
|
// 绘制基本图形
|
|
|
if (this.lineStyle == SLineStyle.Dashed) {
|
|
@@ -566,14 +584,15 @@ export class SPolylineItem extends SGraphItem {
|
|
|
painter.toPx(this.lineWidth)
|
|
|
];
|
|
|
}
|
|
|
+
|
|
|
painter.pen.color = this.strokeColor;
|
|
|
painter.drawPolyline(this.pointList);
|
|
|
} // Function drawBaseLine()
|
|
|
|
|
|
/**
|
|
|
- * Item绘制操作
|
|
|
+ * Item 绘制操作
|
|
|
*
|
|
|
- * @param painter painter对象
|
|
|
+ * @param painter 绘制对象
|
|
|
*/
|
|
|
onDraw(painter: SPainter): void {
|
|
|
// 缓存场景长度
|
|
@@ -592,6 +611,7 @@ export class SPolylineItem extends SGraphItem {
|
|
|
if (i == this.curIndex) {
|
|
|
painter.brush.color = this.fillColor;
|
|
|
}
|
|
|
+
|
|
|
painter.drawCircle(t.x, t.y, painter.toPx(5));
|
|
|
});
|
|
|
} else if (this.status == SItemStatus.Edit) {
|
|
@@ -603,6 +623,7 @@ export class SPolylineItem extends SGraphItem {
|
|
|
if (i == this.curIndex) {
|
|
|
painter.brush.color = this.fillColor;
|
|
|
}
|
|
|
+
|
|
|
painter.drawCircle(t.x, t.y, painter.toPx(5));
|
|
|
});
|
|
|
} else {
|
|
@@ -614,6 +635,7 @@ export class SPolylineItem extends SGraphItem {
|
|
|
painter.shadow.shadowOffsetX = 5;
|
|
|
painter.shadow.shadowOffsetY = 5;
|
|
|
}
|
|
|
+
|
|
|
// 绘制基本图形
|
|
|
this.drawBaseLine(painter);
|
|
|
}
|