|
@@ -18,29 +18,28 @@
|
|
|
* ********************************************************************************************************************
|
|
|
*/
|
|
|
|
|
|
-import { SGraphyItem } from "@saga-web/graphy/";
|
|
|
-import { SMouseEvent } from "@saga-web/base/";;
|
|
|
+import { SGraphItem, SGraphCommand } from "@saga-web/graph/";
|
|
|
+import { SMouseEvent, SUndoStack } from "@saga-web/base/";;
|
|
|
import {
|
|
|
SColor,
|
|
|
SLineCapStyle,
|
|
|
SPainter,
|
|
|
- SPath2D,
|
|
|
SPoint,
|
|
|
- SPolygonUtil,
|
|
|
SRect,
|
|
|
SLine
|
|
|
} from "@saga-web/draw";
|
|
|
import { PolygonData } from "./type/PolygonData";
|
|
|
-import { Point } from "./type/Point";
|
|
|
import { SRelationState } from "@saga-web/big/lib/enums/SRelationState"
|
|
|
import { SMathUtil } from "@saga-web/big/lib/utils/SMathUtil";
|
|
|
|
|
|
+import { SPointListInsert, SPointListInDelete, SPointListUpdate } from "./command/index"
|
|
|
+
|
|
|
/**
|
|
|
* 编辑多边形
|
|
|
*
|
|
|
* @author 韩耀龙
|
|
|
*/
|
|
|
-export class SPolygonItem extends SGraphyItem {
|
|
|
+export class SPolygonItem extends SGraphItem {
|
|
|
/** X坐标最小值 */
|
|
|
private minX = Number.MAX_SAFE_INTEGER;
|
|
|
/** X坐标最大值 */
|
|
@@ -50,10 +49,22 @@ export class SPolygonItem extends SGraphyItem {
|
|
|
/** Y坐标最大值 */
|
|
|
private maxY = Number.MIN_SAFE_INTEGER;
|
|
|
/** 轮廓线坐标 */
|
|
|
- pointList: SPoint[] = [];
|
|
|
+ private pointList: SPoint[] = [];
|
|
|
+ // 获取当前状态
|
|
|
+ get getPointList(): SPoint[] {
|
|
|
+ return this.pointList;
|
|
|
+ }
|
|
|
+ // 编辑当前状态
|
|
|
+ set setPointList(arr: SPoint[]) {
|
|
|
+ this.pointList = arr;
|
|
|
+ if (arr) {
|
|
|
+ this._xyzListToSPointList(arr);
|
|
|
+ };
|
|
|
+ this.update();
|
|
|
+ };
|
|
|
/** 是否闭合 */
|
|
|
closeFlag: boolean = false;
|
|
|
- // 当前状态 1:show 2 创建中,3 编辑中
|
|
|
+ // 当前状态
|
|
|
_status: number = SRelationState.Normal;
|
|
|
// 获取当前状态
|
|
|
get getStatus(): number {
|
|
@@ -62,6 +73,12 @@ export class SPolygonItem extends SGraphyItem {
|
|
|
// 编辑当前状态
|
|
|
set setStatus(value: number) {
|
|
|
this._status = value;
|
|
|
+ // 如果状态为show则需清栈
|
|
|
+ if (value == SRelationState.Normal) {
|
|
|
+ if (this.undoStack) {
|
|
|
+ this.undoStack.clear();
|
|
|
+ }
|
|
|
+ }
|
|
|
this.update();
|
|
|
};
|
|
|
data: PolygonData | null = null;
|
|
@@ -75,39 +92,41 @@ export class SPolygonItem extends SGraphyItem {
|
|
|
private lastPoint = new SPoint();
|
|
|
/** 当前鼠标获取顶点对应索引 */
|
|
|
private curIndex: number = -1;
|
|
|
+ /** 当前鼠标获取顶点对应坐标 */
|
|
|
+ private curPoint: null | SPoint = null
|
|
|
/** 灵敏像素 */
|
|
|
- private len: number = 15;
|
|
|
- /** 场景像素 */
|
|
|
+ private len: number = 10;
|
|
|
+ /** 场景像素 内部将灵敏像素换算为场景实际距离 */
|
|
|
private scenceLen: number = 15;
|
|
|
+ /** 场景像素 */
|
|
|
+ private isAlt: boolean = false;
|
|
|
+ /** undoredo堆栈 */
|
|
|
+ private undoStack: SUndoStack | null = new SUndoStack();
|
|
|
+
|
|
|
/**
|
|
|
* 构造函数
|
|
|
*
|
|
|
* @param parent 指向父对象
|
|
|
* @param data PolygonData数据
|
|
|
*/
|
|
|
-
|
|
|
- constructor(parent: SGraphyItem | null, data: PolygonData | null) {
|
|
|
+ constructor(parent: SGraphItem | null) {
|
|
|
super(parent);
|
|
|
- this.data = data;
|
|
|
-
|
|
|
- if (data && data.PointList) {
|
|
|
- this._xyzListToSPointList(data.PointList);
|
|
|
- };
|
|
|
- this.zOrder = 100;
|
|
|
}
|
|
|
|
|
|
+ //////////////////
|
|
|
+ // 以下为对pointList 数组的操作方法
|
|
|
|
|
|
/**
|
|
|
- * 储存新的多边形顶点
|
|
|
- * @param x 点位得x坐标
|
|
|
- * @param y 点位得y坐标
|
|
|
- * @param i 储存所在索引
|
|
|
- * @return SPoint
|
|
|
- */
|
|
|
-
|
|
|
- reservePoint(x: number, y: number, i?: number): SPoint {
|
|
|
+ * 储存新的多边形顶点
|
|
|
+ *
|
|
|
+ * @param x 点位得x坐标
|
|
|
+ * @param y 点位得y坐标
|
|
|
+ * @param i 储存所在索引
|
|
|
+ * @return SPoint。添加的顶点
|
|
|
+ */
|
|
|
+ insertPoint(x: number, y: number, i: number | null = null): SPoint {
|
|
|
const point = new SPoint(x, y);
|
|
|
- if (typeof i == 'undefined') {
|
|
|
+ if (i == null) {
|
|
|
this.pointList.push(point)
|
|
|
} else {
|
|
|
this.pointList.splice(i, 0, point);
|
|
@@ -116,39 +135,47 @@ export class SPolygonItem extends SGraphyItem {
|
|
|
return point
|
|
|
}
|
|
|
|
|
|
-
|
|
|
/**
|
|
|
- * 删除点位
|
|
|
- * @param i 删除点所在的索引
|
|
|
- * @return SPoint
|
|
|
- */
|
|
|
-
|
|
|
- deletePoint(i?: number): SPoint | null | undefined {
|
|
|
+ * 删除点位
|
|
|
+ *
|
|
|
+ * @param i 删除点所在的索引
|
|
|
+ * @return SPoint|null。索引不在数组范围则返回null
|
|
|
+ */
|
|
|
+ deletePoint(i: number | null = null): SPoint | null {
|
|
|
let point = null;
|
|
|
- if (typeof i != 'undefined') {
|
|
|
- if (this.pointList.length - 1 >= i) {
|
|
|
- point = this.pointList[i];
|
|
|
- this.pointList.splice(i, 0);
|
|
|
- } else {
|
|
|
+ if (i != null) {
|
|
|
+ if (i >= (this.pointList.length) || i < 0) {
|
|
|
point = null
|
|
|
+ } else {
|
|
|
+ point = new SPoint(this.pointList[i].x, this.pointList[i].y);
|
|
|
+ this.pointList.splice(i, 1);
|
|
|
}
|
|
|
} else {
|
|
|
- point = this.pointList.pop();
|
|
|
+ if (this.pointList.length) {
|
|
|
+ point = this.pointList[this.pointList.length - 1];
|
|
|
+ this.pointList.pop();
|
|
|
+ } else {
|
|
|
+ point = null
|
|
|
+ }
|
|
|
}
|
|
|
+ console.log('删除点位', point, i)
|
|
|
+ this.update()
|
|
|
return point
|
|
|
}
|
|
|
|
|
|
-
|
|
|
/**
|
|
|
- * 多边形顶点的移动位置
|
|
|
- * @param x 点位得x坐标
|
|
|
- * @param y 点位得y坐标
|
|
|
- * @param i 点位得i坐标
|
|
|
- * @return SPoint
|
|
|
- */
|
|
|
-
|
|
|
- movePoint(x: number, y: number, i: number, ): SPoint | null | undefined {
|
|
|
+ * 多边形顶点的移动位置
|
|
|
+ *
|
|
|
+ * @param x 点位得x坐标
|
|
|
+ * @param y 点位得y坐标
|
|
|
+ * @param i 点位得i坐标
|
|
|
+ * @return 移动对应得点。如果索引无法找到移动顶点,则返回null
|
|
|
+ */
|
|
|
+ movePoint(x: number, y: number, i: number, ): SPoint | null {
|
|
|
let point = null;
|
|
|
+ if (i >= (this.pointList.length) || i < 0) {
|
|
|
+ return null
|
|
|
+ }
|
|
|
if (this.pointList.length) {
|
|
|
this.pointList[i].x = x;
|
|
|
this.pointList[i].y = y;
|
|
@@ -157,42 +184,25 @@ export class SPolygonItem extends SGraphyItem {
|
|
|
return point
|
|
|
}
|
|
|
|
|
|
-
|
|
|
/**
|
|
|
- * 打印出多边形数组
|
|
|
- * @return SPoint[]
|
|
|
- */
|
|
|
-
|
|
|
+ * 打印出多边形数组
|
|
|
+ *
|
|
|
+ * @return 顶点数组
|
|
|
+ */
|
|
|
PrintPointList(): SPoint[] {
|
|
|
return this.pointList
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * Item对象边界区域
|
|
|
+ * xyz数据转换为SPoint格式函数;获取外接矩阵参数
|
|
|
*
|
|
|
- * @return SRect
|
|
|
+ * @param arr 外层传入的数据PointList
|
|
|
*/
|
|
|
- boundingRect(): SRect {
|
|
|
- return new SRect(
|
|
|
- this.minX,
|
|
|
- this.minY,
|
|
|
- this.maxX - this.minX,
|
|
|
- this.maxY - this.minY
|
|
|
- );
|
|
|
- } // Function boundingRect()
|
|
|
-
|
|
|
-
|
|
|
- /**
|
|
|
- * xyz数据转换为SPoint格式函数;获取外接矩阵参数
|
|
|
- *
|
|
|
- * @param arr 外层传入的数据PointList
|
|
|
- */
|
|
|
-
|
|
|
- protected _xyzListToSPointList(arr: Point[]) {
|
|
|
+ protected _xyzListToSPointList(arr: SPoint[]): void {
|
|
|
if (arr.length) {
|
|
|
this.pointList = arr.map(it => {
|
|
|
- let x = it.X,
|
|
|
- y = it.Y;
|
|
|
+ let x = it.x,
|
|
|
+ y = it.y;
|
|
|
if (x < this.minX) {
|
|
|
this.minX = x;
|
|
|
}
|
|
@@ -212,117 +222,75 @@ export class SPolygonItem extends SGraphyItem {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ ////////////
|
|
|
+ // 以下为三种状态下的绘制多边形方法
|
|
|
|
|
|
/**
|
|
|
- * 构造函数 展示多边形轮廓
|
|
|
- *
|
|
|
- */
|
|
|
-
|
|
|
- protected showPolygon(painter: SPainter, pointList: SPoint[]) {
|
|
|
+ * 展示状态 --绘制多边形数组
|
|
|
+ *
|
|
|
+ * @param painter 绘制类
|
|
|
+ * @param pointList 绘制多边形数组
|
|
|
+ */
|
|
|
+ protected drawShowPolygon(painter: SPainter, pointList: SPoint[]): void {
|
|
|
painter.pen.lineCapStyle = SLineCapStyle.Square;
|
|
|
painter.pen.color = this.borderColor;
|
|
|
painter.pen.lineWidth = painter.toPx(this.borderLine);
|
|
|
painter.brush.color = this.brushColor;
|
|
|
- painter.drawPolygon([...this.pointList]);
|
|
|
+ painter.drawPolygon([...pointList]);
|
|
|
}
|
|
|
|
|
|
|
|
|
/**
|
|
|
- * 构造函数 创建多边形
|
|
|
- *
|
|
|
- */
|
|
|
-
|
|
|
- protected createPolygon(painter: SPainter, pointList: SPoint[]) {
|
|
|
+ * 创建状态 --绘制多边形数组
|
|
|
+ *
|
|
|
+ * @param painter 绘制类
|
|
|
+ * @param pointList 绘制多边形数组
|
|
|
+ */
|
|
|
+ protected drawCreatePolygon(painter: SPainter, pointList: SPoint[]): void {
|
|
|
painter.pen.lineCapStyle = SLineCapStyle.Square;
|
|
|
- painter.pen.color = new SColor("#0091FF");
|
|
|
- painter.pen.lineWidth = painter.toPx(4);
|
|
|
- painter.drawPolyline(this.pointList);
|
|
|
- if (this.lastPoint) {
|
|
|
- painter.drawLine(
|
|
|
- pointList[this.pointList.length - 1],
|
|
|
- this.lastPoint
|
|
|
- );
|
|
|
- };
|
|
|
+ painter.pen.color = this.borderColor;
|
|
|
+ painter.pen.lineWidth = painter.toPx(this.borderLine);
|
|
|
+ if (this.lastPoint && pointList.length) {
|
|
|
+ painter.drawLine(pointList[pointList.length - 1].x, pointList[pointList.length - 1].y, this.lastPoint.x, this.lastPoint.y);
|
|
|
+ }
|
|
|
+ painter.drawPolyline(pointList);
|
|
|
painter.pen.color = SColor.Transparent;
|
|
|
- painter.pen.lineWidth = painter.toPx(4);
|
|
|
- painter.drawPolygon([...this.pointList, this.lastPoint]);
|
|
|
+ painter.brush.color = this.brushColor;
|
|
|
+ painter.pen.lineWidth = painter.toPx(this.borderLine);
|
|
|
+ painter.drawPolygon([...pointList, this.lastPoint]);
|
|
|
}
|
|
|
|
|
|
-
|
|
|
/**
|
|
|
- * 构造函数 创建多边形
|
|
|
- *
|
|
|
- */
|
|
|
-
|
|
|
- protected editPolygon(painter: SPainter, pointList: SPoint[]) {
|
|
|
+ *
|
|
|
+ * 编辑状态 --绘制多边形数组
|
|
|
+ *
|
|
|
+ * @param painter 绘制类
|
|
|
+ * @param pointList 绘制多边形数组
|
|
|
+ */
|
|
|
+ protected drawEditPolygon(painter: SPainter, pointList: SPoint[]): void {
|
|
|
// 展示多边形
|
|
|
- this.showPolygon(painter, pointList);
|
|
|
+ this.drawShowPolygon(painter, pointList);
|
|
|
// 绘制顶点块
|
|
|
+ painter.pen.color = SColor.Black;
|
|
|
+ painter.brush.color = SColor.White;
|
|
|
pointList.forEach((item, index) => {
|
|
|
- painter.drawCircle(item.x, item.y, painter.toPx(8))
|
|
|
+ painter.drawCircle(item.x, item.y, painter.toPx(this.len / 2))
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- ////////////以下为鼠标事件
|
|
|
-
|
|
|
/**
|
|
|
- * 鼠标双击事件
|
|
|
- *
|
|
|
- * @param event 事件参数
|
|
|
- * @return boolean
|
|
|
- */
|
|
|
-
|
|
|
- onDoubleClick(event: SMouseEvent): boolean {
|
|
|
- // 如果位show状态 双击改对象则需改为编辑状态
|
|
|
- if (this._status == 1) {
|
|
|
- this._status = 3;
|
|
|
- this.update()
|
|
|
- }
|
|
|
- return true;
|
|
|
- } // Function onDoubleClick()
|
|
|
-
|
|
|
-
|
|
|
- /**
|
|
|
- * 键盘事件
|
|
|
- *
|
|
|
- * @param event 事件参数
|
|
|
- * @return boolean
|
|
|
- */
|
|
|
- onKeyDown(event: KeyboardEvent): boolean {
|
|
|
- if (this._status == 1) {
|
|
|
- return false;
|
|
|
- } else if (this._status == 2) {
|
|
|
- if (event.code == 'Enter') {
|
|
|
- this._status = 1
|
|
|
- }
|
|
|
- } else if (this._status == 3) {
|
|
|
- // if (event.code == 'Enter') {
|
|
|
- // this._status = 1
|
|
|
- // }
|
|
|
- } else {
|
|
|
-
|
|
|
- }
|
|
|
- this.update()
|
|
|
- return true;
|
|
|
- } // Function onKeyDown()
|
|
|
- /**
|
|
|
- * 鼠标双击事件
|
|
|
+ * 编辑状态操作多边形数组
|
|
|
+ *
|
|
|
+ * @param event 鼠标事件
|
|
|
+ *
|
|
|
*
|
|
|
- * @param event 事件参数
|
|
|
- * @return boolean
|
|
|
*/
|
|
|
- onMouseDown(event: SMouseEvent): boolean {
|
|
|
- // 如果状态为编辑状态则添加点
|
|
|
- if (this._status == 2) {
|
|
|
- // 新增顶点
|
|
|
- this.reservePoint(event.x, event.y)
|
|
|
- } else if (this._status == 3) {
|
|
|
+ protected editPolygonPoint(event: SMouseEvent): void {
|
|
|
+ // 判断是否为删除状态 isAlt = true为删除状态
|
|
|
+ if (this.isAlt) {
|
|
|
// 1 判断是否点击在多边形顶点
|
|
|
- // 敏感度
|
|
|
- this.len = 15;
|
|
|
+ let lenIndex = -1; // 当前点击到的点位索引;
|
|
|
+ let curenLen = this.scenceLen; // 当前的灵敏度
|
|
|
this.pointList.forEach((item, index) => {
|
|
|
let dis = SMathUtil.pointDistance(
|
|
|
event.x,
|
|
@@ -330,13 +298,42 @@ export class SPolygonItem extends SGraphyItem {
|
|
|
item.x,
|
|
|
item.y
|
|
|
);
|
|
|
- if (dis < this.len) {
|
|
|
- this.len = dis;
|
|
|
- this.curIndex = index;
|
|
|
+ if (dis < curenLen) {
|
|
|
+ curenLen = dis;
|
|
|
+ lenIndex = index;
|
|
|
}
|
|
|
});
|
|
|
- // 判断是否点击在多边形得边上
|
|
|
- if (-1 == this.curIndex) {
|
|
|
+ // 若点击到,对该索引对应的点做删除
|
|
|
+ if (lenIndex != -1) {
|
|
|
+ if (this.pointList.length <= 3) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const delePoint = new SPoint(this.pointList[lenIndex].x, this.pointList[lenIndex].y)
|
|
|
+ this.deletePoint(lenIndex);
|
|
|
+ // 记录顶点操作记录压入堆栈
|
|
|
+ this.recordAction(SPointListInDelete, [this.pointList, delePoint,lenIndex]);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 1 判断是否点击在多边形顶点
|
|
|
+ this.curIndex = -1;
|
|
|
+ this.curPoint = null;
|
|
|
+ let lenIndex = -1; // 当前点击到的点位索引;
|
|
|
+ let curenLen = this.scenceLen; // 当前的灵敏度
|
|
|
+ this.pointList.forEach((item, index) => {
|
|
|
+ let dis = SMathUtil.pointDistance(
|
|
|
+ event.x,
|
|
|
+ event.y,
|
|
|
+ item.x,
|
|
|
+ item.y
|
|
|
+ );
|
|
|
+ if (dis < curenLen) {
|
|
|
+ curenLen = dis;
|
|
|
+ lenIndex = index;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.curIndex = lenIndex;
|
|
|
+ // 2判断是否点击在多边形得边上
|
|
|
+ if (-1 == lenIndex) {
|
|
|
let len = SMathUtil.pointToLine(
|
|
|
new SPoint(event.x, event.y),
|
|
|
new SLine(this.pointList[0], this.pointList[1])
|
|
@@ -348,8 +345,7 @@ export class SPolygonItem extends SGraphyItem {
|
|
|
new SPoint(event.x, event.y),
|
|
|
new SLine(this.pointList[i], this.pointList[i + 1])
|
|
|
);
|
|
|
- if (i == this.pointList.length) {
|
|
|
- console.log(this.pointList.length)
|
|
|
+ if ((i + 1) == this.pointList.length) {
|
|
|
dis = SMathUtil.pointToLine(
|
|
|
new SPoint(event.x, event.y),
|
|
|
new SLine(this.pointList[i], this.pointList[0])
|
|
@@ -361,17 +357,66 @@ export class SPolygonItem extends SGraphyItem {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ // 如果再线上则为新增点
|
|
|
if (len.Point) {
|
|
|
if (len.MinDis <= this.scenceLen) {
|
|
|
this.pointList.splice(index + 1, 0, len.Point);
|
|
|
- this.update();
|
|
|
+ // 记录新增顶点操作记录压入堆栈
|
|
|
+ this.recordAction(SPointListInsert, [this.pointList, len.Point, index + 1])
|
|
|
}
|
|
|
}
|
|
|
+ } else {
|
|
|
+ // 当捕捉到顶点后 ,记录当前点的xy坐标,用于undo、redo操作
|
|
|
+ this.curPoint = new SPoint(this.pointList[this.curIndex].x, this.pointList[this.curIndex].y);
|
|
|
}
|
|
|
+ // 刷新视图
|
|
|
+ this.update();
|
|
|
}
|
|
|
- return true;
|
|
|
- } // Function onMouseDown()
|
|
|
|
|
|
+ }
|
|
|
+
|
|
|
+ /////////////////////
|
|
|
+ // undo、redo相关操作
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 记录相关动作并推入栈中
|
|
|
+ * @param SGraphCommand 相关命令类
|
|
|
+ * @param any 对应传入参数
|
|
|
+ */
|
|
|
+ protected recordAction(SGraphCommand: any, any: any[]): void {
|
|
|
+ // 记录相关命令并推入堆栈中
|
|
|
+ const sgraphcommand = new SGraphCommand(this, ...any);
|
|
|
+ if (this.undoStack) {
|
|
|
+ this.undoStack.push(sgraphcommand);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 执行取消操作执行
|
|
|
+ */
|
|
|
+ undo(): void {
|
|
|
+ if (this._status == SRelationState.Normal) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.undoStack) {
|
|
|
+ this.undoStack.undo();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 执行重做操作执行
|
|
|
+ */
|
|
|
+ redo(): void {
|
|
|
+ if (this._status == SRelationState.Normal) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.undoStack) {
|
|
|
+ this.undoStack.redo();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ///////////////////////////////
|
|
|
+ // 以下为鼠标事件
|
|
|
|
|
|
/**
|
|
|
* 鼠标双击事件
|
|
@@ -379,92 +424,196 @@ export class SPolygonItem extends SGraphyItem {
|
|
|
* @param event 事件参数
|
|
|
* @return boolean
|
|
|
*/
|
|
|
- onMouseEnter(event: SMouseEvent): boolean {
|
|
|
+ onDoubleClick(event: SMouseEvent): boolean {
|
|
|
+ // 如果位show状态 双击改对象则需改为编辑状态
|
|
|
+ if (SRelationState.Normal == this._status) {
|
|
|
+ this._status = SRelationState.Edit;
|
|
|
+ } else if (SRelationState.Edit == this._status) {
|
|
|
+ this._status = SRelationState.Normal;
|
|
|
+ if (this.undoStack) {
|
|
|
+ this.undoStack.clear()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.update()
|
|
|
+ return true;
|
|
|
+ } // Function onDoubleClick()
|
|
|
+
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 键盘事件
|
|
|
+ *
|
|
|
+ * @param event 事件参数
|
|
|
+ * @return boolean
|
|
|
+ */
|
|
|
+
|
|
|
+ onKeyDown(event: KeyboardEvent): boolean {
|
|
|
+ if (this._status == SRelationState.Normal) {
|
|
|
+ return false;
|
|
|
+ } else if (this._status == SRelationState.Create) {
|
|
|
+ if (event.code == 'Enter') {
|
|
|
+ // 当顶点大于二个时才又条件执行闭合操作并清空堆栈
|
|
|
+ if (this.pointList.length > 2) {
|
|
|
+ this._status = SRelationState.Normal;
|
|
|
+ if (this.undoStack) {
|
|
|
+ this.undoStack.clear();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if (this._status == SRelationState.Edit) {
|
|
|
+ if (event.key == 'Alt') {
|
|
|
+ this.isAlt = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.update()
|
|
|
+ return true;
|
|
|
+ } // Function onKeyDown()
|
|
|
+
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 键盘键抬起事件
|
|
|
+ *
|
|
|
+ * @param event 事件参数
|
|
|
+ * @return boolean
|
|
|
+ */
|
|
|
+ onKeyUp(event: KeyboardEvent): boolean {
|
|
|
+ if (this._status == SRelationState.Edit) {
|
|
|
+ if (event.key == 'Alt') {
|
|
|
+ this.isAlt = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.update()
|
|
|
+ return true;
|
|
|
+ } // Function onKeyUp()
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 鼠标按下事件
|
|
|
+ *
|
|
|
+ * @param event 事件参数
|
|
|
+ * @return boolean
|
|
|
+ */
|
|
|
+ onMouseDown(event: SMouseEvent): boolean {
|
|
|
+ // 如果状态为编辑状态则添加点
|
|
|
+ if (this._status == SRelationState.Create) {
|
|
|
+ // 新增顶点
|
|
|
+ this.insertPoint(event.x, event.y);
|
|
|
+ // 记录新增顶点操作记录压入堆栈
|
|
|
+ let pos = new SPoint(event.x, event.y);
|
|
|
+ this.recordAction(SPointListInsert, [this.pointList, pos])
|
|
|
+ } else if (this._status == SRelationState.Edit) {
|
|
|
+ // 对多边形数组做编辑操作
|
|
|
+ this.editPolygonPoint(event);
|
|
|
+
|
|
|
+ }
|
|
|
return true;
|
|
|
} // Function onMouseDown()
|
|
|
+
|
|
|
/**
|
|
|
- * 鼠标双击事件
|
|
|
+ * 鼠标移入事件
|
|
|
*
|
|
|
* @param event 事件参数
|
|
|
* @return boolean
|
|
|
*/
|
|
|
+ onMouseEnter(event: SMouseEvent): boolean {
|
|
|
+ return true;
|
|
|
+ } // Function onMouseEnter()
|
|
|
+
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 鼠标移出事件
|
|
|
+ *
|
|
|
+ * @param event 事件参数
|
|
|
+ * @return boolean
|
|
|
+ */
|
|
|
+
|
|
|
onMouseLeave(event: SMouseEvent): boolean {
|
|
|
return true;
|
|
|
- } // Function onMouseDown()
|
|
|
+ } // Function onMouseLeave()
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 鼠标移动事件
|
|
|
+ *
|
|
|
+ * @param event 事件参数
|
|
|
+ * @return boolean
|
|
|
+ */
|
|
|
+
|
|
|
onMouseMove(event: SMouseEvent): boolean {
|
|
|
- if (this._status == 2) {
|
|
|
+ if (this._status == SRelationState.Create) {
|
|
|
this.lastPoint.x = event.x;
|
|
|
this.lastPoint.y = event.y;
|
|
|
- } else if (this._status == 3) {
|
|
|
+ this.update()
|
|
|
+ } else if (this._status == SRelationState.Edit) {
|
|
|
if (-1 != this.curIndex) {
|
|
|
- console.log('onMouseMove')
|
|
|
this.pointList[this.curIndex].x = event.x;
|
|
|
this.pointList[this.curIndex].y = event.y;
|
|
|
}
|
|
|
+ this.update()
|
|
|
}
|
|
|
- this.update()
|
|
|
+
|
|
|
return true;
|
|
|
- } // Function onMouseDown()
|
|
|
+ } // Function onMouseMove()
|
|
|
+
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 鼠标抬起事件
|
|
|
+ *
|
|
|
+ * @param event 事件参数
|
|
|
+ * @return boolean
|
|
|
+ */
|
|
|
+
|
|
|
onMouseUp(event: SMouseEvent): boolean {
|
|
|
- console.log('onMouseUp')
|
|
|
- if (this._status == 3) {
|
|
|
+ if (this._status == SRelationState.Edit) {
|
|
|
+ if (-1 != this.curIndex) {
|
|
|
+ const pos = new SPoint(this.pointList[this.curIndex].x, this.pointList[this.curIndex].y)
|
|
|
+ this.recordAction(SPointListUpdate, [this.pointList, this.curPoint, pos, this.curIndex])
|
|
|
+ }
|
|
|
this.curIndex = -1;
|
|
|
+ this.curPoint = null;
|
|
|
}
|
|
|
return true;
|
|
|
} // Function onMouseUp()
|
|
|
- onResize(event: SMouseEvent): boolean {
|
|
|
- return true;
|
|
|
- } // Function onMouseUp()
|
|
|
|
|
|
+ /**
|
|
|
+ * 适配事件
|
|
|
+ *
|
|
|
+ * @param event 事件参数
|
|
|
+ * @return boolean
|
|
|
+ */
|
|
|
|
|
|
+ onResize(event: SMouseEvent): boolean {
|
|
|
+ return true;
|
|
|
+ } // Function onResize()
|
|
|
|
|
|
/**
|
|
|
- * 点击点是否在item范围内
|
|
|
- *
|
|
|
- */
|
|
|
- // contains(x: number, y: number): boolean {
|
|
|
- // console.log('PTL.MinDis < this.scenceLen')
|
|
|
- // if (3 == this._status) {
|
|
|
- // let p = new SPoint(x, y);
|
|
|
- // // todo差缩放
|
|
|
- // for (let i = 1; i < this.pointList.length; i++) {
|
|
|
- // let PTL = SMathUtil.pointToLine(
|
|
|
- // p,
|
|
|
- // new SLine(
|
|
|
- // this.pointList[i - 1].x,
|
|
|
- // this.pointList[i - 1].y,
|
|
|
- // this.pointList[i].x,
|
|
|
- // this.pointList[i].y
|
|
|
- // )
|
|
|
- // );
|
|
|
- // if (PTL.MinDis < this.scenceLen) {
|
|
|
- // console.log('PTL.MinDis < this.scenceLen', PTL.MinDis, this.scenceLen)
|
|
|
- // return true;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // return false;
|
|
|
- // }
|
|
|
- // return false;
|
|
|
- // }
|
|
|
+ * Item对象边界区域
|
|
|
+ *
|
|
|
+ * @return SRect
|
|
|
+ */
|
|
|
+ boundingRect(): SRect {
|
|
|
+ return new SRect(
|
|
|
+ this.minX,
|
|
|
+ this.minY,
|
|
|
+ this.maxX - this.minX,
|
|
|
+ this.maxY - this.minY
|
|
|
+ );
|
|
|
+ } // Function boundingRect()
|
|
|
|
|
|
/**
|
|
|
- * Item绘制操作
|
|
|
- *
|
|
|
- * @param painter painter对象
|
|
|
- */
|
|
|
-
|
|
|
+ * Item绘制操作
|
|
|
+ *
|
|
|
+ * @param painter painter对象
|
|
|
+ */
|
|
|
onDraw(painter: SPainter): void {
|
|
|
this.scenceLen = painter.toPx(this.len)
|
|
|
// 当状态为展示状态
|
|
|
- if (this._status == 1) {
|
|
|
+ if (this._status == SRelationState.Normal) {
|
|
|
// 闭合多边形
|
|
|
- this.showPolygon(painter, this.pointList);
|
|
|
- } else if (this._status == 2) {
|
|
|
+ this.drawShowPolygon(painter, this.pointList);
|
|
|
+ } else if (this._status == SRelationState.Create) {
|
|
|
// 创建状态
|
|
|
- this.createPolygon(painter, this.pointList)
|
|
|
+ this.drawCreatePolygon(painter, this.pointList)
|
|
|
} else {
|
|
|
// 编辑状态
|
|
|
- this.editPolygon(painter, this.pointList);
|
|
|
+ this.drawEditPolygon(painter, this.pointList);
|
|
|
}
|
|
|
} // Function onDraw()
|
|
|
|