edit.html

<meta charset="UTF-8">

<style>
body {
    margin: 20px 40px;
}
a {
    color: dodgerblue;
}
#container {
    position: relative;
    width: 100%;
    height: auto;
}
#image {
    width: 100%;
    height: auto;
    object-fit: contain;
    border: 1px solid black;
}
#container:hover > .bbox {
    transform: translate(-1px, -1px);
    border: 2px dashed dodgerblue;
    border-radius: 4px;
}
.bbox-creation {
    position: absolute;
    background: rgba(0, 155, 255, 0.5);
}
.bbox-creation > * {
    display: none;
}
.bbox {
    position: absolute;
    background: none;
    border: 1px dashed black;
}
.bbox > * {
    display: block;
}
#header {
  display: flex;
  align-items: center;
  margin: 10px 0px 20px 0px;
}
#rename {
  border: 1px solid black;
  padding: 5px;
  margin: 0px 10px 0px 0px;
}
#file {
  width: 85px;
  color: transparent;
  padding: 2px;
}
</style>

<a href="/">hyperpixel</a>
<div id="home" style="display: flex; flex-direction: column">
    <div id="header">
        <input id="rename" type="text" value="/" placeholder="Insert name"></input>
        <input id="file" type="file" accept="image/*"/>
        <button id="delete">Delete</button>
    </div>
    <div id="container">
        <img id="image"></img>
    </div>
    <div id="backlinks" style="margin-top: 11px">
    </div>
    <code id="text" style="margin-top: 11px">
    </code>
</div>

<script src="/js/annotation.js" type="text/javascript"></script>

<script>
    // Reactive data
    const imageId = window.location.pathname.slice(1);
    let db = {}
    let data = {};
    let annotations = {};
    let backlinks = [];

    const ws = new WebSocket("ws://localhost:1234/ws")
    const send = (msg) => ws.send(JSON.stringify(msg));
    window.send = send;

    ws.onopen = () => send({op: "SUBSCRIBE", path: []});
    
    ws.onmessage = (e) => {
      db = JSON.parse(e.data);
      data = db["images"][imageId];
      annotations = {};
      backlinks = [];

      for (const [a_id, annotation] of Object.entries(db["annotations"])) {
        if (annotation["from"] == imageId) {
          annotations[a_id] = annotation;
        }
        if (annotation["to"] == imageId) {
          backlinks.push(annotation["from"]);
        }
      }

      render();
    }

    // References to dom
    const container = document.getElementById("container");
    const image = document.getElementById("image");

    let notes = [];
      
    // Resize annotations on window resize
    window.addEventListener("resize", () => {
      const r = container.getBoundingClientRect();
      notes.forEach(n => n.setAnchor(r.width, r.height));
    })

    // Annotation creation via mouse-drag
    container.addEventListener("mousedown", e => {
      e.preventDefault();
      e.stopPropagation();

      const ks = Object.keys(db["annotations"]).map(k => parseInt(k));
      let nextId = (Math.max(0, ...ks) + 1).toString();

      const r = e.target.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width;
      const y = (e.clientY - r.top) / r.height;

      const entry = {x, y, w: 0, h: 0, href: ""}
      const note = new Annotation({
        id: nextId,
        imageId: imageId,
        annotation: entry,
        otherImages: db["images"],
        sendDB: send
      });
      note.setAnchor(r.width, r.height);
      note.bbox.classList.add("bbox-creation");
      container.appendChild(note.bbox);
      notes.push(note);

      const mousemove = e => {
        const r = e.target.getBoundingClientRect();
        note.setSize(
          (e.clientX - r.left) / r.width - note.x, 
          (e.clientY - r.top) / r.height - note.y
        );
      }

      const mouseup = e => {
        if (note.w < 0.05 && note.h < 0.05) {
          // Ignore bboxes smaller than 5% of image
          note.bbox.remove();
        } else {
          note.bbox.classList.remove("bbox-creation");
          note.bbox.classList.add("bbox");
        }
        document.removeEventListener('mousemove', mousemove);
        document.removeEventListener('mouseup', mouseup);
      }

      document.addEventListener("mousemove", mousemove);
      document.addEventListener("mouseup", mouseup);
    });

    // Renaming annnotation is persisted
    const rename = document.getElementById("rename");
    rename.value = imageId;
    rename.onchange = e => {
      send({
        op: "RENAME",
        path: ["images", imageId],
        data: e.target.value
      })
    }

    // Allow uploading the image through input or drop
    const saveImage = (blob) => {
      const fr = new FileReader();
      fr.onload = () => {
        image.src = fr.result;
      }
      fr.readAsDataURL(blob);

      const form = new FormData();
      form.append('file', blob);
      form.append('image_id', imageId);
      fetch("/upload", {
        method: "POST",
        body: form,
      })
    }

    const filepicker = document.getElementById("file");
    filepicker.onchange = e => {
      saveImage(e.target.files[0]);
    }

    container.addEventListener("dragenter", e => {
        e.preventDefault();
        image.style.opacity = 0.5;
    });
    container.addEventListener("dragover", e => {
        e.preventDefault();
    });
    container.addEventListener("dragleave", e => {
        e.preventDefault();
        image.style.opacity = 1.0;
    });
    container.addEventListener("drop", e => {
        e.preventDefault();
        image.style.opacity = 1.0;
        saveImage(e.dataTransfer.files[0])
    });

    // Allow deleting the image
    const del = document.getElementById("delete");
    del.onclick = async () => {
      send({
        op: "DELETE",
        path: ["images", imageId],
      })
      window.location = "/";
    }

    // Render cycle called when ever there is new data
    const render = () => {
      if (data) {
        image.onload = () => {
          // Clear annotations
          notes.forEach(n => n.delete());
          notes = [];

          // Draw annotations
          const r = container.getBoundingClientRect();
          for (const [a_id, annotation] of Object.entries(annotations)) {
            const note = new Annotation({
              id: a_id,
              imageId: imageId,
              annotation: annotation,
              otherImages: db["images"],
              sendDB: send
            });
            note.setAnchor(r.width, r.height);
            note.bbox.classList.add("bbox");
            container.appendChild(note.bbox);
            notes.push(note);
          }

          // Add backlinks
          const backlinkArea = document.getElementById("backlinks");
          backlinkArea.innerHTML = "";

          for (const imageId of backlinks) {
            const backlink = document.createElement("a");
            backlink.innerHTML = `/${imageId}`;
            backlink.href = `/${imageId}`;
            backlink.style.marginRight = "11px";
            backlinkArea.appendChild(backlink);
          }

          // Add text
          const text = document.getElementById("text");
          text.innerHTML = data["text"];
        }

        const path = data["path"];
        image.src = `/files/${path}`;
      }
    }
</script>