Get rid of the scrollbars in SnapshotEditor
This commit is contained in:
parent
3f2a9032f1
commit
9dfe912f65
3 changed files with 12 additions and 6 deletions
|
@ -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 />
|
||||||
|
|
|
@ -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!}
|
||||||
|
/>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
@ -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
|
Loading…
Reference in a new issue