Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-08-01 01:29:31 +08: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
blocksuite/affine/shared/src/adapters/html/html.ts
+4 -7
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,
blocksuite/affine/shared/src/adapters/notion-html/notion-html.ts
+4 -7
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,
blocksuite/affine/shared/src/adapters/notion-text.ts
+2 -2
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',
blocksuite/affine/shared/src/adapters/plain-text/plain-text.ts
+4 -7
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,
blocksuite/affine/shared/src/services/edit-props-store.ts
+2 -5
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;
blocksuite/affine/shared/src/services/theme-service.ts
+24 -33
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]
blocksuite/affine/shared/src/utils/zod-schema.ts
+21 -50
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({});