perf: 优化组件样式绑定

@@ -353,14 +353,14 @@ Format.prototype.immediateRefresh = function () {
 		var label2 = label.cloneNode(false);
 		var label3 = label2.cloneNode(false);
 		var label4 = label3.cloneNode(false);
-	
 
+		
 		// Workaround for ignored background in IE
 		label2.style.backgroundColor = Format.inactiveTabBackgroundColor;
 		label3.style.backgroundColor = Format.inactiveTabBackgroundColor;
 		label4.style.backgroundColor = Format.inactiveTabBackgroundColor;
 		label4.style.borderStyle = 'none'
-		
+
 		// TODO Thingskit 新增数据绑定面板 Data Source Bind
 		if (hasDataSourceBindPanel) {
 			mxUtils.write(label4, mxResources.get('dataSourcePanel'))
@@ -4259,7 +4259,6 @@ StyleFormatPanel.prototype.addFill = function (container) {
 	});
 
 	mxEvent.addListener(fillStyleSelect, 'change', function (evt) {
-		console.log('enter')
 		graph.setCellStyles('fillStyle', fillStyleSelect.value, ss.cells);
 		ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['fillStyle'],
 			'values', [fillStyleSelect.value], 'cells', ss.cells));

@@ -15,9 +15,15 @@ mxAlarmListComponent.prototype.customProperties = [
 mxAlarmListComponent.prototype.shapeKey = 'mxgraph.thingskit/alarmListComponent'
 
 mxAlarmListComponent.prototype.paintVertexShape = function (c, x, y, w, h) {
+  this.paintBackground(c, x, y, w, h);
   this.foreground(c, x, y, w, h)
 }
 
+mxAlarmListComponent.prototype.paintBackground = function (svgCanvas, x, y, w, h) {
+  svgCanvas.rect(x, y, w, h);
+  svgCanvas.fillAndStroke()
+}
+
 mxAlarmListComponent.prototype.foreground = function (svgCanvas, x, y, w, h) {
   var cell = this.state.cell
   var status = getCellStatus(this.state.view.graph)

@@ -15,9 +15,15 @@ mxCircularFlowMeterComponent.prototype.customProperties = [
 mxCircularFlowMeterComponent.prototype.shapeKey = 'mxgraph.thingskit/circularFlowMeterComponent'
 
 mxCircularFlowMeterComponent.prototype.paintVertexShape = function (c, x, y, w, h) {
+  this.paintBackground(c, x, y, w, h)
   this.foreground(c, x, y, w, h)
 }
 
+mxCircularFlowMeterComponent.prototype.paintBackground = function (svgCanvas, x, y, w, h) {
+  svgCanvas.rect(x, y, w, h);
+  svgCanvas.fillAndStroke()
+}
+
 mxCircularFlowMeterComponent.prototype.foreground = function (svgCanvas, x, y, w, h) {
   var cell = this.state.cell
   var status = getCellStatus(this.state.view.graph)

@@ -15,9 +15,15 @@ mxDigitalClockComponent.prototype.customProperties = [
 mxDigitalClockComponent.prototype.shapeKey = 'mxgraph.thingskit/digitalClockComponent'
 
 mxDigitalClockComponent.prototype.paintVertexShape = function (c, x, y, w, h) {
+  this.paintBackground(c, x, y, w, h)
   this.foreground(c, x, y, w, h)
 }
 
+mxDigitalClockComponent.prototype.paintBackground = function (svgCanvas, x, y, w, h) {
+  svgCanvas.rect(x, y, w, h);
+  svgCanvas.fillAndStroke()
+}
+
 mxDigitalClockComponent.prototype.foreground = function (svgCanvas, x, y, w, h) {
   var cell = this.state.cell
   var status = getCellStatus(this.state.view.graph)

@@ -15,9 +15,15 @@ mxHistogramChartComponent.prototype.customProperties = [
 mxHistogramChartComponent.prototype.shapeKey = 'mxgraph.thingskit/histogramChartComponent'
 
 mxHistogramChartComponent.prototype.paintVertexShape = function (c, x, y, w, h) {
+  this.paintBackground(c, x, y, w, h)
   this.foreground(c, x, y, w, h)
 }
 
+mxHistogramChartComponent.prototype.paintBackground = function (svgCanvas, x, y, w, h) {
+  svgCanvas.rect(x, y, w, h);
+  svgCanvas.fillAndStroke()
+}
+
 mxHistogramChartComponent.prototype.foreground = function (svgCanvas, x, y, w, h) {
   var cell = this.state.cell
   var status = getCellStatus(this.state.view.graph)

@@ -15,9 +15,15 @@ mxImageComponent.prototype.customProperties = [
 mxImageComponent.prototype.shapeKey = 'mxgraph.thingskit/imageComponent'
 
 mxImageComponent.prototype.paintVertexShape = function (c, x, y, w, h) {
+  this.paintBackground(c, x, y, w, h)
   this.foreground(c, x, y, w, h)
 }
 
+mxImageComponent.prototype.paintBackground = function (svgCanvas, x, y, w, h) {
+  svgCanvas.rect(x, y, w, h);
+  svgCanvas.fillAndStroke()
+}
+
 mxImageComponent.prototype.foreground = function (svgCanvas, x, y, w, h) {
   var cell = this.state.cell
   var status = getCellStatus(this.state.view.graph)

@@ -15,9 +15,15 @@ mxInstrumentChartComponent.prototype.customProperties = [
 mxInstrumentChartComponent.prototype.shapeKey = 'mxgraph.thingskit/instrumentChartComponent'
 
 mxInstrumentChartComponent.prototype.paintVertexShape = function (c, x, y, w, h) {
+  this.paintBackground(c, x, y, w, h)
   this.foreground(c, x, y, w, h)
 }
 
+mxInstrumentChartComponent.prototype.paintBackground = function (svgCanvas, x, y, w, h) {
+  svgCanvas.rect(x, y, w, h);
+  svgCanvas.fillAndStroke()
+}
+
 mxInstrumentChartComponent.prototype.foreground = function (svgCanvas, x, y, w, h) {
   var cell = this.state.cell
   var status = getCellStatus(this.state.view.graph)

@@ -15,9 +15,15 @@ mxLineChartComponent.prototype.customProperties = [
 mxLineChartComponent.prototype.shapeKey = 'mxgraph.thingskit/lineChartComponent'
 
 mxLineChartComponent.prototype.paintVertexShape = function (c, x, y, w, h) {
+  this.paintBackground(c, x, y, w, h)
   this.foreground(c, x, y, w, h)
 }
 
+mxLineChartComponent.prototype.paintBackground = function (svgCanvas, x, y, w, h) {
+  svgCanvas.rect(x, y, w, h);
+  svgCanvas.fillAndStroke()
+}
+
 mxLineChartComponent.prototype.foreground = function (svgCanvas, x, y, w, h) {
   var cell = this.state.cell
   var status = getCellStatus(this.state.view.graph)

@@ -15,9 +15,15 @@ mxParameterSettingsComponent.prototype.customProperties = [
 mxParameterSettingsComponent.prototype.shapeKey = 'mxgraph.thingskit/parameterSettingsComponent'
 
 mxParameterSettingsComponent.prototype.paintVertexShape = function (c, x, y, w, h) {
+  this.paintBackground(c, x, y, w, h)
   this.foreground(c, x, y, w, h)
 }
 
+mxParameterSettingsComponent.prototype.paintBackground = function (svgCanvas, x, y, w, h) {
+  svgCanvas.rect(x, y, w, h);
+  svgCanvas.fillAndStroke()
+}
+
 mxParameterSettingsComponent.prototype.foreground = function (svgCanvas, x, y, w, h) {
   var cell = this.state.cell
   var status = getCellStatus(this.state.view.graph)

@@ -15,9 +15,15 @@ mxRectFlowMeterComponent.prototype.customProperties = [
 mxRectFlowMeterComponent.prototype.shapeKey = 'mxgraph.thingskit/rectFlowMeterComponent'
 
 mxRectFlowMeterComponent.prototype.paintVertexShape = function (c, x, y, w, h) {
+  this.paintBackground(c, x, y, w, h)
   this.foreground(c, x, y, w, h)
 }
 
+mxRectFlowMeterComponent.prototype.paintBackground = function (svgCanvas, x, y, w, h) {
+  svgCanvas.rect(x, y, w, h);
+  svgCanvas.fillAndStroke()
+}
+
 mxRectFlowMeterComponent.prototype.foreground = function (svgCanvas, x, y, w, h) {
   var cell = this.state.cell
   var status = getCellStatus(this.state.view.graph)

@@ -15,9 +15,15 @@ mxSwitchComponent.prototype.customProperties = [
 mxSwitchComponent.prototype.shapeKey = 'mxgraph.thingskit/switchComponent'
 
 mxSwitchComponent.prototype.paintVertexShape = function (c, x, y, w, h) {
+  this.paintBackground(c, x, y, w, h)
   this.foreground(c, x, y, w, h)
 }
 
+mxSwitchComponent.prototype.paintBackground = function (svgCanvas, x, y, w, h) {
+  svgCanvas.rect(x, y, w, h);
+  svgCanvas.fillAndStroke()
+}
+
 mxSwitchComponent.prototype.foreground = function (svgCanvas, x, y, w, h) {
   var cell = this.state.cell
   var status = getCellStatus(this.state.view.graph)

@@ -15,9 +15,15 @@ mxThermometerComponent.prototype.customProperties = [
 mxThermometerComponent.prototype.shapeKey = 'mxgraph.thingskit/thermometerComponent'
 
 mxThermometerComponent.prototype.paintVertexShape = function (c, x, y, w, h) {
+  this.paintBackground(c, x, y, w, h)
   this.foreground(c, x, y, w, h)
 }
 
+mxThermometerComponent.prototype.paintBackground = function (svgCanvas, x, y, w, h) {
+  svgCanvas.rect(x, y, w, h);
+  svgCanvas.fillAndStroke()
+}
+
 mxThermometerComponent.prototype.foreground = function (svgCanvas, x, y, w, h) {
   var cell = this.state.cell
   var status = getCellStatus(this.state.view.graph)

@@ -15,9 +15,15 @@ mxVariableImageComponent.prototype.customProperties = [
 mxVariableImageComponent.prototype.shapeKey = 'mxgraph.thingskit/variableImageComponent'
 
 mxVariableImageComponent.prototype.paintVertexShape = function (c, x, y, w, h) {
+  this.paintBackground(c, x, y, w, h)
   this.foreground(c, x, y, w, h)
 }
 
+mxVariableImageComponent.prototype.paintBackground = function (svgCanvas, x, y, w, h) {
+  svgCanvas.rect(x, y, w, h);
+  svgCanvas.fillAndStroke()
+}
+
 mxVariableImageComponent.prototype.foreground = function (svgCanvas, x, y, w, h) {
   var cell = this.state.cell
   var status = getCellStatus(this.state.view.graph)

@@ -13,9 +13,15 @@ mxVideoComponent.prototype.customProperties = [{ componentType: 'text' }]
 mxVideoComponent.prototype.shapeKey = 'mxgraph.thingskit/videoComponent'
 
 mxVideoComponent.prototype.paintVertexShape = function (c, x, y, w, h) {
+  //  this.paintBackground(c, x, y, w, h)
   this.foreground(c, x, y, w, h)
 }
 
+mxVideoComponent.prototype.paintBackground = function (svgCanvas, x, y, w, h) {
+  svgCanvas.rect(x, y, w, h);
+  svgCanvas.fillAndStroke()
+}
+
 mxVideoComponent.prototype.foreground = function (svgCanvas, x, y, w, h) {
   var cell = this.state.cell
   cell.setAttribute('shapeKey', this.shapeKey)