Undo1.vue 4.4 KB

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