EditLineItem.ts 14 KB

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