Annotations overlay is half-complete!

davidgumberg · Feb 24, 2024 · d21e47c · d21e47c
1 parent 11491f9
commit d21e47c
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -60,8 +60,9 @@
         </div>
         <menu class="toolbox-tools toolbox-tools-closed">
           <li class="toolbox-tools-btn toolbox-handle-button toolbox-tools-open-btn"></li>
-          <li class="toolbox-tools-btn toolbox-tools-save-annotations">🐏</li>
-          <li class="toolbox-tools-btn toolbox-tools-save-image">💾</li>
+          <li class="toolbox-tools-btn toolbox-tools-save-annotations">💾</li>
+          <li class="toolbox-tools-btn toolbox-tools-toggle-edit">🖍️</li>
+          <li class="toolbox-tools-btn toolbox-tools-toggle-annotations">📖</li>
         </menu>
       </div>
     </section>

diff --git a/js/toolbox.js b/js/toolbox.js
@@ -24,6 +24,8 @@ export class Toolbox {
     this.elToolboxTools = this.elToolbox.querySelector('.toolbox-tools')
     this.elToolboxToolsOpenBtn = this.elToolboxTools.querySelector('.toolbox-tools-open-btn')
     this.elToolboxToolsAnnotationsSaveBtn = this.elToolboxTools.querySelector('.toolbox-tools-save-annotations')
+    this.elToolboxToolsToggleEditBtn = this.elToolboxTools.querySelector('.toolbox-tools-toggle-edit')
+    this.elToolboxToolsToggleAnnotationsBtn = this.elToolboxTools.querySelector('.toolbox-tools-toggle-annotations')
   }
 
   closeToolboxHandle() {
@@ -83,6 +85,9 @@ export class Toolbox {
     this.elToolboxToolsAnnotationsSaveBtn.addEventListener("click", (event) => this.saveAnnotationsListener(event))
     this.elToolbox.addEventListener("mouseenter", () => this.setToolboxHandleState(ToolboxHandleStatus.OPEN))
     this.elToolbox.addEventListener("mouseleave", () => this.setToolboxHandleState(ToolboxHandleStatus.CLOSED))
+
+    this.elToolboxToolsToggleAnnotationsBtn.addEventListener("click", (_event) => this._viewer.toggleAnnotations())
+    this.elToolboxToolsToggleEditBtn.addEventListener("click", (_event) => this._viewer.toggleEditor())
   }
 
   setToolboxHandleState(status) {

diff --git a/js/viewer.js b/js/viewer.js
@@ -64,14 +64,15 @@ export class Viewer{
       })
     BetterPolygon(this.anno);
     this.anno.setDrawingTool('polygon')
-    this.anno.readOnly = false
 
-    // TEMPORARY VALUE
-    this.disableEditor();
+    this.annotationsVisible = true;
+    this.anno.disableEditor = true
 
     this.anno.on('selectAnnotation', (annotation, element) => {
       // Fit bounds on annote selection
-      // fitBoundsWithWidget(element, null, osd)
+      if(this.anno.disableEditor == false){
+        fitBoundsWithWidget(element, null, this.osd)
+      }
 
       // If editor is disabled, show our custom cite widget
       if(this.anno.disableEditor == true){
@@ -112,11 +113,31 @@ export class Viewer{
     history.pushState({}, `${book} ${canto}`, '?' + newCantoParams)
   }
 
-  disableEditor() {
-    this.anno.disableEditor = true
+  toggleEditor() {
+    if(this.anno.readOnly == false) {
+      this.anno.readOnly = true
+      this.anno.disableEditor = true
+    }
+    else {
+      this.anno.readOnly = false
+      this.anno.disableEditor = false
+    }
   }
 
-  enableEditor() {
+  toggleAnnotations() {  
+    if(this.annotationsVisible == true){
+      this.annotationsVisible = false
+      this.anno.setVisible(false)
+      this.anno.readOnly = true
+      this.anno.disableEditor = true
+    }
+    else {
+      this.annotationsVisible = true
+      this.anno.setVisible(true)
+      this.anno.disableEditor = false
+    }
+  }
+  enableAnnotations() {
     this.anno.disableEditor = false
   }