cull correctly, huge improvement

js/draw/app.js

@@ -1,4 +1,10 @@
-import { Application, Container, Culler } from "../pixi.min.mjs";
+import {
+  Application,
+  Container,
+  Culler,
+  CullerPlugin,
+  extensions,
+} from "../pixi.min.mjs";
 import { dragEnd } from "./drag.js";
 import { addScroll } from "./scroll.js";
 
@@ -26,7 +32,7 @@ const createApp = async () => {
   return app;
 };
 
-export const createContainer = (app) => {
+export const createContainer = (app, objects) => {
   const container = new Container();
   pixi.container = container;
 
@@ -43,7 +49,7 @@ export const createContainer = (app) => {
   app.stage.hitArea = app.screen;
   app.stage.on("pointerup", dragEnd);
   app.stage.on("pointerupoutside", dragEnd);
-  addScroll(app);
+  addScroll(app, objects);
 };
 
 export const saveSize = (width, height) => {

js/draw/drag.js

@@ -1,3 +1,4 @@
+import { Rectangle } from "../pixi.min.mjs";
 import { getApp, getContainer } from "./app.js";
 
 let currentObject;
@@ -28,6 +29,13 @@ export function dragMove(event) {
   this.position.x += deltaX;
   this.position.y += deltaY;
 
+  this.cullArea = new Rectangle(
+    this.position.x,
+    this.position.y,
+    this.width,
+    this.height
+  );
+
   prevX = eventX;
   prevY = eventY;
 }

js/draw/render.js

@@ -4,7 +4,7 @@ import { scroll } from "../views/views.js";
 export async function renderObjects(objects) {
   const app = getApp();
   app.stage.removeChildren();
-  createContainer(app);
+  createContainer(app, objects);
 
   const datatypes = objects.datatypes;
   const associations = objects.associations;

js/draw/renderable.js

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

js/draw/scroll.js

@@ -1,4 +1,5 @@
 import { getApp, getContainerSize, getContainer } from "./app.js";
+import { setRenderable } from "./renderable.js";
 
 const SPEED = 0.5;
 
@@ -22,7 +23,7 @@ export const scrollTopCenter = () => {
   return { x, y };
 };
 
-export const addScroll = (app) => {
+export const addScroll = (app, objects) => {
   const container = getContainer();
   const renderer = app.renderer;
 
@@ -55,5 +56,7 @@ export const addScroll = (app) => {
         container.y = newYPosition;
       }
     }
+
+    setRenderable(objects);
   });
 };

js/types/objects.js

@@ -13,6 +13,8 @@ import {
 } from "../draw/box.js";
 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";
 
 const IMAGE_MARGIN = 10;
 const IMAGE_SIZE = 40;
@@ -37,12 +39,13 @@ class EDMObject {
     box.interactiveChildren = false;
     addBox(box);
     box.position.set(this.x, this.y);
-    box.cullable = true;
     const nextY = addTitleToBox(this.constructor.name, box);
 
     box.cursor = "pointer";
     box.eventMode = "static";
     box.on("pointerdown", dragStart, box);
+    box.cullable = true;
+    box.cullArea = new Rectangle(box.x, box.y, box.width, box.height);
 
     addHoverModal(box, this.objectModalLines());
     return [box, nextY];
@@ -52,6 +55,23 @@ class EDMObject {
     const collectionName = "Collection: " + this.collectionName;
     return [collectionName];
   }
+
+  isVisible() {
+    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 > this.x &&
+      x < this.x + this.width &&
+      y + height > this.y &&
+      y < this.y + this.height
+    );
+  }
 }
 
 export class MCParticle extends EDMObject {

js/views/views.js

@@ -6,6 +6,7 @@ import { emptyViewMessage, hideEmptyViewMessage } from "../lib/messages.js";
 import { showViewInformation, hideViewInformation } from "../information.js";
 import { renderObjects } from "../draw/render.js";
 import { getContainer, saveSize } from "../draw/app.js";
+import { setRenderable } from "../draw/renderable.js";
 
 const currentView = {};
 
@@ -91,6 +92,7 @@ const drawView = async (view) => {
   }
 
   await renderObjects(viewObjects);
+  setRenderable(viewCurrentObjects);
 
   filters(viewObjects, viewCurrentObjects);
 };