|
@@ -24,10 +24,10 @@
|
|
|
* *********************************************************************************************************************
|
|
|
*/
|
|
|
|
|
|
-import { SColor, SLine, SPainter, SPoint, SRect } from "@persagy-web/draw";
|
|
|
-import { SMouseButton, SMouseEvent, SUndoStack } from "@persagy-web/base";
|
|
|
-import { SMathUtil } from "../utils/SMathUtil";
|
|
|
-import { SItemStatus } from "..";
|
|
|
+import {SColor, SLine, SPainter, SPoint, SRect} from "@persagy-web/draw";
|
|
|
+import {SMouseButton, SMouseEvent, SUndoStack} from "@persagy-web/base";
|
|
|
+import {SMathUtil} from "../utils/SMathUtil";
|
|
|
+import {SItemStatus} from "..";
|
|
|
import {
|
|
|
SGraphItem,
|
|
|
SGraphPointListInsert,
|
|
@@ -54,72 +54,79 @@ export class SLineItem extends SGraphItem {
|
|
|
private _line: SPoint[] = [];
|
|
|
get line(): SPoint[] {
|
|
|
return this._line;
|
|
|
- } // Get line
|
|
|
+ }
|
|
|
+
|
|
|
set line(arr: SPoint[]) {
|
|
|
this._line = arr;
|
|
|
this.update();
|
|
|
- } // Set line
|
|
|
+ }
|
|
|
|
|
|
/** 是否完成绘制 */
|
|
|
protected _status: SItemStatus = SItemStatus.Normal;
|
|
|
get status(): SItemStatus {
|
|
|
return this._status;
|
|
|
- } // Get status
|
|
|
+ }
|
|
|
+
|
|
|
set status(v: SItemStatus) {
|
|
|
this._status = v;
|
|
|
this.undoStack.clear();
|
|
|
this.update();
|
|
|
- } // Set status
|
|
|
+ }
|
|
|
|
|
|
/** 线条颜色 */
|
|
|
private _strokeColor: SColor = SColor.Black;
|
|
|
get strokeColor(): SColor {
|
|
|
return this._strokeColor;
|
|
|
- } // Get strokeColor
|
|
|
+ }
|
|
|
+
|
|
|
set strokeColor(v: SColor) {
|
|
|
this._strokeColor = v;
|
|
|
this.update();
|
|
|
- } // Set strokeColor
|
|
|
+ }
|
|
|
|
|
|
/** 线条样式 */
|
|
|
private _lineStyle: SLineStyle = SLineStyle.Solid;
|
|
|
get lineStyle(): SLineStyle {
|
|
|
return this._lineStyle;
|
|
|
- } // Get lineStyle
|
|
|
+ }
|
|
|
+
|
|
|
set lineStyle(v: SLineStyle) {
|
|
|
this._lineStyle = v;
|
|
|
this.update();
|
|
|
- } // Set lineStyle
|
|
|
+ }
|
|
|
|
|
|
/** 端点填充色 */
|
|
|
private _fillColor: SColor = SColor.White;
|
|
|
get fillColor(): SColor {
|
|
|
return this._fillColor;
|
|
|
- } // Get fillColor
|
|
|
+ }
|
|
|
+
|
|
|
set fillColor(v: SColor) {
|
|
|
this._fillColor = v;
|
|
|
this.update();
|
|
|
- } // Set fillColor
|
|
|
+ }
|
|
|
|
|
|
/** 选中端点填充色 */
|
|
|
private _activeFillColor: SColor = new SColor("#2196f3");
|
|
|
get activeFillColor(): SColor {
|
|
|
return this._activeFillColor;
|
|
|
- } // Get activeFillColor
|
|
|
+ }
|
|
|
+
|
|
|
set activeFillColor(v: SColor) {
|
|
|
this._activeFillColor = v;
|
|
|
this.update();
|
|
|
- } // Set activeFillColor
|
|
|
+ }
|
|
|
|
|
|
/** 线条宽度 */
|
|
|
private _lineWidth: number = 1;
|
|
|
get lineWidth(): number {
|
|
|
return this._lineWidth;
|
|
|
- } // Get lineWidth
|
|
|
+ }
|
|
|
+
|
|
|
set lineWidth(v: number) {
|
|
|
this._lineWidth = v;
|
|
|
this.update();
|
|
|
- } // Set lineWidth
|
|
|
+ }
|
|
|
|
|
|
/** 拖动灵敏度 */
|
|
|
dis: number = 5;
|
|
@@ -167,23 +174,25 @@ export class SLineItem extends SGraphItem {
|
|
|
*/
|
|
|
constructor(parent: SGraphItem | null, line?: SPoint | SPoint[]) {
|
|
|
super(parent);
|
|
|
+ // 坐标集合存在时
|
|
|
if (line) {
|
|
|
+ // 坐标集合出现在 SPoint 的实例对象上
|
|
|
if (line instanceof SPoint) {
|
|
|
this.line.push(line);
|
|
|
- } else {
|
|
|
+ } else { // 没有在 SPoint 的实例对象上
|
|
|
this.line = line;
|
|
|
}
|
|
|
- } else {
|
|
|
+ } else { // 坐标集合不存在时
|
|
|
this.line = [];
|
|
|
}
|
|
|
- } // Constructor
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 点发生变化
|
|
|
*/
|
|
|
protected pointChange(): void {
|
|
|
// do nothing
|
|
|
- } // Function pointChange()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 添加点至数组中
|
|
@@ -191,10 +200,11 @@ export class SLineItem extends SGraphItem {
|
|
|
* @param p 添加的点
|
|
|
*/
|
|
|
private addPoint(p: SPoint): void {
|
|
|
+ // 坐标集合长度大于2时
|
|
|
if (this.line.length < 2) {
|
|
|
this.line.push(p);
|
|
|
this.recordAction(SGraphPointListInsert, [this.line, p]);
|
|
|
- } else {
|
|
|
+ } else { // 坐标集合长度不大于2时
|
|
|
this.line[1] = p;
|
|
|
this.recordAction(SGraphPointListInsert, [this.line, p, 1]);
|
|
|
this.status = SItemStatus.Normal;
|
|
@@ -203,7 +213,7 @@ export class SLineItem extends SGraphItem {
|
|
|
this.pointChange();
|
|
|
}
|
|
|
this.update();
|
|
|
- } // Function addPoint()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 鼠标双击事件
|
|
@@ -212,16 +222,17 @@ export class SLineItem extends SGraphItem {
|
|
|
* @return 是否处理事件
|
|
|
*/
|
|
|
onDoubleClick(event: SMouseEvent): boolean {
|
|
|
+ // 如果为show状态 双击改对象则需改为编辑状态
|
|
|
if (this.status == SItemStatus.Normal) {
|
|
|
this.status = SItemStatus.Edit;
|
|
|
this.grabItem(this);
|
|
|
- } else if (this.status == SItemStatus.Edit) {
|
|
|
+ } else if (this.status == SItemStatus.Edit) { // 处于编辑状态时
|
|
|
this.status = SItemStatus.Normal;
|
|
|
this.releaseItem();
|
|
|
}
|
|
|
this.update();
|
|
|
return true;
|
|
|
- } // Function onDoubleClick()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 鼠标按下事件
|
|
@@ -232,23 +243,25 @@ export class SLineItem extends SGraphItem {
|
|
|
onMouseDown(event: SMouseEvent): boolean {
|
|
|
this.curIndex = -1;
|
|
|
this.curPoint = null;
|
|
|
+ // 按下 shiftKey 键
|
|
|
if (event.shiftKey) {
|
|
|
event = this.compare(event);
|
|
|
}
|
|
|
+ // 按下鼠标左键
|
|
|
if (event.buttons == SMouseButton.LeftButton) {
|
|
|
- if (this.status == SItemStatus.Normal) {
|
|
|
+ if (this.status == SItemStatus.Normal) { //标准状态时
|
|
|
return super.onMouseDown(event);
|
|
|
- } else if (this.status == SItemStatus.Edit) {
|
|
|
+ } else if (this.status == SItemStatus.Edit) { // 编辑状态时
|
|
|
// 判断是否点击到端点上(获取端点索引值)
|
|
|
this.findNearestPoint(new SPoint(event.x, event.y));
|
|
|
- } else if (this.status == SItemStatus.Create) {
|
|
|
+ } else if (this.status == SItemStatus.Create) { // 创建状态时
|
|
|
this.addPoint(new SPoint(event.x, event.y));
|
|
|
return true;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
return true;
|
|
|
- } // Function onMouseDown()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 鼠标抬起事件
|
|
@@ -257,7 +270,9 @@ export class SLineItem extends SGraphItem {
|
|
|
* @return 是否处理事件
|
|
|
*/
|
|
|
onMouseUp(event: SMouseEvent): boolean {
|
|
|
+ // 处于编辑状态时
|
|
|
if (this.status == SItemStatus.Edit) {
|
|
|
+ // 当前点索引大于 -1 时
|
|
|
if (this.curIndex > -1) {
|
|
|
const p = new SPoint(
|
|
|
this.line[this.curIndex].x,
|
|
@@ -270,7 +285,7 @@ export class SLineItem extends SGraphItem {
|
|
|
this.curIndex
|
|
|
]);
|
|
|
}
|
|
|
- } else if (this.status == SItemStatus.Normal) {
|
|
|
+ } else if (this.status == SItemStatus.Normal) { // 标准状态时
|
|
|
this.moveToOrigin(this.x, this.y);
|
|
|
return super.onMouseUp(event);
|
|
|
}
|
|
@@ -278,7 +293,7 @@ export class SLineItem extends SGraphItem {
|
|
|
this.curIndex = -1;
|
|
|
this.curPoint = null;
|
|
|
return true;
|
|
|
- } // Function onMouseUp()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 鼠标移动事件
|
|
@@ -287,16 +302,19 @@ export class SLineItem extends SGraphItem {
|
|
|
* @return 是否处理事件
|
|
|
*/
|
|
|
onMouseMove(event: SMouseEvent): boolean {
|
|
|
+ // 按下 shiftKey 键
|
|
|
if (event.shiftKey) {
|
|
|
event = this.compare(event);
|
|
|
}
|
|
|
|
|
|
+ // 处于创建状态时
|
|
|
if (this.status == SItemStatus.Create) {
|
|
|
if (this.line[0] instanceof SPoint) {
|
|
|
this.line[1] = new SPoint(event.x, event.y);
|
|
|
this.pointChange();
|
|
|
}
|
|
|
- } else if (this.status == SItemStatus.Edit) {
|
|
|
+ } else if (this.status == SItemStatus.Edit) { // 处于编辑状态时
|
|
|
+ // 当前索引不等于 -1 时
|
|
|
if (-1 != this.curIndex) {
|
|
|
this.line[this.curIndex].x = event.x;
|
|
|
this.line[this.curIndex].y = event.y;
|
|
@@ -308,7 +326,7 @@ export class SLineItem extends SGraphItem {
|
|
|
|
|
|
this.update();
|
|
|
return true;
|
|
|
- } // Function onMouseMove()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 获取点击点与 Point[] 中的点距离最近点
|
|
@@ -316,21 +334,24 @@ export class SLineItem extends SGraphItem {
|
|
|
* @param p 鼠标点击点
|
|
|
*/
|
|
|
findNearestPoint(p: SPoint): void {
|
|
|
+ // 拖动灵敏度
|
|
|
let len = this.sceneDis;
|
|
|
for (let i = 0; i < this.line.length; i++) {
|
|
|
+ // 计算点到点距离
|
|
|
let dis = SMathUtil.pointDistance(
|
|
|
p.x,
|
|
|
p.y,
|
|
|
this.line[i].x,
|
|
|
this.line[i].y
|
|
|
);
|
|
|
+ // 点到点的距离大于灵敏度时
|
|
|
if (dis < len) {
|
|
|
len = dis;
|
|
|
this.curIndex = i;
|
|
|
this.curPoint = new SPoint(this.line[this.curIndex]);
|
|
|
}
|
|
|
}
|
|
|
- } // Function findNearestPoint()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 记录相关动作并推入栈中
|
|
@@ -342,7 +363,7 @@ export class SLineItem extends SGraphItem {
|
|
|
// 记录相关命令并推入堆栈中 todo
|
|
|
const command = new SGraphCommand(this.scene, this, ...any);
|
|
|
this.undoStack.push(command);
|
|
|
- } // Function recordAction()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 移动后处理所有坐标,并肩原点置为场景原点
|
|
@@ -359,7 +380,7 @@ export class SLineItem extends SGraphItem {
|
|
|
});
|
|
|
this.x = 0;
|
|
|
this.y = 0;
|
|
|
- } // Function moveToOrigin()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* shift 垂直水平创建或编辑
|
|
@@ -368,14 +389,17 @@ export class SLineItem extends SGraphItem {
|
|
|
* @return 处理后的事件对象
|
|
|
*/
|
|
|
compare(event: SMouseEvent): SMouseEvent {
|
|
|
+ // 线段长度存在时
|
|
|
if (this.line.length) {
|
|
|
let last = new SPoint(event.x, event.y);
|
|
|
+ // 处于创建状态时
|
|
|
if (this.status == SItemStatus.Create) {
|
|
|
last = this.line[0];
|
|
|
- } else if (this.status == SItemStatus.Edit) {
|
|
|
+ } else if (this.status == SItemStatus.Edit) { // 处于编辑状态时
|
|
|
+ // 当前索引等于 1 时
|
|
|
if (this.curIndex == 1) {
|
|
|
last = this.line[0];
|
|
|
- } else if (this.curIndex == 0) {
|
|
|
+ } else if (this.curIndex == 0) { // 当前索引等于 0 时
|
|
|
last = this.line[1];
|
|
|
}
|
|
|
}
|
|
@@ -389,7 +413,7 @@ export class SLineItem extends SGraphItem {
|
|
|
}
|
|
|
|
|
|
return event;
|
|
|
- } // Function compare()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 判断点是否在区域内
|
|
@@ -399,8 +423,10 @@ export class SLineItem extends SGraphItem {
|
|
|
* @return 是否包含
|
|
|
*/
|
|
|
contains(x: number, y: number): boolean {
|
|
|
+ // 线段长度大于 2 时
|
|
|
if (this.line.length == 2) {
|
|
|
let p = new SPoint(x, y);
|
|
|
+ // 计算点到线段垂线与线段的交点
|
|
|
if (
|
|
|
SMathUtil.pointToLine(p, new SLine(this.line[0], this.line[1]))
|
|
|
.MinDis < this.dis
|
|
@@ -410,38 +436,41 @@ export class SLineItem extends SGraphItem {
|
|
|
}
|
|
|
|
|
|
return false;
|
|
|
- } // Function contains()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 撤销操作
|
|
|
*/
|
|
|
undo(): void {
|
|
|
+ // 处于标准状态时
|
|
|
if (this.status != SItemStatus.Normal) {
|
|
|
this.undoStack.undo();
|
|
|
}
|
|
|
- } // Function undo()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 重做操作
|
|
|
*/
|
|
|
redo(): void {
|
|
|
+ // 处于标准状态时
|
|
|
if (this.status != SItemStatus.Normal) {
|
|
|
this.undoStack.redo();
|
|
|
}
|
|
|
- } // Function redo()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 取消操作 item 事件
|
|
|
*/
|
|
|
cancelOperate(): void {
|
|
|
+ // 处于创建状态时
|
|
|
if (this.status == SItemStatus.Create) {
|
|
|
this.parent = null;
|
|
|
this.releaseItem();
|
|
|
- } else if (this.status == SItemStatus.Edit) {
|
|
|
+ } else if (this.status == SItemStatus.Edit) { // 处于编辑状态时
|
|
|
this.status = SItemStatus.Normal;
|
|
|
this.releaseItem();
|
|
|
}
|
|
|
- } // Function cancelOperate()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* Item 对象边界区域
|
|
@@ -449,6 +478,7 @@ export class SLineItem extends SGraphItem {
|
|
|
* @return 边界区域
|
|
|
*/
|
|
|
boundingRect(): SRect {
|
|
|
+ // 线段长度存在时
|
|
|
if (this.line.length) {
|
|
|
this.minX = this.line[0].x;
|
|
|
this.maxX = this.line[0].x;
|
|
@@ -457,15 +487,23 @@ export class SLineItem extends SGraphItem {
|
|
|
this.line.forEach(it => {
|
|
|
let x = it.x,
|
|
|
y = it.y;
|
|
|
+
|
|
|
+ // 如果数据 x 坐标小于 x 坐标最小值
|
|
|
if (x < this.minX) {
|
|
|
this.minX = x;
|
|
|
}
|
|
|
+
|
|
|
+ // 如果数据 y 坐标小于 y 坐标最小值
|
|
|
if (y < this.minY) {
|
|
|
this.minY = y;
|
|
|
}
|
|
|
+
|
|
|
+ // 如果数据 x 坐标大于 x 坐标最小值
|
|
|
if (x > this.maxX) {
|
|
|
this.maxX = x;
|
|
|
}
|
|
|
+
|
|
|
+ // 如果数据 y 坐标大于 y 坐标最小值
|
|
|
if (y > this.maxY) {
|
|
|
this.maxY = y;
|
|
|
}
|
|
@@ -478,7 +516,7 @@ export class SLineItem extends SGraphItem {
|
|
|
this.maxX - this.minX,
|
|
|
this.maxY - this.minY
|
|
|
);
|
|
|
- } // Function boundingRect()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* Item 绘制操作
|
|
@@ -489,21 +527,24 @@ export class SLineItem extends SGraphItem {
|
|
|
this.sceneDis = painter.toPx(this.dis);
|
|
|
painter.pen.lineWidth = painter.toPx(this.lineWidth);
|
|
|
painter.pen.color = this.strokeColor;
|
|
|
+ // 线段长度等于 2 时
|
|
|
if (this.line.length == 2) {
|
|
|
// 绘制直线
|
|
|
painter.pen.color = new SColor(this.strokeColor);
|
|
|
+ // 绘制基本图形,线样式是虚线时
|
|
|
if (this.lineStyle == SLineStyle.Dashed) {
|
|
|
painter.pen.lineDash = [
|
|
|
painter.toPx(this.lineWidth * 3),
|
|
|
painter.toPx(this.lineWidth * 7)
|
|
|
];
|
|
|
- } else if (this.lineStyle == SLineStyle.Dotted) {
|
|
|
+ } else if (this.lineStyle == SLineStyle.Dotted) { // 绘制基本图形,线样式是点线时
|
|
|
painter.pen.lineDash = [
|
|
|
painter.toPx(this.lineWidth),
|
|
|
painter.toPx(this.lineWidth)
|
|
|
];
|
|
|
}
|
|
|
|
|
|
+ // 选中状态并且处于标准状态
|
|
|
if (this.selected && this.status == SItemStatus.Normal) {
|
|
|
painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
|
|
|
painter.shadow.shadowBlur = 10;
|
|
@@ -513,6 +554,7 @@ export class SLineItem extends SGraphItem {
|
|
|
}
|
|
|
|
|
|
painter.drawLine(this.line[0], this.line[1]);
|
|
|
+ // 处于编辑状态或创建状态时
|
|
|
if (
|
|
|
this.status == SItemStatus.Edit ||
|
|
|
this.status == SItemStatus.Create
|
|
@@ -527,7 +569,8 @@ export class SLineItem extends SGraphItem {
|
|
|
painter.drawCircle(p.x, p.y, painter.toPx(5));
|
|
|
});
|
|
|
}
|
|
|
- } else if (this.line.length == 1) {
|
|
|
+ } else if (this.line.length == 1) { // 线段长度等于 1 时
|
|
|
+ // 处于编辑状态或创建状态时
|
|
|
if (
|
|
|
this.status == SItemStatus.Edit ||
|
|
|
this.status == SItemStatus.Create
|
|
@@ -541,5 +584,5 @@ export class SLineItem extends SGraphItem {
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
- } // Function onDraw()
|
|
|
-} // Class SLineItem
|
|
|
+ }
|
|
|
+}
|