import { CSS, Group, Circle } from '@antv/g';
import { Layout as BlockFlowLayout } from '@antv/g-layout-blockflow';
import { Layout as FlexLayout } from '@antv/g-layout-flex';
import { Layout as MasonryLayout } from '@antv/g-layout-masonry';
import { Layout as GridLayout } from '@antv/g-layout-grid';

// 注册布局算法
CSS.registerLayout('block', BlockFlowLayout);
CSS.registerLayout('flex', FlexLayout);
CSS.registerLayout('masonry', MasonryLayout);
CSS.registerLayout('grid', GridLayout);

// 使用 BlockFlow 布局
const blockGroup = new Group({
    style: {
        display: 'block', // 通过 display 属性使用
        width: '400px',
        height: '400px',
    },
});
// 容器内元素无需手动定位，由容器负责
blockGroup.appendChild(
    new Circle({
        style: {
            r: 100,
        },
    }),
);
canvas.appendChild(blockGroup);