tutorial1.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <title>JSCAD Design - Tutorial 1</title>
  <script src="https://unpkg.com/vue@2.7.8"></script>
  <script src="https://unpkg.com/vuex@2.5.0"></script>
  <style>
    .viewer{
      width: 8cm;
      height: 8cm;
      margin: 0;
      outline: 1px solid black;
      background-color: transparent;
    }
  </style>
</head>
<body>
  <script src="./dist/jscad-vue-components.js" ID="LIBRARY"></script>

  <div id="app">
    <div>
      <jscad-viewer></jscad-viewer>
    </div>
    <div>
      <p>Geometries: {{ count }}</p> 
      <p>Status: <span style="color:blue">{{ status }}</span></p>
    </div>
    <div>
      <label for="selector">Select a JSCAD design:</label>
      <input type="file" id="selector" @change="setFiles($event.target)" accept="application/javascript">
    </div>
  </div>

<script>
/**
 * This is Part 1 of working with JSCAD designs.
 * This is another simple application, which allows the selection of a single (file) JSCAD design.
 *
 * Notice that there is now only one script loaded, the Vue components library. See script LIBRARY above.
 *
 * The file is selected via a standard HTML input control.
 * Any change / new selection produces a list of files (1), and triggers the application function called setFiles().
 *
 * Try selecting this file; examples/index.js
 * NOTE: This is a LARGE design so processing may stop. Please wait for the procesing to complete.
 *
 * Behind the scene, the selected file is passed to the store for compilation. See COMPILE below.
 * The VUE components include a compiler plugin (See src/compilerPlugin).
 * Once the compile is complete, the JSCAD solids are updated, and WA LA!
 *
 * This works but there are some issues.
 * - This tutorial only allows the selection of a single file, no projects
 * - This tutorial REQUIRES DESIGNS TO BE NAMED 'index.js'. UG
 * - This tutorial does not support JSCAD design parameters. Not very useful.
 * - The viewer STOPS while the compliation completes.
 */

// global registration of viewer component
Vue.component(jscadVueComponents.viewerComponent.name, jscadVueComponents.viewerComponent.properties)

// global store with minimum state for viewer component
const store = new Vuex.Store({
  state: {
    count: 0,
    solids: [],
    status: ''
  },
  plugins: [jscadVueComponents.compilerPlugin],
  getters: {
    getSolids: (state) => {
      return state.solids
    }
  },
  mutations: {
    // @param {State} state
    // @param {Array} solids
    setSolids (state, solids) {
      solids.forEach((solid, i) => {
        Vue.set(state.solids, i, solid)
      })
      // trigger callback to viewer component
      state.count = solids.length
    },
    setStatus (state, status) {
      state.status = status
    },
    compile (state, design) {
      // NOTE: compile is perfomed by the PLUGIN
    }
  }
})

// initiate the Vue based application, which includes the jscad-viewer
let app = new Vue({
  el: '#app',
  store,
  computed: {
    count () {
      return store.state.count
    },
    status () {
      return store.state.status
    }
  },
  methods: {
    setFiles (target) {
      // validations
      const files = target.files
      if (files.length === 1) {
        store.commit("compile", { fileList: files }) // COMPILE
        return
      }
      store.commit("setStatus", 'please try again')
    }
  }
})

</script>

</body>
</html>