@react-fabric/graph 1.0.0-beta.58

package/src/programs/node-image/factory.ts

@@ -0,0 +1,301 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+import { isSvgPath } from "@react-fabric/utilities";
+import { type Attributes } from "graphology-types";
+import type Sigma from "sigma";
+import {
+  type NodeHoverDrawingFunction,
+  type NodeLabelDrawingFunction,
+  NodeProgram,
+  type NodeProgramType,
+  type ProgramInfo,
+} from "sigma/rendering";
+import { type NodeDisplayData, type RenderParams } from "sigma/types";
+import { floatColor } from "sigma/utils";
+import { type EdgeAttributes, type NodeAttributes } from "../../types";
+import FRAGMENT_SHADER_SOURCE from "./frag.glsl";
+import {
+  type Atlas,
+  DEFAULT_TEXTURE_MANAGER_OPTIONS,
+  TextureManager,
+  type TextureManagerOptions,
+} from "./texture";
+import VERTEX_SHADER_SOURCE from "./vert.glsl";
+
+/* istanbul ignore file */
+
+const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
+
+interface CreateNodeImageProgramOptions<
+  N extends Attributes,
+  E extends Attributes,
+  G extends Attributes,
+> extends TextureManagerOptions {
+  // - If "background", color will be used to color full node behind the image.
+  // - If "color", color will be used to color image pixels (for pictograms)
+  drawingMode: "background" | "color";
+  // If true, the images are always cropped to the circle
+  keepWithinCircle: boolean;
+  // Allows overriding drawLabel and drawHover returned class static methods.
+  drawLabel: NodeLabelDrawingFunction<N, E, G> | undefined;
+  drawHover: NodeHoverDrawingFunction<N, E, G> | undefined;
+  // The padding should be expressed as a [0, 1] percentage.
+  // A padding of 0.05 will always be 5% of the diameter of a node.
+  padding: number;
+  // Allows using a different color attribute name.
+  colorAttribute: string;
+}
+
+const DEFAULT_CREATE_NODE_IMAGE_OPTIONS: CreateNodeImageProgramOptions<
+  Attributes,
+  Attributes,
+  Attributes
+> = {
+  ...DEFAULT_TEXTURE_MANAGER_OPTIONS,
+  drawingMode: "background",
+  keepWithinCircle: true,
+  drawLabel: undefined,
+  drawHover: undefined,
+  padding: 0,
+  colorAttribute: "color",
+};
+
+const UNIFORMS = [
+  "u_sizeRatio",
+  "u_correctionRatio",
+  "u_cameraAngle",
+  "u_percentagePadding",
+  "u_matrix",
+  "u_colorizeImages",
+  "u_keepWithinCircle",
+  "u_atlas",
+] as const;
+
+/**
+ * To share the texture between the program instances of the graph and the
+ * hovered nodes (to prevent some flickering, mostly), this program must be
+ * "built" for each sigma instance:
+ */
+export default function getNodeImageProgram(
+  options?: Partial<
+    CreateNodeImageProgramOptions<
+      NodeAttributes & { bg: string; opacity: number },
+      EdgeAttributes,
+      Attributes
+    >
+  >,
+): NodeProgramType<
+  NodeAttributes & { bg: string; opacity: number },
+  EdgeAttributes
+> {
+  const {
+    drawHover,
+    drawLabel,
+    drawingMode,
+    keepWithinCircle,
+    padding,
+    colorAttribute,
+    ...textureManagerOptions
+  }: CreateNodeImageProgramOptions<
+    NodeAttributes & { bg: string; opacity: number },
+    EdgeAttributes,
+    Attributes
+  > = {
+    ...DEFAULT_CREATE_NODE_IMAGE_OPTIONS,
+    ...(options ?? {}),
+    drawLabel: undefined,
+    drawHover: undefined,
+  };
+
+  /**
+   * This texture manager is shared between all instances of this exact class,
+   * returned by this call to getNodeProgramImage. This means that remounting
+   * the sigma instance will not reload the images and regenerate the texture.
+   */
+  const textureManager = new TextureManager(textureManagerOptions);
+
+  return class NodeImageProgram extends NodeProgram<
+    (typeof UNIFORMS)[number],
+    NodeAttributes & { bg: string; opacity: number },
+    EdgeAttributes,
+    Attributes
+  > {
+    static readonly ANGLE_1 = (1 * Math.PI) / 4;
+    static readonly ANGLE_2 = (3 * Math.PI) / 4;
+    static readonly ANGLE_3 = (5 * Math.PI) / 4;
+    static readonly ANGLE_4 = (7 * Math.PI) / 4;
+
+    static drawLabel = drawLabel;
+    static drawHover = drawHover;
+
+    getDefinition() {
+      return {
+        VERTICES: 4,
+        VERTEX_SHADER_SOURCE,
+        FRAGMENT_SHADER_SOURCE,
+        METHOD: WebGLRenderingContext.TRIANGLE_FAN,
+        UNIFORMS,
+        ATTRIBUTES: [
+          { name: "a_position", size: 2, type: FLOAT },
+          { name: "a_size", size: 1, type: FLOAT },
+          { name: "a_opacity", size: 1, type: FLOAT },
+          { name: "a_colorMode", size: 1, type: FLOAT },
+          { name: "a_fill", size: 4, type: UNSIGNED_BYTE, normalized: true },
+          { name: "a_color", size: 4, type: UNSIGNED_BYTE, normalized: true },
+          { name: "a_id", size: 4, type: UNSIGNED_BYTE, normalized: true },
+          { name: "a_texture", size: 4, type: FLOAT },
+        ],
+        CONSTANT_ATTRIBUTES: [{ name: "a_angle", size: 1, type: FLOAT }],
+        CONSTANT_DATA: [
+          [NodeImageProgram.ANGLE_1],
+          [NodeImageProgram.ANGLE_2],
+          [NodeImageProgram.ANGLE_3],
+          [NodeImageProgram.ANGLE_4],
+        ],
+      };
+    }
+
+    atlas: Atlas;
+    texture: WebGLTexture;
+    textureImage: ImageData;
+    latestRenderParams?: RenderParams;
+    textureManagerCallback: () => void;
+
+    constructor(
+      gl: WebGLRenderingContext,
+      pickingBuffer: WebGLFramebuffer | null,
+      renderer: Sigma<
+        NodeAttributes & { bg: string; opacity: number },
+        EdgeAttributes,
+        Attributes
+      >,
+    ) {
+      super(gl, pickingBuffer, renderer);
+
+      this.textureManagerCallback = () => {
+        if (!this) return;
+
+        if (this.bindTexture) {
+          this.atlas = textureManager.getAtlas();
+          this.textureImage = textureManager.getTexture();
+          this.bindTexture();
+          if (this.latestRenderParams) this.render(this.latestRenderParams);
+        }
+
+        if (renderer?.refresh) renderer.refresh();
+      };
+      textureManager.on(
+        TextureManager.NEW_TEXTURE_EVENT,
+        this.textureManagerCallback,
+      );
+
+      this.atlas = textureManager.getAtlas();
+      this.textureImage = textureManager.getTexture();
+      this.texture = gl.createTexture() as AnyObject;
+      this.bindTexture();
+    }
+
+    kill() {
+      textureManager.off(
+        TextureManager.NEW_TEXTURE_EVENT,
+        this.textureManagerCallback,
+      );
+    }
+
+    bindTexture() {
+      const gl = this.normalProgram.gl;
+
+      gl.bindTexture(gl.TEXTURE_2D, this.texture);
+      gl.texImage2D(
+        gl.TEXTURE_2D,
+        0,
+        gl.RGBA,
+        gl.RGBA,
+        gl.UNSIGNED_BYTE,
+        this.textureImage,
+      );
+      gl.generateMipmap(gl.TEXTURE_2D);
+    }
+
+    protected renderProgram(params: RenderParams, programInfo: ProgramInfo) {
+      if (!programInfo.isPicking) {
+        // Rebind texture (since it's been just unbound by picking):
+        const gl = programInfo.gl;
+        gl.bindTexture(gl.TEXTURE_2D, this.texture);
+      }
+      super.renderProgram(params, programInfo);
+    }
+
+    processVisibleItem(
+      nodeIndex: number,
+      startIndex: number,
+      data: NodeDisplayData &
+        NodeAttributes & { opacity: number; iconColor: string },
+    ): void {
+      const array = this.array;
+      const fill = floatColor(
+        data.color ?? this.renderer.getSetting("defaultNodeColor"),
+      );
+      const color = floatColor(
+        data.iconColor ?? this.renderer.getSetting("labelColor").color,
+      );
+
+      const imageSource = data.image ?? data.path;
+      const imagePosition = imageSource ? this.atlas[imageSource] : undefined;
+
+      if (typeof imageSource === "string" && !imagePosition)
+        void textureManager.registerImage(imageSource);
+
+      array[startIndex++] = data.x;
+      array[startIndex++] = data.y;
+      array[startIndex++] =
+        data.size - (data.border ?? 0) - (data.pie?.length ? 4 : 2);
+      array[startIndex++] = data.opacity ?? 1;
+      array[startIndex++] = isSvgPath(imageSource) ? 1 : 0;
+      array[startIndex++] = fill;
+      array[startIndex++] = color;
+      array[startIndex++] = nodeIndex;
+
+      // Reference texture:
+      if (imagePosition) {
+        const { width, height } = this.textureImage;
+        array[startIndex++] = imagePosition.x / width;
+        array[startIndex++] = imagePosition.y / height;
+        array[startIndex++] = imagePosition.size / width;
+        array[startIndex++] = imagePosition.size / height;
+      } else {
+        array[startIndex++] = 0;
+        array[startIndex++] = 0;
+        array[startIndex++] = 0;
+        array[startIndex++] = 0;
+      }
+    }
+
+    setUniforms(
+      params: RenderParams,
+      { gl, uniformLocations }: ProgramInfo,
+    ): void {
+      const {
+        u_sizeRatio,
+        u_correctionRatio,
+        u_matrix,
+        u_atlas,
+        u_keepWithinCircle,
+        u_cameraAngle,
+        u_percentagePadding,
+      } = uniformLocations;
+      this.latestRenderParams = params;
+
+      gl.uniform1f(u_correctionRatio, params.correctionRatio);
+      gl.uniform1f(
+        u_sizeRatio,
+        keepWithinCircle ? params.sizeRatio : params.sizeRatio / Math.SQRT2,
+      );
+      gl.uniform1f(u_cameraAngle, params.cameraAngle);
+      gl.uniform1f(u_percentagePadding, padding);
+      gl.uniformMatrix3fv(u_matrix, false, params.matrix);
+      gl.uniform1i(u_atlas, 0);
+      gl.uniform1i(u_keepWithinCircle, keepWithinCircle ? 1 : 0);
+    }
+  };
+}

package/src/programs/node-image/frag.glsl.ts

@@ -0,0 +1,97 @@
+/* istanbul ignore file */
+
+// language=GLSL
+const SHADER_SOURCE = /* glsl */ `
+precision highp float;
+
+varying vec4 v_fill;
+varying vec4 v_color;
+varying vec4 v_texture;
+varying vec2 v_diffVector;
+varying float v_opacity;
+varying float v_radius;
+varying float v_colorMode;
+
+uniform sampler2D u_atlas;
+uniform float u_correctionRatio;
+uniform float u_cameraAngle;
+uniform float u_percentagePadding;
+uniform bool u_keepWithinCircle;
+uniform bool u_shape;
+
+const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
+
+const float radius = 0.5;
+
+void main(void) {
+  float border = 2.0 * u_correctionRatio;
+  float dist = length(v_diffVector);
+  vec4 color = v_fill;
+
+  float c = cos(-u_cameraAngle);
+  float s = sin(-u_cameraAngle);
+  vec2 diffVector = mat2(c, s, -s, c) * (v_diffVector);
+
+  // No antialiasing for picking mode:
+  #ifdef PICKING_MODE
+  border = 0.0;
+  gl_FragColor = v_color;
+
+  #else
+  // First case: No image to display
+  if (v_texture.w <= 0.0) {
+    if (v_colorMode==0.0) {
+      color = v_fill;
+    }
+  }
+
+  // Second case: Image loaded into the texture
+  else {
+    float paddingRatio = 1.0 + 2.0 * u_percentagePadding;
+    float coef = u_keepWithinCircle ? 1.0 : ${Math.SQRT2};
+    vec2 coordinateInTexture = diffVector * vec2(paddingRatio, -paddingRatio) / v_radius / 2.0 * coef + vec2(0.5, 0.5);
+    vec4 texel = texture2D(u_atlas, (v_texture.xy + coordinateInTexture * v_texture.zw), -1.0);
+
+    // Colorize all visible image pixels:
+    if (v_colorMode==1.0) {
+      color = mix(v_fill, v_color, texel.a);
+    }
+
+    // Colorize background pixels, keep image pixel colors:
+    else {
+      color = vec4(mix(v_color, texel, texel.a).rgb, max(texel.a, v_color.a));
+    }
+
+    // Erase pixels "in the padding":
+    if (abs(diffVector.x) > v_radius / paddingRatio || abs(diffVector.y) > v_radius / paddingRatio) {
+      color = v_colorMode == 1.0 ? gl_FragColor : v_fill;
+    }
+  }
+
+  // Crop in a circle when u_keepWithinCircle is truthy:
+  if (u_keepWithinCircle) {
+    if (dist - v_radius + border > border)
+      gl_FragColor = transparent;
+    else if (dist - v_radius + border > 0.0) {
+      gl_FragColor = mix(v_fill, transparent, (dist - v_radius + border) / border);
+    }
+    else  {
+      gl_FragColor = mix(v_fill, color, v_opacity);
+    }
+  }
+
+  // Crop in a square else:
+  else {
+    float squareHalfSize = v_radius * ${Math.SQRT1_2 * Math.cos(Math.PI / 12)};
+    if (abs(diffVector.x) > squareHalfSize || abs(diffVector.y) > squareHalfSize) {
+      gl_FragColor = transparent;
+    } else {
+      gl_FragColor = mix(v_fill, color, v_opacity);
+    }
+  }
+  #endif
+
+}
+`;
+
+export default SHADER_SOURCE;

package/src/programs/node-image/index.ts

@@ -0,0 +1,7 @@
+/* istanbul ignore file */
+
+import createNodeImageProgram from "./factory";
+
+export { default as createNodeImageProgram } from "./factory";
+export const NodeImageProgram = (isCircle: boolean) =>
+  createNodeImageProgram({ keepWithinCircle: isCircle });