Overview

FixElementSize is a built-in interaction provided by G6, used to maintain the size of certain elements within nodes unchanged during the zooming process. It enhances visual consistency and operability during zooming. By listening to viewport changes, it automatically scales elements marked as "fixed size" to ensure they maintain a relatively constant display size at different zoom levels. It supports global enablement and also allows control over specific elements or nodes as needed.

Use Cases

This interaction is mainly used for:

• Graphical elements or embedded components (buttons, labels, etc.) that need to maintain a fixed visual size

Online Experience

createGraph(
  {
    data: {
      nodes: [
        { id: 'node1', style: { x: 200, y: 100, labelText: 'node1' } },
        { id: 'node2', style: { x: 360, y: 100, labelText: 'node2' } },
        { id: 'node3', style: { x: 280, y: 220, labelText: 'node3' } },
      ],
      edges: [
        { source: 'node1', target: 'node2' },
        { source: 'node1', target: 'node3' },
        { source: 'node2', target: 'node3' },
      ],
    },
    node: {
      style: { label: true, labelFill: '#666', labelFontSize: 14, labelPlacement: 'bottom' },
      state: {
        custom: { fill: '#ffa940' },
      },
    },
    edge: {
      stroke: '#8b9baf',
      state: {
        custom: { stroke: '#ffa940' },
      },
    },
    behaviors: ['zoom-canvas', 'drag-canvas', { key: 'fix-element-size', type: 'fix-element-size' }],
    plugins: [{ type: 'grid-line', size: 30 }],
    animation: true,
  },
  { width: 800, height: 400 },
  (gui, graph) => {
    const options = {
      key: 'fix-element-size',
      type: 'fix-element-size',
      animation: true,
      enable: true,
      reset: true,
    };
    const optionFolder = gui.addFolder('CollapseExpand Options');
    optionFolder.add(options, 'type').disable(true);
    optionFolder.add(options, 'animation');
    optionFolder.add(options, 'enable');
    optionFolder.add(options, 'reset');
    optionFolder.onChange(({ property, value }) => {
      graph.updateBehavior({
        key: 'fix-element-size',
        [property]: value,
      });
      graph.render();
    });
  },
);

Basic Usage

Add this interaction in the graph configuration

1. Quick Configuration (Static)

Declare directly using a string form. This method is simple but only supports default configuration and cannot be dynamically modified after configuration:

const graph = new Graph({
  // Other configurations...
  behaviors: ['fix-element-size'],
});

2. Object Configuration (Recommended)

Configure using an object form, supporting custom parameters, and can dynamically update the configuration at runtime:

const graph = new Graph({
  // Other configurations...
  behaviors: [
    {
      type: 'fix-element-size',
      enable: true, // Enable this interaction
      state: 'selected', // State of elements to fix size
      reset: true, // Restore style when elements are redrawn
    },
  ],
});

Configuration Options

enable

Whether to enable the fixed element size interaction. By default, it is enabled when zooming out the canvas

By default, it is enabled when zooming out the canvas, set enable: (event) => event.data.scale < 1; if you want to enable it when zooming in, set enable: (event) => event.data.scale > 1; if you want to enable it when both zooming in and out, set enable: true

node

Node configuration item, used to define which attributes maintain a fixed visual size. If not specified (i.e., undefined), the entire node will be fixed

Example

If you want to fix the lineWidth of the main shape of the node during zooming, you can configure it like this:

{
  node: [{ shape: 'key', fields: ['lineWidth'] }];
}

If you want to keep the size of the element label unchanged during zooming, you can configure it like this:

{
  shape: 'label';
}

FixShapeConfig

Practical Example