@react-fabric/graph 1.0.0-beta.58

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

@@ -0,0 +1,249 @@
+'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 { 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", "badgePosition"];
+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; }
+var ICON_MAP = {
+  star: "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
+  exclaim: "M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z",
+  thumbUp: "M23,10C23,8.89 22.1,8 21,8H14.68L15.64,3.43C15.66,3.33 15.67,3.22 15.67,3.11C15.67,2.7 15.5,2.32 15.23,2.05L14.17,1L7.59,7.58C7.22,7.95 7,8.45 7,9V19A2,2 0 0,0 9,21H18C18.83,21 19.54,20.5 19.84,19.78L22.86,12.73C22.95,12.5 23,12.26 23,12V10M1,21H5V9H1V21Z",
+  thumbDown: "M19,15H23V3H19M15,3H6C5.17,3 4.46,3.5 4.16,4.22L1.14,11.27C1.05,11.5 1,11.74 1,12V14A2,2 0 0,0 3,16H9.31L8.36,20.57C8.34,20.67 8.33,20.77 8.33,20.88C8.33,21.3 8.5,21.67 8.77,21.94L9.83,23L16.41,16.41C16.78,16.05 17,15.55 17,15V5C17,3.89 16.1,3 15,3Z"
+};
+var POSITION = {
+  "top-left": 0,
+  "top-right": 1,
+  "bottom-left": 2,
+  "bottom-right": 3,
+  top: 4,
+  left: 5,
+  right: 6,
+  bottom: 7
+};
+
+/* 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 _badgePosition$DEFAUL = _objectSpread(_objectSpread(_objectSpread({
+      badgePosition: "top-right"
+    }, DEFAULT_CREATE_NODE_IMAGE_OPTIONS), options !== null && options !== void 0 ? options : {}), {}, {
+      drawLabel: undefined,
+      drawHover: undefined
+    }),
+    drawHover = _badgePosition$DEFAUL.drawHover,
+    drawLabel = _badgePosition$DEFAUL.drawLabel;
+    _badgePosition$DEFAUL.drawingMode;
+    var keepWithinCircle = _badgePosition$DEFAUL.keepWithinCircle,
+    padding = _badgePosition$DEFAUL.padding;
+    _badgePosition$DEFAUL.colorAttribute;
+    var badgePosition = _badgePosition$DEFAUL.badgePosition,
+    textureManagerOptions = _objectWithoutProperties(_badgePosition$DEFAUL, _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_circle",
+            size: 1,
+            type: FLOAT
+          }, {
+            name: "a_placement",
+            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$badge, _badge$color, _ref, _badge$iconColor, _ICON_MAP, _data$opacity, _POSITION$badgePositi;
+        var array = this.array;
+        var badge = (_data$badge = data.badge) === null || _data$badge === void 0 ? void 0 : _data$badge.find(function (b) {
+          return b.position === badgePosition;
+        });
+        var fill = floatColor((_badge$color = badge === null || badge === void 0 ? void 0 : badge.color) !== null && _badge$color !== void 0 ? _badge$color : "#00000000");
+        var color = floatColor((_ref = (_badge$iconColor = badge === null || badge === void 0 ? void 0 : badge.iconColor) !== null && _badge$iconColor !== void 0 ? _badge$iconColor : this.renderer.getSetting("labelColor").color) !== null && _ref !== void 0 ? _ref : "#000");
+        var imageSource = badge ? (_ICON_MAP = ICON_MAP[badge.type]) !== null && _ICON_MAP !== void 0 ? _ICON_MAP : badge.path : undefined;
+        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;
+        array[startIndex++] = !imageSource ? 0 : (_data$opacity = data.opacity) !== null && _data$opacity !== void 0 ? _data$opacity : 1;
+        array[startIndex++] = keepWithinCircle ? 1 : 0;
+        array[startIndex++] = (_POSITION$badgePositi = POSITION[badgePosition]) !== null && _POSITION$badgePositi !== void 0 ? _POSITION$badgePositi : 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, _ref2) {
+        var gl = _ref2.gl,
+          uniformLocations = _ref2.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, params.sizeRatio);
+        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-badge/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;\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     color = v_fill;\n  }\n\n  // Second case: Image loaded into the texture\n  else {\n    float paddingRatio = 1.0 + 2.0 * u_percentagePadding;\n    float coef = 1.0;\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    color = mix(v_fill, v_color, texel.a);\n    \n    // Erase pixels \"in the padding\":\n    if (abs(diffVector.x) > v_radius / paddingRatio || abs(diffVector.y) > v_radius / paddingRatio) {\n      color = v_fill;\n    }\n  }\n\n  // Crop in a circle when u_keepWithinCircle is truthy:\n  if(v_opacity == 0.0) {\n    gl_FragColor = transparent;\n  }\n  else 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  #endif\n  \n\n}\n";
+
+export { SHADER_SOURCE as default };

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

@@ -0,0 +1,32 @@
+'use client';
+
+import getNodeImageProgram from './factory.js';
+
+/* istanbul ignore file */
+
+var NodeBadgeProgram = function NodeBadgeProgram(isCircle) {
+  return [getNodeImageProgram({
+    keepWithinCircle: isCircle,
+    badgePosition: "top-right"
+  }), getNodeImageProgram({
+    keepWithinCircle: isCircle,
+    badgePosition: "top-left"
+  }), getNodeImageProgram({
+    keepWithinCircle: isCircle,
+    badgePosition: "bottom-right"
+  }), getNodeImageProgram({
+    keepWithinCircle: isCircle,
+    badgePosition: "bottom-left"
+  }), getNodeImageProgram({
+    keepWithinCircle: isCircle,
+    badgePosition: "top"
+  }), getNodeImageProgram({
+    keepWithinCircle: isCircle,
+    badgePosition: "left"
+  }), getNodeImageProgram({
+    keepWithinCircle: isCircle,
+    badgePosition: "right"
+  })];
+};
+
+export { NodeBadgeProgram, getNodeImageProgram as createNodeImageProgram };