Toggle multi selection of scenes action changed to ctrl/cmd + click

Author: chrismaltby

CHANGELOG.md

@@ -38,6 +38,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ladder collision tile now only visible on Platform scenes by default, edit `engine.json` to add per scene collision tile types
 - New instances of prefabs use prefab's name by default
 - Update "Wait" event to support using variable values for wait time [@pau-tomas](https://github.com/pau-tomas))
+- Toggle multi selection of scenes action changed to ctrl/cmd + click to be more consistent with OS level defaults + new sprite editor frame selection
 - Updated Polish localisation. [@ReptiIe](https://github.com/ReptiIe)
 - Updated Japanese localisation. [@tomo666](https://github.com/tomo666)
 

src/components/world/SceneView.tsx

@@ -58,7 +58,6 @@ interface SceneViewProps {
   id: string;
   index: number;
   editable?: boolean;
-  addToSelection?: boolean;
 }
 
 const SceneName = styled.div`
@@ -199,16 +198,8 @@ const SceneOverlay = styled.div<SceneOverlayProps>`
       : ""}
 `;
 
-const SelectionWrapper = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-`;
-
 const SceneView = memo(
-  ({ id, index, editable, addToSelection }: SceneViewProps) => {
+  ({ id, index, editable }: SceneViewProps) => {
     const dispatch = useAppDispatch();
     const scene = useAppSelector((state) =>
       sceneSelectors.selectById(state, id)
@@ -620,9 +611,16 @@ const SceneView = memo(
       [renderContextMenu, tool]
     );
 
-    const onToggleSelection = useCallback(() => {
-      dispatch(editorActions.toggleSceneSelectedId(id));
-    }, [dispatch, id]);
+    const onToggleSelection = useCallback(
+      (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        if (e.ctrlKey || e.metaKey) {
+          e.preventDefault();
+          e.stopPropagation();
+          dispatch(editorActions.toggleSceneSelectedId(id));
+        }
+      },
+      [dispatch, id]
+    );
 
     if (!scene || !visible) {
       return <></>;
@@ -638,6 +636,7 @@ const SceneView = memo(
           top: scene.y,
         }}
         onContextMenu={onContextMenu}
+        onMouseDownCapture={onToggleSelection}
       >
         <SceneMetadata
           onMouseDown={onStartDrag}
@@ -818,8 +817,6 @@ const SceneView = memo(
             {contextMenu.menu}
           </ContextMenu>
         )}
-
-        {addToSelection && <SelectionWrapper onMouseDown={onToggleSelection} />}
       </Wrapper>
     );
   }

src/components/world/WorldView.tsx

@@ -53,14 +53,6 @@ const WorldContent = styled.div`
   left: 0;
 `;
 
-const SelectionWrapper = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-`;
-
 const NewSceneCursor = styled.div`
   position: absolute;
   cursor: pointer;
@@ -110,7 +102,6 @@ const WorldView = () => {
     scrollY: 0,
   });
   const isMouseOver = useRef(false);
-  const [addToSelection, setAddToSelection] = useState(false);
   const [selectionStart, setSelectionStart] = useState<Point>();
   const [selectionEnd, setSelectionEnd] = useState<Point>();
   const selection = useRef<SelectionRect>();
@@ -221,7 +212,6 @@ const WorldView = () => {
       if (e.shiftKey && tool === "select") {
         setSelectionStart(undefined);
         setSelectionEnd(undefined);
-        setAddToSelection(true);
       }
       if (!(e.target instanceof HTMLElement)) return;
       if (e.target.nodeName !== "BODY") {
@@ -249,9 +239,6 @@ const WorldView = () => {
       if (dragMode && (e.code === "Space" || e.key === "Alt")) {
         setDragMode(false);
       }
-      if (!e.shiftKey) {
-        setAddToSelection(false);
-      }
     },
     [dragMode]
   );
@@ -600,8 +587,8 @@ const WorldView = () => {
   );
 
   const onStartMultiSelection = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      if (scrollRef.current) {
+    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      if (e.shiftKey && scrollRef.current) {
         e.preventDefault();
         e.stopPropagation();
 
@@ -632,7 +619,6 @@ const WorldView = () => {
 
   const onWindowBlur = useCallback(() => {
     setDragMode(false);
-    setAddToSelection(false);
   }, []);
 
   //#endregion Window Blur
@@ -679,6 +665,7 @@ const WorldView = () => {
       onMouseLeave={onMouseLeave}
       onMouseMove={onMouseMove}
       onMouseDown={startWorldDragIfAltOrMiddleClick}
+      onMouseDownCapture={onStartMultiSelection}
       onScroll={onScroll}
       style={
         dragMode
@@ -697,20 +684,12 @@ const WorldView = () => {
           onMouseDown={startWorldDrag}
         />
 
-        {addToSelection && (
-          <SelectionWrapper
-            style={{ width: scrollWidth, height: scrollHeight }}
-            onMouseDown={onStartMultiSelection}
-          ></SelectionWrapper>
-        )}
-
         {scenes.map((sceneId, index) => (
           <SceneView
             key={sceneId}
             id={sceneId}
             index={index}
             editable={!dragMode}
-            addToSelection={addToSelection}
           />
         ))}