SBaseLineEdit.ts 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599
  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 { SMouseButton, SMouseEvent, SUndoStack } from "@persagy-web/base";
  28. import { SMathUtil } from "@persagy-web/big/lib/utils/SMathUtil";
  29. import { SItemStatus } from "@persagy-web/big";
  30. import {
  31. SGraphPointListInsert,
  32. SGraphPointListUpdate,
  33. SLineStyle,
  34. SGraphItem
  35. } from "@persagy-web/graph/";
  36. import { SGraphEdit } from ".."
  37. import { Marker } from "../type/Marker";
  38. /**
  39. * 直线编辑类
  40. *
  41. * @author 韩耀龙 <han_yao_long@163.com>
  42. */
  43. export class SBaseLineEdit extends SGraphEdit {
  44. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  45. //属性
  46. /** 编辑相关操作的数据 */
  47. data: Marker
  48. /** 起始锚点 */
  49. startItem: SGraphItem | null = null;
  50. /** 结束锚点 */
  51. endItem: SGraphItem | null = null;
  52. /** X 坐标最小值 */
  53. private minX = Number.MAX_SAFE_INTEGER;
  54. /** X 坐标最大值 */
  55. private maxX = Number.MIN_SAFE_INTEGER;
  56. /** Y 坐标最小值 */
  57. private minY = Number.MAX_SAFE_INTEGER;
  58. /** Y 坐标最大值 */
  59. private maxY = Number.MIN_SAFE_INTEGER;
  60. /** 线段 */
  61. private _line: SPoint[] = [];
  62. get line(): SPoint[] {
  63. return this._line;
  64. } // Get line
  65. set line(arr: SPoint[]) {
  66. this._line = arr;
  67. this.update();
  68. } // Set line
  69. /** 是否垂直水平绘制 */
  70. private _verAndLeve: Boolean = false;
  71. get verAndLeve(): Boolean {
  72. return this._verAndLeve;
  73. } // Get verAndLeve
  74. set verAndLeve(bool: Boolean) {
  75. this._verAndLeve = bool;
  76. this.update();
  77. } // Set verAndLeve
  78. /** 是否完成绘制 */
  79. protected _status: SItemStatus = SItemStatus.Normal;
  80. get status(): SItemStatus {
  81. return this._status;
  82. } // Get status
  83. set status(v: SItemStatus) {
  84. this._status = v;
  85. this.undoStack.clear();
  86. this.update();
  87. } // Set status
  88. /** 线条颜色 */
  89. private _strokeColor: SColor = SColor.Black;
  90. get strokeColor(): SColor {
  91. return this._strokeColor;
  92. } // Get strokeColor
  93. set strokeColor(v: SColor) {
  94. this._strokeColor = v;
  95. this.update();
  96. }// Get strokeColor
  97. /** 线条样式 */
  98. private _lineStyle: SLineStyle = SLineStyle.Solid;
  99. get lineStyle(): SLineStyle {
  100. return this._lineStyle;
  101. } // Get lineStyle
  102. set lineStyle(v: SLineStyle) {
  103. this._lineStyle = v;
  104. this.update();
  105. } // Set lineStyle
  106. /** 端点填充色 */
  107. private _fillColor: SColor = SColor.White;
  108. get fillColor(): SColor {
  109. return this._fillColor;
  110. } // Get fillColor
  111. set fillColor(v: SColor) {
  112. this._fillColor = v;
  113. this.update();
  114. } //Set fillColor
  115. /** 选中端点填充色 */
  116. private _activeFillColor: SColor = new SColor("#2196f3");
  117. get activeFillColor(): SColor {
  118. return this._activeFillColor;
  119. } //Get activeFillColor
  120. set activeFillColor(v: SColor) {
  121. this._activeFillColor = v;
  122. this.update();
  123. } //Set activeFillColor
  124. /** 线条宽度 */
  125. private _lineWidth: number = 1;
  126. get lineWidth(): number {
  127. return this._lineWidth;
  128. } //Get lineWidth
  129. set lineWidth(v: number) {
  130. this._lineWidth = v;
  131. this.update();
  132. } //Set lineWidth
  133. /** 拖动灵敏度 */
  134. dis: number = 5;
  135. /** 拖动灵敏度 */
  136. private sceneDis: number = 5;
  137. /** 当前点索引 */
  138. curIndex: number = -1;
  139. /** 当前点坐标 */
  140. private curPoint: SPoint | null = null;
  141. /** undo/redo 堆栈 */
  142. private undoStack: SUndoStack = new SUndoStack();
  143. /**
  144. * 构造函数
  145. *
  146. * @param parent 父级
  147. * @param data 坐标集合|第一个点坐标
  148. */
  149. constructor(parent: SGraphItem | null, data: Marker) {
  150. super(parent);
  151. this.showSelect = false;
  152. this.data = data;
  153. if (data.style) {
  154. // 关于顶点
  155. if (data.style.line) {
  156. let setPointList: SPoint[];
  157. setPointList = data.style.line.map(i => {
  158. return new SPoint(i.x, i.y)
  159. });
  160. this.line = setPointList;
  161. }
  162. }
  163. if (data.style && data.style.default) {
  164. // 颜色
  165. if (data.style.default.strokeColor) {
  166. this.strokeColor = new SColor(data.style.default.strokeColor)
  167. }
  168. // 线宽
  169. if (data.style.default.lineWidth) {
  170. this.lineWidth = data.style.default.lineWidth
  171. }
  172. // 线样式
  173. if (data.style.default.lineStyle) {
  174. this.lineStyle = data.style.default.lineStyle
  175. }
  176. }
  177. }
  178. /**
  179. * 添加点至数组中
  180. *
  181. * @param p 添加的点
  182. */
  183. private addPoint(p: SPoint): void {
  184. if (this.line.length < 2) {
  185. this.line.push(p);
  186. this.recordAction(SGraphPointListInsert, [this.line, p]);
  187. } else {
  188. this.line[1] = p;
  189. this.recordAction(SGraphPointListInsert, [this.line, p, 1]);
  190. this.status = SItemStatus.Normal;
  191. this.releaseItem();
  192. this.$emit("finishCreated");
  193. this.pointChange();
  194. }
  195. this.update();
  196. } // Function addPoint()
  197. /**
  198. * 鼠标双击事件
  199. *
  200. * @param event 事件参数
  201. * @return 该事件是否被处理
  202. */
  203. onDoubleClick(event: SMouseEvent): boolean {
  204. if (this.status == SItemStatus.Normal) {
  205. this.status = SItemStatus.Edit;
  206. this.grabItem(this);
  207. } else if (this.status == SItemStatus.Edit) {
  208. this.status = SItemStatus.Normal;
  209. this.releaseItem();
  210. }
  211. this.update();
  212. return true;
  213. } // Function onDoubleClick()
  214. /**
  215. * 鼠标按下事件
  216. *
  217. * @param event 鼠标事件
  218. * @return 是否处理事件
  219. */
  220. onMouseDown(event: SMouseEvent): boolean {
  221. this.curIndex = -1;
  222. this.curPoint = null;
  223. if (event.shiftKey || this._verAndLeve) {
  224. event = this.compare(event);
  225. }
  226. if (event.buttons == SMouseButton.LeftButton) {
  227. if (this.status == SItemStatus.Normal) {
  228. return super.onMouseDown(event);
  229. } else if (this.status == SItemStatus.Edit) {
  230. // 判断是否点击到端点上(获取端点索引值)
  231. this.findNearestPoint(new SPoint(event.x, event.y));
  232. } else if (this.status == SItemStatus.Create) {
  233. this.addPoint(new SPoint(event.x, event.y));
  234. return true;
  235. }
  236. }
  237. return true;
  238. } // Function onMouseDown()
  239. /**
  240. * 鼠标抬起事件
  241. *
  242. * @param event 事件参数
  243. * @return 是否处理该事件
  244. */
  245. onMouseUp(event: SMouseEvent): boolean {
  246. if (this.status == SItemStatus.Edit) {
  247. if (this.curIndex > -1) {
  248. const p = new SPoint(
  249. this.line[this.curIndex].x,
  250. this.line[this.curIndex].y
  251. );
  252. this.recordAction(SGraphPointListUpdate, [
  253. this.line,
  254. this.curPoint,
  255. p,
  256. this.curIndex
  257. ]);
  258. }
  259. } else if (this.status == SItemStatus.Normal) {
  260. this.moveToOrigin(this.x, this.y);
  261. return super.onMouseUp(event);
  262. }
  263. this.curIndex = -1;
  264. this.curPoint = null;
  265. return true;
  266. } // Function onMouseUp()
  267. /**
  268. * 鼠标抬起事件
  269. *
  270. * @param event 事件参数
  271. * @return 是否处理该事件
  272. */
  273. onKeyUp(event: KeyboardEvent): void {
  274. // 当 ESC 时
  275. if (27 == event.keyCode) {
  276. if (this.status == SItemStatus.Edit) {
  277. this.status = SItemStatus.Normal;
  278. this.releaseItem();
  279. } else if (this.status == SItemStatus.Create) {
  280. this.update()
  281. this.releaseItem();
  282. this.parent = null;
  283. }
  284. }
  285. } // Function onKeyUp()
  286. /**
  287. * 鼠标移动事件
  288. *
  289. * @param event 鼠标事件
  290. * @return 是否处理事件
  291. */
  292. onMouseMove(event: SMouseEvent): boolean {
  293. if (event.shiftKey || this._verAndLeve) {
  294. event = this.compare(event);
  295. }
  296. if (this.status == SItemStatus.Create) {
  297. if (this.line[0] instanceof SPoint) {
  298. this.line[1] = new SPoint(event.x, event.y);
  299. this.pointChange();
  300. }
  301. } else if (this.status == SItemStatus.Edit) {
  302. if (-1 != this.curIndex) {
  303. this.line[this.curIndex].x = event.x;
  304. this.line[this.curIndex].y = event.y;
  305. this.pointChange();
  306. }
  307. } else {
  308. return super.onMouseMove(event);
  309. }
  310. this.update();
  311. return true;
  312. } // Function onMouseMove()
  313. /**
  314. * 点发生变化
  315. */
  316. protected pointChange(): void {
  317. // do nothing
  318. } // Function pointChange()
  319. /**
  320. * 获取点击点与 Point[] 中的点距离最近点
  321. *
  322. * @param p 鼠标点击点
  323. */
  324. findNearestPoint(p: SPoint): void {
  325. let len = this.sceneDis;
  326. for (let i = 0; i < this.line.length; i++) {
  327. let dis = SMathUtil.pointDistance(
  328. p.x,
  329. p.y,
  330. this.line[i].x,
  331. this.line[i].y
  332. );
  333. if (dis < len) {
  334. len = dis;
  335. this.curIndex = i;
  336. this.curPoint = new SPoint(this.line[this.curIndex]);
  337. }
  338. }
  339. } // Function findNearestPoint()
  340. /**
  341. * 记录相关动作并推入栈中
  342. *
  343. * @param SGraphCommand 相关命令类
  344. * @param any 对应传入参数
  345. */
  346. protected recordAction(SGraphCommand: any, any: any[]): void {
  347. // 记录相关命令并推入堆栈中
  348. const command = new SGraphCommand(this.scene, this, ...any);
  349. this.undoStack.push(command);
  350. } // Function recordAction()
  351. /**
  352. * 移动后处理所有坐标,并肩原点置为场景原点
  353. *
  354. * @param x x 坐标
  355. * @param y y 坐标
  356. */
  357. moveToOrigin(x: number, y: number): void {
  358. super.moveToOrigin(x, y);
  359. this.line = this.line.map(t => {
  360. t.x = t.x + x;
  361. t.y = t.y + y;
  362. return t;
  363. });
  364. this.x = 0;
  365. this.y = 0;
  366. } // Function moveToOrigin()
  367. /**
  368. * shift 垂直水平创建或编辑
  369. *
  370. * @param event 事件
  371. * @return 鼠标事件
  372. */
  373. compare(event: SMouseEvent): SMouseEvent {
  374. if (this.line.length) {
  375. let last = new SPoint(event.x, event.y);
  376. if (this.status == SItemStatus.Create) {
  377. last = this.line[0];
  378. } else if (this.status == SItemStatus.Edit) {
  379. if (this.curIndex == 1) {
  380. last = this.line[0];
  381. } else if (this.curIndex == 0) {
  382. last = this.line[1];
  383. }
  384. }
  385. const dx = Math.abs(event.x - last.x);
  386. const dy = Math.abs(event.y - last.y);
  387. if (dy > dx) {
  388. event.x = last.x;
  389. } else {
  390. event.y = last.y;
  391. }
  392. }
  393. return event;
  394. } // Function compare()
  395. /**
  396. * 判断点是否在区域内
  397. *
  398. * @param x x 坐标
  399. * @param y y 坐标
  400. * @return 是否在区域内
  401. */
  402. contains(x: number, y: number): boolean {
  403. if (this.line.length == 2) {
  404. let p = new SPoint(x, y);
  405. if (
  406. SMathUtil.pointToLine(p, new SLine(this.line[0], this.line[1]))
  407. .MinDis < this.dis
  408. ) {
  409. return true;
  410. }
  411. }
  412. return false;
  413. } // Function contains()
  414. /**
  415. * 撤销操作
  416. */
  417. undo(): void {
  418. if (this.status != SItemStatus.Normal) {
  419. this.undoStack.undo();
  420. }
  421. } // Function undo()
  422. /**
  423. * 重做操作
  424. */
  425. redo(): void {
  426. if (this.status != SItemStatus.Normal) {
  427. this.undoStack.redo();
  428. }
  429. } // Function redo()
  430. /**
  431. * 取消操作 item 事件
  432. */
  433. cancelOperate(): void {
  434. if (this.status == SItemStatus.Create) {
  435. this.parent = null;
  436. this.releaseItem();
  437. } else if (this.status == SItemStatus.Edit) {
  438. this.status = SItemStatus.Normal;
  439. this.releaseItem();
  440. }
  441. } // Function cancelOperate()
  442. /**
  443. * Item 对象边界区域
  444. *
  445. * @return 边界区域
  446. */
  447. boundingRect(): SRect {
  448. if (this.line.length) {
  449. this.minX = this.line[0].x;
  450. this.maxX = this.line[0].x;
  451. this.minY = this.line[0].y;
  452. this.maxY = this.line[0].y;
  453. this.line.forEach(it => {
  454. let x = it.x,
  455. y = it.y;
  456. if (x < this.minX) {
  457. this.minX = x;
  458. }
  459. if (y < this.minY) {
  460. this.minY = y;
  461. }
  462. if (x > this.maxX) {
  463. this.maxX = x;
  464. }
  465. if (y > this.maxY) {
  466. this.maxY = y;
  467. }
  468. });
  469. }
  470. return new SRect(
  471. this.minX,
  472. this.minY,
  473. this.maxX - this.minX,
  474. this.maxY - this.minY
  475. );
  476. } // Function boundingRect()
  477. /**
  478. * 返回对象储存的相关数据
  479. *
  480. * @return 对象数据
  481. */
  482. toData(): any {
  483. const Line = [{ x: this.line[0].x, y: this.line[0].y }, { x: this.line[1].x, y: this.line[1].y }];
  484. this.data.style.default.line = Line;
  485. this.data.style.default.lineWidth = this.lineWidth;
  486. this.data.style.default.lineStyle = this.lineStyle;
  487. this.data.style.default.strokeColor = this.strokeColor.value;
  488. return this.data
  489. } // Function toData()
  490. /**
  491. * Item 绘制操作
  492. *
  493. * @param painter 绘制对象
  494. */
  495. onDraw(painter: SPainter): void {
  496. this.sceneDis = painter.toPx(this.dis);
  497. painter.pen.lineWidth = painter.toPx(this.lineWidth);
  498. painter.pen.color = this.strokeColor;
  499. if (this.line.length == 2) {
  500. // 绘制直线
  501. painter.pen.color = this.strokeColor;
  502. if (this.lineStyle == SLineStyle.Dashed) {
  503. painter.pen.lineDash = [
  504. painter.toPx(this.lineWidth * 3),
  505. painter.toPx(this.lineWidth * 7)
  506. ];
  507. } else if (this.lineStyle == SLineStyle.Dotted) {
  508. painter.pen.lineDash = [
  509. painter.toPx(2 * this.lineWidth),
  510. painter.toPx(2 * this.lineWidth)
  511. ];
  512. }
  513. if (this.selected && this.status == SItemStatus.Normal) {
  514. painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
  515. painter.shadow.shadowBlur = 10;
  516. painter.shadow.shadowColor = new SColor(`#00000033`);
  517. painter.shadow.shadowOffsetX = 5;
  518. painter.shadow.shadowOffsetY = 5;
  519. }
  520. painter.drawLine(this.line[0], this.line[1]);
  521. if (
  522. this.status == SItemStatus.Edit ||
  523. this.status == SItemStatus.Create
  524. ) {
  525. // 绘制端点
  526. this.line.forEach((p, i): void => {
  527. painter.brush.color = this.fillColor;
  528. if (i == this.curIndex) {
  529. painter.brush.color = this.activeFillColor;
  530. }
  531. painter.drawCircle(p.x, p.y, painter.toPx(5));
  532. });
  533. }
  534. } else if (this.line.length == 1) {
  535. if (
  536. this.status == SItemStatus.Edit ||
  537. this.status == SItemStatus.Create
  538. ) {
  539. // 绘制端点
  540. painter.brush.color = this.fillColor;
  541. painter.drawCircle(
  542. this.line[0].x,
  543. this.line[0].y,
  544. painter.toPx(5)
  545. );
  546. }
  547. }
  548. } // Function onDraw()
  549. } // Class SBaseLineEdit