SBaseTriangleEdit.ts 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395
  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, SPainter, SPoint, SRect } from "@persagy-web/draw";
  27. import { SMouseButton, SMouseEvent, SUndoStack } from "@persagy-web/base";
  28. import { SItemStatus } from "@persagy-web/big";
  29. import {
  30. SLineStyle,
  31. SGraphItem,
  32. SGraphPointListInsert
  33. } from "@persagy-web/graph/";
  34. import { SGraphEdit } from "..";
  35. import { Marker } from "@persagy-web/big/lib";
  36. /**
  37. * 折线编辑类
  38. *
  39. * @author 韩耀龙 <han_yao_long@163.com>
  40. */
  41. export class SBaseTriangleEdit extends SGraphEdit {
  42. /** 是否绘制完成 */
  43. _status: SItemStatus = SItemStatus.Normal;
  44. get status(): SItemStatus {
  45. return this._status;
  46. }
  47. set status(v: SItemStatus) {
  48. this._status = v;
  49. this.undoStack.clear();
  50. this.update();
  51. }
  52. /** 编辑相关操作的数据 */
  53. data: Marker;
  54. /** 矩形两个对角 */
  55. private _line: SPoint[] = [];
  56. get line(): SPoint[] {
  57. return this._line;
  58. }
  59. set line(arr: SPoint[]) {
  60. this._line = arr;
  61. this.update();
  62. }
  63. /** 矩形左上角 */
  64. private _leftTop: SPoint = new SPoint();
  65. /** 矩形右下角 */
  66. private _rightBottom: SPoint = new SPoint();
  67. /** 绘制三角形的点数组 */
  68. private pointList: SPoint[] = [];
  69. /** 线条颜色 */
  70. _strokeColor: SColor = SColor.Black;
  71. get strokeColor(): SColor {
  72. return this._strokeColor;
  73. }
  74. set strokeColor(v: SColor) {
  75. this._strokeColor = v;
  76. this.update();
  77. }
  78. /** 填充色 */
  79. _fillColor: SColor = new SColor("#2196f3");
  80. get fillColor(): SColor {
  81. return this._fillColor;
  82. }
  83. set fillColor(v: SColor) {
  84. this._fillColor = v;
  85. this.update();
  86. }
  87. /** 边框样式 */
  88. _lineStyle: SLineStyle = SLineStyle.Solid;
  89. get lineStyle(): SLineStyle {
  90. return this._lineStyle;
  91. }
  92. set lineStyle(v: SLineStyle) {
  93. this._lineStyle = v;
  94. this.update();
  95. }
  96. /** 线条宽度 */
  97. _lineWidth: number = 1;
  98. get lineWidth(): number {
  99. return this._lineWidth;
  100. }
  101. set lineWidth(v: number) {
  102. this._lineWidth = v;
  103. this.update();
  104. }
  105. /** undo/redo 堆栈 */
  106. private undoStack: SUndoStack = new SUndoStack();
  107. /**
  108. * 构造函数
  109. *
  110. * @param parent 指向父对象
  111. * @param data 数据
  112. */
  113. constructor(parent: SGraphItem | null, data: Marker) {
  114. super(parent);
  115. this.data = data;
  116. // 数据中存有默认样式
  117. if (data.style && data.style.default) {
  118. // 关于顶点
  119. if (data.style.default.Line) {
  120. let setPointList: SPoint[];
  121. // 生成点列表
  122. setPointList = data.style.default.line.map(i => {
  123. return new SPoint(i.x, i.y);
  124. });
  125. this.line = setPointList;
  126. }
  127. // 设置颜色
  128. if (data.style.default.strokeColor) {
  129. this.strokeColor = new SColor(data.style.default.strokeColor);
  130. }
  131. // 设置线宽
  132. if (data.style.default.lineWidth) {
  133. this.lineWidth = data.style.default.lineWidth;
  134. }
  135. // 设置线样式
  136. if (data.style.default.lineStyle) {
  137. this.lineStyle = data.style.default.lineStyle;
  138. }
  139. }
  140. }
  141. /**
  142. * 宽高发发生变化
  143. *
  144. * @param oldSize 改之前的大小
  145. * @param newSize 改之后大小
  146. */
  147. resize(oldSize: SRect, newSize: SRect): void {
  148. const xs = newSize.width / oldSize.width;
  149. const ys = newSize.height / oldSize.height;
  150. // 遍历点列表
  151. this.line = this.line.map(t => {
  152. t.x = t.x * xs;
  153. t.y = t.y * ys;
  154. return t;
  155. });
  156. this.calRect();
  157. this.update();
  158. }
  159. /**
  160. * 鼠标按下事件
  161. *
  162. * @param event 鼠标事件
  163. * @return 是否处理事件
  164. */
  165. onMouseDown(event: SMouseEvent): boolean {
  166. // 按下左键
  167. if (event.buttons == SMouseButton.LeftButton) {
  168. // 处于创建态
  169. if (this.status == SItemStatus.Create) {
  170. this.addPoint(new SPoint(event.x, event.y));
  171. return true;
  172. } else {
  173. // 否则
  174. return super.onMouseDown(event);
  175. }
  176. }
  177. return true;
  178. }
  179. /**
  180. * 鼠标移动事件
  181. *
  182. * @param event 事件参数
  183. * @return 是否处理事件
  184. */
  185. onMouseMove(event: SMouseEvent): boolean {
  186. // 处于创建态
  187. if (this.status == SItemStatus.Create) {
  188. // 存在一个点
  189. if (this.line[0] instanceof SPoint) {
  190. this.line[1] = new SPoint(event.x, event.y);
  191. this.calRect();
  192. }
  193. } else {
  194. // 否则
  195. return super.onMouseMove(event);
  196. }
  197. this.update();
  198. return true;
  199. }
  200. /**
  201. * 鼠标抬起事件
  202. *
  203. * @param event 事件参数
  204. * @return 是否处理事件
  205. */
  206. onMouseUp(event: SMouseEvent): boolean {
  207. // 处于非创建态
  208. if (this.status != SItemStatus.Create) {
  209. super.onMouseUp(event);
  210. }
  211. return true;
  212. }
  213. /**
  214. * 计算矩形的左上角和右下角
  215. */
  216. private calRect(): void {
  217. if (this.line.length > 1) {
  218. const fi = this.line[0];
  219. const se = this.line[1];
  220. let minx, maxx, miny, maxy;
  221. // 保存 x 最大值和最小值
  222. if (fi.x < se.x) {
  223. minx = fi.x;
  224. maxx = se.x;
  225. } else {
  226. minx = se.x;
  227. maxx = fi.x;
  228. }
  229. // 保存 y 最大值和最小值
  230. if (fi.y < se.y) {
  231. miny = fi.y;
  232. maxy = se.y;
  233. } else {
  234. miny = se.y;
  235. maxy = fi.y;
  236. }
  237. this._leftTop = new SPoint(minx, miny);
  238. this._rightBottom = new SPoint(maxx, maxy);
  239. this.calTriangle();
  240. }
  241. }
  242. /**
  243. * 计算绘制图形的 3 个点
  244. */
  245. private calTriangle(): void {
  246. this.pointList = [];
  247. this.pointList.push(new SPoint(this._leftTop.x, this._rightBottom.y));
  248. this.pointList.push(
  249. new SPoint(
  250. (this._leftTop.x + this._rightBottom.x) / 2,
  251. this._leftTop.y
  252. )
  253. );
  254. this.pointList.push(
  255. new SPoint(this._rightBottom.x, this._rightBottom.y)
  256. );
  257. }
  258. /**
  259. * 添加点至数组中
  260. *
  261. * @param p 添加的点
  262. */
  263. private addPoint(p: SPoint): void {
  264. // 列表中点个数少于 2 个
  265. if (this.line.length < 2) {
  266. this.line.push(p);
  267. this.recordAction(SGraphPointListInsert, [this.line, p]);
  268. } else {
  269. // 否则
  270. this.line[1] = p;
  271. this.recordAction(SGraphPointListInsert, [this.line, p, 1]);
  272. this.status = SItemStatus.Normal;
  273. this.releaseItem();
  274. this.$emit("finishCreated");
  275. }
  276. this.calRect();
  277. this.update();
  278. }
  279. /**
  280. * 记录相关动作并推入栈中
  281. *
  282. * @param SGraphCommand 相关命令类
  283. * @param any 对应传入参数
  284. */
  285. protected recordAction(SGraphCommand: any, any: any[]): void {
  286. // 记录相关命令并推入堆栈中
  287. const command = new SGraphCommand(this.scene, this, ...any);
  288. this.undoStack.push(command);
  289. }
  290. /**
  291. * Item对象边界区域
  292. *
  293. * @return 边界区域
  294. */
  295. boundingRect(): SRect {
  296. // 列表中点个超个 1 个
  297. if (this.line.length > 1) {
  298. this.calRect();
  299. return new SRect(this._leftTop, this._rightBottom);
  300. }
  301. return new SRect();
  302. }
  303. /**
  304. * 撤销操作
  305. */
  306. undo(): void {
  307. // 处于非正常态
  308. if (this._status != SItemStatus.Normal) {
  309. this.undoStack.undo();
  310. }
  311. }
  312. /**
  313. * 重做操作
  314. */
  315. redo(): void {
  316. // 处于非正常态
  317. if (this._status != SItemStatus.Normal) {
  318. this.undoStack.redo();
  319. }
  320. }
  321. /**
  322. * 取消操作执行
  323. */
  324. cancelOperate(): void {
  325. // 处于创建态
  326. if (this.status == SItemStatus.Create) {
  327. this.parent = null;
  328. this.releaseItem();
  329. } else if (this.status == SItemStatus.Edit) {
  330. // 处于编辑态
  331. this.status = SItemStatus.Normal;
  332. this.releaseItem();
  333. }
  334. }
  335. /**
  336. * Item 绘制操作
  337. *
  338. * @param painter 绘制对象
  339. */
  340. onDraw(painter: SPainter): void {
  341. // 列表中点个数为 2
  342. if (this.line.length == 2) {
  343. painter.pen.color = this.strokeColor;
  344. painter.brush.color = this.fillColor;
  345. painter.pen.lineWidth = this.lineWidth;
  346. // 线类型为虚线
  347. if (this.lineStyle == SLineStyle.Dashed) {
  348. painter.pen.lineDash = [
  349. painter.toPx(this.lineWidth * 3),
  350. painter.toPx(this.lineWidth * 7)
  351. ];
  352. } else if (this.lineStyle == SLineStyle.Dotted) {
  353. // 线类型为点线
  354. painter.pen.lineDash = [
  355. painter.toPx(this.lineWidth * 2),
  356. painter.toPx(this.lineWidth * 2)
  357. ];
  358. }
  359. painter.drawPolygon(this.pointList);
  360. }
  361. }
  362. }