计划: 1、编辑器渲染 2、样式属性渲染 3、数据交互输入框(难点,全局变量,局域变量,事件,运行时) 4、图片视频加载 5、联调接口 6、图形渲染 7、整合所有 8、优化编辑器图形样式main
parent
152495d379
commit
a6f2fddd29
@ -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 <div className={css.treeBox} key={item.id}> |
||||
<div className={css.title}> |
||||
<div className={css.text} |
||||
onClick={() => {defaultStore.setChooseNodeId(item.id);handleChangeBoxState(index)}}>{item.name} |
||||
</div> |
||||
<div className={css.cmd}> |
||||
<div>{item.id == chooseNodeId && '*'}</div> |
||||
<div onClick={() => defaultStore.deleteChooseNode(item.id)}>-</div> |
||||
<div>&</div> |
||||
</div> |
||||
</div> |
||||
<div className={css.childBox} style={{maxHeight:boxState[index] ? '300px' : 0}}> |
||||
<div> |
||||
<ElementStructureTree tree={item.childElement}></ElementStructureTree> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} else { |
||||
return <div className={css.treeBox} key={item.id}> |
||||
<div className={css.title}> |
||||
<div className={css.text} |
||||
onClick={() => defaultStore.setChooseNodeId(item.id)}>{item.name} |
||||
</div> |
||||
<div className={css.cmd}> |
||||
<div>{item.id == chooseNodeId && '*'}</div> |
||||
<div onClick={() => defaultStore.deleteChooseNode(item.id)}>-</div> |
||||
<div>&</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
}) |
||||
} else if (Object.keys(props.tree).length == 0) { |
||||
return <div>未发现元素节点</div> |
||||
} else { |
||||
return <div className={css.treeBox}> |
||||
<div className={css.title}> |
||||
<div className={css.text} |
||||
onClick={() => defaultStore.setChooseNodeId(props.tree.id)}>{props.tree.name}-根节点 |
||||
</div> |
||||
<div className={css.cmd}> |
||||
<div>{props.tree.id == chooseNodeId && '*'}</div> |
||||
<div onClick={() => defaultStore.deleteChooseNode(props.tree.id)}>-</div> |
||||
<div>&</div> |
||||
</div> |
||||
</div> |
||||
<div className={css.childBox}> |
||||
<ElementStructureTree tree={props.tree.childElement}></ElementStructureTree> |
||||
</div> |
||||
</div> |
||||
} |
||||
} |
@ -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; |
||||
} |
||||
} |
Loading…
Reference in new issue