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

improve popper detaching on panning

Browse Source
This commit is contained in:
nflnkr 2024-01-10 20:11:47 +03:00
parent 5543c9980a
commit a2296190b6
2 changed files with 8 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/pages/Questions/BranchingMap/CsComponent.tsx
View File

@ -33,7 +33,6 @@ function CsComponent() {
const modalQuestionParentContentId = useUiTools(state => state.modalQuestionParentContentId); const modalQuestionParentContentId = useUiTools(state => state.modalQuestionParentContentId);
const modalQuestionTargetContentId = useUiTools(state => state.modalQuestionTargetContentId); const modalQuestionTargetContentId = useUiTools(state => state.modalQuestionTargetContentId);
const trashQuestions = useQuestionsStore(state => state.questions); const trashQuestions = useQuestionsStore(state => state.questions);
const [isPanningCy, setIsPanningCy] = useState<boolean>(false);
const cyRef = useRef<Core | null>(null); const cyRef = useRef<Core | null>(null);
const questions = useMemo(() => trashQuestions.filter( const questions = useMemo(() => trashQuestions.filter(
@ -48,7 +47,7 @@ function CsComponent() {
return storeToNodes(q); return storeToNodes(q);
}, [questions]); }, [questions]);
const { createPoppers, removeAllPoppers } = usePopper({ cyRef }); const { recreatePoppers, removeAllPoppers } = usePopper({ cyRef });
const { removeNode } = useRemoveNode({ cyRef }); const { removeNode } = useRemoveNode({ cyRef });
@ -94,15 +93,13 @@ function CsComponent() {
const onPointerDown = () => { const onPointerDown = () => {
isPointerDown = true; isPointerDown = true;
cy.data("dragging", true);
}; };
const onPointerUp = () => { const onPointerUp = () => {
if (isPointerDown) recreatePoppers();
isPointerDown = false; isPointerDown = false;
cy.data("dragging", false);
setIsPanningCy(false);
}; };
const handleMove = () => { const handleMove = () => {
setIsPanningCy(isPointerDown); if (isPointerDown) removeAllPoppers();
}; };
cy.on("vmousedown", onPointerDown); cy.on("vmousedown", onPointerDown);
@ -114,21 +111,13 @@ function CsComponent() {
cy.off("vmousemove", handleMove); cy.off("vmousemove", handleMove);
document.removeEventListener("pointerup", onPointerUp); document.removeEventListener("pointerup", onPointerUp);
}; };
}, []); }, [recreatePoppers, removeAllPoppers]);
useEffect(function poppersLifecycle() {
if (isPanningCy) {
removeAllPoppers();
} else {
createPoppers();
}
}, [isPanningCy, createPoppers]);
useEffect(() => { useEffect(() => {
cyRef.current?.layout(layoutOptions).run(); cyRef.current?.layout(layoutOptions).run();
cyRef.current?.fit(undefined, 70); cyRef.current?.fit(undefined, 70);
createPoppers(); recreatePoppers();
}, [cyElements, createPoppers]); }, [cyElements, recreatePoppers]);
return ( return (
<> <>

5
src/pages/Questions/BranchingMap/hooks/usePopper.ts
View File

@ -44,7 +44,7 @@ export const usePopper = ({
popperContainerRef.current = null; popperContainerRef.current = null;
}, []); }, []);
const createPoppers = useCallback(() => { const recreatePoppers = useCallback(() => {
removeAllPoppers(); removeAllPoppers();
const cy = cyRef.current; const cy = cyRef.current;
@ -180,7 +180,6 @@ export const usePopper = ({
} }
const onZoom = (event: AbstractEventObject) => { const onZoom = (event: AbstractEventObject) => {
if (event.cy.data("dragging")) return;
const zoom = event.cy.zoom(); const zoom = event.cy.zoom();
crossesPopper.setOptions({ crossesPopper.setOptions({
@ -242,5 +241,5 @@ export const usePopper = ({
}); });
}, []); }, []);
return { removeAllPoppers, createPoppers }; return { removeAllPoppers, recreatePoppers };
}; };