From f435f6793b42f888a53a10b3caafdfda5b771e92 Mon Sep 17 00:00:00 2001 From: skeris Date: Sun, 10 Dec 2023 04:01:56 +0300 Subject: [PATCH] fix: workaround for graph optimization --- .../Questions/BranchingMap/CsComponent.tsx | 51 +++++++++++++++++-- src/pages/Questions/QuestionsPage.tsx | 4 +- 2 files changed, 49 insertions(+), 6 deletions(-) diff --git a/src/pages/Questions/BranchingMap/CsComponent.tsx b/src/pages/Questions/BranchingMap/CsComponent.tsx index aeb992d1..517d290c 100644 --- a/src/pages/Questions/BranchingMap/CsComponent.tsx +++ b/src/pages/Questions/BranchingMap/CsComponent.tsx @@ -308,6 +308,7 @@ function CsComponent ({ const readyLO = (e) => { + console.log('REAdy') 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() @@ -415,12 +416,13 @@ function CsComponent ({ 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 + 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(() => { + console.log('KEKEKE') document.querySelector("#root")?.addEventListener("mouseup", cleardragQuestionContentId); const cy = cyRef.current; const eles = cy?.add(storeToNodes(questions)) @@ -468,6 +470,7 @@ function CsComponent ({ if (!container) { return; } + console.log('POP') container.style.overflow = "hidden"; @@ -497,6 +500,7 @@ function CsComponent ({ const bb = n.boundingBox() return bb.x2 > ext.x1 && bb.x1 < ext.x2 && bb.y2 > ext.y1 && bb.y1 < ext.y2 }) + console.log('POPE') nodesInView .toArray() @@ -509,6 +513,7 @@ function CsComponent ({ modifiers: [{ name: "flip", options: { boundary: node } }], }, content: ([item]) => { + console.log('POPPER', item.id()) const itemId = item.id(); const itemElement = layoutsContainer.current?.querySelector( `.popper-layout[data-id='${itemId}']` @@ -538,6 +543,7 @@ function CsComponent ({ modifiers: [{ name: "flip", options: { boundary: node } }], }, content: ([item]) => { + console.log('POPPER+', item.id()) const itemId = item.id(); const itemElement = plusesContainer.current?.querySelector( `.popper-plus[data-id='${itemId}']` @@ -566,6 +572,7 @@ function CsComponent ({ modifiers: [{ name: "flip", options: { boundary: node } }], }, content: ([item]) => { + console.log('POPPERx', item.id()) const itemId = item.id(); const itemElement = crossesContainer.current?.querySelector( `.popper-cross[data-id='${itemId}']` @@ -596,6 +603,7 @@ function CsComponent ({ modifiers: [{ name: "flip", options: { boundary: node } }], }, content: ([item]) => { + console.log('POPPERg', item.id()) const itemId = item.id(); if (item.cy().edges(`[target="${itemId}"]`).sources().length === 0) { return; @@ -622,6 +630,7 @@ function CsComponent ({ }); const update = async () => { + console.log('POPPERi=u', item.id()) await plusesPopper.update(); await crossesPopper.update(); await gearsPopper.update(); @@ -629,9 +638,10 @@ function CsComponent ({ }; const onZoom = (event: AbstractEventObject) => { + console.log('ZOOOOM') const zoom = event.cy.zoom(); - update(); + //update(); crossesPopper.setOptions({ modifiers: [ @@ -684,8 +694,41 @@ function CsComponent ({ }); }; - node?.on("position", update); - cy?.on("pan zoom resize render", onZoom); + //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); }); }; diff --git a/src/pages/Questions/QuestionsPage.tsx b/src/pages/Questions/QuestionsPage.tsx index cd021c0c..0910dbab 100755 --- a/src/pages/Questions/QuestionsPage.tsx +++ b/src/pages/Questions/QuestionsPage.tsx @@ -23,7 +23,7 @@ import { updateOpenBranchingPanel, updateEditSomeQuestion } from "@root/question export default function QuestionsPage() { const theme = useTheme(); const { openedModalSettingsId, openBranchingPanel } = useQuestionsStore(); - const isMobile = useMediaQuery(theme.breakpoints.down(660)); + const isMobile = false//useMediaQuery(theme.breakpoints.down(660)); const quiz = useCurrentQuiz(); console.log(quiz) useLayoutEffect(() => { @@ -116,4 +116,4 @@ export default function QuestionsPage() { {openedModalSettingsId !== null && } ); -} \ No newline at end of file +}