diff --git a/src/pages/Questions/BranchingMap/CsComponent.tsx b/src/pages/Questions/BranchingMap/CsComponent.tsx index 84e90793..096939b8 100644 --- a/src/pages/Questions/BranchingMap/CsComponent.tsx +++ b/src/pages/Questions/BranchingMap/CsComponent.tsx @@ -630,13 +630,16 @@ function CsComponent({ return crossElement; }, }); - - const gearsPopper = node.popper({ +let gearsPopper = null +console.log('POPE', node.data()) + if (node.data().root !== true) { + gearsPopper = node.popper({ popper: { placement: "left", modifiers: [{ name: "flip", options: { boundary: node } }], }, content: ([item]) => { + console.log('PEPO', item.id()) const itemId = item.id(); const itemElement = gearsContainer.current?.querySelector( @@ -658,11 +661,11 @@ function CsComponent({ return gearElement; }, }); - + } const update = async () => { await plusesPopper.update(); await crossesPopper.update(); - await gearsPopper.update(); + await gearsPopper?.update(); await layoutsPopper.update(); }; @@ -691,7 +694,7 @@ function CsComponent({ { name: "offset", options: { offset: [0, 0 * zoom] } }, ], }); - gearsPopper.setOptions({ + gearsPopper?.setOptions({ modifiers: [ { name: "flip", options: { boundary: node } }, { name: "offset", options: { offset: [0, 0] } }, @@ -726,7 +729,7 @@ function CsComponent({ element.style.borderRadius = `${6 * zoom}px`; }); - gearsContainer.current + gearsContainer?.current ?.querySelectorAll("#popper-gears > .popper-gear") .forEach((item) => { const element = item as HTMLDivElement;