28 |
28 |
32 |
33 |
44 |
45 |
46 | ```
47 |
48 | __Or via npm:__
49 |
50 | ```
51 | $ npm i @recogito/annotorious-better-polygon
52 | ```
53 |
54 | __Import and initialize:__
55 |
56 | ```js
57 | import BetterPolygon from '@recogito/annotorious-better-polygon';
58 |
59 | //...
60 |
61 | BetterPolygon(anno);
62 | ```
63 |
64 |
--------------------------------------------------------------------------------
/plugins/annotorious-better-polygon/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@recogito/annotorious-better-polygon",
3 | "version": "0.2.1",
4 | "description": "An improved polygon editing tool with more features and better usability",
5 | "main": "dist/annotorious-better-polygon.js",
6 | "scripts": {
7 | "start": "webpack serve --open --mode=development",
8 | "build": "webpack --mode=production"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "git+https://github.com/recogito/recogito-client-plugins.git"
13 | },
14 | "author": "Rainer Simon",
15 | "license": "BSD-3-Clause",
16 | "bugs": {
17 | "url": "https://github.com/recogito/recogito-client-plugins/issues"
18 | },
19 | "homepage": "https://github.com/recogito/recogito-client-plugins/tree/main/plugins/annotorious-better-polygon",
20 | "devDependencies": {
21 | "@babel/core": "^7.15.8",
22 | "@babel/plugin-proposal-class-properties": "^7.14.5",
23 | "@babel/preset-env": "^7.15.8",
24 | "babel-loader": "^8.2.3",
25 | "css-loader": "^6.5.0",
26 | "html-webpack-plugin": "^5.5.0",
27 | "style-loader": "^3.3.1",
28 | "webpack": "^5.60.0",
29 | "webpack-cli": "^4.9.1",
30 | "webpack-dev-server": "^4.3.1"
31 | },
32 | "dependencies": {
33 | "@recogito/annotorious": "^2.5.9"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/plugins/annotorious-better-polygon/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
28 | 
17 |
18 |
19 |
28 |
29 |
--------------------------------------------------------------------------------
/plugins/annotorious-find-contours/src/index.js:
--------------------------------------------------------------------------------
1 | /*************************************************************************
2 | *
3 | * Basic concept for this is from the official OpenCV docs:
4 | * https://docs.opencv.org/3.4/dc/dcf/tutorial_js_contour_features.html
5 | *
6 | *************************************************************************/
7 |
8 | /**
9 | * Helper: chunks an array (i.e array to array of arrays)
10 | */
11 | const chunk = (array, size) => {
12 | const chunked_arr = [];
13 |
14 | let index = 0;
15 | while (index < array.length) {
16 | chunked_arr.push(array.slice(index, size + index));
17 | index += size;
18 | }
19 |
20 | return chunked_arr;
21 | }
22 |
23 | /**
24 | * Renders intermediate OpenCV results into a 'debug DIV'
25 | */
26 | const renderDebugImages = (canvasInput, src, polygons, hierarchy, div) => {
27 | const dst = cv.Mat.zeros(src.rows, src.cols, cv.CV_8UC3);
28 |
29 | const color = new cv.Scalar(
30 | Math.round(Math.random() * 255),
31 | Math.round(Math.random() * 255),
32 | Math.round(Math.random() * 255));
33 |
34 | cv.drawContours(dst, polygons, -1, color, 1, 8, hierarchy, 0);
35 |
36 | const mask = document.createElement('CANVAS');
37 | mask.width = canvasInput.width;
38 | mask.height = canvasInput.height;
39 | cv.imshow(mask, src);
40 |
41 | div.appendChild(mask);
42 |
43 | const output = document.createElement('CANVAS');
44 | output.width = canvasInput.width;
45 | output.height = canvasInput.height;
46 | cv.imshow(output, dst);
47 |
48 | div.appendChild(output);
49 |
50 | dst.delete();
51 | }
52 |
53 | /**
54 | * Computer vision magic happens here
55 | */
56 | const findContourPolygon = (canvasInput, debugDiv) => {
57 | const src = cv.imread(canvasInput);
58 |
59 | // Convert to grayscale & threshold
60 | cv.cvtColor(src, src, cv.COLOR_RGB2GRAY, 0);
61 | cv.threshold(src, src, 120, 200, cv.THRESH_BINARY + cv.THRESH_OTSU);
62 |
63 | // Find contours
64 | const contours = new cv.MatVector();
65 | const hierarchy = new cv.Mat();
66 |
67 | cv.findContours(src, contours, hierarchy, cv.RETR_CCOMP, cv.CHAIN_APPROX_SIMPLE);
68 |
69 | let poly = new cv.MatVector();
70 |
71 | for (let i = 0; i < contours.size(); ++i) {
72 | let tmp = new cv.Mat();
73 | let cnt = contours.get(i);
74 | // You can try more different parameters
75 | cv.convexHull(cnt, tmp, false, true);
76 | poly.push_back(tmp);
77 | cnt.delete(); tmp.delete();
78 | }
79 |
80 | // draw contours with random Scalar
81 | const dst = cv.Mat.zeros(src.rows, src.cols, cv.CV_8UC3);
82 | for (let i = 0; i < contours.size(); ++i) {
83 | let color = new cv.Scalar(Math.round(Math.random() * 255), Math.round(Math.random() * 255),
84 | Math.round(Math.random() * 255));
85 | cv.drawContours(dst, poly, i, color, 1, 8, hierarchy, 0);
86 | }
87 |
88 | const output = document.createElement('CANVAS');
89 | output.width = canvasInput.width;
90 | output.height = canvasInput.height;
91 | cv.imshow(output, dst);
92 | debugDiv.appendChild(output);
93 |
94 | src.delete(); dst.delete(); hierarchy.delete(); contours.delete(); poly.delete();
95 |
96 | /*
97 | const dst = cv.Mat.zeros(src.rows, src.cols, cv.CV_8UC3);
98 | for (let i = 0; i < contours.size(); ++i) {
99 | let color = new cv.Scalar(Math.round(Math.random() * 255), Math.round(Math.random() * 255),
100 | Math.round(Math.random() * 255));
101 | cv.drawContours(dst, contours, i, color, 1, cv.LINE_8, hierarchy, 100);
102 | }
103 |
104 |
105 | */
106 |
107 | // Approximate closed polygons, keep only the largest
108 | // let largestAreaPolygon = { area: 0 };
109 |
110 | /*
111 | const polygons = new cv.MatVector();
112 |
113 | for (let i = 0; i < contours.size(); ++i) {
114 | const polygon = new cv.Mat();
115 | const contour = contours.get(i);
116 |
117 | cv.approxPolyDP(contour, polygon, 3, true);
118 |
119 | // polygons.push_back(polygon);
120 |
121 | // Compute contour areas
122 | const area = cv.contourArea(polygon);
123 |
124 | // if (area > largestAreaPolygon.area)
125 | largestAreaPolygon = { area, polygon };
126 |
127 | // contour.delete();
128 | // polygon.delete();
129 | }
130 |
131 | polygons.push_back(largestAreaPolygon.polygon);
132 |
133 | // if (debugDiv)
134 | // renderDebugImages(canvasInput, src, polygons, hierarchy,debugDiv);
135 |
136 | src.delete();
137 |
138 | hierarchy.delete();
139 | contours.delete();
140 | polygons.delete();
141 | */
142 |
143 | // return chunk(largestAreaPolygon.polygon.data32S, 2);
144 | }
145 |
146 | const FindContours = (anno, debugDiv) => {
147 |
148 | anno.on('createSelection', async function() {
149 | const { snippet, transform } = anno.getSelectedImageSnippet();
150 |
151 | const localCoords = findContourPolygon(snippet, debugDiv);
152 | const coords = localCoords.map(xy => transform(xy));
153 |
154 | const annotation = {
155 | "@context": "http://www.w3.org/ns/anno.jsonld",
156 | "id": "#a88b22d0-6106-4872-9435-c78b5e89fede",
157 | "type": "Annotation",
158 | "body": [],
159 | "target": {
160 | "selector": [{
161 | "type": "SvgSelector",
162 | "value": ``
163 | }]
164 | }
165 | }
166 |
167 | setTimeout(function() {
168 | anno.setAnnotations([ annotation ]);
169 | anno.selectAnnotation(annotation);
170 | }, 10);
171 | });
172 |
173 | }
174 |
175 | export default FindContours;
--------------------------------------------------------------------------------
/plugins/annotorious-find-contours/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const fs = require('fs');
3 |
4 | const HtmlWebpackPlugin = require('html-webpack-plugin');
5 |
6 | const APP_DIR = fs.realpathSync(process.cwd());
7 |
8 | const resolveAppPath = relativePath => path.resolve(APP_DIR, relativePath);
9 |
10 | module.exports = {
11 | entry: resolveAppPath('src'),
12 | output: {
13 | filename: 'annotorious-find-contours.min.js',
14 | library: ['Annotorious', 'FindContours'],
15 | libraryTarget: 'umd',
16 | libraryExport: 'default'
17 | },
18 | performance: {
19 | hints: false
20 | },
21 | optimization: {
22 | minimize: true
23 | },
24 | resolve: {
25 | extensions: ['.js']
26 | },
27 | module: {
28 | rules: [
29 | {
30 | test: /\.js$/,
31 | use: {
32 | loader: 'babel-loader' ,
33 | options: {
34 | "presets": [
35 | "@babel/preset-env",
36 | ],
37 | "plugins": [
38 | [
39 | "@babel/plugin-proposal-class-properties"
40 | ]
41 | ]
42 | }
43 | }
44 | },
45 | { test: /\.css$/, use: [ 'style-loader', 'css-loader'] },
46 | ]
47 | },
48 | devServer: {
49 | compress: true,
50 | hot: true,
51 | host: process.env.HOST || 'localhost',
52 | port: 3000,
53 | static: [{
54 | directory: resolveAppPath('public'),
55 | publicPath: '/'
56 | },{
57 | directory: resolveAppPath('../../assets'),
58 | publicPath: '/'
59 | }]
60 | },
61 | plugins: [
62 | new HtmlWebpackPlugin ({
63 | template: resolveAppPath('public/index.html')
64 | })
65 | ]
66 | }
--------------------------------------------------------------------------------
/plugins/annotorious-hover-tooltip/.gitignore:
--------------------------------------------------------------------------------
1 | dist
--------------------------------------------------------------------------------
/plugins/annotorious-hover-tooltip/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@recogito/annotorious-hover-tooltip",
3 | "version": "0.1.2",
4 | "description": "A hover tooltip plugin for Annotorious and AnnotoriousOSD",
5 | "main": "dist/annotorious-hover-tooltip.js",
6 | "scripts": {
7 | "start": "webpack serve --open --mode=development",
8 | "build": "webpack --mode=production"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "git+https://github.com/recogito/recogito-client-plugins.git"
13 | },
14 | "author": "Rainer Simon",
15 | "license": "BSD-3-Clause",
16 | "bugs": {
17 | "url": "https://github.com/recogito/recogito-client-plugins/issues"
18 | },
19 | "devDependencies": {
20 | "@babel/core": "^7.16.12",
21 | "@babel/plugin-proposal-class-properties": "^7.16.7",
22 | "@babel/preset-env": "^7.16.11",
23 | "babel-loader": "^8.2.3",
24 | "css-loader": "^6.5.1",
25 | "html-webpack-plugin": "^5.5.0",
26 | "style-loader": "^3.3.1",
27 | "webpack": "^5.67.0",
28 | "webpack-cli": "^4.9.1",
29 | "webpack-dev-server": "^4.7.3"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/plugins/annotorious-hover-tooltip/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
20 | 
16 |
17 |
18 |
27 |
28 |
--------------------------------------------------------------------------------
/plugins/annotorious-segment-outline/src/index.js:
--------------------------------------------------------------------------------
1 | import * as deeplab from '@tensorflow-models/deeplab';
2 |
3 | const segment = async (canvas, model) => {
4 | console.time("segmenting");
5 | const segments = await model.segment(canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height));
6 | console.timeEnd("segmenting");
7 |
8 | const mask = new ImageData(segments.segmentationMap, segments.width, segments.height);
9 | console.log(segments);
10 |
11 | const canvas2 = document.createElement('canvas');
12 | canvas2.width = segments.width;
13 | canvas2.height = segments.height
14 | const ctx = canvas2.getContext("2d");
15 | ctx.putImageData(mask, 0, 0);
16 |
17 | document.getElementById('app').appendChild(canvas2);
18 | }
19 |
20 | const TFSegment = anno => {
21 |
22 | // Set to your preferred model: 'pascal', 'cityscapes' or 'ade20k'
23 | console.time("loading segmentation model");
24 | deeplab.load({ base: "pascal", quantizationBytes: 4 }).then(model => {
25 | console.timeEnd("loading segmentation model");
26 |
27 | const image = document.getElementById('image');
28 | const anno = new Annotorious({ image });
29 |
30 | let canvas;
31 |
32 | anno.on('createSelection', selection => {
33 | // Parse fragment selector
34 | const [ x, y, w, h ] = selection.target.selector.value
35 | .split(':')[1]
36 | .split(',')
37 | .map(str => parseFloat(str));
38 |
39 | // Read selected image data
40 | requestAnimationFrame(() => {
41 | canvas = document.createElement('canvas');
42 | const ctx = canvas.getContext('2d');
43 | ctx.canvas.width = w;
44 | ctx.canvas.height = h;
45 | ctx.drawImage(image, x, y, w, h, 0, 0, w, h);
46 |
47 | document.getElementById('app').appendChild(canvas);
48 | });
49 |
50 | requestAnimationFrame(() => segment(canvas, model));
51 | });
52 | });
53 |
54 | }
55 |
56 | export default TFSegment;
--------------------------------------------------------------------------------
/plugins/annotorious-segment-outline/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const fs = require('fs');
3 |
4 | const HtmlWebpackPlugin = require('html-webpack-plugin');
5 | const TerserPlugin = require('terser-webpack-plugin');
6 |
7 | const APP_DIR = fs.realpathSync(process.cwd());
8 |
9 | const resolveAppPath = relativePath => path.resolve(APP_DIR, relativePath);
10 |
11 | module.exports = {
12 | entry: resolveAppPath('src'),
13 | output: {
14 | filename: 'annotorious-tf-segment.min.js',
15 | library: ['Annotorious', 'TFSegment'],
16 | libraryTarget: 'umd',
17 | libraryExport: 'default'
18 | },
19 | performance: {
20 | hints: false
21 | },
22 | optimization: {
23 | minimize: true,
24 | minimizer: [new TerserPlugin()],
25 | },
26 | resolve: {
27 | extensions: ['.js']
28 | },
29 | module: {
30 | rules: [
31 | {
32 | test: /\.js$/,
33 | use: {
34 | loader: 'babel-loader' ,
35 | options: {
36 | "presets": [
37 | "@babel/preset-env",
38 | ],
39 | "plugins": [
40 | [
41 | "@babel/plugin-proposal-class-properties"
42 | ]
43 | ]
44 | }
45 | }
46 | },
47 | { test: /\.css$/, use: [ 'style-loader', 'css-loader'] },
48 | ]
49 | },
50 | devServer: {
51 | contentBase: [ resolveAppPath('public'), resolveAppPath('../../public') ],
52 | compress: true,
53 | hot: true,
54 | host: process.env.HOST || 'localhost',
55 | port: 3000,
56 | publicPath: '/'
57 | },
58 | plugins: [
59 | new HtmlWebpackPlugin ({
60 | template: resolveAppPath('public/index.html')
61 | })
62 | ]
63 | }
--------------------------------------------------------------------------------
/plugins/annotorious-sequence-mode/.gitignore:
--------------------------------------------------------------------------------
1 | dist
--------------------------------------------------------------------------------
/plugins/annotorious-sequence-mode/README.md:
--------------------------------------------------------------------------------
1 | # Annotorious Sequence Mode Plugin
2 |
3 | A helper to simplify the use of Annotorious with OpenSeadragon Sequence Mode.
4 |
5 | Contributed by [Umesh Timalsina](https://github.com/umesh-timalsina).
6 |
7 | ## Run in development mode
8 |
9 | ```sh
10 | $ npm install
11 | $ npm start
12 | ```
13 |
14 | ## Build from source
15 |
16 | ```sh
17 | $ npm run build
18 | ```
--------------------------------------------------------------------------------
/plugins/annotorious-sequence-mode/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@recogito/annotorious-sequence-mode",
3 | "version": "0.1.0",
4 | "description": "Adds support for annotation pagination in OpenSeadragon sequence mode.",
5 | "main": "src/index.js",
6 | "files": [
7 | "dist"
8 | ],
9 | "scripts": {
10 | "start": "webpack serve --open --mode=development",
11 | "build": "webpack --mode=production"
12 | },
13 | "license": "BSD-3-Clause",
14 | "devDependencies": {
15 | "@babel/core": "^7.12.10",
16 | "@babel/plugin-proposal-class-properties": "^7.13.0",
17 | "@babel/preset-env": "^7.12.11",
18 | "babel-loader": "^8.2.2",
19 | "css-loader": "^3.2.0",
20 | "html-webpack-plugin": "^5.5.0",
21 | "sass": "^1.43.3",
22 | "sass-loader": "^8.0.0",
23 | "style-loader": "^2.0.0",
24 | "webpack": "^5.60.0",
25 | "webpack-cli": "^4.9.1",
26 | "webpack-dev-server": "^4.3.1"
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/plugins/annotorious-sequence-mode/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
137 | When this plugin is used with OpenSeadragon and the osd viewer is in sequence mode,
138 | the annotation layer is cleared and all the annotations are removed, this plugin implements
139 | a simple pagination. The function getAllAnnotations is also added to the
140 | annotator which can be used to get all the annotations pages.
141 |
33 |
34 |
44 |
45 |
46 | ```
47 |
48 | ## CSS Styling
49 |
50 | The label is inserted into the SVG annotation group as a `foreignObject` element. In addition,
51 | the plugin adds the first tag as an extra CSS class to the annotation shape.
52 |
53 | To apply your own CSS styles, follow this structure:
54 |
55 | ```svg
56 |
23 | 
27 |
28 |
29 | ```
30 |
31 | Or if you are using npm:
32 |
33 | ```
34 | $ npm install @recogito/annotorious-toolbar
35 | ```
36 |
37 | Instantiate Annotorious the normal way, and then register the plugin:
38 |
39 | ```js
40 | var anno = Annotorious.init({
41 | image: 'my-image'
42 | });
43 |
44 | // Init the plugin
45 | Annotorious.Toolbar(anno, document.getElementById('my-toolbar-container'));
46 | ```
47 |
48 | ## Optional Settings
49 |
50 | All settings are added as a third element that are key, value pairs.
51 |
52 | ```
53 | Annotorious.Toolbar(anno, document.getElementById('my-toolbar-container'), {'key': 'value', 'key2': 'value2'});
54 | ```
55 | 1. `withMouse`: adds Mouse icon to the toolbar for dragging around the image. Also changes the toolbar settings so that an annotation creation with a shape is always enabled until switched to the mouse icon.
56 |
57 | ```
58 | Annotorious.Toolbar(anno, document.getElementById('my-toolbar-container'), {'withMouse': true});
59 | ```
60 |
61 | 2. `drawingTools`: a list of tools you want in the toolbar. The options are: [ 'annotorious-tilted-box', 'rect', 'polygon', 'circle', 'ellipse', 'freehand', 'point', 'line']. This allows you to order your toolbar in the order/items you want to show up. You have to have the specific tool installed in order for it to show up in your toolbar.
62 |
63 | ```
64 | Annotorious.Toolbar(anno, document.getElementById('my-toolbar-container'), {'drawingTools': ['polygon', 'rect', 'circle']});
65 | ```
66 |
67 | 3. `infoElement`: a HTML element where hints about the drawing tools show up. Currently the only hint is the hint on how to stop the polygon tool.
68 |
69 | ```
70 | Annotorious.Toolbar(anno, document.getElementById('my-toolbar-container'), {'infoElement': document.getElementById('info-element')});
71 | ```
72 |
73 | 4. `withLabel`: A setting that enables a text label for the drawing tool to show up next to the shape. For example, when enabled, there will the text 'Rectangle' next to the 'Rectangle' icon.
74 |
75 | ```
76 | Annotorious.Toolbar(anno, document.getElementById('my-toolbar-container'), {'withLabel': true});
77 | ```
78 |
79 | 5. `withTooltip`: A setting that enables a tooltip(hover effect) over each button specifying the name of the button.
80 |
81 | ```
82 | Annotorious.Toolbar(anno, document.getElementById('my-toolbar-container'), {'withTooltip': true});
83 | ```
84 |
85 | Questions? Feedack? Feature requests? Join the [Annotorious chat on Gitter](https://gitter.im/recogito/annotorious).
86 |
87 | [](https://gitter.im/recogito/annotorious?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
88 |
89 | ## License
90 |
91 | [BSD-3 Clause](https://github.com/recogito/recogito-client-plugins/blob/main/packages/annotorious-tilted-box/LICENSE) (= feel
92 | free to use this code in whatever way you wish. But keep the attribution/license file,
93 | and if this code breaks something, don't complain to us :-)
94 |
--------------------------------------------------------------------------------
/plugins/annotorious-toolbar/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@recogito/annotorious-toolbar",
3 | "version": "1.2.1",
4 | "description": "A simple toolbar for switching Annotorious drawing tools",
5 | "main": "dist/annotorious-toolbar.min.js",
6 | "scripts": {
7 | "start": "webpack serve --open --mode=development",
8 | "build": "webpack --mode=production"
9 | },
10 | "author": "Rainer Simon",
11 | "license": "BSD-3-Clause",
12 | "devDependencies": {
13 | "@babel/core": "^7.6.2",
14 | "@babel/plugin-proposal-class-properties": "^7.5.5",
15 | "@babel/preset-env": "^7.6.2",
16 | "babel-loader": "^8.0.6",
17 | "css-loader": "^3.2.0",
18 | "html-webpack-plugin": "^5.5.0",
19 | "style-loader": "^2.0.0",
20 | "webpack": "^5.60.0",
21 | "webpack-cli": "^4.9.1",
22 | "webpack-dev-server": "^4.3.1"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/plugins/annotorious-toolbar/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 
35 |
36 |
61 |
62 |
63 | ```
64 |
65 |
--------------------------------------------------------------------------------
/plugins/storage-firebase/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: ["@babel/preset-env"]
3 | };
--------------------------------------------------------------------------------
/plugins/storage-firebase/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
13 |
38 |
39 |
--------------------------------------------------------------------------------
/plugins/storage-firebase/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@recogito/firebase-storage",
3 | "version": "0.2.1",
4 | "description": "Google Firebase storage adapter for RecogitoJS, Annotorious and AnnotoriousOSD",
5 | "main": "dist/recogito-firebase-storage.js",
6 | "scripts": {
7 | "build": "webpack --mode=production"
8 | },
9 | "author": "Rainer Simon",
10 | "license": "BSD-3-Clause",
11 | "homepage": "https://github.com/recogito/recogito-plugins-common/tree/main/packages/storage-firebase",
12 | "devDependencies": {
13 | "@babel/core": "^7.12.10",
14 | "@babel/plugin-proposal-class-properties": "^7.5.5",
15 | "@babel/preset-env": "^7.12.11",
16 | "babel-loader": "^8.2.3",
17 | "webpack": "^5.60.0",
18 | "webpack-cli": "^4.9.1"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/plugins/storage-firebase/src/index.js:
--------------------------------------------------------------------------------
1 | const FirebaseStorage = (client, firebaseConfig, settings) => {
2 |
3 | const collectionName = settings.collectionName || 'annotations';
4 | const { annotationTarget } = settings;
5 |
6 | firebase.initializeApp(firebaseConfig);
7 |
8 | const db = firebase.firestore();
9 |
10 | // Helper to find a Firebase doc by annotation ID
11 | const findById = id => {
12 | const query = db.collection(collectionName).where('id', '==', id);
13 | return query.get().then(querySnapshot => {
14 | return querySnapshot.docs[0]
15 | });
16 | }
17 |
18 | // Load annotations for this image
19 | db.collection(collectionName).where('target.source', '==', annotationTarget)
20 | .get().then(querySnapshot => {
21 | const annotations = querySnapshot.docs.map(function(doc) {
22 | return doc.data();
23 | });
24 |
25 | client.setAnnotations(annotations);
26 | });
27 |
28 | // Lifecycle event handlers
29 | client.on('createAnnotation', a => {
30 | db.collection(collectionName)
31 | .add(a).catch(error =>
32 | console.error('Error storing annotation', error, a))
33 | });
34 |
35 | client.on('updateAnnotation', (annotation, previous) => {
36 | findById(previous.id)
37 | .then(doc => doc.ref.update(annotation))
38 | .catch(error => console.log('Error updating annotation', error, previous, annotation))
39 | });
40 |
41 | client.on('deleteAnnotation', annotation => {
42 | findById(annotation.id)
43 | .then(doc => doc.ref.delete())
44 | .catch(error => console.log('Error deleting annotation', error, annotation));
45 | });
46 |
47 | }
48 |
49 | export default FirebaseStorage;
50 |
--------------------------------------------------------------------------------
/plugins/storage-firebase/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const fs = require('fs');
3 |
4 | const APP_DIR = fs.realpathSync(process.cwd());
5 |
6 | const resolveAppPath = relativePath => path.resolve(APP_DIR, relativePath);
7 |
8 | module.exports = {
9 | entry: resolveAppPath('src'),
10 | output: {
11 | filename: 'recogito-firebase-storage.js',
12 | library: ['recogito', 'FirebaseStorage'],
13 | libraryTarget: 'umd',
14 | libraryExport: 'default'
15 | },
16 | performance: {
17 | hints: false
18 | },
19 | optimization: {
20 | minimize: true
21 | },
22 | resolve: {
23 | extensions: ['.js']
24 | },
25 | module: {
26 | rules: [
27 | {
28 | test: /\.js$/,
29 | use: {
30 | loader: 'babel-loader' ,
31 | options: {
32 | "presets": [
33 | "@babel/preset-env",
34 | ],
35 | "plugins": [
36 | [
37 | "@babel/plugin-proposal-class-properties"
38 | ]
39 | ]
40 | }
41 | }
42 | },
43 | { test: /\.css$/, use: [ 'style-loader', 'css-loader'] },
44 | ]
45 | }
46 | }
--------------------------------------------------------------------------------
/plugins/storage-legacy-platform/.gitignore:
--------------------------------------------------------------------------------
1 | dist
--------------------------------------------------------------------------------
/plugins/storage-legacy-platform/README.md:
--------------------------------------------------------------------------------
1 | # Recogito Legacy Platform Storage
2 |
3 | A storage interop plugin that makes RecogitoJS and Annotorious/AnnotoriousOSD work in
4 | the [legacy Recogito platform](https://github.com/pelagios/recogito2).
--------------------------------------------------------------------------------
/plugins/storage-legacy-platform/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: ["@babel/preset-env"]
3 | };
--------------------------------------------------------------------------------
/plugins/storage-legacy-platform/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@recogito/recogito-legacy-storage",
3 | "version": "0.7.5",
4 | "description": "A storage adapator that works with the legacy Recogito v.3 annotation platform",
5 | "main": "dist/recogito-legacy-storage.js",
6 | "scripts": {
7 | "start": "webpack serve --open --mode=development",
8 | "build": "webpack --mode=production"
9 | },
10 | "author": "Rainer Simon",
11 | "license": "BSD-3-Clause",
12 | "devDependencies": {
13 | "@babel/core": "^7.12.10",
14 | "@babel/plugin-proposal-class-properties": "^7.5.5",
15 | "@babel/preset-env": "^7.12.11",
16 | "babel-loader": "^8.0.6",
17 | "html-webpack-plugin": "^5.4.0",
18 | "webpack": "^5.59.1",
19 | "webpack-cli": "^4.9.1",
20 | "webpack-dev-server": "^4.3.1"
21 | },
22 | "dependencies": {
23 | "axios": "^0.21.1"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/plugins/storage-legacy-platform/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
31 |
32 |
47 |
48 |
49 | ```
--------------------------------------------------------------------------------
/plugins/widget-react-helloworld/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 
11 |
12 |
24 |
25 |
--------------------------------------------------------------------------------
/plugins/widget-react-helloworld/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@recogito/react-helloworld-widget",
3 | "version": "0.1.0",
4 | "description": "A minimal code example showing how to build your own editor widgets with React",
5 | "main": "dist/recogito-helloworld-widget.js",
6 | "module": "dist/recogito-helloworld-widget.js",
7 | "scripts": {
8 | "build": "webpack --mode=production",
9 | "test": "echo \"Error: no test specified\" && exit 1"
10 | },
11 | "author": "Rainer Simon",
12 | "license": "BSD-3-Clause",
13 | "devDependencies": {
14 | "@babel/core": "^7.6.2",
15 | "@babel/plugin-proposal-class-properties": "^7.5.5",
16 | "@babel/preset-env": "^7.6.2",
17 | "@babel/preset-react": "^7.0.0",
18 | "babel-loader": "^8.0.6",
19 | "css-loader": "^5.2.5",
20 | "style-loader": "^2.0.0",
21 | "terser-webpack-plugin": "^3.1.0",
22 | "webpack": "^4.41.0",
23 | "webpack-cli": "^3.3.9",
24 | "webpack-dev-server": "^3.11.0"
25 | },
26 | "dependencies": {
27 | "preact": "^10.4.1"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/plugins/widget-react-helloworld/src/index.css:
--------------------------------------------------------------------------------
1 | .helloworld-widget {
2 | padding:5px;
3 | border-bottom:1px solid #e5e5e5;
4 | }
5 |
6 | .helloworld-widget button {
7 | outline:none;
8 | border:none;
9 | display:inline-block;
10 | width:20px;
11 | height:20px;
12 | border-radius:50%;
13 | cursor:pointer;
14 | opacity:0.5;
15 | margin:4px;
16 | }
17 |
18 | .helloworld-widget button.selected,
19 | .helloworld-widget button:hover {
20 | opacity:1;
21 | }
--------------------------------------------------------------------------------
/plugins/widget-react-helloworld/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'preact/compat';
2 |
3 | import './index.css';
4 |
5 | const HelloWorldWidget = props => {
6 | // We'll be using 'highlighting' as body purpose for
7 | // this type of widget
8 | const currentHighlight = props.annotation ?
9 | props.annotation.bodies.find(b => b.purpose === 'highlighting') : null;
10 |
11 | // This function handles body updates as the user presses buttons
12 | const setHighlightBody = value => () => {
13 | props.onUpsertBody(currentHighlight, { value, purpose: 'highlighting' });
14 | }
15 |
16 | return (
17 |