ImageJScriptEditor.imjoy.html

<config lang="json">
{
  "name": "ImageJScriptEditor",
  "type": "web-worker",
  "tags": [],
  "ui": "",
  "version": "0.1.2",
  "cover": "",
  "description": "A Script Editor for ImageJ.JS",
  "icon": "extension",
  "inputs": null,
  "outputs": null,
  "api_version": "0.1.8",
  "env": "",
  "permissions": [],
  "requirements": [],
  "dependencies": []
}
</config>

<script lang="javascript">
class ImJoyPlugin {
  async setup() {
    api.log('initialized')
  }

  async run(ctx) {
    let pluginInEditor, stopped, editorWindow;
    const config = {lang: 'javascript'}
    config.templates = [
        {
          name: "New",
          url: null,
          lang: 'javascript',
        },
        {
          name: "Sphere",
          url: "https://wsr.imagej.net/download/Examples/Macro/Sphere.ijm",
          lang: 'javascript',
        },
        {
          name: "OpenDialog Demo",
          url: "https://wsr.imagej.net/download/Examples/Macro/OpenDialog_Demo.ijm",
          lang: 'javascript',
        },
        {
          name: "Overlay",
          url: "https://wsr.imagej.net/download/Examples/Macro/Overlay.ijm",
          lang: 'javascript',
        },
        {
          name: "ImJoy window",
          url:
            "https://raw.githubusercontent.com/imjoy-team/ImJoy/master/web/src/plugins/windowTemplate.imjoy.html",
          lang: 'html',
        },
        {
          name: "ImJoy web-worker",
          url:
            "https://raw.githubusercontent.com/imjoy-team/ImJoy/master/web/src/plugins/webWorkerTemplate.imjoy.html",
          lang: 'html',
        },
        {
          name: "ImJoy web-python",
          url:
            "https://raw.githubusercontent.com/imjoy-team/ImJoy/master/web/src/plugins/webPythonTemplate.imjoy.html",
          lang: 'html',
        },
        {
          name: "ImJoy native-python",
          url:
            "https://raw.githubusercontent.com/imjoy-team/ImJoy/master/web/src/plugins/nativePythonTemplate.imjoy.html",
          lang: 'html',
        }
      ]
    config.ui_elements = {
      save: {
          _rintf: true,
          type: 'button',
          label: "Save",
          visible: false,
          icon: "content-save",
          callback(content) {
              console.log(content)
          }
      },
       lang: {
          _rintf: true,
          type: 'dropdown',
          label: "Type",
          icon: "file-download-outline",
          visible: true,
          items: [
            {label: 'ImageJ Macro', async callback(){
              await editorWindow.setLang('javascript');
            }},
            {label: 'ImJoy Plugin', async callback(){
              await editorWindow.setLang('html');
            }},
          ],
      },
      run: {
          _rintf: true,
          type: 'button',
          label: "Run",
          icon: "play",
          visible: true,
          shortcut: 'Shift-Enter',
          async callback(content) {
              try {
                  const isHTML = content.trim().startsWith('<')
                  editorWindow.setLoader(true);
                  editorWindow.updateUIElement('stop', {
                      visible: true
                  })
                  api.showProgress(0);
                  if(isHTML)
                  pluginInEditor = await api.getPlugin({src: content, hot_reloading: false})
                  else{
                    const ij = await api.getWindow("ImageJ.JS");
                    await ij.runMacro(content)
                  }
                  if (stopped) {
                      pluginInEditor = null;
                      return;
                  }
                  if (pluginInEditor && pluginInEditor.run) {
                      return await pluginInEditor.run({
                          config: {},
                          data: {}
                      });
                  }
                  if (stopped) {
                      pluginInEditor = null;
                      return;
                  }
              } catch (e) {
                  api.showMessage("Failed to load plugin, error: " + e.toString());
              } finally {
                  editorWindow.updateUIElement('stop', {
                      visible: false
                  })
                  editorWindow.setLoader(false);
                  api.showProgress(100);
              }
          }
      },
      stop: {
          _rintf: true,
          type: 'button',
          label: "Stop",
          style: "color: #ff0080cf;",
          icon: "stop",
          visible: false,
          async callback() {
              stopped = true;
              await editorWindow.setLoader(false);
              await editorWindow.updateUIElement('stop', {
                  visible: false
              })
          }
      },
      export: {
          _rintf: true,
          type: 'button',
          label: "Export",
          icon: "file-download-outline",
          visible: true,
          async callback(content) {
              const isHTML = content.trim().startsWith('<')
              if(isHTML){
                const fileName = (pluginInEditor && pluginInEditor.config.name && pluginInEditor.config.name + '.imjoy.html') || config.name + '.imjoy.html' || "myPlugin.imjoy.html";
                await api.exportFile(content, fileName);
              }
              else{
                const fileName = await api.prompt("Save as", "MyMacro.ijm")
                if(fileName) await api.exportFile(content, fileName);
              }
          }
      }
    }
    editorWindow = await api.createWindow({
        src: 'https://if.imjoy.io',
        name: (ctx && ctx.data && ctx.data.name) ||'ImageJ Script Editor',
        config,
        data: {code: ctx && ctx.data && ctx.data.code}
    })
  }
}

api.export(new ImJoyPlugin())
</script>