diff --git a/src/pages/Questions/BranchingMap/CsComponent.tsx b/src/pages/Questions/BranchingMap/CsComponent.tsx index 8c798f81..f34e47b7 100644 --- a/src/pages/Questions/BranchingMap/CsComponent.tsx +++ b/src/pages/Questions/BranchingMap/CsComponent.tsx @@ -309,6 +309,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() @@ -416,12 +417,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.filter((question:AnyTypedQuizQuestion) => (question.type !== "result" && question.type !== null)))) @@ -469,6 +471,7 @@ function CsComponent ({ if (!container) { return; } + console.log('POP') container.style.overflow = "hidden"; @@ -498,6 +501,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() @@ -510,6 +514,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}']` @@ -539,6 +544,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}']` @@ -567,6 +573,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}']` @@ -597,6 +604,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; @@ -623,6 +631,7 @@ function CsComponent ({ }); const update = async () => { + console.log('POPPERi=u', item.id()) await plusesPopper.update(); await crossesPopper.update(); await gearsPopper.update(); @@ -630,9 +639,10 @@ function CsComponent ({ }; const onZoom = (event: AbstractEventObject) => { + console.log('ZOOOOM') const zoom = event.cy.zoom(); - update(); + //update(); crossesPopper.setOptions({ modifiers: [ @@ -685,8 +695,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 e8141385..4a0027db 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(); useLayoutEffect(() => { updateOpenBranchingPanel(false) @@ -115,4 +115,4 @@ export default function QuestionsPage() { {openedModalSettingsId !== null && } ); -} \ No newline at end of file +}