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

feat(mindmap): read-only mode

Browse Source
This commit is contained in:
Elian Doran
2025-09-25 19:12:37 +03:00
parent 5bfa0d13e3
commit 4381399978
2 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/widgets/FloatingButtonsDefinitions.tsx
View File

@@ -91,7 +91,7 @@ function SwitchSplitOrientationButton({ note, isReadOnly, isDefaultViewMode }: F
function ToggleReadOnlyButton({ note, viewType, isDefaultViewMode }: FloatingButtonContext) { function ToggleReadOnlyButton({ note, viewType, isDefaultViewMode }: FloatingButtonContext) {
const [ isReadOnly, setReadOnly ] = useNoteLabelBoolean(note, "readOnly"); const [ isReadOnly, setReadOnly ] = useNoteLabelBoolean(note, "readOnly");
const isEnabled = (note.type === "mermaid" || viewType === "geoMap") const isEnabled = ([ "mermaid", "mindMap" ].includes(note.type) || viewType === "geoMap")
&& note.isContentAvailable() && isDefaultViewMode; && note.isContentAvailable() && isDefaultViewMode;
return isEnabled && <FloatingButton return isEnabled && <FloatingButton

16
apps/client/src/widgets/type_widgets/MindMap.tsx
View File

@@ -7,7 +7,7 @@ import nodeMenu from "@mind-elixir/node-menu";
import "mind-elixir/style"; import "mind-elixir/style";
import "@mind-elixir/node-menu/dist/style.css"; import "@mind-elixir/node-menu/dist/style.css";
import "./MindMap.css"; import "./MindMap.css";
import { useEditorSpacedUpdate, useTriliumEvent, useTriliumEvents } from "../react/hooks"; import { useEditorSpacedUpdate, useNoteLabelBoolean, useTriliumEvent, useTriliumEvents, useTriliumOptionBool } from "../react/hooks";
import { refToJQuerySelector } from "../react/react_utils"; import { refToJQuerySelector } from "../react/react_utils";
import utils from "../../services/utils"; import utils from "../../services/utils";
@@ -16,6 +16,7 @@ const NEW_TOPIC_NAME = "";
interface MindElixirProps { interface MindElixirProps {
apiRef?: RefObject<MindElixirInstance>; apiRef?: RefObject<MindElixirInstance>;
containerProps?: Omit<HTMLAttributes<HTMLDivElement>, "ref">; containerProps?: Omit<HTMLAttributes<HTMLDivElement>, "ref">;
editable: boolean;
content: MindElixirData; content: MindElixirData;
onChange?: () => void; onChange?: () => void;
} }
@@ -24,6 +25,7 @@ export default function MindMap({ note, ntxId }: TypeWidgetProps) {
const content = VanillaMindElixir.new(NEW_TOPIC_NAME); const content = VanillaMindElixir.new(NEW_TOPIC_NAME);
const apiRef = useRef<MindElixirInstance>(null); const apiRef = useRef<MindElixirInstance>(null);
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const [ isReadOnly ] = useNoteLabelBoolean(note, "readOnly");
const spacedUpdate = useEditorSpacedUpdate({ const spacedUpdate = useEditorSpacedUpdate({
note, note,
getData: async () => { getData: async () => {
@@ -97,6 +99,7 @@ export default function MindMap({ note, ntxId }: TypeWidgetProps) {
apiRef={apiRef} apiRef={apiRef}
content={content} content={content}
onChange={() => spacedUpdate.scheduleUpdate()} onChange={() => spacedUpdate.scheduleUpdate()}
editable={!isReadOnly}
containerProps={{ containerProps={{
className: "mind-map-container", className: "mind-map-container",
onKeyDown onKeyDown
@@ -106,7 +109,7 @@ export default function MindMap({ note, ntxId }: TypeWidgetProps) {
) )
} }
function MindElixir({ content, containerProps, apiRef: externalApiRef, onChange }: MindElixirProps) { function MindElixir({ content, containerProps, apiRef: externalApiRef, onChange, editable }: MindElixirProps) {
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const apiRef = useRef<MindElixirInstance>(null); const apiRef = useRef<MindElixirInstance>(null);
@@ -114,10 +117,13 @@ function MindElixir({ content, containerProps, apiRef: externalApiRef, onChange
if (!containerRef.current) return; if (!containerRef.current) return;
const mind = new VanillaMindElixir({ const mind = new VanillaMindElixir({
el: containerRef.current el: containerRef.current,
editable
}); });
mind.install(nodeMenu); if (editable) {
mind.install(nodeMenu);
}
mind.init(content); mind.init(content);
apiRef.current = mind; apiRef.current = mind;
@@ -126,7 +132,7 @@ function MindElixir({ content, containerProps, apiRef: externalApiRef, onChange
} }
return () => mind.destroy(); return () => mind.destroy();
}, []); }, [ editable ]);
// On change listener. // On change listener.
useEffect(() => { useEffect(() => {