From 453c98dd7e0359876950bd19340cc6f1da88282e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mime=20=C4=8Cuvalo?= Date: Tue, 21 May 2024 15:28:09 +0100 Subject: [PATCH] toolbar: rework overflow css logic (#3779) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Small side quest: This reworks the overflow toolbar css to rely on `nth-child` instead of putting together a long selector. This also address the minor issue/edge case raised in https://github.com/tldraw/tldraw/pull/3757 ### 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 - [ ] `bugfix` — Bug fix - [ ] `feature` — New feature - [x] `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: cleanup overflow css rules. --------- Co-authored-by: Steve Ruiz --- packages/tldraw/src/lib/styles.tsx | 6 +++--- .../Toolbar/DefaultToolbarContent.tsx | 17 ++++++++++----- .../components/Toolbar/OverflowingToolbar.tsx | 21 +++++-------------- .../ui/hooks/clipboard/pasteTldrawContent.ts | 6 +++--- 4 files changed, 23 insertions(+), 27 deletions(-) diff --git a/packages/tldraw/src/lib/styles.tsx b/packages/tldraw/src/lib/styles.tsx index f8f4af71f..5b63b1215 100644 --- a/packages/tldraw/src/lib/styles.tsx +++ b/packages/tldraw/src/lib/styles.tsx @@ -61,21 +61,21 @@ export const STYLES = { geo: [ { value: 'rectangle', icon: 'geo-rectangle' }, { value: 'ellipse', icon: 'geo-ellipse' }, - { value: 'cloud', icon: 'geo-cloud' }, { value: 'triangle', icon: 'geo-triangle' }, { value: 'diamond', icon: 'geo-diamond' }, + { value: 'star', icon: 'geo-star' }, { value: 'pentagon', icon: 'geo-pentagon' }, { value: 'hexagon', icon: 'geo-hexagon' }, { value: 'octagon', icon: 'geo-octagon' }, - { value: 'star', icon: 'geo-star' }, { value: 'rhombus', icon: 'geo-rhombus' }, { value: 'rhombus-2', icon: 'geo-rhombus-2' }, { value: 'oval', icon: 'geo-oval' }, { value: 'trapezoid', icon: 'geo-trapezoid' }, - { value: 'arrow-right', icon: 'geo-arrow-right' }, { value: 'arrow-left', icon: 'geo-arrow-left' }, { value: 'arrow-up', icon: 'geo-arrow-up' }, { value: 'arrow-down', icon: 'geo-arrow-down' }, + { value: 'arrow-right', icon: 'geo-arrow-right' }, + { value: 'cloud', icon: 'geo-cloud' }, { value: 'x-box', icon: 'geo-x-box' }, { value: 'check-box', icon: 'geo-check-box' }, ], diff --git a/packages/tldraw/src/lib/ui/components/Toolbar/DefaultToolbarContent.tsx b/packages/tldraw/src/lib/ui/components/Toolbar/DefaultToolbarContent.tsx index 1da1d4fc7..5a896f567 100644 --- a/packages/tldraw/src/lib/ui/components/Toolbar/DefaultToolbarContent.tsx +++ b/packages/tldraw/src/lib/ui/components/Toolbar/DefaultToolbarContent.tsx @@ -16,14 +16,14 @@ export function DefaultToolbarContent() { - - - - + + + + @@ -32,8 +32,8 @@ export function DefaultToolbarContent() { - + ) } @@ -165,6 +165,13 @@ export function CloudToolbarItem() { return } +/** @public */ +export function PentagonToolbarItem() { + const tools = useTools() + const isSelected = useIsToolSelected(tools['pentagon']) + return +} + /** @public */ export function StarToolbarItem() { const tools = useTools() diff --git a/packages/tldraw/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx b/packages/tldraw/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx index 59c16c627..2a5231998 100644 --- a/packages/tldraw/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx +++ b/packages/tldraw/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx @@ -31,25 +31,13 @@ export function OverflowingToolbar({ children }: { children: React.ReactNode }) const [lastActiveOverflowItem, setLastActiveOverflowItem] = useState(null) const css = useMemo(() => { - const showInMainSelectors = [] - const hideFromOverflowSelectors = [] - - if (lastActiveOverflowItem) { - showInMainSelectors.push(`[data-value="${lastActiveOverflowItem}"]`) - } else { - showInMainSelectors.push(`:nth-child(${overflowIndex + 1})`) - } - - for (let i = 0; i < overflowIndex; i++) { - showInMainSelectors.push(`:nth-child(${i + 1})`) - hideFromOverflowSelectors.push(`:nth-child(${i + 1})`) - } + const activeCss = lastActiveOverflowItem ? `:not([data-value="${lastActiveOverflowItem}"])` : '' return ` - #${id}_main > *:not(${showInMainSelectors.join(', ')}) { + #${id}_main > *:nth-child(n + ${overflowIndex + (lastActiveOverflowItem ? 1 : 2)})${activeCss} { display: none; } - ${hideFromOverflowSelectors.map((s) => `#${id}_more > *${s}`).join(', ')} { + #${id}_more > *:nth-child(-n + ${overflowIndex}) { display: none; } ` @@ -156,7 +144,8 @@ export function OverflowingToolbar({ children }: { children: React.ReactNode }) {children} - {totalItems > overflowIndex && ( + {/* There is a +1 because if the menu is just one item, it's not necessary. */} + {totalItems > overflowIndex + 1 && ( diff --git a/packages/tldraw/src/lib/ui/hooks/clipboard/pasteTldrawContent.ts b/packages/tldraw/src/lib/ui/hooks/clipboard/pasteTldrawContent.ts index c7f6bb238..551e35bdd 100644 --- a/packages/tldraw/src/lib/ui/hooks/clipboard/pasteTldrawContent.ts +++ b/packages/tldraw/src/lib/ui/hooks/clipboard/pasteTldrawContent.ts @@ -11,7 +11,7 @@ import { Editor, TLContent, VecLike } from '@tldraw/editor' export function pasteTldrawContent(editor: Editor, clipboard: TLContent, point?: VecLike) { const p = point ?? (editor.inputs.shiftKey ? editor.inputs.currentPagePoint : undefined) - const seletionBoundsBefore = editor.getSelectionPageBounds() + const selectionBoundsBefore = editor.getSelectionPageBounds() editor.mark('paste') editor.putContentOntoCurrentPage(clipboard, { point: p, @@ -19,9 +19,9 @@ export function pasteTldrawContent(editor: Editor, clipboard: TLContent, point?: }) const selectedBoundsAfter = editor.getSelectionPageBounds() if ( - seletionBoundsBefore && + selectionBoundsBefore && selectedBoundsAfter && - seletionBoundsBefore?.collides(selectedBoundsAfter) + selectionBoundsBefore?.collides(selectedBoundsAfter) ) { // Creates a 'puff' to show a paste has happened. editor.updateInstanceState({ isChangingStyle: true })