mirror of
				https://github.com/zadam/trilium.git
				synced 2025-11-04 05:28:59 +01:00 
			
		
		
		
	link map zooming
This commit is contained in:
		
							parent
							
								
									b351157a6a
								
							
						
					
					
						commit
						07e214c564
					
				@ -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);
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -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();
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user