CustomWall.ts 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563
  1. import { SKeyCode, SMouseEvent, SUndoStack } from "@persagy-web/base/lib";
  2. import { ItemOrder, SItemStatus } from "@persagy-web/big/lib";
  3. import { SMathUtil } from "@persagy-web/big/lib/utils/SMathUtil";
  4. import { SColor, SLine, SPainter, SPoint, SRect } from "@persagy-web/draw/lib";
  5. import { SGraphItem, SGraphPointListDelete, SGraphPointListInsert, SGraphPointListUpdate, SGraphStyleItem, SLineStyle } from "@persagy-web/graph/lib";
  6. /**
  7. * 折线编辑类
  8. *
  9. * @author 郝建龙
  10. */
  11. export class CustomWall extends SGraphStyleItem {
  12. /** X 坐标最小值 */
  13. private minX = Number.MAX_SAFE_INTEGER;
  14. /** X 坐标最大值 */
  15. private maxX = Number.MIN_SAFE_INTEGER;
  16. /** Y 坐标最小值 */
  17. private minY = Number.MAX_SAFE_INTEGER;
  18. /** Y 坐标最大值 */
  19. private maxY = Number.MIN_SAFE_INTEGER;
  20. /** 折点信息 */
  21. pointList: SPoint[] = [];
  22. /** 是否绘制完成 */
  23. _status: SItemStatus = SItemStatus.Normal;
  24. get status(): SItemStatus {
  25. return this._status;
  26. }
  27. set status(v: SItemStatus) {
  28. this._status = v;
  29. this.undoStack.clear();
  30. this.update();
  31. }
  32. /** 鼠标移动时的点 */
  33. private lastPoint: SPoint | null = null;
  34. /** 是否垂直水平绘制 */
  35. private _verAndLeve: boolean = false;
  36. get verAndLeve(): boolean {
  37. return this._verAndLeve;
  38. }
  39. set verAndLeve(bool: boolean) {
  40. this._verAndLeve = bool;
  41. this.update();
  42. }
  43. /** 全局灵敏度 */
  44. dis: number = 10;
  45. /** 灵敏度转换为场景长度 */
  46. private sceneDis: number = 10;
  47. /** 当前点索引 */
  48. private curIndex: number = -1;
  49. /** 当前点 */
  50. private curPoint: SPoint | null = null;
  51. /** undo / redo 堆栈 */
  52. private undoStack: SUndoStack = new SUndoStack();
  53. /**
  54. * 构造函数
  55. *
  56. * @param parent 父级
  57. * @param data 折线数据
  58. */
  59. constructor(parent: null | SGraphItem, data: SPoint[] | SPoint) {
  60. super(parent);
  61. if (data instanceof Array) {
  62. this.pointList = data;
  63. } else {
  64. this.pointList.push(new SPoint(data));
  65. this.lastPoint = data;
  66. }
  67. this.fillColor = new SColor("#2196f3");
  68. this.selectable = true;
  69. this.zOrder = ItemOrder.wallOrder
  70. } // Constructor
  71. /**
  72. * 添加点至数组中
  73. *
  74. * @param p 添加的点
  75. * @param index 添加到的索引
  76. */
  77. private addPoint(p: SPoint, index?: number): void {
  78. if (index && this.canHandle(index)) {
  79. this.pointList.splice(index, 0, p);
  80. this.recordAction(SGraphPointListInsert, [
  81. this.pointList,
  82. p,
  83. index
  84. ]);
  85. } else {
  86. this.pointList.push(p);
  87. this.recordAction(SGraphPointListInsert, [this.pointList, p]);
  88. }
  89. this.update();
  90. }
  91. /**
  92. * 是否可以添加点到数组中
  93. *
  94. * @param index 要添加到的索引
  95. * @return 是否可添加
  96. */
  97. private canHandle(index: number): boolean {
  98. return index >= 0 && index <= this.pointList.length;
  99. }
  100. /**
  101. * 根据索引删除点
  102. *
  103. * @param index 删除点
  104. */
  105. deletePoint(index: number): void {
  106. if (this.canHandle(index) && this.pointList.length > 2) {
  107. const p = new SPoint(
  108. this.pointList[this.curIndex].x,
  109. this.pointList[this.curIndex].y
  110. );
  111. this.pointList.splice(index, 1);
  112. this.recordAction(SGraphPointListDelete, [
  113. this.pointList,
  114. p,
  115. index
  116. ]);
  117. this.curIndex = -1;
  118. this.curPoint = null;
  119. this.update();
  120. }
  121. }
  122. /**
  123. * 鼠标按下事件
  124. *
  125. * @param event 鼠标事件
  126. * @return 是否处理事件
  127. */
  128. onMouseDown(event: SMouseEvent): boolean {
  129. this.curIndex = -1;
  130. this.curPoint = null;
  131. if (event.shiftKey || this.verAndLeve) {
  132. event = this.compare(event);
  133. }
  134. if (event.buttons == 1) {
  135. if (this.status == SItemStatus.Create) {
  136. this.addPoint(new SPoint(event.x, event.y));
  137. return true;
  138. } else if (this.status == SItemStatus.Edit) {
  139. // 查询鼠标最近的索引
  140. this.findNearestPoint(new SPoint(event.x, event.y));
  141. // 增加点
  142. if (this.curIndex < 0) {
  143. this.findAddPos(new SPoint(event.x, event.y));
  144. }
  145. // 删除点
  146. if (event.altKey && this.canHandle(this.curIndex)) {
  147. this.deletePoint(this.curIndex);
  148. }
  149. this.update();
  150. return true;
  151. } else {
  152. return super.onMouseDown(event);
  153. }
  154. }
  155. return super.onMouseDown(event);
  156. }
  157. /**
  158. * 鼠标移动事件
  159. *
  160. * @param event 鼠标事件
  161. * @return 是否处理事件
  162. */
  163. onMouseMove(event: SMouseEvent): boolean {
  164. if (event.shiftKey || this.verAndLeve) {
  165. event = this.compare(event);
  166. }
  167. if (this.status == SItemStatus.Create) {
  168. if (this.lastPoint) {
  169. this.lastPoint.x = event.x;
  170. this.lastPoint.y = event.y;
  171. } else {
  172. this.lastPoint = new SPoint(event.x, event.y);
  173. }
  174. this.update();
  175. return true;
  176. } else if (this.status == SItemStatus.Edit) {
  177. if (event.buttons == 1) {
  178. if (this.canHandle(this.curIndex)) {
  179. this.pointList[this.curIndex].x = event.x;
  180. this.pointList[this.curIndex].y = event.y;
  181. }
  182. }
  183. this.update();
  184. return true;
  185. } else {
  186. return super.onMouseMove(event);
  187. }
  188. }
  189. /**
  190. * 鼠标移动事件
  191. *
  192. * @param event 鼠标事件
  193. * @return 是否处理事件
  194. */
  195. onMouseUp(event: SMouseEvent): boolean {
  196. if (this.status == SItemStatus.Edit) {
  197. if (this.curIndex > -1) {
  198. const p = new SPoint(
  199. this.pointList[this.curIndex].x,
  200. this.pointList[this.curIndex].y
  201. );
  202. this.recordAction(SGraphPointListUpdate, [
  203. this.pointList,
  204. this.curPoint,
  205. p,
  206. this.curIndex
  207. ]);
  208. }
  209. } else if (this.status == SItemStatus.Normal) {
  210. super.onMouseUp(event);
  211. return true;
  212. }
  213. return true;
  214. }
  215. /**
  216. * 鼠标双击事件
  217. *
  218. * @param event 事件参数
  219. * @return 是否处理事件
  220. */
  221. onDoubleClick(event: SMouseEvent): boolean {
  222. // 如果为show状态 双击改对象则需改为编辑状态
  223. if (this.status == SItemStatus.Normal) {
  224. this.status = SItemStatus.Edit;
  225. // @ts-ignore
  226. this.grabItem(this);
  227. } else if (this.status == SItemStatus.Edit) {
  228. // 编辑状态
  229. this.status = SItemStatus.Normal;
  230. this.releaseItem();
  231. } else if (this.status == SItemStatus.Create) {
  232. // 创建状态
  233. if (this.pointList.length > 1) {
  234. this.status = SItemStatus.Normal;
  235. this.releaseItem();
  236. this.$emit("finishCreated");
  237. }
  238. }
  239. this.$emit("onDoubleClick", event);
  240. return true;
  241. }
  242. /**
  243. * 键盘按键弹起事件
  244. *
  245. * @param event 事件参数
  246. */
  247. onKeyUp(event: KeyboardEvent): void {
  248. if (event.keyCode == SKeyCode.Enter) {
  249. if (this.pointList.length > 1) {
  250. if (this.status == SItemStatus.Create) {
  251. this.$emit("finishCreated");
  252. }
  253. this.status = SItemStatus.Normal;
  254. this.releaseItem();
  255. }
  256. }
  257. // delete删除点
  258. if (
  259. event.keyCode == SKeyCode.Delete &&
  260. this.status == SItemStatus.Edit
  261. ) {
  262. this.deletePoint(this.curIndex);
  263. }
  264. }
  265. /**
  266. * 获取点击点与点集中距离最近点
  267. *
  268. * @param p 鼠标点击点
  269. */
  270. findNearestPoint(p: SPoint): void {
  271. let len = this.sceneDis;
  272. for (let i = 0; i < this.pointList.length; i++) {
  273. let dis = SMathUtil.pointDistance(
  274. p.x,
  275. p.y,
  276. this.pointList[i].x,
  277. this.pointList[i].y
  278. );
  279. if (dis < len) {
  280. len = dis;
  281. this.curIndex = i;
  282. this.curPoint = new SPoint(
  283. this.pointList[this.curIndex].x,
  284. this.pointList[this.curIndex].y
  285. );
  286. }
  287. }
  288. }
  289. /**
  290. * 计算增加点的位置
  291. *
  292. * @param p 鼠标点击点
  293. */
  294. findAddPos(p: SPoint): void {
  295. let len = SMathUtil.pointToLine(
  296. p,
  297. new SLine(this.pointList[0], this.pointList[1])
  298. ),
  299. index = 0;
  300. if (this.pointList.length > 2) {
  301. for (let i = 1; i < this.pointList.length - 1; i++) {
  302. let dis = SMathUtil.pointToLine(
  303. p,
  304. new SLine(this.pointList[i], this.pointList[i + 1])
  305. );
  306. if (dis.MinDis < len.MinDis) {
  307. len = dis;
  308. index = i;
  309. }
  310. }
  311. }
  312. if (len.MinDis < this.sceneDis) {
  313. if (len.Point) {
  314. this.addPoint(len.Point, index + 1);
  315. }
  316. }
  317. }
  318. /**
  319. * shift 垂直水平创建或编辑
  320. *
  321. * @param event 事件
  322. * @return 处理后的鼠标事件
  323. */
  324. compare(event: SMouseEvent): SMouseEvent {
  325. if (this.pointList.length) {
  326. let last = new SPoint(event.x, event.y);
  327. if (this.status == SItemStatus.Create) {
  328. last = this.pointList[this.pointList.length - 1];
  329. } else if (this.status == SItemStatus.Edit) {
  330. if (this.curIndex > 1) {
  331. last = this.pointList[this.curIndex - 1];
  332. }
  333. }
  334. const dx = Math.abs(event.x - last.x);
  335. const dy = Math.abs(event.y - last.y);
  336. if (dy > dx) {
  337. event.x = last.x;
  338. } else {
  339. event.y = last.y;
  340. }
  341. }
  342. return event;
  343. }
  344. /**
  345. * 记录相关动作并推入栈中
  346. *
  347. * @param SGraphCommand 相关命令类
  348. * @param any 对应传入参数
  349. */
  350. protected recordAction(SGraphCommand: any, any: any[]): void {
  351. // 记录相关命令并推入堆栈中
  352. const command = new SGraphCommand(this.scene, this, ...any);
  353. this.undoStack.push(command);
  354. }
  355. /**
  356. * Item 对象边界区域
  357. *
  358. * @return 对象边界区域
  359. */
  360. boundingRect(): SRect {
  361. if (this.pointList.length) {
  362. this.minX = this.pointList[0].x;
  363. this.maxX = this.pointList[0].x;
  364. this.minY = this.pointList[0].y;
  365. this.maxY = this.pointList[0].y;
  366. this.pointList.forEach(it => {
  367. let x = it.x,
  368. y = it.y;
  369. if (x < this.minX) {
  370. this.minX = x;
  371. }
  372. if (y < this.minY) {
  373. this.minY = y;
  374. }
  375. if (x > this.maxX) {
  376. this.maxX = x;
  377. }
  378. if (y > this.maxY) {
  379. this.maxY = y;
  380. }
  381. });
  382. }
  383. return new SRect(
  384. this.minX,
  385. this.minY,
  386. this.maxX - this.minX,
  387. this.maxY - this.minY
  388. );
  389. }
  390. /**
  391. * 判断点是否在区域内
  392. *
  393. * @param x x 坐标
  394. * @param y y 坐标
  395. * @return 是否在区域内
  396. */
  397. contains(x: number, y: number): boolean {
  398. let p = new SPoint(x, y);
  399. for (let i = 1; i < this.pointList.length; i++) {
  400. let PTL = SMathUtil.pointToLine(
  401. p,
  402. new SLine(
  403. this.pointList[i - 1].x,
  404. this.pointList[i - 1].y,
  405. this.pointList[i].x,
  406. this.pointList[i].y
  407. )
  408. );
  409. if (PTL.MinDis < this.sceneDis) {
  410. return true;
  411. }
  412. }
  413. return false;
  414. }
  415. /**
  416. * 撤销操作
  417. */
  418. undo(): void {
  419. if (this._status != SItemStatus.Normal) {
  420. this.undoStack.undo();
  421. }
  422. }
  423. /**
  424. * 重做操作
  425. */
  426. redo(): void {
  427. if (this._status != SItemStatus.Normal) {
  428. this.undoStack.redo();
  429. }
  430. }
  431. /**
  432. * 取消操作执行
  433. */
  434. cancelOperate(): void {
  435. if (this.status == SItemStatus.Create) {
  436. this.parent = null;
  437. this.releaseItem();
  438. } else if (this.status == SItemStatus.Edit) {
  439. this.status = SItemStatus.Normal;
  440. this.releaseItem();
  441. }
  442. }
  443. /**
  444. * 绘制基本图形
  445. *
  446. * @param painter 绘制对象
  447. */
  448. drawBaseLine(painter: SPainter): void {
  449. // 绘制基本图形
  450. painter.pen.color = this.strokeColor;
  451. if (this.lineStyle == SLineStyle.Dashed) {
  452. painter.pen.lineDash = [
  453. painter.toPx(this.lineWidth * 3),
  454. painter.toPx(this.lineWidth * 7)
  455. ];
  456. } else if (this.lineStyle == SLineStyle.Dotted) {
  457. painter.pen.lineDash = [
  458. painter.toPx(this.lineWidth),
  459. painter.toPx(this.lineWidth)
  460. ];
  461. }
  462. painter.drawPolyline(this.pointList);
  463. }
  464. /**
  465. * 返回对象储存的相关数据
  466. *
  467. * @return 对象储存的相关数据
  468. */
  469. toData(): any {
  470. return this.data;
  471. }
  472. /**
  473. * Item 绘制操作
  474. *
  475. * @param painter 绘制对象
  476. */
  477. onDraw(painter: SPainter): void {
  478. // 缓存场景长度
  479. this.sceneDis = painter.toPx(this.dis);
  480. // 创建状态
  481. painter.pen.lineWidth = painter.toPx(this.lineWidth);
  482. if (this.status == SItemStatus.Create && this.lastPoint) {
  483. // 绘制基本图形
  484. this.drawBaseLine(painter);
  485. painter.drawLine(
  486. this.pointList[this.pointList.length - 1],
  487. this.lastPoint
  488. );
  489. // 编辑状态
  490. this.pointList.forEach((t, i): void => {
  491. painter.brush.color = SColor.White;
  492. if (i == this.curIndex) {
  493. painter.brush.color = this.fillColor;
  494. }
  495. painter.drawCircle(t.x, t.y, painter.toPx(5));
  496. });
  497. } else if (this.status == SItemStatus.Edit) {
  498. // 绘制基本图形
  499. this.drawBaseLine(painter);
  500. // 编辑状态
  501. this.pointList.forEach((t, i): void => {
  502. painter.brush.color = SColor.White;
  503. if (i == this.curIndex) {
  504. painter.brush.color = this.fillColor;
  505. }
  506. painter.drawCircle(t.x, t.y, painter.toPx(5));
  507. });
  508. } else {
  509. // 查看状态,是否选中
  510. if (this.selected) {
  511. painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
  512. painter.shadow.shadowBlur = 10;
  513. painter.shadow.shadowColor = new SColor(`#00000033`);
  514. painter.shadow.shadowOffsetX = 5;
  515. painter.shadow.shadowOffsetY = 5;
  516. }
  517. // 绘制基本图形
  518. this.drawBaseLine(painter);
  519. }
  520. }
  521. }