3 ms·
patch: @@ -2,6 +2,8 @@ import Diagram, { createSchema, useSchema } from 'beautiful-react-diagrams'; import { Button } from 'beautiful-react-ui'; +le
by peteradio 6y ago
patch:
@@ -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.