From 512696c1ab2e982b52fd78a2de4a33ac4c1d9f47 Mon Sep 17 00:00:00 2001 From: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Date: Mon, 2 Oct 2023 15:23:51 +0100 Subject: [PATCH] Fix style panel opening when disabled (#1983) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes #1982 When choosing whether to disable the mobile style menu, we now also check if the select tool is active and whether any shapes have been selected. ### Change Type - [x] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [ ] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Test Plan 1. On a small screen 2. Choose the select tool 3. Deselect all shapes 4. Click on the disabled style menu button Expected: Nothing should happen Actual: The style menu opens ### Release Notes - When select tool is active, the style menu shouldn't be openable unless a shape is also selected. Before/After --------- Co-authored-by: Steve Ruiz --- .../lib/ui/components/MobileStylePanel.tsx | 32 +++++++++------- .../ui/components/StylePanel/StylePanel.tsx | 23 +----------- .../src/lib/ui/hooks/useRevelantStyles.ts | 37 +++++++++++++++++++ 3 files changed, 57 insertions(+), 35 deletions(-) create mode 100644 packages/tldraw/src/lib/ui/hooks/useRevelantStyles.ts diff --git a/packages/tldraw/src/lib/ui/components/MobileStylePanel.tsx b/packages/tldraw/src/lib/ui/components/MobileStylePanel.tsx index a17d2ea45..b6dda15c2 100644 --- a/packages/tldraw/src/lib/ui/components/MobileStylePanel.tsx +++ b/packages/tldraw/src/lib/ui/components/MobileStylePanel.tsx @@ -1,5 +1,12 @@ -import { DefaultColorStyle, getDefaultColorTheme, useEditor, useValue } from '@tldraw/editor' +import { + DefaultColorStyle, + TLDefaultColorStyle, + getDefaultColorTheme, + useEditor, + useValue, +} from '@tldraw/editor' import { useCallback } from 'react' +import { useRelevantStyles } from '../hooks/useRevelantStyles' import { useTranslation } from '../hooks/useTranslation/useTranslation' import { StylePanel } from './StylePanel/StylePanel' import { Button } from './primitives/Button' @@ -10,17 +17,12 @@ export function MobileStylePanel() { const editor = useEditor() const msg = useTranslation() - const currentColor = useValue( - 'current color', - () => { - const color = editor.sharedStyles.get(DefaultColorStyle) - if (!color) return 'var(--color-muted-1)' - if (color.type === 'mixed') return null - const theme = getDefaultColorTheme({ isDarkMode: editor.user.isDarkMode }) - return theme[color.value].solid - }, - [editor] - ) + const relevantStyles = useRelevantStyles() + const color = relevantStyles?.styles.get(DefaultColorStyle) + const theme = getDefaultColorTheme({ isDarkMode: editor.user.isDarkMode }) + const currentColor = ( + color?.type === 'shared' ? theme[color.value as TLDefaultColorStyle] : theme.black + ).solid const disableStylePanel = useValue( 'isHandOrEraserToolActive', @@ -43,10 +45,12 @@ export function MobileStylePanel() { diff --git a/packages/tldraw/src/lib/ui/components/StylePanel/StylePanel.tsx b/packages/tldraw/src/lib/ui/components/StylePanel/StylePanel.tsx index d33233aa0..3e2364f3a 100644 --- a/packages/tldraw/src/lib/ui/components/StylePanel/StylePanel.tsx +++ b/packages/tldraw/src/lib/ui/components/StylePanel/StylePanel.tsx @@ -8,18 +8,16 @@ import { DefaultHorizontalAlignStyle, DefaultSizeStyle, DefaultVerticalAlignStyle, - Editor, GeoShapeGeoStyle, LineShapeSplineStyle, ReadonlySharedStyleMap, SharedStyle, - SharedStyleMap, StyleProp, minBy, useEditor, - useValue, } from '@tldraw/editor' import React, { useCallback } from 'react' +import { useRelevantStyles } from '../../hooks/useRevelantStyles' import { useTranslation } from '../../hooks/useTranslation/useTranslation' import { Button } from '../primitives/Button' import { ButtonPicker } from '../primitives/ButtonPicker' @@ -32,28 +30,11 @@ interface StylePanelProps { isMobile?: boolean } -const selectToolStyles = [DefaultColorStyle, DefaultDashStyle, DefaultFillStyle, DefaultSizeStyle] -function getRelevantStyles( - editor: Editor -): { styles: ReadonlySharedStyleMap; opacity: SharedStyle } | null { - const styles = new SharedStyleMap(editor.sharedStyles) - const hasShape = editor.selectedShapeIds.length > 0 || !!editor.root.current.value?.shapeType - - if (styles.size === 0 && editor.isIn('select') && editor.selectedShapeIds.length === 0) { - for (const style of selectToolStyles) { - styles.applyValue(style, editor.getStyleForNextShape(style)) - } - } - - if (styles.size === 0 && !hasShape) return null - return { styles, opacity: editor.sharedOpacity } -} - /** @internal */ export const StylePanel = function StylePanel({ isMobile }: StylePanelProps) { const editor = useEditor() - const relevantStyles = useValue('getRelevantStyles', () => getRelevantStyles(editor), [editor]) + const relevantStyles = useRelevantStyles() const handlePointerOut = useCallback(() => { if (!isMobile) { diff --git a/packages/tldraw/src/lib/ui/hooks/useRevelantStyles.ts b/packages/tldraw/src/lib/ui/hooks/useRevelantStyles.ts new file mode 100644 index 000000000..4e4c856a3 --- /dev/null +++ b/packages/tldraw/src/lib/ui/hooks/useRevelantStyles.ts @@ -0,0 +1,37 @@ +import { + DefaultColorStyle, + DefaultDashStyle, + DefaultFillStyle, + DefaultSizeStyle, + ReadonlySharedStyleMap, + SharedStyle, + SharedStyleMap, + useEditor, + useValue, +} from '@tldraw/editor' + +const selectToolStyles = [DefaultColorStyle, DefaultDashStyle, DefaultFillStyle, DefaultSizeStyle] + +export function useRelevantStyles(): { + styles: ReadonlySharedStyleMap + opacity: SharedStyle +} | null { + const editor = useEditor() + return useValue( + 'getRelevantStyles', + () => { + const styles = new SharedStyleMap(editor.sharedStyles) + const hasShape = editor.selectedShapeIds.length > 0 || !!editor.root.current.value?.shapeType + + if (styles.size === 0 && editor.isIn('select') && editor.selectedShapeIds.length === 0) { + for (const style of selectToolStyles) { + styles.applyValue(style, editor.getStyleForNextShape(style)) + } + } + + if (styles.size === 0 && !hasShape) return null + return { styles, opacity: editor.sharedOpacity } + }, + [editor] + ) +}