A interactive D3js map for creating stories compatible with the PoulpStudio project
npm install poulpmapPoulpMap is an interactive tool for creating stories in a visual way with the help of D3js.
It is originally intended to work with the PoulpStudio project.
This is a Node.js module available through the npm registry.
Installation is done using thenpm install command:
``bash`
npm install poulmap
Import in your project
`jsx`
import PoulpMap from "poulpmap"
Initialise a map with options :
`jsx`
const map = new PoulpMap(this.node, {
width: 500,
height: 300,
onChange: ( updatedJSON ) => {
// do stuff with updated json ...
},
setSequence: ( sequenceID ) => {
// sequenceID selected ...
},
setChapitre: ( chapitreID ) => {
// chapitreID selected ...
},
onClickNode: (node, coords)=>{
// do stuff with selected node and coords ...
}
})
When the map is initialised, you can call independently the type of render you want :
If you want to render a particular chapter or sequence, you need to provide the desired id:
`jsx`
map.Chapitres(chapitres)
// or
map.Sequences(chapitres, chapitreID)
// or
map.Contents( chaptersJSON , sequenceID)
- Type: Array
- Default:
Define the grid size to place elements with the right spacing
- Type: number
- Default:
- Type: number
- Default:
- Type: string
- Default:
- Type: number
- Default:
- Type: string
- Default:
- Type: number
- Default:
- Type: string
- Default:
- Type: string
- Default:
- Type: number
- Default:
- Type: number
- Default:
- Type: number
- Default:
- Type: string
- Default:
- Type: number
- Default:
- Type: number
- Default:
- Type: string
- Default:
- Type: string
- Default:
- Type: number
- Default:
- Type: string
- Default:
- Type: string
- Default:
When something change on the map, the new json is sent to this function
So you can get this json, save it where you want and give it back to the map
to see the results
When a node is clicked on the map, this method is fired
When a drag action from a pointer is finished on a node, this method is fired with the node hovered