flow: group add layer null guards
This commit is contained in:
parent
875624ed5a
commit
12ffd404d4
2
TODO.md
2
TODO.md
|
@ -5,5 +5,7 @@
|
|||
- ~~production build~~
|
||||
- ~~Split Persea packages~~
|
||||
- ~~Remove @avocado/persea~~
|
||||
- A lot of "topdown" could also be used for side-scroll/platform
|
||||
- "tiles" should probably be "layer"
|
||||
|
||||
Opt:
|
||||
|
|
|
@ -7,6 +7,7 @@ import {
|
|||
} from '@flecks/react';
|
||||
|
||||
const Vector = ({
|
||||
disabled,
|
||||
integer,
|
||||
labels,
|
||||
onChange,
|
||||
|
@ -17,6 +18,7 @@ const Vector = ({
|
|||
<label className="inline">
|
||||
<div className="vector__label-text">{labels[0]}</div>
|
||||
<Number
|
||||
disabled={disabled}
|
||||
integer={integer}
|
||||
onChange={(event, number) => {
|
||||
onChange(
|
||||
|
@ -34,6 +36,7 @@ const Vector = ({
|
|||
<label className="inline">
|
||||
<div className="vector__label-text">{labels[1]}</div>
|
||||
<Number
|
||||
disabled={disabled}
|
||||
integer={integer}
|
||||
onChange={(event, number) => {
|
||||
onChange(
|
||||
|
@ -70,6 +73,7 @@ export const vectorPropType = createVectorPropType(false);
|
|||
vectorPropType.isRequired = createVectorPropType(true);
|
||||
|
||||
Vector.defaultProps = {
|
||||
disabled: false,
|
||||
integer: false,
|
||||
labels: ['X', 'Y'],
|
||||
};
|
||||
|
@ -77,6 +81,7 @@ Vector.defaultProps = {
|
|||
Vector.displayName = 'Vector';
|
||||
|
||||
Vector.propTypes = {
|
||||
disabled: PropTypes.bool,
|
||||
integer: PropTypes.bool,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
labels: PropTypes.arrayOf(PropTypes.string),
|
||||
|
|
|
@ -9,6 +9,7 @@ import {
|
|||
} from '@flecks/react';
|
||||
|
||||
const Number = ({
|
||||
disabled,
|
||||
integer,
|
||||
max,
|
||||
min,
|
||||
|
@ -56,6 +57,7 @@ const Number = ({
|
|||
<>
|
||||
<input
|
||||
className="number__input"
|
||||
disabled={disabled}
|
||||
onChange={(event) => {
|
||||
changeClamped(event, parser(event.target.value));
|
||||
}}
|
||||
|
@ -67,6 +69,7 @@ const Number = ({
|
|||
/>
|
||||
<div className="number__controls">
|
||||
<button
|
||||
disabled={disabled}
|
||||
onClick={(event) => {
|
||||
increment(event, 1);
|
||||
}}
|
||||
|
@ -75,6 +78,7 @@ const Number = ({
|
|||
<span className="number__button-label">+</span>
|
||||
</button>
|
||||
<button
|
||||
disabled={disabled}
|
||||
onClick={(event) => {
|
||||
increment(event, -1);
|
||||
}}
|
||||
|
@ -89,6 +93,7 @@ const Number = ({
|
|||
};
|
||||
|
||||
Number.defaultProps = {
|
||||
disabled: false,
|
||||
integer: false,
|
||||
max: Infinity,
|
||||
min: -Infinity,
|
||||
|
@ -99,6 +104,7 @@ Number.defaultProps = {
|
|||
Number.displayName = 'Number';
|
||||
|
||||
Number.propTypes = {
|
||||
disabled: PropTypes.bool,
|
||||
integer: PropTypes.bool,
|
||||
max: PropTypes.number,
|
||||
min: PropTypes.number,
|
||||
|
|
|
@ -15,7 +15,7 @@ export default () => {
|
|||
...op,
|
||||
}));
|
||||
dispatch(patchJsonResource({
|
||||
group: group || patch[0].path,
|
||||
...(null !== group && {group: group || patch[0].path}),
|
||||
patch,
|
||||
project: uuid,
|
||||
uri,
|
||||
|
|
|
@ -108,7 +108,7 @@ function TilesPage({
|
|||
container.addChild(sprite);
|
||||
container.addChild(primitives);
|
||||
setViewport(image.size);
|
||||
}, [currentLayer, room]);
|
||||
}, [currentLayer, resource, room]);
|
||||
// Update primitives with selection.
|
||||
useEffect(() => {
|
||||
primitives.anchor = [0, 0];
|
||||
|
@ -121,7 +121,7 @@ function TilesPage({
|
|||
}, [selection]);
|
||||
// Map events to tiles updates.
|
||||
useEffect(() => {
|
||||
if (!events) {
|
||||
if (!events || !resource.tiles[currentLayer]) {
|
||||
return undefined;
|
||||
}
|
||||
const {tileSize} = room.tiles[currentLayer];
|
||||
|
@ -258,7 +258,7 @@ function TilesPage({
|
|||
});
|
||||
// Map events to selection updates.
|
||||
useEffect(() => {
|
||||
if (!tilesetEvents) {
|
||||
if (!tilesetEvents || !resource.tiles[currentLayer]) {
|
||||
return undefined;
|
||||
}
|
||||
const onValue = (
|
||||
|
@ -306,13 +306,16 @@ function TilesPage({
|
|||
<ul>
|
||||
{
|
||||
resource.tiles.map((tiles, i) => (
|
||||
// eslint-disable-next-line react/no-array-index-key
|
||||
<li key={i}>
|
||||
<li
|
||||
className={classnames(styles.layer, {[styles.active]: currentLayer === i})}
|
||||
// eslint-disable-next-line react/no-array-index-key
|
||||
key={i}
|
||||
>
|
||||
<button
|
||||
className={classnames(styles.layerButton, {[styles.active]: currentLayer === i})}
|
||||
className={styles.layerButton}
|
||||
onClick={(event) => {
|
||||
// Bug? .stopPropagation() doesn't work when clicking the child checkboxes.
|
||||
if (event.target === event.currentTarget) {
|
||||
if ('checkbox' !== event.target.type) {
|
||||
setCurrentLayer(i);
|
||||
}
|
||||
}}
|
||||
|
@ -381,22 +384,35 @@ function TilesPage({
|
|||
type="checkbox"
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
className={styles.close}
|
||||
onClick={() => {
|
||||
patch(
|
||||
{
|
||||
op: 'remove',
|
||||
path: `/tiles/${currentLayer}`,
|
||||
},
|
||||
null,
|
||||
);
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
<li className={styles.layer}>
|
||||
<button
|
||||
className={classnames(styles.layerButton, styles.addLayerButton)}
|
||||
type="button"
|
||||
>
|
||||
<span>Add another layer</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<button
|
||||
type="button"
|
||||
>
|
||||
Add layer
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<div className={styles.draw}>
|
||||
|
@ -431,6 +447,7 @@ function TilesPage({
|
|||
<label className={styles.area}>
|
||||
<span>Area</span>
|
||||
<VectorComponent
|
||||
disabled={!resource.tiles[currentLayer]}
|
||||
onChange={(event, newArea) => {
|
||||
const {Tiles} = flecks.get('$avocado/resource.resources');
|
||||
// Create new tiles.
|
||||
|
@ -460,14 +477,15 @@ function TilesPage({
|
|||
`/tiles/${currentLayer}/area`,
|
||||
);
|
||||
}}
|
||||
value={resource.tiles[currentLayer].area}
|
||||
value={resource.tiles[currentLayer]?.area || [0, 0]}
|
||||
/>
|
||||
</label>
|
||||
<label className={styles.tileSize}>
|
||||
<span>Tile size</span>
|
||||
<VectorComponent
|
||||
disabled={!resource.tiles[currentLayer]}
|
||||
onChange={patch.onChange(`/tiles/${currentLayer}/tileSize`)}
|
||||
value={resource.tiles[currentLayer].tileSize}
|
||||
value={resource.tiles[currentLayer]?.tileSize || [0, 0]}
|
||||
/>
|
||||
</label>
|
||||
<div className={styles.grower} />
|
||||
|
|
|
@ -32,8 +32,9 @@
|
|||
justify-content: space-between;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
&.active {
|
||||
background-color: rgb(0, 108, 134);
|
||||
background-color: unset;
|
||||
&:hover {
|
||||
background-color: unset;
|
||||
}
|
||||
.info {
|
||||
display: flex;
|
||||
|
@ -70,6 +71,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
.addLayerButton {
|
||||
color: var(--color-active-light);
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
span {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
@ -121,3 +131,27 @@
|
|||
height: 3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.layer {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
&.active {
|
||||
background-color: rgb(0, 108, 134);
|
||||
}
|
||||
padding-right: 3rem;
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.close {
|
||||
border-color: transparent;
|
||||
margin: 0;
|
||||
padding: 0.125rem;
|
||||
position: absolute;
|
||||
right: 0.375rem;
|
||||
top: 0.375rem;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user