shaun-sheep 4 лет назад
Родитель
Сommit
530aa4d7d1

+ 1 - 0
docs/.vuepress/components/big/items/door.vue

@@ -18,6 +18,7 @@ import { Component, Vue } from "vue-property-decorator";
 export default class WallCanvas extends Vue {
     /** 实例化 view */
     view: SGraphView | undefined;
+    /** 图中靠上位置的黑色矩形轮廓 */
     outline1 = [[{X: 12000, Y: 10000}, {X: 12000, Y: 30000}]];
 
     /**

+ 3 - 3
docs/.vuepress/components/big/items/virtualWall.vue

@@ -46,10 +46,10 @@ export default class VirtualWallCanvas extends Vue {
         // 只模拟了轮廓数据
         const item2 = new SVirtualWallItem(null, {OutLine: this.outline2});
         scene.addItem(item2);
-            this.view.fitSceneToView();
-            this.view.scalable = false;
-        }
+        this.view.fitSceneToView();
+        this.view.scalable = false;
     }
+}
 </script>
 
 <style scoped>

+ 2 - 2
docs/.vuepress/components/big/items/window.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <canvas id="wall" width="800" height="400"  tabindex="0" />
+        <canvas id="wall" width="800" height="400" tabindex="0"/>
     </div>
 </template>
 
@@ -40,8 +40,8 @@ export default class WindowCanvas extends Vue {
         scene.addItem(item);
         this.view.fitSceneToView();
         this.view.scalable = false;
-        }
     }
+}
 </script>
 
 <style scoped>

+ 206 - 170
docs/.vuepress/components/edit/items/editimage/editimage.vue

@@ -1,12 +1,13 @@
+<!--suppress TypeScriptUnresolvedVariable -->
 <template>
     <div class="edit-line">
         <!-- 所有按钮 -->
         <div class="btn-list">
             <el-button :class="[cmdStatus=='create' ? 'heightLight' : '']" size="small" @click="create">添加</el-button>
             <el-button
-                    :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']"
-                    size="small"
-                    @click="deleteItem"
+                :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']"
+                size="small"
+                @click="deleteItem"
             >删除
             </el-button>
         </div>
@@ -22,27 +23,27 @@
                     <div class="always-item">
                         <span>边框宽:</span>
                         <el-input-number
-                                size="small"
-                                v-model="lineWidth"
-                                @change="changeLineWidth"
-                                :min="1"
-                                :max="50"
+                            size="small"
+                            v-model="lineWidth"
+                            @change="changeLineWidth"
+                            :min="1"
+                            :max="50"
                         ></el-input-number>
                     </div>
                     <div class="always-item">
                         <span>图展示类型:</span>
                         <el-select
-                                style="width:130px"
-                                size="small"
-                                v-model="showType"
-                                @change="changeType"
-                                placeholder="请选择"
+                            style="width:130px"
+                            size="small"
+                            v-model="showType"
+                            @change="changeType"
+                            placeholder="请选择"
                         >
                             <el-option
-                                    v-for="item in options"
-                                    :key="item.value"
-                                    :label="item.label"
-                                    :value="item.value"
+                                v-for="item in options"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
                             ></el-option>
                         </el-select>
                     </div>
@@ -60,18 +61,20 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { SGraphScene, SGraphView, SImageShowType } from "@persagy-web/graph/";
 import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
 import { SColor } from "@persagy-web/draw/";
 //注: 开发者引入 SImageItem 包为: import {SImageItem} from "@persagy-web/edit/";
-import { EditImageItem } from "./../../../../../guides/edit/items/src/EditImageItem";
-import { hexify } from "./../../../../public/until/rgbaUtil";
+import { EditImageItem } from "../../../../../guides/edit/items/src/EditImageItem";
+import { hexify } from "../../../../public/until/rgbaUtil";
+import { Component, Vue } from "vue-property-decorator";
+import { SMouseEvent } from "@persagy-web/base/lib";
 
 /**
  * 编辑图片场景类
  *
- * @author 韩耀龙 <hanyaolong@persagy.com>
+ * @author 郝洁 <haojie@persagy.com>
  */
 class SScene extends SGraphScene {
     /** 命令状态 */
@@ -92,9 +95,8 @@ class SScene extends SGraphScene {
      * @param event   事件
      * @returns 是否处理
      */
-    onMouseDown(event) {
+    onMouseDown(event: SMouseEvent): boolean {
         if (this.cmdStatus == "create" && this.imageItem) { // 创建状态并且 Image 图片存在
-            //todo 缺少注释
             this.imageItem.moveTo(event.x, event.y);
             this.addItem(this.imageItem);
             this.changeStatus("");
@@ -111,173 +113,207 @@ class SScene extends SGraphScene {
     }
 }
 
-export default {
-    name: "EditPolylineItem",
-    data() {
-        return {
-            /** 命令所属的场景类 */
-            scene: null,
-            view: null, //view实例
-            isCreated: false, //是否创建完成
-            cmdStatus: "", //选中状态
-            imageItem: null, //存放创建的Item
-            lineWidth: 1, //border线宽
-            lineColor: "", //border线颜色
-            fillColor: "", //填充色
-            showType: "", //图展示类型
-            options: [
-                {
-                    value: "Full",
-                    label: "铺满"
-                },
-                {
-                    value: "AutoFit",
-                    label: "自适应"
-                },
-                {
-                    value: "Equivalency",
-                    label: "等比缩放"
-                }
-            ]
-        };
-    },
+@Component
+export default class EditImage extends Vue {
+    /** 命令所属的场景类 */
+    scene: SGraphScene | null = null;
+    /** 实例化 view */
+    view: SScene | undefined;
+    /** 是否创建完成 */
+    isCreated: boolean = false;
+    /** 选中状态 */
+    cmdStatus: string = "";
+    /** 存放创建的 Item */
+    imageItem = null;
+    /** border 线宽 */
+    lineWidth: number = 1;
+    /** border 线颜色 */
+    lineColor: string = "";
+    /** 填充色 */
+    fillColor: string = "";
+    /** 图展示类型 */
+    showType: string = "";
+    /** 选项 */
+    options: (string | number)[] = [
+        {
+            value: "Full",
+            label: "铺满"
+        },
+        {
+            value: "AutoFit",
+            label: "自适应"
+        },
+        {
+            value: "Equivalency",
+            label: "等比缩放"
+        }
+    ];
+
     /**
      * 页面挂载
      */
-    mounted() {
+    mounted(): void {
         this.view = new SGraphView("edit_polygon");
         this.scene = new SScene();
         this.view.scene = this.scene;
-        this.scene.changeStatus = this.changeStatus
-    },
-    methods: {
-        /**
-         * 创建对象
-         */
-        create() {
-            this.cmdStatus = "create";
-            this.scene.root.children = [];
-            this.imageItem = new EditImageItem(null);
-            this.imageItem.url =
-                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591685374103&di=cd5a56b2e3f5e12d7145b967afbcfb7a&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201408%2F05%2F20140805191039_cuTPn.jpeg";
-            this.imageItem.width = 100;
-            this.imageItem.height = 100;
-            this.imageItem.moveable = true;
-            this.scene.imageItem = this.imageItem;
-        },
-        deleteItem() {
-            this.cmdStatus = "";
-            this.scene.removeItem(this.imageItem);
-            this.imageItem = null;
-            this.view.update();
-        },
-        edit() {
-            if (this.imageItem) {
-                if (this.imageItem.status == SItemStatus.Normal) {
-                    this.scene.grabItem = this.imageItem;
-                    this.imageItem.status = SItemStatus.Edit;
-                    // this.imageItem.verAndLeve = false;
-                    this.cmdStatus = "edit";
-                } else {
-                    this.imageItem.status = SItemStatus.Normal;
-                    this.scene.grabItem = null;
-                    this.cmdStatus = "";
-                }
-            }
-        },
-        eqDrawLine() {
-            this.cmdStatus = "eqDrawLine";
-            this.scene.root.children = [];
-            //   this.imageItem = new EditPolylineItem(null, []);
-            this.imageItem.verAndLeve = true;
-            this.imageItem.status = SItemStatus.Create;
-            this.imageItem.connect("finishCreated", this, this.finishCreated);
-            this.imageItem.moveable = true;
-            this.scene.addItem(this.imageItem);
-            this.view.update();
-        },
-        // 改变线宽属性
-        changeLineWidth(val) {
-            if (this.imageItem) {
-                this.lineWidth = val;
-                this.imageItem.lineWidth = val;
-            }
-        },
-        // 改变颜色
-        changeColor(val) {
-            if (this.imageItem) {
-                this.lineColor = hexify(val);
-                this.imageItem.strokeColor = new SColor(this.lineColor);
-            }
-        },
-        // 改变填充颜色
-        changeFillColor(val) {
-            if (this.imageItem) {
-                this.fillColor = hexify(val);
-                this.imageItem.fillColor = new SColor(this.lineColor);
-            }
-        },
-        //改变图的展示类型
-        changeType(val) {
-            if (this.imageItem) {
-                this.imageItem.showType = SImageShowType[val];
+        this.scene.changeStatus = this.changeStatus;
+    }
+
+    /**
+     * 创建对象
+     */
+    create() {
+        this.cmdStatus = "create";
+        this.scene.root.children = [];
+        this.imageItem = new EditImageItem(null);
+        this.imageItem.url =
+            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591685374103&di=cd5a56b2e3f5e12d7145b967afbcfb7a&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201408%2F05%2F20140805191039_cuTPn.jpeg";
+        this.imageItem.width = 100;
+        this.imageItem.height = 100;
+        this.imageItem.moveable = true;
+        this.scene.imageItem = this.imageItem;
+    }
+
+    /**
+     * 删除命令
+     */
+    deleteItem() {
+        this.cmdStatus = "";
+        this.scene.removeItem(this.imageItem);
+        this.imageItem = null;
+        this.view.update();
+    }
+
+    /**
+     * 编辑命令
+     */
+    edit() {
+        if (this.imageItem) {
+            if (this.imageItem.status == SItemStatus.Normal) {
+                this.scene.grabItem = this.imageItem;
+                this.imageItem.ststus = SItemStatus.Edit;
+                this.cmdStatus = "edit";
+            } else {
+                this.imageItem.status = SItemStatus.Normal;
+                this.scene.grabItem = null;
+                this.cmdStatus = "";
             }
-        },
-        // 完成创建后的回调
-        changeStatus() {
-            this.cmdStatus = "";
         }
-    },
-    watch: {
-        imageItem(val) {
-            //   if (val) {
-            //     this.lineWidth = val.lineWidth; // 线宽
-            this.showType = this.options[val.showType].value;
-            //   } else {
-            //     this.lineWidth = 0;
-            //   }
-        },
-        cmdStatus(val) {
-            this.scene.cmdStatus = val;
+    }
+
+// todo 作用 ?
+    eqDrawLine() {
+        this.cmdStatus = "eqDrawLine";
+        this.scene.root.children = [];
+        //   this.imageItem = new EditPolylineItem(null, []);
+        this.imageItem.verAndLeve = true;
+        this.imageItem.status = SItemStatus.Create;
+        this.imageItem.connect("finishCreated", this, this.finishCreated);
+        this.imageItem.moveable = true;
+        this.scene.addItem(this.imageItem);
+        this.view.update();
+    }
+
+    /**
+     * 改变线宽属性
+     */
+    changeLineWidth(val) {
+        if (this.imageItem) {
+            this.lineWidth = val;
+            this.imageItem.lineWidth = val;
         }
     }
-};
-</script>
 
-<style scoped lang="less">
-.edit-line {
-    width: 100%;
-    height: 500px;
+    /**
+     * 改变颜色
+     */
+    changeColor(val: any): void {
+        if (this.imageItem) {
+            this.lineColor = hexify(val);
+            this.imageItem.strokeColor = new SColor(this.lineColor);
+        }
+    }
 
-    .content {
-        display: flex;
-        justify-content: flex-start;
+    /**
+     * 改变填充颜色
+     */
+    changeFillColor(val: any) {
+        if (this.imageItem) {
+            this.fillColor = hexify(val);
+            this.imageItem.fillColor = new SColor(this.lineColor);
+        }
+    }
 
-        .left {
-            margin-right: 20px;
+    /**
+     * 改变图的展示类型
+     */
+    changeType(val) {
+        if (this.imageItem) {
+            this.imageItem.showType = SImageShowType[val];
         }
+    }
 
-        .line-property {
-            width: 300px;
-            margin-top: 20px;
+    /**
+     * 完成创建后的回调
+     */
+    changeStatus() {
+        this.cmdStatus = "";
+    }
+
+    /**
+     *  监听
+     */
+    // @Watch("imageItem")
+    // imageItem(val) {
+    //     //   if (val) {
+    //     //     this.lineWidth = val.lineWidth; // 线宽
+    //     this.showType = this.options[val.showType].value;
+    //     //   } else {
+    //     //     this.lineWidth = 0;
+    //     //   }
+    // }
+    //
+    // cmdStatus(val) {
+    //     this.scene.cmdStatus = val;
+    // }
+}
+
+</script>
+
+<style scoped lang="less">
+    .edit-line {
+        width: 100%;
+        height: 500px;
 
-            .always {
-                width: 100%;
-                height: 100%;
+        .content {
+            display: flex;
+            justify-content: flex-start;
+
+            .left {
+                margin-right: 20px;
             }
 
-            .always-item {
-                display: flex;
-                margin-top: 10px;
-                justify-content: space-between;
+            .line-property {
+                width: 300px;
+                margin-top: 20px;
+
+                .always {
+                    width: 100%;
+                    height: 100%;
+                }
+
+                .always-item {
+                    display: flex;
+                    margin-top: 10px;
+                    justify-content: space-between;
+                }
             }
         }
-    }
 
-    .heightLight {
-        color: #409eff;
-        border-color: #c6e2ff;
-        background-color: #ecf5ff;
+        .heightLight {
+            color: #409eff;
+            border-color: #c6e2ff;
+            background-color: #ecf5ff;
+        }
     }
-}
 </style>

+ 3 - 0
docs/.vuepress/components/scene/Undo1.vue

@@ -22,8 +22,11 @@ import { SPoint } from "@persagy-web/draw/lib";
  * @author 郝洁 <haojie@persagy.com>
  */
 class RectItem extends SGraphItem {
+    /** 宽度 */
     width = 100;
+    /** 高度 */
     height = 100;
+    /** 图 Id */
     id = new Date().getTime() + '';
 
     /**