|
@@ -24,18 +24,26 @@
|
|
|
* *********************************************************************************************************************
|
|
|
*/
|
|
|
|
|
|
-import {SArrowStyleType, SColor, SLine, SPainter, SPoint, SRect} from "@persagy-web/draw";
|
|
|
-import {SMouseButton, SMouseEvent, SUndoStack} from "@persagy-web/base";
|
|
|
-import {SItemStatus} from "@persagy-web/big";
|
|
|
-
|
|
|
+import {
|
|
|
+ SArrowStyleType,
|
|
|
+ SColor,
|
|
|
+ SLine,
|
|
|
+ SPainter,
|
|
|
+ SPoint,
|
|
|
+ SRect
|
|
|
+} from "@persagy-web/draw";
|
|
|
+import { SMouseButton, SMouseEvent, SUndoStack } from "@persagy-web/base";
|
|
|
+import { SItemStatus } from "@persagy-web/big";
|
|
|
|
|
|
import {
|
|
|
SLineStyle,
|
|
|
- SGraphItem, SGraphPointListInsert, SGraphPointListUpdate
|
|
|
+ SGraphItem,
|
|
|
+ SGraphPointListInsert,
|
|
|
+ SGraphPointListUpdate
|
|
|
} from "@persagy-web/graph/";
|
|
|
-import {SGraphEdit} from "..";
|
|
|
-import {SMathUtil} from '@persagy-web/big/lib/utils/SMathUtil';
|
|
|
-import {Marker} from "./../type/Marker";
|
|
|
+import { SGraphEdit } from "..";
|
|
|
+import { SMathUtil } from "@persagy-web/big/lib/utils/SMathUtil";
|
|
|
+import { Marker } from "./../type/Marker";
|
|
|
|
|
|
/**
|
|
|
* 折线编辑类
|
|
@@ -50,25 +58,26 @@ export class SBaseArrowEdit extends SGraphEdit {
|
|
|
/** 是否绘制完成 */
|
|
|
_status: SItemStatus = SItemStatus.Normal;
|
|
|
get status(): SItemStatus {
|
|
|
- return this._status;
|
|
|
+ return this._status;
|
|
|
} // Get status
|
|
|
set status(v: SItemStatus) {
|
|
|
- this._status = v;
|
|
|
- if (this.undoStack) {
|
|
|
- this.undoStack.clear();
|
|
|
- }
|
|
|
+ this._status = v;
|
|
|
+ // 命令栈存在
|
|
|
+ if (this.undoStack) {
|
|
|
+ this.undoStack.clear();
|
|
|
+ }
|
|
|
|
|
|
- this.update();
|
|
|
+ this.update();
|
|
|
} // Set status
|
|
|
|
|
|
/** 矩形两个对角 */
|
|
|
private _line: SPoint[] = [];
|
|
|
get line(): SPoint[] {
|
|
|
- return this._line;
|
|
|
+ return this._line;
|
|
|
} // Get line
|
|
|
set line(arr: SPoint[]) {
|
|
|
- this._line = arr;
|
|
|
- this.update();
|
|
|
+ this._line = arr;
|
|
|
+ this.update();
|
|
|
} // Get line
|
|
|
|
|
|
/** 矩形左上角 */
|
|
@@ -80,13 +89,13 @@ export class SBaseArrowEdit extends SGraphEdit {
|
|
|
/** 拖动灵敏度 */
|
|
|
private sceneDis: number = 5;
|
|
|
/** 是否垂直水平绘制 */
|
|
|
- private _verAndLeve: Boolean = false;
|
|
|
- get verAndLeve(): Boolean {
|
|
|
- return this._verAndLeve;
|
|
|
+ private _verAndLeve: boolean = false;
|
|
|
+ get verAndLeve(): boolean {
|
|
|
+ return this._verAndLeve;
|
|
|
} // Get verAndLeve
|
|
|
- set verAndLeve(bool: Boolean) {
|
|
|
- this._verAndLeve = bool;
|
|
|
- this.update();
|
|
|
+ set verAndLeve(bool: boolean) {
|
|
|
+ this._verAndLeve = bool;
|
|
|
+ this.update();
|
|
|
} // Set verAndLeve
|
|
|
|
|
|
/** 当前点索引 */
|
|
@@ -96,51 +105,51 @@ export class SBaseArrowEdit extends SGraphEdit {
|
|
|
/** 线条颜色 */
|
|
|
_strokeColor: SColor = SColor.Black;
|
|
|
get strokeColor(): SColor {
|
|
|
- return this._strokeColor;
|
|
|
+ return this._strokeColor;
|
|
|
} // Get strokeColor
|
|
|
set strokeColor(v: SColor) {
|
|
|
- this._strokeColor = v;
|
|
|
- this.update();
|
|
|
+ this._strokeColor = v;
|
|
|
+ this.update();
|
|
|
} // Set strokeColor
|
|
|
|
|
|
/** 填充色 */
|
|
|
_fillColor: SColor = new SColor("#2196f3");
|
|
|
get fillColor(): SColor {
|
|
|
- return this._fillColor;
|
|
|
+ return this._fillColor;
|
|
|
} // Get fillColor
|
|
|
set fillColor(v: SColor) {
|
|
|
- this._fillColor = v;
|
|
|
- this.update();
|
|
|
+ this._fillColor = v;
|
|
|
+ this.update();
|
|
|
} // Set fillColor
|
|
|
|
|
|
/** 选中端点填充色 */
|
|
|
private _activeFillColor: SColor = new SColor("#2196f3");
|
|
|
get activeFillColor(): SColor {
|
|
|
- return this._activeFillColor;
|
|
|
+ return this._activeFillColor;
|
|
|
} // Get activeFillColor
|
|
|
set activeFillColor(v: SColor) {
|
|
|
- this._activeFillColor = v;
|
|
|
- this.update();
|
|
|
+ this._activeFillColor = v;
|
|
|
+ this.update();
|
|
|
} // Set activeFillColor
|
|
|
|
|
|
/** 边框样式 */
|
|
|
_lineStyle: SLineStyle = SLineStyle.Solid;
|
|
|
get lineStyle(): SLineStyle {
|
|
|
- return this._lineStyle;
|
|
|
+ return this._lineStyle;
|
|
|
} // Get lineStyle
|
|
|
set lineStyle(v: SLineStyle) {
|
|
|
- this._lineStyle = v;
|
|
|
- this.update();
|
|
|
+ this._lineStyle = v;
|
|
|
+ this.update();
|
|
|
} // Set lineStyle
|
|
|
|
|
|
/** 线条宽度 */
|
|
|
_lineWidth: number = 1;
|
|
|
get lineWidth(): number {
|
|
|
- return this._lineWidth;
|
|
|
+ return this._lineWidth;
|
|
|
} // Get lineWidth
|
|
|
set lineWidth(v: number) {
|
|
|
- this._lineWidth = v;
|
|
|
- this.update();
|
|
|
+ this._lineWidth = v;
|
|
|
+ this.update();
|
|
|
} // Set lineWidth
|
|
|
|
|
|
/**
|
|
@@ -150,34 +159,35 @@ export class SBaseArrowEdit extends SGraphEdit {
|
|
|
* @param data 数据
|
|
|
*/
|
|
|
constructor(parent: SGraphItem | null, data: Marker) {
|
|
|
- super(parent);
|
|
|
- this.showSelect = false;
|
|
|
- this.data = data;
|
|
|
- if (data.style && data.style.default) {
|
|
|
- // 关于顶点
|
|
|
- if (data.style.default.line) {
|
|
|
- let setPointList: SPoint[];
|
|
|
- setPointList = data.style.default.line.map(i => {
|
|
|
- return new SPoint(i.x, i.y)
|
|
|
- });
|
|
|
- this.line = setPointList;
|
|
|
- }
|
|
|
+ super(parent);
|
|
|
+ this.showSelect = false;
|
|
|
+ this.data = data;
|
|
|
+ // data 中存在该属性
|
|
|
+ if (data.style && data.style.default) {
|
|
|
+ // 关于顶点
|
|
|
+ if (data.style.default.line) {
|
|
|
+ let setPointList: SPoint[];
|
|
|
+ setPointList = data.style.default.line.map(i => {
|
|
|
+ return new SPoint(i.x, i.y);
|
|
|
+ });
|
|
|
+ this.line = setPointList;
|
|
|
+ }
|
|
|
|
|
|
- // 颜色
|
|
|
- if (data.style.default.strokeColor) {
|
|
|
- this.strokeColor = new SColor(data.style.default.strokeColor)
|
|
|
- }
|
|
|
+ // 线条颜色
|
|
|
+ if (data.style.default.strokeColor) {
|
|
|
+ this.strokeColor = new SColor(data.style.default.strokeColor);
|
|
|
+ }
|
|
|
|
|
|
- // 线宽
|
|
|
- if (data.style.default.LineWidth) {
|
|
|
- this.lineWidth = data.style.default.lineWidth
|
|
|
- }
|
|
|
+ // 线宽
|
|
|
+ if (data.style.default.LineWidth) {
|
|
|
+ this.lineWidth = data.style.default.lineWidth;
|
|
|
+ }
|
|
|
|
|
|
- // 线样式
|
|
|
- if (data.style.default.LineStyle) {
|
|
|
- this.lineStyle = data.style.default.lineStyle
|
|
|
+ // 线样式
|
|
|
+ if (data.style.default.LineStyle) {
|
|
|
+ this.lineStyle = data.style.default.lineStyle;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
} // Constructor
|
|
|
|
|
|
/**
|
|
@@ -185,18 +195,20 @@ export class SBaseArrowEdit extends SGraphEdit {
|
|
|
*
|
|
|
* @param event 事件参数
|
|
|
* @return 是否处理该事件
|
|
|
- */
|
|
|
+ */
|
|
|
onDoubleClick(event: SMouseEvent): boolean {
|
|
|
- if (this.status == SItemStatus.Normal) {
|
|
|
- this.status = SItemStatus.Edit;
|
|
|
- this.grabItem(this);
|
|
|
- } else if (this.status == SItemStatus.Edit) {
|
|
|
- this.status = SItemStatus.Normal;
|
|
|
- this.releaseItem();
|
|
|
- }
|
|
|
-
|
|
|
- this.update();
|
|
|
- return true;
|
|
|
+ // 当前处于正常状态
|
|
|
+ if (this.status == SItemStatus.Normal) {
|
|
|
+ this.status = SItemStatus.Edit;
|
|
|
+ this.grabItem(this);
|
|
|
+ } else if (this.status == SItemStatus.Edit) {
|
|
|
+ // 当前处于编辑态
|
|
|
+ this.status = SItemStatus.Normal;
|
|
|
+ this.releaseItem();
|
|
|
+ }
|
|
|
+
|
|
|
+ this.update();
|
|
|
+ return true;
|
|
|
} // Function onDoubleClick()
|
|
|
|
|
|
/**
|
|
@@ -204,27 +216,31 @@ export class SBaseArrowEdit extends SGraphEdit {
|
|
|
*
|
|
|
* @param event 鼠标事件
|
|
|
* @return 是否处理该事件
|
|
|
- */
|
|
|
+ */
|
|
|
onMouseDown(event: SMouseEvent): boolean {
|
|
|
- this.curIndex = -1;
|
|
|
- this.curPoint = null;
|
|
|
- if (event.shiftKey || this._verAndLeve) {
|
|
|
- event = this.compare(event);
|
|
|
- }
|
|
|
+ this.curIndex = -1;
|
|
|
+ this.curPoint = null;
|
|
|
+ if (event.shiftKey || this._verAndLeve) {
|
|
|
+ // 按下了 shift 键 或者模拟 shift 键功能开启
|
|
|
+ event = this.compare(event);
|
|
|
+ }
|
|
|
|
|
|
- if (event.buttons == SMouseButton.LeftButton) {
|
|
|
- if (this.status == SItemStatus.Normal) {
|
|
|
- return super.onMouseDown(event);
|
|
|
- } else if (this.status == SItemStatus.Edit) {
|
|
|
- // 判断是否点击到端点上(获取端点索引值)
|
|
|
- this.findNearestPoint(new SPoint(event.x, event.y));
|
|
|
- } else if (this.status == SItemStatus.Create) {
|
|
|
- this.addPoint(new SPoint(event.x, event.y));
|
|
|
- return true;
|
|
|
+ if (event.buttons == SMouseButton.LeftButton) {
|
|
|
+ // 按下的是左键
|
|
|
+ if (this.status == SItemStatus.Normal) {
|
|
|
+ // 当前处于正常状态
|
|
|
+ return super.onMouseDown(event);
|
|
|
+ } else if (this.status == SItemStatus.Edit) {
|
|
|
+ // 处于编辑态时, 计算点击到的端点(获取端点索引值)
|
|
|
+ this.findNearestPoint(new SPoint(event.x, event.y));
|
|
|
+ } else if (this.status == SItemStatus.Create) {
|
|
|
+ // 处于创建态
|
|
|
+ this.addPoint(new SPoint(event.x, event.y));
|
|
|
+ return true;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- return true;
|
|
|
+ return true;
|
|
|
} // Function onMouseDown()
|
|
|
|
|
|
/**
|
|
@@ -232,52 +248,61 @@ export class SBaseArrowEdit extends SGraphEdit {
|
|
|
*
|
|
|
* @param event 事件
|
|
|
* @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) {
|
|
|
- if (this.curIndex == 1) {
|
|
|
- last = this.line[0];
|
|
|
- } else if (this.curIndex == 0) {
|
|
|
- last = this.line[1];
|
|
|
- }
|
|
|
- }
|
|
|
+ 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) {
|
|
|
+ // 处于编辑态
|
|
|
+ if (this.curIndex == 1) {
|
|
|
+ // 如果选中的是第二个点,则以第一个点为基准
|
|
|
+ last = this.line[0];
|
|
|
+ } else if (this.curIndex == 0) {
|
|
|
+ // 如果选中的是第一个点,则以第二个点为基准
|
|
|
+ last = this.line[1];
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- const dx = Math.abs(event.x - last.x);
|
|
|
- const dy = Math.abs(event.y - last.y);
|
|
|
- if (dy > dx) {
|
|
|
- event.x = last.x;
|
|
|
- } else {
|
|
|
- event.y = last.y;
|
|
|
+ const dx = Math.abs(event.x - last.x);
|
|
|
+ const dy = Math.abs(event.y - last.y);
|
|
|
+ if (dy > dx) {
|
|
|
+ // y 轴方向偏移量较大,则锁定 x 坐标
|
|
|
+ event.x = last.x;
|
|
|
+ } else {
|
|
|
+ // x 轴方向偏移量较大,则锁定 y 坐标
|
|
|
+ event.y = last.y;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- return event;
|
|
|
+ return event;
|
|
|
} // Function compare()
|
|
|
|
|
|
/**
|
|
|
* 获取点击点与 Point[] 中的点距离最近点
|
|
|
*
|
|
|
* @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]);
|
|
|
+ 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()
|
|
|
|
|
|
/**
|
|
@@ -285,29 +310,34 @@ export class SBaseArrowEdit extends SGraphEdit {
|
|
|
*
|
|
|
* @param event 鼠标事件
|
|
|
* @return 是否处理事件
|
|
|
- */
|
|
|
+ */
|
|
|
onMouseMove(event: SMouseEvent): boolean {
|
|
|
- if (event.shiftKey || this._verAndLeve) {
|
|
|
- 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.calRect()
|
|
|
+ if (event.shiftKey || this._verAndLeve) {
|
|
|
+ // 按下了 shift 键 或者模拟 shift 键功能开启
|
|
|
+ event = this.compare(event);
|
|
|
}
|
|
|
- } else if (this.status == SItemStatus.Edit) {
|
|
|
- if (-1 != this.curIndex) {
|
|
|
- this.line[this.curIndex].x = event.x;
|
|
|
- this.line[this.curIndex].y = event.y;
|
|
|
- this.calRect()
|
|
|
+
|
|
|
+ if (this.status == SItemStatus.Create) {
|
|
|
+ // 处于创建态
|
|
|
+ if (this.line[0] instanceof SPoint) {
|
|
|
+ // 第一个数据是点类型
|
|
|
+ this.line[1] = new SPoint(event.x, event.y);
|
|
|
+ this.calRect();
|
|
|
+ }
|
|
|
+ } else if (this.status == SItemStatus.Edit) {
|
|
|
+ // 处于编辑态
|
|
|
+ if (-1 != this.curIndex) {
|
|
|
+ // 存在当前选中的点
|
|
|
+ this.line[this.curIndex].x = event.x;
|
|
|
+ this.line[this.curIndex].y = event.y;
|
|
|
+ this.calRect();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return super.onMouseMove(event);
|
|
|
}
|
|
|
- } else {
|
|
|
- return super.onMouseMove(event);
|
|
|
- }
|
|
|
|
|
|
- this.update();
|
|
|
- return true;
|
|
|
+ this.update();
|
|
|
+ return true;
|
|
|
} // Function onMouseMove()
|
|
|
|
|
|
/**
|
|
@@ -315,93 +345,102 @@ export class SBaseArrowEdit extends SGraphEdit {
|
|
|
*
|
|
|
* @param event 事件参数
|
|
|
* @return 是否处理该事件
|
|
|
- */
|
|
|
+ */
|
|
|
onMouseUp(event: SMouseEvent): boolean {
|
|
|
- if (this.status == SItemStatus.Edit) {
|
|
|
- if (this.curIndex > -1) {
|
|
|
- const p = new SPoint(
|
|
|
- this.line[this.curIndex].x,
|
|
|
- this.line[this.curIndex].y
|
|
|
- );
|
|
|
- this.recordAction(SGraphPointListUpdate, [
|
|
|
- this.line,
|
|
|
- this.curPoint,
|
|
|
- p,
|
|
|
- this.curIndex
|
|
|
- ]);
|
|
|
+ if (this.status == SItemStatus.Edit) {
|
|
|
+ // 处于编辑态
|
|
|
+ if (this.curIndex > -1) {
|
|
|
+ // 存在当前选中的点
|
|
|
+ const p = new SPoint(
|
|
|
+ this.line[this.curIndex].x,
|
|
|
+ this.line[this.curIndex].y
|
|
|
+ );
|
|
|
+ this.recordAction(SGraphPointListUpdate, [
|
|
|
+ this.line,
|
|
|
+ this.curPoint,
|
|
|
+ p,
|
|
|
+ this.curIndex
|
|
|
+ ]);
|
|
|
+ }
|
|
|
+ } else if (this.status == SItemStatus.Normal) {
|
|
|
+ // 处于正常态
|
|
|
+ super.onMouseUp(event);
|
|
|
+ return true;
|
|
|
}
|
|
|
- } else if (this.status == SItemStatus.Normal) {
|
|
|
- super.onMouseUp(event)
|
|
|
- return true;
|
|
|
- }
|
|
|
|
|
|
- this.curIndex = -1;
|
|
|
- this.curPoint = null;
|
|
|
- return true;
|
|
|
+ this.curIndex = -1;
|
|
|
+ this.curPoint = null;
|
|
|
+ return true;
|
|
|
} // Function onMouseUp()
|
|
|
|
|
|
/**
|
|
|
* 计算矩形的左上角和右下角
|
|
|
- */
|
|
|
+ */
|
|
|
private calRect(): void {
|
|
|
- if (this.line.length > 1) {
|
|
|
- const fi = this.line[0];
|
|
|
- const se = this.line[1];
|
|
|
- let minx, maxx, miny, maxy;
|
|
|
- if (fi.x < se.x) {
|
|
|
- minx = fi.x;
|
|
|
- maxx = se.x;
|
|
|
- } else {
|
|
|
- minx = se.x;
|
|
|
- maxx = fi.x;
|
|
|
- }
|
|
|
+ if (this.line.length > 1) {
|
|
|
+ // 当前对象有效
|
|
|
+ const fi = this.line[0];
|
|
|
+ const se = this.line[1];
|
|
|
+ let minx, maxx, miny, maxy;
|
|
|
+ if (fi.x < se.x) {
|
|
|
+ // 存储最大值和最小值
|
|
|
+ minx = fi.x;
|
|
|
+ maxx = se.x;
|
|
|
+ } else {
|
|
|
+ minx = se.x;
|
|
|
+ maxx = fi.x;
|
|
|
+ }
|
|
|
|
|
|
- if (fi.y < se.y) {
|
|
|
- miny = fi.y;
|
|
|
- maxy = se.y;
|
|
|
- } else {
|
|
|
- miny = se.y;
|
|
|
- maxy = fi.y;
|
|
|
- }
|
|
|
+ if (fi.y < se.y) {
|
|
|
+ // 存储最大值和最小值
|
|
|
+ miny = fi.y;
|
|
|
+ maxy = se.y;
|
|
|
+ } else {
|
|
|
+ miny = se.y;
|
|
|
+ maxy = fi.y;
|
|
|
+ }
|
|
|
|
|
|
- this._leftTop = new SPoint(minx, miny)
|
|
|
- this._rightBottom = new SPoint(maxx, maxy)
|
|
|
- }
|
|
|
+ this._leftTop = new SPoint(minx, miny);
|
|
|
+ this._rightBottom = new SPoint(maxx, maxy);
|
|
|
+ }
|
|
|
} // Function calRect
|
|
|
|
|
|
/**
|
|
|
* 添加点至数组中
|
|
|
*
|
|
|
* @param p 添加的点
|
|
|
- */
|
|
|
+ */
|
|
|
private addPoint(p: SPoint): void {
|
|
|
- if (this.line.length < 2) {
|
|
|
- this.line.push(p);
|
|
|
- this.recordAction(SGraphPointListInsert, [this.line, p]);
|
|
|
- } else {
|
|
|
- this.line[1] = p;
|
|
|
- this.recordAction(SGraphPointListInsert, [this.line, p, 1]);
|
|
|
- this.status = SItemStatus.Normal;
|
|
|
- this.releaseItem();
|
|
|
- this.$emit("finishCreated");
|
|
|
- }
|
|
|
-
|
|
|
- this.calRect()
|
|
|
- this.update();
|
|
|
+ if (this.line.length < 2) {
|
|
|
+ // 当前对象点数据少于2条
|
|
|
+ this.line.push(p);
|
|
|
+ this.recordAction(SGraphPointListInsert, [this.line, p]);
|
|
|
+ } else {
|
|
|
+ // 否则
|
|
|
+ this.line[1] = p;
|
|
|
+ this.recordAction(SGraphPointListInsert, [this.line, p, 1]);
|
|
|
+ this.status = SItemStatus.Normal;
|
|
|
+ this.releaseItem();
|
|
|
+ this.$emit("finishCreated");
|
|
|
+ }
|
|
|
+
|
|
|
+ this.calRect();
|
|
|
+ this.update();
|
|
|
} // Function addPoint()
|
|
|
|
|
|
/**
|
|
|
* 移动后处理所有坐标,并肩原点置为场景原点
|
|
|
- */
|
|
|
+ */
|
|
|
moveToOrigin(): void {
|
|
|
- this.line = this.line.map(t => {
|
|
|
- t.x = t.x + this.x;
|
|
|
- t.y = t.y + this.y;
|
|
|
- return t;
|
|
|
- });
|
|
|
-
|
|
|
- this.x = 0;
|
|
|
- this.y = 0;
|
|
|
+ // 遍历当前对象点数据
|
|
|
+ this.line = this.line.map(t => {
|
|
|
+ t.x = t.x + this.x;
|
|
|
+ t.y = t.y + this.y;
|
|
|
+ return t;
|
|
|
+ });
|
|
|
+
|
|
|
+ this.x = 0;
|
|
|
+ this.y = 0;
|
|
|
} // Function moveToOrigin()
|
|
|
|
|
|
/**
|
|
@@ -409,11 +448,11 @@ export class SBaseArrowEdit extends SGraphEdit {
|
|
|
*
|
|
|
* @param SGraphCommand 相关命令类
|
|
|
* @param any 对应传入参数
|
|
|
- */
|
|
|
+ */
|
|
|
protected recordAction(SGraphCommand: any, any: any[]): void {
|
|
|
- // 记录相关命令并推入堆栈中
|
|
|
- const command = new SGraphCommand(this.scene, this, ...any);
|
|
|
- this.undoStack.push(command);
|
|
|
+ // 记录相关命令并推入堆栈中
|
|
|
+ const command = new SGraphCommand(this.scene, this, ...any);
|
|
|
+ this.undoStack.push(command);
|
|
|
} // Function recordAction()
|
|
|
|
|
|
/**
|
|
@@ -422,139 +461,159 @@ export class SBaseArrowEdit extends SGraphEdit {
|
|
|
* @param x x 横向坐标
|
|
|
* @param y y 纵向坐标
|
|
|
* @return 在区域内返回 true, 否则 false
|
|
|
- */
|
|
|
+ */
|
|
|
contains(x: number, y: number): boolean {
|
|
|
- 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
|
|
|
- ) {
|
|
|
- return true;
|
|
|
+ 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
|
|
|
+ ) {
|
|
|
+ // 鼠标点到本对象的距离在吸附距离之内
|
|
|
+ return true;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- return false;
|
|
|
+ return false;
|
|
|
} // Function contains()
|
|
|
|
|
|
/**
|
|
|
* Item 对象边界区域
|
|
|
*
|
|
|
* @return 外接矩阵
|
|
|
- */
|
|
|
+ */
|
|
|
boundingRect(): SRect {
|
|
|
- if (this.line.length > 1) {
|
|
|
- this.calRect()
|
|
|
- return new SRect(this._leftTop, this._rightBottom);
|
|
|
- }
|
|
|
+ if (this.line.length > 1) {
|
|
|
+ // 当前对象有效
|
|
|
+ this.calRect();
|
|
|
+ return new SRect(this._leftTop, this._rightBottom);
|
|
|
+ }
|
|
|
|
|
|
- return new SRect()
|
|
|
+ return new SRect();
|
|
|
} // Function boundingRect()
|
|
|
|
|
|
/**
|
|
|
* 撤销操作
|
|
|
- */
|
|
|
+ */
|
|
|
undo(): void {
|
|
|
- if (this._status != SItemStatus.Normal) {
|
|
|
- this.undoStack.undo();
|
|
|
- }
|
|
|
+ if (this._status != SItemStatus.Normal) {
|
|
|
+ // 处于非正常态,即编辑态和创建态
|
|
|
+ this.undoStack.undo();
|
|
|
+ }
|
|
|
} // Function undo()
|
|
|
|
|
|
/**
|
|
|
* 重做操作
|
|
|
- */
|
|
|
+ */
|
|
|
redo(): void {
|
|
|
- if (this._status != SItemStatus.Normal) {
|
|
|
- this.undoStack.redo();
|
|
|
- }
|
|
|
+ if (this._status != SItemStatus.Normal) {
|
|
|
+ // 处于非正常态,即编辑态和创建态
|
|
|
+ this.undoStack.redo();
|
|
|
+ }
|
|
|
} // Function redo()
|
|
|
|
|
|
/**
|
|
|
* 取消操作执行
|
|
|
- */
|
|
|
+ */
|
|
|
cancelOperate(): void {
|
|
|
- if (this.status == SItemStatus.Create) {
|
|
|
- this.parent = null;
|
|
|
- this.releaseItem();
|
|
|
- } else if (this.status == SItemStatus.Edit) {
|
|
|
- this.status = SItemStatus.Normal;
|
|
|
- this.releaseItem();
|
|
|
- }
|
|
|
+ if (this.status == SItemStatus.Create) {
|
|
|
+ // 处于创建态
|
|
|
+ this.parent = null;
|
|
|
+ this.releaseItem();
|
|
|
+ } else if (this.status == SItemStatus.Edit) {
|
|
|
+ // 处于编辑态
|
|
|
+ this.status = SItemStatus.Normal;
|
|
|
+ this.releaseItem();
|
|
|
+ }
|
|
|
} // Function cancelOperate()
|
|
|
|
|
|
/**
|
|
|
* Item绘制操作
|
|
|
*
|
|
|
* @param painter 绘制对象
|
|
|
- */
|
|
|
+ */
|
|
|
onDraw(painter: SPainter): void {
|
|
|
- painter.pen.color = this.strokeColor;
|
|
|
- if (this.line.length == 2) {
|
|
|
- painter.brush.color = this.fillColor;
|
|
|
- painter.pen.lineWidth = this.lineWidth
|
|
|
- if (this.lineStyle == SLineStyle.Dashed) {
|
|
|
- painter.pen.lineDash = [
|
|
|
- painter.toPx(this.lineWidth * 3),
|
|
|
- painter.toPx(this.lineWidth * 7)
|
|
|
- ];
|
|
|
- } else if (this.lineStyle == SLineStyle.Dotted) {
|
|
|
- painter.pen.lineDash = [
|
|
|
- painter.toPx(this.lineWidth * 2),
|
|
|
- painter.toPx(this.lineWidth * 2)
|
|
|
- ];
|
|
|
- }
|
|
|
-
|
|
|
- if (this.selected && this.status == SItemStatus.Normal) {
|
|
|
- painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
|
|
|
- painter.shadow.shadowBlur = 10;
|
|
|
- painter.shadow.shadowColor = new SColor(`#00000033`);
|
|
|
- painter.shadow.shadowOffsetX = 5;
|
|
|
- painter.shadow.shadowOffsetY = 5;
|
|
|
- }
|
|
|
-
|
|
|
- painter.drawArrowLine(this.line[0], this.line[1], { begin: SArrowStyleType.None, end: SArrowStyleType.Basic });
|
|
|
- if (
|
|
|
- this.status == SItemStatus.Edit ||
|
|
|
- this.status == SItemStatus.Create
|
|
|
- ) {
|
|
|
- // 绘制端点
|
|
|
- this.line.forEach((p, i): void => {
|
|
|
+ painter.pen.color = this.strokeColor;
|
|
|
+ if (this.line.length == 2) {
|
|
|
+ // 当前对象2个点都存在,即创建完成
|
|
|
painter.brush.color = this.fillColor;
|
|
|
- if (i == this.curIndex) {
|
|
|
- painter.brush.color = this.activeFillColor;
|
|
|
+ painter.pen.lineWidth = this.lineWidth;
|
|
|
+ if (this.lineStyle == SLineStyle.Dashed) {
|
|
|
+ // 线类型是虚线
|
|
|
+ painter.pen.lineDash = [
|
|
|
+ painter.toPx(this.lineWidth * 3),
|
|
|
+ painter.toPx(this.lineWidth * 7)
|
|
|
+ ];
|
|
|
+ } else if (this.lineStyle == SLineStyle.Dotted) {
|
|
|
+ // 线类型是点线
|
|
|
+ painter.pen.lineDash = [
|
|
|
+ painter.toPx(this.lineWidth * 2),
|
|
|
+ painter.toPx(this.lineWidth * 2)
|
|
|
+ ];
|
|
|
}
|
|
|
- painter.drawCircle(p.x, p.y, painter.toPx(5));
|
|
|
- });
|
|
|
- }
|
|
|
|
|
|
- } else if (this.line.length == 1) {
|
|
|
- if (
|
|
|
- this.status == SItemStatus.Edit ||
|
|
|
- this.status == SItemStatus.Create
|
|
|
- ) {
|
|
|
- // 绘制端点
|
|
|
- painter.brush.color = this.fillColor;
|
|
|
- painter.drawCircle(
|
|
|
- this.line[0].x,
|
|
|
- this.line[0].y,
|
|
|
- painter.toPx(5)
|
|
|
- );
|
|
|
+ if (this.selected && this.status == SItemStatus.Normal) {
|
|
|
+ // 当前对象呗选中而且处于正常态
|
|
|
+ painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
|
|
|
+ painter.shadow.shadowBlur = 10;
|
|
|
+ painter.shadow.shadowColor = new SColor(`#00000033`);
|
|
|
+ painter.shadow.shadowOffsetX = 5;
|
|
|
+ painter.shadow.shadowOffsetY = 5;
|
|
|
+ }
|
|
|
+
|
|
|
+ painter.drawArrowLine(this.line[0], this.line[1], {
|
|
|
+ begin: SArrowStyleType.None,
|
|
|
+ end: SArrowStyleType.Basic
|
|
|
+ });
|
|
|
+ if (
|
|
|
+ this.status == SItemStatus.Edit ||
|
|
|
+ this.status == SItemStatus.Create
|
|
|
+ ) {
|
|
|
+ // 处于创建态或者编辑态
|
|
|
+ // 绘制端点
|
|
|
+ this.line.forEach((p, i): void => {
|
|
|
+ painter.brush.color = this.fillColor;
|
|
|
+ if (i == this.curIndex) {
|
|
|
+ // 该点是当前选中的点
|
|
|
+ painter.brush.color = this.activeFillColor;
|
|
|
+ }
|
|
|
+ painter.drawCircle(p.x, p.y, painter.toPx(5));
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else if (this.line.length == 1) {
|
|
|
+ // 当前对象中只存在一个点
|
|
|
+ if (
|
|
|
+ this.status == SItemStatus.Edit ||
|
|
|
+ this.status == SItemStatus.Create
|
|
|
+ ) {
|
|
|
+ // 处于创建态或者编辑态
|
|
|
+ // 绘制端点
|
|
|
+ painter.brush.color = this.fillColor;
|
|
|
+ painter.drawCircle(
|
|
|
+ this.line[0].x,
|
|
|
+ this.line[0].y,
|
|
|
+ painter.toPx(5)
|
|
|
+ );
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
} // Function onDraw()
|
|
|
|
|
|
/**
|
|
|
* 返回对象储存的相关数据
|
|
|
*
|
|
|
* @return 实体类保存得数据
|
|
|
- */
|
|
|
+ */
|
|
|
toData(): any {
|
|
|
- this.moveToOrigin()
|
|
|
- const Line = [{ x: this.line[0].x, y: this.line[0].y }, { x: this.line[1].x, y: this.line[1].y }];
|
|
|
- this.data.style.default.line = Line;
|
|
|
- this.data.style.default.lineWidth = this.lineWidth;
|
|
|
- this.data.style.default.lineStyle = this.lineStyle;
|
|
|
- this.data.style.default.strokeColor = this.strokeColor;
|
|
|
- return this.data
|
|
|
+ this.moveToOrigin();
|
|
|
+ const Line = [
|
|
|
+ { x: this.line[0].x, y: this.line[0].y },
|
|
|
+ { x: this.line[1].x, y: this.line[1].y }
|
|
|
+ ];
|
|
|
+ this.data.style.default.line = Line;
|
|
|
+ this.data.style.default.lineWidth = this.lineWidth;
|
|
|
+ this.data.style.default.lineStyle = this.lineStyle;
|
|
|
+ this.data.style.default.strokeColor = this.strokeColor;
|
|
|
+ return this.data;
|
|
|
} // Function toData()
|
|
|
- } // Class SArrowEdit
|
|
|
+} // Class SArrowEdit
|