SImgTextItem.ts 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  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 } 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. /** 是否显示锚点 */
  59. _showAnchor: boolean = false;
  60. get showAnchor(): boolean {
  61. return this._showAnchor;
  62. }
  63. set showAnchor(v: boolean) {
  64. this._showAnchor = v;
  65. this.anchorList.forEach(t => {
  66. t.visible = v;
  67. })
  68. }
  69. get text():string{
  70. return this.textItem.text;
  71. }
  72. set text(v:string){
  73. this.textItem.text = v;
  74. this.update();
  75. }
  76. /** img Item */
  77. img: SImageItem = new SImageItem(this);
  78. /** text item */
  79. textItem: STextItem = new STextItem(this);
  80. /**
  81. * 构造体
  82. *
  83. * */
  84. constructor(parent: SGraphItem | null) {
  85. super(parent);
  86. this.img.url = `http://adm.sagacloud.cn:8080/doc/assets/img/logo.png`;
  87. this.img.width = 32;
  88. this.img.height = 32;
  89. 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 }];
  90. this.anchorList = anchorPoint.map(t => {
  91. let item = new SAnchorItem(this);
  92. item.moveTo(t.x, t.y);
  93. return item;
  94. });
  95. this.update();
  96. this.textItem.text = "请填写文本";
  97. this.textItem.moveTo(16, -6);
  98. this.moveable = true;
  99. this.selectable = true;
  100. this.isTransform = false;
  101. this.textItem.enabled = false;
  102. this.img.enabled = false;
  103. }
  104. /**
  105. * 鼠标按下事件
  106. *
  107. * */
  108. onMouseDown(event: SMouseEvent): boolean {
  109. console.log(this)
  110. if (this.status == SItemStatus.Normal) {
  111. return super.onMouseDown(event);
  112. } else if (this.status == SItemStatus.Edit) {
  113. return super.onMouseDown(event);
  114. }
  115. return true;
  116. } // Function onMouseDown()
  117. /**
  118. * 宽高发发生变化
  119. *
  120. * @param oldSize 改之前的大小
  121. * @param newSize 改之后大小
  122. * */
  123. onResize(oldSize: SSize, newSize: SSize) {
  124. console.log(arguments);
  125. } // Function onResize()
  126. /**
  127. * 鼠标双击事件
  128. *
  129. * @param event 鼠标事件
  130. * @return 是否处理事件
  131. * */
  132. onDoubleClick(event: SMouseEvent): boolean {
  133. this.status = SItemStatus.Edit;
  134. return true;
  135. } // Function onDoubleClick()
  136. /**
  137. * 宽高发生变化
  138. *
  139. * @return SRect 所有子对象的并集
  140. * */
  141. boundingRect(): SRect {
  142. let rect = this.img.boundingRect().adjusted(this.img.pos.x,this.img.pos.y,0,0);
  143. if (this.showText) {
  144. rect = rect.unioned(this.textItem.boundingRect().adjusted(this.textItem.pos.x,this.textItem.pos.y,0,0))
  145. }
  146. return rect;
  147. } // Function boundingRect()
  148. /**
  149. * Item绘制操作
  150. *
  151. * @param painter painter对象
  152. */
  153. onDraw(painter: SPainter): void {
  154. painter.pen.lineWidth = painter.toPx(1);
  155. painter.pen.color = new SColor("#00FF00");
  156. painter.brush.color = SColor.Transparent;
  157. painter.drawRect(this.boundingRect());
  158. } // Function onDraw()
  159. }