|
@@ -2,6 +2,7 @@
|
|
|
<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>
|
|
@@ -11,18 +12,15 @@
|
|
|
|
|
|
<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/graph";
|
|
|
- import { SGraphyCommand } from "@saga-web/graph/lib";
|
|
|
+ import { SColor, SPainter, SRect, SFont, SSize, STextBaseLine } from "@saga-web/draw";
|
|
|
+ import { SObjectItem } from "@saga-web/big/lib/items/SObjectItem";
|
|
|
+ import { SGraphItem, SGraphScene, SGraphView } from "@saga-web/graph";
|
|
|
+ import { SGraphCommand } from "@saga-web/graph/lib";
|
|
|
import { SUndoCommand } from "@saga-web/base/lib";
|
|
|
import { SPoint } from "@saga-web/draw/lib";
|
|
|
-
|
|
|
+
|
|
|
class TextItem extends SObjectItem {
|
|
|
- /** 宽度 */
|
|
|
- width = 100;
|
|
|
- /** 高度 */
|
|
|
- height = 100;
|
|
|
- /** 文本内容 */
|
|
|
+ /** 文本内容 */
|
|
|
private _text: string = "";
|
|
|
get text(): string {
|
|
|
return this._text;
|
|
@@ -54,31 +52,36 @@
|
|
|
|
|
|
/** 文本绘制最大宽 */
|
|
|
maxWidth: number | undefined = undefined;
|
|
|
-
|
|
|
+
|
|
|
/**
|
|
|
* 构造函数
|
|
|
*
|
|
|
* @param parent 指向父Item
|
|
|
* @param str 文本内容
|
|
|
*/
|
|
|
- constructor(parent: SGraphyItem | null = null, str: string = "") {
|
|
|
+ constructor(parent: SGraphItem | null = null, str: string = "") {
|
|
|
super(parent);
|
|
|
- this.text = str;
|
|
|
+ this._text = str;
|
|
|
+ this._font = new SFont();
|
|
|
this.moveable = true;
|
|
|
this.selectable = true;
|
|
|
this.selected = true;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
/**
|
|
|
* 对象边界区域
|
|
|
*
|
|
|
* @return 边界区域
|
|
|
*/
|
|
|
boundingRect(): SRect {
|
|
|
- return new SRect(0, 0, this.width, this.height);
|
|
|
+ return new SRect(this.x, this.y, this.width, this.height);
|
|
|
}
|
|
|
|
|
|
- /**
|
|
|
+ protected onResize(oldSize: SSize, newSize: SSize) {
|
|
|
+ console.log("resize",oldSize,newSize)
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
* Item绘制操作
|
|
|
*
|
|
|
* @param canvas 画布
|
|
@@ -96,21 +99,21 @@
|
|
|
// 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 , this.maxWidth);
|
|
|
+ canvas.brush.color = SColor.White;
|
|
|
+ canvas.drawRect(this.x, this.y, this.width, this.height);
|
|
|
+ //绘制文本
|
|
|
+ canvas.brush.color = new SColor(this.color);
|
|
|
+ canvas.font = this.font;
|
|
|
+ canvas.drawText(this.text, this.x, this.y , this.maxWidth);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- class SScene extends SGraphyScene {
|
|
|
+ class SScene extends SGraphScene {
|
|
|
undoStack = new SUndoStack();
|
|
|
- textItem: SGraphyItem = new TextItem();
|
|
|
+ textItem: SGraphItem = new TextItem(null);
|
|
|
|
|
|
constructor() {
|
|
|
super();
|
|
|
- this.textItem.maxWidth = 100;
|
|
|
this.addItem(this.textItem);
|
|
|
this.textItem.connect("onMove", this, this.onItemMove.bind(this));
|
|
|
}
|
|
@@ -119,17 +122,17 @@
|
|
|
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));
|
|
|
+ this.undoStack.push(new SGraphPropertyCommand(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));
|
|
|
+ onItemMove(item: SGraphItem, ...arg: any): void {
|
|
|
+ this.undoStack.push(new SGraphMoveCommand(this, item, arg[0][0] as SPoint, arg[0][1] as SPoint));
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
- class TestView extends SGraphyView {
|
|
|
+ class TestView extends SGraphView {
|
|
|
constructor() {
|
|
|
super("TextItem1");
|
|
|
}
|
|
@@ -140,8 +143,8 @@
|
|
|
*
|
|
|
* @author 张宇(taohuzy@163.com)
|
|
|
*/
|
|
|
- class SGraphyPropertyCommand<T> extends SGraphyCommand {
|
|
|
- item: SGraphyItem;
|
|
|
+ class SGraphPropertyCommand<T> extends SGraphCommand {
|
|
|
+ item: SGraphItem;
|
|
|
/** 属性名称 */
|
|
|
propName: string;
|
|
|
/** 属性旧值 */
|
|
@@ -158,7 +161,7 @@
|
|
|
* @param oldProp 修改前的属性值
|
|
|
* @param newProp 修改后的属性值
|
|
|
*/
|
|
|
- constructor(scene: SGraphyScene, item: SGraphyItem, propName: string, oldProp: T, newProp: T) {
|
|
|
+ constructor(scene: SGraphScene, item: SGraphItem, propName: string, oldProp: T, newProp: T) {
|
|
|
super(scene);
|
|
|
this.item = item;
|
|
|
this.propName = propName;
|
|
@@ -182,20 +185,20 @@
|
|
|
this.item.update();
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- class SGraphyMoveCommand extends SGraphyCommand {
|
|
|
- item: SGraphyItem;
|
|
|
+
|
|
|
+ class SGraphMoveCommand extends SGraphCommand {
|
|
|
+ item: SGraphItem;
|
|
|
old: SPoint;
|
|
|
pos: SPoint;
|
|
|
|
|
|
- constructor(scene: SGraphyScene, item: SGraphyItem, 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 SGraphyMoveCommand && command.item == this.item) {
|
|
|
+ if (command instanceof SGraphMoveCommand && command.item == this.item) {
|
|
|
command.pos = this.pos;
|
|
|
return true;
|
|
|
}
|
|
@@ -222,7 +225,7 @@
|
|
|
data() {
|
|
|
return {
|
|
|
scene: new SScene(),
|
|
|
- input: '测试文本'
|
|
|
+ input: '测试文本',
|
|
|
}
|
|
|
},
|
|
|
methods: {
|