Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-03 20:06:08 +01:00
Code Issues Packages Projects Releases Activity

chore(react/type_widgets): add dragigng logic for jsplumb

Browse Source
This commit is contained in:
Elian Doran
2025-10-03 11:58:00 +03:00
parent 58aea03114
commit c5c304f85b
2 changed files with 28 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -358,9 +358,17 @@ function NoteBox({ noteId, x, y, mapApiRef }: MapDataNoteEntry & { mapApiRef: Re
return note && ( return note && (
<JsPlumbItem <JsPlumbItem
id={idToNoteId(note.noteId)}
className={`note-box ${note?.getCssClass()}`} className={`note-box ${note?.getCssClass()}`}
onContextMenu={contextMenuHandler} onContextMenu={contextMenuHandler}
x={x} y={y} x={x} y={y}
draggable={{
start() {},
drag() {},
stop(params) {
},
}}
> >
<NoteLink className="title" title={title} notePath={noteId} noTnLink noContextMenu /> <NoteLink className="title" title={title} notePath={noteId} noTnLink noContextMenu />
<div className="endpoint" title={t("relation_map.start_dragging_relations")} /> <div className="endpoint" title={t("relation_map.start_dragging_relations")} />

24
apps/client/src/widgets/type_widgets/relation_map/jsplumb.tsx
View File

@@ -1,7 +1,9 @@
import { jsPlumb, Defaults, jsPlumbInstance } from "jsplumb"; import { jsPlumb, Defaults, jsPlumbInstance, DragOptions } from "jsplumb";
import { ComponentChildren, RefObject } from "preact"; import { ComponentChildren, createContext, RefObject } from "preact";
import { HTMLProps } from "preact/compat"; import { HTMLProps } from "preact/compat";
import { useEffect, useRef } from "preact/hooks"; import { useContext, useEffect, useRef } from "preact/hooks";
const JsPlumbInstance = createContext<RefObject<jsPlumbInstance> | undefined>(undefined);
export function JsPlumb({ className, props, children, containerRef: externalContainerRef, apiRef, onInstanceCreated }: { export function JsPlumb({ className, props, children, containerRef: externalContainerRef, apiRef, onInstanceCreated }: {
className?: string; className?: string;
@@ -36,18 +38,30 @@ export function JsPlumb({ className, props, children, containerRef: externalCont
return ( return (
<div ref={containerRef} className={className}> <div ref={containerRef} className={className}>
<JsPlumbInstance.Provider value={apiRef}>
{children} {children}
</JsPlumbInstance.Provider>
</div> </div>
) )
} }
export function JsPlumbItem({ x, y, children, ...restProps }: { export function JsPlumbItem({ x, y, children, draggable, ...restProps }: {
x: number; x: number;
y: number; y: number;
children: ComponentChildren; children: ComponentChildren;
} & Pick<HTMLProps<HTMLDivElement>, "className" | "onContextMenu">) { draggable?: DragOptions;
} & Pick<HTMLProps<HTMLDivElement>, "id" | "className" | "onContextMenu">) {
const containerRef = useRef<HTMLDivElement>(null);
const apiRef = useContext(JsPlumbInstance);
useEffect(() => {
if (!draggable || !apiRef?.current || !containerRef.current) return;
apiRef.current.draggable(containerRef.current, draggable);
}, [ draggable ]);
return ( return (
<div <div
ref={containerRef}
{...restProps} {...restProps}
style={{ left: x, top: y }} style={{ left: x, top: y }}
> >