Merge branch 'ww' into 'main'

feat: implement real time && trigger event See merge request huang/thingskit-drawio!11

Merge branch 'ww' into 'main'
feat: implement real time && trigger event See merge request huang/thingskit-drawio!11
xp.Huang
2 parents 9beebc38 ece0f715
Showing 2 changed files with 247 additions and 75 deletions
src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Basic-Components.js
src/main/webapp/js/grapheditor/Format.js
--- a/src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Basic-Components.js
View file @30353c8
+++ b/src/main/webapp/js/diagramly/sidebar/thingskit/Sidebar-Basic-Components.js
View file @30353c8
-(function()
-{
-	// Adds Atlassian shapes
-	Sidebar.prototype.addBasicComponentsPalette = function()
-	{
-		var sb = this;
-		var gn = 'mxgraph.component';
-		var dt = 'component ';
-		var lineTags = 'line lines connector connectors connection connections arrow arrows '
-		this.setCurrentSearchEntryLibrary('general', 'component');
-		var currentDate = getCurrentDate();
-		var fns = [
-			this.createVertexTemplateEntry('text;strokeColor=none;fillColor=none;html=1;fontSize=24;fontStyle=1;verticalAlign=middle;align=center;', 100, 40, 'Title', 'Title', null, null, 'text heading title'),
-			this.createEdgeTemplateEntry('shape=filledEdge;rounded=1;fixDash=1;endArrow=none;strokeWidth=10;fillColor=#BAFDFF;edgeStyle=orthogonalEdgeStyle;flowAnimation=1;strokeColor=#6666FF;endFill=1;metaEdit=0;backgroundOutline=0;', 60, 40, '', '线条'),
-			this.addEntry('timestamp date time text label', mxUtils.bind(this, function()
-			{
-				var cell = new mxCell('%date{yyyy-mm-dd ddd HH:MM:ss}%', new mxGeometry(0, 0, 160, 20), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
-				cell.vertex = true;
-				this.graph.setAttributeForCell(cell, 'placeholders', '1');
-				this.graph.setAttributeForCell(cell, 'date', "成都云腾五洲科技有限公司");
-				return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'Timestamps');
-			})),
-			this.addEntry('动态时间', mxUtils.bind(this, function()
-			{
-				var cell = new mxCell('<div>%currentDate%</div><div style="font-size:30px">%date{HH:MM:ss}%</div>', new mxGeometry(0, 0, 180, 60), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
-				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, 'Variable');
-			})),
-		];
+(function () {
+    // Adds Atlassian shapes
+    Sidebar.prototype.addBasicComponentsPalette = function () {
+        var sb = this;
+        var gn = 'mxgraph.component';
+        var dt = 'component ';
+        var lineTags = 'line lines connector connectors connection connections arrow arrows '
+        this.setCurrentSearchEntryLibrary('general', 'component');
+        var currentDate = getCurrentDate();
+        var fns = [
+            this.createVertexTemplateEntry('text;strokeColor=none;fillColor=none;html=1;fontSize=24;fontStyle=1;verticalAlign=middle;align=center;', 100, 40, 'Title', 'Title', null, null, 'text heading title'),
+            this.createEdgeTemplateEntry('shape=filledEdge;rounded=1;fixDash=1;endArrow=none;strokeWidth=10;fillColor=#BAFDFF;edgeStyle=orthogonalEdgeStyle;flowAnimation=1;strokeColor=#6666FF;endFill=1;metaEdit=0;backgroundOutline=0;', 60, 40, '', '线条'),
+            this.addEntry('timestamp date time text label', mxUtils.bind(this, function () {
+                var cell = new mxCell('%date{yyyy-mm-dd ddd HH:MM:ss}%', new mxGeometry(0, 0, 160, 20), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
+                cell.vertex = true;
+                this.graph.setAttributeForCell(cell, 'placeholders', '1');
+                this.graph.setAttributeForCell(cell, 'date', "成都云腾五洲科技有限公司");
+                return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'Timestamps');
+            })),
+            this.addEntry('动态时间', mxUtils.bind(this, function () {
+                var cell = new mxCell('<div>%currentDate%</div><div style="font-size:30px">%date{HH:MM:ss}%</div>', new mxGeometry(0, 0, 180, 60), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
+                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, 'Variable');
+            })),
+            this.addEntry('real time', mxUtils.bind(this, function () {
+                const template = `<div class="thingKit-component__real-time"><div class="real-time__date">%currentDate%</div> <div style="font-size:30px" class="real-time__now">%date{HH:MM:ss}%</div></div>`
+                const cell = new mxCell(template, new mxGeometry(0, 0, 180, 60), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
+                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');
+            })),
+        ];
-		this.addPaletteFunctions('component', '基础元件', false, fns);
-		this.setCurrentSearchEntryLibrary();
-	};
+        this.addPaletteFunctions('component', '基础元件', false, fns);
+        this.setCurrentSearchEntryLibrary();
+    };
-	//封装日期函数
-	function getCurrentDate() {
-		var date = new Date(); //创建日期对象
-		var year = date.getFullYear();
-		var month = date.getMonth() + 1;
-		var dates = date.getDate();
-		arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', ]
-		var day = date.getDay();
-		return year + '年' + month + '月' + dates + '日 ' + arr[day];
-	}
+    //封装日期函数
+    function getCurrentDate() {
+        var date = new Date(); //创建日期对象
+        var year = date.getFullYear();
+        var month = date.getMonth() + 1;
+        var dates = date.getDate();
+        arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
+        var day = date.getDay();
+        return year + '年' + month + '月' + dates + '日 ' + arr[day];
+    }
 })();
--- a/src/main/webapp/js/grapheditor/Format.js
View file @30353c8
+++ b/src/main/webapp/js/grapheditor/Format.js
View file @30353c8
@@ -4879,7 +4879,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
     const ss = ui.getSelectionState();
     const vertices = ss.vertices || []
-    console.log(vertices)
+    console.log(this.editorUi)
+    console.log(ss.vertices)
     /**
      * @description 不是单一节点则不进入数据绑定
      */
@@ -5404,9 +5405,13 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                         type: item.type,
                         enabled: true
                     })
+                } else {
+                    value[item.category].push({
+                        type: item.type,
+                        enabled: false
+                    })
                 }
             }
-
             const [err, res] = await to(ConfigurationNodeApi.updateNodeInfo(value))
             if (err) return
             UseLayUi.successMsg()
@@ -6232,7 +6237,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          */
         function echoOrgTree(id) {
             const node = UseLayUi.findTreeObjectByField(treeList, id)
-            $(`#${ enumActionEl.ORG_EL }`).find(`input[name="${ enumConst.ORG_ID }"]`).parent().find('span').html(node.name)
+            console.log(node)
+            $(`#${ enumActionEl.ORG_EL }`).find(`input[name="${ enumConst.ORG_ID }"]`).parent().find('span').html(node?.name)
         }
         async function submit(callback) {
@@ -10899,11 +10905,16 @@ class DispatchCenter {
     /**
      * @description 节点映射
-     * @type {Map<string, object>}
+     * @type {Map<string, Map<string, object>>}
      */
     nodeMapping
     /**
+     * @description
+     */
+    editorUi
+
+    /**
      * @description 当前页信息
      */
     currentPage
@@ -10940,8 +10951,36 @@ class DispatchCenter {
      */
     static rawContentId
+    /**
+     * @description 判断事件监听器时候已经绑定过
+     */
+    static eventListenerIsExist = false
+
+    static enumEventType = {
+        DOWN: 'DOWN',
+        UP: 'UP',
+        SINGLE: 'SINGLE',
+        DOUBLE: 'DOUBLE',
+    }
+
+    static enumDynamicEffectType = {
+        DISPLAY: 'DISPLAY',
+        FLASH: 'FLASH',
+        ROTATE: 'ROTATE',
+    }
+
+    static enumPageType = {
+        PAGE: 'PAGE',
+        LINK: 'LINK'
+
+    }
+
+
     constructor(editorUi, currentPage) {
         this.nodeMapping = new Map()
+        this.editorUi = editorUi
+
+        // mxEvent.addListener(document, (mxClient.IS_POINTER) ? 'pointerup' : 'mouseup', this.pointerUpHandler);
         this.init(editorUi, currentPage)
     }
@@ -10953,7 +10992,7 @@ class DispatchCenter {
     init(editorUi, currentPage) {
         this.createEventBus()
         this.saveContentInfo(editorUi, currentPage)
-        // this.createGraphEventListener()
+        this.createGraphEventListener()
         this.connectSocket()
         this.getContentDataNode()
     }
@@ -10996,30 +11035,33 @@ class DispatchCenter {
      * @description 创建图层事件监听器
      */
     createGraphEventListener() {
-        console.log(mxEvent)
-        // this.graph.addListener(mxEvent.MOUSE_DOWN, (sender, event) => {
-        //     console.log('down')
-        //     console.log(event)
-        //     console.log(sender)
-        // })
-        // this.graph.addListener(mxEvent.MOUSE_UP, (sender, event) => {
-        //     console.log('up')
-        //     console.log(event)
-        //     console.log(sender)
-        // })
-        console.log(this.contentAllCell)
-        const node = this.contentAllCell.find(item => item.id === "xu8fz6ypefe3Lfq39emV-10")
-        console.log(node)
-        // node.addListener(mxEvent.CLICK, (sender, event) => {
-        //     console.log('click')
-        //     console.log(event)
-        //     console.log(sender)
-        // })
-        // this.graph.addListener(mxEvent.DOUBLE_CLICK, (sender, event) => {
-        //     console.log('double click')
-        //     console.log(event)
-        //     console.log(sender)
-        // })
+        if (DispatchCenter.eventListenerIsExist) return
+
+        const graphDblClick = this.graph.dblClick;
+        this.graph.dblClick = (...args) => {
+            this.handleDoubleClickEvent(...args)
+            graphDblClick.apply(this.graph, args)
+        }
+
+
+        const graphClick = this.graph.click;
+        this.graph.click = (...args) => {
+            this.handleClickEvent(...args)
+            graphClick.apply(this.graph, args)
+        }
+
+        const graphFireMouseEvent = this.graph.fireMouseEvent;
+        this.graph.fireMouseEvent = (eventName, event, sender) => {
+            if (eventName === mxEvent.MOUSE_DOWN) {
+                this.handleMouseDownEvent(eventName, event, sender)
+            }
+            if (eventName === mxEvent.MOUSE_UP) {
+                this.handleMouseUpEvent(eventName, event, sender)
+            }
+            graphFireMouseEvent.apply(this.graph, [eventName, event, sender]);
+        };
+
+        DispatchCenter.eventListenerIsExist = true
     }
     /**
@@ -11029,6 +11071,7 @@ class DispatchCenter {
      */
     saveContentInfo(editorUi, currentPage) {
         const editor = editorUi.editor
+        console.log(editorUi)
         this.graph = editor.graph
         this.currentPage = currentPage
         this.contentAllCell = this.graph.getDefaultParent().children
@@ -11041,11 +11084,14 @@ class DispatchCenter {
         const { node: { id } = {} } = this.currentPage
         if (!id) return
         const [err, res] = await to(ConfigurationNodeApi.getConfigurationInfo('CONTENT', id))
-        const { dataSources } = res
+        const { dataSources, event, act } = res
         const sendMsg = {
             tsSubCmds: this.generatorDataSourceMapping(dataSources)
         }
+        this.generatorEventMapping(event)
+        this.generatorActionEffectMapping(act)
         this.sendMessageToGetRealTimeData(sendMsg)
+        console.log(this.nodeMapping)
     }
     /**
@@ -11073,17 +11119,45 @@ class DispatchCenter {
             }
             this.subscribeDataSources(datum, eventName, attr)
-            this.nodeMapping.set(deviceId, sendMsgTemplate)
             return sendMsgTemplate
         })
     }
     /**
+     * @description 事件映射
+     * @param event
+     */
+    generatorEventMapping(event = []) {
+        for (const item of event) {
+            const { content, id: nodeId, enabled, type } = item
+            if (!enabled) continue
+            if (!this.nodeMapping.has(nodeId)) this.nodeMapping.set(nodeId, new Map())
+            const temp = this.nodeMapping.get(nodeId)
+            temp.set(type, content)
+        }
+    }
+
+    /**
+     * @description 动效映射
+     * @param act
+     */
+    generatorActionEffectMapping(act = []) {
+        for (const item of act) {
+            const { condition, id: nodeId, enabled, type } = item
+            if (!enabled) continue
+            if (!this.nodeMapping.has(nodeId)) this.nodeMapping.set(nodeId, new Map())
+            const temp = this.nodeMapping.get(nodeId)
+            temp.set(type, condition)
+        }
+    }
+
+    /**
      * @description 分发事件
      */
     publishEvent(eventName, data) {
         Object.keys(data).forEach(() => {
             this.eventBus.emit(eventName, data)
+
         })
     }
@@ -11118,6 +11192,81 @@ class DispatchCenter {
         }
     }
+    /**
+     * @description 处理按下事件
+     * @param eventName
+     * @param event
+     * @param sender
+     */
+    handleMouseDownEvent(eventName, event, sender) {
+        const { state: { cell: { id } = {} } = {} } = event
+        const temp = this.nodeMapping.get(id)
+        if (temp && temp.has(DispatchCenter.enumEventType.DOWN)) {
+            const content = temp.get(DispatchCenter.enumEventType.DOWN)
+            console.log('mouse down event', content)
+        }
+    }
+
+    /**
+     * @description 处理抬起事件
+     * @param eventName
+     * @param event
+     * @param sender
+     */
+    handleMouseUpEvent(eventName, event, sender) {
+        const { state: { cell: { id } = {} } = {} } = event
+        const temp = this.nodeMapping.get(id)
+        if (temp && temp.has(DispatchCenter.enumEventType.UP)) {
+            const content = temp.get(DispatchCenter.enumEventType.UP)
+            console.log('mouse up event', content)
+        }
+    }
+
+    /**
+     * @description 鼠标双击事件
+     * @param event
+     */
+    handleClickEvent(event) {
+        const { state: { cell: { id } = {} } = {} } = event
+        const temp = this.nodeMapping.get(id)
+        if (temp && temp.has(DispatchCenter.enumEventType.SINGLE)) {
+            const content = temp.get(DispatchCenter.enumEventType.SINGLE)
+            const { type, value } = content
+            if (type === DispatchCenter.enumPageType.PAGE) {
+                this.jumpPage(value)
+            } else if (type === DispatchCenter.enumPageType.LINK) {
+                window.open(value)
+            }
+        }
+    }
+
+    /**
+     * @description 鼠标单击事件
+     * @param event
+     * @param cell
+     */
+    handleDoubleClickEvent(event, cell = {}) {
+        const { id } = cell
+        const temp = this.nodeMapping.get(id)
+        if (temp && temp.has(DispatchCenter.enumEventType.DOUBLE)) {
+            const content = temp.get(DispatchCenter.enumEventType.DOUBLE)
+            const { type, value } = content
+            if (type === DispatchCenter.enumPageType.PAGE) {
+                this.jumpPage(value)
+            } else if (type === DispatchCenter.enumPageType.LINK) {
+                window.open(value)
+            }
+        }
+    }
+
+    /**
+     * @description 跳转页面
+     */
+    jumpPage(page) {
+        // const page = 'ikp4NlRjQpI8WxeSibFj'
+        this.editorUi.handleCustomLink(`data:page/id,${ page }`)
+    }
+
     /**
      * @description 返回 DispatchCenter 实例 当contentID变化时重新创建实例
@@ -11138,3 +11287,22 @@ class DispatchCenter {
 }
+function globalInit() {
+    init()
+
+    function init() {
+        initRealTime()
+    }
+
+    function initRealTime() {
+        setInterval(() => {
+            const allTimeNode = document.querySelectorAll('.thingKit-component__real-time .real-time__now')
+            for (const time of allTimeNode) {
+                const date = new Date()
+                time.innerHTML = `${ date.getHours() }:${ date.getMinutes() < 10 ? '0' : '' }${ date.getMinutes() }:${ date.getSeconds() < 10 ? '0' : '' }${ date.getSeconds() }`
+            }
+        }, 1000)
+    }
+}
+
+globalInit()