SImgTextItem.js 4.1 KB

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