BaseClip, Transform y Style

1. BaseClip

interface BaseClip {
  id?: string;
  type: ClipType;
  start: number;
  duration: number;
  transform?: Transform;
  zIndex?: number;
  opacity?: number;
  style?: Style;
  animations?: Animation[];
  keyframes?: Keyframe[];
  transition?: Transition;
}

2. Referencia de campos

id

• Tipo: string
• Obligatorio: no
• Propósito: identificador del elemento

type

• Tipo: ClipType
• Obligatorio: sí

Compatibles actualmente:

• video
• image
• text
• rect
• circle
• polygon
• audio
• subtitle
• layout
• template

start

• Tipo: number
• Unidad: segundos
• Obligatorio: sí
• Propósito: hora de inicio del clip

duration

• Tipo: number
• Unidad: segundos
• Obligatorio: sí
• Propósito: duración del clip

transform

• Tipo: Transform
• Obligatorio: no

zIndex

• Tipo: number
• Obligatorio: no
• Valor por defecto: 0

opacity

• Tipo: number
• Obligatorio: no
• Valor por defecto: 1
• Propósito: atajo de opacidad para elementos visibles
• Regla de compatibilidad: style.opacity tiene prioridad sobre opacity en el nivel superior

style

• Tipo: Style
• Obligatorio: no

animations

• Tipo: Animation[]
• Obligatorio: no

keyframes

• Tipo: Keyframe[]
• Obligatorio: no

transition

• Tipo: Transition
• Obligatorio: no

Notas:

• transition se aplica a elementos visibles
• audio no ejecuta transiciones visuales

3. Transform

interface Transform {
  x?: number | string;
  y?: number | string;
  width?: number | string;
  height?: number | string;
  scale?: number | [number, number];
  rotation?: number;
  skew?: [number, number];
  anchor?: Anchor;
}

Actualmente efectivos en runtime:

• x
• y
• width
• height
• scale
• rotation
• skew
• anchor

4. Reglas de coordenadas porcentuales

Este no es un sistema de esquina superior izquierda al estilo DOM. Usa un modelo de coordenadas centrado.

Ejemplos:

• x: "50%" significa centro horizontal
• y: "50%" significa centro vertical
• x: "0%" significa extremo izquierdo
• x: "100%" significa extremo derecho
• y: "0%" significa arriba
• y: "100%" significa abajo

5. scale

Formas compatibles:

{ "scale": 1.2 }

{ "scale": [1.2, 0.8] }

6. anchor

Valores compatibles:

• center
• top-left
• top
• top-right
• left
• right
• bottom-left
• bottom
• bottom-right

7. Style

interface Style {
  opacity?: number;
  objectFit?: "fill" | "cover" | "contain";
  fill?: string | Gradient;
  stroke?: string;
  strokeWidth?: number;
  fontFamily?: string;
  fontSize?: number;
  fontWeight?: number | string;
  fontStyle?: "normal" | "italic";
  lineHeight?: number;
  letterSpacing?: number;
  textAlign?: "left" | "center" | "right";
  textWrap?: boolean;
  shadowColor?: string;
  shadowBlur?: number;
  shadowOffset?: [number, number];
  borderRadius?: number | [number, number, number, number];
  filters?: Filter[];
}

Actualmente efectivos en runtime:

• opacity
• objectFit
• fill
• stroke
• strokeWidth
• fontFamily
• fontSize
• fontWeight
• fontStyle
• lineHeight
• letterSpacing
• textAlign
• textWrap
• shadowColor
• shadowBlur
• shadowOffset
• borderRadius
• filters

8. filters

Compatibles:

• blur
• brightness
• contrast
• saturate
• hue
• grayscale
• sepia
• invert

9. Observaciones compartidas de estilo

• style.objectFit actualmente tiene sentido en image y video
• Los valores permitidos son fill, cover y contain
• Los demás tipos de clip no deben tratar objectFit como un campo efectivo