refactor(onlyRenderVisible): change from nodes to elements #677

src/store/index.ts

@@ -45,10 +45,12 @@ export interface StoreModel {
   viewportBox: Computed<StoreModel, Rect>;
   transform: Transform;
   elements: Elements;
+  visibleNodes: Computed<StoreModel, Node[]>;
   nodes: Computed<StoreModel, Node[]>;
   edges: Computed<StoreModel, Edge[]>;
   selectedElements: Elements | null;
   selectedNodesBbox: Rect;
+  onlyRenderVisibleElements: boolean;
 
   d3Zoom: ZoomBehavior<Element, unknown> | null;
   d3Selection: D3Selection<Element, unknown, null, undefined> | null;
@@ -131,6 +133,8 @@ export interface StoreModel {
   unsetUserSelection: Action<StoreModel>;
 
   setMultiSelectionActive: Action<StoreModel, boolean>;
+
+  setOnlyRenderVisibleElements: Action<StoreModel, boolean>;
 }
 
 export const storeModel: StoreModel = {
@@ -140,9 +144,19 @@ export const storeModel: StoreModel = {
   transform: [0, 0, 1],
   elements: [],
   nodes: computed((state) => state.elements.filter(isNode)),
+  visibleNodes: computed((state) => {
+    if (!state.onlyRenderVisibleElements) {
+      return state.nodes;
+    }
+
+    const viewportBox = { x: 0, y: 0, width: state.width, height: state.height };
+
+    return getNodesInside(state.nodes, viewportBox, state.transform, true);
+  }),
   edges: computed((state) => state.elements.filter(isEdge)),
   selectedElements: null,
   selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },
+  onlyRenderVisibleElements: true,
 
   d3Zoom: null,
   d3Selection: null,
@@ -440,6 +454,10 @@ export const storeModel: StoreModel = {
   setMultiSelectionActive: action((state, isActive) => {
     state.multiSelectionActive = isActive;
   }),
+
+  setOnlyRenderVisibleElements: action((state, onlyRenderVisible) => {
+    state.onlyRenderVisibleElements = onlyRenderVisible;
+  }),
 };
 
 const nodeEnv: string = (typeof __ENV__ !== 'undefined' && __ENV__) as string;