Data Class

The element data class file is ElementData.ts

- qrcode
 |- config.ts  # Plugin configuration
 |- ElementData.ts # Element data class
 |- Element.tsx # Preview area component
 |- Options.tsx # Editor area component
 |- index.ts # Default entry
 |- types.ts # TS type definition

Taking the QR code plugin as an example, all element data needs to inherit BaseElement (specifically refer to Project Data):

// Developed based on https://www.npmjs.com/package/qrcodejs2, the configuration parameters of the QR code come from this

interface Params {
  text: string; // QR code content
  size: number; // Size
  colorDark?: string; // Background color
  colorLight?: string; // Color of block area
  correctLevel?: "L" | "M" | "Q" | "H"; // QR code precision
}

export class ElementData extends BaseElement {
  style: ElementStyle; // Position, size, rotation
  animates?: AnimationItem[]; // Animation
  mask?: ElementMask; // Mask
  text: string = ""; // QR code content
  colorDark: string = "#000000"; // Background color
  colorLight: string = "#ffffff"; // Color of block area
  correctLevel: "L" | "M" | "Q" | "H" = "Q";

  constructor(params: Params) {
    const { size, ...other } = params;
    this.style.width = size;
    this.style.height = size;
    // The default position is in the upper left corner, and the element is positioned with reference to the center point. For example, the center coordinates of the canvas are [movieData.width/2, movieData.height/2]
    this.style.x = size / 2;
    this.style.y = size / 2;
    Object.assign(this, other);
  }
}

Using ElementData:

// 1. Build QR code plugin element data
const elementData = new ElementData({
  text: "https://video.h5ds.com",
  colorDark: "#ffffff", // Background color
  colorLight: "#000000", // Color of block area
  correctLevel: "H",
  size: 200,
});

// Set position to center
elementData.style.x = movieData.width / 2;
elementData.style.y = movieData.height / 2;

// 2. Add plugin element to data
movieData.elements.push(elementData);

// 3. Update view
core.update();