SBaseLineEdit.ts 18 KB

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