SLineItem.ts 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443
  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) 2009-2021. 博锐尚格科技股份有限公司
  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 "../../utils/SMathUtil";
  29. import { SItemStatus } from "../../index";
  30. import {
  31. SGraphItem,
  32. SGraphPointListInsert,
  33. SGraphPointListUpdate,
  34. SLineStyle
  35. } from "@persagy-web/graph";
  36. import { SGraphStyleItem } from "@persagy-web/graph/lib";
  37. /**
  38. * 线段 item
  39. *
  40. * @author 郝建龙 <haojianlong@sagacloud.cn>
  41. */
  42. export class SLineItem extends SGraphStyleItem {
  43. /** X 坐标最小值 */
  44. private minX = Number.MAX_SAFE_INTEGER;
  45. /** X 坐标最大值 */
  46. private maxX = Number.MIN_SAFE_INTEGER;
  47. /** Y 坐标最小值 */
  48. private minY = Number.MAX_SAFE_INTEGER;
  49. /** Y 坐标最大值 */
  50. private maxY = Number.MIN_SAFE_INTEGER;
  51. /** 线段 */
  52. private _line: SPoint[] = [];
  53. get line(): SPoint[] {
  54. return this._line;
  55. }
  56. set line(arr: SPoint[]) {
  57. this._line = arr;
  58. this.update();
  59. }
  60. /** 是否完成绘制 */
  61. protected _status: SItemStatus = SItemStatus.Normal;
  62. get status(): SItemStatus {
  63. return this._status;
  64. }
  65. set status(v: SItemStatus) {
  66. this._status = v;
  67. this.undoStack.clear();
  68. this.update();
  69. }
  70. /** 选中端点填充色 */
  71. private _activeFillColor: SColor = new SColor("#2196f3");
  72. get activeFillColor(): SColor {
  73. return this._activeFillColor;
  74. }
  75. set activeFillColor(v: SColor) {
  76. this._activeFillColor = v;
  77. this.update();
  78. }
  79. /** 拖动灵敏度 */
  80. dis: number = 5;
  81. /** 拖动灵敏度 */
  82. private sceneDis: number = 5;
  83. /** 当前点索引 */
  84. curIndex: number = -1;
  85. /** 当前点坐标 */
  86. private curPoint: SPoint | null = null;
  87. /** undo/redo 堆栈 */
  88. private undoStack: SUndoStack = new SUndoStack();
  89. /**
  90. * 构造函数
  91. *
  92. * @param parent 父级
  93. */
  94. constructor(parent: SGraphItem | null);
  95. /**
  96. * 构造函数
  97. *
  98. * @param parent 父级
  99. * @param line 坐标集合
  100. */
  101. constructor(parent: SGraphItem | null, line: SPoint[]);
  102. /**
  103. * 构造函数
  104. *
  105. * @param parent 父级
  106. * @param point 第一个点坐标
  107. */
  108. constructor(parent: SGraphItem | null, point: SPoint);
  109. /**
  110. * 构造函数
  111. *
  112. * @param parent 父级
  113. * @param line 坐标集合|第一个点坐标
  114. */
  115. constructor(parent: SGraphItem | null, line?: SPoint | SPoint[]) {
  116. super(parent);
  117. // 坐标集合存在时
  118. if (line) {
  119. // 坐标集合出现在 SPoint 的实例对象上
  120. if (line instanceof SPoint) {
  121. this.line.push(line);
  122. } else {
  123. // 没有在 SPoint 的实例对象上
  124. this.line = line;
  125. }
  126. } else {
  127. // 坐标集合不存在时
  128. this.line = [];
  129. }
  130. }
  131. /**
  132. * 点发生变化
  133. */
  134. protected pointChange(): void {
  135. // do nothing
  136. }
  137. /**
  138. * 添加点至数组中
  139. *
  140. * @param p 添加的点
  141. */
  142. private addPoint(p: SPoint): void {
  143. // 坐标集合长度大于2时
  144. if (this.line.length < 2) {
  145. this.line.push(p);
  146. this.recordAction(SGraphPointListInsert, [this.line, p]);
  147. } else {
  148. // 坐标集合长度不大于2时
  149. this.line[1] = p;
  150. this.recordAction(SGraphPointListInsert, [this.line, p, 1]);
  151. this.status = SItemStatus.Normal;
  152. this.releaseItem();
  153. this.$emit("finishCreated");
  154. this.pointChange();
  155. }
  156. this.update();
  157. }
  158. /**
  159. * 获取点击点与 Point[] 中的点距离最近点
  160. *
  161. * @param p 鼠标点击点
  162. */
  163. findNearestPoint(p: SPoint): void {
  164. // 拖动灵敏度
  165. let len = this.sceneDis;
  166. for (let i = 0; i < this.line.length; i++) {
  167. // 计算点到点距离
  168. let dis = SMathUtil.pointDistance(
  169. p.x,
  170. p.y,
  171. this.line[i].x,
  172. this.line[i].y
  173. );
  174. // 点到点的距离大于灵敏度时
  175. if (dis < len) {
  176. len = dis;
  177. this.curIndex = i;
  178. this.curPoint = new SPoint(this.line[this.curIndex]);
  179. }
  180. }
  181. }
  182. /**
  183. * 记录相关动作并推入栈中
  184. *
  185. * @param SGraphCommand 相关命令类
  186. * @param any 对应传入参数
  187. */
  188. protected recordAction(SGraphCommand: any, any: any[]): void {
  189. // 记录相关命令并推入堆栈中 todo
  190. const command = new SGraphCommand(this.scene, this, ...any);
  191. this.undoStack.push(command);
  192. }
  193. /**
  194. * 移动后处理所有坐标,并肩原点置为场景原点
  195. *
  196. * @param x x 坐标
  197. * @param y y 坐标
  198. */
  199. moveToOrigin(x: number, y: number): void {
  200. super.moveToOrigin(x, y);
  201. // 遍历点集
  202. this.line = this.line.map(
  203. (t): SPoint => {
  204. t.x = t.x + x;
  205. t.y = t.y + y;
  206. return t;
  207. }
  208. );
  209. this.x = 0;
  210. this.y = 0;
  211. }
  212. /**
  213. * shift 垂直水平创建或编辑
  214. *
  215. * @param event 事件
  216. * @return 处理后的事件对象
  217. */
  218. compare(event: SMouseEvent): SMouseEvent {
  219. // 线段长度存在时
  220. if (this.line.length) {
  221. let last = new SPoint(event.x, event.y);
  222. // 处于创建状态时
  223. if (this.status == SItemStatus.Create) {
  224. last = this.line[0];
  225. } else if (this.status == SItemStatus.Edit) {
  226. // 处于编辑状态时
  227. // 当前索引等于 1 时
  228. if (this.curIndex == 1) {
  229. last = this.line[0];
  230. } else if (this.curIndex == 0) {
  231. // 当前索引等于 0 时
  232. last = this.line[1];
  233. }
  234. }
  235. const dx = Math.abs(event.x - last.x);
  236. const dy = Math.abs(event.y - last.y);
  237. if (dy > dx) {
  238. event.x = last.x;
  239. } else {
  240. event.y = last.y;
  241. }
  242. }
  243. return event;
  244. }
  245. /**
  246. * 判断点是否在区域内
  247. *
  248. * @param x x 坐标
  249. * @param y y 坐标
  250. * @return 是否包含
  251. */
  252. contains(x: number, y: number): boolean {
  253. // 线段长度大于 2 时
  254. if (this.line.length == 2) {
  255. let p = new SPoint(x, y);
  256. // 计算点到线段垂线与线段的交点
  257. if (
  258. SMathUtil.pointToLine(p, new SLine(this.line[0], this.line[1]))
  259. .MinDis < this.dis
  260. ) {
  261. return true;
  262. }
  263. }
  264. return false;
  265. }
  266. /**
  267. * 撤销操作
  268. */
  269. undo(): void {
  270. // 处于标准状态时
  271. if (this.status != SItemStatus.Normal) {
  272. this.undoStack.undo();
  273. }
  274. }
  275. /**
  276. * 重做操作
  277. */
  278. redo(): void {
  279. // 处于标准状态时
  280. if (this.status != SItemStatus.Normal) {
  281. this.undoStack.redo();
  282. }
  283. }
  284. /**
  285. * 取消操作 item 事件
  286. */
  287. cancelOperate(): void {
  288. // 处于创建状态时
  289. if (this.status == SItemStatus.Create) {
  290. this.parent = null;
  291. this.releaseItem();
  292. } else if (this.status == SItemStatus.Edit) {
  293. // 处于编辑状态时
  294. this.status = SItemStatus.Normal;
  295. this.releaseItem();
  296. }
  297. }
  298. /**
  299. * Item 对象边界区域
  300. *
  301. * @return 边界区域
  302. */
  303. boundingRect(): SRect {
  304. // 线段长度存在时
  305. if (this.line.length) {
  306. this.minX = this.line[0].x;
  307. this.maxX = this.line[0].x;
  308. this.minY = this.line[0].y;
  309. this.maxY = this.line[0].y;
  310. this.line.forEach((it): void => {
  311. let x = it.x,
  312. y = it.y;
  313. // 如果数据 x 坐标小于 x 坐标最小值
  314. if (x < this.minX) {
  315. this.minX = x;
  316. }
  317. // 如果数据 y 坐标小于 y 坐标最小值
  318. if (y < this.minY) {
  319. this.minY = y;
  320. }
  321. // 如果数据 x 坐标大于 x 坐标最小值
  322. if (x > this.maxX) {
  323. this.maxX = x;
  324. }
  325. // 如果数据 y 坐标大于 y 坐标最小值
  326. if (y > this.maxY) {
  327. this.maxY = y;
  328. }
  329. });
  330. }
  331. return new SRect(
  332. this.minX,
  333. this.minY,
  334. this.maxX - this.minX,
  335. this.maxY - this.minY
  336. );
  337. }
  338. /**
  339. * Item 绘制操作
  340. *
  341. * @param painter 绘制对象
  342. */
  343. onDraw(painter: SPainter): void {
  344. this.sceneDis = painter.toPx(this.dis);
  345. painter.pen.lineWidth = painter.toPx(this.lineWidth);
  346. painter.pen.color = this.strokeColor;
  347. // 线段长度等于 2 时
  348. if (this.line.length == 2) {
  349. // 绘制直线
  350. painter.pen.color = new SColor(this.strokeColor);
  351. // 绘制基本图形,线样式是虚线时
  352. if (this.lineStyle == SLineStyle.Dashed) {
  353. painter.pen.lineDash = [
  354. painter.toPx(this.lineWidth * 3),
  355. painter.toPx(this.lineWidth * 7)
  356. ];
  357. } else if (this.lineStyle == SLineStyle.Dotted) {
  358. // 绘制基本图形,线样式是点线时
  359. painter.pen.lineDash = [
  360. painter.toPx(this.lineWidth),
  361. painter.toPx(this.lineWidth)
  362. ];
  363. }
  364. // 选中状态并且处于标准状态
  365. if (this.selected && this.status == SItemStatus.Normal) {
  366. painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
  367. painter.shadow.shadowBlur = 10;
  368. painter.shadow.shadowColor = new SColor(`#00000033`);
  369. painter.shadow.shadowOffsetX = 5;
  370. painter.shadow.shadowOffsetY = 5;
  371. }
  372. painter.drawLine(this.line[0], this.line[1]);
  373. // 处于编辑状态或创建状态时
  374. if (
  375. this.status == SItemStatus.Edit ||
  376. this.status == SItemStatus.Create
  377. ) {
  378. // 绘制端点
  379. this.line.forEach((p, i): void => {
  380. painter.brush.color = this.fillColor;
  381. if (i == this.curIndex) {
  382. painter.brush.color = this.activeFillColor;
  383. }
  384. painter.drawCircle(p.x, p.y, painter.toPx(5));
  385. });
  386. }
  387. } else if (this.line.length == 1) {
  388. // 线段长度等于 1 时
  389. // 处于编辑状态或创建状态时
  390. if (
  391. this.status == SItemStatus.Edit ||
  392. this.status == SItemStatus.Create
  393. ) {
  394. // 绘制端点
  395. painter.brush.color = this.fillColor;
  396. painter.drawCircle(
  397. this.line[0].x,
  398. this.line[0].y,
  399. painter.toPx(5)
  400. );
  401. }
  402. }
  403. }
  404. }