ImageViewerServices.imjoy.html

<docs>
[TODO: write documentation for this plugin.]
</docs>

<config lang="json">
{
  "name": "ImageViewerServices",
  "type": "web-worker",
  "tags": [],
  "ui": "",
  "version": "0.1.0",
  "cover": "",
  "description": "Register image viewer services for elFinder",
  "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) {
    function urlToBase64(url){
			return new Promise(async (resolve, reject)=>{
				const response = await fetch(url)
				const blob = await response.blob()
				const reader = new FileReader() ;
				reader.onload = function(){ resolve(this.result) } ;
				reader.onerror = reject
				reader.readAsDataURL(blob) ;
			})
		}
		await api.registerService({
			type: '#file-loader',
			name: 'ITK/VTK Viewer',
			async check(fileObj){
				if(fileObj.mime.startsWith('image/tiff')){
					return true
				}
			},
			async load({url, window_id}){
				console.log('https://kitware.github.io/itk-vtk-viewer/app/?fileToLoad='+url)
				await api.createWindow({src: 'https://kitware.github.io/itk-vtk-viewer/app/?fileToLoad='+url, window_id})
			}
		})
		await api.registerService({
			type: '#file-loader',
			name: 'Kaibu',
			icon: 'https://kaibu.org/static/img/kaibu-icon.svg',
			async check(fileObj){
				if(fileObj.mime.startsWith('image/') || fileObj.mime === 'directory'){
					return true
				}
			},
			async load({source, type, window_id}){
				if(type === 'file'){
					const base64 = await urlToBase64(source.url)
					const viewer = await api.createWindow({src: 'https://kaibu.org/', window_id, w: 10, h: 10})
					await viewer.view_image(base64, {name: source.name});
					await viewer.add_shapes([], {name: 'annotation'})
				}
				else if(type === 'directory'){
					const viewer = await api.createWindow({src: 'https://kaibu.org/', window_id, w: 10, h: 10})
					source = source.filter(file => file.mime.startsWith('image/'))
					const nodes = source.map(file => {return {"title": file.name, "data": file, "isLeaf": true}})
					await viewer.add_widget({
						"_rintf": true,
						"type": "tree",
						"name": "Files",
						"node_dbclick_callback": async (node)=>{
							await viewer.clear_layers()
							const file = node.data
							const base64 = await urlToBase64(file.url)
							await viewer.view_image(base64, {name: file.name})
						},
						"nodes": nodes,
					})
					await viewer.add_shapes([], {name: 'annotation'})
				}

			}
		})
      await api.showMessage("Image viewer services registered")
  }
}

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