@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/dist/src/components/FormulaEditor.vue.js

@@ -0,0 +1,1235 @@
+import { createVNode, createTextVNode } from "vue";
+const _sfc_main = {
+  name: "epx-formula-editor1",
+  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 === void 0) 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 === void 0 ? left + rect.width : left;
+            const line = Math.round((rect.y - editorRect.y) / 20) + 1;
+            this.cursor.line = line;
+          } else if (type === "function") {
+            const node = formularEditor.querySelector(`#${id}`);
+            const editorRect = formularEditor.getBoundingClientRect();
+            let index = cursorIndex;
+            if (index === void 0) 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 === void 0 ? left + rect.width : left;
+            const line = Math.round((rect.y - editorRect.y) / 20) + 1;
+            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 === void 0) {
+              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.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 element2 = {
+          id: textId,
+          type: "text",
+          text: ""
+        };
+        elementTree.push(element2);
+        this.element = element2;
+      }
+      let {
+        id,
+        text = "",
+        cursorIndex
+      } = this.element;
+      let newText = text + data;
+      const brotherElements = this.getBrotherElements(id) || [];
+      if (cursorIndex !== void 0) {
+        newText = text.substring(0, cursorIndex) + data + text.substring(cursorIndex);
+      }
+      const element = {
+        ...this.element,
+        text: newText
+      };
+      let nearTextElements = [element];
+      const index = brotherElements.findIndex((element2) => element2.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((element2) => element2.text).join("");
+      const elements = this.formatText(nearText);
+      elements.forEach((element2) => {
+        this.prependToElement(id, element2);
+      });
+      nearTextElements.forEach((element2) => {
+        this.deleteElementById(element2.id);
+      });
+      if (cursorIndex !== void 0) {
+        let index2 = 0;
+        for (let i = 0; i < elements.length; i++) {
+          const element2 = elements[i];
+          index2 += element2.text.length;
+          if (index2 >= cursorIndex) {
+            cursorIndex = cursorIndex - (index2 - element2.text.length) + 1;
+            this.element = {
+              ...element2,
+              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 !== void 0) {
+          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 !== void 0 ? 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;
+      }
+    },
+    clickEditor(event) {
+      this.$refs.textarea.focus();
+    },
+    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.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 elementLeft2 = paramElement.offsetLeft;
+          const elementRight = paramElement.offsetLeft + paramElement.offsetWidth;
+          if ((left < elementLeft2 || left - elementLeft2 < elementRight - left) && event.offsetY - paramElement.offsetTop < 20) {
+            this.cursorPosition = elementLeft2;
+            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.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] !== void 0) {
+          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 left2 = element.offsetLeft;
+        const right = element.offsetLeft + element.offsetWidth;
+        const elementInfo = this.getElementById(element.id) || {};
+        const line = Math.round(event.offsetY / 20);
+        this.cursor.line = line;
+        if (x - left2 > right - x || event.offsetY - element.offsetTop > 20) {
+          this.cursorPosition = right;
+          this.element = {
+            ...elementInfo
+          };
+        } else {
+          this.cursorPosition = left2;
+          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;
+        let {
+          id,
+          cursorIndex,
+          type,
+          text = ""
+        } = element;
+        if (type === "params") {
+          if (cursorIndex > 0) {
+            element = element.children[cursorIndex];
+          } else if (cursorIndex === void 0 && 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 !== void 0) {
+            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((element2) => element2.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((element2) => element2.text).join("");
+          if (nearText === "") {
+            this.element = this.getLastElement(nearTextElements[0].id);
+            nearTextElements.forEach((element2) => {
+              this.deleteElementById(element2.id);
+            });
+          } else {
+            const elements = this.formatText(nearText);
+            elements.forEach((element2) => {
+              if (element2.type !== "text" || element2.text) {
+                this.prependToElement(id, element2);
+              }
+            });
+            nearTextElements.forEach((element2) => {
+              this.deleteElementById(element2.id);
+            });
+            if (cursorIndex !== void 0) {
+              let nextCursorIndex = cursorIndex - 1;
+              let index2 = 0;
+              for (let i = 0; i < elements.length; i++) {
+                const element2 = elements[i];
+                index2 += element2.text.length;
+                if (index2 >= nextCursorIndex) {
+                  nextCursorIndex = nextCursorIndex - (index2 - element2.text.length);
+                  this.element = {
+                    ...element2,
+                    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 element2 = this.getLastElement(id);
+            const node = formularEditor.querySelector(`#${id}`);
+            this.element = element2;
+            this.deleteElementById(id);
+            this.cursorPosition -= node.offsetWidth;
+          } else {
+            this.selectFunction = element.id;
+          }
+        } else if (type === "variable") {
+          if (this.selectFunction === element.id) {
+            const element2 = this.getLastElement(id);
+            const node = formularEditor.querySelector(`#${id}`);
+            this.element = element2;
+            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 === void 0 || 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((element2) => element2.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 !== void 0) 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((element2) => element2.text).join("");
+          if (nearText === "") {
+            this.element = this.getNextElement(nearTextElements[nearTextElements.length - 1].id);
+            nearTextElements.forEach((element2) => {
+              this.deleteElementById(element2.id);
+            });
+          } else {
+            const elements = this.formatText(nearText);
+            elements.forEach((element2) => {
+              if (element2.type !== "text" || element2.text) {
+                this.prependToElement(id, element2);
+              }
+            });
+            nearTextElements.forEach((element2) => {
+              this.deleteElementById(element2.id);
+            });
+            let index2 = 0;
+            for (let i = 0; i < elements.length; i++) {
+              const element2 = elements[i];
+              index2 += element2.text.length;
+              if (index2 >= cursorIndex) {
+                cursorIndex = cursorIndex - (index2 - element2.text.length);
+                this.element = {
+                  ...element2,
+                  cursorIndex
+                };
+                break;
+              }
+            }
+          }
+        } else if (type === "function") {
+          if (this.selectFunction === element.id) {
+            const element2 = this.getNextElement(id);
+            this.element = element2;
+            this.deleteElementById(id);
+          } else {
+            this.selectFunction = element.id;
+          }
+        } else if (type === "variable") {
+          if (this.selectFunction === element.id) {
+            const element2 = this.getLastElement(id);
+            this.element = element2;
+            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 === void 0) {
+            this.element = {
+              ...this.element,
+              type: "params"
+            };
+          }
+        } else if (type === "variable") {
+          if (cursorIndex === void 0) {
+            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 === void 0 || 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 === void 0 || 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 {
+          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,
+          type: "variable",
+          code: data.linkCode || data.code,
+          text: data.linkText || data.text
+        };
+        if (!this.element) {
+          this.elementTree.push(vElement);
+        } else {
+          const {
+            id: id2,
+            type,
+            dataType,
+            cursorIndex
+          } = this.element;
+          if (type === "params") {
+            this.addParams(vElement);
+          } else {
+            const parentElement = this.getParentElement(id2);
+            const splitId = this.getElementId("text");
+            const splitElement = {
+              id: splitId,
+              type: "text",
+              dataType: "split",
+              text: ","
+            };
+            if (cursorIndex === 0) {
+              const lastElement = this.getLastElement(id2);
+              if (parentElement && parentElement.type === "function" && lastElement && lastElement.dataType !== "split") {
+                this.prependToElement(id2, splitElement);
+                this.appendToElement(splitId, vElement);
+              } else {
+                this.prependToElement(id2, vElement);
+              }
+            } else {
+              if (parentElement && parentElement.type === "function" && dataType !== "split") {
+                this.appendToElement(id2, splitElement);
+                this.appendToElement(splitId, vElement);
+              } else {
+                this.appendToElement(id2, 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,
+          type: "text",
+          dataType: elementType,
+          text: data.code
+        };
+        if (!this.element) {
+          this.elementTree.push(oElement);
+        } else {
+          const {
+            id: id2,
+            type,
+            cursorIndex
+          } = this.element;
+          if (type === "params") {
+            this.addParams(oElement);
+          } else {
+            if (cursorIndex === 0) {
+              this.prependToElement(id2, oElement);
+            } else {
+              this.appendToElement(id2, oElement);
+            }
+          }
+        }
+        this.$nextTick(() => {
+          const node = formularEditor.querySelector(`#${id}`);
+          this.cursorPosition = node.offsetLeft + node.offsetWidth;
+          this.element = oElement;
+        });
+      }
+      this.$refs.textarea.focus();
+    },
+    clearSelectFun() {
+      this.selectFunction = "";
+    },
+    renderNode(element, index) {
+      if (element.type === "function") {
+        return createVNode("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
+        }, [createVNode("span", {
+          "class": "fe-function__name"
+        }, [element.text]), createVNode("span", {
+          "class": "fe-bracket"
+        }, [createTextVNode("(")]), createVNode("span", {
+          "class": "fe-params",
+          "type": "params"
+        }, [element.children && element.children.map((element2, index2) => this.renderNode(element2, index2))]), createVNode("span", {
+          "class": "fe-bracket"
+        }, [createTextVNode(")")])]);
+      } else if (element.type === "split") {
+        return createVNode("span", {
+          "key": element.id,
+          "id": element.id,
+          "type": "split",
+          "class": "fe-text__split"
+        }, [createTextVNode(",")]);
+      } else if (element.type === "variable") {
+        return createVNode("span", {
+          "key": element.id,
+          "id": element.id,
+          "class": ["fe-variable", {
+            "is-select": this.selectFunction === element.id
+          }],
+          "type": "variable",
+          "code": element.code
+        }, [createTextVNode(" "), element.text, createTextVNode(" ")]);
+      } else {
+        return createVNode("span", {
+          "key": element.id,
+          "id": element.id,
+          "type": "text",
+          "class": ["fe-text", {
+            [`fe-text__${element.dataType}`]: !!element.dataType
+          }]
+        }, [element.text]);
+      }
+    }
+  },
+  render() {
+    const {
+      line
+    } = this.cursor;
+    return createVNode("div", {
+      "class": "formular-editor",
+      "ref": "formularEditor",
+      "tabindex": "1",
+      "onClick": this.clickEditor,
+      "onKeydown": this.keydown
+    }, [createVNode("textarea", {
+      "class": "formular-textarea",
+      "onInput": this.inputValue,
+      "onCompositionstart": this.compositionstart,
+      "onCompositionend": this.compositionend,
+      "onFocus": () => this.textFocus = true,
+      "onBlur": () => this.textFocus = false,
+      "ref": "textarea"
+    }, null), createVNode("div", {
+      "class": "cursor",
+      "style": {
+        display: this.textFocus ? "block" : "none",
+        visibility: this.showCursor ? "visible" : "hidden",
+        left: this.cursorPosition + "px",
+        top: (line - 1) * 20 + "px"
+      }
+    }, null), createVNode("div", {
+      "ref": "formularCode",
+      "class": "formular-code",
+      "onClick": this.clickCode,
+      "type": "code"
+    }, [this.elementTree.map((element, index) => this.renderNode(element, index))]), createVNode("span", {
+      "ref": "fontWidth",
+      "class": "font-width"
+    }, null)]);
+  },
+  mounted() {
+    this.inputFinish = true;
+    this.$refs.textarea.focus();
+    this.timer = setInterval(() => {
+      this.showCursor = !this.showCursor;
+    }, 500);
+    window.addEventListener("click", this.clearSelectFun);
+  },
+  unmounted() {
+    clearInterval(this.timer);
+    window.removeEventListener("click", this.clearSelectFun);
+  }
+};
+export {
+  _sfc_main as default
+};