Skip to content

Commit 55f3605

Browse files
sophiedezielsophiedeziel
committed
Manage the preview's rerender using events
1 parent a4ec5b3 commit 55f3605

16 files changed

Lines changed: 435 additions & 302 deletions

‎demo/index.html‎

Lines changed: 76 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<!DOCTYPE html>
2+
23
<head>
34
<script src="https://cdn.lrkt-in.com/LogRocket.min.js" crossorigin="anonymous"></script>
45
<script>document.location.hostname.includes('gcode-preview.web.app') && window.LogRocket && window.LogRocket.init('x64tmd/gcode-preview-demo');</script>
@@ -15,7 +16,7 @@
1516
loadAnalytics();
1617

1718
window.dataLayer = window.dataLayer || [];
18-
function gtag(){dataLayer.push(arguments);}
19+
function gtag() { dataLayer.push(arguments); }
1920
gtag('js', new Date());
2021
gtag('config', 'UA-165890546-1');
2122
}
@@ -24,84 +25,70 @@
2425
<link rel="stylesheet" href="style.css" />
2526
</head>
2627

27-
<body >
28+
<body>
2829
<div id="app">
2930
<div class="widget right bottom border slide-in-right glass is-clipped" v-cloak v-if="thumbnail || model">
30-
<img v-if="thumbnail"
31-
draggable="false"
32-
id=thumbnail
33-
class="is-block is-fullwidth"
34-
alt="thumbnail generated by slicer"
35-
:src="thumbnail" />
31+
<img v-if="thumbnail" draggable="false" id=thumbnail class="is-block is-fullwidth"
32+
alt="thumbnail generated by slicer" :src="thumbnail" />
3633
<div class="file-info">
37-
34+
3835
<div class="p-1" v-if="model">
3936
<div><a :href="model?.original">{{model?.name}}</a> <br>
40-
<span v-if="model?.designer" class="is-size-8">by {{model?.designer}}</span></div>
37+
<span v-if="model?.designer" class="is-size-8">by {{model?.designer}}</span>
38+
</div>
4139

4240
<div class="license is-size-8">{{model?.license}}</div>
4341
</div>
4442

4543
</div>
4644
</div>
47-
<div class="sidebar p-4 widget left top glass slide-in-left border" >
48-
49-
<h1 class="text-center m-3 mb-5">GCode Preview
45+
<div class="sidebar p-4 widget left top glass slide-in-left border">
46+
47+
<h1 class="text-center m-3 mb-5">GCode Preview
5048
</h1>
5149
<div class="scroll-container">
5250
<div>
53-
<section class="flex is-justify-content-center">
51+
<section class="flex is-justify-content-center">
5452
<div class="bulma-select">
55-
<select id="settings-presets"
56-
v-cloak
57-
v-model="selectedPreset">
53+
<select id="settings-presets" v-cloak v-model="selectedPreset">
5854
<option v-for="(preset, name) in presets" :value="name">{{preset.title}}</option>
5955
</select>
6056
</div>
6157
</section>
62-
58+
6359
<div class="bulma-tabs bulma-is-small">
6460
<ul>
6561
<li :class="{ 'bulma-is-active': activeTab == 'layers' }"><a @click="selectTab('layers')">Layers</a></li>
6662
<li :class="{ 'bulma-is-active': activeTab == 'travel' }"><a @click="selectTab('travel')">Travel</a></li>
67-
<li :class="{ 'bulma-is-active': activeTab == 'extrusion' }"><a @click="selectTab('extrusion')">Extrusion</a></li>
68-
<li :class="{ 'bulma-is-active': activeTab == 'build-volume' }"><a @click="selectTab('build-volume')">Build volume</a></li>
63+
<li :class="{ 'bulma-is-active': activeTab == 'extrusion' }"><a
64+
@click="selectTab('extrusion')">Extrusion</a></li>
65+
<li :class="{ 'bulma-is-active': activeTab == 'build-volume' }"><a
66+
@click="selectTab('build-volume')">Build volume</a></li>
6967
</ul>
70-
</div>
68+
</div>
7169
<div class="is-size-7">
7270
<div class="panel" v-cloak v-show="activeTab == 'layers'">
73-
<section v-if="layerCount > 1">
71+
<section v-if="layerCount > 1">
7472
<div class="controls">
7573
<label>
7674
Start Layer
77-
<input type="checkbox" v-model="settings.enableStartLayer" />
75+
<input type="checkbox" v-model="settings.enableStartLayer" />
7876
</label>
79-
<label :class="{'has-text-grey' : !settings.enableStartLayer}" ><output id="start-layer-value" >{{settings.startLayer}}</output></label>&nbsp;
80-
<input
81-
type="range"
82-
min="1"
83-
:max="settings.maxLayer"
84-
id="start-layer"
85-
v-model="settings.startLayer"
86-
:disabled="!settings.enableStartLayer"
87-
/>
77+
<label :class="{'has-text-grey' : !settings.enableStartLayer}"><output
78+
id="start-layer-value">{{settings.startLayer}}</output></label>&nbsp;
79+
<input type="range" min="1" :max="settings.maxLayer" id="start-layer" v-model="settings.startLayer"
80+
:disabled="!settings.enableStartLayer" />
8881
</div>
8982
<div class="controls">
9083
<label>
9184
End Layer
92-
<input type="checkbox" v-model="settings.enableEndLayer" />
85+
<input type="checkbox" v-model="settings.enableEndLayer" />
9386
</label>
94-
<label :class="{'has-text-grey' : !settings.enableEndLayer}"> <output id="end-layer-value" >{{settings.endLayer}}</output></label>&nbsp;
87+
<label :class="{'has-text-grey' : !settings.enableEndLayer}"> <output
88+
id="end-layer-value">{{settings.endLayer}}</output></label>&nbsp;
9589
<!-- HACK: extra :value binding to ensure the value is set after the max is updated -->
96-
<input
97-
v-model="settings.endLayer"
98-
type="range"
99-
min="1"
100-
:max="settings.maxLayer"
101-
id="end-layer"
102-
:value="settings.endLayer"
103-
:disabled="!settings.enableEndLayer"
104-
/>
90+
<input v-model="settings.endLayer" type="range" min="1" :max="settings.maxLayer" id="end-layer"
91+
:value="settings.endLayer" :disabled="!settings.enableEndLayer" />
10592
</div>
10693
<div class="controls">
10794
<label for="single-layer-mode">Single layer mode</label>
@@ -120,66 +107,57 @@ <h1 class="text-center m-3 mb-5">GCode Preview
120107
<section>
121108
<div class="controls">
122109
<label for="travel">Render travel</label>
123-
<input type="checkbox" id="travel" v-model="settings.renderTravel" />
110+
<input type="checkbox" id="travel" v-model="settings.renderTravel" />
124111
</div>
125112
<div class="controls">
126113
<label :class="{'has-text-grey' : !settings.renderTravel}" for="travel-color">Travel color</label>
127-
<input type="color" id="travel-color" v-model="settings.travelColor" :disabled="!settings.renderTravel" />
114+
<input type="color" id="travel-color" v-model="settings.travelColor"
115+
:disabled="!settings.renderTravel" />
128116
</div>
129117
</section>
130118
</div>
131-
119+
132120
<div class="panel" v-cloak v-show="activeTab == 'extrusion'">
133121
<section class="mb-0">
134122
<div class="controls">
135-
<label for="extrusion">Render extrusion</label
136-
><input type="checkbox" v-model="settings.renderExtrusion" />
123+
<label for="extrusion">Render extrusion</label><input type="checkbox"
124+
v-model="settings.renderExtrusion" />
137125
</div>
138126
</section>
139127

140128
<div :class="{'has-text-grey': !settings.renderExtrusion}">
141-
129+
142130
<section>
143131
<div class="controls">
144-
<label for="render-tubes">Render as tubes</label
145-
><input type="checkbox" v-model="settings.renderTubes" :disabled="!settings.renderExtrusion"/>
132+
<label for="render-tubes">Render as tubes</label><input type="checkbox"
133+
v-model="settings.renderTubes" :disabled="!settings.renderExtrusion" />
146134
</div>
147135
<div class="controls" v-show="!settings.renderTubes">
148136
<label>Line width <output>{{settings.lineWidth}}</output></label>&nbsp;
149-
<input
150-
type="range"
151-
min="1"
152-
step="0.5"
153-
max="10"
154-
v-model="settings.lineWidth"
155-
:disabled="!settings.renderExtrusion"
156-
/>
157-
</div>
158-
159-
<div class="controls" v-show="settings.renderTubes">
160-
<label>Extrusion width <output>{{settings.extrusionWidth}}</output></label>&nbsp;
161-
<input
162-
type="number"
163-
min="0.05"
164-
max="3.0"
165-
step="0.05"
166-
v-model="settings.extrusionWidth"
167-
:disabled="!settings.renderExtrusion"
168-
/>
169-
</div>
137+
<input type="range" min="1" step="0.5" max="10" v-model="settings.lineWidth"
138+
:disabled="!settings.renderExtrusion" />
139+
</div>
140+
141+
<div class="controls" v-show="settings.renderTubes">
142+
<label>Extrusion width <output>{{settings.extrusionWidth}}</output></label>&nbsp;
143+
<input type="number" min="0.05" max="3.0" step="0.05" v-model="settings.extrusionWidth"
144+
:disabled="!settings.renderExtrusion" />
145+
</div>
170146
</section>
171147

172148
<section class="extrusion-colors">
173-
<div class="flex just-between"># of extrusion colors <div class="controls">
174-
<button @click="addColor">+</button>
175-
<button @click="removeColor">-</button>
176-
</div></div>
149+
<div class="flex just-between"># of extrusion colors <div class="controls">
150+
<button @click="addColor">+</button>
151+
<button @click="removeColor">-</button>
152+
</div>
153+
</div>
177154

178155
<div class="controls" v-for="color,index in settings.colors">
179156
<label for="extrusion-color-t0">Extrusion color (T{{index}})</label>
180-
<input type="color" v-model="settings.colors[index]" :key="index" :disabled="!settings.renderExtrusion" />
157+
<input type="color" v-model="settings.colors[index]" :key="index"
158+
:disabled="!settings.renderExtrusion" />
181159
</div>
182-
160+
183161
</section>
184162

185163
<!-- <section>
@@ -197,7 +175,7 @@ <h1 class="text-center m-3 mb-5">GCode Preview
197175
</div>
198176
<div class="controls">
199177
<label :class="{'has-text-grey' : !settings.highlightLastSegment}" for="last-segment-color">Last segment color</label>
200-
<input type="color" id="last-segment-color" v-model="settings.lastSegmentColor"
178+
<input type="color" id="last-segment-color" v-model="settings.lastSegmentColor"
201179
:disabled="!settings.highlightLastSegment || !settings.renderExtrusion" />
202180
</div>
203181
</section> -->
@@ -206,26 +184,30 @@ <h1 class="text-center m-3 mb-5">GCode Preview
206184
</div>
207185
<div class="panel" v-cloak v-show="activeTab == 'build-volume'">
208186
<section>
209-
<div class="controls">
187+
<div class="controls">
210188
<label for="drawBuildVolume">Render build volume</label>
211189
<input type="checkbox" v-model="settings.drawBuildVolume" />
212190
</div>
213191
<div :class="{'has-text-grey' : !settings.drawBuildVolume}">
214192
<div class="controls">
215193
<label for="buildVolumeX">Build volume (x)&nbsp;</label>
216-
<input type="number" v-model="settings.buildVolume.x" step=10 :disabled="!settings.drawBuildVolume" />
194+
<input type="number" v-model="settings.buildVolume.x" step=10
195+
:disabled="!settings.drawBuildVolume" />
217196
</div>
218-
<div class="controls">
197+
<div class="controls">
219198
<label for="buildVolumeY">Build volume (y)&nbsp;</label>
220-
<input type="number" v-model="settings.buildVolume.y" step=10 :disabled="!settings.drawBuildVolume" />
199+
<input type="number" v-model="settings.buildVolume.y" step=10
200+
:disabled="!settings.drawBuildVolume" />
221201
</div>
222-
<div class="controls">
202+
<div class="controls">
223203
<label for="buildVolumeZ">Build volume (z)&nbsp;</label>
224-
<input type="number" v-model="settings.buildVolume.z" step=10 :disabled="!settings.drawBuildVolume" />
204+
<input type="number" v-model="settings.buildVolume.z" step=10
205+
:disabled="!settings.drawBuildVolume" />
225206
</div>
226207
<div class="controls">
227208
<label for="smallGrid">Small grid</label>
228-
<input type="checkbox" v-model="settings.buildVolume.smallGrid" :disabled="!settings.drawBuildVolume" />
209+
<input type="checkbox" v-model="settings.buildVolume.smallGrid"
210+
:disabled="!settings.drawBuildVolume" />
229211
</div>
230212
</div>
231213
<div class="controls">
@@ -234,10 +216,10 @@ <h1 class="text-center m-3 mb-5">GCode Preview
234216
</div>
235217
<div class="controls">
236218
<label for="bounding-color">Bounding box</label>
237-
<input type="checkbox" v-model="drawBoundingBox" />
219+
<input type="checkbox" v-model="settings.drawBoundingBox" />
238220
</div>
239221
<div class="controls">
240-
<label for="background-color">Background color</label>
222+
<label for="background-color">Bounding box color</label>
241223
<input type="color" v-model="settings.boundingBoxColor" />
242224
</div>
243225
</section>
@@ -247,23 +229,22 @@ <h1 class="text-center m-3 mb-5">GCode Preview
247229
</div>
248230
<div>
249231
<footer class="is-size-7 p-0 has-text-grey-light">
250-
251-
232+
233+
252234
<div>
253235
<a class="has-text-grey-light" href="https://github.com/remcoder/gcode-preview">GitHub</a>
254236
- <a class="has-text-grey-light" href="/docs">API docs</a>
255-
237+
256238
</div>
257239
<div>MIT license </div>
258240
</footer>
259241
</div>
260242
</div>
261-
<div class="widget top right glass p-3 is-size-7 slide-in-down border"><label class="mr-2">dev mode</label><input v-model="enableDevMode" type="checkbox" /> </div>
243+
<div class="widget top right glass p-3 is-size-7 slide-in-down border"><label class="mr-2">dev mode</label><input
244+
v-model="enableDevMode" type="checkbox" /> </div>
262245
<div class="absolute left bottom m-3 has-text-grey slide-in-up">Drop a gcode file to preview it</div>
263246
<div class="wrapper">
264-
<canvas class="preview" :class="{ 'dragging': settings.dragging }"
265-
@update.prevent="update"
266-
></canvas>
247+
<canvas class="preview" :class="{ 'dragging': settings.dragging }" @update.prevent="update"></canvas>
267248
</div>
268249
</div>
269250
<script type="importmap">

0 commit comments

Comments
 (0)