SIconTextItem.ts 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  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. /**
  12. * 图例item icon
  13. *
  14. * */
  15. export class SIconTextItem extends SObjectItem {
  16. /** item状态 */
  17. _status: SItemStatus = SItemStatus.Normal;
  18. get status(): SItemStatus {
  19. return this._status;
  20. }
  21. set status(v: SItemStatus) {
  22. this._status = v;
  23. this.update();
  24. }
  25. /** 是否显示文字 */
  26. _showText: boolean = true;
  27. get showText(): boolean {
  28. return this._showText;
  29. }
  30. set showText(v: boolean) {
  31. if (v === this._showText) {
  32. return
  33. }
  34. this._showText = v;
  35. if (v) {
  36. this.textItem.show();
  37. } else {
  38. this.textItem.hide();
  39. }
  40. }
  41. /** X轴坐标 */
  42. get x(): number {
  43. return this.pos.x;
  44. } // Get x
  45. set x(v: number) {
  46. this.pos.x = v;
  47. this.$emit("changePos");
  48. this.update();
  49. } // Set x
  50. /** Y轴坐标 */
  51. get y(): number {
  52. return this.pos.y;
  53. } // Get y
  54. set y(v: number) {
  55. this.pos.y = v;
  56. this.$emit("changePos");
  57. this.update();
  58. } // Set y
  59. /** icon宽 */
  60. get sWidth(): number {
  61. return this.img.width;
  62. }
  63. set sWidth(v: number) {
  64. this.img.width = v
  65. this.update();
  66. }
  67. /** icon宽 */
  68. get sHeight(): number {
  69. return this.img.height;
  70. }
  71. set sHeight(v: number) {
  72. this.img.height = v
  73. this.update();
  74. }
  75. /** 是否显示锚点 */
  76. _showAnchor: boolean = false;
  77. get showAnchor(): boolean {
  78. return this._showAnchor;
  79. }
  80. set showAnchor(v: boolean) {
  81. this._showAnchor = v;
  82. this.anchorList.forEach(t => {
  83. t.visible = v;
  84. })
  85. }
  86. get text(): string {
  87. return this.textItem.text;
  88. }
  89. set text(v: string) {
  90. this.textItem.text = v;
  91. this.update();
  92. }
  93. get color(): string {
  94. return this.textItem.color;
  95. }
  96. set color(v: string) {
  97. this.textItem.color = v;
  98. this.update();
  99. }
  100. get font(): SFont {
  101. return this.textItem.font;
  102. }
  103. set font(v: SFont) {
  104. this.textItem.font = v;
  105. this.update();
  106. }
  107. /** img Item */
  108. img: SImageItem = new SImageItem(this);
  109. /** text item */
  110. textItem: STextItem = new STextItem(this);
  111. /**
  112. * 构造体
  113. *
  114. * */
  115. constructor(parent: SGraphItem | null) {
  116. super(parent);
  117. this.img.url = `http://adm.sagacloud.cn:8080/doc/assets/img/logo.png`;
  118. this.img.width = 32;
  119. this.img.height = 32;
  120. let anchorPoint = [{ x: 0, y: this.img.height / 2 }, { x: 0, y: -this.img.height / 2 }, { x: -this.img.width / 2, y: 0 }, { x: this.img.width / 2, y: 0 }];
  121. this.anchorList = anchorPoint.map(t => {
  122. let item = new SAnchorItem(this);
  123. item.moveTo(t.x, t.y);
  124. return item;
  125. });
  126. this.update();
  127. this.textItem.text = "";
  128. this.textItem.backgroundColor = SColor.White;
  129. this.textItem.font.size = 24;
  130. this.textItem.moveTo(26, -6);
  131. this.moveable = true;
  132. this.selectable = true;
  133. this.isTransform = false;
  134. this.textItem.enabled = false;
  135. this.img.enabled = false;
  136. }
  137. /**
  138. * 鼠标按下事件
  139. *
  140. * */
  141. onMouseDown(event: SMouseEvent): boolean {
  142. console.log(this)
  143. if (this.status == SItemStatus.Normal) {
  144. return super.onMouseDown(event);
  145. } else if (this.status == SItemStatus.Edit) {
  146. return super.onMouseDown(event);
  147. }
  148. return true;
  149. } // Function onMouseDown()
  150. /**
  151. * 宽高发发生变化
  152. *
  153. * @param oldSize 改之前的大小
  154. * @param newSize 改之后大小
  155. * */
  156. onResize(oldSize: SSize, newSize: SSize) {
  157. console.log(arguments);
  158. } // Function onResize()
  159. /**
  160. * 鼠标双击事件
  161. *
  162. * @param event 鼠标事件
  163. * @return 是否处理事件
  164. * */
  165. onDoubleClick(event: SMouseEvent): boolean {
  166. this.status = SItemStatus.Edit;
  167. return true;
  168. } // Function onDoubleClick()
  169. /**
  170. * 宽高发生变化
  171. *
  172. * @return SRect 所有子对象的并集
  173. * */
  174. boundingRect(): SRect {
  175. let rect = this.img.boundingRect().adjusted(this.img.pos.x, this.img.pos.y, 0, 0);
  176. if (this.showText) {
  177. rect = rect.unioned(this.textItem.boundingRect().adjusted(this.textItem.pos.x, this.textItem.pos.y, 0, 0));
  178. }
  179. return rect.adjusted(-5, -5, 10, 10);
  180. } // Function boundingRect()
  181. /**
  182. * Item绘制操作
  183. *
  184. * @param painter painter对象
  185. */
  186. onDraw(painter: SPainter): void {
  187. if (this.selected) {
  188. painter.pen.lineWidth = painter.toPx(1);
  189. painter.pen.lineDash = [
  190. painter.toPx(3),
  191. painter.toPx(7)
  192. ];
  193. painter.pen.color = new SColor("#000000");
  194. painter.brush.color = SColor.Transparent;
  195. painter.drawRect(this.boundingRect());
  196. }
  197. } // Function onDraw()
  198. }