k-react-vtable 1.0.0

package/cjs/table-components/component/title.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["table-components/component/title.tsx"],"names":[],"mappings":";;;AAEA,sDAAoD;AAIvC,QAAA,KAAK,GAAG,IAAA,gCAAe,EAAa,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC","file":"title.js","sourcesContent":["import type { TYPES } from 'k-vtable';\nimport type { BaseComponentProps } from '../base-component';\nimport { createComponent } from '../base-component';\n\nexport type TitleProps = TYPES.ITitle & BaseComponentProps;\n\nexport const Title = createComponent<TitleProps>('Title', 'title', undefined, true);\n"]}

package/cjs/table-components/component/tooltip.d.ts

@@ -0,0 +1,7 @@
+import type { BaseComponentProps } from '../base-component';
+export type TooltipProps = {
+    renderMode?: 'html';
+    isShowOverflowTextTooltip?: boolean;
+    confine?: boolean;
+} & BaseComponentProps;
+export declare const Tooltip: import("react").FC<TooltipProps>;

package/cjs/table-components/component/tooltip.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.Tooltip = void 0;
+
+const base_component_1 = require("../base-component");
+
+exports.Tooltip = (0, base_component_1.createComponent)("Tooltip", "tooltip", void 0, !0);
+//# sourceMappingURL=tooltip.js.map

package/cjs/table-components/component/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["table-components/component/tooltip.tsx"],"names":[],"mappings":";;;AACA,sDAAoD;AAWvC,QAAA,OAAO,GAAG,IAAA,gCAAe,EAAe,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC","file":"tooltip.js","sourcesContent":["import type { BaseComponentProps } from '../base-component';\nimport { createComponent } from '../base-component';\n\nexport type TooltipProps = {\n  /** html目前实现较完整 先默认html渲染方式 */\n  renderMode?: 'html'; // 目前暂不支持canvas方案\n  /** 代替原来hover:isShowTooltip配置 暂时需要将renderMode配置为html才能显示，canvas的还未开发*/\n  isShowOverflowTextTooltip?: boolean;\n  /** 是否将 tooltip 框限制在画布区域内，默认开启。针对renderMode:\"html\"有效 */\n  confine?: boolean;\n} & BaseComponentProps;\n\nexport const Tooltip = createComponent<TooltipProps>('Tooltip', 'tooltip', undefined, true);\n"]}

package/cjs/table-components/custom/custom-layout.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { CustomRenderFunctionArg } from 'k-vtable/es/ts-types';
+type CustomLayoutProps = {
+    componentId: string;
+};
+export type CustomLayoutFunctionArg = Partial<CustomRenderFunctionArg> & {
+    role?: 'custom-layout' | 'header-custom-layout';
+    renderDefault?: boolean;
+};
+export declare const CustomLayout: React.FC<CustomLayoutProps>;
+export {};

package/cjs/table-components/custom/custom-layout.js

@@ -0,0 +1,107 @@
+"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;
+}, __importDefault = this && this.__importDefault || function(mod) {
+    return mod && mod.__esModule ? mod : {
+        default: mod
+    };
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.CustomLayout = void 0;
+
+const react_1 = __importStar(require("react")), table_1 = __importDefault(require("../../context/table")), vrender_1 = require("k-vtable/es/vrender"), reconciler_1 = require("./reconciler"), constants_1 = require("react-reconciler/constants"), CustomLayout = (props, ref) => {
+    const {componentId: componentId, children: children} = props;
+    if (!(0, react_1.isValidElement)(children)) return null;
+    const context = (0, react_1.useContext)(table_1.default), {table: table} = context, isHeaderCustomLayout = "header-custom-layout" === children.props.role, container = (0, 
+    react_1.useRef)(new Map), createGraphic = (0, react_1.useCallback)((args => {
+        var _a, _b;
+        const key = `${null !== (_a = args.originCol) && void 0 !== _a ? _a : args.col}-${null !== (_b = args.originRow) && void 0 !== _b ? _b : args.row}${args.forComputation ? "-forComputation" : ""}`;
+        let group;
+        if (container.current.has(key)) {
+            const currentContainer = container.current.get(key);
+            reconcilorUpdateContainer(children, currentContainer, args), group = currentContainer.containerInfo;
+        } else {
+            group = new vrender_1.Group({});
+            const currentContainer = reconciler_1.reconcilor.createContainer(group, constants_1.LegacyRoot, null, null, null, "custom", null, null);
+            container.current.set(key, currentContainer), reconcilorUpdateContainer(children, currentContainer, args);
+        }
+        return {
+            rootContainer: group,
+            renderDefault: !!children.props.renderDefault
+        };
+    }), [ children ]), removeContainer = (0, react_1.useCallback)(((col, row) => {
+        const key = `${col}-${row}`;
+        if (container.current.has(key)) {
+            const currentContainer = container.current.get(key);
+            reconciler_1.reconcilor.updateContainer(null, currentContainer, null), currentContainer.containerInfo.delete(), 
+            container.current.delete(key);
+        }
+    }), []), removeAllContainer = (0, react_1.useCallback)((() => {
+        container.current.forEach(((value, key) => {
+            const currentContainer = value;
+            reconciler_1.reconcilor.updateContainer(null, currentContainer, null), currentContainer.containerInfo.delete();
+        })), container.current.clear();
+    }), []);
+    return (0, react_1.useLayoutEffect)((() => () => {}), []), (0, react_1.useLayoutEffect)((() => {
+        var _a, _b, _c, _d, _e, _f;
+        null == table || table.checkReactCustomLayout(), null === (_a = null == table ? void 0 : table.reactCustomLayout) || void 0 === _a || _a.setReactRemoveAllGraphic(componentId, removeAllContainer, isHeaderCustomLayout), 
+        table && !(null === (_b = table.reactCustomLayout) || void 0 === _b ? void 0 : _b.hasReactCreateGraphic(componentId, isHeaderCustomLayout)) ? (null === (_c = table.reactCustomLayout) || void 0 === _c || _c.setReactCreateGraphic(componentId, createGraphic, isHeaderCustomLayout), 
+        null === (_d = table.reactCustomLayout) || void 0 === _d || _d.setReactRemoveGraphic(componentId, removeContainer, isHeaderCustomLayout), 
+        null === (_e = table.reactCustomLayout) || void 0 === _e || _e.updateCustomCell(componentId, isHeaderCustomLayout)) : table && (null === (_f = table.reactCustomLayout) || void 0 === _f || _f.setReactCreateGraphic(componentId, createGraphic, isHeaderCustomLayout), 
+        container.current.forEach(((value, key) => {
+            const [col, row] = key.split("-").map(Number), {width: width, height: height} = getCellRect(col, row, table), currentContainer = value, args = {
+                col: col,
+                row: row,
+                dataValue: table.getCellOriginValue(col, row),
+                value: table.getCellValue(col, row) || "",
+                rect: {
+                    left: 0,
+                    top: 0,
+                    right: width,
+                    bottom: height,
+                    width: width,
+                    height: height
+                },
+                table: table
+            };
+            currentContainer.containerInfo;
+            reconcilorUpdateContainer(children, currentContainer, args), table.scenegraph.updateNextFrame();
+        })));
+    })), null;
+};
+
+function reconcilorUpdateContainer(children, currentContainer, args) {
+    reconciler_1.reconcilor.updateContainer(react_1.default.cloneElement(children, Object.assign({}, args)), currentContainer, null);
+}
+
+function getCellRect(col, row, table) {
+    const range = table.getCellRange(col, row);
+    return table.getCellsRect(range.start.col, range.start.row, range.end.col, range.end.row);
+}
+
+//# sourceMappingURL=custom-layout.js.map
+exports.CustomLayout = CustomLayout;

package/cjs/table-components/custom/custom-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["table-components/custom/custom-layout.tsx"],"names":[],"mappings":"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","file":"custom-layout.js","sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport type { PropsWithChildren, ReactElement } from 'react';\nimport React, { isValidElement, useCallback, useContext, useLayoutEffect, useRef } from 'react';\nimport RootTableContext from '../../context/table';\nimport { Group } from 'k-vtable/es/vrender';\nimport type { ICustomLayoutFuc, CustomRenderFunctionArg } from 'k-vtable/es/ts-types';\nimport type { FiberRoot } from 'react-reconciler';\nimport { reconcilor } from './reconciler';\nimport { LegacyRoot } from 'react-reconciler/constants';\n\ntype CustomLayoutProps = { componentId: string };\n\nexport type CustomLayoutFunctionArg = Partial<CustomRenderFunctionArg> & {\n  role?: 'custom-layout' | 'header-custom-layout';\n  renderDefault?: boolean;\n};\n\nexport const CustomLayout: React.FC<CustomLayoutProps> = (props: PropsWithChildren<CustomLayoutProps>, ref) => {\n  const { componentId, children } = props;\n  if (!isValidElement(children)) {\n    return null;\n  }\n  const context = useContext(RootTableContext);\n  const { table } = context;\n\n  const isHeaderCustomLayout = children.props.role === 'header-custom-layout';\n\n  // react customLayout component container cache\n  const container = useRef<Map<string, FiberRoot>>(new Map());\n\n  // customLayout function for vtable\n  const createGraphic: ICustomLayoutFuc = useCallback(\n    args => {\n      const key = `${args.originCol ?? args.col}-${args.originRow ?? args.row}${\n        args.forComputation ? '-forComputation' : ''\n      }`;\n      let group;\n      if (container.current.has(key)) {\n        const currentContainer = container.current.get(key);\n        reconcilorUpdateContainer(children, currentContainer, args);\n        group = currentContainer.containerInfo;\n      } else {\n        group = new Group({});\n        const currentContainer = reconcilor.createContainer(\n          group as any,\n          LegacyRoot,\n          null,\n          null,\n          null,\n          'custom',\n          null,\n          null\n        );\n        container.current.set(key, currentContainer);\n        reconcilorUpdateContainer(children, currentContainer, args);\n      }\n\n      return {\n        rootContainer: group,\n        renderDefault: !!children.props.renderDefault\n      };\n    },\n    [children]\n  );\n\n  const removeContainer = useCallback((col: number, row: number) => {\n    const key = `${col}-${row}`;\n    if (container.current.has(key)) {\n      const currentContainer = container.current.get(key);\n      reconcilor.updateContainer(null, currentContainer, null);\n      // group = currentContainer.containerInfo;\n      currentContainer.containerInfo.delete();\n      container.current.delete(key);\n    }\n  }, []);\n\n  const removeAllContainer = useCallback(() => {\n    container.current.forEach((value, key) => {\n      const currentContainer = value;\n      reconcilor.updateContainer(null, currentContainer, null);\n      currentContainer.containerInfo.delete();\n    });\n    container.current.clear();\n  }, []);\n\n  useLayoutEffect(() => {\n    // init and release\n    // eslint-disable-next-line no-undef\n    console.log('init', props, table);\n    // table && (table._reactCreateGraphic = createGraphic); // never go to here\n    // table?.renderWithRecreateCells();\n    return () => {\n      // eslint-disable-next-line no-undef\n      console.log('release', props, table);\n    };\n  }, []);\n\n  useLayoutEffect(() => {\n    // update props\n    // eslint-disable-next-line no-undef\n    console.log('update props', props, table);\n\n    table?.checkReactCustomLayout(); // init reactCustomLayout component\n    table?.reactCustomLayout?.setReactRemoveAllGraphic(componentId, removeAllContainer, isHeaderCustomLayout); // set customLayout function\n\n    if (table && !table.reactCustomLayout?.hasReactCreateGraphic(componentId, isHeaderCustomLayout)) {\n      table.reactCustomLayout?.setReactCreateGraphic(\n        componentId,\n        createGraphic,\n        // container.current,\n        isHeaderCustomLayout\n      ); // set customLayout function\n      table.reactCustomLayout?.setReactRemoveGraphic(componentId, removeContainer, isHeaderCustomLayout); // set customLayout function\n      table.reactCustomLayout?.updateCustomCell(componentId, isHeaderCustomLayout); // update cell content\n    } else if (table) {\n      table.reactCustomLayout?.setReactCreateGraphic(\n        componentId,\n        createGraphic,\n        // container.current,\n        isHeaderCustomLayout\n      ); // update customLayout function\n      // update all container\n      container.current.forEach((value, key) => {\n        const [col, row] = key.split('-').map(Number);\n        // const width = table.getColWidth(col); // to be fixed: may be merge cell\n        // const height = table.getRowHeight(row); // to be fixed: may be merge cell\n        const { width, height } = getCellRect(col, row, table);\n        const currentContainer = value;\n        const args = {\n          col,\n          row,\n          dataValue: table.getCellOriginValue(col, row),\n          value: table.getCellValue(col, row) || '',\n          rect: {\n            left: 0,\n            top: 0,\n            right: width,\n            bottom: height,\n            width,\n            height\n          },\n          table\n        };\n        // update element in container\n        const group = currentContainer.containerInfo;\n        reconcilorUpdateContainer(children, currentContainer, args);\n        // reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);\n        table.scenegraph.updateNextFrame();\n      });\n    }\n  });\n\n  return null;\n};\n\nfunction reconcilorUpdateContainer(children: ReactElement, currentContainer: any, args: any) {\n  reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);\n  // group = group.firstChild;\n  // if (isReactElement(group.attribute.html?.dom)) {\n  //   const div = document.createElement('div');\n  //   const root = ReactDOM.createRoot(div as HTMLElement);\n  //   root.render(group.attribute.html.dom);\n  //   group.attribute.html.dom = div;\n  //   // debugger;\n  //   // group.html.dom = div;\n  // }\n}\n\nfunction getCellRect(col: number, row: number, table: any) {\n  const range = table.getCellRange(col, row);\n  const rect = table.getCellsRect(range.start.col, range.start.row, range.end.col, range.end.row);\n  return rect;\n}\n"]}

package/cjs/table-components/custom/graphic.d.ts

@@ -0,0 +1,19 @@
+import type { ReactElement, ReactNode, Ref, JSXElementConstructor } from 'react';
+import type { IGraphic, IGroupGraphicAttribute, ITextGraphicAttribute, IEventParamsType, IArcGraphicAttribute, ICircleGraphicAttribute, IImageGraphicAttribute, ILineGraphicAttribute, IPathGraphicAttribute, IRectGraphicAttribute, ISymbolGraphicAttribute, IRichTextGraphicAttribute, IPolygonGraphicAttribute } from 'k-vtable/es/vrender';
+type GraphicProps<IGraphicGraphicAttribute> = {
+    attribute: IGraphicGraphicAttribute;
+    ref?: Ref<IGraphic>;
+    children?: ReactNode;
+} & IEventParamsType;
+export declare const Group: (props: GraphicProps<IGroupGraphicAttribute>) => ReactElement<GraphicProps<IGroupGraphicAttribute>, JSXElementConstructor<GraphicProps<IGroupGraphicAttribute>>>;
+export declare const Text: (props: GraphicProps<ITextGraphicAttribute>) => ReactElement<GraphicProps<ITextGraphicAttribute>, JSXElementConstructor<GraphicProps<ITextGraphicAttribute>>>;
+export declare const Arc: (props: GraphicProps<IArcGraphicAttribute>) => ReactElement<GraphicProps<IArcGraphicAttribute>, JSXElementConstructor<GraphicProps<IArcGraphicAttribute>>>;
+export declare const Circle: (props: GraphicProps<ICircleGraphicAttribute>) => ReactElement<GraphicProps<ICircleGraphicAttribute>, JSXElementConstructor<GraphicProps<ICircleGraphicAttribute>>>;
+export declare const Image: (props: GraphicProps<IImageGraphicAttribute>) => ReactElement<GraphicProps<IImageGraphicAttribute>, JSXElementConstructor<GraphicProps<IImageGraphicAttribute>>>;
+export declare const Line: (props: GraphicProps<ILineGraphicAttribute>) => ReactElement<GraphicProps<ILineGraphicAttribute>, JSXElementConstructor<GraphicProps<ILineGraphicAttribute>>>;
+export declare const Path: (props: GraphicProps<IPathGraphicAttribute>) => ReactElement<GraphicProps<IPathGraphicAttribute>, JSXElementConstructor<GraphicProps<IPathGraphicAttribute>>>;
+export declare const Rect: (props: GraphicProps<IRectGraphicAttribute>) => ReactElement<GraphicProps<IRectGraphicAttribute>, JSXElementConstructor<GraphicProps<IRectGraphicAttribute>>>;
+export declare const Symbol: (props: GraphicProps<ISymbolGraphicAttribute>) => ReactElement<GraphicProps<ISymbolGraphicAttribute>, JSXElementConstructor<GraphicProps<ISymbolGraphicAttribute>>>;
+export declare const RichText: (props: GraphicProps<IRichTextGraphicAttribute>) => ReactElement<GraphicProps<IRichTextGraphicAttribute>, JSXElementConstructor<GraphicProps<IRichTextGraphicAttribute>>>;
+export declare const Polygon: (props: GraphicProps<IPolygonGraphicAttribute>) => ReactElement<GraphicProps<IPolygonGraphicAttribute>, JSXElementConstructor<GraphicProps<IPolygonGraphicAttribute>>>;
+export {};

package/cjs/table-components/custom/graphic.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.Polygon = exports.RichText = exports.Symbol = exports.Rect = exports.Path = exports.Line = exports.Image = exports.Circle = exports.Arc = exports.Text = exports.Group = void 0, 
+exports.Group = "group", exports.Text = "text", exports.Arc = "arc", exports.Circle = "circle", 
+exports.Image = "image", exports.Line = "line", exports.Path = "path", exports.Rect = "rect", 
+exports.Symbol = "symbol", exports.RichText = "richtext", exports.Polygon = "polygon";
+//# sourceMappingURL=graphic.js.map

package/cjs/table-components/custom/graphic.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["table-components/custom/graphic.ts"],"names":[],"mappings":";;;AA2Ba,QAAA,KAAK,GAGhB,OAAc,CAAC;AAEJ,QAAA,IAAI,GAGf,MAAa,CAAC;AAEH,QAAA,GAAG,GAGd,KAAY,CAAC;AAEF,QAAA,MAAM,GAGjB,QAAe,CAAC;AAEL,QAAA,KAAK,GAGhB,OAAc,CAAC;AAEJ,QAAA,IAAI,GAGf,MAAa,CAAC;AAEH,QAAA,IAAI,GAGf,MAAa,CAAC;AAEH,QAAA,IAAI,GAGf,MAAa,CAAC;AAEH,QAAA,MAAM,GAGjB,QAAe,CAAC;AAEL,QAAA,QAAQ,GAKjB,UAAiB,CAAC;AAET,QAAA,OAAO,GAKhB,SAAgB,CAAC","file":"graphic.js","sourcesContent":["// export const Group = 'group';\n// export const Rect = 'rect';\n// export const Text = 'text';\n\nimport type { ReactElement, ReactNode, Ref, JSXElementConstructor } from 'react';\nimport type {\n  IGraphic,\n  IGroupGraphicAttribute,\n  ITextGraphicAttribute,\n  IEventParamsType,\n  IArcGraphicAttribute,\n  ICircleGraphicAttribute,\n  IImageGraphicAttribute,\n  ILineGraphicAttribute,\n  IPathGraphicAttribute,\n  IRectGraphicAttribute,\n  ISymbolGraphicAttribute,\n  IRichTextGraphicAttribute,\n  IPolygonGraphicAttribute\n} from 'k-vtable/es/vrender';\n\ntype GraphicProps<IGraphicGraphicAttribute> = {\n  attribute: IGraphicGraphicAttribute;\n  ref?: Ref<IGraphic>;\n  children?: ReactNode;\n} & IEventParamsType;\n\nexport const Group: (\n  props: GraphicProps<IGroupGraphicAttribute>\n) => ReactElement<GraphicProps<IGroupGraphicAttribute>, JSXElementConstructor<GraphicProps<IGroupGraphicAttribute>>> =\n  'group' as any;\n\nexport const Text: (\n  props: GraphicProps<ITextGraphicAttribute>\n) => ReactElement<GraphicProps<ITextGraphicAttribute>, JSXElementConstructor<GraphicProps<ITextGraphicAttribute>>> =\n  'text' as any;\n\nexport const Arc: (\n  props: GraphicProps<IArcGraphicAttribute>\n) => ReactElement<GraphicProps<IArcGraphicAttribute>, JSXElementConstructor<GraphicProps<IArcGraphicAttribute>>> =\n  'arc' as any;\n\nexport const Circle: (\n  props: GraphicProps<ICircleGraphicAttribute>\n) => ReactElement<GraphicProps<ICircleGraphicAttribute>, JSXElementConstructor<GraphicProps<ICircleGraphicAttribute>>> =\n  'circle' as any;\n\nexport const Image: (\n  props: GraphicProps<IImageGraphicAttribute>\n) => ReactElement<GraphicProps<IImageGraphicAttribute>, JSXElementConstructor<GraphicProps<IImageGraphicAttribute>>> =\n  'image' as any;\n\nexport const Line: (\n  props: GraphicProps<ILineGraphicAttribute>\n) => ReactElement<GraphicProps<ILineGraphicAttribute>, JSXElementConstructor<GraphicProps<ILineGraphicAttribute>>> =\n  'line' as any;\n\nexport const Path: (\n  props: GraphicProps<IPathGraphicAttribute>\n) => ReactElement<GraphicProps<IPathGraphicAttribute>, JSXElementConstructor<GraphicProps<IPathGraphicAttribute>>> =\n  'path' as any;\n\nexport const Rect: (\n  props: GraphicProps<IRectGraphicAttribute>\n) => ReactElement<GraphicProps<IRectGraphicAttribute>, JSXElementConstructor<GraphicProps<IRectGraphicAttribute>>> =\n  'rect' as any;\n\nexport const Symbol: (\n  props: GraphicProps<ISymbolGraphicAttribute>\n) => ReactElement<GraphicProps<ISymbolGraphicAttribute>, JSXElementConstructor<GraphicProps<ISymbolGraphicAttribute>>> =\n  'symbol' as any;\n\nexport const RichText: (\n  props: GraphicProps<IRichTextGraphicAttribute>\n) => ReactElement<\n  GraphicProps<IRichTextGraphicAttribute>,\n  JSXElementConstructor<GraphicProps<IRichTextGraphicAttribute>>\n> = 'richtext' as any;\n\nexport const Polygon: (\n  props: GraphicProps<IPolygonGraphicAttribute>\n) => ReactElement<\n  GraphicProps<IPolygonGraphicAttribute>,\n  JSXElementConstructor<GraphicProps<IPolygonGraphicAttribute>>\n> = 'polygon' as any;\n"]}

package/cjs/table-components/custom/reconciler.d.ts

@@ -0,0 +1,2 @@
+import ReactReconciler from 'react-reconciler';
+export declare const reconcilor: ReactReconciler.Reconciler<Graphic, any, any, Graphic, Graphic>;

package/cjs/table-components/custom/reconciler.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var __importDefault = this && this.__importDefault || function(mod) {
+    return mod && mod.__esModule ? mod : {
+        default: mod
+    };
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.reconcilor = void 0;
+
+const vrender_1 = require("k-vtable/es/vrender"), vutils_1 = require("@visactor/vutils"), react_1 = __importDefault(require("react")), react_reconciler_1 = __importDefault(require("react-reconciler")), constants_js_1 = require("react-reconciler/constants.js"), component_creater_1 = require("../../components/vrender-components/component-creater");
+
+function createGraphic(type, props) {
+    const component = (0, component_creater_1.createVRenderComponent)(type, props);
+    if (component) return component;
+    if (!vrender_1.application.graphicService.creator[type]) return;
+    return vrender_1.application.graphicService.creator[type](props.attribute);
+}
+
+function isEventProp(key, props) {
+    return key.startsWith("on") && (0, vutils_1.isFunction)(props[key]);
+}
+
+function bindEventsToGraphic(graphic, props) {
+    for (const key in props) isEventProp(key, props) && vrender_1.REACT_TO_CANOPUS_EVENTS[key] && graphic.addEventListener(vrender_1.REACT_TO_CANOPUS_EVENTS[key], props[key]);
+}
+
+function updateGraphicProps(graphic, newProps, oldProps) {
+    var _a;
+    for (const propKey in oldProps) isEventProp(propKey, oldProps) && oldProps[propKey] !== newProps[propKey] && graphic.removeEventListener(vrender_1.REACT_TO_CANOPUS_EVENTS[propKey], oldProps[propKey]);
+    for (const propKey in newProps) isEventProp(propKey, newProps) && oldProps[propKey] !== newProps[propKey] && graphic.addEventListener(vrender_1.REACT_TO_CANOPUS_EVENTS[propKey], newProps[propKey]);
+    const attribute = null !== (_a = newProps.attribute) && void 0 !== _a ? _a : (0, 
+    vutils_1.merge)({}, newProps);
+    graphic.initAttributes(attribute), "image" === graphic.type && graphic.loadImage(attribute.image);
+}
+
+//# sourceMappingURL=reconciler.js.map
+exports.reconcilor = (0, react_reconciler_1.default)({
+    supportsMutation: !0,
+    supportsPersistence: !1,
+    createInstance: (type, props, instance) => {
+        const graphic = createGraphic(type, props);
+        if (graphic) return bindEventsToGraphic(graphic, props), graphic;
+    },
+    createTextInstance: (text, instance) => {},
+    appendInitialChild: (parentInstance, childInstance) => {
+        parentInstance.add(childInstance);
+    },
+    finalizeInitialChildren: () => !1,
+    prepareUpdate: () => !0,
+    shouldSetTextContent: () => !1,
+    getRootHostContext: () => null,
+    getChildHostContext: () => null,
+    getPublicInstance: instance => instance,
+    prepareForCommit: () => null,
+    resetAfterCommit: () => {},
+    preparePortalMount: () => null,
+    scheduleTimeout: setTimeout,
+    cancelTimeout: clearTimeout,
+    noTimeout: -1,
+    isPrimaryRenderer: !1,
+    getCurrentEventPriority: () => constants_js_1.DefaultEventPriority,
+    getInstanceFromNode: node => null,
+    beforeActiveInstanceBlur: () => {},
+    afterActiveInstanceBlur: () => {},
+    prepareScopeUpdate: () => {},
+    getInstanceFromScope: () => {},
+    detachDeletedInstance: () => {},
+    supportsHydration: !1,
+    appendChild: (parentInstance, child) => {
+        parentInstance.add(child);
+    },
+    appendChildToContainer: (container, child) => {
+        container.add(child);
+    },
+    insertBefore: (parentInstance, child, beforeChild) => {
+        parentInstance.insertBefore(child, beforeChild);
+    },
+    insertInContainerBefore: (parentInstance, child, beforeChild) => {
+        parentInstance.insertBefore(child, beforeChild);
+    },
+    removeChild: (parentInstance, child) => {
+        child.delete();
+    },
+    removeChildFromContainer: (parentInstance, child) => {
+        child.delete();
+    },
+    commitUpdate: (instance, updatePayload, type, oldProps, newProps) => {
+        updateGraphicProps(instance, newProps, oldProps);
+    },
+    hideInstance: instance => {
+        instance.setAttribute("visible", !1);
+    },
+    unhideInstance: (instance, props) => {
+        instance.setAttribute("visible", !0);
+    },
+    clearContainer: container => {
+        container.removeAllChild();
+    },
+    commitTextUpdate: (textInstance, oldText, newText) => {}
+}), exports.reconcilor.injectIntoDevTools({
+    bundleType: 0,
+    version: react_1.default.version,
+    rendererPackageName: "react-vtable"
+});

package/cjs/table-components/custom/reconciler.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["table-components/custom/reconciler.ts"],"names":[],"mappings":"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","file":"reconciler.js","sourcesContent":["import { application, REACT_TO_CANOPUS_EVENTS, Tag } from 'k-vtable/es/vrender';\nimport type { Graphic, IGraphic, IGraphicCreator } from 'k-vtable/es/vrender';\nimport { isFunction, merge } from '@visactor/vutils';\nimport React from 'react';\nimport ReactReconciler from 'react-reconciler';\nimport { DefaultEventPriority } from 'react-reconciler/constants.js';\nimport { createVRenderComponent } from '../../components/vrender-components/component-creater';\n\ntype Instance = Graphic;\n\nexport const reconcilor = ReactReconciler({\n  supportsMutation: true,\n  supportsPersistence: false,\n\n  createInstance: (type: string, props: any, instance) => {\n    const graphic = createGraphic(type, props);\n    if (graphic) {\n      bindEventsToGraphic(graphic as IGraphic, props);\n    } else {\n      return undefined;\n      // createInstance\n      // graphic = createGraphic('group', {});\n    }\n    return graphic;\n  },\n\n  createTextInstance: (text, instance) => {\n    // const textGraphic = createText({ text });\n    // return textGraphic;\n    // debugger;\n    // return document.createTextNode(text);\n    return undefined;\n  },\n\n  appendInitialChild: (parentInstance: Instance, childInstance: Instance) => {\n    parentInstance.add(childInstance);\n  },\n\n  finalizeInitialChildren: () => false,\n\n  prepareUpdate: () => true,\n\n  shouldSetTextContent: () => false,\n\n  getRootHostContext: () => null,\n\n  getChildHostContext: () => null,\n\n  getPublicInstance: (instance: Instance) => {\n    return instance;\n  },\n\n  prepareForCommit: () => null,\n\n  resetAfterCommit: () => undefined,\n\n  preparePortalMount: () => null,\n\n  // eslint-disable-next-line no-undef\n  scheduleTimeout: setTimeout,\n  // eslint-disable-next-line no-undef\n  cancelTimeout: clearTimeout,\n\n  noTimeout: -1,\n  isPrimaryRenderer: false,\n\n  getCurrentEventPriority: () => DefaultEventPriority,\n\n  getInstanceFromNode: node => null,\n\n  beforeActiveInstanceBlur: () => undefined,\n\n  afterActiveInstanceBlur: () => undefined,\n\n  prepareScopeUpdate: () => undefined,\n\n  getInstanceFromScope: () => undefined,\n\n  detachDeletedInstance: () => undefined,\n\n  supportsHydration: false,\n\n  appendChild: (parentInstance: Instance, child: Instance) => {\n    parentInstance.add(child);\n  },\n  appendChildToContainer: (container: Instance, child: Instance) => {\n    container.add(child);\n  },\n\n  insertBefore: (parentInstance: Instance, child: Instance, beforeChild: Instance) => {\n    parentInstance.insertBefore(child, beforeChild);\n  },\n\n  insertInContainerBefore: (parentInstance: Instance, child: Instance, beforeChild: Instance) => {\n    parentInstance.insertBefore(child, beforeChild);\n  },\n\n  removeChild: (parentInstance: Instance, child: Instance) => {\n    child.delete();\n  },\n\n  removeChildFromContainer: (parentInstance: Instance, child: Instance) => {\n    child.delete();\n  },\n\n  commitUpdate: (instance, updatePayload, type, oldProps, newProps) => {\n    updateGraphicProps(instance, newProps, oldProps);\n  },\n\n  hideInstance: (instance: Instance) => {\n    instance.setAttribute('visible', false);\n  },\n\n  unhideInstance: (instance, props) => {\n    instance.setAttribute('visible', true);\n  },\n\n  clearContainer: (container: Instance) => {\n    container.removeAllChild();\n  },\n\n  commitTextUpdate: (textInstance: any, oldText: string, newText: string) => {\n    // debugger;\n  }\n});\n\nreconcilor.injectIntoDevTools({\n  // findFiberByHostInstance: () => {},\n  // @ts-ignore\n  // eslint-disable-next-line no-undef\n  bundleType: \"production\" !== 'production' ? 1 : 0,\n  version: React.version,\n  rendererPackageName: 'react-vtable'\n});\n\nfunction createGraphic(type: string, props: any) {\n  const component = createVRenderComponent(type, props);\n  if (component) {\n    return component;\n  }\n  if (!application.graphicService.creator[type as keyof IGraphicCreator]) {\n    return undefined;\n  }\n  const graphic = application.graphicService.creator[type as keyof IGraphicCreator]((props as any).attribute);\n  return graphic;\n}\n\nfunction isEventProp(key: string, props: any) {\n  return key.startsWith('on') && isFunction(props[key]);\n}\n\nfunction bindEventsToGraphic(graphic: IGraphic, props: any) {\n  for (const key in props) {\n    if (isEventProp(key, props) && REACT_TO_CANOPUS_EVENTS[key as keyof typeof REACT_TO_CANOPUS_EVENTS]) {\n      graphic.addEventListener(REACT_TO_CANOPUS_EVENTS[key as keyof typeof REACT_TO_CANOPUS_EVENTS], props[key]);\n    }\n  }\n}\n\nfunction updateGraphicProps(graphic: IGraphic, newProps: any, oldProps: any) {\n  // deal width event update\n  for (const propKey in oldProps) {\n    if (isEventProp(propKey, oldProps) && oldProps[propKey] !== newProps[propKey]) {\n      graphic.removeEventListener(\n        REACT_TO_CANOPUS_EVENTS[propKey as keyof typeof REACT_TO_CANOPUS_EVENTS],\n        oldProps[propKey]\n      );\n    }\n  }\n  for (const propKey in newProps) {\n    if (isEventProp(propKey, newProps) && oldProps[propKey] !== newProps[propKey]) {\n      graphic.addEventListener(\n        REACT_TO_CANOPUS_EVENTS[propKey as keyof typeof REACT_TO_CANOPUS_EVENTS],\n        newProps[propKey]\n      );\n    }\n  }\n  // update all attribute\n  const attribute = newProps.attribute ?? merge({}, newProps);\n  graphic.initAttributes(attribute);\n  if (graphic.type === 'image') {\n    graphic.loadImage(attribute.image);\n  }\n}\n"]}

package/cjs/table-components/custom/vtable-browser-env-contribution.d.ts

@@ -0,0 +1,6 @@
+import type { CreateDOMParamsType, IGraphic } from 'k-vtable/es/vrender';
+export type CreateDOMParamsTypeForVTable = CreateDOMParamsType & {
+    graphic: IGraphic;
+    style?: Record<string, any>;
+};
+export declare const reactEnvModule: any;

package/cjs/table-components/custom/vtable-browser-env-contribution.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.reactEnvModule = void 0;
+
+const k_vtable_1 = require("k-vtable"), vrender_1 = require("k-vtable/es/vrender"), vutils_1 = require("@visactor/vutils");
+
+exports.reactEnvModule = new vrender_1.ContainerModule(((bind, unbind, isBound, rebind) => {
+    bind(VTableBrowserEnvContribution).toSelf().inSingletonScope(), isBound(vrender_1.EnvContribution) ? rebind(vrender_1.EnvContribution).toService(VTableBrowserEnvContribution) : bind(vrender_1.EnvContribution).toService(VTableBrowserEnvContribution);
+}));
+
+class VTableBrowserEnvContribution extends vrender_1.BrowserEnvContribution {
+    updateDom(dom, params) {
+        var _a, _b;
+        const tableDiv = dom.parentElement;
+        if (tableDiv && params.graphic) {
+            const top = parseInt(params.style.top, 10), left = parseInt(params.style.left, 10);
+            let domWidth, domHeight;
+            if (dom.style.display = "none") {
+                const cellGroup = (0, k_vtable_1.getTargetCell)(params.graphic);
+                domWidth = null !== (_a = cellGroup.attribute.width) && void 0 !== _a ? _a : 1, 
+                domHeight = null !== (_b = cellGroup.attribute.height) && void 0 !== _b ? _b : 1;
+            } else domWidth = dom.offsetWidth, domHeight = dom.offsetHeight;
+            if (top + domHeight < 0 || left + domWidth < 0 || top > tableDiv.offsetHeight || left > tableDiv.offsetWidth) return dom.style.display = "none", 
+            !1;
+        }
+        const {width: width, height: height, style: style} = params;
+        return style && ((0, vutils_1.isString)(style) ? dom.setAttribute("style", style) : Object.keys(style).forEach((k => {
+            dom.style[k] = style[k];
+        }))), null != width && (dom.style.width = `${width}px`), null != height && (dom.style.height = `${height}px`), 
+        !0;
+    }
+}
+//# sourceMappingURL=vtable-browser-env-contribution.js.map

package/cjs/table-components/custom/vtable-browser-env-contribution.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["table-components/custom/vtable-browser-env-contribution.ts"],"names":[],"mappings":";;;AAAA,uCAAyC;AAEzC,iDAA+F;AAC/F,6CAA4C;AAO/B,QAAA,cAAc,GAAG,IAAI,yBAAe,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE;IAClF,IAAI,CAAC,4BAA4B,CAAC,CAAC,MAAM,EAAE,CAAC,gBAAgB,EAAE,CAAC;IAC/D,IAAI,OAAO,CAAC,yBAAe,CAAC,EAAE;QAC5B,MAAM,CAAC,yBAAe,CAAC,CAAC,SAAS,CAAC,4BAA4B,CAAC,CAAC;KACjE;SAAM;QACL,IAAI,CAAC,yBAAe,CAAC,CAAC,SAAS,CAAC,4BAA4B,CAAC,CAAC;KAC/D;AACH,CAAC,CAAC,CAAC;AAEH,MAAM,4BAA6B,SAAQ,gCAAsB;IAC/D,SAAS,CAAC,GAAgB,EAAE,MAAoC;;QAC9D,MAAM,QAAQ,GAAG,GAAG,CAAC,aAAa,CAAC;QACnC,IAAI,QAAQ,IAAI,MAAM,CAAC,OAAO,EAAE;YAC9B,MAAM,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;YAC3C,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAE7C,IAAI,QAAQ,CAAC;YACb,IAAI,SAAS,CAAC;YACd,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC,EAAE;gBAChC,MAAM,SAAS,GAAG,IAAA,wBAAa,EAAC,MAAM,CAAC,OAAO,CAAC,CAAC;gBAChD,QAAQ,GAAG,MAAA,SAAS,CAAC,SAAS,CAAC,KAAK,mCAAI,CAAC,CAAC;gBAC1C,SAAS,GAAG,MAAA,SAAS,CAAC,SAAS,CAAC,MAAM,mCAAI,CAAC,CAAC;aAC7C;iBAAM;gBACL,QAAQ,GAAG,GAAG,CAAC,WAAW,CAAC;gBAC3B,SAAS,GAAG,GAAG,CAAC,YAAY,CAAC;aAC9B;YACD,IAAI,GAAG,GAAG,SAAS,GAAG,CAAC,IAAI,IAAI,GAAG,QAAQ,GAAG,CAAC,IAAI,GAAG,GAAG,QAAQ,CAAC,YAAY,IAAI,IAAI,GAAG,QAAQ,CAAC,WAAW,EAAE;gBAC5G,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBAC3B,OAAO,KAAK,CAAC;aACd;SACF;QAED,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC;QAExC,IAAI,KAAK,EAAE;YACT,IAAI,IAAA,iBAAQ,EAAC,KAAK,CAAC,EAAE;gBACnB,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;aAClC;iBAAM;gBACL,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAM,EAAE,EAAE;oBACpC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;gBAC1B,CAAC,CAAC,CAAC;aACJ;SACF;QACD,IAAI,KAAK,IAAI,IAAI,EAAE;YACjB,GAAG,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAC;SAChC;QACD,IAAI,MAAM,IAAI,IAAI,EAAE;YAClB,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC;SAClC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;CACF","file":"vtable-browser-env-contribution.js","sourcesContent":["import { getTargetCell } from 'k-vtable';\nimport type { CreateDOMParamsType, IGraphic } from 'k-vtable/es/vrender';\nimport { ContainerModule, EnvContribution, BrowserEnvContribution } from 'k-vtable/es/vrender';\nimport { isString } from '@visactor/vutils';\n\nexport type CreateDOMParamsTypeForVTable = CreateDOMParamsType & {\n  graphic: IGraphic;\n  style?: Record<string, any>;\n};\n\nexport const reactEnvModule = new ContainerModule((bind, unbind, isBound, rebind) => {\n  bind(VTableBrowserEnvContribution).toSelf().inSingletonScope();\n  if (isBound(EnvContribution)) {\n    rebind(EnvContribution).toService(VTableBrowserEnvContribution);\n  } else {\n    bind(EnvContribution).toService(VTableBrowserEnvContribution);\n  }\n});\n\nclass VTableBrowserEnvContribution extends BrowserEnvContribution {\n  updateDom(dom: HTMLElement, params: CreateDOMParamsTypeForVTable): boolean {\n    const tableDiv = dom.parentElement;\n    if (tableDiv && params.graphic) {\n      const top = parseInt(params.style.top, 10);\n      const left = parseInt(params.style.left, 10);\n\n      let domWidth;\n      let domHeight;\n      if ((dom.style.display = 'none')) {\n        const cellGroup = getTargetCell(params.graphic);\n        domWidth = cellGroup.attribute.width ?? 1;\n        domHeight = cellGroup.attribute.height ?? 1;\n      } else {\n        domWidth = dom.offsetWidth;\n        domHeight = dom.offsetHeight;\n      }\n      if (top + domHeight < 0 || left + domWidth < 0 || top > tableDiv.offsetHeight || left > tableDiv.offsetWidth) {\n        dom.style.display = 'none';\n        return false;\n      }\n    }\n\n    const { width, height, style } = params;\n\n    if (style) {\n      if (isString(style)) {\n        dom.setAttribute('style', style);\n      } else {\n        Object.keys(style).forEach((k: any) => {\n          dom.style[k] = style[k];\n        });\n      }\n    }\n    if (width != null) {\n      dom.style.width = `${width}px`;\n    }\n    if (height != null) {\n      dom.style.height = `${height}px`;\n    }\n\n    return true;\n  }\n}\n"]}

package/cjs/table-components/custom/vtable-react-attribute-plugin.d.ts

@@ -0,0 +1,21 @@
+import type { CommonDomOptions, CreateDOMParamsType, IGraphic, IStage, SimpleDomStyleOptions } from 'k-vtable/es/vrender';
+import { ReactAttributePlugin } from 'k-vtable/es/vrender';
+export declare class VTableReactAttributePlugin extends ReactAttributePlugin {
+    htmlMap: Record<string, {
+        root?: any;
+        unmount?: () => void;
+        wrapContainer: HTMLElement;
+        nativeContainer: HTMLElement;
+        container: string | HTMLElement | null;
+        renderId: number;
+        graphic: IGraphic;
+    }>;
+    removeElement(id: string): void;
+    renderGraphicHTML(graphic: IGraphic): void;
+    getWrapContainer(stage: IStage, userContainer?: string | HTMLElement | null, domParams?: CreateDOMParamsType): {
+        wrapContainer: any;
+        nativeContainer: any;
+    };
+    updateStyleOfWrapContainer(graphic: IGraphic, stage: IStage, wrapContainer: HTMLElement, nativeContainer: HTMLElement, options: SimpleDomStyleOptions & CommonDomOptions): void;
+    protected drawHTML(): void;
+}

package/cjs/table-components/custom/vtable-react-attribute-plugin.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.VTableReactAttributePlugin = void 0;
+
+const vrender_1 = require("k-vtable/es/vrender"), vutils_1 = require("@visactor/vutils");
+
+class VTableReactAttributePlugin extends vrender_1.ReactAttributePlugin {
+    removeElement(id) {
+        super.removeElement(id), delete this.htmlMap[id];
+    }
+    renderGraphicHTML(graphic) {
+        var _a;
+        const {react: react} = graphic.attribute;
+        if (!react) return;
+        const stage = graphic.stage;
+        if (!stage) return;
+        const ReactDOM = stage.params.ReactDOM, {element: element} = react;
+        let {container: container} = react;
+        if (container && (container = checkFrozenContainer(graphic)), !element || !ReactDOM || !ReactDOM.createRoot && !ReactDOM.render) return;
+        const id = (0, vutils_1.isNil)(react.id) ? `${null !== (_a = graphic.id) && void 0 !== _a ? _a : graphic._uid}_react` : react.id;
+        if (this.htmlMap && this.htmlMap[id] && container && container !== this.htmlMap[id].container && this.removeElement(id), 
+        this.htmlMap && this.htmlMap[id]) ReactDOM.createRoot ? this.htmlMap[id].root.render(element) : ReactDOM.render(element, this.htmlMap[id].wrapContainer); else {
+            const {wrapContainer: wrapContainer, nativeContainer: nativeContainer} = this.getWrapContainer(stage, container);
+            if (wrapContainer) if (this.htmlMap || (this.htmlMap = {}), ReactDOM.createRoot) {
+                const root = ReactDOM.createRoot(wrapContainer);
+                root.render(element), this.htmlMap[id] = {
+                    root: root,
+                    wrapContainer: wrapContainer,
+                    nativeContainer: nativeContainer,
+                    container: container,
+                    renderId: this.renderId,
+                    graphic: graphic
+                };
+            } else ReactDOM.render(element, wrapContainer), this.htmlMap[id] = {
+                wrapContainer: wrapContainer,
+                nativeContainer: nativeContainer,
+                container: container,
+                renderId: this.renderId,
+                unmount: () => {
+                    ReactDOM.unmountComponentAtNode(wrapContainer);
+                },
+                graphic: graphic
+            };
+        }
+        if (!this.htmlMap || !this.htmlMap[id]) return;
+        const {wrapContainer: wrapContainer, nativeContainer: nativeContainer} = this.htmlMap[id];
+        this.updateStyleOfWrapContainer(graphic, stage, wrapContainer, nativeContainer, react), 
+        this.htmlMap[id].renderId = this.renderId;
+    }
+    getWrapContainer(stage, userContainer, domParams) {
+        let nativeContainer;
+        return nativeContainer = userContainer ? "string" == typeof userContainer ? vrender_1.application.global.getElementById(userContainer) : userContainer : stage.window.getContainer(), 
+        {
+            wrapContainer: vrender_1.application.global.createDom(Object.assign({
+                tagName: "div",
+                parent: nativeContainer
+            }, domParams)),
+            nativeContainer: nativeContainer
+        };
+    }
+    updateStyleOfWrapContainer(graphic, stage, wrapContainer, nativeContainer, options) {
+        const {pointerEvents: pointerEvents, penetrateEventList: penetrateEventList = []} = options;
+        let calculateStyle = this.parseDefaultStyleFromGraphic(graphic);
+        calculateStyle.display = !1 !== graphic.attribute.visible ? "block" : "none", calculateStyle.pointerEvents = !0 === pointerEvents ? "all" : pointerEvents || "none", 
+        "none" !== calculateStyle.pointerEvents && (this.removeWrapContainerEventListener(wrapContainer), 
+        penetrateEventList.forEach((event => {
+            "wheel" === event && (wrapContainer.addEventListener("wheel", this.onWheel), wrapContainer.addEventListener("wheel", (e => {
+                e.preventDefault();
+            }), !0));
+        }))), wrapContainer.style.position || (wrapContainer.style.position = "absolute");
+        let left = 0, top = 0;
+        const b = graphic.globalAABBBounds;
+        let anchorType = options.anchorType;
+        if ((0, vutils_1.isNil)(anchorType) && (anchorType = "text" === graphic.type ? "position" : "boundsLeftTop"), 
+        "boundsLeftTop" === anchorType && (anchorType = "top-left"), "position" === anchorType || b.empty()) {
+            const matrix = graphic.globalTransMatrix;
+            left = matrix.e, top = matrix.f;
+        } else {
+            const anchor = (0, vutils_1.calculateAnchorOfBounds)(b, anchorType);
+            left = anchor.x, top = anchor.y;
+        }
+        const containerTL = vrender_1.application.global.getElementTopLeft(nativeContainer, !1), windowTL = stage.window.getTopLeft(!1), offsetX = left + windowTL.left - containerTL.left, offsetTop = top + windowTL.top - containerTL.top;
+        if (calculateStyle.left = `${offsetX}px`, calculateStyle.top = `${offsetTop}px`, 
+        "text" === graphic.type && "position" === anchorType && (calculateStyle = Object.assign(Object.assign({}, calculateStyle), this.getTransformOfText(graphic))), 
+        (0, vutils_1.isFunction)(options.style)) {
+            const userStyle = options.style({
+                top: offsetTop,
+                left: offsetX,
+                width: b.width(),
+                height: b.height()
+            }, graphic, wrapContainer);
+            userStyle && (calculateStyle = Object.assign(Object.assign({}, calculateStyle), userStyle));
+        } else (0, vutils_1.isObject)(options.style) ? calculateStyle = Object.assign(Object.assign({}, calculateStyle), options.style) : (0, 
+        vutils_1.isString)(options.style) && options.style && (calculateStyle = Object.assign(Object.assign({}, calculateStyle), (0, 
+        vutils_1.styleStringToObject)(options.style)));
+        vrender_1.application.global.updateDom(wrapContainer, {
+            width: options.width,
+            height: options.height,
+            style: calculateStyle,
+            graphic: graphic
+        });
+    }
+    drawHTML() {
+        var _a;
+        "browser" === (null === (_a = null === vrender_1.application || void 0 === vrender_1.application ? void 0 : vrender_1.application.global) || void 0 === _a ? void 0 : _a.env) && (this.pluginService.stage.children.sort(((a, b) => {
+            var _a, _b;
+            return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : vrender_1.DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : vrender_1.DefaultAttribute.zIndex);
+        })).forEach((group => {
+            this.renderGroupHTML(group);
+        })), this.clearCacheContainer());
+    }
+}
+
+function checkFrozenContainer(graphic) {
+    const targetGroup = getTargetGroup(graphic);
+    if (!targetGroup) return null;
+    const {col: col, row: row, stage: stage} = targetGroup;
+    let {container: container} = graphic.attribute.react;
+    const {table: table} = stage;
+    return container === table.bodyDomContainer && col < table.frozenColCount && row >= table.rowCount - table.bottomFrozenRowCount ? container = table.bottomFrozenBodyDomContainer : container === table.bodyDomContainer && col >= table.colCount - table.rightFrozenColCount && row >= table.rowCount - table.bottomFrozenRowCount ? container = table.rightFrozenBottomDomContainer : container === table.bodyDomContainer && row >= table.rowCount - table.bottomFrozenRowCount ? container = table.bottomFrozenBodyDomContainer : container === table.bodyDomContainer && col < table.frozenColCount ? container = table.frozenBodyDomContainer : container === table.bodyDomContainer && col >= table.colCount - table.rightFrozenColCount ? container = table.rightFrozenBodyDomContainer : container === table.headerDomContainer && col < table.frozenColCount ? container = table.frozenHeaderDomContainer : container === table.headerDomContainer && col >= table.colCount - table.rightFrozenColCount && (container = table.rightFrozenHeaderDomContainer), 
+    container;
+}
+
+function getTargetGroup(target) {
+    for (;target && target.parent; ) {
+        if ("custom-container" === target.name) return target;
+        target = target.parent;
+    }
+    return null;
+}
+
+//# sourceMappingURL=vtable-react-attribute-plugin.js.map
+exports.VTableReactAttributePlugin = VTableReactAttributePlugin;

package/cjs/table-components/custom/vtable-react-attribute-plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["table-components/custom/vtable-react-attribute-plugin.ts"],"names":[],"mappings":";;;AASA,iDAA0F;AAC1F,6CAAuH;AAGvH,MAAa,0BAA2B,SAAQ,8BAAoB;IAalE,aAAa,CAAC,EAAU;QACtB,KAAK,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;QACxB,OAAO,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;IAC1B,CAAC;IAED,iBAAiB,CAAC,OAAiB;;QACjC,MAAM,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,SAAS,CAAC;QACpC,IAAI,CAAC,KAAK,EAAE;YACV,OAAO;SACR;QACD,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;QAC5B,IAAI,CAAC,KAAK,EAAE;YACV,OAAO;SACR;QACD,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;QACvC,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;QAC1B,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;QAE1B,IAAI,SAAS,EAAE;YACb,SAAS,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;SAC3C;QAED,IAAI,CAAC,CAAC,OAAO,IAAI,QAAQ,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAE;YACtE,OAAO;SACR;QACD,MAAM,EAAE,GAAG,IAAA,cAAK,EAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,MAAA,OAAO,CAAC,EAAE,mCAAI,OAAO,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC;QAE9E,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,SAAS,IAAI,SAAS,KAAK,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,SAAS,EAAE;YAC7F,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;SACxB;QAED,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;YAEtC,MAAM,EAAE,aAAa,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;YAEnF,IAAI,aAAa,EAAE;gBACjB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;oBACjB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;iBACnB;gBAED,IAAI,QAAQ,CAAC,UAAU,EAAE;oBACvB,MAAM,IAAI,GAAG,QAAQ,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;oBAChD,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;oBACrB,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,CAAC;iBAC1G;qBAAM;oBACL,QAAQ,CAAC,MAAM,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;oBAExC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG;wBACjB,aAAa;wBACb,eAAe;wBACf,SAAS;wBACT,QAAQ,EAAE,IAAI,CAAC,QAAQ;wBACvB,OAAO,EAAE,GAAG,EAAE;4BACZ,QAAQ,CAAC,sBAAsB,CAAC,aAAa,CAAC,CAAC;wBACjD,CAAC;wBACD,OAAO;qBACR,CAAC;iBACH;aACF;SACF;aAAM;YAEL,IAAI,QAAQ,CAAC,UAAU,EAAE;gBACvB,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;aACvC;iBAAM;gBACL,QAAQ,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC;aAC1D;SACF;QAED,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;YACtC,OAAO;SACR;QAED,MAAM,EAAE,aAAa,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAE5D,IAAI,CAAC,0BAA0B,CAAC,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC;QACvF,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;IAC5C,CAAC;IAED,gBAAgB,CAAC,KAAa,EAAE,aAA2C,EAAE,SAA+B;QAC1G,IAAI,eAAe,CAAC;QACpB,IAAI,aAAa,EAAE;YACjB,IAAI,OAAO,aAAa,KAAK,QAAQ,EAAE;gBACrC,eAAe,GAAG,qBAAW,CAAC,MAAM,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;aACpE;iBAAM;gBACL,eAAe,GAAG,aAAa,CAAC;aACjC;SACF;aAAM;YACL,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC;SAC/C;QAED,OAAO;YACL,aAAa,EAAE,qBAAW,CAAC,MAAM,CAAC,SAAS,iBAAG,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,IAAK,SAAS,EAAG;YACtG,eAAe;SAChB,CAAC;IACJ,CAAC;IAED,0BAA0B,CACxB,OAAiB,EACjB,KAAa,EACb,aAA0B,EAC1B,eAA4B,EAC5B,OAAiD;QAEjD,MAAM,EAAE,aAAa,EAAE,kBAAkB,GAAG,EAAE,EAAE,GAAG,OAAO,CAAC;QAC3D,IAAI,cAAc,GAAG,IAAI,CAAC,4BAA4B,CAAC,OAAO,CAAC,CAAC;QAEhE,cAAc,CAAC,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;QAEhF,cAAc,CAAC,aAAa,GAAG,aAAa,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC;QACvG,IAAI,cAAc,CAAC,aAAa,KAAK,MAAM,EAAE;YAE3C,IAAI,CAAC,gCAAgC,CAAC,aAAa,CAAC,CAAC;YAErD,kBAAkB,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gBACjC,IAAI,KAAK,KAAK,OAAO,EAAE;oBACrB,aAAa,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;oBAGtD,aAAa,CAAC,gBAAgB,CAC5B,OAAO,EACP,CAAC,CAAC,EAAE;wBACF,CAAC,CAAC,cAAc,EAAE,CAAC;oBACrB,CAAC,EACD,IAAI,CACL,CAAC;iBACH;YACH,CAAC,CAAC,CAAC;SACJ;QAGD,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE;YACjC,aAAa,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;SAE3C;QACD,IAAI,IAAI,GAAW,CAAC,CAAC;QACrB,IAAI,GAAG,GAAW,CAAC,CAAC;QACpB,MAAM,CAAC,GAAG,OAAO,CAAC,gBAAgB,CAAC;QAEnC,IAAI,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC;QAEpC,IAAI,IAAA,cAAK,EAAC,UAAU,CAAC,EAAE;YACrB,UAAU,GAAG,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC;SACrE;QAED,IAAI,UAAU,KAAK,eAAe,EAAE;YAElC,UAAU,GAAG,UAAU,CAAC;SACzB;QACD,IAAI,UAAU,KAAK,UAAU,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;YAC1C,MAAM,MAAM,GAAG,OAAO,CAAC,iBAAiB,CAAC;YACzC,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC;YAChB,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC;SAChB;aAAM;YACL,MAAM,MAAM,GAAG,IAAA,gCAAuB,EAAC,CAAC,EAAE,UAAU,CAAC,CAAC;YAEtD,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC;YAChB,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC;SAChB;QAID,MAAM,WAAW,GAAG,qBAAW,CAAC,MAAM,CAAC,iBAAiB,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;QACjF,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAChD,MAAM,OAAO,GAAG,IAAI,GAAG,QAAQ,CAAC,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC;QACxD,MAAM,SAAS,GAAG,GAAG,GAAG,QAAQ,CAAC,GAAG,GAAG,WAAW,CAAC,GAAG,CAAC;QAEvD,cAAc,CAAC,IAAI,GAAG,GAAG,OAAO,IAAI,CAAC;QACrC,cAAc,CAAC,GAAG,GAAG,GAAG,SAAS,IAAI,CAAC;QAEtC,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,IAAI,UAAU,KAAK,UAAU,EAAE;YACxD,cAAc,mCACT,cAAc,GACd,IAAI,CAAC,kBAAkB,CAAC,OAAgB,CAAC,CAC7C,CAAC;SACH;QAED,IAAI,IAAA,mBAAU,EAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAC7B,MAAM,SAAS,GAAG,OAAO,CAAC,KAAK,CAC7B,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,EACvE,OAAO,EACP,aAAa,CACd,CAAC;YAEF,IAAI,SAAS,EAAE;gBACb,cAAc,mCAAQ,cAAc,GAAK,SAAS,CAAE,CAAC;aACtD;SACF;aAAM,IAAI,IAAA,iBAAQ,EAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAClC,cAAc,mCAAQ,cAAc,GAAK,OAAO,CAAC,KAAK,CAAE,CAAC;SAC1D;aAAM,IAAI,IAAA,iBAAQ,EAAC,OAAO,CAAC,KAAK,CAAC,IAAI,OAAO,CAAC,KAAK,EAAE;YACnD,cAAc,mCAAQ,cAAc,GAAK,IAAA,4BAAmB,EAAC,OAAO,CAAC,KAAe,CAAC,CAAE,CAAC;SACzF;QAGD,qBAAW,CAAC,MAAM,CAAC,SAAS,CAAC,aAAa,EAAE;YAC1C,KAAK,EAAE,OAAO,CAAC,KAAK;YACpB,MAAM,EAAE,OAAO,CAAC,MAAM;YACtB,KAAK,EAAE,cAAc;YACrB,OAAO;SACwB,CAAC,CAAC;IACrC,CAAC;IAES,QAAQ;;QAChB,IAAI,CAAA,MAAA,qBAAW,aAAX,qBAAW,uBAAX,qBAAW,CAAE,MAAM,0CAAE,GAAG,MAAK,SAAS,EAAE;YACzC,IAAI,CAAC,aAAa,CAAC,KAAa,CAAC,QAAQ;iBACvC,IAAI,CAAC,CAAC,CAAW,EAAE,CAAW,EAAE,EAAE;;gBACjC,OAAO,CAAC,MAAA,CAAC,CAAC,SAAS,CAAC,MAAM,mCAAI,0BAAgB,CAAC,MAAM,CAAC,GAAG,CAAC,MAAA,CAAC,CAAC,SAAS,CAAC,MAAM,mCAAI,0BAAgB,CAAC,MAAM,CAAC,CAAC;YAC3G,CAAC,CAAC;iBACD,OAAO,CAAC,CAAC,KAAa,EAAE,EAAE;gBACzB,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;YAC9B,CAAC,CAAC,CAAC;YAEL,IAAI,CAAC,mBAAmB,EAAE,CAAC;SAC5B;IACH,CAAC;CACF;AAnOD,gEAmOC;AAED,SAAS,oBAAoB,CAAC,OAAiB;IAC7C,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;IAC5C,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO,IAAI,CAAC;KACb;IACD,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,WAAW,CAAC;IACxC,IAAI,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC;IAC5C,MAAM,EAAE,KAAK,EAAE,GAAG,KAAY,CAAC;IAE/B,IACE,SAAS,KAAK,KAAK,CAAC,gBAAgB;QACpC,GAAG,GAAG,KAAK,CAAC,cAAc;QAC1B,GAAG,IAAI,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,oBAAoB,EAClD;QACA,SAAS,GAAG,KAAK,CAAC,4BAA4B,CAAC;KAChD;SAAM,IACL,SAAS,KAAK,KAAK,CAAC,gBAAgB;QACpC,GAAG,IAAI,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,mBAAmB;QACjD,GAAG,IAAI,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,oBAAoB,EAClD;QACA,SAAS,GAAG,KAAK,CAAC,6BAA6B,CAAC;KACjD;SAAM,IAAI,SAAS,KAAK,KAAK,CAAC,gBAAgB,IAAI,GAAG,IAAI,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,oBAAoB,EAAE;QACrG,SAAS,GAAG,KAAK,CAAC,4BAA4B,CAAC;KAChD;SAAM,IAAI,SAAS,KAAK,KAAK,CAAC,gBAAgB,IAAI,GAAG,GAAG,KAAK,CAAC,cAAc,EAAE;QAC7E,SAAS,GAAG,KAAK,CAAC,sBAAsB,CAAC;KAC1C;SAAM,IAAI,SAAS,KAAK,KAAK,CAAC,gBAAgB,IAAI,GAAG,IAAI,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,mBAAmB,EAAE;QACpG,SAAS,GAAG,KAAK,CAAC,2BAA2B,CAAC;KAC/C;SAAM,IAAI,SAAS,KAAK,KAAK,CAAC,kBAAkB,IAAI,GAAG,GAAG,KAAK,CAAC,cAAc,EAAE;QAC/E,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC;KAC5C;SAAM,IAAI,SAAS,KAAK,KAAK,CAAC,kBAAkB,IAAI,GAAG,IAAI,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,mBAAmB,EAAE;QACtG,SAAS,GAAG,KAAK,CAAC,6BAA6B,CAAC;KACjD;IAGD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,SAAS,cAAc,CAAC,MAAW;IACjC,OAAO,MAAM,IAAI,MAAM,CAAC,MAAM,EAAE;QAC9B,IAAI,MAAM,CAAC,IAAI,KAAK,kBAAkB,EAAE;YACtC,OAAO,MAAM,CAAC;SACf;QACD,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;KACxB;IACD,OAAO,IAAI,CAAC;AACd,CAAC","file":"vtable-react-attribute-plugin.js","sourcesContent":["import type {\n  CommonDomOptions,\n  CreateDOMParamsType,\n  IGraphic,\n  IGroup,\n  IStage,\n  IText,\n  SimpleDomStyleOptions\n} from 'k-vtable/es/vrender';\nimport { DefaultAttribute, ReactAttributePlugin, application } from 'k-vtable/es/vrender';\nimport { calculateAnchorOfBounds, isFunction, isNil, isObject, isString, styleStringToObject } from '@visactor/vutils';\nimport type { CreateDOMParamsTypeForVTable } from './vtable-browser-env-contribution';\n\nexport class VTableReactAttributePlugin extends ReactAttributePlugin {\n  declare htmlMap: Record<\n    string,\n    {\n      root?: any;\n      unmount?: () => void;\n      wrapContainer: HTMLElement;\n      nativeContainer: HTMLElement;\n      container: string | HTMLElement | null;\n      renderId: number;\n      graphic: IGraphic;\n    }\n  >;\n  removeElement(id: string) {\n    super.removeElement(id);\n    delete this.htmlMap[id];\n  }\n\n  renderGraphicHTML(graphic: IGraphic) {\n    const { react } = graphic.attribute;\n    if (!react) {\n      return;\n    }\n    const stage = graphic.stage;\n    if (!stage) {\n      return;\n    }\n    const ReactDOM = stage.params.ReactDOM;\n    const { element } = react;\n    let { container } = react;\n    // deal with frozen container\n    if (container) {\n      container = checkFrozenContainer(graphic);\n    }\n\n    if (!(element && ReactDOM && (ReactDOM.createRoot || ReactDOM.render))) {\n      return;\n    }\n    const id = isNil(react.id) ? `${graphic.id ?? graphic._uid}_react` : react.id;\n\n    if (this.htmlMap && this.htmlMap[id] && container && container !== this.htmlMap[id].container) {\n      this.removeElement(id);\n    }\n\n    if (!this.htmlMap || !this.htmlMap[id]) {\n      // createa a wrapper contianer to be the root of react element\n      const { wrapContainer, nativeContainer } = this.getWrapContainer(stage, container);\n\n      if (wrapContainer) {\n        if (!this.htmlMap) {\n          this.htmlMap = {};\n        }\n\n        if (ReactDOM.createRoot) {\n          const root = ReactDOM.createRoot(wrapContainer);\n          root.render(element);\n          this.htmlMap[id] = { root, wrapContainer, nativeContainer, container, renderId: this.renderId, graphic };\n        } else {\n          ReactDOM.render(element, wrapContainer);\n\n          this.htmlMap[id] = {\n            wrapContainer,\n            nativeContainer,\n            container,\n            renderId: this.renderId,\n            unmount: () => {\n              ReactDOM.unmountComponentAtNode(wrapContainer);\n            },\n            graphic\n          };\n        }\n      }\n    } else {\n      // update react element\n      if (ReactDOM.createRoot) {\n        this.htmlMap[id].root.render(element);\n      } else {\n        ReactDOM.render(element, this.htmlMap[id].wrapContainer);\n      }\n    }\n\n    if (!this.htmlMap || !this.htmlMap[id]) {\n      return;\n    }\n\n    const { wrapContainer, nativeContainer } = this.htmlMap[id];\n\n    this.updateStyleOfWrapContainer(graphic, stage, wrapContainer, nativeContainer, react);\n    this.htmlMap[id].renderId = this.renderId;\n  }\n\n  getWrapContainer(stage: IStage, userContainer?: string | HTMLElement | null, domParams?: CreateDOMParamsType) {\n    let nativeContainer;\n    if (userContainer) {\n      if (typeof userContainer === 'string') {\n        nativeContainer = application.global.getElementById(userContainer);\n      } else {\n        nativeContainer = userContainer;\n      }\n    } else {\n      nativeContainer = stage.window.getContainer();\n    }\n    // 创建wrapGroup\n    return {\n      wrapContainer: application.global.createDom({ tagName: 'div', parent: nativeContainer, ...domParams }),\n      nativeContainer\n    };\n  }\n\n  updateStyleOfWrapContainer(\n    graphic: IGraphic,\n    stage: IStage,\n    wrapContainer: HTMLElement,\n    nativeContainer: HTMLElement,\n    options: SimpleDomStyleOptions & CommonDomOptions\n  ) {\n    const { pointerEvents, penetrateEventList = [] } = options;\n    let calculateStyle = this.parseDefaultStyleFromGraphic(graphic);\n\n    calculateStyle.display = graphic.attribute.visible !== false ? 'block' : 'none';\n    // 事件穿透\n    calculateStyle.pointerEvents = pointerEvents === true ? 'all' : pointerEvents ? pointerEvents : 'none';\n    if (calculateStyle.pointerEvents !== 'none') {\n      // 删除所有的事件\n      this.removeWrapContainerEventListener(wrapContainer);\n      // 监听所有的事件\n      penetrateEventList.forEach(event => {\n        if (event === 'wheel') {\n          wrapContainer.addEventListener('wheel', this.onWheel);\n\n          // hack for preventing drag touch cause page jump\n          wrapContainer.addEventListener(\n            'wheel',\n            e => {\n              e.preventDefault();\n            },\n            true\n          );\n        }\n      });\n    }\n\n    // 定位wrapGroup\n    if (!wrapContainer.style.position) {\n      wrapContainer.style.position = 'absolute';\n      // nativeContainer.style.position = 'relative'; // 'relative' will cause the problem of container position\n    }\n    let left: number = 0;\n    let top: number = 0;\n    const b = graphic.globalAABBBounds;\n\n    let anchorType = options.anchorType;\n\n    if (isNil(anchorType)) {\n      anchorType = graphic.type === 'text' ? 'position' : 'boundsLeftTop';\n    }\n\n    if (anchorType === 'boundsLeftTop') {\n      // 兼容老的配置，统一配置\n      anchorType = 'top-left';\n    }\n    if (anchorType === 'position' || b.empty()) {\n      const matrix = graphic.globalTransMatrix;\n      left = matrix.e;\n      top = matrix.f;\n    } else {\n      const anchor = calculateAnchorOfBounds(b, anchorType);\n\n      left = anchor.x;\n      top = anchor.y;\n    }\n\n    // 查看wrapGroup的位置\n    // const wrapGroupTL = application.global.getElementTopLeft(wrapGroup, false);\n    const containerTL = application.global.getElementTopLeft(nativeContainer, false);\n    const windowTL = stage.window.getTopLeft(false);\n    const offsetX = left + windowTL.left - containerTL.left;\n    const offsetTop = top + windowTL.top - containerTL.top;\n    // wrapGroup.style.transform = `translate(${offsetX}px, ${offsetTop}px)`;\n    calculateStyle.left = `${offsetX}px`;\n    calculateStyle.top = `${offsetTop}px`;\n\n    if (graphic.type === 'text' && anchorType === 'position') {\n      calculateStyle = {\n        ...calculateStyle,\n        ...this.getTransformOfText(graphic as IText)\n      };\n    }\n\n    if (isFunction(options.style)) {\n      const userStyle = options.style(\n        { top: offsetTop, left: offsetX, width: b.width(), height: b.height() },\n        graphic,\n        wrapContainer\n      );\n\n      if (userStyle) {\n        calculateStyle = { ...calculateStyle, ...userStyle };\n      }\n    } else if (isObject(options.style)) {\n      calculateStyle = { ...calculateStyle, ...options.style };\n    } else if (isString(options.style) && options.style) {\n      calculateStyle = { ...calculateStyle, ...styleStringToObject(options.style as string) };\n    }\n\n    // 更新样式\n    application.global.updateDom(wrapContainer, {\n      width: options.width,\n      height: options.height,\n      style: calculateStyle,\n      graphic\n    } as CreateDOMParamsTypeForVTable);\n  }\n\n  protected drawHTML() {\n    if (application?.global?.env === 'browser') {\n      (this.pluginService.stage as any).children // fix interactive layer problem\n        .sort((a: IGraphic, b: IGraphic) => {\n          return (a.attribute.zIndex ?? DefaultAttribute.zIndex) - (b.attribute.zIndex ?? DefaultAttribute.zIndex);\n        })\n        .forEach((group: IGroup) => {\n          this.renderGroupHTML(group);\n        });\n\n      this.clearCacheContainer();\n    }\n  }\n}\n\nfunction checkFrozenContainer(graphic: IGraphic) {\n  const targetGroup = getTargetGroup(graphic);\n  if (!targetGroup) {\n    return null;\n  }\n  const { col, row, stage } = targetGroup;\n  let { container } = graphic.attribute.react;\n  const { table } = stage as any;\n  // deal with react dom container\n  if (\n    container === table.bodyDomContainer &&\n    col < table.frozenColCount &&\n    row >= table.rowCount - table.bottomFrozenRowCount\n  ) {\n    container = table.bottomFrozenBodyDomContainer;\n  } else if (\n    container === table.bodyDomContainer &&\n    col >= table.colCount - table.rightFrozenColCount &&\n    row >= table.rowCount - table.bottomFrozenRowCount\n  ) {\n    container = table.rightFrozenBottomDomContainer;\n  } else if (container === table.bodyDomContainer && row >= table.rowCount - table.bottomFrozenRowCount) {\n    container = table.bottomFrozenBodyDomContainer;\n  } else if (container === table.bodyDomContainer && col < table.frozenColCount) {\n    container = table.frozenBodyDomContainer;\n  } else if (container === table.bodyDomContainer && col >= table.colCount - table.rightFrozenColCount) {\n    container = table.rightFrozenBodyDomContainer;\n  } else if (container === table.headerDomContainer && col < table.frozenColCount) {\n    container = table.frozenHeaderDomContainer;\n  } else if (container === table.headerDomContainer && col >= table.colCount - table.rightFrozenColCount) {\n    container = table.rightFrozenHeaderDomContainer;\n  }\n\n  // graphic.attribute.react.container = container;\n  return container;\n}\n\nfunction getTargetGroup(target: any) {\n  while (target && target.parent) {\n    if (target.name === 'custom-container') {\n      return target;\n    }\n    target = target.parent;\n  }\n  return null;\n}\n"]}