Spike/mironeer canvas

editor/src/components/canvas/canvas-component-entry.tsx

@@ -108,6 +108,8 @@ const CanvasComponentEntryInner = React.memo((props: CanvasComponentEntryProps)
         ref={containerRef}
         style={{
           position: 'absolute',
+          width: '100%',
+          height: '100%',
           transition: canvasScrollAnimation ? 'transform 0.3s ease-in-out' : 'initial',
           transform: 'translate3d(0px, 0px, 0px)',
         }}

editor/src/components/canvas/canvas-wrapper-component.tsx

@@ -100,13 +100,14 @@ export const CanvasWrapperComponent = React.memo(() => {
     <FlexColumn
       className='CanvasWrapperComponent'
       style={{
-        position: 'relative',
+        position: 'absolute',
         overflowX: 'hidden',
         justifyContent: 'stretch',
         alignItems: 'stretch',
-        flexGrow: 1,
-        height: '100%',
-        // ^ prevents Monaco from pushing the inspector out
+        left: 200,
+        right: 200,
+        bottom: 0,
+        top: 50,
       }}
     >
       {fatalErrors.length === 0 && !safeMode ? (

editor/src/components/canvas/ui-jsx-canvas-renderer/scene-component.tsx

@@ -26,6 +26,11 @@ export const SceneComponent = React.memo(
       boxShadow: UtopiaStyles.shadowStyles.grounded.boxShadow,
       ...UtopiaStyles.backgrounds.checkerboardBackground,
       ...style,
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      overflow: 'scroll',
     }
 
     // TODO right now we don't actually change the invalidated paths, just let the dom-walker know it should walk again

editor/src/components/canvas/ui-jsx-canvas.tsx

@@ -831,6 +831,8 @@ const CanvasContainer = React.forwardRef<
       ref={ref}
       style={{
         position: 'absolute',
+        width: '100%',
+        height: '100%',
       }}
       data-utopia-valid-paths={props.validRootPaths.map(EP.toString).join(' ')}
       data-utopia-root-element-path={EP.toString(props.canvasRootElementElementPath)}

editor/src/components/editor/actions/actions.tsx

@@ -106,6 +106,7 @@ import {
   roundPointToNearestWhole,
   boundingRectangleArray,
   zeroRectangle,
+  canvasVector,
 } from '../../../core/shared/math-utils'
 import type {
   PackageStatusMap,
@@ -4846,7 +4847,7 @@ export const UPDATE_FNS = {
       }
     }
 
-    const newCanvasOffset = getNewCanvasOffset(action.target)
+    const newCanvasOffset = canvasVector({ x: 0, y: 0 })
     return newCanvasOffset == null
       ? editor
       : UPDATE_FNS.SET_SCROLL_ANIMATION(

editor/src/components/editor/store/editor-state.ts

@@ -2440,11 +2440,8 @@ export function createNewProjectName(): string {
 }
 
 export const BaseSnappingThreshold = 5
-export const BaseCanvasOffset = { x: 100, y: 60 } as CanvasPoint
-export const BaseCanvasOffsetLeftPane = {
-  x: BaseCanvasOffset.x + DefaultNavigatorWidth,
-  y: BaseCanvasOffset.y,
-} as CanvasPoint
+export const BaseCanvasOffset = { x: 0, y: 0 } as CanvasPoint
+export const BaseCanvasOffsetLeftPane = BaseCanvasOffset
 
 export function createEditorState(dispatch: EditorDispatch): EditorState {
   return {

editor/src/templates/editor-canvas.tsx

@@ -78,6 +78,7 @@ import type {
 } from '../core/shared/math-utils'
 import {
   canvasPoint,
+  canvasVector,
   roundPointToNearestHalf,
   roundPointToNearestWhole,
   windowRectangle,
@@ -365,10 +366,7 @@ export function runLocalCanvasAction(
   // TODO BB horrorshow performance
   switch (action.action) {
     case 'SCROLL_CANVAS': {
-      const newCanvasOffset = Utils.offsetPoint(
-        model.canvas.realCanvasOffset,
-        Utils.negate(action.delta),
-      )
+      const newCanvasOffset = canvasVector({ x: 0, y: 0 })
       return {
         ...model,
         canvas: {
@@ -378,15 +376,17 @@ export function runLocalCanvasAction(
         },
       }
     }
-    case 'POSITION_CANVAS':
+    case 'POSITION_CANVAS': {
+      const newCanvasOffset = canvasVector({ x: 0, y: 0 })
       return {
         ...model,
         canvas: {
           ...model.canvas,
-          realCanvasOffset: action.position,
-          roundedCanvasOffset: roundPointToNearestWhole(action.position),
+          realCanvasOffset: newCanvasOffset,
+          roundedCanvasOffset: roundPointToNearestWhole(newCanvasOffset),
         },
       }
+    }
     case 'SET_SELECTION_CONTROLS_VISIBILITY':
       return update(model, {
         canvas: {
@@ -401,28 +401,7 @@ export function runLocalCanvasAction(
       }
       return model
     case 'ZOOM': {
-      const { focusPoint, scale } = action
-      const previousScale = model.canvas.scale
-      const newCanvasOffset = getCanvasOffset(
-        model.canvas.realCanvasOffset,
-        previousScale,
-        scale,
-        model.jsxMetadata,
-        model.selectedViews,
-        focusPoint,
-        false,
-      )
-
-      return {
-        ...model,
-        canvas: {
-          ...model.canvas,
-          scale: scale,
-          snappingThreshold: BaseSnappingThreshold / scale,
-          realCanvasOffset: newCanvasOffset,
-          roundedCanvasOffset: roundPointToNearestWhole(newCanvasOffset),
-        },
-      }
+      return model
     }
     case 'CREATE_INTERACTION_SESSION':
       const metadata = model.canvas.interactionSession?.latestMetadata ?? model.jsxMetadata
@@ -747,9 +726,9 @@ export class EditorCanvas extends React.Component<EditorCanvasProps> {
       // which means all the wheel events will be preventDefaulted in the descendants of EditorCanvas. Which means
       // it is not possible to scroll elements inside the canvas, except if you add an event listener manually with
       // a ref to stop propagation. In that case the event will not reach the listener here.
-      this.canvasWrapperRef.addEventListener('wheel', this.suppressBrowserNavigation, {
-        passive: false,
-      })
+      // this.canvasWrapperRef.addEventListener('wheel', this.suppressBrowserNavigation, {
+      //   passive: false,
+      // })
       this.resizeObserver = new ResizeObserver((entries: Array<ResizeObserverEntry>) => {
         if (entries.length === 0) {
           return
@@ -768,7 +747,7 @@ export class EditorCanvas extends React.Component<EditorCanvasProps> {
 
   componentWillUnmount() {
     if (this.canvasWrapperRef != null) {
-      this.canvasWrapperRef.removeEventListener('wheel', this.suppressBrowserNavigation)
+      // this.canvasWrapperRef.removeEventListener('wheel', this.suppressBrowserNavigation)
       if (this.resizeObserver != null) {
         this.resizeObserver.unobserve(this.canvasWrapperRef)
       }