gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-01 12:09:02 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(react/floating_buttons): port relation map buttons

Browse Source
This commit is contained in:
Elian Doran 2025-08-27 23:33:07 +03:00
parent 28605f2687
commit a4046fbf6e
No known key found for this signature in database
2 changed files with 37 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
apps/client/src/widgets/FloatingButtons.tsx
View File

@ -77,6 +77,10 @@ const FLOATING_BUTTON_DEFINITIONS: FloatingButtonDefinition[] = [
{ {
component: SaveToNoteButton, component: SaveToNoteButton,
isEnabled: ({ note }) => note.mime === "text/x-sqlite;schema=trilium" && note.isHiddenCompletely() isEnabled: ({ note }) => note.mime === "text/x-sqlite;schema=trilium" && note.isHiddenCompletely()
},
{
component: RelationMapButtons,
isEnabled: ({ note }) => note.type === "relationMap"
} }
]; ];
@ -262,6 +266,38 @@ function SaveToNoteButton({ note }: FloatingButtonContext) {
/> />
} }
function RelationMapButtons({ parentComponent, noteContext }: FloatingButtonContext) {
return (
<>
<ActionButton
icon="bx bx-folder-plus"
text={t("relation_map_buttons.create_child_note_title")}
onClick={() => parentComponent.triggerEvent("relationMapCreateChildNote", { ntxId: noteContext.ntxId })}
/>
<ActionButton
icon="bx bx-crop"
text={t("relation_map_buttons.reset_pan_zoom_title")}
onClick={() => parentComponent.triggerEvent("relationMapResetPanZoom", { ntxId: noteContext.ntxId })}
/>
<div className="btn-group">
<ActionButton
icon="bx bx-zoom-in"
text={t("relation_map_buttons.zoom_in_title")}
onClick={() => parentComponent.triggerEvent("relationMapResetZoomIn", { ntxId: noteContext.ntxId })}
/>
<ActionButton
icon="bx bx-zoom-out"
text={t("relation_map_buttons.zoom_out_title")}
onClick={() => parentComponent.triggerEvent("relationMapResetZoomOut", { ntxId: noteContext.ntxId })}
/>
</div>
</>
)
}
/** /**
* Show button that displays floating button after click on close button * Show button that displays floating button after click on close button
*/ */
@ -275,4 +311,4 @@ function ShowFloatingButton() {
/> />
</div> </div>
); );
} }

60
apps/client/src/widgets/floating_buttons/relation_map_buttons.ts
View File

@ -1,60 +0,0 @@
import { t } from "../../services/i18n.js";
import NoteContextAwareWidget from "../note_context_aware_widget.js";
const TPL = /*html*/`
<div class="relation-map-buttons">
<style>
.relation-map-buttons {
display: flex;
gap: 10px;
}
</style>
<button type="button"
class="relation-map-create-child-note floating-button btn bx bx-folder-plus"
title="${t("relation_map_buttons.create_child_note_title")}"></button>
<button type="button"
class="relation-map-reset-pan-zoom floating-button btn bx bx-crop"
title="${t("relation_map_buttons.reset_pan_zoom_title")}"></button>
<div class="btn-group">
<button type="button"
class="relation-map-zoom-in floating-button btn bx bx-zoom-in"
title="${t("relation_map_buttons.zoom_in_title")}"></button>
<button type="button"
class="relation-map-zoom-out floating-button btn bx bx-zoom-out"
title="${t("relation_map_buttons.zoom_out_title")}"></button>
</div>
</div>`;
export default class RelationMapButtons extends NoteContextAwareWidget {
private $createChildNote!: JQuery<HTMLElement>;
private $zoomInButton!: JQuery<HTMLElement>;
private $zoomOutButton!: JQuery<HTMLElement>;
private $resetPanZoomButton!: JQuery<HTMLElement>;
isEnabled() {
return super.isEnabled() && this.note?.type === "relationMap";
}
doRender() {
super.doRender();
this.$widget = $(TPL);
this.$createChildNote = this.$widget.find(".relation-map-create-child-note");
this.$zoomInButton = this.$widget.find(".relation-map-zoom-in");
this.$zoomOutButton = this.$widget.find(".relation-map-zoom-out");
this.$resetPanZoomButton = this.$widget.find(".relation-map-reset-pan-zoom");
// TODO: Deduplicate object creation here.
this.$createChildNote.on("click", () => this.triggerEvent("relationMapCreateChildNote", { ntxId: this.ntxId }));
this.$resetPanZoomButton.on("click", () => this.triggerEvent("relationMapResetPanZoom", { ntxId: this.ntxId }));
this.$zoomInButton.on("click", () => this.triggerEvent("relationMapResetZoomIn", { ntxId: this.ntxId }));
this.$zoomOutButton.on("click", () => this.triggerEvent("relationMapResetZoomOut", { ntxId: this.ntxId }));
this.contentSized();
}
}