fix(#2236): liquid distance calculate error (#2238)

* fix(#2236): liquid distance calucate error

* docs(liquid): fix typo disatance

* fix: ci

* chore: optimize the test case

Author: hustcc

__tests__/bugs/issue-2080-spec.ts

@@ -53,14 +53,14 @@ describe('donut plot', () => {
 
     let annotations = getAnnotations(donutPlot.chart);
     expect(annotations.length).toBeGreaterThan(0);
-    let htmlAnnotations = document.querySelectorAll('.g2-html-annotation');
+    let htmlAnnotations = donutPlot.container.querySelectorAll('.g2-html-annotation');
     expect((htmlAnnotations[0] as HTMLElement).innerText).toBe('总计' /** 中心文本指标卡，默认title */);
 
     donutPlot.update({ statistic: { title: { formatter: () => 'test' }, content: false } });
 
     annotations = getAnnotations(donutPlot.chart);
     expect(annotations.length).toBe(1);
-    htmlAnnotations = document.querySelectorAll('.g2-html-annotation');
+    htmlAnnotations = donutPlot.container.querySelectorAll('.g2-html-annotation');
     expect((htmlAnnotations[0] as HTMLElement).innerText).toBe('test' /** 中心文本指标卡，默认title */);
 
     donutPlot.destroy();

__tests__/bugs/issue-2236-spec.ts

@@ -0,0 +1,30 @@
+import { Liquid } from '../../src';
+import { createDiv } from '../utils/dom';
+
+describe('#2236', () => {
+  it('liquid distance', () => {
+    const liquid = new Liquid(createDiv(), {
+      autoFit: false,
+      width: 300,
+      height: 300,
+      percent: 0.25,
+      outline: {
+        border: 4,
+        distance: 1,
+      },
+      wave: {
+        length: 128,
+      },
+    });
+
+    liquid.render();
+
+    // @ts-ignore
+    expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[1].get('clipShape').attr('r')).toBe(132);
+    // clipShape r + distance + border / 2
+    // @ts-ignore
+    expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[0].attr('r')).toBe(132 + 1 + 4 / 2);
+
+    liquid.destroy();
+  });
+});

__tests__/unit/plots/liquid/index-spec.ts

@@ -48,7 +48,7 @@ describe('liquid', () => {
     expect(liquid.chart.middleGroup.findAllByName('waterwave-path')[0].get('animations')[0].toAttrs.matrix[6]).toBe(
       192
     );
-    expect(liquid.chart.middleGroup.findAllByName('waves')[0].get('clipShape').attr('r')).toBe(135);
+    expect(liquid.chart.middleGroup.findAllByName('waves')[0].get('clipShape').attr('r')).toBe(134);
 
     liquid.update({
       outline: {
@@ -70,7 +70,7 @@ describe('liquid', () => {
     expect(liquid.chart.middleGroup.findAllByName('waterwave-path')[0].get('animations')[0].toAttrs.matrix[6]).toBe(
       128
     );
-    expect(liquid.chart.middleGroup.findAllByName('waves')[0].get('clipShape').attr('r')).toBe(127);
+    expect(liquid.chart.middleGroup.findAllByName('waves')[0].get('clipShape').attr('r')).toBe(125);
 
     liquid.destroy();
   });

docs/api/plots/liquid.en.md

@@ -42,7 +42,7 @@ The ouline configure for liquid plot, includes:
 | Attr         | Type           | Desc                                                  |
 | ------------ | -------------- | ----------------------------------------------------- |
 | border       | number         | border width of ouline, default 2px                   |
-| disatance    | number         | disatance between ouline and wave, default 0px        |
+| distance     | number         | distance between ouline and wave, default 0px        |
 
 #### wave
 

docs/api/plots/liquid.zh.md

@@ -42,7 +42,7 @@ order: 12
 | 属性名        | 类型            | 介绍                                         |
 | ------------ | -------------- | -------------------------------------------- |
 | border       | number         | 外框容器的 border 宽度，默认为 2 像素             |
-| disatance    | number         | 外框容器和内部波形的间距，默认为 0 像素             |
+| distance     | number         | 外框容器和内部波形的间距，默认为 0 像素             |
 
 #### wave
 

src/plots/liquid/shapes/liquid.ts

@@ -309,7 +309,7 @@ registerShape('interval', 'liquid-fill-gauge', {
       attrs: {
         x: center.x,
         y: center.y,
-        r: radius - distance,
+        r: radius - distance - border / 2, // border 的大小会占用宽度
       },
     });