refactor(editor): improve selection parity and exhaustiveness

packages/editor/src/editor/Canvas.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { Screen, WidgetNode } from '@astralview/sdk';
+import { assertNever } from '@astralview/sdk';
 import { Button, Space, Typography } from 'antd';
 import type { ResizeHandle } from './types';
 import { rectFromPoints } from './geometry';
@@ -232,7 +233,7 @@ export function Canvas(props: CanvasProps) {
     const p = clientToWorld(e.clientX, e.clientY);
     if (!p) return;
 
-    const additive = e.ctrlKey || e.metaKey;
+    const additive = e.ctrlKey || e.metaKey || e.shiftKey;
     if (!additive) props.onSelectSingle(undefined);
     props.onBeginBoxSelect(e, p.x, p.y, additive);
     setBox(rectFromPoints({ x: p.x, y: p.y }, { x: p.x, y: p.y }));
@@ -555,7 +556,10 @@ function NodeView(props: {
         borderStyle: node.hidden ? 'dashed' : 'solid',
       }}
     >
-      {node.type === 'text' ? (
+      {(() => {
+        switch (node.type) {
+          case 'text':
+            return (
               <div
                 style={{
                   width: '100%',
@@ -597,7 +601,10 @@ function NodeView(props: {
                   {node.props.text}
                 </span>
               </div>
-      ) : node.type === 'image' ? (
+            );
+
+          case 'image':
+            return (
               <div
                 style={{
                   width: '100%',
@@ -619,7 +626,10 @@ function NodeView(props: {
                   }}
                 />
               </div>
-      ) : node.type === 'iframe' ? (
+            );
+
+          case 'iframe':
+            return (
               <div
                 style={{
                   width: '100%',
@@ -641,7 +651,10 @@ function NodeView(props: {
                   title={node.id}
                 />
               </div>
-      ) : node.type === 'video' ? (
+            );
+
+          case 'video':
+            return (
               <div
                 style={{
                   width: '100%',
@@ -668,7 +681,12 @@ function NodeView(props: {
                   }}
                 />
               </div>
-      ) : null}
+            );
+
+          default:
+            return assertNever(node);
+        }
+      })()}
 
       {props.selected && !node.locked && !node.hidden && <ResizeHandles onPointerDown={props.onResizePointerDown} />}
     </div>