diff --git a/editor/src/components/canvas/canvas-component-entry.tsx b/editor/src/components/canvas/canvas-component-entry.tsx index 44df95a2d511..2af169bd86c3 100644 --- a/editor/src/components/canvas/canvas-component-entry.tsx +++ b/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)', }} diff --git a/editor/src/components/canvas/canvas-wrapper-component.tsx b/editor/src/components/canvas/canvas-wrapper-component.tsx index 196eb9915a1d..6ec263214ad7 100644 --- a/editor/src/components/canvas/canvas-wrapper-component.tsx +++ b/editor/src/components/canvas/canvas-wrapper-component.tsx @@ -100,13 +100,14 @@ export const CanvasWrapperComponent = React.memo(() => { {fatalErrors.length === 0 && !safeMode ? ( diff --git a/editor/src/components/canvas/ui-jsx-canvas-renderer/scene-component.tsx b/editor/src/components/canvas/ui-jsx-canvas-renderer/scene-component.tsx index 6a4a3fec1bcf..c17d31c2918a 100644 --- a/editor/src/components/canvas/ui-jsx-canvas-renderer/scene-component.tsx +++ b/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 diff --git a/editor/src/components/canvas/ui-jsx-canvas.tsx b/editor/src/components/canvas/ui-jsx-canvas.tsx index 18eadc705081..621d0248de24 100644 --- a/editor/src/components/canvas/ui-jsx-canvas.tsx +++ b/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)} diff --git a/editor/src/components/editor/actions/actions.tsx b/editor/src/components/editor/actions/actions.tsx index e29e07f6e450..53b1407ea245 100644 --- a/editor/src/components/editor/actions/actions.tsx +++ b/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( diff --git a/editor/src/components/editor/store/editor-state.ts b/editor/src/components/editor/store/editor-state.ts index 4ee599aea96e..5c6dda572b17 100644 --- a/editor/src/components/editor/store/editor-state.ts +++ b/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 { diff --git a/editor/src/templates/editor-canvas.tsx b/editor/src/templates/editor-canvas.tsx index d2fcfd966570..79a7c3bc6b64 100644 --- a/editor/src/templates/editor-canvas.tsx +++ b/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 { // 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) => { if (entries.length === 0) { return @@ -768,7 +747,7 @@ export class EditorCanvas extends React.Component { 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) }