Root node not centered #562

christopheSeeka · 2024-01-03T05:04:03Z

christopheSeeka
Jan 3, 2024

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?

hizzgdev · 2024-01-03T06:02:50Z

hizzgdev
Jan 3, 2024
Maintainer

Hi, @christopheSeeka , 2 questions:

is the stylesheet loaded before javascript?
is there any other css rule which will affect the jmnode elements 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.

0 replies

christopheSeeka · 2024-01-03T08:43:42Z

christopheSeeka
Jan 3, 2024
Author

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.

0 replies

christopheSeeka · 2024-01-03T08:52:34Z

christopheSeeka
Jan 3, 2024
Author

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.

0 replies

hizzgdev · 2024-01-03T16:19:05Z

hizzgdev
Jan 3, 2024
Maintainer

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

0 replies

christopheSeeka · 2024-01-04T05:21:34Z

christopheSeeka
Jan 4, 2024
Author

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.

0 replies

hizzgdev · 2024-01-04T06:07:12Z

hizzgdev
Jan 4, 2024
Maintainer

-1: left, 1: right

0 replies

christopheSeeka · 2024-01-04T07:31:24Z

christopheSeeka
Jan 4, 2024
Author

Thank you, so i have to go over each nodes in a js loop and add classes based on direction, is that correct?

0 replies

hizzgdev · 2024-01-04T07:42:22Z

hizzgdev
Jan 4, 2024
Maintainer

You can leverage view.custom_node_render [doc] to add different class to node element.

0 replies

hizzgdev · 2024-01-04T07:43:47Z

hizzgdev
Jan 4, 2024
Maintainer

This is a sample of how to use the option https://github.com/hizzgdev/jsmind-samples/blob/main/jsmind-use-cases/jsmind-mathjax.html

0 replies

christopheSeeka · 2024-01-04T07:55:49Z

christopheSeeka
Jan 4, 2024
Author

Thank you very much, will try figure that out :)

0 replies

christopheSeeka · 2024-01-04T08:11:09Z

christopheSeeka
Jan 4, 2024
Author

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 :)

0 replies

christopheSeeka · 2024-01-04T09:14:38Z

christopheSeeka
Jan 4, 2024
Author

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?

0 replies

hizzgdev · 2024-01-04T09:25:00Z

hizzgdev
Jan 4, 2024
Maintainer

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.

0 replies

christopheSeeka · 2024-01-04T09:26:30Z

christopheSeeka
Jan 4, 2024
Author

Make sens, i will do that, thank you :)

0 replies

hizzgdev · 2024-01-05T02:45:16Z

hizzgdev
Jan 5, 2024
Maintainer

will move this topic to Discussion

0 replies

Uh oh!

Root node not centered #562

Uh oh!

christopheSeeka Jan 3, 2024

Replies: 15 comments

Uh oh!

hizzgdev Jan 3, 2024 Maintainer

Uh oh!

Uh oh!

christopheSeeka Jan 3, 2024 Author

Uh oh!

Uh oh!

christopheSeeka Jan 3, 2024 Author

Uh oh!

Uh oh!

hizzgdev Jan 3, 2024 Maintainer

Uh oh!

christopheSeeka Jan 4, 2024 Author

Uh oh!

hizzgdev Jan 4, 2024 Maintainer

Uh oh!

christopheSeeka Jan 4, 2024 Author

Uh oh!

hizzgdev Jan 4, 2024 Maintainer

Uh oh!

hizzgdev Jan 4, 2024 Maintainer

Uh oh!

christopheSeeka Jan 4, 2024 Author

Uh oh!

christopheSeeka Jan 4, 2024 Author

Uh oh!

christopheSeeka Jan 4, 2024 Author

Uh oh!

hizzgdev Jan 4, 2024 Maintainer

Uh oh!

christopheSeeka Jan 4, 2024 Author

Uh oh!

hizzgdev Jan 5, 2024 Maintainer

christopheSeeka
Jan 3, 2024

hizzgdev
Jan 3, 2024
Maintainer

christopheSeeka
Jan 3, 2024
Author

christopheSeeka
Jan 3, 2024
Author

hizzgdev
Jan 3, 2024
Maintainer

christopheSeeka
Jan 4, 2024
Author

hizzgdev
Jan 4, 2024
Maintainer

christopheSeeka
Jan 4, 2024
Author

hizzgdev
Jan 4, 2024
Maintainer

hizzgdev
Jan 4, 2024
Maintainer

christopheSeeka
Jan 4, 2024
Author

christopheSeeka
Jan 4, 2024
Author

christopheSeeka
Jan 4, 2024
Author

hizzgdev
Jan 4, 2024
Maintainer

christopheSeeka
Jan 4, 2024
Author

hizzgdev
Jan 5, 2024
Maintainer