@react-fabric/graph 1.0.0-beta.58

package/dist/cjs/packages/graph/src/programs/edge-curve/index.js

@@ -0,0 +1,157 @@
+'use strict';
+
+var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
+var _createClass = require('@babel/runtime/helpers/createClass');
+var _possibleConstructorReturn = require('@babel/runtime/helpers/possibleConstructorReturn');
+var _getPrototypeOf = require('@babel/runtime/helpers/getPrototypeOf');
+var _inherits = require('@babel/runtime/helpers/inherits');
+var edgeCurve = require('@sigma/edge-curve');
+var rendering = require('sigma/rendering');
+var utils = require('sigma/utils');
+var drawLabel = require('./drawLabel.js');
+var frag_glsl = require('./frag.glsl.js');
+var vert_glsl = require('./vert.glsl.js');
+
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+
+/* istanbul ignore file */
+
+var _WebGLRenderingContex = WebGLRenderingContext,
+  UNSIGNED_BYTE = _WebGLRenderingContex.UNSIGNED_BYTE,
+  FLOAT = _WebGLRenderingContex.FLOAT;
+var UNIFORMS = ["u_matrix", "u_sizeRatio", "u_dimensions", "u_pixelRatio", "u_feather", "u_minEdgeThickness", "u_lengthToThicknessRatio", "u_widenessToThicknessRatio"];
+var EdgeCurveProgramBase = /*#__PURE__*/function (_EdgeProgram) {
+  function EdgeCurveProgramBase() {
+    _classCallCheck(this, EdgeCurveProgramBase);
+    return _callSuper(this, EdgeCurveProgramBase, arguments);
+  }
+  _inherits(EdgeCurveProgramBase, _EdgeProgram);
+  return _createClass(EdgeCurveProgramBase, [{
+    key: "getDefinition",
+    value: function getDefinition() {
+      return {
+        VERTICES: 6,
+        VERTEX_SHADER_SOURCE: vert_glsl,
+        FRAGMENT_SHADER_SOURCE: frag_glsl,
+        METHOD: WebGLRenderingContext.TRIANGLES,
+        UNIFORMS: UNIFORMS,
+        ATTRIBUTES: [{
+          name: "a_source",
+          size: 2,
+          type: FLOAT
+        }, {
+          name: "a_target",
+          size: 2,
+          type: FLOAT
+        }, {
+          name: "a_thickness",
+          size: 1,
+          type: FLOAT
+        }, {
+          name: "a_curvature",
+          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
+        }, {
+          name: "a_sourceSize",
+          size: 1,
+          type: FLOAT
+        }, {
+          name: "a_targetSize",
+          size: 1,
+          type: FLOAT
+        }],
+        CONSTANT_ATTRIBUTES: [{
+          name: "a_current",
+          size: 1,
+          type: FLOAT
+        },
+        // TODO: could optimize to bool
+        {
+          name: "a_direction",
+          size: 1,
+          type: FLOAT
+        } // TODO: could optimize to byte
+        ],
+        CONSTANT_DATA: [[0, 1], [0, -1], [1, 1], [0, -1], [1, 1], [1, -1]]
+      };
+    }
+  }, {
+    key: "processVisibleItem",
+    value: function processVisibleItem(edgeIndex, startIndex, sourceData, targetData, data) {
+      var _data$color, _data$curvature, _data$opacity, _data$arrow, _data$arrow2;
+      var color = (_data$color = data.color) !== null && _data$color !== void 0 ? _data$color : this.renderer.getSetting("defaultEdgeColor");
+      if (data.selected) color = "#f00";
+      if (data.highlight) color = "#F54A4A";
+      var thickness = Math.min(data.size || 1, 0.5) * (data.selected || data.highlight ? 16 : 8);
+      var x1 = sourceData.x;
+      var y1 = sourceData.y;
+      var x2 = targetData.x;
+      var y2 = targetData.y;
+      var curvature = (_data$curvature = data.curvature) !== null && _data$curvature !== void 0 ? _data$curvature : edgeCurve.DEFAULT_EDGE_CURVATURE;
+      var sourceRadius = sourceData.size || 1;
+      var targetRadius = targetData.size || 1;
+      var array = this.array;
+
+      // First point
+      array[startIndex++] = x1;
+      array[startIndex++] = y1;
+      array[startIndex++] = x2;
+      array[startIndex++] = y2;
+      array[startIndex++] = thickness;
+      array[startIndex++] = curvature;
+      array[startIndex++] = utils.floatColor(color);
+      array[startIndex++] = (_data$opacity = data.opacity) !== null && _data$opacity !== void 0 ? _data$opacity : 1;
+      array[startIndex++] = edgeIndex;
+      array[startIndex++] = ["both", "source"].includes((_data$arrow = data.arrow) !== null && _data$arrow !== void 0 ? _data$arrow : "") ? sourceRadius : 0;
+      array[startIndex++] = ["both", "target"].includes((_data$arrow2 = data.arrow) !== null && _data$arrow2 !== void 0 ? _data$arrow2 : "") ? targetRadius : 0;
+    }
+  }, {
+    key: "setUniforms",
+    value: function setUniforms(params, _ref) {
+      var gl = _ref.gl,
+        uniformLocations = _ref.uniformLocations;
+      var u_matrix = uniformLocations.u_matrix,
+        u_pixelRatio = uniformLocations.u_pixelRatio,
+        u_feather = uniformLocations.u_feather,
+        u_sizeRatio = uniformLocations.u_sizeRatio,
+        u_dimensions = uniformLocations.u_dimensions,
+        u_minEdgeThickness = uniformLocations.u_minEdgeThickness,
+        u_lengthToThicknessRatio = uniformLocations.u_lengthToThicknessRatio,
+        u_widenessToThicknessRatio = uniformLocations.u_widenessToThicknessRatio;
+      gl.uniformMatrix3fv(u_matrix, false, params.matrix);
+      gl.uniform1f(u_pixelRatio, params.pixelRatio);
+      gl.uniform1f(u_sizeRatio, params.sizeRatio);
+      gl.uniform1f(u_feather, params.antiAliasingFeather);
+      gl.uniform2f(u_dimensions, params.width * params.pixelRatio, params.height * params.pixelRatio);
+      gl.uniform1f(u_minEdgeThickness, params.minEdgeThickness);
+      gl.uniform1f(u_lengthToThicknessRatio, 2.5);
+      gl.uniform1f(u_widenessToThicknessRatio, 2);
+    }
+  }]);
+}(rendering.EdgeProgram);
+var EdgeCurveProgram = rendering.createEdgeCompoundProgram([EdgeCurveProgramBase
+// createEdgeArrowHeadProgram({ extremity: "source" }),
+// createEdgeArrowHeadProgram({ extremity: "target" }),
+], drawLabel.createDrawCurvedEdgeLabel({
+  curvatureAttribute: "curvature",
+  defaultCurvature: edgeCurve.DEFAULT_EDGE_CURVATURE,
+  arrowHead: null
+}));
+
+exports.EdgeCurveProgram = EdgeCurveProgram;
+exports.EdgeCurveProgramBase = EdgeCurveProgramBase;

package/dist/cjs/packages/graph/src/programs/edge-curve/vert.glsl.js

@@ -0,0 +1,8 @@
+'use strict';
+
+/* istanbul ignore file */
+
+// language=GLSL
+var SHADER = /* glsl */"\nattribute vec4 a_id;\nattribute vec4 a_color;\nattribute float a_direction;\nattribute float a_thickness;\nattribute float a_opacity;\nattribute vec2 a_source;\nattribute vec2 a_target;\nattribute float a_current;\nattribute float a_curvature;\nattribute float a_sourceSize;\nattribute float a_targetSize;\n\nuniform mat3 u_matrix;\nuniform float u_sizeRatio;\nuniform float u_pixelRatio;\nuniform vec2 u_dimensions;\nuniform float u_minEdgeThickness;\nuniform float u_feather;\nuniform float u_widenessToThicknessRatio;\n\nvarying vec4 v_color;\nvarying float v_opacity;\nvarying float v_thickness;\nvarying float v_feather;\nvarying vec2 v_cpA;\nvarying vec2 v_cpB;\nvarying vec2 v_cpC;\nvarying float v_sourceSize;\nvarying vec2 v_sourcePoint;\nvarying float v_targetSize;\nvarying vec2 v_targetPoint;\n\nconst float bias = 255.0 / 254.0;\nconst float epsilon = 0.7;\n\nvec2 clipspaceToViewport(vec2 pos, vec2 dimensions) {\n  return vec2(\n    (pos.x + 1.0) * dimensions.x / 2.0,\n    (pos.y + 1.0) * dimensions.y / 2.0\n  );\n}\n\nvec2 viewportToClipspace(vec2 pos, vec2 dimensions) {\n  return vec2(\n    pos.x / dimensions.x * 2.0 - 1.0,\n    pos.y / dimensions.y * 2.0 - 1.0\n  );\n}\n\nvoid main() {\n  float minThickness = u_minEdgeThickness;\n  // Selecting the correct position\n  // Branchless \"position = a_source if a_current == 1.0 else a_target\"\n  vec2 position = a_source * max(0.0, a_current) + a_target * max(0.0, 1.0 - a_current);\n  position = (u_matrix * vec3(position, 1)).xy;\n\n  vec2 source = (u_matrix * vec3(a_source, 1)).xy;\n  vec2 target = (u_matrix * vec3(a_target, 1)).xy;\n\n  vec2 viewportPosition = clipspaceToViewport(position, u_dimensions);\n  vec2 viewportSource = clipspaceToViewport(source, u_dimensions);\n  vec2 viewportTarget = clipspaceToViewport(target, u_dimensions);\n\n  vec2 delta = viewportTarget.xy - viewportSource.xy;\n  float len = length(delta);\n  vec2 normal = vec2(-delta.y, delta.x) * a_direction;\n  vec2 unitNormal = normal / len;\n  float boundingBoxThickness = len * a_curvature;\n  float curveThickness = max(minThickness, a_thickness / 2.0 / u_sizeRatio * u_pixelRatio);\n\n  v_thickness = curveThickness;\n  v_feather = u_feather;\n\n  v_cpA = viewportSource;\n  v_cpB = 0.5 * (viewportSource + viewportTarget) + unitNormal * a_direction * boundingBoxThickness;\n  v_cpC = viewportTarget;\n\n  vec2 viewportOffsetPosition = (\n    viewportPosition +\n    unitNormal * (boundingBoxThickness / 2.0 + sign(boundingBoxThickness) * (curveThickness + epsilon)) *\n    max(0.0, a_direction) // NOTE: cutting the bounding box in half to avoid overdraw\n  );\n\n  position = viewportToClipspace(viewportOffsetPosition, u_dimensions);\n  gl_Position = vec4(position, 0, 1);\n\n  v_sourceSize = a_sourceSize * u_pixelRatio / u_sizeRatio;\n  v_sourcePoint = viewportSource;\n  \n  v_targetSize = a_targetSize * u_pixelRatio / u_sizeRatio;\n  v_targetPoint = viewportTarget;\n    \n  #ifdef PICKING_MODE\n  // For picking mode, we use the ID as the color:\n  v_color = a_id;\n  #else\n  // For normal mode, we use the color:\n  v_color = a_color;\n  v_opacity = a_opacity;\n  #endif\n\n  v_color.a *= bias;\n}\n";
+
+module.exports = SHADER;

package/dist/cjs/packages/graph/src/programs/edge-line/drawLabel.js

@@ -0,0 +1,70 @@
+'use strict';
+
+/* istanbul ignore file */
+
+function drawLineLabel(context, edgeData, sourceData, targetData, settings) {
+  var _edgeData$color;
+  var size = settings.edgeLabelSize;
+  var font = settings.edgeLabelFont;
+  var weight = settings.edgeLabelWeight;
+  var color = (_edgeData$color = edgeData.color) !== null && _edgeData$color !== void 0 ? _edgeData$color : settings.defaultEdgeColor;
+  if (edgeData.selected) color = "#f00";
+  if (edgeData.highlight) color = "#F54A4A";
+  var label = edgeData.label;
+  if (!label || edgeData.opacity < 1) return;
+  context.font = "".concat(weight, " ").concat(size, "px ").concat(font);
+
+  // Computing positions without considering nodes sizes:
+  var sSize = sourceData.size;
+  var tSize = targetData.size;
+  var sx = sourceData.x;
+  var sy = sourceData.y;
+  var tx = targetData.x;
+  var ty = targetData.y;
+  var cx = (sx + tx) / 2;
+  var cy = (sy + ty) / 2;
+  var dx = tx - sx;
+  var dy = ty - sy;
+  var 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
+  var textLength = context.measureText(label).width;
+  if (textLength > d) {
+    var 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;
+  }
+  var 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();
+}
+
+exports.drawLineLabel = drawLineLabel;

package/dist/cjs/packages/graph/src/programs/edge-line/frag.glsl.js

@@ -0,0 +1,8 @@
+'use strict';
+
+/* istanbul ignore file */
+
+// language=GLSL
+var SHADER_SOURCE = /* glsl */"\nprecision mediump float;\n\nvarying vec4 v_color;\nvarying vec2 v_normal;\nvarying float v_opacity;\nvarying float v_thickness;\nvarying float v_feather;\n\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);\n\nvoid main(void) {\n  // We only handle antialiasing for normal mode:\n  #ifdef PICKING_MODE\n  gl_FragColor = v_color;\n  #else\n  float dist = length(v_normal) * v_thickness;\n\n  float t = smoothstep(\n    v_thickness - v_feather,\n    v_thickness,\n    dist\n  );\n\n  gl_FragColor = mix(v_color, transparent, t);\n  gl_FragColor = mix(transparent, gl_FragColor, v_opacity);\n  #endif\n}\n";
+
+module.exports = SHADER_SOURCE;

package/dist/cjs/packages/graph/src/programs/edge-line/index.js

@@ -0,0 +1,166 @@
+'use strict';
+
+var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
+var _createClass = require('@babel/runtime/helpers/createClass');
+var _possibleConstructorReturn = require('@babel/runtime/helpers/possibleConstructorReturn');
+var _getPrototypeOf = require('@babel/runtime/helpers/getPrototypeOf');
+var _inherits = require('@babel/runtime/helpers/inherits');
+var rendering = require('sigma/rendering');
+var utils = require('sigma/utils');
+var index = require('../arrow-head/index.js');
+var drawLabel = require('./drawLabel.js');
+var frag_glsl = require('./frag.glsl.js');
+var vert_glsl = require('./vert.glsl.js');
+
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+
+/* istanbul ignore file */
+
+var _WebGLRenderingContex = WebGLRenderingContext,
+  UNSIGNED_BYTE = _WebGLRenderingContex.UNSIGNED_BYTE,
+  FLOAT = _WebGLRenderingContex.FLOAT;
+var UNIFORMS = ["u_matrix", "u_zoomRatio", "u_sizeRatio", "u_correctionRatio", "u_pixelRatio", "u_feather", "u_minEdgeThickness", "u_lengthToThicknessRatio"];
+var EdgeLineProgramBase = /*#__PURE__*/function (_EdgeProgram) {
+  function EdgeLineProgramBase() {
+    _classCallCheck(this, EdgeLineProgramBase);
+    return _callSuper(this, EdgeLineProgramBase, arguments);
+  }
+  _inherits(EdgeLineProgramBase, _EdgeProgram);
+  return _createClass(EdgeLineProgramBase, [{
+    key: "getDefinition",
+    value: function getDefinition() {
+      return {
+        VERTICES: 6,
+        VERTEX_SHADER_SOURCE: vert_glsl,
+        FRAGMENT_SHADER_SOURCE: frag_glsl,
+        METHOD: WebGLRenderingContext.TRIANGLES,
+        UNIFORMS: 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]]
+      };
+    }
+  }, {
+    key: "processVisibleItem",
+    value: function processVisibleItem(edgeIndex, startIndex, sourceData, targetData, data) {
+      var _data$color, _data$opacity, _data$arrow, _data$arrow2;
+      var color = (_data$color = data.color) !== null && _data$color !== void 0 ? _data$color : this.renderer.getSetting("defaultEdgeColor");
+      if (data.selected) color = "#f00";
+      if (data.highlight) color = "#F54A4A";
+      var thickness = Math.min(data.size || 1, 0.5) * (data.selected || data.highlight ? 8 : 4);
+      var x1 = sourceData.x;
+      var y1 = sourceData.y;
+      var x2 = targetData.x;
+      var y2 = targetData.y;
+
+      // Computing normals
+      var dx = x2 - x1;
+      var dy = y2 - y1;
+      var sourceRadius = sourceData.size || 1;
+      var targetRadius = targetData.size || 1;
+      var len = dx * dx + dy * dy;
+      var n1 = 0;
+      var n2 = 0;
+      if (len) {
+        len = 1 / Math.sqrt(len);
+        n1 = -dy * len * thickness;
+        n2 = dx * len * thickness;
+      }
+      var array = this.array;
+      array[startIndex++] = x1;
+      array[startIndex++] = y1;
+      array[startIndex++] = x2;
+      array[startIndex++] = y2;
+      array[startIndex++] = n1;
+      array[startIndex++] = n2;
+      array[startIndex++] = utils.floatColor(color);
+      array[startIndex++] = (_data$opacity = data.opacity) !== null && _data$opacity !== void 0 ? _data$opacity : 1;
+      array[startIndex++] = edgeIndex;
+      array[startIndex++] = ["both", "source"].includes((_data$arrow = data.arrow) !== null && _data$arrow !== void 0 ? _data$arrow : "") ? sourceRadius : 0;
+      array[startIndex++] = ["both", "target"].includes((_data$arrow2 = data.arrow) !== null && _data$arrow2 !== void 0 ? _data$arrow2 : "") ? targetRadius : 0;
+    }
+  }, {
+    key: "setUniforms",
+    value: function setUniforms(params, _ref) {
+      var gl = _ref.gl,
+        uniformLocations = _ref.uniformLocations;
+      var u_matrix = uniformLocations.u_matrix,
+        u_zoomRatio = uniformLocations.u_zoomRatio,
+        u_feather = uniformLocations.u_feather,
+        u_pixelRatio = uniformLocations.u_pixelRatio,
+        u_correctionRatio = uniformLocations.u_correctionRatio,
+        u_sizeRatio = uniformLocations.u_sizeRatio,
+        u_minEdgeThickness = uniformLocations.u_minEdgeThickness,
+        u_lengthToThicknessRatio = uniformLocations.u_lengthToThicknessRatio;
+      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);
+    }
+  }]);
+}(rendering.EdgeProgram);
+var EdgeLineProgram = rendering.createEdgeCompoundProgram([EdgeLineProgramBase, index.createEdgeArrowHeadProgram({
+  extremity: "source"
+}), index.createEdgeArrowHeadProgram({
+  extremity: "target"
+})], drawLabel.drawLineLabel);
+
+exports.EdgeLineProgram = EdgeLineProgram;

package/dist/cjs/packages/graph/src/programs/edge-line/vert.glsl.js

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