SBaseCircleEdit.ts 10 KB

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