-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtutorial4.html
134 lines (127 loc) · 3.8 KB
/
tutorial4.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>JSCAD Design - Tutorial 4</title>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></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" v-cloak @drop.prevent="addContent" @dragover.prevent>
<div>
<jscad-viewer></jscad-viewer>
</div>
<div>
<p>Geometries: {{ count }}</p>
<p>Status: <span style="color:blue">{{ status }}</span></p>
</div>
<div>
<h3>ENTER URL OF REMOTE JSCAD DESIGN</h3>
<label for="text">URL:</label>
<input type="text" id="text" autofocus maxLength="200" size="100" @change="addURL">
<h3>OR DRAG AND DROP ANY URL TO THIS PAGE</h3>
</div>
</div>
<script>
/**
* This is Part 4 of working with JSCAD designs.
* This is another simple application, which allows input of a URL that references a remote JSCAD design (file).
* Alternately, a URL (text) can be dropped onto the window as well.
*
* Just type in a URL, and tap enter.
* Any new content produces a change event, and triggers the application function called addContent() or addURL().
*
* Try this URL...
* https://www.jscad.xyz/examples/core/primitives/roundedCuboid.js
*
* Behind the scene, the URL is provided to the fetch plugin, which fetches the remote contents. See FETCH below.
* The contents are then converted, and passed to the store for compilation. See COMPILE below.
* Once the compile is complete, the JSCAD solids are updated, and WA LA!
*
* This works but there are some issues.
* - This tutorial does not support JSCAD design parameters. Not very useful.
* - The viewer STOPS while the compliation completes.
*
* Did you find the hidden functionality? Try any supported external file format, like STL.
* https://www.jscad.xyz/examples/import/AMFImport/Rook.amf
* https://www.jscad.xyz/examples/import/STLImport/frog-OwenCollins.stl
*/
// 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, jscadVueComponents.fetchPlugin],
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
},
fetch (state, url) {
// NOTE: fetch is perfomed by the PLUGIN
}
}
})
// initiate the Vue based application, which includes the jscad-viewer
let app = new Vue({
el: '#app',
store,
data: {
entries: []
},
computed: {
count () {
return store.state.count
},
status () {
return store.state.status
}
},
methods: {
addContent(event) {
if (event.dataTransfer.types.includes('text/plain')) {
const url = event.dataTransfer.getData('text')
store.commit("fetch", url) // FETCH (and then COMPILE)
}
},
addURL(event) {
if (event.target.type === 'text') {
const url = event.target.value
store.commit("fetch", url) // FETCH (and then COMPILE)
}
}
}
})
</script>
</body>
</html>