Merge branch 'ww' into 'main'

feat: implement chart component

See merge request huang/thingskit-drawio!20

@@ -3655,18 +3655,19 @@
 			
 			if (!this.isOffline() && file.title == '.scratchpad' && EditorUi.scratchpadHelpLink != null)
 			{
-				var link = document.createElement('span');
-				link.setAttribute('title', mxResources.get('help'));
-				link.style.cssText = 'color:#a3a3a3;text-decoration:none;margin-right:2px;cursor:pointer;';
-				mxUtils.write(link, '?');
-				
-				mxEvent.addGestureListeners(link, mxUtils.bind(this, function(evt)
-				{
-					this.openLink(EditorUi.scratchpadHelpLink);
-					mxEvent.consume(evt);
-				}));
-				
-				buttons.insertBefore(link, buttons.firstChild);
+				// TODO thingsKit 隐藏 Sidebar 便笺本 ？
+				// var link = document.createElement('span');
+				// link.setAttribute('title', mxResources.get('help'));
+				// link.style.cssText = 'color:#a3a3a3;text-decoration:none;margin-right:2px;cursor:pointer;';
+				// mxUtils.write(link, '?');
+				//
+				// mxEvent.addGestureListeners(link, mxUtils.bind(this, function(evt)
+				// {
+				// 	this.openLink(EditorUi.scratchpadHelpLink);
+				// 	mxEvent.consume(evt);
+				// }));
+				//
+				// buttons.insertBefore(link, buttons.firstChild);
 			}
 		}
 		

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

 (function () {
+
 	// Adds Atlassian shapes
 	// 图表
 	Sidebar.prototype.addChartsPalette = function () {
+		const { enumConst, enumChartType, generatorCell, generatorChartsId } = this.chartsComponentExtend()
 
-		const generatorId = () => `echarts__instance__${ Date.now() }`
-
-		const addClickHandler = Sidebar.prototype.addClickHandler
-		Sidebar.prototype.addClickHandler = function (elt, ds, cells) {
-			var graph = this.editorUi.editor.graph;
-			var tol = graph.tolerance;
-			const cell = cells[0]
-			const cellValue = cell.value
-			const validate = cellValue && cellValue.nodeName === 'UserObject' && cellValue.getAttribute('componentsType') === 'charts'
-			const mouseDown = ds.mouseDown
-
-			ds.mouseDown = function (evt) {
-				if (validate) {
-					cell.value.setAttribute('id', generatorId())
-					graph.setAttributeForCell(cell, 'label', `<div class="echarts__instance" id="${ generatorId() }">${ generatorId() }</div>`)
-				}
-				mouseDown.apply(this, arguments)
+		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('line chart', mxUtils.bind(this, function () {
+				const id = generatorChartsId()
+				const cell = generatorCell(id, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumChartType.LINE_CHART)
+				return this.createVertexTemplateFromCells([ cell ], cell.geometry.width, cell.geometry.height, '折线图');
+			})),
+			this.addEntry('bar chart', mxUtils.bind(this, function () {
+				const id = generatorChartsId()
+				const cell = generatorCell(id, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumChartType.BAR_CHART, '/thingskit-drawio/images/thingskit/bar-chart.png')
+				return this.createVertexTemplateFromCells([ cell ], cell.geometry.width, cell.geometry.height, '柱状图');
+			})),
+		];
+
+		this.addPaletteFunctions('charts', '图表', false, fns);
+
+		this.setCurrentSearchEntryLibrary();
+	};
+
+	Sidebar.prototype.chartsInstanceMapping = new Map()
+
+	/**
+	 * @description 图表组件 拓展
+	 * @returns {{generatorChartsId: (function(): string), createChartsNode: (function(*, *=, *=): string), chartsLineChartsConfig: (function(): {yAxis: {type: string}, xAxis: {data, type: string}, series: [{data, type: string}]}), generatorCell: (function(*, *, *): *), chartsComponentInit: chartsComponentInit}}
+	 */
+	Sidebar.prototype.chartsComponentExtend = 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
+			 */
+			CHART_COMP: 'charts',
+
+			/**
+			 * @description cell id key
+			 */
+			CHART_CELL_ID: 'chartInstanceId',
+
+			/**
+			 * @description 组件类型 key
+			 */
+			COMPONENTS_TYPE_KEY: 'componentsType',
+
+			/**
+			 * @description 图表容器 class name
+			 */
+			CHART_CONTAINER_CLS: 'echarts__instance',
+
+			/**
+			 * @description 图表容器  id 前缀
+			 */
+			CHART_CONTAINER_ID_PREFIX: 'echarts__instance__',
+
+			/**
+			 * @description 图表图片占位符大小
+			 */
+			CHART_IMG_PLACEHOLDER_SIZE: 30,
+
+			/**
+			 * @description 图表类型 key
+			 */
+			CHART_TYPE_KEY: 'chartType',
+		}
+
+		const enumChartType = {
+			LINE_CHART: 'lineChart',
+			BAR_CHART: 'barChart',
+		}
+
+		const chartOptionMapping = {
+			[enumChartType.LINE_CHART]: chartsLineChartsConfig,
+			[enumChartType.BAR_CHART]: chartsBarChartConfig,
+		}
+
+		const graph = this.graph
+
+		chartsComponentInit()
+
+		/**
+		 * @description 创建cell
+		 * @param id
+		 * @param width
+		 * @param height
+		 * @param chartType
+		 * @param placeholderPath
+		 * @returns {*}
+		 */
+		function generatorCell(id, width, height, chartType, placeholderPath) {
+			const cell = new mxCell(createChartsNode(id, width, height, placeholderPath), 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.COMPONENTS_TYPE_KEY, '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)
+			graph.setAttributeForCell(cell, enumConst.CHART_TYPE_KEY, chartType)
+			return cell
+		}
+
+		/**
+		 * @description 生成图表 id
+		 * @returns {string}
+		 */
+		function generatorChartsId() {
+			return `${ enumConst.CHART_CONTAINER_ID_PREFIX }${ Date.now() }`
+		}
+
+		/**
+		 * @description 创建图表节点
+		 * @param id
+		 * @param width
+		 * @param height
+		 * @param placeholderPath
+		 * @returns {string}
+		 */
+		function createChartsNode(id, width = 400, height = 400, placeholderPath = '/thingskit-drawio/images/thingskit/line-chart.png') {
+			return `<div class="echarts__instance" style="width: ${ width }px; height: ${ height }px" id="${ id }"><img src="${ placeholderPath }" 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',
+					},
+				],
+			}
+		}
+
+		/**
+		 * @description 柱状图
+		 * @returns {{yAxis: {type: string}, xAxis: {data: string[], type: string}, series: [{data: number[], showBackground: boolean, backgroundStyle: {color: string}, type: string}]}}
+		 */
+		function chartsBarChartConfig() {
+			return {
+				xAxis: {
+					type: 'category',
+					data: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ],
+				},
+				yAxis: {
+					type: 'value',
+				},
+				series: [
+					{
+						data: [ 120, 200, 150, 80, 70, 110, 130 ],
+						type: 'bar',
+						showBackground: true,
+						backgroundStyle: {
+							color: 'rgba(180, 180, 180, 0.2)',
+						},
+					},
+				],
 			};
+		}
 
-			const mouseUp = ds.mouseUp
-			ds.mouseUp = function () {
-				try {
-					mouseUp.apply(this, arguments)
-				} finally {
+		/**
+		 * @description 图表组件 拓展处理
+		 */
+		function chartsComponentInit() {
+			const chartsInstanceMapping = Sidebar.prototype.chartsInstanceMapping
+
+			/**
+			 * @description 拓展添加charts 实例方法
+			 */
+			const addClickHandler = Sidebar.prototype.addClickHandler
+			Sidebar.prototype.addClickHandler = function (elt, ds, cells) {
+				const cell = cells[0]
+				const cellValue = cell.value
+				const validate = cellValue && cellValue.nodeName === 'UserObject' && isChartCell(cell)
+
+				/**
+				 * @description 拓展Sidebar鼠标按下
+				 * @type {ds.mouseDown}
+				 */
+				const mouseDown = ds.mouseDown
+				ds.mouseDown = function (evt) {
 					if (validate) {
-						const id = cell.value.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);
+						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, enumConst.CHART_CELL_WIDTH, enumConst.CHART_CELL_DEFAULT_WIDTH);
+						graph.setAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT, enumConst.CHART_CELL_DEFAULT_HEIGHT);
+						graph.setAttributeForCell(cell, 'label', createChartsNode(id))
+					}
+					mouseDown.apply(this, arguments)
+				};
+
+				/**
+				 * @description 拓展放置图表
+				 * @type {ds.mouseUp}
+				 */
+				const mouseUp = ds.mouseUp
+				ds.mouseUp = function () {
+					try {
+						mouseUp.apply(this, arguments)
+					} finally {
+						if (validate) {
+							const id = getCellId(cell)
+							const chartType = graph.getAttributeForCell(cell, enumConst.CHART_TYPE_KEY)
+							const chartDom = document.getElementById(id);
+							const myChart = echarts.init(chartDom);
+							const option = chartOptionMapping[chartType] ? chartOptionMapping[chartType]() : {}
+							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 {Function}
+			 */
+			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');
-			})),
-		];
+			/**
+			 * @description 创建图表实例 并 保存实例到map中
+			 * @param id
+			 * @param width
+			 * @param height
+			 * @param chartType
+			 */
+			function generatorEChartInstance(id, width, height, chartType) {
+				const chartDom = document.getElementById(id);
+				chartDom.style.width = `${ width }px`
+				chartDom.style.height = `${ height }px`
+				const myChart = echarts.init(chartDom);
+				const option = chartOptionMapping[chartType] ? chartOptionMapping[chartType]() : {}
+				option && myChart.setOption(option);
+				chartsInstanceMapping.set(id, myChart)
+			}
 
-		this.addPaletteFunctions('charts', '图表', false, fns);
+			/**
+			 * @description 初始化图表
+			 */
+			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)
+							const chartType = graph.getAttributeForCell(cell, enumConst.CHART_TYPE_KEY)
+							domIdMapping.set(chartInstanceId, { width, height, chartType })
+						}
+					}
+					const chartsDomList = document.querySelectorAll(`.${ enumConst.CHART_CONTAINER_CLS }`)
+					for (const chartDom of chartsDomList) {
+						const id = chartDom.getAttribute('id')
+						const { width, height, chartType } = domIdMapping.get(id)
+						console.log(chartType)
+						generatorEChartInstance(id, width, height, chartType)
+					}
+				}
+			}
 
-		this.setCurrentSearchEntryLibrary();
-	};
-})();
+			/**
+			 * @description 是否是图表cell
+			 * @param cell
+			 * @returns {boolean}
+			 */
+			function isChartCell(cell) {
+				const componentsType = graph.getAttributeForCell(cell, enumConst.COMPONENTS_TYPE_KEY)
+				return !!(componentsType && componentsType === enumConst.CHART_COMP)
+			}
 
-function testChartImg() {
-	return 'data:image/png;base64,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'
-}
\ No newline at end of file
+			/**
+			 * @description 拓展Sidebar 提示框
+			 */
+			const createTooltip = Sidebar.prototype.createTooltip
+			Sidebar.prototype.createTooltip = function (elt, cells) {
+				const id = generatorChartsId()
+				const validateFlag = isChartCell(cells[0])
+				const chartType = graph.getAttributeForCell(cells[0], enumConst.CHART_TYPE_KEY)
+				try {
+					if (validateFlag) {
+						const cell = generatorCell(id, enumConst.CHART_CELL_DEFAULT_WIDTH, enumConst.CHART_CELL_DEFAULT_HEIGHT, chartType)
+						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, chartType)
+				}
+			}
+		}
+
+		return {
+			generatorCell,
+			generatorChartsId,
+			createChartsNode,
+			chartsComponentInit,
+			chartsLineChartsConfig,
+			enumConst,
+			enumChartType,
+		}
+	}
+
+})();

@@ -4879,6 +4879,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
     const ss = ui.getSelectionState();
     const vertices = ss.vertices || []
 
+    console.log(Sidebar.prototype)
+    console.log(Sidebar.prototype.chartsInstanceMapping)
     // console.log(this.editorUi)
     console.log(vertices)