Comments (8)
@lqm229026
之所以定义一个container,正是为了业务上的考虑,有些业务可能需要限制文档窗口的大小。
如果需要使container的宽高与脑图大小保持相同,可以给jm添加一个event_handles,监控 jm.event_type.resize 事件,获取 jsmind.size(参考expand_size方法),再调整 container。
from jsmind.
@hizzgdev
我看了下源码。按照我的理解,目前expand_size方法的作用是为了在脑图发生变化时,调整view.size。但是这个方法只会去增大view的大小,对于“全部收缩”这种操作,view.size是不会减小的。不知道我的理解是否正确。
关于expand_size这个方法,我有几个疑问:
var min_width = min_size.w + this.opts.hmargin*2;
var min_height = min_size.h + this.opts.vmargin*2;
hmargin和vmargin是否反了呢?还是说有特殊意义?
this.size.w = client_w;
this.size.h = client_h;
为什么不直接用通过layout计算出来的min_width和min_height给size赋值,而是需要先取出e_panel的大小呢?
谢谢~
from jsmind.
@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.
@hizzgdev
我尝试在调用jm.collapse_all()之后去获取jm.view.size。发现这个大小并不是收缩之后的脑图大小,而是收缩之前的。
我的理解是,根据上面那段代码,在收缩时,layout的size是会减小的,但是e_panel的大小没有变。而在expand_size方法中,计算size会受到e_panel的大小影响,所以计算得到的this.size并不是收缩之后的脑图大小。
from jsmind.
@lqm229026
是的,你说的对。这个size是map所需的大小,可能并不是你想要的尺寸。
from jsmind.
想问下 自适应宽高这个你解决了吗?
from jsmind.
@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.
@lqm229026 这样做没有问题。但是考虑到以后jsmind.js版本更新的情况,你可以在事件监听器里计算一下调度,而不要修改jsmind.js的代码。
另外, @lqm229026 @mybydhn 关于大小自适应这个问题,我更倾向于让脑图按网页窗口的大小进行自适应,这样只需要根据window的尺寸设置 container 的尺寸就行了。
from jsmind.
Related Issues (20)
- 能否支持导入到xmind中,或者能导出xmind支持的格式 HOT 1
- 移动端的自适应 HOT 10
- allow images to be in nodes HOT 1
- vite build error HOT 2
- 我通过这样的方式,为何下载下来的图片是空白的呢 HOT 1
- 在不触发addnode的情况下去添加节点 出现问题 HOT 5
- Implementing draggable plugin with Iframes HOT 2
- 如何单独为每个节点设置线条颜色呢 HOT 7
- 思维导图节点使用support_html属性和<span>标签自定义,点击<span>文字无法选中节点 HOT 4
- 移动或者单击节点,会提示节点找不到 HOT 5
- 如何将生成的思维导图导出呢。我这边用jm实例绘制,拿到的jm实例数据是空的,下载下来的也是空白 HOT 10
- Error: dom-to-image is required since 0.7.2 HOT 1
- uniapp中引入jsmind时, 思维导图的线 和 结点 会分开显示, 不在一起 HOT 4
- 拖拽调整节点顺序,部分位置无法吸附上去 HOT 2
- 请问可以自定义节点样式吗? HOT 2
- 请问有没有办法动态获取jsmind的高度
- 节点删除之后未及时更新 index 属性导致与index 属性相关的方法出现异常,如find_node_after等 HOT 4
- 放大后截图,存在节点错乱问题 HOT 4
- Root node not centered HOT 15
- 使用 custom_node_render 自定义节点后,拖拽卡顿,有时无法拖拽 HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jsmind.