|
@@ -12,16 +12,14 @@
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
-<script lang="ts">
|
|
|
|
- import { SUndoStack } from "@saga-web/base";
|
|
|
|
- import { SFont } from "@saga-web/draw";
|
|
|
|
- import { SGraphItem, SGraphScene, SGraphView, SGraphPropertyCommand, SGraphMoveCommand } from "@saga-web/graph";
|
|
|
|
- import { SPoint } from "@saga-web/draw/lib";
|
|
|
|
- import {STextItem} from "@saga-web/big/lib";
|
|
|
|
|
|
+<script>
|
|
|
|
+ import { SUndoStack } from "@saga-web/base/lib";
|
|
|
|
+ import { SFont } from "@saga-web/draw/lib";
|
|
|
|
+ import { SGraphScene, SGraphView, SGraphPropertyCommand, SGraphMoveCommand, STextItem } from "@saga-web/graph/lib";
|
|
|
|
|
|
class SScene extends SGraphScene {
|
|
class SScene extends SGraphScene {
|
|
undoStack = new SUndoStack();
|
|
undoStack = new SUndoStack();
|
|
- textItem: STextItem = new STextItem(null);
|
|
|
|
|
|
+ textItem = new STextItem(null);
|
|
|
|
|
|
constructor() {
|
|
constructor() {
|
|
super();
|
|
super();
|
|
@@ -32,7 +30,7 @@
|
|
this.textItem.connect("onMove", this, this.onItemMove.bind(this));
|
|
this.textItem.connect("onMove", this, this.onItemMove.bind(this));
|
|
}
|
|
}
|
|
|
|
|
|
- updateText(str: string): void {
|
|
|
|
|
|
+ updateText(str) {
|
|
if (this.textItem.text !== str) {
|
|
if (this.textItem.text !== str) {
|
|
let old = this.textItem.text;
|
|
let old = this.textItem.text;
|
|
this.textItem.text = str;
|
|
this.textItem.text = str;
|
|
@@ -40,7 +38,7 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- updateColor(color: string): void {
|
|
|
|
|
|
+ updateColor(color) {
|
|
if (this.textItem.color !== color) {
|
|
if (this.textItem.color !== color) {
|
|
let old = this.textItem.color;
|
|
let old = this.textItem.color;
|
|
this.textItem.color = color;
|
|
this.textItem.color = color;
|
|
@@ -48,7 +46,7 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- updateSize(size: number): void {
|
|
|
|
|
|
+ updateSize(size) {
|
|
if (this.textItem.font.size !== size) {
|
|
if (this.textItem.font.size !== size) {
|
|
let old = new SFont(this.textItem.font);
|
|
let old = new SFont(this.textItem.font);
|
|
let font = new SFont(this.textItem.font);
|
|
let font = new SFont(this.textItem.font);
|
|
@@ -58,8 +56,8 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- onItemMove(item: SGraphItem, ...arg: any): void {
|
|
|
|
- this.undoStack.push(new SGraphMoveCommand(this, item, arg[0][0] as SPoint, arg[0][1] as SPoint));
|
|
|
|
|
|
+ onItemMove(item, ...arg) {
|
|
|
|
+ this.undoStack.push(new SGraphMoveCommand(this, item, arg[0][0], arg[0][1]));
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
@@ -71,13 +69,6 @@
|
|
}
|
|
}
|
|
|
|
|
|
export default {
|
|
export default {
|
|
- mounted(): void {
|
|
|
|
- let view = new TestView();
|
|
|
|
- this.scene.updateText(this.text);
|
|
|
|
- this.scene.updateColor(this.color);
|
|
|
|
- this.scene.updateSize(this.size);
|
|
|
|
- view.scene = this.scene;
|
|
|
|
- },
|
|
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
scene: new SScene(),
|
|
scene: new SScene(),
|
|
@@ -86,23 +77,30 @@
|
|
color: "#333333",
|
|
color: "#333333",
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ mounted() {
|
|
|
|
+ let view = new TestView();
|
|
|
|
+ this.scene.updateText(this.text);
|
|
|
|
+ this.scene.updateColor(this.color);
|
|
|
|
+ this.scene.updateSize(this.size);
|
|
|
|
+ view.scene = this.scene;
|
|
|
|
+ },
|
|
methods: {
|
|
methods: {
|
|
- handleChangeText(text): void {
|
|
|
|
- this.scene.updateText(this.text);
|
|
|
|
|
|
+ handleChangeText(text) {
|
|
|
|
+ this.scene.updateText(text);
|
|
},
|
|
},
|
|
- handleChangeColor(color): void {
|
|
|
|
|
|
+ handleChangeColor(color) {
|
|
this.scene.updateColor(color);
|
|
this.scene.updateColor(color);
|
|
},
|
|
},
|
|
- handleChangeSize(size): void {
|
|
|
|
|
|
+ handleChangeSize(size) {
|
|
this.scene.updateSize(size);
|
|
this.scene.updateSize(size);
|
|
},
|
|
},
|
|
- undo(): void {
|
|
|
|
|
|
+ undo() {
|
|
this.scene.undoStack.undo();
|
|
this.scene.undoStack.undo();
|
|
},
|
|
},
|
|
- redo(): void {
|
|
|
|
|
|
+ redo() {
|
|
this.scene.undoStack.redo();
|
|
this.scene.undoStack.redo();
|
|
},
|
|
},
|
|
- reset(): void {
|
|
|
|
|
|
+ reset() {
|
|
this.text = "测试文本";
|
|
this.text = "测试文本";
|
|
this.size = 20;
|
|
this.size = 20;
|
|
this.color = "#333333";
|
|
this.color = "#333333";
|
|
@@ -116,4 +114,4 @@
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
|
|
|
|
-</style>
|
|
|
|
|
|
+</style>
|