After Getting the API, you can call the related methods:

get/setAppState

Control the state of the entire canvas application, such as switching between light and dark themes at runtime:

api.setAppState({
    theme: ThemeMode.LIGHT,
});

Or hide taskbar on the right side:

api.setAppState({
    taskbarVisible: false,
});

The complete state is as follows:

export interface AppState {
    theme: Theme;
    themeMode: ThemeMode;
    checkboardStyle: CheckboardStyle;
    cameraZoom: number;
    cameraX: number;
    cameraY: number;
    cameraRotation: number;
    contextBarVisible: boolean;
    contextMenuVisible: boolean;
    topbarVisible: boolean;
    penbarVisible: boolean;
    penbarAll: Pen[];
    penbarSelected: Pen;
    penbarDrawRect: Partial<StrokeAttributes & FillAttributes>;
    penbarDrawEllipse: Partial<StrokeAttributes & FillAttributes>;
    penbarDrawLine: Partial<StrokeAttributes>;
    penbarDrawArrow: Partial<StrokeAttributes & MarkerAttributes>;
    penbarDrawRoughRect: Partial<
        RoughAttributes & StrokeAttributes & FillAttributes
    >;
    penbarDrawRoughEllipse: Partial<
        RoughAttributes & StrokeAttributes & FillAttributes
    >;
    penbarPencil: Partial<StrokeAttributes>;
    penbarText: Partial<
        TextSerializedNode & {
            fontFamilies: string[];
        }
    >;
    taskbarVisible: boolean;
    taskbarAll: Task[];
    taskbarSelected: Task[];
    taskbarChatMessages: Message[];
    layersSelected: SerializedNode['id'][];
    layersHighlighted: SerializedNode['id'][];
    propertiesOpened: SerializedNode['id'][];
    /**
     * Allow rotate in transformer
     */
    rotateEnabled: boolean;
    /**
     * Allow flip in transformer
     */
    flipEnabled: boolean;

    /**
     * Allow snap to pixel grid
     */
    snapToPixelGridEnabled: boolean;
    snapToPixelGridSize: number;

    /**
     * Allow snap to objects
     */
    snapToObjectsEnabled: boolean;
}

get/setNodes

Get or set the shapes in the canvas.

api.setNodes(nodes);

getNodeById

api.getNodeById('1'); // { id: '1', ... }

getCanvas

Obtain the Canvas Entity, after which you can retrieve the associated set of Components:

const entity = api.getCanvas();

For example, to obtain the DOM element corresponding to the canvas:

const { element } = entity.read(Canvas); // HTMLCanvasElement | OffscreenCanvas

Below we introduce these components.

Canvas

• element DOM element of canvas HTMLCanvasElement | OffscreenCanvas
• htmlLayer HTML container element HTMLDivElement
• width
• height
• renderer renderer, the available values are 'webgl' | 'webgpu', default to 'webgl'
• shaderCompilerPath Convert GLSL to WGSL
• devicePixelRatio Default to 1, see: devicePixelRatio

Theme

See: Lesson 7 - Theme

entity.read(Theme).mode; // ThemeMode.LIGHT

• mode ThemeMode.LIGHT | ThemeMode.DARK
• colors

{
    [ThemeMode.LIGHT]: {
        background: '#fbfbfb',
        grid: '#dedede',
        selectionBrushFill: '#dedede',
        selectionBrushStroke: '#dedede',
        swatches: [],
    },
    [ThemeMode.DARK]: {
        background: '#121212',
        grid: '#242424',
        selectionBrushFill: '#242424',
        selectionBrushStroke: '#242424',
        swatches: [],
    },
}

Grid

Draw a grid as the background on the canvas. For details, see: Lesson 5 - Draw grid

enum CheckboardStyle {
    NONE = 'none',
    GRID = 'grid',
    DOTS = 'dots',
}

checkboardStyle 默认值为 CheckboardStyle.GRID

entity.read(Grid).checkboardStyle; // CheckboardStyle.GRID

Cursor

see: CSS cursor

entity.read(Cursor).value; // 'default'

GPUResource

Save a series of GPU-related resources

• device see: @antv/g-device-api
• swapChain see: Lesson 1 - SwapChain
• renderTarget
• depthRenderTarget
• renderCache
• texturePool

Screenshot

see: Export image

const { dataURL } = entity.read(Screenshot); // 'data:'

getHtmlLayer

Retrieve the HTML content container. For details, see: Lesson 29 - HTML container

api.getHtmlLayer(); // HTMLDivElement
// equivalent to
api.getCanvas().read(Canvas).htmlLayer;

client2Viewport

Convert points in the viewport coordinate system to points in the client coordinate system.

client2Viewport({ x, y }: IPointData): IPointData

viewport2Client

Convert points in the viewport coordinate system to points in the client coordinate system.

viewport2Client({ x, y }: IPointData): IPointData