2.options.md 8.8 KB
- Usage
- Options
- Operation
- Contribution
2.1. Introduction
The options object for jsMind was briefly mentioned in the example in the previous chapter:
var options = {
container:'jsmind_container', // [required] ID of the container
editable:true, // [Optional] Whether to enable editing
theme:'orange' // [optional] theme
};
var jm = new jsMind(options);
````
But that's only a small part of it, and the full definition of the options object for jsMind is shown below:
```javascript
options = {
container : '', // [required] ID of the container
editable : false, // Is editing enabled?
theme : null, // theme
mode :'full', // display mode
support_html : true, // Does it support HTML elements in the node?
view:{
engine: 'canvas', // engine for drawing lines between nodes in the mindmap
hmargin:100, // Minimum horizontal distance of the mindmap from the outer frame of the container
vmargin:50, // Minimum vertical distance of the mindmap from the outer frame of the container
line_width:2, // thickness of the mindmap line
line_color:'#555' // Thought mindmap line color
},
layout:{
hspace:30, // horizontal spacing between nodes
vspace:20, // vertical spacing between nodes
pspace:13 // Horizontal spacing between node and connection line (to place node expander)
},
shortcut:{
enable:true, // whether to enable shortcut
handles:{}, // Named shortcut key event processor
mapping:{ // shortcut key mapping
addchild : 45, // <Insert>
addbrother : 13, // <Enter>
editnode : 113, // <F2>
delnode : 46, // <Delete>
toggle : 32, // <Space>
left : 37, // <Left>
up : 38, // <Up>
right : 39, // <Right>
down : 40, // <Down>
}
},
};
The above options are the default options for jsMind and you can add the appropriate options to override these default options.
Except the container, there are all optional.
These options are described in more detail below.
2.2 Conventional Options
container : (string) [required] ID of the container
This parameter is not default when instantiating a jsMind. jsMind uses this parameter to find a page element and output a mindmap to that element. For easy control of the size and position of the mind map, use block element as a container for the mind map, such as
<div>.You can give the element retouching, but generally limited to setting its size, position, border, etc.; if you want to change the font, font size, background color, foreground color, etc. of the mindmap, it is recommended to add custom themes by way of processing.
editable : (bool) Enable editing or not
If this parameter is set to true, you can use the API to do the above operations, otherwise the API will not take effect. By default, the value of this parameter is false .
Note that jsMind only provides an editing interface and a small amount of shortcut key support, not full editing functionality, and this parameter is only used to limit the use of these APIs.
theme : (string) subject
Specify the theme name of jsMind. (look in jsMind.css)
mode : (string) display mode
jsMind now supports two display modes:
- full - child nodes are dynamically distributed on both sides of the root node [default]
- side - child nodes are distributed only to the right of the root node
support_html : (bool) Does it support HTML elements in nodes?
The default value of this parameter is true, meaning that it allows HTML code to be used in the node's header, and you can even insert a table
<table>in the node's header if you wish. If you want only plain text in the title, set this parameter to false .Note that in freemind, the style of the node is controlled using the HTML language, and it is recommended to set this parameter to true if you are using data in freemind format.
2.3 Layout Options
view.engine : (string) engine for drawing lines between nodes in a mindmap
jsMind now supports two line drawing engines:
- CANVAS - Draw the lines on the canvas [default]
- SVG - Using SVG to draw lines, when there are a lot of nodes and a huge area in the mind map, using this mode can bring significant performance improvements
view.hmargin : (number) Minimum horizontal distance (in pixels) of the mindmap from the container frame
view.vmargin : (number) Minimum vertical distance (in pixels) of the mindmap from the outer container frame
These two parameters determine how close the mindmap can be to the border of the container. These two parameters are similar to the margin(css) property of the object if you consider the thought map itself as an object. For aesthetic purposes, the default setting is 100 pixels in the horizontal direction and 50 pixels in the vertical direction.
view.line_width : (number) Thickness of the mindmap line (pixels)
view.line_color : (string) color of the mindmap line (color representation in HTML)
These two parameters determine the style of the lines in the mindmap. By default, the lines are 2px in thickness and dark gray in color (#555).
layout.hspace : horizontal distance (pixels) between (number) nodes
layout.vspace : vertical spacing (pixels) between (number) nodes
These two parameters are equivalent to the margin(css) property of the node object, which defaults to 30 pixels in the horizontal direction and 20 pixels in the vertical direction.
layout.pspace : (number) size of node expander (pixels)
If a node (other than the root node) has a subordinate node, the outside of this node shows the controller for the shrinking/expanding subordinate node, which is used to set the size (width and height) of this controller, the default value is 13 pixels.
2.4. Shortcuts
shortcut.enable : (bool) Whether to enable shortcut keys
This parameter is used to control whether you can use keyboard shortcuts to edit (or otherwise manipulate) a mindmap in the jsMind interface, the default value is true, i.e. shortcuts are enabled.
shortcut.handles : (object{string : function}) Named shortcut event handler
jsMind provides some common event handler for manipulating mindmaps (see next section), and this parameter provides the ability to define additional event handler. This parameter is a collection of string->function(jsmind,event), string specifies the name of the event handler, and function is the logic to be executed by the event handler, in the next section of shortcut.mapping configuration, the name of the processor will be bound to the specific keys for the purpose of shortcut operation. For example, the following code defines a processor.
handles : {
'dosomething' : function(jm,e){
// do something...
},
'dosomeotherthing' : function(jm,e){
// do some other things
}
...
}
shortcut.mapping : (object{string : number}) Shortcut mapping configuration
This parameter is used to configure the correspondence between a specific key and the event handler, this code shows the correspondence by default, e.g. the code for the [Insert] key is 45 and can be used to add a child node, while 112 represents the [F1] key for dosomething.
mapping:{ // handle mapping.
addchild : 45, // <Insert>
addbrother : 13, // <Enter>
editnode : 113, // <F2>
delnode : 46, // <Delete>
toggle : 32, // <Space>
left : 37, // <Left>
up : 38, // <Up>
right : 39, // <Right>
down : 40, // <Down>
// Examples
dosomething: 112, // <F1>
}
In addition to the single-key scenario described above, jsMind has added support for combination keys, where the code of the combination shortcut is the code of the regular key plus the identification code of the function key. Four function keys are currently supported, and the corresponding identification codes are.
- Meta : 8192 (jsMind.key.meta)
- Ctrl : 4096 (jsMind.key.ctrl)
- ALT : 2048 (jsMind.key.alt)
- SHIFT : 1024 (jsMind.key.shift)
The following are some examples.
mapping:{
addchild : jsMind.key.ctrl + 73, // <Ctrl> + <I>
delnode : jsMind.key.ctrl + jsMind.key.alt + 68, // <Ctrl> + <ALT> + <D>
}
copyright notice
Reproduction and deduction are prohibited.
The jsMind project is still being updated and the corresponding documentation is updated at the same time as the version is updated. In order to avoid confusion to the user, it is forbidden to reprint this document without written permission and to make changes of any kind to this document.