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

chore(react/type_widgets): relation map source/target config

Browse Source
This commit is contained in:
Elian Doran 2025-10-04 08:56:53 +03:00
parent f687d91201
commit 1913355069
No known key found for this signature in database
3 changed files with 31 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -307,6 +307,22 @@ function useNoteCreation({ ntxId, note, containerRef, mapApiRef }: {
return onClickHandler;
}
const NOTE_BOX_SOURCE_CONFIG = {
filter: ".endpoint",
anchor: "Continuous",
connectorStyle: { stroke: "#000", strokeWidth: 1 },
connectionType: "basic",
extract: {
action: "the-action"
}
};
const NOTE_BOX_TARGET_CONFIG = {
dropOptions: { hoverClass: "dragHover" },
anchor: "Continuous",
allowLoopback: true
};
function NoteBox({ noteId, x, y, mapApiRef }: MapDataNoteEntry & { mapApiRef: RefObject<RelationMapApi> }) {
const [ note, setNote ] = useState<FNote | null>();
const title = useNoteProperty(note, "title");
@ -373,6 +389,8 @@ function NoteBox({ noteId, x, y, mapApiRef }: MapDataNoteEntry & { mapApiRef: Re
mapApiRef.current?.moveNote(noteId, x, y);
},
}}
sourceConfig={NOTE_BOX_SOURCE_CONFIG}
targetConfig={NOTE_BOX_TARGET_CONFIG}
>
<NoteLink className="title" title={title} notePath={noteId} noTnLink noContextMenu />
<div className="endpoint" title={t("relation_map.start_dragging_relations")} />

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

@ -45,11 +45,13 @@ export function JsPlumb({ className, props, children, containerRef: externalCont
)
}
export function JsPlumbItem({ x, y, children, draggable, ...restProps }: {
export function JsPlumbItem({ x, y, children, draggable, sourceConfig, targetConfig, ...restProps }: {
x: number;
y: number;
children: ComponentChildren;
draggable?: DragOptions;
sourceConfig?: object;
targetConfig?: object;
} & Pick<HTMLProps<HTMLDivElement>, "id" | "className" | "onContextMenu">) {
const containerRef = useRef<HTMLDivElement>(null);
const apiRef = useContext(JsPlumbInstance);
@ -59,6 +61,16 @@ export function JsPlumbItem({ x, y, children, draggable, ...restProps }: {
apiRef.current.draggable(containerRef.current, draggable);
}, [ draggable ]);
useEffect(() => {
if (!sourceConfig || !apiRef?.current || !containerRef.current) return;
apiRef.current.makeSource(containerRef.current, sourceConfig);
}, [ sourceConfig ]);
useEffect(() => {
if (!targetConfig || !apiRef?.current || !containerRef.current) return;
apiRef.current.makeSource(containerRef.current, targetConfig);
}, [ targetConfig ]);
return (
<div
ref={containerRef}

18
apps/client/src/widgets/type_widgets_old/relation_map.ts
View File

@ -214,24 +214,6 @@ export default class RelationMapTypeWidget extends TypeWidget {
this.spacedUpdate.scheduleUpdate();
}
async createNoteBox(noteId: string, title: string, x: number, y: number) {
this.jsPlumbInstance.makeSource($noteBox[0], {
filter: ".endpoint",
anchor: "Continuous",
connectorStyle: { stroke: "#000", strokeWidth: 1 },
connectionType: "basic",
extract: {
action: "the-action"
}
});
this.jsPlumbInstance.makeTarget($noteBox[0], {
dropOptions: { hoverClass: "dragHover" },
anchor: "Continuous",
allowLoopback: true
});
}
async dropNoteOntoRelationMapHandler(ev: JQuery.DropEvent) {
ev.preventDefault();