rgv
/
rgv-official-react-2023
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

基本完成了结构化

Browse Source 
计划：
1、编辑器渲染
2、样式属性渲染
3、数据交互输入框（难点，全局变量，局域变量，事件，运行时）
4、图片视频加载
5、联调接口
6、图形渲染
7、整合所有
8、优化编辑器图形样式
main
expressgy 2 years ago
parent 152495d379
commit a6f2fddd29
7 changed files with 273 additions and 9 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 83
      src/components/ElementStructureTree/index.jsx
  2. 32
      src/components/ElementStructureTree/index.module.scss
  3. 20
      src/store/defaultStore.js
  4. 56
      src/tools/index.js
  5. 67
      src/view/EditPageNew/index.jsx
  6. 22
      src/view/EditPageNew/index.module.scss

83
src/components/ElementStructureTree/index.jsx
Unescape View File

@ -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>
}
}

32
src/components/ElementStructureTree/index.module.scss
Unescape View File

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

20
src/store/defaultStore.js
Unescape View File

@ -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

56
src/tools/index.js
Unescape View File

@ -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
}
// 框架基础属性

67
src/view/EditPageNew/index.jsx
Unescape View File

@ -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)}>
<div>
<div className={css.molecule}>{item.name}</div>
<div className={css.moleculeCmd}>{item.choose}</div>
<div className={css.molecule}>
<div>序列{index}</div>
<div>ID{item.id}</div>
<div>名称:{item.name}</div>
</div>
<div className={css.moleculeCmd}>
<div className={css.delete} onClick={(e) =>deleteThumbnail(e, index)}>-</div></div>
</div>
</div>
})
@ -207,10 +261,9 @@ export default function EditPageNew() {
<div className={css.main}>
<div className={css.container}
style={{left: attrLabelPosition * -99 + '%'}}>
{/* 页面节点树*/}
{/* 元素结构树*/}
<div className={css.elementStructureTree}>
<div>根节点</div>
<div></div>
<ElementStructureTree tree={nowContent}></ElementStructureTree>
</div>
<div className={css.linner}></div>
{/*新增元素*/}

22
src/view/EditPageNew/index.module.scss
Unescape View File

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

Write Preview
Loading…
Cancel
Save