Method render

src/component/thumbnail/ThumbnailView.ts:64–127

(thumbnailModel: ThumbnailModel, ecModel: GlobalModel, api: ExtensionAPI)

    private _renderVersion: number;

    render(thumbnailModel: ThumbnailModel, ecModel: GlobalModel, api: ExtensionAPI): void {
        this._api = api;
        this._model = thumbnailModel;
        if (!this._coordSys) {
            this._coordSys = new View();
        }

        if (!this._isEnabled()) {
            this._clear();
            return;
        }

        this._renderVersion = api.getECUpdateCycleVersion();
        const group = this.group;

        group.removeAll();

        const itemStyleModel = thumbnailModel.getModel('itemStyle');
        const itemStyle = itemStyleModel.getItemStyle();
        if (itemStyle.fill == null) {
            itemStyle.fill = ecModel.get('backgroundColor') || tokens.color.neutral00;
        }

        const refContainer = createBoxLayoutReference(thumbnailModel, api).refContainer;
        const boxRect = getLayoutRect(
            getBoxLayoutParams(thumbnailModel, true),
            refContainer
        );
        const boxBorderWidth = itemStyle.lineWidth || 0;
        const contentRect = this._contentRect = expandOrShrinkRect(
            boxRect.clone(), boxBorderWidth / 2, true, true
        );

        const contentGroup = new Group();
        group.add(contentGroup);
        contentGroup.setClipPath(new Rect({shape: contentRect.plain()}));

        const targetGroup = this._targetGroup = new Group();
        contentGroup.add(targetGroup);

        // Draw border and background and shadow of thumbnail box.
        const borderShape: RectShape = boxRect.plain();
        borderShape.r = itemStyleModel.getShallow('borderRadius', true) as (number | number[]);
        group.add(this._bgRect = new Rect({
            style: itemStyle,
            shape: borderShape,
            silent: false, // Prevent from hovering on the lower elements.
            cursor: 'grab',
        }));

        const windowStyleModel = thumbnailModel.getModel('windowStyle');
        const windowR = windowStyleModel.getShallow('borderRadius', true) as (number | number[]);
        contentGroup.add(this._windowRect = new Rect({
            shape: {x: 0, y: 0, width: 0, height: 0, r: windowR},
            style: windowStyleModel.getItemStyle(),
            silent: false, // Prevent from hovering on the lower elements.
            cursor: 'grab',
        }));