gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-04 05:28:59 +01:00
Code Issues Actions 17 Packages Projects Releases 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)) .nodeCanvasObject((node, ctx) => this.paintNode(node, this.stringToColor(node.type), ctx))
.nodePointerAreaPaint((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) .nodeLabel(node => node.name)
.maxZoom(5)
.nodePointerAreaPaint((node, color, ctx) => { .nodePointerAreaPaint((node, color, ctx) => {
ctx.fillStyle = color; ctx.fillStyle = color;
ctx.beginPath(); ctx.beginPath();
@ -65,6 +66,10 @@ export default class LinkMap {
} }
} }
setHeight(height) {
this.graph.height(height);
}
centerOnNode(node) { centerOnNode(node) {
this.nodeClicked(node); this.nodeClicked(node);

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

@ -12,15 +12,17 @@ const TPL = `
height: 300px; height: 300px;
} }
.open-full-dialog-button { .open-full-button, .collapse-button {
position: absolute; position: absolute;
right: 10px; right: 5px;
top: 10px; bottom: 5px;
font-size: 180%;
z-index: 1000; z-index: 1000;
} }
</style> </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 class="link-map-container"></div>
</div>`; </div>`;
@ -40,7 +42,32 @@ export default class LinkMapWidget extends NoteContextAwareWidget {
doRender() { doRender() {
this.$widget = $(TPL); 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(); this.overflowing();
} }