拓扑展示禁止用户操作

Author: lisx10

README.md

@@ -1,15 +1,14 @@
-## 拓扑在线编辑器
+## 在线拓扑编辑器
 
 前后用了有点久的时间，都不知道怎么描述该项目了~
----
+
 首先，如你所见，这是一个vue与mxGraph的编辑器融合的项目，我在原有功能基础上，与vue项目结合到一起。并改变了编辑器样式，扩展/改写了一些功能。
 ---
 想要驾驭这款编辑器，你必须得分成3步
 - 第一：学习mxGraph的基本语法和用法
 - 第二：了解编辑器源代码的目录结构/总体思路，之后是细节
 - 第三：就是vue与他们如何融合在一起了
 
----
 
 关于[mxGraph](https://github.com/maxGraph/maxGraph)：没有中文文档，也没有很好的翻译文章，最有效的方式就是将所有案例都看一遍，案例很多，一定要看完，至少你要知道你可以做什么/大概怎么做。
 ---
@@ -18,8 +17,8 @@
 关于vue+Graph结合：我空想了一天多，找不到能给我的参考的项目，有也不适合我的情况。我很想把Editor的DOM统统换成Vue的虚拟DOM,但是在看了部分Edit的代码以后我就知道这根本不可能，所以就有了现在的样子。它一定不完美，以后肯定会有人给出更完美的方案，如果没有我这个也还不错哈~
 
 ---
-好家伙功能实在太多了，我自己也扩展了JS导出XML和导出,和浏览模式
-Edit本身加导入导出，但是这种功能几乎都是借助了服务器，我是纯JS实现~
+好家伙功能实在太多了，我自己也扩展了JS导出XML和导出,和浏览模式，也屏蔽了一下用不到的功能
+Edit本身有导入导出，但是这种功能几乎都是借助了服务器，我是纯JS实现~
 
 # vue-maxgraph-edit
 ## Project setup

public/images/stencils/CSOFTX3000.png

@@ -295,7 +295,7 @@ topLeft=左上角
 topRight=右上角
 transparent=透明
 turn=旋转90度
-uml=IP网
+uml=数据网
 underline=下划线
 undo=撤销
 ungroup=取消组合

public/images/stencils/HLR.png

@@ -9,14 +9,14 @@
         <img src="~@/assets/add.svg" width="10" alt="" />
         新增
       </div>
-      <!-- <div class="legendItem" @click="saveCurrentTopo = true">
+      <div class="legendItem" @click="saveCurrentTopo = true">
         <img src="~@/assets/save.svg" width="10" alt="" />
-        导出
+        保存
       </div>
       <div class="legendItem" @click="importFile = true">
         <i class="el-icon-folder-opened"></i>
         导入
-      </div> -->
+      </div>
       <div class="legendItem" @click="openEditCellDialog">
         <img src="~@/assets/edit.svg" width="10" alt="" />
         编辑数据

public/images/stencils/MMSC.png

@@ -21,7 +21,8 @@
 </template>
 <script>
 export default {
-  name: 'ImportFile',
+  name: 'importFile',
+  emits: ['onDialogClose', 'onDialogConfirm'],
   props: {
     isVisible: Boolean || false,
   },

public/images/stencils/SCP.png

@@ -268,7 +268,7 @@
  /**
 	* Specifies if the canvas should be extended in all directions. Default is true.
 	*/
- Editor.prototype.extendCanvas = true;
+ Editor.prototype.extendCanvas = false;
 
  /**
 	* Specifies if the app should run in chromeless mode. Default is false.
@@ -2426,15 +2426,14 @@
 			 if (graph.view.backgroundPageShape != null)
 			 {
 				 var bds = this.getBackgroundPageBounds();
-				 
 				 x0 = 1 + bds.x;
 				 y0 = 1 + bds.y;
 			 }
-			 
-			 // Computes the offset to maintain origin for grid
+			
 			 position = -Math.round(phase - mxUtils.mod(this.translate.x * this.scale - x0, phase)) + 'px ' +
 				 -Math.round(phase - mxUtils.mod(this.translate.y * this.scale - y0, phase)) + 'px';
-		 }
+				
+			}
 
 		 var canvas = graph.view.canvas;
 
@@ -2512,7 +2511,7 @@
 			 var phase = this.gridSize * this.view.scale * this.view.gridSteps;
 			 var position = -Math.round(phase - mxUtils.mod(this.view.translate.x * this.view.scale + dx, phase)) + 'px ' +
 				 -Math.round(phase - mxUtils.mod(this.view.translate.y * this.view.scale + dy, phase)) + 'px';
-			 canvas.style.backgroundPosition = position;
+				 canvas.style.backgroundPosition = position;
 		 }
 	 };
 
@@ -2658,15 +2657,14 @@
 
 		 var pw = fmt.width * ps;
 		 var ph = fmt.height * ps;
- 
+		
 		 var x0 = Math.floor(Math.min(0, x) / pw);
 		 var y0 = Math.floor(Math.min(0, y) / ph);
 		 var xe = Math.ceil(Math.max(1, x + w) / pw);
 		 var ye = Math.ceil(Math.max(1, y + h) / ph);
 
 		 var rows = xe - x0;
 		 var cols = ye - y0;
- 
 		 var bounds = new mxRectangle(this.scale * (this.translate.x + x0 * pw), this.scale *
 				 (this.translate.y + y0 * ph), this.scale * rows * pw, this.scale * cols * ph);
 		 return bounds;

public/images/stencils/SIWF.png

@@ -6614,7 +6614,7 @@
 	 btn.setAttribute('title', mxResources.get('clearDefaultStyle') + ' (' + this.editorUi.actions.get('clearDefaultStyle').shortcut + ')');
 	 btn.style.width = '202px';
 	 div.appendChild(btn);
- 
+
 	 return div;
  };
 

public/images/stencils/SMSC.png

@@ -2134,7 +2134,6 @@ Graph.prototype.init = function(container)
 			this.scale = this.graph.currentScale;
 			this.translate = this.graph.currentTranslate;
 		}
-		
 		graphViewValidateBackgroundPage.apply(this, arguments);
 
 		if (useCssTranforms)
@@ -2465,7 +2464,6 @@ Graph.prototype.getPageLayout = function()
 			this.view.translate.x) / size.width) - x0;
 		var h0 = Math.ceil((Math.floor((bounds.y + bounds.height) / this.view.scale) -
 			this.view.translate.y) / size.height) - y0;
-		
 		return new mxRectangle(x0, y0, w0, h0);
 	}
 };

public/images/stencils/UMG8900.png

@@ -89,7 +89,7 @@ Sidebar.prototype.init = function()
 	// 传输网
 	this.addAdvancedPalette(false);
 
-	// IP网
+	// 数据网
 	this.addUmlPalette(false);
 	// 其他组件
 	this.addBpmnPalette(dir, false);
@@ -1168,13 +1168,13 @@ Sidebar.prototype.addUmlPalette = function(expand)
 	this.setCurrentSearchEntryLibrary('uml');
 
 	const fns = [];
-	const list = ['CSOFTX3000','UMG8900','SIWF','HLR','SCP','SMSC','MMSC'];
-	list.forEach(type=>{
-		fns.push(
-			this.createVertexTemplateEntry(`image;html=1;image=/images/stencils/${type}.png`,
-				 this.defaultImageWidth, this.defaultImageHeight, '', type, true, null, type)
-		)
-	});
+	// const list = ['CSOFTX3000','UMG8900','SIWF','HLR','SCP','SMSC','MMSC'];
+	// list.forEach(type=>{
+	// 	fns.push(
+	// 		this.createVertexTemplateEntry(`image;html=1;image=/images/stencils/${type}.png`,
+	// 			 this.defaultImageWidth, this.defaultImageHeight, '', type, true, null, type)
+	// 	)
+	// });
 
 	this.addPaletteFunctions('uml', mxResources.get('uml'), expand || false, fns);
 	this.setCurrentSearchEntryLibrary();
@@ -1190,22 +1190,32 @@ Sidebar.prototype.addBpmnPalette = function(dir, expand)
 	this.setCurrentSearchEntryLibrary('bpmn');
 
 	const list = [
-		{type: 'operator',title: '操作员'},
-		{type: 'computer',title: '电脑'},
-		{type:'firewall',title: '防护墙'},
-		{type: 'server',title: '服务器'},
-		{type: 'user',title: '用户'},
-		{type: 'client',title: '客户'},
-		{type: 'pad',title: 'pad'},
-		{type: 'phone',title: '手机'},
-		{type: 'lightning',title: '闪电'},
-		{type: 'customer',title: '客户群'},
-		{type: 'router',title: '路由'},
-		{type: 'switch',title: '交换机'},
+		{type: 'operator',title: '操作员',format: 'svg'},
+		{type: 'computer',title: '电脑',format: 'svg'},
+		{type:'firewall',title: '防护墙',format: 'svg'},
+		{type: 'server',title: '服务器',format: 'svg'},
+		{type: 'user',title: '用户',format: 'svg'},
+		{type: 'client',title: '客户',format: 'svg'},
+		{type: 'pad',title: 'pad',format: 'svg'},
+		{type: 'phone',title: '手机',format: 'svg'},
+		{type: 'lightning',title: '闪电',format: 'svg'},
+		{type: 'customer',title: '客户群',format: 'svg'},
+		{type: 'router',title: '路由',format: 'svg'},
+		{type: 'switch',title: '交换机',format: 'svg'},
+		{type: 'government',title:'政企业务编排', format: 'png' },
+		{type: 'oss',title:'故障管理中心', format: 'png' },
+		{type: 'maintenance',title:'运维管理中心', format: 'png' },
+		{type: 'performance',title:'性能管理中心', format: 'png' },
+		{type: 'business',title:'业务编排中心', format: 'png' },
+		{type: 'nsmf',title:'NSMF', format: 'png' },
+		{type: 'webcam',title:'摄像头', format: 'png' },
+		{type: 'soft_water',title:'软水准仪', format: 'png' },
+		{type: 'hard_water',title:'硬水准仪', format: 'png' },
+		{type: 'media_server',title:'流媒体服务器', format: 'png' },
 	];
 	list.forEach(item=>{
 		fns.push(
-			this.createVertexTemplateEntry(`image;html=1;image=/images/stencils/${item.type}.svg`,
+			this.createVertexTemplateEntry(`image;html=1;image=/images/stencils/${item.type}.${item.format}`,
 				 this.defaultImageWidth, this.defaultImageHeight, '', item.title, true, null, item.title)
 		)
 	});

public/images/stencils/business.png

@@ -34,9 +34,6 @@ export default {
       importFile: false,
     };
   },
-  created(){
-    this.bindEvents();
-  },
   methods: {
     initEditGraph(editorUiInit){
       this.editorUiInit = editorUiInit;
@@ -46,16 +43,20 @@ export default {
       this.editorUiInit.editor.graph.setSelectionCells(
         this.editorUiInit.editor.graph.importGraphModel(doc.documentElement)
       );
+      this.editorUiInit.actions.get("lockUnlock").funct()
+      mxPopupMenu.prototype.enabled = false
       this.importFile = false;
+      this.handleRender();
     },
-    bindEvents(){
-      document.oncontextmenu=(event)=>{
-        event.returnValue=false;
-      }; 
-      // document.body.contextmenu = (e)=>{
-      //   e.preventDefault();
-      //   e.stopPropagation();
-      // }
+    handleRender(){
+      const model = this.editorUiInit.editor.graph.getModel();
+      const cells = model.cells || [];
+      for(let index in cells){
+        if(model.isVertex(cells[index])) {
+          const value = model.getValue(cells[index]);
+          console.log('这是个图形 图形属性值',value);
+        }else console.log('这是个边边');
+      }
     }
   },
 };
@@ -88,9 +89,15 @@ export default {
   }
   .geDiagramContainer{
     inset: 0 !important;
+    &>svg{
+      background-image: none !important;
+    }
   }
   .geHsplit{
     display: none;
   }
+  div.mxPopupMenu{
+    display: none !important;
+  }
 }
 </style>