SBasePolylineEdit.ts 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689
  1. /*
  2. * *********************************************************************************************************************
  3. *
  4. * !!
  5. * .F88X
  6. * X8888Y
  7. * .}888888N;
  8. * i888888N; .:! .I$WI:
  9. * R888888I .'N88~ i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
  10. * .R888888I .;N8888~ .X8' "8I.!,/8" !%NY8`"8I8~~8>,88I
  11. * +888888N; .8888888Y "&&8Y.}8,
  12. * ./888888N; .R888888Y .'}~ .>}'.`+> i}! "i' +/' .'i~ !11,.:">, .~]! .i}i
  13. * ~888888%: .I888888l .]88~`1/iY88Ii+1'.R$8$8]"888888888> Y8$ W8E X8E W8888'188Il}Y88$*
  14. * 18888888 E8888881 .]W%8$`R8X'&8%++N8i,8N%N8+l8%` .}8N:.R$RE%N88N%N$K$R 188,FE$8%~Y88I
  15. * .E888888I .i8888888' .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
  16. * 8888888I .,N888888~ ~88i"8W,!N8*.I88.}888%F,i$88"F88" 888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
  17. * i888888N' I888Y ]88;/EX*IFKFK88X K8R .l8W 88Y ~88}'88E&%8W.X8N``]88!.$8K .:W8I
  18. * .i888888N; I8Y .&8$ .X88! i881.:%888>I88 ;88] +88+.';;;;:.Y88X 18N.,88l .+88/
  19. * .:R888888I
  20. * .&888888I Copyright (c) 2016-2020. 博锐尚格科技股份有限公司
  21. * ~8888'
  22. * .!88~ All rights reserved.
  23. *
  24. * *********************************************************************************************************************
  25. */
  26. import { SColor, SLine, SPainter, SPoint, SRect } from "@persagy-web/draw";
  27. import { SKeyCode, SMouseEvent, SUndoStack } from "@persagy-web/base";
  28. import { SItemStatus } from "@persagy-web/big";;
  29. import { SMathUtil } from "@persagy-web/big/lib/utils/SMathUtil";;
  30. import {
  31. SGraphPointListDelete,
  32. SGraphPointListInsert,
  33. SGraphPointListUpdate,
  34. SLineStyle,
  35. SGraphItem
  36. } from "@persagy-web/graph/";
  37. import { SGraphEdit } from ".."
  38. import { Marker } from "../type/Marker";
  39. /**
  40. * 折线编辑类
  41. *
  42. * @author 韩耀龙 <han_yao_long@163.com>
  43. */
  44. export class SBasePolylineEdit extends SGraphEdit {
  45. /** 传入数据 */
  46. data: Marker;
  47. /** X 坐标最小值 */
  48. private minX = Number.MAX_SAFE_INTEGER;
  49. /** X 坐标最大值 */
  50. private maxX = Number.MIN_SAFE_INTEGER;
  51. /** Y 坐标最小值 */
  52. private minY = Number.MAX_SAFE_INTEGER;
  53. /** Y 坐标最大值 */
  54. private maxY = Number.MIN_SAFE_INTEGER;
  55. /** 折点信息 */
  56. pointList: SPoint[] = [];
  57. /** 是否绘制完成 */
  58. _status: SItemStatus = SItemStatus.Normal;
  59. get status(): SItemStatus {
  60. return this._status;
  61. } // Get status
  62. set status(v: SItemStatus) {
  63. this._status = v;
  64. this.undoStack.clear();
  65. this.update();
  66. } // Set status
  67. /** 鼠标移动时的点 */
  68. private lastPoint: SPoint | null = null;
  69. /** 线条颜色 */
  70. _strokeColor: SColor = SColor.Black;
  71. get strokeColor(): SColor {
  72. return this._strokeColor;
  73. } // Get strokeColor
  74. set strokeColor(v: SColor) {
  75. this._strokeColor = v;
  76. this.update();
  77. } // Set strokeColor
  78. /** 填充色 */
  79. _fillColor: SColor = new SColor("#2196f3");
  80. get fillColor(): SColor {
  81. return this._fillColor;
  82. } // Get fillColor
  83. set fillColor(v: SColor) {
  84. this._fillColor = v;
  85. this.update();
  86. } // Set fillColor
  87. /** 边框样式 */
  88. _lineStyle: SLineStyle = SLineStyle.Solid;
  89. get lineStyle(): SLineStyle {
  90. return this._lineStyle;
  91. } // Get lineStyle
  92. set lineStyle(v: SLineStyle) {
  93. this._lineStyle = v;
  94. this.update();
  95. } // Set lineStyle
  96. /** 线条宽度 */
  97. _lineWidth: number = 1;
  98. get lineWidth(): number {
  99. return this._lineWidth;
  100. } // Get lineWidth
  101. set lineWidth(v: number) {
  102. this._lineWidth = v;
  103. this.update();
  104. } // Set lineWidth
  105. /** 是否垂直水平绘制 */
  106. private _verAndLeve: Boolean = false;
  107. get verAndLeve(): Boolean {
  108. return this._verAndLeve;
  109. } // Get verAndLeve
  110. set verAndLeve(bool: Boolean) {
  111. this._verAndLeve = bool;
  112. this.update();
  113. } // Set verAndLeve
  114. /** 全局灵敏度 */
  115. dis: number = 10;
  116. /** 灵敏度转换为场景长度 */
  117. private sceneDis: number = 10;
  118. /** 当前点索引 */
  119. private curIndex: number = -1;
  120. /** 当前点 */
  121. private curPoint: SPoint | null = null;
  122. /** undo / redo 堆栈 */
  123. private undoStack: SUndoStack = new SUndoStack();
  124. /**
  125. * 构造函数
  126. *
  127. * @param parent 父级
  128. * @param data 折线数据
  129. */
  130. constructor(parent: null | SGraphItem, data: Marker) {
  131. super(parent);
  132. this.data = data;
  133. this.name = data.name;
  134. this.moveTo(data.pos.x, data.pos.y);
  135. this.showSelect = false;
  136. if (data && data.style) {
  137. if (data.style.outLine) {
  138. let setPointList: SPoint[];
  139. setPointList = data.style.outLine.map(i => {
  140. return new SPoint(i.x, i.y)
  141. });
  142. this.pointList = setPointList;
  143. }
  144. this.moveable = data.style.isMove ? data.style.isMove : false;
  145. if (data.style && data.style.default) {
  146. // 颜色
  147. if (data.style.default.strokeColor) {
  148. this.strokeColor = new SColor(data.style.default.strokeColor)
  149. }
  150. // 线宽
  151. if (data.style.default.lineWidth) {
  152. this.lineWidth = data.style.default.lineWidth
  153. }
  154. // 线样式
  155. if (data.style.default.lineStyle) {
  156. this.lineStyle = data.style.default.lineStyle
  157. }
  158. }
  159. }
  160. } // Constructor
  161. /**
  162. * 添加点至数组中
  163. *
  164. * @param p 添加的点
  165. * @param index 添加到的索引
  166. */
  167. private addPoint(p: SPoint, index?: number): void {
  168. if (index && this.canHandle(index)) {
  169. this.pointList.splice(index, 0, p);
  170. this.recordAction(SGraphPointListInsert, [
  171. this.pointList,
  172. p,
  173. index
  174. ]);
  175. } else {
  176. this.pointList.push(p);
  177. this.recordAction(SGraphPointListInsert, [this.pointList, p]);
  178. }
  179. this.update();
  180. } // Function addPoint()
  181. /**
  182. * 是否可以添加点到数组中
  183. *
  184. * @param index 要添加到的索引
  185. * @return 是否可添加
  186. */
  187. private canHandle(index: number): boolean {
  188. return index >= 0 && index <= this.pointList.length;
  189. } // Function canHandle()
  190. /**
  191. * 根据索引删除点
  192. *
  193. * @param index 删除点
  194. */
  195. deletePoint(index: number): void {
  196. if (this.canHandle(index) && this.pointList.length > 2) {
  197. const p = new SPoint(
  198. this.pointList[this.curIndex].x,
  199. this.pointList[this.curIndex].y
  200. );
  201. this.pointList.splice(index, 1);
  202. this.recordAction(SGraphPointListDelete, [
  203. this.pointList,
  204. p,
  205. index
  206. ]);
  207. this.curIndex = -1;
  208. this.curPoint = null;
  209. this.update();
  210. }
  211. } // Function deletePoint
  212. /**
  213. * 鼠标按下事件
  214. *
  215. * @param event 鼠标事件
  216. * @return 是否处理事件
  217. */
  218. onMouseDown(event: SMouseEvent): boolean {
  219. this.curIndex = -1;
  220. this.curPoint = null;
  221. if (event.shiftKey || this.verAndLeve) {
  222. event = this.compare(event);
  223. }
  224. if (event.buttons == 1) {
  225. if (this.status == SItemStatus.Create) {
  226. this.addPoint(new SPoint(event.x, event.y));
  227. return true;
  228. } else if (this.status == SItemStatus.Edit) {
  229. // 查询鼠标最近的索引
  230. this.findNearestPoint(new SPoint(event.x, event.y));
  231. // 增加点
  232. if (this.curIndex < 0) {
  233. this.findAddPos(new SPoint(event.x, event.y));
  234. }
  235. // 删除点
  236. if (event.altKey && this.canHandle(this.curIndex)) {
  237. this.deletePoint(this.curIndex);
  238. }
  239. this.update();
  240. return true;
  241. } else {
  242. return super.onMouseDown(event);
  243. }
  244. }
  245. return super.onMouseDown(event);
  246. } // Function onMouseDown()
  247. /**
  248. * 鼠标移动事件
  249. *
  250. * @param event 鼠标事件
  251. * @return 是否处理事件
  252. */
  253. onMouseMove(event: SMouseEvent): boolean {
  254. if (event.shiftKey || this.verAndLeve) {
  255. event = this.compare(event);
  256. }
  257. if (this.status == SItemStatus.Create) {
  258. if (this.lastPoint) {
  259. this.lastPoint.x = event.x;
  260. this.lastPoint.y = event.y;
  261. } else {
  262. this.lastPoint = new SPoint(event.x, event.y);
  263. }
  264. this.update();
  265. return true;
  266. } else if (this.status == SItemStatus.Edit) {
  267. if (event.buttons == 1) {
  268. if (this.canHandle(this.curIndex)) {
  269. this.pointList[this.curIndex].x = event.x;
  270. this.pointList[this.curIndex].y = event.y;
  271. }
  272. }
  273. this.update();
  274. return true;
  275. } else {
  276. return super.onMouseMove(event);
  277. }
  278. } // Function onMouseMove()
  279. /**
  280. * 鼠标移动事件
  281. *
  282. * @param event 鼠标事件
  283. * @return 是否处理事件
  284. */
  285. onMouseUp(event: SMouseEvent): boolean {
  286. if (this.status == SItemStatus.Edit) {
  287. if (this.curIndex > -1) {
  288. const p = new SPoint(
  289. this.pointList[this.curIndex].x,
  290. this.pointList[this.curIndex].y
  291. );
  292. this.recordAction(SGraphPointListUpdate, [
  293. this.pointList,
  294. this.curPoint,
  295. p,
  296. this.curIndex
  297. ]);
  298. }
  299. } else if (this.status == SItemStatus.Normal) {
  300. this.moveToOrigin(this.x, this.y);
  301. return super.onMouseUp(event);
  302. }
  303. return true;
  304. } // Function onMouseUp()
  305. /**
  306. * 鼠标双击事件
  307. *
  308. * @param event 事件参数
  309. * @return 是否处理事件
  310. */
  311. onDoubleClick(event: SMouseEvent): boolean {
  312. // 如果为show状态 双击改对象则需改为编辑状态
  313. if (this.status == SItemStatus.Normal) {
  314. this.status = SItemStatus.Edit;
  315. this.grabItem(this);
  316. } else if (this.status == SItemStatus.Edit) { // 编辑状态
  317. this.status = SItemStatus.Normal;
  318. this.releaseItem();
  319. } else if (this.status == SItemStatus.Create) { // 创建状态
  320. if (this.pointList.length > 1) {
  321. this.status = SItemStatus.Normal;
  322. this.releaseItem();
  323. this.$emit("finishCreated");
  324. }
  325. }
  326. this.$emit("onDoubleClick", event);
  327. return true;
  328. } // Function onDoubleClick()
  329. /**
  330. * 键盘按键弹起事件
  331. *
  332. * @param event 事件参数
  333. */
  334. onKeyUp(event: KeyboardEvent): void {
  335. if (event.keyCode == SKeyCode.Enter) {
  336. if (this.pointList.length > 1) {
  337. if (this.status == SItemStatus.Create) {
  338. this.$emit("finishCreated");
  339. }
  340. this.status = SItemStatus.Normal;
  341. this.releaseItem();
  342. }
  343. }
  344. // delete删除点
  345. if (
  346. event.keyCode == SKeyCode.Delete &&
  347. this.status == SItemStatus.Edit
  348. ) {
  349. this.deletePoint(this.curIndex);
  350. }
  351. } // Function onKeyUp()
  352. /**
  353. * 移动后处理所有坐标,并肩原点置为场景原点
  354. *
  355. * @param x x 坐标
  356. * @param y y 坐标
  357. */
  358. moveToOrigin(x: number, y: number): void {
  359. super.moveToOrigin(x, y);
  360. this.pointList = this.pointList.map(t => {
  361. t.x = t.x + x;
  362. t.y = t.y + y;
  363. return t;
  364. });
  365. this.x = 0;
  366. this.y = 0;
  367. } // Function moveToOrigin()
  368. /**
  369. * 获取点击点与点集中距离最近点
  370. *
  371. * @param p 鼠标点击点
  372. */
  373. findNearestPoint(p: SPoint): void {
  374. let len = this.sceneDis;
  375. for (let i = 0; i < this.pointList.length; i++) {
  376. let dis = SMathUtil.pointDistance(
  377. p.x,
  378. p.y,
  379. this.pointList[i].x,
  380. this.pointList[i].y
  381. );
  382. if (dis < len) {
  383. len = dis;
  384. this.curIndex = i;
  385. this.curPoint = new SPoint(
  386. this.pointList[this.curIndex].x,
  387. this.pointList[this.curIndex].y
  388. );
  389. }
  390. }
  391. } // Function findNearestPoint()
  392. /**
  393. * 计算增加点的位置
  394. *
  395. * @param p 鼠标点击点
  396. */
  397. findAddPos(p: SPoint): void {
  398. let len = SMathUtil.pointToLine(
  399. p,
  400. new SLine(this.pointList[0], this.pointList[1])
  401. ),
  402. index = 0;
  403. if (this.pointList.length > 2) {
  404. for (let i = 1; i < this.pointList.length - 1; i++) {
  405. let dis = SMathUtil.pointToLine(
  406. p,
  407. new SLine(this.pointList[i], this.pointList[i + 1])
  408. );
  409. if (dis.MinDis < len.MinDis) {
  410. len = dis;
  411. index = i;
  412. }
  413. }
  414. }
  415. if (len.MinDis < this.sceneDis) {
  416. if (len.Point) {
  417. this.addPoint(len.Point, index + 1);
  418. }
  419. }
  420. } // Function findAddPos()
  421. /**
  422. * shift 垂直水平创建或编辑
  423. *
  424. * @param event 事件
  425. * @return 处理后的鼠标事件
  426. */
  427. compare(event: SMouseEvent): SMouseEvent {
  428. if (this.pointList.length) {
  429. let last = new SPoint(event.x, event.y);
  430. if (this.status == SItemStatus.Create) {
  431. last = this.pointList[this.pointList.length - 1];
  432. } else if (this.status == SItemStatus.Edit) {
  433. if (this.curIndex > 1) {
  434. last = this.pointList[this.curIndex - 1];
  435. }
  436. }
  437. const dx = Math.abs(event.x - last.x);
  438. const dy = Math.abs(event.y - last.y);
  439. if (dy > dx) {
  440. event.x = last.x;
  441. } else {
  442. event.y = last.y;
  443. }
  444. }
  445. return event;
  446. } // Function compare()
  447. /**
  448. * 记录相关动作并推入栈中
  449. *
  450. * @param SGraphCommand 相关命令类
  451. * @param any 对应传入参数
  452. */
  453. protected recordAction(SGraphCommand: any, any: any[]): void {
  454. // 记录相关命令并推入堆栈中
  455. const command = new SGraphCommand(this.scene, this, ...any);
  456. this.undoStack.push(command);
  457. } // Function recordAction()
  458. /**
  459. * Item 对象边界区域
  460. *
  461. * @return 对象边界区域
  462. */
  463. boundingRect(): SRect {
  464. if (this.pointList.length) {
  465. this.minX = this.pointList[0].x;
  466. this.maxX = this.pointList[0].x;
  467. this.minY = this.pointList[0].y;
  468. this.maxY = this.pointList[0].y;
  469. this.pointList.forEach(it => {
  470. let x = it.x,
  471. y = it.y;
  472. if (x < this.minX) {
  473. this.minX = x;
  474. }
  475. if (y < this.minY) {
  476. this.minY = y;
  477. }
  478. if (x > this.maxX) {
  479. this.maxX = x;
  480. }
  481. if (y > this.maxY) {
  482. this.maxY = y;
  483. }
  484. });
  485. }
  486. return new SRect(
  487. this.minX,
  488. this.minY,
  489. this.maxX - this.minX,
  490. this.maxY - this.minY
  491. );
  492. } // Function boundingRect()
  493. /**
  494. * 判断点是否在区域内
  495. *
  496. * @param x x 坐标
  497. * @param y y 坐标
  498. * @return 是否在区域内
  499. */
  500. contains(x: number, y: number): boolean {
  501. let p = new SPoint(x, y);
  502. for (let i = 1; i < this.pointList.length; i++) {
  503. let PTL = SMathUtil.pointToLine(
  504. p,
  505. new SLine(
  506. this.pointList[i - 1].x,
  507. this.pointList[i - 1].y,
  508. this.pointList[i].x,
  509. this.pointList[i].y
  510. )
  511. );
  512. if (PTL.MinDis < this.sceneDis) {
  513. return true;
  514. }
  515. }
  516. return false;
  517. } // Function contains()
  518. /**
  519. * 撤销操作
  520. */
  521. undo(): void {
  522. if (this._status != SItemStatus.Normal) {
  523. this.undoStack.undo();
  524. }
  525. } // Function undo()
  526. /**
  527. * 重做操作
  528. */
  529. redo(): void {
  530. if (this._status != SItemStatus.Normal) {
  531. this.undoStack.redo();
  532. }
  533. } // Function redo()
  534. /**
  535. * 取消操作执行
  536. */
  537. cancelOperate(): void {
  538. if (this.status == SItemStatus.Create) {
  539. this.parent = null;
  540. this.releaseItem();
  541. } else if (this.status == SItemStatus.Edit) {
  542. this.status = SItemStatus.Normal;
  543. this.releaseItem();
  544. }
  545. } // Function cancelOperate()
  546. /**
  547. * 绘制基本图形
  548. *
  549. * @param painter 绘制对象
  550. */
  551. drawBaseLine(painter: SPainter): void {
  552. // 绘制基本图形
  553. painter.pen.color = this.strokeColor;
  554. if (this.lineStyle == SLineStyle.Dashed) {
  555. painter.pen.lineDash = [
  556. painter.toPx(this.lineWidth * 3),
  557. painter.toPx(this.lineWidth * 7)
  558. ];
  559. } else if (this.lineStyle == SLineStyle.Dotted) {
  560. painter.pen.lineDash = [
  561. painter.toPx(this.lineWidth),
  562. painter.toPx(this.lineWidth)
  563. ];
  564. }
  565. painter.drawPolyline(this.pointList);
  566. } // Function drawBaseLine()
  567. /**
  568. * 返回对象储存的相关数据
  569. *
  570. * @return 对象储存的相关数据
  571. */
  572. toData(): any {
  573. const Line = this.pointList.map(pos => {
  574. return {
  575. x: pos.x,
  576. y: pos.y
  577. }
  578. });
  579. this.data.style.outLine = Line;
  580. this.data.style.default.lineWidth = this.lineWidth;
  581. this.data.style.default.lineStyle = this.lineStyle;
  582. this.data.style.default.strokeColor = this.strokeColor.value;
  583. return this.data
  584. } // Function toData()
  585. /**
  586. * Item 绘制操作
  587. *
  588. * @param painter 绘制对象
  589. */
  590. onDraw(painter: SPainter): void {
  591. // 缓存场景长度
  592. this.sceneDis = painter.toPx(this.dis);
  593. // 创建状态
  594. painter.pen.lineWidth = painter.toPx(this.lineWidth);
  595. if (this.status == SItemStatus.Create && this.lastPoint) {
  596. // 绘制基本图形
  597. this.drawBaseLine(painter);
  598. painter.drawLine(
  599. this.pointList[this.pointList.length - 1],
  600. this.lastPoint
  601. );
  602. // 编辑状态
  603. this.pointList.forEach((t, i): void => {
  604. painter.brush.color = SColor.White;
  605. if (i == this.curIndex) {
  606. painter.brush.color = this.fillColor;
  607. }
  608. painter.drawCircle(t.x, t.y, painter.toPx(5));
  609. });
  610. } else if (this.status == SItemStatus.Edit) {
  611. // 绘制基本图形
  612. this.drawBaseLine(painter);
  613. // 编辑状态
  614. this.pointList.forEach((t, i): void => {
  615. painter.brush.color = SColor.White;
  616. if (i == this.curIndex) {
  617. painter.brush.color = this.fillColor;
  618. }
  619. painter.drawCircle(t.x, t.y, painter.toPx(5));
  620. });
  621. } else {
  622. // 查看状态,是否选中
  623. if (this.selected) {
  624. painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
  625. painter.shadow.shadowBlur = 10;
  626. painter.shadow.shadowColor = new SColor(`#00000033`);
  627. painter.shadow.shadowOffsetX = 5;
  628. painter.shadow.shadowOffsetY = 5;
  629. }
  630. // 绘制基本图形
  631. this.drawBaseLine(painter);
  632. }
  633. } // Function onDraw()
  634. } // Class SBasePolylineEdit