GithubHelp home page GithubHelp logo

Comments (15)

christopheSeeka avatar christopheSeeka commented on July 23, 2024 1

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

left-right

Thank you very much :)

from jsmind.

christopheSeeka avatar christopheSeeka commented on July 23, 2024 1

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

from jsmind.

hizzgdev avatar hizzgdev commented on July 23, 2024

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.

from jsmind.

christopheSeeka avatar christopheSeeka commented on July 23, 2024

Hi, thank you for the answer,

  1. 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/[email protected]/font/bootstrap-icons.css">
    <link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/style/jsmind.css" />
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/es6/jsmind.js" ></script> 
    <script type="text/javascript" src="https://unpkg.com/[email protected]/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>
  1. 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.

from jsmind.

christopheSeeka avatar christopheSeeka commented on July 23, 2024

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.

brainstorming-2

from jsmind.

hizzgdev avatar hizzgdev commented on July 23, 2024

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

from jsmind.

christopheSeeka avatar christopheSeeka commented on July 23, 2024

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.

from jsmind.

hizzgdev avatar hizzgdev commented on July 23, 2024
image

-1: left, 1: right

from jsmind.

christopheSeeka avatar christopheSeeka commented on July 23, 2024

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

from jsmind.

hizzgdev avatar hizzgdev commented on July 23, 2024

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

from jsmind.

hizzgdev avatar hizzgdev commented on July 23, 2024

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

from jsmind.

christopheSeeka avatar christopheSeeka commented on July 23, 2024

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

from jsmind.

christopheSeeka avatar christopheSeeka commented on July 23, 2024

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?

from jsmind.

hizzgdev avatar hizzgdev commented on July 23, 2024

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.

from jsmind.

hizzgdev avatar hizzgdev commented on July 23, 2024

will move this topic to Discussion

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.