SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Дерево. Функция создания

Browse Source
This commit is contained in:
krokodilka 2022-08-08 04:23:24 +03:00
parent 7efa51acb5
commit 7b65426dab
7 changed files with 531 additions and 354 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

502
src/create/createQuestion.tsx
View File

@ -49,9 +49,12 @@ const getFreeNumber = (array:Array<ElementsOfObject>):number => {
//Создаём массив, состоящий из id всех существующих модалок //Создаём массив, состоящий из id всех существующих модалок
let indexes:any = [] let indexes:any = []
//И берём только последние числа от строк, превращая их в числа
for (let i = 0; i < array.length; i++) { for (let i = 0; i < array.length; i++) {
indexes.push(array[i].id) indexes.push(Number(array[i].id.slice(-1)))
} }
console.log("indexes")
console.log(indexes)
//Сортируем в порядке возрастания //Сортируем в порядке возрастания
indexes.sort(function compare(a:any, b:any):any { indexes.sort(function compare(a:any, b:any):any {
if (a < b) { return -1;} if (a < b) { return -1;}
@ -59,7 +62,11 @@ const getFreeNumber = (array:Array<ElementsOfObject>):number => {
return 0; return 0;
} }
) )
console.log("filtred indexes")
console.log(indexes)
let max = indexes[indexes.length - 1] let max = indexes[indexes.length - 1]
console.log("max value")
console.log(max)
//Создаём массив - маску от 0 до самого высокого значения id //Создаём массив - маску от 0 до самого высокого значения id
let mask:any = [] let mask:any = []
@ -75,6 +82,7 @@ const getFreeNumber = (array:Array<ElementsOfObject>):number => {
// difference - массив нехватающих в списке номеров. // difference - массив нехватающих в списке номеров.
// Если все окна у нас по порядку, без пропусков - нужно добавить новый номер // Если все окна у нас по порядку, без пропусков - нужно добавить новый номер
if (difference.length === 0) { if (difference.length === 0) {
console.log("+1")
return(max + 1) return(max + 1)
} else { } else {
//Иначе добавить нехватающий //Иначе добавить нехватающий
@ -82,10 +90,13 @@ const getFreeNumber = (array:Array<ElementsOfObject>):number => {
} }
} }
} }
const getIndexById = (id:number, array:Array<ElementsOfObject>):number => { const getIndexById = (id:string, array:Array<ElementsOfObject>):number => {
let index let index
// id = id.slice(-1)
console.log("ищу id " + id)
for (let i = 0; i <= array.length; i++) { for (let i = 0; i <= array.length; i++) {
if (array[i] !== undefined) { if (array[i] !== undefined) {
console.log("B " + array[i].id)
if (array[i].id === id) { if (array[i].id === id) {
index = i index = i
break break
@ -99,212 +110,337 @@ const getIndexById = (id:number, array:Array<ElementsOfObject>):number => {
return 0 return 0
} }
}
const getObjectFromId = (id:string, array:any):any => {
let indexes = id.split("")
//буфер содержит id всех родителей (от ребёнка до первого родителя)
let bufer = []
for (let i = 0; i < indexes.length; i++) {
let val = (id.length - i)
bufer.push(id.substring(0, val))
}
console.log(bufer)
let parentObj = array
for (let i = 0; i < indexes.length - 1; i++) {
let id = bufer[bufer.length - i - 1]
parentObj = parentObj[getIndexById(id, parentObj)].children
}
if (parentObj.length > 1) {
parentObj = parentObj[Number(id.slice(-1))]
}
if (Array.isArray(parentObj)) {
return parentObj[0]
} else {
return parentObj
}
} }
export default () => { export default () => {
const [stockroom, setStockroom] = React.useState<Array<ElementsOfObject>>([]) // const [stockroom, setStockroom] = React.useState<Array<ElementsOfObject>>([
const [focus, setFocus] = React.useState<number | undefined>() //Хранит id объекта const [stockroom, setStockroom] = React.useState<any>([
{id:"0", type:7, children:[
{id:"00", children:[], type:4}
]
},
{id:"1", type:7, children:[
{id:"10", children:[
{id:"100", children:[], type:4},
{id:"101", children:[], type:4}
], type:7}
]
},
{id:"2",type:4, children:[]}
])
const [focus, setFocus] = React.useState<string | undefined>("101") //Хранит путь объекта
// React.useEffect(() => { const setNewFocus = (value:string, multiFocus:boolean) => {
// console.log(focus) //Фокусы ставятся или удаляются от клика по уже созданным элементам.
// if (focus !== undefined) { if (multiFocus) {
// let elem = document.getElementById(focus + "") //Клик ЛКМ + shift - мультивыбор
// if (elem !== null) {
// console.log(elem)
// elem.focus()
// }
// }
// },[focus])
//При пересоздании массива для изменения фокуса объекта отменяются фокусы у всех элементов массива } else {
//Клик ЛКМ - единичный выбор.
//Изменение типа очищает все поля, кроме фокуса setFocus(value)
const typeHC = (type:number): void => {
if (focus !== undefined) {
let index = getIndexById(focus, stockroom)
let newArr = stockroom
newArr[index].type = type
newArr[index].color = ""
newArr[index].text = ""
setStockroom([...newArr])
saveCondition("stockroom", newArr)
} }
} }
const changeFocus = (id: number): void => { // Изменение типа очищает все поля
//Не менять фокус если снова выбрано то же окно const createNewTree = (value:any, tree = stockroom, ignoreFocus = false) => {
if (focus !== id) { console.log("focus")
//Хранилище с отменённым фокусом у объектов (по задумке у одного элемента) console.log(focus)
let newArr = stockroom.map((e:ElementsOfObject) => { return (
e.isFocus = false tree.map((node: any) => {
return e console.log(node.id)
})
//Получаем индексы фокусированных объектов. Новый и, если есть, старый if (node.id === focus && !ignoreFocus) {
let index = getIndexById(id, stockroom) console.log(node)
let obj = {
//Устанавливаем новый фокус и пересоздаём массив ...node,
setFocus(id) ...value,
saveCondition("focus", id) }
console.log(obj)
newArr[index].isFocus = true return (obj)
setStockroom([...newArr]) } else if (node.children.length !== 0) {
} return {
} ...node,
const changeBgColor = (color: string): void => { children: createNewTree(value, node.children)
if (focus !== undefined) { }
let index = getIndexById(focus, stockroom) } else {
return node
let newArr = stockroom }
newArr[index].color = color
setStockroom([...newArr])
saveCondition("stockroom", newArr)
}
}
const changeText = (text: string): void => {
if (focus !== undefined) {
let index = getIndexById(focus, stockroom)
let newArr = stockroom
newArr[index].text = text
setStockroom([...newArr])
saveCondition("stockroom", newArr)
}
}
const createObject = (obj:ElementsOfObject) => {
//Получаем и присваиваем первый свободный айдишник (по возрастанию)
const free = getFreeNumber(stockroom)
obj.id = free
//Хранилище с отменённым фокусом у объектов (по задумке у одного элемента)
let newArr = stockroom.map((e:ElementsOfObject) => {
e.isFocus = false
return e
}) })
)}
//Мы должны вставить новый объект следующим после того, на котором фокус. Это достигается позиционированием в массив const typeHC = (type:any): void => {
if (focus === undefined){ //фокуса нет - добавляем в конец массива if (focus !== undefined) {
newArr.push(obj) setStockroom(createNewTree({type:type}))
setStockroom([...newArr]) }
saveCondition("stockroom", newArr) }
//Говорим стейту с фокусом, что фокус изменился const colorHC = (color:any) => {
setFocus(newArr.length - 1) if (focus !== undefined) {
} else { //фокус есть - добавляем после объекта с фокусом setStockroom(createNewTree({color:color}))
let index = getIndexById(focus, stockroom)
let current = stockroom[index]
//Объект в фокусе - контейнер. Новый объект создаётся с указанием, что контейнер - родитель
if (current.type === 7) {
obj.parent = current.id
}
newArr.splice(index + 1, 0, obj)
//Говорим стейту с фокусом, что фокус изменился
setFocus(index + 1)
setStockroom([...newArr])
saveCondition("stockroom", newArr)
} }
} }
const deleteObject = (id: number): void => {
let index = getIndexById(id, stockroom)
//Проверка, что объект с таким id существует
if (stockroom[index] !== undefined) {
//Если удалён был фокусный объект - фокус теперь неизвестен
if (stockroom[index].isFocus) {
setFocus(undefined)
}
let newArr:any = []
//Если удалённый объект был хранилищем (контейнером, или селектом), мы не вложим в новый массив его и его потомков const createObject = (obj:any, type:number = 4) => {
if (stockroom[index].type === 1 || stockroom[index].type === 7) { if (focus !== undefined) {
stockroom.forEach((e:any, i:number) => { const focusedObj = getObjectFromId(focus, stockroom)
if (e.id !== id) { const creacteNew = (arr = stockroom) => {
if (e.parent !== id) { return arr.map((node: any) => {
newArr.push(e) if (node.children.length !== 0) {
} else { console.log(node)
if (e.isFocus) { return {
setFocus(undefined) ...node,
} children: creacteNew(node.children)
} }
} else {
console.log("просто возвращаю")
console.log(node)
return node
} }
}) })
} else {
newArr = stockroom
newArr.splice(index, 1)
} }
setStockroom([...newArr]) console.log(focusedObj)
saveCondition("stockroom", newArr)
if (focus.length > 1) {
const parentObj = getObjectFromId(focus.slice(0,-1), stockroom)
console.log(parentObj)
console.log(parentObj.children)
let newId:any = getFreeNumber(parentObj.children)
newId = focus.slice(0,-1) + newId
console.log(newId)
const newObj = {
id: newId,
type: type,
children: []
}
let newCildrenArr = []
console.log(parentObj.children.length)
for (let i = 0; parentObj.children.length > i ; i++) {
let node = parentObj.children[i]
console.log("работаю с этой нодой")
console.log(node)
if (node.id === focus) {
newCildrenArr.push(node)
newCildrenArr.push(newObj)
} else {
newCildrenArr.push(node)
}
}
parentObj.children = newCildrenArr
const newTree = creacteNew()
console.log(newTree)
setFocus(newId+"")
setStockroom(newTree)
} else {
let newId:any = getFreeNumber(stockroom)
let newCildrenArr = []
const newObj = {
id: newId+"",
type: 4,
children: []
}
for (let i = 0; stockroom.length > i ; i++) {
let node = stockroom[i]
console.log("работаю с этой нодой")
console.log(node)
if (node.id === focus) {
newCildrenArr.push(node)
newCildrenArr.push(newObj)
} else {
newCildrenArr.push(node)
}
}
console.log(newCildrenArr)
setFocus(newId+"")
setStockroom(newCildrenArr)
}
} }
} }
console.log("render") // const changeFocus = (id: number): void => {
// //Не менять фокус если снова выбрано то же окно
// if (focus !== id) {
// //Хранилище с отменённым фокусом у объектов (по задумке у одного элемента)
// let newArr = stockroom.map((e:ElementsOfObject) => {
// e.isFocus = false
// return e
// })
//
// //Получаем индексы фокусированных объектов. Новый и, если есть, старый
// let index = getIndexById(id, stockroom)
//
// //Устанавливаем новый фокус и пересоздаём массив
// setFocus(id)
// saveCondition("focus", id)
//
// newArr[index].isFocus = true
// setStockroom([...newArr])
// }
// }
// const changeBgColor = (color: string): void => {
// if (focus !== undefined) {
// let index = getIndexById(focus, stockroom)
//
// let newArr = stockroom
// newArr[index].color = color
// setStockroom([...newArr])
// saveCondition("stockroom", newArr)
// }
// }
// const changeText = (text: string): void => {
// if (focus !== undefined) {
// let index = getIndexById(focus, stockroom)
// let newArr = stockroom
// newArr[index].text = text
// setStockroom([...newArr])
// saveCondition("stockroom", newArr)
// }
// }
//
// const createObject = (obj:ElementsOfObject) => {
//
// //Получаем и присваиваем первый свободный айдишник (по возрастанию)
// const free = getFreeNumber(stockroom)
// obj.id = free
//
// //Хранилище с отменённым фокусом у объектов (по задумке у одного элемента)
// let newArr = stockroom.map((e:ElementsOfObject) => {
// e.isFocus = false
// return e
// })
//
// //Мы должны вставить новый объект следующим после того, на котором фокус. Это достигается позиционированием в массив
// if (focus === undefined){ //фокуса нет - добавляем в конец массива
// newArr.push(obj)
// setStockroom([...newArr])
// saveCondition("stockroom", newArr)
// //Говорим стейту с фокусом, что фокус изменился
// setFocus(newArr.length - 1)
// } else { //фокус есть - добавляем после объекта с фокусом
//
//
//
// let index = getIndexById(focus, stockroom)
// let current = stockroom[index]
// //Объект в фокусе - контейнер. Новый объект создаётся с указанием, что контейнер - родитель
// if (current.type === 7) {
// obj.parent = current.id
// }
//
// newArr.splice(index + 1, 0, obj)
//
// //Говорим стейту с фокусом, что фокус изменился
// setFocus(index + 1)
// setStockroom([...newArr])
// saveCondition("stockroom", newArr)
// }
// }
// const deleteObject = (id: number): void => {
// let index = getIndexById(id, stockroom)
// //Проверка, что объект с таким id существует
// if (stockroom[index] !== undefined) {
// //Если удалён был фокусный объект - фокус теперь неизвестен
// if (stockroom[index].isFocus) {
// setFocus(undefined)
// }
//
// let newArr:any = []
// //Если удалённый объект был хранилищем (контейнером, или селектом), мы не вложим в новый массив его и его потомков
// if (stockroom[index].type === 1 || stockroom[index].type === 7) {
// stockroom.forEach((e:any, i:number) => {
// if (e.id !== id) {
// if (e.parent !== id) {
// newArr.push(e)
// } else {
// if (e.isFocus) {
// setFocus(undefined)
// }
// }
// }
// })
// } else {
// newArr = stockroom
// newArr.splice(index, 1)
// }
// setStockroom([...newArr])
// saveCondition("stockroom", newArr)
// }
// }
return( return(
<> <>
<Formik <Header/>
initialValues={{ <HStack
children: '', justifyContent="space-between"
title: '', alignItems="normal"
description:'описание',
}}
onSubmit={(values, actions) => {
// console.log(JSON.stringify(values))
console.log(getCondition())
console.log(stockroom)
}}
> >
{(props: FormikProps<Values>) => ( <VStack
minWidth="200px"
bgColor="lightgray"
height="98vh"
padding="10px"
>
<Form> </VStack>
<Header/>
<HStack
justifyContent="space-between"
alignItems="normal"
>
<VStack
minWidth="200px"
bgColor="lightgray"
height="98vh"
padding="10px"
>
</VStack> <VStack>
<WorkSpace
stockroom={stockroom}
setNewFocus={setNewFocus}
focus={focus}
/>
</VStack>
<VStack> <VStack
<WorkSpace minWidth="250px"
stockroom={stockroom} bgColor="lightgray"
changeFocus={changeFocus} height="98vh"
/> padding="10px"
</VStack> overflow="auto"
>
<VStack <Settings
minWidth="250px" types={types}
bgColor="lightgray" stockroom={stockroom}
height="98vh" typeHC={typeHC}
padding="10px" focus={focus}
overflow="auto" changeFocus={stockroom}
> changeBgColor={colorHC}
<Settings changeText={stockroom}
types={types} getIndexById={getIndexById}
stockroom={stockroom} createObject={createObject}
typeHC={typeHC} deleteObject={stockroom}
focus={focus} />
changeFocus={changeFocus} {/*<Button onClick={() => {*/}
changeBgColor={changeBgColor} {/* typeHC(5)*/}
changeText={changeText} {/*}}>info</Button>*/}
getIndexById={getIndexById} </VStack>
createObject={createObject} </HStack>
deleteObject={deleteObject}
/>
</VStack>
</HStack>
</Form>
)}
</Formik>
</> </>
) )
} }

5
src/create/questionTypes.tsx
View File

@ -1,11 +1,12 @@
//Поля объектов, используемых для отображения созданных пользователем инструментов //Поля объектов, используемых для отображения созданных пользователем инструментов
interface ElementsOfObject { interface ElementsOfObject {
text?: string; text?: string;
id: number; id: string;
isFocus: boolean; // isFocus: boolean;
color?: string; color?: string;
type: number type: number
parent: undefined | number parent: undefined | number
children: Array<ElementsOfObject> | undefined
} }
interface QuestionProps { interface QuestionProps {
type: number; type: number;

90
src/create/settings.tsx
View File

@ -42,51 +42,51 @@ export default (props: any) => {
getIndexById={props.getIndexById} getIndexById={props.getIndexById}
current={current} current={current}
/> />
<Button type="submit">Создать вопрос</Button> {/*<Button type="submit">Создать вопрос</Button>*/}
{current === undefined ? {/*{current === undefined ?*/}
null {/* null*/}
: {/* :*/}
current.type === 5 ? {/* current.type === 5 ?*/}
<SunEditor {/* <SunEditor*/}
width="200px" {/* width="200px"*/}
onChange={(e:any)=> { {/* onChange={(e:any)=> {*/}
let visual = document.getElementById(current.id) {/* let visual = document.getElementById(current.id)*/}
if (visual !== null) { {/* if (visual !== null) {*/}
visual.innerHTML = e {/* visual.innerHTML = e*/}
} {/* }*/}
props.changeText(e) {/* props.changeText(e)*/}
}} {/* }}*/}
// imageUploadHandler={(e:any)=>console.log(e)} {/* // imageUploadHandler={(e:any)=>console.log(e)}*/}
// onImageUpload={(e:any)=>console.log(e)} {/* // onImageUpload={(e:any)=>console.log(e)}*/}
// showController={(e:any)=>console.log(e)} {/* // showController={(e:any)=>console.log(e)}*/}
// hideToolbar={false} {/* // hideToolbar={false}*/}
defaultValue={current.text} {/* defaultValue={current.text}*/}
setOptions={{ {/* setOptions={{*/}
buttonList: [ {/* buttonList: [*/}
[ {/* [*/}
'undo', 'redo', {/* 'undo', 'redo',*/}
'font', 'fontSize', 'formatBlock', {/* 'font', 'fontSize', 'formatBlock',*/}
'paragraphStyle', 'blockquote', {/* 'paragraphStyle', 'blockquote',*/}
'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript', {/* 'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript',*/}
'fontColor', 'hiliteColor', 'textStyle', {/* 'fontColor', 'hiliteColor', 'textStyle',*/}
'removeFormat', {/* 'removeFormat',*/}
'outdent', 'indent', {/* 'outdent', 'indent',*/}
'align', 'horizontalRule', 'list', 'lineHeight', {/* 'align', 'horizontalRule', 'list', 'lineHeight',*/}
'table', 'link', 'image', 'video', {/* 'table', 'link', 'image', 'video',*/}
'fullScreen', 'showBlocks', 'codeView', {/* 'fullScreen', 'showBlocks', 'codeView',*/}
'preview', 'print', 'save', 'template', {/* 'preview', 'print', 'save', 'template',*/}
] {/* ]*/}
] {/* ]*/}
}} {/* }}*/}
/> {/* />*/}
: {/* :*/}
<Textarea {/* <Textarea*/}
onChange={(e) => props.changeText(e.target.value)} {/* onChange={(e) => props.changeText(e.target.value)}*/}
placeholder="Текст" {/* placeholder="Текст"*/}
maxWidth="300px" {/* maxWidth="300px"*/}
value={current.text} {/* value={current.text}*/}
/> {/* />*/}
} {/*}*/}
</> </>
) )
} }

49
src/create/types.tsx
View File

@ -6,10 +6,26 @@ import {TextField} from "./createQuestion";
import Description from "./description" import Description from "./description"
import type {QuestionProps} from "./questionTypes" import type {QuestionProps} from "./questionTypes"
export default ({element, stockroom = [], changeFocus, keyInfo} : any) => { export default ({focused, element, stockroom = [], changeFocus, keyInfo, shiftKeyInfo, focus} : any) => {
switch(element.type) { switch(element.type) {
case 0://Тип элемента вопроса - текст? case 0://Тип элемента вопроса - текст?
return (<TextField name="text" placeholder="текст" type="text" key={keyInfo}/>)
return(
<Button
key={keyInfo}
backgroundColor={element.color}
sx={{border: element.id == focus? focused.border : "solid black 1px"}}
onClick={(event:any) => {
shiftKeyInfo(event, element.id)
event.target.blur()
}}
>{element.text}</Button>
)
// return (<TextField name="text"
// sx={{border: element.id == focus? focused.border : "solid black 1px"}}
// placeholder="текст"
// type="text" key={keyInfo}
// onClick={(event:any) => shiftKeyInfo(event, element.id)}/>)
break; break;
case 1://Тип элемента вопроса - селект? case 1://Тип элемента вопроса - селект?
return ( return (
@ -20,12 +36,29 @@ export default ({element, stockroom = [], changeFocus, keyInfo} : any) => {
// }) // })
// } // }
// </Select> // </Select>
<></> <Button
key={keyInfo}
backgroundColor={element.color}
sx={{border: element.id == focus? focused.border : "solid black 1px"}}
onClick={(event:any) => {
shiftKeyInfo(event, element.id)
event.target.blur()
}}
>{element.text}</Button>
) )
break; break;
case 2://Тип элемента вопроса - чекбокс? case 2://Тип элемента вопроса - чекбокс?
return( return(
<> <>
<Button
key={keyInfo}
backgroundColor={element.color}
sx={{border: element.id == focus? focused.border : "solid black 1px"}}
onClick={(event:any) => {
shiftKeyInfo(event, element.id)
event.target.blur()
}}
>{element.text}</Button>
{/*{*/} {/*{*/}
{/* stockroom.map((e:any, i:number) => {*/} {/* stockroom.map((e:any, i:number) => {*/}
{/* return <Checkbox key={i}>{e.text}</Checkbox>*/} {/* return <Checkbox key={i}>{e.text}</Checkbox>*/}
@ -35,15 +68,17 @@ export default ({element, stockroom = [], changeFocus, keyInfo} : any) => {
) )
break; break;
case 3://Тип элемента вопроса - файл? case 3://Тип элемента вопроса - файл?
return (<input type="file" key={keyInfo}/>) return (<input type="file" key={keyInfo} onClick={(event:any) => shiftKeyInfo(event, element.id)}
style={{border: element.id == focus? focused.border : "solid black 1px"}}/>)
break; break;
case 4://Тип элемента вопроса - кнопка? case 4://Тип элемента вопроса - кнопка?
return( return(
<Button <Button
key={keyInfo} key={keyInfo}
backgroundColor={element.color} backgroundColor={element.color}
onClick={(event: any) => { sx={{border: element.id == focus? focused.border : "solid black 1px"}}
changeFocus(element.id) onClick={(event:any) => {
shiftKeyInfo(event, element.id)
event.target.blur() event.target.blur()
}} }}
>{element.text}</Button> >{element.text}</Button>
@ -56,6 +91,8 @@ export default ({element, stockroom = [], changeFocus, keyInfo} : any) => {
border="solid 1px #d2d2d2" border="solid 1px #d2d2d2"
padding="10px" padding="10px"
key={keyInfo} key={keyInfo}
sx={{border: element.id == focus? focused.border : "solid black 1px"}}
onClick={(event:any) => shiftKeyInfo(event, element.id)}
/> />
) )
break; break;

50
src/create/userElements.tsx
View File

@ -32,33 +32,33 @@ export default (props: any) => {
}} }}
>добавить</Button> >добавить</Button>
<Button {/*<Button*/}
onClick={() => { {/* onClick={() => {*/}
props.createObject({text: "контейнер", isFocus: true, type: 7, id: -1, parent: undefined}) {/* props.createObject({text: "контейнер", isFocus: true, type: 7, id: -1, parent: undefined})*/}
}} {/* }}*/}
>контейнер</Button> {/*>контейнер</Button>*/}
{ {/*{*/}
props.stockroom.length === 0 ? {/* props.stockroom.length === 0 ?*/}
null {/* null*/}
: {/* :*/}
<VStack style={{ {/* <VStack style={{*/}
boxShadow:"rgba(0, 0, 0, 0.3) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 4px 8px", {/* boxShadow:"rgba(0, 0, 0, 0.3) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 4px 8px",*/}
padding:"5px", {/* padding:"5px",*/}
width:"150px", {/* width:"150px",*/}
borderRadius:"4px", {/* borderRadius:"4px",*/}
maxHeight:"30vh", {/* maxHeight:"30vh",*/}
minHeight:"50px", {/* minHeight:"50px",*/}
overflow:"auto", {/* overflow:"auto",*/}
}}> {/* }}>*/}
<Viewer {/* <Viewer*/}
stockroom={props.stockroom} {/* stockroom={props.stockroom}*/}
changeFocus={props.changeFocus} {/* changeFocus={props.changeFocus}*/}
deleteObject={props.deleteObject} {/* deleteObject={props.deleteObject}*/}
/> {/* />*/}
</VStack> {/* </VStack>*/}
} {/*}*/}
</> </>
) )
} }

164
src/create/workSpace.tsx
View File

@ -1,89 +1,104 @@
import React from 'react'; import React from 'react';
import Types from "./types" import Types from "./types"
import {QuestionProps} from "./questionTypes";
import Description from "./description";
import {TextField} from "./createQuestion";
import {Box} from "@chakra-ui/react";
export default ({stockroom, changeFocus} : any) => { const focused = {
border: "solid 2px blue"
}
export default ({stockroom, setNewFocus, focus} : any) => {
if (stockroom.length !== 0) { if (stockroom.length !== 0) {
// На основе хранилища с плоскими объектами строится хранилище с вложенностями. // фокусы - массив со значениями (для мультифокуса)
// focus.split(" ")
console.log("строю с нуля на основании этого массива") const shiftKeyInfo = (event:any, id:any) => {
console.log(stockroom) event.stopPropagation()
if (event.shiftKey) {
//Мы разворачиваем стартовый массив и вкладываем элементы в начало результирующего массива. setNewFocus(id, true)
let reverseStockroom: any } else {
let arrayStorage: any = {} setNewFocus(id, false)
let newStorage: any = []
//Создаём хранилище со всеми вложенностями. Ключи - id родителя
stockroom.reverse().forEach((e: any, i: number) => {
if (e.parent !== undefined) {
if (arrayStorage[e.parent] === undefined) {
arrayStorage[e.parent] = []
}
arrayStorage[e.parent].unshift(e)
} }
}) }
//Если есть какие-то вложенности // console.log("строю с нуля на основании этого массива")
if (Object.keys(arrayStorage).length !== 0) { // console.log(stockroom)
//Теперь у нас есть массив со всеми вложенностями. //
// //Мы разворачиваем стартовый массив и вкладываем элементы в начало результирующего массива.
//Будем проходиться по хранилищу задом наперёд, ибо не имеем пометок где заканчивается хранилище, но знаем где оно начинается // let reverseStockroom: any
reverseStockroom = stockroom.reverse(); // let arrayStorage: any = {}
// let newStorage: any = []
//Важно помнить, что мы проходимся по массиву линейно и совпадение id текущего элемента и id в arrayStorage может быть единожды. //
//Это значит, что найдя id в arrayStorage мы можем что-либо сделать с этим массивом и больше уже больше никогда его не тронем. // //Создаём хранилище со всеми вложенностями. Ключи - id родителя
//Возможны 4 состояния объекта: // stockroom.reverse().forEach((e: any, i: number) => {
//родитель_дети // if (e.parent !== undefined) {
//нет_______нет - просто вложить в результирующий массив // if (arrayStorage[e.parent] === undefined) {
//нет________да - вложить в результирующий массив с полем children // arrayStorage[e.parent] = []
//да________нет - этот объект уже был использован в массиве arrayStorage. Оставить в покое // }
//да_________да - этот объект уже был использован в массиве arrayStorage. В его поле children нужно вложить массив его детей // arrayStorage[e.parent].unshift(e)
// в массиве arrayStorage вложить в поле children родителя массив с детьми и ждать, пока очередь дойдёт до родителя // }
// })
reverseStockroom.forEach((e: any, i: number) => { //
if (arrayStorage[e.id] === undefined) { // //Если есть какие-то вложенности
//Объект не содержит потомков. Дети - нет // if (Object.keys(arrayStorage).length !== 0) {
if (e.parent === undefined) { // //Теперь у нас есть массив со всеми вложенностями.
//Родитель - нет //
newStorage.push(e) // //Будем проходиться по хранилищу задом наперёд, ибо не имеем пометок где заканчивается хранилище, но знаем где оно начинается
} //else Родитель - да // reverseStockroom = stockroom.reverse();
} else { //
//Объект содержит потомков. Дети - да // //Важно помнить, что мы проходимся по массиву линейно и совпадение id текущего элемента и id в arrayStorage может быть единожды.
if (e.parent === undefined) { //является ли объект вложенным? // //Это значит, что найдя id в arrayStorage мы можем что-либо сделать с этим массивом и больше уже больше никогда его не тронем.
//Родитель - нет // //Возможны 4 состояния объекта:
e.children = arrayStorage[e.id] // //родитель_дети
newStorage.push(e) // //нет_______нет - просто вложить в результирующий массив
} else { // //нет________да - вложить в результирующий массив с полем children
//Родитель - да // //да________нет - этот объект уже был использован в массиве arrayStorage. Оставить в покое
arrayStorage[e.parent].forEach((el:any) => { // //да_________да - этот объект уже был использован в массиве arrayStorage. В его поле children нужно вложить массив его детей
if (el.id === e.id) { // // в массиве arrayStorage вложить в поле children родителя массив с детьми и ждать, пока очередь дойдёт до родителя
el.children = arrayStorage[e.id] //
} // reverseStockroom.forEach((e: any, i: number) => {
}) // if (arrayStorage[e.id] === undefined) {
} // //Объект не содержит потомков. Дети - нет
} // if (e.parent === undefined) {
}) // //Родитель - нет
console.log("Я нашёл вложенности") // newStorage.push(e)
console.log(newStorage) // } //else Родитель - да
// } else {
// //Объект содержит потомков. Дети - да
// if (e.parent === undefined) { //является ли объект вложенным?
// //Родитель - нет
// e.children = arrayStorage[e.id]
// newStorage.push(e)
// } else {
// //Родитель - да
// arrayStorage[e.parent].forEach((el:any) => {
// if (el.id === e.id) {
// el.children = arrayStorage[e.id]
// }
// })
// }
// }
// })
// console.log("Я нашёл вложенности")
// console.log(newStorage)
function isContains (e:any) { function isContains (e:any) {
return( return(
e.map((element:any) => { e.map((element:any, i:number) => {
console.log(element) console.log(element)
if (element.children === undefined) { if (element.children === undefined || element.children.length === 0) {
console.log("элемент без потомков") console.log("элемент без потомков")
return( return(
<Types <Types
element={element} keyInfo={element.id} changeFocus={changeFocus} key={element.id} element={element} keyInfo={element.id} setNewFocus={setNewFocus} key={i} shiftKeyInfo={shiftKeyInfo} focused={focused} focus={focus}
/> />
) )
} else { } else {
console.log("элемент с потомками") console.log("элемент с потомками")
return( return(
<div key={element.id} style={{border:"solid black 1px", padding: "10px"}}> <div key={i} style={{border: element.id == focus? focused.border : "solid black 1px", padding: "10px"}}
onClick={(event:any) => {
shiftKeyInfo(event, element.id)
}}
>
{isContains(element.children)} {isContains(element.children)}
</div> </div>
) )
@ -92,18 +107,7 @@ export default ({stockroom, changeFocus} : any) => {
) )
} }
return isContains(newStorage) return isContains(stockroom)
} else {
//Если вложенностей нет
console.log("Вложенностей нет")
return(stockroom.map((e: any, i: number) => {
return (
<Types
element={e} keyInfo={e.id} changeFocus={changeFocus} key={e.id}
/>
)
}))
}
} else { } else {
return <></> return <></>
} }

25
src/index.tsx
View File

@ -3,7 +3,6 @@ import ReactDOM from 'react-dom/client';
import {BrowserRouter, Routes, Route } from "react-router-dom"; import {BrowserRouter, Routes, Route } from "react-router-dom";
import { ChakraProvider } from '@chakra-ui/react'; import { ChakraProvider } from '@chakra-ui/react';
import { SnackbarProvider } from 'notistack'; import { SnackbarProvider } from 'notistack';
import Kit from "./kit"; import Kit from "./kit";
import CreateScope from "./create/createScope"; import CreateScope from "./create/createScope";
import CreateQuestion from "./create/createQuestion"; import CreateQuestion from "./create/createQuestion";
@ -14,17 +13,17 @@ const root = ReactDOM.createRoot(
root.render( root.render(
// <React.StrictMode> // <React.StrictMode>
<ChakraProvider> <ChakraProvider>
<SnackbarProvider maxSnack={3}> <SnackbarProvider maxSnack={3}>
<BrowserRouter> <BrowserRouter>
<Routes> <Routes>
<Route path="/"> <Route path="/">
<Route element={<CreateScope/>} path="/createScope"/> <Route element={<CreateScope/>} path="/createScope"/>
</Route> </Route>
<Route element={<CreateQuestion/>} path="kit"/> <Route element={<CreateQuestion/>} path="kit"/>
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>
</SnackbarProvider> </SnackbarProvider>
</ChakraProvider> </ChakraProvider>
// </React.StrictMode> // </React.StrictMode>
); );