diff --git a/demo/src/index.js b/demo/src/index.js index 2284b30718fdf0bcc974e8bdc4863119d78cfdc8..a96301518568e568d6488b75af7049b5769fca6e 100644 --- a/demo/src/index.js +++ b/demo/src/index.js @@ -11,6 +11,7 @@ const config = { exportLocalStorageAnnotations: false, // display annotation JSON export button }, catalog: [ + { manifestIf: 'https://files.tetras-libre.fr/dev/Clock/manifest.json'}, { manifestId: 'https://files.tetras-libre.fr/dev/Hakanai/manifest/manifest.json' }, { manifestId: 'https://dzkimgs.l.u-tokyo.ac.jp/videos/iiif_in_japan_2017/manifest.json' }, { manifestId: 'https://iiif.io/api/cookbook/recipe/0219-using-caption-file/manifest.json' }, diff --git a/src/AnnotationCreationUtils.js b/src/AnnotationCreationUtils.js index 4cf911067a44f13960f58c9d580912d67e493690..56607591b0ea4491e0a9b8422054ab0935020ce3 100644 --- a/src/AnnotationCreationUtils.js +++ b/src/AnnotationCreationUtils.js @@ -57,24 +57,42 @@ export async function getSvg(windowId) { return svg; }; + +const dumbAnnotation = { + "id": "https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/canvas/annotation/1", + "type": "Annotation", + "motivation": "commenting", + "body": { + "id": "https://files.tetras-libre.fr/dev/Hakanai/media/02_HKN-couv.jpg", + "type": "Image", + "format": "image/jpg", + "value": "Test image annotation" + }, + "target": "https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/canvas#xywh=0,0,301,400&t=0,1000" + } + ; + export function saveAnnotation(canvases, config, receiveAnnotation, annotation, body, t, xywh, image, drawingStateSerialized, svg, tags){ // TODO promises not handled. Use promiseAll ? canvases.forEach(async (canvas) => { const storageAdapter = config.annotation.adapter(canvas.id); - const anno = new WebAnnotation({ - body, - canvasId: canvas.id, - fragsel: { - t, - xywh, - }, - id: (annotation && annotation.id) || `${uuid()}`, - image, - drawingStateSerialized, - manifestId: canvas.options.resource.id, - svg, - tags, - }).toJson(); + // const anno = new WebAnnotation({ + // body, + // canvasId: canvas.id, + // fragsel: { + // t, + // xywh, + // }, + // id: (annotation && annotation.id) || `${uuid()}`, + // image, + // drawingStateSerialized, + // manifestId: canvas.options.resource.id, + // svg, + // tags, + // }).toJson(); + + const anno = dumbAnnotation; + anno.drawingState = drawingStateSerialized; if (annotation) { storageAdapter.update(anno) diff --git a/src/WebAnnotation.js b/src/WebAnnotation.js index 90acaacee19a4d2416ee29a1894acd9addcffbe7..cfe8dacce9732796f24f052b7b96ebc7fe463161 100644 --- a/src/WebAnnotation.js +++ b/src/WebAnnotation.js @@ -2,32 +2,31 @@ export default class WebAnnotation { /** */ constructor({ - canvasId, id, fragsel, image, body, tags, svg, manifestId, drawingStateSerialized + id, body, drawingStateSerialized, motivation, target, }) { this.id = id; - this.canvasId = canvasId; - this.fragsel = fragsel; + this.type = 'Annotation'; + this.motivation = motivation; this.body = body; - this.tags = tags; - this.svg = svg; - //this.image = image; - this.image = image; - this.manifestId = manifestId; this.drawingState = drawingStateSerialized; + this.target = target; console.log('WebAnnotation constructor', this); } /** */ toJson() { - const result = { - body: this.createBody(), - id: this.id, - motivation: 'commenting', - target: this.target(), - type: 'Annotation', - drawingState: this.drawingState, - }; + // const result = { + // body: this.createBody(), + // drawingState: this.drawingState, + // id: this.id, + // motivation: 'commenting', + // target: this.target(), + // type: 'Annotation', + // }; + + const result = this; + console.log('WebAnnotation toJson', result); return result; } diff --git a/src/WebAnnotationOld.js b/src/WebAnnotationOld.js new file mode 100644 index 0000000000000000000000000000000000000000..90acaacee19a4d2416ee29a1894acd9addcffbe7 --- /dev/null +++ b/src/WebAnnotationOld.js @@ -0,0 +1,117 @@ +/** */ +export default class WebAnnotation { + /** */ + constructor({ + canvasId, id, fragsel, image, body, tags, svg, manifestId, drawingStateSerialized + }) { + this.id = id; + this.canvasId = canvasId; + this.fragsel = fragsel; + this.body = body; + this.tags = tags; + this.svg = svg; + //this.image = image; + this.image = image; + this.manifestId = manifestId; + this.drawingState = drawingStateSerialized; + + console.log('WebAnnotation constructor', this); + } + + /** */ + toJson() { + const result = { + body: this.createBody(), + id: this.id, + motivation: 'commenting', + target: this.target(), + type: 'Annotation', + drawingState: this.drawingState, + }; + console.log('WebAnnotation toJson', result); + return result; + } + + /** */ + createBody() { + let bodies = []; + if (this.body && this.body.value !== '') { + const textBody = { + type: 'TextualBody', + value: this.body.value, + }; + bodies.push(textBody); + } + + if (this.image) { + // TODO dumb image { this.image.id} + const imgBody = { + id: 'https://tetras-libre.fr/themes/tetras/img/logo.svg', + type: 'Image', + format: 'image/svg+xml', + }; + //bodies.push(imgBody); + const testImageBody = { + "id": "https://files.tetras-libre.fr/dev/Hakanai/media/10_HKN-Garges_A2B4243.JPG", + "type": "Image", + "format": "image/jpg" + }; + bodies.push(testImageBody); + } + + // if (this.tags) { + // bodies = bodies.concat(this.tags.map((tag) => ({ + // purpose: 'tagging', + // type: 'TextualBody', + // value: tag, + // }))); + // } + if (bodies.length === 1) { + return bodies[0]; + } + return bodies; + } + + /** Fill target object with selectors (if any), else returns target url */ + target() { + if (!this.svg + && (!this.fragsel || !Object.values(this.fragsel).find((e) => e !== null))) { + return this.canvasId; + } + const target = { source: this.source() }; + const selectors = []; + if (this.svg) { + selectors.push({ + type: 'SvgSelector', + value: this.svg, + }); + } + if (this.fragsel) { + selectors.push({ + type: 'FragmentSelector', + value: Object.entries(this.fragsel) + .filter((kv) => kv[1]) + .map((kv) => `${kv[0]}=${kv[1]}`) + .join('&'), + }); + } + target.selector = selectors.length === 1 ? selectors[0] : selectors; + return target; + } + + /** */ + source() { + let source = this.canvasId; + if (this.manifest) { + source = { + id: this.canvasId, + partOf: { + id: this.manifest.id, + type: 'Manifest', + }, + type: 'Canvas', + }; + } + return source; + } +}