<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对象	*/
		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;
        } // Constructor

		/**
		 * redo操作
		 */
        redo(): void {
            this.item[this.propName] = this.newProp;
            this.item.update();
        } // Function redo()

		/**
		 * undo操作
		 */
        undo(): void {
            this.item[this.propName] = this.oldProp;
            this.item.update();
        } // Function undo()
	}

	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>
