feat: sql公式

README.md

@@ -1,19 +1,37 @@
 # sql-formula-editor
 
-## Project setup
-```
+## 项目说明
+
+公式编辑器
+  说明 | 路径
+  --- | ---
+  按钮配置| `/src/lib/editorButtonsMap.js`
+  组件 | `/src/components/common/editor`
+  组件说明 | `/src/components/common/editor/editor.md`
+  公式格式化|`/src/utils/formatFormula.js`
+  公式解析|`/src/utils/parseFormula.js`
+  公式节点渲染说明|`/src/components/common/editor/renderNodeModel.md`
+  组件弹窗说明|`/src/components/common/ModalAddField.md`
+## 项目搭建
+
+```bash
 yarn install
-```
 
 ### Compiles and hot-reloads for development
-```
 yarn serve
-```
 
 ### Compiles and minifies for production
-```
 yarn build
 ```
 
 ### Customize configuration
+
 See [Configuration Reference](https://cli.vuejs.org/config/).
+
+## 项目依赖
+
+### dev工具
+
+### 第三方插件
+
+- [element-ui](https://element.eleme.cn/#/zh-CN/component/tooltip)

src/components/editor/Node.js

@@ -1,24 +1,91 @@
-function Node(opt) {
-  // Object.keys(opt).forEach(key => {
-  //   this[key] = opt[key];
+import { nodeChildrenMap } from './nodeMaps'
+
+function Node({ opt, parentNode }) {
+//   place
+  // let nodeIndex;
+  // let layerIndex;
+  // console.log('parentNode :>> ', parentNode);
+  this.parentNode = parentNode;
+
+  this.seat = {
+    nodeIndex: undefined,
+    layerIndex: undefined
+  }
+  // const watchedProperty = ['nodeIndex', 'layerIndex'];
+  // watchedProperty.forEach(property => {
+  //   Object.defineProperty(this, property, {
+  //     get() {
+  //       return this.seat[property]
+  //     },
+  //     set(newValue) {
+  //       this.seat[property] = newValue;
+  //       if (this.parentNode.name === 'root') {
+  //         this.path = `${this.nodeIndex}`;
+  //       } else {
+  //         this.path = `${this.parentNode.path}-${this.layerIndex}-${this.nodeIndex}`;
+  //       }
+  //       this.updateChildPath();
+  //     },
+  //     enumerable: true,
+  //     configurable: true
+  //   })
   // })
-  this.place = opt.place;
-  this.parentNode = opt.parentNode;
-  this.levelIndex = opt.levelIndex;
-  this.nodeIndex = opt.nodeIndex;
+  Object.keys(opt).forEach(key => {
+    this[key] = opt[key];
+  })
+  if (!opt.children) {
+    const getNodeChildren = nodeChildrenMap[opt.renderType];
+    this.children = getNodeChildren ? getNodeChildren(this): undefined;
+  }
+  Object.defineProperty(this, 'path', {
+    get() {
+      if (this.parentNode) {
+        const parentNodePath = this.parentNode && this.parentNode.path;
+        const pathArr = [];
+        parentNodePath !== undefined && pathArr.push(parentNodePath);
+        this.layerIndex !== undefined && pathArr.push(this.layerIndex);
+        pathArr.push(this.nodeIndex);
+        return pathArr.join('-');
+      } else {
+        return undefined;
+      }
+
+    },
+    set() { 
+      console.log('set Node Path :>> ', this.path);
+    }
+  })
 }
+
 Node.prototype = {
   constructor: Node,
-  insertChildNode() { },
-  deleteChildNode() { },
-  getPath() {
-    return `${this.parentNode.path}-${this.levelIndex}-${this.nodeIndex}`
-  },
-  _stepBack() {
+  moveBack() { 
     this.nodeIndex--;
   },
-  _stepForward() { 
+  moveForward() { 
     this.nodeIndex++;
   },
+  updateChildPath() { 
+    if (this.children && this.children.length) {
+      this.children.forEach((childNodeList, layerIndex) => {
+        childNodeList.forEach((child, index) => {
+          // child.
+        })
+      })
+    }
+  },
 
-}
+  initNode() { 
+
+  },
+  insertNode() { 
+
+  },
+  deleteChildNode() { },
+  getPath() {
+    return `${this.parentNode.path}-${this.levelIndex}-${this.nodeIndex}`
+  },
+
+
+}
+export default Node;

src/docs/Cursor.md

@@ -0,0 +1 @@
+# 光标

src/docs/Node.md

@@ -0,0 +1,20 @@
+# 节点
+
+常规编辑器以一个字符为操作单位，此sql编辑器则以一个节点为操作单位。每个节点上带有不同的属性信息。
+
+## 属性
+
+parentNode: 父节点
+path: 路径
+index
+layerIndex: 方法节点的子节点是一个二维数组，都有layerIndex
+
+## 方法
+
+### moveBack 
+
+更新节点索引位置，后退一步
+
+### moveForward
+
+更新节点位置，前进一步