добавление и удаление нод
This commit is contained in:
parent
7dc083907f
commit
fcd0f92259
13
package-lock.json
generated
13
package-lock.json
generated
@ -9550,6 +9550,19 @@
|
||||
"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
|
||||
"hasInstallScript": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/function-bind": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
|
||||
|
||||
@ -30,6 +30,7 @@ async function getQuestionList(body?: Partial<GetQuestionListRequest>) {
|
||||
}
|
||||
|
||||
function editQuestion(body: EditQuestionRequest, signal?: AbortSignal) {
|
||||
console.log("`${baseUrl}/question/edit` start")
|
||||
return makeRequest<EditQuestionRequest, EditQuestionResponse>({
|
||||
url: `${baseUrl}/question/edit`,
|
||||
body,
|
||||
|
||||
@ -19,6 +19,7 @@ import type {
|
||||
ElementDefinition,
|
||||
} from "cytoscape";
|
||||
import { QuestionsList } from "../BranchingPanel/QuestionsList";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
|
||||
type PopperItem = {
|
||||
id: () => string;
|
||||
@ -108,7 +109,6 @@ export const CsComponent = ({
|
||||
setModalQuestionParentContentId,
|
||||
setModalQuestionTargetContentId
|
||||
}:Props) => {
|
||||
console.log("Я существую")
|
||||
const quiz = useCurrentQuiz();
|
||||
|
||||
const { dragQuestionContentId, questions } = useQuestionsStore()
|
||||
@ -129,13 +129,13 @@ useEffect(() =>{
|
||||
}, [modalQuestionTargetContentId])
|
||||
|
||||
const addNode = ({ parentNodeContentId }: { parentNodeContentId: string }) => {
|
||||
console.log("dragQuestionContentId " + dragQuestionContentId)
|
||||
const cy = cyRef?.current
|
||||
const parentNodeChildren = cy?.$('edge[source = "' + parentNodeContentId + '"]')?.length
|
||||
const targetQuestion = { ...getQuestionByContentId(dragQuestionContentId) } as AnyQuizQuestion
|
||||
console.log(parentNodeChildren, parentNodeContentId)
|
||||
|
||||
if (targetQuestion && targetQuestion && parentNodeContentId && parentNodeChildren !== undefined) {
|
||||
console.log(targetQuestion, targetQuestion, parentNodeContentId, parentNodeChildren)
|
||||
if (Object.keys(targetQuestion).length !== 0 && Object.keys(targetQuestion).length !== 0 && parentNodeContentId && parentNodeChildren !== undefined) {
|
||||
clearDataAfterAddNode({ parentNodeContentId, targetQuestion, parentNodeChildren })
|
||||
cy?.add([
|
||||
{
|
||||
data: {
|
||||
@ -149,19 +149,17 @@ useEffect(() =>{
|
||||
target: targetQuestion.content.id
|
||||
}
|
||||
}
|
||||
])
|
||||
// clearDataAfterAddNode({ parentNodeContentId, targetQuestion, parentNodeChildren })
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
console.log(dragQuestionContentId)
|
||||
]).layout(lyopts).run()
|
||||
} else {
|
||||
enqueueSnackbar("Добавляемый вопрос не найден")
|
||||
}
|
||||
}
|
||||
|
||||
const clearDataAfterAddNode = ({ parentNodeContentId, targetQuestion, parentNodeChildren }: { parentNodeContentId: string, targetQuestion: AnyQuizQuestion, parentNodeChildren:number }) => {
|
||||
//предупреждаем добавленный вопрос о том, кто его родитель
|
||||
updateQuestion(targetQuestion.id, question => {
|
||||
console.log("записываю на бек ид родителя")
|
||||
console.log({ parentNodeContentId, targetQuestion, parentNodeChildren })
|
||||
//предупреждаем добавленный вопрос о том, кто его родитель
|
||||
updateQuestion(targetQuestion.content.id, question => {
|
||||
question.content.rule.parentId = parentNodeContentId
|
||||
question.content.rule.main = []
|
||||
})
|
||||
@ -174,17 +172,34 @@ useEffect(() =>{
|
||||
updateQuestion(parentNodeContentId, question => question.content.rule.default = targetQuestion.content.id)
|
||||
}
|
||||
}
|
||||
|
||||
const removeNode = ({ targetNodeContentId }: { targetNodeContentId: string }) => {
|
||||
const cy = cyRef?.current
|
||||
//получить можно только дочерние ноды
|
||||
console.log(cy?.$('#'+targetNodeContentId))
|
||||
console.log(cy?.$('#'+targetNodeContentId)?.data())
|
||||
//
|
||||
const parentQuestion = cy?.$('edge[target = "' + targetNodeContentId + '"]').toArray()[0].data()
|
||||
const targetQuestion = cy?.$('#'+targetNodeContentId)?.data()
|
||||
|
||||
|
||||
if (targetQuestion && parentQuestion) {
|
||||
clearDataAfterRemoveNode({targetQuestionId: targetQuestion.id, parentQuestionId: parentQuestion.source})
|
||||
|
||||
cy?.remove(cy?.$('#'+targetNodeContentId)).layout(lyopts).run()
|
||||
}
|
||||
}
|
||||
const clearDataAfterRemoveNode = () => {
|
||||
const clearDataAfterRemoveNode = ({targetQuestionId, parentQuestionId}:{targetQuestionId:string, parentQuestionId:string}) => {
|
||||
console.log({targetQuestionId, parentQuestionId})
|
||||
updateQuestion(targetQuestionId, question => {
|
||||
question.content.rule.parentId = ""
|
||||
question.content.rule.main = []
|
||||
question.content.rule.default = ""
|
||||
})
|
||||
updateQuestion(parentQuestionId, question => {
|
||||
if (question.content.rule.parentId === parentQuestionId) question.content.rule.parentId = ""
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (startCreate) {
|
||||
addNode({ parentNodeContentId: startCreate });
|
||||
@ -195,174 +210,228 @@ const clearDataAfterRemoveNode = () => {
|
||||
|
||||
useEffect(() => {
|
||||
if (startRemove) {
|
||||
// removeNode({ targetNodeContentId: startRemove });
|
||||
removeNode({ targetNodeContentId: startRemove });
|
||||
setStartRemove("");
|
||||
}
|
||||
}, [startRemove]);
|
||||
|
||||
|
||||
|
||||
|
||||
const readyLO = (e) => {
|
||||
//удаляем иконки
|
||||
e.cy.nodes().forEach((ele: any) => {
|
||||
const data = ele.data()
|
||||
data.id && removeButtons(data.id);
|
||||
})
|
||||
initialPopperIcons(e)
|
||||
}
|
||||
|
||||
const lyopts = {
|
||||
name: 'preset',
|
||||
|
||||
positions: (e) => {
|
||||
|
||||
const id = e.id()
|
||||
const incomming = e.cy().edges(`[target="${id}"]`)
|
||||
const layer = 0
|
||||
e.removeData('lastChild')
|
||||
|
||||
if (incomming.length === 0) {
|
||||
const children = e.cy().edges(`[source="${id}"]`)
|
||||
e.data('layer', layer)
|
||||
e.data('children', children.targets().length)
|
||||
const queue = []
|
||||
children.forEach(n => {
|
||||
queue.push({ task: n.target(), layer: layer + 1 })
|
||||
})
|
||||
while (queue.length) {
|
||||
const task = queue.pop()
|
||||
task.task.data('layer', task.layer)
|
||||
const children = e.cy().edges(`[source="${task.task.id()}"]`)
|
||||
task.task.data('children', children.targets().length)
|
||||
if (children.length !== 0) {
|
||||
children.forEach(n => queue.push({ task: n.target(), layer: task.layer + 1 }))
|
||||
}
|
||||
}
|
||||
queue.push({ parent: e, children: children.targets() })
|
||||
while (queue.length) {
|
||||
const task = queue.pop()
|
||||
if (task.children.length === 0) {
|
||||
task.parent.data('subtreeWidth', task.parent.height())
|
||||
continue
|
||||
}
|
||||
const unprocessed = task?.children.filter(e => {
|
||||
return (e.data('subtreeWidth') === undefined)
|
||||
})
|
||||
if (unprocessed.length !== 0) {
|
||||
queue.push(task)
|
||||
unprocessed.forEach(t => {
|
||||
queue.push({ parent: t, children: t.cy().edges(`[source="${t.id()}"]`).targets() })
|
||||
})
|
||||
continue
|
||||
}
|
||||
|
||||
task?.parent.data('subtreeWidth', task.children.reduce((p, n) => p + n.data('subtreeWidth'), 0))
|
||||
}
|
||||
return { x: 200 * e.data('layer'), y: 0 }
|
||||
} else {
|
||||
const parent = e.cy().edges(`[target="${e.id()}"]`)[0].source()
|
||||
const wing = parent.data('subtreeWidth') / 2
|
||||
const lastOffset = parent.data('lastChild')
|
||||
const step = wing * 2 / (parent.data('children') - 1)
|
||||
//e.removeData('subtreeWidth')
|
||||
if (lastOffset !== undefined) {
|
||||
parent.data('lastChild', lastOffset + step)
|
||||
return { x: 200 * e.data('layer'), y: (lastOffset + step) }
|
||||
} else {
|
||||
parent.data('lastChild', parent.position().y - wing)
|
||||
return { x: 200 * e.data('layer'), y: (parent.position().y - wing) }
|
||||
}
|
||||
}
|
||||
}, // map of (node id) => (position obj); or function(node){ return somPos; }
|
||||
zoom: undefined, // the zoom level to set (prob want fit = false if set)
|
||||
pan: true, // the pan level to set (prob want fit = false if set)
|
||||
fit: false, // whether to fit to viewport
|
||||
padding: 30, // padding on fit
|
||||
animate: false, // whether to transition the node positions
|
||||
animationDuration: 500, // duration of animation in ms if enabled
|
||||
animationEasing: undefined, // easing of animation if enabled
|
||||
animateFilter: function (node, i) { return true; }, // a function that determines whether the node should be animated. All nodes animated by default on animate enabled. Non-animated nodes are positioned immediately when the layout starts
|
||||
ready: readyLO, // callback on layoutready
|
||||
transform: function (node, position) { return position; } // transform a given node position. Useful for changing flow direction in discrete layouts
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
document.querySelector("#root")?.addEventListener("mouseup", cleardragQuestionContentId);
|
||||
const cy = cyRef.current;
|
||||
|
||||
cy?.add(storeToNodes(questions))
|
||||
|
||||
// cy?.add(storeToNodes(questions))
|
||||
cy?.add(
|
||||
[
|
||||
{
|
||||
"data": {
|
||||
"id": "1",
|
||||
"label": "нет имени"
|
||||
},
|
||||
"position": {
|
||||
"x": 250,
|
||||
"y": 200
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"id": "1 2",
|
||||
"label": "нет имени"
|
||||
},
|
||||
"position": {
|
||||
"x": 500,
|
||||
"y": 300
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"id": "1 3",
|
||||
"label": "нет имени"
|
||||
},
|
||||
"position": {
|
||||
"x": 500,
|
||||
"y": 400
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"id": "1 2 4",
|
||||
"label": "нет имени"
|
||||
},
|
||||
"position": {
|
||||
"x": 750,
|
||||
"y": 100
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"id": "1 2 6",
|
||||
"label": "нет имени"
|
||||
},
|
||||
"position": {
|
||||
"x": 750,
|
||||
"y": 500
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"id": "1 3 5",
|
||||
"label": "нет имени"
|
||||
},
|
||||
"position": {
|
||||
"x": 750,
|
||||
"y": 300
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"id": "1 3 7",
|
||||
"label": "нет имени"
|
||||
},
|
||||
"position": {
|
||||
"x": 750,
|
||||
"y": 500
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"id": "1 2 6 9867874",
|
||||
"label": "нет имени"
|
||||
},
|
||||
"position": {
|
||||
"x": 1000,
|
||||
"y": 300
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"id": "1 2 6 7398789",
|
||||
"label": "нет имени"
|
||||
},
|
||||
"position": {
|
||||
"x": 1000,
|
||||
"y": 500
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"id": "1 2 6 9484789",
|
||||
"label": "нет имени"
|
||||
},
|
||||
"position": {
|
||||
"x": 1000,
|
||||
"y": 700
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"source": "1",
|
||||
"target": "1 2"
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"source": "1",
|
||||
"target": "1 3"
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"source": "1 2",
|
||||
"target": "1 2 4"
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"source": "1 2",
|
||||
"target": "1 2 6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"source": "1 3",
|
||||
"target": "1 3 5"
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"source": "1 3",
|
||||
"target": "1 3 7"
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"source": "1 2 6",
|
||||
"target": "1 2 6 9867874"
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"source": "1 2 6",
|
||||
"target": "1 2 6 7398789"
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"source": "1 2 6",
|
||||
"target": "1 2 6 9484789"
|
||||
}
|
||||
}
|
||||
]
|
||||
)
|
||||
//cy?.layout(ly).run()
|
||||
//cy?.on('add',()=>cy.fit())
|
||||
// const elecs = cy?.add(
|
||||
// [
|
||||
// {
|
||||
// "data": {
|
||||
// "id": "1",
|
||||
// "label": "нет имени"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// "data": {
|
||||
// "id": "1 2",
|
||||
// "label": "нет имени"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// "data": {
|
||||
// "id": "1 3",
|
||||
// "label": "нет имени"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// "data": {
|
||||
// "id": "1 2 4",
|
||||
// "label": "нет имени"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// "data": {
|
||||
// "id": "1 2 6",
|
||||
// "label": "нет имени"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// "data": {
|
||||
// "id": "1 3 5",
|
||||
// "label": "нет имени"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// "data": {
|
||||
// "id": "1 3 7",
|
||||
// "label": "нет имени"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// "data": {
|
||||
// "id": "1 2 6 9867874",
|
||||
// "label": "нет имени"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// "data": {
|
||||
// "id": "1 2 6 7398789",
|
||||
// "label": "нет имени"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// "data": {
|
||||
// "id": "1 2 6 9484789",
|
||||
// "label": "нет имени"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// "data": {
|
||||
// "source": "1",
|
||||
// "target": "1 2"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// "data": {
|
||||
// "source": "1",
|
||||
// "target": "1 3"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// "data": {
|
||||
// "source": "1 2",
|
||||
// "target": "1 2 4"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// "data": {
|
||||
// "source": "1 2",
|
||||
// "target": "1 2 6"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// "data": {
|
||||
// "source": "1 3",
|
||||
// "target": "1 3 5"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// "data": {
|
||||
// "source": "1 3",
|
||||
// "target": "1 3 7"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// "data": {
|
||||
// "source": "1 2 6",
|
||||
// "target": "1 2 6 9867874"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// "data": {
|
||||
// "source": "1 2 6",
|
||||
// "target": "1 2 6 7398789"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// "data": {
|
||||
// "source": "1 2 6",
|
||||
// "target": "1 2 6 9484789"
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// ).layout(lyopts)
|
||||
// elecs.run()
|
||||
|
||||
//cy?.fit()
|
||||
//cy?.layout().run()
|
||||
|
||||
return () => {
|
||||
document.querySelector("#root")?.removeEventListener("mouseup", cleardragQuestionContentId);
|
||||
@ -390,21 +459,6 @@ const clearDataAfterRemoveNode = () => {
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
const readyLO = (e) => {
|
||||
//удаляем иконки
|
||||
e.cy.nodes().forEach((ele: any) => {
|
||||
const data = ele.data()
|
||||
data.id && removeButtons(data.id);
|
||||
})
|
||||
initialPopperIcons(e)
|
||||
// console.log('ready', e)
|
||||
// console.log(e.cy.nodes())
|
||||
// console.log(e.cy.nodes().data())
|
||||
}
|
||||
|
||||
|
||||
const initialPopperIcons = (e) => {
|
||||
const cy = e.cy
|
||||
|
||||
@ -419,11 +473,6 @@ const clearDataAfterRemoveNode = () => {
|
||||
|
||||
container.style.overflow = "hidden";
|
||||
|
||||
if (!layoutsContainer.current) {
|
||||
layoutsContainer.current = document.createElement("div");
|
||||
layoutsContainer.current.setAttribute("id", "popper-layouts");
|
||||
container.append(layoutsContainer.current);
|
||||
}
|
||||
if (!plusesContainer.current) {
|
||||
plusesContainer.current = document.createElement("div");
|
||||
plusesContainer.current.setAttribute("id", "popper-pluses");
|
||||
@ -439,39 +488,51 @@ const clearDataAfterRemoveNode = () => {
|
||||
gearsContainer.current.setAttribute("id", "popper-gears");
|
||||
container.append(gearsContainer.current);
|
||||
}
|
||||
if (!layoutsContainer.current) {
|
||||
layoutsContainer.current = document.createElement("div");
|
||||
layoutsContainer.current.setAttribute("id", "popper-layouts");
|
||||
container.append(layoutsContainer.current);
|
||||
}
|
||||
|
||||
cy?.nodes()
|
||||
const ext = cy.extent()
|
||||
const nodesInView = cy.nodes().filter(n => {
|
||||
const bb = n.boundingBox()
|
||||
return bb.x1 > ext.x1 && bb.x2 < ext.x2 && bb.y1 > ext.y1 && bb.y2 < ext.y2
|
||||
})
|
||||
|
||||
nodesInView
|
||||
.toArray()
|
||||
?.forEach((item) => {
|
||||
const node = item as NodeSingularWithPopper;
|
||||
//console.log(node)
|
||||
|
||||
const layoutsPopper = node.popper({
|
||||
popper: {
|
||||
placement: "left",
|
||||
modifiers: [{ name: "flip", options: { boundary: node } }],
|
||||
},
|
||||
content: ([item]) => {
|
||||
const itemId = item.id();
|
||||
const itemElement = layoutsContainer.current?.querySelector(
|
||||
`.popper-layout[data-id='${itemId}']`
|
||||
);
|
||||
if (itemElement) {
|
||||
return itemElement;
|
||||
}
|
||||
const layoutsPopper = node.popper({
|
||||
popper: {
|
||||
placement: "left",
|
||||
modifiers: [{ name: "flip", options: { boundary: node } }],
|
||||
},
|
||||
content: ([item]) => {
|
||||
const itemId = item.id();
|
||||
const itemElement = layoutsContainer.current?.querySelector(
|
||||
`.popper-layout[data-id='${itemId}']`
|
||||
);
|
||||
if (itemElement) {
|
||||
return itemElement;
|
||||
}
|
||||
|
||||
const layoutElement = document.createElement("div");
|
||||
layoutElement.classList.add("popper-layout");
|
||||
layoutElement.setAttribute("data-id", item.id());
|
||||
// layoutElement.addEventListener("mouseup", () =>{}
|
||||
// // setStartCreate(node.id())
|
||||
// );
|
||||
//console.log(layoutsContainer.current)
|
||||
layoutsContainer.current?.appendChild(layoutElement);
|
||||
const layoutElement = document.createElement("div");
|
||||
layoutElement.style.zIndex="0"
|
||||
layoutElement.classList.add("popper-layout");
|
||||
layoutElement.setAttribute("data-id", item.id());
|
||||
layoutElement.addEventListener("mouseup", () =>{
|
||||
alert("layout")
|
||||
}
|
||||
// setStartCreate(node.id())
|
||||
);
|
||||
layoutsContainer.current?.appendChild(layoutElement);
|
||||
|
||||
return layoutElement;
|
||||
},
|
||||
});
|
||||
return layoutElement;
|
||||
},
|
||||
});
|
||||
|
||||
const plusesPopper = node.popper({
|
||||
popper: {
|
||||
@ -490,6 +551,7 @@ const clearDataAfterRemoveNode = () => {
|
||||
const plusElement = document.createElement("div");
|
||||
plusElement.classList.add("popper-plus");
|
||||
plusElement.setAttribute("data-id", item.id());
|
||||
plusElement.style.zIndex="1"
|
||||
plusElement.addEventListener("mouseup", () => {
|
||||
setStartCreate(node.id());
|
||||
});
|
||||
@ -516,12 +578,15 @@ const clearDataAfterRemoveNode = () => {
|
||||
const crossElement = document.createElement("div");
|
||||
crossElement.classList.add("popper-cross");
|
||||
crossElement.setAttribute("data-id", item.id());
|
||||
crossElement.style.zIndex="2"
|
||||
crossesContainer.current?.appendChild(crossElement);
|
||||
// crossElement.addEventListener("click", () =>
|
||||
// setStartRemove(node.id())
|
||||
// );
|
||||
crossElement.addEventListener("mouseup", () =>{
|
||||
setStartRemove(node.id())
|
||||
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
//console.log(crossElement)
|
||||
return crossElement;
|
||||
},
|
||||
});
|
||||
@ -532,10 +597,7 @@ const clearDataAfterRemoveNode = () => {
|
||||
modifiers: [{ name: "flip", options: { boundary: node } }],
|
||||
},
|
||||
content: ([item]) => {
|
||||
//console.log(item.data())
|
||||
const itemId = item.id();
|
||||
//console.log(item.data())
|
||||
//console.log(item.data().lastChild)
|
||||
if (item.data().lastChild === NaN || item.data().lastChild === undefined) {
|
||||
return;
|
||||
}
|
||||
@ -550,12 +612,14 @@ const clearDataAfterRemoveNode = () => {
|
||||
const gearElement = document.createElement("div");
|
||||
gearElement.classList.add("popper-gear");
|
||||
gearElement.setAttribute("data-id", item.id());
|
||||
gearElement.style.zIndex="1"
|
||||
gearsContainer.current?.appendChild(gearElement);
|
||||
// gearElement.addEventListener("click", () => {
|
||||
// setOpenedModalSettings(
|
||||
// findQuestionById(quizId, node.id().split(" ").pop() || "").index
|
||||
// );
|
||||
// });
|
||||
gearElement.addEventListener("mouseup", (e) => {
|
||||
console.log("шестерня")
|
||||
// setOpenedModalSettings(
|
||||
// findQuestionById(quizId, node.id().split(" ").pop() || "").index
|
||||
// );
|
||||
});
|
||||
|
||||
return gearElement;
|
||||
},
|
||||
@ -636,85 +700,7 @@ const clearDataAfterRemoveNode = () => {
|
||||
// elements={createGraphElements(tree, quiz)}
|
||||
style={{ height: "480px", background: "#F2F3F7" }}
|
||||
stylesheet={stylesheet}
|
||||
layout={{
|
||||
name: 'preset',
|
||||
|
||||
positions: (e) => {
|
||||
//console.log("идёт расчёт позиции")
|
||||
const id = e.id()
|
||||
const incomming = e.cy().edges(`[target="${id}"]`)
|
||||
const layer = 0
|
||||
e.removeData('lastChild')
|
||||
|
||||
if (incomming.length === 0) {
|
||||
const children = e.cy().edges(`[source="${id}"]`)
|
||||
e.data('layer', layer)
|
||||
e.data('children', children.targets().length)
|
||||
const queue = []
|
||||
children.forEach(n => {
|
||||
queue.push({ task: n.target(), layer: layer + 1 })
|
||||
})
|
||||
while (queue.length) {
|
||||
const task = queue.pop()
|
||||
task.task.data('layer', task.layer)
|
||||
const children = e.cy().edges(`[source="${task.task.id()}"]`)
|
||||
task.task.data('children', children.targets().length)
|
||||
if (children.length !== 0) {
|
||||
children.forEach(n => queue.push({ task: n.target(), layer: task.layer + 1 }))
|
||||
}
|
||||
}
|
||||
queue.push({ parent: e, children: children.targets() })
|
||||
while (queue.length) {
|
||||
const task = queue.pop()
|
||||
if (task.children.length === 0) {
|
||||
task.parent.data('subtreeWidth', task.parent.height())
|
||||
continue
|
||||
}
|
||||
const unprocessed = task?.children.filter(e => e.data('subtreeWidth') === undefined)
|
||||
if (unprocessed.length !== 0) {
|
||||
unprocessed.forEach(t => queue.push({ parent: t, children: t.cy().edges(`[source="${t.id()}"]`).targets() }))
|
||||
continue
|
||||
}
|
||||
task?.parent.data('subtreeWidth', task.children.reduce((p, n) => p + n.data('subtreeWidth'), 0))
|
||||
}
|
||||
return { x: 200 * e.data('layer'), y: 0 }
|
||||
} else {
|
||||
const parent = e.cy().edges(`[target="${e.id()}"]`)[0].source()
|
||||
//console.log('batya', parent)
|
||||
// console.log(e.data('subtreeWidth'), e.id(),(parent.data('children')-1) )
|
||||
const wing = parent.data('subtreeWidth') / 2
|
||||
const lastOffset = parent.data('lastChild')
|
||||
const step = wing * 2 / (parent.data('children') - 1)
|
||||
console.log(parent.data('subtreeWidth'), e.id(), (parent.data('children') - 1), step, wing, e.data('layer'), parent.id(), lastOffset)
|
||||
//e.removeData('subtreeWidth')
|
||||
//console.log('poss', e.id(), 'children', parent.data('children'),'lo', lastOffset, 'v', wing)
|
||||
if (lastOffset !== undefined) {
|
||||
parent.data('lastChild', lastOffset + step)
|
||||
//console.log('lastChildlastChildlastChildlastChildlastChildlastChildlastChildlastChildlastChildlastChildlastChildlastChildlastChildlastChildlastChildlastChild')
|
||||
// console.log('lastChild', lastOffset + step)
|
||||
// return { x: 200 * e.data('layer'), y: (lastOffset + step) }
|
||||
return { x: 200 * e.data('layer'), y: (lastOffset + step) }
|
||||
} else {
|
||||
parent.data('lastChild', parent.position().y - wing)
|
||||
// console.log('lastChildlastChildlastChildlastChildlastChildlastChildlastChildlastChildlastChildlastChildlastChildlastChildlastChildlastChild')
|
||||
// console.log('lastChild', parent.position().y - wing)
|
||||
// return { x: 200 * e.data('layer'), y: (parent.position().y - wing)}
|
||||
return { x: 200 * e.data('layer'), y: (parent.position().y - wing) }
|
||||
}
|
||||
}
|
||||
}, // map of (node id) => (position obj); or function(node){ return somPos; }
|
||||
zoom: undefined, // the zoom level to set (prob want fit = false if set)
|
||||
pan: undefined, // the pan level to set (prob want fit = false if set)
|
||||
fit: false, // whether to fit to viewport
|
||||
padding: 30, // padding on fit
|
||||
animate: false, // whether to transition the node positions
|
||||
animationDuration: 500, // duration of animation in ms if enabled
|
||||
animationEasing: undefined, // easing of animation if enabled
|
||||
animateFilter: function (node, i) { return true; }, // a function that determines whether the node should be animated. All nodes animated by default on animate enabled. Non-animated nodes are positioned immediately when the layout starts
|
||||
ready: readyLO, // callback on layoutready
|
||||
// stop: (e) => console.log('stop', e), // callback on layoutstop
|
||||
transform: function (node, position) { return position; } // transform a given node position. Useful for changing flow direction in discrete layouts
|
||||
}}
|
||||
layout={(lyopts)}
|
||||
cy={(cy) => {
|
||||
cyRef.current = cy;
|
||||
}}
|
||||
|
||||
@ -4,6 +4,7 @@ interface Nodes {
|
||||
data: {
|
||||
id: string;
|
||||
label: string;
|
||||
parent?: string;
|
||||
}
|
||||
}
|
||||
interface Edges {
|
||||
@ -24,6 +25,13 @@ export const storeToNodes = (questions: AnyQuizQuestion[]) => {
|
||||
id: question.content.id,
|
||||
label: question.title ? question.title : "noname"
|
||||
}})
|
||||
// nodes.push({
|
||||
// data: {
|
||||
// id: "delete" + question.content.id,
|
||||
// label: "X",
|
||||
// parent: question.content.id,
|
||||
// }
|
||||
// },)
|
||||
if (question.content.rule.parentId !== "root") edges.push({data: {
|
||||
source: question.content.rule.parentId,
|
||||
target: question.content.id
|
||||
|
||||
@ -55,7 +55,7 @@ export const QuestionsList = () => {
|
||||
{questions.filter((q:AnyQuestion) => q.type).map(({ title, id, content }, index) => (
|
||||
<Button
|
||||
onMouseDown={() => {//Разрешаем добавить этот вопрос если у него нет родителя (не добавляли ещё в дерево)
|
||||
if (!content.rule.parentId) updateDragQuestionContentId(id)
|
||||
if (!content.rule.parentId) updateDragQuestionContentId(content.id)
|
||||
}}
|
||||
key={index}
|
||||
sx={{
|
||||
|
||||
@ -26,7 +26,6 @@ export default function QuestionsPage() {
|
||||
const quiz = useCurrentQuiz();
|
||||
|
||||
const [settingBranching, setSettingBranching] = useState<boolean>(false);
|
||||
|
||||
if (!quiz) return null;
|
||||
|
||||
return (
|
||||
@ -102,7 +101,7 @@ export default function QuestionsPage() {
|
||||
</Box>
|
||||
</Box>
|
||||
{createPortal(<QuizPreview />, document.body)}
|
||||
{openedModalSettingsId !== null && <BranchingQuestions/>}
|
||||
{/* {openedModalSettingsId !== null && <BranchingQuestions/>} */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -126,6 +126,7 @@ export const updateQuestion = <T extends AnyTypedQuizQuestion>(
|
||||
questionIndex: number,
|
||||
recipe: (question: T) => void,
|
||||
) => setProducedState(state => {
|
||||
console.log("начинаю отправку fire квиза " )
|
||||
const question = state.listQuestions[quizId][questionIndex] as T;
|
||||
|
||||
recipe(question);
|
||||
|
||||
@ -121,14 +121,12 @@ export const updateQuestion = (
|
||||
questionId: string,
|
||||
updateFn: (question: AnyTypedQuizQuestion) => void,
|
||||
) => {
|
||||
console.log("вызвали запрос на изменение вопроса " + questionId)
|
||||
setProducedState(state => {
|
||||
const question = state.questions.find(q => q.id === questionId) || state.questions.find(q => {
|
||||
console.log(q)
|
||||
return q.content.id === questionId
|
||||
});
|
||||
const question = state.questions.find(q => q.id === questionId) || state.questions.find(q => q.content.id === questionId);
|
||||
if (!question) return;
|
||||
if (question.type === null) throw new Error("Cannot update untyped question, use 'updateUntypedQuestion' instead");
|
||||
|
||||
console.log("question был найден")
|
||||
updateFn(question);
|
||||
}, {
|
||||
type: "updateQuestion",
|
||||
@ -136,12 +134,14 @@ export const updateQuestion = (
|
||||
updateFn: updateFn.toString(),
|
||||
});
|
||||
|
||||
clearTimeout(requestTimeoutId);
|
||||
requestTimeoutId = setTimeout(() => {
|
||||
// clearTimeout(requestTimeoutId);
|
||||
// requestTimeoutId = setTimeout(() => {
|
||||
requestQueue.enqueue(async () => {
|
||||
const q = useQuestionsStore.getState().questions.find(q => q.id === questionId);
|
||||
const q = useQuestionsStore.getState().questions.find(q => q.id === questionId) || useQuestionsStore.getState().questions.find(q => q.content.id === questionId);
|
||||
console.log("мы пытаемся найти вопрос ")
|
||||
if (!q) return;
|
||||
if (q.type === null) throw new Error("Cannot send update request for untyped question");
|
||||
console.log(q.title)
|
||||
|
||||
const response = await questionApi.edit(questionToEditQuestionRequest(q));
|
||||
|
||||
@ -152,7 +152,7 @@ export const updateQuestion = (
|
||||
devlog("Error editing question", { error, questionId });
|
||||
enqueueSnackbar("Не удалось сохранить вопрос");
|
||||
});
|
||||
}, REQUEST_DEBOUNCE);
|
||||
// }, REQUEST_DEBOUNCE);
|
||||
};
|
||||
|
||||
export const addQuestionVariant = (questionId: string) => {
|
||||
@ -430,7 +430,6 @@ function setProducedState<A extends string | { type: unknown; }>(
|
||||
|
||||
|
||||
export const cleardragQuestionContentId = () => {
|
||||
console.log("чищу чищу")
|
||||
useQuestionsStore.setState({dragQuestionContentId: null});
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user