@visactor/vtable 0.13.4 → 0.14.0

package/cjs/render/layout/container.js

@@ -4,107 +4,22 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.Container = void 0;
 
-const vutils_1 = require("@visactor/vutils"), direction_1 = require("./direction"), element_1 = require("./element"), line_1 = require("./line"), rect_1 = require("./rect");
+const vutils_1 = require("@visactor/vutils"), vrender_1 = require("@visactor/vrender");
 
-class Container extends element_1.BaseElement {
-    constructor(options) {
-        super(options), this.type = "container", this.needCalcSize = !1, this.lines = [], 
-        this.currentLineY = 0, this.offsetY = 0, this.direction = options.direction || "row", 
-        this.justifyContent = options.justifyContent || "start", this.alignItems = options.alignItems || "start", 
-        this.alignContent = options.alignContent || "start", (0, vutils_1.isNumber)(options.width) ? this.width = options.width : (this._widthObj = options.width, 
-        this.needCalcSize = !0), (0, vutils_1.isNumber)(options.height) ? this.height = options.height : (this._heightObj = options.height, 
-        this.needCalcSize = !0), this.directionKey = direction_1.DIRECTION_KEY[this.direction], 
-        this.showBounds = options.showBounds || !1, this.initLayoutSize();
-    }
-    add(element) {
-        if (this.needCalcSize) throw new Error("Need to specify a parent element before adding a child element when use percent size!");
-        "container" === element.type && element.calcSize(this.width, this.height), this.currentLine && this.currentLine.canAdd(element) ? this.currentLine.add(element) : (this.currentLine && (this.currentLine.addAble = !1, 
-        this.currentLineY += this.currentLine[this.directionKey.height], this.currentLine.lineFinish()), 
-        this.currentLine = new line_1.Line(this[this.directionKey.width], this.direction, this.justifyContent, this.alignItems), 
-        this.currentLine[this.directionKey.y] = this.currentLineY, this.currentLine.add(element), 
-        this.lines.push(this.currentLine));
-    }
-    updateYAlign() {
-        const offsetY = this[this.directionKey.height] - this.currentLineY;
-        "center" === this.alignContent ? this.offsetY = offsetY / 2 : "start" === this.alignContent ? this.offsetY = 0 : this.offsetY = offsetY;
-    }
-    getSize() {
-        const result = {
-            width: 0,
-            height: 0
-        };
-        this.currentLine && this.currentLine.addAble ? result[this.directionKey.height] = this.currentLineY + this.currentLine[this.directionKey.height] : result[this.directionKey.height] = this.currentLineY;
-        for (let i = 0; i < this.lines.length; i++) {
-            const line = this.lines[i];
-            result[this.directionKey.width] < line[this.directionKey.width] && (result[this.directionKey.width] = line[this.directionKey.width]);
-        }
-        return result;
-    }
-    getContentSize() {
-        const result = {
-            width: 0,
-            height: 0
-        }, calcFlag = {
-            width: !0,
-            height: !0
-        };
-        this.isRoot || this._heightObj || (calcFlag.height = !1, result.height = this.height), 
-        this.isRoot || this._widthObj || (calcFlag.width = !1, result.width = this.width);
-        for (let i = 0; i < this.lines.length; i++) {
-            const size = this.lines[i].getContentSize();
-            calcFlag[this.directionKey.width] && result[this.directionKey.width] < size[this.directionKey.width] && (result[this.directionKey.width] = size[this.directionKey.width]), 
-            calcFlag[this.directionKey.height] && (result[this.directionKey.height] += size[this.directionKey.height]);
-        }
-        return result;
-    }
-    calcSize(parentWidth, parentHeight) {
-        this._heightObj && (this.height = parentHeight * this._heightObj.percent / 100 + this._heightObj.delta, 
-        this.needCalcSize = !1, this.initLayoutSize()), this._widthObj && (this.width = parentWidth * this._widthObj.percent / 100 + this._widthObj.delta, 
-        this.needCalcSize = !1, this.initLayoutSize());
-    }
-    getElements(parentPos = {
-        parentX: 0,
-        parentY: 0
-    }, isHover = !1, isSelect = !1) {
-        var _a, _b, _c;
-        this.currentLine && this.currentLine.addAble && (this.currentLine.addAble = !1, 
-        this.currentLineY += this.currentLine[this.directionKey.height], this.currentLine.lineFinish()), 
-        this.updateYAlign();
-        const elements = [];
-        if (this.background && this.background.fill) {
-            const backgroundRect = new rect_1.Rect({
-                width: this.width,
-                height: this.height,
-                stroke: null !== (_a = this.background.stroke) && void 0 !== _a && _a,
-                fill: this.background.fill,
-                cornerRadius: null !== (_b = this.background.cornerRadius) && void 0 !== _b ? _b : 0,
-                lineWidth: null !== (_c = this.background.lineWidth) && void 0 !== _c ? _c : 1
-            });
-            backgroundRect.x += this.x + parentPos.parentX, backgroundRect.y += this.y + parentPos.parentY, 
-            elements.push(backgroundRect);
-        }
-        if (this.showBounds) {
-            const boundsRect = new rect_1.Rect({
-                width: this.width,
-                height: this.height,
-                cornerRadius: 0,
-                stroke: "red",
-                fill: "rgba(255, 0, 0, 0.2)",
-                lineWidth: 4
-            });
-            boundsRect.x += this.x + parentPos.parentX, boundsRect.y += this.y + parentPos.parentY, 
-            elements.push(boundsRect);
-        }
-        for (let i = 0; i < this.lines.length; i++) {
-            const line = this.lines[i];
-            line[this.directionKey.y] += this.offsetY;
-            const linesElements = line.getElements({
-                [this.directionKey.parentX]: this.x + parentPos.parentX,
-                [this.directionKey.parentY]: this.y + parentPos.parentY
-            }, isHover, isSelect);
-            elements.push(...linesElements);
-        }
-        return elements;
+class Container extends vrender_1.Group {
+    constructor(containerOptions) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        containerOptions.direction && (containerOptions.flexDirection = containerOptions.direction), 
+        !containerOptions.justifyContent || "start" !== containerOptions.justifyContent && "end" !== containerOptions.justifyContent || (containerOptions.justifyContent = "flex-" + containerOptions.justifyContent), 
+        !containerOptions.alignItems || "start" !== containerOptions.alignItems && "end" !== containerOptions.alignItems || (containerOptions.alignItems = "flex-" + containerOptions.alignItems), 
+        !containerOptions.alignContent || "start" !== containerOptions.alignContent && "end" !== containerOptions.alignContent || (containerOptions.alignContent = "flex-" + containerOptions.alignContent), 
+        containerOptions.display = "flex", containerOptions.flexDirection || (containerOptions.flexDirection = "row"), 
+        containerOptions.clip = !0, containerOptions.fill = null === (_a = null == containerOptions ? void 0 : containerOptions.background) || void 0 === _a ? void 0 : _a.fill, 
+        containerOptions.stroke = null === (_b = null == containerOptions ? void 0 : containerOptions.background) || void 0 === _b ? void 0 : _b.stroke, 
+        containerOptions.lineWidth = null === (_c = null == containerOptions ? void 0 : containerOptions.background) || void 0 === _c ? void 0 : _c.lineWidth, 
+        containerOptions.cornerRadius = null === (_d = null == containerOptions ? void 0 : containerOptions.background) || void 0 === _d ? void 0 : _d.cornerRadius;
+        const isPaddingNumber = (0, vutils_1.isArray)(containerOptions.boundsPadding), padding = [ null !== (_f = null !== (_e = containerOptions.marginTop) && void 0 !== _e ? _e : isPaddingNumber ? containerOptions.boundsPadding[0] : containerOptions.boundsPadding) && void 0 !== _f ? _f : 0, null !== (_h = null !== (_g = containerOptions.marginRight) && void 0 !== _g ? _g : isPaddingNumber ? containerOptions.boundsPadding[1] : containerOptions.boundsPadding) && void 0 !== _h ? _h : 0, null !== (_l = null !== (_j = containerOptions.marginBottom) && void 0 !== _j ? _j : isPaddingNumber ? null !== (_k = containerOptions.boundsPadding[2]) && void 0 !== _k ? _k : containerOptions.boundsPadding[0] : containerOptions.boundsPadding) && void 0 !== _l ? _l : 0, null !== (_p = null !== (_m = containerOptions.marginLeft) && void 0 !== _m ? _m : isPaddingNumber ? null !== (_o = containerOptions.boundsPadding[3]) && void 0 !== _o ? _o : containerOptions.boundsPadding[1] : containerOptions.boundsPadding) && void 0 !== _p ? _p : 0 ];
+        containerOptions.boundsPadding = padding, super(containerOptions);
     }
 }
 

package/cjs/render/layout/container.js.map

@@ -1 +1 @@
-{"version":3,"sources":["render/layout/container.ts"],"names":[],"mappings":"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","file":"container.js","sourcesContent":["import { isNumber } from '@visactor/vutils';\nimport type { BaseTableAPI } from '../../ts-types/base-table';\nimport type { DirectionKey } from './direction';\nimport { DIRECTION_KEY } from './direction';\nimport type { ElementOptions } from './element';\nimport { BaseElement } from './element';\nimport { Line } from './line';\nimport type { percentCalcObj } from './percent-calc';\nimport { Rect } from './rect';\n\ntype containerOptions = {\n  width?: number | percentCalcObj;\n  height?: number | percentCalcObj;\n  direction?: 'row' | 'column'; // 布局主方向\n  justifyContent?: 'start' | 'end' | 'center'; // 布局方向上的对齐方式\n  alignItems?: 'start' | 'end' | 'center'; // 布局交叉方向上的对齐方式\n  alignContent?: 'start' | 'end' | 'center'; // 布局交叉方向上多根轴线的对齐方式\n  showBounds?: boolean; // 是否显示bounds\n} & ElementOptions;\n\nexport class Container extends BaseElement {\n  type: 'container' = 'container';\n  declare width: number;\n  _widthObj: percentCalcObj;\n  declare height: number;\n  _heightObj: percentCalcObj;\n  needCalcSize = false;\n  direction: 'row' | 'column'; // 布局主方向\n  justifyContent: 'start' | 'end' | 'center'; // 布局方向上的对齐方式\n  alignItems: 'start' | 'end' | 'center'; // 布局交叉方向上的对齐方式\n  alignContent: 'start' | 'end' | 'center'; // 布局交叉方向上多根轴线的对齐方式\n  lines: Line[] = [];\n  currentLine?: Line;\n  currentLineY = 0;\n  table: BaseTableAPI;\n  directionKey: DirectionKey;\n  showBounds: boolean;\n  offsetY = 0;\n  isRoot?: boolean;\n\n  constructor(options: containerOptions) {\n    super(options);\n    this.direction = options.direction || 'row';\n    this.justifyContent = options.justifyContent || 'start';\n    this.alignItems = options.alignItems || 'start';\n    this.alignContent = options.alignContent || 'start';\n\n    if (isNumber(options.width)) {\n      this.width = options.width as number;\n    } else {\n      this._widthObj = options.width as percentCalcObj;\n      this.needCalcSize = true;\n    }\n    if (isNumber(options.height)) {\n      this.height = options.height as number;\n    } else {\n      this._heightObj = options.height as percentCalcObj;\n      this.needCalcSize = true;\n    }\n\n    this.directionKey = DIRECTION_KEY[this.direction];\n\n    this.showBounds = options.showBounds || false;\n\n    this.initLayoutSize();\n  }\n\n  add(element: BaseElement) {\n    if (this.needCalcSize) {\n      throw new Error('Need to specify a parent element before adding a child element when use percent size!');\n    }\n\n    if (element.type === 'container') {\n      (element as Container).calcSize(this.width, this.height);\n    }\n\n    if (this.currentLine && this.currentLine.canAdd(element)) {\n      this.currentLine.add(element);\n    } else {\n      if (this.currentLine) {\n        this.currentLine.addAble = false; // 关闭当前行\n        this.currentLineY += this.currentLine[this.directionKey.height]; // 更新目前line y位置\n        this.currentLine.lineFinish();\n      }\n      // this.currentLine = new Line(this.width);\n      this.currentLine = new Line(this[this.directionKey.width], this.direction, this.justifyContent, this.alignItems);\n      this.currentLine[this.directionKey.y] = this.currentLineY;\n      this.currentLine.add(element);\n      this.lines.push(this.currentLine);\n    }\n  }\n\n  // 交叉方向上多根轴线的对齐方式\n  updateYAlign() {\n    const offsetY = this[this.directionKey.height] - this.currentLineY;\n    if (this.alignContent === 'center') {\n      this.offsetY = offsetY / 2;\n    } else if (this.alignContent === 'start') {\n      this.offsetY = 0;\n    } else {\n      this.offsetY = offsetY;\n    }\n  }\n\n  getSize() {\n    const result = {\n      width: 0,\n      height: 0\n    };\n    if (this.currentLine && this.currentLine.addAble) {\n      result[this.directionKey.height] = this.currentLineY + this.currentLine[this.directionKey.height];\n    } else {\n      result[this.directionKey.height] = this.currentLineY;\n    }\n\n    for (let i = 0; i < this.lines.length; i++) {\n      const line = this.lines[i];\n      if (result[this.directionKey.width] < line[this.directionKey.width]) {\n        result[this.directionKey.width] = line[this.directionKey.width];\n      }\n    }\n    return result;\n  }\n\n  getContentSize() {\n    const result = {\n      width: 0,\n      height: 0\n    };\n\n    const calcFlag = {\n      width: true,\n      height: true\n    };\n\n    if (!this.isRoot && !this._heightObj) {\n      calcFlag.height = false;\n      result.height = this.height;\n    }\n    if (!this.isRoot && !this._widthObj) {\n      calcFlag.width = false;\n      result.width = this.width;\n    }\n\n    for (let i = 0; i < this.lines.length; i++) {\n      const line = this.lines[i];\n      const size = line.getContentSize();\n      if (calcFlag[this.directionKey.width] && result[this.directionKey.width] < size[this.directionKey.width]) {\n        result[this.directionKey.width] = size[this.directionKey.width];\n      }\n\n      if (calcFlag[this.directionKey.height]) {\n        result[this.directionKey.height] += size[this.directionKey.height];\n      }\n    }\n\n    return result;\n  }\n\n  calcSize(parentWidth: number, parentHeight: number) {\n    if (this._heightObj) {\n      this.height = (parentHeight * this._heightObj.percent) / 100 + this._heightObj.delta;\n      this.needCalcSize = false;\n      this.initLayoutSize();\n    }\n    if (this._widthObj) {\n      this.width = (parentWidth * this._widthObj.percent) / 100 + this._widthObj.delta;\n      this.needCalcSize = false;\n      this.initLayoutSize();\n    }\n  }\n\n  // 获取平坦后的全部子图元，更新子图元xy位置信息\n  getElements(\n    parentPos: { parentX: number; parentY: number } = { parentX: 0, parentY: 0 },\n    isHover = false,\n    isSelect = false\n  ) {\n    // 关闭最后一行\n    if (this.currentLine && this.currentLine.addAble) {\n      this.currentLine.addAble = false; // 关闭当前行\n      this.currentLineY += this.currentLine[this.directionKey.height]; // 更新目前line y位置\n      this.currentLine.lineFinish();\n    }\n\n    // 处理alignContent\n    this.updateYAlign();\n\n    const elements = [];\n    if (this.background && this.background.fill) {\n      const backgroundRect = new Rect({\n        width: this.width,\n        height: this.height,\n        stroke: this.background.stroke ?? false,\n        fill: this.background.fill,\n        cornerRadius: this.background.cornerRadius ?? 0,\n        lineWidth: this.background.lineWidth ?? 1\n      });\n      backgroundRect.x += this.x + parentPos.parentX;\n      backgroundRect.y += this.y + parentPos.parentY;\n      elements.push(backgroundRect);\n    }\n    if (this.showBounds) {\n      const boundsRect = new Rect({\n        width: this.width,\n        height: this.height,\n        cornerRadius: 0,\n        stroke: 'red',\n        fill: 'rgba(255, 0, 0, 0.2)',\n        lineWidth: 4\n      });\n      boundsRect.x += this.x + parentPos.parentX;\n      boundsRect.y += this.y + parentPos.parentY;\n      elements.push(boundsRect);\n    }\n    // const parentPos = { parentX, parentY };\n    for (let i = 0; i < this.lines.length; i++) {\n      const line = this.lines[i];\n      line[this.directionKey.y] += this.offsetY;\n      // const linesElements = line.getElements(table, this.x + parentX, this.y + parentY);\n      const linesElements = line.getElements(\n        {\n          [this.directionKey.parentX]: this.x + parentPos.parentX,\n          [this.directionKey.parentY]: this.y + parentPos.parentY\n        } as any,\n        isHover,\n        isSelect\n      );\n      elements.push(...linesElements);\n    }\n\n    return elements;\n  }\n}\n"]}
+{"version":3,"sources":["render/layout/container.ts"],"names":[],"mappings":"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","file":"container.js","sourcesContent":["import { isArray } from '@visactor/vutils';\nimport type { IGroupGraphicAttribute } from '@visactor/vrender';\nimport { Group } from '@visactor/vrender';\nimport type { percentCalcObj } from './percent-calc';\n\nexport type IContainerOptions = {\n  width?: number | percentCalcObj;\n  height?: number | percentCalcObj;\n  marginTop?: number;\n  marginRight?: number;\n  marginBottom?: number;\n  marginLeft?: number;\n} & IGroupGraphicAttribute;\n\nexport class Container extends Group {\n  constructor(containerOptions: IContainerOptions) {\n    if ((containerOptions as any).direction) {\n      containerOptions.flexDirection = (containerOptions as any).direction;\n    }\n    if (\n      containerOptions.justifyContent &&\n      ((containerOptions.justifyContent as any) === 'start' || (containerOptions.justifyContent as any) === 'end')\n    ) {\n      containerOptions.justifyContent = ('flex-' + containerOptions.justifyContent) as any;\n    }\n\n    if (\n      containerOptions.alignItems &&\n      ((containerOptions.alignItems as any) === 'start' || (containerOptions.alignItems as any) === 'end')\n    ) {\n      containerOptions.alignItems = ('flex-' + containerOptions.alignItems) as any;\n    }\n\n    if (\n      containerOptions.alignContent &&\n      ((containerOptions.alignContent as any) === 'start' || (containerOptions.alignContent as any) === 'end')\n    ) {\n      containerOptions.alignContent = ('flex-' + containerOptions.alignContent) as any;\n    }\n    containerOptions.display = 'flex';\n    if (!containerOptions.flexDirection) {\n      containerOptions.flexDirection = 'row';\n    }\n\n    containerOptions.clip = true;\n    containerOptions.fill = (containerOptions?.background as any)?.fill;\n    containerOptions.stroke = (containerOptions?.background as any)?.stroke;\n    containerOptions.lineWidth = (containerOptions?.background as any)?.lineWidth;\n    containerOptions.cornerRadius = (containerOptions?.background as any)?.cornerRadius;\n    // containerOptions.flexWrap = 'nowrap';\n\n    const isPaddingNumber = isArray(containerOptions.boundsPadding);\n    const padding = [\n      containerOptions.marginTop ??\n        (isPaddingNumber ? containerOptions.boundsPadding[0] : containerOptions.boundsPadding) ??\n        0,\n      containerOptions.marginRight ??\n        (isPaddingNumber ? containerOptions.boundsPadding[1] : containerOptions.boundsPadding) ??\n        0,\n      containerOptions.marginBottom ??\n        (isPaddingNumber\n          ? containerOptions.boundsPadding[2] ?? containerOptions.boundsPadding[0]\n          : containerOptions.boundsPadding) ??\n        0,\n      containerOptions.marginLeft ??\n        (isPaddingNumber\n          ? containerOptions.boundsPadding[3] ?? containerOptions.boundsPadding[1]\n          : containerOptions.boundsPadding) ??\n        0\n    ];\n    containerOptions.boundsPadding = padding;\n\n    super(containerOptions);\n  }\n}\n"]}

package/cjs/render/layout/group-element.d.ts

@@ -1,25 +1,5 @@
-import type { AlignItems, DirectionKey } from './direction';
-import type { ElementOptions } from './element';
-import { BaseElement } from './element';
-type GroupElementOptions = {
-    direction?: 'row' | 'column';
-    alignItems?: AlignItems;
-} & ElementOptions;
-export declare class GroupElement extends BaseElement {
-    type: 'group-element';
-    direction: 'row' | 'column';
-    alignItems?: AlignItems;
-    width: number;
-    height: number;
-    children: BaseElement[];
-    directionKey: DirectionKey;
-    constructor(options: GroupElementOptions);
-    add(element: BaseElement): void;
-    updateHeight(element: BaseElement): void;
-    getOffsetY(element: BaseElement): number;
-    getElements(parentPos?: {
-        parentX: number;
-        parentY: number;
-    }, isHover?: boolean, isSelect?: boolean): BaseElement[];
+import type { IContainerOptions } from './container';
+import { Container } from './container';
+export declare class GroupElement extends Container {
+    constructor(option: IContainerOptions);
 }
-export {};

package/cjs/render/layout/group-element.js

@@ -4,47 +4,11 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.GroupElement = void 0;
 
-const direction_1 = require("./direction"), element_1 = require("./element");
+const container_1 = require("./container");
 
-class GroupElement extends element_1.BaseElement {
-    constructor(options) {
-        super(options), this.type = "group-element", this.width = 0, this.height = 0, this.children = [], 
-        this.direction = options.direction || "row", this.alignItems = options.alignItems || "start", 
-        this.directionKey = direction_1.DIRECTION_KEY[this.direction];
-    }
-    add(element) {
-        element.x = this.width, this.width += element.layoutWidth, this.children.push(element), 
-        this.updateHeight(element), this.initLayoutSize();
-    }
-    updateHeight(element) {
-        element.layoutHeight > this.height && (this.height = element.layoutHeight);
-    }
-    getOffsetY(element) {
-        switch (this.alignItems) {
-          case "start":
-          default:
-            return 0;
-
-          case "center":
-            return (this[this.directionKey.height] - element[this.directionKey.layoutHeight]) / 2;
-
-          case "end":
-            return this[this.directionKey.height] - element[this.directionKey.layoutHeight];
-        }
-    }
-    getElements(parentPos = {
-        parentX: 0,
-        parentY: 0
-    }, isHover = !1, isSelect = !1) {
-        var _a, _b;
-        const elements = [];
-        for (let i = 0; i < this.children.length; i++) {
-            const element = this.children[i];
-            "icon" === element.type && ("mouseenter_cell" === (null === (_a = element.cache) || void 0 === _a ? void 0 : _a.visibleTime) && !isHover || "click_cell" === (null === (_b = element.cache) || void 0 === _b ? void 0 : _b.visibleTime) && !isSelect) || (element[this.directionKey.x] += this[this.directionKey.dx] + this[this.directionKey.x] + parentPos.parentX, 
-            element[this.directionKey.y] += this.getOffsetY(element) + this[this.directionKey.dy] + this[this.directionKey.y] + parentPos.parentY, 
-            elements.push(element));
-        }
-        return elements;
+class GroupElement extends container_1.Container {
+    constructor(option) {
+        option.flexWrap = "nowrap", super(option);
     }
 }
 

package/cjs/render/layout/group-element.js.map

@@ -1 +1 @@
-{"version":3,"sources":["render/layout/group-element.ts"],"names":[],"mappings":"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","file":"group-element.js","sourcesContent":["import type { AlignItems, DirectionKey } from './direction';\nimport { DIRECTION_KEY } from './direction';\nimport type { ElementOptions } from './element';\nimport { BaseElement } from './element';\nimport type { Icon } from './icon';\n\ntype GroupElementOptions = {\n  direction?: 'row' | 'column';\n  alignItems?: AlignItems;\n} & ElementOptions;\n\nexport class GroupElement extends BaseElement {\n  type: 'group-element' = 'group-element';\n  direction: 'row' | 'column';\n  alignItems?: AlignItems;\n  width = 0;\n  height = 0;\n  children: BaseElement[] = [];\n  directionKey: DirectionKey;\n\n  constructor(options: GroupElementOptions) {\n    super(options);\n    this.direction = options.direction || 'row';\n    this.alignItems = options.alignItems || 'start';\n\n    this.directionKey = DIRECTION_KEY[this.direction];\n  }\n\n  add(element: BaseElement) {\n    element.x = this.width;\n    this.width += element.layoutWidth;\n    this.children.push(element);\n    this.updateHeight(element);\n    this.initLayoutSize();\n  }\n\n  updateHeight(element: BaseElement) {\n    if (element.layoutHeight > this.height) {\n      this.height = element.layoutHeight;\n    }\n  }\n\n  getOffsetY(element: BaseElement): number {\n    switch (this.alignItems) {\n      case 'start':\n        return 0;\n      case 'center':\n        return (this[this.directionKey.height] - element[this.directionKey.layoutHeight]) / 2;\n      case 'end':\n        return this[this.directionKey.height] - element[this.directionKey.layoutHeight];\n      default:\n        return 0;\n    }\n  }\n\n  // 获取平坦后的全部子图元，更新子图元xy位置信息\n  getElements(\n    parentPos: { parentX: number; parentY: number } = { parentX: 0, parentY: 0 },\n    isHover = false,\n    isSelect = false\n  ) {\n    const elements = [];\n    for (let i = 0; i < this.children.length; i++) {\n      const element = this.children[i];\n      // element.getSize(table);\n      // element.x = this.width;\n      // this.width += element.layoutWidth;\n      // this.updateHeight(element);\n\n      if (\n        element.type === 'icon' &&\n        (((element as Icon).cache?.visibleTime === 'mouseenter_cell' && !isHover) ||\n          ((element as Icon).cache?.visibleTime === 'click_cell' && !isSelect))\n      ) {\n        continue;\n      }\n\n      element[this.directionKey.x] += this[this.directionKey.dx] + this[this.directionKey.x] + parentPos.parentX;\n      element[this.directionKey.y] +=\n        this.getOffsetY(element) + this[this.directionKey.dy] + this[this.directionKey.y] + parentPos.parentY;\n      elements.push(element);\n    }\n\n    return elements;\n  }\n}\n"]}
+{"version":3,"sources":["render/layout/group-element.ts"],"names":[],"mappings":";;;AACA,2CAAwC;AAExC,MAAa,YAAa,SAAQ,qBAAS;IACzC,YAAY,MAAyB;QACnC,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,KAAK,CAAC,MAAM,CAAC,CAAC;IAChB,CAAC;CACF;AALD,oCAKC","file":"group-element.js","sourcesContent":["import type { IContainerOptions } from './container';\nimport { Container } from './container';\n\nexport class GroupElement extends Container {\n  constructor(option: IContainerOptions) {\n    option.flexWrap = 'nowrap';\n    super(option);\n  }\n}\n"]}

package/cjs/render/layout/group.d.ts

@@ -0,0 +1,12 @@
+import type { IGroupGraphicAttribute } from '@visactor/vrender';
+import { Group as VGroup } from '@visactor/vrender';
+type IGroupOption = {
+    marginTop?: number;
+    marginRight?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+} & IGroupGraphicAttribute;
+export declare class Group extends VGroup {
+    constructor(options: IGroupOption);
+}
+export {};

package/cjs/render/layout/group.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.Group = void 0;
+
+const vrender_1 = require("@visactor/vrender"), vutils_1 = require("@visactor/vutils");
+
+class Group extends vrender_1.Group {
+    constructor(options) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const isPaddingNumber = (0, vutils_1.isArray)(options.boundsPadding), padding = [ null !== (_b = null !== (_a = options.marginTop) && void 0 !== _a ? _a : isPaddingNumber ? options.boundsPadding[0] : options.boundsPadding) && void 0 !== _b ? _b : 0, null !== (_d = null !== (_c = options.marginRight) && void 0 !== _c ? _c : isPaddingNumber ? options.boundsPadding[1] : options.boundsPadding) && void 0 !== _d ? _d : 0, null !== (_g = null !== (_e = options.marginBottom) && void 0 !== _e ? _e : isPaddingNumber ? null !== (_f = options.boundsPadding[2]) && void 0 !== _f ? _f : options.boundsPadding[0] : options.boundsPadding) && void 0 !== _g ? _g : 0, null !== (_k = null !== (_h = options.marginLeft) && void 0 !== _h ? _h : isPaddingNumber ? null !== (_j = options.boundsPadding[3]) && void 0 !== _j ? _j : options.boundsPadding[1] : options.boundsPadding) && void 0 !== _k ? _k : 0 ];
+        options.boundsPadding = padding, super(options);
+    }
+}
+
+exports.Group = Group;
+//# sourceMappingURL=group.js.map

package/cjs/render/layout/group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["render/layout/group.ts"],"names":[],"mappings":";;;AACA,+CAAoD;AACpD,6CAA2C;AAS3C,MAAa,KAAM,SAAQ,eAAM;IAC/B,YAAY,OAAqB;;QAC/B,MAAM,eAAe,GAAG,IAAA,gBAAO,EAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QACvD,MAAM,OAAO,GAAG;YACd,MAAA,MAAA,OAAO,CAAC,SAAS,mCAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,mCAAI,CAAC;YAC9F,MAAA,MAAA,OAAO,CAAC,WAAW,mCAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,mCAAI,CAAC;YAChG,MAAA,MAAA,OAAO,CAAC,YAAY,mCAClB,CAAC,eAAe,CAAC,CAAC,CAAC,MAAA,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,mCAAI,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,mCAChG,CAAC;YACH,MAAA,MAAA,OAAO,CAAC,UAAU,mCAChB,CAAC,eAAe,CAAC,CAAC,CAAC,MAAA,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,mCAAI,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,mCAChG,CAAC;SACJ,CAAC;QACF,OAAO,CAAC,aAAa,GAAG,OAAO,CAAC;QAEhC,KAAK,CAAC,OAAO,CAAC,CAAC;IACjB,CAAC;CACF;AAjBD,sBAiBC","file":"group.js","sourcesContent":["import type { IGroupGraphicAttribute } from '@visactor/vrender';\nimport { Group as VGroup } from '@visactor/vrender';\nimport { isArray } from '@visactor/vutils';\n\ntype IGroupOption = {\n  marginTop?: number;\n  marginRight?: number;\n  marginBottom?: number;\n  marginLeft?: number;\n} & IGroupGraphicAttribute;\n\nexport class Group extends VGroup {\n  constructor(options: IGroupOption) {\n    const isPaddingNumber = isArray(options.boundsPadding);\n    const padding = [\n      options.marginTop ?? (isPaddingNumber ? options.boundsPadding[0] : options.boundsPadding) ?? 0,\n      options.marginRight ?? (isPaddingNumber ? options.boundsPadding[1] : options.boundsPadding) ?? 0,\n      options.marginBottom ??\n        (isPaddingNumber ? options.boundsPadding[2] ?? options.boundsPadding[0] : options.boundsPadding) ??\n        0,\n      options.marginLeft ??\n        (isPaddingNumber ? options.boundsPadding[3] ?? options.boundsPadding[1] : options.boundsPadding) ??\n        0\n    ];\n    options.boundsPadding = padding;\n\n    super(options);\n  }\n}\n"]}

package/cjs/render/layout/icon.d.ts

@@ -1,21 +1,21 @@
-import type { ElementOptions } from './element';
-import { BaseElement } from './element';
+import type { IImageGraphicAttribute } from '@visactor/vrender';
+import { Image } from '@visactor/vrender';
 import type { ColumnIconOption } from '../../ts-types';
-type IconOptions = {
+type IIconOptions = {
     width: number;
     height: number;
     svg?: string;
     iconName?: string;
-} & ElementOptions;
-export declare class Icon extends BaseElement {
+    marginTop?: number;
+    marginRight?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+} & IImageGraphicAttribute;
+export declare class Icon extends Image {
     id: string;
-    type: 'icon';
-    width: number;
-    height: number;
     svg: string;
     iconName: string;
-    cursor?: string;
     cache?: ColumnIconOption;
-    constructor(options: IconOptions);
+    constructor(options: IIconOptions);
 }
 export {};

package/cjs/render/layout/icon.js

@@ -29,18 +29,20 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.Icon = void 0;
 
-const vutils_1 = require("@visactor/vutils"), element_1 = require("./element"), registerIcons = __importStar(require("../../icons"));
+const vrender_1 = require("@visactor/vrender"), vutils_1 = require("@visactor/vutils"), registerIcons = __importStar(require("../../icons"));
 
-class Icon extends element_1.BaseElement {
+class Icon extends vrender_1.Image {
     constructor(options) {
-        var _a, _b, _c;
-        if (super(options), this.type = "icon", this.iconName = options.iconName, (0, vutils_1.isString)(this.iconName)) {
-            const cache = registerIcons.get()[this.iconName];
-            cache && (this.cache = cache, this.width = cache.width, this.height = cache.height, 
-            this.svg = cache.svg, this.cursor = cache.cursor);
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        let cache;
+        if ((0, vutils_1.isString)(options.iconName)) {
+            cache = registerIcons.get()[options.iconName], cache && (options.width = null !== (_a = options.width) && void 0 !== _a ? _a : cache.width, 
+            options.height = null !== (_b = options.height) && void 0 !== _b ? _b : cache.height, 
+            options.svg = cache.svg, options.cursor = cache.cursor);
         }
-        this.width = null !== (_a = options.width) && void 0 !== _a ? _a : this.width, this.height = null !== (_b = options.height) && void 0 !== _b ? _b : this.height, 
-        this.svg = null !== (_c = options.svg) && void 0 !== _c ? _c : this.svg, this.initLayoutSize();
+        options.svg && (options.image = options.svg);
+        const isPaddingNumber = (0, vutils_1.isArray)(options.boundsPadding), padding = [ null !== (_d = null !== (_c = options.marginTop) && void 0 !== _c ? _c : isPaddingNumber ? options.boundsPadding[0] : options.boundsPadding) && void 0 !== _d ? _d : 0, null !== (_f = null !== (_e = options.marginRight) && void 0 !== _e ? _e : isPaddingNumber ? options.boundsPadding[1] : options.boundsPadding) && void 0 !== _f ? _f : 0, null !== (_j = null !== (_g = options.marginBottom) && void 0 !== _g ? _g : isPaddingNumber ? null !== (_h = options.boundsPadding[2]) && void 0 !== _h ? _h : options.boundsPadding[0] : options.boundsPadding) && void 0 !== _j ? _j : 0, null !== (_m = null !== (_k = options.marginLeft) && void 0 !== _k ? _k : isPaddingNumber ? null !== (_l = options.boundsPadding[3]) && void 0 !== _l ? _l : options.boundsPadding[1] : options.boundsPadding) && void 0 !== _m ? _m : 0 ];
+        options.boundsPadding = padding, super(options), this.cache = cache;
     }
 }
 

package/cjs/render/layout/icon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["render/layout/icon.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA4C;AAE5C,uCAAwC;AACxC,2DAA6C;AAU7C,MAAa,IAAK,SAAQ,qBAAW;IAUnC,YAAY,OAAoB;;QAC9B,KAAK,CAAC,OAAO,CAAC,CAAC;QATjB,SAAI,GAAW,MAAM,CAAC;QAUpB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;QACjC,IAAI,IAAA,iBAAQ,EAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YAC3B,MAAM,UAAU,GAAG,aAAa,CAAC,GAAG,EAAE,CAAC;YACvC,MAAM,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YACxC,IAAI,KAAK,EAAE;gBACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;gBACnB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;gBACzB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;gBAC3B,IAAI,CAAC,GAAG,GAAI,KAAa,CAAC,GAAG,CAAC;gBAC9B,IAAI,CAAC,MAAM,GAAI,KAAa,CAAC,MAAM,CAAC;aACrC;SACF;QAGD,IAAI,CAAC,KAAK,GAAG,MAAA,OAAO,CAAC,KAAK,mCAAI,IAAI,CAAC,KAAK,CAAC;QACzC,IAAI,CAAC,MAAM,GAAG,MAAA,OAAO,CAAC,MAAM,mCAAI,IAAI,CAAC,MAAM,CAAC;QAC5C,IAAI,CAAC,GAAG,GAAG,MAAA,OAAO,CAAC,GAAG,mCAAI,IAAI,CAAC,GAAG,CAAC;QAEnC,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;CACF;AAhCD,oBAgCC","file":"icon.js","sourcesContent":["import { isString } from '@visactor/vutils';\nimport type { ElementOptions } from './element';\nimport { BaseElement } from './element';\nimport * as registerIcons from '../../icons';\nimport type { ColumnIconOption } from '../../ts-types';\n\ntype IconOptions = {\n  width: number;\n  height: number;\n  svg?: string;\n  iconName?: string;\n} & ElementOptions;\n\nexport class Icon extends BaseElement {\n  declare id: string;\n  type: 'icon' = 'icon';\n  declare width: number;\n  declare height: number;\n  svg: string;\n  iconName: string;\n  cursor?: string;\n  cache?: ColumnIconOption;\n\n  constructor(options: IconOptions) {\n    super(options);\n    this.iconName = options.iconName;\n    if (isString(this.iconName)) {\n      const regedIcons = registerIcons.get();\n      const cache = regedIcons[this.iconName];\n      if (cache) {\n        this.cache = cache;\n        this.width = cache.width;\n        this.height = cache.height;\n        this.svg = (cache as any).svg;\n        this.cursor = (cache as any).cursor;\n      }\n    }\n\n    // options中的配置可以覆盖cache\n    this.width = options.width ?? this.width;\n    this.height = options.height ?? this.height;\n    this.svg = options.svg ?? this.svg;\n\n    this.initLayoutSize();\n  }\n}\n"]}
+{"version":3,"sources":["render/layout/icon.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,+CAA0C;AAC1C,6CAAqD;AACrD,2DAA6C;AAc7C,MAAa,IAAK,SAAQ,eAAK;IAM7B,YAAY,OAAqB;;QAC/B,IAAI,KAAK,CAAC;QACV,IAAI,IAAA,iBAAQ,EAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YAC9B,MAAM,UAAU,GAAG,aAAa,CAAC,GAAG,EAAE,CAAC;YACvC,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;YACrC,IAAI,KAAK,EAAE;gBACT,OAAO,CAAC,KAAK,GAAG,MAAA,OAAO,CAAC,KAAK,mCAAI,KAAK,CAAC,KAAK,CAAC;gBAC7C,OAAO,CAAC,MAAM,GAAG,MAAA,OAAO,CAAC,MAAM,mCAAI,KAAK,CAAC,MAAM,CAAC;gBAChD,OAAO,CAAC,GAAG,GAAI,KAAa,CAAC,GAAG,CAAC;gBACjC,OAAO,CAAC,MAAM,GAAI,KAAa,CAAC,MAAM,CAAC;aACxC;SACF;QACD,IAAI,OAAO,CAAC,GAAG,EAAE;YACf,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC;SAC7B;QAED,MAAM,eAAe,GAAG,IAAA,gBAAO,EAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QACvD,MAAM,OAAO,GAAG;YACd,MAAA,MAAA,OAAO,CAAC,SAAS,mCAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,mCAAI,CAAC;YAC9F,MAAA,MAAA,OAAO,CAAC,WAAW,mCAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,mCAAI,CAAC;YAChG,MAAA,MAAA,OAAO,CAAC,YAAY,mCAClB,CAAC,eAAe,CAAC,CAAC,CAAC,MAAA,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,mCAAI,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,mCAChG,CAAC;YACH,MAAA,MAAA,OAAO,CAAC,UAAU,mCAChB,CAAC,eAAe,CAAC,CAAC,CAAC,MAAA,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,mCAAI,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,mCAChG,CAAC;SACJ,CAAC;QACF,OAAO,CAAC,aAAa,GAAG,OAAO,CAAC;QAEhC,KAAK,CAAC,OAAO,CAAC,CAAC;QACf,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;CACF;AAtCD,oBAsCC","file":"icon.js","sourcesContent":["import type { IImageGraphicAttribute } from '@visactor/vrender';\nimport { Image } from '@visactor/vrender';\nimport { isArray, isString } from '@visactor/vutils';\nimport * as registerIcons from '../../icons';\nimport type { ColumnIconOption } from '../../ts-types';\n\ntype IIconOptions = {\n  width: number;\n  height: number;\n  svg?: string;\n  iconName?: string;\n  marginTop?: number;\n  marginRight?: number;\n  marginBottom?: number;\n  marginLeft?: number;\n} & IImageGraphicAttribute;\n\nexport class Icon extends Image {\n  declare id: string;\n  svg: string;\n  iconName: string;\n  cache?: ColumnIconOption;\n\n  constructor(options: IIconOptions) {\n    let cache;\n    if (isString(options.iconName)) {\n      const regedIcons = registerIcons.get();\n      cache = regedIcons[options.iconName];\n      if (cache) {\n        options.width = options.width ?? cache.width;\n        options.height = options.height ?? cache.height;\n        options.svg = (cache as any).svg;\n        options.cursor = (cache as any).cursor;\n      }\n    }\n    if (options.svg) {\n      options.image = options.svg;\n    }\n\n    const isPaddingNumber = isArray(options.boundsPadding);\n    const padding = [\n      options.marginTop ?? (isPaddingNumber ? options.boundsPadding[0] : options.boundsPadding) ?? 0,\n      options.marginRight ?? (isPaddingNumber ? options.boundsPadding[1] : options.boundsPadding) ?? 0,\n      options.marginBottom ??\n        (isPaddingNumber ? options.boundsPadding[2] ?? options.boundsPadding[0] : options.boundsPadding) ??\n        0,\n      options.marginLeft ??\n        (isPaddingNumber ? options.boundsPadding[3] ?? options.boundsPadding[1] : options.boundsPadding) ??\n        0\n    ];\n    options.boundsPadding = padding;\n\n    super(options);\n    this.cache = cache;\n  }\n}\n"]}

package/cjs/render/layout/image.d.ts

@@ -1,21 +1,14 @@
-import type { ElementOptions } from './element';
-import { BaseElement } from './element';
-import type { ColumnIconOption } from '../../ts-types';
-type ImageOptions = {
-    width: number;
-    height: number;
+import type { IImageGraphicAttribute } from '@visactor/vrender';
+import { Image as VImage } from '@visactor/vrender';
+type IImageOptions = {
     src?: string;
     shape?: 'circle' | 'square';
-} & ElementOptions;
-export declare class Image extends BaseElement {
-    id: string;
-    type: 'image';
-    width: number;
-    height: number;
-    src: string;
-    cursor?: string;
-    cache?: ColumnIconOption;
-    shape?: 'circle' | 'square';
-    constructor(options: ImageOptions);
+    marginTop?: number;
+    marginRight?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+} & IImageGraphicAttribute;
+export declare class Image extends VImage {
+    constructor(options: IImageOptions);
 }
 export {};

package/cjs/render/layout/image.js

@@ -4,15 +4,14 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.Image = void 0;
 
-const element_1 = require("./element");
+const vrender_1 = require("@visactor/vrender"), vutils_1 = require("@visactor/vutils");
 
-class Image extends element_1.BaseElement {
+class Image extends vrender_1.Image {
     constructor(options) {
-        var _a, _b, _c, _d;
-        super(options), this.type = "image", this.width = null !== (_a = options.width) && void 0 !== _a ? _a : this.width, 
-        this.height = null !== (_b = options.height) && void 0 !== _b ? _b : this.height, 
-        this.src = null !== (_c = options.src) && void 0 !== _c ? _c : this.src, this.shape = null !== (_d = options.shape) && void 0 !== _d ? _d : this.shape, 
-        this.initLayoutSize();
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        options.src && (options.image = options.src), "circle" === options.shape && (options.cornerRadius = options.width / 2);
+        const isPaddingNumber = (0, vutils_1.isArray)(options.boundsPadding), padding = [ null !== (_b = null !== (_a = options.marginTop) && void 0 !== _a ? _a : isPaddingNumber ? options.boundsPadding[0] : options.boundsPadding) && void 0 !== _b ? _b : 0, null !== (_d = null !== (_c = options.marginRight) && void 0 !== _c ? _c : isPaddingNumber ? options.boundsPadding[1] : options.boundsPadding) && void 0 !== _d ? _d : 0, null !== (_g = null !== (_e = options.marginBottom) && void 0 !== _e ? _e : isPaddingNumber ? null !== (_f = options.boundsPadding[2]) && void 0 !== _f ? _f : options.boundsPadding[0] : options.boundsPadding) && void 0 !== _g ? _g : 0, null !== (_k = null !== (_h = options.marginLeft) && void 0 !== _h ? _h : isPaddingNumber ? null !== (_j = options.boundsPadding[3]) && void 0 !== _j ? _j : options.boundsPadding[1] : options.boundsPadding) && void 0 !== _k ? _k : 0 ];
+        options.boundsPadding = padding, super(options);
     }
 }
 

package/cjs/render/layout/image.js.map

@@ -1 +1 @@
-{"version":3,"sources":["render/layout/image.ts"],"names":[],"mappings":";;;AACA,uCAAwC;AAUxC,MAAa,KAAM,SAAQ,qBAAW;IASpC,YAAY,OAAqB;;QAC/B,KAAK,CAAC,OAAO,CAAC,CAAC;QARjB,SAAI,GAAY,OAAO,CAAC;QAUtB,IAAI,CAAC,KAAK,GAAG,MAAA,OAAO,CAAC,KAAK,mCAAI,IAAI,CAAC,KAAK,CAAC;QACzC,IAAI,CAAC,MAAM,GAAG,MAAA,OAAO,CAAC,MAAM,mCAAI,IAAI,CAAC,MAAM,CAAC;QAC5C,IAAI,CAAC,GAAG,GAAG,MAAA,OAAO,CAAC,GAAG,mCAAI,IAAI,CAAC,GAAG,CAAC;QACnC,IAAI,CAAC,KAAK,GAAG,MAAA,OAAO,CAAC,KAAK,mCAAI,IAAI,CAAC,KAAK,CAAC;QACzC,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;CACF;AAlBD,sBAkBC","file":"image.js","sourcesContent":["import type { ElementOptions } from './element';\nimport { BaseElement } from './element';\nimport type { ColumnIconOption } from '../../ts-types';\n\ntype ImageOptions = {\n  width: number;\n  height: number;\n  src?: string;\n  shape?: 'circle' | 'square';\n} & ElementOptions;\n\nexport class Image extends BaseElement {\n  declare id: string;\n  type: 'image' = 'image';\n  declare width: number;\n  declare height: number;\n  src: string;\n  cursor?: string;\n  cache?: ColumnIconOption;\n  shape?: 'circle' | 'square';\n  constructor(options: ImageOptions) {\n    super(options);\n    // options中的配置可以覆盖cache\n    this.width = options.width ?? this.width;\n    this.height = options.height ?? this.height;\n    this.src = options.src ?? this.src;\n    this.shape = options.shape ?? this.shape;\n    this.initLayoutSize();\n  }\n}\n"]}
+{"version":3,"sources":["render/layout/image.ts"],"names":[],"mappings":";;;AACA,+CAAoD;AACpD,6CAA2C;AAU3C,MAAa,KAAM,SAAQ,eAAM;IAC/B,YAAY,OAAsB;;QAChC,IAAI,OAAO,CAAC,GAAG,EAAE;YACf,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC;SAC7B;QACD,IAAI,OAAO,CAAC,KAAK,KAAK,QAAQ,EAAE;YAC9B,OAAO,CAAC,YAAY,GAAG,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC;SAC1C;QAED,MAAM,eAAe,GAAG,IAAA,gBAAO,EAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QACvD,MAAM,OAAO,GAAG;YACd,MAAA,MAAA,OAAO,CAAC,SAAS,mCAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,mCAAI,CAAC;YAC9F,MAAA,MAAA,OAAO,CAAC,WAAW,mCAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,mCAAI,CAAC;YAChG,MAAA,MAAA,OAAO,CAAC,YAAY,mCAClB,CAAC,eAAe,CAAC,CAAC,CAAC,MAAA,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,mCAAI,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,mCAChG,CAAC;YACH,MAAA,MAAA,OAAO,CAAC,UAAU,mCAChB,CAAC,eAAe,CAAC,CAAC,CAAC,MAAA,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,mCAAI,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,mCAChG,CAAC;SACJ,CAAC;QACF,OAAO,CAAC,aAAa,GAAG,OAAO,CAAC;QAEhC,KAAK,CAAC,OAAO,CAAC,CAAC;IACjB,CAAC;CACF;AAxBD,sBAwBC","file":"image.js","sourcesContent":["import type { IImageGraphicAttribute } from '@visactor/vrender';\nimport { Image as VImage } from '@visactor/vrender';\nimport { isArray } from '@visactor/vutils';\n\ntype IImageOptions = {\n  src?: string;\n  shape?: 'circle' | 'square';\n  marginTop?: number;\n  marginRight?: number;\n  marginBottom?: number;\n  marginLeft?: number;\n} & IImageGraphicAttribute;\nexport class Image extends VImage {\n  constructor(options: IImageOptions) {\n    if (options.src) {\n      options.image = options.src;\n    }\n    if (options.shape === 'circle') {\n      options.cornerRadius = options.width / 2;\n    }\n\n    const isPaddingNumber = isArray(options.boundsPadding);\n    const padding = [\n      options.marginTop ?? (isPaddingNumber ? options.boundsPadding[0] : options.boundsPadding) ?? 0,\n      options.marginRight ?? (isPaddingNumber ? options.boundsPadding[1] : options.boundsPadding) ?? 0,\n      options.marginBottom ??\n        (isPaddingNumber ? options.boundsPadding[2] ?? options.boundsPadding[0] : options.boundsPadding) ??\n        0,\n      options.marginLeft ??\n        (isPaddingNumber ? options.boundsPadding[3] ?? options.boundsPadding[1] : options.boundsPadding) ??\n        0\n    ];\n    options.boundsPadding = padding;\n\n    super(options);\n  }\n}\n"]}

package/cjs/render/layout/index.d.ts

@@ -7,3 +7,5 @@ export * from './rect';
 export * from './text';
 export * from './percent-calc';
 export * from './arc';
+export * from './tag';
+export * from './group';

package/cjs/render/layout/index.js

@@ -21,5 +21,6 @@ Object.defineProperty(exports, "__esModule", {
 __exportStar(require("./group-element"), exports), __exportStar(require("./icon"), exports), 
 __exportStar(require("./image"), exports), __exportStar(require("./rect"), exports), 
 __exportStar(require("./text"), exports), __exportStar(require("./percent-calc"), exports), 
-__exportStar(require("./arc"), exports);
+__exportStar(require("./arc"), exports), __exportStar(require("./tag"), exports), 
+__exportStar(require("./group"), exports);
 //# sourceMappingURL=index.js.map

package/cjs/render/layout/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["render/layout/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,8CAA4B;AAC5B,kDAAgC;AAChC,yCAAuB;AACvB,0CAAwB;AACxB,yCAAuB;AACvB,yCAAuB;AACvB,iDAA+B;AAC/B,wCAAsB","file":"index.js","sourcesContent":["export * from './circle';\nexport * from './container';\nexport * from './group-element';\nexport * from './icon';\nexport * from './image';\nexport * from './rect';\nexport * from './text';\nexport * from './percent-calc';\nexport * from './arc';\n"]}
+{"version":3,"sources":["render/layout/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,8CAA4B;AAC5B,kDAAgC;AAChC,yCAAuB;AACvB,0CAAwB;AACxB,yCAAuB;AACvB,yCAAuB;AACvB,iDAA+B;AAC/B,wCAAsB;AACtB,wCAAsB;AACtB,0CAAwB","file":"index.js","sourcesContent":["export * from './circle';\nexport * from './container';\nexport * from './group-element';\nexport * from './icon';\nexport * from './image';\nexport * from './rect';\nexport * from './text';\nexport * from './percent-calc';\nexport * from './arc';\nexport * from './tag';\nexport * from './group';\n"]}

package/cjs/render/layout/percent-calc.d.ts

@@ -2,7 +2,4 @@ export type percentCalcObj = {
     percent: number;
     delta: number;
 };
-export declare function percentCalc(percent: number, delta?: number): {
-    percent: number;
-    delta: number;
-};
+export declare function percentCalc(percent: number, delta?: number): percentCalcObj;

package/cjs/render/layout/percent-calc.js.map

@@ -1 +1 @@
-{"version":3,"sources":["render/layout/percent-calc.ts"],"names":[],"mappings":";;;AAKA,SAAgB,WAAW,CAAC,OAAe,EAAE,KAAK,GAAG,CAAC;IACpD,OAAO;QACL,OAAO;QACP,KAAK;KACN,CAAC;AACJ,CAAC;AALD,kCAKC","file":"percent-calc.js","sourcesContent":["export type percentCalcObj = {\n  percent: number;\n  delta: number;\n};\n\nexport function percentCalc(percent: number, delta = 0) {\n  return {\n    percent,\n    delta\n  };\n}\n"]}
+{"version":3,"sources":["render/layout/percent-calc.ts"],"names":[],"mappings":";;;AAKA,SAAgB,WAAW,CAAC,OAAe,EAAE,KAAK,GAAG,CAAC;IACpD,OAAO;QACL,OAAO;QACP,KAAK;KACN,CAAC;AACJ,CAAC;AALD,kCAKC","file":"percent-calc.js","sourcesContent":["export type percentCalcObj = {\n  percent: number;\n  delta: number;\n};\n\nexport function percentCalc(percent: number, delta = 0): percentCalcObj {\n  return {\n    percent,\n    delta\n  };\n}\n"]}

package/cjs/render/layout/rect.d.ts

@@ -1,22 +1,12 @@
-import type { ElementOptions } from './element';
-import { BaseElement } from './element';
-type RectOptions = {
-    width: number;
-    height: number;
-    lineWidth?: number;
-    cornerRadius?: number;
-    fill?: string | boolean;
-    stroke?: string | boolean;
-} & ElementOptions;
-export declare class Rect extends BaseElement {
-    type: 'rect';
-    width: number;
-    height: number;
-    lineWidth: number;
-    cornerRadius: number;
-    radius: number;
-    fill: string | boolean;
-    stroke: string | boolean;
-    constructor(options: RectOptions);
+import type { IRectGraphicAttribute } from '@visactor/vrender';
+import { Rect as VRect } from '@visactor/vrender';
+type IRectOption = {
+    marginTop?: number;
+    marginRight?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+} & IRectGraphicAttribute;
+export declare class Rect extends VRect {
+    constructor(options: IRectOption);
 }
 export {};

package/cjs/render/layout/rect.js

@@ -4,14 +4,13 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.Rect = void 0;
 
-const element_1 = require("./element");
+const vrender_1 = require("@visactor/vrender"), vutils_1 = require("@visactor/vutils");
 
-class Rect extends element_1.BaseElement {
+class Rect extends vrender_1.Rect {
     constructor(options) {
-        super(options), this.type = "rect", this.width = options.width, this.height = options.height, 
-        this.lineWidth = options.lineWidth || 0, this.cornerRadius = options.cornerRadius || 0, 
-        this.radius = this.cornerRadius, this.fill = options.fill || "#777", this.stroke = options.stroke || void 0, 
-        this.initLayoutSize();
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const isPaddingNumber = (0, vutils_1.isArray)(options.boundsPadding), padding = [ null !== (_b = null !== (_a = options.marginTop) && void 0 !== _a ? _a : isPaddingNumber ? options.boundsPadding[0] : options.boundsPadding) && void 0 !== _b ? _b : 0, null !== (_d = null !== (_c = options.marginRight) && void 0 !== _c ? _c : isPaddingNumber ? options.boundsPadding[1] : options.boundsPadding) && void 0 !== _d ? _d : 0, null !== (_g = null !== (_e = options.marginBottom) && void 0 !== _e ? _e : isPaddingNumber ? null !== (_f = options.boundsPadding[2]) && void 0 !== _f ? _f : options.boundsPadding[0] : options.boundsPadding) && void 0 !== _g ? _g : 0, null !== (_k = null !== (_h = options.marginLeft) && void 0 !== _h ? _h : isPaddingNumber ? null !== (_j = options.boundsPadding[3]) && void 0 !== _j ? _j : options.boundsPadding[1] : options.boundsPadding) && void 0 !== _k ? _k : 0 ];
+        options.boundsPadding = padding, super(options);
     }
 }
 

package/cjs/render/layout/rect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["render/layout/rect.ts"],"names":[],"mappings":";;;AACA,uCAAwC;AAWxC,MAAa,IAAK,SAAQ,qBAAW;IAUnC,YAAY,OAAoB;QAC9B,KAAK,CAAC,OAAO,CAAC,CAAC;QAVjB,SAAI,GAAW,MAAM,CAAC;QAWpB,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;QAC3B,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;QAC7B,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,IAAI,CAAC,CAAC;QACxC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,IAAI,CAAC,CAAC;QAC9C,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC;QAChC,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,IAAI,MAAM,CAAC;QACnC,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,IAAI,SAAS,CAAC;QAE1C,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;CACF;AAtBD,oBAsBC","file":"rect.js","sourcesContent":["import type { ElementOptions } from './element';\nimport { BaseElement } from './element';\n\ntype RectOptions = {\n  width: number;\n  height: number;\n  lineWidth?: number;\n  cornerRadius?: number;\n  fill?: string | boolean;\n  stroke?: string | boolean;\n} & ElementOptions;\n\nexport class Rect extends BaseElement {\n  type: 'rect' = 'rect';\n  declare width: number;\n  declare height: number;\n  lineWidth: number;\n  cornerRadius: number;\n  radius: number;\n  fill: string | boolean;\n  stroke: string | boolean;\n\n  constructor(options: RectOptions) {\n    super(options);\n    this.width = options.width;\n    this.height = options.height;\n    this.lineWidth = options.lineWidth || 0;\n    this.cornerRadius = options.cornerRadius || 0;\n    this.radius = this.cornerRadius;\n    this.fill = options.fill || '#777';\n    this.stroke = options.stroke || undefined;\n\n    this.initLayoutSize();\n  }\n}\n"]}
+{"version":3,"sources":["render/layout/rect.ts"],"names":[],"mappings":";;;AACA,+CAAkD;AAClD,6CAA2C;AAS3C,MAAa,IAAK,SAAQ,cAAK;IAC7B,YAAY,OAAoB;;QAC9B,MAAM,eAAe,GAAG,IAAA,gBAAO,EAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QACvD,MAAM,OAAO,GAAG;YACd,MAAA,MAAA,OAAO,CAAC,SAAS,mCAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,mCAAI,CAAC;YAC9F,MAAA,MAAA,OAAO,CAAC,WAAW,mCAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,mCAAI,CAAC;YAChG,MAAA,MAAA,OAAO,CAAC,YAAY,mCAClB,CAAC,eAAe,CAAC,CAAC,CAAC,MAAA,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,mCAAI,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,mCAChG,CAAC;YACH,MAAA,MAAA,OAAO,CAAC,UAAU,mCAChB,CAAC,eAAe,CAAC,CAAC,CAAC,MAAA,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,mCAAI,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,mCAChG,CAAC;SACJ,CAAC;QACF,OAAO,CAAC,aAAa,GAAG,OAAO,CAAC;QAEhC,KAAK,CAAC,OAAO,CAAC,CAAC;IACjB,CAAC;CACF;AAjBD,oBAiBC","file":"rect.js","sourcesContent":["import type { IRectGraphicAttribute } from '@visactor/vrender';\nimport { Rect as VRect } from '@visactor/vrender';\nimport { isArray } from '@visactor/vutils';\n\ntype IRectOption = {\n  marginTop?: number;\n  marginRight?: number;\n  marginBottom?: number;\n  marginLeft?: number;\n} & IRectGraphicAttribute;\n\nexport class Rect extends VRect {\n  constructor(options: IRectOption) {\n    const isPaddingNumber = isArray(options.boundsPadding);\n    const padding = [\n      options.marginTop ?? (isPaddingNumber ? options.boundsPadding[0] : options.boundsPadding) ?? 0,\n      options.marginRight ?? (isPaddingNumber ? options.boundsPadding[1] : options.boundsPadding) ?? 0,\n      options.marginBottom ??\n        (isPaddingNumber ? options.boundsPadding[2] ?? options.boundsPadding[0] : options.boundsPadding) ??\n        0,\n      options.marginLeft ??\n        (isPaddingNumber ? options.boundsPadding[3] ?? options.boundsPadding[1] : options.boundsPadding) ??\n        0\n    ];\n    options.boundsPadding = padding;\n\n    super(options);\n  }\n}\n"]}