Bump minimist and mkdirp

src/annotations-store.js

@@ -16,6 +16,7 @@ class AnnotationsStore {
 		this._annotations = options.annotations;
 		this._onSave = options.onSave;
 		this._onDelete = options.onDelete;
+		this._onSaveImage = options.onSaveImage;
 		this.render = () => {
 			this._annotations.sort((a, b) => (a.sortIndex > b.sortIndex) - (a.sortIndex < b.sortIndex));
 			options.onRender(this._annotations);
@@ -65,9 +66,7 @@ class AnnotationsStore {
 
 		for (let annotation of annotations) {
 			if (['image', 'ink'].includes(annotation.type) && !annotation.image) {
-				annotation.image = await this.getAnnotationImage(annotation.id);
-				this._save(annotation, true);
-				this.render();
+				await this._renderAndSaveImageOnly(annotation);
 			}
 		}
 	}
@@ -248,6 +247,20 @@ class AnnotationsStore {
 		return randomstring;
 	}
 
+	async _renderAndSaveImageOnly(annotation) {
+		let image = await this.getAnnotationImage(annotation.id);
+		if (image) {
+			this._onSaveImage({ id: annotation.id, image });
+			annotation.image = image;
+			let oldIndex = this._annotations.findIndex(x => x.id === annotation.id);
+			if (oldIndex !== -1) {
+				annotation = { ...annotation };
+				this._annotations.splice(oldIndex, 1, annotation);
+			}
+			this.render();
+		}
+	}
+
 	_save(annotation, instant) {
 		let oldIndex = this._annotations.findIndex(x => x.id === annotation.id);
 		if (oldIndex !== -1) {
@@ -274,11 +287,15 @@ class AnnotationsStore {
 	}
 
 	async _renderMissingImages() {
+		if (this._renderingTriggered) {
+			return;
+		}
+		else {
+			this._renderingTriggered = true;
+		}
 		for (let annotation of this._annotations) {
 			if (['image', 'ink'].includes(annotation.type) && !annotation.image) {
-				annotation.image = await this.getAnnotationImage(annotation.id);
-				this._save(annotation, true);
-				this.render();
+				await this._renderAndSaveImageOnly(annotation);
 			}
 		}
 	}
@@ -287,9 +304,7 @@ class AnnotationsStore {
 		for (let annotation of this._annotations) {
 			if (pageIndexes.includes(annotation.position.pageIndex)
 				&& ['image', 'ink'].includes(annotation.type)) {
-				annotation.image = await this.getAnnotationImage(annotation.id);
-				this._save(annotation, true);
-				this.render();
+				await this._renderAndSaveImageOnly(annotation);
 			}
 		}
 	}

src/en-us.strings.js

@@ -86,6 +86,9 @@ export default {
 	'general.green': 'Green',
 	'general.blue': 'Blue',
 	'general.purple': 'Purple',
+	'general.magenta': 'Magenta',
+	'general.orange': 'Orange',
+	'general.gray': 'Gray',
 	'general.showInLibrary': 'Show in Library',
 	'pdfReader.annotations': 'Annotations',
 	'pdfReader.showAnnotations': 'Show Annotations',

src/index.dev.js

@@ -121,6 +121,9 @@ class ViewerInstance {
 			onDeleteAnnotations: function (ids) {
 				console.log('Delete annotations', JSON.stringify(ids));
 			},
+			onSaveImage: (annotation) => {
+				console.log('Saving image', annotation);
+			},
 			onSetState: function (state) {
 				console.log('Set state', state);
 			},

src/index.web.js

@@ -69,6 +69,8 @@ class ViewerInstance {
 			onDeleteAnnotations: (ids) => {
 				this._postMessage({ action: 'deleteAnnotations', ids });
 			},
+			onSaveImage: (annotation) => {
+			},
 			onSetState: (state) => {
 				this._postMessage({ action: 'setState', state });
 			},

src/index.zotero.js

@@ -59,6 +59,9 @@ class ViewerInstance {
 			onDeleteAnnotations: (ids) => {
 				this._postMessage({ action: 'deleteAnnotations', ids });
 			},
+			onSaveImage: (annotation) => {
+				this._postMessage({ action: 'saveImage', annotation });
+			},
 			onSetState: (state) => {
 				this._postMessage({ action: 'setState', state });
 			},

src/lib/colors.js

@@ -5,7 +5,10 @@ export let annotationColors = [
 	['general.red', '#ff6666'],
 	['general.green', '#5fb236'],
 	['general.blue', '#2ea8e5'],
-	['general.purple', '#a28ae5']
+	['general.purple', '#a28ae5'],
+	['general.magenta', '#e56eee'],
+	['general.orange', '#f19837'],
+	['general.gray', '#aaaaaa']
 ];
 
 export let selectionColor = navigator.platform.includes('Mac') ? '#71ADFD' : 'Highlight';

src/viewer.js

@@ -35,6 +35,7 @@ class Viewer {
 			annotations: options.annotations,
 			onSave: options.onSaveAnnotations,
 			onDelete: options.onDeleteAnnotations,
+			onSaveImage: options.onSaveImage,
 			onRender: (annotations) => {
 				this.annotatorRef.current.setAnnotations([...annotations]);
 			}