feat: implement line component running dynamic effect

ww
1 parent 7cd64571
Showing 2 changed files with 78 additions and 16 deletions
src/main/webapp/js/diagramly/sidebar/Sidebar.js
src/main/webapp/js/grapheditor/Format.js
--- a/src/main/webapp/js/diagramly/sidebar/Sidebar.js
View file @0f93987
+++ b/src/main/webapp/js/diagramly/sidebar/Sidebar.js
View file @0f93987
@@ -321,9 +321,14 @@
 		SWITCH_STATE_SETTING: 'stateSetting',
 		/**
-		 * @description 只有单机事件
+		 * @description 只有单击事件
 		 */
-		ONLY_SINGLE_EVENT: 'onlySingleEvent'
+		ONLY_SINGLE_EVENT: 'onlySingleEvent',
+
+		/**
+		 * @description 运行于停止
+		 */
+		RUNNING_AND_STOP: 'runningAndStop'
 	}
 	/**
@@ -680,9 +685,9 @@
 		//更多图形，显示出来的的标题跟id，同时包括图片
 		// TODO thingsKit 设置数据绑定展示面板
-		const { LINE_CHART_EXPAND, BAR_CHART_EXPAND, DYNAMIC_EFFECT, DATA_SOURCE, VAR_IMAGE, INTERACTION, VIDEO: VIDEO_PANEL, SWITCH_STATE_SETTING, ONLY_SINGLE_EVENT } = this.enumPermissionPanel
+		const { LINE_CHART_EXPAND, BAR_CHART_EXPAND, DYNAMIC_EFFECT, DATA_SOURCE, VAR_IMAGE, INTERACTION, VIDEO: VIDEO_PANEL, SWITCH_STATE_SETTING, ONLY_SINGLE_EVENT, RUNNING_AND_STOP } = this.enumPermissionPanel
 		const { LINE, LINE_CHART, REAL_TIME, TITLE, VARIABLE, DEFAULT, BAR_CHART, VIDEO, SWITCH, PARAMS_SETTING_BUTTON } = this.enumComponentType
-		this.setComponentPermission(LINE, [DYNAMIC_EFFECT])
+		this.setComponentPermission(LINE, [RUNNING_AND_STOP, DYNAMIC_EFFECT])
 		this.setComponentPermission(DEFAULT, [DYNAMIC_EFFECT])
 		this.setComponentPermission(REAL_TIME, [DYNAMIC_EFFECT])
 		this.setComponentPermission(TITLE, [INTERACTION, DYNAMIC_EFFECT])
--- a/src/main/webapp/js/grapheditor/Format.js
View file @0f93987
+++ b/src/main/webapp/js/grapheditor/Format.js
View file @0f93987
@@ -5016,7 +5016,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         FLASH: 'FLASH',
         ROTATE: 'ROTATE',
         IMAGE: 'IMAGE',
-        SWITCH: 'SWITCH'
+        SWITCH: 'SWITCH',
+        RUNNING: 'RUNNING'
     }
     const interactionList = [
@@ -5133,7 +5134,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             [permissionKey.VAR_IMAGE]: createVarImagePanel,
             [permissionKey.VIDEO]: createVideoBindPanel,
             [permissionKey.SWITCH_STATE_SETTING]: createSwitchStateSettingPanel,
-            [permissionKey.ONLY_SINGLE_EVENT]: createParamsSettingButtonPanel
+            [permissionKey.ONLY_SINGLE_EVENT]: createParamsSettingButtonPanel,
+            [permissionKey.RUNNING_AND_STOP]: createRunningAndStopPanel
         }
@@ -5404,6 +5406,17 @@ DataFormatPanel.prototype.addDataFont = function (container) {
     }
     /**
+     * @description 运行停止
+     */
+    function createRunningAndStopPanel() {
+        dynamicEffectList.push({
+            label: '运行与停止',
+            type: enumDynamicEffectType.RUNNING,
+            category: enumCategory.ACT
+        })
+    }
+
+    /**
      * @description 是否是折线图
      * @param {boolean} isLineChart 
      */
@@ -6991,12 +7004,14 @@ DataFormatPanel.prototype.addDataFont = function (container) {
      */
     function handleDataDynamicEffect(event) {
-        const IS_DISPLAY = event.data.type === 'DISPLAY'
+        const IS_DISPLAY = event.data.type === enumDynamicEffectType.DISPLAY
+        const IS_RUNNING = event.data.type === enumDynamicEffectType.RUNNING
         const enumEventType = {
             FLASH: '闪烁',
             DISPLAY: '显示/隐藏',
             ROTATE: '旋转',
+            RUNNING: '运行于停止'
         }
         const enumActionEl = {
@@ -7031,6 +7046,18 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         const enumDisplayType = HandleDynamicEffect.enumDisplayType
+        const enumRunningType = HandleDynamicEffect.enumRunningType
+
+        const displayOptions = [
+            { name: '显示', id: enumDisplayType.SHOW },
+            { name: '隐藏', id: enumDisplayType.HIDDEN },
+        ]
+
+        const runningOptions = [
+            { name: '运行', id: enumRunningType.RUN },
+            { name: '停止', id: enumRunningType.STOP },
+        ]
+
         /**
          * @description
          */
@@ -7040,12 +7067,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             enabled: false
         }
-        function generatorDisplayOptions() {
-            const options = [
-                { name: '显示', id: enumDisplayType.SHOW },
-                { name: '隐藏', id: enumDisplayType.HIDDEN },
-            ]
-            const template = UseLayUi.generateOptionTemplate({ dataSource: options })
+        function generateStateOptions(options = []) {
+            const template = UseLayUi.generateOptionTemplate({ dataSource: options, addPlaceholderOption: false })
             return `
                 <div class="layui-form-item" style="margin-bottom: 0px">
                     <div class="layui-input-block" style="margin-left: 0px;">
@@ -7061,7 +7084,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         function addRecord() {
             const content = `
             <tr class="layui-form" lay-filter="${getRowFilter(addRowNumber)}">
-              ${IS_DISPLAY && `<td>${generatorDisplayOptions()}</td>`}
+              ${IS_DISPLAY && `<td>${generateStateOptions(displayOptions)}</td>`}
+              ${IS_RUNNING && `<td>${generateStateOptions(runningOptions)}</td>`}
               <td>
                 <input autocomplete="off" lay-verType="tips" lay-verify="required" type="number" name="${enumConst.MIN}" class="layui-input ${enumActionEl.MIN_FILTER}">
               </td>
@@ -7075,7 +7099,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             `
             addRowNumber++
             $(`#${enumActionEl.TABLE_BODY_EL}`).append(content)
-            if (IS_DISPLAY) {
+            if (IS_DISPLAY || IS_RUNNING) {
                 form.render()
             }
         }
@@ -7232,6 +7256,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                         <thead>
                         <tr>
                             ${IS_DISPLAY ? '<th style="text-align:center">类型</th>' : ''}
+                            ${IS_RUNNING ? '<th style="text-align:center">类型</th>' : ''}
                             <th style="text-align:center">最小值(>=)</th>
                             <th style="text-align:center">最大值(<=)</th>
                             <th style="text-align:center">操作</th>
@@ -7251,7 +7276,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 skin: 'event-layer__override',
                 btn: ['保存', '取消'],
                 offset: '100px',
-                area: IS_DISPLAY ? '1000px' : '800PX',
+                area: (IS_DISPLAY || IS_RUNNING) ? '1000px' : '800PX',
                 success(layero) {
                     $(layero).addClass('layui-form').find('.layui-layer-btn0').attr({
                         'lay-submit': '',
@@ -8166,8 +8191,11 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         $(`#${enumDynamicEffectType.FLASH}`).click({ type: enumDynamicEffectType.FLASH }, proxyFn(handleDataDynamicEffect));
         $(`#${enumDynamicEffectType.DISPLAY}`).click({ type: enumDynamicEffectType.DISPLAY }, proxyFn(handleDataDynamicEffect));
         $(`#${enumDynamicEffectType.ROTATE}`).click({ type: enumDynamicEffectType.ROTATE }, proxyFn(handleDataDynamicEffect));
+        $(`#${enumDynamicEffectType.RUNNING}`).click({ type: enumDynamicEffectType.RUNNING }, proxyFn(handleDataDynamicEffect))
         $(`#${enumDynamicEffectType.SWITCH}`).click({ type: enumDynamicEffectType.SWITCH }, proxyFn(handleStateSetting))
+
+
     });
 };
@@ -14001,6 +14029,7 @@ class HandleDynamicEffect {
         DISPLAY: 'DISPLAY',
         ROTATE: 'ROTATE',
         IMAGE: 'IMAGE',
+        RUNNING: 'RUNNING'
     }
     static enumDisplayType = {
@@ -14008,6 +14037,11 @@ class HandleDynamicEffect {
         HIDDEN: 'hidden',
     }
+    static enumRunningType = {
+        RUN: 'run',
+        STOP: 'stop'
+    }
+
     static enumVideoConst = {
         ORG_ID: 'orgId',
         RECORD_ID: 'id',
@@ -14199,6 +14233,9 @@ class HandleDynamicEffect {
             case HandleDynamicEffect.enumActType.IMAGE:
                 invoke = this.varImage.bind(this)
                 break
+            case HandleDynamicEffect.enumActType.RUNNING:
+                invoke = this.running.bind(this)
+                break
         }
         return invoke
     }
@@ -14327,6 +14364,26 @@ class HandleDynamicEffect {
         }
     }
+    running(message) {
+        const { subscriptionId, data = {} } = message
+        const { flag, condition } = this.validate(subscriptionId, HandleDynamicEffect.enumActType.RUNNING, data)
+        if (!flag) return
+        const node = this.getNodeByCmdId(subscriptionId)
+        let isRun = false
+        if (condition.type === HandleDynamicEffect.enumRunningType.RUN) {
+            isRun = true
+        } else if (condition.type === HandleDynamicEffect.enumRunningType.STOP) {
+            isRun = false
+        }
+
+        const updateFn = () => {
+            const reg = /flowAnimation[^;]+/
+            const style = node.getStyle()
+            node.setStyle(style.replace(reg, `flowAnimation=${isRun ? 1 : 0}`))
+        }
+        this.insertOnceUpdateFn(node, updateFn)
+    }
+
     /**
      * @description 播放视频
      */