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

fix: placement

Browse Source
This commit is contained in:
IlyaDoronin 2023-10-25 12:13:18 +03:00
parent 7b48d51c77
commit b888d6b7f0
2 changed files with 26 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/pages/QuestionsMap/graph.tsx
View File

@ -32,7 +32,7 @@ const stylesheet: Stylesheet[] = [
width: 30, width: 30,
"line-color": "#DEDFE7", "line-color": "#DEDFE7",
"curve-style": "taxi", "curve-style": "taxi",
"taxi-direction": "vertical", "taxi-direction": "horizontal",
"taxi-turn": 60, "taxi-turn": 60,
}, },
}, },
@ -46,24 +46,22 @@ const stylesheet: Stylesheet[] = [
}, },
]; ];
export const Graph = () => { export const Graph = () => (
return ( <Box
<Box sx={{
sx={{ padding: "20px",
padding: "20px", background: "#FFFFFF",
background: "#FFFFFF", borderRadius: "12px",
borderRadius: "12px", boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)", marginTop: "30px",
marginTop: "30px", }}
}} >
> <Cytoscape
<Cytoscape wheelSensitivity={0.1}
wheelSensitivity={0.1} elements={createGraphElements(VERTICES)}
elements={createGraphElements(VERTICES)} style={{ height: "480px", background: "#F2F3F7" }}
style={{ height: "480px", background: "#F2F3F7" }} layout={{ name: "preset" }}
layout={{ name: "preset" }} stylesheet={stylesheet}
stylesheet={stylesheet} />
/> </Box>
</Box> );
);
};

12
src/pages/QuestionsMap/helper.ts
View File

@ -22,16 +22,16 @@ const getEmptyVerticesAboveAmount = (
currentIndent: number, currentIndent: number,
level: number level: number
): number => { ): number => {
let leftIndent = indent + currentIndent; let topIndent = indent + currentIndent;
return elements.filter(({ data, position }) => { return elements.filter(({ data, position }) => {
const isEmptyVertex = const isEmptyVertex =
position?.x === leftIndent && position?.y === topIndent &&
position?.y === level * 250 - 250 && position?.x === level * 250 - 250 &&
vertices.find((item) => item.id === data.id && !item.edges?.length); vertices.find((item) => item.id === data.id && !item.edges?.length);
if (isEmptyVertex) { if (isEmptyVertex) {
leftIndent += 200; topIndent += 200;
} }
return isEmptyVertex; return isEmptyVertex;
@ -63,8 +63,8 @@ export const createGraphElements = (
elements.push({ elements.push({
data: { id, label }, data: { id, label },
position: { position: {
x: indent + currentIndent, x: level * 250,
y: level * 250, y: indent + currentIndent,
}, },
}); });