@react-fabric/graph 1.0.0-beta.62 → 1.0.1

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

@@ -1,301 +0,0 @@
-/* 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

@@ -1,97 +0,0 @@
-/* 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

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