@visactor/react-vtable 1.6.0-alpha.5 → 1.6.1

package/cjs/components/link/link.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k);
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
+        enumerable: !0,
+        get: function() {
+            return m[k];
+        }
+    }), Object.defineProperty(o, k2, desc);
+} : function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k), o[k2] = m[k];
+}), __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function(o, v) {
+    Object.defineProperty(o, "default", {
+        enumerable: !0,
+        value: v
+    });
+} : function(o, v) {
+    o.default = v;
+}), __importStar = this && this.__importStar || function(mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (null != mod) for (var k in mod) "default" !== k && Object.prototype.hasOwnProperty.call(mod, k) && __createBinding(result, mod, k);
+    return __setModuleDefault(result, mod), result;
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.Link = void 0;
+
+const tag_1 = require("../vrender-components/tag"), vutils_1 = require("@visactor/vutils"), react_1 = __importStar(require("react")), defaultProps = {
+    textStyle: {
+        fontSize: 14,
+        fontFamily: "sans-serif",
+        fill: "rgb(64, 128, 255)"
+    },
+    panelStyle: {
+        visible: !0,
+        opacity: 0,
+        fill: "rgba(242, 243, 245, 0.5)",
+        lineWidth: 1,
+        cornerRadius: 2
+    },
+    padding: 4,
+    space: 6,
+    state: {
+        textStyle: {
+            disabled: {
+                fill: "rgb(148, 191, 255)"
+            }
+        },
+        panelStyle: {
+            hover: {
+                opacity: 1
+            }
+        }
+    }
+};
+
+function LinkComponent(baseProps, ref) {
+    const props = (0, vutils_1.merge)({}, defaultProps, baseProps), {disabled: disabled, href: href, onClick: onClick} = props;
+    let linkRef = react_1.default.useRef(null);
+    linkRef = ref || linkRef;
+    const handleClick = react_1.default.useCallback((event => {
+        disabled ? "function" == typeof (null == event ? void 0 : event.preventDefault) && event.preventDefault() : (onClick && onClick(event), 
+        href && window.open(href));
+    }), [ disabled, href, onClick ]), attribute = getTagAttribute(props);
+    return (0, react_1.useEffect)((() => {
+        linkRef.current.addEventListener("mouseenter", (() => {
+            disabled || (linkRef.current.addState("hover", !0, !1), linkRef.current.stage.renderNextFrame());
+        })), linkRef.current.addEventListener("mouseleave", (() => {
+            disabled || (linkRef.current.removeState("hover", !1), linkRef.current.stage.renderNextFrame());
+        }));
+    }), []), (0, react_1.useEffect)((() => {
+        disabled ? (linkRef.current.removeState("disabled", !1), linkRef.current.addState("disabled", !0, !1)) : linkRef.current.removeState("disabled", !1), 
+        linkRef.current.stage.renderNextFrame();
+    })), react_1.default.createElement(tag_1.Tag, {
+        ref: linkRef,
+        attribute: attribute,
+        onClick: handleClick
+    });
+}
+
+function getTagAttribute(props) {
+    var _a, _b, _c, _d;
+    const {textStyle: textStyle, padding: padding, space: space, panelStyle: panelStyle, minWidth: minWidth, maxWidth: maxWidth, visible: visible, cursor: cursor, disabled: disabled, icon: icon, state: state, children: children} = props;
+    return {
+        text: children,
+        textStyle: textStyle,
+        padding: padding,
+        panel: panelStyle,
+        minWidth: minWidth,
+        maxWidth: maxWidth,
+        visible: visible,
+        cursor: (null != cursor ? cursor : disabled) ? "not-allowed" : "pointer",
+        childrenPickable: !1,
+        state: {
+            text: {
+                hover: null === (_a = null == state ? void 0 : state.textStyle) || void 0 === _a ? void 0 : _a.hover,
+                disabled: null === (_b = null == state ? void 0 : state.textStyle) || void 0 === _b ? void 0 : _b.disabled
+            },
+            panel: {
+                hover: null === (_c = null == state ? void 0 : state.panelStyle) || void 0 === _c ? void 0 : _c.hover,
+                disabled: null === (_d = null == state ? void 0 : state.panelStyle) || void 0 === _d ? void 0 : _d.disabled
+            }
+        },
+        space: space,
+        shape: {
+            visible: !!icon,
+            fill: !1,
+            stroke: textStyle.fill,
+            symbolType: "M -0.2927 -15.4348 L -15.142 -0.5855 C -18.6567 2.9292 -18.6567 8.6277 -15.142 12.1424 V 12.1424 C -11.6273 15.6571 -5.9288 15.6571 -2.4141 12.1424 L 15.2636 -5.5353 C 17.6067 -7.8784 17.6067 -11.6774 15.2636 -14.0206 V -14.0206 C 12.9205 -16.3637 9.1215 -16.3637 6.7783 -14.0206 L -10.8993 3.6571 C -12.0709 4.8287 -12.0709 6.7282 -10.8993 7.8997 V 7.8997 C -9.7278 9.0713 -7.8283 9.0713 -6.6567 7.8997 L 8.1925 -6.9495"
+        }
+    };
+}
+
+exports.Link = react_1.default.forwardRef(LinkComponent), exports.Link.displayName = "Link";
+//# sourceMappingURL=link.js.map

package/cjs/components/link/link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/link/link.tsx"],"names":[],"mappings":"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","file":"link.js","sourcesContent":["import type {\n  BackgroundAttributes,\n  Cursor,\n  IRectGraphicAttribute,\n  ITextGraphicAttribute,\n  Padding,\n  Tag,\n  TagAttributes\n} from '@visactor/vtable/es/vrender';\nimport { Tag as VTag } from '../vrender-components/tag';\nimport { merge } from '@visactor/vutils';\nimport React, { useEffect } from 'react';\n\ninterface LinkStateStyle {\n  textStyle?: {\n    hover?: Partial<ITextGraphicAttribute>;\n    disabled?: Partial<ITextGraphicAttribute>;\n  };\n  panelStyle?: {\n    hover?: Partial<IRectGraphicAttribute>;\n    disabled?: Partial<IRectGraphicAttribute>;\n  };\n}\n\nexport interface LinkProps {\n  children?: string;\n  textStyle?: Partial<ITextGraphicAttribute>;\n  padding?: Padding;\n  space?: number;\n  panelStyle?: BackgroundAttributes;\n  minWidth?: number;\n  maxWidth?: number;\n  visible?: boolean;\n  state?: LinkStateStyle;\n  disabled?: boolean;\n  icon?: boolean;\n  cursor?: Cursor;\n  href?: string;\n  onClick?: (e: Event) => void;\n}\n\nconst defaultProps: LinkProps = {\n  textStyle: {\n    fontSize: 14,\n    fontFamily: 'sans-serif',\n    fill: 'rgb(64, 128, 255)'\n  },\n  panelStyle: {\n    visible: true,\n    opacity: 0,\n    fill: 'rgba(242, 243, 245, 0.5)',\n    lineWidth: 1,\n    cornerRadius: 2\n  },\n  padding: 4,\n  space: 6,\n  // cursor: 'pointer',\n  state: {\n    textStyle: {\n      disabled: {\n        fill: 'rgb(148, 191, 255)'\n      }\n    },\n    panelStyle: {\n      hover: {\n        // visible: true\n        opacity: 1\n      }\n    }\n  }\n};\n\nfunction LinkComponent(baseProps: LinkProps, ref: React.Ref<Tag>) {\n  const props: LinkProps = merge({}, defaultProps, baseProps);\n  const { disabled, href, onClick } = props;\n  let linkRef = React.useRef<Tag>(null);\n  linkRef = ref ? (ref as React.RefObject<Tag>) : linkRef;\n\n  const handleClick: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (event: any): void => {\n      if (disabled) {\n        typeof event?.preventDefault === 'function' && event.preventDefault();\n        return;\n      }\n      onClick && onClick(event);\n      if (href) {\n        // eslint-disable-next-line no-undef\n        window.open(href);\n      }\n    },\n    [disabled, href, onClick]\n  );\n\n  const attribute: TagAttributes = getTagAttribute(props);\n\n  useEffect(() => {\n    linkRef.current.addEventListener('mouseenter', () => {\n      // console.log('mouseenter', linkRef.current, e.clone());\n      if (!disabled) {\n        linkRef.current.addState('hover', true, false);\n        // linkRef.current._bgRect.addState('hover', true, false);\n        // linkRef.current._textShape.addState('hover', true, false);\n        linkRef.current.stage.renderNextFrame();\n      }\n    });\n    linkRef.current.addEventListener('mouseleave', () => {\n      // console.log('mouseleave', linkRef.current, e.clone());\n      if (!disabled) {\n        linkRef.current.removeState('hover', false);\n        // linkRef.current._bgRect.removeState('hover', false);\n        // linkRef.current._textShape.removeState('hover', false);\n        linkRef.current.stage.renderNextFrame();\n      }\n    });\n  }, []);\n\n  useEffect(() => {\n    if (disabled) {\n      linkRef.current.removeState('disabled', false);\n      // linkRef.current._bgRect.removeState('disabled', false);\n      // linkRef.current._textShape.removeState('disabled', false);\n\n      linkRef.current.addState('disabled', true, false);\n      // linkRef.current._bgRect.addState('disabled', true, false);\n      // linkRef.current._textShape.addState('disabled', true, false);\n      // console.log('add disable');\n    } else {\n      linkRef.current.removeState('disabled', false);\n      // linkRef.current._bgRect.removeState('disabled', false);\n      // linkRef.current._textShape.removeState('disabled', false);\n      // console.log('remove disable');\n    }\n    linkRef.current.stage.renderNextFrame();\n  });\n\n  return <VTag ref={linkRef} attribute={attribute} onClick={handleClick}></VTag>;\n}\n\nfunction getTagAttribute(props: LinkProps) {\n  const {\n    textStyle,\n    padding,\n    space,\n    panelStyle,\n    minWidth,\n    maxWidth,\n    visible,\n    cursor,\n    disabled,\n    icon,\n    state,\n    children\n  } = props;\n  const attr: TagAttributes = {\n    text: children,\n    textStyle,\n    padding,\n    panel: panelStyle,\n    minWidth,\n    maxWidth,\n    visible,\n    cursor: cursor ?? disabled ? 'not-allowed' : 'pointer',\n    childrenPickable: false,\n    state: {\n      text: {\n        hover: state?.textStyle?.hover,\n        disabled: state?.textStyle?.disabled\n      },\n      panel: {\n        hover: state?.panelStyle?.hover,\n        disabled: state?.panelStyle?.disabled\n      }\n    },\n    space,\n    shape: {\n      visible: !!icon,\n      fill: false,\n      stroke: textStyle.fill,\n      symbolType:\n        // eslint-disable-next-line max-len\n        'M -0.2927 -15.4348 L -15.142 -0.5855 C -18.6567 2.9292 -18.6567 8.6277 -15.142 12.1424 V 12.1424 C -11.6273 15.6571 -5.9288 15.6571 -2.4141 12.1424 L 15.2636 -5.5353 C 17.6067 -7.8784 17.6067 -11.6774 15.2636 -14.0206 V -14.0206 C 12.9205 -16.3637 9.1215 -16.3637 6.7783 -14.0206 L -10.8993 3.6571 C -12.0709 4.8287 -12.0709 6.7282 -10.8993 7.8997 V 7.8997 C -9.7278 9.0713 -7.8283 9.0713 -6.6567 7.8997 L 8.1925 -6.9495'\n    }\n  };\n\n  return attr;\n}\n\nexport const Link = React.forwardRef<Tag, LinkProps>(LinkComponent);\n\nLink.displayName = 'Link';\n"]}

package/cjs/components/popover/popover.d.ts

@@ -0,0 +1,13 @@
+import type { IGroup } from '@visactor/vtable/es/vrender';
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
+type Anchor = 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';
+export interface PopoverProps {
+    children?: ReactElement;
+    defaultPopupVisible?: boolean;
+    popupVisible?: boolean;
+    position?: Anchor;
+    content?: ReactNode;
+}
+export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<IGroup>>;
+export {};

package/cjs/components/popover/popover.js

@@ -0,0 +1,281 @@
+"use strict";
+
+var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k);
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
+        enumerable: !0,
+        get: function() {
+            return m[k];
+        }
+    }), Object.defineProperty(o, k2, desc);
+} : function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k), o[k2] = m[k];
+}), __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function(o, v) {
+    Object.defineProperty(o, "default", {
+        enumerable: !0,
+        value: v
+    });
+} : function(o, v) {
+    o.default = v;
+}), __importStar = this && this.__importStar || function(mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (null != mod) for (var k in mod) "default" !== k && Object.prototype.hasOwnProperty.call(mod, k) && __createBinding(result, mod, k);
+    return __setModuleDefault(result, mod), result;
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.Popover = void 0;
+
+const vutils_1 = require("@visactor/vutils"), react_1 = __importStar(require("react")), table_components_1 = require("../../table-components"), defaultProps = {
+    defaultPopupVisible: !1,
+    position: "top"
+}, poptipPanalStyle = {
+    backgroundColor: "rgb(255, 255, 255)",
+    boxShadow: "0 4px 10px rgba(0, 0, 0, .1)",
+    fontSize: "14px",
+    borderRadius: "4px",
+    lineHeight: "1.5715",
+    boxSizing: "border-box",
+    color: "rgb(78, 89, 105)",
+    border: "1px solid rgb(229, 230, 235)",
+    padding: "12px 16px"
+}, Tooltip = props => {
+    const arrowStyle = Object.assign({
+        content: "",
+        height: "8px",
+        width: "8px",
+        position: "absolute",
+        display: "block",
+        boxSizing: "border-box",
+        transform: "rotate(45deg)",
+        transformOrigin: "50% 50% 0",
+        backgroundColor: "rgb(255, 255, 255)",
+        border: "1px solid rgb(229, 230, 235)"
+    }, getArrowStyle(props.position));
+    return props.visible ? react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement("div", {
+        style: poptipPanalStyle
+    }, props.content), react_1.default.createElement("div", {
+        style: arrowStyle
+    })) : react_1.default.createElement(react_1.default.Fragment, null);
+};
+
+function PopoverComponent(baseProps, ref) {
+    const props = (0, vutils_1.merge)({}, defaultProps, baseProps), {content: content, position: position, popupVisible: popupVisible, defaultPopupVisible: defaultPopupVisible, children: children} = props;
+    let popoverRef = react_1.default.useRef(null);
+    popoverRef = ref || popoverRef;
+    const [popupOpen, setPopupOpen] = (0, react_1.useState)(!1);
+    (0, react_1.useEffect)((() => {
+        setPopupOpen(!!popupVisible), popoverRef.current.stage.renderNextFrame();
+    }), [ popupVisible ]), (0, react_1.useEffect)((() => {
+        var _a;
+        setPopupOpen(null !== (_a = null != popupVisible ? popupVisible : defaultPopupVisible) && void 0 !== _a && _a);
+    }), []);
+    const {transform: transform, anchorType: anchorType} = getTransform(position), groupAttribute = {
+        react: {
+            style: {
+                transform: transform
+            },
+            element: react_1.default.createElement(Tooltip, {
+                visible: popupOpen,
+                content: content,
+                position: position
+            }),
+            container: null,
+            visible: !0,
+            pointerEvents: !1,
+            anchorType: anchorType
+        }
+    }, groupMouseEnter = (0, react_1.useCallback)((event => {
+        (0, vutils_1.isValid)(popupVisible) || (setPopupOpen(!0), event.currentTarget.stage.renderNextFrame());
+    }), []), groupMouseLeave = (0, react_1.useCallback)((event => {
+        (0, vutils_1.isValid)(popupVisible) || (setPopupOpen(!1), event.currentTarget.stage.renderNextFrame());
+    }), []);
+    return react_1.default.createElement(table_components_1.Group, {
+        ref: popoverRef,
+        attribute: groupAttribute,
+        onMouseEnter: groupMouseEnter,
+        onMouseLeave: groupMouseLeave
+    }, children);
+}
+
+function getTransform(position) {
+    switch (position) {
+      case "top":
+        return {
+            anchorType: "top",
+            transform: "translate(-50%, calc(-100% - 10px))"
+        };
+
+      case "tl":
+        return {
+            anchorType: "top-left",
+            transform: "translate(0, calc(-100% - 10px))"
+        };
+
+      case "tr":
+        return {
+            anchorType: "top-right",
+            transform: "translate(-100%, calc(-100% - 10px))"
+        };
+
+      case "bottom":
+        return {
+            anchorType: "bottom",
+            transform: "translate(-50%, 10px)"
+        };
+
+      case "bl":
+        return {
+            anchorType: "bottom-left",
+            transform: "translate(0, 10px)"
+        };
+
+      case "br":
+        return {
+            anchorType: "bottom-right",
+            transform: "translate(-100%, 10px)"
+        };
+
+      case "left":
+        return {
+            anchorType: "left",
+            transform: "translate(calc(-100% - 10px), -50%)"
+        };
+
+      case "lt":
+        return {
+            anchorType: "top-left",
+            transform: "translate(calc(-100% - 10px), 0)"
+        };
+
+      case "lb":
+        return {
+            anchorType: "bottom-left",
+            transform: "translate(calc(-100% - 10px), -100%)"
+        };
+
+      case "right":
+        return {
+            anchorType: "right",
+            transform: "translate(10px, -50%)"
+        };
+
+      case "rt":
+        return {
+            anchorType: "top-right",
+            transform: "translate(10px, 0)"
+        };
+
+      case "rb":
+        return {
+            anchorType: "bottom-right",
+            transform: "translate(10px, -100%)"
+        };
+    }
+}
+
+function getArrowStyle(position) {
+    switch (position) {
+      case "top":
+        return {
+            top: "calc(100% - 5px)",
+            left: "calc(50% - 5px)",
+            borderTop: "none",
+            borderLeft: "none"
+        };
+
+      case "tl":
+        return {
+            top: "calc(100% - 4px)",
+            left: "14px",
+            borderTop: "none",
+            borderLeft: "none"
+        };
+
+      case "tr":
+        return {
+            top: "calc(100% - 4px)",
+            left: "calc(100% - 24px)",
+            borderTop: "none",
+            borderLeft: "none"
+        };
+
+      case "bottom":
+        return {
+            top: "-4px",
+            left: "calc(50% - 4px)",
+            borderRight: "none",
+            borderBottom: "none"
+        };
+
+      case "bl":
+        return {
+            top: "-4px",
+            left: "14px",
+            borderRight: "none",
+            borderBottom: "none"
+        };
+
+      case "br":
+        return {
+            top: "-4px",
+            left: "calc(100% - 24px)",
+            borderRight: "none",
+            borderBottom: "none"
+        };
+
+      case "left":
+        return {
+            top: "calc(50% - 4px)",
+            left: "calc(100% - 5px)",
+            borderLeft: "none",
+            borderBottom: "none"
+        };
+
+      case "lt":
+        return {
+            top: "14px",
+            left: "calc(100% - 5px)",
+            borderLeft: "none",
+            borderBottom: "none"
+        };
+
+      case "lb":
+        return {
+            top: "calc(100% - 24px)",
+            left: "calc(100% - 5px)",
+            borderLeft: "none",
+            borderBottom: "none"
+        };
+
+      case "right":
+        return {
+            top: "calc(50% - 4px)",
+            left: "-4px",
+            borderRight: "none",
+            borderTop: "none"
+        };
+
+      case "rt":
+        return {
+            top: "14px",
+            left: "-4px",
+            borderRight: "none",
+            borderTop: "none"
+        };
+
+      case "rb":
+        return {
+            top: "calc(100% - 24px)",
+            left: "-4px",
+            borderRight: "none",
+            borderTop: "none"
+        };
+    }
+}
+
+exports.Popover = react_1.default.forwardRef(PopoverComponent), exports.Popover.displayName = "Popover";
+//# sourceMappingURL=popover.js.map

package/cjs/components/popover/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/popover/popover.tsx"],"names":[],"mappings":"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","file":"popover.js","sourcesContent":["import type {\n  BackgroundAttributes,\n  Cursor,\n  IGroup,\n  IGroupGraphicAttribute,\n  IRectGraphicAttribute,\n  ITextGraphicAttribute,\n  Padding,\n  Tag,\n  TagAttributes\n} from '@visactor/vtable/es/vrender';\nimport { Tag as VTag } from '../vrender-components/tag';\nimport type { BoundsAnchorType } from '@visactor/vutils';\nimport { isValid, merge } from '@visactor/vutils';\nimport type { CSSProperties, ReactElement, ReactNode } from 'react';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { Group } from '../../table-components';\n\ntype Anchor = 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';\nexport interface PopoverProps {\n  children?: ReactElement;\n  defaultPopupVisible?: boolean;\n  // disabled?: boolean;\n  // popupHoverStay?: boolean;\n  popupVisible?: boolean;\n  // color?: string;\n  position?: Anchor;\n  content?: ReactNode;\n  // onVisibleChange?: (visible: boolean) => void;\n}\n\nconst defaultProps: PopoverProps = {\n  defaultPopupVisible: false,\n  // popupHoverStay: true,\n  // popupVisible: false,\n  position: 'top'\n};\n\nconst poptipPanalStyle: CSSProperties = {\n  backgroundColor: 'rgb(255, 255, 255)',\n  boxShadow: '0 4px 10px rgba(0, 0, 0, .1)',\n  fontSize: '14px',\n  borderRadius: '4px',\n  lineHeight: '1.5715',\n  boxSizing: 'border-box',\n  color: 'rgb(78, 89, 105)',\n  border: '1px solid rgb(229, 230, 235)',\n  padding: '12px 16px'\n};\n\nconst Tooltip = (props: { visible: boolean; content: ReactNode; position: Anchor }) => {\n  const arrowStyle: CSSProperties = {\n    content: '',\n    height: '8px',\n    width: '8px',\n    position: 'absolute',\n    display: 'block',\n    boxSizing: 'border-box',\n    transform: 'rotate(45deg)',\n    transformOrigin: '50% 50% 0',\n    backgroundColor: 'rgb(255, 255, 255)',\n    border: '1px solid rgb(229, 230, 235)',\n    ...getArrowStyle(props.position)\n  };\n\n  return props.visible ? (\n    <>\n      <div style={poptipPanalStyle}>{props.content}</div>\n      <div style={arrowStyle}></div>\n    </>\n  ) : (\n    <></>\n  );\n};\n\nfunction PopoverComponent(baseProps: PopoverProps, ref: React.Ref<IGroup>) {\n  const props: PopoverProps = merge({}, defaultProps, baseProps);\n  const { content, position, popupVisible, defaultPopupVisible, children } = props;\n  let popoverRef = React.useRef<IGroup>(null);\n  popoverRef = ref ? (ref as React.RefObject<IGroup>) : popoverRef;\n\n  const [popupOpen, setPopupOpen] = useState(false);\n\n  useEffect(() => {\n    if (popupVisible) {\n      setPopupOpen(true);\n    } else {\n      setPopupOpen(false);\n    }\n    popoverRef.current.stage.renderNextFrame();\n  }, [popupVisible]);\n\n  useEffect(() => {\n    setPopupOpen(popupVisible ?? defaultPopupVisible ?? false);\n  }, []);\n\n  const { transform, anchorType } = getTransform(position);\n  const poptipContainerStyle: CSSProperties = {\n    // display: popupOpen ? 'block' : 'none',\n    transform: transform\n  };\n\n  const groupAttribute: IGroupGraphicAttribute = {\n    react: {\n      // width: 100,\n      // height: 100,\n      style: poptipContainerStyle,\n      element: <Tooltip visible={popupOpen} content={content} position={position} />,\n      container: null,\n      visible: true,\n      pointerEvents: false,\n      anchorType: anchorType\n    } as IGroupGraphicAttribute['react']\n  };\n\n  const groupMouseEnter = useCallback((event: any) => {\n    if (isValid(popupVisible)) {\n      return;\n    }\n    setPopupOpen(true);\n    event.currentTarget.stage.renderNextFrame();\n  }, []);\n\n  const groupMouseLeave = useCallback((event: any) => {\n    if (isValid(popupVisible)) {\n      return;\n    }\n    setPopupOpen(false);\n    event.currentTarget.stage.renderNextFrame();\n  }, []);\n\n  return (\n    <Group ref={popoverRef} attribute={groupAttribute} onMouseEnter={groupMouseEnter} onMouseLeave={groupMouseLeave}>\n      {children}\n    </Group>\n  );\n}\n\nfunction getTransform(position: Anchor): { transform: string; anchorType: BoundsAnchorType } {\n  switch (position) {\n    case 'top':\n      return {\n        anchorType: 'top',\n        transform: 'translate(-50%, calc(-100% - 10px))'\n      };\n    case 'tl':\n      return {\n        anchorType: 'top-left',\n        transform: 'translate(0, calc(-100% - 10px))'\n      };\n    case 'tr':\n      return {\n        anchorType: 'top-right',\n        transform: 'translate(-100%, calc(-100% - 10px))'\n      };\n    case 'bottom':\n      return {\n        anchorType: 'bottom',\n        transform: 'translate(-50%, 10px)'\n      };\n    case 'bl':\n      return {\n        anchorType: 'bottom-left',\n        transform: 'translate(0, 10px)'\n      };\n    case 'br':\n      return {\n        anchorType: 'bottom-right',\n        transform: 'translate(-100%, 10px)'\n      };\n    case 'left':\n      return {\n        anchorType: 'left',\n        transform: 'translate(calc(-100% - 10px), -50%)'\n      };\n    case 'lt':\n      return {\n        anchorType: 'top-left',\n        transform: 'translate(calc(-100% - 10px), 0)'\n      };\n    case 'lb':\n      return {\n        anchorType: 'bottom-left',\n        transform: 'translate(calc(-100% - 10px), -100%)'\n      };\n    case 'right':\n      return {\n        anchorType: 'right',\n        transform: 'translate(10px, -50%)'\n      };\n    case 'rt':\n      return {\n        anchorType: 'top-right',\n        transform: 'translate(10px, 0)'\n      };\n    case 'rb':\n      return {\n        anchorType: 'bottom-right',\n        transform: 'translate(10px, -100%)'\n      };\n  }\n}\n\nfunction getArrowStyle(position: Anchor): CSSProperties {\n  switch (position) {\n    case 'top':\n      return {\n        top: 'calc(100% - 5px)',\n        left: 'calc(50% - 5px)',\n        borderTop: 'none',\n        borderLeft: 'none'\n      };\n    case 'tl':\n      return {\n        top: 'calc(100% - 4px)',\n        left: '14px', // 4(1/2width) + 10(offset)\n        borderTop: 'none',\n        borderLeft: 'none'\n      };\n    case 'tr':\n      return {\n        top: 'calc(100% - 4px)',\n        left: 'calc(100% - 24px)', // 10(offset) + 10(width) + 4(1/2width)\n        borderTop: 'none',\n        borderLeft: 'none'\n      };\n    case 'bottom':\n      return {\n        top: '-4px',\n        left: 'calc(50% - 4px)',\n        borderRight: 'none',\n        borderBottom: 'none'\n      };\n    case 'bl':\n      return {\n        top: '-4px',\n        left: '14px', // 4(1/2width) + 10(offset)\n        borderRight: 'none',\n        borderBottom: 'none'\n      };\n    case 'br':\n      return {\n        top: '-4px',\n        left: 'calc(100% - 24px)', // 10(offset) + 10(width) + 4(1/2width)\n        borderRight: 'none',\n        borderBottom: 'none'\n      };\n    case 'left':\n      return {\n        top: 'calc(50% - 4px)',\n        left: 'calc(100% - 5px)',\n        borderLeft: 'none',\n        borderBottom: 'none'\n      };\n    case 'lt':\n      return {\n        top: '14px', // 4(1/2width) + 10(offset)\n        left: 'calc(100% - 5px)',\n        borderLeft: 'none',\n        borderBottom: 'none'\n      };\n    case 'lb':\n      return {\n        top: 'calc(100% - 24px)', // 10(offset) + 10(width) + 4(1/2width)\n        left: 'calc(100% - 5px)',\n        borderLeft: 'none',\n        borderBottom: 'none'\n      };\n    case 'right':\n      return {\n        top: 'calc(50% - 4px)',\n        left: '-4px',\n        borderRight: 'none',\n        borderTop: 'none'\n      };\n    case 'rt':\n      return {\n        top: '14px', // 4(1/2width) + 10(offset)\n        left: '-4px',\n        borderRight: 'none',\n        borderTop: 'none'\n      };\n    case 'rb':\n      return {\n        top: 'calc(100% - 24px)', // 10(offset) + 10(width) + 4(1/2width)\n        left: '-4px',\n        borderRight: 'none',\n        borderTop: 'none'\n      };\n  }\n}\n\nexport const Popover = React.forwardRef<IGroup, PopoverProps>(PopoverComponent);\n\nPopover.displayName = 'Popover';\n"]}

package/cjs/components/radio/radio.d.ts

@@ -0,0 +1,15 @@
+import type { Cursor, Radio as VRenderRadio, RadioAttributes } from '@visactor/vtable/es/vrender';
+import React from 'react';
+export interface RadioProps {
+    children?: string;
+    textStyle?: RadioAttributes['text'];
+    circleStyle?: RadioAttributes['circle'];
+    checked?: boolean;
+    interactive?: boolean;
+    disabled?: boolean;
+    disableCursor?: Cursor;
+    spaceBetweenTextAndIcon?: number;
+    visible?: boolean;
+    onChange?: (checked: boolean) => void;
+}
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<VRenderRadio>>;

package/cjs/components/radio/radio.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k);
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
+        enumerable: !0,
+        get: function() {
+            return m[k];
+        }
+    }), Object.defineProperty(o, k2, desc);
+} : function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k), o[k2] = m[k];
+}), __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function(o, v) {
+    Object.defineProperty(o, "default", {
+        enumerable: !0,
+        value: v
+    });
+} : function(o, v) {
+    o.default = v;
+}), __importStar = this && this.__importStar || function(mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (null != mod) for (var k in mod) "default" !== k && Object.prototype.hasOwnProperty.call(mod, k) && __createBinding(result, mod, k);
+    return __setModuleDefault(result, mod), result;
+}, __rest = this && this.__rest || function(s, e) {
+    var t = {};
+    for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
+    if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
+        var i = 0;
+        for (p = Object.getOwnPropertySymbols(s); i < p.length; i++) e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
+    }
+    return t;
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.Radio = void 0;
+
+const radio_1 = require("../vrender-components/radio"), vutils_1 = require("@visactor/vutils"), react_1 = __importStar(require("react")), defaultProps = {};
+
+function RadioComponent(baseProps, ref) {
+    const props = (0, vutils_1.merge)({}, defaultProps, baseProps), {textStyle: textStyle, circleStyle: circleStyle, children: children} = props, rest = __rest(props, [ "textStyle", "circleStyle", "children" ]);
+    let radioRef = react_1.default.useRef(null);
+    radioRef = ref || radioRef;
+    const handleChange = (0, react_1.useCallback)((event => {
+        props.onChange && props.onChange(event.target.attribute.checked);
+    }), []);
+    return (0, react_1.useEffect)((() => (radioRef.current.addEventListener("radio_checked", handleChange), 
+    () => {
+        radioRef.current.removeEventListener("radio_checked", handleChange);
+    })), []), react_1.default.createElement(radio_1.Radio, {
+        ref: radioRef,
+        attribute: Object.assign({
+            text: Object.assign(Object.assign({}, textStyle), {
+                text: children
+            }),
+            circle: circleStyle
+        }, rest)
+    });
+}
+
+exports.Radio = react_1.default.forwardRef(RadioComponent), exports.Radio.displayName = "Radio";
+//# sourceMappingURL=radio.js.map

package/cjs/components/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/radio/radio.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,uDAA8D;AAC9D,6CAAyC;AACzC,+CAAsD;AAetD,MAAM,YAAY,GAAe,EAAE,CAAC;AAEpC,SAAS,cAAc,CAAC,SAAqB,EAAE,GAA4B;IACzE,MAAM,KAAK,GAAe,IAAA,cAAK,EAAC,EAAE,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;IAC7D,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAArD,wCAA6C,CAAQ,CAAC;IAC5D,IAAI,QAAQ,GAAG,eAAK,CAAC,MAAM,CAAe,IAAI,CAAC,CAAC;IAChD,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAE,GAAqC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAEnE,MAAM,YAAY,GAAG,IAAA,mBAAW,EAAC,CAAC,KAA+B,EAAE,EAAE;QACnE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACnE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,QAAQ,CAAC,OAAO,CAAC,gBAAgB,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;QACjE,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,OAAO,CAAC,mBAAmB,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;QACtE,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,8BAAC,aAAM,IACL,GAAG,EAAE,QAAQ,EACb,SAAS,kBACP,IAAI,kCACC,SAAS,KACZ,IAAI,EAAE,QAAQ,KAEhB,MAAM,EAAE,WAAW,IAChB,IAAI,IAED,CACX,CAAC;AACJ,CAAC;AAEY,QAAA,KAAK,GAAG,eAAK,CAAC,UAAU,CAA2B,cAAc,CAAC,CAAC;AAEhF,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC","file":"radio.js","sourcesContent":["import type {\n  BackgroundAttributes,\n  Cursor,\n  IRectGraphicAttribute,\n  ITextGraphicAttribute,\n  Padding,\n  Radio as VRenderRadio,\n  RadioAttributes\n} from '@visactor/vtable/es/vrender';\nimport { Radio as VRadio } from '../vrender-components/radio';\nimport { merge } from '@visactor/vutils';\nimport React, { useCallback, useEffect } from 'react';\n\nexport interface RadioProps {\n  children?: string;\n  textStyle?: RadioAttributes['text'];\n  circleStyle?: RadioAttributes['circle'];\n  checked?: boolean;\n  interactive?: boolean;\n  disabled?: boolean;\n  disableCursor?: Cursor;\n  spaceBetweenTextAndIcon?: number;\n  visible?: boolean;\n  onChange?: (checked: boolean) => void;\n}\n\nconst defaultProps: RadioProps = {};\n\nfunction RadioComponent(baseProps: RadioProps, ref: React.Ref<VRenderRadio>) {\n  const props: RadioProps = merge({}, defaultProps, baseProps);\n  const { textStyle, circleStyle, children, ...rest } = props;\n  let radioRef = React.useRef<VRenderRadio>(null);\n  radioRef = ref ? (ref as React.RefObject<VRenderRadio>) : radioRef;\n\n  const handleChange = useCallback((event: { target: VRenderRadio }) => {\n    props.onChange && props.onChange(event.target.attribute.checked);\n  }, []);\n\n  useEffect(() => {\n    radioRef.current.addEventListener('radio_checked', handleChange);\n    return () => {\n      radioRef.current.removeEventListener('radio_checked', handleChange);\n    };\n  }, []);\n\n  return (\n    <VRadio\n      ref={radioRef}\n      attribute={{\n        text: {\n          ...textStyle,\n          text: children\n        },\n        circle: circleStyle,\n        ...rest\n      }}\n    ></VRadio>\n  );\n}\n\nexport const Radio = React.forwardRef<VRenderRadio, RadioProps>(RadioComponent);\n\nRadio.displayName = 'Radio';\n"]}

package/cjs/components/tag/tag.d.ts

@@ -0,0 +1,13 @@
+import type { IRectGraphicAttribute, ITextGraphicAttribute, Padding, Tag as VRenderTag, TagAttributes } from '@visactor/vtable/es/vrender';
+import React from 'react';
+export interface TagProps {
+    attribute?: TagAttributes;
+    children?: string;
+    textStyle?: Partial<ITextGraphicAttribute>;
+    panelStyle?: Partial<IRectGraphicAttribute>;
+    padding?: Padding;
+    minWidth?: number;
+    maxWidth?: number;
+    visible?: boolean;
+}
+export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<VRenderTag>>;

package/cjs/components/tag/tag.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var __rest = this && this.__rest || function(s, e) {
+    var t = {};
+    for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
+    if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
+        var i = 0;
+        for (p = Object.getOwnPropertySymbols(s); i < p.length; i++) e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
+    }
+    return t;
+}, __importDefault = this && this.__importDefault || function(mod) {
+    return mod && mod.__esModule ? mod : {
+        default: mod
+    };
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.Tag = void 0;
+
+const tag_1 = require("../vrender-components/tag"), vutils_1 = require("@visactor/vutils"), react_1 = __importDefault(require("react")), defaultProps = {
+    textStyle: {
+        fontSize: 14,
+        fontFamily: "sans-serif",
+        fill: "rgb(51, 101, 238)"
+    },
+    panelStyle: {
+        visible: !0,
+        fill: "#e6fffb",
+        lineWidth: 1,
+        cornerRadius: 4
+    }
+};
+
+function TagComponent(baseProps, ref) {
+    const props = (0, vutils_1.merge)({}, defaultProps, baseProps), {attribute: attribute, panelStyle: panelStyle, children: children} = props, rest = __rest(props, [ "attribute", "panelStyle", "children" ]);
+    let tagRef = react_1.default.useRef(null);
+    return tagRef = ref || tagRef, react_1.default.createElement(tag_1.Tag, {
+        ref: tagRef,
+        attribute: null != attribute ? attribute : Object.assign({
+            text: children,
+            panel: panelStyle
+        }, rest)
+    });
+}
+
+exports.Tag = react_1.default.forwardRef(TagComponent), exports.Tag.displayName = "Tag";

package/cjs/components/tag/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/tag/tag.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AASA,mDAAwD;AACxD,6CAAyC;AACzC,kDAAyC;AAazC,MAAM,YAAY,GAAa;IAC7B,SAAS,EAAE;QACT,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,YAAY;QACxB,IAAI,EAAE,mBAAmB;KAC1B;IAED,UAAU,EAAE;QACV,OAAO,EAAE,IAAI;QACb,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,CAAC;QACZ,YAAY,EAAE,CAAC;KAChB;CACF,CAAC;AAEF,SAAS,YAAY,CAAC,SAAmB,EAAE,GAA0B;IACnE,MAAM,KAAK,GAAa,IAAA,cAAK,EAAC,EAAE,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;IAC3D,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAApD,uCAA4C,CAAQ,CAAC;IAC3D,IAAI,MAAM,GAAG,eAAK,CAAC,MAAM,CAAa,IAAI,CAAC,CAAC;IAC5C,MAAM,GAAG,GAAG,CAAC,CAAC,CAAE,GAAmC,CAAC,CAAC,CAAC,MAAM,CAAC;IAE7D,OAAO,CACL,8BAAC,SAAI,IACH,GAAG,EAAE,MAAM,EACX,SAAS,EACP,SAAS,aAAT,SAAS,cAAT,SAAS,mBACP,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,UAAiB,IACrB,IAAI,CACR,GAEG,CACT,CAAC;AACJ,CAAC;AAEY,QAAA,GAAG,GAAG,eAAK,CAAC,UAAU,CAAuB,YAAY,CAAC,CAAC;AAExE,WAAG,CAAC,WAAW,GAAG,KAAK,CAAC","file":"tag.js","sourcesContent":["import type {\n  BackgroundAttributes,\n  Cursor,\n  IRectGraphicAttribute,\n  ITextGraphicAttribute,\n  Padding,\n  Tag as VRenderTag,\n  TagAttributes\n} from '@visactor/vtable/es/vrender';\nimport { Tag as VTag } from '../vrender-components/tag';\nimport { merge } from '@visactor/vutils';\nimport React, { useEffect } from 'react';\n\nexport interface TagProps {\n  attribute?: TagAttributes;\n  children?: string;\n  textStyle?: Partial<ITextGraphicAttribute>;\n  panelStyle?: Partial<IRectGraphicAttribute>;\n  padding?: Padding;\n  minWidth?: number;\n  maxWidth?: number;\n  visible?: boolean;\n}\n\nconst defaultProps: TagProps = {\n  textStyle: {\n    fontSize: 14,\n    fontFamily: 'sans-serif',\n    fill: 'rgb(51, 101, 238)'\n  },\n  // padding: [8, 10],\n  panelStyle: {\n    visible: true,\n    fill: '#e6fffb',\n    lineWidth: 1,\n    cornerRadius: 4\n  }\n};\n\nfunction TagComponent(baseProps: TagProps, ref: React.Ref<VRenderTag>) {\n  const props: TagProps = merge({}, defaultProps, baseProps);\n  const { attribute, panelStyle, children, ...rest } = props;\n  let tagRef = React.useRef<VRenderTag>(null);\n  tagRef = ref ? (ref as React.RefObject<VRenderTag>) : tagRef;\n\n  return (\n    <VTag\n      ref={tagRef}\n      attribute={\n        attribute ?? {\n          text: children,\n          panel: panelStyle as any,\n          ...rest\n        }\n      }\n    ></VTag>\n  );\n}\n\nexport const Tag = React.forwardRef<VRenderTag, TagProps>(TagComponent);\n\nTag.displayName = 'Tag';\n"]}

package/cjs/components/vrender-components/checkbox.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement, JSXElementConstructor } from 'react';
+import type { CheckboxAttributes, CheckBox as VCheakbox } from '@visactor/vtable/es/vrender';
+import type { GraphicProps } from './type';
+export declare const Checkbox: (props: GraphicProps<CheckboxAttributes, VCheakbox>) => ReactElement<GraphicProps<CheckboxAttributes, VCheakbox>, JSXElementConstructor<GraphicProps<CheckboxAttributes, VCheakbox>>>;

package/cjs/components/vrender-components/checkbox.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.Checkbox = void 0, exports.Checkbox = "checkbox";
+//# sourceMappingURL=checkbox.js.map

package/cjs/components/vrender-components/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/vrender-components/checkbox.tsx"],"names":[],"mappings":";;;AAKa,QAAA,QAAQ,GAKjB,UAAiB,CAAC","file":"checkbox.js","sourcesContent":["import type { ReactElement, JSXElementConstructor } from 'react';\nimport type { CheckboxAttributes, CheckBox as VCheakbox } from '@visactor/vtable/es/vrender';\nimport type { GraphicProps } from './type';\n\n// component from vrender-component\nexport const Checkbox: (\n  props: GraphicProps<CheckboxAttributes, VCheakbox>\n) => ReactElement<\n  GraphicProps<CheckboxAttributes, VCheakbox>,\n  JSXElementConstructor<GraphicProps<CheckboxAttributes, VCheakbox>>\n> = 'checkbox' as any;\n"]}

package/cjs/components/vrender-components/component-creater.d.ts

@@ -0,0 +1,2 @@
+import { CheckBox, Radio, Tag } from '@visactor/vtable/es/vrender';
+export declare function createVRenderComponent(type: string, props: any): Tag | Radio | CheckBox;