VIMReact - Custom Input

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) => {

	// Get default behaviour
	const base = new VIMReact.VIM.DefaultInputScheme(cmp.viewer)

	// Create a wrapper with our custom logic
	// You should see logs on click and on hover
  const customScheme = {
    onIdleAction(hit) {
      console.log('onIdleAction')
      base.onIdleAction(hit)
    },
    onKeyAction(key) {
      console.log('onKeyAction')
      return base.onKeyAction(key)
    },
    onMainAction(hit) {
      console.log('onMainAction')
      base.onMainAction(hit)
    },
  }

	// Replace viewer inputs with our new scheme
  cmp.viewer.inputs.scheme = customScheme

  // 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)
    }
  )
})