feat(all): integration with JSCAD V2 packages

* build(all): added .gitignore * build(all): added initial package configuration * feat(all): integration with JSCAD V2 packages * build(all): build UMD components in the dist directory * feat(viewerComponent): integrated VUE store into the viewerComponent, allowing design solids to be set at anytime * docs(all): updated README
z3dev · Oct 11, 2020 · a65a73b · a65a73b
1 parent 9fc811a
commit a65a73b
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 4,174 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,10 @@
+node_modules/
+coverage/
+.DS_Store
+.nyc_output
+package-lock.json
+*.log
+*.swp
+*~
+dist/
+docs/
diff --git a/README.md b/README.md
@@ -1,4 +1,21 @@
 # vue-components
+
 VUE Components for rendering and compiling JSCAD designs
 
 ## ALPHA ALPHA ALPHA
+## ALPHA ALPHA ALPHA
+## ALPHA ALPHA ALPHA
+
+## Table of Contents
+- [Usage](#usage)
+- [License](#license)
+
+## Usage
+
+See the various examples on how to assemble the components.
+Each example has comments about flows and usage, and should be self explanatory.
+
+## License
+
+[The MIT License (MIT)](https://github.com/jscad/OpenJSCAD.org/blob/master/LICENSE)
+(unless specified otherwise)
diff --git a/hello.html b/hello.html
@@ -1,8 +1,10 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>My first Vue app</title>
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
+  <title>Simple Viewer for JSCAD Solids</title>
   <script src="https://unpkg.com/vue"></script>
+  <script src="https://unpkg.com/vuex"></script>
   <style>
     .viewer{
       width: 8cm;
@@ -14,15 +16,10 @@
   </style>
 </head>
 <body>
-  <script src="./lib/reglRenderer.js"></script>
-  <script src="./viewerComponent.js"></script>
+  <script src="./dist/viewerComponent.js"></script>
   <script src="./solids.js"></script>
 
   <div id="app">
-    <div>
-      <p>{{ message }}</p>
-    <button v-on:click="reverse">Reverse Message</button>
-    </div>
     <div>
       <jscad-viewer></jscad-viewer>
     </div>
@@ -32,19 +29,37 @@
 // global registration of viewer component
 Vue.component(viewerComponent.name, viewerComponent.properties)
 
-const something = [1,2,3,4]
-
-var app = new Vue({
-  el: '#app',
-  data: {
-    message: 'Hello Vue!'
+// global store with minimum state for viewer component
+const store = new Vuex.Store({
+  state: {
+    count: 0,
+    solids: []
+  },
+  getters: {
+    getSolids: (state) => {
+      return state.solids
+    }
   },
-  methods: {
-    reverse: function () {
-      this.message = this.message.split('').reverse().join('')
+  mutations: {
+    // @param {State} state
+    // @param {Array} solids
+    setSolids (state, solids) {
+      Vue.set(state.solids, 0, solids[0])
+      // trigger callback to viewer component
+      state.count = solids.length
     }
   }
 })
+
+// initiate the Vue based application, which includes the jscad-viewer
+let app = new Vue({
+  el: '#app',
+  store
+})
+
+// set the solids, which updates the viewer as well
+store.commit("setSolids", solids)
+
 </script>
 
 </body>