计划: 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