mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-15 05:37:32 +00:00
refactor(editor): edgeless note toolbar config extension (#10719)
This commit is contained in:
fundon
@@ -0,0 +1,41 @@
|
||||
import { LineWidth, type StrokeStyle } from '@blocksuite/affine-model';
|
||||
import { ShadowlessElement } from '@blocksuite/block-std';
|
||||
import { ArrowDownSmallIcon, LineStyleIcon } from '@blocksuite/icons/lit';
|
||||
import { html } from 'lit';
|
||||
import { property } from 'lit/decorators.js';
|
||||
|
||||
export class EdgelessNoteBorderDropdownMenu extends ShadowlessElement {
|
||||
override render() {
|
||||
const { lineSize, lineStyle } = this;
|
||||
|
||||
return html`
|
||||
<editor-menu-button
|
||||
.button=${html`
|
||||
<editor-icon-button
|
||||
aria-label="Border style"
|
||||
.tooltip="${'Border style'}"
|
||||
>
|
||||
${LineStyleIcon()} ${ArrowDownSmallIcon()}
|
||||
</editor-icon-button>
|
||||
`}
|
||||
>
|
||||
<affine-edgeless-line-styles-panel
|
||||
.lineSize=${lineSize}
|
||||
.lineStyle=${lineStyle}
|
||||
></affine-edgeless-line-styles-panel>
|
||||
</editor-menu-button>
|
||||
`;
|
||||
}
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor lineStyle!: StrokeStyle;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor lineSize: LineWidth = LineWidth.Two;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'edgeless-note-border-dropdown-menu': EdgelessNoteBorderDropdownMenu;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import { NoteDisplayMode } from '@blocksuite/affine-model';
|
||||
import { ShadowlessElement } from '@blocksuite/block-std';
|
||||
import { ArrowDownSmallIcon } from '@blocksuite/icons/lit';
|
||||
import { html } from 'lit';
|
||||
import { property } from 'lit/decorators.js';
|
||||
|
||||
const DisplayModeMap = {
|
||||
[NoteDisplayMode.DocAndEdgeless]: 'Both',
|
||||
[NoteDisplayMode.EdgelessOnly]: 'Edgeless',
|
||||
[NoteDisplayMode.DocOnly]: 'Page',
|
||||
} as const satisfies Record<NoteDisplayMode, string>;
|
||||
|
||||
export class EdgelessNoteDisplayModeDropdownMenu extends ShadowlessElement {
|
||||
get mode() {
|
||||
return DisplayModeMap[this.displayMode];
|
||||
}
|
||||
|
||||
select(detail: NoteDisplayMode) {
|
||||
this.dispatchEvent(new CustomEvent('select', { detail }));
|
||||
}
|
||||
|
||||
override render() {
|
||||
const { displayMode, mode } = this;
|
||||
|
||||
return html`
|
||||
<span class="display-mode-button-label">Show in</span>
|
||||
<editor-menu-button
|
||||
.contentPadding=${'8px'}
|
||||
.button=${html`
|
||||
<editor-icon-button
|
||||
aria-label="Mode"
|
||||
.tooltip="${'Display mode'}"
|
||||
.justify="${'space-between'}"
|
||||
.labelHeight="${'20px'}"
|
||||
>
|
||||
<span class="label">${mode}</span>
|
||||
${ArrowDownSmallIcon()}
|
||||
</editor-icon-button>
|
||||
`}
|
||||
>
|
||||
<note-display-mode-panel
|
||||
.displayMode=${displayMode}
|
||||
.onSelect=${(newMode: NoteDisplayMode) => this.select(newMode)}
|
||||
>
|
||||
</note-display-mode-panel>
|
||||
</editor-menu-button>
|
||||
`;
|
||||
}
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor displayMode!: NoteDisplayMode;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'edgeless-note-display-mode-dropdown-menu': EdgelessNoteDisplayModeDropdownMenu;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,177 @@
|
||||
import { ColorScheme, NoteShadow } from '@blocksuite/affine-model';
|
||||
import {
|
||||
ArrowDownSmallIcon,
|
||||
NoteShadowDuotoneIcon,
|
||||
} from '@blocksuite/icons/lit';
|
||||
import { css, html, LitElement } from 'lit';
|
||||
import { property } from 'lit/decorators.js';
|
||||
import { repeat } from 'lit/directives/repeat.js';
|
||||
import { styleMap } from 'lit/directives/style-map.js';
|
||||
|
||||
import { NoteNoShadowIcon, NoteShadowSampleIcon } from './icons';
|
||||
|
||||
const SHADOWS = [
|
||||
{
|
||||
type: NoteShadow.None,
|
||||
styles: {
|
||||
light: '',
|
||||
dark: '',
|
||||
},
|
||||
tooltip: 'No shadow',
|
||||
},
|
||||
{
|
||||
type: NoteShadow.Box,
|
||||
styles: {
|
||||
light:
|
||||
'0px 0.2px 4.8px 0px rgba(66, 65, 73, 0.2), 0px 0px 1.6px 0px rgba(66, 65, 73, 0.2)',
|
||||
dark: '0px 0.2px 6px 0px rgba(0, 0, 0, 0.44), 0px 0px 2px 0px rgba(0, 0, 0, 0.66)',
|
||||
},
|
||||
tooltip: 'Box shadow',
|
||||
},
|
||||
{
|
||||
type: NoteShadow.Sticker,
|
||||
styles: {
|
||||
light:
|
||||
'0px 9.6px 10.4px -4px rgba(66, 65, 73, 0.07), 0px 10.4px 7.2px -8px rgba(66, 65, 73, 0.22)',
|
||||
dark: '0px 9.6px 10.4px -4px rgba(0, 0, 0, 0.66), 0px 10.4px 7.2px -8px rgba(0, 0, 0, 0.44)',
|
||||
},
|
||||
tooltip: 'Sticker shadow',
|
||||
},
|
||||
{
|
||||
type: NoteShadow.Paper,
|
||||
styles: {
|
||||
light:
|
||||
'0px 0px 0px 4px rgba(255, 255, 255, 1), 0px 1.2px 2.4px 4.8px rgba(66, 65, 73, 0.16)',
|
||||
dark: '0px 1.2px 2.4px 4.8px rgba(0, 0, 0, 0.36), 0px 0px 0px 3.4px rgba(75, 75, 75, 1)',
|
||||
},
|
||||
tooltip: 'Paper shadow',
|
||||
},
|
||||
{
|
||||
type: NoteShadow.Float,
|
||||
styles: {
|
||||
light:
|
||||
'0px 5.2px 12px 0px rgba(66, 65, 73, 0.13), 0px 0px 0.4px 1px rgba(0, 0, 0, 0.06)',
|
||||
dark: '0px 5.2px 12px 0px rgba(0, 0, 0, 0.66), 0px 0px 0.4px 1px rgba(0, 0, 0, 0.44)',
|
||||
},
|
||||
tooltip: 'Floation shadow',
|
||||
},
|
||||
{
|
||||
type: NoteShadow.Film,
|
||||
styles: {
|
||||
light:
|
||||
'0px 0px 0px 1.4px rgba(0, 0, 0, 1), 2.4px 2.4px 0px 1px rgba(0, 0, 0, 1)',
|
||||
dark: '0px 0px 0px 1.4px rgba(178, 178, 178, 1), 2.4px 2.4px 0px 1px rgba(178, 178, 178, 1)',
|
||||
},
|
||||
tooltip: 'Film shadow',
|
||||
},
|
||||
];
|
||||
|
||||
export class EdgelessNoteShadowDropdownMenu extends LitElement {
|
||||
static override styles = css`
|
||||
:host {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-icon svg rect:first-of-type {
|
||||
fill: var(--background);
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
background-color: var(--affine-hover-color);
|
||||
}
|
||||
|
||||
.item[data-selected] {
|
||||
border: 1px solid var(--affine-brand-color);
|
||||
}
|
||||
`;
|
||||
|
||||
select(value: NoteShadow) {
|
||||
this.dispatchEvent(new CustomEvent('select', { detail: value }));
|
||||
}
|
||||
|
||||
override render() {
|
||||
const { value, background, theme } = this;
|
||||
const isDark = theme === ColorScheme.Dark;
|
||||
|
||||
return html`
|
||||
<editor-menu-button
|
||||
.contentPadding="${'8px'}"
|
||||
.button=${html`
|
||||
<editor-icon-button
|
||||
aria-label="Shadow style"
|
||||
.tooltip="${'Shadow style'}"
|
||||
>
|
||||
${NoteShadowDuotoneIcon()} ${ArrowDownSmallIcon()}
|
||||
</editor-icon-button>
|
||||
`}
|
||||
>
|
||||
<div
|
||||
data-orientation="horizontal"
|
||||
style=${styleMap({
|
||||
'--background': background.startsWith('--')
|
||||
? `var(${background})`
|
||||
: background,
|
||||
})}
|
||||
>
|
||||
${repeat(
|
||||
SHADOWS,
|
||||
shadow => shadow.type,
|
||||
({ type, tooltip, styles: { dark, light } }, index) =>
|
||||
html`<div
|
||||
class="item"
|
||||
?data-selected="${value === type}"
|
||||
@click=${() => this.select(type)}
|
||||
>
|
||||
<editor-icon-button
|
||||
class="item-icon"
|
||||
data-testid="${type.replace('--', '')}"
|
||||
.tooltip=${tooltip}
|
||||
.tipPosition="${'bottom'}"
|
||||
.iconContainerPadding=${0}
|
||||
.hover=${false}
|
||||
style=${styleMap({
|
||||
boxShadow: `${isDark ? dark : light}`,
|
||||
})}
|
||||
>
|
||||
${index === 0 ? NoteNoShadowIcon : NoteShadowSampleIcon}
|
||||
</editor-icon-button>
|
||||
</div>`
|
||||
)}
|
||||
</div>
|
||||
</editor-menu-button>
|
||||
`;
|
||||
}
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor background!: string;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor theme!: ColorScheme;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor value!: NoteShadow;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'edgeless-note-shadow-dropdown-menu': EdgelessNoteShadowDropdownMenu;
|
||||
}
|
||||
}
|
||||
84
blocksuite/affine/blocks/block-note/src/components/icons.ts
Normal file
84
blocksuite/affine/blocks/block-note/src/components/icons.ts
Normal file
@@ -0,0 +1,84 @@
|
||||
import { html } from 'lit';
|
||||
|
||||
export const NoteNoShadowIcon = html`
|
||||
<svg
|
||||
width="60"
|
||||
height="72"
|
||||
viewBox="0 0 60 72"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="60" height="72" />
|
||||
<rect
|
||||
x="0.5"
|
||||
y="0.5"
|
||||
width="58.0769"
|
||||
height="71"
|
||||
stroke="black"
|
||||
stroke-opacity="0.1"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M21.9576 26.8962L38.6423 43.5809C42.5269 38.9268 42.2845 31.993 37.9149 27.6235C33.5454 23.254 26.6117 23.0115 21.9576 26.8962ZM37.1193 45.1038L20.4346 28.4192C16.55 33.0732 16.7924 40.007 21.162 44.3765C25.5315 48.746 32.4652 48.9885 37.1193 45.1038ZM19.639 26.1005C25.1063 20.6332 33.9706 20.6332 39.4379 26.1005C44.9053 31.5678 44.9053 40.4322 39.4379 45.8995C33.9706 51.3668 25.1063 51.3668 19.639 45.8995C14.1716 40.4322 14.1716 31.5678 19.639 26.1005Z"
|
||||
fill="black"
|
||||
fill-opacity="0.1"
|
||||
/>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
export const NoteShadowSampleIcon = html`
|
||||
<svg
|
||||
width="60"
|
||||
height="72"
|
||||
viewBox="0 0 60 72"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="60" height="72" />
|
||||
<rect
|
||||
x="9.23071"
|
||||
y="12.0771"
|
||||
width="32.3077"
|
||||
height="4.61538"
|
||||
rx="2"
|
||||
fill="black"
|
||||
fill-opacity="0.1"
|
||||
/>
|
||||
<rect
|
||||
x="9.23071"
|
||||
y="25.8462"
|
||||
width="40.6154"
|
||||
height="2.76923"
|
||||
rx="1.38462"
|
||||
fill="black"
|
||||
fill-opacity="0.1"
|
||||
/>
|
||||
<rect
|
||||
x="9.23071"
|
||||
y="35.6152"
|
||||
width="40.6154"
|
||||
height="2.76923"
|
||||
rx="1.38462"
|
||||
fill="black"
|
||||
fill-opacity="0.1"
|
||||
/>
|
||||
<rect
|
||||
x="9.23071"
|
||||
y="45.3843"
|
||||
width="40.6154"
|
||||
height="2.76923"
|
||||
rx="1.38462"
|
||||
fill="black"
|
||||
fill-opacity="0.1"
|
||||
/>
|
||||
<rect
|
||||
x="9.23071"
|
||||
y="55.1533"
|
||||
width="13.8462"
|
||||
height="2.76923"
|
||||
rx="1.38462"
|
||||
fill="black"
|
||||
fill-opacity="0.1"
|
||||
/>
|
||||
</svg>
|
||||
`;
|
||||
@@ -0,0 +1,24 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { cssVarV2 } from '@toeverything/theme/v2';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const viewInPageNotifyFooter = style({
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
gap: '12px',
|
||||
});
|
||||
|
||||
export const viewInPageNotifyFooterButton = style({
|
||||
padding: '0px 6px',
|
||||
borderRadius: '4px',
|
||||
color: cssVarV2('text/primary'),
|
||||
|
||||
fontSize: cssVar('fontSm'),
|
||||
lineHeight: '22px',
|
||||
fontWeight: '500',
|
||||
textAlign: 'center',
|
||||
|
||||
':hover': {
|
||||
background: cssVarV2('layer/background/hoverOverlay'),
|
||||
},
|
||||
});
|
||||
599
blocksuite/affine/blocks/block-note/src/configs/toolbar.ts
Normal file
599
blocksuite/affine/blocks/block-note/src/configs/toolbar.ts
Normal file
@@ -0,0 +1,599 @@
|
||||
import {
|
||||
EdgelessCRUDExtension,
|
||||
EdgelessLegacySlotIdentifier,
|
||||
} from '@blocksuite/affine-block-surface';
|
||||
import {
|
||||
packColor,
|
||||
type PickColorEvent,
|
||||
} from '@blocksuite/affine-components/color-picker';
|
||||
import type { LineDetailType } from '@blocksuite/affine-components/edgeless-line-styles-panel';
|
||||
import {
|
||||
DefaultTheme,
|
||||
NoteBlockModel,
|
||||
NoteDisplayMode,
|
||||
type NoteShadow,
|
||||
resolveColor,
|
||||
} from '@blocksuite/affine-model';
|
||||
import {
|
||||
FeatureFlagService,
|
||||
NotificationProvider,
|
||||
SidebarExtensionIdentifier,
|
||||
type ToolbarAction,
|
||||
type ToolbarContext,
|
||||
type ToolbarModuleConfig,
|
||||
ToolbarModuleExtension,
|
||||
} from '@blocksuite/affine-shared/services';
|
||||
import { getMostCommonResolvedValue } from '@blocksuite/affine-shared/utils';
|
||||
import {
|
||||
BlockFlavourIdentifier,
|
||||
EditorLifeCycleExtension,
|
||||
} from '@blocksuite/block-std';
|
||||
import { Bound } from '@blocksuite/global/gfx';
|
||||
import {
|
||||
AutoHeightIcon,
|
||||
CornerIcon,
|
||||
CustomizedHeightIcon,
|
||||
LinkedPageIcon,
|
||||
ScissorsIcon,
|
||||
} from '@blocksuite/icons/lit';
|
||||
import type { ExtensionType } from '@blocksuite/store';
|
||||
import { computed } from '@preact/signals-core';
|
||||
import { html } from 'lit';
|
||||
import { keyed } from 'lit/directives/keyed.js';
|
||||
|
||||
import { changeNoteDisplayMode } from '../commands';
|
||||
import * as styles from '../components/view-in-page-notify.css';
|
||||
import { NoteConfigExtension } from '../config';
|
||||
|
||||
const trackBaseProps = {
|
||||
category: 'note',
|
||||
};
|
||||
|
||||
const CORNER_LIST = [
|
||||
{ key: 'None', value: 0 },
|
||||
{ key: 'Small', value: 8 },
|
||||
{ key: 'Medium', value: 16 },
|
||||
{ key: 'Large', value: 24 },
|
||||
{ key: 'Huge', value: 32 },
|
||||
] as const;
|
||||
|
||||
const builtinSurfaceToolbarConfig = {
|
||||
actions: [
|
||||
{
|
||||
id: 'a.show-in',
|
||||
when(ctx) {
|
||||
return (
|
||||
ctx.getSurfaceModelsByType(NoteBlockModel).length === 1 &&
|
||||
ctx.std
|
||||
.get(FeatureFlagService)
|
||||
.getFlag('enable_advanced_block_visibility')
|
||||
);
|
||||
},
|
||||
content(ctx) {
|
||||
const models = ctx.getSurfaceModelsByType(NoteBlockModel);
|
||||
if (!models.length) return null;
|
||||
|
||||
const firstModel = models[0];
|
||||
const { displayMode } = firstModel.props;
|
||||
const onSelect = (e: CustomEvent<NoteDisplayMode>) => {
|
||||
e.stopPropagation();
|
||||
|
||||
const newMode = e.detail;
|
||||
setDisplayMode(ctx, firstModel, newMode);
|
||||
};
|
||||
|
||||
return html`
|
||||
<edgeless-note-display-mode-dropdown-menu
|
||||
@select=${onSelect}
|
||||
.displayMode="${displayMode}"
|
||||
>
|
||||
</edgeless-note-display-mode-dropdown-menu>
|
||||
`;
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'b.display-in-page',
|
||||
when(ctx) {
|
||||
const elements = ctx.getSurfaceModelsByType(NoteBlockModel);
|
||||
return (
|
||||
elements.length === 1 &&
|
||||
!elements[0].isPageBlock() &&
|
||||
!ctx.std
|
||||
.get(FeatureFlagService)
|
||||
.getFlag('enable_advanced_block_visibility')
|
||||
);
|
||||
},
|
||||
generate(ctx) {
|
||||
const models = ctx.getSurfaceModelsByType(NoteBlockModel);
|
||||
if (!models.length) return null;
|
||||
|
||||
const firstModel = models[0];
|
||||
const shouldShowTooltip$ = computed(
|
||||
() =>
|
||||
firstModel.props.displayMode$.value ===
|
||||
NoteDisplayMode.DocAndEdgeless
|
||||
);
|
||||
const label$ = computed(() =>
|
||||
firstModel.props.displayMode$.value === NoteDisplayMode.EdgelessOnly
|
||||
? 'Display In Page'
|
||||
: 'Displayed In Page'
|
||||
);
|
||||
const onSelect = () => {
|
||||
const newMode =
|
||||
firstModel.props.displayMode === NoteDisplayMode.EdgelessOnly
|
||||
? NoteDisplayMode.DocAndEdgeless
|
||||
: NoteDisplayMode.EdgelessOnly;
|
||||
setDisplayMode(ctx, firstModel, newMode);
|
||||
};
|
||||
|
||||
return {
|
||||
content: html`<editor-icon-button
|
||||
aria-label="${label$.value}"
|
||||
.showTooltip="${shouldShowTooltip$.value}"
|
||||
.tooltip="${'This note is part of Page Mode. Click to remove it from the page.'}"
|
||||
data-testid="display-in-page"
|
||||
@click=${() => onSelect()}
|
||||
>
|
||||
${LinkedPageIcon()}
|
||||
<span class="label">${label$.value}</span>
|
||||
</editor-icon-button>`,
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'c.color-picker',
|
||||
when(ctx) {
|
||||
const elements = ctx.getSurfaceModelsByType(NoteBlockModel);
|
||||
return (
|
||||
elements.length > 0 &&
|
||||
elements[0].props.displayMode !== NoteDisplayMode.DocOnly
|
||||
);
|
||||
},
|
||||
content(ctx) {
|
||||
const models = ctx.getSurfaceModelsByType(NoteBlockModel);
|
||||
if (!models.length) return null;
|
||||
|
||||
const enableCustomColor = ctx.std
|
||||
.get(FeatureFlagService)
|
||||
.getFlag('enable_color_picker');
|
||||
const theme = ctx.themeProvider.edgelessTheme;
|
||||
|
||||
const firstModel = models[0];
|
||||
const background =
|
||||
getMostCommonResolvedValue(
|
||||
models.map(model => model.props),
|
||||
'background',
|
||||
background => resolveColor(background, theme)
|
||||
) ?? resolveColor(DefaultTheme.noteBackgrounColor, theme);
|
||||
const onPick = (e: PickColorEvent) => {
|
||||
const field = 'background';
|
||||
|
||||
if (e.type === 'pick') {
|
||||
const color = e.detail.value;
|
||||
for (const model of models) {
|
||||
const props = packColor(field, color);
|
||||
ctx.std.get(EdgelessCRUDExtension).updateElement(model.id, props);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
for (const model of models) {
|
||||
model[e.type === 'start' ? 'stash' : 'pop'](field);
|
||||
}
|
||||
};
|
||||
|
||||
return html`
|
||||
<edgeless-color-picker-button
|
||||
class="background"
|
||||
.label="${'Background'}"
|
||||
.pick=${onPick}
|
||||
.color=${background}
|
||||
.colorPanelClass="${'small'}"
|
||||
.theme=${theme}
|
||||
.palettes=${DefaultTheme.NoteBackgroundColorPalettes}
|
||||
.originalColor=${firstModel.props.background}
|
||||
.enableCustomColor=${enableCustomColor}
|
||||
>
|
||||
</edgeless-color-picker-button>
|
||||
`;
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'd.style',
|
||||
when(ctx) {
|
||||
const elements = ctx.getSurfaceModelsByType(NoteBlockModel);
|
||||
return (
|
||||
elements.length > 0 &&
|
||||
elements[0].props.displayMode !== NoteDisplayMode.DocOnly
|
||||
);
|
||||
},
|
||||
actions: [
|
||||
{
|
||||
id: 'a.shadow-style',
|
||||
content(ctx) {
|
||||
const models = ctx.getSurfaceModelsByType(NoteBlockModel);
|
||||
if (!models.length) return null;
|
||||
|
||||
const theme = ctx.themeProvider.edgelessTheme;
|
||||
|
||||
const firstModel = models[0];
|
||||
const { shadowType } = firstModel.props.edgeless.style;
|
||||
const background =
|
||||
getMostCommonResolvedValue(
|
||||
models.map(model => model.props),
|
||||
'background',
|
||||
background => resolveColor(background, theme)
|
||||
) ?? resolveColor(DefaultTheme.noteBackgrounColor, theme);
|
||||
const onSelect = (e: CustomEvent<NoteShadow>) => {
|
||||
e.stopPropagation();
|
||||
|
||||
const shadowType = e.detail;
|
||||
for (const model of models) {
|
||||
const edgeless = model.props.edgeless;
|
||||
ctx.std.get(EdgelessCRUDExtension).updateElement(model.id, {
|
||||
edgeless: {
|
||||
...edgeless,
|
||||
style: {
|
||||
...edgeless.style,
|
||||
shadowType,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return html`${keyed(
|
||||
firstModel,
|
||||
html`<edgeless-note-shadow-dropdown-menu
|
||||
@select=${onSelect}
|
||||
.value="${shadowType}"
|
||||
.background="${background}"
|
||||
.theme="${theme}"
|
||||
></edgeless-note-shadow-dropdown-menu>`
|
||||
)}`;
|
||||
},
|
||||
} satisfies ToolbarAction,
|
||||
{
|
||||
id: 'b.border-style',
|
||||
content(ctx) {
|
||||
const models = ctx.getSurfaceModelsByType(NoteBlockModel);
|
||||
if (!models.length) return null;
|
||||
|
||||
const firstModel = models[0];
|
||||
const { borderSize, borderStyle } = firstModel.props.edgeless.style;
|
||||
const onSelect = (e: CustomEvent<LineDetailType>) => {
|
||||
e.stopPropagation();
|
||||
|
||||
const { type, value } = e.detail;
|
||||
|
||||
if (type === 'size') {
|
||||
const borderSize = value;
|
||||
for (const model of models) {
|
||||
const edgeless = model.props.edgeless;
|
||||
ctx.std.get(EdgelessCRUDExtension).updateElement(model.id, {
|
||||
edgeless: {
|
||||
...edgeless,
|
||||
style: {
|
||||
...edgeless.style,
|
||||
borderSize,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const borderStyle = value;
|
||||
for (const model of models) {
|
||||
const edgeless = model.props.edgeless;
|
||||
ctx.std.get(EdgelessCRUDExtension).updateElement(model.id, {
|
||||
edgeless: {
|
||||
...edgeless,
|
||||
style: {
|
||||
...edgeless.style,
|
||||
borderStyle,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return html`${keyed(
|
||||
firstModel,
|
||||
html`
|
||||
<edgeless-note-border-dropdown-menu
|
||||
@select=${onSelect}
|
||||
.lineSize=${borderSize}
|
||||
.lineStyle=${borderStyle}
|
||||
></edgeless-note-border-dropdown-menu>
|
||||
`
|
||||
)}`;
|
||||
},
|
||||
} satisfies ToolbarAction,
|
||||
{
|
||||
id: 'c.corners',
|
||||
label: 'Corners',
|
||||
content(ctx) {
|
||||
const models = ctx.getSurfaceModelsByType(NoteBlockModel);
|
||||
if (!models.length) return null;
|
||||
|
||||
const label = this.label;
|
||||
const firstModel = models[0];
|
||||
const borderRadius$ = computed(
|
||||
() => firstModel.props.edgeless$.value.style.borderRadius
|
||||
);
|
||||
const onSelect = (e: CustomEvent<number>) => {
|
||||
e.stopPropagation();
|
||||
|
||||
const borderRadius = e.detail;
|
||||
for (const model of models) {
|
||||
const edgeless = model.props.edgeless;
|
||||
ctx.std.get(EdgelessCRUDExtension).updateElement(model.id, {
|
||||
edgeless: {
|
||||
...edgeless,
|
||||
style: {
|
||||
...edgeless.style,
|
||||
borderRadius,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return html`${keyed(
|
||||
firstModel,
|
||||
html`<affine-size-dropdown-menu
|
||||
@select=${onSelect}
|
||||
.label="${label}"
|
||||
.icon=${CornerIcon()}
|
||||
.sizes=${CORNER_LIST}
|
||||
.size$=${borderRadius$}
|
||||
></affine-size-dropdown-menu>`
|
||||
)}`;
|
||||
},
|
||||
} satisfies ToolbarAction,
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'e.slicer',
|
||||
icon: ScissorsIcon(),
|
||||
tooltip: html`<affine-tooltip-content-with-shortcut
|
||||
data-tip="${'Cutting mode'}"
|
||||
data-shortcut="${'-'}"
|
||||
></affine-tooltip-content-with-shortcut>`,
|
||||
active: false,
|
||||
when(ctx) {
|
||||
return (
|
||||
ctx.getSurfaceModelsByType(NoteBlockModel).length === 1 &&
|
||||
ctx.std
|
||||
.get(FeatureFlagService)
|
||||
.getFlag('enable_advanced_block_visibility')
|
||||
);
|
||||
},
|
||||
run(ctx) {
|
||||
ctx.std.get(EdgelessLegacySlotIdentifier).toggleNoteSlicer.next();
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'f.auto-height',
|
||||
when(ctx) {
|
||||
const elements = ctx.getSurfaceModelsByType(NoteBlockModel);
|
||||
return (
|
||||
elements.length > 0 &&
|
||||
(!elements[0].isPageBlock() ||
|
||||
!ctx.std.getOptional(NoteConfigExtension.identifier)
|
||||
?.edgelessNoteHeader)
|
||||
);
|
||||
},
|
||||
generate(ctx) {
|
||||
const models = ctx.getSurfaceModelsByType(NoteBlockModel);
|
||||
if (!models.length) return null;
|
||||
|
||||
const firstModel = models[0];
|
||||
const { collapse } = firstModel.props.edgeless$.value;
|
||||
const options: Pick<ToolbarAction, 'tooltip' | 'icon'> = collapse
|
||||
? {
|
||||
tooltip: 'Auto height',
|
||||
icon: AutoHeightIcon(),
|
||||
}
|
||||
: {
|
||||
tooltip: 'Customized height',
|
||||
icon: CustomizedHeightIcon(),
|
||||
};
|
||||
|
||||
return {
|
||||
...options,
|
||||
run(ctx) {
|
||||
for (const model of models) {
|
||||
const edgeless = model.props.edgeless;
|
||||
|
||||
if (edgeless.collapse) {
|
||||
ctx.store.updateBlock(model, () => {
|
||||
model.props.edgeless.collapse = false;
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
if (edgeless.collapsedHeight) {
|
||||
const bounds = Bound.deserialize(model.xywh);
|
||||
bounds.h = edgeless.collapsedHeight * (edgeless.scale ?? 1);
|
||||
const xywh = bounds.serialize();
|
||||
|
||||
ctx.store.updateBlock(model, () => {
|
||||
model.xywh = xywh;
|
||||
model.props.edgeless.collapse = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'g.scale',
|
||||
content(ctx) {
|
||||
const models = ctx.getSurfaceModelsByType(NoteBlockModel);
|
||||
if (!models.length) return null;
|
||||
|
||||
const firstModel = models[0];
|
||||
const scale$ = computed(() => {
|
||||
const scale = firstModel.props.edgeless$.value.scale ?? 1;
|
||||
return Math.round(100 * scale);
|
||||
});
|
||||
const onSelect = (e: CustomEvent<number>) => {
|
||||
e.stopPropagation();
|
||||
|
||||
const scale = e.detail / 100;
|
||||
|
||||
models.forEach(model => {
|
||||
const bounds = Bound.deserialize(model.xywh);
|
||||
const oldScale = model.props.edgeless.scale ?? 1;
|
||||
const ratio = scale / oldScale;
|
||||
bounds.w *= ratio;
|
||||
bounds.h *= ratio;
|
||||
const xywh = bounds.serialize();
|
||||
|
||||
ctx.store.updateBlock(model, () => {
|
||||
model.xywh = xywh;
|
||||
model.props.edgeless.scale = scale;
|
||||
});
|
||||
});
|
||||
|
||||
ctx.track('SelectedCardScale', {
|
||||
...trackBaseProps,
|
||||
control: 'select card scale',
|
||||
});
|
||||
};
|
||||
const onToggle = (e: CustomEvent<boolean>) => {
|
||||
e.stopPropagation();
|
||||
|
||||
const opened = e.detail;
|
||||
if (!opened) return;
|
||||
|
||||
ctx.track('OpenedCardScaleSelector', {
|
||||
...trackBaseProps,
|
||||
control: 'switch card scale',
|
||||
});
|
||||
};
|
||||
const format = (value: number) => `${value}%`;
|
||||
|
||||
return html`${keyed(
|
||||
firstModel,
|
||||
html`<affine-size-dropdown-menu
|
||||
@select=${onSelect}
|
||||
@toggle=${onToggle}
|
||||
.format=${format}
|
||||
.size$=${scale$}
|
||||
></affine-size-dropdown-menu>`
|
||||
)}`;
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
when: ctx => ctx.getSurfaceModelsByType(NoteBlockModel).length > 0,
|
||||
} as const satisfies ToolbarModuleConfig;
|
||||
|
||||
function setDisplayMode(
|
||||
ctx: ToolbarContext,
|
||||
model: NoteBlockModel,
|
||||
newMode: NoteDisplayMode
|
||||
) {
|
||||
const displayMode = model.props.displayMode;
|
||||
|
||||
ctx.command.exec(changeNoteDisplayMode, {
|
||||
noteId: model.id,
|
||||
mode: newMode,
|
||||
stopCapture: true,
|
||||
});
|
||||
|
||||
// if change note to page only, should clear the selection
|
||||
if (newMode === NoteDisplayMode.DocOnly) {
|
||||
ctx.selection.clear();
|
||||
}
|
||||
|
||||
const abortController = new AbortController();
|
||||
const clear = () => {
|
||||
ctx.history.off('stack-item-added', addHandler);
|
||||
ctx.history.off('stack-item-popped', popHandler);
|
||||
disposable.unsubscribe();
|
||||
};
|
||||
const closeNotify = () => {
|
||||
abortController.abort();
|
||||
clear();
|
||||
};
|
||||
|
||||
const addHandler = ctx.history.on('stack-item-added', closeNotify);
|
||||
const popHandler = ctx.history.on('stack-item-popped', closeNotify);
|
||||
const disposable = ctx.std
|
||||
.get(EditorLifeCycleExtension)
|
||||
.slots.unmounted.subscribe(closeNotify);
|
||||
|
||||
const undo = () => {
|
||||
ctx.store.undo();
|
||||
closeNotify();
|
||||
};
|
||||
|
||||
const viewInToc = () => {
|
||||
const sidebar = ctx.std.getOptional(SidebarExtensionIdentifier);
|
||||
sidebar?.open('outline');
|
||||
closeNotify();
|
||||
};
|
||||
|
||||
const data =
|
||||
newMode === NoteDisplayMode.EdgelessOnly
|
||||
? {
|
||||
title: 'Note removed from Page Mode',
|
||||
message: 'Content removed from your page.',
|
||||
}
|
||||
: {
|
||||
title: 'Note displayed in Page Mode',
|
||||
message: 'Content added to your page.',
|
||||
};
|
||||
|
||||
const notification = ctx.std.getOptional(NotificationProvider);
|
||||
notification?.notify({
|
||||
title: data.title,
|
||||
message: `${data.message}. Find it in the TOC for quick navigation.`,
|
||||
accent: 'success',
|
||||
duration: 5 * 1000,
|
||||
footer: html`<div class=${styles.viewInPageNotifyFooter}>
|
||||
<button
|
||||
class=${styles.viewInPageNotifyFooterButton}
|
||||
@click=${undo}
|
||||
data-testid="undo-display-in-page"
|
||||
>
|
||||
Undo
|
||||
</button>
|
||||
<button
|
||||
class=${styles.viewInPageNotifyFooterButton}
|
||||
@click=${viewInToc}
|
||||
data-testid="view-in-toc"
|
||||
>
|
||||
View in Toc
|
||||
</button>
|
||||
</div>`,
|
||||
abort: abortController.signal,
|
||||
onClose: () => {
|
||||
clear();
|
||||
},
|
||||
});
|
||||
|
||||
ctx.track('NoteDisplayModeChanged', {
|
||||
...trackBaseProps,
|
||||
control: 'display mode',
|
||||
other: `from ${displayMode} to ${newMode}`,
|
||||
});
|
||||
}
|
||||
|
||||
export const createBuiltinToolbarConfigExtension = (
|
||||
flavour: string
|
||||
): ExtensionType[] => {
|
||||
const name = flavour.split(':').pop();
|
||||
|
||||
return [
|
||||
ToolbarModuleExtension({
|
||||
id: BlockFlavourIdentifier(`affine:surface:${name}`),
|
||||
config: builtinSurfaceToolbarConfig,
|
||||
}),
|
||||
];
|
||||
};
|
||||
@@ -1,5 +1,8 @@
|
||||
import { EdgelessNoteBackground } from './components/edgeless-note-background';
|
||||
import { EdgelessNoteBorderDropdownMenu } from './components/edgeless-note-border-dropdown-menu';
|
||||
import { EdgelessNoteDisplayModeDropdownMenu } from './components/edgeless-note-display-mode-dropdown-menu';
|
||||
import { EdgelessNoteMask } from './components/edgeless-note-mask';
|
||||
import { EdgelessNoteShadowDropdownMenu } from './components/edgeless-note-shadow-dropdown-menu';
|
||||
import { EdgelessPageBlockTitle } from './components/edgeless-page-block-title';
|
||||
import { NoteBlockComponent } from './note-block';
|
||||
import {
|
||||
@@ -13,4 +16,16 @@ export function effects() {
|
||||
customElements.define('edgeless-note-mask', EdgelessNoteMask);
|
||||
customElements.define('edgeless-note-background', EdgelessNoteBackground);
|
||||
customElements.define('edgeless-page-block-title', EdgelessPageBlockTitle);
|
||||
customElements.define(
|
||||
'edgeless-note-shadow-dropdown-menu',
|
||||
EdgelessNoteShadowDropdownMenu
|
||||
);
|
||||
customElements.define(
|
||||
'edgeless-note-border-dropdown-menu',
|
||||
EdgelessNoteBorderDropdownMenu
|
||||
);
|
||||
customElements.define(
|
||||
'edgeless-note-display-mode-dropdown-menu',
|
||||
EdgelessNoteDisplayModeDropdownMenu
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,9 +6,10 @@ import { literal } from 'lit/static-html.js';
|
||||
import {
|
||||
DocNoteBlockAdapterExtensions,
|
||||
EdgelessNoteBlockAdapterExtensions,
|
||||
} from './adapters/index.js';
|
||||
import { NoteSlashMenuConfigExtension } from './configs/slash-menu.js';
|
||||
import { NoteBlockService } from './note-service.js';
|
||||
} from './adapters/index';
|
||||
import { NoteSlashMenuConfigExtension } from './configs/slash-menu';
|
||||
import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
|
||||
import { NoteBlockService } from './note-service';
|
||||
|
||||
const flavour = NoteBlockSchema.model.flavour;
|
||||
|
||||
@@ -26,4 +27,5 @@ export const EdgelessNoteBlockSpec: ExtensionType[] = [
|
||||
BlockViewExtension(flavour, literal`affine-edgeless-note`),
|
||||
EdgelessNoteBlockAdapterExtensions,
|
||||
NoteSlashMenuConfigExtension,
|
||||
createBuiltinToolbarConfigExtension(flavour),
|
||||
].flat();
|
||||
|
||||
Reference in New Issue
Block a user