@visactor/vtable 0.13.4-alpha.3 → 0.13.4

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,kDAAoC;AA8ClC,sBAAK;AA7CP,6CAA+B;AA8C7B,oBAAI;AA7CN,6CAA+B;AAkE7B,oBAAI;AAjEN,+CAAiC;AACjC,qDAAuC;AAqErC,4BAAQ;AApEV,iDAAmC;AA8DjC,wBAAM;AA7DR,yEAA2D;AAuEzD,wCAAc;AApDhB,2CAAwC;AAuBtC,0FAvBO,qBAAS,OAuBP;AAtBX,6CAA0C;AAwBxC,2FAxBO,uBAAU,OAwBP;AAvBZ,6CAA0C;AA0BxC,2FA1BO,uBAAU,OA0BP;AAxBZ,8DAAgD;AAiD9C,oCAAY;AA5Cd,uDAAwD;AAA/C,gHAAA,eAAe,OAAA;AACxB,+CAA6B;AAEhB,QAAA,OAAO,GAAG,gBAAgB,CAAC;AA6CxC,SAAS,QAAQ;IAGf,OAAO,KAAK,CAAC,GAAG,EAAE,CAAC;AACrB,CAAC;AAhBC,4BAAQ;AAkBV,SAAS,WAAW;IAClB,QAAQ,CAAC,QAAQ,EAAE,CAAC;AAGtB,CAAC;AArBC,kCAAW;AAsBb,KAAK,CAAC,eAAe,CAAC","file":"index.js","sourcesContent":["/* eslint-disable sort-imports */\nimport * as TYPES from './ts-types';\nimport * as core from './core';\nimport * as data from './data';\nimport * as icons from './icons';\nimport * as register from './register';\nimport * as themes from './themes';\nimport * as DataStatistics from './dataset/DataStatistics';\nimport type {\n  ColumnDefine,\n  ColumnsDefine,\n  LinkColumnDefine,\n  ChartColumnDefine,\n  ImageColumnDefine,\n  SparklineColumnDefine,\n  ProgressbarColumnDefine,\n  TextColumnDefine,\n  GroupColumnDefine,\n  ListTableConstructorOptions,\n  PivotTableConstructorOptions,\n  PivotChartConstructorOptions,\n  IHeaderTreeDefine,\n  IDimension,\n  TextAlignType,\n  TextBaselineType\n} from './ts-types';\nimport { ListTable } from './ListTable';\nimport { PivotTable } from './PivotTable';\nimport { PivotChart } from './PivotChart';\nimport type { MousePointerCellEvent } from './ts-types/events';\nimport * as CustomLayout from './render/layout';\n\n// import { container, loadCanvasPicker } from '@visactor/vrender';\n// loadCanvasPicker(container);\n\nexport { getDataCellPath } from './tools/get-data-path';\nexport * from './render/jsx';\n\nexport const version = \"0.13.4-alpha.3\";\n/**\n * @namespace VTable\n */\nexport {\n  /**\n   * Types\n   * @namespace VTable.TYPES\n   */\n  TYPES,\n  core,\n  ListTable,\n  ListTableConstructorOptions,\n  PivotTable,\n  PivotTableConstructorOptions,\n  PivotChartConstructorOptions,\n  PivotChart,\n  IHeaderTreeDefine,\n  IDimension,\n  ColumnsDefine,\n  ColumnDefine,\n  LinkColumnDefine,\n  ChartColumnDefine,\n  ImageColumnDefine,\n  SparklineColumnDefine,\n  ProgressbarColumnDefine,\n  TextColumnDefine,\n  GroupColumnDefine,\n  TextAlignType,\n  TextBaselineType,\n  themes,\n  data,\n  MousePointerCellEvent,\n  getIcons,\n  clearGlobal,\n  //plugin registers\n  register,\n  /**\n   * 暂不推荐使用\n   */\n  DataStatistics,\n  CustomLayout\n};\n\n/** @private */\nfunction getIcons(): {\n  [key: string]: TYPES.ColumnIconOption;\n} {\n  return icons.get();\n}\n/** 清理内部的全局变量 如注册的icon theme等 以及共享的header column类实例 */\nfunction clearGlobal() {\n  register.clearAll();\n  // headers.type.clearGlobal();\n  // columns.type.clearGlobal();\n}\nTYPES.AggregationType;\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,kDAAoC;AA8ClC,sBAAK;AA7CP,6CAA+B;AA8C7B,oBAAI;AA7CN,6CAA+B;AAkE7B,oBAAI;AAjEN,+CAAiC;AACjC,qDAAuC;AAqErC,4BAAQ;AApEV,iDAAmC;AA8DjC,wBAAM;AA7DR,yEAA2D;AAuEzD,wCAAc;AApDhB,2CAAwC;AAuBtC,0FAvBO,qBAAS,OAuBP;AAtBX,6CAA0C;AAwBxC,2FAxBO,uBAAU,OAwBP;AAvBZ,6CAA0C;AA0BxC,2FA1BO,uBAAU,OA0BP;AAxBZ,8DAAgD;AAiD9C,oCAAY;AA5Cd,uDAAwD;AAA/C,gHAAA,eAAe,OAAA;AACxB,+CAA6B;AAEhB,QAAA,OAAO,GAAG,QAAQ,CAAC;AA6ChC,SAAS,QAAQ;IAGf,OAAO,KAAK,CAAC,GAAG,EAAE,CAAC;AACrB,CAAC;AAhBC,4BAAQ;AAkBV,SAAS,WAAW;IAClB,QAAQ,CAAC,QAAQ,EAAE,CAAC;AAGtB,CAAC;AArBC,kCAAW;AAsBb,KAAK,CAAC,eAAe,CAAC","file":"index.js","sourcesContent":["/* eslint-disable sort-imports */\nimport * as TYPES from './ts-types';\nimport * as core from './core';\nimport * as data from './data';\nimport * as icons from './icons';\nimport * as register from './register';\nimport * as themes from './themes';\nimport * as DataStatistics from './dataset/DataStatistics';\nimport type {\n  ColumnDefine,\n  ColumnsDefine,\n  LinkColumnDefine,\n  ChartColumnDefine,\n  ImageColumnDefine,\n  SparklineColumnDefine,\n  ProgressbarColumnDefine,\n  TextColumnDefine,\n  GroupColumnDefine,\n  ListTableConstructorOptions,\n  PivotTableConstructorOptions,\n  PivotChartConstructorOptions,\n  IHeaderTreeDefine,\n  IDimension,\n  TextAlignType,\n  TextBaselineType\n} from './ts-types';\nimport { ListTable } from './ListTable';\nimport { PivotTable } from './PivotTable';\nimport { PivotChart } from './PivotChart';\nimport type { MousePointerCellEvent } from './ts-types/events';\nimport * as CustomLayout from './render/layout';\n\n// import { container, loadCanvasPicker } from '@visactor/vrender';\n// loadCanvasPicker(container);\n\nexport { getDataCellPath } from './tools/get-data-path';\nexport * from './render/jsx';\n\nexport const version = \"0.13.4\";\n/**\n * @namespace VTable\n */\nexport {\n  /**\n   * Types\n   * @namespace VTable.TYPES\n   */\n  TYPES,\n  core,\n  ListTable,\n  ListTableConstructorOptions,\n  PivotTable,\n  PivotTableConstructorOptions,\n  PivotChartConstructorOptions,\n  PivotChart,\n  IHeaderTreeDefine,\n  IDimension,\n  ColumnsDefine,\n  ColumnDefine,\n  LinkColumnDefine,\n  ChartColumnDefine,\n  ImageColumnDefine,\n  SparklineColumnDefine,\n  ProgressbarColumnDefine,\n  TextColumnDefine,\n  GroupColumnDefine,\n  TextAlignType,\n  TextBaselineType,\n  themes,\n  data,\n  MousePointerCellEvent,\n  getIcons,\n  clearGlobal,\n  //plugin registers\n  register,\n  /**\n   * 暂不推荐使用\n   */\n  DataStatistics,\n  CustomLayout\n};\n\n/** @private */\nfunction getIcons(): {\n  [key: string]: TYPES.ColumnIconOption;\n} {\n  return icons.get();\n}\n/** 清理内部的全局变量 如注册的icon theme等 以及共享的header column类实例 */\nfunction clearGlobal() {\n  register.clearAll();\n  // headers.type.clearGlobal();\n  // columns.type.clearGlobal();\n}\nTYPES.AggregationType;\n"]}

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

@@ -1,12 +1,23 @@
-import type { IArcGraphicAttribute } from '@visactor/vrender';
-import { Arc as VArc } from '@visactor/vrender';
-type IArcOption = {
-    marginTop?: number;
-    marginRight?: number;
-    marginBottom?: number;
-    marginLeft?: number;
-} & IArcGraphicAttribute;
-export declare class Arc extends VArc {
-    constructor(options: IArcOption);
+import type { ElementOptions } from './element';
+import { BaseElement } from './element';
+type SectorOptions = {
+    radius: number;
+    startDegree?: number;
+    endDegree?: number;
+    clockWise?: boolean;
+    lineWidth?: number;
+    fill?: string | boolean;
+    stroke?: string | boolean;
+} & ElementOptions;
+export declare class Sector extends BaseElement {
+    type: 'arc';
+    radius: number;
+    startDegree: number;
+    endDegree: number;
+    clockWise: boolean;
+    lineWidth: number;
+    fill: string | boolean;
+    stroke: string | boolean;
+    constructor(options: SectorOptions);
 }
 export {};

package/cjs/render/layout/arc.js

@@ -2,17 +2,19 @@
 
 Object.defineProperty(exports, "__esModule", {
     value: !0
-}), exports.Arc = void 0;
+}), exports.Sector = void 0;
 
-const vrender_1 = require("@visactor/vrender"), vutils_1 = require("@visactor/vutils");
+const element_1 = require("./element");
 
-class Arc extends vrender_1.Arc {
+class Sector extends element_1.BaseElement {
     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);
+        super(options), this.type = "arc", this.startDegree = 0, this.endDegree = 360, this.clockWise = !0, 
+        this.radius = options.radius, this.startDegree = options.startDegree, this.endDegree = options.endDegree, 
+        this.clockWise = options.clockWise, this.lineWidth = options.lineWidth, this.fill = options.fill, 
+        this.stroke = options.stroke, this.width = 2 * this.radius, this.height = 2 * this.radius, 
+        this.initLayoutSize(), this.dx += this.radius, this.dy += this.radius;
     }
 }
 
-exports.Arc = Arc;
+exports.Sector = Sector;
 //# sourceMappingURL=arc.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["render/layout/arc.ts"],"names":[],"mappings":";;;AACA,+CAAgD;AAChD,6CAA2C;AAS3C,MAAa,GAAI,SAAQ,aAAI;IAC3B,YAAY,OAAmB;;QAC7B,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,kBAiBC","file":"arc.js","sourcesContent":["import type { IArcGraphicAttribute } from '@visactor/vrender';\nimport { Arc as VArc } from '@visactor/vrender';\nimport { isArray } from '@visactor/vutils';\n\ntype IArcOption = {\n  marginTop?: number;\n  marginRight?: number;\n  marginBottom?: number;\n  marginLeft?: number;\n} & IArcGraphicAttribute;\n\nexport class Arc extends VArc {\n  constructor(options: IArcOption) {\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"]}
+{"version":3,"sources":["render/layout/arc.ts"],"names":[],"mappings":";;;AACA,uCAAwC;AAYxC,MAAa,MAAO,SAAQ,qBAAW;IAUrC,YAAY,OAAsB;QAChC,KAAK,CAAC,OAAO,CAAC,CAAC;QAVjB,SAAI,GAAU,KAAK,CAAC;QAEpB,gBAAW,GAAG,CAAC,CAAC;QAChB,cAAS,GAAG,GAAG,CAAC;QAChB,cAAS,GAAG,IAAI,CAAC;QAOf,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;QAC7B,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;QACvC,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;QACnC,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;QACnC,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;QACnC,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;QACzB,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;QAE7B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAC7B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAE9B,IAAI,CAAC,cAAc,EAAE,CAAC;QAEtB,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,MAAM,CAAC;QACvB,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,MAAM,CAAC;IACzB,CAAC;CACF;AA5BD,wBA4BC","file":"arc.js","sourcesContent":["import type { ElementOptions } from './element';\nimport { BaseElement } from './element';\n\ntype SectorOptions = {\n  radius: number;\n  startDegree?: number;\n  endDegree?: number;\n  clockWise?: boolean;\n  lineWidth?: number;\n  fill?: string | boolean;\n  stroke?: string | boolean;\n} & ElementOptions;\n\nexport class Sector extends BaseElement {\n  type: 'arc' = 'arc';\n  radius: number;\n  startDegree = 0;\n  endDegree = 360;\n  clockWise = true;\n  lineWidth: number;\n  fill: string | boolean;\n  stroke: string | boolean;\n\n  constructor(options: SectorOptions) {\n    super(options);\n    this.radius = options.radius;\n    this.startDegree = options.startDegree;\n    this.endDegree = options.endDegree;\n    this.clockWise = options.clockWise;\n    this.lineWidth = options.lineWidth;\n    this.fill = options.fill;\n    this.stroke = options.stroke;\n\n    this.width = this.radius * 2;\n    this.height = this.radius * 2;\n\n    this.initLayoutSize();\n\n    this.dx += this.radius;\n    this.dy += this.radius;\n  }\n}\n"]}

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

@@ -1,12 +1,19 @@
-import type { ICircleGraphicAttribute } from '@visactor/vrender';
-import { Circle as VCircle } from '@visactor/vrender';
-type ICircleOption = {
-    marginTop?: number;
-    marginRight?: number;
-    marginBottom?: number;
-    marginLeft?: number;
-} & ICircleGraphicAttribute;
-export declare class Circle extends VCircle {
-    constructor(options: ICircleOption);
+import type { ElementOptions } from './element';
+import { BaseElement } from './element';
+type CircleOptions = {
+    radius: number;
+    radian?: number;
+    lineWidth?: number;
+    fill?: string | boolean;
+    stroke?: string | boolean;
+} & ElementOptions;
+export declare class Circle extends BaseElement {
+    type: 'circle';
+    radius: number;
+    radian: number;
+    lineWidth: number;
+    fill: string | boolean;
+    stroke: string | boolean;
+    constructor(options: CircleOptions);
 }
 export {};

package/cjs/render/layout/circle.js

@@ -4,13 +4,14 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.Circle = void 0;
 
-const vrender_1 = require("@visactor/vrender"), vutils_1 = require("@visactor/vutils");
+const element_1 = require("./element");
 
-class Circle extends vrender_1.Circle {
+class Circle extends element_1.BaseElement {
     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);
+        super(options), this.type = "circle", this.radius = options.radius, this.radian = options.radian, 
+        this.lineWidth = options.lineWidth, this.fill = options.fill, this.stroke = options.stroke, 
+        this.width = 2 * this.radius, this.height = 2 * this.radius, this.initLayoutSize(), 
+        this.dx += this.radius, this.dy += this.radius;
     }
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["render/layout/circle.ts"],"names":[],"mappings":";;;AACA,+CAAsD;AACtD,6CAA2C;AAS3C,MAAa,MAAO,SAAQ,gBAAO;IACjC,YAAY,OAAsB;;QAChC,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,wBAiBC","file":"circle.js","sourcesContent":["import type { ICircleGraphicAttribute } from '@visactor/vrender';\nimport { Circle as VCircle } from '@visactor/vrender';\nimport { isArray } from '@visactor/vutils';\n\ntype ICircleOption = {\n  marginTop?: number;\n  marginRight?: number;\n  marginBottom?: number;\n  marginLeft?: number;\n} & ICircleGraphicAttribute;\n\nexport class Circle extends VCircle {\n  constructor(options: ICircleOption) {\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"]}
+{"version":3,"sources":["render/layout/circle.ts"],"names":[],"mappings":";;;AACA,uCAAwC;AAUxC,MAAa,MAAO,SAAQ,qBAAW;IAQrC,YAAY,OAAsB;QAChC,KAAK,CAAC,OAAO,CAAC,CAAC;QARjB,SAAI,GAAa,QAAQ,CAAC;QASxB,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;QAC7B,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;QAC7B,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;QACnC,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;QACzB,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;QAE7B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAC7B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAE9B,IAAI,CAAC,cAAc,EAAE,CAAC;QAEtB,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,MAAM,CAAC;QACvB,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,MAAM,CAAC;IACzB,CAAC;CACF;AAxBD,wBAwBC","file":"circle.js","sourcesContent":["import type { ElementOptions } from './element';\nimport { BaseElement } from './element';\n\ntype CircleOptions = {\n  radius: number;\n  radian?: number;\n  lineWidth?: number;\n  fill?: string | boolean;\n  stroke?: string | boolean;\n} & ElementOptions;\n\nexport class Circle extends BaseElement {\n  type: 'circle' = 'circle';\n  radius: number;\n  radian: number;\n  lineWidth: number;\n  fill: string | boolean;\n  stroke: string | boolean;\n\n  constructor(options: CircleOptions) {\n    super(options);\n    this.radius = options.radius;\n    this.radian = options.radian;\n    this.lineWidth = options.lineWidth;\n    this.fill = options.fill;\n    this.stroke = options.stroke;\n\n    this.width = this.radius * 2;\n    this.height = this.radius * 2;\n\n    this.initLayoutSize();\n\n    this.dx += this.radius;\n    this.dy += this.radius;\n  }\n}\n"]}

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

@@ -1,14 +1,52 @@
-import type { IGroupGraphicAttribute } from '@visactor/vrender';
-import { Group } from '@visactor/vrender';
+import type { BaseTableAPI } from '../../ts-types/base-table';
+import type { DirectionKey } from './direction';
+import type { ElementOptions } from './element';
+import { BaseElement } from './element';
+import { Line } from './line';
 import type { percentCalcObj } from './percent-calc';
-export type IContainerOptions = {
+type containerOptions = {
     width?: number | percentCalcObj;
     height?: number | percentCalcObj;
-    marginTop?: number;
-    marginRight?: number;
-    marginBottom?: number;
-    marginLeft?: number;
-} & IGroupGraphicAttribute;
-export declare class Container extends Group {
-    constructor(containerOptions: IContainerOptions);
+    direction?: 'row' | 'column';
+    justifyContent?: 'start' | 'end' | 'center';
+    alignItems?: 'start' | 'end' | 'center';
+    alignContent?: 'start' | 'end' | 'center';
+    showBounds?: boolean;
+} & ElementOptions;
+export declare class Container extends BaseElement {
+    type: 'container';
+    width: number;
+    _widthObj: percentCalcObj;
+    height: number;
+    _heightObj: percentCalcObj;
+    needCalcSize: boolean;
+    direction: 'row' | 'column';
+    justifyContent: 'start' | 'end' | 'center';
+    alignItems: 'start' | 'end' | 'center';
+    alignContent: 'start' | 'end' | 'center';
+    lines: Line[];
+    currentLine?: Line;
+    currentLineY: number;
+    table: BaseTableAPI;
+    directionKey: DirectionKey;
+    showBounds: boolean;
+    offsetY: number;
+    isRoot?: boolean;
+    constructor(options: containerOptions);
+    add(element: BaseElement): void;
+    updateYAlign(): void;
+    getSize(): {
+        width: number;
+        height: number;
+    };
+    getContentSize(): {
+        width: number;
+        height: number;
+    };
+    calcSize(parentWidth: number, parentHeight: number): void;
+    getElements(parentPos?: {
+        parentX: number;
+        parentY: number;
+    }, isHover?: boolean, isSelect?: boolean): any[];
 }
+export {};

package/cjs/render/layout/container.js

@@ -4,22 +4,107 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.Container = void 0;
 
-const vutils_1 = require("@visactor/vutils"), vrender_1 = require("@visactor/vrender");
+const vutils_1 = require("@visactor/vutils"), direction_1 = require("./direction"), element_1 = require("./element"), line_1 = require("./line"), rect_1 = require("./rect");
 
-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);
+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;
     }
 }
 

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 { 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"]}
+{"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"]}

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

@@ -1,5 +1,25 @@
-import type { IContainerOptions } from './container';
-import { Container } from './container';
-export declare class GroupElement extends Container {
-    constructor(option: IContainerOptions);
+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[];
 }
+export {};

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

@@ -4,11 +4,47 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.GroupElement = void 0;
 
-const container_1 = require("./container");
+const direction_1 = require("./direction"), element_1 = require("./element");
 
-class GroupElement extends container_1.Container {
-    constructor(option) {
-        option.flexWrap = "nowrap", super(option);
+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;
     }
 }
 

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

@@ -1 +1 @@
-{"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"]}
+{"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"]}

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

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

package/cjs/render/layout/icon.js

@@ -29,20 +29,18 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.Icon = void 0;
 
-const vrender_1 = require("@visactor/vrender"), vutils_1 = require("@visactor/vutils"), registerIcons = __importStar(require("../../icons"));
+const vutils_1 = require("@visactor/vutils"), element_1 = require("./element"), registerIcons = __importStar(require("../../icons"));
 
-class Icon extends vrender_1.Image {
+class Icon extends element_1.BaseElement {
     constructor(options) {
-        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);
+        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);
         }
-        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;
+        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();
     }
 }
 

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

@@ -1 +1 @@
-{"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"]}
+{"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"]}