SIconTextItem.ts 9.5 KB

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