diff --git a/common/changes/@visactor/vtable/fix-adaptive-tree_2023-12-19-10-11.json b/common/changes/@visactor/vtable/fix-adaptive-tree_2023-12-19-10-11.json new file mode 100644 index 000000000..62032eb87 --- /dev/null +++ b/common/changes/@visactor/vtable/fix-adaptive-tree_2023-12-19-10-11.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vtable", + "comment": "fix: support tree mode adaptive", + "type": "none" + } + ], + "packageName": "@visactor/vtable" +} \ No newline at end of file diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 37564549d..2df1adc0a 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -181,12 +181,12 @@ importers: '@types/react-dom': ^18.0.0 '@visactor/vchart': 1.7.3 '@visactor/vdataset': ~0.15.7 - '@visactor/vrender': 0.16.20 - '@visactor/vrender-components': 0.16.20 - '@visactor/vscale': 0.16.0 + '@visactor/vrender': 0.17.6 + '@visactor/vrender-components': 0.17.6 + '@visactor/vscale': ~0.17.1 '@visactor/vtable-editors': workspace:* '@visactor/vutils': ~0.16.10 - '@visactor/vutils-extension': 1.5.1-alpha.0 + '@visactor/vutils-extension': ~1.7.5 '@vitejs/plugin-react': 3.1.0 axios: ^1.4.0 chai: 4.3.4 @@ -225,12 +225,12 @@ importers: vite-plugin-markdown: ^2.1.0 dependencies: '@visactor/vdataset': 0.15.14 - '@visactor/vrender': 0.16.20 - '@visactor/vrender-components': 0.16.20 - '@visactor/vscale': 0.16.0 + '@visactor/vrender': 0.17.6 + '@visactor/vrender-components': 0.17.6 + '@visactor/vscale': 0.17.1 '@visactor/vtable-editors': link:../vtable-editors '@visactor/vutils': 0.16.18 - '@visactor/vutils-extension': 1.5.1-alpha.0 + '@visactor/vutils-extension': 1.7.5 cssfontparser: 1.2.1 devDependencies: '@babel/core': 7.20.12 @@ -3501,11 +3501,13 @@ packages: '@visactor/vscale': 0.16.18 '@visactor/vutils': 0.16.18 - /@visactor/vrender-core/0.16.17: - resolution: {integrity: sha512-cAlxWZ4xV/dDVpoHuUfvXL+YR/bQj3A9L4v39mmWhdADcaE25DIxGkpWsNn6UOJoROdojrXCHPQTPToSZS8P5A==} + /@visactor/vrender-components/0.17.6: + resolution: {integrity: sha512-4uFEXXinSYYREuDvmPuTVDm/h4iBavaDRy50d1Q2BkGrs7nkY2mNxRsFN3srdvIntsb/dyGw/1xJAt0qmHFyjA==} dependencies: - '@visactor/vutils': 0.16.18 - color-convert: 2.0.1 + '@visactor/vrender-core': 0.17.6 + '@visactor/vrender-kits': 0.17.6 + '@visactor/vscale': 0.17.1 + '@visactor/vutils': 0.17.1 dev: false /@visactor/vrender-core/0.16.20: @@ -3514,13 +3516,18 @@ packages: '@visactor/vutils': 0.16.18 color-convert: 2.0.1 - /@visactor/vrender-kits/0.16.17: - resolution: {integrity: sha512-vwzWy7Ukizf6PpA5yLg3izhgZ619IqjRGbiTSSJrV2vIBqkhIL5LIUIg2NTNPgQD1tSDyPZFu7BFp2sXSeSnFg==} + /@visactor/vrender-core/0.16.21: + resolution: {integrity: sha512-qBho7mbytfbuAg0ZDwdU2ZmE2X30G9IbUR16SLE2qvIMKGhKbBwym2Z8NE9ALQIlkDqlbmg6hWM4ACUqSaj1Nw==} dependencies: - '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 0.16.17 - '@visactor/vutils': 0.16.18 - roughjs: 4.5.2 + '@visactor/vutils': 0.16.19 + color-convert: 2.0.1 + dev: false + + /@visactor/vrender-core/0.17.6: + resolution: {integrity: sha512-/3aXdK5/zpCmTkmuvCXXhy6aEL1vFjS1iLQVlBYmnP17uCl9M80um62dO+ou4betyXwDZ/tEiOiu1tHPwEUEHg==} + dependencies: + '@visactor/vutils': 0.17.1 + color-convert: 2.0.1 dev: false /@visactor/vrender-kits/0.16.20: @@ -3531,17 +3538,29 @@ packages: '@visactor/vutils': 0.16.18 roughjs: 4.5.2 - /@visactor/vrender/0.16.20: - resolution: {integrity: sha512-2iJidENrlbQVyByaB8vajD4zDZ3K92+FdM1nhrLAbL8Nm09nohwuwjJ9ItsEq2VfemGT0XMSgBwsAH8VG6c/mQ==} + /@visactor/vrender-kits/0.16.21: + resolution: {integrity: sha512-L7JDvU2HNB3aWR8tNFi8NmpVW+qPr3olQZjcQoOIOeyqX7FOBKNDN3TzSTm90B7junzBMOQN4sHsnvsT/u2T+A==} dependencies: - '@visactor/vrender-core': 0.16.20 - '@visactor/vrender-kits': 0.16.20 + '@resvg/resvg-js': 2.4.1 + '@visactor/vrender-core': 0.16.21 + '@visactor/vutils': 0.16.19 + roughjs: 4.5.2 dev: false - /@visactor/vscale/0.16.0: - resolution: {integrity: sha512-WssJ7170st7d5NaloL2syVs4npZvjzYQfAY05rfYVVJ5Zqt2Bpo3edV41jkbmMrdpVU9Mt0XoZqhJQrOI2U8PQ==} + /@visactor/vrender-kits/0.17.6: + resolution: {integrity: sha512-KQTS3hfRm4nf5RBzPXPa2qOQ9sae9QVFwmzWgiVBXSzZHXiQ/zywmhE7P/x2dBkYANBIZiKAG1gG0gjEgzF9HQ==} dependencies: - '@visactor/vutils': 0.16.0 + '@resvg/resvg-js': 2.4.1 + '@visactor/vrender-core': 0.17.6 + '@visactor/vutils': 0.17.1 + roughjs: 4.5.2 + dev: false + + /@visactor/vrender/0.17.6: + resolution: {integrity: sha512-zuNv7sI8N6GGgoA0l1DwmZV5D/1o49XNRRlEvJNCDi1AOjxXKveolhaox40hmdlyoVzQQLiKzHBpth0XcTjVLA==} + dependencies: + '@visactor/vrender-core': 0.17.6 + '@visactor/vrender-kits': 0.17.6 dev: false /@visactor/vscale/0.16.18: @@ -3549,20 +3568,17 @@ packages: dependencies: '@visactor/vutils': 0.16.18 + /@visactor/vscale/0.16.19: + resolution: {integrity: sha512-zdw33dRXS1erFR6YFDV03KVPPIpMN0QR5BEdfTwe60AourUF5+mG5ciDqEhR66cxMoWiIa1Gszl2PYL+wjDtpQ==} + dependencies: + '@visactor/vutils': 0.16.19 + dev: false + /@visactor/vscale/0.17.1: resolution: {integrity: sha512-vWDuVymipH7BE5qscS1s1aj+7o8L+uR1HdZ6S9qBS0+e3rxeteOiKcKTiFI8u+mLdsPh1KwHzUmec1SclzJyeg==} dependencies: '@visactor/vutils': 0.17.1 - /@visactor/vutils-extension/1.5.1-alpha.0: - resolution: {integrity: sha512-4qtND+1Djatb5zVzAAbRX+WAKveO2SgEyJhnTzL/gWv7Elc+QYP06VmPaQy6ZnLHmxx6bsnZn1yFitz6fifmig==} - dependencies: - '@visactor/vrender-core': 0.16.17 - '@visactor/vrender-kits': 0.16.17 - '@visactor/vscale': 0.16.18 - '@visactor/vutils': 0.16.18 - dev: false - /@visactor/vutils-extension/1.7.3: resolution: {integrity: sha512-MDxORaYXU3EjcZaamwbY3h5VKp+3PGypBWnWGhRA0C0py8yfvUpPNjUHatJb3Y9BN433GoUT8wtBsPsqWMyEqQ==} dependencies: @@ -3571,6 +3587,15 @@ packages: '@visactor/vscale': 0.17.1 '@visactor/vutils': 0.17.1 + /@visactor/vutils-extension/1.7.5: + resolution: {integrity: sha512-rQoQ7PsjNa6zh1QqVoCplb7Ksdy8XPl9n/7HDsKHN2loBGy1ppeRvQgkJ6K9Zsi+niSh4+eUjRYDWS3LkD5IPg==} + dependencies: + '@visactor/vrender-core': 0.16.21 + '@visactor/vrender-kits': 0.16.21 + '@visactor/vscale': 0.16.19 + '@visactor/vutils': 0.16.19 + dev: false + /@visactor/vutils/0.15.14: resolution: {integrity: sha512-mZuJhXdDZqq5arqc/LfEmWOY6l7ErK1MurO8bR3vESxeCaQ18pN36iit15K2IMQVJuKZPnZ2ksw8+a1irXi/8A==} dependencies: @@ -3579,20 +3604,20 @@ packages: eventemitter3: 4.0.7 dev: false - /@visactor/vutils/0.16.0: - resolution: {integrity: sha512-YvURVSm3uc3k98wS0YvzkWTE+CbLMVznxESmnBLABrnvqSgG2UJB6LIN72ZMrAPiu8o6i5yn5ABo2Gdr9rBcnQ==} + /@visactor/vutils/0.16.18: + resolution: {integrity: sha512-7AjMDKZq+482oFxnYY4bihFhlK3JqEhCu6R/HQnnX6IufTxqCH3OQAvphE/kbt8w9Iuwhx5o/caBOUMt3J2KRA==} dependencies: '@turf/helpers': 6.5.0 '@turf/invariant': 6.5.0 eventemitter3: 4.0.7 - dev: false - /@visactor/vutils/0.16.18: - resolution: {integrity: sha512-7AjMDKZq+482oFxnYY4bihFhlK3JqEhCu6R/HQnnX6IufTxqCH3OQAvphE/kbt8w9Iuwhx5o/caBOUMt3J2KRA==} + /@visactor/vutils/0.16.19: + resolution: {integrity: sha512-DEqNYXIZ5wcDSMkUSqbb9Qt59jBTE5k4yIp1VBDxw3dL0s7oxSD4EuIpOZKoenVdBL1rNUNK4hcVM8GgRKE16Q==} dependencies: '@turf/helpers': 6.5.0 '@turf/invariant': 6.5.0 eventemitter3: 4.0.7 + dev: false /@visactor/vutils/0.17.1: resolution: {integrity: sha512-rHoY/CfT8VXuoE7YXqEixvpuL95Qy/4tGHRzeoJLaMsrUxAOXFRZeVX1wEbjrdnXeBj7UlpcG5/uVt5pIOFyeQ==} diff --git a/packages/vtable/examples/debug/aeolus.ts b/packages/vtable/examples/debug/aeolus.ts index 1882db112..26e74435c 100644 --- a/packages/vtable/examples/debug/aeolus.ts +++ b/packages/vtable/examples/debug/aeolus.ts @@ -6,12 +6,40 @@ import { bindDebugTool } from '../../src/scenegraph/debug-tool'; const CONTAINER_ID = 'vTable'; VTable.register.chartModule('vchart', VChart); export function createTable() { - const option = { + const option: VTable.TYPES.PivotChartConstructorOptions = { widthMode: 'adaptive', heightMode: 'adaptive', - rowTree: [], + rowTree: [ + { + dimensionKey: '20001', + value: '销售额', + children: [ + { + dimensionKey: '10001', + value: '销售额' + } + ] + } + ], columnTree: [], - rows: [], + rows: [ + { + dimensionKey: '20001', + title: '销售额', + headerStyle: { + color: 'red', + cursor: 'pointer' + } + }, + { + dimensionKey: '10001', + title: '销售额', + headerStyle: { + color: 'green', + cursor: 'pointer' + } + } + ], columns: [], defaultHeaderRowHeight: 'auto', indicatorTitle: ' ', @@ -2151,342 +2179,342 @@ export function createTable() { smartInvert: false } } - }, - { - indicatorKey: '1', - width: 'auto', - title: '', - cellType: 'chart', - chartModule: 'vchart', - chartSpec: { - type: 'line', - xField: ['231108105932024'], - yField: ['110002'], - direction: 'vertical', - seriesField: '20001', - axes: [ - { - id: '1', - type: 'linear', - tick: { - visible: false, - tickMode: 'd3', - style: { - stroke: 'rgba(255, 255, 255, 0)' - } - }, - niceType: 'accurateFirst', - zIndex: 200, - grid: { - visible: true, - style: { - zIndex: 150, - stroke: '#DADCDD', - lineWidth: 1, - lineDash: [4, 2] - } - }, - orient: 'left', - visible: true, - domainLine: { - visible: true, - style: { - lineWidth: 1, - stroke: 'rgba(255, 255, 255, 0)' - } - }, - title: { - visible: false, - text: '利润', - space: 8, - style: { - fontSize: 12, - fill: '#363839', - fontWeight: 'normal' - } - }, - sampling: false, - label: { - visible: true, - space: 6, - flush: true, - padding: 0, - style: { - fontSize: 12, - maxLineWidth: 174, - fill: '#6F6F6F', - angle: 0, - fontWeight: 'normal', - dy: -1, - direction: 'horizontal' - }, - autoHide: true, - autoHideMethod: 'greedy' - }, - hover: false, - background: { - visible: true, - state: { - hover: { - fillOpacity: 0.08, - fill: '#141414' - }, - hover_reverse: { - fillOpacity: 0.08, - fill: '#141414' - } - } - }, - zero: true, - nice: true - } - ], - data: { - id: 'data', - fields: { - '10001': { - alias: '指标名称 ' - }, - '20001': { - alias: '图例项 ', - domain: ['销售额', '利润'], - sortIndex: 0, - lockStatisticsByDomain: true - }, - '110002': { - alias: '指标值 ' - }, - '010002': { - alias: '指标值 ' - }, - '231108105932017': { - alias: '销售额' - }, - '231108105932024': { - alias: '订单日期', - domain: [ - '2016-01', - '2016-02', - '2016-03', - '2016-04', - '2016-05', - '2016-06', - '2016-07', - '2016-08', - '2016-09', - '2016-10', - '2016-11', - '2016-12', - '2017-01', - '2017-02', - '2017-03', - '2017-04', - '2017-05', - '2017-06', - '2017-07', - '2017-08', - '2017-09', - '2017-10', - '2017-11', - '2017-12', - '2018-01', - '2018-02', - '2018-03', - '2018-04', - '2018-05', - '2018-06', - '2018-07', - '2018-08', - '2018-09', - '2018-10', - '2018-11', - '2018-12', - '2019-01', - '2019-02', - '2019-03', - '2019-04', - '2019-05', - '2019-06', - '2019-07', - '2019-08', - '2019-09', - '2019-10', - '2019-11', - '2019-12' - ], - sortIndex: 0, - lockStatisticsByDomain: true - }, - '231108112716011': { - alias: '利润' - } - } - }, - stackInverse: true, - background: 'rgba(255, 255, 255, 0)', - region: [ - { - clip: true - } - ], - color: { - field: '20001', - type: 'ordinal', - range: ['#2E62F1', '#4DC36A'], - specified: {}, - domain: ['销售额', '利润'] - }, - tooltip: { - handler: {} - }, - line: { - style: { - curveType: { - type: 'ordinal', - field: '20001', - range: ['linear'], - domain: ['销售额', '利润'] - }, - lineWidth: { - type: 'ordinal', - field: '20001', - range: [3], - domain: ['销售额', '利润'] - }, - lineDash: { - type: 'ordinal', - field: '20001', - range: [[0, 0]], - domain: ['销售额', '利润'] - } - } - }, - area: { - style: { - curveType: { - type: 'ordinal', - field: '20001', - range: ['linear'], - domain: ['销售额', '利润'] - } - } - }, - point: { - style: { - shape: { - type: 'ordinal', - field: '20001', - range: ['circle'], - domain: ['销售额', '利润'] - }, - size: { - type: 'ordinal', - field: '20001', - range: [7.0898154036220635], - domain: ['销售额', '利润'] - }, - fill: { - field: '20001', - type: 'ordinal', - range: ['#2E62F1', '#4DC36A'], - specified: {}, - domain: ['销售额', '利润'] - }, - stroke: { - field: '20001', - type: 'ordinal', - range: ['#2E62F1', '#4DC36A'], - specified: {}, - domain: ['销售额', '利润'] - }, - strokeOpacity: { - type: 'ordinal', - field: '20001', - range: [1], - domain: ['销售额', '利润'] - }, - fillOpacity: { - type: 'ordinal', - field: '20001', - range: [1], - domain: ['销售额', '利润'] - } - }, - state: { - hover: { - lineWidth: 2, - fillOpacity: 1, - strokeOpacity: 1, - scaleX: 1.5, - scaleY: 1.5 - } - } - }, - invalidType: 'break', - hover: { - enable: true - }, - select: { - enable: true - }, - bar: { - state: { - hover: { - cursor: 'pointer', - fillOpacity: 0.8, - stroke: '#58595B', - lineWidth: 1, - zIndex: 500 - }, - selected: { - cursor: 'pointer', - fillOpacity: 1, - stroke: '#58595B', - lineWidth: 1 - }, - selected_reverse: { - fillOpacity: 0.3, - strokeWidth: 0.3 - } - } - }, - animation: false, - label: { - visible: false, - offset: 0, - overlap: { - hideOnHit: true, - avoidBaseMark: false, - strategy: [ - { - type: 'position', - position: [] - }, - { - type: 'moveY', - offset: [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5] - }, - { - type: 'moveX', - offset: [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5] - } - ], - clampForce: true - }, - style: { - fontSize: 12, - fontWeight: 'normal', - zIndex: 400, - fill: '#363839', - stroke: 'rgba(255, 255, 255, 0.8)', - lineWidth: 1, - strokeOpacity: 1 - }, - position: 'top', - smartInvert: false - } - } } + // { + // indicatorKey: '1', + // width: 'auto', + // title: '', + // cellType: 'chart', + // chartModule: 'vchart', + // chartSpec: { + // type: 'line', + // xField: ['231108105932024'], + // yField: ['110002'], + // direction: 'vertical', + // seriesField: '20001', + // axes: [ + // { + // id: '1', + // type: 'linear', + // tick: { + // visible: false, + // tickMode: 'd3', + // style: { + // stroke: 'rgba(255, 255, 255, 0)' + // } + // }, + // niceType: 'accurateFirst', + // zIndex: 200, + // grid: { + // visible: true, + // style: { + // zIndex: 150, + // stroke: '#DADCDD', + // lineWidth: 1, + // lineDash: [4, 2] + // } + // }, + // orient: 'left', + // visible: true, + // domainLine: { + // visible: true, + // style: { + // lineWidth: 1, + // stroke: 'rgba(255, 255, 255, 0)' + // } + // }, + // title: { + // visible: false, + // text: '利润', + // space: 8, + // style: { + // fontSize: 12, + // fill: '#363839', + // fontWeight: 'normal' + // } + // }, + // sampling: false, + // label: { + // visible: true, + // space: 6, + // flush: true, + // padding: 0, + // style: { + // fontSize: 12, + // maxLineWidth: 174, + // fill: '#6F6F6F', + // angle: 0, + // fontWeight: 'normal', + // dy: -1, + // direction: 'horizontal' + // }, + // autoHide: true, + // autoHideMethod: 'greedy' + // }, + // hover: false, + // background: { + // visible: true, + // state: { + // hover: { + // fillOpacity: 0.08, + // fill: '#141414' + // }, + // hover_reverse: { + // fillOpacity: 0.08, + // fill: '#141414' + // } + // } + // }, + // zero: true, + // nice: true + // } + // ], + // data: { + // id: 'data', + // fields: { + // '10001': { + // alias: '指标名称 ' + // }, + // '20001': { + // alias: '图例项 ', + // domain: ['销售额', '利润'], + // sortIndex: 0, + // lockStatisticsByDomain: true + // }, + // '110002': { + // alias: '指标值 ' + // }, + // '010002': { + // alias: '指标值 ' + // }, + // '231108105932017': { + // alias: '销售额' + // }, + // '231108105932024': { + // alias: '订单日期', + // domain: [ + // '2016-01', + // '2016-02', + // '2016-03', + // '2016-04', + // '2016-05', + // '2016-06', + // '2016-07', + // '2016-08', + // '2016-09', + // '2016-10', + // '2016-11', + // '2016-12', + // '2017-01', + // '2017-02', + // '2017-03', + // '2017-04', + // '2017-05', + // '2017-06', + // '2017-07', + // '2017-08', + // '2017-09', + // '2017-10', + // '2017-11', + // '2017-12', + // '2018-01', + // '2018-02', + // '2018-03', + // '2018-04', + // '2018-05', + // '2018-06', + // '2018-07', + // '2018-08', + // '2018-09', + // '2018-10', + // '2018-11', + // '2018-12', + // '2019-01', + // '2019-02', + // '2019-03', + // '2019-04', + // '2019-05', + // '2019-06', + // '2019-07', + // '2019-08', + // '2019-09', + // '2019-10', + // '2019-11', + // '2019-12' + // ], + // sortIndex: 0, + // lockStatisticsByDomain: true + // }, + // '231108112716011': { + // alias: '利润' + // } + // } + // }, + // stackInverse: true, + // background: 'rgba(255, 255, 255, 0)', + // region: [ + // { + // clip: true + // } + // ], + // color: { + // field: '20001', + // type: 'ordinal', + // range: ['#2E62F1', '#4DC36A'], + // specified: {}, + // domain: ['销售额', '利润'] + // }, + // tooltip: { + // handler: {} + // }, + // line: { + // style: { + // curveType: { + // type: 'ordinal', + // field: '20001', + // range: ['linear'], + // domain: ['销售额', '利润'] + // }, + // lineWidth: { + // type: 'ordinal', + // field: '20001', + // range: [3], + // domain: ['销售额', '利润'] + // }, + // lineDash: { + // type: 'ordinal', + // field: '20001', + // range: [[0, 0]], + // domain: ['销售额', '利润'] + // } + // } + // }, + // area: { + // style: { + // curveType: { + // type: 'ordinal', + // field: '20001', + // range: ['linear'], + // domain: ['销售额', '利润'] + // } + // } + // }, + // point: { + // style: { + // shape: { + // type: 'ordinal', + // field: '20001', + // range: ['circle'], + // domain: ['销售额', '利润'] + // }, + // size: { + // type: 'ordinal', + // field: '20001', + // range: [7.0898154036220635], + // domain: ['销售额', '利润'] + // }, + // fill: { + // field: '20001', + // type: 'ordinal', + // range: ['#2E62F1', '#4DC36A'], + // specified: {}, + // domain: ['销售额', '利润'] + // }, + // stroke: { + // field: '20001', + // type: 'ordinal', + // range: ['#2E62F1', '#4DC36A'], + // specified: {}, + // domain: ['销售额', '利润'] + // }, + // strokeOpacity: { + // type: 'ordinal', + // field: '20001', + // range: [1], + // domain: ['销售额', '利润'] + // }, + // fillOpacity: { + // type: 'ordinal', + // field: '20001', + // range: [1], + // domain: ['销售额', '利润'] + // } + // }, + // state: { + // hover: { + // lineWidth: 2, + // fillOpacity: 1, + // strokeOpacity: 1, + // scaleX: 1.5, + // scaleY: 1.5 + // } + // } + // }, + // invalidType: 'break', + // hover: { + // enable: true + // }, + // select: { + // enable: true + // }, + // bar: { + // state: { + // hover: { + // cursor: 'pointer', + // fillOpacity: 0.8, + // stroke: '#58595B', + // lineWidth: 1, + // zIndex: 500 + // }, + // selected: { + // cursor: 'pointer', + // fillOpacity: 1, + // stroke: '#58595B', + // lineWidth: 1 + // }, + // selected_reverse: { + // fillOpacity: 0.3, + // strokeWidth: 0.3 + // } + // } + // }, + // animation: false, + // label: { + // visible: false, + // offset: 0, + // overlap: { + // hideOnHit: true, + // avoidBaseMark: false, + // strategy: [ + // { + // type: 'position', + // position: [] + // }, + // { + // type: 'moveY', + // offset: [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5] + // }, + // { + // type: 'moveX', + // offset: [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5] + // } + // ], + // clampForce: true + // }, + // style: { + // fontSize: 12, + // fontWeight: 'normal', + // zIndex: 400, + // fill: '#363839', + // stroke: 'rgba(255, 255, 255, 0.8)', + // lineWidth: 1, + // strokeOpacity: 1 + // }, + // position: 'top', + // smartInvert: false + // } + // } + // } ], animation: false, theme: { @@ -2571,32 +2599,38 @@ export function createTable() { hash: 'a065c49f9bac69d2a13bf27249f0e932' }; const tableInstance = new VTable.PivotChart(document.getElementById(CONTAINER_ID), option); - // tableInstance.onVChartEvent('click', args => { - // console.log('listenChart click', args); - // }); + tableInstance.addEventListener('click_cell', args => { + console.log('listenChart click', args); + if (args.col === 0 && args.row === 0) { + update(); + } + }); // tableInstance.onVChartEvent('mouseover', args => { // console.log('listenChart mouseover', args); // }); window.tableInstance = tableInstance; - bindDebugTool(tableInstance.scenegraph.stage, { - customGrapicKeys: ['col', 'row'] - }); + // bindDebugTool(tableInstance.scenegraph.stage, { + // customGrapicKeys: ['col', 'row'] + // }); window.update = () => { - const datum = { - '10001': '销售额', - '10003': '231108105932017', - '20001': '销售额', - '010002': '577798.3224487305', - '231108105932017': '577798.3224487305', - '231108105932024': '2019-10' - }; - const path = VTable.getDataCellPath(option, datum); - console.log('path', path); - // const addr = tableInstance.internalProps.layoutMap.getCellAdressByHeaderPath(path) - // console.log(addr) - const { chartInstance, bounds } = tableInstance.getChartInstance(path); - console.log(chartInstance); + (option.rowTree = [ + { + dimensionKey: '20001', + value: '销售额' + } + ]), + (option.rows = [ + { + dimensionKey: '20001', + title: '销售额', + headerStyle: { + color: 'red', + cursor: 'pointer' + } + } + ]), + tableInstance.updateOption(option); }; } diff --git a/packages/vtable/examples/list/list-tree.ts b/packages/vtable/examples/list/list-tree.ts index 249cc52fb..019880993 100644 --- a/packages/vtable/examples/list/list-tree.ts +++ b/packages/vtable/examples/list/list-tree.ts @@ -1,4 +1,5 @@ import * as VTable from '../../src'; +import { bindDebugTool } from '../../src/scenegraph/debug-tool'; const ListTable = VTable.ListTable; const CONTAINER_ID = 'vTable'; @@ -166,6 +167,8 @@ export function createTable() { ], showPin: true, //显示VTable内置冻结列图标 widthMode: 'standard', + autoFillHeight: true, + // heightMode: 'adaptive', allowFrozenColCount: 2, records: data, @@ -181,6 +184,8 @@ export function createTable() { }; const instance = new ListTable(option); + window.tableInstance = instance; + bindDebugTool(instance.scenegraph.stage, { customGrapicKeys: ['col', 'row'] }); const { TREE_HIERARCHY_STATE_CHANGE } = VTable.ListTable.EVENT_TYPE; instance.on(TREE_HIERARCHY_STATE_CHANGE, args => { diff --git a/packages/vtable/examples/list/list.ts b/packages/vtable/examples/list/list.ts index 9cc1356f4..5af241953 100644 --- a/packages/vtable/examples/list/list.ts +++ b/packages/vtable/examples/list/list.ts @@ -16,7 +16,7 @@ const generatePersons = count => { }; export function createTable() { - const records = generatePersons(1000000); + const records = generatePersons(1000); const columns: VTable.ColumnsDefine = [ { field: '', @@ -315,9 +315,9 @@ export function createTable() { frozenColCount: 1, bottomFrozenRowCount: 2, rightFrozenColCount: 2, - overscrollBehavior: 'none' + overscrollBehavior: 'none', // autoWrapText: true, - // heightMode: 'autoHeight', + heightMode: 'autoHeight' // widthMode: 'adaptive' }; const tableInstance = new VTable.ListTable(option); diff --git a/packages/vtable/package.json b/packages/vtable/package.json index 35083c86d..742887629 100644 --- a/packages/vtable/package.json +++ b/packages/vtable/package.json @@ -50,11 +50,11 @@ }, "dependencies": { "@visactor/vtable-editors": "workspace:*", - "@visactor/vrender": "0.16.20", - "@visactor/vrender-components": "0.16.20", - "@visactor/vutils-extension": "1.5.1-alpha.0", + "@visactor/vrender": "0.17.6", + "@visactor/vrender-components": "0.17.6", + "@visactor/vutils-extension": "~1.7.5", "@visactor/vutils": "~0.16.10", - "@visactor/vscale": "0.16.0", + "@visactor/vscale": "~0.17.1", "@visactor/vdataset": "~0.15.7", "cssfontparser": "^1.2.1" }, @@ -123,4 +123,4 @@ "url": "https://github.com/VisActor/VTable.git", "directory": "packages/vtable" } -} +} \ No newline at end of file diff --git a/packages/vtable/src/scenegraph/component/cell-content.ts b/packages/vtable/src/scenegraph/component/cell-content.ts index ae02699d1..46ec2cd96 100644 --- a/packages/vtable/src/scenegraph/component/cell-content.ts +++ b/packages/vtable/src/scenegraph/component/cell-content.ts @@ -1,9 +1,8 @@ /* eslint-disable no-undef */ import type { IGroupGraphicAttribute } from '@visactor/vrender'; -import { RichText } from '@visactor/vrender'; +import { RichText, Text } from '@visactor/vrender'; import { Group } from '../graphic/group'; import { Icon } from '../graphic/icon'; -import { WrapText } from '../graphic/text'; /* * cell区域规划 @@ -99,8 +98,8 @@ export class CellContent extends Group { ); } - addContent(content: Icon | WrapText | RichText) { - const lastChild = this._centerGroup.lastChild as Icon | WrapText | RichText; + addContent(content: Icon | Text | RichText) { + const lastChild = this._centerGroup.lastChild as Icon | Text | RichText; if (lastChild) { // 横排content，新加入content更新x坐标 content.setAttributes({ @@ -108,7 +107,7 @@ export class CellContent extends Group { }); } this._centerGroup.appendChild(content); - if (content instanceof WrapText) { + if (content instanceof Text) { this._centerGroup.setAttribute('pickable', false); content.setAttribute('textAlign', 'left'); } @@ -174,13 +173,13 @@ export class CellContent extends Group { const text = this._centerGroup.getChildByName('text'); if (text instanceof RichText) { text.setAttribute('width', textWidth); - } else if (text instanceof WrapText) { + } else if (text instanceof Text) { text.setAttribute('maxLineWidth', textWidth); } // 按顺序更新x let x = 0; - this._centerGroup.forEachChildren((child: Icon | WrapText | RichText) => { + this._centerGroup.forEachChildren((child: Icon | Text | RichText) => { child.setAttribute('x', x); x += child.AABBBounds.width(); }); diff --git a/packages/vtable/src/scenegraph/component/custom.ts b/packages/vtable/src/scenegraph/component/custom.ts index d6a7e75e4..c6d4f4bd4 100644 --- a/packages/vtable/src/scenegraph/component/custom.ts +++ b/packages/vtable/src/scenegraph/component/custom.ts @@ -1,5 +1,5 @@ import type { Cursor } from '@visactor/vrender'; -import { createArc, createCircle, createLine, createRect, Group as VGroup } from '@visactor/vrender'; +import { createArc, createCircle, createLine, createRect, Text, Group as VGroup } from '@visactor/vrender'; import { isFunction, isObject, isString, isValid } from '@visactor/vutils'; import type { ICustomLayout, @@ -8,11 +8,9 @@ import type { ICustomRenderElements, RectElement } from '../../ts-types'; -import { Group } from '../graphic/group'; import { Icon } from '../graphic/icon'; -import { WrapText } from '../graphic/text'; import type { BaseTableAPI } from '../../ts-types/base-table'; -import type { percentCalcObj, Rect } from '../../render/layout'; +import type { percentCalcObj } from '../../render/layout'; export function dealWithCustom( customLayout: ICustomLayout, @@ -174,7 +172,7 @@ function adjustElementToGroup( }); customGroup.appendChild(textBackRect); } - const text = new WrapText( + const text = new Text( Object.assign( { pickable: !!element.clickable, diff --git a/packages/vtable/src/scenegraph/component/table-component.ts b/packages/vtable/src/scenegraph/component/table-component.ts index 2cbd2bb02..ba24e4f3a 100644 --- a/packages/vtable/src/scenegraph/component/table-component.ts +++ b/packages/vtable/src/scenegraph/component/table-component.ts @@ -1,8 +1,7 @@ -import type { ILine, IRect, IGroup, FederatedPointerEvent } from '@visactor/vrender'; +import type { ILine, IRect, IGroup, FederatedPointerEvent, Text } from '@visactor/vrender'; import { createRect, createLine, createText, createGroup, createSymbol } from '@visactor/vrender'; import { ScrollBar } from '@visactor/vrender-components'; import type { Group } from '../graphic/group'; -import type { WrapText } from '../graphic/text'; import { MenuHandler } from './menu'; import { DrillIcon } from './drill-icon'; import { CellMover } from './cell-mover'; @@ -371,7 +370,7 @@ export class TableComponent { x: colX, y }); - (this.columnResizeLabel.lastChild as WrapText).setAttribute('text', `${this.table.getColWidth(col)}px`); + (this.columnResizeLabel.lastChild as Text).setAttribute('text', `${this.table.getColWidth(col)}px`); } /** @@ -404,7 +403,7 @@ export class TableComponent { x: colX, y }); - (this.columnResizeLabel.lastChild as WrapText).setAttribute('text', `${Math.floor(this.table.getColWidth(col))}px`); + (this.columnResizeLabel.lastChild as Text).setAttribute('text', `${Math.floor(this.table.getColWidth(col))}px`); } /** diff --git a/packages/vtable/src/scenegraph/graphic/text.ts b/packages/vtable/src/scenegraph/graphic/text.ts index 4f3af7db9..a571348ea 100644 --- a/packages/vtable/src/scenegraph/graphic/text.ts +++ b/packages/vtable/src/scenegraph/graphic/text.ts @@ -1,5 +1,5 @@ export type { ITextGraphicAttribute, IWrapTextGraphicAttribute } from '@visactor/vrender'; -export { WrapText } from '@visactor/vrender'; +export { Text as WrapText } from '@visactor/vrender'; // import { getTheme, graphicUtil, Text, CanvasTextLayout, textDrawOffsetX, textLayoutOffsetY } from '@visactor/vrender'; // import type { Bounds } from '@visactor/vutils'; // import { textMeasure } from '../utils/measure-text'; diff --git a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts index 4b59b8983..eb954b6f7 100644 --- a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts +++ b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts @@ -405,7 +405,9 @@ export function updateCell(col: number, row: number, table: BaseTableAPI, addNew stroke: cellTheme?.group?.stroke ?? undefined, strokeArrayWidth: (cellTheme?.group as any)?.strokeArrayWidth ?? undefined, strokeArrayColor: (cellTheme?.group as any)?.strokeArrayColor ?? undefined, - cursor: (cellTheme?.group as any)?.cursor ?? undefined + cursor: (cellTheme?.group as any)?.cursor ?? undefined, + + y: table.scenegraph.getCellGroupY(row) } as any); // update text diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts index 925027620..c932db8fb 100644 --- a/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts +++ b/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts @@ -143,7 +143,7 @@ function createCheckbox( const autoRowHeight = table.heightMode === 'autoHeight'; const attribute = { - text: text.length === 1 && !autoWrapText ? text[0] : text, // 单行(no-autoWrapText)为字符串，多行(autoWrapText)为字符串数组 + text: text.length === 1 ? text[0] : text, maxLineWidth: autoColWidth ? Infinity : cellWidth - (padding[1] + padding[3] + hierarchyOffset) - size - spaceBetweenTextAndIcon, @@ -156,7 +156,8 @@ function createCheckbox( // widthLimit: autoColWidth ? -1 : colWidth - (padding[1] + padding[3]), heightLimit: autoRowHeight ? -1 : cellHeight - (padding[0] + padding[2]), pickable: false, - dx: hierarchyOffset + dx: hierarchyOffset, + whiteSpace: text.length === 1 && !autoWrapText ? 'no-wrap' : 'normal' }; const testAttribute = cellTheme.text ? (Object.assign({}, cellTheme.text, attribute) as any) : attribute; let checkbox; diff --git a/packages/vtable/src/scenegraph/layout/compute-row-height.ts b/packages/vtable/src/scenegraph/layout/compute-row-height.ts index 14c32b812..087878afb 100644 --- a/packages/vtable/src/scenegraph/layout/compute-row-height.ts +++ b/packages/vtable/src/scenegraph/layout/compute-row-height.ts @@ -1,11 +1,10 @@ -import { RichText, Group as VGroup } from '@visactor/vrender'; +import { RichText, Text, Group as VGroup } from '@visactor/vrender'; import type { PivotHeaderLayoutMap } from '../../layout/pivot-header-layout'; import { validToString } from '../../tools/util'; import type { ColumnIconOption, ColumnTypeOption } from '../../ts-types'; import { IconPosition } from '../../ts-types'; import type { BaseTableAPI, HeaderData } from '../../ts-types/base-table'; import type { ColumnData, TextColumnDefine } from '../../ts-types/list-table/layout-map/api'; -import { WrapText } from '../graphic/text'; import { getProp } from '../utils/get-prop'; import { getQuadProps } from '../utils/padding'; import { dealWithRichTextIcon } from '../utils/text-icon-layout'; @@ -15,7 +14,7 @@ import { isArray, isNumber, isObject } from '@visactor/vutils'; import { CheckBox } from '@visactor/vrender-components'; import { decodeReactDom, dealPercentCalc } from '../component/custom'; -const utilTextMark = new WrapText({ +const utilTextMark = new Text({ ignoreBuf: true // autoWrapText: true }); @@ -168,6 +167,11 @@ export function computeRowsHeight( } } } + } else { + table.rowHeightsMap.clear(); + for (let row = 0; row < table.rowCount; row++) { + newHeights[row] = table.getRowHeight(row); + } } if ((rowStart === 0 && rowEnd === table.rowCount - 1) || isClearRowRangeHeightsMap) { @@ -264,6 +268,7 @@ export function computeRowsHeight( if (newRowHeight !== oldRowHeights[row]) { // update the row height in scenegraph table.scenegraph.updateRowHeight(row, newRowHeight - oldRowHeights[row]); + table._setRowHeight(row, newRowHeight); } } } @@ -667,7 +672,8 @@ function computeTextHeight(col: number, row: number, cellType: ColumnTypeOption, fontWeight, fontFamily, lineHeight, - wordBreak: 'break-word' + wordBreak: 'break-word', + whiteSpace: lines.length === 1 && !autoWrapText ? 'no-wrap' : 'normal' }); maxHeight = utilTextMark.AABBBounds.height(); } else { diff --git a/packages/vtable/src/scenegraph/layout/update-col.ts b/packages/vtable/src/scenegraph/layout/update-col.ts index 6ed1464b6..c7dd6e29b 100644 --- a/packages/vtable/src/scenegraph/layout/update-col.ts +++ b/packages/vtable/src/scenegraph/layout/update-col.ts @@ -27,9 +27,9 @@ export function updateCol( removeCol(col, scene); }); + const colWidthsMap = table.colWidthsMap; removeCols.forEach(col => { - scene.table.colWidthsMap.adjustOrder(col + 1, col, scene.table.colWidthsMap.count() - col - 1); - scene.table.colWidthsMap.del(scene.table.colWidthsMap.count() - 1); + colWidthsMap.delAndReorder(col); }); if (removeCols.length) { @@ -44,7 +44,7 @@ export function updateCol( const needUpdateAfter = addCol(col, scene); resetColNumber(scene); updateAfter = updateAfter ?? needUpdateAfter; - scene.table.colWidthsMap.adjustOrder(col, col + 1, scene.table.colWidthsMap.count() - col); + colWidthsMap.addAndReorder(col); }); // reset attribute y and col number in CellGroup diff --git a/packages/vtable/src/scenegraph/layout/update-row.ts b/packages/vtable/src/scenegraph/layout/update-row.ts index 55ae982e5..2ff1230eb 100644 --- a/packages/vtable/src/scenegraph/layout/update-row.ts +++ b/packages/vtable/src/scenegraph/layout/update-row.ts @@ -5,7 +5,6 @@ import { Group } from '../graphic/group'; import { updateCell } from '../group-creater/cell-helper'; import type { Scenegraph } from '../scenegraph'; import { getCellMergeInfo } from '../utils/get-cell-merge'; -import type { IGraphic } from '@visactor/vrender'; /** * add and remove rows in scenegraph @@ -27,9 +26,9 @@ export function updateRow( removeRow(row, scene); }); + const rowHeightsMap = table.rowHeightsMap; removeRows.forEach(row => { - scene.table.rowHeightsMap.adjustOrder(row + 1, row, scene.table.rowHeightsMap.count() - row - 1); - scene.table.rowHeightsMap.del(scene.table.rowHeightsMap.count() - 1); + rowHeightsMap.delAndReorder(row); }); if (removeRows.length) { @@ -43,7 +42,7 @@ export function updateRow( addRows.forEach(row => { const needUpdateAfter = addRow(row, scene); updateAfter = updateAfter ?? needUpdateAfter; - scene.table.rowHeightsMap.adjustOrder(row, row + 1, scene.table.rowHeightsMap.count() - row); + rowHeightsMap.addAndReorder(row); }); // reset attribute y and row number in CellGroup diff --git a/packages/vtable/src/scenegraph/scenegraph.ts b/packages/vtable/src/scenegraph/scenegraph.ts index 10c71f25e..f56097262 100644 --- a/packages/vtable/src/scenegraph/scenegraph.ts +++ b/packages/vtable/src/scenegraph/scenegraph.ts @@ -11,7 +11,6 @@ import { import { isArray, isString, isValid } from '@visactor/vutils'; import type { Group } from './graphic/group'; import type { Icon } from './graphic/icon'; -import type { WrapText } from './graphic/text'; import { getCellMergeInfo } from './utils/get-cell-merge'; import { updateColWidth } from './layout/update-width'; import { TableComponent } from './component/table-component'; @@ -1263,8 +1262,8 @@ export class Scenegraph { const headerStyle = this.table._getCellStyle(col, row); const padding = getQuadProps(getProp('padding', headerStyle, col, row, this.table)); - // const text = cellGroup.getChildAt(1) as WrapText; - const text = cellGroup.getChildByName('text') as WrapText; + // const text = cellGroup.getChildAt(1) as Text; + const text = cellGroup.getChildByName('text') as Text; let oldCellHeight = 0; let newCellHeight = 0; if (text) { @@ -1539,7 +1538,7 @@ export class Scenegraph { getCellOverflowText(col: number, row: number): string | null { const cellGroup = this.getCell(col, row); - const text = cellGroup.getChildByName('text', true) as unknown as WrapText; + const text = cellGroup.getChildByName('text', true) as unknown as Text; // if (text && text.cache?.clipedText !== text.attribute.text) { // return text.attribute.text as string; // } diff --git a/packages/vtable/src/scenegraph/stick-text/index.ts b/packages/vtable/src/scenegraph/stick-text/index.ts index 95a08b113..85fa5e259 100644 --- a/packages/vtable/src/scenegraph/stick-text/index.ts +++ b/packages/vtable/src/scenegraph/stick-text/index.ts @@ -1,7 +1,6 @@ -import type { IGraphic } from '@visactor/vrender'; +import type { IGraphic, Text } from '@visactor/vrender'; import type { BaseTableAPI } from '../../ts-types/base-table'; import type { Group } from '../graphic/group'; -import type { WrapText } from '../graphic/text'; import type { PivotHeaderLayoutMap } from '../../layout/pivot-header-layout'; import type { ITextStyleOption, StickCell } from '../../ts-types'; import { isNumber } from '@visactor/vutils'; @@ -153,7 +152,7 @@ function adjustCellContentVerticalLayout( function dealVertical(cellGroup: Group, minTop: number, maxTop: number, changedCells: StickCell[]) { // get text element - const text = cellGroup.getChildByName('text', true) as WrapText; + const text = cellGroup.getChildByName('text', true) as Text; if (!text) { return; } @@ -219,7 +218,7 @@ function adjustCellContentHorizontalLayout( function dealHorizontal(cellGroup: Group, minLeft: number, maxLeft: number, changedCells: StickCell[]) { // get text element - const text = cellGroup.getChildByName('text', true) as WrapText; + const text = cellGroup.getChildByName('text', true) as Text; if (!text) { return; } diff --git a/packages/vtable/src/scenegraph/utils/text-icon-layout.ts b/packages/vtable/src/scenegraph/utils/text-icon-layout.ts index 02d853242..5a1f9a743 100644 --- a/packages/vtable/src/scenegraph/utils/text-icon-layout.ts +++ b/packages/vtable/src/scenegraph/utils/text-icon-layout.ts @@ -1,13 +1,12 @@ /* eslint-disable no-undef */ import type { IThemeSpec } from '@visactor/vrender'; -import { RichText } from '@visactor/vrender'; +import { RichText, Text } from '@visactor/vrender'; import { convertInternal } from '../../tools/util'; import type { ColumnIconOption } from '../../ts-types'; import { IconFuncTypeEnum, IconPosition } from '../../ts-types'; import { CellContent } from '../component/cell-content'; import type { Group } from '../graphic/group'; import { Icon } from '../graphic/icon'; -import { WrapText } from '../graphic/text'; import type { Scenegraph } from '../scenegraph'; import { getCellMergeInfo } from './get-cell-merge'; import { getHierarchyOffset } from './get-hierarchy-offset'; @@ -79,7 +78,7 @@ export function createCellContent( const hierarchyOffset = getHierarchyOffset(cellGroup.col, cellGroup.row, table); const attribute = { - text: text.length === 1 && !autoWrapText ? text[0] : text, // 单行(no-autoWrapText)为字符串，多行(autoWrapText)为字符串数组 + text: text.length === 1 ? text[0] : text, maxLineWidth: autoColWidth ? Infinity : cellWidth - (padding[1] + padding[3] + hierarchyOffset), // fill: true, // textAlign: 'left', @@ -90,9 +89,10 @@ export function createCellContent( // widthLimit: autoColWidth ? -1 : colWidth - (padding[1] + padding[3]), heightLimit: autoRowHeight ? -1 : cellHeight - (padding[0] + padding[2]), pickable: false, - dx: hierarchyOffset + dx: hierarchyOffset, + whiteSpace: text.length === 1 && !autoWrapText ? 'no-wrap' : 'normal' }; - const wrapText = new WrapText(cellTheme.text ? (Object.assign({}, cellTheme.text, attribute) as any) : attribute); + const wrapText = new Text(cellTheme.text ? (Object.assign({}, cellTheme.text, attribute) as any) : attribute); wrapText.name = 'text'; cellGroup.appendChild(wrapText); @@ -180,7 +180,7 @@ export function createCellContent( if (inlineFrontIcons.length === 0 && inlineEndIcons.length === 0) { const text = convertInternal(textStr).replace(/\r?\n/g, '\n').replace(/\r/g, '\n').split('\n'); const attribute = { - text: text.length === 1 && !autoWrapText ? text[0] : text, // 单行(no-autoWrapText)为字符串，多行(autoWrapText)为字符串数组 + text: text.length === 1 ? text[0] : text, maxLineWidth: autoColWidth ? Infinity : cellWidth - (padding[1] + padding[3]) - leftIconWidth - rightIconWidth, // fill: true, // textAlign: 'left', @@ -190,9 +190,10 @@ export function createCellContent( pickable: false, autoWrapText, lineClamp, - wordBreak: 'break-word' + wordBreak: 'break-word', + whiteSpace: text.length === 1 && !autoWrapText ? 'no-wrap' : 'normal' }; - const wrapText = new WrapText(cellTheme.text ? (Object.assign({}, cellTheme.text, attribute) as any) : attribute); + const wrapText = new Text(cellTheme.text ? (Object.assign({}, cellTheme.text, attribute) as any) : attribute); wrapText.name = 'text'; textMark = wrapText; } else { @@ -494,7 +495,7 @@ export function updateCellContentWidth( const textMark = cellGroup.getChildByName('text'); const cellContent = cellGroup.getChildByName('content') as CellContent; let contentHeight: number; - if (textMark instanceof WrapText) { + if (textMark instanceof Text) { oldTextHeight = textMark.AABBBounds.height(); textMark.setAttribute('maxLineWidth', distWidth - leftIconWidth - rightIconHeight - (padding[1] + padding[3])); // contentWidth = textMark.AABBBounds.width(); @@ -598,7 +599,7 @@ export function updateCellContentHeight( const textMark = cellGroup.getChildByName('text'); - if (textMark instanceof WrapText && !autoRowHeight) { + if (textMark instanceof Text && !autoRowHeight) { textMark.setAttributes({ heightLimit: newHeight } as any); diff --git a/packages/vtable/src/scenegraph/utils/text-pos.ts b/packages/vtable/src/scenegraph/utils/text-pos.ts index 6f2c6dcda..5a819a1b1 100644 --- a/packages/vtable/src/scenegraph/utils/text-pos.ts +++ b/packages/vtable/src/scenegraph/utils/text-pos.ts @@ -1,7 +1,6 @@ /* eslint-disable no-undef */ -import type { IFullThemeSpec } from '@visactor/vrender'; +import type { IFullThemeSpec, Text } from '@visactor/vrender'; import type { Group } from '../graphic/group'; -import type { WrapText } from '../graphic/text'; import { getProp } from './get-prop'; import { getQuadProps } from './padding'; import type { BaseTableAPI } from '../../ts-types/base-table'; @@ -43,8 +42,7 @@ export function getTextPos( export function updateTextPose(table: BaseTableAPI, cell: Group, col: number, row: number, theme: IFullThemeSpec) { const headerStyle = table._getCellStyle(col, row); const padding = getQuadProps(getProp('padding', headerStyle, col, row, table)); - // const text = cell.getChildAt(1) as WrapText; - const text = cell.getChildByName('text') as WrapText; + const text = cell.getChildByName('text') as Text; text.setAttributes( getTextPos(padding, theme.text.textAlign, theme.text.textBaseline, cell.attribute.width, cell.attribute.height) ); diff --git a/packages/vtable/src/state/spark-line/index.ts b/packages/vtable/src/state/spark-line/index.ts index 865cb8a0d..3a980fa6d 100644 --- a/packages/vtable/src/state/spark-line/index.ts +++ b/packages/vtable/src/state/spark-line/index.ts @@ -55,17 +55,21 @@ export function updateChartHover(col: number, row: number, x: number, y: number, const highlightLine = sparkline.getChildByName('highlight-line'); if (highlightLine) { highlightLine.setAttributes({ - x: pointX, + // x: pointX, + points: [ + { x: pointX, y: max }, + { x: pointX, y: min } + ], visible: true, pickable: true }); } else { const highlightLine = createLine({ - x: pointX, - y: 0, + // x: 0, + // y: 0, points: [ - { x: 0, y: max }, - { x: 0, y: min } + { x: pointX, y: max }, + { x: pointX, y: min } ], lineWidth: line.hover?.strokeWidth, stroke: line.hover?.stroke diff --git a/packages/vtable/src/tools/NumberMap.ts b/packages/vtable/src/tools/NumberMap.ts index 5f79dc684..02f2ecbef 100644 --- a/packages/vtable/src/tools/NumberMap.ts +++ b/packages/vtable/src/tools/NumberMap.ts @@ -139,4 +139,31 @@ export class NumberMap { this._vals = {}; this._sorted = false; } + + getLastIndex() { + return this._keys[this._keys.length - 1]; + } + + delLast() { + const lastIndex = this.getLastIndex(); + this.del(lastIndex); + } + + delAndReorder(index: number) { + if (!this.has(index)) { + return; + } + const lastIndex = this.getLastIndex(); + + this.adjustOrder(index + 1, index, lastIndex - index); + this.delLast(); + } + + addAndReorder(index: number, newValue?: T) { + const lastIndex = this.getLastIndex(); + this.adjustOrder(index, index + 1, lastIndex - index); + if (isValid(newValue)) { + this.put(index, newValue); + } + } }