@react-fabric/graph 1.0.0-beta.58

package/dist/esm/packages/graph/src/programs/node-circle/base/index.js

@@ -0,0 +1,136 @@
+'use client';
+
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
+import _createClass from '@babel/runtime/helpers/createClass';
+import _possibleConstructorReturn from '@babel/runtime/helpers/possibleConstructorReturn';
+import _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';
+import _inherits from '@babel/runtime/helpers/inherits';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { NodeProgram } from 'sigma/rendering';
+import { floatColor } from 'sigma/utils';
+import SHADER_SOURCE$1 from './frag.glsl.js';
+import SHADER_SOURCE from './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_sizeRatio", "u_correctionRatio", "u_matrix"];
+var NodeCircleBase = /*#__PURE__*/function (_NodeProgram) {
+  function NodeCircleBase() {
+    _classCallCheck(this, NodeCircleBase);
+    return _callSuper(this, NodeCircleBase, arguments);
+  }
+  _inherits(NodeCircleBase, _NodeProgram);
+  return _createClass(NodeCircleBase, [{
+    key: "getDefinition",
+    value: function getDefinition() {
+      return {
+        VERTICES: 3,
+        VERTEX_SHADER_SOURCE: SHADER_SOURCE,
+        FRAGMENT_SHADER_SOURCE: SHADER_SOURCE$1,
+        METHOD: WebGLRenderingContext.TRIANGLES,
+        UNIFORMS: 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
+        }].concat(_toConsumableArray(Array(7).fill(0).map(function (_, idx) {
+          return {
+            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]]
+      };
+    }
+  }, {
+    key: "processVisibleItem",
+    value: function processVisibleItem(nodeIndex, startIndex, data) {
+      var _data$color, _data$borderColor, _data$border, _data$opacity, _data$pie$length, _data$pie;
+      var array = this.array;
+      var base = floatColor(this.renderer.getSetting("defaultNodeColor"));
+      var color = floatColor((_data$color = data.color) !== null && _data$color !== void 0 ? _data$color : this.renderer.getSetting("defaultNodeColor"));
+      var stroke = floatColor((_data$borderColor = data.borderColor) !== null && _data$borderColor !== void 0 ? _data$borderColor : this.renderer.getSetting("defaultEdgeColor"));
+      array[startIndex++] = data.x;
+      array[startIndex++] = data.y;
+      array[startIndex++] = data.size;
+      array[startIndex++] = Math.min((_data$border = data.border) !== null && _data$border !== void 0 ? _data$border : 0, 4);
+      array[startIndex++] = (_data$opacity = data.opacity) !== null && _data$opacity !== void 0 ? _data$opacity : 1;
+      array[startIndex++] = base;
+      array[startIndex++] = color;
+      array[startIndex++] = stroke;
+      array[startIndex++] = Math.min(7, (_data$pie$length = (_data$pie = data.pie) === null || _data$pie === void 0 ? void 0 : _data$pie.length) !== null && _data$pie$length !== void 0 ? _data$pie$length : 0);
+      Array(7).fill(0).forEach(function (_, idx) {
+        var _data$pie$idx, _data$pie2;
+        array[startIndex++] = floatColor((_data$pie$idx = (_data$pie2 = data.pie) === null || _data$pie2 === void 0 ? void 0 : _data$pie2[idx]) !== null && _data$pie$idx !== void 0 ? _data$pie$idx : "#0000");
+      });
+      array[startIndex++] = nodeIndex;
+    }
+  }, {
+    key: "setUniforms",
+    value: function setUniforms(params, _ref) {
+      var gl = _ref.gl,
+        uniformLocations = _ref.uniformLocations;
+      var u_sizeRatio = uniformLocations.u_sizeRatio,
+        u_correctionRatio = uniformLocations.u_correctionRatio,
+        u_matrix = uniformLocations.u_matrix;
+      gl.uniform1f(u_correctionRatio, params.correctionRatio);
+      gl.uniform1f(u_sizeRatio, params.sizeRatio);
+      gl.uniformMatrix3fv(u_matrix, false, params.matrix);
+    }
+  }]);
+}(NodeProgram);
+_defineProperty(NodeCircleBase, "ANGLE_1", 0);
+_defineProperty(NodeCircleBase, "ANGLE_2", 2 * Math.PI / 3);
+_defineProperty(NodeCircleBase, "ANGLE_3", 4 * Math.PI / 3);
+
+export { NodeCircleBase };

package/dist/esm/packages/graph/src/programs/node-circle/base/vert.glsl.js

@@ -0,0 +1,8 @@
+'use client';
+
+/* istanbul ignore file */
+
+// language=GLSL
+var SHADER_SOURCE = /* glsl */"\nattribute vec4 a_id;\nattribute vec4 a_base;\nattribute vec4 a_color;\nattribute vec4 a_stroke;\nattribute vec2 a_position;\nattribute float a_size;\nattribute float a_border;\nattribute float a_angle;\nattribute float a_opacity;\nattribute float a_segments;\nattribute vec4 a_colors_0;\nattribute vec4 a_colors_1;\nattribute vec4 a_colors_2;\nattribute vec4 a_colors_3;\nattribute vec4 a_colors_4;\nattribute vec4 a_colors_5;\nattribute vec4 a_colors_6;\n\nuniform mat3 u_matrix;\nuniform float u_sizeRatio;\nuniform float u_correctionRatio;\n\nvarying vec4 v_color;\nvarying vec4 v_stroke;\nvarying vec2 v_diffVector;\nvarying float v_radius;\nvarying float v_border;\nvarying float v_segmentAngle;\nvarying vec4 v_colors_0;\nvarying vec4 v_colors_1;\nvarying vec4 v_colors_2;\nvarying vec4 v_colors_3;\nvarying vec4 v_colors_4;\nvarying vec4 v_colors_5;\nvarying vec4 v_colors_6;\n\nconst float bias = 255.0 / 254.0;\n\nvoid main() {\n  float size = a_size * u_correctionRatio / u_sizeRatio * 4.0;\n  vec2 diffVector = size * vec2(cos(a_angle), sin(a_angle));\n  vec2 position = a_position + diffVector;\n  gl_Position = vec4(\n    (u_matrix * vec3(position, 1)).xy,\n    0,\n    1\n  );\n\n  v_diffVector = diffVector;\n  v_radius = size / 2.0;\n  v_border = (a_border + 8.0) * u_correctionRatio / u_sizeRatio * 4.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 = mix(a_base, a_color, a_opacity * bias);\n    v_stroke = mix(a_base, a_stroke, a_opacity * bias);\n\n    // pie colors\n    v_segmentAngle = 0.0;\n    if(a_segments > 0.0) {\n      v_segmentAngle = ".concat(Math.PI * 2, " / a_segments;\n      v_colors_0 = mix(a_base, a_colors_0, a_opacity * bias);\n      v_colors_1 = mix(a_base, a_colors_1, a_opacity * bias);\n      v_colors_2 = mix(a_base, a_colors_2, a_opacity * bias);\n      v_colors_3 = mix(a_base, a_colors_3, a_opacity * bias);\n      v_colors_4 = mix(a_base, a_colors_4, a_opacity * bias);\n      v_colors_5 = mix(a_base, a_colors_5, a_opacity * bias);\n      v_colors_6 = mix(a_base, a_colors_6, a_opacity * bias);\n    }\n  #endif\n\n  v_color.a *= bias;\n}\n");
+
+export { SHADER_SOURCE as default };

package/dist/esm/packages/graph/src/programs/node-circle/index.js

@@ -0,0 +1,15 @@
+'use client';
+
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { createNodeCompoundProgram } from 'sigma/rendering';
+import { NodeBadgeProgram } from '../node-badge/index.js';
+import { NodeImageProgram } from '../node-image/index.js';
+import { NodeCircleBase } from './base/index.js';
+import { drawNodeHover } from './base/drawHover.js';
+import { drawNodeLabel } from './base/drawLabel.js';
+
+/* istanbul ignore file */
+
+var NodeCircleProgram = createNodeCompoundProgram([NodeCircleBase, NodeImageProgram(true)].concat(_toConsumableArray(NodeBadgeProgram(true))), drawNodeLabel, drawNodeHover);
+
+export { NodeCircleProgram };

package/dist/esm/packages/graph/src/programs/node-image/factory.js

@@ -0,0 +1,223 @@
+'use client';
+
+import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
+import _createClass from '@babel/runtime/helpers/createClass';
+import _possibleConstructorReturn from '@babel/runtime/helpers/possibleConstructorReturn';
+import _get from '@babel/runtime/helpers/get';
+import _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';
+import _inherits from '@babel/runtime/helpers/inherits';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { isSvgPath } from '@react-fabric/utilities';
+import { NodeProgram } from 'sigma/rendering';
+import { floatColor } from 'sigma/utils';
+import SHADER_SOURCE from './frag.glsl.js';
+import { DEFAULT_TEXTURE_MANAGER_OPTIONS, TextureManager } from './texture.js';
+import VERTEX_SHADER_SOURCE from './vert.glsl.js';
+
+var _excluded = ["drawHover", "drawLabel", "drawingMode", "keepWithinCircle", "padding", "colorAttribute"];
+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; })(); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+
+/* istanbul ignore file */
+
+var _WebGLRenderingContex = WebGLRenderingContext,
+  UNSIGNED_BYTE = _WebGLRenderingContex.UNSIGNED_BYTE,
+  FLOAT = _WebGLRenderingContex.FLOAT;
+var DEFAULT_CREATE_NODE_IMAGE_OPTIONS = _objectSpread(_objectSpread({}, DEFAULT_TEXTURE_MANAGER_OPTIONS), {}, {
+  drawingMode: "background",
+  keepWithinCircle: true,
+  drawLabel: undefined,
+  drawHover: undefined,
+  padding: 0,
+  colorAttribute: "color"
+});
+var UNIFORMS = ["u_sizeRatio", "u_correctionRatio", "u_cameraAngle", "u_percentagePadding", "u_matrix", "u_colorizeImages", "u_keepWithinCircle", "u_atlas"];
+
+/**
+ * To share the texture between the program instances of the graph and the
+ * hovered nodes (to prevent some flickering, mostly), this program must be
+ * "built" for each sigma instance:
+ */
+function getNodeImageProgram(options) {
+  var _NodeImageProgram;
+  var _DEFAULT_CREATE_NODE_ = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_CREATE_NODE_IMAGE_OPTIONS), options !== null && options !== void 0 ? options : {}), {}, {
+      drawLabel: undefined,
+      drawHover: undefined
+    }),
+    drawHover = _DEFAULT_CREATE_NODE_.drawHover,
+    drawLabel = _DEFAULT_CREATE_NODE_.drawLabel;
+    _DEFAULT_CREATE_NODE_.drawingMode;
+    var keepWithinCircle = _DEFAULT_CREATE_NODE_.keepWithinCircle,
+    padding = _DEFAULT_CREATE_NODE_.padding;
+    _DEFAULT_CREATE_NODE_.colorAttribute;
+    var textureManagerOptions = _objectWithoutProperties(_DEFAULT_CREATE_NODE_, _excluded);
+
+  /**
+   * This texture manager is shared between all instances of this exact class,
+   * returned by this call to getNodeProgramImage. This means that remounting
+   * the sigma instance will not reload the images and regenerate the texture.
+   */
+  var textureManager = new TextureManager(textureManagerOptions);
+  return _NodeImageProgram = /*#__PURE__*/function (_NodeProgram) {
+    function NodeImageProgram(gl, pickingBuffer, renderer) {
+      var _this;
+      _classCallCheck(this, NodeImageProgram);
+      _this = _callSuper(this, NodeImageProgram, [gl, pickingBuffer, renderer]);
+      _this.textureManagerCallback = function () {
+        if (!_this) return;
+        if (_this.bindTexture) {
+          _this.atlas = textureManager.getAtlas();
+          _this.textureImage = textureManager.getTexture();
+          _this.bindTexture();
+          if (_this.latestRenderParams) _this.render(_this.latestRenderParams);
+        }
+        if (renderer !== null && renderer !== void 0 && renderer.refresh) renderer.refresh();
+      };
+      textureManager.on(TextureManager.NEW_TEXTURE_EVENT, _this.textureManagerCallback);
+      _this.atlas = textureManager.getAtlas();
+      _this.textureImage = textureManager.getTexture();
+      _this.texture = gl.createTexture();
+      _this.bindTexture();
+      return _this;
+    }
+    _inherits(NodeImageProgram, _NodeProgram);
+    return _createClass(NodeImageProgram, [{
+      key: "getDefinition",
+      value: function getDefinition() {
+        return {
+          VERTICES: 4,
+          VERTEX_SHADER_SOURCE: VERTEX_SHADER_SOURCE,
+          FRAGMENT_SHADER_SOURCE: SHADER_SOURCE,
+          METHOD: WebGLRenderingContext.TRIANGLE_FAN,
+          UNIFORMS: UNIFORMS,
+          ATTRIBUTES: [{
+            name: "a_position",
+            size: 2,
+            type: FLOAT
+          }, {
+            name: "a_size",
+            size: 1,
+            type: FLOAT
+          }, {
+            name: "a_opacity",
+            size: 1,
+            type: FLOAT
+          }, {
+            name: "a_colorMode",
+            size: 1,
+            type: FLOAT
+          }, {
+            name: "a_fill",
+            size: 4,
+            type: UNSIGNED_BYTE,
+            normalized: true
+          }, {
+            name: "a_color",
+            size: 4,
+            type: UNSIGNED_BYTE,
+            normalized: true
+          }, {
+            name: "a_id",
+            size: 4,
+            type: UNSIGNED_BYTE,
+            normalized: true
+          }, {
+            name: "a_texture",
+            size: 4,
+            type: FLOAT
+          }],
+          CONSTANT_ATTRIBUTES: [{
+            name: "a_angle",
+            size: 1,
+            type: FLOAT
+          }],
+          CONSTANT_DATA: [[NodeImageProgram.ANGLE_1], [NodeImageProgram.ANGLE_2], [NodeImageProgram.ANGLE_3], [NodeImageProgram.ANGLE_4]]
+        };
+      }
+    }, {
+      key: "kill",
+      value: function kill() {
+        textureManager.off(TextureManager.NEW_TEXTURE_EVENT, this.textureManagerCallback);
+      }
+    }, {
+      key: "bindTexture",
+      value: function bindTexture() {
+        var gl = this.normalProgram.gl;
+        gl.bindTexture(gl.TEXTURE_2D, this.texture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.textureImage);
+        gl.generateMipmap(gl.TEXTURE_2D);
+      }
+    }, {
+      key: "renderProgram",
+      value: function renderProgram(params, programInfo) {
+        if (!programInfo.isPicking) {
+          // Rebind texture (since it's been just unbound by picking):
+          var gl = programInfo.gl;
+          gl.bindTexture(gl.TEXTURE_2D, this.texture);
+        }
+        _get(_getPrototypeOf(NodeImageProgram.prototype), "renderProgram", this).call(this, params, programInfo);
+      }
+    }, {
+      key: "processVisibleItem",
+      value: function processVisibleItem(nodeIndex, startIndex, data) {
+        var _data$color, _data$iconColor, _data$image, _data$border, _data$pie, _data$opacity;
+        var array = this.array;
+        var fill = floatColor((_data$color = data.color) !== null && _data$color !== void 0 ? _data$color : this.renderer.getSetting("defaultNodeColor"));
+        var color = floatColor((_data$iconColor = data.iconColor) !== null && _data$iconColor !== void 0 ? _data$iconColor : this.renderer.getSetting("labelColor").color);
+        var imageSource = (_data$image = data.image) !== null && _data$image !== void 0 ? _data$image : data.path;
+        var imagePosition = imageSource ? this.atlas[imageSource] : undefined;
+        if (typeof imageSource === "string" && !imagePosition) void textureManager.registerImage(imageSource);
+        array[startIndex++] = data.x;
+        array[startIndex++] = data.y;
+        array[startIndex++] = data.size - ((_data$border = data.border) !== null && _data$border !== void 0 ? _data$border : 0) - ((_data$pie = data.pie) !== null && _data$pie !== void 0 && _data$pie.length ? 4 : 2);
+        array[startIndex++] = (_data$opacity = data.opacity) !== null && _data$opacity !== void 0 ? _data$opacity : 1;
+        array[startIndex++] = isSvgPath(imageSource) ? 1 : 0;
+        array[startIndex++] = fill;
+        array[startIndex++] = color;
+        array[startIndex++] = nodeIndex;
+
+        // Reference texture:
+        if (imagePosition) {
+          var _this$textureImage = this.textureImage,
+            width = _this$textureImage.width,
+            height = _this$textureImage.height;
+          array[startIndex++] = imagePosition.x / width;
+          array[startIndex++] = imagePosition.y / height;
+          array[startIndex++] = imagePosition.size / width;
+          array[startIndex++] = imagePosition.size / height;
+        } else {
+          array[startIndex++] = 0;
+          array[startIndex++] = 0;
+          array[startIndex++] = 0;
+          array[startIndex++] = 0;
+        }
+      }
+    }, {
+      key: "setUniforms",
+      value: function setUniforms(params, _ref) {
+        var gl = _ref.gl,
+          uniformLocations = _ref.uniformLocations;
+        var u_sizeRatio = uniformLocations.u_sizeRatio,
+          u_correctionRatio = uniformLocations.u_correctionRatio,
+          u_matrix = uniformLocations.u_matrix,
+          u_atlas = uniformLocations.u_atlas,
+          u_keepWithinCircle = uniformLocations.u_keepWithinCircle,
+          u_cameraAngle = uniformLocations.u_cameraAngle,
+          u_percentagePadding = uniformLocations.u_percentagePadding;
+        this.latestRenderParams = params;
+        gl.uniform1f(u_correctionRatio, params.correctionRatio);
+        gl.uniform1f(u_sizeRatio, keepWithinCircle ? params.sizeRatio : params.sizeRatio / Math.SQRT2);
+        gl.uniform1f(u_cameraAngle, params.cameraAngle);
+        gl.uniform1f(u_percentagePadding, padding);
+        gl.uniformMatrix3fv(u_matrix, false, params.matrix);
+        gl.uniform1i(u_atlas, 0);
+        gl.uniform1i(u_keepWithinCircle, keepWithinCircle ? 1 : 0);
+      }
+    }]);
+  }(NodeProgram), _defineProperty(_NodeImageProgram, "ANGLE_1", 1 * Math.PI / 4), _defineProperty(_NodeImageProgram, "ANGLE_2", 3 * Math.PI / 4), _defineProperty(_NodeImageProgram, "ANGLE_3", 5 * Math.PI / 4), _defineProperty(_NodeImageProgram, "ANGLE_4", 7 * Math.PI / 4), _defineProperty(_NodeImageProgram, "drawLabel", drawLabel), _defineProperty(_NodeImageProgram, "drawHover", drawHover), _NodeImageProgram;
+}
+
+export { getNodeImageProgram as default };

package/dist/esm/packages/graph/src/programs/node-image/frag.glsl.js

@@ -0,0 +1,8 @@
+'use client';
+
+/* istanbul ignore file */
+
+// language=GLSL
+var SHADER_SOURCE = /* glsl */"\nprecision highp float;\n\nvarying vec4 v_fill;\nvarying vec4 v_color;\nvarying vec4 v_texture;\nvarying vec2 v_diffVector;\nvarying float v_opacity;\nvarying float v_radius;\nvarying float v_colorMode;\n\nuniform sampler2D u_atlas;\nuniform float u_correctionRatio;\nuniform float u_cameraAngle;\nuniform float u_percentagePadding;\nuniform bool u_keepWithinCircle;\nuniform bool u_shape;\n\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);\n\nconst float radius = 0.5;\n\nvoid main(void) {\n  float border = 2.0 * u_correctionRatio;\n  float dist = length(v_diffVector);\n  vec4 color = v_fill;\n\n  float c = cos(-u_cameraAngle);\n  float s = sin(-u_cameraAngle);\n  vec2 diffVector = mat2(c, s, -s, c) * (v_diffVector);\n\n  // No antialiasing for picking mode:\n  #ifdef PICKING_MODE\n  border = 0.0;\n  gl_FragColor = v_color;\n\n  #else\n  // First case: No image to display\n  if (v_texture.w <= 0.0) {\n    if (v_colorMode==0.0) {\n      color = v_fill;\n    }\n  }\n\n  // Second case: Image loaded into the texture\n  else {\n    float paddingRatio = 1.0 + 2.0 * u_percentagePadding;\n    float coef = u_keepWithinCircle ? 1.0 : ".concat(Math.SQRT2, ";\n    vec2 coordinateInTexture = diffVector * vec2(paddingRatio, -paddingRatio) / v_radius / 2.0 * coef + vec2(0.5, 0.5);\n    vec4 texel = texture2D(u_atlas, (v_texture.xy + coordinateInTexture * v_texture.zw), -1.0);\n\n    // Colorize all visible image pixels:\n    if (v_colorMode==1.0) {\n      color = mix(v_fill, v_color, texel.a);\n    }\n\n    // Colorize background pixels, keep image pixel colors:\n    else {\n      color = vec4(mix(v_color, texel, texel.a).rgb, max(texel.a, v_color.a));\n    }\n\n    // Erase pixels \"in the padding\":\n    if (abs(diffVector.x) > v_radius / paddingRatio || abs(diffVector.y) > v_radius / paddingRatio) {\n      color = v_colorMode == 1.0 ? gl_FragColor : v_fill;\n    }\n  }\n\n  // Crop in a circle when u_keepWithinCircle is truthy:\n  if (u_keepWithinCircle) {\n    if (dist - v_radius + border > border)\n      gl_FragColor = transparent;\n    else if (dist - v_radius + border > 0.0) {\n      gl_FragColor = mix(v_fill, transparent, (dist - v_radius + border) / border);\n    }\n    else  {\n      gl_FragColor = mix(v_fill, color, v_opacity);\n    }\n  }\n\n  // Crop in a square else:\n  else {\n    float squareHalfSize = v_radius * ").concat(Math.SQRT1_2 * Math.cos(Math.PI / 12), ";\n    if (abs(diffVector.x) > squareHalfSize || abs(diffVector.y) > squareHalfSize) {\n      gl_FragColor = transparent;\n    } else {\n      gl_FragColor = mix(v_fill, color, v_opacity);\n    }\n  }\n  #endif\n\n}\n");
+
+export { SHADER_SOURCE as default };

package/dist/esm/packages/graph/src/programs/node-image/index.js

@@ -0,0 +1,13 @@
+'use client';
+
+import getNodeImageProgram from './factory.js';
+
+/* istanbul ignore file */
+
+var NodeImageProgram = function NodeImageProgram(isCircle) {
+  return getNodeImageProgram({
+    keepWithinCircle: isCircle
+  });
+};
+
+export { NodeImageProgram, getNodeImageProgram as createNodeImageProgram };