zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-02-22 22:13:07 +08:00
Code Issues Projects Releases Packages Wiki Activity

link map zooming

Browse source
This commit is contained in:
zadam 2021-05-31 21:20:30 +02:00
parent b351157a6a
commit 07e214c564
2 changed files with 37 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/public/app/services/link_map.js
View file

@ -31,6 +31,7 @@ export default class LinkMap {
.nodeCanvasObject((node, ctx) => this.paintNode(node, this.stringToColor(node.type), ctx))
.nodePointerAreaPaint((node, ctx) => this.paintNode(node, this.stringToColor(node.type), ctx))
.nodeLabel(node => node.name)
.maxZoom(5)
.nodePointerAreaPaint((node, color, ctx) => {
ctx.fillStyle = color;
ctx.beginPath();
@ -65,6 +66,10 @@ export default class LinkMap {
}
}
setHeight(height) {
this.graph.height(height);
}
centerOnNode(node) {
this.nodeClicked(node);

37
src/public/app/widgets/section_widgets/link_map.js
View file

@ -12,15 +12,17 @@ const TPL = `
height: 300px;
}
.open-full-dialog-button {
.open-full-button, .collapse-button {
position: absolute;
right: 10px;
top: 10px;
right: 5px;
bottom: 5px;
font-size: 180%;
z-index: 1000;
}
</style>
<button class="bx bx-expand icon-action open-full-dialog-button" title="Show Link Map dialog"></button>
<button class="bx bx-arrow-to-bottom icon-action open-full-button" title="Open full"></button>
<button class="bx bx-arrow-to-top icon-action collapse-button" style="display: none;" title="Collapse to normal size"></button>
<div class="link-map-container"></div>
</div>`;
@ -40,7 +42,32 @@ export default class LinkMapWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.$widget.find('.open-full-dialog-button').on('click', () => this.triggerCommand('showLinkMap'));
this.$openFullButton = this.$widget.find('.open-full-button');
this.$openFullButton.on('click', () => {
const {top} = this.$widget[0].getBoundingClientRect();
const maxHeight = $(window).height() - top;
this.$widget.find('.link-map-container').css("height", maxHeight);
this.linkMapService.setHeight(maxHeight);
this.$openFullButton.hide();
this.$collapseButton.show();
});
this.$collapseButton = this.$widget.find('.collapse-button');
this.$collapseButton.on('click', () => {
this.$widget.find('.link-map-container,.force-graph-container,canvas').css("height", 300);
this.linkMapService.setHeight(300);
this.$openFullButton.show();
this.$collapseButton.hide();
});
this.overflowing();
}