Skip to content

Latest commit

 

History

History
162 lines (118 loc) · 7.42 KB

README.md

File metadata and controls

162 lines (118 loc) · 7.42 KB
Raw

MindMup MapJs

MindMup is a zero-friction mind map canvas. Our aim is to create the most productive mind mapping environment out there, removing all the distractions and providing powerful editing shortcuts.

Example Map

This project is the JavaScript visualisation portion of MindMup. It provides a canvas for users to create and edit mind maps in a browser. You can see an example of this live at mindmup.com, or play with the library directly in the browser using test/index.html from this project.

This project is relatively stand alone and you can use it to create a nice mind map visualisation separate from the MindMup Server.

Using MAPJS standalone

To run the dev server, execute:

npm run start

Then open http://localhost:9000/ to view the example map.

Using MAPJS in your projects

MapJS 2 works well with WebPack. Check out the MAPJS Webpack Example project.

Or just use: npm run pack

Using MAPJS with argmap

argmap integrates with MAPJS:

argmap

Though currently, most of this integration is not on the main branch.

Using MAPJS with argview (online site)

Additional features added for argview (although this is currently only available in argview repo):

As well as being uploaded and downloaded locally, maps can be saved online for ease of access and collaboration by clicking the save button.

When a map is loaded from a json file generated from argmap.yaml data, argview will check whether a more recent version of the same file (identified using the original_root_node_title) has been saved online, in which case this version will automatically be downloaded.

Online maps can be controlled using these url parameters:

  • ornt=[original_root_node_title]. This is the original name of the topmost root in the argument map. It's saved as a property in the mapjs json file.
  • map_id=[map_hash]: [map_hash] being the first 10 characters of a SHA256 hash of [original_root_node_title]. This is saved as a property in the mapjs json file.
  • keep_original=true: Stops check for a more recent online version of the original map.

See mapjs-json.json for the mapjs-json data format schema.

Testing

To run the unit tests, execute

`npm test`

To debug and try things out visually, grab the dependencies using:

`npm run pretest`

Dependencies

This library depends on the following projects:

As of 23 Nov 22, it runs with the latest versions of all of these, except Hammer.JS JQuery Plugin v2.0.0, which requires an insecure version of jQuery, so instead uses v1.1.3.

Node Selection

  • You can only select one node at a time, selected nodes have a drop shadow.
    • When you add nodes they are added relative to th selected node.
  • You can activate multiple nodes at once, these are highlighted with a dotted line.
    • When you delete or toggle nodes, this affects all active nodes.

Node Editing

  • New nodes automatically give you text focus so you can start adding its initial text.
  • Clicking on a node twice lets you edit the node's text.
  • Typing in a url will add a clickable link icon to the node allowing you to open that url in another tab. The url's text will not be displayed in the node except when editing it.
  • You can add an image to a node by dragging a file or web page image into it.

Links

  • Links are arbitrary straight line connections between nodes that are not part of the tree structure.
  • You can create them with alt+click or with the add link toolbar button.
  • You can select links by clicking on them:
    • This displays the Edit Link buttons underneath the main toolbar buttons:
      • These can be used to delete the link or change their colour, style or toggle an arrow.
    • The selected link is highlighted with a dotted purple line.

Mouse Operations

  • Click inside a node to select it.
  • Click twice inside a node to edit the text.
  • shift+click: Activates a node.
  • Menu Toolbar at top has buttons for a number of operations, yet to be documented.
  • Dragging and dropping:
    • Root nodes only: drag into an open space to re-position.
    • Child nodes: Make it into a new root node by dragging it into open space.
    • Re-order nodes by dragging and dropping onto another node: you will see a red dotted highlight around the target node.
    • You can drag images from files or other web pages into the map, either into existing nodes, or into open space to create new nodes.
    • You can drag .mup files or .json files (which contain the .mup data structure) into a container to paste the file contents.
      • ISSUE: Only supports the same features as paste, so does not currently support links or themes.
  • alt+click on a node adds a link from your currently selected node to the clicked node.
  • Clicking on a link icon opens up the url in a new tab.

Keyboard Shortcuts

The map must have keyboard focus for these to work:

Key Combination Normal Horizontal Maps Top-Down Maps
return Add sibling node after Add child node after
shift+return Add sibling node before Add parent node
. insert Add child node Insert sibling node after
, Insert parent node Insert sibling node before
Key Combination Effect
shift+return while editing node text Start new line of text
f2 space Edit text of currently selected node (space also selects all)
del backspace Delete active nodes
alt+click Add link between clicked node and selected node
down Select node below
up Select node above
left Select node left
right Select node right
shift+click Activate clicked node
shift+down Activate node below
shift+up Activate node above
shift+left Activate node left
shift+right Activate node right
1-9 Activate all nodes at that level (in all trees)
[ Activate descendants
{ Activate node and descendants
= Activate sibling nodes
. Deactivate all but selected node
meta+down ctrl+down Move active nodes below
meta+up ctrl+up Move active nodes above
meta+right ctrl+right Move active nodes right
meta+left ctrl+left Move active nodes left
c meta+x ctrl+x Cut
p meta+v ctrl+v Paste
y meta+c ctrl+c Copy
ctrl+shift+v meta+shift+v Paste Style (custom colours)
f / Toggle collapse / reveal
u meta+z ctrl+z Undo
r meta+shift+z ctrl+shift+z meta+y ctrl+y Redo
meta+plus ctrl+plus z Zoom in
meta+minus ctrl+minus shift+z Zoom out
esc 0 Activate root node of current selected tree, centre screen on it and reset zoom
alt+o Open a JSON file as a new map
alt+s Saves current map online, where it will be auto-reloaded from same url
meta+shift+s ctrl+shift+s Download current map locally as a JSON file
click on link icon Open url

Copyright 2013 Damjan Vujnovic, David de Florinier, Gojko Adzic; 2022 Michael Hayes; and the mapjs contributors SPDX-License-Identifier: MIT