Giter VIP home page Giter VIP logo

Comments (8)

hizzgdev avatar hizzgdev commented on May 16, 2024

@lqm229026
之所以定义一个container,正是为了业务上的考虑,有些业务可能需要限制文档窗口的大小。

如果需要使container的宽高与脑图大小保持相同,可以给jm添加一个event_handles,监控 jm.event_type.resize 事件,获取 jsmind.size(参考expand_size方法),再调整 container。

from jsmind.

moonlight824 avatar moonlight824 commented on May 16, 2024

@hizzgdev
我看了下源码。按照我的理解,目前expand_size方法的作用是为了在脑图发生变化时,调整view.size。但是这个方法只会去增大view的大小,对于“全部收缩”这种操作,view.size是不会减小的。不知道我的理解是否正确。
关于expand_size这个方法,我有几个疑问:

  1. https://github.com/hizzgdev/jsmind/blob/master/js/jsmind.js#L2223-L2224 这两行,
var min_width = min_size.w + this.opts.hmargin*2;
var min_height = min_size.h + this.opts.vmargin*2;

hmargin和vmargin是否反了呢?还是说有特殊意义?

  1. https://github.com/hizzgdev/jsmind/blob/master/js/jsmind.js#L2229-L2230 这两行,
this.size.w = client_w;
this.size.h = client_h;

为什么不直接用通过layout计算出来的min_width和min_height给size赋值,而是需要先取出e_panel的大小呢?
谢谢~

from jsmind.

hizzgdev avatar hizzgdev commented on May 16, 2024

@lqm229026
下面这段注释可能能回答你的问题。

expand_size:function(){
            var min_size = this.layout.get_min_size();   // 当收缩时,min_size 会比实际的 size 小
            var min_width = min_size.w + this.opts.hmargin*2;  // hmargin = horizontal-margin
            var min_height = min_size.h + this.opts.vmargin*2; // vmargin = vertical-margin
            var client_w = this.e_panel.clientWidth;
            var client_h = this.e_panel.clientHeight;
            if(client_w < min_width){client_w = min_width;}  // client_w/h 会考虑到最小尺寸的影响。
            if(client_h < min_height){client_h = min_height;}
            this.size.w = client_w;
            this.size.h = client_h;
        },

你可以看到,最后this.size这个对象里存储了当前脑图的实际大小,所以,你可以直接使用这个对象。

from jsmind.

moonlight824 avatar moonlight824 commented on May 16, 2024

@hizzgdev
我尝试在调用jm.collapse_all()之后去获取jm.view.size。发现这个大小并不是收缩之后的脑图大小,而是收缩之前的。
我的理解是,根据上面那段代码,在收缩时,layout的size是会减小的,但是e_panel的大小没有变。而在expand_size方法中,计算size会受到e_panel的大小影响,所以计算得到的this.size并不是收缩之后的脑图大小。

from jsmind.

hizzgdev avatar hizzgdev commented on May 16, 2024

@lqm229026
是的,你说的对。这个size是map所需的大小,可能并不是你想要的尺寸。

from jsmind.

mybydhn avatar mybydhn commented on May 16, 2024

想问下 自适应宽高这个你解决了吗?

from jsmind.

moonlight824 avatar moonlight824 commented on May 16, 2024

@mybydhn
我在hizzgdev代码的基础上稍微修改了下

expand_size: function() {
            var min_size = this.layout.get_min_size();
            var min_width = min_size.w + this.opts.hmargin * 2;
            var min_height = min_size.h + this.opts.vmargin * 2;
            var client_w = this.e_panel.clientWidth;
            var client_h = this.e_panel.clientHeight;
            if (client_w < min_width) {
                client_w = min_width;
            }
            if (client_h < min_height) {
                client_h = min_height;
            }
            this.size.w = client_w;
            // this.size.h = client_h;
            this.size.h = min_height;   // 这个地方没有使用client_h这个高度,而是直接用了min_height
        },

然后就是跟上面hizzgdev提到的一样,用add_event_listener增加一个事件监听器,在type为event_type。resize时,获取view的高度,并用这个高度去设置外面容器的高度。大概代码如下:

jm.add_event_listener(function(type, data) {
  if (type === jsMind.event_type.resize) {
    var height = $scope.jm.view.size.h;
    $('#mindmap_container').height(height);
  }
})

@hizzgdev ,也麻烦帮我review一下这样做是否是比较合理的方式?

from jsmind.

hizzgdev avatar hizzgdev commented on May 16, 2024

@lqm229026 这样做没有问题。但是考虑到以后jsmind.js版本更新的情况,你可以在事件监听器里计算一下调度,而不要修改jsmind.js的代码。

另外, @lqm229026 @mybydhn 关于大小自适应这个问题,我更倾向于让脑图按网页窗口的大小进行自适应,这样只需要根据window的尺寸设置 container 的尺寸就行了。

from jsmind.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.