devextreme/esm/__internal/scheduler/shaders/current_time_shader_vertical.js

JavaScript/TypeScript Component Suite for Responsive Web Development

/**
 * DevExtreme (esm/__internal/scheduler/shaders/current_time_shader_vertical.js)
 * Version: 26.1.3
 * Build date: Wed Jun 10 2026
 *
 * Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
import $ from "../../../core/renderer";
import {
    setHeight,
    setWidth
} from "../../../core/utils/size";
import CurrentTimeShader from "./current_time_shader";
const DATE_TIME_SHADER_ALL_DAY_CLASS = "dx-scheduler-date-time-shader-all-day";
const ALL_DAY_PANEL_CLASS = "dx-scheduler-all-day-panel";
const DATE_TIME_SHADER_TOP_CLASS = "dx-scheduler-date-time-shader-top";
const DATE_TIME_SHADER_BOTTOM_CLASS = "dx-scheduler-date-time-shader-bottom";
class VerticalCurrentTimeShader extends CurrentTimeShader {
    renderShader(isHorizontalGroupedWorkSpace, groupCount, cellCount) {
        let shaderHeight = this.getShaderHeight();
        const maxHeight = this.getShaderMaxHeight();
        const isSolidShader = shaderHeight > maxHeight;
        if (shaderHeight > maxHeight) {
            shaderHeight = maxHeight
        }
        setHeight(this.$shader, shaderHeight);
        if (this.workSpace.isGroupedByDate()) {
            this.renderGroupedByDateShaderParts(groupCount, shaderHeight, maxHeight, isSolidShader)
        } else {
            this.renderShaderParts(groupCount, shaderHeight, maxHeight, isSolidShader)
        }
    }
    renderShaderParts(groupCount, shaderHeight, maxHeight, isSolidShader) {
        for (let i = 0; i < groupCount; i += 1) {
            const shaderWidth = this.getShaderWidth();
            this.renderTopShader(this.$shader, shaderHeight, shaderWidth, i);
            if (!isSolidShader) {
                this.renderBottomShader(this.$shader, maxHeight, shaderHeight, shaderWidth, i)
            }
            this.renderAllDayShader(shaderWidth, i)
        }
    }
    renderGroupedByDateShaderParts(groupCount, shaderHeight, maxHeight, isSolidShader) {
        const shaderWidth = this.getShaderWidth();
        const bottomShaderWidth = shaderHeight < 0 ? shaderWidth : shaderWidth - this.workSpace.getCellWidth();
        const normalizedShaderHeight = Math.max(shaderHeight, 0);
        this.renderTopShader(this.$shader, normalizedShaderHeight, shaderWidth * groupCount, 0);
        if (!isSolidShader) {
            this.renderBottomShader(this.$shader, maxHeight, normalizedShaderHeight, bottomShaderWidth * groupCount + this.workSpace.getCellWidth(), 0)
        }
        this.renderAllDayShader(shaderWidth * groupCount, 0)
    }
    renderTopShader($shader, height, width, i) {
        this.$topShader = $("<div>").addClass(DATE_TIME_SHADER_TOP_CLASS);
        if (width) {
            setWidth(this.$topShader, width)
        }
        if (height) {
            setHeight(this.$topShader, height)
        }
        this.$topShader.css("marginTop", this.getShaderTopOffset(i));
        this.$topShader.css("left", this.getShaderOffset(i, width));
        $shader.append(this.$topShader)
    }
    renderBottomShader($shader, maxHeight, height, width, i) {
        this.$bottomShader = $("<div>").addClass(DATE_TIME_SHADER_BOTTOM_CLASS);
        const shaderWidth = height < 0 ? width : width - this.workSpace.getCellWidth();
        const shaderHeight = height < 0 ? maxHeight : maxHeight - height;
        setWidth(this.$bottomShader, shaderWidth);
        setHeight(this.$bottomShader, shaderHeight);
        this.$bottomShader.css("left", this.getShaderOffset(i, width - this.workSpace.getCellWidth()));
        $shader.append(this.$bottomShader)
    }
    renderAllDayShader(shaderWidth, i) {
        if (this.workSpace.option("showAllDayPanel")) {
            this.$allDayIndicator = $("<div>").addClass(DATE_TIME_SHADER_ALL_DAY_CLASS);
            setHeight(this.$allDayIndicator, this.workSpace.getAllDayHeight());
            setWidth(this.$allDayIndicator, shaderWidth);
            this.$allDayIndicator.css("left", this.getShaderOffset(i, shaderWidth));
            const $allDayPanel = this.workSpace.$element().find(`.${ALL_DAY_PANEL_CLASS}`);
            if ($allDayPanel.length) {
                $allDayPanel.first().prepend(this.$allDayIndicator)
            }
        }
    }
    getShaderOffset(i, width) {
        return this.workSpace.getGroupedStrategy().getShaderOffset(i, width)
    }
    getShaderTopOffset(i) {
        return this.workSpace.getGroupedStrategy().getShaderTopOffset(i)
    }
    getShaderHeight() {
        return this.workSpace.getGroupedStrategy().getShaderHeight()
    }
    getShaderMaxHeight() {
        return this.workSpace.getGroupedStrategy().getShaderMaxHeight()
    }
    getShaderWidth() {
        return this.workSpace.getGroupedStrategy().getShaderWidth()
    }
    clean() {
        var _this$workSpace;
        super.clean();
        null === (_this$workSpace = this.workSpace) || void 0 === _this$workSpace || _this$workSpace.$element().find(`.${DATE_TIME_SHADER_ALL_DAY_CLASS}`).remove()
    }
}
export default VerticalCurrentTimeShader;