PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix (#968)

Browse source
This commit is contained in:
Steve Ruiz 2022-09-08 13:33:04 +01:00 committed by GitHub
parent 0549660244
commit 5fea5b4c69
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 16 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
package.json
View file

@ -63,14 +63,12 @@
"tslib": "^2.4.0", "tslib": "^2.4.0",
"turbo": "^1.3.4", "turbo": "^1.3.4",
"typescript": "^4.7.3", "typescript": "^4.7.3",
"webpack": "^5.68.0" "webpack": "^5.68.0",
"@changesets/cli": "^2.20.0"
}, },
"lint-staged": { "lint-staged": {
"*": "prettier --ignore-unknown --write", "*": "prettier --ignore-unknown --write",
"*.{ts,tsx}": "eslint --fix" "*.{ts,tsx}": "eslint --fix"
}, },
"packageManager": "yarn@1.22.17", "packageManager": "yarn@1.22.17"
"dependencies": {
"@changesets/cli": "^2.20.0"
}
} }

2
packages/tldraw/src/components/ToolsPanel/HelpPanel.tsx
View file

@ -18,7 +18,7 @@ import { breakpoints } from '~components/breakpoints'
import { useTldrawApp } from '~hooks' import { useTldrawApp } from '~hooks'
import { styled } from '~styles' import { styled } from '~styles'
import { TDSnapshot } from '~types' import { TDSnapshot } from '~types'
import { KeyboardShortcutDialog } from './keyboardShortcutDialog' import { KeyboardShortcutDialog } from './KeyboardShortcutDialog'
const isDebugModeSelector = (s: TDSnapshot) => s.settings.isDebugMode const isDebugModeSelector = (s: TDSnapshot) => s.settings.isDebugMode
const dockPositionState = (s: TDSnapshot) => s.settings.dockPosition const dockPositionState = (s: TDSnapshot) => s.settings.dockPosition

3
packages/tldraw/src/components/ToolsPanel/keyboardShortcutDialog.tsx
View file

@ -173,6 +173,8 @@ const DialogContent = styled(Dialog.Content, {
maxHeight: '74vh', maxHeight: '74vh',
overflowY: 'auto', overflowY: 'auto',
padding: 25, padding: 25,
zIndex: 9999,
pointerEvents: 'all',
background: '$panel', background: '$panel',
'&:focus': { outline: 'none' }, '&:focus': { outline: 'none' },
}) })
@ -211,6 +213,7 @@ const DialogOverlay = styled(Dialog.Overlay, {
backgroundColor: '$overlay', backgroundColor: '$overlay',
position: 'fixed', position: 'fixed',
inset: 0, inset: 0,
zIndex: 9998,
}) })
const DialogIconButton = styled(IconButton, { const DialogIconButton = styled(IconButton, {

2
packages/tldraw/src/components/TopPanel/LanguageMenu/LanguageMenu.tsx
View file

@ -22,7 +22,7 @@ export const LanguageMenu = () => {
) )
return ( return (
<DMContent variant="menu" overflow={true} id="language-menu" side="left" sideOffset={8}> <DMContent variant="menu" overflow id="language-menu" side="left" sideOffset={8}>
{TRANSLATIONS.map(({ locale, label }) => ( {TRANSLATIONS.map(({ locale, label }) => (
<DMCheckboxItem <DMCheckboxItem
key={locale} key={locale}

4
packages/tldraw/src/components/TopPanel/PreferencesMenu/PreferencesMenu.tsx
View file

@ -102,7 +102,7 @@ export function PreferencesMenu() {
> >
<FormattedMessage id="preferences.keep.stylemenu.open" /> <FormattedMessage id="preferences.keep.stylemenu.open" />
</DMCheckboxItem> </DMCheckboxItem>
<DMSubMenu label={intl.formatMessage({ id: 'dock.position' })} overflow={false}> <DMSubMenu label={intl.formatMessage({ id: 'dock.position' })}>
{DockPosition.map((position) => ( {DockPosition.map((position) => (
<DMCheckboxItem <DMCheckboxItem
key={position} key={position}
@ -116,7 +116,7 @@ export function PreferencesMenu() {
</DMCheckboxItem> </DMCheckboxItem>
))} ))}
</DMSubMenu> </DMSubMenu>
<DMSubMenu label={intl.formatMessage({ id: 'export.background' })} overflow={false}> <DMSubMenu label={intl.formatMessage({ id: 'export.background' })}>
{Object.values(TDExportBackground).map((exportBackground) => ( {Object.values(TDExportBackground).map((exportBackground) => (
<DMCheckboxItem <DMCheckboxItem
key={exportBackground} key={exportBackground}

6
packages/tldraw/src/hooks/useTldrawApp.tsx
View file

@ -3,6 +3,11 @@ import type { TldrawApp } from '~state'
export const TldrawContext = React.createContext<TldrawApp>({} as TldrawApp) export const TldrawContext = React.createContext<TldrawApp>({} as TldrawApp)
const useForceUpdate = () => {
const [_state, setState] = React.useState(0)
React.useEffect(() => setState(1))
}
export function useTldrawApp() { export function useTldrawApp() {
const context = React.useContext(TldrawContext) const context = React.useContext(TldrawContext)
return context return context
@ -12,5 +17,6 @@ export const ContainerContext = React.createContext({} as React.RefObject<HTMLDi
export function useContainer() { export function useContainer() {
const context = React.useContext(ContainerContext) const context = React.useContext(ContainerContext)
useForceUpdate()
return context return context
} }