Allow connecting serial and int field (#169)

src/components/EditorCanvas/Canvas.jsx

@@ -23,6 +23,7 @@ import {
 } from "../../hooks";
 import { useTranslation } from "react-i18next";
 import { useEventListener } from "usehooks-ts";
+import { areFieldsCompatible } from "../../utils/utils";
 
 export default function Canvas() {
   const { t } = useTranslation();
@@ -34,7 +35,8 @@ export default function Canvas() {
     pointer,
   } = canvasContextValue;
 
-  const { tables, updateTable, relationships, addRelationship } = useDiagram();
+  const { tables, updateTable, relationships, addRelationship, database } =
+    useDiagram();
   const { areas, updateArea } = useAreas();
   const { notes, updateNote } = useNotes();
   const { layout } = useLayout();
@@ -399,8 +401,11 @@ export default function Canvas() {
     if (hoveredTable.tableId < 0) return;
     if (hoveredTable.field < 0) return;
     if (
-      tables[linkingLine.startTableId].fields[linkingLine.startFieldId].type !==
+      !areFieldsCompatible(
-      tables[hoveredTable.tableId].fields[hoveredTable.field].type
+        database,
+        tables[linkingLine.startTableId].fields[linkingLine.startFieldId],
+        tables[hoveredTable.tableId].fields[hoveredTable.field],
+      )
     ) {
       Toast.info(t("cannot_connect"));
       return;

src/data/datatypes.js

@@ -698,6 +698,7 @@ const postgresTypesBase = {
     isSized: false,
     hasPrecision: false,
     canIncrement: true,
+    compatibleWith: ["SMALLSERIAL", "SERIAL", "BIGSERIAL", "INTEGER", "BIGINT"],
   },
   INTEGER: {
     type: "INTEGER",
@@ -708,6 +709,13 @@ const postgresTypesBase = {
     isSized: false,
     hasPrecision: false,
     canIncrement: true,
+    compatibleWith: [
+      "SMALLSERIAL",
+      "SERIAL",
+      "BIGSERIAL",
+      "SMALLINT",
+      "BIGINT",
+    ],
   },
   BIGINT: {
     type: "BIGINT",
@@ -718,6 +726,13 @@ const postgresTypesBase = {
     isSized: false,
     hasPrecision: false,
     canIncrement: true,
+    compatibleWith: [
+      "SMALLSERIAL",
+      "SERIAL",
+      "BIGSERIAL",
+      "INTEGER",
+      "SMALLINT",
+    ],
   },
   DECIMAL: {
     type: "DECIMAL",
@@ -763,6 +778,7 @@ const postgresTypesBase = {
     hasCheck: true,
     isSized: false,
     hasPrecision: false,
+    compatibleWith: ["INTEGER", "SERIAL", "BIGSERIAL", "SMALLINT", "BIGINT"],
   },
   SERIAL: {
     type: "SERIAL",
@@ -772,6 +788,13 @@ const postgresTypesBase = {
     hasCheck: true,
     isSized: false,
     hasPrecision: false,
+    compatibleWith: [
+      "INTEGER",
+      "SMALLSERIAL",
+      "BIGSERIAL",
+      "SMALLINT",
+      "BIGINT",
+    ],
   },
   BIGSERIAL: {
     type: "BIGSERIAL",
@@ -781,6 +804,7 @@ const postgresTypesBase = {
     hasCheck: true,
     isSized: false,
     hasPrecision: false,
+    compatibleWith: ["INTEGER", "SERIAL", "SMALLSERIAL", "SMALLINT", "BIGINT"],
   },
   MONEY: {
     type: "MONEY",

src/utils/utils.js

@@ -1,3 +1,5 @@
+import { dbToTypes } from "../data/datatypes";
+
 export function dataURItoBlob(dataUrl) {
   const byteString = atob(dataUrl.split(",")[1]);
   const mimeString = dataUrl.split(",")[0].split(":")[1].split(";")[0];
@@ -34,3 +36,13 @@ export function isKeyword(str) {
 export function isFunction(str) {
   return /\w+\([^)]*\)$/.test(str);
 }
+
+export function areFieldsCompatible(db, field1, field2) {
+  const same = field1.type === field2.type;
+  if (dbToTypes[db][field1.type].compatibleWith) {
+    return (
+      dbToTypes[db][field1.type].compatibleWith.includes(field2.type) || same
+    );
+  }
+  return same;
+}