846 lines
28 KiB
TypeScript
846 lines
28 KiB
TypeScript
import { useEffect, useLayoutEffect, useRef, useState } from "react";
|
||
import Cytoscape from "cytoscape";
|
||
import { Button, Box } from "@mui/material";
|
||
import CytoscapeComponent from "react-cytoscapejs";
|
||
import popper from "cytoscape-popper";
|
||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||
import { updateRootContentId } from "@root/quizes/actions"
|
||
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared"
|
||
import { useQuestionsStore } from "@root/questions/store";
|
||
import { deleteQuestion, updateQuestion, getQuestionByContentId, clearRuleForAll, createFrontResult } from "@root/questions/actions";
|
||
import { updateCanCreatePublic, updateModalInfoWhyCantCreate, updateOpenedModalSettingsId, } from "@root/uiTools/actions";
|
||
import { cleardragQuestionContentId } from "@root/uiTools/actions";
|
||
import { withErrorBoundary } from "react-error-boundary";
|
||
import { ProblemIcon } from "@ui_kit/ProblemIcon";
|
||
|
||
import { storeToNodes } from "./helper";
|
||
|
||
import "./styles.css";
|
||
|
||
import type {
|
||
Stylesheet,
|
||
Core,
|
||
NodeSingular,
|
||
AbstractEventObject,
|
||
ElementDefinition,
|
||
} from "cytoscape";
|
||
import { enqueueSnackbar } from "notistack";
|
||
import { useUiTools } from "@root/uiTools/store";
|
||
|
||
type PopperItem = {
|
||
id: () => string;
|
||
};
|
||
|
||
type Modifier = {
|
||
name: string;
|
||
options: unknown;
|
||
};
|
||
|
||
type PopperConfig = {
|
||
popper: {
|
||
placement: string;
|
||
modifiers?: Modifier[];
|
||
};
|
||
content: (items: PopperItem[]) => void;
|
||
};
|
||
|
||
type Popper = {
|
||
update: () => Promise<void>;
|
||
setOptions: (modifiers: { modifiers?: Modifier[] }) => void;
|
||
};
|
||
|
||
type NodeSingularWithPopper = NodeSingular & {
|
||
popper: (config: PopperConfig) => Popper;
|
||
};
|
||
|
||
const stylesheet: Stylesheet[] = [
|
||
{
|
||
selector: "node",
|
||
style: {
|
||
shape: "round-rectangle",
|
||
width: 130,
|
||
height: 130,
|
||
backgroundColor: "#FFFFFF",
|
||
label: "data(label)",
|
||
"font-size": "16",
|
||
color: "#4D4D4D",
|
||
"text-halign": "center",
|
||
"text-valign": "center",
|
||
"text-wrap": "wrap",
|
||
"text-max-width": "80",
|
||
},
|
||
},
|
||
{
|
||
selector: "[?eroticeyeblink]",
|
||
style: {
|
||
"border-width": "4px",
|
||
"border-style": "solid",
|
||
"border-color": "#7e2aea",
|
||
},
|
||
},
|
||
{
|
||
selector: ".multiline-auto",
|
||
style: {
|
||
"text-wrap": "wrap",
|
||
"text-max-width": "80",
|
||
},
|
||
},
|
||
{
|
||
selector: "edge",
|
||
style: {
|
||
width: 30,
|
||
"line-color": "#DEDFE7",
|
||
"curve-style": "taxi",
|
||
"taxi-direction": "horizontal",
|
||
"taxi-turn": 60,
|
||
},
|
||
},
|
||
{
|
||
selector: ":selected",
|
||
style: {
|
||
"border-style": "solid",
|
||
"border-width": 1.5,
|
||
"border-color": "#9A9AAF",
|
||
},
|
||
},
|
||
];
|
||
|
||
Cytoscape.use(popper);
|
||
|
||
interface Props {
|
||
modalQuestionParentContentId: string;
|
||
modalQuestionTargetContentId: string;
|
||
setOpenedModalQuestions: (open: boolean) => void;
|
||
setModalQuestionParentContentId: (id: string) => void;
|
||
setModalQuestionTargetContentId: (id: string) => void;
|
||
}
|
||
|
||
|
||
|
||
function CsComponent({
|
||
modalQuestionParentContentId,
|
||
modalQuestionTargetContentId,
|
||
setOpenedModalQuestions,
|
||
setModalQuestionParentContentId,
|
||
setModalQuestionTargetContentId
|
||
}: Props) {
|
||
const quiz = useCurrentQuiz();
|
||
|
||
const { dragQuestionContentId, desireToOpenABranchingModal, canCreatePublic } = useUiTools()
|
||
const trashQuestions = useQuestionsStore().questions
|
||
const questions = trashQuestions.filter((question) => question.type !== "result" && question.type !== null)
|
||
const [startCreate, setStartCreate] = useState("");
|
||
const [startRemove, setStartRemove] = useState("");
|
||
|
||
const cyRef = useRef<Core | null>(null);
|
||
const layoutsContainer = useRef<HTMLDivElement | null>(null);
|
||
const plusesContainer = useRef<HTMLDivElement | null>(null);
|
||
const crossesContainer = useRef<HTMLDivElement | null>(null);
|
||
const gearsContainer = useRef<HTMLDivElement | null>(null);
|
||
|
||
|
||
useEffect(() => {
|
||
return () => {
|
||
// if (!canCreatePublic) updateModalInfoWhyCantCreate(true)
|
||
}
|
||
}, []);
|
||
|
||
useLayoutEffect(() => {
|
||
const cy = cyRef?.current
|
||
if (desireToOpenABranchingModal) {
|
||
setTimeout(() => {
|
||
cy?.getElementById(desireToOpenABranchingModal)?.data("eroticeyeblink", true)
|
||
}, 250)
|
||
} else {
|
||
cy?.elements().data("eroticeyeblink", false)
|
||
}
|
||
}, [desireToOpenABranchingModal])
|
||
useLayoutEffect(() => {
|
||
updateOpenedModalSettingsId()
|
||
// updateRootContentId(quiz.id, "")
|
||
// clearRuleForAll()
|
||
}, [])
|
||
useEffect(() => {
|
||
if (modalQuestionTargetContentId.length !== 0 && modalQuestionParentContentId.length !== 0) {
|
||
addNode({ parentNodeContentId: modalQuestionParentContentId, targetNodeContentId: modalQuestionTargetContentId })
|
||
}
|
||
setModalQuestionParentContentId("")
|
||
setModalQuestionTargetContentId("")
|
||
}, [modalQuestionTargetContentId])
|
||
|
||
const addNode = ({ parentNodeContentId, targetNodeContentId }: { parentNodeContentId: string, targetNodeContentId?: string }) => {
|
||
|
||
//запрещаем работу родителя-ребенка если это один и тот же вопрос
|
||
if (parentNodeContentId === targetNodeContentId) return
|
||
|
||
|
||
const cy = cyRef?.current
|
||
const parentNodeChildren = cy?.$('edge[source = "' + parentNodeContentId + '"]')?.length
|
||
//если есть инфо о выбранном вопросе из модалки - берём родителя из инфо модалки. Иначе из значения дропа
|
||
const targetQuestion = { ...getQuestionByContentId(targetNodeContentId || dragQuestionContentId) } as AnyTypedQuizQuestion
|
||
if (Object.keys(targetQuestion).length !== 0 && parentNodeContentId && parentNodeChildren !== undefined) {
|
||
clearDataAfterAddNode({ parentNodeContentId, targetQuestion, parentNodeChildren })
|
||
cy?.data('changed', true)
|
||
createFrontResult(quiz.backendId, targetQuestion.content.id)
|
||
const es = cy?.add([
|
||
{
|
||
data: {
|
||
id: targetQuestion.content.id,
|
||
label: targetQuestion.title === "" || targetQuestion.title === " " ? "noname" : targetQuestion.title
|
||
}
|
||
},
|
||
{
|
||
data: {
|
||
source: parentNodeContentId,
|
||
target: targetQuestion.content.id
|
||
}
|
||
}
|
||
])
|
||
cy?.layout(lyopts).run()
|
||
cy?.center(es)
|
||
} else {
|
||
enqueueSnackbar("Добавляемый вопрос не найден")
|
||
}
|
||
}
|
||
|
||
const clearDataAfterAddNode = ({ parentNodeContentId, targetQuestion, parentNodeChildren }: { parentNodeContentId: string, targetQuestion: AnyTypedQuizQuestion, parentNodeChildren: number }) => {
|
||
|
||
const parentQuestion = { ...getQuestionByContentId(parentNodeContentId) } as AnyTypedQuizQuestion
|
||
|
||
|
||
//смотрим не добавлен ли родителю result. Если да - убираем его. Веточкам result не нужен
|
||
trashQuestions.forEach((targetQuestion) => {
|
||
if (targetQuestion.type === "result" && targetQuestion.content.rule.parentId === parentQuestion.content.id) {
|
||
deleteQuestion(targetQuestion.id);
|
||
}
|
||
})
|
||
|
||
|
||
//предупреждаем добавленный вопрос о том, кто его родитель
|
||
updateQuestion(targetQuestion.content.id, question => {
|
||
question.content.rule.parentId = parentNodeContentId
|
||
question.content.rule.main = []
|
||
})
|
||
//предупреждаем родителя о новом потомке (если он ещё не знает о нём)
|
||
if (!parentQuestion.content.rule.children.includes(targetQuestion.content.id)) updateQuestion(parentNodeContentId, question => {
|
||
question.content.rule.children = [...question.content.rule.children, targetQuestion.content.id]
|
||
})
|
||
|
||
|
||
//Если детей больше 1 - предупреждаем стор вопросов об открытии модалки ветвления
|
||
if (parentQuestion.content.rule.children >= 1) {
|
||
updateOpenedModalSettingsId(targetQuestion.content.id)
|
||
}
|
||
}
|
||
|
||
|
||
const removeNode = ({ targetNodeContentId }: { targetNodeContentId: string }) => {
|
||
const deleteNodes = [] as string[]
|
||
const deleteEdges: any = []
|
||
const cy = cyRef?.current
|
||
|
||
const findChildrenToDelete = (node) => {
|
||
|
||
//Узнаём грани, идущие от этой ноды
|
||
cy?.$('edge[source = "' + node.id() + '"]')?.toArray().forEach((edge) => {
|
||
const edgeData = edge.data()
|
||
|
||
//записываем id грани для дальнейшего удаления
|
||
deleteEdges.push(edge)
|
||
//ищем ноду на конце грани, записываем её ID для дальнейшего удаления
|
||
const targetNode = cy?.$("#" + edgeData.target)
|
||
deleteNodes.push(targetNode.data().id)
|
||
//вызываем функцию для анализа потомков уже у этой ноды
|
||
findChildrenToDelete(targetNode)
|
||
})
|
||
|
||
}
|
||
findChildrenToDelete(cy?.getElementById(targetNodeContentId))
|
||
|
||
const targetQuestion = getQuestionByContentId(targetNodeContentId)
|
||
|
||
if (targetQuestion.content.rule.parentId === "root" && quiz) {
|
||
updateRootContentId(quiz?.id, "")
|
||
updateQuestion(targetNodeContentId, question => {
|
||
question.content.rule.parentId = ""
|
||
question.content.rule.main = []
|
||
question.content.rule.children = []
|
||
question.content.rule.default = ""
|
||
})
|
||
trashQuestions.forEach(q => {
|
||
if (q.type === "result") {
|
||
deleteQuestion(q.id);
|
||
}
|
||
});
|
||
clearRuleForAll()
|
||
|
||
} else {
|
||
|
||
const parentQuestionContentId = cy?.$('edge[target = "' + targetNodeContentId + '"]')?.toArray()?.[0]?.data()?.source
|
||
if (targetNodeContentId && parentQuestionContentId) {
|
||
if (cy?.edges(`[source="${parentQuestionContentId}"]`).length === 0)
|
||
createFrontResult(quiz.backendId, parentQuestionContentId)
|
||
clearDataAfterRemoveNode({ targetQuestionContentId: targetNodeContentId, parentQuestionContentId })
|
||
cy?.remove(cy?.$('#' + targetNodeContentId)).layout(lyopts).run()
|
||
}
|
||
|
||
}
|
||
|
||
//После всех манипуляций удаляем грани и ноды из CS Чистим rule потомков на беке
|
||
|
||
deleteNodes.forEach((nodeId) => {//Ноды
|
||
cy?.remove(cy?.$("#" + nodeId))
|
||
removeButtons(nodeId)
|
||
updateQuestion(nodeId, question => {
|
||
question.content.rule.parentId = ""
|
||
question.content.rule.main = []
|
||
question.content.rule.default = ""
|
||
question.content.rule.children = []
|
||
})
|
||
|
||
|
||
})
|
||
|
||
deleteEdges.forEach((edge: any) => {//Грани
|
||
cy?.remove(edge)
|
||
})
|
||
|
||
removeButtons(targetNodeContentId)
|
||
cy?.data('changed', true)
|
||
cy?.layout(lyopts).run()
|
||
|
||
//удаляем result всех потомков
|
||
trashQuestions.forEach((qr) => {
|
||
if (qr.type === "result") {
|
||
if (deleteNodes.includes(qr.content.rule.parentId) || qr.content.rule.parentId === targetQuestion.content.id) {
|
||
deleteQuestion(qr.id);
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
const clearDataAfterRemoveNode = ({ targetQuestionContentId, parentQuestionContentId }: { targetQuestionContentId: string, parentQuestionContentId: string }) => {
|
||
|
||
|
||
|
||
updateQuestion(targetQuestionContentId, question => {
|
||
question.content.rule.parentId = ""
|
||
question.content.rule.children = []
|
||
question.content.rule.main = []
|
||
question.content.rule.default = ""
|
||
})
|
||
|
||
|
||
//чистим rule родителя
|
||
const parentQuestion = getQuestionByContentId(parentQuestionContentId)
|
||
const newRule = {}
|
||
const newChildren = [...parentQuestion.content.rule.children]
|
||
newChildren.splice(parentQuestion.content.rule.children.indexOf(targetQuestionContentId), 1);
|
||
newRule.main = parentQuestion.content.rule.main.filter((data) => data.next !== targetQuestionContentId) //удаляем условия перехода от родителя к этому вопросу
|
||
newRule.parentId = parentQuestion.content.rule.parentId
|
||
newRule.default = parentQuestion.content.rule.default === targetQuestionContentId ? "" : parentQuestion.content.rule.default
|
||
newRule.children = newChildren
|
||
|
||
updateQuestion(parentQuestionContentId, (PQ) => {
|
||
PQ.content.rule = newRule
|
||
})
|
||
}
|
||
|
||
|
||
|
||
useEffect(() => {
|
||
if (startCreate) {
|
||
addNode({ parentNodeContentId: startCreate });
|
||
cleardragQuestionContentId()
|
||
setStartCreate("");
|
||
}
|
||
}, [startCreate]);
|
||
|
||
useEffect(() => {
|
||
if (startRemove) {
|
||
removeNode({ targetNodeContentId: startRemove });
|
||
setStartRemove("");
|
||
}
|
||
}, [startRemove]);
|
||
|
||
|
||
const readyLO = (e) => {
|
||
if (e.cy.data('firstNode') === 'nonroot') {
|
||
e.cy.data('firstNode', 'root')
|
||
e.cy.nodes().sort((a, b) => (a.data('root') ? 1 : -1)).layout(lyopts).run()
|
||
|
||
} else {
|
||
|
||
|
||
e.cy.data('changed', false)
|
||
e.cy.removeData('firstNode')
|
||
}
|
||
|
||
//удаляем иконки
|
||
e.cy.nodes().forEach((ele: any) => {
|
||
const data = ele.data()
|
||
data.id && removeButtons(data.id);
|
||
})
|
||
initialPopperIcons(e)
|
||
}
|
||
|
||
const lyopts = {
|
||
name: 'preset',
|
||
|
||
positions: (e) => {
|
||
if (!e.cy().data('changed')) {
|
||
return e.data('oldPos')
|
||
}
|
||
const id = e.id()
|
||
const incomming = e.cy().edges(`[target="${id}"]`)
|
||
const layer = 0
|
||
e.removeData('lastChild')
|
||
|
||
if (incomming.length === 0) {
|
||
if (e.cy().data('firstNode') === undefined)
|
||
e.cy().data('firstNode', 'root')
|
||
e.data('root', true)
|
||
const children = e.cy().edges(`[source="${id}"]`).targets()
|
||
e.data('layer', layer)
|
||
e.data('children', children.length)
|
||
const queue = []
|
||
children.forEach(n => {
|
||
queue.push({ task: n, layer: layer + 1 })
|
||
})
|
||
while (queue.length) {
|
||
const task = queue.pop()
|
||
task.task.data('layer', task.layer)
|
||
task.task.removeData('subtreeWidth')
|
||
const children = e.cy().edges(`[source="${task.task.id()}"]`).targets()
|
||
task.task.data('children', children.length)
|
||
if (children.length !== 0) {
|
||
children.forEach(n => queue.push({ task: n, layer: task.layer + 1 }))
|
||
}
|
||
}
|
||
queue.push({ parent: e, children: children })
|
||
while (queue.length) {
|
||
const task = queue.pop()
|
||
if (task.children.length === 0) {
|
||
task.parent.data('subtreeWidth', task.parent.height() + 50)
|
||
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))
|
||
}
|
||
|
||
const pos = { x: 0, y: 0 }
|
||
e.data('oldPos', pos)
|
||
|
||
queue.push({ task: children, parent: e })
|
||
while (queue.length) {
|
||
const task = queue.pop()
|
||
const oldPos = task.parent.data('oldPos')
|
||
let yoffset = oldPos.y - task.parent.data('subtreeWidth') / 2
|
||
task.task.forEach(n => {
|
||
const width = n.data('subtreeWidth')
|
||
|
||
n.data('oldPos', { x: 250 * n.data('layer'), y: yoffset + width / 2 })
|
||
yoffset += width
|
||
queue.push({ task: n.cy().edges(`[source="${n.id()}"]`).targets(), parent: n })
|
||
})
|
||
}
|
||
e.cy().data('changed', false)
|
||
return pos
|
||
} else {
|
||
|
||
const opos = e.data('oldPos')
|
||
if (opos) {
|
||
return opos
|
||
}
|
||
}
|
||
}, // 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 false; }, // 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;
|
||
const eles = cy?.add(storeToNodes(questions.filter((question: AnyTypedQuizQuestion) => (question.type !== "result" && question.type !== null))))
|
||
cy.data('changed', true)
|
||
// cy.data('changed', true)
|
||
const elecs = eles.layout(lyopts).run()
|
||
cy?.on('add', () => cy.data('changed', true))
|
||
cy?.fit()
|
||
//cy?.layout().run()
|
||
|
||
return () => {
|
||
document.querySelector("#root")?.removeEventListener("mouseup", cleardragQuestionContentId);
|
||
layoutsContainer.current?.remove();
|
||
plusesContainer.current?.remove();
|
||
crossesContainer.current?.remove();
|
||
gearsContainer.current?.remove();
|
||
};
|
||
}, []);
|
||
|
||
|
||
const removeButtons = (id: string) => {
|
||
layoutsContainer.current
|
||
?.querySelector(`.popper-layout[data-id='${id}']`)
|
||
?.remove();
|
||
plusesContainer.current
|
||
?.querySelector(`.popper-plus[data-id='${id}']`)
|
||
?.remove();
|
||
crossesContainer.current
|
||
?.querySelector(`.popper-cross[data-id='${id}']`)
|
||
?.remove();
|
||
gearsContainer.current
|
||
?.querySelector(`.popper-gear[data-id='${id}']`)
|
||
?.remove();
|
||
};
|
||
|
||
|
||
const initialPopperIcons = (e) => {
|
||
const cy = e.cy
|
||
|
||
const container =
|
||
(document.body.querySelector(
|
||
".__________cytoscape_container"
|
||
) as HTMLDivElement) || null;
|
||
|
||
if (!container) {
|
||
return;
|
||
}
|
||
|
||
container.style.overflow = "hidden";
|
||
|
||
if (!plusesContainer.current) {
|
||
plusesContainer.current = document.createElement("div");
|
||
plusesContainer.current.setAttribute("id", "popper-pluses");
|
||
container.append(plusesContainer.current);
|
||
}
|
||
if (!crossesContainer.current) {
|
||
crossesContainer.current = document.createElement("div");
|
||
crossesContainer.current.setAttribute("id", "popper-crosses");
|
||
container.append(crossesContainer.current);
|
||
}
|
||
if (!gearsContainer.current) {
|
||
gearsContainer.current = document.createElement("div");
|
||
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);
|
||
}
|
||
|
||
const ext = cy.extent()
|
||
const nodesInView = cy.nodes().filter(n => {
|
||
const bb = n.boundingBox()
|
||
return bb.x2 > ext.x1 && bb.x1 < ext.x2 && bb.y2 > ext.y1 && bb.y1 < ext.y2
|
||
})
|
||
|
||
nodesInView
|
||
.toArray()
|
||
?.forEach((item) => {
|
||
const node = item as NodeSingularWithPopper;
|
||
|
||
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.style.zIndex = "0"
|
||
layoutElement.classList.add("popper-layout");
|
||
layoutElement.setAttribute("data-id", item.id());
|
||
layoutElement.addEventListener("mouseup", () => {
|
||
//Узнаём грани, идущие от этой ноды
|
||
setModalQuestionParentContentId(item.id())
|
||
setOpenedModalQuestions(true)
|
||
});
|
||
layoutsContainer.current?.appendChild(layoutElement);
|
||
|
||
return layoutElement;
|
||
},
|
||
});
|
||
|
||
const plusesPopper = node.popper({
|
||
popper: {
|
||
placement: "right",
|
||
modifiers: [{ name: "flip", options: { boundary: node } }],
|
||
},
|
||
content: ([item]) => {
|
||
const itemId = item.id();
|
||
const itemElement = plusesContainer.current?.querySelector(
|
||
`.popper-plus[data-id='${itemId}']`
|
||
);
|
||
if (itemElement) {
|
||
return itemElement;
|
||
}
|
||
|
||
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());
|
||
});
|
||
|
||
plusesContainer.current?.appendChild(plusElement);
|
||
|
||
return plusElement;
|
||
},
|
||
});
|
||
|
||
const crossesPopper = node.popper({
|
||
popper: {
|
||
placement: "top-end",
|
||
modifiers: [{ name: "flip", options: { boundary: node } }],
|
||
},
|
||
content: ([item]) => {
|
||
const itemId = item.id();
|
||
const itemElement = crossesContainer.current?.querySelector(
|
||
`.popper-cross[data-id='${itemId}']`
|
||
);
|
||
if (itemElement) {
|
||
return itemElement;
|
||
}
|
||
|
||
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("mouseup", () => {
|
||
setStartRemove(node.id())
|
||
|
||
|
||
}
|
||
);
|
||
|
||
return crossElement;
|
||
},
|
||
});
|
||
let gearsPopper = null
|
||
if (node.data().root !== true) {
|
||
gearsPopper = node.popper({
|
||
popper: {
|
||
placement: "left",
|
||
modifiers: [{ name: "flip", options: { boundary: node } }],
|
||
},
|
||
content: ([item]) => {
|
||
const itemId = item.id();
|
||
|
||
const itemElement = gearsContainer.current?.querySelector(
|
||
`.popper-gear[data-id='${itemId}']`
|
||
);
|
||
if (itemElement) {
|
||
return itemElement;
|
||
}
|
||
|
||
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("mouseup", (e) => {
|
||
updateOpenedModalSettingsId(item.id())
|
||
});
|
||
|
||
return gearElement;
|
||
},
|
||
});
|
||
}
|
||
const update = async () => {
|
||
await plusesPopper.update();
|
||
await crossesPopper.update();
|
||
await gearsPopper?.update();
|
||
await layoutsPopper.update();
|
||
};
|
||
|
||
const onZoom = (event: AbstractEventObject) => {
|
||
const zoom = event.cy.zoom();
|
||
|
||
//update();
|
||
|
||
crossesPopper.setOptions({
|
||
modifiers: [
|
||
{ name: "flip", options: { boundary: node } },
|
||
{ name: "offset", options: { offset: [-5 * zoom, -30 * zoom] } },
|
||
],
|
||
});
|
||
|
||
layoutsPopper.setOptions({
|
||
modifiers: [
|
||
{ name: "flip", options: { boundary: node } },
|
||
{ name: "offset", options: { offset: [0, -130 * zoom] } },
|
||
],
|
||
});
|
||
plusesPopper.setOptions({
|
||
modifiers: [
|
||
{ name: "flip", options: { boundary: node } },
|
||
{ name: "offset", options: { offset: [0, 0 * zoom] } },
|
||
],
|
||
});
|
||
gearsPopper?.setOptions({
|
||
modifiers: [
|
||
{ name: "flip", options: { boundary: node } },
|
||
{ name: "offset", options: { offset: [0, 0] } },
|
||
],
|
||
});
|
||
|
||
layoutsContainer.current
|
||
?.querySelectorAll("#popper-layouts > .popper-layout")
|
||
.forEach((item) => {
|
||
const element = item as HTMLDivElement;
|
||
element.style.width = `${130 * zoom}px`;
|
||
element.style.height = `${130 * zoom}px`;
|
||
});
|
||
|
||
plusesContainer.current
|
||
?.querySelectorAll("#popper-pluses > .popper-plus")
|
||
.forEach((item) => {
|
||
const element = item as HTMLDivElement;
|
||
element.style.width = `${40 * zoom}px`;
|
||
element.style.height = `${40 * zoom}px`;
|
||
element.style.fontSize = `${40 * zoom}px`;
|
||
element.style.borderRadius = `${6 * zoom}px`;
|
||
});
|
||
|
||
crossesContainer.current
|
||
?.querySelectorAll("#popper-crosses > .popper-cross")
|
||
.forEach((item) => {
|
||
const element = item as HTMLDivElement;
|
||
element.style.width = `${24 * zoom}px`;
|
||
element.style.height = `${24 * zoom}px`;
|
||
element.style.fontSize = `${24 * zoom}px`;
|
||
element.style.borderRadius = `${6 * zoom}px`;
|
||
});
|
||
|
||
gearsContainer?.current
|
||
?.querySelectorAll("#popper-gears > .popper-gear")
|
||
.forEach((item) => {
|
||
const element = item as HTMLDivElement;
|
||
element.style.width = `${60 * zoom}px`;
|
||
element.style.height = `${40 * zoom}px`;
|
||
});
|
||
};
|
||
|
||
//node?.on("position", update);
|
||
let pressed = false
|
||
let hide = false
|
||
cy?.on('mousedown', () => { pressed = true })
|
||
cy?.on('mouseup', () => {
|
||
pressed = false
|
||
hide = false
|
||
|
||
|
||
const gc = gearsContainer.current
|
||
if (gc) gc.style.display = 'block'
|
||
const pc = plusesContainer.current
|
||
const xc = crossesContainer.current
|
||
const lc = layoutsContainer.current
|
||
if (pc) pc.style.display = 'block'
|
||
if (xc) xc.style.display = 'block'
|
||
if (lc) lc.style.display = 'block'
|
||
update()
|
||
})
|
||
|
||
cy?.on('mousemove', () => {
|
||
if (pressed && !hide) {
|
||
hide = true
|
||
const gc = gearsContainer.current
|
||
if (gc) gc.style.display = 'none'
|
||
const pc = plusesContainer.current
|
||
const xc = crossesContainer.current
|
||
const lc = layoutsContainer.current
|
||
if (pc) pc.style.display = 'none'
|
||
if (xc) xc.style.display = 'none'
|
||
if (lc) lc.style.display = 'block'
|
||
}
|
||
});
|
||
|
||
cy?.on("zoom render", onZoom);
|
||
});
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<Box
|
||
mb="20px">
|
||
<Button
|
||
sx={{
|
||
height: "27px",
|
||
color: "#7E2AEA",
|
||
textDecoration: "underline",
|
||
fontSize: "16px",
|
||
}}
|
||
variant="text"
|
||
onClick={() => {
|
||
|
||
cyRef.current?.fit()
|
||
|
||
}}
|
||
>
|
||
Выровнять
|
||
</Button>
|
||
<ProblemIcon blink={!canCreatePublic} onClick={() => updateModalInfoWhyCantCreate(true)} />
|
||
</Box>
|
||
|
||
<CytoscapeComponent
|
||
wheelSensitivity={0.1}
|
||
elements={[]}
|
||
// elements={createGraphElements(tree, quiz)}
|
||
style={{ height: "480px", background: "#F2F3F7" }}
|
||
stylesheet={stylesheet}
|
||
layout={(lyopts)}
|
||
cy={(cy) => {
|
||
cyRef.current = cy;
|
||
}}
|
||
autoungrabify={true}
|
||
/>
|
||
</>
|
||
);
|
||
};
|
||
|
||
function Clear() {
|
||
const quiz = useCurrentQuiz();
|
||
updateRootContentId(quiz.id, "")
|
||
clearRuleForAll()
|
||
return <></>
|
||
}
|
||
|
||
export default withErrorBoundary(CsComponent, {
|
||
fallback: <Clear />,
|
||
onError: (error, info) => {
|
||
enqueueSnackbar("Дерево порвалось")
|
||
console.log(info)
|
||
console.log(error)
|
||
},
|
||
});
|