feat: add field multiselect (#3031)

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page-renderer.tsx

@@ -244,10 +244,26 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR
     fieldGroup.off('transformend');
     fieldGroup.off('dragend');
 
-    // Set up field selection.
-    fieldGroup.on('click', () => {
+    // Set up field selection. Shift + click toggles this field in/out of the current
+    // multi-selection, so fields can be added to a group by clicking them --
+    // complementing marquee drag-selection. A plain click (no modifier) selects just
+    // this field.
+    fieldGroup.on('click', (event) => {
       removePendingField();
-      setSelectedFields([fieldGroup]);
+
+      const isMultiSelectModifier = event.evt.shiftKey;
+
+      if (isMultiSelectModifier) {
+        const currentNodes = interactiveTransformer.current?.nodes() ?? [];
+        const isAlreadySelected = currentNodes.includes(fieldGroup);
+
+        setSelectedFields(
+          isAlreadySelected ? currentNodes.filter((node) => node !== fieldGroup) : [...currentNodes, fieldGroup],
+        );
+      } else {
+        setSelectedFields([fieldGroup]);
+      }
+
       pageLayer.current?.batchDraw();
     });
 
@@ -452,43 +468,18 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR
       }
     });
 
-    // Clicks should select/deselect shapes
+    // Clicking empty stage area clears the selection. Field clicks -- including
+    // Shift+click multi-select -- are handled by each field group's own click
+    // handler in `unsafeRenderFieldOnLayer`.
     currentStage.on('click tap', (e) => {
-      // if we are selecting with rect, do nothing
+      // If we are selecting with the marquee rectangle, do nothing.
       if (selectionRectangle.visible() && selectionRectangle.width() > 0 && selectionRectangle.height() > 0) {
         return;
       }
 
-      // If empty area clicked, remove all selections
+      // If empty area clicked, remove all selections.
       if (e.target === stage.current) {
         setSelectedFields([]);
-        return;
-      }
-
-      // Do nothing if field not clicked, or if field is not editable
-      if (!e.target.hasName('field-group') || e.target.draggable() === false) {
-        return;
-      }
-
-      // do we pressed shift or ctrl?
-      const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
-      const isSelected = transformer.nodes().indexOf(e.target) >= 0;
-
-      if (!metaPressed && !isSelected) {
-        // if no key pressed and the node is not selected
-        // select just one
-        setSelectedFields([e.target]);
-      } else if (metaPressed && isSelected) {
-        // if we pressed keys and node was selected
-        // we need to remove it from selection:
-        const nodes = transformer.nodes().slice(); // use slice to have new copy of array
-        // remove node from array
-        nodes.splice(nodes.indexOf(e.target), 1);
-        setSelectedFields(nodes);
-      } else if (metaPressed && !isSelected) {
-        // add the node into selection
-        const nodes = transformer.nodes().concat([e.target]);
-        setSelectedFields(nodes);
       }
     });