123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117 |
- <template>
- <div>
- <el-row>
- <el-input v-model="text" @change="handleChangeText" type="textarea" :autosize="{ minRows: 1, maxRows: 1}" placeholder="请输入内容" style="width:200px;"></el-input>
- <el-input-number v-model="size" @change="handleChangeSize" :min="1" label="字号"></el-input-number>
- <el-color-picker v-model="color" @change="handleChangeColor" style="top: 15px;"></el-color-picker>
- <el-button @click="undo">Undo</el-button>
- <el-button @click="redo">Redo</el-button>
- <el-button @click="reset">Reset</el-button>
- </el-row>
- <canvas id="TextItem1" width="740" height="400" tabindex="0"/>
- </div>
- </template>
- <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 {
- undoStack = new SUndoStack();
- textItem = new STextItem(null);
- constructor() {
- super();
- this.textItem.moveable = true;
- this.textItem.x = 100;
- this.textItem.y = 100;
- this.addItem(this.textItem);
- this.textItem.connect("onMove", this, this.onItemMove.bind(this));
- }
- updateText(str) {
- if (this.textItem.text !== str) {
- let old = this.textItem.text;
- this.textItem.text = str;
- this.undoStack.push(new SGraphPropertyCommand(this, this.textItem, "text", old, str));
- }
- }
- updateColor(color) {
- if (this.textItem.color !== color) {
- let old = this.textItem.color;
- this.textItem.color = color;
- this.undoStack.push(new SGraphPropertyCommand(this, this.textItem, "color", old, color));
- }
- }
- updateSize(size) {
- if (this.textItem.font.size !== size) {
- let old = new SFont(this.textItem.font);
- let font = new SFont(this.textItem.font);
- font.size = size;
- this.textItem.font = font;
- this.undoStack.push(new SGraphPropertyCommand(this, this.textItem, "font", old, font));
- }
- }
- onItemMove(item, ...arg) {
- this.undoStack.push(new SGraphMoveCommand(this, item, arg[0][0], arg[0][1]));
- }
- }
- class TestView extends SGraphView {
- constructor() {
- super("TextItem1");
- }
- }
- export default {
- data() {
- return {
- scene: new SScene(),
- text: '测试文本',
- size: 20,
- 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: {
- handleChangeText(text) {
- this.scene.updateText(text);
- },
- handleChangeColor(color) {
- this.scene.updateColor(color);
- },
- handleChangeSize(size) {
- this.scene.updateSize(size);
- },
- undo() {
- this.scene.undoStack.undo();
- },
- redo() {
- this.scene.undoStack.redo();
- },
- reset() {
- this.text = "测试文本";
- this.size = 20;
- this.color = "#333333";
- this.scene.updateText(this.text);
- this.scene.updateColor(this.color);
- this.scene.updateSize(this.size);
- }
- },
- }
- </script>
- <style scoped>
- </style>
|