升级topology

package.json

@@ -8,11 +8,31 @@
     "lint": "vue-cli-service lint",
     "lib": "vue-cli-service build --target lib --name topology --dest lib package/index.js"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{js,vue}": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
+  "keywords": [
+    "vue",
+    "admin",
+    "dashboard",
+    "element-ui",
+    "boilerplate",
+    "admin-template",
+    "management-system"
+  ],
   "dependencies": {
     "@topology/activity-diagram": "^0.5.0",
     "@topology/chart-diagram": "^0.5.3",
     "@topology/class-diagram": "^0.3.0",
-    "@topology/core": "^0.5.34",
+    "@topology/core": "0.5.38",
     "@topology/flow-diagram": "^0.3.0",
     "@topology/layout": "^0.3.0",
     "@topology/sequence-diagram": "^0.3.0",
@@ -25,10 +45,8 @@
     "jsencrypt": "^3.2.1",
     "lodash.pick": "^4.4.0",
     "node-sass": "^4.14.1",
-    "sass": "^1.32.0",
     "script-ext-html-webpack-plugin": "^2.1.5",
     "svg-sprite-loader": "^6.0.11",
-    "topology-work": "0.0.3",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
@@ -42,22 +60,13 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "sass-loader": "^10.1.0",
+    "sass": "1.32.0",
+    "sass-loader": "10.1.0",
     "vue-template-compiler": "^2.6.11"
   },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
+  "engines": {
+    "node": ">=8.9",
+    "npm": ">= 3.0.0"
   },
   "browserslist": [
     "> 1%",

src/components/topology/PreviewToImg.vue

@@ -74,7 +74,7 @@ export default {
     },
     init() {
       this.canvas = new Topology("topology-hrhx");
-      this.canvasData.locked = 1;
+      this.canvasData.locked = 2;
       // 3. 渲染图形
       // 画布图形数据，可以来自于官网下载的json
       this.canvasData.websocket = "";

src/main.js

 import Vue from 'vue'
+
+import ElementUI from 'element-ui'
+import './assets/styles/element-variables.scss'
+import '@/assets/styles/index.scss' // global css
+import '@/assets/styles/ruoyi.scss' // ruoyi css
 import App from './App.vue'
 import router from './router'
 import store from './store'
-import ElementUI from 'element-ui'
-import './assets/styles/element-variables.scss'
 import Antd from 'ant-design-vue';
 import 'ant-design-vue/dist/antd.css';
 
@@ -11,7 +14,6 @@ import { parseTime, resetForm,selectDictLabel, selectDictLabels,addDateRange } f
 //topology 
 //注册图标
 import { registerIcons,registerSvgs } from "@/utils/topology/customgraph.js";
-// import {encryption,decrypt} from "@/utils/rsautils.js";
 registerIcons();
 registerSvgs();
 import { getDicts } from "@/api/dict/data";

src/views/topology/Preview.vue

@@ -54,8 +54,8 @@ export default {
       this.$router.go(-1);
     },
     onSizeWindow() {
-      this.canvas.fitView(5);
-      this.canvas.centerView(15);
+      this.canvas.fitView(20);
+      this.canvas.centerView(30);
     },
     onSizeOri() {
       this.canvas.open(this.topologyData);
@@ -80,16 +80,14 @@ export default {
         });
       if (this.topologyData) {
         let data = JSON.parse(this.topologyData);
-        console.log(data)
         if(data.websocket){
           data.websocket= data.websocket + "/" + (urlParse()===''?null:urlParse());
-          console.log(data)
         }
         this.topologyData=JSON.stringify(data)
         
       }
       this.canvas.open(this.topologyData);
-      this.canvas.data.locked = 10;
+      this.canvas.lock(2);
       // 或 用window.topology对象 === 上面的canvas
       // topology.open(json);
       // 4. 如果json发送变化，重绘

src/views/topology/Workspace.vue

@@ -337,7 +337,7 @@ export default {
       },
       set(val) {
         this.lineWidth = val;
-        this.canvas.data.lineWidth = val;
+        this.canvas.pureData().lineWidth = val;
       },
     },
   },
@@ -352,7 +352,7 @@ export default {
     },
     back() {
       this.$router.push({
-        path: this.backUrl
+        path: this.backUrl,
       });
     },
     saveContent(e) {
@@ -370,13 +370,13 @@ export default {
       }
     },
     handlLineName(val) {
-      this.canvas.data.lineName = val;
+      this.canvas.pureData().lineName = val;
     },
     handleFromArrowType(val) {
-      this.canvas.data.fromArrow = val;
+      this.canvas.pureData().fromArrow = val;
     },
     handleToArrowType(val) {
-      this.canvas.data.toArrow = val;
+      this.canvas.pureData().toArrow = val;
     },
     lockClick() {
       if (this.locked > 0) {
@@ -435,7 +435,7 @@ export default {
     },
     //预览
     preview() {
-      this.topologyData = JSON.parse(JSON.stringify(this.canvas.data));
+      this.topologyData = JSON.parse(JSON.stringify(this.canvas.pureData()));
       if (!this.$route.query.id) {
         this.$message.warning("未保存数据");
         return;
@@ -462,9 +462,9 @@ export default {
       if (this.topologyData) {
         this.canvas.open(this.topologyData);
         this.canvas.render();
-        this.toArrow = this.canvas.data.toArrow;
-        this.fromArrow = this.canvas.data.fromArrow;
-        this.lineName = this.canvas.data.lineName;
+        this.toArrow = this.canvas.pureData().toArrow;
+        this.fromArrow = this.canvas.pureData().fromArrow;
+        this.lineName = this.canvas.pureData().lineName;
         this.canvas.lock(0);
         this.canvas.closeSocket();
         this.canvas.closeMqtt();
@@ -517,23 +517,32 @@ export default {
     handle_replace() {
       const input = document.createElement("input");
       input.type = "file";
+      let that=this;
       input.onchange = (event) => {
         const elem = event.srcElement || event.target;
         if (elem.files && elem.files[0]) {
           const name = elem.files[0].name.replace(".json", "");
           const reader = new FileReader();
           reader.readAsText(elem.files[0]);
+          reader.onload = function () {
+            //读取完成后，数据保存在对象的result属性中
+            if(this.result){
+            that.topologyData = JSON.stringify(JSON.parse(this.result));
+            that.canvas.open(that.topologyData);
+            that.canvas.render();
+            }
+          };
         }
       };
       input.click();
     },
     handle_saveJson() {
-      if (!!this.canvas.data.name) {
+      if (!!this.canvas.pureData().name) {
         FileSaver.saveAs(
-          new Blob([JSON.stringify(this.canvas.data)], {
+          new Blob([JSON.stringify(this.canvas.pureData())], {
             type: "text/plain;charset=utf-8",
           }),
-          this.canvas.data.name + ".json"
+          this.canvas.pureData().name + ".json"
         );
       } else {
         this.$notification.warn({
@@ -543,8 +552,8 @@ export default {
     },
 
     handle_savePng() {
-      if (!!this.canvas.data.name) {
-        this.canvas.saveAsImage(this.canvas.data.name + ".png");
+      if (!!this.canvas.pureData().name) {
+        this.canvas.saveAsImage(this.canvas.pureData().name + ".png");
       } else {
         this.$notification.warn({
           message: "请填写图文名称",
@@ -554,8 +563,8 @@ export default {
 
     handle_saveSvg() {
       let name = "";
-      if (!!this.canvas.data.name) {
-        name = this.canvas.data.name + ".svg";
+      if (!!this.canvas.pureData().name) {
+        name = this.canvas.pureData().name + ".svg";
       } else {
         this.$notification.warn({
           message: "请填写图文名称",
@@ -566,7 +575,7 @@ export default {
         this.canvas.canvas.width + 200,
         this.canvas.canvas.height + 200
       );
-      for (const item of this.canvas.data.pens) {
+      for (const item of this.canvas.pureData().pens) {
         item.render(ctx);
       }
       let mySerializedSVG = ctx.getSerializedSvg();
@@ -597,10 +606,10 @@ export default {
       a.dispatchEvent(evt);
     },
     updateProps(node) {
-      this.canvas.updateProps(this.canvas.data.pens);
+      this.canvas.updateProps(this.canvas.pureData().pens);
     },
     updateLines(line) {
-      this.canvas.updateProps(this.canvas.data.pens);
+      this.canvas.updateProps(this.canvas.pureData().pens);
     },
     uploadCanvasData(data) {
       this.canvas.open(data);
@@ -608,33 +617,33 @@ export default {
     },
     updatePens(params) {
       layout(this.pens, params);
-      this.canvas.updateProps(this.canvas.data.pens);
+      this.canvas.updateProps(this.canvas.pureData().pens);
     },
     updatePensSubclass(name, val) {
       for (let item of this.pens) {
         item[name] = val;
       }
-      this.canvas.updateProps(this.canvas.data.pens);
+      this.canvas.updateProps(this.canvas.pureData().pens);
     },
     updateAlignNodes(rect, align) {
       alignNodes(this.pens, rect, align);
-      this.canvas.updateProps(this.canvas.data.pens);
+      this.canvas.updateProps(this.canvas.pureData().pens);
     },
     updateSpaceBetween(params) {
       spaceBetween(this.pens, params.maxWidth);
-      this.canvas.updateProps(this.canvas.data.pens);
+      this.canvas.updateProps(this.canvas.pureData().pens);
     },
     async saveTopology() {
       let params = {};
       if (!!this.$route.query.id) {
         params.id = this.$route.query.id;
       }
-      if (!this.canvas.data.name) {
+      if (!this.canvas.pureData().name) {
         this.$message.error("请填写图文名称");
         return;
       }
-      params.name = this.canvas.data.name;
-      params.data = this.canvas.data;
+      params.name = this.canvas.pureData().name;
+      params.data = this.canvas.pureData();
       await save(params)
         .then((res) => {
           if (res.code === 200) {