Package Exports

polaris-xmind-viewer
polaris-xmind-viewer/dist/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (polaris-xmind-viewer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

XMind Embed Viewer

Use XMind share to present your .xmind files on your blog or website.

Demo

Quick start

Install

As an npm module

npm i xmind-embed-viewer

Or alternatively from unpkg/jsdelivr with a script tag as a UMD bundle

<script src="https://unpkg.com/xmind-embed-viewer/dist/umd/xmind-embed-viewer.js"></script>
<!-- or https://www.jsdelivr.com/npm/xmind-embed-viewer/dist/umd/xmind-embed-viewer.js -->
<script> // window.XMindEmbedViewer are available now. </script>

Base usage

const viewer = new XMindEmbedViewer({
  el: '#container-or-iframe-selector', // HTMLElement | HTMLIFrameElement | string
  // 如果在中国大陆境内速度慢，可以添加的参数 `region: 'cn'` 改为使用 xmind.cn 的图库作为依赖。
  // region: 'cn' //optinal, global(default) or cn
})
fetch('test-1.xmind')
  .then(res => res.arrayBuffer())
  .then(file => viewer.load(file))

The example are using HTTP Fetch API.

Methods

Get viewer state

console.log('Current zoomscales: ', viewer.zoomScale)
console.log('Current activated sheet id: ', viewer.currentSheetId)
console.log('All Sheets: ', viewer.sheets)

Load file into viewer

viewer.load are only accept ArrayBuffer object.

fetch('test-1.xmind')
  .then(res => res.arrayBuffer())
  .then(file => viewer.load(file))

ZoomScale Control

Use extract scale value, Range: 50 - 500

viewer.setZoomScale(100)

Auto-fits with container bounds

viewer.setFitMap()

Sheet Control

You can use viewer.sheets to retrieve all sheet attribute.

viewer.switchSheet('sheet-id')

Update iframe style

viewer.setStyles({
  'width': '100%',
  // CSS styles are available here
})

Events

Add listener

const callback = (payload) => {
    console.log('Event callback with payload', payload)
}
viewer.addEventListener('event-name', callback)
viewer.removeEventListener('event-name', callback)

Available events:

map-ready
zoom-change
sheet-switch
sheets-load

License

This project is licensed under the MIT License - see LICENSE.md file for details.