Add table styling for crows_foot and idef1x

src/components/EditorCanvas/Table.jsx

@@ -70,34 +70,45 @@ export default function Table(props) {
         y={tableData.y}
         width={settings.tableWidth}
         height={height}
-        className="group drop-shadow-lg rounded-md cursor-move"
+        className="group drop-shadow-lg  cursor-move"
         onPointerDown={onPointerDown}
       >
         <div
           onDoubleClick={openEditor}
           className={`border-2 hover:border-dashed hover:border-blue-500
-               select-none rounded-lg w-full ${
+               select-none w-full ${
-                 settings.mode === "light"
+                 settings.notation !== "default"
-                   ? "bg-zinc-100 text-zinc-800"
+                   ? "transparent no-border"
-                   : "bg-zinc-800 text-zinc-200"
+                   : "rounded-lg"
                } ${
                  selectedElement.id === tableData.id &&
-                 selectedElement.element === ObjectType.TABLE
+                   selectedElement.element === ObjectType.TABLE
                    ? "border-solid border-blue-500"
                    : "border-zinc-500"
                }`}
           style={{ direction: "ltr" }}
         >
           <div
-            className="h-[10px] w-full rounded-t-md"
+            className={`h-[10px] w-full ${
-            style={{ backgroundColor: tableData.color }}
+               settings.notation !== "default"
+                 ? ""
+                 : "rounded-t-md"
+            }`}
+            style={{ backgroundColor: tableData.color, height: settings.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 !== "default" ? "transparent" : ""
             }`}
           >
-            <div className=" px-3 overflow-hidden text-ellipsis whitespace-nowrap">
+            <div className={` px-3 overflow-hidden text-ellipsis whitespace-nowrap ${
+               settings.notation !== "default"
+                 ? ""
+                 : ""
+            }`}
+            >
               {tableData.name}
             </div>
             <div className="hidden group-hover:block">
@@ -282,10 +293,32 @@ export default function Table(props) {
   function field(fieldData, index) {
     return (
       <div
-        className={`${
+        className={`
-          index === tableData.fields.length - 1
+          ${
-            ? ""
+          (fieldData.primary && settings.notation !== "default" )
-            : "border-b border-gray-400"
+            ? "border"
+            : ""
+          } ${
+          (!fieldData.primary && settings.notation !== "default" )
+            ? "border-l border-r"
+            : ""
+          } ${
+          settings.mode === "light"
+            ? "bg-zinc-100 text-zinc-800"
+            : "bg-zinc-800 text-zinc-200"
+          } ${
+          (settings.notation !== "default" && index !== tableData.fields.length - 1)
+            ? "border-l border-r border-gray-400"
+            : ""
+          } ${
+          (settings.notation !== "default" && index === tableData.fields.length - 1)
+            ? "border-b border-gray-400"
+            : ""
+          } ${
+            // Checa que cuando seas el último se redondee
+          (settings.notation === "default" && index === tableData.fields.length - 1)
+            ? "border-b border-gray-400"
+            : ""
         } group h-[36px] px-2 py-1 flex justify-between items-center gap-1 w-full overflow-hidden`}
         onPointerEnter={(e) => {
           if (!e.isPrimary) return;
@@ -313,7 +346,11 @@ export default function Table(props) {
           } flex items-center gap-2 overflow-hidden`}
         >
           <button
-            className="flex-shrink-0 w-[10px] h-[10px] bg-[#2f68adcc] rounded-full"
+            className={`flex-shrink-0 w-[10px] h-[10px] bg-[#2f68adcc] rounded-full ${
+              (fieldData.primary && settings.notation !== "default")
+                ? "bg-[#ff2222cc]"
+                : "bg-[#2f68adcc]"
+            }`}
             onPointerDown={(e) => {
               if (!e.isPrimary) return;
 
@@ -356,8 +393,10 @@ export default function Table(props) {
             />
           ) : (
             <div className="flex gap-1 items-center">
-              {fieldData.primary && <IconKeyStroked />}
+              {(fieldData.primary && settings.notation === "default") && <IconKeyStroked />}
-              {!fieldData.notNull && <span>?</span>}
+              {(fieldData.notNull && settings.notation !== "default") && <span>NOT NULL</span>}
+              {(!fieldData.notNull && settings.notation !== "default") && <span>NULL</span>}
+              {(!fieldData.notNull && settings.notation === "default") && <span>?</span>}
               <span>
                 {fieldData.type +
                   ((dbToTypes[database][fieldData.type].isSized ||

src/index.css

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