Get rid of the scrollbars in SnapshotEditor

This commit is contained in:
Aria Minaei 2022-03-03 12:35:38 +01:00
parent 3f2a9032f1
commit 9dfe912f65
3 changed files with 12 additions and 6 deletions

View file

@ -74,12 +74,14 @@ const Wrapper = styled.div`
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
overflow: hidden;
` `
const CanvasWrapper = styled.div` const CanvasWrapper = styled.div`
display: relative; display: relative;
z-index: 0; z-index: 0;
height: 100%; height: 100%;
overflow: hidden;
` `
const Overlay = styled.div` const Overlay = styled.div`
@ -138,7 +140,7 @@ const SnapshotEditor: React.FC<{paneId: string}> = (props) => {
if (!editorObject) return <></> if (!editorObject) return <></>
return ( return (
<root.div> <root.div style={{overflow: 'hidden'}}>
<StyleSheetManager disableVendorPrefixes> <StyleSheetManager disableVendorPrefixes>
<> <>
<GlobalStyle /> <GlobalStyle />

View file

@ -3,14 +3,17 @@ import DetailPanel from '@theatre/studio/panels/DetailPanel/DetailPanel'
import React from 'react' import React from 'react'
import getStudio from '@theatre/studio/getStudio' import getStudio from '@theatre/studio/getStudio'
import {useVal} from '@theatre/react' import {useVal} from '@theatre/react'
import PaneWrapper from '@theatre/studio/panels/BasePanel/PaneWrapper' import ExtensionPaneWrapper from '@theatre/studio/panels/BasePanel/ExtensionPaneWrapper'
import SequenceEditorPanel from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel' import SequenceEditorPanel from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel'
const PanelsRoot: React.FC = () => { const PanelsRoot: React.FC = () => {
const panes = useVal(getStudio().paneManager.allPanesD) const panes = useVal(getStudio().paneManager.allPanesD)
const paneEls = Object.entries(panes).map(([instanceId, paneInstance]) => { const paneEls = Object.entries(panes).map(([instanceId, paneInstance]) => {
return ( return (
<PaneWrapper key={`pane-${instanceId}`} paneInstance={paneInstance!} /> <ExtensionPaneWrapper
key={`pane-${instanceId}`}
paneInstance={paneInstance!}
/>
) )
}) })

View file

@ -23,7 +23,7 @@ const defaultPosition: PanelPosition = {
const minDims = {width: 300, height: 300} const minDims = {width: 300, height: 300}
const PaneWrapper: React.FC<{ const ExtensionPaneWrapper: React.FC<{
paneInstance: PaneInstance<$FixMe> paneInstance: PaneInstance<$FixMe>
}> = ({paneInstance}) => { }> = ({paneInstance}) => {
return ( return (
@ -38,7 +38,8 @@ const PaneWrapper: React.FC<{
} }
const Container = styled(PanelWrapper)` const Container = styled(PanelWrapper)`
overflow-y: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -160,4 +161,4 @@ const Content: React.FC<{paneInstance: PaneInstance<$FixMe>}> = ({
) )
} }
export default PaneWrapper export default ExtensionPaneWrapper