SIconTextItem.ts 12 KB

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