Skip to content

Commit

Permalink
feat: add debug coordinate overlay
Browse files Browse the repository at this point in the history 
Makes debugging issues in conversion from screen space
to diagram space easier.

Only adding english translations as I do not speak the
other languages.
  • Loading branch information
@FelixZY
FelixZY committed Jul 14, 2024
1 parent 354ea47 commit 32c8216
Show file tree
Hide file tree
Showing 4 changed files with 183 additions and 90 deletions.
253 changes: 163 additions & 90 deletions src/components/EditorCanvas/Canvas.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -433,100 +433,173 @@ export default function Canvas() {
const theme = localStorage.getItem("theme");

return (
<div className="flex-grow h-full touch-none" id="canvas">
<div ref={canvas} className="w-full h-full">
<svg
onPointerMove={handlePointerMove}
onPointerDown={handlePointerDown}
onPointerUp={handlePointerUp}
className="w-full h-full"
style={{
cursor: cursor,
backgroundColor: theme === "dark" ? "rgba(22, 22, 26, 1)" : "white",
}}
>
{settings.showGrid && (
<>
<defs>
<pattern
id="pattern-circles"
x="0"
y="0"
width="24"
height="24"
patternUnits="userSpaceOnUse"
patternContentUnits="userSpaceOnUse"
>
<circle
id="pattern-circle"
cx="4"
cy="4"
r="0.85"
fill="rgb(99, 152, 191)"
></circle>
</pattern>
</defs>
<rect
x="0"
y="0"
width="100%"
height="100%"
fill="url(#pattern-circles)"
></rect>
</>
)}
<g
<>
<div className="flex-grow h-full touch-none" id="canvas">
<div ref={canvas} className="w-full h-full">
<svg
onPointerMove={handlePointerMove}
onPointerDown={handlePointerDown}
onPointerUp={handlePointerUp}
className="w-full h-full"
style={{
transform: `translate(${transform.pan.x}px, ${transform.pan.y}px) scale(${transform.zoom})`,
transformOrigin: "top left",
cursor: cursor,
backgroundColor:
theme === "dark" ? "rgba(22, 22, 26, 1)" : "white",
}}
id="diagram"
>
{areas.map((a) => (
<Area
key={a.id}
data={a}
onPointerDown={(e) =>
handlePointerDownOnElement(e, a.id, ObjectType.AREA)
}
setResize={setAreaResize}
setInitCoords={setInitCoords}
/>
))}
{relationships.map((e, i) => (
<Relationship key={i} data={e} />
))}
{tables.map((table) => (
<Table
key={table.id}
tableData={table}
setHoveredTable={setHoveredTable}
handleGripField={handleGripField}
setLinkingLine={setLinkingLine}
onPointerDown={(e) =>
handlePointerDownOnElement(e, table.id, ObjectType.TABLE)
}
/>
))}
{linking && (
<path
d={`M ${linkingLine.startX} ${linkingLine.startY} L ${linkingLine.endX} ${linkingLine.endY}`}
stroke="red"
strokeDasharray="8,8"
/>
{settings.showGrid && (
<>
<defs>
<pattern
id="pattern-circles"
x="0"
y="0"
width="24"
height="24"
patternUnits="userSpaceOnUse"
patternContentUnits="userSpaceOnUse"
>
<circle
id="pattern-circle"
cx="4"
cy="4"
r="0.85"
fill="rgb(99, 152, 191)"
></circle>
</pattern>
</defs>
<rect
x="0"
y="0"
width="100%"
height="100%"
fill="url(#pattern-circles)"
></rect>
</>
)}
{notes.map((n) => (
<Note
key={n.id}
data={n}
onPointerDown={(e) =>
handlePointerDownOnElement(e, n.id, ObjectType.NOTE)
}
/>
))}
</g>
</svg>
<g
style={{
transform: `translate(${transform.pan.x}px, ${transform.pan.y}px) scale(${transform.zoom})`,
transformOrigin: "top left",
}}
id="diagram"
>
{areas.map((a) => (
<Area
key={a.id}
data={a}
onPointerDown={(e) =>
handlePointerDownOnElement(e, a.id, ObjectType.AREA)
}
setResize={setAreaResize}
setInitCoords={setInitCoords}
/>
))}
{relationships.map((e, i) => (
<Relationship key={i} data={e} />
))}
{tables.map((table) => (
<Table
key={table.id}
tableData={table}
setHoveredTable={setHoveredTable}
handleGripField={handleGripField}
setLinkingLine={setLinkingLine}
onPointerDown={(e) =>
handlePointerDownOnElement(e, table.id, ObjectType.TABLE)
}
/>
))}
{linking && (
<path
d={`M ${linkingLine.startX} ${linkingLine.startY} L ${linkingLine.endX} ${linkingLine.endY}`}
stroke="red"
strokeDasharray="8,8"
/>
)}
{notes.map((n) => (
<Note
key={n.id}
data={n}
onPointerDown={(e) =>
handlePointerDownOnElement(e, n.id, ObjectType.NOTE)
}
/>
))}
</g>
</svg>
</div>
{settings.showDebugCoordinates && (
<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">
<table className="table-auto grow">
<thead>
<tr>
<th className="text-left" colSpan={3}>
{t("transform")}
</th>
</tr>
<tr className="italic [&_th]:font-normal [&_th]:text-right">
<th>pan x</th>
<th>pan y</th>
<th>scale</th>
</tr>
</thead>
<tbody className="[&_td]:text-right [&_td]:min-w-[8ch]">
<tr>
<td>{transform.pan.x.toFixed(2)}</td>
<td>{transform.pan.y.toFixed(2)}</td>
<td>{transform.zoom.toFixed(4)}</td>
</tr>
</tbody>
</table>
<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]">
<thead>
<tr>
<th colSpan={4}>{t("viewbox")}</th>
</tr>
<tr className="italic [&_th]:font-normal">
<th>left</th>
<th>top</th>
<th>width</th>
<th>height</th>
</tr>
</thead>
<tbody>
<tr>
<td>TODO</td>
<td>TODO</td>
<td>TODO</td>
<td>TODO</td>
</tr>
</tbody>
</table>
<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]">
<thead>
<tr>
<th colSpan={3}>{t("cursor_coordinates")}</th>
</tr>
<tr className="italic [&_th]:font-normal">
<th>{t("coordinate_space")}</th>
<th>x</th>
<th>y</th>
</tr>
</thead>
<tbody>
<tr>
<td>{t("coordinate_space_screen")}</td>
<td>TODO</td>
<td>TODO</td>
</tr>
<tr>
<td>{t("coordinate_space_diagram")}</td>
<td>TODO</td>
<td>TODO</td>
</tr>
</tbody>
</table>
</div>
)}
</div>
</div>
</>
);
}
12 changes: 12 additions & 0 deletions src/components/EditorHeader/ControlPanel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1158,6 +1158,18 @@ export default function ControlPanel({
showCardinality: !prev.showCardinality,
})),
},
show_debug_coordinates: {
state: settings.showDebugCoordinates ? (
<i className="bi bi-toggle-on" />
) : (
<i className="bi bi-toggle-off" />
),
function: () =>
setSettings((prev) => ({
...prev,
showDebugCoordinates: !prev.showDebugCoordinates,
})),
},
theme: {
children: [
{
Expand Down
1 change: 1 addition & 0 deletions src/context/SettingsContext.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export default function SettingsContextProvider({ children }) {
panning: true,
showCardinality: true,
tableWidth: tableWidth,
showCursorCoordinates: false,
});

return (
Expand Down
7 changes: 7 additions & 0 deletions src/i18n/locales/en.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,13 @@ const en = {
show_timeline: "Show timeline",
autosave: "Autosave",
panning: "Panning",
show_debug_coordinates: "Show debug coordinates",
transform: "Transform",
viewbox: "View Box",
cursor_coordinates: "Cursor Coordinates",
coordinate_space: "Space",
coordinate_space_screen: "Screen",
coordinate_space_diagram: "Diagram",
table_width: "Table width",
language: "Language",
flush_storage: "Flush storage",
Expand Down

0 comments on commit 32c8216

Please sign in to comment.