TextEdit.ts 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. /*
  2. * *********************************************************************************************************************
  3. *
  4. * !!
  5. * .F88X
  6. * X8888Y
  7. * .}888888N;
  8. * i888888N; .:! .I$WI:
  9. * R888888I .'N88~ i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
  10. * .R888888I .;N8888~ .X8' "8I.!,/8" !%NY8`"8I8~~8>,88I
  11. * +888888N; .8888888Y "&&8Y.}8,
  12. * ./888888N; .R888888Y .'}~ .>}'.`+> i}! "i' +/' .'i~ !11,.:">, .~]! .i}i
  13. * ~888888%: .I888888l .]88~`1/iY88Ii+1'.R$8$8]"888888888> Y8$ W8E X8E W8888'188Il}Y88$*
  14. * 18888888 E8888881 .]W%8$`R8X'&8%++N8i,8N%N8+l8%` .}8N:.R$RE%N88N%N$K$R 188,FE$8%~Y88I
  15. * .E888888I .i8888888' .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
  16. * 8888888I .,N888888~ ~88i"8W,!N8*.I88.}888%F,i$88"F88" 888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
  17. * i888888N' I888Y ]88;/EX*IFKFK88X K8R .l8W 88Y ~88}'88E&%8W.X8N``]88!.$8K .:W8I
  18. * .i888888N; I8Y .&8$ .X88! i881.:%888>I88 ;88] +88+.';;;;:.Y88X 18N.,88l .+88/
  19. * .:R888888I
  20. * .&888888I Copyright (c) 2016-2020. 博锐尚格科技股份有限公司
  21. * ~8888'
  22. * .!88~ All rights reserved.
  23. *
  24. * *********************************************************************************************************************
  25. */
  26. import { SObjectItem } from "@persagy-web/graph/";
  27. import { SPainter, SRect, SColor, SFont, SPoint } from "@persagy-web/draw";
  28. import { SGraphItem, STextOrigin, SLineStyle } from "@persagy-web/graph/";
  29. import { SItemStatus } from "@persagy-web/big";
  30. /**
  31. * 文本编辑类
  32. *
  33. * @author 韩耀龙(han_yao_long@163.com)
  34. */
  35. export class TextEdit extends SObjectItem {
  36. /////////////////////////////////////////////////////////////////////////////////////////////////////////////
  37. //属性
  38. /**编辑状态 */
  39. protected _status: SItemStatus = SItemStatus.Normal;
  40. get status(): SItemStatus {
  41. return this._status;
  42. }
  43. set status(value: SItemStatus) {
  44. const oldStatus = this._status;
  45. const newStatus = value;
  46. this._status = value;
  47. //状态变更触发事件
  48. this.$emit('StatusChange', oldStatus, newStatus)
  49. this.update();
  50. }
  51. /** 记录painter */
  52. private _painter: SPainter | null = null;
  53. /** 文本内容 */
  54. private _text: string = "";
  55. get text(): string {
  56. return this._text;
  57. }
  58. set text(v: string) {
  59. this._text = v;
  60. this._textArr = this.text.split(/\n/g);
  61. this.drawFormatText();
  62. this.update();
  63. }
  64. /** 切割后的文本数组 */
  65. private _textArr: string[] = [];
  66. /** 文本颜色 */
  67. private _color: SColor = new SColor("#333333");
  68. get color(): SColor {
  69. return this._color;
  70. }
  71. set color(v: SColor) {
  72. this._color = v;
  73. this.update();
  74. }
  75. /** 字体 */
  76. private _font: SFont;
  77. get font(): SFont {
  78. return this._font;
  79. }
  80. set font(v: SFont) {
  81. this._font = v;
  82. this.drawFormatText();
  83. this.update();
  84. }
  85. /** 背景色 */
  86. private _backgroundColor: SColor = SColor.Transparent;
  87. get backgroundColor(): SColor {
  88. return this._backgroundColor;
  89. }
  90. set backgroundColor(v: SColor) {
  91. this._backgroundColor = v;
  92. this.update();
  93. }
  94. /** 边框色 */
  95. private _strokeColor: SColor = SColor.Transparent;
  96. get strokeColor(): SColor {
  97. return this._strokeColor;
  98. }
  99. set strokeColor(v: SColor) {
  100. this._strokeColor = v;
  101. this.update();
  102. }
  103. /** 边框宽度 */
  104. private _lineWidth: number = 1;
  105. get lineWidth(): number {
  106. return this._lineWidth;
  107. }
  108. set lineWidth(v: number) {
  109. this._lineWidth = v;
  110. this.update();
  111. }
  112. /** 边框样式 */
  113. private _borderStyle: SLineStyle = SLineStyle.None;
  114. get borderStyle(): SLineStyle {
  115. return this._borderStyle;
  116. }
  117. set borderStyle(v: SLineStyle) {
  118. this._borderStyle = v;
  119. this.update();
  120. }
  121. /** 原点位置 */
  122. private _originPosition: STextOrigin = STextOrigin.LeftTop;
  123. get originPosition(): STextOrigin {
  124. return this._originPosition;
  125. }
  126. set originPosition(v: STextOrigin) {
  127. this._originPosition = v;
  128. this.update();
  129. }
  130. /** 文本绘制最大宽 */
  131. maxWidth: number | undefined = undefined;
  132. /**
  133. * 构造函数
  134. *
  135. * @param parent 指向父Item
  136. * @param str 文本内容
  137. */
  138. constructor(parent: SGraphItem | null, str: string = "") {
  139. super(parent);
  140. this._text = str;
  141. this._font = new SFont("sans-serif", 12);
  142. this.height = 12;
  143. } // Constructor
  144. /**
  145. * 对象边界区域
  146. *
  147. * @return 边界区域
  148. */
  149. boundingRect(): SRect {
  150. return new SRect(
  151. -this.origin.x,
  152. -this.origin.y,
  153. this.width,
  154. this.height
  155. );
  156. } // Function boundingRect()
  157. /**
  158. * 移动后处理所有坐标,并肩原点置为场景原点
  159. *
  160. * @param x x坐标
  161. * @param y y坐标
  162. */
  163. moveToOrigin(x: number, y: number): void {
  164. this.moveTo(this.x + x, this.y + y);
  165. } // Function moveToOrigin()
  166. /**
  167. * 绘制显示状态文本Item
  168. *
  169. * @param painter 绘制类
  170. */
  171. protected drawShowText(painter: SPainter): void {
  172. painter.translate(-this.origin.x, -this.origin.y);
  173. //绘制矩形轮廓
  174. if (this.selected) {
  175. painter.shadow.shadowBlur = 10;
  176. painter.shadow.shadowColor = new SColor(`#00000033`);
  177. painter.shadow.shadowOffsetX = 5;
  178. painter.shadow.shadowOffsetY = 5;
  179. } else {
  180. painter.shadow.shadowColor = SColor.Transparent;
  181. }
  182. painter.brush.color = this.backgroundColor;
  183. painter.pen.lineWidth = this.lineWidth;
  184. painter.pen.color = this.strokeColor;
  185. painter.drawRect(0, 0, this.width, this.height);
  186. //绘制文本
  187. painter.brush.color = new SColor(this.color);
  188. painter.shadow.shadowColor = SColor.Transparent;
  189. painter.font = this.font;
  190. this._textArr.forEach((text: string, index: number) => {
  191. painter.drawText(
  192. text,
  193. this.font.size / 4,
  194. index * (this.font.size * 1.25) + this.font.size / 4,
  195. this.maxWidth
  196. );
  197. });
  198. } // Function drawShowText()
  199. /**
  200. * 根据换行切割文本,绘制多行并计算外轮廓宽高
  201. *
  202. */
  203. protected drawFormatText(): void {
  204. if (this._painter instanceof SPainter) {
  205. this._painter.save();
  206. this._painter.font = this.font;
  207. let textMaxWidth = 0;
  208. let fontSize: number = this.font.size;
  209. this._textArr.forEach((text: string, index: number) => {
  210. let textWidth: number = this._painter
  211. ? this._painter.textWidth(text) + fontSize / 2
  212. : fontSize / 2;
  213. if (textWidth > textMaxWidth) {
  214. textMaxWidth = textWidth;
  215. }
  216. });
  217. // 在绘制文本后计算文本的宽高
  218. this.width = textMaxWidth;
  219. this.height = fontSize * 1.25 * this._textArr.length + fontSize / 8;
  220. // 设置原点位置(默认左上角)
  221. if (this.originPosition == STextOrigin.Center) {
  222. this.origin = new SPoint(this.width / 2, this.height / 2);
  223. }
  224. this._painter.restore();
  225. }
  226. } // Function drawFormatText()
  227. /**
  228. * Item绘制操作
  229. *
  230. * @param painter 绘画类
  231. */
  232. onDraw(painter: SPainter): void {
  233. if (!(this._painter instanceof SPainter)) {
  234. this._painter = painter;
  235. this.drawFormatText();
  236. }
  237. this.drawShowText(painter);
  238. } // Function onDraw()
  239. } // Class STextItem