|
@@ -0,0 +1,200 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-row>
|
|
|
+ <el-input v-model="input" @keyup.native="handleKeyup" style="width:200px;" placeholder="请输入内容"></el-input>
|
|
|
+ <el-button @click="undo">Undo</el-button>
|
|
|
+ <el-button @click="redo">Redo</el-button>
|
|
|
+ </el-row>
|
|
|
+ <canvas id="TextItem1" width="400" height="400" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+ import { SMouseEvent, SUndoStack } from "@saga-web/base";
|
|
|
+ import { SColor, SPainter, SRect, SFont, STextBaseLine } 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 TextItem extends SGraphyItem {
|
|
|
+ /** 宽度 */
|
|
|
+ width = 100;
|
|
|
+ /** 高度 */
|
|
|
+ height = 100;
|
|
|
+ /** 文本内容 */
|
|
|
+ _text: string = "";
|
|
|
+ get text(): string {
|
|
|
+ return this._text;
|
|
|
+ }
|
|
|
+ set text(v: string): void {
|
|
|
+ this._text = v;
|
|
|
+ this.update();
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 构造函数
|
|
|
+ *
|
|
|
+ * @param parent 指向父Item
|
|
|
+ * @param str 文本内容
|
|
|
+ */
|
|
|
+ constructor(parent: SGraphyItem | null = null, str: string = "") {
|
|
|
+ super(parent);
|
|
|
+ this.text = str;
|
|
|
+ this.moveable = true;
|
|
|
+ this.selectable = true;
|
|
|
+ this.selected = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 对象边界区域
|
|
|
+ *
|
|
|
+ * @return 边界区域
|
|
|
+ */
|
|
|
+ boundingRect(): SRect {
|
|
|
+ return new SRect(0, 0, this.width, this.height);
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Item绘制操作
|
|
|
+ *
|
|
|
+ * @param canvas 画布
|
|
|
+ */
|
|
|
+ onDraw(canvas: SPainter): void {
|
|
|
+ // this.width = canvas.toPx(canvas.textWidth(this.text));
|
|
|
+ // this.height = canvas.toPx(this.font.size);
|
|
|
+
|
|
|
+ // canvas.font.textBaseLine = this.font.textBaseLine;
|
|
|
+ // canvas.font.textDirection = this.font.textDirection;
|
|
|
+ // canvas.font.textAlign = this.font.textAlign;
|
|
|
+ // canvas.font.name = this.font.name;
|
|
|
+ // canvas.font.size = canvas.toPx(this.font.size);
|
|
|
+ // canvas.brush.color = new SColor(this.color);
|
|
|
+ // canvas.drawText(this.text, 0, 0, this.maxWidth);
|
|
|
+
|
|
|
+
|
|
|
+ canvas.brush.color = SColor.Red;
|
|
|
+ canvas.drawRect(0, 0, this.width, this.height);
|
|
|
+ canvas.brush.color = SColor.Yellow;
|
|
|
+ canvas.font.textBaseLine = STextBaseLine.Top;
|
|
|
+ canvas.drawText(this.text, 0, 0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ class SScene extends SGraphyScene {
|
|
|
+ undoStack = new SUndoStack();
|
|
|
+ textItem: SGraphyItem = new TextItem();
|
|
|
+
|
|
|
+ constructor() {
|
|
|
+ super();
|
|
|
+ this.addItem(this.textItem);
|
|
|
+ this.textItem.connect("onMove", this, this.onItemMove.bind(this));
|
|
|
+ }
|
|
|
+
|
|
|
+ updateText(str: string): void {
|
|
|
+ if(this.textItem.text !== str) {
|
|
|
+ let old = this.textItem.text;
|
|
|
+ this.textItem.text = str;
|
|
|
+ this.undoStack.push(new SGraphyPropertyCommand(this, this.textItem, "text", old, str));
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ 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("TextItem1");
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ class SGraphyPropertyCommand extends SGraphyCommand {
|
|
|
+ item: SGraphyItem;
|
|
|
+ /** 属性名称 */
|
|
|
+ propName: string;
|
|
|
+ /** 属性旧值 */
|
|
|
+ oldProp: <T>;
|
|
|
+ /** 属性新值 */
|
|
|
+ newProp: <T>;
|
|
|
+
|
|
|
+ constructor(scene: SGraphyScene, item: SGraphyItem, propName: string, oldProp: <T>, newProp: <T>) {
|
|
|
+ super(scene);
|
|
|
+ this.item = item;
|
|
|
+ this.propName = propName;
|
|
|
+ this.oldProp = oldProp;
|
|
|
+ this.newProp = newProp;
|
|
|
+ }
|
|
|
+
|
|
|
+ redo(): void {
|
|
|
+ this.item[this.propName] = this.newProp;
|
|
|
+ this.item.update();
|
|
|
+ }
|
|
|
+
|
|
|
+ undo(): void {
|
|
|
+ this.item[this.propName] = this.oldProp;
|
|
|
+ this.item.update();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ 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 {
|
|
|
+ mounted(): void {
|
|
|
+ let view = new TestView();
|
|
|
+ this.scene.updateText(this.input);
|
|
|
+ view.scene = this.scene;
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ scene: new SScene(),
|
|
|
+ input: '测试文本'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleKeyup(value): void {
|
|
|
+ this.scene.updateText(this.input);
|
|
|
+ },
|
|
|
+ undo(): void {
|
|
|
+ this.scene.undoStack.undo();
|
|
|
+ },
|
|
|
+ redo(): void {
|
|
|
+ this.scene.undoStack.redo();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|