vue-guacamole-client/src/components/GuacDisplay.js

A Vue.js based Guacamole client

/**
 * Contains relevant code for creating and scaling Guacamole display
 */
import Vue from 'vue'
export default {
  name: 'GuacDisplay',
  methods: {

    /**
     * Adjust the scale of the connection display
     *
     * Requires Display to be initialized and autoScale option
     * to be set to True
     *
     * Determines the ideal scale to fit the display vertically and horizontally
     * and selects the smaller of the two values.
     */
    adjustScale () {
      if (!this.display) return
      if (!this.options.autoScale) return

      const element = this.$refs.displayWrapper

      if (!element) return

      const hScale = element.offsetWidth / this.display.getWidth()
      const vScale = element.offsetHeight / this.display.getHeight()
      const scale = Math.min(hScale, vScale)
      Vue.set(this.options, 'scale', scale)
      this.setScaledMouseState(scale)
    },

    /**
     * Creates the display for given connection
     *
     * Adds event listener to the window so that on resize it will attempt to
     * rescale the display
     */
    getDisplay () {
      // Add client to display div
      this.display = this.client.getDisplay()
      this.$refs.display.appendChild(this.client.getDisplay().getElement())

      window.addEventListener('resize', this.adjustScale)
    }
  },
  mounted(){
    try{
      // Checks for changes in visibility.  May not be supported in Safari and older browsers
      const observer = new IntersectionObserver( (entries) => {
        if (entries[0].intersectionRatio){
          this.adjustScale()
        }
      }, {root: document.viewport})

      observer.observe(this.$refs.display)
    }catch (e) {
      // Do Nothing
    }

    try{
      // Additional observer to support Safari
      const pane = this.$refs.display.closest('.tab-pane')
      const safariObeserver = new MutationObserver( () => {

        if (pane.style.display !== 'none') {
          this.adjustScale()
        }
      })

      safariObeserver.observe(pane, { attributes: true, childList: true })
    }catch(e){
      // Nothing
    }

  },
  watch: {
    /**
     * Watches for change in autoScale option.
     * When enabling autoScale it will trigger a scale adjustment
     */
    'options.autoScale': function (autoScale) {
      if (autoScale) {
        this.adjustScale()
      }
    },

    'options.scale': function (scale) {
      this.setScaledMouseState(scale)
    },

    /**
     * When client state changes to 'CONNECTED' the display is
     * in the final steps of initializing.  Attempting to auto-scale
     * the display at this point can cause the scale to be way off as the
     * element has not fully been constructed.
     *
     * Deferring the auto-scaling allows the display to be built on slower
     * connections and still be scaled appropriately
     */
    'options.clientState': function (clientState) {
      if (clientState === 'CONNECTED') {
        setTimeout(this.adjustScale, 1000)
      }
    }

  }
}