feat: implement chart component

@@ -1109,7 +1109,7 @@
 		// 阀门
 		// 阀门
 		this.addValvePalette();
 		this.addValvePalette();
 		// 图表
 		// 图表
-		// this.addChartsPalette();
+		this.addChartsPalette();
 		// 风机
 		// 风机
 		this.addFanPalette();
 		this.addFanPalette();
 		// 污水处理
 		// 污水处理

 (function () {
 (function () {
+
+	const enumConst = {
+
+		/**
+		 * @description 图表cell 默认宽度
+		 */
+		CHART_CELL_DEFAULT_WIDTH: 400,
+
+		/**
+		 * @description 图表cell 默认高度
+		 */
+		CHART_CELL_DEFAULT_HEIGHT: 400,
+
+		/**
+		 * @description 图表cell的 width attribute
+		 */
+		CHART_CELL_WIDTH: 'width',
+
+		/**
+		 * @description 图表cell的 height attribute
+		 */
+		CHART_CELL_HEIGHT: 'height',
+
+		/**
+		 * @description cell 类型是否为 charts
+		 */
+		IS_CHART_COMP: 'charts',
+
+		/**
+		 * @description cell id key
+		 */
+		CHART_CELL_ID: 'chartInstanceId',
+
+		/**
+		 * @description 图表类型key
+		 */
+		CHART_CELL_TYPE: 'componentsType',
+
+		/**
+		 * @description 图表容器 class name
+		 */
+		CHART_CONTAINER_CLS: 'echarts__instance',
+
+		/**
+		 * @description 图表容器  id 前缀
+		 */
+		CHART_CONTAINER_ID_PREFIX: 'echarts__instance__',
+
+		/**
+		 * @description 图表图片占位符大小
+		 */
+		CHART_IMG_PLACEHOLDER_SIZE: 30,
+	}
+
 	// Adds Atlassian shapes
 	// Adds Atlassian shapes
 	// 图表
 	// 图表
 	Sidebar.prototype.addChartsPalette = function () {
 	Sidebar.prototype.addChartsPalette = function () {
+		const graph = this.graph
+		chartsComponentInit(graph)
 
 
-		const generatorId = () => `echarts__instance__${ Date.now() }`
+		const s = 'html=1;shadow=0;dashed=0;shape=mxgraph.atlassian.';
+		const s2 = 'html=1;shadow=0;dashed=0;fillColor=none;strokeColor=none;shape=mxgraph.bootstrap.rect;';
+		const s3 = mxConstants.STYLE_STROKEWIDTH + '=1;shadow=0;dashed=0;align=center;html=1;' + mxConstants.STYLE_SHAPE + "=mxgraph.mockup.";
+		const gn = 'mxgraph.charts';
+		const dt = 'charts ';
+		const sb = this;
+		this.setCurrentSearchEntryLibrary('charts');
+
+		const fns = [
+			this.addEntry('charts', mxUtils.bind(this, function () {
+				const id = generatorChartsId()
+				const cell = generatorCell(id, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumConst.CHART_IMG_PLACEHOLDER_SIZE, graph)
+				return this.createVertexTemplateFromCells([ cell ], cell.geometry.width, cell.geometry.height, 'charts');
+			})),
+		];
+
+		this.addPaletteFunctions('charts', '图表', false, fns);
+
+		this.setCurrentSearchEntryLibrary();
+	};
+
+	/**
+	 * @description 创建cell
+	 * @param id
+	 * @param width
+	 * @param height
+	 * @returns {*}
+	 */
+	function generatorCell(id, width, height, graph) {
+		const cell = new mxCell(createChartsNode(id, width, height), new mxGeometry(0, 0, width, height), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
+		cell.setVertex(true)
+		graph.setAttributeForCell(cell, enumConst.CHART_CELL_TYPE, 'charts');
+		graph.setAttributeForCell(cell, enumConst.CHART_CELL_ID, id);
+		graph.setAttributeForCell(cell, enumConst.CHART_CELL_WIDTH, width)
+		graph.setAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT, height)
+		return cell
+	}
+
+	function generatorChartsId() {
+		return `${ enumConst.CHART_CONTAINER_ID_PREFIX }${ Date.now() }`
+	}
+
+
+	function createChartsNode(id, width = 400, height = 400) {
+		const chartImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAAlUlEQVRIie2UWwqAIBBFD+0hqR21lVpuffRfC7GPJpAYNe1BQRcGxcc9MyrCrwxZiUtUXGX0FMAAbWxR7IiMhDY+yN4uF1ACPTACtTJuZa7KAbgmm1Gdau4DuOUPgb52dFGAlqFWTTRzDRAq372Pw+Z7QEe4fN+LOgyA9V0nm6QATulzX8U7ALO09kQE1QDTnYBfz2oBmQJYp8UoXcoAAAAASUVORK5CYII='
+		return `<div class="echarts__instance" style="width: ${ width }px; height: ${ height }px" id="${ id }"><img src="${ chartImg }" alt=""></div>`
+	}
+
+	/**
+	 * @description 折线图配置
+	 * @returns {{yAxis: {type: string}, xAxis: {data: string[], type: string}, series: [{data: number[], type: string}]}}
+	 */
+	function chartsLineChartsConfig() {
+		return {
+			xAxis: {
+				type: 'category',
+				data: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ],
+			},
+			yAxis: {
+				type: 'value',
+			},
+			series: [
+				{
+					data: [ 150, 230, 224, 218, 135, 147, 260 ],
+					type: 'line',
+				},
+			],
+		}
+	}
 
 
+	function chartsComponentInit(graph) {
+		const chartsInstanceMapping = new Map()
+
+		/**
+		 * @description 拓展添加charts 实例方法
+		 */
 		const addClickHandler = Sidebar.prototype.addClickHandler
 		const addClickHandler = Sidebar.prototype.addClickHandler
 		Sidebar.prototype.addClickHandler = function (elt, ds, cells) {
 		Sidebar.prototype.addClickHandler = function (elt, ds, cells) {
-			var graph = this.editorUi.editor.graph;
-			var tol = graph.tolerance;
 			const cell = cells[0]
 			const cell = cells[0]
 			const cellValue = cell.value
 			const cellValue = cell.value
-			const validate = cellValue && cellValue.nodeName === 'UserObject' && cellValue.getAttribute('componentsType') === 'charts'
-			const mouseDown = ds.mouseDown
+			const validate = cellValue && cellValue.nodeName === 'UserObject' && isChartCell(cell)
 
 
+			const mouseDown = ds.mouseDown
 			ds.mouseDown = function (evt) {
 			ds.mouseDown = function (evt) {
 				if (validate) {
 				if (validate) {
-					cell.value.setAttribute('id', generatorId())
-					graph.setAttributeForCell(cell, 'label', `<div class="echarts__instance" id="${ generatorId() }">${ generatorId() }</div>`)
+					const id = generatorChartsId()
+					const geo = Object.assign(graph.model.getGeometry(cell), { width: 400, height: 400 })
+					cell.setGeometry(geo)
+					graph.setAttributeForCell(cell, enumConst.CHART_CELL_ID, id);
+					graph.setAttributeForCell(cell, 'label', createChartsNode(id))
 				}
 				}
 				mouseDown.apply(this, arguments)
 				mouseDown.apply(this, arguments)
 			};
 			};
@@ -28,97 +159,116 @@
 					mouseUp.apply(this, arguments)
 					mouseUp.apply(this, arguments)
 				} finally {
 				} finally {
 					if (validate) {
 					if (validate) {
-						const id = cell.value.id
+						const id = getCellId(cell)
 						const chartDom = document.getElementById(id);
 						const chartDom = document.getElementById(id);
-						chartDom.style.width = '400px'
-						chartDom.style.height = '400px'
 						const myChart = echarts.init(chartDom);
 						const myChart = echarts.init(chartDom);
-						const option = {
-							xAxis: {
-								type: 'category',
-								data: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ],
-							},
-							yAxis: {
-								type: 'value',
-							},
-							series: [
-								{
-									data: [ 150, 230, 224, 218, 135, 147, 260 ],
-									type: 'line',
-								},
-							],
-						};
-
+						const option = chartsLineChartsConfig()
 						option && myChart.setOption(option);
 						option && myChart.setOption(option);
+						chartsInstanceMapping.set(id, myChart)
 					}
 					}
 				}
 				}
-				// const dom = document.getElementById()
 			}
 			}
 			addClickHandler.apply(this, arguments)
 			addClickHandler.apply(this, arguments)
 		}
 		}
 
 
-		const convertValueToString = this.graph.convertValueToString
-		this.graph.convertValueToString = function (cell) {
-			const cellValue = cell.value
-			const validate = cellValue && cellValue.nodeName === 'UserObject' && cellValue.getAttribute('componentsType') === 'charts'
-			if (validate) {
-				setTimeout(() => {
-					const id = cell.value.id
-					console.log(id)
-					const chartDom = document.getElementById(id);
-					chartDom.style.width = '400px'
-					chartDom.style.height = '400px'
-					const myChart = echarts.init(chartDom);
-					const option = {
-						xAxis: {
-							type: 'category',
-							data: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ],
-						},
-						yAxis: {
-							type: 'value',
-						},
-						series: [
-							{
-								data: [ 150, 230, 224, 218, 135, 147, 260 ],
-								type: 'line',
-							},
-						],
-					};
-
-					option && myChart.setOption(option);
-				})
-			}
+		/**
+		 * @description charts cell发生resize时改变charts size
+		 * @type {mxGraph.cellResized}
+		 */
+		const cellResized = mxGraph.prototype.cellResized
+		mxGraph.prototype.cellResized = function (cell, rect) {
+			const { width, height } = rect
+			const id = getCellId(cell)
+			const chartDom = document.getElementById(id)
+			chartDom.style.width = `${ width }px`
+			chartDom.style.height = `${ height }px`
+			graph.setAttributeForCell(cell, enumConst.CHART_CELL_WIDTH, width)
+			graph.setAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT, height)
+			const instance = chartsInstanceMapping.get(id)
+			instance.resize()
+			cellResized.apply(this, arguments)
+		}
 
 
-			return convertValueToString.apply(this, arguments)
+		/**
+		 * @description 删除charts cell 时 删除保存的charts 实例
+		 */
+		const deleteCells = Graph.prototype.deleteCells
+		Graph.prototype.deleteCells = function (cell) {
+			const id = getCellId(cell)
+			chartsInstanceMapping.delete(id)
+			return deleteCells.apply(this, arguments)
 		}
 		}
 
 
-		var s = 'html=1;shadow=0;dashed=0;shape=mxgraph.atlassian.';
-		var s2 = 'html=1;shadow=0;dashed=0;fillColor=none;strokeColor=none;shape=mxgraph.bootstrap.rect;';
-		var s3 = mxConstants.STYLE_STROKEWIDTH + '=1;shadow=0;dashed=0;align=center;html=1;' + mxConstants.STYLE_SHAPE + "=mxgraph.mockup.";
-		var gn = 'mxgraph.charts';
-		var dt = 'charts ';
-		var sb = this;
-		this.setCurrentSearchEntryLibrary('charts');
+		/**
+		 * @description 获取charts cell 的id
+		 * @param cell
+		 * @returns {*}
+		 */
+		function getCellId(cell) {
+			return graph.getAttributeForCell(cell, enumConst.CHART_CELL_ID)
+		}
 
 
-		const now = Date.now
-		var fns = [
-			this.addEntry('charts', mxUtils.bind(this, function () {
-				const id = generatorId()
-				var cell = new mxCell(`<div  id="${ id }" class="echarts__instance"></div>`, new mxGeometry(0, 0, 400, 400), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
-				cell.setVertex(true)
-				this.graph.setAttributeForCell(cell, 'placeholders', '1');
-				this.graph.setAttributeForCell(cell, 'componentsType', 'charts');
-				cell.value.setAttribute('id', id)
-				return this.createVertexTemplateFromCells([ cell ], cell.geometry.width, cell.geometry.height, 'charts');
-			})),
-		];
+		function generatorEChartInstance(id, width, height) {
+			const chartDom = document.getElementById(id);
+			chartDom.style.width = `${ width }px`
+			chartDom.style.height = `${ height }px`
+			const myChart = echarts.init(chartDom);
+			const option = chartsLineChartsConfig()
+			option && myChart.setOption(option);
+			chartsInstanceMapping.set(id, myChart)
+		}
 
 
-		this.addPaletteFunctions('charts', '图表', false, fns);
+		// 初始化图表
+		const openFileHandle = EditorUi.prototype.openFileHandle
+		EditorUi.prototype.openFileHandle = function () {
+			try {
+				openFileHandle.apply(this, arguments)
+			} finally {
+				const allCell = this.editor.graph.getDefaultParent().children
+				const domIdMapping = new Map()
+				for (const cell of allCell) {
+					const chartInstanceId = graph.getAttributeForCell(cell, enumConst.CHART_CELL_ID)
+					if (isChartCell(cell) && chartInstanceId) {
+						const width = graph.getAttributeForCell(cell, enumConst.CHART_CELL_WIDTH)
+						const height = graph.getAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT)
+						domIdMapping.set(chartInstanceId, { width, height })
+					}
+				}
+				const chartsDomList = document.querySelectorAll(`.${ enumConst.CHART_CONTAINER_CLS }`)
+				for (const chartDom of chartsDomList) {
+					const id = chartDom.getAttribute('id')
+					const { width, height } = domIdMapping.get(id)
+					generatorEChartInstance(id, width, height)
+				}
+			}
+		}
 
 
-		this.setCurrentSearchEntryLibrary();
-	};
-})();
+		/**
+		 * @description 是否是图表cell
+		 * @param cell
+		 * @returns {boolean}
+		 */
+		function isChartCell(cell) {
+			const componentsType = graph.getAttributeForCell(cell, enumConst.CHART_CELL_TYPE)
+			return !!(componentsType && componentsType === enumConst.IS_CHART_COMP)
+		}
 
 
-function testChartImg() {
-	return 'data:image/png;base64,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'
-}
+		const createTooltip = Sidebar.prototype.createTooltip
+		Sidebar.prototype.createTooltip = function (elt, cells) {
+			const id = generatorChartsId()
+			const validateFlag = isChartCell(cells[0])
+			try {
+				if (validateFlag) {
+					const cell = generatorCell(id, enumConst.CHART_CELL_DEFAULT_WIDTH, enumConst.CHART_CELL_DEFAULT_HEIGHT, graph)
+					const _arguments = Array.prototype.slice.call(arguments, 0)
+					_arguments.splice(1, 1, [ cell ])
+					createTooltip.apply(this, _arguments)
+				} else {
+					createTooltip.apply(this, arguments)
+				}
+			} finally {
+				if (validateFlag) generatorEChartInstance(id, enumConst.CHART_CELL_DEFAULT_WIDTH, enumConst.CHART_CELL_DEFAULT_HEIGHT)
+			}
+		}
+	}
+})();