fix isVisible functioon for objects + implement for links

js/draw/drag.js

@@ -8,32 +8,37 @@ export function dragStart(event) {
   const app = getApp();
   const container = getContainer();
 
+  const renderedBox = this.renderedBox;
+
   prevX = container.toLocal(event.data.global).x;
   prevY = container.toLocal(event.data.global).y;
 
-  this.zIndex = 2;
-  currentObject = this;
+  renderedBox.zIndex = 2;
+  currentObject = renderedBox;
 
   app.stage.on("pointermove", dragMove, this);
 }
 
 export function dragMove(event) {
   const container = getContainer();
+  const renderedBox = this.renderedBox;
 
   const eventX = container.toLocal(event.data.global).x;
   const eventY = container.toLocal(event.data.global).y;
 
   const deltaX = eventX - prevX;
   const deltaY = eventY - prevY;
 
-  this.position.x += deltaX;
-  this.position.y += deltaY;
+  this.x += deltaX;
+  this.y += deltaY;
+  renderedBox.position.x += deltaX;
+  renderedBox.position.y += deltaY;
 
-  this.cullArea = new Rectangle(
-    this.position.x,
-    this.position.y,
-    this.width,
-    this.height
+  renderedBox.cullArea = new Rectangle(
+    renderedBox.position.x,
+    renderedBox.position.y,
+    renderedBox.width,
+    renderedBox.height
   );
 
   prevX = eventX;

js/draw/link.js

@@ -68,6 +68,8 @@ export function drawBezierLink(link) {
     color: link.color,
   });
 
+  link.renderedLink = curve;
+
   const boxFrom = link.from.renderedBox;
   const boxTo = link.to.renderedBox;
 
@@ -92,8 +94,13 @@ export function drawBezierLink(link) {
         toY: toY,
         color: link.color,
       });
+      link.renderedLink = curve;
+      link.renderedLink.renderable = link.isVisible();
       container.addChild(curve);
     });
+    boxFrom.on("pointerup", () => {
+      boxFrom.off("pointermove");
+    });
   });
 
   boxTo.on("pointerdown", () => {
@@ -115,8 +122,13 @@ export function drawBezierLink(link) {
         toY: toY,
         color: link.color,
       });
+      link.renderedLink = curve;
+      link.renderedLink.renderable = link.isVisible();
       container.addChild(curve);
     });
+    boxTo.on("pointerup", () => {
+      boxTo.off("pointermove");
+    });
   });
 
   container.addChild(curve);

js/draw/renderable.js

@@ -1,17 +1,38 @@
 import { Rectangle } from "../pixi.min.mjs";
 
 export function setRenderable(objects) {
-  for (const { collection } of Object.values(objects.datatypes)) {
+  for (const { collection, oneToMany, oneToOne } of Object.values(
+    objects.datatypes
+  )) {
     for (const object of collection) {
       const renderedBox = object.renderedBox;
+
       renderedBox.cullArea = new Rectangle(
-        renderedBox.x,
-        renderedBox.y,
+        renderedBox.position.x,
+        renderedBox.position.y,
         renderedBox.width,
         renderedBox.height
       );
 
       renderedBox.renderable = object.isVisible();
     }
+
+    for (const links of Object.values(oneToMany)) {
+      for (const link of links) {
+        link.renderedLink.renderable = link.isVisible();
+      }
+    }
+
+    for (const links of Object.values(oneToOne)) {
+      for (const link of links) {
+        link.renderedLink.renderable = link.isVisible();
+      }
+    }
+  }
+
+  for (const associations of Object.values(objects.associations)) {
+    for (const association of associations) {
+      association.renderedLink.renderable = association.isVisible();
+    }
   }
 }

js/types/links.js

@@ -1,3 +1,4 @@
+import { getApp, getContainer } from "../draw/app.js";
 import { drawBezierLink } from "../draw/link.js";
 
 const colors = {
@@ -23,6 +24,36 @@ export class Link {
   draw() {
     drawBezierLink(this);
   }
+
+  isVisible() {
+    const boxFrom = this.from;
+    const boxTo = this.to;
+
+    const fromX = boxFrom.x + boxFrom.width / 2;
+    const fromY = boxFrom.y + boxFrom.height;
+    const toX = boxTo.x + boxTo.width / 2;
+    const toY = boxTo.y;
+
+    const boxX = Math.min(fromX, toX);
+    const boxWidth = Math.abs(fromX - toX);
+    const boxY = Math.min(fromY, toY);
+    const boxHeight = Math.abs(fromY - toY);
+
+    const app = getApp();
+    const container = getContainer();
+
+    const x = Math.abs(container.x);
+    const y = Math.abs(container.y);
+    const width = app.renderer.width;
+    const height = app.renderer.height;
+
+    return (
+      x + width > boxX &&
+      x < boxX + boxWidth &&
+      y + height > boxY &&
+      y < boxY + boxHeight
+    );
+  }
 }
 
 class ParentLink extends Link {

js/types/objects.js

@@ -14,7 +14,7 @@ import {
 import { textToSVG } from "../lib/generate-svg.js";
 import { dragStart } from "../draw/drag.js";
 import { getApp, getContainer } from "../draw/app.js";
-import { Culler, Rectangle } from "../pixi.min.mjs";
+import { Rectangle } from "../pixi.min.mjs";
 
 const IMAGE_MARGIN = 10;
 const IMAGE_SIZE = 40;
@@ -43,7 +43,7 @@ class EDMObject {
 
     box.cursor = "pointer";
     box.eventMode = "static";
-    box.on("pointerdown", dragStart, box);
+    box.on("pointerdown", dragStart, this);
     box.cullable = true;
     box.cullArea = new Rectangle(box.x, box.y, box.width, box.height);