From 4f790e4c7bda9c2053fae993b6623612cdf3843d Mon Sep 17 00:00:00 2001 From: floraluo Date: Wed, 11 Sep 2024 21:47:05 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20sql=E5=85=AC=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 30 ++++-- src/components/editor/Node.js | 97 ++++++++++++++++--- src/docs/Cursor.md | 1 + src/docs/Node.md | 20 ++++ src/{components/editor => docs}/editor.md | 0 .../editor => docs}/formulaNodeModel.md | 0 .../editor => docs}/formulaParamsModel.md | 0 src/{components/editor => docs}/params.md | 0 .../editor => docs}/renderNodeModel.md | 0 9 files changed, 127 insertions(+), 21 deletions(-) create mode 100644 src/docs/Cursor.md create mode 100644 src/docs/Node.md rename src/{components/editor => docs}/editor.md (100%) rename src/{components/editor => docs}/formulaNodeModel.md (100%) rename src/{components/editor => docs}/formulaParamsModel.md (100%) rename src/{components/editor => docs}/params.md (100%) rename src/{components/editor => docs}/renderNodeModel.md (100%) diff --git a/README.md b/README.md index 0dd0698..d867993 100644 --- a/README.md +++ b/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) diff --git a/src/components/editor/Node.js b/src/components/editor/Node.js index 48fc493..894cd78 100644 --- a/src/components/editor/Node.js +++ b/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. + }) + }) + } + }, -} \ No newline at end of file + initNode() { + + }, + insertNode() { + + }, + deleteChildNode() { }, + getPath() { + return `${this.parentNode.path}-${this.levelIndex}-${this.nodeIndex}` + }, + + +} +export default Node; \ No newline at end of file diff --git a/src/docs/Cursor.md b/src/docs/Cursor.md new file mode 100644 index 0000000..05e683e --- /dev/null +++ b/src/docs/Cursor.md @@ -0,0 +1 @@ +# 光标 diff --git a/src/docs/Node.md b/src/docs/Node.md new file mode 100644 index 0000000..cc84a08 --- /dev/null +++ b/src/docs/Node.md @@ -0,0 +1,20 @@ +# 节点 + +常规编辑器以一个字符为操作单位，此sql编辑器则以一个节点为操作单位。每个节点上带有不同的属性信息。 + +## 属性 + +parentNode: 父节点 +path: 路径 +index +layerIndex: 方法节点的子节点是一个二维数组，都有layerIndex + +## 方法 + +### moveBack + +更新节点索引位置，后退一步 + +### moveForward + +更新节点位置，前进一步 \ No newline at end of file diff --git a/src/components/editor/editor.md b/src/docs/editor.md similarity index 100% rename from src/components/editor/editor.md rename to src/docs/editor.md diff --git a/src/components/editor/formulaNodeModel.md b/src/docs/formulaNodeModel.md similarity index 100% rename from src/components/editor/formulaNodeModel.md rename to src/docs/formulaNodeModel.md diff --git a/src/components/editor/formulaParamsModel.md b/src/docs/formulaParamsModel.md similarity index 100% rename from src/components/editor/formulaParamsModel.md rename to src/docs/formulaParamsModel.md diff --git a/src/components/editor/params.md b/src/docs/params.md similarity index 100% rename from src/components/editor/params.md rename to src/docs/params.md diff --git a/src/components/editor/renderNodeModel.md b/src/docs/renderNodeModel.md similarity index 100% rename from src/components/editor/renderNodeModel.md rename to src/docs/renderNodeModel.md