devextreme/cjs/__internal/scheduler/m_appointment_drag_behavior.js

HTML5 JavaScript Component Suite for Responsive Web Development

/**
 * DevExtreme (cjs/__internal/scheduler/m_appointment_drag_behavior.js)
 * Version: 23.2.6
 * Build date: Wed May 01 2024
 *
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.default = void 0;
var _renderer = _interopRequireDefault(require("../../core/renderer"));
var _deferred = require("../../core/utils/deferred");
var _extend = require("../../core/utils/extend");
var _draggable = _interopRequireDefault(require("../../ui/draggable"));
var _m_constants = require("./m_constants");
var _is_scheduler_component = require("./utils/is_scheduler_component");

function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    }
}
const APPOINTMENT_ITEM_CLASS = "dx-scheduler-appointment";
let AppointmentDragBehavior = function() {
    function AppointmentDragBehavior(scheduler) {
        this.scheduler = scheduler;
        this.workspace = this.scheduler._workSpace;
        this.appointments = this.scheduler._appointments;
        this.initialPosition = {
            left: 0,
            top: 0
        };
        this.appointmentInfo = null;
        this.dragBetweenComponentsPromise = null
    }
    var _proto = AppointmentDragBehavior.prototype;
    _proto.isAllDay = function(appointment) {
        return appointment.data("dxAppointmentSettings").allDay
    };
    _proto.onDragStart = function(e) {
        const {
            itemSettings: itemSettings,
            itemData: itemData,
            initialPosition: initialPosition
        } = e;
        this.initialPosition = initialPosition;
        this.appointmentInfo = {
            appointment: itemData,
            settings: itemSettings
        };
        this.appointments.notifyObserver("hideAppointmentTooltip")
    };
    _proto.onDragMove = function(e) {
        if (e.fromComponent !== e.toComponent) {
            this.appointments.notifyObserver("removeDroppableCellClass")
        }
    };
    _proto.getAppointmentElement = function(e) {
        const itemElement = e.event.data && e.event.data.itemElement || e.itemElement;
        return (0, _renderer.default)(itemElement)
    };
    _proto.onDragEnd = function(event) {
        const element = this.getAppointmentElement(event);
        const rawAppointment = this.appointments._getItemData(element);
        const container = this.appointments._getAppointmentContainer(this.isAllDay(element));
        container.append(element);
        const newCellIndex = this.workspace.getDroppableCellIndex();
        const oldCellIndex = this.workspace.getCellIndexByCoordinates(this.initialPosition);
        this.appointments.notifyObserver("updateAppointmentAfterDrag", {
            event: event,
            element: element,
            rawAppointment: rawAppointment,
            newCellIndex: newCellIndex,
            oldCellIndex: oldCellIndex
        })
    };
    _proto.onDragCancel = function() {
        this.removeDroppableClasses()
    };
    _proto.getItemData = function(appointmentElement) {
        const dataFromTooltip = (0, _renderer.default)(appointmentElement).data(_m_constants.LIST_ITEM_DATA_KEY);
        const itemDataFromTooltip = null === dataFromTooltip || void 0 === dataFromTooltip ? void 0 : dataFromTooltip.appointment;
        const itemDataFromGrid = this.appointments._getItemData(appointmentElement);
        return itemDataFromTooltip || itemDataFromGrid
    };
    _proto.getItemSettings = function(appointment) {
        const itemData = (0, _renderer.default)(appointment).data(_m_constants.LIST_ITEM_DATA_KEY);
        return itemData && itemData.settings || []
    };
    _proto.createDragStartHandler = function(options, appointmentDragging) {
        return e => {
            e.itemData = this.getItemData(e.itemElement);
            e.itemSettings = this.getItemSettings(e.itemElement);
            appointmentDragging.onDragStart && appointmentDragging.onDragStart(e);
            if (!e.cancel) {
                options.onDragStart(e)
            }
        }
    };
    _proto.createDragMoveHandler = function(options, appointmentDragging) {
        return e => {
            appointmentDragging.onDragMove && appointmentDragging.onDragMove(e);
            if (!e.cancel) {
                options.onDragMove(e)
            }
        }
    };
    _proto.createDragEndHandler = function(options, appointmentDragging) {
        return e => {
            const updatedData = this.appointments.invoke("getUpdatedData", e.itemData);
            this.appointmentInfo = null;
            e.toItemData = (0, _extend.extend)({}, e.itemData, updatedData);
            appointmentDragging.onDragEnd && appointmentDragging.onDragEnd(e);
            if (!e.cancel) {
                options.onDragEnd(e);
                if (e.fromComponent !== e.toComponent) {
                    appointmentDragging.onRemove && appointmentDragging.onRemove(e)
                }
            }
            if (true === e.cancel) {
                this.removeDroppableClasses()
            }
            if (true !== e.cancel && (0, _is_scheduler_component.isSchedulerComponent)(e.toComponent)) {
                const targetDragBehavior = e.toComponent._getDragBehavior();
                targetDragBehavior.dragBetweenComponentsPromise = new _deferred.Deferred
            }
        }
    };
    _proto.createDropHandler = function(appointmentDragging) {
        return e => {
            const updatedData = this.appointments.invoke("getUpdatedData", e.itemData);
            e.itemData = (0, _extend.extend)({}, e.itemData, updatedData);
            if (e.fromComponent !== e.toComponent) {
                appointmentDragging.onAdd && appointmentDragging.onAdd(e)
            }
            if (this.dragBetweenComponentsPromise) {
                this.dragBetweenComponentsPromise.resolve()
            }
        }
    };
    _proto.addTo = function(container, config) {
        const appointmentDragging = this.scheduler.option("appointmentDragging") || {};
        const options = (0, _extend.extend)({
            component: this.scheduler,
            contentTemplate: null,
            filter: ".".concat(APPOINTMENT_ITEM_CLASS),
            immediate: false,
            onDragStart: this.onDragStart.bind(this),
            onDragMove: this.onDragMove.bind(this),
            onDragEnd: this.onDragEnd.bind(this),
            onDragCancel: this.onDragCancel.bind(this)
        }, config);
        this.appointments._createComponent(container, _draggable.default, (0, _extend.extend)({}, options, appointmentDragging, {
            onDragStart: this.createDragStartHandler(options, appointmentDragging),
            onDragMove: this.createDragMoveHandler(options, appointmentDragging),
            onDragEnd: this.createDragEndHandler(options, appointmentDragging),
            onDrop: this.createDropHandler(appointmentDragging),
            onCancelByEsc: true
        }))
    };
    _proto.updateDragSource = function(appointment, settings) {
        const {
            appointmentInfo: appointmentInfo
        } = this;
        if (appointmentInfo || appointment) {
            const currentAppointment = appointment || appointmentInfo.appointment;
            const currentSettings = settings || appointmentInfo.settings;
            this.appointments._setDragSourceAppointment(currentAppointment, currentSettings)
        }
    };
    _proto.removeDroppableClasses = function() {
        this.appointments._removeDragSourceClassFromDraggedAppointment();
        this.workspace.removeDroppableCellClass()
    };
    return AppointmentDragBehavior
}();
exports.default = AppointmentDragBehavior;