TriliumNext/Trilium
1
0
Fork 0
mirror of https://github.com/TriliumNext/Trilium.git synced 2025-12-10 03:53:37 -06:00
Code Issues 1.1k Packages Projects Releases 10 Wiki Activity

refactor(react/type_widgets): use dedicated component for items

Browse Source
This commit is contained in:
Elian Doran 2025-10-03 11:02:33 +03:00
parent 3b2f5bb09d
commit 4af842d2f2
No known key found for this signature in database
2 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,7 +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"; import { JsPlumb, JsPlumbItem } from "./jsplumb";
interface Clipboard { interface Clipboard {
noteId: string; noteId: string;
@ -359,18 +359,14 @@ function NoteBox({ noteId, x, y, mapApiRef }: MapDataNoteEntry & { mapApiRef: Re
}, [ note ]); }, [ note ]);
return note && ( return note && (
<div <JsPlumbItem
id={noteIdToId(noteId)}
className={`note-box ${note?.getCssClass()}`} className={`note-box ${note?.getCssClass()}`}
onContextMenu={contextMenuHandler} onContextMenu={contextMenuHandler}
style={{ x={x} y={y}
left: x,
top: y
}}
> >
<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")} />
</div> </JsPlumbItem>
) )
} }

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

@ -1,5 +1,6 @@
import { jsPlumb, Defaults, jsPlumbInstance } from "jsplumb"; import { jsPlumb, Defaults, jsPlumbInstance } from "jsplumb";
import { ComponentChildren, RefObject } from "preact"; import { ComponentChildren, RefObject } from "preact";
import { HTMLProps } from "preact/compat";
import { useEffect, useRef } from "preact/hooks"; import { useEffect, useRef } from "preact/hooks";
export function JsPlumb({ className, props, children, containerRef: externalContainerRef, apiRef, onInstanceCreated }: { export function JsPlumb({ className, props, children, containerRef: externalContainerRef, apiRef, onInstanceCreated }: {
@ -39,3 +40,18 @@ export function JsPlumb({ className, props, children, containerRef: externalCont
</div> </div>
) )
} }
export function JsPlumbItem({ x, y, children, ...restProps }: {
x: number;
y: number;
children: ComponentChildren;
} & Pick<HTMLProps<HTMLDivElement>, "className" | "onContextMenu">) {
return (
<div
{...restProps}
style={{ left: x, top: y }}
>
{children}
</div>
)
}