ui: devtools

This commit is contained in:
cha0s 2024-07-08 22:14:21 -05:00
parent b592ecb56b
commit af571e25af
4 changed files with 72 additions and 26 deletions

View File

@ -24,10 +24,11 @@ export default function Devtools({
</TabList> </TabList>
<TabPanel> <TabPanel>
<div className={styles.dashboard}>
<form> <form>
<div className={styles.engineBar}> <div className={styles.engineBar}>
<label> <label>
Apply filters <span>Apply filters</span>
<input <input
checked={applyFilters} checked={applyFilters}
onChange={() => { onChange={() => {
@ -38,7 +39,7 @@ export default function Devtools({
</label> </label>
</div> </div>
</form> </form>
</div>
</TabPanel> </TabPanel>
<TabPanel> <TabPanel>

View File

@ -9,15 +9,41 @@
color: white; color: white;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
padding: 16px;
width: 100%; width: 100%;
} }
.devtools form {
label {
font-weight: bold;
:first-child {
margin-right: 4px;
}
}
input, select, option {
background-color: #333333;
color: #ffffff;
}
}
.devtools > :global(.react-tabs) { .devtools > :global(.react-tabs) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
> :global(.react-tabs__tab-list) {
margin-bottom: 0;
}
> :global(.react-tabs__tab-panel) { > :global(.react-tabs__tab-panel) {
overflow-y: auto; overflow-y: auto;
} }
:global(.react-tabs__tab--selected) {
background-color: #00000022;
color: #ffffff;
}
:global(.react-tabs__tab:focus:after) {
background-color: #00000044;
}
}
.dashboard {
margin: 16px;
} }

View File

@ -35,7 +35,7 @@ export default function Tiles({
<div className={styles.paintBar}> <div className={styles.paintBar}>
<div className={styles.layer}> <div className={styles.layer}>
<label> <label>
Layer: <span>Layer</span>
<select <select
onChange={(event) => { onChange={(event) => {
setLayer(event.target.value) setLayer(event.target.value)
@ -58,7 +58,7 @@ export default function Tiles({
</div> </div>
<div className={styles.brush}> <div className={styles.brush}>
<label> <label>
Brush: <span>Brush</span>
<select <select
onChange={(event) => { onChange={(event) => {
setBrush(event.target.value) setBrush(event.target.value)
@ -76,14 +76,18 @@ export default function Tiles({
onMouseDown={(event) => { onMouseDown={(event) => {
const wrapperRect = wrapperRef.current.getBoundingClientRect(); const wrapperRect = wrapperRef.current.getBoundingClientRect();
const {left, top} = wrapperRect; const {left, top} = wrapperRect;
const c = {
x: event.clientX,
y: event.clientY + wrapperRef.current.scrollTop,
};
if ( if (
event.clientX - left >= (w * factor) c.x - left >= (w * factor)
|| event.clientY - top >= (h * factor) || c.y - top >= (h * factor)
) { ) {
return; return;
} }
const x = Math.floor((event.clientX - left) / (tileSize.x * factor)); const x = Math.floor((c.x - left) / (tileSize.x * factor));
const y = Math.floor((event.clientY - top) / (tileSize.y * factor)); const y = Math.floor((c.y - top) / (tileSize.y * factor));
setMoveStart({x, y}); setMoveStart({x, y});
setSelection({x, y, w: 1, h: 1}); setSelection({x, y, w: 1, h: 1});
}} }}
@ -94,11 +98,15 @@ export default function Tiles({
const {x: sx, y: sy} = moveStart; const {x: sx, y: sy} = moveStart;
const wrapperRect = wrapperRef.current.getBoundingClientRect(); const wrapperRect = wrapperRef.current.getBoundingClientRect();
const {left, top} = wrapperRect; const {left, top} = wrapperRect;
const c = {
x: event.clientX,
y: event.clientY + wrapperRef.current.scrollTop,
};
const x = Math.floor( const x = Math.floor(
Math.max(0, Math.min((w * factor) - 1, (event.clientX - left)) / (tileSize.x * factor)), Math.max(0, Math.min((w * factor) - 1, (c.x - left)) / (tileSize.x * factor)),
); );
const y = Math.floor( const y = Math.floor(
Math.max(0, Math.min((h * factor) - 1, (event.clientY - top)) / (tileSize.y * factor)), Math.max(0, Math.min((h * factor) - 1, (c.y - top)) / (tileSize.y * factor)),
); );
const mx = Math.min(sx, x); const mx = Math.min(sx, x);
const my = Math.min(sy, y); const my = Math.min(sy, y);

View File

@ -1,10 +1,21 @@
.tiles {
display: flex;
height: 100%;
flex-direction: column;
}
.paintBar { .paintBar {
display: flex; display: flex;
gap: 16px; gap: 16px;
margin: 16px 0; margin: 16px;
margin-bottom: 0;
} }
.selectionWrapper { .selectionWrapper {
margin: 16px;
margin-right: 0;
overflow-y: auto;
padding-right: 16px;
position: relative; position: relative;
} }