epx-frame 3.5.0-shpgy.1

package/src/frame/components/FormulaEditor.vue

@@ -0,0 +1,1216 @@
+<script>
+export default {
+  name: 'epx-formula-editor',
+  props: {
+    elTree: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      showCursor: false,
+      cursorPosition: 1,
+      cursorIndex: -1,
+      elementTree: [],
+      cursorElement: {
+        line: 0,
+        index: 0,
+        textLength: 0,
+        left: 0
+      },
+      cursor: {
+        line: 1
+      },
+      textFocus: true,
+      element: null,
+      selectFunction: ''
+    }
+  },
+  watch: {
+    elTree: {
+      handler (v) {
+        this.elementIds = []
+        this.elementTree = v
+        this.setElementId(v)
+      },
+      immediate: true
+    },
+    element (v) {
+      let element = v
+      const formularEditor = this.$refs.formularEditor
+      if (!element) element = this.elementTree[this.elementTree.length - 1]
+      if (element && !this.$_.isEmpty(element)) {
+        const { id, cursorIndex, type } = element
+        // 获取到具体的元素
+        this.$nextTick(() => {
+          if (type === 'text' || type === 'variable') {
+            const node = formularEditor.querySelector(`#${id}`)
+            const editorRect = formularEditor.getBoundingClientRect()
+            let index = cursorIndex
+            if (index === undefined) index = node.innerText.length - 1
+            let r = null
+            try {
+              r = this.setRange(node.childNodes[0], index, index + 1)
+            } catch (error) {
+              r = this.setRange(node.childNodes[0], index, index)
+            }
+            const rect = r.getBoundingClientRect()
+            const left = rect.x - editorRect.x
+            this.cursorPosition = cursorIndex === undefined ? left + rect.width : left
+            const line = Math.round((rect.y - editorRect.y) / 20) + 1
+            this.$set(this.cursor, 'line', line)
+            // 获取cursorIndex前的字符
+          } else if (type === 'function') {
+            // 获取函数的最后一个元素
+            const node = formularEditor.querySelector(`#${id}`)
+            const editorRect = formularEditor.getBoundingClientRect()
+            let index = cursorIndex
+            if (index === undefined) index = node.childNodes.length - 1
+            const r = this.setRange(node, index, index + 1)
+            const rect = r.getBoundingClientRect()
+            const left = rect.x - editorRect.x
+            this.cursorPosition = cursorIndex === undefined ? left + rect.width : left
+            const line = Math.round((rect.y - editorRect.y) / 20) + 1
+            this.$set(this.cursor, 'line', line)
+          } else if (type === 'params') {
+            // 获取第几个参数
+            const node = formularEditor.querySelector(`#${id}`)
+            const paramsNode = node.childNodes[2]
+            const editorRect = formularEditor.getBoundingClientRect()
+            let r = null
+            if (cursorIndex === undefined) {
+              r = this.setRange(node, 3, 4)
+            } else if (paramsNode.innerHTML === '') {
+              r = this.setRange(node, 3, 4)
+            } else {
+              const childNodes = paramsNode.childNodes[cursorIndex].childNodes[0]
+              r = this.setRange(childNodes, 0, 1)
+            }
+            const rect = r.getBoundingClientRect()
+            const left = rect.x - editorRect.x
+            // 获取到文字
+            this.cursorPosition = left
+            const line = Math.round((rect.y - editorRect.y) / 20) + 1
+            this.$set(this.cursor, 'line', line)
+          }
+        })
+      } else {
+        this.cursorPosition = 0
+      }
+    }
+  },
+  methods: {
+    reset () {
+      this.cursor = {
+        line: 1
+      }
+      this.cursorPosition = 0
+      this.element = null
+      this.elementTree = []
+    },
+    getElementById (id, arr = this.elementTree) {
+      for (let i = 0; i < arr.length; i++) {
+        const element = arr[i]
+        if (element.id === id) return element
+        if (element.children) {
+          const _element = this.getElementById(id, element.children)
+          if (_element) return _element
+        }
+      }
+    },
+    setFunctionById (id, arr, element) {
+      for (let i = 0; i < arr.length; i++) {
+        const _element = arr[i]
+        if (_element.id === id) {
+          arr[i] = element
+          return
+        } else if (_element.children) {
+          this.setFunctionById(id, _element.children, element)
+        }
+      }
+    },
+    setElementById (id, element, arr = this.elementTree, index) {
+      for (let i = 0; i < arr.length; i++) {
+        const _element = arr[i]
+        if (_element.id === id) {
+          arr[i] = { ...element }
+          break
+        }
+        if (_element.children) {
+          this.setFunctionById(id, _element.children, element)
+        }
+      }
+      this.elementTree = arr
+      this.$forceUpdate()
+    },
+    appendToElement (id, element, arr = this.elementTree) {
+      for (let i = 0; i < arr.length; i++) {
+        const _element = arr[i]
+        if (_element.id === id) {
+          arr.splice(i + 1, 0, element)
+          this.$forceUpdate()
+          break
+        }
+        if (_element.children) {
+          this.appendToElement(id, element, _element.children)
+        }
+      }
+    },
+    prependToElement (id, element, arr = this.elementTree) {
+      for (let i = 0; i < arr.length; i++) {
+        const _element = arr[i]
+        if (_element.id === id) {
+          arr.splice(i, 0, element)
+          this.$forceUpdate()
+          break
+        }
+        if (_element.children) {
+          this.prependToElement(id, element, _element.children)
+        }
+      }
+    },
+    deleteElementById (id, arr = this.elementTree) {
+      for (let i = 0; i < arr.length; i++) {
+        const _element = arr[i]
+        if (_element.id === id) {
+          arr.splice(i, 1)
+          this.$forceUpdate()
+          break
+        } else if (_element.children) {
+          this.deleteElementById(id, _element.children)
+        }
+      }
+    },
+    getElementId (prefix) {
+      let id = prefix
+      let idIndex = 1
+      while (this.elementIds.includes(id)) {
+        id = prefix + idIndex++
+      }
+      this.elementIds.push(id)
+      return id
+    },
+    setElementId (arr = this.elementTree) {
+      arr.forEach(element => {
+        if (!this.elementIds) this.elementIds = []
+        this.elementIds.push(element.id)
+        if (element.children) {
+          this.setElementId(element.children)
+        }
+      })
+    },
+    getParentElement (id, arr = this.elementTree, parent = null) {
+      for (let i = 0; i < arr.length; i++) {
+        const element = arr[i]
+        if (element.id === id) return parent
+        if (element.children) {
+          const _parent = this.getParentElement(id, element.children, element)
+          if (_parent) return _parent
+        }
+      }
+    },
+    getNextElement (id, arr = this.elementTree) {
+      for (let i = 0; i < arr.length; i++) {
+        const element = arr[i]
+        if (element.id === id) {
+          return arr[i + 1]
+        }
+        if (element.children) {
+          const _element = this.getNextElement(id, element.children)
+          if (_element) return _element
+        }
+      }
+    },
+    getLastElement (id, arr = this.elementTree) {
+      for (let i = 0; i < arr.length; i++) {
+        const element = arr[i]
+        if (element.id === id) {
+          return arr[i - 1]
+        } else if (element.children) {
+          const _element = this.getLastElement(id, element.children)
+          if (_element) return _element
+        }
+      }
+    },
+    getBrotherElements (id, arr = this.elementTree) {
+      for (let i = 0; i < arr.length; i++) {
+        const element = arr[i]
+        if (element.id === id) {
+          return arr
+        } else if (element.children) {
+          const _elements = this.getBrotherElements(id, element.children)
+          if (_elements) return _elements
+        }
+      }
+    },
+    inputValue (event) {
+      if (event.data) {
+        this.event = event
+        if (this.inputFinish) {
+          this.inputContent(event.data)
+        }
+      }
+      // 获取输入的内容
+    },
+    compositionstart () {
+      this.inputFinish = false
+    },
+    compositionend (event) {
+      this.inputFinish = true
+      if (event.data) {
+      // 获取字体宽度
+        this.inputContent(event.data)
+      }
+    },
+    inputContent (data) {
+      const { id, type, cursorIndex } = this.element || {}
+      if (type === 'params') {
+        // 获取到元素
+        this.addParams(data)
+      } else if (type === 'function') {
+        // 添加文本元素
+        const element = {
+          id: this.getElementId('text'),
+          type: 'text',
+          text: ''
+        }
+        if (cursorIndex === 0) {
+          this.prependToElement(id, element)
+        } else {
+          this.appendToElement(id, element)
+        }
+        this.element = element
+        this.addText(data)
+      } else if (type === 'variable') {
+        // 添加文本节点
+        const textid = this.getElementId('text')
+        const element = {
+          id: textid,
+          type: 'text',
+          text: ''
+        }
+        if (cursorIndex === 0) {
+          this.prependToElement(id, element)
+        } else {
+          this.appendToElement(id, element)
+        }
+        this.element = element
+        this.addText(data)
+      } else {
+        // 输入文本
+        this.addText(data)
+      }
+    },
+    addText (data, elementTree = this.elementTree) {
+      if (!this.element) {
+        // 添加一个文本节点
+        const textId = this.getElementId('text')
+        const element = {
+          id: textId,
+          type: 'text',
+          text: ''
+        }
+        elementTree.push(
+          element
+        )
+        this.element = element
+      }
+      // 获取相邻的文本节点
+      let { id, text = '', cursorIndex } = this.element
+      let newText = text + data
+      const brotherElements = this.getBrotherElements(id) || []
+      if (cursorIndex !== undefined) {
+        newText = text.substring(0, cursorIndex) + data + text.substring(cursorIndex)
+      }
+      const element = { ...this.element, text: newText }
+      let nearTextElements = [element]
+      const index = brotherElements.findIndex(element => element.id === id)
+      let lastIndex = index - 1
+      let nextIndex = index + 1
+      while (lastIndex >= 0) {
+        const lastElement = brotherElements[lastIndex]
+        if (lastElement && lastElement.type === 'text') {
+          nearTextElements = [lastElement, ...nearTextElements]
+          if (cursorIndex) cursorIndex += lastElement.text.length
+          lastIndex--
+        } else {
+          lastIndex = -1
+        }
+      }
+      while (nextIndex >= 0 && nextIndex < brotherElements.length) {
+        const nextElement = brotherElements[nextIndex]
+        if (nextElement && nextElement.type === 'text') {
+          nearTextElements = [...nearTextElements, nextElement]
+          nextIndex++
+        } else {
+          nextIndex = -1
+        }
+      }
+      const nearText = nearTextElements.map(element => element.text).join('')
+      const elements = this.formatText(nearText)
+      // 删除当前文本元素  替换成新的
+      elements.forEach(element => {
+        this.prependToElement(id, element)
+      })
+      nearTextElements.forEach(element => {
+        this.deleteElementById(element.id)
+      })
+      if (cursorIndex !== undefined) {
+        // 获取第n个文字所在元素
+        let index = 0
+        for (let i = 0; i < elements.length; i++) {
+          const element = elements[i]
+          index += element.text.length
+          if (index >= cursorIndex) {
+            cursorIndex = cursorIndex - (index - element.text.length) + 1
+            this.element = { ...element, cursorIndex }
+            break
+          }
+        }
+      } else {
+        // 指针指向最后一个元素
+        this.element = elements[elements.length - 1]
+      }
+      this.$refs.fontWidth.innerHTML = data
+      const rect = this.$refs.fontWidth.getBoundingClientRect()
+      this.cursorPosition += rect.width
+      this.$forceUpdate()
+    },
+    formatText (text) {
+      let elements = []
+      const strMatch = text.match(/["|'][^("|')]*["|']/)
+      if (strMatch) {
+        // 分割字符串
+        const str = strMatch[0]
+        const index = strMatch.index
+        // 截取字符串
+        const beforeText = text.substring(0, index)
+        const afterText = text.substring(index + str.length, text.length)
+        // 设置为字符串类型 格式化其他文本
+        if (beforeText) {
+          const beforeElements = this.formatText(beforeText)
+          elements = [...beforeElements, ...elements]
+        }
+        const id = this.getElementId('text')
+        elements.push({ id, type: 'text', text: str, dataType: 'string' })
+        if (afterText) {
+          const afterElements = this.formatText(afterText)
+          elements = [...elements, ...afterElements]
+        }
+      } else if (/\d+/.test(text)) {
+        const match = text.match(/\d+/)
+        const str = match[0]
+        const index = match.index
+        // 截取字符串
+        const beforeText = text.substring(0, index)
+        const afterText = text.substring(index + str.length, text.length)
+
+        // 设置为字符串类型 格式化其他文本
+        if (beforeText) {
+          const beforeElements = this.formatText(beforeText)
+          elements = [...beforeElements, ...elements]
+        }
+        const id = this.getElementId('text')
+        elements.push({ id, type: 'text', text: str, dataType: 'number' })
+        if (afterText) {
+          const afterElements = this.formatText(afterText)
+          elements = [...elements, ...afterElements]
+        }
+      } else if (/,/.test(text)) {
+        const match = text.match(/,/)
+        const str = match[0]
+        const index = match.index
+        // 截取字符串
+        const beforeText = text.substring(0, index)
+        const afterText = text.substring(index + str.length, text.length)
+        // 设置为字符串类型 格式化其他文本
+        if (beforeText) {
+          const beforeElements = this.formatText(beforeText)
+          elements = [...beforeElements, ...elements]
+        }
+        const id = this.getElementId('text')
+        elements.push({ id, type: 'text', text: str, dataType: 'split' })
+        if (afterText) {
+          const afterElements = this.formatText(afterText)
+          elements = [...elements, ...afterElements]
+        }
+      } else if (/[=|>|<|+|-|*|/|(|)|!|||&]+/.test(text)) {
+        const match = text.match(/[=|>|<|+|-|*|/|(|)|!|||&]+/)
+        const str = match[0]
+        const index = match.index
+        // 截取字符串
+        const beforeText = text.substring(0, index)
+        const afterText = text.substring(index + str.length, text.length)
+        // 设置为字符串类型 格式化其他文本
+        if (beforeText) {
+          const beforeElements = this.formatText(beforeText)
+          elements = [...beforeElements, ...elements]
+        }
+        const id = this.getElementId('text')
+        elements.push({ id, type: 'text', text: str, dataType: 'operate' })
+        if (afterText) {
+          const afterElements = this.formatText(afterText)
+          elements = [...elements, ...afterElements]
+        }
+      } else {
+        const id = this.getElementId('text')
+        elements.push({ id, type: 'text', text })
+      }
+      return elements
+    },
+    addParams (content) {
+      const { id, cursorIndex } = this.element
+      const element = this.getElementById(id)
+      if (!element.children) element.children = []
+      if (typeof content === 'string') {
+        const cElement = {
+          id: this.getElementId('TEXT'),
+          type: 'text',
+          text: ''
+        }
+        // 如果有序号 插入元素
+        if (cursorIndex !== undefined) {
+          element.children.splice(cursorIndex, 0, cElement)
+        } else {
+          element.children.push(cElement)
+        }
+        this.setElementById(element.id, {
+          ...element
+        })
+        this.element = cElement
+        this.addText(content)
+      } else {
+        let index = cursorIndex !== undefined ? cursorIndex : element.children.length
+        const lastElement = element.children[index - 1]
+        if (lastElement && lastElement.dataType !== 'split') {
+          const splitElement = {
+            id: this.getElementId('text'),
+            dataType: 'split',
+            type: 'text',
+            text: ','
+          }
+          element.children.splice(index, 0, splitElement)
+          index++
+        }
+        element.children.splice(index, 0, content)
+        this.setElementById(element.id, { ...element })
+        this.element = content
+      }
+
+      // let params = element.children
+      // if (!params) {
+      //   params = [typeof content === 'string' ? {
+      //     type: 'text',
+      //     text: content
+      //   } : content]
+      // } else {
+      //   const param = params[paramsIndex]
+      //   params[paramsIndex] = typeof content === 'string' ? {
+      //     ...param,
+      //     text: param.text + content
+      //   } : content
+      // }
+      // element.children = params
+    },
+    clickEditor (event) {
+      this.$refs.textarea.focus()
+      // this.cursorPosition =
+    },
+    setRange (node, start, end, endNode) {
+      var r = document.createRange()
+      r.setEnd(endNode || node, end)
+      r.setStart(node, start)
+      return r
+    },
+    clickCode (event) {
+      let element = event.target
+      const formularEditor = this.$refs.formularEditor
+      let type = element.getAttribute('type')
+      const left = event.offsetX
+      while (!type && element.parentNode) {
+        element = element.parentNode
+        type = element.getAttribute('type')
+      }
+      if (type === 'function') {
+        const id = element.getAttribute('id')
+        // 判断行数
+        const line = Math.round((event.offsetY + 10) / 20)
+        this.$set(this.cursor, 'line', line < 1 ? 1 : line)
+        // 函数 判断是前还是后还是参数
+        const elementWidth = element.offsetWidth
+        const elementLeft = element.offsetLeft
+        const fElement = this.getElementById(id)
+        if (left - elementLeft < 5 && event.offsetY - element.offsetTop < 20) {
+        // 函数前
+          this.cursorPosition = elementLeft
+          this.element = {
+            id,
+            type: 'function',
+            children: fElement.children,
+            cursorIndex: 0
+          }
+        } else if (elementLeft + elementWidth - left < 3 && event.offsetY - element.offsetTop < 20) {
+        // 函数后
+          this.cursorPosition = elementLeft + elementWidth
+          this.element = {
+            id,
+            type: 'function',
+            children: fElement.children
+          }
+        } else {
+          // 判断第几个参数
+          const paramElement = element.children[2]
+          const elementLeft = paramElement.offsetLeft
+          const elementRight = paramElement.offsetLeft + paramElement.offsetWidth
+
+          if ((left < elementLeft || left - elementLeft < elementRight - left) && event.offsetY - paramElement.offsetTop < 20) {
+            this.cursorPosition = elementLeft
+            this.element = {
+              id,
+              type: 'params',
+              children: fElement.children
+            }
+            if (fElement.children && fElement.children.length > 0) this.element.cursorIndex = 0
+          } else {
+            this.cursorPosition = elementRight
+            this.element = {
+              id,
+              type: 'params',
+              children: fElement.children
+            }
+          }
+        }
+      } else if (type === 'text') {
+        // 获取元素距离左侧位置
+        const elmentHtml = element.innerText
+        this.$refs.fontWidth.innerHTML = ''
+
+        // 判断行数
+        const line = Math.round((event.offsetY + 10) / 20)
+        this.$set(this.cursor, 'line', line < 1 ? 1 : line)
+        // 获取第几个元素
+        let width = 0
+        let lastWidth = 0
+        let index = 0
+        let elementLine = 1
+        const textNode = element.childNodes[0]
+        const editorTop = formularEditor.getBoundingClientRect().top
+        const editorLeft = formularEditor.getBoundingClientRect().left
+        while (!(width > event.x && elementLine === line) && elmentHtml[index] !== undefined) {
+          const r = this.setRange(textNode, index, index + 1)
+          const rect = r.getBoundingClientRect()
+          const top = rect.top - editorTop
+          elementLine = Math.round(top / 20) + 1
+          elementLine = elementLine < 1 ? 1 : elementLine
+          lastWidth = width
+          width = rect.left
+          index++
+        }
+
+        if (width - event.x > event.x - lastWidth) {
+          width = lastWidth
+          index--
+        }
+        this.cursorPosition = width - editorLeft
+        const elementInfo = this.getElementById(element.id) || {}
+        this.element = {
+          ...elementInfo,
+          cursorIndex: index - 1
+        }
+      } else if (type === 'code') {
+        const lastElement = this.elementTree[this.elementTree.length - 1]
+        if (lastElement) {
+          this.element = lastElement
+        }
+      } else if (type === 'variable') {
+        const x = event.offsetX
+        const left = element.offsetLeft
+        const right = element.offsetLeft + element.offsetWidth
+        const elementInfo = this.getElementById(element.id) || {}
+        const line = Math.round(event.offsetY / 20)
+        this.$set(this.cursor, 'line', line)
+        if (x - left > right - x || event.offsetY - element.offsetTop > 20) {
+          this.cursorPosition = right
+          this.element = {
+            ...elementInfo
+          }
+        } else {
+          this.cursorPosition = left
+          this.element = {
+            ...elementInfo,
+            cursorIndex: 0
+          }
+        }
+      }
+    },
+    keydown (event) {
+      const formularEditor = this.$refs.formularEditor
+      // 删除
+      if (event.keyCode === 8) {
+        let element = this.element
+        if (!this.element) {
+          element = this.elementTree[this.elementTree.length - 1]
+        }
+        if (element && element.cursorIndex === 0) {
+          // 获取前一个元素
+          element = this.getLastElement(element.id)
+        }
+        if (!element) return
+        // backspace
+        let { id, cursorIndex, type, text = '' } = element
+        if (type === 'params') {
+          if (cursorIndex > 0) {
+            element = element.children[cursorIndex]
+          } else if (cursorIndex === undefined && element.children && element.children.length > 0) {
+            element = element.children[element.children.length - 1]
+          }
+          id = element.id
+          type = element.type
+          text = element.text || ''
+        }
+        if (type === 'text') {
+          let newText = text.substring(0, text.length - 1)
+          let delText = text[text.length - 1]
+          if (cursorIndex !== undefined) {
+            if (cursorIndex > 0) {
+              delText = text[cursorIndex - 1]
+              newText = text.substring(0, cursorIndex - 1) + text.substring(cursorIndex, text.length)
+            } else {
+              delText = ''
+              newText = text
+            }
+          }
+          const brotherElements = this.getBrotherElements(id) || []
+          const newElement = { ...element, text: newText }
+          let nearTextElements = [newElement]
+          const index = brotherElements.findIndex(element => element.id === id)
+          let lastIndex = index - 1
+          let nextIndex = index + 1
+          while (lastIndex >= 0) {
+            const lastElement = brotherElements[lastIndex]
+            if (lastElement && lastElement.type === 'text') {
+              nearTextElements = [lastElement, ...nearTextElements]
+              if (cursorIndex) cursorIndex += lastElement.text.length
+              lastIndex--
+            } else {
+              lastIndex = -1
+            }
+          }
+          while (nextIndex >= 0 && nextIndex < brotherElements.length) {
+            const nextElement = brotherElements[nextIndex]
+            if (nextElement && nextElement.type === 'text') {
+              nearTextElements = [...nearTextElements, nextElement]
+              nextIndex++
+            } else {
+              nextIndex = -1
+            }
+          }
+          const nearText = nearTextElements.map(element => element.text).join('')
+          if (nearText === '') {
+            this.element = this.getLastElement(nearTextElements[0].id)
+            nearTextElements.forEach(element => {
+              this.deleteElementById(element.id)
+            })
+          } else {
+            const elements = this.formatText(nearText)
+            // 删除当前文本元素  替换成新的
+            elements.forEach(element => {
+              if (element.type !== 'text' || element.text) {
+                this.prependToElement(id, element)
+              }
+            })
+            nearTextElements.forEach(element => {
+              this.deleteElementById(element.id)
+            })
+            if (cursorIndex !== undefined) {
+            // 获取第n个文字所在元素
+              let nextCursorIndex = cursorIndex - 1
+              let index = 0
+              for (let i = 0; i < elements.length; i++) {
+                const element = elements[i]
+                index += element.text.length
+                if (index >= nextCursorIndex) {
+                  nextCursorIndex = nextCursorIndex - (index - element.text.length)
+                  this.element = { ...element, cursorIndex: nextCursorIndex }
+                  break
+                }
+              }
+            } else {
+            // 指针指向最后一个元素
+              this.element = elements[elements.length - 1]
+            }
+          }
+          this.$refs.fontWidth.innerHTML = delText || ''
+          const rect = this.$refs.fontWidth.getBoundingClientRect()
+          this.cursorPosition -= rect.width
+          this.$forceUpdate()
+        } else if (type === 'function') {
+          if (this.selectFunction === element.id) {
+            const element = this.getLastElement(id)
+            const node = formularEditor.querySelector(`#${id}`)
+            this.element = element
+            this.deleteElementById(id)
+            this.cursorPosition -= node.offsetWidth
+          } else {
+            this.selectFunction = element.id
+          }
+        } else if (type === 'variable') {
+          if (this.selectFunction === element.id) {
+            const element = this.getLastElement(id)
+            const node = formularEditor.querySelector(`#${id}`)
+            this.element = element
+            this.deleteElementById(id)
+            this.cursorPosition -= (node.offsetWidth + 4)
+          } else {
+            this.selectFunction = element.id
+          }
+        }
+      } else if (event.keyCode === 46) {
+        let element = this.element
+
+        if (element && (element.cursorIndex === undefined || (element.text && element.cursorIndex === element.text.length))) {
+          // 获取前一个元素
+          const nextElement = this.getNextElement(element.id)
+          if (nextElement) {
+            element = { ...nextElement, cursorIndex: 0 }
+          } else {
+            return
+          }
+        }
+        if (!element) return
+
+        let { id, cursorIndex, type, text } = element
+        if (type === 'params') {
+          if (cursorIndex >= 0) {
+            element = element.children[cursorIndex]
+          }
+          id = element.id
+          cursorIndex = 0
+          type = element.type
+          text = element.text || ''
+        }
+        if (type === 'text') {
+          let newText = text
+          if (cursorIndex >= 0) {
+            newText = text.substring(0, cursorIndex) + text.substring(cursorIndex + 1, text.length)
+          }
+          const brotherElements = this.getBrotherElements(id) || []
+          const newElement = { ...element, text: newText }
+          let nearTextElements = [newElement]
+          const index = brotherElements.findIndex(element => element.id === id)
+          let lastIndex = index - 1
+          let nextIndex = index + 1
+          while (lastIndex >= 0) {
+            const lastElement = brotherElements[lastIndex]
+            if (lastElement && lastElement.type === 'text') {
+              nearTextElements = [lastElement, ...nearTextElements]
+              if (cursorIndex !== undefined) cursorIndex += lastElement.text.length
+              lastIndex--
+            } else {
+              lastIndex = -1
+            }
+          }
+          while (nextIndex >= 0 && nextIndex < brotherElements.length) {
+            const nextElement = brotherElements[nextIndex]
+            if (nextElement && nextElement.type === 'text') {
+              nearTextElements = [...nearTextElements, nextElement]
+              nextIndex++
+            } else {
+              nextIndex = -1
+            }
+          }
+          const nearText = nearTextElements.map(element => element.text).join('')
+          if (nearText === '') {
+            this.element = this.getNextElement(nearTextElements[nearTextElements.length - 1].id)
+            nearTextElements.forEach(element => {
+              this.deleteElementById(element.id)
+            })
+          } else {
+            const elements = this.formatText(nearText)
+            // 删除当前文本元素  替换成新的
+            elements.forEach(element => {
+              if (element.type !== 'text' || element.text) {
+                this.prependToElement(id, element)
+              }
+            })
+            nearTextElements.forEach(element => {
+              this.deleteElementById(element.id)
+            })
+            // 获取第n个文字所在元素
+            let index = 0
+            for (let i = 0; i < elements.length; i++) {
+              const element = elements[i]
+              index += element.text.length
+              if (index >= cursorIndex) {
+                cursorIndex = cursorIndex - (index - element.text.length)
+                this.element = { ...element, cursorIndex }
+                break
+              }
+            }
+          }
+        } else if (type === 'function') {
+          if (this.selectFunction === element.id) {
+            const element = this.getNextElement(id)
+            this.element = element
+            this.deleteElementById(id)
+          } else {
+            this.selectFunction = element.id
+          }
+        } else if (type === 'variable') {
+          if (this.selectFunction === element.id) {
+            const element = this.getLastElement(id)
+            this.element = element
+            this.deleteElementById(id)
+          } else {
+            this.selectFunction = element.id
+          }
+        }
+      } else if (event.keyCode === 37) {
+        // ←
+        if (!this.element) return
+        let element = this.element
+        if (element.type === 'params') {
+          if (!element.children || element.children.length === 0 || element.cursorIndex === 0) {
+            element.type = 'function'
+            element.cursorIndex = 0
+            this.element = { ...element }
+          } else {
+            if (!element.cursorIndex) element.cursorIndex = element.children.length
+            element = element.children[element.cursorIndex - 1]
+            this.element = element
+          }
+        } else if (element.cursorIndex === 0) {
+          // 如果在参数内
+          let lastElement = this.getLastElement(element.id)
+          if (!lastElement) {
+            // 判断是否是参数内
+            const parentElement = this.getParentElement(element.id)
+            if (parentElement) {
+              lastElement = { ...parentElement, cursorIndex: 0 }
+            } else {
+              return
+            }
+          }
+          element = lastElement
+          this.element = lastElement
+        }
+        let { cursorIndex, type, text = '' } = element
+        if (type === 'text') {
+          if (!cursorIndex) cursorIndex = text.length
+          this.element = { ...this.element, cursorIndex: cursorIndex - 1 }
+        } else if (type === 'function') {
+          if (cursorIndex === undefined) {
+            this.element = { ...this.element, type: 'params' }
+          }
+        } else if (type === 'variable') {
+          if (cursorIndex === undefined) {
+            // 获取子元素最后一个
+            this.element = { ...this.element, cursorIndex: 0 }
+          }
+        }
+      } else if (event.keyCode === 39) {
+        // →
+        if (!this.element) return
+        let element = this.element
+        if (element.type === 'params') {
+          if (!element.children || element.children.length === 0 || element.cursorIndex === undefined || element.cursorIndex === element.children.length) {
+            element.type = 'function'
+            delete element.cursorIndex
+            this.element = { ...element }
+            return
+          } else {
+            element = element.children[element.cursorIndex]
+            this.element = element
+          }
+        } else if (element.cursorIndex === undefined || (element.type === 'text' && (element.text.length === element.cursorIndex))) {
+          let nextElement = this.getNextElement(element.id)
+
+          if (!nextElement) {
+            // 判断是否是参数内
+            const parentElement = this.getParentElement(element.id)
+            if (parentElement) {
+              nextElement = { ...parentElement }
+              element = { ...nextElement }
+              this.element = element
+              return
+            } else {
+              return
+            }
+          } else {
+            element = { ...nextElement, cursorIndex: 0 }
+            this.element = element
+          }
+        }
+        if (element.type === 'text') {
+          this.element = { ...element, cursorIndex: element.cursorIndex + 1 }
+        } else if (element.type === 'function') {
+          this.element = { ...element, type: 'params', cursorIndex: 0 }
+        } else if (element.type === 'variable') {
+          delete element.cursorIndex
+          this.element = { ...element }
+        }
+      }
+      // 获取当前光标位置
+    },
+    addElement (elementType, data) {
+      const formularEditor = this.$refs.formularEditor
+      // 添加元素
+      if (elementType === 'function') {
+        let idIndex = 1
+        let functionId = data.code
+        while (this.elementIds.includes(functionId)) {
+          functionId = functionId + idIndex++
+        }
+        this.elementIds.push(functionId)
+        // 固定参数
+        const fElement = { id: functionId, type: 'function', code: data.code, text: data.text }
+        if (data.fixedParam) {
+          const params = data.fixedParam.split(',')
+          fElement.children = params.map(item => ({ id: this.getElementId('variable'), type: 'variable', code: item, text: item }))
+        }
+        if (!this.element) {
+        // 添加
+          this.elementTree.push(fElement)
+        } else {
+        // 获取所在元素, 添加到下一个元素 如果是cursorIndex==0 添加到上一个元素
+          const { id, type, cursorIndex } = this.element
+          if (type === 'params') {
+            this.addParams(fElement)
+          } else {
+            if (cursorIndex === 0) {
+              this.prependToElement(id, fElement)
+            } else {
+              this.appendToElement(id, fElement)
+            }
+          }
+        }
+        this.$nextTick(() => {
+          const node = formularEditor.querySelector(`#${functionId}`)
+          const paramsNode = node.getElementsByClassName('fe-params')[0]
+          this.cursorPosition = paramsNode.offsetLeft
+          this.element = {
+            type: 'params',
+            id: functionId,
+            children: node.children
+          }
+        })
+      } else if (elementType === 'variable') {
+        const id = this.getElementId('variable')
+        const vElement = { id: id, type: 'variable', code: data.linkCode || data.code, text: data.linkText || data.text }
+        if (!this.element) {
+        // 添加
+          this.elementTree.push(vElement)
+        } else {
+        // 获取所在元素, 添加到下一个元素
+          const { id, type, dataType, cursorIndex } = this.element
+          if (type === 'params') {
+            this.addParams(vElement)
+          } else {
+            const parentElement = this.getParentElement(id)
+            const splitId = this.getElementId('text')
+            const splitElement = {
+              id: splitId,
+              type: 'text',
+              dataType: 'split',
+              text: ','
+            }
+            if (cursorIndex === 0) {
+              const lastElement = this.getLastElement(id)
+              if (parentElement && parentElement.type === 'function' && lastElement && lastElement.dataType !== 'split') {
+                this.prependToElement(id, splitElement)
+                this.appendToElement(splitId, vElement)
+              } else {
+                this.prependToElement(id, vElement)
+              }
+            } else {
+              // 切分文本添加元素
+              if (parentElement && parentElement.type === 'function' && dataType !== 'split') {
+                this.appendToElement(id, splitElement)
+                this.appendToElement(splitId, vElement)
+              } else {
+                this.appendToElement(id, vElement)
+              }
+            }
+          }
+        }
+        this.$nextTick(() => {
+          const node = formularEditor.querySelector(`#${id}`)
+          this.cursorPosition = node.offsetLeft + node.offsetWidth
+          this.element = vElement
+        })
+      } else {
+        const id = this.getElementId(elementType)
+        const oElement = { id: id, type: 'text', dataType: elementType, text: data.code }
+        if (!this.element) {
+        // 添加
+          this.elementTree.push(oElement)
+        } else {
+        // 获取所在元素, 添加到下一个元素
+          const { id, type, cursorIndex } = this.element
+          if (type === 'params') {
+            this.addParams(oElement)
+          } else {
+            if (cursorIndex === 0) {
+              this.prependToElement(id, oElement)
+            } else {
+              // 切分文本添加元素
+              this.appendToElement(id, oElement)
+            }
+          }
+        }
+        this.$nextTick(() => {
+          const node = formularEditor.querySelector(`#${id}`)
+          this.cursorPosition = node.offsetLeft + node.offsetWidth
+          this.element = oElement
+        })
+      }
+      this.$refs.textarea.focus()
+      // if (cursor === 'params') {
+      //   const element = this.getElementById(id)
+      //   this.addParams(element, 0, { id: functionId, type: 'function', code: data.code, text: data.text })
+      //   // 更新光标位置
+      // } else {
+
+      //   // lineArr.splice(index + 1, 0, { id: functionId, type: 'function', code: data.code, text: data.text })
+      // }
+
+      // 光标移动到括号
+      // this.$refs.formularCode.innerHTML += element
+    },
+    renderNode (element, index) {
+      if (element.type === 'function') {
+        return (
+          <span key={element.id} id={element.id} index={index} class={['fe-function', { 'is-select': this.selectFunction === element.id }]} type="function" code={element.code} text={element.text}>
+            <span class="fe-function__name">{element.text}</span>
+            <span class="fe-bracket">(</span>
+            <span class="fe-params" type="params">
+              {
+                element.children && element.children.map((element, index) => this.renderNode(element, index))
+              }
+            </span>
+            <span class="fe-bracket">)</span>
+          </span>
+        )
+      } else if (element.type === 'split') {
+        return (
+          <span key={element.id} id={element.id} type="split" class="fe-text__split">,</span>
+        )
+      } else if (element.type === 'variable') {
+        return (
+          <span key={element.id} id={element.id} class={['fe-variable', { 'is-select': this.selectFunction === element.id }]} type="variable" code={element.code}> {element.text} </span>
+        )
+      } else {
+        return (
+          <span key={element.id} id={element.id} type="text" class={['fe-text', { [`fe-text__${element.dataType}`]: !!element.dataType }]}>{element.text}</span>
+        )
+      }
+    }
+  },
+  render () {
+    const { line } = this.cursor
+    return (
+      <div class="formular-editor" ref="formularEditor" tabindex="1" onClick={this.clickEditor} onKeydown={this.keydown}>
+        <textarea class="formular-textarea" onInput={this.inputValue} onCompositionstart={this.compositionstart} onCompositionend={this.compositionend} onFocus={() => (this.textFocus = true)} onBlur={() => (this.textFocus = false)} ref="textarea" class="formular-textarea"></textarea>
+        <div class="cursor" style={{ display: this.textFocus ? 'block' : 'none', visibility: this.showCursor ? 'visible' : 'hidden', left: this.cursorPosition + 'px', top: (line - 1) * 20 + 'px' }}></div>
+        <div ref="formularCode" class="formular-code" onClick={this.clickCode} type="code">
+          {
+            this.elementTree.map((element, index) => this.renderNode(element, index))
+          }
+        </div>
+        <span ref="fontWidth" class="font-width">
+        </span>
+      </div>
+    )
+  },
+  mounted () {
+    this.inputFinish = true
+    this.$refs.textarea.focus()
+    this.timer = setInterval(() => {
+      this.showCursor = !this.showCursor
+    }, 500)
+    window.addEventListener('click', () => {
+      this.selectFunction = ''
+    })
+  },
+  destroyed () {
+    clearInterval(this.timer)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.formular-editor {
+  position: relative;;
+
+}
+.cursor {
+  position: absolute;
+  left: 10px;
+  height: 22px;
+  border-left: 1px solid #000;
+  border-right: none;
+  width: 0;
+  pointer-events: none;
+}
+
+.formular-textarea {
+  // display: none;
+}
+.formular-code {
+  white-space: pre-wrap;
+  height: 80px;
+  color: #333;
+  font-family: Menlo,Monaco,Consolas,'Courier New',monospace;
+}
+.font-width {
+  white-space: pre-wrap;
+  font-family: Menlo,Monaco,Consolas,'Courier New',monospace;
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
+  width: 100%;
+  overflow: auto;
+}
+.fe-function {
+  &.is-select {
+    background: rgb(51, 144, 255);
+    color: #fff;
+  }
+}
+.formular-textarea {
+  width: 0;
+  height: 0;
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
+}
+.fe-function__name {
+  color:#708;
+}
+.fe-variable {
+  background: #178cdf;
+  padding: 2px 0;
+  border-radius: 2px;
+  margin: 0 2px;
+  color: #fff;
+   &.is-select {
+    background: rgb(51, 144, 255);
+    color: #fff;
+  }
+}
+.fe-text__operate {
+  color: #666;
+}
+.fe-text__string {
+  color: #a11;
+}
+.fe-text__number {
+  color: #164;
+}
+.fe-text__split {
+  color: #997;
+}
+</style>