mirror of
https://github.com/drawdb-io/drawdb.git
synced 2026-02-12 02:00:40 +08:00
Migrate to Vite from CRA
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import React, { useContext, useState } from "react";
|
||||
import { useContext, useState } from "react";
|
||||
import {
|
||||
Empty,
|
||||
Row,
|
||||
@@ -27,7 +27,7 @@ import {
|
||||
} from "../data/data";
|
||||
import { AreaContext, UndoRedoContext } from "../pages/Editor";
|
||||
|
||||
export default function AreaOverview(props) {
|
||||
export default function AreaOverview() {
|
||||
const { areas, addArea, deleteArea, updateArea } = useContext(AreaContext);
|
||||
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
|
||||
const [editField, setEditField] = useState({});
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { React, useContext, useState } from "react";
|
||||
import { useContext, useState } from "react";
|
||||
import {
|
||||
IconCaretdown,
|
||||
IconChevronRight,
|
||||
@@ -71,7 +71,6 @@ export default function ControlPanel({
|
||||
state,
|
||||
setState,
|
||||
lastSaved,
|
||||
setLastSaved,
|
||||
}) {
|
||||
const MODAL = {
|
||||
NONE: 0,
|
||||
@@ -209,7 +208,7 @@ export default function ControlPanel({
|
||||
updateField(a.tid, a.fid, a.undo);
|
||||
} else if (a.component === "field_delete") {
|
||||
setTables((prev) =>
|
||||
prev.map((t, i) => {
|
||||
prev.map((t) => {
|
||||
if (t.id === a.tid) {
|
||||
const temp = t.fields.slice();
|
||||
temp.splice(a.data.id, 0, a.data);
|
||||
@@ -243,7 +242,7 @@ export default function ControlPanel({
|
||||
});
|
||||
} else if (a.component === "index_delete") {
|
||||
setTables((prev) =>
|
||||
prev.map((table, i) => {
|
||||
prev.map((table) => {
|
||||
if (table.id === a.tid) {
|
||||
const temp = table.indices.slice();
|
||||
temp.splice(a.data.id, 0, a.data);
|
||||
@@ -488,7 +487,7 @@ export default function ControlPanel({
|
||||
.then(() => {
|
||||
Toast.success("Copied to clipboard.");
|
||||
})
|
||||
.catch((e) => {
|
||||
.catch(() => {
|
||||
Toast.error("Could not copy to clipboard.");
|
||||
});
|
||||
});
|
||||
@@ -617,21 +616,21 @@ export default function ControlPanel({
|
||||
case ObjectType.TABLE:
|
||||
navigator.clipboard
|
||||
.writeText(JSON.stringify({ ...tables[selectedElement.id] }))
|
||||
.catch((e) => {
|
||||
.catch(() => {
|
||||
Toast.error("Could not copy");
|
||||
});
|
||||
break;
|
||||
case ObjectType.NOTE:
|
||||
navigator.clipboard
|
||||
.writeText(JSON.stringify({ ...notes[selectedElement.id] }))
|
||||
.catch((e) => {
|
||||
.catch(() => {
|
||||
Toast.error("Could not copy");
|
||||
});
|
||||
break;
|
||||
case ObjectType.AREA:
|
||||
navigator.clipboard
|
||||
.writeText(JSON.stringify({ ...areas[selectedElement.id] }))
|
||||
.catch((e) => {
|
||||
.catch(() => {
|
||||
Toast.error("Could not copy");
|
||||
});
|
||||
break;
|
||||
@@ -754,7 +753,7 @@ export default function ControlPanel({
|
||||
setUndoStack([]);
|
||||
setRedoStack([]);
|
||||
})
|
||||
.catch((e) => Toast.error("Oops! Something went wrong."));
|
||||
.catch(() => Toast.error("Oops! Something went wrong."));
|
||||
},
|
||||
},
|
||||
"Flush storage": {
|
||||
@@ -764,7 +763,7 @@ export default function ControlPanel({
|
||||
Toast.success("Storage flushed");
|
||||
window.location.reload(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
.catch(() => {
|
||||
Toast.error("Oops! Something went wrong.");
|
||||
});
|
||||
},
|
||||
@@ -1170,12 +1169,13 @@ export default function ControlPanel({
|
||||
`${exportData.filename}.${exportData.extension}`
|
||||
);
|
||||
return;
|
||||
case MODAL.CODE:
|
||||
case MODAL.CODE: {
|
||||
const blob = new Blob([exportData.data], {
|
||||
type: "application/json",
|
||||
});
|
||||
saveAs(blob, `${exportData.filename}.${exportData.extension}`);
|
||||
return;
|
||||
}
|
||||
case MODAL.IMPORT:
|
||||
if (error.type !== STATUS.ERROR) {
|
||||
setSettings((prev) => ({ ...prev, pan: { x: 0, y: 0 } }));
|
||||
@@ -1494,7 +1494,7 @@ export default function ControlPanel({
|
||||
visible={visible !== MODAL.NONE}
|
||||
onOk={getModalOnOk}
|
||||
afterClose={() => {
|
||||
setExportData((prev) => ({
|
||||
setExportData(() => ({
|
||||
data: "",
|
||||
extension: "",
|
||||
filename: `diagram_${new Date().toISOString()}`,
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import React from "react";
|
||||
|
||||
export function IconAddTable({ theme }) {
|
||||
return (
|
||||
<svg height="26" width="26">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useContext, useState } from "react";
|
||||
import { useContext, useState } from "react";
|
||||
import { Button, Input, Avatar } from "@douyinfe/semi-ui";
|
||||
import { IconSend } from "@douyinfe/semi-icons";
|
||||
import { BotMessageContext } from "../pages/Editor";
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState } from "react";
|
||||
import { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import logo from "../assets/logo_light_46.png";
|
||||
import { SideSheet } from "@douyinfe/semi-ui";
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useContext, useState } from "react";
|
||||
import { useContext, useState } from "react";
|
||||
import {
|
||||
Empty,
|
||||
Row,
|
||||
@@ -24,7 +24,7 @@ import {
|
||||
import { NoteContext, UndoRedoContext } from "../pages/Editor";
|
||||
import { noteThemes, Action, ObjectType } from "../data/data";
|
||||
|
||||
export default function NotesOverview(props) {
|
||||
export default function NotesOverview() {
|
||||
const { notes, updateNote, addNote, deleteNote } = useContext(NoteContext);
|
||||
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
|
||||
const [value, setValue] = useState("");
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useContext, useState } from "react";
|
||||
import { useContext, useState } from "react";
|
||||
import {
|
||||
AutoComplete,
|
||||
Collapse,
|
||||
@@ -24,7 +24,7 @@ import {
|
||||
import { Cardinality, Constraint, Action, ObjectType } from "../data/data";
|
||||
import { TableContext, UndoRedoContext } from "../pages/Editor";
|
||||
|
||||
export default function ReferenceOverview(props) {
|
||||
export default function ReferenceOverview() {
|
||||
const columns = [
|
||||
{
|
||||
title: "Primary",
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { React, useContext } from "react";
|
||||
import { useContext } from "react";
|
||||
import { Tabs } from "@douyinfe/semi-ui";
|
||||
import TableOverview from "./TableOverview";
|
||||
import ReferenceOverview from "./ReferenceOverview";
|
||||
@@ -21,11 +21,11 @@ const SidePanel = (props) => {
|
||||
{ tab: "Types", itemKey: Tab.types },
|
||||
];
|
||||
const contentList = [
|
||||
<TableOverview />,
|
||||
<ReferenceOverview />,
|
||||
<AreaOverview />,
|
||||
<NotesOverview />,
|
||||
<TypesOverview />,
|
||||
<TableOverview key={1}/>,
|
||||
<ReferenceOverview key={2}/>,
|
||||
<AreaOverview key={3}/>,
|
||||
<NotesOverview key={4}/>,
|
||||
<TypesOverview key={5}/>,
|
||||
];
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { React, useContext, useState } from "react";
|
||||
import { useContext, useState } from "react";
|
||||
import {
|
||||
Action,
|
||||
ObjectType,
|
||||
@@ -43,7 +43,7 @@ import {
|
||||
} from "../pages/Editor";
|
||||
import { getSize, hasCheck, hasPrecision, isSized } from "../utils";
|
||||
|
||||
export default function TableOverview(props) {
|
||||
export default function TableOverview() {
|
||||
const [indexActiveKey, setIndexActiveKey] = useState("");
|
||||
const [value, setValue] = useState("");
|
||||
const {
|
||||
@@ -392,10 +392,10 @@ export default function TableOverview(props) {
|
||||
onChange={(v) =>
|
||||
updateField(i, j, { values: v })
|
||||
}
|
||||
onFocus={(e) =>
|
||||
onFocus={() =>
|
||||
setEditField({ values: f.values })
|
||||
}
|
||||
onBlur={(e) => {
|
||||
onBlur={() => {
|
||||
if (
|
||||
JSON.stringify(editField.values) ===
|
||||
JSON.stringify(f.values)
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { React, useContext, useState } from "react";
|
||||
import { useContext, useState } from "react";
|
||||
import { Action, ObjectType, sqlDataTypes } from "../data/data";
|
||||
import {
|
||||
Collapse,
|
||||
@@ -30,7 +30,7 @@ import {
|
||||
import { TypeContext, UndoRedoContext } from "../pages/Editor";
|
||||
import { isSized, hasPrecision, getSize } from "../utils";
|
||||
|
||||
export default function TableOverview(props) {
|
||||
export default function TableOverview() {
|
||||
const [value, setValue] = useState("");
|
||||
const { types, addType, deleteType, updateType } = useContext(TypeContext);
|
||||
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
|
||||
@@ -268,10 +268,10 @@ export default function TableOverview(props) {
|
||||
),
|
||||
})
|
||||
}
|
||||
onFocus={(e) =>
|
||||
onFocus={() =>
|
||||
setEditField({ values: f.values })
|
||||
}
|
||||
onBlur={(e) => {
|
||||
onBlur={() => {
|
||||
if (
|
||||
JSON.stringify(editField.values) ===
|
||||
JSON.stringify(f.values)
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { React, useContext, useState } from "react";
|
||||
import { useContext, useState } from "react";
|
||||
import { Button, Popover, Input, Toast } from "@douyinfe/semi-ui";
|
||||
import {
|
||||
IconEdit,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useContext, useRef, useState, useEffect } from "react";
|
||||
import { useContext, useRef, useState, useEffect } from "react";
|
||||
import Table from "./Table";
|
||||
import { Action, Cardinality, Constraint, ObjectType } from "../data/data";
|
||||
import Area from "./Area";
|
||||
@@ -14,7 +14,7 @@ import {
|
||||
import Note from "./Note";
|
||||
import { Toast } from "@douyinfe/semi-ui";
|
||||
|
||||
export default function Canvas(props) {
|
||||
export default function Canvas() {
|
||||
const { tables, updateTable, relationships, addRelationship } =
|
||||
useContext(TableContext);
|
||||
const { areas, updateArea } = useContext(AreaContext);
|
||||
@@ -255,7 +255,7 @@ export default function Canvas(props) {
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseUp = (e) => {
|
||||
const handleMouseUp = () => {
|
||||
if (coordsDidUpdate(dragging.element)) {
|
||||
const info = getMoveInfo();
|
||||
setUndoStack((prev) => [
|
||||
@@ -320,7 +320,7 @@ export default function Canvas(props) {
|
||||
});
|
||||
};
|
||||
|
||||
const handleGripField = (id) => {
|
||||
const handleGripField = () => {
|
||||
setPanning(false);
|
||||
setDragging({ element: ObjectType.NONE, id: -1, prevX: 0, prevY: 0 });
|
||||
setLinking(true);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useContext, useState } from "react";
|
||||
import { useContext, useState } from "react";
|
||||
import { Button, Input, Tag, Avatar } from "@douyinfe/semi-ui";
|
||||
import { IconSend } from "@douyinfe/semi-icons";
|
||||
import { socket } from "../data/socket";
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useContext, useState, useEffect } from "react";
|
||||
import { useContext, useState, useEffect } from "react";
|
||||
import { Collapse, Badge } from "@douyinfe/semi-ui";
|
||||
import { SettingsContext, TableContext, TypeContext } from "../pages/Editor";
|
||||
import { validateDiagram, arrayIsEqual } from "../utils";
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useContext, useState } from "react";
|
||||
import { useContext, useState } from "react";
|
||||
import {
|
||||
LayoutContext,
|
||||
NoteContext,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { React, useState } from "react";
|
||||
import { useState } from "react";
|
||||
import { calcPath } from "../utils";
|
||||
|
||||
export default function Relationship(props) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
import { useContext, useEffect, useState } from "react";
|
||||
import chatIcon from "../assets/chat.png";
|
||||
import botIcon from "../assets/bot.png";
|
||||
import teamIcon from "../assets/group.png";
|
||||
@@ -193,8 +193,9 @@ export default function Sidebar() {
|
||||
if (undoStack.length > 0) {
|
||||
return (
|
||||
<List className="sidesheet-theme">
|
||||
{[...undoStack].reverse().map((e) => (
|
||||
{[...undoStack].reverse().map((e, i) => (
|
||||
<List.Item
|
||||
key={i}
|
||||
style={{ padding: "4px 18px 4px 18px" }}
|
||||
className="hover-1"
|
||||
>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { React, useState, useContext } from "react";
|
||||
import { useState, useContext } from "react";
|
||||
import {
|
||||
sqlDataTypes,
|
||||
tableThemes,
|
||||
@@ -535,8 +535,8 @@ export default function Table(props) {
|
||||
values: v,
|
||||
})
|
||||
}
|
||||
onFocus={(e) => setEditField({ values: f.values })}
|
||||
onBlur={(e) => {
|
||||
onFocus={() => setEditField({ values: f.values })}
|
||||
onBlur={() => {
|
||||
if (
|
||||
JSON.stringify(editField.values) ===
|
||||
JSON.stringify(f.values)
|
||||
@@ -1238,7 +1238,7 @@ export default function Table(props) {
|
||||
<div className={`${hoveredField === index ? "text-zinc-400" : ""}`}>
|
||||
<button
|
||||
className={`w-[10px] h-[10px] bg-[#2f68ad] opacity-80 z-50 rounded-full me-2`}
|
||||
onMouseDown={(ev) => {
|
||||
onMouseDown={() => {
|
||||
props.handleGripField(index);
|
||||
props.setLine((prev) => ({
|
||||
...prev,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useContext, useState } from "react";
|
||||
import { useContext, useState } from "react";
|
||||
import {
|
||||
Checkbox,
|
||||
Input,
|
||||
|
||||
Reference in New Issue
Block a user