feat: invocation toggle

packages/entity/src/behavior-components/expression.jsx

@@ -17,7 +17,8 @@ const Expression = ({
   const patch = useJsonPatcher();
   let i = 0;
   const {ops} = expression;
-  const Ops = [];
+  const Renderables = [];
+  let opsCount = 0;
   let walk = context;
   // eslint-disable-next-line react/destructuring-assignment
   let description = context.constructor.descriptionFor(walk);
@@ -57,10 +58,11 @@ const Expression = ({
   do {
     const op = ops[i];
     const opKey = JSON.stringify(op);
-    const opPath = join(path, 'ops', Ops.length.toString());
+    const opPath = join(path, 'ops', opsCount.toString());
+    const nextOp = i === ops.length - 1 ? undefined : ops[i + 1];
     if (isKey(op)) {
       const isLast = i === ops.length - 1 ? true : isInvocation(ops[i + 1]);
-      Ops.push(
+      Renderables.push(
         <Key
           childrenDescription={{
             ...(
@@ -76,9 +78,25 @@ const Expression = ({
           path={opPath}
         />,
       );
+      opsCount += 1;
     }
     if (isInvocation(op)) {
-      Ops.push(
+      Renderables.push(
+        <button
+          className="expression__invocation-toggle from"
+          key={`${opPath}-toggle-from`}
+          onClick={() => {
+            patch({
+              op: 'remove',
+              path: opPath,
+            });
+          }}
+          type="button"
+        >
+          →
+        </button>,
+      );
+      Renderables.push(
         <Invocation
           context={context}
           description={description}
@@ -89,6 +107,7 @@ const Expression = ({
           path={opPath}
         />,
       );
+      opsCount += 1;
     }
     if (isKey(op)) {
       if (context === walk) {
@@ -101,6 +120,33 @@ const Expression = ({
         ...context.constructor.descriptionFor(walk),
         ...description.children[op.key],
       };
+      if (description.args && (!nextOp || !isInvocation(nextOp))) {
+        Renderables.push(
+          <button
+            className="expression__invocation-toggle to"
+            key={`${opPath}-toggle-to`}
+            onClick={((description, opPath) => () => {
+              const parts = opPath.split('/');
+              parts.push(parseInt(parts.pop(), 10) + 1);
+              const invocation = {
+                type: 'invoke',
+                args: description.args.map(() => ({
+                  type: 'literal',
+                  value: 69,
+                })),
+              };
+              patch({
+                op: 'add',
+                path: parts.join('/'),
+                value: invocation,
+              });
+            })(description, opPath)}
+            type="button"
+          >
+            →
+          </button>,
+        );
+      }
     }
   } while (i++ < ops.length - 1);
   if (description.children) {
@@ -109,8 +155,8 @@ const Expression = ({
       key: '.',
     };
     const opKey = JSON.stringify(op);
-    const opPath = join(path, 'ops', Ops.length.toString());
-    Ops.push(
+    const opPath = join(path, 'ops', opsCount.toString());
+    Renderables.push(
       <Key
         childrenDescription={{
           '.': {label: '', type: description.type},
@@ -122,6 +168,7 @@ const Expression = ({
         path={opPath}
       />,
     );
+    opsCount += 1;
   }
   return (
     <div
@@ -130,7 +177,7 @@ const Expression = ({
         {'wrong-type': type !== 'void'},
       )}
     >
-      {Ops}
+      {Renderables}
     </div>
   );
 };

packages/entity/src/behavior-components/expression.scss

@@ -3,3 +3,10 @@
   display: flex;
   flex-wrap: wrap;
 }
+
+.expression__invocation-toggle {
+  padding: 0.25em;
+  &.from {
+    transform: rotate(180deg);
+  }
+}