Improve filter based on feedback

css/filter.css

@@ -1,5 +1,5 @@
 #filter {
-  width: 16%;
+  min-width: 100px;
   position: fixed;
   flex-direction: column;
   background-color: #f5f5f5;
@@ -33,4 +33,5 @@
 #filters {
   display: flex;
   flex-direction: column;
+  padding: 10px 0;
 }

css/main.css

@@ -8,3 +8,12 @@ body {
 .manipulation-tool {
   display: none;
 }
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+input[type="number"] {
+  -moz-appearance: textfield;
+}

index.html

@@ -17,9 +17,9 @@
   <div id="input-modal" class="modal-background">
     <div class="modal-content">
 
-      <p>¡Welcome to <span id="logo">
+      <p>Welcome to <span id="logo">
           <span id="logo-d">d</span><span id="logo-m">m</span><span id="logo-x">X</span>
-        </span>!</p>
+        </span></p>
 
       <div id="input-message">
       </div>

js/draw.js

@@ -1,4 +1,8 @@
-export function drawAll(ctx, parentLinks, childrenLinks, infoBoxes) {
+import { canvas, ctx } from "./main.js";
+
+export function drawAll(ctx, currentParticles) {
+  const { parentLinks, childrenLinks, infoBoxes } = currentParticles;
+
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   // console.time("drawParentLinks");
   for (const link of parentLinks) {
@@ -16,3 +20,32 @@ export function drawAll(ctx, parentLinks, childrenLinks, infoBoxes) {
   }
   // console.timeEnd("drawBoxes");
 }
+
+export function drawVisible(currentParticles, visibleParticles) {
+  const {
+    infoBoxes: visibleBoxes,
+    parentLinks: visibleParentLinks,
+    childrenLinks: visibleChildrenLinks,
+  } = visibleParticles;
+
+  const { parentLinks, childrenLinks, infoBoxes } = currentParticles;
+
+  const boundigClientRect = canvas.getBoundingClientRect();
+  ctx.clearRect(
+    0 - boundigClientRect.x,
+    0 - boundigClientRect.y,
+    window.innerWidth,
+    window.innerHeight
+  );
+  for (const linkId of visibleParentLinks) {
+    if (parentLinks[linkId] !== undefined)
+      parentLinks[linkId].draw(ctx, infoBoxes);
+  }
+  for (const linkId of visibleChildrenLinks) {
+    if (childrenLinks[linkId] !== undefined)
+      childrenLinks[linkId].draw(ctx, infoBoxes);
+  }
+  for (const boxId of visibleBoxes) {
+    infoBoxes[boxId].draw(ctx);
+  }
+}

js/events.js

@@ -0,0 +1,147 @@
+import { canvas, ctx } from "./main.js";
+import { drawAll, drawVisible } from "./draw.js";
+
+const mouseDown = function (
+  event,
+  currentParticles,
+  visibleParticles,
+  dragTools
+) {
+  event.preventDefault();
+  const boundigClientRect = canvas.getBoundingClientRect();
+  const mouseX = parseInt(event.clientX - boundigClientRect.x);
+  const mouseY = parseInt(event.clientY - boundigClientRect.y);
+
+  dragTools.prevMouseX = mouseX;
+  dragTools.prevMouseY = mouseY;
+
+  const infoBoxes = currentParticles.infoBoxes;
+  const visibleBoxes = visibleParticles.infoBoxes;
+  for (let i = visibleBoxes.length - 1; i >= 0; i--) {
+    if (infoBoxes[visibleBoxes[i]].isHere(mouseX, mouseY)) {
+      dragTools.draggedInfoBox = visibleBoxes[i];
+      dragTools.isDragging = true;
+      return;
+    }
+  }
+};
+
+const mouseUp = function (event, particlesHandler, dragTools) {
+  if (!dragTools.isDragging) {
+    return;
+  }
+
+  event.preventDefault();
+  dragTools.isDragging = false;
+
+  // console.time("drawAll");
+  drawAll(ctx, particlesHandler);
+  // console.timeEnd("drawAll");
+};
+
+const mouseOut = function (event, dragTools) {
+  if (!dragTools.isDragging) {
+    return;
+  }
+
+  event.preventDefault();
+  dragTools.isDragging = false;
+};
+
+const mouseMove = function (
+  event,
+  currentParticles,
+  visibleParticles,
+  dragTools
+) {
+  if (!dragTools.isDragging) {
+    return;
+  }
+  event.preventDefault();
+
+  const boundigClientRect = canvas.getBoundingClientRect();
+  const mouseX = parseInt(event.clientX - boundigClientRect.x);
+  const mouseY = parseInt(event.clientY - boundigClientRect.y);
+
+  const dx = mouseX - dragTools.prevMouseX;
+  const dy = mouseY - dragTools.prevMouseY;
+
+  const infoBox = currentParticles.infoBoxes[dragTools.draggedInfoBox];
+  infoBox.x += dx;
+  infoBox.y += dy;
+
+  // console.time("drawVisible");
+  drawVisible(currentParticles, visibleParticles);
+  // console.timeEnd("drawVisible");
+
+  dragTools.prevMouseX = mouseX;
+  dragTools.prevMouseY = mouseY;
+};
+
+const getVisible = function (currentParticles, visibleParticles) {
+  const boundigClientRect = canvas.getBoundingClientRect();
+
+  const { infoBoxes, parentLinks, childrenLinks } = currentParticles;
+
+  const visibleBoxes = [];
+  const visibleParentLinks = [];
+  const visibleChildrenLinks = [];
+
+  for (const box of infoBoxes) {
+    if (box === null) continue;
+    if (
+      box.isVisible(
+        0 - boundigClientRect.x,
+        0 - boundigClientRect.y,
+        window.innerWidth,
+        window.innerHeight
+      )
+    ) {
+      visibleBoxes.push(box.id);
+    }
+  }
+
+  for (const link of parentLinks) {
+    if (
+      link.isVisible(
+        0 - boundigClientRect.x,
+        0 - boundigClientRect.y,
+        window.innerWidth,
+        window.innerHeight,
+        infoBoxes
+      )
+    ) {
+      visibleParentLinks.push(link.id);
+    }
+  }
+
+  for (const link of childrenLinks) {
+    if (
+      link.isVisible(
+        0 - boundigClientRect.x,
+        0 - boundigClientRect.y,
+        window.innerWidth,
+        window.innerHeight,
+        infoBoxes
+      )
+    ) {
+      visibleChildrenLinks.push(link.id);
+    }
+  }
+
+  /*
+  console.log("Visible boxes: ", visibleBoxes);
+  console.log("Visible parentLinks: ", visibleParentLinks);
+  console.log("Visible childrenLinks: ", visibleChildrenLinks);
+  */
+
+  visibleParticles.infoBoxes = visibleBoxes;
+  visibleParticles.parentLinks = visibleParentLinks;
+  visibleParticles.childrenLinks = visibleChildrenLinks;
+};
+
+const onScroll = function (currentParticles, visibleParticles) {
+  getVisible(currentParticles, visibleParticles);
+};
+
+export { mouseDown, mouseUp, mouseOut, mouseMove, getVisible, onScroll };