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

package/dist/cjs/utils/node.js

@@ -0,0 +1,93 @@
+'use strict';
+
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var utilities = require('@react-fabric/utilities');
+var types = require('sigma/types');
+
+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), true).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 PIE_PALETTE = ["#2ad4ac", "#ea5353", "#39a1e6", "#f8a850", "#B64E84", "#92c652", "#ac7dc4", "#2c91bd", "#f8d653", "#D16082", "#52c8d7", "#475065"];
+function nodeReducer(_, node, attrs) {
+  var _attrs$segments;
+  if (utilities.isArray(attrs.segments) && (_attrs$segments = attrs.segments) !== null && _attrs$segments !== void 0 && _attrs$segments.length) {
+    // @ts-expect-error ignore
+    node.pieSize = 0.25;
+    attrs.segments.forEach(function (seg, i) {
+      if (typeof seg === "string") {
+        // @ts-expect-error ignore
+        node["slice_".concat(i)] = 1 / attrs.segments.length;
+        // @ts-expect-error ignore
+        node["color_".concat(i)] = seg;
+      }
+      if (typeof seg === "number") {
+        // @ts-expect-error ignore
+        node["slice_".concat(i)] = seg;
+        // @ts-expect-error ignore
+        node["color_".concat(i)] = PIE_PALETTE[i];
+      }
+    });
+  }
+  if (utilities.isObject(attrs.segments)) {
+    // @ts-expect-error ignore
+    node.pieSize = 0.25;
+    Object.entries(attrs.segments).forEach(function (_ref, i) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        color = _ref2[0],
+        size = _ref2[1];
+      // @ts-expect-error ignore
+      node["slice_".concat(i)] = size;
+      // @ts-expect-error ignore
+      node["color_".concat(i)] = color;
+    });
+  }
+  if (attrs.group) {
+    // @ts-expect-error ignore
+    node.shape = "folder";
+  }
+  return node;
+}
+function defaultNodeStyles() {
+  var isDark = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  return [types.DEFAULT_STYLES.nodes, _objectSpread(_objectSpread({
+    size: {
+      attribute: "size",
+      defaultValue: 8
+    },
+    shape: {
+      attribute: "shape",
+      defaultValue: "circle"
+    },
+    color: {
+      attribute: "color",
+      defaultValue: isDark ? "#1e293b" : "#e2e8f0"
+    },
+    border: {
+      attribute: "border",
+      defaultValue: 0
+    },
+    borderColor: {
+      attribute: "borderColor",
+      defaultValue: "#64748b"
+    },
+    image: {
+      attribute: "image",
+      defaultValue: "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
+    },
+    pieSize: 0
+  }, Object.assign.apply(Object, [{}].concat(_toConsumableArray(Array.from({
+    length: 12
+  }).fill(0).map(function (_, i) {
+    return _defineProperty(_defineProperty({}, "slice_".concat(i), i === 0 ? 1 : 0), "color_".concat(i), "#888");
+  }))))), {}, {
+    labelPosition: "below",
+    labelColor: isDark ? "#fff" : "#333",
+    fillColor: isDark ? "#111" : "#fff",
+    backdropColor: isDark ? "#333" : "#fff",
+    backdropShadowColor: isDark ? "rgba(0, 0, 0, 0.5)" : "rgba(0, 0, 0, 0.3)"
+  })];
+}
+
+exports.defaultNodeStyles = defaultNodeStyles;
+exports.nodeReducer = nodeReducer;

package/dist/cjs/utils/sdfFolder.js

@@ -0,0 +1,107 @@
+'use strict';
+
+var rendering = require('sigma/rendering');
+
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+
+/**
+ * Options for the {@link sdfFolder} shape.
+ *
+ * @property cornerRadius - Corner rounding as a fraction of the node size.
+ *    `0` gives sharp corners; larger values round the body and the tab. May
+ *   also be a per-node attribute via `{ attribute, default }`.
+ * @property rotation - Rotation of the folder, in radians, applied before the
+ *   distance field is evaluated. May also be a per-node attribute via
+ *    `{ attribute, default }`.
+ */
+
+/**
+ * Resolves a {@link ValueSource} to a plain number, falling back to
+ * `defaultValue` when the value is attribute-sourced or missing.
+ */
+function resolveNumber(value, defaultValue) {
+  return typeof value === "number" ? value : defaultValue;
+}
+
+/**
+ * Creates a folder SDF shape.
+ *
+ * The outline is the union of two rounded rectangles: a wide **body** and a
+ * smaller **tab** flap that rises above the body's top-left corner — the shape
+ * of a classic manila folder. Each panel is an Inigo Quilez rounded-box
+ * distance field (https://iquilezles.org/articles/distfunctions2d/) and the
+ * union is the closer of the two distances.
+ *
+ * @param options - Configuration for the folder
+ * @returns Folder SDF shape definition
+ *
+ * @example
+ * ```typescript
+ * // Sharp folder with a top-left tab
+ * const folder = sdfFolder();
+ *
+ * // Rounded folder
+ * const rounded = sdfFolder({ cornerRadius: 0.12 });
+ *
+ * // Per-node folder, driven by attributes
+ * const perNode = sdfFolder({
+ *   cornerRadius: { attribute: "folderCorner" },
+ *   rotation: { attribute: "folderRotation" },
+ * });
+ * ```
+ */
+function sdfFolder(options) {
+  var _ref = {},
+    cornerRadius = _ref.cornerRadius,
+    rotation = _ref.rotation;
+  var cornerRadiusValue = resolveNumber(cornerRadius, 0);
+  var rotationValue = resolveNumber(rotation, 0);
+
+  // SDF for a folder: the union of a wide body panel and a top-left tab flap,
+  // each an Inigo Quilez rounded box. The GLSL_ROTATE_2D helper is prepended so
+  // `rotation` can be applied; the framework deduplicates it across shapes.
+  var glsl = "".concat(rendering.GLSL_ROTATE_2D, "\nfloat sdf_folder(vec2 uv, float size, float cornerRadius, float rotation) {\n    // Apply rotation if needed\n  vec2 p = uv;\n  if (rotation != 0.0) {\n    p = rotate2D(rotation) * p;\n    }\n\n    // A folder is the union of a wide body panel and a smaller tab flap that\n    // rises above the body's top-left. Each panel is a rounded box; the union is\n    // the closer of the two distances.\n  float s = size;\n  float cr = cornerRadius * s;\n\n    // Body: the main panel, wide and sitting just below the origin.\n  vec2 bodyD = abs(p - vec2(0.0, -0.05 * s)) - vec2(0.72 * s, 0.50 * s) + cr;\n  float body = length(max(bodyD, 0.0)) + min(max(bodyD.x, bodyD.y), 0.0) - cr;\n\n    // Tab: the top-left flap, its top edge poking above the body.\n  vec2 tabD = abs(p - vec2(-0.43 * s, 0.44 * s)) - vec2(0.29 * s, 0.20 * s) + cr;\n  float tab = length(max(tabD, 0.0)) + min(max(tabD.x, tabD.y), 0.0) - cr;\n\n    // Union of the two panels.\n  return min(body, tab);\n}\n");
+  return {
+    name: "folder",
+    glsl: glsl,
+    uniforms: [{
+      name: "u_cornerRadius",
+      type: "float",
+      value: cornerRadiusValue
+    }, {
+      name: "u_rotation",
+      type: "float",
+      value: rotationValue
+    }],
+    // The outline reaches out to the tab's top-left corner (circumradius
+    // ~0.96 of the node size); SQRT1_2 keeps the bounding quad comfortably
+    // larger, matching the square and diamond shapes.
+    inradiusFactor: Math.SQRT1_2
+  };
+}
+
+exports.sdfFolder = sdfFolder;

package/dist/cjs/viewer/Graph.js

@@ -0,0 +1,174 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var core = require('@react-fabric/core');
+var nodeBorder = require('@sigma/node-border');
+var nodeImage = require('@sigma/node-image');
+var nodePiechart = require('@sigma/node-piechart');
+var utils = require('@sigma/utils');
+var react = require('react');
+var sigma = require('sigma');
+var rendering = require('sigma/rendering');
+var context = require('../context/context.js');
+var edge = require('../utils/edge.js');
+var node = require('../utils/node.js');
+var sdfFolder = require('../utils/sdfFolder.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function GraphViewer(_ref) {
+  var data = _ref.data,
+    children = _ref.children;
+  var containerRef = react.useRef(null);
+  var isDark = core.useIsDark();
+  var _useState = react.useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    sigma$1 = _useState2[0],
+    setSigma = _useState2[1];
+  react.useEffect(function () {
+    if (containerRef.current) {
+      var _sigma = new sigma.Sigma(data, containerRef.current, {
+        settings: {
+          autoRescale: false,
+          autoRescaleContent: "nodes",
+          stagePadding: 40,
+          enableNodeDrag: true,
+          enableEdgeEvents: true,
+          renderEdgeLabels: true,
+          cameraPanBoundaries: true
+        },
+        edgeReducer: edge.edgeReducer,
+        nodeReducer: node.nodeReducer,
+        styles: {
+          edges: edge.defaultEdgeStyles(isDark),
+          nodes: node.defaultNodeStyles(isDark)
+        },
+        primitives: {
+          edges: {
+            paths: [rendering.pathLine(), rendering.pathCurved(), rendering.pathStepCurved(), rendering.pathCurvedS()],
+            extremities: [rendering.extremityArrow()],
+            label: {
+              fontSizeMode: "fixed"
+            },
+            layers: [rendering.layerPlain({
+              color: {
+                attribute: "color"
+              }
+            }), rendering.layerDashed({
+              dashColor: {
+                attribute: "dashColor"
+              },
+              dashSize: {
+                attribute: "dashSize"
+              },
+              gapSize: {
+                attribute: "gapSize"
+              }
+            })]
+          },
+          nodes: {
+            shapes: [rendering.sdfCircle(), rendering.sdfSquare(), rendering.sdfTriangle(), rendering.sdfDiamond(), sdfFolder.sdfFolder()],
+            layers: [nodePiechart.layerPiechart({
+              slices: Array.from({
+                length: 12
+              }).fill(0).map(function (_, i) {
+                return {
+                  color: {
+                    attribute: "color_".concat(i)
+                  },
+                  value: {
+                    attribute: "slice_".concat(i)
+                  }
+                };
+              })
+            }), nodeBorder.layerBorder({
+              borders: [{
+                mode: "relative",
+                size: 0,
+                color: {
+                  attribute: "color"
+                }
+              }, {
+                size: {
+                  attribute: "border"
+                },
+                color: {
+                  attribute: "borderColor"
+                }
+              }, {
+                mode: "pixels",
+                size: 1,
+                color: {
+                  attribute: "fillColor"
+                }
+              }, {
+                size: {
+                  attribute: "pieSize",
+                  "default": 0
+                },
+                color: "transparent",
+                fill: false
+              }, {
+                mode: "pixels",
+                size: 4,
+                color: {
+                  attribute: "fillColor"
+                }
+              }, {
+                color: {
+                  attribute: "color"
+                },
+                fill: true
+              }]
+            }), nodeImage.layerImage({
+              padding: 0.5
+            })]
+          }
+        }
+      });
+      setSigma(_sigma);
+      var fitToGraph = function fitToGraph() {
+        requestAnimationFrame(function () {
+          void utils.fitViewportToNodes(_sigma, data.nodes(), {
+            animate: true
+          }).then(function () {
+            _sigma.getCamera().setState({
+              ratio: _sigma.getCamera().ratio * 1.15 // Multiplier adds a proportional buffer from the canvas edge
+            });
+          });
+        });
+      };
+      data.on("layoutDone", fitToGraph);
+      return function () {
+        if (_sigma) {
+          _sigma.kill();
+        }
+      };
+    }
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, []);
+  react.useLayoutEffect(function () {
+    if (sigma$1) {
+      // @ts-expect-error silent update graph styles without re-render
+      sigma$1.stylesDeclaration = {
+        edges: edge.defaultEdgeStyles(isDark),
+        nodes: node.defaultNodeStyles(isDark)
+      };
+      sigma$1.refresh();
+    }
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, [isDark]);
+  return /*#__PURE__*/jsxRuntime.jsx(context.Provider, {
+    value: {
+      data: data,
+      sigma: sigma$1
+    },
+    children: /*#__PURE__*/jsxRuntime.jsxs(core.Layout, {
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "area-content overflow-hidden",
+        ref: containerRef
+      }), children]
+    })
+  });
+}
+
+exports.GraphViewer = GraphViewer;

package/dist/esm/context/context.js

@@ -0,0 +1,15 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { createContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+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), true).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 Context = /*#__PURE__*/createContext({});
+var Provider = function Provider(props) {
+  var Provider = Context.Provider;
+  return /*#__PURE__*/jsx(Provider, _objectSpread({}, props));
+};
+
+export { Context, Provider };