General questions

Answered

MyscriptJS with VueJS & Vuetify

I've tried to take the VueJS integration sample and apply it to an existing vuetify page I have... I can't seem to get the editor to properly fill the entire screen. Whenever I write it looks like the pen thinks it is 150 pixels below where it is starting. 

Also, on resize, the editor completely blows up

 

 

 

<template>
  <v-app>
    <v-app-bar fixed app dark color="primary">
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
      <v-toolbar-title :text="title" />
      <v-spacer />
      <v-btn
        text
        rounded
        @click="onClear"
      >
        Clear
      </v-btn>
    </v-app-bar>
    <v-content>
      <div class="whole-screen">
        <div class="result">
          <katex-element :expression="latex" />
        </div>
        <div
          ref="editor"
          class="editor"
          touch-action="none"
          @exported="exported($event)"
        />
      </div>
    </v-content>
  </v-app>
</template>

<script>
import * as MyScriptJS from 'myscript'

export default {
  name: 'MyScriptJSVueComponent',
  head () {
    return {
      title: this.title,
      meta: [
        // hid is used as unique identifier. Do not use `vmid` for it as it will not work
        {
          hid: 'viewport',
          name: 'viewport',
          content:
            'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
        },
        {
          hid: 'mobile-web-app-capable',
          name: 'mobile-web-app-capable',
          content: 'yes'
        },
        {
          hid: 'apple-mobile-web-app-capable',
          name: 'apple-mobile-web-app-capable',
          content: 'yes'
        },
        { hid: 'HandheldFriendly', name: 'HandheldFriendly', content: 'true' }
      ]
    }
  },
  data () {
    return {
      editor: null,
      latex: '',
      jiix: {},
      title: 'Solving problem'
    }
  },
  mounted () {
    // Register an event listener when the Vue component is ready
    window.addEventListener('resize', this.onResize)

    this.editor = MyScriptJS.register(this.$refs.editor, {
      recognitionParams: {
        type: 'MATH',
        protocol: 'WEBSOCKET',
        apiVersion: 'V4',
        server: {
          scheme: 'https',
          host: 'webdemoapi.myscript.com',
          applicationKey: '515131ab-35fa-411c-bb4d-3917e00faf60',
          hmacKey: '54b2ca8a-6752-469d-87dd-553bb450e9ad'
        },
        v4: {
          math: {
            mimeTypes: ['application/x-latex', 'application/vnd.myscript.jiix'],
            solver: {
              enable: false
            }
          },
          export: {
            jiix: {
              strokes: true
            }
          }
        }
      }
    })
  },
  beforeDestroy () {
    // Unregister the event listener before destroying this Vue instance
    window.removeEventListener('resize', this.onResize)
  },
  methods: {
    onResize (event) {
      this.editor.resize()
    },
    onClear () {
      this.editor.clear()
      this.latex = ''
      this.jiix = ''
    },
    exported (event) {
      const exports = event.detail.exports

      if (exports && exports['application/x-latex']) {
        this.latex = exports['application/x-latex']
      }
      if (exports && exports['application/vnd.myscript.jiix']) {
        this.jiix = exports['application/vnd.myscript.jiix']
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("myscript/dist/myscript.min.css");
.whole-screen {
  height: 100vh;
}
.editor {
  min-height: 600px;
  min-width: 300px;
  background-color: green;
  touch-action: none;
}
.result {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
  background-color: gray;
}

#result span {
  margin: auto;
  font-size: xx-large;
}
</style>

 


Best Answer

Dear Robert,

thank you for contacting us and the interest you show to our product.

Currently, when importing the CSS of the MyScriptJS, it shall not be on inside of a <style scoped> tag but a <style> tag.

You shall then set the style as follows:

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
@import url("myscript/dist/myscript.min.css");
</style>
<style scoped>


Best regards,

Olivier

1 Comment

Answer

Dear Robert,

thank you for contacting us and the interest you show to our product.

Currently, when importing the CSS of the MyScriptJS, it shall not be on inside of a <style scoped> tag but a <style> tag.

You shall then set the style as follows:

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
@import url("myscript/dist/myscript.min.css");
</style>
<style scoped>


Best regards,

Olivier