@react-fabric/graph 1.0.0-beta.58

package/src/programs/node-rect/base/drawLabel.ts

@@ -0,0 +1,149 @@
+import { type Settings } from "sigma/settings";
+import {
+  EdgeAttributes,
+  InternalNodeAttributes,
+  NodeAttributes,
+} from "../../../types";
+
+/* istanbul ignore file */
+
+export function drawNodeLabel(
+  context: CanvasRenderingContext2D,
+  data: InternalNodeAttributes & {
+    opacity: number;
+    x: number;
+    y: number;
+    size: number;
+  },
+  settings: Settings<NodeAttributes<any>, EdgeAttributes<any>>,
+): void {
+  const nodeSize = data.size;
+  const size = settings.labelSize;
+  const font = settings.labelFont;
+  const weight = settings.labelWeight;
+  // use node color or default node color
+  const bg = settings.defaultNodeColor || "#fff";
+  // use label color or default label color
+  const color = data.labelColor || settings.labelColor.color || "#000";
+
+  if (data.highlight) {
+    // Then we draw the label background
+    context.strokeStyle = data.highlightColor ?? "#44BD87";
+    context.lineWidth = 1;
+    context.shadowOffsetX = 0;
+    context.shadowOffsetY = 0;
+    context.shadowBlur = 48;
+    context.shadowColor = data.color ?? "#44BD87";
+
+    const PADDING = 2;
+
+    // if (typeof data.label === "string") {
+    //   const textWidth = context.measureText(data.label).width;
+    //   const boxWidth = Math.round(textWidth + 5);
+    //   const boxHeight = Math.round(size + 2 * PADDING);
+    //   const radius = Math.max(nodeSize, size / 2) + PADDING;
+
+    //   context.beginPath();
+    //   context.moveTo(data.x + radius, data.y + boxHeight / 2);
+    //   context.lineTo(data.x + radius + boxWidth, data.y + boxHeight / 2);
+    //   context.lineTo(data.x + radius + boxWidth, data.y - boxHeight / 2);
+    //   context.lineTo(data.x + radius, data.y - boxHeight / 2);
+    //   context.lineTo(data.x + radius, data.y - radius);
+    //   context.lineTo(data.x - radius, data.y - radius);
+    //   context.lineTo(data.x - radius, data.y + radius);
+    //   context.lineTo(data.x + radius, data.y + radius);
+    //   context.lineTo(data.x + radius, data.y + boxHeight / 2);
+    //   context.closePath();
+    //   context.stroke();
+    // } else {
+    const radius = nodeSize + PADDING;
+    context.strokeRect(
+      data.x - radius,
+      data.y - radius,
+      radius * 2,
+      radius * 2,
+    );
+    // }
+  }
+
+  context.shadowColor = "transparent";
+  context.shadowBlur = 0;
+
+  if (data.selected) {
+    // Then we draw the label background
+    context.strokeStyle = "#f00";
+    context.lineWidth = 2;
+    context.shadowOffsetX = 0;
+    context.shadowOffsetY = 0;
+    context.shadowBlur = 0;
+
+    const PADDING = data.selected ? 4 : 2;
+
+    // if (typeof data.label === "string") {
+    //   const textWidth = context.measureText(data.label).width;
+    //   const boxWidth = Math.round(textWidth + 5);
+    //   const boxHeight = Math.round(size + 2 * PADDING);
+    //   const radius = Math.max(nodeSize, size / 2) + PADDING;
+
+    //   context.beginPath();
+    //   context.moveTo(data.x + radius, data.y + boxHeight / 2);
+    //   context.lineTo(data.x + radius + boxWidth, data.y + boxHeight / 2);
+    //   context.lineTo(data.x + radius + boxWidth, data.y - boxHeight / 2);
+    //   context.lineTo(data.x + radius, data.y - boxHeight / 2);
+    //   context.lineTo(data.x + radius, data.y - radius);
+    //   context.lineTo(data.x - radius, data.y - radius);
+    //   context.lineTo(data.x - radius, data.y + radius);
+    //   context.lineTo(data.x + radius, data.y + radius);
+    //   context.lineTo(data.x + radius, data.y + boxHeight / 2);
+    //   context.closePath();
+    //   context.stroke();
+    // } else {
+    const radius = nodeSize + PADDING;
+    context.strokeRect(
+      data.x - radius,
+      data.y - radius,
+      radius * 2,
+      radius * 2,
+    );
+    // }
+  }
+
+  if (data.isGroup) {
+    const container =
+      context.canvas.parentElement?.parentElement?.querySelector(
+        ".sigma-groupHandles",
+      ) as HTMLDivElement;
+    let handle = container.querySelector(
+      `[data-id="${data.id}"]`,
+    ) as HTMLDivElement;
+    if (!handle) {
+      handle = document.createElement("div");
+      handle.className = "sigma-groupHandle";
+      handle.dataset.id = data.id;
+      container.appendChild(handle);
+    }
+    handle.innerText = data.expanded ? "−" : "+";
+    handle.style.transform = `translate(-50%, -50%)`;
+    handle.style.left = `${data.x}px`;
+    handle.style.top = `${data.y + nodeSize}px`;
+  }
+
+  if (!data.label || data.opacity < 1) return;
+  const textWidth = context.measureText(data.label).width;
+
+  context.fillStyle = bg;
+  context.fillRect(
+    data.x - textWidth / 2,
+    data.y + nodeSize * 1.25,
+    textWidth,
+    size + 2,
+  );
+
+  context.fillStyle = color;
+  context.font = `${weight} ${size}px ${font}`;
+  context.fillText(
+    data.label,
+    data.x - textWidth / 2,
+    data.y + size + nodeSize * 1.25,
+  );
+}

package/src/programs/node-rect/base/frag.glsl.ts

@@ -0,0 +1,67 @@
+/* istanbul ignore file */
+
+// language=GLSL
+const SHADER_SOURCE = /* glsl */ `
+precision highp float;
+
+varying vec4 v_color;
+varying vec4 v_stroke;
+varying vec2 v_diffVector;
+varying float v_border;
+varying float v_segmentAngle;
+varying vec4 v_colors_0;
+varying vec4 v_colors_1;
+varying vec4 v_colors_2;
+varying vec4 v_colors_3;
+varying vec4 v_colors_4;
+varying vec4 v_colors_5;
+varying vec4 v_colors_6;
+
+uniform float u_sizeRatio;
+uniform float u_correctionRatio;
+
+void main(void) {
+  float border = u_correctionRatio * 2.0;
+  float dist = length(v_diffVector) + border;
+
+  float angle = atan(v_diffVector.y / v_diffVector.x);
+  if (v_diffVector.x < 0.0 && v_diffVector.y < 0.0) angle += ${Math.PI};
+  else if (v_diffVector.x < 0.0) angle += ${Math.PI};
+  else if (v_diffVector.y < 0.0) angle += ${2 * Math.PI};
+
+  #ifdef PICKING_MODE
+    gl_FragColor = v_color;
+  #else
+    vec4 color = v_color;
+    vec4 piecolor = vec4(0.0);
+    float pieSize = 4.0 * u_correctionRatio / u_sizeRatio * 4.0;
+    
+    if(v_segmentAngle > 0.0) {
+      float segment = angle / v_segmentAngle;
+      if(segment >= 0.0) { piecolor = v_colors_0; }
+      if(segment >= 1.0) { piecolor = v_colors_1; }
+      if(segment >= 2.0) { piecolor = v_colors_2; }
+      if(segment >= 3.0) { piecolor = v_colors_3; }
+      if(segment >= 4.0) { piecolor = v_colors_4; }
+      if(segment >= 5.0) { piecolor = v_colors_5; }
+      if(segment >= 6.0) { piecolor = v_colors_6; }
+    }
+    if(v_segmentAngle > 0.0) {
+      float pieCheck = v_border - (pieSize / 2.0);
+      if (v_diffVector.x > pieCheck || v_diffVector.y > pieCheck ||
+        v_diffVector.x < -pieCheck || v_diffVector.y < -pieCheck) {
+        color = piecolor;
+      }
+    }
+    if(v_border > 0.0) {
+      if (v_diffVector.x > v_border || v_diffVector.y > v_border ||
+        v_diffVector.x < -v_border || v_diffVector.y < -v_border) {
+        color = v_stroke;
+      }
+    }
+    gl_FragColor = color;
+  #endif
+}
+`;
+
+export default SHADER_SOURCE;

package/src/programs/node-rect/base/index.ts

@@ -0,0 +1,109 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+import { NodeProgram, type ProgramInfo } from "sigma/rendering";
+import { type NodeDisplayData, type RenderParams } from "sigma/types";
+import { floatColor } from "sigma/utils";
+
+import { type NodeAttributes } from "../../../types";
+import FRAGMENT_SHADER_SOURCE from "./frag.glsl";
+import VERTEX_SHADER_SOURCE from "./vert.glsl";
+
+/* istanbul ignore file */
+
+const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
+
+const UNIFORMS = [
+  "u_sizeRatio",
+  "u_correctionRatio",
+  "u_cameraAngle",
+  "u_matrix",
+] as const;
+
+const PI = Math.PI;
+
+export class NodeRectBase extends NodeProgram<
+  (typeof UNIFORMS)[number],
+  NodeAttributes
+> {
+  getDefinition() {
+    return {
+      VERTICES: 6,
+      VERTEX_SHADER_SOURCE,
+      FRAGMENT_SHADER_SOURCE,
+      METHOD: WebGLRenderingContext.TRIANGLES,
+      UNIFORMS,
+      ATTRIBUTES: [
+        { name: "a_position", size: 2, type: FLOAT },
+        { name: "a_size", size: 1, type: FLOAT },
+        { name: "a_border", size: 1, type: FLOAT },
+        { name: "a_opacity", size: 1, type: FLOAT },
+        { name: "a_base", size: 4, type: UNSIGNED_BYTE, normalized: true },
+        { name: "a_color", size: 4, type: UNSIGNED_BYTE, normalized: true },
+        { name: "a_stroke", size: 4, type: UNSIGNED_BYTE, normalized: true },
+        { name: "a_segments", size: 1, type: FLOAT },
+        ...Array(7)
+          .fill(0)
+          .map((_, idx) => ({
+            name: "a_colors_" + idx,
+            size: 4,
+            type: UNSIGNED_BYTE,
+            normalized: true,
+          })),
+        { name: "a_id", size: 4, type: UNSIGNED_BYTE, normalized: true },
+      ],
+      CONSTANT_ATTRIBUTES: [{ name: "a_angle", size: 1, type: FLOAT }],
+      CONSTANT_DATA: [
+        [PI / 4],
+        [(3 * PI) / 4],
+        [-PI / 4],
+        [(3 * PI) / 4],
+        [-PI / 4],
+        [(-3 * PI) / 4],
+      ],
+    };
+  }
+
+  processVisibleItem(
+    nodeIndex: number,
+    startIndex: number,
+    data: NodeDisplayData & NodeAttributes & { opacity: number },
+  ) {
+    const array = this.array;
+    const base = floatColor(this.renderer.getSetting("defaultNodeColor"));
+    const color = floatColor(
+      data.color ?? this.renderer.getSetting("defaultNodeColor"),
+    );
+    const stroke = floatColor(
+      data.borderColor ?? this.renderer.getSetting("defaultEdgeColor"),
+    );
+
+    array[startIndex++] = data.x;
+    array[startIndex++] = data.y;
+    array[startIndex++] = data.size;
+    array[startIndex++] = Math.min(data.border ?? 0, 4);
+    array[startIndex++] = data.opacity ?? 1;
+    array[startIndex++] = base;
+    array[startIndex++] = color;
+    array[startIndex++] = stroke;
+    array[startIndex++] = Math.min(7, data.pie?.length ?? 0);
+    Array(7)
+      .fill(0)
+      .forEach((_, idx) => {
+        array[startIndex++] = floatColor(data.pie?.[idx] ?? "#0000");
+      });
+    array[startIndex++] = nodeIndex;
+  }
+
+  setUniforms(
+    params: RenderParams,
+    { gl, uniformLocations }: ProgramInfo,
+  ): void {
+    const { u_sizeRatio, u_correctionRatio, u_cameraAngle, u_matrix } =
+      uniformLocations;
+
+    gl.uniform1f(u_sizeRatio, params.sizeRatio);
+    gl.uniform1f(u_cameraAngle, params.cameraAngle);
+    gl.uniform1f(u_correctionRatio, params.correctionRatio);
+    gl.uniformMatrix3fv(u_matrix, false, params.matrix);
+  }
+}

package/src/programs/node-rect/base/vert.glsl.ts

@@ -0,0 +1,87 @@
+/* istanbul ignore file */
+
+// language=GLSL
+const SHADER_SOURCE = /* glsl */ `
+attribute vec4 a_id;
+attribute vec4 a_base;
+attribute vec4 a_color;
+attribute vec4 a_stroke;
+attribute vec2 a_position;
+attribute float a_size;
+attribute float a_border;
+attribute float a_angle;
+attribute float a_opacity;
+attribute float a_segments;
+attribute vec4 a_colors_0;
+attribute vec4 a_colors_1;
+attribute vec4 a_colors_2;
+attribute vec4 a_colors_3;
+attribute vec4 a_colors_4;
+attribute vec4 a_colors_5;
+attribute vec4 a_colors_6;
+
+uniform mat3 u_matrix;
+uniform float u_sizeRatio;
+uniform float u_cameraAngle;
+uniform float u_correctionRatio;
+
+varying vec4 v_color;
+varying vec4 v_stroke;
+varying float v_border;
+varying vec2 v_diffVector;
+varying float v_segmentAngle;
+varying vec4 v_colors_0;
+varying vec4 v_colors_1;
+varying vec4 v_colors_2;
+varying vec4 v_colors_3;
+varying vec4 v_colors_4;
+varying vec4 v_colors_5;
+varying vec4 v_colors_6;
+
+const float bias = 255.0 / 254.0;
+const float sqrt_8 = sqrt(8.0);
+
+void main() {
+  float angle = a_angle + u_cameraAngle; 
+
+  float size = a_size * u_correctionRatio / u_sizeRatio * sqrt_8;
+  vec2 diffVector = size * vec2(cos(angle), sin(angle));
+  vec2 position = a_position + diffVector;
+
+  float borderLessSize = (a_size - a_border) * u_correctionRatio / u_sizeRatio * sqrt_8;
+
+  gl_Position = vec4(
+    (u_matrix * vec3(position, 1)).xy,
+    0,
+    1
+  );
+
+  v_diffVector = diffVector;
+  v_border = a_border * u_correctionRatio / u_sizeRatio * sqrt_8;
+  v_border = borderLessSize / ${Math.PI / 2.2};
+
+  #ifdef PICKING_MODE
+    v_color = a_id;
+  #else
+    v_color = mix(a_base, a_color, a_opacity * bias);
+    v_stroke = mix(a_base, a_stroke, a_opacity * bias);
+
+    // pie colors
+    v_segmentAngle = 0.0;
+    if(a_segments > 0.0) {
+      v_segmentAngle = ${Math.PI * 2} / a_segments;
+      v_colors_0 = mix(a_base, a_colors_0, a_opacity * bias);
+      v_colors_1 = mix(a_base, a_colors_1, a_opacity * bias);
+      v_colors_2 = mix(a_base, a_colors_2, a_opacity * bias);
+      v_colors_3 = mix(a_base, a_colors_3, a_opacity * bias);
+      v_colors_4 = mix(a_base, a_colors_4, a_opacity * bias);
+      v_colors_5 = mix(a_base, a_colors_5, a_opacity * bias);
+      v_colors_6 = mix(a_base, a_colors_6, a_opacity * bias);
+    }
+  #endif
+
+  v_color.a *= bias;
+}
+`;
+
+export default SHADER_SOURCE;

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

@@ -0,0 +1,19 @@
+import { createNodeCompoundProgram } from "sigma/rendering";
+import { NodeAttributes } from "../../types";
+import { NodeBadgeProgram } from "../node-badge";
+import { NodeImageProgram } from "../node-image";
+import { NodeRectBase } from "./base";
+import { drawNodeHover } from "./base/drawHover";
+import { drawNodeLabel } from "./base/drawLabel";
+
+/* istanbul ignore file */
+
+export const NodeRectProgram = createNodeCompoundProgram<NodeAttributes<any>>(
+  [
+    NodeRectBase,
+    NodeImageProgram(false),
+    ...NodeBadgeProgram(false),
+  ] as AnyObject,
+  drawNodeLabel as AnyObject,
+  drawNodeHover as AnyObject,
+);

package/src/types/index.ts

@@ -0,0 +1,210 @@
+import { GraphOptions } from "graphology-types";
+import { RefObject } from "react";
+import { Graph } from "../graph";
+
+interface NodeBadge {
+  position:
+    | "top-left"
+    | "top-right"
+    | "bottom-left"
+    | "bottom-right"
+    | "top"
+    | "left"
+    | "right";
+  type?: "star" | "exclaim" | "thumbUp" | "thumbDown";
+  path?: string;
+  /**
+   * icon color
+   */
+  iconColor?: string;
+  /**
+   * fill color
+   */
+  color?: string;
+}
+export interface NodeAttributes<N = KeyValue> {
+  /**
+   * node label
+   */
+  label?: string;
+  /**
+   * node shape
+   */
+  type?: "circle" | "rect";
+  /**
+   * node size
+   */
+  size?: number;
+  /**
+   * node weight to apply proportional size
+   */
+  weight?: number;
+  /**
+   * label color
+   */
+  labelColor?: string;
+  /**
+   * border color
+   */
+  borderColor?: string;
+  /**
+   * icon color
+   */
+  iconColor?: string;
+  /**
+   * fill color
+   */
+  color?: string;
+  /**
+   * border width
+   */
+  border?: number;
+  /**
+   * hover color
+   */
+  hoverColor?: string;
+  /**
+   * highlighted color
+   */
+  highlightColor?: string;
+  /**
+   * define node type
+   */
+  nodeType?: string;
+  /**
+   * pie colors
+   */
+  pie?: string[];
+  /**
+   * svg path
+   */
+  path?: string;
+  /**
+   * avatar/image url
+   */
+  image?: string;
+  /**
+   * selected state
+   */
+  selected?: boolean;
+  /**
+   * highlighted state
+   */
+  highlight?: boolean;
+
+  badge?: NodeBadge[];
+
+  x?: number;
+  y?: number;
+  hidden?: boolean;
+
+  data?: N;
+}
+
+export interface EdgeAttributes<E = KeyValue> {
+  /**
+   * edge shape
+   */
+  type?: "line" | "curved";
+  /**
+   * edge label
+   */
+  label?: string;
+  /**
+   * edge size
+   */
+  size?: number;
+  /**
+   * edge weight to apply proportional size
+   */
+  weight?: number;
+  /**
+   * edge color
+   */
+  color?: string;
+  /**
+   * hover color
+   */
+  hoverColor?: string;
+  /**
+   * highlighted color
+   */
+  highlightColor?: string;
+  /**
+   * define edge type
+   */
+  edgeType?: "curved" | "line";
+  /**
+   * edge arrow head
+   */
+  arrow?: "source" | "target" | "both";
+  /**
+   * edge count
+   */
+  count?: number;
+
+  /**
+   * selected state
+   */
+  selected?: boolean;
+  /**
+   * highlighted state
+   */
+  highlight?: boolean;
+
+  data?: E;
+}
+
+export interface InternalNodeAttributes<N = KeyValue>
+  extends NodeAttributes<N> {
+  groupId?: string;
+  isGroup?: boolean;
+  expanded?: boolean;
+  nodeList?: string[];
+  opacity?: number;
+  id?: string;
+  fixed?: boolean;
+  originalEdges?: Array<{
+    key: string;
+    source: string;
+    target: string;
+    attributes?: KeyValue;
+  }>;
+}
+export interface InternalEdgeAttributes<E = KeyValue>
+  extends EdgeAttributes<E> {
+  opacity?: number;
+  curvature?: number;
+  id?: string;
+}
+
+export interface RawGraph<N = KeyValue, E = KeyValue> {
+  nodes: { key: string; attributes?: NodeAttributes<N> }[];
+  edges: {
+    key: string;
+    source: string;
+    target: string;
+    attributes?: EdgeAttributes<E>;
+  }[];
+  attributes?: KeyValue;
+  options?: GraphOptions;
+}
+
+export interface GraphRef<N = KeyValue, E = KeyValue> {
+  graph: Graph<N, E>;
+}
+
+export interface GraphProps<N = KeyValue, E = KeyValue> {
+  ref?: RefObject<GraphRef<N, E> | null>;
+  data: RawGraph<N, E> | Graph<N, E>;
+  nodeReducer?: (node: NodeAttributes<N>) => NodeAttributes<N>;
+  edgeReducer?: (edge: EdgeAttributes<E>) => EdgeAttributes<E>;
+
+  onSelectChange?: (selected: string[]) => void;
+
+  onNodeDoubleClick?: (node: string, attributes: NodeAttributes<N>) => void;
+  onContextMenu?: (
+    type: "canvas" | "node" | "edge",
+    nodesOrEdge?: string | string[],
+  ) => void;
+}