I implemented the ResliceCursorWidget script and the html file inside glance, but I can’t figure out what the problem is with the code. I checked the console (browser) and the terminal, and both show no errors.
I believe the issue is with the ResliceWidget functions I’m using; they may be incorrect; I’ve checked the functions on vtk.js github, the Reslice class reference, and the documentation.
Could you please check the code and let me know what is wrong with it?
Here’s the code for the html and script files.
template.html
<div>
<v-container :class="$style.container" class="black">
<v-layout wrap align-center>
<v-flex xs12>
<source-select
label="Target volume"
:filterFunc="resliceFilterImages"
bindToActiveSource
hideIfOneDataset
@input="setTargetVolume"
/>
</v-flex>
</v-layout>
</v-container>
<v-container :class="$style.container" class="black">
<v-layout wrap align-center>
<template v-if="enabled">
<v-btn text @click="disable">
<v-icon left>mdi-cursor</v-icon>
Hide
</v-btn>
</template>
<template v-else>
<v-btn text @click="enable" :disabled="!canReslice" class="white--text">
<v-icon left color="white">mdi-plus</v-icon>
Reslice
</v-btn>
</template>
<v-spacer />
<v-btn @click="reset" text class="white--text">
<v-icon left color="white">mdi-replay</v-icon>
Reset
</v-btn>
</v-layout>
</v-container>
</div>
Script.js
import { mapState, mapActions } from 'vuex';
import SourceSelect from 'glance/src/components/widgets/SourceSelect';
import { getCropFilter, makeSubManager } from 'glance/src/utils';
export default {
name: 'ResliceCursor',
components: {
SourceSelect,
},
props: ['enabled'],
data() {
return {
targetVolumeId: -1,
widgetId: -1,
canReset: false,
};
},
computed: {
targetVolume() {
return this.$proxyManager.getProxyById(this.targetVolumeId);
},
resliceProxy() {
return this.$proxyManager.getProxyById(this.widgetId);
},
canReslice() {
return this.targetVolumeId > -1;
},
...mapState('widgets', {
allResliceStates: 'resliceStates',
}),
},
watch: {
enabled(enabled) {
if (enabled) {
const resliceFilter = this.getCropFilter(this.targetVolume);
let resliceProxy = this.resliceProxy;
if (!resliceProxy) {
resliceProxy = this.$proxyManager
.getProxyInGroup('Widgets')
.find((w) => w.getProxyName() === 'ResliceCursor');
if (!resliceProxy) {
resliceProxy = this.$proxyManager.createProxy('Widgets', 'ResliceCursor');
}
this.widgetId = resliceProxy.getProxyId();
}
const widget = resliceProxy.getWidget();
const widgetState = resliceProxy.getWidgetState();
widget.updateCameraPoints(false);
const imageData = this.targetVolume.getDataset();
widget.setImage(imageData);
widget.placeWidget(imageData.getBounds());
if(resliceFilter.isResetAvailable()) {
const state = widgetState.updateReslice();
state.setPlanes(resliceFilter.updateReslice());
}
const resliceState = widgetState.updateReslice();
this.state.sub(
resliceState.onModified(() => {
const reslicer = resliceState.getPlanes();
resliceFilter.updateReslice(reslicer);
this.canReset = resliceFilter.isResetAvailable();
this.storeResliceState(this.targetVolumeId, reslicer);
})
);
resliceProxy.addToViews();
} else {
this.resliceProxy.removeFromViews();
this.$proxyManager.deleteProxy(this.resliceProxy);
this.widgetId = -1;
this.stateSub.unsub();
}
},
targetVolumeId(id) {
if (this.enabled) {
this.disable();
}
this.canReset = false;
if (id !== -1) {
const resliceFilter = this.getCropFilter(this.targetVolume);
this.canReset = resliceFilter.isResetAvailable();
}
},
},
mounted() {
this.stateSub = makeSubManager();
},
beforeDestroy() {
this.stateSub.unsub();
},
methods: {
resliceFilterImages(source) {
return (
source.getProxyName() === 'TrivialProducer' &&
source.getType() === 'vtkImageData'
);
},
getCropFilter(volProxy) {
return getCropFilter(this.$proxyManager, volProxy);
},
setTargetVolume(sourceId) {
this.targetVolumeId = sourceId;
},
enable() {
this.$emit('enable', true);
console.log("Reslice Button Responding");
},
disable() {
this.$emit('enable', false);
},
reset() {
console.log("Reset Working");
if (this.targetVolume) {
const Rfilter = this.getCropFilter(this.targetVolume);
Rfilter.reset();
this.canReset = false;
if (this.resliceProxy) {
const state = this.resliceProxy.getWidgetState().updateReslice();
state.setPlanes(Rfilter.updateReslice());
}
}
},
storeResliceState(datasetId, data) {
this.setResliceState({ datasetId, data});
},
...mapActions('widgets', ['setResliceState']),
},
}