drawdb-io/drawdb
1
0
Fork 0
mirror of https://github.com/drawdb-io/drawdb.git synced 2025-09-17 04:03:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adding formatting and removing unused code

Browse Source
This commit is contained in:
HansMarcus01
2025-04-06 18:04:14 -06:00
parent f268f6998a
commit f5fe8a1a16
8 changed files with 131 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/EditorCanvas/Relationship.jsx
View File

@@ -2,6 +2,7 @@ import { useRef } from "react";
import {
Cardinality,
darkBgTheme,
Notation,
ObjectType,
Tab,
} from "../../data/constants";
@@ -10,7 +11,7 @@ import { useDiagram, useSettings, useLayout, useSelect } from "../../hooks";
import { useTranslation } from "react-i18next";
import { SideSheet } from "@douyinfe/semi-ui";
import RelationshipInfo from "../EditorSidePanel/RelationshipsTab/RelationshipInfo";
import { CrowOM, CrowOO, CrowZM, IDEFZM, DefaultNotation } from "./RelationshipFormat";
import { CrowOM, CrowOO, IDEFZM, DefaultNotation } from "./RelationshipFormat";
const labelFontSize = 16;
@@ -26,9 +27,7 @@ export default function Relationship({ data }) {
const pathRef = useRef();
const labelRef = useRef();
const type = settings.notation === 'default' ? 0 : 10;
const relationshipType=(5,type);
const relationshipType = data.lineType || "0";
let direction = 1;
let cardinalityStart = "1";
let cardinalityEnd = "1";
@@ -58,7 +57,7 @@ export default function Relationship({ data }) {
// the translated values are to ensure backwards compatibility
case t(Cardinality.MANY_TO_ONE):
case Cardinality.MANY_TO_ONE:
if (settings.notation === 'default') {
if (settings.notation === Notation.DEFAULT) {
cardinalityStart = "n";
cardinalityEnd = "1";
} else {
@@ -69,7 +68,7 @@ export default function Relationship({ data }) {
break;
case t(Cardinality.ONE_TO_MANY):
case Cardinality.ONE_TO_MANY:
if (settings.notation === 'default') {
if (settings.notation === Notation.DEFAULT) {
cardinalityStart = "1";
cardinalityEnd = "n";
} else {
@@ -80,7 +79,7 @@ export default function Relationship({ data }) {
break;
case t(Cardinality.ONE_TO_ONE):
case Cardinality.ONE_TO_ONE:
if (settings.notation === 'default') {
if (settings.notation === Notation.DEFAULT) {
cardinalityStart = "1";
cardinalityEnd = "1";
} else {
@@ -148,7 +147,7 @@ export default function Relationship({ data }) {
}
};
if ((settings.notation === 'crows_foot' || settings.notation === 'idef1x') && cardinalityEndX < cardinalityStartX){
if ((settings.notation === Notation.CROWS_FOOT || settings.notation === Notation.IDEF1X) && cardinalityEndX < cardinalityStartX){
direction = -1;
}
@@ -178,6 +177,20 @@ export default function Relationship({ data }) {
strokeWidth={2}
cursor="pointer"
/>
{settings.showCardinality && (
<>
{format(
pathRef,
cardinalityEndX,
cardinalityEndY,
cardinalityStartX,
cardinalityStartY,
direction,
cardinalityStart,
cardinalityEnd,
)}
</>
)}
{settings.showRelationshipLabels && (
<>
<rect
@@ -200,7 +213,6 @@ export default function Relationship({ data }) {
</text>
</>
)}
{format(pathRef.current, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalityStart, cardinalityEnd)}
</g>
<SideSheet

150
src/components/EditorCanvas/RelationshipFormat.jsx
View File

@@ -1,4 +1,14 @@
export function CrowOM(pathRef, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalityStart, cardinalityEnd){
export function CrowOM(
pathRef,
cardinalityEndX,
cardinalityEndY,
cardinalityStartX,
cardinalityStartY,
direction,
cardinalityStart,
cardinalityEnd
) {
return(
pathRef &&(
<>
@@ -30,9 +40,9 @@ export function CrowOM(pathRef, cardinalityEndX, cardinalityEndY, cardinalitySta
className="group-hover:fill-sky-700"
/>
<text
x={cardinalityStartX}
y={cardinalityStartY-10}
fill="black"
x={cardinalityStartX-5}
y={cardinalityStartY-20}
fill= "gray"
strokeWidth="0.5"
textAnchor="middle"
alignmentBaseline="middle"
@@ -40,9 +50,9 @@ export function CrowOM(pathRef, cardinalityEndX, cardinalityEndY, cardinalitySta
{cardinalityStart}
</text>
<text
x={cardinalityEndX-15}
y={cardinalityEndY-15}
fill="black"
x={cardinalityEndX-8}
y={cardinalityEndY-24}
fill="gray"
strokeWidth="0.5"
textAnchor="middle"
alignmentBaseline="middle"
@@ -72,7 +82,16 @@ export function CrowOM(pathRef, cardinalityEndX, cardinalityEndY, cardinalitySta
)
}
export function CrowOO(pathRef, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalitySart, cardinalityEnd){
export function CrowOO(
pathRef,
cardinalityEndX,
cardinalityEndY,
cardinalityStartX,
cardinalityStartY,
direction,
cardinalitySart,
cardinalityEnd
) {
return(
pathRef && (
<>
@@ -115,9 +134,9 @@ export function CrowOO(pathRef, cardinalityEndX, cardinalityEndY, cardinalitySta
/>
<text
x={cardinalityStartX}
y={cardinalityStartY-15}
fill="black"
x={cardinalityStartX-8}
y={cardinalityStartY-20}
fill="gray"
strokeWidth="0.5"
textAnchor="middle"
alignmentBaseline="middle"
@@ -126,8 +145,8 @@ export function CrowOO(pathRef, cardinalityEndX, cardinalityEndY, cardinalitySta
</text>
<text
x={cardinalityEndX-15}
y={cardinalityEndY-15}
fill="black"
y={cardinalityEndY-20}
fill="gray"
strokeWidth="0.5"
textAnchor="middle"
alignmentBaseline="middle"
@@ -139,82 +158,14 @@ export function CrowOO(pathRef, cardinalityEndX, cardinalityEndY, cardinalitySta
)
}
export function CrowZM(pathRef, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalityStart, cardinalityEnd){
return(
pathRef &&(
<>
<circle
cx={cardinalityEndX-24}
cy={cardinalityEndY}
r="4"
stroke="gray"
strokeWidth='2'
fill="none"
className="group-hover:fill-sky-700"
/>
<line
x1={cardinalityEndX-(20*direction)}
y1={cardinalityEndY}
x2={cardinalityEndX+1}
y2={cardinalityEndY-10}
stroke="gray"
strokeWidth='2'
className="group-hover:fill-sky-700"
/>
<line
x1={cardinalityEndX-20*direction}
y1={cardinalityEndY}
x2={cardinalityEndX+1}
y2={cardinalityEndY+10}
stroke="gray"
strokeWidth='2'
className="group-hover:fill-sky-700"
/>
<text
x={cardinalityStartX}
y={cardinalityStartY-10}
fill="black"
strokeWidth="0.5"
textAnchor="middle"
alignmentBaseline="middle"
>
{cardinalityStart}
</text>
<text
x={cardinalityEndX-15}
y={cardinalityEndY-15}
fill="black"
strokeWidth="0.5"
textAnchor="middle"
alignmentBaseline="middle"
>
{cardinalityEnd}
</text>
<line
x1={cardinalityStartX-(15*direction)}
y1={cardinalityStartY+10}
x2={cardinalityStartX-(15*direction)}
y2={cardinalityStartY-10}
stroke="gray"
strokeWidth='2'
className="group-hover:fill-sky-700"
/>
<line
x1={cardinalityStartX-(10*direction)}
y1={cardinalityStartY+10}
x2={cardinalityStartX-(10*direction)}
y2={cardinalityStartY-10}
stroke="gray"
strokeWidth='2'
className="group-hover:fill-sky-700"
/>
</>
)
)
}
export function DefaultNotation(pathRef, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalityStart, cardinalityEnd){
export function DefaultNotation(
pathRef,
cardinalityEndX,
cardinalityEndY, cardinalityStartX,
cardinalityStartY,
cardinalityStart,
cardinalityEnd
) {
return(
pathRef && (
<>
@@ -257,7 +208,16 @@ export function DefaultNotation(pathRef, cardinalityEndX, cardinalityEndY, cardi
)
}
export function IDEFZM(pathRef, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY, direction, cardinalityStart, cardinalityEnd){
export function IDEFZM(
pathRef,
cardinalityEndX,
cardinalityEndY,
cardinalityStartX,
cardinalityStartY,
direction,
cardinalityStart,
cardinalityEnd
) {
return(
pathRef && (
<>
@@ -271,9 +231,9 @@ export function IDEFZM(pathRef, cardinalityEndX, cardinalityEndY, cardinalitySta
className="group-hover:fill-sky-700"
/>
<text
x={cardinalityStartX}
y={cardinalityStartY-10}
fill="black"
x={cardinalityStartX-8}
y={cardinalityStartY-20}
fill="grey"
strokeWidth="0.5"
textAnchor="middle"
alignmentBaseline="middle"
@@ -282,8 +242,8 @@ export function IDEFZM(pathRef, cardinalityEndX, cardinalityEndY, cardinalitySta
</text>
<text
x={cardinalityEndX-15}
y={cardinalityEndY-15}
fill="black"
y={cardinalityEndY-20}
fill="grey"
strokeWidth="0.5"
textAnchor="middle"
alignmentBaseline="middle"

48
src/components/EditorCanvas/Table.jsx
View File

@@ -5,6 +5,7 @@ import {
tableFieldHeight,
tableHeaderHeight,
tableColorStripHeight,
Notation,
} from "../../data/constants";
import {
IconEdit,
@@ -77,8 +78,8 @@ export default function Table(props) {
onDoubleClick={openEditor}
className={`border-2 hover:border-dashed hover:border-blue-500
select-none w-full ${
settings.notation !== "default"
? "transparent no-border"
settings.notation !== Notation.DEFAULT
? "border-none"
: "rounded-lg"
} ${
selectedElement.id === tableData.id &&
@@ -90,21 +91,23 @@ export default function Table(props) {
>
<div
className={`h-[10px] w-full ${
settings.notation !== "default"
settings.notation !== Notation.DEFAULT
? ""
: "rounded-t-md"
}`}
style={{ backgroundColor: tableData.color, height: settings.notation !== "default" ? 0 : "10px" }}
style={{ backgroundColor: tableData.color, height: settings.notation !== 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" : ""
settings.notation !== Notation.DEFAULT
? "bg-transparent"
: settings.mode === "light"
? "bg-zinc-200"
: "bg-zinc-900"
}`}
>
<div className={` px-3 overflow-hidden text-ellipsis whitespace-nowrap ${
settings.notation !== "default"
settings.notation !== Notation.DEFAULT
? ""
: ""
}`}
@@ -294,17 +297,23 @@ export default function Table(props) {
return (
<div
className={`
${
(fieldData.primary && settings.notation !== "default" && primaryKeyCount === 1)
${(tableData.fields.length === 1 && settings.notation === Notation.DEFAULT)
? "rounded-b-md"
: ""
}${(tableData.fields.length === 1 && settings.notation !== Notation.DEFAULT)
? "border-l border-r border-gray-400"
: ""
}${
(fieldData.primary && settings.notation !== Notation.DEFAULT && primaryKeyCount === 1)
? "border-b border-gray-400"
: ""
}${
(fieldData.primary && settings.notation !== "default" && index ===primaryKeyCount - 1)
(fieldData.primary && settings.notation !== Notation.DEFAULT && index ===primaryKeyCount - 1)
? "border-b border-gray-400"
: ""
}
${
(!fieldData.primary && settings.notation !== "default" )
(!fieldData.primary && settings.notation !== Notation.DEFAULT )
? "border-l border-r"
: ""
} ${
@@ -312,24 +321,23 @@ export default function Table(props) {
? "bg-zinc-100 text-zinc-800"
: "bg-zinc-800 text-zinc-200"
} ${
(settings.notation !== "default" && index !== tableData.fields.length - 1)
(settings.notation !== Notation.DEFAULT && index !== tableData.fields.length - 1)
? "border-l border-r border-gray-400"
: ""
} ${
(settings.notation !== "default" && index === tableData.fields.length - 1)
(settings.notation !== Notation.DEFAULT && index === tableData.fields.length - 1)
? "border-b border-gray-400"
: ""
} ${
(fieldData.primary && settings.notation === "default")
(fieldData.primary && settings.notation === Notation.DEFAULT)
? "border-b border-gray-400"
: ""
}${
(settings.notation === "default" && index !== tableData.fields.length - 1 && fieldData.primary === false)
(settings.notation === Notation.DEFAULT && index !== tableData.fields.length - 1 && fieldData.primary === false)
? "border-b border-gray-400"
: ""
}${
// Checa que cuando seas el último se redondee
(settings.notation === "default" && index === tableData.fields.length - 1)
(settings.notation === Notation.DEFAULT && index === tableData.fields.length - 1)
? "rounded-b-md"
: ""
} group h-[36px] px-2 py-1 flex justify-between items-center gap-1 w-full overflow-hidden`}
@@ -360,7 +368,7 @@ export default function Table(props) {
>
<button
className={`flex-shrink-0 w-[10px] h-[10px] bg-[#2f68adcc] rounded-full ${
(fieldData.primary && settings.notation !== "default")
(fieldData.primary && settings.notation !== Notation.DEFAULT)
? "bg-[#ff2222cc]"
: "bg-[#2f68adcc]"
}`}
@@ -406,7 +414,7 @@ export default function Table(props) {
/>
) : (
<div className="flex gap-1 items-center">
{settings.notation !== "default" ? (
{settings.notation !== Notation.DEFAULT ? (
<>
<span>
{fieldData.type +

31
src/components/EditorHeader/ControlPanel.jsx
View File

@@ -40,6 +40,7 @@ import {
SIDESHEET,
DB,
IMPORT_FROM,
Notation,
} from "../../data/constants";
import jsPDF from "jspdf";
import { useHotkeys } from "react-hotkeys-hook";
@@ -1220,33 +1221,33 @@ export default function ControlPanel({
function: viewGrid,
shortcut: "Ctrl+Shift+G",
},
// show_cardinality: {
// state: settings.showCardinality ? (
// <i className="bi bi-toggle-on" />
// ) : (
// <i className="bi bi-toggle-off" />
// ),
// function: () =>
// setSettings((prev) => ({
// ...prev,
// showCardinality: !prev.showCardinality,
// })),
// },
show_cardinality: {
state: settings.showCardinality ? (
<i className="bi bi-toggle-on" />
) : (
<i className="bi bi-toggle-off" />
),
function: () =>
setSettings((prev) => ({
...prev,
showCardinality: !prev.showCardinality,
})),
},
notation: {
children: [
{
default_notation: () => {
setSettings((prev) => ({ ...prev, notation: "default" }));
setSettings((prev) => ({ ...prev, notation: Notation.DEFAULT }));
},
},
{
crows_foot_notation: () => {
setSettings((prev) => ({ ...prev, notation: "crows_foot" }));
setSettings((prev) => ({ ...prev, notation: Notation.CROWS_FOOT }));
},
},
{
idef1x_notation: () => {
setSettings((prev) => ({ ...prev, notation: "idef1x" }));
setSettings((prev) => ({ ...prev, notation: Notation.IDEF1X }));
},
},
],

5
src/context/SettingsContext.jsx
View File

@@ -1,6 +1,5 @@
import { createContext, useEffect, useState } from "react";
import { tableWidth } from "../data/constants";
import { tableWidth, Notation } from "../data/constants";
const defaultSettings = {
strictMode: false,
showFieldSummary: true,
@@ -10,7 +9,7 @@ const defaultSettings = {
panning: true,
showCardinality: true,
showRelationshipLabels: true,
notation: "default",
notation: Notation.DEFAULT,
tableWidth: tableWidth,
showDebugCoordinates: false,
};

6
src/data/constants.js
View File

@@ -34,7 +34,11 @@ export const Cardinality = {
ONE_TO_MANY: "one_to_many",
MANY_TO_ONE: "many_to_one",
};
export const Notation = {
DEFAULT: "default",
CROWS_FOOT: "crows_foot",
IDEF1X: "idef1x",
}
export const Constraint = {
NONE: "No action",
RESTRICT: "Restrict",

6
src/i18n/locales/en.js
View File

@@ -50,9 +50,9 @@ const en = {
reset_view: "Reset view",
show_grid: "Show grid",
show_cardinality: "Show cardinality",
default_notation: "Default notation",
crows_foot_notation: "Crow's foot notation",
idef1x_notation: "IDEF1X notation",
default_notation: "Default",
crows_foot_notation: "Crow's foot",
idef1x_notation: "IDEF1X",
notation: "Notation",
theme: "Theme",
light: "Light",

11
src/index.css
View File

@@ -134,8 +134,7 @@
}
.table-border {
/* border-color: rgba(var(--semi-grey-2), 1); */
border-color: rgba(0, 255, 0, 1);
border-color: rgba(var(--semi-grey-2), 1);
}
.bg-dots {
@@ -192,11 +191,3 @@
opacity: 0;
}
}
.transparent {
background-color: transparent;
}
.no-border {
border: none;
}