feat(brush): support resize and custom

[pearmini]

Brush

支持八个方向的 resize 和自定义对应的 handle。

开始使用

export function penguinsPointBrush(): G2Spec {
  return {
    type: 'point',
    data: {
      type: 'fetch',
      value: 'data/penguins.csv',
    },
    encode: {
      color: 'species',
      x: 'culmen_length_mm',
      y: 'culmen_depth_mm',
    },
    state: {
      inactive: { stroke: 'gray', opacity: 0.5 },
    },
    interaction: {
      brushHighlight: true,
    },
  };

设置样式

八个方向的 handle 的名字分别如下（按照东南西北命名），按照 mask[handleName][styleAttribute] 格式设置对应的属性，也可以通过 maskHandleSize 设置宽度。

export function penguinsPointBrushHandleStyle(): G2Spec {
  return {
    type: 'point',
    data: {
      type: 'fetch',
      value: 'data/penguins.csv',
    },
    encode: {
      color: 'species',
      x: 'culmen_length_mm',
      y: 'culmen_depth_mm',
    },
    state: {
      inactive: { stroke: 'gray', opacity: 0.5 },
    },
    interaction: {
      brushHighlight: {
        maskHandleNFill: 'blue',
        maskHandleEFill: 'red',
        maskHandleSFill: 'green',
        maskHandleWFill: 'yellow',
        maskHandleNWFill: 'black',
        maskHandleNEFill: 'steelblue',
        maskHandleSEFill: 'pink',
        maskHandleSWFill: 'orange',
      },
    },
  };
}

自定义 Handle

可以通过 mask[handleName]Render 指定 handle 的渲染函数，用于渲染自定义的 handle。其中该函数签名如下。

function render(
  g, // 挂载容器
  options, // 样式属性，通过 mask[handleName][styleAttribute] 设置
  document, // 画布 document，用于创建自图形
) {
  // 需要返回创建的图形
}

下面是一个创建 path handle 的例子：

function renderPath(group, options, document) {
  // 创建逻辑
  // 如果是第一次渲染，就创建并且挂在图形
  if (!group.handle) {
    // 通过 document.createElement 去新建图形
    const path = document.createElement('path');
    group.handle = path;
    group.appendChild(group.handle);
  }

  // 更新逻辑
  const { handle } = group;
  const { width, height, ...rest } = options;
  if (width === undefined || height === undefined) return handle;
  handle.attr(rest);

  // 返回对应的 shape
  return handle;
};

function createPathRender(path) {
  return (group, options, document) => {
    if (!group.handle) {
      const path = document.createElement('path');
      group.handle = path;
      group.appendChild(group.handle);
    }
    const { handle } = group;
    const { width, height, ...rest } = options;
    if (width === undefined || height === undefined) return handle;
    handle.style.d = path(width, height);
    handle.attr(rest);
    return handle;
  };
}

export function penguinsPointBrushHandleCustom(): G2Spec {
  return {
    type: 'point',
    data: {
      type: 'fetch',
      value: 'data/penguins.csv',
    },
    encode: {
      color: 'species',
      x: 'culmen_length_mm',
      y: 'culmen_depth_mm',
    },
    state: {
      inactive: { stroke: 'gray', opacity: 0.5 },
    },
    interaction: {
      brushHighlight: {
        maskHandleSize: 30,
        maskHandleNRender: createPathRender(
          (width, height) =>
            `M0,${height / 2}L${width / 2},${-height / 2}L${width},${
              height / 2
            },Z`,
        ),
        maskHandleERender: createPathRender(
          (width, height) =>
            `M${width / 2},0L${(width * 3) / 2},${height / 2}L${
              width / 2
            },${height},Z`,
        ),
        maskHandleSRender: createPathRender(
          (width, height) =>
            `M0,${height / 2}L${width / 2},${(height / 2) * 3}L${width},${
              height / 2
            },Z`,
        ),
        maskHandleWRender: createPathRender(
          (width, height) =>
            `M${width / 2},0L${-width},${height / 2}L${width / 2},${height},Z`,
        ),
        maskHandleNWRender: createPathRender(
          (width, height) =>
            `M0,0L${width},${height / 2}L${width / 2},${height},Z`,
        ),
        maskHandleNERender: createPathRender(
          (width, height) =>
            `M0,${height / 2}L${width},0L${width / 2},${height},Z`,
        ),
        maskHandleSERender: createPathRender(
          (width, height) =>
            `M${width / 2},0L${width},${height}L0,${height / 2},Z`,
        ),
        maskHandleSWRender: createPathRender(
          (width, height) =>
            `M${width / 2},0L${width},${height / 2}L0,${height},Z`,
        ),
        maskHandleNFill: 'blue',
        maskHandleEFill: 'red',
        maskHandleSFill: 'green',
        maskHandleWFill: 'yellow',
        maskHandleNWFill: 'black',
        maskHandleNEFill: 'steelblue',
        maskHandleSEFill: 'pink',
        maskHandleSWFill: 'orange',
      },
    },
  };
}

[accesslint]

There are accessibility issues in these changes.