Root node not centered
christopheSeeka opened this issue · comments
Hello,
Implementing jsmind into our project and quite happy with the result but for some reason, i'm running into the following issue:
When i load the mindmap for the the first time, the root node is not centered.
If i clear it and load it again, it is centered.
I did change the css as follow to have the root node multiline and adjust a bit the expander that wasn't well aligned:
jmnode{
font: 14px/1.125 Verdana, Arial, Helvetica, sans-serif;
}
jmnode.root{
font-size: 16px;
text-align: center;
max-width: 350px;
white-space: normal!important;
text-overflow: inherit!important;
}
jmexpander {
width: 13px!important;
height: 13px!important;
line-height: 8px!important;
font-size: 16px!important;
}
and in js (vue3 application) i do the following:
// on page load only in onMounted() event
var options = {
container:'jsmind_container',
editable:false,
theme:'primary',
view: {
engine: 'svg',
line_color:'#83bcea',
zoom: {
min: 0.5,
max: 2,
step: 0.1
},
draggable: true,
hide_scrollbars_when_draggable: true
}
};
jm = new window.jsMind(options);
// on click event on a button to display the mindmap
var entries = { /* data */ }
var mind = {
"meta":{
"name":"Brainstorming",
"author":"hizzgdev@163.com",
"version":"0.2"
},
"format":"node_tree",
"data":{"id":"root", "topic": brainstorming.question, "children": entries}
};
jm.show(mind);
// if i uncomment the following and call show twice in a row, it is centered right away
// jm.show(mind);
Any idea what i could be missing?
Hi, @christopheSeeka , 2 questions:
- is the stylesheet loaded before javascript?
- is there any other css rule which will affect the
jmnodeelements in the page?
It looks like the root node was taller and narrower when it was first loaded, and then became shorter and wider when the style was loaded.
Hi, thank you for the answer,
- yes the css is loaded before the js:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/npm/jsmind@0.8.0/style/jsmind.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/jsmind@0.8.0/es6/jsmind.js" ></script>
<script type="text/javascript" src="https://unpkg.com/jsmind@0.8.0/es6/jsmind.draggable-node.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blockchain AI Tools</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
- no i dont have any other css related to jmnode, than this:
jmnode{
font: 14px/1.125 Verdana, Arial, Helvetica, sans-serif;
}
jmnode.root{
font-size: 16px;
text-align: center;
max-width: 350px;
white-space: normal!important;
text-overflow: inherit!important;
}
jmexpander {
width: 13px!important;
height: 13px!important;
line-height: 8px!important;
font-size: 16px!important;
}
Knowing that the issue seem related to white-space: normal!important; in jmnode.root, if i remove it, it is centered from the start even with max-width: 650px for example so it seem that switching white-space to multiline is triggering the problem.
This is first load with just changing:
jmnode.root{
font-size: 16px;
text-align: center;
max-width: 350px;
white-space: initial!important;
text-overflow: inherit!important;
}
to
jmnode.root{
font-size: 16px;
text-align: center;
max-width: 650px;
//white-space: initial!important;
text-overflow: inherit!important;
}
It center properly right away.
Yes, by default, jmnode has white-space: nowrap;
how the customized css rules loaded? is it loaded before executing jm.show()?
jmnode.root{
font-size: 16px;
text-align: center;
max-width: 350px;
white-space: normal!important;
text-overflow: inherit!important;
}
I guess it will work if you add a new <link...> referencing to this stylesheet, just like how you reference jsmind.css.
And have you considered to add the styles as a new theme?
BTW, If you just want to wrap text, there is an option view.node_overflow in doc
Hello, thank you very much, view.node_overflow do the job so i don't need to overide the white-space in my css anymore :)
I have a question, is there a way to identify left node to right nodes? basically i'd like to have text-align left on right nodes and text-align right on left node but i don't see any way to identify left one to right one.
-1: left, 1: right
Thank you, so i have to go over each nodes in a js loop and add classes based on direction, is that correct?
You can leverage view.custom_node_render [doc] to add different class to node element.
This is a sample of how to use the option https://github.com/hizzgdev/jsmind-samples/blob/main/jsmind-use-cases/jsmind-mathjax.html
Thank you very much, will try figure that out :)
Perfect, it's working, thank you very much :)
const render = function(jm, ele, node) {
if(node.direction == 1){
ele.classList.add("right")
}
if(node.direction == -1){
ele.classList.add("left")
}
ele.innerHTML = node.topic;
return true
}
then
view.custom_node_render: render
Thank you very much :)
I noticed that using hide_scrollbars_when_draggable: true work well on desktop but the drag don't work on mobile with this activated, is it a known issue?
We didn't do much on mobile compatibility. I guess that on the mobile device, the touch screen is actually a simulated scroll bar, and draggable does not need to and should not be enabled. If you can identify that the page is running on a mobile device, I think we can turn off draggable.
Make sens, i will do that, thank you :)
will move this topic to Discussion