Adding formatting and removing unused code

src/components/EditorCanvas/Relationship.jsx

@@ -2,6 +2,7 @@ import { useRef } from "react";
 import {
   Cardinality,
   darkBgTheme,
+  Notation,
   ObjectType,
   Tab,
 } from "../../data/constants";
@@ -10,7 +11,7 @@ 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";
+import { CrowOM, CrowOO, IDEFZM, DefaultNotation } from "./RelationshipFormat";
 
 
 const labelFontSize = 16;
@@ -26,9 +27,7 @@ export default function Relationship({ data }) {
 
   const pathRef = useRef();
   const labelRef = useRef();
-  const type = settings.notation === 'default' ? 0 : 10;
+  const relationshipType = data.lineType || "0";
-  const relationshipType=(5,type);
-
   let direction = 1;
   let cardinalityStart = "1";
   let cardinalityEnd = "1";
@@ -58,7 +57,7 @@ export default function Relationship({ data }) {
     // the translated values are to ensure backwards compatibility
     case t(Cardinality.MANY_TO_ONE):
     case Cardinality.MANY_TO_ONE:
-      if (settings.notation === 'default') {
+      if (settings.notation === Notation.DEFAULT) {
         cardinalityStart = "n";
         cardinalityEnd = "1";
       } else {
@@ -69,7 +68,7 @@ export default function Relationship({ data }) {
       break;
     case t(Cardinality.ONE_TO_MANY):
     case Cardinality.ONE_TO_MANY:
-      if (settings.notation === 'default') {
+      if (settings.notation === Notation.DEFAULT) {
         cardinalityStart = "1";
         cardinalityEnd = "n";
       } else {
@@ -80,7 +79,7 @@ export default function Relationship({ data }) {
       break;
     case t(Cardinality.ONE_TO_ONE):
     case Cardinality.ONE_TO_ONE:
-      if (settings.notation === 'default') {
+      if (settings.notation === Notation.DEFAULT) {
         cardinalityStart = "1";
         cardinalityEnd = "1";
       } else {
@@ -148,7 +147,7 @@ export default function Relationship({ data }) {
     }
   };
 
-  if ((settings.notation === 'crows_foot' || settings.notation === 'idef1x') && cardinalityEndX < cardinalityStartX){
+  if ((settings.notation === Notation.CROWS_FOOT || settings.notation === Notation.IDEF1X) && cardinalityEndX < cardinalityStartX){
     direction = -1;
   }
 
@@ -178,6 +177,20 @@ export default function Relationship({ data }) {
           strokeWidth={2}
           cursor="pointer"
         />
+        {settings.showCardinality && (
+          <>
+            {format(
+              pathRef,
+              cardinalityEndX,
+              cardinalityEndY,
+              cardinalityStartX,
+              cardinalityStartY,
+              direction,
+              cardinalityStart,
+              cardinalityEnd,
+            )}
+          </>
+        )}
         {settings.showRelationshipLabels && (
           <>
             <rect
@@ -200,7 +213,6 @@ export default function Relationship({ data }) {
             </text>
           </>
         )}
-        {format(pathRef.current, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalityStart, cardinalityEnd)}
       </g>
 
       <SideSheet

src/components/EditorCanvas/RelationshipFormat.jsx

@@ -1,4 +1,14 @@
-export function CrowOM(pathRef, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityStart, cardinalityEnd){
+export function CrowOM(
+  pathRef, 
+  cardinalityEndX, 
+  cardinalityEndY, 
+  cardinalityStartX, 
+  cardinalityStartY,  
+  direction, 
+  cardinalityStart, 
+  cardinalityEnd
+) {
+    
     return(
         pathRef &&(
             <>
@@ -30,9 +40,9 @@ export function CrowOM(pathRef, cardinalityEndX, cardinalityEndY, cardinalitySta
                     className="group-hover:fill-sky-700"
                 />
                 <text
-                    x={cardinalityStartX}
+                    x={cardinalityStartX-5}
-                    y={cardinalityStartY-10}
+                    y={cardinalityStartY-20}
-                    fill="black"
+                    fill= "gray"
                     strokeWidth="0.5"
                     textAnchor="middle"
                     alignmentBaseline="middle"
@@ -40,9 +50,9 @@ export function CrowOM(pathRef, cardinalityEndX, cardinalityEndY, cardinalitySta
                     {cardinalityStart}
                 </text>
                 <text
-                    x={cardinalityEndX-15}
+                    x={cardinalityEndX-8}
-                    y={cardinalityEndY-15}
+                    y={cardinalityEndY-24}
-                    fill="black"
+                    fill="gray"
                     strokeWidth="0.5"
                     textAnchor="middle"
                     alignmentBaseline="middle"
@@ -72,7 +82,16 @@ export function CrowOM(pathRef, cardinalityEndX, cardinalityEndY, cardinalitySta
     )
 }
 
-export function CrowOO(pathRef, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalitySart, cardinalityEnd){
+export function CrowOO(
+  pathRef, 
+  cardinalityEndX, 
+  cardinalityEndY, 
+  cardinalityStartX, 
+  cardinalityStartY,  
+  direction, 
+  cardinalitySart, 
+  cardinalityEnd
+) {
     return(
         pathRef && (
             <>
@@ -115,9 +134,9 @@ export function CrowOO(pathRef, cardinalityEndX, cardinalityEndY, cardinalitySta
             />
 
             <text
-              x={cardinalityStartX}
+              x={cardinalityStartX-8}
-              y={cardinalityStartY-15}
+              y={cardinalityStartY-20}
-              fill="black"
+              fill="gray"
               strokeWidth="0.5"
               textAnchor="middle"
               alignmentBaseline="middle"
@@ -126,8 +145,8 @@ export function CrowOO(pathRef, cardinalityEndX, cardinalityEndY, cardinalitySta
             </text>
             <text
                 x={cardinalityEndX-15}
-                y={cardinalityEndY-15}
+                y={cardinalityEndY-20}
-                fill="black"
+                fill="gray"
                 strokeWidth="0.5"
                 textAnchor="middle"
                 alignmentBaseline="middle"
@@ -139,82 +158,14 @@ export function CrowOO(pathRef, cardinalityEndX, cardinalityEndY, cardinalitySta
     )
 }
 
-
+export function DefaultNotation(
-export function CrowZM(pathRef, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityStart, cardinalityEnd){
+  pathRef, 
-  return(
+  cardinalityEndX, 
-      pathRef &&(
+  cardinalityEndY, cardinalityStartX, 
-          <>
+  cardinalityStartY, 
-            <circle
+  cardinalityStart, 
-              cx={cardinalityEndX-24}
+  cardinalityEnd
-              cy={cardinalityEndY}
+) {
-              r="4"
-              stroke="gray"
-              strokeWidth='2'
-              fill="none"
-              className="group-hover:fill-sky-700"
-            />
-              <line
-                  x1={cardinalityEndX-(20*direction)}
-                  y1={cardinalityEndY}
-                  x2={cardinalityEndX+1}
-                  y2={cardinalityEndY-10}
-                  stroke="gray"
-                  strokeWidth='2'
-                  className="group-hover:fill-sky-700"
-              />
-              <line
-                  x1={cardinalityEndX-20*direction}
-                  y1={cardinalityEndY}
-                  x2={cardinalityEndX+1}
-                  y2={cardinalityEndY+10}
-                  stroke="gray"
-                  strokeWidth='2'
-                  className="group-hover:fill-sky-700"
-              />
-              <text
-                  x={cardinalityStartX}
-                  y={cardinalityStartY-10}
-                  fill="black"
-                  strokeWidth="0.5"
-                  textAnchor="middle"
-                  alignmentBaseline="middle"
-              >
-                  {cardinalityStart}
-              </text>
-              <text
-                  x={cardinalityEndX-15}
-                  y={cardinalityEndY-15}
-                  fill="black"
-                  strokeWidth="0.5"
-                  textAnchor="middle"
-                  alignmentBaseline="middle"
-              >
-                  {cardinalityEnd}
-              </text>
-              <line
-                x1={cardinalityStartX-(15*direction)}
-                y1={cardinalityStartY+10}
-                x2={cardinalityStartX-(15*direction)}
-                y2={cardinalityStartY-10}
-                stroke="gray"
-                strokeWidth='2'
-                className="group-hover:fill-sky-700"
-              />
-              <line
-                x1={cardinalityStartX-(10*direction)}
-                y1={cardinalityStartY+10}
-                x2={cardinalityStartX-(10*direction)}
-                y2={cardinalityStartY-10}
-                stroke="gray"
-                strokeWidth='2'
-                className="group-hover:fill-sky-700"
-              />
-          </>
-      )
-  )
-}
-
-export function DefaultNotation(pathRef, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalityStart, cardinalityEnd){
   return(
       pathRef && (
         <>
@@ -257,7 +208,16 @@ export function DefaultNotation(pathRef, cardinalityEndX, cardinalityEndY, cardi
   )
 }
 
-export function IDEFZM(pathRef, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityStart, cardinalityEnd){
+export function IDEFZM(
+  pathRef, 
+  cardinalityEndX, 
+  cardinalityEndY, 
+  cardinalityStartX, 
+  cardinalityStartY,  
+  direction, 
+  cardinalityStart, 
+  cardinalityEnd
+) {
   return(
       pathRef && (
           <>
@@ -271,9 +231,9 @@ export function IDEFZM(pathRef, cardinalityEndX, cardinalityEndY, cardinalitySta
               className="group-hover:fill-sky-700"
             />
               <text
-                  x={cardinalityStartX}
+                  x={cardinalityStartX-8}
-                  y={cardinalityStartY-10}
+                  y={cardinalityStartY-20}
-                  fill="black"
+                  fill="grey"
                   strokeWidth="0.5"
                   textAnchor="middle"
                   alignmentBaseline="middle"
@@ -282,8 +242,8 @@ export function IDEFZM(pathRef, cardinalityEndX, cardinalityEndY, cardinalitySta
               </text>
               <text
                   x={cardinalityEndX-15}
-                  y={cardinalityEndY-15}
+                  y={cardinalityEndY-20}
-                  fill="black"
+                  fill="grey"
                   strokeWidth="0.5"
                   textAnchor="middle"
                   alignmentBaseline="middle"

src/components/EditorCanvas/Table.jsx

@@ -5,6 +5,7 @@ import {
   tableFieldHeight,
   tableHeaderHeight,
   tableColorStripHeight,
+  Notation,
 } from "../../data/constants";
 import {
   IconEdit,
@@ -77,8 +78,8 @@ export default function Table(props) {
           onDoubleClick={openEditor}
           className={`border-2 hover:border-dashed hover:border-blue-500
                select-none w-full ${
-                 settings.notation !== "default"
+                 settings.notation !== Notation.DEFAULT
-                   ? "transparent no-border"
+                   ? "border-none"
                    : "rounded-lg"
                } ${
                  selectedElement.id === tableData.id &&
@@ -90,21 +91,23 @@ export default function Table(props) {
         >
           <div
             className={`h-[10px] w-full ${
-               settings.notation !== "default"
+               settings.notation !== Notation.DEFAULT
                  ? ""
                  : "rounded-t-md"
             }`}
-            style={{ backgroundColor: tableData.color, height: settings.notation !== "default" ? 0 : "10px" }}
+            style={{ backgroundColor: tableData.color, height: settings.notation !== Notation.DEFAULT ? 0 : "10px" }}
           />
           <div
             className={`overflow-hidden font-bold h-[40px] flex justify-between items-center border-b border-gray-400 ${
-              settings.mode === "light" ? "bg-zinc-200" : "bg-zinc-900"
+              settings.notation !== Notation.DEFAULT
-            } ${
+              ? "bg-transparent"
-              settings.notation !== "default" ? "transparent" : ""
+              : settings.mode === "light"
+              ? "bg-zinc-200"
+              : "bg-zinc-900"
             }`}
           >
             <div className={` px-3 overflow-hidden text-ellipsis whitespace-nowrap ${
-               settings.notation !== "default"
+               settings.notation !== Notation.DEFAULT
                  ? ""
                  : ""
             }`}
@@ -294,17 +297,23 @@ export default function Table(props) {
     return (
       <div
         className={`
-          ${
+          ${(tableData.fields.length === 1 && settings.notation === Notation.DEFAULT)
-          (fieldData.primary && settings.notation !== "default" && primaryKeyCount === 1)
+            ? "rounded-b-md"
+            : ""
+          }${(tableData.fields.length === 1 && settings.notation !== Notation.DEFAULT)
+            ? "border-l border-r border-gray-400"
+            : ""
+          }${
+          (fieldData.primary && settings.notation !== Notation.DEFAULT && primaryKeyCount === 1)
             ? "border-b border-gray-400"
             : ""
           }${
-            (fieldData.primary && settings.notation !== "default" && index ===primaryKeyCount - 1)
+            (fieldData.primary && settings.notation !== Notation.DEFAULT && index ===primaryKeyCount - 1)
               ? "border-b border-gray-400"
               : ""
             } 
           ${
-          (!fieldData.primary && settings.notation !== "default" )
+          (!fieldData.primary && settings.notation !== Notation.DEFAULT )
             ? "border-l border-r"
             : ""
           } ${
@@ -312,24 +321,23 @@ export default function Table(props) {
             ? "bg-zinc-100 text-zinc-800"
             : "bg-zinc-800 text-zinc-200"
           } ${
-          (settings.notation !== "default" && index !== tableData.fields.length - 1)
+          (settings.notation !== Notation.DEFAULT && index !== tableData.fields.length - 1)
             ? "border-l border-r border-gray-400"
             : ""
           } ${
-          (settings.notation !== "default" && index === tableData.fields.length - 1)
+          (settings.notation !== Notation.DEFAULT && index === tableData.fields.length - 1)
             ? "border-b border-gray-400"
             : ""
           } ${
-            (fieldData.primary && settings.notation === "default")
+            (fieldData.primary && settings.notation === Notation.DEFAULT)
               ? "border-b border-gray-400"
               : ""
           }${
-            (settings.notation === "default" && index !== tableData.fields.length - 1 && fieldData.primary === false)
+            (settings.notation === Notation.DEFAULT && index !== tableData.fields.length - 1 && fieldData.primary === false)
               ? "border-b border-gray-400"
               : ""
           }${
-            // Checa que cuando seas el último se redondee
+          (settings.notation === Notation.DEFAULT && index === tableData.fields.length - 1)
-          (settings.notation === "default" && index === tableData.fields.length - 1)
             ? "rounded-b-md"
             : ""
         } group h-[36px] px-2 py-1 flex justify-between items-center gap-1 w-full overflow-hidden`}
@@ -360,7 +368,7 @@ export default function Table(props) {
         >
           <button
             className={`flex-shrink-0 w-[10px] h-[10px] bg-[#2f68adcc] rounded-full ${
-              (fieldData.primary && settings.notation !== "default")
+              (fieldData.primary && settings.notation !== Notation.DEFAULT)
                 ? "bg-[#ff2222cc]"
                 : "bg-[#2f68adcc]"
             }`}
@@ -406,7 +414,7 @@ export default function Table(props) {
             />
           ) : (
             <div className="flex gap-1 items-center">
-              {settings.notation !== "default" ? (
+              {settings.notation !== Notation.DEFAULT ? (
                 <>
                 <span>
                   {fieldData.type +

src/components/EditorHeader/ControlPanel.jsx

@@ -40,6 +40,7 @@ import {
   SIDESHEET,
   DB,
   IMPORT_FROM,
+  Notation,
 } from "../../data/constants";
 import jsPDF from "jspdf";
 import { useHotkeys } from "react-hotkeys-hook";
@@ -1220,33 +1221,33 @@ export default function ControlPanel({
         function: viewGrid,
         shortcut: "Ctrl+Shift+G",
       },
-      // show_cardinality: {
+      show_cardinality: {
-      //   state: settings.showCardinality ? (
+        state: settings.showCardinality ? (
-      //     <i className="bi bi-toggle-on" />
+          <i className="bi bi-toggle-on" />
-      //   ) : (
+        ) : (
-      //     <i className="bi bi-toggle-off" />
+          <i className="bi bi-toggle-off" />
-      //   ),
+        ),
-      //   function: () =>
+        function: () =>
-      //     setSettings((prev) => ({
+          setSettings((prev) => ({
-      //       ...prev,
+            ...prev,
-      //       showCardinality: !prev.showCardinality,
+            showCardinality: !prev.showCardinality,
-      //     })),
+          })),
-      // },
+      },
       notation: {
         children: [
           {
             default_notation: () => {
-              setSettings((prev) => ({ ...prev, notation: "default" }));
+              setSettings((prev) => ({ ...prev, notation: Notation.DEFAULT }));
             },
           },
           {
             crows_foot_notation: () => {
-              setSettings((prev) => ({ ...prev, notation: "crows_foot" }));
+              setSettings((prev) => ({ ...prev, notation: Notation.CROWS_FOOT }));
             },
           },
           {
             idef1x_notation: () => {
-              setSettings((prev) => ({ ...prev, notation: "idef1x" }));
+              setSettings((prev) => ({ ...prev, notation: Notation.IDEF1X }));
             },
           },
         ],

src/context/SettingsContext.jsx

@@ -1,6 +1,5 @@
 import { createContext, useEffect, useState } from "react";
-import { tableWidth } from "../data/constants";
+import { tableWidth, Notation } from "../data/constants";
-
 const defaultSettings = {
   strictMode: false,
   showFieldSummary: true,
@@ -10,7 +9,7 @@ const defaultSettings = {
   panning: true,
   showCardinality: true,
   showRelationshipLabels: true,
-  notation: "default",
+  notation: Notation.DEFAULT,
   tableWidth: tableWidth,
   showDebugCoordinates: false,
 };

src/data/constants.js

@@ -34,7 +34,11 @@ export const Cardinality = {
   ONE_TO_MANY: "one_to_many",
   MANY_TO_ONE: "many_to_one",
 };
-
+export const Notation = {
+  DEFAULT: "default",
+  CROWS_FOOT: "crows_foot",
+  IDEF1X: "idef1x",
+}
 export const Constraint = {
   NONE: "No action",
   RESTRICT: "Restrict",

src/i18n/locales/en.js

@@ -50,9 +50,9 @@ const en = {
     reset_view: "Reset view",
     show_grid: "Show grid",
     show_cardinality: "Show cardinality",
-    default_notation: "Default notation",
+    default_notation: "Default",
-    crows_foot_notation: "Crow's foot notation",
+    crows_foot_notation: "Crow's foot",
-    idef1x_notation: "IDEF1X notation",
+    idef1x_notation: "IDEF1X",
     notation: "Notation",
     theme: "Theme",
     light: "Light",

src/index.css

@@ -134,8 +134,7 @@
 }
 
 .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);
 }
 
 .bg-dots {
@@ -192,11 +191,3 @@
     opacity: 0;
   }
 }
-
-.transparent {
-	background-color: transparent;
-}
-
-.no-border {
-	border: none;
-}