### Install DesignCombo SDK Packages

Source: https://designcombo.dev/framework/getting-started/installation

Installs the necessary DesignCombo SDK packages using npm, yarn, or pnpm. These packages include state management, timeline functionality, and type definitions for the video editor.

```bash
npm install @designcombo/state @designcombo/timeline @designcombo/types
```

```bash
yarn add @designcombo/state @designcombo/timeline @designcombo/types
```

```bash
pnpm add @designcombo/state @designcombo/timeline @designcombo/types
```

--------------------------------

### Basic React Video Editor Setup

Source: https://designcombo.dev/framework/getting-started/installation

Demonstrates a basic React component for the DesignCombo Video Editor. It initializes the StateManager and Timeline, sets up canvas rendering, and includes a function to add text elements to the timeline via dispatched events.

```jsx
import React, { useEffect, useRef } from 'react';

import StateManager from '@designcombo/state';

import Timeline from '@designcombo/timeline';

import { dispatch } from '@designcombo/events';



function VideoEditor() {

  const canvasRef = useRef<HTMLCanvasElement>(null);

  const stateManagerRef = useRef<StateManager>();

  const timelineRef = useRef<Timeline>();



  useEffect(() => {

    if (!canvasRef.current) return;



    // Initialize state manager

    stateManagerRef.current = new StateManager({

      size: { width: 1920, height: 1080 },

      fps: 30

    });



    // Initialize timeline

    timelineRef.current = new Timeline(canvasRef.current, {

      scale: { unit: 300, zoom: 1/300, segments: 5, index: 7 },

      duration: 10000,

      state: stateManagerRef.current,

      itemTypes: ['text', 'video', 'audio', 'image'],

      acceptsMap: {

        main: ['video', 'image'],

        text: ['text', 'caption'],

        audio: ['audio']

      }

    });



    // Cleanup

    return () => {

      timelineRef.current?.purge();

      stateManagerRef.current?.purge();

    };

  }, []);



  const addText = () => {

    dispatch('add:text', {

      payload: {

        name: 'Hello World',

        details: {

          text: 'Hello World',

          fontSize: 48,

          fontFamily: 'Arial',

          color: '#ffffff'

        }

      }

    });

  };



  return (

    <div>

      <button onClick={addText}>Add Text</button>

      <canvas ref={canvasRef} width={1200} height={400} />

    </div>

  );

}



export default VideoEditor;
```

--------------------------------

### Get Current State Information

Source: https://designcombo.dev/framework/getting-started/quick-start

Provides examples of how to retrieve the current state from the state manager, including all track items, active elements, timeline scale, and project settings like size, FPS, and duration.

```JavaScript
const state = stateManager.getState();

const trackItems = state.trackItemsMap;
const activeElements = state.activeIds;
const scale = state.scale;

const settings = {
  size: state.size,
  fps: state.fps,
  duration: state.duration
};
```

--------------------------------

### Initialize DesignCombo Video Editor SDK

Source: https://designcombo.dev/framework/getting-started/quick-start

This example demonstrates how to initialize the DesignCombo Video Editor SDK using React. It sets up the state manager and timeline, and adds an initial text element to the canvas. It also includes cleanup logic for the timeline and state manager.

```javascript
import React, { useEffect, useRef } from 'react';

import StateManager from '@designcombo/state';

import Timeline from '@designcombo/timeline';

import { dispatch } from '@designcombo/events';

import { ADD_TEXT, ADD_IMAGE } from '@designcombo/state';



function SimpleVideoEditor() {

  const canvasRef = useRef<HTMLCanvasElement>(null);



  useEffect(() => {

    if (!canvasRef.current) return;



    // Initialize state manager

    const stateManager = new StateManager({

      size: { width: 1920, height: 1080 },

      fps: 30

    });



    // Initialize timeline

    const timeline = new Timeline(canvasRef.current, {

      scale: { unit: 300, zoom: 1/300, segments: 5, index: 7 },

      duration: 10000,

      state: stateManager

    });



    // Add a text element

    dispatch(ADD_TEXT, {

      payload: {

        text: 'Welcome to DesignCombo!',

        fontSize: 48,

        fontFamily: 'Arial',

        color: '#ffffff'

      },

      options: {

        targetTrackIndex: 0,

        isSelected: true

      }

    });



    // Cleanup

    return () => {

      timeline.purge();

      stateManager.purge();

    };

  }, []);



  return (

    <div>

      <h1>DesignCombo Video Editor</h1>

      <canvas 

        ref={canvasRef} 

        width={1200}

        height={400}

        style={{ border: '1px solid #ccc' }}

      />

    </div>

  );

}



export default SimpleVideoEditor;

```

--------------------------------

### Install DesignCombo Video Editor SDK

Source: https://designcombo.dev/framework/getting-started

Installs the necessary DesignCombo SDK packages using either npm or pnpm. These packages include state management, timeline visualization, and type definitions.

```bash
npm install @designcombo/state @designcombo/timeline @designcombo/types
```

```bash
pnpm add @designcombo/state @designcombo/timeline @designcombo/types
```

--------------------------------

### DesignCombo SDK Peer Dependencies

Source: https://designcombo.dev/framework/getting-started/installation

Specifies the peer dependencies required by the DesignCombo SDK, notably '@designcombo/events', ensuring compatibility and proper integration with the event system.

```json
{
  "peerDependencies": {
    "@designcombo/events": "^1.0.2"
  }
}
```

--------------------------------

### Configure Timeline for Design Combo

Source: https://designcombo.dev/framework/getting-started/installation

This snippet illustrates the configuration of the `Timeline` component within the Design Combo framework. It sets up scale, duration, state management, and defines the types of items that can be added to the timeline, including their accepted media types.

```javascript
const timeline = new Timeline(canvas, {

  scale: { unit: 300, zoom: 1/300, segments: 5, index: 7 },

  duration: 10000,

  state: stateManager,

  itemTypes: ['text', 'video', 'audio', 'image'],

  acceptsMap: {

    main: ['video', 'image'],

    text: ['text', 'caption'],

    audio: ['audio']

  }

});
```

--------------------------------

### Define and Apply Custom Themes

Source: https://designcombo.dev/framework/development/customization

This example shows how to create a `customTheme` object with properties for colors, fonts, spacing, and border-radius, and then apply this theme to the timeline using `timeline.setTheme()`.

```javascript
// Custom theme
const customTheme = {
  name: "Custom Theme",
  colors: {
    primary: "#007acc",
    secondary: "#ff6b6b",
    background: "#1a1a1a",
    surface: "#2a2a2a",
    text: "#ffffff",
    textSecondary: "#cccccc"
  },
  fonts: {
    primary: "Arial, sans-serif",
    secondary: "Georgia, serif"
  },
  spacing: {
    small: 8,
    medium: 16,
    large: 24
  },
  borderRadius: {
    small: 4,
    medium: 8,
    large: 12
  }
};
// Apply custom theme
timeline.setTheme(customTheme);
```

--------------------------------

### Example Usage of Animation Presets

Source: https://designcombo.dev/framework/development/api-reference

Demonstrates how to use the `dispatch` function to apply various animation presets and sequences to an item. Includes examples for basic, text, and loop animations, as well as adding multiple animations via a sequence.

```javascript
// Add a basic animation preset

dispatch(ADD_ANIMATION_PRESET, {

  payload: {

    itemId: "text-1",

    preset: "fadeIn"

  }

});



// Add a special text animation

dispatch(ADD_ANIMATION_PRESET, {

  payload: {

    itemId: "text-1",

    preset: "typeWriterIn"

  }

});



// Add a loop animation

dispatch(ADD_ANIMATION_PRESET, {

  payload: {

    itemId: "text-1",

    preset: "heartbeatAnimationLoop"

  }

});



// Add multiple animations

dispatch(ADD_ANIMATION_SEQUENCE, {

  payload: {

    itemId: "text-1",

    sequence: ["fadeIn", "slideInRight", "pulseAnimationLoop"]

  }

});
```

--------------------------------

### Initialize React Video Editor with State and Timeline

Source: https://designcombo.dev/framework/getting-started/installation

This snippet demonstrates a custom React hook `useVideoEditor` for initializing and managing a video editor. It sets up `StateManager` and `Timeline` instances, handles canvas initialization, and provides cleanup functions. The `VideoEditor` component utilizes this hook to render a canvas and a button to add text.

```typescript
import React, { useEffect, useRef } from 'react';

import StateManager from '@designcombo/state';

import Timeline from '@designcombo/timeline';

import { dispatch } from '@designcombo/events';



// Custom hook for video editor

function useVideoEditor() {

  const stateManagerRef = useRef<StateManager>();

  const timelineRef = useRef<Timeline>();



  const initializeEditor = (canvas: HTMLCanvasElement) => {

    // Initialize state manager

    stateManagerRef.current = new StateManager({

      size: { width: 1920, height: 1080 },

      fps: 30

    }, {

      cors: {

        audio: true,

        video: true,

        image: true

      },

      acceptsMap: {

        main: ['video', 'image'],

        text: ['text', 'caption'],

        audio: ['audio']

      }

    });



    // Initialize timeline

    timelineRef.current = new Timeline(canvas, {

      scale: { unit: 300, zoom: 1/300, segments: 5, index: 7 },

      duration: 10000,

      state: stateManagerRef.current,

      itemTypes: ['text', 'video', 'audio', 'image'],

      acceptsMap: {

        main: ['video', 'image'],

        text: ['text', 'caption'],

        audio: ['audio']

      }

    });



    return { stateManager: stateManagerRef.current, timeline: timelineRef.current };

  };



  const cleanup = () => {

    timelineRef.current?.purge();

    stateManagerRef.current?.purge();

  };



  return { initializeEditor, cleanup };

}



// Video Editor Component

function VideoEditor() {

  const canvasRef = useRef<HTMLCanvasElement>(null);

  const { initializeEditor, cleanup } = useVideoEditor();



  useEffect(() => {

    if (!canvasRef.current) return;



    const { stateManager } = initializeEditor(canvasRef.current);



    // Subscribe to state changes

    const subscription = stateManager.subscribeToActiveIds(({ activeIds }) => {

      console.log('Active items:', activeIds);

    });



    return () => {

      subscription.unsubscribe();

      cleanup();

    };

  }, [initializeEditor, cleanup]);



  const addText = () => {

    dispatch('add:text', {

      payload: {

        name: 'Hello World',

        details: {

          text: 'Hello World',

          fontSize: 48,

          fontFamily: 'Arial',

          color: '#ffffff'

        }

      }

    });

  };



  return (

    <div>

      <button onClick={addText}>Add Text</button>

      <canvas ref={canvasRef} width={1200} height={400} />

    </div>

  );

}



export default VideoEditor;

```

--------------------------------

### Configure State Manager for Design Combo

Source: https://designcombo.dev/framework/getting-started/installation

This code snippet shows how to instantiate and configure the `StateManager` for the Design Combo framework. It defines the canvas size, frames per second, and accepted media types for different layers (main, text, audio).

```javascript
const stateManager = new StateManager({

  size: { width: 1920, height: 1080 },

  fps: 30

}, {

  cors: {

    audio: true,

    video: true,

    image: true

  },

  acceptsMap: {

    main: ['video', 'image'],

    text: ['text', 'caption'],

    audio: ['audio']

  }

});
```

--------------------------------

### Perform Bulk Operations

Source: https://designcombo.dev/framework/getting-started/quick-start

Shows how to perform multiple operations in a single transaction using the `EDIT_BULK` action, including adding text and images.

```JavaScript
import { EDIT_BULK } from '@designcombo/state';

// Perform multiple operations in a single transaction
dispatch(EDIT_BULK, {
  payload: {
    actions: [
      {
        type: ADD_TEXT,
        payload: { text: "First item" }
      },
      {
        type: ADD_IMAGE,
        payload: { src: "image.jpg" }
      }
    ]
  }
});
```

--------------------------------

### Resize Design Canvas

Source: https://designcombo.dev/framework/getting-started/quick-start

Illustrates how to resize the design canvas using the `DESIGN_RESIZE` action, specifying the new width and height.

```JavaScript
import { DESIGN_RESIZE } from '@designcombo/state';

// Resize the design canvas
dispatch(DESIGN_RESIZE, {
  payload: {
    width: 1920,
    height: 1080
  }
});
```

--------------------------------

### Create Custom Timeline Controls

Source: https://designcombo.dev/framework/development/customization

Provides an example of a custom timeline control component that allows users to play, pause, and stop the timeline.

```JavaScript
// Custom timeline control
function CustomTimelineControl({ timeline }) {
  const [isPlaying, setIsPlaying] = useState(false);
  const handlePlayPause = () => {
    if (isPlaying) {
      timeline.pause();
    } else {
      timeline.play();
    }
    setIsPlaying(!isPlaying);
  };
  return (
    <div className="custom-timeline-controls">
      <button onClick={handlePlayPause}>
        {isPlaying ? "Pause" : "Play"}
      </button>
      <button onClick={() => timeline.stop()}>
        Stop
      </button>
    </div>
  );
}
```

--------------------------------

### Export and Import Design State

Source: https://designcombo.dev/framework/getting-started/quick-start

Shows how to export the complete design state using `exportState` and import a design state using `importState`.

```JavaScript
// Export complete design
const designData = stateManager.exportState();

// Import design
stateManager.importState(designData);
```

--------------------------------

### Handle Resize Start Event

Source: https://designcombo.dev/framework/development/api-reference

Sets a callback function to be executed when a resize operation starts on a timeline item. It receives the item and the resize event.

```JavaScript
onResizeStart(callback: (item: ITrackItem, event: ResizeEvent) => void): void
```

--------------------------------

### Add Audio Visualizations

Source: https://designcombo.dev/framework/getting-started/quick-start

Shows how to add radial and linear audio visualizations to specific tracks using `ADD_RADIAL_AUDIO_BARS` and `ADD_LINEAL_AUDIO_BARS` actions, including providing audio data and targeting a track index.

```JavaScript
import { ADD_RADIAL_AUDIO_BARS, ADD_LINEAL_AUDIO_BARS } from '@designcombo/state';

// Add radial audio visualization
dispatch(ADD_RADIAL_AUDIO_BARS, {
  payload: {
    audioData: [0.1, 0.3, 0.5, 0.7, 0.9, 0.8, 0.6, 0.4]
  },
  options: {
    targetTrackIndex: 4
  }
});

// Add linear audio visualization
dispatch(ADD_LINEAL_AUDIO_BARS, {
  payload: {
    audioData: [0.2, 0.4, 0.6, 0.8, 0.7, 0.5, 0.3, 0.1]
  },
  options: {
    targetTrackIndex: 5
  }
});
```

--------------------------------

### Load Design State

Source: https://designcombo.dev/framework/getting-started/quick-start

Demonstrates how to load a complete design into the state using the `DESIGN_LOAD` action. This includes setting properties like FPS, tracks, size, and various maps for track items and transitions.

```JavaScript
import { DESIGN_LOAD } from '@designcombo/state';

// Load a complete design
dispatch(DESIGN_LOAD, {
  payload: {
    fps: 30,
    tracks: [...],
    size: { width: 1920, height: 1080 },
    trackItemIds: [...],
    trackItemsMap: {...},
    transitionIds: [...],
    transitionsMap: {...}
  }
});
```

--------------------------------

### Example ADD_TEXT Event Dispatch

Source: https://designcombo.dev/framework/core-concepts/state-management

Provides a complete example of dispatching the ADD_TEXT event with specific payload properties like text content, font size, color, font family, text alignment, and options for target track and selection.

```javascript
dispatch(ADD_TEXT, {

  payload: {

    text: "Hello World",

    fontSize: 24,

    color: "#000000",

    fontFamily: "Arial",

    textAlign: "center"

  },

  options: {

    targetTrackIndex: 0,

    isSelected: true

  }

});
```

--------------------------------

### Add Progress Elements

Source: https://designcombo.dev/framework/getting-started/quick-start

Demonstrates adding a progress bar and a progress frame to a target track using `ADD_PROGRESS_BAR` and `ADD_PROGRESS_FRAME` actions, specifying the progress value.

```JavaScript
import { ADD_PROGRESS_BAR, ADD_PROGRESS_FRAME } from '@designcombo/state';

// Add progress bar
dispatch(ADD_PROGRESS_BAR, {
  payload: {
    progress: 0.75
  },
  options: {
    targetTrackIndex: 6
  }
});

// Add progress frame
dispatch(ADD_PROGRESS_FRAME, {
  payload: {
    progress: 0.5
  },
  options: {
    targetTrackIndex: 7
  }
});
```

--------------------------------

### Register and Use Custom Transition

Source: https://designcombo.dev/framework/development/customization

Demonstrates how to register a custom transition with a rendering function, default properties, and validation, and then how to use it in the timeline.

```TypeScript
// Register custom transition
timeline.registerTransition("custom", {
  // Transition rendering function
  render: (fromItem: ITrackItem, toItem: ITrackItem, progress: number, canvas: HTMLCanvasElement) => {
    const ctx = canvas.getContext("2d");
    // Custom transition logic
    const wave = Math.sin(progress * Math.PI * 4) * 20;
    // Render from item with fade out
    ctx.globalAlpha = 1 - progress;
    renderItem(fromItem, ctx);
    // Render to item with wave effect
    ctx.globalAlpha = progress;
    ctx.save();
    ctx.translate(wave, 0);
    renderItem(toItem, ctx);
    ctx.restore();
  },
  // Default properties
  defaults: {
    duration: 1500,
    easing: "easeInOut"
  },
  // Validation
  validate: (transition: ITransition) => {
    // Custom validation logic
    return true;
  }
});
// Use custom transition
dispatch("add:transition", {
  payload: {
    type: "custom",
    fromItemId: "item-1",
    toItemId: "item-2",
    duration: 2000
  }
});
```

--------------------------------

### Timeline play Method

Source: https://designcombo.dev/framework/development/api-reference

Starts the playback of the timeline.

```TypeScript
play(): void
```

--------------------------------

### Add Audio Element to Timeline

Source: https://designcombo.dev/framework/getting-started/quick-start

Demonstrates how to add an audio element to the DesignCombo video editor timeline using the `ADD_AUDIO` action. This involves providing the audio source URL and its duration.

```javascript
import { ADD_AUDIO } from '@designcombo/state';



// Add audio

dispatch(ADD_AUDIO, {

  payload: {

    src: 'https://example.com/audio.mp3',

    duration: 5000

  },

  options: {

    targetTrackIndex: 3,

    isSelected: false

  }

});

```

--------------------------------

### Handle Drag Start Event

Source: https://designcombo.dev/framework/development/api-reference

Sets a callback function to be executed when a drag operation starts on a timeline item. It receives the item and the drag event.

```JavaScript
onDragStart(callback: (item: ITrackItem, event: DragEvent) => void): void
```

--------------------------------

### Implement Custom Canvas Renderer

Source: https://designcombo.dev/framework/development/customization

Details how to create a custom canvas renderer class with methods for rendering items and applying custom visual effects.

```TypeScript
// Custom canvas renderer
class CustomRenderer {
  constructor(canvas: HTMLCanvasElement) {
    this.canvas = canvas;
    this.ctx = canvas.getContext("2d");
  }
  // Custom rendering method
  renderItem(item: ITrackItem, time: number) {
    const { x, y, width, height } = item;
    // Custom rendering logic
    this.ctx.save();
    // Apply custom effects
    this.applyCustomEffects(item, time);
    // Render item
    this.renderItemContent(item);
    this.ctx.restore();
  }
  applyCustomEffects(item: ITrackItem, time: number) {
    // Custom visual effects
    const glow = Math.sin(time * 0.001) * 0.5 + 0.5;
    this.ctx.shadowColor = `rgba(255, 255, 255, ${glow})`;
    this.ctx.shadowBlur = 20;
  }
  renderItemContent(item: ITrackItem) {
    // Render item content based on type
    switch (item.type) {
      case "text":
        this.renderText(item);
        break;
      case "image":
        this.renderImage(item);
        break;
      case "custom":
        this.renderCustom(item);
        break;
    }
  }
}
// Use custom renderer
timeline.setCustomRenderer(new CustomRenderer(canvas));
```

--------------------------------

### Select Multiple Elements on Timeline

Source: https://designcombo.dev/framework/getting-started/quick-start

Shows how to select multiple elements on the DesignCombo video editor timeline by their IDs using the `LAYER_SELECT` action. This is useful for batch operations.

```javascript
import { LAYER_SELECT } from '@designcombo/state';



// Select elements by ID

dispatch(LAYER_SELECT, {

  payload: {

    trackItemIds: ['element-1', 'element-2', 'element-3']

  }

});

```

--------------------------------

### Add Video Element to Timeline

Source: https://designcombo.dev/framework/getting-started/quick-start

Illustrates how to add a video element to the DesignCombo video editor timeline using the `ADD_VIDEO` action. This includes specifying the video source URL and its duration.

```javascript
import { ADD_VIDEO } from '@designcombo/state';



// Add video

dispatch(ADD_VIDEO, {

  payload: {

    src: 'https://example.com/video.mp4',

    duration: 10000

  },

  options: {

    targetTrackIndex: 2,

    scaleMode: 'fit',

    isSelected: true

  }

});

```

--------------------------------

### Complete Workflow Example: Add Elements, Select, Edit, Undo

Source: https://designcombo.dev/framework/core-concepts/state-management

Demonstrates a complete workflow using the DesignCombo framework, including adding text and image elements, selecting multiple items, editing properties, and undoing an action.

```javascript
import { dispatch } from "@designcombo/events";

import {

  ADD_TEXT,

  ADD_IMAGE,

  LAYER_SELECT,

  EDIT_OBJECT,

  HISTORY_UNDO

} from "@designcombo/state";



// 1. Add text element

dispatch(ADD_TEXT, {

  payload: {

    text: "Welcome to DesignCombo",

    fontSize: 48,

    color: "#ffffff",

    fontFamily: "Arial",

    textAlign: "center"

  },

  options: {

    targetTrackIndex: 0,

    isSelected: true

  }

});



// 2. Add background image

dispatch(ADD_IMAGE, {

  payload: {

    src: "https://example.com/background.jpg",

    alt: "Background"

  },

  options: {

    targetTrackIndex: 1,

    scaleMode: "fill"

  }

});



// 3. Select multiple items

dispatch(LAYER_SELECT, {

  payload: {

    trackItemIds: ["text-1", "image-1"]

  }

});



// 4. Edit text properties

dispatch(EDIT_OBJECT, {

  payload: {

    "text-1": {

      details: {

        fontSize: 64,

        color: "#ff0000"

      }

    }

  }

});



// 5. Undo last action

dispatch(HISTORY_UNDO, {});
```

--------------------------------

### JavaScript: Add Scale Animations

Source: https://designcombo.dev/framework/features/animations

Provides examples for applying scale animations to elements. Shows how to scale an element up and scale both dimensions simultaneously.

```javascript
// Scale up element

dispatch(ADD_ANIMATION, {

  payload: {

    itemId: "text-item",

    animation: {

      property: "scaleX",

      from: 1,

      to: 2,

      durationInFrames: 45,

      ease: "easeOut"

    }

  }

});



// Scale both dimensions

dispatch(ADD_ANIMATION, {

  payload: {

    itemId: "image-item",

    animation: {

      property: "scale",

      from: 1,

      to: 1.5,

      durationInFrames: 60,

      ease: "easeInOut"

    }

  }

});
```

--------------------------------

### Subscribe to State Changes

Source: https://designcombo.dev/framework/getting-started/quick-start

Demonstrates how to subscribe to various state changes within the state manager, including active element IDs, track updates, track item changes, and timing updates. It also shows how to unsubscribe from these changes.

```JavaScript
const subscription = stateManager.subscribeToActiveIds(({ activeIds }) => {
  console.log('Active elements:', activeIds);
});

const trackSubscription = stateManager.subscribeToTracks(({ tracks, changedTracks }) => {
  console.log('Tracks updated:', tracks);
  console.log('Changed tracks:', changedTracks);
});

const itemSubscription = stateManager.subscribeToUpdateTrackItem(({ trackItemsMap }) => {
  console.log('Track items updated:', trackItemsMap);
});

const timingSubscription = stateManager.subscribeToUpdateTrackItemTiming(
  ({ trackItemsMap, changedTrimIds, changedDisplayIds }) => {
    console.log('Timing updated:', { changedTrimIds, changedDisplayIds });
  }
);

// Cleanup subscriptions
subscription.unsubscribe();
trackSubscription.unsubscribe();
itemSubscription.unsubscribe();
timingSubscription.unsubscribe();
```

--------------------------------

### Add Wipe Transitions

Source: https://designcombo.dev/framework/features/transitions

Illustrates how to apply wipe transitions, where one item is revealed by wiping across the screen. Examples cover wiping up, down, left, and right.

```typescript
// Wipe up
dispatch(ADD_TRANSITION, {
  payload: {
    fromId: "item-1",
    toId: "item-2",
    trackId: "track-1",
    kind: "wipe",
    duration: 1500,
    type: "transition",
    direction: "from-bottom"
  }
});

// Wipe down
dispatch(ADD_TRANSITION, {
  payload: {
    fromId: "item-1",
    toId: "item-2",
    trackId: "track-1",
    kind: "wipe",
    duration: 1500,
    type: "transition",
    direction: "from-top"
  }
});

// Wipe left
dispatch(ADD_TRANSITION, {
  payload: {
    fromId: "item-1",
    toId: "item-2",
    trackId: "track-1",
    kind: "wipe",
    duration: 1500,
    type: "transition",
    direction: "from-right"
  }
});

// Wipe right
dispatch(ADD_TRANSITION, {
  payload: {
    fromId: "item-1",
    toId: "item-2",
    trackId: "track-1",
    kind: "wipe",
    duration: 1500,
    type: "transition",
    direction: "from-left"
  }
});
```

--------------------------------

### Register and Apply Custom Effect

Source: https://designcombo.dev/framework/development/customization

Explains how to register a custom visual effect, such as a glow, and then apply it to a specific timeline item.

```TypeScript
// Register custom effect
timeline.registerEffect("glow", {
  apply: (ctx: CanvasRenderingContext2D, item: ITrackItem, time: number) => {
    const glow = Math.sin(time * 0.001) * 0.5 + 0.5;
    ctx.shadowColor = `rgba(255, 255, 255, ${glow})`;
    ctx.shadowBlur = 20;
  }
});
// Apply custom effect to item
dispatch("add:effect", {
  payload: {
    itemId: "item-id",
    effect: "glow"
  }
});
```

--------------------------------

### Register and Dispatch Custom Event

Source: https://designcombo.dev/framework/development/customization

Demonstrates how to register a custom event handler to process specific events and dispatch custom events with associated data.

```JavaScript
// Register custom event handler
registerHandler("custom:event", (event) => {
  // Custom event processing logic
  console.log("Custom event received:", event);
  // Process custom event
  const { customData } = event.payload;
  // Update state based on custom event
  stateManager.updateState({
    customProperty: customData.value
  });
});
// Dispatch custom event
dispatch("custom:event", {
  payload: {
    customData: {
      value: "custom value",
      timestamp: Date.now()
    }
  }
});
```

--------------------------------

### Create and Register Custom UI Control

Source: https://designcombo.dev/framework/development/customization

Shows how to create a custom UI control component using React and register it with the timeline for use in the interface.

```JavaScript
// Custom control component
function CustomControl({ item, onUpdate }) {
  const [value, setValue] = useState(item.details.customValue);
  const handleChange = (newValue) => {
    setValue(newValue);
    onUpdate({
      ...item.details,
      customValue: newValue
    });
  };
  return (
    <div className="custom-control">
      <label>Custom Value:</label>
      <input
        type="range"
        min="0"
        max="100"
        value={value}
        onChange={(e) => handleChange(parseInt(e.target.value))}
      />
      <span>{value}</span>
    </div>
  );
}
// Register custom control
timeline.registerControl("custom", CustomControl);
```

--------------------------------

### Undo and Redo Actions in Timeline

Source: https://designcombo.dev/framework/getting-started/quick-start

Shows how to perform undo and redo operations on the DesignCombo video editor timeline using the `HISTORY_UNDO` and `HISTORY_REDO` actions. This allows users to revert or reapply recent changes.

```javascript
import { HISTORY_UNDO, HISTORY_REDO } from '@designcombo/state';



// Undo last action

dispatch(HISTORY_UNDO, {});



// Redo last undone action

dispatch(HISTORY_REDO, {});

```

--------------------------------

### Video Item Timing Example

Source: https://designcombo.dev/framework/features/track-items

Illustrates how to set 'trim' and 'display' timing properties for a video item, controlling both media playback range and timeline visibility.

```JavaScript
// Example: Video that appears at 2 seconds, plays content from 1-9 seconds

const videoItem = {

  trim: {

    from: 1000,    // Play content starting at 1 second

    to: 9000       // Play content until 9 seconds

  },

  display: {

    from: 2000,    // Show in timeline starting at 2 seconds

    to: 8000       // Show in timeline until 8 seconds

  }

};
```

--------------------------------

### Add Image Element to Timeline

Source: https://designcombo.dev/framework/getting-started/quick-start

Shows how to add an image element to the DesignCombo video editor timeline using the `ADD_IMAGE` action. This involves providing the image source URL, alt text, dimensions, and placement options.

```javascript
import { ADD_IMAGE } from '@designcombo/state';



// Add image

dispatch(ADD_IMAGE, {

  payload: {

    src: 'https://example.com/image.jpg',

    alt: 'Sample image',

    width: 400,

    height: 300

  },

  options: {

    targetTrackIndex: 1,

    scaleMode: 'fit',

    isSelected: true

  }

});

```

--------------------------------

### Create and Use Custom Timeline Plugins

Source: https://designcombo.dev/framework/development/customization

This code defines a `CustomPlugin` class that can be instantiated with a timeline instance. It includes methods for initialization, registering custom item and animation types, and setting up event listeners for plugin-specific events.

```javascript
// Custom plugin
class CustomPlugin {
  constructor(timeline: Timeline, options: any) {
    this.timeline = timeline;
    this.options = options;
    this.init();
  }
  init() {
    // Initialize plugin
    this.registerCustomFeatures();
    this.setupEventListeners();
  }
  registerCustomFeatures() {
    // Register custom features
    this.timeline.registerItemType("plugin-item", {
      // ... custom item type
    });
    this.timeline.registerAnimationType("plugin-animation", {
      // ... custom animation type
    });
  }
  setupEventListeners() {
    // Setup custom event listeners
    subscribe("plugin:event", (event) => {
      this.handlePluginEvent(event);
    });
  }
  handlePluginEvent(event: any) {
    // Handle plugin-specific events
    console.log("Plugin event:", event);
  }
  destroy() {
    // Cleanup plugin
    // Remove event listeners, etc.
  }
}
// Use custom plugin
const plugin = new CustomPlugin(timeline, {
  customOption: "value"
});
```

--------------------------------

### Add Text Element to Timeline

Source: https://designcombo.dev/framework/getting-started/quick-start

Demonstrates how to add a text element to the DesignCombo video editor timeline using the `ADD_TEXT` action. This includes specifying text content, font properties, color, and its position on the timeline.

```javascript
import { ADD_TEXT } from '@designcombo/state';



// Add text

dispatch(ADD_TEXT, {

  payload: {

    text: 'Hello World',

    fontSize: 48,

    fontFamily: 'Arial',

    color: '#ffffff',

    textAlign: 'center'

  },

  options: {

    targetTrackIndex: 0,

    isSelected: true

  }

});

```

--------------------------------

### Dispatch DESIGN_RESIZE Action

Source: https://designcombo.dev/framework/development/resizing-scene

Demonstrates how to dispatch the DESIGN_RESIZE action with payload for canvas resizing. It includes type definitions for the payload and examples for different aspect ratios.

```typescript
interface ResizeValue {
  width: number; // Canvas width in pixels
  height: number; // Canvas height in pixels
  name: string; // Aspect ratio identifier
}
```

```javascript
import { dispatch } from "@designcombo/events";
import { DESIGN_RESIZE } from "@designcombo/state";

const handleResize = (options: ResizeValue) => {
  dispatch(DESIGN_RESIZE, {
    payload: {
      ...options,
    },
  });
};
```

```javascript
// Resize to 16:9 landscape format
dispatch(DESIGN_RESIZE, {
  payload: {
    width: 1920,
    height: 1080,
    name: "16:9",
  },
});

// Resize to 9:16 portrait format
dispatch(DESIGN_RESIZE, {
  payload: {
    width: 1080,
    height: 1920,
    name: "9:16",
  },
});
```

--------------------------------

### Add Slide Transitions

Source: https://designcombo.dev/framework/features/transitions

Provides examples for implementing various slide transitions, including sliding up, down, left, and right. These transitions involve items moving into the frame from different directions.

```typescript
// Slide up
dispatch(ADD_TRANSITION, {
  payload: {
    fromId: "item-1",
    toId: "item-2",
    trackId: "track-1",
    kind: "slide",
    duration: 1500,
    type: "transition",
    direction: "from-bottom"
  }
});

// Slide down
dispatch(ADD_TRANSITION, {
  payload: {
    fromId: "item-1",
    toId: "item-2",
    trackId: "track-1",
    kind: "slide",
    duration: 1500,
    type: "transition",
    direction: "from-top"
  }
});

// Slide left
dispatch(ADD_TRANSITION, {
  payload: {
    fromId: "item-1",
    toId: "item-2",
    trackId: "track-1",
    kind: "slide",
    duration: 1500,
    type: "transition",
    direction: "from-right"
  }
});

// Slide right
dispatch(ADD_TRANSITION, {
  payload: {
    fromId: "item-1",
    toId: "item-2",
    trackId: "track-1",
    kind: "slide",
    duration: 1500,
    type: "transition",
    direction: "from-left"
  }
});
```

--------------------------------

### Update Element Properties on Timeline

Source: https://designcombo.dev/framework/getting-started/quick-start

Demonstrates how to update properties of existing elements on the DesignCombo video editor timeline using the `EDIT_OBJECT` action. This includes updating text content, font size, color, and display timing.

```javascript
import { EDIT_OBJECT } from '@designcombo/state';



// Update text content

dispatch(EDIT_OBJECT, {

  payload: {

    'text-element-id': {

      details: {

        text: 'Updated text content',

        fontSize: 64,

        color: '#ff0000'

      }

    }

  }

});



// Update display timing

dispatch(EDIT_OBJECT, {

  payload: {

    'element-id': {

      display: {

        from: 2000,

        to: 8000

      }

    }

  }

});

```

--------------------------------

### Add Multiple Items using ADD_ITEMS Action

Source: https://designcombo.dev/framework/development/adding-items

Provides an example of using the generic ADD_ITEMS action to add multiple items (text and image) to different tracks within the scene, suitable for complex scenarios.

```javascript
dispatch(ADD_ITEMS, {

  payload: {

    trackItems: [

      {

        id: generateId(),

        type: "text",

        display: { from: 0, to: 5000 },

        details: {

          text: "First Text",

          fontSize: 48,

          color: "#ff0000",

        },

        metadata: {}, 

      },

      {

        id: generateId(),

        type: "image",

        display: { from: 2000, to: 7000 },

        details: {

          src: "https://example.com/image.jpg",

        },

        metadata: {}, 

      },

    ],

    tracks: [

      {

        id: generateId(),

        items: ["text-id-1", "image-id-2"],

        type: "main",

      },

    ],

  },

});
```

--------------------------------

### JavaScript: Add Position Animations

Source: https://designcombo.dev/framework/features/animations

Demonstrates how to add position animations to elements using the SDK. Includes examples for moving an element horizontally and animating along a path.

```javascript
// Move element from left to right

dispatch(ADD_ANIMATION, {

  payload: {

    itemId: "text-item",

    animation: {

      property: "x",

      from: 0,

      to: 400,

      durationInFrames: 60,

      ease: "easeInOut"

    }

  }

});



// Move element in a path

dispatch(ADD_ANIMATION, {

  payload: {

    itemId: "image-item",

    animation: {

      property: "position",

      from: 0,

      to: 1,

      durationInFrames: 90,

      ease: "easeInOut"

    }

  }

});
```

--------------------------------

### Add Custom Metadata with Middleware

Source: https://designcombo.dev/framework/development/customization

This middleware intercepts events, logs their processing, adds custom metadata like a timestamp and a flag, and then continues the event processing. It demonstrates pre- and post-processing capabilities.

```javascript
useMiddleware((event, next) => {
  // Pre-processing
  console.log("Processing event:", event.type);
  // Add custom metadata
  event.metadata = {
    ...event.metadata,
    processedAt: Date.now(),
    customFlag: true
  };
  // Continue processing
  const result = next(event);
  // Post-processing
  console.log("Event processed:", event.type);
  return result;
});
```

--------------------------------

### Configure Custom Performance Settings

Source: https://designcombo.dev/framework/development/customization

This code snippet configures various performance-related settings for the timeline, including rendering options like requestAnimationFrame and caching, animation limits, and transition optimizations.

```javascript
// Custom performance configuration
timeline.setPerformanceConfig({
  rendering: {
    useRequestAnimationFrame: true,
    throttleUpdates: true,
    updateInterval: 16, // 60fps
    enableCaching: true,
    cacheSize: 100
  },
  animations: {
    maxConcurrent: 10,
    maxPerItem: 5,
    enableOptimization: true
  },
  transitions: {
    useHardwareAcceleration: true,
    preloadTransitions: true,
    maxConcurrent: 5
  }
});
```

--------------------------------

### Change Timeline Zoom Level

Source: https://designcombo.dev/framework/getting-started/quick-start

Demonstrates how to adjust the zoom level and scale of the timeline in the DesignCombo video editor using the `TIMELINE_SCALE_CHANGED` action. This allows users to control the granularity of the timeline view.

```javascript
import { TIMELINE_SCALE_CHANGED } from '@designcombo/state';



// Change timeline zoom level

dispatch(TIMELINE_SCALE_CHANGED, {

  payload: {

    scale: {

      index: 7,

      unit: 300,

      zoom: 1 / 300,

      segments: 5

    }

  }

});

```

--------------------------------

### JavaScript: Add Color Animations

Source: https://designcombo.dev/framework/features/animations

Provides examples for animating element colors, including text color and background fill color. Shows how to change color properties over time.

```javascript
// Change text color

dispatch(ADD_ANIMATION, {

  payload: {

    itemId: "text-item",

    animation: {

      property: "color",

      from: 0,

      to: 1,

      durationInFrames: 60,

      ease: "easeInOut"

    }

  }

});



// Change background color

dispatch(ADD_ANIMATION, {

  payload: {

    itemId: "shape-item",

    animation: {

      property: "fill",

      from: 0,

      to: 1,

      durationInFrames: 90,

      ease: "easeInOut"

    }

  }

});

      easing: "easeInOut"

    }

  }

});
```

--------------------------------

### Register Custom Animation Type - DesignCombo SDK

Source: https://designcombo.dev/framework/development/customization

Defines and registers a new custom animation type for the DesignCombo Video Editor SDK. Includes animation logic, validation, and default properties.

```TypeScript
// Define custom animation
interface CustomAnimation extends IAnimation {
  customProperty: string;
  customEasing: (t: number) => number;
}

// Register custom animation type
timeline.registerAnimationType("custom", {
  // Animation function
  animate: (animation: CustomAnimation, progress: number) => {
    const { startValue, endValue, customEasing } = animation;
    const easedProgress = customEasing(progress);
    
    // Custom animation logic
    return startValue + (endValue - startValue) * easedProgress;
  },
  
  // Validation
  validate: (animation: CustomAnimation) => {
    if (!animation.customProperty) {
      throw new Error("Custom property is required");
    }
    return true;
  },
  
  // Default properties
  defaults: {
    duration: 1000,
    easing: "easeInOut",
    customProperty: "default"
  }
});

// Use custom animation
dispatch("add:animation", {
  payload: {
    itemId: "item-id",
    animation: {
      type: "custom",
      property: "customValue",
      startValue: 0,
      endValue: 100,
      customProperty: "special",
      customEasing: (t) => t * t * (3 - 2 * t)
    }
  }
});
```