Skip to content

Commit 92d13c2

Browse files
FelixZYFelixZY
committed
feat: add debug coordinate overlay
Makes debugging issues in conversion from screen space to diagram space easier. Only adding english translations as I do not speak the other languages.
1 parent 10712e5 commit 92d13c2

File tree

4 files changed

+183
-90
lines changed

4 files changed

+183
-90
lines changed

‎src/components/EditorCanvas/Canvas.jsx‎

Lines changed: 163 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -433,100 +433,173 @@ export default function Canvas() {
433433
const theme = localStorage.getItem("theme");
434434

435435
return (
436-
<div className="flex-grow h-full touch-none" id="canvas">
437-
<div ref={canvas} className="w-full h-full">
438-
<svg
439-
onPointerMove={handlePointerMove}
440-
onPointerDown={handlePointerDown}
441-
onPointerUp={handlePointerUp}
442-
className="w-full h-full"
443-
style={{
444-
cursor: cursor,
445-
backgroundColor: theme === "dark" ? "rgba(22, 22, 26, 1)" : "white",
446-
}}
447-
>
448-
{settings.showGrid && (
449-
<>
450-
<defs>
451-
<pattern
452-
id="pattern-circles"
453-
x="0"
454-
y="0"
455-
width="24"
456-
height="24"
457-
patternUnits="userSpaceOnUse"
458-
patternContentUnits="userSpaceOnUse"
459-
>
460-
<circle
461-
id="pattern-circle"
462-
cx="4"
463-
cy="4"
464-
r="0.85"
465-
fill="rgb(99, 152, 191)"
466-
></circle>
467-
</pattern>
468-
</defs>
469-
<rect
470-
x="0"
471-
y="0"
472-
width="100%"
473-
height="100%"
474-
fill="url(#pattern-circles)"
475-
></rect>
476-
</>
477-
)}
478-
<g
436+
<>
437+
<div className="flex-grow h-full touch-none" id="canvas">
438+
<div ref={canvas} className="w-full h-full">
439+
<svg
440+
onPointerMove={handlePointerMove}
441+
onPointerDown={handlePointerDown}
442+
onPointerUp={handlePointerUp}
443+
className="w-full h-full"
479444
style={{
480-
transform: `translate(${transform.pan.x}px, ${transform.pan.y}px) scale(${transform.zoom})`,
481-
transformOrigin: "top left",
445+
cursor: cursor,
446+
backgroundColor:
447+
theme === "dark" ? "rgba(22, 22, 26, 1)" : "white",
482448
}}
483-
id="diagram"
484449
>
485-
{areas.map((a) => (
486-
<Area
487-
key={a.id}
488-
data={a}
489-
onPointerDown={(e) =>
490-
handlePointerDownOnElement(e, a.id, ObjectType.AREA)
491-
}
492-
setResize={setAreaResize}
493-
setInitCoords={setInitCoords}
494-
/>
495-
))}
496-
{relationships.map((e, i) => (
497-
<Relationship key={i} data={e} />
498-
))}
499-
{tables.map((table) => (
500-
<Table
501-
key={table.id}
502-
tableData={table}
503-
setHoveredTable={setHoveredTable}
504-
handleGripField={handleGripField}
505-
setLinkingLine={setLinkingLine}
506-
onPointerDown={(e) =>
507-
handlePointerDownOnElement(e, table.id, ObjectType.TABLE)
508-
}
509-
/>
510-
))}
511-
{linking && (
512-
<path
513-
d={`M ${linkingLine.startX} ${linkingLine.startY} L ${linkingLine.endX} ${linkingLine.endY}`}
514-
stroke="red"
515-
strokeDasharray="8,8"
516-
/>
450+
{settings.showGrid && (
451+
<>
452+
<defs>
453+
<pattern
454+
id="pattern-circles"
455+
x="0"
456+
y="0"
457+
width="24"
458+
height="24"
459+
patternUnits="userSpaceOnUse"
460+
patternContentUnits="userSpaceOnUse"
461+
>
462+
<circle
463+
id="pattern-circle"
464+
cx="4"
465+
cy="4"
466+
r="0.85"
467+
fill="rgb(99, 152, 191)"
468+
></circle>
469+
</pattern>
470+
</defs>
471+
<rect
472+
x="0"
473+
y="0"
474+
width="100%"
475+
height="100%"
476+
fill="url(#pattern-circles)"
477+
></rect>
478+
</>
517479
)}
518-
{notes.map((n) => (
519-
<Note
520-
key={n.id}
521-
data={n}
522-
onPointerDown={(e) =>
523-
handlePointerDownOnElement(e, n.id, ObjectType.NOTE)
524-
}
525-
/>
526-
))}
527-
</g>
528-
</svg>
480+
<g
481+
style={{
482+
transform: `translate(${transform.pan.x}px, ${transform.pan.y}px) scale(${transform.zoom})`,
483+
transformOrigin: "top left",
484+
}}
485+
id="diagram"
486+
>
487+
{areas.map((a) => (
488+
<Area
489+
key={a.id}
490+
data={a}
491+
onPointerDown={(e) =>
492+
handlePointerDownOnElement(e, a.id, ObjectType.AREA)
493+
}
494+
setResize={setAreaResize}
495+
setInitCoords={setInitCoords}
496+
/>
497+
))}
498+
{relationships.map((e, i) => (
499+
<Relationship key={i} data={e} />
500+
))}
501+
{tables.map((table) => (
502+
<Table
503+
key={table.id}
504+
tableData={table}
505+
setHoveredTable={setHoveredTable}
506+
handleGripField={handleGripField}
507+
setLinkingLine={setLinkingLine}
508+
onPointerDown={(e) =>
509+
handlePointerDownOnElement(e, table.id, ObjectType.TABLE)
510+
}
511+
/>
512+
))}
513+
{linking && (
514+
<path
515+
d={`M ${linkingLine.startX} ${linkingLine.startY} L ${linkingLine.endX} ${linkingLine.endY}`}
516+
stroke="red"
517+
strokeDasharray="8,8"
518+
/>
519+
)}
520+
{notes.map((n) => (
521+
<Note
522+
key={n.id}
523+
data={n}
524+
onPointerDown={(e) =>
525+
handlePointerDownOnElement(e, n.id, ObjectType.NOTE)
526+
}
527+
/>
528+
))}
529+
</g>
530+
</svg>
531+
</div>
532+
{settings.showDebugCoordinates && (
533+
<div className="fixed flex flex-col flex-wrap gap-6 bg-[rgba(var(--semi-grey-1),var(--tw-bg-opacity))]/40 border border-color bottom-4 right-4 p-4 rounded-xl backdrop-blur-sm pointer-events-none select-none">
534+
<table className="table-auto grow">
535+
<thead>
536+
<tr>
537+
<th className="text-left" colSpan={3}>
538+
{t("transform")}
539+
</th>
540+
</tr>
541+
<tr className="italic [&_th]:font-normal [&_th]:text-right">
542+
<th>pan x</th>
543+
<th>pan y</th>
544+
<th>scale</th>
545+
</tr>
546+
</thead>
547+
<tbody className="[&_td]:text-right [&_td]:min-w-[8ch]">
548+
<tr>
549+
<td>{transform.pan.x.toFixed(2)}</td>
550+
<td>{transform.pan.y.toFixed(2)}</td>
551+
<td>{transform.zoom.toFixed(4)}</td>
552+
</tr>
553+
</tbody>
554+
</table>
555+
<table className="table-auto grow [&_th]:text-left [&_th:not(:first-of-type)]:text-right [&_td:not(:first-of-type)]:text-right [&_td]:min-w-[8ch]">
556+
<thead>
557+
<tr>
558+
<th colSpan={4}>{t("viewbox")}</th>
559+
</tr>
560+
<tr className="italic [&_th]:font-normal">
561+
<th>left</th>
562+
<th>top</th>
563+
<th>width</th>
564+
<th>height</th>
565+
</tr>
566+
</thead>
567+
<tbody>
568+
<tr>
569+
<td>TODO</td>
570+
<td>TODO</td>
571+
<td>TODO</td>
572+
<td>TODO</td>
573+
</tr>
574+
</tbody>
575+
</table>
576+
<table className="table-auto grow [&_th]:text-left [&_th:not(:first-of-type)]:text-right [&_td:not(:first-of-type)]:text-right [&_td]:min-w-[8ch]">
577+
<thead>
578+
<tr>
579+
<th colSpan={3}>{t("cursor_coordinates")}</th>
580+
</tr>
581+
<tr className="italic [&_th]:font-normal">
582+
<th>{t("coordinate_space")}</th>
583+
<th>x</th>
584+
<th>y</th>
585+
</tr>
586+
</thead>
587+
<tbody>
588+
<tr>
589+
<td>{t("coordinate_space_screen")}</td>
590+
<td>TODO</td>
591+
<td>TODO</td>
592+
</tr>
593+
<tr>
594+
<td>{t("coordinate_space_diagram")}</td>
595+
<td>TODO</td>
596+
<td>TODO</td>
597+
</tr>
598+
</tbody>
599+
</table>
600+
</div>
601+
)}
529602
</div>
530-
</div>
603+
</>
531604
);
532605
}

‎src/components/EditorHeader/ControlPanel.jsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1158,6 +1158,18 @@ export default function ControlPanel({
11581158
showCardinality: !prev.showCardinality,
11591159
})),
11601160
},
1161+
show_debug_coordinates: {
1162+
state: settings.showDebugCoordinates ? (
1163+
<i className="bi bi-toggle-on" />
1164+
) : (
1165+
<i className="bi bi-toggle-off" />
1166+
),
1167+
function: () =>
1168+
setSettings((prev) => ({
1169+
...prev,
1170+
showDebugCoordinates: !prev.showDebugCoordinates,
1171+
})),
1172+
},
11611173
theme: {
11621174
children: [
11631175
{

‎src/context/SettingsContext.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export default function SettingsContextProvider({ children }) {
1313
panning: true,
1414
showCardinality: true,
1515
tableWidth: tableWidth,
16+
showCursorCoordinates: false,
1617
});
1718

1819
return (

‎src/i18n/locales/en.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,13 @@ const en = {
5959
show_timeline: "Show timeline",
6060
autosave: "Autosave",
6161
panning: "Panning",
62+
show_debug_coordinates: "Show debug coordinates",
63+
transform: "Transform",
64+
viewbox: "View Box",
65+
cursor_coordinates: "Cursor Coordinates",
66+
coordinate_space: "Space",
67+
coordinate_space_screen: "Screen",
68+
coordinate_space_diagram: "Diagram",
6269
table_width: "Table width",
6370
language: "Language",
6471
flush_storage: "Flush storage",

0 commit comments

Comments
 (0)