From 6ee917675600f1352eb33d119dbd3cd32239dcaa Mon Sep 17 00:00:00 2001 From: cha0s Date: Mon, 8 Jul 2024 15:49:23 -0500 Subject: [PATCH] refactor: devtool tabs --- app/react-components/devtools.jsx | 178 ++++-------------- app/react-components/devtools.module.css | 25 +-- app/react-components/devtools/tiles.jsx | 140 ++++++++++++++ .../devtools/tiles.module.css | 18 ++ package-lock.json | 21 +++ package.json | 1 + 6 files changed, 221 insertions(+), 162 deletions(-) create mode 100644 app/react-components/devtools/tiles.jsx create mode 100644 app/react-components/devtools/tiles.module.css diff --git a/app/react-components/devtools.jsx b/app/react-components/devtools.jsx index d7fa291..ebc2548 100644 --- a/app/react-components/devtools.jsx +++ b/app/react-components/devtools.jsx @@ -1,9 +1,10 @@ -import {useRef, useState} from 'react'; - -import {useEcs} from '@/context/ecs.js'; +import {Tab, Tabs, TabList, TabPanel} from 'react-tabs'; +import 'react-tabs/style/react-tabs.css'; import styles from './devtools.module.css'; +import Tiles from './devtools/tiles.jsx'; + export default function Devtools({ applyFilters, brush, @@ -13,142 +14,43 @@ export default function Devtools({ setLayer, setStamp, }) { - const offsetRef = useRef(); - const [selection, setSelection] = useState({x: 0, y: 0, w: 2, h: 2}); - const [moveStart, setMoveStart] = useState(); - const [ecs] = useEcs(); - if (!ecs) { - return false; - } - const master = ecs.get(1); - if (!master) { - return false; - } - const {TileLayers} = master; - const {sourceJson, tileSize} = TileLayers.layer(0); - const {w, h} = sourceJson.meta.size; return (
-
-
- -
-
-
- -
-
- -
-
-
- {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */} -
{ - if (!offsetRef.current) { - return; - } - const {left, top} = offsetRef.current.getBoundingClientRect(); - if ( - event.clientX - left >= w - || event.clientY - top >= h - ) { - return; - } - const x = Math.floor((event.clientX - left) / tileSize.x); - const y = Math.floor((event.clientY - top) / tileSize.y); - setMoveStart({x, y}); - setSelection({x, y, w: 1, h: 1}); - }} - onMouseMove={(event) => { - if (!offsetRef.current) { - return; - } - if (!moveStart) { - return; - } - const {x: sx, y: sy} = moveStart; - const {left, top} = offsetRef.current.getBoundingClientRect(); - const x = Math.floor( - Math.max(0, Math.min(w - 1, (event.clientX - left)) / tileSize.x), - ); - const y = Math.floor( - Math.max(0, Math.min(h - 1, (event.clientY - top)) / tileSize.y), - ); - const mx = Math.min(sx, x); - const my = Math.min(sy, y); - setSelection({x: mx, y: my, w: Math.abs(sx - x) + 1, h: Math.abs(sy - y) + 1}); - }} - onMouseUp={() => { - setMoveStart(); - const stamp = []; - const {x, y, w: sw, h: sh} = selection; - const tw = w / tileSize.x; - for (let iy = 0; iy < sh; ++iy) { - const row = []; - for (let ix = 0; ix < sw; ++ix) { - row.push((y + iy) * tw + x + ix); - } - stamp.push(row); - } - setStamp(stamp); - }} - className={styles.selectionWrapper} - ref={offsetRef} - > -
- tileset -
-
+ + + + Dashboard + Tiles + + + +
+
+ +
+
+ + + + + + + +
); } \ No newline at end of file diff --git a/app/react-components/devtools.module.css b/app/react-components/devtools.module.css index 3033de2..27f57dc 100644 --- a/app/react-components/devtools.module.css +++ b/app/react-components/devtools.module.css @@ -1,13 +1,7 @@ .engineBar { display: flex; gap: 16px; - margin-bottom: 16px; -} - -.paintBar { - display: flex; - gap: 16px; - margin-bottom: 16px; + margin-bottom: 16px 0; } .devtools { @@ -17,20 +11,3 @@ overflow-y: auto; padding: 16px; } - -.devtools p { - text-align: center; -} - -.selectionWrapper { - position: relative; -} - -.selectionWrapper img { - user-select: none; -} - -.selection { - background-color: #ffffff44; - position: absolute; -} diff --git a/app/react-components/devtools/tiles.jsx b/app/react-components/devtools/tiles.jsx new file mode 100644 index 0000000..859b856 --- /dev/null +++ b/app/react-components/devtools/tiles.jsx @@ -0,0 +1,140 @@ +import {useRef, useState} from 'react'; + +import {useEcs} from '@/context/ecs.js'; + +import styles from './tiles.module.css'; + +export default function Tiles({ + brush, + layer, + setBrush, + setLayer, + setStamp, +}) { + const offsetRef = useRef(); + const [selection, setSelection] = useState({x: 0, y: 0, w: 2, h: 2}); + const [moveStart, setMoveStart] = useState(); + const [ecs] = useEcs(); + if (!ecs) { + return false; + } + const master = ecs.get(1); + if (!master) { + return false; + } + const {TileLayers} = master; + const {sourceJson, tileSize} = TileLayers.layer(0); + const {w, h} = sourceJson.meta.size; + return ( +
+
+
+
+ +
+
+ +
+
+
+ {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */} +
{ + if (!offsetRef.current) { + return; + } + const {left, top} = offsetRef.current.getBoundingClientRect(); + if ( + event.clientX - left >= w + || event.clientY - top >= h + ) { + return; + } + const x = Math.floor((event.clientX - left) / tileSize.x); + const y = Math.floor((event.clientY - top) / tileSize.y); + setMoveStart({x, y}); + setSelection({x, y, w: 1, h: 1}); + }} + onMouseMove={(event) => { + if (!offsetRef.current) { + return; + } + if (!moveStart) { + return; + } + const {x: sx, y: sy} = moveStart; + const {left, top} = offsetRef.current.getBoundingClientRect(); + const x = Math.floor( + Math.max(0, Math.min(w - 1, (event.clientX - left)) / tileSize.x), + ); + const y = Math.floor( + Math.max(0, Math.min(h - 1, (event.clientY - top)) / tileSize.y), + ); + const mx = Math.min(sx, x); + const my = Math.min(sy, y); + setSelection({x: mx, y: my, w: Math.abs(sx - x) + 1, h: Math.abs(sy - y) + 1}); + }} + onMouseUp={() => { + setMoveStart(); + const stamp = []; + const {x, y, w: sw, h: sh} = selection; + const tw = w / tileSize.x; + for (let iy = 0; iy < sh; ++iy) { + const row = []; + for (let ix = 0; ix < sw; ++ix) { + row.push((y + iy) * tw + x + ix); + } + stamp.push(row); + } + setStamp(stamp); + }} + className={styles.selectionWrapper} + ref={offsetRef} + > +
+ tileset +
+
+ ); +} \ No newline at end of file diff --git a/app/react-components/devtools/tiles.module.css b/app/react-components/devtools/tiles.module.css new file mode 100644 index 0000000..9a7db77 --- /dev/null +++ b/app/react-components/devtools/tiles.module.css @@ -0,0 +1,18 @@ +.paintBar { + display: flex; + gap: 16px; + margin: 16px 0; +} + +.selectionWrapper { + position: relative; +} + +.selectionWrapper img { + user-select: none; +} + +.selection { + background-color: #ffffff44; + position: absolute; +} diff --git a/package-lock.json b/package-lock.json index a4d25d9..f29334b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "pixi.js": "^7.4.2", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-tabs": "^6.0.2", "ws": "^8.17.0" }, "devDependencies": { @@ -8419,6 +8420,14 @@ "node": ">=0.10.0" } }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -15449,6 +15458,18 @@ "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==", "dev": true }, + "node_modules/react-tabs": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-6.0.2.tgz", + "integrity": "sha512-aQXTKolnM28k3KguGDBSAbJvcowOQr23A+CUJdzJtOSDOtTwzEaJA+1U4KwhNL9+Obe+jFS7geuvA7ICQPXOnQ==", + "dependencies": { + "clsx": "^2.0.0", + "prop-types": "^15.5.0" + }, + "peerDependencies": { + "react": "^18.0.0" + } + }, "node_modules/read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", diff --git a/package.json b/package.json index a1e7f2c..d0aedbe 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "pixi.js": "^7.4.2", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-tabs": "^6.0.2", "ws": "^8.17.0" }, "devDependencies": {