flow: group add layer null guards

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:

packages/math/src/persea/components/vector/index.jsx

@@ -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),

packages/react/src/components/number/index.jsx

@@ -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,

packages/resource/src/persea/hooks/use-json-patcher.js

@@ -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,

packages/topdown/src/persea/room-sides/tiles-side/index.jsx

@@ -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
-              <li key={i}>
+                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} />

packages/topdown/src/persea/room-sides/tiles-side/index.module.scss

@@ -32,8 +32,9 @@
   justify-content: space-between;
   margin: 0;
   width: 100%;
-  &.active {
+  background-color: unset;
-    background-color: rgb(0, 108, 134);
+  &: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;
+}