lidianhao123 / xmind-embed-viewer

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

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
})
fetch('test-1.xmind')
  .then(res => res.arrayBuffer())
  .then(file => viewer.load(file))

The example are using HTTP Fetch API.

See also demo source code here.

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.