@tldraw/tlschema 4.2.0-next.f100cedfc45b → 4.3.0-canary.03ae87dcc44b
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-cjs/bindings/TLBaseBinding.js.map +2 -2
- package/dist-cjs/createTLSchema.js.map +2 -2
- package/dist-cjs/index.d.ts +194 -38
- package/dist-cjs/index.js +2 -1
- package/dist-cjs/index.js.map +2 -2
- package/dist-cjs/misc/TLHandle.js.map +1 -1
- package/dist-cjs/records/TLAsset.js.map +1 -1
- package/dist-cjs/records/TLBinding.js.map +2 -2
- package/dist-cjs/records/TLShape.js.map +2 -2
- package/dist-cjs/shapes/ShapeWithCrop.js.map +1 -1
- package/dist-cjs/shapes/TLBaseShape.js.map +2 -2
- package/dist-cjs/store-migrations.js +1 -1
- package/dist-cjs/store-migrations.js.map +2 -2
- package/dist-cjs/styles/TLColorStyle.js +26 -0
- package/dist-cjs/styles/TLColorStyle.js.map +2 -2
- package/dist-cjs/styles/TLFillStyle.js +1 -1
- package/dist-cjs/styles/TLFillStyle.js.map +2 -2
- package/dist-esm/bindings/TLBaseBinding.mjs.map +2 -2
- package/dist-esm/createTLSchema.mjs.map +2 -2
- package/dist-esm/index.d.mts +194 -38
- package/dist-esm/index.mjs +3 -1
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/misc/TLHandle.mjs.map +1 -1
- package/dist-esm/records/TLAsset.mjs.map +1 -1
- package/dist-esm/records/TLBinding.mjs.map +2 -2
- package/dist-esm/records/TLShape.mjs.map +2 -2
- package/dist-esm/shapes/TLBaseShape.mjs.map +2 -2
- package/dist-esm/store-migrations.mjs +1 -1
- package/dist-esm/store-migrations.mjs.map +2 -2
- package/dist-esm/styles/TLColorStyle.mjs +26 -0
- package/dist-esm/styles/TLColorStyle.mjs.map +2 -2
- package/dist-esm/styles/TLFillStyle.mjs +1 -1
- package/dist-esm/styles/TLFillStyle.mjs.map +2 -2
- package/package.json +5 -5
- package/src/bindings/TLBaseBinding.ts +25 -14
- package/src/createTLSchema.ts +8 -2
- package/src/index.ts +7 -0
- package/src/misc/TLHandle.ts +2 -0
- package/src/records/TLAsset.ts +2 -2
- package/src/records/TLBinding.ts +65 -23
- package/src/records/TLRecord.test.ts +17 -5
- package/src/records/TLShape.ts +100 -5
- package/src/shapes/ShapeWithCrop.ts +2 -2
- package/src/shapes/TLBaseShape.ts +34 -10
- package/src/store-migrations.ts +2 -1
- package/src/styles/TLColorStyle.ts +27 -0
- package/src/styles/TLFillStyle.ts +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/records/TLBinding.ts"],
|
|
4
|
-
"sourcesContent": ["import {\n\tRecordId,\n\tUnknownRecord,\n\tcreateMigrationIds,\n\tcreateRecordMigrationSequence,\n\tcreateRecordType,\n} from '@tldraw/store'\nimport { Expand, mapObjectMapValues, uniqueId } from '@tldraw/utils'\nimport { T } from '@tldraw/validate'\nimport { TLArrowBinding } from '../bindings/TLArrowBinding'\nimport { TLBaseBinding, createBindingValidator } from '../bindings/TLBaseBinding'\nimport { SchemaPropsInfo } from '../createTLSchema'\nimport { TLPropsMigrations } from '../recordsWithProps'\n\n/**\n * The default set of bindings that are available in the editor.\n * Currently includes only arrow bindings, but can be extended with custom bindings.\n *\n * @example\n * ```ts\n * // Arrow binding connects an arrow to shapes\n * const arrowBinding: TLDefaultBinding = {\n * id: 'binding:arrow1',\n * typeName: 'binding',\n * type: 'arrow',\n * fromId: 'shape:arrow1',\n * toId: 'shape:rectangle1',\n * props: {\n * terminal: 'end',\n * normalizedAnchor: { x: 0.5, y: 0.5 },\n * isExact: false,\n * isPrecise: true\n * }\n * }\n * ```\n *\n * @public\n */\nexport type TLDefaultBinding = TLArrowBinding\n\n/**\n * A type for a binding that is available in the editor but whose type is\n * unknown\u2014either one of the editor's default bindings or else a custom binding.\n * Used internally for type-safe handling of bindings with unknown structure.\n *\n * @example\n * ```ts\n * // Function that works with any binding type\n * function processBinding(binding: TLUnknownBinding) {\n * console.log(`Processing ${binding.type} binding from ${binding.fromId} to ${binding.toId}`)\n * // Handle binding properties generically\n * }\n * ```\n *\n * @public\n */\nexport type TLUnknownBinding = TLBaseBinding<string, object>\n\n/**\n * The set of all bindings that are available in the editor, including unknown bindings.\n * Bindings represent relationships between shapes, such as arrows connecting to other shapes.\n *\n * @example\n * ```ts\n * // Check binding type and handle accordingly\n * function handleBinding(binding: TLBinding) {\n * switch (binding.type) {\n * case 'arrow':\n * // Handle arrow binding\n * break\n * default:\n * // Handle unknown custom binding\n * break\n * }\n * }\n * ```\n *\n * @public\n */\nexport type TLBinding = TLDefaultBinding | TLUnknownBinding\n\n/**\n * Type for updating existing bindings with partial properties.\n * Only the id and type are required, all other properties are optional.\n *\n * @example\n * ```ts\n * // Update arrow binding properties\n * const bindingUpdate: TLBindingUpdate<TLArrowBinding> = {\n * id: 'binding:arrow1',\n * type: 'arrow',\n * props: {\n * normalizedAnchor: { x: 0.7, y: 0.3 } // Only update anchor position\n * }\n * }\n *\n * editor.updateBindings([bindingUpdate])\n * ```\n *\n * @public\n */\nexport type TLBindingUpdate<T extends TLBinding = TLBinding> = Expand<{\n\tid: TLBindingId\n\ttype: T['type']\n\ttypeName?: T['typeName']\n\tfromId?: T['fromId']\n\ttoId?: T['toId']\n\tprops?: Partial<T['props']>\n\tmeta?: Partial<T['meta']>\n}>\n\n/**\n * Type for creating new bindings with required fromId and toId.\n * The id is optional and will be generated if not provided.\n *\n * @example\n * ```ts\n * // Create a new arrow binding\n * const newBinding: TLBindingCreate<TLArrowBinding> = {\n * type: 'arrow',\n * fromId: 'shape:arrow1',\n * toId: 'shape:rectangle1',\n * props: {\n * terminal: 'end',\n * normalizedAnchor: { x: 0.5, y: 0.5 },\n * isExact: false,\n * isPrecise: true\n * }\n * }\n *\n * editor.createBindings([newBinding])\n * ```\n *\n * @public\n */\nexport type TLBindingCreate<T extends TLBinding = TLBinding> = Expand<{\n\tid?: TLBindingId\n\ttype: T['type']\n\ttypeName?: T['typeName']\n\tfromId: T['fromId']\n\ttoId: T['toId']\n\tprops?: Partial<T['props']>\n\tmeta?: Partial<T['meta']>\n}>\n\n/**\n * Branded string type for binding record identifiers.\n * Prevents mixing binding IDs with other types of record IDs at compile time.\n *\n * @example\n * ```ts\n * import { createBindingId } from '@tldraw/tlschema'\n *\n * // Create a new binding ID\n * const bindingId: TLBindingId = createBindingId()\n *\n * // Use in binding records\n * const binding: TLBinding = {\n * id: bindingId,\n * type: 'arrow',\n * fromId: 'shape:arrow1',\n * toId: 'shape:rectangle1',\n * // ... other properties\n * }\n * ```\n *\n * @public\n */\nexport type TLBindingId = RecordId<TLUnknownBinding>\n\n/**\n * Migration version identifiers for the root binding record schema.\n * Currently empty as no migrations have been applied to the base binding structure.\n *\n * @example\n * ```ts\n * // Future migrations would be defined here\n * const rootBindingVersions = createMigrationIds('com.tldraw.binding', {\n * AddNewProperty: 1,\n * } as const)\n * ```\n *\n * @public\n */\nexport const rootBindingVersions = createMigrationIds('com.tldraw.binding', {} as const)\n\n/**\n * Migration sequence for the root binding record structure.\n * Currently empty as the binding schema has not required any migrations yet.\n *\n * @example\n * ```ts\n * // Migrations would be automatically applied when loading old documents\n * const migratedStore = migrator.migrateStoreSnapshot({\n * schema: oldSchema,\n * store: oldStoreSnapshot\n * })\n * ```\n *\n * @public\n */\nexport const rootBindingMigrations = createRecordMigrationSequence({\n\tsequenceId: 'com.tldraw.binding',\n\trecordType: 'binding',\n\tsequence: [],\n})\n\n/**\n * Type guard to check if a record is a TLBinding.\n * Useful for filtering or type narrowing when working with mixed record types.\n *\n * @param record - The record to check\n * @returns True if the record is a binding, false otherwise\n *\n * @example\n * ```ts\n * // Filter bindings from mixed records\n * const allRecords = store.allRecords()\n * const bindings = allRecords.filter(isBinding)\n *\n * // Type guard usage\n * function processRecord(record: UnknownRecord) {\n * if (isBinding(record)) {\n * // record is now typed as TLBinding\n * console.log(`Binding from ${record.fromId} to ${record.toId}`)\n * }\n * }\n * ```\n *\n * @public\n */\nexport function isBinding(record?: UnknownRecord): record is TLBinding {\n\tif (!record) return false\n\treturn record.typeName === 'binding'\n}\n\n/**\n * Type guard to check if a string is a valid TLBindingId.\n * Validates that the ID follows the correct format for binding identifiers.\n *\n * @param id - The string to check\n * @returns True if the string is a valid binding ID, false otherwise\n *\n * @example\n * ```ts\n * // Validate binding IDs\n * const maybeBindingId = 'binding:abc123'\n * if (isBindingId(maybeBindingId)) {\n * // maybeBindingId is now typed as TLBindingId\n * const binding = store.get(maybeBindingId)\n * }\n *\n * // Filter binding IDs from mixed ID array\n * const mixedIds = ['shape:1', 'binding:2', 'page:3']\n * const bindingIds = mixedIds.filter(isBindingId)\n * ```\n *\n * @public\n */\nexport function isBindingId(id?: string): id is TLBindingId {\n\tif (!id) return false\n\treturn id.startsWith('binding:')\n}\n\n/**\n * Creates a new TLBindingId with proper formatting.\n * Generates a unique ID if none is provided, or formats a provided ID correctly.\n *\n * @param id - Optional custom ID suffix. If not provided, a unique ID is generated\n * @returns A properly formatted binding ID\n *\n * @example\n * ```ts\n * // Create with auto-generated ID\n * const bindingId1 = createBindingId() // 'binding:abc123'\n *\n * // Create with custom ID\n * const bindingId2 = createBindingId('myCustomBinding') // 'binding:myCustomBinding'\n *\n * // Use in binding creation\n * const binding: TLBinding = {\n * id: createBindingId(),\n * type: 'arrow',\n * fromId: 'shape:arrow1',\n * toId: 'shape:rectangle1',\n * // ... other properties\n * }\n * ```\n *\n * @public\n */\nexport function createBindingId(id?: string): TLBindingId {\n\treturn `binding:${id ?? uniqueId()}` as TLBindingId\n}\n\n/**\n * Creates a migration sequence for binding properties.\n * This is a pass-through function that validates and returns the provided migrations.\n *\n * @param migrations - The migration sequence for binding properties\n * @returns The validated migration sequence\n *\n * @example\n * ```ts\n * // Define migrations for custom binding properties\n * const myBindingMigrations = createBindingPropsMigrationSequence({\n * sequence: [\n * {\n * id: 'com.myapp.binding.custom/1.0.0',\n * up: (props) => ({ ...props, newProperty: 'default' }),\n * down: ({ newProperty, ...props }) => props\n * }\n * ]\n * })\n * ```\n *\n * @public\n */\nexport function createBindingPropsMigrationSequence(\n\tmigrations: TLPropsMigrations\n): TLPropsMigrations {\n\treturn migrations\n}\n\n/**\n * Creates properly formatted migration IDs for binding property migrations.\n * Follows the convention: 'com.tldraw.binding.\\{bindingType\\}/\\{version\\}'\n *\n * @param bindingType - The type of binding these migrations apply to\n * @param ids - Object mapping migration names to version numbers\n * @returns Object with formatted migration IDs\n *\n * @example\n * ```ts\n * // Create migration IDs for custom binding\n * const myBindingVersions = createBindingPropsMigrationIds('myCustomBinding', {\n * AddNewProperty: 1,\n * UpdateProperty: 2\n * })\n *\n * // Result:\n * // {\n * // AddNewProperty: 'com.tldraw.binding.myCustomBinding/1',\n * // UpdateProperty: 'com.tldraw.binding.myCustomBinding/2'\n * // }\n * ```\n *\n * @public\n */\nexport function createBindingPropsMigrationIds<S extends string, T extends Record<string, number>>(\n\tbindingType: S,\n\tids: T\n): { [k in keyof T]: `com.tldraw.binding.${S}/${T[k]}` } {\n\treturn mapObjectMapValues(ids, (_k, v) => `com.tldraw.binding.${bindingType}/${v}`) as any\n}\n\n/**\n * Creates a record type for TLBinding with validation based on the provided binding schemas.\n * This function is used internally to configure the binding record type in the schema.\n *\n * @param bindings - Record mapping binding type names to their schema information\n * @returns A configured record type for bindings with validation\n *\n * @example\n * ```ts\n * // Used internally when creating schemas\n * const bindingRecordType = createBindingRecordType({\n * arrow: {\n * props: arrowBindingProps,\n * meta: arrowBindingMeta\n * }\n * })\n * ```\n *\n * @internal\n */\nexport function createBindingRecordType(bindings: Record<string, SchemaPropsInfo>) {\n\treturn createRecordType<TLBinding>('binding', {\n\t\tscope: 'document',\n\t\tvalidator: T.model(\n\t\t\t'binding',\n\t\t\tT.union(\n\t\t\t\t'type',\n\t\t\t\tmapObjectMapValues(bindings, (type, { props, meta }) =>\n\t\t\t\t\tcreateBindingValidator(type, props, meta)\n\t\t\t\t)\n\t\t\t)\n\t\t),\n\t}).withDefaultProperties(() => ({\n\t\tmeta: {},\n\t}))\n}\n"],
|
|
5
|
-
"mappings": "AAAA;AAAA,EAGC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,
|
|
4
|
+
"sourcesContent": ["import {\n\tRecordId,\n\tUnknownRecord,\n\tcreateMigrationIds,\n\tcreateRecordMigrationSequence,\n\tcreateRecordType,\n} from '@tldraw/store'\nimport { mapObjectMapValues, uniqueId } from '@tldraw/utils'\nimport { T } from '@tldraw/validate'\nimport { TLArrowBinding } from '../bindings/TLArrowBinding'\nimport { TLBaseBinding, createBindingValidator } from '../bindings/TLBaseBinding'\nimport { SchemaPropsInfo } from '../createTLSchema'\nimport { TLPropsMigrations } from '../recordsWithProps'\n\n/**\n * The default set of bindings that are available in the editor.\n * Currently includes only arrow bindings, but can be extended with custom bindings.\n *\n * @example\n * ```ts\n * // Arrow binding connects an arrow to shapes\n * const arrowBinding: TLDefaultBinding = {\n * id: 'binding:arrow1',\n * typeName: 'binding',\n * type: 'arrow',\n * fromId: 'shape:arrow1',\n * toId: 'shape:rectangle1',\n * props: {\n * terminal: 'end',\n * normalizedAnchor: { x: 0.5, y: 0.5 },\n * isExact: false,\n * isPrecise: true\n * }\n * }\n * ```\n *\n * @public\n */\nexport type TLDefaultBinding = TLArrowBinding\n\n/**\n * A type for a binding that is available in the editor but whose type is\n * unknown\u2014either one of the editor's default bindings or else a custom binding.\n * Used internally for type-safe handling of bindings with unknown structure.\n *\n * @example\n * ```ts\n * // Function that works with any binding type\n * function processBinding(binding: TLUnknownBinding) {\n * console.log(`Processing ${binding.type} binding from ${binding.fromId} to ${binding.toId}`)\n * // Handle binding properties generically\n * }\n * ```\n *\n * @public\n */\nexport type TLUnknownBinding = TLBaseBinding<string, object>\n\n/** @public */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface TLGlobalBindingPropsMap {}\n\n/** @public */\n// prettier-ignore\nexport type TLIndexedBindings = {\n\t// We iterate over a union of augmented keys and default binding types.\n\t// This allows us to include (or conditionally exclude or override) the default bindings in one go.\n\t//\n\t// In the `as` clause we are filtering out disabled bindings.\n\t[K in keyof TLGlobalBindingPropsMap | TLDefaultBinding['type'] as K extends TLDefaultBinding['type']\n\t\t? K extends keyof TLGlobalBindingPropsMap\n\t\t\t? // if it extends a nullish value the user has disabled this binding type so we filter it out with never\n\t\t\t\tTLGlobalBindingPropsMap[K] extends null | undefined\n\t\t\t\t? never\n\t\t\t\t: K\n\t\t\t: K\n\t\t: K]: K extends TLDefaultBinding['type']\n\t\t\t? // if it's a default binding type we need to check if it's been overridden\n\t\t\t\tK extends keyof TLGlobalBindingPropsMap\n\t\t\t\t? // if it has been overriden then use the custom binding definition\n\t\t\t\t\tTLBaseBinding<K, TLGlobalBindingPropsMap[K]>\n\t\t\t\t: // if it has not been overriden then reuse existing type aliases for better type display\n\t\t\t\t\tExtract<TLDefaultBinding, { type: K }>\n\t\t\t: // use the custom binding definition\n\t\t\t\tTLBaseBinding<K, TLGlobalBindingPropsMap[K & keyof TLGlobalBindingPropsMap]>\n}\n\n/**\n * The set of all bindings that are available in the editor.\n * Bindings represent relationships between shapes, such as arrows connecting to other shapes.\n *\n * You can use this type without a type argument to work with any binding, or pass\n * a specific binding type string (e.g., `'arrow'`) to narrow down to that specific binding type.\n *\n * @example\n * ```ts\n * // Check binding type and handle accordingly\n * function handleBinding(binding: TLBinding) {\n * switch (binding.type) {\n * case 'arrow':\n * // Handle arrow binding\n * break\n * default:\n * // Handle unknown custom binding\n * break\n * }\n * }\n *\n * // Narrow to a specific binding type by passing the type as a generic argument\n * function getArrowSourceId(binding: TLBinding<'arrow'>) {\n * return binding.fromId // TypeScript knows this is a TLArrowBinding\n * }\n * ```\n *\n * @public\n */\nexport type TLBinding<K extends keyof TLIndexedBindings = keyof TLIndexedBindings> =\n\tTLIndexedBindings[K]\n\n/**\n * Type for updating existing bindings with partial properties.\n * Only the id and type are required, all other properties are optional.\n *\n * @example\n * ```ts\n * // Update arrow binding properties\n * const bindingUpdate: TLBindingUpdate<TLArrowBinding> = {\n * id: 'binding:arrow1',\n * type: 'arrow',\n * props: {\n * normalizedAnchor: { x: 0.7, y: 0.3 } // Only update anchor position\n * }\n * }\n *\n * editor.updateBindings([bindingUpdate])\n * ```\n *\n * @public\n */\nexport type TLBindingUpdate<T extends TLBinding = TLBinding> = T extends T\n\t? {\n\t\t\tid: TLBindingId\n\t\t\ttype: T['type']\n\t\t\ttypeName?: T['typeName']\n\t\t\tfromId?: T['fromId']\n\t\t\ttoId?: T['toId']\n\t\t\tprops?: Partial<T['props']>\n\t\t\tmeta?: Partial<T['meta']>\n\t\t}\n\t: never\n\n/**\n * Type for creating new bindings with required fromId and toId.\n * The id is optional and will be generated if not provided.\n *\n * @example\n * ```ts\n * // Create a new arrow binding\n * const newBinding: TLBindingCreate<TLArrowBinding> = {\n * type: 'arrow',\n * fromId: 'shape:arrow1',\n * toId: 'shape:rectangle1',\n * props: {\n * terminal: 'end',\n * normalizedAnchor: { x: 0.5, y: 0.5 },\n * isExact: false,\n * isPrecise: true\n * }\n * }\n *\n * editor.createBindings([newBinding])\n * ```\n *\n * @public\n */\nexport type TLBindingCreate<T extends TLBinding = TLBinding> = T extends T\n\t? {\n\t\t\tid?: TLBindingId\n\t\t\ttype: T['type']\n\t\t\ttypeName?: T['typeName']\n\t\t\tfromId: T['fromId']\n\t\t\ttoId: T['toId']\n\t\t\tprops?: Partial<T['props']>\n\t\t\tmeta?: Partial<T['meta']>\n\t\t}\n\t: never\n\n/**\n * Branded string type for binding record identifiers.\n * Prevents mixing binding IDs with other types of record IDs at compile time.\n *\n * @example\n * ```ts\n * import { createBindingId } from '@tldraw/tlschema'\n *\n * // Create a new binding ID\n * const bindingId: TLBindingId = createBindingId()\n *\n * // Use in binding records\n * const binding: TLBinding = {\n * id: bindingId,\n * type: 'arrow',\n * fromId: 'shape:arrow1',\n * toId: 'shape:rectangle1',\n * // ... other properties\n * }\n * ```\n *\n * @public\n */\nexport type TLBindingId = RecordId<TLBinding>\n\n/**\n * Migration version identifiers for the root binding record schema.\n * Currently empty as no migrations have been applied to the base binding structure.\n *\n * @example\n * ```ts\n * // Future migrations would be defined here\n * const rootBindingVersions = createMigrationIds('com.tldraw.binding', {\n * AddNewProperty: 1,\n * } as const)\n * ```\n *\n * @public\n */\nexport const rootBindingVersions = createMigrationIds('com.tldraw.binding', {} as const)\n\n/**\n * Migration sequence for the root binding record structure.\n * Currently empty as the binding schema has not required any migrations yet.\n *\n * @example\n * ```ts\n * // Migrations would be automatically applied when loading old documents\n * const migratedStore = migrator.migrateStoreSnapshot({\n * schema: oldSchema,\n * store: oldStoreSnapshot\n * })\n * ```\n *\n * @public\n */\nexport const rootBindingMigrations = createRecordMigrationSequence({\n\tsequenceId: 'com.tldraw.binding',\n\trecordType: 'binding',\n\tsequence: [],\n})\n\n/**\n * Type guard to check if a record is a TLBinding.\n * Useful for filtering or type narrowing when working with mixed record types.\n *\n * @param record - The record to check\n * @returns True if the record is a binding, false otherwise\n *\n * @example\n * ```ts\n * // Filter bindings from mixed records\n * const allRecords = store.allRecords()\n * const bindings = allRecords.filter(isBinding)\n *\n * // Type guard usage\n * function processRecord(record: UnknownRecord) {\n * if (isBinding(record)) {\n * // record is now typed as TLBinding\n * console.log(`Binding from ${record.fromId} to ${record.toId}`)\n * }\n * }\n * ```\n *\n * @public\n */\nexport function isBinding(record?: UnknownRecord): record is TLBinding {\n\tif (!record) return false\n\treturn record.typeName === 'binding'\n}\n\n/**\n * Type guard to check if a string is a valid TLBindingId.\n * Validates that the ID follows the correct format for binding identifiers.\n *\n * @param id - The string to check\n * @returns True if the string is a valid binding ID, false otherwise\n *\n * @example\n * ```ts\n * // Validate binding IDs\n * const maybeBindingId = 'binding:abc123'\n * if (isBindingId(maybeBindingId)) {\n * // maybeBindingId is now typed as TLBindingId\n * const binding = store.get(maybeBindingId)\n * }\n *\n * // Filter binding IDs from mixed ID array\n * const mixedIds = ['shape:1', 'binding:2', 'page:3']\n * const bindingIds = mixedIds.filter(isBindingId)\n * ```\n *\n * @public\n */\nexport function isBindingId(id?: string): id is TLBindingId {\n\tif (!id) return false\n\treturn id.startsWith('binding:')\n}\n\n/**\n * Creates a new TLBindingId with proper formatting.\n * Generates a unique ID if none is provided, or formats a provided ID correctly.\n *\n * @param id - Optional custom ID suffix. If not provided, a unique ID is generated\n * @returns A properly formatted binding ID\n *\n * @example\n * ```ts\n * // Create with auto-generated ID\n * const bindingId1 = createBindingId() // 'binding:abc123'\n *\n * // Create with custom ID\n * const bindingId2 = createBindingId('myCustomBinding') // 'binding:myCustomBinding'\n *\n * // Use in binding creation\n * const binding: TLBinding = {\n * id: createBindingId(),\n * type: 'arrow',\n * fromId: 'shape:arrow1',\n * toId: 'shape:rectangle1',\n * // ... other properties\n * }\n * ```\n *\n * @public\n */\nexport function createBindingId(id?: string): TLBindingId {\n\treturn `binding:${id ?? uniqueId()}` as TLBindingId\n}\n\n/**\n * Creates a migration sequence for binding properties.\n * This is a pass-through function that validates and returns the provided migrations.\n *\n * @param migrations - The migration sequence for binding properties\n * @returns The validated migration sequence\n *\n * @example\n * ```ts\n * // Define migrations for custom binding properties\n * const myBindingMigrations = createBindingPropsMigrationSequence({\n * sequence: [\n * {\n * id: 'com.myapp.binding.custom/1.0.0',\n * up: (props) => ({ ...props, newProperty: 'default' }),\n * down: ({ newProperty, ...props }) => props\n * }\n * ]\n * })\n * ```\n *\n * @public\n */\nexport function createBindingPropsMigrationSequence(\n\tmigrations: TLPropsMigrations\n): TLPropsMigrations {\n\treturn migrations\n}\n\n/**\n * Creates properly formatted migration IDs for binding property migrations.\n * Follows the convention: 'com.tldraw.binding.\\{bindingType\\}/\\{version\\}'\n *\n * @param bindingType - The type of binding these migrations apply to\n * @param ids - Object mapping migration names to version numbers\n * @returns Object with formatted migration IDs\n *\n * @example\n * ```ts\n * // Create migration IDs for custom binding\n * const myBindingVersions = createBindingPropsMigrationIds('myCustomBinding', {\n * AddNewProperty: 1,\n * UpdateProperty: 2\n * })\n *\n * // Result:\n * // {\n * // AddNewProperty: 'com.tldraw.binding.myCustomBinding/1',\n * // UpdateProperty: 'com.tldraw.binding.myCustomBinding/2'\n * // }\n * ```\n *\n * @public\n */\nexport function createBindingPropsMigrationIds<S extends string, T extends Record<string, number>>(\n\tbindingType: S,\n\tids: T\n): { [k in keyof T]: `com.tldraw.binding.${S}/${T[k]}` } {\n\treturn mapObjectMapValues(ids, (_k, v) => `com.tldraw.binding.${bindingType}/${v}`) as any\n}\n\n/**\n * Creates a record type for TLBinding with validation based on the provided binding schemas.\n * This function is used internally to configure the binding record type in the schema.\n *\n * @param bindings - Record mapping binding type names to their schema information\n * @returns A configured record type for bindings with validation\n *\n * @example\n * ```ts\n * // Used internally when creating schemas\n * const bindingRecordType = createBindingRecordType({\n * arrow: {\n * props: arrowBindingProps,\n * meta: arrowBindingMeta\n * }\n * })\n * ```\n *\n * @internal\n */\nexport function createBindingRecordType(bindings: Record<string, SchemaPropsInfo>) {\n\treturn createRecordType('binding', {\n\t\tscope: 'document',\n\t\tvalidator: T.model(\n\t\t\t'binding',\n\t\t\tT.union(\n\t\t\t\t'type',\n\t\t\t\tmapObjectMapValues(bindings, (type, { props, meta }) =>\n\t\t\t\t\tcreateBindingValidator(type, props, meta)\n\t\t\t\t)\n\t\t\t)\n\t\t),\n\t}).withDefaultProperties(() => ({\n\t\tmeta: {},\n\t}))\n}\n"],
|
|
5
|
+
"mappings": "AAAA;AAAA,EAGC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,oBAAoB,gBAAgB;AAC7C,SAAS,SAAS;AAElB,SAAwB,8BAA8B;AAwN/C,MAAM,sBAAsB,mBAAmB,sBAAsB,CAAC,CAAU;AAiBhF,MAAM,wBAAwB,8BAA8B;AAAA,EAClE,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU,CAAC;AACZ,CAAC;AA0BM,SAAS,UAAU,QAA6C;AACtE,MAAI,CAAC,OAAQ,QAAO;AACpB,SAAO,OAAO,aAAa;AAC5B;AAyBO,SAAS,YAAY,IAAgC;AAC3D,MAAI,CAAC,GAAI,QAAO;AAChB,SAAO,GAAG,WAAW,UAAU;AAChC;AA6BO,SAAS,gBAAgB,IAA0B;AACzD,SAAO,WAAW,MAAM,SAAS,CAAC;AACnC;AAyBO,SAAS,oCACf,YACoB;AACpB,SAAO;AACR;AA2BO,SAAS,+BACf,aACA,KACwD;AACxD,SAAO,mBAAmB,KAAK,CAAC,IAAI,MAAM,sBAAsB,WAAW,IAAI,CAAC,EAAE;AACnF;AAsBO,SAAS,wBAAwB,UAA2C;AAClF,SAAO,iBAAiB,WAAW;AAAA,IAClC,OAAO;AAAA,IACP,WAAW,EAAE;AAAA,MACZ;AAAA,MACA,EAAE;AAAA,QACD;AAAA,QACA;AAAA,UAAmB;AAAA,UAAU,CAAC,MAAM,EAAE,OAAO,KAAK,MACjD,uBAAuB,MAAM,OAAO,IAAI;AAAA,QACzC;AAAA,MACD;AAAA,IACD;AAAA,EACD,CAAC,EAAE,sBAAsB,OAAO;AAAA,IAC/B,MAAM,CAAC;AAAA,EACR,EAAE;AACH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/records/TLShape.ts"],
|
|
4
|
-
"sourcesContent": ["import {\n\tRecordId,\n\tUnknownRecord,\n\tcreateMigrationIds,\n\tcreateRecordMigrationSequence,\n\tcreateRecordType,\n} from '@tldraw/store'\nimport { mapObjectMapValues, uniqueId } from '@tldraw/utils'\nimport { T } from '@tldraw/validate'\nimport { SchemaPropsInfo } from '../createTLSchema'\nimport { TLPropsMigrations } from '../recordsWithProps'\nimport { TLArrowShape } from '../shapes/TLArrowShape'\nimport { TLBaseShape, createShapeValidator } from '../shapes/TLBaseShape'\nimport { TLBookmarkShape } from '../shapes/TLBookmarkShape'\nimport { TLDrawShape } from '../shapes/TLDrawShape'\nimport { TLEmbedShape } from '../shapes/TLEmbedShape'\nimport { TLFrameShape } from '../shapes/TLFrameShape'\nimport { TLGeoShape } from '../shapes/TLGeoShape'\nimport { TLGroupShape } from '../shapes/TLGroupShape'\nimport { TLHighlightShape } from '../shapes/TLHighlightShape'\nimport { TLImageShape } from '../shapes/TLImageShape'\nimport { TLLineShape } from '../shapes/TLLineShape'\nimport { TLNoteShape } from '../shapes/TLNoteShape'\nimport { TLTextShape } from '../shapes/TLTextShape'\nimport { TLVideoShape } from '../shapes/TLVideoShape'\nimport { StyleProp } from '../styles/StyleProp'\nimport { TLPageId } from './TLPage'\n\n/**\n * The default set of shapes that are available in the editor.\n *\n * This union type represents all the built-in shape types supported by tldraw,\n * including arrows, bookmarks, drawings, embeds, frames, geometry shapes,\n * groups, images, lines, notes, text, videos, and highlights.\n *\n * @example\n * ```ts\n * // Check if a shape is a default shape type\n * function isDefaultShape(shape: TLShape): shape is TLDefaultShape {\n * const defaultTypes = ['arrow', 'bookmark', 'draw', 'embed', 'frame', 'geo', 'group', 'image', 'line', 'note', 'text', 'video', 'highlight']\n * return defaultTypes.includes(shape.type)\n * }\n * ```\n *\n * @public\n */\nexport type TLDefaultShape =\n\t| TLArrowShape\n\t| TLBookmarkShape\n\t| TLDrawShape\n\t| TLEmbedShape\n\t| TLFrameShape\n\t| TLGeoShape\n\t| TLGroupShape\n\t| TLImageShape\n\t| TLLineShape\n\t| TLNoteShape\n\t| TLTextShape\n\t| TLVideoShape\n\t| TLHighlightShape\n\n/**\n * A type for a shape that is available in the editor but whose type is\n * unknown\u2014either one of the editor's default shapes or else a custom shape.\n *\n * This is useful when working with shapes generically without knowing their specific type.\n * The shape type is a string and props are a generic object.\n *\n * @example\n * ```ts\n * // Handle any shape regardless of its specific type\n * function processUnknownShape(shape: TLUnknownShape) {\n * console.log(`Processing shape of type: ${shape.type}`)\n * console.log(`Position: (${shape.x}, ${shape.y})`)\n * }\n * ```\n *\n * @public\n */\nexport type TLUnknownShape = TLBaseShape<string, object>\n\n/**\n * The set of all shapes that are available in the editor, including unknown shapes.\n *\n * This is the primary shape type used throughout tldraw. It includes both the\n * built-in default shapes and any custom shapes that might be added.\n *\n * @example\n * ```ts\n * // Work with any shape in the editor\n * function moveShape(shape: TLShape, deltaX: number, deltaY: number): TLShape {\n * return {\n * ...shape,\n * x: shape.x + deltaX,\n * y: shape.y + deltaY\n * }\n * }\n * ```\n *\n * @public\n */\nexport type TLShape = TLDefaultShape | TLUnknownShape\n\n/**\n * A partial version of a shape, useful for updates and patches.\n *\n * This type represents a shape where all properties except `id` and `type` are optional.\n * It's commonly used when updating existing shapes or creating shape patches.\n *\n * @example\n * ```ts\n * // Update a shape's position\n * const shapeUpdate: TLShapePartial = {\n * id: 'shape:123',\n * type: 'geo',\n * x: 100,\n * y: 200\n * }\n *\n * // Update shape properties\n * const propsUpdate: TLShapePartial<TLGeoShape> = {\n * id: 'shape:123',\n * type: 'geo',\n * props: {\n * w: 150,\n * h: 100\n * }\n * }\n * ```\n *\n * @public\n */\nexport type TLShapePartial<T extends TLShape = TLShape> = T extends T\n\t? {\n\t\t\tid: TLShapeId\n\t\t\ttype: T['type']\n\t\t\tprops?: Partial<T['props']>\n\t\t\tmeta?: Partial<T['meta']>\n\t\t} & Partial<Omit<T, 'type' | 'id' | 'props' | 'meta'>>\n\t: never\n\n/**\n * A unique identifier for a shape record.\n *\n * Shape IDs are branded strings that start with \"shape:\" followed by a unique identifier.\n * This type-safe approach prevents mixing up different types of record IDs.\n *\n * @example\n * ```ts\n * const shapeId: TLShapeId = createShapeId() // \"shape:abc123\"\n * const customId: TLShapeId = createShapeId('my-custom-id') // \"shape:my-custom-id\"\n * ```\n *\n * @public\n */\nexport type TLShapeId = RecordId<TLUnknownShape>\n\n/**\n * The ID of a shape's parent, which can be either a page or another shape.\n *\n * Shapes can be parented to pages (for top-level shapes) or to other shapes\n * (for shapes inside frames or groups).\n *\n * @example\n * ```ts\n * // Shape parented to a page\n * const pageParentId: TLParentId = 'page:main'\n *\n * // Shape parented to another shape (e.g., inside a frame)\n * const shapeParentId: TLParentId = 'shape:frame123'\n * ```\n *\n * @public\n */\nexport type TLParentId = TLPageId | TLShapeId\n\n/**\n * Migration version IDs for the root shape schema.\n *\n * These track the evolution of the base shape structure over time, ensuring\n * that shapes created in older versions can be migrated to newer formats.\n *\n * @example\n * ```ts\n * // Check if a migration needs to be applied\n * if (shapeVersion < rootShapeVersions.AddIsLocked) {\n * // Apply isLocked migration\n * }\n * ```\n *\n * @public\n */\nexport const rootShapeVersions = createMigrationIds('com.tldraw.shape', {\n\tAddIsLocked: 1,\n\tHoistOpacity: 2,\n\tAddMeta: 3,\n\tAddWhite: 4,\n} as const)\n\n/**\n * Migration sequence for the root shape record type.\n *\n * This sequence defines how shape records should be transformed when migrating\n * between different schema versions. Each migration handles a specific version\n * upgrade, ensuring data compatibility across tldraw versions.\n *\n * @public\n */\nexport const rootShapeMigrations = createRecordMigrationSequence({\n\tsequenceId: 'com.tldraw.shape',\n\trecordType: 'shape',\n\tsequence: [\n\t\t{\n\t\t\tid: rootShapeVersions.AddIsLocked,\n\t\t\tup: (record: any) => {\n\t\t\t\trecord.isLocked = false\n\t\t\t},\n\t\t\tdown: (record: any) => {\n\t\t\t\tdelete record.isLocked\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: rootShapeVersions.HoistOpacity,\n\t\t\tup: (record: any) => {\n\t\t\t\trecord.opacity = Number(record.props.opacity ?? '1')\n\t\t\t\tdelete record.props.opacity\n\t\t\t},\n\t\t\tdown: (record: any) => {\n\t\t\t\tconst opacity = record.opacity\n\t\t\t\tdelete record.opacity\n\t\t\t\trecord.props.opacity =\n\t\t\t\t\topacity < 0.175\n\t\t\t\t\t\t? '0.1'\n\t\t\t\t\t\t: opacity < 0.375\n\t\t\t\t\t\t\t? '0.25'\n\t\t\t\t\t\t\t: opacity < 0.625\n\t\t\t\t\t\t\t\t? '0.5'\n\t\t\t\t\t\t\t\t: opacity < 0.875\n\t\t\t\t\t\t\t\t\t? '0.75'\n\t\t\t\t\t\t\t\t\t: '1'\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: rootShapeVersions.AddMeta,\n\t\t\tup: (record: any) => {\n\t\t\t\trecord.meta = {}\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: rootShapeVersions.AddWhite,\n\t\t\tup: (_record) => {\n\t\t\t\t// noop\n\t\t\t},\n\t\t\tdown: (record: any) => {\n\t\t\t\tif (record.props.color === 'white') {\n\t\t\t\t\trecord.props.color = 'black'\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t],\n})\n\n/**\n * Type guard to check if a record is a shape.\n *\n * @param record - The record to check\n * @returns True if the record is a shape, false otherwise\n *\n * @example\n * ```ts\n * const record = store.get('shape:abc123')\n * if (isShape(record)) {\n * console.log(`Shape type: ${record.type}`)\n * console.log(`Position: (${record.x}, ${record.y})`)\n * }\n * ```\n *\n * @public\n */\nexport function isShape(record?: UnknownRecord): record is TLShape {\n\tif (!record) return false\n\treturn record.typeName === 'shape'\n}\n\n/**\n * Type guard to check if a string is a valid shape ID.\n *\n * @param id - The string to check\n * @returns True if the string is a valid shape ID, false otherwise\n *\n * @example\n * ```ts\n * const id = 'shape:abc123'\n * if (isShapeId(id)) {\n * const shape = store.get(id) // TypeScript knows id is TLShapeId\n * }\n *\n * // Check user input\n * function selectShape(id: string) {\n * if (isShapeId(id)) {\n * editor.selectShape(id)\n * } else {\n * console.error('Invalid shape ID format')\n * }\n * }\n * ```\n *\n * @public\n */\nexport function isShapeId(id?: string): id is TLShapeId {\n\tif (!id) return false\n\treturn id.startsWith('shape:')\n}\n\n/**\n * Creates a new shape ID.\n *\n * @param id - Optional custom ID suffix. If not provided, a unique ID will be generated\n * @returns A new shape ID with the \"shape:\" prefix\n *\n * @example\n * ```ts\n * // Create a shape with auto-generated ID\n * const shapeId = createShapeId() // \"shape:abc123\"\n *\n * // Create a shape with custom ID\n * const customShapeId = createShapeId('my-rectangle') // \"shape:my-rectangle\"\n *\n * // Use in shape creation\n * const newShape: TLGeoShape = {\n * id: createShapeId(),\n * type: 'geo',\n * x: 100,\n * y: 200,\n * // ... other properties\n * }\n * ```\n *\n * @public\n */\nexport function createShapeId(id?: string): TLShapeId {\n\treturn `shape:${id ?? uniqueId()}` as TLShapeId\n}\n\n/**\n * Extracts style properties from a shape's props definition and maps them to their property keys.\n *\n * This function analyzes shape property validators to identify which ones are style properties\n * and creates a mapping from StyleProp instances to their corresponding property keys.\n * It also validates that each style property is only used once per shape.\n *\n * @param props - Record of property validators for a shape type\n * @returns Map from StyleProp instances to their property keys\n * @throws Error if a style property is used more than once in the same shape\n *\n * @example\n * ```ts\n * const geoShapeProps = {\n * color: DefaultColorStyle,\n * fill: DefaultFillStyle,\n * width: T.number,\n * height: T.number\n * }\n *\n * const styleMap = getShapePropKeysByStyle(geoShapeProps)\n * // styleMap.get(DefaultColorStyle) === 'color'\n * // styleMap.get(DefaultFillStyle) === 'fill'\n * ```\n *\n * @internal\n */\nexport function getShapePropKeysByStyle(props: Record<string, T.Validatable<any>>) {\n\tconst propKeysByStyle = new Map<StyleProp<unknown>, string>()\n\tfor (const [key, prop] of Object.entries(props)) {\n\t\tif (prop instanceof StyleProp) {\n\t\t\tif (propKeysByStyle.has(prop)) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`Duplicate style prop ${prop.id}. Each style prop can only be used once within a shape.`\n\t\t\t\t)\n\t\t\t}\n\t\t\tpropKeysByStyle.set(prop, key)\n\t\t}\n\t}\n\treturn propKeysByStyle\n}\n\n/**\n * Creates a migration sequence for shape properties.\n *\n * This is a pass-through function that maintains the same structure as the input.\n * It's used for consistency and to provide a clear API for defining shape property migrations.\n *\n * @param migrations - The migration sequence to create\n * @returns The same migration sequence (pass-through)\n *\n * @example\n * ```ts\n * const myShapeMigrations = createShapePropsMigrationSequence({\n * sequence: [\n * {\n * id: 'com.myapp.shape.custom/1.0.0',\n * up: (props) => ({ ...props, newProperty: 'default' }),\n * down: ({ newProperty, ...props }) => props\n * }\n * ]\n * })\n * ```\n *\n * @public\n */\nexport function createShapePropsMigrationSequence(\n\tmigrations: TLPropsMigrations\n): TLPropsMigrations {\n\treturn migrations\n}\n\n/**\n * Creates properly formatted migration IDs for shape properties.\n *\n * Generates standardized migration IDs following the convention:\n * `com.tldraw.shape.{shapeType}/{version}`\n *\n * @param shapeType - The type of shape these migrations apply to\n * @param ids - Record mapping migration names to version numbers\n * @returns Record with the same keys but formatted migration ID values\n *\n * @example\n * ```ts\n * const myShapeVersions = createShapePropsMigrationIds('custom', {\n * AddColor: 1,\n * AddSize: 2,\n * RefactorProps: 3\n * })\n * // Result: {\n * // AddColor: 'com.tldraw.shape.custom/1',\n * // AddSize: 'com.tldraw.shape.custom/2',\n * // RefactorProps: 'com.tldraw.shape.custom/3'\n * // }\n * ```\n *\n * @public\n */\nexport function createShapePropsMigrationIds<\n\tconst S extends string,\n\tconst T extends Record<string, number>,\n>(shapeType: S, ids: T): { [k in keyof T]: `com.tldraw.shape.${S}/${T[k]}` } {\n\treturn mapObjectMapValues(ids, (_k, v) => `com.tldraw.shape.${shapeType}/${v}`) as any\n}\n\n/**\n * Creates the record type definition for shapes.\n *\n * This function generates a complete record type for shapes that includes validation\n * for all registered shape types. It combines the base shape properties with\n * type-specific properties and creates a union validator that can handle any\n * registered shape type.\n *\n * @param shapes - Record of shape type names to their schema configuration\n * @returns A complete RecordType for shapes with proper validation and default properties\n *\n * @example\n * ```ts\n * const shapeRecordType = createShapeRecordType({\n * geo: { props: geoShapeProps, migrations: geoMigrations },\n * arrow: { props: arrowShapeProps, migrations: arrowMigrations }\n * })\n * ```\n *\n * @internal\n */\nexport function createShapeRecordType(shapes: Record<string, SchemaPropsInfo>) {\n\treturn createRecordType<TLShape>('shape', {\n\t\tscope: 'document',\n\t\tvalidator: T.model(\n\t\t\t'shape',\n\t\t\tT.union(\n\t\t\t\t'type',\n\t\t\t\tmapObjectMapValues(shapes, (type, { props, meta }) =>\n\t\t\t\t\tcreateShapeValidator(type, props, meta)\n\t\t\t\t)\n\t\t\t)\n\t\t),\n\t}).withDefaultProperties(() => ({\n\t\tx: 0,\n\t\ty: 0,\n\t\trotation: 0,\n\t\tisLocked: false,\n\t\topacity: 1,\n\t\tmeta: {},\n\t}))\n}\n"],
|
|
5
|
-
"mappings": "AAAA;AAAA,EAGC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,oBAAoB,gBAAgB;AAC7C,SAAS,SAAS;AAIlB,SAAsB,4BAA4B;AAalD,SAAS,iBAAiB;
|
|
4
|
+
"sourcesContent": ["import {\n\tRecordId,\n\tUnknownRecord,\n\tcreateMigrationIds,\n\tcreateRecordMigrationSequence,\n\tcreateRecordType,\n} from '@tldraw/store'\nimport { mapObjectMapValues, uniqueId } from '@tldraw/utils'\nimport { T } from '@tldraw/validate'\nimport { SchemaPropsInfo } from '../createTLSchema'\nimport { TLPropsMigrations } from '../recordsWithProps'\nimport { TLArrowShape } from '../shapes/TLArrowShape'\nimport { TLBaseShape, createShapeValidator } from '../shapes/TLBaseShape'\nimport { TLBookmarkShape } from '../shapes/TLBookmarkShape'\nimport { TLDrawShape } from '../shapes/TLDrawShape'\nimport { TLEmbedShape } from '../shapes/TLEmbedShape'\nimport { TLFrameShape } from '../shapes/TLFrameShape'\nimport { TLGeoShape } from '../shapes/TLGeoShape'\nimport { TLGroupShape } from '../shapes/TLGroupShape'\nimport { TLHighlightShape } from '../shapes/TLHighlightShape'\nimport { TLImageShape } from '../shapes/TLImageShape'\nimport { TLLineShape } from '../shapes/TLLineShape'\nimport { TLNoteShape } from '../shapes/TLNoteShape'\nimport { TLTextShape } from '../shapes/TLTextShape'\nimport { TLVideoShape } from '../shapes/TLVideoShape'\nimport { StyleProp } from '../styles/StyleProp'\nimport { TLPageId } from './TLPage'\n\n/**\n * The default set of shapes that are available in the editor.\n *\n * This union type represents all the built-in shape types supported by tldraw,\n * including arrows, bookmarks, drawings, embeds, frames, geometry shapes,\n * groups, images, lines, notes, text, videos, and highlights.\n *\n * @example\n * ```ts\n * // Check if a shape is a default shape type\n * function isDefaultShape(shape: TLShape): shape is TLDefaultShape {\n * const defaultTypes = ['arrow', 'bookmark', 'draw', 'embed', 'frame', 'geo', 'group', 'image', 'line', 'note', 'text', 'video', 'highlight']\n * return defaultTypes.includes(shape.type)\n * }\n * ```\n *\n * @public\n */\nexport type TLDefaultShape =\n\t| TLArrowShape\n\t| TLBookmarkShape\n\t| TLDrawShape\n\t| TLEmbedShape\n\t| TLFrameShape\n\t| TLGeoShape\n\t| TLGroupShape\n\t| TLImageShape\n\t| TLLineShape\n\t| TLNoteShape\n\t| TLTextShape\n\t| TLVideoShape\n\t| TLHighlightShape\n\n/**\n * A type for a shape that is available in the editor but whose type is\n * unknown\u2014either one of the editor's default shapes or else a custom shape.\n *\n * This is useful when working with shapes generically without knowing their specific type.\n * The shape type is a string and props are a generic object.\n *\n * @example\n * ```ts\n * // Handle any shape regardless of its specific type\n * function processUnknownShape(shape: TLUnknownShape) {\n * console.log(`Processing shape of type: ${shape.type}`)\n * console.log(`Position: (${shape.x}, ${shape.y})`)\n * }\n * ```\n *\n * @public\n */\nexport type TLUnknownShape = TLBaseShape<string, object>\n\n/** @public */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface TLGlobalShapePropsMap {}\n\n/** @public */\n// prettier-ignore\nexport type TLIndexedShapes = {\n\t// We iterate over a union of augmented keys and default shape types.\n\t// This allows us to include (or conditionally exclude or override) the default shapes in one go.\n\t//\n\t// In the `as` clause we are filtering out disabled shapes.\n\t[K in keyof TLGlobalShapePropsMap | TLDefaultShape['type'] as K extends TLDefaultShape['type']\n\t\t? // core shapes are always available and cannot be overridden so we just include them\n\t\t\tK extends 'group'\n\t\t\t? K\n\t\t\t: K extends keyof TLGlobalShapePropsMap\n\t\t\t\t? // if it extends a nullish value the user has disabled this shape type so we filter it out with never\n\t\t\t\t\tTLGlobalShapePropsMap[K] extends null | undefined\n\t\t\t\t\t? never\n\t\t\t\t\t: K\n\t\t\t\t: K\n\t\t: K]: K extends 'group'\n\t\t? // core shapes are always available and cannot be overridden so we just include them\n\t\t\tExtract<TLDefaultShape, { type: K }>\n\t\t: K extends TLDefaultShape['type']\n\t\t\t? // if it's a default shape type we need to check if it's been overridden\n\t\t\t\tK extends keyof TLGlobalShapePropsMap\n\t\t\t\t? // if it has been overriden then use the custom shape definition\n\t\t\t\t\tTLBaseShape<K, TLGlobalShapePropsMap[K]>\n\t\t\t\t: // if it has not been overriden then reuse existing type aliases for better type display\n\t\t\t\t\tExtract<TLDefaultShape, { type: K }>\n\t\t\t: // use the custom shape definition\n\t\t\t\tTLBaseShape<K, TLGlobalShapePropsMap[K & keyof TLGlobalShapePropsMap]>\n}\n\n/**\n * The set of all shapes that are available in the editor.\n *\n * This is the primary shape type used throughout tldraw. It includes both the\n * built-in default shapes and any custom shapes that might be added.\n *\n * You can use this type without a type argument to work with any shape, or pass\n * a specific shape type string (e.g., `'geo'`, `'arrow'`, `'text'`) to narrow\n * down to that specific shape type.\n *\n * @example\n * ```ts\n * // Work with any shape in the editor\n * function moveShape(shape: TLShape, deltaX: number, deltaY: number): TLShape {\n * return {\n * ...shape,\n * x: shape.x + deltaX,\n * y: shape.y + deltaY\n * }\n * }\n *\n * // Narrow to a specific shape type by passing the type as a generic argument\n * function getArrowLabel(shape: TLShape<'arrow'>): string {\n * return shape.props.text // TypeScript knows this is a TLArrowShape\n * }\n * ```\n *\n * @public\n */\nexport type TLShape<K extends keyof TLIndexedShapes = keyof TLIndexedShapes> = TLIndexedShapes[K]\n\n/**\n * A partial version of a shape, useful for updates and patches.\n *\n * This type represents a shape where all properties except `id` and `type` are optional.\n * It's commonly used when updating existing shapes or creating shape patches.\n *\n * @example\n * ```ts\n * // Update a shape's position\n * const shapeUpdate: TLShapePartial = {\n * id: 'shape:123',\n * type: 'geo',\n * x: 100,\n * y: 200\n * }\n *\n * // Update shape properties\n * const propsUpdate: TLShapePartial<TLGeoShape> = {\n * id: 'shape:123',\n * type: 'geo',\n * props: {\n * w: 150,\n * h: 100\n * }\n * }\n * ```\n *\n * @public\n */\nexport type TLShapePartial<T extends TLShape = TLShape> = T extends T\n\t? {\n\t\t\tid: TLShapeId\n\t\t\ttype: T['type']\n\t\t\tprops?: Partial<T['props']>\n\t\t\tmeta?: Partial<T['meta']>\n\t\t} & Partial<Omit<T, 'type' | 'id' | 'props' | 'meta'>>\n\t: never\n\n/**\n * A partial version of a shape, useful for creating shapes.\n *\n * This type represents a shape where all properties except `type` are optional.\n * It's commonly used when creating shapes.\n *\n * @example\n * ```ts\n * // Create a shape\n * const shapeCreate: TLCreateShapePartial = {\n * type: 'geo',\n * x: 100,\n * y: 200\n * }\n *\n * // Create shape properties\n * const propsCreate: TLCreateShapePartial<TLGeoShape> = {\n * type: 'geo',\n * props: {\n * w: 150,\n * h: 100\n * }\n * }\n * ```\n *\n * @public\n */\nexport type TLCreateShapePartial<T extends TLShape = TLShape> = T extends T\n\t? {\n\t\t\ttype: T['type']\n\t\t\tprops?: Partial<T['props']>\n\t\t\tmeta?: Partial<T['meta']>\n\t\t} & Partial<Omit<T, 'type' | 'props' | 'meta'>>\n\t: never\n\n/**\n * Extract a shape type by its props.\n *\n * This utility type takes a props object type and returns the corresponding shape type\n * from the TLShape union whose props match the given type.\n *\n * @example\n * ```ts\n * type MyShape = ExtractShapeByProps<{ w: number; h: number }>\n * // MyShape is now the type of shape(s) that have props with w and h as numbers\n * ```\n *\n * @public\n */\nexport type ExtractShapeByProps<P> = Extract<TLShape, { props: P }>\n\n/**\n * A unique identifier for a shape record.\n *\n * Shape IDs are branded strings that start with \"shape:\" followed by a unique identifier.\n * This type-safe approach prevents mixing up different types of record IDs.\n *\n * @example\n * ```ts\n * const shapeId: TLShapeId = createShapeId() // \"shape:abc123\"\n * const customId: TLShapeId = createShapeId('my-custom-id') // \"shape:my-custom-id\"\n * ```\n *\n * @public\n */\nexport type TLShapeId = RecordId<TLShape>\n\n/**\n * The ID of a shape's parent, which can be either a page or another shape.\n *\n * Shapes can be parented to pages (for top-level shapes) or to other shapes\n * (for shapes inside frames or groups).\n *\n * @example\n * ```ts\n * // Shape parented to a page\n * const pageParentId: TLParentId = 'page:main'\n *\n * // Shape parented to another shape (e.g., inside a frame)\n * const shapeParentId: TLParentId = 'shape:frame123'\n * ```\n *\n * @public\n */\nexport type TLParentId = TLPageId | TLShapeId\n\n/**\n * Migration version IDs for the root shape schema.\n *\n * These track the evolution of the base shape structure over time, ensuring\n * that shapes created in older versions can be migrated to newer formats.\n *\n * @example\n * ```ts\n * // Check if a migration needs to be applied\n * if (shapeVersion < rootShapeVersions.AddIsLocked) {\n * // Apply isLocked migration\n * }\n * ```\n *\n * @public\n */\nexport const rootShapeVersions = createMigrationIds('com.tldraw.shape', {\n\tAddIsLocked: 1,\n\tHoistOpacity: 2,\n\tAddMeta: 3,\n\tAddWhite: 4,\n})\n\n/**\n * Migration sequence for the root shape record type.\n *\n * This sequence defines how shape records should be transformed when migrating\n * between different schema versions. Each migration handles a specific version\n * upgrade, ensuring data compatibility across tldraw versions.\n *\n * @public\n */\nexport const rootShapeMigrations = createRecordMigrationSequence({\n\tsequenceId: 'com.tldraw.shape',\n\trecordType: 'shape',\n\tsequence: [\n\t\t{\n\t\t\tid: rootShapeVersions.AddIsLocked,\n\t\t\tup: (record: any) => {\n\t\t\t\trecord.isLocked = false\n\t\t\t},\n\t\t\tdown: (record: any) => {\n\t\t\t\tdelete record.isLocked\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: rootShapeVersions.HoistOpacity,\n\t\t\tup: (record: any) => {\n\t\t\t\trecord.opacity = Number(record.props.opacity ?? '1')\n\t\t\t\tdelete record.props.opacity\n\t\t\t},\n\t\t\tdown: (record: any) => {\n\t\t\t\tconst opacity = record.opacity\n\t\t\t\tdelete record.opacity\n\t\t\t\trecord.props.opacity =\n\t\t\t\t\topacity < 0.175\n\t\t\t\t\t\t? '0.1'\n\t\t\t\t\t\t: opacity < 0.375\n\t\t\t\t\t\t\t? '0.25'\n\t\t\t\t\t\t\t: opacity < 0.625\n\t\t\t\t\t\t\t\t? '0.5'\n\t\t\t\t\t\t\t\t: opacity < 0.875\n\t\t\t\t\t\t\t\t\t? '0.75'\n\t\t\t\t\t\t\t\t\t: '1'\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: rootShapeVersions.AddMeta,\n\t\t\tup: (record: any) => {\n\t\t\t\trecord.meta = {}\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: rootShapeVersions.AddWhite,\n\t\t\tup: (_record) => {\n\t\t\t\t// noop\n\t\t\t},\n\t\t\tdown: (record: any) => {\n\t\t\t\tif (record.props.color === 'white') {\n\t\t\t\t\trecord.props.color = 'black'\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t],\n})\n\n/**\n * Type guard to check if a record is a shape.\n *\n * @param record - The record to check\n * @returns True if the record is a shape, false otherwise\n *\n * @example\n * ```ts\n * const record = store.get('shape:abc123')\n * if (isShape(record)) {\n * console.log(`Shape type: ${record.type}`)\n * console.log(`Position: (${record.x}, ${record.y})`)\n * }\n * ```\n *\n * @public\n */\nexport function isShape(record?: UnknownRecord): record is TLShape {\n\tif (!record) return false\n\treturn record.typeName === 'shape'\n}\n\n/**\n * Type guard to check if a string is a valid shape ID.\n *\n * @param id - The string to check\n * @returns True if the string is a valid shape ID, false otherwise\n *\n * @example\n * ```ts\n * const id = 'shape:abc123'\n * if (isShapeId(id)) {\n * const shape = store.get(id) // TypeScript knows id is TLShapeId\n * }\n *\n * // Check user input\n * function selectShape(id: string) {\n * if (isShapeId(id)) {\n * editor.selectShape(id)\n * } else {\n * console.error('Invalid shape ID format')\n * }\n * }\n * ```\n *\n * @public\n */\nexport function isShapeId(id?: string): id is TLShapeId {\n\tif (!id) return false\n\treturn id.startsWith('shape:')\n}\n\n/**\n * Creates a new shape ID.\n *\n * @param id - Optional custom ID suffix. If not provided, a unique ID will be generated\n * @returns A new shape ID with the \"shape:\" prefix\n *\n * @example\n * ```ts\n * // Create a shape with auto-generated ID\n * const shapeId = createShapeId() // \"shape:abc123\"\n *\n * // Create a shape with custom ID\n * const customShapeId = createShapeId('my-rectangle') // \"shape:my-rectangle\"\n *\n * // Use in shape creation\n * const newShape: TLGeoShape = {\n * id: createShapeId(),\n * type: 'geo',\n * x: 100,\n * y: 200,\n * // ... other properties\n * }\n * ```\n *\n * @public\n */\nexport function createShapeId(id?: string): TLShapeId {\n\treturn `shape:${id ?? uniqueId()}` as TLShapeId\n}\n\n/**\n * Extracts style properties from a shape's props definition and maps them to their property keys.\n *\n * This function analyzes shape property validators to identify which ones are style properties\n * and creates a mapping from StyleProp instances to their corresponding property keys.\n * It also validates that each style property is only used once per shape.\n *\n * @param props - Record of property validators for a shape type\n * @returns Map from StyleProp instances to their property keys\n * @throws Error if a style property is used more than once in the same shape\n *\n * @example\n * ```ts\n * const geoShapeProps = {\n * color: DefaultColorStyle,\n * fill: DefaultFillStyle,\n * width: T.number,\n * height: T.number\n * }\n *\n * const styleMap = getShapePropKeysByStyle(geoShapeProps)\n * // styleMap.get(DefaultColorStyle) === 'color'\n * // styleMap.get(DefaultFillStyle) === 'fill'\n * ```\n *\n * @internal\n */\nexport function getShapePropKeysByStyle(props: Record<string, T.Validatable<any>>) {\n\tconst propKeysByStyle = new Map<StyleProp<unknown>, string>()\n\tfor (const [key, prop] of Object.entries(props)) {\n\t\tif (prop instanceof StyleProp) {\n\t\t\tif (propKeysByStyle.has(prop)) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`Duplicate style prop ${prop.id}. Each style prop can only be used once within a shape.`\n\t\t\t\t)\n\t\t\t}\n\t\t\tpropKeysByStyle.set(prop, key)\n\t\t}\n\t}\n\treturn propKeysByStyle\n}\n\n/**\n * Creates a migration sequence for shape properties.\n *\n * This is a pass-through function that maintains the same structure as the input.\n * It's used for consistency and to provide a clear API for defining shape property migrations.\n *\n * @param migrations - The migration sequence to create\n * @returns The same migration sequence (pass-through)\n *\n * @example\n * ```ts\n * const myShapeMigrations = createShapePropsMigrationSequence({\n * sequence: [\n * {\n * id: 'com.myapp.shape.custom/1.0.0',\n * up: (props) => ({ ...props, newProperty: 'default' }),\n * down: ({ newProperty, ...props }) => props\n * }\n * ]\n * })\n * ```\n *\n * @public\n */\nexport function createShapePropsMigrationSequence(\n\tmigrations: TLPropsMigrations\n): TLPropsMigrations {\n\treturn migrations\n}\n\n/**\n * Creates properly formatted migration IDs for shape properties.\n *\n * Generates standardized migration IDs following the convention:\n * `com.tldraw.shape.{shapeType}/{version}`\n *\n * @param shapeType - The type of shape these migrations apply to\n * @param ids - Record mapping migration names to version numbers\n * @returns Record with the same keys but formatted migration ID values\n *\n * @example\n * ```ts\n * const myShapeVersions = createShapePropsMigrationIds('custom', {\n * AddColor: 1,\n * AddSize: 2,\n * RefactorProps: 3\n * })\n * // Result: {\n * // AddColor: 'com.tldraw.shape.custom/1',\n * // AddSize: 'com.tldraw.shape.custom/2',\n * // RefactorProps: 'com.tldraw.shape.custom/3'\n * // }\n * ```\n *\n * @public\n */\nexport function createShapePropsMigrationIds<\n\tconst S extends string,\n\tconst T extends Record<string, number>,\n>(shapeType: S, ids: T): { [k in keyof T]: `com.tldraw.shape.${S}/${T[k]}` } {\n\treturn mapObjectMapValues(ids, (_k, v) => `com.tldraw.shape.${shapeType}/${v}`) as any\n}\n\n/**\n * Creates the record type definition for shapes.\n *\n * This function generates a complete record type for shapes that includes validation\n * for all registered shape types. It combines the base shape properties with\n * type-specific properties and creates a union validator that can handle any\n * registered shape type.\n *\n * @param shapes - Record of shape type names to their schema configuration\n * @returns A complete RecordType for shapes with proper validation and default properties\n *\n * @example\n * ```ts\n * const shapeRecordType = createShapeRecordType({\n * geo: { props: geoShapeProps, migrations: geoMigrations },\n * arrow: { props: arrowShapeProps, migrations: arrowMigrations }\n * })\n * ```\n *\n * @internal\n */\nexport function createShapeRecordType(shapes: Record<string, SchemaPropsInfo>) {\n\treturn createRecordType('shape', {\n\t\tscope: 'document',\n\t\tvalidator: T.model(\n\t\t\t'shape',\n\t\t\tT.union(\n\t\t\t\t'type',\n\t\t\t\tmapObjectMapValues(shapes, (type, { props, meta }) =>\n\t\t\t\t\tcreateShapeValidator(type, props, meta)\n\t\t\t\t)\n\t\t\t)\n\t\t),\n\t}).withDefaultProperties(() => ({\n\t\tx: 0,\n\t\ty: 0,\n\t\trotation: 0,\n\t\tisLocked: false,\n\t\topacity: 1,\n\t\tmeta: {},\n\t}))\n}\n"],
|
|
5
|
+
"mappings": "AAAA;AAAA,EAGC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,oBAAoB,gBAAgB;AAC7C,SAAS,SAAS;AAIlB,SAAsB,4BAA4B;AAalD,SAAS,iBAAiB;AAsQnB,MAAM,oBAAoB,mBAAmB,oBAAoB;AAAA,EACvE,aAAa;AAAA,EACb,cAAc;AAAA,EACd,SAAS;AAAA,EACT,UAAU;AACX,CAAC;AAWM,MAAM,sBAAsB,8BAA8B;AAAA,EAChE,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,IACT;AAAA,MACC,IAAI,kBAAkB;AAAA,MACtB,IAAI,CAAC,WAAgB;AACpB,eAAO,WAAW;AAAA,MACnB;AAAA,MACA,MAAM,CAAC,WAAgB;AACtB,eAAO,OAAO;AAAA,MACf;AAAA,IACD;AAAA,IACA;AAAA,MACC,IAAI,kBAAkB;AAAA,MACtB,IAAI,CAAC,WAAgB;AACpB,eAAO,UAAU,OAAO,OAAO,MAAM,WAAW,GAAG;AACnD,eAAO,OAAO,MAAM;AAAA,MACrB;AAAA,MACA,MAAM,CAAC,WAAgB;AACtB,cAAM,UAAU,OAAO;AACvB,eAAO,OAAO;AACd,eAAO,MAAM,UACZ,UAAU,QACP,QACA,UAAU,QACT,SACA,UAAU,QACT,QACA,UAAU,QACT,SACA;AAAA,MACR;AAAA,IACD;AAAA,IACA;AAAA,MACC,IAAI,kBAAkB;AAAA,MACtB,IAAI,CAAC,WAAgB;AACpB,eAAO,OAAO,CAAC;AAAA,MAChB;AAAA,IACD;AAAA,IACA;AAAA,MACC,IAAI,kBAAkB;AAAA,MACtB,IAAI,CAAC,YAAY;AAAA,MAEjB;AAAA,MACA,MAAM,CAAC,WAAgB;AACtB,YAAI,OAAO,MAAM,UAAU,SAAS;AACnC,iBAAO,MAAM,QAAQ;AAAA,QACtB;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD,CAAC;AAmBM,SAAS,QAAQ,QAA2C;AAClE,MAAI,CAAC,OAAQ,QAAO;AACpB,SAAO,OAAO,aAAa;AAC5B;AA2BO,SAAS,UAAU,IAA8B;AACvD,MAAI,CAAC,GAAI,QAAO;AAChB,SAAO,GAAG,WAAW,QAAQ;AAC9B;AA4BO,SAAS,cAAc,IAAwB;AACrD,SAAO,SAAS,MAAM,SAAS,CAAC;AACjC;AA6BO,SAAS,wBAAwB,OAA2C;AAClF,QAAM,kBAAkB,oBAAI,IAAgC;AAC5D,aAAW,CAAC,KAAK,IAAI,KAAK,OAAO,QAAQ,KAAK,GAAG;AAChD,QAAI,gBAAgB,WAAW;AAC9B,UAAI,gBAAgB,IAAI,IAAI,GAAG;AAC9B,cAAM,IAAI;AAAA,UACT,wBAAwB,KAAK,EAAE;AAAA,QAChC;AAAA,MACD;AACA,sBAAgB,IAAI,MAAM,GAAG;AAAA,IAC9B;AAAA,EACD;AACA,SAAO;AACR;AA0BO,SAAS,kCACf,YACoB;AACpB,SAAO;AACR;AA4BO,SAAS,6BAGd,WAAc,KAA6D;AAC5E,SAAO,mBAAmB,KAAK,CAAC,IAAI,MAAM,oBAAoB,SAAS,IAAI,CAAC,EAAE;AAC/E;AAuBO,SAAS,sBAAsB,QAAyC;AAC9E,SAAO,iBAAiB,SAAS;AAAA,IAChC,OAAO;AAAA,IACP,WAAW,EAAE;AAAA,MACZ;AAAA,MACA,EAAE;AAAA,QACD;AAAA,QACA;AAAA,UAAmB;AAAA,UAAQ,CAAC,MAAM,EAAE,OAAO,KAAK,MAC/C,qBAAqB,MAAM,OAAO,IAAI;AAAA,QACvC;AAAA,MACD;AAAA,IACD;AAAA,EACD,CAAC,EAAE,sBAAsB,OAAO;AAAA,IAC/B,GAAG;AAAA,IACH,GAAG;AAAA,IACH,UAAU;AAAA,IACV,UAAU;AAAA,IACV,SAAS;AAAA,IACT,MAAM,CAAC;AAAA,EACR,EAAE;AACH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shapes/TLBaseShape.ts"],
|
|
4
|
-
"sourcesContent": ["import {
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { IndexKey, JsonObject } from '@tldraw/utils'\nimport { T } from '@tldraw/validate'\nimport { TLOpacityType, opacityValidator } from '../misc/TLOpacity'\nimport { idValidator } from '../misc/id-validator'\nimport { TLParentId, TLShapeId } from '../records/TLShape'\n\n/**\n * Base interface for all shapes in tldraw.\n *\n * This interface defines the common properties that all shapes share, regardless of their\n * specific type. Every default shape extends this base with additional type-specific properties.\n *\n * Custom shapes should be defined by augmenting the TLGlobalShapePropsMap type and getting the shape type from the TLShape type.\n *\n * @example\n * ```ts\n * // Define a default shape type\n * interface TLArrowShape extends TLBaseShape<'arrow', {\n * kind: TLArrowShapeKind\n * labelColor: TLDefaultColorStyle\n * color: TLDefaultColorStyle\n * fill: TLDefaultFillStyle\n * dash: TLDefaultDashStyle\n * size: TLDefaultSizeStyle\n * arrowheadStart: TLArrowShapeArrowheadStyle\n * arrowheadEnd: TLArrowShapeArrowheadStyle\n * font: TLDefaultFontStyle\n * start: VecModel\n * end: VecModel\n * bend: number\n * richText: TLRichText\n * labelPosition: number\n * scale: number\n * elbowMidPoint: number\n * }> {}\n *\n * // Create a shape instance\n * const arrowShape: TLArrowShape = {\n * id: 'shape:abc123',\n * typeName: 'shape',\n * type: 'arrow',\n * x: 100,\n * y: 200,\n * rotation: 0,\n * index: 'a1',\n * parentId: 'page:main',\n * isLocked: false,\n * opacity: 1,\n * props: {\n * kind: 'arc',\n * start: { x: 0, y: 0 },\n * end: { x: 100, y: 100 },\n * // ... other props\n * },\n * meta: {}\n * }\n * ```\n *\n * @public\n */\nexport interface TLBaseShape<Type extends string, Props extends object> {\n\t// using real `extends BaseRecord<'shape', TLShapeId>` introduces a circularity in the types\n\t// and for that reason those \"base members\" have to be declared manually here\n\treadonly id: TLShapeId\n\treadonly typeName: 'shape'\n\n\ttype: Type\n\tx: number\n\ty: number\n\trotation: number\n\tindex: IndexKey\n\tparentId: TLParentId\n\tisLocked: boolean\n\topacity: TLOpacityType\n\tprops: Props\n\tmeta: JsonObject\n}\n\n/**\n * Validator for parent IDs, ensuring they follow the correct format.\n *\n * Parent IDs must start with either \"page:\" (for shapes directly on a page)\n * or \"shape:\" (for shapes inside other shapes like frames or groups).\n *\n * @example\n * ```ts\n * // Valid parent IDs\n * const pageParent = parentIdValidator.validate('page:main') // \u2713\n * const shapeParent = parentIdValidator.validate('shape:frame1') // \u2713\n *\n * // Invalid parent ID (throws error)\n * const invalid = parentIdValidator.validate('invalid:123') // \u2717\n * ```\n *\n * @public\n */\nexport const parentIdValidator = T.string.refine((id) => {\n\tif (!id.startsWith('page:') && !id.startsWith('shape:')) {\n\t\tthrow new Error('Parent ID must start with \"page:\" or \"shape:\"')\n\t}\n\treturn id as TLParentId\n})\n\n/**\n * Validator for shape IDs, ensuring they follow the \"shape:\" format.\n *\n * @example\n * ```ts\n * const validId = shapeIdValidator.validate('shape:abc123') // \u2713\n * const invalidId = shapeIdValidator.validate('page:abc123') // \u2717 throws error\n * ```\n *\n * @public\n */\nexport const shapeIdValidator = idValidator<TLShapeId>('shape')\n\n/**\n * Creates a validator for a specific shape type.\n *\n * This function generates a complete validator that can validate shape records\n * of the specified type, including both the base shape properties and any\n * custom properties and metadata specific to that shape type.\n *\n * @param type - The string literal type for this shape (e.g., 'geo', 'arrow')\n * @param props - Optional validator configuration for shape-specific properties\n * @param meta - Optional validator configuration for shape-specific metadata\n * @returns A validator that can validate complete shape records of the specified type\n *\n * @example\n * ```ts\n * // Create a validator for a custom shape type\n * const customShapeValidator = createShapeValidator('custom', {\n * width: T.number,\n * height: T.number,\n * color: T.string\n * })\n *\n * // Use the validator to validate shape data\n * const shapeData = {\n * id: 'shape:abc123',\n * typeName: 'shape',\n * type: 'custom',\n * x: 100,\n * y: 200,\n * // ... other base properties\n * props: {\n * width: 150,\n * height: 100,\n * color: 'red'\n * }\n * }\n *\n * const validatedShape = customShapeValidator.validate(shapeData)\n * ```\n *\n * @public\n */\nexport function createShapeValidator<\n\tType extends string,\n\tProps extends JsonObject,\n\tMeta extends JsonObject,\n>(\n\ttype: Type,\n\tprops?: { [K in keyof Props]: T.Validatable<Props[K]> },\n\tmeta?: { [K in keyof Meta]: T.Validatable<Meta[K]> }\n) {\n\treturn T.object<TLBaseShape<Type, Props>>({\n\t\tid: shapeIdValidator,\n\t\ttypeName: T.literal('shape'),\n\t\tx: T.number,\n\t\ty: T.number,\n\t\trotation: T.number,\n\t\tindex: T.indexKey,\n\t\tparentId: parentIdValidator,\n\t\ttype: T.literal(type),\n\t\tisLocked: T.boolean,\n\t\topacity: opacityValidator,\n\t\tprops: props ? T.object(props) : (T.jsonValue as any),\n\t\tmeta: meta ? T.object(meta) : (T.jsonValue as any),\n\t})\n}\n"],
|
|
5
|
+
"mappings": "AACA,SAAS,SAAS;AAClB,SAAwB,wBAAwB;AAChD,SAAS,mBAAmB;AA6FrB,MAAM,oBAAoB,EAAE,OAAO,OAAO,CAAC,OAAO;AACxD,MAAI,CAAC,GAAG,WAAW,OAAO,KAAK,CAAC,GAAG,WAAW,QAAQ,GAAG;AACxD,UAAM,IAAI,MAAM,+CAA+C;AAAA,EAChE;AACA,SAAO;AACR,CAAC;AAaM,MAAM,mBAAmB,YAAuB,OAAO;AA2CvD,SAAS,qBAKf,MACA,OACA,MACC;AACD,SAAO,EAAE,OAAiC;AAAA,IACzC,IAAI;AAAA,IACJ,UAAU,EAAE,QAAQ,OAAO;AAAA,IAC3B,GAAG,EAAE;AAAA,IACL,GAAG,EAAE;AAAA,IACL,UAAU,EAAE;AAAA,IACZ,OAAO,EAAE;AAAA,IACT,UAAU;AAAA,IACV,MAAM,EAAE,QAAQ,IAAI;AAAA,IACpB,UAAU,EAAE;AAAA,IACZ,SAAS;AAAA,IACT,OAAO,QAAQ,EAAE,OAAO,KAAK,IAAK,EAAE;AAAA,IACpC,MAAM,OAAO,EAAE,OAAO,IAAI,IAAK,EAAE;AAAA,EAClC,CAAC;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -16,7 +16,7 @@ const storeMigrations = createMigrationSequence({
|
|
|
16
16
|
scope: "store",
|
|
17
17
|
up: (store) => {
|
|
18
18
|
for (const [id, record] of objectMapEntries(store)) {
|
|
19
|
-
if (record.typeName === "shape" && (record.type === "icon" || record.type === "code")) {
|
|
19
|
+
if (record.typeName === "shape" && "type" in record && (record.type === "icon" || record.type === "code")) {
|
|
20
20
|
delete store[id];
|
|
21
21
|
}
|
|
22
22
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/store-migrations.ts"],
|
|
4
|
-
"sourcesContent": ["import { createMigrationIds, createMigrationSequence } from '@tldraw/store'\nimport { IndexKey, objectMapEntries } from '@tldraw/utils'\nimport { TLPage } from './records/TLPage'\nimport { TLShape } from './records/TLShape'\nimport { TLLineShape } from './shapes/TLLineShape'\n\n/**\n * Migration version constants for store-level schema changes.\n * Each version represents a breaking change that requires data transformation.\n *\n * @internal\n */\nconst Versions = createMigrationIds('com.tldraw.store', {\n\tRemoveCodeAndIconShapeTypes: 1,\n\tAddInstancePresenceType: 2,\n\tRemoveTLUserAndPresenceAndAddPointer: 3,\n\tRemoveUserDocument: 4,\n\tFixIndexKeys: 5,\n} as const)\n\n/**\n * Migration version identifiers for store-level migrations.\n * These versions track changes to the overall store structure and data model.\n *\n * @example\n * ```ts\n * import { storeVersions } from '@tldraw/tlschema'\n *\n * // Check if a specific migration version exists\n * const hasRemoveCodeShapes = storeVersions.RemoveCodeAndIconShapeTypes\n * ```\n *\n * @public\n */\nexport { Versions as storeVersions }\n\n/**\n * Store-level migration sequence that handles evolution of the tldraw data model.\n * These migrations run when the store schema version changes and ensure backward\n * compatibility by transforming old data structures to new formats.\n *\n * The migrations handle:\n * - Removal of deprecated shape types (code, icon)\n * - Addition of new record types (instance presence)\n * - Cleanup of obsolete user and presence data\n * - Removal of deprecated user document records\n *\n * @example\n * ```ts\n * import { storeMigrations } from '@tldraw/tlschema'\n * import { migrate } from '@tldraw/store'\n *\n * // Apply store migrations to old data\n * const migratedStore = migrate({\n * store: oldStoreData,\n * migrations: storeMigrations,\n * fromVersion: 0,\n * toVersion: storeMigrations.currentVersion\n * })\n * ```\n *\n * @public\n */\nexport const storeMigrations = createMigrationSequence({\n\tsequenceId: 'com.tldraw.store',\n\tretroactive: false,\n\tsequence: [\n\t\t{\n\t\t\tid: Versions.RemoveCodeAndIconShapeTypes,\n\t\t\tscope: 'store',\n\t\t\tup: (store) => {\n\t\t\t\tfor (const [id, record] of objectMapEntries(store)) {\n\t\t\t\t\tif (\n\t\t\t\t\t\trecord.typeName === 'shape' &&\n\t\t\t\t\t\t(
|
|
5
|
-
"mappings": "AAAA,SAAS,oBAAoB,+BAA+B;AAC5D,SAAmB,wBAAwB;AAW3C,MAAM,WAAW,mBAAmB,oBAAoB;AAAA,EACvD,6BAA6B;AAAA,EAC7B,yBAAyB;AAAA,EACzB,sCAAsC;AAAA,EACtC,oBAAoB;AAAA,EACpB,cAAc;AACf,CAAU;AA6CH,MAAM,kBAAkB,wBAAwB;AAAA,EACtD,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AAAA,IACT;AAAA,MACC,IAAI,SAAS;AAAA,MACb,OAAO;AAAA,MACP,IAAI,CAAC,UAAU;AACd,mBAAW,CAAC,IAAI,MAAM,KAAK,iBAAiB,KAAK,GAAG;AACnD,cACC,OAAO,aAAa,
|
|
4
|
+
"sourcesContent": ["import { createMigrationIds, createMigrationSequence } from '@tldraw/store'\nimport { IndexKey, objectMapEntries } from '@tldraw/utils'\nimport { TLPage } from './records/TLPage'\nimport { TLShape } from './records/TLShape'\nimport { TLLineShape } from './shapes/TLLineShape'\n\n/**\n * Migration version constants for store-level schema changes.\n * Each version represents a breaking change that requires data transformation.\n *\n * @internal\n */\nconst Versions = createMigrationIds('com.tldraw.store', {\n\tRemoveCodeAndIconShapeTypes: 1,\n\tAddInstancePresenceType: 2,\n\tRemoveTLUserAndPresenceAndAddPointer: 3,\n\tRemoveUserDocument: 4,\n\tFixIndexKeys: 5,\n} as const)\n\n/**\n * Migration version identifiers for store-level migrations.\n * These versions track changes to the overall store structure and data model.\n *\n * @example\n * ```ts\n * import { storeVersions } from '@tldraw/tlschema'\n *\n * // Check if a specific migration version exists\n * const hasRemoveCodeShapes = storeVersions.RemoveCodeAndIconShapeTypes\n * ```\n *\n * @public\n */\nexport { Versions as storeVersions }\n\n/**\n * Store-level migration sequence that handles evolution of the tldraw data model.\n * These migrations run when the store schema version changes and ensure backward\n * compatibility by transforming old data structures to new formats.\n *\n * The migrations handle:\n * - Removal of deprecated shape types (code, icon)\n * - Addition of new record types (instance presence)\n * - Cleanup of obsolete user and presence data\n * - Removal of deprecated user document records\n *\n * @example\n * ```ts\n * import { storeMigrations } from '@tldraw/tlschema'\n * import { migrate } from '@tldraw/store'\n *\n * // Apply store migrations to old data\n * const migratedStore = migrate({\n * store: oldStoreData,\n * migrations: storeMigrations,\n * fromVersion: 0,\n * toVersion: storeMigrations.currentVersion\n * })\n * ```\n *\n * @public\n */\nexport const storeMigrations = createMigrationSequence({\n\tsequenceId: 'com.tldraw.store',\n\tretroactive: false,\n\tsequence: [\n\t\t{\n\t\t\tid: Versions.RemoveCodeAndIconShapeTypes,\n\t\t\tscope: 'store',\n\t\t\tup: (store) => {\n\t\t\t\tfor (const [id, record] of objectMapEntries(store)) {\n\t\t\t\t\tif (\n\t\t\t\t\t\trecord.typeName === 'shape' &&\n\t\t\t\t\t\t'type' in record &&\n\t\t\t\t\t\t(record.type === 'icon' || record.type === 'code')\n\t\t\t\t\t) {\n\t\t\t\t\t\tdelete store[id]\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: Versions.AddInstancePresenceType,\n\t\t\tscope: 'store',\n\t\t\tup(_store) {\n\t\t\t\t// noop\n\t\t\t\t// there used to be a down migration for this but we made down migrations optional\n\t\t\t\t// and we don't use them on store-level migrations so we can just remove it\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\t// remove user and presence records and add pointer records\n\t\t\tid: Versions.RemoveTLUserAndPresenceAndAddPointer,\n\t\t\tscope: 'store',\n\t\t\tup: (store) => {\n\t\t\t\tfor (const [id, record] of objectMapEntries(store)) {\n\t\t\t\t\tif (record.typeName.match(/^(user|user_presence)$/)) {\n\t\t\t\t\t\tdelete store[id]\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\t// remove user document records\n\t\t\tid: Versions.RemoveUserDocument,\n\t\t\tscope: 'store',\n\t\t\tup: (store) => {\n\t\t\t\tfor (const [id, record] of objectMapEntries(store)) {\n\t\t\t\t\tif (record.typeName.match('user_document')) {\n\t\t\t\t\t\tdelete store[id]\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: Versions.FixIndexKeys,\n\t\t\tscope: 'record',\n\t\t\tup: (record) => {\n\t\t\t\tif (['shape', 'page'].includes(record.typeName) && 'index' in record) {\n\t\t\t\t\tconst recordWithIndex = record as TLShape | TLPage\n\t\t\t\t\t// Our newer fractional indexed library (more correctly) validates that indices\n\t\t\t\t\t// do not end with 0. ('a0' being an exception)\n\t\t\t\t\tif (recordWithIndex.index.endsWith('0') && recordWithIndex.index !== 'a0') {\n\t\t\t\t\t\trecordWithIndex.index = (recordWithIndex.index.slice(0, -1) +\n\t\t\t\t\t\t\tgetNRandomBase62Digits(3)) as IndexKey\n\t\t\t\t\t}\n\t\t\t\t\t// Line shapes have 'points' that have indices as well.\n\t\t\t\t\tif (record.typeName === 'shape' && (recordWithIndex as TLShape).type === 'line') {\n\t\t\t\t\t\tconst lineShape = recordWithIndex as TLLineShape\n\t\t\t\t\t\tfor (const [_, point] of objectMapEntries(lineShape.props.points)) {\n\t\t\t\t\t\t\tif (point.index.endsWith('0') && point.index !== 'a0') {\n\t\t\t\t\t\t\t\tpoint.index = (point.index.slice(0, -1) + getNRandomBase62Digits(3)) as IndexKey\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t\tdown: () => {\n\t\t\t\t// noop\n\t\t\t\t// Enables tlsync to support older clients so as to not force people to refresh immediately after deploying.\n\t\t\t},\n\t\t},\n\t],\n})\n\nconst BASE_62_DIGITS_WITHOUT_ZERO = '123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'\nconst getRandomBase62Digit = () => {\n\treturn BASE_62_DIGITS_WITHOUT_ZERO.charAt(\n\t\tMath.floor(Math.random() * BASE_62_DIGITS_WITHOUT_ZERO.length)\n\t)\n}\n\nconst getNRandomBase62Digits = (n: number) => {\n\treturn Array.from({ length: n }, getRandomBase62Digit).join('')\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,oBAAoB,+BAA+B;AAC5D,SAAmB,wBAAwB;AAW3C,MAAM,WAAW,mBAAmB,oBAAoB;AAAA,EACvD,6BAA6B;AAAA,EAC7B,yBAAyB;AAAA,EACzB,sCAAsC;AAAA,EACtC,oBAAoB;AAAA,EACpB,cAAc;AACf,CAAU;AA6CH,MAAM,kBAAkB,wBAAwB;AAAA,EACtD,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AAAA,IACT;AAAA,MACC,IAAI,SAAS;AAAA,MACb,OAAO;AAAA,MACP,IAAI,CAAC,UAAU;AACd,mBAAW,CAAC,IAAI,MAAM,KAAK,iBAAiB,KAAK,GAAG;AACnD,cACC,OAAO,aAAa,WACpB,UAAU,WACT,OAAO,SAAS,UAAU,OAAO,SAAS,SAC1C;AACD,mBAAO,MAAM,EAAE;AAAA,UAChB;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,IACA;AAAA,MACC,IAAI,SAAS;AAAA,MACb,OAAO;AAAA,MACP,GAAG,QAAQ;AAAA,MAIX;AAAA,IACD;AAAA,IACA;AAAA;AAAA,MAEC,IAAI,SAAS;AAAA,MACb,OAAO;AAAA,MACP,IAAI,CAAC,UAAU;AACd,mBAAW,CAAC,IAAI,MAAM,KAAK,iBAAiB,KAAK,GAAG;AACnD,cAAI,OAAO,SAAS,MAAM,wBAAwB,GAAG;AACpD,mBAAO,MAAM,EAAE;AAAA,UAChB;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,IACA;AAAA;AAAA,MAEC,IAAI,SAAS;AAAA,MACb,OAAO;AAAA,MACP,IAAI,CAAC,UAAU;AACd,mBAAW,CAAC,IAAI,MAAM,KAAK,iBAAiB,KAAK,GAAG;AACnD,cAAI,OAAO,SAAS,MAAM,eAAe,GAAG;AAC3C,mBAAO,MAAM,EAAE;AAAA,UAChB;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,IACA;AAAA,MACC,IAAI,SAAS;AAAA,MACb,OAAO;AAAA,MACP,IAAI,CAAC,WAAW;AACf,YAAI,CAAC,SAAS,MAAM,EAAE,SAAS,OAAO,QAAQ,KAAK,WAAW,QAAQ;AACrE,gBAAM,kBAAkB;AAGxB,cAAI,gBAAgB,MAAM,SAAS,GAAG,KAAK,gBAAgB,UAAU,MAAM;AAC1E,4BAAgB,QAAS,gBAAgB,MAAM,MAAM,GAAG,EAAE,IACzD,uBAAuB,CAAC;AAAA,UAC1B;AAEA,cAAI,OAAO,aAAa,WAAY,gBAA4B,SAAS,QAAQ;AAChF,kBAAM,YAAY;AAClB,uBAAW,CAAC,GAAG,KAAK,KAAK,iBAAiB,UAAU,MAAM,MAAM,GAAG;AAClE,kBAAI,MAAM,MAAM,SAAS,GAAG,KAAK,MAAM,UAAU,MAAM;AACtD,sBAAM,QAAS,MAAM,MAAM,MAAM,GAAG,EAAE,IAAI,uBAAuB,CAAC;AAAA,cACnE;AAAA,YACD;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,MACA,MAAM,MAAM;AAAA,MAGZ;AAAA,IACD;AAAA,EACD;AACD,CAAC;AAED,MAAM,8BAA8B;AACpC,MAAM,uBAAuB,MAAM;AAClC,SAAO,4BAA4B;AAAA,IAClC,KAAK,MAAM,KAAK,OAAO,IAAI,4BAA4B,MAAM;AAAA,EAC9D;AACD;AAEA,MAAM,yBAAyB,CAAC,MAAc;AAC7C,SAAO,MAAM,KAAK,EAAE,QAAQ,EAAE,GAAG,oBAAoB,EAAE,KAAK,EAAE;AAC/D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -23,6 +23,7 @@ const DefaultColorThemePalette = {
|
|
|
23
23
|
black: {
|
|
24
24
|
solid: "#1d1d1d",
|
|
25
25
|
fill: "#1d1d1d",
|
|
26
|
+
linedFill: "#363636",
|
|
26
27
|
frameHeadingStroke: "#717171",
|
|
27
28
|
frameHeadingFill: "#ffffff",
|
|
28
29
|
frameStroke: "#717171",
|
|
@@ -38,6 +39,7 @@ const DefaultColorThemePalette = {
|
|
|
38
39
|
blue: {
|
|
39
40
|
solid: "#4465e9",
|
|
40
41
|
fill: "#4465e9",
|
|
42
|
+
linedFill: "#6580ec",
|
|
41
43
|
frameHeadingStroke: "#6681ec",
|
|
42
44
|
frameHeadingFill: "#f9fafe",
|
|
43
45
|
frameStroke: "#6681ec",
|
|
@@ -53,6 +55,7 @@ const DefaultColorThemePalette = {
|
|
|
53
55
|
green: {
|
|
54
56
|
solid: "#099268",
|
|
55
57
|
fill: "#099268",
|
|
58
|
+
linedFill: "#0bad7c",
|
|
56
59
|
frameHeadingStroke: "#37a684",
|
|
57
60
|
frameHeadingFill: "#f8fcfa",
|
|
58
61
|
frameStroke: "#37a684",
|
|
@@ -68,6 +71,7 @@ const DefaultColorThemePalette = {
|
|
|
68
71
|
grey: {
|
|
69
72
|
solid: "#9fa8b2",
|
|
70
73
|
fill: "#9fa8b2",
|
|
74
|
+
linedFill: "#bbc1c9",
|
|
71
75
|
frameHeadingStroke: "#aaaaab",
|
|
72
76
|
frameHeadingFill: "#fbfcfc",
|
|
73
77
|
frameStroke: "#aaaaab",
|
|
@@ -83,6 +87,7 @@ const DefaultColorThemePalette = {
|
|
|
83
87
|
"light-blue": {
|
|
84
88
|
solid: "#4ba1f1",
|
|
85
89
|
fill: "#4ba1f1",
|
|
90
|
+
linedFill: "#7abaf5",
|
|
86
91
|
frameHeadingStroke: "#6cb2f3",
|
|
87
92
|
frameHeadingFill: "#f8fbfe",
|
|
88
93
|
frameStroke: "#6cb2f3",
|
|
@@ -98,6 +103,7 @@ const DefaultColorThemePalette = {
|
|
|
98
103
|
"light-green": {
|
|
99
104
|
solid: "#4cb05e",
|
|
100
105
|
fill: "#4cb05e",
|
|
106
|
+
linedFill: "#7ec88c",
|
|
101
107
|
frameHeadingStroke: "#6dbe7c",
|
|
102
108
|
frameHeadingFill: "#f8fcf9",
|
|
103
109
|
frameStroke: "#6dbe7c",
|
|
@@ -113,6 +119,7 @@ const DefaultColorThemePalette = {
|
|
|
113
119
|
"light-red": {
|
|
114
120
|
solid: "#f87777",
|
|
115
121
|
fill: "#f87777",
|
|
122
|
+
linedFill: "#f99a9a",
|
|
116
123
|
frameHeadingStroke: "#f89090",
|
|
117
124
|
frameHeadingFill: "#fffafa",
|
|
118
125
|
frameStroke: "#f89090",
|
|
@@ -128,6 +135,7 @@ const DefaultColorThemePalette = {
|
|
|
128
135
|
"light-violet": {
|
|
129
136
|
solid: "#e085f4",
|
|
130
137
|
fill: "#e085f4",
|
|
138
|
+
linedFill: "#e9abf7",
|
|
131
139
|
frameHeadingStroke: "#e59bf5",
|
|
132
140
|
frameHeadingFill: "#fefaff",
|
|
133
141
|
frameStroke: "#e59bf5",
|
|
@@ -143,6 +151,7 @@ const DefaultColorThemePalette = {
|
|
|
143
151
|
orange: {
|
|
144
152
|
solid: "#e16919",
|
|
145
153
|
fill: "#e16919",
|
|
154
|
+
linedFill: "#ea8643",
|
|
146
155
|
frameHeadingStroke: "#e68544",
|
|
147
156
|
frameHeadingFill: "#fef9f6",
|
|
148
157
|
frameStroke: "#e68544",
|
|
@@ -158,6 +167,7 @@ const DefaultColorThemePalette = {
|
|
|
158
167
|
red: {
|
|
159
168
|
solid: "#e03131",
|
|
160
169
|
fill: "#e03131",
|
|
170
|
+
linedFill: "#e75f5f",
|
|
161
171
|
frameHeadingStroke: "#e55757",
|
|
162
172
|
frameHeadingFill: "#fef7f7",
|
|
163
173
|
frameStroke: "#e55757",
|
|
@@ -173,6 +183,7 @@ const DefaultColorThemePalette = {
|
|
|
173
183
|
violet: {
|
|
174
184
|
solid: "#ae3ec9",
|
|
175
185
|
fill: "#ae3ec9",
|
|
186
|
+
linedFill: "#be68d4",
|
|
176
187
|
frameHeadingStroke: "#bc62d3",
|
|
177
188
|
frameHeadingFill: "#fcf7fd",
|
|
178
189
|
frameStroke: "#bc62d3",
|
|
@@ -188,6 +199,7 @@ const DefaultColorThemePalette = {
|
|
|
188
199
|
yellow: {
|
|
189
200
|
solid: "#f1ac4b",
|
|
190
201
|
fill: "#f1ac4b",
|
|
202
|
+
linedFill: "#f5c27a",
|
|
191
203
|
frameHeadingStroke: "#f3bb6c",
|
|
192
204
|
frameHeadingFill: "#fefcf8",
|
|
193
205
|
frameStroke: "#f3bb6c",
|
|
@@ -203,6 +215,7 @@ const DefaultColorThemePalette = {
|
|
|
203
215
|
white: {
|
|
204
216
|
solid: "#FFFFFF",
|
|
205
217
|
fill: "#FFFFFF",
|
|
218
|
+
linedFill: "#ffffff",
|
|
206
219
|
semi: "#f5f5f5",
|
|
207
220
|
pattern: "#f9f9f9",
|
|
208
221
|
frameHeadingStroke: "#7d7d7d",
|
|
@@ -224,6 +237,7 @@ const DefaultColorThemePalette = {
|
|
|
224
237
|
black: {
|
|
225
238
|
solid: "#f2f2f2",
|
|
226
239
|
fill: "#f2f2f2",
|
|
240
|
+
linedFill: "#ffffff",
|
|
227
241
|
frameHeadingStroke: "#5c5c5c",
|
|
228
242
|
frameHeadingFill: "#252525",
|
|
229
243
|
frameStroke: "#5c5c5c",
|
|
@@ -240,6 +254,7 @@ const DefaultColorThemePalette = {
|
|
|
240
254
|
solid: "#4f72fc",
|
|
241
255
|
// 3c60f0
|
|
242
256
|
fill: "#4f72fc",
|
|
257
|
+
linedFill: "#3c5cdd",
|
|
243
258
|
frameHeadingStroke: "#384994",
|
|
244
259
|
frameHeadingFill: "#1C2036",
|
|
245
260
|
frameStroke: "#384994",
|
|
@@ -255,6 +270,7 @@ const DefaultColorThemePalette = {
|
|
|
255
270
|
green: {
|
|
256
271
|
solid: "#099268",
|
|
257
272
|
fill: "#099268",
|
|
273
|
+
linedFill: "#087856",
|
|
258
274
|
frameHeadingStroke: "#10513C",
|
|
259
275
|
frameHeadingFill: "#14241f",
|
|
260
276
|
frameStroke: "#10513C",
|
|
@@ -270,6 +286,7 @@ const DefaultColorThemePalette = {
|
|
|
270
286
|
grey: {
|
|
271
287
|
solid: "#9398b0",
|
|
272
288
|
fill: "#9398b0",
|
|
289
|
+
linedFill: "#8388a5",
|
|
273
290
|
frameHeadingStroke: "#42474D",
|
|
274
291
|
frameHeadingFill: "#23262A",
|
|
275
292
|
frameStroke: "#42474D",
|
|
@@ -285,6 +302,7 @@ const DefaultColorThemePalette = {
|
|
|
285
302
|
"light-blue": {
|
|
286
303
|
solid: "#4dabf7",
|
|
287
304
|
fill: "#4dabf7",
|
|
305
|
+
linedFill: "#2793ec",
|
|
288
306
|
frameHeadingStroke: "#075797",
|
|
289
307
|
frameHeadingFill: "#142839",
|
|
290
308
|
frameStroke: "#075797",
|
|
@@ -300,6 +318,7 @@ const DefaultColorThemePalette = {
|
|
|
300
318
|
"light-green": {
|
|
301
319
|
solid: "#40c057",
|
|
302
320
|
fill: "#40c057",
|
|
321
|
+
linedFill: "#37a44b",
|
|
303
322
|
frameHeadingStroke: "#1C5427",
|
|
304
323
|
frameHeadingFill: "#18251A",
|
|
305
324
|
frameStroke: "#1C5427",
|
|
@@ -315,6 +334,7 @@ const DefaultColorThemePalette = {
|
|
|
315
334
|
"light-red": {
|
|
316
335
|
solid: "#ff8787",
|
|
317
336
|
fill: "#ff8787",
|
|
337
|
+
linedFill: "#ff6666",
|
|
318
338
|
frameHeadingStroke: "#6f3232",
|
|
319
339
|
// Darker and desaturated variant of solid
|
|
320
340
|
frameHeadingFill: "#341818",
|
|
@@ -338,6 +358,7 @@ const DefaultColorThemePalette = {
|
|
|
338
358
|
"light-violet": {
|
|
339
359
|
solid: "#e599f7",
|
|
340
360
|
fill: "#e599f7",
|
|
361
|
+
linedFill: "#dc71f4",
|
|
341
362
|
frameHeadingStroke: "#6c367a",
|
|
342
363
|
frameHeadingFill: "#2D2230",
|
|
343
364
|
frameStroke: "#6c367a",
|
|
@@ -353,6 +374,7 @@ const DefaultColorThemePalette = {
|
|
|
353
374
|
orange: {
|
|
354
375
|
solid: "#f76707",
|
|
355
376
|
fill: "#f76707",
|
|
377
|
+
linedFill: "#f54900",
|
|
356
378
|
frameHeadingStroke: "#773a0e",
|
|
357
379
|
// Darker, muted version of solid
|
|
358
380
|
frameHeadingFill: "#2f1d13",
|
|
@@ -376,6 +398,7 @@ const DefaultColorThemePalette = {
|
|
|
376
398
|
red: {
|
|
377
399
|
solid: "#e03131",
|
|
378
400
|
fill: "#e03131",
|
|
401
|
+
linedFill: "#c31d1d",
|
|
379
402
|
frameHeadingStroke: "#701e1e",
|
|
380
403
|
// Darker, muted variation of solid
|
|
381
404
|
frameHeadingFill: "#301616",
|
|
@@ -399,6 +422,7 @@ const DefaultColorThemePalette = {
|
|
|
399
422
|
violet: {
|
|
400
423
|
solid: "#ae3ec9",
|
|
401
424
|
fill: "#ae3ec9",
|
|
425
|
+
linedFill: "#8f2fa7",
|
|
402
426
|
frameHeadingStroke: "#6d1583",
|
|
403
427
|
// Darker, muted variation of solid
|
|
404
428
|
frameHeadingFill: "#27152e",
|
|
@@ -422,6 +446,7 @@ const DefaultColorThemePalette = {
|
|
|
422
446
|
yellow: {
|
|
423
447
|
solid: "#ffc034",
|
|
424
448
|
fill: "#ffc034",
|
|
449
|
+
linedFill: "#ffae00",
|
|
425
450
|
frameHeadingStroke: "#684e12",
|
|
426
451
|
// Darker, muted variant of solid
|
|
427
452
|
frameHeadingFill: "#2a2113",
|
|
@@ -445,6 +470,7 @@ const DefaultColorThemePalette = {
|
|
|
445
470
|
white: {
|
|
446
471
|
solid: "#f3f3f3",
|
|
447
472
|
fill: "#f3f3f3",
|
|
473
|
+
linedFill: "#f3f3f3",
|
|
448
474
|
semi: "#f5f5f5",
|
|
449
475
|
pattern: "#f9f9f9",
|
|
450
476
|
frameHeadingStroke: "#ffffff",
|