5 ms·
On the live playground if I go to dynamic nodes. Add a few nodes so that I have node 1, node 2, node 3, node 4 then delete node 3, and add another node. I get
by LandR 6y ago
On the live playground if I go to dynamic nodes.
Add a few nodes so that I have node 1, node 2, node 3, node 4 then delete node 3, and add another node. I get two node 4
Now if I try to drag any of the two node 4, it always thinks I want to drag the latest node 4 that was added...
- peteradio 6y agopatch: @@ -2,6 +2,8 @@ import Diagram, { createSchema, useSchema } from 'beautiful-react-diagrams'; import { Button } from 'beautiful-react-ui'; +let lastid=1 + const initialSchema = createSchema({ nodes: [ { @@ -39,8 +41,8 @@ const UncontrolledDiagram = () => { const addNewNode = () => { const nextNode = { - id: `node-${schema.nodes.length+1}`, - content: `Node ${schema.nodes.length+1}`, + id: `node-${lastid+=1}`, + content: `Node ${lastid}`, coordinates: [ schema.nodes[schema.nodes.length - 1].coordinates[0] + 100, schema.nodes[schema.nodes.length - 1].coordinates[1],
- capableweb 6y agoThere are a couple of issues with this patch. Using the component multiple times will lead to duplication in ids across the DOM which is not permitted. If addNewNode is called from multiple places at the same time, the id and content attr might not have the same value in lastid anymore. You're assigning values to a semi-global var in a very narrow scope, won't introduce bugs, but hard to see the assignment when it's hidden like that. Changing it to be a random string that gets created inside addNewNode instead removes all those issues.
- peteradio 6y agoAgreed, unique string would be ideal. Not sure how within this demo you are able to create duplicate ids with the above patch (clearly you can without the patch though...). Purpose of patch is only to fix demo, not library code.