|
@@ -5,6 +5,7 @@
|
|
|
<el-button @click="deleteItem">Delete</el-button>
|
|
|
<el-button @click="undo">Undo</el-button>
|
|
|
<el-button @click="redo">Redo</el-button>
|
|
|
+ <el-button @click="log">日志</el-button>
|
|
|
<canvas id="undoFrame" width="800" height="400" />
|
|
|
</div>
|
|
|
</template>
|
|
@@ -12,15 +13,13 @@
|
|
|
<script lang="ts">
|
|
|
import { SMouseEvent, SUndoStack } from "@saga-web/base";
|
|
|
import { SColor, SPainter, SRect } from "@saga-web/draw";
|
|
|
- import { SGraphItem, SGraphScene, SGraphView } from "@saga-web/graph";
|
|
|
- import {SGraphCommand} from "@saga-web/graph/lib";
|
|
|
- import {SUndoCommand} from "@saga-web/base/lib";
|
|
|
+ import { SGraphItem, SGraphScene, SGraphView, SGraphAddCommand, SGraphMoveCommand } from "@saga-web/graph";
|
|
|
import {SPoint} from "@saga-web/draw/lib";
|
|
|
|
|
|
class RectItem extends SGraphItem {
|
|
|
width = 100;
|
|
|
height = 100;
|
|
|
-
|
|
|
+ id = new Date().getTime()
|
|
|
constructor(parent: SGraphItem | null) {
|
|
|
super(parent);
|
|
|
this.moveable = true;
|
|
@@ -44,6 +43,7 @@
|
|
|
|
|
|
class CircleItem extends SGraphItem {
|
|
|
r = 50;
|
|
|
+ id = new Date().getTime()
|
|
|
|
|
|
constructor(parent: SGraphItem | null) {
|
|
|
super(parent);
|
|
@@ -116,72 +116,6 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- class SGraphAddCommand extends SGraphCommand {
|
|
|
- item: SGraphItem;
|
|
|
- parent: SGraphItem | null;
|
|
|
-
|
|
|
- constructor(scene: SGraphScene, item: SGraphItem) {
|
|
|
- super(scene);
|
|
|
- this.item = item;
|
|
|
- this.parent = item.parent;
|
|
|
- }
|
|
|
- mergeWith(command: SUndoCommand): boolean {
|
|
|
- return false;
|
|
|
- }
|
|
|
-
|
|
|
- redo(): void {
|
|
|
- this.item.parent = this.parent;
|
|
|
- this.parent.update();
|
|
|
- }
|
|
|
-
|
|
|
- undo(): void {
|
|
|
- this.item.parent = null;
|
|
|
- this.parent.update();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- class SGraphDeleteCommand extends SGraphCommand {
|
|
|
- mergeWith(command: SUndoCommand): boolean {
|
|
|
- return false;
|
|
|
- }
|
|
|
-
|
|
|
- redo(): void {
|
|
|
- }
|
|
|
-
|
|
|
- undo(): void {
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- class SGraphMoveCommand extends SGraphCommand {
|
|
|
- item: SGraphItem;
|
|
|
- old: SPoint;
|
|
|
- pos: SPoint;
|
|
|
-
|
|
|
- constructor(scene: SGraphScene, item: SGraphItem, old: SPoint, pos: SPoint) {
|
|
|
- super(scene);
|
|
|
- this.item = item;
|
|
|
- this.old = old;
|
|
|
- this.pos = pos;
|
|
|
- }
|
|
|
- mergeWith(command: SUndoCommand): boolean {
|
|
|
- if (command instanceof SGraphMoveCommand && command.item == this.item) {
|
|
|
- command.pos = this.pos;
|
|
|
- return true;
|
|
|
- }
|
|
|
- return false;
|
|
|
- }
|
|
|
-
|
|
|
- redo(): void {
|
|
|
- this.item.pos = new SPoint(this.pos.x, this.pos.y);
|
|
|
- this.item.update();
|
|
|
- }
|
|
|
-
|
|
|
- undo(): void {
|
|
|
- this.item.pos = new SPoint(this.old.x, this.old.y);
|
|
|
- this.item.update();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
@@ -203,11 +137,14 @@
|
|
|
|
|
|
},
|
|
|
undo() {
|
|
|
- console.log("undo");
|
|
|
this.scene.undoStack.undo();
|
|
|
},
|
|
|
redo() {
|
|
|
this.scene.undoStack.redo();
|
|
|
+ },
|
|
|
+ log() {
|
|
|
+ let str = this.scene.undoStack.toLog();
|
|
|
+ console.log(str)
|
|
|
}
|
|
|
}
|
|
|
}
|