Add support for more data type

.eslintrc.cjs

@@ -18,6 +18,5 @@ module.exports = {
       { allowConstantExport: true },
     ],
     "react/prop-types": 0,
-    "react-refresh/only-export-components": "off",
   },
 };

package.json

@@ -19,13 +19,13 @@
     "@monaco-editor/react": "^4.7.0",
     "@vercel/analytics": "^1.2.2",
     "@vercel/speed-insights": "^1.2.0",
-    "axios": "^1.12.0",
+    "axios": "^1.6.8",
     "classnames": "^2.5.1",
     "dexie": "^3.2.4",
     "dexie-react-hooks": "^1.1.7",
     "file-saver": "^2.0.5",
     "framer-motion": "^10.18.0",
-    "html-to-image": "1.11.11",
+    "html-to-image": "^1.11.11",
     "i18next": "^23.11.4",
     "i18next-browser-languagedetector": "^8.0.0",
     "jsonschema": "^1.4.1",

src/components/EditorCanvas/Canvas.jsx

@@ -433,7 +433,7 @@ export default function Canvas() {
         ctrlKey: e.ctrlKey,
         metaKey: e.metaKey,
       });
-      if (elementPointerDown !== null) {
+      if (elementPointerDown) {
         handlePointerDownOnElement(e, elementPointerDown);
       }
       pointer.setStyle("crosshair");
@@ -454,7 +454,7 @@ export default function Canvas() {
   };
 
   const didDrag = () => {
-    if (!isDragging()) return false;
+    if (!isDragging() || bulkSelectedElements.length === 0) return false;
     // checking any element is sufficient
     const { currentCoords, initialCoords } = bulkSelectedElements[0];
     return (
@@ -463,11 +463,13 @@ export default function Canvas() {
   };
 
   const didResize = (id) => {
+    const area = areas.find(a => a.id === id);
+    if (!area) return false;
     return !(
-      areas[id].x === areaInitDimensions.x &&
-      areas[id].y === areaInitDimensions.y &&
-      areas[id].width === areaInitDimensions.width &&
-      areas[id].height === areaInitDimensions.height
+      area.x === areaInitDimensions.x &&
+      area.y === areaInitDimensions.y &&
+      area.width === areaInitDimensions.width &&
+      area.height === areaInitDimensions.height
     );
   };
 

src/components/EditorCanvas/Table.jsx

@@ -53,7 +53,7 @@ export default function Table({
 
   const isSelected = useMemo(() => {
     return (
-      (selectedElement.id == tableData.id &&
+      (selectedElement.id === tableData.id &&
         selectedElement.element === ObjectType.TABLE) ||
       bulkSelectedElements.some(
         (e) => e.type === ObjectType.TABLE && e.id === tableData.id,

src/context/CustomTypesContext.jsx

@@ -0,0 +1,91 @@
+import { createContext, useState } from "react";
+import { Action, ObjectType } from "../data/constants";
+import { useUndoRedo } from "../hooks";
+import { Toast } from "@douyinfe/semi-ui";
+import { useTranslation } from "react-i18next";
+import { otherColor } from "../data/constants";
+
+export const CustomTypesContext = createContext(null);
+
+export default function CustomTypesContextProvider({ children }) {
+  const { t } = useTranslation();
+  const [customTypes, setCustomTypes] = useState([]);
+  const { setUndoStack, setRedoStack } = useUndoRedo();
+
+  const addCustomType = (data, addToHistory = true) => {
+    if (data) {
+      setCustomTypes((prev) => {
+        const temp = prev.slice();
+        temp.splice(data.id, 0, data);
+        return temp;
+      });
+    } else {
+      setCustomTypes((prev) => [
+        ...prev,
+        {
+          name: `custom_type_${prev.length}`,
+          color: otherColor,
+          checkDefault: () => true,
+          hasCheck: false,
+          isSized: false,
+          hasPrecision: false,
+          hasQuotes: false,
+          noDefault: false,
+          canIncrement: false,
+        },
+      ]);
+    }
+    if (addToHistory) {
+      setUndoStack((prev) => [
+        ...prev,
+        {
+          action: Action.ADD,
+          element: ObjectType.TYPE,
+          message: t("add_custom_type"),
+        },
+      ]);
+      setRedoStack([]);
+    }
+  };
+
+  const deleteCustomType = (id, addToHistory = true) => {
+    if (addToHistory) {
+      Toast.success(t("custom_type_deleted"));
+      setUndoStack((prev) => [
+        ...prev,
+        {
+          action: Action.DELETE,
+          element: ObjectType.TYPE,
+          id: id,
+          data: customTypes[id],
+          message: t("delete_custom_type", {
+            typeName: customTypes[id].name,
+          }),
+        },
+      ]);
+      setRedoStack([]);
+    }
+    setCustomTypes((prev) => prev.filter((_, i) => i !== id));
+  };
+
+  const updateCustomType = (id, values) => {
+    setCustomTypes((prev) =>
+      prev.map((type, i) => (i === id ? { ...type, ...values } : type))
+    );
+  };
+
+  return (
+    <CustomTypesContext.Provider
+      value={{
+        customTypes,
+        setCustomTypes,
+        addCustomType,
+        updateCustomType,
+        deleteCustomType,
+        customTypesCount: customTypes.length,
+      }}
+    >
+      {children}
+    </CustomTypesContext.Provider>
+  );
+}

src/context/DiagramContext.jsx

@@ -101,7 +101,7 @@ export default function DiagramContextProvider({ children }) {
       setSelectedElement((prev) => ({
         ...prev,
         element: ObjectType.NONE,
-        id: null,
+        id: -1,
         open: false,
       }));
     }
@@ -185,7 +185,7 @@ export default function DiagramContextProvider({ children }) {
             element: ObjectType.RELATIONSHIP,
             data: {
               relationship: data,
-              index: prevUndo.length
+              index: prev.length
             },
             message: t("add_relationship"),
           },
@@ -196,7 +196,9 @@ export default function DiagramContextProvider({ children }) {
     } else {
       setRelationships((prev) => {
         const temp = prev.slice();
-        temp.splice(data.index, 0, data.relationship || data);
+        const relationship = data.relationship || data;
+        const index = typeof data.index === 'number' ? data.index : temp.length;
+        temp.splice(index, 0, relationship);
         return temp;
       });
     }

src/hooks/index.js

@@ -12,4 +12,5 @@ export { default as useTransform } from "./useTransform";
 export { default as useTypes } from "./useTypes";
 export { default as useUndoRedo } from "./useUndoRedo";
 export { default as useEnums } from "./useEnums";
+export { default as useCustomTypes } from "./useCustomTypes";
 export { default as useThemedPage } from "./useThemedPage";

src/hooks/useCustomTypes.js

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { CustomTypesContext } from "../context/CustomTypesContext";
+
+export default function useCustomTypes() {
+  return useContext(CustomTypesContext);
+}