|
@@ -26,6 +26,11 @@ class RectItem extends SGraphItem {
|
|
height = 100;
|
|
height = 100;
|
|
id = new Date().getTime() + '';
|
|
id = new Date().getTime() + '';
|
|
|
|
|
|
|
|
+ /**
|
|
|
|
+ * 构造函数
|
|
|
|
+ *
|
|
|
|
+ * @param parent Item 图像引擎
|
|
|
|
+ */
|
|
constructor(parent: SGraphItem | null) {
|
|
constructor(parent: SGraphItem | null) {
|
|
super(parent);
|
|
super(parent);
|
|
this.moveable = true;
|
|
this.moveable = true;
|
|
@@ -35,6 +40,11 @@ class RectItem extends SGraphItem {
|
|
this.rotate = 60;
|
|
this.rotate = 60;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ /**
|
|
|
|
+ * 矩形数据类型绘制
|
|
|
|
+ *
|
|
|
|
+ * @return 边界区域
|
|
|
|
+ */
|
|
boundingRect(): SRect {
|
|
boundingRect(): SRect {
|
|
return new SRect(0, 0, this.width, this.height);
|
|
return new SRect(0, 0, this.width, this.height);
|
|
}
|
|
}
|
|
@@ -51,34 +61,45 @@ class RectItem extends SGraphItem {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- class CircleItem extends SGraphItem {
|
|
|
|
- r = 50;
|
|
|
|
- id = new Date().getTime() + ""
|
|
|
|
|
|
+class CircleItem extends SGraphItem {
|
|
|
|
+ /** 半径 */
|
|
|
|
+ r = 50;
|
|
|
|
+ /** 图 Id */
|
|
|
|
+ id = new Date().getTime() + ""
|
|
|
|
|
|
- constructor(parent: SGraphItem | null) {
|
|
|
|
- super(parent);
|
|
|
|
- this.moveable = true;
|
|
|
|
- this.selectable = true;
|
|
|
|
- this.isTransform = false;
|
|
|
|
- }
|
|
|
|
|
|
+ /**
|
|
|
|
+ * 构造函数
|
|
|
|
+ *
|
|
|
|
+ * @param parent Item 图像引擎
|
|
|
|
+ */
|
|
|
|
+ constructor(parent: SGraphItem | null) {
|
|
|
|
+ super(parent);
|
|
|
|
+ this.moveable = true;
|
|
|
|
+ this.selectable = true;
|
|
|
|
+ this.isTransform = false;
|
|
|
|
+ }
|
|
|
|
|
|
- boundingRect(): SRect {
|
|
|
|
- return new SRect(0, 0, this.r * 2, this.r * 2);
|
|
|
|
- }
|
|
|
|
|
|
+ /**
|
|
|
|
+ * 矩形数据类型绘制
|
|
|
|
+ */
|
|
|
|
+ boundingRect(): SRect {
|
|
|
|
+ return new SRect(0, 0, this.r * 2, this.r * 2);
|
|
|
|
+ }
|
|
|
|
|
|
- /**
|
|
|
|
- * Item 绘制操作
|
|
|
|
- * @param canvas 绘制对象
|
|
|
|
- */
|
|
|
|
- onDraw(canvas: SPainter): void {
|
|
|
|
- canvas.pen.color = SColor.Blue;
|
|
|
|
- canvas.pen.lineWidth = 5;
|
|
|
|
- canvas.brush.color = this.selected ? SColor.Red : SColor.Green;
|
|
|
|
- canvas.drawCircle(this.r, this.r, this.r);
|
|
|
|
- }
|
|
|
|
|
|
+ /**
|
|
|
|
+ * Item 绘制操作
|
|
|
|
+ * @param canvas 绘制对象
|
|
|
|
+ */
|
|
|
|
+ onDraw(canvas: SPainter): void {
|
|
|
|
+ canvas.pen.color = SColor.Blue;
|
|
|
|
+ canvas.pen.lineWidth = 5;
|
|
|
|
+ canvas.brush.color = this.selected ? SColor.Red : SColor.Green;
|
|
|
|
+ canvas.drawCircle(this.r, this.r, this.r);
|
|
}
|
|
}
|
|
|
|
+}
|
|
|
|
|
|
class SScene extends SGraphScene {
|
|
class SScene extends SGraphScene {
|
|
|
|
+ /** 实例化 */
|
|
undoStack = new SUndoStack();
|
|
undoStack = new SUndoStack();
|
|
/** 定义命令 */
|
|
/** 定义命令 */
|
|
cmd = 0;
|
|
cmd = 0;
|
|
@@ -90,7 +111,12 @@ class SScene extends SGraphScene {
|
|
super();
|
|
super();
|
|
}
|
|
}
|
|
|
|
|
|
-
|
|
|
|
|
|
+ /**
|
|
|
|
+ * 鼠标抬起事件
|
|
|
|
+ *
|
|
|
|
+ * @param event 事件参数
|
|
|
|
+ * @return 是否处理
|
|
|
|
+ */
|
|
onMouseUp(event: SMouseEvent): boolean {
|
|
onMouseUp(event: SMouseEvent): boolean {
|
|
switch (this.cmd) {
|
|
switch (this.cmd) {
|
|
case 1:
|
|
case 1:
|
|
@@ -106,6 +132,11 @@ class SScene extends SGraphScene {
|
|
return false
|
|
return false
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ /**
|
|
|
|
+ * 添加圆形
|
|
|
|
+ * @param x x轴
|
|
|
|
+ * @param y y轴
|
|
|
|
+ */
|
|
private addCircle(x: number, y: number): void {
|
|
private addCircle(x: number, y: number): void {
|
|
let item = new CircleItem(null);
|
|
let item = new CircleItem(null);
|
|
item.moveTo(x - 50, y - 50);
|
|
item.moveTo(x - 50, y - 50);
|
|
@@ -114,6 +145,11 @@ class SScene extends SGraphScene {
|
|
item.connect("onMove", this, this.onItemMove.bind(this));
|
|
item.connect("onMove", this, this.onItemMove.bind(this));
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ /**
|
|
|
|
+ * 添加矩形
|
|
|
|
+ * @param x x轴
|
|
|
|
+ * @param y y轴
|
|
|
|
+ */
|
|
private addRect(x: number, y: number): void {
|
|
private addRect(x: number, y: number): void {
|
|
let item = new RectItem(null);
|
|
let item = new RectItem(null);
|
|
item.moveTo(x - 50, y - 50);
|
|
item.moveTo(x - 50, y - 50);
|
|
@@ -122,20 +158,31 @@ class SScene extends SGraphScene {
|
|
item.connect("onMove", this, this.onItemMove.bind(this));
|
|
item.connect("onMove", this, this.onItemMove.bind(this));
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ /**
|
|
|
|
+ * 移动操作
|
|
|
|
+ * @param item 图像引擎
|
|
|
|
+ * @param arg 数组
|
|
|
|
+ */
|
|
onItemMove(item: SGraphItem, ...arg: any): void {
|
|
onItemMove(item: SGraphItem, ...arg: any): void {
|
|
this.undoStack.push(new SGraphMoveCommand(this, item, arg[0][0] as SPoint, arg[0][1] as SPoint));
|
|
this.undoStack.push(new SGraphMoveCommand(this, item, arg[0][0] as SPoint, arg[0][1] as SPoint));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- class TestView extends SGraphView {
|
|
|
|
- constructor(undoFrame) {
|
|
|
|
- super(undoFrame);
|
|
|
|
- }
|
|
|
|
|
|
+class TestView extends SGraphView {
|
|
|
|
+ /**
|
|
|
|
+ * 构造函数
|
|
|
|
+ *
|
|
|
|
+ * @param undoFrame 绘制引擎
|
|
|
|
+ */
|
|
|
|
+ constructor(undoFrame) {
|
|
|
|
+ super(undoFrame);
|
|
}
|
|
}
|
|
|
|
+}
|
|
|
|
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ /** 命令所属的场景类 */
|
|
scene: new SScene(),
|
|
scene: new SScene(),
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -147,21 +194,39 @@ class SScene extends SGraphScene {
|
|
view.scene = this.scene;//new SScene(); //this.data.scene;
|
|
view.scene = this.scene;//new SScene(); //this.data.scene;
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ /**
|
|
|
|
+ * 定义圆形命令
|
|
|
|
+ */
|
|
addCircle() {
|
|
addCircle() {
|
|
this.scene.cmd = 1;
|
|
this.scene.cmd = 1;
|
|
},
|
|
},
|
|
|
|
+ /**
|
|
|
|
+ * 定义矩形命令
|
|
|
|
+ */
|
|
addRect() {
|
|
addRect() {
|
|
this.scene.cmd = 2;
|
|
this.scene.cmd = 2;
|
|
},
|
|
},
|
|
|
|
+ /**
|
|
|
|
+ * 删除操作
|
|
|
|
+ */
|
|
deleteItem() {
|
|
deleteItem() {
|
|
-
|
|
|
|
|
|
+ // do something ...
|
|
},
|
|
},
|
|
|
|
+ /**
|
|
|
|
+ * 取消操作
|
|
|
|
+ */
|
|
undo() {
|
|
undo() {
|
|
this.scene.undoStack.undo();
|
|
this.scene.undoStack.undo();
|
|
},
|
|
},
|
|
|
|
+ /**
|
|
|
|
+ * 重做操作
|
|
|
|
+ */
|
|
redo() {
|
|
redo() {
|
|
this.scene.undoStack.redo();
|
|
this.scene.undoStack.redo();
|
|
},
|
|
},
|
|
|
|
+ /**
|
|
|
|
+ * 将命令堆栈转为日志(命令数组)
|
|
|
|
+ */
|
|
log() {
|
|
log() {
|
|
let str = this.scene.undoStack.toLog();
|
|
let str = this.scene.undoStack.toLog();
|
|
console.log(str)
|
|
console.log(str)
|