Merge pull request #60 from scaife-viewer/150-click-to-unselect

Allow clicking a selected token to unselect
scaife-viewer · Jul 31, 2020 · df0c71d · df0c71d
2 parents 0d6c925 + e58904e
commit df0c71d
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 12 deletions.
diff --git a/src/reader/components/DefaultModeReader.vue b/src/reader/components/DefaultModeReader.vue
@@ -48,6 +48,7 @@
                       node {
                         veRef
                         value
+                        lemma
                       }
                     }
                   }
@@ -63,10 +64,11 @@
         const lines = data.passageTextParts.edges.map(line => {
           const { id, ref } = line.node;
           const tokens = line.node.tokens.edges.map(edge => {
-            const { value, veRef } = edge.node;
+            const { value, veRef, lemma } = edge.node;
             return {
               value,
               veRef,
+              lemma,
             };
           });
           return {

diff --git a/src/reader/components/ImageModeReader.vue b/src/reader/components/ImageModeReader.vue
@@ -81,6 +81,7 @@
                       node {
                         veRef
                         value
+                        lemma
                       }
                     }
                   }
@@ -114,8 +115,8 @@
         const lines = data.passageTextParts.edges.map(line => {
           const { id, kind, ref } = line.node;
           const tokens = line.node.tokens.edges.map(edge => {
-            const { value, veRef } = edge.node;
-            return { value, veRef };
+            const { value, veRef, lemma } = edge.node;
+            return { value, veRef, lemma };
           });
           return { id, kind, ref, tokens };
         });

diff --git a/src/reader/components/MetricalModeReader.vue b/src/reader/components/MetricalModeReader.vue
@@ -39,10 +39,11 @@
         const lines = data.passageTextParts.edges.map(line => {
           const { id, ref, metricalAnnotations } = line.node;
           const tokens = line.node.tokens.edges.map(edge => {
-            const { value, veRef } = edge.node;
+            const { value, veRef, lemma } = edge.node;
             return {
               value,
               veRef,
+              lemma,
             };
           });
           return {
@@ -85,6 +86,7 @@
                       node {
                         veRef
                         value
+                        lemma
                       }
                     }
                   }

diff --git a/src/reader/components/NamedEntitiesModeReader.vue b/src/reader/components/NamedEntitiesModeReader.vue
@@ -68,11 +68,12 @@
         const lines = parts.map(line => {
           const { id, ref } = line.node;
           const tokens = line.node.tokens.edges.map(edge => {
-            const { value, veRef, namedEntities } = edge.node;
+            const { value, veRef, lemma, namedEntities } = edge.node;
             const entities = namedEntities.edges.map(e => e.node.id);
             return {
               value,
               veRef,
+              lemma,
               entities,
             };
           });
@@ -135,6 +136,7 @@
                       node {
                         veRef
                         value
+                        lemma
                         namedEntities {
                           edges {
                             node {

diff --git a/src/reader/components/ReaderToken.vue b/src/reader/components/ReaderToken.vue
@@ -4,6 +4,7 @@
     :class="{
       selected,
       interlinear: interlinearMode,
+      'entity-mode': namedEntitiesMode,
       entity: namedEntitiesMode && isEntity,
       'selected-entity': namedEntitiesMode && hasSelectedEntity,
     }"
@@ -25,18 +26,28 @@
 
 <script>
   import { SELECT_TOKEN, MODULE_NS } from '@/reader/constants';
-  import { SELECT_NAMED_ENTITIES } from '@/constants';
+  import { CLEAR_NAMED_ENTITIES, SELECT_NAMED_ENTITIES } from '@/constants';
 
   export default {
     props: ['token'],
     methods: {
       onSelect() {
-        this.$store.dispatch(SELECT_NAMED_ENTITIES, {
-          entities: this.entities,
-        });
-        this.$store.dispatch(`${MODULE_NS}/${SELECT_TOKEN}`, {
-          token: this.token,
-        });
+        if (this.selected) {
+          this.$store.dispatch(CLEAR_NAMED_ENTITIES);
+          this.$store.dispatch(`${MODULE_NS}/${SELECT_TOKEN}`, {
+            token: null,
+          });
+        } else if (
+          (this.namedEntitiesMode && this.isEntity) ||
+          !this.namedEntitiesMode
+        ) {
+          this.$store.dispatch(SELECT_NAMED_ENTITIES, {
+            entities: this.entities,
+          });
+          this.$store.dispatch(`${MODULE_NS}/${SELECT_TOKEN}`, {
+            token: this.token,
+          });
+        }
       },
     },
     computed: {
@@ -91,6 +102,9 @@
   .token.selected .text {
     @include highlight($selected-token);
   }
+  .token.entity-mode:not(.entity) .text {
+    cursor: inherit;
+  }
   .token.entity .text {
     @include highlight($entity);
   }