Converted all path coordinates to numeric values for Checkbox component

__tests__/integration/components/axis/axis-animation-disable.ts

@@ -67,4 +67,4 @@ export const AxisAnimationDisable = () => {
   return group;
 };
 
-AxisAnimationDisable.tags = ['坐标轴', '动画', '更新'];
+AxisAnimationDisable.tags = ['Axis', 'Animation', 'Update'];

__tests__/integration/components/axis/index.ts

@@ -99,4 +99,4 @@ export { AxisAnimationUpdate13 } from './axis-animation-update-13';
 export { AxisAnimationDisable } from './axis-animation-disable';
 export { AxisLinearLabelSpacing } from './axis-linear-label-spacing';
 export { AxisLinearTime1 } from './axis-linear-time-1';
-export { AxisLinearTime2 } from './axis-linear-time-2';
+export { AxisLinearTime2 } from './axis-linear-time-2';

src/ui/checkbox/constant.ts

@@ -37,12 +37,13 @@ export const CHECKBOX_RECT_STYLE = {
 
 const CHECKED_SHAPE_PATH = [
   ['M', 3, 6],
-  ['L', '5', '8.5'],
-  ['L', '8.5', '4'],
-] as any;
+  ['L', 5, 8.5],
+  ['L', 8.5, 4],
+];
 
 export const CHECKED_SHAPE_STYLE = {
   d: CHECKED_SHAPE_PATH,
   lineWidth: 1,
   cursor: 'pointer',
+  fill: 'none',
 };

src/ui/checkbox/index.ts

@@ -5,27 +5,13 @@ import type { CheckboxOptions, CheckboxStyleProps } from './types';
 
 import { CHECKBOX_RECT_STYLE, CHECKED_SHAPE_STYLE, LABEL_TEXT_STYLE } from './constant';
 
-export type { CheckboxStyleProps, CheckboxOptions };
-
-function getLablePosition(shape: Rect, spacing?: number) {
-  const bounds = shape.getLocalBounds();
-
-  return {
-    x: bounds.halfExtents[0] ? bounds.max[0] + (spacing || 0) : (shape.style.x as number),
-    y: bounds.halfExtents[1] ? (bounds.min[1] + bounds.max[1]) / 2 : (shape.style.y as number),
-  };
-}
+export type { CheckboxOptions };
 
 export class Checkbox extends Component<CheckboxStyleProps> {
-  /**
-   * 组件 checkbox
-   */
   public static tag = 'checkbox';
 
-  /**  checkbox 的背景方框组件 */
   private checkboxBoxShape!: Rect;
 
-  /** 值 */
   private checked!: boolean;
 
   constructor(options: CheckboxOptions) {
@@ -40,37 +26,55 @@ export class Checkbox extends Component<CheckboxStyleProps> {
   public render(attributes: Required<CheckboxStyleProps>, container: Group) {
     const { checked, spacing } = attributes;
     this.checked = !!checked;
+
     const group = maybeAppend(container, '.checkbox-content', 'g').attr('className', 'checkbox-content').node();
+
     const boxStyle = subStyleProps(attributes, 'box');
     const checkedStyle = subStyleProps(attributes, 'checked');
     const labelStyle = subStyleProps(attributes, 'label');
+
     const checkboxStyle = {
       ...(this.checked ? CHECKBOX_RECT_STYLE.selected : CHECKBOX_RECT_STYLE.default),
       ...boxStyle,
     };
+
     const checkboxBoxCheckedStyle = { ...CHECKED_SHAPE_STYLE, ...checkedStyle };
 
+    // Create the box first
     this.checkboxBoxShape = maybeAppend(group, '.checkbox-box', 'rect')
       .styles({
         className: 'checkbox-box',
-        zIndex: (group.style.zIndex || 0) - 1,
         ...checkboxStyle,
       })
       .node();
 
-    maybeAppend(this.checkboxBoxShape, '.checkbox-checked', 'path').styles({
-      className: 'checkbox-box-checked',
-      stroke: '#fff',
-      ...checkboxBoxCheckedStyle,
-    });
-
-    const { x, y } = getLablePosition(this.checkboxBoxShape, Number(spacing));
+    // Only draw the checkmark if checked
+    if (this.checked) {
+      maybeAppend(group, '.checkbox-box-checked', 'path').styles({
+        className: 'checkbox-box-checked',
+        stroke: '#fff',
+        ...CHECKED_SHAPE_STYLE,
+        ...checkboxBoxCheckedStyle,
+        zIndex: 9, // Ensure it's drawn above the box
+      });
+    }
 
+    const { x, y } = this.getLabelPosition(this.checkboxBoxShape, Number(spacing));
     maybeAppend(group, '.checkbox-label', 'text').styles({
       className: 'checkbox-label',
       x,
       y,
       ...labelStyle,
     });
   }
+
+  private getLabelPosition(shape: Rect, spacing?: number) {
+    // getLocalBounds might differ slightly between rendering backends.
+    // Make sure the shape is rendered before calling this if needed.
+    const bounds = shape.getLocalBounds();
+    return {
+      x: bounds.halfExtents[0] ? bounds.max[0] + (spacing || 0) : (shape.style.x as number),
+      y: bounds.halfExtents[1] ? (bounds.min[1] + bounds.max[1]) / 2 : (shape.style.y as number),
+    };
+  }
 }