mindmap宽高自适应

[Zackin-He]

如何实现初始化时，根据容器大小自适应刚好能完全看到整个mindmap

[hizzgdev]

你指的容器是什么呢？

对 jsMind 而言，只会把 mindmap 绘制在 option 里指定的那个 container 元素里，jsMind 不会对容器进行任何的操作，包括样式以及行为。你可以对该元素进行修饰，包括大小、位置、边框等。

使用时建议给 container 设置合适的尺寸，以确保思维导图能够正确显示。如果在显示思维导图后再次调整 container 的尺寸，还需要在调整尺寸后调用 API resize 来调整思维导图的尺寸。

<div id="jsmind_container" style="width: 800px; height: 500px;"></div>
<script>
    var options = {
        container: 'jsmind_container',
        editable: true,
        theme: 'primary',
    };
    var mind = new jsMind(options);

    // 动态调整尺寸
    function resizeMindMap() {
        var container = document.getElementById('jsmind_container');
        container.style.width = '1000px';
        container.style.height = '600px';
        mind.resize();
    }
</script>

[Zackin-He]

我jsmind_container的宽高是固定的，但是当思维导图的节点较多时，会溢出容器并且出现滚动条（应该是zoom值过大），这时候需要手动缩小，我如何自动设置zoom值使思维导图正好能完全显示(类似于图片的background-size: contain)

[Zackin-He]

function resizeToFit() {
      const container = document.getElementById('jsmind');
      const mindSize = this.mindmap.view.size;
      const scaleWidth = container.offsetWidth / mindSize.w;
      const scaleHeight = container.offsetHeight / mindSize.h;
      const scale = Math.min(scaleWidth, scaleHeight);
      this.mindmap.view.setZoom(scale); // 设置缩放以适应容器
    }

我是通过这种方式解决的，不知道是否有更好的方法

[hizzgdev]

jsMind 并没有提供这种 auto size 的能力，你的这种做法我觉得很好。

[Zackin-He]

set_zoom(zoom, e) {
        if (zoom < this.opts.zoom.min || zoom > this.opts.zoom.max) {
            return false;
        }
        let e_panel_rect = this.e_panel.getBoundingClientRect();
        if (
            zoom < 1 &&
            zoom < this.zoom_current &&
            this.size.w * zoom < e_panel_rect.width &&
            this.size.h * zoom < e_panel_rect.height
        ) {
            return false;
        }
        let zoom_center = !!e
            ? { x: e.x - e_panel_rect.x, y: e.y - e_panel_rect.y }
            : { x: e_panel_rect.width / 2, y: e_panel_rect.height / 2 };
        let panel_scroll_x =
            ((this.e_panel.scrollLeft + zoom_center.x) * zoom) / this.zoom_current - zoom_center.x;
        let panel_scroll_y =
            ((this.e_panel.scrollTop + zoom_center.y) * zoom) / this.zoom_current - zoom_center.y;

        this.zoom_current = zoom;
        for (var i = 0; i < this.e_panel.children.length; i++) {
            this.e_panel.children[i].style.zoom = zoom;
        }
        this._show();
        this.e_panel.scrollLeft = panel_scroll_x;
        this.e_panel.scrollTop = panel_scroll_y;
        return true;
    }

对于这个set_zoom方法，我发表一下个人想法：

// 这个地方有一点点问题，就是竖向滚动条永远存在，思维导图永远会比容器大一点点，可能是精度问题
// 如果真的需要限制思维导图不能小于容器，当条件成立，直接zoom = Math.min(zoom, 所允许的最小值)是不是更好，而不是直接return，因为我无法保证设的zoom值一定能使思维导图大于容器，把这个操作return掉也许不是符合预期的
if (
            zoom < 1 &&
            zoom < this.zoom_current &&
            this.size.w * zoom < e_panel_rect.width &&
            this.size.h * zoom < e_panel_rect.height
        ) {
            return false;
        }