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.
This commit is contained in:
Felix Zedén Yverås
parent
354ea47529
commit
32c82168fe
@ -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"
|
||||
<>
|
||||
<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="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
|
||||
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"
|
||||
/>
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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: [
|
||||
{
|
||||
|
||||
@ -13,6 +13,7 @@ export default function SettingsContextProvider({ children }) {
|
||||
panning: true,
|
||||
showCardinality: true,
|
||||
tableWidth: tableWidth,
|
||||
showCursorCoordinates: false,
|
||||
});
|
||||
|
||||
return (
|
||||
|
||||
@ -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",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user