From aae90e2c62743b1fe00d666d0f13ddf48d253046 Mon Sep 17 00:00:00 2001 From: Rainer Simon Date: Thu, 22 Sep 2022 10:02:46 +0200 Subject: [PATCH] Closes #14 --- package-lock.json | 47 +++++++++++++++++++++++++++++++------ package.json | 3 ++- public/annotations.w3c.json | 9 +++++-- public/index.html | 2 +- src/NetworkCanvas.js | 7 ++++-- src/NetworkEdge.js | 5 +++- 6 files changed, 59 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index 906c15a..6cad67d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,8 @@ "@recogito/recogito-client-core": "^1.6.0", "@svgdotjs/svg.js": "^3.1.1", "perfect-arrows": "^0.3.7", - "tiny-emitter": "^2.1.0" + "tiny-emitter": "^2.1.0", + "uuid": "^9.0.0" }, "devDependencies": { "@babel/plugin-proposal-class-properties": "^7.16.0", @@ -1863,6 +1864,14 @@ "url": "https://github.com/sponsors/rsimon" } }, + "node_modules/@recogito/recogito-client-core/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/@svgdotjs/svg.js": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/@svgdotjs/svg.js/-/svg.js-3.1.1.tgz", @@ -6138,6 +6147,15 @@ "websocket-driver": "^0.7.4" } }, + "node_modules/sockjs/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "dev": true, + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", @@ -6583,9 +6601,9 @@ } }, "node_modules/uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz", + "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==", "bin": { "uuid": "dist/bin/uuid" } @@ -8335,6 +8353,13 @@ "regenerator-runtime": "^0.13.9", "timeago-react": "^3.0.2", "uuid": "^8.3.2" + }, + "dependencies": { + "uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" + } } }, "@svgdotjs/svg.js": { @@ -11620,6 +11645,14 @@ "faye-websocket": "^0.11.3", "uuid": "^8.3.2", "websocket-driver": "^0.7.4" + }, + "dependencies": { + "uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "dev": true + } } }, "source-map": { @@ -11941,9 +11974,9 @@ "dev": true }, "uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz", + "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==" }, "vary": { "version": "1.1.2", diff --git a/package.json b/package.json index c88391d..6e1331d 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "@recogito/recogito-client-core": "^1.6.0", "@svgdotjs/svg.js": "^3.1.1", "perfect-arrows": "^0.3.7", - "tiny-emitter": "^2.1.0" + "tiny-emitter": "^2.1.0", + "uuid": "^9.0.0" } } diff --git a/public/annotations.w3c.json b/public/annotations.w3c.json index dc33d3e..ad6a201 100644 --- a/public/annotations.w3c.json +++ b/public/annotations.w3c.json @@ -101,8 +101,13 @@ { "@context": "http://www.w3.org/ns/anno.jsonld", "type": "Annotation", - "id": "#570a0a77-28d2-4c05-ab5f-5a098df52f5e", - "body": [], + "id": "#relation-1", + "body": [{ + "type": "TextualBody", + "value": "MyTag", + "purpose": "tagging" + }], + "motivation": "linking", "target": [ { "id": "#1" diff --git a/public/index.html b/public/index.html index 340ef1b..d9f37de 100644 --- a/public/index.html +++ b/public/index.html @@ -78,7 +78,7 @@

Homer: The Odyssey

console.log('deleted', c); }); - // r.loadAnnotations('annotations.w3c.json'); + r.loadAnnotations('annotations.w3c.json'); }; diff --git a/src/NetworkCanvas.js b/src/NetworkCanvas.js index d34df40..95f72b8 100644 --- a/src/NetworkCanvas.js +++ b/src/NetworkCanvas.js @@ -1,5 +1,6 @@ import { SVG } from '@svgdotjs/svg.js'; import EventEmitter from 'tiny-emitter'; +import { v4 as uuid } from 'uuid'; import NetworkEdge from './NetworkEdge'; import NetworkNode from './NetworkNode'; @@ -144,7 +145,9 @@ export default class NetworkCanvas extends EventEmitter { onCompleteConnection = () => { const { start, end } = this.currentFloatingEdge; - const edge = new NetworkEdge(start, end); + const id = `#${uuid()}`; + + const edge = new NetworkEdge(id, start, end); const annotation = edge.toAnnotation(); @@ -236,7 +239,7 @@ export default class NetworkCanvas extends EventEmitter { setAnnotations = annotations => annotations.forEach(a => { const start = NetworkNode.findById(a.targets[0].id); const end = NetworkNode.findById(a.targets[1].id); - this.addEdge(new NetworkEdge(start, end)); + this.addEdge(new NetworkEdge(a.id, start, end)); }); unregisterInstance = instance => diff --git a/src/NetworkEdge.js b/src/NetworkEdge.js index fb977ad..30ce3db 100644 --- a/src/NetworkEdge.js +++ b/src/NetworkEdge.js @@ -2,7 +2,9 @@ import WebAnnotation from '@recogito/recogito-client-core/src/WebAnnotation'; export default class NetworkEdge { - constructor(start, end) { + constructor(id, start, end) { + this.id = id; + this.start = start; this.end = end; @@ -20,6 +22,7 @@ export default class NetworkEdge { } toAnnotation = () => WebAnnotation.create({ + id: this.id, body: this.bodies, motivation: 'linking', target: [