From a6f2fddd294e1e9734fc5a2e590c145ecf2649d8 Mon Sep 17 00:00:00 2001 From: expressgy Date: Fri, 10 Feb 2023 19:30:13 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E5=AE=8C=E6=88=90=E4=BA=86?= =?UTF-8?q?=E7=BB=93=E6=9E=84=E5=8C=96=20=E8=AE=A1=E5=88=92=EF=BC=9A=201?= =?UTF-8?q?=E3=80=81=E7=BC=96=E8=BE=91=E5=99=A8=E6=B8=B2=E6=9F=93=202?= =?UTF-8?q?=E3=80=81=E6=A0=B7=E5=BC=8F=E5=B1=9E=E6=80=A7=E6=B8=B2=E6=9F=93?= =?UTF-8?q?=203=E3=80=81=E6=95=B0=E6=8D=AE=E4=BA=A4=E4=BA=92=E8=BE=93?= =?UTF-8?q?=E5=85=A5=E6=A1=86=EF=BC=88=E9=9A=BE=E7=82=B9=EF=BC=8C=E5=85=A8?= =?UTF-8?q?=E5=B1=80=E5=8F=98=E9=87=8F=EF=BC=8C=E5=B1=80=E5=9F=9F=E5=8F=98?= =?UTF-8?q?=E9=87=8F=EF=BC=8C=E4=BA=8B=E4=BB=B6=EF=BC=8C=E8=BF=90=E8=A1=8C?= =?UTF-8?q?=E6=97=B6=EF=BC=89=204=E3=80=81=E5=9B=BE=E7=89=87=E8=A7=86?= =?UTF-8?q?=E9=A2=91=E5=8A=A0=E8=BD=BD=205=E3=80=81=E8=81=94=E8=B0=83?= =?UTF-8?q?=E6=8E=A5=E5=8F=A3=206=E3=80=81=E5=9B=BE=E5=BD=A2=E6=B8=B2?= =?UTF-8?q?=E6=9F=93=207=E3=80=81=E6=95=B4=E5=90=88=E6=89=80=E6=9C=89=208?= =?UTF-8?q?=E3=80=81=E4=BC=98=E5=8C=96=E7=BC=96=E8=BE=91=E5=99=A8=E5=9B=BE?= =?UTF-8?q?=E5=BD=A2=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DirectoryStructureTree/index.jsx | 2 +- src/components/ElementStructureTree/index.jsx | 83 +++++++++++++++++++ .../ElementStructureTree/index.module.scss | 32 +++++++ src/store/defaultStore.js | 20 +++++ src/tools/index.js | 56 +++++++++++++ src/view/EditPageNew/index.jsx | 67 +++++++++++++-- src/view/EditPageNew/index.module.scss | 22 ++++- 7 files changed, 273 insertions(+), 9 deletions(-) create mode 100644 src/components/ElementStructureTree/index.jsx create mode 100644 src/components/ElementStructureTree/index.module.scss diff --git a/src/components/DirectoryStructureTree/index.jsx b/src/components/DirectoryStructureTree/index.jsx index 5174bac..4e45da5 100644 --- a/src/components/DirectoryStructureTree/index.jsx +++ b/src/components/DirectoryStructureTree/index.jsx @@ -1,4 +1,4 @@ -// Nie 2023/2/8 +// Nie 2023/2/8 import css from './index.module.scss' export default function DirectoryStructureTree(props){ return props.tree.map((item, index) => { diff --git a/src/components/ElementStructureTree/index.jsx b/src/components/ElementStructureTree/index.jsx new file mode 100644 index 0000000..f1ed317 --- /dev/null +++ b/src/components/ElementStructureTree/index.jsx @@ -0,0 +1,83 @@ +// Nie 2023/2/10 元素结构树 + +import css from './index.module.scss' +import {defaultStore} from "@/store/index.js"; +import {useEffect, useState} from "react"; + +export default function ElementStructureTree(props) { + const [boxState, setBoxState] = useState(new Array(Array.isArray(props.tree)?props.tree.length:1).fill(false)); + const [chooseNodeId, setChooseNodeId] = useState(defaultStore.chooseNodeId) + // // 打开关闭标签 + function handleChangeBoxState(index){ + const temporaryState = new Array(boxState.length).fill(false); + if(!boxState[index]){ + temporaryState[index] = true; + } + setBoxState(temporaryState) + } + // 展开闭合状态 + useEffect(() => { + if(props.state){ + setBoxState(new Array(boxState.length).fill(false)) + } + }, [props.state]) + // 选中状态 + useEffect(() => { + setChooseNodeId(defaultStore.chooseNodeId) + }, [defaultStore.chooseNodeId]) + + if (Array.isArray(props.tree)) { + return props.tree.map((item, index) => { + if (item.childElement && Array.isArray(item.childElement)) { + return
+
+
{defaultStore.setChooseNodeId(item.id);handleChangeBoxState(index)}}>{item.name} +
+
+
{item.id == chooseNodeId && '*'}
+
defaultStore.deleteChooseNode(item.id)}>-
+
&
+
+
+
+
+ +
+
+
+ } else { + return
+
+
defaultStore.setChooseNodeId(item.id)}>{item.name} +
+
+
{item.id == chooseNodeId && '*'}
+
defaultStore.deleteChooseNode(item.id)}>-
+
&
+
+
+
+ } + }) + } else if (Object.keys(props.tree).length == 0) { + return
未发现元素节点
+ } else { + return
+
+
defaultStore.setChooseNodeId(props.tree.id)}>{props.tree.name}-根节点 +
+
+
{props.tree.id == chooseNodeId && '*'}
+
defaultStore.deleteChooseNode(props.tree.id)}>-
+
&
+
+
+
+ +
+
+ } +} \ No newline at end of file diff --git a/src/components/ElementStructureTree/index.module.scss b/src/components/ElementStructureTree/index.module.scss new file mode 100644 index 0000000..166d5bb --- /dev/null +++ b/src/components/ElementStructureTree/index.module.scss @@ -0,0 +1,32 @@ +@import '@/assets/default.scss'; +.treeBox{ + position: relative; + + & > div.title{ + position: relative; + @include font-serif; + font-weight: 600; + cursor: pointer; + display: flex; + border-left: 1px solid #333; + padding-left: 0.3rem; + & > div.text{ + position: relative; + flex: 1; + } + & > div.cmd{ + position: relative; + flex-shrink: 0; + display: flex; + & > div{ + position: relative; + padding: 0 0.5rem; + } + } + } + & > div.childBox{ + position: relative; + padding-left: 1rem; + overflow: hidden; + } +} \ No newline at end of file diff --git a/src/store/defaultStore.js b/src/store/defaultStore.js index ee3aa9d..8261f68 100644 --- a/src/store/defaultStore.js +++ b/src/store/defaultStore.js @@ -28,15 +28,26 @@ class DefaultStore { // 新元素转存媒介 newElementIdentify = null; + // 选择的元素节点 + chooseNodeId = null; + // 删除节点元素 + deleteChooseNodeId = null + constructor() { // mobx6 和以前版本这是最大的区别 makeObservable(this, { config: observable, directoryStructureTree: observable, Atom: observable, + chooseNodeId: observable, + deleteChooseNodeId: observable, newElementIdentify: observable, + + setNewElementIdentify: action, setName: action, + setChooseNodeId: action, + deleteChooseNode:action, titleName: computed }); } @@ -54,6 +65,15 @@ class DefaultStore { setNewElementIdentify(identify) { this.newElementIdentify = identify } + + // 选择元素节点 + setChooseNodeId(id) { + this.chooseNodeId = id + } + // 删除节点元素 + deleteChooseNode(id){ + this.deleteChooseNodeId = id + } } export default DefaultStore \ No newline at end of file diff --git a/src/tools/index.js b/src/tools/index.js index a262cef..81bfcaa 100644 --- a/src/tools/index.js +++ b/src/tools/index.js @@ -12,6 +12,62 @@ export function getTargetElement(identify, AtomTemplate){ } return element } +// 选择元素节点数的节点 +export function getTargetNode(id, node){ + let targetNode = null + if(Array.isArray(node)){ + node.map((item, index) => { + if(item.id == id){ + targetNode = item + return item + }else{ + if(item.childElement && item.childElement.length > 0){ + const s = getTargetNode(id, item.childElement) + if(s) targetNode = s + } + } + }) + }else{ + if(node.id == id){ + return node + }else{ + if(node.childElement.length > 0){ + const s = getTargetNode(id, node.childElement) + if(s) targetNode = s + } + } + } + return targetNode +} +// 删除元素节点数的节点 +export function deleteTargetNode(id, node){ + if(Array.isArray(node)){ + const newList = node.filter((item, index) => { + if(item.childElement && item.childElement.length > 0){ + const node = deleteTargetNode(id, item.childElement) + if(node){ + item.childElement = node + } + } + if(item.id!=id)return true + }) + if(newList.length != node){ + return newList + }else{ + return null + } + }else{ + if(node.id == id){ + alert('根节点无法删除') + return node + }else{ + if(node.childElement.length > 0){ + deleteTargetNode(id, node.childElement) + } + } + } + return node +} // 框架基础属性 diff --git a/src/view/EditPageNew/index.jsx b/src/view/EditPageNew/index.jsx index 9f164c1..d08d4c2 100644 --- a/src/view/EditPageNew/index.jsx +++ b/src/view/EditPageNew/index.jsx @@ -1,10 +1,11 @@ import {useState, useEffect} from 'react'; import {defaultStore} from '@/store/index'; -import {getTargetElement, NE} from "@/tools/index.js"; +import {getTargetElement, getTargetNode, deleteTargetNode, NE} from "@/tools/index.js"; import DirectoryStructureTree from "@/components/DirectoryStructureTree/index.jsx"; import Modal from '@/components/Modal'; import Button from "@/components/Button/index.jsx"; import Atom from "@/components/Atom/index.jsx"; +import ElementStructureTree from "@/components/ElementStructureTree/index.jsx"; import css from './index.module.scss' import svgLolipop from '@/assets/lolipop.svg' @@ -66,14 +67,48 @@ export default function EditPageNew() { return; } const newElement = getTargetElement(defaultStore.newElementIdentify, new NE()) + newElement.id= Math.random() nowElement.childElement.push(newElement); setNowElement(nowElement) + setNowContent({...nowContent}) defaultStore.setNewElementIdentify(null); }) return () => { handleNewElementChange() } - }, [nowElement]) + }, [nowElement, nowContent]) + + // 选择元素 + useEffect(() => { + const handleNowElementChange = autorun(() => { + if(!defaultStore.chooseNodeId) return; + const node = getTargetNode(defaultStore.chooseNodeId, nowContent) + if(!node){ + alert('未找到节点元素。') + }else{ + setNowElement(node) + } + }) + return () => { + handleNowElementChange() + } + },[nowElement, nowContent]) + // 删除元素 + useEffect(() => { + const handleNowElementDelete = autorun(() => { + if(!defaultStore.deleteChooseNodeId) return; + console.log('Click Del------------------------------------------------------------') + console.log('ID', defaultStore.deleteChooseNodeId) + console.log('NowCOntent', nowContent) + console.log('+++++++++++++++++++++++++++++++++++++++++++++++') + deleteTargetNode(defaultStore.deleteChooseNodeId, nowContent) + setNowContent({...nowContent}) + defaultStore.deleteChooseNode(null) + }) + return () => { + handleNowElementDelete() + } + },[nowContent]) // 关闭大纲添加的页面 function closeThumbnailModal() { @@ -87,6 +122,7 @@ export default function EditPageNew() { thumbnailList.push(newThumbnail); // 内容列表添加新元素(同时生成根元素) const newElement = getTargetElement('singleFrame' ,new NE()); + newElement.id = Math.random(); nowContentList[newThumbnail.id] = newElement setNowContentList({...nowContentList}) setThumbnailList(thumbnailList) @@ -104,6 +140,19 @@ export default function EditPageNew() { if(nowContent.identify = 'singleFrame' && nowContentList[thumbnailList[index].id].childElement.length == 0){ setNowElement(nowContentList[thumbnailList[index].id]); } + defaultStore.setChooseNodeId(null) + setNowElement(null) + } + // 删除缩略图-大纲 + function deleteThumbnail(e, index){ + e.stopPropagation(); + delete nowContentList[thumbnailList[index].id] + if(thumbnailList[index].choose){ + setNowElement(null) + setNowContent({}) + } + thumbnailList.splice(index, 1) + setThumbnailList([...thumbnailList]) } // 切换属性标签 function handleChangeAttrLabelPosition(index) { @@ -154,8 +203,13 @@ export default function EditPageNew() { className={item.choose ? moleculeBoxChoose : css.moleculeBox} key={index} onClick={() => chooseThumbnail(index)}>
-
{item.name}
-
{item.choose}
+
+
序列{index}
+
ID{item.id}
+
名称:{item.name}
+
+
+
deleteThumbnail(e, index)}>-
}) @@ -207,10 +261,9 @@ export default function EditPageNew() {
- {/* 页面节点树*/} + {/* 元素结构树*/}
-
根节点
-
+
{/*新增元素*/} diff --git a/src/view/EditPageNew/index.module.scss b/src/view/EditPageNew/index.module.scss index 46d8b65..c82b121 100644 --- a/src/view/EditPageNew/index.module.scss +++ b/src/view/EditPageNew/index.module.scss @@ -255,8 +255,28 @@ & > div { position: relative; - flex: 1; margin: 0.5rem; + display: flex; + height: 100%; + & > div.molecule{ + position: relative; + @include font-serif; + flex: 1; + overflow: hidden; + } + & > div.moleculeCmd{ + position: relative; + flex-shrink: 0; + padding: 0 0rem 0 0.5rem; + & > div.delete{ + width: 25px; + height: 25px; + text-align: center; + font-size: 30px; + background: #3EC1D3; + border-radius: 30px; + } + } } }