Quellcode durchsuchen

feat:新增bus.js完成基本联动

YaolongHan vor 4 Jahren
Ursprung
Commit
d8d1ffcc58

+ 5 - 0
package-lock.json

@@ -11586,6 +11586,11 @@
         "svg-to-vue": "^0.6.0"
         "svg-to-vue": "^0.6.0"
       }
       }
     },
     },
+    "vue-swatches": {
+      "version": "2.1.0",
+      "resolved": "http://192.168.200.80:8081/repository/npm-saga/vue-swatches/-/vue-swatches-2.1.0.tgz",
+      "integrity": "sha512-JbSomg1penZvgHL24blA3PDgji7LPVGGSFlMo7F+jYVcxooemadI3gkMwFJVIPMikG5g160Mq+Lbph/lqFjzzw=="
+    },
     "vue-template-compiler": {
     "vue-template-compiler": {
       "version": "2.6.11",
       "version": "2.6.11",
       "resolved": "https://registry.npm.taobao.org/vue-template-compiler/download/vue-template-compiler-2.6.11.tgz",
       "resolved": "https://registry.npm.taobao.org/vue-template-compiler/download/vue-template-compiler-2.6.11.tgz",

+ 2 - 1
package.json

@@ -11,8 +11,8 @@
     "@saga-web/base": "2.1.16",
     "@saga-web/base": "2.1.16",
     "@saga-web/big": "1.0.31",
     "@saga-web/big": "1.0.31",
     "@saga-web/draw": "2.1.88",
     "@saga-web/draw": "2.1.88",
-    "@saga-web/graph": "2.1.75",
     "@saga-web/feng-map": "1.0.7",
     "@saga-web/feng-map": "1.0.7",
+    "@saga-web/graph": "2.1.75",
     "@saga-web/topology": "1.0.84",
     "@saga-web/topology": "1.0.84",
     "ant-design-vue": "^1.6.0",
     "ant-design-vue": "^1.6.0",
     "core-js": "^3.6.4",
     "core-js": "^3.6.4",
@@ -20,6 +20,7 @@
     "vue-class-component": "^7.2.3",
     "vue-class-component": "^7.2.3",
     "vue-property-decorator": "^8.4.1",
     "vue-property-decorator": "^8.4.1",
     "vue-router": "^3.1.6",
     "vue-router": "^3.1.6",
+    "vue-swatches": "^2.1.0",
     "vuex": "^3.1.3"
     "vuex": "^3.1.3"
   },
   },
   "devDependencies": {
   "devDependencies": {

+ 3 - 0
src/bus.js

@@ -0,0 +1,3 @@
+import Vue from 'vue'
+const bus = new Vue()
+export default bus

+ 47 - 29
src/components/baseEditer.vue

@@ -11,12 +11,18 @@ import { SFengParser } from "@saga-web/feng-map";
 import { SFloorParser } from "@saga-web/big";
 import { SFloorParser } from "@saga-web/big";
 import { FloorView } from "./../lib/FloorView";
 import { FloorView } from "./../lib/FloorView";
 import { EditScence } from "./mapClass/EditScence";
 import { EditScence } from "./mapClass/EditScence";
+import bus from "@/bus";
 export default {
 export default {
   props: {
   props: {
     cmd: {
     cmd: {
       type: Number,
       type: Number,
       default: 0,
       default: 0,
       required: false
       required: false
+    },
+    changeTextMsg: {
+      type: String,
+      default: "",
+      required: false
     }
     }
   },
   },
   data() {
   data() {
@@ -35,43 +41,44 @@ export default {
   },
   },
   mounted() {
   mounted() {
     this.canvasWidth = this.$refs.graphy.offsetWidth;
     this.canvasWidth = this.$refs.graphy.offsetWidth;
-    this.canvasHeight = this.$refs.graphy.offsetHeight-10;
+    this.canvasHeight = this.$refs.graphy.offsetHeight - 10;
     this.init();
     this.init();
+    // 挂在bus
+    this.getBus();
   },
   },
   methods: {
   methods: {
     init() {
     init() {
       document.getElementById(`canvas`).focus();
       document.getElementById(`canvas`).focus();
       this.clearGraphy();
       this.clearGraphy();
       this.scene = new EditScence();
       this.scene = new EditScence();
-      // // 选择绑定选额item事件
-      this.scene.selectContainer.connect("listChange", this, this.listChange);
-      this.fmap = new SFengParser(
-        "fengMap",
-        this.mapServerURL,
-        this.key,
-        this.appName,
-        null
-      );
-      this.fmap.parseData("1001724_29", 6, res => {
-        this.fParser = new SFloorParser(null);
-        this.fParser.parseData(res);
-        this.fParser.wallList.forEach(t => this.scene.addItem(t));
-        this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
-        this.fParser.doorList.forEach(t => this.scene.addItem(t));
-        this.fParser.columnList.forEach(t => this.scene.addItem(t));
-        this.fParser.casementList.forEach(t => this.scene.addItem(t));
-        this.fParser.spaceList.forEach(t => {
-          t.selectable = true
-          // t.connect("click", this, this.spaceClick);
-          this.scene.addItem(t);
-        });
-        this.view.scene = this.scene;
-        this.view.fitSceneToView();
-      });
+      // this.fmap = new SFengParser(
+      //   "fengMap",
+      //   this.mapServerURL,
+      //   this.key,
+      //   this.appName,
+      //   null
+      // );
+      // this.fmap.parseData("1001724_29", 6, res => {
+      //   this.fParser = new SFloorParser(null);
+      //   this.fParser.parseData(res);
+      //   this.fParser.wallList.forEach(t => this.scene.addItem(t));
+      //   this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
+      //   this.fParser.doorList.forEach(t => this.scene.addItem(t));
+      //   this.fParser.columnList.forEach(t => this.scene.addItem(t));
+      //   this.fParser.casementList.forEach(t => this.scene.addItem(t));
+      //   this.fParser.spaceList.forEach(t => {
+      //     t.selectable = true;
+      //     // t.connect("click", this, this.spaceClick);
+      //     this.scene.addItem(t);
+      //   });
+      this.view.scene = this.scene;
+      this.view.fitSceneToView();
+      // });
+      this.scene.emitChange = this.emitChange;
     },
     },
     // 监听变化
     // 监听变化
-    listChange(itemList) {
-      this.$emit("changeFocusItem", itemList.itemList);
+    emitChange(itemMsg) {
+      this.$emit("changeFocusItem", itemMsg);
     },
     },
     clearGraphy() {
     clearGraphy() {
       if (this.view) {
       if (this.view) {
@@ -80,6 +87,17 @@ export default {
       }
       }
       this.view = new FloorView("canvas");
       this.view = new FloorView("canvas");
       document.getElementById("canvas").focus();
       document.getElementById("canvas").focus();
+    },
+    getBus() {
+      bus.$on("changeText", val => {
+        this.scene.updatedText(val);
+      });
+      bus.$on("changeFont", val => {
+        this.scene.updatedFontSize(val);
+      });
+      bus.$on("changeLineWidth", val => {
+        this.scene.updatedLineWidth(val);
+      });
     }
     }
   },
   },
   watch: {
   watch: {
@@ -103,7 +121,7 @@ export default {
 </script>
 </script>
 <style lang="less" scoped>
 <style lang="less" scoped>
 #baseEditer {
 #baseEditer {
-  background: #F7F9FA;
+  background: #f7f9fa;
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
   // overflow: hidden;
   // overflow: hidden;

+ 180 - 125
src/components/edit/attr_select.vue

@@ -1,55 +1,67 @@
 <template>
 <template>
   <div>
   <div>
-    <!--网格-->
-    <div class="attr-select" v-if="type==='网格'">
+    <!--选中-->
+    <div class="attr-select" v-if="type==='line'">
       <section class="grid">
       <section class="grid">
-        <a-checkbox @change="onChange">
-          网格
-        </a-checkbox>
-        <div class="grid-content">网格精度
-          <a-select default-value="10" style="width: 60%" @change="handleChange" :disabled="precision">
-            <a-select-option v-for="item in precisionList" :value="item.value" :key="item.value">
-              {{item.value}}
-            </a-select-option>
-          </a-select>
-        </div>
+        <section class="grid">
+          外观
+          <div class="grid-content">
+            线宽
+            <a-input-number
+              v-model="lineWidth"
+              :min="1"
+              @change="changeLineWidth"
+              style="width: 168px"
+            />
+          </div>
+        </section>
       </section>
       </section>
     </div>
     </div>
     <!--文字内容-->
     <!--文字内容-->
-    <div class="attr-select" v-if="type==='文字内容'">
-      <section class="grid">文字内容
+    <div class="attr-select" v-if="type==='text'">
+      <section class="grid">
+        文字内容
         <div class="grid-content">
         <div class="grid-content">
-          <a-textarea placeholder="textarea with clear icon" allow-clear @change="changeTextArea" :rows="4"/>
+          <a-textarea
+            placeholder="textarea with clear icon"
+            v-model="textMsg"
+            allow-clear
+            @change="changeTextArea"
+            :rows="4"
+          />
         </div>
         </div>
       </section>
       </section>
+      <div class="attr-select" v-if="type==='text'">
+        <section class="grid">
+          外观
+          <div class="grid-content">
+            字号
+            <a-input-number v-model="fontSize" :min="1" @change="changeFont" style="width: 168px" />
+          </div>
+        </section>
+      </div>
     </div>
     </div>
     <!--图片-->
     <!--图片-->
-    <div class="attr-select" v-if="type==='图片'">
-      <section class="grid">图片
+    <div class="attr-select" v-if="type==='images'">
+      <section class="grid">
+        图片
         <div class="grid-content">
         <div class="grid-content">
           <a-upload-dragger
           <a-upload-dragger
-              name="file"
-              :multiple="true"
-              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-              @change="changeImage"
+            name="file"
+            :multiple="true"
+            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+            @change="changeImage"
           >
           >
             <p class="icon-image">
             <p class="icon-image">
-              <a-icon type="cloud-upload"/>
+              <a-icon type="cloud-upload" />
             </p>
             </p>
-            <p class="ant-upload-text">将图片拖动到这里替换 </p>
+            <p class="ant-upload-text">将图片拖动到这里替换</p>
             <p class="ant-upload-hint">本地上传</p>
             <p class="ant-upload-hint">本地上传</p>
           </a-upload-dragger>
           </a-upload-dragger>
         </div>
         </div>
       </section>
       </section>
     </div>
     </div>
-    <!--外观-->
-    <div class="attr-select" v-if="type==='外观'">
-      <section class="grid">外观
-        <div class="grid-content">线宽
-          <a-input-number v-model="numberValue" :min="1" @change="changeNumber" style="width: 168px"/>
-        </div>
-      </section>
-    </div>
+
     <!--针对“设备/位置/管线/分区”属性示例-->
     <!--针对“设备/位置/管线/分区”属性示例-->
     <div class="attr-select">
     <div class="attr-select">
       <section class="grid">
       <section class="grid">
@@ -57,138 +69,181 @@
         <!--        v-if -> 编辑设备/区域/管道    -->
         <!--        v-if -> 编辑设备/区域/管道    -->
         <a-button type="link" class="edit-option-btn">{{`编辑设备`}}</a-button>
         <a-button type="link" class="edit-option-btn">{{`编辑设备`}}</a-button>
         <div class="grid-content">
         <div class="grid-content">
-          <a-input/>
+          <a-input />
         </div>
         </div>
-        <div class="grid-content">字号
-          <a-input-number v-model="numberValue" :min="1" @change="changeNumber" style="width: 168px"/>
+        <div class="grid-content">
+          字号
+          <a-input-number
+            v-model="numberValue"
+            :min="1"
+            @change="changeNumber"
+            style="width: 168px"
+          />
         </div>
         </div>
-        <div class="grid-content" v-if="type ==='设备'">数量
-          <a-input-number v-model="numberValue" :min="1" @change="changeNumber" style="width: 218px"/>
+        <div class="grid-content" v-if="type ==='equipment'">
+          数量
+          <a-input-number
+            v-model="numberValue"
+            :min="1"
+            @change="changeNumber"
+            style="width: 218px"
+          />
         </div>
         </div>
-        <div class="grid-content" v-if="type ==='管线'">线宽
-          <a-input-number v-model="numberValue" :min="1" @change="changeNumber" style="width: 218px"/>
+        <div class="grid-content" v-if="type ==='pipeline'">
+          线宽
+          <a-input-number
+            v-model="numberValue"
+            :min="1"
+            @change="changeNumber"
+            style="width: 218px"
+          />
         </div>
         </div>
       </section>
       </section>
     </div>
     </div>
     <!--设备/工程信息化ID/工程信息化中的位置类型-->
     <!--设备/工程信息化ID/工程信息化中的位置类型-->
-    <div class="attr-select">
-      <section class="grid">
-        <!--        v-if -> 设备/工程信息化ID/工程信息化中的位置类型    -->
-        <span>{{`设备`}}</span>
+    <!-- <div class="attr-select">
+    <section class="grid">-->
+    <!--        v-if -> 设备/工程信息化ID/工程信息化中的位置类型    -->
+    <!-- <span>{{`设备`}}</span>
         <a-button type="link" class="edit-option-btn" @click="handleEdit">选择编辑</a-button>
         <a-button type="link" class="edit-option-btn" @click="handleEdit">选择编辑</a-button>
         <div class="grid-content">
         <div class="grid-content">
           <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD4</a-card>
           <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD4</a-card>
           <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD</a-card>
           <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD</a-card>
         </div>
         </div>
       </section>
       </section>
-    </div>
+    </div>-->
     <!--    快捷操作提示-->
     <!--    快捷操作提示-->
     <div style="position: fixed;bottom: 0;width: 280px;">
     <div style="position: fixed;bottom: 0;width: 280px;">
       <a-collapse :bordered="false" expand-icon-position="right">
       <a-collapse :bordered="false" expand-icon-position="right">
         <template #expandIcon="props">
         <template #expandIcon="props">
-          <a-icon type="caret-up" :rotate="props.isActive ? 180 : 0"/>
+          <a-icon type="caret-up" :rotate="props.isActive ? 180 : 0" />
         </template>
         </template>
         <a-collapse-panel key="1" header="键盘操作提示" :style="customStyle">
         <a-collapse-panel key="1" header="键盘操作提示" :style="customStyle">
           <p v-for="item in keyboardOperation" :key="item.value">{{item.value}}</p>
           <p v-for="item in keyboardOperation" :key="item.value">{{item.value}}</p>
         </a-collapse-panel>
         </a-collapse-panel>
       </a-collapse>
       </a-collapse>
     </div>
     </div>
-    <editDialog ref="dialog"/>
+    <editDialog ref="dialog" />
   </div>
   </div>
 </template>
 </template>
 
 
 <script>
 <script>
-    import editDialog from './edit-dialog'
-
-    export default {
-        name: "attr_select",
-        props: ['type'],
-        components: {editDialog},
-        data() {
-            return {
-                precisionList: [
-                    {value: 10}, {value: 20}, {value: 30},
-                ],
-                precision: true,
-                numberValue: 4,
-                customStyle: 'background: #fff;overflow: hidden;  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);border:0',
-                keyboardOperation: [
-                    {value: '拖动画布:'}, {value: '加选对象:'}, {value: '确认操作:'}, {value: '取消对象:'},
-                ],
-            }
-        },
-        methods: {
-            onChange(e) {
-                this.precision = e.target.checked === true ? false : true
-            },
-            handleChange(value) {
-                console.log(`selected ${value}`);
-            },
-            changeNumber(value) {
-                console.log(value)
-            },
-            changeTextArea(value) {
-                console.log(value)
-
-            },
-            changeImage(info) {
-                const status = info.file.status;
-                if (status !== 'uploading') {
-                    console.log(info.file, info.fileList);
-                }
-                if (status === 'done') {
-                    this.$message.success(`${info.file.name} file uploaded successfully.`);
-                } else if (status === 'error') {
-                    this.$message.error(`${info.file.name} file upload failed.`);
-                }
-            },
-            handleEdit() {
-                this.$refs.dialog.showModal()
-            }
+import editDialog from "./edit-dialog";
+import bus from "@/bus";
+export default {
+  name: "attr_select",
+  props: ["type", "focusItemList"],
+  components: { editDialog },
+  data() {
+    return {
+      precisionList: [{ value: 10 }, { value: 20 }, { value: 30 }],
+      precision: true,
+      customStyle:
+        "background: #fff;overflow: hidden;  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);border:0",
+      keyboardOperation: [
+        { value: "拖动画布:" },
+        { value: "加选对象:" },
+        { value: "确认操作:" },
+        { value: "取消对象:" }
+      ],
+      numberValue: 3,
+      fontSize: 12, //字体大小
+      lineWidth: 0,
+      color: "", //字体颜色
+      textMsg: "" //
+    };
+  },
+  methods: {
+    onChange(e) {
+      this.precision = e.target.checked === true ? false : true;
+    },
+    handleChange() {
+      console.log(`selected ${value}`);
+    },
+    changeNumber() {
+      bus.$emit("changeFont", this.fontSize);
+    },
+    // 改变字体大小
+    changeFont() {
+      bus.$emit("changeFont", this.fontSize);
+    },
+    // 改变线宽
+    changeLineWidth() {
+      bus.$emit("changeLineWidth", this.lineWidth);
+    },
+    // 改变文案
+    changeTextArea() {
+      bus.$emit("changeText", this.textMsg);
+    },
+    changeImage(info) {
+      const status = info.file.status;
+      if (status !== "uploading") {
+        console.log(info.file, info.fileList);
+      }
+      if (status === "done") {
+        this.$message.success(`${info.file.name} file uploaded successfully.`);
+      } else if (status === "error") {
+        this.$message.error(`${info.file.name} file upload failed.`);
+      }
+    },
+    handleEdit() {
+      this.$refs.dialog.showModal();
+    }
+  },
+  watch: {
+    focusItemList: function(newval) {
+      const Item = newval.itemList[0];
+      if (newval.itemList.length == 1) {
+        if (newval.itemType == "text") {
+          this.textMsg = Item.text;
+          this.fontSize = Item.font.size;
+        } else if (newval.itemType == "line") {
+          console.log('line',Item.lineWidth)
+          this.lineWidth = Item.lineWidth;
         }
         }
+      }
     }
     }
+  }
+};
 </script>
 </script>
 
 
 <style scoped lang="less">
 <style scoped lang="less">
+.attr-select {
+  border-top: 1px solid #c3c7cb;
+  margin-top: 30px;
 
 
-  .attr-select {
-    border-top: 1px solid #c3c7cb;
-    margin-top: 30px;
-
-    .grid {
-
-      margin: 10px 15px;
-    }
-
-    .grid-content {
-      margin-top: 10px;
-    }
+  .grid {
+    margin: 10px 15px;
+  }
 
 
-    .icon-image {
-      font-size: 25px;
-    }
+  .grid-content {
+    margin-top: 10px;
+  }
 
 
-    .edit-option-btn {
-      float: right;
-      margin-top: -5px;
-    }
+  .icon-image {
+    font-size: 25px;
+  }
 
 
-    .attr-card {
-      width: 250px;
-      margin-bottom: 10px;
-      white-space: normal;
-      box-shadow: 0px 2px 6px 0px rgba(31, 36, 41, 0.05);
-      border-radius: 4px;
-    }
+  .edit-option-btn {
+    float: right;
+    margin-top: -5px;
+  }
 
 
-    .ant-upload.ant-upload-drag p.ant-upload-text {
-      font-size: 14px;
-      color: #C3C7CB;
-    }
+  .attr-card {
+    width: 250px;
+    margin-bottom: 10px;
+    white-space: normal;
+    box-shadow: 0px 2px 6px 0px rgba(31, 36, 41, 0.05);
+    border-radius: 4px;
+  }
 
 
-    .ant-upload.ant-upload-drag p.ant-upload-hint {
-      color: #0091FF;
-    }
+  .ant-upload.ant-upload-drag p.ant-upload-text {
+    font-size: 14px;
+    color: #c3c7cb;
+  }
 
 
+  .ant-upload.ant-upload-drag p.ant-upload-hint {
+    color: #0091ff;
   }
   }
+}
 </style>
 </style>

+ 26 - 25
src/components/edit/right_toolbar.vue

@@ -4,7 +4,7 @@
     <a-tabs default-active-key="1" @change="callback">
     <a-tabs default-active-key="1" @change="callback">
       <a-tab-pane key="1" tab="属性">
       <a-tab-pane key="1" tab="属性">
         <div class="property">
         <div class="property">
-          <ul class="formatting">
+          <!-- <ul class="formatting">
             <li v-for="(item,key) in poistionList" :key="key">
             <li v-for="(item,key) in poistionList" :key="key">
               <img
               <img
                 v-show="!item.disable"
                 v-show="!item.disable"
@@ -17,7 +17,7 @@
                 alt
                 alt
               />
               />
             </li>
             </li>
-          </ul>
+          </ul> -->
           <ul class="position">
           <ul class="position">
             <li v-for="(item,i) in msgList" :key="i">
             <li v-for="(item,i) in msgList" :key="i">
               <a-input
               <a-input
@@ -32,7 +32,7 @@
               <img class="lock" :src="require(`./../../assets/images/t-lock.png`)" alt />
               <img class="lock" :src="require(`./../../assets/images/t-lock.png`)" alt />
             </li>
             </li>
           </ul>
           </ul>
-          <attrSelect type="外观" />
+          <attrSelect :type="attrType" :focusItemList="focusItemList"/>
         </div>
         </div>
       </a-tab-pane>
       </a-tab-pane>
       <a-tab-pane key="2" tab="元素" force-render>
       <a-tab-pane key="2" tab="元素" force-render>
@@ -50,7 +50,7 @@
   </div>
   </div>
 </template>
 </template>
 <script>
 <script>
-  import attrSelect from "@/components/edit/attr_select";
+import attrSelect from "@/components/edit/attr_select";
 const poistionList = [
 const poistionList = [
   {
   {
     name: "水平调整",
     name: "水平调整",
@@ -115,7 +115,7 @@ const msgList = [
     unit: "y"
     unit: "y"
   },
   },
   {
   {
-    msg: "",
+    msg: "",
     disable: true,
     disable: true,
     name: "",
     name: "",
     unit: ""
     unit: ""
@@ -137,7 +137,7 @@ const msgList = [
 export default {
 export default {
   props: {
   props: {
     focusItemList: {
     focusItemList: {
-      type: Array,
+      type: Object,
       default: function() {
       default: function() {
         return [];
         return [];
       },
       },
@@ -150,34 +150,35 @@ export default {
   data() {
   data() {
     return {
     return {
       poistionList,
       poistionList,
-      msgList
+      msgList,
+      attrType: ""
     };
     };
   },
   },
   methods: {
   methods: {
     callback(key) {
     callback(key) {
       console.log(key);
       console.log(key);
     },
     },
-    onSearch() {}
+    onSearch() {},
   },
   },
   watch: {
   watch: {
     focusItemList: function(newVal) {
     focusItemList: function(newVal) {
-      console.log(newVal[0]);
-      this.msgList.forEach(item => {
-        if (item.name == "X") {
-          item.msg = newVal[0].minX;
-          // item.msg = newVal[0].mapToScene(0, 0).x;
-        }
-        if (item.name == "Y") {
-          item.msg = newVal[0].minY;
-          // item.msg = newVal[0].mapToScene(0, 0).y;
-        }
-        if (item.name == "Width") {
-          item.msg = newVal[0].boundingRect().width;
-        }
-        if (item.name == "Height") {
-          item.msg = newVal[0].boundingRect().height;
-        }
-      });
+      this.attrType = newVal.itemType ?  newVal.itemType : "choice"
+      // this.msgList.forEach(item => {
+      //   if (item.name == "X") {
+      //     item.msg = newVal[0].minX;
+      //     // item.msg = newVal[0].mapToScene(0, 0).x;
+      //   }
+      //   if (item.name == "Y") {
+      //     item.msg = newVal[0].minY;
+      //     // item.msg = newVal[0].mapToScene(0, 0).y;
+      //   }
+      //   if (item.name == "Width") {
+      //     item.msg = newVal[0].boundingRect().width;
+      //   }
+      //   if (item.name == "Height") {
+      //     item.msg = newVal[0].boundingRect().height;
+      //   }
+      // });
     }
     }
   }
   }
 };
 };

+ 102 - 8
src/components/mapClass/editScence.ts

@@ -1,10 +1,11 @@
 import { SMouseEvent, SUndoStack } from "@saga-web/base";
 import { SMouseEvent, SUndoStack } from "@saga-web/base";
 import { SGraphScene } from '@saga-web/graph/lib';
 import { SGraphScene } from '@saga-web/graph/lib';
-import { SPoint } from '@saga-web/draw/lib';
+import { SPoint, SFont } from '@saga-web/draw/lib';
 import { SFloorParser, SImageItem, STextItem, SLineItem, SPolylineItem, SItemStatus, ItemOrder } from "@saga-web/big";
 import { SFloorParser, SImageItem, STextItem, SLineItem, SPolylineItem, SItemStatus, ItemOrder } from "@saga-web/big";
 import { SGraphItem, SGraphPointListInsert, SGraphPointListDelete, SGraphPointListUpdate, SGraphAddCommand } from "@saga-web/graph/lib";
 import { SGraphItem, SGraphPointListInsert, SGraphPointListDelete, SGraphPointListUpdate, SGraphAddCommand } from "@saga-web/graph/lib";
 import { SPolygonItem } from "./SPolygonItem";
 import { SPolygonItem } from "./SPolygonItem";
 import { TipelineItem } from "@/lib/TipelineItem";
 import { TipelineItem } from "@/lib/TipelineItem";
+import { SImgTextItem } from "@/lib/SImgTextItem"
 
 
 
 
 /**
 /**
@@ -40,20 +41,54 @@ export class EditScence extends SGraphScene {
     };
     };
     /** 当前选中焦点Item */
     /** 当前选中焦点Item */
     focusItem: SGraphItem | null = null;
     focusItem: SGraphItem | null = null;
-
     constructor() {
     constructor() {
         super();
         super();
-
+        // // 选择绑定选额item事件
+        this.selectContainer.connect("listChange", this, this.listChange);
+    }
+    /**
+     * 监听变化
+     * @param obj 变化后的对象
+     */
+    listChange(obj: any) {
+        let itemType: string = ''
+        if (obj.itemList[0] instanceof STextItem) {
+            itemType = 'text'
+        } else if (obj.itemList[0] instanceof SImageItem) {
+            itemType = 'images'
+        } else if (obj.itemList[0] instanceof SLineItem) {
+            itemType = 'line'
+        } else if (obj.itemList[0] instanceof SPolylineItem) {
+            itemType = 'pipeline'
+        } else if (obj.itemList[0] instanceof SImgTextItem) {
+            itemType = 'equipment'
+        }else{
+            itemType = ''
+        };
+        if (obj.itemList.length == 1) {
+            // 获取聚焦item
+            this.focusItem = obj.itemList[0]
+        }
+        let msg = {
+            itemList: obj.itemList,
+            itemType,
+        }
+        this.emitChange(msg)
     }
     }
+    emitChange(msg: any) {
 
 
+    }
     /**
     /**
      * 增加线段item
      * 增加线段item
      */
      */
+
     addLine(event: SMouseEvent): boolean {
     addLine(event: SMouseEvent): boolean {
         const item = new SLineItem(null, new SPoint(event.x, event.y));
         const item = new SLineItem(null, new SPoint(event.x, event.y));
         this.addItem(item);
         this.addItem(item);
         item.connect("finishCreated", this, this.finishCreated);
         item.connect("finishCreated", this, this.finishCreated);
-        item.zOrder = ItemOrder.lineOrder
+        item.zOrder = ItemOrder.lineOrder;
+        item.moveable = true;
+        item.selectable = true;
         this.grabItem = item;
         this.grabItem = item;
         this.undoStack.push(new SGraphAddCommand(this, item));
         this.undoStack.push(new SGraphAddCommand(this, item));
         // item.connect("onMove", this, this.onItemMove.bind(this));
         // item.connect("onMove", this, this.onItemMove.bind(this));
@@ -64,9 +99,12 @@ export class EditScence extends SGraphScene {
      * 增加折线item
      * 增加折线item
      */
      */
     addPolylineItem(event: SMouseEvent): boolean {
     addPolylineItem(event: SMouseEvent): boolean {
+
         const point = new SPoint(event.x, event.y)
         const point = new SPoint(event.x, event.y)
         const item = new TipelineItem(null, [point]);
         const item = new TipelineItem(null, [point]);
         //设置状态
         //设置状态
+        item.moveable = true;
+        item.selectable = true;
         item.status = SItemStatus.Create;
         item.status = SItemStatus.Create;
         item.zOrder = ItemOrder.polylineOrder
         item.zOrder = ItemOrder.polylineOrder
         this.addItem(item);
         this.addItem(item);
@@ -74,13 +112,13 @@ export class EditScence extends SGraphScene {
         // this.undoStack.push(new SGraphAddCommand(this, item));
         // this.undoStack.push(new SGraphAddCommand(this, item));
         this.grabItem = item;
         this.grabItem = item;
         this.focusItem = item;
         this.focusItem = item;
-        console.log(this)
         return true
         return true
     }
     }
 
 
     /**
     /**
      * 增加多边形item
      * 增加多边形item
      */
      */
+
     addPolygonItem(event: SMouseEvent): void {
     addPolygonItem(event: SMouseEvent): void {
         //创建item
         //创建item
         const Polylines = new SPolygonItem(null);
         const Polylines = new SPolygonItem(null);
@@ -90,6 +128,7 @@ export class EditScence extends SGraphScene {
         const point = new SPoint(event.x, event.y);
         const point = new SPoint(event.x, event.y);
         Polylines.zOrder = ItemOrder.polygonOrder;
         Polylines.zOrder = ItemOrder.polygonOrder;
         Polylines.setPointList = [point];
         Polylines.setPointList = [point];
+        Polylines.moveable = true;
         this.addItem(Polylines);
         this.addItem(Polylines);
         Polylines.connect("finishCreated", this, this.finishCreated);
         Polylines.connect("finishCreated", this, this.finishCreated);
         this.grabItem = Polylines;
         this.grabItem = Polylines;
@@ -105,6 +144,7 @@ export class EditScence extends SGraphScene {
         item.url = url;
         item.url = url;
         item.zOrder = ItemOrder.imageOrder;
         item.zOrder = ItemOrder.imageOrder;
         item.selectable = true;
         item.selectable = true;
+        item.moveable = true;
         item.moveTo(event.x, event.y);
         item.moveTo(event.x, event.y);
         this.addItem(item);
         this.addItem(item);
         this.grabItem == null;
         this.grabItem == null;
@@ -119,6 +159,7 @@ export class EditScence extends SGraphScene {
         const item = new STextItem(null, '请在右侧属性栏输入文字!');
         const item = new STextItem(null, '请在右侧属性栏输入文字!');
         item.moveTo(event.x, event.y);
         item.moveTo(event.x, event.y);
         item.selectable = true;
         item.selectable = true;
+        item.moveable = true;
         item.zOrder = ItemOrder.textOrder;
         item.zOrder = ItemOrder.textOrder;
         this.addItem(item);
         this.addItem(item);
         this.grabItem == null
         this.grabItem == null
@@ -140,8 +181,61 @@ export class EditScence extends SGraphScene {
     }
     }
 
 
     /**
     /**
-    * 删除指定item
-    */
+     * 更改文本对应属性
+     * @param str string 文字内容
+     */
+    updatedText(str: string): void {
+        if (this.focusItem) {
+            const old = this.focusItem.text;
+            this.focusItem.text = str;
+            this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "text", old, str));
+        }
+    }
+
+    /**
+     * 更改文本fontSize属性
+     * @param size number 文字大小
+     */
+    updatedFontSize(size: number): void {
+        if (this.focusItem) {
+            let old = new SFont(this.focusItem.font);
+            let font = new SFont(this.focusItem.font);
+            font.size = size;
+            this.focusItem.font = font;
+            this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "font", old, font));
+
+        }
+    }
+
+    /**
+     * 更改线宽属性
+     * @param lineWidth number 线宽大小
+     */
+    updatedLineWidth(lineWidth: number): void {
+        if (this.focusItem) {
+            // let old = new SFont(this.focusItem.font);
+            // let font = new SFont(this.focusItem.font);
+            // font.size = size;
+            this.focusItem.lineWidth = lineWidth;
+            // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "font", old, font));
+        }
+    }
+
+    /**
+     * 更改文本颜色属性
+     * @param str string 颜色
+     */
+    updatedColor(str: string): void {
+        if (this.focusItem.color) {
+            let old = this.focusItem.color;
+            this.focusItem.color = color;
+            this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
+        }
+    }
+
+    /**
+     * 删除指定item
+     */
     deleiteItemStatus(): void {
     deleiteItemStatus(): void {
 
 
     }
     }
@@ -157,6 +251,7 @@ export class EditScence extends SGraphScene {
      * 提取item
      * 提取item
      */
      */
     extractItem(): void {
     extractItem(): void {
+
     }
     }
 
 
     /**
     /**
@@ -182,7 +277,6 @@ export class EditScence extends SGraphScene {
      * 完成事件创建的回调函数
      * 完成事件创建的回调函数
      */
      */
     finishCreated(item: any) {
     finishCreated(item: any) {
-        console.log(3333333333333)
         this.setCmd = 0;
         this.setCmd = 0;
         this.focusItem = item;
         this.focusItem = item;
         this.selectContainer.toggleItem(item)
         this.selectContainer.toggleItem(item)

+ 2 - 2
src/views/editer.vue

@@ -36,7 +36,7 @@ export default {
   data() {
   data() {
     return {
     return {
       cmd: 0,
       cmd: 0,
-      focusItemList:null
+      focusItemList:null,
     };
     };
   },
   },
   components: {
   components: {
@@ -57,7 +57,7 @@ export default {
     },
     },
     changeFocusItem(item) {
     changeFocusItem(item) {
       this.focusItemList = item;
       this.focusItemList = item;
-    }
+    },
   }
   }
 };
 };
 </script>
 </script>

+ 2 - 1
vue.config.js

@@ -25,5 +25,6 @@ module.exports = {
             .use('vue-svg-loader')
             .use('vue-svg-loader')
             .loader('vue-svg-loader');
             .loader('vue-svg-loader');
     },
     },
-    lintOnSave: false
+    lintOnSave: false,
+    // publicPath: '/dist',
 }
 }