|
@@ -1,131 +1,63 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<el-row>
|
|
|
- <el-input v-model="input" @keyup.native="handleKeyup" style="width:200px;" placeholder="请输入内容"></el-input>
|
|
|
-
|
|
|
+ <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="400" height="400" />
|
|
|
+ <canvas id="TextItem1" width="740" height="400" tabindex="0"/>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
- import { SMouseEvent, SUndoStack } from "@saga-web/base";
|
|
|
- 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 { 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";
|
|
|
-
|
|
|
- class TextItem extends SObjectItem {
|
|
|
- /** 文本内容 */
|
|
|
- private _text: string = "";
|
|
|
- get text(): string {
|
|
|
- return this._text;
|
|
|
- }
|
|
|
- set text(v: string) {
|
|
|
- this._text = v;
|
|
|
- this.update();
|
|
|
- }
|
|
|
-
|
|
|
- /** 文本颜色 */
|
|
|
- private _color: string ="#333333";
|
|
|
- get color():string {
|
|
|
- return this._color;
|
|
|
- }
|
|
|
- set color(v: string) {
|
|
|
- this._color = v;
|
|
|
- this.update();
|
|
|
- }
|
|
|
-
|
|
|
- /** 字体 */
|
|
|
- private _font: SFont;
|
|
|
- get font():SFont {
|
|
|
- return this._font;
|
|
|
- }
|
|
|
- set font(v: SFont) {
|
|
|
- this._font = v;
|
|
|
- this.update();
|
|
|
- }
|
|
|
-
|
|
|
- /** 文本绘制最大宽 */
|
|
|
- maxWidth: number | undefined = undefined;
|
|
|
-
|
|
|
- /**
|
|
|
- * 构造函数
|
|
|
- *
|
|
|
- * @param parent 指向父Item
|
|
|
- * @param str 文本内容
|
|
|
- */
|
|
|
- constructor(parent: SGraphItem | null = null, str: string = "") {
|
|
|
- super(parent);
|
|
|
- this._text = str;
|
|
|
- this._font = new SFont();
|
|
|
- this.moveable = true;
|
|
|
- this.selectable = true;
|
|
|
- this.selected = true;
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * 对象边界区域
|
|
|
- *
|
|
|
- * @return 边界区域
|
|
|
- */
|
|
|
- boundingRect(): SRect {
|
|
|
- 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 画布
|
|
|
- */
|
|
|
- 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.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);
|
|
|
- }
|
|
|
- }
|
|
|
+ import {STextItem} from "@saga-web/big/lib";
|
|
|
|
|
|
class SScene extends SGraphScene {
|
|
|
undoStack = new SUndoStack();
|
|
|
- textItem: SGraphItem = new TextItem(null);
|
|
|
+ textItem: STextItem = 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: string): void {
|
|
|
- if(this.textItem.text !== 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: string): void {
|
|
|
+ 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: number): void {
|
|
|
+ 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: SGraphItem, ...arg: any): void {
|
|
|
this.undoStack.push(new SGraphMoveCommand(this, item, arg[0][0] as SPoint, arg[0][1] as SPoint));
|
|
|
}
|
|
@@ -138,105 +70,45 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- /**
|
|
|
- * 属性修改命令类
|
|
|
- *
|
|
|
- * @author 张宇(taohuzy@163.com)
|
|
|
- */
|
|
|
- class SGraphPropertyCommand<T> extends SGraphCommand {
|
|
|
- item: SGraphItem;
|
|
|
- /** 属性名称 */
|
|
|
- propName: string;
|
|
|
- /** 属性旧值 */
|
|
|
- oldProp: T;
|
|
|
- /** 属性新值 */
|
|
|
- newProp: T;
|
|
|
-
|
|
|
- /**
|
|
|
- * 构造函数
|
|
|
- *
|
|
|
- * @param scene 命令所属的场景类
|
|
|
- * @param item 命令所属的item类
|
|
|
- * @param propName 修改的属性名称
|
|
|
- * @param oldProp 修改前的属性值
|
|
|
- * @param newProp 修改后的属性值
|
|
|
- */
|
|
|
- constructor(scene: SGraphScene, item: SGraphItem, propName: string, oldProp: T, newProp: T) {
|
|
|
- super(scene);
|
|
|
- this.item = item;
|
|
|
- this.propName = propName;
|
|
|
- this.oldProp = oldProp;
|
|
|
- this.newProp = newProp;
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * redo操作
|
|
|
- */
|
|
|
- redo(): void {
|
|
|
- this.item[this.propName] = this.newProp;
|
|
|
- this.item.update();
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * undo操作
|
|
|
- */
|
|
|
- undo(): void {
|
|
|
- this.item[this.propName] = this.oldProp;
|
|
|
- this.item.update();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- class SGraphMoveCommand extends SGraphCommand {
|
|
|
- item: SGraphItem;
|
|
|
- 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 SGraphMoveCommand && 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);
|
|
|
+ this.scene.updateText(this.text);
|
|
|
+ this.scene.updateColor(this.color);
|
|
|
+ this.scene.updateSize(this.size);
|
|
|
view.scene = this.scene;
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
scene: new SScene(),
|
|
|
- input: '测试文本',
|
|
|
+ text: '测试文本',
|
|
|
+ size: 20,
|
|
|
+ color: "#333333",
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- handleKeyup(value): void {
|
|
|
- this.scene.updateText(this.input);
|
|
|
+ handleChangeText(text): void {
|
|
|
+ this.scene.updateText(this.text);
|
|
|
+ },
|
|
|
+ handleChangeColor(color): void {
|
|
|
+ this.scene.updateColor(color);
|
|
|
+ },
|
|
|
+ handleChangeSize(size): void {
|
|
|
+ this.scene.updateSize(size);
|
|
|
},
|
|
|
undo(): void {
|
|
|
this.scene.undoStack.undo();
|
|
|
},
|
|
|
redo(): void {
|
|
|
this.scene.undoStack.redo();
|
|
|
+ },
|
|
|
+ reset(): void {
|
|
|
+ this.text = "测试文本";
|
|
|
+ this.size = 20;
|
|
|
+ this.color = "#333333";
|
|
|
+ this.scene.updateText(this.text);
|
|
|
+ this.scene.updateColor(this.color);
|
|
|
+ this.scene.updateSize(this.size);
|
|
|
}
|
|
|
},
|
|
|
}
|