TextItem.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  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/graphy";
  15. import { SGraphyCommand } from "@saga-web/graphy/lib";
  16. import { SUndoCommand } from "@saga-web/base/lib";
  17. import {SPoint} from "@saga-web/draw/lib";
  18. class TextItem extends SGraphyItem {
  19. /** 宽度 */
  20. width = 100;
  21. /** 高度 */
  22. height = 100;
  23. /** 文本内容 */
  24. _text: string = "";
  25. get text(): string {
  26. return this._text;
  27. }
  28. set text(v: string): void {
  29. this._text = v;
  30. this.update();
  31. }
  32. /**
  33. * 构造函数
  34. *
  35. * @param parent 指向父Item
  36. * @param str 文本内容
  37. */
  38. constructor(parent: SGraphyItem | null = null, str: string = "") {
  39. super(parent);
  40. this.text = str;
  41. this.moveable = true;
  42. this.selectable = true;
  43. this.selected = true;
  44. }
  45. /**
  46. * 对象边界区域
  47. *
  48. * @return 边界区域
  49. */
  50. boundingRect(): SRect {
  51. return new SRect(0, 0, this.width, this.height);
  52. }
  53. /**
  54. * Item绘制操作
  55. *
  56. * @param canvas 画布
  57. */
  58. onDraw(canvas: SPainter): void {
  59. // this.width = canvas.toPx(canvas.textWidth(this.text));
  60. // this.height = canvas.toPx(this.font.size);
  61. // canvas.font.textBaseLine = this.font.textBaseLine;
  62. // canvas.font.textDirection = this.font.textDirection;
  63. // canvas.font.textAlign = this.font.textAlign;
  64. // canvas.font.name = this.font.name;
  65. // canvas.font.size = canvas.toPx(this.font.size);
  66. // canvas.brush.color = new SColor(this.color);
  67. // canvas.drawText(this.text, 0, 0, this.maxWidth);
  68. canvas.brush.color = SColor.Red;
  69. canvas.drawRect(0, 0, this.width, this.height);
  70. canvas.brush.color = SColor.Yellow;
  71. canvas.font.textBaseLine = STextBaseLine.Top;
  72. canvas.drawText(this.text, 0, 0);
  73. }
  74. }
  75. class SScene extends SGraphyScene {
  76. undoStack = new SUndoStack();
  77. textItem: SGraphyItem = new TextItem();
  78. constructor() {
  79. super();
  80. this.addItem(this.textItem);
  81. this.textItem.connect("onMove", this, this.onItemMove.bind(this));
  82. }
  83. updateText(str: string): void {
  84. if(this.textItem.text !== str) {
  85. let old = this.textItem.text;
  86. this.textItem.text = str;
  87. this.undoStack.push(new SGraphyPropertyCommand(this, this.textItem, "text", old, str));
  88. }
  89. }
  90. onItemMove(item: SGraphyItem, ...arg: any): void {
  91. this.undoStack.push(new SGraphyMoveCommand(this, item, arg[0][0] as SPoint, arg[0][1] as SPoint));
  92. }
  93. }
  94. class TestView extends SGraphyView {
  95. constructor() {
  96. super("TextItem1");
  97. }
  98. }
  99. class SGraphyPropertyCommand extends SGraphyCommand {
  100. item: SGraphyItem;
  101. /** 属性名称 */
  102. propName: string;
  103. /** 属性旧值 */
  104. oldProp: <T>;
  105. /** 属性新值 */
  106. newProp: <T>;
  107. constructor(scene: SGraphyScene, item: SGraphyItem, propName: string, oldProp: <T>, newProp: <T>) {
  108. super(scene);
  109. this.item = item;
  110. this.propName = propName;
  111. this.oldProp = oldProp;
  112. this.newProp = newProp;
  113. }
  114. redo(): void {
  115. this.item[this.propName] = this.newProp;
  116. this.item.update();
  117. }
  118. undo(): void {
  119. this.item[this.propName] = this.oldProp;
  120. this.item.update();
  121. }
  122. }
  123. class SGraphyMoveCommand extends SGraphyCommand {
  124. item: SGraphyItem;
  125. old: SPoint;
  126. pos: SPoint;
  127. constructor(scene: SGraphyScene, item: SGraphyItem, old: SPoint, pos: SPoint) {
  128. super(scene);
  129. this.item = item;
  130. this.old = old;
  131. this.pos = pos;
  132. }
  133. mergeWith(command: SUndoCommand): boolean {
  134. if (command instanceof SGraphyMoveCommand && command.item == this.item) {
  135. command.pos = this.pos;
  136. return true;
  137. }
  138. return false;
  139. }
  140. redo(): void {
  141. this.item.pos = new SPoint(this.pos.x, this.pos.y);
  142. this.item.update();
  143. }
  144. undo(): void {
  145. this.item.pos = new SPoint(this.old.x, this.old.y);
  146. this.item.update();
  147. }
  148. }
  149. export default {
  150. mounted(): void {
  151. let view = new TestView();
  152. this.scene.updateText(this.input);
  153. view.scene = this.scene;
  154. },
  155. data() {
  156. return {
  157. scene: new SScene(),
  158. input: '测试文本'
  159. }
  160. },
  161. methods: {
  162. handleKeyup(value): void {
  163. this.scene.updateText(this.input);
  164. },
  165. undo(): void {
  166. this.scene.undoStack.undo();
  167. },
  168. redo(): void {
  169. this.scene.undoStack.redo();
  170. }
  171. },
  172. }
  173. </script>
  174. <style scoped>
  175. </style>