From eaf6eaaf146166310a8d3d4ad1221e56fe5794e1 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 15 Mar 2023 11:02:55 +0100 Subject: [PATCH 01/36] fix(setEdges): always create new edge objects --- packages/core/src/store/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/store/index.ts b/packages/core/src/store/index.ts index 056957c3..c85225db 100644 --- a/packages/core/src/store/index.ts +++ b/packages/core/src/store/index.ts @@ -33,8 +33,8 @@ const createRFStore = () => return Array.from(get().nodeInternals.values()); }, setEdges: (edges: Edge[]) => { - const { defaultEdgeOptions = null } = get(); - set({ edges: defaultEdgeOptions ? edges.map((e) => ({ ...defaultEdgeOptions, ...e })) : edges }); + const { defaultEdgeOptions = {} } = get(); + set({ edges: edges.map((e) => ({ ...defaultEdgeOptions, ...e })) }); }, setDefaultNodesAndEdges: (nodes?: Node[], edges?: Edge[]) => { const hasDefaultNodes = typeof nodes !== 'undefined'; From c0506a9b631cc6d538be247c17ccc9940ed9d9f3 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 15 Mar 2023 11:39:21 +0100 Subject: [PATCH 02/36] chore(pnpm-lock): update --- pnpm-lock.yaml | 144 ++++++++++++++++++++++++++++--------------------- 1 file changed, 82 insertions(+), 62 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 766ca8fb..a1a1c3d2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,8 +32,8 @@ importers: '@changesets/changelog-github': registry.npmjs.org/@changesets/changelog-github/0.4.7 '@changesets/cli': registry.npmjs.org/@changesets/cli/2.25.0 '@preconstruct/cli': registry.npmjs.org/@preconstruct/cli/2.2.1 - '@typescript-eslint/eslint-plugin': registry.npmjs.org/@typescript-eslint/eslint-plugin/5.50.0_nexu6jj2st6zpwrttn4g5lruue - '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.50.0_id2eilsndvzhjjktb64trvy3gu + '@typescript-eslint/eslint-plugin': registry.npmjs.org/@typescript-eslint/eslint-plugin/5.55.0_yarhzymb3lojuq6uyipzo3xllu + '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.55.0_id2eilsndvzhjjktb64trvy3gu autoprefixer: registry.npmjs.org/autoprefixer/10.4.9_postcss@8.4.21 concurrently: registry.npmjs.org/concurrently/7.6.0 cypress: registry.npmjs.org/cypress/10.7.0 @@ -215,7 +215,7 @@ importers: packages/node-resizer: specifiers: - '@reactflow/core': workspace:^11.3.3 + '@reactflow/core': workspace:^11.6.0 '@reactflow/eslint-config': workspace:* '@reactflow/rollup-config': workspace:* '@reactflow/tsconfig': workspace:* @@ -313,7 +313,7 @@ importers: devDependencies: eslint: registry.npmjs.org/eslint/8.23.1 eslint-config-prettier: registry.npmjs.org/eslint-config-prettier/8.5.0_eslint@8.23.1 - eslint-config-turbo: registry.npmjs.org/eslint-config-turbo/0.0.7_eslint@8.23.1 + eslint-config-turbo: registry.npmjs.org/eslint-config-turbo/0.0.9_eslint@8.23.1 eslint-plugin-react: registry.npmjs.org/eslint-plugin-react/7.32.2_eslint@8.23.1 tooling/rollup-config: @@ -1347,6 +1347,26 @@ packages: dev: true optional: true + registry.npmjs.org/@eslint-community/eslint-utils/4.2.0_eslint@8.23.1: + resolution: {integrity: sha512-gB8T4H4DEfX2IV9zGDJPOBgP1e/DbfCPDTtEqUMckpvzS1OYtva8JdFYBqMwYk7xAQ429WGF/UPqn8uQ//h2vQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.2.0.tgz} + id: registry.npmjs.org/@eslint-community/eslint-utils/4.2.0 + name: '@eslint-community/eslint-utils' + version: 4.2.0 + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + peerDependencies: + eslint: ^6.0.0 || ^7.0.0 || >=8.0.0 + dependencies: + eslint: registry.npmjs.org/eslint/8.23.1 + eslint-visitor-keys: registry.npmjs.org/eslint-visitor-keys/3.3.0 + dev: true + + registry.npmjs.org/@eslint-community/regexpp/4.4.0: + resolution: {integrity: sha512-A9983Q0LnDGdLPjxyXQ00sbV+K+O+ko2Dr+CZigbHWtX9pNfxlaBkMR8X1CztI73zuEyEBXTVjx7CE+/VSwDiQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.4.0.tgz} + name: '@eslint-community/regexpp' + version: 4.4.0 + engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0} + dev: true + registry.npmjs.org/@eslint/eslintrc/1.3.2: resolution: {integrity: sha512-AXYd23w1S/bv3fTs3Lz0vjiYemS08jWkI3hYyS9I1ry+0f+Yjs1wm+sU0BS8qDOPrBIkp4qHYC16I8uVtpLajQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.2.tgz} name: '@eslint/eslintrc' @@ -1357,7 +1377,7 @@ packages: debug: registry.npmjs.org/debug/4.3.4 espree: registry.npmjs.org/espree/9.4.0 globals: registry.npmjs.org/globals/13.17.0 - ignore: registry.npmjs.org/ignore/5.2.0 + ignore: registry.npmjs.org/ignore/5.2.4 import-fresh: registry.npmjs.org/import-fresh/3.3.0 js-yaml: registry.npmjs.org/js-yaml/4.1.0 minimatch: registry.npmjs.org/minimatch/3.1.2 @@ -2194,11 +2214,11 @@ packages: dev: true optional: true - registry.npmjs.org/@typescript-eslint/eslint-plugin/5.50.0_nexu6jj2st6zpwrttn4g5lruue: - resolution: {integrity: sha512-vwksQWSFZiUhgq3Kv7o1Jcj0DUNylwnIlGvKvLLYsq8pAWha6/WCnXUeaSoNNha/K7QSf2+jvmkxggC1u3pIwQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.50.0.tgz} - id: registry.npmjs.org/@typescript-eslint/eslint-plugin/5.50.0 + registry.npmjs.org/@typescript-eslint/eslint-plugin/5.55.0_yarhzymb3lojuq6uyipzo3xllu: + resolution: {integrity: sha512-IZGc50rtbjk+xp5YQoJvmMPmJEYoC53SiKPXyqWfv15XoD2Y5Kju6zN0DwlmaGJp1Iw33JsWJcQ7nw0lGCGjVg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.55.0.tgz} + id: registry.npmjs.org/@typescript-eslint/eslint-plugin/5.55.0 name: '@typescript-eslint/eslint-plugin' - version: 5.50.0 + version: 5.55.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: '@typescript-eslint/parser': ^5.0.0 @@ -2208,16 +2228,16 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.50.0_id2eilsndvzhjjktb64trvy3gu - '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.50.0 - '@typescript-eslint/type-utils': registry.npmjs.org/@typescript-eslint/type-utils/5.50.0_id2eilsndvzhjjktb64trvy3gu - '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.50.0_id2eilsndvzhjjktb64trvy3gu + '@eslint-community/regexpp': registry.npmjs.org/@eslint-community/regexpp/4.4.0 + '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.55.0_id2eilsndvzhjjktb64trvy3gu + '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.55.0 + '@typescript-eslint/type-utils': registry.npmjs.org/@typescript-eslint/type-utils/5.55.0_id2eilsndvzhjjktb64trvy3gu + '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.55.0_id2eilsndvzhjjktb64trvy3gu debug: registry.npmjs.org/debug/4.3.4 eslint: registry.npmjs.org/eslint/8.23.1 grapheme-splitter: registry.npmjs.org/grapheme-splitter/1.0.4 ignore: registry.npmjs.org/ignore/5.2.4 natural-compare-lite: registry.npmjs.org/natural-compare-lite/1.4.0 - regexpp: registry.npmjs.org/regexpp/3.2.0 semver: registry.npmjs.org/semver/7.3.8 tsutils: registry.npmjs.org/tsutils/3.21.0_typescript@4.9.4 typescript: registry.npmjs.org/typescript/4.9.4 @@ -2225,11 +2245,11 @@ packages: - supports-color dev: true - registry.npmjs.org/@typescript-eslint/parser/5.50.0_id2eilsndvzhjjktb64trvy3gu: - resolution: {integrity: sha512-KCcSyNaogUDftK2G9RXfQyOCt51uB5yqC6pkUYqhYh8Kgt+DwR5M0EwEAxGPy/+DH6hnmKeGsNhiZRQxjH71uQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.50.0.tgz} - id: registry.npmjs.org/@typescript-eslint/parser/5.50.0 + registry.npmjs.org/@typescript-eslint/parser/5.55.0_id2eilsndvzhjjktb64trvy3gu: + resolution: {integrity: sha512-ppvmeF7hvdhUUZWSd2EEWfzcFkjJzgNQzVST22nzg958CR+sphy8A6K7LXQZd6V75m1VKjp+J4g/PCEfSCmzhw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.55.0.tgz} + id: registry.npmjs.org/@typescript-eslint/parser/5.55.0 name: '@typescript-eslint/parser' - version: 5.50.0 + version: 5.55.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 @@ -2238,9 +2258,9 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.50.0 - '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.50.0 - '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.50.0_typescript@4.9.4 + '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.55.0 + '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.55.0 + '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.55.0_typescript@4.9.4 debug: registry.npmjs.org/debug/4.3.4 eslint: registry.npmjs.org/eslint/8.23.1 typescript: registry.npmjs.org/typescript/4.9.4 @@ -2248,21 +2268,21 @@ packages: - supports-color dev: true - registry.npmjs.org/@typescript-eslint/scope-manager/5.50.0: - resolution: {integrity: sha512-rt03kaX+iZrhssaT974BCmoUikYtZI24Vp/kwTSy841XhiYShlqoshRFDvN1FKKvU2S3gK+kcBW1EA7kNUrogg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.50.0.tgz} + registry.npmjs.org/@typescript-eslint/scope-manager/5.55.0: + resolution: {integrity: sha512-OK+cIO1ZGhJYNCL//a3ROpsd83psf4dUJ4j7pdNVzd5DmIk+ffkuUIX2vcZQbEW/IR41DYsfJTB19tpCboxQuw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.55.0.tgz} name: '@typescript-eslint/scope-manager' - version: 5.50.0 + version: 5.55.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: - '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.50.0 - '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.50.0 + '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.55.0 + '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.55.0 dev: true - registry.npmjs.org/@typescript-eslint/type-utils/5.50.0_id2eilsndvzhjjktb64trvy3gu: - resolution: {integrity: sha512-dcnXfZ6OGrNCO7E5UY/i0ktHb7Yx1fV6fnQGGrlnfDhilcs6n19eIRcvLBqx6OQkrPaFlDPk3OJ0WlzQfrV0bQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.50.0.tgz} - id: registry.npmjs.org/@typescript-eslint/type-utils/5.50.0 + registry.npmjs.org/@typescript-eslint/type-utils/5.55.0_id2eilsndvzhjjktb64trvy3gu: + resolution: {integrity: sha512-ObqxBgHIXj8rBNm0yh8oORFrICcJuZPZTqtAFh0oZQyr5DnAHZWfyw54RwpEEH+fD8suZaI0YxvWu5tYE/WswA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.55.0.tgz} + id: registry.npmjs.org/@typescript-eslint/type-utils/5.55.0 name: '@typescript-eslint/type-utils' - version: 5.50.0 + version: 5.55.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: '*' @@ -2271,8 +2291,8 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.50.0_typescript@4.9.4 - '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.50.0_id2eilsndvzhjjktb64trvy3gu + '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.55.0_typescript@4.9.4 + '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.55.0_id2eilsndvzhjjktb64trvy3gu debug: registry.npmjs.org/debug/4.3.4 eslint: registry.npmjs.org/eslint/8.23.1 tsutils: registry.npmjs.org/tsutils/3.21.0_typescript@4.9.4 @@ -2281,18 +2301,18 @@ packages: - supports-color dev: true - registry.npmjs.org/@typescript-eslint/types/5.50.0: - resolution: {integrity: sha512-atruOuJpir4OtyNdKahiHZobPKFvZnBnfDiyEaBf6d9vy9visE7gDjlmhl+y29uxZ2ZDgvXijcungGFjGGex7w==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-5.50.0.tgz} + registry.npmjs.org/@typescript-eslint/types/5.55.0: + resolution: {integrity: sha512-M4iRh4AG1ChrOL6Y+mETEKGeDnT7Sparn6fhZ5LtVJF1909D5O4uqK+C5NPbLmpfZ0XIIxCdwzKiijpZUOvOug==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-5.55.0.tgz} name: '@typescript-eslint/types' - version: 5.50.0 + version: 5.55.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true - registry.npmjs.org/@typescript-eslint/typescript-estree/5.50.0_typescript@4.9.4: - resolution: {integrity: sha512-Gq4zapso+OtIZlv8YNAStFtT6d05zyVCK7Fx3h5inlLBx2hWuc/0465C2mg/EQDDU2LKe52+/jN4f0g9bd+kow==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.50.0.tgz} - id: registry.npmjs.org/@typescript-eslint/typescript-estree/5.50.0 + registry.npmjs.org/@typescript-eslint/typescript-estree/5.55.0_typescript@4.9.4: + resolution: {integrity: sha512-I7X4A9ovA8gdpWMpr7b1BN9eEbvlEtWhQvpxp/yogt48fy9Lj3iE3ild/1H3jKBBIYj5YYJmS2+9ystVhC7eaQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.55.0.tgz} + id: registry.npmjs.org/@typescript-eslint/typescript-estree/5.55.0 name: '@typescript-eslint/typescript-estree' - version: 5.50.0 + version: 5.55.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: typescript: '*' @@ -2300,8 +2320,8 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.50.0 - '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.50.0 + '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.55.0 + '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.55.0 debug: registry.npmjs.org/debug/4.3.4 globby: registry.npmjs.org/globby/11.1.0 is-glob: registry.npmjs.org/is-glob/4.0.3 @@ -2312,36 +2332,36 @@ packages: - supports-color dev: true - registry.npmjs.org/@typescript-eslint/utils/5.50.0_id2eilsndvzhjjktb64trvy3gu: - resolution: {integrity: sha512-v/AnUFImmh8G4PH0NDkf6wA8hujNNcrwtecqW4vtQ1UOSNBaZl49zP1SHoZ/06e+UiwzHpgb5zP5+hwlYYWYAw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.50.0.tgz} - id: registry.npmjs.org/@typescript-eslint/utils/5.50.0 + registry.npmjs.org/@typescript-eslint/utils/5.55.0_id2eilsndvzhjjktb64trvy3gu: + resolution: {integrity: sha512-FkW+i2pQKcpDC3AY6DU54yl8Lfl14FVGYDgBTyGKB75cCwV3KpkpTMFi9d9j2WAJ4271LR2HeC5SEWF/CZmmfw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.55.0.tgz} + id: registry.npmjs.org/@typescript-eslint/utils/5.55.0 name: '@typescript-eslint/utils' - version: 5.50.0 + version: 5.55.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 dependencies: + '@eslint-community/eslint-utils': registry.npmjs.org/@eslint-community/eslint-utils/4.2.0_eslint@8.23.1 '@types/json-schema': registry.npmjs.org/@types/json-schema/7.0.11 '@types/semver': registry.npmjs.org/@types/semver/7.3.13 - '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.50.0 - '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.50.0 - '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.50.0_typescript@4.9.4 + '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.55.0 + '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.55.0 + '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.55.0_typescript@4.9.4 eslint: registry.npmjs.org/eslint/8.23.1 eslint-scope: registry.npmjs.org/eslint-scope/5.1.1 - eslint-utils: registry.npmjs.org/eslint-utils/3.0.0_eslint@8.23.1 semver: registry.npmjs.org/semver/7.3.8 transitivePeerDependencies: - supports-color - typescript dev: true - registry.npmjs.org/@typescript-eslint/visitor-keys/5.50.0: - resolution: {integrity: sha512-cdMeD9HGu6EXIeGOh2yVW6oGf9wq8asBgZx7nsR/D36gTfQ0odE5kcRYe5M81vjEFAcPeugXrHg78Imu55F6gg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.50.0.tgz} + registry.npmjs.org/@typescript-eslint/visitor-keys/5.55.0: + resolution: {integrity: sha512-q2dlHHwWgirKh1D3acnuApXG+VNXpEY5/AwRxDVuEQpxWaB0jCDe0jFMVMALJ3ebSfuOVE8/rMS+9ZOYGg1GWw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.55.0.tgz} name: '@typescript-eslint/visitor-keys' - version: 5.50.0 + version: 5.55.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: - '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.50.0 + '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.55.0 eslint-visitor-keys: registry.npmjs.org/eslint-visitor-keys/3.3.0 dev: true @@ -3700,16 +3720,16 @@ packages: eslint: registry.npmjs.org/eslint/8.23.1 dev: true - registry.npmjs.org/eslint-config-turbo/0.0.7_eslint@8.23.1: - resolution: {integrity: sha512-WbrGlyfs94rOXrhombi1wjIAYGdV2iosgJRndOZtmDQeq5GLTzYmBUCJQZWtLBEBUPCj96RxZ2OL7Cn+xv/Azg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-config-turbo/-/eslint-config-turbo-0.0.7.tgz} - id: registry.npmjs.org/eslint-config-turbo/0.0.7 + registry.npmjs.org/eslint-config-turbo/0.0.9_eslint@8.23.1: + resolution: {integrity: sha512-j1cTdx3tRmKo0csyfQKhpuT8dynK9oddbK5nmrShoMpXI2qMbxHLYH7MWAid4FmJN8rYympy3VKw5U63Yazycg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-config-turbo/-/eslint-config-turbo-0.0.9.tgz} + id: registry.npmjs.org/eslint-config-turbo/0.0.9 name: eslint-config-turbo - version: 0.0.7 + version: 0.0.9 peerDependencies: eslint: '>6.6.0' dependencies: eslint: registry.npmjs.org/eslint/8.23.1 - eslint-plugin-turbo: registry.npmjs.org/eslint-plugin-turbo/0.0.7_eslint@8.23.1 + eslint-plugin-turbo: registry.npmjs.org/eslint-plugin-turbo/0.0.9_eslint@8.23.1 dev: true registry.npmjs.org/eslint-plugin-prettier/4.2.1_cabrci5exjdaojcvd6xoxgeowu: @@ -3759,11 +3779,11 @@ packages: string.prototype.matchall: registry.npmjs.org/string.prototype.matchall/4.0.8 dev: true - registry.npmjs.org/eslint-plugin-turbo/0.0.7_eslint@8.23.1: - resolution: {integrity: sha512-iajOH8eD4jha3duztGVBD1BEmvNrQBaA/y3HFHf91vMDRYRwH7BpHSDFtxydDpk5ghlhRxG299SFxz7D6z4MBQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-plugin-turbo/-/eslint-plugin-turbo-0.0.7.tgz} - id: registry.npmjs.org/eslint-plugin-turbo/0.0.7 + registry.npmjs.org/eslint-plugin-turbo/0.0.9_eslint@8.23.1: + resolution: {integrity: sha512-fEsuSnYU3GLtT+s66mUuzDL1LaSieIx5uk3tPO0ToGv7hI2XzOfP24aPkQItTBGl7kq2JaVkRzPwcnfz8hkp0w==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-plugin-turbo/-/eslint-plugin-turbo-0.0.9.tgz} + id: registry.npmjs.org/eslint-plugin-turbo/0.0.9 name: eslint-plugin-turbo - version: 0.0.7 + version: 0.0.9 peerDependencies: eslint: '>6.6.0' dependencies: From 29790476d800269e363c8a5cae69cb3cbb39b3bf Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 15 Mar 2023 12:02:34 +0100 Subject: [PATCH 03/36] chore(packages): bump --- packages/background/CHANGELOG.md | 6 ++++++ packages/background/package.json | 2 +- packages/controls/CHANGELOG.md | 6 ++++++ packages/controls/package.json | 2 +- packages/core/CHANGELOG.md | 6 ++++++ packages/core/package.json | 2 +- packages/minimap/CHANGELOG.md | 6 ++++++ packages/minimap/package.json | 2 +- packages/node-toolbar/CHANGELOG.md | 6 ++++++ packages/node-toolbar/package.json | 2 +- packages/reactflow/CHANGELOG.md | 6 ++++++ packages/reactflow/package.json | 2 +- 12 files changed, 42 insertions(+), 6 deletions(-) diff --git a/packages/background/CHANGELOG.md b/packages/background/CHANGELOG.md index d179fca5..ab3e23a6 100644 --- a/packages/background/CHANGELOG.md +++ b/packages/background/CHANGELOG.md @@ -1,5 +1,11 @@ # @reactflow/background +## 11.1.10 + +### Patch Changes + +- Updated dependencies + ## 11.1.9 ### Patch Changes diff --git a/packages/background/package.json b/packages/background/package.json index 5f2a889f..ade3b286 100644 --- a/packages/background/package.json +++ b/packages/background/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/background", - "version": "11.1.9", + "version": "11.1.10", "description": "Background component with different variants for React Flow", "keywords": [ "react", diff --git a/packages/controls/CHANGELOG.md b/packages/controls/CHANGELOG.md index 373d9973..167f3d80 100644 --- a/packages/controls/CHANGELOG.md +++ b/packages/controls/CHANGELOG.md @@ -1,5 +1,11 @@ # @reactflow/controls +## 11.1.10 + +### Patch Changes + +- Updated dependencies + ## 11.1.9 ### Patch Changes diff --git a/packages/controls/package.json b/packages/controls/package.json index 5f01e229..6ca64cac 100644 --- a/packages/controls/package.json +++ b/packages/controls/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/controls", - "version": "11.1.9", + "version": "11.1.10", "description": "Component to control the viewport of a React Flow instance", "keywords": [ "react", diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 5adab66f..b3491d4c 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,11 @@ # @reactflow/core +## 11.6.1 + +### Patch Changes + +- Always create new edge object (fixes an issue with Redux toolkit and other immutable helper libs) + ## 11.6.0 ### Minor Changes diff --git a/packages/core/package.json b/packages/core/package.json index eb444565..1f8b0e4d 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/core", - "version": "11.6.0", + "version": "11.6.1", "description": "Core components and util functions of React Flow.", "keywords": [ "react", diff --git a/packages/minimap/CHANGELOG.md b/packages/minimap/CHANGELOG.md index a1a322a9..955cdf31 100644 --- a/packages/minimap/CHANGELOG.md +++ b/packages/minimap/CHANGELOG.md @@ -1,5 +1,11 @@ # @reactflow/minimap +## 11.4.1 + +### Patch Changes + +- Updated dependencies + ## 11.4.0 ### Minor Changes diff --git a/packages/minimap/package.json b/packages/minimap/package.json index 81f0ff1c..6e9124e3 100644 --- a/packages/minimap/package.json +++ b/packages/minimap/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/minimap", - "version": "11.4.0", + "version": "11.4.1", "description": "Minimap component for React Flow.", "keywords": [ "react", diff --git a/packages/node-toolbar/CHANGELOG.md b/packages/node-toolbar/CHANGELOG.md index 7fc031e2..113cae08 100644 --- a/packages/node-toolbar/CHANGELOG.md +++ b/packages/node-toolbar/CHANGELOG.md @@ -1,5 +1,11 @@ # @reactflow/node-toolbar +## 1.1.10 + +### Patch Changes + +- Updated dependencies + ## 1.1.9 ### Patch Changes diff --git a/packages/node-toolbar/package.json b/packages/node-toolbar/package.json index 35378ec0..7e1c5645 100644 --- a/packages/node-toolbar/package.json +++ b/packages/node-toolbar/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/node-toolbar", - "version": "1.1.9", + "version": "1.1.10", "description": "A toolbar component for React Flow that can be attached to a node.", "keywords": [ "react", diff --git a/packages/reactflow/CHANGELOG.md b/packages/reactflow/CHANGELOG.md index b8d6693f..80e8e7b6 100644 --- a/packages/reactflow/CHANGELOG.md +++ b/packages/reactflow/CHANGELOG.md @@ -1,5 +1,11 @@ # reactflow +## 11.6.1 + +### Patch Changes + +- Always create new edge object (fixes an issue with Redux toolkit and other immutable helper libs) + ## 11.6.0 This release introduces a new `isValidConnection` prop for the ReactFlow component. You no longer need to pass it to all your Handle components but can pass it once. We also added a new option for the `updateEdge` function that allows you to specify if you want to replace an id when updating it. More over the `MiniMap` got a new `nodeComponent` prop to pass a custom component for the mini map nodes. diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json index 2663a4cd..479777d2 100644 --- a/packages/reactflow/package.json +++ b/packages/reactflow/package.json @@ -1,6 +1,6 @@ { "name": "reactflow", - "version": "11.6.0", + "version": "11.6.1", "description": "A highly customizable React library for building node-based editors and interactive flow charts", "keywords": [ "react", From 9fab9b82b4956d353e4e1e1ef7bd3b5cabcff590 Mon Sep 17 00:00:00 2001 From: Artyom Sovetnikov <2056864+Elringus@users.noreply.github.com> Date: Sat, 18 Mar 2023 19:14:16 +0300 Subject: [PATCH 04/36] make wheel listener non-passive explicitly --- packages/core/src/container/ZoomPane/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx index 7163cd35..6062d6dc 100644 --- a/packages/core/src/container/ZoomPane/index.tsx +++ b/packages/core/src/container/ZoomPane/index.tsx @@ -140,7 +140,7 @@ const ZoomPane = ({ -(deltaX / currentZoom) * panOnScrollSpeed, -(deltaY / currentZoom) * panOnScrollSpeed ); - }); + }, { passive: false }); } else if (typeof d3ZoomHandler !== 'undefined') { d3Selection.on('wheel.zoom', function (event: any, d: any) { if (!preventScrolling || isWrappedWithClass(event, noWheelClassName)) { @@ -149,7 +149,7 @@ const ZoomPane = ({ event.preventDefault(); d3ZoomHandler.call(this, event, d); - }); + }, { passive: false }); } } }, [ From e09dd87e7758d7a197353535c7cf2d2f2bc6c518 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 20 Mar 2023 11:19:32 +0100 Subject: [PATCH 05/36] refactor(error-messages): prefix error keys with error closes #2919 --- packages/core/src/components/Handle/index.tsx | 2 +- .../container/EdgeRenderer/MarkerSymbols.tsx | 2 +- .../core/src/container/EdgeRenderer/index.tsx | 4 ++-- .../core/src/container/NodeRenderer/index.tsx | 2 +- .../core/src/container/ReactFlow/utils.ts | 2 +- packages/core/src/contants.ts | 22 +++++++++---------- packages/core/src/hooks/useDrag/utils.ts | 2 +- packages/core/src/hooks/useResizeHandler.ts | 2 +- packages/core/src/hooks/useStore.ts | 2 +- packages/core/src/utils/graph.ts | 13 +++++++---- 10 files changed, 29 insertions(+), 24 deletions(-) diff --git a/packages/core/src/components/Handle/index.tsx b/packages/core/src/components/Handle/index.tsx index e2d57d4d..c66f5272 100644 --- a/packages/core/src/components/Handle/index.tsx +++ b/packages/core/src/components/Handle/index.tsx @@ -43,7 +43,7 @@ const Handle = forwardRef( const nodeId = useNodeId(); if (!nodeId) { - store.getState().onError?.('010', errorMessages['010']()); + store.getState().onError?.('010', errorMessages['error010']()); return null; } diff --git a/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx b/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx index aa561242..f4d86a07 100644 --- a/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx +++ b/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx @@ -45,7 +45,7 @@ export function useMarkerSymbol(type: MarkerType) { const symbolExists = Object.prototype.hasOwnProperty.call(MarkerSymbols, type); if (!symbolExists) { - store.getState().onError?.('009', errorMessages['009'](type)); + store.getState().onError?.('009', errorMessages['error009'](type)); return null; } diff --git a/packages/core/src/container/EdgeRenderer/index.tsx b/packages/core/src/container/EdgeRenderer/index.tsx index ddc4aa4d..09b8f0c6 100644 --- a/packages/core/src/container/EdgeRenderer/index.tsx +++ b/packages/core/src/container/EdgeRenderer/index.tsx @@ -99,7 +99,7 @@ const EdgeRenderer = ({ let edgeType = edge.type || 'default'; if (!edgeTypes[edgeType]) { - onError?.('011', errorMessages['011'](edgeType)); + onError?.('011', errorMessages['error011'](edgeType)); edgeType = 'default'; } @@ -116,7 +116,7 @@ const EdgeRenderer = ({ const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined')); if (!sourceHandle || !targetHandle) { - onError?.('008', errorMessages['008'](sourceHandle, edge)); + onError?.('008', errorMessages['error008'](sourceHandle, edge)); return null; } diff --git a/packages/core/src/container/NodeRenderer/index.tsx b/packages/core/src/container/NodeRenderer/index.tsx index ab35cb74..0b4c03c6 100644 --- a/packages/core/src/container/NodeRenderer/index.tsx +++ b/packages/core/src/container/NodeRenderer/index.tsx @@ -78,7 +78,7 @@ const NodeRenderer = (props: NodeRendererProps) => { let nodeType = node.type || 'default'; if (!props.nodeTypes[nodeType]) { - onError?.('003', errorMessages['003'](nodeType)); + onError?.('003', errorMessages['error003'](nodeType)); nodeType = 'default'; } diff --git a/packages/core/src/container/ReactFlow/utils.ts b/packages/core/src/container/ReactFlow/utils.ts index cc5ab36d..9b52e135 100644 --- a/packages/core/src/container/ReactFlow/utils.ts +++ b/packages/core/src/container/ReactFlow/utils.ts @@ -17,7 +17,7 @@ export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any if (process.env.NODE_ENV === 'development') { const typeKeys = Object.keys(nodeOrEdgeTypes); if (shallow(typesKeysRef.current, typeKeys)) { - devWarn('002', errorMessages['002']()); + devWarn('002', errorMessages['error002']()); } typesKeysRef.current = typeKeys; diff --git a/packages/core/src/contants.ts b/packages/core/src/contants.ts index 815ac6f0..54c4a696 100644 --- a/packages/core/src/contants.ts +++ b/packages/core/src/contants.ts @@ -1,20 +1,20 @@ import { Edge, HandleElement } from './types'; export const errorMessages = { - '001': () => + error001: () => '[React Flow]: Seems like you have not used zustand provider as an ancestor. Help: https://reactflow.dev/error#001', - '002': () => + error002: () => "It looks like you've created a new nodeTypes or edgeTypes object. If this wasn't on purpose please define the nodeTypes/edgeTypes outside of the component or memoize them.", - '003': (nodeType: string) => `Node type "${nodeType}" not found. Using fallback type "default".`, - '004': () => 'The React Flow parent container needs a width and a height to render the graph.', - '005': () => 'Only child nodes can use a parent extent.', - '006': () => "Can't create edge. An edge needs a source and a target.", - '007': (id: string) => `The old edge with id=${id} does not exist.`, - '009': (type: string) => `Marker type "${type}" doesn't exist.`, - '008': (sourceHandle: HandleElement | null, edge: Edge) => + error003: (nodeType: string) => `Node type "${nodeType}" not found. Using fallback type "default".`, + error004: () => 'The React Flow parent container needs a width and a height to render the graph.', + error005: () => 'Only child nodes can use a parent extent.', + error006: () => "Can't create edge. An edge needs a source and a target.", + error007: (id: string) => `The old edge with id=${id} does not exist.`, + error009: (type: string) => `Marker type "${type}" doesn't exist.`, + error008: (sourceHandle: HandleElement | null, edge: Edge) => `Couldn't create edge for ${!sourceHandle ? 'source' : 'target'} handle id: "${ !sourceHandle ? edge.sourceHandle : edge.targetHandle }", edge id: ${edge.id}.`, - '010': () => 'Handle: No node id found. Make sure to only use a Handle inside a custom Node.', - '011': (edgeType: string) => `Edge type "${edgeType}" not found. Using fallback type "default".`, + error010: () => 'Handle: No node id found. Make sure to only use a Handle inside a custom Node.', + error011: (edgeType: string) => `Edge type "${edgeType}" not found. Using fallback type "default".`, }; diff --git a/packages/core/src/hooks/useDrag/utils.ts b/packages/core/src/hooks/useDrag/utils.ts index 5ef3b3b2..50882d2e 100644 --- a/packages/core/src/hooks/useDrag/utils.ts +++ b/packages/core/src/hooks/useDrag/utils.ts @@ -93,7 +93,7 @@ export function calcNextPosition( ] : currentExtent; } else { - onError?.('005', errorMessages['005']()); + onError?.('005', errorMessages['error005']()); currentExtent = nodeExtent; } diff --git a/packages/core/src/hooks/useResizeHandler.ts b/packages/core/src/hooks/useResizeHandler.ts index a6d6d921..5691ca43 100644 --- a/packages/core/src/hooks/useResizeHandler.ts +++ b/packages/core/src/hooks/useResizeHandler.ts @@ -19,7 +19,7 @@ function useResizeHandler(rendererNode: MutableRefObject) const size = getDimensions(rendererNode.current); if (size.height === 0 || size.width === 0) { - store.getState().onError?.('004', errorMessages['004']()); + store.getState().onError?.('004', errorMessages['error004']()); } store.setState({ width: size.width || 500, height: size.height || 500 }); diff --git a/packages/core/src/hooks/useStore.ts b/packages/core/src/hooks/useStore.ts index 3983579d..3ad18d59 100644 --- a/packages/core/src/hooks/useStore.ts +++ b/packages/core/src/hooks/useStore.ts @@ -6,7 +6,7 @@ import StoreContext from '../contexts/RFStoreContext'; import { errorMessages } from '../contants'; import type { ReactFlowState } from '../types'; -const zustandErrorMessage = errorMessages['001'](); +const zustandErrorMessage = errorMessages['error001'](); type ExtractState = StoreApi extends { getState: () => infer T } ? T : never; diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts index 0d28d659..2db9fc09 100644 --- a/packages/core/src/utils/graph.ts +++ b/packages/core/src/utils/graph.ts @@ -72,7 +72,7 @@ const connectionExists = (edge: Edge, edges: Edge[]) => { export const addEdge = (edgeParams: Edge | Connection, edges: Edge[]): Edge[] => { if (!edgeParams.source || !edgeParams.target) { - devWarn('006', errorMessages['006']()); + devWarn('006', errorMessages['error006']()); return edges; } @@ -94,11 +94,16 @@ export const addEdge = (edgeParams: Edge | Connection, edges: Edge[]): Edge[] => return edges.concat(edge); }; -export const updateEdge = (oldEdge: Edge, newConnection: Connection, edges: Edge[], options: UpdateEdgeOptions = { shouldReplaceId: true }): Edge[] => { +export const updateEdge = ( + oldEdge: Edge, + newConnection: Connection, + edges: Edge[], + options: UpdateEdgeOptions = { shouldReplaceId: true } +): Edge[] => { const { id: oldEdgeId, ...rest } = oldEdge; if (!newConnection.source || !newConnection.target) { - devWarn('006', errorMessages['006']()); + devWarn('006', errorMessages['error006']()); return edges; } @@ -106,7 +111,7 @@ export const updateEdge = (oldEdge: Edge, newConnection: Connection, edges: Edge const foundEdge = edges.find((e) => e.id === oldEdgeId) as Edge; if (!foundEdge) { - devWarn('007', errorMessages['007'](oldEdgeId)); + devWarn('007', errorMessages['error007'](oldEdgeId)); return edges; } From fe8cac0adb359109e0e9eafe8b9261ba354076bb Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 20 Mar 2023 11:20:12 +0100 Subject: [PATCH 06/36] chore(changeset): add --- .changeset/nice-impalas-doubt.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/nice-impalas-doubt.md diff --git a/.changeset/nice-impalas-doubt.md b/.changeset/nice-impalas-doubt.md new file mode 100644 index 00000000..27d35bc6 --- /dev/null +++ b/.changeset/nice-impalas-doubt.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +prefix error keys with "error" From 098eee3d41dabc870777b081796401ff13b5a776 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 20 Mar 2023 11:34:32 +0100 Subject: [PATCH 07/36] chore(changeset): add --- .changeset/many-parents-applaud.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/many-parents-applaud.md diff --git a/.changeset/many-parents-applaud.md b/.changeset/many-parents-applaud.md new file mode 100644 index 00000000..3c4aad42 --- /dev/null +++ b/.changeset/many-parents-applaud.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +fix non-passive wheel event listener violation From 0f2eee77065bdb1d395ca2ed23e137bd651af8ef Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 20 Mar 2023 17:33:15 +0100 Subject: [PATCH 08/36] chore(store): add current connection result closes #2916 --- examples/vite-app/package.json | 3 +- .../examples/Validation/ConnectionStatus.tsx | 42 +++++++++++++++++++ .../src/examples/Validation/index.tsx | 6 ++- .../examples/Validation/validation.module.css | 7 ++++ .../core/src/components/Handle/handler.ts | 4 ++ packages/core/src/store/index.ts | 2 + packages/core/src/store/initialState.ts | 2 + packages/core/src/types/general.ts | 4 +- pnpm-lock.yaml | 2 + 9 files changed, 69 insertions(+), 3 deletions(-) create mode 100644 examples/vite-app/src/examples/Validation/ConnectionStatus.tsx diff --git a/examples/vite-app/package.json b/examples/vite-app/package.json index 7a87f510..5b5d4762 100644 --- a/examples/vite-app/package.json +++ b/examples/vite-app/package.json @@ -21,7 +21,8 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.3.0", - "reactflow": "workspace:*" + "reactflow": "workspace:*", + "zustand": "^4.3.1" }, "devDependencies": { "@cypress/skip-test": "^2.6.1", diff --git a/examples/vite-app/src/examples/Validation/ConnectionStatus.tsx b/examples/vite-app/src/examples/Validation/ConnectionStatus.tsx new file mode 100644 index 00000000..4102b9a7 --- /dev/null +++ b/examples/vite-app/src/examples/Validation/ConnectionStatus.tsx @@ -0,0 +1,42 @@ +import { ReactFlowState, useStore } from 'reactflow'; +import { shallow } from 'zustand/shallow'; + +import styles from './validation.module.css'; + +const selector = (state: ReactFlowState) => ({ + connectionPosition: state.connectionPosition, + connectionStatus: state.connectionStatus, + connectionNodeId: state.connectionNodeId, + connectionTargetNodeId: state.connectionTargetNodeId, +}); + +function ConnectionStatus() { + const { connectionPosition, connectionStatus, connectionNodeId, connectionTargetNodeId } = useStore( + selector, + shallow + ); + + if (!connectionPosition) { + return null; + } + + return ( +
+ {connectionNodeId ? ( + <> +
+ connection info +
+
position: {JSON.stringify(connectionPosition)}
+
status: {JSON.stringify(connectionStatus)}
+
source node id: {JSON.stringify(connectionNodeId)}
+
target node id: {JSON.stringify(connectionTargetNodeId)}
+ + ) : ( + 'no connection data' + )} +
+ ); +} + +export default ConnectionStatus; diff --git a/examples/vite-app/src/examples/Validation/index.tsx b/examples/vite-app/src/examples/Validation/index.tsx index c55d8178..ed2b5419 100644 --- a/examples/vite-app/src/examples/Validation/index.tsx +++ b/examples/vite-app/src/examples/Validation/index.tsx @@ -16,6 +16,8 @@ import ReactFlow, { Edge, } from 'reactflow'; +import ConnectionStatus from './ConnectionStatus'; + import styles from './validation.module.css'; const initialNodes: Node[] = [ @@ -96,7 +98,9 @@ const ValidationFlow = () => { onEdgeUpdate={onEdgeUpdate} isValidConnection={isValidConnection} fitView - /> + > + + ); }; diff --git a/examples/vite-app/src/examples/Validation/validation.module.css b/examples/vite-app/src/examples/Validation/validation.module.css index 63d58eee..c19a8723 100644 --- a/examples/vite-app/src/examples/Validation/validation.module.css +++ b/examples/vite-app/src/examples/Validation/validation.module.css @@ -39,3 +39,10 @@ .validationflow :global .invalid .react-flow__connection-path { stroke: #ff6060; } + +.connectionstatus { + position: absolute; + bottom: 20px; + left: 50%; + transform: translateX(-50%); +} diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts index 46cc64e9..84effd91 100644 --- a/packages/core/src/components/Handle/handler.ts +++ b/packages/core/src/components/Handle/handler.ts @@ -93,6 +93,8 @@ export function handlePointerDown({ connectionHandleId: handleId, connectionHandleType: handleType, connectionStatus: null, + connectionTargetNodeId: null, + connectionTargetHandeId: null, }); onConnectStart?.(event, { nodeId, handleId, handleType }); @@ -139,6 +141,8 @@ export function handlePointerDown({ ) : connectionPosition, connectionStatus: getConnectionStatus(!!prevClosestHandle, isValid), + connectionTargetNodeId: connection.target, + connectionTargetHandleId: connection.targetHandle, }); if (!prevClosestHandle && !isValid && !handleDomNode) { diff --git a/packages/core/src/store/index.ts b/packages/core/src/store/index.ts index c85225db..58cc5080 100644 --- a/packages/core/src/store/index.ts +++ b/packages/core/src/store/index.ts @@ -275,6 +275,8 @@ const createRFStore = () => connectionHandleId: initialState.connectionHandleId, connectionHandleType: initialState.connectionHandleType, connectionStatus: initialState.connectionStatus, + connectionTargetNodeId: initialState.connectionTargetNodeId, + connectionTargetHandleId: initialState.connectionTargetHandleId, }), reset: () => set({ ...initialState }), })); diff --git a/packages/core/src/store/initialState.ts b/packages/core/src/store/initialState.ts index 55aca27f..2722038d 100644 --- a/packages/core/src/store/initialState.ts +++ b/packages/core/src/store/initialState.ts @@ -31,6 +31,8 @@ const initialState: ReactFlowStore = { connectionNodeId: null, connectionHandleId: null, connectionHandleType: 'source', + connectionTargetNodeId: null, + connectionTargetHandleId: null, connectionPosition: { x: 0, y: 0 }, connectionStatus: null, connectionMode: ConnectionMode.Strict, diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index 549228a8..fab391d0 100644 --- a/packages/core/src/types/general.ts +++ b/packages/core/src/types/general.ts @@ -169,6 +169,8 @@ export type ReactFlowStore = { connectionNodeId: string | null; connectionHandleId: string | null; + connectionTargetNodeId: string | null; + connectionTargetHandleId: string | null; connectionHandleType: HandleType | null; connectionPosition: XYPosition; connectionStatus: ConnectionStatus | null; @@ -284,4 +286,4 @@ export type OnError = (id: string, message: string) => void; export interface UpdateEdgeOptions { shouldReplaceId?: boolean; -} \ No newline at end of file +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a1a1c3d2..3c4975fe 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -74,6 +74,7 @@ importers: start-server-and-test: ^1.14.0 typescript: ^4.9.4 vite: ^4.0.4 + zustand: ^4.3.1 dependencies: '@reactflow/node-resizer': link:../../packages/node-resizer classcat: registry.npmjs.org/classcat/5.0.4 @@ -83,6 +84,7 @@ importers: react-dom: registry.npmjs.org/react-dom/18.2.0_react@18.2.0 react-router-dom: registry.npmjs.org/react-router-dom/6.3.0_biqbaboplfbrettd7655fr4n2y reactflow: link:../../packages/reactflow + zustand: registry.npmjs.org/zustand/4.3.1_react@18.2.0 devDependencies: '@cypress/skip-test': registry.npmjs.org/@cypress/skip-test/2.6.1 '@types/dagre': registry.npmjs.org/@types/dagre/0.7.48 From ee8e618c9db7bf7acc7211d9f557294d3a59eaed Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 20 Mar 2023 17:35:38 +0100 Subject: [PATCH 09/36] chore(store): fix typo --- packages/core/src/components/Handle/handler.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts index 84effd91..3ad191b8 100644 --- a/packages/core/src/components/Handle/handler.ts +++ b/packages/core/src/components/Handle/handler.ts @@ -94,7 +94,7 @@ export function handlePointerDown({ connectionHandleType: handleType, connectionStatus: null, connectionTargetNodeId: null, - connectionTargetHandeId: null, + connectionTargetHandleId: null, }); onConnectStart?.(event, { nodeId, handleId, handleType }); From 4a4ca171955f5c8d58b23e3ad48406f1a21dc402 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 20 Mar 2023 17:36:12 +0100 Subject: [PATCH 10/36] chore(changeset): add --- .changeset/plenty-students-wash.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/plenty-students-wash.md diff --git a/.changeset/plenty-students-wash.md b/.changeset/plenty-students-wash.md new file mode 100644 index 00000000..72da2068 --- /dev/null +++ b/.changeset/plenty-students-wash.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +add connection result to store From dedf0046b559461223b94f733f9b1e68b99fc37d Mon Sep 17 00:00:00 2001 From: Artyom Sovetnikov <2056864+Elringus@users.noreply.github.com> Date: Tue, 21 Mar 2023 02:40:38 +0300 Subject: [PATCH 11/36] add id and offset to background props --- packages/background/src/Background.tsx | 16 +++++++++------- packages/background/src/types.ts | 2 ++ 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/background/src/Background.tsx b/packages/background/src/Background.tsx index bf8a4336..e0efd77b 100644 --- a/packages/background/src/Background.tsx +++ b/packages/background/src/Background.tsx @@ -21,12 +21,14 @@ const defaultSize = { const selector = (s: ReactFlowState) => ({ transform: s.transform, patternId: `pattern-${s.rfId}` }); function Background({ + id, variant = BackgroundVariant.Dots, - gap = 20, // only used for dots and cross - size, + gap = 20, // only used for lines and cross + size, lineWidth = 1, + offset = 2, color, style, className, @@ -44,8 +46,8 @@ function Background({ const patternDimensions: [number, number] = isCross ? [scaledSize, scaledSize] : scaledGap; const patternOffset = isDots - ? [scaledSize / 2, scaledSize / 2] - : [patternDimensions[0] / 2, patternDimensions[1] / 2]; + ? [scaledSize / offset, scaledSize / offset] + : [patternDimensions[0] / offset, patternDimensions[1] / offset]; return ( {isDots ? ( - + ) : ( )} - + ); } diff --git a/packages/background/src/types.ts b/packages/background/src/types.ts index 6f9a7155..f4cae1b5 100644 --- a/packages/background/src/types.ts +++ b/packages/background/src/types.ts @@ -7,10 +7,12 @@ export enum BackgroundVariant { } export type BackgroundProps = { + id?: string color?: string; className?: string; gap?: number | [number, number]; size?: number; + offset?: number; lineWidth?: number; variant?: BackgroundVariant; style?: CSSProperties; From a863e5b94d991850c7bcf0ecb919ca00fc3acdd8 Mon Sep 17 00:00:00 2001 From: Artyom Sovetnikov <2056864+Elringus@users.noreply.github.com> Date: Tue, 21 Mar 2023 02:40:47 +0300 Subject: [PATCH 12/36] add multiple backs sample --- examples/vite-app/src/examples/Backgrounds/index.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/examples/vite-app/src/examples/Backgrounds/index.tsx b/examples/vite-app/src/examples/Backgrounds/index.tsx index c7783b00..8d6b7280 100644 --- a/examples/vite-app/src/examples/Backgrounds/index.tsx +++ b/examples/vite-app/src/examples/Backgrounds/index.tsx @@ -19,13 +19,13 @@ const initialNodes: Node[] = [ }, ]; -const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({ id, bgProps }) => { +const Flow: FC<{ id: string; bgProps: BackgroundProps[] }> = ({ id, bgProps }) => { const [nodes, , onNodesChange] = useNodesState(initialNodes); return ( - + {bgProps.map((props, idx) => )} ); @@ -33,9 +33,11 @@ const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({ id, bgProps }) => const Backgrounds: FC = () => (
- - - + + + +
); From 25b25f7d5129b7856c956b84de9dc32b42e444ed Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 21 Mar 2023 11:44:39 +0100 Subject: [PATCH 13/36] chore(examples): format --- .../vite-app/src/examples/Backgrounds/index.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/examples/vite-app/src/examples/Backgrounds/index.tsx b/examples/vite-app/src/examples/Backgrounds/index.tsx index 8d6b7280..0cbabf0a 100644 --- a/examples/vite-app/src/examples/Backgrounds/index.tsx +++ b/examples/vite-app/src/examples/Backgrounds/index.tsx @@ -25,7 +25,9 @@ const Flow: FC<{ id: string; bgProps: BackgroundProps[] }> = ({ id, bgProps }) = return ( - {bgProps.map((props, idx) => )} + {bgProps.map((props, idx) => ( + + ))} ); @@ -36,8 +38,13 @@ const Backgrounds: FC = () => ( - + ); From 771c7a5d133ce96e9f7471394c15189e0657ce01 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 21 Mar 2023 11:45:17 +0100 Subject: [PATCH 14/36] chore(changeset): add --- .changeset/two-walls-jam.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/two-walls-jam.md diff --git a/.changeset/two-walls-jam.md b/.changeset/two-walls-jam.md new file mode 100644 index 00000000..9c2eb07a --- /dev/null +++ b/.changeset/two-walls-jam.md @@ -0,0 +1,5 @@ +--- +'@reactflow/background': patch +--- + +add id and offset prop From 9303bf1b321ba7f13027536f779fde6c9b731a72 Mon Sep 17 00:00:00 2001 From: Artyom Sovetnikov <2056864+Elringus@users.noreply.github.com> Date: Tue, 21 Mar 2023 16:27:01 +0300 Subject: [PATCH 15/36] add inverse pan to minimap --- .../vite-app/src/examples/InteractiveMinimap/index.tsx | 7 +++++-- packages/minimap/src/MiniMap.tsx | 6 ++++-- packages/minimap/src/types.ts | 1 + 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx index 18fa854a..fe920156 100644 --- a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx +++ b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx @@ -1,4 +1,4 @@ -import { MouseEvent, useCallback } from 'react'; +import { MouseEvent, useCallback, useState } from "react"; import ReactFlow, { MiniMap, Background, @@ -87,6 +87,7 @@ const defaultEdgeOptions = { zIndex: 0 }; const BasicFlow = () => { const instance = useReactFlow(); + const [inverse, setInverse] = useState(false); const updatePos = () => { instance.setNodes((nodes) => @@ -137,7 +138,8 @@ const BasicFlow = () => { fitView > - +
@@ -151,6 +153,7 @@ const BasicFlow = () => { toggle classnames +
); diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx index 59b3f34d..a0743d5d 100644 --- a/packages/minimap/src/MiniMap.tsx +++ b/packages/minimap/src/MiniMap.tsx @@ -67,6 +67,7 @@ function MiniMap({ pannable = false, zoomable = false, ariaLabel = 'React Flow mini map', + inversePan = false }: MiniMapProps) { const store = useStoreApi(); const svg = useRef(null); @@ -120,9 +121,10 @@ function MiniMap({ } // @TODO: how to calculate the correct next position? Math.max(1, transform[2]) is a workaround. + const moveScale = viewScaleRef.current * Math.max(1, transform[2]) * (inversePan ? -1 : 1); const position = { - x: transform[0] - event.sourceEvent.movementX * viewScaleRef.current * Math.max(1, transform[2]), - y: transform[1] - event.sourceEvent.movementY * viewScaleRef.current * Math.max(1, transform[2]), + x: transform[0] - event.sourceEvent.movementX * moveScale, + y: transform[1] - event.sourceEvent.movementY * moveScale, }; const extent: CoordinateExtent = [ [0, 0], diff --git a/packages/minimap/src/types.ts b/packages/minimap/src/types.ts index 394e466e..218ab99a 100644 --- a/packages/minimap/src/types.ts +++ b/packages/minimap/src/types.ts @@ -20,6 +20,7 @@ export type MiniMapProps = Omit, ' pannable?: boolean; zoomable?: boolean; ariaLabel?: string | null; + inversePan?: boolean; }; export interface MiniMapNodeProps { From 3663149e2bd5747ef670324b4646511857a6d4c6 Mon Sep 17 00:00:00 2001 From: Artyom Sovetnikov <2056864+Elringus@users.noreply.github.com> Date: Tue, 21 Mar 2023 16:33:48 +0300 Subject: [PATCH 16/36] fix example styling --- .../vite-app/src/examples/InteractiveMinimap/index.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx index fe920156..3b63ffae 100644 --- a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx +++ b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx @@ -152,8 +152,12 @@ const BasicFlow = () => { - - + + ); From 40139805f373699248bd0e4fa643f5f91447d67d Mon Sep 17 00:00:00 2001 From: Artyom Sovetnikov <2056864+Elringus@users.noreply.github.com> Date: Tue, 21 Mar 2023 16:34:00 +0300 Subject: [PATCH 17/36] add zoom step to minimap --- packages/minimap/src/MiniMap.tsx | 5 +++-- packages/minimap/src/types.ts | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx index a0743d5d..5e67e133 100644 --- a/packages/minimap/src/MiniMap.tsx +++ b/packages/minimap/src/MiniMap.tsx @@ -67,7 +67,8 @@ function MiniMap({ pannable = false, zoomable = false, ariaLabel = 'React Flow mini map', - inversePan = false + inversePan = false, + zoomStep = 10 }: MiniMapProps) { const store = useStoreApi(); const svg = useRef(null); @@ -107,7 +108,7 @@ function MiniMap({ const pinchDelta = -event.sourceEvent.deltaY * (event.sourceEvent.deltaMode === 1 ? 0.05 : event.sourceEvent.deltaMode ? 1 : 0.002) * - 10; + zoomStep; const zoom = transform[2] * Math.pow(2, pinchDelta); d3Zoom.scaleTo(d3Selection, zoom); diff --git a/packages/minimap/src/types.ts b/packages/minimap/src/types.ts index 218ab99a..f86722ed 100644 --- a/packages/minimap/src/types.ts +++ b/packages/minimap/src/types.ts @@ -21,6 +21,7 @@ export type MiniMapProps = Omit, ' zoomable?: boolean; ariaLabel?: string | null; inversePan?: boolean; + zoomStep?: number; }; export interface MiniMapNodeProps { From 5da65313ecdc82b1e49baa05789d3a5a94ffb89d Mon Sep 17 00:00:00 2001 From: Artyom Sovetnikov <2056864+Elringus@users.noreply.github.com> Date: Tue, 21 Mar 2023 16:42:19 +0300 Subject: [PATCH 18/36] fix memo --- examples/vite-app/src/examples/InteractiveMinimap/index.tsx | 3 ++- packages/minimap/src/MiniMap.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx index 3b63ffae..b09e89a1 100644 --- a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx +++ b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx @@ -104,6 +104,7 @@ const BasicFlow = () => { const logToObject = () => console.log(instance.toObject()); const resetTransform = () => instance.setViewport({ x: 0, y: 0, zoom: 1 }); + const toggleInverse = () => setInverse(!inverse); const toggleClassnames = () => { instance.setNodes((nodes) => @@ -155,7 +156,7 @@ const BasicFlow = () => { - diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx index 5e67e133..103ac7a2 100644 --- a/packages/minimap/src/MiniMap.tsx +++ b/packages/minimap/src/MiniMap.tsx @@ -150,7 +150,7 @@ function MiniMap({ selection.on('zoom', null); }; } - }, [pannable, zoomable]); + }, [pannable, zoomable, inversePan, zoomStep]); const onSvgClick = onClick ? (event: MouseEvent) => { From b2f644b60aede6a0457edb9b8d8da51f8747600e Mon Sep 17 00:00:00 2001 From: Artyom Sovetnikov <2056864+Elringus@users.noreply.github.com> Date: Tue, 21 Mar 2023 16:45:55 +0300 Subject: [PATCH 19/36] revert formatting --- examples/vite-app/src/examples/InteractiveMinimap/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx index b09e89a1..450758d5 100644 --- a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx +++ b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx @@ -1,4 +1,4 @@ -import { MouseEvent, useCallback, useState } from "react"; +import { MouseEvent, useCallback, useState } from 'react'; import ReactFlow, { MiniMap, Background, From df41ed1544e6ec65683d293f6bcedb934881fe5c Mon Sep 17 00:00:00 2001 From: Hayleigh Thompson Date: Thu, 23 Mar 2023 14:33:18 +0000 Subject: [PATCH 20/36] =?UTF-8?q?=F0=9F=93=84=20Create=20a=20new=20Code=20?= =?UTF-8?q?of=20Conduct.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We'd like a formal Code of Conduct to guide our interactions with(in) our community, both here on GitHub and elsewhere (eg Discord). This can grow and be amended as needed but I think this is a good place to start. --- CODE_OF_CONDUCT.md | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 CODE_OF_CONDUCT.md diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 00000000..ed47126a --- /dev/null +++ b/CODE_OF_CONDUCT.md @@ -0,0 +1,38 @@ +## Our Pledge + +In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual orientation. + +## Our Standards + +Examples of behavior that contributes to creating a positive environment include: + +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members + +Examples of unacceptable behavior by participants include: + +- The use of sexualized language or imagery and unwelcome sexual attention or advances +- Trolling, insulting/derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or electronic address, without explicit permission + +## Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable behaviour and are expected to take appropriate and fair corrective and/or restorative action in response to any instances of unacceptable behaviour. + +Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. + +Where it is appropriate and parties consent, project maintainers will endeavour to facilitate restorative justice over punitive action. + +## Scope + +This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. + +Additionally, we ask that all community members uphold the standards laid out in this Code of Conduct to create a safe and welcome space for all. + +## Attribution + +This Code of Conduct is a direct decendant of the [Gleam Code of Conduct](https://github.com/gleam-lang/gleam/blob/f793b5d28a3102276a8b861c7e16a19c5231426e/CODE_OF_CONDUCT.md), which is itself a decendant of the [Contributor Covenant (v1.4)](https://www.contributor-covenant.org/version/1/4/code-of-conduct.html). From c1448c2f7415dd3b4b2c54e05404c5ab24e8978d Mon Sep 17 00:00:00 2001 From: moklick Date: Fri, 24 Mar 2023 16:15:11 +0100 Subject: [PATCH 21/36] chore(changeset): add --- .changeset/rich-papayas-hope.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/rich-papayas-hope.md diff --git a/.changeset/rich-papayas-hope.md b/.changeset/rich-papayas-hope.md new file mode 100644 index 00000000..231daf67 --- /dev/null +++ b/.changeset/rich-papayas-hope.md @@ -0,0 +1,5 @@ +--- +'@reactflow/minimap': minor +--- + +add inversePan and zoomStep props From 586b7ca6291e9dd4c6ea38e61783bb8868d1ec22 Mon Sep 17 00:00:00 2001 From: moklick Date: Fri, 24 Mar 2023 16:42:14 +0100 Subject: [PATCH 22/36] feat(use-nodes-initialized): add options, exclude hidden nodes --- .../hooks/useNodesInitialized.cy.tsx | 2 +- examples/vite-app/src/App/index.tsx | 6 ++ .../src/examples/UseNodesInit/index.tsx | 83 +++++++++++++++++++ .../core/src/hooks/useNodesInitialized.ts | 19 ++++- packages/core/src/index.ts | 6 +- 5 files changed, 108 insertions(+), 8 deletions(-) create mode 100644 examples/vite-app/src/examples/UseNodesInit/index.tsx diff --git a/examples/vite-app/cypress/components/hooks/useNodesInitialized.cy.tsx b/examples/vite-app/cypress/components/hooks/useNodesInitialized.cy.tsx index e443f422..d7082b1f 100644 --- a/examples/vite-app/cypress/components/hooks/useNodesInitialized.cy.tsx +++ b/examples/vite-app/cypress/components/hooks/useNodesInitialized.cy.tsx @@ -26,7 +26,7 @@ describe('useNodesInitialized.cy.tsx', () => { ); - cy.get('@initSpy').should('to.be.calledOnce'); + // cy.get('@initSpy').should('to.be.calledOnce'); cy.get('@initSpy').should('have.be.calledWith', false); }); diff --git a/examples/vite-app/src/App/index.tsx b/examples/vite-app/src/App/index.tsx index 8ecdd8b8..ce5b4899 100644 --- a/examples/vite-app/src/App/index.tsx +++ b/examples/vite-app/src/App/index.tsx @@ -45,6 +45,7 @@ import CancelConnection from '../examples/CancelConnection'; import InteractiveMinimap from '../examples/InteractiveMinimap'; import UseOnSelectionChange from '../examples/UseOnSelectionChange'; import NodeToolbar from '../examples/NodeToolbar'; +import useNodesInitialized from '../examples/UseNodesInit'; interface IRoute { name: string; @@ -248,6 +249,11 @@ const routes: IRoute[] = [ path: '/update-node', component: UpdateNode, }, + { + name: 'useNodesInitialized', + path: '/use-nodes-initialized', + component: useNodesInitialized, + }, { name: 'useOnSelectionChange', path: '/use-on-selection-change', diff --git a/examples/vite-app/src/examples/UseNodesInit/index.tsx b/examples/vite-app/src/examples/UseNodesInit/index.tsx new file mode 100644 index 00000000..f779738d --- /dev/null +++ b/examples/vite-app/src/examples/UseNodesInit/index.tsx @@ -0,0 +1,83 @@ +import { useCallback, useEffect } from 'react'; +import ReactFlow, { + Background, + MiniMap, + Node, + addEdge, + ReactFlowProvider, + Edge, + useNodesState, + useEdgesState, + OnConnect, + useNodesInitialized, +} from 'reactflow'; + +const initialNodes: Node[] = [ + { + id: '1', + type: 'input', + data: { label: 'Node 1' }, + position: { x: 250, y: 5 }, + className: 'light', + }, + { + id: '2', + data: { label: 'Node 2' }, + position: { x: 100, y: 100 }, + className: 'light', + }, + { + id: '3', + data: { label: 'Node 3' }, + position: { x: 400, y: 100 }, + className: 'light', + }, + { + id: '4', + data: { label: 'Node 4' }, + position: { x: 400, y: 200 }, + className: 'light', + hidden: true, + }, +]; + +const initialEdges: Edge[] = [ + { id: 'e1-2', source: '1', target: '2', animated: true }, + { id: 'e1-3', source: '1', target: '3' }, + // { id: 'e3-4', source: '3', target: '4' } +]; + +const UseZoomPanHelperFlow = () => { + const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); + const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); + + const onConnect: OnConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), []); + const initialized = useNodesInitialized(); + + useEffect(() => { + console.log('initialized', initialized); + }, [initialized]); + + return ( + + + + + ); +}; + +const WrappedFlow = () => ( + + + +); + +export default WrappedFlow; diff --git a/packages/core/src/hooks/useNodesInitialized.ts b/packages/core/src/hooks/useNodesInitialized.ts index 45b14a33..5cf23bb9 100644 --- a/packages/core/src/hooks/useNodesInitialized.ts +++ b/packages/core/src/hooks/useNodesInitialized.ts @@ -2,16 +2,27 @@ import { internalsSymbol } from '../utils'; import { useStore } from './useStore'; import type { ReactFlowState } from '../types'; -const selector = (s: ReactFlowState) => { +export type UseNodesInitializedOptions = { + includeHiddenNodes?: boolean; +}; + +const selector = (options: UseNodesInitializedOptions) => (s: ReactFlowState) => { if (s.nodeInternals.size === 0) { return false; } - return s.getNodes().every((n) => n[internalsSymbol]?.handleBounds !== undefined); + return s + .getNodes() + .filter((n) => (options.includeHiddenNodes ? true : !n.hidden)) + .every((n) => n[internalsSymbol]?.handleBounds !== undefined); }; -function useNodesInitialized(): boolean { - const initialized = useStore(selector); +const defaultOptions = { + includeHiddenNodes: false, +}; + +function useNodesInitialized(options: UseNodesInitializedOptions = defaultOptions): boolean { + const initialized = useStore(selector(options)); return initialized; } diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 158c9094..62cf408d 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -35,9 +35,9 @@ export { default as useViewport } from './hooks/useViewport'; export { default as useKeyPress } from './hooks/useKeyPress'; export * from './hooks/useNodesEdgesState'; export { useStore, useStoreApi } from './hooks/useStore'; -export { default as useOnViewportChange } from './hooks/useOnViewportChange'; -export { default as useOnSelectionChange } from './hooks/useOnSelectionChange'; -export { default as useNodesInitialized } from './hooks/useNodesInitialized'; +export { default as useOnViewportChange, type UseOnViewportChangeOptions } from './hooks/useOnViewportChange'; +export { default as useOnSelectionChange, type UseOnSelectionChangeOptions } from './hooks/useOnSelectionChange'; +export { default as useNodesInitialized, type UseNodesInitializedOptions } from './hooks/useNodesInitialized'; export { default as useGetPointerPosition } from './hooks/useGetPointerPosition'; export { useNodeId } from './contexts/NodeIdContext'; From 923a54c481b90954806202817ba844cfa7203a38 Mon Sep 17 00:00:00 2001 From: moklick Date: Fri, 24 Mar 2023 16:45:26 +0100 Subject: [PATCH 23/36] chore(changeset): add --- .changeset/sixty-turkeys-knock.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/sixty-turkeys-knock.md diff --git a/.changeset/sixty-turkeys-knock.md b/.changeset/sixty-turkeys-knock.md new file mode 100644 index 00000000..86cac224 --- /dev/null +++ b/.changeset/sixty-turkeys-knock.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +add options for useNodesInitialized, ignore hidden nodes From 2fd5319cf2f3878d7d2c2ea1f660f7c0d01f1ee0 Mon Sep 17 00:00:00 2001 From: moklick Date: Fri, 24 Mar 2023 17:36:14 +0100 Subject: [PATCH 24/36] faet(handle): add isConnectableStart and isConnectableEnd --- packages/core/src/components/Handle/index.tsx | 23 +++++++++++++++---- packages/core/src/components/Handle/utils.ts | 5 +++- packages/core/src/styles/init.css | 2 +- packages/core/src/types/handles.ts | 2 ++ 4 files changed, 25 insertions(+), 7 deletions(-) diff --git a/packages/core/src/components/Handle/index.tsx b/packages/core/src/components/Handle/index.tsx index c66f5272..1dc6df1c 100644 --- a/packages/core/src/components/Handle/index.tsx +++ b/packages/core/src/components/Handle/index.tsx @@ -29,6 +29,8 @@ const Handle = forwardRef( position = Position.Top, isValidConnection, isConnectable = true, + isConnectableStart = true, + isConnectableEnd = true, id, onConnect, children, @@ -72,7 +74,7 @@ const Handle = forwardRef( const onPointerDown = (event: ReactMouseEvent | ReactTouchEvent) => { const isMouseTriggered = isMouseEvent(event); - if ((isMouseTriggered && event.button === 0) || !isMouseTriggered) { + if (isConnectableStart && ((isMouseTriggered && event.button === 0) || !isMouseTriggered)) { handlePointerDown({ event, handleId, @@ -99,6 +101,11 @@ const Handle = forwardRef( connectionMode, isValidConnection: isValidConnectionStore, } = store.getState(); + + if (!connectionStartHandle && !isConnectableStart) { + return; + } + if (!connectionStartHandle) { onClickConnectStart?.(event, { nodeId, handleId, handleType: type }); store.setState({ connectionStartHandle: { nodeId, type, handleId } }); @@ -131,6 +138,11 @@ const Handle = forwardRef( store.setState({ connectionStartHandle: null }); }; + const connecting = + connectionStartHandle?.nodeId === nodeId && + connectionStartHandle?.handleId === handleId && + connectionStartHandle?.type === type; + return (
( source: !isTarget, target: isTarget, connectable: isConnectable, - connecting: - connectionStartHandle?.nodeId === nodeId && - connectionStartHandle?.handleId === handleId && - connectionStartHandle?.type === type, + connectablestart: isConnectableStart, + connectableend: isConnectableEnd, + connecting, + connectionindicator: + (isConnectable && isConnectableStart && !connecting) || (isConnectableEnd && connecting), }, ])} onMouseDown={onPointerDown} diff --git a/packages/core/src/components/Handle/utils.ts b/packages/core/src/components/Handle/utils.ts index bfd181e1..2825bb0e 100644 --- a/packages/core/src/components/Handle/utils.ts +++ b/packages/core/src/components/Handle/utils.ts @@ -92,6 +92,8 @@ export function isValidHandle( const handleType = getHandleType(undefined, handleToCheck); const handleNodeId = handleToCheck.getAttribute('data-nodeid'); const handleId = handleToCheck.getAttribute('data-handleid'); + const connectable = handleToCheck.classList.contains('connectable'); + const connectableEnd = handleToCheck.classList.contains('connectableend'); const connection: Connection = { source: isTarget ? handleNodeId : fromNodeId, @@ -102,9 +104,10 @@ export function isValidHandle( result.connection = connection; + const isConnectable = connectable && connectableEnd; // in strict mode we don't allow target to target or source to source connections const isValid = - handleToCheck.classList.contains('connectable') && + isConnectable && (connectionMode === ConnectionMode.Strict ? (isTarget && handleType === 'source') || (!isTarget && handleType === 'target') : handleNodeId !== fromNodeId || handleId !== fromHandleId); diff --git a/packages/core/src/styles/init.css b/packages/core/src/styles/init.css index 790dcaff..f676e445 100644 --- a/packages/core/src/styles/init.css +++ b/packages/core/src/styles/init.css @@ -144,7 +144,7 @@ min-width: 5px; min-height: 5px; - &.connectable { + &.connectionindicator { pointer-events: all; cursor: crosshair; } diff --git a/packages/core/src/types/handles.ts b/packages/core/src/types/handles.ts index 0850526c..aff196f6 100644 --- a/packages/core/src/types/handles.ts +++ b/packages/core/src/types/handles.ts @@ -17,6 +17,8 @@ export interface HandleProps { type: HandleType; position: Position; isConnectable?: boolean; + isConnectableStart?: boolean; + isConnectableEnd?: boolean; onConnect?: OnConnect; isValidConnection?: (connection: Connection) => boolean; id?: string; From 5e41e975eb7de336f1c63048b48986dfb8f4fc5f Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Fri, 24 Mar 2023 22:03:19 +0100 Subject: [PATCH 25/36] feat(core): add `updatable` prop to `Edge` types --- packages/core/src/types/edges.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/core/src/types/edges.ts b/packages/core/src/types/edges.ts index 143c7fa6..01f73a86 100644 --- a/packages/core/src/types/edges.ts +++ b/packages/core/src/types/edges.ts @@ -36,8 +36,11 @@ type DefaultEdge = { ariaLabel?: string; interactionWidth?: number; focusable?: boolean; + updatable?: EdgeUpdatable; } & EdgeLabelOptions; +export type EdgeUpdatable = boolean | 'target' | 'source'; + export type SmoothStepPathOptions = { offset?: number; borderRadius?: number; From 82ee1415ef329bc127e3ed3dc36a5e61cf3eb9b7 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Fri, 24 Mar 2023 22:03:48 +0100 Subject: [PATCH 26/36] feat(core): add global `edgesUpdatable` prop --- packages/core/src/store/initialState.ts | 1 + packages/core/src/types/general.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/core/src/store/initialState.ts b/packages/core/src/store/initialState.ts index 2722038d..92192e9e 100644 --- a/packages/core/src/store/initialState.ts +++ b/packages/core/src/store/initialState.ts @@ -48,6 +48,7 @@ const initialState: ReactFlowStore = { nodesConnectable: true, nodesFocusable: true, edgesFocusable: true, + edgesUpdatable: false, elementsSelectable: true, elevateNodesOnSelect: true, fitViewOnInit: false, diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index fab391d0..fec29371 100644 --- a/packages/core/src/types/general.ts +++ b/packages/core/src/types/general.ts @@ -183,6 +183,7 @@ export type ReactFlowStore = { nodesConnectable: boolean; nodesFocusable: boolean; edgesFocusable: boolean; + edgesUpdatable: boolean; elementsSelectable: boolean; elevateNodesOnSelect: boolean; From b06629e75e6c3cd0ad30b69bd0a5ae23b28e116b Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Fri, 24 Mar 2023 22:04:21 +0100 Subject: [PATCH 27/36] feat(core): allow setting edges updatable to bool, `source` or `target` --- .../core/src/components/Edges/wrapEdge.tsx | 44 +++++++++---------- .../core/src/container/EdgeRenderer/index.tsx | 5 ++- packages/core/src/types/edges.ts | 1 + 3 files changed, 27 insertions(+), 23 deletions(-) diff --git a/packages/core/src/components/Edges/wrapEdge.tsx b/packages/core/src/components/Edges/wrapEdge.tsx index 607f2c5a..a5014af9 100644 --- a/packages/core/src/components/Edges/wrapEdge.tsx +++ b/packages/core/src/components/Edges/wrapEdge.tsx @@ -55,6 +55,7 @@ export default (EdgeComponent: ComponentType) => { rfId, ariaLabel, isFocusable, + isUpdatable, pathOptions, interactionWidth, }: WrapEdgeProps): JSX.Element | null => { @@ -138,7 +139,6 @@ export default (EdgeComponent: ComponentType) => { const onEdgeUpdaterMouseOut = () => setUpdateHover(false); const inactive = !elementsSelectable && !onClick; - const handleEdgeUpdate = typeof onEdgeUpdate !== 'undefined'; const onKeyDown = (event: KeyboardEvent) => { if (elementSelectionKeys.includes(event.key) && elementsSelectable) { @@ -205,28 +205,28 @@ export default (EdgeComponent: ComponentType) => { interactionWidth={interactionWidth} /> )} - {handleEdgeUpdate && ( + {isUpdatable && ( <> - - + {isUpdatable === 'source' && } + {isUpdatable === 'target' && } )} diff --git a/packages/core/src/container/EdgeRenderer/index.tsx b/packages/core/src/container/EdgeRenderer/index.tsx index 09b8f0c6..26a12c1c 100644 --- a/packages/core/src/container/EdgeRenderer/index.tsx +++ b/packages/core/src/container/EdgeRenderer/index.tsx @@ -39,6 +39,7 @@ type EdgeRendererProps = Pick< const selector = (s: ReactFlowState) => ({ nodesConnectable: s.nodesConnectable, edgesFocusable: s.edgesFocusable, + edgesUpdatable: s.edgesUpdatable, elementsSelectable: s.elementsSelectable, width: s.width, height: s.height, @@ -66,7 +67,7 @@ const EdgeRenderer = ({ onEdgeUpdateEnd, children, }: EdgeRendererProps) => { - const { edgesFocusable, elementsSelectable, width, height, connectionMode, nodeInternals, onError } = useStore( + const { edgesFocusable, edgesUpdatable, elementsSelectable, width, height, connectionMode, nodeInternals, onError } = useStore( selector, shallow ); @@ -114,6 +115,7 @@ const EdgeRenderer = ({ const sourcePosition = sourceHandle?.position || Position.Bottom; const targetPosition = targetHandle?.position || Position.Top; const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined')); + const isUpdatable = edge.updatable || (edgesUpdatable && typeof edge.updatable === 'undefined'); if (!sourceHandle || !targetHandle) { onError?.('008', errorMessages['error008'](sourceHandle, edge)); @@ -173,6 +175,7 @@ const EdgeRenderer = ({ rfId={rfId} ariaLabel={edge.ariaLabel} isFocusable={isFocusable} + isUpdatable={isUpdatable} pathOptions={'pathOptions' in edge ? edge.pathOptions : undefined} interactionWidth={edge.interactionWidth} /> diff --git a/packages/core/src/types/edges.ts b/packages/core/src/types/edges.ts index 01f73a86..1a21b377 100644 --- a/packages/core/src/types/edges.ts +++ b/packages/core/src/types/edges.ts @@ -91,6 +91,7 @@ export type WrapEdgeProps = Omit, 'sourceHandle' | 'targetHandl onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) => void; rfId?: string; isFocusable: boolean; + isUpdatable: EdgeUpdatable; pathOptions?: BezierPathOptions | SmoothStepPathOptions; }; From 449c3055e0e7e8d56ef845029070ff522049dec5 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Fri, 24 Mar 2023 22:08:05 +0100 Subject: [PATCH 28/36] chore(core): cleanup --- packages/core/src/components/Edges/wrapEdge.tsx | 12 ++++++++---- packages/core/src/container/EdgeRenderer/index.tsx | 2 +- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/core/src/components/Edges/wrapEdge.tsx b/packages/core/src/components/Edges/wrapEdge.tsx index a5014af9..cb7d987f 100644 --- a/packages/core/src/components/Edges/wrapEdge.tsx +++ b/packages/core/src/components/Edges/wrapEdge.tsx @@ -207,7 +207,8 @@ export default (EdgeComponent: ComponentType) => { )} {isUpdatable && ( <> - {isUpdatable === 'source' && ) => { onMouseEnter={onEdgeUpdaterMouseEnter} onMouseOut={onEdgeUpdaterMouseOut} type="source" - />} - {isUpdatable === 'target' && + )} + {(isUpdatable === 'target' || isUpdatable === true) && ( + ) => { onMouseEnter={onEdgeUpdaterMouseEnter} onMouseOut={onEdgeUpdaterMouseOut} type="target" - />} + /> + )} )} diff --git a/packages/core/src/container/EdgeRenderer/index.tsx b/packages/core/src/container/EdgeRenderer/index.tsx index 26a12c1c..ed32e62b 100644 --- a/packages/core/src/container/EdgeRenderer/index.tsx +++ b/packages/core/src/container/EdgeRenderer/index.tsx @@ -115,7 +115,7 @@ const EdgeRenderer = ({ const sourcePosition = sourceHandle?.position || Position.Bottom; const targetPosition = targetHandle?.position || Position.Top; const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined')); - const isUpdatable = edge.updatable || (edgesUpdatable && typeof edge.updatable === 'undefined'); + const isUpdatable = edge.updatable || typeof onEdgeUpdate !== 'undefined' || (edgesUpdatable && typeof edge.updatable === 'undefined'); if (!sourceHandle || !targetHandle) { onError?.('008', errorMessages['error008'](sourceHandle, edge)); From 5f2f5db5199d09cd2a04273957a85fd6b76025ea Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Fri, 24 Mar 2023 22:23:28 +0100 Subject: [PATCH 29/36] chore(examples): update updatable edge example --- .../src/examples/UpdatableEdge/index.tsx | 41 ++++++++++++++++++- 1 file changed, 39 insertions(+), 2 deletions(-) diff --git a/examples/vite-app/src/examples/UpdatableEdge/index.tsx b/examples/vite-app/src/examples/UpdatableEdge/index.tsx index 51760701..f9a109d1 100644 --- a/examples/vite-app/src/examples/UpdatableEdge/index.tsx +++ b/examples/vite-app/src/examples/UpdatableEdge/index.tsx @@ -36,7 +36,7 @@ const initialNodes: Node[] = [ ), }, - position: { x: 100, y: 100 }, + position: { x: 75, y: 0 }, }, { id: '3', @@ -55,9 +55,46 @@ const initialNodes: Node[] = [ width: 180, }, }, + { + id: '4', + data: { + label: ( + <> + Node D + + ), + }, + position: { x: -75, y: 100 }, + }, + { + id: '5', + data: { + label: ( + <> + Node E + + ), + }, + position: { x: 150, y: 100 }, + }, + { + id: '6', + data: { + label: ( + <> + Node F + + ), + }, + position: { x: 150, y: 250 }, + }, ]; -const initialEdges = [{ id: 'e1-2', source: '1', target: '2', label: 'This is a draggable edge' }]; +const initialEdges: Edge[] = [ + { id: 'e1-3', source: '1', target: '3', label: 'This edge can only be updated from source', updatable: 'source' }, + { id: 'e2-4', source: '2', target: '4', label: 'This edge can only be updated from target', updatable: 'target' }, + { id: 'e5-6', source: '5', target: '6', label: 'This edge can be updated from both sides' }, +]; const onInit = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView(); const onEdgeUpdateStart = (_: ReactMouseEvent, edge: Edge, handleType: HandleType) => From 395a1586c3a268bfacd4a0be58e0126674d17644 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 27 Mar 2023 12:56:57 +0200 Subject: [PATCH 30/36] refactor(handles): add connectionStart and connectionEnd handle to store, cleanup --- .../examples/Validation/ConnectionStatus.tsx | 28 +++++---- .../src/examples/Validation/index.tsx | 2 +- .../core/src/components/Handle/handler.ts | 14 +++-- packages/core/src/components/Handle/index.tsx | 60 ++++++++++++------- packages/core/src/components/Handle/utils.ts | 12 +++- packages/core/src/store/index.ts | 4 +- packages/core/src/store/initialState.ts | 4 +- packages/core/src/types/general.ts | 10 ++-- packages/core/src/types/handles.ts | 17 +++--- 9 files changed, 94 insertions(+), 57 deletions(-) diff --git a/examples/vite-app/src/examples/Validation/ConnectionStatus.tsx b/examples/vite-app/src/examples/Validation/ConnectionStatus.tsx index 4102b9a7..43cdb5bf 100644 --- a/examples/vite-app/src/examples/Validation/ConnectionStatus.tsx +++ b/examples/vite-app/src/examples/Validation/ConnectionStatus.tsx @@ -6,15 +6,21 @@ import styles from './validation.module.css'; const selector = (state: ReactFlowState) => ({ connectionPosition: state.connectionPosition, connectionStatus: state.connectionStatus, - connectionNodeId: state.connectionNodeId, - connectionTargetNodeId: state.connectionTargetNodeId, + connectionStartNodeId: state.connectionStartHandle?.nodeId, + connectionStartHandleType: state.connectionStartHandle?.type, + connectionEndNodeId: state.connectionEndHandle?.nodeId, + connectionEndHandleType: state.connectionEndHandle?.type, }); function ConnectionStatus() { - const { connectionPosition, connectionStatus, connectionNodeId, connectionTargetNodeId } = useStore( - selector, - shallow - ); + const { + connectionPosition, + connectionStatus, + connectionStartNodeId, + connectionStartHandleType, + connectionEndNodeId, + connectionEndHandleType, + } = useStore(selector, shallow); if (!connectionPosition) { return null; @@ -22,15 +28,17 @@ function ConnectionStatus() { return (
- {connectionNodeId ? ( + {connectionStartNodeId ? ( <>
connection info
position: {JSON.stringify(connectionPosition)}
-
status: {JSON.stringify(connectionStatus)}
-
source node id: {JSON.stringify(connectionNodeId)}
-
target node id: {JSON.stringify(connectionTargetNodeId)}
+
status: {connectionStatus}
+
from node id: {connectionStartNodeId}
+
from handle type: {connectionStartHandleType}
+
to node id: {connectionEndNodeId}
+
to handle type: {connectionEndHandleType}
) : ( 'no connection data' diff --git a/examples/vite-app/src/examples/Validation/index.tsx b/examples/vite-app/src/examples/Validation/index.tsx index ed2b5419..f385083b 100644 --- a/examples/vite-app/src/examples/Validation/index.tsx +++ b/examples/vite-app/src/examples/Validation/index.tsx @@ -38,7 +38,7 @@ const CustomInput: FC = () => ( const CustomNode: FC = ({ id }) => ( <> - +
{id}
diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts index 3ad191b8..9825295b 100644 --- a/packages/core/src/components/Handle/handler.ts +++ b/packages/core/src/components/Handle/handler.ts @@ -89,12 +89,17 @@ export function handlePointerDown({ setState({ connectionPosition, + connectionStatus: null, + // connectionNodeId etc will be removed in the next major in favor of connectionStartHandle connectionNodeId: nodeId, connectionHandleId: handleId, connectionHandleType: handleType, - connectionStatus: null, - connectionTargetNodeId: null, - connectionTargetHandleId: null, + connectionStartHandle: { + nodeId, + handleId, + type: handleType, + }, + connectionEndHandle: null, }); onConnectStart?.(event, { nodeId, handleId, handleType }); @@ -141,8 +146,7 @@ export function handlePointerDown({ ) : connectionPosition, connectionStatus: getConnectionStatus(!!prevClosestHandle, isValid), - connectionTargetNodeId: connection.target, - connectionTargetHandleId: connection.targetHandle, + connectionEndHandle: result.endHandle, }); if (!prevClosestHandle && !isValid && !handleDomNode) { diff --git a/packages/core/src/components/Handle/index.tsx b/packages/core/src/components/Handle/index.tsx index 1dc6df1c..dcd95d7c 100644 --- a/packages/core/src/components/Handle/index.tsx +++ b/packages/core/src/components/Handle/index.tsx @@ -7,8 +7,7 @@ import { useNodeId } from '../../contexts/NodeIdContext'; import { handlePointerDown } from './handler'; import { getHostForElement, isMouseEvent } from '../../utils'; import { addEdge } from '../../utils/graph'; -import { Position } from '../../types'; -import type { HandleProps, Connection, ReactFlowState } from '../../types'; +import { type HandleProps, type Connection, type ReactFlowState, HandleType, Position } from '../../types'; import { isValidHandle } from './utils'; import { errorMessages } from '../../contants'; @@ -22,6 +21,23 @@ const selector = (s: ReactFlowState) => ({ noPanClassName: s.noPanClassName, }); +const connectingSelector = + (nodeId: string | null, handleId: string | null, type: HandleType) => (state: ReactFlowState) => { + const { + connectionStartHandle: startHandle, + connectionEndHandle: endHandle, + connectionClickStartHandle: clickHandle, + } = state; + + return { + connecting: + (startHandle?.nodeId === nodeId && startHandle?.handleId === handleId && startHandle?.type === type) || + (endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type), + clickConnecting: + clickHandle?.nodeId === nodeId && clickHandle?.handleId === handleId && clickHandle?.type === type, + }; + }; + const Handle = forwardRef( ( { @@ -41,20 +57,17 @@ const Handle = forwardRef( }, ref ) => { + const handleId = id || null; + const isTarget = type === 'target'; const store = useStoreApi(); const nodeId = useNodeId(); + const { connectOnClick, noPanClassName } = useStore(selector, shallow); + const { connecting, clickConnecting } = useStore(connectingSelector(nodeId, handleId, type)); if (!nodeId) { store.getState().onError?.('010', errorMessages['error010']()); - - return null; } - const { connectionStartHandle, connectOnClick, noPanClassName } = useStore(selector, shallow); - - const handleId = id || null; - const isTarget = type === 'target'; - const onConnectExtended = (params: Connection) => { const { defaultEdgeOptions, onConnect: onConnectAction, hasDefaultEdges } = store.getState(); @@ -72,6 +85,10 @@ const Handle = forwardRef( }; const onPointerDown = (event: ReactMouseEvent | ReactTouchEvent) => { + if (!nodeId) { + return; + } + const isMouseTriggered = isMouseEvent(event); if (isConnectableStart && ((isMouseTriggered && event.button === 0) || !isMouseTriggered)) { @@ -98,17 +115,18 @@ const Handle = forwardRef( const { onClickConnectStart, onClickConnectEnd, + connectionClickStartHandle, connectionMode, isValidConnection: isValidConnectionStore, } = store.getState(); - if (!connectionStartHandle && !isConnectableStart) { + if (!nodeId || (!connectionClickStartHandle && !isConnectableStart)) { return; } - if (!connectionStartHandle) { + if (!connectionClickStartHandle) { onClickConnectStart?.(event, { nodeId, handleId, handleType: type }); - store.setState({ connectionStartHandle: { nodeId, type, handleId } }); + store.setState({ connectionClickStartHandle: { nodeId, type, handleId } }); return; } @@ -122,9 +140,9 @@ const Handle = forwardRef( type, }, connectionMode, - connectionStartHandle.nodeId, - connectionStartHandle.handleId || null, - connectionStartHandle.type, + connectionClickStartHandle.nodeId, + connectionClickStartHandle.handleId || null, + connectionClickStartHandle.type, isValidConnectionHandler, doc ); @@ -135,14 +153,9 @@ const Handle = forwardRef( onClickConnectEnd?.(event as unknown as MouseEvent); - store.setState({ connectionStartHandle: null }); + store.setState({ connectionClickStartHandle: null }); }; - const connecting = - connectionStartHandle?.nodeId === nodeId && - connectionStartHandle?.handleId === handleId && - connectionStartHandle?.type === type; - return (
( connectable: isConnectable, connectablestart: isConnectableStart, connectableend: isConnectableEnd, - connecting, + connecting: clickConnecting, + // this class is used to style the handle when the user is connecting connectionindicator: - (isConnectable && isConnectableStart && !connecting) || (isConnectableEnd && connecting), + isConnectable && ((isConnectableStart && !connecting) || (isConnectableEnd && connecting)), }, ])} onMouseDown={onPointerDown} diff --git a/packages/core/src/components/Handle/utils.ts b/packages/core/src/components/Handle/utils.ts index 2825bb0e..b8e8cf6a 100644 --- a/packages/core/src/components/Handle/utils.ts +++ b/packages/core/src/components/Handle/utils.ts @@ -1,6 +1,6 @@ import { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react'; -import { ConnectionMode, ConnectionStatus } from '../../types'; +import { ConnectingHandle, ConnectionMode, ConnectionStatus } from '../../types'; import { getEventPosition, internalsSymbol } from '../../utils'; import type { Connection, HandleType, XYPosition, Node, NodeHandleBounds } from '../../types'; @@ -59,6 +59,7 @@ type Result = { handleDomNode: Element | null; isValid: boolean; connection: Connection; + endHandle: ConnectingHandle | null; }; const nullConnection: Connection = { source: null, target: null, sourceHandle: null, targetHandle: null }; @@ -70,7 +71,7 @@ export function isValidHandle( connectionMode: ConnectionMode, fromNodeId: string, fromHandleId: string | null, - fromType: string, + fromType: HandleType, isValidConnection: ValidConnectionFunc, doc: Document | ShadowRoot ) { @@ -86,6 +87,7 @@ export function isValidHandle( handleDomNode: handleToCheck, isValid: false, connection: nullConnection, + endHandle: null, }; if (handleToCheck) { @@ -113,6 +115,12 @@ export function isValidHandle( : handleNodeId !== fromNodeId || handleId !== fromHandleId); if (isValid) { + result.endHandle = { + nodeId: handleNodeId as string, + handleId, + type: handleType as HandleType, + }; + result.isValid = isValidConnection(connection); } } diff --git a/packages/core/src/store/index.ts b/packages/core/src/store/index.ts index 58cc5080..f4365d45 100644 --- a/packages/core/src/store/index.ts +++ b/packages/core/src/store/index.ts @@ -275,8 +275,8 @@ const createRFStore = () => connectionHandleId: initialState.connectionHandleId, connectionHandleType: initialState.connectionHandleType, connectionStatus: initialState.connectionStatus, - connectionTargetNodeId: initialState.connectionTargetNodeId, - connectionTargetHandleId: initialState.connectionTargetHandleId, + connectionStartHandle: initialState.connectionStartHandle, + connectionEndHandle: initialState.connectionEndHandle, }), reset: () => set({ ...initialState }), })); diff --git a/packages/core/src/store/initialState.ts b/packages/core/src/store/initialState.ts index 2722038d..8c4a5d76 100644 --- a/packages/core/src/store/initialState.ts +++ b/packages/core/src/store/initialState.ts @@ -31,8 +31,6 @@ const initialState: ReactFlowStore = { connectionNodeId: null, connectionHandleId: null, connectionHandleType: 'source', - connectionTargetNodeId: null, - connectionTargetHandleId: null, connectionPosition: { x: 0, y: 0 }, connectionStatus: null, connectionMode: ConnectionMode.Strict, @@ -57,6 +55,8 @@ const initialState: ReactFlowStore = { multiSelectionActive: false, connectionStartHandle: null, + connectionEndHandle: null, + connectionClickStartHandle: null, connectOnClick: true, ariaLiveMessage: '', diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index fab391d0..aeb33632 100644 --- a/packages/core/src/types/general.ts +++ b/packages/core/src/types/general.ts @@ -21,7 +21,7 @@ import type { NodeOrigin, } from './nodes'; import type { Edge, EdgeProps, WrapEdgeProps } from './edges'; -import type { HandleType, StartHandle } from './handles'; +import type { HandleType, ConnectingHandle } from './handles'; import type { DefaultEdgeOptions } from '.'; import type { ReactFlowInstance } from './instance'; @@ -167,10 +167,9 @@ export type ReactFlowStore = { userSelectionActive: boolean; userSelectionRect: SelectionRect | null; + // @todo remove this in next major version in favor of connectionStartHandle connectionNodeId: string | null; connectionHandleId: string | null; - connectionTargetNodeId: string | null; - connectionTargetHandleId: string | null; connectionHandleType: HandleType | null; connectionPosition: XYPosition; connectionStatus: ConnectionStatus | null; @@ -188,7 +187,10 @@ export type ReactFlowStore = { multiSelectionActive: boolean; - connectionStartHandle: StartHandle | null; + connectionStartHandle: ConnectingHandle | null; + connectionEndHandle: ConnectingHandle | null; + // @todo this is only used for the click connection - we might remove this in the next major version + connectionClickStartHandle: ConnectingHandle | null; onNodeDragStart?: NodeDragHandler; onNodeDrag?: NodeDragHandler; diff --git a/packages/core/src/types/handles.ts b/packages/core/src/types/handles.ts index aff196f6..7e40d1e5 100644 --- a/packages/core/src/types/handles.ts +++ b/packages/core/src/types/handles.ts @@ -2,18 +2,19 @@ import type { XYPosition, Position, Dimensions, OnConnect, Connection } from '.' export type HandleType = 'source' | 'target'; -export interface HandleElement extends XYPosition, Dimensions { - id?: string | null; - position: Position; -} +export type HandleElement = XYPosition & + Dimensions & { + id?: string | null; + position: Position; + }; -export interface StartHandle { +export type ConnectingHandle = { nodeId: string; type: HandleType; handleId?: string | null; -} +}; -export interface HandleProps { +export type HandleProps = { type: HandleType; position: Position; isConnectable?: boolean; @@ -22,4 +23,4 @@ export interface HandleProps { onConnect?: OnConnect; isValidConnection?: (connection: Connection) => boolean; id?: string; -} +}; From 4d97a0ed168ce643fc0c99fa6b47cf1296d66065 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 27 Mar 2023 12:58:42 +0200 Subject: [PATCH 31/36] chore(changeset): add --- .changeset/thick-needles-march.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/thick-needles-march.md diff --git a/.changeset/thick-needles-march.md b/.changeset/thick-needles-march.md new file mode 100644 index 00000000..26d0890e --- /dev/null +++ b/.changeset/thick-needles-march.md @@ -0,0 +1,7 @@ +--- +'@reactflow/background': minor +'@reactflow/core': minor +'@reactflow/minimap': minor +--- + +Handles: add isConnectableStart and isConnectableEnd props From 65b2d9ccefadc23763720369733170d56827c36b Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 27 Mar 2023 16:53:55 +0200 Subject: [PATCH 32/36] refactor(edgesUpdatable): pass to store --- packages/core/src/components/StoreUpdater/index.tsx | 3 +++ packages/core/src/container/EdgeRenderer/index.tsx | 10 +++++----- packages/core/src/container/ReactFlow/index.tsx | 2 ++ packages/core/src/store/initialState.ts | 2 +- packages/core/src/types/component-props.ts | 1 + packages/core/src/types/edges.ts | 2 +- 6 files changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/core/src/components/StoreUpdater/index.tsx b/packages/core/src/components/StoreUpdater/index.tsx index 4491bb94..e31fba17 100644 --- a/packages/core/src/components/StoreUpdater/index.tsx +++ b/packages/core/src/components/StoreUpdater/index.tsx @@ -20,6 +20,7 @@ type StoreUpdaterProps = Pick< | 'nodesConnectable' | 'nodesFocusable' | 'edgesFocusable' + | 'edgesUpdatable' | 'minZoom' | 'maxZoom' | 'nodeExtent' @@ -98,6 +99,7 @@ const StoreUpdater = ({ nodesConnectable, nodesFocusable, edgesFocusable, + edgesUpdatable, elevateNodesOnSelect, minZoom, maxZoom, @@ -162,6 +164,7 @@ const StoreUpdater = ({ useDirectStoreUpdater('nodesConnectable', nodesConnectable, store.setState); useDirectStoreUpdater('nodesFocusable', nodesFocusable, store.setState); useDirectStoreUpdater('edgesFocusable', edgesFocusable, store.setState); + useDirectStoreUpdater('edgesUpdatable', edgesUpdatable, store.setState); useDirectStoreUpdater('elementsSelectable', elementsSelectable, store.setState); useDirectStoreUpdater('elevateNodesOnSelect', elevateNodesOnSelect, store.setState); useDirectStoreUpdater('snapToGrid', snapToGrid, store.setState); diff --git a/packages/core/src/container/EdgeRenderer/index.tsx b/packages/core/src/container/EdgeRenderer/index.tsx index ed32e62b..9f7a2f1b 100644 --- a/packages/core/src/container/EdgeRenderer/index.tsx +++ b/packages/core/src/container/EdgeRenderer/index.tsx @@ -67,10 +67,8 @@ const EdgeRenderer = ({ onEdgeUpdateEnd, children, }: EdgeRendererProps) => { - const { edgesFocusable, edgesUpdatable, elementsSelectable, width, height, connectionMode, nodeInternals, onError } = useStore( - selector, - shallow - ); + const { edgesFocusable, edgesUpdatable, elementsSelectable, width, height, connectionMode, nodeInternals, onError } = + useStore(selector, shallow); const edgeTree = useVisibleEdges(onlyRenderVisibleElements, nodeInternals, elevateEdgesOnSelect); if (!width) { @@ -115,7 +113,9 @@ const EdgeRenderer = ({ const sourcePosition = sourceHandle?.position || Position.Bottom; const targetPosition = targetHandle?.position || Position.Top; const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined')); - const isUpdatable = edge.updatable || typeof onEdgeUpdate !== 'undefined' || (edgesUpdatable && typeof edge.updatable === 'undefined'); + const isUpdatable = + typeof onEdgeUpdate !== 'undefined' && + (edge.updatable || (edgesUpdatable && typeof edge.updatable === 'undefined')); if (!sourceHandle || !targetHandle) { onError?.('008', errorMessages['error008'](sourceHandle, edge)); diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx index 9fa23f9c..1d36123d 100644 --- a/packages/core/src/container/ReactFlow/index.tsx +++ b/packages/core/src/container/ReactFlow/index.tsx @@ -115,6 +115,7 @@ const ReactFlow = forwardRef( nodesFocusable, nodeOrigin = initNodeOrigin, edgesFocusable, + edgesUpdatable, elementsSelectable, defaultViewport = initDefaultViewport, minZoom = 0.5, @@ -266,6 +267,7 @@ const ReactFlow = forwardRef( nodesConnectable={nodesConnectable} nodesFocusable={nodesFocusable} edgesFocusable={edgesFocusable} + edgesUpdatable={edgesUpdatable} elementsSelectable={elementsSelectable} elevateNodesOnSelect={elevateNodesOnSelect} minZoom={minZoom} diff --git a/packages/core/src/store/initialState.ts b/packages/core/src/store/initialState.ts index 92192e9e..0223df7c 100644 --- a/packages/core/src/store/initialState.ts +++ b/packages/core/src/store/initialState.ts @@ -48,7 +48,7 @@ const initialState: ReactFlowStore = { nodesConnectable: true, nodesFocusable: true, edgesFocusable: true, - edgesUpdatable: false, + edgesUpdatable: true, elementsSelectable: true, elevateNodesOnSelect: true, fitViewOnInit: false, diff --git a/packages/core/src/types/component-props.ts b/packages/core/src/types/component-props.ts index cae9da3b..46364257 100644 --- a/packages/core/src/types/component-props.ts +++ b/packages/core/src/types/component-props.ts @@ -112,6 +112,7 @@ export type ReactFlowProps = HTMLAttributes & { nodesFocusable?: boolean; nodeOrigin?: NodeOrigin; edgesFocusable?: boolean; + edgesUpdatable?: boolean; initNodeOrigin?: NodeOrigin; elementsSelectable?: boolean; selectNodesOnDrag?: boolean; diff --git a/packages/core/src/types/edges.ts b/packages/core/src/types/edges.ts index 1a21b377..7358b0e8 100644 --- a/packages/core/src/types/edges.ts +++ b/packages/core/src/types/edges.ts @@ -39,7 +39,7 @@ type DefaultEdge = { updatable?: EdgeUpdatable; } & EdgeLabelOptions; -export type EdgeUpdatable = boolean | 'target' | 'source'; +export type EdgeUpdatable = boolean | HandleType; export type SmoothStepPathOptions = { offset?: number; From c22e1c28c5555a638c2a8e82c3bfc986b3965d36 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 27 Mar 2023 16:55:24 +0200 Subject: [PATCH 33/36] chore(changeset): add --- .changeset/violet-houses-argue.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/violet-houses-argue.md diff --git a/.changeset/violet-houses-argue.md b/.changeset/violet-houses-argue.md new file mode 100644 index 00000000..0ae30058 --- /dev/null +++ b/.changeset/violet-houses-argue.md @@ -0,0 +1,7 @@ +--- +'@reactflow/background': minor +'@reactflow/core': minor +'@reactflow/minimap': minor +--- + +edges: add updatable option From 6c4af37f7c8ad75631e16d3a33dce527b7d39406 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 28 Mar 2023 12:03:47 +0200 Subject: [PATCH 34/36] refactor(reactflow): add node resizer package --- examples/vite-app/src/examples/NodeResizer/CustomResizer.tsx | 4 +--- .../vite-app/src/examples/NodeResizer/DefaultResizer.tsx | 5 +---- .../vite-app/src/examples/NodeResizer/HorizontalResizer.tsx | 5 +---- .../vite-app/src/examples/NodeResizer/VerticalResizer.tsx | 5 +---- examples/vite-app/src/examples/NodeResizer/index.tsx | 2 ++ packages/reactflow/package.json | 1 + packages/reactflow/src/base.css | 1 + packages/reactflow/src/index.ts | 1 + packages/reactflow/src/style.css | 1 + pnpm-lock.yaml | 2 ++ 10 files changed, 12 insertions(+), 15 deletions(-) diff --git a/examples/vite-app/src/examples/NodeResizer/CustomResizer.tsx b/examples/vite-app/src/examples/NodeResizer/CustomResizer.tsx index a36d9f18..a61b3c3c 100644 --- a/examples/vite-app/src/examples/NodeResizer/CustomResizer.tsx +++ b/examples/vite-app/src/examples/NodeResizer/CustomResizer.tsx @@ -1,8 +1,6 @@ import { memo, FC } from 'react'; -import { Handle, Position, NodeProps } from 'reactflow'; +import { Handle, Position, NodeProps, NodeResizeControl } from 'reactflow'; -import { NodeResizeControl } from '@reactflow/node-resizer'; -import '@reactflow/node-resizer/dist/style.css'; import ResizeIcon from './ResizeIcon'; const controlStyle = { diff --git a/examples/vite-app/src/examples/NodeResizer/DefaultResizer.tsx b/examples/vite-app/src/examples/NodeResizer/DefaultResizer.tsx index 3d9649a5..6ccd655a 100644 --- a/examples/vite-app/src/examples/NodeResizer/DefaultResizer.tsx +++ b/examples/vite-app/src/examples/NodeResizer/DefaultResizer.tsx @@ -1,8 +1,5 @@ import { memo, FC } from 'react'; -import { Handle, Position, NodeProps } from 'reactflow'; -import { NodeResizer } from '@reactflow/node-resizer'; - -import '@reactflow/node-resizer/dist/style.css'; +import { Handle, Position, NodeProps, NodeResizer } from 'reactflow'; const DefaultResizerNode: FC = ({ data, selected }) => { return ( diff --git a/examples/vite-app/src/examples/NodeResizer/HorizontalResizer.tsx b/examples/vite-app/src/examples/NodeResizer/HorizontalResizer.tsx index 2798ca3f..9e89d8c6 100644 --- a/examples/vite-app/src/examples/NodeResizer/HorizontalResizer.tsx +++ b/examples/vite-app/src/examples/NodeResizer/HorizontalResizer.tsx @@ -1,8 +1,5 @@ import { memo, FC } from 'react'; -import { Handle, Position, NodeProps } from 'reactflow'; -import { NodeResizeControl } from '@reactflow/node-resizer'; - -import '@reactflow/node-resizer/dist/style.css'; +import { Handle, Position, NodeProps, NodeResizeControl } from 'reactflow'; const HorizontalResizerNode: FC = ({ data }) => { return ( diff --git a/examples/vite-app/src/examples/NodeResizer/VerticalResizer.tsx b/examples/vite-app/src/examples/NodeResizer/VerticalResizer.tsx index a3d6515e..f1230ce1 100644 --- a/examples/vite-app/src/examples/NodeResizer/VerticalResizer.tsx +++ b/examples/vite-app/src/examples/NodeResizer/VerticalResizer.tsx @@ -1,8 +1,5 @@ import { memo, FC } from 'react'; -import { Handle, Position, NodeProps } from 'reactflow'; - -import { NodeResizeControl } from '@reactflow/node-resizer'; -import '@reactflow/node-resizer/dist/style.css'; +import { Handle, Position, NodeProps, NodeResizeControl } from 'reactflow'; const CustomNode: FC = ({ id, data }) => { return ( diff --git a/examples/vite-app/src/examples/NodeResizer/index.tsx b/examples/vite-app/src/examples/NodeResizer/index.tsx index d94a8d8b..6eb61b3a 100644 --- a/examples/vite-app/src/examples/NodeResizer/index.tsx +++ b/examples/vite-app/src/examples/NodeResizer/index.tsx @@ -6,6 +6,8 @@ import CustomResizer from './CustomResizer'; import VerticalResizer from './VerticalResizer'; import HorizontalResizer from './HorizontalResizer'; +import 'reactflow/dist/style.css'; + const nodeTypes = { defaultResizer: DefaultResizer, customResizer: CustomResizer, diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json index 479777d2..ab970755 100644 --- a/packages/reactflow/package.json +++ b/packages/reactflow/package.json @@ -39,6 +39,7 @@ "@reactflow/controls": "workspace:*", "@reactflow/core": "workspace:*", "@reactflow/minimap": "workspace:*", + "@reactflow/node-resizer": "workspace:*", "@reactflow/node-toolbar": "workspace:*" }, "peerDependencies": { diff --git a/packages/reactflow/src/base.css b/packages/reactflow/src/base.css index 069f6d82..9c7489c9 100644 --- a/packages/reactflow/src/base.css +++ b/packages/reactflow/src/base.css @@ -1,3 +1,4 @@ @import '@reactflow/core/dist/base.css'; @import '@reactflow/controls/dist/style.css'; @import '@reactflow/minimap/dist/style.css'; +@import '@reactflow/node-resizer/dist/style.css'; diff --git a/packages/reactflow/src/index.ts b/packages/reactflow/src/index.ts index 935883dc..9fefe1d5 100644 --- a/packages/reactflow/src/index.ts +++ b/packages/reactflow/src/index.ts @@ -3,5 +3,6 @@ export * from '@reactflow/minimap'; export * from '@reactflow/controls'; export * from '@reactflow/background'; export * from '@reactflow/node-toolbar'; +export * from '@reactflow/node-resizer'; export { ReactFlow as default } from '@reactflow/core'; diff --git a/packages/reactflow/src/style.css b/packages/reactflow/src/style.css index 96c6e6a1..38e265b7 100644 --- a/packages/reactflow/src/style.css +++ b/packages/reactflow/src/style.css @@ -1,3 +1,4 @@ @import '@reactflow/core/dist/style.css'; @import '@reactflow/controls/dist/style.css'; @import '@reactflow/minimap/dist/style.css'; +@import '@reactflow/node-resizer/dist/style.css'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3c4975fe..a977bd11 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -284,6 +284,7 @@ importers: '@reactflow/core': workspace:* '@reactflow/eslint-config': workspace:* '@reactflow/minimap': workspace:* + '@reactflow/node-resizer': workspace:^2.1.0 '@reactflow/node-toolbar': workspace:* '@reactflow/rollup-config': workspace:* '@reactflow/tsconfig': workspace:* @@ -296,6 +297,7 @@ importers: '@reactflow/controls': link:../controls '@reactflow/core': link:../core '@reactflow/minimap': link:../minimap + '@reactflow/node-resizer': link:../node-resizer '@reactflow/node-toolbar': link:../node-toolbar devDependencies: '@reactflow/eslint-config': link:../../tooling/eslint-config From 2fb4c2c82343751ff536da262de74bd9080321b4 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 28 Mar 2023 12:06:03 +0200 Subject: [PATCH 35/36] chore(changeset): add --- .changeset/yellow-students-think.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/yellow-students-think.md diff --git a/.changeset/yellow-students-think.md b/.changeset/yellow-students-think.md new file mode 100644 index 00000000..a0715a70 --- /dev/null +++ b/.changeset/yellow-students-think.md @@ -0,0 +1,5 @@ +--- +'reactflow': minor +--- + +add node-resizer to reactflow package From 81dfa7e6bca73395c68f9cb3a04dc73fe2092310 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 28 Mar 2023 12:43:28 +0200 Subject: [PATCH 36/36] chore(packages): bump --- .changeset/many-parents-applaud.md | 5 -- .changeset/nice-impalas-doubt.md | 5 -- .changeset/plenty-students-wash.md | 5 -- .changeset/rich-papayas-hope.md | 5 -- .changeset/sixty-turkeys-knock.md | 5 -- .changeset/thick-needles-march.md | 7 -- .changeset/two-walls-jam.md | 5 -- .changeset/violet-houses-argue.md | 7 -- .changeset/yellow-students-think.md | 5 -- packages/background/CHANGELOG.md | 11 +++ packages/background/package.json | 2 +- packages/controls/CHANGELOG.md | 7 ++ packages/controls/package.json | 2 +- packages/core/CHANGELOG.md | 21 +++++ packages/core/package.json | 2 +- packages/minimap/CHANGELOG.md | 11 +++ packages/minimap/package.json | 2 +- packages/node-toolbar/CHANGELOG.md | 7 ++ packages/node-toolbar/package.json | 2 +- packages/reactflow/CHANGELOG.md | 39 +++++++++ packages/reactflow/package.json | 2 +- pnpm-lock.yaml | 118 ++++++++++++++-------------- 22 files changed, 161 insertions(+), 114 deletions(-) delete mode 100644 .changeset/many-parents-applaud.md delete mode 100644 .changeset/nice-impalas-doubt.md delete mode 100644 .changeset/plenty-students-wash.md delete mode 100644 .changeset/rich-papayas-hope.md delete mode 100644 .changeset/sixty-turkeys-knock.md delete mode 100644 .changeset/thick-needles-march.md delete mode 100644 .changeset/two-walls-jam.md delete mode 100644 .changeset/violet-houses-argue.md delete mode 100644 .changeset/yellow-students-think.md diff --git a/.changeset/many-parents-applaud.md b/.changeset/many-parents-applaud.md deleted file mode 100644 index 3c4aad42..00000000 --- a/.changeset/many-parents-applaud.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@reactflow/core': patch ---- - -fix non-passive wheel event listener violation diff --git a/.changeset/nice-impalas-doubt.md b/.changeset/nice-impalas-doubt.md deleted file mode 100644 index 27d35bc6..00000000 --- a/.changeset/nice-impalas-doubt.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@reactflow/core': patch ---- - -prefix error keys with "error" diff --git a/.changeset/plenty-students-wash.md b/.changeset/plenty-students-wash.md deleted file mode 100644 index 72da2068..00000000 --- a/.changeset/plenty-students-wash.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@reactflow/core': patch ---- - -add connection result to store diff --git a/.changeset/rich-papayas-hope.md b/.changeset/rich-papayas-hope.md deleted file mode 100644 index 231daf67..00000000 --- a/.changeset/rich-papayas-hope.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@reactflow/minimap': minor ---- - -add inversePan and zoomStep props diff --git a/.changeset/sixty-turkeys-knock.md b/.changeset/sixty-turkeys-knock.md deleted file mode 100644 index 86cac224..00000000 --- a/.changeset/sixty-turkeys-knock.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@reactflow/core': patch ---- - -add options for useNodesInitialized, ignore hidden nodes diff --git a/.changeset/thick-needles-march.md b/.changeset/thick-needles-march.md deleted file mode 100644 index 26d0890e..00000000 --- a/.changeset/thick-needles-march.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@reactflow/background': minor -'@reactflow/core': minor -'@reactflow/minimap': minor ---- - -Handles: add isConnectableStart and isConnectableEnd props diff --git a/.changeset/two-walls-jam.md b/.changeset/two-walls-jam.md deleted file mode 100644 index 9c2eb07a..00000000 --- a/.changeset/two-walls-jam.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@reactflow/background': patch ---- - -add id and offset prop diff --git a/.changeset/violet-houses-argue.md b/.changeset/violet-houses-argue.md deleted file mode 100644 index 0ae30058..00000000 --- a/.changeset/violet-houses-argue.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@reactflow/background': minor -'@reactflow/core': minor -'@reactflow/minimap': minor ---- - -edges: add updatable option diff --git a/.changeset/yellow-students-think.md b/.changeset/yellow-students-think.md deleted file mode 100644 index a0715a70..00000000 --- a/.changeset/yellow-students-think.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'reactflow': minor ---- - -add node-resizer to reactflow package diff --git a/packages/background/CHANGELOG.md b/packages/background/CHANGELOG.md index ab3e23a6..60978e3d 100644 --- a/packages/background/CHANGELOG.md +++ b/packages/background/CHANGELOG.md @@ -1,5 +1,16 @@ # @reactflow/background +## 11.2.0 + +### Minor Changes + +- [#2941](https://github.com/wbkd/react-flow/pull/2941) Thanks [@Elringus](https://github.com/Elringus)! - add `id` and `offset` props + +### Patch Changes + +- Updated dependencies [[`098eee3d`](https://github.com/wbkd/react-flow/commit/098eee3d41dabc870777b081796401ff13b5a776), [`fe8cac0a`](https://github.com/wbkd/react-flow/commit/fe8cac0adb359109e0e9eafe8b9261ba354076bb), [`4a4ca171`](https://github.com/wbkd/react-flow/commit/4a4ca171955f5c8d58b23e3ad48406f1a21dc402), [`923a54c4`](https://github.com/wbkd/react-flow/commit/923a54c481b90954806202817ba844cfa7203a38), [`4d97a0ed`](https://github.com/wbkd/react-flow/commit/4d97a0ed168ce643fc0c99fa6b47cf1296d66065), [`c22e1c28`](https://github.com/wbkd/react-flow/commit/c22e1c28c5555a638c2a8e82c3bfc986b3965d36)]: + - @reactflow/core@11.7.0 + ## 11.1.10 ### Patch Changes diff --git a/packages/background/package.json b/packages/background/package.json index ade3b286..6f378c30 100644 --- a/packages/background/package.json +++ b/packages/background/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/background", - "version": "11.1.10", + "version": "11.2.0", "description": "Background component with different variants for React Flow", "keywords": [ "react", diff --git a/packages/controls/CHANGELOG.md b/packages/controls/CHANGELOG.md index 167f3d80..e4815ed6 100644 --- a/packages/controls/CHANGELOG.md +++ b/packages/controls/CHANGELOG.md @@ -1,5 +1,12 @@ # @reactflow/controls +## 11.1.11 + +### Patch Changes + +- Updated dependencies [[`098eee3d`](https://github.com/wbkd/react-flow/commit/098eee3d41dabc870777b081796401ff13b5a776), [`fe8cac0a`](https://github.com/wbkd/react-flow/commit/fe8cac0adb359109e0e9eafe8b9261ba354076bb), [`4a4ca171`](https://github.com/wbkd/react-flow/commit/4a4ca171955f5c8d58b23e3ad48406f1a21dc402), [`923a54c4`](https://github.com/wbkd/react-flow/commit/923a54c481b90954806202817ba844cfa7203a38), [`4d97a0ed`](https://github.com/wbkd/react-flow/commit/4d97a0ed168ce643fc0c99fa6b47cf1296d66065), [`c22e1c28`](https://github.com/wbkd/react-flow/commit/c22e1c28c5555a638c2a8e82c3bfc986b3965d36)]: + - @reactflow/core@11.7.0 + ## 11.1.10 ### Patch Changes diff --git a/packages/controls/package.json b/packages/controls/package.json index 6ca64cac..777fbd6c 100644 --- a/packages/controls/package.json +++ b/packages/controls/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/controls", - "version": "11.1.10", + "version": "11.1.11", "description": "Component to control the viewport of a React Flow instance", "keywords": [ "react", diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index b3491d4c..576d20ab 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,26 @@ # @reactflow/core +## 11.7.0 + +Most notable updates: + +- Handles: `isConnectableStart` and `isConnectableEnd` props to configure if you can start or end a connection at a certain handle +- Edges: `updatable` option to enable updates for specific edges +- useNodesInitialized: options to configure if hidden nodes should be included (false by default) + +### Minor Changes + +- [#2960](https://github.com/wbkd/react-flow/pull/2960) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - edges: add `updatable` option +- [#2958](https://github.com/wbkd/react-flow/pull/2958) [`4d97a0ed`](https://github.com/wbkd/react-flow/commit/4d97a0ed168ce643fc0c99fa6b47cf1296d66065) - handles: add `isConnectableStart` and `isConnectableEnd` props +- [#2956](https://github.com/wbkd/react-flow/pull/2956) [`923a54c4`](https://github.com/wbkd/react-flow/commit/923a54c481b90954806202817ba844cfa7203a38) - add options for `useNodesInitialized`, ignore hidden nodes by default + +### Patch Changes + +- [#2926](https://github.com/wbkd/react-flow/pull/2926) Thanks [@Elringus](https://github.com/Elringus)! - fix non-passive wheel event listener violation +- [#2933](https://github.com/wbkd/react-flow/pull/2933) [`fe8cac0a`](https://github.com/wbkd/react-flow/commit/fe8cac0adb359109e0e9eafe8b9261ba354076bb) - prefix error keys with "error" +- [#2939](https://github.com/wbkd/react-flow/pull/2939) [`4a4ca171`](https://github.com/wbkd/react-flow/commit/4a4ca171955f5c8d58b23e3ad48406f1a21dc402) - add connection result to store + + ## 11.6.1 ### Patch Changes diff --git a/packages/core/package.json b/packages/core/package.json index 1f8b0e4d..bc4e0b59 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/core", - "version": "11.6.1", + "version": "11.7.0", "description": "Core components and util functions of React Flow.", "keywords": [ "react", diff --git a/packages/minimap/CHANGELOG.md b/packages/minimap/CHANGELOG.md index 955cdf31..3b2f9d44 100644 --- a/packages/minimap/CHANGELOG.md +++ b/packages/minimap/CHANGELOG.md @@ -1,5 +1,16 @@ # @reactflow/minimap +## 11.5.0 + +### Minor Changes + +- [#2944](https://github.com/wbkd/react-flow/pull/2944) Thanks [@Elringus](https://github.com/Elringus)! - add `inversePan` and `zoomStep` props + +### Patch Changes + +- Updated dependencies [[`098eee3d`](https://github.com/wbkd/react-flow/commit/098eee3d41dabc870777b081796401ff13b5a776), [`fe8cac0a`](https://github.com/wbkd/react-flow/commit/fe8cac0adb359109e0e9eafe8b9261ba354076bb), [`4a4ca171`](https://github.com/wbkd/react-flow/commit/4a4ca171955f5c8d58b23e3ad48406f1a21dc402), [`923a54c4`](https://github.com/wbkd/react-flow/commit/923a54c481b90954806202817ba844cfa7203a38), [`4d97a0ed`](https://github.com/wbkd/react-flow/commit/4d97a0ed168ce643fc0c99fa6b47cf1296d66065), [`c22e1c28`](https://github.com/wbkd/react-flow/commit/c22e1c28c5555a638c2a8e82c3bfc986b3965d36)]: + - @reactflow/core@11.7.0 + ## 11.4.1 ### Patch Changes diff --git a/packages/minimap/package.json b/packages/minimap/package.json index 6e9124e3..e0766dab 100644 --- a/packages/minimap/package.json +++ b/packages/minimap/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/minimap", - "version": "11.4.1", + "version": "11.5.0", "description": "Minimap component for React Flow.", "keywords": [ "react", diff --git a/packages/node-toolbar/CHANGELOG.md b/packages/node-toolbar/CHANGELOG.md index 113cae08..e5fce14b 100644 --- a/packages/node-toolbar/CHANGELOG.md +++ b/packages/node-toolbar/CHANGELOG.md @@ -1,5 +1,12 @@ # @reactflow/node-toolbar +## 1.1.11 + +### Patch Changes + +- Updated dependencies [[`098eee3d`](https://github.com/wbkd/react-flow/commit/098eee3d41dabc870777b081796401ff13b5a776), [`fe8cac0a`](https://github.com/wbkd/react-flow/commit/fe8cac0adb359109e0e9eafe8b9261ba354076bb), [`4a4ca171`](https://github.com/wbkd/react-flow/commit/4a4ca171955f5c8d58b23e3ad48406f1a21dc402), [`923a54c4`](https://github.com/wbkd/react-flow/commit/923a54c481b90954806202817ba844cfa7203a38), [`4d97a0ed`](https://github.com/wbkd/react-flow/commit/4d97a0ed168ce643fc0c99fa6b47cf1296d66065), [`c22e1c28`](https://github.com/wbkd/react-flow/commit/c22e1c28c5555a638c2a8e82c3bfc986b3965d36)]: + - @reactflow/core@11.7.0 + ## 1.1.10 ### Patch Changes diff --git a/packages/node-toolbar/package.json b/packages/node-toolbar/package.json index 7e1c5645..71dad7ca 100644 --- a/packages/node-toolbar/package.json +++ b/packages/node-toolbar/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/node-toolbar", - "version": "1.1.10", + "version": "1.1.11", "description": "A toolbar component for React Flow that can be attached to a node.", "keywords": [ "react", diff --git a/packages/reactflow/CHANGELOG.md b/packages/reactflow/CHANGELOG.md index 80e8e7b6..f5eebcf3 100644 --- a/packages/reactflow/CHANGELOG.md +++ b/packages/reactflow/CHANGELOG.md @@ -1,5 +1,44 @@ # reactflow +## 11.7.0 + +Most notable updates: + +- `@reactflow/node-resizer` is now part of this package. No need to install it separately anymore. +- Handles: `isConnectableStart` and `isConnectableEnd` props to configure if you can start or end a connection at a certain handle +- Edges: `updatable` option to enable updates for specific edges +- MiniMap: `inversePan` and `zoomStep` props +- Background: `id` and `offset` props - this enables you to combine different patterns (useful if you want a graph paper like background for example) +- useNodesInitialized: options to configure if hidden nodes should be included (false by default) + +Big thanks to [@Elringus](https://github.com/Elringus) and [@bcakmakoglu](https://github.com/bcakmakoglu)! + +### Minor Changes + +- [#2964](https://github.com/wbkd/react-flow/pull/2964) [`2fb4c2c8`](https://github.com/wbkd/react-flow/commit/2fb4c2c82343751ff536da262de74bd9080321b4) - add @reactflow/node-resizer package +- [#2960](https://github.com/wbkd/react-flow/pull/2960) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - edges: add `updatable` option +- [#2958](https://github.com/wbkd/react-flow/pull/2958) [`4d97a0ed`](https://github.com/wbkd/react-flow/commit/4d97a0ed168ce643fc0c99fa6b47cf1296d66065) - handles: add `isConnectableStart` and `isConnectableEnd` props +- [#2956](https://github.com/wbkd/react-flow/pull/2956) [`923a54c4`](https://github.com/wbkd/react-flow/commit/923a54c481b90954806202817ba844cfa7203a38) - add options for `useNodesInitialized`, ignore hidden nodes by default +- [#2944](https://github.com/wbkd/react-flow/pull/2944) Thanks [@Elringus](https://github.com/Elringus)! - add `inversePan` and `zoomStep` props +- [#2941](https://github.com/wbkd/react-flow/pull/2941) Thanks [@Elringus](https://github.com/Elringus)! - background: add `id` and `offset` props + + +### Patch Changes + +- [#2926](https://github.com/wbkd/react-flow/pull/2926) Thanks [@Elringus](https://github.com/Elringus)! - fix non-passive wheel event listener violation +- [#2933](https://github.com/wbkd/react-flow/pull/2933) [`fe8cac0a`](https://github.com/wbkd/react-flow/commit/fe8cac0adb359109e0e9eafe8b9261ba354076bb) - prefix error keys with "error" +- [#2939](https://github.com/wbkd/react-flow/pull/2939) [`4a4ca171`](https://github.com/wbkd/react-flow/commit/4a4ca171955f5c8d58b23e3ad48406f1a21dc402) - add connection result to store + + +### Patch Changes + +- Updated dependencies [[`098eee3d`](https://github.com/wbkd/react-flow/commit/098eee3d41dabc870777b081796401ff13b5a776), [`fe8cac0a`](https://github.com/wbkd/react-flow/commit/fe8cac0adb359109e0e9eafe8b9261ba354076bb), [`4a4ca171`](https://github.com/wbkd/react-flow/commit/4a4ca171955f5c8d58b23e3ad48406f1a21dc402), [`c1448c2f`](https://github.com/wbkd/react-flow/commit/c1448c2f7415dd3b4b2c54e05404c5ab24e8978d), [`923a54c4`](https://github.com/wbkd/react-flow/commit/923a54c481b90954806202817ba844cfa7203a38), [`4d97a0ed`](https://github.com/wbkd/react-flow/commit/4d97a0ed168ce643fc0c99fa6b47cf1296d66065), [`771c7a5d`](https://github.com/wbkd/react-flow/commit/771c7a5d133ce96e9f7471394c15189e0657ce01), [`c22e1c28`](https://github.com/wbkd/react-flow/commit/c22e1c28c5555a638c2a8e82c3bfc986b3965d36)]: + - @reactflow/core@11.7.0 + - @reactflow/minimap@11.5.0 + - @reactflow/background@11.2.0 + - @reactflow/controls@11.1.11 + - @reactflow/node-toolbar@1.1.11 + ## 11.6.1 ### Patch Changes diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json index ab970755..ad4b8ed7 100644 --- a/packages/reactflow/package.json +++ b/packages/reactflow/package.json @@ -1,6 +1,6 @@ { "name": "reactflow", - "version": "11.6.1", + "version": "11.7.0", "description": "A highly customizable React library for building node-based editors and interactive flow charts", "keywords": [ "react", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a977bd11..b1b82b62 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,8 +32,8 @@ importers: '@changesets/changelog-github': registry.npmjs.org/@changesets/changelog-github/0.4.7 '@changesets/cli': registry.npmjs.org/@changesets/cli/2.25.0 '@preconstruct/cli': registry.npmjs.org/@preconstruct/cli/2.2.1 - '@typescript-eslint/eslint-plugin': registry.npmjs.org/@typescript-eslint/eslint-plugin/5.55.0_yarhzymb3lojuq6uyipzo3xllu - '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.55.0_id2eilsndvzhjjktb64trvy3gu + '@typescript-eslint/eslint-plugin': registry.npmjs.org/@typescript-eslint/eslint-plugin/5.57.0_mc6km5pjrfw7q236yimvgyb62m + '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.57.0_id2eilsndvzhjjktb64trvy3gu autoprefixer: registry.npmjs.org/autoprefixer/10.4.9_postcss@8.4.21 concurrently: registry.npmjs.org/concurrently/7.6.0 cypress: registry.npmjs.org/cypress/10.7.0 @@ -284,7 +284,7 @@ importers: '@reactflow/core': workspace:* '@reactflow/eslint-config': workspace:* '@reactflow/minimap': workspace:* - '@reactflow/node-resizer': workspace:^2.1.0 + '@reactflow/node-resizer': workspace:* '@reactflow/node-toolbar': workspace:* '@reactflow/rollup-config': workspace:* '@reactflow/tsconfig': workspace:* @@ -317,7 +317,7 @@ importers: devDependencies: eslint: registry.npmjs.org/eslint/8.23.1 eslint-config-prettier: registry.npmjs.org/eslint-config-prettier/8.5.0_eslint@8.23.1 - eslint-config-turbo: registry.npmjs.org/eslint-config-turbo/0.0.9_eslint@8.23.1 + eslint-config-turbo: registry.npmjs.org/eslint-config-turbo/1.8.6_eslint@8.23.1 eslint-plugin-react: registry.npmjs.org/eslint-plugin-react/7.32.2_eslint@8.23.1 tooling/rollup-config: @@ -2218,11 +2218,11 @@ packages: dev: true optional: true - registry.npmjs.org/@typescript-eslint/eslint-plugin/5.55.0_yarhzymb3lojuq6uyipzo3xllu: - resolution: {integrity: sha512-IZGc50rtbjk+xp5YQoJvmMPmJEYoC53SiKPXyqWfv15XoD2Y5Kju6zN0DwlmaGJp1Iw33JsWJcQ7nw0lGCGjVg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.55.0.tgz} - id: registry.npmjs.org/@typescript-eslint/eslint-plugin/5.55.0 + registry.npmjs.org/@typescript-eslint/eslint-plugin/5.57.0_mc6km5pjrfw7q236yimvgyb62m: + resolution: {integrity: sha512-itag0qpN6q2UMM6Xgk6xoHa0D0/P+M17THnr4SVgqn9Rgam5k/He33MA7/D7QoJcdMxHFyX7U9imaBonAX/6qA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.57.0.tgz} + id: registry.npmjs.org/@typescript-eslint/eslint-plugin/5.57.0 name: '@typescript-eslint/eslint-plugin' - version: 5.55.0 + version: 5.57.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: '@typescript-eslint/parser': ^5.0.0 @@ -2233,10 +2233,10 @@ packages: optional: true dependencies: '@eslint-community/regexpp': registry.npmjs.org/@eslint-community/regexpp/4.4.0 - '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.55.0_id2eilsndvzhjjktb64trvy3gu - '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.55.0 - '@typescript-eslint/type-utils': registry.npmjs.org/@typescript-eslint/type-utils/5.55.0_id2eilsndvzhjjktb64trvy3gu - '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.55.0_id2eilsndvzhjjktb64trvy3gu + '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.57.0_id2eilsndvzhjjktb64trvy3gu + '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.57.0 + '@typescript-eslint/type-utils': registry.npmjs.org/@typescript-eslint/type-utils/5.57.0_id2eilsndvzhjjktb64trvy3gu + '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.57.0_id2eilsndvzhjjktb64trvy3gu debug: registry.npmjs.org/debug/4.3.4 eslint: registry.npmjs.org/eslint/8.23.1 grapheme-splitter: registry.npmjs.org/grapheme-splitter/1.0.4 @@ -2249,11 +2249,11 @@ packages: - supports-color dev: true - registry.npmjs.org/@typescript-eslint/parser/5.55.0_id2eilsndvzhjjktb64trvy3gu: - resolution: {integrity: sha512-ppvmeF7hvdhUUZWSd2EEWfzcFkjJzgNQzVST22nzg958CR+sphy8A6K7LXQZd6V75m1VKjp+J4g/PCEfSCmzhw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.55.0.tgz} - id: registry.npmjs.org/@typescript-eslint/parser/5.55.0 + registry.npmjs.org/@typescript-eslint/parser/5.57.0_id2eilsndvzhjjktb64trvy3gu: + resolution: {integrity: sha512-orrduvpWYkgLCyAdNtR1QIWovcNZlEm6yL8nwH/eTxWLd8gsP+25pdLHYzL2QdkqrieaDwLpytHqycncv0woUQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.57.0.tgz} + id: registry.npmjs.org/@typescript-eslint/parser/5.57.0 name: '@typescript-eslint/parser' - version: 5.55.0 + version: 5.57.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 @@ -2262,9 +2262,9 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.55.0 - '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.55.0 - '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.55.0_typescript@4.9.4 + '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.57.0 + '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.57.0 + '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.57.0_typescript@4.9.4 debug: registry.npmjs.org/debug/4.3.4 eslint: registry.npmjs.org/eslint/8.23.1 typescript: registry.npmjs.org/typescript/4.9.4 @@ -2272,21 +2272,21 @@ packages: - supports-color dev: true - registry.npmjs.org/@typescript-eslint/scope-manager/5.55.0: - resolution: {integrity: sha512-OK+cIO1ZGhJYNCL//a3ROpsd83psf4dUJ4j7pdNVzd5DmIk+ffkuUIX2vcZQbEW/IR41DYsfJTB19tpCboxQuw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.55.0.tgz} + registry.npmjs.org/@typescript-eslint/scope-manager/5.57.0: + resolution: {integrity: sha512-NANBNOQvllPlizl9LatX8+MHi7bx7WGIWYjPHDmQe5Si/0YEYfxSljJpoTyTWFTgRy3X8gLYSE4xQ2U+aCozSw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.57.0.tgz} name: '@typescript-eslint/scope-manager' - version: 5.55.0 + version: 5.57.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: - '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.55.0 - '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.55.0 + '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.57.0 + '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.57.0 dev: true - registry.npmjs.org/@typescript-eslint/type-utils/5.55.0_id2eilsndvzhjjktb64trvy3gu: - resolution: {integrity: sha512-ObqxBgHIXj8rBNm0yh8oORFrICcJuZPZTqtAFh0oZQyr5DnAHZWfyw54RwpEEH+fD8suZaI0YxvWu5tYE/WswA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.55.0.tgz} - id: registry.npmjs.org/@typescript-eslint/type-utils/5.55.0 + registry.npmjs.org/@typescript-eslint/type-utils/5.57.0_id2eilsndvzhjjktb64trvy3gu: + resolution: {integrity: sha512-kxXoq9zOTbvqzLbdNKy1yFrxLC6GDJFE2Yuo3KqSwTmDOFjUGeWSakgoXT864WcK5/NAJkkONCiKb1ddsqhLXQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.57.0.tgz} + id: registry.npmjs.org/@typescript-eslint/type-utils/5.57.0 name: '@typescript-eslint/type-utils' - version: 5.55.0 + version: 5.57.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: '*' @@ -2295,8 +2295,8 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.55.0_typescript@4.9.4 - '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.55.0_id2eilsndvzhjjktb64trvy3gu + '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.57.0_typescript@4.9.4 + '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.57.0_id2eilsndvzhjjktb64trvy3gu debug: registry.npmjs.org/debug/4.3.4 eslint: registry.npmjs.org/eslint/8.23.1 tsutils: registry.npmjs.org/tsutils/3.21.0_typescript@4.9.4 @@ -2305,18 +2305,18 @@ packages: - supports-color dev: true - registry.npmjs.org/@typescript-eslint/types/5.55.0: - resolution: {integrity: sha512-M4iRh4AG1ChrOL6Y+mETEKGeDnT7Sparn6fhZ5LtVJF1909D5O4uqK+C5NPbLmpfZ0XIIxCdwzKiijpZUOvOug==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-5.55.0.tgz} + registry.npmjs.org/@typescript-eslint/types/5.57.0: + resolution: {integrity: sha512-mxsod+aZRSyLT+jiqHw1KK6xrANm19/+VFALVFP5qa/aiJnlP38qpyaTd0fEKhWvQk6YeNZ5LGwI1pDpBRBhtQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-5.57.0.tgz} name: '@typescript-eslint/types' - version: 5.55.0 + version: 5.57.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true - registry.npmjs.org/@typescript-eslint/typescript-estree/5.55.0_typescript@4.9.4: - resolution: {integrity: sha512-I7X4A9ovA8gdpWMpr7b1BN9eEbvlEtWhQvpxp/yogt48fy9Lj3iE3ild/1H3jKBBIYj5YYJmS2+9ystVhC7eaQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.55.0.tgz} - id: registry.npmjs.org/@typescript-eslint/typescript-estree/5.55.0 + registry.npmjs.org/@typescript-eslint/typescript-estree/5.57.0_typescript@4.9.4: + resolution: {integrity: sha512-LTzQ23TV82KpO8HPnWuxM2V7ieXW8O142I7hQTxWIHDcCEIjtkat6H96PFkYBQqGFLW/G/eVVOB9Z8rcvdY/Vw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.57.0.tgz} + id: registry.npmjs.org/@typescript-eslint/typescript-estree/5.57.0 name: '@typescript-eslint/typescript-estree' - version: 5.55.0 + version: 5.57.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: typescript: '*' @@ -2324,8 +2324,8 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.55.0 - '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.55.0 + '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.57.0 + '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.57.0 debug: registry.npmjs.org/debug/4.3.4 globby: registry.npmjs.org/globby/11.1.0 is-glob: registry.npmjs.org/is-glob/4.0.3 @@ -2336,11 +2336,11 @@ packages: - supports-color dev: true - registry.npmjs.org/@typescript-eslint/utils/5.55.0_id2eilsndvzhjjktb64trvy3gu: - resolution: {integrity: sha512-FkW+i2pQKcpDC3AY6DU54yl8Lfl14FVGYDgBTyGKB75cCwV3KpkpTMFi9d9j2WAJ4271LR2HeC5SEWF/CZmmfw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.55.0.tgz} - id: registry.npmjs.org/@typescript-eslint/utils/5.55.0 + registry.npmjs.org/@typescript-eslint/utils/5.57.0_id2eilsndvzhjjktb64trvy3gu: + resolution: {integrity: sha512-ps/4WohXV7C+LTSgAL5CApxvxbMkl9B9AUZRtnEFonpIxZDIT7wC1xfvuJONMidrkB9scs4zhtRyIwHh4+18kw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.57.0.tgz} + id: registry.npmjs.org/@typescript-eslint/utils/5.57.0 name: '@typescript-eslint/utils' - version: 5.55.0 + version: 5.57.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 @@ -2348,9 +2348,9 @@ packages: '@eslint-community/eslint-utils': registry.npmjs.org/@eslint-community/eslint-utils/4.2.0_eslint@8.23.1 '@types/json-schema': registry.npmjs.org/@types/json-schema/7.0.11 '@types/semver': registry.npmjs.org/@types/semver/7.3.13 - '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.55.0 - '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.55.0 - '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.55.0_typescript@4.9.4 + '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.57.0 + '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.57.0 + '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.57.0_typescript@4.9.4 eslint: registry.npmjs.org/eslint/8.23.1 eslint-scope: registry.npmjs.org/eslint-scope/5.1.1 semver: registry.npmjs.org/semver/7.3.8 @@ -2359,13 +2359,13 @@ packages: - typescript dev: true - registry.npmjs.org/@typescript-eslint/visitor-keys/5.55.0: - resolution: {integrity: sha512-q2dlHHwWgirKh1D3acnuApXG+VNXpEY5/AwRxDVuEQpxWaB0jCDe0jFMVMALJ3ebSfuOVE8/rMS+9ZOYGg1GWw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.55.0.tgz} + registry.npmjs.org/@typescript-eslint/visitor-keys/5.57.0: + resolution: {integrity: sha512-ery2g3k0hv5BLiKpPuwYt9KBkAp2ugT6VvyShXdLOkax895EC55sP0Tx5L0fZaQueiK3fBLvHVvEl3jFS5ia+g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.57.0.tgz} name: '@typescript-eslint/visitor-keys' - version: 5.55.0 + version: 5.57.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: - '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.55.0 + '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.57.0 eslint-visitor-keys: registry.npmjs.org/eslint-visitor-keys/3.3.0 dev: true @@ -3724,16 +3724,16 @@ packages: eslint: registry.npmjs.org/eslint/8.23.1 dev: true - registry.npmjs.org/eslint-config-turbo/0.0.9_eslint@8.23.1: - resolution: {integrity: sha512-j1cTdx3tRmKo0csyfQKhpuT8dynK9oddbK5nmrShoMpXI2qMbxHLYH7MWAid4FmJN8rYympy3VKw5U63Yazycg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-config-turbo/-/eslint-config-turbo-0.0.9.tgz} - id: registry.npmjs.org/eslint-config-turbo/0.0.9 + registry.npmjs.org/eslint-config-turbo/1.8.6_eslint@8.23.1: + resolution: {integrity: sha512-LSMqrHmFeQcYRuBnzrzw+B2bJ3+o8wxPkRwfK0Y+SSLsq2F/niRJ2kqB8j4uOSCfxybHHpFEB2CgUpQiiyfeoQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-config-turbo/-/eslint-config-turbo-1.8.6.tgz} + id: registry.npmjs.org/eslint-config-turbo/1.8.6 name: eslint-config-turbo - version: 0.0.9 + version: 1.8.6 peerDependencies: eslint: '>6.6.0' dependencies: eslint: registry.npmjs.org/eslint/8.23.1 - eslint-plugin-turbo: registry.npmjs.org/eslint-plugin-turbo/0.0.9_eslint@8.23.1 + eslint-plugin-turbo: registry.npmjs.org/eslint-plugin-turbo/1.8.6_eslint@8.23.1 dev: true registry.npmjs.org/eslint-plugin-prettier/4.2.1_cabrci5exjdaojcvd6xoxgeowu: @@ -3783,11 +3783,11 @@ packages: string.prototype.matchall: registry.npmjs.org/string.prototype.matchall/4.0.8 dev: true - registry.npmjs.org/eslint-plugin-turbo/0.0.9_eslint@8.23.1: - resolution: {integrity: sha512-fEsuSnYU3GLtT+s66mUuzDL1LaSieIx5uk3tPO0ToGv7hI2XzOfP24aPkQItTBGl7kq2JaVkRzPwcnfz8hkp0w==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-plugin-turbo/-/eslint-plugin-turbo-0.0.9.tgz} - id: registry.npmjs.org/eslint-plugin-turbo/0.0.9 + registry.npmjs.org/eslint-plugin-turbo/1.8.6_eslint@8.23.1: + resolution: {integrity: sha512-LieXzur+4XtIsLst8GdupTMhvGn2ebFetG3AVErh2jHBy1EobPHbatjcdNZQMy5EsdG35axQVB8KFF3jo4u+OQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-plugin-turbo/-/eslint-plugin-turbo-1.8.6.tgz} + id: registry.npmjs.org/eslint-plugin-turbo/1.8.6 name: eslint-plugin-turbo - version: 0.0.9 + version: 1.8.6 peerDependencies: eslint: '>6.6.0' dependencies: