Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-26 07:46:30 +01:00
Code Issues Packages Projects Releases Activity

chore(react/collections): set up dragging (partially)

Browse Source
This commit is contained in:
Elian Doran
2025-09-04 23:35:18 +03:00
parent b25f3094b7
commit 9444195de7
4 changed files with 72 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
apps/client/src/widgets/collections/geomap/index.tsx
View File

@@ -1,10 +1,10 @@
import Map from "./map";
import "./index.css";
import { ViewModeProps } from "../interface";
import { useNoteBlob, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useSpacedUpdate, useTriliumEvent } from "../../react/hooks";
import { useNoteBlob, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useNoteTreeDrag, useSpacedUpdate, useTriliumEvent } from "../../react/hooks";
import { DEFAULT_MAP_LAYER_NAME } from "./map_layer";
import { divIcon, GPXOptions, LatLng, LeafletMouseEvent } from "leaflet";
import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
import Marker, { GpxTrack } from "./marker";
import froca from "../../../services/froca";
import FNote from "../../../entities/fnote";
@@ -16,6 +16,7 @@ import openContextMenu, { openMapContextMenu } from "./context_menu";
import toast from "../../../services/toast";
import { t } from "../../../services/i18n";
import server from "../../../services/server";
import branches from "../../../services/branches";
const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659];
const DEFAULT_ZOOM = 2;
@@ -85,9 +86,34 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
openMapContextMenu(note.noteId, e, !isReadOnly);
}, [ note.noteId, isReadOnly ]);
// Dragging
const containerRef = useRef<HTMLDivElement>(null);
const apiRef = useRef<L.Map>(null);
useNoteTreeDrag(containerRef, async (treeData, e) => {
const api = apiRef.current;
if (!note || !api) return;
const { noteId } = treeData[0];
const offset = containerRef.current?.getBoundingClientRect();
const x = e.clientX - (offset?.left ?? 0);
const y = e.clientY - (offset?.top ?? 0);
const latlng = api.containerPointToLatLng([ x, y ]);
const targetNote = await froca.getNote(noteId, true);
const parents = targetNote?.getParentNoteIds();
if (parents?.includes(note.noteId)) {
await moveMarker(noteId, latlng);
} else {
await branches.cloneNoteToParentNote(noteId, noteId);
await moveMarker(noteId, latlng);
}
});
return (
<div className={`geo-view ${state === State.NewNote ? "placing-note" : ""}`}>
<Map
apiRef={apiRef} containerRef={containerRef}
coordinates={viewConfig?.view?.center ?? DEFAULT_COORDINATES}
zoom={viewConfig?.view?.zoom ?? DEFAULT_ZOOM}
layerName={layerName ?? DEFAULT_MAP_LAYER_NAME}

11
apps/client/src/widgets/collections/geomap/map.tsx
View File

@@ -2,11 +2,14 @@ import { useEffect, useRef, useState } from "preact/hooks";
import L, { control, LatLng, Layer, LeafletMouseEvent } from "leaflet";
import "leaflet/dist/leaflet.css";
import { MAP_LAYERS } from "./map_layer";
import { ComponentChildren, createContext } from "preact";
import { ComponentChildren, createContext, RefObject } from "preact";
import { useSyncedRef } from "../../react/hooks";
export const ParentMap = createContext<L.Map | null>(null);
interface MapProps {
apiRef?: RefObject<L.Map>;
containerRef?: RefObject<HTMLDivElement>;
coordinates: LatLng | [number, number];
zoom: number;
layerName: string;
@@ -17,9 +20,9 @@ interface MapProps {
scale: boolean;
}
export default function Map({ coordinates, zoom, layerName, viewportChanged, children, onClick, onContextMenu, scale }: MapProps) {
const mapRef = useRef<L.Map>(null);
const containerRef = useRef<HTMLDivElement>(null);
export default function Map({ coordinates, zoom, layerName, viewportChanged, children, onClick, onContextMenu, scale, apiRef: _apiRef, containerRef: _containerRef }: MapProps) {
const mapRef = useSyncedRef<L.Map>(_apiRef);
const containerRef = useSyncedRef<HTMLDivElement>(_containerRef);
useEffect(() => {
if (!containerRef.current) return;

39
apps/client/src/widgets/react/hooks.tsx
View File

@@ -1,4 +1,4 @@
import { useCallback, useContext, useDebugValue, useEffect, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
import { MutableRef, useCallback, useContext, useDebugValue, useEffect, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
import { EventData, EventNames } from "../../components/app_context";
import { ParentComponent } from "./react_utils";
import SpacedUpdate from "../../services/spaced_update";
@@ -13,9 +13,10 @@ import FBlob from "../../entities/fblob";
import NoteContextAwareWidget from "../note_context_aware_widget";
import { RefObject, VNode } from "preact";
import { Tooltip } from "bootstrap";
import { CSSProperties } from "preact/compat";
import { CSSProperties, DragEventHandler } from "preact/compat";
import keyboard_actions from "../../services/keyboard_actions";
import Mark from "mark.js";
import { DragData } from "../note_tree";
export function useTriliumEvent<T extends EventNames>(eventName: T, handler: (data: EventData<T>) => void) {
const parentComponent = useContext(ParentComponent);
@@ -576,3 +577,37 @@ export function useImperativeSearchHighlighlighting(highlightedTokens: string[]
});
};
}
export function useNoteTreeDrag(containerRef: MutableRef<HTMLElement | null | undefined>, callback: (data: DragData[], e: DragEvent) => void) {
useEffect(() => {
const container = containerRef.current;
if (!container) return;
function onDragOver(e: DragEvent) {
// Allow drag.
e.preventDefault();
}
function onDrop(e: DragEvent) {
const data = e.dataTransfer?.getData('text');
if (!data) {
return;
}
const parsedData = JSON.parse(data) as DragData[];
if (!parsedData.length) {
return;
}
callback(parsedData, e);
}
container.addEventListener("dragover", onDragOver);
container.addEventListener("drop", onDrop);
return () => {
container.removeEventListener("dragover", onDragOver);
container.removeEventListener("drop", onDrop);
};
}, [ containerRef, callback ]);
}

32
apps/client/src/widgets/view_widgets/geo_view/editing.ts
View File

@@ -10,41 +10,9 @@ import froca from "../../../services/froca.js";
import branches from "../../../services/branches.js";
export function setupDragging($container: JQuery<HTMLElement>, map: Map, mapNoteId: string) {
$container.on("dragover", (e) => {
// Allow drag.
e.preventDefault();
});
$container.on("drop", async (e) => {
if (!e.originalEvent) {
return;
}
const data = e.originalEvent.dataTransfer?.getData('text');
if (!data) {
return;
}
try {
const parsedData = JSON.parse(data) as DragData[];
if (!parsedData.length) {
return;
}
const { noteId } = parsedData[0];
const offset = $container.offset();
const x = e.originalEvent.clientX - (offset?.left ?? 0);
const y = e.originalEvent.clientY - (offset?.top ?? 0);
const latlng = map.containerPointToLatLng([ x, y ]);
const note = await froca.getNote(noteId, true);
const parents = note?.getParentNoteIds();
if (parents?.includes(mapNoteId)) {
await moveMarker(noteId, latlng);
} else {
await branches.cloneNoteToParentNote(noteId, mapNoteId);
await moveMarker(noteId, latlng);
}
} catch (e) {
console.warn(e);
}