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;
+ }
+ }
}
}