Browse Source

案例修改

zhangyu 4 years ago
parent
commit
11ce560040

+ 90 - 2
docs/.vuepress/components/example/web/graph/scene/ImageItem.vue

@@ -1,12 +1,100 @@
 <template>
-    <canvas id="imageItem1" width="400" height="400" />
+    <div>
+        <el-row>
+            <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="imageItem1" width="740" height="400" tabindex="0"/>
+    </div>
 </template>
 
 <script lang="ts">
+    import { SUndoStack } from "@saga-web/base";
+    import { SGraphItem, SGraphScene, SGraphView, SGraphPropertyCommand, SGraphMoveCommand } from "@saga-web/graph";
+    import { SPoint, SPainter } from "@saga-web/draw/lib";
+    import { SObjectItem } from "@saga-web/big/lib";
+
+    /**
+     * 图片item
+     *
+     * @author  张宇(taohuzy@163.com)
+     */
+    class SImageItem extends SObjectItem {
+
+        /**
+         * Item绘制操作
+         *
+         * @param   painter      绘画类
+         */
+        onDraw(painter: SPainter): void {
+            console.log('draw');
+        } // Function onDraw()
+    }// Class SImageItem
+
+    class SScene extends SGraphScene {
+        undoStack = new SUndoStack();
+        imageItem: SImageItem = new SImageItem(null);
+
+        constructor() {
+            super();
+            this.addItem(this.imageItem);
+            this.grabItem = this.imageItem;
+            this.imageItem.connect("onMove", this, this.onItemMove.bind(this));
+        }
+
+        updateText(str: string): void {
+            if (this.imageItem.text !== str) {
+                let old = this.imageItem.text;
+                this.imageItem.text = str;
+                this.undoStack.push(new SGraphPropertyCommand(this, this.imageItem, "text", old, str));
+            }
+        }
+
+        updateColor(color: string): void {
+            if (this.imageItem.color !== color) {
+                let old = this.imageItem.color;
+                this.imageItem.color = color;
+                this.undoStack.push(new SGraphPropertyCommand(this, this.imageItem, "color", old, color));
+            }
+        }
+
+        updateSize(size: number): void {
+            if (this.imageItem.font.size !== size) {
+                let old = new SFont(this.imageItem.font);
+                let font = new SFont(this.imageItem.font);
+                font.size = size;
+                this.imageItem.font = font;
+                this.undoStack.push(new SGraphPropertyCommand(this, this.imageItem, "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));
+        }
+
+    }
+
+    class ImageView extends SGraphView {
+        constructor() {
+            super("ImageItem1");
+        }
+    }
 
     export default {
         mounted(): void {
-            // new TestView();
+            let view = new ImageView();
+            view.scene = this.scene;
+        },
+        data() {
+            return {
+                scene: new SScene(),
+            }
+        },
+        methods: {
+            undo() {},
+            redo() {},
+            reset() {},
         }
     }
 </script>

+ 54 - 182
docs/.vuepress/components/example/web/graph/scene/TextItem.vue

@@ -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);
 			}
 		},
     }

+ 3 - 3
package.json

@@ -13,9 +13,9 @@
   },
   "dependencies": {
     "@saga-web/base": "^2.1.9",
-    "@saga-web/big": "^1.0.11",
-    "@saga-web/draw": "^2.1.82",
-    "@saga-web/graph": "^2.1.54",
+    "@saga-web/big": "^1.0.21",
+    "@saga-web/draw": "^2.1.84",
+    "@saga-web/graph": "^2.1.67",
     "@saga-web/feng-map": "1.0.6",
     "@saga-web/topology": "1.0.84",
     "axios": "^0.18.1",