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

package/src/hooks/useSigma.ts

@@ -1,118 +0,0 @@
-import { useIsDark } from "@react-fabric/core";
-import { useEffect, useState } from "react";
-import Sigma from "sigma";
-import { type Graph } from "../graph";
-import { EdgeCurveProgram } from "../programs/edge-curve";
-import { EdgeLineProgram } from "../programs/edge-line";
-import { NodeCircleProgram } from "../programs/node-circle";
-import { NodeRectProgram } from "../programs/node-rect";
-import {
-  type EdgeAttributes,
-  type InternalEdgeAttributes,
-  type InternalNodeAttributes,
-  type NodeAttributes,
-} from "../types";
-import { attachHighlighter } from "./sigmaHilighter";
-import { attachMouseActions } from "./sigmaMouseActions";
-
-export const useSigma = <N, E>(
-  graph: Graph<N, E>,
-  nodeReducer?: (node: NodeAttributes<N>) => NodeAttributes<N>,
-  edgeReducer?: (edge: EdgeAttributes<E>) => EdgeAttributes<E>,
-) => {
-  const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null);
-  const [componentsRef, setComponentsRef] = useState<HTMLDivElement | null>(
-    null,
-  );
-  const isDark = useIsDark();
-
-  const [sigma, updateSigma] =
-    useState<Sigma<NodeAttributes<N>, EdgeAttributes<E>>>();
-
-  useEffect(() => {
-    if (containerRef) {
-      const renderer = new Sigma<
-        InternalNodeAttributes<N>,
-        InternalEdgeAttributes<E>
-      >(graph as any, containerRef, {
-        allowInvalidContainer: true,
-        enableEdgeEvents: true,
-        renderEdgeLabels: true,
-        renderLabels: true,
-        labelSize: 14,
-        defaultEdgeType: "line",
-        defaultNodeType: "circle",
-        edgeProgramClasses: {
-          line: EdgeLineProgram,
-          curved: EdgeCurveProgram,
-        },
-        // for some reason max ratio is min zoom and min ratio is max zoom
-        maxCameraRatio: 10,
-        minCameraRatio: 0.01,
-        nodeProgramClasses: {
-          rect: NodeRectProgram,
-          circle: NodeCircleProgram,
-        },
-        nodeReducer(key, data) {
-          const nodeData: InternalNodeAttributes<N> =
-            nodeReducer?.(data) ?? data;
-          // Ensure node size is at least 16 for visibility
-          if (!nodeData.size && nodeData.weight) {
-            nodeData.size = Math.max(16, nodeData.weight * 3);
-          }
-          if ((nodeData.size ?? 0) < 16) {
-            nodeData.size = 16;
-          }
-
-          // ensure node label renderer is called in order to render selected border
-          nodeData.label = nodeData.label ?? "";
-          nodeData.id = key;
-          return nodeData;
-        },
-        edgeReducer(key, data) {
-          const edgeData: InternalEdgeAttributes<E> =
-            edgeReducer?.(data) ?? data;
-          // Ensure edge size is at least 0.5 for visibility
-          if (!edgeData.size && edgeData.weight) {
-            edgeData.size = Math.max(0.5, edgeData.weight * 6);
-          }
-          if ((edgeData.size ?? 0) < 0.5) {
-            edgeData.size = 0.5;
-          }
-          edgeData.id = key;
-          return edgeData;
-        },
-      });
-
-      attachMouseActions(renderer);
-      attachHighlighter(renderer);
-
-      // containerRef?.insertBefore(
-      //   componentsRef,
-      //   renderer.getCanvases().mouse,
-      // );
-
-      // @ts-expect-error ignore
-      window.sigma = renderer;
-      updateSigma(renderer);
-
-      return () => {
-        renderer.kill();
-      };
-    }
-  }, [graph, containerRef, componentsRef]);
-
-  useEffect(() => {
-    sigma?.setSettings({
-      defaultNodeColor: isDark ? "#000" : "#fff",
-      defaultEdgeColor: isDark ? "#fff" : "#000",
-      labelColor: { color: isDark ? "#fff" : "#000", attribute: "labelColor" },
-    });
-  }, [isDark, sigma]);
-
-  return {
-    instance: sigma,
-    containerRef: setContainerRef,
-    componentsRef: setComponentsRef,
-  };
-};

package/src/programs/arrow-head/frag.glsl.ts

@@ -1,18 +0,0 @@
-/* istanbul ignore file */
-
-// language=GLSL
-const SHADER_SOURCE = /* glsl */ `
-precision mediump float;
-
-varying vec4 v_color;
-varying float v_opacity;
-
-const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
-
-void main(void) {
-  gl_FragColor = v_color;
-  gl_FragColor = mix(transparent, gl_FragColor, v_opacity);
-}
-`;
-
-export default SHADER_SOURCE;

package/src/programs/arrow-head/index.ts

@@ -1,157 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import { type Attributes } from "graphology-types";
-
-import {
-  EdgeProgram,
-  type EdgeProgramType,
-  type ProgramInfo,
-} from "sigma/rendering";
-import {
-  type EdgeDisplayData,
-  type NodeDisplayData,
-  type RenderParams,
-} from "sigma/types";
-import { floatColor } from "sigma/utils";
-import { type InternalEdgeAttributes } from "../../types";
-import FRAGMENT_SHADER_SOURCE from "./frag.glsl";
-import VERTEX_SHADER_SOURCE from "./vert.glsl";
-
-const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
-
-const UNIFORMS = [
-  "u_matrix",
-  "u_sizeRatio",
-  "u_correctionRatio",
-  "u_minEdgeThickness",
-  "u_lengthToThicknessRatio",
-  "u_widenessToThicknessRatio",
-] as const;
-
-export interface CreateEdgeArrowHeadProgramOptions {
-  extremity: "source" | "target";
-  lengthToThicknessRatio: number;
-  widenessToThicknessRatio: number;
-}
-
-export const DEFAULT_EDGE_ARROW_HEAD_PROGRAM_OPTIONS: CreateEdgeArrowHeadProgramOptions =
-  {
-    extremity: "target",
-    lengthToThicknessRatio: 2.5,
-    widenessToThicknessRatio: 2,
-  };
-
-export function createEdgeArrowHeadProgram<
-  N extends Attributes = Attributes,
-  E extends Attributes = Attributes,
-  G extends Attributes = Attributes,
->(
-  inputOptions?: Partial<CreateEdgeArrowHeadProgramOptions>,
-): EdgeProgramType<N, E, G> {
-  const options = {
-    ...DEFAULT_EDGE_ARROW_HEAD_PROGRAM_OPTIONS,
-    ...(inputOptions ?? {}),
-  };
-
-  return class EdgeArrowHeadProgram<
-    N extends Attributes = Attributes,
-    E extends Attributes = Attributes,
-    G extends Attributes = Attributes,
-  > extends EdgeProgram<(typeof UNIFORMS)[number], N, E, G> {
-    getDefinition() {
-      return {
-        VERTICES: 3,
-        VERTEX_SHADER_SOURCE,
-        FRAGMENT_SHADER_SOURCE,
-        METHOD: WebGLRenderingContext.TRIANGLES,
-        UNIFORMS,
-        ATTRIBUTES: [
-          { name: "a_position", size: 2, type: FLOAT },
-          { name: "a_normal", size: 2, type: FLOAT },
-          { name: "a_radius", size: 1, type: FLOAT },
-          { name: "a_color", size: 4, type: UNSIGNED_BYTE, normalized: true },
-          { name: "a_opacity", size: 1, type: FLOAT },
-          { name: "a_id", size: 4, type: UNSIGNED_BYTE, normalized: true },
-        ],
-        CONSTANT_ATTRIBUTES: [{ name: "a_barycentric", size: 3, type: FLOAT }],
-        CONSTANT_DATA: [
-          [1, 0, 0],
-          [0, 1, 0],
-          [0, 0, 1],
-        ],
-      };
-    }
-
-    processVisibleItem(
-      edgeIndex: number,
-      startIndex: number,
-      sourceData: NodeDisplayData,
-      targetData: NodeDisplayData,
-      data: EdgeDisplayData & InternalEdgeAttributes,
-    ) {
-      if (options.extremity === "source") {
-        [sourceData, targetData] = [targetData, sourceData];
-      }
-
-      const thickness = Math.min(data.size || 1, 0.5) * 8;
-      const radius = targetData.size || 1;
-      const x1 = sourceData.x;
-      const y1 = sourceData.y;
-      const x2 = targetData.x;
-      const y2 = targetData.y;
-      let color = data.color;
-      if (data.selected) color = "#f00";
-      if (data.highlight) color = "#F54A4A";
-
-      // Computing normals
-      const dx = x2 - x1;
-      const dy = y2 - y1;
-
-      let len = dx * dx + dy * dy;
-      let n1 = 0;
-      let n2 = 0;
-
-      if (len) {
-        len = 1 / Math.sqrt(len);
-
-        n1 = -dy * len * thickness;
-        n2 = dx * len * thickness;
-      }
-
-      const array = this.array;
-
-      array[startIndex++] = x2;
-      array[startIndex++] = y2;
-      array[startIndex++] = -n1;
-      array[startIndex++] = -n2;
-      array[startIndex++] = radius;
-      array[startIndex++] = floatColor(color);
-      array[startIndex++] = ["both", options.extremity].includes(
-        data.arrow ?? "",
-      )
-        ? data.opacity ?? 1
-        : 0;
-      array[startIndex++] = edgeIndex;
-    }
-
-    setUniforms(
-      params: RenderParams,
-      { gl, uniformLocations }: ProgramInfo,
-    ): void {
-      const {
-        u_matrix,
-        u_sizeRatio,
-        u_correctionRatio,
-        u_minEdgeThickness,
-        u_lengthToThicknessRatio,
-        u_widenessToThicknessRatio,
-      } = uniformLocations;
-
-      gl.uniformMatrix3fv(u_matrix, false, params.matrix);
-      gl.uniform1f(u_sizeRatio, params.sizeRatio);
-      gl.uniform1f(u_correctionRatio, params.correctionRatio);
-      gl.uniform1f(u_minEdgeThickness, params.minEdgeThickness);
-      gl.uniform1f(u_lengthToThicknessRatio, 2.5);
-      gl.uniform1f(u_widenessToThicknessRatio, 2);
-    }
-  };
-}

package/src/programs/arrow-head/vert.glsl.ts

@@ -1,75 +0,0 @@
-/* istanbul ignore file */
-
-// language=GLSL
-const SHADER_SOURCE = /* glsl */ `
-attribute vec2 a_position;
-attribute vec2 a_normal;
-attribute float a_radius;
-attribute vec3 a_barycentric;
-attribute float a_opacity;
-
-#ifdef PICKING_MODE
-attribute vec4 a_id;
-#else
-attribute vec4 a_color;
-#endif
-
-uniform mat3 u_matrix;
-uniform float u_sizeRatio;
-uniform float u_correctionRatio;
-uniform float u_minEdgeThickness;
-uniform float u_lengthToThicknessRatio;
-uniform float u_widenessToThicknessRatio;
-
-varying vec4 v_color;
-varying float v_opacity;
-
-const float bias = 255.0 / 254.0;
-
-void main() {
-  float minThickness = u_minEdgeThickness;
-
-  float normalLength = length(a_normal);
-  vec2 unitNormal = a_normal / normalLength;
-
-  // These first computations are taken from edge.vert.glsl and
-  // edge.clamped.vert.glsl. Please read it to get better comments on what's
-  // happening:
-  float pixelsThickness = max(normalLength / u_sizeRatio, minThickness);
-  float webGLThickness = pixelsThickness * u_correctionRatio;
-  float webGLNodeRadius = a_radius * 2.0 * u_correctionRatio / u_sizeRatio;
-  float webGLArrowHeadLength = webGLThickness * u_lengthToThicknessRatio * 2.0;
-  float webGLArrowHeadThickness = webGLThickness * u_widenessToThicknessRatio;
-
-  float da = a_barycentric.x;
-  float db = a_barycentric.y;
-  float dc = a_barycentric.z;
-
-  vec2 delta = vec2(
-      da * (webGLNodeRadius * unitNormal.y)
-    + db * ((webGLNodeRadius + webGLArrowHeadLength) * unitNormal.y + webGLArrowHeadThickness * unitNormal.x)
-    + dc * ((webGLNodeRadius + webGLArrowHeadLength) * unitNormal.y - webGLArrowHeadThickness * unitNormal.x),
-
-      da * (-webGLNodeRadius * unitNormal.x)
-    + db * (-(webGLNodeRadius + webGLArrowHeadLength) * unitNormal.x + webGLArrowHeadThickness * unitNormal.y)
-    + dc * (-(webGLNodeRadius + webGLArrowHeadLength) * unitNormal.x - webGLArrowHeadThickness * unitNormal.y)
-  );
-
-  vec2 position = (u_matrix * vec3(a_position + delta, 1)).xy;
-
-  gl_Position = vec4(position, 0, 1);
-
-  #ifdef PICKING_MODE
-  // For picking mode, we use the ID as the color:
-  v_color = a_id;
-  #else
-  // For normal mode, we use the color:
-  v_color = a_color;
-  v_opacity = a_opacity;
-  #endif
-
-  v_color.a *= bias;
-}
-`;
-
-export default SHADER_SOURCE;

package/src/programs/edge-curve/drawLabel.ts

@@ -1,166 +0,0 @@
-import { type CreateEdgeCurveProgramOptions } from "@sigma/edge-curve/dist/declarations/src/utils";
-import { type Attributes } from "graphology-types";
-import { type EdgeLabelDrawingFunction } from "sigma/rendering";
-import { type Settings } from "sigma/settings";
-
-/* istanbul ignore file */
-
-interface Point {
-  x: number;
-  y: number;
-}
-
-function getCurvePoint(t: number, p0: Point, p1: Point, p2: Point): Point {
-  const x = (1 - t) ** 2 * p0.x + 2 * (1 - t) * t * p1.x + t ** 2 * p2.x;
-  const y = (1 - t) ** 2 * p0.y + 2 * (1 - t) * t * p1.y + t ** 2 * p2.y;
-  return { x, y };
-}
-
-function getCurveLength(p0: Point, p1: Point, p2: Point): number {
-  const steps = 20;
-  let length = 0;
-  let lastPoint = p0;
-  for (let i = 0; i < steps; i++) {
-    const point = getCurvePoint((i + 1) / steps, p0, p1, p2);
-    length += Math.sqrt(
-      (lastPoint.x - point.x) ** 2 + (lastPoint.y - point.y) ** 2,
-    );
-    lastPoint = point;
-  }
-
-  return length;
-}
-
-export function createDrawCurvedEdgeLabel<
-  N extends Attributes = Attributes,
-  E extends Attributes = Attributes,
-  G extends Attributes = Attributes,
->({
-  curvatureAttribute,
-  defaultCurvature,
-  keepLabelUpright = true,
-}: CreateEdgeCurveProgramOptions & {
-  keepLabelUpright?: boolean;
-}): EdgeLabelDrawingFunction<N, E, G> {
-  return (
-    context,
-    edgeData,
-    sourceData,
-    targetData,
-    settings: Settings<N, E, G>,
-  ): void => {
-    const size = settings.edgeLabelSize;
-    const curvature = edgeData[curvatureAttribute] || defaultCurvature;
-    const font = settings.edgeLabelFont;
-    const weight = settings.edgeLabelWeight;
-    let color = edgeData.color ?? settings.defaultEdgeColor;
-
-    if (edgeData.selected) color = "#f00";
-    if (edgeData.highlight) color = "#F54A4A";
-
-    let label = edgeData.label;
-
-    if (!label || edgeData.opacity < 1) return;
-
-    context.font = `${weight} ${size}px ${font}`;
-
-    // Computing positions without considering nodes sizes:
-    const ltr = !keepLabelUpright || sourceData.x < targetData.x;
-    let sourceX = ltr ? sourceData.x : targetData.x;
-    let sourceY = ltr ? sourceData.y : targetData.y;
-    let targetX = ltr ? targetData.x : sourceData.x;
-    let targetY = ltr ? targetData.y : sourceData.y;
-    const centerX = (sourceX + targetX) / 2;
-    const centerY = (sourceY + targetY) / 2;
-    const diffX = targetX - sourceX;
-    const diffY = targetY - sourceY;
-    const diff = Math.sqrt(diffX ** 2 + diffY ** 2);
-    // Anchor point:
-    const orientation = ltr ? 1 : -1;
-    let anchorX = centerX + diffY * curvature * orientation;
-    let anchorY = centerY - diffX * curvature * orientation;
-
-    // Adapt curve points to edge thickness:
-    const offset = edgeData.size * 0.7 + 5;
-    const sourceOffsetVector = {
-      x: anchorY - sourceY,
-      y: -(anchorX - sourceX),
-    };
-    const sourceOffsetVectorLength = Math.sqrt(
-      sourceOffsetVector.x ** 2 + sourceOffsetVector.y ** 2,
-    );
-    const targetOffsetVector = {
-      x: targetY - anchorY,
-      y: -(targetX - anchorX),
-    };
-    const targetOffsetVectorLength = Math.sqrt(
-      targetOffsetVector.x ** 2 + targetOffsetVector.y ** 2,
-    );
-    sourceX += (offset * sourceOffsetVector.x) / sourceOffsetVectorLength;
-    sourceY += (offset * sourceOffsetVector.y) / sourceOffsetVectorLength;
-    targetX += (offset * targetOffsetVector.x) / targetOffsetVectorLength;
-    targetY += (offset * targetOffsetVector.y) / targetOffsetVectorLength;
-    // For anchor, the vector is simpler, so it is inlined:
-    anchorX += (offset * diffY) / diff;
-    anchorY -= (offset * diffX) / diff;
-
-    // Compute curve length:
-    const anchorPoint = { x: anchorX, y: anchorY };
-    const sourcePoint = { x: sourceX, y: sourceY };
-    const targetPoint = { x: targetX, y: targetY };
-    const curveLength = getCurveLength(sourcePoint, anchorPoint, targetPoint);
-
-    if (curveLength < sourceData.size + targetData.size) return;
-
-    // Handling ellipsis
-    let textLength = context.measureText(label).width;
-    const availableTextLength = curveLength - sourceData.size - targetData.size;
-    if (textLength > availableTextLength) {
-      const ellipsis = "…";
-      label = label + ellipsis;
-      textLength = context.measureText(label).width;
-
-      while (textLength > availableTextLength && label.length > 1) {
-        label = label.slice(0, -2) + ellipsis;
-        textLength = context.measureText(label).width;
-      }
-
-      if (label.length < 4) return;
-    }
-
-    // Measure each character:
-    const charactersLengthCache: Record<string, number> = {};
-    for (let i = 0, length = label.length; i < length; i++) {
-      const character = label[i];
-
-      if (!charactersLengthCache[character]) {
-        charactersLengthCache[character] =
-          context.measureText(character).width * (1 + curvature * 0.35);
-      }
-    }
-
-    // Draw each character:
-    let t = 0.5 - textLength / curveLength / 2;
-    for (let i = 0, length = label.length; i < length; i++) {
-      const character = label[i];
-      const point = getCurvePoint(t, sourcePoint, anchorPoint, targetPoint);
-
-      const tangentX =
-        2 * (1 - t) * (anchorX - sourceX) + 2 * t * (targetX - anchorX);
-      const tangentY =
-        2 * (1 - t) * (anchorY - sourceY) + 2 * t * (targetY - anchorY);
-      const angle = Math.atan2(tangentY, tangentX);
-
-      context.save();
-      context.translate(point.x, point.y);
-      context.rotate(angle);
-
-      context.fillStyle = color;
-      context.fillText(character, 0, 0);
-
-      context.restore();
-
-      t += charactersLengthCache[character] / curveLength;
-    }
-  };
-}

package/src/programs/edge-curve/frag.glsl.ts

@@ -1,86 +0,0 @@
-/* istanbul ignore file */
-
-// language=GLSL
-const SHADER = /* glsl */ `
-precision highp float;
-
-varying vec4 v_color;
-varying float v_opacity;
-varying float v_thickness;
-varying float v_feather;
-varying vec2 v_cpA;
-varying vec2 v_cpB;
-varying vec2 v_cpC;
-varying float v_sourceSize;
-varying vec2 v_sourcePoint;
-varying float v_targetSize;
-varying vec2 v_targetPoint;
-
-uniform float u_lengthToThicknessRatio;
-uniform float u_widenessToThicknessRatio;
-
-float det(vec2 a, vec2 b) {
-  return a.x * b.y - b.x * a.y;
-}
-
-vec2 getDistanceVector(vec2 b0, vec2 b1, vec2 b2) {
-  float a = det(b0, b2), b = 2.0 * det(b1, b0), d = 2.0 * det(b2, b1);
-  float f = b * d - a * a;
-  vec2 d21 = b2 - b1, d10 = b1 - b0, d20 = b2 - b0;
-  vec2 gf = 2.0 * (b * d21 + d * d10 + a * d20);
-  gf = vec2(gf.y, -gf.x);
-  vec2 pp = -f * gf / dot(gf, gf);
-  vec2 d0p = b0 - pp;
-  float ap = det(d0p, d20), bp = 2.0 * det(d10, d0p);
-  float t = clamp((ap + bp) / (2.0 * a + b + d), 0.0, 1.0);
-  return mix(mix(b0, b1, t), mix(b1, b2, t), t);
-}
-
-float distToQuadraticBezierCurve(vec2 p, vec2 b0, vec2 b1, vec2 b2) {
-  return length(getDistanceVector(b0 - p, b1 - p, b2 - p));
-}
-
-const float epsilon = 0.7;
-const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
-
-void main(void) {
-  float dist = distToQuadraticBezierCurve(gl_FragCoord.xy, v_cpA, v_cpB, v_cpC);
-  float thickness = v_thickness;
-
-  if(v_sourceSize > 0.0) {
-    float distToSource = length(gl_FragCoord.xy - v_sourcePoint);
-    float sourceArrowLength = v_sourceSize + (thickness) * u_lengthToThicknessRatio;
-    if (distToSource < sourceArrowLength) {
-      thickness = (distToSource - v_sourceSize) / (sourceArrowLength - v_sourceSize) * u_widenessToThicknessRatio * thickness;
-    }
-  }
-
-  if(v_targetSize > 0.0) {
-    float distToTarget = length(gl_FragCoord.xy - v_targetPoint);
-    float targetArrowLength = v_targetSize + (thickness) * u_lengthToThicknessRatio;
-    if (distToTarget < targetArrowLength) {
-      thickness = (distToTarget - v_targetSize) / (targetArrowLength - v_targetSize) * u_widenessToThicknessRatio * thickness;
-    }
-  }
-
-  float halfThickness = thickness / 2.0;
-  if (dist < halfThickness) {
-    #ifdef PICKING_MODE
-    gl_FragColor = v_color;
-    #else
-    float t = smoothstep(
-      halfThickness - v_feather,
-      halfThickness,
-      dist
-    );
-
-    gl_FragColor = mix(v_color, transparent, t);
-    gl_FragColor = mix(transparent, gl_FragColor, v_opacity);
-    #endif
-  } else {
-    gl_FragColor = transparent;
-  }
-}
-`;
-
-export default SHADER;