diff --git a/blocksuite/affine/blocks/root/src/edgeless/edgeless-keyboard.ts b/blocksuite/affine/blocks/root/src/edgeless/edgeless-keyboard.ts index 1df0ce912d..3fd19d5b9c 100644 --- a/blocksuite/affine/blocks/root/src/edgeless/edgeless-keyboard.ts +++ b/blocksuite/affine/blocks/root/src/edgeless/edgeless-keyboard.ts @@ -88,6 +88,9 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager { p: () => { this._setEdgelessTool('brush'); }, + 'Shift-p': () => { + this._setEdgelessTool('highlighter'); + }, e: () => { this._setEdgelessTool('eraser'); }, diff --git a/blocksuite/affine/components/src/tooltip-content-with-shortcut/index.ts b/blocksuite/affine/components/src/tooltip-content-with-shortcut/index.ts index 730fc07afb..a46483d8ef 100644 --- a/blocksuite/affine/components/src/tooltip-content-with-shortcut/index.ts +++ b/blocksuite/affine/components/src/tooltip-content-with-shortcut/index.ts @@ -1,5 +1,6 @@ import { css, html, LitElement } from 'lit'; import { property } from 'lit/decorators.js'; +import { repeat } from 'lit-html/directives/repeat.js'; export class TooltipContentWithShortcut extends LitElement { static override styles = css` @@ -9,6 +10,10 @@ export class TooltipContentWithShortcut extends LitElement { align-items: center; gap: 10px; } + .tooltip__shortcuts { + display: flex; + gap: 2px; + } .tooltip__shortcut { font-size: 12px; position: relative; @@ -28,19 +33,30 @@ export class TooltipContentWithShortcut extends LitElement { opacity: 0.2; } .tooltip__label { + display: flex; + flex: 1; white-space: pre; } `; + get shortcuts() { + let shortcut = this.shortcut; + if (!shortcut) return []; + return shortcut.split(' '); + } + override render() { - const { tip, shortcut, postfix } = this; + const { tip, shortcuts, postfix } = this; return html`
${tip} - ${shortcut - ? html`${shortcut}` - : ''} +
+ ${repeat( + shortcuts, + shortcut => html`${shortcut}` + )} +
${postfix ? html`${postfix}` : ''}
`; diff --git a/blocksuite/affine/gfx/brush/src/toolbar/components/pen/consts.ts b/blocksuite/affine/gfx/brush/src/toolbar/components/pen/consts.ts new file mode 100644 index 0000000000..2e1df31d8a --- /dev/null +++ b/blocksuite/affine/gfx/brush/src/toolbar/components/pen/consts.ts @@ -0,0 +1,29 @@ +import { + EdgelessBrushDarkIcon, + EdgelessBrushLightIcon, + EdgelessHighlighterDarkIcon, + EdgelessHighlighterLightIcon, +} from './icons'; +import type { Pen } from './types'; + +export const penIconMap = { + dark: { + brush: EdgelessBrushDarkIcon, + highlighter: EdgelessHighlighterDarkIcon, + }, + light: { + brush: EdgelessBrushLightIcon, + highlighter: EdgelessHighlighterLightIcon, + }, +}; + +export const penInfoMap: { [k in Pen]: { tip: string; shortcut: string } } = { + brush: { + tip: 'Pen', + shortcut: 'P', + }, + highlighter: { + tip: 'Highlighter', + shortcut: '⇧ P', + }, +}; diff --git a/blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-menu.ts b/blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-menu.ts index 5bc6a922b8..92c5e74706 100644 --- a/blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-menu.ts +++ b/blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-menu.ts @@ -7,11 +7,16 @@ import { import type { ColorEvent } from '@blocksuite/affine-shared/utils'; import { EdgelessToolbarToolMixin } from '@blocksuite/affine-widget-edgeless-toolbar'; import { SignalWatcher } from '@blocksuite/global/lit'; -import { computed, type Signal } from '@preact/signals-core'; +import { + computed, + type ReadonlySignal, + type Signal, +} from '@preact/signals-core'; import { css, html, LitElement, type TemplateResult } from 'lit'; import { property } from 'lit/decorators.js'; import { styleMap } from 'lit/directives/style-map.js'; +import { penInfoMap } from './consts'; import type { Pen, PenMap } from './types'; export class EdgelessPenMenu extends EdgelessToolbarToolMixin( @@ -26,8 +31,14 @@ export class EdgelessPenMenu extends EdgelessToolbarToolMixin( .pens { display: flex; + height: 100%; padding: 0 4px; - align-items: center; + align-items: flex-end; + + edgeless-tool-icon-button { + display: flex; + align-self: flex-start; + } .pen-wrapper { display: flex; @@ -36,7 +47,7 @@ export class EdgelessPenMenu extends EdgelessToolbarToolMixin( align-items: flex-end; justify-content: center; position: relative; - transform: translateY(10px); + transform: translateY(-2px); transition-property: color, transform; transition-duration: 300ms; transition-timing-function: ease-in-out; @@ -46,7 +57,7 @@ export class EdgelessPenMenu extends EdgelessToolbarToolMixin( .pen-wrapper:hover, .pen-wrapper:active, .pen-wrapper[data-active] { - transform: translateY(-10px); + transform: translateY(-22px); } } @@ -56,6 +67,8 @@ export class EdgelessPenMenu extends EdgelessToolbarToolMixin( } menu-divider { + display: flex; + align-self: center; height: 24px; margin: 0 9px; } @@ -83,42 +96,64 @@ export class EdgelessPenMenu extends EdgelessToolbarToolMixin( override render() { const { _theme$: { value: theme }, - color$: { value: currentColor }, colors$: { value: { brush: brushColor, highlighter: highlighterColor }, }, - pen$: { value: pen }, penIconMap$: { value: { brush: brushIcon, highlighter: highlighterIcon }, }, + penInfo$: { + value: { type, color }, + }, } = this; return html`
-
`} + .tooltipOffset=${20} + .hover=${false} @click=${() => this._onPickPen('brush')} > - ${brushIcon} -
-
+ ${brushIcon} +
+ + + `} + .tooltipOffset=${20} + .hover=${false} @click=${() => this._onPickPen('highlighter')} > - ${highlighterIcon} -
+
+ ${highlighterIcon} +
+
) => void; @property({ attribute: false }) - accessor colors$!: Signal>; + accessor colors$!: ReadonlySignal>; @property({ attribute: false }) - accessor color$!: Signal; + accessor penIconMap$!: ReadonlySignal>; @property({ attribute: false }) accessor pen$!: Signal; @property({ attribute: false }) - accessor penIconMap$!: Signal>; + accessor penInfo$!: ReadonlySignal<{ + type: Pen; + color: string; + icon: TemplateResult<1>; + tip: string; + shortcut: string; + }>; } diff --git a/blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-tool-button.ts b/blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-tool-button.ts index f7fe3240e3..6f3c0b77ff 100644 --- a/blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-tool-button.ts +++ b/blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-tool-button.ts @@ -10,7 +10,7 @@ import { css, html, LitElement, nothing } from 'lit'; import { styleMap } from 'lit/directives/style-map.js'; import { when } from 'lit/directives/when.js'; -import { penIconMap } from './icons'; +import { penIconMap, penInfoMap } from './consts'; import type { Pen } from './types'; export class EdgelessPenToolButton extends EdgelessToolbarToolMixin( @@ -81,6 +81,18 @@ export class EdgelessPenToolButton extends EdgelessToolbarToolMixin( return this.penIconMap$.value[pen]; }); + private readonly penInfo$ = computed(() => { + const type = this.pen$.value; + const icon = this.penIcon$.value; + const color = this.color$.value; + return { + ...penInfoMap[type], + color, + icon, + type, + }; + }); + private readonly pen$ = signal('brush'); override enableActiveBackground = true; @@ -89,9 +101,20 @@ export class EdgelessPenToolButton extends EdgelessToolbarToolMixin( override firstUpdated() { this.disposables.add( - this.gfx.tool.currentToolName$.subscribe(tool => { - if (this.type.map(String).includes(tool)) return; - this.tryDisposePopper(); + this.gfx.tool.currentToolName$.subscribe(name => { + const tool = this.type.find(t => t === name); + if (!tool) { + this.tryDisposePopper(); + return; + } + + if (tool !== this.pen$.peek()) { + this.pen$.value = tool; + } + + if (this.active) return; + + this._togglePenMenu(); }) ); } @@ -101,10 +124,10 @@ export class EdgelessPenToolButton extends EdgelessToolbarToolMixin( !this.active && this.setEdgelessTool(this.pen$.peek()); const menu = this.createPopper('edgeless-pen-menu', this); Object.assign(menu.element, { - color$: this.color$, colors$: this.colors$, - pen$: this.pen$, penIconMap$: this.penIconMap$, + pen$: this.pen$, + penInfo$: this.penInfo$, edgeless: this.edgeless, onChange: (props: Record) => { const pen = this.pen$.peek(); @@ -117,20 +140,22 @@ export class EdgelessPenToolButton extends EdgelessToolbarToolMixin( override render() { const { active, - penIcon$: { value: icon }, - color$: { value: color }, + penInfo$: { + value: { type, color, icon, tip, shortcut }, + }, } = this; return html` nothing, () => html`` )} .tooltipOffset=${4} diff --git a/tests/affine-local/e2e/blocksuite/edgeless/highlighter.spec.ts b/tests/affine-local/e2e/blocksuite/edgeless/highlighter.spec.ts index b3e7b92815..480b8fb23f 100644 --- a/tests/affine-local/e2e/blocksuite/edgeless/highlighter.spec.ts +++ b/tests/affine-local/e2e/blocksuite/edgeless/highlighter.spec.ts @@ -57,3 +57,28 @@ test('should exit drawing tools menu when Escape is pressed', async ({ await expect(drawingToolsMenu).toBeHidden(); }); + +test('should enter highlighter tool when `Shift + P` is pressed', async ({ + page, +}) => { + const drawingToolButton = page.locator('.edgeless-pen-button'); + const drawingToolsMenu = page.locator('edgeless-pen-menu'); + + await expect(drawingToolButton).toHaveAttribute('data-drawing-tool', 'brush'); + await expect(drawingToolsMenu).toBeHidden(); + + await page.keyboard.press('Shift+P'); + + await expect(drawingToolButton).toHaveAttribute( + 'data-drawing-tool', + 'highlighter' + ); + await expect(drawingToolsMenu).toBeVisible(); + + await page.keyboard.press('Escape'); + await expect(drawingToolsMenu).toBeHidden(); + await expect(drawingToolButton).toHaveAttribute( + 'data-drawing-tool', + 'highlighter' + ); +}); diff --git a/tests/blocksuite/e2e/utils/actions/edgeless.ts b/tests/blocksuite/e2e/utils/actions/edgeless.ts index f1785d07e2..cd7ea96846 100644 --- a/tests/blocksuite/e2e/utils/actions/edgeless.ts +++ b/tests/blocksuite/e2e/utils/actions/edgeless.ts @@ -211,7 +211,7 @@ export async function locatorEdgelessToolButton( switch (type) { case 'brush': case 'highlighter': - buttonType = 'div'; + buttonType = 'edgeless-tool-icon-button'; break; case 'pen': case 'text': diff --git a/tests/kit/src/utils/editor.ts b/tests/kit/src/utils/editor.ts index c65db29407..3b3086d6da 100644 --- a/tests/kit/src/utils/editor.ts +++ b/tests/kit/src/utils/editor.ts @@ -289,7 +289,7 @@ export async function locateEdgelessToolButton( switch (type) { case 'brush': case 'highlighter': - buttonType = 'div'; + buttonType = 'edgeless-tool-icon-button'; break; case 'pen': case 'text':