123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563 |
- import { SKeyCode, SMouseEvent, SUndoStack } from "@persagy-web/base/lib";
- import { ItemOrder, SItemStatus } from "@persagy-web/big/lib";
- import { SMathUtil } from "@persagy-web/big/lib/utils/SMathUtil";
- import { SColor, SLine, SPainter, SPoint, SRect } from "@persagy-web/draw/lib";
- import { SGraphItem, SGraphPointListDelete, SGraphPointListInsert, SGraphPointListUpdate, SGraphStyleItem, SLineStyle } from "@persagy-web/graph/lib";
- /**
- * 折线编辑类
- *
- * @author 郝建龙
- */
- export class CustomWall extends SGraphStyleItem {
- /** X 坐标最小值 */
- private minX = Number.MAX_SAFE_INTEGER;
- /** X 坐标最大值 */
- private maxX = Number.MIN_SAFE_INTEGER;
- /** Y 坐标最小值 */
- private minY = Number.MAX_SAFE_INTEGER;
- /** Y 坐标最大值 */
- private maxY = Number.MIN_SAFE_INTEGER;
- /** 折点信息 */
- pointList: SPoint[] = [];
- /** 是否绘制完成 */
- _status: SItemStatus = SItemStatus.Normal;
- get status(): SItemStatus {
- return this._status;
- }
- set status(v: SItemStatus) {
- this._status = v;
- this.undoStack.clear();
- this.update();
- }
- /** 鼠标移动时的点 */
- private lastPoint: SPoint | null = null;
- /** 是否垂直水平绘制 */
- private _verAndLeve: boolean = false;
- get verAndLeve(): boolean {
- return this._verAndLeve;
- }
- set verAndLeve(bool: boolean) {
- this._verAndLeve = bool;
- this.update();
- }
- /** 全局灵敏度 */
- dis: number = 10;
- /** 灵敏度转换为场景长度 */
- private sceneDis: number = 10;
- /** 当前点索引 */
- private curIndex: number = -1;
- /** 当前点 */
- private curPoint: SPoint | null = null;
- /** undo / redo 堆栈 */
- private undoStack: SUndoStack = new SUndoStack();
- /**
- * 构造函数
- *
- * @param parent 父级
- * @param data 折线数据
- */
- constructor(parent: null | SGraphItem, data: SPoint[] | SPoint) {
- super(parent);
- if (data instanceof Array) {
- this.pointList = data;
- } else {
- this.pointList.push(new SPoint(data));
- this.lastPoint = data;
- }
- this.fillColor = new SColor("#2196f3");
- this.selectable = true;
- this.zOrder = ItemOrder.wallOrder
- } // Constructor
-
- /**
- * 添加点至数组中
- *
- * @param p 添加的点
- * @param index 添加到的索引
- */
- private addPoint(p: SPoint, index?: number): void {
- if (index && this.canHandle(index)) {
- this.pointList.splice(index, 0, p);
- this.recordAction(SGraphPointListInsert, [
- this.pointList,
- p,
- index
- ]);
- } else {
- this.pointList.push(p);
- this.recordAction(SGraphPointListInsert, [this.pointList, p]);
- }
- this.update();
- }
- /**
- * 是否可以添加点到数组中
- *
- * @param index 要添加到的索引
- * @return 是否可添加
- */
- private canHandle(index: number): boolean {
- return index >= 0 && index <= this.pointList.length;
- }
- /**
- * 根据索引删除点
- *
- * @param index 删除点
- */
- deletePoint(index: number): void {
- if (this.canHandle(index) && this.pointList.length > 2) {
- const p = new SPoint(
- this.pointList[this.curIndex].x,
- this.pointList[this.curIndex].y
- );
- this.pointList.splice(index, 1);
- this.recordAction(SGraphPointListDelete, [
- this.pointList,
- p,
- index
- ]);
- this.curIndex = -1;
- this.curPoint = null;
- this.update();
- }
- }
- /**
- * 鼠标按下事件
- *
- * @param event 鼠标事件
- * @return 是否处理事件
- */
- onMouseDown(event: SMouseEvent): boolean {
- this.curIndex = -1;
- this.curPoint = null;
- if (event.shiftKey || this.verAndLeve) {
- event = this.compare(event);
- }
- if (event.buttons == 1) {
- if (this.status == SItemStatus.Create) {
- this.addPoint(new SPoint(event.x, event.y));
- return true;
- } else if (this.status == SItemStatus.Edit) {
- // 查询鼠标最近的索引
- this.findNearestPoint(new SPoint(event.x, event.y));
- // 增加点
- 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);
- }
- /**
- * 鼠标移动事件
- *
- * @param event 鼠标事件
- * @return 是否处理事件
- */
- onMouseMove(event: SMouseEvent): boolean {
- if (event.shiftKey || this.verAndLeve) {
- event = this.compare(event);
- }
- if (this.status == SItemStatus.Create) {
- if (this.lastPoint) {
- this.lastPoint.x = event.x;
- this.lastPoint.y = event.y;
- } else {
- this.lastPoint = new SPoint(event.x, event.y);
- }
- this.update();
- return true;
- } else if (this.status == SItemStatus.Edit) {
- if (event.buttons == 1) {
- 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);
- }
- }
- /**
- * 鼠标移动事件
- *
- * @param event 鼠标事件
- * @return 是否处理事件
- */
- onMouseUp(event: SMouseEvent): boolean {
- if (this.status == SItemStatus.Edit) {
- if (this.curIndex > -1) {
- const p = new SPoint(
- this.pointList[this.curIndex].x,
- this.pointList[this.curIndex].y
- );
- this.recordAction(SGraphPointListUpdate, [
- this.pointList,
- this.curPoint,
- p,
- this.curIndex
- ]);
- }
- } else if (this.status == SItemStatus.Normal) {
- super.onMouseUp(event);
- return true;
- }
- return true;
- }
- /**
- * 鼠标双击事件
- *
- * @param event 事件参数
- * @return 是否处理事件
- */
- onDoubleClick(event: SMouseEvent): boolean {
- // 如果为show状态 双击改对象则需改为编辑状态
- if (this.status == SItemStatus.Normal) {
- this.status = SItemStatus.Edit;
- // @ts-ignore
- this.grabItem(this);
- } else if (this.status == SItemStatus.Edit) {
- // 编辑状态
- this.status = SItemStatus.Normal;
- this.releaseItem();
- } else if (this.status == SItemStatus.Create) {
- // 创建状态
- if (this.pointList.length > 1) {
- this.status = SItemStatus.Normal;
- this.releaseItem();
- this.$emit("finishCreated");
- }
- }
- this.$emit("onDoubleClick", event);
- return true;
- }
- /**
- * 键盘按键弹起事件
- *
- * @param event 事件参数
- */
- onKeyUp(event: KeyboardEvent): void {
- if (event.keyCode == SKeyCode.Enter) {
- if (this.pointList.length > 1) {
- if (this.status == SItemStatus.Create) {
- this.$emit("finishCreated");
- }
- this.status = SItemStatus.Normal;
- this.releaseItem();
- }
- }
- // delete删除点
- if (
- event.keyCode == SKeyCode.Delete &&
- this.status == SItemStatus.Edit
- ) {
- this.deletePoint(this.curIndex);
- }
- }
- /**
- * 获取点击点与点集中距离最近点
- *
- * @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;
- this.curPoint = new SPoint(
- this.pointList[this.curIndex].x,
- this.pointList[this.curIndex].y
- );
- }
- }
- }
- /**
- * 计算增加点的位置
- *
- * @param p 鼠标点击点
- */
- findAddPos(p: SPoint): void {
- let len = SMathUtil.pointToLine(
- p,
- 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(
- p,
- new SLine(this.pointList[i], this.pointList[i + 1])
- );
- if (dis.MinDis < len.MinDis) {
- len = dis;
- index = i;
- }
- }
- }
- if (len.MinDis < this.sceneDis) {
- if (len.Point) {
- this.addPoint(len.Point, index + 1);
- }
- }
- }
- /**
- * shift 垂直水平创建或编辑
- *
- * @param event 事件
- * @return 处理后的鼠标事件
- */
- compare(event: SMouseEvent): SMouseEvent {
- if (this.pointList.length) {
- let last = new SPoint(event.x, event.y);
- if (this.status == SItemStatus.Create) {
- last = this.pointList[this.pointList.length - 1];
- } else if (this.status == SItemStatus.Edit) {
- if (this.curIndex > 1) {
- 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) {
- event.x = last.x;
- } else {
- event.y = last.y;
- }
- }
- return event;
- }
- /**
- * 记录相关动作并推入栈中
- *
- * @param SGraphCommand 相关命令类
- * @param any 对应传入参数
- */
- protected recordAction(SGraphCommand: any, any: any[]): void {
- // 记录相关命令并推入堆栈中
- const command = new SGraphCommand(this.scene, this, ...any);
- this.undoStack.push(command);
- }
- /**
- * Item 对象边界区域
- *
- * @return 对象边界区域
- */
- boundingRect(): SRect {
- if (this.pointList.length) {
- this.minX = this.pointList[0].x;
- this.maxX = this.pointList[0].x;
- this.minY = this.pointList[0].y;
- this.maxY = this.pointList[0].y;
- this.pointList.forEach(it => {
- let x = it.x,
- y = it.y;
- 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,
- this.maxX - this.minX,
- this.maxY - this.minY
- );
- }
- /**
- * 判断点是否在区域内
- *
- * @param x x 坐标
- * @param y y 坐标
- * @return 是否在区域内
- */
- contains(x: number, y: number): boolean {
- let p = new SPoint(x, y);
- 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.sceneDis) {
- return true;
- }
- }
- return false;
- }
- /**
- * 撤销操作
- */
- undo(): void {
- if (this._status != SItemStatus.Normal) {
- this.undoStack.undo();
- }
- }
- /**
- * 重做操作
- */
- redo(): void {
- if (this._status != SItemStatus.Normal) {
- this.undoStack.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();
- }
- }
- /**
- * 绘制基本图形
- *
- * @param painter 绘制对象
- */
- drawBaseLine(painter: SPainter): void {
- // 绘制基本图形
- painter.pen.color = 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) {
- painter.pen.lineDash = [
- painter.toPx(this.lineWidth),
- painter.toPx(this.lineWidth)
- ];
- }
- painter.drawPolyline(this.pointList);
- }
- /**
- * 返回对象储存的相关数据
- *
- * @return 对象储存的相关数据
- */
- toData(): any {
- return this.data;
- }
- /**
- * Item 绘制操作
- *
- * @param painter 绘制对象
- */
- onDraw(painter: SPainter): void {
- // 缓存场景长度
- this.sceneDis = painter.toPx(this.dis);
- // 创建状态
- painter.pen.lineWidth = painter.toPx(this.lineWidth);
- if (this.status == SItemStatus.Create && this.lastPoint) {
- // 绘制基本图形
- this.drawBaseLine(painter);
- painter.drawLine(
- this.pointList[this.pointList.length - 1],
- this.lastPoint
- );
- // 编辑状态
- this.pointList.forEach((t, i): void => {
- painter.brush.color = SColor.White;
- if (i == this.curIndex) {
- painter.brush.color = this.fillColor;
- }
- painter.drawCircle(t.x, t.y, painter.toPx(5));
- });
- } else if (this.status == SItemStatus.Edit) {
- // 绘制基本图形
- this.drawBaseLine(painter);
- // 编辑状态
- this.pointList.forEach((t, i): void => {
- painter.brush.color = SColor.White;
- if (i == this.curIndex) {
- painter.brush.color = this.fillColor;
- }
- painter.drawCircle(t.x, t.y, painter.toPx(5));
- });
- } else {
- // 查看状态,是否选中
- if (this.selected) {
- 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;
- }
- // 绘制基本图形
- this.drawBaseLine(painter);
- }
- }
- }
|