[Snyk] Upgrade reactflow from 11.9.4 to 11.10.1 #1355

Closed
opened 2026-04-05 16:27:02 +02:00 by MrUnknownDE · 0 comments
Owner

Originally created by @simlarsen on 12/3/2023

This PR was automatically created by Snyk using the credentials of a real user.


Snyk has created this PR to upgrade reactflow from 11.9.4 to 11.10.1.

ℹ️ Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.


  • The recommended version is 2 versions ahead of your current version.
  • The recommended version was released 23 days ago, on 2023-11-10.
Release notes
Package name: reactflow
  • 11.10.1 - 2023-11-10

    Patch Changes

    Just a tiny fix for Typescript users who want to use the new screenToFlowPosition and flowToScreenPosition function of useReactFlow.

    • #3605 e71dec26 - fix(react-flow-instance): add screenToFlow and flowToScreen types
    • Updated dependencies [e71dec26]:
      • @ reactflow/core@11.10.1
      • @ reactflow/background@11.3.6
      • @ reactflow/controls@11.2.6
      • @ reactflow/minimap@11.7.6
      • @ reactflow/node-resizer@2.2.6
      • @ reactflow/node-toolbar@1.3.6
  • 11.10.0 - 2023-11-10

    Upcoming v12

    We want to make the migration for v12 as smooth as possible. That's why we added deprecation warnings for the following util functions:

    Deprecations / Renamings

    Rename useReactFlow.project to useReactFlow.screenToFlowPosition

    ⚠️ changes: no need to subtract react flow bounds anymore!

    before:

    const position = reactFlowInstance.project({
    x: event.clientX - reactFlowBounds.left,
    y: event.clientY - reactFlowBounds.top,
    });">
    const reactFlowBounds = reactFlowWrapper.current.getBoundingClientRect();

    const position = reactFlowInstance.project({
    x: event.clientX - reactFlowBounds.left,
    y: event.clientY - reactFlowBounds.top,
    });

    after:

    const position = reactFlowInstance.screenToFlowPosition({
      x: event.clientX,
      y: event.clientY,
    });

    Rename getTransformForBounds to getViewportForBounds

    ⚠️ changes: returns { x: number, y: number, zoom: number } instead of [number, number, number].

    before:

    const [x, y, zoom] = getTransformForBounds(bounds, width, height, 0.5, 2)

    after:

    const {x, y, zoom} = getViewportForBounds(bounds, width, height, 0.5, 2)

    Rename getRectOfNodes to getNodesBounds

    no changes, just a renaming.

    New features

    • added useReactFlow.flowToScreenPosition

    Minor Changes

    • #3597 a114c75b Thanks - chore(utils): add renamed functions and deprecations, add useReactFlow.flowToScreenPosition

    Patch Changes

  • 11.9.4 - 2023-10-16
from reactflow GitHub release notes

Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.

For more information:

🧐 View latest project report

🛠 Adjust upgrade PR settings

🔕 Ignore this dependency or unsubscribe from future upgrade PRs

*Originally created by @simlarsen on 12/3/2023* <p>This PR was automatically created by Snyk using the credentials of a real user.</p><br /><h3>Snyk has created this PR to upgrade reactflow from 11.9.4 to 11.10.1.</h3> :information_source: Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project. <hr/> - The recommended version is **2 versions** ahead of your current version. - The recommended version was released **23 days ago**, on 2023-11-10. <details> <summary><b>Release notes</b></summary> <br/> <details> <summary>Package name: <b>reactflow</b></summary> <ul> <li> <b>11.10.1</b> - <a href="https://snyk.io/redirect/github/xyflow/xyflow/releases/tag/11.10.1">2023-11-10</a></br><h3>Patch Changes</h3> <p>Just a tiny fix for Typescript users who want to use the new <code>screenToFlowPosition</code> and <code>flowToScreenPosition</code> function of <code>useReactFlow</code>.</p> <ul> <li><a href="https://snyk.io/redirect/github/xyflow/xyflow/pull/3605" data-hovercard-type="pull_request" data-hovercard-url="/xyflow/xyflow/pull/3605/hovercard">#3605</a> <a href="https://snyk.io/redirect/github/xyflow/xyflow/commit/e71dec263c8a8296d0a890c2fc7d0a5aac94f9e5"><code>e71dec26</code></a> - fix(react-flow-instance): add screenToFlow and flowToScreen types</li> <li>Updated dependencies [<a href="https://snyk.io/redirect/github/xyflow/xyflow/commit/e71dec263c8a8296d0a890c2fc7d0a5aac94f9e5"><code>e71dec26</code></a>]: <ul> <li>@ reactflow/core@11.10.1</li> <li>@ reactflow/background@11.3.6</li> <li>@ reactflow/controls@11.2.6</li> <li>@ reactflow/minimap@11.7.6</li> <li>@ reactflow/node-resizer@2.2.6</li> <li>@ reactflow/node-toolbar@1.3.6</li> </ul> </li> </ul> </li> <li> <b>11.10.0</b> - <a href="https://snyk.io/redirect/github/xyflow/xyflow/releases/tag/11.10.0">2023-11-10</a></br><h2>Upcoming v12</h2> <p>We want to make the migration for v12 as smooth as possible. That's why we added deprecation warnings for the following util functions:</p> <h3>Deprecations / Renamings</h3> <h4>Rename <code>useReactFlow.project</code> to <code>useReactFlow.screenToFlowPosition</code></h4> <p><g-emoji class="g-emoji" alias="warning">⚠️</g-emoji> <strong>changes</strong>: no need to subtract react flow bounds anymore!</p> <p>before:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const reactFlowBounds = reactFlowWrapper.current.getBoundingClientRect(); const position = reactFlowInstance.project({ x: event.clientX - reactFlowBounds.left, y: event.clientY - reactFlowBounds.top, });"><pre><span class="pl-k">const</span> <span class="pl-s1">reactFlowBounds</span> <span class="pl-c1">=</span> <span class="pl-s1">reactFlowWrapper</span><span class="pl-kos">.</span><span class="pl-c1">current</span><span class="pl-kos">.</span><span class="pl-en">getBoundingClientRect</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-k">const</span> <span class="pl-s1">position</span> <span class="pl-c1">=</span> <span class="pl-s1">reactFlowInstance</span><span class="pl-kos">.</span><span class="pl-en">project</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">x</span>: <span class="pl-s1">event</span><span class="pl-kos">.</span><span class="pl-c1">clientX</span> <span class="pl-c1">-</span> <span class="pl-s1">reactFlowBounds</span><span class="pl-kos">.</span><span class="pl-c1">left</span><span class="pl-kos">,</span> <span class="pl-c1">y</span>: <span class="pl-s1">event</span><span class="pl-kos">.</span><span class="pl-c1">clientY</span> <span class="pl-c1">-</span> <span class="pl-s1">reactFlowBounds</span><span class="pl-kos">.</span><span class="pl-c1">top</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p>after:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const position = reactFlowInstance.screenToFlowPosition({ x: event.clientX, y: event.clientY, });"><pre><span class="pl-k">const</span> <span class="pl-s1">position</span> <span class="pl-c1">=</span> <span class="pl-s1">reactFlowInstance</span><span class="pl-kos">.</span><span class="pl-en">screenToFlowPosition</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">x</span>: <span class="pl-s1">event</span><span class="pl-kos">.</span><span class="pl-c1">clientX</span><span class="pl-kos">,</span> <span class="pl-c1">y</span>: <span class="pl-s1">event</span><span class="pl-kos">.</span><span class="pl-c1">clientY</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <h4>Rename <code>getTransformForBounds</code> to <code>getViewportForBounds</code></h4> <p><g-emoji class="g-emoji" alias="warning">⚠️</g-emoji> <strong>changes</strong>: returns <code>{ x: number, y: number, zoom: number }</code> instead of <code>[number, number, number]</code>.</p> <p>before:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const [x, y, zoom] = getTransformForBounds(bounds, width, height, 0.5, 2)"><pre><span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">x</span><span class="pl-kos">,</span> <span class="pl-s1">y</span><span class="pl-kos">,</span> <span class="pl-s1">zoom</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-en">getTransformForBounds</span><span class="pl-kos">(</span><span class="pl-s1">bounds</span><span class="pl-kos">,</span> <span class="pl-s1">width</span><span class="pl-kos">,</span> <span class="pl-s1">height</span><span class="pl-kos">,</span> <span class="pl-c1">0.5</span><span class="pl-kos">,</span> <span class="pl-c1">2</span><span class="pl-kos">)</span></pre></div> <p>after:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const {x, y, zoom} = getViewportForBounds(bounds, width, height, 0.5, 2)"><pre><span class="pl-k">const</span> <span class="pl-kos">{</span>x<span class="pl-kos">,</span> y<span class="pl-kos">,</span> zoom<span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">getViewportForBounds</span><span class="pl-kos">(</span><span class="pl-s1">bounds</span><span class="pl-kos">,</span> <span class="pl-s1">width</span><span class="pl-kos">,</span> <span class="pl-s1">height</span><span class="pl-kos">,</span> <span class="pl-c1">0.5</span><span class="pl-kos">,</span> <span class="pl-c1">2</span><span class="pl-kos">)</span></pre></div> <h4>Rename <code>getRectOfNodes</code> to <code>getNodesBounds</code></h4> <p>no changes, just a renaming.</p> <h3>New features</h3> <ul> <li>added <code>useReactFlow.flowToScreenPosition</code></li> </ul> <h3>Minor Changes</h3> <ul> <li><a href="https://snyk.io/redirect/github/xyflow/xyflow/pull/3597" data-hovercard-type="pull_request" data-hovercard-url="/xyflow/xyflow/pull/3597/hovercard">#3597</a> <a href="https://snyk.io/redirect/github/xyflow/xyflow/commit/a114c75b79d1d7bd24937318119a824879fe0b54"><code>a114c75b</code></a> Thanks - chore(utils): add renamed functions and deprecations, add <code>useReactFlow.flowToScreenPosition</code></li> </ul> <h3>Patch Changes</h3> <ul> <li><a href="https://snyk.io/redirect/github/xyflow/xyflow/pull/3586" data-hovercard-type="pull_request" data-hovercard-url="/xyflow/xyflow/pull/3586/hovercard">#3586</a> <a href="https://snyk.io/redirect/github/xyflow/xyflow/commit/746fa4a0739719402bdc32bcbf18b577bb75cb1b"><code>746fa4a0</code></a> Thanks <a href="https://snyk.io/redirect/github/Nick-Lucas">@ Nick-Lucas</a>! - fix(intersection-helpers): use nodeRect instead of nodeOrRect</li> <li><a href="https://snyk.io/redirect/github/xyflow/xyflow/pull/3584" data-hovercard-type="pull_request" data-hovercard-url="/xyflow/xyflow/pull/3584/hovercard">#3584</a> <a href="https://snyk.io/redirect/github/xyflow/xyflow/commit/291db12fb1b7e72765fbf8a724f3853b1ff682fe"><code>291db12f</code></a> - fix(panOnScroll): respect zoomActivationKeyPressed when hovering a node</li> <li><a href="https://snyk.io/redirect/github/xyflow/xyflow/pull/3593" data-hovercard-type="pull_request" data-hovercard-url="/xyflow/xyflow/pull/3593/hovercard">#3593</a> <a href="https://snyk.io/redirect/github/xyflow/xyflow/commit/e1d3d59479cef7e55c4759fd05c7b1d5eb58d070"><code>e1d3d594</code></a> Thanks <a href="https://snyk.io/redirect/github/juspy">@ juspy</a>! - fix(useOnSelectionChange): multiple handlers</li> <li><a href="https://snyk.io/redirect/github/xyflow/xyflow/pull/3595" data-hovercard-type="pull_request" data-hovercard-url="/xyflow/xyflow/pull/3595/hovercard">#3595</a> <a href="https://snyk.io/redirect/github/xyflow/xyflow/commit/ddc40528dd90d3de677f773b6670dc57a2c8520b"><code>ddc40528</code></a> Thanks <a href="https://snyk.io/redirect/github/bcakmakoglu">@ bcakmakoglu</a>! - refactor(pan-activation): allow panning by scroll when pan activation key is pressed</li> <li><a href="https://snyk.io/redirect/github/xyflow/xyflow/pull/3596" data-hovercard-type="pull_request" data-hovercard-url="/xyflow/xyflow/pull/3596/hovercard">#3596</a> <a href="https://snyk.io/redirect/github/xyflow/xyflow/commit/e4c25caf7b699c1a50c3c8a9ffee59e00f0804cc"><code>e4c25caf</code></a> - refactor(handles): snap to handle center when above handle</li> <li>Updated dependencies [<a href="https://snyk.io/redirect/github/xyflow/xyflow/commit/a114c75b79d1d7bd24937318119a824879fe0b54"><code>a114c75b</code></a>, <a href="https://snyk.io/redirect/github/xyflow/xyflow/commit/746fa4a0739719402bdc32bcbf18b577bb75cb1b"><code>746fa4a0</code></a>, <a href="https://snyk.io/redirect/github/xyflow/xyflow/commit/291db12fb1b7e72765fbf8a724f3853b1ff682fe"><code>291db12f</code></a>, <a href="https://snyk.io/redirect/github/xyflow/xyflow/commit/e1d3d59479cef7e55c4759fd05c7b1d5eb58d070"><code>e1d3d594</code></a>, <a href="https://snyk.io/redirect/github/xyflow/xyflow/commit/ddc40528dd90d3de677f773b6670dc57a2c8520b"><code>ddc40528</code></a>, <a href="https://snyk.io/redirect/github/xyflow/xyflow/commit/e4c25caf7b699c1a50c3c8a9ffee59e00f0804cc"><code>e4c25caf</code></a>]: <ul> <li>@ reactflow/core@11.10.0</li> <li>@ reactflow/background@11.3.5</li> <li>@ reactflow/controls@11.2.5</li> <li>@ reactflow/minimap@11.7.5</li> <li>@ reactflow/node-resizer@2.2.5</li> <li>@ reactflow/node-toolbar@1.3.5</li> </ul> </li> </ul> </li> <li> <b>11.9.4</b> - 2023-10-16 </li> </ul> from <a href="https://snyk.io/redirect/github/xyflow/xyflow/releases">reactflow GitHub release notes</a> </details> </details> <hr/> **Note:** *You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.* For more information: <img src="https://api.segment.io/v1/pixel/track?data=eyJ3cml0ZUtleSI6InJyWmxZcEdHY2RyTHZsb0lYd0dUcVg4WkFRTnNCOUEwIiwiYW5vbnltb3VzSWQiOiI1MDk1MDkyMC00NmZlLTQ4YmMtOGMwYy0xM2U1NTFlNjU4ZjkiLCJldmVudCI6IlBSIHZpZXdlZCIsInByb3BlcnRpZXMiOnsicHJJZCI6IjUwOTUwOTIwLTQ2ZmUtNDhiYy04YzBjLTEzZTU1MWU2NThmOSJ9fQ==" width="0" height="0"/> 🧐 [View latest project report](https://app.snyk.io/org/oneuptime-RsC2nshvQ2Vnr35jHvMnMP/project/5dd2ef9c-1270-4729-aff4-e407805f7a9c?utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr) 🛠 [Adjust upgrade PR settings](https://app.snyk.io/org/oneuptime-RsC2nshvQ2Vnr35jHvMnMP/project/5dd2ef9c-1270-4729-aff4-e407805f7a9c/settings/integration?utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr) 🔕 [Ignore this dependency or unsubscribe from future upgrade PRs](https://app.snyk.io/org/oneuptime-RsC2nshvQ2Vnr35jHvMnMP/project/5dd2ef9c-1270-4729-aff4-e407805f7a9c/settings/integration?pkg&#x3D;reactflow&amp;utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr#auto-dep-upgrades) <!--- (snyk:metadata:{"prId":"50950920-46fe-48bc-8c0c-13e551e658f9","prPublicId":"50950920-46fe-48bc-8c0c-13e551e658f9","dependencies":[{"name":"reactflow","from":"11.9.4","to":"11.10.1"}],"packageManager":"npm","type":"auto","projectUrl":"https://app.snyk.io/org/oneuptime-RsC2nshvQ2Vnr35jHvMnMP/project/5dd2ef9c-1270-4729-aff4-e407805f7a9c?utm_source=github&utm_medium=referral&page=upgrade-pr","projectPublicId":"5dd2ef9c-1270-4729-aff4-e407805f7a9c","env":"prod","prType":"upgrade","vulns":[],"issuesToFix":[],"upgrade":[],"upgradeInfo":{"versionsDiff":2,"publishedDate":"2023-11-10T16:39:28.228Z"},"templateVariants":[],"hasFixes":false,"isMajorUpgrade":false,"isBreakingChange":false,"priorityScoreList":[]}) --->
Sign in to join this conversation.
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github/oneuptime#1355