Skip to content

Commit

Permalink
feat: add new CodeStream control to Gcodeviewer (#1224)
Browse files Browse the repository at this point in the history
Co-authored-by: Stefan Dej <[email protected]>
  • Loading branch information
Sindarius and meteyou committed Jan 19, 2023
1 parent 380f3c1 commit 1a32147
Show file tree
Hide file tree
Showing 7 changed files with 241 additions and 112 deletions.
214 changes: 107 additions & 107 deletions package-lock.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"@codemirror/view": "^6.0.3",
"@jaames/iro": "^5.5.2",
"@lezer/highlight": "^1.0.0",
"@sindarius/gcodeviewer": "^3.1.4",
"@sindarius/gcodeviewer": "^3.1.14",
"@types/node": "^18.0.0",
"@types/overlayscrollbars": "^1.12.1",
"axios": "^0.27.0",
Expand Down
82 changes: 82 additions & 0 deletions src/components/gcodeviewer/CodeStream.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<template>
<div ref="view" class="codeview" @mouseup="mouseUp" @keydown="keyPress"></div>
</template>

<script lang="ts">
import { Component, PropSync, Prop, Vue, Watch } from 'vue-property-decorator'
import { EditorView, basicSetup } from 'codemirror'
import { EditorState } from '@codemirror/state'
@Component({})
export default class CodeStream extends Vue {
@PropSync('currentline') currentLineNumber!: number
@Prop({ type: String, default: '' }) declare document: string
@Prop({ type: Boolean, default: false }) declare isSimulating: boolean
@Prop({ type: Boolean, default: false }) declare shown: boolean
view: EditorView | undefined = undefined
private mounted() {
this.view = new EditorView({
doc: this.document,
extensions: [basicSetup, EditorState.readOnly.of(true)],
parent: this.$refs['view'] as HTMLElement,
})
}
mouseUp() {
if (this.view) {
let line = this.view.state.doc.lineAt(this.view.state.selection.ranges[0].from)
this.$emit('update:currentline', line.to)
this.view.contentDOM.blur()
this.$emit('got-focus')
}
}
keyPress() {
if (this.view) {
let line = this.view.state.doc.lineAt(this.view.state.selection.ranges[0].from)
this.$emit('update:currentline', line.to)
this.$emit('got-focus')
}
}
@Watch('document')
documentUpdated() {
if (this.view && this.shown) {
this.view.dispatch({
changes: {
from: 0,
to: this.view.state.doc.length,
insert: this.document,
},
})
}
}
@Watch('currentLineNumber')
currentlineUpdated(to: number) {
if (this.view && this.shown) {
let line = this.view.state.doc.lineAt(to)
this.view.dispatch({
selection: {
anchor: line.from,
head: line.from,
},
scrollIntoView: true,
})
}
}
}
</script>

<style scoped>
/deep/ .cm-activeLine {
background-color: #333 !important;
}
.codeview {
height: 100%;
overflow: hidden;
}
</style>
50 changes: 47 additions & 3 deletions src/components/gcodeviewer/Viewer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,19 @@
</template>
<v-card-text>
<v-row :class="showScrubber ? 'withScrubber' : ''">
<v-col>
<v-col :cols="showGCode ? 8 : 12">
<div ref="viewerCanvasContainer"></div>
</v-col>
<v-col v-show="showGCode" cols="4">
<div class="viewer">
<CodeStream
ref="gcodestream"
:shown="showGCode"
:currentline.sync="scrubPosition"
:document="fileData"
:is-simulating="!printerIsPrinting" />
</div>
</v-col>
</v-row>
<v-row v-show="showScrubber" class="scrubber">
<v-col class="pt-0">
Expand Down Expand Up @@ -123,6 +133,14 @@
hide-details
:label="$t('GCodeViewer.ShowTravelMoves')"></v-checkbox>
</v-list-item>
<v-list-item class="minHeight36">
<v-checkbox
v-model="showGCode"
class="mt-0"
hide-details
:label="$t('GCodeViewer.ShowGCode')"></v-checkbox>
</v-list-item>

<v-list-item
v-if="loadedFile === sdCardFilePath && printing_objects.length"
class="minHeight36">
Expand Down Expand Up @@ -255,6 +273,7 @@ import GCodeViewer from '@sindarius/gcodeviewer'
import axios from 'axios'
import { formatFilesize } from '@/plugins/helpers'
import Panel from '@/components/ui/Panel.vue'
import CodeStream from '@/components/gcodeviewer/CodeStream.vue'
import {
mdiCameraRetake,
mdiCog,
Expand Down Expand Up @@ -286,7 +305,7 @@ interface downloadSnackbar {
let viewer: any = null
@Component({
components: { Panel },
components: { Panel, CodeStream },
})
export default class Viewer extends Mixins(BaseMixin) {
/**
Expand Down Expand Up @@ -342,6 +361,8 @@ export default class Viewer extends Mixins(BaseMixin) {
name: '',
}
private fileData: string = ''
@Prop({ type: String, default: '', required: false }) declare filename: string
@Ref('fileInput') declare fileInput: HTMLInputElement
@Ref('viewerCanvasContainer') declare viewerCanvasContainer: HTMLElement
Expand All @@ -366,6 +387,9 @@ export default class Viewer extends Mixins(BaseMixin) {
await this.init()
if (this.loadedFile !== null) this.scrubFileSize = viewer.fileSize
if (viewer) {
this.fileData = viewer.fileData
}
}
beforeDestroy() {
Expand Down Expand Up @@ -574,6 +598,7 @@ export default class Viewer extends Mixins(BaseMixin) {
this.fileSize = blob.length
// Do something with result
await viewer.processFile(blob)
this.fileData = viewer.fileData
}
this.finishLoad()
})
Expand Down Expand Up @@ -621,6 +646,7 @@ export default class Viewer extends Mixins(BaseMixin) {
viewer.updateRenderQuality(this.renderQuality.value)
await viewer.processFile(text)
this.fileData = viewer.fileData
this.loadingPercent = 100
this.finishLoad()
this.scrubFileSize = viewer.fileSize
Expand Down Expand Up @@ -652,6 +678,7 @@ export default class Viewer extends Mixins(BaseMixin) {
this.loading = true
this.loadingPercent = 0
await viewer.reload()
this.fileData = viewer.fileData
this.loadingPercent = 100
this.finishLoad()
}
Expand Down Expand Up @@ -694,6 +721,7 @@ export default class Viewer extends Mixins(BaseMixin) {
const offset = 350
if (newVal > 0 && this.printerIsPrinting && this.tracking && newVal > offset) {
viewer.gcodeProcessor.updateFilePosition(newVal - offset)
this.scrubPosition = newVal - offset
} else {
viewer.gcodeProcessor.updateFilePosition(viewer.fileSize)
}
Expand Down Expand Up @@ -739,6 +767,18 @@ export default class Viewer extends Mixins(BaseMixin) {
this.$store.dispatch('gui/saveSetting', { name: 'gcodeViewer.showTravelMoves', value: newVal })
}
get showGCode(): boolean {
return this.$store.state.gui.gcodeViewer.showGCode ?? false
}
set showGCode(newVal: boolean) {
this.$store.dispatch('gui/saveSetting', { name: 'gcodeViewer.showGCode', value: newVal })
if (newVal && viewer) {
this.fileData = viewer.fileData
}
this.handleResize()
}
@Watch('showTravelMoves')
showTravelMovesChanged(newVal: boolean) {
viewer?.toggleTravels(newVal)
Expand Down Expand Up @@ -1044,6 +1084,7 @@ export default class Viewer extends Mixins(BaseMixin) {
this.scrubInterval = setInterval(() => {
this.scrubPosition += 100 * this.scrubSpeed
viewer.gcodeProcessor.updateFilePosition(this.scrubPosition)
viewer.simulateToolPosition()
if (this.tracking || this.scrubPosition >= this.scrubFileSize) {
this.scrubPlaying = false
}
Expand All @@ -1062,7 +1103,10 @@ export default class Viewer extends Mixins(BaseMixin) {
@Debounce(200)
@Watch('scrubPosition')
updateScrubPosition(to: number): void {
if (!this.tracking) viewer.gcodeProcessor.updateFilePosition(to)
if (!this.tracking) {
viewer.gcodeProcessor.updateFilePosition(to)
viewer.simulateToolPosition()
}
}
fastForward(): void {
Expand Down
3 changes: 2 additions & 1 deletion src/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,8 @@
"Tracking": "Tracking",
"Transparency": "Transparency",
"Ultra": "Ultra",
"VoxelMode": "Voxel Mode (ASMBL)"
"VoxelMode": "Voxel Mode (ASMBL)",
"ShowGCode": "Show G-Code"
},
"Heightmap": {
"Abort": "abort",
Expand Down
1 change: 1 addition & 0 deletions src/store/gui/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,7 @@ export const getDefaultState = (): GuiState => {
axis_minimum: null,
axis_maximum: null,
},
showGCodePanel: false,
},
uiSettings: {
logo: defaultLogoColor,
Expand Down
1 change: 1 addition & 0 deletions src/store/gui/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ export interface GuiState {
axis_minimum: number[] | null
axis_maximum: number[] | null
}
showGCodePanel: boolean
}
macros?: GuiMacrosState
notifications?: GuiNotificationState
Expand Down

0 comments on commit 1a32147

Please sign in to comment.