123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214 |
- <template>
- <div>
- <el-button @click="addCircle">Circle</el-button>
- <el-button @click="addRect">Rect</el-button>
- <el-button @click="deleteItem">Delete</el-button>
- <el-button @click="undo">Undo</el-button>
- <el-button @click="redo">Redo</el-button>
- <canvas id="undoFrame" width="800" height="400" />
- </div>
- </template>
- <script lang="ts">
- import { SMouseEvent, SUndoStack } from "@saga-web/base";
- import { SColor, SPainter, SRect } from "@saga-web/draw";
- import { SGraphyItem, SGraphyScene, SGraphyView } from "@saga-web/graphy";
- import {SGraphyCommand} from "@saga-web/graphy/lib";
- import {SUndoCommand} from "@saga-web/base/lib";
- import {SPoint} from "@saga-web/draw/lib";
- class RectItem extends SGraphyItem {
- width = 100;
- height = 100;
- constructor(parent: SGraphyItem | null) {
- super(parent);
- this.moveable = true;
- this.selectable = true;
- this.selected = true;
- }
- boundingRect(): SRect {
- return new SRect(0, 0, this.width, this.height);
- }
- onDraw(canvas: SPainter): void {
- canvas.pen.color = SColor.Blue;
- canvas.pen.lineWidth = 5;
- canvas.brush.color = this.selected ? SColor.Red : SColor.Green;
- canvas.drawRect(0, 0, this.width, this.height)
- }
- }
- class CircleItem extends SGraphyItem {
- r = 50;
- constructor(parent: SGraphyItem | null) {
- super(parent);
- this.moveable = true;
- this.selectable = true;
- }
- boundingRect(): SRect {
- return new SRect(0, 0, this.r * 2, this.r * 2);
- }
- onDraw(canvas: SPainter): void {
- canvas.pen.color = SColor.Blue;
- canvas.pen.lineWidth = 5;
- canvas.brush.color = this.selected ? SColor.Red : SColor.Green;
- canvas.drawCircle(this.r, this.r, this.r);
- }
- }
- class SScene extends SGraphyScene {
- undoStack = new SUndoStack();
- /** 定义命令 */
- cmd = 0;
- constructor() {
- super();
- }
- onMouseUp(event: SMouseEvent): void {
- switch(this.cmd) {
- case 1:
- this.addCircle(event.x, event.y);
- break;
- case 2:
- this.addRect(event.x, event.y);
- break;
- default:
- super.onMouseUp(event);
- }
- this.cmd = 0;
- }
- private addCircle(x: number, y: number): void {
- let item = new CircleItem();
- item.moveTo(x - 50, y - 50);
- this.addItem(item);
- this.undoStack.push(new SGraphyAddCommand(this, item));
- item.connect("onMove", this, this.onItemMove.bind(this));
- }
- private addRect(x: number, y: number): void {
- let item = new RectItem();
- item.moveTo(x - 50, y - 50);
- this.addItem(item);
- this.undoStack.push(new SGraphyAddCommand(this, item));
- item.connect("onMove", this, this.onItemMove.bind(this));
- }
- onItemMove(item: SGraphyItem, ...arg: any): void {
- this.undoStack.push(new SGraphyMoveCommand(this, item, arg[0][0] as SPoint, arg[0][1] as SPoint));
- }
- }
- class TestView extends SGraphyView {
- constructor() {
- super("undoFrame");
- }
- }
- class SGraphyAddCommand extends SGraphyCommand {
- item: SGraphyItem;
- parent: SGraphyItem | null;
- constructor(scene: SGraphyScene, item: SGraphyItem) {
- 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 SGraphyDeleteCommand extends SGraphyCommand {
- mergeWith(command: SUndoCommand): boolean {
- return false;
- }
- redo(): void {
- }
- undo(): void {
- }
- }
- class SGraphyMoveCommand extends SGraphyCommand {
- item: SGraphyItem;
- old: SPoint;
- pos: SPoint;
- constructor(scene: SGraphyScene, item: SGraphyItem, old: SPoint, pos: SPoint) {
- super(scene);
- this.item = item;
- this.old = old;
- this.pos = pos;
- }
- mergeWith(command: SUndoCommand): boolean {
- if (command instanceof SGraphyMoveCommand && 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 {
- scene: new SScene(),
- }
- },
- mounted(): void {
- let view = new TestView();
- view.scene = this.scene;//new SScene(); //this.data.scene;
- },
- methods: {
- addCircle() {
- this.scene.cmd = 1;
- },
- addRect() {
- this.scene.cmd = 2;
- },
- deleteItem() {
- },
- undo() {
- console.log("undo");
- this.scene.undoStack.undo();
- },
- redo() {
- this.scene.undoStack.redo();
- }
- }
- }
- </script>
- <style scoped>
- </style>
|