SIconTextItem.ts 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422
  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-2020. 博锐尚格科技股份有限公司
  21. * ~8888'
  22. * .!88~ All rights reserved.
  23. *
  24. * *********************************************************************************************************************
  25. */
  26. import {
  27. SObjectItem,
  28. SImageItem,
  29. STextItem,
  30. SAnchorItem,
  31. SGraphItem
  32. } from "@persagy-web/graph";
  33. import { SItemStatus, ItemOrder } from "..";
  34. import { SMouseEvent } from "@persagy-web/base";
  35. import {
  36. SSize,
  37. SRect,
  38. SPainter,
  39. SColor,
  40. SFont,
  41. SPoint
  42. } from "@persagy-web/draw";
  43. import { Anchor } from "../types/topology/Anchor";
  44. /**
  45. * 图例 item
  46. *
  47. * @author 郝建龙 <haojianlong@sagacloud.cn>
  48. */
  49. export class SIconTextItem extends SObjectItem {
  50. /** item 状态 */
  51. _status: SItemStatus = SItemStatus.Normal;
  52. get status(): SItemStatus {
  53. return this._status;
  54. } // Get status
  55. set status(v: SItemStatus) {
  56. this._status = v;
  57. if (v == SItemStatus.Normal) {
  58. this.moveable = true;
  59. this.textItem.moveable = false;
  60. this.img.moveable = false;
  61. } else if (v == SItemStatus.Edit) {
  62. this.moveable = false;
  63. this.textItem.moveable = true;
  64. this.img.moveable = true;
  65. } else if (v == SItemStatus.Create) {
  66. this.moveable = true;
  67. this.textItem.moveable = false;
  68. this.img.moveable = false;
  69. }
  70. this.update();
  71. } // Set status
  72. /** 是否显示文字 */
  73. _showText: boolean = true;
  74. get showText(): boolean {
  75. return this._showText;
  76. } // Get showText
  77. set showText(v: boolean) {
  78. if (v === this._showText) {
  79. return;
  80. }
  81. this._showText = v;
  82. if (v) {
  83. this.textItem.show();
  84. } else {
  85. this.textItem.hide();
  86. }
  87. } // Set showText
  88. /** 是否被选中 */
  89. get selected(): boolean {
  90. return this._selected && this.selectable && this.enabled;
  91. } // Get selected
  92. set selected(value: boolean) {
  93. // 如果选择状态未变更
  94. if (this.selected == value) {
  95. return;
  96. }
  97. this._selected = value;
  98. if (value) {
  99. this.img.scale = 1.25;
  100. this.zOrder = ItemOrder.highLightOrder;
  101. } else {
  102. this.img.scale = 1;
  103. this.zOrder = ItemOrder.markOrder;
  104. }
  105. this.update();
  106. } // Set selected
  107. /** 是否激活 */
  108. _isActive: boolean = false;
  109. get isActive(): boolean {
  110. return this._isActive;
  111. } // Get isActive
  112. set isActive(v: boolean) {
  113. this._isActive = v;
  114. if (v) {
  115. this.cursor = "pointer";
  116. this.textItem.cursor = "pointer";
  117. this.img.cursor = "pointer";
  118. } else {
  119. this.cursor = "auto";
  120. this.textItem.cursor = "auto";
  121. this.img.cursor = "auto";
  122. }
  123. this.update();
  124. } // Set isActive
  125. /** 激活显示颜色 */
  126. _activeColor: SColor = new SColor("#00000033");
  127. get activeColor(): SColor {
  128. return this._activeColor;
  129. } // Get activeColor
  130. set activeColor(v: SColor) {
  131. this._activeColor = v;
  132. this.update();
  133. } // Set activeColor
  134. /** X 轴坐标 */
  135. get x(): number {
  136. return this.pos.x;
  137. } // Get x
  138. set x(v: number) {
  139. this.pos.x = v;
  140. this.$emit("changePos");
  141. this.update();
  142. } // Set x
  143. /** Y 轴坐标 */
  144. get y(): number {
  145. return this.pos.y;
  146. } // Get y
  147. set y(v: number) {
  148. this.pos.y = v;
  149. this.$emit("changePos");
  150. this.update();
  151. } // Set y
  152. /** icon宽 */
  153. get sWidth(): number {
  154. return this.img.width;
  155. } // Get sWidth
  156. set sWidth(v: number) {
  157. this.img.width = v;
  158. this.img.origin = new SPoint(
  159. this.img.width * 0.5,
  160. this.img.height * 0.5
  161. );
  162. this.changeAnchorPoint();
  163. this.update();
  164. } // Set sWidth
  165. /** icon高 */
  166. get sHeight(): number {
  167. return this.img.height;
  168. } // Get sHeight
  169. set sHeight(v: number) {
  170. this.img.height = v;
  171. this.img.origin = new SPoint(
  172. this.img.width * 0.5,
  173. this.img.height * 0.5
  174. );
  175. this.changeAnchorPoint();
  176. this.update();
  177. } // Set sHeight
  178. /** 是否显示锚点 */
  179. private _showAnchor: boolean = false;
  180. get showAnchor(): boolean {
  181. return this._showAnchor;
  182. } // Get showAnchor
  183. set showAnchor(v: boolean) {
  184. this._showAnchor = v;
  185. this.anchorList.forEach(t => {
  186. t.visible = v;
  187. });
  188. } // Set showAnchor
  189. /** 文本内容 */
  190. get text(): string {
  191. return this.textItem.text;
  192. } // Get text
  193. set text(v: string) {
  194. this.textItem.text = v;
  195. this.update();
  196. } // Set text
  197. /** 文本颜色 */
  198. get color(): SColor {
  199. return this.textItem.color;
  200. } // Get color
  201. set color(v: SColor) {
  202. this.textItem.color = v;
  203. this.update();
  204. } // Get color
  205. /** 文本字体 */
  206. get font(): SFont {
  207. return this.textItem.font;
  208. } // Get font
  209. set font(v: SFont) {
  210. this.textItem.font = v;
  211. this.update();
  212. } // Set font
  213. /** img Item */
  214. img: SImageItem = new SImageItem(this);
  215. /** text Item */
  216. textItem: STextItem = new STextItem(this);
  217. /**
  218. * 构造体
  219. *
  220. * @param parent 父类
  221. * @param data 锚点数据
  222. */
  223. constructor(parent: SGraphItem | null, data?: Anchor[]) {
  224. super(parent);
  225. this.img.width = 32;
  226. this.img.height = 32;
  227. this.img.origin = new SPoint(
  228. this.img.width * 0.5,
  229. this.img.height * 0.5
  230. );
  231. this.img.connect("onMove", this, this.changeAnchorPoint.bind(this));
  232. let anchorPoint;
  233. if (data && data.length) {
  234. anchorPoint = data.map(t => {
  235. return {
  236. x: t.pos.x,
  237. y: t.pos.y,
  238. id: t.id
  239. };
  240. });
  241. } else {
  242. anchorPoint = [
  243. { x: this.img.x, y: this.img.y, id: "" },
  244. { x: this.img.x, y: this.img.y, id: "" },
  245. { x: this.img.x, y: this.img.y, id: "" },
  246. { x: this.img.x, y: this.img.y, id: "" }
  247. // { x: this.img.x, y: this.img.y + this.img.height / 2, id: "" },
  248. // { x: this.img.x, y: this.img.y - this.img.height / 2, id: "" },
  249. // { x: this.img.x - this.img.width / 2, y: this.img.y, id: "" },
  250. // { x: this.img.x + this.img.width / 2, y: this.img.y, id: "" }
  251. ];
  252. }
  253. this.anchorList = anchorPoint.map(t => {
  254. let item = new SAnchorItem(this);
  255. if (t.id) {
  256. item.id = t.id;
  257. }
  258. item.moveTo(t.x, t.y);
  259. return item;
  260. });
  261. this.showAnchor = false;
  262. this.textItem.text = "";
  263. this.textItem.font.size = 12;
  264. // 偏移二分之一文本高度
  265. this.textItem.moveTo(
  266. this.img.width * 0.5,
  267. -(this.font.size * 1.25 * 0.5)
  268. );
  269. this.moveable = true;
  270. this.selectable = true;
  271. } // Constructor
  272. /**
  273. * 计算并移动锚点的位置
  274. */
  275. private changeAnchorPoint(): void {
  276. // 判断是否有锚点
  277. if (this.anchorList.length) {
  278. let anchorPoint = [
  279. { x: this.img.x, y: this.img.y },
  280. { x: this.img.x, y: this.img.y },
  281. { x: this.img.x, y: this.img.y },
  282. { x: this.img.x, y: this.img.y }
  283. // { x: this.img.x, y: this.img.y + this.img.height / 2 },
  284. // { x: this.img.x, y: this.img.y - this.img.height / 2 },
  285. // { x: this.img.x - this.img.width / 2, y: this.img.y },
  286. // { x: this.img.x + this.img.width / 2, y: this.img.y }
  287. ];
  288. this.anchorList.forEach((item, index) => {
  289. item.moveTo(anchorPoint[index].x, anchorPoint[index].y);
  290. });
  291. }
  292. } // Function changeAnchorPoint()
  293. /**
  294. * 鼠标按下事件
  295. *
  296. * @param event 事件对象
  297. * @return 是否处理事件
  298. */
  299. onMouseDown(event: SMouseEvent): boolean {
  300. if (this.status == SItemStatus.Normal) {
  301. return super.onMouseDown(event);
  302. } else if (this.status == SItemStatus.Edit) {
  303. return super.onMouseDown(event);
  304. }
  305. return true;
  306. } // Function onMouseDown()
  307. /**
  308. * 宽高发发生变化
  309. *
  310. * @param oldSize 改之前的大小
  311. * @param newSize 改之后大小
  312. */
  313. onResize(oldSize: SSize, newSize: SSize): void {
  314. console.log(arguments);
  315. } // Function onResize()
  316. /**
  317. * 鼠标双击事件
  318. *
  319. * @param event 鼠标事件
  320. * @return 是否处理事件
  321. */
  322. onDoubleClick(event: SMouseEvent): boolean {
  323. // 如果位show状态 双击改对象则需改为编辑状态
  324. if (SItemStatus.Normal == this.status) {
  325. this.status = SItemStatus.Edit;
  326. this.grabItem(this);
  327. } else if (SItemStatus.Edit == this.status) {
  328. this.status = SItemStatus.Normal;
  329. this.releaseItem();
  330. }
  331. this.update();
  332. return true;
  333. } // Function onDoubleClick()
  334. /**
  335. * Item 对象边界区域
  336. *
  337. * @return 边界矩阵
  338. */
  339. boundingRect(): SRect {
  340. let rect = this.img
  341. .boundingRect()
  342. .adjusted(this.img.pos.x, this.img.pos.y, 0, 0);
  343. if (this.showText) {
  344. rect = rect.unioned(
  345. this.textItem
  346. .boundingRect()
  347. .adjusted(this.textItem.pos.x, this.textItem.pos.y, 0, 0)
  348. );
  349. }
  350. return rect.adjusted(-5, -5, 10, 10);
  351. } // Function boundingRect()
  352. /**
  353. * Item 绘制操作
  354. *
  355. * @param painter 绘制对象
  356. */
  357. onDraw(painter: SPainter): void {
  358. if (this.status == SItemStatus.Edit) {
  359. painter.pen.lineWidth = painter.toPx(1);
  360. painter.pen.lineDash = [painter.toPx(3), painter.toPx(7)];
  361. painter.pen.color = SColor.Black;
  362. painter.brush.color = SColor.Transparent;
  363. painter.drawRect(this.boundingRect());
  364. }
  365. if (this.isActive) {
  366. painter.pen.color = SColor.Transparent;
  367. painter.brush.color = this.activeColor;
  368. if (this.selected) {
  369. painter.shadow.shadowBlur = 10;
  370. painter.shadow.shadowColor = this.activeColor;
  371. painter.shadow.shadowOffsetX = 5;
  372. painter.shadow.shadowOffsetY = 5;
  373. painter.drawCircle(
  374. this.img.x,
  375. this.img.y,
  376. (this.sWidth / 2.0 + 3) * 1.25
  377. );
  378. } else {
  379. painter.drawCircle(
  380. this.img.x,
  381. this.img.y,
  382. this.sWidth / 2.0 + 3
  383. );
  384. }
  385. } else {
  386. if (this.selected) {
  387. painter.pen.color = SColor.Transparent;
  388. painter.brush.color = SColor.Transparent;
  389. painter.shadow.shadowBlur = 10;
  390. painter.shadow.shadowColor = new SColor(`#00000033`);
  391. painter.shadow.shadowOffsetX = 5;
  392. painter.shadow.shadowOffsetY = 5;
  393. painter.drawCircle(this.img.x, this.img.y, this.sWidth / 2.0);
  394. }
  395. }
  396. } // Function onDraw()
  397. } // Class SIconTextItem