@bigbluebutton/tlschema 2.0.0-alpha.19

package/src/shapes/TLArrowShape.ts

@@ -0,0 +1,160 @@
+import { defineMigrations } from '@bigbluebutton/store'
+import { T } from '@bigbluebutton/validate'
+import { vec2dModelValidator } from '../misc/geometry-types'
+import { StyleProp } from '../styles/StyleProp'
+import { DefaultColorStyle, DefaultLabelColorStyle } from '../styles/TLColorStyle'
+import { DefaultDashStyle } from '../styles/TLDashStyle'
+import { DefaultFillStyle } from '../styles/TLFillStyle'
+import { DefaultFontStyle } from '../styles/TLFontStyle'
+import { DefaultSizeStyle } from '../styles/TLSizeStyle'
+import { ShapePropsType, TLBaseShape, shapeIdValidator } from './TLBaseShape'
+
+const arrowheadTypes = [
+	'arrow',
+	'triangle',
+	'square',
+	'dot',
+	'pipe',
+	'diamond',
+	'inverted',
+	'bar',
+	'none',
+] as const
+
+/** @public */
+export const ArrowShapeArrowheadStartStyle = StyleProp.defineEnum('tldraw:arrowheadStart', {
+	defaultValue: 'none',
+	values: arrowheadTypes,
+})
+
+/** @public */
+export const ArrowShapeArrowheadEndStyle = StyleProp.defineEnum('tldraw:arrowheadEnd', {
+	defaultValue: 'arrow',
+	values: arrowheadTypes,
+})
+
+/** @public */
+export type TLArrowShapeArrowheadStyle = T.TypeOf<typeof ArrowShapeArrowheadStartStyle>
+
+/** @public */
+const ArrowShapeTerminal = T.union('type', {
+	binding: T.object({
+		type: T.literal('binding'),
+		boundShapeId: shapeIdValidator,
+		normalizedAnchor: vec2dModelValidator,
+		isExact: T.boolean,
+		isPrecise: T.boolean,
+	}),
+	point: T.object({
+		type: T.literal('point'),
+		x: T.number,
+		y: T.number,
+	}),
+})
+
+/** @public */
+export type TLArrowShapeTerminal = T.TypeOf<typeof ArrowShapeTerminal>
+
+/** @public */
+export const arrowShapeProps = {
+	labelColor: DefaultLabelColorStyle,
+	color: DefaultColorStyle,
+	fill: DefaultFillStyle,
+	dash: DefaultDashStyle,
+	size: DefaultSizeStyle,
+	arrowheadStart: ArrowShapeArrowheadStartStyle,
+	arrowheadEnd: ArrowShapeArrowheadEndStyle,
+	font: DefaultFontStyle,
+	start: ArrowShapeTerminal,
+	end: ArrowShapeTerminal,
+	bend: T.number,
+	text: T.string,
+}
+
+/** @public */
+export type TLArrowShapeProps = ShapePropsType<typeof arrowShapeProps>
+
+/** @public */
+export type TLArrowShape = TLBaseShape<'arrow', TLArrowShapeProps>
+
+export const ArrowMigrationVersions = {
+	AddLabelColor: 1,
+	AddIsPrecise: 2,
+} as const
+
+/** @internal */
+export const arrowShapeMigrations = defineMigrations({
+	currentVersion: ArrowMigrationVersions.AddIsPrecise,
+	migrators: {
+		[ArrowMigrationVersions.AddLabelColor]: {
+			up: (record) => {
+				return {
+					...record,
+					props: {
+						...record.props,
+						labelColor: 'black',
+					},
+				}
+			},
+			down: (record) => {
+				const { labelColor: _, ...props } = record.props
+				return {
+					...record,
+					props,
+				}
+			},
+		},
+		[ArrowMigrationVersions.AddIsPrecise]: {
+			up: (record) => {
+				const { start, end } = record.props
+				return {
+					...record,
+					props: {
+						...record.props,
+						start:
+							(start as TLArrowShapeTerminal).type === 'binding'
+								? {
+										...start,
+										isPrecise: !(
+											start.normalizedAnchor.x === 0.5 && start.normalizedAnchor.y === 0.5
+										),
+								  }
+								: start,
+						end:
+							(end as TLArrowShapeTerminal).type === 'binding'
+								? {
+										...end,
+										isPrecise: !(end.normalizedAnchor.x === 0.5 && end.normalizedAnchor.y === 0.5),
+								  }
+								: end,
+					},
+				}
+			},
+			down: (record: any) => {
+				const { start, end } = record.props
+				const nStart = { ...start }
+				const nEnd = { ...end }
+				if (nStart.type === 'binding') {
+					if (!nStart.isPrecise) {
+						nStart.normalizedAnchor = { x: 0.5, y: 0.5 }
+					}
+					delete nStart.isPrecise
+				}
+				if (nEnd.type === 'binding') {
+					if (!nEnd.isPrecise) {
+						nEnd.normalizedAnchor = { x: 0.5, y: 0.5 }
+					}
+					delete nEnd.isPrecise
+				}
+				return {
+					...record,
+					props: {
+						...record.props,
+						start: nStart,
+						end: nEnd,
+					},
+				}
+			},
+		},
+	},
+})

package/src/shapes/TLBaseShape.ts

@@ -0,0 +1,67 @@
+import { BaseRecord } from '@bigbluebutton/store'
+import { Expand, JsonObject } from '@bigbluebutton/utils'
+import { T } from '@bigbluebutton/validate'
+import { TLOpacityType, opacityValidator } from '../misc/TLOpacity'
+import { idValidator } from '../misc/id-validator'
+import { TLParentId, TLShapeId } from '../records/TLShape'
+
+/** @public */
+export interface TLBaseShape<Type extends string, Props extends object>
+	extends BaseRecord<'shape', TLShapeId> {
+	type: Type
+	x: number
+	y: number
+	rotation: number
+	index: string
+	parentId: TLParentId
+	isLocked: boolean
+	opacity: TLOpacityType
+	props: Props
+	meta: JsonObject
+}
+
+/** @public */
+export const parentIdValidator = T.string.refine((id) => {
+	if (!id.startsWith('page:') && !id.startsWith('shape:')) {
+		throw new Error('Parent ID must start with "page:" or "shape:"')
+	}
+	return id as TLParentId
+})
+
+/** @public */
+export const shapeIdValidator = idValidator<TLShapeId>('shape')
+
+/** @public */
+export function createShapeValidator<
+	Type extends string,
+	Props extends JsonObject,
+	Meta extends JsonObject
+>(
+	type: Type,
+	props?: { [K in keyof Props]: T.Validatable<Props[K]> },
+	meta?: { [K in keyof Meta]: T.Validatable<Meta[K]> }
+) {
+	return T.object<TLBaseShape<Type, Props>>({
+		id: shapeIdValidator,
+		typeName: T.literal('shape'),
+		x: T.number,
+		y: T.number,
+		rotation: T.number,
+		index: T.string,
+		parentId: parentIdValidator,
+		type: T.literal(type),
+		isLocked: T.boolean,
+		opacity: opacityValidator,
+		props: props ? T.object(props) : (T.jsonValue as T.ObjectValidator<Props>),
+		meta: meta ? T.object(meta) : (T.jsonValue as T.ObjectValidator<Meta>),
+	})
+}
+
+/** @public */
+export type ShapeProps<Shape extends TLBaseShape<any, any>> = {
+	[K in keyof Shape['props']]: T.Validatable<Shape['props'][K]>
+}
+
+export type ShapePropsType<Config extends Record<string, T.Validatable<any>>> = Expand<{
+	[K in keyof Config]: T.TypeOf<Config[K]>
+}>

package/src/shapes/TLBookmarkShape.ts

@@ -0,0 +1,44 @@
+import { defineMigrations } from '@bigbluebutton/store'
+import { T } from '@bigbluebutton/validate'
+import { assetIdValidator } from '../assets/TLBaseAsset'
+import { ShapePropsType, TLBaseShape } from './TLBaseShape'
+
+/** @public */
+export const bookmarkShapeProps = {
+	w: T.nonZeroNumber,
+	h: T.nonZeroNumber,
+	assetId: assetIdValidator.nullable(),
+	url: T.string,
+}
+
+/** @public */
+export type TLBookmarkShapeProps = ShapePropsType<typeof bookmarkShapeProps>
+
+/** @public */
+export type TLBookmarkShape = TLBaseShape<'bookmark', TLBookmarkShapeProps>
+
+const Versions = {
+	NullAssetId: 1,
+} as const
+
+/** @internal */
+export const bookmarkShapeMigrations = defineMigrations({
+	currentVersion: Versions.NullAssetId,
+	migrators: {
+		[Versions.NullAssetId]: {
+			up: (shape: TLBookmarkShape) => {
+				if (shape.props.assetId === undefined) {
+					return { ...shape, props: { ...shape.props, assetId: null } } as typeof shape
+				}
+				return shape
+			},
+			down: (shape: TLBookmarkShape) => {
+				if (shape.props.assetId === null) {
+					const { assetId: _, ...props } = shape.props
+					return { ...shape, props } as typeof shape
+				}
+				return shape
+			},
+		},
+	},
+})

package/src/shapes/TLDrawShape.ts

@@ -0,0 +1,89 @@
+import { defineMigrations } from '@bigbluebutton/store'
+import { T } from '@bigbluebutton/validate'
+import { vec2dModelValidator } from '../misc/geometry-types'
+import { DefaultColorStyle } from '../styles/TLColorStyle'
+import { DefaultDashStyle } from '../styles/TLDashStyle'
+import { DefaultFillStyle } from '../styles/TLFillStyle'
+import { DefaultSizeStyle } from '../styles/TLSizeStyle'
+import { ShapePropsType, TLBaseShape } from './TLBaseShape'
+
+export const DrawShapeSegment = T.object({
+	type: T.literalEnum('free', 'straight'),
+	points: T.arrayOf(vec2dModelValidator),
+})
+
+/** @public */
+export type TLDrawShapeSegment = T.TypeOf<typeof DrawShapeSegment>
+
+/** @public */
+export const drawShapeProps = {
+	color: DefaultColorStyle,
+	fill: DefaultFillStyle,
+	dash: DefaultDashStyle,
+	size: DefaultSizeStyle,
+	segments: T.arrayOf(DrawShapeSegment),
+	isComplete: T.boolean,
+	isClosed: T.boolean,
+	isPen: T.boolean,
+}
+
+/** @public */
+export type TLDrawShapeProps = ShapePropsType<typeof drawShapeProps>
+
+/** @public */
+export type TLDrawShape = TLBaseShape<'draw', TLDrawShapeProps>
+
+const Versions = {
+	AddInPen: 1,
+} as const
+
+/** @internal */
+export const drawShapeMigrations = defineMigrations({
+	currentVersion: Versions.AddInPen,
+	migrators: {
+		[Versions.AddInPen]: {
+			up: (shape) => {
+				// Rather than checking to see whether the shape is a pen at runtime,
+				// from now on we're going to use the type of device reported to us
+				// as well as the pressure data received; but for existing shapes we
+				// need to check the pressure data to see if it's a pen or not.
+
+				const { points } = shape.props.segments[0]
+
+				if (points.length === 0) {
+					return {
+						...shape,
+						props: {
+							...shape.props,
+							isPen: false,
+						},
+					}
+				}
+
+				let isPen = !(points[0].z === 0 || points[0].z === 0.5)
+
+				if (points[1]) {
+					// Double check if we have a second point (we probably should)
+					isPen = isPen && !(points[1].z === 0 || points[1].z === 0.5)
+				}
+
+				return {
+					...shape,
+					props: {
+						...shape.props,
+						isPen,
+					},
+				}
+			},
+			down: (shape) => {
+				const { isPen: _isPen, ...propsWithOutIsPen } = shape.props
+				return {
+					...shape,
+					props: {
+						...propsWithOutIsPen,
+					},
+				}
+			},
+		},
+	},
+})