@visactor/vtable 0.9.0-alpha.0-alpha.0

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

@@ -0,0 +1,52 @@
+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';
+type containerOptions = {
+    width?: number | percentCalcObj;
+    height?: number | percentCalcObj;
+    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

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.Container = void 0;
+
+const util_1 = require("../../tools/util"), direction_1 = require("./direction"), element_1 = require("./element"), line_1 = require("./line"), rect_1 = require("./rect");
+
+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, util_1.isNumber)(options.width) ? this.width = options.width : (this._widthObj = options.width, 
+        this.needCalcSize = !0), (0, util_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) {
+        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.showBounds) {
+            const boundsRect = new rect_1.Rect({
+                width: this.width,
+                height: this.height,
+                borderRadius: 0,
+                strokeColor: "red",
+                fillColor: "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;
+    }
+}
+
+exports.Container = Container;
+//# sourceMappingURL=container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["render/layout/container.ts"],"names":[],"mappings":"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","file":"container.js","sourcesContent":["import { isNumber } from '../../tools/util';\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.showBounds) {\n      const boundsRect = new Rect({\n        width: this.width,\n        height: this.height,\n        borderRadius: 0,\n        strokeColor: 'red',\n        fillColor: '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/direction.d.ts

@@ -0,0 +1,22 @@
+export type DirectionKey = {
+    x: 'x' | 'y';
+    y: 'y' | 'x';
+    width: 'width' | 'height';
+    height: 'height' | 'width';
+    layoutWidth: 'layoutWidth' | 'layoutHeight';
+    layoutHeight: 'layoutHeight' | 'layoutWidth';
+    widthLimit: 'widthLimit' | 'heightLimit';
+    heightLimit: 'heightLimit' | 'widthLimit';
+    parentX: 'parentY' | 'parentX';
+    parentY: 'parentX' | 'parentY';
+    dx: 'dx' | 'dy';
+    dy: 'dx' | 'dy';
+};
+export type Direction = 'row' | 'column';
+export type JustifyContent = 'start' | 'end' | 'center';
+export type AlignItems = 'start' | 'end' | 'center';
+type DirectionKeys = {
+    [key in Direction]: DirectionKey;
+};
+export declare const DIRECTION_KEY: DirectionKeys;
+export {};

package/cjs/render/layout/direction.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.DIRECTION_KEY = void 0, exports.DIRECTION_KEY = {
+    row: {
+        x: "x",
+        y: "y",
+        width: "width",
+        height: "height",
+        layoutWidth: "layoutWidth",
+        layoutHeight: "layoutHeight",
+        widthLimit: "widthLimit",
+        heightLimit: "heightLimit",
+        parentX: "parentX",
+        parentY: "parentY",
+        dx: "dx",
+        dy: "dy"
+    },
+    column: {
+        x: "y",
+        y: "x",
+        width: "height",
+        height: "width",
+        layoutWidth: "layoutHeight",
+        layoutHeight: "layoutWidth",
+        widthLimit: "heightLimit",
+        heightLimit: "widthLimit",
+        parentX: "parentY",
+        parentY: "parentX",
+        dx: "dy",
+        dy: "dx"
+    }
+};
+//# sourceMappingURL=direction.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["render/layout/direction.ts"],"names":[],"mappings":";;;AAoBa,QAAA,aAAa,GAAkB;IAC1C,GAAG,EAAE;QACH,CAAC,EAAE,GAAG;QACN,CAAC,EAAE,GAAG;QACN,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,QAAQ;QAChB,WAAW,EAAE,aAAa;QAC1B,YAAY,EAAE,cAAc;QAC5B,UAAU,EAAE,YAAY;QACxB,WAAW,EAAE,aAAa;QAC1B,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,SAAS;QAClB,EAAE,EAAE,IAAI;QACR,EAAE,EAAE,IAAI;KACT;IACD,MAAM,EAAE;QACN,CAAC,EAAE,GAAG;QACN,CAAC,EAAE,GAAG;QACN,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE,OAAO;QACf,WAAW,EAAE,cAAc;QAC3B,YAAY,EAAE,aAAa;QAC3B,UAAU,EAAE,aAAa;QACzB,WAAW,EAAE,YAAY;QACzB,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,SAAS;QAClB,EAAE,EAAE,IAAI;QACR,EAAE,EAAE,IAAI;KACT;CACF,CAAC","file":"direction.js","sourcesContent":["export type DirectionKey = {\n  x: 'x' | 'y';\n  y: 'y' | 'x';\n  width: 'width' | 'height';\n  height: 'height' | 'width';\n  layoutWidth: 'layoutWidth' | 'layoutHeight';\n  layoutHeight: 'layoutHeight' | 'layoutWidth';\n  widthLimit: 'widthLimit' | 'heightLimit';\n  heightLimit: 'heightLimit' | 'widthLimit';\n  parentX: 'parentY' | 'parentX';\n  parentY: 'parentX' | 'parentY';\n  dx: 'dx' | 'dy';\n  dy: 'dx' | 'dy';\n};\n\nexport type Direction = 'row' | 'column';\nexport type JustifyContent = 'start' | 'end' | 'center'; // 布局方向上的对齐方式\nexport type AlignItems = 'start' | 'end' | 'center'; // 布局交叉方向上的对齐方式\ntype DirectionKeys = { [key in Direction]: DirectionKey };\n\nexport const DIRECTION_KEY: DirectionKeys = {\n  row: {\n    x: 'x',\n    y: 'y',\n    width: 'width',\n    height: 'height',\n    layoutWidth: 'layoutWidth',\n    layoutHeight: 'layoutHeight',\n    widthLimit: 'widthLimit',\n    heightLimit: 'heightLimit',\n    parentX: 'parentX',\n    parentY: 'parentY',\n    dx: 'dx',\n    dy: 'dy'\n  },\n  column: {\n    x: 'y',\n    y: 'x',\n    width: 'height',\n    height: 'width',\n    layoutWidth: 'layoutHeight',\n    layoutHeight: 'layoutWidth',\n    widthLimit: 'heightLimit',\n    heightLimit: 'widthLimit',\n    parentX: 'parentY',\n    parentY: 'parentX',\n    dx: 'dy',\n    dy: 'dx'\n  }\n};\n"]}

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

@@ -0,0 +1,47 @@
+import type { BaseTableAPI } from '../../ts-types/base-table';
+export type ElementOptions = {
+    id?: string;
+    marginLeft?: number;
+    marginRight?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    background?: {
+        fill?: boolean;
+        stroke?: boolean;
+        strokeColor?: string;
+        fillColor?: string;
+        lineWidth?: number;
+        borderRadius?: number;
+        expandX?: number;
+        expandY?: number;
+    };
+};
+export declare class BaseElement {
+    type: string;
+    id?: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    marginLeft: number;
+    marginRight: number;
+    marginTop: number;
+    marginBottom: number;
+    layoutWidth: number;
+    layoutHeight: number;
+    dx: number;
+    dy: number;
+    background?: {
+        fill?: boolean;
+        stroke?: boolean;
+        strokeColor?: string;
+        fillColor?: string;
+        lineWidth?: number;
+        cornerRadius?: number;
+        expandX?: number;
+        expandY?: number;
+    };
+    constructor(options: ElementOptions);
+    getSize(table: BaseTableAPI): void;
+    initLayoutSize(): void;
+}

package/cjs/render/layout/element.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.BaseElement = void 0;
+
+class BaseElement {
+    constructor(options) {
+        var _a, _b, _c, _d;
+        this.x = 0, this.y = 0, this.width = 0, this.height = 0, this.dx = 0, this.dy = 0, 
+        this.id = options.id, this.marginLeft = null !== (_a = options.marginLeft) && void 0 !== _a ? _a : 0, 
+        this.marginRight = null !== (_b = options.marginRight) && void 0 !== _b ? _b : 0, 
+        this.marginTop = null !== (_c = options.marginTop) && void 0 !== _c ? _c : 0, this.marginBottom = null !== (_d = options.marginBottom) && void 0 !== _d ? _d : 0, 
+        this.background = options.background || void 0;
+    }
+    getSize(table) {
+        this.initLayoutSize();
+    }
+    initLayoutSize() {
+        this.layoutWidth = this.width + this.marginLeft + this.marginRight, this.layoutHeight = this.height + this.marginTop + this.marginBottom, 
+        this.background && (this.layoutWidth += 2 * (this.background.expandX || 0), this.layoutHeight += 2 * (this.background.expandY || 0)), 
+        this.dx = this.marginLeft, this.dy = this.marginTop;
+    }
+}
+
+exports.BaseElement = BaseElement;
+//# sourceMappingURL=element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["render/layout/element.ts"],"names":[],"mappings":";;;AAqBA,MAAa,WAAW;IA0BtB,YAAY,OAAuB;;QAvBnC,MAAC,GAAG,CAAC,CAAC;QACN,MAAC,GAAG,CAAC,CAAC;QACN,UAAK,GAAG,CAAC,CAAC;QACV,WAAM,GAAG,CAAC,CAAC;QAOX,OAAE,GAAG,CAAC,CAAC;QACP,OAAE,GAAG,CAAC,CAAC;QAaL,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC;QACrB,IAAI,CAAC,UAAU,GAAG,MAAA,OAAO,CAAC,UAAU,mCAAI,CAAC,CAAC;QAC1C,IAAI,CAAC,WAAW,GAAG,MAAA,OAAO,CAAC,WAAW,mCAAI,CAAC,CAAC;QAC5C,IAAI,CAAC,SAAS,GAAG,MAAA,OAAO,CAAC,SAAS,mCAAI,CAAC,CAAC;QACxC,IAAI,CAAC,YAAY,GAAG,MAAA,OAAO,CAAC,YAAY,mCAAI,CAAC,CAAC;QAC9C,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,UAAU,IAAI,SAAS,CAAC;IACpD,CAAC;IAED,OAAO,CAAC,KAAmB;QACzB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;QACnE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC;QAErE,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;YACvD,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;SACzD;QAED,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC;QAC1B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;IAC3B,CAAC;CACF;AAnDD,kCAmDC","file":"element.js","sourcesContent":["import type { BaseTableAPI } from '../../ts-types/base-table';\n\nexport type ElementOptions = {\n  id?: string;\n  marginLeft?: number;\n  marginRight?: number;\n  marginTop?: number;\n  marginBottom?: number;\n  background?: {\n    fill?: boolean;\n    stroke?: boolean;\n    strokeColor?: string;\n    fillColor?: string;\n    lineWidth?: number;\n    borderRadius?: number;\n    expandX?: number;\n    expandY?: number;\n  };\n};\n\n// Element用作基础布局，图元继承Element\nexport class BaseElement {\n  type: string;\n  id?: string;\n  x = 0;\n  y = 0;\n  width = 0;\n  height = 0;\n  marginLeft: number;\n  marginRight: number;\n  marginTop: number;\n  marginBottom: number;\n  layoutWidth: number;\n  layoutHeight: number;\n  dx = 0;\n  dy = 0;\n  background?: {\n    fill?: boolean;\n    stroke?: boolean;\n    strokeColor?: string;\n    fillColor?: string;\n    lineWidth?: number;\n    cornerRadius?: number;\n    expandX?: number;\n    expandY?: number;\n  };\n\n  constructor(options: ElementOptions) {\n    this.id = options.id;\n    this.marginLeft = options.marginLeft ?? 0;\n    this.marginRight = options.marginRight ?? 0;\n    this.marginTop = options.marginTop ?? 0;\n    this.marginBottom = options.marginBottom ?? 0;\n    this.background = options.background || undefined;\n  }\n\n  getSize(table: BaseTableAPI) {\n    this.initLayoutSize();\n  }\n\n  initLayoutSize() {\n    this.layoutWidth = this.width + this.marginLeft + this.marginRight;\n    this.layoutHeight = this.height + this.marginTop + this.marginBottom;\n\n    if (this.background) {\n      this.layoutWidth += (this.background.expandX || 0) * 2;\n      this.layoutHeight += (this.background.expandY || 0) * 2;\n    }\n\n    this.dx = this.marginLeft;\n    this.dy = this.marginTop;\n  }\n}\n"]}

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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.GroupElement = void 0;
+
+const direction_1 = require("./direction"), element_1 = require("./element");
+
+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;
+    }
+}
+
+exports.GroupElement = GroupElement;
+//# sourceMappingURL=group-element.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,21 @@
+import type { ElementOptions } from './element';
+import { BaseElement } from './element';
+import type { ColumnIconOption } from '../../ts-types';
+type IconOptions = {
+    width: number;
+    height: number;
+    svg?: string;
+    iconName?: string;
+} & 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: IconOptions);
+}
+export {};

package/cjs/render/layout/icon.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k);
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
+        enumerable: !0,
+        get: function() {
+            return m[k];
+        }
+    }), Object.defineProperty(o, k2, desc);
+} : function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k), o[k2] = m[k];
+}), __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function(o, v) {
+    Object.defineProperty(o, "default", {
+        enumerable: !0,
+        value: v
+    });
+} : function(o, v) {
+    o.default = v;
+}), __importStar = this && this.__importStar || function(mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (null != mod) for (var k in mod) "default" !== k && Object.prototype.hasOwnProperty.call(mod, k) && __createBinding(result, mod, k);
+    return __setModuleDefault(result, mod), result;
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.Icon = void 0;
+
+const util_1 = require("../../tools/util"), element_1 = require("./element"), registerIcons = __importStar(require("../../icons"));
+
+class Icon extends element_1.BaseElement {
+    constructor(options) {
+        var _a, _b, _c;
+        if (super(options), this.type = "icon", this.iconName = options.iconName, (0, util_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);
+        }
+        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();
+    }
+}
+
+exports.Icon = Icon;
+//# sourceMappingURL=icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["render/layout/icon.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA4C;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,eAAQ,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 '../../tools/util';\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"]}

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

@@ -0,0 +1,21 @@
+import type { ElementOptions } from './element';
+import { BaseElement } from './element';
+import type { ColumnIconOption } from '../../ts-types';
+type ImageOptions = {
+    width: number;
+    height: number;
+    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);
+}
+export {};

package/cjs/render/layout/image.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.Image = void 0;
+
+const element_1 = require("./element");
+
+class Image extends element_1.BaseElement {
+    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();
+    }
+}
+
+exports.Image = Image;
+//# sourceMappingURL=image.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["render/layout/image.ts"],"names":[],"mappings":";;;AAEA,uCAAwC;AAWxC,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 { isString } from '../../tools/util';\nimport type { ElementOptions } from './element';\nimport { BaseElement } from './element';\nimport * as registerIcons from '../../icons';\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"]}

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

@@ -0,0 +1,9 @@
+export * from './circle';
+export * from './container';
+export * from './group-element';
+export * from './icon';
+export * from './image';
+export * from './rect';
+export * from './text';
+export * from './percent-calc';
+export * from './arc';

package/cjs/render/layout/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k);
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
+        enumerable: !0,
+        get: function() {
+            return m[k];
+        }
+    }), Object.defineProperty(o, k2, desc);
+} : function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k), o[k2] = m[k];
+}), __exportStar = this && this.__exportStar || function(m, exports) {
+    for (var p in m) "default" === p || Object.prototype.hasOwnProperty.call(exports, p) || __createBinding(exports, m, p);
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), __exportStar(require("./circle"), exports), __exportStar(require("./container"), exports), 
+__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);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,32 @@
+import type { AlignItems, Direction, DirectionKey, JustifyContent } from './direction';
+import type { BaseElement } from './element';
+export declare class Line {
+    width: number;
+    height: number;
+    y: number;
+    x: number;
+    children: BaseElement[];
+    addAble: boolean;
+    widthLimit: number;
+    heightLimit: number;
+    direction: Direction;
+    directionKey: DirectionKey;
+    offsetX: number;
+    justifyContent: JustifyContent;
+    alignItems: AlignItems;
+    constructor(widthLimit: number, direction: Direction, justifyContent: JustifyContent, alignItems: AlignItems);
+    add(element: BaseElement): void;
+    canAdd(element: BaseElement): boolean;
+    updateHeight(element: BaseElement): void;
+    lineFinish(): void;
+    updateXAlign(): void;
+    getOffsetY(element: BaseElement): number;
+    getContentSize(): {
+        width: number;
+        height: number;
+    };
+    getElements(parentPos?: {
+        parentX: number;
+        parentY: number;
+    }, isHover?: boolean, isSelect?: boolean): any[];
+}