From 19f8d4248cc8882e6252f7eacb6d0a8b006fa7c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mime=20=C4=8Cuvalo?= Date: Tue, 28 May 2024 10:49:42 +0100 Subject: [PATCH] toolbar: disable items that dont work when not in select mode (#3819) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When switching to a non-Select tool, it should disable the Duplicate and Trash button (and others). They don't do anything when clicking on them! (drive-by tiny tweak to a `focus()` call) ### Change Type - [x] `sdk` — Changes the tldraw SDK - [ ] `dotcom` — Changes the tldraw.com web app - [ ] `docs` — Changes to the documentation, examples, or templates. - [ ] `vs code` — Changes to the vscode plugin - [ ] `internal` — Does not affect user-facing stuff - [x] `bugfix` — Bug fix - [ ] `feature` — New feature - [ ] `improvement` — Improving existing features - [ ] `chore` — Updating dependencies, other boring stuff - [ ] `galaxy brain` — Architectural changes - [ ] `tests` — Changes to any test code - [ ] `tools` — Changes to infrastructure, CI, internal scripts, debugging tools, etc. - [ ] `dunno` — I don't know ### Release Notes - Toolbar: disable menu items that don't work when not in select mode. --- .../components/DocumentName/DocumentName.tsx | 2 +- .../ActionsMenu/DefaultActionsMenuContent.tsx | 57 ++++++++++++------- .../tldraw/src/lib/ui/components/MenuZone.tsx | 27 --------- .../DefaultQuickActionsContent.tsx | 13 ++++- .../tldraw/src/lib/ui/hooks/menu-hooks.ts | 6 ++ 5 files changed, 54 insertions(+), 51 deletions(-) delete mode 100644 packages/tldraw/src/lib/ui/components/MenuZone.tsx diff --git a/apps/dotcom/src/components/DocumentName/DocumentName.tsx b/apps/dotcom/src/components/DocumentName/DocumentName.tsx index c1f42f7cd..f17daf422 100644 --- a/apps/dotcom/src/components/DocumentName/DocumentName.tsx +++ b/apps/dotcom/src/components/DocumentName/DocumentName.tsx @@ -270,7 +270,7 @@ const DocumentNameEditor = track(function DocumentNameEditor({ // trigger a save with the new one setState((prev) => ({ ...prev, name: null })) inputRef.current?.blur() - editor.getContainer().focus() + editor.focus() } }, [setState, editor] diff --git a/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.tsx b/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.tsx index 6d055c2b8..55f12fdf9 100644 --- a/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.tsx +++ b/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.tsx @@ -6,6 +6,7 @@ import { useAllowGroup, useAllowUngroup, useHasLinkShapeSelected, + useIsInSelectState, useThreeStackableItems, useUnlockedSelectedShapesCount, } from '../../hooks/menu-hooks' @@ -31,17 +32,19 @@ export function DefaultActionsMenuContent() { export function AlignMenuItems() { const actions = useActions() const twoSelected = useUnlockedSelectedShapesCount(2) + const isInSelectState = useIsInSelectState() + const enabled = twoSelected && isInSelectState return ( <> - - - - - - - - + + + + + + + + ) } @@ -50,11 +53,13 @@ export function AlignMenuItems() { export function DistributeMenuItems() { const actions = useActions() const threeSelected = useUnlockedSelectedShapesCount(3) + const isInSelectState = useIsInSelectState() + const enabled = threeSelected && isInSelectState return ( <> - - + + ) } @@ -63,11 +68,13 @@ export function DistributeMenuItems() { export function StackMenuItems() { const actions = useActions() const threeStackableItems = useThreeStackableItems() + const isInSelectState = useIsInSelectState() + const enabled = threeStackableItems && isInSelectState return ( <> - - + + ) } @@ -76,13 +83,15 @@ export function StackMenuItems() { export function ReorderMenuItems() { const actions = useActions() const oneSelected = useUnlockedSelectedShapesCount(1) + const isInSelectState = useIsInSelectState() + const enabled = oneSelected && isInSelectState return ( <> - - - - + + + + ) } @@ -107,24 +116,30 @@ export function ZoomTo100MenuItem() { export function RotateCCWMenuItem() { const actions = useActions() const oneSelected = useUnlockedSelectedShapesCount(1) + const isInSelectState = useIsInSelectState() + const enabled = oneSelected && isInSelectState - return + return } /** @public */ export function RotateCWMenuItem() { const actions = useActions() const oneSelected = useUnlockedSelectedShapesCount(1) + const isInSelectState = useIsInSelectState() + const enabled = oneSelected && isInSelectState - return + return } /** @public */ export function EditLinkMenuItem() { const actions = useActions() const showEditLink = useHasLinkShapeSelected() + const isInSelectState = useIsInSelectState() + const enabled = showEditLink && isInSelectState - return + return } /** @public */ @@ -138,8 +153,10 @@ export function GroupOrUngroupMenuItem() { export function GroupMenuItem() { const actions = useActions() const twoSelected = useUnlockedSelectedShapesCount(2) + const isInSelectState = useIsInSelectState() + const enabled = twoSelected && isInSelectState - return + return } /** @public */ diff --git a/packages/tldraw/src/lib/ui/components/MenuZone.tsx b/packages/tldraw/src/lib/ui/components/MenuZone.tsx deleted file mode 100644 index 30e1911c2..000000000 --- a/packages/tldraw/src/lib/ui/components/MenuZone.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { memo } from 'react' -import { PORTRAIT_BREAKPOINT } from '../constants' -import { useBreakpoint } from '../context/breakpoints' -import { useTldrawUiComponents } from '../context/components' - -export const MenuZone = memo(function MenuZone() { - const breakpoint = useBreakpoint() - - const { MainMenu, QuickActions, ActionsMenu, PageMenu } = useTldrawUiComponents() - - if (!MainMenu && !PageMenu && breakpoint < PORTRAIT_BREAKPOINT.TABLET) return null - - return ( -
-
- {MainMenu && } - {PageMenu && } - {breakpoint < PORTRAIT_BREAKPOINT.TABLET ? null : ( - <> - {QuickActions && } - {ActionsMenu && } - - )} -
-
- ) -}) diff --git a/packages/tldraw/src/lib/ui/components/QuickActions/DefaultQuickActionsContent.tsx b/packages/tldraw/src/lib/ui/components/QuickActions/DefaultQuickActionsContent.tsx index c755f7e12..67e71fabb 100644 --- a/packages/tldraw/src/lib/ui/components/QuickActions/DefaultQuickActionsContent.tsx +++ b/packages/tldraw/src/lib/ui/components/QuickActions/DefaultQuickActionsContent.tsx @@ -1,6 +1,11 @@ import { useEditor, useValue } from '@tldraw/editor' import { useActions } from '../../context/actions' -import { useCanRedo, useCanUndo, useUnlockedSelectedShapesCount } from '../../hooks/menu-hooks' +import { + useCanRedo, + useCanUndo, + useIsInSelectState, + useUnlockedSelectedShapesCount, +} from '../../hooks/menu-hooks' import { useReadonly } from '../../hooks/useReadonly' import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem' @@ -21,6 +26,8 @@ export function DefaultQuickActionsContent() { () => editor.isInAny('select', 'hand', 'zoom'), [editor] ) + const isInSelectState = useIsInSelectState() + const selectDependentActionsEnabled = oneSelected && isInSelectState if (isReadonlyMode && !isInAcceptableReadonlyState) return @@ -28,8 +35,8 @@ export function DefaultQuickActionsContent() { <> - - + + ) } diff --git a/packages/tldraw/src/lib/ui/hooks/menu-hooks.ts b/packages/tldraw/src/lib/ui/hooks/menu-hooks.ts index b7611a952..04e4bb95d 100644 --- a/packages/tldraw/src/lib/ui/hooks/menu-hooks.ts +++ b/packages/tldraw/src/lib/ui/hooks/menu-hooks.ts @@ -32,6 +32,12 @@ export const useThreeStackableItems = () => { return useValue('threeStackableItems', () => shapesWithUnboundArrows(editor).length > 2, [editor]) } +/** @internal */ +export const useIsInSelectState = () => { + const editor = useEditor() + return useValue('isInSelectState', () => editor.isIn('select'), [editor]) +} + /** @internal */ export const useAllowGroup = () => { const editor = useEditor()