✨ Add POC

argilla-frontend/components/features/annotation/container/fields/RecordFields.vue

@@ -13,29 +13,17 @@
       :class="[isImageType ? 'fields__container--image' : '']"
       :key="id"
     >
-      <SpanAnnotationTextField
+      <SpanAnnotationImageField
         v-if="hasSpanQuestion(name)"
-        :id="`${id}-${record.id}-span-field`"
-        :name="name"
-        :title="title"
-        :fieldText="content"
         :spanQuestion="getSpanQuestion(name)"
-        :searchText="recordCriteria.committed.searchText.value.text"
       />
-      <TextField
-        v-else-if="isTextType"
-        :name="name"
-        :title="title"
-        :fieldText="content"
-        :useMarkdown="settings.use_markdown"
-        :searchText="recordCriteria.committed.searchText.value.text"
-      />
-      <ImageField v-else :name="name" :title="title" :content="content" />
     </div>
   </div>
 </template>
 <script>
+import SpanAnnotationImageField from "./image-annotation/SpanAnnotationImageField.vue";
 export default {
+  components: { SpanAnnotationImageField },
   props: {
     record: {
       type: Object,

argilla-frontend/components/features/annotation/container/fields/image-annotation/SpanAnnotationImageField.vue

@@ -0,0 +1,52 @@
+<template>
+  <div style="position: relative" id="span-image-field-container">
+    <canvas id="canvas" width="800" height="600"></canvas>
+  </div>
+</template>
+<script>
+import { useSpanAnnotationImageField } from "./useSpanAnnotationImageField";
+
+export default {
+  props: {
+    spanQuestion: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props) {
+    return useSpanAnnotationImageField({
+      imageURL:
+        "https://www.adslzone.net/app/uploads-adslzone.net/2021/03/Fotografo-haciendo-foto.jpg",
+      ...props,
+    });
+  },
+};
+</script>
+
+<style lang="scss">
+#span-image-field-container {
+  overflow: scroll;
+}
+#canvas {
+  position: relative;
+  max-width: none;
+}
+.delete-btn {
+  position: absolute;
+  background-color: red;
+  color: white;
+  border: none;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  text-align: center;
+  line-height: 20px;
+  font-size: 12px;
+}
+.annotation-text {
+  position: absolute;
+  background-color: white;
+  padding: 5px;
+  border: 1px solid black;
+}
+</style>

argilla-frontend/components/features/annotation/container/fields/image-annotation/useSpanAnnotationImageField.ts

@@ -0,0 +1,213 @@
+import { onMounted } from "vue";
+import { Question } from "~/v1/domain/entities/question/Question";
+import { SpanQuestionAnswer } from "~/v1/domain/entities/question/QuestionAnswer";
+
+interface SpanAnnotationImageFieldProps {
+  imageURL: string;
+  spanQuestion: Question;
+}
+
+type EntitySelected = {
+  id: string;
+  value: string;
+  text: string;
+  color: string;
+};
+type UISpan = {
+  entity: EntitySelected;
+  id: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export const useSpanAnnotationImageField = ({
+  imageURL,
+  spanQuestion,
+}: SpanAnnotationImageFieldProps) => {
+  const img = new Image();
+  let annotations: UISpan[] =
+    JSON.parse(localStorage.getItem("annotations")) || [];
+  let currentRect: UISpan = null;
+  let entitySelected: EntitySelected = null;
+
+  let isDrawing = false;
+  let canvas;
+  let context;
+  let startX;
+  let startY;
+
+  onMounted(() => {
+    canvas = document.getElementById("canvas") as HTMLCanvasElement;
+    context = canvas.getContext("2d");
+
+    img.src = imageURL;
+
+    img.onload = () => {
+      canvas.width = img.width;
+      canvas.height = img.height;
+      context.drawImage(img, 0, 0);
+      drawAnnotations();
+    };
+
+    canvas.addEventListener("mousedown", (e) => {
+      startX = e.offsetX;
+      startY = e.offsetY;
+      isDrawing = true;
+      const answer = spanQuestion.answer as SpanQuestionAnswer;
+      entitySelected = answer.options.find((e) => e.isSelected);
+      if (!entitySelected) return;
+
+      currentRect = {
+        x: startX,
+        y: startY,
+        width: 0,
+        height: 0,
+        entity: {
+          ...entitySelected,
+        },
+        id: createID(),
+      };
+    });
+
+    canvas.addEventListener("mousemove", (e) => {
+      if (isDrawing) {
+        const currentX = e.offsetX;
+        const currentY = e.offsetY;
+        currentRect.width = currentX - startX;
+        currentRect.height = currentY - startY;
+
+        context.clearRect(0, 0, canvas.width, canvas.height);
+        context.drawImage(img, 0, 0);
+
+        drawAnnotations();
+
+        drawRectangle(currentRect);
+      }
+    });
+
+    canvas.addEventListener("mouseup", () => {
+      isDrawing = false;
+
+      addNewAnnotation(currentRect);
+
+      drawAnnotations();
+
+      saveAnnotations();
+    });
+
+    canvas.addEventListener("mouseout", () => {
+      isDrawing = false;
+    });
+  });
+
+  const removeAnnotation = (rect) => {
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    context.drawImage(img, 0, 0);
+
+    annotations = annotations.filter((r) => r.id !== rect.id);
+    saveAnnotations();
+
+    drawAnnotations();
+  };
+
+  const addNewAnnotation = (rect) => {
+    if (rect.width === 0 || rect.height === 0) {
+      return;
+    }
+
+    if (rect.width < 0) {
+      rect.x += rect.width;
+      rect.width *= -1;
+    }
+
+    if (rect.height < 0) {
+      rect.y += rect.height;
+      rect.height *= -1;
+    }
+
+    if (!entitySelected) return;
+
+    annotations = [
+      ...annotations,
+      {
+        id: createID(),
+        entity: {
+          ...entitySelected,
+        },
+        ...rect,
+      },
+    ];
+
+    saveAnnotations();
+  };
+
+  const drawAnnotations = () => {
+    clearButtons();
+    clearText();
+    annotations.forEach((rect) => {
+      drawRectangle(rect);
+
+      drawDeleteButton(rect);
+      drawText(rect);
+    });
+  };
+
+  const saveAnnotations = () => {
+    localStorage.setItem("annotations", JSON.stringify(annotations));
+  };
+
+  const createID = () => {
+    return Math.random().toString(36).substring(2, 9);
+  };
+
+  const drawRectangle = (rect: UISpan) => {
+    context.beginPath();
+    context.rect(rect.x, rect.y, rect.width, rect.height);
+    context.strokeStyle = rect.entity.color;
+    context.lineWidth = 2;
+    context.stroke();
+  };
+
+  const drawDeleteButton = (rect: UISpan) => {
+    const btn = document.createElement("button");
+    btn.className = "delete-btn";
+    btn.innerText = "X";
+    btn.style.left = `${canvas.offsetLeft + rect.x + rect.width - 10}px`;
+    btn.style.top = `${canvas.offsetTop + rect.y - 10}px`;
+    btn.onclick = () => {
+      removeAnnotation(rect);
+    };
+
+    document.getElementById("span-image-field-container").appendChild(btn);
+  };
+
+  const drawText = (rect: UISpan) => {
+    const p = document.createElement("p");
+    p.className = "annotation-text";
+    p.innerText = rect.entity.text;
+    p.style.left = `${canvas.offsetLeft + rect.x}px`;
+    p.style.top = `${canvas.offsetTop + rect.y + rect.height + 5}px`;
+    document.getElementById("span-image-field-container").appendChild(p);
+  };
+
+  const clearButtons = () => {
+    const buttons = document.querySelectorAll(".delete-btn");
+    buttons.forEach((button) => button.remove());
+  };
+
+  const clearText = () => {
+    const texts = document.querySelectorAll(".annotation-text");
+    texts.forEach((text) => text.remove());
+  };
+
+  // const clearAll = () => {
+  //   annotations.forEach((rect) => {
+  //     removeAnnotation(rect);
+  //   });
+
+  //   clearText();
+  //   clearButtons();
+  // };
+};