titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make variable naming consistent

Browse Source
This commit is contained in:
1ilit 2024-03-15 16:37:22 +02:00
parent 1132edbbb3
commit 3ec93f42c6
24 changed files with 152 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Area.jsx
View File

@ -10,9 +10,9 @@ import {
Action,
ObjectType,
tableThemes,
defaultTableTheme,
defaultBlue,
State,
} from "../data/data";
} from "../data/constants";
import useLayout from "../hooks/useLayout";
import useSettings from "../hooks/useSettings";
import useUndoRedo from "../hooks/useUndoRedo";
@ -143,7 +143,7 @@ export default function Area(props) {
size="small"
onClick={() => {
updateArea(props.areaData.id, {
color: defaultTableTheme,
color: defaultBlue,
});
setSaveState(State.SAVING);
}}
@ -271,11 +271,10 @@ export default function Area(props) {
...prev,
element: ObjectType.AREA,
id: props.areaData.id,
currentTab: Tab.subject_areas,
currentTab: Tab.AREAS,
open: true,
}));
if (selectedElement.currentTab !== Tab.subject_areas)
return;
if (selectedElement.currentTab !== Tab.AREAS) return;
document
.getElementById(`scroll_area_${props.areaData.id}`)
.scrollIntoView({ behavior: "smooth" });

6
src/components/AreaOverview.jsx
View File

@ -20,12 +20,12 @@ import {
IconDeleteStroked,
} from "@douyinfe/semi-icons";
import {
defaultTableTheme,
defaultBlue,
tableThemes,
Action,
ObjectType,
State,
} from "../data/data";
} from "../data/constants";
import useUndoRedo from "../hooks/useUndoRedo";
import useAreas from "../hooks/useAreas";
import useSaveState from "../hooks/useSaveState";
@ -140,7 +140,7 @@ export default function AreaOverview() {
type="tertiary"
size="small"
onClick={() => {
updateArea(i, { color: defaultTableTheme });
updateArea(i, { color: defaultBlue });
setSaveState(State.SAVING);
}}
>

6
src/components/Canvas.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useEffect } from "react";
import Table from "./Table";
import { Action, Cardinality, Constraint, ObjectType } from "../data/data";
import { Action, Cardinality, Constraint, ObjectType } from "../data/constants";
import Area from "./Area";
import Relationship from "./Relationship";
import Note from "./Note";
@ -39,8 +39,8 @@ export default function Canvas() {
endY: 0,
name: "",
cardinality: Cardinality.ONE_TO_ONE,
updateConstraint: Constraint.none,
deleteConstraint: Constraint.none,
updateConstraint: Constraint.NONE,
deleteConstraint: Constraint.NONE,
mandatory: false,
});
const [offset, setOffset] = useState({ x: 0, y: 0 });

14
src/components/ControlPanel.jsx
View File

@ -44,7 +44,7 @@ import {
jsonToSQLServer,
} from "../utils/toSQL";
import { IconAddTable, IconAddArea, IconAddNote } from "./CustomIcons";
import { ObjectType, Action, Tab, State, Cardinality } from "../data/data";
import { ObjectType, Action, Tab, State, Cardinality } from "../data/constants";
import jsPDF from "jspdf";
import { useHotkeys } from "react-hotkeys-hook";
import { Validator } from "jsonschema";
@ -581,9 +581,9 @@ export default function ControlPanel({
setSelectedElement((prev) => ({
...prev,
open: true,
currentTab: Tab.tables,
currentTab: Tab.TABLES,
}));
if (selectedElement.currentTab !== Tab.tables) return;
if (selectedElement.currentTab !== Tab.TABLES) return;
document
.getElementById(`scroll_table_${selectedElement.id}`)
.scrollIntoView({ behavior: "smooth" });
@ -592,9 +592,9 @@ export default function ControlPanel({
if (layout.sidebar) {
setSelectedElement((prev) => ({
...prev,
currentTab: Tab.subject_areas,
currentTab: Tab.AREAS,
}));
if (selectedElement.currentTab !== Tab.subject_areas) return;
if (selectedElement.currentTab !== Tab.AREAS) return;
document
.getElementById(`scroll_area_${selectedElement.id}`)
.scrollIntoView({ behavior: "smooth" });
@ -609,10 +609,10 @@ export default function ControlPanel({
if (layout.sidebar) {
setSelectedElement((prev) => ({
...prev,
currentTab: Tab.notes,
currentTab: Tab.NOTES,
open: false,
}));
if (selectedElement.currentTab !== Tab.notes) return;
if (selectedElement.currentTab !== Tab.NOTES) return;
document
.getElementById(`scroll_note_${selectedElement.id}`)
.scrollIntoView({ behavior: "smooth" });

6
src/components/Note.jsx
View File

@ -1,5 +1,5 @@
import { useState } from "react";
import { Action, ObjectType, noteThemes, Tab, State } from "../data/data";
import { Action, ObjectType, noteThemes, Tab, State } from "../data/constants";
import { Input, Button, Popover, Toast } from "@douyinfe/semi-ui";
import {
IconEdit,
@ -257,9 +257,9 @@ export default function Note({ data, onMouseDown }) {
if (layout.sidebar) {
setSelectedElement((prev) => ({
...prev,
currentTab: Tab.notes,
currentTab: Tab.NOTES,
}));
if (selectedElement.currentTab !== Tab.notes) return;
if (selectedElement.currentTab !== Tab.NOTES) return;
document
.getElementById(`scroll_note_${data.id}`)
.scrollIntoView({ behavior: "smooth" });

2
src/components/NotesOverview.jsx
View File

@ -21,7 +21,7 @@ import {
IconSearch,
IconCheckboxTick,
} from "@douyinfe/semi-icons";
import { noteThemes, Action, ObjectType } from "../data/data";
import { noteThemes, Action, ObjectType } from "../data/constants";
import useUndoRedo from "../hooks/useUndoRedo";
import useNotes from "../hooks/useNotes";

2
src/components/ReferenceOverview.jsx
View File

@ -20,7 +20,7 @@ import {
IllustrationNoContent,
IllustrationNoContentDark,
} from "@douyinfe/semi-illustrations";
import { Cardinality, Constraint, Action, ObjectType } from "../data/data";
import { Cardinality, Constraint, Action, ObjectType } from "../data/constants";
import useTables from "../hooks/useTables";
import useUndoRedo from "../hooks/useUndoRedo";

2
src/components/Relationship.jsx
View File

@ -1,5 +1,5 @@
import { useRef } from "react";
import { Cardinality } from "../data/data";
import { Cardinality } from "../data/constants";
import useSettings from "../hooks/useSettings";
import { calcPath } from "../utils/calcPath";

12
src/components/SidePanel.jsx
View File

@ -1,5 +1,5 @@
import { Tabs } from "@douyinfe/semi-ui";
import { Tab } from "../data/data";
import { Tab } from "../data/constants";
import TableOverview from "./TableOverview";
import ReferenceOverview from "./ReferenceOverview";
import AreaOverview from "./AreaOverview";
@ -14,11 +14,11 @@ export default function SidePanel({ width, resize, setResize }) {
const { selectedElement, setSelectedElement } = useSelect();
const tabList = [
{ tab: "Tables", itemKey: Tab.tables },
{ tab: "Relationships", itemKey: Tab.relationships },
{ tab: "Subject Areas", itemKey: Tab.subject_areas },
{ tab: "Notes", itemKey: Tab.notes },
{ tab: "Types", itemKey: Tab.types },
{ tab: "Tables", itemKey: Tab.TABLES },
{ tab: "Relationships", itemKey: Tab.RELATIONSHIPS },
{ tab: "Subject Areas", itemKey: Tab.AREAS },
{ tab: "Notes", itemKey: Tab.NOTES },
{ tab: "Types", itemKey: Tab.TYPES },
];
const contentList = [
<TableOverview key={1} />,

2
src/components/SimpleCanvas.jsx
View File

@ -1,5 +1,5 @@
import { useEffect, useState, useRef } from "react";
import { Cardinality } from "../data/data";
import { Cardinality } from "../data/constants";
import { calcPath } from "../utils/calcPath";
function Table({ table, grab }) {

12
src/components/Table.jsx
View File

@ -2,11 +2,11 @@ import { useState } from "react";
import {
sqlDataTypes,
tableThemes,
defaultTableTheme,
defaultBlue,
Tab,
Action,
ObjectType,
} from "../data/data";
} from "../data/constants";
import {
IconEdit,
IconMore,
@ -120,12 +120,12 @@ export default function Table(props) {
} else {
setSelectedElement((prev) => ({
...prev,
currentTab: Tab.tables,
currentTab: Tab.TABLES,
element: ObjectType.TABLE,
id: props.tableData.id,
open: true,
}));
if (selectedElement.currentTab !== Tab.tables) return;
if (selectedElement.currentTab !== Tab.TABLES) return;
document
.getElementById(`scroll_table_${props.tableData.id}`)
.scrollIntoView({ behavior: "smooth" });
@ -1058,13 +1058,13 @@ export default function Table(props) {
component: "self",
tid: props.tableData.id,
undo: { color: props.tableData.color },
redo: { color: defaultTableTheme },
redo: { color: defaultBlue },
message: `Edit table color to default`,
},
]);
setRedoStack([]);
updateTable(props.tableData.id, {
color: defaultTableTheme,
color: defaultBlue,
});
}}
>

8
src/components/TableOverview.jsx
View File

@ -2,10 +2,10 @@ import { useState } from "react";
import {
Action,
ObjectType,
defaultTableTheme,
defaultBlue,
sqlDataTypes,
tableThemes,
} from "../data/data";
} from "../data/constants";
import {
Collapse,
Row,
@ -946,12 +946,12 @@ export default function TableOverview() {
component: "self",
tid: i,
undo: { color: t.color },
redo: { color: defaultTableTheme },
redo: { color: defaultBlue },
message: `Edit table color to default`,
},
]);
setRedoStack([]);
updateTable(i, { color: defaultTableTheme });
updateTable(i, { color: defaultBlue });
}}
>
Clear

2
src/components/Todo.jsx
View File

@ -19,7 +19,7 @@ import {
IconDeleteStroked,
IconCaretdown,
} from "@douyinfe/semi-icons";
import { State } from "../data/data";
import { State } from "../data/constants";
import useTasks from "../hooks/useTasks";
import useSaveState from "../hooks/useSaveState";

2
src/components/TypesOverview.jsx
View File

@ -1,5 +1,5 @@
import { useState } from "react";
import { Action, ObjectType, sqlDataTypes } from "../data/data";
import { Action, ObjectType, sqlDataTypes } from "../data/constants";
import {
Collapse,
Row,

2
src/components/Workspace.jsx
View File

@ -2,7 +2,7 @@ import { useState, useEffect, useCallback } from "react";
import ControlPanel from "../components/ControlPanel";
import Canvas from "../components/Canvas";
import SidePanel from "../components/SidePanel";
import { State } from "../data/data";
import { State } from "../data/constants";
import { db } from "../data/db";
import useLayout from "../hooks/useLayout";
import useSettings from "../hooks/useSettings";

4
src/context/AreasContext.jsx
View File

@ -1,5 +1,5 @@
import { createContext, useState } from "react";
import { Action, ObjectType, defaultTableTheme } from "../data/data";
import { Action, ObjectType, defaultBlue } from "../data/constants";
import useUndoRedo from "../hooks/useUndoRedo";
import useTransform from "../hooks/useTransform";
import useSelect from "../hooks/useSelect";
@ -29,7 +29,7 @@ export default function AreasContextProvider({ children }) {
y: -transform.pan.y,
width: 200,
height: 200,
color: defaultTableTheme,
color: defaultBlue,
},
]);
}

2
src/context/NotesContext.jsx
View File

@ -1,6 +1,6 @@
import { createContext, useState } from "react";
import useTransform from "../hooks/useTransform";
import { Action, ObjectType, defaultNoteTheme } from "../data/data";
import { Action, ObjectType, defaultNoteTheme } from "../data/constants";
import useUndoRedo from "../hooks/useUndoRedo";
import useSelect from "../hooks/useSelect";

2
src/context/SaveStateContext.jsx
View File

@ -1,5 +1,5 @@
import { createContext, useState } from "react";
import { State } from "../data/data";
import { State } from "../data/constants";
export const SaveStateContext = createContext(null);

4
src/context/SelectContext.jsx
View File

@ -1,5 +1,5 @@
import { createContext, useState } from "react";
import { ObjectType, Tab } from "../data/data";
import { ObjectType, Tab } from "../data/constants";
export const SelectContext = createContext(null);
@ -9,7 +9,7 @@ export default function SelectContextProvider({ children }) {
id: -1,
openDialogue: false,
openCollapse: false,
currentTab: Tab.tables,
currentTab: Tab.TABLES,
open: false, // open popover or sidesheet when sidebar is disabled
openFromToolbar: false, // this is to handle triggering onClickOutside when sidebar is disabled
});

4
src/context/TablesContext.jsx
View File

@ -1,5 +1,5 @@
import { createContext, useState } from "react";
import { Action, ObjectType, defaultTableTheme } from "../data/data";
import { Action, ObjectType, defaultBlue } from "../data/constants";
import useTransform from "../hooks/useTransform";
import useUndoRedo from "../hooks/useUndoRedo";
import useSelect from "../hooks/useSelect";
@ -44,7 +44,7 @@ export default function TablesContextProvider({ children }) {
],
comment: "",
indices: [],
color: defaultTableTheme,
color: defaultBlue,
},
]);
}

2
src/context/TypesContext.jsx
View File

@ -1,5 +1,5 @@
import { createContext, useState } from "react";
import { Action, ObjectType } from "../data/data";
import { Action, ObjectType } from "../data/constants";
import useUndoRedo from "../hooks/useUndoRedo";
export const TypesContext = createContext(null);

98
src/data/constants.js Normal file
View File

@ -0,0 +1,98 @@
export const sqlDataTypes = [
"INT",
"SMALLINT",
"BIGINT",
"DECIMAL",
"NUMERIC",
"FLOAT",
"DOUBLE",
"REAL",
"CHAR",
"VARCHAR",
"TEXT",
"DATE",
"TIME",
"TIMESTAMP",
"DATETIME",
"BOOLEAN",
"BINARY",
"VARBINARY",
"BLOB",
"JSON",
"UUID",
"ENUM",
"SET",
];
export const tableThemes = [
"#f03c3c",
"#ff4f81",
"#bc49c4",
"#a751e8",
"#7c4af0",
"#6360f7",
"#7d9dff",
"#32c9b0",
"#3cde7d",
"#89e667",
"#ffe159",
"#ff9159",
];
export const noteThemes = [
"#ffdfd9",
"#fcf7ac",
"#cffcb1",
"#c7d2ff",
"#e7c7ff",
];
export const defaultBlue = "#175e7a";
export const defaultNoteTheme = "#fcf7ac";
export const Cardinality = {
ONE_TO_ONE: "One to one",
ONE_TO_MANY: "One to many",
MANY_TO_ONE: "Many to one",
};
export const Constraint = {
NONE: "No action",
RESTRICT: "Restrict",
CASCADE: "Cascade",
SET_NULL: "Set null",
SET_DEFAULT: "Set default",
};
export const Tab = {
TABLES: "1",
RELATIONSHIPS: "2",
AREAS: "3",
NOTES: "4",
TYPES: "5",
};
export const ObjectType = {
NONE: 0,
TABLE: 1,
AREA: 2,
NOTE: 3,
RELATIONSHIP: 4,
TYPE: 5,
};
export const Action = {
ADD: 0,
MOVE: 1,
DELETE: 2,
EDIT: 3,
PAN: 4,
};
export const State = {
NONE: 0,
SAVING: 1,
SAVED: 2,
LOADING: 3,
ERROR: 4,
};

128
src/data/data.js
View File

@ -1,128 +0,0 @@
const sqlDataTypes = [
"INT",
"SMALLINT",
"BIGINT",
"DECIMAL",
"NUMERIC",
"FLOAT",
"DOUBLE",
"REAL",
"CHAR",
"VARCHAR",
"TEXT",
"DATE",
"TIME",
"TIMESTAMP",
"DATETIME",
"BOOLEAN",
"BINARY",
"VARBINARY",
"BLOB",
"JSON",
"UUID",
"ENUM",
"SET",
];
const tableThemes = [
"#f03c3c",
"#ff4f81",
"#bc49c4",
"#a751e8",
"#7c4af0",
"#6360f7",
"#7d9dff",
"#32c9b0",
"#3cde7d",
"#89e667",
"#ffe159",
"#ff9159",
];
const noteThemes = ["#ffdfd9", "#fcf7ac", "#cffcb1", "#c7d2ff", "#e7c7ff"];
const avatarThemes = [
"amber",
"blue",
"cyan",
"green",
"grey",
"indigo",
"light-blue",
"light-green",
"lime",
"orange",
"pink",
"red",
"teal",
"violet",
"yellow",
"white",
];
const defaultTableTheme = "#175e7a";
const defaultNoteTheme = "#fcf7ac";
const bgBlue = "#124559";
const Cardinality = {
ONE_TO_ONE: "One to one",
ONE_TO_MANY: "One to many",
MANY_TO_ONE: "Many to one",
};
const Constraint = {
none: "No action",
restrict: "Restrict",
cascade: "Cascade",
setNull: "Set null",
setDefault: "Set default",
};
const Tab = {
tables: "1",
relationships: "2",
subject_areas: "3",
notes: "4",
types: "5",
};
const ObjectType = {
NONE: 0,
TABLE: 1,
AREA: 2,
NOTE: 3,
RELATIONSHIP: 4,
TYPE: 5,
};
const Action = {
ADD: 0,
MOVE: 1,
DELETE: 2,
EDIT: 3,
PAN: 4,
};
const State = {
NONE: 0,
SAVING: 1,
SAVED: 2,
LOADING: 3,
ERROR: 4,
};
export {
bgBlue,
sqlDataTypes,
tableThemes,
noteThemes,
defaultTableTheme,
defaultNoteTheme,
avatarThemes,
Cardinality,
Constraint,
Tab,
ObjectType,
Action,
State,
};

2
src/utils/toSQL.js
View File

@ -1,4 +1,4 @@
import { sqlDataTypes } from "../data/data";
import { sqlDataTypes } from "../data/constants";
function getJsonType(f) {
if (!sqlDataTypes.includes(f.type)) {