Undo1.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. <template>
  2. <div>
  3. <el-button @click="addCircle">Circle</el-button>
  4. <el-button @click="addRect">Rect</el-button>
  5. <el-button @click="deleteItem">Delete</el-button>
  6. <el-button @click="undo">Undo</el-button>
  7. <el-button @click="redo">Redo</el-button>
  8. <el-button @click="log">日志</el-button>
  9. <canvas id="undoFrame" width="800" height="400" />
  10. </div>
  11. </template>
  12. <script lang="ts">
  13. import { SMouseEvent, SUndoStack } from "@saga-web/base";
  14. import { SColor, SPainter, SRect } from "@saga-web/draw";
  15. import { SGraphItem, SGraphScene, SGraphView, SGraphAddCommand, SGraphMoveCommand } from "@saga-web/graph";
  16. import {SPoint} from "@saga-web/draw/lib";
  17. class RectItem extends SGraphItem {
  18. width = 100;
  19. height = 100;
  20. id = new Date().getTime()
  21. constructor(parent: SGraphItem | null) {
  22. super(parent);
  23. this.moveable = true;
  24. this.selectable = true;
  25. this.selected = true;
  26. }
  27. boundingRect(): SRect {
  28. return new SRect(0, 0, this.width, this.height);
  29. }
  30. onDraw(canvas: SPainter): void {
  31. canvas.pen.color = SColor.Blue;
  32. canvas.pen.lineWidth = 5;
  33. canvas.brush.color = this.selected ? SColor.Red : SColor.Green;
  34. canvas.drawRect(0, 0, this.width, this.height)
  35. }
  36. }
  37. class CircleItem extends SGraphItem {
  38. r = 50;
  39. id = new Date().getTime()
  40. constructor(parent: SGraphItem | null) {
  41. super(parent);
  42. this.moveable = true;
  43. this.selectable = true;
  44. }
  45. boundingRect(): SRect {
  46. return new SRect(0, 0, this.r * 2, this.r * 2);
  47. }
  48. onDraw(canvas: SPainter): void {
  49. canvas.pen.color = SColor.Blue;
  50. canvas.pen.lineWidth = 5;
  51. canvas.brush.color = this.selected ? SColor.Red : SColor.Green;
  52. canvas.drawCircle(this.r, this.r, this.r);
  53. }
  54. }
  55. class SScene extends SGraphScene {
  56. undoStack = new SUndoStack();
  57. /** 定义命令 */
  58. cmd = 0;
  59. constructor() {
  60. super();
  61. }
  62. onMouseUp(event: SMouseEvent): boolean {
  63. switch(this.cmd) {
  64. case 1:
  65. this.addCircle(event.x, event.y);
  66. break;
  67. case 2:
  68. this.addRect(event.x, event.y);
  69. break;
  70. default:
  71. super.onMouseUp(event);
  72. }
  73. this.cmd = 0;
  74. return false
  75. }
  76. private addCircle(x: number, y: number): void {
  77. let item = new CircleItem(null);
  78. item.moveTo(x - 50, y - 50);
  79. this.addItem(item);
  80. this.undoStack.push(new SGraphAddCommand(this, item));
  81. item.connect("onMove", this, this.onItemMove.bind(this));
  82. }
  83. private addRect(x: number, y: number): void {
  84. let item = new RectItem(null);
  85. item.moveTo(x - 50, y - 50);
  86. this.addItem(item);
  87. this.undoStack.push(new SGraphAddCommand(this, item));
  88. item.connect("onMove", this, this.onItemMove.bind(this));
  89. }
  90. onItemMove(item: SGraphItem, ...arg: any): void {
  91. this.undoStack.push(new SGraphMoveCommand(this, item, arg[0][0] as SPoint, arg[0][1] as SPoint));
  92. }
  93. }
  94. class TestView extends SGraphView {
  95. constructor() {
  96. super("undoFrame");
  97. }
  98. }
  99. export default {
  100. data() {
  101. return {
  102. scene: new SScene(),
  103. }
  104. },
  105. mounted(): void {
  106. let view = new TestView();
  107. view.scene = this.scene;//new SScene(); //this.data.scene;
  108. },
  109. methods: {
  110. addCircle() {
  111. this.scene.cmd = 1;
  112. },
  113. addRect() {
  114. this.scene.cmd = 2;
  115. },
  116. deleteItem() {
  117. },
  118. undo() {
  119. this.scene.undoStack.undo();
  120. },
  121. redo() {
  122. this.scene.undoStack.redo();
  123. },
  124. log() {
  125. let str = this.scene.undoStack.toLog();
  126. console.log(str)
  127. }
  128. }
  129. }
  130. </script>
  131. <style scoped>
  132. </style>