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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (224) hide show
  1. package/dist/cjs/context/context.js +16 -0
  2. package/dist/cjs/graph/index.js +58 -381
  3. package/dist/cjs/index.js +25 -21
  4. package/dist/cjs/utils/edge.js +76 -0
  5. package/dist/cjs/utils/node.js +93 -0
  6. package/dist/cjs/utils/sdfFolder.js +107 -0
  7. package/dist/cjs/viewer/Graph.js +174 -0
  8. package/dist/esm/context/context.js +15 -0
  9. package/dist/esm/graph/index.js +59 -382
  10. package/dist/esm/index.js +24 -20
  11. package/dist/esm/utils/edge.js +75 -0
  12. package/dist/esm/utils/node.js +92 -0
  13. package/dist/esm/utils/sdfFolder.js +107 -0
  14. package/dist/esm/viewer/Graph.js +174 -0
  15. package/dist/types/context/context.d.ts +35 -0
  16. package/dist/types/graph/index.d.ts +47 -24
  17. package/dist/types/index.d.ts +28 -2
  18. package/dist/types/types/index.d.ts +124 -175
  19. package/dist/types/utils/edge.d.ts +28 -0
  20. package/dist/types/utils/node.d.ts +28 -0
  21. package/dist/types/utils/sdfFolder.d.ts +75 -0
  22. package/dist/types/viewer/Graph.d.ts +31 -0
  23. package/package.json +19 -25
  24. package/src/context/context.tsx +43 -0
  25. package/src/graph/index.ts +76 -399
  26. package/src/index.ts +24 -26
  27. package/src/types/index.ts +139 -185
  28. package/src/utils/edge.ts +65 -0
  29. package/src/utils/node.ts +105 -0
  30. package/src/utils/sdfFolder.ts +141 -0
  31. package/src/viewer/Graph.tsx +159 -0
  32. package/css/styles.css +0 -56
  33. package/dist/cjs/_virtual/_rollup-plugin-web-worker-loader__helper__auto__createBase64WorkerFactory.js +0 -14
  34. package/dist/cjs/_virtual/_rollup-plugin-web-worker-loader__helper__auto__isNodeJS.js +0 -9
  35. package/dist/cjs/_virtual/_rollup-plugin-web-worker-loader__helper__browser__createBase64WorkerFactory.js +0 -35
  36. package/dist/cjs/_virtual/_rollup-plugin-web-worker-loader__helper__node__WorkerClass.js +0 -11
  37. package/dist/cjs/_virtual/_rollup-plugin-web-worker-loader__helper__node__createBase64WorkerFactory.js +0 -20
  38. package/dist/cjs/_virtual/elk-worker.js +0 -8
  39. package/dist/cjs/components/ContextMenu.js +0 -133
  40. package/dist/cjs/components/Provider.js +0 -103
  41. package/dist/cjs/components/Tools.js +0 -205
  42. package/dist/cjs/components/Viewer.js +0 -59
  43. package/dist/cjs/components/context.js +0 -34
  44. package/dist/cjs/constants/index.js +0 -16
  45. package/dist/cjs/hooks/sigmaDragSelect.js +0 -169
  46. package/dist/cjs/hooks/sigmaHilighter.js +0 -83
  47. package/dist/cjs/hooks/sigmaMouseActions.js +0 -145
  48. package/dist/cjs/hooks/useGraphology.js +0 -41
  49. package/dist/cjs/hooks/useSigma.js +0 -112
  50. package/dist/cjs/programs/arrow-head/frag.glsl.js +0 -8
  51. package/dist/cjs/programs/arrow-head/index.js +0 -142
  52. package/dist/cjs/programs/arrow-head/vert.glsl.js +0 -8
  53. package/dist/cjs/programs/edge-curve/drawLabel.js +0 -136
  54. package/dist/cjs/programs/edge-curve/frag.glsl.js +0 -8
  55. package/dist/cjs/programs/edge-curve/index.js +0 -157
  56. package/dist/cjs/programs/edge-curve/vert.glsl.js +0 -8
  57. package/dist/cjs/programs/edge-line/drawLabel.js +0 -70
  58. package/dist/cjs/programs/edge-line/frag.glsl.js +0 -8
  59. package/dist/cjs/programs/edge-line/index.js +0 -166
  60. package/dist/cjs/programs/edge-line/vert.glsl.js +0 -8
  61. package/dist/cjs/programs/node-badge/factory.js +0 -250
  62. package/dist/cjs/programs/node-badge/frag.glsl.js +0 -8
  63. package/dist/cjs/programs/node-badge/index.js +0 -33
  64. package/dist/cjs/programs/node-badge/texture.js +0 -455
  65. package/dist/cjs/programs/node-badge/vert.glsl.js +0 -19
  66. package/dist/cjs/programs/node-circle/base/drawHover.js +0 -71
  67. package/dist/cjs/programs/node-circle/base/drawLabel.js +0 -113
  68. package/dist/cjs/programs/node-circle/base/frag.glsl.js +0 -8
  69. package/dist/cjs/programs/node-circle/base/index.js +0 -136
  70. package/dist/cjs/programs/node-circle/base/vert.glsl.js +0 -8
  71. package/dist/cjs/programs/node-circle/index.js +0 -15
  72. package/dist/cjs/programs/node-image/factory.js +0 -224
  73. package/dist/cjs/programs/node-image/frag.glsl.js +0 -8
  74. package/dist/cjs/programs/node-image/index.js +0 -14
  75. package/dist/cjs/programs/node-image/texture.js +0 -472
  76. package/dist/cjs/programs/node-image/vert.glsl.js +0 -8
  77. package/dist/cjs/programs/node-rect/base/drawHover.js +0 -68
  78. package/dist/cjs/programs/node-rect/base/drawLabel.js +0 -107
  79. package/dist/cjs/programs/node-rect/base/frag.glsl.js +0 -8
  80. package/dist/cjs/programs/node-rect/base/index.js +0 -135
  81. package/dist/cjs/programs/node-rect/base/vert.glsl.js +0 -8
  82. package/dist/cjs/programs/node-rect/index.js +0 -15
  83. package/dist/esm/_virtual/_rollup-plugin-web-worker-loader__helper__auto__createBase64WorkerFactory.js +0 -14
  84. package/dist/esm/_virtual/_rollup-plugin-web-worker-loader__helper__auto__isNodeJS.js +0 -9
  85. package/dist/esm/_virtual/_rollup-plugin-web-worker-loader__helper__browser__createBase64WorkerFactory.js +0 -34
  86. package/dist/esm/_virtual/_rollup-plugin-web-worker-loader__helper__node__WorkerClass.js +0 -13
  87. package/dist/esm/_virtual/_rollup-plugin-web-worker-loader__helper__node__createBase64WorkerFactory.js +0 -20
  88. package/dist/esm/_virtual/elk-worker.js +0 -8
  89. package/dist/esm/components/ContextMenu.js +0 -133
  90. package/dist/esm/components/Provider.js +0 -103
  91. package/dist/esm/components/Tools.js +0 -205
  92. package/dist/esm/components/Viewer.js +0 -59
  93. package/dist/esm/components/context.js +0 -33
  94. package/dist/esm/constants/index.js +0 -16
  95. package/dist/esm/hooks/sigmaDragSelect.js +0 -169
  96. package/dist/esm/hooks/sigmaHilighter.js +0 -83
  97. package/dist/esm/hooks/sigmaMouseActions.js +0 -145
  98. package/dist/esm/hooks/useGraphology.js +0 -41
  99. package/dist/esm/hooks/useSigma.js +0 -112
  100. package/dist/esm/programs/arrow-head/frag.glsl.js +0 -8
  101. package/dist/esm/programs/arrow-head/index.js +0 -141
  102. package/dist/esm/programs/arrow-head/vert.glsl.js +0 -8
  103. package/dist/esm/programs/edge-curve/drawLabel.js +0 -136
  104. package/dist/esm/programs/edge-curve/frag.glsl.js +0 -8
  105. package/dist/esm/programs/edge-curve/index.js +0 -156
  106. package/dist/esm/programs/edge-curve/vert.glsl.js +0 -8
  107. package/dist/esm/programs/edge-line/drawLabel.js +0 -70
  108. package/dist/esm/programs/edge-line/frag.glsl.js +0 -8
  109. package/dist/esm/programs/edge-line/index.js +0 -166
  110. package/dist/esm/programs/edge-line/vert.glsl.js +0 -8
  111. package/dist/esm/programs/node-badge/factory.js +0 -250
  112. package/dist/esm/programs/node-badge/frag.glsl.js +0 -8
  113. package/dist/esm/programs/node-badge/index.js +0 -32
  114. package/dist/esm/programs/node-badge/texture.js +0 -445
  115. package/dist/esm/programs/node-badge/vert.glsl.js +0 -19
  116. package/dist/esm/programs/node-circle/base/drawHover.js +0 -71
  117. package/dist/esm/programs/node-circle/base/drawLabel.js +0 -113
  118. package/dist/esm/programs/node-circle/base/frag.glsl.js +0 -8
  119. package/dist/esm/programs/node-circle/base/index.js +0 -136
  120. package/dist/esm/programs/node-circle/base/vert.glsl.js +0 -8
  121. package/dist/esm/programs/node-circle/index.js +0 -15
  122. package/dist/esm/programs/node-image/factory.js +0 -224
  123. package/dist/esm/programs/node-image/frag.glsl.js +0 -8
  124. package/dist/esm/programs/node-image/index.js +0 -13
  125. package/dist/esm/programs/node-image/texture.js +0 -462
  126. package/dist/esm/programs/node-image/vert.glsl.js +0 -8
  127. package/dist/esm/programs/node-rect/base/drawHover.js +0 -68
  128. package/dist/esm/programs/node-rect/base/drawLabel.js +0 -107
  129. package/dist/esm/programs/node-rect/base/frag.glsl.js +0 -8
  130. package/dist/esm/programs/node-rect/base/index.js +0 -135
  131. package/dist/esm/programs/node-rect/base/vert.glsl.js +0 -8
  132. package/dist/esm/programs/node-rect/index.js +0 -15
  133. package/dist/types/components/ContextMenu.d.ts +0 -1
  134. package/dist/types/components/Provider.d.ts +0 -3
  135. package/dist/types/components/Tools.d.ts +0 -1
  136. package/dist/types/components/Viewer.d.ts +0 -2
  137. package/dist/types/components/context.d.ts +0 -17
  138. package/dist/types/constants/index.d.ts +0 -12
  139. package/dist/types/graph/layout.worker.d.ts +0 -1
  140. package/dist/types/hooks/sigmaDragSelect.d.ts +0 -8
  141. package/dist/types/hooks/sigmaHilighter.d.ts +0 -3
  142. package/dist/types/hooks/sigmaMouseActions.d.ts +0 -3
  143. package/dist/types/hooks/useGraphology.d.ts +0 -6
  144. package/dist/types/hooks/useSigma.d.ts +0 -8
  145. package/dist/types/i18n/index.d.ts +0 -0
  146. package/dist/types/programs/arrow-head/frag.glsl.d.ts +0 -2
  147. package/dist/types/programs/arrow-head/index.d.ts +0 -9
  148. package/dist/types/programs/arrow-head/vert.glsl.d.ts +0 -2
  149. package/dist/types/programs/edge-curve/drawLabel.d.ts +0 -6
  150. package/dist/types/programs/edge-curve/frag.glsl.d.ts +0 -2
  151. package/dist/types/programs/edge-curve/index.d.ts +0 -43
  152. package/dist/types/programs/edge-curve/vert.glsl.d.ts +0 -2
  153. package/dist/types/programs/edge-line/drawLabel.d.ts +0 -5
  154. package/dist/types/programs/edge-line/frag.glsl.d.ts +0 -2
  155. package/dist/types/programs/edge-line/index.d.ts +0 -11
  156. package/dist/types/programs/edge-line/vert.glsl.d.ts +0 -2
  157. package/dist/types/programs/node-badge/factory.d.ts +0 -27
  158. package/dist/types/programs/node-badge/frag.glsl.d.ts +0 -2
  159. package/dist/types/programs/node-badge/index.d.ts +0 -5
  160. package/dist/types/programs/node-badge/texture.d.ts +0 -102
  161. package/dist/types/programs/node-badge/vert.glsl.d.ts +0 -2
  162. package/dist/types/programs/node-circle/base/drawHover.d.ts +0 -8
  163. package/dist/types/programs/node-circle/base/drawLabel.d.ts +0 -8
  164. package/dist/types/programs/node-circle/base/frag.glsl.d.ts +0 -2
  165. package/dist/types/programs/node-circle/base/index.d.ts +0 -37
  166. package/dist/types/programs/node-circle/base/vert.glsl.d.ts +0 -2
  167. package/dist/types/programs/node-circle/index.d.ts +0 -11
  168. package/dist/types/programs/node-image/factory.d.ts +0 -25
  169. package/dist/types/programs/node-image/frag.glsl.d.ts +0 -2
  170. package/dist/types/programs/node-image/index.d.ts +0 -5
  171. package/dist/types/programs/node-image/texture.d.ts +0 -102
  172. package/dist/types/programs/node-image/vert.glsl.d.ts +0 -2
  173. package/dist/types/programs/node-rect/base/drawHover.d.ts +0 -8
  174. package/dist/types/programs/node-rect/base/drawLabel.d.ts +0 -8
  175. package/dist/types/programs/node-rect/base/frag.glsl.d.ts +0 -2
  176. package/dist/types/programs/node-rect/base/index.d.ts +0 -34
  177. package/dist/types/programs/node-rect/base/vert.glsl.d.ts +0 -2
  178. package/dist/types/programs/node-rect/index.d.ts +0 -11
  179. package/src/components/ContextMenu.tsx +0 -138
  180. package/src/components/Provider.tsx +0 -116
  181. package/src/components/Tools.tsx +0 -68
  182. package/src/components/Viewer.tsx +0 -75
  183. package/src/components/context.ts +0 -43
  184. package/src/constants/index.ts +0 -22
  185. package/src/graph/layout.worker.ts +0 -42
  186. package/src/hooks/sigmaDragSelect.ts +0 -219
  187. package/src/hooks/sigmaHilighter.ts +0 -107
  188. package/src/hooks/sigmaMouseActions.ts +0 -153
  189. package/src/hooks/useGraphology.ts +0 -31
  190. package/src/hooks/useSigma.ts +0 -118
  191. package/src/i18n/index.ts +0 -0
  192. package/src/programs/arrow-head/frag.glsl.ts +0 -18
  193. package/src/programs/arrow-head/index.ts +0 -156
  194. package/src/programs/arrow-head/vert.glsl.ts +0 -75
  195. package/src/programs/edge-curve/drawLabel.ts +0 -166
  196. package/src/programs/edge-curve/frag.glsl.ts +0 -86
  197. package/src/programs/edge-curve/index.ts +0 -156
  198. package/src/programs/edge-curve/vert.glsl.ts +0 -110
  199. package/src/programs/edge-line/drawLabel.ts +0 -113
  200. package/src/programs/edge-line/frag.glsl.ts +0 -34
  201. package/src/programs/edge-line/index.ts +0 -163
  202. package/src/programs/edge-line/vert.glsl.ts +0 -104
  203. package/src/programs/node-badge/factory.ts +0 -325
  204. package/src/programs/node-badge/frag.glsl.ts +0 -79
  205. package/src/programs/node-badge/index.ts +0 -35
  206. package/src/programs/node-badge/texture.ts +0 -425
  207. package/src/programs/node-badge/vert.glsl.ts +0 -99
  208. package/src/programs/node-circle/base/drawHover.ts +0 -80
  209. package/src/programs/node-circle/base/drawLabel.ts +0 -145
  210. package/src/programs/node-circle/base/frag.glsl.ts +0 -72
  211. package/src/programs/node-circle/base/index.ts +0 -100
  212. package/src/programs/node-circle/base/vert.glsl.ts +0 -83
  213. package/src/programs/node-circle/index.ts +0 -19
  214. package/src/programs/node-image/factory.ts +0 -299
  215. package/src/programs/node-image/frag.glsl.ts +0 -97
  216. package/src/programs/node-image/index.ts +0 -7
  217. package/src/programs/node-image/texture.ts +0 -435
  218. package/src/programs/node-image/vert.glsl.ts +0 -60
  219. package/src/programs/node-rect/base/drawHover.ts +0 -77
  220. package/src/programs/node-rect/base/drawLabel.ts +0 -149
  221. package/src/programs/node-rect/base/frag.glsl.ts +0 -67
  222. package/src/programs/node-rect/base/index.ts +0 -107
  223. package/src/programs/node-rect/base/vert.glsl.ts +0 -87
  224. package/src/programs/node-rect/index.ts +0 -19
@@ -1,18 +0,0 @@
1
- /* istanbul ignore file */
2
-
3
- // language=GLSL
4
- const SHADER_SOURCE = /* glsl */ `
5
- precision mediump float;
6
-
7
- varying vec4 v_color;
8
- varying float v_opacity;
9
-
10
- const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
11
-
12
- void main(void) {
13
- gl_FragColor = v_color;
14
- gl_FragColor = mix(transparent, gl_FragColor, v_opacity);
15
- }
16
- `;
17
-
18
- export default SHADER_SOURCE;
@@ -1,156 +0,0 @@
1
- import { type Attributes } from "graphology-types";
2
-
3
- import {
4
- EdgeProgram,
5
- type EdgeProgramType,
6
- type ProgramInfo,
7
- } from "sigma/rendering";
8
- import {
9
- type EdgeDisplayData,
10
- type NodeDisplayData,
11
- type RenderParams,
12
- } from "sigma/types";
13
- import { floatColor } from "sigma/utils";
14
- import { type InternalEdgeAttributes } from "../../types";
15
- import FRAGMENT_SHADER_SOURCE from "./frag.glsl";
16
- import VERTEX_SHADER_SOURCE from "./vert.glsl";
17
-
18
- const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
19
-
20
- const UNIFORMS = [
21
- "u_matrix",
22
- "u_sizeRatio",
23
- "u_correctionRatio",
24
- "u_minEdgeThickness",
25
- "u_lengthToThicknessRatio",
26
- "u_widenessToThicknessRatio",
27
- ] as const;
28
-
29
- export interface CreateEdgeArrowHeadProgramOptions {
30
- extremity: "source" | "target";
31
- lengthToThicknessRatio: number;
32
- widenessToThicknessRatio: number;
33
- }
34
-
35
- export const DEFAULT_EDGE_ARROW_HEAD_PROGRAM_OPTIONS: CreateEdgeArrowHeadProgramOptions =
36
- {
37
- extremity: "target",
38
- lengthToThicknessRatio: 2.5,
39
- widenessToThicknessRatio: 2,
40
- };
41
-
42
- export function createEdgeArrowHeadProgram<
43
- N extends Attributes = Attributes,
44
- E extends Attributes = Attributes,
45
- G extends Attributes = Attributes,
46
- >(
47
- inputOptions?: Partial<CreateEdgeArrowHeadProgramOptions>,
48
- ): EdgeProgramType<N, E, G> {
49
- const options = {
50
- ...DEFAULT_EDGE_ARROW_HEAD_PROGRAM_OPTIONS,
51
- ...(inputOptions ?? {}),
52
- };
53
-
54
- return class EdgeArrowHeadProgram<
55
- N extends Attributes = Attributes,
56
- E extends Attributes = Attributes,
57
- G extends Attributes = Attributes,
58
- > extends EdgeProgram<(typeof UNIFORMS)[number], N, E, G> {
59
- getDefinition() {
60
- return {
61
- VERTICES: 3,
62
- VERTEX_SHADER_SOURCE,
63
- FRAGMENT_SHADER_SOURCE,
64
- METHOD: WebGLRenderingContext.TRIANGLES,
65
- UNIFORMS,
66
- ATTRIBUTES: [
67
- { name: "a_position", size: 2, type: FLOAT },
68
- { name: "a_normal", size: 2, type: FLOAT },
69
- { name: "a_radius", size: 1, type: FLOAT },
70
- { name: "a_color", size: 4, type: UNSIGNED_BYTE, normalized: true },
71
- { name: "a_opacity", size: 1, type: FLOAT },
72
- { name: "a_id", size: 4, type: UNSIGNED_BYTE, normalized: true },
73
- ],
74
- CONSTANT_ATTRIBUTES: [{ name: "a_barycentric", size: 3, type: FLOAT }],
75
- CONSTANT_DATA: [
76
- [1, 0, 0],
77
- [0, 1, 0],
78
- [0, 0, 1],
79
- ],
80
- };
81
- }
82
-
83
- processVisibleItem(
84
- edgeIndex: number,
85
- startIndex: number,
86
- sourceData: NodeDisplayData,
87
- targetData: NodeDisplayData,
88
- data: EdgeDisplayData & InternalEdgeAttributes,
89
- ) {
90
- if (options.extremity === "source") {
91
- [sourceData, targetData] = [targetData, sourceData];
92
- }
93
-
94
- const thickness = Math.min(data.size || 1, 0.5) * 8;
95
- const radius = targetData.size || 1;
96
- const x1 = sourceData.x;
97
- const y1 = sourceData.y;
98
- const x2 = targetData.x;
99
- const y2 = targetData.y;
100
- let color = data.color;
101
- if (data.selected) color = "#f00";
102
- if (data.highlight) color = "#F54A4A";
103
-
104
- // Computing normals
105
- const dx = x2 - x1;
106
- const dy = y2 - y1;
107
-
108
- let len = dx * dx + dy * dy;
109
- let n1 = 0;
110
- let n2 = 0;
111
-
112
- if (len) {
113
- len = 1 / Math.sqrt(len);
114
-
115
- n1 = -dy * len * thickness;
116
- n2 = dx * len * thickness;
117
- }
118
-
119
- const array = this.array;
120
-
121
- array[startIndex++] = x2;
122
- array[startIndex++] = y2;
123
- array[startIndex++] = -n1;
124
- array[startIndex++] = -n2;
125
- array[startIndex++] = radius;
126
- array[startIndex++] = floatColor(color);
127
- array[startIndex++] = ["both", options.extremity].includes(
128
- data.arrow ?? "",
129
- )
130
- ? data.opacity ?? 1
131
- : 0;
132
- array[startIndex++] = edgeIndex;
133
- }
134
-
135
- setUniforms(
136
- params: RenderParams,
137
- { gl, uniformLocations }: ProgramInfo,
138
- ): void {
139
- const {
140
- u_matrix,
141
- u_sizeRatio,
142
- u_correctionRatio,
143
- u_minEdgeThickness,
144
- u_lengthToThicknessRatio,
145
- u_widenessToThicknessRatio,
146
- } = uniformLocations;
147
-
148
- gl.uniformMatrix3fv(u_matrix, false, params.matrix);
149
- gl.uniform1f(u_sizeRatio, params.sizeRatio);
150
- gl.uniform1f(u_correctionRatio, params.correctionRatio);
151
- gl.uniform1f(u_minEdgeThickness, params.minEdgeThickness);
152
- gl.uniform1f(u_lengthToThicknessRatio, 2.5);
153
- gl.uniform1f(u_widenessToThicknessRatio, 2);
154
- }
155
- };
156
- }
@@ -1,75 +0,0 @@
1
- /* istanbul ignore file */
2
-
3
- // language=GLSL
4
- const SHADER_SOURCE = /* glsl */ `
5
- attribute vec2 a_position;
6
- attribute vec2 a_normal;
7
- attribute float a_radius;
8
- attribute vec3 a_barycentric;
9
- attribute float a_opacity;
10
-
11
- #ifdef PICKING_MODE
12
- attribute vec4 a_id;
13
- #else
14
- attribute vec4 a_color;
15
- #endif
16
-
17
- uniform mat3 u_matrix;
18
- uniform float u_sizeRatio;
19
- uniform float u_correctionRatio;
20
- uniform float u_minEdgeThickness;
21
- uniform float u_lengthToThicknessRatio;
22
- uniform float u_widenessToThicknessRatio;
23
-
24
- varying vec4 v_color;
25
- varying float v_opacity;
26
-
27
- const float bias = 255.0 / 254.0;
28
-
29
- void main() {
30
- float minThickness = u_minEdgeThickness;
31
-
32
- float normalLength = length(a_normal);
33
- vec2 unitNormal = a_normal / normalLength;
34
-
35
- // These first computations are taken from edge.vert.glsl and
36
- // edge.clamped.vert.glsl. Please read it to get better comments on what's
37
- // happening:
38
- float pixelsThickness = max(normalLength / u_sizeRatio, minThickness);
39
- float webGLThickness = pixelsThickness * u_correctionRatio;
40
- float webGLNodeRadius = a_radius * 2.0 * u_correctionRatio / u_sizeRatio;
41
- float webGLArrowHeadLength = webGLThickness * u_lengthToThicknessRatio * 2.0;
42
- float webGLArrowHeadThickness = webGLThickness * u_widenessToThicknessRatio;
43
-
44
- float da = a_barycentric.x;
45
- float db = a_barycentric.y;
46
- float dc = a_barycentric.z;
47
-
48
- vec2 delta = vec2(
49
- da * (webGLNodeRadius * unitNormal.y)
50
- + db * ((webGLNodeRadius + webGLArrowHeadLength) * unitNormal.y + webGLArrowHeadThickness * unitNormal.x)
51
- + dc * ((webGLNodeRadius + webGLArrowHeadLength) * unitNormal.y - webGLArrowHeadThickness * unitNormal.x),
52
-
53
- da * (-webGLNodeRadius * unitNormal.x)
54
- + db * (-(webGLNodeRadius + webGLArrowHeadLength) * unitNormal.x + webGLArrowHeadThickness * unitNormal.y)
55
- + dc * (-(webGLNodeRadius + webGLArrowHeadLength) * unitNormal.x - webGLArrowHeadThickness * unitNormal.y)
56
- );
57
-
58
- vec2 position = (u_matrix * vec3(a_position + delta, 1)).xy;
59
-
60
- gl_Position = vec4(position, 0, 1);
61
-
62
- #ifdef PICKING_MODE
63
- // For picking mode, we use the ID as the color:
64
- v_color = a_id;
65
- #else
66
- // For normal mode, we use the color:
67
- v_color = a_color;
68
- v_opacity = a_opacity;
69
- #endif
70
-
71
- v_color.a *= bias;
72
- }
73
- `;
74
-
75
- export default SHADER_SOURCE;
@@ -1,166 +0,0 @@
1
- import { type CreateEdgeCurveProgramOptions } from "@sigma/edge-curve";
2
- import { type Attributes } from "graphology-types";
3
- import { type EdgeLabelDrawingFunction } from "sigma/rendering";
4
- import { type Settings } from "sigma/settings";
5
-
6
- /* istanbul ignore file */
7
-
8
- interface Point {
9
- x: number;
10
- y: number;
11
- }
12
-
13
- function getCurvePoint(t: number, p0: Point, p1: Point, p2: Point): Point {
14
- const x = (1 - t) ** 2 * p0.x + 2 * (1 - t) * t * p1.x + t ** 2 * p2.x;
15
- const y = (1 - t) ** 2 * p0.y + 2 * (1 - t) * t * p1.y + t ** 2 * p2.y;
16
- return { x, y };
17
- }
18
-
19
- function getCurveLength(p0: Point, p1: Point, p2: Point): number {
20
- const steps = 20;
21
- let length = 0;
22
- let lastPoint = p0;
23
- for (let i = 0; i < steps; i++) {
24
- const point = getCurvePoint((i + 1) / steps, p0, p1, p2);
25
- length += Math.sqrt(
26
- (lastPoint.x - point.x) ** 2 + (lastPoint.y - point.y) ** 2,
27
- );
28
- lastPoint = point;
29
- }
30
-
31
- return length;
32
- }
33
-
34
- export function createDrawCurvedEdgeLabel<
35
- N extends Attributes = Attributes,
36
- E extends Attributes = Attributes,
37
- G extends Attributes = Attributes,
38
- >({
39
- curvatureAttribute,
40
- defaultCurvature,
41
- keepLabelUpright = true,
42
- }: CreateEdgeCurveProgramOptions & {
43
- keepLabelUpright?: boolean;
44
- }): EdgeLabelDrawingFunction<N, E, G> {
45
- return (
46
- context,
47
- edgeData,
48
- sourceData,
49
- targetData,
50
- settings: Settings<N, E, G>,
51
- ): void => {
52
- const size = settings.edgeLabelSize;
53
- const curvature = edgeData[curvatureAttribute] || defaultCurvature;
54
- const font = settings.edgeLabelFont;
55
- const weight = settings.edgeLabelWeight;
56
- let color = edgeData.color ?? settings.defaultEdgeColor;
57
-
58
- if (edgeData.selected) color = "#f00";
59
- if (edgeData.highlight) color = "#F54A4A";
60
-
61
- let label = edgeData.label;
62
-
63
- if (!label || edgeData.opacity < 1) return;
64
-
65
- context.font = `${weight} ${size}px ${font}`;
66
-
67
- // Computing positions without considering nodes sizes:
68
- const ltr = !keepLabelUpright || sourceData.x < targetData.x;
69
- let sourceX = ltr ? sourceData.x : targetData.x;
70
- let sourceY = ltr ? sourceData.y : targetData.y;
71
- let targetX = ltr ? targetData.x : sourceData.x;
72
- let targetY = ltr ? targetData.y : sourceData.y;
73
- const centerX = (sourceX + targetX) / 2;
74
- const centerY = (sourceY + targetY) / 2;
75
- const diffX = targetX - sourceX;
76
- const diffY = targetY - sourceY;
77
- const diff = Math.sqrt(diffX ** 2 + diffY ** 2);
78
- // Anchor point:
79
- const orientation = ltr ? 1 : -1;
80
- let anchorX = centerX + diffY * curvature * orientation;
81
- let anchorY = centerY - diffX * curvature * orientation;
82
-
83
- // Adapt curve points to edge thickness:
84
- const offset = edgeData.size * 0.7 + 5;
85
- const sourceOffsetVector = {
86
- x: anchorY - sourceY,
87
- y: -(anchorX - sourceX),
88
- };
89
- const sourceOffsetVectorLength = Math.sqrt(
90
- sourceOffsetVector.x ** 2 + sourceOffsetVector.y ** 2,
91
- );
92
- const targetOffsetVector = {
93
- x: targetY - anchorY,
94
- y: -(targetX - anchorX),
95
- };
96
- const targetOffsetVectorLength = Math.sqrt(
97
- targetOffsetVector.x ** 2 + targetOffsetVector.y ** 2,
98
- );
99
- sourceX += (offset * sourceOffsetVector.x) / sourceOffsetVectorLength;
100
- sourceY += (offset * sourceOffsetVector.y) / sourceOffsetVectorLength;
101
- targetX += (offset * targetOffsetVector.x) / targetOffsetVectorLength;
102
- targetY += (offset * targetOffsetVector.y) / targetOffsetVectorLength;
103
- // For anchor, the vector is simpler, so it is inlined:
104
- anchorX += (offset * diffY) / diff;
105
- anchorY -= (offset * diffX) / diff;
106
-
107
- // Compute curve length:
108
- const anchorPoint = { x: anchorX, y: anchorY };
109
- const sourcePoint = { x: sourceX, y: sourceY };
110
- const targetPoint = { x: targetX, y: targetY };
111
- const curveLength = getCurveLength(sourcePoint, anchorPoint, targetPoint);
112
-
113
- if (curveLength < sourceData.size + targetData.size) return;
114
-
115
- // Handling ellipsis
116
- let textLength = context.measureText(label).width;
117
- const availableTextLength = curveLength - sourceData.size - targetData.size;
118
- if (textLength > availableTextLength) {
119
- const ellipsis = "…";
120
- label = label + ellipsis;
121
- textLength = context.measureText(label).width;
122
-
123
- while (textLength > availableTextLength && label.length > 1) {
124
- label = label.slice(0, -2) + ellipsis;
125
- textLength = context.measureText(label).width;
126
- }
127
-
128
- if (label.length < 4) return;
129
- }
130
-
131
- // Measure each character:
132
- const charactersLengthCache: Record<string, number> = {};
133
- for (let i = 0, length = label.length; i < length; i++) {
134
- const character = label[i];
135
-
136
- if (!charactersLengthCache[character]) {
137
- charactersLengthCache[character] =
138
- context.measureText(character).width * (1 + curvature * 0.35);
139
- }
140
- }
141
-
142
- // Draw each character:
143
- let t = 0.5 - textLength / curveLength / 2;
144
- for (let i = 0, length = label.length; i < length; i++) {
145
- const character = label[i];
146
- const point = getCurvePoint(t, sourcePoint, anchorPoint, targetPoint);
147
-
148
- const tangentX =
149
- 2 * (1 - t) * (anchorX - sourceX) + 2 * t * (targetX - anchorX);
150
- const tangentY =
151
- 2 * (1 - t) * (anchorY - sourceY) + 2 * t * (targetY - anchorY);
152
- const angle = Math.atan2(tangentY, tangentX);
153
-
154
- context.save();
155
- context.translate(point.x, point.y);
156
- context.rotate(angle);
157
-
158
- context.fillStyle = color;
159
- context.fillText(character, 0, 0);
160
-
161
- context.restore();
162
-
163
- t += charactersLengthCache[character] / curveLength;
164
- }
165
- };
166
- }
@@ -1,86 +0,0 @@
1
- /* istanbul ignore file */
2
-
3
- // language=GLSL
4
- const SHADER = /* glsl */ `
5
- precision highp float;
6
-
7
- varying vec4 v_color;
8
- varying float v_opacity;
9
- varying float v_thickness;
10
- varying float v_feather;
11
- varying vec2 v_cpA;
12
- varying vec2 v_cpB;
13
- varying vec2 v_cpC;
14
- varying float v_sourceSize;
15
- varying vec2 v_sourcePoint;
16
- varying float v_targetSize;
17
- varying vec2 v_targetPoint;
18
-
19
- uniform float u_lengthToThicknessRatio;
20
- uniform float u_widenessToThicknessRatio;
21
-
22
- float det(vec2 a, vec2 b) {
23
- return a.x * b.y - b.x * a.y;
24
- }
25
-
26
- vec2 getDistanceVector(vec2 b0, vec2 b1, vec2 b2) {
27
- float a = det(b0, b2), b = 2.0 * det(b1, b0), d = 2.0 * det(b2, b1);
28
- float f = b * d - a * a;
29
- vec2 d21 = b2 - b1, d10 = b1 - b0, d20 = b2 - b0;
30
- vec2 gf = 2.0 * (b * d21 + d * d10 + a * d20);
31
- gf = vec2(gf.y, -gf.x);
32
- vec2 pp = -f * gf / dot(gf, gf);
33
- vec2 d0p = b0 - pp;
34
- float ap = det(d0p, d20), bp = 2.0 * det(d10, d0p);
35
- float t = clamp((ap + bp) / (2.0 * a + b + d), 0.0, 1.0);
36
- return mix(mix(b0, b1, t), mix(b1, b2, t), t);
37
- }
38
-
39
- float distToQuadraticBezierCurve(vec2 p, vec2 b0, vec2 b1, vec2 b2) {
40
- return length(getDistanceVector(b0 - p, b1 - p, b2 - p));
41
- }
42
-
43
- const float epsilon = 0.7;
44
- const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
45
-
46
- void main(void) {
47
- float dist = distToQuadraticBezierCurve(gl_FragCoord.xy, v_cpA, v_cpB, v_cpC);
48
- float thickness = v_thickness;
49
-
50
- if(v_sourceSize > 0.0) {
51
- float distToSource = length(gl_FragCoord.xy - v_sourcePoint);
52
- float sourceArrowLength = v_sourceSize + (thickness) * u_lengthToThicknessRatio;
53
- if (distToSource < sourceArrowLength) {
54
- thickness = (distToSource - v_sourceSize) / (sourceArrowLength - v_sourceSize) * u_widenessToThicknessRatio * thickness;
55
- }
56
- }
57
-
58
- if(v_targetSize > 0.0) {
59
- float distToTarget = length(gl_FragCoord.xy - v_targetPoint);
60
- float targetArrowLength = v_targetSize + (thickness) * u_lengthToThicknessRatio;
61
- if (distToTarget < targetArrowLength) {
62
- thickness = (distToTarget - v_targetSize) / (targetArrowLength - v_targetSize) * u_widenessToThicknessRatio * thickness;
63
- }
64
- }
65
-
66
- float halfThickness = thickness / 2.0;
67
- if (dist < halfThickness) {
68
- #ifdef PICKING_MODE
69
- gl_FragColor = v_color;
70
- #else
71
- float t = smoothstep(
72
- halfThickness - v_feather,
73
- halfThickness,
74
- dist
75
- );
76
-
77
- gl_FragColor = mix(v_color, transparent, t);
78
- gl_FragColor = mix(transparent, gl_FragColor, v_opacity);
79
- #endif
80
- } else {
81
- gl_FragColor = transparent;
82
- }
83
- }
84
- `;
85
-
86
- export default SHADER;
@@ -1,156 +0,0 @@
1
- import { DEFAULT_EDGE_CURVATURE } from "@sigma/edge-curve";
2
- import { type Attributes } from "graphology-types";
3
- import {
4
- createEdgeCompoundProgram,
5
- EdgeProgram,
6
- type ProgramInfo,
7
- } from "sigma/rendering";
8
- import {
9
- type EdgeDisplayData,
10
- type NodeDisplayData,
11
- type RenderParams,
12
- } from "sigma/types";
13
- import { floatColor } from "sigma/utils";
14
- import { type InternalEdgeAttributes } from "../../types";
15
- import { createDrawCurvedEdgeLabel } from "./drawLabel";
16
- import FRAGMENT_SHADER_SOURCE from "./frag.glsl";
17
- import VERTEX_SHADER_SOURCE from "./vert.glsl";
18
-
19
- /* istanbul ignore file */
20
-
21
- const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
22
-
23
- const UNIFORMS = [
24
- "u_matrix",
25
- "u_sizeRatio",
26
- "u_dimensions",
27
- "u_pixelRatio",
28
- "u_feather",
29
- "u_minEdgeThickness",
30
- "u_lengthToThicknessRatio",
31
- "u_widenessToThicknessRatio",
32
- ] as const;
33
-
34
- export class EdgeCurveProgramBase<
35
- N extends Attributes = Attributes,
36
- E extends Attributes = Attributes,
37
- G extends Attributes = Attributes,
38
- > extends EdgeProgram<(typeof UNIFORMS)[number], N, E, G> {
39
- getDefinition() {
40
- return {
41
- VERTICES: 6,
42
- VERTEX_SHADER_SOURCE,
43
- FRAGMENT_SHADER_SOURCE,
44
- METHOD: WebGLRenderingContext.TRIANGLES,
45
- UNIFORMS,
46
- ATTRIBUTES: [
47
- { name: "a_source", size: 2, type: FLOAT },
48
- { name: "a_target", size: 2, type: FLOAT },
49
- { name: "a_thickness", size: 1, type: FLOAT },
50
- { name: "a_curvature", size: 1, type: FLOAT },
51
- { name: "a_color", size: 4, type: UNSIGNED_BYTE, normalized: true },
52
- { name: "a_opacity", size: 1, type: FLOAT },
53
- { name: "a_id", size: 4, type: UNSIGNED_BYTE, normalized: true },
54
- { name: "a_sourceSize", size: 1, type: FLOAT },
55
- { name: "a_targetSize", size: 1, type: FLOAT },
56
- ],
57
- CONSTANT_ATTRIBUTES: [
58
- { name: "a_current", size: 1, type: FLOAT }, // TODO: could optimize to bool
59
- { name: "a_direction", size: 1, type: FLOAT }, // TODO: could optimize to byte
60
- ],
61
- CONSTANT_DATA: [
62
- [0, 1],
63
- [0, -1],
64
- [1, 1],
65
- [0, -1],
66
- [1, 1],
67
- [1, -1],
68
- ],
69
- };
70
- }
71
-
72
- processVisibleItem(
73
- edgeIndex: number,
74
- startIndex: number,
75
- sourceData: NodeDisplayData,
76
- targetData: NodeDisplayData,
77
- data: EdgeDisplayData & InternalEdgeAttributes,
78
- ) {
79
- let color = data.color ?? this.renderer.getSetting("defaultEdgeColor");
80
- if (data.selected) color = "#f00";
81
- if (data.highlight) color = "#F54A4A";
82
-
83
- const thickness =
84
- Math.min(data.size || 1, 0.5) *
85
- (data.selected ?? data.highlight ? 16 : 8);
86
- const x1 = sourceData.x;
87
- const y1 = sourceData.y;
88
- const x2 = targetData.x;
89
- const y2 = targetData.y;
90
- const curvature = data.curvature ?? DEFAULT_EDGE_CURVATURE;
91
-
92
- const sourceRadius = sourceData.size || 1;
93
- const targetRadius = targetData.size || 1;
94
-
95
- const array = this.array;
96
-
97
- // First point
98
- array[startIndex++] = x1;
99
- array[startIndex++] = y1;
100
- array[startIndex++] = x2;
101
- array[startIndex++] = y2;
102
- array[startIndex++] = thickness;
103
- array[startIndex++] = curvature;
104
- array[startIndex++] = floatColor(color);
105
- array[startIndex++] = data.opacity ?? 1;
106
- array[startIndex++] = edgeIndex;
107
- array[startIndex++] = ["both", "source"].includes(data.arrow ?? "")
108
- ? sourceRadius
109
- : 0;
110
- array[startIndex++] = ["both", "target"].includes(data.arrow ?? "")
111
- ? targetRadius
112
- : 0;
113
- }
114
-
115
- setUniforms(
116
- params: RenderParams,
117
- { gl, uniformLocations }: ProgramInfo,
118
- ): void {
119
- const {
120
- u_matrix,
121
- u_pixelRatio,
122
- u_feather,
123
- u_sizeRatio,
124
- u_dimensions,
125
- u_minEdgeThickness,
126
- u_lengthToThicknessRatio,
127
- u_widenessToThicknessRatio,
128
- } = uniformLocations;
129
-
130
- gl.uniformMatrix3fv(u_matrix, false, params.matrix);
131
- gl.uniform1f(u_pixelRatio, params.pixelRatio);
132
- gl.uniform1f(u_sizeRatio, params.sizeRatio);
133
- gl.uniform1f(u_feather, params.antiAliasingFeather);
134
- gl.uniform2f(
135
- u_dimensions,
136
- params.width * params.pixelRatio,
137
- params.height * params.pixelRatio,
138
- );
139
- gl.uniform1f(u_minEdgeThickness, params.minEdgeThickness);
140
- gl.uniform1f(u_lengthToThicknessRatio, 2.5);
141
- gl.uniform1f(u_widenessToThicknessRatio, 2);
142
- }
143
- }
144
-
145
- export const EdgeCurveProgram = createEdgeCompoundProgram(
146
- [
147
- EdgeCurveProgramBase,
148
- // createEdgeArrowHeadProgram({ extremity: "source" }),
149
- // createEdgeArrowHeadProgram({ extremity: "target" }),
150
- ],
151
- createDrawCurvedEdgeLabel({
152
- curvatureAttribute: "curvature",
153
- defaultCurvature: DEFAULT_EDGE_CURVATURE,
154
- arrowHead: null,
155
- }) as any,
156
- );