@reactflow/background - npm Package Compare versions

Comparing version 11.0.0-next.5 to 11.0.0-next.6

dist/esm/index.js

 import { jsx, jsxs } from 'react/jsx-runtime';
-import { memo, useRef, useId } from 'react';
+import { memo, useRef } from 'react';
 import cc from 'classcat';
 import { useStore } from '@reactflow/core';
+import shallow from 'zustand/shallow';
 
@@ -30,3 +31,3 @@ var BackgroundVariant;
 };
-const transformSelector = (s) => s.transform;
+const selector = (s) => ({ transform: s.transform, rfId: s.rfId });
 function Background({ variant = BackgroundVariant.Dots, gap = 25, 
@@ -38,4 +39,3 @@ // only used for dots and cross
     const ref = useRef(null);
-    const patternId = useId();
-    const [tX, tY, tScale] = useStore(transformSelector);
+    const { transform, rfId } = useStore(selector, shallow);
     const patternColor = color || defaultColor[variant];
@@ -46,4 +46,4 @@ const patternSize = size || defaultSize[variant];
     const gapXY = Array.isArray(gap) ? gap : [gap, gap];
-    const scaledGap = [gapXY[0] * tScale || 1, gapXY[1] * tScale || 1];
-    const scaledSize = patternSize * tScale;
+    const scaledGap = [gapXY[0] * transform[2] || 1, gapXY[1] * transform[2] || 1];
+    const scaledSize = patternSize * transform[2];
     const patternDimensions = isCross ? [scaledSize, scaledSize] : scaledGap;
@@ -60,3 +60,3 @@ const patternOffset = isDots
             left: 0,
-        }, ref: ref, children: [jsx("pattern", { id: patternId, x: tX % scaledGap[0], y: tY % scaledGap[1], width: scaledGap[0], height: scaledGap[1], patternUnits: "userSpaceOnUse", patternTransform: `translate(-${patternOffset[0]},-${patternOffset[1]})`, children: isDots ? (jsx(DotPattern, { color: patternColor, radius: scaledSize / 2 })) : (jsx(LinePattern, { dimensions: patternDimensions, color: patternColor, lineWidth: lineWidth })) }), jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: `url(#${patternId})` })] }));
+        }, ref: ref, children: [jsx("pattern", { id: rfId, x: transform[0] % scaledGap[0], y: transform[1] % scaledGap[1], width: scaledGap[0], height: scaledGap[1], patternUnits: "userSpaceOnUse", patternTransform: `translate(-${patternOffset[0]},-${patternOffset[1]})`, children: isDots ? (jsx(DotPattern, { color: patternColor, radius: scaledSize / 2 })) : (jsx(LinePattern, { dimensions: patternDimensions, color: patternColor, lineWidth: lineWidth })) }), jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: `url(#${rfId})` })] }));
 }
@@ -63,0 +63,0 @@ Background.displayName = 'Background';

package.json

 {
   "name": "@reactflow/background",
-  "version": "11.0.0-next.5",
+  "version": "11.0.0-next.6",
   "description": "Background component with different variants for React Flow",
@@ -32,4 +32,5 @@ "keywords": [
     "@babel/runtime": "^7.18.9",
-    "@reactflow/core": "11.0.0-next.5",
-    "classcat": "^5.0.3"
+    "@reactflow/core": "11.0.0-next.6",
+    "classcat": "^5.0.3",
+    "zustand": "^4.0.0"
   },
@@ -41,9 +42,16 @@ "devDependencies": {
     "@types/node": "^18.7.16",
-    "@types/react": "^18.0.19"
+    "@types/react": "^18.0.19",
+    "react": "^18.2.0",
+    "typescript": "^4.7.4"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
+    "react": ">=17",
+    "react-dom": ">=17"
   },
   "rollup": {
+    "globals": {
+      "zustand": "Zustand",
+      "zustand/shallow": "zustandShallow",
+      "classcat": "cc"
+    },
     "name": "ReactFlowBackground"
@@ -50,0 +58,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

137603

increased by0.44%

Lines of code

628

increased by0.16%

Worsened metrics

Dependency count

6

increased by20%

Dev dependency count

7

increased by40%

Dependency changes

• + Addedzustand@^4.0.0

• + Added@reactflow/core@11.0.0-next.6(transitive)

• - Removed@reactflow/core@11.0.0-next.5(transitive)

• - Removed@types/d3@7.4.3(transitive)

• - Removed@types/d3-array@3.2.1(transitive)

• - Removed@types/d3-axis@3.0.6(transitive)

• - Removed@types/d3-brush@3.0.6(transitive)

• - Removed@types/d3-chord@3.0.6(transitive)

• - Removed@types/d3-contour@3.0.6(transitive)

• - Removed@types/d3-delaunay@6.0.4(transitive)

• - Removed@types/d3-dispatch@3.0.6(transitive)

• - Removed@types/d3-dsv@3.0.7(transitive)

• - Removed@types/d3-ease@3.0.2(transitive)

• - Removed@types/d3-fetch@3.0.7(transitive)

• - Removed@types/d3-force@3.0.10(transitive)

• - Removed@types/d3-format@3.0.4(transitive)

• - Removed@types/d3-geo@3.1.0(transitive)

• - Removed@types/d3-hierarchy@3.1.7(transitive)

• - Removed@types/d3-path@3.1.0(transitive)

• - Removed@types/d3-polygon@3.0.2(transitive)

• - Removed@types/d3-quadtree@3.0.6(transitive)

• - Removed@types/d3-random@3.0.3(transitive)

• - Removed@types/d3-scale@4.0.8(transitive)

• - Removed@types/d3-scale-chromatic@3.0.3(transitive)

• - Removed@types/d3-shape@3.1.6(transitive)

• - Removed@types/d3-time@3.0.3(transitive)

• - Removed@types/d3-time-format@4.0.3(transitive)

• - Removed@types/d3-timer@3.0.2(transitive)

• - Removed@types/d3-transition@3.0.9(transitive)

• - Removed@types/geojson@7946.0.14(transitive)

• Updated@reactflow/core@11.0.0-next.6