Merge branch 'ww' into 'main'

merge: fix some bug && perf some function See merge request huang/thingskit-drawio!28

Merge branch 'ww' into 'main'
merge: fix some bug && perf some function See merge request huang/thingskit-drawio!28
xp.Huang
2 parents 5b576b67 8e8125a5
Showing 2 changed files with 234 additions and 131 deletions
src/main/webapp/js/diagramly/LocalFile.js
src/main/webapp/js/grapheditor/Format.js
--- a/src/main/webapp/js/diagramly/LocalFile.js
View file @dba90c5
+++ b/src/main/webapp/js/diagramly/LocalFile.js
View file @dba90c5
@@ -195,8 +195,7 @@ LocalFile.prototype.saveFile = function (title, revision, success, error, useCur
 					this.removeDraft();
 					Editor.defaultContent = savedData;
 					var configurationContentList = [];
-					const basicAttr = Sidebar.prototype.enumCellBasicAttribute
-					const allCell = (this.ui.editor.graph.getDefaultParent().children || []).filter(item => item.getAttribute(basicAttr.COMPONENT_TYPE))
+					const allCell = this.ui.editor.graph.getModel().cells || {}
 					const contentId = this.ui.currentPage.node.id
 					var configurationContent = {
 						name: "第 1 页",
@@ -204,12 +203,12 @@ LocalFile.prototype.saveFile = function (title, revision, success, error, useCur
 						contentId,
 						content: savedData,
 						type: 1,
-						nodeIds: allCell.map(item => item.id)
+						nodeIds: Object.keys(allCell)
 					};
 					configurationContentList.push(configurationContent);
 					var parmam = { configurationId: Editor.configurationId, configurationContentList };
 					defHttp.put("/yt/configuration/content", parmam).then(res => {
-						console.log(res)
+						// console.log(res)
 					})
 				}
 				catch (e) {
--- a/src/main/webapp/js/grapheditor/Format.js
View file @dba90c5
+++ b/src/main/webapp/js/grapheditor/Format.js
View file @dba90c5
@@ -372,6 +372,7 @@ Format.prototype.immediateRefresh = function () {
     div.style.color = "rgb(112, 112, 112)";
     div.style.textAlign = "left";
     div.style.cursor = "default";
+    div.style.display = 'flex'
     var label = document.createElement("div");
     label.className = "geFormatSection";
@@ -385,6 +386,7 @@ Format.prototype.immediateRefresh = function () {
     label.style.height = "25px";
     label.style.overflow = "hidden";
     label.style.width = "100%";
+    label.style.flex = 'auto'
     this.container.appendChild(div);
     // Prevents text selection
@@ -401,6 +403,24 @@ Format.prototype.immediateRefresh = function () {
     var currentLabel = null;
     var currentPanel = null;
+
+    /**
+     * @description 验证是否有数据绑定面板
+     * @returns {boolean}
+     */
+    const validateHasDataSourcePanel = () => {
+        const ui = this.editorUi;
+        const ss = ui.getSelectionState();
+        const vertices = ss.vertices || []
+        const sidebarInstance = ui.sidebar
+        const cell = vertices[0]
+        if (!cell) return false
+        const basicAttr = sidebarInstance.enumCellBasicAttribute
+        const componentType = cell.getAttribute(basicAttr.COMPONENT_TYPE)
+        const hasPermission = sidebarInstance.getComponentPermission(componentType)
+        return !!hasPermission.length
+    }
+
     var addClickHandler = mxUtils.bind(
         this,
         function (elt, panel, index, lastEntry) {
@@ -433,6 +453,8 @@ Format.prototype.immediateRefresh = function () {
                         currentPanel.style.display = "";
                     }
                 }
+
+                if (!validateHasDataSourcePanel()) this.currentIndex = 0
             });
             mxEvent.addListener(elt, "click", clickHandler);
@@ -584,14 +606,16 @@ Format.prototype.immediateRefresh = function () {
         this.panels.push(new ArrangePanel(this, ui, arrangePanel));
         this.container.appendChild(arrangePanel);
-        // bind data
-        mxUtils.write(label4, "数据绑定");
-        div.appendChild(label4);
+        if (validateHasDataSourcePanel()) {
+            // bind data
+            mxUtils.write(label4, "数据绑定");
+            div.appendChild(label4);
-        var dataPanel = div.cloneNode(false);
-        dataPanel.style.display = "none";
-        this.panels.push(new DataFormatPanel(this, ui, dataPanel));
-        this.container.appendChild(dataPanel);
+            var dataPanel = div.cloneNode(false);
+            dataPanel.style.display = "none";
+            this.panels.push(new DataFormatPanel(this, ui, dataPanel));
+            this.container.appendChild(dataPanel);
+        }
         if (ss.cells.length > 0) {
             addClickHandler(label2, textPanel, idx++);
@@ -5044,11 +5068,18 @@ DataFormatPanel.prototype.addDataFont = function (container) {
     }
     /**
-     * @description 刷新页面
+     * @description 刷新页面 用于在其他位置调用更新数据面板的操作，默认是个空函数，在生成数据源面板中进行了拓展
      */
     function echoRefreshFn() {
     }
+    /**
+     * @description 用于在其他位置获取数据源绑定的数据，在生成数据源面板中进行了改写
+     */
+    function getDataSourceBindValue() {
+
+    }
+
     // 获取url的请求参数函数
     function getRequest() {
@@ -5130,6 +5161,9 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         await echoActionType()
     }
+    /**
+     * @description 回显动效类型
+     */
     async function echoActionType() {
         const act = currentNodeData.act ?? []
         const event = currentNodeData.event ?? []
@@ -5189,7 +5223,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         async function mount() {
-            const { component, echoDataSource } = generatorDataSourceComponent({ validate: false })
+            const { component, echoDataSource, getValue } = generatorDataSourceComponent({ validate: false })
             $(fragment).append(title).append(component)
             $(container).append(fragment)
@@ -5204,6 +5238,9 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 echoDataSource(dataSource)
                 form.render(null, CONTAINER_FILTER)
             }
+
+            // 改写获取数据源绑定的值
+            getDataSourceBindValue = getValue
         }
         mount()
@@ -5920,26 +5957,26 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             const content = `
               <tr class="layui-form" lay-filter="${rowFormFilter}">
                 <td>
-	                 <div class="layui-form-item">
-											<input class="layui-input ${enumActionEl.MIN_FILTER}" autocomplete="off" type="number" name="${enumConst.MIN}" lay-filter="${enumConst.MIN}" lay-verType="tips" lay-verify="required" />
-				   				 </div>
+                    <div class="layui-form-item">
+                        <input class="layui-input ${enumActionEl.MIN_FILTER}" autocomplete="off" type="number" name="${enumConst.MIN}" lay-filter="${enumConst.MIN}" lay-verType="tips" lay-verify="required" />
+                    </div>
                 </td>
                 <td>
-	                 <div class="layui-form-item">
-											<input class="layui-input ${enumActionEl.MAX_FILTER}"" autocomplete="off" type="number" name="${enumConst.MAX}" lay-filter="${enumConst.MAX}" lay-verType="tips" lay-verify="required" />
-				    			</div>
+                    <div class="layui-form-item">
+                        <input class="layui-input ${enumActionEl.MAX_FILTER}"" autocomplete="off" type="number" name="${enumConst.MAX}" lay-filter="${enumConst.MAX}" lay-verType="tips" lay-verify="required" />
+                    </div>
                 </td>
                 <td>
-                	  <div class="${enumActionEl.SET_IMG_EL}">
-											<input name="${enumConst.IMAGE_GALLERY_CATEGORY}" 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="">
-											<div class="${enumActionEl.DEL_PREVIEW_IMG}">x</div>
-											<div class="add__button">+</div>
-										</div>
-									</div>
+                    <div class="${enumActionEl.SET_IMG_EL}">
+                        <input name="${enumConst.IMAGE_GALLERY_CATEGORY}" 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="">
+                            <div class="${enumActionEl.DEL_PREVIEW_IMG}">x</div>
+                            <div class="add__button">+</div>
+                        </div>
+                    </div>
                 </td>
 <!--                <td>-->
 <!--                    <div style="display: flex">-->
@@ -6164,6 +6201,11 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          */
         let orgId = null
+        const recordData = {
+            orgId: null,
+            enabled: false
+        }
+
         const getRowFilter = (rowNumber) => `${enumActionEl.ROW_FILTER}${rowNumber}`
         /**
@@ -6208,8 +6250,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          * @description 创建回显数据 查询出所有网关设备和直连设备
          */
         async function getAllGatewayDeviceAndConnectionDevice() {
-            if (!orgId) return
-            const [err, res] = await to(ConfigurationNodeApi.getAllGatewayDeviceAndConnectionDevice(orgId))
+            if (!recordData.orgId) return
+            const [err, res] = await to(ConfigurationNodeApi.getAllGatewayDeviceAndConnectionDevice(recordData.orgId))
             allDeviceOptions = res
             mountAllDeviceToSelect()
         }
@@ -6259,7 +6301,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     data: treeList,
                     onlyIconControl: true,
                     click(node) {
-                        orgId = node.data.id
+                        recordData.orgId = node.data.id
                         getAllGatewayDeviceAndConnectionDevice()
                     },
                 },
@@ -6369,7 +6411,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          * @description 回显表单数据
          */
         function echoFormData(info) {
-            const { content: { data = [] } = {}, orgId } = info
+            const { content: { data = [] } = {} } = info
             data.forEach((datum, index) => {
                 addRecord(datum)
                 form.val(getRowFilter(index), datum)
@@ -6380,9 +6422,11 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          * @description 回显组织树
          */
         function echoOrgTree(id) {
-            orgId = id
+            recordData.orgId = id
             const node = UseLayUi.findTreeObjectByField(treeList, id)
-            UseLayUi.nextTick(() => $(`#${enumActionEl.ORG_EL} input[name="${enumConst.ORG_ID}"]`).val(orgId).parent().find('span').html(node?.name))
+            UseLayUi.nextTick(() => {
+                $(`#${enumActionEl.ORG_EL} input[name="${enumConst.ORG_ID}"]`).val(recordData.orgId).parent().find('span').html(node?.name)
+            })
         }
         /**
@@ -6426,6 +6470,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             return validateFlag
         }
+
+
         /**
          * @description 保存
          */
@@ -6433,8 +6479,9 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             const data = Array.from({ length: addRowNumber }).map((_, row) => form.val(getRowFilter(row))).filter(item => Object.keys(item).length)
             if (!validate(data)) return
             const formModal = {
+                ...recordData,
                 configurationId,
-                orgId,
+                // orgId,
                 contentId: currentPageId.id,
                 id: graphId,
                 content: {
@@ -6523,10 +6570,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                         'lay-submit': '',
                         'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER,
                     })
-                    createOrgTreeSelect()
+                    await createOrgTreeSelect()
                     const info = getLayerBindInfo('event', type)
-                    const { content: { data = [] } = {}, orgId: recordOrgId } = info
-                    orgId = recordOrgId
+                    const { content: { data = [] } = {}, orgId, enabled } = info
+                    Object.assign(recordData, { orgId, enabled })
                     await getAllGatewayDeviceAndConnectionDevice()
                     if (!info || !data.length) {
                         addRecord()
@@ -6535,7 +6582,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     }
                     generatorEventListen()
                     form.render()
-                    echoOrgTree(recordOrgId)
+                    echoOrgTree(orgId)
                 },
             })
         }
@@ -6607,6 +6654,13 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         }
         /**
+         * @description 
+         */
+        const recordData = {
+            enabled: false
+        }
+
+        /**
          * @description 回显数据
          */
         function echoFormData(data) {
@@ -6633,6 +6687,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 contentId: currentPageId.id,
                 id: graphId,
                 orgId: 'b4dd6e2b-6e0f-413c-bf5a-70133bd571e8',
+                ...recordData,
                 content: {
                     type: formVal[enumConst.ACTION],
                     value: formVal[enumGetValue[formVal[enumConst.ACTION]]],
@@ -6741,6 +6796,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     })
                     generatorEventListen()
                     const info = getLayerBindInfo('event', type)
+                    Object.assign(recordData, { enabled: info.enabled })
                     form.render(null, enumActionEl.FORM_FILTER)
                     if (info) echoFormData(info)
                 },
@@ -6801,6 +6857,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          */
         let addRowNumber = 0
+        const recordData = {
+            enabled: false
+        }
+
         function generatorDisplayOptions() {
             const options = [
                 { name: '显示', id: enumDisplayType.SHOW },
@@ -6959,6 +7019,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 id: graphId,
                 condition: tableData,
                 type: event.data.type,
+                ...recordData
             }
             await to(autoSaveGraphInfo())
             const [err, res] = await to(ConfigurationNodeApi.updateNodeAct(formModel))
@@ -7024,7 +7085,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     $(`#${enumActionEl.DATA_SOURCE_COMP_EL}`).append(component)
                     form.render()
                     const info = getLayerBindInfo('act', type)
-                    const { condition = [] } = info
+                    const { condition = [], enabled } = info
+                    Object.assign(recordData, { enabled })
                     if (info && condition.length) {
                         echoDataSource(info)
                         echoData(info)
@@ -7417,17 +7479,16 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          */
         function createLocalFileContainer() {
             return `
-						<div id="${enumActionEl.UPLOAD_LOCAL_FILE_EL}" class="layui-upload">
-							<div class="preview__img">
-								<img src="" class="layui-upload-img" id="${enumActionEl.IMAGE_PREVIEW_EL}">
-								<div class="var_image__add-icon">+</div>
-								<div class="var-image__del-icon">x</div>
-							</div>
-							<div class="layui-upload-list"></div>
-						</div>
-						<div id="${enumActionEl.IMAGE_UPLOAD_STATE_EL}"></div>
-						<div style="margin-top: 30px;">图片格式支持png、jpg(jpeg)、gif, 大小不能超过5M</div>
-					`
+                <div id="${enumActionEl.UPLOAD_LOCAL_FILE_EL}" class="layui-upload">
+                    <div class="preview__img">
+                        <img src="" class="layui-upload-img" id="${enumActionEl.IMAGE_PREVIEW_EL}">
+                        <div class="var_image__add-icon">+</div>
+                        <div class="var-image__del-icon">x</div>
+                    </div>
+                    <div class="layui-upload-list"></div>
+                </div>
+                <div style="margin-top: 10px;" id="${enumActionEl.IMAGE_UPLOAD_STATE_EL}"></div>
+                <div style="margin-top: 10px;">图片格式支持png、jpg(jpeg)、gif, 大小不能超过5M</div>`
         }
         /**
@@ -7437,15 +7498,14 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             const category = sidebarInstance.getAllVariableImageLib()
             const defaultShow = category[0] || { lib: [] }
             return `
-					<div class="var-image__container--gallery">
-							<div id="${enumActionEl.VAR_IMG_CONTAINER_SIDEBAR}">
-							 ${category.reduce((prev, next) => prev + `<div class="${enumActionEl.VAR_IMG_CATEGORY}" ${enumConst.IMAGE_GALLERY_CATEGORY}="${next.key}">${next.label}</div>`, '')}
-							</div>
-							<div id="${enumActionEl.VAR_IMG_CONTAINER_CONTENT}">
-							${defaultShow.lib.reduce((prev, next) => prev + `<div class="${enumActionEl.VAR_IMG_ITEM}" title="${next.name}"><img src="${next.staticPath}" alt=""></div>`, '')}
-							</div>
-						</div>
-				`
+                <div class="var-image__container--gallery">
+                        <div id="${enumActionEl.VAR_IMG_CONTAINER_SIDEBAR}">
+                            ${category.reduce((prev, next) => prev + `<div class="${enumActionEl.VAR_IMG_CATEGORY}" ${enumConst.IMAGE_GALLERY_CATEGORY}="${next.key}">${next.label}</div>`, '')}
+                        </div>
+                        <div id="${enumActionEl.VAR_IMG_CONTAINER_CONTENT}">
+                        ${defaultShow.lib.reduce((prev, next) => prev + `<div class="${enumActionEl.VAR_IMG_ITEM}" title="${next.name}"><img src="${next.staticPath}" alt=""></div>`, '')}
+                        </div>
+                    </div>`
         }
         /**
@@ -7464,14 +7524,20 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 url: '/yt/oss/upload',
                 method: 'post',
                 choose(obj) {
+                    console.log('enter choose')
                     obj.preview(async function (index, file, result) {
                         const formData = new FormData()
                         formData.set('file', file)
+                        $(`#${enumActionEl.IMAGE_UPLOAD_STATE_EL}`).html('上传中...')
                         const [err, res] = await to(ConfigurationNodeApi.uploadImg(formData))
                         if (!err) {
                             $(`#${enumActionEl.IMAGE_PREVIEW_EL}`).attr('src', result)
                             const { fileStaticUri = '' } = res
                             imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH] = fileStaticUri
+                            $(`#${enumActionEl.IMAGE_UPLOAD_STATE_EL}`).html('上传成功').css({ color: '#5fb878' })
+                        } else {
+                            console.log(err)
+                            $(`#${enumActionEl.IMAGE_UPLOAD_STATE_EL}`).html('上传失败').css({ color: 'red' })
                         }
                     });
                 },
@@ -7545,9 +7611,9 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     imageState = {}
                     layer.close(index)
                 },
-                zIndex: layer.zIndex,
+                // zIndex: layer.zIndex,
                 async success(layero, index) {
-                    layer.setTop(layero);
+                    // layer.setTop(layero);
                     $(layero).addClass('layui-form').find('.layui-layer-btn0').attr({
                         'lay-submit': '',
                         'lay-filter': enumActionEl.IMAGE_LAYER_FILTER,
@@ -7565,17 +7631,31 @@ DataFormatPanel.prototype.addDataFont = function (container) {
     //  异步设置此处才能生效 -- 设置默认select和样式和初始化侧边栏生成组件和事件绑定
     setTimeout(() => {
+        function proxyFn(fn) {
+            return (...args) => {
+                const currentDataSource = getDataSourceBindValue() || {}
+                
+                to(ConfigurationNodeApi.updateNodeInfo({
+                    configurationId,
+                    contentId: currentPageId.id,
+                    nodeId: graphId,
+                    [enumCategory.DATA_SOURCE]: currentDataSource
+                }))
+                fn.apply(null, args)
+            }
+        }
+
         // TODO 数据交互事件
-        $(`#${enumDynamicEffectType.IMAGE}`).click({ type: enumDynamicEffectType.IMAGE }, handleSettingVarImage);
+        $(`#${enumDynamicEffectType.IMAGE}`).click({ type: enumDynamicEffectType.IMAGE }, proxyFn(handleSettingVarImage));
-        $(`#${enumInteractionType.DOWN}`).click({ type: enumInteractionType.DOWN }, handleDownOrUpEvent);
-        $(`#${enumInteractionType.UP}`).click({ type: enumInteractionType.UP }, handleDownOrUpEvent);
-        $(`#${enumInteractionType.SINGLE}`).click({ type: enumInteractionType.SINGLE }, handleClickOrDbClick);
-        $(`#${enumInteractionType.DOUBLE}`).click({ type: enumInteractionType.DOUBLE }, handleClickOrDbClick);
+        $(`#${enumInteractionType.DOWN}`).click({ type: enumInteractionType.DOWN }, proxyFn(handleDownOrUpEvent));
+        $(`#${enumInteractionType.UP}`).click({ type: enumInteractionType.UP }, proxyFn(handleDownOrUpEvent));
+        $(`#${enumInteractionType.SINGLE}`).click({ type: enumInteractionType.SINGLE }, proxyFn(handleClickOrDbClick));
+        $(`#${enumInteractionType.DOUBLE}`).click({ type: enumInteractionType.DOUBLE }, proxyFn(handleClickOrDbClick));
         // 数据动效事件
-        $(`#${enumDynamicEffectType.FLASH}`).click({ type: enumDynamicEffectType.FLASH }, handleDataDynamicEffect);
-        $(`#${enumDynamicEffectType.DISPLAY}`).click({ type: enumDynamicEffectType.DISPLAY }, handleDataDynamicEffect);
-        $(`#${enumDynamicEffectType.ROTATE}`).click({ type: enumDynamicEffectType.ROTATE }, handleDataDynamicEffect);
+        $(`#${enumDynamicEffectType.FLASH}`).click({ type: enumDynamicEffectType.FLASH }, proxyFn(handleDataDynamicEffect));
+        $(`#${enumDynamicEffectType.DISPLAY}`).click({ type: enumDynamicEffectType.DISPLAY }, proxyFn(handleDataDynamicEffect));
+        $(`#${enumDynamicEffectType.ROTATE}`).click({ type: enumDynamicEffectType.ROTATE }, proxyFn(handleDataDynamicEffect));
     });
 };
@@ -11566,7 +11646,7 @@ class UseLayUi {
     static createTreeSelect(options) {
         const CLASS_NAME = 'things-kit-tree-select'
         const SELECT_CLS = 'things-kit-tree-select__tree'
-        const { tree, jquery: $ } = layui
+        const { tree, jquery: $, form } = layui
         const {
             layFilter,
@@ -11625,47 +11705,48 @@ class UseLayUi {
             $(elem).html(template)
             // mount tree
-            UseLayUi.nextTick(() => {
-                tree.render({
-                    ...treeProps,
-                    ...(autoFormatDataSource ? { data: UseLayUi.formatTreeDataSource(data, customSetTree, valueField, labelField, childrenField) } : {}),
-                    elem: $(elem).find('.tree-select__tree-mount'),
-                    click(node) {
-                        setValue(node.data)
-                        if (UseLayUi.isFunction(click)) click(node)
-                    },
-                })
+            // UseLayUi.nextTick(() => {
+            tree.render({
+                ...treeProps,
+                ...(autoFormatDataSource ? { data: UseLayUi.formatTreeDataSource(data, customSetTree, valueField, labelField, childrenField) } : {}),
+                elem: $(elem).find('.tree-select__tree-mount'),
+                click(node) {
+                    setValue(node.data)
+                    if (UseLayUi.isFunction(click)) click(node)
+                },
+            })
-                // focus
-                $(`.${SELECT_CLS}`).off('click')
-                    .on("click", ".layui-select-title", function (e) {
-                        $(document).find('.layui-form-select').removeClass('layui-form-selected')
-                        $(this).parents(`.${SELECT_CLS}`).toggleClass("layui-form-selected");
-                        layui.stope(e);
-                    })
-                    .on('click', '.layui-anim', (e) => {
-                        layui.stope(e)
-                    })
-                    .on("click", "dl i", function (e) {
-                        layui.stope(e);
-                    })
+            // focus
+            $(`.${SELECT_CLS}`).off('click')
+                .on("click", ".layui-select-title", function (e) {
+                    $(document).find('.layui-form-select').removeClass('layui-form-selected')
+                    $(this).parents(`.${SELECT_CLS}`).toggleClass("layui-form-selected");
+                    layui.stope(e);
+                })
+                .on('click', '.layui-anim', (e) => {
+                    layui.stope(e)
+                })
+                .on("click", "dl i", function (e) {
+                    layui.stope(e);
+                })
-                // blur
-                // $(document)
-                // 	.on("click", function (e) {
-                // 		const target = e.target
-                // 		const parentNode = $(`.${CLASS_NAME} .tree-select__tree-mount`)
-                // 		if (!parentNode) return
-                // 		console.log($.contains(parentNode, target))
-                // 		// const showClose = UseLayUi.isInNode(parentNode, target, true)
-                // 		// if (showClose) return
-                // 		// $(`.${ SELECT_CLS }`).removeClass("layui-form-selected")
-                // 	});
-
-                if (UseLayUi.isFunction(onReady)) {
-                    onReady(setValue)
-                }
-            })
+            // blur
+            // $(document)
+            // 	.on("click", function (e) {
+            // 		const target = e.target
+            // 		const parentNode = $(`.${CLASS_NAME} .tree-select__tree-mount`)
+            // 		if (!parentNode) return
+            // 		console.log($.contains(parentNode, target))
+            // 		// const showClose = UseLayUi.isInNode(parentNode, target, true)
+            // 		// if (showClose) return
+            // 		// $(`.${ SELECT_CLS }`).removeClass("layui-form-selected")
+            // 	});
+
+            if (UseLayUi.isFunction(onReady)) {
+                onReady(setValue)
+            }
+            // })
+            form.render()
         }
         mount()
@@ -11707,13 +11788,13 @@ class UseLayUi {
         }
         let template = `
-     <div class="layui-form-item ${CLASS_NAME}" >
-        <label class="layui-form-label">${label}</label>
-        <div class="layui-input-block">
-          ${createOptions(dataSource).join('')}
-        </div>
-      </div>
-    `
+            <div class="layui-form-item ${CLASS_NAME}" >
+                <label class="layui-form-label">${label}</label>
+                <div class="layui-input-block">
+                ${createOptions(dataSource).join('')}
+                </div>
+            </div>`
+
         template = singleUsage ? UseLayUi.createSingleUseFormItem(template) : template
         function mount() {
@@ -12673,7 +12754,7 @@ class HandleDataSource {
                 dataZoom: [
                     {
                         show: true,
-                        type: 'slider',
+                        type: 'inside',
                         // endValue: showNumberOf
                     }
                 ]
@@ -12729,7 +12810,7 @@ class HandleDataSource {
                 dataZoom: [
                     {
                         show: true,
-                        type: 'slider',
+                        type: 'inside',
                     }
                     // {
                     //     startValue: seriesValue.length - 1 > showNumberOf
@@ -12819,7 +12900,7 @@ class HandleDataSource {
                 {
                     // xAxisIndex: 0,
                     show: true,
-                    type: 'slider',
+                    type: 'inside',
                     // startValue: 0,
                     // endValue: showNumberOf
                 }
@@ -12862,6 +12943,9 @@ class HandleDataSource {
         }
         instance.setOption(chartOption)
+        instance.on('dataZoom', () => {
+            console.log(instance.getOption())
+        })
         // instance.on('mouseover', stop)
         // instance.on('mouseout', goMove)
         // autoMove()
@@ -12998,13 +13082,17 @@ class HandleDataInteraction {
             graphClick.apply(this.graph, args)
         }
+        const mouseDownEvent = this.throttle(this.handleMouseDownEvent)
+        const mouseUpEvent = this.throttle(this.handleMouseUpEvent)
         const graphFireMouseEvent = this.graph.fireMouseEvent;
         this.graph.fireMouseEvent = (eventName, event, sender) => {
             if (eventName === mxEvent.MOUSE_DOWN) {
-                this.handleMouseDownEvent(eventName, event, sender)
+                // this.handleMouseDownEvent(eventName, event, sender)
+                mouseDownEvent(eventName, event, sender)
             }
             if (eventName === mxEvent.MOUSE_UP) {
-                this.handleMouseUpEvent(eventName, event, sender)
+                mouseUpEvent(eventName, event, sender)
+                // this.handleMouseUpEvent(eventName, event, sender)
             }
             graphFireMouseEvent.apply(this.graph, [eventName, event, sender]);
         };
@@ -13043,7 +13131,7 @@ class HandleDataInteraction {
     }
     /**
-     * @description 鼠标双击事件
+     * @description 鼠标单击事件事件
      * @param event
      */
     handleClickEvent(event) {
@@ -13052,16 +13140,16 @@ class HandleDataInteraction {
         if (temp && temp.has(DispatchCenter.enumEventType.SINGLE)) {
             const content = temp.get(DispatchCenter.enumEventType.SINGLE)
             const { type, value } = content
-            if (type === DispatchCenter.enumPageType.PAGE) {
+            if (type === DispatchCenter.enumPageType.PAGE && value) {
                 this.jumpPage(value)
-            } else if (type === DispatchCenter.enumPageType.LINK) {
+            } else if (type === DispatchCenter.enumPageType.LINK && value) {
                 window.open(value)
             }
         }
     }
     /**
-     * @description 鼠标单击事件
+     * @description 鼠标双击事件
      * @param event
      * @param cell
      */
@@ -13071,9 +13159,9 @@ class HandleDataInteraction {
         if (temp && temp.has(DispatchCenter.enumEventType.DOUBLE)) {
             const content = temp.get(DispatchCenter.enumEventType.DOUBLE)
             const { type, value } = content
-            if (type === DispatchCenter.enumPageType.PAGE) {
+            if (type === DispatchCenter.enumPageType.PAGE && value) {
                 this.jumpPage(value)
-            } else if (type === DispatchCenter.enumPageType.LINK) {
+            } else if (type === DispatchCenter.enumPageType.LINK && value) {
                 window.open(value)
             }
         }
@@ -13116,11 +13204,27 @@ class HandleDataInteraction {
         Promise.all(queue.map(fn => fn()))
     }
+    throttle(fn, time = 1000) {
+        let now = Date.now
+        let oldTime = now()
+        return (...args) => {
+            let newTime = now()
+            if (newTime - oldTime > time) {
+                oldTime = now()
+                fn.apply(this, args)
+            }
+        }
+    }
+
     /**
      * @description 跳转页面
      */
     jumpPage(page) {
-        this.editorUi.handleCustomLink(`data:page/id,${page}`)
+        try {
+            this.editorUi.handleCustomLink(`data:page/id,${page}`)
+        } catch (error) {
+            throw error
+        }
     }
 }
@@ -13480,7 +13584,7 @@ class HandleDynamicEffect {
     }
     /**
-     * @description 验证优先级
+     * @description 验证数据动效优先级 显示隐藏优先级最高
      * @param {string} nodeId 
      * @returns 
      */