Editor Area Component

The editor area is only used in the editor, mainly for modifying data parameters and updating views.

The editor area component is a React hooks component. It should be noted that we provide common UI component libraries, and an editor instance is built into the props. For specific editor built-in parameters and methods, please refer to the relevant documentation of vsdk.editor in the Editor-SDK document.

Commonly used libraries:

Semi.design: https://semi.design/
PixiJS: https://pixijs.com/
Mobx: https://mobx.js.org/
Self-built component library: @h5/videoUI

Just remember two steps: 1. Modify data 2. Update view, let's look at the example below:

tsx

import React from "react";
import { options, observer } from "@sdk/videoEditorSDK.react.es.min.js";
import { TextArea } from "@douyinfe/semi-ui";

const { Align, Opacity, Rotation, Size, Position, Colour, Animation } = options;

export interface IOptionsProps {
  editor: Record<string, any>;
  element: QrcodeElement;
  language: Record<string, any>;
}

function Options(props: IOptionsProps) {
  const { editor, element } = props;
  return (
    <Tabs
      className="optionTabs"
      activeKey={editor.elementOptionType}
      onChange={e => {
        // tab切换
        editor.elementOptionType = e as any;
      }}
    >
      <TabPane tab="基础" itemKey="basic">
        <div className="scroll scrollBox">
          <Align />
          <Position />
          <Size />
          <QrcodeSet />
          <Opacity />
          <Rotation />
        </div>
      </TabPane>
      <TabPane tab="动画" itemKey="animation">
        <Animation />
      </TabPane>
      <TabPane tab="滤镜" itemKey="colour">
        <Colour />
      </TabPane>
    </Tabs>
  );
}

export default observer(Options);

QrcodeSet component:

tsx

import React from 'react';
import { plugin, options, observer } from "@sdk/videoEditorSDK.react.es.min.js";

const { Color, Item } = options;

function QrcodeSet(props: IOptionsProps) {
  const { editor, element } = props;
  // 获取当前操作的元素
  const [, forceUpdate] = useReducer(x => x + 1, 0);
  const elementData = editor.getElementData() as QrcodeElement;
  return (
    <>
      <Item title="二维码内容">
        <TextArea
          showClear
          value={elementData.text}
          onChange={v => {
            elementData.text = v;
            editor.updateMovie();
            forceUpdate();
          }}
          onBlur={() => {
            // 保存操作记录
            editor.record({
              type: 'elements_update',
              desc: '修改二维码内容',
            });
          }}
        />
      </Item>
      <Item title="二维码颜色">
        <Color
          value={elementData.colorDark}
          onChange={(e: any) => {
            // 修改二维码颜色
            elementData.colorDark = `rgba(${e.rgb.r}, ${e.rgb.g}, ${e.rgb.b}, ${e.rgb.a})`;
            forceUpdate();
            editor.updateMovie();
          }}
          onAfterChange={() => {
            // 保存操作记录
            editor.record({
              type: 'elements_update',
              desc: '修改二维码颜色',
            });
          }}
        />
      </Item>
    </>
  );
}
export default observer(QrcodeSet);

Editor Area Component ​

Editor Area Component