drawdb-io/drawdb
1
0
Fork 0
mirror of https://github.com/drawdb-io/drawdb.git synced 2025-07-18 10:11:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix fit window, move hardcoded constants to constants.js (#482)

Browse Source 
* fix fit window, move hardcoded constants to constants.js

* comment fixes

* change import from utils.js to utils
This commit is contained in:
Karen Mkrtumyan
2025-06-08 00:22:31 +04:00
committed by GitHub
parent 938ad7c01d
commit f85adf0577
7 changed files with 99 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/EditorCanvas/Canvas.jsx
View File

@@ -28,6 +28,7 @@ import { useTranslation } from "react-i18next";
import { useEventListener } from "usehooks-ts";
import { areFieldsCompatible } from "../../utils/utils";
import { getRectFromEndpoints, isInsideRect } from "../../utils/rect";
import { noteWidth } from "../../data/constants";
export default function Canvas() {
const { t } = useTranslation();
@@ -154,7 +155,7 @@ export default function Canvas() {
{
x: note.x,
y: note.y,
width: 180,
width: noteWidth,
height: note.height,
},
rect,

32
src/components/EditorCanvas/Note.jsx
View File

@@ -15,11 +15,9 @@ import {
useSaveState,
} from "../../hooks";
import { useTranslation } from "react-i18next";
import { noteWidth, noteRadius, noteFold } from "../../data/constants";
export default function Note({ data, onPointerDown }) {
const w = 180;
const r = 3;
const fold = 24;
const [editField, setEditField] = useState({});
const [hovered, setHovered] = useState(false);
const { layout } = useLayout();
@@ -102,15 +100,15 @@ export default function Note({ data, onPointerDown }) {
}}
>
<path
d={`M${data.x + fold} ${data.y} L${data.x + w - r} ${
d={`M${data.x + noteFold} ${data.y} L${data.x + noteWidth - noteRadius} ${
data.y
} A${r} ${r} 0 0 1 ${data.x + w} ${data.y + r} L${data.x + w} ${
data.y + data.height - r
} A${r} ${r} 0 0 1 ${data.x + w - r} ${data.y + data.height} L${
data.x + r
} ${data.y + data.height} A${r} ${r} 0 0 1 ${data.x} ${
data.y + data.height - r
} L${data.x} ${data.y + fold}`}
} A${noteRadius} ${noteRadius} 0 0 1 ${data.x + noteWidth} ${data.y + noteRadius} L${data.x + noteWidth} ${
data.y + data.height - noteRadius
} A${noteRadius} ${noteRadius} 0 0 1 ${data.x + noteWidth - noteRadius} ${data.y + data.height} L${
data.x + noteRadius
} ${data.y + data.height} A${noteRadius} ${noteRadius} 0 0 1 ${data.x} ${
data.y + data.height - noteRadius
} L${data.x} ${data.y + noteFold}`}
fill={data.color}
stroke={
hovered
@@ -124,11 +122,11 @@ export default function Note({ data, onPointerDown }) {
strokeWidth="2"
/>
<path
d={`M${data.x} ${data.y + fold} L${data.x + fold - r} ${
data.y + fold
} A${r} ${r} 0 0 0 ${data.x + fold} ${data.y + fold - r} L${
data.x + fold
} ${data.y} L${data.x} ${data.y + fold} Z`}
d={`M${data.x} ${data.y + noteFold} L${data.x + noteFold - noteRadius} ${
data.y + noteFold
} A${noteRadius} ${noteRadius} 0 0 0 ${data.x + noteFold} ${data.y + noteFold - noteRadius} L${
data.x + noteFold
} ${data.y} L${data.x} ${data.y + noteFold} Z`}
fill={data.color}
stroke={
hovered
@@ -144,7 +142,7 @@ export default function Note({ data, onPointerDown }) {
<foreignObject
x={data.x}
y={data.y}
width={w}
width={noteWidth}
height={data.height}
onPointerDown={onPointerDown}
>

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

@@ -22,6 +22,7 @@ import { useTranslation } from "react-i18next";
import { dbToTypes } from "../../data/datatypes";
import { isRtl } from "../../i18n/utils/rtl";
import i18n from "../../i18n/i18n";
import { getTableHeight } from "../../utils/utils";
export default function Table(props) {
const [hoveredField, setHoveredField] = useState(null);
@@ -45,8 +46,7 @@ export default function Table(props) {
[settings.mode],
);
const height =
tableData.fields.length * tableFieldHeight + tableHeaderHeight + 7;
const height = getTableHeight(tableData);
const isSelected = useMemo(() => {
return (

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

@@ -42,6 +42,7 @@ import {
SIDESHEET,
DB,
IMPORT_FROM,
noteWidth,
} from "../../data/constants";
import jsPDF from "jspdf";
import { useHotkeys } from "react-hotkeys-hook";
@@ -79,6 +80,7 @@ import { socials } from "../../data/socials";
import { toDBML } from "../../utils/exportAs/dbml";
import { exportSavedData } from "../../utils/exportSavedData";
import { nanoid } from "nanoid";
import { getTableHeight } from "../../utils/utils";
export default function ControlPanel({
diagramId,
@@ -516,19 +518,52 @@ export default function ControlPanel({
const resetView = () =>
setTransform((prev) => ({ ...prev, zoom: 1, pan: { x: 0, y: 0 } }));
const fitWindow = () => {
const diagram = document.getElementById("diagram").getBoundingClientRect();
const canvas = document.getElementById("canvas").getBoundingClientRect();
const scaleX = canvas.width / diagram.width;
const scaleY = canvas.height / diagram.height;
const scale = Math.min(scaleX, scaleY);
const translateX = canvas.left;
const translateY = canvas.top;
const minMaxXY = {
minX: Infinity,
minY: Infinity,
maxX: -Infinity,
maxY: -Infinity,
};
tables.forEach((table) => {
minMaxXY.minX = Math.min(minMaxXY.minX, table.x);
minMaxXY.minY = Math.min(minMaxXY.minY, table.y);
minMaxXY.maxX = Math.max(minMaxXY.maxX, table.x + settings.tableWidth);
minMaxXY.maxY = Math.max(minMaxXY.maxY, table.y + getTableHeight(table));
});
areas.forEach((area) => {
minMaxXY.minX = Math.min(minMaxXY.minX, area.x);
minMaxXY.minY = Math.min(minMaxXY.minY, area.y);
minMaxXY.maxX = Math.max(minMaxXY.maxX, area.x + area.width);
minMaxXY.maxY = Math.max(minMaxXY.maxY, area.y + area.height);
});
notes.forEach((note) => {
minMaxXY.minX = Math.min(minMaxXY.minX, note.x);
minMaxXY.minY = Math.min(minMaxXY.minY, note.y);
minMaxXY.maxX = Math.max(minMaxXY.maxX, note.x + noteWidth);
minMaxXY.maxY = Math.max(minMaxXY.maxY, note.y + note.height);
});
const padding = 10;
const width = minMaxXY.maxX - minMaxXY.minX + padding;
const height = minMaxXY.maxY - minMaxXY.minY + padding;
const scaleX = canvas.width / width;
const scaleY = canvas.height / height;
// Making sure the scale is a multiple of 0.05
const scale = Math.floor(Math.min(scaleX, scaleY) * 20) / 20;
const centerX = (minMaxXY.minX + minMaxXY.maxX) / 2;
const centerY = (minMaxXY.minY + minMaxXY.maxY) / 2;
setTransform((prev) => ({
...prev,
zoom: scale - 0.01,
pan: { x: translateX, y: translateY },
zoom: scale,
pan: { x: centerX, y: centerY },
}));
};
const edit = () => {

37
src/components/Thumbnail.jsx
View File

@@ -1,4 +1,10 @@
import { tableFieldHeight, tableHeaderHeight } from "../data/constants";
import {
tableFieldHeight,
tableHeaderHeight,
noteWidth,
noteRadius,
noteFold,
} from "../data/constants";
export default function Thumbnail({ diagram, i, zoom, theme }) {
return (
@@ -111,37 +117,34 @@ export default function Thumbnail({ diagram, i, zoom, theme }) {
{diagram.notes?.map((n) => {
const x = n.x;
const y = n.y;
const w = 180;
const r = 3;
const fold = 24;
const h = n.height;
return (
<g key={n.id}>
<path
d={`M${x + fold} ${y} L${x + w - r} ${y} A${r} ${r} 0 0 1 ${
x + w
} ${y + r} L${x + w} ${y + h - r} A${r} ${r} 0 0 1 ${
x + w - r
} ${y + h} L${x + r} ${y + h} A${r} ${r} 0 0 1 ${x} ${
y + h - r
} L${x} ${y + fold}`}
d={`M${x + noteFold} ${y} L${x + noteWidth - noteRadius} ${y} A${noteRadius} ${noteRadius} 0 0 1 ${
x + noteWidth
} ${y + noteRadius} L${x + noteWidth} ${y + h - noteRadius} A${noteRadius} ${noteRadius} 0 0 1 ${
x + noteWidth - noteRadius
} ${y + h} L${x + noteRadius} ${y + h} A${noteRadius} ${noteRadius} 0 0 1 ${x} ${
y + h - noteRadius
} L${x} ${y + noteFold}`}
fill={n.color}
stroke="rgb(168 162 158)"
strokeLinejoin="round"
strokeWidth="0.5"
/>
<path
d={`M${x} ${y + fold} L${x + fold - r} ${
y + fold
} A${r} ${r} 0 0 0 ${x + fold} ${y + fold - r} L${
x + fold
} ${y} L${x} ${y + fold} Z`}
d={`M${x} ${y + noteFold} L${x + noteFold - noteRadius} ${
y + noteFold
} A${noteRadius} ${noteRadius} 0 0 0 ${x + noteFold} ${y + noteFold - noteRadius} L${
x + noteFold
} ${y} L${x} ${y + noteFold} Z`}
fill={n.color}
stroke={"rgb(168 162 158)"}
strokeLinejoin="round"
strokeWidth="0.5"
/>
<foreignObject x={x} y={y} width={w} height={h}>
<foreignObject x={x} y={y} width={noteWidth} height={h}>
<div className="text-gray-900 w-full h-full px-4 py-2">
<label htmlFor={`note_${n.id}`} className="ms-4">
{n.title}

3
src/data/constants.js
View File

@@ -1,5 +1,8 @@
export const defaultBlue = "#175e7a";
export const defaultNoteTheme = "#fcf7ac";
export const noteWidth = 180;
export const noteRadius = 3;
export const noteFold = 24;
export const darkBgTheme = "#16161A";
export const stringColor = "text-orange-500";
export const intColor = "text-yellow-500";

14
src/utils/utils.js
View File

@@ -1,5 +1,11 @@
import { dbToTypes } from "../data/datatypes";
import {
tableFieldHeight,
tableHeaderHeight,
tableColorStripHeight,
} from "../data/constants";
export function dataURItoBlob(dataUrl) {
const byteString = atob(dataUrl.split(",")[1]);
const mimeString = dataUrl.split(",")[0].split(":")[1].split(";")[0];
@@ -46,3 +52,11 @@ export function areFieldsCompatible(db, field1, field2) {
}
return same;
}
export function getTableHeight(table) {
return (
table.fields.length * tableFieldHeight +
tableHeaderHeight +
tableColorStripHeight
);
}