Skip to content

Commit

Permalink
feat(edgeless): store real color values in edgeless
Browse files Browse the repository at this point in the history
  • Loading branch information
fundon committed Dec 22, 2024
1 parent c4c2dff commit 620f3a3
Show file tree
Hide file tree
Showing 80 changed files with 1,142 additions and 1,019 deletions.
4 changes: 2 additions & 2 deletions packages/affine/block-surface/src/renderer/canvas-renderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import { RoughCanvas } from '../utils/rough/canvas.js';
type EnvProvider = {
generateColorProperty: (color: Color, fallback: string) => 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[];
};
Expand Down Expand Up @@ -411,7 +411,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'
);
Expand Down
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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;

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
type ConnectorElementModel,
ConnectorMode,
DefaultTheme,
type LocalConnectorElementModel,
type PointStyle,
} from '@blocksuite/affine-model';
Expand Down Expand Up @@ -76,7 +77,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,
Expand Down Expand Up @@ -250,7 +255,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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,7 @@ import type {
} from '@blocksuite/affine-model';
import type { IBound } from '@blocksuite/global/utils';

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 { Bound } from '@blocksuite/global/utils';
import { deltaInsertsToChunks } from '@blocksuite/inline';

Expand Down Expand Up @@ -57,17 +52,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 };
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +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';
Expand Down Expand Up @@ -41,7 +40,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;
Expand Down
2 changes: 1 addition & 1 deletion packages/affine/block-surface/src/surface-block.ts
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ export class SurfaceBlockComponent extends BlockComponent<
fallback,
themeService.edgelessTheme
),
getColorValue: (color: Color, fallback?: string, real?: boolean) =>
getColorValue: (color: Color, fallback?: Color, real?: boolean) =>
themeService.getColorValue(
color,
fallback,
Expand Down
1 change: 1 addition & 0 deletions packages/affine/components/src/toolbar/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
4 changes: 2 additions & 2 deletions packages/affine/model/src/blocks/note/note-model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ import { BlockModel, defineBlockSchema } from '@blocksuite/store';

import {
type Color,
DEFAULT_NOTE_BACKGROUND_COLOR,
DEFAULT_NOTE_BORDER_SIZE,
DEFAULT_NOTE_BORDER_STYLE,
DEFAULT_NOTE_CORNER,
DEFAULT_NOTE_HEIGHT,
DEFAULT_NOTE_SHADOW,
DEFAULT_NOTE_WIDTH,
DefaultTheme,
NoteDisplayMode,
type StrokeStyle,
} from '../../consts/index.js';
Expand All @@ -24,7 +24,7 @@ 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,
Expand Down
3 changes: 0 additions & 3 deletions packages/affine/model/src/consts/brush.ts

This file was deleted.

148 changes: 52 additions & 96 deletions packages/affine/model/src/consts/color.ts
Original file line number Diff line number Diff line change
@@ -1,98 +1,54 @@
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 type PaletteEnum = z.infer<typeof PaletteEnum>;

export const StrokeColor = { Black, White, ...Medium } as const;

export const StrokeColorMap = createEnumMap(StrokeColor);

export const STROKE_COLORS = [...MEDIUM_PALETTES, Black, White] as const;
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')
);
}
5 changes: 0 additions & 5 deletions packages/affine/model/src/consts/connector.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { createEnumMap } from '../utils/enum.js';
import { StrokeColor } from './color.js';

export enum ConnectorEndpoint {
Front = 'Front',
Expand All @@ -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;
Expand Down
3 changes: 0 additions & 3 deletions packages/affine/model/src/consts/frame.ts

This file was deleted.

3 changes: 1 addition & 2 deletions packages/affine/model/src/consts/index.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
export * from './brush.js';
export * from './color.js';
export * from './connector.js';
export * from './doc.js';
export * from './frame.js';
export * from './line.js';
export * from './mindmap.js';
export * from './note.js';
export * from './shape.js';
export * from './text.js';
export * from './themes/index.js';
38 changes: 0 additions & 38 deletions packages/affine/model/src/consts/note.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { themeToVar } from '@toeverything/theme/v2';
import { z } from 'zod';

import { createEnumMap } from '../utils/enum.js';
Expand Down Expand Up @@ -72,40 +71,3 @@ export const DEFAULT_NOTE_CORNER = NoteCorners.Small;
export const NoteCornersSchema = z.nativeEnum(NoteCorners);

export const DEFAULT_NOTE_BORDER_SIZE = 4;

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 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 type NoteBackgroundPaletteEnum = z.infer<
typeof NoteBackgroundPaletteEnum
>;

export const NoteBackgroundColorMap = createEnumMap(NoteBackgroundColor);

export const DEFAULT_NOTE_BACKGROUND_COLOR = NoteBackgroundColor.White;
Loading

0 comments on commit 620f3a3

Please sign in to comment.