1.0.2 • Published 6 years ago

force-mindmap v1.0.2

Weekly downloads
3
License
MIT
Repository
-
Last release
6 years ago

What is this?

work in progress

Installation

Installation is a work in progress, as I currently have no clue on| 1. include typings files with js so that IDEs can identify 2. creating a UMD version (I cant seem to the the babel-loader working) especially with d3.

It should, for now, work with

npm install -s force-mindmap

or

yarn add force-mindmap

or of course, you can just take canvasMindMap.ts and mindMapHelper.ts and compile them yourself.

Basic Usage

import * as ForceMindMap from 'force-mindmap';

...

Using with React

  • This module does not support server side rendering* If you are making a React app that is rendering serverside, you need to make sure to initialise and call startGraph() on componentDidMount().

An example React App (built with GatsbyJS) is available here

APIs

startGraph()

Start simulation for the graph.

gotoParentNode()

Go to the parent node (go up one level). This is used to implement a back button.

gotoNode(nodeName| string)

Go to nodeName node used to navigate to any node. You can use this with bread crumb to create a navigable breadcrumb.

breadcrumb| string[]

Returns breadcrumb(list of all parent nodes) for the current node. For example, imagine a node structure like grandfather -> father -> child.

  • For child, this will return ["father", "grandfather"].
  • for father, this will return ["grandfater"].
  • for grandfather, this will return [].

#Customisation Force-Mindmap exposes various variables for you to configure the mindmap. Most are pretty self explanatory.

property nametypedefault
animationDurationnumber100
linkColornumber#9095a0
linkWidthnumber2
textColorRangestring[] "#72dbe5,#62abd6","#5fa7dd","#4678c4","#284a96"
strokeColorstring"#FFF"
parentStrokeColorstring"#b6ead9"
textStrokeWidthnumber5
textAlignstring"center"
fontSizeRangenumber[]60, 35, 20
fontFamilystring"Open Sans"
fontWeightvalid css fontWeight option"bolder"
tagColorRangestring[]"#abf4cb","#a9f466","#f25c5c","#f4c2ab","#b47cea","#ffb5f0","#fbffc1","#ffb349"
tagFontSizenumber20
collsionRadiusnumber55
chargeForcenumber-100
linkDistancenumber160
1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago