devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
162 lines (160 loc) • 6.76 kB
JavaScript
/**
* DevExtreme (cjs/__internal/scheduler/appointment_drag_controller.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/
*/
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.AppointmentDragController = void 0;
var _renderer = _interopRequireDefault(require("../../core/renderer"));
var _m_size = require("../core/utils/m_size");
var _m_draggable = _interopRequireDefault(require("../m_draggable"));
var _const = require("./appointments_new/const");
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
const APPOINTMENT_DRAG_SOURCE_CLASS = "dx-scheduler-appointment-drag-source";
const TOOLTIP_LIST_ITEM_CLASS = "dx-list-item";
const HIGHLIGHTED_CELL_CLASS = "dx-scheduler-date-table-droppable-cell";
class AppointmentDragController {
constructor(options) {
this.options = options;
this.workSpaceDraggable = null;
this.tooltipDraggable = null;
this.$initialCell = null;
this.$highlightedCell = null;
this.$dragClone = null
}
createWorkSpaceDraggable($workSpace, draggableOptions) {
const config = Object.assign({}, this.getCommonDraggableConfig(), {
filter: `.${_const.APPOINTMENT_CLASSES.CONTAINER}`,
dragTemplate: dragInfo => {
this.$dragClone = (0, _renderer.default)(dragInfo.itemElement).clone();
this.$dragClone.css({
top: "",
left: ""
});
this.$dragClone.removeClass(APPOINTMENT_DRAG_SOURCE_CLASS);
return this.$dragClone
},
onDragStart: e => {
e.itemData = draggableOptions.getAppointmentData((0, _renderer.default)(e.itemElement));
this.onDragStart(e)
}
});
this.workSpaceDraggable = this.options.createComponent($workSpace, _m_draggable.default, config)
}
disposeWorkSpaceDraggable() {
var _this$workSpaceDragga;
null === (_this$workSpaceDragga = this.workSpaceDraggable) || void 0 === _this$workSpaceDragga || _this$workSpaceDragga.dispose();
this.workSpaceDraggable = null
}
createTooltipDraggable($tooltipList, draggableOptions) {
let tooltipItem = null;
const config = Object.assign({}, this.getCommonDraggableConfig(), {
filter: ".dx-list-item",
dragTemplate: () => {
if (!tooltipItem) {
return (0, _renderer.default)()
}
const appointmentViewModel = tooltipItem.settings;
this.$dragClone = draggableOptions.dragTemplate(appointmentViewModel);
this.$dragClone.css({
top: "",
left: ""
});
this.$dragClone.removeClass(APPOINTMENT_DRAG_SOURCE_CLASS);
return this.$dragClone
},
onDragStart: e => {
tooltipItem = (0, _renderer.default)(e.itemElement).data("dxListItemData");
e.itemData = {
appointmentData: tooltipItem.appointment,
targetedAppointmentData: tooltipItem.targetedAppointment ?? tooltipItem.appointment
};
this.onDragStart(e)
},
cursorOffset: () => ({
x: (0, _m_size.getWidth)(this.$dragClone) / 2,
y: (0, _m_size.getHeight)(this.$dragClone) / 2
})
});
this.tooltipDraggable = this.options.createComponent($tooltipList, _m_draggable.default, config)
}
disposeTooltipDraggable() {
var _this$tooltipDraggabl;
null === (_this$tooltipDraggabl = this.tooltipDraggable) || void 0 === _this$tooltipDraggabl || _this$tooltipDraggabl.dispose();
this.tooltipDraggable = null
}
getCommonDraggableConfig() {
return {
component: this.options.component,
container: this.options.$draggableContainer().get(0),
onCancelByEsc: true,
onDragMove: this.onDragMove.bind(this),
onDragEnd: this.onDragEnd.bind(this),
onDragCancel: this.onDragCancel.bind(this)
}
}
onDragStart(e) {
if (!this.options.canDragAppointment(e.itemData.appointmentData)) {
e.cancel = true;
return
}
this.$initialCell = this.options.getCellFromDragTarget((0, _renderer.default)(e.itemElement));
this.options.hideAppointmentTooltip();
(0, _renderer.default)(e.itemElement).addClass(APPOINTMENT_DRAG_SOURCE_CLASS)
}
onDragMove(e) {
const $cell = this.options.getCellFromDragTarget((0, _renderer.default)(this.$dragClone));
if (!$cell) {
this.removeCellHighlight();
return
}
this.highlightCell($cell)
}
onDragEnd(e) {
var _this$$initialCell;
if (!this.$highlightedCell) {
this.removeDraggingClasses((0, _renderer.default)(e.itemElement));
return
}
const isSameCell = (null === (_this$$initialCell = this.$initialCell) || void 0 === _this$$initialCell ? void 0 : _this$$initialCell.is(this.$highlightedCell)) ?? false;
const isSameScheduler = this.$highlightedCell.closest(e.fromComponent.$element()).length > 0;
if (isSameCell || !isSameScheduler) {
this.removeDraggingClasses((0, _renderer.default)(e.itemElement));
return
}
this.options.updateAppointmentOnDrop(e.itemData.appointmentData, e.itemData.targetedAppointmentData, this.$highlightedCell).finally(() => {
this.removeDraggingClasses((0, _renderer.default)(e.itemElement))
}).catch(err => {
throw err
});
this.removeCellHighlight()
}
onDragCancel(e) {
this.removeDraggingClasses((0, _renderer.default)(e.itemElement))
}
removeDraggingClasses($dragSource) {
$dragSource.removeClass(APPOINTMENT_DRAG_SOURCE_CLASS);
this.removeCellHighlight()
}
highlightCell($cell) {
this.removeCellHighlight();
$cell.addClass(HIGHLIGHTED_CELL_CLASS);
this.$highlightedCell = $cell
}
removeCellHighlight() {
var _this$$highlightedCel;
null === (_this$$highlightedCel = this.$highlightedCell) || void 0 === _this$$highlightedCel || _this$$highlightedCel.removeClass(HIGHLIGHTED_CELL_CLASS);
this.$highlightedCell = null
}
}
exports.AppointmentDragController = AppointmentDragController;