brr

src/components/canvas.jsx

@@ -23,7 +23,7 @@ export default function Canvas(props) {
     endX: 0,
     endY: 0,
     name: "",
-    cardinality: Cardinality.ONE_TO_MANY,
+    cardinality: Cardinality.ONE_TO_ONE,
     updateConstraint: Constraint.none,
     deleteConstraint: Constraint.none,
     mandatory: false,
@@ -185,6 +185,7 @@ export default function Canvas(props) {
         name: `${props.tables[line.startTableId].name}_to_${
           props.tables[onRect.tableId].name
         }`,
+        id: prev.length
       },
     ]);
   };
@@ -304,7 +305,7 @@ export default function Canvas(props) {
               strokeDasharray="8,8"
             />
           )}
-          {props.relationships.map((e, i) => <Relationship data={e}/>)}
+          {props.relationships.map((e, i) => <Relationship key={i} data={e}/>)}
         </svg>
       </div>
     </div>

src/components/editor_panel.jsx

@@ -45,6 +45,7 @@ const EditorPanel = (props) => {
     <div>
       <ReferenceOverview
         relationships={props.relationships}
+        setRelationships={props.setRelationships}
         tables={props.tables}
       />
     </div>,

src/components/reference_overview.jsx

@@ -32,7 +32,15 @@ export default function ReferenceOverview(props) {
     <Collapse>
       {props.relationships.map((r, i) => (
         <Collapse.Panel key={i} header={<div>{r.name}</div>} itemKey={`${i}`}>
-          <Form>
+          <Form
+            onChange={(value) =>
+              props.setRelationships((prev) =>
+                prev.map((e, idx) =>
+                  idx === i ? { ...e, ...value.values } : e
+                )
+              )
+            }
+          >
             <div className="flex justify-between items-center my-1">
               <div className="me-3">
                 <strong>Primary: </strong>
@@ -127,26 +135,49 @@ export default function ReferenceOverview(props) {
               <Checkbox
                 value="mandetory"
                 defaultChecked={r.mandetory}
-                onChange={(checkedValues) => {}}
+                onChange={(checkedValues) =>
+                  props.setRelationships((prev) =>
+                    prev.map((e, idx) =>
+                      idx === i
+                        ? {
+                            ...e,
+                            [checkedValues.target.value]:
+                              checkedValues.target.checked,
+                          }
+                        : e
+                    )
+                  )
+                }
               ></Checkbox>
             </div>
-            <Row gutter={6} className="mt-1">
-              <Col span={12}>
-                <Button
-                  icon={<IconRowsStroked />}
-                  disabled={r.Cardinality === Cardinality.ONE_TO_ONE}
-                  block
-                >
-                  Extract to table
-                </Button>
-              </Col>
-              <Col span={12}>
-                <Button icon={<IconDeleteStroked />} block type="danger">
-                  Delete
-                </Button>
-              </Col>
-            </Row>
           </Form>
+          <Row gutter={6} className="mt-1">
+            <Col span={12}>
+              <Button
+                icon={<IconRowsStroked />}
+                disabled={r.cardinality === Cardinality.ONE_TO_ONE}
+                block
+              >
+                Extract to table
+              </Button>
+            </Col>
+            <Col span={12}>
+              <Button
+                icon={<IconDeleteStroked />}
+                block
+                type="danger"
+                onClick={() =>
+                  props.setRelationships((prev) =>
+                    prev
+                      .filter((e) => e.id !== i)
+                      .map((e, idx) => ({ ...e, id: idx }))
+                  )
+                }
+              >
+                Delete
+              </Button>
+            </Col>
+          </Row>
         </Collapse.Panel>
       ))}
     </Collapse>

src/components/relationship.jsx

@@ -85,11 +85,11 @@ export default function Relationship(props) {
       <defs>
         <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
           <feDropShadow
-            dx="2"
+            dx="0"
-            dy="2"
+            dy="0"
             stdDeviation="6"
             floodColor="gray"
-            floodOpacity="0.8"
+            floodOpacity="0.5"
           />
         </filter>
       </defs>
@@ -102,7 +102,7 @@ export default function Relationship(props) {
         )}
         stroke={hovered ? "blue" : "gray"}
         fill="none"
-        strokeWidth={2.0}
+        strokeWidth={2}
         filter="url(#shadow)"
         cursor="pointer"
         onMouseEnter={() => setHovered(true)}