feat: implement socket push message to update variable image

ww
1 parent 51eb5277
Showing 4 changed files with 102 additions and 37 deletions
src/main/webapp/js/diagramly/sidebar/Sidebar.js
src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Basic-Components.js
src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Charts.js
src/main/webapp/js/grapheditor/Format.js
--- a/src/main/webapp/js/diagramly/sidebar/Sidebar.js
View file @08602c0
+++ b/src/main/webapp/js/diagramly/sidebar/Sidebar.js
View file @08602c0
@@ -158,6 +158,31 @@
 		}
 	}
+	/**
+	 * @description	枚举cell的基本属性
+	 */
+	Sidebar.prototype.enumCellBasicAttribute = {
+
+		/**
+		 * @description 组件类型
+		 */
+		COMPONENT_TYPE: 'componentType'
+	}
+
+	/**
+	 * @description 枚举组件类型
+	 */
+	Sidebar.prototype.enumComponentType = {
+		/**
+		 * @description 变量图片类型
+		 */
+		VAR_IMAGE: 'variableImage',
+
+		/**
+		 * @description 图表类型
+		 */
+		CHARTS: 'charts'
+	}
 	/**
--- a/src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Basic-Components.js
View file @08602c0
+++ b/src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Basic-Components.js
View file @08602c0
@@ -14,8 +14,22 @@
                 cell.vertex = true;
                 this.graph.setAttributeForCell(cell, 'placeholders', '1');
                 this.graph.setAttributeForCell(cell, 'currentDate', currentDate);
-                return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'realTime');
+                return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '实时时间');
             })),
+            this.addEntry(this.getTagsForStencil('mxgraph.basic', '变量图片', 'basic').join(' '), mxUtils.bind(this, function () {
+                const cell = new mxCell('', new mxGeometry(0, 0, 194, 95), 'image;image=images/thingskit/img-placeholder.png;imageAspect=0;');
+                cell.setVertex(true)
+                this.setCellAttributes(cell, { componentType: 'variableImage' })
+                return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '变量图片');
+            }))
+            // this.addEntry('variableImage', mxUtils.bind(this, function () {
+            //     const imagePlaceholder = '/thingskit-drawio/images/thingskit/img-placeholder.png';
+            //     const template = `<div><img src="${imagePlaceholder}" alt=""></div>`;
+            //     const cell = new mxCell(template, new mxGeometry(0, 0, 194, 195), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
+            //     cell.vertex = true;
+            //     this.graph.setAttributeForCell(cell, 'componentType', 'variableImage');
+            //     return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '变量图片');
+            // }))
         ];
         this.addPaletteFunctions('component', '基础元件', true, fns);
--- a/src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Charts.js
View file @08602c0
+++ b/src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Charts.js
View file @08602c0
@@ -21,12 +21,12 @@
 			this.addEntry('line chart', mxUtils.bind(this, function () {
 				const id = self.generatorChartsId()
 				const cell = self.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, '折线图');
+				return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '折线图');
 			})),
 			this.addEntry('bar chart', mxUtils.bind(this, function () {
 				const id = self.generatorChartsId()
 				const cell = self.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, '柱状图');
+				return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '柱状图');
 			})),
 		];
@@ -43,7 +43,7 @@
 	/**
 	 * @description Sidebar 类型枚举
-	 * @type {{CHART_CELL_DEFAULT_WIDTH: number, CHART_CELL_HEIGHT: string, CHART_CELL_DEFAULT_HEIGHT: number, CHART_TYPE_KEY: string, CHART_CELL_WIDTH: string, CHART_COMP: string, CHART_CELL_ID: string, CHART_CONTAINER_ID_PREFIX: string, CHART_IMG_PLACEHOLDER_SIZE: number, COMPONENTS_TYPE_KEY: string, CHART_CONTAINER_CLS: string}}
+	 * @type {{CHART_CELL_DEFAULT_WIDTH: number, CHART_CELL_HEIGHT: string, CHART_CELL_DEFAULT_HEIGHT: number, CHART_TYPE_KEY: string, CHART_CELL_WIDTH: string, CHART_COMP: string, CHART_CELL_ID: string, CHART_CONTAINER_ID_PREFIX: string, CHART_IMG_PLACEHOLDER_SIZE: number, COMPONENT_TYPE_KEY: string, CHART_CONTAINER_CLS: string}}
 	 */
 	Sidebar.prototype.enumConst = {
@@ -70,7 +70,7 @@
 		/**
 		 * @description cell 类型是否为 charts
 		 */
-		CHART_COMP: 'charts',
+		CHART_COMP: Sidebar.prototype.enumComponentType.CHARTS,
 		/**
 		 * @description cell id key
@@ -80,7 +80,7 @@
 		/**
 		 * @description 组件类型 key
 		 */
-		COMPONENTS_TYPE_KEY: 'componentsType',
+		COMPONENT_TYPE_KEY: Sidebar.prototype.enumCellBasicAttribute.COMPONENT_TYPE,
 		/**
 		 * @description 图表容器 class name
@@ -121,14 +121,14 @@
 			return {
 				xAxis: {
 					type: 'category',
-					data: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ],
+					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
 				},
 				yAxis: {
 					type: 'value',
 				},
 				series: [
 					{
-						data: [ 150, 230, 224, 218, 135, 147, 260 ],
+						data: [150, 230, 224, 218, 135, 147, 260],
 						type: 'line',
 					},
 				],
@@ -138,14 +138,14 @@
 			return {
 				xAxis: {
 					type: 'category',
-					data: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ],
+					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
 				},
 				yAxis: {
 					type: 'value',
 				},
 				series: [
 					{
-						data: [ 120, 200, 150, 80, 70, 110, 130 ],
+						data: [120, 200, 150, 80, 70, 110, 130],
 						type: 'bar',
 						showBackground: true,
 						backgroundStyle: {
@@ -170,7 +170,7 @@
 		const enumConst = this.enumConst
 		const cell = new mxCell(this.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)
-		this.graph.setAttributeForCell(cell, enumConst.COMPONENTS_TYPE_KEY, 'charts');
+		this.graph.setAttributeForCell(cell, enumConst.COMPONENT_TYPE_KEY, 'charts');
 		this.graph.setAttributeForCell(cell, enumConst.CHART_CELL_ID, id);
 		this.graph.setAttributeForCell(cell, enumConst.CHART_CELL_WIDTH, width)
 		this.graph.setAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT, height)
@@ -185,7 +185,7 @@
 	 */
 	Sidebar.prototype.generatorChartsId = function () {
 		const enumConst = Sidebar.prototype.enumConst
-		return `${ enumConst.CHART_CONTAINER_ID_PREFIX }${ Date.now() }`
+		return `${enumConst.CHART_CONTAINER_ID_PREFIX}${Date.now()}`
 	}
 	/**
@@ -197,7 +197,7 @@
 	 * @returns {string}
 	 */
 	Sidebar.prototype.createChartsNode = function (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>`
+		return `<div class="echarts__instance" style="width: ${width}px; height: ${height}px" id="${id}"><img src="${placeholderPath}" alt=""></div>`
 	}
 	/**
@@ -207,8 +207,8 @@
 	 */
 	Sidebar.prototype.isChartCell = function (cell) {
 		const enumConst = Sidebar.prototype.enumConst
-		const componentsType = cell.getAttribute(enumConst.COMPONENTS_TYPE_KEY)
-		return !!(componentsType && componentsType === enumConst.CHART_COMP)
+		const componentType = cell.getAttribute(enumConst.COMPONENT_TYPE_KEY)
+		return !!(componentType && componentType === enumConst.CHART_COMP)
 	}
 	/**
@@ -222,8 +222,8 @@
 		const chartOptionMapping = this.chartOptionMapping
 		const chartsInstanceMapping = this.chartsInstanceMapping
 		const chartDom = document.getElementById(id);
-		chartDom.style.width = `${ width }px`
-		chartDom.style.height = `${ height }px`
+		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);
@@ -304,8 +304,8 @@
 				const { width, height } = rect
 				const id = self.getCellId(cell)
 				const chartDom = document.getElementById(id)
-				chartDom.style.width = `${ width }px`
-				chartDom.style.height = `${ height }px`
+				chartDom.style.width = `${width}px`
+				chartDom.style.height = `${height}px`
 				self.graph.setAttributeForCell(cell, enumConst.CHART_CELL_WIDTH, width)
 				self.graph.setAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT, height)
 				const instance = chartsInstanceMapping.get(id)
@@ -338,7 +338,7 @@
 				if (validateFlag) {
 					const cell = self.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 ])
+					_arguments.splice(1, 1, [cell])
 					createTooltip.apply(this, _arguments)
 				} else {
 					createTooltip.apply(this, arguments)
@@ -366,7 +366,7 @@
 				domIdMapping.set(chartInstanceId, { width, height, chartType })
 			}
 		}
-		const chartsDomList = document.querySelectorAll(`.${ enumConst.CHART_CONTAINER_CLS }`)
+		const chartsDomList = document.querySelectorAll(`.${enumConst.CHART_CONTAINER_CLS}`)
 		for (const chartDom of chartsDomList) {
 			const id = chartDom.getAttribute('id')
 			if (!domIdMapping.has(id)) {
--- a/src/main/webapp/js/grapheditor/Format.js
View file @08602c0
+++ b/src/main/webapp/js/grapheditor/Format.js
View file @08602c0
@@ -5657,7 +5657,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 			/**
 			 * @description 图表图形路径
 			 */
-			IMAGE_GALLERY_IMG_PATH: 'imgPath',
+			IMAGE_GALLERY_IMAGE_PATH: 'imagePath',
 		}
 		const enumImageOriginType = {
@@ -5719,7 +5719,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 				form.val(rowFilter, {
 					[enumConst.IMAGE_ORIGIN]: null,
 					[enumConst.IMAGE_GALLERY_CATEGORY]: null,
-					[enumConst.IMAGE_GALLERY_IMG_PATH]: null,
+					[enumConst.IMAGE_GALLERY_IMAGE_PATH]: null,
 				})
 			})
 		}
@@ -5760,7 +5760,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 			$(`.${enumActionEl.IMAGE_DEL_PREVIEW_EL}`).on('click', (event) => {
 				event.stopPropagation()
 				$(`#${enumActionEl.IMAGE_PREVIEW_EL}`).attr('src', '')
-				imageState[enumConst.IMAGE_GALLERY_IMG_PATH] = null
+				imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH] = null
 			})
 			const uploadInst = upload.render({
 				elem: `#${enumActionEl.UPLOAD_LOCAL_FILE_EL}`,
@@ -5776,7 +5776,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 						if (!err) {
 							$(`#${enumActionEl.IMAGE_PREVIEW_EL}`).attr('src', result)
 							const { fileStaticUri = '' } = res
-							imageState[enumConst.IMAGE_GALLERY_IMG_PATH] = fileStaticUri
+							imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH] = fileStaticUri
 						}
 					});
 				},
@@ -5817,12 +5817,12 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 		function generatorSelectImgEventListener() {
 			$(`#${enumActionEl.VAR_IMG_CONTAINER_CONTENT}`).on('click', event => {
 				setImageSelectedStyle(event, enumActionEl.VAR_IMG_ITEM, enumActionEl.VAR_IMG_ITEM_CHECKED)
-				imageState[enumConst.IMAGE_GALLERY_IMG_PATH] = $(event.target).find('img').attr('src')
+				imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH] = $(event.target).find('img').attr('src')
 			})
 			$(`#${enumActionEl.VAR_IMG_CONTAINER_SIDEBAR}`).on('click', event => {
 				setImageSelectedStyle(event, enumActionEl.VAR_IMG_CATEGORY, enumActionEl.VAR_IMG_CATEGORY_CHECKED)
 				imageState[enumConst.IMAGE_GALLERY_CATEGORY] = $(event.target).attr(enumConst.IMAGE_GALLERY_CATEGORY)
-				imageState[enumConst.IMAGE_GALLERY_IMG_PATH] = null
+				imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH] = null
 				switchGalleryLib(event)
 			})
 		}
@@ -5874,13 +5874,14 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 		function setCheckedImg(rowFilter) {
 			$(`#${enumActionEl.TABLE_BODY_EL}`)
 				.find(`tr[lay-filter="${rowFilter}"]`)
-				.find('img').attr('src', imageState[enumConst.IMAGE_GALLERY_IMG_PATH])
+				.find('img').attr('src', imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH])
 			form.val(rowFilter, {
 				[enumConst.IMAGE_ORIGIN]: imageState[enumConst.IMAGE_ORIGIN],
 				[enumConst.IMAGE_GALLERY_CATEGORY]: imageState[enumConst.IMAGE_GALLERY_CATEGORY],
-				[enumConst.IMAGE_GALLERY_IMG_PATH]: imageState[enumConst.IMAGE_GALLERY_IMG_PATH],
+				[enumConst.IMAGE_GALLERY_IMAGE_PATH]: imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH],
 			})
+
 		}
 		/**
@@ -5984,7 +5985,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 <td>
                 	  <div class="${enumActionEl.SET_IMG_EL}">
 											<input name="${enumConst.IMAGE_GALLERY_CATEGORY}" type="text" style="display: none">
-											<input name="${enumConst.IMAGE_GALLERY_IMG_PATH}" type="text" style="display: none">
+											<input name="${enumConst.IMAGE_GALLERY_IMAGE_PATH}" type="text" style="display: none">
 											<input name="${enumConst.IMAGE_ORIGIN}" type="text" style="display: none">
 											<div class="${enumActionEl.PREVIEW_IMG_CONTAINER}">
 											<img src="" alt="">
@@ -6025,7 +6026,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 			condition.forEach((item, index) => {
 				addRecord()
 				const rowFilter = getRowFilter(index)
-				$(`#${enumActionEl.TABLE_BODY_EL}`).find(`.${enumActionEl.PREVIEW_IMG_CONTAINER}>img`).attr('src', item[enumConst.IMAGE_GALLERY_IMG_PATH])
+				$(`#${enumActionEl.TABLE_BODY_EL}`).find(`tr[lay-filter="${rowFilter}"] .${enumActionEl.PREVIEW_IMG_CONTAINER}>img`).attr('src', item[enumConst.IMAGE_GALLERY_IMAGE_PATH])
 				form.val(rowFilter, { ...item })
 			})
 		}
@@ -6123,9 +6124,9 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 					const { component, echoDataSource, getValue } = generatorDataSourceComponent()
 					getDataSourceValue = getValue
 					$(`#${enumActionEl.DATA_SOURCE_COMP_EL}`).append(component)
-					const info = getLayerBindInfo('act', type)
+					const info = getLayerBindInfo('act', type) || {}
 					const { condition = [] } = info
-					if (!info && !condition.length) {
+					if (!condition.length) {
 						addRecord()
 					} else {
 						echoDataSource(info)
@@ -12138,6 +12139,7 @@ class DispatchCenter {
 	 * @description 分发事件
 	 */
 	publishEvent(eventName, data, message, event, ws) {
+		data = data ? data : {}
 		Object.keys(data).forEach(() => {
 			this.eventBus.emit(eventName, message, event, ws)
 		})
@@ -12401,6 +12403,9 @@ class HandleDataInteraction {
 	}
 }
+/**
+ * @description 处理数据
+ */
 class HandleDynamicEffect {
 	/**
@@ -12441,6 +12446,7 @@ class HandleDynamicEffect {
 		FLASH: 'FLASH',
 		DISPLAY: 'DISPLAY',
 		ROTATE: 'ROTATE',
+		IMAGE: 'IMAGE',
 	}
 	static enumDisplayType = {
@@ -12510,7 +12516,7 @@ class HandleDynamicEffect {
 			tsSubCmds.push(this.generatorMessage(slaveDeviceId ? slaveDeviceId : deviceId, cmdId, attr))
-			this.subscribeEvent(cmdId, this.dispatch(type), attr)
+			this.subscribeEvent(cmdId, this.dispatch(type))
 		})
 		this.sendMsg({ tsSubCmds })
 	}
@@ -12567,6 +12573,9 @@ class HandleDynamicEffect {
 			case HandleDynamicEffect.enumActType.FLASH:
 				invoke = this.flash.bind(this)
 				break
+			case HandleDynamicEffect.enumActType.IMAGE:
+				invoke = this.varImage.bind(this)
+				break
 		}
 		return invoke
 	}
@@ -12576,7 +12585,7 @@ class HandleDynamicEffect {
 	 * @param message
 	 * @param attr
 	 */
-	rotate(message, attr) {
+	rotate(message) {
 		const { subscriptionId, data } = message
 		const node = this.getNodeByCmdId(subscriptionId)
 		const { flag } = this.validate(subscriptionId, DispatchCenter.enumDynamicEffectType.ROTATE, data)
@@ -12603,7 +12612,7 @@ class HandleDynamicEffect {
 	 * @param message
 	 * @param attr
 	 */
-	display(message, attr) {
+	display(message) {
 		const { subscriptionId, data = {} } = message
 		const { flag, condition } = this.validate(subscriptionId, HandleDynamicEffect.enumActType.DISPLAY, data)
 		if (!flag) return
@@ -12627,7 +12636,7 @@ class HandleDynamicEffect {
 	 * @param message
 	 * @param attr
 	 */
-	flash(message, attr) {
+	flash(message) {
 		const { subscriptionId, data } = message
 		const node = this.getNodeByCmdId(subscriptionId)
 		const { flag, condition } = this.validate(subscriptionId, HandleDynamicEffect.enumActType.FLASH, data)
@@ -12647,6 +12656,23 @@ class HandleDynamicEffect {
 	}
 	/**
+	 * @description 处理变量图片
+	 */
+	varImage(message) {
+		const { subscriptionId, data } = message
+		const node = this.getNodeByCmdId(subscriptionId)
+		const { flag, condition } = this.validate(subscriptionId, HandleDynamicEffect.enumActType.IMAGE, data)
+		if (flag && node) {
+			const { imagePath } = condition
+			this.insertOnceUpdateFn(
+				node,
+				() => {
+					node.setStyle(`image;image=${imagePath};imageAspect=0;`)
+				})
+		}
+	}
+
+	/**
 	 * @description 验证是否满足条件列表中的任意一条
 	 * @param subscriptionId
 	 * @param type