TextItem.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. <template>
  2. <div>
  3. <el-row>
  4. <el-input v-model="input" @keyup.native="handleKeyup" style="width:200px;" placeholder="请输入内容"></el-input>
  5. <el-button @click="undo">Undo</el-button>
  6. <el-button @click="redo">Redo</el-button>
  7. </el-row>
  8. <canvas id="TextItem1" width="400" height="400" />
  9. </div>
  10. </template>
  11. <script lang="ts">
  12. import { SMouseEvent, SUndoStack } from "@saga-web/base";
  13. import { SColor, SPainter, SRect, SFont, STextBaseLine } from "@saga-web/draw";
  14. import { SGraphyItem, SGraphyScene, SGraphyView } from "@saga-web/graph";
  15. import { SGraphyCommand } from "@saga-web/graph/lib";
  16. import { SUndoCommand } from "@saga-web/base/lib";
  17. import { SPoint } from "@saga-web/draw/lib";
  18. class TextItem extends SObjectItem {
  19. /** 宽度 */
  20. width = 100;
  21. /** 高度 */
  22. height = 100;
  23. /** 文本内容 */
  24. private _text: string = "";
  25. get text(): string {
  26. return this._text;
  27. }
  28. set text(v: string) {
  29. this._text = v;
  30. this.update();
  31. }
  32. /** 文本颜色 */
  33. private _color: string ="#333333";
  34. get color():string {
  35. return this._color;
  36. }
  37. set color(v: string) {
  38. this._color = v;
  39. this.update();
  40. }
  41. /** 字体 */
  42. private _font: SFont;
  43. get font():SFont {
  44. return this._font;
  45. }
  46. set font(v: SFont) {
  47. this._font = v;
  48. this.update();
  49. }
  50. /** 文本绘制最大宽 */
  51. maxWidth: number | undefined = undefined;
  52. /**
  53. * 构造函数
  54. *
  55. * @param parent 指向父Item
  56. * @param str 文本内容
  57. */
  58. constructor(parent: SGraphyItem | null = null, str: string = "") {
  59. super(parent);
  60. this.text = str;
  61. this.moveable = true;
  62. this.selectable = true;
  63. this.selected = true;
  64. }
  65. /**
  66. * 对象边界区域
  67. *
  68. * @return 边界区域
  69. */
  70. boundingRect(): SRect {
  71. return new SRect(0, 0, this.width, this.height);
  72. }
  73. /**
  74. * Item绘制操作
  75. *
  76. * @param canvas 画布
  77. */
  78. onDraw(canvas: SPainter): void {
  79. // this.width = canvas.toPx(canvas.textWidth(this.text));
  80. // this.height = canvas.toPx(this.font.size);
  81. // canvas.font.textBaseLine = this.font.textBaseLine;
  82. // canvas.font.textDirection = this.font.textDirection;
  83. // canvas.font.textAlign = this.font.textAlign;
  84. // canvas.font.name = this.font.name;
  85. // canvas.font.size = canvas.toPx(this.font.size);
  86. // canvas.brush.color = new SColor(this.color);
  87. // canvas.drawText(this.text, 0, 0, this.maxWidth);
  88. canvas.brush.color = SColor.Red;
  89. canvas.drawRect(0, 0, this.width, this.height);
  90. canvas.brush.color = SColor.Yellow;
  91. canvas.font.textBaseLine = STextBaseLine.Top;
  92. canvas.drawText(this.text, 0, 0 , this.maxWidth);
  93. }
  94. }
  95. class SScene extends SGraphyScene {
  96. undoStack = new SUndoStack();
  97. textItem: SGraphyItem = new TextItem();
  98. constructor() {
  99. super();
  100. this.textItem.maxWidth = 100;
  101. this.addItem(this.textItem);
  102. this.textItem.connect("onMove", this, this.onItemMove.bind(this));
  103. }
  104. updateText(str: string): void {
  105. if(this.textItem.text !== str) {
  106. let old = this.textItem.text;
  107. this.textItem.text = str;
  108. this.undoStack.push(new SGraphyPropertyCommand(this, this.textItem, "text", old, str));
  109. }
  110. }
  111. onItemMove(item: SGraphyItem, ...arg: any): void {
  112. this.undoStack.push(new SGraphyMoveCommand(this, item, arg[0][0] as SPoint, arg[0][1] as SPoint));
  113. }
  114. }
  115. class TestView extends SGraphyView {
  116. constructor() {
  117. super("TextItem1");
  118. }
  119. }
  120. /**
  121. * 属性修改命令类
  122. *
  123. * @author 张宇(taohuzy@163.com)
  124. */
  125. class SGraphyPropertyCommand<T> extends SGraphyCommand {
  126. item: SGraphyItem;
  127. /** 属性名称 */
  128. propName: string;
  129. /** 属性旧值 */
  130. oldProp: T;
  131. /** 属性新值 */
  132. newProp: T;
  133. /**
  134. * 构造函数
  135. *
  136. * @param scene 命令所属的场景类
  137. * @param item 命令所属的item类
  138. * @param propName 修改的属性名称
  139. * @param oldProp 修改前的属性值
  140. * @param newProp 修改后的属性值
  141. */
  142. constructor(scene: SGraphyScene, item: SGraphyItem, propName: string, oldProp: T, newProp: T) {
  143. super(scene);
  144. this.item = item;
  145. this.propName = propName;
  146. this.oldProp = oldProp;
  147. this.newProp = newProp;
  148. }
  149. /**
  150. * redo操作
  151. */
  152. redo(): void {
  153. this.item[this.propName] = this.newProp;
  154. this.item.update();
  155. }
  156. /**
  157. * undo操作
  158. */
  159. undo(): void {
  160. this.item[this.propName] = this.oldProp;
  161. this.item.update();
  162. }
  163. }
  164. class SGraphyMoveCommand extends SGraphyCommand {
  165. item: SGraphyItem;
  166. old: SPoint;
  167. pos: SPoint;
  168. constructor(scene: SGraphyScene, item: SGraphyItem, old: SPoint, pos: SPoint) {
  169. super(scene);
  170. this.item = item;
  171. this.old = old;
  172. this.pos = pos;
  173. }
  174. mergeWith(command: SUndoCommand): boolean {
  175. if (command instanceof SGraphyMoveCommand && command.item == this.item) {
  176. command.pos = this.pos;
  177. return true;
  178. }
  179. return false;
  180. }
  181. redo(): void {
  182. this.item.pos = new SPoint(this.pos.x, this.pos.y);
  183. this.item.update();
  184. }
  185. undo(): void {
  186. this.item.pos = new SPoint(this.old.x, this.old.y);
  187. this.item.update();
  188. }
  189. }
  190. export default {
  191. mounted(): void {
  192. let view = new TestView();
  193. this.scene.updateText(this.input);
  194. view.scene = this.scene;
  195. },
  196. data() {
  197. return {
  198. scene: new SScene(),
  199. input: '测试文本'
  200. }
  201. },
  202. methods: {
  203. handleKeyup(value): void {
  204. this.scene.updateText(this.input);
  205. },
  206. undo(): void {
  207. this.scene.undoStack.undo();
  208. },
  209. redo(): void {
  210. this.scene.undoStack.redo();
  211. }
  212. },
  213. }
  214. </script>
  215. <style scoped>
  216. </style>