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

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

@@ -1,145 +0,0 @@
-import { type Settings } from "sigma/settings";
-import {
-  type EdgeAttributes,
-  type InternalNodeAttributes,
-  type NodeAttributes,
-} from "../../../types";
-
-/* istanbul ignore file */
-
-export function drawNodeLabel(
-  context: CanvasRenderingContext2D,
-  data: InternalNodeAttributes & {
-    opacity: number;
-    x: number;
-    y: number;
-    size: number;
-  },
-  settings: Settings<NodeAttributes, EdgeAttributes>,
-): 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.highlightColor ?? "#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;
-
-    //   const angleRadian = Math.asin(boxHeight / 2 / radius);
-    //   const xDeltaCoord = Math.sqrt(
-    //     Math.abs(Math.pow(radius, 2) - Math.pow(boxHeight / 2, 2)),
-    //   );
-
-    //   context.beginPath();
-    //   context.moveTo(data.x + xDeltaCoord, 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 + xDeltaCoord, data.y - boxHeight / 2);
-    //   context.arc(data.x, data.y, radius, angleRadian, -angleRadian);
-    //   context.closePath();
-    //   context.stroke();
-    // } else {
-    context.beginPath();
-    context.arc(data.x, data.y, nodeSize + PADDING, 0, Math.PI * 2);
-    context.closePath();
-    context.stroke();
-    // }
-  }
-
-  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;
-
-    //   const angleRadian = Math.asin(boxHeight / 2 / radius);
-    //   const xDeltaCoord = Math.sqrt(
-    //     Math.abs(Math.pow(radius, 2) - Math.pow(boxHeight / 2, 2)),
-    //   );
-
-    //   context.beginPath();
-    //   context.moveTo(data.x + xDeltaCoord, 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 + xDeltaCoord, data.y - boxHeight / 2);
-    //   context.arc(data.x, data.y, radius, angleRadian, -angleRadian);
-    //   context.closePath();
-    //   context.stroke();
-    // } else {
-    context.beginPath();
-    context.arc(data.x, data.y, nodeSize + PADDING, 0, Math.PI * 2);
-    context.closePath();
-    context.stroke();
-    // }
-  }
-
-  if (data.isGroup) {
-    const container =
-      context.canvas.parentElement?.parentElement?.querySelector(
-        ".sigma-groupHandles",
-      ) as unknown as HTMLElement;
-    let handle = container.querySelector(
-      `[data-id="${data.id}"]`,
-    ) as unknown as HTMLElement;
-    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-circle/base/frag.glsl.ts

@@ -1,72 +0,0 @@
-/* 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_radius;
-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;
-
-const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
-
-void main(void) {
-  float border = u_correctionRatio * 2.0;
-  float dist = length(v_diffVector) - v_radius + 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};
-
-  // No antialiasing for picking mode:
-  #ifdef PICKING_MODE
-    if (dist > border)
-      gl_FragColor = transparent;
-    else
-      gl_FragColor = v_color;
-  #else
-    float t = 0.0;
-    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 (dist > (v_radius - v_border) / 2.0) {
-      color = v_stroke;
-    }
-    else if (v_segmentAngle > 0.0 && dist > (v_radius - (v_border + pieSize)) / 2.0) {
-      color = piecolor;
-    }
-    if (dist > 0.0) {
-      t = dist / border;
-    }
-
-    gl_FragColor = mix(color, transparent, t);
-  #endif
-}
-`;
-
-export default SHADER_SOURCE;

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

@@ -1,100 +0,0 @@
-import { NodeProgram, 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 VERTEX_SHADER_SOURCE from "./vert.glsl";
-
-/* istanbul ignore file */
-
-const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
-
-const UNIFORMS = ["u_sizeRatio", "u_correctionRatio", "u_matrix"] as const;
-
-export class NodeCircleBase extends NodeProgram<
-  (typeof UNIFORMS)[number],
-  NodeAttributes,
-  EdgeAttributes
-> {
-  static readonly ANGLE_1 = 0;
-  static readonly ANGLE_2 = (2 * Math.PI) / 3;
-  static readonly ANGLE_3 = (4 * Math.PI) / 3;
-
-  getDefinition() {
-    return {
-      VERTICES: 3,
-      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: [
-        [NodeCircleBase.ANGLE_1],
-        [NodeCircleBase.ANGLE_2],
-        [NodeCircleBase.ANGLE_3],
-      ],
-    };
-  }
-
-  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_matrix } = uniformLocations;
-
-    gl.uniform1f(u_correctionRatio, params.correctionRatio);
-    gl.uniform1f(u_sizeRatio, params.sizeRatio);
-    gl.uniformMatrix3fv(u_matrix, false, params.matrix);
-  }
-}

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

@@ -1,83 +0,0 @@
-/* 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_correctionRatio;
-
-varying vec4 v_color;
-varying vec4 v_stroke;
-varying vec2 v_diffVector;
-varying float v_radius;
-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;
-
-const float bias = 255.0 / 254.0;
-
-void main() {
-  float size = a_size * u_correctionRatio / u_sizeRatio * 4.0;
-  vec2 diffVector = size * vec2(cos(a_angle), sin(a_angle));
-  vec2 position = a_position + diffVector;
-  gl_Position = vec4(
-    (u_matrix * vec3(position, 1)).xy,
-    0,
-    1
-  );
-
-  v_diffVector = diffVector;
-  v_radius = size / 2.0;
-  v_border = (a_border + 8.0) * u_correctionRatio / u_sizeRatio * 4.0;
-
-  #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 = 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-circle/index.ts

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