Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-04 08:38:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): store real color values in edgeless (#9254)

Browse Source 
### What's Changed!

* adds theme type: `ThemeSchema`
* adds default theme: `DefaultTheme`
* stores real color values
This commit is contained in:
fundon
2024-12-30 03:36:35 +00:00
parent a5641ae608
commit b9f2650369
287 changed files with 2219 additions and 1520 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
blocksuite/affine/block-frame/src/frame-block.ts
View File

@@ -1,4 +1,4 @@
import type { FrameBlockModel } from '@blocksuite/affine-model';
import { DefaultTheme, type FrameBlockModel } from '@blocksuite/affine-model';
import { ThemeProvider } from '@blocksuite/affine-shared/services';
import { GfxBlockComponent } from '@blocksuite/block-std';
import { Bound } from '@blocksuite/global/utils';
@@ -56,7 +56,7 @@ export class FrameBlockComponent extends GfxBlockComponent<FrameBlockModel> {
const { model, showBorder, std } = this;
const backgroundColor = std
.get(ThemeProvider)
.generateColorProperty(model.background, '--affine-platte-transparent');
.generateColorProperty(model.background, DefaultTheme.transparent);
const _isNavigator =
this.gfx.tool.currentToolName$.value === 'frameNavigator';
const frameIndex = this.gfx.layer.getZIndex(model);

18
blocksuite/affine/block-note/src/note-edgeless-block.ts
View File

@@ -2,7 +2,7 @@ import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
import { MoreIndicatorIcon } from '@blocksuite/affine-components/icons';
import type { NoteBlockModel } from '@blocksuite/affine-model';
import {
DEFAULT_NOTE_BACKGROUND_COLOR,
DefaultTheme,
NoteDisplayMode,
StrokeStyle,
} from '@blocksuite/affine-model';
@@ -24,6 +24,7 @@ import {
WithDisposable,
} from '@blocksuite/global/utils';
import type { BlockModel } from '@blocksuite/store';
import { computed } from '@preact/signals-core';
import { css, html, nothing } from 'lit';
import { property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
@@ -141,6 +142,16 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
}
`;
private readonly _backgroundColor$ = computed(() => {
const themeProvider = this.std.get(ThemeProvider);
const theme = themeProvider.theme$.value;
return themeProvider.generateColorProperty(
this.model.background$.value,
DefaultTheme.noteBackgrounColor,
theme
);
});
private get _isShowCollapsedContent() {
return this.model.edgeless.collapse && (this._isResizing || this._isHover);
}
@@ -406,9 +417,6 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
};
const extra = this._editing ? ACTIVE_NOTE_EXTRA_PADDING : 0;
const backgroundColor = this.std
.get(ThemeProvider)
.generateColorProperty(model.background, DEFAULT_NOTE_BACKGROUND_COLOR);
const backgroundStyle = {
position: 'absolute',
@@ -420,7 +428,7 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
transition: this._editing
? 'left 0.3s, top 0.3s, width 0.3s, height 0.3s'
: 'none',
backgroundColor,
backgroundColor: this._backgroundColor$.value,
border: `${borderSize}px ${
borderStyle === StrokeStyle.Dash ? 'dashed' : borderStyle
} var(--affine-black-10)`,

11
blocksuite/affine/block-surface/src/renderer/canvas-renderer.ts
View File

@@ -21,9 +21,9 @@ import type { ElementRenderer } from './elements/index.js';
import type { Overlay } from './overlay.js';
type EnvProvider = {
generateColorProperty: (color: Color, fallback: string) => string;
generateColorProperty: (color: Color, fallback?: Color) => string;
getColorScheme: () => ColorScheme;
getColorValue: (color: Color, fallback?: string, real?: boolean) => string;
getColorValue: (color: Color, fallback?: Color, real?: boolean) => string;
getPropertyValue: (property: string) => string;
selectedElements?: () => string[];
};
@@ -368,10 +368,9 @@ export class CanvasRenderer {
this._disposables.dispose();
}
generateColorProperty(color: Color, fallback: string) {
generateColorProperty(color: Color, fallback?: Color) {
return (
this.provider.generateColorProperty?.(color, fallback) ??
(fallback.startsWith('--') ? `var(${fallback})` : fallback)
this.provider.generateColorProperty?.(color, fallback) ?? 'transparent'
);
}
@@ -409,7 +408,7 @@ export class CanvasRenderer {
return this.provider.getColorScheme?.() ?? ColorScheme.Light;
}
getColorValue(color: Color, fallback?: string, real?: boolean) {
getColorValue(color: Color, fallback?: Color, real?: boolean) {
return (
this.provider.getColorValue?.(color, fallback, real) ?? 'transparent'
);

4
blocksuite/affine/block-surface/src/renderer/elements/brush/index.ts
View File

@@ -1,4 +1,4 @@
import type { BrushElementModel } from '@blocksuite/affine-model';
import { type BrushElementModel, DefaultTheme } from '@blocksuite/affine-model';
import type { CanvasRenderer } from '../../canvas-renderer.js';
@@ -17,7 +17,7 @@ export function brush(
matrix.translateSelf(cx, cy).rotateSelf(rotate).translateSelf(-cx, -cy)
);
const color = renderer.getColorValue(model.color, '#000000', true);
const color = renderer.getColorValue(model.color, DefaultTheme.black, true);
ctx.fillStyle = color;

9
blocksuite/affine/block-surface/src/renderer/elements/connector/index.ts
View File

@@ -1,6 +1,7 @@
import {
type ConnectorElementModel,
ConnectorMode,
DefaultTheme,
type LocalConnectorElementModel,
type PointStyle,
} from '@blocksuite/affine-model';
@@ -75,7 +76,11 @@ export function connector(
ctx.clip(path, 'evenodd');
}
const strokeColor = renderer.getColorValue(model.stroke, '#000000', true);
const strokeColor = renderer.getColorValue(
model.stroke,
DefaultTheme.connectorColor,
true
);
renderPoints(
model,
@@ -249,7 +254,7 @@ function renderLabel(
ctx.font = font;
ctx.textAlign = textAlign;
ctx.textBaseline = 'middle';
ctx.fillStyle = renderer.getColorValue(color, '#000000', true);
ctx.fillStyle = renderer.getColorValue(color, DefaultTheme.black, true);
let textMaxWidth = textAlign === 'center' ? 0 : getMaxTextWidth(lines, font);
if (hasMaxWidth && maxWidth > 0) {

13
blocksuite/affine/block-surface/src/renderer/elements/shape/index.ts
View File

@@ -3,12 +3,7 @@ import type {
ShapeElementModel,
ShapeType,
} from '@blocksuite/affine-model';
import {
DEFAULT_SHAPE_FILL_COLOR,
DEFAULT_SHAPE_STROKE_COLOR,
DEFAULT_SHAPE_TEXT_COLOR,
TextAlign,
} from '@blocksuite/affine-model';
import { DefaultTheme, TextAlign } from '@blocksuite/affine-model';
import type { IBound } from '@blocksuite/global/utils';
import { Bound } from '@blocksuite/global/utils';
import { deltaInsertsToChunks } from '@blocksuite/inline';
@@ -55,17 +50,17 @@ export function shape(
) {
const color = renderer.getColorValue(
model.color,
DEFAULT_SHAPE_TEXT_COLOR,
DefaultTheme.shapeTextColor,
true
);
const fillColor = renderer.getColorValue(
model.fillColor,
DEFAULT_SHAPE_FILL_COLOR,
DefaultTheme.shapeFillColor,
true
);
const strokeColor = renderer.getColorValue(
model.strokeColor,
DEFAULT_SHAPE_STROKE_COLOR,
DefaultTheme.shapeStrokeColor,
true
);
const colors = { color, fillColor, strokeColor };

8
blocksuite/affine/block-surface/src/renderer/elements/text/index.ts
View File

@@ -1,4 +1,4 @@
import type { TextElementModel } from '@blocksuite/affine-model';
import { DefaultTheme, type TextElementModel } from '@blocksuite/affine-model';
import { deltaInsertsToChunks } from '@blocksuite/inline';
import type { CanvasRenderer } from '../../canvas-renderer.js';
@@ -39,7 +39,11 @@ export function text(
const horizontalOffset =
textAlign === 'center' ? w / 2 : textAlign === 'right' ? w : 0;
const color = renderer.getColorValue(model.color, '#000000', true);
const color = renderer.getColorValue(
model.color,
DefaultTheme.textColor,
true
);
ctx.font = font;
ctx.fillStyle = color;

4
blocksuite/affine/block-surface/src/surface-block.ts
View File

@@ -160,13 +160,13 @@ export class SurfaceBlockComponent extends BlockComponent<
gridManager: gfx.grid,
enableStackingCanvas: true,
provider: {
generateColorProperty: (color: Color, fallback: string) =>
generateColorProperty: (color: Color, fallback?: Color) =>
themeService.generateColorProperty(
color,
fallback,
themeService.edgelessTheme
),
getColorValue: (color: Color, fallback?: string, real?: boolean) =>
getColorValue: (color: Color, fallback?: Color, real?: boolean) =>
themeService.getColorValue(
color,
fallback,

1
blocksuite/affine/components/src/toolbar/styles.ts
View File

@@ -8,6 +8,7 @@ import { unsafeCSS } from 'lit';
const toolbarColorKeys: Array<keyof AffineCssVariables> = [
'--affine-background-overlay-panel-color',
'--affine-v2-layer-background-overlayPanel' as never,
'--affine-v2-layer-insideBorder-blackBorder' as never,
'--affine-background-error-color',
'--affine-background-primary-color',
'--affine-background-tertiary-color',

2
blocksuite/affine/model/src/blocks/frame/frame-model.ts
View File

@@ -17,7 +17,7 @@ import {
import { Bound } from '@blocksuite/global/utils';
import { BlockModel, defineBlockSchema, type Text } from '@blocksuite/store';
import type { Color } from '../../consts/index.js';
import type { Color } from '../../themes/index.js';
export type FrameBlockProps = {
title: Text;

5
blocksuite/affine/model/src/blocks/note/note-model.ts
View File

@@ -7,8 +7,6 @@ import { Bound } from '@blocksuite/global/utils';
import { BlockModel, defineBlockSchema } from '@blocksuite/store';
import {
type Color,
DEFAULT_NOTE_BACKGROUND_COLOR,
DEFAULT_NOTE_BORDER_SIZE,
DEFAULT_NOTE_BORDER_STYLE,
DEFAULT_NOTE_CORNER,
@@ -18,12 +16,13 @@ import {
NoteDisplayMode,
type StrokeStyle,
} from '../../consts/index.js';
import { type Color, DefaultTheme } from '../../themes/index.js';
export const NoteBlockSchema = defineBlockSchema({
flavour: 'affine:note',
props: (): NoteProps => ({
xywh: `[0,0,${DEFAULT_NOTE_WIDTH},${DEFAULT_NOTE_HEIGHT}]`,
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
lockedBySelf: false,
hidden: false,

3
blocksuite/affine/model/src/consts/brush.ts
View File

@@ -1,3 +0,0 @@
import { StrokeColor } from './color.js';
export const DEFAULT_BRUSH_COLOR = StrokeColor.Blue;

97
blocksuite/affine/model/src/consts/color.ts
View File

@@ -1,97 +0,0 @@
import { themeToVar } from '@toeverything/theme/v2';
import { z } from 'zod';
import { createEnumMap } from '../utils/enum.js';
export const Transparent = 'transparent';
export const White = themeToVar('edgeless/palette/white');
export const Black = themeToVar('edgeless/palette/black');
export const Light = {
Red: themeToVar('edgeless/palette/light/redLight'),
Orange: themeToVar('edgeless/palette/light/orangeLight'),
Yellow: themeToVar('edgeless/palette/light/yellowLight'),
Green: themeToVar('edgeless/palette/light/greenLight'),
Blue: themeToVar('edgeless/palette/light/blueLight'),
Purple: themeToVar('edgeless/palette/light/purpleLight'),
Magenta: themeToVar('edgeless/palette/light/magentaLight'),
Grey: themeToVar('edgeless/palette/light/greyLight'),
} as const;
export const LIGHT_PALETTES = [
Light.Red,
Light.Orange,
Light.Yellow,
Light.Green,
Light.Blue,
Light.Purple,
Light.Magenta,
Light.Grey,
] as const;
export const Medium = {
Red: themeToVar('edgeless/palette/medium/redMedium'),
Orange: themeToVar('edgeless/palette/medium/orangeMedium'),
Yellow: themeToVar('edgeless/palette/medium/yellowMedium'),
Green: themeToVar('edgeless/palette/medium/greenMedium'),
Blue: themeToVar('edgeless/palette/medium/blueMedium'),
Purple: themeToVar('edgeless/palette/medium/purpleMedium'),
Magenta: themeToVar('edgeless/palette/medium/magentaMedium'),
Grey: themeToVar('edgeless/palette/medium/greyMedium'),
} as const;
export const MEDIUM_PALETTES = [
Medium.Red,
Medium.Orange,
Medium.Yellow,
Medium.Green,
Medium.Blue,
Medium.Purple,
Medium.Magenta,
Medium.Grey,
] as const;
export const Heavy = {
Red: themeToVar('edgeless/palette/heavy/red'),
Orange: themeToVar('edgeless/palette/heavy/orange'),
Yellow: themeToVar('edgeless/palette/heavy/yellow'),
Green: themeToVar('edgeless/palette/heavy/green'),
Blue: themeToVar('edgeless/palette/heavy/blue'),
Purple: themeToVar('edgeless/palette/heavy/purple'),
Magenta: themeToVar('edgeless/palette/heavy/magenta'),
} as const;
export const HEAVY_PALETTES = [
Heavy.Red,
Heavy.Orange,
Heavy.Yellow,
Heavy.Green,
Heavy.Blue,
Heavy.Purple,
Heavy.Magenta,
] as const;
export const PALETTES = [
// Light
...LIGHT_PALETTES,
Transparent,
// Medium
...MEDIUM_PALETTES,
White,
// Heavy
...HEAVY_PALETTES,
Black,
] as const;
export const PaletteEnum = z.enum(PALETTES);
export const StrokeColor = { Black, White, ...Medium } as const;
export const StrokeColorMap = createEnumMap(StrokeColor);
export const STROKE_COLORS = [...MEDIUM_PALETTES, Black, White] as const;

5
blocksuite/affine/model/src/consts/connector.ts
View File

@@ -1,5 +1,4 @@
import { createEnumMap } from '../utils/enum.js';
import { StrokeColor } from './color.js';
export enum ConnectorEndpoint {
Front = 'Front',
@@ -16,10 +15,6 @@ export enum PointStyle {
export const PointStyleMap = createEnumMap(PointStyle);
export const DEFAULT_CONNECTOR_COLOR = StrokeColor.Grey;
export const DEFAULT_CONNECTOR_TEXT_COLOR = StrokeColor.Black;
export const DEFAULT_FRONT_END_POINT_STYLE = PointStyle.None;
export const DEFAULT_REAR_END_POINT_STYLE = PointStyle.Arrow;

3
blocksuite/affine/model/src/consts/frame.ts
View File

@@ -1,3 +0,0 @@
import { Light } from './color.js';
export const FrameBackgroundColor = Light;

3
blocksuite/affine/model/src/consts/index.ts
View File

@@ -1,8 +1,5 @@
export * from './brush.js';
export * from './color.js';
export * from './connector.js';
export * from './doc.js';
export * from './frame.js';
export * from './image.js';
export * from './line.js';
export * from './mindmap.js';

11
blocksuite/affine/model/src/consts/line.ts
View File

@@ -3,14 +3,14 @@ import { z } from 'zod';
import { createEnumMap } from '../utils/enum.js';
export enum LineWidth {
Eight = 8,
Two = 2,
// Thin
Four = 4,
Six = 6,
Eight = 8,
// Thick
Ten = 10,
Twelve = 12,
Two = 2,
}
export const LINE_WIDTHS = [
@@ -23,7 +23,7 @@ export const LINE_WIDTHS = [
];
/**
* Use `StrokeColor` instead.
* Use `DefaultTheme.StrokeColorMap` instead.
*
* @deprecated
*/
@@ -43,6 +43,11 @@ export enum LineColor {
export const LineColorMap = createEnumMap(LineColor);
/**
* Use `DefaultTheme.StrokeColorPalettes` instead.
*
* @deprecated
*/
export const LINE_COLORS = [
LineColor.Yellow,
LineColor.Orange,

35
blocksuite/affine/model/src/consts/note.ts
View File

@@ -1,4 +1,3 @@
import { themeToVar } from '@toeverything/theme/v2';
import { z } from 'zod';
import { createEnumMap } from '../utils/enum.js';
@@ -9,40 +8,6 @@ export const NOTE_MIN_HEIGHT = 92;
export const DEFAULT_NOTE_WIDTH = NOTE_MIN_WIDTH;
export const DEFAULT_NOTE_HEIGHT = NOTE_MIN_HEIGHT;
export const NoteBackgroundColor = {
Yellow: themeToVar('edgeless/note/yellow'),
Orange: themeToVar('edgeless/note/orange'),
Red: themeToVar('edgeless/note/red'),
Magenta: themeToVar('edgeless/note/magenta'),
Purple: themeToVar('edgeless/note/purple'),
Blue: themeToVar('edgeless/note/blue'),
Teal: themeToVar('edgeless/note/teal'),
Green: themeToVar('edgeless/note/green'),
Black: themeToVar('edgeless/note/black'),
Grey: themeToVar('edgeless/note/grey'),
White: themeToVar('edgeless/note/white'),
} as const;
export const NoteBackgroundColorMap = createEnumMap(NoteBackgroundColor);
export const NOTE_BACKGROUND_PALETTES = [
NoteBackgroundColor.Yellow,
NoteBackgroundColor.Orange,
NoteBackgroundColor.Red,
NoteBackgroundColor.Magenta,
NoteBackgroundColor.Purple,
NoteBackgroundColor.Blue,
NoteBackgroundColor.Teal,
NoteBackgroundColor.Green,
NoteBackgroundColor.Black,
NoteBackgroundColor.Grey,
NoteBackgroundColor.White,
] as const;
export const NoteBackgroundPaletteEnum = z.enum(NOTE_BACKGROUND_PALETTES);
export const DEFAULT_NOTE_BACKGROUND_COLOR = NoteBackgroundColor.White;
export enum NoteShadow {
Box = '--affine-note-shadow-box',
Film = '--affine-note-shadow-film',

12
blocksuite/affine/model/src/consts/shape.ts
View File

@@ -1,5 +1,3 @@
import { Black, Light, LIGHT_PALETTES, StrokeColor, White } from './color.js';
export const DEFAULT_ROUGHNESS = 1.4;
// TODO: need to check the default central area ratio
@@ -46,13 +44,3 @@ export enum ShapeStyle {
General = 'General',
Scribbled = 'Scribbled',
}
export const ShapeFillColor = { Black, White, ...Light } as const;
export const SHAPE_FILL_COLORS = [...LIGHT_PALETTES, Black, White];
export const DEFAULT_SHAPE_FILL_COLOR = Light.Yellow;
export const DEFAULT_SHAPE_STROKE_COLOR = StrokeColor.Yellow;
export const DEFAULT_SHAPE_TEXT_COLOR = StrokeColor.Black;

11
blocksuite/affine/model/src/consts/text.ts
View File

@@ -1,12 +1,5 @@
import type { Color } from '../themes/color.js';
import { createEnumMap } from '../utils/enum.js';
import { StrokeColor } from './color.js';
export enum ColorScheme {
Dark = 'dark',
Light = 'light',
}
export type Color = string | Partial<Record<ColorScheme | 'normal', string>>;
export enum TextAlign {
Center = 'center',
@@ -66,5 +59,3 @@ export enum TextResizing {
AUTO_WIDTH_AND_HEIGHT,
AUTO_HEIGHT,
}
export const DEFAULT_TEXT_COLOR = StrokeColor.Blue;

2
blocksuite/affine/model/src/elements/brush/brush.ts
View File

@@ -28,7 +28,7 @@ import {
Vec,
} from '@blocksuite/global/utils';
import type { Color } from '../../consts/index.js';
import type { Color } from '../../themes/index.js';
export type BrushProps = BaseElementProps & {
/**

2
blocksuite/affine/model/src/elements/connector/connector.ts
View File

@@ -26,7 +26,6 @@ import {
import { DocCollection, type Y } from '@blocksuite/store';
import {
type Color,
CONNECTOR_LABEL_MAX_WIDTH,
ConnectorLabelOffsetAnchor,
ConnectorMode,
@@ -39,6 +38,7 @@ import {
TextAlign,
type TextStyleProps,
} from '../../consts/index.js';
import type { Color } from '../../themes/index.ts';
export type SerializedConnection = {
id?: string;

2
blocksuite/affine/model/src/elements/connector/local-connector.ts
View File

@@ -2,12 +2,12 @@ import { GfxLocalElementModel } from '@blocksuite/block-std/gfx';
import type { PointLocation } from '@blocksuite/global/utils';
import {
type Color,
ConnectorMode,
DEFAULT_ROUGHNESS,
type PointStyle,
StrokeStyle,
} from '../../consts/index.js';
import type { Color } from '../../themes/index.ts';
import type { Connection } from './connector.js';
export class LocalConnectorElementModel extends GfxLocalElementModel {

111
blocksuite/affine/model/src/elements/mindmap/style.ts
View File

@@ -1,11 +1,10 @@
import { isEqual, last } from '@blocksuite/global/utils';
import { ConnectorMode } from '../../consts/connector.js';
import { LineColor } from '../../consts/line.js';
import { MindmapStyle } from '../../consts/mindmap.js';
import { StrokeStyle } from '../../consts/note.js';
import { ShapeFillColor } from '../../consts/shape.js';
import { FontFamily, FontWeight, TextResizing } from '../../consts/text.js';
import { type Color, DefaultTheme } from '../../themes/index.js';
import type { MindmapNode } from './mindmap.js';
export type CollapseButton = {
@@ -14,9 +13,9 @@ export type CollapseButton = {
radius: number;
filled: boolean;
fillColor: string;
fillColor: Color;
strokeColor: string;
strokeColor: Color;
strokeWidth: number;
};
@@ -25,24 +24,24 @@ export type ExpandButton = CollapseButton & {
fontSize: number;
fontWeight: FontWeight;
color: string;
color: Color;
};
export type NodeStyle = {
radius: number;
strokeWidth: number;
strokeColor: string;
strokeColor: Color;
textResizing: TextResizing;
fontSize: number;
fontFamily: string;
fontWeight: FontWeight;
color: string;
color: Color;
filled: boolean;
fillColor: string;
fillColor: Color;
padding: [number, number];
@@ -56,7 +55,7 @@ export type NodeStyle = {
export type ConnectorStyle = {
strokeStyle: StrokeStyle;
stroke: string;
stroke: Color;
strokeWidth: number;
mode: ConnectorMode;
@@ -78,11 +77,11 @@ export abstract class MindmapStyleGetter {
export class StyleOne extends MindmapStyleGetter {
private readonly _colorOrders = [
LineColor.Purple,
LineColor.Magenta,
LineColor.Orange,
LineColor.Yellow,
LineColor.Green,
DefaultTheme.StrokeColorMap.Purple,
DefaultTheme.StrokeColorMap.Magenta,
DefaultTheme.StrokeColorMap.Orange,
DefaultTheme.StrokeColorMap.Yellow,
DefaultTheme.StrokeColorMap.Green,
'#7ae2d5',
];
@@ -92,15 +91,15 @@ export class StyleOne extends MindmapStyleGetter {
textResizing: TextResizing.AUTO_WIDTH_AND_HEIGHT,
strokeWidth: 4,
strokeColor: '#84CFFF',
strokeColor: '#84cfff',
fontFamily: FontFamily.Poppins,
fontSize: 20,
fontWeight: FontWeight.SemiBold,
color: '--affine-black',
color: DefaultTheme.pureBlack,
filled: true,
fillColor: '--affine-white',
fillColor: DefaultTheme.pureWhite,
padding: [11, 22] as [number, number],
@@ -133,7 +132,7 @@ export class StyleOne extends MindmapStyleGetter {
radius: 0.5,
filled: true,
fillColor: '--affine-white',
fillColor: DefaultTheme.pureWhite,
strokeColor: color,
strokeWidth: 3,
@@ -151,7 +150,7 @@ export class StyleOne extends MindmapStyleGetter {
padding: [4, 0],
color: '--affine-white',
color: DefaultTheme.pureWhite,
fontFamily: FontFamily.Inter,
fontWeight: FontWeight.Bold,
@@ -168,10 +167,10 @@ export class StyleOne extends MindmapStyleGetter {
fontFamily: FontFamily.Poppins,
fontSize: 16,
fontWeight: FontWeight.Medium,
color: '--affine-black',
color: DefaultTheme.pureBlack,
filled: true,
fillColor: '--affine-white',
fillColor: DefaultTheme.pureWhite,
padding: [6, 22] as [number, number],
@@ -189,9 +188,9 @@ export const styleOne = new StyleOne();
export class StyleTwo extends MindmapStyleGetter {
private readonly _colorOrders = [
ShapeFillColor.Blue,
DefaultTheme.StrokeColorMap.Blue,
'#7ae2d5',
ShapeFillColor.Yellow,
DefaultTheme.StrokeColorMap.Yellow,
];
readonly root = {
@@ -200,15 +199,15 @@ export class StyleTwo extends MindmapStyleGetter {
textResizing: TextResizing.AUTO_WIDTH_AND_HEIGHT,
strokeWidth: 3,
strokeColor: '--affine-black',
strokeColor: DefaultTheme.pureBlack,
fontFamily: FontFamily.Poppins,
fontSize: 18,
fontWeight: FontWeight.SemiBold,
color: ShapeFillColor.Black,
color: DefaultTheme.pureBlack,
filled: true,
fillColor: ShapeFillColor.Orange,
fillColor: DefaultTheme.StrokeColorMap.Yellow,
padding: [11, 22] as [number, number],
@@ -216,7 +215,7 @@ export class StyleTwo extends MindmapStyleGetter {
blur: 0,
offsetX: 3,
offsetY: 3,
color: '--affine-black',
color: DefaultTheme.pureBlack,
},
};
@@ -232,7 +231,7 @@ export class StyleTwo extends MindmapStyleGetter {
return {
connector: {
strokeStyle: StrokeStyle.Solid,
stroke: '--affine-black',
stroke: DefaultTheme.pureBlack,
strokeWidth: 3,
mode: ConnectorMode.Orthogonal,
@@ -243,9 +242,9 @@ export class StyleTwo extends MindmapStyleGetter {
radius: 0.5,
filled: true,
fillColor: '--affine-white',
fillColor: DefaultTheme.pureWhite,
strokeColor: '--affine-black',
strokeColor: DefaultTheme.pureBlack,
strokeWidth: 3,
},
expandButton: {
@@ -254,14 +253,14 @@ export class StyleTwo extends MindmapStyleGetter {
radius: 2,
filled: true,
fillColor: '--affine-black',
fillColor: DefaultTheme.pureBlack,
padding: [4, 0],
strokeColor: '--affine-black',
strokeColor: DefaultTheme.pureBlack,
strokeWidth: 0,
color: '--affine-white',
color: DefaultTheme.pureWhite,
fontFamily: FontFamily.Inter,
fontWeight: FontWeight.Bold,
@@ -273,12 +272,12 @@ export class StyleTwo extends MindmapStyleGetter {
textResizing: TextResizing.AUTO_WIDTH_AND_HEIGHT,
strokeWidth: 3,
strokeColor: '--affine-black',
strokeColor: DefaultTheme.pureBlack,
fontFamily: FontFamily.Poppins,
fontSize: 16,
fontWeight: FontWeight.SemiBold,
color: ShapeFillColor.Black,
color: DefaultTheme.pureBlack,
filled: true,
fillColor: color,
@@ -289,7 +288,7 @@ export class StyleTwo extends MindmapStyleGetter {
blur: 0,
offsetX: 3,
offsetY: 3,
color: '--affine-black',
color: DefaultTheme.pureBlack,
},
},
};
@@ -299,9 +298,9 @@ export const styleTwo = new StyleTwo();
export class StyleThree extends MindmapStyleGetter {
private readonly _strokeColor = [
LineColor.Yellow,
LineColor.Green,
LineColor.Teal,
DefaultTheme.StrokeColorMap.Yellow,
DefaultTheme.StrokeColorMap.Green,
DefaultTheme.StrokeColorMap.Teal,
];
readonly root = {
@@ -315,10 +314,10 @@ export class StyleThree extends MindmapStyleGetter {
fontFamily: FontFamily.Poppins,
fontSize: 16,
fontWeight: FontWeight.Medium,
color: ShapeFillColor.Black,
color: DefaultTheme.pureBlack,
filled: true,
fillColor: ShapeFillColor.Yellow,
fillColor: DefaultTheme.StrokeColorMap.Yellow,
padding: [10, 22] as [number, number],
@@ -349,10 +348,10 @@ export class StyleThree extends MindmapStyleGetter {
fontFamily: FontFamily.Poppins,
fontSize: 16,
fontWeight: FontWeight.Medium,
color: ShapeFillColor.Black,
color: DefaultTheme.pureBlack,
filled: true,
fillColor: ShapeFillColor.White,
fillColor: DefaultTheme.pureWhite,
padding: [6, 22] as [number, number],
@@ -369,9 +368,9 @@ export class StyleThree extends MindmapStyleGetter {
radius: 0.5,
filled: true,
fillColor: '--affine-white',
fillColor: DefaultTheme.pureWhite,
strokeColor: '#3CBC36',
strokeColor: '#3cbc36',
strokeWidth: 3,
},
expandButton: {
@@ -380,11 +379,11 @@ export class StyleThree extends MindmapStyleGetter {
radius: 8,
filled: true,
fillColor: '#3CBC36',
fillColor: '#3cbc36',
padding: [4, 0],
strokeColor: '#3CBC36',
strokeColor: '#3cbc36',
strokeWidth: 0,
color: '#fff',
@@ -407,12 +406,12 @@ export const styleThree = new StyleThree();
export class StyleFour extends MindmapStyleGetter {
private readonly _colors = [
ShapeFillColor.Purple,
ShapeFillColor.Magenta,
ShapeFillColor.Orange,
ShapeFillColor.Yellow,
ShapeFillColor.Green,
ShapeFillColor.Blue,
DefaultTheme.StrokeColorMap.Purple,
DefaultTheme.StrokeColorMap.Magenta,
DefaultTheme.StrokeColorMap.Orange,
DefaultTheme.StrokeColorMap.Yellow,
DefaultTheme.StrokeColorMap.Green,
DefaultTheme.StrokeColorMap.Blue,
];
readonly root = {
@@ -426,7 +425,7 @@ export class StyleFour extends MindmapStyleGetter {
fontFamily: FontFamily.Kalam,
fontSize: 22,
fontWeight: FontWeight.Bold,
color: '--affine-black',
color: DefaultTheme.black,
filled: true,
fillColor: 'transparent',
@@ -455,7 +454,7 @@ export class StyleFour extends MindmapStyleGetter {
radius: 0.5,
filled: true,
fillColor: '--affine-white',
fillColor: DefaultTheme.pureWhite,
strokeColor: stroke,
strokeWidth: 3,
@@ -473,7 +472,7 @@ export class StyleFour extends MindmapStyleGetter {
strokeColor: stroke,
strokeWidth: 0,
color: '--affine-white',
color: DefaultTheme.pureWhite,
fontFamily: FontFamily.Inter,
fontWeight: FontWeight.Bold,

12
blocksuite/affine/model/src/elements/shape/shape.ts
View File

@@ -19,22 +19,20 @@ import type {
import { DocCollection, type Y } from '@blocksuite/store';
import {
type Color,
DEFAULT_ROUGHNESS,
FontFamily,
FontStyle,
FontWeight,
ShapeFillColor,
ShapeStyle,
ShapeTextFontSize,
ShapeType,
StrokeColor,
StrokeStyle,
TextAlign,
TextResizing,
type TextStyleProps,
TextVerticalAlign,
} from '../../consts/index.js';
import { type Color, DefaultTheme } from '../../themes/index.js';
import { shapeMethods } from './api/index.js';
export type ShapeProps = BaseElementProps & {
@@ -104,7 +102,7 @@ export class ShapeElementModel extends GfxPrimitiveElementModel<ShapeProps> {
accessor color!: Color;
@field()
accessor fillColor: Color = ShapeFillColor.Yellow;
accessor fillColor: Color = DefaultTheme.shapeFillColor;
@field()
accessor filled: boolean = false;
@@ -160,7 +158,7 @@ export class ShapeElementModel extends GfxPrimitiveElementModel<ShapeProps> {
accessor shapeType: ShapeType = ShapeType.Rect;
@field()
accessor strokeColor: Color = StrokeColor.Yellow;
accessor strokeColor: Color = DefaultTheme.shapeStrokeColor;
@field()
accessor strokeStyle: StrokeStyle = StrokeStyle.Solid;
@@ -205,7 +203,7 @@ export class LocalShapeElementModel extends GfxLocalElementModel {
accessor color: Color = '#000000';
@prop()
accessor fillColor: Color = ShapeFillColor.Yellow;
accessor fillColor: Color = DefaultTheme.shapeFillColor;
@prop()
accessor filled: boolean = false;
@@ -246,7 +244,7 @@ export class LocalShapeElementModel extends GfxLocalElementModel {
accessor shapeType: ShapeType = ShapeType.Rect;
@prop()
accessor strokeColor: Color = StrokeColor.Yellow;
accessor strokeColor: Color = DefaultTheme.shapeStrokeColor;
@prop()
accessor strokeStyle: StrokeStyle = StrokeStyle.Solid;

2
blocksuite/affine/model/src/elements/text/text.ts
View File

@@ -11,13 +11,13 @@ import {
import { DocCollection, type Y } from '@blocksuite/store';
import {
type Color,
FontFamily,
FontStyle,
FontWeight,
TextAlign,
type TextStyleProps,
} from '../../consts/index.js';
import type { Color } from '../../themes/index.js';
export type TextElementProps = BaseElementProps & {
text: Y.Text;

1
blocksuite/affine/model/src/index.ts
View File

@@ -1,4 +1,5 @@
export * from './blocks/index.js';
export * from './consts/index.js';
export * from './elements/index.js';
export * from './themes/index.js';
export * from './utils/index.js';

54
blocksuite/affine/model/src/themes/color.ts Normal file
View File

@@ -0,0 +1,54 @@
import { z } from 'zod';
export enum ColorScheme {
Dark = 'dark',
Light = 'light',
}
const ColorNormalSchema = z.object({
normal: z.string(),
});
const ColorDarkLightSchema = z.object({
[ColorScheme.Dark]: z.string(),
[ColorScheme.Light]: z.string(),
});
export const ColorSchema = z.union([
z.string(),
ColorNormalSchema,
ColorDarkLightSchema,
]);
export type Color = z.infer<typeof ColorSchema>;
// Converts `Color` type to string.
export function resolveColor(
color: Color,
colorScheme: ColorScheme,
fallback = 'transparent'
): string {
let value = fallback;
if (typeof color === 'object') {
if (ColorScheme.Dark in color && ColorScheme.Light in color) {
value = color[colorScheme];
} else if ('normal' in color) {
value = color.normal;
}
} else {
value = color;
}
if (!value) {
value = fallback;
}
return value;
}
export function isTransparent(color: Color) {
return (
typeof color === 'string' && color.toLowerCase().endsWith('transparent')
);
}

104
blocksuite/affine/model/src/themes/default.ts Normal file
View File

@@ -0,0 +1,104 @@
import type { Palette, Theme } from './types.js';
import { buildPalettes, getColorByKey, pureBlack, pureWhite } from './utils.js';
const Transparent = 'transparent';
const White = getColorByKey('edgeless/palette/white');
const Black = getColorByKey('edgeless/palette/black');
const Light = {
Red: getColorByKey('edgeless/palette/light/redLight'),
Orange: getColorByKey('edgeless/palette/light/orangeLight'),
Yellow: getColorByKey('edgeless/palette/light/yellowLight'),
Green: getColorByKey('edgeless/palette/light/greenLight'),
Blue: getColorByKey('edgeless/palette/light/blueLight'),
Purple: getColorByKey('edgeless/palette/light/purpleLight'),
Magenta: getColorByKey('edgeless/palette/light/magentaLight'),
Grey: getColorByKey('edgeless/palette/light/greyLight'),
} as const;
const Medium = {
Red: getColorByKey('edgeless/palette/medium/redMedium'),
Orange: getColorByKey('edgeless/palette/medium/orangeMedium'),
Yellow: getColorByKey('edgeless/palette/medium/yellowMedium'),
Green: getColorByKey('edgeless/palette/medium/greenMedium'),
Blue: getColorByKey('edgeless/palette/medium/blueMedium'),
Purple: getColorByKey('edgeless/palette/medium/purpleMedium'),
Magenta: getColorByKey('edgeless/palette/medium/magentaMedium'),
Grey: getColorByKey('edgeless/palette/medium/greyMedium'),
} as const;
const Heavy = {
Red: getColorByKey('edgeless/palette/heavy/red'),
Orange: getColorByKey('edgeless/palette/heavy/orange'),
Yellow: getColorByKey('edgeless/palette/heavy/yellow'),
Green: getColorByKey('edgeless/palette/heavy/green'),
Blue: getColorByKey('edgeless/palette/heavy/blue'),
Purple: getColorByKey('edgeless/palette/heavy/purple'),
Magenta: getColorByKey('edgeless/palette/heavy/magenta'),
} as const;
const NoteBackgroundColorMap = {
Yellow: getColorByKey('edgeless/note/yellow'),
Orange: getColorByKey('edgeless/note/orange'),
Red: getColorByKey('edgeless/note/red'),
Magenta: getColorByKey('edgeless/note/magenta'),
Purple: getColorByKey('edgeless/note/purple'),
Blue: getColorByKey('edgeless/note/blue'),
Teal: getColorByKey('edgeless/note/teal'),
Green: getColorByKey('edgeless/note/green'),
Black: getColorByKey('edgeless/note/black'),
Grey: getColorByKey('edgeless/note/grey'),
White: getColorByKey('edgeless/note/white'),
} as const;
const Palettes: Palette[] = [
// Light
...buildPalettes(Light, 'Light'),
{ key: 'Transparent', value: Transparent },
// Medium
...buildPalettes(Medium, 'Medium'),
{ key: 'White', value: White },
// Heavy
...buildPalettes(Heavy, 'Heavy'),
{ key: 'Black', value: Black },
] as const;
const NoteBackgroundColorPalettes: Palette[] = [
...buildPalettes(NoteBackgroundColorMap),
] as const;
const StrokeColorMap = { ...Medium, Black, White } as const;
const StrokeColorPalettes: Palette[] = [
...buildPalettes(StrokeColorMap),
] as const;
const FillColorMap = { ...Light, Black, White } as const;
const FillColorPalettes: Palette[] = [...buildPalettes(FillColorMap)] as const;
export const DefaultTheme: Theme = {
pureBlack,
pureWhite,
black: Black,
white: White,
transparent: Transparent,
textColor: Medium.Blue,
shapeTextColor: Black,
shapeStrokeColor: Medium.Yellow,
shapeFillColor: Light.Yellow,
connectorColor: Medium.Grey,
noteBackgrounColor: NoteBackgroundColorMap.White,
Palettes,
StrokeColorMap,
StrokeColorPalettes,
FillColorMap,
FillColorPalettes,
NoteBackgroundColorMap,
NoteBackgroundColorPalettes,
} as const;

10
blocksuite/affine/model/src/themes/index.ts Normal file
View File

@@ -0,0 +1,10 @@
import { DefaultTheme } from './default.js';
import type { Theme } from './types.js';
export * from './color.js';
export { DefaultTheme } from './default.js';
export * from './types.js';
export const Themes: Record<string, Theme> = {
default: DefaultTheme,
};

36
blocksuite/affine/model/src/themes/types.ts Normal file
View File

@@ -0,0 +1,36 @@
import { z } from 'zod';
import { ColorSchema } from './color.js';
export const PaletteSchema = z.object({
key: z.string(),
value: ColorSchema,
});
export type Palette = z.infer<typeof PaletteSchema>;
export const ThemeSchema = z.object({
pureBlack: z.string(),
pureWhite: z.string(),
black: ColorSchema,
white: ColorSchema,
transparent: z.literal('transparent'),
textColor: ColorSchema,
shapeTextColor: ColorSchema,
shapeStrokeColor: ColorSchema,
shapeFillColor: ColorSchema,
connectorColor: ColorSchema,
noteBackgrounColor: ColorSchema,
// Universal color palette
Palettes: z.array(PaletteSchema),
StrokeColorMap: z.record(z.string(), ColorSchema),
// Usually used in global toolbar and editor preview
StrokeColorPalettes: z.array(PaletteSchema),
FillColorMap: z.record(z.string(), ColorSchema),
// Usually used in global toolbar and editor preview
FillColorPalettes: z.array(PaletteSchema),
NoteBackgroundColorMap: z.record(z.string(), ColorSchema),
NoteBackgroundColorPalettes: z.array(PaletteSchema),
});
export type Theme = z.infer<typeof ThemeSchema>;

29
blocksuite/affine/model/src/themes/utils.ts Normal file
View File

@@ -0,0 +1,29 @@
import {
type AffineThemeKeyV2,
darkThemeV2,
lightThemeV2,
} from '@toeverything/theme/v2';
import type { Color } from './color.js';
import type { Palette } from './types.js';
// Converts a color map to color list.
export function buildPalettes(
obj: Record<string, Color>,
prefix = ''
): Palette[] {
return Object.entries<Color>(obj).map(([key, value]) => ({
key: `${prefix}${key}`,
value,
}));
}
export function getColorByKey(key: AffineThemeKeyV2): Color {
const dark = darkThemeV2[key];
const light = lightThemeV2[key];
if (dark === light) return dark;
return { dark, light };
}
export const pureBlack = lightThemeV2['edgeless/palette/black'];
export const pureWhite = lightThemeV2['edgeless/palette/white'];

11
blocksuite/affine/shared/src/adapters/html/html.ts
View File

@@ -1,7 +1,4 @@
import {
DEFAULT_NOTE_BACKGROUND_COLOR,
NoteDisplayMode,
} from '@blocksuite/affine-model';
import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model';
import type { ExtensionType } from '@blocksuite/block-std';
import type { ServiceProvider } from '@blocksuite/global/di';
import {
@@ -272,7 +269,7 @@ export class HtmlAdapter extends BaseAdapter<Html> {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -297,7 +294,7 @@ export class HtmlAdapter extends BaseAdapter<Html> {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -357,7 +354,7 @@ export class HtmlAdapter extends BaseAdapter<Html> {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,

11
blocksuite/affine/shared/src/adapters/notion-html/notion-html.ts
View File

@@ -1,7 +1,4 @@
import {
DEFAULT_NOTE_BACKGROUND_COLOR,
NoteDisplayMode,
} from '@blocksuite/affine-model';
import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model';
import type { ExtensionType } from '@blocksuite/block-std';
import type { ServiceProvider } from '@blocksuite/global/di';
import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
@@ -176,7 +173,7 @@ export class NotionHtmlAdapter extends BaseAdapter<NotionHtml> {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -207,7 +204,7 @@ export class NotionHtmlAdapter extends BaseAdapter<NotionHtml> {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -268,7 +265,7 @@ export class NotionHtmlAdapter extends BaseAdapter<NotionHtml> {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,

4
blocksuite/affine/shared/src/adapters/notion-text.ts
View File

@@ -1,4 +1,4 @@
import { DEFAULT_NOTE_BACKGROUND_COLOR } from '@blocksuite/affine-model';
import { DefaultTheme } from '@blocksuite/affine-model';
import type { ExtensionType } from '@blocksuite/block-std';
import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
import type { DeltaInsert } from '@blocksuite/inline';
@@ -127,7 +127,7 @@ export class NotionTextAdapter extends BaseAdapter<NotionText> {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: 'both',

11
blocksuite/affine/shared/src/adapters/plain-text/plain-text.ts
View File

@@ -1,7 +1,4 @@
import {
DEFAULT_NOTE_BACKGROUND_COLOR,
NoteDisplayMode,
} from '@blocksuite/affine-model';
import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model';
import type { ExtensionType } from '@blocksuite/block-std';
import type { ServiceProvider } from '@blocksuite/global/di';
import {
@@ -175,7 +172,7 @@ export class PlainTextAdapter extends BaseAdapter<PlainText> {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -242,7 +239,7 @@ export class PlainTextAdapter extends BaseAdapter<PlainText> {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -285,7 +282,7 @@ export class PlainTextAdapter extends BaseAdapter<PlainText> {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,

7
blocksuite/affine/shared/src/services/edit-props-store.ts
View File

@@ -1,3 +1,4 @@
import { ColorSchema } from '@blocksuite/affine-model';
import { type BlockStdScope, LifeCycleWatcher } from '@blocksuite/block-std';
import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
import {
@@ -11,11 +12,7 @@ import clonedeep from 'lodash.clonedeep';
import mergeWith from 'lodash.mergewith';
import { z } from 'zod';
import {
ColorSchema,
makeDeepOptional,
NodePropsSchema,
} from '../utils/index.js';
import { makeDeepOptional, NodePropsSchema } from '../utils/index.js';
import { EditorSettingProvider } from './editor-setting-service.js';
const LastPropsSchema = NodePropsSchema;

57
blocksuite/affine/shared/src/services/theme-service.ts
View File

@@ -1,4 +1,9 @@
import { type Color, ColorScheme } from '@blocksuite/affine-model';
import {
type Color,
ColorScheme,
DefaultTheme,
resolveColor,
} from '@blocksuite/affine-model';
import {
type BlockStdScope,
Extension,
@@ -15,8 +20,6 @@ import {
import { isInsideEdgelessEditor } from '../utils/index.js';
const TRANSPARENT = 'transparent';
export const ThemeExtensionIdentifier = createIdentifier<ThemeExtension>(
'AffineThemeExtension'
);
@@ -52,9 +55,7 @@ export class ThemeService extends Extension {
}
get theme() {
return isInsideEdgelessEditor(this.std.host)
? this.edgelessTheme
: this.appTheme;
return this.theme$.peek();
}
get theme$() {
@@ -94,24 +95,19 @@ export class ThemeService extends Extension {
*/
generateColorProperty(
color: Color,
fallback = 'transparent',
fallback: Color = DefaultTheme.transparent,
theme = this.theme
) {
let result: string | undefined = undefined;
const result = resolveColor(color, theme, resolveColor(fallback, theme));
if (typeof color === 'object') {
result = color[theme] ?? color.normal;
} else {
result = color;
}
if (!result) {
result = fallback;
}
// Compatible old data
if (result.startsWith('--')) {
return result.endsWith(TRANSPARENT) ? TRANSPARENT : `var(${result})`;
return result.endsWith('transparent')
? DefaultTheme.transparent
: `var(${result})`;
}
return result ?? TRANSPARENT;
return result;
}
/**
@@ -132,35 +128,30 @@ export class ThemeService extends Extension {
*/
getColorValue(
color: Color,
fallback = TRANSPARENT,
fallback: Color = DefaultTheme.transparent,
real = false,
theme = this.theme
) {
let result: string | undefined = undefined;
let result = resolveColor(color, theme, resolveColor(fallback, theme));
if (typeof color === 'object') {
result = color[theme] ?? color.normal;
} else {
result = color;
}
if (!result) {
result = fallback;
}
// Compatible old data
if (real && result.startsWith('--')) {
result = result.endsWith(TRANSPARENT)
? TRANSPARENT
result = result.endsWith('transparent')
? DefaultTheme.transparent
: this.getCssVariableColor(result, theme);
}
return result ?? TRANSPARENT;
return result ?? DefaultTheme.transparent;
}
getCssVariableColor(property: string, theme = this.theme) {
// Compatible old data
if (property.startsWith('--')) {
if (property.endsWith(TRANSPARENT)) {
return TRANSPARENT;
if (property.endsWith('transparent')) {
return DefaultTheme.transparent;
}
const key = property as keyof AffineCssVariables;
// V1 theme
const color =
theme === ColorScheme.Dark
? combinedDarkCssVariables[key]

71
blocksuite/affine/shared/src/utils/zod-schema.ts
View File

@@ -1,33 +1,24 @@
import {
ColorSchema,
ConnectorMode,
DEFAULT_CONNECTOR_COLOR,
DEFAULT_CONNECTOR_TEXT_COLOR,
DEFAULT_FRONT_END_POINT_STYLE,
DEFAULT_NOTE_BACKGROUND_COLOR,
DEFAULT_NOTE_BORDER_SIZE,
DEFAULT_NOTE_BORDER_STYLE,
DEFAULT_NOTE_CORNER,
DEFAULT_NOTE_SHADOW,
DEFAULT_REAR_END_POINT_STYLE,
DEFAULT_ROUGHNESS,
DEFAULT_SHAPE_FILL_COLOR,
DEFAULT_SHAPE_STROKE_COLOR,
DEFAULT_SHAPE_TEXT_COLOR,
DEFAULT_TEXT_COLOR,
DefaultTheme,
FontFamily,
FontStyle,
FontWeight,
LayoutType,
LineColorsSchema,
LineWidth,
MindmapStyle,
NoteBackgroundPaletteEnum,
NoteDisplayMode,
NoteShadowsSchema,
PaletteEnum,
PointStyle,
ShapeStyle,
StrokeColor,
StrokeStyle,
TextAlign,
TextVerticalAlign,
@@ -48,34 +39,17 @@ const ConnectorModeSchema = z.nativeEnum(ConnectorMode);
const LayoutTypeSchema = z.nativeEnum(LayoutType);
const MindmapStyleSchema = z.nativeEnum(MindmapStyle);
export const ColorSchema = z.union([
z.object({
normal: z.string(),
}),
z.object({
light: z.string(),
dark: z.string(),
}),
]);
const ColorPaletteSchema = z.union([ColorSchema, PaletteEnum]);
const LineColorSchema = z.union([LineColorsSchema, ColorPaletteSchema]);
const TextColorSchema = z.union([LineColorsSchema, ColorPaletteSchema]);
const NoteBackgroundColorSchema = z.union([
ColorSchema,
NoteBackgroundPaletteEnum,
]);
export const ConnectorSchema = z
.object({
frontEndpointStyle: ConnectorEndpointSchema,
rearEndpointStyle: ConnectorEndpointSchema,
stroke: LineColorSchema,
stroke: ColorSchema,
strokeStyle: StrokeStyleSchema,
strokeWidth: LineWidthSchema,
rough: z.boolean(),
mode: ConnectorModeSchema,
labelStyle: z.object({
color: TextColorSchema,
color: ColorSchema,
fontSize: z.number(),
fontFamily: FontFamilySchema,
fontWeight: FontWeightSchema,
@@ -86,13 +60,13 @@ export const ConnectorSchema = z
.default({
frontEndpointStyle: DEFAULT_FRONT_END_POINT_STYLE,
rearEndpointStyle: DEFAULT_REAR_END_POINT_STYLE,
stroke: DEFAULT_CONNECTOR_COLOR,
stroke: DefaultTheme.connectorColor,
strokeStyle: StrokeStyle.Solid,
strokeWidth: LineWidth.Two,
rough: false,
mode: ConnectorMode.Curve,
labelStyle: {
color: DEFAULT_CONNECTOR_TEXT_COLOR,
color: DefaultTheme.black,
fontSize: 16,
fontFamily: FontFamily.Inter,
fontWeight: FontWeight.Regular,
@@ -103,21 +77,18 @@ export const ConnectorSchema = z
export const BrushSchema = z
.object({
color: ColorPaletteSchema,
color: ColorSchema,
lineWidth: LineWidthSchema,
})
.default({
color: {
dark: StrokeColor.White,
light: StrokeColor.Black,
},
color: DefaultTheme.black,
lineWidth: LineWidth.Four,
});
const DEFAULT_SHAPE = {
color: DEFAULT_SHAPE_TEXT_COLOR,
fillColor: DEFAULT_SHAPE_FILL_COLOR,
strokeColor: DEFAULT_SHAPE_STROKE_COLOR,
color: DefaultTheme.shapeTextColor,
fillColor: DefaultTheme.shapeFillColor,
strokeColor: DefaultTheme.shapeStrokeColor,
strokeStyle: StrokeStyle.Solid,
strokeWidth: LineWidth.Two,
shapeStyle: ShapeStyle.General,
@@ -132,9 +103,9 @@ const DEFAULT_SHAPE = {
};
const ShapeObject = {
color: TextColorSchema,
fillColor: ColorPaletteSchema,
strokeColor: ColorPaletteSchema,
color: ColorSchema,
fillColor: ColorSchema,
strokeColor: ColorSchema,
strokeStyle: StrokeStyleSchema,
strokeWidth: z.number(),
shapeStyle: ShapeStyleSchema,
@@ -158,7 +129,7 @@ export const RoundedShapeSchema = z
export const TextSchema = z
.object({
color: TextColorSchema,
color: ColorSchema,
fontSize: z.number(),
fontFamily: FontFamilySchema,
fontWeight: FontWeightSchema,
@@ -166,7 +137,7 @@ export const TextSchema = z
textAlign: TextAlignSchema,
})
.default({
color: DEFAULT_TEXT_COLOR,
color: DefaultTheme.textColor,
fontSize: 24,
fontFamily: FontFamily.Inter,
fontWeight: FontWeight.Regular,
@@ -176,14 +147,14 @@ export const TextSchema = z
export const EdgelessTextSchema = z
.object({
color: TextColorSchema,
color: ColorSchema,
fontFamily: FontFamilySchema,
fontWeight: FontWeightSchema,
fontStyle: FontStyleSchema,
textAlign: TextAlignSchema,
})
.default({
color: DEFAULT_TEXT_COLOR,
color: DefaultTheme.textColor,
fontFamily: FontFamily.Inter,
fontWeight: FontWeight.Regular,
fontStyle: FontStyle.Normal,
@@ -192,7 +163,7 @@ export const EdgelessTextSchema = z
export const NoteSchema = z
.object({
background: NoteBackgroundColorSchema,
background: ColorSchema,
displayMode: NoteDisplayModeSchema,
edgeless: z.object({
style: z.object({
@@ -204,7 +175,7 @@ export const NoteSchema = z
}),
})
.default({
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
displayMode: NoteDisplayMode.EdgelessOnly,
edgeless: {
style: {
@@ -228,7 +199,7 @@ export const MindmapSchema = z
export const FrameSchema = z
.object({
background: ColorPaletteSchema.optional(),
background: ColorSchema.optional(),
})
.default({});

7
blocksuite/blocks/package.json
View File

@@ -54,6 +54,7 @@
"html2canvas": "^1.4.1",
"katex": "^0.16.11",
"lit": "^3.2.0",
"lodash.isequal": "^4.5.0",
"lz-string": "^1.5.0",
"mdast-util-gfm-autolink-literal": "^2.0.1",
"mdast-util-gfm-strikethrough": "^2.0.0",
@@ -92,7 +93,7 @@
],
"devDependencies": {
"@types/dompurify": "^3.0.5",
"@types/katex": "^0.16.7"
},
"version": "0.19.0"
"@types/katex": "^0.16.7",
"@types/lodash.isequal": "^4.5.8"
}
}

57
blocksuite/blocks/src/__tests__/adapters/html.unit.spec.ts
View File

@@ -1,7 +1,4 @@
import {
DEFAULT_NOTE_BACKGROUND_COLOR,
NoteDisplayMode,
} from '@blocksuite/affine-model';
import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model';
import { HtmlAdapter } from '@blocksuite/affine-shared/adapters';
import { Container } from '@blocksuite/global/di';
import type {
@@ -108,7 +105,7 @@ describe('snapshot to html', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -174,7 +171,7 @@ describe('snapshot to html', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -240,7 +237,7 @@ describe('snapshot to html', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -306,7 +303,7 @@ describe('snapshot to html', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -492,7 +489,7 @@ describe('snapshot to html', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -637,7 +634,7 @@ describe('snapshot to html', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -742,7 +739,7 @@ describe('snapshot to html', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -816,7 +813,7 @@ describe('snapshot to html', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -890,7 +887,7 @@ describe('snapshot to html', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -965,7 +962,7 @@ describe('snapshot to html', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -1040,7 +1037,7 @@ describe('snapshot to html', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -1160,7 +1157,7 @@ describe('snapshot to html', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -1221,7 +1218,7 @@ describe('snapshot to html', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -1485,7 +1482,7 @@ describe('snapshot to html', () => {
version: 1,
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -1576,7 +1573,7 @@ describe('snapshot to html', () => {
version: 1,
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: 'both',
@@ -1969,7 +1966,7 @@ describe('html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -2011,7 +2008,7 @@ describe('html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -2121,7 +2118,7 @@ describe('html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -2187,7 +2184,7 @@ describe('html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -2234,7 +2231,7 @@ describe('html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -2270,7 +2267,7 @@ describe('html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -2382,7 +2379,7 @@ describe('html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -2426,7 +2423,7 @@ describe('html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -2470,7 +2467,7 @@ describe('html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -2523,7 +2520,7 @@ describe('html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -2573,7 +2570,7 @@ describe('html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,

75
blocksuite/blocks/src/__tests__/adapters/markdown.unit.spec.ts
View File

@@ -1,7 +1,4 @@
import {
DEFAULT_NOTE_BACKGROUND_COLOR,
NoteDisplayMode,
} from '@blocksuite/affine-model';
import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model';
import type {
BlockSnapshot,
DocSnapshot,
@@ -44,7 +41,7 @@ describe('snapshot to markdown', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -108,7 +105,7 @@ describe('snapshot to markdown', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -307,7 +304,7 @@ hhh
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -455,7 +452,7 @@ hhh
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -607,7 +604,7 @@ hhh
version: 1,
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: 'both',
@@ -750,7 +747,7 @@ hhh
version: 1,
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: 'both',
@@ -911,7 +908,7 @@ hhh
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -983,7 +980,7 @@ hhh
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -1055,7 +1052,7 @@ hhh
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -1111,7 +1108,7 @@ hhh
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -1183,7 +1180,7 @@ hhh
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -1252,7 +1249,7 @@ hhh
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -1325,7 +1322,7 @@ hhh
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -1398,7 +1395,7 @@ hhh
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -1707,7 +1704,7 @@ hhh
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -1975,7 +1972,7 @@ hhh
version: 1,
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: 'both',
@@ -2348,7 +2345,7 @@ describe('markdown to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -2393,7 +2390,7 @@ describe('markdown to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: 'both',
@@ -2444,7 +2441,7 @@ describe('markdown to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: 'both',
@@ -2495,7 +2492,7 @@ describe('markdown to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: 'both',
@@ -2558,7 +2555,7 @@ hhh
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -2728,7 +2725,7 @@ hhh
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -2864,7 +2861,7 @@ hhh
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -2998,7 +2995,7 @@ bbb
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -3099,7 +3096,7 @@ bbb
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -3153,7 +3150,7 @@ bbb
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: 'both',
@@ -3206,7 +3203,7 @@ bbb
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -3256,7 +3253,7 @@ bbb
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -3307,7 +3304,7 @@ bbb
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -3358,7 +3355,7 @@ bbb
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -3412,7 +3409,7 @@ bbb
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -3530,7 +3527,7 @@ bbb
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -3571,7 +3568,7 @@ bbb
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -3622,7 +3619,7 @@ bbb
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -3673,7 +3670,7 @@ hhh
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: 'both',

41
blocksuite/blocks/src/__tests__/adapters/notion-html.unit.spec.ts
View File

@@ -1,7 +1,4 @@
import {
DEFAULT_NOTE_BACKGROUND_COLOR,
NoteDisplayMode,
} from '@blocksuite/affine-model';
import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model';
import { NotionHtmlAdapter } from '@blocksuite/affine-shared/adapters';
import { Container } from '@blocksuite/global/di';
import {
@@ -42,7 +39,7 @@ describe('notion html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -97,7 +94,7 @@ describe('notion html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -212,7 +209,7 @@ describe('notion html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -378,7 +375,7 @@ describe('notion html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -823,7 +820,7 @@ describe('notion html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -952,7 +949,7 @@ describe('notion html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -1053,7 +1050,7 @@ describe('notion html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -1102,7 +1099,7 @@ describe('notion html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -1171,7 +1168,7 @@ describe('notion html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -1220,7 +1217,7 @@ describe('notion html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -1267,7 +1264,7 @@ describe('notion html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -1311,7 +1308,7 @@ describe('notion html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -1435,7 +1432,7 @@ describe('notion html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -1714,7 +1711,7 @@ describe('notion html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: 'both',
@@ -1907,7 +1904,7 @@ describe('notion html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -1948,7 +1945,7 @@ describe('notion html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -1990,7 +1987,7 @@ describe('notion html to snapshot', () => {
test('inline style', async () => {
const html = `<div class="page-body">
<p id="12d088dd-6fdb-80e5-97be-ebd049a327f5" class="">
<strong>strong</strong> <em>italic</em> <span style="border-bottom:0.05em solid">underline</span> <del>strikethrough</del> <code>code</code>
<strong>strong</strong> <em>italic</em> <span style="border-bottom:0.05em solid">underline</span> <del>strikethrough</del> <code>code</code>
</p>
</div>`;
@@ -2000,7 +1997,7 @@ describe('notion html to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,

4
blocksuite/blocks/src/__tests__/adapters/notion-text.unit.spec.ts
View File

@@ -1,4 +1,4 @@
import { DEFAULT_NOTE_BACKGROUND_COLOR } from '@blocksuite/affine-model';
import { DefaultTheme } from '@blocksuite/affine-model';
import { NotionTextAdapter } from '@blocksuite/affine-shared/adapters';
import type { SliceSnapshot } from '@blocksuite/store';
import { describe, expect, test } from 'vitest';
@@ -20,7 +20,7 @@ describe('notion-text to snapshot', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: 'both',

23
blocksuite/blocks/src/__tests__/adapters/plain-text.unit.spec.ts
View File

@@ -1,7 +1,4 @@
import {
DEFAULT_NOTE_BACKGROUND_COLOR,
NoteDisplayMode,
} from '@blocksuite/affine-model';
import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model';
import { PlainTextAdapter } from '@blocksuite/affine-shared/adapters';
import { Container } from '@blocksuite/global/di';
import type {
@@ -53,7 +50,7 @@ describe('snapshot to plain text', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -206,7 +203,7 @@ describe('snapshot to plain text', () => {
version: 1,
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -362,7 +359,7 @@ describe('snapshot to plain text', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -432,7 +429,7 @@ describe('snapshot to plain text', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -495,7 +492,7 @@ describe('snapshot to plain text', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -664,7 +661,7 @@ describe('snapshot to plain text', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -727,7 +724,7 @@ describe('snapshot to plain text', () => {
version: 1,
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -820,7 +817,7 @@ describe('snapshot to plain text', () => {
version: 1,
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: 'both',
@@ -1179,7 +1176,7 @@ describe('snapshot to plain text', () => {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,

11
blocksuite/blocks/src/_common/adapters/markdown/markdown.ts
View File

@@ -1,7 +1,4 @@
import {
DEFAULT_NOTE_BACKGROUND_COLOR,
NoteDisplayMode,
} from '@blocksuite/affine-model';
import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model';
import {
type AdapterContext,
AdapterFactoryIdentifier,
@@ -270,7 +267,7 @@ export class MarkdownAdapter extends BaseAdapter<Markdown> {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -294,7 +291,7 @@ export class MarkdownAdapter extends BaseAdapter<Markdown> {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -413,7 +410,7 @@ export class MarkdownAdapter extends BaseAdapter<Markdown> {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,

11
blocksuite/blocks/src/_common/adapters/mix-text.ts
View File

@@ -1,7 +1,4 @@
import {
DEFAULT_NOTE_BACKGROUND_COLOR,
NoteDisplayMode,
} from '@blocksuite/affine-model';
import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model';
import { AdapterFactoryIdentifier } from '@blocksuite/affine-shared/adapters';
import type { ExtensionType } from '@blocksuite/block-std';
import type { DeltaInsert } from '@blocksuite/inline';
@@ -164,7 +161,7 @@ export class MixTextAdapter extends BaseAdapter<MixText> {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -231,7 +228,7 @@ export class MixTextAdapter extends BaseAdapter<MixText> {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -284,7 +281,7 @@ export class MixTextAdapter extends BaseAdapter<MixText> {
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
background: DefaultTheme.noteBackgrounColor,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,

13
blocksuite/blocks/src/root-block/edgeless/components/auto-complete/auto-complete-panel.ts
View File

@@ -14,11 +14,8 @@ import type {
ShapeElementModel,
} from '@blocksuite/affine-model';
import {
DEFAULT_NOTE_BACKGROUND_COLOR,
DEFAULT_NOTE_WIDTH,
DEFAULT_SHAPE_FILL_COLOR,
DEFAULT_SHAPE_STROKE_COLOR,
DEFAULT_TEXT_COLOR,
DefaultTheme,
FontFamily,
FontStyle,
FontWeight,
@@ -282,7 +279,7 @@ export class EdgelessAutoCompletePanel extends WithDisposable(LitElement) {
textAlign: 'left',
fontSize: 24,
fontFamily: FontFamily.Inter,
color: DEFAULT_TEXT_COLOR,
color: DefaultTheme.textColor,
fontWeight: FontWeight.Regular,
fontStyle: FontStyle.Normal,
});
@@ -474,7 +471,7 @@ export class EdgelessAutoCompletePanel extends WithDisposable(LitElement) {
.getColorValue(
this.edgeless.std.get(EditPropsStore).lastProps$.value['affine:note']
.background,
DEFAULT_NOTE_BACKGROUND_COLOR,
DefaultTheme.noteBackgrounColor,
true
);
this._overlay = new AutoCompleteNoteOverlay(this.gfx, xywh, background);
@@ -515,10 +512,10 @@ export class EdgelessAutoCompletePanel extends WithDisposable(LitElement) {
const stroke = this.edgeless.std
.get(ThemeProvider)
.getColorValue(strokeColor, DEFAULT_SHAPE_STROKE_COLOR, true);
.getColorValue(strokeColor, DefaultTheme.shapeStrokeColor, true);
const fill = this.edgeless.std
.get(ThemeProvider)
.getColorValue(fillColor, DEFAULT_SHAPE_FILL_COLOR, true);
.getColorValue(fillColor, DefaultTheme.shapeFillColor, true);
const options = {
seed: 666,

4
blocksuite/blocks/src/root-block/edgeless/components/auto-complete/edgeless-auto-complete.ts
View File

@@ -21,7 +21,7 @@ import type {
} from '@blocksuite/affine-model';
import {
DEFAULT_NOTE_HEIGHT,
DEFAULT_SHAPE_STROKE_COLOR,
DefaultTheme,
LayoutType,
MindmapElementModel,
ShapeElementModel,
@@ -643,7 +643,7 @@ export class EdgelessAutoComplete extends WithDisposable(LitElement) {
this._autoCompleteOverlay.stroke = surface.renderer.getColorValue(
current.strokeColor,
DEFAULT_SHAPE_STROKE_COLOR,
DefaultTheme.shapeStrokeColor,
true
);
this._autoCompleteOverlay.linePoints = path;

24
blocksuite/blocks/src/root-block/edgeless/components/color-picker/button.ts
View File

@@ -1,4 +1,6 @@
import type { EditorMenuButton } from '@blocksuite/affine-components/toolbar';
import type { ColorScheme, Palette } from '@blocksuite/affine-model';
import { resolveColor } from '@blocksuite/affine-model';
import { WithDisposable } from '@blocksuite/global/utils';
import { html, LitElement } from 'lit';
import { property, query, state } from 'lit/decorators.js';
@@ -7,19 +9,14 @@ import { ifDefined } from 'lit/directives/if-defined.js';
import { styleMap } from 'lit/directives/style-map.js';
import type { ColorEvent } from '../panel/color-panel.js';
import type {
ModeType,
PickColorDetail,
PickColorEvent,
PickColorType,
} from './types.js';
import type { ModeType, PickColorEvent, PickColorType } from './types.js';
import { keepColor, preprocessColor, rgbaToHex8 } from './utils.js';
type Type = 'normal' | 'custom';
export class EdgelessColorPickerButton extends WithDisposable(LitElement) {
readonly #select = (e: ColorEvent) => {
this.#pick({ palette: e.detail });
this.#pick(e.detail);
};
switchToCustomTab = (e: MouseEvent) => {
@@ -69,14 +66,16 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) {
}
get isCustomColor() {
return !this.palettes.includes(this.color);
return !this.palettes
.map(({ value }) => resolveColor(value, this.theme))
.includes(this.color);
}
get tabContentPadding() {
return `${this.tabType === 'custom' ? 0 : 8}px`;
}
#pick(detail: PickColorDetail) {
#pick(detail: Palette) {
this.pick?.({ type: 'start' });
this.pick?.({ type: 'pick', detail });
this.pick?.({ type: 'end' });
@@ -126,8 +125,8 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) {
role="listbox"
class=${ifDefined(this.colorPanelClass)}
.value=${this.color}
.theme=${this.theme}
.palettes=${this.palettes}
.options=${this.palettes}
.hollowCircle=${this.hollowCircle}
.openColorPicker=${this.switchToCustomTab}
.hasTransparent=${false}
@@ -189,7 +188,7 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) {
accessor menuButton!: EditorMenuButton;
@property({ attribute: false })
accessor palettes: string[] = [];
accessor palettes: Palette[] = [];
@property({ attribute: false })
accessor pick!: (event: PickColorEvent) => void;
@@ -197,6 +196,9 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) {
@state()
accessor tabType: Type = 'normal';
@property({ attribute: false })
accessor theme!: ColorScheme;
@property()
accessor tooltip: string | undefined = undefined;
}

19
blocksuite/blocks/src/root-block/edgeless/components/color-picker/color-picker.ts
View File

@@ -1,3 +1,4 @@
import type { Color } from '@blocksuite/affine-model';
import { on, once, stopPropagation } from '@blocksuite/affine-shared/utils';
import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
import { batch, computed, signal } from '@preact/signals-core';
@@ -111,15 +112,15 @@ export class EdgelessColorPicker extends SignalWatcher(
#pick() {
const hsva = this.hsva$.peek();
const type = this.modeType$.peek();
const detail = { [type]: hsvaToHex8(hsva) };
const value = { [type]: hsvaToHex8(hsva) };
const key = 'Custom';
if (type !== 'normal') {
const another = type === 'light' ? 'dark' : 'light';
const { hsva } = this[`${another}$`].peek();
detail[another] = hsvaToHex8(hsva);
value[another] = hsvaToHex8(hsva);
}
this.pick?.({ type: 'pick', detail });
this.pick?.({ type: 'pick', detail: { key, value: value as Color } });
}
#pickEnd() {
@@ -398,12 +399,12 @@ export class EdgelessColorPicker extends SignalWatcher(
// Updates modes
if (modes?.length) {
batches.push(() => {
// eslint-disable-next-line sonarjs/no-ignored-return
this.modes$.value.reduce((fallback, curr, n) => {
let value = defaultHsva();
this.modes$.value.forEach((curr, n) => {
const m = modes[n];
curr.hsva = m ? rgbaToHsva(m.rgba) : fallback;
return { ...curr.hsva };
}, defaultHsva());
curr.hsva = m ? rgbaToHsva(m.rgba) : value;
value = curr.hsva;
});
});
}

3
blocksuite/blocks/src/root-block/edgeless/components/color-picker/consts.ts
View File

@@ -11,8 +11,7 @@ export const COLORS: [Rgb, number][] = [
[{ r: 0, g: 1, b: 1 }, 3 / 6],
[{ r: 0, g: 0, b: 1 }, 4 / 6],
[{ r: 1, g: 0, b: 1 }, 5 / 6],
// eslint-disable-next-line sonarjs/no-identical-expressions
[{ r: 1, g: 0, b: 0 }, 6 / 6],
[{ r: 1, g: 0, b: 0 }, 1],
];
export const FIRST_COLOR = COLORS[0][0];

1
blocksuite/blocks/src/root-block/edgeless/components/color-picker/custom-button.ts
View File

@@ -11,6 +11,7 @@ export class EdgelessColorCustomButton extends LitElement {
height: 24px;
cursor: pointer;
}
:host([active]):after {
position: absolute;
display: block;

6
blocksuite/blocks/src/root-block/edgeless/components/color-picker/types.ts
View File

@@ -1,6 +1,6 @@
// https://www.w3.org/TR/css-color-4/
import type { ColorScheme } from '@blocksuite/affine-model';
import type { ColorScheme, Palette } from '@blocksuite/affine-model';
// Red, green, blue. All in the range [0, 1].
export type Rgb = {
@@ -48,8 +48,6 @@ export type ModeRgba = { type: ModeType; rgba: Rgba };
export type PickColorType = 'palette' | ModeType;
export type PickColorDetail = Partial<Record<PickColorType, string>>;
export type PickColorEvent =
| { type: 'start' | 'end' }
| { type: 'pick'; detail: PickColorDetail };
| { type: 'pick'; detail: Palette };

18
blocksuite/blocks/src/root-block/edgeless/components/color-picker/utils.ts
View File

@@ -7,7 +7,6 @@ import type {
Hsv,
Hsva,
ModeType,
PickColorDetail,
PickColorType,
Point,
Rgb,
@@ -269,12 +268,13 @@ export const preprocessColor = (style: CSSStyleDeclaration) => {
*
* ```json
* { 'fillColor': '--affine-palette-shape-yellow' }
* { 'fillColor': '#ffffff' }
* { 'fillColor': { normal: '#ffffffff' }}
* { 'fillColor': { light: '#fff000ff', 'dark': '#0000fff00' }}
* ```
*/
export const packColor = (key: string, detail: PickColorDetail) => {
return { [key]: detail.palette ?? detail };
export const packColor = (key: string, color: Color) => {
return { [key]: typeof color === 'object' ? { ...color } : color };
};
/**
@@ -298,10 +298,14 @@ export const packColorsWithColorScheme = (
let type: PickColorType = 'palette';
if (typeof oldColor === 'object') {
type = colorScheme in oldColor ? colorScheme : 'normal';
colors[0].value = oldColor.normal ?? value;
colors[1].value = oldColor.light ?? value;
colors[2].value = oldColor.dark ?? value;
if ('normal' in oldColor) {
type = 'normal';
colors[0].value = oldColor.normal ?? value;
} else {
type = colorScheme;
colors[1].value = oldColor.light ?? value;
colors[2].value = oldColor.dark ?? value;
}
}
return { type, colors };

90
blocksuite/blocks/src/root-block/edgeless/components/panel/color-panel.ts
View File

@@ -1,12 +1,15 @@
import { Black, ColorScheme, PALETTES, White } from '@blocksuite/affine-model';
import type { Color, ColorScheme, Palette } from '@blocksuite/affine-model';
import { isTransparent, resolveColor } from '@blocksuite/affine-model';
import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
import { css, html, LitElement, nothing, svg, type TemplateResult } from 'lit';
import { property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { repeat } from 'lit/directives/repeat.js';
import isEqual from 'lodash.isequal';
export class ColorEvent extends Event {
detail: string;
detail: Palette;
constructor(
type: string,
@@ -14,21 +17,13 @@ export class ColorEvent extends Event {
detail,
composed,
bubbles,
}: { detail: string; composed: boolean; bubbles: boolean }
}: { detail: Palette; composed: boolean; bubbles: boolean }
) {
super(type, { bubbles, composed });
this.detail = detail;
}
}
export const GET_DEFAULT_LINE_COLOR = (theme: ColorScheme) => {
return theme === ColorScheme.Dark ? White : Black;
};
export function isTransparent(color: string) {
return color.toLowerCase().endsWith('transparent');
}
function TransparentIcon(hollowCircle = false) {
const CircleIcon: TemplateResult | typeof nothing = hollowCircle
? svg`<circle cx="10" cy="10" r="8" fill="white" />`
@@ -125,7 +120,7 @@ export class EdgelessColorButton extends LitElement {
border-radius: 50%;
overflow: hidden;
}
:host .color-unit:after {
:host .color-unit::after {
position: absolute;
display: block;
content: '';
@@ -134,7 +129,6 @@ export class EdgelessColorButton extends LitElement {
border-radius: 50%;
box-sizing: border-box;
overflow: hidden;
pointer-events: none;
border-width: 0.5px;
border-style: solid;
border-color: ${unsafeCSSVarV2('layer/insideBorder/blackBorder')};
@@ -151,34 +145,32 @@ export class EdgelessColorButton extends LitElement {
width: 20px;
height: 20px;
}
:host([active]):after {
:host::after {
position: absolute;
display: block;
content: '';
width: 27px;
height: 27px;
border: 1.5px solid var(--affine-primary-color);
border-radius: 50%;
box-sizing: border-box;
overflow: hidden;
pointer-events: none;
}
:host([active])::after {
border: 1.5px solid var(--affine-primary-color);
}
`;
get preprocessColor() {
const color = this.color;
return color.startsWith('--') ? `var(${color})` : color;
const value = resolveColor(this.color, this.theme);
return value.startsWith('--') ? `var(${value})` : value;
}
override render() {
const { color, preprocessColor, hollowCircle, letter } = this;
const { label, preprocessColor, hollowCircle } = this;
const additionIcon = AdditionIcon(preprocessColor, !!hollowCircle);
return html`<div
class="color-unit"
aria-label=${color}
data-letter=${letter ? 'A' : nothing}
>
return html`<div class="color-unit" aria-label=${ifDefined(label)}>
${additionIcon}
</div>`;
}
@@ -187,13 +179,16 @@ export class EdgelessColorButton extends LitElement {
accessor active: boolean = false;
@property({ attribute: false })
accessor color!: string;
accessor color!: Color;
@property({ attribute: false })
accessor hollowCircle: boolean = false;
@property({ attribute: false })
accessor letter: boolean | undefined = undefined;
accessor label: string | undefined = undefined;
@property({ attribute: false })
accessor theme!: ColorScheme;
}
export class EdgelessColorPanel extends LitElement {
@@ -221,35 +216,42 @@ export class EdgelessColorPanel extends LitElement {
}
`;
onSelect(value: string) {
onSelect(palette: Palette) {
this.dispatchEvent(
new ColorEvent('select', {
detail: value,
detail: palette,
composed: true,
bubbles: true,
})
);
this.value = value;
}
get resolvedValue() {
return this.value && resolveColor(this.value, this.theme);
}
override render() {
const resolvedValue = this.resolvedValue;
return html`
${repeat(
this.palettes,
color => color,
color =>
html`<edgeless-color-button
class=${classMap({
large: true,
black: color.startsWith('--') && color.endsWith('black'),
})}
.color=${color}
.letter=${this.showLetterMark}
palette => palette.key,
palette => {
const resolvedColor = resolveColor(palette.value, this.theme);
return html`<edgeless-color-button
class=${classMap({ large: true })}
.label=${palette.key}
.color=${palette.value}
.theme=${this.theme}
.hollowCircle=${this.hollowCircle}
?active=${color === this.value}
@click=${() => this.onSelect(color)}
?active=${isEqual(resolvedColor, resolvedValue)}
@click=${() => {
this.onSelect(palette);
this.value = resolvedColor;
}}
>
</edgeless-color-button>`
</edgeless-color-button>`;
}
)}
<slot name="custom"></slot>
`;
@@ -265,13 +267,13 @@ export class EdgelessColorPanel extends LitElement {
accessor openColorPicker!: (e: MouseEvent) => void;
@property({ type: Array })
accessor palettes: readonly string[] = PALETTES;
accessor palettes: readonly Palette[] = [];
@property({ attribute: false })
accessor showLetterMark = false;
accessor theme!: ColorScheme;
@property({ attribute: false })
accessor value: string | null = null;
accessor value: Color | null = null;
}
export class EdgelessTextColorIcon extends LitElement {

14
blocksuite/blocks/src/root-block/edgeless/components/panel/line-styles-panel.ts
View File

@@ -3,7 +3,7 @@ import {
DashLineIcon,
StraightLineIcon,
} from '@blocksuite/affine-components/icons';
import { type LineWidth, StrokeStyle } from '@blocksuite/affine-model';
import { LineWidth, StrokeStyle } from '@blocksuite/affine-model';
import { html } from 'lit';
import { classMap } from 'lit/directives/class-map.js';
import { repeat } from 'lit/directives/repeat.js';
@@ -47,14 +47,14 @@ const LINE_STYLE_LIST = [
export function LineStylesPanel({
onClick,
selectedLineSize,
selectedLineStyle,
selectedLineSize = LineWidth.Two,
lineStyles = [StrokeStyle.Solid, StrokeStyle.Dash, StrokeStyle.None],
}: LineStylesPanelProps = {}) {
const lineSizePanel = html`
<edgeless-line-width-panel
.selectedSize=${selectedLineSize as LineWidth}
.disable=${selectedLineStyle === StrokeStyle.None}
?disabled=${selectedLineStyle === StrokeStyle.None}
.selectedSize=${selectedLineSize}
@select=${(e: LineWidthEvent) => {
onClick?.({
type: 'size',
@@ -69,15 +69,15 @@ export function LineStylesPanel({
item => item.value,
({ name, icon, value }) => {
const active = selectedLineStyle === value;
const classes: Record<string, boolean> = {
const classInfo = {
'line-style-button': true,
[`mode-${value}`]: true,
};
if (active) classes['active'] = true;
if (active) classInfo['active'] = true;
return html`
<edgeless-tool-icon-button
class=${classMap(classes)}
class=${classMap(classInfo)}
.active=${active}
.activeMode=${'background'}
.tooltip=${name}

12
blocksuite/blocks/src/root-block/edgeless/components/panel/stroke-style-panel.ts
View File

@@ -1,4 +1,8 @@
import { PALETTES, type StrokeStyle } from '@blocksuite/affine-model';
import {
type ColorScheme,
DefaultTheme,
type StrokeStyle,
} from '@blocksuite/affine-model';
import { WithDisposable } from '@blocksuite/global/utils';
import { css, html, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
@@ -38,8 +42,9 @@ export class StrokeStylePanel extends WithDisposable(LitElement) {
<edgeless-color-panel
role="listbox"
aria-label="Border colors"
.palettes=${PALETTES}
.value=${this.strokeColor}
.theme=${this.theme}
.palettes=${DefaultTheme.Palettes}
.hollowCircle=${this.hollowCircle}
@select=${(e: ColorEvent) => this.setStrokeColor(e)}
>
@@ -64,6 +69,9 @@ export class StrokeStylePanel extends WithDisposable(LitElement) {
@property({ attribute: false })
accessor strokeWidth!: number;
@property({ attribute: false })
accessor theme!: ColorScheme;
}
declare global {

24
blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-menu.ts
View File

@@ -1,4 +1,4 @@
import { STROKE_COLORS } from '@blocksuite/affine-model';
import { DefaultTheme } from '@blocksuite/affine-model';
import {
EditPropsStore,
ThemeProvider,
@@ -9,10 +9,7 @@ import { computed } from '@preact/signals-core';
import { css, html, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import {
type ColorEvent,
GET_DEFAULT_LINE_COLOR,
} from '../../panel/color-panel.js';
import type { ColorEvent } from '../../panel/color-panel.js';
import type { LineWidthEvent } from '../../panel/line-width-panel.js';
import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js';
@@ -46,14 +43,13 @@ export class EdgelessBrushMenu extends EdgelessToolbarToolMixin(
};
});
private readonly _theme$ = computed(() => {
return this.edgeless.std.get(ThemeProvider).theme$.value;
});
type: GfxToolsFullOptionValue['type'] = 'brush';
override render() {
const theme = this.edgeless.std.get(ThemeProvider).theme;
const color = this.edgeless.std
.get(ThemeProvider)
.getColorValue(this._props$.value.color, GET_DEFAULT_LINE_COLOR(theme));
return html`
<edgeless-slide-menu>
<div class="menu-content">
@@ -66,12 +62,14 @@ export class EdgelessBrushMenu extends EdgelessToolbarToolMixin(
<menu-divider .vertical=${true}></menu-divider>
<edgeless-color-panel
class="one-way"
.value=${color}
.palettes=${STROKE_COLORS}
.value=${this._props$.value.color}
.theme=${this._theme$.value}
.palettes=${DefaultTheme.StrokeColorPalettes}
.hasTransparent=${!this.edgeless.doc.awarenessStore.getFlag(
'enable_color_picker'
)}
@select=${(e: ColorEvent) => this.onChange({ color: e.detail })}
@select=${(e: ColorEvent) =>
this.onChange({ color: e.detail.value })}
></edgeless-color-panel>
</div>
</edgeless-slide-menu>

21
blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts
View File

@@ -3,11 +3,7 @@ import {
ConnectorLWithArrowIcon,
ConnectorXWithArrowIcon,
} from '@blocksuite/affine-components/icons';
import {
ConnectorMode,
DEFAULT_CONNECTOR_COLOR,
STROKE_COLORS,
} from '@blocksuite/affine-model';
import { ConnectorMode, DefaultTheme } from '@blocksuite/affine-model';
import {
EditPropsStore,
ThemeProvider,
@@ -104,6 +100,10 @@ export class EdgelessConnectorMenu extends EdgelessToolbarToolMixin(
return { mode, stroke, strokeWidth };
});
private readonly _theme$ = computed(() => {
return this.edgeless.std.get(ThemeProvider).theme$.value;
});
override type: GfxToolsFullOptionValue['type'] = 'connector';
override render() {
@@ -112,9 +112,6 @@ export class EdgelessConnectorMenu extends EdgelessToolbarToolMixin(
mode,
this.onChange
);
const color = this.edgeless.std
.get(ThemeProvider)
.getColorValue(stroke, DEFAULT_CONNECTOR_COLOR);
return html`
<edgeless-slide-menu>
@@ -130,12 +127,14 @@ export class EdgelessConnectorMenu extends EdgelessToolbarToolMixin(
<div class="submenu-divider"></div>
<edgeless-color-panel
class="one-way"
.value=${color}
.palettes=${STROKE_COLORS}
.value=${stroke}
.theme=${this._theme$.value}
.palettes=${DefaultTheme.StrokeColorPalettes}
.hasTransparent=${!this.edgeless.doc.awarenessStore.getFlag(
'enable_color_picker'
)}
@select=${(e: ColorEvent) => this.onChange({ stroke: e.detail })}
@select=${(e: ColorEvent) =>
this.onChange({ stroke: e.detail.value })}
></edgeless-color-panel>
</div>
</edgeless-slide-menu>

13
blocksuite/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts
View File

@@ -1,4 +1,4 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */
/* oxlint-disable @typescript-eslint/no-non-null-assertion */
import {
type MenuHandler,
popMenu,
@@ -25,6 +25,7 @@ import { debounce } from '@blocksuite/global/utils';
import { Slot } from '@blocksuite/store';
import { autoPlacement, offset } from '@floating-ui/dom';
import { ContextProvider } from '@lit/context';
import { computed } from '@preact/signals-core';
import { baseTheme, cssVar } from '@toeverything/theme';
import { css, html, nothing, unsafeCSS } from 'lit';
import { query, state } from 'lit/decorators.js';
@@ -222,6 +223,10 @@ export class EdgelessToolbarWidget extends WidgetComponent<
}
`;
private readonly _appTheme$ = computed(() => {
return this.std.get(ThemeProvider).app$.value;
});
private _moreQuickToolsMenu: MenuHandler | null = null;
private _moreQuickToolsMenuRef: HTMLElement | null = null;
@@ -625,9 +630,11 @@ export class EdgelessToolbarWidget extends WidgetComponent<
return nothing;
}
const appTheme = this.std.get(ThemeProvider).app$.value;
return html`
<div class="edgeless-toolbar-wrapper" data-app-theme=${appTheme}>
<div
class="edgeless-toolbar-wrapper"
data-app-theme=${this._appTheme$.value}
>
<div
class="edgeless-toolbar-toggle-control"
data-enable=${this._enableAutoHide}

2
blocksuite/blocks/src/root-block/edgeless/components/toolbar/note/note-senior-button.ts
View File

@@ -166,7 +166,7 @@ export class EdgelessNoteSeniorButton extends EdgelessToolbarToolMixin(
}>
) => {
this._states.forEach(key => {
// eslint-disable-next-line eqeqeq
// oxlint-disable-next-line eqeqeq
if (props[key] != undefined) {
Object.assign(this, { [key]: props[key] });
}

2
blocksuite/blocks/src/root-block/edgeless/components/toolbar/note/note-tool-button.ts
View File

@@ -60,7 +60,7 @@ export class EdgelessNoteToolButton extends QuickToolMixin(LitElement) {
}>
) => {
this._states.forEach(key => {
// eslint-disable-next-line eqeqeq
// oxlint-disable-next-line eqeqeq
if (props[key] != undefined) {
Object.assign(this, { [key]: props[key] });
}

46
blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts
View File

@@ -3,27 +3,24 @@ import {
ScribbledStyleIcon,
} from '@blocksuite/affine-components/icons';
import {
DEFAULT_SHAPE_FILL_COLOR,
LIGHT_PALETTES,
MEDIUM_PALETTES,
SHAPE_FILL_COLORS,
DefaultTheme,
isTransparent,
type Palette,
type ShapeName,
ShapeStyle,
ShapeType,
StrokeColor,
} from '@blocksuite/affine-model';
import {
EditPropsStore,
ThemeProvider,
} from '@blocksuite/affine-shared/services';
import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
import type { Signal } from '@preact/signals-core';
import { computed, effect, signal } from '@preact/signals-core';
import { computed, effect, type Signal, signal } from '@preact/signals-core';
import { css, html, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import type { EdgelessRootBlockComponent } from '../../../edgeless-root-block.js';
import { type ColorEvent, isTransparent } from '../../panel/color-panel.js';
import type { ColorEvent } from '../../panel/color-panel.js';
import { ShapeComponentConfig } from './shape-menu-config.js';
export class EdgelessShapeMenu extends SignalWatcher(
@@ -76,20 +73,13 @@ export class EdgelessShapeMenu extends SignalWatcher(
};
});
private readonly _setFillColor = (fillColor: string) => {
const filled = !isTransparent(fillColor);
let strokeColor = fillColor; // white or black
if (filled) {
const index = LIGHT_PALETTES.findIndex(color => color === fillColor);
if (index !== -1) {
strokeColor = MEDIUM_PALETTES[index];
}
}
if (strokeColor.endsWith('transparent')) {
strokeColor = StrokeColor.Grey;
}
private readonly _setFillColor = ({ key, value }: Palette) => {
const filled = !isTransparent(value);
const fillColor = value;
const strokeColor = filled
? DefaultTheme.StrokeColorPalettes.find(palette => palette.key === key)
?.value
: DefaultTheme.StrokeColorMap.Grey;
const { shapeName } = this._props$.value;
this.edgeless.std
@@ -112,6 +102,10 @@ export class EdgelessShapeMenu extends SignalWatcher(
this.onChange(shapeName);
};
private readonly _theme$ = computed(() => {
return this.edgeless.std.get(ThemeProvider).theme$.value;
});
override connectedCallback(): void {
super.connectedCallback();
@@ -128,9 +122,6 @@ export class EdgelessShapeMenu extends SignalWatcher(
override render() {
const { fillColor, shapeStyle, shapeName } = this._props$.value;
const color = this.edgeless.std
.get(ThemeProvider)
.getColorValue(fillColor, DEFAULT_SHAPE_FILL_COLOR);
return html`
<edgeless-slide-menu>
@@ -179,8 +170,9 @@ export class EdgelessShapeMenu extends SignalWatcher(
<menu-divider .vertical=${true}></menu-divider>
<edgeless-color-panel
class="one-way"
.value=${color}
.palettes=${SHAPE_FILL_COLORS}
.value=${fillColor}
.theme=${this._theme$.value}
.palettes=${DefaultTheme.FillColorPalettes}
.hasTransparent=${!this.edgeless.doc.awarenessStore.getFlag(
'enable_color_picker'
)}

11
blocksuite/blocks/src/root-block/edgeless/components/toolbar/text/text-menu.ts
View File

@@ -1,5 +1,7 @@
import { STROKE_COLORS } from '@blocksuite/affine-model';
import { DefaultTheme } from '@blocksuite/affine-model';
import { ThemeProvider } from '@blocksuite/affine-shared/services';
import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
import { computed } from '@preact/signals-core';
import { css, html, LitElement, nothing } from 'lit';
import { property } from 'lit/decorators.js';
@@ -15,6 +17,10 @@ export class EdgelessTextMenu extends EdgelessToolbarToolMixin(LitElement) {
}
`;
private readonly _theme$ = computed(() => {
return this.edgeless.std.get(ThemeProvider).theme$.value;
});
override type: GfxToolsFullOptionValue['type'] = 'text';
override render() {
@@ -26,7 +32,8 @@ export class EdgelessTextMenu extends EdgelessToolbarToolMixin(LitElement) {
<edgeless-color-panel
class="one-way"
.value=${this.color}
.palettes=${STROKE_COLORS}
.theme=${this._theme$.value}
.palettes=${DefaultTheme.StrokeColorPalettes}
@select=${(e: ColorEvent) => this.onChange({ color: e.detail })}
></edgeless-color-panel>
</div>

2
blocksuite/blocks/src/root-block/edgeless/gfx-tool/copilot-tool.ts
View File

@@ -1,4 +1,4 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */
/* oxlint-disable @typescript-eslint/no-non-null-assertion */
import type { PointerEventState } from '@blocksuite/block-std';
import { BaseTool, MouseButton } from '@blocksuite/block-std/gfx';
import { IS_MAC } from '@blocksuite/global/env';

14
blocksuite/blocks/src/root-block/edgeless/gfx-tool/shape-tool.ts
View File

@@ -3,11 +3,7 @@ import {
type SurfaceBlockComponent,
} from '@blocksuite/affine-block-surface';
import type { ShapeElementModel, ShapeName } from '@blocksuite/affine-model';
import {
DEFAULT_SHAPE_FILL_COLOR,
DEFAULT_SHAPE_STROKE_COLOR,
getShapeType,
} from '@blocksuite/affine-model';
import { DefaultTheme, getShapeType } from '@blocksuite/affine-model';
import {
EditPropsStore,
TelemetryProvider,
@@ -202,10 +198,14 @@ export class ShapeTool extends BaseTool<ShapeToolOption> {
options.stroke = this.std
.get(ThemeProvider)
.getColorValue(attributes.strokeColor, DEFAULT_SHAPE_STROKE_COLOR, true);
.getColorValue(
attributes.strokeColor,
DefaultTheme.shapeStrokeColor,
true
);
options.fill = this.std
.get(ThemeProvider)
.getColorValue(attributes.fillColor, DEFAULT_SHAPE_FILL_COLOR, true);
.getColorValue(attributes.fillColor, DefaultTheme.shapeFillColor, true);
switch (attributes.strokeStyle!) {
case 'dash':

6
blocksuite/blocks/src/root-block/edgeless/utils/consts.ts
View File

@@ -1,9 +1,7 @@
import {
Black,
DEFAULT_ROUGHNESS,
LineWidth,
StrokeStyle,
White,
} from '@blocksuite/affine-model';
export const NOTE_OVERLAY_OFFSET_X = 6;
@@ -48,10 +46,6 @@ export const SurfaceColor = '#6046FE';
export const NoteColor = '#1E96EB';
export const BlendColor = '#7D91FF';
export const SHAPE_TEXT_COLOR_PURE_WHITE = White;
export const SHAPE_TEXT_COLOR_PURE_BLACK = Black;
export const SHAPE_FILL_COLOR_BLACK = Black;
export const AI_CHAT_BLOCK_MIN_WIDTH = 260;
export const AI_CHAT_BLOCK_MIN_HEIGHT = 160;
export const AI_CHAT_BLOCK_MAX_WIDTH = 320;

10
blocksuite/blocks/src/root-block/edgeless/utils/tool-overlay.ts
View File

@@ -6,9 +6,7 @@ import {
} from '@blocksuite/affine-block-surface';
import {
type Color,
DEFAULT_NOTE_BACKGROUND_COLOR,
DEFAULT_SHAPE_FILL_COLOR,
DEFAULT_SHAPE_STROKE_COLOR,
DefaultTheme,
shapeMethods,
type ShapeStyle,
} from '@blocksuite/affine-model';
@@ -286,10 +284,10 @@ export class ShapeOverlay extends ToolOverlay {
const { shapeStyle, fillColor, strokeColor } = style;
const fill = this.gfx.std
.get(ThemeProvider)
.getColorValue(fillColor, DEFAULT_SHAPE_FILL_COLOR, true);
.getColorValue(fillColor, DefaultTheme.shapeFillColor, true);
const stroke = this.gfx.std
.get(ThemeProvider)
.getColorValue(strokeColor, DEFAULT_SHAPE_STROKE_COLOR, true);
.getColorValue(strokeColor, DefaultTheme.shapeStrokeColor, true);
options.fill = fill;
options.stroke = stroke;
@@ -356,7 +354,7 @@ export class NoteOverlay extends ToolOverlay {
this.globalAlpha = 0;
this.backgroundColor = gfx.std
.get(ThemeProvider)
.getColorValue(background, DEFAULT_NOTE_BACKGROUND_COLOR, true);
.getColorValue(background, DefaultTheme.noteBackgrounColor, true);
this.disposables.add(
effect(() => {
// when change note child type, update overlay text

67
blocksuite/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts
View File

@@ -4,10 +4,14 @@ import type {
BrushProps,
ColorScheme,
} from '@blocksuite/affine-model';
import { LineWidth, PALETTES } from '@blocksuite/affine-model';
import {
DefaultTheme,
LineWidth,
resolveColor,
} from '@blocksuite/affine-model';
import { countBy, maxBy, WithDisposable } from '@blocksuite/global/utils';
import { html, LitElement, nothing } from 'lit';
import { property, query, state } from 'lit/decorators.js';
import { property, query } from 'lit/decorators.js';
import { when } from 'lit/directives/when.js';
import type { EdgelessColorPickerButton } from '../../edgeless/components/color-picker/button.js';
@@ -17,7 +21,6 @@ import {
packColorsWithColorScheme,
} from '../../edgeless/components/color-picker/utils.js';
import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js';
import { GET_DEFAULT_LINE_COLOR } from '../../edgeless/components/panel/color-panel.js';
import type { LineWidthEvent } from '../../edgeless/components/panel/line-width-panel.js';
import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
@@ -25,13 +28,13 @@ function getMostCommonColor(
elements: BrushElementModel[],
colorScheme: ColorScheme
): string {
const colors = countBy(elements, (ele: BrushElementModel) => {
return typeof ele.color === 'object'
? (ele.color[colorScheme] ?? ele.color.normal ?? null)
: ele.color;
});
const colors = countBy(elements, (ele: BrushElementModel) =>
resolveColor(ele.color, colorScheme)
);
const max = maxBy(Object.entries(colors), ([_k, count]) => count);
return max ? (max[0] as string) : GET_DEFAULT_LINE_COLOR(colorScheme);
return max
? (max[0] as string)
: resolveColor(DefaultTheme.black, colorScheme);
}
function getMostCommonSize(elements: BrushElementModel[]): LineWidth {
@@ -45,26 +48,29 @@ function notEqual<K extends keyof BrushProps>(key: K, value: BrushProps[K]) {
}
export class EdgelessChangeBrushButton extends WithDisposable(LitElement) {
private readonly _setBrushColor = ({ detail: color }: ColorEvent) => {
private readonly _setBrushColor = ({ detail }: ColorEvent) => {
const color = detail.value;
this._setBrushProp('color', color);
this._selectedColor = color;
};
private readonly _setLineWidth = ({ detail: lineWidth }: LineWidthEvent) => {
this._setBrushProp('lineWidth', lineWidth);
this._selectedSize = lineWidth;
};
pickColor = (event: PickColorEvent) => {
if (event.type === 'pick') {
this.elements.forEach(ele =>
this.crud.updateElement(ele.id, packColor('color', { ...event.detail }))
);
pickColor = (e: PickColorEvent) => {
const field = 'color';
if (e.type === 'pick') {
const color = e.detail.value;
this.elements.forEach(ele => {
const props = packColor(field, color);
this.crud.updateElement(ele.id, props);
});
return;
}
this.elements.forEach(ele =>
ele[event.type === 'start' ? 'stash' : 'pop']('color')
ele[e.type === 'start' ? 'stash' : 'pop'](field)
);
};
@@ -72,17 +78,6 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) {
return this.edgeless.doc;
}
get selectedColor() {
const colorScheme = this.edgeless.surface.renderer.getColorScheme();
return (
this._selectedColor ?? getMostCommonColor(this.elements, colorScheme)
);
}
get selectedSize() {
return this._selectedSize ?? getMostCommonSize(this.elements);
}
get service() {
return this.edgeless.service;
}
@@ -110,7 +105,8 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) {
override render() {
const colorScheme = this.edgeless.surface.renderer.getColorScheme();
const elements = this.elements;
const { selectedSize, selectedColor } = this;
const selectedColor = getMostCommonColor(elements, colorScheme);
const selectedSize = getMostCommonSize(elements);
return html`
<edgeless-line-width-panel
@@ -138,7 +134,8 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) {
.color=${selectedColor}
.colors=${colors}
.colorType=${type}
.palettes=${PALETTES}
.theme=${colorScheme}
.palettes=${DefaultTheme.Palettes}
>
</edgeless-color-picker-button>
`;
@@ -156,6 +153,8 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) {
>
<edgeless-color-panel
.value=${selectedColor}
.theme=${colorScheme}
.palettes=${DefaultTheme.Palettes}
@select=${this._setBrushColor}
>
</edgeless-color-panel>
@@ -165,12 +164,6 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) {
`;
}
@state()
private accessor _selectedColor: string | null = null;
@state()
private accessor _selectedSize: LineWidth | null = null;
@query('edgeless-color-picker-button.color')
accessor colorButton!: EdgelessColorPickerButton;

114
blocksuite/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts
View File

@@ -28,9 +28,10 @@ import {
ConnectorMode,
DEFAULT_FRONT_END_POINT_STYLE,
DEFAULT_REAR_END_POINT_STYLE,
DefaultTheme,
LineWidth,
PALETTES,
PointStyle,
resolveColor,
StrokeStyle,
} from '@blocksuite/affine-model';
import { countBy, maxBy, WithDisposable } from '@blocksuite/global/utils';
@@ -48,10 +49,7 @@ import {
packColor,
packColorsWithColorScheme,
} from '../../edgeless/components/color-picker/utils.js';
import {
type ColorEvent,
GET_DEFAULT_LINE_COLOR,
} from '../../edgeless/components/panel/color-panel.js';
import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js';
import {
type LineStyleEvent,
LineStylesPanel,
@@ -62,14 +60,14 @@ import { mountConnectorLabelEditor } from '../../edgeless/utils/text.js';
function getMostCommonColor(
elements: ConnectorElementModel[],
colorScheme: ColorScheme
): string | null {
const colors = countBy(elements, (ele: ConnectorElementModel) => {
return typeof ele.stroke === 'object'
? (ele.stroke[colorScheme] ?? ele.stroke.normal ?? null)
: ele.stroke;
});
): string {
const colors = countBy(elements, (ele: ConnectorElementModel) =>
resolveColor(ele.stroke, colorScheme)
);
const max = maxBy(Object.entries(colors), ([_k, count]) => count);
return max ? (max[0] as string) : null;
return max
? (max[0] as string)
: resolveColor(DefaultTheme.connectorColor, colorScheme);
}
function getMostCommonMode(
@@ -88,10 +86,10 @@ function getMostCommonLineWidth(elements: ConnectorElementModel[]): LineWidth {
export function getMostCommonLineStyle(
elements: ConnectorElementModel[]
): StrokeStyle | null {
): StrokeStyle {
const sizes = countBy(elements, ele => ele.strokeStyle);
const max = maxBy(Object.entries(sizes), ([_k, count]) => count);
return max ? (max[0] as StrokeStyle) : null;
return max ? (max[0] as StrokeStyle) : StrokeStyle.Solid;
}
function getMostCommonRough(elements: ConnectorElementModel[]): boolean {
@@ -112,15 +110,16 @@ function getMostCommonRough(elements: ConnectorElementModel[]): boolean {
function getMostCommonEndpointStyle(
elements: ConnectorElementModel[],
endpoint: ConnectorEndpoint
): PointStyle | null {
endpoint: ConnectorEndpoint,
fallback: PointStyle
): PointStyle {
const field =
endpoint === ConnectorEndpoint.Front
? 'frontEndpointStyle'
: 'rearEndpointStyle';
const modes = countBy(elements, ele => ele[field]);
const max = maxBy(Object.entries(modes), ([_k, count]) => count);
return max ? (max[0] as PointStyle) : null;
return max ? (max[0] as PointStyle) : fallback;
}
function notEqual<
@@ -227,19 +226,33 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
return this.edgeless.std.get(EdgelessCRUDIdentifier);
}
pickColor = (event: PickColorEvent) => {
if (event.type === 'pick') {
this.elements.forEach(ele =>
this.crud.updateElement(
ele.id,
packColor('stroke', { ...event.detail })
)
);
private readonly _setConnectorColor = (e: ColorEvent) => {
const stroke = e.detail.value;
this._setConnectorProp('stroke', stroke);
};
private readonly _setConnectorStroke = ({ type, value }: LineStyleEvent) => {
if (type === 'size') {
this._setConnectorStrokeWidth(value);
return;
}
this._setConnectorStrokeStyle(value);
};
pickColor = (e: PickColorEvent) => {
const field = 'stroke';
if (e.type === 'pick') {
const color = e.detail.value;
this.elements.forEach(ele => {
const props = packColor(field, color);
this.crud.updateElement(ele.id, props);
});
return;
}
this.elements.forEach(ele =>
ele[event.type === 'start' ? 'stash' : 'pop']('stroke')
ele[e.type === 'start' ? 'stash' : 'pop'](field)
);
};
@@ -276,10 +289,6 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
);
}
private _setConnectorColor(stroke: string) {
this._setConnectorProp('stroke', stroke);
}
private _setConnectorMode(mode: ConnectorMode) {
this._setConnectorProp('mode', mode);
}
@@ -310,14 +319,6 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
this._setConnectorProp('rough', rough);
}
private _setConnectorStroke({ type, value }: LineStyleEvent) {
if (type === 'size') {
this._setConnectorStrokeWidth(value);
return;
}
this._setConnectorStrokeStyle(value);
}
private _setConnectorStrokeStyle(strokeStyle: StrokeStyle) {
this._setConnectorProp('strokeStyle', strokeStyle);
}
@@ -339,20 +340,21 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
override render() {
const colorScheme = this.edgeless.surface.renderer.getColorScheme();
const elements = this.elements;
const selectedColor =
getMostCommonColor(elements, colorScheme) ??
GET_DEFAULT_LINE_COLOR(colorScheme);
const selectedColor = getMostCommonColor(elements, colorScheme);
const selectedMode = getMostCommonMode(elements);
const selectedLineSize = getMostCommonLineWidth(elements) ?? LineWidth.Four;
const selectedLineSize = getMostCommonLineWidth(elements);
const selectedRough = getMostCommonRough(elements);
const selectedLineStyle =
getMostCommonLineStyle(elements) ?? StrokeStyle.Solid;
const selectedStartPointStyle =
getMostCommonEndpointStyle(elements, ConnectorEndpoint.Front) ??
DEFAULT_FRONT_END_POINT_STYLE;
const selectedEndPointStyle =
getMostCommonEndpointStyle(elements, ConnectorEndpoint.Rear) ??
DEFAULT_REAR_END_POINT_STYLE;
const selectedLineStyle = getMostCommonLineStyle(elements);
const selectedStartPointStyle = getMostCommonEndpointStyle(
elements,
ConnectorEndpoint.Front,
DEFAULT_FRONT_END_POINT_STYLE
);
const selectedEndPointStyle = getMostCommonEndpointStyle(
elements,
ConnectorEndpoint.Rear,
DEFAULT_REAR_END_POINT_STYLE
);
return join(
[
@@ -373,7 +375,8 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
.color=${selectedColor}
.colors=${colors}
.colorType=${type}
.palettes=${PALETTES}
.theme=${colorScheme}
.palettes=${DefaultTheme.Palettes}
.hollowCircle=${true}
>
<div
@@ -389,7 +392,7 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
${LineStylesPanel({
selectedLineSize: selectedLineSize,
selectedLineStyle: selectedLineStyle,
onClick: (e: LineStyleEvent) => this._setConnectorStroke(e),
onClick: this._setConnectorStroke,
})}
</div>
<editor-toolbar-separator
@@ -414,13 +417,12 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
`}
>
<stroke-style-panel
.theme=${colorScheme}
.strokeWidth=${selectedLineSize}
.strokeStyle=${selectedLineStyle}
.strokeColor=${selectedColor}
.setStrokeStyle=${(e: LineStyleEvent) =>
this._setConnectorStroke(e)}
.setStrokeColor=${(e: ColorEvent) =>
this._setConnectorColor(e.detail)}
.setStrokeStyle=${this._setConnectorStroke}
.setStrokeColor=${this._setConnectorColor}
>
</stroke-style-panel>
</editor-menu-button>

57
blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts
View File

@@ -9,9 +9,10 @@ import { renderToolbarSeparator } from '@blocksuite/affine-components/toolbar';
import {
type ColorScheme,
DEFAULT_NOTE_HEIGHT,
DefaultTheme,
type FrameBlockModel,
NoteDisplayMode,
PALETTES,
resolveColor,
} from '@blocksuite/affine-model';
import { matchFlavours } from '@blocksuite/affine-shared/utils';
import { GfxExtensionIdentifier } from '@blocksuite/block-std/gfx';
@@ -41,14 +42,12 @@ import { mountFrameTitleEditor } from '../../edgeless/utils/text.js';
function getMostCommonColor(
elements: FrameBlockModel[],
colorScheme: ColorScheme
): string | null {
const colors = countBy(elements, (ele: FrameBlockModel) => {
return typeof ele.background === 'object'
? (ele.background[colorScheme] ?? ele.background.normal ?? null)
: ele.background;
});
): string {
const colors = countBy(elements, (ele: FrameBlockModel) =>
resolveColor(ele.background, colorScheme)
);
const max = maxBy(Object.entries(colors), ([_k, count]) => count);
return max ? (max[0] as string) : null;
return max ? (max[0] as string) : 'transparent';
}
export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
@@ -56,19 +55,27 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
return this.edgeless.std.get(EdgelessCRUDIdentifier);
}
pickColor = (event: PickColorEvent) => {
if (event.type === 'pick') {
this.frames.forEach(ele =>
this.crud.updateElement(
ele.id,
packColor('background', { ...event.detail })
)
);
private readonly _setFrameBackground = (e: ColorEvent) => {
const background = e.detail.value;
this.frames.forEach(frame => {
this.crud.updateElement(frame.id, { background });
});
};
pickColor = (e: PickColorEvent) => {
const field = 'background';
if (e.type === 'pick') {
const color = e.detail.value;
this.frames.forEach(ele => {
const props = packColor(field, color);
this.crud.updateElement(ele.id, props);
});
return;
}
this.frames.forEach(ele =>
ele[event.type === 'start' ? 'stash' : 'pop']('background')
ele[e.type === 'start' ? 'stash' : 'pop'](field)
);
};
@@ -119,18 +126,12 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
toast(this.edgeless.host, 'Frame has been inserted into doc');
}
private _setFrameBackground(color: string) {
this.frames.forEach(frame => {
this.crud.updateElement(frame.id, { background: color });
});
}
protected override render() {
const { frames } = this;
const len = frames.length;
const onlyOne = len === 1;
const colorScheme = this.edgeless.surface.renderer.getColorScheme();
const background = getMostCommonColor(frames, colorScheme) ?? 'transparent';
const background = getMostCommonColor(frames, colorScheme);
return join(
[
@@ -203,7 +204,8 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
.color=${background}
.colors=${colors}
.colorType=${type}
.palettes=${PALETTES}
.theme=${colorScheme}
.palettes=${DefaultTheme.Palettes}
>
</edgeless-color-picker-button>
`;
@@ -224,8 +226,9 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
>
<edgeless-color-panel
.value=${background}
.palettes=${PALETTES}
@select=${(e: ColorEvent) => this._setFrameBackground(e.detail)}
.theme=${colorScheme}
.palettes=${DefaultTheme.Palettes}
@select=${this._setFrameBackground}
>
</edgeless-color-panel>
</editor-menu-button>

2
blocksuite/blocks/src/root-block/widgets/element-toolbar/change-mindmap-button.ts
View File

@@ -1,4 +1,4 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */
/* oxlint-disable @typescript-eslint/no-non-null-assertion */
import {
MindmapBalanceLayoutIcon,
MindmapLeftLayoutIcon,

58
blocksuite/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts
View File

@@ -14,10 +14,10 @@ import {
} from '@blocksuite/affine-components/toolbar';
import {
type ColorScheme,
DEFAULT_NOTE_BACKGROUND_COLOR,
NOTE_BACKGROUND_PALETTES,
DefaultTheme,
type NoteBlockModel,
NoteDisplayMode,
resolveColor,
type StrokeStyle,
} from '@blocksuite/affine-model';
import { ThemeProvider } from '@blocksuite/affine-shared/services';
@@ -43,7 +43,6 @@ import {
packColor,
packColorsWithColorScheme,
} from '../../edgeless/components/color-picker/utils.js';
import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js';
import {
type LineStyleEvent,
LineStylesPanel,
@@ -68,14 +67,14 @@ const DisplayModeMap = {
function getMostCommonBackground(
elements: NoteBlockModel[],
colorScheme: ColorScheme
): string | null {
const colors = countBy(elements, (ele: NoteBlockModel) => {
return typeof ele.background === 'object'
? (ele.background[colorScheme] ?? ele.background.normal ?? null)
: ele.background;
});
): string {
const colors = countBy(elements, (ele: NoteBlockModel) =>
resolveColor(ele.background, colorScheme)
);
const max = maxBy(Object.entries(colors), ([_k, count]) => count);
return max ? (max[0] as string) : null;
return max
? (max[0] as string)
: resolveColor(DefaultTheme.noteBackgrounColor, colorScheme);
}
export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
@@ -83,6 +82,12 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
return this.edgeless.std.get(EdgelessCRUDIdentifier);
}
private readonly _setBackground = (background: string) => {
this.notes.forEach(element => {
this.crud.updateElement(element.id, { background });
});
};
private readonly _setBorderRadius = (borderRadius: number) => {
this.notes.forEach(note => {
const props = {
@@ -112,18 +117,19 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
});
};
pickColor = (event: PickColorEvent) => {
if (event.type === 'pick') {
pickColor = (e: PickColorEvent) => {
const field = 'background';
if (e.type === 'pick') {
const color = e.detail.value;
this.notes.forEach(element => {
const props = packColor('background', { ...event.detail });
const props = packColor(field, color);
this.crud.updateElement(element.id, props);
});
return;
}
this.notes.forEach(ele =>
ele[event.type === 'start' ? 'stash' : 'pop']('background')
);
this.notes.forEach(ele => ele[e.type === 'start' ? 'stash' : 'pop'](field));
};
private get _advancedVisibilityEnabled() {
@@ -145,12 +151,6 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
this.edgeless.slots.toggleNoteSlicer.emit();
}
private _setBackground(background: string) {
this.notes.forEach(element => {
this.crud.updateElement(element.id, { background });
});
}
private _setCollapse() {
this.notes.forEach(note => {
const { collapse, collapsedHeight } = note.edgeless;
@@ -262,9 +262,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
const { shadowType, borderRadius, borderSize, borderStyle } =
edgeless.style;
const colorScheme = this.edgeless.surface.renderer.getColorScheme();
const background =
getMostCommonBackground(this.notes, colorScheme) ??
DEFAULT_NOTE_BACKGROUND_COLOR;
const background = getMostCommonBackground(this.notes, colorScheme);
const { collapse } = edgeless;
const scale = edgeless.scale ?? 1;
@@ -317,9 +315,11 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
.label=${'Background'}
.pick=${this.pickColor}
.color=${background}
.colorPanelClass=${'small'}
.colorType=${type}
.colors=${colors}
.palettes=${NOTE_BACKGROUND_PALETTES}
.theme=${colorScheme}
.palettes=${DefaultTheme.NoteBackgroundColorPalettes}
>
</edgeless-color-picker-button>
`;
@@ -339,9 +339,11 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
`}
>
<edgeless-color-panel
class="small"
.value=${background}
.options=${NOTE_BACKGROUND_PALETTES}
@select=${(e: ColorEvent) => this._setBackground(e.detail)}
.theme=${colorScheme}
.palettes=${DefaultTheme.NoteBackgroundColorPalettes}
@select=${this._setBackground}
>
</edgeless-color-panel>
</editor-menu-button>

224
blocksuite/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts
View File

@@ -8,20 +8,21 @@ import {
} from '@blocksuite/affine-components/icons';
import { renderToolbarSeparator } from '@blocksuite/affine-components/toolbar';
import type {
Color,
ColorScheme,
ShapeElementModel,
ShapeProps,
} from '@blocksuite/affine-model';
import {
DEFAULT_SHAPE_FILL_COLOR,
DEFAULT_SHAPE_STROKE_COLOR,
DefaultTheme,
FontFamily,
getShapeName,
getShapeRadius,
getShapeType,
isTransparent,
LineWidth,
MindmapElementModel,
PALETTES,
resolveColor,
ShapeStyle,
StrokeStyle,
} from '@blocksuite/affine-model';
@@ -33,6 +34,7 @@ import { choose } from 'lit/directives/choose.js';
import { join } from 'lit/directives/join.js';
import { styleMap } from 'lit/directives/style-map.js';
import { when } from 'lit/directives/when.js';
import isEqual from 'lodash.isequal';
import type { EdgelessColorPickerButton } from '../../edgeless/components/color-picker/button.js';
import type { PickColorEvent } from '../../edgeless/components/color-picker/types.js';
@@ -40,11 +42,7 @@ import {
packColor,
packColorsWithColorScheme,
} from '../../edgeless/components/color-picker/utils.js';
import {
type ColorEvent,
GET_DEFAULT_LINE_COLOR,
isTransparent,
} from '../../edgeless/components/panel/color-panel.js';
import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js';
import {
type LineStyleEvent,
LineStylesPanel,
@@ -52,11 +50,6 @@ import {
import type { EdgelessShapePanel } from '../../edgeless/components/panel/shape-panel.js';
import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
import type { ShapeToolOption } from '../../edgeless/gfx-tool/shape-tool.js';
import {
SHAPE_FILL_COLOR_BLACK,
SHAPE_TEXT_COLOR_PURE_BLACK,
SHAPE_TEXT_COLOR_PURE_WHITE,
} from '../../edgeless/utils/consts.js';
import { mountShapeTextEditor } from '../../edgeless/utils/text.js';
const changeShapeButtonStyles = [
@@ -88,62 +81,56 @@ const changeShapeButtonStyles = [
function getMostCommonFillColor(
elements: ShapeElementModel[],
colorScheme: ColorScheme
): string | null {
const colors = countBy(elements, (ele: ShapeElementModel) => {
if (ele.filled) {
return typeof ele.fillColor === 'object'
? (ele.fillColor[colorScheme] ?? ele.fillColor.normal ?? null)
: ele.fillColor;
}
return 'transparent';
});
): string {
const colors = countBy(elements, (ele: ShapeElementModel) =>
ele.filled ? resolveColor(ele.fillColor, colorScheme) : 'transparent'
);
const max = maxBy(Object.entries(colors), ([_k, count]) => count);
return max ? (max[0] as string) : null;
return max
? (max[0] as string)
: resolveColor(DefaultTheme.shapeFillColor, colorScheme);
}
function getMostCommonStrokeColor(
elements: ShapeElementModel[],
colorScheme: ColorScheme
): string | null {
const colors = countBy(elements, (ele: ShapeElementModel) => {
return typeof ele.strokeColor === 'object'
? (ele.strokeColor[colorScheme] ?? ele.strokeColor.normal ?? null)
: ele.strokeColor;
});
): string {
const colors = countBy(elements, (ele: ShapeElementModel) =>
resolveColor(ele.strokeColor, colorScheme)
);
const max = maxBy(Object.entries(colors), ([_k, count]) => count);
return max ? (max[0] as string) : null;
return max
? (max[0] as string)
: resolveColor(DefaultTheme.shapeStrokeColor, colorScheme);
}
function getMostCommonShape(
elements: ShapeElementModel[]
): ShapeToolOption['shapeName'] | null {
const shapeTypes = countBy(elements, (ele: ShapeElementModel) => {
return getShapeName(ele.shapeType, ele.radius);
});
const shapeTypes = countBy(elements, (ele: ShapeElementModel) =>
getShapeName(ele.shapeType, ele.radius)
);
const max = maxBy(Object.entries(shapeTypes), ([_k, count]) => count);
return max ? (max[0] as ShapeToolOption['shapeName']) : null;
}
function getMostCommonLineSize(elements: ShapeElementModel[]): LineWidth {
const sizes = countBy(elements, (ele: ShapeElementModel) => {
return ele.strokeWidth;
});
const sizes = countBy(elements, (ele: ShapeElementModel) => ele.strokeWidth);
const max = maxBy(Object.entries(sizes), ([_k, count]) => count);
return max ? (Number(max[0]) as LineWidth) : LineWidth.Four;
}
function getMostCommonLineStyle(
elements: ShapeElementModel[]
): StrokeStyle | null {
function getMostCommonLineStyle(elements: ShapeElementModel[]): StrokeStyle {
const sizes = countBy(elements, (ele: ShapeElementModel) => ele.strokeStyle);
const max = maxBy(Object.entries(sizes), ([_k, count]) => count);
return max ? (max[0] as StrokeStyle) : null;
return max ? (max[0] as StrokeStyle) : StrokeStyle.Solid;
}
function getMostCommonShapeStyle(elements: ShapeElementModel[]): ShapeStyle {
const roughnesses = countBy(elements, (ele: ShapeElementModel) => {
return ele.shapeStyle;
});
const roughnesses = countBy(
elements,
(ele: ShapeElementModel) => ele.shapeStyle
);
const max = maxBy(Object.entries(roughnesses), ([_k, count]) => count);
return max ? (max[0] as ShapeStyle) : ShapeStyle.Scribbled;
}
@@ -151,6 +138,32 @@ function getMostCommonShapeStyle(elements: ShapeElementModel[]): ShapeStyle {
export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
static override styles = [changeShapeButtonStyles];
private readonly _setShapeFillColor = (e: ColorEvent) => {
const fillColor = e.detail.value;
const filled = !isTransparent(fillColor);
const color = this._getTextColor(fillColor, filled);
this.elements.forEach(ele =>
this.crud.updateElement(ele.id, { filled, fillColor, color })
);
};
private readonly _setShapeStrokeColor = (e: ColorEvent) => {
const strokeColor = e.detail.value;
this.elements.forEach(ele =>
this.crud.updateElement(ele.id, { strokeColor })
);
};
private readonly _setShapeStyles = ({ type, value }: LineStyleEvent) => {
if (type === 'size') {
this._setShapeStrokeWidth(value);
return;
}
if (type === 'lineStyle') {
this._setShapeStrokeStyle(value);
}
};
get service() {
return this.edgeless.service;
}
@@ -159,58 +172,24 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
return this.edgeless.std.get(EdgelessCRUDIdentifier);
}
#pickColor<K extends keyof Pick<ShapeProps, 'fillColor' | 'strokeColor'>>(
key: K
) {
return (event: PickColorEvent) => {
if (event.type === 'pick') {
this.elements.forEach(ele => {
const props = packColor(key, { ...event.detail });
// If `filled` can be set separately, this logic can be removed
if (key === 'fillColor' && !ele.filled) {
Object.assign(props, { filled: true });
}
this.crud.updateElement(ele.id, props);
});
return;
}
this.elements.forEach(ele =>
ele[event.type === 'start' ? 'stash' : 'pop'](key)
);
};
}
private _addText() {
mountShapeTextEditor(this.elements[0], this.edgeless);
}
private _getTextColor(fillColor: string) {
const colorScheme = this.edgeless.surface.renderer.getColorScheme();
private _getTextColor(fillColor: Color, isNotTransparent = false) {
// When the shape is filled with black color, the text color should be white.
// When the shape is transparent, the text color should be set according to the theme.
// Otherwise, the text color should be black.
const textColor = isTransparent(fillColor)
? GET_DEFAULT_LINE_COLOR(colorScheme)
: fillColor === SHAPE_FILL_COLOR_BLACK
? SHAPE_TEXT_COLOR_PURE_WHITE
: SHAPE_TEXT_COLOR_PURE_BLACK;
return textColor;
}
if (isNotTransparent) {
if (isEqual(fillColor, DefaultTheme.black)) {
return DefaultTheme.white;
} else if (isEqual(fillColor, DefaultTheme.white)) {
return DefaultTheme.black;
}
}
private _setShapeFillColor(fillColor: string) {
const filled = !isTransparent(fillColor);
const color = this._getTextColor(fillColor);
this.elements.forEach(ele =>
this.crud.updateElement(ele.id, { filled, fillColor, color })
);
}
private _setShapeStrokeColor(strokeColor: string) {
this.elements.forEach(ele =>
this.crud.updateElement(ele.id, { strokeColor })
);
return DefaultTheme.black;
}
private _setShapeStrokeStyle(strokeStyle: StrokeStyle) {
@@ -234,16 +213,6 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
});
}
private _setShapeStyles({ type, value }: LineStyleEvent) {
if (type === 'size') {
this._setShapeStrokeWidth(value);
return;
}
if (type === 'lineStyle') {
this._setShapeStrokeStyle(value);
}
}
private _showAddButtonOrTextMenu() {
if (this.elements.length === 1 && !this.elements[0].text) {
return 'button';
@@ -270,20 +239,38 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
);
}
pickColor<K extends keyof Pick<ShapeProps, 'fillColor' | 'strokeColor'>>(
field: K
) {
return (e: PickColorEvent) => {
if (e.type === 'pick') {
const color = e.detail.value;
this.elements.forEach(ele => {
const props = packColor(field, color);
// If `filled` can be set separately, this logic can be removed
if (field === 'fillColor' && !ele.filled) {
Object.assign(props, { filled: true });
}
this.crud.updateElement(ele.id, props);
});
return;
}
this.elements.forEach(ele =>
ele[e.type === 'start' ? 'stash' : 'pop'](field)
);
};
}
override render() {
const colorScheme = this.edgeless.surface.renderer.getColorScheme();
const elements = this.elements;
const selectedShape = getMostCommonShape(elements);
const selectedFillColor =
getMostCommonFillColor(elements, colorScheme) ?? DEFAULT_SHAPE_FILL_COLOR;
const selectedStrokeColor =
getMostCommonStrokeColor(elements, colorScheme) ??
DEFAULT_SHAPE_STROKE_COLOR;
const selectedLineSize = getMostCommonLineSize(elements) ?? LineWidth.Four;
const selectedLineStyle =
getMostCommonLineStyle(elements) ?? StrokeStyle.Solid;
const selectedShapeStyle =
getMostCommonShapeStyle(elements) ?? ShapeStyle.Scribbled;
const selectedFillColor = getMostCommonFillColor(elements, colorScheme);
const selectedStrokeColor = getMostCommonStrokeColor(elements, colorScheme);
const selectedLineSize = getMostCommonLineSize(elements);
const selectedLineStyle = getMostCommonLineStyle(elements);
const selectedShapeStyle = getMostCommonShapeStyle(elements);
return join(
[
@@ -340,11 +327,12 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
<edgeless-color-picker-button
class="fill-color"
.label=${'Fill color'}
.pick=${this.#pickColor('fillColor')}
.pick=${this.pickColor('fillColor')}
.color=${selectedFillColor}
.colors=${colors}
.colorType=${type}
.palettes=${PALETTES}
.theme=${colorScheme}
.palettes=${DefaultTheme.Palettes}
>
</edgeless-color-picker-button>
`;
@@ -367,8 +355,9 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
role="listbox"
aria-label="Fill colors"
.value=${selectedFillColor}
.palettes=${PALETTES}
@select=${(e: ColorEvent) => this._setShapeFillColor(e.detail)}
.theme=${colorScheme}
.palettes=${DefaultTheme.Palettes}
@select=${this._setShapeFillColor}
>
</edgeless-color-panel>
</editor-menu-button>
@@ -388,11 +377,12 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
<edgeless-color-picker-button
class="border-style"
.label=${'Border style'}
.pick=${this.#pickColor('strokeColor')}
.pick=${this.pickColor('strokeColor')}
.color=${selectedStrokeColor}
.colors=${colors}
.colorType=${type}
.palettes=${PALETTES}
.theme=${colorScheme}
.palettes=${DefaultTheme.Palettes}
.hollowCircle=${true}
>
<div
@@ -408,8 +398,7 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
${LineStylesPanel({
selectedLineSize: selectedLineSize,
selectedLineStyle: selectedLineStyle,
onClick: (e: LineStyleEvent) => this._setShapeStyles(e),
lineStyles: [StrokeStyle.Solid, StrokeStyle.Dash],
onClick: this._setShapeStyles,
})}
</div>
<editor-toolbar-separator
@@ -435,14 +424,13 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
`}
>
<stroke-style-panel
.theme=${colorScheme}
.hollowCircle=${true}
.strokeWidth=${selectedLineSize}
.strokeStyle=${selectedLineStyle}
.strokeColor=${selectedStrokeColor}
.setStrokeStyle=${(e: LineStyleEvent) =>
this._setShapeStyles(e)}
.setStrokeColor=${(e: ColorEvent) =>
this._setShapeStrokeColor(e.detail)}
.setStrokeStyle=${this._setShapeStyles}
.setStrokeColor=${this._setShapeStrokeColor}
>
</stroke-style-panel>
</editor-menu-button>

34
blocksuite/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts
View File

@@ -14,11 +14,12 @@ import { renderToolbarSeparator } from '@blocksuite/affine-components/toolbar';
import {
type ColorScheme,
ConnectorElementModel,
DefaultTheme,
EdgelessTextBlockModel,
FontFamily,
FontStyle,
FontWeight,
PALETTES,
resolveColor,
ShapeElementModel,
TextAlign,
TextElementModel,
@@ -44,10 +45,7 @@ import {
packColor,
packColorsWithColorScheme,
} from '../../edgeless/components/color-picker/utils.js';
import {
type ColorEvent,
GET_DEFAULT_LINE_COLOR,
} from '../../edgeless/components/panel/color-panel.js';
import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js';
import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
const FONT_SIZE_LIST = [
@@ -121,12 +119,12 @@ function getMostCommonColor(
const colors = countBy(elements, (ele: BlockSuite.EdgelessTextModelType) => {
const color =
ele instanceof ConnectorElementModel ? ele.labelStyle.color : ele.color;
return typeof color === 'object'
? (color[colorScheme] ?? color.normal ?? null)
: color;
return resolveColor(color, colorScheme);
});
const max = maxBy(Object.entries(colors), ([_k, count]) => count);
return max ? (max[0] as string) : GET_DEFAULT_LINE_COLOR(colorScheme);
return max
? (max[0] as string)
: resolveColor(DefaultTheme.textColor, colorScheme);
}
function getMostCommonFontFamily(elements: BlockSuite.EdgelessTextModelType[]) {
@@ -229,7 +227,8 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) {
});
};
private readonly _setTextColor = ({ detail: color }: ColorEvent) => {
private readonly _setTextColor = (e: ColorEvent) => {
const color = e.detail.value;
const props = { color };
this.elements.forEach(element => {
this.crud.updateElement(element.id, buildProps(element, props));
@@ -307,10 +306,11 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) {
// no need to update the bound of edgeless text block, which updates itself using ResizeObserver
};
pickColor = (event: PickColorEvent) => {
if (event.type === 'pick') {
pickColor = (e: PickColorEvent) => {
if (e.type === 'pick') {
const color = e.detail.value;
this.elements.forEach(element => {
const props = packColor('color', { ...event.detail });
const props = packColor('color', color);
this.crud.updateElement(element.id, buildProps(element, props));
this._updateElementBound(element);
});
@@ -319,7 +319,7 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) {
const key = this.elementType === 'connector' ? 'labelStyle' : 'color';
this.elements.forEach(ele => {
ele[event.type === 'start' ? 'stash' : 'pop'](key as 'color');
ele[e.type === 'start' ? 'stash' : 'pop'](key as 'color');
});
};
@@ -391,7 +391,8 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) {
.color=${selectedColor}
.colors=${colors}
.colorType=${type}
.palettes=${PALETTES}
.theme=${colorScheme}
.palettes=${DefaultTheme.Palettes}
>
</edgeless-color-picker-button>
`;
@@ -412,7 +413,8 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) {
>
<edgeless-color-panel
.value=${selectedColor}
.palettes=${PALETTES}
.theme=${colorScheme}
.palettes=${DefaultTheme.Palettes}
@select=${this._setTextColor}
></edgeless-color-panel>
</editor-menu-button>

7
blocksuite/blocks/src/root-block/widgets/frame-title/frame-title.ts
View File

@@ -1,4 +1,8 @@
import { ColorScheme, FrameBlockModel } from '@blocksuite/affine-model';
import {
ColorScheme,
FrameBlockModel,
isTransparent,
} from '@blocksuite/affine-model';
import { ThemeProvider } from '@blocksuite/affine-shared/services';
import {
type BlockStdScope,
@@ -19,7 +23,6 @@ import { LitElement } from 'lit';
import { property, state } from 'lit/decorators.js';
import { parseStringToRgba } from '../../edgeless/components/color-picker/utils.js';
import { isTransparent } from '../../edgeless/components/panel/color-panel.js';
import type { EdgelessRootService } from '../../edgeless/index.js';
import { frameTitleStyle, frameTitleStyleVars } from './styles.js';

6
blocksuite/blocks/src/surface-block/mini-mindmap/surface-block.ts
View File

@@ -1,4 +1,4 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */
/* oxlint-disable @typescript-eslint/no-non-null-assertion */
import type { SurfaceBlockModel } from '@blocksuite/affine-block-surface';
import {
CanvasRenderer,
@@ -101,14 +101,14 @@ export class MindmapSurfaceBlock extends BlockComponent<SurfaceBlockModel> {
provider: {
selectedElements: () => [],
getColorScheme: () => themeService.edgelessTheme,
getColorValue: (color: Color, fallback?: string, real?: boolean) =>
getColorValue: (color: Color, fallback?: Color, real?: boolean) =>
themeService.getColorValue(
color,
fallback,
real,
themeService.edgelessTheme
),
generateColorProperty: (color: Color, fallback: string) =>
generateColorProperty: (color: Color, fallback?: Color) =>
themeService.generateColorProperty(
color,
fallback,

4
blocksuite/blocks/src/surface-ref-block/portal/note.ts
View File

@@ -1,7 +1,7 @@
import type { CanvasRenderer } from '@blocksuite/affine-block-surface';
import type { NoteBlockModel } from '@blocksuite/affine-model';
import {
DEFAULT_NOTE_BACKGROUND_COLOR,
DefaultTheme,
NoteDisplayMode,
NoteShadow,
} from '@blocksuite/affine-model';
@@ -73,7 +73,7 @@ export class SurfaceRefNotePortal extends WithDisposable(ShadowlessElement) {
const backgroundColor = this.host.std
.get(ThemeProvider)
.generateColorProperty(model.background, DEFAULT_NOTE_BACKGROUND_COLOR);
.generateColorProperty(model.background, DefaultTheme.noteBackgrounColor);
const [modelX, modelY, modelW, modelH] = deserializeXYWH(model.xywh);
const style = {

1
blocksuite/presets/src/__tests__/edgeless/color-picker.spec.ts
View File

@@ -67,7 +67,6 @@ describe('theme service', () => {
expect(themeService.generateColorProperty({ normal: 'grey' })).toBe('grey');
expect(themeService.generateColorProperty('', 'blue')).toBe('blue');
expect(themeService.generateColorProperty({}, 'red')).toBe('red');
});
test('gets a color value', () => {

60
blocksuite/presets/src/__tests__/edgeless/last-props.spec.ts
View File

@@ -2,26 +2,21 @@ import type { BlockStdScope } from '@blocksuite/block-std';
import {
type BrushElementModel,
type ConnectorElementModel,
DEFAULT_NOTE_BACKGROUND_COLOR,
DEFAULT_NOTE_SHADOW,
DEFAULT_TEXT_COLOR,
DefaultTheme,
type EdgelessRootBlockComponent,
type EdgelessTextBlockModel,
EditPropsStore,
FontFamily,
FrameBackgroundColor,
type FrameBlockModel,
getSurfaceBlock,
LayoutType,
type MindmapElementModel,
MindmapStyle,
NoteBackgroundColor,
type NoteBlockModel,
NoteShadow,
type ShapeElementModel,
ShapeFillColor,
ShapeType,
StrokeColor,
type TextElementModel,
} from '@blocksuite/blocks';
import { assertExists } from '@blocksuite/global/utils';
@@ -51,14 +46,14 @@ describe('apply last props', () => {
});
assertExists(rectId);
const rectShape = service.crud.getElementById(rectId) as ShapeElementModel;
expect(rectShape.fillColor).toBe(ShapeFillColor.Yellow);
expect(rectShape.fillColor).toBe(DefaultTheme.shapeFillColor);
service.crud.updateElement(rectId, {
fillColor: ShapeFillColor.Orange,
fillColor: DefaultTheme.FillColorMap.Orange,
});
expect(
std.get(EditPropsStore).lastProps$.value[`shape:${ShapeType.Rect}`]
.fillColor
).toBe(ShapeFillColor.Orange);
).toBe(DefaultTheme.FillColorMap.Orange);
// diamond shape
const diamondId = service.crud.addElement('shape', {
@@ -68,14 +63,14 @@ describe('apply last props', () => {
const diamondShape = service.crud.getElementById(
diamondId
) as ShapeElementModel;
expect(diamondShape.fillColor).toBe(ShapeFillColor.Yellow);
expect(diamondShape.fillColor).toBe(DefaultTheme.FillColorMap.Yellow);
service.crud.updateElement(diamondId, {
fillColor: ShapeFillColor.Blue,
fillColor: DefaultTheme.FillColorMap.Blue,
});
expect(
std.get(EditPropsStore).lastProps$.value[`shape:${ShapeType.Diamond}`]
.fillColor
).toBe(ShapeFillColor.Blue);
).toBe(DefaultTheme.FillColorMap.Blue);
// rounded rect shape
const roundedRectId = service.crud.addElement('shape', {
@@ -86,13 +81,13 @@ describe('apply last props', () => {
const roundedRectShape = service.crud.getElementById(
roundedRectId
) as ShapeElementModel;
expect(roundedRectShape.fillColor).toBe(ShapeFillColor.Yellow);
expect(roundedRectShape.fillColor).toBe(DefaultTheme.FillColorMap.Yellow);
service.crud.updateElement(roundedRectId, {
fillColor: ShapeFillColor.Green,
fillColor: DefaultTheme.FillColorMap.Green,
});
expect(
std.get(EditPropsStore).lastProps$.value['shape:roundedRect'].fillColor
).toBe(ShapeFillColor.Green);
).toBe(DefaultTheme.FillColorMap.Green);
// apply last props
const rectId2 = service.crud.addElement('shape', {
@@ -102,7 +97,7 @@ describe('apply last props', () => {
const rectShape2 = service.crud.getElementById(
rectId2
) as ShapeElementModel;
expect(rectShape2.fillColor).toBe(ShapeFillColor.Orange);
expect(rectShape2.fillColor).toBe(DefaultTheme.FillColorMap.Orange);
const diamondId2 = service.crud.addElement('shape', {
shapeType: ShapeType.Diamond,
@@ -111,7 +106,7 @@ describe('apply last props', () => {
const diamondShape2 = service.crud.getElementById(
diamondId2
) as ShapeElementModel;
expect(diamondShape2.fillColor).toBe(ShapeFillColor.Blue);
expect(diamondShape2.fillColor).toBe(DefaultTheme.FillColorMap.Blue);
const roundedRectId2 = service.crud.addElement('shape', {
shapeType: ShapeType.Rect,
@@ -121,14 +116,14 @@ describe('apply last props', () => {
const roundedRectShape2 = service.crud.getElementById(
roundedRectId2
) as ShapeElementModel;
expect(roundedRectShape2.fillColor).toBe(ShapeFillColor.Green);
expect(roundedRectShape2.fillColor).toBe(DefaultTheme.FillColorMap.Green);
});
test('connector', () => {
const id = service.crud.addElement('connector', { mode: 0 });
assertExists(id);
const connector = service.crud.getElementById(id) as ConnectorElementModel;
expect(connector.stroke).toBe(StrokeColor.Grey);
expect(connector.stroke).toBe(DefaultTheme.connectorColor);
expect(connector.strokeWidth).toBe(2);
expect(connector.strokeStyle).toBe('solid');
expect(connector.frontEndpointStyle).toBe('None');
@@ -143,7 +138,7 @@ describe('apply last props', () => {
expect(connector2.strokeWidth).toBe(10);
service.crud.updateElement(id2, {
labelStyle: {
color: StrokeColor.Magenta,
color: DefaultTheme.black,
fontFamily: FontFamily.Kalam,
},
});
@@ -154,7 +149,7 @@ describe('apply last props', () => {
id3
) as ConnectorElementModel;
expect(connector3.strokeWidth).toBe(10);
expect(connector3.labelStyle.color).toBe(StrokeColor.Magenta);
expect(connector3.labelStyle.color).toEqual(DefaultTheme.black);
expect(connector3.labelStyle.fontFamily).toBe(FontFamily.Kalam);
});
@@ -162,10 +157,7 @@ describe('apply last props', () => {
const id = service.crud.addElement('brush', {});
assertExists(id);
const brush = service.crud.getElementById(id) as BrushElementModel;
expect(brush.color).toEqual({
dark: StrokeColor.White,
light: StrokeColor.Black,
});
expect(brush.color).toEqual(DefaultTheme.black);
expect(brush.lineWidth).toBe(4);
service.crud.updateElement(id, { lineWidth: 10 });
const secondBrush = service.crud.getElementById(
@@ -209,17 +201,17 @@ describe('apply last props', () => {
const id = service.crud.addBlock('affine:edgeless-text', {}, surface!.id);
assertExists(id);
const text = service.crud.getElementById(id) as EdgelessTextBlockModel;
expect(text.color).toBe(DEFAULT_TEXT_COLOR);
expect(text.color).toBe(DefaultTheme.textColor);
expect(text.fontFamily).toBe(FontFamily.Inter);
service.crud.updateElement(id, {
color: StrokeColor.Green,
color: DefaultTheme.StrokeColorMap.Green,
fontFamily: FontFamily.OrelegaOne,
});
const id2 = service.crud.addBlock('affine:edgeless-text', {}, surface!.id);
assertExists(id2);
const text2 = service.crud.getElementById(id2) as EdgelessTextBlockModel;
expect(text2.color).toBe(StrokeColor.Green);
expect(text2.color).toBe(DefaultTheme.StrokeColorMap.Green);
expect(text2.fontFamily).toBe(FontFamily.OrelegaOne);
});
@@ -227,10 +219,10 @@ describe('apply last props', () => {
const id = service.crud.addBlock('affine:note', {}, doc.root!.id);
assertExists(id);
const note = service.crud.getElementById(id) as NoteBlockModel;
expect(note.background).toBe(DEFAULT_NOTE_BACKGROUND_COLOR);
expect(note.background).toEqual(DefaultTheme.noteBackgrounColor);
expect(note.edgeless.style.shadowType).toBe(DEFAULT_NOTE_SHADOW);
service.crud.updateElement(id, {
background: NoteBackgroundColor.Purple,
background: DefaultTheme.NoteBackgroundColorMap.Purple,
edgeless: {
style: {
shadowType: NoteShadow.Film,
@@ -241,7 +233,9 @@ describe('apply last props', () => {
const id2 = service.crud.addBlock('affine:note', {}, doc.root!.id);
assertExists(id2);
const note2 = service.crud.getElementById(id2) as NoteBlockModel;
expect(note2.background).toBe(NoteBackgroundColor.Purple);
expect(note2.background).toEqual(
DefaultTheme.NoteBackgroundColorMap.Purple
);
expect(note2.edgeless.style.shadowType).toBe(NoteShadow.Film);
});
@@ -252,13 +246,13 @@ describe('apply last props', () => {
const note = service.crud.getElementById(id) as FrameBlockModel;
expect(note.background).toBe('transparent');
service.crud.updateElement(id, {
background: FrameBackgroundColor.Purple,
background: DefaultTheme.StrokeColorMap.Purple,
});
const id2 = service.crud.addBlock('affine:frame', {}, surface!.id);
assertExists(id2);
const frame2 = service.crud.getElementById(id2) as FrameBlockModel;
expect(frame2.background).toBe(FrameBackgroundColor.Purple);
expect(frame2.background).toBe(DefaultTheme.StrokeColorMap.Purple);
service.crud.updateElement(id2, {
background: { normal: '#def4e740' },
});

6
blocksuite/presets/src/__tests__/edgeless/surface-model.spec.ts
View File

@@ -4,7 +4,7 @@ import type {
ShapeElementModel,
SurfaceBlockModel,
} from '@blocksuite/blocks';
import { StrokeColor } from '@blocksuite/blocks';
import { DefaultTheme } from '@blocksuite/blocks';
import { beforeEach, describe, expect, test, vi } from 'vitest';
import { wait } from '../utils/common.js';
@@ -72,7 +72,7 @@ describe('element model', () => {
const element = model.getElementById(id)! as ShapeElementModel;
expect(element.index).toBe('a0');
expect(element.strokeColor).toBe(StrokeColor.Yellow);
expect(element.strokeColor).toBe(DefaultTheme.shapeStrokeColor);
expect(element.strokeWidth).toBe(4);
});
@@ -94,7 +94,7 @@ describe('element model', () => {
const element = model.getElementById(id)! as ShapeElementModel;
expect(element.yMap.get('strokeColor')).toBe(StrokeColor.Yellow);
expect(element.yMap.get('strokeColor')).toBe(DefaultTheme.shapeStrokeColor);
element.strokeColor = '--affine-palette-line-black';
expect(element.yMap.get('strokeColor')).toBe('--affine-palette-line-black');

70
blocksuite/tests-legacy/attachment.spec.ts
View File

@@ -144,7 +144,12 @@ test('can insert attachment from slash menu', async ({ page }) => {
page,
`
<affine:note
prop:background="--affine-v2-edgeless-note-white"
prop:background={
Object {
"dark": "#000000",
"light": "#ffffff",
}
}
prop:displayMode="both"
prop:edgeless={
Object {
@@ -191,7 +196,12 @@ test('should undo/redo works for attachment', async ({ page }) => {
await assertStoreMatchJSX(
page,
` <affine:note
prop:background="--affine-v2-edgeless-note-white"
prop:background={
Object {
"dark": "#000000",
"light": "#ffffff",
}
}
prop:displayMode="both"
prop:edgeless={
Object {
@@ -229,7 +239,12 @@ test('should undo/redo works for attachment', async ({ page }) => {
page,
`
<affine:note
prop:background="--affine-v2-edgeless-note-white"
prop:background={
Object {
"dark": "#000000",
"light": "#ffffff",
}
}
prop:displayMode="both"
prop:edgeless={
Object {
@@ -260,7 +275,12 @@ test('should undo/redo works for attachment', async ({ page }) => {
page,
`
<affine:note
prop:background="--affine-v2-edgeless-note-white"
prop:background={
Object {
"dark": "#000000",
"light": "#ffffff",
}
}
prop:displayMode="both"
prop:edgeless={
Object {
@@ -348,7 +368,12 @@ test('should turn attachment to image works', async ({ page }) => {
page,
`
<affine:note
prop:background="--affine-v2-edgeless-note-white"
prop:background={
Object {
"dark": "#000000",
"light": "#ffffff",
}
}
prop:displayMode="both"
prop:edgeless={
Object {
@@ -382,7 +407,12 @@ test('should turn attachment to image works', async ({ page }) => {
page,
`
<affine:note
prop:background="--affine-v2-edgeless-note-white"
prop:background={
Object {
"dark": "#000000",
"light": "#ffffff",
}
}
prop:displayMode="both"
prop:edgeless={
Object {
@@ -431,7 +461,12 @@ test('should attachment can be deleted', async ({ page }) => {
page,
`
<affine:note
prop:background="--affine-v2-edgeless-note-white"
prop:background={
Object {
"dark": "#000000",
"light": "#ffffff",
}
}
prop:displayMode="both"
prop:edgeless={
Object {
@@ -475,7 +510,12 @@ test.fixme(`support dragging attachment block directly`, async ({ page }) => {
await assertStoreMatchJSX(
page,
` <affine:note
prop:background="--affine-v2-edgeless-note-white"
prop:background={
Object {
"dark": "#000000",
"light": "#ffffff",
}
}
prop:displayMode="both"
prop:edgeless={
Object {
@@ -531,7 +571,12 @@ test.fixme(`support dragging attachment block directly`, async ({ page }) => {
page,
/*xml*/ `<affine:page>
<affine:note
prop:background="--affine-v2-edgeless-note-white"
prop:background={
Object {
"dark": "#000000",
"light": "#ffffff",
}
}
prop:displayMode="both"
prop:edgeless={
Object {
@@ -589,7 +634,12 @@ test.fixme(`support dragging attachment block directly`, async ({ page }) => {
page,
/*xml*/ `<affine:page>
<affine:note
prop:background="--affine-v2-edgeless-note-white"
prop:background={
Object {
"dark": "#000000",
"light": "#ffffff",
}
}
prop:displayMode="both"
prop:edgeless={
Object {

30
blocksuite/tests-legacy/clipboard/list.spec.ts
View File

@@ -1,4 +1,5 @@
import { expect } from '@playwright/test';
import { lightThemeV2 } from '@toeverything/theme/v2';
import { initDatabaseColumn } from '../database/actions.js';
import {
@@ -441,7 +442,12 @@ test(scoped`should copy and paste of database work`, async ({ page }) => {
/*xml*/ `
<affine:page>
<affine:note
prop:background="--affine-v2-edgeless-note-white"
prop:background={
Object {
"dark": "#000000",
"light": "#ffffff",
}
}
prop:displayMode="both"
prop:edgeless={
Object {
@@ -491,7 +497,12 @@ test(scoped`should copy and paste of database work`, async ({ page }) => {
/*xml*/ `
<affine:page>
<affine:note
prop:background="--affine-v2-edgeless-note-white"
prop:background={
Object {
"dark": "#000000",
"light": "#ffffff",
}
}
prop:displayMode="both"
prop:edgeless={
Object {
@@ -574,9 +585,12 @@ test(scoped`paste note block with background`, async ({ page }) => {
await selectNoteInEdgeless(page, ids.noteId);
await triggerComponentToolbarAction(page, 'changeNoteColor');
const color = '--affine-v2-edgeless-note-grey';
await changeEdgelessNoteBackground(page, color);
await assertEdgelessNoteBackground(page, ids.noteId, color);
await changeEdgelessNoteBackground(page, 'White');
await assertEdgelessNoteBackground(
page,
ids.noteId,
lightThemeV2['edgeless/note/white']
);
await copyByKeyboard(page);
@@ -584,7 +598,11 @@ test(scoped`paste note block with background`, async ({ page }) => {
await pasteByKeyboard(page, false);
const noteIds = await getAllNoteIds(page);
for (const noteId of noteIds) {
await assertEdgelessNoteBackground(page, noteId, color);
await assertEdgelessNoteBackground(
page,
noteId,
lightThemeV2['edgeless/note/white']
);
}
});

29
blocksuite/tests-legacy/edgeless/auto-complete.spec.ts
View File

@@ -1,9 +1,5 @@
import {
DEFAULT_NOTE_BACKGROUND_COLOR,
ShapeFillColor,
StrokeColor,
} from '@blocksuite/affine-model';
import { expect, type Page } from '@playwright/test';
import { lightThemeV2 } from '@toeverything/theme/v2';
import { clickView, moveView } from '../utils/actions/click.js';
import { dragBetweenCoords } from '../utils/actions/drag.js';
@@ -139,11 +135,9 @@ test.describe('auto-complete', () => {
await createShapeElement(page, [0, 0], [100, 100], Shape.Square);
await assertSelectedBound(page, [0, 0, 100, 100]);
await triggerComponentToolbarAction(page, 'changeShapeStrokeColor');
const lineColor = StrokeColor.Red;
await changeShapeStrokeColor(page, lineColor);
await changeShapeStrokeColor(page, 'MediumRed');
await triggerComponentToolbarAction(page, 'changeShapeFillColor');
const color = ShapeFillColor.Green;
await changeShapeFillColor(page, color);
await changeShapeFillColor(page, 'HeavyGreen');
await dragBetweenViewCoords(page, [120, 50], [200, 0]);
const noteButton = getAutoCompletePanelButton(page, 'note');
@@ -168,7 +162,7 @@ test.describe('auto-complete', () => {
await assertEdgelessNoteBackground(
page,
noteId,
DEFAULT_NOTE_BACKGROUND_COLOR
lightThemeV2['edgeless/note/white']
);
const rect = await edgelessNote.boundingBox();
@@ -181,15 +175,18 @@ test.describe('auto-complete', () => {
// select connector
await dragBetweenViewCoords(page, [140, 50], [160, 0]);
await waitNextFrame(page);
await assertConnectorStrokeColor(page, lineColor);
await assertConnectorStrokeColor(
page,
'MediumRed',
lightThemeV2['edgeless/palette/medium/redMedium']
);
// select note block
await page.mouse.click(rect.x + rect.width / 2, rect.y + rect.height / 2);
await waitNextFrame(page);
await triggerComponentToolbarAction(page, 'changeNoteColor');
const noteColor = '--affine-v2-edgeless-note-red';
await changeEdgelessNoteBackground(page, noteColor);
await changeEdgelessNoteBackground(page, 'Red');
// move to arrow icon
await page.mouse.move(
@@ -223,7 +220,11 @@ test.describe('auto-complete', () => {
return note?.getAttribute('data-block-id');
});
assertExists(noteId2);
await assertEdgelessNoteBackground(page, noteId, noteColor);
await assertEdgelessNoteBackground(
page,
noteId,
lightThemeV2['edgeless/note/red']
);
expect(await edgelessNote.count()).toBe(2);
});

17
blocksuite/tests-legacy/edgeless/brush.spec.ts
View File

@@ -1,5 +1,5 @@
import { StrokeColor } from '@blocksuite/affine-model';
import { expect } from '@playwright/test';
import { lightThemeV2 } from '@toeverything/theme/v2';
import {
assertEdgelessTool,
@@ -80,15 +80,14 @@ test('add brush element with color', async ({ page }) => {
await switchEditorMode(page);
await setEdgelessTool(page, 'brush');
const color = StrokeColor.Blue;
await selectBrushColor(page, color);
await selectBrushColor(page, 'Blue');
const start = { x: 100, y: 100 };
const end = { x: 200, y: 200 };
await dragBetweenCoords(page, start, end, { steps: 100 });
const [pickedColor] = await pickColorAtPoints(page, [[110, 110]]);
const color = lightThemeV2['edgeless/palette/medium/blueMedium'];
await assertEdgelessColorSameWithHexColor(page, color, pickedColor);
});
@@ -101,8 +100,8 @@ test('keep same color when mouse mode switched back to brush', async ({
await deleteAll(page);
await setEdgelessTool(page, 'brush');
const color = StrokeColor.Blue;
await selectBrushColor(page, color);
await selectBrushColor(page, 'Blue');
const start = { x: 200, y: 200 };
const end = { x: 300, y: 300 };
await dragBetweenCoords(page, start, end, { steps: 100 });
@@ -113,7 +112,9 @@ test('keep same color when mouse mode switched back to brush', async ({
await setEdgelessTool(page, 'brush');
const origin = { x: 100, y: 100 };
await dragBetweenCoords(page, origin, start, { steps: 100 });
const [pickedColor] = await pickColorAtPoints(page, [[110, 110]]);
const color = lightThemeV2['edgeless/palette/medium/blueMedium'];
await assertEdgelessColorSameWithHexColor(page, color, pickedColor);
});
@@ -124,8 +125,7 @@ test('add brush element with different size', async ({ page }) => {
await setEdgelessTool(page, 'brush');
await selectBrushSize(page, 'ten');
const color = StrokeColor.Blue;
await selectBrushColor(page, color);
await selectBrushColor(page, 'Blue');
const start = { x: 100, y: 100 };
const end = { x: 200, y: 100 };
@@ -143,6 +143,7 @@ test('add brush element with different size', async ({ page }) => {
[110, 105],
]);
const color = lightThemeV2['edgeless/palette/medium/blueMedium'];
await assertEdgelessColorSameWithHexColor(page, color, topEdge);
await assertEdgelessColorSameWithHexColor(page, color, bottomEdge);
assertSameColor(nearTopEdge, '#84cfff');

5
blocksuite/tests-legacy/edgeless/connector/connector.spec.ts
View File

@@ -1,4 +1,3 @@
import { StrokeColor } from '@blocksuite/affine-model';
import { expect } from '@playwright/test';
import {
@@ -149,7 +148,7 @@ test('change connector line width', async ({ page }) => {
await page.mouse.click(start.x + 5, start.y);
await triggerComponentToolbarAction(page, 'changeConnectorStrokeColor');
await changeConnectorStrokeColor(page, StrokeColor.Grey);
await changeConnectorStrokeColor(page, 'MediumGrey');
await triggerComponentToolbarAction(page, 'changeConnectorStrokeStyles');
await changeConnectorStrokeWidth(page, 5);
@@ -174,7 +173,7 @@ test('change connector stroke style', async ({ page }) => {
await page.mouse.click(start.x + 5, start.y);
await triggerComponentToolbarAction(page, 'changeConnectorStrokeColor');
await changeConnectorStrokeColor(page, StrokeColor.Grey);
await changeConnectorStrokeColor(page, 'MediumGrey');
await triggerComponentToolbarAction(page, 'changeConnectorStrokeStyles');
await changeConnectorStrokeStyle(page, 'dash');

1
blocksuite/tests-legacy/edgeless/lock.spec.ts
View File

@@ -59,7 +59,6 @@ test.describe('lock', () => {
test('edgeless element can be locked and unlocked', async ({ page }) => {
await edgelessCommonSetup(page);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const wrapTest = async <F extends (...args: any) => any>(
elementCreateFn: F,
...args: Parameters<F>

12
blocksuite/tests-legacy/edgeless/note/note.spec.ts
View File

@@ -4,6 +4,7 @@ import {
NoteDisplayMode,
} from '@blocksuite/affine-model';
import { expect } from '@playwright/test';
import { lightThemeV2 } from '@toeverything/theme/v2';
import {
activeNoteInEdgeless,
@@ -304,14 +305,17 @@ test('change note color', async ({ page }) => {
await assertEdgelessNoteBackground(
page,
noteId,
'--affine-v2-edgeless-note-white'
lightThemeV2['edgeless/note/white']
);
await selectNoteInEdgeless(page, noteId);
await triggerComponentToolbarAction(page, 'changeNoteColor');
const color = '--affine-v2-edgeless-note-green';
await changeEdgelessNoteBackground(page, color);
await assertEdgelessNoteBackground(page, noteId, color);
await changeEdgelessNoteBackground(page, 'Green');
await assertEdgelessNoteBackground(
page,
noteId,
lightThemeV2['edgeless/note/green']
);
});
test('cursor for active and inactive state', async ({ page }) => {

32
blocksuite/tests-legacy/edgeless/shape.spec.ts
View File

@@ -1,5 +1,5 @@
import { ShapeFillColor, StrokeColor } from '@blocksuite/affine-model';
import { expect, type Page } from '@playwright/test';
import { lightThemeV2 } from '@toeverything/theme/v2';
import {
assertEdgelessTool,
@@ -168,14 +168,17 @@ test.skip('change shape fill color', async ({ page }) => {
await page.mouse.click(rect.start.x + 5, rect.start.y + 5);
await triggerComponentToolbarAction(page, 'changeShapeFillColor');
const color = ShapeFillColor.Grey;
await changeShapeFillColor(page, color);
await changeShapeFillColor(page, 'MediumGrey');
await page.waitForTimeout(50);
const [picked] = await pickColorAtPoints(page, [
[rect.start.x + 20, rect.start.y + 20],
]);
await assertEdgelessColorSameWithHexColor(page, color, picked);
await assertEdgelessColorSameWithHexColor(
page,
lightThemeV2['edgeless/palette/medium/greyMedium'],
picked
);
});
test('change shape stroke color', async ({ page }) => {
@@ -191,14 +194,17 @@ test('change shape stroke color', async ({ page }) => {
await page.mouse.click(rect.start.x + 5, rect.start.y + 5);
await triggerComponentToolbarAction(page, 'changeShapeStrokeColor');
const color = StrokeColor.Grey;
await changeShapeStrokeColor(page, color);
await changeShapeStrokeColor(page, 'HeavyYellow');
await page.waitForTimeout(50);
const [picked] = await pickColorAtPoints(page, [
[rect.start.x + 1, rect.start.y + 1],
]);
await assertEdgelessColorSameWithHexColor(page, color, picked);
await assertEdgelessColorSameWithHexColor(
page,
lightThemeV2['edgeless/palette/heavy/yellow'],
picked
);
});
test('the tooltip of shape tool button should be hidden when the shape menu is shown', async ({
@@ -339,7 +345,7 @@ test('change shape stroke width', async ({ page }) => {
await page.mouse.click(start.x + 5, start.y + 5);
await triggerComponentToolbarAction(page, 'changeShapeStrokeColor');
await changeShapeStrokeColor(page, StrokeColor.Magenta);
await changeShapeStrokeColor(page, 'MediumMagenta');
await triggerComponentToolbarAction(page, 'changeShapeStrokeStyles');
await changeShapeStrokeWidth(page);
@@ -362,7 +368,7 @@ test('change shape stroke style', async ({ page }) => {
await page.mouse.click(start.x + 5, start.y + 5);
await triggerComponentToolbarAction(page, 'changeShapeStrokeColor');
await changeShapeStrokeColor(page, StrokeColor.Blue);
await changeShapeStrokeColor(page, 'MediumBlue');
await triggerComponentToolbarAction(page, 'changeShapeStrokeStyles');
await changeShapeStrokeStyle(page, 'dash');
@@ -549,12 +555,16 @@ test('change shape style', async ({ page }) => {
await page.mouse.click(start.x + 5, start.y + 5);
await triggerComponentToolbarAction(page, 'changeShapeStrokeColor');
const color = StrokeColor.Purple;
const color = 'LightPurple';
await changeShapeStrokeColor(page, color);
await page.waitForTimeout(50);
const [picked] = await pickColorAtPoints(page, [[start.x + 1, start.y + 1]]);
await assertEdgelessColorSameWithHexColor(page, color, picked);
await assertEdgelessColorSameWithHexColor(
page,
lightThemeV2['edgeless/palette/light/purpleLight'],
picked
);
});
test('shape adds text by button', async ({ page }) => {

6
blocksuite/tests-legacy/inline/inline-editor.spec.ts
View File

@@ -251,7 +251,7 @@ test('readonly mode', async ({ page }) => {
throw new Error('Cannot find editor');
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
// oxlint-disable-next-line @typescript-eslint/no-explicit-any
(richTextA as any).inlineEditor.setReadonly(true);
});
@@ -834,13 +834,13 @@ test('yText should not contain \r', async ({ page }) => {
throw new Error('Cannot find test-rich-text');
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
// oxlint-disable-next-line @typescript-eslint/no-explicit-any
const editor = (richText as any).inlineEditor as InlineEditor;
try {
editor.insertText({ index: 0, length: 0 }, 'abc\r');
} catch (e) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
// oxlint-disable-next-line @typescript-eslint/no-explicit-any
return (e as any).message;
}
});

4
blocksuite/tests-legacy/link.spec.ts
View File

@@ -476,7 +476,7 @@ test.skip('convert link to embed', async ({ page }) => {
`
<affine:page>
<affine:note
prop:background="--affine-v2-edgeless-note-white"
prop:background="--affine-note-background-blue"
prop:displayMode="both"
prop:edgeless={
Object {
@@ -493,7 +493,7 @@ test.skip('convert link to embed', async ({ page }) => {
prop:lockedBySelf={false}
>
<affine:paragraph
prop:collapsed={false}
prop:collapsed={false}
prop:text="aaa"
prop:type="text"
/>

3
blocksuite/tests-legacy/package.json
View File

@@ -11,7 +11,8 @@
"@blocksuite/block-std": "workspace:*",
"@blocksuite/global": "workspace:*",
"@blocksuite/presets": "workspace:*",
"@playwright/test": "=1.49.1"
"@playwright/test": "=1.49.1",
"@toeverything/theme": "^1.1.3"
},
"repository": {
"type": "git",

4
blocksuite/tests-legacy/slash-menu.spec.ts
View File

@@ -885,7 +885,7 @@ test.describe('slash menu with customize menu', () => {
{ groupName: 'Custom Menu' },
{
name: 'Custom Menu Item',
// eslint-disable-next-line @typescript-eslint/no-explicit-any
// oxlint-disable-next-line @typescript-eslint/no-explicit-any
icon: '' as any,
action: () => {
// do nothing
@@ -893,7 +893,7 @@ test.describe('slash menu with customize menu', () => {
},
{
name: 'Custom Menu Item',
// eslint-disable-next-line @typescript-eslint/no-explicit-any
// oxlint-disable-next-line @typescript-eslint/no-explicit-any
icon: '' as any,
action: () => {
// do nothing

5
blocksuite/tests-legacy/snapshots/basic.spec.ts/automatic-identify-url-text-final.json
View File

@@ -17,7 +17,10 @@
"version": 1,
"props": {
"xywh": "[0,0,498,92]",
"background": "--affine-v2-edgeless-note-white",
"background": {
"dark": "#000000",
"light": "#ffffff"
},
"index": "a0",
"lockedBySelf": false,
"hidden": false,

5
blocksuite/tests-legacy/snapshots/basic.spec.ts/basic-test-default.json
View File

@@ -17,7 +17,10 @@
"version": 1,
"props": {
"xywh": "[0,0,498,92]",
"background": "--affine-v2-edgeless-note-white",
"background": {
"dark": "#000000",
"light": "#ffffff"
},
"index": "a0",
"lockedBySelf": false,
"hidden": false,

5
blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-bookmark-url-by-copy-button-final.json
View File

@@ -17,7 +17,10 @@
"version": 1,
"props": {
"xywh": "[0,0,498,92]",
"background": "--affine-v2-edgeless-note-white",
"background": {
"dark": "#000000",
"light": "#ffffff"
},
"index": "a0",
"lockedBySelf": false,
"hidden": false,

5
blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-edgeless-mode-final.json
View File

@@ -27,7 +27,10 @@
"version": 1,
"props": {
"xywh": "[0,0,498,234]",
"background": "--affine-v2-edgeless-note-white",
"background": {
"dark": "#000000",
"light": "#ffffff"
},
"index": "a0",
"lockedBySelf": false,
"hidden": false,

5
blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-page-mode-final.json
View File

@@ -17,7 +17,10 @@
"version": 1,
"props": {
"xywh": "[0,0,498,92]",
"background": "--affine-v2-edgeless-note-white",
"background": {
"dark": "#000000",
"light": "#ffffff"
},
"index": "a0",
"lockedBySelf": false,
"hidden": false,

5
blocksuite/tests-legacy/snapshots/bookmark.spec.ts/covert-bookmark-block-to-link-text-final.json
View File

@@ -17,7 +17,10 @@
"version": 1,
"props": {
"xywh": "[0,0,498,92]",
"background": "--affine-v2-edgeless-note-white",
"background": {
"dark": "#000000",
"light": "#ffffff"
},
"index": "a0",
"lockedBySelf": false,
"hidden": false,

Some files were not shown because too many files have changed in this diff Show More