diff --git a/.ignore b/.ignore new file mode 100644 index 000000000..8329eb03b --- /dev/null +++ b/.ignore @@ -0,0 +1,7 @@ +# Ignored Files for Search + +dist +node_modules +*.d.ts +*.js +*.md \ No newline at end of file diff --git a/packages/tldraw/src/components/TopPanel/StyleMenu/StyleMenu.tsx b/packages/tldraw/src/components/TopPanel/StyleMenu/StyleMenu.tsx index cff157233..8a914414a 100644 --- a/packages/tldraw/src/components/TopPanel/StyleMenu/StyleMenu.tsx +++ b/packages/tldraw/src/components/TopPanel/StyleMenu/StyleMenu.tsx @@ -101,12 +101,19 @@ const optionsSelector = (s: TDSnapshot) => { export const StyleMenu = React.memo(function ColorMenu(): JSX.Element { const app = useTldrawApp() + const theme = app.useStore(themeSelector) + const options = app.useStore(optionsSelector) + const currentStyle = app.useStore(currentStyleSelector) + const selectedIds = app.useStore(selectedIdsSelector) + const [displayedStyle, setDisplayedStyle] = React.useState(currentStyle) + const rDisplayedStyle = React.useRef(currentStyle) + React.useEffect(() => { const { appState: { currentStyle }, @@ -144,27 +151,34 @@ export const StyleMenu = React.memo(function ColorMenu(): JSX.Element { setDisplayedStyle(commonStyle) } }, [currentStyle, selectedIds]) + const handleToggleFilled = React.useCallback((checked: boolean) => { app.style({ isFilled: checked }) }, []) + const handleDashChange = React.useCallback((value: string) => { app.style({ dash: value as DashStyle }) }, []) + const handleSizeChange = React.useCallback((value: string) => { app.style({ size: value as SizeStyle }) }, []) + const handleFontChange = React.useCallback((value: string) => { app.style({ font: value as FontStyle }) }, []) + const handleTextAlignChange = React.useCallback((value: string) => { app.style({ textAlign: value as AlignStyle }) }, []) + const handleMenuOpenChange = React.useCallback( (open: boolean) => { app.setMenuOpen(open) }, [app] ) + return ( diff --git a/packages/tldraw/src/components/TopPanel/TopPanel.tsx b/packages/tldraw/src/components/TopPanel/TopPanel.tsx index 746aa2954..4ef081d3c 100644 --- a/packages/tldraw/src/components/TopPanel/TopPanel.tsx +++ b/packages/tldraw/src/components/TopPanel/TopPanel.tsx @@ -45,14 +45,12 @@ export function TopPanel({ {(showStyles || showZoom) && ( {showStyles && !readOnly && } - - - - - - - - + + + + + + {showZoom && } )} @@ -78,18 +76,3 @@ const StyledSpacer = styled('div', { flexGrow: 2, pointerEvents: 'none', }) - -const MobileOnly = styled('div', { - display: 'flex', - flexDirection: 'row', - variants: { - bp: { - small: { - display: 'inherit', - }, - large: { - display: 'none', - }, - }, - }, -})