feat: emitted params!

packages/entity/src/trait-renderers/emitted.jsx

@@ -2,21 +2,32 @@ import './emitted.scss';
 
 import {join} from 'path';
 
-import {PropTypes, React} from '@latus/react';
-import {Range, rangePropType} from '@persea/core';
+import {
+  PropTypes,
+  React,
+  useState,
+} from '@latus/react';
+import {
+  Number,
+  Range,
+  rangePropType,
+  VectorRange,
+  vectorRangePropType,
+} from '@persea/core';
 import {useJsonPatcher} from '@persea/json';
 
 const Emitted = ({json, path}) => {
   const patch = useJsonPatcher();
+  const [hasSelfPosition, setHasSelfPosition] = useState(null !== json.params.position);
   return (
     <div className="emitted">
       <label>
-        Alpha
+        <span className="grow">Alpha</span>
         <label>
           Start
           <Range
-            onChange={(range) => {
-              patch(join(path, 'params/alpha'), json.params.alpha, 'start', range);
+            onChange={(value) => {
+              patch(join(path, 'params/alpha'), json.params.alpha, 'start', value);
             }}
             range={json.params.alpha.start}
           />
@@ -24,13 +35,140 @@ const Emitted = ({json, path}) => {
         <label>
           End
           <Range
-            onChange={(range) => {
-              patch(join(path, 'params/alpha'), json.params.alpha, 'end', range);
+            onChange={(value) => {
+              patch(join(path, 'params/alpha'), json.params.alpha, 'end', value);
             }}
             range={json.params.alpha.end}
           />
         </label>
       </label>
+      <label>
+        Force
+        <VectorRange
+          onChange={(value) => {
+            patch(join(path, 'params'), json.params, 'force', value);
+          }}
+          range={json.params.force}
+        />
+      </label>
+      <label>
+        Mass
+        <Number
+          onChange={(value) => {
+            patch(join(path, 'params'), json.params, 'mass', value);
+          }}
+          value={json.params.mass}
+        />
+      </label>
+      <label>
+        <span className="grow">Position</span>
+        <label>
+          Use emitter&apos;s position
+          {hasSelfPosition ? '?' : ''}
+          <input
+            type="checkbox"
+            checked={!hasSelfPosition}
+            onChange={(event) => {
+              const hasSelfPosition = !event.target.checked;
+              patch(
+                join(path, 'params'),
+                json.params,
+                'position',
+                hasSelfPosition ? [0, 0] : null,
+              );
+              setHasSelfPosition(hasSelfPosition);
+            }}
+          />
+        </label>
+        {hasSelfPosition && (
+          <VectorRange
+            onChange={(value) => {
+              patch(join(path, 'params'), json.params, 'position', value);
+            }}
+            range={json.params.position}
+          />
+        )}
+      </label>
+      <label>
+        Starting rotation
+        <Range
+          onChange={(value) => {
+            patch(join(path, 'params/rotation'), json.params.rotation, 'start', value);
+          }}
+          range={json.params.rotation.start}
+        />
+      </label>
+      <label>
+        Rotation to add
+        <Range
+          onChange={(value) => {
+            patch(join(path, 'params/rotation'), json.params.rotation, 'end', value);
+          }}
+          range={json.params.rotation.add}
+        />
+      </label>
+      <label>
+        <span className="grow">Scale</span>
+        <label>
+          Start
+          <Range
+            onChange={(value) => {
+              patch(join(path, 'params/scale'), json.params.scale, 'start', value);
+            }}
+            range={json.params.scale.start}
+          />
+        </label>
+        <label>
+          End
+          <Range
+            onChange={(value) => {
+              patch(join(path, 'params/scale'), json.params.scale, 'end', value);
+            }}
+            range={json.params.scale.end}
+          />
+        </label>
+      </label>
+      <label>
+        Transient
+        {json.params.transient ? '' : '?'}
+        <input
+          type="checkbox"
+          checked={json.params.transient}
+          onChange={({target: {checked}}) => {
+            patch(join(path, 'params'), json.params, 'transient', checked);
+          }}
+        />
+      </label>
+      <label>
+        Time-to-live
+        <Range
+          onChange={(value) => {
+            patch(join(path, 'params'), json.params, 'ttl', value);
+          }}
+          range={json.params.ttl}
+        />
+      </label>
+      <label>
+        <span className="grow">Velocity</span>
+        <label>
+          Angle
+          <Range
+            onChange={(value) => {
+              patch(join(path, 'params/velocity'), json.params.velocity, 'angle', value);
+            }}
+            range={json.params.velocity.angle}
+          />
+        </label>
+        <label>
+          Magnitude
+          <Range
+            onChange={(value) => {
+              patch(join(path, 'params/velocity'), json.params.velocity, 'magnitude', value);
+            }}
+            range={json.params.velocity.magnitude}
+          />
+        </label>
+      </label>
     </div>
   );
 };
@@ -42,24 +180,24 @@ Emitted.propTypes = {
         start: rangePropType,
         end: rangePropType,
       }),
-      force: PropTypes.arrayOf(PropTypes.number),
+      force: vectorRangePropType,
       listed: PropTypes.bool,
       mass: PropTypes.number,
       // eslint-disable-next-line react/forbid-prop-types
       position: PropTypes.any,
       rotation: PropTypes.shape({
-        start: PropTypes.number,
-        add: PropTypes.number,
+        start: rangePropType,
+        add: rangePropType,
       }),
       scale: PropTypes.shape({
-        start: PropTypes.number,
-        end: PropTypes.number,
+        start: rangePropType,
+        end: rangePropType,
       }),
       transient: PropTypes.bool,
       ttl: PropTypes.number,
       velocity: PropTypes.shape({
-        angle: PropTypes.number,
-        magnitude: PropTypes.number,
+        angle: rangePropType,
+        magnitude: rangePropType,
       }),
     }),
   }).isRequired,

packages/entity/src/trait-renderers/emitted.scss

@@ -0,0 +1,3 @@
+.emitted .grow {
+  flex-grow: 1;
+}