@konfuzio/document-validation-ui 0.1.59-dev.3 → 0.1.60-dev.0

package/src/store/selection.js

@@ -9,24 +9,30 @@ const state = {
     pageNumber: null,
     start: null,
     end: null,
+    custom: false, // if the box was created by user in document or it comes from an annotation
+    placeholderBox: null, // show a not editable placeholder box
   },
   isSelecting: false,
-  spanSelection: [],
-  placeholderSelection: [],
-  selectedEntities: [],
-  spanLoading: false,
+  spanSelection: null,
+  elementSelected: null, // selected element id
+  selectedEntities: null,
 };
 
 const getters = {
+  isElementSelected: (state) => {
+    return state.elementSelected;
+  },
+  isSelecting: (state) => {
+    return state.isSelecting;
+  },
   isSelectionValid: (state) => {
     /**
      * `endSelection` will reset everything in case of invalid selection.
      * Check the existence of `selection.end` before requesting the
      * content from the backend.
      * */
-    return state.selection && state.selection.end != null;
+    return state.selection && state.selection.end;
   },
-
   getSelectionForPage: (state) => (pageNumber) => {
     if (state.selection.pageNumber === pageNumber) {
       return state.selection;
@@ -46,24 +52,19 @@ const getters = {
         box.y1 >= entity.y1
     );
   },
-  spanSelectionsForPage: (state) => (page) => {
-    return state.spanSelection.filter(
-      (span) => page.number === span.page_index + 1
-    );
-  },
-  placeholderSelectionForPage: (state) => (page) => {
-    return state.placeholderSelection.filter(
-      (span) => page.number === span.page_index + 1
-    );
-  },
 };
 
 const actions = {
+  selectElement: ({ commit }, value) => {
+    commit("RESET_SELECTION");
+    commit("SET_SPAN_SELECTION", null);
+    commit("ELEMENT_SELECTED", value);
+  },
+
   disableSelection: ({ commit }) => {
+    commit("ELEMENT_SELECTED", null);
     commit("RESET_SELECTION");
-    commit("SET_SELECTED_ENTITIES", []);
-    commit("SET_SPAN_SELECTION", []);
-    commit("SET_PLACEHOLDER_SELECTION", []);
+    commit("SET_SPAN_SELECTION", null);
   },
 
   startSelection: ({ commit }, { pageNumber, start }) => {
@@ -80,6 +81,8 @@ const actions = {
     if (xDiff > 5 && yDiff > 5) {
       commit("MOVE_SELECTION", points);
     }
+
+    commit("SET_SELECTED_ENTITIES", null);
   },
 
   endSelection: ({ commit, state }, end) => {
@@ -110,138 +113,78 @@ const actions = {
     }
   },
 
-  setSelectedEntities: ({ commit }, entities) => {
-    commit("SET_SELECTED_ENTITIES", entities);
+  setSelection: ({ commit }, { span, selection }) => {
+    commit("SET_SELECTION", selection);
+    commit("SET_SPAN_SELECTION", span);
   },
 
-  getTextFromBboxes: ({ commit, rootState }, span) => {
-    commit("SET_SPAN_LOADING", true);
-    return new Promise((resolve, reject) => {
-      HTTP.post(`documents/${rootState.document.documentId}/bbox/`, {
-        span,
-      })
-        .then((response) => {
-          if (response.data.span.length && response.data.span.length > 0) {
-            /**
-             * If we have a non-empty bboxes list, we assume there
-             * is text here on the backend, so we just set
-             * spanSelection to the response.
-             */
-            resolve(response.data.span);
-          } else {
-            /**
-             * Otherwise, we assume the backend can't identify text
-             * on this area, so we set our bbox into spanSelection
-             * ready to be passed back to the backend when creating
-             * an annotation on this empty area, adding the offset_string
-             * attribute, ready to be filled.
-             */
-            resolve(span);
-          }
-        })
-        .catch((error) => {
-          alert("Could not fetch the selected text from the backend");
-          reject(error);
-        })
-        .finally(() => {
-          commit("SET_SPAN_LOADING", false);
-        });
-    });
+  setSelectedEntities: ({ commit }, entities) => {
+    commit("SET_SELECTED_ENTITIES", entities);
   },
 
-  entitySelection: ({ commit, dispatch, state }, { entities, selection }) => {
-    if (entities.length === 0) {
-      if (selection) {
-        dispatch("getTextFromBboxes", [selection]).then((spans) => {
-          commit("SET_SPAN_SELECTION", spans);
-        });
-      } else {
-        commit("RESET_SELECTION");
-        commit("SET_SPAN_SELECTION", []);
-      }
-      commit("SET_SELECTED_ENTITIES", []);
-    } else {
-      commit("SET_SELECTED_ENTITIES", entities);
+  getTextFromBboxes: ({ commit, rootState }, { box, entities }) => {
+    let span;
 
-      dispatch("document/setAnnotationId", null, {
-        root: true,
-      });
-      let span;
-      if (entities) {
-        span = entities.flatMap((s) => {
-          return s.original;
-        });
-      } else {
-        span = [entities];
-      }
-      commit("SET_SPAN_SELECTION", span);
-      dispatch("getTextFromBboxes", span).then((spans) => {
-        commit("SET_SPAN_SELECTION", spans);
+    if (entities) {
+      span = box.flatMap((s) => {
+        return s.original;
       });
-    }
-  },
-
-  entityClick: ({ commit, dispatch, state }, entity) => {
-    // Check if we are creating a new Annotation
-    // or if we are removing a previously selected entity
-    // or editing empty one
-    const found = state.selectedEntities.find(
-      (entityToFind) =>
-        entity.scaled.width === entityToFind.scaled.width &&
-        entity.original.offset_string === entityToFind.original.offset_string
-    );
-
-    let entities = state.selectedEntities;
-    if (found) {
-      entities = [
-        ...state.selectedEntities.filter(
-          (entityToFilter) =>
-            entityToFilter.scaled.width !== entity.scaled.width &&
-            entityToFilter.original.offset_string !==
-              entity.original.offset_string
-        ),
-      ];
     } else {
-      entities.push(entity);
+      span = [box];
     }
 
-    if (entities.length === 0) {
-      commit("SET_SELECTED_ENTITIES", []);
-      commit("SET_SPAN_SELECTION", []);
-    } else {
-      commit("SET_SELECTED_ENTITIES", entities);
-
-      dispatch("document/setAnnotationId", null, {
-        root: true,
+    return HTTP.post(`documents/${rootState.document.documentId}/bbox/`, {
+      span,
+    })
+      .then((response) => {
+        if (response.data.span.length && response.data.span.length > 0) {
+          /**
+           * If we have a non-empty bboxes list, we assume there
+           * is text here on the backend, so we just set
+           * spanSelection to the response.
+           */
+          commit("SET_SPAN_SELECTION", response.data.span);
+        } else {
+          /**
+           * Otherwise, we assume the backend can't identify text
+           * on this area, so we set our bbox into spanSelection
+           * ready to be passed back to the backend when creating
+           * an annotation on this empty area, adding the offset_string
+           * attribute, ready to be filled.
+           */
+          commit("SET_SPAN_SELECTION", span);
+        }
+      })
+      .catch((error) => {
+        alert("Could not fetch the selected text from the backend");
       });
+  },
 
-      let span;
+  getTextFromEntities: ({ commit, dispatch }, selectedEntities) => {
+    if (!selectedEntities) return;
 
-      if (entities) {
-        span = entities.flatMap((s) => {
-          return s.original;
-        });
-      } else {
-        span = [entities];
-      }
-      commit("SET_SPAN_SELECTION", span);
-    }
+    return dispatch("getTextFromBboxes", {
+      box: selectedEntities,
+      entities: true,
+    });
   },
 
   setSpanSelection: ({ commit }, span) => {
     commit("SET_SPAN_SELECTION", span);
   },
-  setPlaceholderSelection: ({ commit }, span) => {
-    commit("SET_PLACEHOLDER_SELECTION", span);
-  },
 };
 
 const mutations = {
+  ELEMENT_SELECTED: (state, value) => {
+    state.elementSelected = value;
+  },
   START_SELECTION: (state, { pageNumber, start }) => {
     state.selection.end = null;
+    state.isSelecting = true;
     state.selection.pageNumber = pageNumber;
+    state.selection.custom = true;
     state.selection.start = start;
-    state.isSelecting = true;
+    state.selection.placeholderBox = null;
   },
   MOVE_SELECTION: (state, points) => {
     const { start, end } = points;
@@ -257,39 +200,20 @@ const mutations = {
     state.isSelecting = false;
   },
   RESET_SELECTION: (state) => {
+    state.isSelecting = false;
     state.selection.pageNumber = null;
     state.selection.start = null;
     state.selection.end = null;
+    state.selection.placeholderBox = null;
   },
   SET_SPAN_SELECTION: (state, span) => {
-    if (!span) {
-      state.spanSelection = [];
-    } else {
-      state.spanSelection = span;
-    }
+    state.spanSelection = span;
   },
-  ADD_SPAN_SELECTION: (state, span) => {
-    state.spanSelection.push(span);
-  },
-  SET_PLACEHOLDER_SELECTION: (state, span) => {
-    if (!span) {
-      state.placeholderSelection = [];
-    } else {
-      state.placeholderSelection = span;
-    }
-  },
-  ADD_PLACEHOLDER_SELECTION: (state, span) => {
-    state.placeholderSelection.push(span);
+  SET_SELECTION: (state, selection) => {
+    state.selection = selection;
   },
   SET_SELECTED_ENTITIES: (state, entities) => {
-    if (!entities) {
-      state.selectedEntities = [];
-    } else {
-      state.selectedEntities = entities;
-    }
-  },
-  SET_SPAN_LOADING: (state, loading) => {
-    state.spanLoading = loading;
+    state.selectedEntities = entities;
   },
 };
 

package/src/components/DocumentPage/PlaceholderSelection.vue

@@ -1,51 +0,0 @@
-<template>
-  <v-group>
-    <v-rect ref="placeholderSelection" :config="placeholderConfig" />
-  </v-group>
-</template>
-
-<script>
-import { mapGetters } from "vuex";
-export default {
-  props: {
-    span: {
-      required: true,
-      type: Object,
-    },
-    page: {
-      required: true,
-      type: Object,
-    },
-  },
-  data() {
-    return {
-      selection: {
-        start: null,
-        end: null,
-      },
-    };
-  },
-  computed: {
-    placeholderConfig() {
-      const box = this.bboxToRect(this.page, this.span);
-      const primaryColor = window
-        .getComputedStyle(document.body)
-        .getPropertyValue("--primary-color");
-      return {
-        x: box.x,
-        y: box.y,
-        width: box.width,
-        height: box.height,
-        fill: "transparent",
-        stroke: primaryColor,
-        strokeWidth: 3,
-        globalCompositeOperation: "multiply",
-        shadowForStrokeEnabled: false,
-        name: "placeholderSelection",
-        draggable: false,
-      };
-    },
-    ...mapGetters("display", ["bboxToRect"]),
-  },
-};
-</script>

package/src/components/DocumentPage/SpanSelection.vue

@@ -1,259 +0,0 @@
-<template>
-  <v-group>
-    <v-rect
-      ref="spanSelection"
-      :config="config"
-      :stroke-scale-enabled="false"
-      @dragend="onChange"
-      @transformend="onChange"
-    />
-    <v-transformer
-      v-if="!isSelectionValid"
-      ref="spanTransformer"
-      :config="transformerConfig"
-    />
-  </v-group>
-</template>
-
-<script>
-import { mapGetters, mapState } from "vuex";
-
-export default {
-  props: {
-    id: {
-      required: true,
-      type: Number,
-    },
-    page: {
-      required: true,
-      type: Object,
-    },
-    span: {
-      required: true,
-      type: Object,
-    },
-  },
-  data() {
-    return {
-      selection: {
-        start: null,
-        end: null,
-      },
-      box: {
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0,
-      },
-    };
-  },
-  computed: {
-    /**
-     * Konva options of the selection rectangle, based on the
-     * `selection` object.
-     */
-    config() {
-      const primaryColor = window
-        .getComputedStyle(document.body)
-        .getPropertyValue("--primary-color");
-      return {
-        x: this.box.x,
-        y: this.box.y,
-        width: this.box.width,
-        height: this.box.height,
-        stroke: "#7B61FFB3",
-        fill: `${primaryColor}77`,
-        strokeWidth: 1,
-        globalCompositeOperation: "multiply",
-        shadowForStrokeEnabled: false,
-        perfectDrawEnabled: false,
-        name: `spanSelection_${this.id}`,
-        draggable: true,
-      };
-    },
-    transformerConfig() {
-      return {
-        borderEnabled: false,
-        rotateEnabled: false,
-        ignoreStroke: true,
-        keepRatio: false,
-        anchorStroke: "#7B61FF",
-        anchorSize: 6,
-        name: `spanTransformer_${this.id}`,
-      };
-    },
-    ...mapState("document", ["editAnnotation"]),
-    ...mapGetters("display", ["clientToBbox", "bboxToRect", "scaledEntities"]),
-    ...mapGetters("selection", ["entitiesOnSelection", "isSelectionValid"]),
-  },
-  watch: {
-    box() {
-      this.updateTransformer();
-      this.setSelection();
-    },
-    span() {
-      this.box = this.bboxToRect(this.page, this.span);
-    },
-  },
-  mounted() {
-    this.box = this.bboxToRect(this.page, this.span);
-    this.setSelection();
-    this.$nextTick(() => {
-      this.updateTransformer();
-    });
-  },
-  methods: {
-    setSelection() {
-      this.selection = {
-        start: {
-          x: this.box.x,
-          y: this.box.y,
-        },
-        end: {
-          x: this.box.x + this.box.width,
-          y: this.box.y + this.box.height,
-        },
-      };
-    },
-    startSelection(start) {
-      this.selection.start = start;
-    },
-
-    moveSelection(points) {
-      // only apply when we have a large enough selection, otherwise we risk counting misclicks
-      const xDiff = Math.abs(this.selection.start.x - points.end.x);
-      const yDiff = Math.abs(this.selection.start.y - points.end.y);
-      if (xDiff > 5 && yDiff > 5) {
-        const { start, end } = points;
-        if (start) {
-          this.selection.start = start;
-        }
-        if (end) {
-          this.selection.end = end;
-        }
-      }
-    },
-
-    endSelection(end) {
-      let xDiff;
-      let yDiff;
-
-      if (end) {
-        xDiff = Math.abs(this.selection.start.x - end.x);
-        yDiff = Math.abs(this.selection.start.y - end.y);
-      }
-
-      // if "end" is not provided, start and end points are the same, or if we have a selection smaller than 5x5,
-      // just reset
-      if (
-        !end ||
-        (yDiff <= 5 && xDiff <= 5) ||
-        (this.selection.start.x === end.x && this.selection.start.y == end.y)
-      ) {
-        this.selection.start = null;
-        this.selection.end = null;
-      } else {
-        this.selection.start.x = this.selection.start.x - selectionPadding;
-        this.selection.start.y = this.selection.start.y - selectionPadding;
-
-        end.x = end.x + selectionPadding;
-        end.y = end.y + selectionPadding;
-
-        this.selection.end = end;
-      }
-    },
-    handleSelection() {
-      this.box = {
-        x: this.selection.start.x,
-        y: this.selection.start.y,
-        width: this.selection.end.x - this.selection.start.x,
-        height: this.selection.end.y - this.selection.start.y,
-      };
-
-      const box = this.clientToBbox(
-        this.page,
-        this.selection.start,
-        this.selection.end
-      );
-
-      this.$store.dispatch("selection/entitySelection", {
-        entities: this.scaledEntities(
-          this.entitiesOnSelection(box, this.page),
-          this.page
-        ),
-        selection: box,
-      });
-    },
-    updateTransformer() {
-      // here we need to manually attach or detach Transformer node
-      const transformer = this.$refs.spanTransformer;
-
-      // maybe we're out of sync and the transformer is not available, just return
-      if (!transformer) {
-        return;
-      }
-
-      const transformerNode = transformer.getNode();
-      const stage = transformerNode.getStage();
-      let selectedNode;
-      if (stage) {
-        selectedNode = stage.findOne(`.spanSelection_${this.id}`);
-      }
-
-      // do nothing if selected node is already attached
-      if (selectedNode === transformerNode.node()) {
-        return;
-      }
-
-      if (selectedNode) {
-        // attach to another node
-        transformerNode.nodes([selectedNode]);
-      } else {
-        // remove transformer
-        transformerNode.nodes([]);
-      }
-
-      transformerNode.getLayer().batchDraw();
-    },
-
-    /**
-     * This method is used for both transforms and drags since it just
-     * retrieves the rect's new attributes from the event and uses those
-     * to set the new selection state.
-     */
-    onChange(event) {
-      const { x, y, scaleX, scaleY, skewX, width, height } = event.target.attrs;
-      const realWidth = width * scaleX;
-      const realHeight = height * scaleY;
-      let start;
-      let end;
-
-      // we need to figure out if there's skewing going on, to fix start/end points
-      // (other cases appear to fix themselves automatically)
-      if (skewX >= 0) {
-        start = { x, y };
-        end = {
-          x: start.x + realWidth,
-          y: start.y + realHeight,
-        };
-      } else {
-        end = { x, y };
-        start = { x: end.x - realWidth, y: end.y - realHeight };
-      }
-
-      this.moveSelection({ start, end });
-
-      // reset node's everything after transform (we don't want to deal with that,
-      // just with regular x/y/width/height)
-      const node = this.$refs.spanSelection.getNode();
-      node.skewX(0);
-      node.skewY(0);
-      node.rotation(0);
-      node.scaleX(1);
-      node.scaleY(1);
-
-      this.handleSelection();
-    },
-  },
-};
-</script>