SImgTextItem.ts 4.7 KB

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