SBaseCircleEdit.ts 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444
  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 SBaseCircleEdit extends SGraphEdit {
  42. /** 编辑相关操作的数据 */
  43. data: Marker;
  44. /** 本对象的状态 */
  45. _status: SItemStatus = SItemStatus.Normal;
  46. get status(): SItemStatus {
  47. return this._status;
  48. }
  49. set status(v: SItemStatus) {
  50. this._status = v;
  51. this.undoStack.clear();
  52. this.update();
  53. }
  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 _radius: number = 0;
  69. get radius(): number {
  70. return this._radius;
  71. }
  72. set radius(v: number) {
  73. if (v == this._radius) {
  74. return;
  75. }
  76. this._radius = v;
  77. this.update();
  78. }
  79. /** 线条颜色 */
  80. _strokeColor: SColor = SColor.Black;
  81. get strokeColor(): SColor {
  82. return this._strokeColor;
  83. }
  84. set strokeColor(v: SColor) {
  85. this._strokeColor = v;
  86. this.update();
  87. }
  88. /** 填充色 */
  89. _fillColor: SColor = new SColor("#2196f3");
  90. get fillColor(): SColor {
  91. return this._fillColor;
  92. }
  93. set fillColor(v: SColor) {
  94. this._fillColor = v;
  95. this.update();
  96. }
  97. /** 边框样式 */
  98. _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. _lineWidth: number = 1;
  108. get lineWidth(): number {
  109. return this._lineWidth;
  110. }
  111. set lineWidth(v: number) {
  112. this._lineWidth = v;
  113. this.update();
  114. }
  115. /** undo/redo 堆栈 */
  116. private undoStack: SUndoStack = new SUndoStack();
  117. /**
  118. * 构造函数
  119. *
  120. * @param parent 指向父对象
  121. * @param data 矩形数据
  122. */
  123. constructor(parent: SGraphItem | null, data: Marker) {
  124. super(parent);
  125. this.data = data;
  126. // 数据中存有样式属性
  127. if (data.style) {
  128. // 关于顶点
  129. if (data.style.line) {
  130. let setPointList: SPoint[];
  131. // 生成所需要的点数据
  132. setPointList = data.style.line.map(i => {
  133. return new SPoint(i.x, i.y);
  134. });
  135. this.line = setPointList;
  136. this.calRect();
  137. }
  138. }
  139. // 数据中存在默认样式
  140. if (data.style && data.style.default) {
  141. // 颜色
  142. if (data.style.default.strokeColor) {
  143. this.strokeColor = new SColor(data.style.default.strokeColor);
  144. }
  145. // 线宽
  146. if (data.style.default.lineWidth) {
  147. this.lineWidth = data.style.default.lineWidth;
  148. }
  149. // 线样式
  150. if (data.style.default.lineStyle) {
  151. this.lineStyle = data.style.default.lineStyle;
  152. }
  153. }
  154. }
  155. /**
  156. * 大小改变
  157. *
  158. * @param oldSize 旧数据
  159. * @param newSize 新数据
  160. */
  161. resize(oldSize: SRect, newSize: SRect): void {
  162. const xs = newSize.width / oldSize.width;
  163. const ys = newSize.height / oldSize.height;
  164. // 遍历本身控制点,执行放缩
  165. this.line = this.line.map(t => {
  166. t.x = t.x * xs;
  167. t.y = t.y * ys;
  168. return t;
  169. });
  170. this.calRect();
  171. this.update();
  172. }
  173. /**
  174. * 鼠标按下事件
  175. *
  176. * @param event 鼠标事件
  177. * @return 是否处理事件
  178. */
  179. onMouseDown(event: SMouseEvent): boolean {
  180. if (event.buttons == SMouseButton.LeftButton) {
  181. // 按下的是左键
  182. if (this.status == SItemStatus.Create) {
  183. // 处于创建态
  184. this.addPoint(new SPoint(event.x, event.y));
  185. return true;
  186. } else {
  187. // 否则
  188. // return super.onMouseDown(event);
  189. super.onMouseDown(event);
  190. return true;
  191. }
  192. }
  193. return true;
  194. }
  195. /**
  196. * 鼠标移动事件
  197. *
  198. * @param event 鼠标事件
  199. * @return 是否处理事件
  200. */
  201. onMouseMove(event: SMouseEvent): boolean {
  202. if (this.status == SItemStatus.Create) {
  203. // 处于创建态
  204. if (this.line[0] instanceof SPoint) {
  205. // 控制点钟第一个是 SPoint 类型
  206. this.line[1] = new SPoint(event.x, event.y);
  207. this.calRect();
  208. }
  209. } else {
  210. // 否则
  211. return super.onMouseMove(event);
  212. }
  213. this.update();
  214. return true;
  215. }
  216. /**
  217. * 鼠标抬起事件
  218. *
  219. * @param event 事件参数
  220. * @return 是否处理该事件
  221. */
  222. onMouseUp(event: SMouseEvent): boolean {
  223. if (this.status != SItemStatus.Create) {
  224. // 处于非创建态
  225. super.onMouseUp(event);
  226. }
  227. return true;
  228. }
  229. /**
  230. * 计算矩形的左上角和右下角
  231. */
  232. private calRect(): void {
  233. if (this.line.length > 1) {
  234. // 本对象的控制点有效
  235. const fi = this.line[0];
  236. const se = this.line[1];
  237. let minx, maxx, miny, maxy;
  238. // 存储 x 最大值和最小值
  239. if (fi.x < se.x) {
  240. minx = fi.x;
  241. maxx = se.x;
  242. } else {
  243. minx = se.x;
  244. maxx = fi.x;
  245. }
  246. // 存储 y 最大值和最小值
  247. if (fi.y < se.y) {
  248. miny = fi.y;
  249. maxy = se.y;
  250. } else {
  251. miny = se.y;
  252. maxy = fi.y;
  253. }
  254. this._leftTop = new SPoint(minx, miny);
  255. this._rightBottom = new SPoint(maxx, maxy);
  256. }
  257. }
  258. /**
  259. * 添加点至数组中
  260. *
  261. * @param p 添加的点
  262. */
  263. private addPoint(p: SPoint): void {
  264. if (this.line.length < 2) {
  265. // 本对象的控制点少于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 SRect 外接矩阵
  294. */
  295. boundingRect(): SRect {
  296. if (this.line.length > 1) {
  297. // 本对象的控制点有效,为2个
  298. this.calRect();
  299. return new SRect(this._leftTop, this._rightBottom);
  300. }
  301. return new SRect();
  302. }
  303. /**
  304. * 撤销操作
  305. */
  306. undo(): void {
  307. if (this._status != SItemStatus.Normal) {
  308. // 处于非正常态
  309. this.undoStack.undo();
  310. }
  311. }
  312. /**
  313. * 重做操作
  314. */
  315. redo(): void {
  316. if (this._status != SItemStatus.Normal) {
  317. // 处于非正常态
  318. this.undoStack.redo();
  319. }
  320. }
  321. /**
  322. * 取消操作执行
  323. */
  324. cancelOperate(): void {
  325. if (this.status == SItemStatus.Create) {
  326. // 处于创建态
  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. * 移动后处理所有坐标,并肩原点置为场景原点
  337. */
  338. moveToOrigin(): void {
  339. // 遍历本身控制点
  340. this.line = this.line.map(t => {
  341. t.x = t.x + this.x;
  342. t.y = t.y + this.y;
  343. return t;
  344. });
  345. this.x = 0;
  346. this.y = 0;
  347. this.calRect();
  348. } // Function moveToOrigin()
  349. /**
  350. * 返回对象储存的相关数据
  351. *
  352. * @return 实体类数据
  353. */
  354. toData(): any {
  355. // 将原点移动到场景原点
  356. this.moveToOrigin();
  357. const Line = [
  358. { x: this.line[0].x, y: this.line[0].y },
  359. { x: this.line[1].x, y: this.line[1].y }
  360. ];
  361. this.data.style.line = Line;
  362. this.data.style.default.lineWidth = this.lineWidth;
  363. this.data.style.default.lineStyle = this.lineStyle;
  364. this.data.style.default.strokeColor = this.strokeColor.value;
  365. this.data.style.default.fillColor = this.fillColor.value;
  366. return this.data;
  367. }
  368. /**
  369. * Item 绘制操作
  370. *
  371. * @param painter 绘制对象
  372. */
  373. onDraw(painter: SPainter): void {
  374. if (this.line.length == 2) {
  375. // 本对象控制点有 2 个
  376. painter.pen.color = this.strokeColor;
  377. painter.brush.color = this.fillColor;
  378. if (this.widthIsPx) {
  379. // 使用像素值
  380. painter.pen.lineWidth = painter.toPx(this.lineWidth);
  381. } else {
  382. //否则
  383. painter.pen.lineWidth = this.lineWidth;
  384. }
  385. if (this.lineStyle == SLineStyle.Dashed) {
  386. // 线类型为虚线
  387. painter.pen.lineDash = [
  388. painter.toPx(this.lineWidth * 3),
  389. painter.toPx(this.lineWidth * 7)
  390. ];
  391. } else if (this.lineStyle == SLineStyle.Dotted) {
  392. // 线类型为点线
  393. painter.pen.lineDash = [
  394. painter.toPx(this.lineWidth * 2),
  395. painter.toPx(this.lineWidth * 2)
  396. ];
  397. }
  398. painter.drawEllipse(
  399. (this._leftTop.x + this._rightBottom.x) / 2,
  400. (this._leftTop.y + this._rightBottom.y) / 2,
  401. (this._rightBottom.x - this._leftTop.x) / 2,
  402. (this._rightBottom.y - this._leftTop.y) / 2
  403. );
  404. }
  405. }
  406. }