diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/imjoyContent.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/imjoyContent.vue index a4681a03..18a0a4a2 100644 --- a/openflexure_microscope/api/static/src/components/tabContentComponents/imjoyContent.vue +++ b/openflexure_microscope/api/static/src/components/tabContentComponents/imjoyContent.vue @@ -26,6 +26,24 @@ v-if="Object.keys(loadedPlugins).length > 0" class="uk-nav-divider" > +
  • + ImageJ.JS icon ImageJ.JS +
  • +
  • + Kaibu icon Kaibu +
  • {{ w.name }}
    +
    + +
    @@ -69,7 +96,7 @@ export default { components: {}, data() { return { - windows: {}, + windows: [], loading: false, loadedPlugins: {}, activeWindow: null, @@ -95,17 +122,49 @@ export default { closeActiveWindow() { if (this.activeWindow) { this.activeWindow.api.close(); - this.activeWindow = null; + const index = this.windows.indexOf(this.activeWindow); + if (index > -1) { + this.windows.splice(index, 1); + } + if (this.windows.length > 0) { + this.activeWindow = this.windows[this.windows.length - 1]; + } else { + this.activeWindow = null; + } } }, selectWindow(name) { - for (let w of Object.values(this.windows)) { + for (let w of this.windows) { if (w.name === name) { this.activeWindow = w; break; } } }, + async startKaibu() { + this.viewers.kaibu = await this.imjoy.pm.createWindow(null, { + name: "Kaibu", + src: "https://kaibu.org/#/app" + }); + this.viewers.kaibu.on("close", () => { + delete this.viewers.kaibu; + }); + this.selectWindow("Kaibu"); + }, + async startImageJ() { + this.viewers.imagej = await this.imjoy.pm.createWindow(null, { + name: "ImageJ.JS", + src: "https://ij.imjoy.io" + }); + this.viewers.imagej.on("close", () => { + delete this.viewers.imagej; + }); + // load the ITK/VTK viewer for imagej.js + this.loadPlugin( + "https://gist.githubusercontent.com/oeway/e5c980fbf6582f25fde795262a7e33ec/raw/itk-vtk-viewer-imagej.imjoy.html" + ); + this.selectWindow("ImageJ.JS"); + }, async setupViewers() { this.loading = true; // TODO: improve this using the ImJoy `api.getServices` @@ -116,13 +175,13 @@ export default { // And this can be used for render our "Open In ImJoy" menu try { const self = this; - this.viewers.kaibu = await this.imjoy.pm.createWindow(null, { - name: "Kaibu", - src: "https://kaibu.org/#/app" - }); + this.$store.commit("addOpenInImjoyMenuItem", { title: "Kaibu", async callback(name, imageUrl) { + if (!self.viewers.kaibu) { + await self.startKaibu(); + } self.selectWindow("Kaibu"); const viewer = self.viewers.kaibu; viewer.set_mode("full"); @@ -130,15 +189,13 @@ export default { await viewer.add_shapes([]); } }); - this.viewers.imagej = await this.imjoy.pm.createWindow(null, { - name: "ImageJ.JS", - src: "https://ij.imjoy.io" - }); - // load the ITK/VTK viewer for imagej.js - this.loadPlugin("https://gist.githubusercontent.com/oeway/e5c980fbf6582f25fde795262a7e33ec/raw/itk-vtk-viewer-imagej.imjoy.html"); + this.$store.commit("addOpenInImjoyMenuItem", { title: "ImageJ.JS", async callback(name, imageUrl) { + if (!self.viewers.imagej) { + await self.startImageJ(); + } self.selectWindow("ImageJ.JS"); const viewer = self.viewers.imagej; const response = await fetch(imageUrl); @@ -155,8 +212,8 @@ export default { } }, addWindow(w) { - this.windows = this.windows || {}; - this.windows[w.window_id] = w; + this.windows = this.windows || []; + this.windows.push(w); this.activeWindow = w; this.$forceUpdate(); },