From fd5af6bdeaf1d4f09368b4a7516b4a7e5b0a53e6 Mon Sep 17 00:00:00 2001
From: Robin Tissot <tissotrobin@gmail.com>
Date: Thu, 4 Nov 2021 12:36:06 +0100
Subject: [PATCH] Allows to change the readOnly property of the editor.

---
 src/TextAnnotator.jsx           | 28 ++++++++++++++++++++--------
 src/index.jsx                   | 12 ++++++++++--
 src/relations/RelationsLayer.js | 14 ++++++++------
 3 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/src/TextAnnotator.jsx b/src/TextAnnotator.jsx
index a657fed..dff9c57 100644
--- a/src/TextAnnotator.jsx
+++ b/src/TextAnnotator.jsx
@@ -17,7 +17,10 @@ export default class TextAnnotator extends Component {
     selectedAnnotation: null,
     selectedDOMElement: null,
     selectedRelation: null,
-    
+
+    // ReadOnly mode
+    readOnly: this.props.config.readOnly,
+
     // Headless mode
     editorDisabled: this.props.config.disableEditor,
   }
@@ -42,7 +45,6 @@ export default class TextAnnotator extends Component {
     this.selectionHandler.on('select', this.handleSelect);
 
     this.relationsLayer = new RelationsLayer(this.props.contentEl);
-    this.relationsLayer.readOnly = true; // Deactivate by default
 
     this.relationsLayer.on('createRelation', this.onEditRelation);
     this.relationsLayer.on('selectRelation', this.onEditRelation);
@@ -64,7 +66,7 @@ export default class TextAnnotator extends Component {
     this.state.editorDisabled ?
       this.onHeadlessSelect(evt) : this.onNormalSelect(evt);
   }
-    
+
   onNormalSelect = evt => {
     const { selection, element } = evt;
     if (selection) {
@@ -82,7 +84,7 @@ export default class TextAnnotator extends Component {
       this.clearState();
     }
   }
-  
+
   onHeadlessSelect = evt => {
     const { selection, element } = evt;
     if (selection) {
@@ -99,7 +101,7 @@ export default class TextAnnotator extends Component {
         this.props.onAnnotationSelected(selection.clone(), element);
       } else {
         // Notify backend text selection to create a new annotation
-        const undraft = annotation => 
+        const undraft = annotation =>
         annotation.clone({
           body : annotation.bodies.map(({ draft, ...rest }) => rest)
         });
@@ -262,7 +264,7 @@ export default class TextAnnotator extends Component {
   setAnnotations = annotations => {
     this.highlighter.clear();
     this.relationsLayer.clear();
-    
+
     const clones = annotations.map(a => a.clone());
     this.highlighter.init(clones).then(() =>
       this.relationsLayer.init(clones));
@@ -292,10 +294,20 @@ export default class TextAnnotator extends Component {
     }
   }
 
+  get readOnly() {
+    return this.state.readOnly;
+  }
+
+  set readOnly(readOnly) {
+    this.selectionHandler.readOnly = readOnly;
+    // Note: relationsHandler.readOnly should be set by setMode.
+    this.setState({ readOnly });
+  }
+
   render() {
 	// The editor should open under normal conditions - annotation was selected, no headless mode
-    const open = (this.state.selectedAnnotation || this.state.selectedRelation) && !this.state.editorDisabled;  
-  
+    const open = (this.state.selectedAnnotation || this.state.selectedRelation) && !this.state.editorDisabled;
+
     const readOnly = this.props.config.readOnly || this.state.selectedAnnotation?.readOnly
 
     return (open && (
diff --git a/src/index.jsx b/src/index.jsx
index c4b9f1b..464caa2 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -2,9 +2,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Emitter from 'tiny-emitter';
 import {
-  WebAnnotation, 
+  WebAnnotation,
   createEnvironment,
-  setLocale 
+  setLocale
 } from '@recogito/recogito-client-core';
 import TextAnnotator from './TextAnnotator';
 import { deflateHTML } from './utils';
@@ -145,6 +145,14 @@ export class Recogito {
   setServerTime = timestamp =>
     this._environment.setServerTime(timestamp);
 
+  get readOnly() {
+    return this._app.current.readOnly;
+  }
+
+  set readOnly(readOnly) {
+    this._app.current.readOnly = readOnly;
+  }
+
 }
 
 export const init = config => new Recogito(config);
diff --git a/src/relations/RelationsLayer.js b/src/relations/RelationsLayer.js
index 0cfc65a..5403934 100644
--- a/src/relations/RelationsLayer.js
+++ b/src/relations/RelationsLayer.js
@@ -18,6 +18,8 @@ export default class RelationsLayer extends EventEmitter {
     this.svg.setAttribute('class', 'r6o-relations-layer');
     this.contentEl.appendChild(this.svg);
 
+    this.readOnly = true;  // deactivate by default
+
     this.drawingTool = new DrawingTool(contentEl, this.svg);
 
     // Forward events
@@ -152,16 +154,16 @@ export default class RelationsLayer extends EventEmitter {
 
   resetDrawing = () =>
     this.drawingTool.reset();
-
-  get readOnly() {
-    this.svg.classList.contains('readonly');
-  }
+    /*
+     *   get readOnly() {
+     *     this.svg.classList.contains('readonly');
+     *   } */
 
   set readOnly(readOnly) {
     if (readOnly)
-      this.svg.setAttribute('class', 'r6o-relations-layer readonly');
+      this.svg.classList.add('readonly');
     else
-      this.svg.setAttribute('class', 'r6o-relations-layer');
+      this.svg.classList.remove('readonly');
   }
 
 }