Moves labels and hover draw fns into renderers

Details: - Moves src/rendering/canvas/* into src/utils/. - Adds checkCollision, drawLabel and drawHover as mandatory NodeProgram methods - Adds checkCollision and drawLabel as mandatory EdgeProgram methods - Updates all existing programs (including in examples) so that they use the functions exported from src/utils - Updates sigma.ts to call those new methods instead of the ones from the settings - Removes labelRenderer, hoverRenderer and edgeLabelRenderer from settings
jacomyal · Sep 21, 2023 · 590a197 · 590a197
1 parent e64f8ab
commit 590a197
Show file tree

Hide file tree

Showing 21 changed files with 221 additions and 91 deletions.
diff --git a/examples/custom-rendering/node.border.ts b/examples/custom-rendering/node.border.ts
@@ -15,6 +15,9 @@
 import { NodeDisplayData, RenderParams } from "sigma/types";
 import { floatColor } from "sigma/utils";
 import { NodeProgram } from "sigma/rendering/webgl/programs/common/node";
+import { checkDiscNodeCollision } from "sigma/utils/node-collisions";
+import { drawDiscNodeLabel } from "sigma/utils/node-labels";
+import { drawDiscNodeHover } from "sigma/utils/node-hover";
 import VERTEX_SHADER_SOURCE from "!raw-loader!./node.border.vert.glsl";
 import FRAGMENT_SHADER_SOURCE from "!raw-loader!./node.border.frag.glsl";
 
@@ -23,6 +26,10 @@ const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
 const UNIFORMS = ["u_sizeRatio", "u_pixelRatio", "u_matrix"] as const;
 
 export default class NodeBorderProgram extends NodeProgram<typeof UNIFORMS[number]> {
+  checkCollision = checkDiscNodeCollision;
+  drawLabel = drawDiscNodeLabel;
+  drawHover = drawDiscNodeHover;
+
   getDefinition() {
     return {
       VERTICES: 1,

diff --git a/examples/tsconfig.json b/examples/tsconfig.json
@@ -8,6 +8,9 @@
       "sigma/types": ["../src/types"],
       "sigma/utils": ["../src/utils"],
       "sigma/utils/animate": ["../src/utils/animate"],
+      "sigma/utils/node-hover": ["../src/utils/node-hover"],
+      "sigma/utils/node-labels": ["../src/utils/node-labels"],
+      "sigma/utils/node-collisions": ["../src/utils/node-collisions"],
       "sigma/rendering/webgl/programs/edge.rectangle": ["../src/rendering/webgl/programs/edge.rectangle.ts"],
       "sigma/rendering/webgl/programs/edge.line": ["../src/rendering/webgl/programs/edge.line.ts"],
       "sigma/rendering/webgl/programs/node.image": ["../src/rendering/webgl/programs/node.image.ts"],

diff --git a/examples/webpack.config.js b/examples/webpack.config.js
@@ -7,6 +7,9 @@ module.exports = {
       "sigma/types": path.resolve(__dirname, "../src/types.ts"),
       "sigma/utils": path.resolve(__dirname, "../src/utils/"),
       "sigma/utils/animate": path.resolve(__dirname, "../src/utils/animate.ts"),
+      "sigma/utils/node-hover": path.resolve(__dirname, "../src/utils/node-hover"),
+      "sigma/utils/node-labels": path.resolve(__dirname, "../src/utils/node-labels"),
+      "sigma/utils/node-collisions": path.resolve(__dirname, "../src/utils/node-collisions"),
       "sigma/rendering/webgl/programs/edge": path.resolve(__dirname, "../src/rendering/webgl/programs/edge.ts"),
       "sigma/rendering/webgl/programs/edge.fast": path.resolve(
         __dirname,

diff --git a/src/rendering/webgl/programs/common/edge.ts b/src/rendering/webgl/programs/common/edge.ts
@@ -7,6 +7,8 @@
 import Sigma from "../../../../sigma";
 import { AbstractProgram, Program } from "./program";
 import { NodeDisplayData, EdgeDisplayData, RenderParams } from "../../../../types";
+import { EdgeCollisionDetectionFunction } from "../../../../utils/edge-collisions";
+import { EdgeLabelDrawingFunction } from "../../../../utils/edge-labels";
 
 export abstract class AbstractEdgeProgram extends AbstractProgram {
   abstract process(
@@ -15,6 +17,9 @@ export abstract class AbstractEdgeProgram extends AbstractProgram {
     targetData: NodeDisplayData,
     data: EdgeDisplayData,
   ): void;
+
+  abstract checkCollision: EdgeCollisionDetectionFunction;
+  abstract drawLabel: EdgeLabelDrawingFunction;
 }
 
 export abstract class EdgeProgram<Uniform extends string = string>
@@ -33,12 +38,16 @@ export abstract class EdgeProgram<Uniform extends string = string>
 
     return this.processVisibleItem(i, sourceData, targetData, data);
   }
+
   abstract processVisibleItem(
     i: number,
     sourceData: NodeDisplayData,
     targetData: NodeDisplayData,
     data: EdgeDisplayData,
   ): void;
+
+  abstract checkCollision: EdgeCollisionDetectionFunction;
+  abstract drawLabel: EdgeLabelDrawingFunction;
 }
 
 export interface EdgeProgramConstructor {
@@ -74,5 +83,12 @@ export function createEdgeCompoundProgram(programClasses: Array<EdgeProgramConst
     render(params: RenderParams): void {
       this.programs.forEach((program) => program.render(params));
     }
+
+    checkCollision(...args: Parameters<EdgeCollisionDetectionFunction>) {
+      return this.programs.some((program) => program.checkCollision(...args));
+    }
+    drawLabel(...args: Parameters<EdgeLabelDrawingFunction>) {
+      return this.programs[0].drawLabel(...args);
+    }
   };
 }
diff --git a/src/rendering/webgl/programs/common/node.ts b/src/rendering/webgl/programs/common/node.ts
@@ -6,10 +6,16 @@
  */
 import Sigma from "../../../../sigma";
 import { AbstractProgram, Program } from "./program";
-import { NodeDisplayData, RenderParams } from "../../../../types";
+import { NodeDisplayData, NonEmptyArray, RenderParams } from "../../../../types";
+import { NodeCollisionDetectionFunction } from "../../../../utils/node-collisions";
+import { NodeLabelDrawingFunction } from "../../../../utils/node-labels";
+import { NodeHoverDrawingFunction } from "../../../../utils/node-hover";
 
 export abstract class AbstractNodeProgram extends AbstractProgram {
   abstract process(offset: number, data: NodeDisplayData): void;
+  abstract checkCollision: NodeCollisionDetectionFunction;
+  abstract drawLabel: NodeLabelDrawingFunction;
+  abstract drawHover: NodeHoverDrawingFunction;
 }
 
 export abstract class NodeProgram<Uniform extends string = string>
@@ -28,7 +34,11 @@ export abstract class NodeProgram<Uniform extends string = string>
 
     return this.processVisibleItem(i, data);
   }
+
   abstract processVisibleItem(i: number, data: NodeDisplayData): void;
+  abstract checkCollision: NodeCollisionDetectionFunction;
+  abstract drawLabel: NodeLabelDrawingFunction;
+  abstract drawHover: NodeHoverDrawingFunction;
 }
 
 export interface NodeProgramConstructor {
@@ -43,14 +53,16 @@ export interface NodeProgramConstructor {
  * @param  {array}    programClasses - Program classes to combine.
  * @return {function}
  */
-export function createNodeCompoundProgram(programClasses: Array<NodeProgramConstructor>): NodeProgramConstructor {
+export function createNodeCompoundProgram(
+  programClasses: NonEmptyArray<NodeProgramConstructor>,
+): NodeProgramConstructor {
   return class NodeCompoundProgram implements AbstractNodeProgram {
-    programs: Array<AbstractNodeProgram>;
+    programs: NonEmptyArray<AbstractNodeProgram>;
 
     constructor(gl: WebGLRenderingContext, renderer: Sigma) {
       this.programs = programClasses.map((Program) => {
         return new Program(gl, renderer);
-      });
+      }) as NonEmptyArray<AbstractNodeProgram>;
     }
 
     reallocate(capacity: number): void {
@@ -64,5 +76,15 @@ export function createNodeCompoundProgram(programClasses: Array<NodeProgramConst
     render(params: RenderParams): void {
       this.programs.forEach((program) => program.render(params));
     }
+
+    checkCollision(...args: Parameters<NodeCollisionDetectionFunction>): boolean {
+      return this.programs.some((program) => program.checkCollision(...args));
+    }
+    drawLabel(...args: Parameters<NodeLabelDrawingFunction>): void {
+      return this.programs[0].drawLabel(...args);
+    }
+    drawHover(...args: Parameters<NodeHoverDrawingFunction>): void {
+      return this.programs[0].drawHover(...args);
+    }
   };
 }
diff --git a/src/rendering/webgl/programs/edge.arrowHead.ts b/src/rendering/webgl/programs/edge.arrowHead.ts
@@ -10,12 +10,17 @@ import { floatColor } from "../../../utils";
 import { EdgeProgram } from "./common/edge";
 import VERTEX_SHADER_SOURCE from "../shaders/edge.arrowHead.vert.glsl";
 import FRAGMENT_SHADER_SOURCE from "../shaders/edge.arrowHead.frag.glsl";
+import { checkStraightEdgeCollision } from "../../../utils/edge-collisions";
+import { drawStraightEdgeLabel } from "../../../utils/edge-labels";
 
 const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
 
 const UNIFORMS = ["u_matrix", "u_sizeRatio", "u_correctionRatio"] as const;
 
 export default class EdgeArrowHeadProgram extends EdgeProgram<typeof UNIFORMS[number]> {
+  checkCollision = checkStraightEdgeCollision;
+  drawLabel = drawStraightEdgeLabel;
+
   getDefinition() {
     return {
       VERTICES: 3,

diff --git a/src/rendering/webgl/programs/edge.clamped.ts b/src/rendering/webgl/programs/edge.clamped.ts
@@ -12,10 +12,15 @@ import EdgeRectangleProgram from "./edge.rectangle";
 import VERTEX_SHADER_SOURCE from "../shaders/edge.clamped.vert.glsl";
 import { EdgeDisplayData, NodeDisplayData } from "../../../types";
 import { floatColor } from "../../../utils";
+import { checkStraightEdgeCollision } from "../../../utils/edge-collisions";
+import { drawStraightEdgeLabel } from "../../../utils/edge-labels";
 
 const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
 
 export default class EdgeClampedProgram extends EdgeRectangleProgram {
+  checkCollision = checkStraightEdgeCollision;
+  drawLabel = drawStraightEdgeLabel;
+
   getDefinition() {
     return {
       ...super.getDefinition(),

diff --git a/src/rendering/webgl/programs/edge.line.ts b/src/rendering/webgl/programs/edge.line.ts
@@ -11,12 +11,17 @@ import { floatColor } from "../../../utils";
 import { EdgeProgram } from "./common/edge";
 import VERTEX_SHADER_SOURCE from "../shaders/edge.line.vert.glsl";
 import FRAGMENT_SHADER_SOURCE from "../shaders/edge.line.frag.glsl";
+import { checkStraightEdgeCollision } from "../../../utils/edge-collisions";
+import { drawStraightEdgeLabel } from "../../../utils/edge-labels";
 
 const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
 
 const UNIFORMS = ["u_matrix"] as const;
 
 export default class EdgeLineProgram extends EdgeProgram<typeof UNIFORMS[number]> {
+  checkCollision = checkStraightEdgeCollision;
+  drawLabel = drawStraightEdgeLabel;
+
   getDefinition() {
     return {
       VERTICES: 2,

diff --git a/src/rendering/webgl/programs/edge.rectangle.ts b/src/rendering/webgl/programs/edge.rectangle.ts
@@ -20,12 +20,17 @@ import { floatColor } from "../../../utils";
 import { EdgeProgram } from "./common/edge";
 import VERTEX_SHADER_SOURCE from "../shaders/edge.rectangle.vert.glsl";
 import FRAGMENT_SHADER_SOURCE from "../shaders/edge.rectangle.frag.glsl";
+import { checkStraightEdgeCollision } from "../../../utils/edge-collisions";
+import { drawStraightEdgeLabel } from "../../../utils/edge-labels";
 
 const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
 
 const UNIFORMS = ["u_matrix", "u_zoomRatio", "u_sizeRatio", "u_correctionRatio"] as const;
 
 export default class EdgeRectangleProgram extends EdgeProgram<typeof UNIFORMS[number]> {
+  checkCollision = checkStraightEdgeCollision;
+  drawLabel = drawStraightEdgeLabel;
+
   getDefinition() {
     return {
       VERTICES: 4,

diff --git a/src/rendering/webgl/programs/edge.triangle.ts b/src/rendering/webgl/programs/edge.triangle.ts
@@ -10,12 +10,17 @@ import { floatColor } from "../../../utils";
 import { EdgeProgram } from "./common/edge";
 import VERTEX_SHADER_SOURCE from "../shaders/edge.triangle.vert.glsl";
 import FRAGMENT_SHADER_SOURCE from "../shaders/edge.triangle.frag.glsl";
+import { checkStraightEdgeCollision } from "../../../utils/edge-collisions";
+import { drawStraightEdgeLabel } from "../../../utils/edge-labels";
 
 const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
 
 const UNIFORMS = ["u_matrix", "u_sizeRatio", "u_correctionRatio"] as const;
 
 export default class EdgeTriangleProgram extends EdgeProgram<typeof UNIFORMS[number]> {
+  checkCollision = checkStraightEdgeCollision;
+  drawLabel = drawStraightEdgeLabel;
+
   getDefinition() {
     return {
       VERTICES: 3,

diff --git a/src/rendering/webgl/programs/node.circle.ts b/src/rendering/webgl/programs/node.circle.ts
@@ -13,6 +13,9 @@ import { floatColor } from "../../../utils";
 import { NodeProgram } from "./common/node";
 import VERTEX_SHADER_SOURCE from "../shaders/node.circle.vert.glsl";
 import FRAGMENT_SHADER_SOURCE from "../shaders/node.circle.frag.glsl";
+import { checkDiscNodeCollision } from "../../../utils/node-collisions";
+import { drawDiscNodeLabel } from "../../../utils/node-labels";
+import { drawDiscNodeHover } from "../../../utils/node-hover";
 
 const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
 
@@ -23,6 +26,10 @@ export default class NodeCircleProgram extends NodeProgram<typeof UNIFORMS[numbe
   static readonly ANGLE_2 = (2 * Math.PI) / 3;
   static readonly ANGLE_3 = (4 * Math.PI) / 3;
 
+  checkCollision = checkDiscNodeCollision;
+  drawLabel = drawDiscNodeLabel;
+  drawHover = drawDiscNodeHover;
+
   getDefinition() {
     return {
       VERTICES: 3,

diff --git a/src/rendering/webgl/programs/node.image.ts b/src/rendering/webgl/programs/node.image.ts
@@ -12,6 +12,9 @@ import VERTEX_SHADER_SOURCE from "../shaders/node.image.vert.glsl";
 import FRAGMENT_SHADER_SOURCE from "../shaders/node.image.frag.glsl";
 import { NodeProgram, NodeProgramConstructor } from "./common/node";
 import Sigma from "../../../sigma";
+import { checkDiscNodeCollision } from "../../../utils/node-collisions";
+import { drawDiscNodeLabel } from "../../../utils/node-labels";
+import { drawDiscNodeHover } from "../../../utils/node-hover";
 
 // maximum size of single texture in atlas
 const MAX_TEXTURE_SIZE = 192;
@@ -201,6 +204,10 @@ export default function getNodeImageProgram(): NodeProgramConstructor {
   const UNIFORMS = ["u_sizeRatio", "u_pixelRatio", "u_matrix", "u_atlas"] as const;
 
   return class NodeImageProgram extends NodeProgram<typeof UNIFORMS[number]> {
+    checkCollision = checkDiscNodeCollision;
+    drawLabel = drawDiscNodeLabel;
+    drawHover = drawDiscNodeHover;
+
     getDefinition() {
       return {
         VERTICES: 1,

diff --git a/src/rendering/webgl/programs/node.point.ts b/src/rendering/webgl/programs/node.point.ts
@@ -12,12 +12,19 @@ import { floatColor } from "../../../utils";
 import { NodeProgram } from "./common/node";
 import VERTEX_SHADER_SOURCE from "../shaders/node.point.vert.glsl";
 import FRAGMENT_SHADER_SOURCE from "../shaders/node.point.frag.glsl";
+import { checkDiscNodeCollision } from "../../../utils/node-collisions";
+import { drawDiscNodeLabel } from "../../../utils/node-labels";
+import { drawDiscNodeHover } from "../../../utils/node-hover";
 
 const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
 
 const UNIFORMS = ["u_sizeRatio", "u_pixelRatio", "u_matrix"] as const;
 
 export default class NodePointProgram extends NodeProgram<typeof UNIFORMS[number]> {
+  checkCollision = checkDiscNodeCollision;
+  drawLabel = drawDiscNodeLabel;
+  drawHover = drawDiscNodeHover;
+
   getDefinition() {
     return {
       VERTICES: 1,

diff --git a/src/settings.ts b/src/settings.ts
@@ -8,9 +8,6 @@
 import { Attributes } from "graphology-types";
 
 import { assign } from "./utils";
-import drawLabel from "./rendering/canvas/label";
-import drawHover from "./rendering/canvas/hover";
-import drawEdgeLabel from "./rendering/canvas/edge-label";
 import { EdgeDisplayData, NodeDisplayData } from "./types";
 import NodePointProgram from "./rendering/webgl/programs/node.point";
 import EdgeRectangleProgram from "./rendering/webgl/programs/edge.rectangle";
@@ -58,10 +55,6 @@ export interface Settings {
   zIndex: boolean;
   minCameraRatio: null | number;
   maxCameraRatio: null | number;
-  // Renderers
-  labelRenderer: typeof drawLabel;
-  hoverRenderer: typeof drawHover;
-  edgeLabelRenderer: typeof drawEdgeLabel;
   // Lifecycle
   allowInvalidContainer: boolean;
 
@@ -112,11 +105,6 @@ export const DEFAULT_SETTINGS: Settings = {
   minCameraRatio: null,
   maxCameraRatio: null,
 
-  // Renderers
-  labelRenderer: drawLabel,
-  hoverRenderer: drawHover,
-  edgeLabelRenderer: drawEdgeLabel,
-
   // Lifecycle
   allowInvalidContainer: false,