123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247 |
- <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, 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 {
- /** 文本内容 */
- 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);
- }
- }
- class SScene extends SGraphScene {
- undoStack = new SUndoStack();
- textItem: SGraphItem = new TextItem(null);
- 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 SGraphPropertyCommand(this, this.textItem, "text", old, str));
- }
- }
- 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 SGraphView {
- constructor() {
- super("TextItem1");
- }
- }
- /**
- * 属性修改命令类
- *
- * @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);
- 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>
|