feat: support size attenuation in annotation plugin

[xiaoiver]

🤔 This is a ...

• New feature
• Bug fix
• Site / Document optimization
• TypeScript definition update
• Refactoring
• Performance improvement
• Code style optimization
• Test Case
• Branch merge
• Other (about what?)

🔗 Related issue link

When using @antv/g-plugin-annotation, we want the size of anchors & lineWidth of selectable UI to keep the fixed size, which means camera's zooming won't affect them.

It's quite similar to sizeAttenuation in Three.js.

💡 Background and solution

Update the following deps:

• @antv/[email protected]
• @antv/[email protected]

Enabling enableSizeAttenuation will affect the selectable UI during initialization. Now the anchors, mask will change their lineWidth or r(Circle point) when camera's zooming changed.

import { runtime } from '@antv/g';

// Now canvas will listen to camera's changed event and modify each shape's `lineWidth` or `size` with `isSizeAttenuation` enabled.
runtime.enableSizeAttenuation = true;

When using drawer tool, just enable isSizeAttenuation when creating relative shape.

annotationPlugin.addEventListener('draw:complete', ({ type, path }) => {
  const circle = new Circle({
    style: {
      r: 10,
      isSizeAttenuation: true, // Enable this option when created.
    }
  });
});

There're some limitations for now:

• When isSizeAttenuation enabled, lineWidth and r(for Circle) can't not be updated manually:

const circle = new Circle({
  style: {
    r: 10,
    isSizeAttenuation: true, // Enable this option when created.
  }
});
circle.style.r = 20; // whoops...

📝 Changelog

Language	Changelog
🇺🇸 English
🇨🇳 Chinese

☑️ Self Check before Merge

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed