Text
Exports related to text.
interface ClientFont
extends FontFace {}
interface ClippedText
extends VisibleInstance {
asset: Media
assetFrames: (quantize: number) => Numbers
assetId: string
assetTime: (masherTime: Time) => Time
boolean: (key: string) => boolean
cacheInstance: (args: InstanceCacheArgs) => Promise<DataOrError<number>>
canBeMuted: boolean
changeObject: (propertyId: SignalId, scalar?: Scalar) => ChangeEditObject
changeScalars: (scalars: ScalarsById) => void
changesObject: (scalars: ScalarsById) => ChangePropertiesEditObject
clip: Clip
clippedElement: (content: VisibleInstance, args: ContainerSvgItemArgs) => DataOrError<SvgItemsRecord>
constrainedValue: (found: Property, value?: Scalar) => Scalar | undefined
containedItem: (contentItem: MaybeComplexSvgItem, containerItem: MaybeComplexSvgItem, args: ContainerSvgItemArgs) => DataOrError<SvgItemsRecord>
containerRects: (args: ContainerRectArgs, sizingSize: Size) => RectTuple
containerSvgItem: (args: ContainerSvgItemArgs) => DataOrError<MaybeComplexSvgItem>
contentRect: (time: Time, containerRect: Rect, outputSize: Size) => Rect
contentRects: (args: ContentRectArgs) => RectTuple
contentSvgItem: (args: ContentSvgItemArgs) => DataOrError<MaybeComplexSvgItem>
cropDirections: SideDirectionRecord
frames: (quantize: number) => number
host: Plugins
id: string
instanceObject: InstanceObject
intrinsicRect: Rect
intrinsicsKnown: (options: IntrinsicOptions) => boolean
isDefault: boolean
mediaIds: Strings
muted: boolean
number: (key: string) => number
properties: Array<Property>
propertiesOfTarget: (targetId: string) => Array<Property>
propertyFind: (name: string) => Property | undefined
propertyIds: (targetId: string) => Array<SignalId>
scalarsById: (targetId: string, time?: Time, timeIsStart?: boolean, useNames?: boolean) => SignalScalarRecord
scalarsRecord: (idOrNames: Strings) => ScalarRecord
scaleRects: (time: Time, range: TimeRange) => RectTuple
setValue: (nameOrId: string, scalar?: Scalar, dontConstrain?: boolean) => void
shouldSelectProperty: (property: Property) => boolean
sizeKey?: SizeKey
string: (key: string) => string
svgVector: (rect: Rect, forecolor?: string, opacity?: Scalar) => SvgVector
targetId: string
toJSON: () => unknown
tweenValues: (key: string, time: Time, range: TimeRange) => Array<Scalar>
tweening: boolean
tweens: (key: string) => boolean
value: (key: string) => Scalar | undefined
}
interface ClippedTextImage
extends ClippedText {
asset: Media
assetFrames: (quantize: number) => Numbers
assetId: string
assetTime: (masherTime: Time) => Time
boolean: (key: string) => boolean
cacheInstance: (args: InstanceCacheArgs) => Promise<DataOrError<number>>
canBeMuted: boolean
changeObject: (propertyId: SignalId, scalar?: Scalar) => ChangeEditObject
changeScalars: (scalars: ScalarsById) => void
changesObject: (scalars: ScalarsById) => ChangePropertiesEditObject
clip: Clip
clippedElement: (content: VisibleInstance, args: ContainerSvgItemArgs) => DataOrError<SvgItemsRecord>
constrainedValue: (found: Property, value?: Scalar) => Scalar | undefined
containedItem: (contentItem: MaybeComplexSvgItem, containerItem: MaybeComplexSvgItem, args: ContainerSvgItemArgs) => DataOrError<SvgItemsRecord>
containerRects: (args: ContainerRectArgs, sizingSize: Size) => RectTuple
containerSvgItem: (args: ContainerSvgItemArgs) => DataOrError<MaybeComplexSvgItem>
contentRect: (time: Time, containerRect: Rect, outputSize: Size) => Rect
contentRects: (args: ContentRectArgs) => RectTuple
contentSvgItem: (args: ContentSvgItemArgs) => DataOrError<MaybeComplexSvgItem>
cropDirections: SideDirectionRecord
frames: (quantize: number) => number
host: Plugins
id: string
instanceObject: InstanceObject
intrinsicRect: Rect
intrinsicsKnown: (options: IntrinsicOptions) => boolean
isDefault: boolean
mediaIds: Strings
muted: boolean
number: (key: string) => number
properties: Array<Property>
propertiesOfTarget: (targetId: string) => Array<Property>
propertyFind: (name: string) => Property | undefined
propertyIds: (targetId: string) => Array<SignalId>
scalarsById: (targetId: string, time?: Time, timeIsStart?: boolean, useNames?: boolean) => SignalScalarRecord
scalarsRecord: (idOrNames: Strings) => ScalarRecord
scaleRects: (time: Time, range: TimeRange) => RectTuple
setValue: (nameOrId: string, scalar?: Scalar, dontConstrain?: boolean) => void
shouldSelectProperty: (property: Property) => boolean
sizeKey?: SizeKey
string: (key: string) => string
svgVector: (rect: Rect, forecolor?: string, opacity?: Scalar) => SvgVector
targetId: string
toJSON: () => unknown
tweenValues: (key: string, time: Time, range: TimeRange) => Array<Scalar>
tweening: boolean
tweens: (key: string) => boolean
value: (key: string) => Scalar | undefined
}
interface CssElement {
cssProperties: Array<Property>
target: string
variable: (name: string) => number
variableString: (name: string) => string
}
interface CssInfo {
clientUrl: FetchUrl
cssUrl: FetchUrl
extension: string
family: string
}
interface CssReactive {
cssProperties: Array<Property>
target: string
}
type CssResultTuple = ArrayOf2<CSSResult, CSSResult>
type FetchTextFunction = (args: Fetched, opts?: JobOptions) => Promise<DataOrError<string>>
interface TextImage
extends TextMedia {
accountId: string
/** True if I have transparency. */
alpha?: boolean
api: () => Promise<DataOrError<Api>>
asStored: unknown
boolean: (key: string) => boolean
cacheMedia: (args: MediaCacheArgs) => Promise<DataOrError<number>>
/** True if I can be a clipped container. */
canBeContainer?: boolean
/** True if I can be clipped content. */
canBeContent?: boolean
/** True if I am a fill color. */
canBeFill?: boolean
canBeMuted: boolean
changeObject: (propertyId: SignalId, scalar?: Scalar) => ChangeEditObject
changeScalars: (scalars: ScalarsById) => void
changesObject: (scalars: ScalarsById) => ChangePropertiesEditObject
clipObject: (object?: InstanceObject) => ClipObject
constrainedValue: (found: Property, value?: Scalar) => Scalar | undefined
createdAt?: number
deletedAt?: number
duration: number
family: string
fetchResource: (resource: Resource) => Promise<DataOrError<true>>
findResource: (types: Strings) => Resource | undefined
frames: (quantize: number) => number
hasIntrinsicSizing?: boolean
hasIntrinsicTiming?: boolean
host: Plugins
id: string
instanceArgs: (object?: InstanceObject) => InstanceArgs
instanceFromObject: (object?: InstanceObject) => Instance
/** True if I am vector-based. */
isVector?: boolean
label: string
mediaIds: Strings
number: (key: string) => number
/** Size drawn from sized resource. */
probeSize?: Size
properties: Array<Property>
propertiesOfTarget: (targetId: string) => Array<Property>
propertyFind: (name: string) => Property | undefined
propertyIds: (targetId: string) => Array<SignalId>
resources: Array<Resource>
scalarsRecord: (idOrNames: Strings) => ScalarRecord
setValue: (nameOrId: string, scalar?: Scalar, dontConstrain?: boolean) => void
shouldSelectProperty: (property: Property) => boolean
source: string
string: (key: string) => string
style: (prefix?: string) => SvgStyleElement
targetId: string
textRect: Rect
toJSON: () => unknown
tweenValues: (key: string, time: Time, range: TimeRange) => Array<Scalar>
tweens: (key: string) => boolean
type: string
unload: () => void
updatedAt?: number
userId?: string
value: (key: string) => Scalar | undefined
}
interface TextInstanceObject
extends VisibleInstanceObject {
container?: boolean
height?: number
heightEnd?: number
lock?: string
opacity?: number
opacityEnd?: number
pointAspect?: string
sizeAspect?: string
text?: string
transparency?: Transparency | string
width?: number
widthEnd?: number
x?: number
xEnd?: number
y?: number
yEnd?: number
}
interface TextMedia
extends VisibleMedia {
accountId: string
/** True if I have transparency. */
alpha?: boolean
api: () => Promise<DataOrError<Api>>
asStored: unknown
boolean: (key: string) => boolean
cacheMedia: (args: MediaCacheArgs) => Promise<DataOrError<number>>
/** True if I can be a clipped container. */
canBeContainer?: boolean
/** True if I can be clipped content. */
canBeContent?: boolean
/** True if I am a fill color. */
canBeFill?: boolean
canBeMuted: boolean
changeObject: (propertyId: SignalId, scalar?: Scalar) => ChangeEditObject
changeScalars: (scalars: ScalarsById) => void
changesObject: (scalars: ScalarsById) => ChangePropertiesEditObject
clipObject: (object?: InstanceObject) => ClipObject
constrainedValue: (found: Property, value?: Scalar) => Scalar | undefined
createdAt?: number
deletedAt?: number
duration: number
family: string
fetchResource: (resource: Resource) => Promise<DataOrError<true>>
findResource: (types: Strings) => Resource | undefined
frames: (quantize: number) => number
hasIntrinsicSizing?: boolean
hasIntrinsicTiming?: boolean
host: Plugins
id: string
instanceArgs: (object?: InstanceObject) => InstanceArgs
instanceFromObject: (object?: InstanceObject) => Instance
/** True if I am vector-based. */
isVector?: boolean
label: string
mediaIds: Strings
number: (key: string) => number
/** Size drawn from sized resource. */
probeSize?: Size
properties: Array<Property>
propertiesOfTarget: (targetId: string) => Array<Property>
propertyFind: (name: string) => Property | undefined
propertyIds: (targetId: string) => Array<SignalId>
resources: Array<Resource>
scalarsRecord: (idOrNames: Strings) => ScalarRecord
setValue: (nameOrId: string, scalar?: Scalar, dontConstrain?: boolean) => void
shouldSelectProperty: (property: Property) => boolean
source: string
string: (key: string) => string
style: (prefix?: string) => SvgStyleElement
targetId: string
textRect: Rect
toJSON: () => unknown
tweenValues: (key: string, time: Time, range: TimeRange) => Array<Scalar>
tweens: (key: string) => boolean
type: string
unload: () => void
updatedAt?: number
userId?: string
value: (key: string) => Scalar | undefined
}
interface TextProperties {
text?: string
}
interface TextRectArgs {
document: Document
family: string
fontPath?: AbsolutePath
size: number
text: string
}
/** @implements TextMedia */
class ClientTextImageClass {
accountId: string
/** True if I have transparency. */
alpha?: boolean
api: () => Promise<DataOrError<Api>>
asStored: unknown
boolean: (key: string) => boolean
cacheMedia: (args: MediaCacheArgs) => Promise<DataOrError<number>>
/** True if I can be a clipped container. */
canBeContainer?: boolean
/** True if I can be clipped content. */
canBeContent?: boolean
/** True if I am a fill color. */
canBeFill?: boolean
canBeMuted: boolean
changeObject: (propertyId: SignalId, scalar?: Scalar) => ChangeEditObject
changeScalars: (scalars: ScalarsById) => void
changesObject: (scalars: ScalarsById) => ChangePropertiesEditObject
clipObject: (object?: InstanceObject) => ClipObject
constrainedValue: (found: Property, value?: Scalar) => Scalar | undefined
createdAt?: number
deletedAt?: number
duration: number
family: string
familyInitialize: () => string
fetchResource: (resource: Resource) => Promise<DataOrError<true>>
findResource: (types: Strings) => Resource | undefined
frames: (quantize: number) => number
hasIntrinsicSizing?: boolean
hasIntrinsicTiming?: boolean
host: Plugins
id: string
instanceArgs: (object?: InstanceObject) => InstanceArgs
instanceFromObject: (object?: InstanceObject) => Instance
/** True if I am vector-based. */
isVector?: boolean
label: string
mediaIds: Strings
number: (key: string) => number
/** Size drawn from sized resource. */
probeSize?: Size
properties: Array<Property>
propertiesOfTarget: (targetId: string) => Array<Property>
propertyFind: (name: string) => Property | undefined
propertyIds: (targetId: string) => Array<SignalId>
resources: Array<Resource>
scalarsRecord: (idOrNames: Strings) => ScalarRecord
setValue: (nameOrId: string, scalar?: Scalar, dontConstrain?: boolean) => void
shouldSelectProperty: (property: Property) => boolean
source: string
string: (key: string) => string
style: (prefix?: string) => SvgStyleElement
targetId: string
textRect: Rect
toJSON: () => unknown
tweenValues: (key: string, time: Time, range: TimeRange) => Array<Scalar>
tweens: (key: string) => boolean
type: string
unload: () => void
updatedAt?: number
userId?: string
value: (key: string) => Scalar | undefined
}
/** @implements ClippedText */
class ClippedClientTextImageClass
extends TextInstanceClass {
asset: Media
assetFrames: (quantize: number) => Numbers
assetId: string
assetTime: (masherTime: Time) => Time
boolean: (key: string) => boolean
cacheInstance: (args: InstanceCacheArgs) => Promise<DataOrError<number>>
canBeMuted: boolean
changeObject: (propertyId: SignalId, scalar?: Scalar) => ChangeEditObject
changeScalars: (scalars: ScalarsById) => void
changesObject: (scalars: ScalarsById) => ChangePropertiesEditObject
clip: Clip
clippedElement: (content: VisibleInstance, args: ContainerSvgItemArgs) => DataOrError<SvgItemsRecord>
constrainedValue: (found: Property, value?: Scalar) => Scalar | undefined
containedItem: (contentItem: MaybeComplexSvgItem, containerItem: MaybeComplexSvgItem, args: ContainerSvgItemArgs) => DataOrError<SvgItemsRecord>
containerRects: (args: ContainerRectArgs, sizingSize: Size) => RectTuple
containerSvgItem: (args: ContainerSvgItemArgs) => DataOrError<MaybeComplexSvgItem>
contentRect: (time: Time, containerRect: Rect, outputSize: Size) => Rect
contentRects: (args: ContentRectArgs) => RectTuple
contentSvgItem: (args: ContentSvgItemArgs) => DataOrError<MaybeComplexSvgItem>
cropDirections: SideDirectionRecord
frames: (quantize: number) => number
hasIntrinsicTiming: boolean
host: Plugins
id: string
instanceObject: InstanceObject
intrinsicRect: Rect
intrinsicsKnown: (options: IntrinsicOptions) => boolean
isDefault: boolean
mediaIds: Strings
muted: boolean
number: (key: string) => number
properties: Array<Property>
propertiesOfTarget: (targetId: string) => Array<Property>
propertyFind: (name: string) => Property | undefined
propertyIds: (targetId: string) => Array<SignalId>
scalarsById: (targetId: string, time?: Time, timeIsStart?: boolean, useNames?: boolean) => SignalScalarRecord
scalarsRecord: (idOrNames: Strings) => ScalarRecord
scaleRects: (time: Time, range: TimeRange) => RectTuple
setValue: (nameOrId: string, scalar?: Scalar, dontConstrain?: boolean) => void
shouldSelectProperty: (property: Property) => boolean
sizeKey?: SizeKey
string: (key: string) => string
svgVector: (rect: Rect, forecolor?: string, opacity?: Scalar) => SvgVector
targetId: string
textAsset: () => TextMedia
toJSON: () => unknown
tweenValues: (key: string, time: Time, range: TimeRange) => Array<Scalar>
tweening: boolean
tweens: (key: string) => boolean
tweensProperty: (key: string) => boolean
value: (key: string) => Scalar | undefined
}
/** @implements ClippedTextImage */
class ClippedTextImageClass
extends TextInstanceClass {
asset: Media
assetFrames: (quantize: number) => Numbers
assetId: string
assetTime: (masherTime: Time) => Time
boolean: (key: string) => boolean
cacheInstance: (args: InstanceCacheArgs) => Promise<DataOrError<number>>
canBeMuted: boolean
changeObject: (propertyId: SignalId, scalar?: Scalar) => ChangeEditObject
changeScalars: (scalars: ScalarsById) => void
changesObject: (scalars: ScalarsById) => ChangePropertiesEditObject
clip: Clip
clippedElement: (content: VisibleInstance, args: ContainerSvgItemArgs) => DataOrError<SvgItemsRecord>
constrainedValue: (found: Property, value?: Scalar) => Scalar | undefined
containedItem: (contentItem: MaybeComplexSvgItem, containerItem: MaybeComplexSvgItem, args: ContainerSvgItemArgs) => DataOrError<SvgItemsRecord>
containerRects: (args: ContainerRectArgs, sizingSize: Size) => RectTuple
containerSvgItem: (args: ContainerSvgItemArgs) => DataOrError<MaybeComplexSvgItem>
contentRect: (time: Time, containerRect: Rect, outputSize: Size) => Rect
contentRects: (args: ContentRectArgs) => RectTuple
contentSvgItem: (args: ContentSvgItemArgs) => DataOrError<MaybeComplexSvgItem>
cropDirections: SideDirectionRecord
frames: (quantize: number) => number
hasIntrinsicTiming: boolean
host: Plugins
id: string
instanceObject: InstanceObject
intrinsicRect: Rect
intrinsicsKnown: (options: IntrinsicOptions) => boolean
isDefault: boolean
mediaIds: Strings
muted: boolean
number: (key: string) => number
properties: Array<Property>
propertiesOfTarget: (targetId: string) => Array<Property>
propertyFind: (name: string) => Property | undefined
propertyIds: (targetId: string) => Array<SignalId>
scalarsById: (targetId: string, time?: Time, timeIsStart?: boolean, useNames?: boolean) => SignalScalarRecord
scalarsRecord: (idOrNames: Strings) => ScalarRecord
scaleRects: (time: Time, range: TimeRange) => RectTuple
setValue: (nameOrId: string, scalar?: Scalar, dontConstrain?: boolean) => void
shouldSelectProperty: (property: Property) => boolean
sizeKey?: SizeKey
string: (key: string) => string
svgVector: (rect: Rect, forecolor?: string, opacity?: Scalar) => SvgVector
targetId: string
textAsset: () => TextMedia
toJSON: () => unknown
tweenValues: (key: string, time: Time, range: TimeRange) => Array<Scalar>
tweening: boolean
tweens: (key: string) => boolean
tweensProperty: (key: string) => boolean
value: (key: string) => Scalar | undefined
}
class ImporterTextElement
extends LoaderElementBase {
connectedCallback: () => void
cssBorderBoxSizing: CSSResult
cssHostDropping: CSSResult
cssHostFlex: CSSResult
defaultContent: () => OptionalContent
disconnectedCallback: () => void
pluginsNeeded: Array<PluginId>
properties: PropertyDeclarations
signals: SignalsRecord
styles: CSSResult
subscribe: (handler: SignalFunction, arg: string | SignalId | PropertyObject, name?: string, type?: string) => Signal
templateContent: (contents: TemplateContents) => TemplateContent
unsubscribe: (arg: string | SignalId | PropertyObject, name?: string, type?: string) => void
variable: (name: string) => number
variableSet: (nameOrSignal: Signal | string, value?: Scalar, suffix?: string) => void
variableString: (name: string) => string
}
/** @implements Importer */
class TextClientImporter {
canImport: () => boolean
icon: Node
id: string
import: () => void
label?: string
media: (file: File | FileSystemFileHandle | ImporterFileDetails) => Promise<DataOrError<Media>>
styles: CSSResult
ui: () => Node
}
/** @implements TextMedia */
class TextImageClass
extends TextMediaClass {
accountId: string
/** True if I have transparency. */
alpha?: boolean
api: () => Promise<DataOrError<Api>>
asStored: unknown
boolean: (key: string) => boolean
cacheMedia: (args: MediaCacheArgs) => Promise<DataOrError<number>>
/** True if I can be a clipped container. */
canBeContainer?: boolean
/** True if I can be clipped content. */
canBeContent?: boolean
/** True if I am a fill color. */
canBeFill?: boolean
canBeMuted: boolean
changeObject: (propertyId: SignalId, scalar?: Scalar) => ChangeEditObject
changeScalars: (scalars: ScalarsById) => void
changesObject: (scalars: ScalarsById) => ChangePropertiesEditObject
clipObject: (object?: InstanceObject) => ClipObject
constrainedValue: (found: Property, value?: Scalar) => Scalar | undefined
createdAt?: number
deletedAt?: number
duration: number
family: string
fetchResource: (resource: Resource) => Promise<DataOrError<true>>
findResource: (types: Strings) => Resource | undefined
frames: (quantize: number) => number
hasIntrinsicSizing?: boolean
hasIntrinsicTiming?: boolean
host: Plugins
id: string
instanceArgs: (object?: InstanceObject) => InstanceArgs
instanceFromObject: (object?: InstanceObject) => Instance
/** True if I am vector-based. */
isVector?: boolean
label: string
mediaIds: Strings
number: (key: string) => number
/** Size drawn from sized resource. */
probeSize?: Size
properties: Array<Property>
propertiesOfTarget: (targetId: string) => Array<Property>
propertyFind: (name: string) => Property | undefined
propertyIds: (targetId: string) => Array<SignalId>
resources: Array<Resource>
scalarsRecord: (idOrNames: Strings) => ScalarRecord
setValue: (nameOrId: string, scalar?: Scalar, dontConstrain?: boolean) => void
shouldSelectProperty: (property: Property) => boolean
source: string
string: (key: string) => string
style: (prefix?: string) => SvgStyleElement
targetId: string
textRect: Rect
toJSON: () => unknown
tweenValues: (key: string, time: Time, range: TimeRange) => Array<Scalar>
tweens: (key: string) => boolean
tweensProperty: (key: string) => boolean
type: string
unload: () => void
updatedAt?: number
userId?: string
value: (key: string) => Scalar | undefined
}
/** @implements ClippedText */
class TextInstanceClass
extends VisibleInstanceClass {
asset: Media
assetFrames: (quantize: number) => Numbers
assetId: string
assetTime: (masherTime: Time) => Time
boolean: (key: string) => boolean
cacheInstance: (args: InstanceCacheArgs) => Promise<DataOrError<number>>
canBeMuted: boolean
changeObject: (propertyId: SignalId, scalar?: Scalar) => ChangeEditObject
changeScalars: (scalars: ScalarsById) => void
changesObject: (scalars: ScalarsById) => ChangePropertiesEditObject
clip: Clip
clippedElement: (content: VisibleInstance, args: ContainerSvgItemArgs) => DataOrError<SvgItemsRecord>
constrainedValue: (found: Property, value?: Scalar) => Scalar | undefined
containedItem: (contentItem: MaybeComplexSvgItem, containerItem: MaybeComplexSvgItem, args: ContainerSvgItemArgs) => DataOrError<SvgItemsRecord>
containerRects: (args: ContainerRectArgs, sizingSize: Size) => RectTuple
containerSvgItem: (args: ContainerSvgItemArgs) => DataOrError<MaybeComplexSvgItem>
contentRect: (time: Time, containerRect: Rect, outputSize: Size) => Rect
contentRects: (args: ContentRectArgs) => RectTuple
contentSvgItem: (args: ContentSvgItemArgs) => DataOrError<MaybeComplexSvgItem>
cropDirections: SideDirectionRecord
frames: (quantize: number) => number
hasIntrinsicTiming: boolean
host: Plugins
id: string
instanceObject: InstanceObject
intrinsicRect: Rect
intrinsicsKnown: (options: IntrinsicOptions) => boolean
isDefault: boolean
mediaIds: Strings
muted: boolean
number: (key: string) => number
properties: Array<Property>
propertiesOfTarget: (targetId: string) => Array<Property>
propertyFind: (name: string) => Property | undefined
propertyIds: (targetId: string) => Array<SignalId>
scalarsById: (targetId: string, time?: Time, timeIsStart?: boolean, useNames?: boolean) => SignalScalarRecord
scalarsRecord: (idOrNames: Strings) => ScalarRecord
scaleRects: (time: Time, range: TimeRange) => RectTuple
setValue: (nameOrId: string, scalar?: Scalar, dontConstrain?: boolean) => void
shouldSelectProperty: (property: Property) => boolean
sizeKey?: SizeKey
string: (key: string) => string
svgVector: (rect: Rect, forecolor?: string, opacity?: Scalar) => SvgVector
targetId: string
textAsset: () => TextMedia
toJSON: () => unknown
tweenValues: (key: string, time: Time, range: TimeRange) => Array<Scalar>
tweening: boolean
tweens: (key: string) => boolean
tweensProperty: (key: string) => boolean
value: (key: string) => Scalar | undefined
}
/** @implements TextMedia */
class TextMediaClass
extends VisibleMediaClass {
accountId: string
/** True if I have transparency. */
alpha?: boolean
api: () => Promise<DataOrError<Api>>
asStored: unknown
boolean: (key: string) => boolean
cacheMedia: (args: MediaCacheArgs) => Promise<DataOrError<number>>
/** True if I can be a clipped container. */
canBeContainer?: boolean
/** True if I can be clipped content. */
canBeContent?: boolean
/** True if I am a fill color. */
canBeFill?: boolean
canBeMuted: boolean
changeObject: (propertyId: SignalId, scalar?: Scalar) => ChangeEditObject
changeScalars: (scalars: ScalarsById) => void
changesObject: (scalars: ScalarsById) => ChangePropertiesEditObject
clipObject: (object?: InstanceObject) => ClipObject
constrainedValue: (found: Property, value?: Scalar) => Scalar | undefined
createdAt?: number
deletedAt?: number
duration: number
family: string
fetchResource: (resource: Resource) => Promise<DataOrError<true>>
findResource: (types: Strings) => Resource | undefined
frames: (quantize: number) => number
hasIntrinsicSizing?: boolean
hasIntrinsicTiming?: boolean
host: Plugins
id: string
instanceArgs: (object?: InstanceObject) => InstanceArgs
instanceFromObject: (object?: InstanceObject) => Instance
/** True if I am vector-based. */
isVector?: boolean
label: string
mediaIds: Strings
number: (key: string) => number
/** Size drawn from sized resource. */
probeSize?: Size
properties: Array<Property>
propertiesOfTarget: (targetId: string) => Array<Property>
propertyFind: (name: string) => Property | undefined
propertyIds: (targetId: string) => Array<SignalId>
resources: Array<Resource>
scalarsRecord: (idOrNames: Strings) => ScalarRecord
setValue: (nameOrId: string, scalar?: Scalar, dontConstrain?: boolean) => void
shouldSelectProperty: (property: Property) => boolean
source: string
string: (key: string) => string
style: (prefix?: string) => SvgStyleElement
targetId: string
textRect: Rect
toJSON: () => unknown
tweenValues: (key: string, time: Time, range: TimeRange) => Array<Scalar>
tweens: (key: string) => boolean
tweensProperty: (key: string) => boolean
type: string
unload: () => void
updatedAt?: number
userId?: string
value: (key: string) => Scalar | undefined
}
function TextMediaMixin<T = Constrained<VisibleMedia>>(
Base: T
): Mixed<T, TextMedia>
function cssReduce(
entries: Array<CssResultTuple>
): CSSResult
function cssScalarProperty(
cssElement: CssElement,
signalId: SignalId
): ScalarProperty | undefined
function cssSuffixForType(
type: string
): string
function familyFromCss(
string: string
): string
/** Type guard for ClientFont */
function isClientFont(
value: unknown
): boolean
function svgElementText(
document: Document,
string: Value,
color?: string,
size?: number,
family?: string,
transform?: string
): SVGTextElement
function urlFromCss(
string: string
): FetchUrl | undefined
const CSS_BUTTON = {
_$cssResult$: true,
cssText: '
button {
max-height: calc(
var(--size-button-pix)
+ (2 * var(--pad-button-pix))
+ (2 * var(--border-button-stroke-pix))
);
border-radius: var(--border-button-radius-pix);
border-width: var(--border-button-stroke-pix);
border-style: solid;
color: var(--fore-chrome);
border-color: var(--fore-chrome);
background-color: var(--back-chrome);
cursor: pointer;
display: flex;
gap: var(--pad-button-pix);
padding: var(--pad-button-pix);
transition:
background-color var(--color-transition),
border-color var(--color-transition),
color var(--color-transition);
align-items: center;
font-size: var(--size-button-pix);
line-height: var(--size-button-pix);
font-weight: 500;
}
button:is(:hover, :active) {
color: var(--over-fore-chrome);
border-color: var(--over-fore-chrome);
background-color: var(--over-back-chrome);
}
button:is(:disabled) {
color: var(--off-fore-chrome);
border-color: var(--off-fore-chrome);
background-color: var(--off-back-chrome);
cursor: default;
}
',
t: [
'
button {
max-height: calc(
var(--size-button-pix)
+ (2 * var(--pad-button-pix))
+ (2 * var(--border-button-stroke-pix))
);
border-radius: var(--border-button-radius-pix);
border-width: var(--border-button-stroke-pix);
border-style: solid;
color: var(--fore-chrome);
border-color: var(--fore-chrome);
background-color: var(--back-chrome);
cursor: pointer;
display: flex;
gap: var(--pad-button-pix);
padding: var(--pad-button-pix);
transition:
background-color var(--color-transition),
border-color var(--color-transition),
color var(--color-transition);
align-items: center;
font-size: var(--size-button-pix);
line-height: var(--size-button-pix);
font-weight: 500;
}
button:is(:hover, :active) {
color: var(--over-fore-chrome);
border-color: var(--over-fore-chrome);
background-color: var(--over-back-chrome);
}
button:is(:disabled) {
color: var(--off-fore-chrome);
border-color: var(--off-fore-chrome);
background-color: var(--off-back-chrome);
cursor: default;
}
'
]
}
const CSS_COLORS = {
_$cssResult$: true,
cssText: ' --back-chrome: oklch(var(--bright-4) var(--color-chrome-chroma-per) var(--color-chrome-hue-deg)); --back-content: oklch(var(--bright-5) var(--color-content-chroma-per) var(--color-content-hue-deg)); --back-err: oklch(var(--bright-5) var(--color-err-chroma-per) var(--color-err-hue-deg)); --over-back-chrome: oklch(var(--bright-4) var(--color-selected-chroma-per) var(--color-selected-hue-deg)); --over-back-content: oklch(var(--bright-2) var(--color-selected-chroma-per) var(--color-selected-hue-deg)); --off-back-chrome: oklch(var(--bright-4) var(--color-chrome-chroma-per) var(--color-chrome-hue-deg)); --fore-chrome: oklch(var(--bright-1) var(--color-chrome-chroma-per) var(--color-chrome-hue-deg)); --fore-content: oklch(var(--bright-2) var(--color-content-chroma-per) var(--color-content-hue-deg)); --fore-err: oklch(var(--bright-2) var(--color-err-chroma-per) var(--color-err-hue-deg)); --on-fore-chrome: oklch(var(--bright-1) var(--color-selected-chroma-per) var(--color-selected-hue-deg)); --on-fore-content: oklch(var(--bright-2) var(--color-selected-chroma-per) var(--color-selected-hue-deg)); --over-fore-chrome: oklch(var(--bright-2) var(--color-selected-chroma-per) var(--color-selected-hue-deg)); --over-fore-content: oklch(var(--bright-4) var(--color-selected-chroma-per) var(--color-selected-hue-deg)); --off-fore-chrome: oklch(var(--bright-3) var(--color-chrome-chroma-per) var(--color-chrome-hue-deg)); --off-fore-content: oklch(var(--bright-2) var(--color-content-chroma-per) var(--color-content-hue-deg)); --color-transition: 1.5s cubic-bezier(0.18, 0.89, 0.32, 1.28)-out; --color-drop: oklch(var(--color-brightness-4-per) 0.25768330773615683 29.2338851923426); --dropping-shadow: var(--size-drop) var(--size-drop) 0 0 var(--color-drop) inset, calc(-1 * var(--size-drop)) calc(-1 * var(--size-drop)) 0 0 var(--color-drop) inset;;',
t: [
'',
' --',
': ',
';'
]
}
const CSS_COLOR_ENTRIES = [
[
{
_$cssResult$: true,
cssText: 'back-chrome',
t: [
'back-chrome'
]
},
{
_$cssResult$: true,
cssText: 'oklch(var(--bright-4) var(--color-chrome-chroma-per) var(--color-chrome-hue-deg))',
t: [
'oklch(var(--bright-4) var(--color-chrome-chroma-per) var(--color-chrome-hue-deg))'
]
}
],
[
{
_$cssResult$: true,
cssText: 'back-content',
t: [
'back-content'
]
},
{
_$cssResult$: true,
cssText: 'oklch(var(--bright-5) var(--color-content-chroma-per) var(--color-content-hue-deg))',
t: [
'oklch(var(--bright-5) var(--color-content-chroma-per) var(--color-content-hue-deg))'
]
}
],
[
{
_$cssResult$: true,
cssText: 'back-err',
t: [
'back-err'
]
},
{
_$cssResult$: true,
cssText: 'oklch(var(--bright-5) var(--color-err-chroma-per) var(--color-err-hue-deg))',
t: [
'oklch(var(--bright-5) var(--color-err-chroma-per) var(--color-err-hue-deg))'
]
}
],
[
{
_$cssResult$: true,
cssText: 'over-back-chrome',
t: [
'over-back-chrome'
]
},
{
_$cssResult$: true,
cssText: 'oklch(var(--bright-4) var(--color-selected-chroma-per) var(--color-selected-hue-deg))',
t: [
'oklch(var(--bright-4) var(--color-selected-chroma-per) var(--color-selected-hue-deg))'
]
}
],
[
{
_$cssResult$: true,
cssText: 'over-back-content',
t: [
'over-back-content'
]
},
{
_$cssResult$: true,
cssText: 'oklch(var(--bright-2) var(--color-selected-chroma-per) var(--color-selected-hue-deg))',
t: [
'oklch(var(--bright-2) var(--color-selected-chroma-per) var(--color-selected-hue-deg))'
]
}
],
[
{
_$cssResult$: true,
cssText: 'off-back-chrome',
t: [
'off-back-chrome'
]
},
{
_$cssResult$: true,
cssText: 'oklch(var(--bright-4) var(--color-chrome-chroma-per) var(--color-chrome-hue-deg))',
t: [
'oklch(var(--bright-4) var(--color-chrome-chroma-per) var(--color-chrome-hue-deg))'
]
}
],
[
{
_$cssResult$: true,
cssText: 'fore-chrome',
t: [
'fore-chrome'
]
},
{
_$cssResult$: true,
cssText: 'oklch(var(--bright-1) var(--color-chrome-chroma-per) var(--color-chrome-hue-deg))',
t: [
'oklch(var(--bright-1) var(--color-chrome-chroma-per) var(--color-chrome-hue-deg))'
]
}
],
[
{
_$cssResult$: true,
cssText: 'fore-content',
t: [
'fore-content'
]
},
{
_$cssResult$: true,
cssText: 'oklch(var(--bright-2) var(--color-content-chroma-per) var(--color-content-hue-deg))',
t: [
'oklch(var(--bright-2) var(--color-content-chroma-per) var(--color-content-hue-deg))'
]
}
],
[
{
_$cssResult$: true,
cssText: 'fore-err',
t: [
'fore-err'
]
},
{
_$cssResult$: true,
cssText: 'oklch(var(--bright-2) var(--color-err-chroma-per) var(--color-err-hue-deg))',
t: [
'oklch(var(--bright-2) var(--color-err-chroma-per) var(--color-err-hue-deg))'
]
}
],
[
{
_$cssResult$: true,
cssText: 'on-fore-chrome',
t: [
'on-fore-chrome'
]
},
{
_$cssResult$: true,
cssText: 'oklch(var(--bright-1) var(--color-selected-chroma-per) var(--color-selected-hue-deg))',
t: [
'oklch(var(--bright-1) var(--color-selected-chroma-per) var(--color-selected-hue-deg))'
]
}
],
[
{
_$cssResult$: true,
cssText: 'on-fore-content',
t: [
'on-fore-content'
]
},
{
_$cssResult$: true,
cssText: 'oklch(var(--bright-2) var(--color-selected-chroma-per) var(--color-selected-hue-deg))',
t: [
'oklch(var(--bright-2) var(--color-selected-chroma-per) var(--color-selected-hue-deg))'
]
}
],
[
{
_$cssResult$: true,
cssText: 'over-fore-chrome',
t: [
'over-fore-chrome'
]
},
{
_$cssResult$: true,
cssText: 'oklch(var(--bright-2) var(--color-selected-chroma-per) var(--color-selected-hue-deg))',
t: [
'oklch(var(--bright-2) var(--color-selected-chroma-per) var(--color-selected-hue-deg))'
]
}
],
[
{
_$cssResult$: true,
cssText: 'over-fore-content',
t: [
'over-fore-content'
]
},
{
_$cssResult$: true,
cssText: 'oklch(var(--bright-4) var(--color-selected-chroma-per) var(--color-selected-hue-deg))',
t: [
'oklch(var(--bright-4) var(--color-selected-chroma-per) var(--color-selected-hue-deg))'
]
}
],
[
{
_$cssResult$: true,
cssText: 'off-fore-chrome',
t: [
'off-fore-chrome'
]
},
{
_$cssResult$: true,
cssText: 'oklch(var(--bright-3) var(--color-chrome-chroma-per) var(--color-chrome-hue-deg))',
t: [
'oklch(var(--bright-3) var(--color-chrome-chroma-per) var(--color-chrome-hue-deg))'
]
}
],
[
{
_$cssResult$: true,
cssText: 'off-fore-content',
t: [
'off-fore-content'
]
},
{
_$cssResult$: true,
cssText: 'oklch(var(--bright-2) var(--color-content-chroma-per) var(--color-content-hue-deg))',
t: [
'oklch(var(--bright-2) var(--color-content-chroma-per) var(--color-content-hue-deg))'
]
}
],
[
{
_$cssResult$: true,
cssText: 'color-transition',
t: [
'color-transition'
]
},
{
_$cssResult$: true,
cssText: '1.5s cubic-bezier(0.18, 0.89, 0.32, 1.28)-out',
t: [
'1.5s cubic-bezier(0.18, 0.89, 0.32, 1.28)-out'
]
}
],
[
{
_$cssResult$: true,
cssText: 'color-drop',
t: [
'color-drop'
]
},
{
_$cssResult$: true,
cssText: 'oklch(var(--color-brightness-4-per) 0.25768330773615683 29.2338851923426)',
t: [
'oklch(var(--color-brightness-4-per) 0.25768330773615683 29.2338851923426)'
]
}
],
[
{
_$cssResult$: true,
cssText: 'dropping-shadow',
t: [
'dropping-shadow'
]
},
{
_$cssResult$: true,
cssText: 'var(--size-drop) var(--size-drop) 0 0 var(--color-drop) inset, calc(-1 * var(--size-drop)) calc(-1 * var(--size-drop)) 0 0 var(--color-drop) inset;',
t: [
'var(--size-drop) var(--size-drop) 0 0 var(--color-drop) inset, calc(-1 * var(--size-drop)) calc(-1 * var(--size-drop)) 0 0 var(--color-drop) inset;'
]
}
]
]
const CSS_DYNAMIC = {
_$cssResult$: true,
cssText: ' --color: #000000; --color-contrast: var(--color-contrast-light); --frame: 0; --frames: 0; --width: 16; --height: 9;',
t: [
'',
' --',
': ',
';'
]
}
const CSS_DYNAMIC_ENTRIES = [
[
{
_$cssResult$: true,
cssText: 'color',
t: [
'color'
]
},
{
_$cssResult$: true,
cssText: '#000000',
t: [
'#000000'
]
}
],
[
{
_$cssResult$: true,
cssText: 'color-contrast',
t: [
'color-contrast'
]
},
{
_$cssResult$: true,
cssText: 'var(--color-contrast-light)',
t: [
'var(--color-contrast-light)'
]
}
],
[
{
_$cssResult$: true,
cssText: 'frame',
t: [
'frame'
]
},
{
_$cssResult$: true,
cssText: '0',
t: [
'0'
]
}
],
[
{
_$cssResult$: true,
cssText: 'frames',
t: [
'frames'
]
},
{
_$cssResult$: true,
cssText: '0',
t: [
'0'
]
}
],
[
{
_$cssResult$: true,
cssText: 'width',
t: [
'width'
]
},
{
_$cssResult$: true,
cssText: '16',
t: [
'16'
]
}
],
[
{
_$cssResult$: true,
cssText: 'height',
t: [
'height'
]
},
{
_$cssResult$: true,
cssText: '9',
t: [
'9'
]
}
]
]
const CSS_ENTRIES = [
[
{
_$cssResult$: true,
cssText: 'border-button-radius-pix',
t: [
'border-button-radius-pix'
]
},
{
_$cssResult$: true,
cssText: '5px',
t: [
'5px'
]
}
],
[
{
_$cssResult$: true,
cssText: 'border-button-stroke-pix',
t: [
'border-button-stroke-pix'
]
},
{
_$cssResult$: true,
cssText: '1px',
t: [
'1px'
]
}
],
[
{
_$cssResult$: true,
cssText: 'border-item-radius-pix',
t: [
'border-item-radius-pix'
]
},
{
_$cssResult$: true,
cssText: '5px',
t: [
'5px'
]
}
],
[
{
_$cssResult$: true,
cssText: 'border-item-stroke-pix',
t: [
'border-item-stroke-pix'
]
},
{
_$cssResult$: true,
cssText: '1px',
t: [
'1px'
]
}
],
[
{
_$cssResult$: true,
cssText: 'border-panel-radius-pix',
t: [
'border-panel-radius-pix'
]
},
{
_$cssResult$: true,
cssText: '7px',
t: [
'7px'
]
}
],
[
{
_$cssResult$: true,
cssText: 'border-panel-stroke-pix',
t: [
'border-panel-stroke-pix'
]
},
{
_$cssResult$: true,
cssText: '3px',
t: [
'3px'
]
}
],
[
{
_$cssResult$: true,
cssText: 'border-preview-stroke-pix',
t: [
'border-preview-stroke-pix'
]
},
{
_$cssResult$: true,
cssText: '1px',
t: [
'1px'
]
}
],
[
{
_$cssResult$: true,
cssText: 'color-brightness-1-per',
t: [
'color-brightness-1-per'
]
},
{
_$cssResult$: true,
cssText: '15%',
t: [
'15%'
]
}
],
[
{
_$cssResult$: true,
cssText: 'color-brightness-2-per',
t: [
'color-brightness-2-per'
]
},
{
_$cssResult$: true,
cssText: '25%',
t: [
'25%'
]
}
],
[
{
_$cssResult$: true,
cssText: 'color-brightness-3-per',
t: [
'color-brightness-3-per'
]
},
{
_$cssResult$: true,
cssText: '50%',
t: [
'50%'
]
}
],
[
{
_$cssResult$: true,
cssText: 'color-brightness-4-per',
t: [
'color-brightness-4-per'
]
},
{
_$cssResult$: true,
cssText: '80%',
t: [
'80%'
]
}
],
[
{
_$cssResult$: true,
cssText: 'color-brightness-5-per',
t: [
'color-brightness-5-per'
]
},
{
_$cssResult$: true,
cssText: '90%',
t: [
'90%'
]
}
],
[
{
_$cssResult$: true,
cssText: 'color-chrome-chroma-per',
t: [
'color-chrome-chroma-per'
]
},
{
_$cssResult$: true,
cssText: '0%',
t: [
'0%'
]
}
],
[
{
_$cssResult$: true,
cssText: 'color-chrome-hue-deg',
t: [
'color-chrome-hue-deg'
]
},
{
_$cssResult$: true,
cssText: '281',
t: [
'281'
]
}
],
[
{
_$cssResult$: true,
cssText: 'color-content-chroma-per',
t: [
'color-content-chroma-per'
]
},
{
_$cssResult$: true,
cssText: '0%',
t: [
'0%'
]
}
],
[
{
_$cssResult$: true,
cssText: 'color-content-hue-deg',
t: [
'color-content-hue-deg'
]
},
{
_$cssResult$: true,
cssText: '281',
t: [
'281'
]
}
],
[
{
_$cssResult$: true,
cssText: 'color-err-chroma-per',
t: [
'color-err-chroma-per'
]
},
{
_$cssResult$: true,
cssText: '25%',
t: [
'25%'
]
}
],
[
{
_$cssResult$: true,
cssText: 'color-err-hue-deg',
t: [
'color-err-hue-deg'
]
},
{
_$cssResult$: true,
cssText: '30',
t: [
'30'
]
}
],
[
{
_$cssResult$: true,
cssText: 'color-log-chroma-per',
t: [
'color-log-chroma-per'
]
},
{
_$cssResult$: true,
cssText: '25%',
t: [
'25%'
]
}
],
[
{
_$cssResult$: true,
cssText: 'color-log-hue-deg',
t: [
'color-log-hue-deg'
]
},
{
_$cssResult$: true,
cssText: '160',
t: [
'160'
]
}
],
[
{
_$cssResult$: true,
cssText: 'color-selected-chroma-per',
t: [
'color-selected-chroma-per'
]
},
{
_$cssResult$: true,
cssText: '50%',
t: [
'50%'
]
}
],
[
{
_$cssResult$: true,
cssText: 'color-selected-hue-deg',
t: [
'color-selected-hue-deg'
]
},
{
_$cssResult$: true,
cssText: '281',
t: [
'281'
]
}
],
[
{
_$cssResult$: true,
cssText: 'color-warn-chroma-per',
t: [
'color-warn-chroma-per'
]
},
{
_$cssResult$: true,
cssText: '50%',
t: [
'50%'
]
}
],
[
{
_$cssResult$: true,
cssText: 'color-warn-hue-deg',
t: [
'color-warn-hue-deg'
]
},
{
_$cssResult$: true,
cssText: '110',
t: [
'110'
]
}
],
[
{
_$cssResult$: true,
cssText: 'pad-button-pix',
t: [
'pad-button-pix'
]
},
{
_$cssResult$: true,
cssText: '4px',
t: [
'4px'
]
}
],
[
{
_$cssResult$: true,
cssText: 'pad-chrome-pix',
t: [
'pad-chrome-pix'
]
},
{
_$cssResult$: true,
cssText: '5px',
t: [
'5px'
]
}
],
[
{
_$cssResult$: true,
cssText: 'pad-content-pix',
t: [
'pad-content-pix'
]
},
{
_$cssResult$: true,
cssText: '10px',
t: [
'10px'
]
}
],
[
{
_$cssResult$: true,
cssText: 'pad-control-pix',
t: [
'pad-control-pix'
]
},
{
_$cssResult$: true,
cssText: '10px',
t: [
'10px'
]
}
],
[
{
_$cssResult$: true,
cssText: 'pad-item-pix',
t: [
'pad-item-pix'
]
},
{
_$cssResult$: true,
cssText: '5px',
t: [
'5px'
]
}
],
[
{
_$cssResult$: true,
cssText: 'pad-panel-pix',
t: [
'pad-panel-pix'
]
},
{
_$cssResult$: true,
cssText: '20px',
t: [
'20px'
]
}
],
[
{
_$cssResult$: true,
cssText: 'size-aside-pix',
t: [
'size-aside-pix'
]
},
{
_$cssResult$: true,
cssText: '240px',
t: [
'240px'
]
}
],
[
{
_$cssResult$: true,
cssText: 'size-base-str',
t: [
'size-base-str'
]
},
{
_$cssResult$: true,
cssText: '2rem',
t: [
'2rem'
]
}
],
[
{
_$cssResult$: true,
cssText: 'size-button-rat',
t: [
'size-button-rat'
]
},
{
_$cssResult$: true,
cssText: '0.5',
t: [
'0.5'
]
}
],
[
{
_$cssResult$: true,
cssText: 'size-control-rat',
t: [
'size-control-rat'
]
},
{
_$cssResult$: true,
cssText: '0.6',
t: [
'0.6'
]
}
],
[
{
_$cssResult$: true,
cssText: 'size-label-rat',
t: [
'size-label-rat'
]
},
{
_$cssResult$: true,
cssText: '0.5',
t: [
'0.5'
]
}
],
[
{
_$cssResult$: true,
cssText: 'size-player-pix',
t: [
'size-player-pix'
]
},
{
_$cssResult$: true,
cssText: '270px',
t: [
'270px'
]
}
],
[
{
_$cssResult$: true,
cssText: 'size-preview-rat',
t: [
'size-preview-rat'
]
},
{
_$cssResult$: true,
cssText: '0.25',
t: [
'0.25'
]
}
],
[
{
_$cssResult$: true,
cssText: 'size-scrubber-height-pix',
t: [
'size-scrubber-height-pix'
]
},
{
_$cssResult$: true,
cssText: '13px',
t: [
'13px'
]
}
],
[
{
_$cssResult$: true,
cssText: 'size-scrubber-width-pix',
t: [
'size-scrubber-width-pix'
]
},
{
_$cssResult$: true,
cssText: '16px',
t: [
'16px'
]
}
],
[
{
_$cssResult$: true,
cssText: 'view-icon-boo',
t: [
'view-icon-boo'
]
},
{
_$cssResult$: true,
cssText: '1',
t: [
'1'
]
}
],
[
{
_$cssResult$: true,
cssText: 'view-label-boo',
t: [
'view-label-boo'
]
},
{
_$cssResult$: true,
cssText: '1',
t: [
'1'
]
}
],
[
{
_$cssResult$: true,
cssText: 'view-preview-boo',
t: [
'view-preview-boo'
]
},
{
_$cssResult$: true,
cssText: '1',
t: [
'1'
]
}
]
]
const CSS_RANGE = {
_$cssResult$: true,
cssText: '
input[type=range] {
flex-grow: 1;
-webkit-appearance: none;
width: 100%;
border-radius: calc(var(--size-control-pix) * 0.25);
height: calc(var(--size-control-pix) * 0.5);
border: 1px solid var(--fore-chrome);
background-color: var(--back-chrome);
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: var(--fore-chrome);
border: 1px solid var(--back-chrome);
border-radius: calc(var(--size-control-pix) * 0.5);
width: var(--size-control-pix);
height: var(--size-control-pix);
cursor: pointer;
}
input[type=range]:is(:active, :hover) {
border-color: var(--on-fore-chrome);
}
input[type=range]:is(:active, :hover)::-webkit-slider-thumb {
background-color: var(--on-fore-chrome);
}
',
t: [
'
input[type=range] {
flex-grow: 1;
-webkit-appearance: none;
width: 100%;
border-radius: calc(var(--size-control-pix) * 0.25);
height: calc(var(--size-control-pix) * 0.5);
border: 1px solid var(--fore-chrome);
background-color: var(--back-chrome);
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: var(--fore-chrome);
border: 1px solid var(--back-chrome);
border-radius: calc(var(--size-control-pix) * 0.5);
width: var(--size-control-pix);
height: var(--size-control-pix);
cursor: pointer;
}
input[type=range]:is(:active, :hover) {
border-color: var(--on-fore-chrome);
}
input[type=range]:is(:active, :hover)::-webkit-slider-thumb {
background-color: var(--on-fore-chrome);
}
'
]
}
const CSS_SIZES = {
_$cssResult$: true,
cssText: ' --size-label-pix: calc(var(--size-label-rat) * var(--size-base-str)); --size-button-pix: calc(var(--size-button-rat) * var(--size-base-str)); --size-control-pix: calc(var(--size-control-rat) * var(--size-base-str)); --size-larger: max(var(--width), var(--height)); --size-ratio: calc(var(--size-player-pix) / var(--size-larger)); --width-preview: calc(var(--width) * var(--size-ratio)); --height-preview: calc(var(--height) * var(--size-ratio)); --frame-width: round((var(--size-preview-rat) * var(--width-preview)), 1px); --frame-height: round((var(--size-preview-rat) * var(--height-preview) * var(--view-preview-boo)), 1px); --preview-width: calc((2 * var(--border-preview-stroke-pix)) + var(--frame-width)); --preview-height: calc((2 * var(--border-preview-stroke-pix)) + var(--frame-height)); --size-drop: 2px;',
t: [
'',
' --',
': ',
';'
]
}
const CSS_SIZE_ENTRIES = [
[
{
_$cssResult$: true,
cssText: 'size-label-pix',
t: [
'size-label-pix'
]
},
{
_$cssResult$: true,
cssText: 'calc(var(--size-label-rat) * var(--size-base-str))',
t: [
'calc(var(--size-label-rat) * var(--size-base-str))'
]
}
],
[
{
_$cssResult$: true,
cssText: 'size-button-pix',
t: [
'size-button-pix'
]
},
{
_$cssResult$: true,
cssText: 'calc(var(--size-button-rat) * var(--size-base-str))',
t: [
'calc(var(--size-button-rat) * var(--size-base-str))'
]
}
],
[
{
_$cssResult$: true,
cssText: 'size-control-pix',
t: [
'size-control-pix'
]
},
{
_$cssResult$: true,
cssText: 'calc(var(--size-control-rat) * var(--size-base-str))',
t: [
'calc(var(--size-control-rat) * var(--size-base-str))'
]
}
],
[
{
_$cssResult$: true,
cssText: 'size-larger',
t: [
'size-larger'
]
},
{
_$cssResult$: true,
cssText: 'max(var(--width), var(--height))',
t: [
'max(var(--width), var(--height))'
]
}
],
[
{
_$cssResult$: true,
cssText: 'size-ratio',
t: [
'size-ratio'
]
},
{
_$cssResult$: true,
cssText: 'calc(var(--size-player-pix) / var(--size-larger))',
t: [
'calc(var(--size-player-pix) / var(--size-larger))'
]
}
],
[
{
_$cssResult$: true,
cssText: 'width-preview',
t: [
'width-preview'
]
},
{
_$cssResult$: true,
cssText: 'calc(var(--width) * var(--size-ratio))',
t: [
'calc(var(--width) * var(--size-ratio))'
]
}
],
[
{
_$cssResult$: true,
cssText: 'height-preview',
t: [
'height-preview'
]
},
{
_$cssResult$: true,
cssText: 'calc(var(--height) * var(--size-ratio))',
t: [
'calc(var(--height) * var(--size-ratio))'
]
}
],
[
{
_$cssResult$: true,
cssText: 'frame-width',
t: [
'frame-width'
]
},
{
_$cssResult$: true,
cssText: 'round((var(--size-preview-rat) * var(--width-preview)), 1px)',
t: [
'round((var(--size-preview-rat) * var(--width-preview)), 1px)'
]
}
],
[
{
_$cssResult$: true,
cssText: 'frame-height',
t: [
'frame-height'
]
},
{
_$cssResult$: true,
cssText: 'round((var(--size-preview-rat) * var(--height-preview) * var(--view-preview-boo)), 1px)',
t: [
'round((var(--size-preview-rat) * var(--height-preview) * var(--view-preview-boo)), 1px)'
]
}
],
[
{
_$cssResult$: true,
cssText: 'preview-width',
t: [
'preview-width'
]
},
{
_$cssResult$: true,
cssText: 'calc((2 * var(--border-preview-stroke-pix)) + var(--frame-width))',
t: [
'calc((2 * var(--border-preview-stroke-pix)) + var(--frame-width))'
]
}
],
[
{
_$cssResult$: true,
cssText: 'preview-height',
t: [
'preview-height'
]
},
{
_$cssResult$: true,
cssText: 'calc((2 * var(--border-preview-stroke-pix)) + var(--frame-height))',
t: [
'calc((2 * var(--border-preview-stroke-pix)) + var(--frame-height))'
]
}
],
[
{
_$cssResult$: true,
cssText: 'size-drop',
t: [
'size-drop'
]
},
{
_$cssResult$: true,
cssText: '2px',
t: [
'2px'
]
}
]
]
const DROP_CSS = {
_$cssResult$: true,
cssText: '
:host {
position: relative;
}
div.drop-box {
inset: 0px;
pointer-events: none;
color: transparent;
position: absolute;
display: block;
}
:host(.dropping) div.drop-box {
box-shadow: var(--dropping-shadow);
}
',
t: [
'
:host {
position: relative;
}
div.drop-box {
inset: 0px;
pointer-events: none;
color: transparent;
position: absolute;
display: block;
}
:host(.dropping) div.drop-box {
box-shadow: var(--dropping-shadow);
}
'
]
}
/** Applied to all previews except timeline */
const MEDIA_PREVIEW_CSS = {
_$cssResult$: true,
cssText: '
:host {
display: inline-block;
padding: var(--pad-item-pix);
border-width: var(--border-item-stroke-pix);
border-style: solid;
border-radius: var(--border-item-radius-pix);
border-color: var(--fore-content);
color: var(--fore-content);
background-color: var(--back-content);
width: var(--previewable-width-px);
height: var(--previewable-height-px);
cursor: grab;
}
:host([undraggable]) {
cursor: default;
}
:host(:is(:hover, .selected)) {
background-color: var(--over-fore-content);
color: var(--over-back-content);
border-color: var(--over-back-content);
}
#preview {
overflow: hidden;
height: calc(var(--preview-height));
width: calc(var(--preview-width));
height: var(--preview-height);
width: var(--preview-width);
}
#label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#head {
width: var(--preview-width);
padding-bottom: var(--pad-item-pix);
display: flex;
gap: var(--pad-item-pix);
font-size: var(--size-label-pix);
line-height: var(--size-label-pix);
overflow-x: hidden;
}
#preview > * {
height: var(--preview-height);
width: var(--preview-width);
}
',
t: [
'
',
'
#preview > * {
height: var(--preview-height);
width: var(--preview-width);
}
'
]
}
/**
* Applied to timeline previews and others
* via MEDIA_PREVIEW_CSS
*/
const PREVIEW_CSS = {
_$cssResult$: true,
cssText: '
:host {
display: inline-block;
padding: var(--pad-item-pix);
border-width: var(--border-item-stroke-pix);
border-style: solid;
border-radius: var(--border-item-radius-pix);
border-color: var(--fore-content);
color: var(--fore-content);
background-color: var(--back-content);
width: var(--previewable-width-px);
height: var(--previewable-height-px);
cursor: grab;
}
:host([undraggable]) {
cursor: default;
}
:host(:is(:hover, .selected)) {
background-color: var(--over-fore-content);
color: var(--over-back-content);
border-color: var(--over-back-content);
}
#preview {
overflow: hidden;
height: calc(var(--preview-height));
width: calc(var(--preview-width));
height: var(--preview-height);
width: var(--preview-width);
}
#label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#head {
width: var(--preview-width);
padding-bottom: var(--pad-item-pix);
display: flex;
gap: var(--pad-item-pix);
font-size: var(--size-label-pix);
line-height: var(--size-label-pix);
overflow-x: hidden;
}
',
t: [
'
:host {
display: inline-block;
padding: var(--pad-item-pix);
border-width: var(--border-item-stroke-pix);
border-style: solid;
border-radius: var(--border-item-radius-pix);
border-color: var(--fore-content);
color: var(--fore-content);
background-color: var(--back-content);
width: var(--previewable-width-px);
height: var(--previewable-height-px);
cursor: grab;
}
:host([undraggable]) {
cursor: default;
}
:host(:is(:hover, .selected)) {
background-color: var(--over-fore-content);
color: var(--over-back-content);
border-color: var(--over-back-content);
}
#preview {
overflow: hidden;
height: calc(var(--preview-height));
width: calc(var(--preview-width));
height: var(--preview-height);
width: var(--preview-width);
}
#label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#head {
width: var(--preview-width);
padding-bottom: var(--pad-item-pix);
display: flex;
gap: var(--pad-item-pix);
font-size: var(--size-label-pix);
line-height: var(--size-label-pix);
overflow-x: hidden;
}
'
]
}