wisemapping-frontend/packages/mindplot
Gonzalo Martinez f11028e26e Merged in editor-with-mui (pull request #61)
Editor with mui

* hide keyboard help in mobile

* fix translation

* docs

* translations

* duplicated dependency

* keep selected node while note/link editor is focused

* code reorganization

* fix

* fix

* fix node focus is lost when note/link editors are open througth shortcuts
2022-10-05 21:54:23 +00:00
..
__tests__ Merged in web2d-coreJS-solutions (pull request #5) 2021-12-02 00:41:56 +00:00
assets/icons Fix loading issue on map. 2022-04-09 23:38:37 -03:00
cypress Format JS files. 2022-07-12 18:58:11 -07:00
src Merged in editor-with-mui (pull request #61) 2022-10-05 21:54:23 +00:00
test Merged in export-fix (pull request #60) 2022-09-07 04:29:25 +00:00
.eslintignore Merged in feature/mindplot-lint (pull request #11) 2021-12-20 20:54:31 +00:00
.eslintrc.json Merged in eslint-prettier-config (pull request #53) 2022-07-14 03:12:12 +00:00
.gitignore Merged in web2d-coreJS-solutions (pull request #5) 2021-12-02 00:41:56 +00:00
babel.config.json Merged in feature/browser_export (pull request #20) 2021-12-29 18:35:58 +00:00
cypress.json Integrate editor as part of webapp. 2022-01-25 18:10:40 +00:00
jest.config.js Merged in feature/browser_export (pull request #20) 2021-12-29 18:35:58 +00:00
jsconfig.json Fix module resolution 2022-01-30 02:37:14 -08:00
package.json v5.0.16 2022-09-11 13:05:13 -07:00
README.md Merged in mindplot-webcomponent (pull request #57) 2022-08-26 01:35:59 +00:00
tsconfig.json Merged in mindplot-webcomponent (pull request #57) 2022-08-26 01:35:59 +00:00
webpack.common.js Merged in mindplot-webcomponent (pull request #57) 2022-08-26 01:35:59 +00:00
webpack.dev.js Fix webpack.plaground to inherit from webpack.common 2021-12-21 20:53:30 -08:00
webpack.playground.js Merged in mindplot-webcomponent (pull request #57) 2022-08-26 01:35:59 +00:00
webpack.prod.js Omtimize playground load time 2022-01-05 18:02:55 -08:00

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 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.