diff --git a/packages/tldraw/api-report.md b/packages/tldraw/api-report.md index 1d58c15182a4..23e41ae92216 100644 --- a/packages/tldraw/api-report.md +++ b/packages/tldraw/api-report.md @@ -1513,6 +1513,7 @@ export class NoteShapeUtil extends ShapeUtil { font: "draw" | "mono" | "sans" | "serif"; fontSizeAdjustment: number; growY: number; + labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow"; scale: number; size: "l" | "m" | "s" | "xl"; text: string; @@ -1539,6 +1540,7 @@ export class NoteShapeUtil extends ShapeUtil { font: "draw" | "mono" | "sans" | "serif"; fontSizeAdjustment: number; growY: number; + labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow"; scale: number; size: "l" | "m" | "s" | "xl"; text: string; diff --git a/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx b/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx index 5ba5ad6e0e9e..09047ab3dfaa 100644 --- a/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx @@ -71,6 +71,7 @@ export class NoteShapeUtil extends ShapeUtil { font: 'draw', align: 'middle', verticalAlign: 'middle', + labelColor: 'black', growY: 0, fontSizeAdjustment: 0, url: '', @@ -176,7 +177,17 @@ export class NoteShapeUtil extends ShapeUtil { const { id, type, - props: { scale, color, font, size, align, text, verticalAlign, fontSizeAdjustment }, + props: { + labelColor, + scale, + color, + font, + size, + align, + text, + verticalAlign, + fontSizeAdjustment, + }, } = shape const handleKeyDown = useNoteKeydownHandler(id) @@ -224,7 +235,7 @@ export class NoteShapeUtil extends ShapeUtil { text={text} isNote isSelected={isSelected} - labelColor={theme[color].note.text} + labelColor={labelColor === 'black' ? theme[color].note.text : theme[labelColor].fill} wrap padding={16 * scale} onKeyDown={handleKeyDown} diff --git a/packages/tlschema/api-report.md b/packages/tlschema/api-report.md index 3233451ff4c1..5df9d8489419 100644 --- a/packages/tlschema/api-report.md +++ b/packages/tlschema/api-report.md @@ -1261,6 +1261,8 @@ export interface TLNoteShapeProps { // (undocumented) growY: number; // (undocumented) + labelColor: TLDefaultColorStyle; + // (undocumented) scale: number; // (undocumented) size: TLDefaultSizeStyle; diff --git a/packages/tlschema/src/migrations.test.ts b/packages/tlschema/src/migrations.test.ts index 3cd0124d6451..95add4636488 100644 --- a/packages/tlschema/src/migrations.test.ts +++ b/packages/tlschema/src/migrations.test.ts @@ -2018,6 +2018,18 @@ describe('Make video asset file size optional', () => { }) }) +describe('Adding label color to note shapes', () => { + const { up, down } = getTestMigration(noteShapeVersions.AddLabelColor) + + test('up works as expected', () => { + expect(up({ props: {} })).toEqual({ props: { labelColor: 'black' } }) + }) + + test('down works as expected', () => { + expect(down({ props: { labelColor: 'black' } })).toEqual({ props: {} }) + }) +}) + /* --- PUT YOUR MIGRATIONS TESTS ABOVE HERE --- */ // check that all migrator fns were called at least once diff --git a/packages/tlschema/src/shapes/TLNoteShape.ts b/packages/tlschema/src/shapes/TLNoteShape.ts index 109f06ef462c..65c388f2cf00 100644 --- a/packages/tlschema/src/shapes/TLNoteShape.ts +++ b/packages/tlschema/src/shapes/TLNoteShape.ts @@ -1,7 +1,11 @@ import { T } from '@tldraw/validate' import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape' import { RecordProps } from '../recordsWithProps' -import { DefaultColorStyle, TLDefaultColorStyle } from '../styles/TLColorStyle' +import { + DefaultColorStyle, + DefaultLabelColorStyle, + TLDefaultColorStyle, +} from '../styles/TLColorStyle' import { DefaultFontStyle, TLDefaultFontStyle } from '../styles/TLFontStyle' import { DefaultHorizontalAlignStyle, @@ -17,6 +21,7 @@ import { TLBaseShape } from './TLBaseShape' /** @public */ export interface TLNoteShapeProps { color: TLDefaultColorStyle + labelColor: TLDefaultColorStyle size: TLDefaultSizeStyle font: TLDefaultFontStyle fontSizeAdjustment: number @@ -34,6 +39,7 @@ export type TLNoteShape = TLBaseShape<'note', TLNoteShapeProps> /** @public */ export const noteShapeProps: RecordProps = { color: DefaultColorStyle, + labelColor: DefaultLabelColorStyle, size: DefaultSizeStyle, font: DefaultFontStyle, fontSizeAdjustment: T.positiveNumber, @@ -53,6 +59,7 @@ const Versions = createShapePropsMigrationIds('note', { MakeUrlsValid: 5, AddFontSizeAdjustment: 6, AddScale: 7, + AddLabelColor: 8, }) export { Versions as noteShapeVersions } @@ -129,5 +136,14 @@ export const noteShapeMigrations = createShapePropsMigrationSequence({ delete props.scale }, }, + { + id: Versions.AddLabelColor, + up: (props) => { + props.labelColor = 'black' + }, + down: (props) => { + delete props.labelColor + }, + }, ], })