@tisoap/react-flow-smart-edge - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

dist/react-flow-smart-edge.cjs.development.js

@@ -9,5 +9,24 @@ 'use strict';
 var React__default = _interopDefault(React);
+var useDebounce = _interopDefault(require('react-use/lib/useDebounce'));
 var reactFlowRenderer = require('react-flow-renderer');
 var pathfinding = require('pathfinding');
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 var getNextPointFromPosition = function getNextPointFromPosition(point, position) {
@@ -409,18 +428,2 @@ switch (position) {
 
-function useDebounce(value, delay) {
-  var _useState = React.useState(value),
-      debouncedValue = _useState[0],
-      setDebouncedValue = _useState[1];
-
-  React.useEffect(function () {
-    var timer = setTimeout(function () {
-      return setDebouncedValue(value);
-    }, delay || 500);
-    return function () {
-      return clearTimeout(timer);
-    };
-  }, [value, delay]);
-  return debouncedValue;
-}
-
 var nodePadding = 10;
@@ -501,9 +504,14 @@ var graphPadding = 20;
 
-  var _useDebounce = useDebounce([storeNodes, props], 200),
-      debouncedNodes = _useDebounce[0],
-      debouncedProps = _useDebounce[1];
+  var _useState = React.useState(_extends({
+    storeNodes: storeNodes
+  }, props)),
+      debouncedProps = _useState[0],
+      setDebouncedProps = _useState[1];
 
-  return React__default.createElement(PathFindingEdge, Object.assign({
-    storeNodes: debouncedNodes
-  }, debouncedProps));
+  useDebounce(function () {
+    setDebouncedProps(_extends({
+      storeNodes: storeNodes
+    }, props));
+  }, 200, [props, storeNodes]);
+  return React__default.createElement(PathFindingEdge, Object.assign({}, debouncedProps));
 });
@@ -510,0 +518,0 @@

dist/react-flow-smart-edge.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e=require("react"),r=(t=e)&&"object"==typeof t&&"default"in t?t.default:t,n=require("react-flow-renderer"),o=require("pathfinding"),i=function(t,e){switch(e){case"top":return{x:t.x,y:t.y-1};case"bottom":return{x:t.x,y:t.y+1};case"left":return{x:t.x-1,y:t.y};case"right":return{x:t.x+1,y:t.y}}},a=function(t,e,r){for(var n=t.getNodeAt(e.x,e.y);!n.walkable;){t.setWalkableAt(n.x,n.y,!0);var o=i(n,r);n=t.getNodeAt(o.x,o.y)}},u=function(t,e,r){var n=t.x/10,o=t.y/10,i=e/10,a=r/10;if(i<1)for(;1!==i;)i++,n++;else if(i>1)for(;1!==i;)i--,n--;if(a<1)for(;1!==a;)a++,o++;else if(a>1)for(;1!==a;)a--,o--;return{x:n,y:o}},x=function(t,e){return void 0===e&&(e=10),Math.round(t/e)*e},y=function(t,e){return void 0===e&&(e=10),Math.floor(t/e)*e},f=function(t,e){return void 0===e&&(e=10),Math.ceil(t/e)*e},s=e.memo((function(t){var e=t.sourceX,s=t.sourceY,d=t.sourcePosition,l=t.targetX,c=t.targetY,h=t.targetPosition,g=t.arrowHeadType,v=t.markerEndId,m=t.style,M=function(t,e,r,n){void 0===e&&(e=0),void 0===r&&(r=0),void 0===n&&(n=0),e=Math.max(Math.round(e),0),r=Math.max(Math.round(r),0),n=Math.max(Math.round(n),0),e=Number.isInteger(e)?e:0,r=Number.isInteger(r)?r:0,n=Number.isInteger(n)?n:0;var o=Number.MIN_SAFE_INTEGER,i=Number.MIN_SAFE_INTEGER,a=Number.MAX_SAFE_INTEGER,u=Number.MAX_SAFE_INTEGER,x=t.map((function(t){var r,x,s=null==t?void 0:t.__rf,d=Math.max((null==s?void 0:s.width)||0,1),l=Math.max((null==s?void 0:s.height)||0,1),c=(null==s||null==(r=s.position)?void 0:r.x)||0,h=(null==s||null==(x=s.position)?void 0:x.y)||0,g={x:c-e,y:h-e},v={x:c-e,y:h+l+e},m={x:c+d+e,y:h-e},M={x:c+d+e,y:h+l+e};return n>0&&(g.x=y(g.x,n),g.y=y(g.y,n),v.x=y(v.x,n),v.y=f(v.y,n),m.x=f(m.x,n),m.y=y(m.y,n),M.x=f(M.x,n),M.y=f(M.y,n)),g.y<u&&(u=g.y),g.x<a&&(a=g.x),M.y>i&&(i=M.y),M.x>o&&(o=M.x),{id:t.id,width:d,height:l,topLeft:g,bottomLeft:v,topRight:m,bottomRight:M}})),s={x:a-=r,y:u-=r},d={x:a,y:i+=r},l={x:o+=r,y:u};return{nodes:x,graph:{topLeft:s,bottomLeft:d,topRight:l,bottomRight:{x:o,y:i},width:Math.abs(s.x-l.x),height:Math.abs(s.y-d.y),xMax:o,yMax:i,xMin:a,yMin:u}}}(t.storeNodes,10,20,10),p=M.graph,b={x:e,y:s,position:d},E={x:l,y:c,position:h},N=function(t,e,r,n){var y=t.xMin,f=t.yMin,s=new o.Grid(t.width/10,t.height/10);e.forEach((function(t){for(var e=u(t.topLeft,y,f),r=u(t.bottomRight,y,f),n=e.x;n<r.x;n++)for(var o=e.y;o<r.y;o++)s.setWalkableAt(n,o,!1)}));var d=u({x:x(r.x,10),y:x(r.y,10)},y,f),l=u({x:x(n.x,10),y:x(n.y,10)},y,f),c=s.getNodeAt(d.x,d.y);a(s,c,r.position);var h=s.getNodeAt(l.x,l.y);a(s,h,n.position);var g=i(c,r.position),v=i(h,n.position);return{grid:s,start:g,end:v}}(p,M.nodes,b,E),A=function(t,e,r){var n=new o.AStarFinder({diagonalMovement:o.DiagonalMovement.Always,allowDiagonal:!0,dontCrossCorners:!0}),i=[];try{i=n.findPath(e.x,e.y,r.x,r.y,t),i=o.Util.smoothenPath(t,i)}catch(t){}return i}(N.grid,N.start,N.end);if(A.length<=2)return r.createElement(n.BezierEdge,Object.assign({},t));var _=function(t,e,r){return function(t){for(var e=t[0],r=t[0],n="M"+r[0]+","+r[1]+"M",o=0;o<t.length;o++){var i=t[o],a=[(e[0]-(u=i[0]))/2+u,(e[1]-(x=i[1]))/2+x];n+=" "+a[0]+","+a[1],n+="Q"+i[0]+","+i[1],e=i}var u,x,y=t[t.length-1];return n+" "+y[0]+","+y[1]}([[t.x,t.y]].concat(r,[[e.x,e.y]]))}(b,E,A.map((function(t){var e=function(t,e,r){var n=10*t.x,o=10*t.y,i=e,a=r;if(i<10)for(;10!==i;)i+=10,n-=10;else if(i>10)for(;10!==i;)i-=10,n+=10;if(a<10)for(;10!==a;)a+=10,o-=10;else if(a>10)for(;10!==a;)a-=10,o+=10;return{x:n,y:o}}({x:t[0],y:t[1]},p.xMin,p.yMin);return[e.x,e.y]}))),w=n.getMarkerEnd(g,v);return r.createElement("path",{style:m,className:"react-flow__edge-path",d:_,markerEnd:w})}));exports.PathFindingEdge=e.memo((function(t){var o,i,a,u,x=n.useStoreState((function(t){return t.nodes})),y=(a=(i=e.useState(o=[x,t]))[0],u=i[1],e.useEffect((function(){var t=setTimeout((function(){return u(o)}),200);return function(){return clearTimeout(t)}}),[o,200]),a);return r.createElement(s,Object.assign({storeNodes:y[0]},y[1]))}));
+"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=t(e),n=t(require("react-use/lib/useDebounce")),o=require("react-flow-renderer"),i=require("pathfinding");function a(){return(a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t}).apply(this,arguments)}var u=function(t,e){switch(e){case"top":return{x:t.x,y:t.y-1};case"bottom":return{x:t.x,y:t.y+1};case"left":return{x:t.x-1,y:t.y};case"right":return{x:t.x+1,y:t.y}}},y=function(t,e,r){for(var n=t.getNodeAt(e.x,e.y);!n.walkable;){t.setWalkableAt(n.x,n.y,!0);var o=u(n,r);n=t.getNodeAt(o.x,o.y)}},x=function(t,e,r){var n=t.x/10,o=t.y/10,i=e/10,a=r/10;if(i<1)for(;1!==i;)i++,n++;else if(i>1)for(;1!==i;)i--,n--;if(a<1)for(;1!==a;)a++,o++;else if(a>1)for(;1!==a;)a--,o--;return{x:n,y:o}},s=function(t,e){return void 0===e&&(e=10),Math.round(t/e)*e},f=function(t,e){return void 0===e&&(e=10),Math.floor(t/e)*e},d=function(t,e){return void 0===e&&(e=10),Math.ceil(t/e)*e},l=e.memo((function(t){var e=t.sourceX,n=t.sourceY,a=t.sourcePosition,l=t.targetX,c=t.targetY,h=t.targetPosition,g=t.arrowHeadType,v=t.markerEndId,m=t.style,p=function(t,e,r,n){void 0===e&&(e=0),void 0===r&&(r=0),void 0===n&&(n=0),e=Math.max(Math.round(e),0),r=Math.max(Math.round(r),0),n=Math.max(Math.round(n),0),e=Number.isInteger(e)?e:0,r=Number.isInteger(r)?r:0,n=Number.isInteger(n)?n:0;var o=Number.MIN_SAFE_INTEGER,i=Number.MIN_SAFE_INTEGER,a=Number.MAX_SAFE_INTEGER,u=Number.MAX_SAFE_INTEGER,y=t.map((function(t){var r,y,x=null==t?void 0:t.__rf,s=Math.max((null==x?void 0:x.width)||0,1),l=Math.max((null==x?void 0:x.height)||0,1),c=(null==x||null==(r=x.position)?void 0:r.x)||0,h=(null==x||null==(y=x.position)?void 0:y.y)||0,g={x:c-e,y:h-e},v={x:c-e,y:h+l+e},m={x:c+s+e,y:h-e},p={x:c+s+e,y:h+l+e};return n>0&&(g.x=f(g.x,n),g.y=f(g.y,n),v.x=f(v.x,n),v.y=d(v.y,n),m.x=d(m.x,n),m.y=f(m.y,n),p.x=d(p.x,n),p.y=d(p.y,n)),g.y<u&&(u=g.y),g.x<a&&(a=g.x),p.y>i&&(i=p.y),p.x>o&&(o=p.x),{id:t.id,width:s,height:l,topLeft:g,bottomLeft:v,topRight:m,bottomRight:p}})),x={x:a-=r,y:u-=r},s={x:a,y:i+=r},l={x:o+=r,y:u};return{nodes:y,graph:{topLeft:x,bottomLeft:s,topRight:l,bottomRight:{x:o,y:i},width:Math.abs(x.x-l.x),height:Math.abs(x.y-s.y),xMax:o,yMax:i,xMin:a,yMin:u}}}(t.storeNodes,10,20,10),M=p.graph,b={x:e,y:n,position:a},E={x:l,y:c,position:h},N=function(t,e,r,n){var o=t.xMin,a=t.yMin,f=new i.Grid(t.width/10,t.height/10);e.forEach((function(t){for(var e=x(t.topLeft,o,a),r=x(t.bottomRight,o,a),n=e.x;n<r.x;n++)for(var i=e.y;i<r.y;i++)f.setWalkableAt(n,i,!1)}));var d=x({x:s(r.x,10),y:s(r.y,10)},o,a),l=x({x:s(n.x,10),y:s(n.y,10)},o,a),c=f.getNodeAt(d.x,d.y);y(f,c,r.position);var h=f.getNodeAt(l.x,l.y);y(f,h,n.position);var g=u(c,r.position),v=u(h,n.position);return{grid:f,start:g,end:v}}(M,p.nodes,b,E),w=function(t,e,r){var n=new i.AStarFinder({diagonalMovement:i.DiagonalMovement.Always,allowDiagonal:!0,dontCrossCorners:!0}),o=[];try{o=n.findPath(e.x,e.y,r.x,r.y,t),o=i.Util.smoothenPath(t,o)}catch(t){}return o}(N.grid,N.start,N.end);if(w.length<=2)return r.createElement(o.BezierEdge,Object.assign({},t));var A=function(t,e,r){return function(t){for(var e=t[0],r=t[0],n="M"+r[0]+","+r[1]+"M",o=0;o<t.length;o++){var i=t[o],a=[(e[0]-(u=i[0]))/2+u,(e[1]-(y=i[1]))/2+y];n+=" "+a[0]+","+a[1],n+="Q"+i[0]+","+i[1],e=i}var u,y,x=t[t.length-1];return n+" "+x[0]+","+x[1]}([[t.x,t.y]].concat(r,[[e.x,e.y]]))}(b,E,w.map((function(t){var e=function(t,e,r){var n=10*t.x,o=10*t.y,i=e,a=r;if(i<10)for(;10!==i;)i+=10,n-=10;else if(i>10)for(;10!==i;)i-=10,n+=10;if(a<10)for(;10!==a;)a+=10,o-=10;else if(a>10)for(;10!==a;)a-=10,o+=10;return{x:n,y:o}}({x:t[0],y:t[1]},M.xMin,M.yMin);return[e.x,e.y]}))),_=o.getMarkerEnd(g,v);return r.createElement("path",{style:m,className:"react-flow__edge-path",d:A,markerEnd:_})}));exports.PathFindingEdge=e.memo((function(t){var i=o.useStoreState((function(t){return t.nodes})),u=e.useState(a({storeNodes:i},t)),y=u[0],x=u[1];return n((function(){x(a({storeNodes:i},t))}),200,[t,i]),r.createElement(l,Object.assign({},y))}));
 //# sourceMappingURL=react-flow-smart-edge.cjs.production.min.js.map

dist/react-flow-smart-edge.esm.js

@@ -1,5 +0,24 @@
-import React, { useState, useEffect, memo } from 'react';
+import React, { memo, useState } from 'react';
+import useDebounce from 'react-use/lib/useDebounce';
 import { useStoreState, BezierEdge, getMarkerEnd } from 'react-flow-renderer';
 import { Grid, AStarFinder, DiagonalMovement, Util } from 'pathfinding';
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 var getNextPointFromPosition = function getNextPointFromPosition(point, position) {
@@ -401,18 +420,2 @@ switch (position) {
 
-function useDebounce(value, delay) {
-  var _useState = useState(value),
-      debouncedValue = _useState[0],
-      setDebouncedValue = _useState[1];
-
-  useEffect(function () {
-    var timer = setTimeout(function () {
-      return setDebouncedValue(value);
-    }, delay || 500);
-    return function () {
-      return clearTimeout(timer);
-    };
-  }, [value, delay]);
-  return debouncedValue;
-}
-
 var nodePadding = 10;
@@ -493,9 +496,14 @@ var graphPadding = 20;
 
-  var _useDebounce = useDebounce([storeNodes, props], 200),
-      debouncedNodes = _useDebounce[0],
-      debouncedProps = _useDebounce[1];
+  var _useState = useState(_extends({
+    storeNodes: storeNodes
+  }, props)),
+      debouncedProps = _useState[0],
+      setDebouncedProps = _useState[1];
 
-  return React.createElement(PathFindingEdge, Object.assign({
-    storeNodes: debouncedNodes
-  }, debouncedProps));
+  useDebounce(function () {
+    setDebouncedProps(_extends({
+      storeNodes: storeNodes
+    }, props));
+  }, 200, [props, storeNodes]);
+  return React.createElement(PathFindingEdge, Object.assign({}, debouncedProps));
 });
@@ -502,0 +510,0 @@

package.json

 {
   "name": "@tisoap/react-flow-smart-edge",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "keywords": [
@@ -29,3 +29,2 @@ "react",
   "scripts": {
-    "analyze": "size-limit --why",
     "build": "tsdx build",
@@ -35,3 +34,3 @@ "build-storybook": "build-storybook",
     "prepare": "tsdx build",
-    "size": "size-limit",
+    "release": "np",
     "start": "tsdx watch",
@@ -53,7 +52,7 @@ "storybook": "start-storybook -p 6006",
   "dependencies": {
-    "pathfinding": "0.4.18"
+    "pathfinding": "0.4.18",
+    "react-use": "17.3.1"
   },
   "devDependencies": {
     "@babel/core": "7.16.0",
-    "@size-limit/preset-small-lib": "6.0.4",
     "@storybook/addon-essentials": "6.3.12",
@@ -63,14 +62,17 @@ "@storybook/addon-info": "5.3.21",
     "@storybook/addons": "6.3.12",
+    "@storybook/components": "6.3.12",
+    "@storybook/core-events": "6.3.12",
     "@storybook/react": "6.3.12",
+    "@storybook/theming": "6.3.12",
     "@types/pathfinding": "0.0.5",
     "@types/react": "17.0.34",
     "@types/react-dom": "17.0.11",
-    "@typescript-eslint/eslint-plugin": "5.3.1",
-    "@typescript-eslint/parser": "5.3.1",
+    "@typescript-eslint/eslint-plugin": "4.33.0",
+    "@typescript-eslint/parser": "4.33.0",
     "babel-eslint": "10.1.0",
     "babel-loader": "8.2.3",
-    "eslint": "8.2.0",
+    "eslint": "7.32.0",
     "eslint-config-prettier": "7.2.0",
     "eslint-config-react-app": "6.0.0",
-    "eslint-plugin-flowtype": "8.0.3",
+    "eslint-plugin-flowtype": "5.10.0",
     "eslint-plugin-import": "2.25.3",
@@ -82,11 +84,12 @@ "eslint-plugin-jsx-a11y": "6.5.1",
     "husky": "7.0.4",
+    "np": "7.5.0",
     "prettier": "2.4.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
     "react-flow-renderer": "9.6.11",
-    "react-is": "17.0.2",
-    "size-limit": "6.0.4",
+    "regenerator-runtime": "0.13.9",
     "tsdx": "0.14.1",
     "tslib": "2.3.1",
-    "typescript": "4.4.4"
+    "typescript": "4.4.4",
+    "webpack": "5.64.1"
   },
@@ -100,13 +103,3 @@ "peerDependencies": {
     "node": ">=12"
-  },
-  "size-limit": [
-    {
-      "path": "dist/smart-edge.cjs.production.min.js",
-      "limit": "10 KB"
-    },
-    {
-      "path": "dist/smart-edge.esm.js",
-      "limit": "10 KB"
-    }
-  ]
+  }
 }

README.md

@@ -44,2 +44,3 @@ # React Flow Smart Edge
     <ReactFlow
+      elements={elements}
       edgeTypes={{
@@ -62,3 +63,3 @@ smart: PathFindingEdge,
 
-There is a minimum example in this repository [`example` folder](https://github.com/tisoap/react-flow-smart-edge/tree/main/example). Clone this repository and run `cd example; npm i; npm start`.
+There is a minimum example in this repository [`example` folder](https://github.com/tisoap/react-flow-smart-edge/tree/main/example). Clone this repository and run `yarn; cd example; yarn; yarn start`.
 
@@ -65,0 +66,0 @@ ## License

No alert changes

Improved metrics

Lines of code

1561

increased by0.71%

Number of lines in readme file

67

increased by1.52%

Worsened metrics

Total package byte prevSize

149383

decreased by-0.99%

Dependency count

5

increased by25%

Dev dependency count

36

increased by9.09%

Number of package files

28

decreased by-6.67%

Dependency changes

• + Addedreact-use@17.3.1

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@types/js-cookie@2.2.7(transitive)

• + Added@xobotyi/scrollbar-width@1.9.5(transitive)

• + Addedcopy-to-clipboard@3.3.3(transitive)

• + Addedcss-in-js-utils@3.1.0(transitive)

• + Addedcss-tree@1.1.3(transitive)

• + Addederror-stack-parser@2.1.4(transitive)

• + Addedfast-shallow-equal@1.0.0(transitive)

• + Addedfastest-stable-stringify@2.0.2(transitive)

• + Addedhyphenate-style-name@1.1.0(transitive)

• + Addedinline-style-prefixer@7.0.1(transitive)

• + Addedjs-cookie@2.2.1(transitive)

• + Addedmdn-data@2.0.14(transitive)

• + Addednano-css@5.6.2(transitive)

• + Addedreact-universal-interface@0.6.2(transitive)

• + Addedreact-use@17.3.1(transitive)

• + Addedresize-observer-polyfill@1.5.1(transitive)

• + Addedrtl-css-js@1.16.1(transitive)

• + Addedscreenfull@5.2.0(transitive)

• + Addedset-harmonic-interval@1.0.1(transitive)

• + Addedsource-map@0.5.60.6.1(transitive)

• + Addedstack-generator@2.0.10(transitive)

• + Addedstackframe@1.3.4(transitive)

• + Addedstacktrace-gps@3.1.2(transitive)

• + Addedstacktrace-js@2.0.2(transitive)

• + Addedstylis@4.3.6(transitive)

• + Addedthrottle-debounce@3.0.1(transitive)

• + Addedtoggle-selection@1.0.6(transitive)

• + Addedts-easing@0.2.0(transitive)

• + Addedtslib@2.8.1(transitive)