Skip to content

Commit

Permalink
feat(editor): store real color values in edgeless
Browse files Browse the repository at this point in the history
  • Loading branch information
fundon committed Dec 23, 2024
1 parent 67fb7ca commit d690394
Show file tree
Hide file tree
Showing 273 changed files with 1,887 additions and 1,264 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import type { Overlay } from './overlay.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 @@ -409,7 +409,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 @@ -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,
Expand Down Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 };
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion blocksuite/affine/block-surface/src/surface-block.ts
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,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 blocksuite/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 blocksuite/affine/model/src/blocks/note/note-model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,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 @@ -23,7 +23,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
147 changes: 52 additions & 95 deletions blocksuite/affine/model/src/consts/color.ts
Original file line number Diff line number Diff line change
@@ -1,97 +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 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 blocksuite/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: 1 addition & 2 deletions blocksuite/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';
6 changes: 3 additions & 3 deletions blocksuite/affine/model/src/consts/line.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand All @@ -23,7 +23,7 @@ export const LINE_WIDTHS = [
];

/**
* Use `StrokeColor` instead.
* Use `DefaultTheme.StrokeColorMap` instead.
*
* @deprecated
*/
Expand Down
Loading

0 comments on commit d690394

Please sign in to comment.