Merge branch 'sqy_dev' into 'main'

'fix:隐藏右侧一些动作的操作'

See merge request huang/thingskit-drawio!2

@@ -13,8 +13,8 @@ window.DRAWIO_VIEWER_URL =
   window.location.protocol + "//" + window.location.host + "/js/viewer.min.js"; // Replace your path to the viewer js, e.g. https://www.example.com/js/viewer.min.js
 window.DRAWIO_LIGHTBOX_URL =null; // Replace with your lightbox URL, eg. https://www.example.com
 urlParams["sync"] = "manual";
-urlParams["lang"] = "zh";
-urlParams["browser"] = 0;
+// urlParams["lang"] = "zh";
+urlParams["browser"] = 1;
 urlParams["gapi"] = 0;
 urlParams["db"] = 0;
 urlParams["od"] = 0;

@@ -245,8 +245,9 @@
 	
 	/**
 	 * Specifies if custom properties should be enabled.
+	 * 是否启用自定义属性
 	 */
-	Editor.enableCustomProperties = true;
+	Editor.enableCustomProperties = false;
 	
 	/**
 	 * Sets the default value for including a copy of the diagram.
@@ -4553,7 +4554,7 @@
 
 			if (sstate.style.shape != 'image' && !sstate.containsLabel && sstate.cells.length > 0)
 			{
-				this.container.appendChild(this.addStyles(this.createPanel()));
+				// this.container.appendChild(this.addStyles(this.createPanel()));
 			}
 			
 			styleFormatPanelInit.apply(this, arguments);

@@ -8,7 +8,8 @@ Format = function(editorUi, container)
 };
 
 /**
- * Background color for inactive tabs.
+ * Background color for inactive tabs. 
+ * 没有激活的tab栏 背景色
  */
 Format.inactiveTabBackgroundColor = '#f1f3f4';
 
@@ -84,6 +85,7 @@ Format.prototype.labelIndex = 0;
 
 /**
  * Returns information about the current selection.
+ * 默认选中的formatBar的tab栏索引 / 0是第一个
  */
 Format.prototype.diagramIndex = 0;
 
@@ -94,8 +96,9 @@ Format.prototype.currentIndex = 0;
 
 /**
  * Returns information about the current selection.
+ * 是否显示关闭按钮
  */
-Format.prototype.showCloseButton = true;
+Format.prototype.showCloseButton = false;
 
 /**
  * Adds the label menu items to the given menu and parent.
@@ -270,38 +273,37 @@ Format.prototype.immediateRefresh = function()
 
 	if (graph.isSelectionEmpty())
 	{
-		mxUtils.write(label, mxResources.get('diagram'));
+		mxUtils.write(label, mxResources.get("pageSetting"));
 		label.style.borderLeftWidth = '0px';
-
 		div.appendChild(label);
 		var diagramPanel = div.cloneNode(false);
 		this.panels.push(new DiagramFormatPanel(this, ui, diagramPanel));
 		this.container.appendChild(diagramPanel);
-		
+
 		if (Editor.styles != null)
 		{
-			diagramPanel.style.display = 'none';
-			label.style.width = (this.showCloseButton) ? '106px' : '50%';
-			label.style.cursor = 'pointer';
-			label.style.backgroundColor = Format.inactiveTabBackgroundColor;
+			// diagramPanel.style.display = 'none';
+			// label.style.width = (this.showCloseButton) ? '106px' : '50%';
+			// label.style.cursor = 'pointer';
+			// label.style.backgroundColor = Format.inactiveTabBackgroundColor;
 			
-			var label2 = label.cloneNode(false);
-			label2.style.borderLeftWidth = '1px';
-			label2.style.borderRightWidth = '1px';
-			label2.style.backgroundColor = Format.inactiveTabBackgroundColor;
+			// var label2 = label.cloneNode(false);
+			// label2.style.borderLeftWidth = '1px';
+			// label2.style.borderRightWidth = '1px';
+			// label2.style.backgroundColor = Format.inactiveTabBackgroundColor;
 			
-			addClickHandler(label, diagramPanel, idx++);
+			// addClickHandler(label, diagramPanel, idx++);
 			
-			var stylePanel = div.cloneNode(false);
-			stylePanel.style.display = 'none';
-			mxUtils.write(label2, mxResources.get('style'));
-			div.appendChild(label2);
-			this.panels.push(new DiagramStylePanel(this, ui, stylePanel));
-			this.container.appendChild(stylePanel);
+			// var stylePanel = div.cloneNode(false);
+			// stylePanel.style.display = 'none';
+			// mxUtils.write(label2, mxResources.get('style'));
+			// div.appendChild(label2);
+			// this.panels.push(new DiagramStylePanel(this, ui, stylePanel));
+			// this.container.appendChild(stylePanel);
 			
-			addClickHandler(label2, stylePanel, idx++);
+			// addClickHandler(label2, stylePanel, idx++);
 		}
-		
+
 		// Adds button to hide the format panel since
 		// people don't seem to find the toolbar button
 		// and the menu item in the format menu
@@ -341,14 +343,17 @@ Format.prototype.immediateRefresh = function()
 			div.appendChild(label2);
 		}
 	}
-	else if (graph.isEditing())
+	else if (graph.isEditing()) 
 	{
 		mxUtils.write(label, mxResources.get('text'));
-		div.appendChild(label);
-		this.panels.push(new TextFormatPanel(this, ui, div));
-	}
-	else
-	{
+    div.appendChild(label);
+    this.panels.push(new TextFormatPanel(this, ui, div));
+  } 
+	else 
+	{
+  /**
+	 * source
+	 * 
 		label.style.backgroundColor = Format.inactiveTabBackgroundColor;
 		label.style.borderLeftWidth = '1px';
 		label.style.cursor = 'pointer';
@@ -407,7 +412,56 @@ Format.prototype.immediateRefresh = function()
 		}
 		
 		addClickHandler(label3, arrangePanel, idx++, true);
-	}
+	 */
+
+
+
+  /**
+   * modify
+   */
+	
+    label.style.backgroundColor = Format.inactiveTabBackgroundColor;
+    label.style.borderLeftWidth = "1px";
+    label.style.cursor = "pointer";
+    label.style.width = containsLabel || ss.cells.length > 0 ? "50%" : "33.3%";
+    var label2 = label.cloneNode(false);
+    
+
+    // Workaround for ignored background in IE
+    label2.style.backgroundColor = Format.inactiveTabBackgroundColor;
+    
+
+    // bindData 绑定数据
+    if (containsLabel) {
+      label2.style.borderLeftWidth = "0px";
+    } else {
+      label.style.borderLeftWidth = "0px";
+      mxUtils.write(label, mxResources.get("bindData"));
+      div.appendChild(label);
+
+      var bindDataPanel = div.cloneNode(false);
+      bindDataPanel.style.display = "none";
+      this.panels.push(new StyleFormatPanel(this, ui, bindDataPanel));
+      this.container.appendChild(bindDataPanel);
+
+      addClickHandler(label, bindDataPanel, idx++);
+    }
+
+    // style 样式
+    mxUtils.write(label2, mxResources.get("style"));
+    div.appendChild(label2);
+
+    var stylePanel = div.cloneNode(false);
+    stylePanel.style.display = "none";
+    this.panels.push(new TextFormatPanel(this, ui, stylePanel));
+    this.container.appendChild(stylePanel);
+
+    if (ss.cells.length > 0) {
+      addClickHandler(label2, stylePanel, idx++);
+    } else {
+      label2.style.display = "none";
+    }
+  }
 };
 
 /**
@@ -2724,7 +2778,7 @@ mxUtils.extend(TextFormatPanel, BaseFormatPanel);
 TextFormatPanel.prototype.init = function()
 {
 	this.container.style.borderBottom = 'none';
-	this.addFont(this.container);
+	// this.addFont(this.container);
 };
 
 /**
@@ -4216,31 +4270,31 @@ StyleFormatPanel.prototype.init = function()
 		if (ss.containsImage && ss.vertices.length == 1 && ss.style.shape == 'image' &&
 			ss.style.image != null && ss.style.image.substring(0, 19) == 'data:image/svg+xml;')
 		{
-			this.container.appendChild(this.addSvgStyles(this.createPanel()));
+			// this.container.appendChild(this.addSvgStyles(this.createPanel()));
 		}
 
 		if (ss.fill)
 		{
-			this.container.appendChild(this.addFill(this.createPanel()));
+			// this.container.appendChild(this.addFill(this.createPanel()));
 		}
 	
-		this.container.appendChild(this.addStroke(this.createPanel()));
-		this.container.appendChild(this.addLineJumps(this.createPanel()));
-		var opacityPanel = this.createRelativeOption(mxResources.get('opacity'), mxConstants.STYLE_OPACITY);
-		opacityPanel.style.paddingTop = '8px';
-		opacityPanel.style.paddingBottom = '8px';
-		this.container.appendChild(opacityPanel);
-		this.container.appendChild(this.addEffects(this.createPanel()));
+		// this.container.appendChild(this.addStroke(this.createPanel()));
+		// this.container.appendChild(this.addLineJumps(this.createPanel()));
+		// var opacityPanel = this.createRelativeOption(mxResources.get('opacity'), mxConstants.STYLE_OPACITY);
+		// opacityPanel.style.paddingTop = '8px';
+		// opacityPanel.style.paddingBottom = '8px';
+		// this.container.appendChild(opacityPanel);
+		// this.container.appendChild(this.addEffects(this.createPanel()));
 	}
 	
-	var opsPanel = this.addEditOps(this.createPanel());
+	// var opsPanel = this.addEditOps(this.createPanel());
 	
-	if (opsPanel.firstChild != null)
-	{
-		mxUtils.br(opsPanel);
-	}
+	// if (opsPanel.firstChild != null)
+	// {
+	// 	mxUtils.br(opsPanel);
+	// }
 	
-	this.container.appendChild(this.addStyleOps(opsPanel));
+	// this.container.appendChild(this.addStyleOps(opsPanel));
 };
 
 /**
@@ -5582,656 +5636,654 @@ DiagramStylePanel.prototype.init = function()
 	});
 
 	ui.addListener('darkModeChanged', this.darkModeChangedListener);
-	this.container.appendChild(this.addView(this.createPanel()));
+	// this.container.appendChild(this.addView(this.createPanel()));
 };
 
 /**
  * Adds the label menu items to the given menu and parent.
  */
-DiagramStylePanel.prototype.addView = function(div)
-{
-	var ui = this.editorUi;
-	var editor = ui.editor;
-	var graph = editor.graph;
-	var model = graph.getModel();
-	var gridColor = graph.view.gridColor;
-
-	div.style.whiteSpace = 'normal';
-
-	var sketch = graph.currentVertexStyle['sketch'] == '1' && graph.currentEdgeStyle['sketch'] == '1';
-	var rounded = graph.currentVertexStyle['rounded'] == '1';
-	var curved = graph.currentEdgeStyle['curved'] == '1';
-
-	var opts = document.createElement('div');
-	opts.style.marginRight = '16px';
-	div.style.paddingTop = '8px';
-	
-	var table = document.createElement('table');
-
-	table.style.width = '210px';
-	table.style.fontWeight = 'bold';
-	
-	var tbody = document.createElement('tbody');
-	var row = document.createElement('tr');
-	row.style.padding = '0px';
-	
-	var left = document.createElement('td');
-	left.style.padding = '0px';
-	left.style.width = '50%';
-	left.setAttribute('valign', 'middle');
-	
-	var right = left.cloneNode(true);
-	right.style.paddingLeft = '8px';
-
-	// Sketch
-	if (urlParams['sketch'] != '1')
-	{
-		opts.style.paddingBottom = '12px';
-		row.appendChild(left);
-
-		left.appendChild(this.createOption(mxResources.get('sketch'), function()
-		{
-			return sketch;
-		}, function(checked)
-		{
-			sketch = checked;
+// DiagramStylePanel.prototype.addView = function(div)
+// {
+// 	var ui = this.editorUi;
+// 	var editor = ui.editor;
+// 	var graph = editor.graph;
+// 	var model = graph.getModel();
+// 	var gridColor = graph.view.gridColor;
+
+// 	div.style.whiteSpace = 'normal';
+
+// 	var sketch = graph.currentVertexStyle['sketch'] == '1' && graph.currentEdgeStyle['sketch'] == '1';
+// 	var rounded = graph.currentVertexStyle['rounded'] == '1';
+// 	var curved = graph.currentEdgeStyle['curved'] == '1';
+
+// 	var opts = document.createElement('div');
+// 	opts.style.marginRight = '16px';
+// 	div.style.paddingTop = '8px';
+	
+// 	var table = document.createElement('table');
+
+// 	table.style.width = '210px';
+// 	table.style.fontWeight = 'bold';
+	
+// 	var tbody = document.createElement('tbody');
+// 	var row = document.createElement('tr');
+// 	row.style.padding = '0px';
+	
+// 	var left = document.createElement('td');
+// 	left.style.padding = '0px';
+// 	left.style.width = '50%';
+// 	left.setAttribute('valign', 'middle');
+	
+// 	var right = left.cloneNode(true);
+// 	right.style.paddingLeft = '8px';
+
+// 	// Sketch
+// 	if (urlParams['sketch'] != '1')
+// 	{
+// 		opts.style.paddingBottom = '12px';
+// 		row.appendChild(left);
+
+// 		left.appendChild(this.createOption(mxResources.get('sketch'), function()
+// 		{
+// 			return sketch;
+// 		}, function(checked)
+// 		{
+// 			sketch = checked;
 			
-			if (checked)
-			{
-				graph.currentEdgeStyle['sketch'] = '1';
-				graph.currentVertexStyle['sketch'] = '1';
-			}
-			else
-			{
-				delete graph.currentEdgeStyle['sketch'];
-				delete graph.currentVertexStyle['sketch'];
-			}
+// 			if (checked)
+// 			{
+// 				graph.currentEdgeStyle['sketch'] = '1';
+// 				graph.currentVertexStyle['sketch'] = '1';
+// 			}
+// 			else
+// 			{
+// 				delete graph.currentEdgeStyle['sketch'];
+// 				delete graph.currentVertexStyle['sketch'];
+// 			}
 			
-			graph.updateCellStyles({'sketch': (checked) ? '1' : null}, graph.getVerticesAndEdges());
-		}, null, function(div)
-		{
-			div.style.width = 'auto';
-		}));
-	}
-	
-	row.appendChild(right);
-	tbody.appendChild(row);
-	table.appendChild(tbody);
-	
-	// Rounded
-	right.appendChild(this.createOption(mxResources.get('rounded'), function()
-	{
-		return rounded;
-	}, function(checked)
-	{
-		rounded = checked;
-		
-		if (checked)
-		{
-			graph.currentEdgeStyle['rounded'] = '1';
-			graph.currentVertexStyle['rounded'] = '1';
-		}
-		else
-		{
-			delete graph.currentEdgeStyle['rounded'];
-			delete graph.currentVertexStyle['rounded'];
-		}
-		
-		graph.updateCellStyles({'rounded': (checked) ? '1' : '0'}, graph.getVerticesAndEdges());
-	}, null, function(div)
-	{
-		div.style.width = 'auto';
-	}));
-	
-	// Curved
-	if (urlParams['sketch'] != '1')
-	{
-		left = left.cloneNode(false);
-		right = right.cloneNode(false);
-		row = row.cloneNode(false);
-		row.appendChild(left);
-		row.appendChild(right);
-		tbody.appendChild(row);
-
-		left.appendChild(this.createOption(mxResources.get('curved'), function()
-		{
-			return curved;
-		}, function(checked)
-		{
-			curved = checked;
+// 			graph.updateCellStyles({'sketch': (checked) ? '1' : null}, graph.getVerticesAndEdges());
+// 		}, null, function(div)
+// 		{
+// 			div.style.width = 'auto';
+// 		}));
+// 	}
+	
+// 	row.appendChild(right);
+// 	tbody.appendChild(row);
+// 	table.appendChild(tbody);
+	
+// 	// Rounded
+// 	right.appendChild(this.createOption(mxResources.get('rounded'), function()
+// 	{
+// 		return rounded;
+// 	}, function(checked)
+// 	{
+// 		rounded = checked;
+		
+// 		if (checked)
+// 		{
+// 			graph.currentEdgeStyle['rounded'] = '1';
+// 			graph.currentVertexStyle['rounded'] = '1';
+// 		}
+// 		else
+// 		{
+// 			delete graph.currentEdgeStyle['rounded'];
+// 			delete graph.currentVertexStyle['rounded'];
+// 		}
+		
+// 		graph.updateCellStyles({'rounded': (checked) ? '1' : '0'}, graph.getVerticesAndEdges());
+// 	}, null, function(div)
+// 	{
+// 		div.style.width = 'auto';
+// 	}));
+	
+// 	// Curved
+// 	if (urlParams['sketch'] != '1')
+// 	{
+// 		left = left.cloneNode(false);
+// 		right = right.cloneNode(false);
+// 		row = row.cloneNode(false);
+// 		row.appendChild(left);
+// 		row.appendChild(right);
+// 		tbody.appendChild(row);
+
+// 		left.appendChild(this.createOption(mxResources.get('curved'), function()
+// 		{
+// 			return curved;
+// 		}, function(checked)
+// 		{
+// 			curved = checked;
 			
-			if (checked)
-			{
-				graph.currentEdgeStyle['curved'] = '1';
-			}
-			else
-			{
-				delete graph.currentEdgeStyle['curved'];
-			}
+// 			if (checked)
+// 			{
+// 				graph.currentEdgeStyle['curved'] = '1';
+// 			}
+// 			else
+// 			{
+// 				delete graph.currentEdgeStyle['curved'];
+// 			}
 			
-			graph.updateCellStyles({'curved': (checked) ? '1' : null}, graph.getVerticesAndEdges(false, true));
-		}, null, function(div)
-		{
-			div.style.width = 'auto';
-		}));
-	}
-
-	opts.appendChild(table);
-	div.appendChild(opts);
-
-	var defaultStyles = ['fillColor', 'strokeColor', 'fontColor', 'gradientColor'];
-	
-	var updateCells = mxUtils.bind(this, function(styles, graphStyle)
-	{
-		var cells = graph.getVerticesAndEdges();
-		
-		model.beginUpdate();
-		try
-		{
-			for (var i = 0; i < cells.length; i++)
-			{
-				var style = graph.getCellStyle(cells[i]);
+// 			graph.updateCellStyles({'curved': (checked) ? '1' : null}, graph.getVerticesAndEdges(false, true));
+// 		}, null, function(div)
+// 		{
+// 			div.style.width = 'auto';
+// 		}));
+// 	}
+
+// 	opts.appendChild(table);
+// 	div.appendChild(opts);
+
+// 	var defaultStyles = ['fillColor', 'strokeColor', 'fontColor', 'gradientColor'];
+	
+// 	var updateCells = mxUtils.bind(this, function(styles, graphStyle)
+// 	{
+// 		var cells = graph.getVerticesAndEdges();
+		
+// 		model.beginUpdate();
+// 		try
+// 		{
+// 			for (var i = 0; i < cells.length; i++)
+// 			{
+// 				var style = graph.getCellStyle(cells[i]);
 				
-				// Handles special label background color
-				if (style['labelBackgroundColor'] != null)
-				{
-					graph.updateCellStyles({'labelBackgroundColor': (graphStyle != null) ?
-						graphStyle.background : null}, [cells[i]]);
-				}
+// 				// Handles special label background color
+// 				if (style['labelBackgroundColor'] != null)
+// 				{
+// 					graph.updateCellStyles({'labelBackgroundColor': (graphStyle != null) ?
+// 						graphStyle.background : null}, [cells[i]]);
+// 				}
 				
-				var edge = model.isEdge(cells[i]);
-				var newStyle = model.getStyle(cells[i]);
-				var current = (edge) ? graph.currentEdgeStyle : graph.currentVertexStyle;
-
-				for (var j = 0; j < styles.length; j++)
-				{
-					if ((style[styles[j]] != null && style[styles[j]] != mxConstants.NONE) ||
-						(styles[j] != mxConstants.STYLE_FILLCOLOR &&
-						styles[j] != mxConstants.STYLE_STROKECOLOR))
-					{
-						newStyle = mxUtils.setStyle(newStyle, styles[j], current[styles[j]]);
-					}
-				}
+// 				var edge = model.isEdge(cells[i]);
+// 				var newStyle = model.getStyle(cells[i]);
+// 				var current = (edge) ? graph.currentEdgeStyle : graph.currentVertexStyle;
+
+// 				for (var j = 0; j < styles.length; j++)
+// 				{
+// 					if ((style[styles[j]] != null && style[styles[j]] != mxConstants.NONE) ||
+// 						(styles[j] != mxConstants.STYLE_FILLCOLOR &&
+// 						styles[j] != mxConstants.STYLE_STROKECOLOR))
+// 					{
+// 						newStyle = mxUtils.setStyle(newStyle, styles[j], current[styles[j]]);
+// 					}
+// 				}
 				
-				model.setStyle(cells[i], newStyle);
-			}
-		}
-		finally
-		{
-			model.endUpdate();
-		}
-	});
+// 				model.setStyle(cells[i], newStyle);
+// 			}
+// 		}
+// 		finally
+// 		{
+// 			model.endUpdate();
+// 		}
+// 	});
 			
-	var removeStyles = mxUtils.bind(this, function(style, styles, defaultStyle)
-	{
-		if (style != null)
-		{
-			for (var j = 0; j < styles.length; j++)
-			{
-				if (((style[styles[j]] != null &&
-					style[styles[j]] != mxConstants.NONE) ||
-					(styles[j] != mxConstants.STYLE_FILLCOLOR &&
-					styles[j] != mxConstants.STYLE_STROKECOLOR)))
-				{
-					style[styles[j]] = defaultStyle[styles[j]];
-				}
-			}
-		}
-	});
-
-	var applyStyle = mxUtils.bind(this, function(style, result, cell, graphStyle, theGraph)
-	{
-		if (style != null)
-		{
-			if (cell != null)
-			{
-				// Handles special label background color
-				if (result['labelBackgroundColor'] != null)
-				{
-					var bg = (graphStyle != null) ? graphStyle.background : null;
-					theGraph = (theGraph != null) ? theGraph : graph;
+// 	var removeStyles = mxUtils.bind(this, function(style, styles, defaultStyle)
+// 	{
+// 		if (style != null)
+// 		{
+// 			for (var j = 0; j < styles.length; j++)
+// 			{
+// 				if (((style[styles[j]] != null &&
+// 					style[styles[j]] != mxConstants.NONE) ||
+// 					(styles[j] != mxConstants.STYLE_FILLCOLOR &&
+// 					styles[j] != mxConstants.STYLE_STROKECOLOR)))
+// 				{
+// 					style[styles[j]] = defaultStyle[styles[j]];
+// 				}
+// 			}
+// 		}
+// 	});
+
+// 	var applyStyle = mxUtils.bind(this, function(style, result, cell, graphStyle, theGraph)
+// 	{
+// 		if (style != null)
+// 		{
+// 			if (cell != null)
+// 			{
+// 				// Handles special label background color
+// 				if (result['labelBackgroundColor'] != null)
+// 				{
+// 					var bg = (graphStyle != null) ? graphStyle.background : null;
+// 					theGraph = (theGraph != null) ? theGraph : graph;
 					
-					if (bg == null)
-					{
-						bg = theGraph.background;
-					}
+// 					if (bg == null)
+// 					{
+// 						bg = theGraph.background;
+// 					}
 					
-					if (bg == null)
-					{
-						bg = theGraph.defaultPageBackgroundColor;
-					}
+// 					if (bg == null)
+// 					{
+// 						bg = theGraph.defaultPageBackgroundColor;
+// 					}
 					
-					result['labelBackgroundColor'] = bg;
-				}
-			}
+// 					result['labelBackgroundColor'] = bg;
+// 				}
+// 			}
 			
-			for (var key in style)
-			{
-				if (cell == null || ((result[key] != null &&
-					result[key] != mxConstants.NONE) ||
-					(key != mxConstants.STYLE_FILLCOLOR &&
-					key != mxConstants.STYLE_STROKECOLOR)))
-				{
-					result[key] = style[key];
-				}
-			}
-		}
-	});
-	
-	if (urlParams['sketch'] != '1')
-	{
-		var btn = mxUtils.button(mxResources.get('reset'), mxUtils.bind(this, function(evt)
-		{
-			var all = graph.getVerticesAndEdges(true, true);
+// 			for (var key in style)
+// 			{
+// 				if (cell == null || ((result[key] != null &&
+// 					result[key] != mxConstants.NONE) ||
+// 					(key != mxConstants.STYLE_FILLCOLOR &&
+// 					key != mxConstants.STYLE_STROKECOLOR)))
+// 				{
+// 					result[key] = style[key];
+// 				}
+// 			}
+// 		}
+// 	});
+	
+// 	if (urlParams['sketch'] != '1')
+// 	{
+// 		var btn = mxUtils.button(mxResources.get('reset'), mxUtils.bind(this, function(evt)
+// 		{
+// 			var all = graph.getVerticesAndEdges(true, true);
 			
-			if (all.length > 0)
-			{
-				model.beginUpdate();
-				try
-				{
-					graph.updateCellStyles({'sketch': null, 'rounded': null}, all);
-					graph.updateCellStyles({'curved': null}, graph.getVerticesAndEdges(false, true));
-				}
-				finally
-				{
-					model.endUpdate();
-				}
-			}
+// 			if (all.length > 0)
+// 			{
+// 				model.beginUpdate();
+// 				try
+// 				{
+// 					graph.updateCellStyles({'sketch': null, 'rounded': null}, all);
+// 					graph.updateCellStyles({'curved': null}, graph.getVerticesAndEdges(false, true));
+// 				}
+// 				finally
+// 				{
+// 					model.endUpdate();
+// 				}
+// 			}
 			
-			ui.clearDefaultStyle();
-		}));
-		
-		btn.setAttribute('title', mxResources.get('reset'));
-		btn.style.textOverflow = 'ellipsis';
-		btn.style.maxWidth = '90px';
-		right.appendChild(btn);
-	}
-	
-	var createPreview = mxUtils.bind(this, function(commonStyle, vertexStyle, edgeStyle, graphStyle, container)
-	{
-		// Wrapper needed to catch events
-		var div = document.createElement('div');
-		div.style.position = 'absolute';
-		div.style.display = 'inline-block';
-		div.style.overflow = 'hidden';
-		div.style.pointerEvents = 'none';
-		div.style.width = '100%';
-		div.style.height = '100%';
-		container.appendChild(div);
-		
-		var graph2 = new Graph(div, null, null, graph.getStylesheet());
-
-		graph2.resetViewOnRootChange = false;
-		graph2.foldingEnabled = false;
-		graph2.gridEnabled = false;
-		graph2.autoScroll = false;
-		graph2.setTooltips(false);
-		graph2.setConnectable(false);
-		graph2.setPanning(false);
-		graph2.setEnabled(false);
-		
-		graph2.getCellStyle = function(cell, resolve)
-		{
-			resolve = (resolve != null) ? resolve : true;
-			var result = mxUtils.clone(graph.getCellStyle.apply(this, arguments));
-			var defaultStyle = graph.stylesheet.getDefaultVertexStyle();
-			var appliedStyle = vertexStyle;
+// 			ui.clearDefaultStyle();
+// 		}));
+		
+// 		btn.setAttribute('title', mxResources.get('reset'));
+// 		btn.style.textOverflow = 'ellipsis';
+// 		btn.style.maxWidth = '90px';
+// 		right.appendChild(btn);
+// 	}
+	
+// 	var createPreview = mxUtils.bind(this, function(commonStyle, vertexStyle, edgeStyle, graphStyle, container)
+// 	{
+// 		// Wrapper needed to catch events
+// 		var div = document.createElement('div');
+// 		div.style.position = 'absolute';
+// 		div.style.display = 'inline-block';
+// 		div.style.overflow = 'hidden';
+// 		div.style.pointerEvents = 'none';
+// 		div.style.width = '100%';
+// 		div.style.height = '100%';
+// 		container.appendChild(div);
+		
+// 		var graph2 = new Graph(div, null, null, graph.getStylesheet());
+
+// 		graph2.resetViewOnRootChange = false;
+// 		graph2.foldingEnabled = false;
+// 		graph2.gridEnabled = false;
+// 		graph2.autoScroll = false;
+// 		graph2.setTooltips(false);
+// 		graph2.setConnectable(false);
+// 		graph2.setPanning(false);
+// 		graph2.setEnabled(false);
+		
+// 		graph2.getCellStyle = function(cell, resolve)
+// 		{
+// 			resolve = (resolve != null) ? resolve : true;
+// 			var result = mxUtils.clone(graph.getCellStyle.apply(this, arguments));
+// 			var defaultStyle = graph.stylesheet.getDefaultVertexStyle();
+// 			var appliedStyle = vertexStyle;
 			
-			if (model.isEdge(cell))
-			{
-				defaultStyle = graph.stylesheet.getDefaultEdgeStyle();
-				appliedStyle = edgeStyle;	
-			}
+// 			if (model.isEdge(cell))
+// 			{
+// 				defaultStyle = graph.stylesheet.getDefaultEdgeStyle();
+// 				appliedStyle = edgeStyle;	
+// 			}
 			
-			removeStyles(result, defaultStyles, defaultStyle);
-			applyStyle(commonStyle, result, cell, graphStyle, graph2);
-			applyStyle(appliedStyle, result, cell, graphStyle, graph2);
+// 			removeStyles(result, defaultStyles, defaultStyle);
+// 			applyStyle(commonStyle, result, cell, graphStyle, graph2);
+// 			applyStyle(appliedStyle, result, cell, graphStyle, graph2);
 			
-			if (resolve)
-			{
-				result = graph.postProcessCellStyle(cell, result);
-			}
-
-			return result;
-		};
-		
-		// Avoid HTML labels to capture events in bubble phase
-		graph2.model.beginUpdate();
-		try
-		{
-			var v1 = graph2.insertVertex(graph2.getDefaultParent(), null, 'Shape', 14, 8, 70, 40, 'strokeWidth=2;');
-			var e1 = graph2.insertEdge(graph2.getDefaultParent(), null, 'Connector', v1, v1,
-				'edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;endSize=5;strokeWidth=2;')
-			e1.geometry.points = [new mxPoint(32, 70)];
-			e1.geometry.offset = new mxPoint(0, 8);
-		}
-		finally
-		{
-			graph2.model.endUpdate();
-		}
-	});
-	
-	// Entries
-	var entries = document.createElement('div');
-	entries.style.position = 'relative';
-	div.appendChild(entries);
-	
-	// Cached entries
-	if (this.format.cachedStyleEntries == null)
-	{
-		this.format.cachedStyleEntries = [];
-	}
-
-	function addKeys(style, result)
-	{
-		for (var key in style)
-		{
-			result.push(key);
-		}
-
-		return result;
-	};
-
-	var addEntry = mxUtils.bind(this, function(commonStyle, vertexStyle, edgeStyle, graphStyle, index)
-	{
-		var panel = this.format.cachedStyleEntries[index];
-		
-		if (panel == null)
-		{
-			panel = document.createElement('div');
-			panel.style.display = 'inline-block';
-			panel.style.position = 'relative';
-			panel.style.width = '96px';
-			panel.style.height = '90px';
-			panel.style.cursor = 'pointer';
-			panel.style.border = '1px solid gray';
-			panel.style.borderRadius = '8px';
-			panel.style.margin = '2px';
-			panel.style.overflow = 'hidden';
-	
-			if (graphStyle != null && graphStyle.background != null)
-			{
-				panel.style.backgroundColor = graphStyle.background;
-			}
+// 			if (resolve)
+// 			{
+// 				result = graph.postProcessCellStyle(cell, result);
+// 			}
+
+// 			return result;
+// 		};
+		
+// 		// Avoid HTML labels to capture events in bubble phase
+// 		graph2.model.beginUpdate();
+// 		try
+// 		{
+// 			var v1 = graph2.insertVertex(graph2.getDefaultParent(), null, 'Shape', 14, 8, 70, 40, 'strokeWidth=2;');
+// 			var e1 = graph2.insertEdge(graph2.getDefaultParent(), null, 'Connector', v1, v1,
+// 				'edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;endSize=5;strokeWidth=2;')
+// 			e1.geometry.points = [new mxPoint(32, 70)];
+// 			e1.geometry.offset = new mxPoint(0, 8);
+// 		}
+// 		finally
+// 		{
+// 			graph2.model.endUpdate();
+// 		}
+// 	});
+	
+// 	// Entries
+// 	var entries = document.createElement('div');
+// 	entries.style.position = 'relative';
+// 	div.appendChild(entries);
+	
+// 	// Cached entries
+// 	if (this.format.cachedStyleEntries == null)
+// 	{
+// 		this.format.cachedStyleEntries = [];
+// 	}
+
+// 	function addKeys(style, result)
+// 	{
+// 		for (var key in style)
+// 		{
+// 			result.push(key);
+// 		}
+
+// 		return result;
+// 	};
+
+// 	var addEntry = mxUtils.bind(this, function(commonStyle, vertexStyle, edgeStyle, graphStyle, index)
+// 	{
+// 		var panel = this.format.cachedStyleEntries[index];
+		
+// 		if (panel == null)
+// 		{
+// 			panel = document.createElement('div');
+// 			panel.style.display = 'inline-block';
+// 			panel.style.position = 'relative';
+// 			panel.style.width = '96px';
+// 			panel.style.height = '90px';
+// 			panel.style.cursor = 'pointer';
+// 			panel.style.border = '1px solid gray';
+// 			panel.style.borderRadius = '8px';
+// 			panel.style.margin = '2px';
+// 			panel.style.overflow = 'hidden';
+	
+// 			if (graphStyle != null && graphStyle.background != null)
+// 			{
+// 				panel.style.backgroundColor = graphStyle.background;
+// 			}
 			
-			createPreview(commonStyle, vertexStyle, edgeStyle, graphStyle, panel); 
-	
-			mxEvent.addGestureListeners(panel, mxUtils.bind(this, function(evt)
-			{
-				panel.style.opacity = 0.5;
-			}), null, mxUtils.bind(this, function(evt)
-			{
-				panel.style.opacity = 1;
-				graph.currentVertexStyle = mxUtils.clone(graph.defaultVertexStyle);
-				graph.currentEdgeStyle = mxUtils.clone(graph.defaultEdgeStyle);
+// 			createPreview(commonStyle, vertexStyle, edgeStyle, graphStyle, panel); 
+	
+// 			mxEvent.addGestureListeners(panel, mxUtils.bind(this, function(evt)
+// 			{
+// 				panel.style.opacity = 0.5;
+// 			}), null, mxUtils.bind(this, function(evt)
+// 			{
+// 				panel.style.opacity = 1;
+// 				graph.currentVertexStyle = mxUtils.clone(graph.defaultVertexStyle);
+// 				graph.currentEdgeStyle = mxUtils.clone(graph.defaultEdgeStyle);
 				
-				applyStyle(commonStyle, graph.currentVertexStyle);
-				applyStyle(commonStyle, graph.currentEdgeStyle);
-				applyStyle(vertexStyle, graph.currentVertexStyle);
-				applyStyle(edgeStyle, graph.currentEdgeStyle);
-
-				if (urlParams['sketch'] == '1')
-				{
-					sketch = Editor.sketchMode;
-				}
+// 				applyStyle(commonStyle, graph.currentVertexStyle);
+// 				applyStyle(commonStyle, graph.currentEdgeStyle);
+// 				applyStyle(vertexStyle, graph.currentVertexStyle);
+// 				applyStyle(edgeStyle, graph.currentEdgeStyle);
+
+// 				if (urlParams['sketch'] == '1')
+// 				{
+// 					sketch = Editor.sketchMode;
+// 				}
 							
-				if (sketch)
-				{
-					graph.currentEdgeStyle['sketch'] = '1';
-					graph.currentVertexStyle['sketch'] = '1';
-				}
-				else
-				{
-					graph.currentEdgeStyle['sketch'] = '0';
-					graph.currentVertexStyle['sketch'] = '0';
-				}
+// 				if (sketch)
+// 				{
+// 					graph.currentEdgeStyle['sketch'] = '1';
+// 					graph.currentVertexStyle['sketch'] = '1';
+// 				}
+// 				else
+// 				{
+// 					graph.currentEdgeStyle['sketch'] = '0';
+// 					graph.currentVertexStyle['sketch'] = '0';
+// 				}
 					
-				if (rounded)
-				{
-					graph.currentVertexStyle['rounded'] = '1';
-					graph.currentEdgeStyle['rounded'] = '1';
-				}
-				else
-				{
-					graph.currentVertexStyle['rounded'] = '0';
-					graph.currentEdgeStyle['rounded'] = '1';
-				}
+// 				if (rounded)
+// 				{
+// 					graph.currentVertexStyle['rounded'] = '1';
+// 					graph.currentEdgeStyle['rounded'] = '1';
+// 				}
+// 				else
+// 				{
+// 					graph.currentVertexStyle['rounded'] = '0';
+// 					graph.currentEdgeStyle['rounded'] = '1';
+// 				}
 				
-				if (curved)
-				{
-					graph.currentEdgeStyle['curved'] = '1';
-				}
-				else
-				{
-					graph.currentEdgeStyle['curved'] = '0';
-				}
-	
-				model.beginUpdate();
-				try
-				{
-					updateCells(addKeys(commonStyle, defaultStyles.slice()), graphStyle);
+// 				if (curved)
+// 				{
+// 					graph.currentEdgeStyle['curved'] = '1';
+// 				}
+// 				else
+// 				{
+// 					graph.currentEdgeStyle['curved'] = '0';
+// 				}
+	
+// 				model.beginUpdate();
+// 				try
+// 				{
+// 					updateCells(addKeys(commonStyle, defaultStyles.slice()), graphStyle);
 					
-					var change = new ChangePageSetup(ui, (graphStyle != null) ? graphStyle.background : null);
-					change.ignoreImage = true;
-					model.execute(change);
+// 					var change = new ChangePageSetup(ui, (graphStyle != null) ? graphStyle.background : null);
+// 					change.ignoreImage = true;
+// 					model.execute(change);
 						
-					model.execute(new ChangeGridColor(ui,
-						(graphStyle != null && graphStyle.gridColor != null) ?
-						graphStyle.gridColor : gridColor));
-				}
-				finally
-				{
-					model.endUpdate();
-				}
-			}));
+// 					model.execute(new ChangeGridColor(ui,
+// 						(graphStyle != null && graphStyle.gridColor != null) ?
+// 						graphStyle.gridColor : gridColor));
+// 				}
+// 				finally
+// 				{
+// 					model.endUpdate();
+// 				}
+// 			}));
 			
-			mxEvent.addListener(panel, 'mouseenter', mxUtils.bind(this, function(evt)
-			{
-				var prev = graph.getCellStyle;
-				var prevBg = graph.background;
-				var prevGrid = graph.view.gridColor;
-	
-				graph.background = (graphStyle != null) ? graphStyle.background : null;
-				graph.view.gridColor = (graphStyle != null && graphStyle.gridColor != null) ?
-					graphStyle.gridColor : gridColor;
+// 			mxEvent.addListener(panel, 'mouseenter', mxUtils.bind(this, function(evt)
+// 			{
+// 				var prev = graph.getCellStyle;
+// 				var prevBg = graph.background;
+// 				var prevGrid = graph.view.gridColor;
+	
+// 				graph.background = (graphStyle != null) ? graphStyle.background : null;
+// 				graph.view.gridColor = (graphStyle != null && graphStyle.gridColor != null) ?
+// 					graphStyle.gridColor : gridColor;
 				
-				graph.getCellStyle = function(cell, resolve)
-				{
-					resolve = (resolve != null) ? resolve : true;
-					var result = mxUtils.clone(prev.apply(this, arguments));
+// 				graph.getCellStyle = function(cell, resolve)
+// 				{
+// 					resolve = (resolve != null) ? resolve : true;
+// 					var result = mxUtils.clone(prev.apply(this, arguments));
 					
-					var defaultStyle = graph.stylesheet.getDefaultVertexStyle();
-					var appliedStyle = vertexStyle;
+// 					var defaultStyle = graph.stylesheet.getDefaultVertexStyle();
+// 					var appliedStyle = vertexStyle;
 					
-					if (model.isEdge(cell))
-					{
-						defaultStyle = graph.stylesheet.getDefaultEdgeStyle();
-						appliedStyle = edgeStyle;	
-					}
+// 					if (model.isEdge(cell))
+// 					{
+// 						defaultStyle = graph.stylesheet.getDefaultEdgeStyle();
+// 						appliedStyle = edgeStyle;	
+// 					}
 					
-					removeStyles(result, defaultStyles, defaultStyle);
-					applyStyle(commonStyle, result, cell, graphStyle);
-					applyStyle(appliedStyle, result, cell, graphStyle);
+// 					removeStyles(result, defaultStyles, defaultStyle);
+// 					applyStyle(commonStyle, result, cell, graphStyle);
+// 					applyStyle(appliedStyle, result, cell, graphStyle);
 					
-					if (resolve)
-					{
-						result = this.postProcessCellStyle(cell, result);
-					}
+// 					if (resolve)
+// 					{
+// 						result = this.postProcessCellStyle(cell, result);
+// 					}
 					
-					return result;
-				};
+// 					return result;
+// 				};
 				
-				graph.refresh();
-				graph.getCellStyle = prev;
-				graph.background = prevBg;
-				graph.view.gridColor = prevGrid;
-			}));
+// 				graph.refresh();
+// 				graph.getCellStyle = prev;
+// 				graph.background = prevBg;
+// 				graph.view.gridColor = prevGrid;
+// 			}));
 			
-			mxEvent.addListener(panel, 'mouseleave', mxUtils.bind(this, function(evt)
-			{
-				graph.refresh();
-			}));
+// 			mxEvent.addListener(panel, 'mouseleave', mxUtils.bind(this, function(evt)
+// 			{
+// 				graph.refresh();
+// 			}));
 			
-			// Workaround for broken cache in IE11
-			if (!mxClient.IS_IE && !mxClient.IS_IE11)
-			{
-				this.format.cachedStyleEntries[index] = panel;
-			}
-		}
-		
-		entries.appendChild(panel);
-	});
-		
-	// Maximum palettes to switch the switcher
-	var maxEntries = 10;
-	var pageCount = Math.ceil(Editor.styles.length / maxEntries);
-	this.format.currentStylePage = (this.format.currentStylePage != null) ? this.format.currentStylePage : 0;
-	var dots = [];
-	
-	var addEntries = mxUtils.bind(this, function()
-	{
-		if (dots.length > 0)
-		{
-			dots[this.format.currentStylePage].style.background = '#84d7ff';
-		}
-		
-		for (var i = this.format.currentStylePage * maxEntries;
-			i < Math.min((this.format.currentStylePage + 1) * maxEntries,
-			Editor.styles.length); i++)
-		{
-			var s = Editor.styles[i];
-			addEntry(s.commonStyle, s.vertexStyle, s.edgeStyle, s.graph, i);
-		}
-	});
-	
-	var selectPage = mxUtils.bind(this, function(index)
-	{
-		if (index >= 0 && index < pageCount)
-		{
-			dots[this.format.currentStylePage].style.background = 'transparent';
-			entries.innerHTML = '';
-			this.format.currentStylePage = index;
-			addEntries();
-		}
-	});
-	
-	if (pageCount > 1)
-	{
-		// Selector
-		var switcher = document.createElement('div');
-		switcher.style.whiteSpace = 'nowrap';
-		switcher.style.position = 'relative';
-		switcher.style.textAlign = 'center';
-		switcher.style.paddingTop = '4px';
-		switcher.style.width = '210px';
-		
-		div.style.paddingBottom = '8px';
-		
-		for (var i = 0; i < pageCount; i++)
-		{
-			var dot = document.createElement('div');
-			dot.style.display = 'inline-block';
-			dot.style.width = '6px';
-			dot.style.height = '6px';
-			dot.style.marginLeft = '4px';
-			dot.style.marginRight = '3px';
-			dot.style.borderRadius = '3px';
-			dot.style.cursor = 'pointer';
-			dot.style.background = 'transparent';
-			dot.style.border = '1px solid #b5b6b7';
+// 			// Workaround for broken cache in IE11
+// 			if (!mxClient.IS_IE && !mxClient.IS_IE11)
+// 			{
+// 				this.format.cachedStyleEntries[index] = panel;
+// 			}
+// 		}
+		
+// 		entries.appendChild(panel);
+// 	});
+		
+// 	// Maximum palettes to switch the switcher
+// 	var maxEntries = 10;
+// 	var pageCount = Math.ceil(Editor.styles.length / maxEntries);
+// 	this.format.currentStylePage = (this.format.currentStylePage != null) ? this.format.currentStylePage : 0;
+// 	var dots = [];
+	
+// 	var addEntries = mxUtils.bind(this, function()
+// 	{
+// 		if (dots.length > 0)
+// 		{
+// 			dots[this.format.currentStylePage].style.background = '#84d7ff';
+// 		}
+		
+// 		for (var i = this.format.currentStylePage * maxEntries;
+// 			i < Math.min((this.format.currentStylePage + 1) * maxEntries,
+// 			Editor.styles.length); i++)
+// 		{
+// 			var s = Editor.styles[i];
+// 			addEntry(s.commonStyle, s.vertexStyle, s.edgeStyle, s.graph, i);
+// 		}
+// 	});
+	
+// 	var selectPage = mxUtils.bind(this, function(index)
+// 	{
+// 		if (index >= 0 && index < pageCount)
+// 		{
+// 			dots[this.format.currentStylePage].style.background = 'transparent';
+// 			entries.innerHTML = '';
+// 			this.format.currentStylePage = index;
+// 			addEntries();
+// 		}
+// 	});
+	
+// 	if (pageCount > 1)
+// 	{
+// 		// Selector
+// 		var switcher = document.createElement('div');
+// 		switcher.style.whiteSpace = 'nowrap';
+// 		switcher.style.position = 'relative';
+// 		switcher.style.textAlign = 'center';
+// 		switcher.style.paddingTop = '4px';
+// 		switcher.style.width = '210px';
+		
+// 		div.style.paddingBottom = '8px';
+		
+// 		for (var i = 0; i < pageCount; i++)
+// 		{
+// 			var dot = document.createElement('div');
+// 			dot.style.display = 'inline-block';
+// 			dot.style.width = '6px';
+// 			dot.style.height = '6px';
+// 			dot.style.marginLeft = '4px';
+// 			dot.style.marginRight = '3px';
+// 			dot.style.borderRadius = '3px';
+// 			dot.style.cursor = 'pointer';
+// 			dot.style.background = 'transparent';
+// 			dot.style.border = '1px solid #b5b6b7';
 			
-			(mxUtils.bind(this, function(index, elt)
-			{
-				mxEvent.addListener(dot, 'click', mxUtils.bind(this, function()
-				{
-					selectPage(index);
-				}));
-			}))(i, dot);
+// 			(mxUtils.bind(this, function(index, elt)
+// 			{
+// 				mxEvent.addListener(dot, 'click', mxUtils.bind(this, function()
+// 				{
+// 					selectPage(index);
+// 				}));
+// 			}))(i, dot);
 			
-			switcher.appendChild(dot);
-			dots.push(dot);
-		}
-		
-		div.appendChild(switcher);
-		addEntries();
-		
-		if (pageCount < 15)
-		{
-			var left = document.createElement('div');
-			left.style.position = 'absolute';
-			left.style.left = '0px';
-			left.style.top = '0px';
-			left.style.bottom = '0px';
-			left.style.width = '24px';
-			left.style.height = '24px';
-			left.style.margin = '0px';
-			left.style.cursor = 'pointer';
-			left.style.opacity = '0.5';
-			left.style.backgroundRepeat = 'no-repeat';
-			left.style.backgroundPosition = 'center center';
-			left.style.backgroundSize = '24px 24px';
-			left.style.backgroundImage = 'url(' + Editor.previousImage + ')';
+// 			switcher.appendChild(dot);
+// 			dots.push(dot);
+// 		}
+		
+// 		div.appendChild(switcher);
+// 		addEntries();
+		
+// 		if (pageCount < 15)
+// 		{
+// 			var left = document.createElement('div');
+// 			left.style.position = 'absolute';
+// 			left.style.left = '0px';
+// 			left.style.top = '0px';
+// 			left.style.bottom = '0px';
+// 			left.style.width = '24px';
+// 			left.style.height = '24px';
+// 			left.style.margin = '0px';
+// 			left.style.cursor = 'pointer';
+// 			left.style.opacity = '0.5';
+// 			left.style.backgroundRepeat = 'no-repeat';
+// 			left.style.backgroundPosition = 'center center';
+// 			left.style.backgroundSize = '24px 24px';
+// 			left.style.backgroundImage = 'url(' + Editor.previousImage + ')';
 			
-			if (Editor.isDarkMode())
-			{
-				left.style.filter = 'invert(100%)';
-			}
+// 			if (Editor.isDarkMode())
+// 			{
+// 				left.style.filter = 'invert(100%)';
+// 			}
 			
-			var right = left.cloneNode(false);
-			right.style.backgroundImage = 'url(' + Editor.nextImage + ')';
-			right.style.left = '';
-			right.style.right = '2px';
+// 			var right = left.cloneNode(false);
+// 			right.style.backgroundImage = 'url(' + Editor.nextImage + ')';
+// 			right.style.left = '';
+// 			right.style.right = '2px';
 
-			switcher.appendChild(left);
-			switcher.appendChild(right);
+// 			switcher.appendChild(left);
+// 			switcher.appendChild(right);
 			
-			mxEvent.addListener(left, 'click', mxUtils.bind(this, function()
-			{
-				selectPage(mxUtils.mod(this.format.currentStylePage - 1, pageCount));
-			}));
+// 			mxEvent.addListener(left, 'click', mxUtils.bind(this, function()
+// 			{
+// 				selectPage(mxUtils.mod(this.format.currentStylePage - 1, pageCount));
+// 			}));
 			
-			mxEvent.addListener(right, 'click', mxUtils.bind(this, function()
-			{
-				selectPage(mxUtils.mod(this.format.currentStylePage + 1, pageCount));
-			}));
+// 			mxEvent.addListener(right, 'click', mxUtils.bind(this, function()
+// 			{
+// 				selectPage(mxUtils.mod(this.format.currentStylePage + 1, pageCount));
+// 			}));
 					
-			// Hover state
-			function addHoverState(elt)
-			{
-				mxEvent.addListener(elt, 'mouseenter', function()
-				{
-					elt.style.opacity = '1';
-				});
-				mxEvent.addListener(elt, 'mouseleave', function()
-				{
-					elt.style.opacity = '0.5';
-				});
-			};
+// 			// Hover state
+// 			function addHoverState(elt)
+// 			{
+// 				mxEvent.addListener(elt, 'mouseenter', function()
+// 				{
+// 					elt.style.opacity = '1';
+// 				});
+// 				mxEvent.addListener(elt, 'mouseleave', function()
+// 				{
+// 					elt.style.opacity = '0.5';
+// 				});
+// 			};
 			
-			addHoverState(left);
-			addHoverState(right);
-		}
-	}
-	else
-	{
-		addEntries();
-	}
-	
-	return div;
-};
+// 			addHoverState(left);
+// 			addHoverState(right);
+// 		}
+// 	}
+// 	else
+// 	{
+// 		addEntries();
+// 	}
+	
+// 	return div;
+// };
 
 /**
  * Adds the label menu items to the given menu and parent.
  */
- DiagramStylePanel.prototype.destroy = function()
- {
-	 BaseFormatPanel.prototype.destroy.apply(this, arguments);
-	 
-	 if (this.darkModeChangedListener)
-	 {
-		 this.editorUi.removeListener(this.darkModeChangedListener);
-		 this.darkModeChangedListener = null;
-	 }
+ DiagramStylePanel.prototype.destroy = function () {
+   BaseFormatPanel.prototype.destroy.apply(this, arguments);
+
+   if (this.darkModeChangedListener) {
+     this.editorUi.removeListener(this.darkModeChangedListener);
+     this.darkModeChangedListener = null;
+   }
  };
  
 /**
@@ -6264,13 +6316,13 @@ DiagramFormatPanel.prototype.init = function()
 	var editor = ui.editor;
 	var graph = editor.graph;
 
-	this.container.appendChild(this.addView(this.createPanel()));
+	// this.container.appendChild(this.addView(this.createPanel()));
 
 	if (graph.isEnabled())
 	{
-		this.container.appendChild(this.addOptions(this.createPanel()));
-		this.container.appendChild(this.addPaperSize(this.createPanel()));
-		this.container.appendChild(this.addStyleOps(this.createPanel()));
+		// this.container.appendChild(this.addOptions(this.createPanel()));
+		// this.container.appendChild(this.addPaperSize(this.createPanel()));
+		// this.container.appendChild(this.addStyleOps(this.createPanel()));
 	}
 };
 

@@ -141,6 +141,7 @@ Sidebar.prototype.searchImage = (!mxClient.IS_SVG) ? IMAGE_PATH + '/search.png'
 
 /**
  * Specifies if tooltips should be visible. Default is true.
+ * 图标形状手指覆上去是否显示缩略图
  */
 Sidebar.prototype.enableTooltips = true;
 
@@ -151,6 +152,7 @@ Sidebar.prototype.tooltipBorder = 16;
 
 /**
  * Specifies the delay for the tooltip. Default is 300 ms.
+ * 图标形状手指覆上去延迟多少秒
  */
 Sidebar.prototype.tooltipDelay = 300;
 
@@ -224,11 +226,13 @@ Sidebar.prototype.tooltipTitles = true;
 
 /**
  * Specifies if titles in the tooltips should be enabled.
+ * 提示的框最大宽度
  */
 Sidebar.prototype.maxTooltipWidth = 400;
 
 /**
  * Specifies if titles in the tooltips should be enabled.
+ * 提示的框最大高度
  */
 Sidebar.prototype.maxTooltipHeight = 400;
 

@@ -178,6 +178,7 @@ deleteRow=删除行
 description=描述
 device=设备
 diagram=绘图
+pageSetting=页面设置
 diagramContent=绘图内容
 diagramLocked=绘图已经锁定以避免进一步的数据丢失。
 diagramLockedBySince=绘图已经在 {2} 之前被 {1} 锁定
@@ -718,6 +719,7 @@ straight=直线
 strikethrough=删除线
 strokeColor=线条颜色
 style=样式
+bindData=数据绑定
 subscript=下标
 summary=概要
 superscript=上标