VIMReact - Context Menu

by simon_vimaec

HTML

<script>  
  window.process = { env: { NODE_ENV: 'development' } };
</script>
<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/vim-webgl-component@0.3.8"></script>
<link rel="stylesheet" href="https://unpkg.com/vim-webgl-component@0.3.7/dist/style.css">

CSS

/*Makes full screen and remove scrollbars*/
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        /*This prevents touches from being eaten up by the browser.*/
        touch-action: none;
      }

JavaScript

// create a component and setup callback
VIMReact.createVimComponent(async (cmp) => {

	// You can open the context menu by right clicking on the canvas
	// You should see a new button called Custom Button
  cmp.contextMenu.customize((menu) => [
    // Keep existing menu
    ...menu,
    // Append a divider
    {
      id: 'custom-divider',
      enabled: true
    },
    // Append a custom button
    {
      action: () => console.log('Custom button'),
      enabled: true,
      id: 'custom-button',
      keyboard: '',
      label: 'Custom Button'
    }
  ])

  // Open a new vim file
  const vim = await cmp.loader.open(
    'https://vim02.azureedge.net/samples/residence.v1.2.75.vim',
    {
      rotation: new VIMReact.THREE.Vector3(270, 0, 0)
    }
  )
})