wisemapping-frontend/packages/mindplot/README.md

# WiseMapping Mindplot

WiseMapping Mindplot module is the core mind map rerendering of WiseMapping. This lighway library allows eithe edition and visualization of saved mindmaps. 

## Usage

A WebComponent implementation for mindplot designer is available.
This component is registered as mindplot-component in customElements API. (see https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define)
For use it you need to import minplot.js and put in your DOM a <mindplot-component id="mindplot-comp"/> tag. In order to create a Designer on it you need to call its buildDesigner method. Maps can be loaded through loadMap method.

#### Code example

```
<!DOCTYPE html>
<html>
<head>
  <script src='mindplot.js'></script>
</head>
<body>
  <mindmap-comp id='mindmap-comp' mode="viewonly"></mindmap-comp>
  <script>
    var webComponent = document.getElementById('mindmap-comp');
    webComponent.buildDesigner(persistence, widget);
    webComponent.loadMap("1");
  </script>
</body>
</html>
```

Optionaly you can use your own presistence manager and widget manager.
If you don't have special requirements you can use the defaults.

```
var persistence = new LocalStorageManager(
  'map.xml',
  false, false
);
var widget = new MyAwesomeWidgetManager();
// then build the designer with these params
webComponent.buildDesigner(persistence, widget);
```
 
## Usage with React framework

To use the web component in your JSX code, first you need to register it in the IntrinsicElements interface using provided MindplotWebComponentInterface

#### TypeScript example
```
import { MindplotWebComponentInterface } from '@wisemapping/mindplot';

declare global {
  namespace JSX {
    interface IntrinsicElements {
      ['mindplot-component']: MindplotWebComponentInterface;
    }
  }
}

const App = ()=>{
  const mindplotComponent: any = useRef();
  
  useEffect(()=>{
    mindplotComponent.current.buildDesigner();
    mindplotComponent.current.loadMap("map_id");
  }, [])

  return (<div>
    <mindplot-component
        ref={mindplotComponent}
        id="mindmap-comp"
        mode={options.mode}
      ></mindplot-component>
  </div>);
}
```


Check out the examples located in `test/playground/map-render/js` for some hints on high level usage. You can browse them by running `yarn playground`.
Update snapshots 2021-12-26 06:33:17 +01:00			`# WiseMapping Mindplot`
Web2d module migration 2021-07-16 16:41:58 +02:00
Merged in mindplot-webcomponent (pull request #57) Mindplot webcomponent * styles in js file * editor now uses bootstrap widget manager * fix console error: preventDefault on pasive events * Mode as webcomponent parámeter. Rename of init method * fix merge * Mindplot webcomponent documentation * fix * remove comments * delete comments * Merged in Alejandro-Raiczyk/just-details-1661445571189 (pull request #56) just details Approved-by: Paulo Veiga 2022-08-26 03:35:59 +02:00			`WiseMapping Mindplot module is the core mind map rerendering of WiseMapping. This lighway library allows eithe edition and visualization of saved mindmaps.`
Mindplot: README.md was updated and the webpack 2021-09-23 22:51:24 +02:00
			`## Usage`

Merged in mindplot-webcomponent (pull request #57) Mindplot webcomponent * styles in js file * editor now uses bootstrap widget manager * fix console error: preventDefault on pasive events * Mode as webcomponent parámeter. Rename of init method * fix merge * Mindplot webcomponent documentation * fix * remove comments * delete comments * Merged in Alejandro-Raiczyk/just-details-1661445571189 (pull request #56) just details Approved-by: Paulo Veiga 2022-08-26 03:35:59 +02:00			`A WebComponent implementation for mindplot designer is available.`
			`This component is registered as mindplot-component in customElements API. (see https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define)`
			`For use it you need to import minplot.js and put in your DOM a <mindplot-component id="mindplot-comp"/> tag. In order to create a Designer on it you need to call its buildDesigner method. Maps can be loaded through loadMap method.`

			`#### Code example`

			```
			`<!DOCTYPE html>`
			`<html>`
			`<head>`
			`<script src='mindplot.js'></script>`
			`</head>`
			`<body>`
			`<mindmap-comp id='mindmap-comp' mode="viewonly"></mindmap-comp>`
			`<script>`
			`var webComponent = document.getElementById('mindmap-comp');`
			`webComponent.buildDesigner(persistence, widget);`
			`webComponent.loadMap("1");`
			`</script>`
			`</body>`
			`</html>`
			```

			`Optionaly you can use your own presistence manager and widget manager.`
			`If you don't have special requirements you can use the defaults.`

			```
			`var persistence = new LocalStorageManager(`
			`'map.xml',`
			`false, false`
			`);`
			`var widget = new MyAwesomeWidgetManager();`
			`// then build the designer with these params`
			`webComponent.buildDesigner(persistence, widget);`
			```

			`## Usage with React framework`

			`To use the web component in your JSX code, first you need to register it in the IntrinsicElements interface using provided MindplotWebComponentInterface`

			`#### TypeScript example`
			```
			`import { MindplotWebComponentInterface } from '@wisemapping/mindplot';`

			`declare global {`
			`namespace JSX {`
			`interface IntrinsicElements {`
			`['mindplot-component']: MindplotWebComponentInterface;`
			`}`
			`}`
			`}`

			`const App = ()=>{`
			`const mindplotComponent: any = useRef();`

			`useEffect(()=>{`
			`mindplotComponent.current.buildDesigner();`
			`mindplotComponent.current.loadMap("map_id");`
			`}, [])`

			`return (<div>`
			`<mindplot-component`
			`ref={mindplotComponent}`
			`id="mindmap-comp"`
			`mode={options.mode}`
			`></mindplot-component>`
			`</div>);`
			`}`
			```


Merged in feature/tests-and-docs (pull request #9) Improve testing flow and docs * update snapshots * update snapshots * update snapshots * Add docker run instructions * Hide image snapshot execution behind an env flag * Simplify package.json scripts and improve docs * Merge 'origin/develop' into feature/tests-and-docs * Update snapshots * Add wait to container test * Update snapshot Approved-by: Paulo Veiga 2021-12-17 03:13:54 +01:00			Check out the examples located in `test/playground/map-render/js` for some hints on high level usage. You can browse them by running `yarn playground`.