From 7b65426dabca50d235d20f34f1a6e79901ece9ae Mon Sep 17 00:00:00 2001 From: krokodilka Date: Mon, 8 Aug 2022 04:23:24 +0300 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=B5=D1=80=D0=B5=D0=B2=D0=BE.=20=D0=A4?= =?UTF-8?q?=D1=83=D0=BD=D0=BA=D1=86=D0=B8=D1=8F=20=D1=81=D0=BE=D0=B7=D0=B4?= =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/create/createQuestion.tsx | 502 +++++++++++++++++++++------------- src/create/questionTypes.tsx | 5 +- src/create/settings.tsx | 90 +++--- src/create/types.tsx | 49 +++- src/create/userElements.tsx | 50 ++-- src/create/workSpace.tsx | 164 +++++------ src/index.tsx | 25 +- 7 files changed, 531 insertions(+), 354 deletions(-) diff --git a/src/create/createQuestion.tsx b/src/create/createQuestion.tsx index b3b820b7..3ebd80ef 100644 --- a/src/create/createQuestion.tsx +++ b/src/create/createQuestion.tsx @@ -49,9 +49,12 @@ const getFreeNumber = (array:Array):number => { //Создаём массив, состоящий из id всех существующих модалок let indexes:any = [] + //И берём только последние числа от строк, превращая их в числа 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 { if (a < b) { return -1;} @@ -59,7 +62,11 @@ const getFreeNumber = (array:Array):number => { return 0; } ) + console.log("filtred indexes") + console.log(indexes) let max = indexes[indexes.length - 1] + console.log("max value") + console.log(max) //Создаём массив - маску от 0 до самого высокого значения id let mask:any = [] @@ -75,6 +82,7 @@ const getFreeNumber = (array:Array):number => { // difference - массив нехватающих в списке номеров. // Если все окна у нас по порядку, без пропусков - нужно добавить новый номер if (difference.length === 0) { + console.log("+1") return(max + 1) } else { //Иначе добавить нехватающий @@ -82,10 +90,13 @@ const getFreeNumber = (array:Array):number => { } } } -const getIndexById = (id:number, array:Array):number => { +const getIndexById = (id:string, array:Array):number => { let index + // id = id.slice(-1) + console.log("ищу id " + id) for (let i = 0; i <= array.length; i++) { if (array[i] !== undefined) { + console.log("B " + array[i].id) if (array[i].id === id) { index = i break @@ -99,212 +110,337 @@ const getIndexById = (id:number, array:Array):number => { 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 () => { - const [stockroom, setStockroom] = React.useState>([]) - const [focus, setFocus] = React.useState() //Хранит id объекта + // const [stockroom, setStockroom] = React.useState>([ + const [stockroom, setStockroom] = React.useState([ + {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("101") //Хранит путь объекта - // React.useEffect(() => { - // console.log(focus) - // if (focus !== undefined) { - // let elem = document.getElementById(focus + "") - // if (elem !== null) { - // console.log(elem) - // elem.focus() - // } - // } - // },[focus]) + const setNewFocus = (value:string, multiFocus:boolean) => { + //Фокусы ставятся или удаляются от клика по уже созданным элементам. + if (multiFocus) { + //Клик ЛКМ + shift - мультивыбор - //При пересоздании массива для изменения фокуса объекта отменяются фокусы у всех элементов массива - - //Изменение типа очищает все поля, кроме фокуса - 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) + } else { + //Клик ЛКМ - единичный выбор. + setFocus(value) } } - const changeFocus = (id: number): void => { - //Не менять фокус если снова выбрано то же окно - if (focus !== id) { - //Хранилище с отменённым фокусом у объектов (по задумке у одного элемента) - let newArr = stockroom.map((e:ElementsOfObject) => { - e.isFocus = false - return e - }) + // Изменение типа очищает все поля + const createNewTree = (value:any, tree = stockroom, ignoreFocus = false) => { + console.log("focus") + console.log(focus) + return ( + tree.map((node: any) => { + console.log(node.id) - //Получаем индексы фокусированных объектов. Новый и, если есть, старый - 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 (node.id === focus && !ignoreFocus) { + console.log(node) + let obj = { + ...node, + ...value, + } + console.log(obj) + return (obj) + } else if (node.children.length !== 0) { + return { + ...node, + children: createNewTree(value, node.children) + } + } else { + return node + } }) - - //Мы должны вставить новый объект следующим после того, на котором фокус. Это достигается позиционированием в массив - 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 typeHC = (type:any): void => { + if (focus !== undefined) { + setStockroom(createNewTree({type:type})) + } + } + const colorHC = (color:any) => { + if (focus !== undefined) { + setStockroom(createNewTree({color:color})) } } - 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) - } + + const createObject = (obj:any, type:number = 4) => { + if (focus !== undefined) { + const focusedObj = getObjectFromId(focus, stockroom) + const creacteNew = (arr = stockroom) => { + return arr.map((node: any) => { + if (node.children.length !== 0) { + console.log(node) + return { + ...node, + children: creacteNew(node.children) } + } else { + console.log("просто возвращаю") + console.log(node) + return node } }) - } else { - newArr = stockroom - newArr.splice(index, 1) } - setStockroom([...newArr]) - saveCondition("stockroom", newArr) + console.log(focusedObj) + + 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( <> - { - // console.log(JSON.stringify(values)) - console.log(getCondition()) - console.log(stockroom) - }} +
+ - {(props: FormikProps) => ( + -
-
- - + - + + + - - - - - - - - - - )} - + + + {/**/} + + ) } diff --git a/src/create/questionTypes.tsx b/src/create/questionTypes.tsx index ee065fc8..553f5df5 100644 --- a/src/create/questionTypes.tsx +++ b/src/create/questionTypes.tsx @@ -1,11 +1,12 @@ //Поля объектов, используемых для отображения созданных пользователем инструментов interface ElementsOfObject { text?: string; - id: number; - isFocus: boolean; + id: string; + // isFocus: boolean; color?: string; type: number parent: undefined | number + children: Array | undefined } interface QuestionProps { type: number; diff --git a/src/create/settings.tsx b/src/create/settings.tsx index 737a6573..2a895992 100644 --- a/src/create/settings.tsx +++ b/src/create/settings.tsx @@ -42,51 +42,51 @@ export default (props: any) => { getIndexById={props.getIndexById} current={current} /> - - {current === undefined ? - null - : - current.type === 5 ? - { - let visual = document.getElementById(current.id) - if (visual !== null) { - visual.innerHTML = e - } - props.changeText(e) - }} - // imageUploadHandler={(e:any)=>console.log(e)} - // onImageUpload={(e:any)=>console.log(e)} - // showController={(e:any)=>console.log(e)} - // hideToolbar={false} - defaultValue={current.text} - setOptions={{ - buttonList: [ - [ - 'undo', 'redo', - 'font', 'fontSize', 'formatBlock', - 'paragraphStyle', 'blockquote', - 'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript', - 'fontColor', 'hiliteColor', 'textStyle', - 'removeFormat', - 'outdent', 'indent', - 'align', 'horizontalRule', 'list', 'lineHeight', - 'table', 'link', 'image', 'video', - 'fullScreen', 'showBlocks', 'codeView', - 'preview', 'print', 'save', 'template', - ] - ] - }} - /> - : -