Merge pull request #349 from quadratichq/zoom-to-selection

Zoom to selection

src/constants/gridConstants.ts

@@ -5,3 +5,4 @@ export const CELL_TEXT_MARGIN_TOP = -1;
 export const GRID_SIZE = 150;
 export const ZOOM_ANIMATION_TIME_MS = 250;
 export const HEADING_SIZE = 20;
+export const ZOOM_BUFFER = 1.2;

src/gridGL/helpers/zoom.ts

@@ -1,7 +1,8 @@
-import * as PIXI from 'pixi.js';
+import { Rectangle, Point } from 'pixi.js';
 import { Viewport } from 'pixi-viewport';
 import { Sheet } from '../../grid/sheet/Sheet';
-import { ZOOM_ANIMATION_TIME_MS } from '../../constants/gridConstants';
+import { ZOOM_ANIMATION_TIME_MS, ZOOM_BUFFER } from '../../constants/gridConstants';
+import { GridInteractionState } from '../../atoms/gridInteractionStateAtom';
 
 export function zoomToFit(sheet: Sheet, viewport: Viewport): void {
   const gridBounds = sheet.getGridBounds(false);
@@ -14,14 +15,14 @@ export function zoomToFit(sheet: Sheet, viewport: Viewport): void {
     );
 
     // calc scale, and leave a little room on the top and sides
-    let scale = viewport.findFit(screenRectangle.width * 1.2, screenRectangle.height * 1.2);
+    let scale = viewport.findFit(screenRectangle.width * ZOOM_BUFFER, screenRectangle.height * ZOOM_BUFFER);
 
     // Don't zoom in more than a factor of 2
-    if (scale > 2.0) scale = 2;
+    if (scale > 2) scale = 2;
 
     viewport.animate({
       time: ZOOM_ANIMATION_TIME_MS,
-      position: new PIXI.Point(
+      position: new Point(
         screenRectangle.x + screenRectangle.width / 2,
         screenRectangle.y + screenRectangle.height / 2
       ),
@@ -30,7 +31,7 @@ export function zoomToFit(sheet: Sheet, viewport: Viewport): void {
   } else {
     viewport.animate({
       time: ZOOM_ANIMATION_TIME_MS,
-      position: new PIXI.Point(0, 0),
+      position: new Point(0, 0),
       scale: 1,
     });
   }
@@ -54,3 +55,30 @@ export function zoomOut(viewport: Viewport) {
 export function zoomTo100(viewport: Viewport) {
   zoomInOut(viewport, 1);
 }
+
+export function zoomToSelection(interactionState: GridInteractionState, sheet: Sheet, viewport: Viewport): void {
+  let screenRectangle: Rectangle;
+  if (interactionState.showMultiCursor) {
+    const cursor = interactionState.multiCursorPosition;
+    screenRectangle = sheet.gridOffsets.getScreenRectangle(
+      cursor.originPosition.x,
+      cursor.originPosition.y,
+      cursor.terminalPosition.x - cursor.originPosition.x,
+      cursor.terminalPosition.y - cursor.originPosition.y
+    );
+  } else {
+    const cursor = interactionState.cursorPosition;
+    screenRectangle = sheet.gridOffsets.getScreenRectangle(cursor.x, cursor.y, 1, 1);
+  }
+  // calc scale, and leave a little room on the top and sides
+  let scale = viewport.findFit(screenRectangle.width * ZOOM_BUFFER, screenRectangle.height * ZOOM_BUFFER);
+
+  // Don't zoom in more than a factor of 2
+  if (scale > 2) scale = 2;
+
+  viewport.animate({
+    time: ZOOM_ANIMATION_TIME_MS,
+    position: new Point(screenRectangle.x + screenRectangle.width / 2, screenRectangle.y + screenRectangle.height / 2),
+    scale,
+  });
+}

src/gridGL/interaction/keyboard/keyboardViewport.ts

@@ -1,14 +1,16 @@
 import { Viewport } from 'pixi-viewport';
 import { MultipleFormat } from '../../../ui/menus/TopBar/SubMenus/useGetSelection';
 import { Sheet } from '../../../grid/sheet/Sheet';
-import { zoomIn, zoomOut, zoomTo100, zoomToFit } from '../../helpers/zoom';
+import { zoomIn, zoomOut, zoomTo100, zoomToFit, zoomToSelection } from '../../helpers/zoom';
 import { EditorInteractionState } from '../../../atoms/editorInteractionStateAtom';
 import { Pointer } from '../pointer/Pointer';
+import { GridInteractionState } from '../../../atoms/gridInteractionStateAtom';
 
 export function keyboardViewport(options: {
   event: KeyboardEvent;
   sheet: Sheet;
   viewport?: Viewport;
+  interactionState: GridInteractionState;
   editorInteractionState: EditorInteractionState;
   setEditorInteractionState: React.Dispatch<React.SetStateAction<EditorInteractionState>>;
   clearAllFormatting: Function;
@@ -27,6 +29,7 @@ export function keyboardViewport(options: {
     format,
     sheet,
     viewport,
+    interactionState,
     editorInteractionState,
     setEditorInteractionState,
     presentationMode,
@@ -90,6 +93,11 @@ export function keyboardViewport(options: {
     return true;
   }
 
+  if ((event.metaKey || event.ctrlKey) && event.code === 'Digit8') {
+    zoomToSelection(interactionState, sheet, viewport);
+    return true;
+  }
+
   if ((event.metaKey || event.ctrlKey) && event.code === 'Digit9') {
     zoomToFit(sheet, viewport);
     return true;

src/gridGL/interaction/keyboard/useKeyboard.ts

@@ -47,6 +47,7 @@ export const useKeyboard = (props: IProps): { onKeyDown: (event: React.KeyboardE
       if (
         keyboardViewport({
           event,
+          interactionState,
           editorInteractionState,
           setEditorInteractionState,
           viewport: app?.viewport,
@@ -65,7 +66,7 @@ export const useKeyboard = (props: IProps): { onKeyDown: (event: React.KeyboardE
       }
     },
     [
-      interactionState.showInput,
+      interactionState,
       editorInteractionState,
       setEditorInteractionState,
       app?.viewport,

src/gridGL/pixiApp/PixiApp.ts

@@ -9,7 +9,7 @@ import { AxesLines } from '../UI/AxesLines';
 import { GridHeadings } from '../UI/gridHeadings/GridHeadings';
 import { Cursor } from '../UI/Cursor';
 import { Cells } from '../UI/cells/Cells';
-import { zoomInOut, zoomToFit } from '../helpers/zoom';
+import { zoomInOut, zoomToFit, zoomToSelection } from '../helpers/zoom';
 import { Quadrants } from '../quadrants/Quadrants';
 import { QUADRANT_SCALE } from '../quadrants/quadrantConstants';
 import { debugAlwaysShowCache, debugNeverShowCache, debugShowCacheFlag } from '../../debugFlags';
@@ -198,6 +198,10 @@ export class PixiApp {
     zoomToFit(this.sheet, this.viewport);
   }
 
+  setZoomToSelection(): void {
+    zoomToSelection(this.settings.interactionState, this.sheet, this.viewport);
+  }
+
   // called before and after a quadrant render
   prepareForQuadrantRendering(): Container {
     this.gridLines.visible = false;

src/ui/menus/CommandPalette/ListItems/View.tsx

@@ -1,7 +1,7 @@
 import { CommandPaletteListItem } from '../CommandPaletteListItem';
 import { CommandPaletteListItemSharedProps } from '../CommandPaletteListItem';
 import { CommandPaletteListItemCheckbox } from '../CommandPaletteListItemCheckbox';
-import { zoomIn, zoomOut, zoomToFit, zoomTo100 } from '../../../../gridGL/helpers/zoom';
+import { zoomIn, zoomOut, zoomToFit, zoomTo100, zoomToSelection } from '../../../../gridGL/helpers/zoom';
 import { KeyboardSymbols } from '../../../../helpers/keyboardSymbols';
 import { useGridSettings } from '../../TopBar/SubMenus/useGridSettings';
 
@@ -141,7 +141,19 @@ const ListItems = [
       />
     ),
   },
-
+  {
+    label: 'View: Zoom to selection',
+    Component: (props: CommandPaletteListItemSharedProps) => (
+      <CommandPaletteListItem
+        {...props}
+        action={() => {
+          zoomToSelection(props.interactionState, props.app.sheet, props.app.viewport);
+        }}
+        shortcut="8"
+        shortcutModifiers={[KeyboardSymbols.Command]}
+      />
+    ),
+  },
   {
     label: 'View: Zoom to fit',
     Component: (props: CommandPaletteListItemSharedProps) => (

src/ui/menus/TopBar/ZoomDropdown.tsx

@@ -46,6 +46,9 @@ export const ZoomDropdown = (props: Props) => {
         <MenuLineItem primary="Zoom out" secondary={KeyboardSymbols.Command + '−'} />
       </MenuItem>
       <MenuDivider></MenuDivider>
+      <MenuItem onClick={() => props.app.setZoomToSelection()}>
+        <MenuLineItem primary="Zoom to selection" secondary={KeyboardSymbols.Command + '8'} />
+      </MenuItem>
       <MenuItem onClick={() => props.app.setZoomToFit()}>
         <MenuLineItem primary="Zoom to fit" secondary={KeyboardSymbols.Command + '9'} />
       </MenuItem>