Comments (15)
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 :)
from jsmind.
Make sens, i will do that, thank you :)
from jsmind.
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.
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/[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>
- 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.
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.
from jsmind.
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.
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.
-1: left, 1: right
from jsmind.
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.
You can leverage view.custom_node_render
[doc] to add different class to node element.
from jsmind.
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.
Thank you very much, will try figure that out :)
from jsmind.
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.
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.
will move this topic to Discussion
from jsmind.
Related Issues (20)
- 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
- 使用 custom_node_render 自定义节点后,拖拽卡顿,有时无法拖拽 HOT 6
- 通过npm包安装的无法使用下载导图和拖拽功能啊 HOT 12
- Nodes don't move when press up/down keys HOT 4
- 设置了 custom_node_render 后 jmexpander 位置计算错误被遮蔽 HOT 7
- 最后一个节点编辑后,宽度无法正确调整 HOT 4
- 根节点的连线错位 HOT 2
- 导出图片问题 HOT 1
- 拖拽事件无法自定义 HOT 2
- 节点内输入的内容怎么换行? HOT 2
- 节点方向(direction) HOT 1
- 这个方向是对了,细节上有小问题,引用不要远程引用,用本地的,如 HOT 1
- 双击Node进入编辑后,直接拖拽输入框会导致异常 HOT 3
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.