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

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

@@ -1,110 +0,0 @@
-/* istanbul ignore file */
-
-// language=GLSL
-const SHADER = /* glsl */ `
-attribute vec4 a_id;
-attribute vec4 a_color;
-attribute float a_direction;
-attribute float a_thickness;
-attribute float a_opacity;
-attribute vec2 a_source;
-attribute vec2 a_target;
-attribute float a_current;
-attribute float a_curvature;
-attribute float a_sourceSize;
-attribute float a_targetSize;
-
-uniform mat3 u_matrix;
-uniform float u_sizeRatio;
-uniform float u_pixelRatio;
-uniform vec2 u_dimensions;
-uniform float u_minEdgeThickness;
-uniform float u_feather;
-uniform float u_widenessToThicknessRatio;
-
-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;
-
-const float bias = 255.0 / 254.0;
-const float epsilon = 0.7;
-
-vec2 clipspaceToViewport(vec2 pos, vec2 dimensions) {
-  return vec2(
-    (pos.x + 1.0) * dimensions.x / 2.0,
-    (pos.y + 1.0) * dimensions.y / 2.0
-  );
-}
-
-vec2 viewportToClipspace(vec2 pos, vec2 dimensions) {
-  return vec2(
-    pos.x / dimensions.x * 2.0 - 1.0,
-    pos.y / dimensions.y * 2.0 - 1.0
-  );
-}
-
-void main() {
-  float minThickness = u_minEdgeThickness;
-  // Selecting the correct position
-  // Branchless "position = a_source if a_current == 1.0 else a_target"
-  vec2 position = a_source * max(0.0, a_current) + a_target * max(0.0, 1.0 - a_current);
-  position = (u_matrix * vec3(position, 1)).xy;
-
-  vec2 source = (u_matrix * vec3(a_source, 1)).xy;
-  vec2 target = (u_matrix * vec3(a_target, 1)).xy;
-
-  vec2 viewportPosition = clipspaceToViewport(position, u_dimensions);
-  vec2 viewportSource = clipspaceToViewport(source, u_dimensions);
-  vec2 viewportTarget = clipspaceToViewport(target, u_dimensions);
-
-  vec2 delta = viewportTarget.xy - viewportSource.xy;
-  float len = length(delta);
-  vec2 normal = vec2(-delta.y, delta.x) * a_direction;
-  vec2 unitNormal = normal / len;
-  float boundingBoxThickness = len * a_curvature;
-  float curveThickness = max(minThickness, a_thickness / 2.0 / u_sizeRatio * u_pixelRatio);
-
-  v_thickness = curveThickness;
-  v_feather = u_feather;
-
-  v_cpA = viewportSource;
-  v_cpB = 0.5 * (viewportSource + viewportTarget) + unitNormal * a_direction * boundingBoxThickness;
-  v_cpC = viewportTarget;
-
-  vec2 viewportOffsetPosition = (
-    viewportPosition +
-    unitNormal * (boundingBoxThickness / 2.0 + sign(boundingBoxThickness) * (curveThickness + epsilon)) *
-    max(0.0, a_direction) // NOTE: cutting the bounding box in half to avoid overdraw
-  );
-
-  position = viewportToClipspace(viewportOffsetPosition, u_dimensions);
-  gl_Position = vec4(position, 0, 1);
-
-  v_sourceSize = a_sourceSize * u_pixelRatio / u_sizeRatio;
-  v_sourcePoint = viewportSource;
-  
-  v_targetSize = a_targetSize * u_pixelRatio / u_sizeRatio;
-  v_targetPoint = viewportTarget;
-    
-  #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;

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

@@ -1,113 +0,0 @@
-import { type Attributes } from "graphology-types";
-import { type Settings } from "sigma/settings";
-import {
-  type EdgeDisplayData,
-  type NodeDisplayData,
-  type PartialButFor,
-} from "sigma/types";
-
-/* istanbul ignore file */
-
-export type EdgeLabelDrawingFunction<
-  N extends Attributes = Attributes,
-  E extends Attributes = Attributes,
-  G extends Attributes = Attributes,
-> = (
-  context: CanvasRenderingContext2D,
-  edgeData: PartialButFor<EdgeDisplayData, "label" | "color" | "size">,
-  sourceData: PartialButFor<NodeDisplayData, "x" | "y" | "size">,
-  targetData: PartialButFor<NodeDisplayData, "x" | "y" | "size">,
-  settings: Settings<N, E, G>,
-) => void;
-
-export function drawLineLabel<
-  N extends Attributes = Attributes,
-  E extends Attributes = Attributes,
-  G extends Attributes = Attributes,
->(
-  context: CanvasRenderingContext2D,
-  edgeData: PartialButFor<EdgeDisplayData, "label" | "color" | "size">,
-  sourceData: PartialButFor<NodeDisplayData, "x" | "y" | "size">,
-  targetData: PartialButFor<NodeDisplayData, "x" | "y" | "size">,
-  settings: Settings<N, E, G>,
-): void {
-  const size = settings.edgeLabelSize;
-  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 sSize = sourceData.size;
-  const tSize = targetData.size;
-  let sx = sourceData.x;
-  let sy = sourceData.y;
-  let tx = targetData.x;
-  let ty = targetData.y;
-  let cx = (sx + tx) / 2;
-  let cy = (sy + ty) / 2;
-  let dx = tx - sx;
-  let dy = ty - sy;
-  let d = Math.sqrt(dx * dx + dy * dy);
-
-  if (d < sSize + tSize) return;
-
-  // Adding nodes sizes:
-  sx += (dx * sSize) / d;
-  sy += (dy * sSize) / d;
-  tx -= (dx * tSize) / d;
-  ty -= (dy * tSize) / d;
-  cx = (sx + tx) / 2;
-  cy = (sy + ty) / 2;
-  dx = tx - sx;
-  dy = ty - sy;
-  d = Math.sqrt(dx * dx + dy * dy);
-
-  // Handling ellipsis
-  let textLength = context.measureText(label).width;
-
-  if (textLength > d) {
-    const ellipsis = "…";
-    label = label + ellipsis;
-    textLength = context.measureText(label).width;
-
-    while (textLength > d && label.length > 1) {
-      label = label.slice(0, -2) + ellipsis;
-      textLength = context.measureText(label).width;
-    }
-
-    if (label.length < 4) return;
-  }
-
-  let angle;
-  if (dx > 0) {
-    if (dy > 0) angle = Math.acos(dx / d);
-    else angle = Math.asin(dy / d);
-  } else {
-    if (dy > 0) angle = Math.acos(dx / d) + Math.PI;
-    else angle = Math.asin(dx / d) + Math.PI / 2;
-  }
-
-  context.save();
-  context.translate(cx, cy);
-  context.rotate(angle);
-  context.fillStyle = settings.defaultNodeColor || "#fff";
-  context.fillRect(
-    -textLength / 2 - 4,
-    edgeData.size - size + 2,
-    textLength + 8,
-    size + 2,
-  );
-  context.fillStyle = color;
-  context.fillText(label, -textLength / 2, edgeData.size);
-
-  context.restore();
-}

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

@@ -1,34 +0,0 @@
-/* istanbul ignore file */
-
-// language=GLSL
-const SHADER_SOURCE = /* glsl */ `
-precision mediump float;
-
-varying vec4 v_color;
-varying vec2 v_normal;
-varying float v_opacity;
-varying float v_thickness;
-varying float v_feather;
-
-const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
-
-void main(void) {
-  // We only handle antialiasing for normal mode:
-  #ifdef PICKING_MODE
-  gl_FragColor = v_color;
-  #else
-  float dist = length(v_normal) * v_thickness;
-
-  float t = smoothstep(
-    v_thickness - v_feather,
-    v_thickness,
-    dist
-  );
-
-  gl_FragColor = mix(v_color, transparent, t);
-  gl_FragColor = mix(transparent, gl_FragColor, v_opacity);
-  #endif
-}
-`;
-
-export default SHADER_SOURCE;

package/src/programs/edge-line/index.ts

@@ -1,163 +0,0 @@
-import { type Attributes } from "graphology-types";
-import {
-  createEdgeCompoundProgram,
-  EdgeProgram,
-  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 { createEdgeArrowHeadProgram } from "../arrow-head";
-import { drawLineLabel } from "./drawLabel";
-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_matrix",
-  "u_zoomRatio",
-  "u_sizeRatio",
-  "u_correctionRatio",
-  "u_pixelRatio",
-  "u_feather",
-  "u_minEdgeThickness",
-  "u_lengthToThicknessRatio",
-] as const;
-
-class EdgeLineProgramBase<
-  N extends Attributes = Attributes,
-  E extends Attributes = Attributes,
-  G extends Attributes = Attributes,
-> extends EdgeProgram<(typeof UNIFORMS)[number], N, E, G> {
-  getDefinition() {
-    return {
-      VERTICES: 6,
-      VERTEX_SHADER_SOURCE,
-      FRAGMENT_SHADER_SOURCE,
-      METHOD: WebGLRenderingContext.TRIANGLES,
-      UNIFORMS,
-      ATTRIBUTES: [
-        { name: "a_positionStart", size: 2, type: FLOAT },
-        { name: "a_positionEnd", size: 2, type: FLOAT },
-        { name: "a_normal", size: 2, 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 },
-        { name: "a_sourceRadius", size: 1, type: FLOAT },
-        { name: "a_targetRadius", size: 1, type: FLOAT },
-      ],
-      CONSTANT_ATTRIBUTES: [
-        // If 0, then position will be a_positionStart
-        // If 2, then position will be a_positionEnd
-        { name: "a_positionCoef", size: 1, type: FLOAT },
-        { name: "a_normalCoef", size: 1, type: FLOAT },
-        { name: "a_sourceRadiusCoef", size: 1, type: FLOAT },
-        { name: "a_targetRadiusCoef", size: 1, type: FLOAT },
-      ],
-      CONSTANT_DATA: [
-        [0, 1, -1, 0],
-        [0, -1, 1, 0],
-        [1, 1, 0, 1],
-        [1, 1, 0, 1],
-        [0, -1, 1, 0],
-        [1, -1, 0, -1],
-      ],
-    };
-  }
-
-  processVisibleItem(
-    edgeIndex: number,
-    startIndex: number,
-    sourceData: NodeDisplayData,
-    targetData: NodeDisplayData,
-    data: EdgeDisplayData & InternalEdgeAttributes,
-  ) {
-    let color = data.color ?? this.renderer.getSetting("defaultEdgeColor");
-    if (data.selected) color = "#f00";
-    if (data.highlight) color = "#F54A4A";
-
-    const thickness =
-      Math.min(data.size || 1, 0.5) * (data.selected ?? data.highlight ? 8 : 4);
-    const x1 = sourceData.x;
-    const y1 = sourceData.y;
-    const x2 = targetData.x;
-    const y2 = targetData.y;
-
-    // Computing normals
-    const dx = x2 - x1;
-    const dy = y2 - y1;
-
-    const sourceRadius = sourceData.size || 1;
-    const targetRadius = targetData.size || 1;
-
-    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++] = x1;
-    array[startIndex++] = y1;
-    array[startIndex++] = x2;
-    array[startIndex++] = y2;
-    array[startIndex++] = n1;
-    array[startIndex++] = n2;
-    array[startIndex++] = floatColor(color);
-    array[startIndex++] = data.opacity ?? 1;
-    array[startIndex++] = edgeIndex;
-    array[startIndex++] = ["both", "source"].includes(data.arrow ?? "")
-      ? sourceRadius
-      : 0;
-    array[startIndex++] = ["both", "target"].includes(data.arrow ?? "")
-      ? targetRadius
-      : 0;
-  }
-
-  setUniforms(
-    params: RenderParams,
-    { gl, uniformLocations }: ProgramInfo,
-  ): void {
-    const {
-      u_matrix,
-      u_zoomRatio,
-      u_feather,
-      u_pixelRatio,
-      u_correctionRatio,
-      u_sizeRatio,
-      u_minEdgeThickness,
-      u_lengthToThicknessRatio,
-    } = uniformLocations;
-
-    gl.uniformMatrix3fv(u_matrix, false, params.matrix);
-    gl.uniform1f(u_zoomRatio, params.zoomRatio);
-    gl.uniform1f(u_sizeRatio, params.sizeRatio);
-    gl.uniform1f(u_correctionRatio, params.correctionRatio);
-    gl.uniform1f(u_pixelRatio, params.pixelRatio);
-    gl.uniform1f(u_feather, params.antiAliasingFeather);
-    gl.uniform1f(u_minEdgeThickness, params.minEdgeThickness);
-    gl.uniform1f(u_lengthToThicknessRatio, 2.5);
-  }
-}
-
-export const EdgeLineProgram = createEdgeCompoundProgram(
-  [
-    EdgeLineProgramBase,
-    createEdgeArrowHeadProgram({ extremity: "source" }),
-    createEdgeArrowHeadProgram({ extremity: "target" }),
-  ],
-  drawLineLabel as any,
-);

package/src/programs/edge-line/vert.glsl.ts

@@ -1,104 +0,0 @@
-/* istanbul ignore file */
-
-// language=GLSL
-const SHADER_SOURCE = /* glsl */ `
-attribute vec4 a_id;
-attribute vec4 a_color;
-attribute vec2 a_normal;
-attribute float a_opacity;
-attribute float a_normalCoef;
-attribute vec2 a_positionStart;
-attribute vec2 a_positionEnd;
-attribute float a_positionCoef;
-attribute float a_sourceRadius;
-attribute float a_targetRadius;
-attribute float a_sourceRadiusCoef;
-attribute float a_targetRadiusCoef;
-
-uniform mat3 u_matrix;
-uniform float u_sizeRatio;
-uniform float u_zoomRatio;
-uniform float u_pixelRatio;
-uniform float u_correctionRatio;
-uniform float u_minEdgeThickness;
-uniform float u_lengthToThicknessRatio;
-uniform float u_feather;
-
-varying vec4 v_color;
-varying vec2 v_normal;
-varying float v_opacity;
-varying float v_thickness;
-varying float v_feather;
-
-const float minThickness = 1.7;
-const float bias = 255.0 / 254.0;
-
-void main() {
-  vec2 normal = a_normal * a_normalCoef;
-  vec2 position = a_positionStart * (1.0 - a_positionCoef) + a_positionEnd * a_positionCoef;
-
-  float normalLength = length(normal);
-  vec2 unitNormal = normal / normalLength;
-
-  // We require edges to be at least "minThickness" pixels thick *on screen*
-  // (so we need to compensate the size ratio):
-  float pixelsThickness = max(normalLength, minThickness * u_sizeRatio);
-
-  // Then, we need to retrieve the normalized thickness of the edge in the WebGL
-  // referential (in a ([0, 1], [0, 1]) space), using our "magic" correction
-  // ratio:
-  float webGLThickness = pixelsThickness * u_correctionRatio / u_sizeRatio;
-
-  // Here, we move the point to leave space for the arrow heads:
-  // Source arrow head
-  float sourceRadius = a_sourceRadius * a_sourceRadiusCoef;
-  float sourceDirection = sign(sourceRadius);
-  float webGLSourceRadius = sourceDirection * sourceRadius * 2.0 * u_correctionRatio / u_sizeRatio;
-  float webGLSourceArrowHeadLength = webGLThickness * u_lengthToThicknessRatio * 2.0;
-  vec2 sourceCompensationVector =
-    vec2(-sourceDirection * unitNormal.y, sourceDirection * unitNormal.x)
-    * (webGLSourceRadius + webGLSourceArrowHeadLength);
-    
-  // Target arrow head
-  float targetRadius = a_targetRadius * a_targetRadiusCoef;
-  float targetDirection = sign(targetRadius);
-  float webGLTargetRadius = targetDirection * targetRadius * 2.0 * u_correctionRatio / u_sizeRatio;
-  float webGLTargetArrowHeadLength = webGLThickness * u_lengthToThicknessRatio * 2.0;
-  vec2 targetCompensationVector =
-  vec2(-targetDirection * unitNormal.y, targetDirection * unitNormal.x)
-    * (webGLTargetRadius + webGLTargetArrowHeadLength);
-
-  if(a_sourceRadius == 0.0) {
-    sourceCompensationVector = vec2(0.0, 0.0);
-  }
-  if(a_targetRadius == 0.0) {
-    targetCompensationVector = vec2(0.0, 0.0);
-  }
-
-  // Here is the proper position of the vertex
-  gl_Position = vec4((u_matrix * vec3(position + unitNormal * webGLThickness + sourceCompensationVector + targetCompensationVector, 1)).xy, 0, 1);
-
-  // For the fragment shader though, we need a thickness that takes the "magic"
-  // correction ratio into account (as in webGLThickness), but so that the
-  // antialiasing effect does not depend on the zoom level. So here's yet
-  // another thickness version:
-  v_thickness = webGLThickness / u_zoomRatio;
-
-  v_normal = unitNormal;
-
-  v_feather = u_feather * u_correctionRatio / u_zoomRatio / u_pixelRatio * 2.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 = a_color;
-  v_opacity = a_opacity;
-  #endif
-
-  v_color.a *= bias;
-}
-`;
-
-export default SHADER_SOURCE;