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

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

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