Adding Crow's Foot and IDEF1X notation for diagrams #334

Francisco-Galindo · 2025-01-14T18:21:50Z

We want to add both notations to the editor, through a setting so users can select which notation they like best. Adding IDEF1X in particular this would allow our school to use this project as their main DBER editor. Would fix #301.

Support for hierarchical relationships is being worked on, in a non-breaking manner so this doesn't disrupt other people's workflows.

IDEF1X would look like this:

Hierarchies would look something like this:

vercel · 2025-01-14T18:21:54Z

@Francisco-Galindo is attempting to deploy a commit to the dottle's projects Team on Vercel.

A member of the Team first needs to authorize it.

1ilit · 2025-01-16T02:10:40Z

nice work, is this pr ready for review?

vercel · 2025-03-05T12:01:46Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
drawdb	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 14, 2025 3:31pm

pabloem · 2025-03-14T15:03:04Z

@1ilit could you please approve CI to build / deploy? we think this is ready for reciew : )

1ilit

Great work guys, really appreciate it. I'm leaving some comments for now but will take a closer look once these are resolved. Feel free to reach out if you need clarification or have any questions

1ilit · 2025-03-20T19:06:32Z

src/index.css

@@ -134,7 +134,8 @@
 }

 .table-border {
-  border-color: rgba(var(--semi-grey-2), 1);
+  /* border-color: rgba(var(--semi-grey-2), 1); */
+  border-color: rgba(0, 255, 0, 1);


Is there a reason for this change? Actaully i'm checking now and this class is not used anywhere you can remove it if it has no use

1ilit · 2025-03-20T19:20:23Z

src/i18n/locales/en.js

@@ -50,6 +50,10 @@ const en = {
    reset_view: "Reset view",
    show_grid: "Show grid",
    show_cardinality: "Show cardinality",
+    default_notation: "Default notation",


Let's remove the word 'notation' here so that we have 'Notation'>'Crow's foot' | 'IDEF1X' | 'Default'

1ilit · 2025-03-20T19:42:26Z

src/context/SettingsContext.jsx

@@ -10,6 +10,7 @@ const defaultSettings = {
  panning: true,
  showCardinality: true,
  showRelationshipLabels: true,
+  notation: "default",


Instead of using string constants here let's have an object like this in constants.js

const Notation = { DEFAULT: "default", CROWS_FOOT: "crows_foot", IDEF1X: "idef1x", NONE: "none", };

and you can use Notation.DEFAULT, for example, instead of constants

This way we can mimic an enum and have a more unified approach

1ilit · 2025-03-20T19:44:19Z

src/components/EditorHeader/ControlPanel.jsx

+      notation: {
+        children: [
+          {
+            default_notation: () => {


When you add the Notation object you can reuse the keys here

1ilit · 2025-03-20T19:45:36Z

src/components/EditorHeader/ControlPanel.jsx

+            idef1x_notation: () => {
+              setSettings((prev) => ({ ...prev, notation: "idef1x" }));
+            },
+          },


Let's also keep the option to not show cardinalities at all. Some people, e.g. me, don't really care about the cardinality and prefer not to set it and not to show it

1ilit · 2025-03-20T20:21:17Z

src/components/EditorCanvas/Relationship.jsx

-            </text>
-          </>
-        )}
+        {format(pathRef.current, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalityStart, cardinalityEnd)}


Please format this

1ilit · 2025-03-20T21:33:23Z

src/components/EditorCanvas/RelationshipFormat.jsx

+                y2={cardinalityEndY-15}
+                stroke="gray"
+                strokeWidth='2'
+                className="group-hover:fill-sky-700"


Hovering over the relationship doesn't make these lines blue:

you'll need to set the stroke color instead of fill to have this take effect

1ilit · 2025-03-20T21:47:17Z

src/context/SettingsContext.jsx

@@ -10,6 +10,7 @@ const defaultSettings = {
  panning: true,
  showCardinality: true,
  showRelationshipLabels: true,
+  notation: "default",
  tableWidth: tableWidth,
  showDebugCoordinates: false,
 };


On line 26 add this to prevent any errors that might arise for the cached settings not containing the notation field

setSettings({ ...defaultSettings, ...JSON.parse(settings) });

1ilit · 2025-03-20T21:48:39Z

src/components/EditorCanvas/Relationship.jsx

@@ -10,6 +10,8 @@ import { useDiagram, useSettings, useLayout, useSelect } from "../../hooks";
 import { useTranslation } from "react-i18next";
 import { SideSheet } from "@douyinfe/semi-ui";
 import RelationshipInfo from "../EditorSidePanel/RelationshipsTab/RelationshipInfo";
+import { CrowOM, CrowOO, CrowZM, IDEFZM, DefaultNotation } from "./RelationshipFormat";


CromZM is imported but not used, causes linting error. Also remove the function definition if not used

1ilit · 2025-03-20T21:53:37Z

src/context/SettingsContext.jsx

@@ -10,6 +10,7 @@ const defaultSettings = {
  panning: true,
  showCardinality: true,


This is no longer used

Patricio2002 and others added 8 commits January 14, 2025 12:09

crowfoot

0f47cbb

Agregar botón para cambiar de notación

72e5d76

Using cached settings

6b6c5bc

Agrego localización para inglés y español de selección de notaciones

d41876e

IDEF1x

a0f5fc2

Agregar opción para cambiar a notación idef1x

392cd0a

Agregar locale para menú de elección de IDEF1X

413dfa0

Refactor: selection of path to draw for relationships

cc08f45

Add table styling for crows_foot and idef1x

8f9c447

vercel bot deployed to Preview March 5, 2025 12:02 View deployment

HansMarcus01 and others added 5 commits March 6, 2025 10:51

slight modifications to the table view

50e7201

fixing bug of the constraint null and not null

0c3b428

Adding a dynamic box for rowsof type primary key

a6f3f5f

Merge branch 'main' into notation

a3886e7

Make cardinalities look decent on all notations

f268f69

vercel bot deployed to Preview March 14, 2025 15:31 View deployment

1ilit marked this pull request as ready for review March 20, 2025 21:51

1ilit requested changes Mar 20, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding Crow's Foot and IDEF1X notation for diagrams #334

Adding Crow's Foot and IDEF1X notation for diagrams #334

Francisco-Galindo commented Jan 14, 2025 •

edited

Loading

vercel bot commented Jan 14, 2025

1ilit commented Jan 16, 2025

vercel bot commented Mar 5, 2025 •

edited

Loading

pabloem commented Mar 14, 2025

1ilit left a comment

1ilit Mar 20, 2025

1ilit Mar 20, 2025

1ilit Mar 20, 2025

1ilit Mar 20, 2025

1ilit Mar 20, 2025

1ilit Mar 20, 2025

1ilit Mar 20, 2025

1ilit Mar 20, 2025

1ilit Mar 20, 2025

1ilit Mar 20, 2025

		@@ -10,6 +10,7 @@ const defaultSettings = {
		panning: true,
		showCardinality: true,

Adding Crow's Foot and IDEF1X notation for diagrams #334

Are you sure you want to change the base?

Adding Crow's Foot and IDEF1X notation for diagrams #334

Conversation

Francisco-Galindo commented Jan 14, 2025 • edited Loading

vercel bot commented Jan 14, 2025

1ilit commented Jan 16, 2025

vercel bot commented Mar 5, 2025 • edited Loading

pabloem commented Mar 14, 2025

1ilit left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Francisco-Galindo commented Jan 14, 2025 •

edited

Loading

vercel bot commented Mar 5, 2025 •

edited

Loading