XMind Embed Viewer
Use XMind share to present your .xmind files on your blog or website.
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-readyzoom-changesheet-switchsheets-load
License
This project is licensed under the MIT License - see LICENSE.md file for details.
2 Sep 19, 2022
3 May 5, 2022
10 Nov 18, 2022
6 Dec 24, 2022
0 Dec 23, 2021
36 Dec 28, 2022
9 Jul 29, 2022
19 Nov 25, 2022
0 Sep 20, 2022
8 Jun 23, 2022