TextItem.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <template>
  2. <div>
  3. <el-row>
  4. <el-input v-model="text" @change="handleChangeText" type="textarea" :autosize="{ minRows: 1, maxRows: 1}" placeholder="请输入内容" style="width:200px;"></el-input>
  5. <el-input-number v-model="size" @change="handleChangeSize" :min="1" label="字号"></el-input-number>
  6. <el-color-picker v-model="color" @change="handleChangeColor" style="top: 15px;"></el-color-picker>
  7. <el-button @click="undo">Undo</el-button>
  8. <el-button @click="redo">Redo</el-button>
  9. <el-button @click="reset">Reset</el-button>
  10. </el-row>
  11. <canvas id="TextItem1" width="740" height="400" tabindex="0"/>
  12. </div>
  13. </template>
  14. <script lang="ts">
  15. import { SUndoStack } from "@saga-web/base";
  16. import { SFont } from "@saga-web/draw";
  17. import { SGraphItem, SGraphScene, SGraphView, SGraphPropertyCommand, SGraphMoveCommand } from "@saga-web/graph";
  18. import { SPoint } from "@saga-web/draw/lib";
  19. import {STextItem} from "@saga-web/big/lib";
  20. class SScene extends SGraphScene {
  21. undoStack = new SUndoStack();
  22. textItem: STextItem = new STextItem(null);
  23. constructor() {
  24. super();
  25. this.textItem.moveable = true;
  26. this.textItem.x = 100;
  27. this.textItem.y = 100;
  28. this.addItem(this.textItem);
  29. this.textItem.connect("onMove", this, this.onItemMove.bind(this));
  30. }
  31. updateText(str: string): void {
  32. if (this.textItem.text !== str) {
  33. let old = this.textItem.text;
  34. this.textItem.text = str;
  35. this.undoStack.push(new SGraphPropertyCommand(this, this.textItem, "text", old, str));
  36. }
  37. }
  38. updateColor(color: string): void {
  39. if (this.textItem.color !== color) {
  40. let old = this.textItem.color;
  41. this.textItem.color = color;
  42. this.undoStack.push(new SGraphPropertyCommand(this, this.textItem, "color", old, color));
  43. }
  44. }
  45. updateSize(size: number): void {
  46. if (this.textItem.font.size !== size) {
  47. let old = new SFont(this.textItem.font);
  48. let font = new SFont(this.textItem.font);
  49. font.size = size;
  50. this.textItem.font = font;
  51. this.undoStack.push(new SGraphPropertyCommand(this, this.textItem, "font", old, font));
  52. }
  53. }
  54. onItemMove(item: SGraphItem, ...arg: any): void {
  55. this.undoStack.push(new SGraphMoveCommand(this, item, arg[0][0] as SPoint, arg[0][1] as SPoint));
  56. }
  57. }
  58. class TestView extends SGraphView {
  59. constructor() {
  60. super("TextItem1");
  61. }
  62. }
  63. export default {
  64. mounted(): void {
  65. let view = new TestView();
  66. this.scene.updateText(this.text);
  67. this.scene.updateColor(this.color);
  68. this.scene.updateSize(this.size);
  69. view.scene = this.scene;
  70. },
  71. data() {
  72. return {
  73. scene: new SScene(),
  74. text: '测试文本',
  75. size: 20,
  76. color: "#333333",
  77. }
  78. },
  79. methods: {
  80. handleChangeText(text): void {
  81. this.scene.updateText(this.text);
  82. },
  83. handleChangeColor(color): void {
  84. this.scene.updateColor(color);
  85. },
  86. handleChangeSize(size): void {
  87. this.scene.updateSize(size);
  88. },
  89. undo(): void {
  90. this.scene.undoStack.undo();
  91. },
  92. redo(): void {
  93. this.scene.undoStack.redo();
  94. },
  95. reset(): void {
  96. this.text = "测试文本";
  97. this.size = 20;
  98. this.color = "#333333";
  99. this.scene.updateText(this.text);
  100. this.scene.updateColor(this.color);
  101. this.scene.updateSize(this.size);
  102. }
  103. },
  104. }
  105. </script>
  106. <style scoped>
  107. </style>