Browse Source

修改类名

zhangyu 4 years ago
parent
commit
654b348ffd

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

@@ -1,189 +1,12 @@
 <template>
-    <canvas id="clockItem1" width="400" height="400" />
+    <canvas id="imageItem1" width="400" height="400" />
 </template>
 
 <script lang="ts">
-    import { SColor, SPainter, SRect } from "@saga-web/draw";
-    import { SGraphyItem, SGraphyScene, SGraphyView } from "@saga-web/graphy";
-
-    class ClockItem extends SGraphyItem {
-        /** 宽度 */
-        width = 100;
-        /** 高度 */
-        height = 100;
-
-        /** 半径 */
-        get radius(): number {
-            return Math.min(this.width, this.height) / 2.0;
-        }
-
-        /**
-         * 构造函数
-         *
-         * @param   parent      指向父Item
-         * @param   width       宽度
-         * @param   height      高度
-         */
-        constructor(parent: SGraphyItem | null, width: number, height: number) {
-            super(parent);
-            this.width = width;
-            this.height = height;
-        }
-
-        /**
-         * 对象边界区域
-         *
-         * @return  边界区域
-         */
-        boundingRect(): SRect {
-            return new SRect(0, 0, this.width, this.height);
-        }
-
-        /**
-         * Item绘制操作
-         *
-         * @param   canvas      画布
-         */
-        onDraw(canvas: SPainter): void {
-            canvas.translate(this.width / 2, this.height / 2);
-            const t = new Date();
-            this.drawScale(canvas);
-            this.drawHour(canvas, t.getHours(), t.getMinutes(), t.getSeconds());
-            this.drawMinute(canvas, t.getMinutes(), t.getSeconds());
-            this.drawSecond(canvas, t.getSeconds() + t.getMilliseconds() / 1000.0);
-
-            this.update();
-        }
-
-        /**
-         * 绘制表刻度
-         *
-         * @param   canvas      画布
-         */
-        private drawScale(canvas: SPainter): void {
-            const scaleLength = Math.max(this.radius / 10.0, 2.0);
-            const scaleLength1 = scaleLength * 1.2;
-            const strokeWidth = Math.max(this.radius / 100.0, 2.0);
-            const strokeWidth1 = strokeWidth * 2.0;
-
-            canvas.save();
-            canvas.pen.color = SColor.Blue;
-
-            for (let i = 1; i <= 12; i++) {
-                // 12小时刻度
-                canvas.pen.lineWidth = strokeWidth1;
-                canvas.drawLine(
-                    0,
-                    -this.radius,
-                    0,
-                    -this.radius + scaleLength1
-                );
-
-                if (this.radius >= 40) {
-                    // 如果半度大于40显示分钟刻度
-                    canvas.rotate((6 * Math.PI) / 180);
-                    for (let j = 1; j <= 4; j++) {
-                        // 分钟刻度
-                        canvas.pen.lineWidth = strokeWidth;
-                        canvas.drawLine(
-                            0,
-                            -this.radius,
-                            0,
-                            -this.radius + scaleLength
-                        );
-                        canvas.rotate((6 * Math.PI) / 180);
-                    }
-                } else {
-                    canvas.rotate((30 * Math.PI) / 180);
-                }
-            }
-
-            canvas.restore();
-        }
-
-        /**
-         * 绘制时针
-         *
-         * @param   canvas      画布
-         * @param   hour        时
-         * @param   minute      分
-         * @param   second      秒
-         */
-        private drawHour(
-            canvas: SPainter,
-            hour: number,
-            minute: number,
-            second: number
-        ): void {
-            canvas.save();
-            canvas.pen.color = SColor.Black;
-            canvas.rotate(
-                ((hour * 30.0 + (minute * 30.0) / 60 + (second * 30.0) / 3600) *
-                    Math.PI) /
-                180
-            );
-            canvas.drawLine(
-                0,
-                this.radius / 10.0,
-                0,
-                -this.radius / 2.0
-            );
-            canvas.restore();
-        }
-
-        /**
-         * 绘制秒针
-         *
-         * @param   canvas      画布
-         * @param   minute      分
-         * @param   second      秒
-         */
-        private drawMinute(canvas: SPainter, minute: number, second: number): void {
-            canvas.save();
-            canvas.pen.color = SColor.Black;
-            canvas.rotate(((minute * 6 + (second * 6) / 60.0) * Math.PI) / 180);
-            canvas.drawLine(
-                0,
-                this.radius / 10.0,
-                0,
-                (-this.radius * 2.0) / 3.0
-            );
-            canvas.restore();
-        }
-
-        /**
-         * 绘制秒针
-         *
-         * @param   canvas      画布
-         * @param   second      秒
-         */
-        private drawSecond(canvas: SPainter, second: number): void {
-            canvas.save();
-            canvas.pen.color = SColor.Red;
-            canvas.rotate((second * 6 * Math.PI) / 180);
-            canvas.drawLine(
-                0,
-                this.radius / 5.0,
-                0,
-                -this.radius + this.radius / 10.0
-            );
-            canvas.restore();
-        }
-    }
-
-    class TestView extends SGraphyView {
-        clock1 = new ClockItem(null, 300, 300);
-
-        constructor() {
-            super("clockItem1");
-            this.scene = new SGraphyScene();
-            this.scene.addItem(this.clock1);
-        }
-    }
 
     export default {
         mounted(): void {
-            new TestView();
+            // new TestView();
         }
     }
 </script>

+ 39 - 36
docs/.vuepress/components/example/web/graph/scene/TextItem.vue

@@ -2,6 +2,7 @@
 	<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>
@@ -11,18 +12,15 @@
 
 <script lang="ts">
 	import { SMouseEvent, SUndoStack } from "@saga-web/base";
-    import { SColor, SPainter, SRect, SFont, STextBaseLine } from "@saga-web/draw";
-	import { SGraphyItem, SGraphyScene, SGraphyView } from "@saga-web/graph";
-	import { SGraphyCommand } from "@saga-web/graph/lib";
+    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 {
-		/** 宽度 */
-        width = 100;
-        /** 高度 */
-		height = 100;
-        /** 文本内容 */
+		/** 文本内容 */
 		private _text: string = "";
 		get text(): string {
 			return this._text;
@@ -54,31 +52,36 @@
 
 		/** 文本绘制最大宽 */
     	maxWidth: number | undefined = undefined;
-		
+
 		/**
          * 构造函数
          *
          * @param   parent      指向父Item
          * @param   str         文本内容
          */
-        constructor(parent: SGraphyItem | null = null, str: string = "") {
+        constructor(parent: SGraphItem | null = null, str: string = "") {
 			super(parent);
-			this.text = str;
+			this._text = str;
+			this._font = new SFont();
 			this.moveable = true;
 			this.selectable = true;
 			this.selected = true;
 		}
-		
+
 		/**
          * 对象边界区域
          *
          * @return  边界区域
          */
         boundingRect(): SRect {
-            return new SRect(0, 0, this.width, this.height);
+            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      画布
@@ -96,21 +99,21 @@
 			// canvas.drawText(this.text, 0, 0, this.maxWidth);
 
 
-			canvas.brush.color = SColor.Red;
-			canvas.drawRect(0, 0, this.width, this.height);
-			canvas.brush.color = SColor.Yellow;
-			canvas.font.textBaseLine = STextBaseLine.Top;
-			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 SGraphyScene {
+	class SScene extends SGraphScene {
 		undoStack = new SUndoStack();
-		textItem: SGraphyItem = new TextItem();
+		textItem: SGraphItem = new TextItem(null);
 
 		constructor() {
 			super();
-			this.textItem.maxWidth = 100;
 			this.addItem(this.textItem);
 			this.textItem.connect("onMove", this, this.onItemMove.bind(this));
 		}
@@ -119,17 +122,17 @@
 			if(this.textItem.text !== str) {
 				let old = this.textItem.text;
 				this.textItem.text = str;
-				this.undoStack.push(new SGraphyPropertyCommand(this, this.textItem, "text", old, str));
+				this.undoStack.push(new SGraphPropertyCommand(this, this.textItem, "text", old, str));
 			}
 		}
 
-		onItemMove(item: SGraphyItem, ...arg: any): void {
-            this.undoStack.push(new SGraphyMoveCommand(this, item, arg[0][0] as SPoint, arg[0][1] as SPoint));
+		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 SGraphyView {
+	class TestView extends SGraphView {
         constructor() {
 			super("TextItem1");
         }
@@ -140,8 +143,8 @@
 	 *
 	 * @author  张宇(taohuzy@163.com)
 	 */
-	class SGraphyPropertyCommand<T> extends SGraphyCommand {
-		item: SGraphyItem;
+	class SGraphPropertyCommand<T> extends SGraphCommand {
+		item: SGraphItem;
 		/** 属性名称 */
 		propName: string;
 		/** 属性旧值 */
@@ -158,7 +161,7 @@
 		 * @param   oldProp     修改前的属性值
 		 * @param   newProp     修改后的属性值
 		 */
-        constructor(scene: SGraphyScene, item: SGraphyItem, propName: string, oldProp: T, newProp: T) {
+        constructor(scene: SGraphScene, item: SGraphItem, propName: string, oldProp: T, newProp: T) {
             super(scene);
 			this.item = item;
 			this.propName = propName;
@@ -182,20 +185,20 @@
             this.item.update();
         }
 	}
-	
-	class SGraphyMoveCommand extends SGraphyCommand {
-        item: SGraphyItem;
+
+	class SGraphMoveCommand extends SGraphCommand {
+        item: SGraphItem;
         old: SPoint;
         pos: SPoint;
 
-        constructor(scene: SGraphyScene, item: SGraphyItem, 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  SGraphyMoveCommand && command.item == this.item) {
+            if (command instanceof  SGraphMoveCommand && command.item == this.item) {
                 command.pos = this.pos;
                 return true;
             }
@@ -222,7 +225,7 @@
 		data() {
 			return {
 				scene: new SScene(),
-				input: '测试文本'
+				input: '测试文本',
 			}
 		},
 		methods: {

+ 1 - 1
tsconfig.json

@@ -1,7 +1,7 @@
 {
     "compilerOptions": {
         "types": ["vuepress-types"],
-        "target": "es5",                            // Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'.
+        "target": "es6",                            // Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'.
         "module": "commonjs",                       // Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'.
         "rootDir": "./docs",
 //        "outDir": "./lib",                          // 编译后生成的文件目录