diff --git a/src/public/app/services/link_map.js b/src/public/app/services/link_map.js index 13090b301..bb4241181 100644 --- a/src/public/app/services/link_map.js +++ b/src/public/app/services/link_map.js @@ -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); diff --git a/src/public/app/widgets/section_widgets/link_map.js b/src/public/app/widgets/section_widgets/link_map.js index b8062733d..593d14e69 100644 --- a/src/public/app/widgets/section_widgets/link_map.js +++ b/src/public/app/widgets/section_widgets/link_map.js @@ -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; } - + +
`; @@ -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(); }