init

flowable-engine-java/src/main/resources/application-pro.yml

@@ -3,6 +3,6 @@ server:
 
 spring:
   datasource: #数据源相关配置
-    url: jdbc:mysql://localhost:3306/resume?userUnicode=true&characterEncodinf=UTF-8&autoReconnect=true
+    url: jdbc:mysql://192.168.101.100:3306/flowable_web?userUnicode=true&characterEncodinf=UTF-8&autoReconnect=true
-    username: resume
+    username: root
-    password: cKWpc2BhYhrGEwMT
+    password: password

flowable-engine-web/src/store/index.js

@@ -7,6 +7,7 @@ Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     nodeMap: new Map(),
+    parentMap: new Map(),
     isEdit: null,
     selectedNode: {},
     selectFormItem: null,

flowable-engine-web/src/views/admin/FormProcessDesign.vue

@@ -48,7 +48,9 @@ export default {
       isNew: true,
       validStep: 0,
       timer: null,
-      activeSelect: 'baseSetting',
+      //todo 修改进入的位置
+      // activeSelect: 'baseSetting',
+      activeSelect: 'processDesign',
       validVisible: false,
       validResult: {},
       validOptions: [
@@ -58,6 +60,7 @@ export default {
         {title: '扩展设置', description: '', icon: '', status: ''}
       ],
       validComponents: ['baseSetting', 'formSetting', 'processDesign', 'proSetting'],
+      array:[],
     }
   },
   computed: {
@@ -202,11 +205,31 @@ export default {
     },
     doAfter() {
       if (this.validResult.success) {
+        // let process =  this.setup.process
+        // console.log(process)
+        // this.tarry(process)
+        //
+        //
+        // console.log(this.array)
+        // this.setup.process = this.array
+
         this.doPublish()
       } else {
         this.activeSelect = this.validComponents[this.validStep]
         this.validVisible = false
       }
+    },
+
+    tarry(node){
+      if (node&&node.id){
+        let newNode = {...node}
+        newNode.children=null
+        this.array.push(newNode)
+        this.tarry(node.children)
+      }
+
+
+
     },
     stopTimer() {
       if (this.timer) {
@@ -219,6 +242,7 @@ export default {
     publishProcess() {
       this.validateDesign()
     },
+    // todo 提交数据
     doPublish() {
       this.$confirm('如果您只想预览请选择预览，确认发布后流程立即生效，是否继续?', '提示', {
         confirmButtonText: '发布',

flowable-engine-web/src/views/admin/layout/process/ProcessTree.vue

@@ -20,92 +20,124 @@ export default {
       valid: true
     }
   },
-  computed:{
+  computed: {
-    nodeMap(){
+    nodeMap() {
       return this.$store.state.nodeMap;
     },
-    dom(){
+    parentIdMap() {
+      return this.$store.state.parentMap;
+    },
+    dom() {
       return this.$store.state.design.process;
     }
   },
   render(h, ctx) {
     console.log("渲染流程树")
     this.nodeMap.clear()
-    let processTrees = this.getDomTree(h, this.dom)
+    this.toMapping(this.dom)
+    console.log(this.nodeMap, this.parentIdMap)
+
+
+    // let processTrees = this.getDomTreeOld(h, this.dom)
+    let processTrees = this.getDomTree(h, "admin")
     //插入末端节点
-    processTrees.push(h('div', {style:{'text-align': 'center'}}, [
+    processTrees.push(h('div', {style: {'text-align': 'center'}}, [
-      h('div', {class:{'process-end': true}, domProps: {innerHTML:'流程结束'}})
+      h('div', {class: {'process-end': true}, domProps: {innerHTML: '流程结束'}})
     ]))
     console.log(processTrees)
-    return h('div', {class:{'_root': true}, ref:'_root'}, processTrees)
+    return h('div', {class: {'_root': true}, ref: '_root'}, processTrees)
   },
   methods: {
     // 获取demo的树形结构
-    getDomTree(h, node) {
+    getDomTree(h, id) {
-      this.toMapping(node);
+      let nodeList = this.getNodeByParentId(id)
-      if (this.isPrimaryNode(node)){
+      if (nodeList.length===0){
+        return []
+      }
+      let doms = nodeList.map(node =>{
+        console.log(node, "node")
+          //普通业务节点
+          let childDoms = this.getDomTree(h, node.id)
+          console.log(childDoms,"前")
+          this.decodeAppendDom(h, node, childDoms)
+          console.log(childDoms,"后")
+          return [h('div', {'class': {'primary-node': true}}, childDoms)];
+      })
+      return [h('div', {'class': {'primary-node': true}}, doms)];
+    },
+
+
+    getDomTreeOld(h, node) {
+      this.toMappingOld(node);
+      if (this.isPrimaryNode(node)) {
         //普通业务节点
-        let childDoms = this.getDomTree(h, node.children)
+        let childDoms = this.getDomTreeOld(h, node.children)
         this.decodeAppendDom(h, node, childDoms)
-        return [h('div', {'class':{'primary-node': true}}, childDoms)];
+        return [h('div', {'class': {'primary-node': true}}, childDoms)];
-      }else if (this.isBranchNode(node)){
+      } else if (this.isBranchNode(node)) {
         let index = 0;
         //遍历分支节点，包含并行及条件节点
         let branchItems = node.branchs.map(branchNode => {
           //处理每个分支内子节点
-          this.toMapping(branchNode);
+          this.toMappingOld(branchNode);
-          let childDoms = this.getDomTree(h, branchNode.children)
+          let childDoms = this.getDomTreeOld(h, branchNode.children)
           this.decodeAppendDom(h, branchNode, childDoms, {level: index + 1, size: node.branchs.length})
           //插入4条横线，遮挡掉条件节点左右半边线条
           this.insertCoverLine(h, index, childDoms, node.branchs)
           //遍历子分支尾部分支
           index++;
-          return h('div', {'class':{'branch-node-item': true}}, childDoms);
+          return h('div', {'class': {'branch-node-item': true}}, childDoms);
         })
         //插入添加分支/条件的按钮
-        branchItems.unshift(h('div',{'class':{'add-branch-btn': true}}, [
+        branchItems.unshift(h('div', {'class': {'add-branch-btn': true}}, [
           h('el-button', {
-           'class':{'add-branch-btn-el': true},
+            'class': {'add-branch-btn-el': true},
             props: {size: 'small', round: true},
-            on:{click: () => this.addBranchNode(node)},
+            on: {click: () => this.addBranchNode(node)},
-            domProps: {innerHTML: `添加${this.isConditionNode(node)?'条件':'分支'}`},
+            domProps: {innerHTML: `添加${this.isConditionNode(node) ? '条件' : '分支'}`},
           }, [])
         ]));
-        let bchDom = [h('div', {'class':{'branch-node': true}}, branchItems)]
+        let bchDom = [h('div', {'class': {'branch-node': true}}, branchItems)]
         //继续遍历分支后的节点
-        let afterChildDoms = this.getDomTree(h, node.children)
+        let afterChildDoms = this.getDomTreeOld(h, node.children)
         return [h('div', {}, [bchDom, afterChildDoms])]
-      }else if (this.isEmptyNode(node)){
+      } else if (this.isEmptyNode(node)) {
         //空节点，存在于分支尾部
-        let childDoms = this.getDomTree(h, node.children)
+        let childDoms = this.getDomTreeOld(h, node.children)
         this.decodeAppendDom(h, node, childDoms)
-        return [h('div', {'class':{'empty-node': true}}, childDoms)];
+        return [h('div', {'class': {'empty-node': true}}, childDoms)];
-      }else {
+      } else {
         //遍历到了末端，无子节点
         return [];
       }
     },
     //解码渲染的时候插入dom到同级
-    decodeAppendDom(h, node, dom, props = {}){
+    decodeAppendDom(h, node, dom, props = {}) {
       props.config = node
       dom.unshift(h(node.type.toLowerCase(), {
         props: props,
         ref: node.id,
         key: node.id,
         //定义事件，插入节点，删除节点，选中节点，复制/移动
-        on:{
+        on: {
           insertNode: type => this.insertNode(type, node),
           delNode: () => this.delNode(node),
           selected: () => this.selectNode(node),
-          copy:() => this.copyBranch(node),
+          copy: () => this.copyBranch(node),
           leftMove: () => this.branchMove(node, -1),
           rightMove: () => this.branchMove(node, 1)
         }
       }, []))
     },
+    toMapping(node) {
+      node.forEach(node => {
+        this.nodeMap.set(node.id, node)
+        this.parentIdMap.set(node.parentId, node)
+      })
+    },
     //id映射到map，用来向上遍历
-    toMapping(node){
+    toMappingOld(node) {
-      if (node && node.id){
+      if (node && node.id) {
         //console.log("node=> " + node.id + " name:" + node.name + " type:" + node.type)
         let newNode = {
           ...node
@@ -113,33 +145,32 @@ export default {
         newNode.children = []
         this.nodeMap.set(newNode.id, newNode)
       }
-      console.log(this.nodeMap)
     },
-    insertCoverLine(h, index, doms, branchs){
+    insertCoverLine(h, index, doms, branchs) {
-      if (index === 0){
+      if (index === 0) {
         //最左侧分支
-        doms.unshift(h('div', {'class':{'line-top-left': true}}, []))
+        doms.unshift(h('div', {'class': {'line-top-left': true}}, []))
-        doms.unshift(h('div', {'class':{'line-bot-left': true}}, []))
+        doms.unshift(h('div', {'class': {'line-bot-left': true}}, []))
-      }else if (index === branchs.length - 1){
+      } else if (index === branchs.length - 1) {
         //最右侧分支
-        doms.unshift(h('div', {'class':{'line-top-right': true}}, []))
+        doms.unshift(h('div', {'class': {'line-top-right': true}}, []))
-        doms.unshift(h('div', {'class':{'line-bot-right': true}}, []))
+        doms.unshift(h('div', {'class': {'line-bot-right': true}}, []))
       }
     },
-    copyBranch(node){
+    copyBranch(node) {
       let parentNode = this.nodeMap.get(node.parentId)
       let branchNode = this.$deepCopy(node)
       branchNode.name = branchNode.name + '-copy'
       this.forEachNode(parentNode, branchNode, (parent, node) => {
         let id = this.getRandomId()
-        console.log(node, '新id =>'+ id, '老nodeId:' + node.id )
+        console.log(node, '新id =>' + id, '老nodeId:' + node.id)
         node.id = id
         node.parentId = parent.id
       })
       parentNode.branchs.splice(parentNode.branchs.indexOf(node), 0, branchNode)
       this.$forceUpdate()
     },
-    branchMove(node, offset){
+    branchMove(node, offset) {
       let parentNode = this.nodeMap.get(node.parentId)
       let index = parentNode.branchs.indexOf(node)
       let branch = parentNode.branchs[index + offset]
@@ -148,89 +179,123 @@ export default {
       this.$forceUpdate()
     },
     //判断是否为主要业务节点
-    isPrimaryNode(node){
+    isPrimaryNode(node) {
       return node &&
           (node.type === 'ROOT' || node.type === 'APPROVAL'
-          || node.type === 'CC' || node.type === 'DELAY'
+              || node.type === 'CC' || node.type === 'DELAY'
               || node.type === 'TRIGGER');
     },
-    isBranchNode(node){
+    isBranchNode(node) {
       return node && (node.type === 'CONDITIONS' || node.type === 'CONCURRENTS');
     },
-    isEmptyNode(node){
+    isEmptyNode(node) {
       return node && (node.type === 'EMPTY')
     },
     //是分支节点
-    isConditionNode(node){
+    isConditionNode(node) {
       return node.type === 'CONDITIONS';
     },
     //是分支节点
-    isBranchSubNode(node){
+    isBranchSubNode(node) {
       return node && (node.type === 'CONDITION' || node.type === 'CONCURRENT');
     },
-    isConcurrentNode(node){
+    isConcurrentNode(node) {
       return node.type === 'CONCURRENTS'
     },
-    getRandomId(){
+    getRandomId() {
-      return `node_${new Date().getTime().toString().substring(5)}${Math.round(Math.random()*9000+1000)}`
+      return `node_${new Date().getTime().toString().substring(5)}${Math.round(Math.random() * 9000 + 1000)}`
     },
     //选中一个节点
-    selectNode(node){
+    selectNode(node) {
       this.$store.commit('selectedNode', node)
       this.$emit('selectedNode', node)
     },
+    getNodeByParentId(id) {
+      let nodeList = []
+      this.dom.forEach(node => {
+        if (node.parentId === id)
+          nodeList.push(node)
+      })
+      return nodeList;
+    },
+
     //处理节点插入逻辑
-    insertNode(type, parentNode){
+    insertNode(type, parentNode) {
+
+
+      console.log(parentNode, "111");
       this.$refs['_root'].click()
       //缓存一下后面的节点
       let afterNode = parentNode.children
+      console.log(afterNode)
       //插入新节点
-      parentNode.children = {
+      let children = {
         id: this.getRandomId(),
         parentId: parentNode.id,
-        props: {},
+        // props: {},
         type: type,
       }
-      switch (type){
+      switch (type) {
-        case 'APPROVAL': this.insertApprovalNode(parentNode, afterNode); break;
+        case 'APPROVAL':
-        case 'CC': this.insertCcNode(parentNode); break;
+          this.insertApprovalNode(children, afterNode);
-        case 'DELAY': this.insertDelayNode(parentNode); break;
+          break;
-        case 'TRIGGER': this.insertTriggerNode(parentNode); break;
+        case 'CC':
-        case 'CONDITIONS': this.insertConditionsNode(parentNode); break;
+          this.insertCcNode(parentNode);
-        case 'CONCURRENTS': this.insertConcurrentsNode(parentNode); break;
+          break;
-        default: break;
+        case 'DELAY':
+          this.insertDelayNode(parentNode);
+          break;
+        case 'TRIGGER':
+          this.insertTriggerNode(parentNode);
+          break;
+        case 'CONDITIONS':
+          this.insertConditionsNode(parentNode);
+          break;
+        case 'CONCURRENTS':
+          this.insertConcurrentsNode(parentNode);
+          break;
+        default:
+          break;
       }
       //拼接后续节点
-      if (this.isBranchNode({type: type})){
+      if (this.isBranchNode({type: type})) {
-        if (afterNode && afterNode.id){
+        if (afterNode && afterNode.id) {
           afterNode.parentId = parentNode.children.children.id
         }
         this.$set(parentNode.children.children, 'children', afterNode)
-      }else {
+      } else {
-        if (afterNode && afterNode.id){
+        if (afterNode && afterNode.id) {
           afterNode.parentId = parentNode.children.id
         }
         this.$set(parentNode.children, 'children', afterNode)
       }
       this.$forceUpdate()
     },
-    insertApprovalNode(parentNode){
+    insertApprovalNode(parentNode) {
-      this.$set(parentNode.children, "name", "审批人")
+      console.log(parentNode)
-      this.$set(parentNode.children, "props", this.$deepCopy(DefaultProps.APPROVAL_PROPS))
+      let node = {
+        ...parentNode,
+        name: "审批人",
+        props: this.$deepCopy(DefaultProps.APPROVAL_PROPS)
+      }
+      this.dom.push(node)
+
+      // this.$set(parentNode.children, "name", "审批人")
+      // this.$set(parentNode.children, "props", this.$deepCopy(DefaultProps.APPROVAL_PROPS))
     },
-    insertCcNode(parentNode){
+    insertCcNode(parentNode) {
       this.$set(parentNode.children, "name", "抄送人")
       this.$set(parentNode.children, "props", this.$deepCopy(DefaultProps.CC_PROPS))
     },
-    insertDelayNode(parentNode){
+    insertDelayNode(parentNode) {
       this.$set(parentNode.children, "name", "延时处理")
       this.$set(parentNode.children, "props", this.$deepCopy(DefaultProps.DELAY_PROPS))
     },
-    insertTriggerNode(parentNode){
+    insertTriggerNode(parentNode) {
       this.$set(parentNode.children, "name", "触发器")
       this.$set(parentNode.children, "props", this.$deepCopy(DefaultProps.TRIGGER_PROPS))
     },
-    insertConditionsNode(parentNode){
+    insertConditionsNode(parentNode) {
       this.$set(parentNode.children, "name", "条件分支")
       this.$set(parentNode.children, 'children', {
         id: this.getRandomId(),
@@ -244,20 +309,20 @@ export default {
           type: "CONDITION",
           props: this.$deepCopy(DefaultProps.CONDITION_PROPS),
           name: "条件1",
-          children:{}
+          children: {}
-        },{
+        }, {
           id: this.getRandomId(),
           parentId: parentNode.children.id,
           type: "CONDITION",
           props: this.$deepCopy(DefaultProps.CONDITION_PROPS),
           name: "条件2",
-          children:{}
+          children: {}
         }
       ])
     },
-    insertConcurrentsNode(parentNode){
+    insertConcurrentsNode(parentNode) {
       this.$set(parentNode.children, "name", "并行分支")
-      this.$set(parentNode.children, 'children',{
+      this.$set(parentNode.children, 'children', {
         id: this.getRandomId(),
         parentId: parentNode.children.id,
         type: "EMPTY"
@@ -269,53 +334,53 @@ export default {
           parentId: parentNode.children.id,
           type: "CONCURRENT",
           props: {},
-          children:{}
+          children: {}
-        },{
+        }, {
           id: this.getRandomId(),
           name: "分支2",
           parentId: parentNode.children.id,
           type: "CONCURRENT",
           props: {},
-          children:{}
+          children: {}
         }
       ])
     },
-    getBranchEndNode(conditionNode){
+    getBranchEndNode(conditionNode) {
-      if (!conditionNode.children || !conditionNode.children.id){
+      if (!conditionNode.children || !conditionNode.children.id) {
         return conditionNode;
       }
       return this.getBranchEndNode(conditionNode.children);
     },
-    addBranchNode(node){
+    addBranchNode(node) {
-      if (node.branchs.length < 8){
+      if (node.branchs.length < 8) {
         node.branchs.push({
           id: this.getRandomId(),
           parentId: node.id,
-          name: (this.isConditionNode(node) ? '条件':'分支') + (node.branchs.length + 1),
+          name: (this.isConditionNode(node) ? '条件' : '分支') + (node.branchs.length + 1),
-          props: this.isConditionNode(node) ? this.$deepCopy(DefaultProps.CONDITION_PROPS):{},
+          props: this.isConditionNode(node) ? this.$deepCopy(DefaultProps.CONDITION_PROPS) : {},
-          type: this.isConditionNode(node) ? "CONDITION":"CONCURRENT",
+          type: this.isConditionNode(node) ? "CONDITION" : "CONCURRENT",
-          children:{}
+          children: {}
         })
-      }else {
+      } else {
         this.$message.warning("最多只能添加 8 项😥")
       }
     },
     //删除当前节点
-    delNode(node){
+    delNode(node) {
       console.log("删除节点", node)
       //获取该节点的父节点
       let parentNode = this.nodeMap.get(node.parentId)
-      if (parentNode){
+      if (parentNode) {
         //判断该节点的父节点是不是分支节点
-        if (this.isBranchNode(parentNode)){
+        if (this.isBranchNode(parentNode)) {
           //移除该分支
           parentNode.branchs.splice(parentNode.branchs.indexOf(node), 1)
           //处理只剩1个分支的情况
-          if (parentNode.branchs.length < 2){
+          if (parentNode.branchs.length < 2) {
             //获取条件组的父节点
             let ppNode = this.nodeMap.get(parentNode.parentId)
             //判断唯一分支是否存在业务节点
-            if (parentNode.branchs[0].children && parentNode.branchs[0].children.id){
+            if (parentNode.branchs[0].children && parentNode.branchs[0].children.id) {
               //将剩下的唯一分支头部合并到主干
               ppNode.children = parentNode.branchs[0].children
               ppNode.children.parentId = ppNode.id
@@ -323,18 +388,18 @@ export default {
               let endNode = this.getBranchEndNode(parentNode.branchs[0])
               //后续节点进行拼接, 这里要取EMPTY后的节点
               endNode.children = parentNode.children.children
-              if (endNode.children && endNode.children.id){
+              if (endNode.children && endNode.children.id) {
                 endNode.children.parentId = endNode.id
               }
-            }else {
+            } else {
               //直接合并分支后面的节点，这里要取EMPTY后的节点
               ppNode.children = parentNode.children.children
-              if (ppNode.children && ppNode.children.id){
+              if (ppNode.children && ppNode.children.id) {
                 ppNode.children.parentId = ppNode.id
               }
             }
           }
-        }else {
+        } else {
           //不是的话就直接删除
           if (node.children && node.children.id) {
             node.children.parentId = parentNode.id
@@ -342,45 +407,45 @@ export default {
           parentNode.children = node.children
         }
         this.$forceUpdate()
-      }else {
+      } else {
         this.$message.warning("出现错误，找不到上级节点😥")
       }
     },
-    validateProcess(){
+    validateProcess() {
       this.valid = true
       let err = []
       this.validate(err, this.dom)
       return err
     },
-    validateNode(err, node){
+    validateNode(err, node) {
-      if (this.$refs[node.id].validate){
+      if (this.$refs[node.id].validate) {
         this.valid = this.$refs[node.id].validate(err)
       }
     },
     //更新指定节点的dom
-    nodeDomUpdate(node){
+    nodeDomUpdate(node) {
       this.$refs[node.id].$forceUpdate()
     },
     //给定一个起始节点，遍历内部所有节点
-    forEachNode(parent, node, callback){
+    forEachNode(parent, node, callback) {
-      if (this.isBranchNode(node)){
+      if (this.isBranchNode(node)) {
         callback(parent, node)
         this.forEachNode(node, node.children, callback)
         node.branchs.map(branchNode => {
           callback(node, branchNode)
           this.forEachNode(branchNode, branchNode.children, callback)
         })
-      }else if (this.isPrimaryNode(node) || this.isEmptyNode(node) || this.isBranchSubNode(node)){
+      } else if (this.isPrimaryNode(node) || this.isEmptyNode(node) || this.isBranchSubNode(node)) {
         callback(parent, node)
         this.forEachNode(node, node.children, callback)
       }
     },
     //校验所有节点设置
-    validate(err, node){
+    validate(err, node) {
-      if (this.isPrimaryNode(node)){
+      if (this.isPrimaryNode(node)) {
         this.validateNode(err, node)
         this.validate(err, node.children)
-      }else if (this.isBranchNode(node)){
+      } else if (this.isBranchNode(node)) {
         //校验每个分支
         node.branchs.map(branchNode => {
           //校验条件节点
@@ -389,23 +454,21 @@ export default {
           this.validate(err, branchNode.children)
         })
         this.validate(err, node.children)
-      }else if (this.isEmptyNode(node)){
+      } else if (this.isEmptyNode(node)) {
         this.validate(err, node.children)
       }
-
     }
   },
-  watch:{
+  watch: {}
-
-  }
 }
 </script>
 
 <style lang="less" scoped>
-._root{
+._root {
- margin: 0 auto;
+  margin: 0 auto;
 }
-.process-end{
+
+.process-end {
   width: 60px;
   margin: 0 auto;
   margin-bottom: 20px;
@@ -416,18 +479,21 @@ export default {
   background-color: #f2f2f2;
   box-shadow: 0 0 10px 0 #bcbcbc;
 }
-.primary-node{
+
+.primary-node {
   display: flex;
   align-items: center;
   flex-direction: column;
 }
-.branch-node{
+
+.branch-node {
   display: flex;
   justify-content: center;
   /*border-top: 2px solid #cccccc;
   border-bottom: 2px solid #cccccc;*/
 }
-.branch-node-item{
+
+.branch-node-item {
   position: relative;
   display: flex;
   background: #f5f6f6;
@@ -435,7 +501,8 @@ export default {
   align-items: center;
   border-top: 2px solid #cccccc;
   border-bottom: 2px solid #cccccc;
-  &:before{
+
+  &:before {
     content: "";
     position: absolute;
     top: 0;
@@ -445,40 +512,47 @@ export default {
     height: 100%;
     background-color: #CACACA;
   }
-  .line-top-left, .line-top-right, .line-bot-left, .line-bot-right{
+
+  .line-top-left, .line-top-right, .line-bot-left, .line-bot-right {
     position: absolute;
     width: 50%;
     height: 4px;
     background-color: #f5f6f6;
   }
-  .line-top-left{
+
+  .line-top-left {
     top: -2px;
     left: -1px;
   }
-  .line-top-right{
+
+  .line-top-right {
     top: -2px;
     right: -1px;
   }
-  .line-bot-left{
+
+  .line-bot-left {
     bottom: -2px;
     left: -1px;
   }
-  .line-bot-right{
+
+  .line-bot-right {
     bottom: -2px;
     right: -1px;
   }
 }
-.add-branch-btn{
+
+.add-branch-btn {
   position: absolute;
   width: 80px;
-  .add-branch-btn-el{
+
+  .add-branch-btn-el {
     z-index: 999;
     position: absolute;
     top: -15px;
   }
 }
 
-.empty-node{
+.empty-node {
   display: flex;
   justify-content: center;
   flex-direction: column;