gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-11 08:58:58 +01:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

refactor(react/type_widgets): extract JSPlumb into a separate file

Browse Source
This commit is contained in:
Elian Doran 2025-10-03 10:17:45 +03:00
parent 2d67aab288
commit 3b2f5bb09d
No known key found for this signature in database
2 changed files with 42 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
apps/client/src/widgets/type_widgets/relation_map/RelationMap.tsx
View File

@ -17,6 +17,7 @@ import contextMenu from "../../../menus/context_menu";
import appContext from "../../../components/app_context"; import appContext from "../../../components/app_context";
import RelationMapApi, { MapData, MapDataNoteEntry } from "./api"; import RelationMapApi, { MapData, MapDataNoteEntry } from "./api";
import setupOverlays, { uniDirectionalOverlays } from "./overlays"; import setupOverlays, { uniDirectionalOverlays } from "./overlays";
import { JsPlumb } from "./jsplumb";
interface Clipboard { interface Clipboard {
noteId: string; noteId: string;
@ -306,44 +307,6 @@ function useNoteCreation({ ntxId, note, containerRef, mapApiRef }: {
return onClickHandler; return onClickHandler;
} }
function JsPlumb({ className, props, children, containerRef: externalContainerRef, apiRef, onInstanceCreated }: {
className?: string;
props: Omit<Defaults, "container">;
children: ComponentChildren;
containerRef?: RefObject<HTMLElement>;
apiRef?: RefObject<jsPlumbInstance>;
onInstanceCreated?: (jsPlumbInstance: jsPlumbInstance) => void;
}) {
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!containerRef.current) return;
if (externalContainerRef) {
externalContainerRef.current = containerRef.current;
}
const jsPlumbInstance = jsPlumb.getInstance({
Container: containerRef.current,
...props
});
if (apiRef) {
apiRef.current = jsPlumbInstance;
}
onInstanceCreated?.(jsPlumbInstance);
return () => {
jsPlumbInstance.deleteEveryEndpoint();
jsPlumbInstance.cleanupListeners()
};
}, [ apiRef ]);
return (
<div ref={containerRef} className={className}>
{children}
</div>
)
}
function NoteBox({ noteId, x, y, mapApiRef }: MapDataNoteEntry & { mapApiRef: RefObject<RelationMapApi> }) { function NoteBox({ noteId, x, y, mapApiRef }: MapDataNoteEntry & { mapApiRef: RefObject<RelationMapApi> }) {
const [ note, setNote ] = useState<FNote | null>(); const [ note, setNote ] = useState<FNote | null>();
const title = useNoteProperty(note, "title"); const title = useNoteProperty(note, "title");

41
apps/client/src/widgets/type_widgets/relation_map/jsplumb.tsx Normal file
View File

@ -0,0 +1,41 @@
import { jsPlumb, Defaults, jsPlumbInstance } from "jsplumb";
import { ComponentChildren, RefObject } from "preact";
import { useEffect, useRef } from "preact/hooks";
export function JsPlumb({ className, props, children, containerRef: externalContainerRef, apiRef, onInstanceCreated }: {
className?: string;
props: Omit<Defaults, "container">;
children: ComponentChildren;
containerRef?: RefObject<HTMLElement>;
apiRef?: RefObject<jsPlumbInstance>;
onInstanceCreated?: (jsPlumbInstance: jsPlumbInstance) => void;
}) {
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!containerRef.current) return;
if (externalContainerRef) {
externalContainerRef.current = containerRef.current;
}
const jsPlumbInstance = jsPlumb.getInstance({
Container: containerRef.current,
...props
});
if (apiRef) {
apiRef.current = jsPlumbInstance;
}
onInstanceCreated?.(jsPlumbInstance);
return () => {
jsPlumbInstance.deleteEveryEndpoint();
jsPlumbInstance.cleanupListeners()
};
}, [ apiRef ]);
return (
<div ref={containerRef} className={className}>
{children}
</div>
)
}