3
13693261870
2022-09-16 63ba114e70e380442fcbed4a5157ee52c9491216
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*   http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied.  See the License for the
* specific language governing permissions and limitations
* under the License.
*/
 
// @ts-nocheck
 
import {
    getLayoutRect,
    box as layoutBox,
    positionElement
} from '../../util/layout';
import * as formatUtil from '../../util/format';
import * as graphic from '../../util/graphic';
 
/**
 * Layout list like component.
 * It will box layout each items in group of component and then position the whole group in the viewport
 * @param {module:zrender/group/Group} group
 * @param {module:echarts/model/Component} componentModel
 * @param {module:echarts/ExtensionAPI}
 */
export function layout(group, componentModel, api) {
    const boxLayoutParams = componentModel.getBoxLayoutParams();
    const padding = componentModel.get('padding');
    const viewportSize = {width: api.getWidth(), height: api.getHeight()};
 
    const rect = getLayoutRect(
        boxLayoutParams,
        viewportSize,
        padding
    );
 
    layoutBox(
        componentModel.get('orient'),
        group,
        componentModel.get('itemGap'),
        rect.width,
        rect.height
    );
 
    positionElement(
        group,
        boxLayoutParams,
        viewportSize,
        padding
    );
}
 
export function makeBackground(rect, componentModel) {
    const padding = formatUtil.normalizeCssArray(
        componentModel.get('padding')
    );
    const style = componentModel.getItemStyle(['color', 'opacity']);
    style.fill = componentModel.get('backgroundColor');
    rect = new graphic.Rect({
        shape: {
            x: rect.x - padding[3],
            y: rect.y - padding[0],
            width: rect.width + padding[1] + padding[3],
            height: rect.height + padding[0] + padding[2],
            r: componentModel.get('borderRadius')
        },
        style: style,
        silent: true,
        z2: -1
    });
    // FIXME
    // `subPixelOptimizeRect` may bring some gap between edge of viewpart
    // and background rect when setting like `left: 0`, `top: 0`.
    // graphic.subPixelOptimizeRect(rect);
 
    return rect;
}