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

chore(react/type_widget): reposition on split resize

Browse Source
This commit is contained in:
Elian Doran 2025-09-20 21:12:29 +03:00
parent 145ff1a2a5
commit b376842e2d
No known key found for this signature in database
3 changed files with 14 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/client/src/widgets/type_widgets/helpers/SplitEditor.css
View File

@ -84,7 +84,10 @@
} }
/* #region SVG */ /* #region SVG */
.note-detail-split.svg-editor .render-container, .note-detail-split.svg-editor .render-container {
height: 100%;
}
.note-detail-split.svg-editor .render-container svg { .note-detail-split.svg-editor .render-container svg {
width: 100%; width: 100%;
height: 100%; height: 100%;

11
apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx
View File

@ -3,7 +3,7 @@ import { t } from "../../../services/i18n";
import SplitEditor, { PreviewButton, SplitEditorProps } from "./SplitEditor"; import SplitEditor, { PreviewButton, SplitEditorProps } from "./SplitEditor";
import { RawHtmlBlock } from "../../react/RawHtml"; import { RawHtmlBlock } from "../../react/RawHtml";
import server from "../../../services/server"; import server from "../../../services/server";
import svgPanZoom from "svg-pan-zoom"; import svgPanZoom, { zoomIn } from "svg-pan-zoom";
interface SvgSplitEditorProps extends Omit<SplitEditorProps, "previewContent"> { interface SvgSplitEditorProps extends Omit<SplitEditorProps, "previewContent"> {
/** /**
@ -55,6 +55,7 @@ export default function SvgSplitEditor({ note, attachmentName, renderSvg, ...pro
// Pan & zoom. // Pan & zoom.
const lastPanZoom = useRef<{ pan: SvgPanZoom.Point, zoom: number }>(); const lastPanZoom = useRef<{ pan: SvgPanZoom.Point, zoom: number }>();
const lastNoteId = useRef<string>(); const lastNoteId = useRef<string>();
const zoomRef = useRef<SvgPanZoom.Instance>();
useEffect(() => { useEffect(() => {
const shouldPreservePanZoom = (lastNoteId.current === note.noteId); const shouldPreservePanZoom = (lastNoteId.current === note.noteId);
const svgEl = containerRef.current?.querySelector("svg"); const svgEl = containerRef.current?.querySelector("svg");
@ -73,6 +74,8 @@ export default function SvgSplitEditor({ note, attachmentName, renderSvg, ...pro
} }
lastNoteId.current = note.noteId; lastNoteId.current = note.noteId;
zoomRef.current = zoomInstance;
return () => { return () => {
lastPanZoom.current = { lastPanZoom.current = {
pan: zoomInstance.getPan(), pan: zoomInstance.getPan(),
@ -89,6 +92,12 @@ export default function SvgSplitEditor({ note, attachmentName, renderSvg, ...pro
error={error} error={error}
onContentChanged={onContentChanged} onContentChanged={onContentChanged}
dataSaved={onSave} dataSaved={onSave}
splitOptions={{
onDrag: () => {
if (!zoomRef.current) return;
zoomRef.current.resize().fit().center();
}
}}
previewContent={( previewContent={(
<RawHtmlBlock <RawHtmlBlock
className="render-container" className="render-container"

13
apps/client/src/widgets/type_widgets_old/abstract_svg_split_type_widget.ts
View File

@ -25,22 +25,9 @@ export default abstract class AbstractSvgSplitTypeWidget extends AbstractSplitTy
private zoomInstance?: SvgPanZoom.Instance; private zoomInstance?: SvgPanZoom.Instance;
private svg?: string; private svg?: string;
constructor() {
super();
this.zoomHandler = () => {
if (this.zoomInstance) {
this.zoomInstance.resize();
this.zoomInstance.fit();
this.zoomInstance.center();
}
}
}
doRender(): void { doRender(): void {
super.doRender(); super.doRender();
this.$renderContainer = $(`<div>`)
.addClass("render-container")
.css("height", "100%");
this.$preview.append(this.$renderContainer); this.$preview.append(this.$renderContainer);
$(window).on("resize", this.zoomHandler); $(window).on("resize", this.zoomHandler);
} }