Vueプロジェクトでマインドマップの全画面表示やズーム機能をjsmindを使って実現するにはどうすればよいですか?

npm install jsmind

import 'jsmind/jsmind.css';
import jsmind from 'jsmind/jsmind';

<template>
  <div id="mind-container"></div>
</template>

export default {
  mounted() {
    const mindContainer = document.getElementById('mind-container');
    const mind = new jsmind(mindContainer);
    
    // 添加思维导图节点
    const rootNode = mind.add_node(null, '思维导图', 'root');
    
    // 添加子节点
    mind.add_node(rootNode, '节点1', 'node1');
    mind.add_node(rootNode, '节点2', 'node2');
    mind.add_node(rootNode, '节点3', 'node3');
    
    // 渲染思维导图
    mind.show();
  }
}

export default {
  methods: {
    toggleFullScreen() {
      const doc = window.document;
      const docEl = doc.documentElement;

      const requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
      const exitFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;

      if (!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
        requestFullScreen.call(docEl);
      } else {
        exitFullScreen.call(doc);
      }
    }
  }
}

<template>
  <div id="mind-container">
    <button @click="toggleFullScreen">全屏显示</button>
  </div>
</template>

export default {
  methods: {
    zoomIn() {
      const mindContainer = document.getElementById('mind-container');
      mindContainer.mind.zoomIn();
    },
    zoomOut() {
      const mindContainer = document.getElementById('mind-container');
      mindContainer.mind.zoomOut();
    }
  }
}

<template>
  <div id="mind-container">
    <button @click="toggleFullScreen">全屏显示</button>
    <button @click="zoomIn">放大</button>
    <button @click="zoomOut">缩小</button>
  </div>
</template>