Note that Angular does not support return values from listeners. Instead, assign to\n *
\n *\n * {@frameworktabs}\n * {@js}\n * ```javascript\n * taskBoard.on({\n * beforeColumnDrag({ columnRecord }) {\n * if (columnRecord.locked) {\n * return false;\n * }\n * }\n * });\n * ```\n *\n * {@endjs}\n * {@react}\n *\n * ```jsx\n * const App = props => {\n * function onBeforeColumnDrag({ columnRecord }) {\n * if (columnRecord.locked) {\n * return false;\n * }\n * }\n *\n * return (\n * <>\n * event.returnValue as shown in the Angular snippet below- \n *
- small
- < 400px,\n *
- medium
- < 600px\n *
- large
- > 600px\n *
\n
`);\n }\n /**\n * Refreshes rows when data is changed in the store\n * @private\n * @category Store\n */\n onStoreDataChange({ action, changes, source : store, syncInfo }) {\n // If the next mixin up the inheritance chain has an implementation, call it\n super.onStoreDataChange?.(...arguments);\n const me = this;\n if (me.refreshSuspended || !me.rowManager) {\n return;\n }\n // If it's new data, the old calculation is invalidated.\n if (action === 'dataset') {\n me.rowManager.clearKnownHeights();\n // Initial filters on a tree store first triggers `dataset`, then `filter`.\n // Ignore `dataset`, only redraw on `filter`\n if (store.isTree && store.isFiltered) {\n return;\n }\n }\n const isGroupFieldChange = store.isGrouped && changes && store.groupers.some(grp => grp.rootFieldName in changes);\n // No need to rerender if it's a change of the value of the group field which\n // will be responded to by StoreGroup\n if (me.isPainted && !isGroupFieldChange) {\n // Optionally scroll to top if setting new data or filtering based on preserveScrollOnDatasetChange setting\n me.renderRows(Boolean(!(action in datasetReplaceActions) || me.preserveScrollOnDatasetChange));\n }\n me.toggleEmptyText();\n }\n /**\n * The hook is called when the id of a record has changed.\n * @private\n * @category Store\n */\n onStoreRecordIdChange() {\n // If the next mixin up the inheritance chain has an implementation, call it\n super.onStoreRecordIdChange?.(...arguments);\n }\n /**\n * Shows a load mask while the connected store is loading\n * @private\n * @category Store\n */\n onStoreBeforeRequest() {\n this.applyLoadMask();\n }\n /**\n * Hides load mask after a load request ends either in success or failure\n * @private\n * @category Store\n */\n onStoreAfterRequest(event) {\n if (this.loadMask && !event.exception) {\n this.masked = null;\n this.toggleEmptyText();\n }\n }\n needsFullRefreshOnStoreRemove({ isCollapse }) {\n const { store } = this;\n return (this.features?.group?.enabled && store.isGrouped) ||\n // Need to redraw parents when children are removed since they might be converted to leaves\n (store.tree && !isCollapse && store.modelClass.convertEmptyParentToLeaf);\n }\n /**\n * Animates removal of record.\n * @private\n * @category Store\n */\n onStoreRemove({ source : store, records, isCollapse, isChild, isMove, isCollapseAll }) {\n // Do not react if the content has not been rendered,\n // or if it is a move, which will be handled by onStoreAdd\n if (!this.isPainted || isMove || isCollapseAll) {\n return;\n }\n // GridSelection mixin does its job on records removing\n super.onStoreRemove?.(...arguments);\n const\n me = this,\n { rowManager } = me;\n // Remove cached heights\n rowManager.invalidateKnownHeight(records);\n // Will be refresh once in onStoreLoadSync after sync data on load\n if (me.refreshSuspended) {\n return;\n }\n // Animated grid row remove.\n // Slides outgoing row horizintally.\n if (me.animateRemovingRows && !isCollapse && !isChild) {\n // Gather all visible rows which need to be removed.\n const rowsToRemove = records.reduce((result, record) => {\n const row = rowManager.getRowById(record.id);\n row && result.push(row);\n return result;\n }, []);\n if (rowsToRemove.length) {\n const topRow = rowsToRemove[0];\n me.isAnimating = true;\n // As soon as first row has disappeared, rerender the view\n EventHelper.onTransitionEnd({\n element : topRow._elementsArray[0],\n property : 'left',\n // Detach listener after timeout even if event wasn't fired\n duration : me.transitionDuration + 50,\n thisObj : me,\n handler : () => {\n me.isAnimating = false;\n rowsToRemove.forEach(row => !row.isDestroyed && row.removeCls('b-removing'));\n rowManager.refresh();\n // undocumented internal event for scheduler\n me.trigger('rowRemove');\n me.afterRemove(arguments[0]);\n }\n });\n rowsToRemove.forEach(row => row.addCls('b-removing'));\n }\n }\n // Animated node collapse. Slides rows below upwards.\n else if (isCollapse && me.animateTreeNodeToggle) {\n // Gather all visible rows which need to be removed.\n const\n // We need to sort the indices being removed so we can detect whether it is a contiguous block\n indicesToRemove = records.flatMap(record => {\n const row = rowManager.getRowFor(record);\n return row ? row.index : emptyArray;\n }).sort(ascending),\n { length } = indicesToRemove;\n // If we are removing a contiguous block, the RowManager can do that, and the forthcoming refresh's\n // set of row tops will animate any out of place rows into position\n if (length && indicesToRemove[length - 1] === indicesToRemove[0] + length - 1) {\n return rowManager.insert(indicesToRemove[0], -indicesToRemove.length);\n }\n }\n // Cannot do an update from the affected row and down here. Since group headers might be affected by\n // removing rows we need a full refresh\n else if (me.needsFullRefreshOnStoreRemove(...arguments)) {\n rowManager.refresh();\n me.afterRemove(arguments[0]);\n }\n else {\n const\n { rows } = rowManager,\n topRowIndex = records.reduce((result, record) => {\n const row = rowManager.getRowById(record.id);\n if (row) {\n // Rows are repositioned in the array, it matches visual order. Need to find actual index in it\n result = Math.min(result, rows.indexOf(row));\n }\n return result;\n }, rows.length);\n // If there were rows below which have moved up into place\n // then repurpose them with their new records\n if (rows[topRowIndex]) {\n !me.refreshSuspended && rowManager.renderFromRow(rows[topRowIndex]);\n }\n // If nothing to render below, just update dataset height\n else {\n rowManager.trigger('changeTotalHeight', { totalHeight : rowManager.totalHeight });\n }\n me.trigger('rowRemove', { isCollapse });\n me.afterRemove(arguments[0]);\n }\n }\n onFlatStoreMove({ from, to }) {\n const\n { rowManager, store } = this,\n {\n topIndex,\n rowCount\n } = rowManager,\n // from and to are indices in the unfiltered collection, we need to convert them\n // to indices in a visible collection\n [dataStart, dataEnd] = [from, to].sort((a, b) => a - b),\n visibleStart = store.indexOf(store.getAt(dataStart, true)),\n visibleEnd = store.indexOf(store.getAt(dataEnd, true));\n // Changed block starts in our visible block. Render from there downwards.\n if (visibleStart >= topIndex && visibleStart < topIndex + rowCount) {\n rowManager.renderFromRow(rowManager.rows[visibleStart - topIndex]);\n }\n // Changed block ends in our visible block, render block\n else if (visibleEnd >= topIndex && visibleEnd < topIndex + rowCount) {\n rowManager.refresh();\n }\n // If the changed block is outside the visible area, this is a no-op\n }\n onStoreReplace({ records, all }) {\n const { rowManager } = this;\n if (all) {\n rowManager.clearKnownHeights();\n rowManager.refresh();\n }\n else {\n const rows = records.reduce((rows, [, record]) => {\n const row = this.getRowFor(record);\n if (row) {\n rows.push(row);\n }\n return rows;\n }, []);\n // Heights will be stored on render, but some records might be out of view -> have to invalidate separately\n rowManager.invalidateKnownHeight(records);\n rowManager.renderRows(rows);\n }\n }\n relayStoreDataChange(event) {\n this.ariaElement?.setAttribute('aria-rowcount', this.store.count + 1);\n /**\n * Fired when data in the store changes.\n *\n * Basically a relayed version of the store's own change event, decorated with a `store` property.\n * See the {@link Core.data.Store#event-change store change event} documentation for more information.\n *\n * @event dataChange\n * @param {Grid.view.Grid} source Owning grid\n * @param {Core.data.Store} store The originating store\n * @param {'remove'|'removeAll'|'add'|'updatemultiple'|'clearchanges'|'filter'|'update'|'dataset'|'replace'} action\n * Name of action which triggered the change. May be one of:\n * * `'remove'`\n * * `'removeAll'`\n * * `'add'`\n * * `'updatemultiple'`\n * * `'clearchanges'`\n * * `'filter'`\n * * `'update'`\n * * `'dataset'`\n * * `'replace'`\n * @param {Core.data.Model} record Changed record, for actions that affects exactly one record (`'update'`)\n * @param {Core.data.Model[]} records Changed records, passed for all actions except `'removeAll'`\n * @param {Object} changes Passed for the `'update'` action, info on which record fields changed\n */\n if (!this.project) {\n return this.trigger('dataChange', { ...event, store : event.source, source : this });\n }\n }\n /**\n * Rerenders grid when all records have been removed\n * @private\n * @category Store\n */\n onStoreRemoveAll() {\n // GridSelection mixin does its job on records removing\n super.onStoreRemoveAll?.(...arguments);\n if (this.isPainted) {\n this.rowManager.clearKnownHeights();\n this.renderRows(false);\n this.toggleEmptyText();\n }\n }\n // Refresh dirty cells on commit\n onStoreCommit({ changes }) {\n if (this.showDirty && changes.modified.length) {\n const rows = [];\n changes.modified.forEach(record => {\n const row = this.rowManager.getRowFor(record);\n row && rows.push(row);\n });\n this.rowManager.renderRows(rows);\n }\n }\n internalOnStoreStartApplyChangeset() {\n this.suspendRefresh();\n if (this.constructor.bindStoreChangeset) {\n this.captureScrollTargetRow();\n }\n }\n internalOnStoreEndApplyChangeset() {\n this.resumeRefresh(true);\n if (this.constructor.bindStoreChangeset) {\n this.restoreScrollTargetRow();\n }\n }\n /**\n * Remember scroll position when store is about to apply a changeset\n * @private\n */\n captureScrollTargetRow() {\n const me = this;\n if (me.preserveScroll) {\n const { firstFullyVisibleRow : firstRow, lastVisibleRow : lastRow } = me.rowManager;\n if (firstRow) {\n me.lastVisibleRowIds = [firstRow.id];\n for (let index = firstRow.dataIndex + 1; index <= lastRow.dataIndex; index++) {\n me.lastVisibleRowIds.push(me.rowManager.getRow(index).id);\n }\n me.lastTopRowOffset = me.scrollable.getDeltaTo(firstRow.element,\n { block : 'start', x : false, constrainToScrollable : false });\n }\n }\n }\n /**\n * Restore scroll position. Go to the topmost row formerly in the view that is still present in the dataset.\n * @private\n */\n restoreScrollTargetRow() {\n const me = this;\n let didOverscroll = false;\n if (me.preserveScroll) {\n if (me.lastVisibleRowIds) {\n me.rowManager.refresh();\n if (me.scrollable.scrollHeight >= me.lastOverscrollHeight && me.scrollable.y === me.lastOverscrollY) {\n // https://github.com/bryntum/support/issues/8040\n me.rowManager.fillBelow(me.scrollable.y);\n }\n else {\n me.lastOverscrollHeight = null;\n me.lastOverscrollY = null;\n }\n const targetId = me.lastVisibleRowIds.find(rowId => me.store.getById(rowId));\n if (targetId != undefined && targetId !== me.rowManager.firstFullyVisibleRow.id) {\n if (me.preserveScroll.overscroll) {\n const scrollNeeded = me.scrollable.getDeltaTo(me.getRecordCoords(targetId),\n {\n block : 'start',\n x : false,\n constrainToScrollable : false,\n edgeOffset : me.lastTopRowOffset.yDelta\n }).yDelta;\n if (scrollNeeded > (me.scrollable.maxY - me.scrollable.y)) {\n me.scrollable.scrollHeight += scrollNeeded;\n didOverscroll = true;\n }\n }\n me.scrollRowIntoView(targetId, {\n block : 'start',\n edgeOffset : me.lastTopRowOffset.yDelta,\n x : false\n });\n }\n }\n me.lastVisibleRowIds = undefined;\n me.lastTopRowOffset = undefined;\n if (didOverscroll) {\n me.lastOverscrollHeight = me.scrollable.scrollHeight;\n me.lastOverscrollY = me.scrollable.y;\n }\n }\n }\n // Documented with config\n get data() {\n if (this._store) {\n return this._store.records;\n }\n else {\n return this._data;\n }\n }\n set data(data) {\n if (this._store) {\n this._store.data = data;\n }\n else {\n this._data = data;\n }\n }\n //endregion\n //region Context menu items\n /**\n * Populates the header context menu. Chained in features to add menu items.\n * @param {Object} options Contains menu items and extra data retrieved from the menu target.\n * @param {Grid.column.Column} options.column Column for which the menu will be shown\n * @param {Object${me.L(action === 'read' ? 'L{loadFailedMessage}' : 'L{syncFailedMessage}')}
\n ${response?.url ? `${response.url}
` : ''}\n ${me.L('L{serverResponse}')}
\n ${message}
\n Intro
\n * The Grid widget has a wide range of features and a large API to allow users to work with data efficiently in the\n * browser. The two most important configs are {@link #config-store} and {@link #config-columns}. With the store config,\n * you decide which data to load into the grid. You can work with both in-memory arrays or load data using ajax. See the\n * {@link Core.data.Store} class to learn more about loading data into stores.\n *\n * The columns config accepts an array of {@link Grid.column.Column Column} descriptors defining which fields that will\n * be displayed in the grid. The {@link Grid.column.Column#config-field} property in the column descriptor maps to a\n * field in your dataset. The simplest grid configured with inline data and two columns would look like this:\n *\n * {@frameworktabs}\n * {@js}\n *\n * ```javascript\n * const grid = new Grid({\n * appendTo : document.body,\n *\n * columns: [\n * { field: 'name', text: 'Name' },\n * { field: 'job', text: 'Job', renderer: ({value}) => value || 'Unemployed' }\n * ],\n *\n * data: [\n * { name: 'Bill', job: 'Retired' },\n * { name: 'Elon', job: 'Visionary' },\n * { name: 'Me' }\n * ]\n * });\n * ```\n *\n * {@endjs}\n * {@react}\n *\n * ```jsx\n * const App = props => {\n * const [columns, setColumns] = useState([\n * { field: 'name', text: 'Name' },\n * { field: 'job', text: 'Job', renderer: ({value}) => value || 'Unemployed' }\n * ]);\n *\n * const [data, setData] = useState([\n * { name: 'Bill', job: 'Retired' },\n * { name: 'Elon', job: 'Visionary' },\n * { name: 'Me' }\n * ]);\n *\n * returnFeatures
\n * To avoid the Grid core being bloated, its main features are implemented in separate `feature` classes. These can be\n * turned on and off based on your requirements. To configure (or disable) a feature, use the {@link #config-features}\n * object to provide your desired configuration for the features you want to use. Each feature has an \u00B4id\u00B4 that you use\n * as a key in the features object:\n *\n * ```javascript\n * const grid = new Grid({\n * features : {\n * cellEdit : false,\n * regionResize : true,\n * cellTooltip : {\n * tooltipRenderer : (data) => {\n * }\n * },\n * ...\n * }\n * });\n * ```\n *\n * {@region Column configuration options}\n * A grid contains a number of columns stored in a {@link Grid/data/ColumnStore} that control how your data is rendered.\n * The simplest option is to point a Column to a field in your dataset, or define a custom {@link Grid.column.Column#config-renderer}.\n * The renderer function receives one object parameter containing rendering data for the current cell being rendered.\n *\n * ```javascript\n * const grid = new Grid({\n * columns: [\n * {\n * field: 'task',\n * text: 'Task',\n * renderer(renderData) {\n * const record = renderData.record;\n *\n * if (record.percentDone === 100) {\n * renderData.cellElement.classList.add('taskDone');\n * renderData.cellElement.style.background = 'green';\n * }\n *\n * return renderData.value;\n * }\n * }\n * ]\n * });\n * ```\n * You can modify columns programmatically easily:\n * ```javascript\n * // resize first column\n * grid.columns.first.width = 200;\n *\n * // Change text\n * grid.columns.first.text = 'New text';\n *\n * ```\n * To learn more about modifying individual columns, please see the docs for {@link Grid/data/ColumnStore}\n * and {@link Grid/column/Column}.\n *\n * {@endregion}\n * {@region Grid sections (aka \"locked\" or \"frozen\" columns)}\n * The grid can be divided horizontally into individually scrollable sections. This is great if you have lots of columns\n * that don't fit the available width of the screen. To enable this feature, simply mark the columns you want to `lock`.\n * Locked columns are then displayed in their own section to the left of the other columns:\n *\n * ```javascript\n * const grid = new Grid({\n * width : 500,\n * subGridConfigs : {\n * // set a fixed locked section width if desired\n * locked : { width: 300 }\n * },\n * columns : [\n * { field : 'name', text : 'Name', width : 200, locked : true },\n * { field : 'firstName', text : 'First name', width : 100, locked : true },\n * { field : 'surName', text : 'Last name', width : 100, locked : true },\n * { field : 'city', text : 'City', width : 100 },\n * { type : 'number', field : 'age', text : 'Age', width : 200 },\n * { field : 'food', text : 'Food', width : 200 }\n * ]\n * });\n * ```\n *\n * {@inlineexample Grid/view/LockedGrid.js}\n * You can also move columns between sections by using drag and drop, or use the built-in header context menu. If you\n * want to be able to resize the locked grid section, enable the {@link Grid.feature.RegionResize} feature.\n * {@endregion}\n * {@region Filtering}\n * One important requirement of a good Grid component is the ability to filter large datasets to quickly find what you\n * are looking for. To enable filtering (through the context menu), add the {@link Grid.feature.Filter} feature:\n *\n * ```javascript\n * const grid = new Grid({\n * features: {\n * filter: true\n * }\n * });\n * ```\n *\n * Or activate a default filter at initial rendering:\n *\n * ```javascript\n * const grid = new Grid({\n * features: {\n * filter: { property : 'city', value : 'New York' }\n * }\n * });\n * ```\n *\n * {@inlineexample Grid/feature/Filter.js}\n * {@endregion}\n * {@region Tooltips}\n * If you have a data models with many fields, and you want to show\n * additional data when hovering over a cell, use the {@link Grid.feature.CellTooltip} feature. To show a\n * tooltip for all cells:\n *\n * ```javascript\n * const grid = new Grid({\n * features: {\n * cellTooltip: ({value}) => value\n * }\n * });\n * ```\n *\n * {@inlineexample Grid/feature/CellTooltip.js}\n * {@endregion}\n * {@region Inline Editing (default on)}\n * To enable inline cell editing in the grid, simply add the {@link Grid.feature.CellEdit} feature:\n *\n * ```javascript\n * const grid = new Grid({\n * features : {\n * cellEdit : true\n * },\n * columns: [\n * {\n * field: 'task',\n * text: 'Task'\n * }\n * ]\n * });\n * ```\n *\n * {@inlineexample Grid/feature/CellEdit.js}\n * {@endregion}\n * {@region Context Menu}\n * Use {@link Grid.feature.CellMenu} and {@link Grid.feature.HeaderMenu} features if you want your users to be able to\n * interact with the data through the context menu:\n *\n * ```javascript\n * const grid = new Grid({\n * features : {\n * headerMenu : {\n * items : {\n * showInfo : {\n * text : 'Show info',\n * icon : 'fa fa-info-circle',\n * weight : 200,\n * onItem : ({ item }) => console.log(item.text)\n * }\n * }\n * },\n * cellMenu : {\n * items : {\n * showOptions : {\n * text : 'Show options',\n * icon : 'fa fa-gear',\n * weight : 200\n * }\n * }\n * }\n * }\n * });\n * ```\n *\n * {@inlineexample Grid/feature/CellMenu.js}\n * {@endregion}\n * {@region Grouping}\n * To group rows by a field in your dataset, use the {@link Grid.feature.Group} feature.\n * {@inlineexample Grid/feature/Group.js}\n * {@endregion}\n * {@region Searching}\n * When working with lots of data, a quick alternative to filtering is the {@link Grid.feature.Search} feature.\n * It highlights matching values in the grid as you type.\n * {@inlineexample Grid/feature/Search2.js}\n * {@endregion}\n * {@region Loading and saving data}\n * The grid keeps all its data in a {@link Core.data.Store}, which is essentially an Array of {@link Core.data.Model}\n * items. You define your own Model representing your data entities and use the Model API to get and set values.\n *\n * ```javascript\n * class Person extends Model {}\n *\n * const person = new Person({\n * name: 'Steve',\n * age: 38\n * });\n *\n * person.name = 'Linda'; // person object is now `dirty`\n *\n * const store = new Store({\n * data : [\n * { name : 'Don', age : 40 }\n * ]\n * });\n *\n * store.add(person);\n *\n * console.log(store.count()); // === 2\n *\n * store.remove(person); // Remove from store\n * ```\n *\n * When you update a record in a store, it's considered dirty, until you call {@link Core.data.mixin.StoreCRUD#function-commit}\n * on the containing Store. You can also configure your Store to commit automatically (like Google docs). If you use an\n * AjaxStore, it will send changes to your server when commit is called.\n *\n * Any changes you make to the Store or its records are immediately reflected in the Grid, so there is no need to tell\n * it to refresh manually.\n *\n * To create a custom load mask, subscribe to the grid's store events and {@link Core.widget.Widget#config-masked mask}\n * on {@link Core.data.AjaxStore#event-beforeRequest} and unmask on {@link Core.data.AjaxStore#event-afterRequest}. The\n * mask can also be used to display error messages if an {@link Core.data.AjaxStore#event-exception} occurs.\n *\n * ```javascript\n * const grid = new Grid({\n * loadMask : null\n * });\n *\n * grid.store.on({\n * beforeRequest() {\n * grid.masked = {\n * text : 'Data is loading...'\n * };\n * },\n * afterRequest() {\n * grid.masked = null;\n * },\n * exception({ response }) {\n * grid.masked.error = response.message || 'Load failed';\n * }\n * });\n *\n * store.load();\n * ```\n *\n * To learn more about loading and saving data, please refer to [this guide](#Grid/guides/data/displayingdata.md).\n * {@endregion}\n * {@region Default configs}\n * There is a myriad of configs and features available for Grid, some of them on by default and some of them requiring\n * extra configuration. The code below tries to illustrate the major things that are used by default:\n *\n * ```javascript\n * const grid = new Grid({\n * // The following features are enabled by default:\n * features : {\n * cellEdit : true,\n * columnPicker : true,\n * columnReorder : true,\n * columnResize : true,\n * cellMenu : true,\n * headerMenu : true,\n * group : true,\n * rowCopyPaste : true, // Allow using [Ctrl/CMD + C/X] and [Ctrl/CMD + V] to copy/cut and paste rows\n * sort : true\n * },\n *\n * animateRemovingRows : true, // Rows will slide out on removal\n * autoHeight : false, // Grid needs to have a height supplied through CSS (strongly recommended) or by specifying `height`\n * columnLines : true, // Themes might override it to hide lines anyway\n * emptyText : 'No rows to display',\n * enableTextSelection : false, // Not allowed to select text in cells by default,\n * fillLastColumn : true, // By default the last column is stretched to fill the grid\n * fullRowRefresh : true, // Refreshes entire row when a cell value changes\n * loadMask : 'Loading...',\n * resizeToFitIncludesHeader : true, // Also measure header when auto resizing columns\n * responsiveLevels : {\n * small : 400,\n * medium : 600,\n * large : '*'\n * },\n * rowHeight : null, // Determined using CSS, it will measure rowHeight\n * showDirty : false, // No indicator for changed cells\n * });\n * ```\n *\n * {@endregion}\n * {@region Keyboard shortcuts}\n * Grid has the following default keyboard shortcuts:\n *\n *\n * | Keys | Action | Weight \u00B9 | Action description |\n * |----------------------|------------------------|:--------:|----------------------------------------------------------------------------------------------------|\n * | `ArrowUp` | *navigateUp* | 10 | Focuses the cell above currently focused cell. |\n * | `ArrowRight` | *navigateRight* | 10 | Focuses the cell to the right of currently focused cell |\n * | `ArrowDown` | *navigateDown* | 10 | Focuses the cell below currently focused cell |\n * | `ArrowLeft` | *navigateLeft* | 10 | Focuses the cell to the left of currently focused cell |\n * | `Shift`+`ArrowUp` | *extendSelectionUp* | | Extends the selection one row up from currently focused cell |\n * | `Shift`+`ArrowRight` | *extendSelectionRight* | | Extends the selection one column to the right from currently focused cell |\n * | `Shift`+`ArrowDown` | *extendSelectionDown* | | Extends the selection one row down from currently focused cell |\n * | `Shift`+`ArrowLeft` | *extendSelectionLeft* | | Extends the selection one column to the left from currently focused cell |\n * | `Space` | *toggleSelection* | 10 | Toggles selection of currently focused cell if selectionMode.selectOnKeyboardNavigation is `false` |\n * | `Ctrl`+`Home` | *navigateFirstCell* | | Focuses the first cell at the first row (including header) |\n * | `Home` | *navigateFirstColumn* | | Focuses the first cell of current focused row |\n * | `Ctrl`+`End` | *navigateLastCell* | | Focuses the last cell of the last row |\n * | `End` | *navigateLastColumn* | | Focuses the last cell of current focused row |\n * | `PageUp` | *navigatePrevPage* | | Displays previous page |\n * | `PageDown` | *navigateNextPage* | | Displays next page |\n * | `Enter` | *activateHeader* | | Equals to a header click |\n * | `Space` | *clickCellByKey* | 1000 | Equals to a cell click |\n * | `Ctrl`+`Z` | *undoRedoKeyPress* | | Undo/redo (when using {@link Core.data.stm.StateTrackingManager}) |\n * | `Ctrl`+`Shift`+`Z` | *undoRedoKeyPress* | | Undo/redo (when using {@link Core.data.stm.StateTrackingManager}) |\n *\n * **\u00B9** Customization of keyboard shortcuts that has a `weight` can affect other features that also uses that\n * particular keyboard shortcut. Read more in [our guide](#Grid/guides/customization/keymap.md).\n *\n *
\n *\n * Please note that
\n *\n * The following Grid features has their own keyboard shortcuts. Follow the links for details.\n * * {@link Grid.feature.CellCopyPaste#keyboard-shortcuts CellCopyPaste}\n * * {@link Grid.feature.CellEdit#keyboard-shortcuts CellEdit}\n * * {@link Grid.feature.CellMenu#keyboard-shortcuts CellMenu}\n * * {@link Grid.feature.ColumnRename#keyboard-shortcuts ColumnRename}\n * * {@link Grid.feature.Filter#keyboard-shortcuts Filter}\n * * {@link Grid.feature.Group#keyboard-shortcuts Group}\n * * {@link Grid.feature.HeaderMenu#keyboard-shortcuts HeaderMenu}\n * * {@link Grid.feature.QuickFind#keyboard-shortcuts QuickFind}\n * * {@link Grid.feature.RowCopyPaste#keyboard-shortcuts RowCopyPaste}\n * * {@link Grid.feature.Search#keyboard-shortcuts Search}\n * * {@link Grid.feature.Tree#keyboard-shortcuts Tree}\n *\n * For more information on how to customize keyboard shortcuts, please see\n * [our guide](#Grid/guides/customization/keymap.md)\n *\n * {@endregion}\n * {@region Performance}\n * In general the Grid widget has very good performance and you can try loading any amount of data in the\n * bigdataset demo.\n * The overall rendering performance is naturally affected by many other things than the data volume. Other important\n * factors that can impact performance: number of columns, complex cell renderers, locked columns, the number of\n * features enabled and of course the browser (Chrome fastest).\n * {@endregion}\n * {@region Accessibility}\n * As far as possible, the grid is accessible to WAI-ARIA standards. Every cell, including column header cells is\n * visitable. The arrow keys navigate, and if a cell contains focusable content, navigating to that cell focuses the\n * content. `Escape` will exit from that and focus the encapsulating cell.\n *\n * When tabbing back into a grid that has previously been entered, focus moves to the last focused cell.\n *\n * The column menu is invoked using the `Space` key when focused on a column header.\n *\n * The cell menu is invoked using the `Space` key when focused on a data cell.\n * {@endregion}\n *\n * {@region Saving state}\n * The grid supports saving its UI {@link Grid.view.mixin.GridState state} to ensure end users will see the same column\n * sizes, sorting, grouping settings as they reload the page / app. Please refer to the {@link Grid.view.mixin.GridState}\n * and {@link Core.mixin.State} documentation for more information on state management.\n * {@endregion}\n *\n * @extends Grid/view/GridBase\n * @classtype grid\n * @widget\n */\nexport default class Grid extends GridBase {\n static get $name() {\n return 'Grid';\n }\n // Factoryable type name\n static get type() {\n return 'grid';\n }\n}\n// Register this widget type with its Factory\nGrid.initClass();\nGrid._$name = 'Grid';", "import Grid from './Grid.js';\n// tree feature will be added by default to TreeGrid, but needs to be imported\nimport '../feature/Tree.js';\n// not used here but enables using `type : tree` in a column config (exactly one required)\nimport '../column/TreeColumn.js';\n/**\n * @module Grid/view/TreeGrid\n */\n/**\n * A TreeGrid, a Tree combined with a Grid. Must be configured with exactly one {@link Grid.column.TreeColumn}\n * (`type: tree`), but can also have an arbitrary number of other columns. Most features that can be used with Grid also\n * works with TreeGrid, except the Group feature.\n *\n * {@inlineexample Grid/view/TreeGrid.js}\n *\n * @extends Grid/view/Grid\n * @classtype treegrid\n * @widget\n */\nexport default class TreeGrid extends Grid {\n static get $name() {\n return 'TreeGrid';\n }\n // Factoryable type name\n static get type() {\n return 'treegrid';\n }\n static get configurable() {\n return {\n /**\n * The store instance or config object that holds the records to be displayed by this TreeGrid. If assigning\n * a store instance, it must be configured with `tree: true`.\n *\n * A store will be created if none is specified.\n * @config {Core.data.Store|StoreConfig} store\n * @category Common\n */\n store : {\n tree : true\n }\n };\n }\n //region Plugged in functions / inherited configs\n /**\n * Collapse an expanded node or expand a collapsed. Optionally forcing a certain state.\n *\n * @function toggleCollapse\n * @param {String|Number|Core.data.Model} idOrRecord Record (the node itself) or id of a node to toggle\n * @param {Boolean} [collapse] Force collapse (true) or expand (false)\n * @param {Boolean} [skipRefresh] Set to true to not refresh rows (if calling in batch)\n * @async\n * @category Feature shortcuts\n */\n /**\n * Collapse a single node.\n *\n * @function collapse\n * @param {String|Number|Core.data.Model} idOrRecord Record (the node itself) or id of a node to collapse\n * @async\n * @category Feature shortcuts\n */\n /**\n * Expand a single node.\n *\n * @function expand\n * @param {String|Number|Core.data.Model} idOrRecord Record (the node itself) or id of a node to expand\n * @async\n * @category Feature shortcuts\n */\n /**\n * Expands parent nodes to make this node \"visible\".\n *\n * @function expandTo\n * @param {String|Number|Core.data.Model} idOrRecord Record (the node itself) or id of a node\n * @async\n * @category Feature shortcuts\n */\n //endregion\n /* disconnect doc comment */\n //region Store\n updateStore(store, was) {\n if (store && !store.tree) {\n throw new Error('TreeGrid requires a Store configured with tree : true');\n }\n super.updateStore(store, was);\n }\n //endregion\n}\n// Register this widget type with its Factory\nTreeGrid.initClass();\nTreeGrid._$name = 'TreeGrid';", "import ChipView from '../../Core/widget/ChipView.js';\nimport Store from '../../Core/data/Store.js';\nimport StringHelper from '../../Core/helper/StringHelper.js';\n/**\n * @module Grid/widget/GroupBar\n */\n/**\n * A widget used to manage grouping of a tree with the {@link Grid.feature.TreeGroup} feature. Column headers can be\n * drag-dropped on this widget to regroup the data in the tree store. This widget only handles column-based grouping,\n * and doesn't handle custom group functions.\n *\n * ```javascript\n * const tree = new TreeGrid({\n * appendTo : 'container',\n * features : {\n * treeGroup : {\n * hideGroupedColumns : true,\n * levels : [\n * 'manager',\n * 'airline'\n * ],\n * parentRenderer : (field, data) => `${StringHelper.capitalize(field)}: ${data.name}`\n * }\n * },\n *\n * columns : [\n * {\n * text : 'Name',\n * field : 'name',\n * flex : 3,\n * type : 'tree'\n * },\n * {\n * text : 'Airline',\n * field : 'airline',\n * align : 'center',\n * flex : 2,\n * },\n * {\n * type : 'check',\n * text : 'Domestic',\n * field : 'domestic',\n * align : 'left',\n * flex : 1\n * },\n * {\n * type : 'number',\n * text : 'Capacity',\n * field : 'capacity',\n * flex : 1\n * },\n * {\n * type : 'number',\n * text : 'Crew',\n * field : 'crew',\n * flex : 1\n * }\n * ],\n *\n * tbar : [\n * 'Group by',\n * {\n * type : 'groupbar'\n * }\n * ]\n * ```\n * @classtype groupbar\n * @extends Core/widget/ChipView\n * @demo Grid/tree-grouping\n * @widget\n */\nexport default class GroupBar extends ChipView {\n static type = 'groupbar';\n static $name = 'GroupBar';\n static configurable = {\n selectedCls : 'not-used',\n itemTpl(record) {\n return StringHelper.encodeHtml(StringHelper.capitalize(record.getValue(this.displayField)));\n }\n };\n construct() {\n super.construct(...arguments);\n const treeGrid = this.treeGrid = this.up('gridbase', true);\n if (!treeGrid) {\n throw new Error('GroupBar must be used inside a Grid component');\n }\n treeGrid.ion({\n paint : this.onTreePaint,\n once : true,\n thisObj : this\n });\n }\n onTreePaint() {\n const\n me = this,\n { treeGrid } = me,\n { treeGroup, columnReorder } = treeGrid.features;\n if (!treeGroup) {\n throw new Error('GroupBar widget requires the TreeGroup feature to be present');\n }\n columnReorder.usingGroupBarWidget = true;\n me.store = new Store({\n fields : ['cls', 'ascending'],\n internalListeners : {\n add : me.onStoreChanged,\n remove : me.onStoreChanged,\n thisObj : me\n }\n });\n treeGrid.ion({\n treeGroupChange : me.onTreeGroupChanged,\n beforeColumnDropFinalize : me.onBeforeColumnDropFinalize,\n columnDrag : me.onColumnDrag,\n columnDragStart : me.onColumnDragStart,\n columnDrop : me.onColumnDrop,\n thisObj : me\n });\n me.onTreeGroupChanged({ levels : treeGroup.levels });\n }\n onStoreChanged({ records }) {\n const\n me = this,\n { treeGrid } = me;\n if (!me.treeGrid.isConstructing && records?.[0]?.cls !== 'b-drop-target') {\n me.ignoreGroupChange = true;\n treeGrid.features.treeGroup.levels = me.store.map(({ field }) => field);\n me.ignoreGroupChange = false;\n }\n }\n onTreeGroupChanged({ levels }) {\n if (!this.ignoreGroupChange) {\n if (levels.some(level => level instanceof Function && !level.fieldName)) {\n throw new Error('GroupBar only supports column grouping');\n }\n this.store.data = (levels || []).map(level => {\n level = level.fieldName || level;\n return this.treeGrid.columns.get(level);\n });\n }\n }\n onColumnDragStart() {\n this.store.add({ id : 'placeholder', cls : 'b-drop-target' }); \n }\n onColumnDrag({ context, column, event }) {\n const overGroupBar = event.target.closest('.b-groupbar');\n if (overGroupBar) {\n context.valid = true;\n }\n }\n onBeforeColumnDropFinalize({ column, event }) {\n const droppedOnGroupBar = event.target.closest('.b-groupbar');\n if (droppedOnGroupBar) {\n if (!column.isTreeColumn) {\n this.store.getById('placeholder').remove();\n this.store.add(column);\n }\n }\n }\n onColumnDrop() {\n this.store.getById('placeholder')?.remove();\n }\n}\nGroupBar.initClass();\nGroupBar._$name = 'GroupBar';", "import Combo from '../../Core/widget/Combo.js';\nimport StringHelper from '../../Core/helper/StringHelper.js';\nimport '../../Grid/view/TreeGrid.js';\n/**\n * @module Grid/widget/TreeCombo\n */\n/**\n * A powerful {@link Core/widget/Combo} box using a {@link Grid/view/TreeGrid} as its drop down widget. You can define\n * your own set of columns to display and use all the regular features of the Grid.\n *\n * {@inlineexample Grid/widget/TreeCombo.js}\n *\n * ```javascript\n * new TreeCombo({\n * label : 'Pick task(s)',\n * width : '30em',\n * appendTo : document.body,\n * picker : {\n * // Define the columns to show in the grid\n * columns : [\n * { type : 'tree', text : 'Tasks', field : 'name', flex : 1 },\n * { text : 'Priority', field : 'prio' }\n * ]\n * },\n * chipView : {\n * // Render the chips in the combo field\n * itemTpl(record) {\n * return StringHelper.xss`${record.name}`;\n * }\n * },\n * store : {\n * fields : [\n * 'prio'\n * ],\n * data : [\n * {\n * name : 'Development Tasks',\n * expanded : true,\n * children : [\n * { id : 1, name : 'Improve React docs', prio : 'High' },\n * { id : 2, name : 'Build Angular module', prio : 'Low' },\n * { id : 3, name : 'Creat Vue project', prio : 'Low' }\n * ]\n * },\n * { name : 'Customer meeting', prio : 'Normal' },\n * {\n * name : 'Customer Tasks',\n * expanded : true,\n * children : [\n * { id : 4, name : 'Intro meeting', prio : 'Normal' },\n * { id : 5, name : 'Build POC', prio : 'High' },\n * { id : 6, name : 'Documentation', prio : 'Low' }\n * ]\n * }\n * ]\n * }\n * });\n * ```\n *\n * @extends Core/widget/Combo\n * @classtype treecombo\n * @inputfield\n */\nexport default class TreeCombo extends Combo {\n static $name = 'TreeCombo';\n static type = 'treecombo';\n static configurable = {\n multiSelect : true,\n picker : {\n type : 'treegrid',\n minWidth : '35em',\n disableGridRowModelWarning : true,\n selectionMode : {\n row : true,\n rowCheckboxSelection : true\n }\n },\n chipView : {\n itemTpl(record) {\n return StringHelper.xss`${record.name}`;\n },\n scrollable : {\n overflowX : 'hidden-scroll'\n }\n }\n };\n changePicker(picker, oldPicker) {\n picker = super.changePicker(picker, oldPicker);\n picker?.ion({\n selectionChange : 'onPickerSelectionChange',\n thisObj : this\n });\n return picker;\n }\n updateMultiSelect(multiSelect) {\n super.updateMultiSelect(...arguments);\n this.picker.selectionMode.multiSelect = multiSelect;\n }\n updateReadOnly(readOnly) {\n super.updateReadOnly(...arguments);\n this.picker.readOnly = readOnly;\n }\n get value() {\n return super.value;\n }\n set value(value) {\n // indicate we are setting the field value\n this._settingValue = true;\n super.value = value;\n // select provided value enitres in the picker\n this.picker.selectedRecords = value.map?.(val => this.store.getById(val)) || [];\n this._settingValue = false;\n }\n onPickerSelectionChange({ selection }) {\n // apply selection to value (if we aren't in the middle of value setting)\n if (!this._settingValue) {\n this.value = selection;\n }\n }\n}\nTreeCombo.initClass();\nTreeCombo._$name = 'TreeCombo';", "import ColumnStore from '../../Grid/data/ColumnStore.js';\nimport NumberColumn from '../../Grid/column/NumberColumn.js';\nimport Duration from '../../Core/data/Duration.js';\nimport DateHelper from '../../Core/helper/DateHelper.js';\nimport ObjectHelper from '../../Core/helper/ObjectHelper.js';\nimport '../../Core/widget/DurationField.js';\n/**\n * @module Scheduler/column/DurationColumn\n */\n/**\n * A column showing the task {@link Scheduler/model/TimeSpan#field-fullDuration duration}. Please note, this column\n * is preconfigured and expects its field to be of the {@link Core.data.Duration} type.\n *\n * The default editor is a {@link Core.widget.DurationField}. It parses time units, so you can enter \"4d\"\n * indicating 4 days duration, or \"4h\" indicating 4 hours, etc. The numeric magnitude can be either an integer or a\n * float value. Both \",\" and \".\" are valid decimal separators. For example, you can enter \"4.5d\" indicating 4.5 days\n * duration, or \"4,5h\" indicating 4.5 hours.\n *\n * {@inlineexample Scheduler/column/DurationColumn.js}\n *\n * @extends Grid/column/NumberColumn\n * @classtype duration\n * @column\n */\nexport default class DurationColumn extends NumberColumn {\n compositeField = true;\n //region Config\n static get $name() {\n return 'DurationColumn';\n }\n static get type() {\n return 'duration';\n }\n static get isGanttColumn() {\n return true;\n }\n static get fields() {\n return [\n /**\n * Precision of displayed duration, defaults to use {@link Scheduler.view.Scheduler#config-durationDisplayPrecision}.\n * Specify an integer value to override that setting, or `false` to use raw value\n * @config {Number|Boolean} decimalPrecision\n */\n { name : 'decimalPrecision', defaultValue : 1 }\n ];\n }\n static get defaults() {\n return {\n /**\n * Min value\n * @config {Number}\n */\n min : null,\n /**\n * Max value\n * @config {Number}\n */\n max : null,\n /**\n * Step size for spin button clicks.\n * @member {Number} step\n */\n /**\n * Step size for spin button clicks. Also used when pressing up/down keys in the field.\n * @config {Number}\n * @default\n */\n step : 1,\n /**\n * Large step size, defaults to 10 * `step`. Applied when pressing SHIFT and stepping either by click or\n * using keyboard.\n * @config {Number}\n * @default 10\n */\n largeStep : 0,\n field : 'fullDuration',\n text : 'L{Duration}',\n instantUpdate : true,\n // Undocumented, used by Filter feature to get type of the filter field\n filterType : 'duration',\n sortable(durationEntity1, durationEntity2) {\n const\n ms1 = durationEntity1.getValue(this.field),\n ms2 = durationEntity2.getValue(this.field);\n return ms1 - ms2;\n }\n };\n }\n construct() {\n super.construct(...arguments);\n const sortFn = this.sortable;\n this.sortable = (...args) => sortFn.call(this, ...args);\n }\n get defaultEditor() {\n const { max, min, step, largeStep } = this;\n // Remove any undefined configs, to allow config system to use default values instead\n return ObjectHelper.cleanupProperties({\n type : 'duration',\n name : this.field,\n max,\n min,\n step,\n largeStep\n });\n }\n //endregion\n //region Internal\n get durationUnitField() {\n return `${this.field}Unit`;\n }\n roundValue(duration) {\n const\n nbrDecimals = typeof this.grid.durationDisplayPrecision === 'number' ? this.grid.durationDisplayPrecision : this.decimalPrecision,\n multiplier = Math.pow(10, nbrDecimals),\n rounded = Math.round(duration * multiplier) / multiplier;\n return rounded;\n }\n formatValue(duration, durationUnit) {\n if (duration instanceof Duration) {\n durationUnit = duration.unit;\n duration = duration.magnitude;\n }\n duration = this.roundValue(duration);\n return duration + ' ' + DateHelper.getLocalizedNameOfUnit(durationUnit, duration !== 1);\n }\n //endregion\n //region Render\n defaultRenderer({ value, record, isExport }) {\n const\n type = typeof value,\n durationValue = type === 'number' ? value : value?.magnitude,\n durationUnit = type === 'number' ? record.getValue(this.durationUnitField) : value?.unit;\n // in case of bad input (for instance NaN, undefined or NULL value)\n if (typeof durationValue !== 'number') {\n return isExport ? '' : null;\n }\n return this.formatValue(durationValue, durationUnit);\n }\n //endregion\n // Used with CellCopyPaste as fullDuration doesn't work via record.get\n toClipboardString({ record }) {\n return record.getValue(this.field).toString();\n }\n fromClipboardString({ string, record }) {\n const duration = DateHelper.parseDuration(string, true, this.durationUnit);\n if (duration && 'magnitude' in duration) {\n return duration;\n }\n return record.fullDuration;\n }\n calculateFillValue({ value, record }) {\n return this.fromClipboardString({ string : value, record });\n }\n}\nColumnStore.registerColumnType(DurationColumn);\nDurationColumn._$name = 'DurationColumn';", "import TimeZoneHelper from '../../../Core/helper/TimeZoneHelper.js';\nimport ObjectHelper from '../../../Core/helper/ObjectHelper.js';\n/**\n * @module Scheduler/model/mixin/TimeZonedDatesMixin\n */\nconst dateFieldsToConvert = {\n startDate : 1,\n endDate : 1,\n constraintDate : 1,\n deadlineDate : 1\n};\n/**\n * This mixin class overrides default Model functionality to provide support for time zone converted dates\n * @mixin\n */\nexport default Target => class TimeZonedDatesMixin extends Target {\n static $name = 'TimeZonedDatesMixin';\n static fields = [\n /**\n * The current timeZone this record is converted to. Used internally to keep track of time zone conversions.\n *\n * Can also be used to create a new record with dates in a specific non-local timezone. That is useful for\n * example when replacing a store dataset. That would be interpreted as a new load, and all dates would be\n * converted to the configured timezone.\n *\n * If specifically set to `null` when adding a new record to a Store, the new record's dates will be converted\n * to the Project's configured timezone.\n *\n * For more information about timezone conversion, se {@link Scheduler.model.ProjectModel#config-timeZone}.\n *\n * This field will not {@link Core.data.field.DataField#config-persist} by default.\n *\n * @field {String|Number|null} timeZone\n * @category Advanced\n */\n {\n name : 'timeZone',\n persist : false\n }\n ];\n get timeZone() {\n return this.getData('timeZone');\n }\n set timeZone(timeZone) {\n this.setData('timeZone', timeZone);\n }\n setLocalDate(field, date) {\n const me = this;\n me.set(field, me.timeZone != null ? TimeZoneHelper.toTimeZone(date, me.timeZone) : date, true);\n // Need to set data to fool engine that the dates haven't change\n me.setData(field, me[field]);\n }\n getLocalDate(field) {\n if (this.timeZone != null && this[field] && !isNaN(this[field])) {\n return TimeZoneHelper.fromTimeZone(this[field], this.timeZone);\n }\n return this[field];\n }\n applyChangeset(rawChanges) {\n // When a sync response arrives from backend, the data will need to be converted to time zone before applied.\n if (this.timeZone != null) {\n delete rawChanges.timeZone; // Do not allow timeZone config this way\n for (const field in dateFieldsToConvert) {\n if (rawChanges[field]) {\n this.setLocalDate(field, new Date(rawChanges[field]));\n delete rawChanges[field];\n }\n }\n }\n return super.applyChangeset(...arguments);\n }\n getFieldPersistentValue(field) {\n if (this.timeZone != null) {\n const fieldName = field?.field ?? field?.name ?? field;\n // Used when saving/syncing. Returns local system dates\n if (dateFieldsToConvert[fieldName]) {\n return this.getLocalDate(fieldName);\n }\n }\n return super.getFieldPersistentValue(field);\n }\n // Converts current record into a timeZone\n convertToTimeZone(timeZone) {\n const\n me = this,\n metaModified = { ...me.meta.modified },\n convertFields = { ...dateFieldsToConvert };\n // Do not convert start and end dates on task unless manually scheduled\n if (me.isTask && !me.manuallyScheduled) {\n delete convertFields.startDate;\n delete convertFields.endDate;\n }\n // Collect values\n for (const field in convertFields) {\n // Only convert if field has value\n if (me[field] != null) {\n convertFields[field] = me[field];\n // If already converted, restore to local system time zone\n if (me.timeZone != null) {\n convertFields[field] = me.getLocalDate(field);\n // Restore value in meta modified as well\n if (metaModified[field]) {\n metaModified[field] = TimeZoneHelper.fromTimeZone(metaModified[field], me.timeZone);\n }\n }\n }\n else {\n delete convertFields[field];\n }\n }\n // Change time zone\n me.timeZone = timeZone;\n // Set values\n for (const field in convertFields) {\n // Convert and set field date silently\n me.setLocalDate(field, convertFields[field], false);\n convertFields[field] = 1; // For clearing changes below\n // Convert value in meta modified as well\n if (me.timeZone != null && metaModified[field]) {\n metaModified[field] = TimeZoneHelper.toTimeZone(metaModified[field], me.timeZone);\n }\n }\n // Clear modification metadata\n me.clearChanges(true, true, convertFields);\n // If old modification metadata, restore them to record and store\n if (!ObjectHelper.isEmpty(metaModified)) {\n me.meta.modified = metaModified;\n me.stores?.forEach(store => store.modified.add(me));\n }\n }\n};\n", "import Model from '../../Core/data/Model.js';\nimport TimeZonedDatesMixin from './mixin/TimeZonedDatesMixin.js';\nimport DomClassList from '../../Core/helper/util/DomClassList.js';\nimport DH from '../../Core/helper/DateHelper.js';\nimport VersionHelper from '../../Core/helper/VersionHelper.js';\nimport BrowserHelper from '../../Core/helper/BrowserHelper.js';\nimport ObjectHelper from '../../Core/helper/ObjectHelper.js';\nimport Duration from '../../Core/data/Duration.js';\n/**\n * @module Scheduler/model/TimeSpan\n */\n/**\n * This class represent a simple date range. It is being used in various subclasses and plugins which operate on date ranges.\n *\n * It's a subclass of {@link Core.data.Model}.\n * Please refer to documentation of those classes to become familiar with the base interface of this class.\n *\n * A TimeSpan has the following fields:\n *\n * - {@link #field-startDate} - start date of the task in the ISO 8601 format\n * - {@link #field-endDate} - end date of the task in the ISO 8601 format (not inclusive)\n * - {@link #field-duration} - duration, time between start date and end date\n * - {@link #field-durationUnit} - unit used to express the duration\n * - {@link #field-name} - an optional name of the range\n * - {@link #field-cls} - an optional CSS class to be associated with the range.\n *\n * The data source of any field can be customized in the subclass. Please refer to {@link Core.data.Model} for details. To specify\n * another date format:\n *\n * ```javascript\n * class MyTimeSpan extends TimeSpan {\n * static get fields() {\n * { name: 'startDate', type: 'date', dateFormat: 'DD/MM/YY' }\n * }\n * }\n * ```\n *\n * @extends Core/data/Model\n * @mixes Scheduler/model/mixin/TimeZonedDatesMixin\n */\nexport default class TimeSpan extends Model.mixin(TimeZonedDatesMixin) {\n static $name = 'TimeSpan';\n //region Field definitions\n static fields = [\n /**\n * The start date of a time span (or Event / Task).\n *\n * Uses {@link Core/helper/DateHelper#property-defaultFormat-static DateHelper.defaultFormat} to convert a\n * supplied string to a Date. To specify another format, either change that setting or subclass TimeSpan and\n * change the dateFormat for this field.\n *\n * Note that the field always returns a `Date`.\n *\n * @field {Date} startDate\n * @accepts {String|Date}\n * @category Scheduling\n */\n {\n name : 'startDate',\n type : 'date'\n },\n /**\n * The end date of a time span (or Event / Task).\n *\n * Uses {@link Core/helper/DateHelper#property-defaultFormat-static DateHelper.defaultFormat} to convert a\n * supplied string to a Date. To specify another format, either change that setting or subclass TimeSpan and\n * change the dateFormat for this field.\n *\n * Note that the field always returns a `Date`.\n *\n * @field {Date} endDate\n * @accepts {String|Date}\n * @category Scheduling\n */\n {\n name : 'endDate',\n type : 'date'\n },\n /**\n * The numeric part of the timespan's duration (the number of units).\n * @field {Number} duration\n * @category Scheduling\n */\n {\n name : 'duration',\n type : 'number',\n allowNull : true,\n internal : true\n },\n /**\n * The unit part of the TimeSpan duration, defaults to \"d\" (days). Valid values are:\n *\n * - \"millisecond\" - Milliseconds\n * - \"second\" - Seconds\n * - \"minute\" - Minutes\n * - \"hour\" - Hours\n * - \"day\" - Days\n * - \"week\" - Weeks\n * - \"month\" - Months\n * - \"quarter\" - Quarters\n * - \"year\"- Years\n *\n * This field is readonly after creation, to change durationUnit use #setDuration().\n * @field {DurationUnit} durationUnit\n * @category Scheduling\n */\n {\n type : 'durationunit',\n name : 'durationUnit',\n defaultValue : 'd',\n internal : true\n },\n /**\n * Calculated field which encapsulates the duration's magnitude and unit. This field will not be persisted,\n * setting it will update the {@link #field-duration} and {@link #field-durationUnit} fields.\n *\n * @field {DurationConfig|Core.data.Duration} fullDuration\n * @category Scheduling\n */\n {\n name : 'fullDuration',\n persist : false,\n column : {\n type : 'duration'\n },\n useProp : true\n },\n /**\n * An encapsulation of the CSS classes to add to the rendered time span element.\n *\n * Always returns a {@link Core.helper.util.DomClassList}, but may still be treated as a string. For\n * granular control of adding and removing individual classes, it is recommended to use the\n * {@link Core.helper.util.DomClassList} API.\n *\n * @field {Core.helper.util.DomClassList} cls\n * @accepts {Core.helper.util.DomClassList|String|String[]|Object}\n *\n * @category Styling\n */\n {\n name : 'cls',\n defaultValue : '',\n internal : true\n },\n /**\n * CSS class specifying an icon to apply to the rendered time span element.\n * **Note**: In case event is a milestone, using `iconCls` with dependency feature might slightly decrease\n * performance because feature will refer to the DOM to get exact size of the element.\n * @field {String} iconCls\n * @category Styling\n */\n {\n name : 'iconCls',\n internal : true\n },\n /**\n * A CSS style string (applied to `style.cssText`) or object (applied to `style`)\n * ```\n * record.style = 'color: red;font-weight: 800';\n * ```\n *\n * @field {String} style\n * @category Styling\n */\n {\n name : 'style',\n type : 'object',\n internal : true\n },\n /**\n * The name of the time span (or Event / Task)\n * @field {String} name\n * @category Common\n */\n {\n name : 'name',\n type : 'string',\n defaultValue : ''\n }\n ];\n //endregion\n //region Init\n construct(data, ...args) {\n const me = this;\n // fullDuration is a \"calculated field\", but convenient to allow supplying it in the data\n if (data?.fullDuration) {\n const { magnitude, unit } = data.fullDuration;\n data.duration = magnitude;\n data.unit = unit;\n delete data.fullDuration;\n }\n super.construct(data, ...args);\n me.normalize();\n if (me.startDateMS && me.endDateMS && me.startDateMS > me.endDateMS) {\n console.error(`startDate > endDate for ${me.constructor.$name} record with id: ${me.id}`);\n }\n }\n //endregion\n //region Date normalization\n internalCalculateStartDate(endDate, duration, durationUnit) {\n return DH.add(endDate, -duration, durationUnit);\n }\n internalCalculateEndDate(startDate, duration, durationUnit) {\n // Use hours to set end date in order to correctly process DST crossings???\n return DH.add(startDate, duration, durationUnit);\n }\n internalCalculateDuration(startDate, endDate, durationUnit) {\n return DH.as(durationUnit, DH.diff(startDate, endDate, 'h'), 'h');\n }\n // Separate fn to allow calling later with specific values (used by Baseline)\n internalNormalize(startDate, endDate, duration, durationUnit) {\n const\n me = this,\n hasDuration = duration != null;\n // need to calculate duration (checking first since seemed most likely to happen)\n if (startDate && endDate && !hasDuration) {\n me.setData('duration', me.internalCalculateDuration(startDate, endDate, durationUnit));\n }\n // need to calculate endDate?\n else if (startDate && !endDate && hasDuration) {\n me.setData('endDate', me.internalCalculateEndDate(startDate, duration, durationUnit));\n }\n // need to calculate startDate\n else if (!startDate && endDate && hasDuration) {\n me.setData('startDate', me.internalCalculateStartDate(endDate, duration, durationUnit));\n }\n }\n normalize() {\n this.internalNormalize(\n this.startDate,\n this.endDate,\n this.duration,\n this.durationUnit || this.constructor.defaultValues.durationUnit // Default might not be applied yet\n );\n }\n //endregion\n //region Getters & Setters\n /**\n * Returns the event store this event is part of, if any.\n *\n * @property {Scheduler.data.EventStore}\n * @readonly\n * @category Misc\n * @typings ignore\n */\n get eventStore() {\n const me = this;\n // If we are an occurrence, return our base recurring event's store\n if (me.isOccurrence) {\n return me.recurringTimeSpan.eventStore;\n }\n if (!me._eventStore) {\n me._eventStore = me.stores?.find(s => s.isEventStore);\n }\n return me._eventStore;\n }\n updateInternalCls(cls) {\n if (this._cls) {\n this._cls.value = cls;\n }\n else {\n this._cls = new DomClassList(cls);\n }\n }\n set internalCls(cls) {\n this.updateInternalCls(cls);\n this.set('cls', this._cls.value);\n }\n get internalCls() {\n const { cls } = this;\n // `cls` getter can be overriden so return `cls` value if it is DomClassList or assign it to `this._cls`\n if (cls?.isDomClassList) {\n return cls;\n }\n this.updateInternalCls(cls);\n this.setData('cls', this._cls.value);\n return this._cls;\n }\n get cls() {\n if (!this._cls) {\n this._cls = new DomClassList(super.get('cls'));\n }\n return this._cls;\n }\n set cls(cls) {\n this.internalCls = cls;\n }\n get startDate() {\n return this.get('startDate');\n }\n set startDate(date) {\n this.setStartDate(date);\n }\n get endDate() {\n return this.get('endDate');\n }\n set endDate(date) {\n this.setEndDate(date);\n }\n get endingDate() {\n const\n me = this,\n {\n endDate,\n startDate\n } = me;\n if (endDate) {\n // Special case of startDate===endDate for allDay event:\n // if (Number(endDate) === Number(startDate) && me.allDay) {\n // return DH.add(startDate, 1, 'd');\n // }\n // Nope... the above works fine except when the day start time is shifted. In this case we want the\n // event to appear as \"all day\" on the shifted day, but the above will push the endingDate beyond the\n // end of the shifted day.\n return endDate;\n }\n return DH.add(startDate, me.duration, me.durationUnit);\n }\n get duration() {\n return this.get('duration');\n }\n set duration(duration) {\n this.setDuration(duration, this.durationUnit);\n }\n get durationUnit() {\n return this.get('durationUnit');\n }\n /**\n * Sets duration and durationUnit in one go. Only allowed way to change durationUnit, the durationUnit field is\n * readonly after creation\n * @param {Number} duration Duration value\n * @param {DurationUnit} durationUnit Unit for\n * specified duration value, see {@link #field-durationUnit} for valid values\n * @category Scheduling\n */\n setDuration(duration, durationUnit = this.durationUnit) {\n // Must be a number\n duration = parseFloat(duration);\n this.set({\n duration,\n durationUnit,\n ...this.updateDatesFromDuration(duration, durationUnit)\n });\n }\n updateDatesFromDuration(magnitude, unit, startDate = this.startDate, endDate = this.endDate) {\n const result = {};\n if (startDate) {\n result.endDate = this.internalCalculateEndDate(startDate, magnitude, unit);\n }\n else if (endDate) {\n result.startDate = this.internalCalculateStartDate(endDate, magnitude, unit);\n }\n return result;\n }\n /**\n * Returns duration of the event in given unit. This is a wrapper for {@link Core.helper.DateHelper#function-getDurationInUnit-static}\n * @param {DurationUnitShort} unit\n * @param {Boolean} [doNotRound]\n * @private\n * @returns {Number}\n */\n getDurationInUnit(unit, doNotRound) {\n const me = this;\n if (me.startDate && me.endDate) {\n return DH.getDurationInUnit(me.startDate, me.endDate, unit, doNotRound);\n }\n else {\n return DH.as(unit, me.duration, me.durationUnit);\n }\n }\n get fullDuration() {\n // Used for formatting during export\n return new Duration({\n unit : this.durationUnit,\n magnitude : this.duration\n });\n }\n set fullDuration(duration) {\n if (typeof duration === 'string') {\n duration = DH.parseDuration(duration, true, this.durationUnit);\n }\n this.setDuration(duration.magnitude, duration.unit);\n }\n /**\n * Sets the range start date\n *\n * @param {Date} date The new start date\n * @param {Boolean} keepDuration Pass `true` to keep the duration of the task (\"move\" the event), `false` to change the duration (\"resize\" the event).\n * Defaults to `true`\n * @category Scheduling\n */\n setStartDate(date, keepDuration = true) {\n const\n me = this,\n toSet = {\n startDate : date\n };\n if (date) {\n let calcEndDate;\n if (keepDuration) {\n calcEndDate = me.duration != null;\n }\n else {\n if (me.endDate) {\n toSet.duration = me.internalCalculateDuration(date, me.endDate, me.durationUnit);\n if (toSet.duration < 0) {\n throw new Error('Negative duration');\n }\n }\n else {\n calcEndDate = me.duration != null;\n }\n }\n if (calcEndDate) {\n toSet.endDate = me.internalCalculateEndDate(date, me.duration, me.durationUnit);\n }\n }\n else {\n toSet.duration = null;\n }\n me.set(toSet);\n }\n /**\n * Sets the range end date\n *\n * @param {Date} date The new end date\n * @param {Boolean} keepDuration Pass `true` to keep the duration of the task (\"move\" the event), `false` to change the duration (\"resize\" the event).\n * Defaults to `false`\n * @category Scheduling\n */\n setEndDate(date, keepDuration = false) {\n const\n me = this,\n toSet = {\n endDate : date\n };\n if (date) {\n let calcStartDate;\n if (keepDuration === true) {\n calcStartDate = me.duration != null;\n }\n else {\n if (me.startDate) {\n toSet.duration = me.internalCalculateDuration(me.startDate, date, me.durationUnit);\n if (toSet.duration < 0) throw new Error('Negative duration');\n }\n else {\n calcStartDate = this.duration != null;\n }\n }\n if (calcStartDate) {\n toSet.startDate = me.internalCalculateStartDate(date, me.duration, me.durationUnit);\n }\n }\n me.set(toSet);\n }\n /**\n * Sets the event start and end dates\n *\n * @param {Date} start The new start date\n * @param {Date} end The new end date\n * @param {Boolean} [silent] Pass `true` to not trigger events\n * @category Scheduling\n */\n setStartEndDate(start, end, silent) {\n if (start > end) {\n throw new Error('Start date must be less or equal to end date');\n }\n this.set({\n startDate : start,\n endDate : end\n }, null, silent);\n }\n /**\n * Returns an array of dates in this range. If the range starts/ends not at the beginning of day, the whole day will be included.\n * @readonly\n * @property {Date[]}\n * @category Scheduling\n */\n get dates() {\n const\n dates = [],\n startDate = DH.startOf(this.startDate, 'day'),\n endDate = this.endDate;\n for (let date = startDate; date < endDate; date = DH.add(date, 1, 'day')) {\n dates.push(date);\n }\n return dates;\n }\n get startDateMS() {\n return (this.batching && this.hasBatchedChange('startDate') ? this.get('startDate') : this.startDate)?.getTime();\n }\n get endDateMS() {\n return (this.batching && this.hasBatchedChange('endDate') ? this.get('endDate') : this.endDate)?.getTime();\n }\n /**\n * Returns the duration of this Event in milliseconds.\n * @readonly\n * @property {Number}\n * @category Scheduling\n */\n get durationMS() {\n const { endDateMS, startDateMS } = this;\n if (endDateMS && startDateMS) {\n return endDateMS - startDateMS;\n }\n return DH.asMilliseconds(this.duration || 0, this.durationUnit);\n }\n /**\n * Returns true if record is a milestone.\n * @readonly\n * @property {Boolean}\n * @category Scheduling\n */\n get isMilestone() {\n return this.duration === 0;\n }\n inSetNormalize(field) {\n if (typeof field !== 'string') {\n // If user is updating multiple properties in one go using an object, we help out\n // by filling out missing schedule related data\n let { startDate, endDate, duration, durationUnit = this.durationUnit } = field;\n // Conversion is usually handled in inSet, but we are normalizing prior to that and have to handle it here\n if (typeof startDate === 'string') {\n startDate = this.getFieldDefinition('startDate').convert(startDate);\n }\n if (typeof endDate === 'string') {\n endDate = this.getFieldDefinition('endDate').convert(endDate);\n }\n if ('duration' in field) {\n if (startDate && !endDate) {\n endDate = this.internalCalculateEndDate(startDate, duration, durationUnit);\n }\n if (!startDate && endDate) {\n startDate = this.internalCalculateStartDate(endDate, duration, durationUnit);\n }\n }\n else if (startDate && endDate) {\n // Calculate duration in hours and covert to target duration unit in order to avoid extra DST conversion\n duration = this.internalCalculateDuration(startDate, endDate, durationUnit);\n }\n // A framework (React tested) may freeze passed field object, so clone it in that case\n const fieldOrClone = Object.isFrozen(field) ? ObjectHelper.clone(field) : field;\n startDate && (fieldOrClone.startDate = startDate);\n endDate && (fieldOrClone.endDate = endDate);\n duration != null && (fieldOrClone.duration = duration);\n return fieldOrClone;\n }\n }\n fieldToKeys(field, value) {\n const result = super.fieldToKeys(field, value);\n // Replace fullDuration with duration and durationUnit in calls to `set()`\n if (result.fullDuration) {\n const { magnitude, unit } = result.fullDuration;\n result.duration = magnitude;\n result.durationUnit = unit;\n }\n // Engine handles this for event & tasks\n if (!this.isEventModel && !this.isTaskModel) {\n // Recalculate start/end date if duration is set with only one of them\n if (('duration' in result || result.durationUnit) && !(result.startDate && result.endDate)) {\n Object.assign(\n result,\n this.updateDatesFromDuration(\n result.duration ?? this.duration,\n result.durationUnit ?? this.durationUnit,\n result.startDate,\n result.endDate\n )\n );\n }\n }\n return result;\n }\n inSet(field, value, silent, fromRelationUpdate, skipAccessors, validOnly, triggerBeforeUpdate) {\n const me = this;\n if (!skipAccessors) {\n field = me.inSetNormalize(field) || field;\n }\n const result = super.inSet(field, value, silent, fromRelationUpdate, skipAccessors, validOnly, triggerBeforeUpdate);\n if (!me.project?.isWritingData && field.startDate && field.endDate) {\n let invalid;\n if (field.startDate instanceof Date && field.endDate instanceof Date) {\n invalid = field.startDate > field.endDate;\n }\n else if (me.fieldMap.startDate.convert(field.startDate) > me.fieldMap.endDate.convert(field.endDate)) {\n invalid = true;\n }\n if (invalid) {\n console.error(`startDate > endDate for ${me.constructor.$name} record with id: ${me.id}`);\n }\n }\n return result;\n }\n // Cls requires special handling since it is converted to a DomClassList\n applyValue(useProp, key, value, skipAccessors, field) {\n if (key === 'cls') {\n this.updateInternalCls(value);\n }\n super.applyValue(useProp, key, value, skipAccessors, field);\n }\n //endregion\n //region Iteration\n /**\n * Iterates over the {@link #property-dates}\n * @param {Function} func The function to call for each date\n * @param {Object} thisObj `this` reference for the function\n * @category Scheduling\n */\n forEachDate(func, thisObj) {\n return this.dates.forEach(func.bind(thisObj));\n }\n //endregion\n /**\n * Checks if the range record has both start and end dates set and start <= end\n *\n * @property {Boolean}\n * @category Scheduling\n */\n get isScheduled() {\n const { startDateMS, endDateMS } = this;\n return endDateMS - startDateMS >= 0;\n }\n // Simple check if end date is greater than start date\n get isValid() {\n const { startDate, endDate } = this;\n return !startDate || !endDate || (endDate - startDate >= 0);\n }\n /**\n * Shift the dates for the date range by the passed amount and unit\n * @param {DurationUnit} unit The unit to shift by, see {@link Core.helper.DateHelper}\n * for more information on valid formats.\n * @param {Number} amount The amount to shift\n */\n shift(amount, unit = this.durationUnit) {\n if (typeof amount === 'string') {\n const u = amount;\n amount = unit;\n unit = u;\n }\n return this.setStartDate(DH.add(this.startDate, amount, unit, true), true);\n }\n /**\n * Returns the WBS code of this model (e.g '2.1.3'). Only relevant when part of a tree store, as in the Gantt chart.\n * @property {String}\n * @category Parent & children\n */\n get wbsCode() {\n return this._wbsCode || this.indexPath.join('.');\n }\n set wbsCode(value) {\n // wbsCode needs to be writable to interop w/TaskModel and Baselines which copy this field value\n this._wbsCode = value;\n }\n fullCopy() {\n //NOT PORTED\n return this.copy.apply(this, arguments);\n }\n intersects(timeSpan) {\n return this.intersectsRange(timeSpan.startDate, timeSpan.endDate);\n }\n intersectsRange(start, end) {\n const\n myStart = this.startDate,\n myEnd = this.endDate;\n return myStart && myEnd && DH.intersectSpans(myStart, myEnd, start, end);\n }\n /**\n * Splits this event into two pieces at the desired position.\n *\n * @param {Number|String} splitPoint The duration point at which to split this event.\n *\n * If less then `1`, this indicates the relative position at which it will be split.\n * 0.5 means cut it in half.\n *\n * If greater than `1`, this indicates the new duration in the current duration units of this event before the split.\n *\n * If this is a string, it will be a duration description as described in\n * {@link Core.helper.DateHelper#function-parseDuration-static}, for example `'15 min'`\n *\n * @returns {Scheduler.model.TimeSpan} The newly created split section of the timespan\n * @category Scheduling\n */\n split(splitPoint = 0.5) {\n const\n me = this,\n clone = me.copy(),\n {\n fullDuration,\n eventStore,\n assignmentStore\n } = me,\n oldDuration = new Duration(fullDuration),\n cloneDuration = new Duration(fullDuration);\n let ownNewDuration,\n unitsChanged;\n if (typeof splitPoint === 'string') {\n ownNewDuration = new Duration(splitPoint);\n // New duration specified in same time units as current duration\n if (ownNewDuration.unit === oldDuration.unit) {\n cloneDuration.magnitude -= ownNewDuration.magnitude;\n }\n // New duration is in different units, so convert clone's duration to match\n else {\n cloneDuration.magnitude = DH.as(ownNewDuration.unit, oldDuration) - ownNewDuration.magnitude;\n cloneDuration.unit = ownNewDuration.unit;\n unitsChanged = true;\n }\n }\n else {\n ownNewDuration = new Duration(splitPoint > 1 ? splitPoint : me.duration * splitPoint, me.durationUnit);\n cloneDuration.magnitude -= ownNewDuration.magnitude;\n }\n clone.startDate = DH.add(me.startDate, ownNewDuration.magnitude, ownNewDuration.unit);\n if (unitsChanged) {\n clone.fullDuration = cloneDuration;\n me.fullDuration = ownNewDuration;\n }\n else {\n clone.duration = cloneDuration.magnitude;\n me.duration = ownNewDuration.magnitude;\n }\n if (eventStore) {\n eventStore.add(clone);\n if (assignmentStore && !eventStore.usesSingleAssignment) {\n assignmentStore.add(\n me.assignments.map(assignment => {\n const clonedData = Object.assign({}, assignment.data, {\n eventId : clone.id,\n // From engine\n event : null,\n resource : null\n });\n delete clonedData.id;\n return clonedData;\n })\n );\n }\n }\n return clone;\n }\n toICSString(icsEventConfig = {}) {\n if (!this.isScheduled) {\n return '';\n }\n const\n {\n startDate,\n endDate\n } = this,\n // To allow testing using a fixed timestamp value\n timestamp = icsEventConfig.DTSTAMP || DH.format(new Date(), 'uu');\n delete icsEventConfig.DTSTAMP;\n let startEnd = {};\n if (this.allDay) {\n startEnd = {\n 'DTSTART;VALUE=DATE' : DH.format(startDate, 'u'),\n 'DTEND;VALUE=DATE' : DH.format(endDate, 'u')\n };\n }\n else {\n startEnd = {\n DTSTART : DH.format(startDate, 'uu'),\n DTEND : DH.format(endDate, 'uu')\n };\n }\n const\n version = (VersionHelper.scheduler && VersionHelper.getVersion('scheduler')) || (VersionHelper.calendar && VersionHelper.getVersion('calendar')) || '',\n icsWrapConfig = {\n BEGIN : 'VCALENDAR',\n VERSION : '2.0',\n CALSCALE : 'GREGORIAN',\n PRODID : `-//Bryntum AB//Bryntum Scheduler ${version} //EN`,\n END : 'VCALENDAR'\n },\n eventConfig = {\n BEGIN : 'VEVENT',\n UID : this.id + '@bryntum.com',\n CLASS : 'PUBLIC',\n SUMMARY : this.name,\n DTSTAMP : timestamp,\n ...startEnd,\n ...(this.recurrenceRule ? { RRULE : this.recurrenceRule } : {}),\n ...icsEventConfig,\n END : 'VEVENT'\n },\n icsItems = Object.keys(icsWrapConfig).map(key => `${key}:${icsWrapConfig[key]}`),\n eventItems = Object.keys(eventConfig).map(key => `${key}:${eventConfig[key]}`);\n // Inject event details before the closing VCALENDAR entry\n icsItems.splice(icsItems.length - 1, 0, ...eventItems);\n return icsItems.join('\\n');\n }\n /**\n * Triggers a download of this time span in ICS format (for import in Outlook etc.)\n *\n * ```javascript\n * timeSpan.downloadAsICS({\n * LOCATION : timeSpan.location\n * });\n * ```\n * @param {ObjectCtrl is the equivalent to Command and Alt\n * is the equivalent to Option for Mac users${DateHelper.format(value, 'HH')}\n ${DateHelper.format(value, 'mm')}
\n `;\n }\n }\n ]\n },\n week : {\n name : 'Week/hours',\n displayDateFormat : 'LT',\n shiftIncrement : 1,\n shiftUnit : 'week',\n defaultSpan : 24,\n timeResolution : {\n unit : 'minute',\n increment : 30\n },\n mainHeaderLevel : 0,\n headers : [\n {\n unit : 'week',\n dateFormat : 'D d',\n splitUnit : 'day'\n },\n {\n unit : 'hour',\n dateFormat : 'LT', // will be overridden by renderer\n renderer(value) {\n return `\n \n ${DateHelper.format(value, 'HH')}\n ${DateHelper.format(value, 'mm')}\n
\n `;\n }\n }\n ]\n },\n dayAndWeek : {\n name : 'Days & Weeks',\n tickWidth : 100,\n tickHeight : 80,\n displayDateFormat : 'll LT',\n shiftUnit : 'day',\n shiftIncrement : 1,\n defaultSpan : 5,\n timeResolution : {\n unit : 'hour',\n increment : 1\n },\n headers : [\n {\n unit : 'week',\n renderer(start) {\n return DateHelper.getShortNameOfUnit('week') + '.' + DateHelper.format(start, 'WW MMM YYYY');\n }\n },\n {\n unit : 'day',\n dateFormat : 'dd DD'\n }\n ]\n },\n // dayAndMonth : {\n // name : 'Days & Months',\n // tickWidth : 100,\n // tickHeight : 80,\n // displayDateFormat : 'll LT',\n // shiftUnit : 'day',\n // shiftIncrement : 1,\n // defaultSpan : 5,\n // timeResolution : {\n // unit : 'hour',\n // increment : 1\n // },\n // headers : [\n // {\n // unit : 'month',\n // dateFormat : 'MMMM YYYY',\n // align : 'start'\n // },\n // {\n // unit : 'day',\n // dateFormat : 'dd DD'\n // }\n // ]\n // },\n dayAndMonth : {\n name : 'Month',\n tickWidth : 100,\n tickHeight : 80,\n displayDateFormat : 'll LT',\n shiftUnit : 'month',\n shiftIncrement : 1,\n defaultSpan : 1,\n mainUnit : 'month',\n timeResolution : {\n unit : 'hour',\n increment : 1\n },\n headers : [\n {\n unit : 'month',\n dateFormat : 'MMMM YYYY'\n },\n {\n unit : 'day',\n dateFormat : 'DD'\n }\n ]\n },\n weekAndDay : {\n name : 'Week',\n tickWidth : 100,\n tickHeight : 80,\n displayDateFormat : 'll hh:mm A',\n shiftUnit : 'week',\n shiftIncrement : 1,\n defaultSpan : 1,\n timeResolution : {\n unit : 'day',\n increment : 1\n },\n mainHeaderLevel : 0,\n headers : [\n {\n unit : 'week',\n dateFormat : 'YYYY MMMM DD' // 2017 January 01\n },\n {\n unit : 'day',\n increment : 1,\n dateFormat : 'DD MMM'\n }\n ]\n },\n weekAndMonth : {\n name : 'Weeks',\n tickWidth : 100,\n tickHeight : 105,\n displayDateFormat : 'll',\n shiftUnit : 'week',\n shiftIncrement : 5,\n defaultSpan : 6,\n timeResolution : {\n unit : 'day',\n increment : 1\n },\n headers : [\n {\n unit : 'month',\n dateFormat : 'MMM YYYY' //Jan 2017\n },\n {\n unit : 'week',\n dateFormat : 'DD MMM'\n }\n ]\n },\n weekAndDayLetter : {\n name : 'Weeks/weekdays',\n tickWidth : 20,\n tickHeight : 50,\n displayDateFormat : 'll',\n shiftUnit : 'week',\n shiftIncrement : 1,\n defaultSpan : 10,\n timeResolution : {\n unit : 'day',\n increment : 1\n },\n mainHeaderLevel : 0,\n headers : [\n {\n unit : 'week',\n dateFormat : 'ddd DD MMM YYYY',\n verticalColumnWidth : 115\n },\n {\n unit : 'day',\n dateFormat : 'd1',\n verticalColumnWidth : 25\n }\n ]\n },\n weekDateAndMonth : {\n name : 'Months/weeks',\n tickWidth : 30,\n tickHeight : 40,\n displayDateFormat : 'll',\n shiftUnit : 'week',\n shiftIncrement : 1,\n defaultSpan : 10,\n timeResolution : {\n unit : 'day',\n increment : 1\n },\n headers : [\n {\n unit : 'month',\n dateFormat : 'YYYY MMMM'\n },\n {\n unit : 'week',\n dateFormat : 'DD'\n }\n ]\n },\n monthAndYear : {\n name : 'Months',\n tickWidth : 110,\n tickHeight : 110,\n displayDateFormat : 'll',\n shiftIncrement : 3,\n shiftUnit : 'month',\n defaultSpan : 12,\n timeResolution : {\n unit : 'day',\n increment : 1\n },\n headers : [\n {\n unit : 'year',\n dateFormat : 'YYYY' //2017\n },\n {\n unit : 'month',\n dateFormat : 'MMM YYYY' //Jan 2017\n }\n ]\n },\n year : {\n name : 'Years',\n tickWidth : 100,\n tickHeight : 100,\n resourceColumnWidth : 100,\n displayDateFormat : 'll',\n shiftUnit : 'year',\n shiftIncrement : 1,\n defaultSpan : 1,\n mainHeaderLevel : 0,\n timeResolution : {\n unit : 'month',\n increment : 1\n },\n headers : [\n {\n unit : 'year',\n dateFormat : 'YYYY'\n },\n {\n unit : 'quarter',\n renderer(start, end, cfg) {\n return DateHelper.getShortNameOfUnit('quarter').toUpperCase() + (Math.floor(start.getMonth() / 3) + 1);\n }\n }\n ]\n },\n manyYears : {\n name : 'Multiple years',\n tickWidth : 40,\n tickHeight : 50,\n displayDateFormat : 'll',\n shiftUnit : 'year',\n shiftIncrement : 1,\n defaultSpan : 10,\n timeResolution : {\n unit : 'year',\n increment : 1\n },\n mainHeaderLevel : 0,\n headers : [\n {\n unit : 'year',\n increment : 5,\n renderer : (start, end) => start.getFullYear() + ' - ' + end.getFullYear()\n },\n {\n unit : 'year',\n dateFormat : 'YY',\n increment : 1\n }\n ]\n }\n },\n // This is a list of bryntum-supplied preset adjustments used to create the Scheduler's\n // default initial set of ViewPresets.\n defaultPresets : [\n // Years over years\n 'manyYears',\n { width : 80, increment : 1, resolution : 1, base : 'manyYears', resolutionUnit : 'YEAR' },\n // Years over quarters\n 'year',\n { width : 30, increment : 1, resolution : 1, base : 'year', resolutionUnit : 'MONTH' },\n { width : 50, increment : 1, resolution : 1, base : 'year', resolutionUnit : 'MONTH' },\n { width : 200, increment : 1, resolution : 1, base : 'year', resolutionUnit : 'MONTH' },\n // Years over months\n 'monthAndYear',\n // Months over weeks\n 'weekDateAndMonth',\n // Months over weeks\n 'weekAndMonth',\n // Months over weeks\n 'weekAndDayLetter',\n // Months over days\n 'dayAndMonth',\n // Weeks over days\n 'weekAndDay',\n { width : 54, increment : 1, resolution : 1, base : 'weekAndDay', resolutionUnit : 'HOUR' },\n // Days over hours\n 'hourAndDay',\n { width : 64, increment : 6, resolution : 30, base : 'hourAndDay', resolutionUnit : 'MINUTE' },\n { width : 100, increment : 6, resolution : 30, base : 'hourAndDay', resolutionUnit : 'MINUTE' },\n { width : 64, increment : 2, resolution : 30, base : 'hourAndDay', resolutionUnit : 'MINUTE' },\n // Hours over minutes\n 'minuteAndHour',\n { width : 60, increment : 15, resolution : 5, base : 'minuteAndHour' },\n { width : 130, increment : 15, resolution : 5, base : 'minuteAndHour' },\n { width : 60, increment : 5, resolution : 5, base : 'minuteAndHour' },\n { width : 100, increment : 5, resolution : 5, base : 'minuteAndHour' },\n // Minutes over seconds\n 'secondAndMinute',\n { width : 60, increment : 10, resolution : 5, base : 'secondAndMinute' },\n { width : 130, increment : 5, resolution : 5, base : 'secondAndMinute' }\n ],\n internalListeners : {\n locale : 'updateLocalization'\n }\n };\n }\n set basePresets(basePresets) {\n const presetCache = this._basePresets = {};\n // createRecord uses _modelClass for performance reasons, make sure it is available\n this.getConfig('modelClass');\n for (const id in basePresets) {\n basePresets[id].id = id;\n presetCache[id] = this.createRecord(basePresets[id]);\n }\n }\n get basePresets() {\n return this._basePresets;\n }\n set defaultPresets(defaultPresets) {\n for (let i = 0, { length } = defaultPresets; i < length; i++) {\n const\n presetAdjustment = defaultPresets[i],\n isBase = typeof presetAdjustment === 'string',\n baseType = isBase ? presetAdjustment : presetAdjustment.base;\n let preset;\n // The default was just a string, so it's an unmodified instance of a base type.\n if (isBase) {\n preset = this.basePresets[baseType];\n }\n // If it's an object, it's an adjustment to a base type\n else {\n const\n config = Object.setPrototypeOf(ObjectHelper.clone(this.basePresets[baseType].data), { id : baseType }),\n { timeResolution } = config,\n bottomHeader = config.headers[config.headers.length - 1];\n config.id = undefined;\n if ('width' in presetAdjustment) {\n config.tickWidth = presetAdjustment.width;\n }\n if ('height' in presetAdjustment) {\n config.tickHeight = presetAdjustment.height;\n }\n if ('increment' in presetAdjustment) {\n bottomHeader.increment = presetAdjustment.increment;\n }\n if ('resolution' in presetAdjustment) {\n timeResolution.increment = presetAdjustment.resolution;\n }\n if ('resolutionUnit' in presetAdjustment) {\n timeResolution.unit = DateHelper.getUnitByName(presetAdjustment.resolutionUnit);\n }\n preset = this.createRecord(config);\n // Keep id of original preset around, used with localization in PresetStore\n preset.baseId = baseType;\n }\n this.add(preset);\n }\n }\n getById(id) {\n // Look first in the default set, and if it's one of the base types that is not imported into the\n // default set, then look at the bases.\n return super.getById(id) || this.basePresets[id];\n }\n /**\n * Registers a new view preset base to be used by any scheduler grid or tree on the page.\n * @param {String} id The unique identifier for this preset\n * @param {ViewPresetConfig} config The configuration properties of the view preset (see\n * {@link Scheduler.preset.ViewPreset} for more information)\n * @returns {Scheduler.preset.ViewPreset} A new ViewPreset based upon the passed configuration.\n */\n registerPreset(id, config) {\n const\n preset = this.createRecord(Object.assign({\n id\n }, config)),\n existingDuplicate = this.find(p => p.equals(preset));\n if (existingDuplicate) {\n return existingDuplicate;\n }\n if (preset.isValid) {\n this.add(preset);\n }\n else {\n throw new Error('Invalid preset, please check your configuration');\n }\n return preset;\n }\n getPreset(preset) {\n if (typeof preset === 'number') {\n preset = this.getAt(preset);\n }\n if (typeof preset === 'string') {\n preset = this.getById(preset);\n }\n else if (!(preset instanceof ViewPreset)) {\n preset = this.createRecord(preset);\n }\n return preset;\n }\n /**\n * Applies preset customizations or fetches a preset view preset using its name.\n * @param {String|ViewPresetConfig} presetOrId Id of a predefined preset or a preset config object\n * @returns {Scheduler.preset.ViewPreset} Resulting ViewPreset instance\n */\n normalizePreset(preset) {\n const me = this;\n if (!(preset instanceof ViewPreset)) {\n if (typeof preset === 'string') {\n preset = me.getPreset(preset);\n if (!preset) {\n throw new Error('You must define a valid view preset. See PresetManager for reference');\n }\n }\n else if (typeof preset === 'object') {\n // Look up any existing ViewPreset that it is based upon.\n if (preset.base) {\n const base = this.getById(preset.base);\n if (!base) {\n throw new Error(`ViewPreset base '${preset.base}' does not exist`);\n }\n // The config is based upon the base's data with the new config object merged in.\n preset = ObjectHelper.merge(ObjectHelper.clone(base.data), preset);\n }\n // Ensure the new ViewPreset has a legible, logical id which does not already\n // exist in our store.\n if (preset.id) {\n preset = me.createRecord(preset);\n }\n else {\n preset = me.createRecord(ObjectHelper.assign({}, preset));\n preset.id = preset.generateId(preset);\n }\n }\n }\n return preset;\n }\n /**\n * Deletes a view preset\n * @param {String} id The id of the preset, or the preset instance.\n */\n deletePreset(presetOrId) {\n if (typeof presetOrId === 'string') {\n presetOrId = this.getById(presetOrId);\n }\n else if (typeof presetOrId === 'number') {\n presetOrId = this.getAt(presetOrId);\n }\n if (presetOrId) {\n this.remove(presetOrId);\n // ALso remove it from our base list\n delete this.basePresets[presetOrId.id];\n }\n }\n}\nconst pm = new PresetManager();\nglobalThis.bryntum.PresetManager = pm;\nexport { pm as default };\n", "import Store from '../../Core/data/Store.js';\nimport DH from '../../Core/helper/DateHelper.js';\nimport TimeSpan from '../model/TimeSpan.js';\nimport PresetManager from '../preset/PresetManager.js';\n/**\n * @module Scheduler/data/TimeAxis\n */\n// Micro-optimized version of TimeSpan for faster reading. Hit a lot and since it is internal fields are guaranteed to\n// not be remapped and changes won't be batches, so we can always return raw value from data avoiding all additional\n// checks and logic\nclass Tick extends TimeSpan {\n // Only getters on purpose, we do not support manipulating ticks\n get startDate() {\n return this.data.startDate;\n }\n get endDate() {\n return this.data.endDate;\n }\n}\n/**\n * A class representing the time axis of the scheduler. The scheduler timescale is based on the ticks generated by this\n * class. This is a pure \"data\" (model) representation of the time axis and has no UI elements.\n *\n * The time axis can be {@link #config-continuous} or not. In continuous mode, each timespan starts where the previous\n * ended, and in non-continuous mode there can be gaps between the ticks.\n * A non-continuous time axis can be used when want to filter out certain periods of time (like weekends) from the time\n * axis.\n *\n * To create a non-continuous time axis you have 2 options. First, you can create a time axis containing only the time\n * spans of interest. To do that, subclass this class and override the {@link #property-generateTicks} method.\n *\n * The other alternative is to call the {@link #function-filterBy} method, passing a function to it which should return\n * `false` if the time tick should be filtered out. Calling {@link Core.data.mixin.StoreFilter#function-clearFilters}\n * will return you to a full time axis.\n *\n * @extends Core/data/Store\n */\nexport default class TimeAxis extends Store {\n //region Events\n /**\n * Fires before the timeaxis is about to be reconfigured (e.g. new start/end date or unit/increment). Return `false`\n * to abort the operation.\n * @event beforeReconfigure\n * @param {Scheduler.data.TimeAxis} source The time axis instance\n * @param {Date} startDate The new time axis start date\n * @param {Date} endDate The new time axis end date\n * @preventable\n */\n /**\n * Event that is triggered when we end reconfiguring and everything UI-related should be done\n * @event endReconfigure\n * @private\n */\n /**\n * Fires when the timeaxis has been reconfigured (e.g. new start/end date or unit/increment)\n * @event reconfigure\n * @param {Scheduler.data.TimeAxis} source The time axis instance\n */\n /**\n * Fires if all the ticks in the timeaxis are filtered out. After firing the filter is temporarily disabled to\n * return the time axis to a valid state. A disabled filter will be re-enabled the next time ticks are regenerated\n * @event invalidFilter\n * @param {Scheduler.data.TimeAxis} source The time axis instance\n */\n //endregion\n //region Default config\n static get defaultConfig() {\n return {\n modelClass : Tick,\n /**\n * Set to false if the timeline is not continuous, e.g. the next timespan does not start where the previous ended (for example skipping weekends etc).\n * @config {Boolean}\n * @default\n */\n continuous : true,\n originalContinuous : null,\n /**\n * Include only certain hours or days in the time axis (makes it `continuous : false`). Accepts and object\n * with `day` and `hour` properties:\n * ```\n * const scheduler = new Scheduler({\n * timeAxis : {\n * include : {\n * // Do not display hours after 17 or before 9 (only display 9 - 17). The `to\u00B4 value is not\n * // included in the time axis\n * hour : {\n * from : 9,\n * to : 17\n * },\n * // Do not display sunday or saturday\n * day : [0, 6]\n * }\n * }\n * }\n * ```\n * In most cases we recommend that you use Scheduler's workingTime config instead. It is easier to use and\n * makes sure all parts of the Scheduler gets updated.\n * @config {Object}\n */\n include : null,\n /**\n * Automatically adjust the timespan when generating ticks with {@link #property-generateTicks} according to\n * the `viewPreset` configuration. Setting this to false may lead to shifting time/date of ticks.\n * @config {Boolean}\n * @default\n */\n autoAdjust : true,\n //isConfigured : false,\n // in case of `autoAdjust : false`, the 1st and last ticks can be truncated, containing only part of the normal tick\n // these dates will contain adjusted start/end (like if the tick has not been truncated)\n adjustedStart : null,\n adjustedEnd : null,\n // the visible position in the first tick, can actually be > 1 because the adjustment is done by the `mainUnit`\n visibleTickStart : null,\n // the visible position in the first tick, is always ticks count - 1 < value <= ticks count, in case of autoAdjust, always = ticks count\n visibleTickEnd : null,\n tickCache : {},\n viewPreset : null,\n maxTraverseTries : 100,\n useRawData : {\n disableDuplicateIdCheck : true,\n disableDefaultValue : true,\n disableTypeConversion : true\n }\n };\n }\n static get configurable() {\n return {\n /**\n * Method generating the ticks for this time axis. Should return a **non-empty** array of ticks. Each tick\n * is an object of the following structure:\n * ```\n * {\n * startDate : ..., // start date\n * endDate : ... // end date\n * }\n * ```\n * To see it in action please check out our [TimeAxis](https://bryntum.com/products/scheduler/examples/timeaxis/)\n * example and navigate to \"Compressed non-working time\" tab.\n *\n * @param {Date} axisStartDate The start date of the interval\n * @param {Date} axisEndDate The end date of the interval\n * @param {DurationUnit} unit The unit of the time axis\n * @param {Number} increment The increment for the unit specified.\n * @returns {TimeSpanConfig[]} ticks The ticks representing the time axis\n * @config {Function}\n */\n generateTicks : null,\n unit : null,\n increment : null,\n resolutionUnit : null,\n resolutionIncrement : null,\n mainUnit : null,\n shiftUnit : null,\n shiftIncrement : 1,\n defaultSpan : 1,\n weekStartDay : null,\n // Used to force resolution to match whole ticks, to snap accordingly when using fillTicks in the UI\n forceFullTicks : null\n };\n }\n //endregion\n //region Init\n // private\n construct(config) {\n const me = this;\n super.construct(config);\n me.originalContinuous = me.continuous;\n me.ion({\n change : ({ action }) => {\n // If the change was due to filtering, there will be a refresh event\n // arriving next, so do not reconfigure\n if (action !== 'filter') {\n me.trigger('reconfigure', { supressRefresh : false });\n }\n },\n refresh : () => me.trigger('reconfigure', { supressRefresh : false }),\n endreconfigure : event => me.trigger('reconfigure', event)\n });\n if (me.startDate) {\n me.internalOnReconfigure();\n me.trigger('reconfigure');\n }\n else if (me.viewPreset) {\n const range = me.getAdjustedDates(new Date());\n me.startDate = range.startDate;\n me.endDate = range.endDate;\n }\n }\n get isTimeAxis() {\n return true;\n }\n //endregion\n //region Configuration (reconfigure & consumePreset)\n /**\n * Reconfigures the time axis based on the config object supplied and generates the new 'ticks'.\n * @param {Object} config\n * @param {Boolean} [suppressRefresh]\n * @private\n */\n reconfigure(config, suppressRefresh = false, preventThrow = false) {\n const\n me = this,\n normalized = me.getAdjustedDates(config.startDate, config.endDate),\n oldConfig = {};\n if (me.trigger('beforeReconfigure', { startDate : normalized.startDate, endDate : normalized.endDate, config }) !== false) {\n me.trigger('beginReconfigure');\n me._configuredStartDate = config.startDate;\n me._configuredEndDate = config.endDate;\n // Collect old values for end event\n for (const propName in config) {\n oldConfig[propName] = me[propName];\n }\n const viewPresetChanged = config.viewPreset && config.viewPreset !== me.viewPreset;\n // If changing viewPreset, try to gracefully recover if an applied filter results in an empty view\n if (viewPresetChanged) {\n preventThrow = me.isFiltered;\n me.filters.forEach(f => f.disabled = false);\n }\n Object.assign(me, config);\n if (me.internalOnReconfigure(preventThrow, viewPresetChanged) === false) {\n return false;\n }\n me.trigger('endReconfigure', { suppressRefresh, config, oldConfig });\n }\n }\n internalOnReconfigure(preventThrow = false, viewPresetChanged) {\n const me = this;\n me.isConfigured = true;\n const\n adjusted = me.getAdjustedDates(me.startDate, me.endDate, true),\n normalized = me.getAdjustedDates(me.startDate, me.endDate),\n start = normalized.startDate,\n end = normalized.endDate;\n if (start >= end) {\n throw new Error(`Invalid start/end dates. Start date must be less than end date. Start date: ${start}. End date: ${end}.`);\n }\n const\n { unit, increment = 1 } = me,\n ticks = me.generateTicks(start, end, unit, increment) ||\n // Offer a fallback in case user did not generate any ticks at all.\n me.constructor.prototype.generateTicks.call(me, start, end, unit, increment);\n // Suspending to be able to detect an invalid filter\n me.suspendEvents();\n me.maintainFilter = preventThrow;\n me.data = ticks;\n me.maintainFilter = false;\n const { count } = me;\n if (count === 0) {\n if (preventThrow) {\n if (viewPresetChanged) {\n me.disableFilters();\n }\n me.resumeEvents();\n return false;\n }\n throw new Error('Invalid time axis configuration or filter, please check your input data.');\n }\n // start date is cached, update it to fill after generated ticks\n me.startDate = me.first.startDate;\n me.endDate = me.last.endDate;\n me.resumeEvents();\n if (me.isContinuous) {\n me.adjustedStart = adjusted.startDate;\n me.adjustedEnd = DH.getNext(count > 1 ? ticks[count - 1].startDate : adjusted.startDate, unit, increment, me.weekStartDay);\n }\n else {\n me.adjustedStart = me.startDate;\n me.adjustedEnd = me.endDate;\n }\n me.updateVisibleTickBoundaries();\n me.updateTickCache(true);\n }\n updateVisibleTickBoundaries() {\n const\n me = this,\n {\n count,\n unit,\n startDate,\n endDate,\n weekStartDay,\n increment = 1\n } = me;\n // Denominator is amount of milliseconds in a full tick (unit * increment). Normally we use 30 days in a month\n // and 365 days in a year. But if month is 31 day long or year is a leap one standard formula might calculate\n // wrong value. e.g. if we're rendering 1 day from August, formula goes like (2021-08-31 - 2021-08-02) / 30 = 1\n // and renders full tick which is incorrect. For such cases we need to adjust denominator to a correct one.\n // Thankfully there are only a few of them - month, year and day with DST transition.\n const\n startDenominator = DH.getNormalizedUnitDuration(startDate, unit) * increment,\n endDenominator = DH.getNormalizedUnitDuration(endDate, unit) * increment;\n // if visibleTickStart > 1 this means some tick is fully outside of the view - we are not interested in it and want to\n // drop it and adjust \"adjustedStart\" accordingly\n do {\n me.visibleTickStart = (startDate - me.adjustedStart) / startDenominator;\n if (me.autoAdjust) me.visibleTickStart = Math.floor(me.visibleTickStart);\n if (me.visibleTickStart >= 1) me.adjustedStart = DH.getNext(me.adjustedStart, unit, increment, weekStartDay);\n } while (me.visibleTickStart >= 1);\n do {\n me.visibleTickEnd = count - (me.adjustedEnd - endDate) / endDenominator;\n if (count - me.visibleTickEnd >= 1) me.adjustedEnd = DH.getNext(me.adjustedEnd, unit, -1, weekStartDay);\n } while (count - me.visibleTickEnd >= 1);\n // This flag indicates that the time axis starts exactly on a tick boundary and finishes on a tick boundary\n // This is used as an optimization flag by TimeAxisViewModel.createHeaderRow\n me.fullTicks = !me.visibleTickStart && me.visibleTickEnd === count;\n }\n /**\n * Get the currently used time unit for the ticks\n * @readonly\n * @member {DurationUnit} unit\n */\n /**\n * Get/set currently used preset\n * @property {Scheduler.preset.ViewPreset}\n */\n get viewPreset() {\n return this._viewPreset;\n }\n set viewPreset(preset) {\n const me = this;\n preset = PresetManager.getPreset(preset);\n if (!preset.isViewPreset) {\n throw new Error('TimeAxis must be configured with the ViewPreset instance that the Scheduler is using');\n }\n me._viewPreset = preset;\n Object.assign(me, {\n unit : preset.bottomHeader.unit,\n increment : preset.bottomHeader.increment || 1,\n resolutionUnit : preset.timeResolution.unit,\n resolutionIncrement : preset.timeResolution.increment,\n mainUnit : preset.mainHeader.unit,\n shiftUnit : preset.shiftUnit || preset.mainHeader.unit,\n shiftIncrement : preset.shiftIncrement || 1,\n defaultSpan : preset.defaultSpan || 1,\n presetName : preset.id,\n // Weekview columns are updated upon 'datachanged' event on this object.\n // We have to pass headers in order to render them correctly (timeAxisViewModel is incorrect in required time)\n headers : preset.headers\n });\n }\n //endregion\n //region Getters & setters\n get weekStartDay() {\n return this._weekStartDay ?? DH.weekStartDay;\n }\n // private\n get resolution() {\n return {\n unit : this.resolutionUnit,\n increment : this.resolutionIncrement\n };\n }\n // private\n set resolution(resolution) {\n this.resolutionUnit = resolution.unit;\n this.resolutionIncrement = resolution.increment;\n }\n get resolutionUnit() {\n return this.forceFullTicks ? this.unit : this._resolutionUnit;\n }\n get resolutionIncrement() {\n return this.forceFullTicks ? this.increment : this._resolutionIncrement;\n }\n //endregion\n //region Timespan & resolution\n /**\n * Changes the time axis timespan to the supplied start and end dates.\n *\n * **Note** This does **not** preserve the temporal scroll position. You may use\n * {@link Scheduler.view.Scheduler#function-setTimeSpan} to set the time axis and\n * maintain temporal scroll position (if possible).\n * @param {Date} newStartDate The new start date\n * @param {Date} [newEndDate] The new end date\n */\n setTimeSpan(newStartDate, newEndDate, preventThrow = false) {\n // If providing a 0 span range, add default range\n if (newEndDate && newStartDate - newEndDate === 0) {\n newEndDate = null;\n }\n const\n me = this,\n { startDate, endDate } = me.getAdjustedDates(newStartDate, newEndDate);\n if (me.startDate - startDate !== 0 || me.endDate - endDate !== 0) {\n return me.reconfigure({\n startDate,\n endDate\n }, false, preventThrow);\n }\n }\n /**\n * Moves the time axis by the passed amount and unit.\n *\n * NOTE: When using a filtered TimeAxis the result of `shift()` cannot be guaranteed, it might shift into a\n * filtered out span. It tries to be smart about it by shifting from unfiltered start and end dates.\n * If that solution does not work for your filtering setup, please call {@link #function-setTimeSpan} directly\n * instead.\n *\n * @param {Number} amount The number of units to jump\n * @param {String} [unit] The unit (Day, Week etc)\n */\n shift(amount, unit = this.shiftUnit) {\n const me = this;\n let { startDate, endDate } = me;\n // Use unfiltered start and end dates when shifting a filtered time axis, to lessen risk of messing it up.\n // Still not guaranteed to work though\n if (me.isFiltered) {\n startDate = me.allRecords[0].startDate;\n endDate = me.allRecords[me.allCount - 1].endDate;\n }\n // Hack for filtered time axis, for example if weekend is filtered out and you shiftPrev() day from monday\n let tries = 0;\n do {\n startDate = DH.add(startDate, amount, unit);\n endDate = DH.add(endDate, amount, unit);\n } while (tries++ < me.maxTraverseTries && me.setTimeSpan(startDate, endDate, {\n preventThrow : true\n }) === false);\n }\n /**\n * Moves the time axis forward in time in units specified by the view preset `shiftUnit`, and by the amount specified by the `shiftIncrement`\n * config of the current view preset.\n *\n * NOTE: When using a filtered TimeAxis the result of `shiftNext()` cannot be guaranteed, it might shift into a\n * filtered out span. It tries to be smart about it by shifting from unfiltered start and end dates.\n * If that solution does not work for your filtering setup, please call {@link #function-setTimeSpan} directly\n * instead.\n *\n * @param {Number} [amount] The number of units to jump forward\n */\n shiftNext(amount = this.shiftIncrement) {\n this.shift(amount);\n }\n /**\n * Moves the time axis backward in time in units specified by the view preset `shiftUnit`, and by the amount specified by the `shiftIncrement` config of the current view preset.\n *\n * NOTE: When using a filtered TimeAxis the result of `shiftPrev()` cannot be guaranteed, it might shift into a\n * filtered out span. It tries to be smart about it by shifting from unfiltered start and end dates.\n * If that solution does not work for your filtering setup, please call {@link #function-setTimeSpan} directly\n * instead.\n *\n * @param {Number} [amount] The number of units to jump backward\n */\n shiftPrevious(amount = this.shiftIncrement) {\n this.shift(-amount);\n }\n //endregion\n //region Filter & continuous\n /**\n * Filter the time axis by a function (and clears any existing filters first). The passed function will be called with each tick in time axis.\n * If the function returns `true`, the 'tick' is included otherwise it is filtered. If all ticks are filtered out\n * the time axis is considered invalid, triggering `invalidFilter` and then removing the filter.\n * @param {Function} fn The function to be called, it will receive an object with `startDate`/`endDate` properties, and `index` of the tick.\n * @param {Object} [thisObj] `this` reference for the function\n * @typings {PromiseWhen the {@link Scheduler/view/mixin/TimelineEventRendering#config-fillTicks} option is\n * enabled, snapping will align to full ticks, regardless of the time resolution.
\n *\n * @prp {Boolean}\n * @default\n * @category Scheduled events\n */\n snap : false\n };\n //region Coordinate <-> Date\n getRtlX(x) {\n if (this.rtl && this.isHorizontal) {\n x = this.timeAxisViewModel.totalSize - x;\n }\n return x;\n }\n /**\n * Gets the date for an X or Y coordinate, either local to the view element or the page based on the 3rd argument.\n * If the coordinate is not in the currently rendered view, null will be returned unless the `allowOutOfRange`\n * parameter is passed a `true`.\n * @param {Number} coordinate The X or Y coordinate\n * @param {'floor'|'round'|'ceil'} [roundingMethod] Rounding method to use. 'floor' to take the tick (lowest header\n * in a time axis) start date, 'round' to round the value to nearest increment or 'ceil' to take the tick end date\n * @param {Boolean} [local] true if the coordinate is local to the scheduler view element\n * @param {Boolean} [allowOutOfRange] By default, this returns `null` if the position is outside\n * of the time axis. Pass `true` to attempt to calculate a date outside of the time axis.\n * @returns {Date} The Date corresponding to the X or Y coordinate\n * @category Dates\n */\n getDateFromCoordinate(coordinate, roundingMethod, local = true, allowOutOfRange = false, ignoreRTL = false) {\n if (!local) {\n coordinate = this.currentOrientation.translateToScheduleCoordinate(coordinate);\n }\n // Time axis is flipped for RTL\n if (!ignoreRTL) {\n coordinate = this.getRtlX(coordinate);\n }\n return this.timeAxisViewModel.getDateFromPosition(coordinate, roundingMethod, allowOutOfRange);\n }\n getDateFromCoord(options) {\n return this.getDateFromCoordinate(options.coord, options.roundingMethod, options.local, options.allowOutOfRange, options.ignoreRTL);\n }\n /**\n * Gets the date for an XY coordinate regardless of the orientation of the time axis.\n * @param {Array} xy The page X and Y coordinates\n * @param {'floor'|'round'|'ceil'} [roundingMethod] Rounding method to use. 'floor' to take the tick (lowest header\n * in a time axis) start date, 'round' to round the value to nearest increment or 'ceil' to take the tick end date\n * @param {Boolean} [local] true if the coordinate is local to the scheduler element\n * @param {Boolean} [allowOutOfRange] By default, this returns `null` if the position is outside\n * of the time axis. Pass `true` to attempt to calculate a date outside of the time axis.\n * @returns {Date} the Date corresponding to the xy coordinate\n * @category Dates\n */\n getDateFromXY(xy, roundingMethod, local = true, allowOutOfRange = false) {\n return this.currentOrientation.getDateFromXY(xy, roundingMethod, local, allowOutOfRange);\n }\n /**\n * Gets the time for a DOM event such as 'mousemove' or 'click' regardless of the orientation of the time axis.\n * @param {Event} e the Event instance\n * @param {'floor'|'round'|'ceil'} [roundingMethod] Rounding method to use. 'floor' to take the tick (lowest header\n * in a time axis) start date, 'round' to round the value to nearest increment or 'ceil' to take the tick end date\n * @param {Boolean} [allowOutOfRange] By default, this returns `null` if the position is outside\n * of the time axis. Pass `true` to attempt to calculate a date outside of the time axis.\n * @returns {Date} The date corresponding to the EventObject's position along the orientation of the time axis.\n * @category Dates\n */\n getDateFromDomEvent(e, roundingMethod, allowOutOfRange = false) {\n return this.getDateFromXY([e.pageX, e.pageY], roundingMethod, false, allowOutOfRange);\n }\n /**\n * Gets the start and end dates for an element Region\n * @param {Core.helper.util.Rectangle} rect The rectangle to map to start and end dates\n * @param {'floor'|'round'|'ceil'} roundingMethod Rounding method to use. 'floor' to take the tick (lowest header\n * in a time axis) start date, 'round' to round the value to nearest increment or 'ceil' to take the tick end date\n * @param {Number} duration The duration in MS of the underlying event\n * @returns {Object} an object containing start/end properties\n */\n getStartEndDatesFromRectangle(rect, roundingMethod, duration, allowOutOfRange = false) {\n const\n me = this,\n { isHorizontal } = me,\n startPos = isHorizontal ? rect.x : rect.top,\n endPos = isHorizontal ? rect.right : rect.bottom;\n let start, end;\n // Element within bounds\n if (startPos >= 0 && endPos < me.timeAxisViewModel.totalSize) {\n start = me.getDateFromCoordinate(startPos, roundingMethod, true);\n end = me.getDateFromCoordinate(endPos, roundingMethod, true);\n }\n // Starts before, start is worked backwards from end\n else if (startPos < 0) {\n end = me.getDateFromCoordinate(endPos, roundingMethod, true, allowOutOfRange);\n start = end && DateHelper.add(end, -duration, 'ms');\n }\n // Ends after, end is calculated from the start\n else {\n start = me.getDateFromCoordinate(startPos, roundingMethod, true, allowOutOfRange);\n end = start && DateHelper.add(start, duration, 'ms');\n }\n return {\n start, end\n };\n }\n //endregion\n //region Date display\n /**\n * Method to get a displayed end date value, see {@link #function-getFormattedEndDate} for more info.\n * @private\n * @param {Date} endDate The date to format\n * @param {Date} startDate The start date\n * @returns {Date} The date value to display\n */\n getDisplayEndDate(endDate, startDate) {\n if (\n // If time is midnight,\n endDate.getHours() === 0 && endDate.getMinutes() === 0 &&\n // and end date is greater then start date\n (!startDate || !(endDate.getYear() === startDate.getYear() && endDate.getMonth() === startDate.getMonth() && endDate.getDate() === startDate.getDate())) &&\n // and UI display format doesn't contain hour info (in this case we'll just display the exact date)\n !DateHelper.formatContainsHourInfo(this.displayDateFormat)\n ) {\n // format the date inclusively as 'the whole previous day'.\n endDate = DateHelper.add(endDate, -1, 'day');\n }\n return endDate;\n }\n /**\n * Method to get a formatted end date for a scheduled event, the grid uses the \"displayDateFormat\" property defined in the current view preset.\n * End dates are formatted as 'inclusive', meaning when an end date falls on midnight and the date format doesn't involve any hour/minute information,\n * 1ms will be subtracted (e.g. 2010-01-08T00:00:00 will first be modified to 2010-01-07 before being formatted).\n * @private\n * @param {Date} endDate The date to format\n * @param {Date} startDate The start date\n * @returns {String} The formatted date\n */\n getFormattedEndDate(endDate, startDate) {\n return this.getFormattedDate(this.getDisplayEndDate(endDate, startDate));\n }\n //endregion\n //region Other date functions\n /**\n * Gets the x or y coordinate relative to the scheduler element, or page coordinate (based on the 'local' flag)\n * If the coordinate is not in the currently rendered view, -1 will be returned.\n * @param {Date|Number} date the date to query for (or a date as ms)\n * @param {Boolean|Object} options true to return a coordinate local to the scheduler view element (defaults to true),\n * also accepts a config object like { local : true }.\n * @returns {Number} the x or y position representing the date on the time axis\n * @category Dates\n */\n getCoordinateFromDate(date, options = true) {\n const\n me = this,\n { timeAxisViewModel } = me,\n {\n isContinuous,\n startMS,\n endMS,\n startDate,\n endDate,\n unit\n } = me.timeAxis,\n dateMS = date.valueOf();\n // Avoiding to break the API while allowing passing options through to getPositionFromDate()\n if (options === true) {\n options = {\n local : true\n };\n }\n else if (!options) {\n options = {\n local : false\n };\n }\n else if (!('local' in options)) {\n options.local = true;\n }\n let pos;\n if (!(date instanceof Date)) {\n tempDate.setTime(date);\n date = tempDate;\n }\n // Shortcut for continuous time axis that is using a unit that can be reliably translated to days (or smaller)\n if (isContinuous &&\n date.getTimezoneOffset() === startDate.getTimezoneOffset() &&\n startDate.getTimezoneOffset() === endDate.getTimezoneOffset() &&\n DateHelper.getUnitToBaseUnitRatio(unit, 'day') !== -1\n ) {\n if (dateMS < startMS || dateMS > endMS) {\n return -1;\n }\n pos = (dateMS - startMS) / (endMS - startMS) * timeAxisViewModel.totalSize;\n }\n // Non-continuous or using for example months (vary in length)\n else {\n pos = timeAxisViewModel.getPositionFromDate(date, options);\n }\n // RTL coords from the end of the time axis\n if (me.rtl && me.isHorizontal && !options?.ignoreRTL) {\n pos = timeAxisViewModel.totalSize - pos;\n }\n if (!options.local) {\n pos = me.currentOrientation.translateToPageCoordinate(pos);\n }\n return pos;\n }\n /**\n * Returns the distance in pixels for the time span in the view.\n * @param {Date} startDate The start date of the span\n * @param {Date} endDate The end date of the span\n * @returns {Number} The distance in pixels\n * @category Dates\n */\n getTimeSpanDistance(startDate, endDate) {\n return this.timeAxisViewModel.getDistanceBetweenDates(startDate, endDate);\n }\n /**\n * Returns the center date of the currently visible timespan of scheduler.\n *\n * @property {Date}\n * @readonly\n * @category Dates\n */\n get viewportCenterDate() {\n if (this.isVisible) {\n const { timeAxis, timelineScroller } = this;\n // Take the easy way if the axis is continuous.\n // We can just work out how far along the time axis the viewport center is.\n if (timeAxis.isContinuous) {\n // The offset from the start of the whole time axis\n const timeAxisOffset = (timelineScroller.position + timelineScroller.clientSize / 2) / timelineScroller.scrollSize;\n return new Date(timeAxis.startMS + (timeAxis.endMS - timeAxis.startMS) * timeAxisOffset);\n }\n return this.getDateFromCoordinate(timelineScroller.position + timelineScroller.clientSize / 2);\n }\n }\n get viewportCenterDateCached() {\n return this.cachedCenterDate || (this.cachedCenterDate = this.viewportCenterDate);\n }\n //endregion\n //region TimeAxis getters/setters\n /**\n * Gets/sets the current time resolution object, which contains a unit identifier and an increment count\n * `{ unit, increment }`. This value means minimal task duration you can create using UI.\n *\n * For example when you drag create a task or drag & drop a task, if increment is 5 and unit is 'minute'\n * that means that you can create tasks in 5 minute increments, or move it in 5 minute steps.\n *\n * This value is taken from viewPreset {@link Scheduler.preset.ViewPreset#field-timeResolution timeResolution}\n * config by default. When supplying a `Number` to the setter only the `increment` is changed and the `unit` value\n * remains untouched.\n *\n * ```javascript\n * timeResolution : {\n * unit : 'minute', //Valid values are \"millisecond\", \"second\", \"minute\", \"hour\", \"day\", \"week\", \"month\", \"quarter\", \"year\".\n * increment : 5\n * }\n * ```\n *\n * When the {@link Scheduler/view/mixin/TimelineEventRendering#config-fillTicks} option is\n * enabled, the resolution will be in full ticks regardless of configured value.
\n *\n * @property {Object|Number}\n * @category Dates\n */\n get timeResolution() {\n return this.timeAxis.resolution;\n }\n set timeResolution(resolution) {\n this.timeAxis.resolution = (typeof resolution === 'number') ? {\n increment : resolution,\n unit : this.timeAxis.resolution.unit\n } : resolution;\n }\n //endregion\n //region Snap\n get snap() {\n return this._timeAxisViewModel?.snap ?? this._snap;\n }\n updateSnap(snap) {\n if (!this.isConfiguring) {\n this.timeAxisViewModel.snap = snap;\n this.timeAxis.forceFullTicks = snap && this.fillTicks;\n }\n }\n //endregion\n onSchedulerHorizontalScroll(subGrid, scrollLeft, scrollX, scrollingToCenter) {\n // Invalidate cached center date unless we are scrolling to center on it.\n if (!scrollingToCenter) {\n this.cachedCenterDate = null;\n }\n }\n // This does not need a className on Widgets.\n // Each *Class* which doesn't need 'b-' + constructor.name.toLowerCase() automatically adding\n // to the Widget it's mixed in to should implement thus.\n get widgetClass() {}\n};\n", "import Base from '../../../Core/Base.js';\nimport BrowserHelper from '../../../Core/helper/BrowserHelper.js';\nimport DomHelper from '../../../Core/helper/DomHelper.js';\nimport StringHelper from '../../../Core/helper/StringHelper.js';\nimport EventHelper from '../../../Core/helper/EventHelper.js';\nimport DomDataStore from '../../../Core/data/DomDataStore.js';\nimport GlobalEvents from '../../../Core/GlobalEvents.js';\n/**\n * @module Scheduler/view/mixin/TimelineDomEvents\n */\nconst { eventNameMap } = EventHelper;\n/**\n * An object which encapsulates a schedule timeline tick context based on a DOM event. This will include\n * the row and resource information and the tick and time information for a DOM pointer event detected\n * in the timeline.\n * @typedef {Object} TimelineContext\n * @property {Event} domEvent The DOM event which triggered the context change.\n * @property {HTMLElement} eventElement If the `domEvent` was on an event bar, this will be the event bar element.\n * @property {HTMLElement} cellElement The cell element under the `domEvent`\n * @property {Date} date The date corresponding to the `domEvent` position in the timeline\n * @property {Scheduler.model.TimeSpan} tick A {@link Scheduler.model.TimeSpan} record which encapsulates the contextual tick\n * @property {Number} tickIndex The contextual tick index. This may be fractional.\n * @property {Number} tickParentIndex The integer contextual tick index.\n * @property {Date} tickStartDate The start date of the contextual tick.\n * @property {Date} tickEndDate The end date of the contextual tick.\n * @property {Grid.row.Row} row The contextual {@link Grid.row.Row}\n * @property {Number} index The contextual row index\n * @property {Scheduler.model.EventModel} [eventRecord] The contextual event record (if any) if the event source is a `Scheduler`\n * @property {Scheduler.model.AssignmentModel} [assignmentRecord] The contextual assignment record (if any) if the event source is a `Scheduler`\n * @property {Scheduler.model.ResourceModel} [resourceRecord] The contextual resource record(if any) if the event source is a `Scheduler`\n */\n/**\n * Mixin that handles dom events (click etc) for scheduler and rendered events.\n *\n * @mixin\n */\nexport default Target => class TimelineDomEvents extends (Target || Base) {\n /**\n * Fires after a click on a time axis cell\n * @event timeAxisHeaderClick\n * @param {Scheduler.column.TimeAxisColumn|Scheduler.column.VerticalTimeAxisColumn} source The column object\n * @param {Date} startDate The start date of the header cell\n * @param {Date} endDate The end date of the header cell\n * @param {Event} event The event object\n */\n /**\n * Fires after a double click on a time axis cell\n * @event timeAxisHeaderDblClick\n * @param {Scheduler.column.TimeAxisColumn|Scheduler.column.VerticalTimeAxisColumn} source The column object\n * @param {Date} startDate The start date of the header cell\n * @param {Date} endDate The end date of the header cell\n * @param {Event} event The event object\n */\n /**\n * Fires after a right click on a time axis cell\n * @event timeAxisHeaderContextMenu\n * @param {Scheduler.column.TimeAxisColumn|Scheduler.column.VerticalTimeAxisColumn} source The column object\n * @param {Date} startDate The start date of the header cell\n * @param {Date} endDate The end date of the header cell\n * @param {Event} event The event object\n */\n static $name = 'TimelineDomEvents';\n //region Default config\n static configurable = {\n /**\n * The currently hovered timeline context. This is updated as the mouse or pointer moves over the timeline.\n * @member {TimelineContext} timelineContext\n * @readonly\n * @category Dates\n */\n timelineContext : {\n $config : {\n // Reject non-changes so that when set from scheduleMouseMove and EventMouseMove,\n // we only update the context and fire events when it changes.\n equal(c1, c2) {\n // index is the resource index, tickParentIndex is the\n // tick's index in the TimeAxis.\n return c1?.index === c2?.index &&\n c1?.tickParentIndex === c2?.tickParentIndex &&\n !((c1?.tickStartDate || 0) - (c2?.tickStartDate || 0));\n }\n }\n },\n updateTimelineContextOnScroll : false,\n /**\n * Set to `true` to ignore reacting to DOM events (mouseover/mouseout etc) while scrolling. Useful if you\n * want to maximize scroll performance.\n * @config {Boolean}\n * @default false\n */\n ignoreDomEventsWhileScrolling : null\n };\n static properties = {\n schedulerEvents : {\n pointermove : 'handleScheduleEvent',\n mouseover : 'handleScheduleEvent',\n mousedown : 'handleScheduleEvent',\n mouseup : 'handleScheduleEvent',\n click : 'handleScheduleEvent',\n dblclick : 'handleScheduleEvent',\n contextmenu : 'handleScheduleEvent',\n mousemove : 'handleScheduleEvent',\n mouseout : 'handleScheduleEvent'\n }\n };\n static delayable = {\n // Allow the scroll event to complete in its thread, and dispatch the mousemove event next AF\n onScheduleScroll : 'raf'\n };\n // Currently hovered events (can be parent + child)\n hoveredEvents = new Set();\n //endregion\n //region Init\n /**\n * Adds listeners for DOM events for the scheduler and its events.\n * Which events is specified in Scheduler#schedulerEvents.\n * @private\n */\n initDomEvents() {\n const\n me = this,\n { schedulerEvents } = me;\n // Set thisObj and element of the configured listener specs.\n schedulerEvents.element = me.timeAxisSubGridElement;\n schedulerEvents.thisObj = me;\n EventHelper.on(schedulerEvents);\n EventHelper.on({\n element : me.timeAxisSubGridElement,\n mouseleave : 'handleScheduleLeaveEvent',\n capture : true,\n thisObj : me\n });\n // This is to handle scroll events while the mouse is over the schedule.\n // For example magic mouse or touchpad scrolls, or scrolls caused by keyboard\n // navigation while the mouse happens to be over the schedule.\n // The context must update. We must consider any scroll because the document\n // or some other wrapping element could be scrolling the Scheduler under the mouse.\n if (me.updateTimelineContextOnScroll && BrowserHelper.supportsPointerEventConstructor) {\n EventHelper.on({\n element : document,\n scroll : 'onScheduleScroll',\n capture : true,\n thisObj : me\n });\n }\n };\n //endregion\n //region Event handling\n getTimeSpanMouseEventParams(eventElement, event) {\n throw new Error('Implement in subclass');\n }\n getScheduleMouseEventParams(cellData, event) {\n throw new Error('Implement in subclass');\n }\n /**\n * Wraps dom Events for the scheduler and event bars and fires as our events.\n * For example click -> scheduleClick or eventClick\n * @private\n * @param event\n */\n handleScheduleEvent(event) {\n const me = this;\n if (me.ignoreDomEventsWhileScrolling && (me.scrolling || me.timeAxisSubGrid.scrolling)) {\n return;\n }\n const timelineContext = me.getTimelineEventContext(event);\n // Cache the last pointer event so that when scrolling below the mouse\n // we can inject mousemove events at that point.\n me.lastPointerEvent = event;\n // We are over the schedule region\n if (timelineContext) {\n // Only fire a scheduleXXXX event if we are *not* over an event.\n // If over an event fire (event|task)XXXX.\n me.trigger(`${timelineContext.eventElement ? me.scheduledEventName : 'schedule'}${eventNameMap[event.type] || StringHelper.capitalize(event.type)}`, timelineContext);\n }\n // If the context has changed, updateTimelineContext will fire events\n me.timelineContext = timelineContext;\n }\n handleScheduleLeaveEvent(event) {\n if (event.target === this.timeAxisSubGridElement) {\n this.handleScheduleEvent(event);\n }\n }\n /**\n * This handles the scheduler being scrolled below the mouse by trackpad or keyboard events.\n * The context, if present needs to be recalculated.\n * @private\n */\n onScheduleScroll({ target }) {\n const me = this;\n // If the latest mouse event resulted in setting a context, we need to reproduce that event at the same clientX,\n // clientY in order to keep the context up to date while scrolling.\n // If the scroll is because of a pan feature drag (on us or a partner), we must not do this.\n // Target might be removed in salesforce by Locker Service if scroll event occurs on body\n if (\n target && me.updateTimelineContextOnScroll && !me.features.pan?.isActive &&\n !me.partners.some(p => p.features.pan?.isActive) &&\n (target.contains(me.element) || me.bodyElement.contains(target))\n ) {\n const { timelineContext, lastPointerEvent } = me;\n if (timelineContext) {\n const\n targetElement = DomHelper.elementFromPoint(timelineContext.domEvent.clientX, timelineContext.domEvent.clientY),\n pointerEvent = new BrowserHelper.PointerEventConstructor('pointermove', lastPointerEvent),\n mouseEvent = new MouseEvent('mousemove', lastPointerEvent);\n // See https://github.com/bryntum/support/issues/6274\n // The pointerId does not propagate correctly on the synthetic PointerEvent, but also is readonly, so\n // redefine the property. This is required by Ext JS gesture publisher which tracks pointer movements\n // while a pointer is down. Without the correct pointerId, Ext JS would see this move as a \"missed\"\n // pointerdown and forever await its pointerup (i.e., it would get stuck in the activeTouches). This\n // would cause all future events to be perceived as part of or the end of a drag and would never again\n // dispatch pointer events correctly. Finally, lastPointerEvent.pointerId is often incorrect (undefined\n // in fact), so check the most recent pointerdown/touchstart event and default to 1\n Object.defineProperty(pointerEvent, 'pointerId', {\n value : GlobalEvents.currentPointerDown?.pointerId ?? GlobalEvents.currentTouch?.identifier ?? 1\n });\n // Drag code should ignore these synthetic events\n pointerEvent.scrollInitiated = mouseEvent.scrollInitiated = true;\n // Emulate the correct browser sequence for mouse move events\n targetElement?.dispatchEvent(pointerEvent);\n targetElement?.dispatchEvent(mouseEvent);\n }\n }\n }\n updateTimelineContext(context, oldContext) {\n /**\n * Fired when the pointer-activated {@link #property-timelineContext} has changed.\n * @event timelineContextChange\n * @param {TimelineContext} oldContext The tick/resource context being deactivated.\n * @param {TimelineContext} context The tick/resource context being activated.\n */\n this.trigger('timelineContextChange', { oldContext, context });\n if (context && !oldContext) {\n this.trigger('scheduleMouseEnter', context);\n }\n else if (!context) {\n this.trigger('scheduleMouseLeave', { event : oldContext.event });\n }\n }\n /**\n * Gathers contextual information about the schedule contextual position of the passed event.\n *\n * Used by schedule mouse event handlers, but also by the scheduleContext feature.\n * @param {Event} domEvent The DOM event to gather context for.\n * @returns {TimelineContext} the schedule DOM event context\n * @internal\n */\n getTimelineEventContext(domEvent) {\n const\n me = this,\n eventElement = domEvent.target.closest(me.eventInnerSelector),\n cellElement = me.getCellElementFromDomEvent(domEvent);\n if (cellElement) {\n const date = me.getDateFromDomEvent(domEvent, 'floor');\n if (!date) {\n return;\n }\n const\n cellData = DomDataStore.get(cellElement),\n mouseParams = eventElement ? me.getTimeSpanMouseEventParams(eventElement, domEvent) : me.getScheduleMouseEventParams(cellData, domEvent);\n if (!mouseParams) {\n return;\n }\n const\n index = me.isVertical ? me.resourceStore.indexOf(mouseParams.resourceRecord) : cellData.row.dataIndex,\n tickIndex = me.timeAxis.getTickFromDate(date),\n tick = me.timeAxis.getAt(Math.floor(tickIndex));\n if (tick) {\n return {\n isTimelineContext : true,\n domEvent,\n eventElement,\n cellElement,\n index,\n tick,\n tickIndex,\n date,\n tickStartDate : tick.startDate,\n tickEndDate : tick.endDate,\n tickParentIndex : tick.parentIndex,\n row : cellData.row,\n event : domEvent,\n ...mouseParams\n };\n }\n }\n }\n getCellElementFromDomEvent({ target, clientY, type }) {\n const\n me = this,\n {\n isVertical,\n foregroundCanvas\n } = me,\n eventElement = target.closest(me.eventSelector);\n // If event was on an event bar, calculate the cell.\n if (eventElement) {\n const record = !isVertical && (me.resolveRowRecord(eventElement) || me.store.getAt(me.rowManager.getRowAt(clientY, false).dataIndex));\n return me.getCell({\n [isVertical ? 'row' : 'record'] : isVertical ? 0 : record,\n column : me.timeAxisColumn\n });\n }\n // If event was triggered by an element in the foreground canvas, but not an event element\n // we need to ascertain the cell \"behind\" that element to be able to create the context.\n else if (foregroundCanvas.contains(target)) {\n // Only trigger a Scheduler event if the event was on the background itself.\n // Otherwise, we will trigger unexpected events on things like dependency lines which historically\n // have never triggered scheduleXXXX events. The exception to this is the mousemove event which\n // needs to always fire so that timelineContext and scheduleTooltip correctly track the mouse\n if (target === foregroundCanvas || type === 'mousemove') {\n return me.rowManager.getRowAt(clientY, false)?.getCell(me.timeAxisColumn.id);\n }\n }\n else {\n // Event was inside a row, or on a row border.\n return target.matches('.b-grid-row') ? target.firstElementChild : target.closest(me.timeCellSelector);\n }\n }\n // Overridden by ResourceTimeRanges to \"pass events through\" to the schedule\n matchScheduleCell(element) {\n return element.closest(this.timeCellSelector);\n }\n onElementMouseButtonEvent(event) {\n const targetCell = event.target.closest('.b-sch-header-timeaxis-cell');\n if (targetCell) {\n const\n me = this,\n position = targetCell.parentElement.dataset.headerPosition,\n headerCells = me.timeAxisViewModel.columnConfig[position],\n index = me.timeAxis.isFiltered ? headerCells.findIndex(cell => cell.index == targetCell.dataset.tickIndex) : targetCell.dataset.tickIndex,\n cellConfig = headerCells[index],\n contextMenu = me.features.contextMenu;\n // Skip same events with Grid context menu triggerEvent\n if (!contextMenu || event.type !== contextMenu.triggerEvent) {\n this.trigger(`timeAxisHeader${StringHelper.capitalize(event.type)}`, {\n startDate : cellConfig.start,\n endDate : cellConfig.end,\n event\n });\n }\n }\n }\n onElementMouseDown(event) {\n this.onElementMouseButtonEvent(event);\n super.onElementMouseDown(event);\n }\n onElementClick(event) {\n this.onElementMouseButtonEvent(event);\n super.onElementClick(event);\n }\n onElementDblClick(event) {\n this.onElementMouseButtonEvent(event);\n super.onElementDblClick(event);\n }\n onElementContextMenu(event) {\n this.onElementMouseButtonEvent(event);\n super.onElementContextMenu(event);\n }\n /**\n * Relays mouseover events as eventmouseenter if over rendered event.\n * Also adds Scheduler#overScheduledEventClass to the hovered element.\n * @private\n */\n onElementMouseOver(event) {\n const\n me = this;\n if (me.ignoreDomEventsWhileScrolling && (me.scrolling || me.timeAxisSubGrid.scrolling)) {\n return;\n }\n super.onElementMouseOver(event);\n const\n { target } = event,\n { hoveredEvents } = me;\n // We must be over the event or dependency terminal hover area\n if ((target.closest(me.eventInnerSelector) || target.matches('.b-sch-terminal-hover-area')) && !me.features.eventDrag?.isDragging) {\n const eventElement = target.closest(me.eventSelector);\n if (!hoveredEvents.has(eventElement) && !me.preventOverCls) {\n hoveredEvents.add(eventElement);\n eventElement.classList.add(me.overScheduledEventClass);\n const params = me.getTimeSpanMouseEventParams(eventElement, event);\n if (params) {\n // do not fire this event if model cannot be found\n // this can be the case for \"b-sch-dragcreator-proxy\" elements for example\n me.trigger(`${me.scheduledEventName}MouseEnter`, params);\n }\n }\n }\n else if (hoveredEvents.size) {\n me.unhoverAll(event);\n }\n }\n /**\n * Relays mouseout events as eventmouseleave if out from rendered event.\n * Also removes Scheduler#overScheduledEventClass from the hovered element.\n * @private\n */\n onElementMouseOut(event) {\n const\n me = this,\n { features } = me,\n { target, relatedTarget } = event;\n // If it's not a mouseout into an event (or anything inside one of the schedule's\n // extra drawing canvases), continue up to the Grid base.\n // A mouseout cell->(event|dep-line|timeRange) should *not* trigger a mouseout of the cell\n // or row even though the event element is in fact outside. To a user, the event is in the cell.\n if (!relatedTarget?.closest('.b-sch-canvas *')) {\n super.onElementMouseOut(event);\n }\n const\n eventWrap = target.closest(me.eventSelector),\n eventInner = eventWrap?.querySelector(me.eventInnerSelector),\n timeSpanRecord = eventWrap && me.resolveTimeSpanRecord(eventWrap);\n // We must be over the event bar\n if (eventInner && timeSpanRecord && me.hoveredEvents.has(eventWrap) && !features.eventDrag?.isDragging) {\n // out to child or terminal hover area shouldn't count...\n if (relatedTarget && (DomHelper.isDescendant(eventInner, relatedTarget) || relatedTarget.matches('.b-sch-terminal-hover-area'))) {\n return;\n }\n }\n if (eventWrap) {\n me.unhover(eventWrap, event);\n }\n }\n unhover(element, event) {\n const me = this;\n element.classList.remove(me.overScheduledEventClass);\n me.trigger(`${me.scheduledEventName}MouseLeave`, me.getTimeSpanMouseEventParams(element, event));\n me.hoveredEvents.delete(element);\n }\n unhoverAll(event) {\n for (const element of this.hoveredEvents) {\n !element.isReleased && !element.classList.contains('b-released') && this.unhover(element, event);\n }\n // Might not be empty because of conditional unhover above\n this.hoveredEvents.clear();\n }\n //endregion\n // This does not need a className on Widgets.\n // Each *Class* which doesn't need 'b-' + constructor.name.toLowerCase() automatically adding\n // to the Widget it's mixed in to should implement thus.\n get widgetClass() {}\n};\n", "import Base from '../../../Core/Base.js';\nimport PresetManager from '../../preset/PresetManager.js';\nimport ObjectHelper from '../../../Core/helper/ObjectHelper.js';\nimport PresetStore from '../../preset/PresetStore.js';\nimport DateHelper, { unitMagnitudes } from '../../../Core/helper/DateHelper.js';\n/**\n * @module Scheduler/view/mixin/TimelineViewPresets\n */\n/**\n * View preset handling.\n *\n * A Scheduler's {@link #config-presets} are loaded with a default set of {@link Scheduler.preset.ViewPreset ViewPresets}\n * which are defined by the system in the {@link Scheduler.preset.PresetManager PresetManager}.\n *\n * The zooming feature works by reconfiguring the Scheduler with a new {@link Scheduler.preset.ViewPreset ViewPreset} selected\n * from the {@link #config-presets} store.\n *\n * {@link Scheduler.preset.ViewPreset ViewPresets} can be added and removed from the store to change the amount of available steps.\n * Range of zooming in/out can be also modified with {@link Scheduler.view.mixin.TimelineZoomable#config-maxZoomLevel} / {@link Scheduler.view.mixin.TimelineZoomable#config-minZoomLevel} properties.\n *\n * This mixin adds additional methods to the column : {@link Scheduler.view.mixin.TimelineZoomable#property-maxZoomLevel}, {@link Scheduler.view.mixin.TimelineZoomable#property-minZoomLevel}, {@link Scheduler.view.mixin.TimelineZoomable#function-zoomToLevel}, {@link Scheduler.view.mixin.TimelineZoomable#function-zoomIn},\n * {@link Scheduler.view.mixin.TimelineZoomable#function-zoomOut}, {@link Scheduler.view.mixin.TimelineZoomable#function-zoomInFull}, {@link Scheduler.view.mixin.TimelineZoomable#function-zoomOutFull}.\n *\n * **Notice**: Zooming is not supported when `forceFit` option is set to true for the Scheduler or for filtered timeaxis.\n *\n * @mixin\n */\nexport default Target => class TimelineViewPresets extends (Target || Base) {\n static get $name() {\n return 'TimelineViewPresets';\n }\n //region Default config\n static get configurable() {\n return {\n /**\n * A string key used to lookup a predefined {@link Scheduler.preset.ViewPreset} (e.g. 'weekAndDay', 'hourAndDay'),\n * managed by {@link Scheduler.preset.PresetManager}. See {@link Scheduler.preset.PresetManager} for more information.\n * Or a config object for a viewPreset.\n *\n * Options:\n * - 'secondAndMinute'\n * - 'minuteAndHour'\n * - 'hourAndDay'\n * - 'dayAndWeek'\n * - 'dayAndMonth'\n * - 'weekAndDay'\n * - 'weekAndMonth',\n * - 'monthAndYear'\n * - 'year'\n * - 'manyYears'\n * - 'weekAndDayLetter'\n * - 'weekDateAndMonth'\n * - 'day'\n * - 'week'\n *\n * If passed as a config object, the settings from the viewPreset with the provided `base` property will be used along\n * with any overridden values in your object.\n *\n * To override:\n * ```javascript\n * viewPreset : {\n * base : 'hourAndDay',\n * id : 'myHourAndDayPreset',\n * headers : [\n * {\n * unit : \"hour\",\n * increment : 12,\n * renderer : (startDate, endDate, headerConfig, cellIdx) => {\n * return \"\";\n * }\n * }\n * ]\n * }\n * ```\n * or set a new valid preset config if the preset is not registered in the {@link Scheduler.preset.PresetManager}.\n *\n * When you use scheduler in weekview mode, this config is used to pick view preset. If passed view preset is not\n * supported by weekview (only 2 supported by default - 'day' and 'week') default preset will be used - 'week'.\n * @config {String|ViewPresetConfig}\n * @default\n * @category Common\n */\n viewPreset : 'weekAndDayLetter',\n /**\n * Get the {@link Scheduler.preset.PresetStore} created for the Scheduler,\n * or set an array of {@link Scheduler.preset.ViewPreset} config objects.\n * @member {Scheduler.preset.PresetStore|ViewPresetConfig[]} presets\n * @category Common\n */\n /**\n * An array of {@link Scheduler.preset.ViewPreset} config objects\n * which describes the available timeline layouts for this scheduler.\n *\n * By default, a predefined set is loaded from the {@link Scheduler.preset.PresetManager}.\n *\n * A {@link Scheduler.preset.ViewPreset} describes the granularity of the\n * timeline view and the layout and subdivisions of the timeline header.\n * @config {ViewPresetConfig[]} presets\n *\n * @category Common\n */\n presets : true,\n /**\n * Defines how dates will be formatted in tooltips etc. This config has priority over similar config on the\n * view preset. For allowed values see {@link Core.helper.DateHelper#function-format-static}.\n *\n * By default, this is ingested from {@link Scheduler.preset.ViewPreset} upon change of\n * {@link Scheduler.preset.ViewPreset} (Such as when zooming in or out). But Setting this\n * to your own value, overrides that behaviour.\n * @prp {String}\n * @category Scheduled events\n */\n displayDateFormat : null\n };\n }\n //endregion\n /**\n * Get/set the current view preset\n * @member {Scheduler.preset.ViewPreset|ViewPresetConfig|String} viewPreset\n * @param [viewPreset.options]\n * @param {Date} [viewPreset.options.startDate] A new start date for the time axis\n * @param {Date} [viewPreset.options.endDate] A new end date for the time axis\n * @param {Date} [viewPreset.options.centerDate] Where to center the new time axis\n * @param {Number} [viewPreset.options.scrollPosition] The scroll position to scroll\n * the new time axis to. This takes precedence over any date-scrolling.\n * It is used when partnering two timelines which must be scroll-synced.\n * @category Common\n */\n //region Get/set\n changePresets(presets) {\n const config = {\n owner : this\n };\n let data = [];\n // By default includes all presets\n if (presets === true) {\n data = PresetManager.allRecords;\n }\n // Accepts an array of presets\n else if (Array.isArray(presets)) {\n for (const preset of presets) {\n // If we got a presetId\n if (typeof preset === 'string') {\n const presetRecord = PresetManager.getById(preset);\n if (presetRecord) {\n data.push(presetRecord);\n }\n }\n else {\n data.push(preset);\n }\n }\n }\n // Or a store config object\n else {\n ObjectHelper.assign(config, presets);\n }\n // Creates store first and then adds data, because data config does not support a mix of raw objects and records.\n const presetStore = new PresetStore(config);\n presetStore.add(data);\n return presetStore;\n }\n changeViewPreset(viewPreset, oldViewPreset) {\n const\n me = this,\n { presets } = me;\n if (viewPreset) {\n viewPreset = presets.createRecord(viewPreset);\n // If an existing ViewPreset id is used, this will replace it.\n if (!presets.includes(viewPreset)) {\n presets.add(viewPreset);\n }\n }\n else {\n viewPreset = presets.first;\n }\n const\n lastOpts = me.lastViewPresetOptions || {},\n options = viewPreset.options || (viewPreset.options = {}),\n event = {\n ...options,\n from : oldViewPreset,\n to : viewPreset,\n preset : viewPreset\n },\n presetChanged = !me._viewPreset || !me._viewPreset.equals(viewPreset);\n delete lastOpts.event;\n // Only return the value for onward processing if there's a change\n if (presetChanged || !ObjectHelper.isEqual(options, lastOpts)) {\n // Assign event after comparison, to not have it get super expensive\n options.event = event;\n // Bypass the no-change check if the viewPreset is the same and we only got in here\n // because different options were asked for.\n if (!presetChanged) {\n me._viewPreset = null;\n }\n /**\n * Fired before the {@link #config-viewPreset} is changed.\n * @event beforePresetChange\n * @param {Scheduler.view.Scheduler} source This Scheduler instance.\n * @param {Date} startDate The new start date of the timeline.\n * @param {Date} endDate The new end date of the timeline.\n * @param {Scheduler.preset.ViewPreset} from The outgoing ViewPreset.\n * @param {Scheduler.preset.ViewPreset} to The ViewPreset being switched to.\n * @preventable\n */\n // Do not trigger events for the initial preset\n if (me.isConfiguring || me.trigger('beforePresetChange', event) !== false) {\n return viewPreset;\n }\n }\n }\n get displayDateFormat() {\n return this._displayDateFormat || this.viewPreset.displayDateFormat;\n }\n updateDisplayDateFormat(format) {\n // Start/EndDateColumn listens for this to change their format to match\n this.trigger('displayDateFormatChange', { format });\n }\n /**\n * Method to get a formatted display date\n * @private\n * @param {Date} date The date\n * @returns {String} The formatted date\n */\n getFormattedDate(date) {\n return DateHelper.format(date, this.displayDateFormat);\n }\n updateViewPreset(preset) {\n const\n me = this,\n { options } = preset,\n {\n event,\n startDate,\n endDate\n } = options,\n {\n isHorizontal,\n _timeAxis : timeAxis, // Do not tickle the getter, we are just peeking to see if it's there yet.\n _timeAxisViewModel : timeAxisViewModel // Ditto\n } = me,\n rtl = isHorizontal && me.rtl;\n let\n {\n centerDate,\n zoomDate,\n zoomPosition\n } = options,\n forceUpdate = false;\n me.syncSplits?.(split => split.viewPreset = preset);\n // Options must not be reused when this preset is used again.\n delete preset.options;\n // Raise flag to prevent partner from changing view preset if one is in progress\n me._viewPresetChanging = true;\n if (timeAxis && !me.isConfiguring) {\n const { timelineScroller } = me;\n // Cache options only when they are applied so that non-change vetoing in changeViewPreset is accurate\n me.lastViewPresetOptions = options;\n // Timeaxis may already be configured (in case of sharing with the timeline partner), no need to reconfigure it\n if (timeAxis.isConfigured) {\n // None of this reconfiguring should cause a refresh\n me.suspendRefresh();\n // Set up these configs only if we actually have them.\n const timeAxisCfg = ObjectHelper.copyProperties({}, me, [\n 'weekStartDay',\n 'startTime',\n 'endTime'\n ]);\n if (me.infiniteScroll) {\n Object.assign(timeAxisCfg, me.calculateInfiniteScrollingDateRange(\n centerDate || (startDate && endDate ? new Date((startDate.getTime() + endDate.getTime()) / 2) : me.viewportCenterDateCached),\n true,\n preset\n ));\n }\n // if startDate is provided we use it and the provided endDate\n else if (startDate) {\n timeAxisCfg.startDate = startDate;\n timeAxisCfg.endDate = endDate;\n // if both dates are provided we can calculate centerDate for the viewport\n if (!centerDate && endDate) {\n centerDate = new Date((startDate.getTime() + endDate.getTime()) / 2);\n }\n // when no start/end dates are provided we use the current timespan\n }\n else {\n timeAxisCfg.startDate = timeAxis.startDate;\n timeAxisCfg.endDate = endDate || timeAxis.endDate;\n if (!centerDate) {\n centerDate = me.viewportCenterDate;\n }\n }\n timeAxis.isConfigured = false;\n timeAxisCfg.viewPreset = preset;\n timeAxis.reconfigure(timeAxisCfg, true);\n timeAxisViewModel.reconfigure({\n viewPreset : preset,\n headers : preset.headers,\n // This was hardcoded to 'middle' prior to the Preset refactor.\n // In the old code, the default headers were 'top' and 'middle', which\n // meant that 'middle' meant the lowest header.\n // So this is now length - 1.\n columnLinesFor : preset.columnLinesFor != null ? preset.columnLinesFor : preset.headers.length - 1,\n tickSize : options.tickSize || (isHorizontal ? preset.tickWidth : preset.tickHeight || preset.tickWidth || 60)\n });\n // A ViewPreset is extremely opinionated about its tickSize and imposes it upon the Scheduler.\n // Allow the caller to correct the tick size after the reconfigure using the options block.\n if (options.tickSize) {\n me.tickSize = options.tickSize;\n }\n // Allow refresh to run after the reconfiguring, without refreshing since we will do that below anyway\n me.resumeRefresh(false);\n }\n me.refresh();\n // if view is rendered and scroll is not disabled by \"notScroll\" option\n if (!options.notScroll && me.isPainted) {\n if ('scrollPosition' in options) {\n // If we are not going to end up scrolling, we need to force an update\n forceUpdate = timelineScroller.position === options.scrollPosition;\n timelineScroller.scrollTo(options.scrollPosition);\n }\n else if (options.visibleDate) {\n me.visibleDate = options.visibleDate;\n }\n // If a zoom at a certain date position is being requested, scroll the zoomDate\n // to the required zoomPosition so that the zoom happens centered where the\n // pointer events that are driving it targeted.\n else if (zoomDate && zoomPosition) {\n const\n unitMagnitude = unitMagnitudes[timeAxis.resolutionUnit],\n unit = unitMagnitude > 3 ? 'hour' : 'minute',\n milliseconds = DateHelper.asMilliseconds((unit === 'minute' ? 15 : 1), unit),\n // Round the date to either 15 minutes for fine levels or 1 hour for coarse levels\n targetDate = new Date(Math.round(zoomDate / milliseconds) * milliseconds);\n // setViewPreset method on partner panels should be executed with same arguments.\n // if one partner was provided with zoom info, other one has to be too to generate exact\n // header and set same scroll\n event.zoomDate = zoomDate;\n event.zoomPosition = zoomPosition;\n event.zoomLevel = options.zoomLevel;\n // Move the targetDate back under the mouse position as indicated by zoomPosition.\n // That is the offset into the TimeAxisSubGridElement.\n if (rtl) {\n timelineScroller.position = timelineScroller.scrollWidth - (me.getCoordinateFromDate(targetDate) + zoomPosition);\n }\n else {\n timelineScroller.position = me.getCoordinateFromDate(targetDate) - zoomPosition;\n }\n }\n // and we have centerDate to scroll to\n else if (centerDate) {\n // remember the central date we scroll to (it gets reset after user scroll)\n me.cachedCenterDate = centerDate;\n // setViewPreset method on partner panels should be executed with same arguments.\n // if one partner was provided with a centerDate, other one has to be too to generate exact\n // header and set same scroll\n event.centerDate = centerDate;\n const\n viewportSize = me.timelineScroller.clientSize,\n centerCoord = rtl ? me.timeAxisViewModel.totalSize - me.getCoordinateFromDate(centerDate, true)\n : me.getCoordinateFromDate(centerDate, true),\n coord = Math.max(centerCoord - viewportSize / 2, 0);\n // If preset change does not lead to a scroll we have to \"refresh\" manually at the end\n if (coord === (me.isHorizontal ? me.scrollLeft : me.scrollTop)) {\n forceUpdate = true;\n }\n else if (me.isHorizontal) {\n me.scrollHorizontallyTo(coord, { scrollingToCenter : true });\n }\n else {\n me.scrollVerticallyTo(coord, { scrollingToCenter : true });\n }\n }\n else {\n // If preset change does not lead to a scroll we have to \"refresh\" manually at the end\n if ((me.isHorizontal ? me.scrollLeft : me.scrollTop) === 0) {\n forceUpdate = true;\n }\n // If we don't have a center date to scroll to, we reset scroll (this is bw compatible behavior)\n else {\n me.timelineScroller.scrollTo(0);\n }\n }\n }\n }\n // Update Scheduler element showing what preset is applied\n me.dataset.presetId = preset.id;\n /**\n * Fired after the {@link #config-viewPreset} has changed.\n * @event presetChange\n * @param {Scheduler.view.Scheduler} source This Scheduler instance.\n * @param {Date} startDate The new start date of the timeline.\n * @param {Date} centerDate The new center date of the timeline.\n * @param {Date} endDate The new end date of the timeline.\n * @param {Scheduler.preset.ViewPreset} from The outgoing ViewPreset.\n * @param {Scheduler.preset.ViewPreset} to The ViewPreset being switched to.\n * @preventable\n */\n me.trigger('presetChange', event);\n me._viewPresetChanging = false;\n if (forceUpdate) {\n if (me.isHorizontal) {\n me.currentOrientation.updateFromHorizontalScroll(me.scrollLeft, true);\n }\n else {\n me.currentOrientation.updateFromVerticalScroll(me.scrollTop);\n }\n }\n }\n //endregion\n doDestroy() {\n if (this._presets.owner === this) {\n this._presets.destroy();\n }\n super.doDestroy();\n }\n // This function is not meant to be called by any code other than Base#getCurrentConfig().\n getCurrentConfig(options) {\n const result = super.getCurrentConfig(options);\n // Cannot store name, will not be allowed when reapplying\n if (result.viewPreset && result.viewPreset.name && !result.viewPreset.base) {\n delete result.viewPreset.name;\n }\n return result;\n }\n // This does not need a className on Widgets.\n // Each *Class* which doesn't need 'b-' + constructor.name.toLowerCase() automatically adding\n // to the Widget it's mixed in to should implement thus.\n get widgetClass() {}\n};\n", "import Base from '../../../Core/Base.js';\nimport DateHelper from '../../../Core/helper/DateHelper.js';\nimport EventHelper from '../../../Core/helper/EventHelper.js';\n/**\n * @module Scheduler/view/mixin/TimelineZoomable\n */\n/**\n * Options which may be used when changing the {@link Scheduler.view.Scheduler#property-viewPreset} property.\n *\n * @typedef {Object} ChangePresetOptions\n * @property {VisibleDate} [visibleDate] A `visibleDate` specification to bring into view after the new\n * `ViewPreset` is applied.\n * @property {Date} [startDate] New time frame start. If provided along with end, view will be centered in this\n * time interval, ignoring centerDate config. __Ignored if {@link Scheduler.view.Scheduler#config-infiniteScroll} is used.__\n * @property {Date} [endDate] New time frame end. __Ignored if {@link Scheduler.view.Scheduler#config-infiniteScroll} is used.__\n * @property {Date} [centerDate] Date to keep in center. Is ignored when start and end are provided.\n * @property {Date} [zoomDate] The date that should be positioned at the passed `datePosition` client offset.\n * @property {Number} [zoomPosition] The client offset at which the passed `zoomDate` should be positioned.\n * @property {Number} [width] Lowest tick width. Might be increased automatically\n */\n/**\n * Mixin providing \"zooming\" functionality.\n *\n * The zoom levels are stored as instances of {@link Scheduler.preset.ViewPreset}s, and are\n * cached centrally in the {@link Scheduler.preset.PresetManager}.\n *\n * The default presets are loaded into the {@link Scheduler.view.mixin.TimelineViewPresets#config-presets}\n * store upon Scheduler instantiation. Preset selection is covered in the\n * {@link Scheduler.view.mixin.TimelineViewPresets} mixin.\n *\n * To specify custom zoom levels please provide a set of view presets to the global PresetManager store **before**\n * scheduler creation, or provide a set of view presets to a specific scheduler only:\n *\n * ```javascript\n * const myScheduler = new Scheduler({\n * presets : [\n * {\n * base : 'hourAndDay',\n * id : 'MyHourAndDay',\n * // other preset configs....\n * },\n * {\n * base : 'weekAndMonth',\n * id : 'MyWeekAndMonth',\n * // other preset configs....\n * }\n * ],\n * viewPreset : 'MyHourAndDay',\n * // other scheduler configs....\n * });\n * ```\n *\n * @mixin\n */\nexport default Target => class TimelineZoomable extends (Target || Base) {\n static $name = 'TimelineZoomable';\n static defaultConfig = {\n /**\n * If true, you can zoom in and out on the time axis using CTRL-key + mouse wheel.\n * @config {Boolean}\n * @default\n * @category Zoom\n */\n zoomOnMouseWheel : true,\n /**\n * True to zoom to time span when double-clicking a time axis cell.\n * @config {Boolean}\n * @default\n * @category Zoom\n */\n zoomOnTimeAxisDoubleClick : true,\n /**\n * The minimum zoom level to which {@link #function-zoomOut} will work. Defaults to 0 (year ticks)\n * @config {Number}\n * @category Zoom\n * @default\n */\n minZoomLevel : 0,\n /**\n * The maximum zoom level to which {@link #function-zoomIn} will work. Defaults to the number of\n * {@link Scheduler.preset.ViewPreset ViewPresets} available, see {@link Scheduler/view/mixin/TimelineViewPresets#property-presets}\n * for information. Unless you have modified the collection of available presets, the max zoom level is\n * milliseconds.\n * @config {Number}\n * @category Zoom\n * @default 23\n */\n maxZoomLevel : null,\n /**\n * Integer number indicating the size of timespan during zooming. When zooming, the timespan is adjusted to make\n * the scrolling area `visibleZoomFactor` times wider than the timeline area itself. Used in\n * {@link #function-zoomToSpan} and {@link #function-zoomToLevel} functions.\n * @config {Number}\n * @default\n * @category Zoom\n */\n visibleZoomFactor : 5,\n /**\n * Whether the originally rendered timespan should be preserved while zooming. By default, it is set to `false`,\n * meaning the timeline panel will adjust the currently rendered timespan to limit the amount of HTML content to\n * render. When setting this option to `true`, be careful not to allow to zoom a big timespan in seconds\n * resolution for example. That will cause **a lot** of HTML content to be rendered and affect performance. You\n * can use {@link #config-minZoomLevel} and {@link #config-maxZoomLevel} config options for that.\n * @config {Boolean}\n * @default\n * @category Zoom\n */\n zoomKeepsOriginalTimespan : null\n };\n // We cache the last mousewheel position, so that during zooming we can\n // maintain a stable zoom point even if the mouse moves a little.\n lastWheelTime = -1;\n lastZoomPosition = -1;\n construct(config) {\n const me = this;\n super.construct(config);\n if (me.zoomOnMouseWheel) {\n EventHelper.on({\n element : me.timeAxisSubGridElement,\n wheel : 'onWheel',\n // Throttle zooming with the wheel a bit to have greater control of it\n throttled : {\n buffer : 100,\n // Prevent events from slipping through the throttle, causing scroll\n alt : e => e.ctrlKey && e.preventDefault()\n },\n thisObj : me,\n capture : true,\n passive : false\n });\n }\n if (me.zoomOnTimeAxisDoubleClick) {\n me.ion({\n timeaxisheaderdblclick : ({ startDate, endDate }) => {\n if (!me.forceFit) {\n me.zoomToSpan({\n startDate,\n endDate\n });\n }\n }\n });\n }\n }\n get maxZoomLevel() {\n return this._maxZoomLevel || (this.presets.count - 1);\n }\n /**\n * Get/set the {@link #config-maxZoomLevel} value\n * @property {Number}\n * @category Zoom\n */\n set maxZoomLevel(level) {\n if (typeof level !== 'number') {\n level = this.presets.count - 1;\n }\n if (level < 0 || level >= this.presets.count) {\n throw new Error('Invalid range for `maxZoomLevel`');\n }\n this._maxZoomLevel = level;\n }\n get minZoomLevel() {\n return this._minZoomLevel;\n }\n /**\n * Sets the {@link #config-minZoomLevel} value\n * @property {Number}\n * @category Zoom\n */\n set minZoomLevel(level) {\n if (typeof level !== 'number') {\n level = 0;\n }\n if (level < 0 || level >= this.presets.count) {\n throw new Error('Invalid range for `minZoomLevel`');\n }\n this._minZoomLevel = level;\n }\n /**\n * Current zoom level, which is equal to the {@link Scheduler.preset.ViewPreset ViewPreset} index\n * in the provided array of {@link Scheduler.view.mixin.TimelineViewPresets#config-presets zoom levels}.\n * @property {Number}\n * @category Zoom\n */\n get zoomLevel() {\n return this.presets.indexOf(this.viewPreset);\n }\n // noinspection JSAnnotator\n set zoomLevel(level) {\n this.zoomToLevel(level);\n }\n /**\n * Returns number of milliseconds per pixel.\n * @param {Object} level Element from array of {@link Scheduler.view.mixin.TimelineViewPresets#config-presets}.\n * @param {Boolean} ignoreActualWidth If true, then density will be calculated using default zoom level settings.\n * Otherwise, density will be calculated for actual tick width.\n * @returns {Number} Return number of milliseconds per pixel.\n * @private\n */\n getMilliSecondsPerPixelForZoomLevel(preset, ignoreActualWidth) {\n const\n { bottomHeader } = preset,\n // Scheduler uses direction independent tickSize, but presets are allowed to define different sizes for\n // vertical and horizontal -> cant use preset.tickSize here\n width = this.isHorizontal ? preset.tickWidth : preset.tickHeight;\n // trying to convert the unit + increment to a number of milliseconds\n // this number is not fixed (month can be 28, 30 or 31 day), but at least this conversion\n // will be consistent (should be no DST changes at year 1)\n return Math.round(\n (DateHelper.add(new Date(1, 0, 1), bottomHeader.increment || 1, bottomHeader.unit) - new Date(1, 0, 1)) /\n // `actualWidth` is a column width after view adjustments applied to it (see `calculateTickWidth`)\n // we use it if available to return the precise index value from `getCurrentZoomLevelIndex`\n (ignoreActualWidth ? width : preset.actualWidth || width)\n );\n }\n /**\n * Zooms to passed view preset, saving center date. Method accepts config object as a first argument, which can be\n * reduced to primitive type (string,number) when no additional options required. e.g.:\n * ```javascript\n * // zooming to preset\n * scheduler.zoomTo({ preset : 'hourAndDay' })\n * // shorthand\n * scheduler.zoomTo('hourAndDay')\n *\n * // zooming to level\n * scheduler.zoomTo({ level : 0 })\n * // shorthand\n * scheduler.zoomTo(0)\n * ```\n *\n * It is also possible to zoom to a time span by omitting `preset` and `level` configs, in which case scheduler sets\n * the time frame to a specified range and applies zoom level which allows to fit all columns to this range. The\n * given time span will be centered in the scheduling view (unless `centerDate` config provided). In the same time,\n * the start/end date of the whole time axis will be extended to allow scrolling for user.\n * ```javascript\n * // zooming to time span\n * scheduler.zoomTo({\n * startDate : new Date(..),\n * endDate : new Date(...)\n * });\n * ```\n *\n * @param {ViewPresetConfig|Object|String|Number} config Config object, preset name or zoom level index.\n * @param {String} [config.preset] Preset name to zoom to. Ignores level config in this case\n * @param {Number} [config.level] Zoom level to zoom to. Is ignored, if preset config is provided\n * @param {VisibleDate} [config.visibleDate] A `visibleDate` specification to bring into view after the zoom.\n * @param {Date} [config.startDate] New time frame start. If provided along with end, view will be centered in this\n * time interval (unless `centerDate` is present)\n * @param {Date} [config.endDate] New time frame end\n * @param {Date} [config.centerDate] Date that should be kept in the center. Has priority over start and end params\n * @param {Date} [config.zoomDate] The date that should be positioned at the passed `datePosition` client offset.\n * @param {Number} [config.zoomPosition] The client offset at which the passed `date` should be positioned.\n * @param {Number} [config.width] Lowest tick width. Might be increased automatically\n * @param {Number} [config.leftMargin] Amount of pixels to extend span start on (used, when zooming to span)\n * @param {Number} [config.rightMargin] Amount of pixels to extend span end on (used, when zooming to span)\n * @param {Number} [config.adjustStart] Amount of units to extend span start on (used, when zooming to span)\n * @param {Number} [config.adjustEnd] Amount of units to extend span end on (used, when zooming to span)\n * @category Zoom\n */\n zoomTo(config) {\n const me = this;\n if (typeof config === 'object') {\n if (config.preset) {\n me.zoomToLevel(config.preset, config);\n }\n else if (config.level != null) {\n me.zoomToLevel(config.level, config);\n }\n else {\n me.zoomToSpan(config);\n }\n }\n else {\n me.zoomToLevel(config);\n }\n }\n /**\n * Allows zooming to certain level of {@link Scheduler.view.mixin.TimelineViewPresets#config-presets} array.\n * Automatically limits zooming between {@link #config-maxZoomLevel} and {@link #config-minZoomLevel}. Can also set\n * time axis timespan to the supplied start and end dates.\n *\n * @param {Number} preset Level to zoom to.\n * @param {ChangePresetOptions} [options] Object containing options which affect how the new preset is applied.\n * @returns {Number|null} level Current zoom level or null if it hasn't changed.\n * @category Zoom\n */\n zoomToLevel(preset, options = {}) {\n if (this.forceFit) {\n console.warn('Warning: The forceFit setting and zooming cannot be combined');\n return;\n }\n // Sanitize numeric zooming.\n if (typeof preset === 'number') {\n preset = Math.min(Math.max(preset, this.minZoomLevel), this.maxZoomLevel);\n }\n const\n me = this,\n { presets } = me,\n tickSizeProp = me.isVertical ? 'tickHeight' : 'tickWidth',\n newPreset = presets.createRecord(preset),\n configuredTickSize = newPreset[tickSizeProp],\n startDate = options.startDate ? new Date(options.startDate) : null,\n endDate = options.endDate ? new Date(options.endDate) : null;\n // If an existing ViewPreset id is used, this will replace it.\n presets.add(newPreset);\n let span = startDate && endDate ? { startDate, endDate } : null;\n const\n centerDate = options.centerDate ? new Date(options.centerDate) : (span ? new Date((startDate.getTime() + endDate.getTime()) / 2) : me.viewportCenterDateCached);\n let scrollableViewportSize = me.isVertical ? me.scrollable.clientHeight : me.timeAxisSubGrid.width;\n if (scrollableViewportSize === 0) {\n const\n { _beforeCollapseState } = me.timeAxisSubGrid;\n if (me.isHorizontal && me.timeAxisSubGrid.collapsed && _beforeCollapseState?.width) {\n scrollableViewportSize = _beforeCollapseState.width;\n }\n else {\n return null;\n }\n }\n // Always calculate an optimal date range for the new zoom level\n if (!span) {\n span = me.calculateOptimalDateRange(centerDate, scrollableViewportSize, newPreset);\n }\n // Temporarily override tick size while reconfiguring the TimeAxisViewModel\n if ('width' in options) {\n newPreset.setData(tickSizeProp, options.width);\n }\n me.isZooming = true;\n // Passed through to the viewPreset changing method\n newPreset.options = {\n ...options,\n startDate : span.startDate || me.startDate,\n endDate : span.endDate || me.endDate,\n centerDate\n };\n me.viewPreset = newPreset;\n // after switching the view preset the `width` config of the zoom level may change, because of adjustments\n // we will save the real value in the `actualWidth` property, so that `getCurrentZoomLevelIndex` method\n // will return the exact level index after zooming\n newPreset.actualWidth = me.timeAxisViewModel.tickSize;\n me.isZooming = false;\n // Restore the tick size because the default presets are shared.\n newPreset.setData(tickSizeProp, configuredTickSize);\n return me.zoomLevel;\n }\n /**\n * Changes the range of the scheduling chart to fit all the events in its event store.\n * @param {Object} [options] Options object for the zooming operation.\n * @param {Number} [options.leftMargin] Defines margin in pixel between the first event start date and first visible\n * date\n * @param {Number} [options.rightMargin] Defines margin in pixel between the last event end date and last visible\n * date\n */\n zoomToFit(options) {\n const eventStore = this.eventStore,\n span = eventStore.getTotalTimeSpan();\n options = {\n leftMargin : 0,\n rightMargin : 0,\n ...options,\n ...span\n };\n // Make sure we received a time span, event store might be empty\n if (options.startDate && options.endDate) {\n if (options.endDate > options.startDate) {\n this.zoomToSpan(options);\n }\n else {\n // If we only had a zero time span, just scroll it into view\n this.scrollToDate(options.startDate);\n }\n }\n }\n /**\n * Sets time frame to specified range and applies zoom level which allows to fit all columns to this range.\n *\n * The given time span will be centered in the scheduling view, in the same time, the start/end date of the whole\n * time axis will be extended in the same way as {@link #function-zoomToLevel} method does, to allow scrolling for\n * user.\n *\n * @param {Object} config The time frame.\n * @param {Date} config.startDate The time frame start.\n * @param {Date} config.endDate The time frame end.\n * @param {Date} [config.centerDate] Date that should be kept in the center. Has priority over start and end params\n * @param {Number} [config.leftMargin] Amount of pixels to extend span start on\n * @param {Number} [config.rightMargin] Amount of pixels to extend span end on\n * @param {Number} [config.adjustStart] Amount of units to extend span start on\n * @param {Number} [config.adjustEnd] Amount of units to extend span end on\n *\n * @returns {Number|null} level Current zoom level or null if it hasn't changed.\n * @category Zoom\n */\n zoomToSpan(config = {}) {\n if (config.leftMargin || config.rightMargin) {\n config.adjustStart = 0;\n config.adjustEnd = 0;\n }\n if (!config.leftMargin) config.leftMargin = 0;\n if (!config.rightMargin) config.rightMargin = 0;\n if (!config.startDate || !config.endDate) throw new Error('zoomToSpan: must provide startDate + endDate dates');\n const\n me = this,\n { timeAxis } = me,\n // this config enables old zoomToSpan behavior which we want to use for zoomToFit in Gantt\n needToAdjust = config.adjustStart >= 0 || config.adjustEnd >= 0;\n let {\n startDate,\n endDate\n } = config;\n if (needToAdjust) {\n startDate = DateHelper.add(startDate, -config.adjustStart, timeAxis.mainUnit);\n endDate = DateHelper.add(endDate, config.adjustEnd, timeAxis.mainUnit);\n }\n if (startDate <= endDate) {\n // get scheduling view width\n const\n { availableSpace } = me.timeAxisViewModel,\n presets = me.presets.allRecords,\n diffMS = endDate - startDate || 1;\n // if potential width of col is less than col width provided by zoom level\n // - we'll zoom out panel until col width fit into width from zoom level\n // and if width of column is more than width from zoom level\n // - we'll zoom in until col width fit won't fit into width from zoom level\n let currLevel = me.zoomLevel,\n inc, range;\n // if we zoomed out even more than the highest zoom level - limit it to the highest zoom level\n if (currLevel === -1) currLevel = 0;\n let msPerPixel = me.getMilliSecondsPerPixelForZoomLevel(presets[currLevel], true),\n // increment to get next zoom level:\n // -1 means that given timespan won't fit the available width in the current zoom level, we need to zoom out,\n // so that more content will \"fit\" into 1 px\n //\n // +1 mean that given timespan will already fit into available width in the current zoom level, but,\n // perhaps if we'll zoom in a bit more, the fitting will be better\n candidateLevel = currLevel + (inc = diffMS / msPerPixel + config.leftMargin + config.rightMargin > availableSpace ? -1 : 1),\n zoomLevel, levelToZoom = null;\n // loop over zoom levels\n while (candidateLevel >= 0 && candidateLevel <= presets.length - 1) {\n // get zoom level\n zoomLevel = presets[candidateLevel];\n msPerPixel = me.getMilliSecondsPerPixelForZoomLevel(zoomLevel, true);\n const spanWidth = diffMS / msPerPixel + config.leftMargin + config.rightMargin;\n // if zooming out\n if (inc === -1) {\n // if columns fit into available space, then all is fine, we've found appropriate zoom level\n if (spanWidth <= availableSpace) {\n levelToZoom = candidateLevel;\n // stop searching\n break;\n }\n // if zooming in\n }\n else {\n // if columns still fits into available space, we need to remember the candidate zoom level as a potential\n // resulting zoom level, the indication that we've found correct zoom level will be that timespan won't fit\n // into available view\n if (spanWidth <= availableSpace) {\n // if it's not currently active level\n if (currLevel !== candidateLevel - inc) {\n // remember this level as applicable\n levelToZoom = candidateLevel;\n }\n }\n else {\n // Sanity check to find the following case:\n // If we're already zoomed in at the appropriate level, but the current zoomLevel is \"too small\" to fit and had to be expanded,\n // there is an edge case where we should actually just stop and use the currently selected zoomLevel\n break;\n }\n }\n candidateLevel += inc;\n }\n // If we didn't find a large/small enough zoom level, use the lowest/highest level\n levelToZoom = levelToZoom != null ? levelToZoom : candidateLevel - inc;\n // presets is the array of all ViewPresets this Scheduler is using\n zoomLevel = presets[levelToZoom];\n const unitToZoom = zoomLevel.bottomHeader.unit;\n // Extract the correct msPerPixel value for the new zoom level\n msPerPixel = me.getMilliSecondsPerPixelForZoomLevel(zoomLevel, true);\n if (config.leftMargin || config.rightMargin) {\n // time axis doesn't yet know about new view preset (zoom level) so it cannot round/ceil date correctly\n startDate = new Date(startDate.getTime() - msPerPixel * config.leftMargin);\n endDate = new Date(endDate.getTime() + msPerPixel * config.rightMargin);\n }\n const tickCount = DateHelper.getDurationInUnit(startDate, endDate, unitToZoom, true) / zoomLevel.bottomHeader.increment;\n if (tickCount === 0) {\n return null;\n }\n const\n customWidth = Math.floor(availableSpace / tickCount),\n centerDate = config.centerDate || new Date((startDate.getTime() + endDate.getTime()) / 2);\n if (needToAdjust) {\n range = {\n startDate,\n endDate\n };\n }\n else {\n range = me.calculateOptimalDateRange(centerDate, availableSpace, zoomLevel);\n }\n let result = me.zoomLevel;\n // No change of zoom level needed, just move to the date range\n if (me.zoomLevel === levelToZoom) {\n timeAxis.reconfigure(range);\n }\n else {\n result = me.zoomToLevel(levelToZoom,\n Object.assign(range, {\n width : customWidth,\n centerDate\n })\n );\n }\n this.trigger('zoomToSpan', { zoomLevel : levelToZoom, startDate, endDate, centerDate });\n return result;\n }\n return null;\n }\n /**\n * Zooms in the timeline according to the array of zoom levels. If the amount of levels to zoom is given, the view\n * will zoom in by this value. Otherwise, a value of `1` will be used.\n *\n * @param {Number} [levels] (optional) amount of levels to zoom in\n * @param {ChangePresetOptions} [options] Object containing options which affect how the new preset is applied.\n * @returns {Number|null} currentLevel New zoom level of the panel or null if level hasn't changed.\n * @category Zoom\n */\n zoomIn(levels = 1, options) {\n // Allow zoomIn({ visibleDate : ... })\n if (typeof levels === 'object') {\n options = levels;\n levels = 1;\n }\n const currentZoomLevelIndex = this.zoomLevel;\n if (currentZoomLevelIndex >= this.maxZoomLevel) {\n return null;\n }\n return this.zoomToLevel(currentZoomLevelIndex + levels, options);\n }\n /**\n * Zooms out the timeline according to the array of zoom levels. If the amount of levels to zoom is given, the view\n * will zoom out by this value. Otherwise, a value of `1` will be used.\n *\n * @param {Number} levels (optional) amount of levels to zoom out\n * @param {ChangePresetOptions} [options] Object containing options which affect how the new preset is applied.\n * @returns {Number|null} currentLevel New zoom level of the panel or null if level hasn't changed.\n * @category Zoom\n */\n zoomOut(levels = 1, options) {\n // Allow zoomOut({ visibleDate : ... })\n if (typeof levels === 'object') {\n options = levels;\n levels = 1;\n }\n const currentZoomLevelIndex = this.zoomLevel;\n if (currentZoomLevelIndex <= this.minZoomLevel) {\n return null;\n }\n return this.zoomToLevel(currentZoomLevelIndex - levels, options);\n }\n /**\n * Zooms in the timeline to the {@link #config-maxZoomLevel} according to the array of zoom levels.\n *\n * @param {ChangePresetOptions} [options] Object containing options which affect how the new preset is applied.\n * @returns {Number|null} currentLevel New zoom level of the panel or null if level hasn't changed.\n * @category Zoom\n */\n zoomInFull(options) {\n return this.zoomToLevel(this.maxZoomLevel, options);\n }\n /**\n * Zooms out the timeline to the {@link #config-minZoomLevel} according to the array of zoom levels.\n *\n * @param {ChangePresetOptions} [options] Object containing options which affect how the new preset is applied.\n * @returns {Number|null} currentLevel New zoom level of the panel or null if level hasn't changed.\n * @category Zoom\n */\n zoomOutFull(options) {\n return this.zoomToLevel(this.minZoomLevel, options);\n }\n /*\n * Adjusts the timespan of the panel to the new zoom level. Used for performance reasons,\n * as rendering too many columns takes noticeable amount of time so their number is limited.\n * @category Zoom\n * @private\n */\n calculateOptimalDateRange(centerDate, viewportSize, viewPreset) {\n const\n me = this,\n { timeAxis } = me,\n { bottomHeader } = viewPreset,\n tickWidth = me.isHorizontal ? viewPreset.tickWidth : viewPreset.tickHeight;\n if (me.zoomKeepsOriginalTimespan) {\n return {\n startDate : timeAxis.startDate,\n endDate : timeAxis.endDate\n };\n }\n const\n unit = bottomHeader.unit,\n difference = Math.ceil(viewportSize / tickWidth * bottomHeader.increment * me.visibleZoomFactor / 2),\n startDate = DateHelper.add(centerDate, -difference, unit),\n endDate = DateHelper.add(centerDate, difference, unit);\n return {\n startDate : timeAxis.floorDate(startDate, false, unit, bottomHeader.increment),\n endDate : timeAxis.ceilDate(endDate, false, unit, bottomHeader.increment)\n };\n }\n onElementMouseMove(event) {\n const\n {\n isHorizontal,\n zoomContext\n } = this;\n super.onElementMouseMove(event);\n if (event.isTrusted && zoomContext) {\n // Invalidate the zoomContext if mouse has strayed away from it\n if (Math.abs(event[`client${isHorizontal ? 'X' : 'Y'}`] - zoomContext.coordinate) > 10) {\n this.zoomContext = null;\n }\n }\n }\n async onWheel(event) {\n if (event.ctrlKey && !this.forceFit) {\n event.preventDefault();\n const\n me = this,\n {\n zoomContext,\n isHorizontal,\n timelineScroller,\n zoomLevel\n } = me,\n now = performance.now(),\n coordinate = event[`client${isHorizontal ? 'X' : 'Y'}`];\n let zoomPosition = coordinate - timelineScroller.viewport[`${isHorizontal ? 'x' : 'y'}`];\n // zoomPosition is the offset into the TimeAxisSubGridElement.\n if (isHorizontal && me.rtl) {\n zoomPosition = timelineScroller.viewport.width + timelineScroller.viewport.x - coordinate;\n }\n // If we are in a fast-arriving stream of wheel events, we use the same zoomDate as last time.\n // If it's a new zoom gesture or the pointer has strayed away from the context then ascertain\n // the gesture's center date\n if (now - me.lastWheelTime > 200 || !zoomContext || Math.abs(coordinate - me.zoomContext.coordinate) > 20) {\n // We're creating a zoom gesture which lasts as long as the\n // wheel events keep arriving at the same timeline position\n me.zoomContext = {\n // So we can track if we're going in (to finer resolutions)\n zoomLevel,\n // Pointer client(X|Y)\n coordinate,\n // Full TimeAxis offset position at which to place the date\n zoomPosition,\n // The date to place at the position\n zoomDate : me.getDateFromDomEvent(event)\n };\n }\n // Use the current zoomContext's zoomDate, but at each level, the relative position of that date\n // in the TimeAxis has to be corrected as the TimeAxis grows and scrolls to keep the zoomPosition\n // stable.\n else {\n // If we zoom in to a finer resolution, get a more accurate centering date.\n // If gesture was started at a years/months level, the date will be inaccurate.\n if (zoomLevel > zoomContext.zoomLevel) {\n zoomContext.zoomDate = me.getDateFromDomEvent(event);\n zoomContext.zoomLevel = zoomLevel;\n }\n zoomContext.zoomPosition = zoomPosition;\n }\n me.lastWheelTime = now;\n me[`zoom${event.deltaY > 0 ? 'Out' : 'In'}`](undefined, me.zoomContext);\n }\n }\n /**\n * Changes the time axis timespan to the supplied start and end dates.\n * @param {Date} newStartDate The new start date\n * @param {Date} [newEndDate] The new end date. If omitted or equal to startDate, the\n * {@link Scheduler.preset.ViewPreset#field-defaultSpan} property of the current view preset will be used to calculate the new end date.\n * @param {Object} [options] An object containing modifiers for the time span change operation.\n * @param {Boolean} [options.maintainVisibleStart] Specify as `true` to keep the visible start date stable.\n * @param {Date} [options.visibleDate] The date inside the range to scroll into view\n * @async\n */\n setTimeSpan(newStartDate, newEndDate, options) {\n this.timeAxis.setTimeSpan(newStartDate, newEndDate, options);\n }\n /**\n * Moves the time axis by the passed amount and unit.\n *\n * NOTE: If using a filtered time axis, see {@link Scheduler.data.TimeAxis#function-shift} for more information.\n *\n * @param {Number} amount The number of units to jump\n * @param {DurationUnitShort} [unit] The unit (Day, Week etc.)\n */\n shift(amount, unit) {\n this.timeAxis.shift(amount, unit);\n }\n /**\n * Moves the time axis forward in time in units specified by the view preset `shiftUnit`, and by the amount\n * specified by the `shiftIncrement` config of the current view preset.\n *\n * NOTE: If using a filtered time axis, see {@link Scheduler.data.TimeAxis#function-shiftNext} for more information.\n *\n * @param {Number} [amount] The number of units to jump forward\n */\n shiftNext(amount) {\n this.timeAxis.shiftNext(amount);\n }\n /**\n * Moves the time axis backward in time in units specified by the view preset `shiftUnit`, and by the amount\n * specified by the `shiftIncrement` config of the current view preset.\n *\n * NOTE: If using a filtered time axis, see {@link Scheduler.data.TimeAxis#function-shiftPrevious} for more\n * information.\n *\n * @param {Number} [amount] The number of units to jump backward\n */\n shiftPrevious(amount) {\n this.timeAxis.shiftPrevious(amount);\n }\n // This does not need a className on Widgets.\n // Each *Class* which doesn't need 'b-' + constructor.name.toLowerCase() automatically adding\n // to the Widget it's mixed in to should implement thus.\n get widgetClass() {}\n};\n", "import Popup from '../../../Core/widget/Popup.js';\n/**\n * @module Scheduler/view/recurrence/RecurrenceConfirmationPopup\n */\n/**\n * A confirmation dialog shown when modifying a recurring event or some of its occurrences.\n * For recurring events, the dialog informs the user that the change will be applied to all occurrences.\n *\n * For occurrences, the dialog lets the user choose if the change should affect all future occurrences,\n * or this occurrence only.\n *\n * Usage example:\n *\n * ```javascript\n * const confirmation = new RecurrenceConfirmationPopup();\n *\n * confirmation.confirm({\n * eventRecord : recurringEvent,\n * actionType : \"delete\",\n * changerFn : () => recurringEvent.remove(event)\n * });\n * ```\n *\n * @classtype recurrenceconfirmation\n * @extends Core/widget/Popup\n */\nexport default class RecurrenceConfirmationPopup extends Popup {\n static get $name() {\n return 'RecurrenceConfirmationPopup';\n }\n // Factoryable type name\n static get type() {\n return 'recurrenceconfirmation';\n }\n static get defaultConfig() {\n return {\n localizableProperties : [],\n align : 'b-t',\n autoShow : false,\n autoClose : false,\n closeAction : 'onRecurrenceClose',\n modal : true,\n centered : true,\n scrollAction : 'realign',\n constrainTo : globalThis,\n draggable : true,\n closable : true,\n floating : true,\n eventRecord : null,\n cls : 'b-sch-recurrenceconfirmation',\n bbar : {\n defaults : {\n localeClass : this\n },\n items : {\n changeSingleButton : {\n weight : 100,\n cls : 'b-raised',\n color : 'b-blue',\n text : 'L{update-only-this-btn-text}',\n onClick : 'up.onChangeSingleButtonClick'\n },\n changeMultipleButton : {\n weight : 200,\n color : 'b-green',\n text : 'L{Object.Yes}',\n onClick : 'up.onChangeMultipleButtonClick'\n },\n cancelButton : {\n weight : 300,\n color : 'b-gray',\n text : 'L{Object.Cancel}',\n onClick : 'up.onCancelButtonClick'\n }\n }\n }\n };\n }\n /**\n * Reference to the \"Apply changes to multiple occurrences\" button, if used\n * @property {Core.widget.Button}\n * @readonly\n */\n get changeMultipleButton() {\n return this.widgetMap.changeMultipleButton;\n }\n /**\n * Reference to the button that causes changing of the event itself only, if used\n * @property {Core.widget.Button}\n * @readonly\n */\n get changeSingleButton() {\n return this.widgetMap.changeSingleButton;\n }\n /**\n * Reference to the cancel button, if used\n * @property {Core.widget.Button}\n * @readonly\n */\n get cancelButton() {\n return this.widgetMap.cancelButton;\n }\n /**\n * Handler for \"Apply changes to multiple occurrences\" {@link #property-changeMultipleButton button}.\n * It calls {@link #function-processMultipleRecords} and then hides the dialog.\n */\n onChangeMultipleButtonClick() {\n this.processMultipleRecords();\n this.hide();\n }\n /**\n * Handler for the {@link #property-changeSingleButton button} that causes changing of the event itself only.\n * It calls {@link #function-processSingleRecord} and then hides the dialog.\n */\n onChangeSingleButtonClick() {\n this.processSingleRecord();\n this.hide();\n }\n /**\n * Handler for {@link #property-cancelButton cancel button}.\n * It calls `cancelFn` provided to {@link #function-confirm} call and then hides the dialog.\n */\n onCancelButtonClick() {\n this.cancelFn && this.cancelFn.call(this.thisObj);\n this.hide();\n }\n onRecurrenceClose() {\n if (this.cancelFn) {\n this.cancelFn.call(this.thisObj);\n }\n this.hide();\n }\n /**\n * Displays the confirmation.\n * Usage example:\n *\n * ```javascript\n * const popup = new RecurrenceConfirmationPopup();\n *\n * popup.confirm({\n * eventRecord,\n * actionType : \"delete\",\n * changerFn : () => eventStore.remove(record)\n * });\n * ```\n *\n * @param {Object} config The following config options are supported:\n * @param {Scheduler.model.EventModel} config.eventRecord Event being modified.\n * @param {'update'|'delete'} config.actionType Type of modification to be applied to the event. Can be\n * either \"update\" or \"delete\".\n * @param {Function} config.changerFn A function that should be called to apply the change to the event upon user\n * choice.\n * @param {Function} [config.thisObj] `changerFn` and `cancelFn` functions scope.\n * @param {Function} [config.cancelFn] Function called on `Cancel` button click.\n */\n confirm(config = {}) {\n const me = this;\n [\n 'actionType',\n 'eventRecord',\n 'title',\n 'html',\n 'changerFn',\n 'cancelFn',\n 'finalizerFn',\n 'thisObj'\n ].forEach(prop => {\n if (prop in config) me[prop] = config[prop];\n });\n me.updatePopupContent();\n return super.show(config);\n }\n updatePopupContent() {\n const\n me = this,\n { changeMultipleButton, changeSingleButton, cancelButton } = me.widgetMap,\n { eventRecord, actionType = 'update' } = me,\n isMaster = eventRecord?.isRecurring;\n if (isMaster) {\n changeMultipleButton.text = me.L('L{Object.Yes}');\n me.html = me.L(`${actionType}-all-message`);\n }\n else {\n changeMultipleButton.text = me.L(`${actionType}-further-btn-text`);\n me.html = me.L(`${actionType}-further-message`);\n }\n changeSingleButton.text = me.L(`${actionType}-only-this-btn-text`);\n cancelButton.text = me.L('L{Object.Cancel}');\n me.width = me.L('L{width}');\n me.title = me.L(`${actionType}-title`);\n }\n /**\n * Applies changes to multiple occurrences as reaction on \"Apply changes to multiple occurrences\"\n * {@link #property-changeMultipleButton button} click.\n */\n processMultipleRecords() {\n const { eventRecord, changerFn, thisObj, finalizerFn } = this;\n eventRecord.beginBatch();\n // Apply changes to the occurrence.\n // It is not joined to any stores, so this has no consequence.\n changerFn && this.callback(changerFn, thisObj, [eventRecord]);\n // afterChange will promote it to being an new recurring base because there's still recurrence\n eventRecord.endBatch();\n finalizerFn && this.callback(finalizerFn, thisObj, [eventRecord]);\n }\n /**\n * Applies changes to a single record by making it a \"real\" event and adding an exception to the recurrence.\n * The method is called as reaction on clicking the {@link #property-changeSingleButton button} that causes changing of the event itself only.\n */\n processSingleRecord() {\n const { eventRecord, changerFn, thisObj, finalizerFn } = this;\n eventRecord.beginBatch();\n let firstOccurrence;\n // If that's a master event get its very first occurrence\n if (eventRecord?.isRecurring) {\n eventRecord.recurrence.forEachOccurrence(eventRecord.startDate, null, (occurrence, isFirst, index) => {\n // index 1 is used by to the event itself, > 1 since there might be exceptions\n if (index > 1) {\n firstOccurrence = occurrence;\n return false;\n }\n });\n }\n // turn the 1st occurrence into a new \"master\" event\n firstOccurrence?.convertToRealEvent();\n // When the changes apply, because there's no recurrence, it will become an exception\n eventRecord.recurrence = null;\n // Apply changes to the occurrence.\n // It is not joined to any stores, so this has no consequence.\n changerFn && this.callback(changerFn, thisObj, [eventRecord]);\n // Must also change after the callback in case the callback sets the rule.\n // This will update the batch update data block to prevent it being set back to recurring.\n eventRecord.recurrenceRule = null;\n // afterChange will promote it to being an exception because there's no recurrence\n eventRecord.endBatch();\n finalizerFn && this.callback(finalizerFn, thisObj, [eventRecord]);\n }\n updateLocalization() {\n this.updatePopupContent();\n super.updateLocalization();\n }\n};\n// Register this widget type with its Factory\nRecurrenceConfirmationPopup.initClass();\nRecurrenceConfirmationPopup._$name = 'RecurrenceConfirmationPopup';", "import Base from '../../../Core/Base.js';\nimport '../recurrence/RecurrenceConfirmationPopup.js';\n/**\n * @module Scheduler/view/mixin/RecurringEvents\n */\n/**\n * A mixin that adds recurring events functionality to the Scheduler.\n *\n * The main purpose of the code in here is displaying a {@link Scheduler.view.recurrence.RecurrenceConfirmationPopup special confirmation}\n * on user mouse dragging/resizing/deleting recurring events and their occurrences.\n *\n * @mixin\n */\nexport default Target => class RecurringEvents extends (Target || Base) {\n static $name = 'RecurringEvents';\n static configurable = {\n /**\n * Enables showing occurrences of recurring events across the scheduler's time axis.\n *\n * Enables extra recurrence UI fields in the system-provided event editor (not in Scheduler Pro's task editor).\n * @config {Boolean}\n * @default\n * @category Scheduled events\n */\n enableRecurringEvents : false,\n recurrenceConfirmationPopup : {\n $config : ['lazy'],\n value : {\n type : 'recurrenceconfirmation'\n }\n }\n };\n construct(config) {\n super.construct(config);\n this.ion({\n beforeEventDropFinalize : 'onRecurrableBeforeEventDropFinalize',\n beforeEventResizeFinalize : 'onRecurrableBeforeEventResizeFinalize',\n beforeAssignmentDelete : 'onRecurrableAssignmentBeforeDelete'\n });\n }\n changeRecurrenceConfirmationPopup(recurrenceConfirmationPopup, oldRecurrenceConfirmationPopup) {\n // Widget.reconfigure reither reconfigures an existing instance, or creates a new one, or,\n // if the configuration is null, destroys the existing instance.\n const result = this.constructor.reconfigure(oldRecurrenceConfirmationPopup, recurrenceConfirmationPopup, 'recurrenceconfirmation');\n result.owner = this;\n return result;\n }\n findRecurringEventToConfirmDelete(eventRecords) {\n // show confirmation if we deal with at least one recurring event (or its occurrence)\n // and if the record is not being edited by event editor (since event editor has its own confirmation)\n return eventRecords.find(eventRecord => eventRecord.supportsRecurring && (eventRecord.isRecurring || eventRecord.isOccurrence));\n }\n onRecurrableAssignmentBeforeDelete({ assignmentRecords, context }) {\n const\n eventRecords = assignmentRecords.map(as => as.event),\n eventRecord = this.findRecurringEventToConfirmDelete(eventRecords);\n if (this.enableRecurringEvents && eventRecord) {\n this.recurrenceConfirmationPopup.confirm({\n actionType : 'delete',\n eventRecord,\n changerFn() {\n context.finalize(true);\n },\n cancelFn() {\n context.finalize(false);\n }\n });\n return false;\n }\n }\n onRecurrableBeforeEventDropFinalize({ context }) {\n if (this.enableRecurringEvents) {\n const\n { eventRecords } = context,\n recurringEvents = eventRecords.filter(eventRecord => eventRecord.supportsRecurring && (eventRecord.isRecurring || eventRecord.isOccurrence));\n if (recurringEvents.length) {\n context.async = true;\n this.recurrenceConfirmationPopup.confirm({\n actionType : 'update',\n eventRecord : recurringEvents[0],\n changerFn() {\n context.finalize(true);\n },\n cancelFn() {\n context.finalize(false);\n }\n });\n }\n }\n }\n onRecurrableBeforeEventResizeFinalize({ context }) {\n if (this.enableRecurringEvents) {\n const\n { eventRecord } = context,\n isRecurring = eventRecord.supportsRecurring && (eventRecord.isRecurring || eventRecord.isOccurrence);\n if (isRecurring) {\n context.async = true;\n this.recurrenceConfirmationPopup.confirm({\n actionType : 'update',\n eventRecord,\n changerFn() {\n context.finalize(true);\n },\n cancelFn() {\n context.finalize(false);\n }\n });\n }\n }\n }\n // Make sure occurrence cache is up-to-date when reassigning events\n onAssignmentChange({ action, records : assignments, changes }) {\n // Ignore changes coming from engine normalizing the eventId/resourceId => event/resource\n if (action === 'update' && changes.event && changes.resource && Object.keys(changes).length === 2) {\n return;\n }\n if (action !== 'dataset' && Array.isArray(assignments)) {\n for (const assignment of assignments) {\n if (assignment.event?.isRecurring && !assignment.event.isBatchUpdating) {\n assignment.event.removeOccurrences(this.eventStore);\n }\n }\n }\n }\n /**\n * Returns occurrences of the provided recurring event across the date range of this Scheduler.\n * @param {Scheduler.model.TimeSpan} recurringEvent Recurring event for which occurrences should be retrieved.\n * @returns {Scheduler.model.TimeSpan[]} Array of the provided timespans occurrences.\n *\n * __Empty if the passed event is not recurring, or has no occurrences in the date range.__\n *\n * __If the date range encompasses the start point, the recurring event itself will be the first entry.__\n * @category Data\n */\n getOccurrencesFor(recurringEvent) {\n return this.eventStore.getOccurrencesForTimeSpan(recurringEvent, this.timeAxis.startDate, this.timeAxis.endDate);\n }\n /**\n * Internal utility function to remove events. Used when pressing [DELETE] or [BACKSPACE] or when clicking the\n * delete button in the event editor. Triggers a preventable `beforeEventDelete` or `beforeAssignmentDelete` event.\n * @param {Scheduler.model.EventModel[]|Scheduler.model.AssignmentModel[]} eventRecords Records to remove\n * @param {Function} [callback] Optional callback executed after triggering the event but before deletion\n * @returns {Boolean} Returns `false` if the operation was prevented, otherwise `true`\n * @internal\n * @fires beforeEventDelete\n * @fires beforeAssignmentDelete\n */\n async removeEvents(eventRecords, callback = null, popupOwner = this) {\n const me = this;\n if (!me.readOnly && eventRecords.length) {\n const context = {\n finalize(removeRecord = true) {\n if (callback) {\n callback(removeRecord);\n }\n if (removeRecord !== false) {\n if (eventRecords.some(record => record.isOccurrence || record.event?.isOccurrence)) {\n eventRecords.forEach(record => record.isOccurrenceAssignment ? record.event.remove() : record.remove());\n }\n else {\n const store = eventRecords[0].isAssignment ? me.assignmentStore : me.eventStore;\n store.remove(eventRecords);\n }\n }\n }\n };\n let shouldFinalize;\n if (eventRecords[0].isAssignment) {\n /**\n * Fires before an assignment is removed. Can be triggered by user pressing [DELETE] or [BACKSPACE] or\n * by the event editor. Can for example be used to display a custom dialog to confirm deletion, in which\n * case records should be \"manually\" removed after confirmation:\n *\n * ```javascript\n * scheduler.on({\n * beforeAssignmentDelete({ assignmentRecords, context }) {\n * // Show custom confirmation dialog (pseudo code)\n * confirm.show({\n * listeners : {\n * onOk() {\n * // Remove the assignments on confirmation\n * context.finalize(true);\n * },\n * onCancel() {\n * // do not remove the assignments if \"Cancel\" clicked\n * context.finalize(false);\n * }\n * }\n * });\n *\n * // Prevent default behaviour\n * return false;\n * }\n * });\n * ```\n *\n * @event beforeAssignmentDelete\n * @param {Scheduler.view.Scheduler} source The Scheduler instance\n * @param {Scheduler.model.EventModel[]} eventRecords The records about to be deleted\n * @param {Object} context Additional removal context:\n * @param {Function} context.finalize Function to call to finalize the removal.\n * Used to asynchronously decide to remove the records or not. Provide `false` to the function to\n * prevent the removal.\n * @param {Boolean} [context.finalize.removeRecords = true] Provide `false` to the function to prevent\n * the removal.\n * @preventable\n */\n shouldFinalize = me.trigger('beforeAssignmentDelete', { assignmentRecords : eventRecords, context });\n }\n else {\n /**\n * Fires before an event is removed. Can be triggered by user pressing [DELETE] or [BACKSPACE] or by the\n * event editor. Return `false` to immediately veto the removal (or a `Promise` yielding `true` or `false`\n * for async vetoing).\n *\n * Can for example be used to display a custom dialog to confirm deletion, in which case\n * records should be \"manually\" removed after confirmation:\n *\n * ```javascript\n * scheduler.on({\n * beforeEventDelete({ eventRecords, context }) {\n * // Show custom confirmation dialog (pseudo code)\n * confirm.show({\n * listeners : {\n * onOk() {\n * // Remove the events on confirmation\n * context.finalize(true);\n * },\n * onCancel() {\n * // do not remove the events if \"Cancel\" clicked\n * context.finalize(false);\n * }\n * }\n * });\n *\n * // Prevent default behaviour\n * return false;\n * }\n * });\n * ```\n *\n * @event beforeEventDelete\n * @param {Scheduler.view.Scheduler} source The Scheduler instance\n * @typings source -> {Scheduler.view.Scheduler||any}\n * @param {Scheduler.model.EventModel[]} eventRecords The records about to be deleted\n * @param {Object} context Additional removal context:\n * @param {Function} context.finalize Function to call to finalize the removal.\n * Used to asynchronously decide to remove the records or not. Provide `false` to the function to\n * prevent the removal.\n * @param {Boolean} [context.finalize.removeRecords = true] Provide `false` to the function to prevent\n * the removal.\n * @preventable\n * @async\n */\n shouldFinalize = await me.trigger('beforeEventDelete', { eventRecords, context });\n }\n if (shouldFinalize !== false) {\n const recurringEventRecord = eventRecords.find(eventRecord => eventRecord.isRecurring || eventRecord.isOccurrence);\n if (recurringEventRecord) {\n me.recurrenceConfirmationPopup.owner = popupOwner;\n me.recurrenceConfirmationPopup.confirm({\n actionType : 'delete',\n eventRecord : recurringEventRecord,\n changerFn() {\n context.finalize(true);\n },\n cancelFn() {\n context.finalize(false);\n }\n });\n }\n else {\n context.finalize(true);\n }\n return true;\n }\n }\n return false;\n }\n // This does not need a className on Widgets.\n // Each *Class* which doesn't need 'b-' + constructor.name.toLowerCase() automatically adding\n // to the Widget it's mixed in to should implement thus.\n get widgetClass() {}\n};\n", "import Base from '../../../Core/Base.js';\nimport ObjectHelper from '../../../Core/helper/ObjectHelper.js';\n/**\n * @module Scheduler/view/mixin/TimelineEventRendering\n */\n/**\n * Functions to handle event rendering (EventModel -> dom elements).\n *\n * @mixin\n */\nexport default Target => class TimelineEventRendering extends (Target || Base) {\n static get $name() {\n return 'TimelineEventRendering';\n }\n //region Default config\n static get defaultConfig() {\n return {\n /**\n * When `true`, events are sized and positioned based on rowHeight, resourceMargin and barMargin settings.\n * Set this to `false` if you want to control height and vertical position using CSS instead.\n *\n * Note that events always get an absolute top position, but when this setting is enabled that position\n * will match row's top. To offset within the row using CSS, use `transform : translateY(y)`.\n *\n * @config {Boolean}\n * @default\n * @category Scheduled events\n */\n managedEventSizing : true,\n /**\n * The CSS class added to an event/assignment when it is newly created\n * in the UI and unsynced with the server.\n * @config {String}\n * @default\n * @private\n * @category CSS\n */\n generatedIdCls : 'b-sch-dirty-new',\n /**\n * The CSS class added to an event when it has unsaved modifications\n * @config {String}\n * @default\n * @private\n * @category CSS\n */\n dirtyCls : 'b-sch-dirty',\n /**\n * The CSS class added to an event when it is currently committing changes\n * @config {String}\n * @default\n * @private\n * @category CSS\n */\n committingCls : 'b-sch-committing',\n /**\n * The CSS class added to an event/assignment when it ends outside of the visible time range.\n * @config {String}\n * @default\n * @private\n * @category CSS\n */\n endsOutsideViewCls : 'b-sch-event-endsoutside',\n /**\n * The CSS class added to an event/assignment when it starts outside of the visible time range.\n * @config {String}\n * @default\n * @private\n * @category CSS\n */\n startsOutsideViewCls : 'b-sch-event-startsoutside',\n /**\n * The CSS class added to an event/assignment when it is not draggable.\n * @config {String}\n * @default\n * @private\n * @category CSS\n */\n fixedEventCls : 'b-sch-event-fixed'\n };\n }\n static configurable = {\n /**\n * Controls how much space to leave between stacked event bars in px.\n *\n * Value will be constrained by half the row height in horizontal mode.\n *\n * @prp {Number}\n * @default\n * @category Scheduled events\n */\n barMargin : 10,\n /**\n * Specify `true` to force rendered events/tasks to fill entire ticks. This only affects rendering, start\n * and end dates retain their value on the data level.\n *\n * When enabling `fillTicks` you should consider either disabling EventDrag/TaskDrag and EventResize/TaskResize,\n * or enabling {@link Scheduler/view/mixin/TimelineDateMapper#config-snap}. Otherwise their behaviour might not\n * be what a user expects.\n *\n * @prp {Boolean}\n * @default\n * @category Scheduled events\n */\n fillTicks : false,\n resourceMargin : null,\n /**\n * Event color used by default. Events and resources can specify their own color, with priority order being:\n * Event -> Resource -> Scheduler default.\n *\n * Specify `null` to not apply a default color and take control using custom CSS (an easily overridden color\n * will be used to make sure events are still visible).\n *\n * For available standard colors, see {@link Scheduler.model.mixin.EventModelMixin#typedef-EventColor}.\n *\n * @prp {EventColor} eventColor\n * @category Scheduled events\n */\n eventColor : 'green',\n /**\n * Event style used by default. Events and resources can specify their own style, with priority order being:\n * Event -> Resource -> Scheduler default. Determines the appearance of the event by assigning a CSS class\n * to it. Available styles are:\n *\n * * `'plain'` (default) - flat look\n * * `'border'` - has border in darker shade of events color\n * * `'colored'` - has colored text and wide left border in same color\n * * `'hollow'` - only border + text until hovered\n * * `'line'` - as a line with the text below it\n * * `'dashed'` - as a dashed line with the text below it\n * * `'minimal'` - as a thin line with small text above it\n * * `'rounded'` - minimalistic style with rounded corners\n * * `null` - do not apply a default style and take control using custom CSS (easily overridden basic styling will be used).\n *\n * In addition, there are two styles intended to be used when integrating with Bryntum Calendar. To match\n * the look of Calendar events, you can use:\n *\n * * `'calendar'` - a variation of the \"colored\" style matching the default style used by Calendar\n * * `'interday'` - a variation of the \"plain\" style, for interday events\n *\n * @prp {'plain'|'border'|'colored'|'hollow'|'line'|'dashed'|'minimal'|'rounded'|'calendar'|'interday'|null}\n * @default\n * @category Scheduled events\n */\n eventStyle : 'plain',\n /**\n * The width/height (depending on vertical / horizontal mode) of all the time columns.\n *\n * There is a limit for the tick size value. Its minimal allowed value is calculated so ticks would fit the\n * available space. Only applicable when {@link Scheduler.view.TimelineBase#config-forceFit} is set to\n * `false`. To set `tickSize` freely skipping that limitation please set\n * {@link Scheduler.view.TimelineBase#config-suppressFit} to `true`.\n *\n * @prp {Number}\n * @category Scheduled events\n */\n tickSize : null\n };\n //endregion\n //region Settings\n updateFillTicks(fillTicks) {\n if (!this.isConfiguring) {\n this.timeAxis.forceFullTicks = fillTicks && this.snap;\n this.refreshWithTransition();\n this.trigger('stateChange');\n }\n }\n changeBarMargin(margin) {\n ObjectHelper.assertNumber(margin, 'barMargin');\n // Run changeResourceMargin if its default value is null, to make sure resourceMarginObject is available\n if (this._resourceMargin == null) {\n this.changeResourceMargin(margin);\n }\n // bar margin should not exceed half of the row height\n if (this.isHorizontal && this.rowHeight) {\n return Math.min(Math.ceil(this.rowHeight / 2), margin);\n }\n return margin;\n }\n updateBarMargin() {\n if (this.rendered) {\n this.currentOrientation.onBeforeRowHeightChange();\n this.refreshWithTransition();\n this.trigger('stateChange');\n }\n }\n // Documented in SchedulerEventRendering to not show up in Gantt docs\n get resourceMargin() {\n return this._resourceMargin == null ? this.barMargin : this._resourceMargin;\n }\n changeResourceMargin(margin) {\n const me = this;\n if (typeof margin === 'number') {\n // resource margin should not exceed half of the row height\n if (me.isHorizontal && me.rowHeight) {\n margin = Math.min(Math.ceil(me.rowHeight / 2), margin);\n }\n me.resourceMarginObject = {\n start : margin,\n end : margin,\n total : margin * 2\n };\n return margin;\n }\n if (!margin?.start) {\n margin.start = 0;\n }\n if (!margin?.end) {\n margin.end = 0;\n }\n // resource margin should not exceed half of the row height\n if (me.isHorizontal && me.rowHeight) {\n margin.start = me.rowHeight < margin.start + margin.end ? Math.ceil(me.rowHeight / 2) : margin.start;\n margin.end = me.rowHeight < margin.start + margin.end ? Math.ceil(me.rowHeight / 2) : margin.end;\n }\n me.resourceMarginObject = ObjectHelper.assign({\n total : margin.start + margin.end\n }, margin);\n return margin;\n }\n updateResourceMargin() {\n const me = this;\n if (me.rendered) {\n me.currentOrientation.onBeforeRowHeightChange();\n me.refreshWithTransition();\n }\n }\n changeTickSize(width) {\n ObjectHelper.assertNumber(width, 'tickSize');\n return width;\n }\n updateTickSize(width) {\n this.timeAxisViewModel.tickSize = width;\n }\n get tickSize() {\n return this.timeAxisViewModel.tickSize;\n }\n /**\n * Predefined event colors, useful in combos etc.\n * @type {String[]}\n * @category Scheduled events\n */\n static get eventColors() {\n // These are the colors available by default for Scheduler and Gantt\n // They classes are located in eventstyles.scss\n return ['red', 'pink', 'purple', 'magenta', 'violet', 'indigo', 'blue', 'cyan', 'teal', 'green', 'gantt-green', 'lime', 'yellow', 'orange', 'deep-orange', 'gray', 'light-gray'];\n }\n /**\n * Predefined event styles , useful in combos etc.\n * @type {String[]}\n * @category Scheduled events\n */\n static get eventStyles() {\n return ['plain', 'border', 'hollow', 'colored', 'line', 'dashed', 'minimal', 'rounded'];\n }\n updateEventStyle(style) {\n if (!this.isConfiguring) {\n this.refreshWithTransition();\n this.trigger('stateChange');\n }\n }\n updateEventColor(color) {\n if (!this.isConfiguring) {\n this.refreshWithTransition();\n this.trigger('stateChange');\n }\n }\n //endregion\n // This does not need a className on Widgets.\n // Each *Class* which doesn't need 'b-' + constructor.name.toLowerCase() automatically adding\n // to the Widget it's mixed in to should implement thus.\n get widgetClass() {}\n};\n", "import Base from '../../../Core/Base.js';\nimport Rectangle from '../../../Core/helper/util/Rectangle.js';\nimport DateHelper from '../../../Core/helper/DateHelper.js';\nimport Scroller from '../../../Core/helper/util/Scroller.js';\nimport DomHelper from '../../../Core/helper/DomHelper.js';\nimport TimelineZoomable from './TimelineZoomable.js';\n/**\n * @module Scheduler/view/mixin/TimelineScroll\n */\nconst\n maintainVisibleStart = {\n maintainVisibleStart : true\n },\n defaultScrollOptions = {\n block : 'nearest'\n };\n/**\n * Functions for scrolling to events, dates etc.\n *\n * Note: the mixin applies {@link Scheduler/view/mixin/TimelineZoomable} mixin if it's not applied yet.\n *\n * @mixin\n */\nexport default Target => class TimelineScroll extends (Target || Base).mixin(\n // the mixin overrides TimelineZoomable method so should be applied after it\n TimelineZoomable\n) {\n static $name = 'TimelineScroll';\n static configurable = {\n /**\n * This config defines the size of the start and end invisible parts of the timespan when {@link #config-infiniteScroll} set to `true`.\n *\n * It should be provided as a coefficient, which will be multiplied by the size of the scheduling area.\n *\n * For example, if `bufferCoef` is `5` and the panel view width is 200px then the timespan will be calculated to\n * have approximately 1000px (`5 * 200`) to the left and 1000px to the right of the visible area, resulting\n * in 2200px of totally rendered content.\n *\n * @config {Number}\n * @category Infinite scroll\n * @default\n */\n bufferCoef : 5,\n /**\n * This config defines the scroll limit, which, when exceeded will cause a timespan shift.\n * The limit is calculated as the `panelWidth * {@link #config-bufferCoef} * bufferThreshold`. During scrolling, if the left or right side\n * has less than that of the rendered content - a shift is triggered.\n *\n * For example if `bufferCoef` is `5` and the panel view width is 200px and `bufferThreshold` is 0.2, then the timespan\n * will be shifted when the left or right side has less than 200px (5 * 200 * 0.2) of content.\n * @config {Number}\n * @category Infinite scroll\n * @default\n */\n bufferThreshold : 0.2,\n /**\n * Configure as `true` to automatically adjust the panel timespan during scrolling in the time dimension,\n * when the scroller comes close to the start/end edges.\n *\n * The actually rendered timespan in this mode (and thus the amount of HTML in the DOM) is calculated based\n * on the {@link #config-bufferCoef} option, and is thus not controlled by the {@link Scheduler/view/TimelineBase#config-startDate}\n * and {@link Scheduler/view/TimelineBase#config-endDate} configs. The moment when the timespan shift\n * happens is determined by the {@link #config-bufferThreshold} value.\n *\n * To specify initial point in time to view, supply the\n * {@link Scheduler/view/TimelineBase#config-visibleDate} config.\n *\n * @config {Boolean} infiniteScroll\n * @category Infinite scroll\n * @default\n */\n infiniteScroll : false\n };\n //region TimelineZoomable injections\n onZoomToSpan({ startDate }) {\n if (this.infiniteScroll) {\n this.scrollToDate(startDate, { block : 'start' });\n }\n }\n calculateOptimalDateRange(centerDate, viewportSize, viewPreset) {\n if (this.infiniteScroll) {\n if (this.zoomKeepsOriginalTimespan) {\n const { startDate, endDate } = this.timeAxis;\n return { startDate, endDate };\n }\n return this.calculateInfiniteScrollingDateRange(centerDate, true);\n }\n return super.calculateOptimalDateRange(...arguments);\n }\n //endregion TimelineZoomable injections\n initScroll() {\n const\n me = this,\n {\n isHorizontal,\n visibleDate\n } = me;\n super.initScroll();\n const { scrollable } = isHorizontal ? me.timeAxisSubGrid : me;\n scrollable.ion({\n scroll : 'onTimelineScroll',\n thisObj : me\n });\n // Ensure the TimeAxis starts life at the correct size with buffer zones\n // outside the visible window.\n if (me.infiniteScroll) {\n // If we have infiniteScroll-partners we don't reconfigure the timeAxis for each view\n // So we need to trigger timeAxisViewModel.update manually to refresh the view\n if (me.partneredWith?.values.some(partner => partner.infiniteScroll)) {\n // Use exact subpixel available space so that tick size calculation is correct.\n const availableSpace = scrollable.element.getBoundingClientRect()[me.isHorizontal ? 'width' : 'height'];\n me.timeAxisViewModel.update(availableSpace, false, true);\n }\n // no infiniteScroll partners involved - calculate & set timespan\n else {\n const\n setTimeSpanOptions = visibleDate ? { ...visibleDate, visibleDate : visibleDate.date } : { visibleDate : me.viewportCenterDate, block : 'center' },\n { startDate, endDate } = me.calculateInfiniteScrollingDateRange(setTimeSpanOptions.visibleDate, setTimeSpanOptions.block === 'center');\n // Don't ask to maintain visible start - we're initializing - there's no visible start yet.\n // If there's a visibleDate set, it will execute its scroll on paint.\n me.setTimeSpan(\n startDate,\n endDate,\n setTimeSpanOptions\n );\n }\n }\n }\n /**\n * A {@link Core.helper.util.Scroller} which scrolls the time axis in whatever {@link Scheduler.view.Scheduler#config-mode} the\n * Scheduler is configured, either `horizontal` or `vertical`.\n *\n * The width and height dimensions are replaced by `size`. So this will expose the following properties:\n *\n * - `clientSize` The size of the time axis viewport.\n * - `scrollSize` The full scroll size of the time axis viewport\n * - `position` The position scrolled to along the time axis viewport\n *\n * @property {Core.helper.util.Scroller}\n * @readonly\n * @category Scrolling\n */\n get timelineScroller() {\n const me = this;\n if (!me.scrollInitialized) {\n me.initScroll();\n }\n return me._timelineScroller || (me._timelineScroller = new TimelineScroller({\n widget : me,\n scrollable : me.isHorizontal ? me.timeAxisSubGrid.scrollable : me.scrollable,\n isHorizontal : me.isHorizontal\n }));\n }\n /**\n * Used to calculate the range to extend the TimeAxis to during infinite scroll.\n * @param {Date} date\n * @param {Boolean} centered\n * @param {Scheduler.preset.ViewPreset} [preset] Optional, the preset for which to calculate the range.\n * defaults to the currently active ViewPreset\n * @returns {Object} `{ startDate, endDate }`\n * @internal\n */\n calculateInfiniteScrollingDateRange(date, centered, preset = this.timeAxisViewModel.viewPreset) {\n const\n {\n timeAxis,\n availableSpace\n } = this.timeAxisViewModel,\n // If the TimeAxis is filtered, the range we ask for to get the required number of\n // *visible* ticks will have to be larger by this factor which is the ration of\n // real ticks to visible ticks.\n factor = Math.ceil(timeAxis.allCount / timeAxis.count),\n {\n bufferCoef\n } = this,\n {\n leafUnit,\n leafIncrement,\n topUnit,\n topIncrement,\n tickSize\n } = preset,\n // If the units are the same and the increments are integer, snap to the top header's unit & increment\n useTop = leafUnit === topUnit && Math.round(topIncrement) === topIncrement && Math.round(leafIncrement) === leafIncrement,\n snapSize = useTop ? topIncrement : leafIncrement,\n snapUnit = useTop ? topUnit : leafUnit;\n // if provided date is the central point on the timespan\n if (centered) {\n const halfSpan = Math.ceil((availableSpace * bufferCoef + (availableSpace / 2)) / tickSize) * factor;\n return {\n startDate : timeAxis.floorDate(DateHelper.add(date, -halfSpan * leafIncrement, leafUnit), false, snapUnit, snapSize),\n endDate : timeAxis.ceilDate(DateHelper.add(date, halfSpan * leafIncrement, leafUnit), false, snapUnit, snapSize)\n };\n }\n // if provided date is the left coordinate of the visible timespan area\n else {\n const bufferedTicks = Math.ceil(availableSpace * bufferCoef / tickSize) * factor;\n return {\n startDate : timeAxis.floorDate(DateHelper.add(date, -bufferedTicks * leafIncrement, leafUnit), false, snapUnit, snapSize),\n endDate : timeAxis.ceilDate(DateHelper.add(date, Math.ceil((availableSpace / tickSize + bufferedTicks) * leafIncrement), leafUnit), false, snapUnit, snapSize)\n };\n }\n }\n doDestroy() {\n this._timelineScroller?.destroy();\n super.doDestroy();\n }\n onTimelineScroll() {\n // On scroll, check if we are nearing the end to see if the sliding window needs moving.\n // onSchedulerHorizontalScroll is delayed to animationFrame\n if (this.infiniteScroll) {\n this.checkTimeAxisScroll();\n }\n }\n checkTimeAxisScroll() {\n const\n me = this,\n scrollable = me.timelineScroller,\n {\n position,\n clientSize\n } = scrollable,\n requiredSize = clientSize * me.bufferCoef,\n limit = requiredSize * me.bufferThreshold,\n maxScroll = scrollable.maxPosition,\n { style } = me.timeAxisSubGrid.virtualScrollerElement,\n closeToStart = position < limit,\n closeToEnd = maxScroll - position < limit;\n // if scroll violates limits let's shift timespan\n if (closeToStart || closeToEnd) {\n // If they were dragging the thumb, this must be a one-time thing. They *must* lose contact\n // with the thumb when the window shift occurs and the thumb zooms back to the center.\n // Changing for a short time to overflow:hidden terminates the thumb drag.\n // They can start again from the center, the reset happens very quickly.\n style.overflow = 'hidden';\n style.pointerEvents = 'none';\n // Avoid content height changing when scrollbar disappears\n style.paddingBottom = `${DomHelper.scrollBarWidth}px`;\n me.setTimeout(() => {\n style.overflow = '';\n style.paddingBottom = '';\n style.pointerEvents = '';\n }, 100);\n let datePos;\n // Both ends too near, we will be centered in the new, larger date range\n if (closeToStart && closeToEnd) {\n // Choose center\n datePos = scrollable.position + clientSize / 2;\n }\n else if (closeToStart) {\n // Keep the end date in view\n datePos = scrollable.position + clientSize;\n }\n else {\n // keep the start date in view\n datePos = scrollable.position;\n }\n // Round using floor so that the tick's time will be in working time.\n // The centered param is true if *both* ends are too close for comfort.\n me.shiftToDate(me.getDateFromCoordinate(datePos, 'floor', true, false, true), closeToStart && closeToEnd);\n }\n }\n shiftToDate(date, centered) {\n const newRange = this.calculateInfiniteScrollingDateRange(date, centered);\n // this will trigger a refresh (`refreshKeepingScroll`) which will perform `restoreScrollState` and sync the scrolling position\n this.setTimeSpan(newRange.startDate, newRange.endDate, centered ? (centered === true ? {\n visibleDate : this.viewportCenterDate,\n block : 'center'\n } : centered) : maintainVisibleStart);\n }\n // If we change to infinite scrolling dynamically, it should create the buffer zones.\n updateInfiniteScroll(infiniteScroll) {\n // At construction time, this is handled in initScroll.\n // This is just here to handle dynamic updates.\n if (!this.isConfiguring && infiniteScroll) {\n this.checkTimeAxisScroll();\n }\n }\n //region Scroll to date\n /**\n * Scrolls the timeline \"tick\" encapsulating the passed `Date` into view according to the passed options.\n * @param {Date} date The date to which to scroll the timeline\n * @param {BryntumScrollOptions} [options] How to scroll.\n * @returns {Promise} A Promise which resolves when the scrolling is complete.\n * @category Scrolling\n */\n async scrollToDate(date, options = {}) {\n const\n me = this,\n {\n timeAxis,\n visibleDateRange,\n infiniteScroll\n } = me,\n {\n unit,\n increment\n } = timeAxis,\n edgeOffset = options.edgeOffset || 0,\n visibleWidth = DateHelper.ceil(visibleDateRange.endDate, increment + ' ' + unit) - DateHelper.floor(visibleDateRange.startDate, increment + ' ' + unit),\n direction = date > me.viewportCenterDate ? 1 : -1,\n extraScroll = (infiniteScroll ? visibleWidth * me.bufferCoef * me.bufferThreshold : (options.block === 'center' ? visibleWidth / 2 : (edgeOffset ? me.getMilliSecondsPerPixelForZoomLevel(me.viewPreset) * edgeOffset : 0))) * direction,\n visibleDate = new Date(date.getTime() + extraScroll),\n shiftDirection = visibleDate > timeAxis.endDate ? 1 : visibleDate < timeAxis.startDate ? -1 : 0;\n // Required visible date outside TimeAxis and infinite scrolling, that has opinions about how\n // much scroll range has to be created after the target date.\n if (shiftDirection && me.infiniteScroll) {\n // need to wait for a possible scroll event to happen, which will update the timeline's scroll state\n await me.nextAnimationFrame();\n me.shiftToDate(new Date(date - extraScroll), null, true);\n // shift to date could trigger a native browser async scroll out of our control. If a scroll\n // happens during scrollToCoordinate, the scrolling is cancelled so we wait a bit here\n await me.nextAnimationFrame();\n }\n const\n scrollerViewport = me.timelineScroller.viewport,\n localCoordinate = me.getCoordinateFromDate(date, true),\n // Available space can be less than tick size (Export.t.js in Gantt)\n width = Math.min(me.timeAxisViewModel.tickSize, me.timeAxisViewModel.availableSpace),\n target = me.isHorizontal\n // In RTL coordinate is for the right edge of the tick, so we need to subtract width\n ? new Rectangle(me.getCoordinateFromDate(date, false) - (me.rtl ? width : 0), scrollerViewport.y, width, scrollerViewport.height)\n : new Rectangle(scrollerViewport.x, me.getCoordinateFromDate(date, false), scrollerViewport.width, me.timeAxisViewModel.tickSize);\n await me.scrollToCoordinate(localCoordinate, target, date, options);\n }\n /**\n * Scrolls to current time.\n * @param {BryntumScrollOptions} [options] How to scroll.\n * @returns {Promise} A Promise which resolves when the scrolling is complete.\n * @category Scrolling\n */\n scrollToNow(options = {}) {\n return this.scrollToDate(new Date(), options);\n }\n /**\n * Used by {@link #function-scrollToDate} to scroll to correct coordinate.\n * @param {Number} localCoordinate Coordinate to scroll to\n * @param {Element|Core.helper.util.Rectangle} target The target\n * @param {Date} date Date to scroll to, used for reconfiguring the time axis\n * @param {BryntumScrollOptions} [options] How to scroll.\n * @returns {Promise} A Promise which resolves when the scrolling is complete.\n * @private\n * @category Scrolling\n */\n async scrollToCoordinate(localCoordinate, target, date, options = {}) {\n const me = this;\n // Not currently have this date in a timeaxis. Ignore negative scroll in weekview, it can be just 'filtered' with\n // startTime/endTime config\n if (localCoordinate < 0) {\n // adjust the timeaxis first\n const\n visibleSpan = me.endDate - me.startDate,\n { unit, increment } = me.timeAxis,\n newStartDate = DateHelper.floor(new Date(date.getTime() - (visibleSpan / 2)), increment + ' ' + unit),\n newEndDate = DateHelper.add(newStartDate, visibleSpan);\n // We're trying to reconfigure time span to current dates, which means we are as close to center as it\n // could be. Do nothing then.\n // covered by 1102_panel_api\n if (newStartDate - me.startDate !== 0 && newEndDate - me.endDate !== 0) {\n await me.setTimeSpan(newStartDate, newEndDate);\n return me.scrollToDate(date, options);\n }\n return;\n }\n await me.timelineScroller.scrollIntoView(target, options);\n // Horizontal scroll is triggered on next frame in SubGrid.js, view is not up to date yet. Resolve on next frame\n return !me.isDestroyed && me.nextAnimationFrame();\n }\n //endregion\n //region Relative scrolling\n // These methods are important to users because although they are mixed into the top level Grid/Scheduler,\n // for X scrolling the explicitly target the SubGrid that holds the scheduler.\n /**\n * Get/set the `scrollLeft` value of the SubGrid that holds the scheduler.\n *\n * This may be __negative__ when the writing direction is right-to-left.\n * @property {Number}\n * @category Scrolling\n */\n set scrollLeft(left) {\n this.timeAxisSubGrid.scrollable.element.scrollLeft = left;\n }\n get scrollLeft() {\n return this.timeAxisSubGrid.scrollable.element.scrollLeft;\n }\n /**\n * Get/set the writing direction agnostic horizontal scroll position.\n *\n * This is always the __positive__ offset from the scroll origin whatever the writing\n * direction in use.\n *\n * Applies to the SubGrid that holds the scheduler\n * @property {Number}\n * @category Scrolling\n */\n set scrollX(x) {\n this.timeAxisSubGrid.scrollable.x = x;\n }\n get scrollX() {\n return this.timeAxisSubGrid.scrollable.x;\n }\n /**\n * Get/set vertical scroll\n * @property {Number}\n * @category Scrolling\n */\n set scrollTop(top) {\n this.scrollable.y = top;\n }\n get scrollTop() {\n return this.scrollable.y;\n }\n /**\n * Horizontal scrolling. Applies to the SubGrid that holds the scheduler\n * @param {Number} x\n * @param {BryntumScrollOptions|Boolean} [options] How to scroll. May be passed as `true` to animate.\n * @returns {Promise} A promise which is resolved when the scrolling has finished.\n * @category Scrolling\n */\n scrollHorizontallyTo(coordinate, options = true) {\n return this.timeAxisSubGrid.scrollable.scrollTo(coordinate, null, options);\n }\n /**\n * Vertical scrolling\n * @param {Number} y\n * @param {BryntumScrollOptions|Boolean} [options] How to scroll. May be passed as `true` to animate.\n * @returns {Promise} A promise which is resolved when the scrolling has finished.\n * @category Scrolling\n */\n scrollVerticallyTo(y, options = true) {\n return this.scrollable.scrollTo(null, y, options);\n }\n /**\n * Scrolls the subgrid that contains the scheduler\n * @param {Number} x\n * @param {BryntumScrollOptions|Boolean} [options] How to scroll. May be passed as `true` to animate.\n * @returns {Promise} A promise which is resolved when the scrolling has finished.\n * @category Scrolling\n */\n scrollTo(x, options = true) {\n return this.timeAxisSubGrid.scrollable.scrollTo(x, null, options);\n }\n //endregion\n // This does not need a className on Widgets.\n // Each *Class* which doesn't need 'b-' + constructor.name.toLowerCase() automatically adding\n // to the Widget it's mixed in to should implement thus.\n get widgetClass() {}\n};\n// Internal class used to interrogate and manipulate the timeline scroll position.\n// This delegates all operations to the appropriate Scroller, horizontal or vertical.\nclass TimelineScroller extends Scroller {\n static get configurable() {\n return {\n position : null,\n x : null,\n y : null\n };\n }\n // This class is passive about configuring the element.\n // It has no opinions about *how* the overflow is handled.\n updateOverflowX() {}\n updateOverflowY() {}\n onScroll(e) {\n super.onScroll(e);\n this._position = null;\n }\n syncPartners(force) {\n this.scrollable.syncPartners(force);\n }\n updatePosition(position) {\n this.scrollable[this.isHorizontal ? 'x' : 'y'] = position;\n }\n get viewport() {\n return this.scrollable.viewport;\n }\n get position() {\n return this._position = this.scrollable[this.isHorizontal ? 'x' : 'y'];\n }\n get clientSize() {\n return this.scrollable[`client${this.isHorizontal ? 'Width' : 'Height'}`];\n }\n get scrollSize() {\n return this.scrollable[`scroll${this.isHorizontal ? 'Width' : 'Height'}`];\n }\n get maxPosition() {\n return this.scrollable[`max${this.isHorizontal ? 'X' : 'Y'}`];\n }\n scrollTo(position, options) {\n return this.isHorizontal ? this.scrollable.scrollTo(position, null, options) : this.scrollable.scrollTo(null, position, options);\n }\n scrollBy(xDelta = 0, yDelta = 0, options = defaultScrollOptions) {\n // Use the correct delta by default, but if it's zero, accommodate axis error.\n return this.isHorizontal ? this.scrollable.scrollBy(xDelta || yDelta, 0, options) : this.scrollable.scrollBy(0, yDelta || xDelta, options);\n }\n scrollIntoView() {\n return this.scrollable.scrollIntoView(...arguments);\n }\n // We accommodate mistakes. Setting X and Y sets the appropriate scroll axis position\n changeX(x) {\n this.position = x;\n }\n changeY(y) {\n this.position = y;\n }\n get x() {\n return this.position;\n }\n set x(x) {\n this.scrollable[this.isHorizontal ? 'x' : 'y'] = x;\n }\n get y() {\n return this.position;\n }\n set y(y) {\n this.scroller[this.isHorizontal ? 'x' : 'y'] = y;\n }\n get clientWidth() {\n return this.clientSize;\n }\n get clientHeight() {\n return this.clientSize;\n }\n get scrollWidth() {\n return this.scrollSize;\n }\n get scrollHeight() {\n return this.scrollSize;\n }\n get maxX() {\n return this.maxPosition;\n }\n get maxY() {\n return this.maxPosition;\n }\n}\n", "import Base from '../../../Core/Base.js';\nimport ObjectHelper from '../../../Core/helper/ObjectHelper.js';\n/**\n * @module Scheduler/view/mixin/TimelineState\n */\nconst copyProperties = [\n 'barMargin'\n];\n/**\n * Mixin for Timeline base that handles state. It serializes the following timeline properties:\n *\n * * barMargin\n * * zoomLevel\n *\n * See {@link Grid.view.mixin.GridState} and {@link Core.mixin.State} for more information on state.\n *\n * @mixin\n */\nexport default Target => class TimelineState extends (Target || Base) {\n static get $name() {\n return 'TimelineState';\n }\n /**\n * Gets or sets timeline's state. Check out {@link Scheduler.view.mixin.TimelineState} mixin for details.\n * @member {Object} state\n * @property {Object[]} state.columns\n * @property {Number} state.rowHeight\n * @property {Object} state.scroll\n * @property {Number} state.scroll.scrollLeft\n * @property {Number} state.scroll.scrollTop\n * @property {Array} state.selectedRecords\n * @property {String} state.style\n * @property {String} state.selectedCell\n * @property {Object} state.store\n * @property {Object} state.store.sorters\n * @property {Object} state.store.groupers\n * @property {Object} state.store.filters\n * @property {Object} state.subGrids\n * @property {Number} state.barMargin\n * @property {Number} state.zoomLevel\n * @category State\n */\n /**\n * Get timeline's current state for serialization. State includes rowHeight, headerHeight, readOnly, selectedCell,\n * selectedRecordId, column states and store state etc.\n * @returns {Object} State object to be serialized\n * @private\n */\n getState() {\n const\n me = this,\n state = ObjectHelper.copyProperties(super.getState(), me, copyProperties);\n state.zoomLevel = me.zoomLevel;\n state.zoomLevelOptions = {\n startDate : me.startDate,\n endDate : me.endDate,\n // With infinite scroll reading viewportCenterDate too early will lead to exception\n centerDate : !me.infiniteScroll || me.timeAxisViewModel.availableSpace ? me.viewportCenterDate : undefined,\n width : me.tickSize\n };\n return state;\n }\n /**\n * Apply previously stored state.\n * @param {Object} state\n * @private\n */\n applyState(state) {\n const me = this;\n me.suspendRefresh();\n ObjectHelper.copyProperties(me, state, copyProperties);\n super.applyState(state);\n if (state.zoomLevel != null) {\n // Do not restore left scroll, infinite scroll should do all the work\n if (me.infiniteScroll) {\n if (state?.scroll?.scrollLeft) {\n state.scroll.scrollLeft = {};\n }\n }\n if (me.isPainted) {\n me.zoomToLevel(state.zoomLevel, state.zoomLevelOptions);\n }\n else {\n me._zoomAfterPaint = { zoomLevel : state.zoomLevel, zoomLevelOptions : state.zoomLevelOptions };\n }\n }\n me.resumeRefresh(true, false);\n }\n onInternalPaint(...args) {\n super.onInternalPaint(...args);\n if (this._zoomAfterPaint) {\n const { zoomLevel, zoomLevelOptions } = this._zoomAfterPaint;\n this.zoomToLevel(zoomLevel, zoomLevelOptions);\n delete this._zoomAfterPaint;\n }\n }\n // This does not need a className on Widgets.\n // Each *Class* which doesn't need 'b-' + constructor.name.toLowerCase() automatically adding\n // to the Widget it's mixed in to should implement thus.\n get widgetClass() {}\n};\n", "import GridHeader from '../../Grid/view/Header.js';\n/**\n * @module Scheduler/view/Header\n */\n/**\n * Custom header subclass which handles the existence of the special TimeAxisColumn\n *\n * @extends Grid/view/Header\n * @private\n */\nexport default class Header extends GridHeader {\n static get $name() {\n return 'SchedulerHeader';\n }\n refreshContent() {\n // Only render contents into the header once as it contains the special rendering of the TimeAxisColumn\n // In case ResizeObserver polyfill is used headers element will have resize monitors inserted and we should\n // take that into account\n // https://github.com/bryntum/support/issues/3444\n if (!this.headersElement?.querySelector('.b-sch-timeaxiscolumn')) {\n super.refreshContent();\n }\n }\n}\nHeader._$name = 'Header';", "import SubGrid from '../../Grid/view/SubGrid.js';\nimport Header from './Header.js';\nimport DomHelper from '../../Core/helper/DomHelper.js';\n/**\n * @module Scheduler/view/TimeAxisSubGrid\n */\n/**\n * Widget that encapsulates the SubGrid part of the scheduler which houses the timeline view.\n * @extends Grid/view/SubGrid\n * @private\n */\nexport default class TimeAxisSubGrid extends SubGrid {\n static get $name() {\n return 'TimeAxisSubGrid';\n }\n // Factoryable type name\n static get type() {\n return 'timeaxissubgrid';\n }\n static get configurable() {\n return {\n // A Scheduler's SubGrid doesn't accept external columns moving in\n sealedColumns : true,\n // Use Scheduler's Header class\n headerClass : Header\n };\n }\n startConfigure(config) {\n const { grid : scheduler } = config;\n // Scheduler references its TimeAxisSubGrid instance through this property.\n scheduler.timeAxisSubGrid = this;\n super.startConfigure(config);\n if (scheduler.isHorizontal) {\n config.header = {\n cls : {\n 'b-sticky-headers' : scheduler.stickyHeaders\n }\n };\n // We don't use what the GridSubGrids mixin tells us to.\n // We use the Scheduler's Header class.\n delete config.headerClass;\n }\n // If user have not specified a width or flex for scheduler region, default to flex=1\n if (!('flex' in config || 'width' in config)) {\n config.flex = 1;\n }\n }\n changeScrollable() {\n const\n me = this,\n scrollable = super.changeScrollable(...arguments);\n // TimeAxisSubGrid's X axis is stretched by its canvas.\n // We don't need the Scroller's default stretching implementation.\n if (scrollable) {\n Object.defineProperty(scrollable, 'scrollWidth', {\n get() {\n return this.element?.scrollWidth ?? 0;\n },\n set() {\n me.positionDirty = true;\n // Setting the scroll width to be wide just updates the canvas side in Scheduler.\n // We do not need the Scroller's default stretcher element to be added.\n // Note that \"me\" here is the TimeAxisSubGrid, so we are calling Scheduler.\n me.grid.updateCanvasSize();\n }\n });\n }\n return scrollable;\n }\n handleHorizontalScroll(addCls = true) {\n // Swallow scroll syncing calls that happen during view preset changes, that process triggers multiple when\n // it first changes tickWidth, then scrolls to center and then an additional sync on scroll end\n if (!this.grid._viewPresetChanging) {\n super.handleHorizontalScroll(addCls);\n }\n }\n /**\n * This is an event handler triggered when the TimeAxisSubGrid changes size.\n * Its height changes when content height changes, and that is not what we are\n * interested in here. If the *width* changes, that means the visible viewport\n * has changed size.\n * @param {HTMLElement} element\n * @param {Number} width\n * @param {Number} height\n * @param {Number} oldWidth\n * @param {Number} oldHeight\n * @private\n */\n onInternalResize(element, width, height, oldWidth, oldHeight) {\n const me = this;\n // Call super first, to clear cached width / height\n super.onInternalResize(...arguments);\n // We, as the TimeAxisSubGrid dictate the scheduler viewport width\n if (me.isPainted && width !== oldWidth) {\n const\n scheduler = me.grid,\n bodyHeight = scheduler._bodyRectangle.height,\n // Avoid ResizeObserver errors when this operation may create a scrollbar\n shouldSuspend = me.monitorResize && DomHelper.scrollBarWidth && width < oldWidth;\n if (shouldSuspend) {\n me.monitorResize = false;\n }\n scheduler.onSchedulerViewportResize(width, bodyHeight, oldWidth, bodyHeight);\n // Revert to monitoring asap.\n // Changed to revert earlier because of issues when changing width programmatically\n // This is to avoid \"ResizeObserver loop completed with undelivered notifications.\"\n if (shouldSuspend) {\n me.queueMicrotask(() => me.monitorResize = true);\n }\n }\n }\n get headerScrollWidth() {\n return this.grid.isVertical ? super.headerScrollWidth : this.grid.timeAxisViewModel.totalSize;\n }\n // When restoring state we need to update time axis size immediately, resize event is not triggered fast enough to\n // restore center date consistently\n clearWidthCache() {\n super.clearWidthCache();\n // Check if we are in horizontal mode\n if (this.owner.isHorizontal) {\n this.owner.updateViewModelAvailableSpace(this.width);\n }\n }\n async expand() {\n const { owner } = this;\n await super.expand();\n if (owner.isPainted) {\n owner.timeAxisViewModel.update(this.width, false, true);\n }\n }\n}\n// Register this widget type with its Factory\nTimeAxisSubGrid.initClass();\nTimeAxisSubGrid._$name = 'TimeAxisSubGrid';", "import Base from '../../Core/Base.js';\nimport GlobalEvents from '../../Core/GlobalEvents.js';\nimport GridBase from '../../Grid/view/GridBase.js';\nimport DateHelper from '../../Core/helper/DateHelper.js';\nimport DomHelper from '../../Core/helper/DomHelper.js';\nimport StringHelper from '../../Core/helper/StringHelper.js';\nimport FunctionHelper from '../../Core/helper/FunctionHelper.js';\nimport ResizeMonitor from '../../Core/helper/ResizeMonitor.js';\nimport Collection from '../../Core/util/Collection.js';\nimport IdHelper from '../../Core/helper/IdHelper.js';\nimport ObjectHelper from '../../Core/helper/ObjectHelper.js';\nimport VersionHelper from '../../Core/helper/VersionHelper.js';\nimport TimeAxis from '../data/TimeAxis.js';\nimport TimeAxisViewModel from './model/TimeAxisViewModel.js';\nimport TimelineDateMapper from './mixin/TimelineDateMapper.js';\nimport TimelineDomEvents from './mixin/TimelineDomEvents.js';\nimport TimelineViewPresets from './mixin/TimelineViewPresets.js';\nimport TimelineZoomable from './mixin/TimelineZoomable.js';\nimport RecurringEvents from './mixin/RecurringEvents.js';\nimport TimelineEventRendering from './mixin/TimelineEventRendering.js';\nimport TimelineScroll from './mixin/TimelineScroll.js';\nimport TimelineState from './mixin/TimelineState.js';\nimport './TimeAxisSubGrid.js';\nimport '../../Grid/feature/RegionResize.js';\nconst\n inRange = (v, r0, r1) => (r0 == null)\n ? (r1 == null || v < r1)\n : (r1 == null)\n ? v >= r0\n : (r0 < r1)\n ? (r0 <= v && v < r1) // 5 in [1, 10] (after 1 and before 10)\n : (v < r1 || r0 <= v), // 5 in [10, 1] (after 10 or before 1)\n isWorkingTime = (d, wt) => inRange(d.getDay(), wt.fromDay, wt.toDay) && inRange(d.getHours(), wt.fromHour, wt.toHour),\n emptyObject = {};\n/**\n * @module Scheduler/view/TimelineBase\n */\n/**\n * Options accepted by the Scheduler's {@link Scheduler.view.Scheduler#config-visibleDate} property.\n *\n * @typedef {Object} VisibleDate\n * @property {Date} date The date to bring into view.\n * @property {'start'|'end'|'center'|'nearest'} [block] How far to scroll the date.\n * @property {Number} [edgeOffset] edgeOffset A margin around the date to bring into view.\n * @property {AnimateScrollOptions|Boolean|Number} [animate] Set to `true` to animate the scroll by 300ms,\n * or the number of milliseconds to animate over, or an animation config object.\n */\n/**\n * Abstract base class used by timeline based components such as Scheduler and Gantt. Based on Grid, supplies a \"locked\"\n * region for columns and a \"normal\" for rendering of events etc.\n * @abstract\n *\n * @mixes Scheduler/view/mixin/TimelineDateMapper\n * @mixes Scheduler/view/mixin/TimelineDomEvents\n * @mixes Scheduler/view/mixin/TimelineEventRendering\n * @mixes Scheduler/view/mixin/TimelineZoomable\n * @mixes Scheduler/view/mixin/TimelineScroll\n * @mixes Scheduler/view/mixin/TimelineState\n * @mixes Scheduler/view/mixin/TimelineViewPresets\n * @mixes Scheduler/view/mixin/RecurringEvents\n *\n * @extends Grid/view/Grid\n */\nexport default class TimelineBase extends GridBase.mixin(\n TimelineDateMapper,\n TimelineDomEvents,\n TimelineEventRendering,\n TimelineZoomable,\n TimelineScroll,\n TimelineState,\n TimelineViewPresets,\n RecurringEvents\n) {\n //region Config\n /**\n * @prp animateTreeNodeToggle\n * @hide\n */\n static $name = 'TimelineBase';\n // Factoryable type name\n static type = 'timelinebase';\n static configurable = {\n // Not yet supported\n animateTreeNodeToggle : false,\n partnerSharedConfigs : {\n value : ['timeAxisViewModel', 'timeAxis', 'viewPreset', 'infiniteScroll'],\n $config : {\n merge : 'distinct'\n }\n },\n /**\n * Get/set startDate. Defaults to current date if none specified.\n *\n * When using {@link #config-infiniteScroll}, use {@link #config-visibleDate} to control initially visible date\n * instead.\n *\n * **Note:** If you need to set start and end date at the same time, use {@link #function-setTimeSpan} method.\n * @member {Date} startDate\n * @category Common\n */\n /**\n * The start date of the timeline (if not configure with {@link #config-infiniteScroll}).\n *\n * If omitted, and a TimeAxis has been set, the start date of the provided {@link Scheduler.data.TimeAxis} will\n * be used. If no TimeAxis has been configured, it'll use the start/end dates of the loaded event dataset. If no\n * date information exists in the event data set, it defaults to the current date and time.\n *\n * If a string is supplied, it will be parsed using\n * {@link Core/helper/DateHelper#property-defaultFormat-static DateHelper.defaultFormat}.\n *\n * When using {@link #config-infiniteScroll}, use {@link #config-visibleDate} to control initially visible date\n * instead.\n *\n * **Note:** If you need to set start and end date at the same time, use the {@link #function-setTimeSpan} method.\n * @config {Date|String}\n * @category Common\n */\n startDate : {\n $config : {\n equal : 'date'\n },\n value : null\n },\n /**\n * Get/set endDate. Defaults to startDate + default span of the used ViewPreset.\n *\n * **Note:** If you need to set start and end date at the same time, use {@link #function-setTimeSpan} method.\n * @member {Date} endDate\n * @category Common\n */\n /**\n * The end date of the timeline (if not configure with {@link #config-infiniteScroll}).\n *\n * If omitted, it will be calculated based on the {@link #config-startDate} setting and the 'defaultSpan'\n * property of the current {@link #config-viewPreset}.\n *\n * If a string is supplied, it will be parsed using\n * {@link Core/helper/DateHelper#property-defaultFormat-static DateHelper.defaultFormat}.\n *\n * **Note:** If you need to set start and end date at the same time, use the {@link #function-setTimeSpan} method.\n * @config {Date|String}\n * @category Common\n */\n endDate : {\n $config : {\n equal : 'date'\n },\n value : null\n },\n /**\n * Partners this Timeline panel with another Timeline in order to sync their region sizes (sub-grids like locked, normal will get the same width),\n * start and end dates, view preset, zoom level and scrolling position. All these values will be synced with the timeline defined as the `partner`.\n *\n * - To add a new partner dynamically see {@link #function-addPartner} method.\n * - To remove existing partner see {@link #function-removePartner} method.\n * - To check if timelines are partners see {@link #function-isPartneredWith} method.\n *\n * Column widths and hide/show state are synced between partnered schedulers when the column set is identical.\n * @config {Scheduler.view.TimelineBase}\n * @category Time axis\n */\n partner : null,\n /**\n * When set, the text in the major time axis header sticks in the scrolling viewport as long as possible.\n * @config {Boolean}\n * @default\n * @category Time axis\n */\n stickyHeaders : true,\n /**\n * A scrolling `options` object describing the scroll action, including a `date` option\n * which references a `Date`. See {@link #function-scrollToDate} for details about scrolling options.\n *\n * ```javascript\n * // The date we want in the center of the Scheduler viewport\n * myScheduler.visibleDate = {\n * date : new Date(2023, 5, 17, 12),\n * block : 'center',\n * animate : true\n * };\n * ```\n * @member {Object} visibleDate\n * @category Common\n */\n /**\n * A date to bring into view initially on the scrollable timeline.\n *\n * This may be configured as either a `Date` or a scrolling `options` object describing\n * the scroll action, including a `date` option which references a `Date`.\n *\n * See {@link #function-scrollToDate} for details about scrolling options.\n *\n * Note that if a naked `Date` is passed, it will be stored internally as a scrolling options object\n * using the following defaults:\n *\n * ```javascript\n * {\n * date : \n * This event fires every time a range of events is\n * requested from the store.\n *
\n *\n * An application may have one of two levels of interest in events being read from a store.\n *\n * 1. To be notified when any event block is requested regardless of what the\n * date range is.\n * 2. To be notified when a new date range is requested.\n *\n * This event allows both types of application to be written. The `changed` property is\n * set if a different date range is requested.\n *\n * ```javascript\n * new Scheduler({\n * eventStore : {\n * listeners : {\n * loadDateRange({ new : { startDate, endDate }, changed }) {\n * // Load new data if user is requesting a different time window.\n * if (changed) {\n * fetch(...);\n * }\n * }\n * }\n * },\n * ...\n * });\n * ```\n *\n * @event loadDateRange\n * @param {Scheduler.data.EventStore} source This EventStore\n * @param {Object} old The old date range\n * @param {Date} old.startDate the old start date.\n * @param {Date} old.endDate the old end date.\n * @param {Object} new The new date range\n * @param {Date} new.startDate the new start date.\n * @param {Date} new.endDate the new end date.\n * @param {Boolean} changed `true` if the date range is different from the last time a request was made.\n */\n me.trigger('loadDateRange', {\n old : lastDateRange || {},\n new : Objects.clone(newDateRange),\n changed : Boolean(!lastDateRange || (lastDateRange.startDate - newDateRange.startDate || lastDateRange.endDate - newDateRange.endDate))\n });\n // Dates are mutable, so we must keep our own copy.\n me.lastDateRange = Objects.clone(newDateRange);\n return dateMap ? me.getEventsAsMap(options) : me.getEventsAsArray(options);\n }\n /**\n * Internal implementation for {@link #function-getEvents} to use when not using dateMap.\n * @private\n */\n getEventsAsArray({\n filter,\n date,\n resourceRecord,\n startDate = date, // Events which intersect the startDate/endDate\n endDate, // will be returned\n startOnly, // Only events which start on each date will be returned\n includeOccurrences = true, // Interpolate occurrences into the returned event set\n dayTime = null,\n // Injected by the getEvents master method\n dateFilter,\n storeFilterFn,\n // Private option. Select which date index to look up events in depending on the date\n // we are examining in the date iteration process. Some callers may want to use\n // different indices depending on the stage through the date iteration.\n // See Calendar package for usage.\n getDateIndex\n }) {\n const\n me = this,\n events = [],\n count = storeFilterFn ? me.count : me.allCount;\n if (count) {\n let candidateEvents = resourceRecord ? me.getEventsForResource(resourceRecord) : null;\n // If there *was* a resourceRecord, candidateEvents will already be set up using me.getEventsForResource.\n // If no resourceRecord specified, we are gathering by date, so use the indices.\n if (!resourceRecord) {\n const\n dateIndex = me.useDayIndex(dayTime),\n eventSet = new Set(),\n indexName = startOnly ? 'startDate' : 'date';\n // Add all recurring events which started on or before our date range.\n me.recurringEvents.forEach(e => {\n if (dateIndex.dayTime.startOfDay(e.startDate) <= startDate) {\n eventSet.add(e);\n }\n });\n // Iterate the date range, using the indices to find qualified events.\n for (const date = new Date(startDate); date < endDate; date.setDate(date.getDate() + 1)) {\n const coincidingEvents = dateIndex.get(getDateIndex ? getDateIndex(date) : indexName, date);\n coincidingEvents?.forEach(e => eventSet.add(e));\n }\n // We gathered all events which *coincide* with each date.\n // We also added in all recurring events which started on or before our date range.\n // All these were made unique by the Set.\n // Return it to array form.\n candidateEvents = [...eventSet];\n }\n // Events found from the date indices won't be filtered.\n // On the other side, when using getEventForResource we will get all events for\n // the resource even if the EventStore is filtered, handle this by excluding \"invisible\" events here\n if (storeFilterFn) {\n candidateEvents = candidateEvents.filter(storeFilterFn);\n }\n // Go through candidates.\n // For a recurring event, and we are including recurrences, add date-qualifying occurrences.\n // For a non-recurring event, add it if it's date-qualified.\n for (let i = 0, { length } = candidateEvents; i < length; i++) {\n const e = candidateEvents[i];\n // For recurring events, add date-qualifying occurrences, not the base\n if (includeOccurrences && e.isRecurring) {\n events.push.apply(events, e.getOccurrencesForDateRange(startDate, endDate).filter(dateFilter));\n }\n // For ordinary events, add if it's date-qualified\n else if (dateFilter(e)) {\n events.push(e);\n }\n }\n }\n return filter ? events.filter(filter) : events;\n }\n /**\n * Internal implementation for {@link #function-getEvents} to use when using dateMap.\n * @private\n */\n getEventsAsMap({\n filter : passedFilter,\n date,\n resourceRecord, // Not supported yet. Will add if ever requested.\n startDate = date, // Events which intersect the startDate/endDate\n endDate, // will be returned\n startOnly, // Only events which start on each date will be returned\n includeOccurrences = true, // Interpolate occurrences into the returned event set\n dateMap, // Return a Map keyed by date each value being an array of events\n dayTime = null,\n storeFilterFn,\n // Private option. Select which date index to look up events in depending on the date\n // we are examining in the date iteration process. Some callers may want to use\n // different indices depending on the stage through the date iteration.\n // See Calendar package for usage.\n getDateIndex\n }) {\n const me = this;\n // Convert `true` to a Map.\n if (dateMap?.clear) {\n dateMap.clear();\n }\n else {\n dateMap = new Map();\n }\n if (me.count) {\n const\n dateIndex = me.useDayIndex(dayTime),\n indexName = startOnly ? 'startDate' : 'date',\n recurringEvents = [],\n filter = e => (!passedFilter || passedFilter(e)) && (!storeFilterFn || storeFilterFn(e)),\n baseEventFilter = e => notRecurring(e) && filter(e);\n dayTime = dateIndex.dayTime; // dayTime=null becomes DayTime instance for midnight\n // We can't yet do this for just a resource.\n if (resourceRecord) {\n throw new Error('Querying for events for a resource and returning a date-keyed Map is not supported');\n }\n else {\n // Add all recurring events which started before the end of our date range.\n // There are none in Gantt projects\n me.recurringEvents?.forEach(e => {\n if (dayTime.startOfDay(e.startDate) < endDate) {\n recurringEvents.push(e);\n }\n });\n // Iterate the date range, using the indices to find qualified events.\n for (const date = new Date(startDate); date < endDate; date.setDate(date.getDate() + 1)) {\n let [coincidingEvents, key] = dateIndex.get(getDateIndex ? getDateIndex(date) : indexName, date, true);\n // The index entry may be there, but it could be empty.\n if (coincidingEvents?.size) {\n // Convert Set which index holds into an Array.\n // A recurring event doesn't go into the Map, its occurrences do.\n // Then filter by the passed filter and this Store's filter function\n // because events found from the date indices won't be filtered.\n coincidingEvents = [...coincidingEvents].filter(baseEventFilter);\n // Only create the entry for the day if there are events found\n if (coincidingEvents.length) {\n (dateMap.get(key) || (dateMap.set(key, []).get(key))).push(...coincidingEvents);\n }\n }\n }\n }\n // Go through matching recurring events.\n for (let i = 0, { length } = recurringEvents; i < length; i++) {\n const\n e = recurringEvents[i],\n // For each recurring event, add occurrences if we are including occurrences else, add the base.\n // Then filter by the passed filter and this Store's filter function\n // because events found from the date indices won't be filtered.\n occurrences = (includeOccurrences ? e.getOccurrencesForDateRange(startDate, endDate) : [e]).filter(filter),\n lastDate = DateHelper.add(endDate, 1, 'day');\n // Add occurrences to dateMap\n for (let bucket, i = 0, { length } = occurrences; i < length; i++) {\n const\n occurrence = occurrences[i],\n date = dayTime.startOfDay(occurrence.startDate),\n indexName = getDateIndex ? getDateIndex(date) : (startOnly ? 'startDate' : 'date'),\n lastIntersectingDate = (indexName === 'startDate') || !occurrence.durationMS\n ? DateHelper.add(date, 1, 'day')\n : DateHelper.min(occurrence.endDate || DateHelper.add(occurrence.startDate, occurrence.duration, occurrence.durationUnit), lastDate);\n // Loop through covered dates, adding to dateMap if required\n for (; date < lastIntersectingDate; date.setDate(date.getDate() + 1)) {\n const key = dayTime.dateKey(date);\n (bucket = dateMap.get(key)) || dateMap.set(key, bucket = []);\n bucket.push(occurrence);\n }\n }\n }\n }\n return dateMap;\n }\n};\n", "import DayTime from '../../../Core/util/DayTime.js';\n/**\n * @module Scheduler/data/util/EventDayIndex\n */\nconst\n // Maps an index name that can be requested to its storage property on the EventDayIndex instance:\n indexNameMap = {\n date : '_dateIndex',\n startDate : '_startDateIndex'\n },\n indexProps = Object.values(indexNameMap),\n emptyArray = Object.freeze([]),\n { MILLIS_PER_DAY } = DayTime;\n/**\n * This utility class is used by event stores to index events by their day (a \"YYYY-MM-DD\" value, also known as a\n * \"date key\"). This key is produced by a {@link Core.util.DayTime} instance. If two `DayTime` instances have a common\n * `startShift`, they can share an index.\n *\n * @internal\n */\nexport default class EventDayIndex {\n constructor(store, dayTime) {\n /**\n * The `DayTime` definition for this index. This is set to the initial DayTime instance but can be used for\n * any other {@link #function-register registered} `DayTime` instances since they all posses the same value for\n * `startShift`.\n *\n * This defaults to {@link Core.util.DayTime#property-MIDNIGHT-static}.\n * @member {Core.util.DayTime} dayTime\n * @readonly\n */\n this.dayTime = dayTime || DayTime.MIDNIGHT;\n /**\n * The owning store instance of this index.\n * @member {Scheduler.data.EventStore} store\n * @private\n * @readonly\n */\n this.store = store;\n /**\n * The `DayTime` instances {@link #function-register registered} with this index instance. As instances are\n * {@link #function-unregister unregistered} they are removed from this array. Once this array is empty, this\n * index can be discarded.\n * @member {Core.util.DayTime[]} users\n * @private\n */\n this.users = [this.dayTime];\n }\n /**\n * Adds an event record to the specified index (either \"startDate\" or \"date\") for a given `date`.\n * @param {String} indexName The index to which the event record is to be added (either \"startDate\" or \"date\").\n * @param {Date|Number} date A date for which the event record overlaps. The {@link Core.util.DayTime#function-dateKey}\n * method is used to convert this date to a \"YYYY-MM-DD\" key for the index.\n * @param {Scheduler.model.EventModel} eventRecord The event record.\n * @private\n */\n add(indexName, date, eventRecord) {\n const\n index = this[indexNameMap[indexName]],\n key = this.dayTime.dateKey(date),\n entry = index[key] || (index[key] = new Set());\n entry.add(eventRecord);\n }\n /**\n * Adds an event record to all indexes for all dates which the event overlaps.\n * @param {Scheduler.model.EventModel} eventRecord The event record.\n * @private\n */\n addEvent(eventRecord) {\n let dateMS = this.dayTime.startOfDay(eventRecord.startDate)?.getTime(),\n endDateMS;\n if (dateMS) {\n endDateMS = eventRecord.endDate?.getTime() ?? dateMS;\n this.add('startDate', dateMS, eventRecord);\n do {\n this.add('date', dateMS, eventRecord);\n dateMS += MILLIS_PER_DAY;\n } while (dateMS < endDateMS);\n }\n }\n /**\n * Clear this index.\n */\n clear() {\n indexProps.forEach(name => this[name] = Object.create(null));\n }\n /**\n * Returns an object that has properties named by the {@link Core.util.DayTime#function-dateKey} method, or the\n * array of event records if a `date` is specified, or the event record array and the date key in a 2-element array\n * if `returnKey` is `true`.\n * @param {String} indexName The name of the desired index (either 'date' or 'startDate').\n * @param {Number|Date} date The date as a `Date` or the millisecond UTC epoch. When passed, this method will return\n * the array of event records for this date.\n * @param {Boolean} [returnKey] Specify `true` to return the date key along with the event record array.\n * @returns {Object|Scheduler.model.EventModel[]}\n */\n get(indexName, date, returnKey) {\n // Date indices are created on first usage and after that kept up to date on changes\n !this.initialized && this.initialize();\n let ret = this[indexNameMap[indexName]],\n key;\n if (date) {\n key = this.dayTime.dateKey(date);\n ret = returnKey ? [ret[key], key] : ret[key];\n }\n return ret;\n }\n /**\n * Called when this index is first used. Once called, further store changes will be used to maintain this index.\n * @private\n */\n initialize() {\n this.initialized = true;\n this.clear();\n this.sync('splice', this.store.storage.allValues);\n }\n invalidate() {\n this.initialized = false;\n indexProps.forEach(name => this[name] = null);\n }\n /**\n * Returns `true` if the given `dayTime` matches this index.\n * @param {Core.util.DayTime} dayTime\n * @returns {Boolean}\n */\n matches(dayTime) {\n return this.dayTime.startShift === dayTime.startShift;\n }\n /**\n * Removes an event record from the specified index (either \"startDate\" or \"date\") for a given `date`.\n * @param {String} indexName The index to which the event record is to be removed (either \"startDate\" or \"date\").\n * @param {Date|Number} date A date for which the event record overlaps. The {@link Core.util.DayTime#function-dateKey}\n * method is used to convert this date to a \"YYYY-MM-DD\" key for the index.\n * @param {Scheduler.model.EventModel} eventRecord The event record.\n * @private\n */\n remove(indexName, date, eventRecord) {\n const\n index = this[indexNameMap[indexName]],\n key = this.dayTime.dateKey(date),\n entry = index[key];\n if (entry) {\n entry.delete(eventRecord);\n }\n }\n /**\n * Removes an event record from all indexes for all dates which the event overlaps.\n * @param {Scheduler.model.EventModel} eventRecord The event record.\n * @param {Date} startDate The start date for the event. This may be different from the `startDate` of the given\n * `eventRecord` when the event is rescheduled.\n * @param {Date} endDate The end date for the event. This may be different from the `endDate` of the given\n * `eventRecord` when the event is rescheduled.\n * @private\n */\n removeEvent(eventRecord, startDate, endDate) {\n let dateMS = this.dayTime.startOfDay(startDate)?.getTime(),\n endDateMS;\n if (dateMS) {\n endDateMS = endDate?.getTime() ?? dateMS;\n this.remove('startDate', dateMS, eventRecord);\n do {\n this.remove('date', dateMS, eventRecord);\n dateMS += MILLIS_PER_DAY;\n } while (dateMS < endDateMS);\n }\n }\n sync(action, added, removed, replaced, wasSet) {\n added = added || emptyArray;\n removed = removed || emptyArray;\n const\n me = this,\n addedCount = added.length,\n removedCount = removed.length,\n replacedCount = replaced?.length;\n let i, newEvent, outgoingEvent;\n if (!me.initialized) {\n return;\n }\n switch (action) {\n case 'clear':\n me.clear();\n break;\n // Add and remove\n case 'splice':\n // Handle replacement of records by instances with same ID\n if (replacedCount) {\n added = added.slice();\n removed = removed.slice();\n for (i = 0; i < replacedCount; i++) {\n removed.push(replaced[i][0]);\n added.push(replaced[i][1]);\n }\n }\n // Remove entries from indices\n if (removedCount) {\n for (i = 0; i < removedCount; i++) {\n outgoingEvent = removed[i];\n me.removeEvent(outgoingEvent, outgoingEvent.startDate, outgoingEvent.endDate);\n }\n }\n // Add entries to indices\n if (addedCount) {\n for (i = 0; i < addedCount; i++) {\n newEvent = added[i];\n // Can only be date-indexed if it's scheduled.\n // Also ignore parent events (likely using a Gantt project)\n if (newEvent.isScheduled && !newEvent.isParent) {\n me.addEvent(newEvent);\n }\n }\n }\n break;\n // invoked when the start or end changes so that the event can be re-indexed.\n case 'reschedule':\n outgoingEvent = added[0];\n me.removeEvent(outgoingEvent, wasSet.startDate?.oldValue || outgoingEvent.startDate,\n wasSet.endDate?.oldValue || outgoingEvent.endDate);\n // Now process as a splice with an add and no removes.\n me.sync('splice', added);\n break;\n }\n }\n /**\n * This method registers a `dayTime` instance with this index in the `users` array.\n * @param {Core.util.DayTime} dayTime The instance to register.\n */\n register(dayTime) {\n this.users.push(dayTime);\n }\n /**\n * This method unregisters a `dayTime` instance, removing it from the `users` array. This method returns `true` if\n * this was the last registered instance and this index is no longer needed.\n * @param {Core.util.DayTime} dayTime The instance to register.\n * @returns {Boolean}\n */\n unregister(dayTime) {\n const\n { users } = this,\n i = users.indexOf(dayTime);\n if (i > -1) {\n users.splice(i, 1);\n }\n return !users.length;\n }\n};\n// To avoid shape changes:\nconst proto = EventDayIndex.prototype;\nindexProps.forEach(name => proto[name] = null);\nproto.initialized = false;\nEventDayIndex._$name = 'EventDayIndex';", "import DayTime from '../../../Core/util/DayTime.js';\nimport EventDayIndex from '../util/EventDayIndex.js';\n/**\n * @module Scheduler/data/mixin/DayIndexMixin\n */\nconst { MIDNIGHT } = DayTime;\n/**\n * Mixing handling Calendars day indices.\n *\n * Consumed by EventStore in Scheduler & Scheduler Pro and TaskStore in Gantt.\n *\n * @mixin\n * @internal\n */\nexport default Target => class DayIndexMixin extends Target {\n static $name = 'DayIndexMixin';\n construct(config) {\n super.construct(config);\n this.dayIndices = null;\n }\n //region Keeping index in sync\n // Override to syncIndices on initial load\n afterLoadData() {\n this.syncIndices('splice', this.storage.allValues);\n super.afterLoadData?.();\n }\n /**\n * Responds to mutations of the underlying storage Collection.\n *\n * Maintain indices for fast finding of events by date.\n * @param {Object} event\n * @private\n */\n onDataChange({ action, added, removed, replaced }) {\n // Indices must be synced before responding to change\n this.syncIndices(action, added, removed, replaced);\n super.onDataChange(...arguments);\n }\n onDataReplaced(action, data) {\n // Indices must be synced before responding to change\n this.syncIndices('clear');\n this.syncIndices('splice', this.storage.values);\n super.onDataReplaced(action, data);\n }\n onModelChange(record, toSet, wasSet, silent, fromRelationUpdate) {\n // Ensure by-date indices are up to date.\n if (('startDate' in wasSet) || ('endDate' in wasSet)) {\n this.syncIndices('reschedule', [record], null, null, wasSet);\n }\n super.onModelChange(...arguments);\n }\n //endregion\n //region Index\n /**\n * Invalidates associated day indices.\n * @internal\n */\n invalidateDayIndices() {\n this.dayIndices?.forEach(dayIndex => dayIndex.invalidate());\n }\n /**\n * Registers a `DayTime` instance, creating an `EventDayIndex` for each distinct `startShift`. This index is\n * maintained until all instances with a matching `startShift` are {@link #function-unregisterDayIndex unregistered}.\n * @param {Core.util.DayTime} dayTime The instance to register.\n * @internal\n * @category Indexing\n */\n registerDayIndex(dayTime) {\n const\n me = this,\n dayIndices = me.dayIndices || (me.dayIndices = []);\n let dayIndex, i;\n for (i = 0; !dayIndex && i < dayIndices.length; ++i) {\n if (dayIndices[i].matches(dayTime)) {\n (dayIndex = dayIndices[i]).register(dayTime);\n }\n }\n !dayIndex && dayIndices.push(dayIndex = new EventDayIndex(me, dayTime));\n return dayIndex;\n }\n syncIndices(...args) {\n this.dayIndices?.forEach(dayIndex => dayIndex.sync(...args));\n }\n /**\n * Removes a registered `DayTime` instance. If this is the last instance registered to an `EventDayIndex`, that\n * index is removed.\n * @param {Core.util.DayTime} dayTime The instance to unregister.\n * @internal\n * @category Indexing\n */\n unregisterDayIndex(dayTime) {\n const\n me = this,\n { dayIndices } = me;\n for (let i = dayIndices?.length; i-- > 0; /* empty */) {\n if (dayIndices[i].matches(dayTime)) {\n if (dayIndices[i].unregister(dayTime)) {\n dayIndices.splice(i, 1);\n }\n break;\n }\n }\n }\n /**\n * Returns the `EventDayIndex` to use for the given `DayTime` instance. This may be the primary instance or a\n * child instance created by {@link #function-registerDayIndex}.\n * @param {Core.util.DayTime} dayTime The `DayTime` of the desired index.\n * @returns {Scheduler.data.util.EventDayIndex}\n * @private\n * @category Indexing\n */\n useDayIndex(dayTime) {\n const\n me = this,\n { dayIndices } = me;\n dayTime = dayTime || MIDNIGHT;\n for (let i = 0; dayIndices && i < dayIndices.length; ++i) {\n if (dayIndices[i].matches(dayTime)) {\n return dayIndices[i];\n }\n }\n if (dayTime.startShift) {\n throw new Error(`No day index registered for ${dayTime} on ${me.id}`);\n }\n return me.registerDayIndex(MIDNIGHT);\n }\n //endregion\n};\n", "import Base from '../../../Core/Base.js';\nimport ArrayHelper from '../../../Core/helper/ArrayHelper.js';\n/**\n * @module Scheduler/data/mixin/RecurringTimeSpansMixin\n */\nconst\n emptyArray = Object.freeze([]);\n/**\n * This mixin provides recurrence functionality to a store containing {@link Scheduler.model.TimeSpan} models.\n * Normally you don't need to interact with this mixin directly.\n * @mixin\n */\nexport default Target => class RecurringTimeSpansMixin extends (Target || Base) {\n static get $name() {\n return 'RecurringTimeSpansMixin';\n }\n construct(...args) {\n const me = this;\n // We store all generated occurrences keyed by `_generated_${recurringTimeSpan.id}:${occurrenceStartDate}`\n // So that when asked to generate an occurrence for a date, an already generated one can be returned.\n me.globalOccurrences = new Map();\n // All recurring events added to the store are accessible through this Set. It's used\n // to generate occurrences.\n me.recurringEvents = new Set();\n me.ion({\n removeAll() {\n me.globalOccurrences.clear();\n }\n });\n super.construct(...args);\n }\n // Override to refreshRecurringEventsCache on initial load\n afterLoadData() {\n // All cached occurrences are now potentially invalid.\n // A store reload might imply any number of changes which invalidate any occurrence.\n this.globalOccurrences.clear();\n // Clear and rebuild the recurring events cache\n this.refreshRecurringEventsCache('clear');\n this.refreshRecurringEventsCache('splice', this.storage.allValues);\n super.afterLoadData && super.afterLoadData();\n }\n /**\n * Responds to mutations of the underlying storage Collection.\n *\n * Maintain indices for fast finding of events by date.\n * @param {Object} event\n * @private\n */\n onDataChange({ action, added, removed, replaced }) {\n // Recurring events cache must be refreshed before responding to change\n this.refreshRecurringEventsCache(action, added, removed, replaced);\n super.onDataChange(...arguments);\n }\n refreshRecurringEventsCache(action, added = emptyArray, removed = emptyArray, replaced) {\n const\n me = this,\n { recurringEvents } = me,\n replacedCount = replaced?.length;\n switch (action) {\n case 'clear':\n recurringEvents.clear();\n break;\n // Add and remove\n case 'splice': {\n // Handle replacement of records by instances with same ID\n if (replacedCount) {\n added = added.slice();\n removed = removed.slice();\n for (let i = 0; i < replacedCount; i++) {\n removed.push(replaced[i][0]);\n added.push(replaced[i][1]);\n }\n }\n const\n addedCount = added.length,\n removedCount = removed.length;\n // Track the recurring events we contain\n if (removedCount && recurringEvents.size) {\n for (let i = 0; i < removedCount; i++) {\n // If it's being removed, remove it from the recurring events cache.\n // If it's not a recurring event, it doesn't matter, it won't be in there.\n recurringEvents.delete(removed[i]);\n }\n }\n // Track the recurring events we contain\n if (addedCount) {\n for (let i = 0; i < addedCount; i++) {\n const newEvent = added[i];\n // Allow easy access to recurring events\n if (newEvent.isRecurring) {\n recurringEvents.add(newEvent);\n }\n }\n }\n break;\n }\n }\n }\n getById(id) {\n let result = super.getById(id);\n // If the id is not found in the Store, then it could be one of our generated occurrences\n if (!result) {\n result = this.globalOccurrences.get(this.modelClass.asId(id));\n }\n return result;\n }\n onModelChange(record, toSet, wasSet, silent, fromRelationUpdate) {\n const isRecurrenceRelatedFieldChange = !silent && this.isRecurrenceRelatedFieldChange(record, wasSet);\n // If this is the base of a recurring sequence, then any reactors to events from\n // the super call must regenerate occurrences, so must be done at top.\n // If silent is true, occurrences won't be recalculated. Do not remove occurrences from cache in such case.\n if (isRecurrenceRelatedFieldChange) {\n record.removeOccurrences();\n }\n super.onModelChange(...arguments);\n // If this is the base of a recurring sequence, then the EventStore must\n // trigger a refresh event so that UIs refresh themselves.\n // This could be at the tail end of the creation of an exception\n // or a new recurring base.\n if (isRecurrenceRelatedFieldChange) {\n const event = { action : 'batch', records : this.storage.values };\n this.trigger('refresh', event);\n this.trigger('change', event);\n }\n }\n /**\n * The method restricts which field modifications should trigger timespan occurrences building.\n * By default, any field change of a recurring timespan causes the rebuilding.\n * @param {Scheduler.model.TimeSpan} timeSpan The modified timespan.\n * @param {Object} wasSet Object containing the change set.\n * @returns {Boolean} `True` if the fields modification should trigger the timespan occurrences rebuilding.\n * @internal\n * @category Recurrence\n */\n isRecurrenceRelatedFieldChange(timeSpan, wasSet) {\n return timeSpan.isRecurring || 'recurrenceRule' in wasSet;\n }\n /**\n * Builds occurrences for the provided timespan across the provided date range.\n * @private\n * @category Recurrence\n */\n getOccurrencesForTimeSpan(timeSpan, startDate, endDate) {\n const result = [];\n if (timeSpan.isRecurring) {\n timeSpan.recurrence.forEachOccurrence(startDate, endDate, r => result.push(r));\n }\n return result;\n }\n set data(data) {\n // All cached occurrences are now invalid with a new dataset\n this.globalOccurrences.clear();\n super.data = data;\n }\n /**\n * Returns all the recurring timespans.\n * @returns {Scheduler.model.TimeSpan[]} Array of recurring events.\n * @category Recurrence\n */\n getRecurringTimeSpans() {\n return [...this.recurringEvents];\n }\n};\n", "import Base from '../../../Core/Base.js';\nimport RecurringTimeSpansMixin from './RecurringTimeSpansMixin.js';\n/**\n * @module Scheduler/data/mixin/RecurringEventsMixin\n */\n/**\n * This mixin class provides recurrence functionality to the {@link Scheduler.data.EventStore event store}.\n * @extends Scheduler/data/mixin/RecurringTimeSpansMixin\n * @mixin\n */\nexport default Target => class RecurringEventsMixin extends RecurringTimeSpansMixin(Target || Base) {\n static get $name() {\n return 'RecurringEventsMixin';\n }\n /**\n * Returns all the recurring events.\n *\n * **An alias for ** {@link Scheduler.data.mixin.RecurringTimeSpansMixin#function-getRecurringTimeSpans} method.\n *\n * @returns {Scheduler.model.EventModel[]} Array of recurring events.\n * @category Recurrence\n */\n getRecurringEvents() {\n return this.getRecurringTimeSpans();\n }\n isEventPersistable(event) {\n // occurrences are not persistable\n return super.isEventPersistable(event) && (!event.supportsRecurring || !event.isOccurrence);\n }\n};\n", "import Base from '../../../../Core/Base.js';\nconst dayParseRegExp = /^([+-]?[0-9])?(SU|MO|TU|WE|TH|FR|SA)$/;\nconst days = ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'];\nexport default class RecurrenceDayRuleEncoder extends Base {\n static decodeDay(rawDay) {\n let parsedDay,\n result;\n if ((parsedDay = dayParseRegExp.exec(rawDay))) {\n result = [days.indexOf(parsedDay[2])];\n // optional position number\n if (parsedDay[1]) {\n parsedDay[1] = parseInt(parsedDay[1], 10);\n result.push(parsedDay[1]);\n }\n }\n return result;\n }\n static encodeDay(day) {\n let position;\n // support decodeDay() result format\n if (Array.isArray(day)) {\n [day, position] = day;\n }\n return (position ? position.toString() : '') + days[day];\n }\n // Turns days values provided as an array of strings (like [`-1MO`, `SU`, `+3FR`])\n // into an array of [ dayIndex, position ] elements, where:\n //\n // - `dayIndex` - zero-based week day index value (0 - Sunday, 1 - Monday, 2 - Tuesday, etc.)\n // - `position` - (optional) 1-based position of the day (integer value (can be both positive and negative))\n static decode(rawDays) {\n const result = [];\n let parsedDay;\n if (rawDays) {\n for (let i = 0; i < rawDays.length; i++) {\n if ((parsedDay = this.decodeDay(rawDays[i]))) {\n result.push(parsedDay);\n }\n }\n }\n return result;\n }\n static encode(days) {\n const result = [];\n let day;\n if (days) {\n for (let i = 0; i < days.length; i++) {\n if ((day = this.encodeDay(days[i]))) {\n result.push(day);\n }\n }\n }\n return result;\n }\n};\nRecurrenceDayRuleEncoder._$name = 'RecurrenceDayRuleEncoder';", "import Base from '../../../../Core/Base.js';\nimport DateHelper from '../../../../Core/helper/DateHelper.js';\n/**\n * @module Scheduler/data/util/recurrence/AbstractRecurrenceIterator\n * @private\n */\nconst\n frequencyToUnitRe = /ly$/i,\n frequencyToUnit = frequency => {\n const result = frequency.replace(frequencyToUnitRe, '');\n return result === 'DAI' ? 'DAY' : result;\n },\n fn = (date, counter, isFirst, timeSpan) => timeSpan.buildOccurrence(date, isFirst),\n captureLastOccurrence = date => lastOccurrenceDate = date;\nlet lastOccurrenceDate;\nexport default class AbstractRecurrenceIterator extends Base {\n static frequency = 'NONE';\n static MAX_OCCURRENCES_COUNT = 1000000;\n static processIterationConfig(config) {\n const\n { recurrence } = config,\n {\n frequency,\n interval,\n timeSpan,\n endDate : until,\n count\n } = recurrence;\n // Force the correction of the event to be in sync with its recurrence rule\n // before performing iteration. For example, if the event's configured startDate\n // is 1st January 2020, and the rule dictates that the event will take place\n // monthly, every Monday, then the first event is not until Monday 6th January, 2020.\n if (!config.syncingStartDate && !timeSpan.meta.isSyncedWithRule) {\n // Do not generate occurrences outside of the specified range\n const\n intervalEndDate = DateHelper.add(timeSpan.startDate, interval, frequencyToUnit(frequency)),\n endDate = DateHelper.min(\n intervalEndDate,\n config.endDate || intervalEndDate\n );\n this.forEachDate({\n syncingStartDate : true,\n startDate : timeSpan.startDate,\n endDate,\n recurrence,\n fn\n });\n }\n // Capture the start after its been synced with its recurrence rule\n const timeSpanStart = timeSpan.startDate;\n // Extract the endDate from the config, defaulting to the recurrence UNTIL date\n let {\n startDate = timeSpanStart,\n endDate = until\n } = config;\n // No point in starting the iteration before the event starts\n if (startDate < timeSpanStart) {\n startDate = timeSpanStart;\n }\n // The recurrence's stop date overrides the configured endDate.\n if (until) {\n if (!endDate || endDate > until) {\n endDate = until;\n }\n }\n // If we are limiting using count and we are not starting from the\n // first occurrence, then we have to calculate a stop date.\n // This is because for date ranges in the future we cannot calculate how many\n // preceding occurrences there may have been.\n else if (count && startDate > timeSpanStart) {\n // Iterate the occurrences from the start to capture the last one\n this.forEachDate({\n recurrence,\n fn : captureLastOccurrence\n });\n // The date of the last occurrence in the count sequence overrides the configured endDate.\n if (!endDate || endDate > lastOccurrenceDate) {\n // since endDate of the provided interval is exclusive add 1 millisecond\n endDate = new Date(lastOccurrenceDate.getTime() + 1);\n }\n }\n // Preserve the requested start of requested visits.\n const earliestVisibleDate = startDate;\n // Unless we are only asked for events which *start* within the time range. we must make\n // a best attempt to include any occurrences which span the start date.\n // So if we are asking for events from the 1st of the month, and there's an event\n // which runs every 2 months from the 15th to the 5th, we must include it. Start the\n // iteration
\n
`);\n }\n }\n onCrudManagerLoadCanceled() {\n this.onCrudManagerRequestFinalize(true, 'load');\n }\n onCrudManagerSyncCanceled() {\n this.onCrudManagerRequestFinalize(true, 'sync');\n }\n onCrudManagerLoad() {\n this.onCrudManagerRequestFinalize(true, 'load');\n }\n onCrudManagerSync() {\n this.onCrudManagerRequestFinalize(true, 'sync');\n }\n onCrudManagerRequestFail({ requestType, response }) {\n this.onCrudManagerRequestFinalize(false, requestType, response);\n }\n onAjaxTransportResponseReceived() {\n const me = this;\n if (me.clearMaskDelay != null) {\n me.setTimeout(() => me.masked = null, me.clearMaskDelay);\n }\n else {\n me.masked = null;\n }\n }\n get widgetClass() {}\n};\n", "/**\n * @module Scheduler/data/mixin/AttachToProjectMixin\n */\n/**\n * Mixin that calls the target class `attachToProject()` function when a new project is assigned to Scheduler/Gantt.\n *\n * @mixin\n */\nexport default Target => class AttachToProjectMixin extends Target {\n static get $name() {\n return 'AttachToProjectMixin';\n }\n async afterConstruct() {\n super.afterConstruct();\n const\n me = this,\n projectHolder = (me.client || me.grid),\n { project } = projectHolder;\n projectHolder.projectSubscribers?.push(me);\n // Attach to already existing stores\n if (project) {\n me.attachToProject(project);\n me.attachToResourceStore(project.resourceStore);\n me.attachToEventStore(project.eventStore);\n me.attachToAssignmentStore(project.assignmentStore);\n me.attachToDependencyStore(project.dependencyStore);\n me.attachToCalendarManagerStore(project.calendarManagerStore);\n }\n }\n /**\n * Override to take action when the project instance is replaced.\n *\n * @param {Scheduler.model.ProjectModel} project\n */\n attachToProject(project) {\n this.detachListeners('project');\n this._project = project;\n super.attachToProject?.(project);\n }\n detachFromProject(project) {\n super.detachFromProject?.(project);\n }\n /**\n * Override to take action when the EventStore instance is replaced, either from being replaced on the project or\n * from assigning a new project.\n *\n * @param {Scheduler.data.EventStore} store\n */\n attachToEventStore(store) {\n this.detachListeners('eventStore');\n super.attachToEventStore?.(store);\n }\n /**\n * Override to take action when the ResourceStore instance is replaced, either from being replaced on the project\n * or from assigning a new project.\n *\n * @param {Scheduler.data.ResourceStore} store\n */\n attachToResourceStore(store) {\n this.detachListeners('resourceStore');\n super.attachToResourceStore?.(store);\n }\n /**\n * Override to take action when the AssignmentStore instance is replaced, either from being replaced on the project\n * or from assigning a new project.\n *\n * @param {Scheduler.data.AssignmentStore} store\n */\n attachToAssignmentStore(store) {\n this.detachListeners('assignmentStore');\n super.attachToAssignmentStore?.(store);\n }\n /**\n * Override to take action when the DependencyStore instance is replaced, either from being replaced on the project\n * or from assigning a new project.\n *\n * @param {Scheduler.data.DependencyStore} store\n */\n attachToDependencyStore(store) {\n this.detachListeners('dependencyStore');\n super.attachToDependencyStore?.(store);\n }\n /**\n * Override to take action when the CalendarManagerStore instance is replaced, either from being replaced on the\n * project or from assigning a new project.\n *\n * @param {Core.data.Store} store\n */\n attachToCalendarManagerStore(store) {\n this.detachListeners('calendarManagerStore');\n super.attachToCalendarManagerStore?.(store);\n }\n get project() {\n return this._project;\n }\n get calendarManagerStore() {\n return this.project.calendarManagerStore;\n }\n get assignmentStore() {\n return this.project.assignmentStore;\n }\n get resourceStore() {\n return this.project.resourceStore;\n }\n get eventStore() {\n return this.project.eventStore;\n }\n get dependencyStore() {\n return this.project.dependencyStore;\n }\n};\n", "import BrowserHelper from '../../../Core/helper/BrowserHelper.js';\nimport DomSync from '../../../Core/helper/DomSync.js';\nimport Base from '../../../Core/Base.js';\nimport Model from '../../../Core/data/Model.js';\nimport ArrayHelper from '../../../Core/helper/ArrayHelper.js';\nimport DomHelper from '../../../Core/helper/DomHelper.js';\nimport Rectangle from '../../../Core/helper/util/Rectangle.js';\nimport DateHelper from '../../../Core/helper/DateHelper.js';\nimport AttachToProjectMixin from '../../data/mixin/AttachToProjectMixin.js';\n/**\n * @module Scheduler/view/orientation/HorizontalRendering\n */\n/**\n * @typedef HorizontalRenderData\n * @property {Scheduler.model.EventModel} eventRecord\n * @property {Date} start Span start\n * @property {Date} end Span end\n * @property {String} rowId Id of the resource row\n * @property {DomConfig[]} children Child elements\n * @property {Number} startMS Wrap element start in milliseconds\n * @property {Number} endMS Span Wrap element end in milliseconds\n * @property {Number} durationMS Wrap duration in milliseconds (not just a difference between start and end)\n * @property {Number} innerStartMS Actual event start in milliseconds\n * @property {Number} innerEndMS Actual event end in milliseconds\n * @property {Number} innerDurationMS Actual event duration in milliseconds\n * @property {Boolean} startsOutsideView True if span starts before time axis start\n * @property {Boolean} endsOutsideView True if span ends after time axis end\n * @property {Number} left Absolute left coordinate of the wrap element\n * @property {Number} width\n * @property {Number} top Absolute top coordinate of the wrap element (can be changed by layout)\n * @property {Number} height\n * @property {Boolean} clippedStart True if start is clipped\n * @property {Boolean} clippedEnd True if end is clipped\n * @private\n */\nconst\n releaseEventActions = {\n releaseElement : 1, // Not used at all at the moment\n reuseElement : 1 // Used by some other element\n },\n renderEventActions = {\n newElement : 1,\n reuseOwnElement : 1,\n reuseElement : 1\n },\n MAX_WIDTH = 9999999,\n heightEventSorter = ({ startDateMS : lhs }, { startDateMS : rhs }) => lhs - rhs,\n chronoFields = {\n startDate : 1,\n endDate : 1,\n duration : 1\n };\nfunction getStartEnd(scheduler, eventRecord, useEnd, fieldName, useEventBuffer) {\n // Must use Model.get in order to get latest values in case we are inside a batch.\n // EventResize changes the endDate using batching to enable a tentative change\n // via the batchedUpdate event which is triggered when changing a field in a batch.\n // Fall back to accessor if propagation has not populated date fields.\n const\n { timeAxis } = scheduler,\n date = eventRecord.isBatchUpdating && !useEventBuffer ? eventRecord.get(fieldName) : eventRecord[fieldName],\n hasBatchedChange = eventRecord.hasBatchedChange?.(fieldName),\n // fillTicks shouldn't be used during resizing for changing date for smooth animation.\n // correct date will be applied after resize, when `isResizing` will be falsy\n useTickDates = scheduler.fillTicks && (!eventRecord.meta?.isResizing || !hasBatchedChange);\n if (useTickDates) {\n let tick = timeAxis.getTickFromDate(date);\n if (tick >= 0) {\n // If date matches a tick start/end, use the earlier tick\n if (useEnd && tick === Math.round(tick) && tick > 0) {\n tick--;\n }\n const\n tickIndex = Math.floor(tick),\n tickRecord = timeAxis.getAt(tickIndex);\n return tickRecord[fieldName].getTime();\n }\n }\n return date?.getTime();\n}\n/**\n * Handles event rendering in Schedulers horizontal mode. Reacts to project/store changes to keep the UI up to date.\n *\n * @internal\n */\nexport default class HorizontalRendering extends Base.mixin(AttachToProjectMixin) {\n //region Config & Init\n static $name = 'HorizontalRendering';\n static get configurable() {\n return {\n /**\n * Amount of pixels to extend the current visible range at both ends with when deciding which events to\n * render. Only applies when using labels or for milestones\n * @config {Number}\n * @default\n */\n bufferSize : 150,\n verticalBufferSize : 150\n };\n }\n static get properties() {\n return {\n // Map with event DOM configs, keyed by resource id\n resourceMap : new Map(),\n // Map with visible events DOM configs, keyed by row instance\n rowMap : new Map(),\n eventConfigs : [],\n // Flag to avoid transitioning on first refresh\n isFirstRefresh : true,\n toDrawOnProjectRefresh : new Set(),\n toDrawOnDataReady : new Set()\n };\n }\n construct(scheduler) {\n const me = this;\n me.client = me.scheduler = scheduler;\n me.eventSorter = me.eventSorter.bind(scheduler);\n me.scrollBuffer = scheduler.scrollBuffer;\n // Catch scroll before renderers are called\n scheduler.scrollable.ion({\n scroll : 'onEarlyScroll',\n prio : 1,\n thisObj : me\n });\n scheduler.rowManager.ion({\n name : 'rowManager',\n renderDone : 'onRenderDone',\n removeRows : 'onRemoveRows',\n translateRow : 'onTranslateRow',\n offsetRows : 'onOffsetRows',\n beforeRowHeight : 'onBeforeRowHeightChange',\n thisObj : me\n });\n super.construct({});\n }\n init() {}\n updateVerticalBufferSize() {\n const { rowManager } = this.scheduler;\n if (this.scheduler.isPainted) {\n // Refresh rows when vertical buffer size changes to trigger event repaint. Required for the export feature.\n rowManager.renderRows(rowManager.rows);\n }\n }\n //endregion\n //region Region, dates & coordinates\n get visibleDateRange() {\n return this._visibleDateRange;\n }\n getDateFromXY(xy, roundingMethod, local, allowOutOfRange = false) {\n const { scheduler } = this;\n let coord = xy[0];\n if (!local) {\n coord = this.translateToScheduleCoordinate(coord);\n }\n coord = scheduler.getRtlX(coord);\n return scheduler.timeAxisViewModel.getDateFromPosition(coord, roundingMethod, allowOutOfRange);\n }\n translateToScheduleCoordinate(x) {\n const\n { scheduler } = this,\n { scrollable } = scheduler.timeAxisSubGrid;\n let result = x - scheduler.timeAxisSubGridElement.getBoundingClientRect().left - globalThis.scrollX;\n // Because we use getBoundingClientRect's left, we have to adjust for page scroll.\n // The vertical counterpart uses the _bodyRectangle which was created with that adjustment.\n if (scheduler.rtl) {\n result += scrollable.maxX - Math.abs(scheduler.scrollLeft);\n }\n else {\n result += scheduler.scrollLeft;\n }\n return result;\n }\n translateToPageCoordinate(x) {\n const\n { scheduler } = this,\n { scrollable } = scheduler.timeAxisSubGrid;\n let result = x + scheduler.timeAxisSubGridElement.getBoundingClientRect().left;\n if (scheduler.rtl) {\n result -= scrollable.maxX - Math.abs(scheduler.scrollLeft);\n }\n else {\n result -= scheduler.scrollLeft;\n }\n return result;\n }\n /**\n * Gets the region, relative to the page, represented by the schedule and optionally only for a single resource.\n * This method will call getDateConstraints to allow for additional resource/event based constraints. By overriding\n * that method you can constrain events differently for different resources.\n * @param {Scheduler.model.ResourceModel} [resourceRecord] (optional) The row record\n * @param {Scheduler.model.EventModel} [eventRecord] (optional) The event record\n * @returns {Core.helper.util.Rectangle} The region of the schedule\n */\n getScheduleRegion(resourceRecord, eventRecord, local = true, dateConstraints, stretch = false) {\n const\n me = this,\n { scheduler } = me,\n { timeAxisSubGridElement, timeAxis } = scheduler,\n { start, end } = (!stretch || resourceRecord) && scheduler.getResourceMarginObject(resourceRecord) || { start : 0, end : 0 };\n let region;\n if (resourceRecord) {\n const\n row = scheduler.getRowById(resourceRecord.id),\n eventElement = eventRecord && scheduler.getElementsFromEventRecord(eventRecord, resourceRecord)[0];\n // If the row is in rendered space, use its rectangle.\n // If not, use the calculated rectangle. This will be adjusted as we respond\n // to change events\n region = row ? Rectangle.from(row.getElement('normal'), timeAxisSubGridElement) : scheduler.getRecordCoords(resourceRecord, true);\n if (eventElement) {\n const eventRegion = Rectangle.from(eventElement, timeAxisSubGridElement);\n region.y = eventRegion.y;\n region.bottom = eventRegion.bottom;\n }\n else {\n region.y = region.y + start;\n region.bottom = region.bottom - end;\n }\n }\n else {\n // The coordinate space needs to be sorted out here!\n region = Rectangle.from(timeAxisSubGridElement).moveTo(null, 0);\n region.width = timeAxisSubGridElement.scrollWidth;\n region.y = region.y + start;\n region.bottom = region.bottom - end;\n }\n const\n taStart = timeAxis.startDate,\n taEnd = timeAxis.endDate;\n dateConstraints = (dateConstraints?.start && dateConstraints) || scheduler.getDateConstraints?.(resourceRecord, eventRecord) || {\n start : taStart,\n end : taEnd\n };\n let startX = scheduler.getCoordinateFromDate(dateConstraints.start ? DateHelper.max(taStart, dateConstraints.start) : taStart),\n endX = scheduler.getCoordinateFromDate(dateConstraints.end ? DateHelper.min(taEnd, dateConstraints.end) : taEnd);\n if (!local) {\n startX = me.translateToPageCoordinate(startX);\n endX = me.translateToPageCoordinate(endX);\n }\n region.left = Math.min(startX, endX);\n region.right = Math.max(startX, endX);\n return region;\n }\n /**\n * Gets the Region, relative to the timeline view element, representing the passed row and optionally just for a\n * certain date interval.\n * @param {Core.data.Model} rowRecord The row record\n * @param {Date} startDate A start date constraining the region\n * @param {Date} endDate An end date constraining the region\n * @returns {Core.helper.util.Rectangle} The Rectangle which encapsulates the row\n */\n getRowRegion(rowRecord, startDate, endDate) {\n const\n { scheduler } = this,\n { timeAxis } = scheduler,\n row = scheduler.getRowById(rowRecord.id);\n // might not be rendered\n if (!row) {\n return null;\n }\n const\n taStart = timeAxis.startDate,\n taEnd = timeAxis.endDate,\n start = startDate ? DateHelper.max(taStart, startDate) : taStart,\n end = endDate ? DateHelper.min(taEnd, endDate) : taEnd,\n startX = scheduler.getCoordinateFromDate(start),\n endX = scheduler.getCoordinateFromDate(end, true, true),\n y = row.top,\n x = Math.min(startX, endX),\n bottom = y + row.offsetHeight;\n return new Rectangle(x, y, Math.max(startX, endX) - x, bottom - y);\n }\n getResourceEventBox(eventRecord, resourceRecord, includeOutside, roughly = false) {\n const\n { scheduler } = this,\n resourceData = this.resourceMap.get(resourceRecord.id);\n let eventLayout = null,\n approx = false;\n if (resourceData) {\n eventLayout = resourceData.eventsData.find(d => d.eventRecord === eventRecord);\n }\n // Outside of view, layout now if supposed to be included\n if (!eventLayout) {\n eventLayout = this.getTimeSpanRenderData(\n eventRecord,\n resourceRecord,\n { viewport : true, timeAxis : includeOutside }\n );\n approx = true;\n }\n if (eventLayout) {\n // Event layout is relative to row, need to make to absolute before returning\n const\n // Event might be outside visible area, estimate the height (for managedEventSizing = false case)\n boxHeight = eventLayout.height ?? scheduler.getResourceLayoutSettings(resourceRecord).contentHeight,\n rowBox = scheduler.rowManager.getRecordCoords(resourceRecord, true, roughly),\n absoluteTop = eventLayout.top + rowBox.top,\n box = new Rectangle(eventLayout.left, absoluteTop, eventLayout.width, boxHeight);\n // Flag informing other parts of the code that this box is approximated\n box.layout = !approx;\n box.rowTop = rowBox.top;\n box.rowBottom = rowBox.bottom;\n box.resourceId = resourceRecord.id;\n return box;\n }\n return null;\n }\n //endregion\n //region Element <-> Record mapping\n resolveRowRecord(elementOrEvent) {\n const\n me = this,\n { scheduler } = me,\n element = elementOrEvent.nodeType ? elementOrEvent : elementOrEvent.target,\n // Fix for FF on Linux having text nodes as event.target\n el = element.nodeType === Element.TEXT_NODE ? element.parentElement : element,\n eventNode = el.closest(scheduler.eventSelector);\n if (eventNode) {\n return me.resourceStore.getById(eventNode.dataset.resourceId);\n }\n // When resourceNonWorkingTime.enableMouseEvents is set to true, and the current element is a resource non working time range,\n // in order to get the corresponding resource row, we need to read from data-resource-id attribute.\n // That's because element has not a .b-grid-row as parent when enableMouseEvents is set to true.\n if (!el.closest('.b-grid-row') && el.dataset.resourceId) {\n return me.resourceStore.getById(el.dataset.resourceId);\n }\n return scheduler.getRecordFromElement(el);\n }\n //endregion\n //region Project\n attachToProject(project) {\n super.attachToProject(project);\n this.refreshAllWhenReady = true;\n // Perform a full clear when replacing the project, to not leave any references to old project in DOM\n if (!this.scheduler.isConfiguring) {\n this.clearAll({ clearDom : true });\n }\n project?.ion({\n name : 'project',\n refresh : 'onProjectRefresh',\n commitFinalized : 'onProjectCommitFinalized',\n thisObj : this\n });\n }\n onProjectCommitFinalized() {\n const { scheduler, toDrawOnDataReady, project } = this;\n // Only update the UI immediately if we are visible\n if (scheduler.isVisible) {\n if (scheduler.isPainted && !scheduler.refreshSuspended) {\n // If this is a timezone commit, we got here from a store dataset\n // We need to do a full refresh\n if (!toDrawOnDataReady.size && project.timeZone != null && project.ignoreRecordChanges) {\n project.resourceStore.forEach(r => toDrawOnDataReady.add(r.id));\n }\n if (toDrawOnDataReady.size) {\n this.clearResources(toDrawOnDataReady);\n this.refreshResources(toDrawOnDataReady);\n }\n toDrawOnDataReady.clear();\n }\n }\n // Otherwise wait till next time we get painted (shown, or a hidden ancestor shown)\n else {\n scheduler.whenVisible('refreshRows');\n }\n }\n onProjectRefresh({ isCalculated, isInitialCommit }) {\n const\n me = this,\n { scheduler, toDrawOnProjectRefresh } = me;\n // Only update the UI immediately if we are visible\n if (scheduler.isVisible) {\n if (scheduler.isPainted && !scheduler.isConfiguring && !scheduler.refreshSuspended) {\n // Either refresh all rows (on for example dataset or when delayed calculations are finished)\n if (me.refreshAllWhenReady || (isInitialCommit && isCalculated)) {\n scheduler.calculateAllRowHeights(true);\n const { rowManager } = scheduler;\n // Rows rendered? Refresh\n if (rowManager.topRow) {\n me.clearAll();\n // Refresh only if it won't be refreshed elsewhere (SchedulerStore#onProjectRefresh())\n if (!scheduler.refreshAfterProjectRefresh) {\n // If refresh was suspended when replacing the dataset in a scrolled view we might end up with a\n // topRow outside of available range -> reset it. Call renderRows() to mimic what normally happens\n // when refresh is not suspended\n if (rowManager.topRow.dataIndex >= scheduler.store.count) {\n scheduler.renderRows(false);\n }\n else {\n // Don't transition first refresh / early render\n scheduler.refreshWithTransition(false, !me.isFirstRefresh && isCalculated && !isInitialCommit);\n }\n }\n me.isFirstRefresh = false;\n }\n // No rows yet, reinitialize (happens if initial project empty and then non empty project assigned)\n else {\n rowManager.reinitialize();\n }\n me.refreshAllWhenReady = false;\n }\n // Or only affected rows (if any)\n else if (toDrawOnProjectRefresh.size) {\n me.refreshResources(toDrawOnProjectRefresh);\n }\n toDrawOnProjectRefresh.clear();\n }\n }\n // Otherwise wait till next time we get painted (shown, or a hidden ancestor shown)\n else {\n scheduler.whenVisible('refresh', scheduler, [true]);\n }\n }\n //endregion\n //region AssignmentStore\n attachToAssignmentStore(assignmentStore) {\n this.refreshAllWhenReady = true;\n super.attachToAssignmentStore(assignmentStore);\n if (assignmentStore) {\n assignmentStore.ion({\n name : 'assignmentStore',\n changePreCommit : 'onAssignmentStoreChange',\n refreshPreCommit : 'onAssignmentStoreRefresh',\n thisObj : this\n });\n }\n }\n onAssignmentStoreChange({ source, action, records : assignmentRecords = [], replaced, changes }) {\n const\n me = this,\n { scheduler } = me,\n resourceIds = new Set(assignmentRecords.flatMap(assignmentRecord => ([\n assignmentRecord.resourceId,\n // Also include any linked resources (?. twice since resource might not be resolved and point to id)\n ...assignmentRecord.resource?.$links?.map(link => link.id) ?? []\n ])));\n // Ignore assignment changes caused by removing resources, the remove will redraw things anyway\n // Also ignore case when resource id is changed. In this case row will be refreshed by the grid\n if (me.resourceStore.isRemoving || me.resourceStore.isChangingId) {\n return;\n }\n switch (action) {\n // These operations will invalidate the graph, need to draw later\n case 'dataset': {\n // Ignore dataset when using single assignment mode\n if (!me.eventStore.usesSingleAssignment) {\n if (resourceIds.size) {\n me.refreshResourcesWhenReady(resourceIds);\n }\n else {\n me.clearAll();\n scheduler.refreshWithTransition();\n }\n }\n return;\n }\n case 'add':\n case 'remove':\n case 'updateMultiple':\n me.refreshResourcesWhenReady(resourceIds);\n return;\n case 'removeall':\n me.refreshAllWhenReady = true;\n return;\n case 'replace':\n // Gather resources from both the old record and the new one\n replaced.forEach(([oldAssignment, newAssignment]) => {\n resourceIds.add(oldAssignment.resourceId);\n resourceIds.add(newAssignment.resourceId);\n });\n // And refresh them\n me.refreshResourcesWhenReady(resourceIds);\n return;\n // These operations won't invalidate the graph, redraw now\n case 'filter':\n me.clearAll();\n scheduler.calculateAllRowHeights(true);\n scheduler.refreshWithTransition();\n return;\n case 'update': {\n if ('eventId' in changes || 'resourceId' in changes || 'id' in changes) {\n // When reassigning, clear old resource also\n if ('resourceId' in changes) {\n resourceIds.add(changes.resourceId.oldValue);\n }\n // When chaining stores in single assignment mode, we might not be the project store\n if (source === scheduler.project.assignmentStore) {\n me.refreshResourcesOnDataReady(resourceIds);\n }\n // Refresh directly when we are not\n else {\n me.refreshResources(resourceIds);\n }\n }\n break;\n }\n case 'clearchanges': {\n const { added, modified, removed } = changes;\n // If modified records appear in the clearchanges action we need to refresh entire view\n // because we have not enough information about previously assigned resource\n if (modified.length) {\n scheduler.refreshWithTransition();\n }\n else {\n added.forEach(r => resourceIds.add(r.resourceId));\n removed.forEach(r => resourceIds.add(r.resourceId));\n me.refreshResourcesOnDataReady(resourceIds);\n }\n }\n }\n }\n onAssignmentStoreRefresh({ action, records }) {\n if (action === 'batch') {\n this.clearAll();\n this.scheduler.refreshWithTransition();\n }\n }\n //endregion\n //region EventStore\n attachToEventStore(eventStore) {\n this.refreshAllWhenReady = true;\n super.attachToEventStore(eventStore);\n if (eventStore) {\n eventStore.ion({\n name : 'eventStore',\n addConfirmed : 'onEventStoreAddConfirmed',\n refreshPreCommit : 'onEventStoreRefresh',\n thisObj : this\n });\n }\n }\n onEventStoreAddConfirmed({ record }) {\n for (const element of this.client.getElementsFromEventRecord(record)) {\n element.classList.remove('b-iscreating');\n }\n }\n onEventStoreRefresh({ action }) {\n if (action === 'batch') {\n const { scheduler } = this;\n if (scheduler.isEngineReady && scheduler.isPainted) {\n this.clearAll();\n scheduler.refreshWithTransition();\n }\n }\n }\n onEventStoreChange({ action, records : eventRecords = [], record, replaced, changes, source }) {\n const\n me = this,\n { scheduler } = me,\n isResourceTimeRange = source.isResourceTimeRangeStore,\n resourceIds = new Set();\n if (!scheduler.isPainted) {\n return;\n }\n eventRecords.forEach(eventRecord => {\n // Update all resource rows to which this event is assigned *if* the resourceStore\n // contains that resource (We could have filtered the resourceStore)\n const renderedEventResources = eventRecord.$linkedResources?.filter(r => me.resourceStore.includes(r));\n // When rendering a Gantt project, the project model also passes through here -> no `resources`\n renderedEventResources?.forEach(resourceRecord => resourceIds.add(resourceRecord.id));\n });\n if (isResourceTimeRange) {\n switch (action) {\n // - dataset cant pass through same path as events, which relies on project being invalidated. and\n // resource time ranges does not pass through engine\n // - removeall also needs special path, since no resources to redraw will be collected\n case 'removeall':\n case 'dataset':\n me.clearAll();\n scheduler.refreshWithTransition();\n return;\n }\n me.refreshResources(resourceIds);\n }\n else {\n switch (action) {\n // No-ops\n case 'batch': // Handled elsewhere, don't want it to clear again\n case 'sort': // Order in EventStore does not matter, so these actions are no-ops\n case 'group':\n case 'move':\n return;\n case 'remove':\n // Remove is a no-op since assignment will also be removed\n return;\n case 'clearchanges':\n me.clearAll();\n scheduler.refreshWithTransition();\n return;\n case 'dataset': {\n me.clearAll();\n // This is mainly for chained stores, where data is set from main store without project being\n // invalidated. Nothing to wait for, refresh now\n if (scheduler.isEngineReady) {\n scheduler.refreshWithTransition();\n }\n else {\n me.refreshAllWhenReady = true;\n }\n return;\n }\n case 'add':\n case 'updateMultiple':\n // Just refresh below\n break;\n case 'replace':\n // Gather resources from both the old record and the new one\n replaced.forEach(([, newEvent]) => {\n // Old cleared by changed assignment\n newEvent.resources.map(resourceRecord => resourceIds.add(resourceRecord.id));\n });\n break;\n case 'removeall':\n case 'filter':\n // Filter might be caused by add retriggering filters, in which case we need to refresh later\n if (!scheduler.isEngineReady) {\n me.refreshAllWhenReady = true;\n return;\n }\n // Clear all when filtering for simplicity. If that turns out to give bad performance, one would need to\n // figure out which events was filtered out and only clear their resources.\n me.clearAll();\n scheduler.calculateAllRowHeights(true);\n scheduler.refreshWithTransition();\n return;\n case 'update': {\n // Check if changes are graph related or not\n const allChrono = record.$entity\n ? !Object.keys(changes).some(name => !record.$entity.getField(name))\n : !Object.keys(changes).some(name => !chronoFields[name]);\n let dateChanges = 0;\n 'startDate' in changes && dateChanges++;\n 'endDate' in changes && dateChanges++;\n 'duration' in changes && dateChanges++;\n if ('resourceId' in changes) {\n resourceIds.add(changes.resourceId.oldValue);\n }\n // If we have a set of resources to update, refresh them.\n // Always redraw non chrono changes (name etc) and chrono changes that can affect appearance\n if (\n resourceIds.size && (\n !allChrono ||\n // Skip case when changed \"duration\" only (w/o start/end affected)\n dateChanges && !('duration' in changes && dateChanges === 1) ||\n 'percentDone' in changes ||\n 'inactive' in changes ||\n 'constraintDate' in changes ||\n 'constraintType' in changes ||\n 'segments' in changes\n )\n ) {\n const { eventResize, eventDragCreate } = scheduler.features;\n // Cheaper updates when resizing/drag creating using lockLayout\n if (record.isBatchUpdating && ((eventResize?.isResizing && eventResize.lockLayout) || (eventDragCreate?.isResizing && eventDragCreate.lockLayout))) {\n for (const id of resourceIds) {\n me.refreshEventsForResource(scheduler.resourceStore.getById(id), undefined, false);\n }\n me.onRenderDone();\n }\n // If we are finalizing data loading let's delay the resources refresh till all the\n // propagation results get into stores\n else if (me.project?.propagatingLoadChanges || me.project?.isWritingData) {\n me.refreshResourcesOnDataReady(resourceIds);\n }\n else {\n me.refreshResources(resourceIds);\n }\n }\n return;\n }\n }\n me.refreshResourcesWhenReady(resourceIds);\n }\n }\n //endregion\n //region ResourceStore\n attachToResourceStore(resourceStore) {\n this.refreshAllWhenReady = true;\n super.attachToResourceStore(resourceStore);\n if (resourceStore) {\n this.clearAll({ clearLayoutCache : true });\n resourceStore.ion({\n name : 'resourceStore',\n changePreCommit : 'onResourceStoreChange',\n thisObj : this\n });\n }\n }\n get resourceStore() {\n return this.client.store;\n }\n onResourceStoreChange({ action, isExpand, records, changes }) {\n const\n me = this,\n // Update link + original when asked for link\n resourceIds = records?.flatMap(r => r.isLinked ? [r.id, r.$originalId] : [r.id]);\n if (!me.scheduler.isPainted) {\n return;\n }\n switch (action) {\n case 'add':\n // #635 Events disappear when toggling other node\n // If we are expanding project won't fire refresh event\n if (!isExpand) {\n // Links won't cause calculations, refresh now\n if (records.every(r => r.isLinked)) {\n me.refreshResources(resourceIds);\n }\n // Otherwise refresh when project is ready\n else {\n me.refreshResourcesWhenReady(resourceIds);\n }\n }\n return;\n case 'update': {\n // Ignore changes from project commit, if they affect events they will be redrawn anyway\n // Also ignore explicit transformation of leaf <-> parent\n if (!me.project.isChangeTrackingSuspended && !changes.isLeaf) {\n // Resource changes might affect events, refresh\n me.refreshResources(resourceIds);\n }\n return;\n }\n case 'filter':\n // Bail out on filter action. Map was already updated on `refresh` event triggered before this `change`\n // one. And extra records are removed from rowMap by `onRemoveRows`\n return;\n case 'removeall':\n me.clearAll({ clearLayoutCache : true });\n return;\n // We must not clear all resources when whole dataset changes\n // https://github.com/bryntum/support/issues/3292\n case 'dataset':\n return;\n }\n resourceIds && me.clearResources(resourceIds);\n }\n //endregion\n //region RowManager\n onTranslateRow({ row }) {\n // Newly added rows are translated prior to having an id, rule those out since they will be rendered later\n if (row.id != null) {\n // Event layouts are stored relative to the resource, only need to rerender the row to have its absolute\n // position updated to match new translation\n this.refreshEventsForResource(row, false);\n }\n }\n // RowManager error correction, cached layouts will no longer match.\n // Redraw to have events correctly positioned for dependency feature to draw to their elements\n onOffsetRows() {\n this.clearAll();\n this.doUpdateTimeView();\n }\n // Used to pre-calculate row heights\n calculateRowHeight(resourceRecord) {\n const\n { scheduler } = this,\n rowHeight = scheduler.getResourceHeight(resourceRecord),\n eventLayout = scheduler.getEventLayout(resourceRecord),\n layoutType = eventLayout.type,\n lockLayout = scheduler.features.eventResize?.lockLayout;\n if (\n layoutType === 'stack' &&\n scheduler.isEngineReady &&\n !resourceRecord.isSpecialRow &&\n // Generated parents when TreeGrouping do not have assigned bucket\n resourceRecord.assigned?.size > 1\n ) {\n const\n {\n assignmentStore,\n eventStore,\n timeAxis\n } = scheduler,\n {\n barMargin,\n resourceMarginObject : { total },\n contentHeight\n } = scheduler.getResourceLayoutSettings(resourceRecord),\n // When using an AssignmentStore we will get all events for the resource even if the EventStore is\n // filtered\n eventFilter = (eventStore.isFiltered || assignmentStore.isFiltered) && (eventRecord =>\n eventRecord.assignments.some(a => a.resource === resourceRecord.$original && assignmentStore.includes(a))),\n events = eventStore\n .getEvents({\n resourceRecord,\n includeOccurrences : scheduler.enableRecurringEvents,\n startDate : timeAxis.startDate,\n endDate : timeAxis.endDate,\n filter : eventFilter\n })\n .sort(heightEventSorter)\n .map(eventRecord => {\n const\n useCurrent = eventRecord.isBatchUpdating && !(lockLayout && eventRecord.meta?.isResizing),\n // Must use Model.get in order to get latest values in case we are inside a batch.\n // EventResize changes the endDate using batching to enable a tentative change\n // via the batchedUpdate event which is triggered when changing a field in a batch.\n // Fall back to accessor if propagation has not populated date fields.\n startDate = useCurrent ? eventRecord.get('startDate') : eventRecord.startDate,\n endDate = useCurrent ? eventRecord.get('endDate') : eventRecord.endDate || startDate;\n return {\n eventRecord,\n resourceRecord,\n startMS : startDate.getTime(),\n endMS : endDate.getTime()\n };\n }),\n layoutHandler = scheduler.getEventLayoutHandler(eventLayout),\n nbrOfBandsRequired = layoutHandler.layoutEventsInBands(events, resourceRecord, true);\n if (layoutHandler.type === 'layoutFn') {\n return nbrOfBandsRequired;\n }\n return (nbrOfBandsRequired * contentHeight) + ((nbrOfBandsRequired - 1) * barMargin) + total;\n }\n return rowHeight;\n }\n //endregion\n //region TimeAxis\n doUpdateTimeView() {\n const { scrollable } = this.scheduler.timeAxisSubGrid;\n // scrollLeft is the DOM's concept which is -ve in RTL mode.\n // scrollX is always the +ve scroll offset from the origin.\n // Both may be needed for different calculations.\n this.updateFromHorizontalScroll(scrollable.x, true);\n }\n onTimeAxisViewModelUpdate() {\n const\n me = this,\n { scheduler } = me;\n me.clearAll();\n // If refresh is suspended, update timeView as soon as refresh gets unsuspended\n if (scheduler.refreshSuspended) {\n me.detachListeners('renderingSuspend');\n scheduler.ion({\n name : 'renderingSuspend',\n resumeRefresh({ trigger }) {\n // This code will try to refresh rows, but resumeRefresh event doesn't guarantee rowManager rows are\n // in actual state. e.g. if resources were removed during a suspended refresh rowManager won't get a\n // chance to update them until `refresh` event from the project. We can safely update the view only\n // if engine in ready (not committing), otherwise we leave refresh a liability of normal project refresh\n // logic. Covered by SchedulerRendering.t.js\n // https://github.com/bryntum/support/issues/1462\n if (scheduler.isEngineReady && trigger) {\n me.doUpdateTimeView();\n }\n },\n thisObj : me,\n once : true\n });\n }\n // Call update anyway. If refresh is suspended this call will only update visible date range and will not redraw rows\n me.doUpdateTimeView();\n }\n //endregion\n //region Dependency connectors\n /**\n * Gets displaying item start side\n *\n * @param {Scheduler.model.EventModel} eventRecord\n * @returns {'start'|'end'|'top'|'bottom'} 'start' / 'end' / 'top' / 'bottom'\n */\n getConnectorStartSide(eventRecord) {\n return 'start';\n }\n /**\n * Gets displaying item end side\n *\n * @param {Scheduler.model.EventModel} eventRecord\n * @returns {'start'|'end'|'top'|'bottom'} 'start' / 'end' / 'top' / 'bottom'\n */\n getConnectorEndSide(eventRecord) {\n return 'end';\n }\n //endregion\n //region Scheduler hooks\n refreshRows(reLayoutEvents) {\n if (reLayoutEvents) {\n this.clearAll();\n }\n }\n // Clear events in case they use date as part of displayed info\n onLocaleChange() {\n this.clearAll();\n }\n // Called when viewport size changes\n onViewportResize(width, height, oldWidth, oldHeight) {\n // We don't draw events for all rendered rows, \"refresh\" when height changes to make sure events in previously\n // invisible rows gets displayed\n if (height > oldHeight) {\n this.onRenderDone();\n }\n }\n // Called from EventDrag\n onDragAbort({ context, dragData }) {\n // Aborted a drag in a scrolled scheduler, with origin now out of view. Element is no longer needed\n if (this.resourceStore.indexOf(dragData.record.resource) < this.scheduler.topRow.dataIndex) {\n context.element.remove();\n }\n }\n // Called from EventSelection\n toggleCls(assignmentRecord, cls, add = true, useWrapper = false, checkReleased = false) {\n const\n element = this.client.getElementFromAssignmentRecord(assignmentRecord, useWrapper, checkReleased),\n resourceData = this.resourceMap.get(assignmentRecord.isModel ? assignmentRecord.get('resourceId') : assignmentRecord.resourceId),\n eventData = resourceData?.eventsData.find(d => d.eventId === assignmentRecord.eventId);\n // Update cached config\n if (eventData) {\n eventData[useWrapper ? 'wrapperCls' : 'cls'][cls] = add;\n }\n // Live update element\n if (element) {\n // Update element\n element.classList.toggle(cls, add);\n // And its DOM config\n element.lastDomConfig.className[cls] = add;\n }\n }\n // React to rows being removed, refreshes view without any relayouting needed since layout is cached relative to row\n onRemoveRows({ rows }) {\n rows.forEach(row => this.rowMap.delete(row));\n this.onRenderDone();\n }\n // Reset renderer flag before any renderers are called\n onEarlyScroll() {\n this.rendererCalled = false;\n }\n // If vertical scroll did not cause a renderer to be called we still want to update since we only draw events in\n // view, \"independent\" from their rows\n updateFromVerticalScroll() {\n this.fromScroll = true;\n if (!this.rendererCalled) {\n this.onRenderDone();\n }\n }\n // Update header range on horizontal scroll. No need to draw any tasks, Gantt only cares about vertical scroll\n updateFromHorizontalScroll(scrollX, force) {\n const\n me = this,\n {\n scheduler,\n scrollBuffer\n } = me,\n renderAll = scrollBuffer === -1,\n {\n timeAxisSubGrid,\n timeAxis,\n rtl\n } = scheduler,\n { width } = timeAxisSubGrid,\n { totalSize } = scheduler.timeAxisViewModel,\n start = scrollX,\n // If there are few pixels left from the right most position then just render all remaining ticks,\n // there wouldn't be many. It makes end date reachable with more page zoom levels while not having any poor\n // implications.\n // 5px to make TimeViewRangePageZoom test stable in puppeteer.\n // > 1, Safari reports a scrollWidth of 1 even when there is no scroll\n returnEnd = Math.abs(timeAxisSubGrid.scrollable.maxX) > 1 && Math.abs(timeAxisSubGrid.scrollable.maxX) <= Math.round(start) + 5,\n startDate = renderAll ? timeAxis.startDate : scheduler.getDateFromCoord({ coord : Math.max(0, start - scrollBuffer), ignoreRTL : true }),\n endDate = returnEnd || renderAll ? timeAxis.endDate : (scheduler.getDateFromCoord({ coord : start + width + scrollBuffer, ignoreRTL : true }) || timeAxis.endDate);\n if (\n startDate && !scheduler._viewPresetChanging &&\n // If rendering all, no action needed if scrolling horizontally unless start/end/tick size etc changes\n (!renderAll || force || (startDate - (me._visibleDateRange?.startDate || 0)) || (endDate - (me._visibleDateRange?.endDate || 0)))\n ) {\n me._visibleDateRange = { startDate, endDate, startMS : startDate.getTime(), endMS : endDate.getTime() };\n me.viewportCoords = renderAll ? { left : 0, right : totalSize } : rtl\n // RTL starts all the way to the right (and goes in opposite direction)\n ? { left : totalSize - scrollX - width + scrollBuffer, right : totalSize - scrollX - scrollBuffer }\n // LTR all the way to the left\n : { left : scrollX - scrollBuffer, right : scrollX + width + scrollBuffer };\n // Update timeaxis header making it display the new dates\n const range = scheduler.timeView.range = { startDate, endDate };\n scheduler.internalOnVisibleDateRangeChange(range);\n // If refresh is suspended, someone else is responsible for updating the UI later\n if (!scheduler.refreshSuspended && scheduler.rowManager.rows.length) {\n // Gets here too early in Safari for ResourceHistogram. ResizeObserver triggers a scroll before rows are\n // rendered first time. Could not track down why, bailing out\n if (scheduler.rowManager.rows[0].id === null) {\n return;\n }\n me.fromScroll = true;\n scheduler.rowManager.rows.forEach(row => me.refreshEventsForResource(row, false, false));\n me.onRenderDone();\n }\n }\n }\n // Called from SchedulerEventRendering\n repaintEventsForResource(resourceRecord) {\n this.refreshResources([resourceRecord.id]);\n }\n onBeforeRowHeightChange() {\n // Row height is cached per resource, all have to be re-laid out\n this.clearAll();\n }\n //endregion\n //region Refresh resources\n refreshResourcesOnDataReady(resourceIds) {\n resourceIds.forEach(id => this.toDrawOnDataReady.add(id));\n }\n /**\n * Clears resources directly and redraws them on next project refresh\n * @param {Number[]|String[]} resourceIds\n * @private\n */\n refreshResourcesWhenReady(resourceIds) {\n this.clearResources(resourceIds);\n resourceIds.forEach(id => this.toDrawOnProjectRefresh.add(id));\n }\n /**\n * Clears and redraws resources directly. Respects schedulers refresh suspension\n * @param {Number[]|String[]} ids Resource ids\n * @param {Boolean} [transition] Use transition or not\n * @private\n */\n refreshResources(ids, transition = true) {\n const\n me = this,\n { scheduler } = me;\n me.clearResources(ids);\n if (!scheduler.refreshSuspended) {\n const\n rows = [],\n noRows = [];\n ids.forEach(id => {\n const row = scheduler.getRowById(id);\n if (row) {\n rows.push(row);\n }\n else {\n noRows.push(row);\n }\n });\n scheduler.runWithTransition(() => {\n // Rendering rows populates row heights, but not all resources might have a row in view\n scheduler.calculateRowHeights(noRows.map(id => this.resourceStore.getById(id)), true);\n // Render those that do\n scheduler.rowManager.renderRows(rows);\n }, transition);\n }\n }\n //endregion\n //region Stack & pack\n layoutEventVerticallyStack(bandIndex, eventRecord, resourceRecord) {\n const\n {\n barMargin,\n resourceMarginObject : { start },\n contentHeight\n } = this.scheduler.getResourceLayoutSettings(resourceRecord, eventRecord.parent);\n return bandIndex === 0\n ? start\n : start + bandIndex * contentHeight + bandIndex * barMargin;\n }\n layoutEventVerticallyPack(topFraction, heightFraction, eventRecord, resourceRecord) {\n const\n {\n barMargin,\n resourceMarginObject : { start },\n contentHeight\n } = this.scheduler.getResourceLayoutSettings(resourceRecord, eventRecord.parent),\n count = 1 / heightFraction,\n bandIndex = topFraction * count, // \"y\" within row\n height = (contentHeight - ((count - 1) * barMargin)) * heightFraction,\n top = start + bandIndex * height + bandIndex * barMargin;\n return {\n top, height\n };\n }\n //endregion\n //region Render\n /**\n * Used by event drag features to bring into existence event elements that are outside of the rendered block.\n * @param {Scheduler.model.TimeSpan} eventRecord The event to render\n * @param {Scheduler.model.ResourceModel} [resourceRecord] The event to render\n * @private\n */\n addTemporaryDragElement(eventRecord, resourceRecord = eventRecord.resource) {\n const\n { scheduler } = this,\n renderData = scheduler.generateRenderData(eventRecord, resourceRecord, {\n timeAxis : true,\n viewport : true\n });\n renderData.absoluteTop = renderData.row\n ? (renderData.top + renderData.row.top)\n : scheduler.getResourceEventBox(eventRecord, resourceRecord, true).top;\n const\n domConfig = this.renderEvent(renderData),\n { dataset } = domConfig;\n delete domConfig.tabIndex;\n delete dataset.eventId;\n delete dataset.resourceId;\n delete dataset.assignmentId;\n delete dataset.syncId;\n dataset.transient = true;\n domConfig.parent = this.scheduler.foregroundCanvas;\n // So that the regular DomSyncing which may happen during scroll does not\n // sweep up and reuse the temporary element.\n domConfig.retainElement = true;\n const result = DomHelper.createElement(domConfig);\n result.innerElement = result.firstChild;\n eventRecord.instanceMeta(scheduler).hasTemporaryDragElement = true;\n return result;\n }\n // Earlier start dates are above later tasks\n // If same start date, longer tasks float to top\n // If same start + duration, sort by name\n // Fn can be called with layout date or event records (from EventNavigation)\n eventSorter(a, b) {\n if (this.overlappingEventSorter) {\n return this.overlappingEventSorter(a.eventRecord || a, b.eventRecord || b);\n }\n const\n startA = a.isModel ? a.startDateMS : a.dataStartMS || a.startMS, // dataXX are used if configured with fillTicks\n endA = a.isModel ? a.endDateMS : a.dataEndMS || a.endMS,\n startB = b.isModel ? b.startDateMS : b.dataStartMS || b.startMS,\n endB = b.isModel ? b.endDateMS : b.dataEndMS || b.endMS,\n nameA = a.isModel ? a.name : a.eventRecord.name,\n nameB = b.isModel ? b.name : b.eventRecord.name;\n return startA - startB || endB - endA || (nameA < nameB ? -1 : nameA == nameB ? 0 : 1);\n }\n /**\n * Converts a start/endDate into a MS value used when rendering the event. If scheduler is configured with\n * `fillTicks: true` the value returned will be snapped to tick start/end.\n * @private\n * @param {Scheduler.model.TimeSpan} eventRecord\n * @param {String} startDateField\n * @param {String} endDateField\n * @param {Boolean} useEventBuffer\n * @param {Scheduler.model.ResourceModel} resourceRecord\n * @returns {Object} Object of format { startMS, endMS, durationMS }\n */\n calculateMS(eventRecord, startDateField, endDateField, useEventBuffer, resourceRecord) {\n const\n me = this,\n { scheduler } = me,\n { timeAxisViewModel } = scheduler;\n let startMS = getStartEnd(scheduler, eventRecord, false, startDateField, useEventBuffer),\n endMS = getStartEnd(scheduler, eventRecord, true, endDateField, useEventBuffer),\n durationMS = endMS - startMS;\n if (scheduler.milestoneLayoutMode !== 'default' && durationMS === 0) {\n const\n pxPerMinute = timeAxisViewModel.getSingleUnitInPixels('minute'),\n lengthInPx = scheduler.getMilestoneLabelWidth(eventRecord, resourceRecord),\n duration = lengthInPx * (1 / pxPerMinute);\n durationMS = duration * 60 * 1000;\n if (scheduler.milestoneTextPosition === 'always-outside') {\n // Milestone is offset half a diamond to the left (compensated in CSS with padding) for the layout pass,\n // to take diamond corner into account\n const\n diamondSize = scheduler.getResourceLayoutSettings(resourceRecord, eventRecord.parent).contentHeight,\n diamondMS = diamondSize * (1 / pxPerMinute) * 60 * 1000;\n startMS -= diamondMS / 2;\n endMS = startMS + durationMS;\n }\n else {\n switch (scheduler.milestoneAlign) {\n case 'start':\n case 'left':\n endMS = startMS + durationMS;\n break;\n case 'end':\n case 'right':\n endMS = startMS;\n startMS = endMS - durationMS;\n break;\n default: // using center as default\n endMS = startMS + durationMS / 2;\n startMS = endMS - durationMS;\n break;\n }\n }\n }\n // Normally the event bar element and the event layout use the same timestamps for sizing,\n // but during resize if we have locked the layout we need them to differ\n const\n elementStartMS = startMS,\n elementEndMS = endMS,\n elementDurationMS = durationMS;\n // Use initial values for the layout during resize\n if (eventRecord.meta?.isResizing && scheduler.features.eventResize?.lockLayout) {\n startMS = eventRecord.startDate.getTime();\n endMS = eventRecord.endDate.getTime();\n durationMS = elementEndMS - elementStartMS;\n }\n return {\n startMS,\n endMS,\n durationMS,\n elementStartMS,\n elementEndMS,\n elementDurationMS\n };\n }\n /**\n * Returns event render data except actual position information.\n * @param timeSpan\n * @param rowRecord\n * @returns {HorizontalRenderData}\n * @private\n */\n setupRenderData(timeSpan, rowRecord) {\n const\n me = this,\n { scheduler } = me,\n {\n timeAxis,\n timeAxisViewModel\n } = scheduler,\n {\n preamble,\n postamble\n } = timeSpan,\n useEventBuffer = me.isProHorizontalRendering && scheduler.features.eventBuffer?.enabled &&\n (preamble || postamble) && !timeSpan.isMilestone,\n pxPerMinute = timeAxisViewModel.getSingleUnitInPixels('minute'),\n { isBatchUpdating } = timeSpan,\n startDateField = useEventBuffer ? 'wrapStartDate' : 'startDate',\n endDateField = useEventBuffer ? 'wrapEndDate' : 'endDate',\n // Must use Model.get in order to get latest values in case we are inside a batch.\n // EventResize changes the endDate using batching to enable a tentative change\n // via the batchedUpdate event which is triggered when changing a field in a batch.\n // Fall back to accessor if propagation has not populated date fields.\n // Use endDate accessor if duration has not been propagated to create endDate\n timespanStart = isBatchUpdating && !useEventBuffer ? timeSpan.get(startDateField) : timeSpan[startDateField],\n // Allow timespans to be rendered even when they are missing an end date\n timespanEnd = isBatchUpdating && !useEventBuffer ? timeSpan.get(endDateField) : timeSpan[endDateField] || timespanStart,\n viewStartMS = timeAxis.startMS,\n viewEndMS = timeAxis.endMS,\n // Convert start/end dates to milliseconds, taking fillTicks, lockLayout etc. into account\n msValues = me.calculateMS(timeSpan, startDateField, endDateField, useEventBuffer, rowRecord),\n {\n startMS,\n endMS,\n durationMS\n } = msValues,\n // These flags have two components because includeOutsideViewport\n // means that we can be calculating data for events either side of\n // the TimeAxis.\n // The start is outside of the view if it's before *or after* the TimeAxis range.\n // 1 set means the start is before the TimeAxis\n // 2 set means the start is after the TimeAxis\n // Either way, a truthy value means that the start is outside of the TimeAxis.\n startsOutsideView = startMS < viewStartMS | ((startMS > viewEndMS) << 1),\n // The end is outside of the view if it's before *or after* the TimeAxis range.\n // 1 set means the end is after the TimeAxis\n // 2 set means the end is before the TimeAxis\n // Either way, a truthy value means that the end is outside the TimeAxis.\n endsOutsideView = endMS > viewEndMS | ((endMS <= viewStartMS) << 1),\n durationMinutes = durationMS / (1000 * 60),\n width = endsOutsideView ? pxPerMinute * durationMinutes : null,\n row = scheduler.getRowById(rowRecord);\n return {\n eventRecord : timeSpan,\n taskRecord : timeSpan, // Helps with using Gantt projects in Scheduler Pro\n start : timespanStart,\n end : timespanEnd,\n rowId : rowRecord.id,\n children : [],\n startsOutsideView,\n endsOutsideView,\n width,\n row,\n useEventBuffer,\n ...msValues\n };\n }\n /**\n * Populates render data with information about width and horizontal position of the wrap.\n * @param {HorizontalRenderData} renderData\n * @returns {Boolean}\n * @private\n */\n fillTimeSpanHorizontalPosition(renderData) {\n const\n { elementStartMS : startMS, elementEndMS : endMS, elementDurationMS : durationMS } = renderData,\n // With delayed calculation there is no guarantee data is normalized, might be missing a crucial component\n result = startMS != null && endMS != null && this.calculateHorizontalPosition(renderData, startMS, endMS, durationMS);\n if (result) {\n Object.assign(renderData, result);\n return true;\n }\n return false;\n }\n /**\n * Fills render data with `left` and `width` properties\n * @param {HorizontalRenderData} renderData\n * @param {Number} startMS\n * @param {Number} endMS\n * @param {Number} durationMS\n * @returns {{left: number, width: number, clippedStart: boolean, clippedEnd: boolean}|null}\n * @private\n */\n calculateHorizontalPosition(renderData, startMS, endMS, durationMS) {\n const\n { scheduler } = this,\n {\n timeAxis,\n timeAxisViewModel\n } = scheduler,\n {\n startsOutsideView,\n endsOutsideView,\n eventRecord\n } = renderData,\n viewStartMS = timeAxis.startMS,\n pxPerMinute = timeAxisViewModel.getSingleUnitInPixels('minute');\n let\n width = null,\n endX = scheduler.getCoordinateFromDate(endMS, {\n local : true,\n respectExclusion : true,\n isEnd : true\n }), startX, clippedStart = false, clippedEnd = false;\n // If event starts outside of view, estimate where.\n if (startsOutsideView) {\n startX = (startMS - viewStartMS) / (1000 * 60) * pxPerMinute;\n // Flip -ve startX to being to the right of the viewport end\n if (scheduler.rtl) {\n startX = timeAxisViewModel.totalSize - startX;\n }\n }\n // Starts in view, calculate exactly\n else {\n // If end date is included in time axis but start date is not (when using time axis exclusions), snap start date to next included data\n startX = scheduler.getCoordinateFromDate(startMS, {\n local : true,\n respectExclusion : true,\n isEnd : false,\n snapToNextIncluded : endX !== -1\n });\n clippedStart = startX === -1;\n }\n if (endsOutsideView) {\n // Estimate where the end is, based on where time axis ends + how much the event overflows\n const\n distanceToTimeAxisEnd = timeAxisViewModel.totalSize - startX,\n overflowDurationMS = endMS - timeAxis.endMS,\n overflowDurationMinutes = overflowDurationMS / (1000 * 60);\n width = scheduler.rtl\n ? pxPerMinute * durationMS / (1000 * 60)\n : distanceToTimeAxisEnd + pxPerMinute * overflowDurationMinutes;\n // Have to clip the events in Safari when using stickyEvents, it does not support `overflow: clip`\n if (BrowserHelper.isSafari && scheduler.features.stickyEvents && timeAxis.endMS) {\n endX = scheduler.getCoordinateFromDate(timeAxis.endMS);\n }\n else {\n // Parentheses needed\n endX = startX + width * (scheduler.rtl ? -1 : 1);\n }\n }\n else {\n clippedEnd = endX === -1;\n }\n if (clippedEnd && !clippedStart) {\n // We know where to start but not where to end, snap it (the opposite is already handled by the\n // snapToNextIncluded flag when calculating startX above)\n endX = scheduler.getCoordinateFromDate(endMS, {\n local : true,\n respectExclusion : true,\n isEnd : true,\n snapToNextIncluded : true\n });\n }\n // If the element is very wide there's no point in displaying it all.\n // Indeed the element may not be displayable at extremely large widths.\n if (width > MAX_WIDTH) {\n // The start is before the TimeAxis start\n if (startsOutsideView === 1) {\n // Both ends outside - spans TimeAxis\n if (endsOutsideView === 1) {\n startX = -100;\n endX = scheduler.timeAxisColumn.width + 100;\n }\n // End is in view\n else {\n startX = endX - MAX_WIDTH;\n }\n }\n // The end is after, but the start is in view\n else if (endsOutsideView === 1) {\n endX = startX + MAX_WIDTH;\n }\n }\n if (clippedStart && clippedEnd) {\n // Both ends excluded, but there might be some part in between that should be displayed...\n startX = scheduler.getCoordinateFromDate(startMS, {\n local : true,\n respectExclusion : true,\n isEnd : false,\n snapToNextIncluded : true,\n max : endMS\n });\n endX = scheduler.getCoordinateFromDate(endMS, {\n local : true,\n respectExclusion : true,\n isEnd : true,\n snapToNextIncluded : true,\n min : startMS\n });\n if (startX === endX) {\n // Raise flag on instance meta to avoid duplicating this logic\n eventRecord.instanceMeta(scheduler).excluded = true;\n // Excluded by time axis exclusion rules, render nothing\n return null;\n }\n }\n return {\n left : Math.min(startX, endX),\n // Use min width 5 for normal events, 0 for milestones (won't have width specified at all in the\n // end). During drag create a normal event can get 0 duration, in this case we still want it to\n // get a min width of 5 (6px for wrapper, -1 px for event element\n width : Math.abs(endX - startX) || (eventRecord.isMilestone && !eventRecord.meta.isDragCreating ? 0 : 6),\n clippedStart,\n clippedEnd\n };\n }\n fillTimeSpanVerticalPosition(renderData, rowRecord) {\n const\n { scheduler } = this,\n { start, end } = renderData,\n {\n resourceMarginObject : { start : resourceMarginStart },\n contentHeight\n } = scheduler.getResourceLayoutSettings(rowRecord);\n // If filling ticks we need to also keep data's MS values, since they are used for sorting timespans\n if (scheduler.fillTicks) {\n renderData.dataStartMS = start.getTime();\n renderData.dataEndMS = end.getTime();\n }\n renderData.top = Math.max(0, resourceMarginStart);\n if (scheduler.managedEventSizing) {\n // Timespan height should be at least 1px\n renderData.height = contentHeight;\n }\n }\n /**\n * Gets timespan coordinates etc. Relative to containing row. If the timespan is outside of the zone in\n * which timespans are rendered, that is outside of the TimeAxis, or outside of the vertical zone in which timespans\n * are rendered, then `undefined` is returned.\n * @private\n * @param {Scheduler.model.TimeSpan} timeSpan TimeSpan record\n * @param {Core.data.Model} rowRecord Row record\n * @param {Boolean|Object} includeOutside Specify true to get boxes for timespans outside of the rendered zone in both\n * dimensions. This option is used when calculating dependency lines, and we need to include routes from timespans\n * which may be outside the rendered zone.\n * @param {Boolean} includeOutside.timeAxis Pass as `true` to include timespans outside of the TimeAxis's bounds\n * @param {Boolean} includeOutside.viewport Pass as `true` to include timespans outside of the vertical timespan viewport's bounds.\n * @returns {{event/task: *, left: number, width: number, start: (Date), end: (Date), startMS: number, endMS: number, startsOutsideView: boolean, endsOutsideView: boolean}}\n */\n getTimeSpanRenderData(timeSpan, rowRecord, includeOutside = false) {\n const data = this.setupRenderData(timeSpan, rowRecord);\n if (!this.fillTimeSpanHorizontalPosition(data)) {\n return null;\n }\n this.fillTimeSpanVerticalPosition(data, rowRecord);\n return data;\n }\n // Layout a set of events, code shared by normal event render path and nested events\n layoutEvents(resourceRecord, allEvents, includeOutside = false, parentEventRecord, eventSorter) {\n const\n me = this,\n { scheduler } = me,\n { timeAxis } = scheduler,\n // Generate layout data\n eventsData = allEvents.reduce((result, eventRecord) => {\n // Only those in time axis (by default)\n if ((includeOutside || timeAxis.isTimeSpanInAxis(eventRecord))) {\n const eventBox = scheduler.generateRenderData(eventRecord, resourceRecord, includeOutside);\n // Collect layouts of visible events\n if (eventBox) {\n result.push(eventBox);\n }\n }\n return result;\n }, []);\n // Ensure the events are rendered in natural order so that navigation works.\n eventsData.sort(eventSorter ?? me.eventSorter);\n let rowHeight = scheduler.getAppliedResourceHeight(resourceRecord, parentEventRecord);\n const\n // Only events and tasks should be considered during layout (not resource time ranges if any, or events\n // being drag created when configured with lockLayout)\n layoutEventData = eventsData.filter(({ eventRecord }) => eventRecord.isEvent && !eventRecord.meta.excludeFromLayout),\n eventLayout = scheduler.getEventLayout(resourceRecord, parentEventRecord),\n layoutHandler = scheduler.getEventLayoutHandler(eventLayout);\n if (layoutHandler) {\n const\n {\n barMargin,\n resourceMarginObject : { total },\n contentHeight\n } = scheduler.getResourceLayoutSettings(resourceRecord, parentEventRecord),\n bandsRequired = layoutHandler.applyLayout(layoutEventData, resourceRecord) || 1;\n if (layoutHandler.type === 'layoutFn') {\n rowHeight = bandsRequired;\n }\n else {\n rowHeight = (bandsRequired * contentHeight) + ((bandsRequired - 1) * barMargin) + total;\n }\n }\n // Apply z-index when event elements might overlap, to keep \"overlap order\" consistent\n else if (layoutEventData.length > 0) {\n for (let i = 0; i < layoutEventData.length; i++) {\n const data = layoutEventData[i];\n // $event-zindex scss var is 5\n data.wrapperStyle += `;z-index:${i + 5}`;\n }\n }\n return { rowHeight, eventsData };\n }\n // Lay out events within a resource, relative to the resource\n layoutResourceEvents(resourceRecord, includeOutside = false) {\n const\n me = this,\n { scheduler } = me,\n {\n eventStore,\n assignmentStore,\n timeAxis\n } = scheduler,\n // Events for this resource\n resourceEvents = eventStore.getEvents({\n includeOccurrences : scheduler.enableRecurringEvents,\n resourceRecord,\n startDate : timeAxis.startDate,\n endDate : timeAxis.endDate,\n filter : (assignmentStore.isFiltered || eventStore.isFiltered) && (eventRecord =>\n eventRecord.assignments.some(a => a.resource === resourceRecord.$original && assignmentStore.includes(a)))\n }),\n // Call a chainable template function on scheduler to allow features to add additional \"events\" to render\n // Currently used by ResourceTimeRanges, CalendarHighlight & NestedEvents\n allEvents = scheduler.getEventsToRender(resourceRecord, resourceEvents) || [];\n return me.layoutEvents(resourceRecord, allEvents, includeOutside);\n }\n // Generates a DOMConfig for an EventRecord\n renderEvent(data, rowHeight) {\n const\n { scheduler } = this,\n { resourceRecord, assignmentRecord, eventRecord } = data,\n // Sync using assignment id for events and event id for ResourceTimeRanges. Add eventId for occurrences to make them unique\n syncId = assignmentRecord\n // Assignment, might be an occurrence\n ? this.assignmentStore.getOccurrence(assignmentRecord, eventRecord).id\n // Something else, probably a ResourceTimeRange\n : data.eventId,\n eventElementConfig = {\n className : data.cls,\n style : data.style || '',\n children : data.children,\n role : 'presentation',\n dataset : {\n // Each feature putting contents in the event wrap should have this to simplify syncing and\n // element retrieval after sync\n taskFeature : 'event'\n },\n syncOptions : {\n syncIdField : 'taskBarFeature'\n }\n },\n // Event element config, applied to existing element or used to create a new one below\n elementConfig = {\n className : data.wrapperCls,\n tabIndex : ('tabIndex' in data) ? data.tabIndex : -1,\n children : [\n eventElementConfig,\n ...data.wrapperChildren\n ],\n style : {\n top : data.absoluteTop,\n left : data.left,\n // ResourceTimeRanges fill row height, cannot be done earlier than this since row height is not\n // known initially\n height : data.fillSize ? rowHeight : data.height,\n // DomHelper appends px to dimensions when using numbers.\n width : data.width,\n style : data.wrapperStyle,\n fontSize : data.height + 'px'\n },\n dataset : {\n // assignmentId is set in this function conditionally\n resourceId : resourceRecord.id,\n eventId : data.eventId, // Not using eventRecord.id to distinguish between Event and ResourceTimeRange\n syncId : resourceRecord.isLinked ? `${syncId}_${resourceRecord.id}` : syncId\n },\n // Will not be part of DOM, but attached to the element\n elementData : data,\n // Dragging etc. flags element as retained, to not reuse/release it during that operation. Events\n // always use assignments, but ResourceTimeRanges does not\n retainElement : assignmentRecord?.instanceMeta(scheduler).retainElement || eventRecord.instanceMeta(scheduler).retainElement,\n // Options for this level of sync, lower levels can have their own\n syncOptions : {\n syncIdField : 'taskFeature',\n // Remove instead of release when a feature is disabled\n releaseThreshold : 0\n }\n };\n // Write back the correct height for elements filling the row, to not derender them later based on wrong height\n if (data.fillSize) {\n data.height = rowHeight;\n }\n // Some browsers throw warnings on zIndex = ''\n if (data.zIndex) {\n elementConfig.zIndex = data.zIndex;\n }\n // Do not want to spam dataset with empty prop when not using assignments (ResourceTimeRanges)\n if (assignmentRecord) {\n elementConfig.dataset.assignmentId = assignmentRecord.id;\n }\n data.elementConfig = elementConfig;\n scheduler.afterRenderEvent({ renderData : data, rowHeight, domConfig : elementConfig });\n return elementConfig;\n }\n /**\n * Refresh events for resource record (or Row), clearing its cache and forcing DOM refresh.\n * @param {Scheduler.model.ResourceModel} recordOrRow Record or row to refresh\n * @param {Boolean} [force] Specify `false` to prevent clearing cache and forcing DOM refresh\n * @internal\n */\n refreshEventsForResource(recordOrRow, force = true, draw = true) {\n const\n me = this,\n record = me.scheduler.store.getById(recordOrRow.isRow ? recordOrRow.id : recordOrRow),\n row = me.scheduler.rowManager.getRowFor(record);\n if (force) {\n me.clearResources([record]);\n }\n if (row && record) {\n me.renderer({ row, record });\n if (force && draw) {\n me.onRenderDone();\n }\n }\n }\n // Returns layout for the current resource. Used by the renderer and exporter\n getResourceLayout(resourceRecord) {\n const me = this;\n // Use cached layout if available\n let resourceLayout = me.resourceMap.get(resourceRecord.id);\n if (!resourceLayout || resourceLayout.invalid) {\n // Previously we would bail out here if engine wasn't ready. Now we instead allow drawing in most cases,\n // since data can be read and written during commit (previously it could not)\n if (me.suspended) {\n return;\n }\n resourceLayout = me.layoutResourceEvents(resourceRecord, false);\n me.resourceMap.set(resourceRecord.id, resourceLayout);\n }\n return resourceLayout;\n }\n getEventDOMConfigForCurrentView(resourceLayout, row, left, right) {\n const\n me = this,\n { bufferSize, scheduler } = me,\n { labels, eventBuffer } = scheduler.features,\n // Left/right labels and event buffer elements require using a buffer to not derender too early\n usesLabels = eventBuffer?.enabled || (labels?.enabled && (labels.left || labels.right || labels.before || labels.after)),\n { eventsData } = resourceLayout,\n // When scrolling, layout will be reused and any events that are still in view can reuse their DOM configs\n reusableDOMConfigs = me.fromScroll ? me.rowMap.get(row) : null,\n eventDOMConfigs = [];\n let useLeft, useRight;\n // Only collect configs for those actually in view\n for (let i = 0; i < eventsData.length; i++) {\n const layout = eventsData[i];\n useLeft = left;\n useRight = right;\n // Labels/milestones requires keeping events rendered longer\n if (usesLabels || layout.width === 0) {\n useLeft -= bufferSize;\n useRight += bufferSize;\n }\n if ((layout.left + layout.width) >= useLeft && layout.left <= useRight) {\n layout.absoluteTop = layout.top + row.top;\n const prevDomConfig = reusableDOMConfigs?.find(config => config.elementData.eventId === layout.eventId &&\n config.elementData.resourceId === layout.resourceId);\n eventDOMConfigs.push(prevDomConfig ?? me.renderEvent(layout, resourceLayout.rowHeight));\n }\n }\n return eventDOMConfigs;\n }\n // Called per row in \"view\", collect configs\n renderer({ row, record : resourceRecord, size = {} }) {\n const me = this;\n // Bail out for group headers/footers\n if (resourceRecord.isSpecialRow) {\n // Clear any cached layout for row retooled to special row, and bail out\n me.rowMap.delete(row);\n return;\n }\n const\n { left, right } = me.viewportCoords,\n resourceLayout = me.getResourceLayout(resourceRecord);\n // Layout is suspended\n if (!resourceLayout) {\n return;\n }\n // Size row to fit events\n size.height = resourceLayout.rowHeight;\n // Avoid storing our calculated height as the rows max height, to not affect next round of calculations\n size.transient = true;\n const eventDOMConfigs = me.getEventDOMConfigForCurrentView(resourceLayout, row, left, right);\n me.rowMap.set(row, eventDOMConfigs);\n // Keep track if we need to draw on vertical scroll or not, to not get multiple onRenderDone() calls\n me.rendererCalled = true;\n }\n // Called when the current row rendering \"pass\" is complete, sync collected configs to DOM\n onRenderDone() {\n const\n { scheduler, rowMap, verticalBufferSize } = this;\n if (scheduler.refreshSuspended) {\n return;\n }\n const\n visibleEventDOMConfigs = [],\n bodyTop = scheduler._scrollTop ?? 0,\n viewTop = bodyTop - verticalBufferSize,\n viewBottom = bodyTop + scheduler._bodyRectangle.height + verticalBufferSize,\n unbuffered = verticalBufferSize < 0,\n unmanagedSize = !scheduler.managedEventSizing;\n // Event configs are collected when rows are rendered, but we do not want to waste resources on rendering\n // events far out of view. Especially with many events per row giving large row heights, rows in the RowManagers\n // buffer might far away -> collect events for rows within viewport + small vertical buffer\n rowMap.forEach((eventDOMConfigs, row) => {\n // Render events \"in view\". Export specifies a negative verticalBufferSize to disable it\n if (unbuffered || (row.bottom > viewTop && row.top < viewBottom)) {\n for (let i = 0; i < eventDOMConfigs.length; i++) {\n const\n config = eventDOMConfigs[i],\n data = config.elementData,\n {\n absoluteTop,\n eventRecord\n } = data;\n // Conditions under which event bars are included in the DOM:\n // If bufferSize is -ve, meaning render all events.\n // scheduler.managedEventSizing is false.\n // The event is being drag-created or drag-resized\n // The event is within the bounds of the rendered region.\n if (unbuffered || unmanagedSize || eventRecord.meta.isDragCreating || eventRecord.meta.isResizing || (absoluteTop + data.height > viewTop && absoluteTop < viewBottom)) {\n visibleEventDOMConfigs.push(config);\n }\n }\n }\n // We are using cached DomConfigs. When DomSync releases an element, it also flags the config as released.\n // Next time we pass it that very same config, it says it is released and nothing shows up.\n //\n // We are breaching the DomSync contract a bit with the cached approach. DomSync expects new configs on each\n // call, so to facilitate that we clone the configs shallowly (nothing deep is affected by sync releasing).\n // That way we can always pass it fresh unreleased configs.\n for (let i = 0; i < eventDOMConfigs.length; i++) {\n eventDOMConfigs[i] = { ...eventDOMConfigs[i] };\n }\n });\n this.fromScroll = false;\n this.visibleEventDOMConfigs = visibleEventDOMConfigs;\n DomSync.sync({\n domConfig : {\n onlyChildren : true,\n children : visibleEventDOMConfigs\n },\n targetElement : scheduler.foregroundCanvas,\n syncIdField : 'syncId',\n // Called by DomSync when it creates, releases or reuses elements\n callback({ action, domConfig, lastDomConfig, targetElement, jsx }) {\n const\n { reactComponent } = scheduler,\n // Some actions are considered first a release and then a render (reusing another element).\n // This gives clients code a chance to clean up before reusing an element\n isRelease = releaseEventActions[action],\n isRender = renderEventActions[action];\n !isRelease && scheduler.processEventContent?.({\n jsx,\n action,\n domConfig,\n targetElement,\n isRelease,\n reactComponent\n });\n if (action === 'none' || !domConfig?.elementData?.isWrap) {\n return;\n }\n // Trigger release for events (it might be a proxy element, skip those)\n if (isRelease && lastDomConfig?.elementData) {\n const\n { eventRecord, resourceRecord, assignmentRecord } = lastDomConfig.elementData,\n event = {\n renderData : lastDomConfig.elementData,\n element : targetElement,\n eventRecord,\n resourceRecord,\n assignmentRecord\n };\n // Process event necessary in the case of release\n scheduler.processEventContent?.({\n isRelease,\n targetElement,\n reactComponent,\n assignmentRecord\n });\n // Some browsers do not blur on set to display:none, so releasing the active element\n // must *explicitly* move focus outwards to the view.\n if (targetElement === DomHelper.getActiveElement(targetElement)) {\n scheduler.focusElement.focus();\n }\n // This event is documented on Scheduler\n scheduler.trigger('releaseEvent', event);\n }\n if (isRender) {\n const\n { eventRecord, resourceRecord, assignmentRecord } = domConfig.elementData,\n event = {\n renderData : domConfig.elementData,\n element : targetElement,\n isReusingElement : action === 'reuseElement',\n isRepaint : action === 'reuseOwnElement',\n eventRecord,\n resourceRecord,\n assignmentRecord\n };\n // Prevent transitions when reusing some other events element\n if (action === 'reuseElement' && scheduler.isAnimating) {\n // No assignments for ResourceTimeRanges\n DomHelper.addTemporaryClass(targetElement, 'b-reusing-own', 50, scheduler, `b-reusing-own-${(assignmentRecord || eventRecord).id}`);\n }\n // This event is documented on Scheduler\n scheduler.trigger('renderEvent', event);\n }\n }\n });\n }\n //endregion\n //region Cache\n // Clears cached resource layout\n clearResources(recordsOrIds) {\n recordsOrIds = ArrayHelper.asArray(recordsOrIds);\n const resourceIds = recordsOrIds.map(Model.asId);\n resourceIds.forEach(resourceId => {\n // Invalidate resourceLayout, keeping it around in case we need it before next refresh\n const cached = this.resourceMap.get(resourceId);\n if (cached) {\n cached.invalid = true;\n }\n const row = this.scheduler.getRowById(resourceId);\n row && this.rowMap.delete(row);\n });\n }\n clearAll({ clearDom = false, clearLayoutCache = false } = {}) {\n const\n me = this,\n { layouts, foregroundCanvas } = me.scheduler;\n if (clearLayoutCache && layouts) {\n for (const layout in layouts) {\n layouts[layout].clearCache();\n }\n }\n // it seems `foregroundCanvas` can be missing at this point\n // for example if scheduler instance is created w/o of `appendTo` config\n if (foregroundCanvas && clearDom) {\n // Start from scratch when replacing the project, to not retain anything in maps or released elements\n foregroundCanvas.syncIdMap = foregroundCanvas.lastDomConfig = foregroundCanvas.releasedIdMap = null;\n for (const child of foregroundCanvas.children) {\n child.lastDomConfig = child.elementData = null;\n }\n }\n me.resourceMap.clear();\n me.rowMap.clear();\n }\n //endregion\n}\nHorizontalRendering._$name = 'HorizontalRendering';", "import PackMixin from './PackMixin.js';\n/**\n * @module Scheduler/eventlayout/VerticalLayout\n */\n/**\n * Assists with event layout in vertical mode, handles `eventLayout: none|pack|mixed`\n * @private\n * @mixes Scheduler/eventlayout/PackMixin\n */\nexport default class VerticalLayout extends PackMixin() {\n static get defaultConfig() {\n return {\n coordProp : 'leftFactor',\n sizeProp : 'widthFactor'\n };\n }\n // Try to pack the events to consume as little space as possible\n applyLayout(events, resourceRecord, parentEventRecord) {\n const\n me = this,\n columnWidth = me.scheduler.getResourceWidth(resourceRecord, parentEventRecord),\n {\n barMargin,\n resourceMarginObject : { start : resourceMarginStart, total : resourceMarginTotal }\n } = me.scheduler.getResourceLayoutSettings(resourceRecord, parentEventRecord),\n eventLayout = me.scheduler.getEventLayout(resourceRecord, parentEventRecord),\n layoutType = eventLayout.type;\n return me.packEventsInBands(events, (tplData, clusterIndex, slot, slotSize) => {\n // Stretch events to fill available width\n if (layoutType === 'none') {\n tplData.width = columnWidth - resourceMarginTotal;\n tplData.left += resourceMarginStart;\n }\n else {\n // Fractions of resource column\n tplData.widthFactor = slotSize;\n const\n leftFactor = tplData.leftFactor = slot.start + (clusterIndex * slotSize),\n // Number of \"columns\" in the current slot\n packColumnCount = Math.round(1 / slotSize),\n // Index among those columns for current event\n packColumnIndex = leftFactor / slotSize,\n // Width with all bar margins subtracted\n availableWidth = columnWidth - resourceMarginTotal - barMargin * (packColumnCount - 1);\n // Allowing two events to overlap? Slightly offset the second\n if (layoutType === 'mixed' && packColumnCount === 2) {\n tplData.left += leftFactor * columnWidth / 5 + barMargin;\n tplData.width = columnWidth - leftFactor * columnWidth / 5 - barMargin * 2;\n tplData.zIndex = 5 + packColumnIndex;\n }\n // Pack by default\n else {\n // Fractional width\n tplData.width = slotSize * availableWidth;\n // Translate to absolute position\n tplData.left += leftFactor * availableWidth + resourceMarginStart + barMargin * packColumnIndex;\n }\n }\n tplData.cls['b-sch-event-narrow'] = tplData.width < me.scheduler.narrowEventWidth;\n });\n }\n}\nVerticalLayout._$name = 'VerticalLayout';", "import Base from '../../../Core/Base.js';\nimport Delayable from '../../../Core/mixin/Delayable.js';\nimport DomHelper from '../../../Core/helper/DomHelper.js';\nimport DomSync from '../../../Core/helper/DomSync.js';\nimport ObjectHelper from '../../../Core/helper/ObjectHelper.js';\nimport VerticalLayout from '../../eventlayout/VerticalLayout.js';\nimport Rectangle from '../../../Core/helper/util/Rectangle.js';\nimport DateHelper from '../../../Core/helper/DateHelper.js';\nimport AttachToProjectMixin from '../../data/mixin/AttachToProjectMixin.js';\n/**\n * @module Scheduler/view/orientation/VerticalRendering\n */\nconst\n releaseEventActions = {\n releaseElement : 1, // Not used at all at the moment\n reuseElement : 1 // Used by some other element\n },\n renderEventActions = {\n newElement : 1,\n reuseOwnElement : 1,\n reuseElement : 1\n },\n chronoFields = {\n startDate : 1,\n endDate : 1,\n duration : 1\n },\n emptyObject = Object.freeze({});\n/**\n * Handles event rendering in Schedulers vertical mode. Reacts to project/store changes to keep the UI up to date.\n *\n * @internal\n */\nexport default class VerticalRendering extends Base.mixin(Delayable, AttachToProjectMixin) {\n //region Config & Init\n static get properties() {\n return {\n eventMap : new Map(),\n resourceMap : new Map(),\n releasedElements : {},\n toDrawOnProjectRefresh : new Set(),\n resourceBufferSize : 1\n };\n }\n construct(scheduler) {\n this.client = this.scheduler = scheduler;\n this.verticalLayout = new VerticalLayout({ scheduler });\n super.construct({});\n }\n init() {\n const\n me = this,\n { scheduler, resourceColumns } = me;\n // Resource header/columns\n resourceColumns.resourceStore = me.resourceStore;\n resourceColumns.ion({\n name : 'resourceColumns',\n columnWidthChange : 'onResourceColumnWidthChange',\n thisObj : me\n });\n me.initialized = true;\n if (scheduler.isPainted) {\n me.renderer();\n }\n resourceColumns.availableWidth = scheduler.timeAxisSubGridElement.offsetWidth;\n }\n //endregion\n //region Elements <-> Records\n resolveRowRecord(elementOrEvent, xy) {\n const\n me = this,\n { scheduler } = me,\n event = elementOrEvent.nodeType ? null : elementOrEvent,\n element = event ? event.target : elementOrEvent,\n coords = event ? [event.borderOffsetX, event.borderOffsetY] : xy,\n // Fix for FF on Linux having text nodes as event.target\n el = element.nodeType === Element.TEXT_NODE ? element.parentElement : element,\n eventElement = el.closest(scheduler.eventSelector);\n if (eventElement) {\n return scheduler.resourceStore.getById(eventElement.dataset.resourceId);\n }\n // Need to be inside schedule at least\n if (!element.closest('.b-sch-timeaxis-cell')) {\n return null;\n }\n if (!coords) {\n throw new Error(`Vertical mode needs coordinates to resolve this element. Can also be called with a browser\n event instead of element to extract element and coordinates from`);\n }\n if (scheduler.variableColumnWidths || scheduler.resourceStore.isGrouped) {\n let totalWidth = 0;\n for (const col of me.resourceStore) {\n if (!col.isSpecialRow) {\n totalWidth += scheduler.getResourceWidth(col);\n }\n if (totalWidth >= coords[0]) {\n return col;\n }\n }\n return null;\n }\n const index = Math.floor(coords[0] / me.resourceColumns.columnWidth);\n return me.allResourceRecords[index];\n }\n toggleCls(assignmentRecord, cls, add = true, useWrapper = false) {\n const eventData = this.eventMap.get(assignmentRecord.eventId)?.[assignmentRecord.resourceId];\n if (eventData) {\n eventData.renderData[useWrapper ? 'wrapperCls' : 'cls'][cls] = add;\n // Element from the map cannot be trusted, might be reused in which case map is not updated to reflect that.\n // To be safe, retrieve using `getElementFromAssignmentRecord`\n const element = this.client.getElementFromAssignmentRecord(assignmentRecord, useWrapper);\n if (element) {\n element.classList[add ? 'add' : 'remove'](cls);\n }\n }\n }\n //endregion\n //region Coordinate <-> Date\n getDateFromXY(xy, roundingMethod, local, allowOutOfRange = false) {\n let coord = xy[1];\n if (!local) {\n coord = this.translateToScheduleCoordinate(coord);\n }\n return this.scheduler.timeAxisViewModel.getDateFromPosition(coord, roundingMethod, allowOutOfRange);\n }\n translateToScheduleCoordinate(y) {\n return y - this.scheduler.timeAxisSubGridElement.getBoundingClientRect().top - globalThis.scrollY;\n }\n translateToPageCoordinate(y) {\n return y + this.scheduler.timeAxisSubGridElement.getBoundingClientRect().top + globalThis.scrollY;\n }\n //endregion\n //region Regions\n getResourceEventBox(event, resource) {\n const\n eventId = event.id,\n resourceId = resource.id;\n let { renderData } = this.eventMap.get(eventId)?.[resourceId] || emptyObject;\n if (!renderData) {\n // Never been in view, lay it out\n this.layoutResourceEvents(this.scheduler.resourceStore.getById(resourceId));\n // Have another go at getting the layout data\n renderData = this.eventMap.get(eventId)?.[resourceId]?.renderData;\n }\n return renderData\n ? new Rectangle(renderData.left, renderData.top, renderData.width, renderData.bottom - renderData.top)\n : null;\n }\n getScheduleRegion(resourceRecord, eventRecord, local) {\n const\n me = this,\n { scheduler } = me,\n // Only interested in width / height (in \"local\" coordinates)\n region = Rectangle.from(scheduler.timeAxisSubGridElement, scheduler.timeAxisSubGridElement);\n if (resourceRecord) {\n region.left = me.allResourceRecords.indexOf(resourceRecord) * scheduler.resourceColumnWidth;\n region.right = region.left + scheduler.resourceColumnWidth;\n }\n const\n start = scheduler.timeAxis.startDate,\n end = scheduler.timeAxis.endDate,\n dateConstraints = scheduler.getDateConstraints?.(resourceRecord, eventRecord) || {\n start,\n end\n },\n startY = scheduler.getCoordinateFromDate(DateHelper.max(start, dateConstraints.start)),\n endY = scheduler.getCoordinateFromDate(DateHelper.min(end, dateConstraints.end));\n if (!local) {\n region.top = me.translateToPageCoordinate(startY);\n region.bottom = me.translateToPageCoordinate(endY);\n }\n else {\n region.top = startY;\n region.bottom = endY;\n }\n return region;\n }\n getRowRegion(resourceRecord, startDate, endDate) {\n const\n me = this,\n { scheduler } = me,\n x = me.allResourceRecords.indexOf(resourceRecord) * scheduler.resourceColumnWidth,\n taStart = scheduler.timeAxis.startDate,\n taEnd = scheduler.timeAxis.endDate,\n start = startDate ? DateHelper.max(taStart, startDate) : taStart,\n end = endDate ? DateHelper.min(taEnd, endDate) : taEnd,\n startY = scheduler.getCoordinateFromDate(start),\n endY = scheduler.getCoordinateFromDate(end, true, true),\n y = Math.min(startY, endY),\n height = Math.abs(startY - endY);\n return new Rectangle(x, y, scheduler.resourceColumnWidth, height);\n }\n get visibleDateRange() {\n const\n scheduler = this.scheduler,\n scrollPos = scheduler.scrollable.y,\n height = scheduler.scrollable.clientHeight,\n startDate = scheduler.getDateFromCoordinate(scrollPos) || scheduler.timeAxis.startDate,\n endDate = scheduler.getDateFromCoordinate(scrollPos + height) || scheduler.timeAxis.endDate;\n return {\n startDate,\n endDate,\n startMS : startDate.getTime(),\n endMS : endDate.getTime()\n };\n }\n //endregion\n //region Events\n // Column width changed, rerender fully\n onResourceColumnWidthChange({ width, oldWidth }) {\n const\n me = this,\n { scheduler } = me;\n // Fix width of column & header\n me.resourceColumns.width = scheduler.timeAxisColumn.width = me.allResourceRecords.length * width;\n me.clearAll();\n // Only transition large changes, otherwise it is janky when dragging slider in demo\n me.refresh(Math.abs(width - oldWidth) > 30);\n // Not detected by resizeobserver? Need to call this for virtual scrolling to react to update\n // scheduler.callEachSubGrid('refreshFakeScroll');\n // scheduler.refreshVirtualScrollbars();\n scheduler.onVisibleResourceColumnChange(width, oldWidth);\n }\n //endregion\n //region Project\n attachToProject(project) {\n super.attachToProject(project);\n if (project) {\n project.ion({\n name : 'project',\n refresh : 'onProjectRefresh',\n thisObj : this\n });\n }\n }\n onProjectRefresh() {\n const\n me = this,\n { scheduler, toDrawOnProjectRefresh } = me;\n // Only update the UI immediately if we are visible\n if (scheduler.isVisible) {\n if (scheduler.rendered && !scheduler.refreshSuspended) {\n // Either refresh all rows (on for example dataset)\n if (me.refreshAllWhenReady) {\n me.clearAll();\n //scheduler.refreshWithTransition();\n me.refresh();\n me.refreshAllWhenReady = false;\n }\n // Or only affected rows (if any)\n else if (toDrawOnProjectRefresh.size) {\n me.refresh();\n }\n toDrawOnProjectRefresh.clear();\n }\n }\n // Otherwise wait till next time we get painted (shown, or a hidden ancestor shown)\n else {\n scheduler.whenVisible('refresh', scheduler, [true]);\n }\n }\n //endregion\n //region EventStore\n attachToEventStore(eventStore) {\n super.attachToEventStore(eventStore);\n this.refreshAllWhenReady = true;\n if (eventStore) {\n eventStore.ion({\n name : 'eventStore',\n addConfirmed : 'onEventStoreAddConfirmed',\n refreshPreCommit : 'onEventStoreRefresh',\n thisObj : this\n });\n }\n }\n onEventStoreAddConfirmed({ record }) {\n for (const element of this.client.getElementsFromEventRecord(record)) {\n element.classList.remove('b-iscreating');\n }\n }\n onEventStoreRefresh({ action }) {\n if (action === 'batch') {\n this.refreshAllWhenReady = true;\n }\n }\n onEventStoreChange({ action, records : eventRecords = [], record, replaced, changes, isAssign }) {\n const\n me = this,\n resourceIds = new Set();\n eventRecords.forEach(eventRecord => {\n // Update all resource rows to which this event is assigned *if* the resourceStore\n // contains that resource (We could have filtered the resourceStore)\n const renderedEventResources = eventRecord.$linkedResources?.filter(r => me.resourceStore.includes(r));\n renderedEventResources?.forEach(resourceRecord => resourceIds.add(resourceRecord.id));\n });\n switch (action) {\n // No-ops\n case 'sort': // Order in EventStore does not matter, so these actions are no-ops\n case 'group':\n case 'move':\n case 'remove': // Remove is a no-op since assignment will also be removed\n case 'batch':\n return;\n case 'dataset':\n me.refreshAllResourcesWhenReady();\n return;\n case 'add':\n case 'updateMultiple':\n // Just refresh below\n break;\n case 'replace':\n // Gather resources from both the old record and the new one\n replaced.forEach(([, newEvent]) => {\n // Old cleared by changed assignment\n newEvent.resources.map(resourceRecord => resourceIds.add(resourceRecord.id));\n });\n // And clear them\n me.clearResources(resourceIds);\n break;\n case 'removeall':\n case 'filter':\n // Clear all when filtering for simplicity. If that turns out to give bad performance, one would need to\n // figure out which events was filtered out and only clear their resources.\n me.clearAll();\n me.refresh();\n return;\n case 'update': {\n // Check if changes are graph related or not\n const allChrono = record.$entity\n ? !Object.keys(changes).some(name => !record.$entity.getField(name))\n : !Object.keys(changes).some(name => !chronoFields[name]);\n // If any one of these in changes, it will affect visuals\n let changeCount = 0;\n if ('startDate' in changes) changeCount++;\n if ('endDate' in changes) changeCount++;\n if ('duration' in changes) changeCount++;\n // Always redraw non chrono changes (name etc)\n if (!allChrono || changeCount || 'percentDone' in changes || 'inactive' in changes || 'segments' in changes) {\n if (me.shouldWaitForInitializeAndEngineReady) {\n me.refreshResourcesWhenReady(resourceIds);\n }\n else {\n me.clearResources(resourceIds);\n me.refresh();\n }\n }\n return;\n }\n }\n me.refreshResourcesWhenReady(resourceIds);\n }\n //endregion\n //region ResourceStore\n attachToResourceStore(resourceStore) {\n const me = this;\n super.attachToResourceStore(resourceStore);\n me.refreshAllWhenReady = true;\n if (me.resourceColumns) {\n me.resourceColumns.resourceStore = resourceStore;\n }\n resourceStore.ion({\n name : 'resourceStore',\n changePreCommit : 'onResourceStoreChange',\n refreshPreCommit : 'onResourceStoreRefresh',\n // In vertical, resource store is not the row store but should toggle the load mask\n load : () => me.scheduler.unmaskBody(),\n thisObj : me,\n prio : 1 // Call before others to clear cache before redraw\n });\n if (me.initialized && me.scheduler.isPainted) {\n // Invalidate resource range and events\n me.firstResource = me.lastResource = null;\n me.clearAll();\n me.renderer();\n }\n }\n onResourceStoreChange({ source : resourceStore, action, records = [], record, replaced, changes }) {\n const\n me = this,\n // records for add, record for update, replaced [[old, new]] for replace\n resourceRecords = replaced ? replaced.map(r => r[1]) : records,\n resourceIds = new Set(resourceRecords.map(resourceRecord => resourceRecord.id));\n // Invalidate resource range\n me.firstResource = me.lastResource = null;\n resourceStore._allResourceRecords = null;\n const { allResourceRecords } = resourceStore;\n // Operation that did not invalidate engine, refresh directly\n if (me.scheduler.isEngineReady) {\n switch (action) {\n case 'update':\n if (changes?.id) {\n me.clearResources([changes.id.oldValue, changes.id.value]);\n }\n else {\n me.clearResources([record.id]);\n }\n // Only the invalidation above needed\n break;\n case 'filter':\n // All filtered out resources needs clearing and so does those not filtered out since they might have\n // moved horizontally when others hide\n me.clearAll();\n break;\n }\n // Changing a column width means columns after that will have to be recalculated\n // so clear all cached layouts.\n if (changes && ('columnWidth' in changes)) {\n record.instanceMeta(me.scheduler).columnWidth = record.columnWidth;\n me.clearAll();\n }\n me.refresh(true);\n }\n // Operation that did invalidate project, update on project refresh\n else {\n switch (action) {\n case 'dataset':\n case 'remove': // Cannot tell from which index it was removed\n case 'removeall':\n me.refreshAllResourcesWhenReady();\n return;\n case 'replace':\n case 'add': {\n if (!resourceStore.isGrouped) {\n // Make sure all existing events following added resources are offset correctly\n const\n firstIndex = resourceRecords.reduce(\n (index, record) => Math.min(index, allResourceRecords.indexOf(record)),\n allResourceRecords.length\n );\n for (let i = firstIndex; i < allResourceRecords.length; i++) {\n resourceIds.add(allResourceRecords[i].id);\n }\n }\n }\n }\n me.refreshResourcesWhenReady(resourceIds);\n }\n }\n onResourceStoreRefresh({ action }) {\n const me = this;\n if (action === 'sort' || action === 'group') {\n // Invalidate resource range & cache\n me.firstResource = me.lastResource = me.resourceStore._allResourceRecords = null;\n me.clearAll();\n me.refresh();\n }\n }\n //endregion\n //region AssignmentStore\n attachToAssignmentStore(assignmentStore) {\n super.attachToAssignmentStore(assignmentStore);\n this.refreshAllWhenReady = true;\n if (assignmentStore) {\n assignmentStore.ion({\n name : 'assignmentStore',\n changePreCommit : 'onAssignmentStoreChange',\n refreshPreCommit : 'onAssignmentStoreRefresh',\n thisObj : this\n });\n }\n }\n onAssignmentStoreChange({ action, records : assignmentRecords = [], replaced, changes }) {\n const\n me = this,\n resourceIds = new Set(assignmentRecords.map(assignmentRecord => assignmentRecord.resourceId));\n // Operation that did not invalidate engine, refresh directly\n if (me.scheduler.isEngineReady) {\n switch (action) {\n case 'remove':\n me.clearResources(resourceIds);\n break;\n case 'filter':\n me.clearAll();\n break;\n case 'update': {\n // When reassigning, clear old resource also\n if ('resourceId' in changes) {\n resourceIds.add(changes.resourceId.oldValue);\n }\n // Ignore engine resolving resourceId -> resource, eventId -> event\n if (!Object.keys(changes).filter(field => field !== 'resource' && field !== 'event').length) {\n return;\n }\n me.clearResources(resourceIds);\n }\n }\n me.refresh(true);\n }\n // Operation that did invalidate project, update on project refresh\n else {\n if (changes && 'resourceId' in changes) {\n resourceIds.add(changes.resourceId.oldValue);\n }\n switch (action) {\n case 'removeall':\n me.refreshAllResourcesWhenReady();\n return;\n case 'replace':\n // Gather resources from both the old record and the new one\n replaced.forEach(([oldAssignment, newAssignment]) => {\n resourceIds.add(oldAssignment.resourceId);\n resourceIds.add(newAssignment.resourceId);\n });\n }\n me.refreshResourcesWhenReady(resourceIds);\n }\n }\n onAssignmentStoreRefresh({ action, records }) {\n if (action === 'batch') {\n this.clearAll();\n this.refreshAllResourcesWhenReady();\n }\n }\n //endregion\n //region View hooks\n refreshRows(reLayoutEvents) {\n if (reLayoutEvents) {\n this.clearAll();\n this.scheduler.refreshFromRerender = false;\n }\n }\n // Called from SchedulerEventRendering\n repaintEventsForResource(resourceRecord) {\n const { resourceColumns } = this.scheduler;\n this.renderResource(resourceRecord);\n // When using custom layout, it needs to refresh resource column header because the width of each resource could be changed after the layout is applied.\n if (this.scheduler.internalEventLayout.type === 'layoutFn') {\n resourceColumns.updateWidthCache();\n resourceColumns.refresh();\n }\n }\n updateFromHorizontalScroll(scrollX) {\n if (scrollX !== this.prevScrollX) {\n this.renderer();\n this.prevScrollX = scrollX;\n }\n }\n updateFromVerticalScroll() {\n this.renderer();\n }\n scrollResourceIntoView(resourceRecord, options) {\n const\n { scheduler } = this,\n x = this.allResourceRecords.indexOf(resourceRecord) * scheduler.resourceColumnWidth;\n return scheduler.scrollHorizontallyTo(x, options);\n }\n get allResourceRecords() {\n return this.scheduler.resourceStore.allResourceRecords;\n }\n // Called when viewport size changes\n onViewportResize(width) {\n if (this.resourceColumns.availableWidth !== width) {\n this.resourceColumns.availableWidth = width;\n // In vertical mode, after changing availableWith, all resources could fit in the availableWidth without the need of the scrollbar.\n // Then it needs to call refreshVirtualScrollbars in order to hide that scrollbar. After hiding the scrollbar,\n // the timeline has more space and its height increases, with the result that more events could be displayed (instead of releasing them).\n this.scheduler.refreshVirtualScrollbars();\n }\n this.renderer();\n }\n get resourceColumns() {\n return this.scheduler.timeAxisColumn?.resourceColumns;\n }\n // Clear events in case they use date as part of displayed info\n onLocaleChange() {\n this.clearAll();\n }\n // No need to do anything special\n onDragAbort() {}\n onBeforeRowHeightChange() {}\n onTimeAxisViewModelUpdate() {}\n updateElementId() {}\n releaseTimeSpanDiv() {}\n //endregion\n //region Dependency connectors\n /**\n * Gets displaying item start side\n *\n * @param {Scheduler.model.EventModel} eventRecord\n * @returns {'top'|'left'|'bottom'|'right'} 'left' / 'right' / 'top' / 'bottom'\n */\n getConnectorStartSide(eventRecord) {\n return 'top';\n }\n /**\n * Gets displaying item end side\n *\n * @param {Scheduler.model.EventModel} eventRecord\n * @returns {'top'|'left'|'bottom'|'right'} 'left' / 'right' / 'top' / 'bottom'\n */\n getConnectorEndSide(eventRecord) {\n return 'bottom';\n }\n //endregion\n //region Refresh resources\n /**\n * Clears resources directly and redraws them on next project refresh\n * @param {Number[]|String[]} resourceIds\n * @private\n */\n refreshResourcesWhenReady(resourceIds) {\n this.clearResources(resourceIds);\n resourceIds.forEach(id => this.toDrawOnProjectRefresh.add(id));\n }\n /**\n * Clears all resources directly and redraws them on next project refresh\n * @private\n */\n refreshAllResourcesWhenReady() {\n this.clearAll();\n this.refreshAllWhenReady = true;\n }\n //region Rendering\n // Resources in view + buffer\n get resourceRange() {\n return this.getResourceRange(true);\n }\n // Resources strictly in view\n get visibleResources() {\n const { first, last } = this.getResourceRange();\n return {\n first : this.allResourceRecords[first],\n last : this.allResourceRecords[last]\n };\n }\n getResourceRange(withBuffer) {\n const\n {\n scheduler,\n resourceStore\n } = this,\n {\n resourceColumnWidth,\n scrollX\n } = scheduler,\n {\n scrollWidth\n } = scheduler.timeAxisSubGrid.scrollable,\n resourceBufferSize = withBuffer ? this.resourceBufferSize : 0,\n viewportStart = scrollX - resourceBufferSize,\n viewportEnd = scrollX + scrollWidth + resourceBufferSize;\n if (!resourceStore?.count) {\n return { first : -1, last : -1 };\n }\n // Some resources define their own width\n if (scheduler.variableColumnWidths) {\n let first, last = 0, start, end = 0;\n this.allResourceRecords.forEach((resource, i) => {\n resource.instanceMeta(scheduler).insetStart = start = end;\n end = start + scheduler.getResourceWidth(resource);\n if (start > viewportEnd) {\n return false;\n }\n if (end > viewportStart && first == null) {\n first = i;\n }\n else if (start < viewportEnd) {\n last = i;\n }\n });\n return { first, last };\n }\n // We are using fixed column widths\n else {\n return {\n first : Math.max(Math.floor(scrollX / resourceColumnWidth) - resourceBufferSize, 0),\n last : Math.min(\n Math.floor((scrollX + scheduler.timeAxisSubGrid.width) / resourceColumnWidth) + resourceBufferSize,\n this.allResourceRecords.length - 1\n )\n };\n }\n }\n // Dates in view + buffer\n get dateRange() {\n const\n { scheduler } = this;\n let bottomDate = scheduler.getDateFromCoordinate(Math.min(\n scheduler.scrollTop + scheduler.bodyHeight + scheduler.tickSize - 1,\n (scheduler.virtualScrollHeight || scheduler.scrollable.scrollHeight) - 1)\n );\n // Might end up below time axis (out of ticks)\n if (!bottomDate) {\n bottomDate = scheduler.timeAxis.last.endDate;\n }\n let topDate = scheduler.getDateFromCoordinate(Math.max(scheduler.scrollTop - scheduler.tickSize, 0));\n // Might end up above time axis when reconfiguring (since this happens as part of rendering)\n if (!topDate) {\n topDate = scheduler.timeAxis.first.startDate;\n bottomDate = scheduler.getDateFromCoordinate(scheduler.bodyHeight + scheduler.tickSize - 1);\n }\n return {\n topDate,\n bottomDate\n };\n }\n getTimeSpanRenderData(eventRecord, resourceRecord, includeOutside = false) {\n const\n me = this,\n {\n scheduler\n } = me,\n {\n preamble,\n postamble\n } = eventRecord,\n {\n variableColumnWidths\n } = scheduler,\n useEventBuffer = scheduler.features.eventBuffer?.enabled && me.isProVerticalRendering &&\n (preamble || postamble) && !eventRecord.isMilestone,\n startDateField = useEventBuffer ? 'wrapStartDate' : 'startDate',\n endDateField = useEventBuffer ? 'wrapEndDate' : 'endDate',\n // Must use Model.get in order to get latest values in case we are inside a batch.\n // EventResize changes the endDate using batching to enable a tentative change\n // via the batchedUpdate event which is triggered when changing a field in a batch.\n // Fall back to accessor if propagation has not populated date fields.\n startDate = eventRecord.isBatchUpdating && eventRecord.hasBatchedChange(startDateField) && !useEventBuffer\n ? eventRecord.get(startDateField) : eventRecord[startDateField],\n endDate = eventRecord.isBatchUpdating && eventRecord.hasBatchedChange(endDateField) && !useEventBuffer\n ? eventRecord.get(endDateField) : eventRecord[endDateField],\n {\n resourceMarginObject : { total }\n } = scheduler.getResourceLayoutSettings(resourceRecord),\n top = scheduler.getCoordinateFromDate(startDate),\n instanceMeta = resourceRecord.instanceMeta(scheduler),\n // Preliminary values for left & width, used for proxy. Will be changed on layout.\n // The property \"left\" is utilized based on Scheduler's rtl setting.\n // If RTL, then it's used as the \"right\" style position.\n left = variableColumnWidths ? instanceMeta.insetStart : me.allResourceRecords.indexOf(resourceRecord) * scheduler.resourceColumnWidth,\n resourceWidth = scheduler.getResourceWidth(resourceRecord),\n width = resourceWidth - total,\n startDateMS = startDate.getTime(),\n endDateMS = endDate.getTime();\n let bottom = scheduler.getCoordinateFromDate(endDate),\n height = bottom - top;\n // Below, estimate height\n if (bottom === -1) {\n height = Math.round((endDateMS - startDateMS) * scheduler.timeAxisViewModel.getSingleUnitInPixels('millisecond'));\n bottom = top + height;\n }\n return {\n eventRecord,\n resourceRecord,\n left,\n top,\n bottom,\n resourceWidth,\n width,\n height,\n startDate,\n endDate,\n startDateMS,\n endDateMS,\n useEventBuffer,\n children : [],\n start : startDate,\n end : endDate,\n startMS : startDateMS,\n endMS : endDateMS\n };\n }\n // Earlier start dates are above later tasks\n // If same start date, longer tasks float to top\n // If same start + duration, sort by name\n eventSorter(a, b) {\n const\n startA = a.dataStartMs || a.startDateMS, // dataXX are used if configured with fillTicks\n endA = a.dataEndMs || a.endDateMS,\n startB = b.dataStartMs || b.startDateMS,\n endB = b.dataEndMs || b.endDateMS,\n nameA = a.isModel ? a.name : a.eventRecord.name,\n nameB = b.isModel ? b.name : b.eventRecord.name;\n return startA - startB || endB - endA || (nameA < nameB ? -1 : nameA == nameB ? 0 : 1);\n }\n layoutEvents(resourceRecord, allEvents, includeOutside = false, parentEventRecord, eventSorter) {\n const\n me = this,\n { scheduler } = me,\n {\n variableColumnWidths\n } = scheduler,\n { id : resourceId } = resourceRecord,\n instanceMeta = resourceRecord.instanceMeta(scheduler),\n cacheKey = parentEventRecord ? `${resourceId}-${parentEventRecord.id}` : resourceId,\n // Cache per resource\n cache = me.resourceMap.set(cacheKey, {}).get(cacheKey),\n // Resource \"column\"\n resourceIndex = me.allResourceRecords.indexOf(resourceRecord);\n const layoutData = allEvents.reduce((toLayout, eventRecord) => {\n if (eventRecord.isScheduled) {\n const\n renderData = scheduler.generateRenderData(eventRecord, resourceRecord, false),\n // Elements will be appended to eventData during syncing\n eventData = { renderData },\n eventResources = ObjectHelper.getMapPath(me.eventMap, renderData.eventId, {});\n // Cache per event, { e1 : { r1 : { xxx }, r2 : ... }, e2 : ... }\n // Uses renderData.eventId in favor of eventRecord.id to work with ResourceTimeRanges\n eventResources[resourceId] = eventData;\n // Cache per resource\n cache[renderData.eventId] = eventData;\n // Position ResourceTimeRanges directly, they do not affect the layout of others\n if (renderData.fillSize) {\n // The property \"left\" is utilized based on Scheduler's rtl setting.\n // If RTL, then it's used as the \"right\" style position.\n renderData.left = variableColumnWidths ? instanceMeta.insetStart : resourceIndex * scheduler.resourceColumnWidth;\n renderData.width = scheduler.getResourceWidth(resourceRecord);\n }\n // Anything not flagged with `fillSize` should take part in layout\n else {\n toLayout.push(renderData);\n }\n }\n return toLayout;\n }, []);\n // Ensure the events are rendered in natural order so that navigation works.\n layoutData.sort(eventSorter ?? me.eventSorter);\n // Apply per resource event layout (pack, overlap, mixed or custom (avaialable only for Pro version))\n me.verticalLayout.applyLayout(\n layoutData,\n resourceRecord,\n parentEventRecord\n );\n return cache;\n }\n // Calculate the layout for all events assigned to a resource. Since we are never stacking, the layout of one\n // resource will never affect the others\n layoutResourceEvents(resourceRecord) {\n const\n me = this,\n { scheduler } = me,\n // Used in loop, reduce access time a wee bit\n {\n assignmentStore,\n eventStore,\n timeAxis\n } = scheduler;\n // Events for the resource, minus those that are filtered out by filtering assignments and events\n let events = eventStore.getEvents({\n includeOccurrences : scheduler.enableRecurringEvents,\n resourceRecord,\n startDate : timeAxis.startDate,\n endDate : timeAxis.endDate,\n filter : (assignmentStore.isFiltered || eventStore.isFiltered) && (eventRecord =>\n eventRecord.assignments.some(a => a.resource === resourceRecord && assignmentStore.includes(a)))\n });\n // Hook for features to inject additional timespans to render\n events = scheduler.getEventsToRender(resourceRecord, events);\n return me.layoutEvents(resourceRecord, events);\n }\n /**\n * Used by event drag features to bring into existence event elements that are outside of the rendered block.\n * @param {Scheduler.model.TimeSpan} eventRecord The event to render\n * @private\n */\n addTemporaryDragElement(eventRecord) {\n const\n { scheduler } = this,\n renderData = scheduler.generateRenderData(\n eventRecord,\n eventRecord.resource,\n { timeAxis : true, viewport : true }\n );\n renderData.top = renderData.row\n ? (renderData.top + renderData.row.top)\n : scheduler.getResourceEventBox(eventRecord, eventRecord.resource, true).top;\n const\n domConfig = this.renderEvent({ renderData }),\n { dataset } = domConfig;\n delete domConfig.tabIndex;\n delete dataset.eventId;\n delete dataset.resourceId;\n delete dataset.assignmentId;\n delete dataset.syncId;\n dataset.transient = true;\n domConfig.parent = this.scheduler.foregroundCanvas;\n // So that the regular DomSyncing which may happen during scroll does not\n // sweep up and reuse the temporary element.\n domConfig.retainElement = true;\n const result = DomHelper.createElement(domConfig);\n result.innerElement = result.firstChild;\n eventRecord.instanceMeta(scheduler).hasTemporaryDragElement = true;\n return result;\n }\n // To update an event, first release its element and then render it again.\n // The element will be reused and updated. Keeps code simpler\n renderEvent(eventData) {\n // No point in rendering event that already has an element\n const\n { scheduler } = this,\n data = eventData.renderData,\n {\n resourceRecord,\n assignmentRecord,\n eventRecord\n } = data,\n // Event element config, applied to existing element or used to create a new one below\n elementConfig = {\n className : data.wrapperCls,\n tabIndex : -1,\n children : [\n {\n role : 'presentation',\n className : data.cls,\n style : (data.internalStyle || '') + (data.style || ''),\n children : data.children,\n dataset : {\n // Each feature putting contents in the event wrap should have this to simplify syncing and\n // element retrieval after sync\n taskFeature : 'event'\n },\n syncOptions : {\n syncIdField : 'taskBarFeature'\n }\n },\n ...data.wrapperChildren\n ],\n style : {\n top : data.top,\n [scheduler.rtl ? 'right' : 'left'] : data.left,\n // DomHelper appends px to dimensions when using numbers\n height : eventRecord.isMilestone ? '1em' : data.height,\n width : data.width,\n style : data.wrapperStyle || '',\n fontSize : eventRecord.isMilestone ? Math.min(data.width, 40) : null\n },\n dataset : {\n // assignmentId is set in this function conditionally\n resourceId : resourceRecord.id,\n eventId : data.eventId, // Not using eventRecord.id to distinguish between Event and ResourceTimeRange\n // Sync using assignment id for events and event id for ResourceTimeRanges\n syncId : assignmentRecord ? this.assignmentStore.getOccurrence(assignmentRecord, eventRecord).id : data.eventId\n },\n // Will not be part of DOM, but attached to the element\n elementData : eventData,\n // Dragging etc. flags element as retained, to not reuse/release it during that operation. Events\n // always use assignments, but ResourceTimeRanges does not\n retainElement : (assignmentRecord || eventRecord).instanceMeta(this.scheduler).retainElement,\n // Options for this level of sync, lower levels can have their own\n syncOptions : {\n syncIdField : 'taskFeature',\n // Remove instead of release when a feature is disabled\n releaseThreshold : 0\n }\n };\n elementConfig.className['b-sch-vertical'] = 1;\n // Some browsers throw warnings on zIndex = ''\n if (data.zIndex) {\n elementConfig.zIndex = data.zIndex;\n }\n // Do not want to spam dataset with empty prop when not using assignments (ResourceTimeRanges)\n if (assignmentRecord) {\n elementConfig.dataset.assignmentId = assignmentRecord.id;\n }\n // Allows access to the used config later, for example to retrieve element\n data.elementConfig = eventData.elementConfig = elementConfig;\n scheduler.afterRenderEvent({ renderData : data, domConfig : elementConfig });\n return elementConfig;\n }\n renderResource(resourceRecord) {\n const\n me = this,\n // Date at top and bottom for determining which events to include\n { topDateMS, bottomDateMS } = me,\n // Will hold element configs\n eventDOMConfigs = [];\n let resourceEntry = me.resourceMap.get(resourceRecord.id);\n // Layout all events for the resource unless already done\n if (!resourceEntry) {\n resourceEntry = me.layoutResourceEvents(resourceRecord);\n }\n // Iterate over all events for the resource\n for (const eventId in resourceEntry) {\n const\n eventData = resourceEntry[eventId],\n { endDateMS, startDateMS, eventRecord } = eventData.renderData;\n if (\n // Only collect configs for those actually in view\n endDateMS >= topDateMS && startDateMS <= bottomDateMS &&\n // And not being dragged, those have a temporary element already\n !eventRecord.instanceMeta(me.scheduler).hasTemporaryDragElement\n ) {\n // Reuse DomConfig if available, otherwise render event to create one\n const domConfig = eventData.elementConfig?.className !== 'b-released' && eventData.elementConfig || me.renderEvent(eventData);\n eventDOMConfigs.push(domConfig);\n }\n }\n return eventDOMConfigs;\n }\n isEventElement(domConfig) {\n const className = domConfig && domConfig.className;\n return className && className[this.scheduler.eventCls + '-wrap'];\n }\n get shouldWaitForInitializeAndEngineReady() {\n return !this.initialized || (!this.scheduler.isEngineReady && !this.scheduler.isCreating);\n }\n // Single cell so only one call to this renderer, determine which events are in view and draw them.\n // Drawing on scroll is triggered by `updateFromVerticalScroll()` and `updateFromHorizontalScroll()`\n renderer() {\n const\n me = this,\n { scheduler } = me,\n // Date at top and bottom for determining which events to include\n { topDate, bottomDate } = me.dateRange,\n syncConfigs = [],\n featureDomConfigs = [],\n { allResourceRecords } = me;\n // Determine resource range to draw events for\n let { first : firstResource, last : lastResource } = me.resourceRange;\n // If scheduler is creating a new event, the render needs to be synchronous, so\n // we cannot wait for the engine to normalize - the new event will have correct data set.\n if (me.shouldWaitForInitializeAndEngineReady) {\n return;\n }\n // Update current time range, reflecting the change on the vertical time axis header\n if (!DateHelper.isEqual(topDate, me.topDate) || !DateHelper.isEqual(bottomDate, me.bottomDate)) {\n // Calculated values used by `renderResource()`\n me.topDate = topDate;\n me.bottomDate = bottomDate;\n me.topDateMS = topDate.getTime();\n me.bottomDateMS = bottomDate.getTime();\n const range = me.timeView.range = { startDate : topDate, endDate : bottomDate };\n scheduler.internalOnVisibleDateRangeChange(range);\n }\n if (firstResource !== -1 && lastResource !== -1) {\n if (scheduler.internalEventLayout.type === 'layoutFn' && firstResource !== undefined) {\n // Custom layout is a Pro feature and it is located in ProVerticalRendering.js\n me.renderResourceCustomLayout(syncConfigs);\n }\n else {\n // Collect all events for resources in view\n for (let i = firstResource; i <= lastResource; i++) {\n syncConfigs.push.apply(syncConfigs, me.renderResource(allResourceRecords[i]));\n }\n }\n const { resourceRange } = me;\n firstResource = resourceRange.first;\n lastResource = resourceRange.last;\n }\n scheduler.getForegroundDomConfigs(featureDomConfigs);\n syncConfigs.push.apply(syncConfigs, featureDomConfigs);\n DomSync.sync({\n domConfig : {\n onlyChildren : true,\n children : syncConfigs\n },\n targetElement : scheduler.foregroundCanvas,\n syncIdField : 'syncId',\n // Called by DomHelper when it creates, releases or reuses elements\n callback({ action, domConfig, lastDomConfig, targetElement, jsx }) {\n const { reactComponent } = scheduler;\n // If element is an event wrap, trigger appropriate events\n if (me.isEventElement(domConfig) || jsx || domConfig?.elementData?.jsx) {\n const\n // Some actions are considered first a release and then a render (reusing another element).\n // This gives clients code a chance to clean up before reusing an element\n isRelease = releaseEventActions[action],\n isRender = renderEventActions[action];\n if (scheduler.processEventContent?.({\n action,\n domConfig,\n isRelease : false,\n targetElement,\n reactComponent,\n jsx\n })) return;\n // If we are reusing an element that was previously released we should not trigger again\n if (isRelease && me.isEventElement(lastDomConfig) && !lastDomConfig.isReleased) {\n const\n data = lastDomConfig.elementData.renderData,\n event = {\n renderData : data,\n assignmentRecord : data.assignmentRecord,\n eventRecord : data.eventRecord,\n resourceRecord : data.resourceRecord,\n element : targetElement\n };\n // Release any portal in React event content\n scheduler.processEventContent?.({\n isRelease,\n targetElement,\n reactComponent,\n assignmentRecord : data.assignmentRecord\n });\n // Some browsers do not blur on set to display:none, so releasing the active element\n // must *explicitly* move focus outwards to the view.\n if (targetElement === DomHelper.getActiveElement(targetElement)) {\n scheduler.focusElement.focus();\n }\n // This event is documented on Scheduler\n scheduler.trigger('releaseEvent', event);\n }\n if (isRender) {\n const\n data = domConfig.elementData.renderData,\n event = {\n renderData : data,\n assignmentRecord : data.assignmentRecord,\n eventRecord : data.eventRecord,\n resourceRecord : data.resourceRecord,\n element : targetElement,\n isReusingElement : action === 'reuseElement',\n isRepaint : action === 'reuseOwnElement'\n };\n event.reusingElement = action === 'reuseElement';\n // This event is documented on Scheduler\n scheduler.trigger('renderEvent', event);\n }\n }\n }\n });\n // Change in displayed resources?\n if (me.firstResource !== firstResource || me.lastResource !== lastResource) {\n // Update header to match\n const range = me.resourceColumns.visibleResources = { firstResource, lastResource };\n // Store which resources are currently in view\n me.firstResource = firstResource;\n me.lastResource = lastResource;\n scheduler.onVisibleResourceRangeChange(range);\n scheduler.trigger('resourceRangeChange', range);\n }\n }\n refresh(transition) {\n this.scheduler.runWithTransition(() => this.renderer(), transition);\n }\n // To match horizontals API, used from EventDrag\n refreshResources(resourceIds) {\n this.clearResources(resourceIds);\n this.refresh();\n }\n // To match horizontals API, used from EventDrag\n refreshEventsForResource(recordOrRow, force = true, draw = true) {\n this.refreshResources([recordOrRow.id]);\n }\n onRenderDone() {\n }\n //endregion\n //region Other\n get timeView() {\n return this.scheduler.timeView;\n }\n //endregion\n //region Cache\n // Clears cached resource layout\n clearResources(resourceIds) {\n const { resourceMap, eventMap } = this;\n resourceIds.forEach(resourceId => {\n if (resourceMap.has(resourceId)) {\n // The *keys* of an Object are strings, so we must iterate the values\n // and use the original eventId to look up in the Map which preserves key type.\n Object.values(resourceMap.get(resourceId)).forEach(({ renderData : { eventId } }) => {\n delete eventMap.get(eventId)[resourceId];\n });\n resourceMap.delete(resourceId);\n }\n });\n }\n clearAll() {\n this.resourceMap.clear();\n this.eventMap.clear();\n }\n //endregion\n}\nVerticalRendering._$name = 'VerticalRendering';", "import Widget from '../../Core/widget/Widget.js';\nimport DomSync from '../../Core/helper/DomSync.js';\n/**\n * @module Scheduler/view/TimeAxisBase\n */\nfunction isLastLevel(level, levels) {\n return level === levels.length - 1;\n}\nfunction isLastCell(level, cell) {\n return cell === level.cells[level.cells.length - 1];\n}\n/**\n * Base class for HorizontalTimeAxis and VerticalTimeAxis. Contains shared functionality to only render ticks in view,\n * should not be used directly.\n *\n * @extends Core/widget/Widget\n * @private\n * @abstract\n */\nexport default class TimeAxisBase extends Widget {\n static $name = 'TimeAxisBase';\n //region Config\n static configurable = {\n /**\n * The minimum width for a bottom row header cell to be considered 'compact', which adds a special CSS class\n * to the row (for special styling). Copied from Scheduler/Gantt.\n * @config {Number}\n * @default\n */\n compactCellWidthThreshold : 15,\n // TimeAxisViewModel\n model : null,\n cls : null,\n /**\n * Style property to use as cell size. Either width or height depending on orientation\n * @config {'width'|'height'}\n * @private\n */\n sizeProperty : null,\n /**\n * Style property to use as cells position. Either left or top depending on orientation\n * @config {'left'|'top'}\n * @private\n */\n positionProperty : null\n };\n startDate = null;\n endDate = null;\n levels = [];\n size = null;\n // Set visible date range\n set range({ startDate, endDate }) {\n const me = this;\n // Only process a change\n if (me.startDate - startDate || me.endDate - endDate) {\n const { client } = me;\n me.startDate = startDate;\n me.endDate = endDate;\n // Avoid refreshing if time axis view is not visible\n if ((me.sizeProperty === 'width' && client?.hideHeaders) ||\n (me.sizeProperty === 'height' && client?.verticalTimeAxisColumn?.hidden)) {\n return;\n }\n me.refresh();\n }\n }\n //endregion\n //region Html & rendering\n // Generates element configs for all levels defined by the current ViewPreset\n buildCells(start = this.startDate, end = this.endDate) {\n const\n me = this,\n { sizeProperty } = me,\n {\n stickyHeaders,\n isVertical\n } = me.client || {},\n featureHeaderConfigs = [],\n { length } = me.levels;\n const cellConfigs = me.levels.map((level, i) => {\n const stickyHeader = stickyHeaders && (isVertical || i < length - 1);\n return {\n className : {\n 'b-sch-header-row' : 1,\n [`b-sch-header-row-${level.position}`] : 1,\n 'b-sch-header-row-main' : i === me.model.viewPreset.mainHeaderLevel,\n 'b-lowest' : isLastLevel(i, me.levels),\n 'b-sticky-header' : stickyHeader\n },\n syncOptions : {\n // Keep a maximum of 5 released cells. Might be fine with fewer since ticks are fixed width.\n // Prevents an unnecessary amount of cells from sticking around when switching from narrow to\n // wide tickSizes\n releaseThreshold : 5,\n syncIdField : 'tickIndex'\n },\n dataset : {\n headerFeature : `headerRow${i}`,\n headerPosition : level.position\n },\n // Only include cells in view\n children : level.cells?.filter(cell => cell.start < end && cell.end > start).map((cell, j) => ({\n role : 'presentation',\n className : {\n 'b-sch-header-timeaxis-cell' : 1,\n [cell.headerCellCls] : cell.headerCellCls,\n [`b-align-${cell.align}`] : cell.align,\n 'b-last' : isLastCell(level, cell)\n },\n dataset : {\n tickIndex : cell.index,\n // Used in export tests to resolve dates from tick elements\n ...globalThis.DEBUG && { date : cell.start.getTime() }\n },\n style : {\n // DomHelper appends px to numeric dimensions\n [me.positionProperty] : cell.coord,\n [sizeProperty] : cell.width,\n [`min-${sizeProperty}`] : cell.width\n },\n children : [\n {\n tag : 'span',\n role : 'presentation',\n className : {\n 'b-sch-header-text' : 1,\n 'b-sticky-header' : stickyHeader\n },\n html : cell.value\n }\n ]\n }))\n };\n });\n // When tested in isolation there is no client\n me.client?.getHeaderDomConfigs(featureHeaderConfigs);\n cellConfigs.push(...featureHeaderConfigs);\n // noinspection JSSuspiciousNameCombination\n return {\n onlyChildren : true,\n syncOptions : {\n // Do not keep entire levels no longer used, for example after switching view preset\n releaseThreshold : 0\n },\n children : cellConfigs\n };\n }\n render(targetElement) {\n super.render(targetElement);\n this.refresh(true);\n }\n /**\n * Refresh the UI\n * @param {Boolean} [rebuild] Specify `true` to force a rebuild of the underlying header level definitions\n */\n refresh(rebuild = !this.levels.length) {\n const\n me = this,\n { columnConfig } = me.model,\n { levels } = me,\n oldLevelsCount = levels.length;\n if (rebuild) {\n levels.length = 0;\n columnConfig.forEach((cells, position) => levels[position] = {\n position,\n cells\n });\n me.size = levels[0].cells.reduce((sum, cell) => sum + cell.width, 0);\n const { parentElement } = me.element;\n // Don't mutate a classList unless necessary. Browsers invalidate the style.\n if (parentElement && (levels.length !== oldLevelsCount || rebuild)) {\n parentElement.classList.remove(`b-sch-timeaxiscolumn-levels-${oldLevelsCount}`);\n parentElement.classList.add(`b-sch-timeaxiscolumn-levels-${levels.length}`);\n }\n }\n if (!me.startDate || !me.endDate) {\n return;\n }\n // Boil down levels to only show what is in view\n DomSync.sync({\n domConfig : me.buildCells(),\n targetElement : me.element,\n syncIdField : 'headerFeature'\n });\n me.trigger('refresh');\n }\n //endregion\n // Our widget class doesn't include \"base\".\n get widgetClass() {\n return 'b-timeaxis';\n }\n}\nTimeAxisBase._$name = 'TimeAxisBase';", "import TimeAxisBase from './TimeAxisBase.js';\n/**\n * @module Scheduler/view/HorizontalTimeAxis\n */\n/**\n * A visual horizontal representation of the time axis described in the\n * {@link Scheduler.preset.ViewPreset#field-headers} field.\n * Normally you should not interact with this class directly.\n *\n * @extends Scheduler/view/TimeAxisBase\n * @private\n */\nexport default class HorizontalTimeAxis extends TimeAxisBase {\n //region Config\n static $name = 'HorizontalTimeAxis';\n static type = 'horizontaltimeaxis';\n static configurable = {\n model : null,\n sizeProperty : 'width'\n };\n //endregion\n get positionProperty() {\n return this.owner?.rtl ? 'right' : 'left';\n }\n get width() {\n return this.size;\n }\n onModelUpdate() {\n // Force rebuild when availableSpace has changed, to recalculate width and maybe apply compact styling\n if (!this.owner?.hideHeaders && this.model.availableSpace > 0 && this.model.availableSpace !== this.width) {\n this.refresh(true);\n }\n }\n updateModel(timeAxisViewModel) {\n this.detachListeners('tavm');\n timeAxisViewModel?.ion({\n name : 'tavm',\n update : 'onModelUpdate',\n thisObj : this\n });\n }\n}\nHorizontalTimeAxis._$name = 'HorizontalTimeAxis';", "import Widget from '../../Core/widget/Widget.js';\nimport DomHelper from '../../Core/helper/DomHelper.js';\nimport DomSync from '../../Core/helper/DomSync.js';\nimport EventHelper from '../../Core/helper/EventHelper.js';\nimport DomClassList from '../../Core/helper/util/DomClassList.js';\nimport StringHelper from '../../Core/helper/StringHelper.js';\nimport AvatarRendering from '../../Core/widget/util/AvatarRendering.js';\n/**\n * @module Scheduler/view/ResourceHeader\n */\n/**\n * Header widget that renders resource column headers and acts as the interaction point for resource columns in vertical\n * mode. Note that it uses virtual rendering and element reusage to gain performance, only headers in view are available\n * in DOM. Because of this you should avoid direct element manipulation, any such changes can be discarded at any time.\n *\n * By default, it displays resources `name` and also applies its `iconCls` if any, like this:\n *\n * ```html\n * name\n * ```\n *\n * If Scheduler is configured with a {@link Scheduler.view.Scheduler#config-resourceImagePath} the\n * header will render miniatures for the resources, using {@link Scheduler.model.ResourceModel#field-imageUrl}\n * or {@link Scheduler.model.ResourceModel#field-image} with fallback to\n * {@link Scheduler.model.ResourceModel#field-name} + {@link Scheduler.view.Scheduler#config-resourceImageExtension}\n * for unset values.\n *\n * The contents and styling of the resource cells in the header can be customized using {@link #config-headerRenderer}:\n *\n * ```javascript\n * new Scheduler({\n * mode : 'vertical',\n * resourceColumns : {\n * headerRenderer : ({ resourceRecord }) => `Hello ${resourceRecord.name}`\n * }\n * }\n *```\n *\n * The width of the resource columns is determined by the {@link #config-columnWidth} config.\n *\n * @extends Core/widget/Widget\n */\nexport default class ResourceHeader extends Widget {\n //region Config\n static $name = 'ResourceHeader';\n static type = 'resourceheader';\n static configurable = {\n /**\n * Resource store used to render resource headers. Assigned from Scheduler.\n * @config {Scheduler.data.ResourceStore}\n * @private\n */\n resourceStore : null,\n /**\n * Custom header renderer function. Can be used to manipulate the element config used to create the element\n * for the header:\n *\n * ```javascript\n * new Scheduler({\n * resourceColumns : {\n * headerRenderer({ elementConfig, resourceRecord }) {\n * elementConfig.dataset.myExtraData = 'extra';\n * elementConfig.style.fontWeight = 'bold';\n * }\n * }\n * });\n * ```\n *\n * See {@link DomConfig} for more information.\n * Please take care to not break the default configs :)\n *\n * Or as a template by returning HTML from the function:\n *\n * ```javascript\n * new Scheduler({\n * resourceColumns : {\n * headerRenderer : ({ resourceRecord }) => `\n * ${me.L(`L{GridBase.${requestType}FailedMessage}`)}
\n ${response && response.message ? `${me.L('L{CrudManagerView.serverResponseLabel}')} ${response.message}
` : ''}\n \n * ${resourceRecord.firstName} {resourceRecord.surname}\n *
\n * `\n * }\n * });\n * ```\n *\n * NOTE: When using `headerRenderer` no default internal markup is applied to the resource header cell,\n * `iconCls` and {@link Scheduler.model.ResourceModel#field-imageUrl} or {@link Scheduler.model.ResourceModel#field-image}\n * will have no effect unless you supply custom markup for them.\n *\n * @config {Function}\n * @param {Object} params Object containing the params below\n * @param {Scheduler.model.ResourceModel} params.resourceRecord Resource whose header is being rendered\n * @param {DomConfig} params.elementConfig A config object used to create the element for the resource\n * @returns {void}\n */\n headerRenderer : null,\n /**\n * Set to `false` to render just the resource name, `true` to render an avatar (or initials if no image exists)\n * @config {Boolean}\n * @default true\n */\n showAvatars : {\n value : true,\n $config : 'nullify'\n },\n /**\n * Assign to toggle resource columns **fill* mode. `true` means they will stretch (grow) to fill viewport, `false`\n * that they will respect their configured `columnWidth`.\n *\n * This is ignored if *any* resources are loaded with {@link Scheduler.model.ResourceModel#field-columnWidth}.\n * @member {Boolean} fillWidth\n */\n /**\n * Automatically resize resource columns to **fill** available width. Set to `false` to always respect the\n * configured `columnWidth`.\n *\n * This is ignored if *any* resources are loaded with {@link Scheduler.model.ResourceModel#field-columnWidth}.\n * @config {Boolean}\n * @default\n */\n fillWidth : true,\n /**\n * Assign to toggle resource columns **fit* mode. `true` means they will grow or shrink to always fit viewport,\n * `false` that they will respect their configured `columnWidth`.\n *\n * This is ignored if *any* resources are loaded with {@link Scheduler.model.ResourceModel#field-columnWidth}.\n * @member {Boolean} fitWidth\n */\n /**\n * Automatically resize resource columns to always **fit** available width.\n *\n * This is ignored if *any* resources are loaded with {@link Scheduler.model.ResourceModel#field-columnWidth}.\n * @config {Boolean}\n * @default\n */\n fitWidth : false,\n /**\n * Width for each resource column.\n *\n * This is used for resources which are not are loaded with a {@link Scheduler.model.ResourceModel#field-columnWidth}.\n * @config {Number}\n */\n columnWidth : 150,\n // Copied from Scheduler#resourceImagePath on creation in TimeAxisColumn.js\n imagePath : null,\n // Copied from Scheduler#resourceImageExtension on creation in TimeAxisColumn.js\n imageExtension : null,\n // Copied from Scheduler#defaultResourceImageName on creation in TimeAxisColumn.js\n defaultImageName : null,\n availableWidth : null\n };\n /**\n * An index of the first visible resource in vertical mode\n * @property {Number}\n * @readonly\n * @private\n */\n firstResource = -1;\n /**\n * An index of the last visible resource in vertical mode\n * @property {Number}\n * @readonly\n * @private\n */\n lastResource = -1;\n //endregion\n //region Init\n construct(config) {\n const me = this;\n // Inject this into owning Scheduler early because code further down\n // can call code which uses scheduler.resourceColumns.\n config.scheduler._resourceColumns = me;\n super.construct(config);\n if (me.imagePath != null) {\n // Need to increase height a bit when displaying images\n me.element.classList.add('b-has-images');\n }\n EventHelper.on({\n element : me.element,\n delegate : '.b-resourceheader-cell',\n capture : true,\n click : 'onResourceMouseEvent',\n dblclick : 'onResourceMouseEvent',\n contextmenu : 'onResourceMouseEvent',\n thisObj : me\n });\n }\n changeShowAvatars(show) {\n this.avatarRendering?.destroy();\n if (show) {\n this.avatarRendering = new AvatarRendering({\n element : this.element\n });\n }\n return show;\n }\n updateShowAvatars() {\n if (!this.isConfiguring) {\n this.refresh();\n }\n }\n //endregion\n //region ResourceStore\n updateResourceStore(store) {\n const me = this;\n me.detachListeners('resourceStore');\n if (store) {\n store.ion({\n name : 'resourceStore',\n changePreCommit : 'onResourceStoreDataChange',\n thisObj : me\n });\n // Already have data? Update width etc\n if (store.count) {\n me.onResourceStoreDataChange({});\n }\n }\n }\n // Redraw resource headers on any data change\n onResourceStoreDataChange({ action }) {\n const me = this;\n // These must be ingested before we assess the source of column widths\n // so that they can be cleared *after* their values have been cached.\n me.getConfig('fillWidth');\n me.getConfig('fitWidth');\n me.updateWidthCache();\n const\n {\n element\n } = me,\n width = me.totalWidth;\n // If we have some defined columnWidths in the resourceStore\n // we must then bypass configured fitWidth and fillWidth behaviour.\n if (me.scheduler.variableColumnWidths) {\n me._fillWidth = me._fitWidth = false;\n }\n else {\n me._fillWidth = me.configuredFillWidth;\n me._fitWidth = me.configuredFitWidth;\n }\n if (width !== me.width) {\n DomHelper.setLength(element, 'width', width);\n // During setup, silently set the width. It will then render correctly. After setup, let the world know...\n me.column.set('width', width, me.column.grid.isConfiguring);\n }\n if (action === 'removeall') {\n // Keep nothing\n element.innerHTML = '';\n }\n if (action === 'remove' || action === 'add' || action === 'filter' || me.fitWidth || me.fillWidth) {\n me.refreshWidths();\n }\n me.column.grid.toggleEmptyText();\n }\n get totalWidth() {\n return this.updateWidthCache();\n }\n updateWidthCache() {\n let result = 0;\n const { scheduler } = this;\n // Flag so that VerticalRendering#getResourceRange knows\n // whether to use fast or slow mode to ascertain visible columns.\n scheduler.variableColumnWidths = false;\n scheduler.resourceStore.forEach(resource => {\n const instanceMeta = resource.instanceMeta(scheduler);\n if (instanceMeta.columnWidth == null && resource.columnWidth) {\n instanceMeta.columnWidth = resource.columnWidth;\n }\n // Set the start position for each resource with respect to the widths\n instanceMeta.insetStart = result;\n instanceMeta.insetEnd = result + scheduler.getResourceWidth(resource);\n if (instanceMeta.columnWidth == null) {\n result += scheduler.resourceColumnWidth;\n }\n else {\n result += instanceMeta.columnWidth;\n scheduler.variableColumnWidths = true;\n }\n });\n return result;\n }\n //endregion\n //region Properties\n changeColumnWidth(columnWidth) {\n // Cache configured value, because if *all* resources have their own columnWidths\n // the property will be nulled, but if we ever recieve a new resource with no\n // columnWidth, or a columnWidth is nulled, we then have to fall back to using this.\n if (!this.refreshingWidths) {\n this.configuredColumnWidth = columnWidth;\n }\n return columnWidth;\n }\n updateColumnWidth(width, oldWidth) {\n const me = this;\n // Flag set in refreshWidths, do not want to create a loop\n if (!me.refreshingWidths) {\n me.refreshWidths();\n }\n if (!me.isConfiguring) {\n // If resources are grouped, I need to refresh manually the cached width of resource header columns\n if (me.resourceStore.isGrouped) {\n me.updateWidthCache();\n }\n me.refresh();\n // Cannot trigger with requested width, might have changed because of fit/fill\n me.trigger('columnWidthChange', { width, oldWidth });\n }\n }\n changeFillWidth(fillWidth) {\n return this.configuredFillWidth = fillWidth;\n }\n updateFillWidth() {\n if (!this.isConfiguring) {\n this.refreshWidths();\n }\n }\n changeFitWidth(fitWidth) {\n return this.configuredFitWidth = fitWidth;\n }\n updateFitWidth() {\n if (!this.isConfiguring) {\n this.refreshWidths();\n }\n }\n getImageURL(imageName) {\n return StringHelper.joinPaths([this.imagePath || '', imageName || '']);\n }\n updateImagePath() {\n if (!this.isConfiguring) {\n this.refresh();\n }\n }\n //endregion\n //region Fit to width\n updateAvailableWidth(width) {\n this.refreshWidths();\n }\n // Updates the column widths according to fill and fit settings\n refreshWidths() {\n const\n me = this,\n {\n availableWidth,\n configuredColumnWidth\n } = me,\n count = me.resourceStore?.count;\n // Bail out if availableWidth not yet set or resource store not assigned/loaded\n // or column widths are defined in the resources.\n if (!availableWidth || !count || me.scheduler.variableColumnWidths) {\n return;\n }\n me.refreshingWidths = true;\n const\n // Fit width if configured to do so or if configured to fill and used width is less than available width\n fit = me.fitWidth || me.fillWidth && configuredColumnWidth * count < availableWidth,\n useWidth = fit ? Math.floor(availableWidth / count) : configuredColumnWidth,\n shouldAnimate = me.column.grid.enableEventAnimations && Math.abs(me._columnWidth - useWidth) > 30;\n DomHelper.addTemporaryClass(me.element, 'b-animating', shouldAnimate ? 300 : 0, me);\n me.columnWidth = useWidth;\n me.refreshingWidths = false;\n }\n //endregion\n //region Rendering\n // Visual resource range, set by VerticalRendering + its buffer\n set visibleResources({ firstResource, lastResource }) {\n this.firstResource = firstResource;\n this.lastResource = lastResource;\n this.updateWidthCache();\n this.refresh();\n }\n /**\n * Refreshes the visible headers\n */\n refresh() {\n const\n me = this,\n {\n firstResource,\n scheduler,\n resourceStore,\n lastResource\n } = me,\n {\n variableColumnWidths\n } = scheduler,\n groupField = resourceStore.isGrouped && resourceStore.groupers[0].field,\n configs = [];\n me.element.classList.toggle('b-grouped', Boolean(groupField));\n if (!me.column.grid.isConfiguring && firstResource > -1 && lastResource > -1 && lastResource < resourceStore.count) {\n let currentGroup;\n // Gather element configs for resource headers in view\n for (let i = firstResource; i <= lastResource; i++) {\n const\n resourceRecord = resourceStore.allResourceRecords[i],\n groupRecord = resourceRecord.groupParent?.get(resourceStore.id),\n groupChildren = groupRecord?.groupChildren;\n if (groupField && groupRecord.id !== currentGroup?.dataset.resourceId) {\n const\n groupLeft = groupChildren[0].instanceMeta(scheduler).insetStart,\n groupWidth = groupChildren[groupChildren.length - 1].instanceMeta(scheduler).insetEnd - groupLeft;\n currentGroup = {\n className : 'b-resourceheader-group-cell',\n dataset : {\n resourceId : groupRecord.id\n },\n style : {\n left : groupLeft,\n width : groupWidth\n },\n children : [\n {\n tag : 'span',\n html : StringHelper.encodeHtml(groupChildren[0][groupField])\n },\n {\n className : 'b-resourceheader-group-children',\n children : []\n }\n ]\n };\n configs.push(currentGroup);\n }\n const\n instanceMeta = resourceRecord.instanceMeta(scheduler),\n // Possible variable column width taken from the resources, fallback to scheduler's default\n width = instanceMeta.columnWidth || me.columnWidth,\n position = groupField ? instanceMeta.insetStart - currentGroup.style.left //groupChildren[0].instanceMeta(scheduler).insetStart\n : variableColumnWidths ? instanceMeta.insetStart : i * me.columnWidth,\n elementConfig = {\n // Might look like overkill to use DomClassList here, but can be used in headerRenderer\n className : new DomClassList({\n 'b-resourceheader-cell' : 1\n }),\n dataset : {\n resourceId : resourceRecord.id\n },\n style : {\n [scheduler.rtl ? 'right' : 'left'] : position,\n width\n },\n children : []\n };\n // Let a configured headerRenderer have a go at it before applying\n if (me.headerRenderer) {\n const value = me.headerRenderer({ elementConfig, resourceRecord });\n if (value) {\n if (typeof value === 'string') {\n elementConfig.html = value;\n }\n else if (typeof value === 'object') {\n elementConfig.children = [value];\n }\n }\n }\n // No headerRenderer, apply default markup\n else {\n let imageUrl;\n if (resourceRecord.imageUrl) {\n imageUrl = resourceRecord.imageUrl;\n }\n else {\n if (me.imagePath != null) {\n if (resourceRecord.image !== false) {\n const imageName = resourceRecord.image ||\n resourceRecord.name?.toLowerCase() + me.imageExtension;\n imageUrl = me.getImageURL(imageName);\n }\n }\n }\n // By default showing resource name and optionally avatar\n elementConfig.children.push(\n me.showAvatars && me.avatarRendering.getResourceAvatar({\n resourceRecord,\n initials : resourceRecord.initials,\n color : resourceRecord.eventColor,\n iconCls : resourceRecord.iconCls,\n defaultImageUrl : me.defaultImageName && me.getImageURL(me.defaultImageName),\n imageUrl\n }),\n {\n tag : 'span',\n className : 'b-resource-name',\n html : StringHelper.encodeHtml(resourceRecord.name)\n }\n );\n }\n if (groupField) {\n currentGroup.children[1].children.push(elementConfig);\n }\n else {\n configs.push(elementConfig);\n }\n }\n }\n // Sync changes to the header\n DomSync.sync({\n domConfig : {\n onlyChildren : true,\n children : configs\n },\n targetElement : me.element,\n syncIdField : 'resourceId',\n callback : ({ jsx, targetElement, domConfig }) => {\n // Handle the React (JSX) returned from the headerRenderer\n scheduler.processResourceHeader?.({ jsx, targetElement, domConfig });\n }\n });\n }\n //endregion\n onResourceMouseEvent(event) {\n const\n resourceCell = event.target.closest('.b-resourceheader-cell'),\n resourceRecord = this.resourceStore.getById(resourceCell.dataset.resourceId);\n this.trigger('resourceHeader' + StringHelper.capitalize(event.type), {\n resourceRecord,\n event\n });\n }\n // This function is not meant to be called by any code other than Base#getCurrentConfig().\n // It extracts the current configs for the header, removing irrelevant ones\n getCurrentConfig(options) {\n const result = super.getCurrentConfig(options);\n // Assigned from Scheduler\n delete result.resourceStore;\n delete result.column;\n delete result.type;\n return result;\n }\n}\nResourceHeader._$name = 'ResourceHeader';", "import WidgetColumn from '../../Grid/column/WidgetColumn.js';\nimport ColumnStore from '../../Grid/data/ColumnStore.js';\nimport Events from '../../Core/mixin/Events.js';\nimport HorizontalTimeAxis from '../view/HorizontalTimeAxis.js';\nimport ResourceHeader from '../view/ResourceHeader.js';\n/**\n * @module Scheduler/column/TimeAxisColumn\n */\n/**\n * A column containing the timeline \"viewport\", in which events, dependencies etc. are drawn.\n * Normally you do not need to interact with or create this column, it is handled by Scheduler.\n *\n * If you wish to output custom contents inside the time axis row cells, you can provide your custom column configuration\n * using the {@link #config-renderer} like so:\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * appendTo : document.body\n * columns : [\n * { text : 'Name', field : 'name', width : 130 },\n * {\n * type : 'timeAxis',\n * renderer({ record, cellElement }) {\n * return '';\n * }\n * }\n * ]\n * });\n * ```\n *\n * @extends Grid/column/WidgetColumn\n * @column\n */\nexport default class TimeAxisColumn extends Events(WidgetColumn) {\n //region Config\n headerHoverable = false;\n static $name = 'TimeAxisColumn';\n static get fields() {\n return [\n // Exclude some irrelevant fields from getCurrentConfig()\n { name : 'locked', persist : false },\n { name : 'flex', persist : false },\n { name : 'width', persist : false },\n { name : 'cellCls', persist : false },\n { name : 'field', persist : false },\n 'mode'\n ];\n }\n static get defaults() {\n return {\n /**\n * Set to false to prevent this column header from being dragged.\n * @config {Boolean} draggable\n * @category Interaction\n * @default false\n */\n draggable : false,\n /**\n * Set to false to prevent grouping by this column.\n * @config {Boolean} groupable\n * @category Interaction\n * @default false\n */\n groupable : false,\n /**\n * Allow column visibility to be toggled through UI.\n * @config {Boolean} hideable\n * @default false\n * @category Interaction\n */\n hideable : false,\n /**\n * Show column picker for the column.\n * @config {Boolean} showColumnPicker\n * @default false\n * @category Menu\n */\n showColumnPicker : false,\n /**\n * Allow filtering data in the column (if Filter feature is enabled)\n * @config {Boolean} filterable\n * @default false\n * @category Interaction\n */\n filterable : false,\n /**\n * Allow sorting of data in the column\n * @config {Boolean} sortable\n * @category Interaction\n * @default false\n */\n sortable : false,\n /**\n * Set to `false` to prevent the column from being drag-resized when the ColumnResize plugin is enabled.\n * @config {Boolean} resizable\n * @default false\n * @category Interaction\n */\n resizable : false,\n /**\n * Allow searching in the column (respected by QuickFind and Search features)\n * @config {Boolean} searchable\n * @default false\n * @category Interaction\n */\n searchable : false,\n /**\n * @config {String} editor\n * @hide\n */\n editor : false,\n /**\n * Set to `true` to show a context menu on the cell elements in this column\n * @config {Boolean} enableCellContextMenu\n * @default false\n * @category Menu\n */\n enableCellContextMenu : false,\n /**\n * @config {Function|Boolean} tooltipRenderer\n * @hide\n */\n tooltipRenderer : false,\n /**\n * CSS class added to the header of this column\n * @config {String} cls\n * @category Rendering\n * @default 'b-sch-timeaxiscolumn'\n */\n cls : 'b-sch-timeaxiscolumn',\n // needs to have width specified, flex-basis messes measurements up\n needWidth : true,\n mode : null,\n region : 'normal',\n exportable : false,\n htmlEncode : false\n };\n }\n static get type() {\n return 'timeAxis';\n }\n //region Init\n construct(config) {\n const me = this;\n super.construct(...arguments);\n me.thisObj = me;\n // Inject the reference to this column as early as possible\n me.grid._timeAxisColumn = me;\n me.timeAxisViewModel = me.grid.timeAxisViewModel;\n // A bit hacky, because mode is a field and not a config\n // eslint-disable-next-line no-self-assign\n me.mode = me.mode;\n me.grid.ion({\n paint : 'onTimelinePaint',\n thisObj : me,\n once : true\n });\n }\n static get autoExposeFields() {\n return true;\n }\n // endregion\n doDestroy() {\n this.resourceColumns?.destroy();\n this.timeAxisView?.destroy();\n super.doDestroy();\n }\n set mode(mode) {\n const\n me = this,\n { grid } = me;\n me.set('mode', mode);\n // In horizontal mode this column has a time axis header on top, with timeline ticks\n if (mode === 'horizontal') {\n me.timeAxisView = new HorizontalTimeAxis({\n model : me.timeAxisViewModel,\n compactCellWidthThreshold : me.compactCellWidthThreshold,\n owner : grid,\n client : grid\n });\n }\n // In vertical mode, it instead displays resources at top\n else if (mode === 'vertical') {\n me.resourceColumns = ResourceHeader.new({\n column : me,\n scheduler : grid,\n resourceStore : grid.resourceStore,\n imagePath : grid.resourceImagePath,\n imageExtension : grid.resourceImageExtension,\n defaultImageName : grid.defaultResourceImageName\n }, grid.resourceColumns || {});\n me.relayEvents(me.resourceColumns, [\n 'resourceheaderclick',\n 'resourceheaderdblclick',\n 'resourceheadercontextmenu'\n ]);\n }\n }\n get mode() {\n return this.get('mode');\n }\n //region Events\n onViewModelUpdate({ source : viewModel }) {\n const me = this;\n if (me.grid.timeAxisSubGrid.collapsed) {\n return;\n }\n if (me.mode === 'horizontal') {\n // render the time axis view into the column header element\n me.refreshHeader(true);\n me.width = viewModel.totalSize;\n me.grid.refresh();\n // When width is set above, that ends up on a columnsResized listener, but the refreshing of the fake\n // scrollers to accommodate the new width is not done in this timeframe, so the upcoming centering related\n // to preset change cannot work. So we have to refresh the fake scrollers now\n me.subGrid.refreshFakeScroll();\n }\n else if (me.mode === 'vertical') {\n // Refresh to rerender cells, in the process updating the vertical timeaxis to reflect view model changes\n me.grid.refreshRows();\n }\n }\n // Called on paint. SubGrid has its width so this is the earliest time to configure the TimeAxisViewModel with\n // correct width\n onTimelinePaint({ firstPaint }) {\n const me = this;\n if (!me.subGrid.insertRowsBefore) {\n return;\n }\n if (firstPaint) {\n me.subGridElement.classList.add('b-timeline-subgrid');\n if (me.mode === 'vertical') {\n me.refreshHeader();\n // The above operation can cause height change.\n me.grid?.onHeightChange();\n }\n }\n }\n //endregion\n //region Rendering\n /**\n * Refreshes the columns header contents (which is either a HorizontalTimeAxis or a ResourceHeader). Useful if you\n * have rendered some extra meta data that depends on external data such as the EventStore or ResourceStore.\n */\n refreshHeader(internal) {\n const\n me = this,\n { element } = me;\n if (element) {\n if (me.mode === 'horizontal') {\n // Force timeAxisViewModel to regenerate its column config, which calls header renderers etc.\n !internal && me.timeAxisViewModel.update(undefined, undefined, true);\n if (!me.timeAxisView.rendered) {\n // Do not need the normal header markup\n element.innerHTML = '';\n me.timeAxisView.render(element);\n }\n else {\n // Force rebuild of cells in case external data has changed (cheap since it still syncs to DOM)\n me.timeAxisView.refresh(true);\n }\n }\n else if (me.mode === 'vertical') {\n if (!me.resourceColumns.currentElement) {\n // Do not need the normal header markup\n element.innerHTML = '';\n me.resourceColumns.render(element);\n }\n else {\n me.resourceColumns.refresh();\n }\n // Vertical's resourceColumns is redrawn with the events, no need here\n }\n }\n }\n internalRenderer(renderData) {\n const { grid } = this;\n // No drawing of events before engines initial commit\n if (grid.project.isInitialCommitPerformed || grid.project.isDelayingCalculation) {\n grid.currentOrientation.renderer(renderData);\n return super.internalRenderer(renderData);\n }\n return '';\n }\n //endregion\n get timeAxisViewModel() {\n return this._timeAxisViewModel;\n }\n set timeAxisViewModel(timeAxisViewModel) {\n const me = this;\n me.detachListeners('tavm');\n timeAxisViewModel?.ion({\n name : 'tavm',\n update : 'onViewModelUpdate',\n prio : -10000,\n thisObj : me\n });\n me._timeAxisViewModel = timeAxisViewModel;\n if (me.timeAxisView) {\n me.timeAxisView.model = timeAxisViewModel;\n }\n }\n // Width of the time axis column is solely determined by the zoom level. We should not keep it part of the state\n // otherwise restoring the state might break the normal zooming process.\n // Covered by SchedulerState.t\n // https://github.com/bryntum/support/issues/5545\n getState() {\n const state = super.getState();\n delete state.width;\n delete state.flex;\n return state;\n }\n}\nColumnStore.registerColumnType(TimeAxisColumn);\nTimeAxisColumn._$name = 'TimeAxisColumn';", "import TimeAxisBase from './TimeAxisBase.js';\n/**\n * @module Scheduler/view/VerticalTimeAxis\n */\n/**\n * Widget that renders a vertical time axis. Only renders ticks in view. Used in vertical mode.\n * @extends Core/widget/Widget\n * @private\n */\nexport default class VerticalTimeAxis extends TimeAxisBase {\n static get $name() {\n return 'VerticalTimeAxis';\n }\n static get configurable() {\n return {\n cls : 'b-verticaltimeaxis',\n sizeProperty : 'height',\n positionProperty : 'top',\n wrapText : true\n };\n }\n // All cells overlayed in the same space.\n // For future use.\n buildHorizontalCells() {\n const\n me = this,\n { client } = me,\n stickyHeaders = client?.stickyHeaders,\n featureHeaderConfigs = [],\n cellConfigs = me.levels.reduce((result, level, i) => {\n if (level.cells) {\n result.push(...level.cells?.filter(cell => cell.start < me.endDate && cell.end > me.startDate).map((cell, j, cells) => ({\n role : 'presentation',\n className : {\n 'b-sch-header-timeaxis-cell' : 1,\n [cell.headerCellCls] : cell.headerCellCls,\n [`b-align-${cell.align}`] : cell.align,\n 'b-last' : j === cells.length - 1,\n 'b-lowest' : i === me.levels.length - 1\n },\n dataset : {\n tickIndex : cell.index,\n cellId : `${i}-${cell.index}`,\n headerPosition : i,\n // Used in export tests to resolve dates from tick elements\n ...globalThis.DEBUG && { date : cell.start.getTime() }\n },\n style : {\n // DomHelper appends px to numeric dimensions\n top : cell.coord,\n height : cell.width,\n minHeight : cell.width\n },\n children : [\n {\n role : 'presentation',\n className : {\n 'b-sch-header-text' : 1,\n 'b-sticky-header' : stickyHeaders\n },\n html : cell.value\n }\n ]\n })));\n }\n return result;\n }, []);\n // When tested in isolation there is no client\n client?.getHeaderDomConfigs(featureHeaderConfigs);\n cellConfigs.push(...featureHeaderConfigs);\n // noinspection JSSuspiciousNameCombination\n return {\n className : me.widgetClassList,\n dataset : {\n headerFeature : `headerRow0`,\n headerPosition : 0\n },\n syncOptions : {\n // Keep a maximum of 5 released cells. Might be fine with fewer since ticks are fixed width.\n // Prevents an unnecessary amount of cells from sticking around when switching from narrow to\n // wide tickSizes\n releaseThreshold : 5,\n syncIdField : 'cellId'\n },\n children : cellConfigs\n };\n }\n get height() {\n return this.size;\n }\n}\nVerticalTimeAxis._$name = 'VerticalTimeAxis';", "import Column from '../../Grid/column/Column.js';\nimport ColumnStore from '../../Grid/data/ColumnStore.js';\nimport VerticalTimeAxis from '../view/VerticalTimeAxis.js';\n/**\n * @module Scheduler/column/VerticalTimeAxisColumn\n */\n/**\n * A special column containing the time axis labels when the Scheduler is used in vertical mode. You can configure,\n * it using the {@link Scheduler.view.Scheduler#config-verticalTimeAxisColumn} config object.\n *\n * **Note**: this column is sized by flexing to consume full width of its containing {@link Grid.view.SubGrid}. To\n * change width of this column, instead size the subgrid like so:\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * mode : 'vertical',\n * subGridConfigs : {\n * locked : {\n * width : 300\n * }\n * }\n * });\n * ```\n *\n * @extends Grid/column/Column\n */\nexport default class VerticalTimeAxisColumn extends Column {\n static $name = 'VerticalTimeAxisColumn';\n static get type() {\n return 'verticalTimeAxis';\n }\n static get defaults() {\n return {\n /**\n * @hideconfigs autoWidth, autoHeight\n */\n /**\n * Set to false to prevent this column header from being dragged.\n * @config {Boolean} draggable\n * @category Interaction\n * @default false\n * @hide\n */\n draggable : false,\n /**\n * Set to false to prevent grouping by this column.\n * @config {Boolean} groupable\n * @category Interaction\n * @default false\n * @hide\n */\n groupable : false,\n /**\n * Allow column visibility to be toggled through UI.\n * @config {Boolean} hideable\n * @default false\n * @category Interaction\n * @hide\n */\n hideable : false,\n /**\n * Show column picker for the column.\n * @config {Boolean} showColumnPicker\n * @default false\n * @category Menu\n * @hide\n */\n showColumnPicker : false,\n /**\n * Allow filtering data in the column (if Filter feature is enabled)\n * @config {Boolean} filterable\n * @default false\n * @category Interaction\n * @hide\n */\n filterable : false,\n /**\n * Allow sorting of data in the column\n * @config {Boolean} sortable\n * @category Interaction\n * @default false\n * @hide\n */\n sortable : false,\n // /**\n // * Set to `false` to prevent the column from being drag-resized when the ColumnResize plugin is enabled.\n // * @config {Boolean} resizable\n // * @default false\n // * @category Interaction\n // * @hide\n // */\n // resizable : false,\n /**\n * Allow searching in the column (respected by QuickFind and Search features)\n * @config {Boolean} searchable\n * @default false\n * @category Interaction\n * @hide\n */\n searchable : false,\n /**\n * Specifies if this column should be editable, and define which editor to use for editing cells in the column (if CellEdit feature is enabled)\n * @config {String} editor\n * @default false\n * @category Interaction\n * @hide\n */\n editor : false,\n /**\n * Set to `true` to show a context menu on the cell elements in this column\n * @config {Boolean} enableCellContextMenu\n * @default false\n * @category Menu\n * @hide\n */\n enableCellContextMenu : false,\n /**\n * @config {Function|Boolean} tooltipRenderer\n * @hide\n */\n tooltipRenderer : false,\n /**\n * Column minimal width. If value is Number then minimal width is in pixels\n * @config {Number|String} minWidth\n * @default 0\n * @category Layout\n */\n minWidth : 0,\n resizable : false,\n cellCls : 'b-verticaltimeaxiscolumn',\n locked : true,\n flex : 1,\n alwaysClearCell : false\n };\n }\n get isFocusable() {\n return false;\n }\n construct(data) {\n super.construct(...arguments);\n this.view = new VerticalTimeAxis({\n model : this.grid.timeAxisViewModel,\n client : this.grid\n });\n }\n renderer({ cellElement, size }) {\n this.view.render(cellElement);\n size.height = this.view.height;\n }\n // This function is not meant to be called by any code other than Base#getCurrentConfig().\n // It extracts the current configs (fields) for the column, removing irrelevant ones\n getCurrentConfig(options) {\n const result = super.getCurrentConfig(options);\n // Remove irrelevant configs\n delete result.id;\n delete result.region;\n delete result.type;\n delete result.field;\n delete result.ariaLabel;\n delete result.cellAriaLabel;\n return result;\n }\n}\nColumnStore.registerColumnType(VerticalTimeAxisColumn);\nVerticalTimeAxisColumn._$name = 'VerticalTimeAxisColumn';", "import TimelineBase from './TimelineBase.js';\nimport DateHelper from '../../Core/helper/DateHelper.js';\nimport DomHelper from '../../Core/helper/DomHelper.js';\nimport CrudManager from '../data/CrudManager.js';\nimport DomSync from '../../Core/helper/DomSync.js';\nimport Rectangle from '../../Core/helper/util/Rectangle.js';\nimport '../localization/En.js';\nimport CurrentConfig from './mixin/CurrentConfig.js';\nimport Describable from './mixin/Describable.js';\nimport SchedulerDom from './mixin/SchedulerDom.js';\nimport SchedulerDomEvents from './mixin/SchedulerDomEvents.js';\nimport SchedulerEventRendering from './mixin/SchedulerEventRendering.js';\nimport SchedulerStores from './mixin/SchedulerStores.js';\nimport SchedulerScroll from './mixin/SchedulerScroll.js';\nimport SchedulerRegions from './mixin/SchedulerRegions.js';\nimport SchedulerState from './mixin/SchedulerState.js';\nimport EventSelection from './mixin/EventSelection.js';\nimport EventNavigation from './mixin/EventNavigation.js';\nimport TransactionalFeatureMixin from './mixin/TransactionalFeatureMixin.js';\nimport CrudManagerView from '../crud/mixin/CrudManagerView.js';\nimport HorizontalRendering from './orientation/HorizontalRendering.js';\nimport VerticalRendering from './orientation/VerticalRendering.js';\nimport '../column/TimeAxisColumn.js';\nimport '../column/VerticalTimeAxisColumn.js';\n// Should always be present in Scheduler\nimport VersionHelper from '../../Core/helper/VersionHelper.js';\n/**\n * @module Scheduler/view/SchedulerBase\n */\nconst\n descriptionFormats = {\n month : 'MMMM, YYYY',\n week : ['MMMM YYYY (Wp)', 'S{MMM} - E{MMM YYYY} (S{Wp})'],\n day : 'MMMM D, YYYY'\n };\n/**\n * A thin base class for {@link Scheduler.view.Scheduler}. Does not include any features by default, allowing smaller\n * custom-built bundles if used in place of {@link Scheduler.view.Scheduler}.\n *\n * **NOTE:** In most scenarios you do probably want to use Scheduler instead of SchedulerBase.\n *\n * @mixes Scheduler/view/mixin/Describable\n * @mixes Scheduler/view/mixin/EventNavigation\n * @mixes Scheduler/view/mixin/EventSelection\n * @mixes Scheduler/view/mixin/SchedulerDom\n * @mixes Scheduler/view/mixin/SchedulerDomEvents\n * @mixes Scheduler/view/mixin/SchedulerEventRendering\n * @mixes Scheduler/view/mixin/SchedulerRegions\n * @mixes Scheduler/view/mixin/SchedulerScroll\n * @mixes Scheduler/view/mixin/SchedulerState\n * @mixes Scheduler/view/mixin/SchedulerStores\n * @mixes Scheduler/view/mixin/TimelineDateMapper\n * @mixes Scheduler/view/mixin/TimelineDomEvents\n * @mixes Scheduler/view/mixin/TimelineEventRendering\n * @mixes Scheduler/view/mixin/TimelineScroll\n * @mixes Scheduler/view/mixin/TimelineViewPresets\n * @mixes Scheduler/view/mixin/TimelineZoomable\n * @mixes Scheduler/view/mixin/TransactionalFeatureMixin\n * @mixes Scheduler/crud/mixin/CrudManagerView\n * @mixes Scheduler/data/mixin/ProjectConsumer\n *\n * @features Scheduler/feature/ColumnLines\n * @features Scheduler/feature/Dependencies\n * @features Scheduler/feature/DependencyEdit\n * @features Scheduler/feature/EventCopyPaste\n * @features Scheduler/feature/EventDrag\n * @features Scheduler/feature/EventDragCreate\n * @features Scheduler/feature/EventDragSelect\n * @features Scheduler/feature/EventEdit\n * @features Scheduler/feature/EventFilter\n * @features Scheduler/feature/EventMenu\n * @features Scheduler/feature/EventNonWorkingTime\n * @features Scheduler/feature/EventResize\n * @features Scheduler/feature/EventTooltip\n * @features Scheduler/feature/GroupSummary\n * @features Scheduler/feature/HeaderZoom\n * @features Scheduler/feature/Labels\n * @features Scheduler/feature/NonWorkingTime\n * @features Scheduler/feature/Pan\n * @features Scheduler/feature/ResourceMenu\n * @features Scheduler/feature/ResourceTimeRanges\n * @features Scheduler/feature/RowReorder\n * @features Scheduler/feature/RowResize\n * @features Scheduler/feature/ScheduleContext\n * @features Scheduler/feature/ScheduleMenu\n * @features Scheduler/feature/ScheduleTooltip\n * @features Scheduler/feature/SimpleEventEdit\n * @features Scheduler/feature/Split\n * @features Scheduler/feature/StickyEvents\n * @features Scheduler/feature/Summary\n * @features Scheduler/feature/TimeAxisHeaderMenu\n * @features Scheduler/feature/TimeRanges\n * @features Scheduler/feature/TimeSelection\n *\n * @features Scheduler/feature/experimental/ExcelExporter\n *\n * @features Scheduler/feature/export/PdfExport\n * @features Scheduler/feature/export/Print\n *\n * @extends Scheduler/view/TimelineBase\n * @widget\n */\nexport default class SchedulerBase extends TimelineBase.mixin(\n CrudManagerView,\n Describable,\n SchedulerDom,\n SchedulerDomEvents,\n SchedulerStores,\n SchedulerScroll,\n SchedulerState,\n SchedulerEventRendering,\n SchedulerRegions,\n EventSelection,\n EventNavigation,\n CurrentConfig,\n TransactionalFeatureMixin\n) {\n //region Config\n static $name = 'SchedulerBase';\n // Factoryable type name\n static type = 'schedulerbase';\n static configurable = {\n /**\n * Get/set the scheduler's read-only state. When set to `true`, any UIs for modifying data are disabled.\n * @member {Boolean} readOnly\n * @category Misc\n */\n /**\n * Configure as `true` to make the scheduler read-only, by disabling any UIs for modifying data.\n *\n * __Note that checks MUST always also be applied at the server side.__\n * @config {Boolean} readOnly\n * @default false\n * @category Misc\n */\n /**\n * The date to display when used as a component of a Calendar.\n *\n * This is required by the Calendar Mode Interface.\n *\n * @config {Date}\n * @category Calendar integration\n */\n date : {\n value : null,\n $config : {\n equal : 'date'\n }\n },\n /**\n * Unit used to control how large steps to take when clicking the previous and next buttons in the Calendar\n * UI. Only applies when used as a component of a Calendar.\n *\n * Suitable units depend on configured {@link #config-range}, a smaller or equal unit is recommended.\n *\n * @config {DurationUnit}\n * @default\n * @category Calendar integration\n */\n stepUnit : 'week',\n /**\n * Unit used to set the length of the time axis when used as a component of a Calendar. Suitable units are\n * `'month'`, `'week'` and `'day'`.\n *\n * @config {'day'|'week'|'month'}\n * @category Calendar integration\n * @default\n */\n range : 'week',\n /**\n * When the scheduler is used in a Calendar, this function provides the textual description for the\n * Calendar's toolbar.\n *\n * ```javascript\n * descriptionRenderer : scheduler => {\n * const\n * count = scheduler.eventStore.records.filter(\n * eventRec => DateHelper.intersectSpans(\n * scheduler.startDate, scheduler.endDate,\n * eventRec.startDate, eventRec.endDate)).length,\n * startDate = DateHelper.format(scheduler.startDate, 'DD/MM/YYY'),\n * endData = DateHelper.format(scheduler.endDate, 'DD/MM/YYY');\n *\n * return `${startDate} - ${endData}, ${count} event${count === 1 ? '' : 's'}`;\n * }\n * ```\n * @config {Function}\n * @param {Scheduler.view.SchedulerBase} view The active view.\n * @returns {String}\n * @category Calendar integration\n */\n /**\n * A method allowing you to define date boundaries that will constrain resize, create and drag drop\n * operations. The method will be called with the Resource record, and the Event record.\n *\n * ```javascript\n * new Scheduler({\n * getDateConstraints(resourceRecord, eventRecord) {\n * // Assuming you have added these extra fields to your own EventModel subclass\n * const { minStartDate, maxEndDate } = eventRecord;\n *\n * return {\n * start : minStartDate,\n * end : maxEndDate\n * };\n * }\n * });\n * ```\n * @param {Scheduler.model.ResourceModel} [resourceRecord] The resource record\n * @param {Scheduler.model.EventModel} [eventRecord] The event record\n * @returns {Object} Constraining object containing `start` and `end` constraints. Omitting either\n * will mean that end is not constrained. So you can prevent a resize or move from moving *before*\n * a certain time while not constraining the end date.\n * @returns {Date} [return.start] Start date\n * @returns {Date} [return.end] End date\n * @config {Function}\n * @category Scheduled events\n */\n getDateConstraints : null,\n /**\n * The time axis column config for vertical {@link Scheduler.view.SchedulerBase#config-mode}.\n *\n * Object with {@link Scheduler.column.VerticalTimeAxisColumn} configuration.\n *\n * This object will be used to configure the vertical time axis column instance.\n *\n * The config allows configuring the `VerticalTimeAxisColumn` instance used in vertical mode with any Column options that apply to it.\n *\n * Example:\n *\n * ```javascript\n * new Scheduler({\n * mode : 'vertical',\n * features : {\n * filterBar : true\n * },\n * verticalTimeAxisColumn : {\n * text : 'Filter by event name',\n * width : 180,\n * filterable : {\n * // add a filter field to the vertical column access header\n * filterField : {\n * type : 'text',\n * placeholder : 'Type to search',\n * onChange : ({ value }) => {\n * // filter event by name converting to lowerCase to be equal comparison\n * scheduler.eventStore.filter({\n * filters : event => event.name.toLowerCase().includes(value.toLowerCase()),\n * replace : true\n * });\n * }\n * }\n * }\n * },\n * ...\n * });\n * ```\n *\n * @config {VerticalTimeAxisColumnConfig}\n * @category Time axis\n */\n verticalTimeAxisColumn : {},\n /**\n * See {@link Scheduler.view.Scheduler#keyboard-shortcuts Keyboard shortcuts} for details\n * @config {ObjectNote that toggling this at runtime won't affect already overlapping events.
\n *\n * @prp {Boolean}\n * @default\n * @category Scheduled events\n */\n allowOverlap : true,\n /**\n * The height in pixels of Scheduler rows.\n * @config {Number}\n * @default\n * @category Common\n */\n rowHeight : 60,\n /**\n * Scheduler overrides Grids default implementation of {@link Grid.view.GridBase#config-getRowHeight} to\n * pre-calculate row heights based on events in the rows.\n *\n * The amount of rows that are pre-calculated is limited for performance reasons. The limit is configurable\n * by specifying the {@link Scheduler.view.SchedulerBase#config-preCalculateHeightLimit} config.\n *\n * The results of the calculation are cached internally.\n *\n * @config {Function} getRowHeight\n * @param {Scheduler.model.ResourceModel} getRowHeight.record Resource record to determine row height for\n * @returns {Number} Desired row height\n * @category Layout\n */\n /**\n * Maximum number of resources for which height is pre-calculated. If you have many events per\n * resource you might want to lower this number to gain some initial rendering performance.\n *\n * Specify a falsy value to opt out of row height pre-calculation.\n *\n * @config {Number}\n * @default\n * @category Layout\n */\n preCalculateHeightLimit : 10000,\n crudManagerClass : CrudManager,\n // Skip live redraw of events while dragging RegionResize splitter if too many events are rendered in DOM\n liveRedrawWhileMovingSplitterThreshold : 100,\n testConfig : {\n loadMaskError : {\n autoClose : 10,\n showDelay : 0\n }\n }\n };\n }\n timeCellSelector = '.b-sch-timeaxis-cell';\n resourceTimeRangeSelector = '.b-sch-resourcetimerange';\n //endregion\n //region Store & model docs\n // Documented here instead of in SchedulerStores since SchedulerPro uses different types\n // Configs\n /**\n * Inline events, will be loaded into an internally created EventStore.\n * @config {Scheduler.model.EventModel[]|Scheduler.model.EventModelConfig[]} events\n * @category Data\n */\n /**\n * The {@link Scheduler.data.EventStore} holding the events to be rendered into the scheduler (required).\n * @config {Scheduler.data.EventStore|Scheduler.data.EventStoreConfig} eventStore\n * @category Data\n */\n /**\n * Inline resources, will be loaded into an internally created ResourceStore.\n * @config {Scheduler.model.ResourceModel[]|Scheduler.model.ResourceModelConfig[]} resources\n * @category Data\n */\n /**\n * The {@link Scheduler.data.ResourceStore} holding the resources to be rendered into the scheduler (required).\n * @config {Scheduler.data.ResourceStore|Scheduler.data.ResourceStoreConfig} resourceStore\n * @category Data\n */\n /**\n * Inline assignments, will be loaded into an internally created AssignmentStore.\n * @config {Scheduler.model.AssignmentModel[]|Object[]} assignments\n * @category Data\n */\n /**\n * The optional {@link Scheduler.data.AssignmentStore}, holding assignments between resources and events.\n * Required for multi assignments.\n * @config {Scheduler.data.AssignmentStore|Scheduler.data.AssignmentStoreConfig} assignmentStore\n * @category Data\n */\n /**\n * Inline dependencies, will be loaded into an internally created DependencyStore.\n * @config {Scheduler.model.DependencyModel[]|Scheduler.model.DependencyModelConfig[]} dependencies\n * @category Data\n */\n /**\n * The optional {@link Scheduler.data.DependencyStore}.\n * @config {Scheduler.data.DependencyStore|Scheduler.model.DependencyStoreConfig} dependencyStore\n * @category Data\n */\n // Properties\n /**\n * Get/set events, applies to the backing project's EventStore.\n * @member {Scheduler.model.EventModel[]} events\n * @accepts {Scheduler.model.EventModel[]|Scheduler.model.EventModelConfig[]}\n * @category Data\n */\n /**\n * Get/set the event store instance of the backing project.\n * @member {Scheduler.data.EventStore} eventStore\n * @category Data\n */\n /**\n * Get/set resources, applies to the backing project's ResourceStore.\n * @member {Scheduler.model.ResourceModel[]} resources\n * @accepts {Scheduler.model.ResourceModel[]|Scheduler.model.ResourceModelConfig[]}\n * @category Data\n */\n /**\n * Get/set the resource store instance of the backing project\n * @member {Scheduler.data.ResourceStore} resourceStore\n * @category Data\n */\n /**\n * Get/set assignments, applies to the backing project's AssignmentStore.\n * @member {Scheduler.model.AssignmentModel[]} assignments\n * @accepts {Scheduler.model.AssignmentModel[]|Object[]}\n * @category Data\n */\n /**\n * Get/set the event store instance of the backing project.\n * @member {Scheduler.data.AssignmentStore} assignmentStore\n * @category Data\n */\n /**\n * Get/set dependencies, applies to the backing projects DependencyStore.\n * @member {Scheduler.model.DependencyModel[]} dependencies\n * @accepts {Scheduler.model.DependencyModel[]|Scheduler.model.DependencyModelConfig[]}\n * @category Data\n */\n /**\n * Get/set the dependencies store instance of the backing project.\n * @member {Scheduler.data.DependencyStore} dependencyStore\n * @category Data\n */\n //endregion\n //region Events\n /**\n * Fired after rendering an event, when its element is available in DOM.\n * @event renderEvent\n * @param {Scheduler.view.Scheduler} source This Scheduler\n * @param {Scheduler.model.EventModel} eventRecord The event record\n * @param {Scheduler.model.ResourceModel} resourceRecord The resource record\n * @param {Scheduler.model.AssignmentModel} assignmentRecord The assignment record\n * @param {Object} renderData An object containing details about the event rendering, see\n * {@link Scheduler.view.mixin.SchedulerEventRendering#config-eventRenderer} for details\n * @param {Boolean} isRepaint `true` if this render is a repaint of the event, updating its existing element\n * @param {Boolean} isReusingElement `true` if this render lead to the event reusing a released events element\n * @param {HTMLElement} element The event bar element\n */\n /**\n * Fired after releasing an event, useful to cleanup of custom content added on `renderEvent` or in `eventRenderer`.\n * @event releaseEvent\n * @param {Scheduler.view.Scheduler} source This Scheduler\n * @param {Scheduler.model.EventModel} eventRecord The event record\n * @param {Scheduler.model.ResourceModel} resourceRecord The resource record\n * @param {Scheduler.model.AssignmentModel} assignmentRecord The assignment record\n * @param {Object} renderData An object containing details about the event rendering\n * @param {HTMLElement} element The event bar element\n */\n /**\n * Fired when clicking a resource header cell\n * @event resourceHeaderClick\n * @param {Scheduler.view.Scheduler} source This Scheduler\n * @param {Scheduler.model.ResourceModel} resourceRecord The resource record\n * @param {Event} event The event\n */\n /**\n * Fired when double clicking a resource header cell\n * @event resourceHeaderDblclick\n * @param {Scheduler.view.Scheduler} source This Scheduler\n * @param {Scheduler.model.ResourceModel} resourceRecord The resource record\n * @param {Event} event The event\n */\n /**\n * Fired when activating context menu on a resource header cell\n * @event resourceHeaderContextmenu\n * @param {Scheduler.view.Scheduler} source This Scheduler\n * @param {Scheduler.model.ResourceModel} resourceRecord The resource record\n * @param {Event} event The event\n */\n /**\n * Triggered when a keydown event is observed if there are selected events.\n * @event eventKeyDown\n * @param {Scheduler.view.Scheduler} source This Scheduler\n * @param {Scheduler.model.EventModel[]} eventRecords The selected event records\n * @param {Scheduler.model.AssignmentModel[]} assignmentRecords The selected assignment records\n * @param {KeyboardEvent} event Browser event\n */\n /**\n * Triggered when a keyup event is observed if there are selected events.\n * @event eventKeyUp\n * @param {Scheduler.view.Scheduler} source This Scheduler\n * @param {Scheduler.model.EventModel[]} eventRecords The selected event records\n * @param {Scheduler.model.AssignmentModel[]} assignmentRecords The selected assignment records\n * @param {KeyboardEvent} event Browser event\n */\n //endregion\n //region Functions injected by features\n // For documentation & typings purposes\n /**\n * Opens an editor UI to edit the passed event.\n *\n * *NOTE: Only available when the {@link Scheduler/feature/EventEdit EventEdit} feature is enabled.*\n *\n * @function editEvent\n * @param {Scheduler.model.EventModel} eventRecord Event to edit\n * @param {Scheduler.model.ResourceModel} [resourceRecord] The Resource record for the event.\n * This parameter is needed if the event is newly created for a resource and has not been assigned, or when using\n * multi assignment.\n * @param {HTMLElement} [element] Element to anchor editor to (defaults to events element)\n * @category Feature shortcuts\n */\n /**\n * Returns the dependency record for a DOM element\n *\n * *NOTE: Only available when the {@link Scheduler/feature/Dependencies Dependencies} feature is enabled.*\n *\n * @function resolveDependencyRecord\n * @param {HTMLElement} element The dependency line element\n * @returns {Scheduler.model.DependencyModel} The dependency record\n * @category Feature shortcuts\n */\n //endregion\n //region Init\n afterConstruct() {\n const me = this;\n super.afterConstruct();\n me.ion({ scroll : 'onVerticalScroll', thisObj : me });\n if (me.createEventOnDblClick) {\n me.ion({ scheduledblclick : me.onTimeAxisCellDblClick });\n }\n me.ion({ splitterDragStart : 'internalOnSplitterDragStart' });\n }\n //endregion\n //region Overrides\n onPaintOverride() {\n // Internal procedure used for paint method overrides\n // Not used in onInternalPaint() because it may be chained on instance and Override won't be applied\n }\n //endregion\n //region Config getters/setters\n // Placeholder getter/setter for mixins, please make any changes needed to SchedulerStores#store instead\n get store() {\n return super.store;\n }\n set store(store) {\n super.store = store;\n }\n /**\n * Returns an object defining the range of visible resources\n * @property {Object}\n * @property {Scheduler.model.ResourceModel} visibleResources.first First visible resource\n * @property {Scheduler.model.ResourceModel} visibleResources.last Last visible resource\n * @readonly\n * @category Resources\n */\n get visibleResources() {\n const me = this;\n if (me.isVertical) {\n return me.currentOrientation.visibleResources;\n }\n return {\n first : me.store.getById(me.firstVisibleRow?.id),\n last : me.store.getById(me.lastVisibleRow?.id)\n };\n }\n //endregion\n //region Event handlers\n onLocaleChange() {\n this.currentOrientation.onLocaleChange();\n super.onLocaleChange();\n }\n onTimeAxisCellDblClick({ date : startDate, resourceRecord, row }) {\n this.createEvent(startDate, resourceRecord, row);\n }\n onVerticalScroll({ scrollTop }) {\n this.currentOrientation.updateFromVerticalScroll(scrollTop);\n }\n internalOnSplitterDragStart() {\n if (this.isHorizontal) {\n if (Object.keys(this.foregroundCanvas.syncIdMap).length > this.liveRedrawWhileMovingSplitterThreshold) {\n this.suspendRefresh();\n this.ion({ splitterDragEnd : () => this.resumeRefresh(true, false), once : true });\n }\n }\n }\n /**\n * Called when new event is created.\n * \u0421an be overridden to supply default record values etc.\n * @param {Scheduler.model.EventModel} eventRecord Newly created event\n * @category Scheduled events\n */\n onEventCreated(eventRecord) {}\n //endregion\n //region Mode\n /**\n * Checks if scheduler is in horizontal mode\n * @returns {Boolean}\n * @readonly\n * @category Common\n * @private\n */\n get isHorizontal() {\n return this.mode === 'horizontal';\n }\n /**\n * Checks if scheduler is in vertical mode\n * @returns {Boolean}\n * @readonly\n * @category Common\n * @private\n */\n get isVertical() {\n return this.mode === 'vertical';\n }\n /**\n * Get mode (horizontal/vertical)\n * @property {'horizontal'|'vertical'}\n * @readonly\n * @category Common\n */\n get mode() {\n return this._mode;\n }\n set mode(mode) {\n const me = this;\n me._mode = mode;\n if (!me[mode]) {\n me.element.classList.add(`b-sch-${mode}`);\n if (mode === 'horizontal') {\n me.horizontal = new HorizontalRendering(me);\n if (me.isPainted) {\n me.horizontal.init();\n }\n }\n else if (mode === 'vertical') {\n me.vertical = new VerticalRendering(me);\n if (me.rendered) {\n me.vertical.init();\n }\n }\n }\n }\n get currentOrientation() {\n return this[this.mode];\n }\n //endregion\n //region Dom event dummies\n // this is ugly, but needed since super cannot be called from SchedulerDomEvents mixin...\n onElementKeyDown(event) {\n return super.onElementKeyDown(event);\n }\n onElementKeyUp(event) {\n return super.onElementKeyUp(event);\n }\n onElementMouseOver(event) {\n return super.onElementMouseOver(event);\n }\n onElementMouseOut(event) {\n return super.onElementMouseOut(event);\n }\n //endregion\n //region Feature hooks\n // Called for each event during drop\n processEventDrop() {}\n processCrossSchedulerEventDrop() {}\n // Called before event drag starts\n beforeEventDragStart() {}\n // Called after event drag starts\n afterEventDragStart() {}\n // Called after aborting a drag\n afterEventDragAbortFinalized() {}\n // Called during event drag validation\n checkEventDragValidity() {}\n // Called after event resizing starts\n afterEventResizeStart() {}\n // Called after generating a DomConfig for an event\n afterRenderEvent() {}\n //endregion\n //region Scheduler specific date mapping functions\n get hasEventEditor() {\n return Boolean(this.eventEditingFeature);\n }\n get eventEditingFeature() {\n const {\n eventEdit,\n taskEdit,\n simpleEventEdit\n } = this.features;\n return eventEdit?.enabled\n ? eventEdit\n : taskEdit?.enabled\n ? taskEdit\n : simpleEventEdit?.enabled ? simpleEventEdit : null;\n }\n /**\n * Creates an event on the specified date (and scrolls it into view), for the specified resource which conforms to\n * this scheduler's {@link #config-createEventOnDblClick} setting.\n *\n * NOTE: If the scheduler is readonly, or resource type is invalid (group header), or if `allowOverlap` is `false`\n * and slot is already occupied - no event is created.\n *\n * This method may be called programmatically by application code if the `createEventOnDblClick` setting\n * is `false`, in which case the default values for `createEventOnDblClick` will be used.\n *\n * If the {@link Scheduler.feature.EventEdit} feature is active, the new event\n * will be displayed in the event editor.\n * @param {Date} date The date to add the event at.\n * @param {Scheduler.model.ResourceModel} resourceRecord The resource to create the event for.\n * @category Scheduled events\n */\n async createEvent(startDate, resourceRecord) {\n const\n me = this,\n {\n enableEventAnimations,\n eventStore,\n assignmentStore,\n hasEventEditor\n } = me,\n resourceRecords = [resourceRecord],\n useEventModelDefaults = me.createEventOnDblClick.useEventModelDefaults,\n defaultDuration = useEventModelDefaults ? eventStore.modelClass.defaultValues.duration : 1,\n defaultDurationUnit = useEventModelDefaults ? eventStore.modelClass.defaultValues.durationUnit : me.timeAxis.unit,\n eventRecord = eventStore.createRecord({\n startDate,\n endDate : DateHelper.add(startDate, defaultDuration, defaultDurationUnit),\n duration : defaultDuration,\n durationUnit : defaultDurationUnit,\n name : me.L('L{Object.newEvent}')\n });\n if (me.readOnly || resourceRecord.isSpecialRow || resourceRecord.readOnly || (!me.allowOverlap && !me.isDateRangeAvailable(\n eventRecord.startDate,\n eventRecord.endDate,\n null,\n resourceRecord\n ))) {\n return;\n }\n me.eventEditingFeature?.captureStm(true);\n // It's only a provisional event if there is an event edit feature available to\n // cancel the add (by removing it). Otherwise it's a definite event creation.\n eventRecord.isCreating = hasEventEditor;\n me.onEventCreated(eventRecord);\n const assignmentRecords = assignmentStore?.assignEventToResource(eventRecord, resourceRecord);\n /**\n * Fires before an event is added. Can be triggered by schedule double click or drag create action.\n * @event beforeEventAdd\n * @param {Scheduler.view.Scheduler} source The Scheduler instance\n * @param {Scheduler.model.EventModel} eventRecord The record about to be added\n * @param {Scheduler.model.ResourceModel[]} resourceRecords Resources that the record is assigned to\n * @param {Scheduler.model.AssignmentModel[]} assignmentRecords The assignment records\n * @preventable\n */\n if (me.trigger('beforeEventAdd', { eventRecord, resourceRecords, assignmentRecords }) === false) {\n // Remove any assignment created above, to leave store as it was\n assignmentStore?.remove(assignmentRecords);\n me.eventEditingFeature?.freeStm(false);\n return;\n }\n me.enableEventAnimations = false;\n eventStore.add(eventRecord);\n me.project.commitAsync().then(() => me.enableEventAnimations = enableEventAnimations);\n // Element must be created synchronously, not after the project's normalizing delays.\n // Overrides the check for isEngineReady in VerticalRendering so that the newly added record\n // will be rendered when we call refreshRows.\n me.isCreating = true;\n me.refreshRows();\n me.isCreating = false;\n await me.scrollEventIntoView(eventRecord);\n /**\n * Fired when a double click or drag gesture has created a new event and added it to the event store.\n * @event eventAutoCreated\n * @param {Scheduler.view.Scheduler} source This Scheduler.\n * @param {Scheduler.model.EventModel} eventRecord The new event record.\n * @param {Scheduler.model.ResourceModel} resourceRecord The resource assigned to the new event.\n */\n me.trigger('eventAutoCreated', {\n eventRecord,\n resourceRecord\n });\n if (hasEventEditor) {\n me.editEvent(eventRecord, resourceRecord, me.getEventElement(eventRecord));\n }\n }\n /**\n * Checks if a date range is allocated or not for a given resource.\n * @param {Date} start The start date\n * @param {Date} end The end date\n * @param {Scheduler.model.EventModel|null} excludeEvent An event to exclude from the check (or null)\n * @param {Scheduler.model.ResourceModel} resource The resource\n * @returns {Boolean} True if the timespan is available for the resource\n * @category Dates\n */\n isDateRangeAvailable(start, end, excludeEvent, resource) {\n return this.eventStore.isDateRangeAvailable(start, end, excludeEvent, resource);\n }\n //endregion\n /**\n * Suspends UI refresh on store operations.\n *\n * Multiple calls to `suspendRefresh` stack up, and will require an equal number of `resumeRefresh` calls to\n * actually resume UI refresh.\n *\n * @function suspendRefresh\n * @category Rendering\n */\n /**\n * Resumes UI refresh on store operations.\n *\n * Multiple calls to `suspendRefresh` stack up, and will require an equal number of `resumeRefresh` calls to\n * actually resume UI refresh.\n *\n * Specify `true` as the first param to trigger a refresh if this call unblocked the refresh suspension.\n * If the underlying project is calculating changes, the refresh will be postponed until it is done.\n *\n * @param {Boolean} [trigger] `true` to trigger a refresh, if this resume unblocks suspension\n * @privateparam {Boolean} [useTransitions] `false` to block transitions\n * @category Rendering\n */\n async resumeRefresh(trigger = VersionHelper.checkVersion('core', '6.0', '>='), useTransitions = true) {\n super.resumeRefresh(false);\n const me = this;\n if (!me.refreshSuspended && trigger) {\n // Do not refresh until project is in a valid state\n if (!me.isEngineReady) {\n // Refresh will happen because of the commit, bail out of this one after forcing rendering to consider\n // next one a full refresh\n me.currentOrientation.refreshAllWhenReady = true;\n return me.project.commitAsync();\n }\n // View could've been destroyed while we waited for engine\n if (!me.isDestroyed) {\n // If it already is, refresh now\n if (useTransitions) {\n me.refreshWithTransition();\n }\n else {\n me.refresh();\n }\n }\n }\n }\n //region Appearance\n // Overrides grid to take crudManager loading into account\n toggleEmptyText() {\n const\n me = this;\n if (me.bodyContainer) {\n DomHelper.toggleClasses(me.bodyContainer, 'b-grid-empty', !(me.resourceStore.count > 0 || me.crudManager?.isLoading));\n }\n }\n // Overrides Grids base implementation to return a correctly calculated height for the row. Also stores it in\n // RowManagers height map, which is used to calculate total height etc.\n getRowHeight(resourceRecord) {\n if (this.isHorizontal) {\n const height = this.currentOrientation.calculateRowHeight(resourceRecord);\n this.rowManager.storeKnownHeight(resourceRecord.id, height);\n return height;\n }\n }\n // Calculates the height for specified rows. Call when changes potentially makes its height invalid\n calculateRowHeights(resourceRecords, silent = false) {\n const { store } = this;\n for (const resourceRecord of resourceRecords) {\n // Array allowed to have nulls in it for easier code when calling this fn\n // Also ignore records not in the flat part of the store (collapsed away resources)\n if (resourceRecord && store.isAvailable(resourceRecord)) {\n this.getRowHeight(resourceRecord);\n }\n }\n if (!silent) {\n this.rowManager.estimateTotalHeight(true);\n }\n }\n // Calculate heights for all rows (up to the preCalculateHeightLimit)\n calculateAllRowHeights(silent = false) {\n const\n { store, rowManager } = this,\n count = Math.min(store.count, this.preCalculateHeightLimit);\n // Allow opt out by specifying falsy value.\n if (count) {\n rowManager.clearKnownHeights();\n for (let i = 0; i < count; i++) {\n // This will both calculate and store the height\n this.getRowHeight(store.getAt(i));\n }\n // Make sure height is reflected on scroller etc.\n if (!silent) {\n rowManager.estimateTotalHeight(true);\n }\n }\n }\n //endregion\n //region Calendar Mode Interface\n // These are all internal and match up w/CalendarMixin\n /**\n * Returns the date or ranges of included dates as an array. If only the {@link #config-startDate} is significant,\n * the array will have that date as its only element. Otherwise, a range of dates is returned as a two-element\n * array with `[0]` is the {@link #config-startDate} and `[1]` is the {@link #property-lastDate}.\n * @member {Date[]}\n * @internal\n */\n get dateBounds() {\n const\n me = this,\n ret = [me.startDate];\n if (me.range === 'week') {\n ret.push(me.lastDate);\n }\n return ret;\n }\n get defaultDescriptionFormat() {\n return descriptionFormats[this.range];\n }\n /**\n * The last day that is included in the date range. This is different than {@link #config-endDate} since that date\n * is not inclusive. For example, an `endDate` of 2022-07-21 00:00:00 indicates that the time range ends at that\n * time, and so 2022-07-21 is _not_ in the range. In this example, `lastDate` would be 2022-07-20 since that is the\n * last day included in the range.\n * @member {Date}\n * @internal\n */\n get lastDate() {\n const lastDate = this.endDate;\n // endDate is \"exclusive\" because it means 00:00:00 of that day, so subtract 1\n // to keep description consistent with human expectations.\n return lastDate && DateHelper.add(lastDate, -1, 'day');\n }\n getEventRecord(target) {\n target = DomHelper.getEventElement(target);\n return this.resolveEventRecord(target);\n }\n getResourceRecord(domEvent) {\n return this.resolveResourceRecord(domEvent);\n }\n getEventElement(eventRecord) {\n return this.getElementFromEventRecord(eventRecord);\n }\n changeRange(unit) {\n return DateHelper.normalizeUnit(unit);\n }\n updateRange(unit) {\n if (!this.isConfiguring) {\n const\n currentDate = this.date,\n newDate = this.date = DateHelper.startOf(currentDate, unit);\n // Force a span update if changing the range did not change the date\n if (currentDate.getTime() === newDate.getTime()) {\n this.updateDate(newDate);\n }\n }\n }\n changeStepUnit(unit) {\n return DateHelper.normalizeUnit(unit);\n }\n updateDate(newDate) {\n const\n me = this,\n start = DateHelper.startOf(newDate, me.range);\n me.setTimeSpan(start, DateHelper.add(start, 1, me.range));\n // Cant always use newDate here in case timeAxis is filtered\n me.visibleDate = {\n date : DateHelper.max(newDate, me.timeAxis.startDate),\n block : 'start',\n animate : me.isPainted\n };\n me.trigger('descriptionChange');\n }\n updateScrollBuffer(value) {\n if (!this.isConfiguring) {\n this.currentOrientation.scrollBuffer = value;\n }\n }\n previous() {\n this.date = DateHelper.add(this.date, -1, this.stepUnit);\n }\n next() {\n this.date = DateHelper.add(this.date, 1, this.stepUnit);\n }\n //endregion\n /**\n * Assigns and schedules an unassigned event record (+ adds it to this Scheduler's event store unless already in it).\n * @param {Object} config The config containing data about the event record to schedule\n * @param {Date} config.startDate The start date\n * @param {Scheduler.model.EventModel|EventModelConfig} config.eventRecord Event (or data for it) to assign and schedule\n * @param {Scheduler.model.EventModel} [config.parentEventRecord] Parent event to add the event to (to nest it),\n * only applies when using the NestedEvents feature\n * @param {Scheduler.model.ResourceModel} config.resourceRecord Resource to assign the event to\n * @param {HTMLElement} [config.element] The element if you are dragging an element from outside the scheduler\n * @category Scheduled events\n */\n async scheduleEvent({ startDate, eventRecord, resourceRecord, element }) {\n const me = this;\n // NestedEvents has an override for this function to handle parentEventRecord\n if (!me.eventStore.includes(eventRecord)) {\n [eventRecord] = me.eventStore.add(eventRecord);\n }\n eventRecord.startDate = startDate;\n eventRecord.assign(resourceRecord);\n if (element) {\n const eventRect = Rectangle.from(element, me.foregroundCanvas);\n // Clear translate styles used by DragHelper\n DomHelper.setTranslateXY(element, 0, 0);\n DomHelper.setTopLeft(element, eventRect.y, eventRect.x);\n DomSync.addChild(me.foregroundCanvas, element, eventRecord.assignments[0].id);\n }\n await me.project.commitAsync();\n }\n}\n// Register this widget type with its Factory\nSchedulerBase.initClass();\n// Scheduler version is specified in TimelineBase because Gantt extends it\nSchedulerBase._$name = 'SchedulerBase';", "import ColorPicker from '../../Core/widget/ColorPicker.js';\nimport SchedulerBase from '../view/SchedulerBase.js';\n/**\n * @module Scheduler/widget/EventColorPicker\n */\n/**\n * A color picker that displays a list of available event colors which the user can select by using mouse or keyboard.\n * See Schedulers {@link Scheduler.view.mixin.TimelineEventRendering#config-eventColor eventColor config} for default\n * available colors.\n *\n * {@inlineexample Scheduler/widget/EventColorPicker.js}\n *\n * ```javascript\n * new EventColorPicker({\n * appendTo : 'container',\n * width : '10em',\n * onColorSelected() {\n * console.log(...arguments);\n * }\n * });\n * ```\n *\n * @classtype colorpicker\n * @extends Core/widget/ColorPicker\n */\nexport default class EventColorPicker extends ColorPicker {\n static $name = 'EventColorPicker';\n static type = 'eventcolorpicker';\n static configurable = {\n colorClasses : SchedulerBase.eventColors,\n colorClassPrefix : 'b-sch-',\n /**\n * @hideconfigs colors\n */\n colors : null,\n /**\n * Provide a {@link Scheduler.model.EventModel} instance to update it's\n * {@link Scheduler.model.mixin.EventModelMixin#field-eventColor} field\n * @config {Scheduler.model.EventModel}\n */\n record : null\n };\n colorSelected({ color }) {\n if (this.record) {\n this.record.eventColor = color;\n }\n }\n}\nEventColorPicker.initClass();\nEventColorPicker._$name = 'EventColorPicker';", "import ColorColumn from '../../Grid/column/ColorColumn.js';\nimport '../widget/EventColorPicker.js';\nimport ColumnStore from '../../Grid/data/ColumnStore.js';\n/**\n * @module Scheduler/column/EventColorColumn\n */\n/**\n * A column that displays Event's `eventColor` values (built-in color classes or CSS colors) as a colored element\n * similar to the {@link Scheduler.widget.EventColorField}. When the user clicks the element, a\n * {@link Scheduler.widget.EventColorPicker} lets the user select from a\n * {@link Scheduler.view.mixin.TimelineEventRendering#config-eventColor range of colors}.\n *\n * ```javascript\n * new Scheduler({\n * columns : [\n * {\n * type : 'eventcolor',\n * text : 'EventColor'\n * }\n * ]\n * });\n * ```\n *\n * {@inlineexample Scheduler/column/EventColorColumn.js}\n *\n * @extends Grid/column/ColorColumn\n * @classtype eventcolor\n * @column\n */\nexport default class EventColorColumn extends ColorColumn {\n static $name = 'EventColorColumn';\n static type = 'eventcolor';\n static defaults = {\n colorEditorType : 'eventcolorpicker',\n field : 'eventColor'\n };\n}\nColumnStore.registerColumnType(EventColorColumn);\nEventColorColumn._$name = 'EventColorColumn';", "import Column from '../../Grid/column/Column.js';\nimport ColumnStore from '../../Grid/data/ColumnStore.js';\n/**\n * @module Scheduler/column/ResourceCollapseColumn\n */\n/**\n * A column toggling the resource {@link Scheduler.model.ResourceModel#field-eventLayout} between `none` and `stack`.\n *\n * {@inlineexample Scheduler/column/ResourceCollapseColumn.js}\n *\n * @extends Grid/column/Column\n * @classtype resourceCollapse\n * @column\n */\nexport default class ResourceCollapseColumn extends Column {\n static get $name() {\n return 'ResourceCollapseColumn';\n }\n static get type() {\n return 'resourceCollapse';\n }\n static get defaults() {\n return {\n /** @hideconfigs renderer */\n width : '3em',\n align : 'center',\n sortable : false,\n groupable : false,\n editor : false,\n minWidth : 0,\n cellCls : 'b-resourcecollapse-cell',\n renderer : ({ record }) => ({\n tag : 'i',\n class : {\n 'b-icon' : 1,\n 'b-icon-expand-resource' : 1,\n 'b-flip' : record.eventLayout !== 'none'\n }\n })\n };\n }\n onCellClick({ record, event }) {\n if (!record.isSpecialRow) {\n // Prevent native scrolling on space key press\n event.preventDefault();\n record.eventLayout = record.eventLayout !== 'none' ? 'none' : 'stack';\n }\n }\n}\nColumnStore.registerColumnType(ResourceCollapseColumn);\nResourceCollapseColumn._$name = 'ResourceCollapseColumn';", "import Column from '../../Grid/column/Column.js';\nimport ColumnStore from '../../Grid/data/ColumnStore.js';\nimport StringHelper from '../../Core/helper/StringHelper.js';\nimport VersionHelper from '../../Core/helper/VersionHelper.js';\nimport AvatarRendering from '../../Core/widget/util/AvatarRendering.js';\n/**\n * @module Scheduler/column/ResourceInfoColumn\n */\n/**\n * Displays basic resource information. Defaults to showing an image + name + event count (all configurable).\n *\n * If a resource has no image, you can either provide an icon using `iconCls` in the data (you then need to specify\n * `image === false` in your data) or the resource initials will be shown.\n *\n * Be sure to specify {@link Scheduler.view.mixin.SchedulerEventRendering#config-resourceImagePath} to instruct the\n * column where to look for the images.\n *\n * If an image fails to load or if a resource lacks an image, the resource name initials will be rendered. If the\n * resource has an {@link Scheduler/model/mixin/ResourceModelMixin#field-eventColor} specified, it will be used as the\n * background color of the initials.\n *\n * {@inlineexample Scheduler/column/ResourceInfoColumn.js}\n *\n * @extends Grid/column/Column\n * @classtype resourceInfo\n * @column\n */\nexport default class ResourceInfoColumn extends Column {\n static get $name() {\n return 'ResourceInfoColumn';\n }\n static get type() {\n return 'resourceInfo';\n }\n static get fields() {\n return ['showEventCount', 'showRole', 'showMeta', 'showImage', 'validNames', 'autoScaleThreshold', 'useNameAsImageName'];\n }\n static get defaults() {\n return {\n /** @hideconfigs renderer */\n /**\n * Show image. Looks for image name in fields on the resource in the following order: 'imageUrl', 'image',\n * 'name'. Set `showImage` to a field name to use a custom field. Set `Scheduler.resourceImagePath` to\n * specify where to load images from. If no extension found, defaults to\n * {@link Scheduler.view.mixin.SchedulerEventRendering#config-resourceImageExtension}.\n * @config {Boolean}\n * @default\n */\n showImage : true,\n /**\n * Show number of events assigned to the resource below the name.\n * @config {Boolean}\n * @default\n */\n showEventCount : true,\n /**\n * A template string to render any extra information about the resource below the name\n * @config {Function}\n * @param {Scheduler.model.ResourceModel} resourceRecord The record representing the current row\n * @returns {String|null}\n */\n showMeta : null,\n /**\n * Show resource role below the name. Specify `true` to display data from the `role` field, or specify a field\n * name to read this value from.\n * @config {Boolean|String}\n * @default\n */\n showRole : false,\n /**\n * Valid image names. Set to `null` to allow all names.\n * @deprecated This will be removed in 6.0\n * @config {String[]}\n */\n validNames : null,\n /**\n * Specify 0 to prevent the column from adapting its content according to the used row height, or specify a\n * threshold (row height) at which scaling should start.\n * @config {Number}\n * @default\n */\n autoScaleThreshold : 40,\n /**\n * Use the resource name as the image name when no `image` is specified on the resource.\n * @config {Boolean}\n * @default\n */\n useNameAsImageName : true,\n field : 'name',\n htmlEncode : false,\n width : 140,\n cellCls : 'b-resourceinfo-cell',\n editor : VersionHelper.isTestEnv ? false : 'text'\n };\n }\n construct(...args) {\n super.construct(...args);\n this.avatarRendering = new AvatarRendering({\n element : this.grid.element\n });\n }\n doDestroy() {\n super.doDestroy();\n this.avatarRendering.destroy();\n }\n getImageURL(imageName) {\n const\n resourceImagePath = this.grid.resourceImagePath || '',\n parts = resourceImagePath.split('//'),\n urlPart = parts.length > 1 ? parts[1] : resourceImagePath,\n joined = StringHelper.joinPaths([urlPart || '', imageName || '']);\n return parts.length > 1 ? parts[0] + '//' + joined : joined;\n }\n template(resourceRecord, value) {\n const me = this,\n {\n showImage,\n showRole,\n showMeta,\n showEventCount,\n grid\n } = me,\n {\n timeAxis,\n resourceImageExtension = '',\n defaultResourceImageName\n } = grid,\n roleField = typeof showRole === 'string' ? showRole : 'role',\n count = showEventCount && resourceRecord.eventStore.getEvents({\n includeOccurrences : grid.enableRecurringEvents,\n resourceRecord,\n startDate : timeAxis.startDate,\n endDate : timeAxis.endDate\n }).length;\n let imageUrl;\n if (showImage && resourceRecord.image !== false) {\n if (resourceRecord.imageUrl) {\n imageUrl = resourceRecord.imageUrl;\n }\n else {\n // record.image is supposed to be a file name, located at resourceImagePath\n const\n imageName = typeof showImage === 'string'\n ? showImage\n : (resourceRecord.image || value && me.useNameAsImageName && (value.toLowerCase() + resourceImageExtension) || defaultResourceImageName) || '';\n imageUrl = imageName && me.getImageURL(imageName);\n // Image name should have an extension\n if (imageUrl && !imageName.includes('.')) {\n // If validNames is specified, check that imageName is valid\n if (!me.validNames || me.validNames.includes(imageName)) {\n imageUrl += resourceImageExtension;\n }\n }\n }\n }\n return {\n class : 'b-resource-info',\n children : [\n showImage && me.avatarRendering.getResourceAvatar({\n resourceRecord,\n initials : resourceRecord.initials,\n color : resourceRecord.eventColor,\n iconCls : resourceRecord.iconCls,\n imageUrl,\n defaultImageUrl : defaultResourceImageName && this.getImageURL(defaultResourceImageName)\n }),\n showRole || showEventCount || showMeta ? {\n tag : 'dl',\n children : [\n {\n tag : 'dt',\n text : value\n },\n showRole ? {\n tag : 'dd',\n class : 'b-resource-role',\n text : resourceRecord.getValue(roleField)\n } : null,\n showEventCount ? {\n tag : 'dd',\n class : 'b-resource-events',\n html : me.L('L{eventCountText}', count)\n } : null,\n showMeta ? {\n tag : 'dd',\n class : 'b-resource-meta',\n html : me.showMeta(resourceRecord)\n } : null\n ]\n } : value // This becomes a text node, no HTML encoding needed\n ]\n };\n }\n defaultRenderer({ grid, record, cellElement, value, isExport }) {\n let result;\n if (record.isSpecialRow) {\n result = '';\n }\n else if (isExport) {\n result = value;\n }\n else {\n if (this.autoScaleThreshold && grid.rowHeight < this.autoScaleThreshold) {\n cellElement.style.fontSize = (grid.rowHeight / 40) + 'em';\n }\n else {\n cellElement.style.fontSize = '';\n }\n result = this.template(record, value);\n }\n return result;\n }\n}\nColumnStore.registerColumnType(ResourceInfoColumn);\nResourceInfoColumn._$name = 'ResourceInfoColumn';", "import Column from '../../Grid/column/Column.js';\nimport ColumnStore from '../../Grid/data/ColumnStore.js';\nimport Scale from '../../Core/widget/graph/Scale.js';\nimport ObjectHelper from '../../Core/helper/ObjectHelper.js';\n/**\n * @module Scheduler/column/ScaleColumn\n */\n/**\n * An object representing a point on the scale displayed by {@link Scheduler.column.ScaleColumn}.\n *\n * @typedef {Object} ScalePoint\n * @property {Number} value Point value\n * @property {String} unit Point value unit\n * @property {String} text Point text label\n */\n/**\n * A specialized column showing a graduated scale from a defined array of values\n * and labels. This column is used in the {@link Scheduler.view.TimelineHistogram} and is not editable. Normally\n * you should not need to interact with this class directly.\n *\n * @extends Grid/column/Column\n * @classtype scale\n * @column\n */\nexport default class ScaleColumn extends Column {\n //region Config\n static $name = 'ScaleColumn';\n static type = 'scale';\n static isScaleColumn = true;\n static get fields() {\n return [\n 'scalePoints'\n ];\n }\n static get defaults() {\n return {\n text : '\\xa0',\n width : 40,\n minWidth : 40,\n field : 'scalePoints',\n cellCls : 'b-scale-cell',\n editor : false,\n sortable : false,\n groupable : false,\n filterable : false,\n alwaysClearCell : false,\n scalePoints : null\n };\n }\n //endregion\n //region Constructor/Destructor\n onDestroy() {\n this.scaleWidget.destroy();\n }\n //endregion\n //region Internal\n set width(width) {\n super.width = width;\n this.scaleWidget.width = width;\n }\n get width() {\n return super.width;\n }\n applyValue(useProp, key, value) {\n // pass value to scaleWidget\n if (key === 'scalePoints') {\n this.scaleWidget[key] = value;\n }\n return super.applyValue(...arguments);\n }\n buildScaleWidget() {\n const me = this;\n const scaleWidget = new Scale({\n owner : me.grid,\n appendTo : me.grid.floatRoot,\n cls : 'b-hide-offscreen',\n align : 'right',\n scalePoints : me.scalePoints,\n monitorResize : false\n });\n Object.defineProperties(scaleWidget, {\n width : {\n get() {\n return me.width;\n },\n set(width) {\n this.element.style.width = `${width}px`;\n this._width = me.width;\n }\n },\n height : {\n get() {\n return this._height;\n },\n set(height) {\n this.element.style.height = `${height}px`;\n this._height = height;\n }\n }\n });\n scaleWidget.width = me.width;\n return scaleWidget;\n }\n get scaleWidget() {\n const me = this;\n if (!me._scaleWidget) {\n me._scaleWidget = me.buildScaleWidget();\n }\n return me._scaleWidget;\n }\n //endregion\n //region Render\n renderer({ cellElement, value, scaleWidgetConfig, scaleWidget = this.scaleWidget }) {\n ObjectHelper.assign(scaleWidget, {\n scalePoints : value || this.scalePoints,\n height : this.grid.rowHeight\n }, scaleWidgetConfig);\n scaleWidget.refresh();\n // Clone the scale widget element since every row is supposed to have\n // the same scale settings\n const scaleCloneElement = scaleWidget.element.cloneNode(true);\n scaleCloneElement.removeAttribute('id');\n scaleCloneElement.classList.remove('b-hide-offscreen');\n cellElement.innerHTML = '';\n cellElement.appendChild(scaleCloneElement);\n }\n //endregion\n}\nColumnStore.registerColumnType(ScaleColumn);\nScaleColumn._$name = 'ScaleColumn';", "import Localizable from '../../../../Core/localization/Localizable.js';\nimport DayRuleEncoder from './RecurrenceDayRuleEncoder.js';\nimport DateHelper from '../../../../Core/helper/DateHelper.js';\n/**\n * @module Scheduler/data/util/recurrence/RecurrenceLegend\n */\n/**\n * A static class allowing to get a human readable description of the provided recurrence.\n *\n * ```javascript\n * const event = new EventModel({\n * startDate : new Date(2018, 6, 3),\n * endDate : new Date(2018, 6, 4)\n * });\n * const recurrence = new RecurrenceModel({\n * frequency : 'WEEKLY',\n * days : ['MO', 'TU', 'WE']\n * });\n * event.recurrence = recurrence;\n * // \"Weekly on Mon, Tue and Wed\"\n * RecurrenceLegend.getLegend(recurrence);\n * ```\n *\n * @mixes Core/localization/Localizable\n */\nexport default class RecurrenceLegend extends Localizable() {\n static get $name() {\n return 'RecurrenceLegend';\n }\n static get allDaysValueAsArray() {\n return ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'];\n }\n static get allDaysValue() {\n return this.allDaysValueAsArray.join(',');\n }\n static get workingDaysValue() {\n return this.allDaysValueAsArray.filter((day, index) => !DateHelper.nonWorkingDays[index]).join(',');\n }\n static get nonWorkingDaysValue() {\n return this.allDaysValueAsArray.filter((day, index) => DateHelper.nonWorkingDays[index]).join(',');\n }\n /**\n * Returns the provided recurrence description. The recurrence might be assigned to a timespan model,\n * in this case the timespan start date should be provided in the second argument.\n * @param {Scheduler.model.RecurrenceModel} recurrenceRecurrence model.\n * @param {Date} [timeSpanStartDate] The recurring timespan start date. Can be omitted if the recurrence is assigned\n * to a timespan model (and the timespan has {@link Scheduler.model.TimeSpan#field-startDate} filled). Then start\n * date will be retrieved from the model.\n * @returns {String} The recurrence description.\n */\n static getLegend(recurrence, timeSpanStartDate) {\n const\n me = this,\n { timeSpan, interval, days, monthDays, months, positions } = recurrence,\n startDate = timeSpanStartDate || timeSpan.startDate,\n tplData = { interval };\n let fn;\n switch (recurrence.frequency) {\n case 'DAILY':\n return interval === 1 ? me.L('L{Daily}') : me.L('L{Every {0} days}', tplData);\n case 'WEEKLY':\n if (days && days.length) {\n tplData.days = me.getDaysLegend(days);\n }\n else if (startDate) {\n tplData.days = DateHelper.getDayName(startDate.getDay());\n }\n return me.L(interval === 1 ? 'L{Weekly on {1}}' : 'L{Every {0} weeks on {1}}', tplData);\n case 'MONTHLY':\n if (days && days.length && positions && positions.length) {\n tplData.days = me.getDaysLegend(days, positions);\n }\n else if (monthDays && monthDays.length) {\n // sort dates to output in a proper order\n monthDays.sort((a, b) => a - b);\n tplData.days = me.arrayToText(monthDays);\n }\n else if (startDate) {\n tplData.days = startDate.getDate();\n }\n return me.L(interval === 1 ? 'L{Monthly on {1}}' : 'L{Every {0} months on {1}}', tplData);\n case 'YEARLY':\n if (days && days.length && positions && positions.length) {\n tplData.days = me.getDaysLegend(days, positions);\n }\n else {\n tplData.days = startDate.getDate();\n }\n if (months && months.length) {\n // sort months to output in a proper order\n months.sort((a, b) => a - b);\n if (months.length > 2) {\n fn = month => DateHelper.getMonthShortName(month - 1);\n }\n else {\n fn = month => DateHelper.getMonthName(month - 1);\n }\n tplData.months = me.arrayToText(months, fn);\n }\n else {\n tplData.months = DateHelper.getMonthName(startDate.getMonth());\n }\n return me.L(interval === 1 ? 'L{Yearly on {1} of {2}}' : 'L{Every {0} years on {1} of {2}}', tplData);\n }\n }\n static getDaysLegend(days, positions) {\n const\n me = this,\n tplData = { position : '' };\n let fn;\n if (positions && positions.length) {\n tplData.position = me.arrayToText(positions, position => me.L(`L{position${position}}`));\n }\n if (days.length) {\n days.sort((a, b) => DayRuleEncoder.decodeDay(a)[0] - DayRuleEncoder.decodeDay(b)[0]);\n switch (days.join(',')) {\n case me.allDaysValue :\n tplData.days = me.L('L{day}');\n break;\n case me.workingDaysValue :\n tplData.days = me.L('L{weekday}');\n break;\n case me.nonWorkingDaysValue :\n tplData.days = me.L('L{weekend day}');\n break;\n default :\n if (days.length > 2) {\n fn = day => DateHelper.getDayShortName(DayRuleEncoder.decodeDay(day)[0]);\n }\n else {\n fn = day => DateHelper.getDayName(DayRuleEncoder.decodeDay(day)[0]);\n }\n tplData.days = me.arrayToText(days, fn);\n }\n }\n return me.L('L{daysFormat}', tplData);\n }\n // Converts array of items to a human readable list.\n // For example: [1,2,3,4]\n // to: \"1, 2, 3 and 4\"\n static arrayToText(array, fn) {\n if (fn) {\n array = array.map(fn);\n }\n return array.join(', ').replace(/,(?=[^,]*$)/, this.L('L{ and }'));\n }\n}\nRecurrenceLegend._$name = 'RecurrenceLegend';", "import Base from '../../Core/Base.js';\nimport DateHelper from '../../Core/helper/DateHelper.js';\nimport StringHelper from '../../Core/helper/StringHelper.js';\nimport BrowserHelper from '../../Core/helper/BrowserHelper.js';\n/**\n * @module Scheduler/tooltip/ClockTemplate\n */\n/**\n * A template showing a clock, it consumes an object containing a date and a text\n * @private\n */\nexport default class ClockTemplate extends Base {\n static get defaultConfig() {\n return {\n minuteHeight : 8,\n minuteTop : 2,\n hourHeight : 8,\n hourTop : 2,\n handLeft : 10,\n div : document.createElement('div'),\n scheduler : null, // may be passed to the constructor if needed\n // `b-sch-clock-day` for calendar icon\n // `b-sch-clock-hour` for clock icon\n template(data) {\n return `\n
`;\n }\n };\n }\n generateContent(data) {\n return this.div.innerHTML = this.template(data);\n }\n updateDateIndicator(el, date) {\n const\n hourIndicatorEl = el?.querySelector('.b-sch-hour-indicator'),\n minuteIndicatorEl = el?.querySelector('.b-sch-minute-indicator');\n if (date && hourIndicatorEl && minuteIndicatorEl && BrowserHelper.isBrowserEnv) {\n if (this.mode === 'hour') {\n hourIndicatorEl.style.transform = `rotate(${(date.getHours() % 12) * 30}deg)`;\n minuteIndicatorEl.style.transform = `rotate(${date.getMinutes() * 6}deg)`;\n }\n else {\n hourIndicatorEl.style.transform = 'none';\n minuteIndicatorEl.style.transform = 'none';\n }\n }\n }\n set mode(mode) {\n this._mode = mode;\n }\n // `day` mode for calendar icon\n // `hour` mode for clock icon\n get mode() {\n if (this._mode) {\n return this._mode;\n }\n const\n unitLessThanDay = DateHelper.compareUnits(this.scheduler.timeAxisViewModel.timeResolution.unit, 'day') < 0,\n formatContainsHourInfo = DateHelper.formatContainsHourInfo(this.scheduler.displayDateFormat);\n return unitLessThanDay && formatContainsHourInfo ? 'hour' : 'day';\n }\n set template(template) {\n this._template = template;\n }\n /**\n * Get the clock template, which accepts an object of format { date, text }\n * @property {Function}\n * @param {*} Format object\n * @returns {String}\n */\n get template() {\n return this._template;\n }\n}\nClockTemplate._$name = 'ClockTemplate';", "import InstancePlugin from '../../../Core/mixin/InstancePlugin.js';\nimport DateHelper from '../../../Core/helper/DateHelper.js';\nimport DomHelper from '../../../Core/helper/DomHelper.js';\nimport DragHelper from '../../../Core/helper/DragHelper.js';\nimport Rectangle from '../../../Core/helper/util/Rectangle.js';\nimport ClockTemplate from '../../tooltip/ClockTemplate.js';\nimport Tooltip from '../../../Core/widget/Tooltip.js';\nimport Objects from '../../../Core/helper/util/Objects.js';\nimport Widget from '../../../Core/widget/Widget.js';\n/**\n * @module Scheduler/feature/base/DragBase\n */\n/**\n * Base class for EventDrag (Scheduler) and TaskDrag (Gantt) features. Contains shared code. Not to be used directly.\n *\n * @extends Core/mixin/InstancePlugin\n * @abstract\n */\nexport default class DragBase extends InstancePlugin {\n //region Config\n static get defaultConfig() {\n return {\n // documented on Schedulers EventDrag feature and Gantt's TaskDrag\n tooltipTemplate : data => `\n \n
\n ${StringHelper.encodeHtml(data.text || '')}\n ${data.date ? DateHelper.format(data.date, 'MMM') : ''}
\n ${data.date ? DateHelper.format(data.date, 'D') : ''}
\n \n \n ${data.startClockHtml}\n ${data.endClockHtml}\n \n
\n `,\n /**\n * Specifies whether or not to show tooltip while dragging event\n * @prp {Boolean}\n * @default\n */\n showTooltip : true,\n /**\n * When enabled, the event being dragged always \"snaps\" to the exact start date that it will have after drop.\n * @config {Boolean}\n * @default\n */\n showExactDropPosition : false,\n /*\n * The store from which the dragged items are mapped to the UI.\n * In Scheduler's implementation of this base class, this will be\n * an EventStore, in Gantt's implementations, this will be a TaskStore.\n * Because both derive from this base, we must refer to it as this.store.\n * @private\n */\n store : null,\n /**\n * An object used to configure the internal {@link Core.helper.DragHelper} class\n * @config {DragHelperConfig}\n */\n dragHelperConfig : null,\n tooltipCls : 'b-eventdrag-tooltip',\n /**\n * Whether to allow the SNET constraint generated by an event drag to be placed in non-\n * working time. When `true` and the event is dragged so that its `startDate` is in non-working\n * time, the SNET constraint date will be kept on the non-working date where the task is dropped.\n * When `false`, snaps the SNET date to working time in the same way as the `startDate`. The\n * `startDate` is not affected by this config.\n *\n * Applies only to Scheduler Pro and Gantt.\n *\n * @config {Boolean}\n * @default false\n */\n allowNonWorkingTimeSNET : null\n };\n }\n static get configurable() {\n return {\n /**\n * Set to `false` to allow dragging tasks outside the client Scheduler.\n * Useful when you want to drag tasks between multiple Scheduler instances\n * @config {Boolean}\n * @default\n */\n constrainDragToTimeline : true,\n // documented on Schedulers EventDrag feature, not used for Gantt\n constrainDragToResource : true,\n constrainDragToTimeSlot : false,\n /**\n * Yields the {@link Core.widget.Tooltip} which tracks the event during a drag operation.\n * @member {Core.widget.Tooltip} tip\n */\n /**\n * A config object to allow customization of the {@link Core.widget.Tooltip} which tracks\n * the event during a drag operation.\n * @config {TooltipConfig}\n */\n tip : {\n $config : ['lazy', 'nullify'],\n value : {\n align : {\n align : 'b-t',\n allowTargetOut : true\n },\n autoShow : true,\n updateContentOnMouseMove : true\n }\n },\n /**\n * The `eventDrag`and `taskDrag` events are normally only triggered when the drag operation will lead to a\n * change in date or assignment. By setting this config to `false`, that logic is bypassed to trigger events\n * for each native mouse move event.\n * @prp {Boolean}\n */\n throttleDragEvent : true\n };\n }\n // Plugin configuration. This plugin chains some of the functions in Grid.\n static get pluginConfig() {\n return {\n chain : ['onInternalPaint']\n };\n }\n //endregion\n //region Init\n internalSnapToPosition(snapTo) {\n const { dragData } = this;\n this.snapToPosition?.({\n assignmentRecord : dragData.assignmentRecord,\n eventRecord : dragData.eventRecord,\n resourceRecord : dragData.newResource || dragData.resourceRecord,\n startDate : dragData.startDate,\n endDate : dragData.endDate,\n snapTo\n });\n }\n buildDragHelperConfig() {\n const\n me = this,\n {\n client,\n constrainDragToTimeline,\n constrainDragToResource,\n constrainDragToTimeSlot,\n dragHelperConfig = {}\n } = me,\n { timeAxisViewModel, isHorizontal } = client,\n lockY = isHorizontal ? constrainDragToResource : constrainDragToTimeSlot,\n lockX = isHorizontal ? constrainDragToTimeSlot : constrainDragToResource;\n // If implementer wants to allow users dragging outside the timeline element, setup the internal dropTargetSelector\n if (me.externalDropTargetSelector) {\n dragHelperConfig.dropTargetSelector = `.b-timeaxissubgrid,${me.externalDropTargetSelector}`;\n }\n return Objects.merge({\n name : me.constructor.name, // useful when debugging with multiple draggers\n positioning : 'absolute',\n lockX,\n lockY,\n minX : true, // Allows dropping with start before time axis\n maxX : true, // Allows dropping with end after time axis\n constrain : false,\n cloneTarget : !constrainDragToTimeline,\n // If we clone event dragged bars, we assume ownership upon drop so we can reuse the element and have animations\n removeProxyAfterDrop : false,\n dragWithin : constrainDragToTimeline ? null : client.floatRoot,\n hideOriginalElement : true,\n dropTargetSelector : '.b-timelinebase',\n allowDropOutside : !constrainDragToTimeline,\n // A CSS class added to drop target while dragging events\n dropTargetCls : me.externalDropTargetSelector ? 'b-drop-target' : '',\n outerElement : client.timeAxisSubGridElement,\n targetSelector : client.eventSelector,\n scrollManager : constrainDragToTimeline ? client.scrollManager : null,\n createProxy : el => me.createProxy(el),\n snapCoordinates : ({ element, newX, newY }) => {\n const\n { dragData } = me,\n timeline = this.currentOverClient;\n // Snapping not supported when dragging outside a scheduler\n if (me.constrainDragToTimeline && !me.constrainDragToTimeSlot && (me.showExactDropPosition || timeAxisViewModel.snap)) {\n const\n draggedEventRecord = dragData.draggedEntities[0].event || dragData.draggedEntities[0],\n coordinate = me.getCoordinate(draggedEventRecord, element, [newX, newY]),\n //fillTicks and span features have different behaviours in rounding the new starDate while dragging, then snap feature needs to be forced to use the same date as fillTicks (if is active).\n snappedDate = timeline.fillTicks && client.timeAxis.isContinuous ? dragData.startDate : timeAxisViewModel.getDateFromPosition(coordinate, 'round'),\n { calendar } = draggedEventRecord;\n if (!calendar || snappedDate && calendar.isWorkingTime(snappedDate, DateHelper.add(snappedDate, draggedEventRecord.fullDuration))) {\n const snappedPosition = snappedDate && timeAxisViewModel.getPositionFromDate(snappedDate);\n if (snappedDate && snappedDate >= client.startDate && snappedPosition != null) {\n if (isHorizontal) {\n newX = snappedPosition;\n }\n else {\n newY = snappedPosition;\n }\n }\n }\n }\n const snapTo = { x : newX, y : newY };\n me.internalSnapToPosition(snapTo);\n return snapTo;\n },\n internalListeners : {\n beforedragstart : 'onBeforeDragStart',\n dragstart : 'onDragStart',\n afterdragstart : 'onAfterDragStart',\n drag : 'onDrag',\n drop : 'onDrop',\n abort : 'onDragAbort',\n abortFinalized : 'onDragAbortFinalized',\n reset : 'onDragReset',\n thisObj : me\n }\n }, dragHelperConfig, {\n isElementDraggable : (el, event) => {\n return (!dragHelperConfig || !dragHelperConfig.isElementDraggable || dragHelperConfig.isElementDraggable(el, event)) &&\n me.isElementDraggable(el, event);\n }\n });\n }\n /**\n * Called when scheduler is rendered. Sets up drag and drop and hover tooltip.\n * @private\n */\n onInternalPaint({ firstPaint }) {\n const\n me = this,\n { client } = me;\n me.drag?.destroy();\n me.drag = DragHelper.new(me.buildDragHelperConfig());\n if (firstPaint) {\n client.rowManager.ion({\n changeTotalHeight : () => me.updateYConstraint(me.dragData?.[`${client.scheduledEventName}Record`]),\n thisObj : me\n });\n }\n if (me.showTooltip) {\n me.clockTemplate = new ClockTemplate({\n scheduler : client\n });\n }\n }\n doDestroy() {\n this.drag?.destroy();\n this.clockTemplate?.destroy();\n this.tip?.destroy();\n super.doDestroy();\n }\n get tipId() {\n return `${this.client.id}-event-drag-tip`;\n }\n changeTip(tip, oldTip) {\n const me = this;\n if (tip) {\n const result = Tooltip.reconfigure(oldTip, Tooltip.mergeConfigs({\n forElement : me.element,\n id : me.tipId,\n getHtml : me.getTipHtml.bind(me),\n cls : me.tooltipCls,\n owner : me.client\n }, tip), {\n owner : me.client,\n defaults : {\n type : 'tooltip'\n }\n });\n result.ion({ innerHtmlUpdate : 'updateDateIndicator', thisObj : me });\n return result;\n }\n else {\n oldTip?.destroy();\n }\n }\n //endregion\n //region Drag events\n createProxy(element) {\n const proxy = element.cloneNode(true);\n delete proxy.id;\n proxy.classList.add(`b-sch-${this.client.mode}`);\n return proxy;\n }\n onBeforeDragStart({ context, event }) {\n const\n me = this,\n { client } = me,\n dragData = me.getMinimalDragData(context, event),\n eventRecord = dragData?.[`${client.scheduledEventName}Record`],\n resourceRecord = dragData.resourceRecord;\n if (client.readOnly || me.disabled || !eventRecord || eventRecord.isDraggable === false || eventRecord.readOnly || resourceRecord?.readOnly) {\n return false;\n }\n // Cache the date corresponding to the drag start point so that on drag, we can always\n // perform the same calculation to then find the time delta without having to calculate\n // the new start and end times from the position that the element is.\n context.pointerStartDate = client.getDateFromXY([context.startClientX, context.startPageY], null, false);\n const result = me.triggerBeforeEventDrag(\n `before${client.capitalizedEventName}Drag`,\n {\n ...dragData,\n event,\n // to be deprecated\n context : {\n ...context,\n ...dragData\n }\n }\n ) !== false;\n if (result) {\n me.updateYConstraint(eventRecord, resourceRecord);\n // Hook for features that need to react to drag starting, used by NestedEvents\n client[`before${client.capitalizedEventName}DragStart`]?.(context, dragData);\n }\n return result;\n }\n onAfterDragStart({ context, event }) {}\n /**\n * Returns true if a drag operation is active\n * @property {Boolean}\n * @readonly\n */\n get isDragging() {\n return this.drag?.isDragging;\n }\n // Checked by dependencies to determine if live redrawing is needed\n get isActivelyDragging() {\n return this.isDragging && !this.finalizing;\n }\n /**\n * Triggered when dragging of an event starts. Initializes drag data associated with the event being dragged.\n * @private\n */\n onDragStart({ context, event }) {\n const\n me = this,\n // When testing with Selenium, it simulates drag and drop with a single mousemove event, we might be over\n // another client already\n client = me.findClientFromTarget(event, context) ?? me.client;\n me.currentOverClient = client;\n me.drag.unifiedProxy = me.unifiedDrag;\n me.onMouseOverNewTimeline(client, true);\n const dragData = me.dragData = me.getDragData(context);\n // Do not let DomSync reuse the element\n me.suspendElementRedrawing(context.element);\n if (me.showTooltip && me.tip) {\n const tipTarget = dragData.context.dragProxy ? dragData.context.dragProxy.firstChild : context.element;\n me.tip.showBy(tipTarget);\n }\n me.triggerDragStart(dragData);\n // Hook for features that need to take action after drag starts\n client[`after${client.capitalizedEventName}DragStart`]?.(context, dragData);\n const\n {\n eventMenu,\n taskMenu\n } = client.features,\n menuFeature = eventMenu || taskMenu;\n // If this is a touch action, hide the context menu which may have shown\n menuFeature?.hideContextMenu?.(false);\n }\n updateDateIndicator() {\n const\n { startDate, endDate } = this.dragData,\n { tip, clockTemplate } = this,\n endDateElement = tip.element.querySelector('.b-sch-tooltip-enddate');\n clockTemplate.updateDateIndicator(tip.element, startDate);\n endDateElement && clockTemplate.updateDateIndicator(endDateElement, endDate);\n }\n findClientFromTarget(event, context) {\n let { target } = event;\n // Can't detect target under a touch event\n if (/^touch/.test(event.type)) {\n const center = Rectangle.from(context.element, null, true).center;\n target = DomHelper.elementFromPoint(center.x, center.y);\n }\n const client = Widget.fromElement(target, 'timelinebase');\n // Do not allow drops on histogram widgets\n return client?.isResourceHistogram ? null : client;\n }\n /**\n * Triggered while dragging an event. Updates drag data, validation etc.\n * @private\n */\n onDrag({ context, event }) {\n const\n me = this,\n dd = me.dragData,\n start = dd.startDate;\n let client;\n if (me.constrainDragToTimeline) {\n client = me.client;\n }\n else {\n client = me.findClientFromTarget(event, dd.context);\n }\n me.updateDragContext(context, event);\n if (!client) {\n return;\n }\n if (client !== me.currentOverClient) {\n me.onMouseOverNewTimeline(client);\n }\n //this.checkShiftChange();\n // Let product specific implementations trigger drag event (eventDrag, taskDrag)\n if (dd.dirty || !me.throttleDragEvent) {\n const valid = dd.valid;\n me.triggerEventDrag(dd, start);\n if (valid !== dd.valid) {\n dd.context.valid = dd.externalDragValidity = dd.valid;\n }\n }\n if (me.showTooltip && me.tip) {\n // If we've an error message to show, force the tip to be visible\n // even if the target is not in view.\n me.tip.lastAlignSpec.allowTargetOut = !dd.valid;\n me.tip.realign();\n }\n }\n onMouseOverNewTimeline(newTimeline, initial) {\n const\n me = this,\n { drag : { lockX, lockY } } = me,\n scrollables = [];\n me.currentOverClient.element.classList.remove('b-dragging-' + me.currentOverClient.scheduledEventName);\n newTimeline.element.classList.add('b-dragging-' + newTimeline.scheduledEventName);\n if (!initial) {\n me.currentOverClient.scrollManager.stopMonitoring();\n }\n if (!lockX) {\n scrollables.push({\n element : newTimeline.timeAxisSubGrid.scrollable.element,\n direction : 'horizontal'\n });\n }\n if (!lockY) {\n scrollables.push({\n element : newTimeline.scrollable.element,\n direction : 'vertical'\n });\n }\n newTimeline.scrollManager.startMonitoring({\n scrollables,\n callback : me.drag.onScrollManagerScrollCallback\n });\n me.currentOverClient = newTimeline;\n }\n triggerBeforeEventDropFinalize(eventType, eventData, client) {\n client.trigger(eventType, eventData);\n }\n /**\n * Triggered when dropping an event. Finalizes the operation.\n * @private\n */\n onDrop({ context, event }) {\n const\n me = this,\n { currentOverClient, dragData } = me;\n let modified = false;\n // Stop monitoring early, to avoid scrolling during finalization\n currentOverClient?.scrollManager.stopMonitoring();\n me.tip?.hide();\n context.valid = context.valid && me.isValidDrop(dragData);\n // If dropping outside scheduler, we opt in on DragHelper removing the proxy element\n me.drag.removeProxyAfterDrop = Boolean(dragData.externalDropTarget);\n if (context.valid && dragData.startDate && dragData.endDate) {\n let beforeDropTriggered = false;\n dragData.finalize = async(valid) => {\n if (beforeDropTriggered || dragData.async) {\n await me.finalize(valid);\n }\n else {\n // If user finalized operation synchronously in the beforeDropFinalize listener, just use\n // the valid param and carry on\n // but ignore it, if the context is already marked as invalid\n context.valid = context.valid && valid;\n }\n };\n me.triggerBeforeEventDropFinalize(`before${currentOverClient.capitalizedEventName}DropFinalize`, {\n context : dragData,\n domEvent : event\n }, currentOverClient);\n beforeDropTriggered = true;\n // Allow implementer to take control of the flow, by returning false from this listener,\n // to show a confirmation popup etc. This event is documented in EventDrag and TaskDrag\n context.async = dragData.async;\n // Internal validation, making sure all dragged records fit inside the view\n if (!context.async && !dragData.externalDropTarget) {\n modified = (dragData.startDate - dragData.origStart) !== 0 || dragData.newResource !== dragData.resourceRecord;\n }\n }\n if (!context.async) {\n me.finalize(dragData.valid && context.valid && modified);\n }\n }\n onDragAbort({ context }) {\n const me = this;\n // Flag checked by dependencies feature, to live redraw during abort\n me.isAborting = true;\n // Stop monitoring early, to avoid scrolling during finalization\n me.currentOverClient?.scrollManager.stopMonitoring();\n me.client.currentOrientation.onDragAbort({ context, dragData : me.dragData });\n // otherwise the event disappears on next refresh (#62)\n me.resetDraggedElements();\n me.tip?.hide();\n // Trigger eventDragAbort / taskDragAbort depending on product\n me.triggerDragAbort(me.dragData);\n }\n // Fired after any abort animation has completed (the point where we want to trigger redraw of progress lines etc)\n onDragAbortFinalized({ context }) {\n const me = this;\n me.triggerDragAbortFinalized(me.dragData);\n // Hook for features that need to react on drag abort, used by NestedEvents\n me.client[`after${me.client.capitalizedEventName}DragAbortFinalized`]?.(context, me.dragData);\n me.isAborting = false;\n }\n // For the drag across multiple schedulers, tell all involved scroll managers to stop monitoring\n onDragReset({ source : dragHelper }) {\n const\n me = this,\n currentTimeline = me.currentOverClient;\n if (dragHelper.context?.started) {\n me.resetDraggedElements();\n currentTimeline.trigger(`${currentTimeline.scheduledEventName}DragReset`);\n }\n currentTimeline?.element.classList.remove(`b-dragging-${currentTimeline.scheduledEventName}`);\n me.dragData = null;\n }\n resetDraggedElements() {\n const\n { dragData } = this,\n { eventBarEls, draggedEntities } = dragData;\n this.resumeRecordElementRedrawing(dragData.record);\n draggedEntities.forEach((record, i) => {\n this.resumeRecordElementRedrawing(record);\n eventBarEls[i].classList.remove(this.drag.draggingCls);\n eventBarEls[i].retainElement = false;\n });\n // Code expects 1:1 ratio between eventBarEls & dragged assignments, but when dragging an event of a linked\n // resource that is not the case, and we need to clean up some more\n dragData.context.element.retainElement = false;\n }\n /**\n * Triggered internally on invalid drop.\n * @private\n */\n onInternalInvalidDrop(abort) {\n const\n me = this,\n { context } = me.drag;\n me.tip?.hide();\n me.triggerAfterDrop(me.dragData, false);\n context.valid = false;\n if (abort) {\n me.drag.abort();\n }\n }\n //endregion\n //region Finalization & validation\n /**\n * Called on drop to update the record of the event being dropped.\n * @private\n * @param {Boolean} updateRecords Specify true to update the record, false to treat as invalid\n */\n async finalize(updateRecords) {\n const\n me = this,\n { dragData, currentOverClient } = me,\n clientEventTipFeature = currentOverClient.features.taskTooltip || currentOverClient.features.eventTooltip;\n // Drag could've been aborted by window blur event. If it is aborted - we have nothing to finalize.\n if (!dragData || me.finalizing) {\n return;\n }\n const { context, draggedEntities, externalDropTarget } = dragData;\n let result;\n me.finalizing = true;\n draggedEntities.forEach((record, i) => {\n me.resumeRecordElementRedrawing(record);\n dragData.eventBarEls[i].classList.remove(me.drag.draggingCls);\n dragData.eventBarEls[i].retainElement = false;\n });\n // Code expects 1:1 ratio between eventBarEls & dragged assignments, but when dragging an event of a linked\n // resource that is not the case, and we need to clean up some more\n context.element.retainElement = false;\n if ((externalDropTarget && dragData.valid) || updateRecords) {\n // updateRecords may or may not be async.\n // We see if it returns a Promise.\n result = me.updateRecords(dragData);\n // If updateRecords is async, the calling DragHelper must know this and\n // go into a awaitingFinalization state.\n if (!externalDropTarget && Objects.isPromise(result)) {\n context.async = true;\n await result;\n }\n // If the finalize handler decided to change the dragData's validity...\n if (!dragData.valid) {\n me.onInternalInvalidDrop(true);\n }\n else {\n if (context.async) {\n context.finalize();\n }\n if (externalDropTarget) {\n // Force a refresh early so that removed events will not temporary be visible while engine is\n // recalculating (the row below clears the 'b-hidden' CSS class of the original drag element)\n me.client.refreshRows(false);\n }\n me.triggerAfterDrop(dragData, true);\n }\n }\n else {\n me.onInternalInvalidDrop(context.async || dragData.async);\n }\n me.finalizing = false;\n // Prevent event tooltip showing after a drag drop\n if (clientEventTipFeature?.enabled) {\n clientEventTipFeature.disabled = true;\n currentOverClient.setTimeout(() => {\n clientEventTipFeature.disabled = false;\n }, 200);\n }\n return result;\n }\n //endregion\n //region Drag data\n getEventNewStartEndDates(eventRecord, timeDiff) {\n // calculate and round new startDate based on actual timeDiff\n let startDate = this.adjustStartDate(eventRecord.startDate, timeDiff);\n let endDate;\n // Use actual outcome for Pro, ignoring non-working time\n if (eventRecord.graph && !this.allowNonWorkingTimeSNET) {\n try {\n startDate = eventRecord.run('skipNonWorkingTime', startDate);\n endDate = eventRecord.run('calculateProjectedXDateWithDuration', startDate, true, eventRecord.duration);\n }\n catch (e) {\n // the `skipNonWorkingTime` and other calendar-related methods can issue `EmptyCalendarEffect` effect\n // in case the calendar does not contain the sufficient work space to schedule the event from the\n // given drop point\n // the `run` method throws in such case - marking the drop as invalid\n return { valid : false };\n }\n }\n else {\n endDate = DateHelper.add(startDate, eventRecord.fullDuration);\n }\n return { startDate, endDate };\n }\n /**\n * Updates drag data's dates and validity (calls #validatorFn if specified)\n * @private\n */\n updateDragContext(info, event) {\n const\n me = this,\n { drag } = me,\n dd = me.dragData,\n client = me.currentOverClient,\n { isHorizontal } = client,\n [record] = dd.draggedEntities,\n eventRecord = record.isAssignment ? record.event : record,\n lastDragStartDate = dd.startDate,\n constrainToTimeSlot = me.constrainDragToTimeSlot || (isHorizontal ? drag.lockX : drag.lockY);\n dd.browserEvent = event;\n // getProductDragContext may switch valid flag, need to keep it here\n Object.assign(dd, me.getProductDragContext(dd));\n if (constrainToTimeSlot) {\n dd.timeDiff = 0;\n }\n else {\n let timeDiff;\n // Time diff is calculated differently for continuous and non-continuous time axis\n // (except if element starts and ends outside of view)\n if (client.timeAxis.isContinuous || (dd.startsOutsideView && dd.endsOutsideView)) {\n const\n timeAxisPosition = client.isHorizontal ? info.pageX ?? info.startPageX : info.pageY ?? info.startPageY,\n // Use the localized coordinates to ask the TimeAxisViewModel what date the mouse is at.\n // Pass allowOutOfRange as true in case we have dragged out of either side of the timeline viewport.\n pointerDate = client.getDateFromCoordinate(timeAxisPosition, null, false, true);\n timeDiff = dd.timeDiff = pointerDate - info.pointerStartDate;\n if (timeDiff !== null) {\n Object.assign(dd, me.getEventNewStartEndDates(eventRecord, timeDiff));\n if (dd.valid) {\n dd.timeDiff = dd.startDate - dd.origStart;\n }\n }\n }\n else {\n const range = me.resolveStartEndDates(info.element);\n // if dragging is out of timeAxis rect bounds, we will not be able to get dates\n dd.valid = Boolean(range.startDate && range.endDate);\n if (dd.valid) {\n timeDiff = range.startDate - dd.origStart;\n }\n if (timeDiff !== undefined) {\n // Use actual outcome for Pro, ignoring non-working time\n if (eventRecord.graph && !this.allowNonWorkingTimeSNET) {\n dd.startDate = eventRecord.run('skipNonWorkingTime', range.startDate);\n dd.endDate = eventRecord.run('calculateProjectedXDateWithDuration', range.startDate, true, eventRecord.duration);\n }\n else {\n dd.startDate = range.startDate;\n dd.endDatee = range.endDate;\n }\n }\n dd.timeDiff = timeDiff;\n }\n }\n const positionDirty = dd.dirty = dd.dirty || lastDragStartDate - dd.startDate !== 0;\n if (dd.valid) {\n // If it's fully outside, we don't allow them to drop it - the event would disappear from their control.\n if (me.constrainDragToTimeline && (dd.endDate <= client.timeAxis.startDate || dd.startDate >= client.timeAxis.endDate)) {\n dd.valid = false;\n dd.context.message = me.L('L{EventDrag.noDropOutsideTimeline}');\n }\n else if (positionDirty || dd.externalDropTarget) {\n // Used to rely on faulty code above that would not be valid initially. With that changed we ignore\n // checking validity here on drag start, which is detected by not having a pageX\n const result = dd.externalDragValidity = !event || (info.pageX && me.checkDragValidity(dd, event));\n if (!result || typeof result === 'boolean') {\n dd.valid = result !== false;\n dd.context.message = '';\n }\n else {\n dd.valid = result.valid !== false;\n dd.context.message = result.message;\n }\n }\n else {\n // Apply cached value from external drag validation\n dd.valid = dd.externalDragValidity !== false && dd.externalDragValidity?.valid !== false;\n }\n }\n else {\n dd.valid = false;\n }\n dd.context.valid = dd.valid;\n }\n suspendRecordElementRedrawing(record, suspend = true) {\n this.suspendElementRedrawing(this.getRecordElement(record), suspend);\n record.instanceMeta(this.client).retainElement = suspend;\n }\n resumeRecordElementRedrawing(record) {\n this.suspendRecordElementRedrawing(record, false);\n }\n suspendElementRedrawing(element, suspend = true) {\n if (element) {\n element.retainElement = suspend;\n }\n }\n resumeElementRedrawing(element) {\n this.suspendElementRedrawing(element, false);\n }\n /**\n * Initializes drag data (dates, constraints, dragged events etc). Called when drag starts.\n * @private\n * @param info\n * @returns {*}\n */\n getDragData(info) {\n const\n me = this,\n { client, drag } = me,\n productDragData = me.setupProductDragData(info),\n {\n record,\n eventBarEls,\n draggedEntities\n } = productDragData,\n { startEvent } = drag,\n timespan = record.isAssignment ? record.event : record,\n origStart = timespan.startDate,\n origEnd = timespan.endDate,\n timeAxis = client.timeAxis,\n startsOutsideView = origStart < timeAxis.startDate,\n endsOutsideView = origEnd > timeAxis.endDate,\n multiSelect = client.isSchedulerBase ? client.multiEventSelect : client.selectionMode.multiSelect,\n coordinate = me.getCoordinate(timespan, info.element, [info.elementStartX, info.elementStartY]),\n clientCoordinate = me.getCoordinate(timespan, info.element, [info.startClientX, info.startClientY]);\n me.suspendRecordElementRedrawing(record);\n // prevent elements from being released when out of view\n draggedEntities.forEach(record => me.suspendRecordElementRedrawing(record));\n // Make sure the dragged event is selected (no-op for already selected)\n // Preserve other selected events if ctrl/meta is pressed\n if (record.isAssignment) {\n client.selectAssignment(record, startEvent.ctrlKey && multiSelect);\n }\n else {\n client.selectEvent(record, startEvent.ctrlKey && multiSelect);\n }\n const dragData = {\n context : info,\n ...productDragData,\n sourceDate : startsOutsideView ? origStart : client.getDateFromCoordinate(coordinate),\n screenSourceDate : client.getDateFromCoordinate(clientCoordinate, null, false),\n startDate : origStart,\n endDate : origEnd,\n timeDiff : 0,\n origStart,\n origEnd,\n startsOutsideView,\n endsOutsideView,\n duration : origEnd - origStart,\n browserEvent : startEvent // So we can know if SHIFT/CTRL was pressed\n };\n eventBarEls.forEach(el => el.classList.remove('b-sch-event-hover', 'b-active'));\n if (eventBarEls.length > 1) {\n // RelatedElements are secondary elements moved by the same delta as the grabbed element\n info.relatedElements = eventBarEls.slice(1);\n }\n return dragData;\n }\n //endregion\n //region Constraints\n // private\n setupConstraints(constrainRegion, elRegion, tickSize, constrained) {\n const\n me = this,\n xTickSize = !me.showExactDropPosition && tickSize > 1 ? tickSize : 0,\n yTickSize = 0;\n // If `constrained` is false then we have no date constraints and should constrain mouse position to scheduling area\n // else we have specified date constraints and so we should limit mouse position to smaller region inside of constrained region using offsets and width.\n if (constrained) {\n me.setXConstraint(constrainRegion.left, constrainRegion.right - elRegion.width, xTickSize);\n }\n // And if not constrained, release any constraints from the previous drag.\n else {\n // minX being true means allow the start to be before the time axis.\n // maxX being true means allow the end to be after the time axis.\n me.setXConstraint(true, true, xTickSize);\n }\n me.setYConstraint(constrainRegion.top, constrainRegion.bottom - elRegion.height, yTickSize);\n }\n updateYConstraint(eventRecord, resourceRecord) {\n const\n me = this,\n { client } = me,\n { context } = me.drag,\n tickSize = client.timeAxisViewModel.snapPixelAmount;\n // If we're dragging when the vertical size is recalculated by the host grid,\n // we must update our Y constraint unless we are locked in the Y axis.\n if (context && !me.drag.lockY) {\n let constrainRegion;\n // This calculates a relative region which the DragHelper uses within its outerElement\n if (me.constrainDragToTimeline) {\n constrainRegion = client.getScheduleRegion(resourceRecord, eventRecord);\n }\n // Not constraining to timeline.\n // Unusual configuration, but this must mean no Y constraining.\n else {\n me.setYConstraint(null, null, tickSize);\n return;\n }\n me.setYConstraint(\n constrainRegion.top,\n constrainRegion.bottom - context.element.offsetHeight,\n tickSize\n );\n }\n else {\n me.setYConstraint(null, null, tickSize);\n }\n }\n setXConstraint(iLeft, iRight, iTickSize) {\n const { drag } = this;\n drag.minX = iLeft;\n drag.maxX = iRight;\n }\n setYConstraint(iUp, iDown, iTickSize) {\n const { drag } = this;\n drag.minY = iUp;\n drag.maxY = iDown;\n }\n //endregion\n //region Other stuff\n adjustStartDate(startDate, timeDiff) {\n const rounded = this.client.timeAxis.roundDate(\n new Date(startDate - 0 + timeDiff),\n this.client.snapRelativeToEventStartDate ? startDate : false\n );\n return this.constrainStartDate(rounded);\n }\n resolveStartEndDates(draggedElement) {\n const\n timeline = this.currentOverClient,\n { timeAxis } = timeline,\n proxyRect = Rectangle.from(draggedElement.querySelector(timeline.eventInnerSelector), timeline.timeAxisSubGridElement),\n dd = this.dragData,\n [record] = dd.draggedEntities,\n eventRecord = record.isAssignment ? record.event : record,\n fillSnap = timeline.fillTicks && timeline.snapRelativeToEventStartDate,\n // Cannot calculate using `eventRecord.duration`, since it in Pro does not include non-working time\n totalDurationMS = eventRecord.endDate - eventRecord.startDate;\n // Non-continuous time axis will return null instead of date for a rectangle outside of the view unless\n // told to estimate date.\n // When using fillTicks, we need exact dates for calculations below\n let {\n start : startDate, end : endDate\n } = timeline.getStartEndDatesFromRectangle(proxyRect, fillSnap ? null : 'round', totalDurationMS, true);\n // if dragging is out of timeAxis rect bounds, we will not be able to get dates\n if (startDate && endDate) {\n // When filling ticks, proxy start does not represent actual start date.\n // Need to compensate to get expected result\n if (fillSnap) {\n const\n // Events offset into the tick, in MS\n offsetMS = eventRecord.startDate - DateHelper.startOf(eventRecord.startDate, timeAxis.unit),\n // Proxy length in MS\n proxyMS = endDate - startDate,\n // Part of proxy that is \"filled\" and needs to be removed\n offsetPx = (offsetMS / proxyMS) * proxyRect.width;\n // Deflate top for vertical mode, left for horizontal mode\n proxyRect.deflate(offsetPx, 0, 0, offsetPx);\n const proxyStart = proxyRect.getStart(timeline.rtl, !timeline.isVertical);\n // Get date from offset proxy start\n startDate = timeline.getDateFromCoordinate(proxyStart, null, true);\n // Snap relative to event start date\n startDate = timeAxis.roundDate(startDate, eventRecord.startDate);\n }\n startDate = this.adjustStartDate(startDate, 0);\n if (!dd.startsOutsideView) {\n // Make sure we didn't target a start date that is filtered out, if we target last hour cell (e.g. 21:00) of\n // the time axis, and the next tick is 08:00 following day. Trying to drop at end of 21:00 cell should target start of next cell\n if (!timeAxis.dateInAxis(startDate, false)) {\n const tick = timeAxis.getTickFromDate(startDate);\n if (tick >= 0) {\n startDate = timeAxis.getDateFromTick(tick);\n }\n }\n endDate = startDate && DateHelper.add(startDate, totalDurationMS);\n }\n else if (!dd.endsOutsideView) {\n startDate = endDate && DateHelper.add(endDate, -totalDurationMS);\n }\n }\n return {\n startDate,\n endDate\n };\n }\n //endregion\n //region Dragtip\n /**\n * Gets html to display in tooltip while dragging event. Uses clockTemplate to display start & end dates.\n */\n getTipHtml() {\n const\n me = this,\n { dragData, client, tooltipTemplate } = me,\n { startDate, endDate, draggedEntities } = dragData,\n startText = client.getFormattedDate(startDate),\n endText = (endDate && client.getFormattedEndDate(endDate, startDate)) || '',\n { valid, message, element, dragProxy } = dragData.context,\n tipTarget = dragProxy ? dragProxy.firstChild : element,\n dragged = draggedEntities[0],\n // Scheduler always drags assignments\n timeSpanRecord = dragged.isTask ? dragged : dragged.event;\n // Keep align target up to date in case of derendering the target when\n // dragged outside render window, and re-entry into the render window.\n me.tip.lastAlignSpec.target = tipTarget;\n return tooltipTemplate({\n valid,\n startDate,\n endDate,\n startText,\n endText,\n dragData,\n message : message || '',\n [client.scheduledEventName + 'Record'] : timeSpanRecord,\n startClockHtml : me.clockTemplate.template({\n date : startDate,\n text : startText,\n cls : 'b-sch-tooltip-startdate'\n }),\n endClockHtml : timeSpanRecord.isMilestone\n ? ''\n : me.clockTemplate.template({\n date : endDate,\n text : endText,\n cls : 'b-sch-tooltip-enddate'\n })\n });\n }\n //endregion\n //region Configurable\n // Constrain to time slot means lockX if we're horizontal, otherwise lockY\n updateConstrainDragToTimeSlot(value) {\n const axis = this.client.isHorizontal ? 'lockX' : 'lockY';\n if (this.drag) {\n this.drag[axis] = value;\n }\n }\n // Constrain to resource means lockY if we're horizontal, otherwise lockX\n updateConstrainDragToResource(constrainDragToResource) {\n const me = this;\n if (me.drag) {\n const\n { constrainDragToTimeSlot } = me,\n { isHorizontal } = me.client;\n if (constrainDragToResource) {\n me.constrainDragToTimeline = true;\n }\n me.drag.lockY = isHorizontal ? constrainDragToResource : constrainDragToTimeSlot;\n me.drag.lockX = isHorizontal ? constrainDragToTimeSlot : constrainDragToResource;\n }\n }\n updateConstrainDragToTimeline(constrainDragToTimeline) {\n if (!this.isConfiguring) {\n Object.assign(this.drag, {\n cloneTarget : !constrainDragToTimeline,\n allowDropOutside : !constrainDragToTimeline,\n dragWithin : constrainDragToTimeline ? null : this.client.floatRoot,\n scrollManager : constrainDragToTimeline ? this.client.scrollManager : null\n });\n }\n }\n constrainStartDate(startDate) {\n const\n { dragData } = this,\n { dateConstraints } = dragData,\n scheduleableRecord = dragData.eventRecord || dragData.taskRecord || dragData.draggedEntities[0];\n if (dateConstraints?.start) {\n startDate = DateHelper.max(dateConstraints.start, startDate);\n }\n if (dateConstraints?.end) {\n startDate = DateHelper.min(new Date(dateConstraints.end - scheduleableRecord.durationMS), startDate);\n }\n return startDate;\n }\n //endregion\n //region Product specific, implemented in subclasses\n getElementFromContext(context) {\n return context.grabbed || context.dragProxy || context.element;\n }\n // Provide your custom implementation of this to allow additional selected records to be dragged together with the original one.\n getRelatedRecords(record) {\n return [];\n }\n getMinimalDragData(info, event) {\n // Can be overridden in subclass\n return {};\n }\n // Check if element can be dropped at desired location\n isValidDrop(dragData) {\n throw new Error('Implement in subclass');\n }\n // Similar to the fn above but also calls validatorFn\n checkDragValidity(dragData) {\n throw new Error('Implement in subclass');\n }\n // Update records being dragged\n updateRecords(context) {\n throw new Error('Implement in subclass');\n }\n // Determine if an element can be dragged\n isElementDraggable(el, event) {\n throw new Error('Implement in subclass');\n }\n // Get coordinate for correct axis\n getCoordinate(record, element, coord) {\n throw new Error('Implement in subclass');\n }\n // Product specific drag data\n setupProductDragData(info) {\n throw new Error('Implement in subclass');\n }\n // Product specific data in drag context\n getProductDragContext(dd) {\n throw new Error('Implement in subclass');\n }\n getRecordElement(record) {\n throw new Error('Implement in subclass');\n }\n //endregion\n}\nDragBase._$name = 'DragBase';", "import InstancePlugin from '../../Core/mixin/InstancePlugin.js';\nimport Draggable from '../../Core/mixin/Draggable.js';\nimport Droppable from '../../Core/mixin/Droppable.js';\nimport DateHelper from '../../Core/helper/DateHelper.js';\nimport StringHelper from '../../Core/helper/StringHelper.js';\nimport Rectangle from '../../Core/helper/util/Rectangle.js';\nimport Tooltip from '../../Core/widget/Tooltip.js';\nimport ClockTemplate from '../tooltip/ClockTemplate.js';\nimport EventHelper from '../../Core/helper/EventHelper.js';\nimport BrowserHelper from '../../Core/helper/BrowserHelper.js';\nimport TimeSpan from '../../Scheduler/model/TimeSpan.js';\nimport GridFeatureManager from '../../Grid/feature/GridFeatureManager.js';\nimport VersionHelper from '../../Core/helper/VersionHelper.js';\n/**\n * @module Scheduler/feature/EventResize\n */\nconst tipAlign = {\n top : 'b-t',\n right : 'b100-t100',\n bottom : 't-b',\n left : 'b0-t0'\n};\n/**\n * Feature that allows resizing an event by dragging its end.\n *\n * By default it displays a tooltip with the new start and end dates, formatted using\n * {@link Scheduler/view/mixin/TimelineViewPresets#config-displayDateFormat}.\n *\n * ## Customizing the resize tooltip\n *\n * To show custom HTML in the tooltip, please see the {@link #config-tooltipTemplate} config. Example:\n *\n * ```javascript\n * eventResize : {\n * // A minimal end date tooltip\n * tooltipTemplate : ({ record, endDate }) => {\n * return DateHelper.format(endDate, 'MMM D');\n * }\n * }\n * ```\n *\n * This feature is **enabled** by default\n *\n * This feature is extended with a few overrides by the Gantt's `TaskResize` feature.\n *\n * This feature updates the event's `startDate` or `endDate` live in order to leverage the\n * rendering pathway to always yield a correct appearance. The changes are done in\n * {@link Core.data.Model#function-beginBatch batched} mode so that changes do not become\n * eligible for data synchronization or propagation until the operation is completed.\n *\n * {@inlineexample Scheduler/feature/EventResize.js}\n *\n * @demo Scheduler/basic\n *\n * @extends Core/mixin/InstancePlugin\n * @classtype eventResize\n * @feature\n */\nexport default class EventResize extends InstancePlugin.mixin(Draggable, Droppable) {\n //region Events\n /**\n * Fired on the owning Scheduler before resizing starts. Return `false` to prevent the action.\n * @event beforeEventResize\n * @on-owner\n * @preventable\n * @param {Scheduler.view.Scheduler} source Scheduler instance\n * @param {Scheduler.model.EventModel} eventRecord Event record being resized\n * @param {Scheduler.model.ResourceModel} resourceRecord Resource record the resize starts within\n * @param {MouseEvent} event Browser event\n */\n /**\n * Fires on the owning Scheduler when event resizing starts\n * @event eventResizeStart\n * @on-owner\n * @param {Scheduler.view.Scheduler} source Scheduler instance\n * @param {Scheduler.model.EventModel} eventRecord Event record being resized\n * @param {Scheduler.model.ResourceModel} resourceRecord Resource record the resize starts within\n * @param {MouseEvent} event Browser event\n */\n /**\n * Fires on the owning Scheduler on each resize move event\n * @event eventPartialResize\n * @on-owner\n * @param {Scheduler.view.Scheduler} source Scheduler instance\n * @param {Scheduler.model.EventModel} eventRecord Event record being resized\n * @param {Date} startDate\n * @param {Date} endDate\n * @param {HTMLElement} element\n */\n /**\n * Fired on the owning Scheduler to allow implementer to prevent immediate finalization by setting\n * `data.context.async = true` in the listener, to show a confirmation popup etc\n *\n * ```javascript\n * scheduler.on('beforeeventresizefinalize', ({context}) => {\n * context.async = true;\n * setTimeout(() => {\n * // async code don't forget to call finalize\n * context.finalize();\n * }, 1000);\n * })\n * ```\n *\n * @event beforeEventResizeFinalize\n * @on-owner\n * @param {Scheduler.view.Scheduler} source Scheduler instance\n * @param {Object} context\n * @param {Scheduler.model.EventModel} context.eventRecord Event record being resized\n * @param {Date} context.startDate New startDate (changed if resizing start side)\n * @param {Date} context.endDate New endDate (changed if resizing end side)\n * @param {Date} context.originalStartDate Start date before resize\n * @param {Date} context.originalEndDate End date before resize\n * @param {Boolean} context.async Set true to handle resize asynchronously (e.g. to wait for user confirmation)\n * @param {Function} context.finalize Call this method to finalize resize. This method accepts one argument:\n * pass `true` to update records, or `false`, to ignore changes\n * @param {Event} event Browser event\n */\n /**\n * Fires on the owning Scheduler after the resizing gesture has finished.\n * @event eventResizeEnd\n * @on-owner\n * @param {Scheduler.view.Scheduler} source Scheduler instance\n * @param {Boolean} changed Shows if the record has been changed by the resize action\n * @param {Scheduler.model.EventModel} eventRecord Event record being resized\n */\n //endregion\n //region Config\n static get $name() {\n return 'EventResize';\n }\n static get configurable() {\n return {\n draggingItemCls : 'b-sch-event-wrap-resizing',\n resizingItemInnerCls : 'b-sch-event-resizing',\n /**\n * Use left handle when resizing. Only applies when owning client's `direction` is 'horizontal'\n * @config {Boolean}\n * @default\n */\n leftHandle : true,\n /**\n * Use right handle when resizing. Only applies when owning client's `direction` is 'horizontal'\n * @config {Boolean}\n * @default\n */\n rightHandle : true,\n /**\n * Use top handle when resizing. Only applies when owning client's direction` is 'vertical'\n * @config {Boolean}\n * @default\n */\n topHandle : true,\n /**\n * Use bottom handle when resizing. Only applies when owning client's `direction` is 'vertical'\n * @config {Boolean}\n * @default\n */\n bottomHandle : true,\n /**\n * Resizing handle size to use instead of that determined by CSS\n * @config {Number}\n * @deprecated Since 5.2.7. The handle size is determined from responsive CSS. Will be removed in 6.0\n */\n handleSize : null,\n /**\n * Automatically shrink virtual handles when available space < handleSize. The virtual handles will\n * decrease towards width/height 1, reserving space between opposite handles to for example leave room for\n * dragging. To configure reserved space, see {@link #config-reservedSpace}.\n * @config {Boolean}\n * @default false\n */\n dynamicHandleSize : true,\n /**\n * Set to true to allow resizing to a zero-duration span\n * @config {Boolean}\n * @default false\n */\n allowResizeToZero : null,\n /**\n * Room in px to leave unoccupied by handles when shrinking them dynamically (see\n * {@link #config-dynamicHandleSize}).\n * @config {Number}\n * @default\n */\n reservedSpace : 5,\n /**\n * Resizing handle size to use instead of that determined by CSS on touch devices\n * @config {Number}\n * @deprecated Since 5.2.7. The handle size is determined from responsive CSS. Will be removed in 6.0\n */\n touchHandleSize : null,\n /**\n * The amount of pixels to move pointer/mouse before it counts as a drag operation.\n * @config {Number}\n * @default\n */\n dragThreshold : 0,\n dragTouchStartDelay : 0,\n draggingClsSelector : '.b-timeline-base',\n /**\n * `false` to not show a tooltip while resizing\n * @config {Boolean}\n * @default\n */\n showTooltip : true,\n /**\n * true to see exact event length during resizing\n * @config {Boolean}\n * @default\n */\n showExactResizePosition : false,\n /**\n * An empty function by default, but provided so that you can perform custom validation on\n * the item being resized. Return true if the new duration is valid, false to signal that it is not.\n * @param {Object} context The resize context, contains the record & dates.\n * @param {Scheduler.model.TimeSpan} context.record The record being resized.\n * @param {Date} context.startDate The new start date.\n * @param {Date} context.endDate The new start date.\n * @param {Date} context.originalStartDate Start date before resize\n * @param {Date} context.originalEndDate End date before resize\n * @param {Event} event The browser Event object\n * @returns {Boolean}\n * @config {Function}\n */\n validatorFn : () => true,\n /**\n * `this` reference for the validatorFn\n * @config {Object}\n */\n validatorFnThisObj : null,\n /**\n * Setting this property may change the configuration of the {@link #config-tip}, or\n * cause it to be destroyed if `null` is passed.\n *\n * Reading this property returns the Tooltip instance.\n * @member {Core.widget.Tooltip|TooltipConfig} tip\n */\n /**\n * If a tooltip is required to illustrate the resize, specify this as `true`, or a config\n * object for the {@link Core.widget.Tooltip}.\n * @config {Core.widget.Tooltip|TooltipConfig}\n */\n tip : {\n $config : ['lazy', 'nullify'],\n value : {\n autoShow : false,\n axisLock : true,\n trackMouse : false,\n updateContentOnMouseMove : true,\n hideDelay : 0\n }\n },\n /**\n * A template function returning the content to show during a resize operation.\n *\n * @config {Function} tooltipTemplate\n * @param {Object} context A context object\n * @param {Date} context.startDate New start date\n * @param {Date} context.endDate New end date\n * @param {Scheduler.model.TimeSpan} context.record The record being resized\n * @param {String} context.startClockHtml Predefined HTML to show the start time\n * @param {String} context.endClockHtml Predefined HTML to show the end time\n * @returns {String} String representing the HTML markup\n */\n tooltipTemplate : context => `\n \n ${context.startClockHtml}\n ${context.endClockHtml}\n \n
\n `,\n ignoreSelector : '.b-sch-terminal',\n dragActiveCls : 'b-resizing-event',\n /**\n * Locks the layout during drag resize, overriding the default behaviour that uses the same rendering\n * pathway for drag resize as for already existing events.\n *\n * This more closely resembles the behaviour of versions prior to 4.2.0.\n *\n * Enabling this config also leads to cheaper resizing, only the resized event's resources are refreshed\n * during the operation.\n *\n * {@note}Note that this will be the default behaviour starting with version 6.0.0{/@note}\n *\n * @config {Boolean}\n */\n lockLayout : VersionHelper.checkVersion('core', '6.0', '>=')\n };\n }\n static get pluginConfig() {\n return {\n chain : ['render', 'onEventDataGenerated', 'isEventElementDraggable']\n };\n }\n //endregion\n //region Init & destroy\n doDestroy() {\n super.doDestroy();\n this.dragging?.destroy();\n }\n render() {\n const\n me = this,\n { client } = me;\n // Only active when in these items\n me.dragSelector = me.dragItemSelector = client.eventSelector;\n // Set up elements and listeners\n me.dragRootElement = me.dropRootElement = client.timeAxisSubGridElement;\n // Drag only in time dimension\n me.dragLock = client.isVertical ? 'y' : 'x';\n }\n // Prevent event dragging when it happens over a resize handle\n isEventElementDraggable(eventElement, eventRecord, el, event) {\n const\n me = this,\n eventResizable = eventRecord?.resizable;\n // ALLOW event drag:\n // - if resizing is disabled or event is not resizable\n // - if it's a milestone Milestones cannot be resized\n if (me.disabled || !eventResizable || eventRecord.isMilestone) {\n return true;\n }\n // not over the event handles\n return ((eventResizable !== true && eventResizable !== 'start') || !me.isOverStartHandle(event, eventElement)) &&\n ((eventResizable !== true && eventResizable !== 'end') || !me.isOverEndHandle(event, eventElement));\n }\n // Called for each event during render, allows manipulation of render data.\n onEventDataGenerated({ eventRecord, wrapperCls, cls }) {\n if (eventRecord === this.dragging?.context?.eventRecord) {\n wrapperCls['b-active'] =\n wrapperCls[this.draggingItemCls] =\n wrapperCls['b-over-resize-handle'] =\n cls['b-resize-handle'] =\n cls[this.resizingItemInnerCls] = 1;\n }\n }\n // Sneak a first peek at the drag event to put necessary date values into the context\n onDragPointerMove(event) {\n const\n {\n client,\n dragging\n } = this,\n {\n visibleDateRange,\n isHorizontal\n } = client,\n rtl = isHorizontal && client.rtl,\n dimension = isHorizontal ? 'X' : 'Y',\n pageScroll = globalThis[`page${dimension}Offset`],\n coord = event[`page${dimension}`] + (dragging.context?.offset || 0),\n clientRect = Rectangle.from(client.timeAxisSubGridElement, null, true),\n startCoord = clientRect.getStart(rtl, isHorizontal),\n endCoord = clientRect.getEnd(rtl, isHorizontal);\n let date = client.getDateFromCoord({ coord, local : false });\n if (rtl) {\n // If we're dragging off the start side, fix at the visible startDate\n if (coord - pageScroll > startCoord) {\n date = visibleDateRange.startDate;\n }\n // If we're dragging off the end side, fix at the visible endDate\n else if (coord < endCoord) {\n date = visibleDateRange.endDate;\n }\n }\n // If we're dragging off the start side, fix at the visible startDate\n else if (coord - pageScroll < startCoord) {\n date = visibleDateRange.startDate;\n }\n // If we're dragging off the end side, fix at the visible endDate\n else if (coord - pageScroll > endCoord) {\n date = visibleDateRange.endDate;\n }\n dragging.clientStartCoord = startCoord;\n dragging.clientEndCoord = endCoord;\n dragging.date = date;\n super.onDragPointerMove(event);\n }\n /**\n * Returns true if a resize operation is active\n * @property {Boolean}\n * @readonly\n */\n get isResizing() {\n return Boolean(this.dragging);\n }\n beforeDrag(drag) {\n const\n { client } = this,\n eventRecord = client.resolveTimeSpanRecord(drag.itemElement),\n resourceRecord = !client.isGanttBase && client.resolveResourceRecord(client.isVertical ? drag.startEvent : drag.itemElement);\n // Events not part of project are transient records in a Gantt display store and not meant to be modified\n if (this.disabled || client.readOnly || resourceRecord?.readOnly ||\n (eventRecord && (eventRecord.readOnly || !(eventRecord.project || eventRecord.isOccurrence))) ||\n super.beforeDrag(drag) === false) {\n return false;\n }\n drag.mousedownDate = drag.date = client.getDateFromCoordinate(drag.event[`page${client.isHorizontal ? 'X' : 'Y'}`], null, false);\n // trigger beforeEventResize or beforeTaskResize depending on product\n return this.triggerBeforeResize(drag);\n }\n dragStart(drag) {\n const\n me = this,\n {\n client,\n tip\n } = me,\n {\n startEvent,\n itemElement\n } = drag,\n name = client.scheduledEventName,\n eventRecord = client.resolveEventRecord(itemElement),\n {\n isBatchUpdating,\n wrapStartDate,\n wrapEndDate\n } = eventRecord,\n useEventBuffer = client.features.eventBuffer?.enabled,\n eventStartDate = isBatchUpdating ? eventRecord.get('startDate') : eventRecord.startDate,\n eventEndDate = isBatchUpdating ? eventRecord.get('endDate') : eventRecord.endDate,\n horizontal = me.dragLock === 'x',\n rtl = horizontal && client.rtl,\n draggingEnd = me.isOverEndHandle(startEvent, itemElement),\n toSet = draggingEnd ? 'endDate' : 'startDate',\n wrapToSet = !useEventBuffer ? null : draggingEnd ? 'wrapEndDate' : 'wrapStartDate',\n otherEnd = draggingEnd ? 'startDate' : 'endDate',\n setMethod = draggingEnd ? 'setEndDate' : 'setStartDate',\n setOtherMethod = draggingEnd ? 'setStartDate' : 'setEndDate',\n elRect = Rectangle.from(itemElement),\n startCoord = horizontal ? startEvent.clientX : startEvent.clientY,\n endCoord = draggingEnd ? elRect.getEnd(rtl, horizontal) : elRect.getStart(rtl, horizontal),\n context = drag.context = {\n eventRecord,\n element : itemElement,\n timespanRecord : eventRecord,\n taskRecord : eventRecord,\n owner : me,\n valid : true,\n oldValue : draggingEnd ? eventEndDate : eventStartDate,\n startDate : eventStartDate,\n endDate : eventEndDate,\n offset : useEventBuffer ? 0 : endCoord - startCoord,\n edge : horizontal ? (draggingEnd ? 'right' : 'left') : (draggingEnd ? 'bottom' : 'top'),\n finalize : me.finalize,\n event : drag.event,\n // these two are public\n originalStartDate : eventStartDate,\n originalEndDate : eventEndDate,\n wrapStartDate,\n wrapEndDate,\n draggingEnd,\n toSet,\n wrapToSet,\n otherEnd,\n setMethod,\n setOtherMethod\n };\n // The record must know that it is being resized.\n eventRecord.meta.isResizing = true;\n client.element.classList.add(...me.dragActiveCls.split(' '));\n // During this batch we want the client's UI to update itself using the proposed changes\n // Only if startDrag has not already done it\n if (!client.listenToBatchedUpdates) {\n client.beginListeningForBatchedUpdates();\n }\n // No changes must get through to data.\n // Only if startDrag has not already started the batch\n if (!isBatchUpdating) {\n me.beginEventRecordBatch(eventRecord);\n }\n // Let products do their specific stuff\n me.setupProductResizeContext(context, startEvent);\n // Trigger eventResizeStart or taskResizeStart depending on product\n // Subclasses (like EventDragCreate) won't actually fire this event.\n me.triggerEventResizeStart(`${name}ResizeStart`, {\n [`${name}Record`] : eventRecord,\n event : startEvent,\n ...me.getResizeStartParams(context)\n }, context);\n // Scheduler renders assignments, Gantt renders Tasks\n context.resizedRecord = client.resolveAssignmentRecord?.(context.element) || eventRecord;\n if (tip) {\n // Tip needs to be shown first for getTooltipTarget to be able to measure anchor size\n tip.show();\n tip.align = tipAlign[context.edge];\n tip.showBy(me.getTooltipTarget(drag));\n }\n }\n // Subclasses may override this\n triggerBeforeResize(drag) {\n const\n { client } = this,\n eventRecord = client.resolveTimeSpanRecord(drag.itemElement);\n return client.trigger(\n `before${client.capitalizedEventName}Resize`,\n {\n [`${client.scheduledEventName}Record`] : eventRecord,\n event : drag.event,\n ...this.getBeforeResizeParams({ event : drag.startEvent, element : drag.itemElement })\n }\n );\n }\n // Subclasses may override this\n triggerEventResizeStart(eventType, event, context) {\n this.client.trigger(eventType, event);\n // Hook for features that needs to react on resize start\n this.client[`after${StringHelper.capitalize(eventType)}`]?.(context, event);\n }\n triggerEventResizeEnd(eventType, event) {\n this.client.trigger(eventType, event);\n }\n triggerEventPartialResize(eventType, event) {\n // Trigger eventPartialResize or taskPartialResize depending on product\n this.client.trigger(eventType, event);\n }\n triggerBeforeEventResizeFinalize(eventType, event) {\n this.client.trigger(eventType, event);\n }\n dragEnter(drag) {\n // We only respond to our own DragContexts\n return drag.context?.owner === this;\n }\n resizeEventPartiallyInternal(eventRecord, context) {\n const\n { client } = this,\n { toSet } = context;\n if (client.features.eventBuffer?.enabled) {\n if (toSet === 'startDate') {\n const diff = context.startDate.getTime() - context.originalStartDate.getTime();\n eventRecord.wrapStartDate = new Date(context.wrapStartDate.getTime() + diff);\n }\n else if (toSet === 'endDate') {\n const diff = context.endDate.getTime() - context.originalEndDate.getTime();\n eventRecord.wrapEndDate = new Date(context.wrapEndDate.getTime() + diff);\n }\n }\n eventRecord.set(toSet, context[toSet]);\n }\n applyDateConstraints(date, eventRecord, context) {\n const\n minDate = context.dateConstraints?.start,\n maxDate = context.dateConstraints?.end;\n // Keep desired date within constraints\n if (minDate || maxDate) {\n date = DateHelper.constrain(date, minDate, maxDate);\n context.snappedDate = DateHelper.constrain(context.snappedDate, minDate, maxDate);\n }\n return date;\n }\n // Override the draggable interface so that we can update the bar while dragging outside\n // the Draggable's rootElement (by default it stops notifications when outside rootElement)\n moveDrag(drag) {\n const\n me = this,\n {\n client,\n tip\n } = me,\n horizontal = me.dragLock === 'x',\n dimension = horizontal ? 'X' : 'Y',\n name = client.scheduledEventName,\n {\n visibleDateRange,\n enableEventAnimations,\n timeAxis,\n weekStartDay\n } = client,\n rtl = horizontal && client.rtl,\n {\n resolutionUnit,\n resolutionIncrement\n } = timeAxis,\n {\n event,\n context\n } = drag,\n {\n eventRecord,\n oldValue\n } = context,\n offset = context.offset * (rtl ? -1 : 1),\n {\n isOccurrence\n } = eventRecord,\n eventStart = eventRecord.get('startDate'),\n eventEnd = eventRecord.get('endDate'),\n coord = event[`client${dimension}`] + offset,\n clientRect = Rectangle.from(client.timeAxisSubGridElement, null, true),\n startCoord = clientRect.getStart(rtl, horizontal),\n endCoord = clientRect.getEnd(rtl, horizontal);\n context.event = event;\n // If this is the last move event recycled because of a scroll, refresh the date\n if (event.isScroll) {\n drag.date = client.getDateFromCoordinate(event[`page${dimension}`] + offset, null, false);\n }\n let crossedOver, avoidedZeroSize,\n // Use the value set up in onDragPointerMove by default\n { date } = drag,\n {\n toSet,\n otherEnd,\n draggingEnd\n } = context;\n if (rtl) {\n // If we're dragging off the start side, fix at the visible startDate\n if (coord > startCoord) {\n date = drag.date = visibleDateRange.startDate;\n }\n // If we're dragging off the end side, fix at the visible endDate\n else if (coord < endCoord) {\n date = drag.date = visibleDateRange.endDate;\n }\n }\n // If we're dragging off the start side, fix at the visible startDate\n else if (coord < startCoord) {\n date = drag.date = visibleDateRange.startDate;\n }\n // If we're dragging off the end side, fix at the visible endDate\n else if (coord > endCoord) {\n date = drag.date = visibleDateRange.endDate;\n }\n // Detect crossover which some subclasses might need to process\n if (toSet === 'endDate') {\n if (date < eventStart) {\n crossedOver = -1;\n }\n }\n else {\n if (date > eventEnd) {\n crossedOver = 1;\n }\n }\n // If we dragged the dragged end over to the opposite side of the start end.\n // Some subclasses allow this and need to respond. EventDragCreate does this.\n if (crossedOver && me.onDragEndSwitch) {\n me.onDragEndSwitch(context, date, crossedOver);\n otherEnd = context.otherEnd;\n toSet = context.toSet;\n }\n if (client.snapRelativeToEventStartDate) {\n date = timeAxis.roundDate(date, oldValue);\n }\n // The displayed and eventual data value\n context.snappedDate = DateHelper.round(date, timeAxis.resolution, null, weekStartDay);\n const duration = DateHelper.diff(date, context[otherEnd], resolutionUnit) * (draggingEnd ? -1 : 1);\n // Narrower than half resolutionIncrement will abort drag creation, set flag to have UI reflect this\n if (me.isEventDragCreate) {\n context.tooNarrow = duration < resolutionIncrement / 2;\n }\n // The mousepoint date means that the duration is less than resolutionIncrement resolutionUnits.\n // Ensure that the dragged end is at least resolutionIncrement resolutionUnits from the other end.\n else if (duration < resolutionIncrement) {\n // Snap to zero if allowed\n if (me.allowResizeToZero) {\n context.snappedDate = date = context[otherEnd];\n }\n else {\n const\n sign = otherEnd === 'startDate' ? 1 : -1,\n snappedDate = timeAxis.roundDate(DateHelper.add(eventRecord.get(otherEnd), resolutionIncrement * sign, resolutionUnit));\n // Only snap if dragging bigger; multiplying by sign handles reverse drag direction (leftward)\n if ((snappedDate - oldValue) * sign < 0 || (date - oldValue) * sign > 0) {\n date = sign > 0 ? DateHelper.max(date, snappedDate) : DateHelper.min(date, snappedDate);\n context.snappedDate = snappedDate;\n }\n else {\n // Fix snappedDate to stay on original date and prevent `date` making event smaller than starting value\n date = sign > 0 ? DateHelper.max(date, oldValue) : DateHelper.min(date, oldValue);\n context.snappedDate = oldValue;\n }\n avoidedZeroSize = true;\n }\n }\n // take dateConstraints into account\n date = me.applyDateConstraints(date, eventRecord, context);\n // If the mouse move has changed the detected date\n if (!context.date || date - context.date || avoidedZeroSize) {\n context.date = date;\n // The validityFn needs to see the proposed value.\n // Consult our snap config to see if we should be dragging in snapped mode\n context[toSet] = me.showExactResizePosition || client.timeAxisViewModel.snap ? context.snappedDate : date;\n // Snapping would take it to zero size - this is not allowed in drag resizing.\n context.valid = me.allowResizeToZero || context[toSet] - context[toSet === 'startDate' ? 'endDate' : 'startDate'] !== 0;\n // If the date to push into the record is new...\n if (eventRecord.get(toSet) - context[toSet]) {\n context.valid = me.checkValidity(context, event);\n context.message = '';\n if (context.valid && typeof context.valid !== 'boolean') {\n context.message = context.valid.message;\n context.valid = context.valid.valid;\n }\n // If users returns nothing, that's interpreted as valid\n context.valid = (context.valid !== false);\n if (context.valid) {\n const partialResizeEvent = {\n [`${name}Record`] : eventRecord,\n startDate : eventStart,\n endDate : eventEnd,\n element : drag.itemElement,\n context\n };\n // Update the event we are about to fire and the context *before* we update the record\n partialResizeEvent[toSet] = context[toSet];\n // Trigger eventPartialResize or taskPartialResize depending on product\n me.triggerEventPartialResize(`${name}PartialResize`, partialResizeEvent);\n // An occurrence must have a store to announce its batched changes through.\n // They must usually never have a store - they are transient, but we\n // need to update the UI.\n if (isOccurrence) {\n eventRecord.stores = [client.eventStore];\n }\n // Update the eventRecord.\n // Use setter rather than accessor so that in a Project, the entity's\n // accessor doesn't propagate the change to the whole project.\n // Scheduler must not animate this.\n client.enableEventAnimations = false;\n this.resizeEventPartiallyInternal(eventRecord, context);\n client.enableEventAnimations = enableEventAnimations;\n if (isOccurrence) {\n eventRecord.stores = null;\n }\n }\n // Flag drag created too narrow events as invalid late, want all code above to execute for them\n // to get the proper size rendered\n if (context.tooNarrow) {\n context.valid = false;\n }\n }\n }\n if (tip) {\n // In case of edge flip (EventDragCreate), the align point may change\n tip.align = tipAlign[context.edge];\n tip.alignTo(me.getTooltipTarget(drag));\n }\n super.moveDrag(drag);\n }\n dragEnd(drag) {\n const { context } = drag;\n if (context) {\n context.event = drag.event;\n }\n if (drag.aborted) {\n context?.finalize(false);\n }\n // 062_resize.t.js specifies that if drag was not started but the mouse has moved,\n // the eventresizestart and eventresizeend must fire\n else if (!this.isEventDragCreate && !drag.started && !EventHelper.getPagePoint(drag.event).equals(EventHelper.getPagePoint(drag.startEvent))) {\n this.dragStart(drag);\n this.cleanup(drag.context, false);\n }\n }\n async dragDrop({ context, event }) {\n // Set the start/end date, whichever we were dragging\n // to the correctly rounded value before updating.\n context[context.toSet] = context.snappedDate;\n const\n {\n client\n } = this,\n {\n startDate,\n endDate\n } = context;\n let modified;\n this.tip?.hide();\n context.valid = startDate && endDate && (this.allowResizeToZero || (endDate - startDate > 0)) && // Input sanity check\n (context[context.toSet] - context.oldValue) && // Make sure dragged end changed\n context.valid !== false;\n if (context.valid) {\n // Seems to be a valid resize operation, ask outside world if anyone wants to take control over the finalizing,\n // to show a confirm dialog prior to applying the new values. Triggers beforeEventResizeFinalize or\n // beforeTaskResizeFinalize depending on product\n this.triggerBeforeEventResizeFinalize(`before${client.capitalizedEventName}ResizeFinalize`, { context, event, [`${client.scheduledEventName}Record`] : context.eventRecord });\n modified = true;\n }\n // If a handler has set the async flag, it means that they are going to finalize\n // the operation at some time in the future, so we should not call it.\n if (!context.async) {\n await context.finalize(modified);\n }\n }\n // This is called with a thisObj of the context object\n // We set \"me\" to the owner, and \"context\" to the thisObj so that it\n // reads as if it were a method of this class.\n async finalize(updateRecord) {\n const\n me = this.owner,\n context = this,\n {\n eventRecord,\n oldValue,\n toSet\n } = context,\n {\n snapRelativeToEventStartDate,\n timeAxis\n } = me.client;\n if (context.finalizing) {\n return;\n }\n context.finalizing = true;\n let wasChanged = false;\n if (updateRecord) {\n if (snapRelativeToEventStartDate) {\n context[toSet] = context.snappedDate = timeAxis.roundDate(context.date, oldValue);\n }\n // Each product updates the record differently\n wasChanged = await me.internalUpdateRecord(context, eventRecord);\n }\n else {\n // Reverts the changes, a batchedUpdate event will fire which will reset the UI\n me.cancelEventRecordBatch(eventRecord);\n // Manually trigger redraw of occurrences since they are not part of any stores\n if (eventRecord.isOccurrence) {\n eventRecord.resources.forEach(resource => me.client.repaintEventsForResource(resource));\n }\n }\n if (!me.isDestroyed) {\n me.cleanup(context, wasChanged);\n }\n }\n // This is always called on drop or abort.\n cleanup(context, changed) {\n const\n me = this,\n { client } = me,\n {\n element,\n eventRecord\n } = context,\n name = client.scheduledEventName;\n // The record must know that it is being resized.\n eventRecord.meta.isResizing = false;\n client.endListeningForBatchedUpdates();\n me.tip?.hide();\n me.unHighlightHandle(element);\n client.element.classList.remove(...me.dragActiveCls.split(' '));\n // if (dependencies) {\n // // When resizing is done and mouse is over element, we show terminals\n // if (element.matches(':hover')) {\n // dependencies.showTerminals(eventRecord, element);\n // }\n // }\n // Triggers eventResizeEnd or taskResizeEnd depending on product\n me.triggerEventResizeEnd(`${name}ResizeEnd`, {\n changed,\n [`${name}Record`] : eventRecord,\n ...me.getResizeEndParams(context)\n });\n }\n async internalUpdateRecord(context, timespanRecord) {\n const\n { client } = this,\n { generation } = timespanRecord,\n {\n toSet,\n startDate,\n endDate,\n draggingEnd\n } = context;\n // Special handling of occurrences, they need normalization since that is not handled by engine at the moment\n if (timespanRecord.isOccurrence) {\n client.endListeningForBatchedUpdates();\n // If >1 level deep, just unwind one level.\n timespanRecord[timespanRecord.batching > 1 ? 'endBatch' : 'cancelBatch']();\n timespanRecord.set(TimeSpan.prototype.inSetNormalize.call(timespanRecord, { startDate, endDate }));\n }\n else {\n // Collect any changes (except the start/end date and duration) that happened during the resize operation\n const batchChanges = Object.assign({}, timespanRecord.meta.batchChanges);\n delete batchChanges[toSet];\n delete batchChanges.duration;\n // If we have the Engine available, consult it to calculate a corrected duration.\n // Adjust the dragged date point to conform with the calculated duration.\n if (timespanRecord.isEntity) {\n // get the duration according to the Entity's rules.\n const duration = timespanRecord.run('calculateProjectedDuration', startDate, endDate);\n // Update the record to its final correct state using *batched changes*\n // These will *not* be propagated, it's just to force the dragged event bar\n // into its corrected shape before the real changes which will propagate are applied below.\n // We MUST do it like this because the final state may not be a net change if the changes\n // got rejected, and in that case, the engine will not end up firing any change events.\n timespanRecord.set({\n // Fix the dragged date point according to the Entity's rules.\n [toSet] : timespanRecord.run('calculateProjectedXDateWithDuration',\n draggingEnd ? startDate : endDate, draggingEnd, duration),\n [context.otherEnd] : context[context.otherEnd]\n });\n }\n // Quit listening for batchedUpdate *before* we cancel the batch so that the\n // change events from the revert do not update the UI.\n client.endListeningForBatchedUpdates();\n this.cancelEventRecordBatch(timespanRecord);\n // Clear estimated wrap date, exact wrap date will be calculated when referred to from renderer\n if (client.features.eventBuffer?.enabled) {\n timespanRecord[context.wrapToSet] = null;\n }\n // Really update the data after cancelling the batch\n timespanRecord[context.setMethod](context[toSet], false);\n if (Object.keys(batchChanges).length) {\n timespanRecord.set(batchChanges);\n }\n }\n // wait for project data update\n await client.project.commitAsync();\n // If the record has been changed\n return timespanRecord.generation !== generation;\n }\n onDragItemMouseMove(event) {\n if (event.pointerType !== 'touch' && !this.handleSelector) {\n this.checkResizeHandles(event);\n }\n }\n /**\n * Check if mouse is over a resize handle (virtual). If so, highlight.\n * @private\n * @param {MouseEvent} event\n */\n checkResizeHandles(event) {\n const\n me = this,\n { overItem } = me;\n // mouse over a target element and allowed to resize?\n if (overItem && !me.client.readOnly && (!me.allowResize || me.allowResize(overItem, event))) {\n const eventRecord = me.client.resolveTimeSpanRecord(overItem);\n if (eventRecord?.readOnly) {\n return;\n }\n if (me.isOverAnyHandle(event, overItem)) {\n me.highlightHandle(); // over handle\n }\n else {\n me.unHighlightHandle(); // not over handle\n }\n }\n }\n onDragItemMouseLeave(event, oldOverItem) {\n this.unHighlightHandle(oldOverItem);\n }\n /**\n * Highlights handles (applies css that changes cursor).\n * @private\n */\n highlightHandle() {\n const\n {\n overItem : item,\n client\n } = this,\n handleTargetElement = item.syncIdMap?.[client.scheduledEventName] ?? item.querySelector(client.eventInnerSelector);\n // over a handle, add cls to change cursor\n handleTargetElement.classList.add('b-resize-handle');\n item.classList.add('b-over-resize-handle');\n }\n /**\n * Unhighlight handles (removes css).\n * @private\n */\n unHighlightHandle(item = this.overItem) {\n if (item) {\n const\n me = this,\n inner = item.syncIdMap?.[me.client.scheduledEventName] ?? item.querySelector(me.client.eventInnerSelector);\n if (inner) {\n inner.classList.remove('b-resize-handle', me.resizingItemInnerCls);\n }\n item.classList.remove('b-over-resize-handle', me.draggingItemCls);\n }\n }\n isOverAnyHandle(event, target) {\n return Boolean(this.isOverStartHandle(event, target) || this.isOverEndHandle(event, target));\n }\n isOverStartHandle(event, target) {\n return Boolean(this.getHandleRect('start', event, target)?.contains(EventHelper.getPagePoint(event)));\n }\n isOverEndHandle(event, target) {\n return Boolean(this.getHandleRect('end', event, target)?.contains(EventHelper.getPagePoint(event)));\n }\n getHandleRect(side, event, eventEl) {\n if (this.overItem) {\n eventEl = event.target.closest(`.${this.client.eventCls}`) || eventEl.querySelector(`.${this.client.eventCls}`);\n if (!eventEl) {\n return;\n }\n const\n me = this,\n start = side === 'start',\n { client } = me,\n rtl = Boolean(client.rtl),\n axis = me.dragLock,\n horizontal = axis === 'x',\n dim = horizontal ? 'width' : 'height',\n handleSpec = `${horizontal ? (start && !rtl) ? 'left' : 'right' : start ? 'top' : 'bottom'}Handle`,\n { offsetWidth } = eventEl,\n timespanRecord = client.resolveTimeSpanRecord(eventEl),\n resizable = timespanRecord?.isResizable,\n eventRect = Rectangle.from(eventEl),\n result = eventRect.clone(),\n handleStyle = globalThis.getComputedStyle(eventEl, ':before'),\n // Larger draggable zones on pure touch devices with no mouse\n touchHandleSize = (!me.handleSelector && !BrowserHelper.isHoverableDevice) ? me.touchHandleSize : undefined,\n handleSize = touchHandleSize || me.handleSize || parseFloat(handleStyle[dim]),\n handleVisThresh = me.handleVisibilityThreshold || 2 * me.handleSize,\n centerGap = me.dynamicHandleSize ? me.reservedSpace / 2 : 0,\n deflateArgs = [0, 0, 0, 0];\n // To decide if we are over a valid handle, we first check disabled state\n // Then this.leftHandle/this.rightHandle/this.topHandle/this.bottomHandle\n // Then whether there's enough event bar width to accommodate separate handles\n // Then whether the event itself allows resizing at the specified side.\n if (!me.disabled && me[handleSpec] && (offsetWidth >= handleVisThresh || me.dynamicHandleSize) && (resizable === true || resizable === side)) {\n const oppositeEnd = (!horizontal && !start) || (horizontal && (rtl === start));\n if (oppositeEnd) {\n // Push handle start point to other end and clip result to other end\n result[axis] += (eventRect[dim] - handleSize);\n deflateArgs[horizontal ? 3 : 0] = eventRect[dim] / 2 + centerGap;\n }\n else {\n deflateArgs[horizontal ? 1 : 2] = eventRect[dim] / 2 + centerGap;\n }\n // Deflate the event bar rectangle to encapsulate 2px less than the side's own half\n // so that we can constrain the handle zone to be inside its own half when bar is small.\n eventRect.deflate(...deflateArgs);\n result[dim] = handleSize;\n // Constrain handle rectangles to each side so that they can never collide.\n // Each handle is constrained into its own half.\n result.constrainTo(eventRect);\n // Zero sized handles cannot be hovered\n if (result[dim]) {\n return result;\n }\n }\n }\n }\n setupDragContext(event) {\n const me = this;\n // Only start a drag if we are over a handle zone.\n if (me.overItem && me.isOverAnyHandle(event, me.overItem) && me.isElementResizable(me.overItem, event)) {\n const result = super.setupDragContext(event);\n result.scrollManager = me.client.scrollManager;\n return result;\n }\n }\n changeHandleSize() {\n VersionHelper.deprecate('Scheduler', '6.0.0', 'Handle size is from CSS');\n }\n changeTouchHandleSize() {\n VersionHelper.deprecate('Scheduler', '6.0.0', 'Handle size is from CSS');\n }\n changeTip(tip, oldTip) {\n const me = this;\n if (!me.showTooltip) {\n return null;\n }\n if (tip) {\n if (tip.isTooltip) {\n tip.owner = me;\n }\n else {\n tip = Tooltip.reconfigure(oldTip, Tooltip.mergeConfigs({\n id : me.tipId\n }, tip, {\n getHtml : me.getTipHtml.bind(me),\n owner : me.client\n }, me.tip), {\n owner : me,\n defaults : {\n type : 'tooltip'\n }\n });\n }\n tip.ion({\n innerhtmlupdate : 'updateDateIndicator',\n thisObj : me\n });\n me.clockTemplate = new ClockTemplate({\n scheduler : me.client\n });\n }\n else if (oldTip) {\n oldTip.destroy();\n me.clockTemplate?.destroy();\n }\n return tip;\n }\n //endregion\n //region Events\n isElementResizable(element, event) {\n const\n me = this,\n { client } = me,\n timespanRecord = client.resolveTimeSpanRecord(element);\n if (client.readOnly) {\n return false;\n }\n let resizable = timespanRecord?.isResizable;\n // Not resizable if the mousedown is on a resizing handle of\n // a percent bar.\n const\n handleHoldingElement = element?.syncIdMap[client.scheduledEventName] ?? element,\n handleEl = event.target.closest('[class$=\"-handle\"]');\n if (!resizable || (handleEl && handleEl !== handleHoldingElement)) {\n return false;\n }\n element = event.target.closest(me.dragSelector);\n if (!element) {\n return false;\n }\n const\n startsOutside = element.classList.contains('b-sch-event-startsoutside'),\n endsOutside = element.classList.contains('b-sch-event-endsoutside');\n if (resizable === true) {\n if (startsOutside && endsOutside) {\n return false;\n }\n else if (startsOutside) {\n resizable = 'end';\n }\n else if (endsOutside) {\n resizable = 'start';\n }\n else {\n return me.isOverStartHandle(event, element) || me.isOverEndHandle(event, element);\n }\n }\n if (\n (startsOutside && resizable === 'start') ||\n (endsOutside && resizable === 'end')\n ) {\n return false;\n }\n if (\n (me.isOverStartHandle(event, element) && resizable === 'start') ||\n (me.isOverEndHandle(event, element) && resizable === 'end')\n ) {\n return true;\n }\n return false;\n }\n updateDateIndicator() {\n const\n { clockTemplate } = this,\n {\n eventRecord,\n draggingEnd,\n snappedDate\n } = this.dragging.context,\n startDate = draggingEnd ? eventRecord.get('startDate') : snappedDate,\n endDate = draggingEnd ? snappedDate : eventRecord.get('endDate'),\n { element } = this.tip;\n clockTemplate.updateDateIndicator(element.querySelector('.b-sch-tooltip-startdate'), startDate);\n clockTemplate.updateDateIndicator(element.querySelector('.b-sch-tooltip-enddate'), endDate);\n }\n getTooltipTarget({ itemElement, context }) {\n const\n me = this,\n { rtl } = me.client,\n target = Rectangle.from(itemElement, null, true);\n if (me.dragLock === 'x') {\n // Align to the dragged edge of the proxy, and then bump right so that the anchor aligns perfectly.\n if ((!rtl && context.edge === 'right') || (rtl && context.edge === 'left')) {\n target.x = target.right - 1;\n }\n else {\n target.x -= me.tip.anchorSize[0] / 2;\n }\n target.width = me.tip.anchorSize[0] / 2;\n }\n else {\n // Align to the dragged edge of the proxy, and then bump bottom so that the anchor aligns perfectly.\n if (context.edge === 'bottom') {\n target.y = target.bottom - 1;\n }\n target.height = me.tip.anchorSize[1] / 2;\n }\n return { target };\n }\n basicValidityCheck(context, event) {\n return context.startDate &&\n (context.endDate > context.startDate || this.allowResizeToZero) &&\n this.validatorFn.call(this.validatorFnThisObj || this, context, event);\n }\n //endregion\n //region Tooltip\n getTipHtml({ tip }) {\n const\n me = this,\n {\n startDate,\n endDate,\n toSet,\n snappedDate,\n valid,\n message = '',\n timespanRecord\n } = me.dragging.context;\n // Empty string hides the tip - we get called before the Resizer, so first call will be empty\n if (!startDate || !endDate) {\n return tip.html;\n }\n // Set whichever one we are moving\n const tipData = {\n record : timespanRecord,\n valid,\n message,\n startDate,\n endDate,\n [toSet] : snappedDate\n };\n // Format the two ends. This has to be done outside of the object initializer\n // because they use properties that are only in the tipData object.\n tipData.startText = me.client.getFormattedDate(tipData.startDate);\n tipData.endText = me.client.getFormattedDate(tipData.endDate);\n tipData.startClockHtml = me.clockTemplate.template({\n date : tipData.startDate,\n text : tipData.startText,\n cls : 'b-sch-tooltip-startdate'\n });\n tipData.endClockHtml = me.clockTemplate.template({\n date : tipData.endDate,\n text : tipData.endText,\n cls : 'b-sch-tooltip-enddate'\n });\n return me.tooltipTemplate(tipData);\n }\n //endregion\n //region Product specific, may be overridden in subclasses\n beginEventRecordBatch(eventRecord) {\n eventRecord.beginBatch();\n }\n cancelEventRecordBatch(eventRecord) {\n // Reverts the changes, a batchedUpdate event will fire which will reset the UI\n eventRecord.cancelBatch();\n }\n getBeforeResizeParams(context) {\n const { client } = this;\n return {\n resourceRecord : client.resolveResourceRecord(client.isVertical ? context.event : context.element)\n };\n }\n getResizeStartParams(context) {\n return {\n resourceRecord : context.resourceRecord\n };\n }\n getResizeEndParams(context) {\n return {\n resourceRecord : context.resourceRecord,\n event : context.event\n };\n }\n setupProductResizeContext(context, event) {\n const\n { client } = this,\n { element } = context,\n eventRecord = client.resolveEventRecord(element),\n resourceRecord = client.resolveResourceRecord?.(element),\n assignmentRecord = client.resolveAssignmentRecord?.(element);\n Object.assign(context, {\n eventRecord,\n taskRecord : eventRecord,\n resourceRecord,\n assignmentRecord,\n dateConstraints : client.getDateConstraints?.(resourceRecord, eventRecord)\n });\n }\n checkValidity({ startDate, endDate, eventRecord, resourceRecord }) {\n const { client } = this;\n if (!client.allowOverlap) {\n if (eventRecord.resources.some(resource => !client.isDateRangeAvailable(startDate, endDate, eventRecord, resource))) {\n return {\n valid : false,\n message : this.L('L{EventDrag.eventOverlapsExisting}')\n };\n }\n }\n return this.basicValidityCheck(...arguments);\n }\n get tipId() {\n return `${this.client.id}-event-resize-tip`;\n }\n //endregion\n}\nEventResize._$name = 'EventResize'; GridFeatureManager.registerFeature(EventResize, true, 'Scheduler');\nGridFeatureManager.registerFeature(EventResize, false, 'ResourceHistogram');\n", "import Base from '../../../Core/Base.js';\n/**\n * @module Scheduler/feature/mixin/TaskEditStm\n */\n/**\n * Mixin adding STM transactable behavior to TaskEdit feature.\n *\n * @mixin\n */\nexport default Target => class TaskEditStm extends (Target || Base) {\n static get $name() {\n return 'TaskEditStm';\n }\n getStmCapture() {\n return {\n stmInitiallyAutoRecord : this.stmInitiallyAutoRecord,\n stmInitiallyDisabled : this.stmInitiallyDisabled,\n // this flag indicates whether the STM capture has been transferred to\n // another feature, which will be responsible for finalizing the STM transaction\n // (otherwise we'll do it ourselves)\n transferred : false\n };\n }\n applyStmCapture(stmCapture) {\n this.stmInitiallyAutoRecord = stmCapture.stmInitiallyAutoRecord;\n this.stmInitiallyDisabled = stmCapture.stmInitiallyDisabled;\n }\n captureStm(startTransaction = false) {\n const\n me = this,\n project = me.project,\n stm = project.getStm();\n if (me.hasStmCapture) {\n return;\n }\n me.hasStmCapture = true;\n me.stmInitiallyDisabled = stm.disabled;\n me.stmInitiallyAutoRecord = stm.autoRecord;\n if (me.stmInitiallyDisabled) {\n stm.enable();\n // it seems this branch has never been exercised by tests\n // but the intention is to stop the auto-recording while\n // task editor is active (all editing is one manual transaction)\n stm.autoRecord = false;\n }\n else {\n if (me.stmInitiallyAutoRecord) {\n stm.autoRecord = false;\n }\n if (stm.isRecording) {\n stm.stopTransaction();\n }\n }\n if (startTransaction) {\n this.startStmTransaction();\n }\n }\n startStmTransaction() {\n this.project.getStm().startTransaction();\n }\n commitStmTransaction() {\n const\n me = this,\n stm = me.project.getStm();\n if (!me.hasStmCapture) {\n throw new Error('Does not have STM capture, no transaction to commit');\n }\n if (stm.enabled) {\n stm.stopTransaction();\n if (me.stmInitiallyDisabled) {\n stm.resetQueue();\n }\n }\n }\n async rejectStmTransaction() {\n const\n stm = this.project.getStm(),\n { client } = this;\n if (!this.hasStmCapture) {\n throw new Error('Does not have STM capture, no transaction to reject');\n }\n if (stm.enabled) {\n if (stm.transaction?.length) {\n client.suspendRefresh();\n stm.rejectTransaction();\n await client.resumeRefresh(true);\n }\n else {\n stm.stopTransaction();\n }\n }\n }\n enableStm() {\n this.project.getStm().enable();\n }\n disableStm() {\n this.project.getStm().disable();\n }\n async freeStm(commitOrReject = null) {\n const\n me = this,\n stm = me.project.getStm(),\n {\n stmInitiallyDisabled,\n stmInitiallyAutoRecord\n } = me;\n if (!me.hasStmCapture) {\n return;\n }\n let promise;\n me.rejectingStmTransaction = true;\n if (commitOrReject === true) {\n promise = me.commitStmTransaction();\n }\n else if (commitOrReject === false) {\n // Note - we don't wait for async to complete here\n promise = me.rejectStmTransaction();\n }\n await promise;\n if (!stm.isDestroying) {\n stm.disabled = stmInitiallyDisabled;\n stm.autoRecord = stmInitiallyAutoRecord;\n }\n if (!me.isDestroying) {\n me.rejectingStmTransaction = true;\n me.hasStmCapture = false;\n }\n };\n};\n", "import Base from '../../../Core/Base.js';\n/**\n * @module Scheduler/feature/mixin/TaskEditTransactional\n */\n/**\n * Mixin adding live updates support\n *\n * @mixin\n */\nexport default Target => class TaskEditTransactional extends (Target || Base) {\n static get $name() {\n return 'TaskEditTransactional';\n }\n captureStm(force) {\n if (this.client.transactionalFeaturesEnabled) {\n super.captureStm();\n return this.startStmTransaction(force);\n }\n else {\n super.captureStm(force);\n }\n }\n freeStm(commitOrReject) {\n if (this.hasStmCapture || !this.client.transactionalFeaturesEnabled) {\n return super.freeStm(commitOrReject);\n }\n }\n async startStmTransaction(startRecordingEarly) {\n if (this.client.transactionalFeaturesEnabled) {\n await this.startFeatureTransaction(startRecordingEarly);\n }\n else {\n super.startStmTransaction();\n }\n }\n commitStmTransaction() {\n if (this.client.transactionalFeaturesEnabled) {\n return this.finishFeatureTransaction();\n }\n else {\n super.commitStmTransaction();\n }\n }\n async rejectStmTransaction() {\n if (this.client.transactionalFeaturesEnabled) {\n this.rejectFeatureTransaction();\n }\n else {\n await super.rejectStmTransaction();\n }\n }\n};\n", "import Base from '../../../Core/Base.js';\nimport AttachToProjectMixin from '../../data/mixin/AttachToProjectMixin.js';\nimport IdHelper from '../../../Core/helper/IdHelper.js';\n/**\n * @module Scheduler/feature/mixin/TransactionalFeature\n */\n/**\n * Feature defining methods to lock the view for a time of a user action\n * @internal\n * @mixin\n */\nexport default Target => class TransactionalFeature extends AttachToProjectMixin(Target || Base) {\n static $name = 'TransactionalFeature';\n //#region AttachToProjectMixin implementation\n detachFromProject(project) {\n this.rejectFeatureTransaction();\n super.detachFromProject(project);\n }\n //#endregion\n getStmCapture() {\n const result = super.getStmCapture();\n result._editorPromiseResolve = this._editorPromiseResolve;\n return result;\n }\n applyStmCapture(stmCapture) {\n super.applyStmCapture(stmCapture);\n this._editorPromiseResolve = stmCapture._editorPromiseResolve;\n }\n async startFeatureTransaction() {\n if (!this.client.transactionalFeaturesEnabled) {\n return;\n }\n const\n me = this,\n { project } = me.client,\n { stm } = project,\n // This id is used to help debugging concurrent promises\n id = me._featureTransactionId = IdHelper.generateId('featureTransaction');\n me.client.trigger?.('beforeFeatureTransactionStart', { id });\n // Await previous promise chain to resolve\n let chainResolved;\n if (me.hasStmCapture) {\n stm.startTransaction();\n }\n else {\n chainResolved = project.queue(async() => {\n // commitAsync call will lead to `refresh` event on the project\n // and consequent view refresh, which we do not need\n if (!project.isEngineReady()) {\n await project.commitAsync();\n }\n });\n }\n project.queue(() => {\n if (!me.hasStmCapture) {\n me._stmInitiallyDisabled = stm.disabled;\n me._stmInitiallyAutoRecord = stm.autoRecord;\n if (stm.isRecording) {\n stm.stopTransaction();\n }\n else if (me._stmInitiallyDisabled) {\n stm.enable();\n }\n // Disable autoRecord to avoid finishing transaction after a timeout\n stm.autoRecord = false;\n }\n if (!stm.isRecording) {\n // We need to wrap cell editing into own transaction to be able to apply user changes last\n stm.startTransaction();\n }\n me.client.trigger?.('featureTransactionStart', { id });\n // Put an empty promise to the queue to pause it\n return new Promise(resolve => me._editorPromiseResolve = resolve);\n });\n await chainResolved;\n }\n rejectFeatureTransaction() {\n const\n me = this,\n { stm } = me.client.project,\n id = me._featureTransactionId;\n if (!id || me.finishingFeatureTransaction) {\n return;\n }\n me._editorPromiseResolve?.();\n me._editorPromiseResolve = null;\n delete me._featureTransactionId;\n stm.isRecording && stm.rejectTransaction();\n if (!me.hasStmCapture && me._stmInitiallyDisabled != null) {\n stm.disabled = me._stmInitiallyDisabled;\n stm.autoRecord = me._stmInitiallyAutoRecord;\n }\n me.client.trigger('featureTransactionReject', { id });\n me.client.trigger('featureTransactionComplete', { id });\n }\n async finishFeatureTransaction(afterApplyStashCallback) {\n const\n me = this,\n { project } = me.client,\n { stm } = project,\n id = me._featureTransactionId;\n if (!id) {\n return;\n }\n me.client.trigger('featureTransactionFinalizeStart', { id });\n me.finishingFeatureTransaction = true;\n // In case there is a commit pending, we need to wait to not suspend more events than we should\n if (!project.isEngineReady()) {\n await project.commitAsync();\n }\n const\n transactionId = stm.stash(),\n {\n _stmInitiallyDisabled,\n _stmInitiallyAutoRecord\n } = me;\n me._editorPromiseResolve?.();\n me._editorPromiseResolve = null;\n return project.queue(async() => {\n stm?.applyStash(transactionId);\n await afterApplyStashCallback?.();\n await project.commitAsync?.();\n if (stm.isRecording) {\n stm.stopTransaction();\n }\n if (!me.hasStmCapture && stm && !stm.isDestroying && _stmInitiallyDisabled != null) {\n stm.disabled = _stmInitiallyDisabled;\n stm.autoRecord = _stmInitiallyAutoRecord;\n }\n if (!me.isDestroying) {\n delete me._featureTransactionId;\n me.finishingFeatureTransaction = false;\n me.client.trigger('featureTransactionFinalized', { id });\n me.client.trigger('featureTransactionComplete', { id });\n }\n });\n }\n};\n", "import EventResize from '../EventResize.js';\nimport ObjectHelper from '../../../Core/helper/ObjectHelper.js';\nimport EventHelper from '../../../Core/helper/EventHelper.js';\nimport Draggable from '../../../Core/mixin/Draggable.js';\nimport TaskEditStm from '../mixin/TaskEditStm.js';\nimport TaskEditTransactional from '../mixin/TaskEditTransactional.js';\nimport TransactionalFeature from '../mixin/TransactionalFeature.js';\n/**\n * @module Scheduler/feature/base/DragCreateBase\n */\nconst getDragCreateDragDistance = function(event) {\n // Do not allow the drag to begin if the taskEdit feature (if present) is in the process\n // of canceling. We must wait for it to have cleaned up its data manipulations before\n // we can add the new, drag-created record\n if (this.source?.client.features.taskEdit?._canceling) {\n return false;\n }\n return EventHelper.getDistanceBetween(this.startEvent, event);\n};\n/**\n * Base class for EventDragCreate (Scheduler) and TaskDragCreate (Gantt) features. Contains shared code. Not to be used directly.\n *\n * @extends Scheduler/feature/EventResize\n */\nexport default class DragCreateBase extends EventResize.mixin(\n TaskEditStm,\n TransactionalFeature,\n TaskEditTransactional\n) {\n //region Config\n static configurable = {\n /**\n * true to show a time tooltip when dragging to create a new event\n * @config {Boolean}\n * @default\n */\n showTooltip : true,\n /**\n * Number of pixels the drag target must be moved before dragging is considered to have started. Defaults to 2.\n * @config {Number}\n * @default\n */\n dragTolerance : 2,\n // used by gantt to only allow one task per row\n preventMultiple : false,\n dragTouchStartDelay : 300,\n /**\n * `this` reference for the validatorFn\n * @config {Object}\n */\n validatorFnThisObj : null,\n tipTemplate : data => `\n \n ${data.startClockHtml}\n ${data.endClockHtml}\n \n
\n `,\n dragActiveCls : 'b-dragcreating'\n };\n static pluginConfig = {\n chain : ['render', 'onEventDataGenerated'],\n before : ['onElementContextMenu']\n };\n construct(scheduler, config) {\n if (config?.showTooltip === false) {\n config.tip = null;\n }\n super.construct(...arguments);\n }\n //endregion\n changeValidatorFn(validatorFn) {\n // validatorFn property is used by the EventResize base to validate each mousemove\n // We change the property name to createValidatorFn\n this.createValidatorFn = validatorFn;\n }\n render() {\n const\n me = this,\n { client } = me;\n // Set up elements and listeners\n me.dragRootElement = me.dropRootElement = client.timeAxisSubGridElement;\n // Drag only in time dimension\n me.dragLock = client.isVertical ? 'y' : 'x';\n }\n onDragEndSwitch(context) {\n const\n { client } = this,\n { enableEventAnimations } = client,\n {\n eventRecord,\n draggingEnd\n } = context,\n horizontal = this.dragLock === 'x',\n { initialDate } = this.dragging;\n // Setting the new opposite end should not animate\n client.enableEventAnimations = false;\n // Zero duration at the moment of the flip\n eventRecord.set({\n startDate : initialDate,\n endDate : initialDate\n });\n // We're switching to dragging the start\n if (draggingEnd) {\n Object.assign(context, {\n endDate : initialDate,\n toSet : 'startDate',\n otherEnd : 'endDate',\n setMethod : 'setStartDate',\n setOtherMethod : 'setEndDate',\n edge : horizontal ? 'left' : 'top'\n });\n }\n else {\n Object.assign(context, {\n startDate : initialDate,\n toSet : 'endDate',\n otherEnd : 'startDate',\n setMethod : 'setEndDate',\n setOtherMethod : 'setStartDate',\n edge : horizontal ? 'right' : 'bottom'\n });\n }\n context.draggingEnd = this.draggingEnd = !draggingEnd;\n client.enableEventAnimations = enableEventAnimations;\n }\n beforeDrag(drag) {\n const\n me = this,\n result = super.beforeDrag(drag),\n { pan, eventDragSelect } = me.client.features;\n // Superclass's handler may also veto\n if (result !== false && (\n // used by gantt to only allow one task per row\n (me.preventMultiple && !me.isRowEmpty(drag.rowRecord)) ||\n me.disabled ||\n // If Pan is enabled, it has right of way\n (pan && !pan.disabled) ||\n // If EventDragSelect is enabled, it has right of way\n (eventDragSelect && !eventDragSelect.disabled)\n )) {\n return false;\n }\n // Prevent drag select if drag-creating, could collide otherwise\n // (reset by GridSelection)\n me.client.preventDragSelect = true;\n return result;\n }\n startDrag(drag) {\n const result = super.startDrag(drag);\n // Returning false means operation is aborted.\n if (result !== false) {\n const { context } = drag;\n // Date to flip around when changing direction\n drag.initialDate = context.eventRecord.get(this.draggingEnd ? 'startDate' : 'endDate');\n this.client.trigger('dragCreateStart', {\n proxyElement : drag.element,\n eventElement : drag.element,\n eventRecord : context.eventRecord,\n resourceRecord : context.resourceRecord\n });\n // We are always dragging the exact edge of the event element.\n drag.context.offset = 0;\n drag.context.oldValue = drag.mousedownDate;\n }\n return result;\n }\n // Used by our EventResize superclass to know whether the drag point is the end or the beginning.\n isOverEndHandle() {\n return this.draggingEnd;\n }\n setupDragContext(event) {\n const { client } = this;\n // Only mousedown on an empty cell can initiate drag-create\n if (client.matchScheduleCell(event.target)) {\n const resourceRecord = client.resolveResourceRecord(event)?.$original;\n // And there must be a resource backing the cell.\n if (resourceRecord && !resourceRecord.isSpecialRow) {\n // Skip the EventResize's setupDragContext. We want the base one.\n const\n result = Draggable().prototype.setupDragContext.call(this, event),\n scrollables = [];\n if (client.isVertical) {\n scrollables.push({\n element : client.scrollable.element,\n direction : 'vertical'\n });\n }\n else {\n scrollables.push({\n element : client.timeAxisSubGrid.scrollable.element,\n direction : 'horizontal'\n });\n }\n result.scrollManager = client.scrollManager;\n result.monitoringConfig = { scrollables };\n result.resourceRecord = result.rowRecord = resourceRecord;\n // We use a special method to get the distance moved.\n // If the TaskEdit feature is still in its canceling phase, then\n // it returns false which inhibits the start of the drag-create\n // until the cancelation is complete.\n result.getDistance = getDragCreateDragDistance;\n return result;\n }\n }\n }\n async dragDrop({ context, event }) {\n // Set the start/end date, whichever we were dragging\n // to the correctly rounded value before updating.\n context[context.toSet] = context.snappedDate;\n const\n {\n client\n } = this,\n {\n startDate,\n endDate,\n eventRecord\n } = context,\n { generation } = eventRecord;\n let modified;\n this.tip?.hide();\n // Handle https://github.com/bryntum/support/issues/3210.\n // The issue arises when the mouseup arrives very quickly and the commit kicked off\n // at event add has not yet completed. If it now completes *after* we finalize\n // the drag, it will reset the event to its initial state.\n // If that commit has in fact finished, this will be a no-op\n await client.project.commitAsync();\n // If the above commit in fact reset the event back to the initial state, we have to\n // force the event rendering to bring it back to the currently known context state.\n if (eventRecord.generation !== generation) {\n context.eventRecord[context.toSet] = context.oldValue;\n context.eventRecord[context.toSet] = context[context.toSet];\n }\n context.valid = startDate && endDate && (endDate - startDate > 0) && // Input sanity check\n (context[context.toSet] - context.oldValue) && // Make sure dragged end changed\n context.valid !== false;\n if (context.valid) {\n // Seems to be a valid drag-create operation, ask outside world if anyone wants to take control over the finalizing,\n // to show a confirm dialog prior to finalizing the create.\n client.trigger('beforeDragCreateFinalize', {\n context,\n event,\n proxyElement : context.element,\n eventElement : context.element,\n eventRecord : context.eventRecord,\n resourceRecord : context.resourceRecord\n });\n modified = true;\n }\n // If a handler has set the async flag, it means that they are going to finalize\n // the operation at some time in the future, so we should not call it.\n if (!context.async) {\n await context.finalize(modified);\n }\n }\n updateDragTolerance(dragTolerance) {\n this.dragThreshold = dragTolerance;\n }\n //region Tooltip\n changeTip(tip, oldTip) {\n return super.changeTip(!tip || tip.isTooltip ? tip : ObjectHelper.assign({\n id : `${this.client.id}-drag-create-tip`\n }, tip), oldTip);\n }\n //endregion\n //region Finalize (create EventModel)\n // this method is actually called on the `context` object,\n // so `this` object inside might not be what you think (see `me = this.owner` below)\n // not clear what was the motivation for such design\n async finalize(doCreate) {\n // only call this method once, do not re-enter\n if (this.finalized) {\n return;\n }\n this.finalized = true;\n const\n me = this.owner,\n context = this,\n completeFinalization = () => {\n if (!me.isDestroyed) {\n me.client.trigger('afterDragCreate', {\n proxyElement : context.element,\n eventElement : context.element,\n eventRecord : context.eventRecord,\n resourceRecord : context.resourceRecord\n });\n me.cleanup(context);\n }\n };\n if (doCreate) {\n // Call product specific implementation\n await me.finalizeDragCreate(context);\n completeFinalization();\n }\n // Aborting without going ahead with create - we must deassign and remove the event\n else {\n await me.cancelDragCreate(context);\n me.onAborted?.(context);\n completeFinalization();\n }\n }\n async cancelDragCreate(context) {\n }\n async finalizeDragCreate(context) {\n // EventResize base class applies final changes to the event record\n await this.internalUpdateRecord(context, context.eventRecord);\n const stmCapture = this.getStmCapture();\n this.client?.trigger('dragCreateEnd', {\n eventRecord : context.eventRecord,\n resourceRecord : context.resourceRecord,\n event : context.event,\n eventElement : context.element,\n stmCapture\n });\n // Part of the Scheduler API. Triggered by its createEvent method.\n // Auto-editing features can use this to edit new events.\n // Note that this may be destroyed by a listener of the previous event.\n this.client?.trigger('eventAutoCreated', {\n eventRecord : context.eventRecord,\n resourceRecord : context.resourceRecord\n });\n return stmCapture.transferred;\n }\n cleanup(context) {\n const\n { client } = this,\n { eventRecord } = context;\n // Base class's cleanup is not called, we have to clear this flag.\n // The isCreating flag is only set if the event is to be handed off to the\n // eventEdit feature and that feature then has responsibility for clearing it.\n eventRecord.meta.isResizing = false;\n client.endListeningForBatchedUpdates();\n this.tip?.hide();\n client.element.classList.remove(...this.dragActiveCls.split(' '));\n context.element.parentElement.classList.remove('b-sch-dragcreating');\n }\n //endregion\n //region Events\n /**\n * Prevent right click when drag creating\n * @returns {Boolean}\n * @private\n */\n onElementContextMenu() {\n if (this.proxy) {\n return false;\n }\n }\n prepareCreateContextForFinalization(createContext, event, finalize, async = false) {\n return {\n ...createContext,\n async,\n event,\n finalize\n };\n }\n // Apply drag create \"proxy\" styling\n onEventDataGenerated(renderData) {\n if (this.dragging?.context?.eventRecord === renderData.eventRecord) {\n // Allow custom styling for drag creation element\n renderData.wrapperCls['b-sch-dragcreating'] = true;\n // Styling when drag create will be aborted on drop (because it would yield zero duration)\n renderData.wrapperCls['b-too-narrow'] = this.dragging.context.tooNarrow;\n }\n }\n //endregion\n //region Product specific, implemented in subclasses\n // Empty implementation here. Only base EventResize class triggers this\n triggerBeforeResize() {}\n // Empty implementation here. Only base EventResize class triggers this\n triggerEventResizeStart() {}\n checkValidity(context, event) {\n throw new Error('Implement in subclass');\n }\n handleBeforeDragCreate(dateTime, event) {\n throw new Error('Implement in subclass');\n }\n isRowEmpty(rowRecord) {\n throw new Error('Implement in subclass');\n }\n //endregion\n}\nDragCreateBase._$name = 'DragCreateBase';", "import InstancePlugin from '../../../Core/mixin/InstancePlugin.js';\nimport DateField from '../../../Core/widget/DateField.js';\nimport DateHelper from '../../../Core/helper/DateHelper.js';\nimport ObjectHelper from '../../../Core/helper/ObjectHelper.js';\nimport Config from '../../../Core/Config.js';\nimport Objects from '../../../Core/helper/util/Objects.js';\n/**\n * @module Scheduler/feature/base/EditBase\n */\nconst\n DH = DateHelper,\n scheduleFields = ['startDate', 'endDate', 'resource', 'recurrenceRule'],\n makeDate = (fields) => {\n // single field, update record directly\n if (fields.length === 1) return fields[0].value;\n // two fields, date + time\n else if (fields.length === 2) {\n const\n [date, time] = fields[0] instanceof DateField ? fields : fields.reverse(),\n dateValue = DH.parse(date.value);\n if (dateValue && time.value) {\n dateValue.setHours(\n time.value.getHours(),\n time.value.getMinutes(),\n time.value.getSeconds(),\n time.value.getMilliseconds()\n );\n }\n // Clone to not end up sharing dates\n return dateValue ? DateHelper.clone(dateValue) : null;\n }\n // shouldn't happen...\n return null;\n },\n copyTime = (dateTo, dateFrom) => {\n const d = new Date(dateTo.getTime());\n d.setHours(dateFrom.getHours(), dateFrom.getMinutes());\n return d;\n },\n adjustEndDate = (startDate, startTime, me) => {\n // The end datetime just moves in response to the changed start datetime, keeping the same duration.\n if (!me.editor.assigningValues && startDate && startTime && me.endDateField && me.endTimeField) {\n const newEndDate = DH.add(copyTime(me.startDateField.value, me.startTimeField.value), me._durationMS, 'milliseconds');\n me.endDateField.value = newEndDate;\n me.endTimeField.value = DH.clone(newEndDate);\n }\n };\n/**\n * Base class for EventEdit. Not to be used directly.\n *\n * @extends Core/mixin/InstancePlugin\n */\nexport default class EditBase extends InstancePlugin {\n //region Config\n static get configurable() {\n return {\n /**\n * True to save and close this panel if ENTER is pressed in one of the input fields inside the panel.\n * @config {Boolean}\n * @default\n * @category Editor\n */\n saveAndCloseOnEnter : true,\n triggerEvent : null,\n /**\n * This config parameter is passed to the `startDateField` and `endDateField` constructor.\n * @config {String}\n * @default\n * @category Editor widgets\n */\n dateFormat : 'L', // date format that uses browser locale\n /**\n * This config parameter is passed to the `startTimeField` and `endTimeField` constructor.\n * @config {String}\n * @default\n * @category Editor widgets\n */\n timeFormat : 'LT', // date format that uses browser locale\n /**\n * Default editor configuration, which widgets it shows etc.\n *\n * This is the entry point into configuring any aspect of the editor.\n *\n * The {@link Core.widget.Container#config-items} configuration of a Container\n * is *deeply merged* with its default `items` value. This means that you can specify\n * an `editorConfig` object which configures the editor, or widgets inside the editor:\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * eventEdit : {\n * editorConfig : {\n * autoClose : false,\n * modal : true,\n * cls : 'editor-widget-cls',\n * items : {\n * resourceField : {\n * hidden : true\n * },\n * // Add our own event owner field at the top of the form.\n * // Weight -100 will make it sort top the top.\n * ownerField : {\n * weight : -100,\n * type : 'usercombo',\n * name : 'owner',\n * label : 'Owner'\n * }\n * },\n * bbar : {\n * items : {\n * deleteButton : false\n * }\n * }\n * }\n * }\n * }\n * });\n * ```\n * @config {PopupConfig}\n * @category Editor\n */\n editorConfig : null,\n /**\n * An object to merge with the provided items config of the editor to override the\n * configuration of provided fields, or add new fields.\n *\n * To remove existing items, set corresponding keys to `null`:\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * eventEdit : {\n * items : {\n * // Merged with provided config of the resource field\n * resourceField : {\n * label : 'Calendar'\n * },\n * recurrenceCombo : null,\n * owner : {\n * weight : -100, // Will sort above system-supplied fields which are weight 0\n * type : 'usercombo',\n * name : 'owner',\n * label : 'Owner'\n * }\n * }\n * }\n * }\n * });\n *```\n *\n * The provided fields are called\n * - `nameField`\n * - `resourceField`\n * - `startDateField`\n * - `startTimeField`\n * - `endDateField`\n * - `endTimeField`\n * - `recurrenceCombo`\n * - `editRecurrenceButton`\n * @config {Object\n
\n `,\n baseCls : 'b-sch-timerange',\n /**\n * Function used to generate the HTML content for a time range header element.\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * timeRanges : {\n * headerRenderer({ timeRange }) {\n * return `${timeRange.name}`\n * }\n * }\n * }\n * });\n * ```\n *\n * @config {Function} headerRenderer\n * @param {Object} data Render data\n * @param {Scheduler.model.TimeSpan} data.timeRange\n * @returns {String} String representing the HTML markup\n *\n * @category Common\n */\n headerRenderer : null,\n /**\n * Function used to generate the HTML content for a time range body element.\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * timeRanges : {\n * bodyRenderer({ timeRange }) {\n * return `${timeRange.name}`\n * }\n * }\n * }\n * });\n * ```\n *\n * @config {Function} bodyRenderer\n * @param {Object} data Render data\n * @param {Scheduler.model.TimeSpan} data.timeRange\n * @returns {String} String representing the HTML markup\n *\n * @category Common\n */\n bodyRenderer : null,\n // a unique cls used by subclasses to get custom styling of the elements rendered\n cls : null,\n narrowThreshold : 80\n };\n }\n static configurable = {\n /**\n * Set to `false` to not render range elements into the time axis header\n * @prp {Boolean}\n * @default\n * @category Common\n */\n showHeaderElements : true\n };\n // Plugin configuration. This plugin chains some functions in Grid.\n static pluginConfig = {\n chain : [\n 'onInternalPaint',\n 'populateTimeAxisHeaderMenu',\n 'onSchedulerHorizontalScroll',\n 'afterScroll',\n 'onInternalResize'\n ]\n };\n //endregion\n //region Init & destroy\n construct(client, config) {\n const me = this;\n super.construct(client, config);\n if (client.isVertical) {\n client.ion({\n renderRows : me.onUIReady,\n thisObj : me,\n once : true\n });\n }\n // Add a unique cls used by subclasses to get custom styling of the elements rendered\n // This makes sure that each class only removed its own elements from the DOM\n me.cls = me.cls || `b-sch-${me.constructor.$$name.toLowerCase()}`;\n me.baseSelector = `.${me.baseCls}.${me.cls}`;\n // header elements are required for interaction\n if (me.enableResizing) {\n me.showHeaderElements = true;\n }\n }\n doDestroy() {\n const me = this;\n me.detachListeners('timeAxisViewModel');\n me.detachListeners('timeAxis');\n me.clockTemplate?.destroy();\n me.tip?.destroy();\n me.drag?.destroy();\n me.resize?.destroy();\n super.doDestroy();\n }\n doDisable(disable) {\n this.renderRanges();\n super.doDisable(disable);\n }\n setupTimeAxisViewModelListeners() {\n const me = this;\n me.detachListeners('timeAxisViewModel');\n me.detachListeners('timeAxis');\n me.client.timeAxisViewModel.ion({\n name : 'timeAxisViewModel',\n update : 'onTimeAxisViewModelUpdate',\n thisObj : me\n });\n me.client.timeAxis.ion({\n name : 'timeAxis',\n includeChange : 'renderRanges',\n thisObj : me\n });\n me.updateLineBuffer();\n }\n onUIReady() {\n const\n me = this,\n { client } = me;\n // If timeAxisViewModel is swapped, re-setup listeners to new instance\n client.ion({\n timeAxisViewModelChange : me.setupTimeAxisViewModelListeners,\n thisObj : me\n });\n me.setupTimeAxisViewModelListeners();\n if (!client.hideHeaders) {\n if (me.headerContainerElement) {\n EventHelper.on({\n click : me.onTimeRangeClick,\n dblclick : me.onTimeRangeClick,\n contextmenu : me.onTimeRangeClick,\n delegate : me.baseSelector,\n element : me.headerContainerElement,\n thisObj : me\n });\n }\n if (me.enableResizing) {\n me.drag = DragHelper.new({\n name : 'rangeDrag',\n lockX : client.isVertical,\n lockY : client.isHorizontal,\n constrain : true,\n outerElement : me.headerContainerElement,\n targetSelector : `${me.baseSelector}`,\n isElementDraggable : (el, event) => !client.readOnly && me.isElementDraggable(el, event),\n rtlSource : client,\n internalListeners : {\n dragstart : 'onDragStart',\n drag : 'onDrag',\n drop : 'onDrop',\n reset : 'onDragReset',\n abort : 'onInvalidDrop',\n thisObj : me\n }\n }, me.dragHelperConfig);\n me.resize = ResizeHelper.new({\n direction : client.mode,\n targetSelector : `${me.baseSelector}.b-sch-range`,\n outerElement : me.headerContainerElement,\n isElementResizable : (el, event) => !el.matches('.b-dragging,.b-readonly') && !event.target.matches('.b-fa'),\n internalListeners : {\n resizestart : 'onResizeStart',\n resizing : 'onResizeDrag',\n resize : 'onResize',\n cancel : 'onInvalidResize',\n reset : 'onResizeReset',\n thisObj : me\n }\n }, me.resizeHelperConfig);\n }\n }\n me.renderRanges();\n if (me.tooltipTemplate) {\n me.hoverTooltip = new Tooltip(ObjectHelper.assign({\n forElement : me.headerContainerElement,\n getHtml({ activeTarget }) {\n const timeRange = me.resolveTimeRangeRecord(activeTarget);\n return me.tooltipTemplate({ timeRange });\n },\n forSelector : `.b-timelinebase:not(.b-dragging-timerange, .b-resizing-timerange) .${me.baseCls}${me.cls ? ('.' + me.cls) : ''}`\n }, me.hoverTooltip));\n }\n }\n //endregion\n //region Draw\n refresh() {\n this._timeRanges = null;\n this.renderRanges();\n }\n getDOMConfig(startDate, endDate) {\n const\n me = this,\n bodyConfigs = [],\n headerConfigs = [];\n if (!me.disabled) {\n // clear label rotation map cache here, used to prevent height calculations for every timeRange entry to\n // speed up using recurrences\n me._labelRotationMap = {};\n for (const range of me.timeRanges) {\n const result = me.renderRange(range, startDate, endDate);\n if (result) {\n bodyConfigs.push(result.bodyConfig);\n headerConfigs.push(result.headerConfig);\n }\n }\n }\n return [bodyConfigs, headerConfigs];\n }\n renderRanges() {\n const\n me = this,\n { client } = me;\n // Scheduler/Gantt might not yet be rendered\n if (client.isPainted && !client.timeAxisSubGrid.collapsed) {\n const\n { headerContainerElement } = me,\n updatedBodyElements = [],\n [bodyConfigs, headerConfigs] = me.getDOMConfig();\n if (!me.bodyCanvas) {\n me.bodyCanvas = DomHelper.createElement({\n className : `b-timeranges-canvas b-timeranges-body-canvas ${me.cls}-canvas b-sch-canvas`,\n parent : client.timeAxisSubGridElement,\n retainElement : true\n });\n }\n DomSync.sync({\n targetElement : me.bodyCanvas,\n domConfig : {\n children : bodyConfigs,\n onlyChildren : true,\n syncOptions : {\n releaseThreshold : 0,\n syncIdField : 'id'\n }\n },\n callback : me.showHeaderElements ? null : ({\n targetElement,\n action\n }) => {\n // Might need to rotate label when not showing header elements\n if (action === 'reuseElement' || action === 'newElement' || action === 'reuseOwnElement') {\n // Collect all here, to not force reflows in the middle of syncing\n updatedBodyElements.push(targetElement);\n }\n }\n });\n if (me.showHeaderElements && !me.headerCanvas) {\n me.headerCanvas = DomHelper.createElement({\n className : `b-timeranges-canvas b-timeranges-header-canvas ${me.cls}-canvas`,\n parent : headerContainerElement,\n retainElement : true\n });\n }\n if (me.headerCanvas) {\n DomSync.sync({\n targetElement : me.headerCanvas,\n domConfig : {\n onlyChildren : true,\n children : headerConfigs,\n syncOptions : {\n releaseThreshold : 0,\n syncIdField : 'id'\n }\n }\n });\n }\n // Rotate labels last, to not force reflows. First check if rotation is needed\n for (const bodyElement of updatedBodyElements) {\n me.cacheRotation(bodyElement.elementData.timeRange, bodyElement);\n }\n // Then apply rotation\n for (const bodyElement of updatedBodyElements) {\n me.applyRotation(bodyElement.elementData.timeRange, bodyElement);\n }\n }\n }\n // Implement in subclasses\n get timeRanges() {\n return [];\n }\n /**\n * Based on this method result the feature decides whether the provided range should\n * be rendered or not.\n * The method checks that the range intersects the current viewport.\n *\n * Override the method to implement your custom range rendering vetoing logic.\n * @param {Scheduler.model.TimeSpan} range Range to render.\n * @param {Date} [startDate] Specifies view start date. Defaults to view visible range start\n * @param {Date} [endDate] Specifies view end date. Defaults to view visible range end\n * @returns {Boolean} `true` if the range should be rendered and `false` otherwise.\n */\n shouldRenderRange(\n range,\n startDate = this.client.visibleDateRange.startDate,\n endDate = this.client.visibleDateRange.endDate\n ) {\n const\n { timeAxis } = this.client,\n { startDate : rangeStart, endDate : rangeEnd, duration } = range;\n return Boolean(rangeStart && (timeAxis.isContinuous || timeAxis.isTimeSpanInAxis(range)) && DateHelper.intersectSpans(\n startDate,\n endDate,\n rangeStart,\n // Lines are included longer, to make sure label does not disappear\n duration ? rangeEnd : DateHelper.add(rangeStart, this._lineBufferDurationMS)\n ));\n }\n getRangeDomConfig(timeRange, minDate, maxDate, relativeTo = 0) {\n const\n me = this,\n { client } = me,\n { rtl } = client,\n startPos = client.getCoordinateFromDate(DateHelper.max(timeRange.startDate, minDate), {\n respectExclusion : true\n }) - relativeTo,\n endPos = timeRange.endDate ? client.getCoordinateFromDate(DateHelper.min(timeRange.endDate, maxDate), {\n respectExclusion : true,\n isEnd : true\n }) - relativeTo : startPos,\n size = Math.abs(endPos - startPos),\n isRange = size > 0,\n translateX = rtl ? `calc(${startPos}px - 100%)` : `${startPos}px`;\n return {\n className : {\n [me.baseCls] : 1,\n [me.cls] : me.cls,\n [me.rangeCls] : isRange,\n [me.lineCls] : !isRange,\n [timeRange.cls] : timeRange.cls,\n 'b-narrow-range' : isRange && size < me.narrowThreshold,\n 'b-readonly' : timeRange.readOnly,\n 'b-rtl' : rtl\n },\n dataset : {\n id : timeRange.id\n },\n elementData : {\n timeRange\n },\n style : client.isVertical\n ? `transform: translateY(${translateX}); ${isRange ? `height:${size}px` : ''};`\n : `transform: translateX(${translateX}); ${isRange ? `width:${size}px` : ''};`\n };\n }\n renderRange(timeRange, startDate, endDate) {\n const\n me = this,\n { client } = me,\n { timeAxis } = client;\n if (me.shouldRenderRange(timeRange, startDate, endDate) && timeAxis.startDate) {\n const\n config = me.getRangeDomConfig(timeRange, timeAxis.startDate, timeAxis.endDate),\n icon = timeRange.iconCls && StringHelper.xss``,\n name = timeRange.name && StringHelper.encodeHtml(timeRange.name),\n labelTpl = (name || icon) ? `${icon || ''}` : '',\n bodyConfig = {\n ...config,\n style : config.style + (timeRange.style || ''),\n html : me.bodyRenderer ? me.bodyRenderer({ timeRange }) : (me.showHeaderElements && !me.showLabelInBody ? '' : labelTpl)\n };\n let headerConfig;\n if (me.showHeaderElements) {\n headerConfig = {\n ...config,\n html : (me.headerRenderer ? me.headerRenderer({ timeRange }) : (me.showLabelInBody ? '' : labelTpl))\n };\n }\n return { bodyConfig, headerConfig };\n }\n }\n // Cache label rotation to not have to calculate for each occurrence when using recurring timeranges\n cacheRotation(range, bodyElement) {\n // Lines have no label. Do not check label content to do not force DOM layout!\n if ((!range.iconCls && !range.name) || !range.duration) {\n return;\n }\n const label = bodyElement.firstElementChild;\n if (label && !range.recurringTimeSpan) {\n this._labelRotationMap[range.id] = this.client.isVertical\n ? label.offsetHeight < bodyElement.offsetHeight\n : label.offsetWidth > bodyElement.offsetWidth;\n }\n }\n applyRotation(range, bodyElement) {\n const rotate = this._labelRotationMap[range.recurringTimeSpan?.id ?? range.id];\n bodyElement.firstElementChild?.classList.toggle('b-vertical', Boolean(rotate));\n }\n getBodyElementByRecord(idOrRecord) {\n const id = typeof idOrRecord === 'string' ? idOrRecord : idOrRecord?.id;\n return id != null && DomSync.getChild(this.bodyCanvas, id);\n }\n // Implement in subclasses\n resolveTimeRangeRecord(el) {}\n get headerContainerElement() {\n const\n me = this,\n { isVertical, timeView, timeAxisColumn } = me.client;\n if (!me._headerContainerElement) {\n // Render into the subGrid\u00B4s header element or the vertical timeaxis depending on mode\n if (isVertical && timeView.element) {\n me._headerContainerElement = timeView.element.parentElement;\n }\n else if (!isVertical) {\n me._headerContainerElement = timeAxisColumn.element;\n }\n }\n return me._headerContainerElement;\n }\n //endregion\n //region Settings\n get showHeaderElements() {\n return !this.client.hideHeaders && this._showHeaderElements;\n }\n updateShowHeaderElements(show) {\n const { client } = this;\n if (!this.isConfiguring) {\n client.element.classList.toggle('b-sch-timeranges-with-headerelements', Boolean(show));\n this.renderRanges();\n }\n }\n //endregion\n //region Menu items\n /**\n * Adds menu items for the context menu, and may mutate the menu configuration.\n * @param {Object} options Contains menu items and extra data retrieved from the menu target.\n * @param {Grid.column.Column} options.column Column for which the menu will be shown\n * @param {Object${StringHelper.encodeHtml(data.name) || ''}
\n ${data.startClockHtml}\n ${data.endClockHtml || ''}\n \n * | | | | | |\n * --+----+----+----*-------*---\n * --+=>Start +----*-------*--\n * --+----+----+----*-------*--\n * | | | | | |\n * | | | | | |\n * --*----*-+-------+-------+--\n * --*----*-+ End <=+--\n * --*----*-+-------+-------+--\n * | | | | | |\n *\n * Path goes by lines (-=) and turns at intersections (+), boxes depicted are adjusted by horizontal/vertical\n * margin and arrow margin, original boxes are smaller (path can't go at original box borders). Algorithm finds\n * the shortest path with minimum amount of turns. In short it's mix of \"Lee\" and \"Dijkstra pathfinding\"\n * with turns amount taken into account for distance calculation.\n *\n * The algorithm is not very performant though, it's O(N^2), where N is amount of\n * points in the grid, but since the maximum amount of points in the grid might be up to 34 (not 36 since\n * two box middle points are not permitted) that might be ok for now.\n *\n * @param {Object} lineDef An object containing any of the class configuration option overrides as well\n * as `startBox`, `endBox`, `startHorizontalMargin`, `startVerticalMargin`,\n * `endHorizontalMargin`, `endVerticalMargin` properties\n * @param {Object} lineDef.startBox An object containing `start`, `end`, `top`, `bottom` properties\n * @param {Object} lineDef.endBox An object containing `start`, `end`, `top`, `bottom` properties\n * @param {Number} lineDef.startHorizontalMargin Horizontal margin override for start box\n * @param {Number} lineDef.startVerticalMargin Vertical margin override for start box\n * @param {Number} lineDef.endHorizontalMargin Horizontal margin override for end box\n * @param {Number} lineDef.endVerticalMargin Vertical margin override for end box\n *\n *\n * @returns {Object[]|Boolean} Array of line segments or false if path cannot be found\n * @returns {Number} return.x1\n * @returns {Number} return.y1\n * @returns {Number} return.x2\n * @returns {Number} return.y2\n */\n //\n //@ignore\n //@privateparam {Function[]|Function} noPathFallbackFn\n // A function or array of functions which will be tried in case a path can't be found\n // Each function will be given a line definition it might try to adjust somehow and return.\n // The new line definition returned will be tried to find a path.\n // If a function returns false, then next function will be called if any.\n //\n findPath(lineDef, noPathFallbackFn) {\n const\n me = this,\n originalLineDef = lineDef;\n let lineDefFull,\n startBox,\n endBox,\n startShift,\n endShift,\n startSide,\n endSide,\n // startArrowSize,\n // endArrowSize,\n startArrowMargin,\n endArrowMargin,\n horizontalMargin,\n verticalMargin,\n startHorizontalMargin,\n startVerticalMargin,\n endHorizontalMargin,\n endVerticalMargin,\n otherHorizontalMargin,\n otherVerticalMargin,\n otherBoxes,\n connStartPoint, connEndPoint,\n pathStartPoint, pathEndPoint,\n gridStartPoint, gridEndPoint,\n startGridBox, endGridBox,\n grid, path, tryNum;\n noPathFallbackFn = ArrayHelper.asArray(noPathFallbackFn);\n for (tryNum = 0; lineDef && !path;) {\n lineDefFull = Object.assign(me.config, lineDef);\n startBox = lineDefFull.startBox;\n endBox = lineDefFull.endBox;\n startShift = lineDefFull.startShift;\n endShift = lineDefFull.endShift;\n startSide = lineDefFull.startSide;\n endSide = lineDefFull.endSide;\n // startArrowSize = lineDefFull.startArrowSize;\n // endArrowSize = lineDefFull.endArrowSize;\n startArrowMargin = lineDefFull.startArrowMargin;\n endArrowMargin = lineDefFull.endArrowMargin;\n horizontalMargin = lineDefFull.horizontalMargin;\n verticalMargin = lineDefFull.verticalMargin;\n startHorizontalMargin = lineDefFull.hasOwnProperty('startHorizontalMargin') ? lineDefFull.startHorizontalMargin : horizontalMargin;\n startVerticalMargin = lineDefFull.hasOwnProperty('startVerticalMargin') ? lineDefFull.startVerticalMargin : verticalMargin;\n endHorizontalMargin = lineDefFull.hasOwnProperty('endHorizontalMargin') ? lineDefFull.endHorizontalMargin : horizontalMargin;\n endVerticalMargin = lineDefFull.hasOwnProperty('endVerticalMargin') ? lineDefFull.endVerticalMargin : verticalMargin;\n otherHorizontalMargin = lineDefFull.hasOwnProperty('otherHorizontalMargin') ? lineDefFull.otherHorizontalMargin : horizontalMargin;\n otherVerticalMargin = lineDefFull.hasOwnProperty('otherVerticalMargin') ? lineDefFull.otherVerticalMargin : verticalMargin;\n otherBoxes = lineDefFull.otherBoxes;\n startSide = me.normalizeSide(startSide);\n endSide = me.normalizeSide(endSide);\n connStartPoint = me.getConnectionCoordinatesFromBoxSideShift(startBox, startSide, startShift);\n connEndPoint = me.getConnectionCoordinatesFromBoxSideShift(endBox, endSide, endShift);\n startGridBox = me.calcGridBaseBoxFromBoxAndDrawParams(startBox, startSide/*, startArrowSize*/, startArrowMargin, startHorizontalMargin, startVerticalMargin);\n endGridBox = me.calcGridBaseBoxFromBoxAndDrawParams(endBox, endSide/*, endArrowSize*/, endArrowMargin, endHorizontalMargin, endVerticalMargin);\n // Iterate over points and merge those which are too close to each other (e.g. if difference is less than one\n // over devicePixelRatio we won't even see this effect in GUI)\n // https://github.com/bryntum/support/issues/3923\n BOX_PROPERTIES.forEach(property => {\n // We're talking subpixel precision here, so it doesn't really matter which value we choose\n if (Math.abs(startGridBox[property] - endGridBox[property]) <= THRESHOLD) {\n endGridBox[property] = startGridBox[property];\n }\n });\n if (me.shouldLookForPath(startBox, endBox, startGridBox, endGridBox)) {\n otherBoxes = otherBoxes?.map(box =>\n me.calcGridBaseBoxFromBoxAndDrawParams(box, false/*, 0*/, 0, otherHorizontalMargin, otherVerticalMargin)\n );\n pathStartPoint = me.getConnectionCoordinatesFromBoxSideShift(startGridBox, startSide, startShift);\n pathEndPoint = me.getConnectionCoordinatesFromBoxSideShift(endGridBox, endSide, endShift);\n grid = me.buildPathGrid(startGridBox, endGridBox, pathStartPoint, pathEndPoint, startSide, endSide, otherBoxes);\n gridStartPoint = me.convertDecartPointToGridPoint(grid, pathStartPoint);\n gridEndPoint = me.convertDecartPointToGridPoint(grid, pathEndPoint);\n path = me.findPathOnGrid(grid, gridStartPoint, gridEndPoint, startSide, endSide);\n }\n // Loop if\n // - path is still not found\n // - have no next line definition (which should be obtained from call to one of the functions from noPathFallbackFn array\n // - have noPathFallBackFn array\n // - current try number is less then noPathFallBackFn array length\n for (lineDef = false; !path && !lineDef && noPathFallbackFn && tryNum < noPathFallbackFn.length; tryNum++) {\n lineDef = (noPathFallbackFn[tryNum])(lineDefFull, originalLineDef);\n }\n }\n if (path) {\n path = me.prependPathWithArrowStaffSegment(path, connStartPoint/*, startArrowSize*/, startSide);\n path = me.appendPathWithArrowStaffSegment(path, connEndPoint/*, endArrowSize*/, endSide);\n path = me.optimizePath(path);\n }\n return path;\n }\n // Compares boxes relative position in the given direction.\n // 0 - 1 is to the left/top of 2\n // 1 - 1 overlaps with left/top edge of 2\n // 2 - 1 is inside 2\n // -2 - 2 is inside 1\n // 3 - 1 overlaps with right/bottom edge of 2\n // 4 - 1 is to the right/bottom of 2\n static calculateRelativePosition(box1, box2, vertical = false) {\n const\n startProp = vertical ? 'top' : 'start',\n endProp = vertical ? 'bottom' : 'end';\n let result;\n if (box1[endProp] < box2[startProp]) {\n result = 0;\n }\n else if (box1[endProp] <= box2[endProp] && box1[endProp] >= box2[startProp] && box1[startProp] < box2[startProp]) {\n result = 1;\n }\n else if (box1[startProp] >= box2[startProp] && box1[endProp] <= box2[endProp]) {\n result = 2;\n }\n else if (box1[startProp] < box2[startProp] && box1[endProp] > box2[endProp]) {\n result = -2;\n }\n else if (box1[startProp] <= box2[endProp] && box1[endProp] > box2[endProp]) {\n result = 3;\n }\n else {\n result = 4;\n }\n return result;\n }\n // Checks if relative position of the original and marginized boxes is the same\n static boxOverlapChanged(startBox, endBox, gridStartBox, gridEndBox, vertical = false) {\n const\n calculateOverlap = RectangularPathFinder.calculateRelativePosition,\n originalOverlap = calculateOverlap(startBox, endBox, vertical),\n finalOverlap = calculateOverlap(gridStartBox, gridEndBox, vertical);\n return originalOverlap !== finalOverlap;\n }\n shouldLookForPath(startBox, endBox, gridStartBox, gridEndBox) {\n let result = true;\n // Only calculate overlap if boxes are narrow in horizontal direction\n if (\n // We refer to the original arrow margins because during lookup those might be nullified and we need some\n // criteria to tell if events are too narrow\n (startBox.end - startBox.start <= this.startArrowMargin || endBox.end - endBox.start <= this.endArrowMargin) &&\n Math.abs(RectangularPathFinder.calculateRelativePosition(startBox, endBox, true)) === 2\n ) {\n result = !RectangularPathFinder.boxOverlapChanged(startBox, endBox, gridStartBox, gridEndBox);\n }\n return result;\n }\n getConnectionCoordinatesFromBoxSideShift(box, side, shift) {\n let coords;\n // Note that we deal with screen geometry here, not logical dependency sides\n // Possible 'start' and 'end' have been resolved to box sides.\n switch (side) {\n case 'left':\n coords = {\n x : box.start,\n y : (box.top + box.bottom) / 2 + shift\n };\n break;\n case 'right':\n coords = {\n x : box.end,\n y : (box.top + box.bottom) / 2 + shift\n };\n break;\n case 'top':\n coords = {\n x : (box.start + box.end) / 2 + shift,\n y : box.top\n };\n break;\n case 'bottom':\n coords = {\n x : (box.start + box.end) / 2 + shift,\n y : box.bottom\n };\n break;\n }\n return coords;\n }\n calcGridBaseBoxFromBoxAndDrawParams(box, side/*, arrowSize*/, arrowMargin, horizontalMargin, verticalMargin) {\n let gridBox;\n switch (this.normalizeSide(side)) {\n case 'left':\n gridBox = {\n start : box.start - Math.max(/*arrowSize + */arrowMargin, horizontalMargin),\n end : box.end + horizontalMargin,\n top : box.top - verticalMargin,\n bottom : box.bottom + verticalMargin\n };\n break;\n case 'right':\n gridBox = {\n start : box.start - horizontalMargin,\n end : box.end + Math.max(/*arrowSize + */arrowMargin, horizontalMargin),\n top : box.top - verticalMargin,\n bottom : box.bottom + verticalMargin\n };\n break;\n case 'top':\n gridBox = {\n start : box.start - horizontalMargin,\n end : box.end + horizontalMargin,\n top : box.top - Math.max(/*arrowSize + */arrowMargin, verticalMargin),\n bottom : box.bottom + verticalMargin\n };\n break;\n case 'bottom':\n gridBox = {\n start : box.start - horizontalMargin,\n end : box.end + horizontalMargin,\n top : box.top - verticalMargin,\n bottom : box.bottom + Math.max(/*arrowSize + */arrowMargin, verticalMargin)\n };\n break;\n default:\n gridBox = {\n start : box.start - horizontalMargin,\n end : box.end + horizontalMargin,\n top : box.top - verticalMargin,\n bottom : box.bottom + verticalMargin\n };\n }\n return gridBox;\n }\n normalizeSide(side) {\n const { rtl } = this.client;\n side => sideToSide[side] || side;\n if (side === 'start') {\n return rtl ? 'right' : 'left';\n }\n if (side === 'end') {\n return rtl ? 'left' : 'right';\n }\n return side;\n }\n buildPathGrid(startGridBox, endGridBox, pathStartPoint, pathEndPoint, startSide, endSide, otherGridBoxes) {\n let xs, ys,\n y, x, ix, iy, xslen, yslen, ib, blen, box, permitted, point;\n const\n points = {},\n linearPoints = [];\n xs = [\n startGridBox.start,\n (startSide === 'left' || startSide === 'right') ? (startGridBox.start + startGridBox.end) / 2 : pathStartPoint.x,\n startGridBox.end,\n endGridBox.start,\n (endSide === 'left' || endSide === 'right') ? (endGridBox.start + endGridBox.end) / 2 : pathEndPoint.x,\n endGridBox.end\n ];\n ys = [\n startGridBox.top,\n (startSide === 'top' || startSide === 'bottom') ? (startGridBox.top + startGridBox.bottom) / 2 : pathStartPoint.y,\n startGridBox.bottom,\n endGridBox.top,\n (endSide === 'top' || endSide === 'bottom') ? (endGridBox.top + endGridBox.bottom) / 2 : pathEndPoint.y,\n endGridBox.bottom\n ];\n if (otherGridBoxes) {\n otherGridBoxes.forEach(box => {\n xs.push(box.start, (box.start + box.end) / 2, box.end);\n ys.push(box.top, (box.top + box.bottom) / 2, box.bottom);\n });\n }\n xs = [...new Set(xs.sort((a, b) => a - b))];\n ys = [...new Set(ys.sort((a, b) => a - b))];\n for (iy = 0, yslen = ys.length; iy < yslen; ++iy) {\n points[iy] = points[iy] || {};\n y = ys[iy];\n for (ix = 0, xslen = xs.length; ix < xslen; ++ix) {\n x = xs[ix];\n permitted = (\n (x <= startGridBox.start || x >= startGridBox.end || y <= startGridBox.top || y >= startGridBox.bottom) &&\n (x <= endGridBox.start || x >= endGridBox.end || y <= endGridBox.top || y >= endGridBox.bottom)\n );\n if (otherGridBoxes) {\n for (ib = 0, blen = otherGridBoxes.length; permitted && ib < blen; ++ib) {\n box = otherGridBoxes[ib];\n permitted = (x <= box.start || x >= box.end || y <= box.top || y >= box.bottom) ||\n // Allow point if it is a path start/end even if point is inside any box\n (x === pathStartPoint.x && y === pathStartPoint.y) ||\n (x === pathEndPoint.x && y === pathEndPoint.y);\n }\n }\n point = {\n distance : Number.MAX_SAFE_INTEGER,\n permitted,\n x,\n y,\n ix,\n iy\n };\n points[iy][ix] = point;\n linearPoints.push(point);\n }\n }\n return {\n width : xs.length,\n height : ys.length,\n xs,\n ys,\n points,\n linearPoints\n };\n }\n convertDecartPointToGridPoint(grid, point) {\n const\n x = grid.xs.indexOf(point.x),\n y = grid.ys.indexOf(point.y);\n return grid.points[y][x];\n }\n findPathOnGrid(grid, gridStartPoint, gridEndPoint, startSide, endSide) {\n const me = this;\n let path = false;\n if (gridStartPoint.permitted && gridEndPoint.permitted) {\n grid = me.waveForward(grid, gridStartPoint, 0);\n path = me.collectPath(grid, gridEndPoint, endSide);\n }\n return path;\n }\n // Returns neighbors from Von Neiman ambit (see Lee pathfinding algorithm description)\n getGridPointNeighbors(grid, gridPoint, predicateFn) {\n const\n ix = gridPoint.ix,\n iy = gridPoint.iy,\n result = [];\n let neighbor;\n // NOTE:\n // It's important to push bottom neighbors first since this method is used\n // in collectPath(), which recursively collects path from end to start node\n // and if bottom neighbors are pushed first in result array then collectPath()\n // will produce a line which is more suitable (pleasant looking) for our purposes.\n if (iy < grid.height - 1) {\n neighbor = grid.points[iy + 1][ix];\n (!predicateFn || predicateFn(neighbor)) && result.push(neighbor);\n }\n if (iy > 0) {\n neighbor = grid.points[iy - 1][ix];\n (!predicateFn || predicateFn(neighbor)) && result.push(neighbor);\n }\n if (ix < grid.width - 1) {\n neighbor = grid.points[iy][ix + 1];\n (!predicateFn || predicateFn(neighbor)) && result.push(neighbor);\n }\n if (ix > 0) {\n neighbor = grid.points[iy][ix - 1];\n (!predicateFn || predicateFn(neighbor)) && result.push(neighbor);\n }\n return result;\n }\n waveForward(grid, gridStartPoint, distance) {\n const me = this;\n // I use the WalkHelper here because a point on a grid and it's neighbors might be considered as a hierarchy.\n // The point is the parent node, and it's neighbors are the children nodes. Thus the grid here is hierarchical\n // data structure which can be walked. WalkHelper walks non-recursively which is exactly what I need as well.\n WalkHelper.preWalkUnordered(\n // Walk starting point - a node is a grid point and it's distance from the starting point\n [gridStartPoint, distance],\n // Children query function\n // NOTE: It's important to fix neighbor distance first, before waving to a neighbor, otherwise waving might\n // get through a neighbor point setting it's distance to a value more than (distance + 1) whereas we,\n // at the children querying moment in time, already know that the possibly optimal distance is (distance + 1)\n ([point, distance]) => me.getGridPointNeighbors(\n grid,\n point,\n neighborPoint => neighborPoint.permitted && (neighborPoint.distance > distance + 1)\n ).map(\n neighborPoint => [neighborPoint, distance + 1] // Neighbor distance fixation\n ),\n // Walk step iterator function\n ([point, distance]) => point.distance = distance // Neighbor distance applying\n );\n return grid;\n }\n collectPath(grid, gridEndPoint, endSide) {\n const\n me = this,\n path = [];\n let pathFound = true,\n neighbors,\n lowestDistanceNeighbor,\n xDiff, yDiff;\n while (pathFound && gridEndPoint.distance) {\n neighbors = me.getGridPointNeighbors(grid, gridEndPoint, point =>\n point.permitted && (point.distance === gridEndPoint.distance - 1)\n );\n pathFound = neighbors.length > 0;\n if (pathFound) {\n // Prefer turnless neighbors first\n neighbors = neighbors.sort((a, b) => {\n let xDiff, yDiff;\n xDiff = a.ix - gridEndPoint.ix;\n yDiff = a.iy - gridEndPoint.iy;\n const resultA = (\n ((endSide === 'left' || endSide === 'right') && yDiff === 0) ||\n ((endSide === 'top' || endSide === 'bottom') && xDiff === 0)\n ) ? -1 : 1;\n xDiff = b.ix - gridEndPoint.ix;\n yDiff = b.iy - gridEndPoint.iy;\n const resultB = (\n ((endSide === 'left' || endSide === 'right') && yDiff === 0) ||\n ((endSide === 'top' || endSide === 'bottom') && xDiff === 0)\n ) ? -1 : 1;\n if (resultA > resultB) return 1;\n if (resultA < resultB) return -1;\n // apply additional sorting to be sure to pick bottom path in IE\n if (resultA === resultB) return a.y > b.y ? -1 : a.y < b.y ? 1 : 0;\n });\n lowestDistanceNeighbor = neighbors[0];\n path.push({\n x1 : lowestDistanceNeighbor.x,\n y1 : lowestDistanceNeighbor.y,\n x2 : gridEndPoint.x,\n y2 : gridEndPoint.y\n });\n // Detecting new side, either xDiff or yDiff must be 0 (but not both)\n xDiff = lowestDistanceNeighbor.ix - gridEndPoint.ix;\n yDiff = lowestDistanceNeighbor.iy - gridEndPoint.iy;\n switch (true) {\n case !yDiff && xDiff > 0:\n endSide = 'left';\n break;\n case !yDiff && xDiff < 0:\n endSide = 'right';\n break;\n case !xDiff && yDiff > 0:\n endSide = 'top';\n break;\n case !xDiff && yDiff < 0:\n endSide = 'bottom';\n break;\n }\n gridEndPoint = lowestDistanceNeighbor;\n }\n }\n return pathFound && path.reverse() || false;\n }\n prependPathWithArrowStaffSegment(path, connStartPoint/*, startArrowSize*/, startSide) {\n if (path.length > 0) {\n const\n firstSegment = path[0],\n prependSegment = {\n x2 : firstSegment.x1,\n y2 : firstSegment.y1\n };\n switch (startSide) {\n case 'left':\n prependSegment.x1 = connStartPoint.x/* - startArrowSize*/;\n prependSegment.y1 = firstSegment.y1;\n break;\n case 'right':\n prependSegment.x1 = connStartPoint.x/* + startArrowSize*/;\n prependSegment.y1 = firstSegment.y1;\n break;\n case 'top':\n prependSegment.x1 = firstSegment.x1;\n prependSegment.y1 = connStartPoint.y/* - startArrowSize*/;\n break;\n case 'bottom':\n prependSegment.x1 = firstSegment.x1;\n prependSegment.y1 = connStartPoint.y/* + startArrowSize*/;\n break;\n }\n path.unshift(prependSegment);\n }\n return path;\n }\n appendPathWithArrowStaffSegment(path, connEndPoint/*, endArrowSize*/, endSide) {\n if (path.length > 0) {\n const\n lastSegment = path[path.length - 1],\n appendSegment = {\n x1 : lastSegment.x2,\n y1 : lastSegment.y2\n };\n switch (endSide) {\n case 'left':\n appendSegment.x2 = connEndPoint.x/* - endArrowSize*/;\n appendSegment.y2 = lastSegment.y2;\n break;\n case 'right':\n appendSegment.x2 = connEndPoint.x/* + endArrowSize*/;\n appendSegment.y2 = lastSegment.y2;\n break;\n case 'top':\n appendSegment.x2 = lastSegment.x2;\n appendSegment.y2 = connEndPoint.y/* - endArrowSize*/;\n break;\n case 'bottom':\n appendSegment.x2 = lastSegment.x2;\n appendSegment.y2 = connEndPoint.y/* + endArrowSize*/;\n break;\n }\n path.push(appendSegment);\n }\n return path;\n }\n optimizePath(path) {\n const optPath = [];\n let prevSegment,\n curSegment;\n if (path.length > 0) {\n prevSegment = path.shift();\n optPath.push(prevSegment);\n while (path.length > 0) {\n curSegment = path.shift();\n // both segments are as good as equal\n if (\n equalEnough(prevSegment.x1, curSegment.x1) && equalEnough(prevSegment.y1, curSegment.y1) &&\n equalEnough(prevSegment.x2, curSegment.x2) && equalEnough(prevSegment.y2, curSegment.y2)\n ) {\n prevSegment = curSegment;\n }\n // both segments are horizontal or very nearly so\n else if (equalEnough(prevSegment.y1, prevSegment.y2) && equalEnough(curSegment.y1, curSegment.y2)) {\n prevSegment.x2 = curSegment.x2;\n }\n // both segments are vertical or very nearly so\n else if (equalEnough(prevSegment.x1, prevSegment.x2) && equalEnough(curSegment.x1, curSegment.x2)) {\n prevSegment.y2 = curSegment.y2;\n }\n // segments have different orientation (path turn)\n else {\n optPath.push(curSegment);\n prevSegment = curSegment;\n }\n }\n }\n return optPath;\n }\n}\nRectangularPathFinder._$name = 'RectangularPathFinder';", "import DependencyModel from '../../model/DependencyModel.js';\nimport RectangularPathFinder from '../../util/RectangularPathFinder.js';\nimport DomHelper from '../../../Core/helper/DomHelper.js';\nimport ObjectHelper from '../../../Core/helper/ObjectHelper.js';\nimport Rectangle from '../../../Core/helper/util/Rectangle.js';\n// Determine a line segments drawing direction\nfunction drawingDirection(pointSet) {\n if (pointSet.x1 === pointSet.x2) {\n return pointSet.y2 > pointSet.y1 ? 'd' : 'u';\n }\n return pointSet.x2 > pointSet.x1 ? 'r' : 'l';\n}\n// Determine a line segments length\nfunction segmentLength(pointSet) {\n return pointSet.x1 === pointSet.x2 ? pointSet.y2 - pointSet.y1 : pointSet.x2 - pointSet.x1;\n}\n// Define an arc to tie two line segments together\nfunction arc(pointSet, nextPointSet, radius) {\n const\n corner = drawingDirection(pointSet) + drawingDirection(nextPointSet),\n // Flip x if this or next segment is drawn right to left\n rx = radius * (corner.includes('l') ? -1 : 1),\n // Flip y if this or next segment is drawn bottom to top\n ry = radius * (corner.includes('u') ? -1 : 1),\n // Positive (0) or negative (1) angle\n sweep = corner === 'ur' || corner === 'lu' || corner === 'dl' || corner === 'rd' ? 1 : 0;\n return `a${rx},${ry} 0 0 ${sweep} ${rx},${ry}`;\n}\n// Define a line for a set of points, tying it together with the next set with an arc when applicable\nfunction line(pointSet, nextPointSet, location, radius, prevRadius) {\n // Horizontal or vertical line\n let line = pointSet.x1 === pointSet.x2 ? 'v' : 'h',\n useRadius = radius;\n // Add an arc?\n if (radius) {\n const\n // Length of this line segment\n length = segmentLength(pointSet),\n // Length of the next one. Both are needed to determine max radius (half of the shortest delta)\n nextLength = nextPointSet ? Math.abs(segmentLength(nextPointSet)) : Number.MAX_SAFE_INTEGER,\n // Line direction\n sign = Math.sign(length);\n // If we are not passed a radius from the previous line drawn, we use the configured radius. It is used to shorten\n // this lines length to fit the arc that connects it to the previous line\n if (prevRadius == null) {\n prevRadius = radius;\n }\n // We cannot use a radius larger than half our or our successor's length, doing so would make the segment too long\n // when the arc is created\n if (Math.abs(length) < radius * 2 || nextLength < radius * 2) {\n useRadius = Math.min(Math.abs(length), nextLength) / 2;\n }\n const\n // Radius of neighbouring arcs, subtracted from length below...\n subtract = location === 'single' ? 0 : location === 'first' ? useRadius : location === 'between' ? prevRadius + useRadius : /*last*/ prevRadius,\n // ...to produce the length of the line segment to draw\n useLength = length - subtract * sign;\n // Apply line segment length, unless it passed over 0 in which case we stick to 0\n line += Math.sign(useLength) !== sign ? 0 : useLength;\n // Add an arc if applicable\n if (location !== 'last' && location !== 'single' && useRadius > 0) {\n line += ` ${arc(pointSet, nextPointSet, useRadius)}`;\n }\n }\n // Otherwise take a shorter code path\n else {\n line += segmentLength(pointSet);\n }\n return {\n line,\n currentRadius : radius !== useRadius ? useRadius : null\n };\n}\n// Define an SVG path base on points from the path finder.\n// Each segment in the path can be joined by an arc\nfunction pathMapper(radius, points) {\n const { length } = points;\n if (!length) {\n return '';\n }\n let currentRadius = null;\n return `M${points[0].x1},${points[0].y1} ${points.map((pointSet, i) => {\n // Segment placement among all segments, used to determine if an arc should be added\n const\n location =\n length === 1 ? 'single'\n : i === length - 1 ? 'last'\n : i === 0 ? 'first'\n : 'between',\n lineSpec = line(pointSet, points[i + 1], location, radius, currentRadius);\n ({ currentRadius } = lineSpec);\n return lineSpec.line;\n }).join(' ')}`;\n}\n// Mixin that holds the code needed to generate DomConfigs for dependency lines\nexport default Target => class DependencyLineGenerator extends Target {\n static $name = 'DependencyLineGenerator';\n lineCache = {};\n onSVGReady() {\n const me = this;\n me.pathFinder = new RectangularPathFinder({\n ...me.pathFinderConfig,\n client : me.client\n });\n me.lineDefAdjusters = me.createLineDefAdjusters();\n me.createMarker();\n }\n changeRadius(radius) {\n if (radius !== null) {\n ObjectHelper.assertNumber(radius, 'radius');\n }\n return radius;\n }\n resetAtRuntime() {\n if (!this.isConfiguring) {\n this.reset();\n }\n }\n updateRadius() {\n this.resetAtRuntime();\n }\n updateRenderer() {\n this.resetAtRuntime();\n }\n changeClickWidth(width) {\n if (width !== null) {\n ObjectHelper.assertNumber(width, 'clickWidth');\n }\n return width;\n }\n updateClickWidth() {\n this.resetAtRuntime();\n }\n updateDrawAroundParents() {\n this.resetAtRuntime();\n }\n //region Marker\n createMarker() {\n const\n me = this,\n { markerDef } = me,\n svg = this.client.svgCanvas,\n // SVG markers has to use an id, we want the id to be per scheduler when using multiple\n markerId = markerDef ? `${me.client.id}-arrowEnd` : 'arrowEnd';\n me.marker?.remove();\n svg.style.setProperty('--scheduler-dependency-marker', `url(#${markerId})`);\n me.marker = DomHelper.createElement({\n parent : svg,\n id : markerId, \n tag : 'marker',\n className : 'b-sch-dependency-arrow',\n ns : 'http://www.w3.org/2000/svg',\n markerHeight : 11,\n markerWidth : 11,\n refX : 8.5,\n refY : 3,\n viewBox : '0 0 9 6',\n orient : 'auto-start-reverse',\n markerUnits : 'userSpaceOnUse',\n retainElement : true,\n children : [{\n tag : 'path',\n ns : 'http://www.w3.org/2000/svg',\n d : me.markerDef ?? 'M3,0 L3,6 L9,3 z'\n }]\n });\n }\n updateMarkerDef() {\n if (!this.isConfiguring) {\n this.createMarker();\n }\n }\n //endregion\n //region DomConfig\n getAssignmentElement(assignment) {\n // If we are dragging an event, we need to use the proxy element\n // (which is not the original element if we are not constrained to timeline)\n const proxyElement = this.client.features.eventDrag?.getProxyElement?.(assignment);\n return proxyElement || this.client.getElementFromAssignmentRecord(assignment);\n }\n // Generate a DomConfig for a dependency line between two assignments (tasks in Gantt)\n getDomConfigs(dependency, fromAssignment, toAssignment, forceBoxes) {\n const\n me = this,\n key = me.getDependencyKey(dependency, fromAssignment, toAssignment),\n // Under certain circumstances (scrolling) we might be able to reuse the previous DomConfig.\n cached = me.lineCache[key];\n // Create line def if not cached, or we are live drawing and have event elements (dragging, transitioning etc)\n if (me.constructLineCache || !cached || forceBoxes || (me.drawingLive && (me.getAssignmentElement(fromAssignment) || me.getAssignmentElement(toAssignment)))) {\n const\n lineDef = me.prepareLineDef(dependency, fromAssignment, toAssignment, forceBoxes),\n points = lineDef && me.pathFinder.findPath(lineDef, me.lineDefAdjusters),\n {\n client,\n clickWidth\n } = me,\n { toEvent } = dependency;\n if (points) {\n const\n highlighted = me.highlighted.get(dependency),\n domConfig = {\n tag : 'path',\n ns : 'http://www.w3.org/2000/svg',\n d : pathMapper(me.radius ?? 0, points),\n role : 'presentation',\n dataset : {\n syncId : key,\n depId : dependency.id,\n fromId : fromAssignment.id,\n toId : toAssignment.id\n },\n elementData : {\n dependency,\n points\n },\n class : {\n [me.baseCls] : 1,\n [dependency.cls] : dependency.cls,\n // Data highlight\n [dependency.highlighted] : dependency.highlighted,\n // Feature highlight\n [highlighted && [...highlighted].join(' ')] : highlighted,\n [me.noMarkerCls] : lineDef.hideMarker,\n 'b-inactive' : dependency.active === false,\n 'b-sch-bidirectional-line' : dependency.bidirectional,\n 'b-readonly' : dependency.readOnly,\n // If target event is outside the view add special CSS class to hide marker (arrow)\n 'b-sch-dependency-ends-outside' :\n (!toEvent.milestone && (toEvent.endDate <= client.startDate || client.endDate <= toEvent.startDate)) ||\n (toEvent.milestone && (toEvent.endDate < client.startDate || client.endDate < toEvent.startDate))\n }\n };\n me.renderer?.({\n domConfig,\n points,\n dependencyRecord : dependency,\n fromAssignmentRecord : fromAssignment,\n toAssignmentRecord : toAssignment,\n fromBox : lineDef.startBox,\n toBox : lineDef.endBox,\n fromSide : lineDef.startSide,\n toSide : lineDef.endSide\n });\n const configs = [domConfig];\n if (clickWidth > 1) {\n configs.push({\n ...domConfig, // Shallow on purpose, to not waste perf cloning deeply\n class : {\n ...domConfig.class,\n 'b-click-area' : 1\n },\n dataset : {\n ...domConfig.dataset,\n syncId : `${domConfig.dataset.syncId}-click-area`\n },\n style : {\n strokeWidth : clickWidth\n }\n });\n }\n return me.lineCache[key] = configs;\n }\n // Nothing to draw or cache\n return me.lineCache[key] = null;\n }\n return cached;\n }\n //endregion\n //region Bounds\n // Generates `otherBoxes` config for rectangular path finder, which push dependency line to the row boundary.\n // It should be enough to return single box with top/bottom taken from row top/bottom and left/right taken from source\n // box, extended by start arrow margin to both sides.\n generateBoundaryBoxes(box, side) {\n // For fromSide top, we do not want to push dependency line to the row boundary.\n if (side === 'top') {\n return [];\n }\n // We need two boxes for the bottom edge, because otherwise path cannot be found. Ideally that shouldn't be\n // necessary. Other solution would be to adjust bottom by -1px, but that would make some dependency lines to take\n // 1px different path on a row boundary, which doesn't look nice (but slightly more performant)\n if (side === 'bottom') {\n return [\n {\n start : box.left,\n end : box.left + box.width / 2,\n top : box.rowTop,\n bottom : box.rowBottom\n },\n {\n start : box.left + box.width / 2,\n end : box.right,\n top : box.rowTop,\n bottom : box.rowBottom\n }\n ];\n }\n else {\n return [\n {\n start : box.left - this.pathFinder.startArrowMargin,\n end : box.right + this.pathFinder.startArrowMargin,\n top : box.rowTop,\n bottom : box.rowBottom\n }\n ];\n }\n }\n // Bounding box for an assignment, uses elements bounds if rendered\n getAssignmentBounds(assignment) {\n const\n { client } = this,\n element = this.getAssignmentElement(assignment);\n if (element && !client.isExporting) {\n const rectangle = Rectangle.from(element, this.relativeTo);\n if (client.isHorizontal) {\n let row = client.getRowById(assignment.resource.id);\n if (row) {\n // Outside its row? It is being dragged, resolve new row\n if (rectangle.y < row.top || rectangle.bottom > row.bottom) {\n const overRow = client.rowManager.getRowAt(rectangle.center.y, true);\n if (overRow) {\n row = overRow;\n }\n }\n rectangle.rowTop = row.top;\n rectangle.rowBottom = row.bottom;\n }\n else {\n return client.getAssignmentEventBox(assignment, true);\n }\n }\n return rectangle;\n }\n return client.isEngineReady && client.getAssignmentEventBox(assignment, true);\n }\n //endregion\n //region Sides\n getConnectorStartSide(timeSpanRecord) {\n return this.client.currentOrientation.getConnectorStartSide(timeSpanRecord);\n }\n getConnectorEndSide(timeSpanRecord) {\n return this.client.currentOrientation.getConnectorEndSide(timeSpanRecord);\n }\n getDependencyStartSide(dependency) {\n const { fromEvent, type, fromSide } = dependency;\n if (fromSide) {\n return fromSide;\n }\n switch (true) {\n case type === DependencyModel.Type.StartToEnd:\n case type === DependencyModel.Type.StartToStart:\n return this.getConnectorStartSide(fromEvent);\n case type === DependencyModel.Type.EndToStart:\n case type === DependencyModel.Type.EndToEnd:\n return this.getConnectorEndSide(fromEvent);\n default:\n // Default value might not be applied yet when rendering early in Pro / Gantt\n return this.getConnectorEndSide(fromEvent);\n }\n }\n getDependencyEndSide(dependency) {\n const { toEvent, type, toSide } = dependency;\n if (toSide) {\n return toSide;\n }\n // Fallback to view trait if dependency end side is not given /*or can be obtained from type*/\n switch (true) {\n case type === DependencyModel.Type.EndToEnd:\n case type === DependencyModel.Type.StartToEnd:\n return this.getConnectorEndSide(toEvent);\n case type === DependencyModel.Type.EndToStart:\n case type === DependencyModel.Type.StartToStart:\n return this.getConnectorStartSide(toEvent);\n default:\n // Default value might not be applied yet when rendering early in Pro / Gantt\n return this.getConnectorStartSide(toEvent);\n }\n }\n //endregion\n //region Line def\n // An array of functions used to alter path config when no path found.\n // It first tries to shrink arrow margins and secondly hides arrows entirely\n createLineDefAdjusters() {\n const { client } = this;\n function shrinkArrowMargins(lineDef) {\n const { barMargin } = client;\n if (lineDef.startArrowMargin > barMargin || lineDef.endArrowMargin > barMargin) {\n lineDef.startArrowMargin = lineDef.endArrowMargin = barMargin;\n return lineDef;\n }\n return false;\n }\n function resetArrowMargins(lineDef) {\n if (lineDef.startArrowMargin > 0 || lineDef.endArrowMargin > 0) {\n lineDef.startArrowMargin = lineDef.endArrowMargin = 0;\n return lineDef;\n }\n return false;\n }\n function shrinkHorizontalMargin(lineDef, originalLineDef) {\n if (lineDef.horizontalMargin > 2) {\n lineDef.horizontalMargin = 1;\n originalLineDef.hideMarker = true;\n return lineDef;\n }\n return false;\n }\n const adjusters = [\n shrinkArrowMargins,\n resetArrowMargins,\n shrinkHorizontalMargin\n ];\n // When using nested events, we first try calculating a new path by ignoring nested parent boxes\n if (client.features.nestedEvents?.enabled) {\n adjusters.unshift(lineDef => {\n if (lineDef.otherBoxes.length) {\n lineDef.otherBoxes.length = lineDef.otherBoxes.nestedStart;\n }\n return lineDef;\n });\n }\n return adjusters;\n }\n // Overridden in Gantt\n adjustLineDef(dependency, lineDef) {\n return lineDef;\n }\n // Prepare data to feed to the path finder\n prepareLineDef(dependency, fromAssignment, toAssignment, forceBoxes) {\n const\n me = this,\n startSide = me.getDependencyStartSide(dependency),\n endSide = me.getDependencyEndSide(dependency),\n startRectangle = forceBoxes?.from ?? me.getAssignmentBounds(fromAssignment),\n endRectangle = forceBoxes?.to ?? me.getAssignmentBounds(toAssignment),\n otherBoxes = [];\n if (!startRectangle || !endRectangle) {\n return null;\n }\n let {\n startArrowMargin,\n verticalMargin\n } = me.pathFinder;\n if (me.client.isHorizontal) {\n // Only add otherBoxes if assignments are in different resources\n if (startRectangle.rowTop != null && startRectangle.rowTop !== endRectangle.rowTop) {\n otherBoxes.push(...me.generateBoundaryBoxes(startRectangle, startSide));\n }\n // Generate other boxes for nested event parents if configured to do so\n if (me.client.features.nestedEvents?.enabled && me.drawAroundParents) {\n const\n { resourceStore } = me.client,\n fromResource = fromAssignment.resource,\n toResource = toAssignment.resource,\n fromIndex = resourceStore.indexOf(fromResource),\n toIndex = resourceStore.indexOf(toResource),\n minIndex = Math.min(fromIndex, toIndex),\n maxIndex = Math.max(fromIndex, toIndex);\n otherBoxes.nestedStart = otherBoxes.length;\n for (const assignment of me.client.assignmentStore) {\n // Ignore leaf assignments\n if (assignment !== fromAssignment && assignment !== toAssignment && assignment.event?.isParent && fromAssignment.event.parent !== assignment.event && toAssignment.event.parent !== assignment.event) {\n const currentIndex = resourceStore.indexOf(assignment.resource);\n // Only add otherBoxes for assignments whose row is intersected by the dependency line\n if (currentIndex >= minIndex && currentIndex <= maxIndex) {\n const assignmentBox = me.getAssignmentBounds(assignment).inflate(startArrowMargin);\n // Flag to allow ignoring if no path can be found\n assignmentBox.isNestedParent = true;\n otherBoxes.push(assignmentBox);\n }\n }\n }\n }\n // Do not change start arrow margin in case dependency is bidirectional\n if (!dependency.bidirectional) {\n if (/(top|bottom)/.test(startSide)) {\n startArrowMargin = me.client.barMargin / 2;\n }\n verticalMargin = me.client.barMargin / 2;\n }\n }\n return me.adjustLineDef(dependency, {\n startBox : startRectangle,\n endBox : endRectangle,\n otherBoxes,\n startArrowMargin,\n verticalMargin,\n otherVerticalMargin : 0,\n otherHorizontalMargin : 0,\n startSide,\n endSide\n });\n }\n //endregion\n //region Cache\n // All dependencies are about to be drawn, check if we need to build the line cache\n beforeDraw() {\n super.beforeDraw();\n if (!Object.keys(this.lineCache).length) {\n this.constructLineCache = true;\n }\n }\n // All dependencies are drawn, we no longer need to rebuild the cache\n afterDraw() {\n super.afterDraw();\n this.constructLineCache = false;\n }\n reset() {\n super.reset();\n this.lineCache = {};\n }\n //endregion\n};\n", "import DateHelper from '../../../Core/helper/DateHelper.js';\nimport Tooltip from '../../../Core/widget/Tooltip.js';\n/**\n * @module Scheduler/feature/mixin/DependencyTooltip\n */\nconst\n // Map dependency type to side of a box, for displaying an icon in the tooltip\n fromBoxSide = [\n 'start',\n 'start',\n 'end',\n 'end'\n ],\n toBoxSide = [\n 'start',\n 'end',\n 'start',\n 'end'\n ];\n/**\n * Mixin that adds tooltip support to the {@link Scheduler/feature/Dependencies} feature.\n * @mixin\n */\nexport default Target => class DependencyTooltip extends Target {\n static $name = 'DependencyTooltip';\n static configurable = {\n /**\n * Set to `true` to show a tooltip when hovering a dependency line\n * @config {Boolean}\n * @default\n * @category Dependency tooltip\n */\n showTooltip : true,\n /**\n * Set to `true` to show the lag in the tooltip\n * @config {Boolean}\n * @default\n */\n showLagInTooltip : false,\n /**\n * A template function allowing you to configure the contents of the tooltip shown when hovering a\n * dependency line. You can return either an HTML string or a {@link DomConfig} object.\n * @prp {Function} tooltipTemplate\n * @param {Scheduler.model.DependencyBaseModel} dependency The dependency record\n * @returns {String|DomConfig}\n * @category Dependency tooltip\n */\n tooltipTemplate(dependency) {\n const me = this;\n return {\n children : [{\n className : 'b-sch-dependency-tooltip',\n children : [\n { tag : 'label', text : me.L('L{Dependencies.from}') },\n { text : dependency.fromEvent.name },\n { className : `b-sch-box b-${dependency.fromSide || fromBoxSide[dependency.type]}` },\n { tag : 'label', text : me.L('L{Dependencies.to}') },\n { text : dependency.toEvent.name },\n { className : `b-sch-box b-${dependency.toSide || toBoxSide[dependency.type]}` },\n me.showLagInTooltip && { tag : 'label', text : me.L('L{DependencyEdit.Lag}') },\n me.showLagInTooltip && { text : `${dependency.lag || 0} ${DateHelper.getLocalizedNameOfUnit(dependency.lagUnit, dependency.lag !== 1)}` }\n ]\n }]\n };\n },\n /**\n * A tooltip config object that will be applied to the dependency hover tooltip. Can be used to for example\n * customize delay\n * @config {TooltipConfig}\n * @category Dependency tooltip\n */\n tooltip : {\n $config : 'nullify',\n value : {}\n }\n };\n changeTooltip(tooltip, old) {\n const me = this;\n old?.destroy();\n if (!me.showTooltip || !tooltip) {\n return null;\n }\n return Tooltip.new({\n align : 'b-t',\n id : `${me.client.id}-dependency-tip`,\n forSelector : `.b-timelinebase:not(.b-eventeditor-editing,.b-taskeditor-editing,.b-resizing-event,.b-dragcreating,.b-dragging-event,.b-creating-dependency) .${me.baseCls}`,\n forElement : me.client.timeAxisSubGridElement,\n showOnHover : true,\n hoverDelay : 0,\n hideDelay : 0,\n anchorToTarget : false,\n textContent : false, // Skip max-width setting\n trackMouse : false,\n getHtml : me.getHoverTipHtml.bind(me)\n }, tooltip);\n }\n /**\n * Generates DomConfig content for the tooltip shown when hovering a dependency\n * @param {Object} tooltipConfig\n * @returns {DomConfig} DomConfig used as tooltips content\n * @private\n */\n getHoverTipHtml({ activeTarget }) {\n return this.tooltipTemplate(this.resolveDependencyRecord(activeTarget));\n }\n};\n", "import DomSync from '../../Core/helper/DomSync.js';\nimport VersionHelper from '../../Core/helper/VersionHelper.js';\nimport Rectangle from '../../Core/helper/util/Rectangle.js';\nimport Delayable from '../../Core/mixin/Delayable.js';\nimport InstancePlugin from '../../Core/mixin/InstancePlugin.js';\nimport GridFeatureManager from '../../Grid/feature/GridFeatureManager.js';\nimport AttachToProjectMixin from '../data/mixin/AttachToProjectMixin.js';\nimport DependencyCreation from './mixin/DependencyCreation.js';\nimport DependencyGridCache from './mixin/DependencyGridCache.js';\nimport DependencyLineGenerator from './mixin/DependencyLineGenerator.js';\nimport DependencyTooltip from './mixin/DependencyTooltip.js';\nconst\n eventNameMap = {\n click : 'Click',\n dblclick : 'DblClick',\n contextmenu : 'ContextMenu'\n },\n emptyObject = Object.freeze({});\n/**\n * @module Scheduler/feature/Dependencies\n */\nconst collectLinkedAssignments = assignment => {\n const result = [assignment];\n if (assignment.resource?.hasLinks) {\n // Fake linked assignments\n result.push(...assignment.resource.$links.map(l => ({\n id : `${l.id}_${assignment.id}`,\n resource : l,\n event : assignment.event,\n drawDependencies : assignment.drawDependencies\n })));\n }\n return result;\n};\n/**\n * Feature that draws dependencies between events. Uses a {@link Scheduler.data.DependencyStore} to determine which\n * dependencies to draw, if none is defined one will be created automatically. Dependencies can also be specified as\n * `scheduler.dependencies`, see example below:\n *\n * {@inlineexample Scheduler/feature/Dependencies.js}\n *\n * Dependencies also work in vertical mode:\n *\n * {@inlineexample Scheduler/feature/DependenciesVertical.js}\n *\n * To customize the dependency tooltip, you can provide the {@link #config-tooltip} config and specify a\n * {@link Core.widget.Tooltip#config-getHtml} function. For example:\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * dependencies : {\n * tooltip : {\n * getHtml({ activeTarget }) {\n * const dependencyModel = scheduler.resolveDependencyRecord(activeTarget);\n *\n * if (!dependencyModel) return null;\n *\n * const { fromEvent, toEvent } = dependencyModel;\n *\n * return `${fromEvent.name} (${fromEvent.id}) -> ${toEvent.name} (${toEvent.id})`;\n * }\n * }\n * }\n * }\n * }\n * ```\n *\n * ## Styling dependency lines\n *\n * You can easily customize the arrows drawn between events. To change all arrows, apply the following basic SVG CSS:\n *\n * ```css\n * .b-sch-dependency {\n * stroke-width: 2;\n * stroke : red;\n * }\n *\n * .b-sch-dependency-arrow {\n * fill: red;\n * }\n * ```\n *\n * To style an individual dependency line, you can provide a [cls](#Scheduler/model/DependencyModel#field-cls) in your\n * data:\n *\n * ```json\n * {\n * \"id\" : 9,\n * \"from\" : 7,\n * \"to\" : 8,\n * \"cls\" : \"special-dependency\"\n * }\n * ```\n *\n * ```scss\n * // Make line dashed\n * .b-sch-dependency {\n * stroke-dasharray: 5, 5;\n * }\n * ```\n *\n * To customize the marker used for the lines (the arrow header), you can supply a SVG path definition to the\n * {@link #config-markerDef} config:\n *\n * {@inlineexample Scheduler/feature/DependenciesMarker.js}\n *\n * You can also specify a {@link #config-radius} to get lines with rounded \"corners\", for a less boxy look:\n *\n * {@inlineexample Scheduler/feature/DependenciesRadius.js}\n *\n * For advanced use cases, you can also manipulate the {@link DomConfig} used to create a dependency line in a\n * {@link #config-renderer} function.\n *\n * ## Adjusting terminals\n *\n * When hovering an event bar, terminals (connection points) for creating new dependencies are shown. By default, they\n * have a diameter of 12px and are positioned at the edge of the event bar. You can customize this by setting\n * {@link #config-terminalSize} and {@link #config-terminalOffset}. The example below uses larger terminals offset to\n * outside the event bar:\n *\n * {@inlineexample Scheduler/feature/DependenciesTerminals.js}\n *\n * This feature is **disabled** by default.\n * For info on enabling it, see {@link Grid.view.mixin.GridFeatures}.\n *\n * @demo Scheduler/dependencies\n *\n * @extends Core/mixin/InstancePlugin\n * @mixes Core/mixin/Delayable\n * @mixes Scheduler/feature/mixin/DependencyCreation\n * @mixes Scheduler/feature/mixin/DependencyTooltip\n * @classtype dependencies\n * @feature\n */\nexport default class Dependencies extends InstancePlugin.mixin(\n AttachToProjectMixin,\n Delayable,\n DependencyCreation,\n DependencyGridCache,\n DependencyLineGenerator,\n DependencyTooltip\n) {\n static $name = 'Dependencies';\n /**\n * Fired when dependencies are rendered\n * @on-owner\n * @event dependenciesDrawn\n */\n //region Config\n static configurable = {\n /**\n * The CSS class to add to a dependency line when hovering over it\n * @config {String}\n * @default\n * @private\n */\n overCls : 'b-sch-dependency-over',\n /**\n * The CSS class applied to dependency lines\n * @config {String}\n * @default\n * @private\n */\n baseCls : 'b-sch-dependency',\n /**\n * The CSS class applied to a too narrow dependency line (to hide markers)\n * @config {String}\n * @default\n * @private\n */\n noMarkerCls : 'b-sch-dependency-markerless',\n /**\n * SVG path definition used as marker (arrow head) for the dependency lines.\n * Should fit in a viewBox that is 9 x 6.\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * dependencies : {\n * // Circular marker\n * markerDef : 'M 2,3 a 3,3 0 1,0 6,0 a 3,3 0 1,0 -6,0'\n * }\n * }\n * });\n * ```\n *\n * @config {String}\n * @default 'M3,0 L3,6 L9,3 z'\n */\n markerDef : null,\n /**\n * Radius (in px) used to draw arcs where dependency line segments connect. Specify it to get a rounded look.\n * The radius will during drawing be reduced as needed on a per segment basis to fit lines.\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * dependencies : {\n * // Round the corner where line segments connect, similar to 'border-radius: 5px'\n * radius : 5\n * }\n * }\n * });\n * ```\n *\n *
Using a radius slightly degrades dependency rendering performance. If your app displays\n * a lot of dependencies, it might be worth taking this into account when deciding if you want to use radius\n * or not
\n *\n * @config {Number}\n */\n radius : null,\n /**\n * Renderer function, supply one if you want to manipulate the {@link DomConfig} object used to draw a\n * dependency line between two assignments.\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * dependencies : {\n * renderer({ domConfig, fromAssignmentRecord : from, toAssignmentRecord : to }) {\n * // Add a custom CSS class to dependencies between important assignments\n * domConfig.class.important = from.important || to.important;\n * domConfig.class.veryImportant = from.important && to.important;\n * }\n * }\n * }\n * }\n * ```\n *\n * @prp {Function}\n * @param {Object} renderData\n * @param {DomConfig} renderData.domConfig that will be used to create the dependency line, can be manipulated by the renderer\n * @param {Scheduler.model.DependencyModel} renderData.dependencyRecord The dependency being rendered\n * @param {Scheduler.model.AssignmentModel} renderData.fromAssignmentRecord Drawing line from this assignment\n * @param {Scheduler.model.AssignmentModel} renderData.toAssignmentRecord Drawing line to this assignment\n * @param {Object[]} renderData.points A collection of points making up the line segments for the dependency line.\n * Read-only in the renderer, any manipulation should be done to `domConfig`\n * @param {Core.helper.util.Rectangle} renderData.fromBox Bounds for the fromAssignment's element\n * @param {Core.helper.util.Rectangle} renderData.toBox Bounds for the toAssignment's element\n * @param {'top'|'right'|'bottom'|'left'} renderData.fromSide Drawn from this side of the fromAssignment\n * @param {'top'|'right'|'bottom'|'left'} renderData.toSide Drawn to this side of the fromAssignment\n * @returns {void}\n *\n * @category Rendering\n */\n renderer : null,\n /**\n * Specify `true` to highlight incoming and outgoing dependencies when hovering an event.\n * @prp {Boolean}\n */\n highlightDependenciesOnEventHover : null,\n /**\n * Specify `false` to prevent dependencies from being drawn during scroll, for smoother scrolling in schedules\n * with lots of dependencies. Dependencies will be drawn when scrolling stops instead.\n * @prp {Boolean}\n * @default\n */\n drawOnScroll : true,\n /**\n * The clickable/touchable width of the dependency line in pixels. Setting this to a number greater than 1 will\n * draw an invisible but clickable line along the same path as the dependency line, making it easier to click.\n * The tradeoff is that twice as many lines will be drawn, which can affect performance.\n * @prp {Number}\n */\n clickWidth : null,\n /**\n * By default, the refresh of dependencies is buffered by 10 milliseconds so that multiple changes\n * which may cause the dependency lines to become invalid are coalesced into one refresh. This is more\n * efficient, but may mean the dependency lines may lag behind expectations when moving a pointer.\n *\n * Set this to `true` to update dependency lines immediately upon any change which causes them\n * to require an update.\n * @prp {Boolean}\n * @default false\n * @private\n */\n immediateRefresh : null,\n /**\n * *Experimental* - This setting only applies when using dependencies with the nested events feature. In such\n * scenarios, enabling this config will cause the dependency lines to, when the algorithm determines it is\n * possible, be drawn around parent events, instead of through them.\n *\n * {@note}\n * Note that enabling this feature increases the complexity of dependency drawing, and it does have a negative\n * impact on performance.\n * {/@note}\n *\n * @prp {Boolean}\n */\n drawAroundParents : null\n };\n static delayable = {\n doRefresh : 10,\n rafRefresh : 'raf'\n };\n static get pluginConfig() {\n return {\n chain : ['render', 'onInternalPaint', 'onElementClick', 'onElementDblClick', 'onElementContextMenu', 'onElementMouseOver', 'onElementMouseOut', 'bindStore'],\n assign : ['getElementForDependency', 'getElementsForDependency', 'resolveDependencyRecord']\n };\n };\n domConfigs = new Map();\n drawingLive = false;\n lastScrollX = null;\n highlighted = new Map();\n // Cached lookups\n visibleResources = null;\n usingLinks = null;\n visibleDateRange = null;\n relativeTo = null;\n //endregion\n //region Init & destroy\n construct(client, config) {\n super.construct(client, config);\n const { scheduledEventName } = client;\n client.ion({\n svgCanvasCreated : 'onSVGReady',\n // These events trigger live refresh behaviour\n animationStart : 'refresh',\n // eventDrag in Scheduler, taskDrag in Gantt\n [scheduledEventName + 'DragStart'] : 'refresh',\n [scheduledEventName + 'DragAbort'] : 'refresh',\n [scheduledEventName + 'ResizeStart'] : 'refresh',\n [scheduledEventName + 'SegmentDragStart'] : 'refresh',\n [scheduledEventName + 'SegmentResizeStart'] : 'refresh',\n // These events shift the surroundings to such extent that grid cache needs rebuilding to be sure that\n // all dependencies are considered\n timelineViewportResize : 'reset',\n timeAxisViewModelUpdate : 'reset',\n toggleNode : 'reset',\n thisObj : this\n });\n client.rowManager.ion({\n refresh : 'reset', // For example when changing barMargin or rowHeight\n changeTotalHeight : 'reset', // For example when collapsing groups\n thisObj : this\n });\n this.bindStore(client.store);\n }\n doDisable(disable) {\n if (!this.isConfiguring) {\n // Need a flag to clear dependencies when disabled, since drawing is otherwise disabled too\n this._isDisabling = disable;\n this.draw();\n this._isDisabling = false;\n }\n super.doDisable(disable);\n }\n //endregion\n //region RefreshTriggers\n get rowStore() {\n return this.client.isVertical ? this.client.resourceStore : this.client.store;\n }\n // React to replacing or refreshing a display store\n bindStore(store) {\n const me = this;\n if (!me.client.isVertical) {\n me.detachListeners('store');\n if (me.client.usesDisplayStore) {\n store?.ion({\n name : 'store',\n refresh : 'onStoreRefresh',\n thisObj : me\n });\n me.reset();\n }\n }\n }\n onStoreRefresh() {\n this.reset();\n }\n attachToProject(project) {\n super.attachToProject(project);\n project?.ion({\n name : 'project',\n commitFinalized : 'reset',\n thisObj : this\n });\n }\n attachToResourceStore(resourceStore) {\n super.attachToResourceStore(resourceStore);\n resourceStore?.ion({\n name : 'resourceStore',\n change : 'onResourceStoreChange',\n refresh : 'onResourceStoreChange',\n thisObj : this\n });\n }\n onResourceStoreChange() {\n // Might have added or removed links, need to re-cache the flag\n this.usingLinks = null;\n this.reset();\n }\n attachToEventStore(eventStore) {\n super.attachToEventStore(eventStore);\n eventStore?.ion({\n name : 'eventStore',\n refresh : 'reset',\n thisObj : this\n });\n }\n attachToAssignmentStore(assignmentStore) {\n super.attachToAssignmentStore(assignmentStore);\n assignmentStore?.ion({\n name : 'assignmentStore',\n refresh : 'reset',\n thisObj : this\n });\n }\n attachToDependencyStore(dependencyStore) {\n super.attachToDependencyStore(dependencyStore);\n dependencyStore?.ion({\n name : 'dependencyStore',\n change : 'reset',\n refresh : 'reset',\n thisObj : this\n });\n }\n updateDrawOnScroll(drawOnScroll) {\n const me = this;\n me.detachListeners('scroll');\n if (drawOnScroll) {\n me.client.ion({\n name : 'scroll',\n scroll : 'doRefresh',\n horizontalScroll : 'onHorizontalScroll',\n prio : -100, // After Scheduler draws on scroll, since we target elements\n thisObj : me\n });\n }\n else {\n me.client.scrollable.ion({\n name : 'scroll',\n scrollEnd : 'draw',\n thisObj : me\n });\n me.client.timeAxisSubGrid.scrollable.ion({\n name : 'scroll',\n scrollEnd : 'draw',\n thisObj : me\n });\n }\n }\n onHorizontalScroll({ subGrid, scrollX }) {\n if (scrollX !== this.lastScrollX && subGrid === this.client.timeAxisSubGrid) {\n this.lastScrollX = scrollX;\n this.draw();\n }\n }\n onInternalPaint() {\n this.refresh();\n }\n //endregion\n //region Dependency types\n // Used by DependencyField\n static getLocalizedDependencyType(type) {\n return type ? this.L(`L{DependencyType.${type}}`) : '';\n }\n //endregion\n //region Elements\n getElementForDependency(dependency, fromAssignment, toAssignment) {\n return this.getElementsForDependency(dependency, fromAssignment, toAssignment)[0];\n }\n // NOTE: If we ever make this public we should change it to use the syncIdMap. Currently not needed since only\n // used in tests\n getElementsForDependency(dependency, fromAssignment, toAssignment) {\n // Selector targeting all instances of a dependency\n let selector = `[data-dep-id=\"${dependency.id}\"]`;\n // Optionally narrow it down to a single instance (assignment)\n if (fromAssignment) {\n selector += `[data-from-id=\"${fromAssignment.id}\"]`;\n }\n if (toAssignment) {\n selector += `[data-to-id=\"${toAssignment.id}\"]`;\n }\n return Array.from(this.client.svgCanvas.querySelectorAll(selector));\n }\n /**\n * Returns the dependency record for a DOM element\n * @param {HTMLElement} element The dependency line element\n * @returns {Scheduler.model.DependencyModel} The dependency record\n */\n resolveDependencyRecord(element) {\n return element.elementData?.dependency;\n }\n isDependencyElement(element) {\n return element.matches(`.${this.baseCls}`);\n }\n //endregion\n //region DOM Events\n onElementClick(event) {\n const dependency = this.resolveDependencyRecord(event.target);\n if (dependency) {\n const eventName = eventNameMap[event.type];\n /**\n * Fires on the owning Scheduler/Gantt when a context menu event is registered on a dependency line.\n * @event dependencyContextMenu\n * @on-owner\n * @param {Scheduler.view.Scheduler} source The scheduler\n * @param {Scheduler.model.DependencyModel} dependency\n * @param {MouseEvent} event\n */\n /**\n * Fires on the owning Scheduler/Gantt when a click is registered on a dependency line.\n * @event dependencyClick\n * @on-owner\n * @param {Scheduler.view.Scheduler} source The scheduler\n * @param {Scheduler.model.DependencyModel} dependency\n * @param {MouseEvent} event\n */\n /**\n * Fires on the owning Scheduler/Gantt when a double click is registered on a dependency line.\n * @event dependencyDblClick\n * @on-owner\n * @param {Scheduler.view.Scheduler} source The scheduler\n * @param {Scheduler.model.DependencyModel} dependency\n * @param {MouseEvent} event\n */\n this.client.trigger(`dependency${eventName}`, {\n dependency,\n event\n });\n }\n }\n onElementDblClick(event) {\n return this.onElementClick(event);\n }\n onElementContextMenu(event) {\n return this.onElementClick(event);\n }\n onElementMouseOver(event) {\n const\n me = this,\n dependency = me.resolveDependencyRecord(event.target);\n if (dependency) {\n /**\n * Fires on the owning Scheduler/Gantt when the mouse moves over a dependency line.\n * @event dependencyMouseOver\n * @on-owner\n * @param {Scheduler.view.Scheduler} source The scheduler\n * @param {Scheduler.model.DependencyModel} dependency\n * @param {MouseEvent} event\n */\n me.client.trigger('dependencyMouseOver', {\n dependency,\n event\n });\n if (me.overCls) {\n me.highlight(dependency);\n }\n }\n }\n onElementMouseOut(event) {\n const\n me = this,\n dependency = me.resolveDependencyRecord(event.target);\n if (dependency) {\n /**\n * Fires on the owning Scheduler/Gantt when the mouse moves out of a dependency line.\n * @event dependencyMouseOut\n * @on-owner\n * @param {Scheduler.view.Scheduler} source The scheduler\n * @param {Scheduler.model.DependencyModel} dependency\n * @param {MouseEvent} event\n */\n me.client.trigger('dependencyMouseOut', {\n dependency,\n event\n });\n if (me.overCls) {\n me.unhighlight(dependency);\n }\n }\n }\n //endregion\n //region Export\n // Export calls this fn to determine if a dependency should be included or not\n isDependencyVisible(dependency) {\n const\n me = this,\n { rowStore } = me,\n {\n fromEvent,\n toEvent\n } = dependency;\n // Bail out early in case source or target doesn't exist\n if (!fromEvent || !toEvent) {\n return false;\n }\n const\n fromResource = fromEvent.resource,\n toResource = toEvent.resource;\n // Verify these are real existing Resources and not collapsed away (resource not existing in resource store)\n if (!rowStore.isAvailable(fromResource) || !rowStore.isAvailable(toResource)) {\n return false;\n }\n return fromEvent.isModel &&\n !fromResource.instanceMeta(rowStore).hidden &&\n !toResource.instanceMeta(rowStore).hidden;\n }\n //endregion\n //region Highlight\n updateHighlightDependenciesOnEventHover(enable) {\n const me = this;\n if (enable) {\n const { client } = me;\n client.ion({\n name : 'highlightOnHover',\n [`${client.scheduledEventName}MouseEnter`] : params => me.highlightEventDependencies(params.eventRecord || params.taskRecord),\n [`${client.scheduledEventName}MouseLeave`] : params => me.unhighlightEventDependencies(params.eventRecord || params.taskRecord),\n thisObj : me\n });\n }\n else {\n me.detachListeners('highlightOnHover');\n }\n }\n highlight(dependency, cls = this.overCls) {\n let classes = this.highlighted.get(dependency);\n if (!classes) {\n this.highlighted.set(dependency, classes = new Set());\n }\n classes.add(cls);\n // Update element directly instead of refreshing and letting DomSync handle it,\n // to optimize highlight performance with many dependencies on screen\n for (const element of this.getElementsForDependency(dependency)) {\n element.classList.add(cls);\n }\n }\n unhighlight(dependency, cls = this.overCls) {\n const classes = this.highlighted?.get(dependency);\n if (classes) {\n classes.delete(cls);\n if (!classes.size) {\n this.highlighted.delete(dependency);\n }\n }\n // Update element directly instead of refreshing and letting DomSync handle it,\n // to optimize highlight performance with many dependencies on screen\n for (const element of this.getElementsForDependency(dependency)) {\n element.classList.remove(cls);\n }\n }\n highlightEventDependencies(timespan, cls) {\n timespan.dependencies.forEach(dep => this.highlight(dep, cls));\n }\n unhighlightEventDependencies(timespan, cls) {\n timespan.dependencies.forEach(dep => this.unhighlight(dep, cls));\n }\n //endregion\n //region Drawing\n // Implemented in DependencyGridCache to return dependencies that might intersect the current viewport and thus\n // should be considered for drawing. Fallback value here is used when there is no grid cache (which happens when it\n // is reset. Also useful in case we want to have it configurable or opt out automatically for small datasets)\n getDependenciesToConsider(startMS, endMS, startIndex, endIndex) {\n const { eventStore } = this.project;\n // Get records from grid cache\n return super.getDependenciesToConsider?.(startMS, endMS, startIndex, endIndex) ??\n // Falling back to using all valid deps (fix for not trying to draw conflicted deps)\n this.project.dependencyStore.records.filter(d => d.isValid && !eventStore.isFiltered || (eventStore.isAvailable(d.fromEvent) && eventStore.isAvailable(d.toEvent)));\n }\n // String key used as syncId\n getDependencyKey(dependency, fromAssignment, toAssignment) {\n return `dep:${dependency.id};from:${fromAssignment.id};to:${toAssignment.id}`;\n }\n drawDependency(dependency, batch = false, forceBoxes = null) {\n const\n me = this,\n {\n domConfigs,\n client,\n rowStore,\n topIndex,\n bottomIndex\n } = me,\n {\n useInitialAnimation\n } = client,\n { idMap } = rowStore,\n {\n startMS,\n endMS\n } = me.visibleDateRange,\n {\n fromEvent,\n toEvent\n } = dependency;\n let fromAssigned = fromEvent.assigned,\n toAssigned = toEvent.assigned;\n if (\n // No point in trying to draw dep between unscheduled/non-existing events\n fromEvent.isScheduled && toEvent.isScheduled &&\n // Or unassigned ones\n fromAssigned?.size && toAssigned?.size\n ) {\n // Add links, if used\n if (me.usingLinks) {\n fromAssigned = [...fromAssigned].flatMap(collectLinkedAssignments);\n toAssigned = [...toAssigned].flatMap(collectLinkedAssignments);\n }\n for (const from of fromAssigned) {\n for (const to of toAssigned) {\n const\n // Using direct lookup in idMap instead of indexOf() for performance.\n // Resource might be filtered out or not exist at all\n fromIndex = idMap[from.resource?.id]?.index,\n toIndex = idMap[to.resource?.id]?.index,\n fromDateMS = Math.min(fromEvent.startDateMS, toEvent.startDateMS),\n toDateMS = Math.max(fromEvent.endDateMS, toEvent.endDateMS);\n // Draw only if dependency intersects view, unless it is part of an export\n if (\n client.isExporting || fromIndex != null && toIndex != null &&\n (from.drawDependencies !== false && to.drawDependencies !== false) &&\n (rowStore.isAvailable(from.resource) && (rowStore.isAvailable(to.resource))) && !(\n // Both ends above view\n (fromIndex < topIndex && toIndex < topIndex) ||\n // Both ends below view\n (fromIndex > bottomIndex && toIndex > bottomIndex) ||\n // Both ends before view\n (fromDateMS < startMS && toDateMS < startMS) ||\n // Both ends after view\n (fromDateMS > endMS && toDateMS > endMS)\n )\n ) {\n const\n key = me.getDependencyKey(dependency, from, to),\n lineDomConfigs = me.getDomConfigs(dependency, from, to, forceBoxes);\n if (lineDomConfigs) {\n // Allow deps to match animation delay of their events (the bottommost one) when fading in\n if (useInitialAnimation) {\n lineDomConfigs[0].style = {\n animationDelay : `${Math.max(fromIndex, toIndex) / 20 * 1000}ms`\n };\n }\n domConfigs.set(key, lineDomConfigs);\n }\n // No room to draw a line\n else {\n domConfigs.delete(key);\n }\n }\n // Give mixins a shot at running code after a dependency is drawn. Used by grid cache to cache the\n // dependency (when needed)\n me.afterDrawDependency(dependency, fromIndex, toIndex, fromDateMS, toDateMS);\n }\n }\n }\n if (!batch) {\n me.domSync();\n }\n }\n // Hooks used by grid cache, to keep code in this file readable\n afterDrawDependency(dependency, fromIndex, toIndex, fromDateMS, toDateMS) {\n super.afterDrawDependency?.(dependency, fromIndex, toIndex, fromDateMS, toDateMS);\n }\n beforeDraw() {\n super.beforeDraw?.();\n }\n afterDraw() {\n super.afterDraw?.();\n }\n // Update DOM\n domSync(targetElement = this.client.svgCanvas, batch = false) {\n DomSync.sync({\n targetElement,\n domConfig : {\n onlyChildren : true,\n children : Array.from(this.domConfigs.values()).flat()\n },\n syncIdField : 'syncId',\n releaseThreshold : 0,\n strict : true,\n callback() {\n }\n });\n if (batch) {\n this.clearDomConfigs();\n }\n }\n fillDrawingCache() {\n const\n me = this,\n { client } = me;\n // Cache subgrid bounds for the duration of this draw call to not have to figure it out per dep\n me.relativeTo = Rectangle.from(client.svgCanvas);\n // Cache other lookups too\n me.visibleResources = client.visibleResources;\n me.visibleDateRange = client.visibleDateRange;\n me.topIndex = me.rowStore.indexOf(me.visibleResources.first);\n me.bottomIndex = me.rowStore.indexOf(me.visibleResources.last);\n // Cache link lookup, to avoid semi-expensive flatMap calls in drawDependency\n if (me.usingLinks == null) {\n me.usingLinks = client.resourceStore.some(r => r.hasLinks);\n }\n }\n clearDomConfigs() {\n this.domConfigs.clear();\n }\n // Draw all dependencies intersecting the current viewport immediately\n draw() {\n const\n me = this,\n { client } = me,\n { visibleDateRange } = client;\n if (client.refreshSuspended || !client.foregroundCanvas || !visibleDateRange || !client.isEngineReady || (me.disabled && !me._isDisabling) || client.isExporting) {\n return;\n }\n me.fillDrawingCache();\n me.clearDomConfigs();\n // Nothing to draw if there are no rows or no ticks or we are disabled\n if (client.firstVisibleRow && client.lastVisibleRow && client.timeAxis.count && !me.disabled &&\n (visibleDateRange.endMS - visibleDateRange.startMS > 0)\n ) {\n const\n {\n topIndex,\n bottomIndex\n } = me,\n dependencies = me.getDependenciesToConsider(visibleDateRange.startMS, visibleDateRange.endMS, topIndex, bottomIndex);\n // Give mixins a shot at doing something before deps are drawn. Used by grid cache to determine if\n // the cache should be rebuilt\n me.beforeDraw();\n for (const dependency of dependencies) {\n me.drawDependency(dependency, true);\n }\n // Give mixins a shot at doing something after all deps are drawn\n me.afterDraw();\n }\n me.domSync();\n client.trigger('dependenciesDrawn');\n }\n //endregion\n //region Refreshing\n // Performs a draw on next frame, not intended to be called directly, call refresh() instead\n doRefresh() {\n const\n me = this,\n { client } = me,\n { scheduledEventName, features } = client;\n me.draw();\n // Refresh each frame during animations, during dragging & resizing (if we have dependencies)\n me.drawingLive = client.dependencyStore.count &&\n (\n client.isAnimating || (client.useInitialAnimation && client.eventStore.count) ||\n features[`${scheduledEventName}Drag`]?.isActivelyDragging ||\n features[`${scheduledEventName}Drag`]?.isAborting ||\n features[`${scheduledEventName}Resize`]?.isResizing ||\n features[`${scheduledEventName}SegmentDrag`]?.isActivelyDragging ||\n features[`${scheduledEventName}SegmentResize`]?.isResizing\n );\n me.drawingLive && me.refresh(false, true);\n }\n rafRefresh() {\n this.doRefresh.now();\n }\n /**\n * Redraws dependencies on the next animation frame\n */\n refresh(immediateRefresh = this.immediateRefresh, rafRefresh = false) {\n const\n me = this,\n { client } = me;\n // Queue up a draw unless refresh is suspended.\n // immediateRefresh must be true to function because this method may be used as an event listener\n // so therefore may receive an event object as a sole parameter.\n if (!client.refreshSuspended && !me.disabled && client.isPainted && !client.timeAxisSubGrid.collapsed) {\n if (immediateRefresh) {\n me.doRefresh.now();\n }\n // When live updating, we want to refresh on frame to avoid lagging behind\n else if (rafRefresh) {\n me.rafRefresh();\n }\n else {\n me.doRefresh();\n }\n }\n }\n // Resets grid cache and performs a draw on next frame. Conditions when it should be called:\n // * Zooming\n // * Shifting time axis\n // * Resizing window\n // * CRUD\n // ...\n reset({ source, type } = emptyObject) {\n super.reset?.();\n // Refresh immediately if the timeline viewport is changing size\n this.refresh(source === this.client && type === 'timelineviewportresize');\n }\n /**\n * Draws all dependencies for the specified task.\n * @deprecated 5.1 The Dependencies feature was refactored and this fn is no longer needed\n */\n drawForEvent() {\n VersionHelper.deprecate('Scheduler', '6.0.0', 'Dependencies.drawForEvent() is no longer needed');\n this.refresh();\n }\n //endregion\n //region Scheduler hooks\n render() {\n // Pull in the svg canvas early, to have it available during drawing\n this.client.getConfig('svgCanvas');\n }\n //endregion\n}\nDependencies._$name = 'Dependencies'; GridFeatureManager.registerFeature(Dependencies, false, ['Scheduler', 'ResourceHistogram']);\n", "import Popup from '../../Core/widget/Popup.js';\n/**\n * @module Scheduler/view/DependencyEditor\n */\n/**\n * A dependency editor popup.\n *\n * @extends Core/widget/Popup\n * @private\n */\nexport default class DependencyEditor extends Popup {\n static get $name() {\n return 'DependencyEditor';\n }\n static get defaultConfig() {\n return {\n items : [],\n draggable : {\n handleSelector : ':not(button,.b-field-inner)' // blacklist buttons and field inners\n },\n axisLock : 'flexible'\n };\n }\n processWidgetConfig(widget) {\n const { dependencyEditFeature } = this;\n if (widget.ref === 'lagField' && !dependencyEditFeature.showLagField) {\n return false;\n }\n if (widget.ref === 'deleteButton' && !dependencyEditFeature.showDeleteButton) {\n return false;\n }\n return super.processWidgetConfig(widget);\n }\n afterShow(...args) {\n const { deleteButton } = this.widgetMap;\n // Only show delete button if the dependency record belongs to a store\n if (deleteButton) {\n deleteButton.hidden = !this.record.isPartOfStore();\n }\n super.afterShow(...args);\n }\n onInternalKeyDown(event) {\n this.trigger('keyDown', { event });\n super.onInternalKeyDown(event);\n }\n}\nDependencyEditor._$name = 'DependencyEditor';", "import GridFeatureManager from '../../Grid/feature/GridFeatureManager.js';\nimport ObjectHelper from '../../Core/helper/ObjectHelper.js';\nimport Rectangle from '../../Core/helper/util/Rectangle.js';\nimport '../../Core/widget/DisplayField.js';\nimport '../../Core/widget/DurationField.js';\nimport DependencyEditor from '../view/DependencyEditor.js';\nimport InstancePlugin from '../../Core/mixin/InstancePlugin.js';\nimport DependencyModel from '../model/DependencyModel.js';\nimport Duration from '../../Core/data/Duration.js';\n/**\n * @module Scheduler/feature/DependencyEdit\n */\n/**\n * Feature that displays a popup containing fields for editing a dependency. Requires the\n * {@link Scheduler.feature.Dependencies} feature to be enabled. Double-click a dependency line in the demo below to\n * show the editor.\n *\n * {@inlineexample Scheduler/feature/Dependencies.js}\n *\n * ## Customizing the built-in widgets\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * columns : [\n * { field : 'name', text : 'Name', width : 100 }\n * ],\n * features : {\n * dependencies : true,\n * dependencyEdit : {\n * editorConfig : {\n * items : {\n * // Custom label for the type field\n * typeField : {\n * label : 'Kind'\n * }\n * },\n *\n * bbar : {\n * items : {\n * // Hiding save button\n * saveButton : {\n * hidden : true\n * }\n * }\n * }\n * }\n * }\n * }\n * });\n * ```\n *\n * ## Built-in widgets\n *\n * | Widget ref | Type | Weight | Description |\n * |------------------------|-----------------------------------|--------|---------------------------|\n * | `fromNameField` | {@link Core.widget.DisplayField} | 100 | From task name (readonly) |\n * | `toNameField` | {@link Core.widget.DisplayField} | 200 | To task name (readonly) |\n * | `typeField` | {@link Core.widget.Combo} | 300 | Edit type |\n * | `lagField` | {@link Core.widget.DurationField} | 400 | Edit lag |\n *\n * The built-in buttons are:\n *\n * | Widget ref | Type | Weight | Description |\n * |------------------------|----------------------------|--------|-----------------------------------|\n * | `saveButton` | {@link Core.widget.Button} | 100 | Save button on the bbar |\n * | `deleteButton` | {@link Core.widget.Button} | 200 | Delete button on the bbar |\n * | `cancelButton` | {@link Core.widget.Button} | 300 | Cancel editing button on the bbar |\n *\n * This feature is **disabled** by default.\n * For info on enabling it, see {@link Grid.view.mixin.GridFeatures}.\n *\n * @extends Core/mixin/InstancePlugin\n * @demo Scheduler/dependencies\n * @classtype dependencyEdit\n * @feature\n */\nexport default class DependencyEdit extends InstancePlugin {\n //region Config\n static get $name() {\n return 'DependencyEdit';\n }\n static get configurable() {\n return {\n /**\n * True to hide this editor if a click is detected outside it (defaults to true)\n * @config {Boolean}\n * @default\n * @category Editor\n */\n autoClose : true,\n /**\n * True to save and close this panel if ENTER is pressed in one of the input fields inside the panel.\n * @config {Boolean}\n * @default\n * @category Editor\n */\n saveAndCloseOnEnter : true,\n /**\n * True to show a delete button in the form.\n * @config {Boolean}\n * @default\n * @category Editor widgets\n */\n showDeleteButton : true,\n /**\n * The event that shall trigger showing the editor. Defaults to `dependencydblclick`, set to empty string or\n * `null` to disable editing of dependencies.\n * @config {String}\n * @default\n * @category Editor\n */\n triggerEvent : 'dependencydblclick',\n /**\n * True to show the lag field for the dependency\n * @config {Boolean}\n * @default\n * @category Editor widgets\n */\n showLagField : false,\n dependencyRecord : null,\n /**\n * Default editor configuration, used to configure the Popup.\n * @config {PopupConfig}\n * @category Editor\n */\n editorConfig : {\n title : 'L{Edit dependency}',\n localeClass : this,\n closable : true,\n defaults : {\n localeClass : this\n },\n items : {\n /**\n * Reference to the source task name field\n * @member {Core.widget.DisplayField} fromNameField\n * @readonly\n */\n fromNameField : {\n type : 'display',\n weight : 100,\n label : 'L{From}'\n },\n /**\n * Reference to the target task name field\n * @member {Core.widget.DisplayField} toNameField\n * @readonly\n */\n toNameField : {\n type : 'display',\n weight : 200,\n label : 'L{To}'\n },\n /**\n * Reference to the dependency type field\n * @member {Core.widget.Combo} typeField\n * @readonly\n */\n typeField : {\n type : 'combo',\n weight : 300,\n label : 'L{Type}',\n name : 'type',\n editable : false,\n valueField : 'id',\n displayField : 'name',\n localizeDisplayFields : true,\n buildItems : function() {\n const dialog = this.parent;\n return Object.keys(DependencyModel.Type).map(type => ({\n id : DependencyModel.Type[type],\n name : dialog.L(type),\n localeKey : type\n }));\n }\n },\n /**\n * Reference to the lag field\n * @member {Core.widget.DurationField} lagField\n * @readonly\n */\n lagField : {\n type : 'duration',\n weight : 400,\n label : 'L{Lag}',\n name : 'lag',\n allowNegative : true,\n highlightExternalChange : false\n }\n },\n bbar : {\n defaults : {\n localeClass : this\n },\n items : {\n foo : {\n type : 'widget',\n cls : 'b-label-filler'\n },\n /**\n * Reference to the save button, if used\n * @member {Core.widget.Button} saveButton\n * @readonly\n */\n saveButton : {\n color : 'b-green',\n text : 'L{Save}'\n },\n /**\n * Reference to the delete button, if used\n * @member {Core.widget.Button} deleteButton\n * @readonly\n */\n deleteButton : {\n color : 'b-gray',\n text : 'L{Delete}'\n },\n /**\n * Reference to the cancel button, if used\n * @member {Core.widget.Button} cancelButton\n * @readonly\n */\n cancelButton : {\n color : 'b-gray',\n text : 'L{Object.Cancel}'\n }\n }\n }\n }\n };\n }\n //endregion\n //region Init & destroy\n construct(client, config) {\n const me = this;\n client.dependencyEdit = me;\n super.construct(client, config);\n if (!client.features.dependencies) {\n throw new Error('Dependencies feature required when using DependencyEdit');\n }\n me.clientListenersDetacher = client.ion({\n [me.triggerEvent] : me.onActivateEditor,\n thisObj : me\n });\n }\n doDestroy() {\n this.clientListenersDetacher();\n this.editor?.destroy();\n super.doDestroy();\n }\n //endregion\n //region Editing\n changeEditorConfig(config) {\n const\n me = this,\n { autoClose, cls, client } = me;\n return ObjectHelper.assign({\n owner : client,\n align : 'b-t',\n id : `${client.id}-dependency-editor`, \n autoShow : false,\n anchor : true,\n scrollAction : 'realign',\n constrainTo : globalThis,\n autoClose,\n cls\n }, config);\n }\n //endregion\n //region Save\n get isValid() {\n return Object.values(this.editor.widgetMap).every(field => {\n if (!field.name || field.hidden) {\n return true;\n }\n return field.isValid !== false;\n });\n }\n get values() {\n const values = {};\n this.editor.eachWidget(widget => {\n if (!widget.name || widget.hidden) return;\n values[widget.name] = widget.value;\n }, true);\n return values;\n }\n /**\n * Template method, intended to be overridden. Called before the dependency record has been updated.\n * @param {Scheduler.model.DependencyModel} dependencyRecord The dependency record\n *\n **/\n onBeforeSave(dependencyRecord) {}\n /**\n * Template method, intended to be overridden. Called after the dependency record has been updated.\n * @param {Scheduler.model.DependencyModel} dependencyRecord The dependency record\n *\n **/\n onAfterSave(dependencyRecord) {}\n /**\n * Updates record being edited with values from the editor\n * @private\n */\n updateRecord(dependencyRecord) {\n const { values } = this;\n // Engine does not understand { magnitude, unit } syntax\n if (values.lag) {\n values.lagUnit = values.lag.unit;\n values.lag = values.lag.magnitude;\n }\n // Type replaces fromSide/toSide, if they are used\n if ('type' in values) {\n dependencyRecord.fromSide != null && (values.fromSide = null);\n dependencyRecord.toSide != null && (values.toSide = null);\n }\n // Chronograph doesn't filter out undefined fields, it nullifies them instead\n // https://github.com/bryntum/chronograph/issues/11\n ObjectHelper.cleanupProperties(values, true);\n dependencyRecord.set(values);\n }\n //endregion\n //region Events\n onPopupKeyDown({ event }) {\n if (event.key === 'Enter' && this.saveAndCloseOnEnter && event.target.tagName.toLowerCase() === 'input') {\n // Need to prevent this key events from being fired on whatever receives focus after the editor is hidden\n event.preventDefault();\n this.onSaveClick();\n }\n }\n onHide() {\n if (!this.isApplyingChanges) {\n this.afterCancel();\n }\n }\n async onSaveClick() {\n const me = this;\n // hide event is triggered asynchronously, we should keep the flag raised until the end\n me.isApplyingChanges = true;\n if (await me.save()) {\n me.afterSave();\n await me.editor.hide();\n me.isApplyingChanges = false;\n }\n else {\n me.isApplyingChanges = false;\n }\n }\n async onDeleteClick() {\n const me = this;\n me.isApplyingChanges = true;\n if (await me.deleteDependency()) {\n me.afterDelete();\n }\n await me.editor.hide();\n me.isApplyingChanges = false;\n }\n onCancelClick() {\n this.editor.hide();\n }\n afterSave() {}\n afterDelete() {}\n afterCancel() {}\n //region Editing\n // Called from editDependency() to actually show the editor\n internalShowEditor(dependencyRecord) {\n const\n me = this,\n {\n client,\n lastPointerDown\n } = me,\n { dependencies } = client.features,\n editor = me.getEditor(dependencyRecord),\n targetElement = dependencies?.getElementForDependency(dependencyRecord) || lastPointerDown?.target || client.timeAxisSubGridElement,\n targetRect = Rectangle.from(targetElement);\n me.loadRecord(dependencyRecord);\n /**\n * Fires on the owning Scheduler or Gantt widget when the editor for a dependency is available, but before it is shown. Allows\n * manipulating fields before the widget is shown.\n * @event beforeDependencyEditShow\n * @on-owner\n * @param {Scheduler.view.Scheduler} source The scheduler or Gantt instance\n * @param {Scheduler.feature.DependencyEdit} dependencyEdit The dependencyEdit feature\n * @param {Scheduler.model.DependencyModel} dependencyRecord The record about to be shown in the editor.\n * @param {Core.widget.Popup} editor The editor popup\n */\n client.trigger('beforeDependencyEditShow', {\n dependencyEdit : me,\n dependencyRecord,\n editor\n });\n let alignSpec;\n if (lastPointerDown) {\n // offset props seem to be incorrect in SVG elements\n Object.defineProperties(lastPointerDown, {\n offsetX : { configurable : true, value : lastPointerDown.clientX - targetRect.x },\n offsetY : { configurable : true, value : lastPointerDown.clientY - targetRect.y }\n });\n alignSpec = {\n target : lastPointerDown,\n align : 't50-b0'\n };\n }\n else {\n alignSpec = {\n target : targetElement,\n align : 'c-c'\n };\n }\n const\n result = editor.showBy(alignSpec),\n labelled = [];\n // All of this measuring code can be removed when we transition to grid layout\n let labelWidth = 0;\n // Measure labels\n editor.eachWidget(widget => {\n const { labelElement, element } = widget;\n if (labelElement) {\n // Has top labels? Don't measure them (material)\n if (labelElement.getBoundingClientRect().top < element.getBoundingClientRect().top) {\n return false;\n }\n widget.labelWidth = null;\n labelWidth = Math.max(labelWidth, labelElement.offsetWidth);\n labelled.push(widget);\n }\n });\n // Match longest\n labelled.forEach(widget => widget.labelWidth = labelWidth);\n return result;\n }\n /**\n * Opens a popup to edit the passed dependency.\n * @param {Scheduler.model.DependencyModel} dependencyRecord The dependency to edit\n * @return {Promise} A Promise that yields `true` after the editor is shown\n * or `false` if some application logic vetoed the editing (see `beforeDependencyEdit` in the docs).\n */\n async editDependency(dependencyRecord) {\n const\n me = this,\n { client } = me;\n if (client.readOnly || dependencyRecord.readOnly ||\n /**\n * Fires on the owning Scheduler or Gantt widget before an dependency is displayed in the editor.\n * This may be listened for to allow an application to take over dependency editing duties. Return `false` to\n * stop the default editing UI from being shown or a `Promise` yielding `true` or `false` for async vetoing.\n * @event beforeDependencyEdit\n * @on-owner\n * @param {Scheduler.view.Scheduler} source The scheduler or Gantt instance\n * @param {Scheduler.feature.DependencyEdit} dependencyEdit The dependencyEdit feature\n * @param {Scheduler.model.DependencyModel} dependencyRecord The record about to be shown in the editor.\n * @preventable\n * @async\n */\n await client.trigger('beforeDependencyEdit', { dependencyEdit : me, dependencyRecord }) === false\n ) {\n return false;\n }\n // wait till the editor is shown\n await this.internalShowEditor(dependencyRecord);\n return true;\n }\n //endregion\n //region Save\n /**\n * Gets an editor instance. Creates on first call, reuses on consecutive\n * @internal\n * @returns {Scheduler.view.DependencyEditor} Editor popup\n */\n getEditor() {\n const me = this;\n let { editor } = me;\n if (editor) {\n return editor;\n }\n editor = me.editor = DependencyEditor.new({\n dependencyEditFeature : me,\n autoShow : false,\n anchor : true,\n scrollAction : 'realign',\n constrainTo : globalThis,\n autoClose : me.autoClose,\n cls : me.cls,\n rootElement : me.client.rootElement,\n internalListeners : {\n keydown : me.onPopupKeyDown,\n hide : me.onHide,\n thisObj : me\n }\n }, me.editorConfig);\n if (editor.items.length === 0) {\n console.warn('Editor configured without any `items`');\n }\n // assign widget refs\n editor.eachWidget(widget => {\n const ref = widget.ref || widget.id;\n // don't overwrite if already defined\n if (ref && !me[ref]) {\n me[ref] = widget;\n }\n });\n me.saveButton?.ion({ click : 'onSaveClick', thisObj : me });\n me.deleteButton?.ion({ click : 'onDeleteClick', thisObj : me });\n me.cancelButton?.ion({ click : 'onCancelClick', thisObj : me });\n return me.editor;\n }\n //endregion\n //region Delete\n /**\n * Sets fields values from record being edited\n * @private\n */\n loadRecord(dependency) {\n const me = this;\n me.fromNameField.value = dependency.fromEvent.name;\n me.toNameField.value = dependency.toEvent.name;\n if (me.lagField) {\n me.lagField.value = new Duration(dependency.lag, dependency.lagUnit);\n }\n me.editor.record = me.dependencyRecord = dependency;\n }\n //endregion\n //region Stores\n /**\n * Saves the changes (applies them to record if valid, if invalid editor stays open)\n * @private\n * @fires beforeDependencySave\n * @fires beforeDependencyAdd\n * @fires afterDependencySave\n * @returns {*}\n */\n async save() {\n const\n me = this,\n { client, dependencyRecord } = me;\n if (!dependencyRecord || !me.isValid) {\n return;\n }\n const { dependencyStore, values } = me;\n /**\n * Fires on the owning Scheduler or Gantt widget before a dependency is saved using the dependency edit popup\n * @event beforeDependencySave\n * @on-owner\n * @param {Scheduler.view.Scheduler} source The scheduler or Gantt instance\n * @param {Scheduler.model.DependencyModel} dependencyRecord The dependency about to be saved\n * @param {Object} values The new values\n * @preventable\n */\n if (client.trigger('beforeDependencySave', {\n dependencyRecord,\n values\n }) !== false) {\n me.onBeforeSave(dependencyRecord);\n me.updateRecord(dependencyRecord);\n // Check if this is a new record\n if (dependencyStore && !dependencyRecord.stores.length) {\n /**\n * Fires on the owning Scheduler or Gantt widget before a dependency is added from the dependency\n * edit popup\n * @event beforeDependencyAdd\n * @on-owner\n * @param {Scheduler.view.Scheduler} source The scheduler or Gantt instance\n * @param {Scheduler.feature.DependencyEdit} dependencyEdit The dependency edit feature\n * @param {Scheduler.model.DependencyModel} dependencyRecord The dependency about to be added\n * @preventable\n */\n if (client.trigger('beforeDependencyAdd', { dependencyRecord, dependencyEdit : me }) === false) {\n return;\n }\n dependencyStore.add(dependencyRecord);\n }\n await client.project?.commitAsync();\n /**\n * Fires on the owning Scheduler or Gantt widget after a dependency is successfully saved using the\n * dependency edit popup\n * @event afterDependencySave\n * @on-owner\n * @param {Scheduler.view.Scheduler} source The scheduler instance or Gantt instance\n * @param {Scheduler.model.DependencyModel} dependencyRecord The dependency about to be saved\n */\n client.trigger('afterDependencySave', { dependencyRecord });\n me.onAfterSave(dependencyRecord);\n }\n return dependencyRecord;\n }\n /**\n * Delete dependency being edited\n * @private\n * @fires beforeDependencyDelete\n */\n async deleteDependency() {\n const { client, editor, dependencyRecord } = this;\n /**\n * Fires on the owning Scheduler or Gantt widget before a dependency is deleted from the dependency\n * edit popup\n * @event beforeDependencyDelete\n * @on-owner\n * @param {Scheduler.view.Scheduler} source The scheduler instance\n * @param {Scheduler.model.DependencyModel} dependencyRecord The dependency record about to be deleted\n * @preventable\n */\n if (client.trigger('beforeDependencyDelete', { dependencyRecord }) !== false) {\n if (editor.containsFocus) {\n editor.revertFocus();\n }\n client.dependencyStore.remove(dependencyRecord);\n await client.project?.commitAsync();\n return true;\n }\n return false;\n }\n get dependencyStore() {\n return this.client.dependencyStore;\n }\n //endregion\n //region Events\n onActivateEditor({ dependency, event }) {\n if (!this.disabled) {\n this.lastPointerDown = event;\n this.editDependency(dependency);\n }\n }\n //endregion\n}\nDependencyEdit._$name = 'DependencyEdit'; GridFeatureManager.registerFeature(DependencyEdit, false);\n", "import DomHelper from '../../Core/helper/DomHelper.js';\nimport InstancePlugin from '../../Core/mixin/InstancePlugin.js';\nimport GridFeatureManager from '../../Grid/feature/GridFeatureManager.js';\nimport Delayable from '../../Core/mixin/Delayable.js';\n/**\n * @module Scheduler/feature/ScheduleContext\n */\n/**\n * Allow visually selecting a schedule \"cell\" by clicking, or {@link #config-triggerEvent any other pointer gesture}.\n *\n * This feature is **disabled** by default\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * // Configure as a truthy value to enable the feature\n * scheduleContext : {\n * triggerEvent : 'hover',\n * renderer : (context, element) => {\n * element.innerText = '\uD83D\uDE0E';\n * }\n * }\n * }\n * });\n * ```\n *\n * The contextual details are available in the {@link #property-context} property.\n *\n * **Note that the context is cleared upon change of {@link Scheduler.view.Scheduler#property-viewPreset}\n * such as when zooming in or out.**\n *\n * {@inlineexample Scheduler/feature/ScheduleContext.js}\n *\n * @extends Core/mixin/InstancePlugin\n * @classtype scheduleContext\n * @feature\n */\nexport default class ScheduleContext extends InstancePlugin.mixin(Delayable) {\n static get $name() {\n return 'ScheduleContext';\n }\n static delayable = {\n syncContextElement : 'raf'\n };\n static configurable = {\n /**\n * The pointer event type to use to update the context. May be `'hover'` to highlight the\n * tick context when moving the mouse across the timeline.\n * @config {'click'|'hover'|'contextmenu'|'mousedown'}\n * @default\n */\n triggerEvent : 'click',\n /**\n * A function (or the name of a function) which may mutate the contents of the context overlay\n * element which tracks the active resource/tick context.\n *\n * @config {String|Function}\n * @param {TimelineContext} context The context being highlighted.\n * @param {HTMLElement} element The context highlight element. This will be empty each time.\n * @returns {void}\n */\n renderer : null,\n /**\n * The active context.\n * @member {TimelineContext} timelineContext\n * @readonly\n */\n context : {\n $config : {\n // Reject non-changes so that when using mousemove, we only update the context\n // when it changes.\n equal(c1, c2) {\n return c1?.index === c2?.index &&\n c1?.tickParentIndex === c2?.tickParentIndex &&\n !((c1?.tickStartDate || 0) - (c2?.tickStartDate || 0));\n }\n }\n }\n };\n /**\n * The contextual information about which cell was clicked on and highlighted.\n *\n * When the {@link Scheduler.view.Scheduler#property-viewPreset} is changed (such as when zooming)\n * the context is cleared and the highlight is removed.\n *\n * @member {Object} context\n * @property {Scheduler.view.TimelineBase} context.source The owning Scheduler\n * @property {Date} context.date Date at mouse position\n * @property {Scheduler.model.TimeSpan} context.tick A record which encapsulates the time axis tick clicked on.\n * @property {Number} context.tickIndex The index of the time axis tick clicked on.\n * @property {Date} context.tickStartDate The start date of the current time axis tick\n * @property {Date} context.tickEndDate The end date of the current time axis tick\n * @property {Grid.row.Row} context.row Clicked row (in horizontal mode only)\n * @property {Number} context.index Index of clicked resource\n * @property {Scheduler.model.ResourceModel} context.resourceRecord Resource record\n * @property {MouseEvent} context.event Browser event\n */\n construct(client, config) {\n super.construct(client, config);\n const\n { triggerEvent } = this,\n listeners = {\n datachange : 'syncContextElement',\n timeaxisviewmodelupdate : 'onTimeAxisViewModelUpdate',\n presetchange : 'clearContext',\n thisObj : this\n };\n // If mousemove is our trigger, we cab use the client's timelineContextChange event\n if (triggerEvent === 'mouseover') {\n listeners.timelineContextChange = 'onTimelineContextChange';\n }\n // Otherwise, we have to listen for the required events on Schedule and events\n else {\n // Context menu will be expected to update the context if click or mousedown\n // is the triggerEvent. Context menu is a mousedown gesture.\n if (triggerEvent === 'click' || triggerEvent === 'mousedown') {\n listeners.schedulecontextmenu = 'onScheduleContextGesture';\n }\n Object.assign(listeners, {\n [`schedule${triggerEvent}`] : 'onScheduleContextGesture',\n [`event${triggerEvent}`] : 'onScheduleContextGesture',\n ...listeners\n });\n }\n client.ion(listeners);\n client.rowManager.ion({\n rowheight : 'syncContextElement',\n thisObj : this\n });\n }\n changeTriggerEvent(triggerEvent) {\n // Both these things should route through to using the client's timelineContextChange event\n if (triggerEvent === 'hover' || triggerEvent === 'mousemove') {\n triggerEvent = 'mouseover';\n }\n return triggerEvent;\n }\n get element() {\n return this._element || (this._element = DomHelper.createElement({\n parent : this.client.timeAxisSubGridElement,\n className : 'b-schedule-selected-tick'\n }));\n }\n // Handle the Client's own timelineContextChange event which it maintains on mousemove\n onTimelineContextChange({ context }) {\n this.context = context;\n }\n // Handle the scheduleclick or eventclick Scheduler events if we re not using mouseover\n onScheduleContextGesture(context) {\n this.context = context;\n }\n onTimeAxisViewModelUpdate({ source : timeAxisViewModel }) {\n // Just a mutation of existing tick details, sync the element\n if (timeAxisViewModel.timeAxis.includes(this.context?.tick)) {\n this.syncContextElement();\n }\n // The tick has gone, we have moved to a new ViewPreset, so clear the context.\n else {\n this.clearContext();\n }\n }\n clearContext() {\n this.context = null;\n }\n updateContext(context, oldContext) {\n this.syncContextElement();\n }\n syncContextElement() {\n if (this.context && this.enabled) {\n const\n me = this,\n {\n client,\n element,\n context,\n renderer\n } = me,\n {\n isVertical\n } = client,\n {\n style\n } = element,\n row = isVertical ? client.rowManager.rows[0] : client.getRowFor(context.resourceRecord);\n if (row) {\n const\n {\n tickStartDate,\n tickEndDate,\n resourceRecord\n } = context,\n // get the position clicked based on dates\n renderData = client.currentOrientation.getTimeSpanRenderData({\n startDate : tickStartDate,\n endDate : tickEndDate,\n startDateMS : tickStartDate.getTime(),\n endDateMS : tickEndDate.getTime()\n }, resourceRecord);\n let top, width, height;\n if (isVertical) {\n top = renderData.top;\n width = renderData.resourceWidth;\n height = renderData.height;\n }\n else {\n top = row.top;\n width = renderData.width;\n height = row.height;\n }\n // Move to current cell\n style.display = '';\n style.width = `${width}px`;\n style.height = `${height}px`;\n DomHelper.setTranslateXY(element, renderData.left, top);\n // In case we updated on a datachange action : 'remove' or 'add' event.\n context.index = row.index;\n // Undo any contents added by the renderer last time round.\n element.innerHTML = '';\n // Show the context and the element to the renderer\n renderer && me.callback(renderer, me, [context, element]);\n }\n // No row for resource might mean it's scrolled out of view or filtered out\n // so just hide so that the next valid sync can restore it to visibility\n else {\n style.display = 'none';\n }\n }\n else {\n this.element.style.display = 'none';\n }\n }\n}\nScheduleContext.featureClass = 'b-scheduler-context';\nScheduleContext._$name = 'ScheduleContext'; GridFeatureManager.registerFeature(ScheduleContext, false, ['Scheduler']);\n", "import AttachToProjectMixin from '../../Scheduler/data/mixin/AttachToProjectMixin.js';\nimport CopyPasteBase from '../../Grid/feature/base/CopyPasteBase.js';\nimport GridFeatureManager from '../../Grid/feature/GridFeatureManager.js';\nimport DateHelper from '../../Core/helper/DateHelper.js';\nimport './ScheduleContext.js';\nconst actions = {\n cut : 1,\n copy : 1,\n paste : 1\n};\n/**\n * @module Scheduler/feature/EventCopyPaste\n */\n/**\n * Allow using [Ctrl/CMD + C/X] and [Ctrl/CMD + V] to copy/cut and paste events.\n *\n * This feature also adds entries to the {@link Scheduler/feature/EventMenu} for copying & cutting (see example below\n * for how to configure) and to the {@link Scheduler/feature/ScheduleMenu} for pasting.\n *\n * You can configure how a newly pasted record is named using {@link #function-generateNewName}.\n *\n * {@inlineexample Scheduler/feature/EventCopyPaste.js}\n *\n * If you want to highlight the paste location when clicking in the schedule, consider enabling the\n * {@link Scheduler/feature/ScheduleContext} feature.\n *\n * When used with Scheduler Pro, pasting will bypass any constraint set on the event to allow the\n * copy to be assigned the targeted date.
\n *\n * This feature is **enabled** by default.\n *\n * ## Customize menu items\n *\n * See {@link Scheduler/feature/EventMenu} and {@link Scheduler/feature/ScheduleMenu} for more info on customizing the\n * menu items supplied by the feature. This snippet illustrates the concept:\n *\n * ```javascript\n * // Custom copy text + remove cut option from event menu:\n * const scheduler = new Scheduler({\n * features : {\n * eventMenu : {\n * items : {\n * copyEvent : {\n * text : 'Copy booking'\n * },\n * cutEvent : false\n * }\n * }\n * }\n * });\n * ```\n *\n * ## Keyboard shortcuts\n *\n * The feature has the following default keyboard shortcuts:\n *\n * | Keys | Action | Action description |\n * |------------|----------|---------------------------------------------------|\n * | `Ctrl`+`C` | *copy* | Copies selected event(s) into the clipboard. |\n * | `Ctrl`+`X` | *cut* | Cuts out selected event(s) into the clipboard. |\n * | `Ctrl`+`V` | *paste* | Insert copied or cut event(s) from the clipboard. |\n *\n * Please note that
\n *\n * For more information on how to customize keyboard shortcuts, please see\n * [our guide](#Scheduler/guides/customization/keymap.md).\n *\n * ## Multi assigned events\n *\n * In a Scheduler that uses single assignment, copying and then pasting creates a clone of the event and assigns it\n * to the target resource. Cutting and pasting moves the original event to the target resource.\n *\n * In a Scheduler using multi assignment, the behaviour is slightly more complex. Cutting and pasting reassigns the\n * event to the target, keeping other assignments of the same event intact. The behaviour for copying and pasting is\n * configurable using the {@link #config-copyPasteAction} config. It accepts two values:\n *\n * * `'clone'` - The default, the event is cloned and the clone is assigned to the target resource. Very similar to the\n * behaviour with single assignment (event count goes up by 1).\n * * `'assign'` - The original event is assigned to the target resource (event count is unaffected).\n *\n * This snippet shows how to reconfigure it:\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * eventCopyPaste : {\n * copyPasteAction : 'assign'\n * }\n * }\n * });\n * ```\n *\n * Ctrl is the equivalent to Command and Alt\n * is the equivalent to Option for Mac usersCopying multiple assignments of the same event will always result in all but the first assignment\n * being removed on paste, since paste targets a single resource and an event can only be assigned to a resource once.\n *
\n *\n * ## Native/shared clipboard\n *\n * If you have multiple Schedulers (or other Bryntum products) on the same page, they will share clipboard. This makes\n * it possible to copy and paste between different Scheduler instances. It is also possible to use the native Clipboard\n * API if it is available and if you set {@link #config-useNativeClipboard} to `true`.\n *\n * Regardless of native clipboard availability, copy-pasting \"outside\" of the current Scheduler instance will convert\n * the copied events to a string. When pasting, the string will then be parsed back into events. In case of usage of the\n * native Clipboard API, this means it is possible to copy and paste events between completely different applications.\n *\n * To configure the fields that is converted and parsed from the copied string value, please see the\n * {@link #config-eventToStringFields} config.\n *\n * @extends Grid/feature/base/CopyPasteBase\n * @classtype eventCopyPaste\n * @feature\n */\nexport default class EventCopyPaste extends CopyPasteBase.mixin(AttachToProjectMixin) {\n static $name = 'EventCopyPaste';\n static pluginConfig = {\n assign : [\n 'copyEvents',\n 'pasteEvents'\n ],\n chain : [\n 'populateEventMenu',\n 'populateScheduleMenu',\n 'onEventDataGenerated'\n ]\n };\n static configurable = {\n /**\n * The field to use as the name field when updating the name of copied records\n * @config {String}\n * @default\n */\n nameField : 'name',\n /**\n * How to handle a copy paste operation when the host uses multi assignment. Either:\n *\n * - `'clone'` - The default, clone the copied event, assigning the clone to the target resource.\n * - `'assign'` - Add an assignment for the existing event to the target resource.\n *\n * For single assignment mode, it always uses the `'clone'` behaviour.\n *\n * @config {'clone'|'assign'}\n * @default\n */\n copyPasteAction : 'clone',\n /**\n * When copying events (or assignments), data will be sent to the clipboard as a tab (`\\t`) and new-line (`\\n`)\n * separated string with field values for fields present in this config (in specified order). The default\n * included fields are (in this order):\n * * name\n * * startDate\n * * endDate\n * * duration\n * * durationUnit\n * * allDay\n * To override, provide your own array of fields:\n * ```javascript\n * new Scheduler({\n * features : {\n * eventCopyPaste : {\n * eventToStringFields : [\n * 'name',\n * 'startDate',\n * 'endDate',\n * 'percentDone'\n * ]\n * }\n * }\n * });\n * ```\n * Please note that this config is both used for **converting** events to a string value and\n * is also used to **parse** a string value to events.
\n * @config {ArrayIncompatible with the {@link Scheduler.feature.EventDragSelect EventDragSelect} and\n * {@link Scheduler.feature.Pan Pan} features. If either of those features are enabled, this feature has no effect.\n *
\n *\n * ## Conditionally preventing drag creation\n *\n * To conditionally prevent drag creation for a certain resource or a certain timespan, you listen for the\n * {@link #event-beforeDragCreate} event, add your custom logic to it and return `false` to prevent the operation\n * from starting. For example to not allow drag creation on the topmost resource:\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * listeners : {\n * beforeDragCreate({ resource }) {\n * // Prevent drag creating on the topmost resource\n * if (resource === scheduler.resourceStore.first) {\n * return false;\n * }\n * }\n * }\n * });\n * ```\n *\n * @extends Scheduler/feature/base/DragCreateBase\n * @demo Scheduler/basic\n * @classtype eventDragCreate\n * @feature\n */\nexport default class EventDragCreate extends DragCreateBase {\n //region Config\n static $name = 'EventDragCreate';\n static configurable = {\n /**\n * Locks the layout during drag create, overriding the default behaviour that uses the same rendering\n * pathway for drag creation as for already existing events.\n *\n * This more closely resembles the behaviour of versions prior to 4.2.0.\n *\n * @config {Boolean} lockLayout\n * @default false\n */\n /**\n * An empty function by default, but provided so that you can perform custom validation on the event being\n * created. Return `true` if the new event is valid, `false` to prevent an event being created.\n * @param {Object} context A drag create context\n * @param {Date} context.startDate Event start date\n * @param {Date} context.endDate Event end date\n * @param {Scheduler.model.EventModel} context.record Event record\n * @param {Scheduler.model.ResourceModel} context.resourceRecord Resource record\n * @param {Event} event The event object\n * @returns {Boolean} `true` if this validation passes\n * @config {Function}\n */\n validatorFn : () => true\n };\n //endregion\n //region Events\n /**\n * Fires on the owning Scheduler after the new event has been created.\n * @event dragCreateEnd\n * @on-owner\n * @param {Scheduler.view.Scheduler} source\n * @param {Scheduler.model.EventModel} eventRecord The new `EventModel` record.\n * @param {Scheduler.model.ResourceModel} resourceRecord The resource for the row in which the event is being\n * created.\n * @param {MouseEvent} event The ending mouseup event.\n * @param {HTMLElement} eventElement The DOM element representing the newly created event un the UI.\n */\n /**\n * Fires on the owning Scheduler at the beginning of the drag gesture. Returning `false` from a listener prevents\n * the drag create operation from starting.\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * listeners : {\n * beforeDragCreate({ date }) {\n * // Prevent drag creating events in the past\n * return date >= Date.now();\n * }\n * }\n * });\n * ```\n *\n * @event beforeDragCreate\n * @on-owner\n * @preventable\n * @param {Scheduler.view.Scheduler} source\n * @param {Scheduler.model.ResourceModel} resourceRecord\n * @param {Date} date The datetime associated with the drag start point.\n */\n /**\n * Fires on the owning Scheduler after the drag start has created a new Event record.\n * @event dragCreateStart\n * @on-owner\n * @param {Scheduler.view.Scheduler} source\n * @param {Scheduler.model.EventModel} eventRecord The event record being created\n * @param {Scheduler.model.ResourceModel} resourceRecord The resource record\n * @param {HTMLElement} eventElement The element representing the new event.\n */\n /**\n * Fires on the owning Scheduler to allow implementer to prevent immediate finalization by setting\n * `data.context.async = true` in the listener, to show a confirmation popup etc\n * ```javascript\n * scheduler.on('beforedragcreatefinalize', ({context}) => {\n * context.async = true;\n * setTimeout(() => {\n * // async code don't forget to call finalize\n * context.finalize();\n * }, 1000);\n * })\n * ```\n * @event beforeDragCreateFinalize\n * @on-owner\n * @param {Scheduler.view.Scheduler} source Scheduler instance\n * @param {Scheduler.model.EventModel} eventRecord The event record being created\n * @param {Scheduler.model.ResourceModel} resourceRecord The resource record\n * @param {HTMLElement} eventElement The element representing the new Event record\n * @param {Object} context\n * @param {Boolean} context.async Set true to handle drag create asynchronously (e.g. to wait for user\n * confirmation)\n * @param {Function} context.finalize Call this method to finalize drag create. This method accepts one\n * argument: pass true to update records, or false, to ignore changes\n */\n /**\n * Fires on the owning Scheduler at the end of the drag create gesture whether or not\n * a new event was created by the gesture.\n * @event afterDragCreate\n * @on-owner\n * @param {Scheduler.view.Scheduler} source\n * @param {Scheduler.model.EventModel} eventRecord The event record being created\n * @param {Scheduler.model.ResourceModel} resourceRecord The resource record\n * @param {HTMLElement} eventElement The element representing the created event record\n */\n //endregion\n //region Init\n get scheduler() {\n return this.client;\n }\n get store() {\n return this.client.eventStore;\n }\n get project() {\n return this.client.project;\n }\n updateLockLayout(lock) {\n this.dragActiveCls = `b-dragcreating${lock ? ' b-dragcreate-lock' : ''}`;\n }\n //endregion\n //region Scheduler specific implementation\n handleBeforeDragCreate(drag, eventRecord, event) {\n const\n me = this,\n { scheduler, store } = me,\n { resourceRecord } = drag;\n if (me.disabled || resourceRecord.readOnly || !me.scheduler.resourceStore.isAvailable(resourceRecord)) {\n return false;\n }\n if (scheduler.allowOverlap === false) {\n const isEventOverlapped = !store.isDateRangeAvailable(drag.mousedownDate, drag.mousedownDate, null, resourceRecord);\n if (isEventOverlapped) {\n return false;\n }\n }\n const\n // For resources with a calendar, ensure the date is inside a working time range\n isWorkingTime = !scheduler.isSchedulerPro || eventRecord.ignoreResourceCalendar || resourceRecord.isWorkingTime(drag.mousedownDate),\n result = isWorkingTime && scheduler.trigger('beforeDragCreate', {\n resourceRecord,\n date : drag.mousedownDate,\n event\n });\n // Save date constraints\n me.dateConstraints = scheduler.getDateConstraints?.(resourceRecord, eventRecord);\n return result;\n }\n dragStart(drag) {\n const\n me = this,\n { client } = me,\n {\n eventStore,\n assignmentStore,\n enableEventAnimations,\n enableTransactionalFeatures\n } = client,\n { resourceRecord } = drag,\n eventRecord = me.createEventRecord(drag),\n resourceRecords = [resourceRecord];\n eventRecord.set('duration', DateHelper.diff(eventRecord.startDate, eventRecord.endDate, eventRecord.durationUnit, true));\n // It's only a provisional event until gesture is completed (possibly longer if an editor dialog is shown after)\n eventRecord.isCreating = true;\n // Flag used by rendering to not draw a zero length event being drag created as a milestone\n eventRecord.meta.isDragCreating = true;\n // force the transaction canceling in the taskeditor early\n // this is because we are going to add a new event record to the store, and it has to be out of the\n // task editor's stm transaction\n // now there's a re-entrant protection in that method, so hopefully when it will be called by the\n // editor itself that's ok\n // `taskEdit === false` in some cases, so can't just use `?.` here\n client.features.taskEdit && client.features.taskEdit.doCancel();\n // This presents the event to be scheduled for validation at the proposed mouse/date point\n // If rejected, we cancel operation\n if (me.handleBeforeDragCreate(drag, eventRecord, drag.event) === false) {\n return false;\n }\n // This is an async function which will start transaction asynchronously. This workflow expect transaction to\n // be started ASAP\n me.captureStm(true);\n let assignmentRecords = [];\n if (resourceRecord) {\n if (eventStore.usesSingleAssignment || !enableTransactionalFeatures) {\n assignmentRecords = assignmentStore.assignEventToResource(eventRecord, resourceRecord);\n }\n else {\n // Do not add record to the store just yet, otherwise records would get to the STM queue assignment first,\n // then event, which will break `store.added` bag after undo/redo.\n assignmentRecords = [assignmentStore.createRecord({\n event : eventRecord,\n resource : resourceRecord\n })];\n }\n }\n // Vetoable beforeEventAdd allows cancel of this operation\n if (client.trigger('beforeEventAdd', { eventRecord, resourceRecords, assignmentRecords }) === false) {\n if (eventStore.usesSingleAssignment || !enableTransactionalFeatures) {\n assignmentStore.remove(assignmentRecords);\n }\n return false;\n }\n // When configured to lock layout during drag create, set a flag that HorizontalRendering will pick up to\n // exclude the new event from the layout calculations. It will then be at the topmost position in the \"cell\"\n if (me.lockLayout) {\n eventRecord.meta.excludeFromLayout = true;\n }\n client.onEventCreated?.(eventRecord);\n client.enableEventAnimations = false;\n eventStore.addAsync(eventRecord).then(() => client.enableEventAnimations = enableEventAnimations);\n if (!eventStore.usesSingleAssignment && enableTransactionalFeatures) {\n // Add assignment after event only to keep STM transaction sane\n assignmentStore.add(assignmentRecords[0]);\n }\n // Element must be created synchronously, not after the project's normalizing delays.\n // Overrides the check for isEngineReady in VerticalRendering so that the newly added record\n // will be rendered when we call refreshRows.\n client.isCreating = true;\n client.refreshRows();\n client.isCreating = false;\n // Set the element we are dragging\n drag.itemElement = drag.element = client.getElementFromEventRecord(eventRecord);\n // If the resource row is very tall, the event may have been rendered outside of the\n // visible viewport. If so, scroll it into view.\n if (!DomHelper.isInView(drag.itemElement)) {\n client.scrollable.scrollIntoView(drag.itemElement, {\n animate : true,\n edgeOffset : client.barMargin\n });\n }\n return super.dragStart(drag);\n }\n checkValidity(context, event) {\n const\n me = this,\n { client } = me;\n // Nicer for users of validatorFn\n context.resourceRecord = me.dragging.resourceRecord;\n return (\n client.allowOverlap ||\n client.isDateRangeAvailable(context.startDate, context.endDate, context.eventRecord, context.resourceRecord)\n ) && me.createValidatorFn.call(me.validatorFnThisObj || me, context, event);\n }\n // Determine if resource already has events or not\n isRowEmpty(resourceRecord) {\n const events = this.store.getEventsForResource(resourceRecord);\n return !events || !events.length;\n }\n //endregion\n triggerBeforeFinalize(event) {\n this.client.trigger(`beforeDragCreateFinalize`, event);\n }\n /**\n * Creates an event by the event object coordinates\n * @param {Object} drag The Bryntum event object\n * @private\n */\n createEventRecord(drag) {\n const\n me = this,\n { client } = me,\n dimension = client.isHorizontal ? 'X' : 'Y',\n {\n timeAxis,\n eventStore,\n weekStartDay\n } = client,\n {\n event,\n mousedownDate\n } = drag,\n draggingEnd = me.draggingEnd = event[`page${dimension}`] > drag.startEvent[`page${dimension}`],\n eventConfig = {\n name : eventStore.modelClass.fieldMap.name.defaultValue || me.L('L{Object.newEvent}'),\n startDate : draggingEnd ? DateHelper.floor(mousedownDate, timeAxis.resolution, null, weekStartDay) : mousedownDate,\n endDate : draggingEnd ? mousedownDate : DateHelper.ceil(mousedownDate, timeAxis.resolution, null, weekStartDay)\n };\n // if project model has been imported from Gantt, we have to define constraint data directly to correct\n // auto-scheduling while dragCreate\n if (client.project.isGanttProjectMixin) {\n ObjectHelper.assign(eventConfig, {\n constraintDate : eventConfig.startDate,\n constraintType : 'startnoearlierthan'\n });\n }\n return eventStore.createRecord(eventConfig);\n }\n async internalUpdateRecord(context, eventRecord) {\n await super.internalUpdateRecord(context, eventRecord);\n // Toggle isCreating after ending batch, to make sure assignments can become persistable\n if (!this.client.hasEventEditor) {\n context.eventRecord.isCreating = false;\n }\n }\n async finalizeDragCreate(context) {\n const { meta } = context.eventRecord;\n // Remove the layout lock flag, event will jump into place as part of the finalization\n meta.excludeFromLayout = false;\n // Also allow new event to become a milestone now\n meta.isDragCreating = false;\n const transferred = await super.finalizeDragCreate(context);\n // if STM capture has NOT been transferred to the\n // event editor, we need to finalize the STM transaction / release the capture\n if (!transferred) {\n await this.freeStm(true);\n }\n else {\n // otherwise just freeing our capture\n this.hasStmCapture = false;\n }\n return transferred;\n }\n async cancelDragCreate(context) {\n await super.cancelDragCreate(context);\n await this.freeStm(false);\n }\n getTipHtml(...args) {\n const\n html = super.getTipHtml(...args),\n { element } = this.tip;\n element.classList.add('b-sch-dragcreate-tooltip');\n element.classList.toggle('b-too-narrow', this.dragging.context.tooNarrow);\n return html;\n }\n onAborted(context) {\n const { eventRecord, resourceRecord } = context;\n // The product this is being used in may not have resources.\n this.store.unassignEventFromResource?.(eventRecord, resourceRecord);\n this.store.remove(eventRecord);\n }\n}\nEventDragCreate._$name = 'EventDragCreate'; GridFeatureManager.registerFeature(EventDragCreate, true, 'Scheduler');\nGridFeatureManager.registerFeature(EventDragCreate, false, 'ResourceHistogram');\n", "import InstancePlugin from '../../Core/mixin/InstancePlugin.js';\nimport GridFeatureManager from '../../Grid/feature/GridFeatureManager.js';\nimport DomHelper from '../../Core/helper/DomHelper.js';\nimport EventHelper from '../../Core/helper/EventHelper.js';\nimport Rectangle, { Point } from '../../Core/helper/util/Rectangle.js';\nimport Delayable from '../../Core/mixin/Delayable.js';\n/**\n * @module Scheduler/feature/EventDragSelect\n */\n/**\n * Enables users to click and drag to select events (or assignments in multi assignment mode) inside the Scheduler's\n * timeline. Press CTRL/CMD-key to extend an existing selection.\n *\n * The selection rectangle element is styled using the CSS class name `b-dragselect-rect`. You may use application CSS\n * to change its appearance from the default.\n *\n * {@inlineexample Scheduler/feature/EventDragSelect.js}\n *\n * This feature is **disabled** by default.\n * For info on enabling it, see {@link Grid.view.mixin.GridFeatures}.\n *\n * **NOTE:** Incompatible with the {@link Scheduler.feature.EventDragCreate} and the {@link Scheduler.feature.Pan} features.\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * eventDragSelect : true,\n * eventDragCreate : false\n * }\n * });\n * ```\n *\n * @demo Scheduler/dragselection\n * @extends Core/mixin/InstancePlugin\n * @mixes Core/mixin/Delayable\n * @classtype eventDragSelect\n * @feature\n */\nexport default class EventDragSelect extends Delayable(InstancePlugin) {\n // region Events\n /**\n * Fires on the owning Scheduler before drag selection starts. Return false to prevent the operation.\n * @event beforeEventDragSelect\n * @preventable\n * @on-owner\n * @param {Event} event The native browser DOM event\n */\n //endregion\n // region Init\n static $name = 'EventDragSelect';\n targetSelector = '.b-sch-timeaxis-cell, .b-timeaxissubgrid';\n construct(client, config) {\n client.multiEventSelect = true;\n super.construct(client, config);\n }\n //endregion\n //region Plugin config\n // Plugin configuration. This plugin chains some of the functions in Scheduler.\n static pluginConfig = {\n chain : ['onElementMouseDown', 'onElementMouseMove']\n };\n //endregion\n onElementMouseDown(event) {\n const\n me = this,\n { client } = me,\n { foregroundCanvas } = client,\n { target, button, touches, clientX, clientY } = event,\n canvasRect = Rectangle.from(foregroundCanvas, true);\n // only react to mouse input, and left button\n // only react to mousedown directly on grid cell or subgrid element\n if (touches || button !== 0 || me.disabled || !target.matches(me.targetSelector) || client.trigger('beforeEventDragSelect', { event }) === false) {\n return;\n }\n // Prevent grid dragselection (reset by GridSelection)\n client.preventDragSelect = true;\n me.startX = clientX - canvasRect.x;\n me.startY = clientY - canvasRect.y;\n me.element = DomHelper.createElement({\n tag : 'div',\n className : 'b-dragselect-rect',\n parent : client.foregroundCanvas,\n retainElement : true,\n style : {\n transform : `translate(${me.startX}px, ${me.startY}px)`\n }\n });\n client.navigator.disabled = true;\n me.mouseUpDetacher = EventHelper.on({\n element : document,\n mouseup : 'onDocumentMouseUp',\n thisObj : me\n });\n }\n get eventRectangles() {\n const\n { client } = this,\n // When using nested events, only drag select parents\n eventElements = Array.from(client.foregroundCanvas.children).filter(node => node.matches(`${client.eventSelector}, .b-nested-events-container`));\n return eventElements.map(el => {\n const record = client.resolveAssignmentRecord(el);\n return {\n rectangle : Rectangle.from(el, true),\n record,\n selected : client.selectedAssignments.includes(record)\n };\n });\n }\n onElementMouseMove(event) {\n const\n me = this,\n { client } = me;\n if (typeof me.startX === 'number') {\n const\n canvasRect = me.rectangle = Rectangle.from(me.client.foregroundCanvas, true),\n x = Math.min(Math.max(event.clientX - canvasRect.x, 0), canvasRect.width + 1),\n y = Math.min(Math.max(event.clientY - canvasRect.y, 0), canvasRect.height + 1),\n rect = new Rectangle(me.startX, me.startY, x - me.startX, y - me.startY);\n DomHelper.setTranslateXY(me.element, rect.x, rect.y);\n me.element.style.width = `${rect.width}px`;\n me.element.style.height = `${rect.height}px`;\n if (!me.dragging) {\n client.element.classList.add('b-dragselecting');\n if (!event.ctrlKey && !event.metaKey) {\n client.clearEventSelection();\n }\n me.originalSelection = client.selectedAssignments.slice();\n me.subGridElementRect = Rectangle.from(client.timeAxisSubGridElement, true);\n // No key processing during drag selection\n client.navigator.disabled = true;\n client.enableScrollingCloseToEdges(client.timeAxisSubGrid);\n me.dragging = true;\n }\n me.updateSelection();\n }\n }\n onDocumentMouseUp(event) {\n const\n me = this,\n { client } = me,\n { selectedAssignments, navigator } = client,\n timeAxisRect = Rectangle.from(client.timeAxisSubGridElement);\n client.disableScrollingCloseToEdges(client.timeAxisSubGrid);\n if (!me.dragging && client.deselectAllOnScheduleClick) {\n client.clearEventSelection();\n }\n me.element?.remove();\n client.element.classList.remove('b-dragselecting');\n me.startX = me.startY = null;\n // Navigator will react to the 'click' event which clears selection, bypass this\n // Checking mouse position due to SalesForce limitations\n navigator.skipNextClick = timeAxisRect.contains(Point.from(event, true));\n navigator.disabled = false;\n me.dragging = false;\n // If we selected something, focus last selected event so keyboard navigation works\n if (selectedAssignments.length) {\n navigator.skipScrollIntoView = true;\n client.activeAssignment = selectedAssignments[selectedAssignments.length - 1];\n navigator.activeItem?.focus();\n navigator.skipScrollIntoView = false;\n }\n me.mouseUpDetacher();\n }\n updateSelection() {\n const\n me = this,\n selectionRect = me.rectangle = Rectangle.from(me.element, true),\n {\n eventRectangles,\n client\n } = me,\n // If any currently selected assignments have had their DOM representation\n // released due to being scrolled out of view, they must remain selected.\n // Collect assignments which have no DOM representation as the initial\n // selection.\n selection = client.selectedAssignments.reduce((r, a) => {\n if (!client.getElementFromAssignmentRecord(a)) {\n r.push(a);\n }\n return r;\n }, []);\n for (const assignmentData of eventRectangles) {\n if (selectionRect.intersect(assignmentData.rectangle, true, true)) {\n assignmentData.selected = true;\n selection.push(assignmentData.record);\n }\n }\n selection.push(...me.originalSelection);\n client.selectedAssignments = selection;\n }\n}\nEventDragSelect._$name = 'EventDragSelect'; GridFeatureManager.registerFeature(EventDragSelect, false, 'Scheduler');\n", "import Store from '../../Core/data/Store.js';\nimport Popup from '../../Core/widget/Popup.js';\nimport '../../Core/widget/SlideToggle.js';\nimport '../../Core/widget/panel/PanelCollapserOverlay.js';\n/**\n * @module Scheduler/view/EventEditor\n */\n/**\n * Provided event editor dialog.\n *\n * @extends Core/widget/Popup\n * @private\n */\nexport default class EventEditor extends Popup {\n // Factoryable type name\n static get type() {\n return 'eventeditor';\n }\n static get $name() {\n return 'EventEditor';\n }\n static get configurable() {\n return {\n items : [],\n draggable : {\n handleSelector : ':not(button,.b-field-inner)' // Ignore buttons and field inners\n },\n axisLock : 'flexible',\n scrollable : {\n // In case editor is very tall or window is small, make it scrollable\n overflowY : true\n },\n readOnly : null,\n /**\n * A Function (or *name* of a function) which produces a customized Panel header based upon the event being edited.\n *\n * @config {Function|String}\n * @param {Scheduler.model.EventModel} eventRecord The record being edited\n * @returns {String} The Panel title.\n */\n titleRenderer : null,\n // We want to maximize on phones and tablets\n maximizeOnMobile : true\n };\n }\n updateLocalization() {\n super.updateLocalization(...arguments);\n // Use this if there's no titleRenderer\n this.initialTitle = this.title || '';\n }\n chainResourceStore() {\n return this.eventEditFeature.resourceStore.chain(\n record => !record.isSpecialRow,\n null,\n {\n // It doesn't need to be a Project-based Store\n storeClass : Store,\n // Need to show all records in the combo. Required in case resource store is a tree.\n excludeCollapsedRecords : false\n }\n );\n }\n processWidgetConfig(widget) {\n if (widget.type?.includes('date') && widget.weekStartDay == null) {\n widget.weekStartDay = this.weekStartDay;\n }\n if (widget.type === 'extraItems') {\n return false;\n }\n const\n { eventEditFeature } = this,\n fieldConfig = {};\n if (widget.ref === 'resourceField') {\n const { store } = widget;\n // Can't use store directly since it may be grouped and then contains irrelevant group records\n widget.store = this.chainResourceStore();\n // Allow the incoming widget's config to augment its store\n if (store) {\n widget.store.setConfig(store);\n }\n // When events are loaded with resourceId, we should only support single select.\n // Only override this if the widget has not been explicitly configured\n // with multiSelect.\n if (!('multiSelect' in widget)) {\n widget.multiSelect = !eventEditFeature.eventStore.usesSingleAssignment;\n }\n }\n if ((widget.name === 'startDate' || widget.name === 'endDate') && widget.type === 'date') {\n fieldConfig.format = eventEditFeature.dateFormat;\n }\n if ((widget.name === 'startDate' || widget.name === 'endDate') && widget.type === 'time') {\n fieldConfig.format = eventEditFeature.timeFormat;\n }\n Object.assign(widget, fieldConfig);\n return super.processWidgetConfig(widget);\n }\n setupEditorButtons() {\n const\n { record } = this,\n { deleteButton } = this.widgetMap;\n // Hide delete button if we are readOnly or the event is in a create phase\n // which means we are editing a dblclick-created or drag-created event.\n if (deleteButton) {\n deleteButton.hidden = this.readOnly || record.isCreating;\n }\n }\n // This will be called if the editor is floating\n onBeforeShow(...args) {\n this.setupUIForEditing();\n super.onBeforeShow?.(...args);\n }\n // This will be called if the editor is docked\n onBeforeToggleReveal({ reveal }) {\n // Only when revealing, not when sliding out\n if (reveal) {\n this.setupUIForEditing();\n }\n }\n setupUIForEditing() {\n const\n me = this,\n {\n record,\n titleRenderer\n } = me;\n me.setupEditorButtons();\n if (titleRenderer) {\n me.title = me.callback(titleRenderer, me, [record]);\n }\n else {\n me.title = me.initialTitle;\n }\n }\n onInternalKeyDown(event) {\n this.trigger('keyDown', { event });\n super.onInternalKeyDown(event);\n }\n updateReadOnly(readOnly) {\n const\n {\n deleteButton,\n saveButton,\n cancelButton\n } = this.widgetMap;\n super.updateReadOnly(readOnly);\n if (deleteButton) {\n deleteButton.hidden = readOnly;\n }\n if (saveButton) {\n saveButton.hidden = readOnly;\n }\n if (cancelButton) {\n cancelButton.hidden = readOnly;\n }\n }\n}\n// Register this widget type with its Factory\nEventEditor.initClass();\nEventEditor._$name = 'EventEditor';", "import Combo from '../../../../Core/widget/Combo.js';\n/**\n * @module Scheduler/view/recurrence/field/RecurrenceFrequencyCombo\n */\n/**\n * A combobox field allowing to pick frequency in the {@link Scheduler.view.recurrence.RecurrenceEditor recurrence dialog}.\n *\n * @extends Core/widget/Combo\n * @classtype recurrencefrequencycombo\n */\nexport default class RecurrenceFrequencyCombo extends Combo {\n static $name = 'RecurrenceFrequencyCombo';\n // Factoryable type name\n static type = 'recurrencefrequencycombo';\n static configurable = {\n editable : false,\n displayField : 'text',\n valueField : 'value',\n localizeDisplayFields : true,\n addNone : false\n };\n buildItems() {\n return [\n ...(this.addNone ? [{ text : 'L{None}', value : 'NONE' }] : []),\n { value : 'DAILY', text : 'L{Daily}' },\n { value : 'WEEKLY', text : 'L{Weekly}' },\n { value : 'MONTHLY', text : 'L{Monthly}' },\n { value : 'YEARLY', text : 'L{Yearly}' }\n ];\n }\n};\n// Register this widget type with its Factory\nRecurrenceFrequencyCombo.initClass();\nRecurrenceFrequencyCombo._$name = 'RecurrenceFrequencyCombo';", "import RecurrenceFrequencyCombo from './RecurrenceFrequencyCombo.js';\n/**\n * @module Scheduler/view/recurrence/field/RecurrenceCombo\n */\n/**\n * A combobox field for selecting a recurrence pattern: `Daily`, `Weekly`, `Monthly` or `Yearly` if the recurrence\n * has no other non-default settings, or `Custom...` if the recurrence has custom setting applied.\n *\n * {@inlineexample Scheduler/view/RecurrenceCombo.js}\n *\n * @extends Scheduler/view/recurrence/field/RecurrenceFrequencyCombo\n * @classtype recurrencecombo\n */\nexport default class RecurrenceCombo extends RecurrenceFrequencyCombo {\n static get $name() {\n return 'RecurrenceCombo';\n }\n // Factoryable type name\n static get type() {\n return 'recurrencecombo';\n }\n static get defaultConfig() {\n return {\n customValue : 'custom',\n placeholder : 'None',\n splitCls : 'b-recurrencecombo-split',\n items : true,\n highlightExternalChange : false\n };\n }\n buildItems() {\n const me = this;\n return [\n { value : 'none', text : 'L{None}' },\n ...super.buildItems(),\n { value : me.customValue, text : 'L{Custom}', cls : me.splitCls }\n ];\n }\n set value(value) {\n // Use 'none' instead of falsy value\n value = value || 'none';\n super.value = value;\n }\n get value() {\n return super.value;\n }\n set recurrence(recurrence) {\n const me = this;\n if (recurrence) {\n me.value = me.isCustomRecurrence(recurrence) ? me.customValue : recurrence.frequency;\n }\n else {\n me.value = null;\n }\n }\n isCustomRecurrence(recurrence) {\n const { interval, days, monthDays, months } = recurrence;\n return Boolean(interval > 1 || (days && days.length) || (monthDays && monthDays.length) || (months && months.length));\n }\n};\n// Register this widget type with its Factory\nRecurrenceCombo.initClass();\nRecurrenceCombo._$name = 'RecurrenceCombo';", "import Button from '../../../Core/widget/Button.js';\nimport RecurrenceLegend from '../../data/util/recurrence/RecurrenceLegend.js';\n/**\n * @module Scheduler/view/recurrence/RecurrenceLegendButton\n */\n/**\n * A button which displays the associated {@link #property-recurrence} info in a human readable form.\n * @extends Core/widget/Button\n * @classtype recurrencelegendbutton\n */\nexport default class RecurrenceLegendButton extends Button {\n static get $name() {\n return 'RecurrenceLegendButton';\n }\n // Factoryable type name\n static get type() {\n return 'recurrencelegendbutton';\n }\n static get defaultConfig() {\n return {\n localizableProperties : [],\n recurrence : null\n };\n }\n /**\n * Sets / gets the recurrence to display description for.\n * @property {Scheduler.model.RecurrenceModel}\n */\n set recurrence(recurrence) {\n this._recurrence = recurrence;\n this.updateLegend();\n }\n get recurrence() {\n return this._recurrence;\n }\n set eventStartDate(eventStartDate) {\n this._eventStartDate = eventStartDate;\n this.updateLegend();\n }\n get eventStartDate() {\n return this._eventStartDate;\n }\n updateLegend() {\n const { recurrence } = this;\n this.text = recurrence ? RecurrenceLegend.getLegend(recurrence, this.eventStartDate) : '';\n }\n onLocaleChange() {\n // on locale switch we update the button text to use proper language\n this.updateLegend();\n }\n updateLocalization() {\n this.onLocaleChange();\n super.updateLocalization();\n }\n}\n// Register this widget type with its Factory\nRecurrenceLegendButton.initClass();\nRecurrenceLegendButton._$name = 'RecurrenceLegendButton';", "import DateHelper from '../../../../Core/helper/DateHelper.js';\nimport Combo from '../../../../Core/widget/Combo.js';\nimport RecurrenceDayRuleEncoder from '../../../data/util/recurrence/RecurrenceDayRuleEncoder.js';\n/**\n * @module Scheduler/view/recurrence/field/RecurrenceDaysCombo\n */\n/**\n * A combobox field allowing to pick days for the `Monthly` and `Yearly` mode in the {@link Scheduler.view.recurrence.RecurrenceEditor recurrence dialog}.\n *\n * @extends Core/widget/Combo\n * @classtype recurrencedayscombo\n */\nexport default class RecurrenceDaysCombo extends Combo {\n static get $name() {\n return 'RecurrenceDaysCombo';\n }\n // Factoryable type name\n static get type() {\n return 'recurrencedayscombo';\n }\n static get defaultConfig() {\n const\n allDaysValueAsArray = ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'],\n allDaysValue = allDaysValueAsArray.join(',');\n return {\n allDaysValue,\n editable : false,\n defaultValue : allDaysValue,\n workingDaysValue : allDaysValueAsArray.filter((day, index) => !DateHelper.nonWorkingDays[index]).join(','),\n nonWorkingDaysValue : allDaysValueAsArray.filter((day, index) => DateHelper.nonWorkingDays[index]).join(','),\n splitCls : 'b-recurrencedays-split',\n displayField : 'text',\n valueField : 'value'\n };\n }\n buildItems() {\n const me = this;\n me._weekDays = null;\n return me.weekDays.concat([\n { value : me.allDaysValue, text : me.L('L{day}'), cls : me.splitCls },\n { value : me.workingDaysValue, text : me.L('L{weekday}') },\n { value : me.nonWorkingDaysValue, text : me.L('L{weekend day}') }\n ]);\n }\n get weekDays() {\n const me = this;\n if (!me._weekDays) {\n const weekStartDay = DateHelper.weekStartDay;\n const dayNames = DateHelper.getDayNames().map((text, index) => ({ text, value : RecurrenceDayRuleEncoder.encodeDay(index) }));\n // we should start week w/ weekStartDay\n me._weekDays = dayNames.slice(weekStartDay).concat(dayNames.slice(0, weekStartDay));\n }\n return me._weekDays;\n }\n set value(value) {\n const me = this;\n if (value && Array.isArray(value)) {\n value = value.join(',');\n }\n // if the value has no matching option in the store we need to use default value\n if (!value || !me.store.findRecord('value', value)) {\n value = me.defaultValue;\n }\n super.value = value;\n }\n get value() {\n let value = super.value;\n if (value && Array.isArray(value)) {\n value = value.join(',');\n }\n return value;\n }\n}\n// Register this widget type with its Factory\nRecurrenceDaysCombo.initClass();\nRecurrenceDaysCombo._$name = 'RecurrenceDaysCombo';", "import DateHelper from '../../../../Core/helper/DateHelper.js';\nimport ButtonGroup from '../../../../Core/widget/ButtonGroup.js';\nimport RecurrenceDayRuleEncoder from '../../../data/util/recurrence/RecurrenceDayRuleEncoder.js';\n/**\n * @module Scheduler/view/recurrence/field/RecurrenceDaysButtonGroup\n */\n/**\n * A segmented button field allowing to pick days for the \"Weekly\" mode in the {@link Scheduler.view.recurrence.RecurrenceEditor recurrence dialog}.\n *\n * {@inlineexample Scheduler/view/RecurrenceDaysButtonGroup.js}\n *\n * @extends Core/widget/ButtonGroup\n */\nexport default class RecurrenceDaysButtonGroup extends ButtonGroup {\n static get $name() {\n return 'RecurrenceDaysButtonGroup';\n }\n // Factoryable type name\n static get type() {\n return 'recurrencedaysbuttongroup';\n }\n static get defaultConfig() {\n return {\n defaults : {\n cls : 'b-raised',\n toggleable : true\n }\n };\n }\n construct(config = {}) {\n const me = this;\n config.columns = 7;\n config.items = me.buildItems();\n super.construct(config);\n }\n updateItemText(item) {\n const day = RecurrenceDayRuleEncoder.decodeDay(item.value)[0];\n item.text = DateHelper.getDayName(day).substring(0, 3);\n }\n buildItems() {\n const me = this;\n if (!me.__items) {\n const weekStartDay = DateHelper.weekStartDay;\n const dayNames = DateHelper.getDayNames().map((text, index) => ({\n text : text.substring(0, 3),\n value : RecurrenceDayRuleEncoder.encodeDay(index)\n }));\n // we should start week w/ weekStartDay\n me.__items = dayNames.slice(weekStartDay).concat(dayNames.slice(0, weekStartDay));\n }\n return me.__items;\n }\n set value(value) {\n if (value && Array.isArray(value)) {\n value = value.join(',');\n }\n super.value = value;\n }\n get value() {\n let value = super.value;\n if (value && Array.isArray(value)) {\n value = value.join(',');\n }\n return value;\n }\n onLocaleChange() {\n // update button texts on locale switch\n this.items.forEach(this.updateItemText, this);\n }\n updateLocalization() {\n this.onLocaleChange();\n super.updateLocalization();\n }\n get widgetClassList() {\n const classList = super.widgetClassList;\n // to look more like a real field\n classList.push('b-field');\n return classList;\n }\n};\n// Register this widget type with its Factory\nRecurrenceDaysButtonGroup.initClass();\nRecurrenceDaysButtonGroup._$name = 'RecurrenceDaysButtonGroup';", "import ButtonGroup from '../../../../Core/widget/ButtonGroup.js';\n/**\n * A segmented button field allowing to pick month days for the `Monthly` mode in the {@link Scheduler.view.recurrence.RecurrenceEditor recurrence dialog}.\n *\n * @extends Core/widget/ButtonGroup\n */\nexport default class RecurrenceMonthDaysButtonGroup extends ButtonGroup {\n static get $name() {\n return 'RecurrenceMonthDaysButtonGroup';\n }\n // Factoryable type name\n static get type() {\n return 'recurrencemonthdaysbuttongroup';\n }\n static get defaultConfig() {\n return {\n defaults : {\n toggleable : true,\n cls : 'b-raised'\n }\n };\n }\n get minValue() {\n return 1;\n }\n get maxValue() {\n return 31;\n }\n construct(config = {}) {\n const me = this;\n config.columns = 7;\n config.items = me.buildItems();\n super.construct(config);\n }\n buildItems() {\n const\n me = this,\n items = [];\n for (let value = me.minValue; value <= me.maxValue; value++) {\n // button config\n items.push({\n text : value + '',\n value\n });\n }\n return items;\n }\n get widgetClassList() {\n const classList = super.widgetClassList;\n // to look more like a real field\n classList.push('b-field');\n return classList;\n }\n};\n// Register this widget type with its Factory\nRecurrenceMonthDaysButtonGroup.initClass();\nRecurrenceMonthDaysButtonGroup._$name = 'RecurrenceMonthDaysButtonGroup';", "import DateHelper from '../../../../Core/helper/DateHelper.js';\nimport ButtonGroup from '../../../../Core/widget/ButtonGroup.js';\n/**\n * A segmented button field allowing to pick months for the `Yearly` mode in the {@link Scheduler.view.recurrence.RecurrenceEditor recurrence dialog}.\n *\n * @extends Core/widget/ButtonGroup\n */\nexport default class RecurrenceMonthsButtonGroup extends ButtonGroup {\n static get $name() {\n return 'RecurrenceMonthsButtonGroup';\n }\n // Factoryable type name\n static get type() {\n return 'recurrencemonthsbuttongroup';\n }\n static get defaultConfig() {\n return {\n defaults : {\n toggleable : true,\n cls : 'b-raised'\n }\n };\n }\n construct(config = {}) {\n const me = this;\n config.columns = 4;\n config.items = me.buildItems();\n super.construct(config);\n }\n buildItems() {\n return DateHelper.getMonthNames().map((item, index) => ({\n text : item.substring(0, 3),\n value : index + 1 // 1-based\n }));\n }\n updateItemText(item) {\n item.text = DateHelper.getMonthName(item.value - 1).substring(0, 3);\n }\n onLocaleChange() {\n // update button texts on locale switch\n this.items.forEach(this.updateItemText, this);\n }\n updateLocalization() {\n this.onLocaleChange();\n super.updateLocalization();\n }\n get widgetClassList() {\n const classList = super.widgetClassList;\n // to look more like a real field\n classList.push('b-field');\n return classList;\n }\n};\n// Register this widget type with its Factory\nRecurrenceMonthsButtonGroup.initClass();\nRecurrenceMonthsButtonGroup._$name = 'RecurrenceMonthsButtonGroup';", "import Combo from '../../../../Core/widget/Combo.js';\n/**\n * @module Scheduler/view/recurrence/field/RecurrenceStopConditionCombo\n */\n/**\n * A combobox field allowing to choose stop condition for the recurrence in the {@link Scheduler.view.recurrence.RecurrenceEditor recurrence dialog}.\n *\n * @extends Core/widget/Combo\n * @classtype recurrencestopconditioncombo\n */\nexport default class RecurrenceStopConditionCombo extends Combo {\n static get $name() {\n return 'RecurrenceStopConditionCombo';\n }\n // Factoryable type name\n static get type() {\n return 'recurrencestopconditioncombo';\n }\n static get defaultConfig() {\n return {\n editable : false,\n placeholder : 'Never',\n displayField : 'text',\n valueField : 'value'\n };\n }\n buildItems() {\n return [\n { value : 'never', text : this.L('L{Never}') },\n { value : 'count', text : this.L('L{After}') },\n { value : 'date', text : this.L('L{On date}') }\n ];\n }\n set value(value) {\n // Use 'never' instead of falsy value\n value = value || 'never';\n super.value = value;\n }\n get value() {\n return super.value;\n }\n get recurrence() {\n return this._recurrence;\n }\n set recurrence(recurrence) {\n let value = null;\n if (recurrence.endDate) {\n value = 'date';\n }\n else if (recurrence.count) {\n value = 'count';\n }\n this._recurrence = recurrence;\n this.value = value;\n }\n};\n// Register this widget type with its Factory\nRecurrenceStopConditionCombo.initClass();\nRecurrenceStopConditionCombo._$name = 'RecurrenceStopConditionCombo';", "import ArrayHelper from '../../../../Core/helper/ArrayHelper.js';\nimport Combo from '../../../../Core/widget/Combo.js';\n/**\n * @module Scheduler/view/recurrence/field/RecurrencePositionsCombo\n */\n/**\n * A combobox field allowing to specify day positions in the {@link Scheduler.view.recurrence.RecurrenceEditor recurrence editor}.\n *\n * @extends Core/widget/Combo\n * @classtype recurrencepositionscombo\n */\nexport default class RecurrencePositionsCombo extends Combo {\n static get $name() {\n return 'RecurrencePositionsCombo';\n }\n // Factoryable type name\n static get type() {\n return 'recurrencepositionscombo';\n }\n static get defaultConfig() {\n return {\n editable : false,\n splitCls : 'b-sch-recurrencepositions-split',\n displayField : 'text',\n valueField : 'value',\n defaultValue : 1,\n maxPosition : 5\n };\n }\n buildItems() {\n return this.buildDayNumbers().concat([\n { value : '-1', text : this.L('L{position-1}'), cls : this.splitCls }\n ]);\n }\n buildDayNumbers() {\n return ArrayHelper.populate(this.maxPosition, i => (\n { value : i + 1, text : this.L(`position${i + 1}`) }\n ));\n }\n set value(value) {\n const me = this;\n if (value && Array.isArray(value)) {\n value = value.join(',');\n }\n // if the value has no matching option in the store we need to use default value\n if (!value || !me.store.findRecord('value', value)) {\n value = me.defaultValue;\n }\n super.value = value;\n }\n get value() {\n const value = super.value;\n return value ? `${value}`.split(',').map(item => parseInt(item, 10)) : [];\n }\n};\n// Register this widget type with its Factory\nRecurrencePositionsCombo.initClass();\nRecurrencePositionsCombo._$name = 'RecurrencePositionsCombo';", "import RecurrenceDayRuleEncoder from '../../data/util/recurrence/RecurrenceDayRuleEncoder.js';\nimport Panel from '../../../Core/widget/Panel.js';\nimport '../../../Core/widget/Widget.js';\nimport '../../../Core/widget/Button.js';\nimport '../../../Core/widget/Checkbox.js';\nimport '../../../Core/widget/SlideToggle.js';\nimport '../../../Core/widget/DateField.js';\nimport '../../../Core/widget/NumberField.js';\nimport './field/RecurrenceFrequencyCombo.js';\nimport './field/RecurrenceDaysCombo.js';\nimport './field/RecurrenceDaysButtonGroup.js';\nimport './field/RecurrenceMonthDaysButtonGroup.js';\nimport './field/RecurrenceMonthsButtonGroup.js';\nimport './field/RecurrenceStopConditionCombo.js';\nimport './field/RecurrencePositionsCombo.js';\nimport BrowserHelper from '../../../Core/helper/BrowserHelper.js';\n/**\n * @module Scheduler/view/recurrence/RecurrenceEditorPanel\n */\n/**\n * Panel containing fields used to edit a {@link Scheduler.model.RecurrenceModel recurrence model}. Used by\n * {@link Scheduler/view/recurrence/RecurrenceEditor}, and by the recurrence tab in Scheduler Pro's event editor.\n *\n * Not intended to be used separately.\n *\n * @extends Core/widget/Panel\n * @classtype recurrenceeditorpanel\n * @private\n */\nexport default class RecurrenceEditorPanel extends Panel {\n static $name = 'RecurrenceEditorPanel';\n static type = 'recurrenceeditorpanel';\n static configurable = {\n cls : 'b-recurrenceeditor',\n record : false,\n addNone : false,\n items : {\n frequencyField : {\n type : 'recurrencefrequencycombo',\n name : 'frequency',\n label : 'L{RecurrenceEditor.Frequency}',\n weight : 10,\n onChange : 'up.onFrequencyFieldChange',\n addNone : 'up.addNone'\n },\n intervalField : {\n type : 'numberfield',\n weight : 15,\n name : 'interval',\n label : 'L{RecurrenceEditor.Every}',\n min : 1,\n required : true\n },\n daysButtonField : {\n type : 'recurrencedaysbuttongroup',\n weight : 20,\n name : 'days',\n forFrequency : 'WEEKLY'\n },\n // the radio button enabling \"monthDaysButtonField\" in MONTHLY mode\n monthDaysRadioField : {\n type : 'checkbox',\n weight : 30,\n toggleGroup : 'radio',\n forFrequency : 'MONTHLY',\n label : 'L{RecurrenceEditor.Each}',\n checked : true,\n onChange : 'up.onMonthDaysRadioFieldChange'\n },\n monthDaysButtonField : {\n type : 'recurrencemonthdaysbuttongroup',\n weight : 40,\n name : 'monthDays',\n forFrequency : 'MONTHLY'\n },\n monthsButtonField : {\n type : 'recurrencemonthsbuttongroup',\n weight : 50,\n name : 'months',\n forFrequency : 'YEARLY'\n },\n // the radio button enabling positions & days combos in MONTHLY & YEARLY modes\n positionAndDayRadioField : {\n type : 'checkbox',\n weight : 60,\n toggleGroup : 'radio',\n forFrequency : 'MONTHLY|YEARLY',\n label : 'L{RecurrenceEditor.On the}',\n onChange : 'up.onPositionAndDayRadioFieldChange'\n },\n positionsCombo : {\n type : 'recurrencepositionscombo',\n weight : 80,\n name : 'positions',\n forFrequency : 'MONTHLY|YEARLY'\n },\n daysCombo : {\n type : 'recurrencedayscombo',\n weight : 90,\n name : 'days',\n forFrequency : 'MONTHLY|YEARLY',\n flex : 1\n },\n stopRecurrenceField : {\n type : 'recurrencestopconditioncombo',\n weight : 100,\n label : 'L{RecurrenceEditor.End repeat}',\n onChange : 'up.onStopRecurrenceFieldChange'\n },\n countField : {\n type : 'numberfield',\n weight : 110,\n name : 'count',\n min : 2,\n required : true,\n disabled : true,\n label : ' '\n },\n endDateField : {\n type : 'datefield',\n weight : 120,\n name : 'endDate',\n hidden : true,\n disabled : true,\n label : ' ',\n required : true\n }\n }\n };\n setupWidgetConfig(widgetConfig) {\n // All our inputs must be mutated using triggers and touch gestures on mobile\n if (BrowserHelper.isMobile && !('editable' in widgetConfig)) {\n widgetConfig.editable = false;\n }\n return super.setupWidgetConfig(...arguments);\n }\n updateRecord(record) {\n super.updateRecord(record);\n const\n me = this,\n {\n frequencyField,\n daysButtonField,\n monthDaysButtonField,\n monthsButtonField,\n monthDaysRadioField,\n positionAndDayRadioField,\n stopRecurrenceField\n } = me.widgetMap;\n if (record) {\n const\n event = record.timeSpan,\n startDate = event?.startDate;\n // some fields default values are calculated based on event \"startDate\" value\n if (startDate) {\n // if no \"days\" value provided\n if (!record.days || !record.days.length) {\n daysButtonField.value = [RecurrenceDayRuleEncoder.encodeDay(startDate.getDay())];\n }\n // if no \"monthDays\" value provided\n if (!record.monthDays || !record.monthDays.length) {\n monthDaysButtonField.value = startDate.getDate();\n }\n // if no \"months\" value provided\n if (!record.months || !record.months.length) {\n monthsButtonField.value = startDate.getMonth() + 1;\n }\n }\n // if the record has both \"days\" & \"positions\" fields set check \"On the\" checkbox\n if (record.days && record.positions) {\n positionAndDayRadioField.check();\n if (!me.isPainted) {\n monthDaysRadioField.uncheck();\n }\n }\n else {\n monthDaysRadioField.check();\n if (!me.isPainted || !me.element.isConnected) {\n positionAndDayRadioField.uncheck();\n }\n }\n stopRecurrenceField.recurrence = record;\n }\n else {\n frequencyField.value = 'NONE';\n }\n }\n /**\n * Updates the provided recurrence model with the contained form data.\n * If recurrence model is not provided updates the last loaded recurrence model.\n * @internal\n */\n syncEventRecord(recurrence) {\n // get values relevant to the RecurrenceModel (from enabled fields only)\n const values = this.getValues((w) => w.name in recurrence && !w.disabled);\n // Disabled field does not contribute to values, clear manually\n if (!('endDate' in values)) {\n values.endDate = null;\n }\n if (!('count' in values)) {\n values.count = null;\n }\n recurrence.set(values);\n }\n toggleStopFields() {\n const\n me = this,\n { countField, endDateField } = me.widgetMap;\n switch (me.widgetMap.stopRecurrenceField.value) {\n case 'count' :\n countField.show();\n countField.enable();\n endDateField.hide();\n endDateField.disable();\n break;\n case 'date' :\n countField.hide();\n countField.disable();\n endDateField.show();\n endDateField.enable();\n break;\n default :\n countField.hide();\n endDateField.hide();\n countField.disable();\n endDateField.disable();\n }\n }\n onMonthDaysRadioFieldChange({ checked }) {\n const { monthDaysButtonField } = this.widgetMap;\n monthDaysButtonField.disabled = !checked || !this.isWidgetAvailableForFrequency(monthDaysButtonField);\n }\n onPositionAndDayRadioFieldChange({ checked }) {\n const { daysCombo, positionsCombo } = this.widgetMap;\n // toggle day & positions combos\n daysCombo.disabled = positionsCombo.disabled = !checked || !this.isWidgetAvailableForFrequency(daysCombo);\n }\n onStopRecurrenceFieldChange() {\n this.toggleStopFields();\n }\n isWidgetAvailableForFrequency(widget, frequency = this.widgetMap.frequencyField.value) {\n return !widget.forFrequency || widget.forFrequency.includes(frequency);\n }\n onFrequencyFieldChange({ value, oldValue, valid }) {\n const\n me = this,\n items = me.queryAll(w => 'forFrequency' in w),\n {\n intervalField,\n stopRecurrenceField\n } = me.widgetMap;\n if (valid && value) {\n for (let i = 0; i < items.length; i++) {\n const item = items[i];\n if (me.isWidgetAvailableForFrequency(item, value)) {\n item.show();\n item.enable();\n }\n else {\n item.hide();\n item.disable();\n }\n }\n // Special handling of NONE\n intervalField.hidden = stopRecurrenceField.hidden = value === 'NONE';\n if (value !== 'NONE') {\n intervalField.hint = me.L(`L{RecurrenceEditor.${value}intervalUnit}`);\n }\n // When a non-recurring record is loaded, intervalField is set to empty. We want it to default to 1 here\n // to not look weird (defaults to 1 on the data layer)\n if (oldValue === 'NONE' && intervalField.value == null) {\n intervalField.value = 1;\n }\n me.toggleFieldsState();\n }\n }\n toggleFieldsState() {\n const\n me = this,\n { widgetMap } = me;\n me.onMonthDaysRadioFieldChange({ checked : widgetMap.monthDaysRadioField.checked });\n me.onPositionAndDayRadioFieldChange({ checked : widgetMap.positionAndDayRadioField.checked });\n me.onStopRecurrenceFieldChange();\n }\n updateLocalization() {\n // do extra labels translation (not auto-translated yet)\n const { countField, intervalField, frequencyField } = this.widgetMap;\n countField.hint = this.L('L{RecurrenceEditor.time(s)}');\n if (frequencyField.value && frequencyField.value !== 'NONE') {\n intervalField.hint = this.L(`L{RecurrenceEditor.${frequencyField.value}intervalUnit}`);\n }\n super.updateLocalization();\n }\n}\n// Register this widget type with its Factory\nRecurrenceEditorPanel.initClass();\nRecurrenceEditorPanel._$name = 'RecurrenceEditorPanel';", "import Popup from '../../../Core/widget/Popup.js';\nimport './RecurrenceEditorPanel.js';\n/**\n * @module Scheduler/view/recurrence/RecurrenceEditor\n */\n/**\n * Class implementing a dialog to edit a {@link Scheduler.model.RecurrenceModel recurrence model}. The class is used by\n * the {@link Scheduler.view.mixin.RecurringEvents recurring events} feature, and you normally don't need to instantiate\n * it.\n *\n * Before showing the dialog need to use {@link Core.widget.Container#property-record} to load a\n * {@link Scheduler.model.RecurrenceModel recurrence model} data into the editor fields. For example:\n *\n * ```javascript\n * // make the editor instance\n * const editor = new RecurrenceEditor();\n * // load recurrence model into it\n * editor.record = new RecurrenceModel({ frequency : \"WEEKLY\" });\n * // display the editor\n * editor.show();\n * ```\n *\n * @extends Core/widget/Popup\n * @classtype recurrenceeditor\n */\nexport default class RecurrenceEditor extends Popup {\n static get $name() {\n return 'RecurrenceEditor';\n }\n // Factoryable type name\n static get type() {\n return 'recurrenceeditor';\n }\n static get configurable() {\n return {\n draggable : true,\n closable : true,\n floating : true,\n cls : 'b-recurrenceeditor',\n title : 'L{Repeat event}',\n autoClose : true,\n width : 470,\n items : {\n recurrenceEditorPanel : {\n type : 'recurrenceeditorpanel',\n title : null\n }\n },\n bbar : {\n defaults : {\n localeClass : this\n },\n items : {\n foo : {\n type : 'widget',\n cls : 'b-label-filler',\n weight : 100\n },\n saveButton : {\n color : 'b-green',\n text : 'L{Save}',\n onClick : 'up.onSaveClick',\n weight : 200\n },\n cancelButton : {\n color : 'b-gray',\n text : 'L{Object.Cancel}',\n onClick : 'up.onCancelClick',\n weight : 300\n }\n }\n },\n scrollable : {\n overflowY : true\n }\n };\n }\n updateReadOnly(readOnly) {\n super.updateReadOnly(readOnly);\n // No save or cancel buttons. It's purely for information display when in readOnly mode\n this.bbar.hidden = readOnly;\n }\n get recurrenceEditorPanel() {\n return this.widgetMap.recurrenceEditorPanel;\n }\n updateRecord(record) {\n this.recurrenceEditorPanel.record = record;\n }\n onSaveClick() {\n const me = this;\n if (me.saveHandler) {\n me.saveHandler.call(me.thisObj || me, me, me.record);\n }\n else {\n me.recurrenceEditorPanel.syncEventRecord();\n me.close();\n }\n }\n onCancelClick() {\n const me = this;\n if (me.cancelHandler) {\n me.cancelHandler.call(me.thisObj || me, me, me.record);\n }\n else {\n me.close();\n }\n }\n}\n// Register this widget type with its Factory\nRecurrenceEditor.initClass();\nRecurrenceEditor._$name = 'RecurrenceEditor';", "import Widget from '../../../Core/widget/Widget.js';\nimport Base from '../../../Core/Base.js';\nimport '../../view/recurrence/RecurrenceConfirmationPopup.js';\nimport '../../view/recurrence/field/RecurrenceCombo.js';\nimport '../../view/recurrence/RecurrenceLegendButton.js';\nimport '../../view/recurrence/RecurrenceEditor.js';\n/**\n * @module Scheduler/feature/mixin/RecurringEventEdit\n */\n/**\n * This mixin class provides recurring events functionality to the {@link Scheduler.feature.EventEdit event editor}.\n * @mixin\n */\nexport default Target => class RecurringEventEdit extends (Target || Base) {\n static get $name() {\n return 'RecurringEventEdit';\n }\n static get configurable() {\n return {\n recurringEventsItems : {\n /**\n * Reference to the `Repeat` event field, if used\n * @member {Scheduler.view.recurrence.field.RecurrenceCombo} recurrenceCombo\n * @readonly\n */\n recurrenceCombo : {\n type : 'recurrencecombo',\n label : 'L{EventEdit.Repeat}',\n ref : 'recurrenceCombo',\n weight : 700\n },\n /**\n * Reference to the button that opens the event repeat settings dialog, if used\n * @member {Scheduler.view.recurrence.RecurrenceLegendButton} editRecurrenceButton\n * @readonly\n */\n editRecurrenceButton : {\n type : 'recurrencelegendbutton',\n ref : 'editRecurrenceButton',\n name : 'recurrenceRule',\n color : 'b-gray',\n menuIcon : null,\n flex : 1,\n weight : 800,\n ignoreParentReadOnly : true\n }\n },\n /**\n * Set to `false` to hide recurring fields in event editor, even if the\n * {@link Scheduler.view.mixin.RecurringEvents#config-enableRecurringEvents Recurring Events} is `true`\n * and a recurring event is being edited.\n * @config {Boolean}\n * @category Recurring\n */\n showRecurringUI : null\n };\n }\n changeEditorConfig(editorConfig) {\n editorConfig.items = { ...editorConfig.items, ...this.recurringEventsItems };\n // EditBase inserts extraItems *after* all default items are in\n editorConfig = super.changeEditorConfig(editorConfig);\n return editorConfig;\n }\n doDestroy() {\n this._recurrenceConfirmation?.destroy();\n this._recurrenceEditor?.destroy();\n super.doDestroy();\n }\n onEditorConstructed(editor) {\n const me = this;\n editor.ion({\n hide : me.onRecurringEventEditorHide,\n thisObj : me\n });\n if (me.editRecurrenceButton) {\n me.editRecurrenceButton.menu = me.recurrenceEditor;\n }\n me.recurrenceCombo?.ion({\n change : me.onRecurrenceComboChange,\n thisObj : me\n });\n }\n updateReadOnly(readOnly) {\n if (this._recurrenceEditor) {\n this._recurrenceEditor.readOnly = readOnly;\n }\n }\n internalShowEditor() {\n this.toggleRecurringFieldsVisibility(this.client.enableRecurringEvents && this.showRecurringUI !== false);\n }\n toggleRecurringFieldsVisibility(show = true) {\n const methodName = show ? 'show' : 'hide';\n this.editRecurrenceButton?.[methodName]?.();\n this.recurrenceCombo?.[methodName]?.();\n }\n onRecurringEventEditorHide() {\n // Use the private property name in order not to call it into existence\n if (this._recurrenceEditor?.isVisible) {\n this.recurrenceEditor.hide();\n }\n // Use the private property name in order not to call it into existence\n if (this._recurrenceConfirmation?.isVisible) {\n this.recurrenceConfirmation.hide();\n }\n }\n // Builds RecurrenceModel to load into the recurrenceEditor\n // It builds the model based on either:\n // - recurrence rule string (if provided)\n // - or the event being edited recurrence (if the event is repeating)\n // - or simply make a recurrence model w/ default state (by default means: Frequency=Daily, Interval=1)\n makeRecurrence(rule) {\n const\n event = this.eventRecord,\n eventCopy = event.copy();\n let recurrence = event.recurrence;\n if (!rule && recurrence) {\n recurrence = recurrence.copy();\n }\n else {\n recurrence = new event.recurrenceModel(rule ? { rule } : {});\n }\n // bind cloned recurrence to the cloned event\n recurrence.timeSpan = eventCopy;\n // update cloned event w/ start date from the UI field\n eventCopy.setStartDate(this.values.startDate);\n recurrence.suspendTimeSpanNotifying();\n return recurrence;\n }\n onRecurrableEventBeforeSave({ eventRecord, context }) {\n const me = this;\n // Other views features may trigger beforeEventSave, so only react when *we* are editing.\n if (me.isEditing && !eventRecord.isCreating && eventRecord.supportsRecurring &&\n (eventRecord.isRecurring || eventRecord.isOccurrence)) {\n me.recurrenceConfirmation.confirm({\n actionType : 'update',\n eventRecord,\n changerFn() {\n context.finalize(true);\n },\n cancelFn() {\n context.finalize(false);\n }\n });\n // signalizes that we plan to decide save or not asynchronously\n context.async = true;\n }\n }\n set recurrenceConfirmation(recurrenceConfirmation) {\n this._recurrenceConfirmation = recurrenceConfirmation;\n }\n get recurrenceConfirmation() {\n const me = this;\n let recurrenceConfirmation = me._recurrenceConfirmation;\n if (!recurrenceConfirmation || !recurrenceConfirmation.$$name) {\n recurrenceConfirmation = Widget.create({\n type : 'recurrenceconfirmation',\n owner : me.editor,\n ...recurrenceConfirmation\n });\n me._recurrenceConfirmation = recurrenceConfirmation;\n }\n return recurrenceConfirmation;\n }\n set recurrenceEditor(recurrenceEditor) {\n this._recurrenceEditor = recurrenceEditor;\n }\n get recurrenceEditor() {\n const me = this;\n let recurrenceEditor = me._recurrenceEditor;\n // Recurrence editor is centered and modal.\n if (!recurrenceEditor || !recurrenceEditor.$$name) {\n me._recurrenceEditor = recurrenceEditor = Widget.create({\n type : 'recurrenceeditor',\n autoShow : false,\n centered : true,\n modal : true,\n // It's used as the Menu of a Button which syncs the width unless it's already set\n minWidth : 'auto',\n constrainTo : globalThis,\n anchor : false,\n rootElement : me.rootElement,\n saveHandler : me.recurrenceEditorSaveHandler,\n onBeforeShow : me.onBeforeShowRecurrenceEditor.bind(me),\n thisObj : me,\n ...recurrenceEditor\n });\n // Must set *after* construction, otherwise it becomes the default state\n // to reset readOnly back to. Must use direct property access because\n // getter consults state of editor.\n recurrenceEditor.readOnly = me._readOnly;\n }\n return recurrenceEditor;\n }\n onBeforeShowRecurrenceEditor() {\n const\n me = this,\n { recurrenceEditor, eventRecord } = me;\n if (recurrenceEditor && eventRecord?.supportsRecurring) {\n // if the event has no recurrence yet ..initialize it before showing recurrence editor\n if (!me.recurrence) {\n me.recurrence = me.makeRecurrence();\n }\n // update the cloned recurrence w/ up to date start date value\n me.recurrence.timeSpan.setStartDate(me.values.startDate);\n // load RecurrenceModel record into the recurrence editor\n recurrenceEditor.record = me.recurrence;\n // In case they drag it. Centered falls off if the widget has position set.\n recurrenceEditor.centered = true;\n }\n }\n loadRecurrenceData(recurrence) {\n this.recurrence = recurrence;\n this.updateRecurrenceFields(recurrence);\n }\n updateRecurrenceFields(recurrence) {\n const\n me = this,\n { editRecurrenceButton } = me;\n if (me.recurrenceCombo) {\n me.recurrenceCombo.recurrence = recurrence;\n }\n // update the recurrence legend\n if (editRecurrenceButton) {\n editRecurrenceButton.recurrence = recurrence;\n editRecurrenceButton.value = recurrence ? recurrence.rule : null;\n if (recurrence && me.client.enableRecurringEvents && me.showRecurringUI !== false) {\n editRecurrenceButton.show();\n }\n else {\n editRecurrenceButton.hide();\n }\n }\n }\n onRecurrenceComboChange({ source, value, userAction }) {\n if (userAction) {\n const\n me = this,\n { recurrenceEditor } = me;\n if (value === source.customValue) {\n // if user picked \"Custom\" - show recurrence editor\n // This will recurse through the change event into the opposite side\n // of the value test which will call updateRecurrenceFields, where the\n // assignment to the value of the recurrenceCombo will be a non-change.\n // That will sync the state of the recurrenceButton.\n me.recurrenceCombo.recurrence = me.makeRecurrence();\n if (recurrenceEditor.centered) {\n recurrenceEditor.show();\n }\n else {\n recurrenceEditor.show((me.editRecurrenceButton || source).element);\n }\n }\n // user has picked some frequency -> make a new recurrence based on it\n else {\n me.loadRecurrenceData(value && value !== 'none' ? me.makeRecurrence(`FREQ=${value}`) : null);\n }\n }\n }\n recurrenceEditorSaveHandler(editor, recurrence) {\n // apply changes to the kept recurrence\n editor.recurrenceEditorPanel.syncEventRecord(recurrence);\n // update the recurrence related UI\n this.updateRecurrenceFields(recurrence);\n editor.close();\n }\n onDatesChange(...args) {\n super.onDatesChange(...args);\n if (!this.loadingRecord && this.editRecurrenceButton) {\n const { startDate } = this.values;\n if (startDate) {\n this.editRecurrenceButton.eventStartDate = startDate;\n }\n }\n }\n internalLoadRecord(eventRecord) {\n if (eventRecord?.supportsRecurring) {\n this.loadRecurrenceData(eventRecord.recurrence ? this.makeRecurrence() : null);\n }\n }\n updateRecord(record) {\n // Special handling for when setting recurrence to \"None\". Since button gets hidden its value is not picked up\n // by the normal flow.\n if (record.recurrenceRule && !this.recurrence) {\n record.recurrenceRule = null;\n }\n return super.updateRecord(record);\n }\n};\n", "import Combo from '../../Core/widget/Combo.js';\nimport DomHelper from '../../Core/helper/DomHelper.js';\n/**\n * @module Scheduler/widget/ResourceCombo\n */\n/**\n * A Combo subclass which selects resources, optionally displaying the {@link Scheduler.model.ResourceModel#field-eventColor}\n * of each resource in the picker and in the input area.\n *\n * {@inlineexample Scheduler/widget/ResourceCombo.js}\n *\n * @extends Core/widget/Combo\n * @classtype resourcecombo\n * @inputfield\n */\nexport default class ResourceCombo extends Combo {\n static get $name() {\n return 'ResourceCombo';\n }\n // Factoryable type name\n static get type() {\n return 'resourcecombo';\n }\n static get configurable() {\n return {\n /**\n * Show the {@link Scheduler.model.ResourceModel#field-eventColor event color} for each resource\n * @config {Boolean}\n * @default false\n */\n showEventColor : null,\n displayField : 'name',\n valueField : 'id',\n picker : {\n cls : 'b-resourcecombo-picker',\n itemIconTpl(record) {\n if (this.owner.showEventColor) {\n const\n { eventColor } = record,\n isStyleColor = !DomHelper.isNamedColor(eventColor),\n style = eventColor ? (isStyleColor ? ` style=\"color:${eventColor}\"` : '') : ' style=\"display:none\"',\n colorClass = !eventColor || isStyleColor ? '' : ` b-sch-foreground-${eventColor}`;\n return ``;\n }\n if (this.multiSelect) {\n return ``;\n }\n return '';\n }\n }\n };\n }\n changeShowEventColor(showEventColor) {\n return Boolean(showEventColor);\n }\n updateShowEventColor(showEventColor) {\n this.element.classList.toggle('b-show-event-color', Boolean(showEventColor));\n this._picker?.element.classList.toggle('b-show-event-color', Boolean(showEventColor));\n }\n changePicker(picker, oldPicker) {\n picker = super.changePicker(picker, oldPicker);\n picker?.element.classList.toggle('b-show-event-color', Boolean(this.showEventColor));\n return picker;\n }\n // Implementation needed at this level because it has two inner elements in its inputWrap\n get innerElements() {\n return [\n {\n class : 'b-icon b-resource-icon b-icon-square b-hide-display',\n reference : 'resourceIcon'\n },\n this.inputElement\n ];\n }\n syncInputFieldValue() {\n const\n me = this,\n {\n resourceIcon,\n lastResourceIconCls\n } = me,\n { classList } = resourceIcon,\n eventColor = me.selected?.eventColor ?? '';\n super.syncInputFieldValue();\n // Remove last colour whichever way it was done\n resourceIcon.style.color = '';\n lastResourceIconCls && classList.remove(lastResourceIconCls);\n me.lastResourceIconCls = null;\n if (eventColor) {\n if (DomHelper.isNamedColor(eventColor)) {\n me.lastResourceIconCls = `b-sch-foreground-${eventColor}`;\n classList.add(me.lastResourceIconCls);\n }\n else {\n resourceIcon.style.color = eventColor;\n }\n classList.remove('b-hide-display');\n }\n else {\n classList.add('b-hide-display');\n }\n }\n}\n// Register this widget type with its Factory\nResourceCombo.initClass();\nResourceCombo._$name = 'ResourceCombo';", "import ColorField from '../../Core/widget/ColorField.js';\nimport './EventColorPicker.js';\n/**\n * @module Scheduler/widget/EventColorField\n */\n/**\n * Color field widget for editing the EventModel's {@link Scheduler.model.mixin.EventModelMixin#field-eventColor} field.\n * See Schedulers {@link Scheduler.view.mixin.TimelineEventRendering#config-eventColor eventColor config} for default\n * available colors.\n *\n * What differs this widget from {@link Core.widget.ColorField} is that this uses the\n * {@link Scheduler.widget.EventColorPicker} as its picker. And also that the {@link #config-name} config is set to\n * `eventColor` per default.\n *\n * {@inlineexample Scheduler/widget/EventColorField.js}\n *\n * This widget may be operated using the keyboard. `ArrowDown` opens the color picker, which itself is keyboard\n * navigable.\n *\n * ```javascript\n * let eventColorField = new EventColorField();\n * ```\n *\n * @extends Core/widget/ColorField\n * @classtype eventcolorfield\n * @inputfield\n */\nexport default class EventColorField extends ColorField {\n static $name = 'EventColorField';\n static type = 'eventcolorfield';\n static configurable = {\n picker : {\n type : 'eventcolorpicker'\n },\n name : 'eventColor'\n };\n}\nEventColorField.initClass();\nEventColorField._$name = 'EventColorField';", "import EditBase from './base/EditBase.js';\nimport GridFeatureManager from '../../Grid/feature/GridFeatureManager.js';\nimport ObjectHelper from '../../Core/helper/ObjectHelper.js';\nimport '../view/EventEditor.js';\nimport Delayable from '../../Core/mixin/Delayable.js';\nimport RecurringEventEdit from './mixin/RecurringEventEdit.js';\nimport '../../Core/widget/TextField.js';\nimport '../../Scheduler/widget/ResourceCombo.js';\nimport TimeSpan from '../../Scheduler/model/TimeSpan.js';\nimport '../../Core/widget/DateField.js';\nimport '../../Core/widget/TimeField.js';\nimport '../../Core/widget/Button.js';\nimport '../widget/EventColorField.js';\nimport Widget from '../../Core/widget/Widget.js';\nimport DateHelper from '../../Core/helper/DateHelper.js';\nimport AsyncHelper from '../../Core/helper/AsyncHelper.js';\nimport TaskEditStm from './mixin/TaskEditStm.js';\n/**\n * @module Scheduler/feature/EventEdit\n */\nconst punctuation = /[^\\w\\d]/g;\n/**\n * Feature that displays a popup containing widgets for editing event data.\n *\n * {@inlineexample Scheduler/feature/EventEdit.js}\n *\n * To customize its contents you can:\n *\n * * Reconfigure built-in widgets by providing override configs in the {@link Scheduler.feature.base.EditBase#config-items} config.\n * * Change the date format of the date & time fields: {@link Scheduler.feature.base.EditBase#config-dateFormat} and {@link Scheduler.feature.base.EditBase#config-timeFormat }\n * * Configure provided widgets in the editor and add your own in the {@link Scheduler.feature.base.EditBase#config-items} config.\n * * Remove fields related to recurring events configuration (such as `recurrenceCombo`) by setting {@link Scheduler.feature.mixin.RecurringEventEdit#config-showRecurringUI} config to `false`.\n * * Advanced: Reconfigure the whole editor widget using {@link #config-editorConfig}\n *\n * ## Built-in widgets\n *\n * The built-in widgets are:\n *\n * | Widget ref | Type | Weight | Description |\n * |------------------------|----------------------------------------------------------|--------|----------------------------------------------------------------|\n * | `nameField` | {@link Core.widget.TextField} | 100 | Edit name |\n * | `resourceField` | {@link Scheduler.widget.ResourceCombo} | 200 | Pick resource(s) |\n * | `startDateField` | {@link Core.widget.DateField} | 300 | Edit startDate (date part) |\n * | `startTimeField` | {@link Core.widget.TimeField} | 400 | Edit startDate (time part) |\n * | `endDateField` | {@link Core.widget.DateField} | 500 | Edit endDate (date part) |\n * | `endTimeField` | {@link Core.widget.TimeField} | 600 | Edit endDate (time part) |\n * | `recurrenceCombo` | {@link Scheduler.view.recurrence.field.RecurrenceCombo} | 700 | Select recurrence rule (only visible if recurrence is used) |\n * | `editRecurrenceButton` | {@link Scheduler.view.recurrence.RecurrenceLegendButton} | 800 | Edit the recurrence rule (only visible if recurrence is used) |\n * | `colorField` \u00B9 | {@link Scheduler.widget.EventColorField} | 700 | Choose background color for the event bar |\n *\n * **\u00B9** Set the {@link Scheduler.view.SchedulerBase#config-showEventColorPickers} config to `true` to enable this field\n *\n * The built-in buttons are:\n *\n * | Widget ref | Type | Weight | Description |\n * |------------------------|--------------------------------------------------------------------------|--------|----------------------------------------------------------------|\n * | `saveButton` | {@link Core.widget.Button} | 100 | Save event button on the bbar |\n * | `deleteButton` | {@link Core.widget.Button} | 200 | Delete event button on the bbar |\n * | `cancelButton` | {@link Core.widget.Button} | 300 | Cancel event editing button on the bbar |\n *\n * ## Removing a built-in item\n *\n * To remove a built-in widget, specify its `ref` as `null` in the `items` config:\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * eventEdit : {\n * items : {\n * // Remove the start time field\n * startTimeField : null\n * }\n * }\n * }\n * })\n * ```\n *\n * Bottom buttons may be hidden using the `bbar` config passed to `editorConfig`:\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * eventEdit : {\n * editorConfig : {\n * bbar : {\n * items : {\n * deleteButton : null\n * }\n * }\n * }\n * }\n * }\n * })\n * ```\n *\n * To remove fields related to recurring events configuration (such as `recurrenceCombo`), set {@link Scheduler.feature.mixin.RecurringEventEdit#config-showRecurringUI} config to `false`.\n *\n * ## Customizing a built-in widget\n *\n * To customize a built-in widget, use its `ref` as the key in the `items` config and specify the configs you want\n * to change (they will merge with the widgets default configs):\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * eventEdit : {\n * items : {\n * // ref for an existing field\n * nameField : {\n * // Change its label\n * label : 'Description'\n * }\n * }\n * }\n * }\n * })\n * ```\n *\n * ## Adding custom widgets\n *\n * To add a custom widget, add an entry to the `items` config. The `name` property links the input field to a field in\n * the loaded event record:\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * eventEdit : {\n * items : {\n * // Key to use as fields ref (for easier retrieval later)\n * color : {\n * type : 'combo',\n * label : 'Color',\n * items : ['red', 'green', 'blue'],\n * // name will be used to link to a field in the event record when loading and saving in the editor\n * name : 'eventColor'\n * }\n * }\n * }\n * }\n * })\n * ```\n *\n * ## Video guides\n * {@frameworktabs}\n * {@react}\n * [@youtube](https://www.youtube.com/embed/ghWLmifpO_4)\n * {@endreact}\n * {@vue}\n * [@youtube](https://www.youtube.com/embed/o7xQ6B_Y04w)\n * {@endvue}\n * {@angular}\n * [@youtube](https://www.youtube.com/embed/OuSH7YFndPE)\n * {@endangular}\n * {@endframeworktabs}\n *\n * For more info on customizing the event editor, please see \"Customize event editor\" guide.\n *\n * This feature is **enabled** by default\n *\n * @mixes Scheduler/feature/mixin/RecurringEventEdit\n * @extends Scheduler/feature/base/EditBase\n * @demo Scheduler/eventeditor\n * @classtype eventEdit\n * @feature\n */\nexport default class EventEdit extends EditBase.mixin(TaskEditStm, RecurringEventEdit, Delayable) {\n //region Config\n static $name = 'EventEdit';\n static configurable = {\n /**\n * The event that shall trigger showing the editor. Defaults to `eventdblclick`, set to `''` or null to\n * disable editing of existing events.\n * @config {String}\n * @default\n * @category Editor\n */\n triggerEvent : 'eventdblclick',\n /**\n * The data field in the model that defines the eventType.\n * Applied as class (b-eventtype-xx) to the editors element, to allow showing/hiding fields depending on\n * eventType. Dynamic toggling of fields in the editor is activated by adding an `eventTypeField` field to\n * your widget:\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * eventEdit : {\n * items : {\n * eventTypeField : {\n * type : 'combo',\n * name : 'eventType',\n * label : 'Type',\n * items : ['Appointment', 'Internal', 'Meeting']\n * }\n * }\n * }\n * }\n * });\n * ```\n * Note, your event model class also must declare this field:\n * ```javascript\n * class MyEvent extends EventModel {\n * static get fields() {\n * return [\n * { name : 'eventType' }\n * ];\n * }\n * }\n * ```\n * @config {String}\n * @default\n * @category Editor\n */\n typeField : 'eventType',\n /**\n * The current {@link Scheduler.model.EventModel} record, which is being edited by the event editor.\n * @property {Scheduler.model.EventModel}\n * @readonly\n */\n eventRecord : null,\n /**\n * Specify `true` to put the editor in read only mode.\n * @config {Boolean}\n * @default false\n */\n readOnly : null,\n /**\n * The configuration for the internal editor widget. With this config you can control the *type*\n * of editor (defaults to `Popup`) and which widgets to show,\n * change the items in the `bbar`, or change whether the popup should be modal etc.\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * eventEdit : {\n * editorConfig : {\n * modal : true,\n * cls : 'my-editor' // A CSS class,\n * items : {\n * owner : {\n * weight : -100, // Will sort above system-supplied fields which are weight 100 to 800\n * type : 'usercombo',\n * name : 'owner',\n * label : 'Owner'\n * },\n * agreement : {\n * weight : 1000, // Will sort below system-supplied fields which are weight 100 to 800\n * type : 'checkbox',\n * name : 'agreement',\n * label : 'Agree to terms'\n * },\n * resourceField : {\n * // Apply a special filter to limit the Combo's access\n * // to resources.\n * store {\n * filters : [{\n * filterBy(resource) {\n * return shouldShowResource(record);\n * }\n * }]\n * }\n * }\n * },\n * bbar : {\n * items : {\n * deleteButton : {\n * hidden : true\n * }\n * }\n * }\n * }\n * }\n * }\n * });\n * ```\n *\n * Or to use your own custom editor:\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * eventEdit : {\n * editorConfig : {\n * type : 'myCustomEditorType'\n * }\n * }\n * }\n * });\n * ```\n * @config {Object}\n * @category Editor\n */\n editorConfig : {\n type : 'eventeditor',\n title : 'L{EventEdit.Edit event}',\n closable : true,\n localeClass : this,\n defaults : {\n localeClass : this\n },\n items : {\n /**\n * Reference to the name field, if used\n * @member {Core.widget.TextField} nameField\n * @readonly\n */\n nameField : {\n type : 'text',\n label : 'L{Name}',\n clearable : true,\n name : 'name',\n weight : 100,\n required : true\n },\n /**\n * Reference to the resource field, if used\n * @member {Core.widget.Combo} resourceField\n * @readonly\n */\n resourceField : {\n type : 'resourcecombo',\n label : 'L{Resource}',\n name : 'resource',\n editable : true,\n valueField : 'id',\n displayField : 'name',\n highlightExternalChange : false,\n destroyStore : true,\n weight : 200\n },\n /**\n * Reference to the start date field, if used\n * @member {Core.widget.DateField} startDateField\n * @readonly\n */\n startDateField : {\n type : 'date',\n clearable : false,\n required : true,\n label : 'L{Start}',\n name : 'startDate',\n validateDateOnly : true,\n weight : 300\n },\n /**\n * Reference to the start time field, if used\n * @member {Core.widget.TimeField} startTimeField\n * @readonly\n */\n startTimeField : {\n type : 'time',\n clearable : false,\n required : true,\n name : 'startDate',\n cls : 'b-match-label',\n weight : 400\n },\n /**\n * Reference to the end date field, if used\n * @member {Core.widget.DateField} endDateField\n * @readonly\n */\n endDateField : {\n type : 'date',\n clearable : false,\n required : true,\n label : 'L{End}',\n name : 'endDate',\n validateDateOnly : true,\n weight : 500\n },\n /**\n * Reference to the end time field, if used\n * @member {Core.widget.TimeField} endTimeField\n * @readonly\n */\n endTimeField : {\n type : 'time',\n clearable : false,\n required : true,\n name : 'endDate',\n cls : 'b-match-label',\n weight : 600\n },\n colorField : {\n label : 'L{SchedulerBase.color}',\n type : 'eventColorField',\n name : 'eventColor',\n weight : 700\n }\n },\n bbar : {\n // When readOnly, child buttons are hidden\n hideWhenEmpty : true,\n defaults : {\n localeClass : this\n },\n items : {\n /**\n * Reference to the save button, if used\n * @member {Core.widget.Button} saveButton\n * @readonly\n */\n saveButton : {\n color : 'b-blue',\n cls : 'b-raised',\n text : 'L{Save}',\n weight : 100\n },\n /**\n * Reference to the delete button, if used\n * @member {Core.widget.Button} deleteButton\n * @readonly\n */\n deleteButton : {\n text : 'L{Delete}',\n weight : 200\n },\n /**\n * Reference to the cancel button, if used\n * @member {Core.widget.Button} cancelButton\n * @readonly\n */\n cancelButton : {\n text : 'L{Object.Cancel}',\n weight : 300\n }\n }\n }\n },\n targetEventElement : null,\n /**\n * How much of a long event bar which is clipped by scrolling must be brought into view\n * to facilitate editing.\n *\n * In a horizontal Scheduler, this will bring 100 pixels of width into view.\n *\n * In a vertical Scheduler, this will bring 100 pixels of height into view.\n * @prp {Number}\n * @defult\n */\n minEditSize : 100\n };\n static get pluginConfig() {\n return {\n chain : [\n 'populateEventMenu',\n 'onEventEnterKey'\n ],\n assign : [\n 'editEvent'\n ]\n };\n }\n //endregion\n //region Init & destroy\n construct(scheduler, config) {\n // Default to the scheduler's state, but configs may override\n this.readOnly = scheduler.readOnly;\n super.construct(scheduler, config);\n scheduler.ion({\n projectChange : 'onChangeProject',\n readOnly : 'onClientReadOnlyToggle',\n thisObj : this\n });\n }\n get scheduler() {\n return this.client;\n }\n get project() {\n return this.client.project;\n }\n //endregion\n //region Editing\n /**\n * Get/set readonly state\n * @property {Boolean}\n */\n get readOnly() {\n return this._editor ? this.editor.readOnly : this._readOnly;\n }\n updateReadOnly(readOnly) {\n super.updateReadOnly(readOnly);\n if (this._editor) {\n this.editor.readOnly = readOnly;\n }\n }\n onClientReadOnlyToggle({ readOnly }) {\n this.readOnly = readOnly;\n }\n /**\n * Returns the editor widget representing this feature\n * @member {Core.widget.Popup}\n */\n get editor() {\n const\n me = this,\n editorListeners = {\n beforehide : 'resetEditingContext',\n beforeshow : 'onBeforeEditorShow',\n keydown : 'onPopupKeyDown',\n thisObj : me\n };\n let { _editor : editor } = me;\n if (editor) {\n return editor;\n }\n editor = me._editor = Widget.create(me.getEditorConfig());\n const {\n startDateField,\n startTimeField,\n endDateField,\n endTimeField\n } = editor.widgetMap;\n // If the date field doesn't exist, the time field must encapsulate the\n // date component of the start/end points and must lay out right.\n if (!startDateField && startTimeField) {\n startTimeField.keepDate = true;\n startTimeField.label = me.L('Start');\n startTimeField.flex = '1 0 100%';\n }\n if (!endDateField && endTimeField) {\n endTimeField.keepDate = true;\n endTimeField.label = me.L('End');\n endTimeField.flex = '1 0 100%';\n }\n // If the default Popup has been reconfigured to be static, add it as a child of our client.\n if (!editor.floating && !editor.positioned) {\n // If not configured with an appendTo, we add it as a child of our client.\n if (!editor.element.parentNode) {\n me.client.add(editor);\n }\n delete editorListeners.beforehide;\n delete editorListeners.beforeshow;\n editorListeners.beforeToggleReveal = 'onBeforeEditorToggleReveal';\n }\n // Must set *after* construction, otherwise it becomes the default state\n // to reset readOnly back to. Must use direct property access because\n // getter consults state of editor.\n editor.readOnly = me._readOnly;\n if (editor.items.length === 0) {\n console.warn('Event Editor configured without any `items`');\n }\n // add listeners programmatically so users cannot override them accidentally\n editor.ion(editorListeners);\n /**\n * Fired before the editor will load the event record data into its input fields. This is useful if you\n * want to modify the fields before data is loaded (e.g. set some input field to be readonly)\n * @on-owner\n * @event eventEditBeforeSetRecord\n * @param {Core.widget.Container} source The editor widget\n * @param {Scheduler.model.EventModel} record The record\n */\n me.scheduler.relayEvents(editor, ['beforeSetRecord'], 'eventEdit');\n // assign widget variables, using widget name: startDate -> me.startDateField\n // widgets with id set use that instead, id -> me.idField\n Object.values(editor.widgetMap).forEach(widget => {\n const ref = widget.ref || widget.id;\n // don't overwrite if already defined\n if (ref && !me[ref]) {\n me[ref] = widget;\n switch (widget.name) {\n case 'startDate':\n case 'endDate':\n widget.ion({ change : 'onDatesChange', thisObj : me });\n break;\n }\n }\n });\n // launch onEditorConstructed hook if provided\n me.onEditorConstructed?.(editor);\n me.eventTypeField?.ion({ change : 'onEventTypeChange', thisObj : me });\n me.saveButton?.ion({ click : 'onSaveClick', thisObj : me });\n me.deleteButton?.ion({ click : 'onDeleteClick', thisObj : me });\n me.cancelButton?.ion({ click : 'onCancelClick', thisObj : me });\n return editor;\n }\n getEditorConfig() {\n const\n me = this,\n { cls, scheduler } = me,\n result = ObjectHelper.assign({\n owner : scheduler,\n eventEditFeature : me,\n weekStartDay : me.weekStartDay,\n align : 'b-t',\n id : `${scheduler.id}-event-editor`,\n autoShow : false,\n anchor : true,\n scrollAction : 'realign',\n constrainTo : globalThis,\n cls\n }, me.editorConfig);\n // User configuration may have included a render target which means the editor\n // will not be floating.\n if (Widget.prototype.getRenderContext(result)[0]) {\n result.floating = false;\n }\n // If the default Popup has been reconfigured to be static, ensure it starts\n // life as a visible but collapsed panel.\n if (result.floating === false && !result.positioned) {\n result.collapsible = {\n type : 'overlay',\n direction : 'right',\n autoClose : false,\n tool : null,\n recollapseTool : null\n };\n result.collapsed = true;\n result.hidden = result.anchor = false;\n result.hide = function() {\n this.collapsible.toggleReveal(false);\n };\n }\n if (!scheduler.showEventColorPickers && result.items.colorField) {\n result.items.colorField.hidden = true;\n }\n // Layout-affecting props must be available early so that appendTo ends up with\n // correct layout.\n result.onElementCreated = me.updateCSSVars.bind(this);\n return result;\n }\n updateCSSVars({ element }) {\n // must result in longest format, ie 2 digits for date and all time parts.\n const\n time = new Date(2000, 12, 31, 23, 55, 55),\n dateLength = DateHelper.format(time, this.dateFormat).replace(punctuation, '').length,\n timeLength = DateHelper.format(time, this.timeFormat).replace(punctuation, '').length,\n dateTimeLength = dateLength + timeLength;\n element.style.setProperty('--date-time-length', `${dateTimeLength}em`);\n element.style.setProperty('--date-width-difference', `${(dateLength - timeLength) / 2}em`);\n }\n // Called from editEvent() to actually show the editor\n async internalShowEditor(eventRecord, resourceRecord, align = null) {\n const\n me = this,\n { scheduler } = me,\n { useInitialAnimation } = scheduler,\n // Align to the element (b-sch-event) and not the wrapper\n eventElement = align?.target?.nodeType === Element.ELEMENT_NODE\n ? align.target\n : scheduler.getElementFromEventRecord(eventRecord, resourceRecord),\n isPartOfStore = eventRecord.isPartOfStore(scheduler.eventStore);\n align = align ?? {\n // Align to the element (b-sch-event) and not the wrapper\n target : eventElement,\n anchor : true\n };\n // Event not in current TimeAxis - cannot be edited without extending the TimeAxis.\n // If there's no event element and the eventRecord is not in the store, we still\n // edit centered on the Scheduler - we're adding a new event\n if (align.target || (!isPartOfStore || eventRecord.resources.length === 0) || eventRecord.isCreating) {\n // need to add this css class as early as possible to prevent\n // the event tooltip from appearing\n scheduler.element.classList.add('b-eventeditor-editing');\n me.resourceRecord = resourceRecord;\n const { editor } = me;\n me.editingContext = {\n eventRecord,\n resourceRecord,\n eventElement,\n editor,\n isPartOfStore\n };\n super.internalShowEditor?.(eventRecord, resourceRecord, align);\n if (me.typeField) {\n me.toggleEventType(eventRecord.getValue(me.typeField));\n }\n me.loadRecord(eventRecord, resourceRecord);\n // If it's a static child of the client which is collapsed, expand it.\n // Floating components focusOnShow by default, this will need to be focused.\n if (editor.collapsed) {\n // The *initial* reveal does not animate unless the toggleReveal call is delayed.\n await AsyncHelper.sleep(100);\n await editor.collapsible.toggleReveal(true);\n editor.focus();\n }\n // Honour alignment settings \"anchor\" and \"centered\" which may be injected from editorConfig.\n else if (editor.centered || !editor.anchor || !editor.floating) {\n editor.show();\n }\n // avoid aligning to an event being animated into place, just center in these cases\n else if (eventElement && (!eventRecord.isCreating || !useInitialAnimation || useInitialAnimation === true || useInitialAnimation === 'fade-in')) {\n me.targetEventElement = eventElement;\n editor.showBy(align);\n }\n // We are adding an unrendered event. Display the editor centered\n else {\n editor.show();\n // Must be done after show because show always reverts to its configured centered setting.\n editor.updateCentered(true);\n }\n // Adjust time field step increment based on timeAxis resolution\n const timeResolution = scheduler.timeAxisViewModel.timeResolution;\n if (timeResolution.unit === 'hour' || timeResolution.unit === 'minute') {\n const step = `${timeResolution.increment}${timeResolution.unit}`;\n if (me.startTimeField) {\n me.startTimeField.step = step;\n }\n if (me.endTimeField) {\n me.endTimeField.step = step;\n }\n }\n // Might end up here with the old listener still around in monkey test for stress demo in turbo mode.\n // Some action happening during edit, but cannot track down what is going on\n me.detachListeners('changesWhileEditing');\n scheduler.eventStore.ion({\n change : me.onChangeWhileEditing,\n refresh : me.onChangeWhileEditing,\n thisObj : me,\n name : 'changesWhileEditing'\n });\n }\n }\n onChangeWhileEditing() {\n const me = this;\n // If event was removed, cancel editing\n // - however, there's one valid case when even can be removed during save finalization - that is when\n // all its assignments has been removed - in such case ignore the removal and do not call the `onCancelClick`\n // because that will reject the STM transaction and revert all changes\n // - also, do not trigger it when the editor is configured with the `autoUpdateRecord` - because in such case\n // the data change will be happening right during the editing\n if (!me.editor.autoUpdateRecord && !me.isFinalizingEventSave && me.isEditing && me.editingContext.isPartOfStore && !me.eventRecord.isPartOfStore(me.scheduler.eventStore)) {\n me.onCancelClick();\n }\n }\n // Fired in a listener so that it's after the auto-called onBeforeShow listeners so that\n // subscribers to the beforeEventEditShow are called at exactly the correct lifecycle point.\n onBeforeEditorShow() {\n super.onBeforeEditorShow(...arguments);\n /**\n * Fires on the owning Scheduler when the editor for an event is available but before it is populated with\n * data and shown. Allows manipulating fields etc.\n * @event beforeEventEditShow\n * @on-owner\n * @param {Scheduler.view.Scheduler} source The scheduler\n * @param {Scheduler.feature.EventEdit} eventEdit The eventEdit feature\n * @param {Scheduler.model.EventModel} eventRecord The record about to be shown in the event editor.\n * @param {Scheduler.model.ResourceModel} resourceRecord The Resource record for the event. If the event\n * is being created, it will not contain a resource, so this parameter specifies the resource the\n * event is being created for.\n * @param {HTMLElement} eventElement The element which represents the event in the scheduler display.\n * @param {Core.widget.Popup} editor The editor\n */\n this.scheduler.trigger('beforeEventEditShow', {\n eventEdit : this,\n ...this.editingContext\n });\n }\n updateTargetEventElement(targetEventElement, oldTargetEventElement) {\n targetEventElement?.classList.add('b-editing');\n oldTargetEventElement?.classList.remove('b-editing');\n }\n /**\n * Opens an editor for the passed event. This function is exposed on Scheduler and can be called as\n * `scheduler.editEvent()`.\n * @param {Scheduler.model.EventModel} eventRecord Event to edit\n * @param {Scheduler.model.ResourceModel} [resourceRecord] The Resource record for the event.\n * This parameter is needed if the event is newly created for a resource and has not been assigned, or when using\n * multi assignment.\n * @param {HTMLElement} [element] Element to anchor editor to (defaults to events element)\n * @on-owner\n */\n editEvent(eventRecord, resourceRecord, element = null, stmCapture = null) {\n const\n me = this,\n { client } = me,\n {\n eventStore,\n assignmentStore,\n enableEventAnimations\n } = client,\n { simpleEventEdit } = client.features,\n isNew = eventRecord.eventStore !== eventStore;\n if (isNew) {\n const resourceRecords = [];\n // It's only a provisional event because we are going to edit it which will\n // allow an opportunity to cancel the add (by removing it).\n eventRecord.isCreating = true;\n let assignmentRecords = [];\n if (resourceRecord && !assignmentStore.includesAssignment(eventRecord.id, resourceRecord.id)) {\n resourceRecords.push(resourceRecord);\n assignmentRecords = assignmentStore.assignEventToResource(eventRecord, resourceRecord);\n }\n // Vetoable beforeEventAdd allows cancel of this operation\n if (client.trigger('beforeEventAdd', { eventRecord, resourceRecords, assignmentRecords }) === false) {\n // Remove any assignment created above, to leave store as it was\n assignmentStore?.remove(assignmentRecords);\n eventRecord.isCreating = false;\n return false;\n }\n }\n if (me.isEditing) {\n // old editing flow already running, clean it up\n me.resetEditingContext();\n }\n // If simple edit feature is active, use it when a new event is created\n if (me.disabled || eventRecord.readOnly || (eventRecord.isCreating && simpleEventEdit?.enabled)) {\n return;\n }\n /**\n * Fires on the owning Scheduler before an event is displayed in an editor.\n * This may be listened for to allow an application to take over event editing duties. Returning `false`\n * stops the default editing UI from being shown.\n * @event beforeEventEdit\n * @on-owner\n * @param {Scheduler.view.Scheduler} source The scheduler\n * @param {Scheduler.feature.EventEdit} eventEdit The eventEdit feature\n * @param {Scheduler.model.EventModel} eventRecord The record about to be shown in the event editor.\n * @param {Scheduler.model.ResourceModel} resourceRecord The Resource record for the event. If the event\n * is being created, it will not contain a resource, so this parameter specifies the resource the\n * event is being created for.\n * @param {HTMLElement} eventElement The element which represents the event in the scheduler display.\n * @preventable\n */\n if (client.trigger('beforeEventEdit', {\n eventEdit : me,\n eventRecord,\n resourceRecord,\n eventElement : client.getElementFromEventRecord?.(eventRecord, resourceRecord) || element\n }) === false) {\n client.element.classList.remove('b-eventeditor-editing');\n if (client.isCalendar) {\n eventRecord.isCreating = false;\n }\n return false;\n }\n if (stmCapture) {\n me.applyStmCapture(stmCapture);\n me.hasStmCapture = true;\n // indicate that editor has been opened, and is now managing the \"stm capture\"\n stmCapture.transferred = true;\n }\n // it is set to `false` by calendar, to ignore the STM mechanism\n else if (stmCapture !== false && !client.isCalendar && !me.hasStmCapture) {\n me.captureStm(true);\n }\n if (isNew) {\n me.enableEventAnimations = false;\n eventStore.add(eventRecord);\n client.project.commitAsync().then(() => client.enableEventAnimations = enableEventAnimations);\n // Element must be created synchronously, not after the project's normalizing delays.\n client.refreshRows?.();\n }\n return me.doEditEvent(...arguments).then(result => {\n if (!me.isDestroying) {\n // The Promise being async allows a mouseover to trigger the event tip\n // unless we add the editing class immediately (But only if we actually began editing).\n if (!me.isEditing && !client.isCalendar && !me.rejectingStmTransaction) {\n // probably a custom event editor was used or editing was vetoed for some other reason\n if (result !== false && me.hasStmCapture) {\n // Skip stm rejection if built-in editor is disabled in beforeEventEdit (using of custom event editor)\n return me.freeStm(false);\n }\n else {\n return me.freeStm();\n }\n }\n }\n });\n }\n /**\n * Returns true if the editor is currently active\n * @readonly\n * @property {Boolean}\n */\n get isEditing() {\n const { _editor } = this;\n return Boolean(\n // Editor is not visible if it is collapsed and not expanded\n _editor?.isVisible && !(_editor.collapsed && !_editor.revealed)\n );\n }\n // editEvent is the single entry point in the base class.\n // Subclass implementations of the action may differ, so are implemented in doEditEvent\n async doEditEvent(eventRecord, resourceRecord, element = null) {\n const\n me = this,\n { scheduler } = me,\n isNewRecord = eventRecord.isCreating;\n if (!resourceRecord) {\n // Need to handle resourceId for edge case when creating an event with resourceId and editing it before\n // adding it to the EventStore\n resourceRecord = eventRecord.resource || me.resourceStore.getById(eventRecord.resourceId);\n }\n if (isNewRecord) {\n // Ensure temporal data fields are ready when the editor is shown\n TimeSpan.prototype.normalize.call(eventRecord);\n }\n // If element is specified (call triggered by EventDragCreate)\n // Then we can align to that, and no scrolling is necessary.\n // If we are simply being asked to edit a new event which is not\n // yet added, the editor is centered, and no scroll is necessary\n if (element || isNewRecord || eventRecord.resources.length === 0) {\n return me.internalShowEditor(eventRecord, resourceRecord, element ? {\n target : element\n } : null);\n }\n else {\n const dimension = scheduler.isVertical ? 'maxHeight' : 'maxWidth';\n // Ensure the main part of the event is in view before showing the editor.\n // Note that we first need to extend the time axis to include\n // currently out of range events.\n await scheduler.scrollResourceEventIntoView(resourceRecord, eventRecord, {\n [dimension] : me.minEditSize,\n animate : true,\n edgeOffset : 0,\n extendTimeAxis : false\n });\n if (!scheduler.isDestroyed) {\n await me.internalShowEditor(eventRecord, resourceRecord);\n if (!scheduler.isDestroyed) {\n scheduler.element.classList.remove('b-eventeditor-editing');\n }\n }\n }\n }\n /**\n * Sets fields values from record being edited\n * @private\n */\n loadRecord(eventRecord, resourceRecord) {\n this.loadingRecord = true;\n this.internalLoadRecord(eventRecord, resourceRecord);\n this.loadingRecord = false;\n }\n get eventRecord() {\n return this._editor?.record;\n }\n internalLoadRecord(eventRecord, resourceRecord) {\n const\n me = this,\n { eventStore } = me.client,\n { editor, resourceField } = me;\n me.resourceRecord = resourceRecord;\n // Update chained store early, to have records in place when setting value below (avoids adding the resource to\n // empty combo store, https://github.com/bryntum/support/issues/5378). It is not done automatically for\n // grouping/trees or when project is replaced\n if (resourceField && resourceField.store?.masterStore !== me.resourceStore) {\n resourceField.store = editor.chainResourceStore();\n }\n editor.record = eventRecord;\n if (resourceField) {\n const resources = eventStore.assignmentStore.getResourcesForEvent(eventRecord);\n // Flag on parent Container to indicate that initially blank fields are valid\n editor.assigningValues = true;\n // If this is an unassigned event, select the resource we've been provided\n if (!eventRecord.isOccurrence && !eventStore.storage.includes(eventRecord, true) && resourceRecord) {\n me.resourceField.value = resourceRecord.getValue(me.resourceField.valueField);\n }\n else if (me.assignmentStore) {\n me.resourceField.value = resources.map((resource) => resource.getValue(me.resourceField.valueField));\n }\n editor.assigningValues = false;\n }\n super.internalLoadRecord(eventRecord, resourceRecord);\n }\n toggleEventType(eventType) {\n // expose eventType in dataset, for querying and styling\n this.editor.element.dataset.eventType = eventType || '';\n this.editor.eachWidget(widget => { // need {}'s here so we don't return false and end iteration\n widget.dataset?.eventType && (widget.hidden = widget.dataset.eventType !== eventType);\n });\n }\n //endregion\n //region Save\n async finalizeEventSave(eventRecord, resourceRecords, resolve, reject) {\n const\n me = this,\n {\n scheduler,\n assignmentStore\n } = me;\n const aborted = false;\n // Prevent multiple commits from this flow\n assignmentStore.suspendAutoCommit();\n // Avoid multiple redraws, from event changes + assignment changes\n scheduler.suspendRefresh();\n me.onBeforeSave(eventRecord);\n eventRecord.beginBatch();\n me.updateRecord(eventRecord);\n eventRecord.endBatch();\n if (!eventRecord.isOccurrence) {\n if (me.resourceField) {\n assignmentStore.assignEventToResource(eventRecord, resourceRecords, null, true);\n }\n }\n // An occurrence event record may have changed only resources value. In that case we'll never get into afterChange() method that\n // apply changed data and make an event \"real\", because resources is not a field and a record won't be marked as dirty.\n // We used temporary field to save updated resources list and get into afterChange() method.\n else if (resourceRecords) {\n eventRecord.set('resourceRecords', resourceRecords);\n }\n // If it was a provisional event, passed in here from drag-create or dblclick or contextmenu,\n // it's now it's no longer a provisional event and will not be removed in resetEditingContext\n // Also, when promoted to be permanent, auto syncing will kick in if configured.\n eventRecord.isCreating = false;\n if (!aborted) {\n await scheduler.project.commitAsync();\n }\n assignmentStore.resumeAutoCommit();\n // Redraw once\n scheduler.resumeRefresh(true);\n if (!aborted) {\n /**\n * Fires on the owning Scheduler after an event is successfully saved\n * @event afterEventSave\n * @on-owner\n * @param {Scheduler.view.Scheduler} source The scheduler instance\n * @param {Scheduler.model.EventModel} eventRecord The record about to be saved\n */\n scheduler.trigger('afterEventSave', { eventRecord });\n me.onAfterSave(eventRecord);\n }\n resolve(aborted ? false : eventRecord);\n }\n /**\n * Saves the changes (applies them to record if valid, if invalid editor stays open)\n * @private\n * @fires beforeEventSave\n * @fires beforeEventAdd\n * @fires afterEventSave\n * @async\n */\n save() {\n return new Promise((resolve, reject) => {\n const\n me = this,\n { scheduler, eventRecord } = me;\n if (!eventRecord || !me.editor.isValid) {\n resolve(false);\n return;\n }\n const\n { eventStore, values } = me,\n resourceRecords = me.resourceField?.records || (me.resourceRecord ? [me.resourceRecord] : []);\n // Check for potential overlap scenarios before saving\n if (!me.scheduler.allowOverlap && eventStore) {\n let { startDate, endDate } = values;\n // Should support using a duration field instead of the end date field\n if (!endDate) {\n if ('duration' in values) {\n endDate = DateHelper.add(startDate, values.duration, values.durationUnit || eventRecord.durationUnit);\n }\n else if ('fullDuration' in values) {\n endDate = DateHelper.add(startDate, values.fullDuration);\n }\n else {\n endDate = eventRecord.endDate;\n }\n }\n const abort = resourceRecords.some(resource => {\n return !eventStore.isDateRangeAvailable(startDate, endDate, eventRecord, resource);\n });\n if (abort) {\n resolve(false);\n return;\n }\n }\n const context = {\n finalize(saveEvent) {\n try {\n if (saveEvent !== false) {\n me.finalizeEventSave(eventRecord, resourceRecords, resolve, reject);\n }\n else {\n resolve(false);\n }\n }\n catch (e) {\n reject(e);\n }\n }\n };\n /**\n * Fires on the owning Scheduler before an event is saved.\n * Return `false` to immediately prevent saving\n *\n * ```javascript\n * scheduler.on({\n * beforeEventSave() {\n * // prevent saving if some custom variable hasn't 123 value\n * return myCustomValue === 123;\n * }\n * });\n * ```\n * or a `Promise` yielding `true` or `false` for async vetoing.\n *\n * ```javascript\n * scheduler.on({\n * beforeEventSave() {\n * const\n * // send ajax request\n * response = await fetch('http://my-server/check-parameters.php'),\n * data = await response.json();\n *\n * // decide whether it's ok to save based on response \"okToSave\" property\n * return data.okToSave;\n * }\n * });\n * ```\n *\n * @event beforeEventSave\n * @on-owner\n * @param {Scheduler.view.Scheduler} source The scheduler instance\n * @param {Scheduler.model.EventModel} eventRecord The record about to be saved\n * @param {Scheduler.model.ResourceModel[]} resourceRecords The resources to which the event is assigned\n * @param {Object} values The new values\n * @param {Object} context Extended save context:\n * @param {Boolean} [context.async] Set this to `true` in a listener to indicate that the listener will asynchronously decide to prevent or not the event save.\n * @param {Function} context.finalize Function to call to finalize the save. Used when `async` is `true`. Provide `false` to the function to prevent the save.\n * @preventable\n * @async\n */\n const triggerResult = scheduler.trigger('beforeEventSave', {\n eventRecord,\n resourceRecords,\n values,\n context\n });\n // Helper function to handle beforeEventSave listeners result\n function handleEventResult(result, eventRecord, context) {\n // save prevented by a listener\n if (result === false) {\n resolve(false);\n }\n else {\n me.onRecurrableEventBeforeSave({ eventRecord, context });\n // truthy context.async means than a listener will decide to approve saving asynchronously\n if (!context.async) {\n context.finalize();\n }\n }\n }\n if (ObjectHelper.isPromise(triggerResult)) {\n triggerResult.then(result => handleEventResult(result, eventRecord, context));\n }\n else {\n handleEventResult(triggerResult, eventRecord, context);\n }\n });\n }\n //endregion\n //region Delete\n /**\n * Delete event being edited\n * @fires beforeEventDelete\n * @private\n * @async\n */\n deleteEvent() {\n this.detachListeners('changesWhileEditing');\n return new Promise((resolve, reject) => {\n const\n me = this,\n { eventRecord, editor } = me;\n me.scheduler.removeEvents([eventRecord], removeRecord => {\n // The reason it does it here is to move focus *before* it gets deleted,\n // and then there's code in the delete to see that it's deleting the focused one,\n // and jump forwards or backwards to move to the next or previous event\n // See 'Should allow key activation' test in tests/view/mixins/EventNavigation.t.js\n if (removeRecord && editor.containsFocus) {\n editor.revertFocus();\n }\n resolve(removeRecord);\n }, editor);\n });\n }\n //endregion\n //region Stores\n onChangeProject() {\n // Release resource store on project change, it will be re-chained on next show\n if (this.resourceField) {\n this.resourceField.store = {}; // Cannot use null\n }\n }\n get eventStore() {\n return this.scheduler.project.eventStore;\n }\n get resourceStore() {\n return this.scheduler.project.resourceStore;\n }\n get assignmentStore() {\n return this.scheduler.project.assignmentStore;\n }\n //endregion\n //endregion\n //region Events\n onActivateEditor({ eventRecord, resourceRecord, eventElement }) {\n this.editEvent(eventRecord, resourceRecord, eventElement);\n }\n onDragCreateEnd({ eventRecord, resourceRecord, proxyElement, stmCapture }) {\n this.editEvent(eventRecord, resourceRecord, proxyElement, stmCapture);\n }\n // chained from EventNavigation\n onEventEnterKey({ assignmentRecord, eventRecord, target }) {\n const\n { client } = this,\n // Event can arrive from the wrap element in some products (such as Calendar)\n // so in these cases, we must use querySelector to look *inside* the element.\n element = target[target.matches(client.eventSelector) ? 'querySelector' : 'closest'](client.eventInnerSelector);\n if (assignmentRecord) {\n this.editEvent(eventRecord, assignmentRecord.resource, element);\n }\n else if (eventRecord) {\n this.editEvent(eventRecord, eventRecord.resource, element);\n }\n }\n // Toggle fields visibility when changing eventType\n onEventTypeChange({ value }) {\n this.toggleEventType(value);\n }\n //endregion\n //region Context menu\n populateEventMenu({ eventRecord, resourceRecord, items }) {\n if (!this.scheduler.readOnly && !this.disabled) {\n items.editEvent = {\n text : 'L{EventEdit.Edit event}',\n localeClass : this,\n icon : 'b-icon b-icon-edit',\n weight : 100,\n disabled : eventRecord.readOnly,\n onItem : () => {\n this.editEvent(eventRecord, resourceRecord);\n }\n };\n }\n }\n //endregion\n onBeforeEditorToggleReveal({ reveal }) {\n if (reveal) {\n this.editor.setupEditorButtons();\n }\n // reveal true/false is analogous to show/hide\n this[reveal ? 'onBeforeEditorShow' : 'resetEditingContext']();\n }\n async resetEditingContext() {\n const me = this;\n me.detachListeners('changesWhileEditing');\n // super call has to go before the `me.rejectStmTransaction();` below\n // because it can be removing an event manually, bypassing the stm\n super.resetEditingContext();\n // client does not use STM for task editing (at least yet)\n if (me.hasStmCapture && !me.isDeletingEvent && !me.isCancelingEdit) {\n await me.freeStm(false);\n }\n // Clear to prevent retaining project\n me.resourceRecord = null;\n }\n finalizeStmCapture(shouldReject) {\n return this.freeStm(!shouldReject);\n }\n updateLocalization() {\n if (this._editor) {\n this.updateCSSVars({ element : this._editor.element });\n }\n super.updateLocalization(...arguments);\n }\n}\nEventEdit._$name = 'EventEdit'; GridFeatureManager.registerFeature(EventEdit, true, 'Scheduler');\nGridFeatureManager.registerFeature(EventEdit, false, ['SchedulerPro', 'ResourceHistogram']);\nEventEdit.initClass();\n", "import InstancePlugin from '../../Core/mixin/InstancePlugin.js';\nimport GridFeatureManager from '../../Grid/feature/GridFeatureManager.js';\n/**\n * @module Scheduler/feature/EventFilter\n */\n/**\n * Adds event filter menu items to the timeline header context menu.\n *\n * {@inlineexample Scheduler/feature/EventFilter.js}\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * eventFilter : true // `true` by default, set to `false` to disable the feature and remove the menu item from the timeline header\n * }\n * });\n * ```\n *\n * This feature is **enabled** by default\n *\n * @extends Core/mixin/InstancePlugin\n * @classtype eventFilter\n * @feature\n */\nexport default class EventFilter extends InstancePlugin {\n static get $name() {\n return 'EventFilter';\n }\n static get pluginConfig() {\n return {\n chain : ['populateTimeAxisHeaderMenu']\n };\n }\n /**\n * Populates the header context menu items.\n * @param {Object} options Contains menu items and extra data retrieved from the menu target.\n * @param {Object- \n *
- Assigned to: \n *
- Time: \n *
- \n * ${DateHelper.format(data.eventRecord.startDate, 'LT')} - ${DateHelper.format(data.eventRecord.endDate, 'LT')}\n * \n * ${data.eventRecord.get('note') ? `
- Note:
- ${data.eventRecord.note} ` : ''}\n *\n * ${data.eventRecord.get('image') ? `
- Image:
${data.eventRecord.name}
` : ''}\n ${data.startClockHtml}\n ${data.endClockHtml}`,\n cls : 'b-sch-event-tooltip',\n monitorRecordUpdate : true,\n /**\n * Defines what to do if document is scrolled while the tooltip is visible.\n *\n * Valid values: \u00B4null\u00B4: do nothing, \u00B4hide\u00B4: hide the tooltip or \u00B4realign\u00B4: realign to the target if possible.\n *\n * @config {'hide'|'realign'|null}\n * @default\n */\n scrollAction : 'hide'\n };\n }\n /**\n * The event which the tooltip feature has been activated for.\n * @member {Scheduler.model.EventModel} eventRecord\n * @readonly\n */\n //endregion\n construct(client, config) {\n super.construct(client, config);\n if (typeof this.align === 'string') {\n this.align = { align : this.align };\n }\n }\n onInternalPaint({ firstPaint }) {\n super.onInternalPaint(...arguments);\n if (firstPaint) {\n const\n { dependencies } = this.client.features;\n if (dependencies) {\n this.tooltip.ion({\n beforeAlign({ source : tooltip, offset = zeroOffset }) {\n const\n { edgeAligned } = parseAlign(tooltip.align.align),\n depTerminalOffset = (dependencies.disabled || !dependencies.allowCreate) ? zeroOffset : depOffset[edgeAligned];\n // Add the spec's offset to the offset necessitated by dependency terminals\n arguments[0].offset = [\n offset[0] + depTerminalOffset[0],\n offset[1] + depTerminalOffset[1]\n ];\n }\n });\n }\n }\n }\n}\nEventTooltip._$name = 'EventTooltip'; GridFeatureManager.registerFeature(EventTooltip, true, 'Scheduler');\nGridFeatureManager.registerFeature(EventTooltip, false, 'ResourceHistogram');\n", "import GridGroupSummary from '../../Grid/feature/GroupSummary.js';\nimport DomHelper from '../../Core/helper/DomHelper.js';\nimport GridFeatureManager from '../../Grid/feature/GridFeatureManager.js';\nimport Tooltip from '../../Core/widget/Tooltip.js';\n// Actions that trigger rerendering of group summary rows\nconst\n eventStoreRefreshActions = {\n update : 1,\n filter : 1\n },\n assignmentStoreRefreshActions = {\n add : 1,\n remove : 1,\n update : 1,\n removeAll : 1,\n filter : 1\n };\n/**\n * @module Scheduler/feature/GroupSummary\n */\n// noinspection JSClosureCompilerSyntax\n/**\n * A special version of the Grid GroupSummary feature that enables summaries within scheduler. To use a single summary\n * it is easiest to configure {@link #config-renderer}, for multiple summaries see {@link #config-summaries}.\n *\n * This feature is disabled by default. It is **not** supported in vertical mode.\n *\n * {@inlineexample Scheduler/feature/GroupSummary.js}\n *\n * @demo Scheduler/groupsummary\n *\n * @extends Grid/feature/GroupSummary\n * @classtype groupSummary\n * @feature\n *\n * @typings Grid.feature.GroupSummary -> Grid.feature.GridGroupSummary\n */\nexport default class GroupSummary extends GridGroupSummary {\n //region Config\n static get $name() {\n return 'GroupSummary';\n }\n static get defaultConfig() {\n return {\n /**\n * Show tooltip containing summary values and labels\n * @config {Boolean}\n * @default\n */\n showTooltip : true,\n /**\n * Array of summary configs which consists of a label and a {@link #config-renderer} function\n * ```\n * summaries : [\n * {\n * label : 'Label',\n * renderer : ({ startDate, endDate, eventStore, resourceStore, events, resources, groupRecord, groupField, groupValue }) => {\n * // return display value\n * returns 'Renderer output
';\n * }\n * }\n * ]\n * ```\n * @config {SchedulerSummaryOptions[]}\n */\n summaries : null,\n /**\n * Renderer function for a single time axis tick in a group summary row.\n * Should calculate a sum and return HTML as a result.\n *\n * ```javascript\n * new Scheduler({\n * features : {\n * groupSummary : {\n * renderer : ({ startDate, endDate, eventStore, resourceStore, events, resources, groupRecord, groupField, groupValue }) => {\n * // return display value\n * returns 'Renderer output
';\n * }\n * }\n * }\n * });\n * ```\n *\n * @param {Object} context Rendering context object\n * @param {Date} context.startDate Tick start date\n * @param {Date} context.endDate Tick end date\n * @param {Scheduler.model.EventModel[]} context.events Events which belong to the group\n * @param {Scheduler.model.ResourceModel[]} context.resources Resources which belong to the group\n * @param {Scheduler.data.EventStore} context.eventStore Event store\n * @param {Scheduler.data.ResourceStore} context.resourceStore Resource store\n * @param {Core.data.Model} context.groupRecord Current groups header row record\n * @param {String} context.groupField Current groups field name\n * @param {String} context.groupValue Current groups value\n * @returns {String} Html content\n * @config {Function}\n */\n renderer : null\n };\n }\n static get properties() {\n return {\n footersToUpdate : new Set()\n };\n }\n static get pluginConfig() {\n return {\n chain : ['render']\n };\n }\n //endregion\n //region Init\n construct(scheduler, config) {\n const me = this;\n if (scheduler.isVertical) {\n throw new Error('GroupSummary feature is not supported in vertical mode');\n }\n me.scheduler = scheduler;\n super.construct(scheduler, config);\n if (!me.summaries && me.renderer) {\n me.summaries = [{ renderer : me.renderer }];\n }\n if (scheduler.isSchedulerBase) {\n scheduler.eventStore.ion({\n changePreCommit : me.onEventStoreChange,\n thisObj : me\n });\n scheduler.assignmentStore.ion({\n changePreCommit : me.onAssignmentStoreChange,\n thisObj : me\n });\n scheduler.ion({\n timeAxisViewModelUpdate : me.onTimeAxisChange,\n thisObj : me\n });\n scheduler.project.ion({\n dataReady : me.onProjectDataReady,\n thisObj : me\n });\n }\n }\n doDestroy() {\n this._tip?.destroy();\n super.doDestroy();\n }\n //endregion\n //region Events\n onTimeAxisChange() {\n this.scheduler.rowManager.forEach(row => {\n if (row.isGroupFooter) {\n row.render();\n }\n });\n }\n onEventStoreChange({ action, records, changes }) {\n // Scheduler does minimal update on event changes, it will not rerender the summary rows.\n // Need to handle that here\n if (eventStoreRefreshActions[action]) {\n const resources = new Set();\n records.forEach(eventRecord => eventRecord.resources.forEach(r => resources.add(r)));\n this.afterChange(resources);\n }\n }\n onAssignmentStoreChange({ action, records, changes }) {\n if (assignmentStoreRefreshActions[action]) {\n const resources = new Set();\n records.forEach(assignment => assignment.resource && resources.add(assignment.resource));\n // Include old resource on reassign\n if (changes?.resourceId?.oldValue != null) {\n const oldResource = this.scheduler.resourceStore.getById(changes.resourceId.oldValue);\n oldResource && resources.add(oldResource);\n }\n this.afterChange(resources);\n }\n }\n afterChange(affectedResources) {\n const { resourceStore } = this.scheduler;\n // Collect footers to update\n for (const resourceRecord of affectedResources) {\n let record = resourceRecord;\n // Resource might not match a row (out of view, filtered out etc.)\n // Move up/down until footer is found, or we run out of rows (in case footer is below the buffer)\n if (this.target === 'header') {\n while (record && !record.isGroupHeader) {\n record = resourceStore.getPrev(record);\n }\n }\n else {\n while (record && !record.isGroupFooter) {\n record = resourceStore.getNext(record);\n }\n }\n const row = this.scheduler.rowManager.getRowFor(record);\n if (record && row) {\n this.footersToUpdate.add(row);\n }\n }\n }\n onProjectDataReady() {\n const\n {\n footersToUpdate,\n client\n } = this;\n // Only update the UI immediately if we are visible\n if (client.isVisible) {\n // Re-render only affected footers, once\n if (footersToUpdate.size) {\n for (const footer of footersToUpdate) {\n // Things happen async, footer might have been destroyed\n footer.render?.();\n }\n footersToUpdate.clear();\n }\n }\n else {\n client.whenVisible('refresh', client, [true]);\n }\n }\n //endregion\n //region Render\n /**\n * Called before rendering row contents, used to reset rows no longer used as group summary rows\n * @private\n */\n onBeforeRenderRow({ row, record }) {\n if (row.isGroupFooter && !record.meta.hasOwnProperty('groupFooterFor')) {\n const timeaxisCell = row.elements.normal.querySelector('.b-sch-timeaxis-cell');\n // remove summary cells if exist\n if (timeaxisCell) {\n timeaxisCell.innerHTML = '';\n }\n }\n super.onBeforeRenderRow(...arguments);\n }\n /**\n * Called by parent class to fill timeaxis with summary contents. Generates tick \"cells\" and populates them with\n * summaries.\n * ```\n * \n *
\n * ```\n * @private\n */\n generateHtml(column, records, cls, groupRecord, groupField, groupValue) {\n if (column.type === 'timeAxis') {\n const\n me = this,\n { scheduler } = me,\n { eventStore } = scheduler,\n colCfg = scheduler.timeAxisViewModel.columnConfig;\n let html = '';\n // group events by ticks info once here to avoid performance lags\n // should be inside `scheduler.isEngineReady` check to make sure all events were calculated\n // https://github.com/bryntum/support/issues/2977\n const eventsByTick = scheduler.getResourcesEventsPerTick(records, ({ event }) => {\n return event.resources.some(resource => records.includes(resource)) && (!eventStore.isFiltered || eventStore.records.includes(event));\n });\n scheduler.timeAxis.forEach((tick, idx) => {\n const\n groupEvents = eventsByTick[idx] || [],\n sumHtml = me.summaries.map(config => {\n // summary renderer used to calculate and format value\n const value = config.renderer?.({\n startDate : tick.startDate,\n endDate : tick.endDate,\n resourceStore : scheduler.resourceStore,\n events : groupEvents,\n resources : records,\n eventStore,\n groupRecord,\n groupField,\n groupValue\n }) ?? '';\n return `\n *
\n * ...\n * x
\n * ...\n * ${value}
`;\n }).join('');\n // get width on column index from the last header config\n html += `${sumHtml}
`;\n });\n return `${html}
`;\n }\n return super.generateHtml(column, records, cls, groupRecord, groupField, groupValue);\n }\n /**\n * Overrides parents function to return correct summary count, used when sizing row\n * @private\n */\n updateSummaryHtml(cellElement, column, records) {\n const count = super.updateSummaryHtml(cellElement, column, records);\n if (column.type === 'timeAxis') {\n const result = {\n count : 0,\n height : 0\n };\n this.summaries.forEach(config => {\n if (config.height) {\n result.height += config.height;\n }\n else {\n result.count++;\n }\n });\n return result;\n }\n return count;\n }\n /**\n * Generates tooltip contents for hovered summary tick\n * @private\n */\n getTipHtml({ activeTarget }) {\n const\n me = this,\n index = Array.from(activeTarget.parentElement.children).indexOf(activeTarget),\n tick = me.scheduler.timeAxis.getAt(index);\n let tipHtml = `${text}
`;\n if (element.innerHTML) {\n showTip = true;\n }\n });\n return showTip ? tipHtml : null;\n }\n /**\n * Initialize tooltip on render\n * @private\n */\n render() {\n const\n me = this,\n { scheduler } = me;\n if (scheduler.isSchedulerBase) {\n // if any sum config has a label, init tooltip\n if (me.summaries?.some(config => config.label) && me.showTooltip && !me._tip) {\n me._labels = me.summaries.map(config => config.label || '');\n me._tip = new Tooltip({\n id : `${scheduler.id}-groupsummary-tip`,\n cls : 'b-timeaxis-summary-tip',\n hoverDelay : 0,\n hideDelay : 0,\n forElement : scheduler.timeAxisSubGridElement,\n anchorToTarget : true,\n forSelector : '.b-timeaxis-group-summary .b-timeaxis-tick',\n getHtml : me.getTipHtml.bind(me)\n });\n }\n }\n }\n //endregion\n removeSummaryElements(rowEl) {\n const summaryElement = rowEl.querySelector('.b-timeaxis-group-summary');\n summaryElement?.remove();\n super.removeSummaryElements();\n }\n hasSummary(column) {\n return super.hasSummary(column) || column.isTimeAxisColumn;\n }\n}\n// Override Grids GroupSummary with this improved version\nGroupSummary._$name = 'GroupSummary'; GridFeatureManager.registerFeature(GroupSummary, false, 'Scheduler');\n", "import InstancePlugin from '../../Core/mixin/InstancePlugin.js';\nimport GridFeatureManager from '../../Grid/feature/GridFeatureManager.js';\nimport EventHelper from '../../Core/helper/EventHelper.js';\nimport DomHelper from '../../Core/helper/DomHelper.js';\nimport Rectangle from '../../Core/helper/util/Rectangle.js';\n/**\n * @module Scheduler/feature/HeaderZoom\n */\n/**\n * Enables users to click and drag to zoom to a date range in Scheduler's header time axis. Only supported in horizontal\n * mode.\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * headerZoom : true\n * }\n * });\n * ```\n *\n * {@inlineexample Scheduler/feature/HeaderZoom.js}\n *\n * Not compatible with the {@link Scheduler/feature/TimeSelection} feature.
\n *\n * This feature is **disabled** by default.\n * For info on enabling it, see {@link Grid.view.mixin.GridFeatures}.\n *\n * @extends Core/mixin/InstancePlugin\n * @classtype headerZoom\n * @feature\n */\nexport default class HeaderZoom extends InstancePlugin {\n static $name = 'HeaderZoom';\n static get pluginConfig() {\n return {\n chain : ['onElementMouseDown', 'onElementMouseMove']\n };\n }\n onElementMouseDown(event) {\n const me = this;\n // only react to mouse input, and left button\n if (event.touches || event.button !== 0 || me.disabled) {\n return;\n }\n // only react to mousedown directly on timeaxis cell\n if (event.target.closest('.b-sch-header-timeaxis-cell')) {\n const headerEl = me.client.subGrids.normal.header.headersElement;\n me.startX = event.clientX;\n me.element = DomHelper.createElement({\n parent : headerEl,\n tag : 'div',\n className : 'b-headerzoom-rect'\n });\n me.headerElementRect = Rectangle.from(headerEl);\n EventHelper.on({\n element : document,\n mouseup : 'onMouseUp',\n thisObj : me,\n once : true\n });\n }\n }\n onElementMouseMove(event) {\n const me = this;\n if (typeof me.startX === 'number') {\n const\n x = Math.max(event.clientX, me.headerElementRect.left),\n left = Math.min(me.startX, x),\n width = Math.abs(me.startX - x),\n rect = new Rectangle(left - me.headerElementRect.x + me.client.scrollLeft, 0, width, me.headerElementRect.height);\n DomHelper.setTranslateX(me.element, rect.left);\n me.element.style.width = rect.width + 'px';\n }\n }\n onMouseUp() {\n const me = this;\n if (typeof me.startX === 'number') {\n const\n { client } = me,\n rect = Rectangle.from(me.element),\n startDate = client.getDateFromCoordinate(rect.left, 'round', false),\n endDate = client.getDateFromCoordinate(rect.right, 'round', false);\n me.element.remove();\n me.startX = null;\n client.zoomToSpan({\n startDate,\n endDate\n });\n }\n }\n}\nHeaderZoom._$name = 'HeaderZoom'; GridFeatureManager.registerFeature(HeaderZoom, false, 'Scheduler');\n", "import InstancePlugin from '../../Core/mixin/InstancePlugin.js';\nimport GridFeatureManager from '../../Grid/feature/GridFeatureManager.js';\nimport DateHelper from '../../Core/helper/DateHelper.js';\nimport DomHelper from '../../Core/helper/DomHelper.js';\nimport DomSync from '../../Core/helper/DomSync.js';\nimport EventHelper from '../../Core/helper/EventHelper.js';\nimport StringHelper from '../../Core/helper/StringHelper.js';\nimport Editor from '../../Core/widget/Editor.js';\n/**\n * @module Scheduler/feature/Labels\n */\nconst\n sides = [\n 'top',\n 'before',\n 'after',\n 'bottom'\n ],\n editorAlign = (side, client) => {\n switch (side) {\n case 'top' :\n return 'b-b';\n case 'after' :\n return client.rtl ? 'r-r' : 'l-l';\n case 'right' :\n return 'l-l';\n case 'bottom' :\n return 't-t';\n case 'before' :\n return client.rtl ? 'l-l' : 'r-r';\n case 'left' :\n return 'r-r';\n }\n },\n topBottom = {\n top : 1,\n bottom : 1\n },\n layoutModes = {\n estimate : 1,\n measure : 1\n },\n layoutSides = {\n before : 1,\n after : 1\n };\n/**\n * Configuration object for a label used by the Labels feature.\n * @typedef {Object} SchedulerLabelConfig\n * @property {String} field The name of a field in one of the associated records, {@link Scheduler.model.EventModel} or\n * {@link Scheduler.model.ResourceModel}. The record from which the field value is drawn will be ascertained by checking\n * for field definitions by the specified name.\n * @property {Function} renderer A function, which when passed an object containing `eventRecord`, `resourceRecord`,\n * `assignmentRecord` and `domConfig` properties, returns the HTML to display as the label\n * @property {Scheduler.model.EventModel} renderer.eventRecord\n * @property {Scheduler.model.ResourceModel} renderer.resourceRecord\n * @property {Scheduler.model.AssignmentModel} renderer.assignmentRecord\n * @property {DomConfig} renderer.domConfig\n * @property {Object} thisObj The `this` reference to use in the `renderer`.\n * @property {InputFieldConfig|Core.widget.Field} editor If the label is to be editable, a field configuration object with a\n * `type` property, or an instantiated Field. **The `field` property is mandatory for editing to work**.\n */\n/**\n * Displays labels at positions {@link #config-top}, {@link #config-right}, {@link #config-bottom} and\n * {@link #config-left}.\n *\n * Text in labels can be set from a field on the {@link Scheduler.model.EventModel} or the\n * {@link Scheduler.model.ResourceModel} or using a custom renderer. See {@link #typedef-SchedulerLabelConfig} for\n * configuration specification.\n *\n * ```javascript\n * new Scheduler({\n * features : {\n * labels : {\n * // Label rendered above the event bar with content from the\n * // record's location field\n * top : {\n * field : 'location',\n * editor : {\n * type : 'textfield'\n * }\n * },\n * // Label rendered below the event bar with custom content\n * // from a renderer\n * bottom : {\n * renderer : ({ eventRecord }) => `ID: ${eventRecord.id}`\n * }\n * }\n * }\n * });\n * ```\n *\n * Since `top` and `bottom` labels occupy space that would otherwise be used by the event we recommend using bigger\n * rowHeights (>55px for both labels with default styling) and zero barMargins because `top`/`bottom` labels give space\n * around events anyway.\n *\n * To prevent labels from being overlapped by other events, see {@link #config-labelLayoutMode}.\n *\n * This feature is **disabled** by default.\n * It is **not** supported in vertical mode.\n * For info on enabling it, see {@link Grid.view.mixin.GridFeatures}.\n *\n * {@inlineexample Scheduler/feature/Labels.js}\n *\n * @demo Scheduler/labels\n *\n * @extends Core/mixin/InstancePlugin\n * @classtype labels\n * @feature\n */\nexport default class Labels extends InstancePlugin {\n //region Config\n static get $name() {\n return 'Labels';\n }\n static get configurable() {\n return {\n /**\n * CSS class to apply to label elements\n * @config {String}\n * @default\n */\n labelCls : 'b-sch-label',\n /**\n * Top label configuration object.\n * @config {SchedulerLabelConfig}\n * @default\n */\n top : null,\n /**\n * Configuration object for the label which appears *after* the event bar in the current writing direction.\n * @config {SchedulerLabelConfig}\n * @default\n */\n after : null,\n /**\n * Right label configuration object.\n * @config {SchedulerLabelConfig}\n * @default\n */\n right : null,\n /**\n * Bottom label configuration object.\n * @config {SchedulerLabelConfig}\n * @default\n */\n bottom : null,\n /**\n * Configuration object for the label which appears *before* the event bar in the current writing direction.\n * @config {SchedulerLabelConfig}\n * @default\n */\n before : null,\n /**\n * Left label configuration object.\n * @config {SchedulerLabelConfig}\n * @default\n */\n left : null,\n thisObj : null,\n /**\n * What action should be taken when focus moves leaves the cell editor, for example when clicking outside.\n * May be `'complete'` or `'cancel`'.\n * @config {'complete'|'cancel'}\n * @default\n */\n blurAction : 'cancel',\n /**\n * How to handle labels during event layout. Options are:\n *\n * * default - Labels do not affect event layout, events will overlap labels\n * * estimate - Label width is estimated by multiplying text length with {@link #config-labelCharWidth}\n * * measure - Label width is determined by measuring the label, precise but slow\n *\n * Note that this only applies to the left and right labels, top and bottom labels does not take part in the\n * event layout process.\n *\n * @config {'default'|'estimate'|'measure'}\n * @default\n */\n labelLayoutMode : 'default',\n /**\n * Factor representing the average char width in pixels used to determine label width when configured\n * with `labelLayoutMode: 'estimate'`.\n * @config {Number}\n * @default\n */\n labelCharWidth : 7\n };\n }\n // Plugin configuration. This plugin chains some of the functions in Grid.\n static get pluginConfig() {\n return {\n chain : ['onEventDataGenerated']\n };\n }\n //endregion\n //region Init & destroy\n construct(scheduler, config) {\n const me = this;\n if (scheduler.isVertical) {\n throw new Error('Labels feature is not supported in vertical mode');\n }\n me.scheduler = scheduler;\n super.construct(scheduler, config);\n if (me.top || me.bottom || me.before || me.after) {\n me.updateHostClasslist();\n // rowHeight warning, not in use\n //const labelCount = !!me.topLabel + !!me.bottomLabel;\n //if (scheduler.rowHeight < 60 - labelCount * 12) console.log('')\n }\n }\n updateHostClasslist() {\n const\n { top, bottom } = this,\n { classList } = this.scheduler.element;\n classList.remove('b-labels-topbottom');\n classList.remove('b-labels-top');\n classList.remove('b-labels-bottom');\n // OR is correct. This means that there are labels above OR below.\n if (top || bottom) {\n classList.add('b-labels-topbottom');\n if (top) {\n classList.add('b-labels-top');\n }\n if (bottom) {\n classList.add('b-labels-bottom');\n }\n }\n }\n onLabelDblClick(event) {\n const\n me = this,\n target = event.target;\n if (target && !me.scheduler.readOnly) {\n const\n { side } = target.dataset,\n labelConfig = me[side],\n { editor, field } = labelConfig;\n if (editor) {\n const eventRecord = this.scheduler.resolveEventRecord(event.target);\n if (eventRecord.readOnly) {\n return;\n }\n if (!(editor instanceof Editor)) {\n labelConfig.editor = new Editor({\n blurAction : me.blurAction,\n inputField : editor,\n scrollAction : 'realign'\n });\n }\n // Editor removes itself from the DOM after being hidden\n labelConfig.editor.render(me.scheduler.element);\n labelConfig.editor.startEdit({\n target,\n align : editorAlign(side, me.client),\n matchSize : false,\n record : eventRecord,\n field\n });\n event.stopImmediatePropagation();\n return false;\n }\n }\n }\n changeTop(top) {\n return this.processLabelSpec(top, 'top');\n }\n updateTop() {\n this.updateHostClasslist();\n }\n changeAfter(after) {\n return this.processLabelSpec(after, 'after');\n }\n updateAfter() {\n this.updateHostClasslist();\n }\n changeRight(right) {\n this[this.client.rtl ? 'before' : 'after'] = right;\n }\n changeBottom(bottom) {\n return this.processLabelSpec(bottom, 'bottom');\n }\n updateBottom() {\n this.updateHostClasslist();\n }\n changeBefore(before) {\n return this.processLabelSpec(before, 'before');\n }\n updateBefore() {\n this.updateHostClasslist();\n }\n changeLeft(left) {\n this[this.client.rtl ? 'after' : 'before'] = left;\n }\n processLabelSpec(labelSpec, side) {\n if (typeof labelSpec === 'function') {\n labelSpec = {\n renderer : labelSpec\n };\n }\n else if (typeof labelSpec === 'string') {\n labelSpec = {\n field : labelSpec\n };\n }\n // Allow us to mutate ownProperties in the labelSpec without mutating outside object\n else if (labelSpec) {\n labelSpec = Object.setPrototypeOf({}, labelSpec);\n }\n // Clear label\n else {\n return null;\n }\n const\n { scheduler } = this,\n { eventStore, resourceStore, taskStore, id } = scheduler,\n { field, editor } = labelSpec;\n // If there are milestones, and we are changing the available height\n // either by adding a top/bottom label, or adding a top/bottom label\n // then during the next dependency refresh, milestone width must be recalculated.\n if (topBottom[side]) {\n scheduler.milestoneWidth = null;\n }\n if (eventStore && !taskStore) {\n labelSpec.recordType = 'event';\n }\n else {\n labelSpec.recordType = 'task';\n }\n // Find the field definition or property from whichever store and cache the type.\n if (field) {\n let\n fieldDef,\n fieldFound = false;\n if (eventStore && !taskStore) {\n fieldDef = eventStore.modelClass.fieldMap[field];\n if (fieldDef) {\n labelSpec.fieldDef = fieldDef;\n labelSpec.recordType = 'event';\n fieldFound = true;\n }\n // Check if it references a property\n else if (Reflect.has(eventStore.modelClass.prototype, field)) {\n labelSpec.recordType = 'event';\n fieldFound = true;\n }\n }\n if (!fieldDef && taskStore) {\n fieldDef = taskStore.modelClass.fieldMap[field];\n if (fieldDef) {\n labelSpec.fieldDef = fieldDef;\n labelSpec.recordType = 'task';\n fieldFound = true;\n }\n // Check if it references a property\n else if (Reflect.has(resourceStore.modelClass.prototype, field)) {\n labelSpec.recordType = 'task';\n fieldFound = true;\n }\n }\n if (!fieldDef && resourceStore) {\n fieldDef = resourceStore.modelClass.fieldMap[field];\n if (fieldDef) {\n labelSpec.fieldDef = fieldDef;\n labelSpec.recordType = 'resource';\n fieldFound = true;\n }\n // Check if it references a property\n else if (Reflect.has(resourceStore.modelClass.prototype, field)) {\n labelSpec.recordType = 'resource';\n fieldFound = true;\n }\n }\n if (editor) {\n if (typeof editor === 'boolean') {\n scheduler.editor = {\n type : 'textfield'\n };\n }\n else if (typeof editor === 'string') {\n scheduler.editor = {\n type : editor\n };\n }\n EventHelper.on({\n element : scheduler.timeAxisSubGrid.element,\n delegate : '.b-sch-label',\n dblclick : 'onLabelDblClick',\n thisObj : this\n });\n }\n }\n return labelSpec;\n }\n doDisable(disable) {\n super.doDisable(disable);\n if (this.client.isPainted) {\n this.client.refresh();\n }\n }\n //endregion\n generateLabelConfigs(data) {\n const\n me = this,\n configs = [];\n // Insert all configured labels\n for (const side of sides) {\n if (me[side]) {\n const\n {\n field,\n fieldDef,\n recordType,\n renderer,\n thisObj\n } = me[side],\n domConfig = {\n tag : 'label',\n className : {\n [me.labelCls] : 1,\n [`${me.labelCls}-${side}`] : 1\n },\n dataset : {\n side,\n taskFeature : `label-${side}`\n }\n };\n let value;\n const\n eventRecordProperty = `${recordType}Record`,\n eventRecord = data[eventRecordProperty];\n // If there's a renderer, use that by preference\n if (renderer) {\n value = renderer.call(thisObj || me.thisObj || me, {\n [eventRecordProperty] : eventRecord,\n resourceRecord : data.resourceRecord,\n assignmentRecord : data.assignmentRecord,\n domConfig\n });\n }\n else {\n value = eventRecord.getValue(field);\n // If it's a date, format it according to the Scheduler's defaults\n if (fieldDef?.type === 'date' && !renderer) {\n value = DateHelper.format(value, me.client.displayDateFormat);\n }\n else {\n value = StringHelper.encodeHtml(value);\n }\n }\n // No null/undefined or false\n if (value != null && value !== false) {\n domConfig.html = value;\n }\n // Only show label if we got some content\n if (domConfig.html != null || domConfig.children?.length || domConfig.text != null) {\n configs.push(domConfig);\n }\n }\n }\n return configs;\n }\n measureLabels(configs, data) {\n const\n me = this,\n pxPerMS = me.client.timeAxisViewModel.getSingleUnitInPixels('millisecond');\n for (const config of configs) {\n if (layoutSides[config.dataset.side]) {\n let { html } = config;\n let length = 0;\n // Calculate length based on string length\n if (me.labelLayoutMode === 'estimate') {\n // Strip tags before estimating\n if (html.includes('<')) {\n html = DomHelper.stripTags(html);\n }\n length = (html.length * me.labelCharWidth) + 18; // 18 = 1.5em, margin from event\n }\n // Measure\n else {\n const element = me.labelMeasureElement || (me.labelMeasureElement = DomHelper.createElement({\n className : 'b-sch-event-wrap b-measure-label',\n parent : me.client.foregroundCanvas\n }));\n // Outer DomSync should not remove\n element.retainElement = true;\n DomSync.sync({\n targetElement : element,\n domConfig : {\n onlyChildren : true,\n children : [\n config\n ]\n }\n });\n length = element.firstElementChild.offsetWidth;\n }\n // Convert from px to ms\n const ms = length / pxPerMS;\n // Adjust values used for event layout (not event position)\n switch (config.dataset.side) {\n case 'before':\n data.startMS -= ms;\n break;\n case 'after':\n data.endMS += ms;\n break;\n }\n }\n }\n }\n onEventDataGenerated(data) {\n if (!this.disabled && !data.eventRecord?.isResourceTimeRange) {\n const configs = this.generateLabelConfigs(data);\n if (layoutModes[this.labelLayoutMode]) {\n this.measureLabels(configs, data);\n }\n data.wrapperChildren.push(...configs);\n }\n }\n updateLabelLayoutMode() {\n if (!this.isConfiguring) {\n this.client.refreshWithTransition();\n }\n }\n updateLabelCharWidth() {\n if (!this.isConfiguring) {\n this.client.refreshWithTransition();\n }\n }\n}\nLabels.featureClass = 'b-sch-labels';\nLabels._$name = 'Labels'; GridFeatureManager.registerFeature(Labels, false, 'Scheduler');\n", "import AbstractTimeRanges from './AbstractTimeRanges.js';\nimport GridFeatureManager from '../../Grid/feature/GridFeatureManager.js';\nimport DateHelper from '../../Core/helper/DateHelper.js';\nimport VersionHelper from '../../Core/helper/VersionHelper.js';\nimport AttachToProjectMixin from '../data/mixin/AttachToProjectMixin.js';\nimport NonWorkingTimeMixin from './mixin/NonWorkingTimeMixin.js';\n/**\n * @module Scheduler/feature/NonWorkingTime\n */\n/**\n * Feature that allows styling of weekends (and other non-working time) by adding timeRanges for those days.\n *\n * {@inlineexample Scheduler/feature/NonWorkingTime.js}\n *\n * By default, the basic Scheduler's calendar is empty. When enabling this feature in the basic Scheduler, it injects\n * Saturday and Sunday weekend intervals if no intervals are encountered. For Scheduler Pro, it visualizes the project\n * calendar and does not automatically inject anything. You have to define a Calendar in the application and assign it\n * to the project, for more information on how to do that, please see Scheduler Pro's Scheduling/Calendars guide.\n *\n * Please note that to not clutter the view (and have a large negative effect on performance) the feature does not\n * render ranges shorter than the base unit used by the time axis. The behavior can be disabled with\n * {@link #config-hideRangesOnZooming} config.\n *\n * The feature also bails out of rendering ranges for very zoomed out views completely for the same reasons (see\n * {@link #config-maxTimeAxisUnit} for details).\n *\n * Also note that the feature uses virtualized rendering, only the currently visible non-working-time ranges are\n * available in the DOM.\n *\n * This feature is **disabled** by default for Scheduler, but **enabled** by default for Scheduler Pro.\n * For info on enabling it, see {@link Grid/view/mixin/GridFeatures}.\n *\n * @extends Scheduler/feature/AbstractTimeRanges\n * @demo Scheduler/nonworkingdays\n * @classtype nonWorkingTime\n * @mixes Scheduler/feature/mixin/NonWorkingTimeMixin\n * @feature\n */\nexport default class NonWorkingTime extends AbstractTimeRanges.mixin(AttachToProjectMixin, NonWorkingTimeMixin) {\n //region Default config\n static $name = 'NonWorkingTime';\n /** @hideconfigs enableResizing, store*/\n static get defaultConfig() {\n return {\n /**\n * Set to `true` to highlight non-working periods of time\n * @config {Boolean}\n * @deprecated Since 5.2.0, will be removed since the feature is pointless if set to false\n */\n highlightWeekends : null,\n /**\n * The feature by default does not render ranges smaller than the base unit used by the time axis.\n * Set this config to `false` to disable this behavior.\n *\n * The {@link #config-maxTimeAxisUnit} config defines a zoom level at which to bail out of\n * rendering ranges completely.
\n * @config {Boolean}\n * @default\n */\n hideRangesOnZooming : true,\n showHeaderElements : true,\n showLabelInBody : true,\n autoGeneratedWeekends : false\n };\n }\n static pluginConfig = {\n chain : [\n 'onInternalPaint',\n 'attachToProject',\n 'updateLocalization',\n 'onConfigChange',\n 'onSchedulerHorizontalScroll'\n ]\n };\n //endregion\n //region Init & destroy\n doDestroy() {\n this.attachToCalendar(null);\n super.doDestroy();\n }\n set highlightWeekends(highlight) {\n VersionHelper.deprecate('Scheduler', '6.0.0', 'Deprecated in favour of disabling the feature');\n this.disabled = !highlight;\n }\n get highlightWeekends() {\n return !this.disabled;\n }\n onConfigChange({ name }) {\n if (!this.isConfiguring && name === 'fillTicks') {\n this.refresh();\n }\n }\n //endregion\n //region Project\n attachToProject(project) {\n super.attachToProject(project);\n this.attachToCalendar(project.effectiveCalendar);\n // if there's no graph yet - need to delay this call until it appears, but not for scheduler\n if (!project.graph && !this.client.isScheduler) {\n project.ion({\n name : 'project',\n dataReady : { fn : () => this.attachToCalendar(project.effectiveCalendar), once : true },\n thisObj : this\n });\n }\n project.ion({\n name : 'project',\n calendarChange : () => this.attachToCalendar(project.effectiveCalendar),\n thisObj : this\n });\n }\n //endregion\n //region TimeAxisViewModel\n onTimeAxisViewModelUpdate(...args) {\n this._timeAxisUnitDurationMs = null;\n return super.onTimeAxisViewModelUpdate(...args);\n }\n //endregion\n //region Calendar\n attachToCalendar(calendar) {\n const\n me = this,\n { project, client } = me;\n me.detachListeners('calendar');\n me.autoGeneratedWeekends = false;\n if (calendar) {\n // Sets up a default weekend calendar for basic Scheduler, when no calendar is set\n me.setupDefaultCalendar();\n calendar.intervalStore.ion({\n name : 'calendar',\n change : () => me.setTimeout(() => me.refresh(), 1)\n });\n }\n // On changing calendar we react to a data level event which is triggered after project refresh.\n // Redraw right away\n if (client.isEngineReady && !client.project.isDelayingCalculation && !client.isDestroying) {\n me.refresh();\n }\n // Initially there is no guarantee we are ready to draw, wait for refresh\n else if (!project.isDestroyed) {\n me.detachListeners('initialProjectListener');\n project.ion({\n name : 'initialProjectListener',\n refresh({ isCalculated }) {\n // Cant render early, have to wait for calculations\n if (isCalculated !== false) {\n me.refresh();\n me.detachListeners('initialProjectListener');\n }\n },\n thisObj : me\n });\n }\n }\n get calendar() {\n return this.project?.effectiveCalendar;\n }\n //endregion\n //region Draw\n get timeAxisUnitDurationMs() {\n // calculate and cache duration of the timeAxis unit in milliseconds\n if (!this._timeAxisUnitDurationMs) {\n this._timeAxisUnitDurationMs = DateHelper.as('ms', 1, this.client.timeAxis.unit);\n }\n return this._timeAxisUnitDurationMs;\n }\n /**\n * Based on this method result the feature decides whether the provided non-working period should\n * be rendered or not.\n * The method checks that the range has non-zero {@link Scheduler.model.TimeSpan#field-duration},\n * lays in the visible timespan and its duration is longer or equal the base timeaxis unit\n * (if {@link #config-hideRangesOnZooming} is `true`).\n *\n * Override the method to implement your custom range rendering vetoing logic.\n * @param {Scheduler.model.TimeSpan} range Range to render.\n * @returns {Boolean} `true` if the range should be rendered and `false` otherwise.\n */\n shouldRenderRange(range, start, end) {\n // if the range is longer or equal than one timeAxis unit then render it\n return super.shouldRenderRange(range, start, end) && (!this.hideRangesOnZooming || range.durationMS >= this.timeAxisUnitDurationMs);\n }\n // Calendar intervals as TimeSpans, with adjacent intervals merged to create fewer\n get timeRanges() {\n const me = this;\n if (!me._timeRanges) {\n me._timeRanges = me.getCalendarTimeRanges(me.calendar);\n }\n return me._timeRanges;\n }\n //endregion\n}\nNonWorkingTime._$name = 'NonWorkingTime'; GridFeatureManager.registerFeature(NonWorkingTime, false, 'Scheduler');\nGridFeatureManager.registerFeature(NonWorkingTime, true, ['SchedulerPro', 'Gantt', 'ResourceHistogram']);\n", "import InstancePlugin from '../../Core/mixin/InstancePlugin.js';\nimport GridFeatureManager from '../../Grid/feature/GridFeatureManager.js';\nimport EventHelper from '../../Core/helper/EventHelper.js';\n/**\n * @module Scheduler/feature/Pan\n */\n/**\n * Makes the scheduler's timeline pannable by dragging with the mouse. Try it out in the demo below.\n *\n * {@inlineexample Scheduler/feature/Pan.js}\n *\n * ```javascript\n * // Enable Pan\n * const scheduler = new Scheduler({\n * features : {\n * pan : true,\n * eventDragCreate : false\n * }\n * });\n * ```\n *\n * This feature is **disabled** by default.\n * For info on enabling it, see {@link Grid.view.mixin.GridFeatures}.\n *\n * Incompatible with the {@link Scheduler.feature.EventDragCreate} and the\n * {@link Scheduler.feature.EventDragSelect} features.
\n *\n * @extends Core/mixin/InstancePlugin\n * @classtype pan\n * @feature\n */\nexport default class Pan extends InstancePlugin {\n // region Init\n static $name = 'Pan';\n static configurable = {\n /**\n * Set to `false` to not pan horizontally\n * @prp {Boolean}\n * @default\n */\n horizontal : true,\n /**\n * Set to `false` to not pan vertically\n * @prp {Boolean}\n * @default\n */\n vertical : true,\n /**\n * Set to `false` to not pan horizontally when dragging in the time axis header\n * @prp {Boolean}\n * @default\n */\n enableInHeader : true\n };\n get targetSelector() {\n return `.b-sch-timeaxis-cell,.b-timeline-subgrid${this.enableInHeader ? ',.b-sch-header-timeaxis-cell,.b-sch-header-text' : ''}`;\n }\n //endregion\n //region Plugin config\n static get pluginConfig() {\n return {\n chain : ['onElementMouseDown']\n };\n }\n //endregion\n // region Events\n /**\n * Fires on the owning Scheduler or Gantt widget before pan starts. Return `false` to prevent the operation.\n * @event beforePan\n * @preventable\n * @on-owner\n * @param {Event} event The native browser DOM event\n */\n //endregion\n onElementMouseDown(event) {\n const\n me = this,\n { client } = me,\n { button, touches, target, clientX, clientY } = event,\n dragFeature = client.features.taskDrag || client.features.eventDrag,\n enablePanOnEvents = client.readOnly || !dragFeature?.enabled;\n // only react to mouse input, and left button\n if (touches || button !== 0 || me.disabled || client.trigger('beforePan', { event }) === false) {\n return;\n }\n // only react to mousedown directly on grid cell, subgrid element or if drag is disabled - the events too\n if (target.matches(me.targetSelector) || (enablePanOnEvents && target.closest(client.eventSelector))) {\n me.mouseX = clientX;\n me.mouseY = clientY;\n me.onHeader = me.enableInHeader && target.closest('.b-sch-header-timeaxis-cell');\n me.mouseDetacher = EventHelper.on({\n element : document,\n mousemove : 'onMouseMove',\n mouseup : 'onMouseUp',\n thisObj : me\n });\n }\n }\n onMouseMove(event) {\n const\n me = this,\n { client } = me,\n xScroller = client.timeAxisSubGrid.scrollable,\n yScroller = client.scrollable,\n x = event.clientX,\n y = event.clientY;\n event.preventDefault();\n if (me.vertical && (client.isVertical || !me.onHeader)) {\n yScroller.scrollBy(0, me.mouseY - y);\n }\n if (me.horizontal && (client.isHorizontal || !me.onHeader)) {\n xScroller.scrollBy(me.mouseX - x);\n }\n me.mouseX = x;\n me.mouseY = y;\n }\n onMouseUp() {\n this.mouseDetacher();\n this.mouseDetacher = null;\n }\n /**\n * Yields `true` if a pan gesture is in process.\n * @property {Boolean}\n * @readonly\n */\n get isActive() {\n return Boolean(this.mouseDetacher);\n }\n //endregion\n}\nPan._$name = 'Pan'; GridFeatureManager.registerFeature(Pan, false, ['Scheduler', 'Gantt']);\n", "import ContextMenuBase from '../../Core/feature/base/ContextMenuBase.js';\nimport GridFeatureManager from '../../Grid/feature/GridFeatureManager.js';\n/**\n * @module Scheduler/feature/ResourceMenu\n */\n/**\n * Applicable only for Scheduler in `vertical` mode. Right click resource header cells to display a context menu.\n *\n * To invoke the menu in a keyboard-accessible manner, use the `SPACE` key when a resource cell is focused.\n *\n * {@inlineexample Scheduler/feature/ResourceMenu.js}\n *\n * ### Default menu items\n *\n * The ResourceMenu feature provides only one item by default:\n *\n * | Reference | Text | Weight | Description |\n * |------------------------|--------|--------|---------------------|\n * | `remove` | Delete | 100 | Delete the resource |\n *\n * ### Customizing the menu items\n *\n * The menu items in the resource menu can be customized, existing items can be changed or removed,\n * and new items can be added. This is handled using the `items` config of the feature.\n *\n * Add extra items for all columns:\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * mode : 'vertical',\n * features : {\n * resourceMenu : {\n * items : {\n * extraItem : {\n * text : 'My cell item',\n * icon : 'fa fa-bus',\n * weight : 200,\n * onItem : () => ...\n * }\n * }\n * }\n * }\n * });\n *\n * Remove an existing item:\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * mode : 'vertical',\n * features : {\n * resourceMenu : {\n * items : {\n * remove : null\n * }\n * }\n * }\n * });\n * ```\n *\n * Customize existing item:\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * mode : 'vertical',\n * features : {\n * resourceMenu : {\n * items : {\n * remove : {\n * text : 'Remove',\n * icon : 'b-fa b-fa-dumpster'\n * }\n * }\n * }\n * }\n * });\n * ```\n *\n * It is also possible to manipulate the default items and add new items in the processing function:\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * mode : 'vertical',\n * features : {\n * resourceMenu : {\n * processItems({items, record}) {\n * if (record.cost > 5000) {\n * items.myItem = { text : 'Split cost' };\n * }\n * }\n * }\n * }\n * });\n * ```\n *\n * The `processItems` implementation my be an `async` function which `awaits` a result to\n * mutate the `items` object.
\n *\n * This feature is **disabled** by default.\n *\n * @extends Core/feature/base/ContextMenuBase\n * @demo Scheduler/vertical\n * @classtype resourceMenu\n * @feature\n */\nexport default class ResourceMenu extends ContextMenuBase {\n //region Config\n static $name = 'ResourceMenu';\n static configurable = {\n /**\n * A function called before displaying the menu that allows manipulations of its items.\n * Returning `false` from this function prevents the menu being shown.\n *\n * ```javascript\n * features : {\n * resourceMenu : {\n * processItems({ items, record, column }) {\n * // Add or hide existing items here as needed\n * items.myAction = {\n * text : 'Cool action',\n * icon : 'b-fa b-fa-fw b-fa-ban',\n * onItem : () => console.log(`Clicked ${record.name}`),\n * weight : 1000 // Move to end\n * };\n *\n * if (!record.allowDelete) {\n * items.remove.hidden = true;\n * }\n * }\n * }\n * },\n * ```\n *\n * @config {Function}\n * @param {Object} context An object with information about the menu being shown.\n * @param {Scheduler.feature.ResourceMenu} context.feature A reference to this feature.\n * @param {Event} context.domEvent The initiating event.\n * @param {Event} context.event DEPRECATED: The initiating event.\n * @param {Number[]} context.point The client `X` and `Y` position of the initiating event.\n * @param {HTMLElement} context.targetElement The target to which the menu is being applied.\n * @param {Scheduler.model.ResourceModel} context.resourceRecord The record representing the current resource.\n * @param {Object- \n *
- >
- first level of submenu \n *
The `processItems` implementation my be an `async` function which `awaits` a result to\n * mutate the `items` object.
\n *\n * ## Video guides\n * {@frameworktabs}\n * {@react}\n * [@youtube](https://www.youtube.com/embed/HAq12QUBMx8)\n * {@endreact}\n * {@vue}\n * [@youtube](https://www.youtube.com/embed/nXMaClkkKdQ)\n * {@endvue}\n * {@angular}\n * [@youtube](https://www.youtube.com/embed/0seuhWrIeXc)\n * {@endangular}\n * {@endframeworktabs}\n *\n * Full information of the menu customization can be found in the\n * [\"Customizing the Event menu, the Schedule menu, and the TimeAxisHeader menu\"](#Scheduler/guides/customization/contextmenu.md)\n * guide.\n *\n * This feature is **enabled** by default\n *\n * @demo Scheduler/basic\n * @extends Scheduler/feature/base/TimeSpanMenuBase\n * @classtype scheduleMenu\n * @feature\n */\nexport default class ScheduleMenu extends TimeSpanMenuBase {\n //region Config\n static get $name() {\n return 'ScheduleMenu';\n }\n static get defaultConfig() {\n return {\n type : 'schedule',\n /**\n * This is a preconfigured set of items used to create the default context menu.\n *\n * The `items` provided by this feature are listed below. These are the predefined property names which you\n * may configure:\n *\n * - `addEvent` Add an event for at the resource and time indicated by the `contextmenu` event.\n *\n * To remove existing items, set corresponding keys `null`:\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * scheduleMenu : {\n * items : {\n * addEvent : null\n * }\n * }\n * }\n * });\n * ```\n *\n * @config {Object- \n *
- Date
- ${date} \n *
- Resource
- ${resourceRecord.name} \n *
${data.message}
`,\n /**\n * Set to `true` to hide this tooltip when hovering non-working time. Defaults to `false` for Scheduler,\n * `true` for SchedulerPro\n * @config {Boolean}\n */\n hideForNonWorkingTime : null\n };\n }\n // Plugin configuration. This plugin chains some of the functions in Grid.\n static get pluginConfig() {\n return {\n chain : ['onInternalPaint']\n };\n }\n //endregion\n //region Init\n /**\n * Set up drag and drop and hover tooltip.\n * @private\n */\n onInternalPaint({ firstPaint }) {\n if (!firstPaint) {\n return;\n }\n const\n me = this,\n { client } = me;\n if (client.isSchedulerPro && me.hideForNonWorkingTime === undefined) {\n me.hideForNonWorkingTime = true;\n }\n let reshowListener;\n const tip = me.hoverTip = new Tooltip({\n id : `${client.id}-schedule-tip`,\n cls : 'b-sch-scheduletip',\n allowOver : true,\n hoverDelay : 0,\n hideDelay : 100,\n showOnHover : true,\n forElement : client.timeAxisSubGridElement,\n anchorToTarget : false,\n trackMouse : true,\n updateContentOnMouseMove : true,\n // disable text content and monitor resize for tooltip, otherwise it doesn't\n // get sized properly on first appearance\n monitorResize : false,\n textContent : false,\n forSelector : '.b-schedulerbase:not(.b-dragging-event,.b-dragcreating,.b-creating-dependency) .b-grid-body-container:not(.b-scrolling) .b-timeline-subgrid:not(.b-scrolling) > :not(.b-sch-foreground-canvas):not(.b-group-footer):not(.b-group-row) *',\n // Do not constrain at all, want it to be able to go outside of the viewport to not get in the way\n getHtml : me.getHoverTipHtml.bind(me),\n onDocumentMouseDown(event) {\n // Click on the scheduler hides until the very next\n // non-button-pressed mouse move!\n if (tip.forElement.contains(event.event.target)) {\n reshowListener = EventHelper.on({\n thisObj : me,\n element : client.timeAxisSubGridElement,\n mousemove : e => tip.internalOnPointerOver(e),\n capture : true\n });\n }\n const hideAnimation = tip.hideAnimation;\n tip.hideAnimation = false;\n tip.constructor.prototype.onDocumentMouseDown.call(tip, event);\n tip.hideAnimation = hideAnimation;\n },\n // on Core/mixin/Events constructor, me.config.listeners is deleted and attributed its value to me.configuredListeners\n // to then on processConfiguredListeners it set me.listeners to our TooltipBase\n // but since we need our initial config.listeners to set to our internal tooltip, we leave processConfiguredListeners empty\n // to avoid lost our listeners to apply for our internal tooltip here and force our feature has all Tooltip events firing\n ...me.config,\n internalListeners : me.configuredListeners\n });\n // We have to add our own listener after instantiation because it may conflict with a configured listener\n tip.ion({\n pointerover({ event }) {\n const buttonsPressed = 'buttons' in event ? event.buttons > 0\n : event.which > 0; // fallback for Safari which doesn't support 'buttons'\n // This is the non-button-pressed mousemove\n // after the document mousedown\n if (!buttonsPressed && reshowListener) {\n reshowListener();\n }\n // Never any tooltip while interaction is ongoing and a mouse button is pressed\n return !me.disabled && !buttonsPressed;\n },\n innerhtmlupdate({ source }) {\n me.clockTemplate.updateDateIndicator(source.element, me.lastTime);\n }\n });\n // Update tooltip after zooming\n client.ion({\n timeAxisViewModelUpdate : 'updateTip',\n thisObj : me\n });\n me.clockTemplate = new ClockTemplate({\n scheduler : client\n });\n }\n // leave configuredListeners alone until render time at which they are used on the tooltip\n processConfiguredListeners() {}\n updateTip() {\n if (this.hoverTip.isVisible) {\n this.hoverTip.updateContent();\n }\n }\n doDestroy() {\n this.destroyProperties('clockTemplate', 'hoverTip');\n super.doDestroy();\n }\n //endregion\n //region Contents\n /**\n * @deprecated Use {@link #function-generateTipContent} instead.\n * Gets html to display in hover tooltip (tooltip displayed on empty parts of scheduler)\n * @private\n */\n getHoverTipHtml({ tip, event }) {\n const\n me = this,\n scheduler = me.client,\n date = event && scheduler.getDateFromDomEvent(event, 'floor', true);\n let html = me.lastHtml;\n // event.target might be null in the case of being hosted in a web component https://github.com/bryntum/bryntum-suite/pull/4488\n if (date && event.target) {\n const resourceRecord = scheduler.resolveResourceRecord(event);\n // resourceRecord might be null if user hover over the tooltip, but we shouldn't hide the tooltip in this case\n if ((resourceRecord && (date - me.lastTime !== 0 || resourceRecord.id !== me.lastResourceId))) {\n if (me.hideForNonWorkingTime) {\n const isWorkingTime = resourceRecord.isWorkingTime(date);\n tip.element.classList.toggle('b-nonworking-time', !isWorkingTime);\n }\n me.lastResourceId = resourceRecord.id;\n html = me.lastHtml = me.generateTipContent({ date, event, resourceRecord });\n }\n }\n else {\n tip.hide();\n me.lastTime = null;\n me.lastResourceId = null;\n }\n return html;\n }\n /**\n * Called as mouse pointer is moved over a new resource or time block. You can override this to show\n * custom HTML in the tooltip.\n * @param {Object} context\n * @param {Date} context.date The date of the hovered point\n * @param {Event} context.event The DOM event that triggered this tooltip to show\n * @param {Scheduler.model.ResourceModel} context.resourceRecord The resource record\n * @returns {String} The HTML contents to show in the tooltip (an empty return value will hide the tooltip)\n */\n generateTipContent({ date, event, resourceRecord }) {\n const\n me = this,\n clockHtml = me.clockTemplate.generateContent({\n date,\n text : me.client.getFormattedDate(date)\n }),\n messageHtml = me.messageTemplate({\n message : me.getText(date, event, resourceRecord) || ''\n });\n me.lastTime = date;\n return clockHtml + messageHtml;\n }\n /**\n * Override this to render custom text to default hover tip\n * @param {Date} date\n * @param {Event} event Browser event\n * @param {Scheduler.model.ResourceModel} resourceRecord The resource record\n * @returns {String}\n */\n getText(date, event, resourceRecord) {}\n //endregion\n}\nScheduleTooltip.featureClass = 'b-scheduletip';\nScheduleTooltip._$name = 'ScheduleTooltip'; GridFeatureManager.registerFeature(ScheduleTooltip, true, 'Scheduler');\nGridFeatureManager.registerFeature(ScheduleTooltip, false, 'ResourceUtilization');\n", "import GridFeatureManager from '../../Grid/feature/GridFeatureManager.js';\nimport InstancePlugin from '../../Core/mixin/InstancePlugin.js';\nimport Editor from '../../Core/widget/Editor.js';\nimport DomHelper from '../../Core/helper/DomHelper.js';\nimport TaskEditStm from './mixin/TaskEditStm.js';\n/**\n * @module Scheduler/feature/SimpleEventEdit\n */\n/**\n * Feature that displays a text field to edit the event name. You can control the flow of this by listening to the events relayed by this class from the underlying {@link Core.widget.Editor}.\n * To use this feature, you also need to disable the built-in default editing feature:\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * eventEdit : false,\n * simpleEventEdit : true\n * }\n * });\n * ```\n *\n * This feature is **disabled** by default.\n * For info on enabling it, see {@link Grid.view.mixin.GridFeatures}.\n *\n * {@inlineexample Scheduler/feature/SimpleEventEdit.js}\n *\n * @demo Scheduler/simpleeditor\n *\n * @extends Core/mixin/InstancePlugin\n * @classtype simpleEventEdit\n * @feature\n */\nexport default class SimpleEventEdit extends InstancePlugin.mixin(TaskEditStm) {\n // region Events\n /**\n * Fired before the editor is shown to start an edit operation. Returning `false` from a handler vetoes the edit operation.\n * @event beforeStart\n * @param {Object} value The value to be edited.\n * @param {Core.widget.Editor} source The Editor that triggered the event.\n * @preventable\n */\n /**\n * Fired when an edit operation has begun.\n * @event start\n * @param {Object} value The starting value of the field.\n * @param {Core.widget.Editor} source The Editor that triggered the event.\n */\n /**\n * Fired when an edit completion has been requested, either by `ENTER`, or focus loss (if configured to complete on blur).\n * The completion may be vetoed, in which case, focus is moved back into the editor.\n * @event beforeComplete\n * @param {Object} oldValue The original value.\n * @param {Object} value The new value.\n * @param {Core.widget.Editor} source The Editor that triggered the event.\n * @preventable\n */\n /**\n * Edit has been completed, and any associated record or element has been updated.\n * @event complete\n * @param {Object} oldValue The original value.\n * @param {Object} value The new value.\n * @param {Core.widget.Editor} source The Editor that triggered the event.\n */\n /**\n * Fired when cancellation has been requested, either by `ESC`, or focus loss (if configured to cancel on blur).\n * The cancellation may be vetoed, in which case, focus is moved back into the editor.\n * @event beforeCancel\n * @param {Object} oldValue The original value.\n * @param {Object} value The new value.\n * @param {Core.widget.Editor} source The Editor that triggered the event.\n * @preventable\n */\n /**\n * Edit has been canceled without updating the associated record or element.\n * @event cancel\n * @param {Object} oldValue The original value.\n * @param {Object} value The value of the field.\n * @param {Core.widget.Editor} source The Editor that triggered the event.\n */\n // endregion\n //region Config\n static get $name() {\n return 'SimpleEventEdit';\n }\n static get defaultConfig() {\n return {\n /**\n * The event that shall trigger showing the editor. Defaults to `eventdblclick`, set to `''` or null to\n * disable editing of existing events.\n * @config {String}\n * @default\n * @category Editor\n */\n triggerEvent : 'eventdblclick',\n /**\n * The current {@link Scheduler.model.EventModel} record, which is being edited by the event editor.\n * @property {Scheduler.model.EventModel}\n * @readonly\n */\n eventRecord : null,\n /**\n * The {@link Scheduler.model.EventModel} field to edit\n * @config {String}\n * @category Editor\n */\n field : 'name',\n /**\n * The editor configuration, where you can control which widget to show\n * @config {EditorConfig}\n * @category Editor\n */\n editorConfig : null\n };\n }\n static get pluginConfig() {\n return {\n chain : ['onEventEnterKey', 'editEvent']\n };\n }\n //endregion\n //region Editing\n construct(scheduler, config) {\n const me = this;\n me.scheduler = scheduler;\n scheduler.eventEdit = me;\n super.construct(scheduler, config);\n me.clientListenersDetacher = scheduler.ion({\n [me.triggerEvent] : ({ eventRecord, eventElement }) => me.editEvent(eventRecord, eventRecord.resource, eventElement),\n dragcreateend : me.onDragCreateEnd,\n thisObj : me\n });\n }\n doDestroy() {\n this.clientListenersDetacher();\n this.editor?.destroy();\n super.doDestroy();\n }\n get eventStore() {\n return this.scheduler.eventStore;\n }\n get project() {\n return this.client.project;\n }\n // region Editor\n /**\n * Opens an Editor for the passed event. This function is exposed on Scheduler and can be called as\n * `scheduler.editEvent()`.\n * @param {Scheduler.model.EventModel} eventRecord The Event to edit\n * @param {Scheduler.model.ResourceModel} [resourceRecord] The Resource record for the event.\n * @on-owner\n * @async\n */\n async editEvent(eventRecord, resourceRecord, element, stmCapture) {\n const\n me = this,\n { scheduler } = me,\n { eventEdit } = me.client.features;\n // If event edit feature also exists, we use simple edit for new events and eventEdit it for already created events\n if (scheduler.readOnly || me.disabled || eventRecord.readOnly || (eventEdit && !eventEdit.disabled && !eventRecord.isCreating)) {\n return;\n }\n let { editor } = me;\n // Want to put editor in inner element (b-sch-event) to get correct font size, but when drag creating the proxy\n // has no inner element\n element = DomHelper.down(element, scheduler.eventInnerSelector) || element;\n eventRecord = eventRecord.isAssignment ? eventRecord.event : eventRecord;\n me.resource = resourceRecord;\n me.event = eventRecord;\n me.element = element;\n scheduler.element.classList.add('b-eventeditor-editing');\n if (editor) {\n // Positioned editors remove themselves so that their appendTo element\n // may have its content updated unobstructed.\n editor.render(scheduler.timeAxisSubGridElement);\n }\n else {\n // Editor is contained in, and owned by the TimeAxisSubGrid to avoid focus flipping out and in.\n // The editor is an owned descendant of the SubGrid.\n me.editor = editor = Editor.new({\n owner : scheduler.timeAxisSubGrid,\n appendTo : scheduler.timeAxisSubGridElement,\n scrollAction : 'realign',\n maxHeight : 40,\n align : {\n align : scheduler.isHorizontal ? 'c-c' : 't-t'\n },\n cls : 'b-simpleeventeditor',\n internalListeners : {\n complete : 'onEditorComplete',\n cancel : 'onEditorCancel',\n thisObj : me\n },\n // Keys must not propagate into the scheduler\n onInternalKeyDown : keyEvent => keyEvent.stopPropagation()\n }, me.editorConfig);\n me.relayEvents(me.editor, ['beforestart', 'start', 'beforecomplete', 'complete', 'beforecancel', 'cancel']);\n }\n if (stmCapture) {\n me.stmInitiallyAutoRecord = stmCapture.stmInitiallyAutoRecord;\n me.stmInitiallyDisabled = stmCapture.stmInitiallyDisabled;\n me.hasStmCapture = true;\n // indicate that editor has been opened, and is now managing the \"stm capture\"\n stmCapture.transferred = true;\n }\n // it is set to `false` by calendar, to ignore the STM mechanism\n else if (stmCapture !== false && !me.hasStmCapture) {\n me.captureStm(true);\n }\n // Drag-created records get a \"New event\" name for cosmetic purposes.\n // Remove just before editing.\n if (eventRecord.isCreating) {\n eventRecord.name = '';\n }\n await editor.startEdit({\n target : element,\n record : eventRecord,\n field : me.field\n });\n // If text label is not visible, scroll it into view\n if (scheduler.isVertical && eventRecord.startDate < scheduler.visibleDateRange.startDate) {\n editor.element.scrollIntoView();\n }\n // No key navigation during editing\n scheduler.navigator.disabled = true;\n }\n onEditorComplete() {\n // Promote event to being permanent so that it is syncable to the server as a new event\n this.event.isCreating = false;\n this.reset();\n this.freeStm(true);\n }\n onEditorCancel() {\n // Remove the transient event\n if (this.event.isCreating) {\n this.event.remove();\n }\n this.reset();\n this.freeStm(false);\n }\n reset() {\n this.scheduler.element.classList.remove('b-eventeditor-editing');\n // Restore key navigation after editing\n this.scheduler.navigator.disabled = false;\n this.event = null;\n this.resource = null;\n }\n //endregion\n // chained from EventNavigation\n onEventEnterKey({ assignmentRecord, eventRecord }) {\n const\n element = assignmentRecord ? this.scheduler.getElementFromAssignmentRecord(assignmentRecord) : this.scheduler.getElementFromEventRecord(eventRecord),\n resourceRecord = (assignmentRecord || eventRecord).resource;\n this.editEvent(eventRecord, resourceRecord, element);\n }\n //endregion\n onDragCreateEnd({ eventRecord, resourceRecord, eventElement, stmCapture }) {\n this.element = eventElement;\n this.editEvent(eventRecord, resourceRecord, eventElement, stmCapture);\n }\n}\nSimpleEventEdit._$name = 'SimpleEventEdit'; GridFeatureManager.registerFeature(SimpleEventEdit, false, 'Scheduler');\n", "import GridFeatureManager from '../../Grid/feature/GridFeatureManager.js';\nimport GridSplit from '../../Grid/feature/Split.js';\nimport DateHelper from '../../Core/helper/DateHelper.js';\nimport ObjectHelper from '../../Core/helper/ObjectHelper.js';\nimport Rectangle from '../../Core/helper/util/Rectangle.js';\nimport DomHelper from '../../Core/helper/DomHelper.js';\n/**\n * @module Scheduler/feature/Split\n */\nconst\n startScrollOptions = Object.freeze({\n animate : false,\n block : 'start'\n }),\n endScrollOptions = Object.freeze({\n animate : false,\n block : 'end'\n });\n/**\n * This feature allows splitting the Scheduler into multiple views, either by using the cell context menu, or\n * programmatically by calling {@link #function-split split()}.\n *\n * {@inlineexample Scheduler/feature/Split.js}\n *\n * See {@link Grid/feature/Split} for more details.\n *\n * ## Scheduler specifics\n *\n * - Scheduler allows splitting by dates, either programmatically or by using the context menu.\n * - Scheduler prevents splitting in the grid part using the context menu.\n * - The `eventDrag` feature will automatically be configured to allow dragging between the clones (by setting\n * `constrainDragToTimeline` to `false`).\n * - Splitting is not supported in vertical mode.\n *\n * {@note}\n * Note that although Gantt is related to Scheduler, splitting is not supported in Gantt.\n * {/@note}\n *\n * This feature is **disabled** by default.\n * For info on enabling it, see {@link Grid/view/mixin/GridFeatures}.\n *\n * @classtype split\n * @feature\n * @extends Grid/feature/Split\n *\n * @typings Grid.feature.Split -> Grid.feature.GridSplit\n */\nexport default class Split extends GridSplit {\n static $name = 'Split';\n static configurable = {\n /**\n * Properties whose changes should be relayed to sub-views at runtime.\n *\n * Supply an object with property names as keys, and a truthy value to relay the change, or a falsy value to not\n * relay it. The object will be merged with the default values.\n *\n * In addition to the properties relayed by Grid, Scheduler also relays these:\n * * {@link Scheduler/view/Scheduler#property-barMargin}\n * * {@link Scheduler/view/Scheduler#property-eventColor}\n * * {@link Scheduler/view/Scheduler#property-eventStyle}\n * * {@link Scheduler/view/Scheduler#property-eventLayout}\n * * {@link Scheduler/view/Scheduler#property-fillTicks}\n * * {@link Scheduler/view/Scheduler#property-resourceMargin}\n * * {@link Scheduler/view/Scheduler#property-snap}\n * * {@link Scheduler/view/Scheduler#property-tickSize}\n *\n * Example of supplying a custom set of properties to relay:\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * split : {\n * relayProperties : {\n * barMargin : false, // Do not relay barMargin changes\n * myConfig : true // Relay changes to the myConfig property\n * }\n * }\n * }\n * }\n * ```\n * @config {Object- \n *
- sum
- Sum of all values in the column\n *
- add
- Alias for sum\n *
- count
- Number of rows\n *
- countNotEmpty
- Number of rows containing a value\n *
- average
- Average of all values in the column\n *
- function
- A custom function, used with store.reduce. Should take arguments (sum, record)\n *
Renderer output
';\n * }\n * }\n * ]\n * }\n * }\n * });\n * ```\n *\n * @config {SchedulerSummaryOptions[]}\n */\n summaries : null,\n /**\n * Renderer function for a single time axis tick. Should calculate a sum and return HTML as a result.\n *\n * ```javascript\n * new Scheduler({\n * features : {\n * summary : {\n * renderer : ({ startDate, endDate, eventStore, resourceStore, events, element }) => {\n * // return display value\n * returns 'Renderer output
';\n * }\n * }\n * }\n * });\n * ```\n *\n * @param {Object} context Rendering context object\n * @param {Date} context.startDate Tick start date\n * @param {Date} context.endDate Tick end date\n * @param {Scheduler.model.EventModel[]} context.events Events which belong to the group\n * @param {Scheduler.data.EventStore} context.eventStore Event store\n * @param {Scheduler.data.ResourceStore} context.resourceStore Resource store\n * @param {HTMLElement} context.element Summary tick container\n * @returns {String} Html content\n * @config {Function}\n */\n renderer : null,\n /**\n * A config object for the {@link Grid.column.Column} used to contain the summary bar.\n * @config {GridColumnConfig}\n */\n verticalSummaryColumnConfig : null\n };\n }\n // Plugin configuration. This plugin chains some of the functions in Grid.\n static get pluginConfig() {\n const config = super.pluginConfig;\n config.chain.push('bindStore', 'updateEventStore', 'updateResourceStore');\n return config;\n }\n //endregion\n //region Init\n construct(scheduler, config) {\n const me = this;\n me.scheduler = scheduler;\n if (scheduler.isVertical) {\n scheduler.timeAxisSubGrid.resizable = false;\n config.hideFooters = true;\n scheduler.add(scheduler.createSubGrid('right'));\n me.summaryColumn = scheduler.columns.add(ObjectHelper.assign({\n filterable : null,\n region : 'right',\n cellCls : 'b-grid-footer b-sch-summarybar',\n align : 'center',\n sortable : false,\n editor : false,\n groupable : false,\n htmlEncode : false,\n cellMenuItems : false,\n enableHeaderContextMenu : false,\n hidden : me.disabled\n }, me.verticalSummaryColumnConfig))[0];\n }\n super.construct(scheduler, config);\n // Feature might be run from Grid (in docs), should not crash\n if (scheduler.isSchedulerBase) {\n me.updateEventStore(scheduler.eventStore);\n me.updateResourceStore(scheduler.resourceStore);\n }\n }\n //endregion\n //region Render\n updateEventStore(eventStore) {\n this.detachListeners('summaryEventStore');\n eventStore.ion({\n name : 'summaryEventStore',\n filter : 'updateTimelineSummaries',\n thisObj : this\n });\n }\n updateResourceStore(resourceStore) {\n this.detachListeners('summaryResourceStore');\n resourceStore.ion({\n name : 'summaryResourceStore',\n filter : 'updateTimelineSummaries',\n thisObj : this\n });\n }\n /**\n * Updates summaries.\n * @private\n */\n updateTimelineSummaries() {\n const\n me = this,\n { client : timeline } = me,\n { eventStore, timeAxis } = timeline,\n summaryContainer = me.summaryBarElement,\n forResources = (me.selectedOnly && timeline.selectedRecords.length)\n ? timeline.selectedRecords : timeline.resourceStore.records;\n if (summaryContainer && timeline.isEngineReady) {\n // group events by ticks info once here to avoid performance lags\n // should be inside `scheduler.isEngineReady` check to make sure all events were calculated\n // https://github.com/bryntum/support/issues/2977\n const eventsByTick = timeline.getResourcesEventsPerTick(forResources, ({ event }) => {\n return !eventStore.isFiltered || eventStore.records.includes(event);\n });\n Array.from(summaryContainer.children).forEach((element, i) => {\n const\n tick = timeAxis.getAt(i),\n events = eventsByTick[i] || [];\n let html = '',\n tipHtml = `${value}
` : '';\n if (me.summaries.length > 1 || value) {\n html += valueHtml;\n }\n tipHtml += valueHtml ? (`` + valueHtml) : '';\n });\n element.innerHTML = html;\n // Only show tooltips for summary cells with content\n element._tipHtml = html ? tipHtml : '';\n });\n }\n }\n}\n// Override Grids Summary with this improved version\nSummary._$name = 'Summary'; GridFeatureManager.registerFeature(Summary, false, 'Scheduler');\n", "import HeaderMenu from '../../Grid/feature/HeaderMenu.js';\nimport GridFeatureManager from '../../Grid/feature/GridFeatureManager.js';\nimport DateHelper from '../../Core/helper/DateHelper.js';\nimport '../../Core/widget/Slider.js';\n/**\n * @module Scheduler/feature/TimeAxisHeaderMenu\n */\nconst setTimeSpanOptions = {\n maintainVisibleStart : true\n};\n/**\n * Adds scheduler specific menu items to the timeline header context menu.\n *\n * ## Default timeaxis header menu items\n *\n * Here is the list of menu items provided by this and other features:\n *\n * | Reference | Text | Weight | Feature | Description |\n * |--------------------|-----------------------|--------|---------------------------------------------------|------------------------------|\n * | `eventsFilter` | Filter tasks | 100 | {@link Scheduler.feature.EventFilter EventFilter} | Submenu for event filtering |\n * | \\>`nameFilter` | By name | 110 | {@link Scheduler.feature.EventFilter EventFilter} | Filter by `name` |\n * | `zoomLevel` | Zoom | 200 | *This feature* | Submenu for timeline zooming |\n * | \\>`zoomSlider` | - | 210 | *This feature* | Changes current zoom level |\n * | `dateRange` | Date range | 300 | *This feature* | Submenu for timeline range |\n * | \\>`startDateField` | Start date | 310 | *This feature* | Start date for the timeline |\n * | \\>`endDateField` | End date | 320 | *This feature* | End date for the timeline |\n * | \\>`leftShiftBtn` | < | 330 | *This feature* | Shift backward |\n * | \\>`todayBtn` | Today | 340 | *This feature* | Go to today |\n * | \\>`rightShiftBtn` | \\> | 350 | *This feature* | Shift forward |\n * | `currentTimeLine` | Show current timeline | 400 | {@link Scheduler.feature.TimeRanges TimeRanges} | Show current time line |\n *\n * - \n *
- >
- first level of submenu \n *
The `processItems` implementation my be an `async` function which `awaits` a result to\n * mutate the `items` object.
\n *\n * Full information of the menu customization can be found in the\n * [\"Customizing the Event menu, the Schedule menu, and the TimeAxisHeader menu\"](#Scheduler/guides/customization/contextmenu.md)\n * guide.\n *\n * ## Video guides\n * {@frameworktabs}\n * {@react}\n * [@youtube](https://www.youtube.com/embed/HAq12QUBMx8)\n * {@endreact}\n * {@vue}\n * [@youtube](https://www.youtube.com/embed/nXMaClkkKdQ)\n * {@endvue}\n * {@angular}\n * [@youtube](https://www.youtube.com/embed/0seuhWrIeXc)\n * {@endangular}\n * {@endframeworktabs}\n *\n * This feature is **enabled** by default\n *\n * {@inlineexample Scheduler/feature/TimeAxisHeaderMenu.js}\n *\n * @demo Scheduler/basic\n *\n * @extends Grid/feature/HeaderMenu\n * @classtype timeAxisHeaderMenu\n * @feature\n */\nexport default class TimeAxisHeaderMenu extends HeaderMenu {\n //region Config\n static get $name() {\n return 'TimeAxisHeaderMenu';\n }\n static get defaultConfig() {\n return {\n /**\n * A function called before displaying the menu that allows manipulations of its items.\n * Returning `false` from this function prevents the menu being shown.\n *\n * ```javascript\n * features : {\n * timeAxisHeaderMenu : {\n * processItems({ items }) {\n * // Add or hide existing items here as needed\n * items.myAction = {\n * text : 'Cool action',\n * icon : 'b-fa b-fa-fw b-fa-ban',\n * onItem : () => console.log('Some coolness'),\n * weight : 300 // Move to end\n * };\n *\n * // Hide zoom slider\n * items.zoomLevel.hidden = true;\n * }\n * }\n * },\n * ```\n *\n * @config {Function}\n * @param {Object} context An object with information about the menu being shown.\n * @param {Scheduler.feature.TimeAxisHeaderMenu} context.feature A reference to this feature.\n * @param {Event} context.domEvent The initiating event.\n * @param {Event} context.event DEPRECATED: The initiating event.\n * @param {Number[]} context.point The client `X` and `Y` position of the initiating event.\n * @param {HTMLElement} context.targetElement The target to which the menu is being applied.\n * @param {ObjectNot compatible with the {@link Scheduler/feature/HeaderZoom} feature.
\n *\n * This feature is **disabled** by default.\n * For info on enabling it, see {@link Grid/view/mixin/GridFeatures}.\n *\n * @extends Scheduler/feature/AbstractTimeRanges\n * @demo Scheduler/time-selection\n * @classtype timeSelection\n * @feature\n */\nexport default class TimeSelection extends AbstractTimeRanges {\n //region Default config\n static $name = 'TimeSelection';\n /** @hideconfigs enableResizing, showTooltip, dragTipTemplate, cls, showHeaderElements */\n /** @hideproperties showHeaderElements, timeRanges */\n /** @hidefunctions getTipHtml, shouldRenderRange */\n static get configurable() {\n return {\n enableResizing : true,\n showTooltip : false,\n dragTipTemplate : null,\n cls : 'b-selected-time-span',\n dragHelperConfig : {\n // Data will be updated on drag, no need for DragHelper to touch the element\n skipUpdatingElement : true\n },\n resizeHelperConfig : {\n // Data will be updated on resize, no need for ResizeHelper to touch the element\n skipUpdatingElement : true\n },\n /**\n * Template used to generate the tooltip contents when hovering the time selection header element.\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * timeSelection : {\n * tooltipTemplate({ startDate, endDate }) {\n * const count = this.client.getAvailableResources(startDate, endDate).length;\n * return `${count || 'No'} available resource(s)`;\n * }\n * }\n * }\n * });\n * ```\n *\n * @config {Function} tooltipTemplate\n * @param {Object} data Tooltip data\n * @param {Date} data.startDate\n * @param {Date} data.endDate\n * @returns {String} String representing the HTML markup\n * @category Common\n */\n /**\n * Function used to generate the HTML content for the selected time span's header element.\n *\n * If you want to include an icon or similar to clear the selection on click, make sure to set\n * `date-ref=\"closeButton\"` on it.\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * timeSelection : {\n * headerRenderer({ timeRange }) {\n * return `\n * ${DateHelper.format(timeRange.startDate, 'LL')}\n * \n * `;\n * }\n * }\n * }\n * });\n * ```\n * @config {Function} headerRenderer\n * @param {Object} data Render data\n * @param {Object} data.timeRange\n * @param {Date} data.timeRange.startDate\n * @param {Date} data.timeRange.endDate\n * @returns {String}\n * @category Common\n */\n headerRenderer({ timeRange }) {\n const { dateFormat } = this.client.timeAxisViewModel.bottomHeader;\n return `${DateHelper.format(timeRange.startDate, dateFormat)}\n ${DateHelper.format(timeRange.endDate, dateFormat)}\n `;\n },\n /**\n * The selected time span, which can be set using simple `startDate` and `endDate` properties\n * @prp {Object} selectedTimeSpan\n * @param {Date} selectedTimeSpan.startDate The start date of the selected time span\n * @param {Date} selectedTimeSpan.endDate The end date of the selected time span\n */\n selectedTimeSpan : null\n };\n }\n //endregion\n //region Init & destroy\n onUIReady() {\n const me = this;\n super.onUIReady();\n if (me.hoverTooltip) {\n me.hoverTooltip.getHtml = () => {\n return me.tooltipTemplate({ ...me.selectedTimeSpan });\n };\n }\n me.client.ion({\n timeAxisHeaderMouseDown : 'onTimeAxisHeaderMouseDown',\n thisObj : me\n });\n }\n onTimeAxisHeaderMouseDown({ startDate, endDate }) {\n if (!this.disabled) {\n this.selectedTimeSpan = {\n startDate,\n endDate\n };\n }\n }\n onTimeRangeClick(event) {\n super.onTimeRangeClick(event);\n const me = this;\n if (!me.disabled && event.target.closest('.b-selected-time-span')) {\n if (event.target.matches('[data-ref=\"closeButton\"]')) {\n me.selectedTimeSpan = null;\n }\n else {\n /**\n * Triggered when clicking the time selection header element\n * @event timeSelectionElementClick\n * @on-owner\n * @param {Scheduler.view.Scheduler} source The scheduler\n * @param {Date} startDate The selected range start date\n * @param {Date} endDate The selected range end date\n * @param {Event} domEvent The raw DOM event\n */\n me.client.trigger('timeSelectionElementClick', {\n ...me.selectedTimeSpan,\n domEvent : event\n });\n }\n }\n }\n updateFromCoords(x, y, width, height) {\n const\n { client } = this,\n size = client.isHorizontal ? width : height;\n let start = client.isHorizontal ? x : y;\n if (client.rtl && client.isHorizontal) {\n start = Math.max(client.timeAxisViewModel.totalSize - start - size, 0);\n }\n const\n startDate = client.getDateFromCoord({ coord : start, roundingMethod : 'round', ignoreRTL : true }),\n endDate = client.getDateFromCoord({ coord : start + size, roundingMethod : 'round', ignoreRTL : true });\n this.selectedTimeSpan = {\n startDate : DateHelper.max(startDate, client.startDate),\n endDate : DateHelper.min(endDate, client.endDate)\n };\n }\n onResizeStart({ source }) {\n const\n {\n timeAxisViewModel,\n timeResolution\n } = this.client,\n resolutionDurationMS = DateHelper.asMilliseconds(timeResolution.increment, timeResolution.unit);\n // Prevent resizing smaller than one resolution increment\n this.resize.minWidth = timeAxisViewModel.getDistanceForDuration(resolutionDurationMS);\n }\n onResizeDrag({ context }) {\n this.updateFromCoords(\n context.newX,\n context.newY,\n context.newWidth ?? context.elementWidth,\n context.newHeight ?? context.elementHeight\n );\n }\n onDragStart(event) {\n super.onDragStart(event);\n const { context } = event;\n context.elementWidth = context.element.offsetWidth;\n context.elementHeight = context.element.offsetHeight;\n }\n onDrag({ context }) {\n this.updateFromCoords(\n context.newX,\n context.newY,\n context.elementWidth,\n context.elementHeight\n );\n }\n onDrop() {\n this.client.element.classList.remove('b-dragging-timerange');\n }\n onDragReset() {\n this.refresh();\n }\n get timeRanges() {\n return this.selectedTimeSpan ? [this.selectedTimeSpan] : [];\n }\n // Always render the selection\n shouldRenderRange() {\n return true;\n }\n changeSelectedTimeSpan(timeSpan) {\n if (timeSpan) {\n timeSpan.id = 'time-selection';\n }\n return timeSpan;\n }\n updateSelectedTimeSpan(timeSpan) {\n if (!this.isConfiguring) {\n this.refresh();\n }\n /**\n * Triggered when time selection changes\n * @event timeSelectionChange\n * @on-owner\n * @param {Scheduler.view.Scheduler} source The scheduler\n * @param {Date} startDate The selected range start date, or `undefined`\n * @param {Date} endDate The selected range end date, or `undefined`\n */\n this.client.trigger('timeSelectionChange', {\n ...timeSpan ?? {}\n });\n }\n}\nTimeSelection._$name = 'TimeSelection'; GridFeatureManager.registerFeature(TimeSelection, false, 'Scheduler');\n", "export const ScheduleRange = {\n completeview : 'completeview',\n // completedata : 'completedata',\n currentview : 'currentview',\n daterange : 'daterange'\n};\n", "import DateHelper from '../../../../Core/helper/DateHelper.js';\nimport Rectangle from '../../../../Core/helper/util/Rectangle.js';\nimport DomHelper from '../../../../Core/helper/DomHelper.js';\nimport DomSync from '../../../../Core/helper/DomSync.js';\nimport { ScheduleRange } from '../Utils.js';\nimport AbstractTimeRanges from '../../AbstractTimeRanges.js';\nconst immediatePromise = Promise.resolve();\nexport default base => class SchedulerExporterMixin extends base {\n async scrollRowIntoView(client, index) {\n const\n {\n rowManager,\n scrollable\n } = client,\n oldY = scrollable.y;\n // If it's a valid index to scroll to, then try it.\n if (index < client.store.count) {\n // Scroll the requested row to the viewport top\n scrollable.scrollTo(null, rowManager.calculateTop(index));\n // If that initiated a scroll, we need to wait for the row to be rendered, so return\n // a Promise which resolves when that happens.\n if (scrollable.y !== oldY) {\n // GridBase adds listener to vertical scroll to update rows. Rows might be or might not be updated,\n // but at the end of each scroll grid will trigger `scroll` event. So far this is the only scroll event\n // triggered by the grid itself and it is different from `scroll` event on scrollable.\n return new Promise(resolve => {\n const detacher = client.ion({\n scroll({ scrollTop }) {\n // future-proof: only react to scroll event with certain argument\n if (scrollTop != null && rowManager.getRow(index)) {\n detacher();\n resolve();\n }\n }\n });\n });\n }\n }\n // No scroll occurred. Promise must be resolved immediately\n return immediatePromise;\n }\n async scrollToDate(client, date) {\n let scrollFired = false;\n const promises = [];\n // Time axis is updated on element scroll, which is async event. We need to synchronize this logic.\n // If element horizontal scroll is changed then sync event is fired. We add listener to that one specific event\n // and remove it right after scrollToDate sync code, keeping listeners clean. If scrolling occurred, we need\n // to wait until time header is updated.\n const detacher = client.timeAxisSubGrid.scrollable.ion({\n scrollStart({ x }) {\n if (x != null) {\n scrollFired = true;\n }\n }\n });\n // added `block: start` to do scrolling faster\n // it moves data to begin of visible area that is longer section for re-render\n promises.push(client.scrollToDate(date, { block : 'start' }));\n detacher();\n if (scrollFired) {\n // We have to wait for scrollEnd event before moving forward. When exporting large view we might have to scroll\n // extensively and it might occur that requested scroll position would not be reached because concurrent\n // scrollEnd events would move scroll back.\n // scrollEnd is on a 100ms timer *after* the last scroll event fired, so all necessary\n // updated will have occurred.\n // Covered by Gantt/tests/feature/export/MultiPageVertical.t.js\n promises.push(client.timeAxisSubGrid.header.scrollable.await('scrollEnd', { checkLog : false }));\n }\n await Promise.all(promises);\n }\n cloneElement(element, target, clear) {\n super.cloneElement(element, target, clear);\n const clonedEl = this.element.querySelector('.b-schedulerbase');\n // Remove default animation classes\n clonedEl?.classList.remove(...['fade-in', 'slide-from-left', 'slide-from-top', 'zoom-in'].map(name => `b-initial-${name}`));\n }\n async prepareComponent(config) {\n const\n me = this,\n { client } = config,\n { currentOrientation } = client,\n includeTimeline = client.timeAxisSubGrid.width > 0;\n switch (config.scheduleRange) {\n case ScheduleRange.completeview:\n config.rangeStart = client.startDate;\n config.rangeEnd = client.endDate;\n break;\n case ScheduleRange.currentview: {\n const { startDate, endDate } = client.visibleDateRange;\n config.rangeStart = startDate;\n config.rangeEnd = endDate;\n break;\n }\n }\n await client.waitForAnimations();\n // Disable infinite scroll before export, so it doesn't change time span\n config.infiniteScroll = client.infiniteScroll;\n client.infiniteScroll = false;\n // Don't change timespan if time axis subgrid is not visible\n if (includeTimeline) {\n // https://github.com/bryntum/support/issues/8220\n // setTimeSpan should not be called on infinite scroll and visible schedule export\n if (config.scheduleRange !== ScheduleRange.currentview) {\n // set new timespan before calling parent to get proper scheduler header/content size\n client.setTimeSpan(config.rangeStart, config.rangeEnd);\n }\n if (config.scheduleRange === ScheduleRange.daterange) {\n // In case time axis is filtered or generated by custom fn we need to adjust passed ranges to actual dates\n config.rangeStart = client.startDate;\n config.rangeEnd = client.endDate;\n }\n // Access svgCanvas el to create dependency canvas early\n client.svgCanvas;\n }\n // Disable event animations during export\n me._oldEnableEventAnimations = client.enableEventAnimations;\n client.enableEventAnimations = false;\n // Add scroll buffer for the horizontal rendering\n if (currentOrientation.isHorizontalRendering) {\n me._oldScrollBuffer = currentOrientation.scrollBuffer;\n me._oldVerticalBuffer = currentOrientation.verticalBufferSize;\n currentOrientation.scrollBuffer = 100;\n currentOrientation.verticalBufferSize = -1;\n }\n // Raise flag on the client to render all suggested dependencies\n client.ignoreViewBox = true;\n await super.prepareComponent(config);\n const\n { exportMeta, element } = me,\n fgCanvasEl = element.querySelector('.b-sch-foreground-canvas'),\n timeAxisEl = element.querySelector('.b-horizontaltimeaxis');\n exportMeta.includeTimeline = includeTimeline;\n if (includeTimeline && config.scheduleRange !== ScheduleRange.completeview) {\n // If we are exporting subrange of dates we need to change subgrid size accordingly\n exportMeta.totalWidth -= exportMeta.subGrids.normal.width;\n exportMeta.totalWidth += exportMeta.subGrids.normal.width = client.timeAxisViewModel.getDistanceBetweenDates(config.rangeStart, config.rangeEnd);\n const\n horizontalPages = Math.ceil(exportMeta.totalWidth / exportMeta.pageWidth),\n totalPages = horizontalPages * exportMeta.verticalPages;\n exportMeta.horizontalPages = horizontalPages;\n exportMeta.totalPages = totalPages;\n // store left scroll to imitate normal grid/header scroll using margin\n exportMeta.subGrids.normal.scrollLeft = client.getCoordinateFromDate(config.rangeStart);\n }\n exportMeta.timeAxisHeaders = [];\n exportMeta.timeAxisPlaceholders = [];\n exportMeta.headersCollected = false;\n exportMeta.eventsBoxes = new Map();\n exportMeta.client = client;\n if (!includeTimeline) {\n return;\n }\n DomHelper.forEachSelector(timeAxisEl, '.b-sch-header-row', headerRow => {\n exportMeta.timeAxisPlaceholders.push(me.createPlaceholder(headerRow));\n exportMeta.timeAxisHeaders.push(new Map());\n });\n // Add placeholder for events, clear all event elements, but not the entire elements as it contains svg canvas\n exportMeta.subGrids.normal.eventsPlaceholder = me.createPlaceholder(fgCanvasEl, false);\n DomHelper.removeEachSelector(fgCanvasEl, '.b-sch-event-wrap,.b-sch-resourcetimerange');\n DomHelper.removeEachSelector(me.element, '.b-released');\n const\n columnLinesCanvas = element.querySelector('.b-column-lines-canvas'),\n timeRangesHeaderCanvas = element.querySelector('.b-sch-timeaxiscolumn .b-timeranges-canvas'),\n timeRangesBodyCanvas = element.querySelector('.b-timeaxissubgrid .b-timeranges-canvas');\n if (client.hasActiveFeature('columnLines') && columnLinesCanvas) {\n exportMeta.columnLinesPlaceholder = me.createPlaceholder(columnLinesCanvas);\n exportMeta.columnLines = { lines : new Map(), majorLines : new Map() };\n }\n // There are several features that use timeranges canvas, we need to check them all\n if (timeRangesBodyCanvas && Object.values(client.features).some(f => f instanceof AbstractTimeRanges)) {\n exportMeta.timeRanges = {};\n // header is optional\n if (timeRangesHeaderCanvas) {\n exportMeta.timeRanges.header = config.enableDirectRendering ? '' : {};\n exportMeta.timeRangesHeaderPlaceholder = me.createPlaceholder(timeRangesHeaderCanvas);\n }\n exportMeta.timeRanges.body = config.enableDirectRendering ? '' : {};\n exportMeta.timeRangesBodyPlaceholder = me.createPlaceholder(timeRangesBodyCanvas);\n }\n if (client.hasActiveFeature('dependencies')) {\n client.features.dependencies.fillDrawingCache();\n const svgCanvasEl = element.querySelector(`[id=\"${client.svgCanvas.getAttribute('id')}\"]`);\n // Same as above, clear only dependency lines, because there might be markers added by user\n if (svgCanvasEl) {\n exportMeta.dependencyCanvasEl = svgCanvasEl;\n exportMeta.dependenciesPlaceholder = me.createPlaceholder(svgCanvasEl, false, {\n ns : 'http://www.w3.org/2000/svg',\n tag : 'path'\n });\n DomHelper.removeEachSelector(svgCanvasEl, '.b-sch-dependency');\n }\n }\n // We need to scroll component to date to calculate correct start margin\n if (includeTimeline && !DateHelper.betweenLesser(config.rangeStart, client.startDate, client.endDate)) {\n await me.scrollToDate(client, config.rangeStart);\n }\n }\n async restoreState(config) {\n let waitForHorizontalScroll = false;\n const\n { client } = config,\n promises = [];\n // If scroll will be changed during restoring state (and it will likely be), raise a flag that exporter should\n // wait for scrollEnd event before releasing control\n const detacher = client.timeAxisSubGrid.scrollable.ion({\n scrollStart({ x }) {\n // HACK: scrollStart might actually fire when scroll is set to existing value\n if (this.element.scrollLeft !== x) {\n waitForHorizontalScroll = true;\n }\n }\n });\n promises.push(super.restoreState(config));\n // Scroll start will be fired synchronously\n detacher();\n if (waitForHorizontalScroll) {\n promises.push(client.timeAxisSubGrid.header.scrollable.await('scrollEnd', { checkLog : false }));\n }\n await Promise.all(promises);\n }\n async restoreComponent(config) {\n const\n { client } = config,\n { currentOrientation } = client;\n client.ignoreViewBox = false;\n client.infiniteScroll = config.infiniteScroll;\n client.enableEventAnimations = this._oldEnableEventAnimations;\n if (currentOrientation.isHorizontalRendering) {\n currentOrientation.scrollBuffer = this._oldScrollBuffer;\n currentOrientation.verticalBufferSize = this._oldVerticalBuffer;\n }\n await super.restoreComponent(config);\n }\n async onRowsCollected(rows, config) {\n const me = this;\n await super.onRowsCollected(rows, config);\n // Only collect this data if timeline is visible\n if (me.exportMeta.includeTimeline) {\n const\n { client, enableDirectRendering } = config,\n { timeView } = client,\n { pageRangeStart, pageRangeEnd } = me.getCurrentPageDateRange(config);\n if (enableDirectRendering) {\n // If first page does not include timeline we don't need to render anything for it\n if (pageRangeStart && pageRangeEnd) {\n me.renderHeaders(config, pageRangeStart, pageRangeEnd);\n me.renderLines(config, pageRangeStart, pageRangeEnd);\n me.renderRanges(config, pageRangeStart, pageRangeEnd);\n me.renderEvents(config, rows, pageRangeStart, pageRangeEnd);\n }\n }\n else {\n // Exported page may not contain timeline view, in which case we need to fall through\n if (pageRangeStart) {\n let rangeProcessed = false;\n await me.scrollToDate(client, pageRangeStart);\n // Time axis and events are only rendered for the visible time span\n // we need to scroll the view and gather events/timeline elements\n // while (timeView.endDate <= config.rangeEnd) {\n while (!rangeProcessed) {\n me.collectLines(config);\n me.collectHeaders(config);\n me.collectRanges(config);\n me.collectEvents(rows, config);\n if (DateHelper.timeSpanContains(timeView.startDate, timeView.endDate, pageRangeStart, pageRangeEnd)) {\n rangeProcessed = true;\n }\n else if (timeView.endDate.getTime() >= pageRangeEnd.getTime()) {\n rangeProcessed = true;\n }\n else {\n const endDate = timeView.endDate;\n await me.scrollToDate(client, timeView.endDate);\n // If timeview end date is same as before scroll it means client is not able to scroll to date\n // and will go into infinite loop unless we stop it\n if (endDate.getTime() === timeView.endDate.getTime()) {\n throw new Error('Could not scroll to date');\n }\n }\n }\n }\n await me.scrollToDate(client, config.rangeStart);\n }\n }\n }\n getCurrentPageDateRange({ rangeStart, rangeEnd, enableDirectRendering, client }) {\n const\n me = this,\n { exportMeta } = me,\n { horizontalPages, horizontalPosition, pageWidth, subGrids } = exportMeta;\n let pageRangeStart, pageRangeEnd;\n // when exporting to multiple pages we only need to scroll sub-range within visible time span\n if (horizontalPages > 1) {\n const\n pageStartX = horizontalPosition * pageWidth,\n pageEndX = (horizontalPosition + 1) * pageWidth,\n // Assuming normal grid is right next to right side of the locked grid\n // There is also a default splitter\n normalGridX = subGrids.locked.width + subGrids.locked.splitterWidth;\n if (pageEndX <= normalGridX) {\n pageRangeEnd = pageRangeStart = null;\n }\n else {\n const { scrollLeft = 0 } = subGrids.normal;\n pageRangeStart = client.getDateFromCoordinate(Math.max(pageStartX - normalGridX + scrollLeft, 0));\n // Extend visible schedule by 20% to cover up possible splitter\n const multiplier = enableDirectRendering ? 1 : 1.2;\n pageRangeEnd = client.getDateFromCoordinate((pageEndX - normalGridX + scrollLeft) * multiplier) || rangeEnd;\n }\n }\n else {\n pageRangeStart = rangeStart;\n pageRangeEnd = rangeEnd;\n }\n return {\n pageRangeStart,\n pageRangeEnd\n };\n }\n prepareExportElement() {\n const\n { element, exportMeta } = this,\n { id, headerId, footerId, scrollLeft } = exportMeta.subGrids.normal,\n el = element.querySelector(`[id=\"${id}\"]`);\n el.querySelectorAll('.b-sch-canvas').forEach(canvasEl => {\n // Align canvases to last exported row bottom. If no such property exists - remove inline height\n if (exportMeta.lastExportedRowBottom) {\n canvasEl.style.height = `${exportMeta.lastExportedRowBottom}px`;\n }\n else {\n canvasEl.style.height = '';\n }\n // Simulate horizontal scroll\n if (scrollLeft) {\n canvasEl.style.marginLeft = `-${scrollLeft}px`;\n }\n });\n if (scrollLeft) {\n [headerId, footerId].forEach(id => {\n const el = element.querySelector(`[id=\"${id}\"] .b-widget-scroller`);\n if (el) {\n el.style.marginLeft = `-${scrollLeft}px`;\n }\n });\n }\n return super.prepareExportElement();\n }\n collectHeaders(config) {\n const\n me = this,\n { client } = config,\n { exportMeta } = me;\n // We only need to collect headers once, this flag is raised once they are collected along all exported range\n if (!exportMeta.headersCollected) {\n const\n timeAxisEl = client.timeView.element,\n timeAxisHeaders = exportMeta.timeAxisHeaders;\n DomHelper.forEachSelector(timeAxisEl, '.b-sch-header-row', (headerRow, index, headerRows) => {\n const headersMap = timeAxisHeaders[index];\n DomHelper.forEachSelector(headerRow, '.b-sch-header-timeaxis-cell', el => {\n if (!headersMap.has(el.dataset.tickIndex)) {\n headersMap.set(el.dataset.tickIndex, el.outerHTML);\n }\n });\n if (index === headerRows.length - 1 && headersMap.has(String(client.timeAxis.count - 1))) {\n exportMeta.headersCollected = true;\n }\n });\n }\n }\n collectRanges(config) {\n const\n me = this,\n { client } = config,\n { exportMeta } = me,\n { timeRanges } = exportMeta;\n // Header elements and time range elements are rendered for different ranges. E.g. it is possible for headers\n // to be rendered till the end but time ranges to be rendered for shorter range.\n if (timeRanges) {\n const\n headerCanvas = client.element.querySelector('.b-timeranges-header-canvas'),\n bodyCanvas = client.element.querySelector('.b-timeranges-body-canvas');\n if (headerCanvas) {\n DomHelper.forEachSelector(headerCanvas, '.b-sch-timerange', el => {\n timeRanges.header[el.dataset.id] = el.outerHTML;\n });\n }\n DomHelper.forEachSelector(bodyCanvas, '.b-sch-timerange', el => {\n timeRanges.body[el.dataset.id] = el.outerHTML;\n });\n }\n }\n collectLines(config) {\n const\n me = this,\n { client } = config,\n { exportMeta } = me,\n { columnLines } = exportMeta;\n if (!exportMeta.headersCollected && columnLines) {\n client.timeAxisSubGridElement.querySelectorAll('.b-column-line, .b-column-line-major').forEach(lineEl => {\n if (lineEl.classList.contains('b-column-line')) {\n const lineIndex = Number(lineEl.dataset.line.replace(/line-/, ''));\n columnLines.lines.set(lineIndex, lineEl.outerHTML);\n }\n else {\n const lineIndex = Number(lineEl.dataset.line.replace(/major-/, ''));\n columnLines.majorLines.set(lineIndex, lineEl.outerHTML);\n }\n });\n }\n }\n collectEvents(rows, config) {\n const\n me = this,\n addedRows = rows.length,\n { client } = config,\n normalRows = me.exportMeta.subGrids.normal.rows;\n rows.forEach((row, index) => {\n const\n rowConfig = normalRows[normalRows.length - addedRows + index],\n resource = client.store.getAt(row.dataIndex),\n eventsMap = rowConfig[3];\n resource.events?.forEach(event => {\n if (event.isScheduled) {\n let el = client.getElementFromEventRecord(event, resource);\n if (el && (el = el.parentElement) && !eventsMap.has(event.id)) {\n eventsMap.set(event.id, [el.outerHTML, Rectangle.from(el, el.offsetParent)]);\n }\n }\n });\n resource.timeRanges?.forEach(timeRange => {\n const\n elId = client.features.resourceTimeRanges?.generateElementId(timeRange) || '',\n el = client.foregroundCanvas.syncIdMap[elId];\n if (el && !eventsMap.has(elId)) {\n eventsMap.set(elId, [el.outerHTML, Rectangle.from(el, el.offsetParent)]);\n }\n });\n });\n }\n //#region Direct rendering\n renderHeaders(config, start, end) {\n const\n me = this,\n { exportMeta } = me,\n { client } = config,\n timeAxisHeaders = exportMeta.timeAxisHeaders,\n // Get the time axis view reference that we will use to build cells for specific time ranges\n { timeAxisView } = client.timeAxisColumn,\n domConfig = timeAxisView.buildCells(start, end),\n targetElement = document.createElement('div');\n DomSync.sync({\n targetElement,\n domConfig\n });\n DomHelper.forEachSelector(targetElement, '.b-sch-header-row', (headerRow, index) => {\n const headersMap = timeAxisHeaders[index];\n DomHelper.forEachSelector(headerRow, '.b-sch-header-timeaxis-cell', el => {\n if (!headersMap.has(el.dataset.tickIndex)) {\n headersMap.set(el.dataset.tickIndex, el.outerHTML);\n }\n });\n });\n }\n renderEvents(config, rows, start, end) {\n const\n me = this,\n { client } = config,\n normalRows = me.exportMeta.subGrids.normal.rows;\n rows.forEach((row, index) => {\n const\n rowConfig = normalRows[index],\n eventsMap = rowConfig[3],\n resource = client.store.getAt(row.dataIndex),\n resourceLayout = client.currentOrientation.getResourceLayout(resource),\n left = client.getCoordinateFromDate(start),\n right = client.getCoordinateFromDate(end),\n eventDOMConfigs = client.currentOrientation.getEventDOMConfigForCurrentView(resourceLayout, row, left, right),\n targetElement = document.createElement('div');\n eventDOMConfigs.forEach(domConfig => {\n const\n { eventId } = domConfig.dataset,\n { left, top, width, height } = domConfig.style;\n DomSync.sync({\n targetElement,\n domConfig\n });\n eventsMap.set(eventId, [targetElement.outerHTML, new Rectangle(left, top, width, height)]);\n });\n });\n }\n renderLines(config, start, end) {\n const\n me = this,\n { client } = config,\n { exportMeta } = me,\n { columnLines } = exportMeta;\n if (columnLines) {\n const\n domConfigs = client.features.columnLines.getColumnLinesDOMConfig(start, end),\n targetElement = document.createElement('div');\n DomSync.sync({\n targetElement,\n domConfig : {\n onlyChildren : true,\n children : domConfigs\n }\n });\n // Put all lines HTML to a single key in the set. That allows us to share code path with legacy export mode\n columnLines.lines.set(0, targetElement.innerHTML);\n }\n }\n renderRanges(config, start, end) {\n const\n me = this,\n { client } = config,\n { exportMeta } = me,\n { timeRanges } = exportMeta;\n if (timeRanges) {\n // Clean-up time ranges before rendering new batch\n timeRanges.body = timeRanges.header = '';\n for (const feature of Object.values(client.features).filter(f => f instanceof AbstractTimeRanges)) {\n const\n domConfigs = feature.getDOMConfig(start, end),\n targetElement = document.createElement('div');\n // domConfigs is an array of two elements - first includes time range configs for body, second - for head\n domConfigs.forEach((children, i) => {\n DomSync.sync({\n targetElement,\n domConfig : {\n children,\n onlyChildren : true\n }\n });\n // body configs\n if (i === 0) {\n timeRanges.body += targetElement.innerHTML;\n }\n // header configs\n else {\n timeRanges.header += targetElement.innerHTML;\n }\n });\n }\n }\n }\n //#endregion\n buildPageHtml(config) {\n const\n me = this,\n {\n subGrids,\n timeAxisHeaders,\n timeAxisPlaceholders,\n columnLines,\n columnLinesPlaceholder,\n timeRanges,\n timeRangesHeaderPlaceholder,\n timeRangesBodyPlaceholder\n } = me.exportMeta,\n { enableDirectRendering } = config;\n // Now when rows are collected, we need to add them to exported grid\n let html = me.prepareExportElement();\n Object.values(subGrids).forEach(({ placeHolder, eventsPlaceholder, rows, mergedCellsHtml }) => {\n const\n placeHolderText = placeHolder.outerHTML,\n // Rows can be repositioned, in which case event related to that row should also be translated\n { resources, events } = me.positionRows(rows, config);\n let contentHtml = resources.join('');\n if (mergedCellsHtml?.length) {\n contentHtml += `${mergedCellsHtml.join('')}
`;\n }\n html = html.replace(placeHolderText, contentHtml);\n if (eventsPlaceholder) {\n html = html.replace(eventsPlaceholder.outerHTML, events.join(''));\n }\n });\n timeAxisHeaders.forEach((headers, index) => {\n html = html.replace(timeAxisPlaceholders[index].outerHTML, Array.from(headers.values()).join(''));\n });\n if (columnLines) {\n const lineElements = Array.from(columnLines.lines.values()).concat(Array.from(columnLines.majorLines.values()));\n html = html.replace(columnLinesPlaceholder.outerHTML, lineElements.join(''));\n // Lines are collected once for old mode, don't clear them\n if (enableDirectRendering) {\n me.exportMeta.columnLines.lines.clear();\n me.exportMeta.columnLines.majorLines.clear();\n }\n }\n if (timeRanges) {\n if (enableDirectRendering) {\n html = html.replace(timeRangesBodyPlaceholder.outerHTML, timeRanges.body);\n // time ranges header element is optional\n if (timeRangesHeaderPlaceholder) {\n html = html.replace(timeRangesHeaderPlaceholder.outerHTML, timeRanges.header);\n }\n me.exportMeta.timeRanges = {};\n }\n else {\n html = html.replace(timeRangesBodyPlaceholder.outerHTML, Object.values(timeRanges.body).join(''));\n // time ranges header element is optional\n if (timeRangesHeaderPlaceholder) {\n html = html.replace(timeRangesHeaderPlaceholder.outerHTML, Object.values(timeRanges.body).join(''));\n }\n }\n }\n html = me.buildDependenciesHtml(html);\n return html;\n }\n getEventBox(event) {\n const\n me = this,\n {\n eventsBoxes,\n enableDirectRendering\n } = me.exportMeta;\n const box = event && eventsBoxes.get(String(event.id));\n // In scheduler milestone box left edge is aligned with milestone start date. Later element is rotated and\n // shifted by CSS by 50% of its width. Dependency feature relies on actual element sizes, but pdf export\n // does not render actual elements. Therefore, we need to adjust the box.\n if (enableDirectRendering && box && event.isMilestone) {\n box.translate(-box.width / 2, 0);\n }\n return box;\n }\n renderDependencies() {\n const\n me = this,\n {\n client,\n eventsBoxes\n } = me.exportMeta,\n { dependencies } = client,\n dependencyFeature = client.features.dependencies,\n targetElement = DomHelper.createElement();\n let draw = false;\n dependencies.forEach(dependency => {\n if ((!eventsBoxes.has(String(dependency.from)) &&\n !eventsBoxes.has(String(dependency.to))) ||\n !dependencyFeature.isDependencyVisible(dependency)) {\n return;\n }\n const\n fromBox = me.getEventBox(dependency.fromEvent),\n toBox = me.getEventBox(dependency.toEvent);\n dependencyFeature.drawDependency(dependency, true, { from : fromBox?.clone(), to : toBox?.clone() });\n draw = true;\n });\n // Force dom sync\n if (draw) {\n dependencyFeature.domSync(targetElement, true);\n }\n return targetElement.innerHTML;\n }\n buildDependenciesHtml(html) {\n const { dependenciesPlaceholder, includeTimeline } = this.exportMeta;\n if (dependenciesPlaceholder && includeTimeline) {\n const placeholder = dependenciesPlaceholder.outerHTML;\n html = html.replace(placeholder, this.renderDependencies());\n }\n return html;\n }\n};\n", "import GridMultiPageExporter from '../../../../Grid/feature/export/exporter/MultiPageExporter.js';\nimport SchedulerExporterMixin from './SchedulerExporterMixin.js';\n/**\n * @module Scheduler/feature/export/exporter/MultiPageExporter\n */\n/**\n * A multiple page exporter. Used by the {@link Scheduler.feature.export.PdfExport} feature to export to multiple pages.\n * You do not need to use this class directly.\n *\n * ### Extending exporter\n *\n * ```javascript\n * class MyMultiPageExporter extends MultiPageExporter {\n * // type is required for exporter\n * static get type() {\n * return 'mymultipageexporter';\n * }\n *\n * get stylesheets() {\n * const stylesheets = super.stylesheets;\n *\n * stylesheets.forEach(styleNodeOrLinkTag => doSmth(styleNodeOrLinkTag))\n *\n * return stylesheets;\n * }\n * }\n *\n * const scheduler = new Scheduler({\n * features : {\n * pdfExport : {\n * // this export feature is configured with only one exporter\n * exporters : [MyMultiPageExporter]\n * }\n * }\n * });\n *\n * // run export with the new exporter\n * scheduler.features.pdfExport.export({ exporter : 'mymultipageexporter' });\n * ```\n *\n * @classtype multipage\n * @extends Grid/feature/export/exporter/MultiPageExporter\n *\n * @typings Grid.feature.export.exporter.MultiPageExporter -> Grid.feature.export.exporter.GridMultiPageExporter\n */\nexport default class MultiPageExporter extends SchedulerExporterMixin(GridMultiPageExporter) {\n static get $name() {\n return 'MultiPageExporter';\n }\n static get type() {\n return 'multipage';\n }\n async stateNextPage(config) {\n await super.stateNextPage(config);\n this.exportMeta.eventsBoxes.clear();\n }\n positionRows(rows) {\n const\n resources = [],\n events = [];\n // In case of variable row height row vertical position is not guaranteed to increase\n // monotonously. Position row manually instead\n rows.forEach(([html, top, height, eventsHtml]) => {\n resources.push(html);\n eventsHtml && Array.from(eventsHtml.entries()).forEach(([key, [html, box, extras = []]]) => {\n events.push(html + extras.join(''));\n // Store event box to render dependencies later\n this.exportMeta.eventsBoxes.set(String(key), box);\n });\n });\n return { resources, events };\n }\n}\nMultiPageExporter._$name = 'MultiPageExporter';", "import GridMultiPageVerticalExporter from '../../../../Grid/feature/export/exporter/MultiPageVerticalExporter.js';\nimport SchedulerExporterMixin from './SchedulerExporterMixin.js';\nimport { ScheduleRange } from '../Utils.js';\n/**\n * @module Scheduler/feature/export/exporter/MultiPageVerticalExporter\n */\n/**\n * A vertical multiple page exporter. Used by the {@link Scheduler.feature.export.PdfExport} feature to export to\n * multiple pages. Content will be scaled in a horizontal direction to fit the page.\n *\n * You do not need to use this class directly.\n *\n * ### Extending exporter\n *\n * ```javascript\n * class MyMultiPageVerticalExporter extends MultiPageVerticalExporter {\n * // type is required for exporter\n * static get type() {\n * return 'mymultipageverticalexporter';\n * }\n *\n * get stylesheets() {\n * const stylesheets = super.stylesheets;\n *\n * stylesheets.forEach(styleNodeOrLinkTag => doSmth(styleNodeOrLinkTag))\n *\n * return stylesheets;\n * }\n * }\n *\n * const scheduler = new Scheduler({\n * features : {\n * pdfExport : {\n * // this export feature is configured with only one exporter\n * exporters : [MyMultiPageVerticalExporter]\n * }\n * }\n * });\n *\n * // run export with the new exporter\n * scheduler.features.pdfExport.export({ exporter : 'mymultipageverticalexporter' });\n * ```\n *\n * @classtype multipagevertical\n * @extends Grid/feature/export/exporter/MultiPageVerticalExporter\n *\n * @typings Grid.feature.export.exporter.MultiPageVerticalExporter -> Grid.feature.export.exporter.GridMultiPageVerticalExporter\n */\nexport default class MultiPageVerticalExporter extends SchedulerExporterMixin(GridMultiPageVerticalExporter) {\n static get $name() {\n return 'MultiPageVerticalExporter';\n }\n static get type() {\n return 'multipagevertical';\n }\n async stateNextPage(config) {\n await super.stateNextPage(config);\n this.exportMeta.eventsBoxes.clear();\n }\n async prepareComponent(config) {\n await super.prepareComponent(config);\n // Scheduler exporter mixin can update totalWidth, so we need to adjust pages and scale here again\n if (config.scheduleRange !== ScheduleRange.completeview) {\n this.estimateTotalPages(config);\n }\n }\n positionRows(rows) {\n const\n resources = [],\n events = [];\n // In case of variable row height row vertical position is not guaranteed to increase\n // monotonously. Position row manually instead\n rows.forEach(([html, , , eventsHtml]) => {\n resources.push(html);\n eventsHtml && Array.from(eventsHtml.entries()).forEach(([key, [html, box, extras = []]]) => {\n events.push(html + extras.join(''));\n // Store event box to render dependencies later\n this.exportMeta.eventsBoxes.set(String(key), box);\n });\n });\n return { resources, events };\n }\n}\nMultiPageVerticalExporter._$name = 'MultiPageVerticalExporter';", "import { ScheduleRange } from '../../../feature/export/Utils.js';\nimport Combo from '../../../../Core/widget/Combo.js';\nexport default class ScheduleRangeCombo extends Combo {\n static get $name() {\n return 'ScheduleRangeCombo';\n }\n // Factoryable type name\n static get type() {\n return 'schedulerangecombo';\n }\n static get defaultConfig() {\n return {\n editable : false,\n localizeDisplayFields : true,\n displayField : 'text',\n buildItems() {\n return Object.entries(ScheduleRange).map(([id, text]) => ({ value : id, text : 'L{' + text + '}' }));\n }\n };\n }\n}\n// Register this widget type with its Factory\nScheduleRangeCombo.initClass();\nScheduleRangeCombo._$name = 'ScheduleRangeCombo';", "import DateHelper from '../../../Core/helper/DateHelper.js';\nimport GridExportDialog from '../../../Grid/view/export/ExportDialog.js';\nimport { ScheduleRange } from '../../feature/export/Utils.js';\nimport '../../view/export/field/ScheduleRangeCombo.js';\nimport Field from '../../../Core/widget/Field.js';\n/**\n * @module Scheduler/view/export/SchedulerExportDialog\n */\n/**\n * Extends the Grid's {@link Grid.view.export.ExportDialog} and adds a few extra fields specific to the scheduler.\n *\n * ## Default widgets\n *\n * The default widgets of this dialog are:\n *\n * | Widget ref | Type | Weight | Description |\n * |------------------------|------------------------------------------|--------|----------------------------------------------------- |\n * | `columnsField` | {@link Core.widget.Combo Combo} | 100 | Choose columns to export |\n * | `scheduleRangeField` | {@link Core.widget.Combo Combo} | 150 | Choose date range to export |\n * | `rangesContainer` | {@link Core.widget.Container Container} | 151 | Container for range fields |\n * | \\>`rangeStartField` | {@link Core.widget.DateField DateField} | 10 | Choose date range start |\n * | \\>`rangeEndField` | {@link Core.widget.DateField DateField} | 30 | Choose date range end |\n * | `rowsRangeField` | {@link Core.widget.Combo Combo} | 200 | Choose which rows to export |\n * | `exporterTypeField` | {@link Core.widget.Combo Combo} | 300 | Type of the exporter to use |\n * | `alignRowsField` | {@link Core.widget.Checkbox Checkbox} | 400 | Align row top to the page top on every exported page |\n * | `repeatHeaderField` | {@link Core.widget.Checkbox Checkbox} | 500 | Toggle repeating headers on / off |\n * | `fileFormatField` | {@link Core.widget.Combo Combo} | 600 | Choose file format |\n * | `paperFormatField` | {@link Core.widget.Combo Combo} | 700 | Choose paper format |\n * | `orientationField` | {@link Core.widget.Combo Combo} | 800 | Choose orientation |\n *\n * - \n *
- >
- first level of submenu \n *
![\"Scheduler](\"Scheduler/export-dialog.png\")
\n *\n * **NOTE:** Server side is required to make export work!\n *\n * Check out PDF Export Server documentation and installation steps [here](https://github.com/bryntum/pdf-export-server#pdf-export-server)\n *\n * When your server is up and running, it listens to requests. The Export feature sends a request to the specified URL\n * with the HTML fragments. The server generates a PDF (or PNG) file and returns a download link (or binary, depending\n * on {@link #config-sendAsBinary} config). Then the Export feature opens the link in a new tab and the file is\n * automatically downloaded by your browser. This is configurable, see {@link #config-openAfterExport} config.\n *\n * The {@link #config-exportServer} URL must be configured. The URL can be localhost if you start the server locally,\n * or your remote server address.\n *\n * ## Usage\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * pdfExport : {\n * exportServer : 'http://localhost:8080' // Required\n * }\n * }\n * })\n *\n * // Opens popup allowing to customize export settings\n * scheduler.features.pdfExport.showExportDialog();\n *\n * // Simple export\n * scheduler.features.pdfExport.export({\n * // Required, set list of column ids to export\n * columns : scheduler.columns.map(c => c.id)\n * }).then(result => {\n * // Response instance and response content in JSON\n * let { response, responseJSON } = result;\n * });\n * ```\n *\n * Appends configs related to exporting time axis: {@link #config-scheduleRange}, {@link #config-rangeStart},\n * {@link #config-rangeEnd}\n *\n * ## Loading resources\n *\n * If you face a problem with loading resources when exporting, the cause might be that the application and the export server are hosted on different servers.\n * This is due to [Cross-Origin Resource Sharing](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) (CORS). There are 2 options how to handle this:\n * - Allow cross-origin requests from the server where your export is hosted to the server where your application is hosted;\n * - Copy all resources keeping the folder hierarchy from the server where your application is hosted to the server where your export is hosted\n * and setup paths using {@link Grid.feature.export.PdfExport#config-translateURLsToAbsolute} config and configure the export server to give access to the path:\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * pdfExport : {\n * exportServer : 'http://localhost:8080',\n * // '/resources' is hardcoded in WebServer implementation\n * translateURLsToAbsolute : 'http://localhost:8080/resources'\n * }\n * }\n * })\n * ```\n *\n * ```javascript\n * // Following path would be served by this address: http://localhost:8080/resources/\n * node ./src/server.js -h 8080 -r web/application/styles\n * ```\n *\n * where `web/application/styles` is a physical root location of the copied resources, for example:\n *\n * ![\"Export](\"Grid/export-server-resources.png\")
\n *\n * This feature is **disabled** by default.\n * For info on enabling it, see {@link Grid/view/mixin/GridFeatures}.\n *\n * @extends Grid/feature/export/PdfExport\n * @classtype pdfExport\n * @feature\n *\n * @typings Grid.feature.export.PdfExport -> Grid.feature.export.GridPdfExport\n */\nexport default class PdfExport extends GridPdfExport {\n static get $name() {\n return 'PdfExport';\n }\n static get defaultConfig() {\n return {\n exporters : [SinglePageExporter, MultiPageExporter, MultiPageVerticalExporter],\n dialogClass : SchedulerExportDialog,\n /**\n * Specifies how to export time span.\n * * completeview - Complete configured time span, from scheduler start date to end date\n * * currentview - Currently visible time span\n * * daterange - Use specific date range, provided additionally in config. See {@link #config-rangeStart}/\n * {@link #config-rangeEnd}\n * @config {'completeview'|'currentview'|'daterange'}\n * @default\n * @category Export file config\n */\n scheduleRange : 'completeview',\n /**\n * Exported time span range start. Used with `daterange` config of the {@link #config-scheduleRange}\n * @config {Date}\n * @category Export file config\n */\n rangeStart : null,\n /**\n * Returns the instantiated export dialog widget as configured by {@link #config-exportDialog}\n * @member {Scheduler.view.export.SchedulerExportDialog} exportDialog\n */\n /**\n * A config object to apply to the {@link Scheduler.view.export.SchedulerExportDialog} widget.\n * @config {SchedulerExportDialogConfig} exportDialog\n */\n /**\n * Exported time span range end. Used with `daterange` config of the {@link #config-scheduleRange}\n * @config {Date}\n * @category Export file config\n */\n rangeEnd : null\n };\n }\n get defaultExportDialogConfig() {\n return ObjectHelper.copyProperties(super.defaultExportDialogConfig, this, ['scheduleRange']);\n }\n buildExportConfig(config) {\n config = super.buildExportConfig(config);\n const {\n scheduleRange,\n rangeStart,\n rangeEnd\n } = this;\n // Time axis is filtered from UI, need to append it\n if (config.columns && !config.columns.find(col => col.type === 'timeAxis')) {\n config.columns.push(config.client.timeAxisColumn.id);\n }\n return ObjectHelper.assign({\n scheduleRange,\n rangeStart,\n rangeEnd\n }, config);\n }\n}\nPdfExport._$name = 'PdfExport'; GridFeatureManager.registerFeature(PdfExport, false, 'Scheduler');\n", "import GridFeatureManager from '../../../Grid/feature/GridFeatureManager.js';\nimport PrintMixin from '../../../Grid/feature/export/mixin/PrintMixin.js';\nimport PdfExport from './PdfExport.js';\n/**\n * @module Scheduler/feature/export/Print\n */\n/**\n * Allows printing Scheduler contents using browser print dialog.\n *\n * This feature is based on {@link Scheduler.feature.export.PdfExport} with only difference that instead of sending\n * request to a backend it renders content to an IFrame element and requests print dialog for it. For more details about\n * preparing HTML for printing, please refer to the {@link Scheduler.feature.export.PdfExport} docs.\n *\n * ## Usage\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * print : true\n * }\n * })\n *\n * // Opens popup allowing to customize print settings\n * scheduler.features.print.showPrintDialog();\n *\n * // Simple print\n * scheduler.features.print.print({\n * columns : scheduler.columns.map(c => c.id)\n * });\n * ```\n *\n * This feature is **disabled** by default.\n * For info on enabling it, see {@link Grid/view/mixin/GridFeatures}.\n *\n * @extends Scheduler/feature/export/PdfExport\n * @mixes Grid/feature/export/mixin/PrintMixin\n *\n * @demo Scheduler/print\n * @classtype print\n * @feature\n *\n * @typings Grid.feature.export.Print -> Grid.feature.export.GridPrint\n */\nexport default class Print extends PrintMixin(PdfExport) {\n /**\n * @hideConfigs clientURL, exportServer, fetchOptions, fileFormat, fileName, openAfterExport, openInNewTab, sendAsBinary\n */\n /**\n * @hideFunctions processExportContent, receiveExportContent, showExportDialog\n */\n static $name = 'Print';\n};\nPrint._$name = 'Print'; GridFeatureManager.registerFeature(Print, false, 'Scheduler');\n", "import Localizable from '../../Core/localization/Localizable.js';\nimport GridTableExporter from '../../Grid/util/TableExporter.js';\nimport SchedulerBase from '../view/SchedulerBase.js';\n/**\n * @module Scheduler/util/ScheduleTableExporter\n */\n/**\n * This class transforms scheduler component into two arrays: rows and columns. Columns array contains objects with\n * meta information about column: field name, column name, width and type of the rendered value, rows array contains\n * arrays of cell values.\n *\n * ```javascript\n * const exporter = new ScheduleTableExporter({ target : scheduler });\n * exporter.export()\n *\n * // Output\n * {\n * columns : [\n * { field : 'name', value : 'First name', type : 'string', width : 100 },\n * { field : 'name', value : 'Task', type : 'string', width : 100, eventColumn : true },\n * { field : 'startDate', value : 'Starts', type : 'date', width : 100, eventColumn : true },\n * { field : 'endDate', value : 'Ends', type : 'date', width : 100, eventColumn : true }\n * ],\n * rows : [\n * ['Michael', 'Hand out dundies', Date, Date],\n * ['Michael', 'Buy condo', Date, Date],\n * ['Jim', 'Close sale to library', Date, Date]\n * ]\n * }\n * ```\n *\n * ## How data is exported\n *\n * Data is exported as in the base class with minor addition: every event is exported on a separate row, like\n * demonstrated above.\n *\n * In case there are unassigned events, by default they will be exported as well\n *\n * ```javascript\n * // output\n * {\n * rows : [\n * ['Michael', 'Hand out dundies', Date, Date],\n * ['Michael', 'Buy condo', Date, Date],\n * ['Jim', 'Close sale to library', Date, Date],\n * ['', 'No resource assigned'],\n * ['', 'Halloween prep', Date, Date],\n * ['', 'New year prep', Date, Date]\n * ]\n * }\n * ```\n *\n * @extends Grid/util/TableExporter\n * @mixes Core/localization/Localizable\n */\nexport default class ScheduleTableExporter extends Localizable(GridTableExporter) {\n static get defaultConfig() {\n return {\n /**\n * Set to `false` to not include unassigned events in the export. `true` by default.\n * @config {Boolean} includeUnassigned\n * @default\n */\n includeUnassigned : true,\n /**\n * An array of Event columns configuration used to specify columns width, headers name, and column fields to\n * get the data from.\n * 'field' config is required. If 'text' is missing, the 'field' config will be used instead.\n *\n * For example:\n * ```javascript\n * eventColumns : [\n * { text : 'Task', field : 'name' },\n * { text : 'Starts', field : 'startDate', width : 140 },\n * { text : 'Ends', field : 'endDate', width : 140 }\n * ]\n * ```\n *\n * @config {String[]|Object[]} eventColumns\n * @default\n */\n eventColumns : [\n { text : 'Task', field : 'name' },\n { text : 'Starts', field : 'startDate', width : 140 },\n { text : 'Ends', field : 'endDate', width : 140 }\n ],\n /**\n * Function to sort events for each resource. By default events are sorted in the order of appending to the\n * store.\n * For example:\n * ```javascript\n * // Sorting by start date\n * eventSortFn : (a, b) => a.startDate - b.startDate\n * ```\n * @config {Function}\n * @internal\n */\n eventSortFn : null\n };\n }\n construct(config = {}, ...args) {\n super.construct(config, ...args);\n if (!this.eventSortFn) {\n this.eventSortFn = (a, b) => a.internalId - b.internalId;\n }\n }\n normalizeColumns(config) {\n super.normalizeColumns(config);\n config.eventColumns = config.eventColumns.map(col => {\n if (typeof col === 'string') {\n return { field : col };\n }\n else {\n return col;\n }\n });\n }\n generateExportData(config) {\n const\n me = this,\n isScheduler = this.target instanceof SchedulerBase,\n resourceColumns = me.generateColumns(config),\n eventColumns = isScheduler ? me.generateEventColumns(config) : [],\n columns = resourceColumns.concat(eventColumns),\n rows = me.generateRows(config);\n return { columns, rows };\n }\n generateEventColumns(config) {\n return config.eventColumns.map(column => this.processEventColumn(column, config));\n }\n processEventColumn(column, config) {\n const\n { width, minWidth } = column,\n { defaultColumnWidth } = config;\n return {\n field : column.field,\n value : column.text,\n width : Math.max(width || defaultColumnWidth, minWidth || defaultColumnWidth),\n eventColumn : true,\n type : this.getColumnType(column, this.target.eventStore)\n };\n }\n generateRows(config) {\n const\n me = this,\n { target } = me;\n let result;\n if (!(target instanceof SchedulerBase)) {\n result = super.generateRows(config);\n }\n else {\n result = [];\n // forEach skips group records, summary records etc\n target.resourceStore.map(resourceRecord => {\n // Get all events for resource (including assignment store)\n const events = resourceRecord.events || [];\n // Events order is not guaranteed, sort by internalId, that is guaranteed to grow with every new record\n events.sort(me.eventSortFn);\n // Set dummy event to have resource info printed without events\n if (!events.length) {\n events.push('');\n }\n events.forEach(eventRecord => {\n if (eventRecord === '' || target.eventStore.isAvailable(eventRecord)) {\n result.push(me.getRowData(config, resourceRecord, eventRecord));\n }\n });\n });\n if (config.includeUnassigned && config.eventColumns.length) {\n const notAssignedEvents = target.eventStore.query(eventRecord => !eventRecord.resources.length);\n if (notAssignedEvents.length) {\n // Use offset to match first event column\n const cells = new Array(config.columns.length).fill('');\n cells.push(me.L('L{ExcelExporter.No resource assigned}'));\n result.push(cells);\n // Set dummy resource to have event info printed without resource\n notAssignedEvents.forEach(eventRecord => result.push(me.getRowData(config, null, eventRecord)));\n }\n }\n // filter out empty rows\n result = result.filter(cells => cells.length);\n }\n return result;\n }\n getRowData(config, resource, event) {\n const\n {\n columns,\n eventColumns\n } = config,\n cells = [],\n resourceCells = this.processRecord(resource, columns, config);\n // No cells from group footers (or from group headers if configured to not show them)\n resourceCells && cells.push(...resourceCells);\n if (!resource || !resource.isSpecialRow) {\n const eventCells = this.processRecord(event, eventColumns, config);\n // No cells from group footers (or from group headers if configured to not show them)\n eventCells && cells.push(...eventCells);\n }\n return cells;\n }\n}\nScheduleTableExporter._$name = 'ScheduleTableExporter';", "/*eslint no-undef: \"error\"*/\nimport GridFeatureManager from '../../../Grid/feature/GridFeatureManager.js';\nimport GridExcelExporter from '../../../Grid/feature/experimental/ExcelExporter.js';\nimport ScheduleTableExporter from '../../util/ScheduleTableExporter.js';\n/**\n * @module Scheduler/feature/experimental/ExcelExporter\n */\n/**\n * **NOTE**: This class requires a 3rd party library to operate.\n *\n * A plugin that allows exporting Scheduler data to Excel without involving the server. It uses {@link Scheduler.util.ScheduleTableExporter}\n * class as data provider, [zipcelx library](https://www.npmjs.com/package/zipcelx)\n * forked and adjusted to support [column width config](https://github.com/bryntum/zipcelx/tree/column-width-build)\n * and [Microsoft XML specification](https://msdn.microsoft.com/en-us/library/office/documentformat.openxml.spreadsheet.aspx).\n * Zipcelx should be either in global scope (window) or can be provided with {@link #config-zipcelx} config.\n *\n * ```html\n * // Global scope\n * \n * ```\n *\n * ```javascript\n * // importing from package\n * import zipcelx from 'zipcelx';\n *\n * const grid = new Grid({\n * features : {\n * excelExporter : {\n * zipcelx\n * }\n * }\n * })\n * ```\n *\n * Here is an example of how to add the feature:\n *\n * ```javascript\n * const scheduler = new Scheduler({\n * features : {\n * excelExporter : {\n * // Choose the date format for date fields\n * dateFormat : 'YYYY-MM-DD HH:mm',\n * exporterConfig : {\n * // Choose the Resource fields to include in the exported file\n * columns : [{ text : 'Staff', field : 'name' }],\n *\n * // Choose the Event fields to include in the exported file\n * eventColumns : [\n * { text : 'Task', field : 'name' },\n * { text : 'Starts', field : 'startDate', width : 140 },\n * { text : 'Ends', field : 'endDate', width : 140 }\n * ]\n * }\n * }\n * }\n * });\n * ```\n *\n * And how to call it:\n *\n * ```javascript\n * scheduler.features.excelExporter.export({\n * filename : 'Export',\n * exporterConfig : {\n * columns : [{ text : 'Staff', field : 'name' }]\n * }\n * })\n * ```\n *\n * This feature is **disabled** by default.\n * For info on enabling it, see {@link Grid/view/mixin/GridFeatures}.\n *\n * @extends Grid/feature/experimental/ExcelExporter\n * @classtype excelExporter\n * @feature\n * @demo Scheduler/exporttoexcel\n *\n * @typings Grid.feature.experimental.ExcelExporter -> Grid.feature.experimental.GridExcelExporter\n */\nexport default class ExcelExporter extends GridExcelExporter {\n static get $name() {\n return 'ExcelExporter';\n }\n static get defaultConfig() {\n return {\n /**\n * Exporter class. Must subclass {@link Scheduler.util.ScheduleTableExporter}\n * @config {Scheduler.util.ScheduleTableExporter}\n * @typings {typeof ScheduleTableExporter}\n * @default\n */\n exporterClass : ScheduleTableExporter,\n /**\n * Configuration object for {@link #config-exporterClass exporter class}.\n * @config {Object}\n */\n exporterConfig : null\n };\n }\n}\nExcelExporter._$name = 'ExcelExporter'; GridFeatureManager.registerFeature(ExcelExporter, false, 'Scheduler');\n", "import SchedulerBase from './SchedulerBase.js';\nimport '../localization/En.js';\n// default features\nimport '../feature/ColumnLines.js';\nimport '../feature/EventCopyPaste.js';\nimport '../feature/EventDrag.js';\nimport '../feature/EventDragCreate.js';\nimport '../feature/EventEdit.js';\nimport '../feature/EventFilter.js';\nimport '../feature/EventMenu.js';\nimport '../feature/EventResize.js';\nimport '../feature/EventTooltip.js';\nimport '../feature/ScheduleContext.js';\nimport '../feature/ScheduleMenu.js';\nimport '../feature/ScheduleTooltip.js';\nimport '../feature/StickyEvents.js';\nimport '../feature/TimeAxisHeaderMenu.js';\n// Since Scheduler is based on SchedulerBase + GridBase, Grids default features needs to be pulled in here also\nimport '../../Grid/feature/CellEdit.js';\nimport '../../Grid/feature/CellMenu.js';\nimport '../../Grid/feature/ColumnDragToolbar.js';\nimport '../../Grid/feature/ColumnPicker.js';\nimport '../../Grid/feature/ColumnReorder.js';\nimport '../../Grid/feature/ColumnResize.js';\nimport '../../Grid/feature/Filter.js';\nimport '../../Grid/feature/FilterBar.js';\nimport '../../Grid/feature/Group.js';\nimport '../../Grid/feature/HeaderMenu.js';\nimport '../../Grid/feature/Sort.js';\nimport '../../Grid/feature/Stripe.js';\nimport '../../Grid/column/CheckColumn.js'; // For checkbox selection mode\n/**\n * @module Scheduler/view/Scheduler\n */\n/**\n * The Scheduler widget is a very powerful and performant UI component that displays an arbitrary number of \"locked\"\n * columns with a schedule occupying the remaining space. The schedule has a time axis at the top, one row per resource\n * and any number of events per resource.\n *\n * ## Intro\n * The Scheduler widget has a wide range of features and a large API to allow users to work with it efficiently in the\n * browser.\n *\n * The timeaxis displayed at the top of the Scheduler is configured using a {@link #config-startDate},\n * {@link #config-endDate} and a {@link #config-viewPreset}. The dates determine the outer limits of the range shown in\n * the timeaxis while the {@link Scheduler.preset.ViewPreset} decides the appearance and which dates are actually shown.\n * The Scheduler ships with a selection of predefined view presets, which can be found in\n * {@link Scheduler.preset.PresetManager}. If you want to specify view presets for a specific scheduler only, please see\n * {@link #config-presets} config.\n *\n * Note that if you want to use infinite scroll along the time axis, configure\n * {@link #config-infiniteScroll} and {@link #config-visibleDate} instead of
\n *\n * The Scheduler uses a {@link Scheduler.data.ResourceStore} to hold resources and an {@link Scheduler.data.EventStore}\n * to hold events. You can use inline data or load data using ajax, see the \"Working with data\" guides for more\n * information.\n *\n * The simplest schedule configured with inline data would look like this:\n * ```javascript\n * const scheduler = new Scheduler({\n * appendTo : document.body,\n *\n * startDate : new Date(2018,4,6),\n * endDate : new Date(2018,4,12),\n * viewPreset : 'dayAndWeek',\n *\n * columns : [\n * { field : 'name', text : 'Name', width: 100 }\n * ],\n *\n * resources : [\n * { id : 1, name : 'Bernard' },\n * { id : 2, name : 'Bianca' }\n * ],\n *\n * events : [\n * { id : 1, resourceId : 1, name : 'Interview', startDate : '2018-05-06', endDate : '2018-05-07' },\n * { id : 2, resourceId : 1, name : 'Press conference', startDate : '2018-05-08', endDate : '2018-05-09' },\n * { id : 3, resourceId : 2, name : 'Audition', startDate : '2018-05-06', endDate : '2018-05-08' },\n * { id : 4, resourceId : 2, name : 'Script deadline', startDate : '2018-05-11', endDate : '2018-05-11' }\n * ]\n * });\n * ```\n *\n * {@inlineexample Scheduler/view/Simplest.js}\n *\n * ## Inheriting from Bryntum Grid\n * Bryntum Scheduler inherits from Bryntum Grid, meaning that most features available in the grid are also available\n * for the scheduler. Common features include columns, cell editing, context menus, row grouping, sorting and more.\n * Note: If you want to use the Grid component standalone, e.g. to use drag-from-grid functionality, you need a separate\n * license for the Grid component.\n *\n * For more information on configuring columns, filtering, search etc. please see the {@link Grid.view.Grid Grid API docs}.\n * {@region Loading data}\n * As mentioned above Bryntum Scheduler uses an {@link Scheduler.data.EventStore} and a {@link Scheduler.data.ResourceStore}\n * to hold its data. Data is expected to be in JSON format and can be assigned inline (from memory) using the\n * {@link #config-events} and {@link #config-resources} shortcuts:\n *\n * ```javascript\n * let scheduler = new Scheduler({\n * events : myArrayOfEventData,\n * resources : myArrayOfResourceData\n * });\n * ```\n *\n * If you need to give additional store configuration, you can also specify store configs or instances:\n *\n * ```javascript\n * let resourceStore = new ResourceStore({\n * // ResourceStore config object\n * })\n *\n * let scheduler = new Scheduler({\n * // EventStore config object\n * eventStore : {\n * ...\n * },\n *\n * // Already existing ResourceStore instance\n * resourceStore\n * });\n * ```\n *\n * To use Ajax to fetch data from a server, specify {@link Core.data.AjaxStore#config-readUrl}:\n *\n * ```javascript\n * let scheduler = new Scheduler({\n * eventStore : {\n * readUrl : 'backend/read_events.php',\n * autoLoad : true\n * }\n * });\n * // If you do not specify autoLoad, trigger loading manually:\n * scheduler.eventStore.load();\n * ```\n *\n * For more information, see the \"Working with data\" guides.\n * {@endregion}\n * {@region Event styling}\n * Bryntum Schedulers appearance can be affected in a few different ways:\n *\n * * Switching themes\n * * Choosing event styles and colors\n * * Using renderer functions\n *\n * ### Switching themes\n *\n * Scheduler ships with five different themes, simply include the css file for the theme you would like to use on your\n * page. The themes are located in the `/build` folder. For example to include the material theme:\n *\n * ```html\n * \n * ```\n *\n * Included themes are (from left to right) classic-light, classic, classic-dark, stockholm and material:\n *\n * startDate and\n * endDate![\"Classic-Light](\"Scheduler/basic/thumb.classic-light.png\")
\n * ![\"Classic](\"Scheduler/basic/thumb.classic.png\")
\n * ![\"Classic-Dark](\"Scheduler/basic/thumb.classic-dark.png\")
\n * ![\"Stockholm](\"Scheduler/basic/thumb.stockholm.png\")
\n * ![\"Material](\"Scheduler/basic/thumb.material.png\")
\n *\n * ### Choosing event styles and colors\n * The style and color of each event can be changed by assigning to the `eventStyle` and `eventColor` configs. These\n * configs are available at 3 different levels:\n *\n * * Scheduler level, affects all events (see {@link Scheduler.view.mixin.TimelineEventRendering#config-eventStyle} and\n * {@link Scheduler.view.mixin.TimelineEventRendering#config-eventColor}).\n * * Resource level, affects all events assigned to that resource (see {@link Scheduler.model.mixin.ResourceModelMixin#field-eventStyle}\n * and {@link Scheduler.model.mixin.ResourceModelMixin#field-eventColor}).\n * * Event level, affects that event (see {@link Scheduler/model/mixin/EventModelMixin#field-eventStyle} and\n * {@link Scheduler/model/mixin/EventModelMixin#field-eventColor}).\n *\n * {@inlineexample Scheduler/view/Styles.js}\n *\n * For available styles, see {@link Scheduler.view.mixin/TimelineEventRendering#config-eventStyle}. For colors,\n * {@link Scheduler.view.mixin/TimelineEventRendering#config-eventColor}. Also take a look at the\n * eventstyles demo.\n *\n * ### Sorting overlapping events\n *\n * The order of overlapping events rendered in a horizontal scheduler can be customized by overriding\n * {@link Scheduler.view.mixin.SchedulerEventRendering#config-horizontalEventSorterFn} function on the scheduler.\n * For example:\n *\n * ```javascript\n * let scheduler = new Scheduler({\n * horizontalEventSorterFn(a, b) {\n * return b.startDate.getTime() - a.startDate.getTime();\n * },\n * ...\n * });\n * ```\n *\n * {@inlineexample Scheduler/view/SortingOverlappingEvents.js}\n *\n * ### Using render functions\n * Render function can be used to manipulate the rendering of rows (resources) and events. For information on row\n * renderers, see {@link Grid.column.Column#config-renderer}.\n *\n * Event rendering can be manipulated by specifying an {@link Scheduler.view.mixin/SchedulerEventRendering#config-eventRenderer} function. The function is called\n * for each event before it is rendered to DOM. By using its arguments you can add CSS classes, modify styling and\n * determine the contents of the event:\n *\n * ```javascript\n * let scheduler = new Scheduler({\n *\n * events : [...],\n * resources : [...],\n *\n * ...,\n *\n * eventRenderer({resourceRecord, eventRecord, renderData}) {\n * // add css class to the event\n * renderData.cls.add('my-css-class');\n *\n * // use an icon\n * renderData.iconCls = 'b-fa b-fa-some-nice-icon';\n *\n * // return value is used as events text\n * return `${resourceRecord.name}: ${eventRecord.name}`;\n * }\n * });\n * ```\n *\n * {@endregion}\n * {@region Event manipulation}\n * You can programmatically manipulate the events using data operations, see the \"Working with data\" guides for more\n * information. Events are reactive, changes reflect on the UI automatically. A small example on manipulating events:\n *\n * ```javascript\n * // change startDate of first event\n * scheduler.eventStore.first.startDate = new Date(2018,5,10);\n *\n * // remove last event\n * scheduler.eventStore.last.remove();\n *\n * // reassign an event\n * scheduler.eventStore.getById(10).resourceId = 2;\n * ```\n *\n * You can also allow your users to manipulate the events using the following features:\n *\n * * {@link Scheduler.feature.EventDrag}, drag and drop events within the schedule\n * * {@link Scheduler.feature.EventDragCreate}, create new events by click-dragging an empty area\n * * {@link Scheduler.feature.EventEdit}, show an event editing form\n * * {@link Scheduler.feature.SimpleEventEdit}, edit the event name easily\n * * {@link Scheduler.feature.EventResize}, resize events by dragging resize handles\n *\n * All of the features mentioned above are enabled by default.\n * {@endregion}\n * {@region Default configs}\n * There is a myriad of configs and features available for Scheduler (browse the API docs to find them), some of them on\n * by default and some of them requiring extra configuration. The code below tries to illustrate the major things that\n * are used by default:\n *\n * ```javascript\n * let scheduler = new Scheduler({\n * // The following features are enabled by default:\n * features : {\n * cellEdit : true, // Cell editing in the columns part\n * columnLines : true, // Column lines in the schedule part\n * columnPicker : true, // Header context menu item to toggle visible columns\n * columnReorder : true, // Reorder columns in grid part using drag and drop\n * columnResize : true, // Resize columns in grid part using the mouse\n * cellMenu : true, // Context menu for cells in the grid part\n * eventMenu : true, // Context menu for events\n * eventDrag : true, // Dragging events\n * eventDragCreate : true, // Drag creating events\n * eventEdit : true, // Event editor dialog\n * eventFilter : true, // Filtering events using header context menu\n * eventCopyPaste : true, // Allow using [Ctrl/CMD + C/X] and [Ctrl/CMD + V] to copy/cut and paste events\n * eventResize : true, // Resizing events using the mouse\n * eventTooltip : true, // Tooltips for events\n * group : true, // Row grouping\n * headerMenu : true, // Context menu for headers in the grid part\n * timeAxisHeaderMenu : true, // Header context menu for schedule part\n * scheduleMenu : true, // Context menu for empty parts of the schedule\n * scheduleTooltip : true, // Tooltip for empty parts of the schedule\n * sort : true // Row sorting\n * },\n *\n * // From Grid\n * animateRemovingRows : false, // Rows will not slide out on removal\n * autoHeight : false, // Grid needs to have a height supplied through CSS (strongly recommended) or by specifying `height\n * columnLines : true, // Grid part, themes might override it to hide lines anyway\n * emptyText : 'No rows to display',\n * enableTextSelection : false, // Not allowed to select text in cells by default,\n * fillLastColumn : true, // By default the last column is stretched to fill the grid\n * fullRowRefresh : true, // Refreshes entire row when a cell value changes\n * loadMask : 'Loading...',\n * resizeToFitIncludesHeader : true, // Also measure header when auto resizing columns\n * responsiveLevels : {\n * small : 400,\n * medium : 600,\n * large : '*'\n * },\n * rowHeight : 60, // Scheduler specifies a default rowHeight in pixels\n * showDirty : false, // No indicator for changed cells\n *\n * // Scheduler specific\n * autoAdjustTimeAxis : true, // startDate & endDate will be adjusted to display a suitable range\n * allowOverlap : true, // Events are allowed to overlap (overlays, stacks or packs depending on eventLayout)\n * barMargin : 10, // Space above + below each event\n * createEventOnDblClick : true, // Allow creating new events by double clicking empty space\n * enableDeleteKey : true, // Allow deleting events with delete / backspace keys\n * enableEventAnimations : true, // Animate event changes\n * eventBarTextField : 'name', // Field on EventModel to display in events\n * eventColor : 'green', // Use green as default color for events\n * eventLayout : 'stack', // Stack overlapping events by default\n * eventStyle : 'plain', // Use plain as default style for events\n * managedEventSizing : true, // Calculate event sizes based on rowHeight & barMargin\n * milestoneCharWidth : 10,\n * milestoneLayoutMode : 'default',\n * useInitialAnimation : true, // Fade in events initially\n * viewPreset : 'weekAndDayLetter',\n * zoomOnMouseWheel : true,\n * zoomOnTimeAxisDoubleClick : true\n * });\n * ```\n *\n * {@endregion}\n * {@region Keyboard shortcuts}\n * Scheduler does not currently provide any keyboard shortcuts on its own. However, the following Scheduler features has\n * their own keyboard shortcuts. Follow the links for details.\n * * {@link Scheduler.feature.EventCopyPaste#keyboard-shortcuts EventCopyPaste}\n *\n * As Scheduler is a subclass of Grid, many of Grid's {@link Grid.view.Grid#keyboard-shortcuts keyboard-shortcuts}\n * works for Scheduler as well.\n *\n * For more information on how to customize keyboard shortcuts, please see\n * [our guide](#Scheduler/guides/customization/keymap.md)\n * {@endregion}\n * {@region Performance}\n * To make scheduler performance as good as possible it only renders the events and resources that are within view (plus\n * an additional buffer). Since adding to and removing from DOM comes with a performance penalty the elements are\n * instead repositioned and reused as you scroll. A side effect of this is that you cannot do direct DOM element\n * manipulation in a reliable way, instead you should use row and event renderer functions to achieve what you want (see\n * the section on event styling above).\n *\n * To put the scheduler to the test, try our bigdataset demo.\n * {@endregion}\n * {@region Recurring Events}\n * From 4.0.0, there is no `RecurringEvents` Feature. There is an\n * {@link Scheduler/view/mixin/RecurringEvents#config-enableRecurringEvents} boolean config on the Scheduler.\n * Occurrences of recurring events are provided on a \"just in time\" basis by a new EventStore API which must now be used\n * when interrogating an EventStore.\n *\n * {@link Scheduler/data/mixin/GetEventsMixin#function-getEvents} is a multipurpose event gathering method which can be\n * asked to return events which match a set of criteria including a date range and a resource. By default, if the\n * requested date range contains occurrences of a recurring event, those occurrences are returned in the result array.\n *\n * ```javascript\n * myEventStore.getEvents({\n * resourceRecord : myResourceRecord,\n * startDate : myScheduler.startDate,\n * endDate : myScheduler.endDate\n * });\n * ```\n *\n * Occurrences are *not* present in the store's data collection.\n *\n * To directly access occurrences of a recurring event which *intersect* a date range, use:\n *\n * ```js\n * recurringEvent.getOccurrencesForDateRange(startDate, endDate);\n * ```\n *\n * The `endDate` argument is optional if the occurrence for one date is required. This method always\n * returns an array. Note that it may be empty if no occurrences intersect the date range.\n *\n * ### Convert an occurrence to an exception\n * To programmatically convert an occurrence to be a single exception to its owner's sequence use:\n *\n * ```javascript\n * myOccurrence.beginBatch();\n * myOccurrence.startDate = DateHelper.add(myOccurrence.startDate, 1, 'day');\n * myOccurrence.name = 'Postponed to next day';\n * myOccurrence.recurrence = null; // This means it does NOT become a new recurring base event.\n * myOccurrence.endBatch();\n * ```\n *\n * That will cause that event to be inserted into the store as a concrete event definition, firing\n * an `add` event as would be expected, and will add an `exceptionDates` to its owning recurring event.\n *\n * When syncing this change back to the server, the `exceptionDates` array for the modified\n * recurring event now contains the exception dates correctly serialized into string form using\n * the `dateFormat` of the field. The system-supplied default value for this is\n * `'YYYY-MM-DDTHH:mm:ssZ'`\n *\n * ### Convert an occurrence to a new recurring event sequence.\n * To programmatically convert an occurrence to be the start of a new recurring sequence, use:\n *\n * ```javascript\n * myOccurrence.beginBatch();\n * myOccurrence.startDate = DateHelper.set(myOccurrence.startDate, 'hour', 14);\n * myOccurrence.name = 'Moved to 2pm from here on';\n * myOccurrence.endBatch();\n * ```\n *\n * That will cause that event to be inserted into the store as a concrete *recurring* event\n * definition, firing an `add` event as would be expected, and will terminate the previous\n * recurring owner of that occurrence on the day before the new event.\n * {@endregion}\n *\n * @extends Scheduler/view/SchedulerBase\n * @classtype scheduler\n * @widget\n */\nexport default class Scheduler extends SchedulerBase {\n static get $name() {\n return 'Scheduler';\n }\n // Factoryable type name\n static get type() {\n return 'scheduler';\n }\n}\n// Register this widget type with its Factory\nScheduler.initClass();\nScheduler._$name = 'Scheduler';", "import Base from '../../../Core/Base.js';\nimport ArrayHelper from '../../../Core/helper/ArrayHelper.js';\n/**\n * @module Scheduler/view/mixin/DelayedRecordsRendering\n */\n/**\n * Mixin that implements scheduling/unscheduling a delayed row refresh.\n * @mixin\n * @internal\n */\nexport default Target => class DelayedRecordsRendering extends (Target || Base) {\n static $name = 'DelayedRecordsRendering';\n static configurable = {\n scheduledRecordsRefreshTimeout : 10\n };\n static get properties() {\n return {\n recordsToRefresh : new Set()\n };\n }\n beforeRenderRow({ record }) {\n // unscheduler records refresh when corresponding rows are rendered\n if (this.recordIsReadyForRendering?.(record)) {\n this.unscheduleRecordRefresh(record);\n }\n return super.beforeRenderRow(...arguments);\n }\n cleanupScheduledRecord() {\n const { rowManager, store } = this;\n for (const record of [...this.recordsToRefresh]) {\n // Remove the record from to-refresh list if:\n // - it's not in the view store\n // - or it's not visible\n if (!record.stores.includes(store) || !rowManager.getRowById(record)) {\n this.recordsToRefresh.delete(record);\n }\n }\n }\n renderScheduledRecords() {\n const me = this;\n if (!me.refreshSuspended) {\n // remove invisible records from the set of scheduled\n me.cleanupScheduledRecord();\n const\n { rowManager } = me,\n records = [...me.recordsToRefresh],\n rows = records.map(record => rowManager.getRowById(record));\n if (rows.length) {\n rowManager.renderRows(rows);\n /**\n * This event fires when records which rendering\n * was previously scheduled is finally done.\n * @event scheduledRecordsRender\n * @param {Grid.view.Grid} source The component.\n * @param {Core.data.Model[]} records Rendered records.\n * @param {Grid.row.Row[]} rows Rendered rows.\n */\n me.trigger('scheduledRecordsRender', { records, rows });\n }\n if (me.recordsToRefresh.size) {\n me.scheduleRecordRefresh();\n }\n }\n // reschedule this call if view refresh is suspended\n else {\n me.scheduleRecordRefresh();\n }\n }\n /**\n * Cancels scheduled rows refresh.\n * @param {Core.data.Model|Core.data.Model[]|Boolean} [clearRecords=true] `true` to also clear the list of records\n * scheduled for refreshing. `false` will result only canceling the scheduled call and keeping intact\n * the list of records planned for refreshing.\n */\n unscheduleRecordRefresh(clearRecords = true) {\n const me = this;\n if (clearRecords === true) {\n me.recordsToRefresh.clear();\n }\n else if (clearRecords) {\n ArrayHelper.asArray(clearRecords).forEach(record => me.recordsToRefresh.delete(record));\n }\n if (me.scheduledRecordsRefreshTimer && !me.recordsToRefresh.size) {\n me.clearTimeout(me.scheduledRecordsRefreshTimer);\n }\n }\n /**\n * Schedules the provided record row refresh.\n * @param {Core.data.Model} records Record to refresh the row of.\n */\n scheduleRecordRefresh(records) {\n const me = this;\n if (records) {\n ArrayHelper.asArray(records).forEach(record => me.recordsToRefresh.add(record));\n }\n me.scheduledRecordsRefreshTimer = me.setTimeout({\n fn : 'renderScheduledRecords',\n delay : me.scheduledRecordsRefreshTimeout,\n cancelOutstanding : true\n });\n }\n get widgetClass() {}\n};\n", "import Base from '../../Core/Base.js';\nexport default class TimelineHistogramRendering extends Base {\n static configurable = {\n scrollBuffer : 0\n };\n construct(client) {\n super.construct();\n this.client = client;\n }\n init() {}\n onTimeAxisViewModelUpdate() {\n const { scrollable } = this.client.timeAxisSubGrid;\n // scrollLeft is the DOM's concept which is -ve in RTL mode.\n // scrollX i always the +ve scroll offset from the origin.\n // Both may be needed for different calculations.\n this.updateFromHorizontalScroll(scrollable.x);\n }\n // Update header range on horizontal scroll\n updateFromHorizontalScroll(scrollX) {\n const\n me = this,\n {\n client,\n // scrollBuffer is an export only thing\n scrollBuffer\n } = me,\n {\n timeAxisSubGrid,\n timeAxis,\n rtl\n } = client,\n { width } = timeAxisSubGrid,\n { totalSize } = client.timeAxisViewModel,\n start = scrollX,\n // If there are few pixels left from the right most position then just render all remaining ticks,\n // there wouldn't be many. It makes end date reachable with more page zoom levels while not having any poor\n // implications.\n // 5px to make TimeViewRangePageZoom test stable in puppeteer.\n returnEnd = timeAxisSubGrid.scrollable.maxX !== 0 && Math.abs(timeAxisSubGrid.scrollable.maxX) <= Math.round(start) + 5,\n startDate = client.getDateFromCoord({ coord : Math.max(0, start - scrollBuffer), ignoreRTL : true }),\n endDate = returnEnd ? timeAxis.endDate : (client.getDateFromCoord({ coord : start + width + scrollBuffer, ignoreRTL : true }) || timeAxis.endDate);\n if (startDate && !client._viewPresetChanging) {\n me._visibleDateRange = { startDate, endDate, startMS : startDate.getTime(), endMS : endDate.getTime() };\n me.viewportCoords = rtl\n // RTL starts all the way to the right (and goes in opposite direction)\n ? { left : totalSize - scrollX - width + scrollBuffer, right : totalSize - scrollX - scrollBuffer }\n // LTR all the way to the left\n : { left : scrollX - scrollBuffer, right : scrollX + width + scrollBuffer };\n // Update timeaxis header making it display the new dates\n const range = client.timeView.range = { startDate, endDate };\n client.internalOnVisibleDateRangeChange(range);\n // If refresh is suspended, someone else is responsible for updating the UI later\n if (!client.refreshSuspended && client.rowManager.rows.length) {\n // Gets here too early in Safari for ResourceHistogram. ResizeObserver triggers a scroll before rows are\n // rendered first time. Could not track down why, bailing out\n if (client.rowManager.rows[0].id === null) {\n return;\n }\n // re-render all rows is timeAxis range has been updated\n if (me._timeAxisStartDate - timeAxis.startDate || me._timeAxisEndDate - timeAxis.endDate) {\n me._timeAxisStartDate = timeAxis.startDate;\n me._timeAxisEndDate = timeAxis.endDate;\n client.rowManager.renderRows(client.rowManager.rows);\n }\n }\n }\n }\n onViewportResize() {}\n refreshRows() {}\n get visibleDateRange() {\n return this._visibleDateRange;\n }\n translateToPageCoordinate(x) {\n const\n { client } = this,\n { scrollable } = client.timeAxisSubGrid;\n let result = x + client.timeAxisSubGridElement.getBoundingClientRect().left;\n if (client.rtl) {\n result -= scrollable.maxX - Math.abs(client.scrollLeft);\n }\n else {\n result -= client.scrollLeft;\n }\n return result;\n }\n translateToScheduleCoordinate(x) {\n const\n { client } = this,\n { scrollable } = client.timeAxisSubGrid;\n let result = x - client.timeAxisSubGridElement.getBoundingClientRect().left - globalThis.scrollX;\n // Because we use getBoundingClientRect's left, we have to adjust for page scroll.\n if (client.rtl) {\n result += scrollable.maxX - Math.abs(client.scrollLeft);\n }\n else {\n result += client.scrollLeft;\n }\n return result;\n }\n getDateFromXY(xy, roundingMethod, local, allowOutOfRange = false) {\n const { client } = this;\n let coord = xy[0];\n if (!local) {\n coord = this.translateToScheduleCoordinate(coord);\n }\n coord = client.getRtlX(coord);\n return client.timeAxisViewModel.getDateFromPosition(coord, roundingMethod, allowOutOfRange);\n }\n}\nTimelineHistogramRendering._$name = 'TimelineHistogramRendering';", "import Objects from '../../Core/helper/util/Objects.js';\nimport Histogram from '../../Core/widget/graph/Histogram.js';\nimport Tooltip from '../../Core/widget/Tooltip.js';\nimport '../../Grid/column/TreeColumn.js';\nimport '../../Grid/feature/Tree.js';\nimport '../column/TimeAxisColumn.js';\nimport '../feature/ColumnLines.js';\nimport DelayedRecordsRendering from './mixin/DelayedRecordsRendering.js';\nimport TimelineBase from './TimelineBase.js';\nimport TimelineHistogramRendering from './TimelineHistogramRendering.js';\n/**\n * @module Scheduler/view/TimelineHistogramBase\n */\nconst\n histogramWidgetCleanState = {\n series : null,\n topValue : null\n },\n emptyFn = () => {};\n/**\n * Histogram renderer parameters.\n *\n * @typedef {Object} HistogramRenderData\n * @property {Object} histogramData Histogram data\n * @property {HistogramConfig} histogramConfig Configuration object for the histogram widget\n * @property {HTMLElement|null} cellElement Cell element, for adding CSS classes, styling etc.\n * Can be `null` in case of export\n * @property {Core.data.Model} record Record for the row\n * @property {Grid.column.Column} column This column\n * @property {Grid.view.Grid} grid This grid\n * @property {Grid.row.Row} row Row object. Can be null in case of export. Use the\n * {@link Grid.row.Row#function-assignCls row's API} to manipulate CSS class names.\n */\n/**\n * Base class for {@link Scheduler/view/TimelineHistogram} class.\n *\n * @extends Scheduler/view/TimelineBase\n * @abstract\n */\nexport default class TimelineHistogramBase extends TimelineBase.mixin(DelayedRecordsRendering) {\n //region Config\n static $name = 'TimelineHistogramBase';\n static type = 'timelinehistogrambase';\n static configurable = {\n timeAxisColumnCellCls : 'b-sch-timeaxis-cell b-timelinehistogram-cell',\n mode : 'horizontal',\n rowHeight : 50,\n /**\n * Set to `true` if you want to display a tooltip when hovering an allocation bar. You can also pass a\n * {@link Core/widget/Tooltip#configs} config object.\n * Please use {@link #config-barTooltipTemplate} function to customize the tooltip contents.\n * @prp {Boolean|TooltipConfig}\n */\n showBarTip : false,\n barTooltip : null,\n barTooltipClass : Tooltip,\n /**\n * Object enumerating data series for the histogram.\n * The object keys are treated as the series identifiers and values are objects that\n * must contain two properties:\n * - `type` A String, either `'bar'` or `'outline'`\n * - `field` A String, the name of the property to use from the data objects in the {@link #config-data} option.\n *\n * ```javascript\n * histogram = new TimelineHistogram({\n * ...\n * series : {\n * s1 : {\n * type : 'bar',\n * field : 's1'\n * },\n * s2 : {\n * type : 'outline',\n * field : 's2'\n * }\n * },\n * store : new Store({\n * data : [\n * {\n * id : 'r1',\n * name : 'Record 1',\n * histogramData : [\n * { s1 : 200, s2 : 100 },\n * { s1 : 150, s2 : 50 },\n * { s1 : 175, s2 : 50 },\n * { s1 : 175, s2 : 75 }\n * ]\n * },\n * {\n * id : 'r2',\n * name : 'Record 2',\n * histogramData : [\n * { s1 : 100, s2 : 100 },\n * { s1 : 150, s2 : 125 },\n * { s1 : 175, s2 : 150 },\n * { s1 : 175, s2 : 75 }\n * ]\n * }\n * ]\n * })\n * });\n * ```\n *\n * @config {Object${duration}
`) +\n (recurrenceLegend ? `${recurrenceLegend}
` : '')\n );\n }\n showByEvent(event, element = event.target) {\n const me = this;\n me.activeTarget = element;\n me.pointerEvent = event;\n me.updateContent();\n if (event.type === 'contextmenu') {\n return me.showBy({\n domEvent : event,\n anchor : false\n });\n }\n return me.showBy(element);\n }\n afterShowByTarget() {\n const { delete : deleteTool } = this.tools;\n // Capture the active client only when we are visible.\n this.activeClient = Tooltip.fromElement(this.activeTarget)?.closest(hasEventStore);\n super.afterShowByTarget();\n // The delete tool is disabled if the Calendar is readOnly\n deleteTool && (deleteTool.disabled = this.ownerFeature.client.readOnly);\n }\n afterHide() {\n super.afterHide(...arguments);\n this.activeClient = null;\n }\n updateActiveTarget(element, was) {\n super.updateActiveTarget(...arguments);\n was?.classList.remove('b-cal-event-reveal');\n if (element) {\n // The activating event element is lifted to the top of the z-index stack while\n // it is the target of the tooltip.\n if (element.classList.contains('b-cal-in-cluster') && this.revealEventsInCluster) {\n element.classList.add('b-cal-event-reveal');\n }\n }\n else {\n this.eventRecord = null;\n }\n }\n refreshContent() {\n // This method is just a buffered wrapper of updateContent.\n // We might be hidden by the time it's called.\n this.eventRecord && this.updateContent();\n }\n updateEventRecord(eventRecord) {\n const me = this;\n me._changeHook?.();\n me._changeHook = eventRecord && FunctionHelper.after(eventRecord, 'afterChange', me.refreshContent, me);\n if (eventRecord) {\n if (me.tools.delete) {\n me.tools.delete.hidden = eventRecord.readOnly;\n }\n if (me.tools.edit) {\n me.tools.edit.hidden = eventRecord.readOnly;\n }\n }\n }\n updateContent() {\n const\n { clockTemplate, element, eventRecord } = this,\n result = super.updateContent(),\n startElement = element.querySelector('.b-sch-tooltip-startdate'),\n endElement = element.querySelector('.b-sch-tooltip-enddate'),\n { edit, delete : del } = this.tools,\n { client } = this.ownerFeature,\n { eventEdit } = client.features,\n readOnly = client.readOnly || eventRecord.readOnly;\n startElement && clockTemplate.updateDateIndicator(startElement, eventRecord.startDate);\n endElement && clockTemplate.updateDateIndicator(endElement, eventRecord.endDate);\n // Hide the edit tool if the Calendar or event is readOnly or there is no editFeature or it's disabled\n edit && (edit.hidden = readOnly || !eventEdit?.enabled);\n // Hide delete tool if the Calendar or event is readOnly\n del && (del.hidden = readOnly);\n if (this.resources) {\n const { chipView } = this;\n chipView.items = eventRecord.resources;\n this.contentElement.querySelector('.b-resourcechipview')?.remove();\n this.contentElement.appendChild(chipView.element.cloneNode(true));\n }\n return result;\n }\n realign() {\n const { lastAlignSpec } = this;\n // If the event bar to which we were attached is recycled by another event\n // Our tenure in the current guise is over.\n if (this.isVisible && lastAlignSpec?.aligningToElement && lastAlignSpec.target.dataset.eventId !== String(this.eventRecord?.id)) {\n this.hide();\n }\n super.realign(...arguments);\n }\n updateActiveClient(activeClient) {\n this.detachListeners('clientOverflowChange');\n // We may have to hide when the active client changes its possible overflow threshold\n if (activeClient) {\n activeClient.ion({\n name : 'clientOverflowChange',\n eventsPerCellChange : 'onClientOverflowChange',\n thisObj : this\n });\n }\n }\n onClientOverflowChange() {\n // If that caused the target to no longer be visible, we must hide.\n // For example aligned to an event which is now in overflow.\n // Or aligned to an event in the overflow popup which has now hidden.\n if (!DomHelper.isVisible(this.lastAlignSpec.target)) {\n this.hide();\n }\n }\n onDocumentMouseDown({ event }) {\n // Ignore mousedown on active element if we show on a click.\n if (!event.button && this.ownerFeature.showOn === 'click' && this.activeTarget.contains(event.target)) {\n return;\n }\n return super.onDocumentMouseDown(...arguments);\n }\n get chipView() {\n const me = this;\n if (!me._chipView) {\n me._chipView = new ResourceChipView({\n parent : me\n });\n // The List class only refreshes itself when visible, so\n // since this is an offscreen, rendering element\n // we have to fake visibility.\n Object.defineProperty(me.chipView, 'isVisible', {\n get() {\n return true;\n }\n });\n // Complete the initialization, which is finalized on first paint.\n // In particular the lazy scrollable config is ingested on paint.\n me.chipView.triggerPaint();\n }\n return me._chipView;\n }\n}\n// Register this feature type with its Factory\nEventTip.initClass();\nEventTip._$name = 'EventTip';", "import Base from '../../Core/Base.js';\nimport CalendarFeature from './CalendarFeature.js';\nimport DH from '../../Core/helper/DateHelper.js';\nimport DomSync from '../../Core/helper/DomSync.js';\nimport DomHelper from '../../Core/helper/DomHelper.js';\nimport EventHelper from '../../Core/helper/EventHelper.js';\nimport Rectangle from '../../Core/helper/util/Rectangle.js';\nimport DomClassList from '../../Core/helper/util/DomClassList.js';\nimport ObjectHelper from '../../Core/helper/ObjectHelper.js';\nimport StringHelper from '../../Core/helper/StringHelper.js';\nimport Draggable from '../../Core/mixin/Draggable.js';\nimport Droppable from '../../Core/mixin/Droppable.js';\nimport Hoverable from '../../Core/mixin/Hoverable.js';\nimport Widget from '../../Core/widget/Widget.js';\nimport RecurrenceConfirmationPopup from '../../Scheduler/view/recurrence/RecurrenceConfirmationPopup.js';\nimport CalendarZone from './CalendarZone.js';\nimport '../../Core/util/drag/DragTipProxy.js';\nimport '../widget/EventTip.js';\n/**\n * @module Calendar/feature/CalendarDrag\n */\n/**\n * An immutable object that describes a calendar drag mode. These objects are used to simplify detecting the drag mode\n * to apply appropriate actions.\n *\n * @typedef {Object} CalendarDragMode\n * @property {'create'|'move'|'resize'} type The value `'create'`, `'move'`, or `'resize'`.\n * @property {Boolean} create The value `true` if `type === 'create'`, otherwise `false`.\n * @property {Boolean} move The value `true` if `type === 'move'`, otherwise `false`.\n * @property {Boolean} resize The value `true` if `type === 'resize'`, otherwise `false`.\n */\nconst\n tentativeCls = 'b-cal-tentative-event',\n SECONDS = 1000,\n MINUTES = 60 * SECONDS,\n YYYY_MM_DD = 'YYYY-MM-DD',\n edgeRe = /^b-hover-(top|right|bottom|left)$/,\n eventDragSym = Symbol('eventDragMode'),\n appendEventFooter = (domConfig, footer) => {\n let ret;\n if (domConfig.className === 'b-cal-event-body') {\n domConfig.children.push(ret = footer);\n }\n else if (Array.isArray(domConfig.children)) {\n domConfig.children.forEach(c => {\n if (!ret && c) {\n ret = appendEventFooter(c, footer);\n }\n });\n }\n return ret;\n },\n makeMode = type => Object.freeze({\n type,\n create : false,\n move : false,\n resize : false,\n [type] : true\n }),\n modeDescriptor = {\n create : {\n finisher : 'finishDropCreate',\n mode : makeMode('create'),\n validatorFn : 'validateCreateFn'\n },\n move : {\n finisher : 'finishDropMove',\n mode : makeMode('move'),\n validatorFn : 'validateMoveFn'\n },\n resize : {\n finisher : 'finishDropResize',\n mode : makeMode('resize'),\n validatorFn : 'validateResizeFn'\n }\n },\n isAllDayView = {\n calendarrow : true,\n monthview : true,\n dayresourcecalendarrow : true\n };\n/*\n Base class for all zones, however, not all zones support all capabilities. DayView and WeekView are all of these\n things. Their events can be dragged between days, resized to change times of day, and an event can be dropped on\n to the calendar cells. While the YearView does not have events presented for dragging and so is not actually\n draggable, it is droppable since an event can be dropped on a day cell. MonthView is draggable and droppable,\n however, it is not hoverable since its events cannot be \"resized\". Finally, events in the OverflowPopup can only\n be dragged.\n */\nclass Zone extends CalendarZone.mixin(Draggable, Droppable, Hoverable) {\n static get $name() {\n return 'Zone';\n }\n static get configurable() {\n return {\n // We limit dropping to all *children* of the Droppable, not the Droppable element itself.\n // So that we avoid triggering \"over\" or \"drop\" on borders which would give incorrect\n // positional calculations.\n droppableSelector : '*',\n droppable : true,\n hoverable : null,\n hoverAnimationCls : 'b-hover-anim',\n days : {\n $config : {\n // DayResourceView includes the resource as part of the days config.\n equal : (d1, d2) => ObjectHelper.isEqual(d1, d2) && d1?.resource === d2?.resource\n },\n value : null\n },\n dragProxy : {\n type : 'tip',\n tooltip : null // borrowed from the Feature instance's tooltip config\n },\n eventRecord : null,\n hit : null,\n dragItemSelector : '.b-cal-event-wrap',\n overflow : {\n $config : 'nullify',\n value : null\n },\n rootElement : null\n };\n }\n get dayTime() {\n return this.view?.dayTime;\n }\n clearTime(date) {\n return this.dayTime.startOfDay(date);\n }\n findRootElement(view) {\n return view.contentElement;\n }\n getDateFromPosition(clientX, clientY) {\n return this.view.getDateFromPosition(clientX, clientY, false, this.view.dayTime);\n }\n // Draggable behaviors\n get dragEventer() {\n return this.owner;\n }\n beforeDrag(drag) {\n const\n me = this,\n { owner } = me,\n hit = me.hitTest(drag),\n eventRecord = hit?.eventRecord,\n insetProp = me.view.rtl ? 'right' : 'left';\n if (!hit || eventRecord?.readOnly || eventRecord?.isCreating) {\n return false;\n }\n hit.date && drag.set('date', hit.date);\n hit.resource && drag.set('resource', hit.resource);\n let mode, veto;\n switch (hit.type) {\n case 'event':\n drag.set('eventRecord', eventRecord);\n drag.set('eventSourceHit', hit);\n drag.set('eventInset', hit.eventElement.style[insetProp]);\n drag.set('eventWidth', hit.eventElement.offsetWidth);\n mode = 'move';\n veto = !owner.draggable || !eventRecord.isDraggable || me.draggable === false;\n if (!veto) {\n me.captureDragOffset(eventRecord, hit, drag);\n }\n break;\n case 'resize':\n drag.set('eventRecord', eventRecord);\n drag.set('eventSourceHit', hit);\n drag.set('eventInset', hit.eventWrap.style[insetProp]);\n drag.set('eventWidth', hit.eventWrap.offsetWidth);\n mode = 'resize';\n veto = !owner.resizable || !eventRecord.resizable || me.resizable === false;\n break;\n case 'schedule':\n case 'dayNumber':\n drag.set('eventCreate', hit);\n mode = 'create';\n veto = !owner.creatable || me.creatable === false;\n break;\n default:\n return false;\n }\n if (veto) {\n return false;\n }\n drag.set('eventDragMode', drag[eventDragSym] = modeDescriptor[mode].mode);\n }\n dragStart() {\n const\n me = this,\n { dragging : drag, owner, view } = me,\n { client } = owner,\n callback = () => {\n drag.lastMoveEvent && drag.move(drag.lastMoveEvent);\n },\n config = {\n scrollables : client.scrollManager ? [\n {\n element : client.viewContainer.element,\n callback\n }\n ] : []\n };\n // NOTE: Adding b-resizing kicks in display:none which focuses the , so capture it first:\n if (me.isResizing || me.isMoving) {\n me.refocus = owner.client.captureFocus();\n }\n if (me.isResizing) {\n drag.itemElement?.classList.add('b-resizing');\n }\n if (view.scrollable) {\n config.scrollables.push({\n element : view.scrollable.element,\n callback\n });\n }\n // DayViews may have an extra scroller\n if (view.horizontalScroller) {\n config.scrollables.push({\n element : view.horizontalScroller.element,\n callback\n });\n }\n client.scrollManager?.startMonitoring(config);\n }\n captureDragOffset() {\n // empty by default\n }\n cleanupDrag() {\n const\n me = this,\n { dragProxy, dragging } = me,\n { tooltip } = dragProxy,\n view = me.view.isOverflowPopup ? me.view.owner : me.view,\n { client } = me.owner,\n activeElement = DomHelper.getActiveElement(client);\n dragging?.itemElement?.classList.remove('b-resizing');\n if (dragging?.aborted) {\n me.days = null;\n }\n // Do not refocus immediately. The UI will not be in its new state.\n // Refocus after the impending refresh.\n view.afterRefresh(() => {\n me.eventRecord && (me.days = null); // day view resize uses days/times as drag feedback\n // Try to refocus element without scrolling unless focus has moved since the drop.\n if (DomHelper.getActiveElement(client) === activeElement) {\n me.refocus?.(false, true);\n }\n me.refocus = null;\n });\n if (tooltip) {\n tooltip.hide();\n dragProxy.tooltip = null;\n }\n }\n dragEnd() {\n this.owner.client?._scrollManager?.stopMonitoring();\n this.cleanupDrag();\n }\n makeDays(startDate, endDate) {\n const\n { dayTime, firstVisibleDate, lastVisibleDate } = this.view,\n days = [];\n endDate = DH.add(endDate, -1, 'd'); // endDate is exclusive, but lastVisibleDate is inclusive\n [startDate, endDate] = [startDate, endDate].map(\n d => d < firstVisibleDate ? firstVisibleDate : (lastVisibleDate < d ? lastVisibleDate : d));\n let date = dayTime.startOfDay(startDate);\n // We do ceil(endDate) to handle events that start/end on the same day\n // Note: \"!(end < date)\" ==> \"date <= end\" but works for Date since they are never ==\n for (const end = dayTime.ceil(endDate); !(end < date); date = DH.add(date, 1, 'day')) {\n days.push(dayTime.dateKey(date));\n }\n return days;\n }\n onShowOverflowPopup({ overflowPopup }) {\n if (!this.overflow) {\n this.overflow = new OverflowZone({\n owner : this.owner,\n view : overflowPopup\n });\n }\n }\n // Droppable behaviors\n get calendarCellSelector() {\n return this.view.visibleCellSelector;\n }\n get calendarCells() {\n const container = this.dropRootElement;\n return container && DomHelper.children(container, this.calendarCellSelector);\n }\n get isCreating() {\n return this.dropping?.[eventDragSym]?.create;\n }\n get isMoving() {\n const mode = this.dropping?.[eventDragSym] || this.dragging?.[eventDragSym];\n return mode ? mode.move : Boolean(this.dropping?.peek('eventRecord'));\n }\n /**\n * Returns true if a resize operation is active\n * @property {Boolean}\n * @readonly\n */\n get isResizing() {\n return this.dragging?.[eventDragSym]?.resize;\n }\n get recurrable() {\n return this.isDayZone || this.isMonthZone;\n }\n cleanupDrop() {\n this.eventRecord = this.eventDom = this.days = null;\n this.noTip = false;\n }\n createEvent(data, dropping = this.dropping) {\n // We can get here for an AllDay zone when the day detail zone is creating a multi-day event, but that's the\n // only time we won't be processing our own drop.\n const mode = dropping?.[eventDragSym] || modeDescriptor.create.mode;\n this.setupEvent(data, mode.create);\n }\n async dragDrop(drag) {\n if (this.isResizing || drag.target === this) {\n // finalizer is a Promise that the DragContext (which is a Finalizable) awaits in its finalize() method.\n return drag.finalizer = this.finishDrop(drag);\n }\n }\n dragEnter(drag) {\n const\n me = this,\n mode = drag[eventDragSym],\n hit = (drag.source === me && drag.peek('eventSourceHit')) || me.hitTest(drag);\n if (me.isMoving) {\n // we need to know the hit target at all times during drag, but we're not ready to process updateHit until\n // we get past setupEvent\n me._hit = hit;\n me.startMove(drag.peek('eventRecord'));\n }\n else if (!mode || drag.source !== me) {\n return false;\n }\n else if (mode.resize) {\n me._hit = hit;\n me.startResize(hit);\n }\n else if (mode.create) {\n me._hit = hit;\n me.startCreate(drag.peek('date'), drag.peek('eventCreate'));\n }\n else {\n return false;\n }\n }\n dragLeave() {\n if (!this.isResizing) {\n this.cleanupDrop();\n }\n }\n dragMove(drag) {\n this.hit = this.pickDropTarget(drag); // see updateHit for side effects\n }\n dropHitMove(drag, hit, eventRecord) {\n const\n me = this,\n { endDate, startDate } = eventRecord.isScheduled ? eventRecord : me.eventRecord,\n durationSec = DH.diff(startDate, endDate, 's');\n let { date, resource } = hit;\n date = me.clearTime(date);\n if (!eventRecord.allDay) {\n date = DH.add(date, DH.diff(me.clearTime(startDate), startDate, 's'), 's');\n }\n date = me.applyDragOffset(date, drag);\n const data = {\n startDate : date,\n endDate : DH.add(date, durationSec, 's')\n };\n // If this is a resource-specific view, hit testing will include the resource.\n if (resource?.eventColor) {\n data.eventColor = resource.eventColor;\n }\n me.setEventData(data);\n }\n dropHitNowhere() {\n this.days = null;\n }\n dropHitResize(drag, hit, eventHit) {\n const\n me = this,\n { eventRecord } = me,\n { startDate, endDate } = eventRecord,\n date = me.clearTime(hit.date);\n let changes, end;\n if (eventHit.atEnd) {\n end = DH.add(date, 1, 'd');\n changes = {\n startDate,\n endDate : (startDate < end) ? end : DH.add(startDate, 1, 'd')\n };\n }\n else {\n changes = {\n startDate : (date < endDate) ? date : DH.add(endDate, -1, 'd'),\n endDate\n };\n }\n changes.duration = DH.diff(changes.startDate, changes.endDate, eventRecord.durationUnit);\n me.setEventData(changes);\n }\n async finishDrop(drag) {\n const\n me = this,\n {\n eventRecord,\n resource,\n owner,\n view\n } = me,\n { eventStore } = view,\n mode = drag[eventDragSym],\n descriptor = modeDescriptor[mode?.type || 'move'];\n if (descriptor && me.hit) {\n const validation = descriptor.validatorFn\n ? await owner.callback(owner[descriptor.validatorFn], owner, [{\n drag,\n eventRecord,\n event : drag.event\n }])\n : true;\n if (validation !== false) {\n await me[descriptor.finisher](drag, owner, eventRecord, eventStore, validation,\n async(eventName, callback, callbackFalse) => {\n let info = {\n drag,\n eventRecord : drag.peek('eventRecord') || eventRecord,\n newStartDate : eventRecord.startDate,\n newEndDate : eventRecord.endDate,\n resourceRecord : resource,\n validation,\n event : drag.event,\n feature : owner,\n view : drag[me.isResizing ? 'source' : 'target'].view\n };\n // First trigger a preventable beforeXXX event to allow outside world to veto this operation\n const result = await owner.client.trigger('before' + StringHelper.capitalize(eventName), info);\n if (result === false) {\n info = false;\n await callbackFalse?.();\n }\n else {\n await callback?.();\n delete info.newStartDate;\n delete info.newEndDate;\n owner.client.trigger(eventName, info);\n }\n // return the event info object to allow event handlers to return data by poking on to that\n // object.\n return info;\n });\n }\n }\n me.isFinishing = true;\n me.cleanupDrop();\n }\n async finishDropCreate(drag, owner, eventRecord, eventStore, validation, triggerFn) {\n const add = validation?.add !== false;\n /**\n * This event fires on the owning Calendar before a drag creation gesture is completed. Return `false` to\n * immediately veto the operation or a Promise yielding `true` or `false` for async vetoing.\n * @event beforeDragCreateEnd\n * @preventable\n * @on-owner\n * @async\n * @param {Calendar.view.Calendar} source The Calendar instance that fired the event.\n * @param {Core.util.drag.DragContext} drag The drag create context.\n * @param {Event} event The browser event.\n * @param {Scheduler.model.EventModel} eventRecord The `EventModel` record being created that has not yet been added in the store.\n * @param {Date} newStartDate The new start date.\n * @param {Date} newEndDate The new end date.\n * @param {Scheduler.model.ResourceModel} [resourceRecord] The `ResourceModel` record if the gesture was performed\n * in a resource-type view.\n * @param {Calendar.feature.CalendarDrag} feature The Calendar drag feature instance.\n * @param {Boolean|ValidateCreateResult} validation The result of the {@link #config-validateCreateFn} if one\n * was provided.\n * @param {Core.widget.Widget} view The Calendar widget in which the drag completed.\n */\n /**\n * This event fires on the owning Calendar when a drag creation gesture is completed.\n * @event dragCreateEnd\n * @on-owner\n * @param {Calendar.view.Calendar} source The Calendar instance that fired the event.\n * @param {Core.util.drag.DragContext} drag The drag create context.\n * @param {Event} event The browser event.\n * @param {Scheduler.model.EventModel} eventRecord The new `EventModel` record added in the store.\n * @param {Scheduler.model.ResourceModel} [resourceRecord] The `ResourceModel` record if the gesture was performed\n * in a resource-type view.\n * @param {Calendar.feature.CalendarDrag} feature The Calendar drag feature instance.\n * @param {Boolean|ValidateCreateResult} validation The result of the {@link #config-validateCreateFn} if one\n * was provided.\n * @param {Core.widget.Widget} view The Calendar widget in which the drag completed.\n */\n // If any handler was async, the promise will be returned.\n // If not presented with a Promise, await yields the immediate value.\n const result = await triggerFn('dragCreateEnd');\n if (result === false) {\n if (add) {\n eventStore.remove(eventRecord);\n }\n }\n else if (add && !eventStore.includes(eventRecord)) {\n eventStore.add(eventRecord);\n }\n }\n async finishDropMove(drag, owner, eventRecord, eventStore, validation, triggerFn) {\n let dropRec = await drag.get('eventRecord');\n const\n me = this,\n { view } = me,\n storeRec = dropRec.isOccurrence ? dropRec.recurringTimeSpan : dropRec,\n { source } = drag,\n fromResource = await drag.get('resource'),\n toResource = me.hit.resource,\n interView = source !== me,\n // If the sourceStore is not the same as the destination store, maybe they would like the\n // record to be removed on successful drop depending on how removeFromExternalStore is set.\n sourceStore = interView && source.view?.eventStore && view.eventStore && source.view.eventStore !== view.eventStore ? source.view.eventStore : await drag.get('sourceStore'),\n isReassign = toResource && toResource !== fromResource;\n // Return if we detect that it's a no-op.\n if (!isReassign && drag.source === drag.target &&\n DH.isEqual(eventRecord.startDate, dropRec.startDate) &&\n DH.isEqual(eventRecord.endDate, dropRec.endDate)) {\n if (dropRec.eventStore === eventStore) {\n return;\n }\n }\n /**\n * This event fires on the owning Calendar before a drag move gesture is completed. Return `false` to immediately veto the operation\n * or a Promise yielding `true` or `false` for async vetoing.\n * @event beforeDragMoveEnd\n * @preventable\n * @on-owner\n * @async\n * @param {Calendar.view.Calendar} source The Calendar instance that fired the event.\n * @param {Core.util.drag.DragContext} drag The drag create context.\n * @param {Event} event The browser event.\n * @param {Scheduler.model.EventModel} eventRecord The `EventModel` record that has not yet been updated in the store.\n * @param {Date} newStartDate The new start date.\n * @param {Date} newEndDate The new end date.\n * @param {Scheduler.model.ResourceModel} [resourceRecord] The `ResourceModel` record if the gesture was performed\n * in a resource-type view.\n * @param {Calendar.feature.CalendarDrag} feature The Calendar drag feature instance.\n * @param {Boolean|ValidateCreateResult} validation The result of the {@link #config-validateMoveFn} if one was\n * provided.\n * @param {Core.widget.Widget} view The Calendar widget in which the drag completed.\n */\n /**\n * This event fires on the owning Calendar when a drag move gesture is completed. The `eventRecord` has already been added\n * to the `eventStore` of the owning calendar.\n * @event dragMoveEnd\n * @on-owner\n * @param {Calendar.view.Calendar} source The Calendar instance that fired the event.\n * @param {Core.util.drag.DragContext} drag The drag create context.\n * @param {Event} event The browser event.\n * @param {Scheduler.model.EventModel} eventRecord The updated `EventModel` record.\n * @param {Scheduler.model.ResourceModel} [resourceRecord] The `ResourceModel` record if the gesture was performed\n * in a resource-type view.\n * @param {Calendar.feature.CalendarDrag} feature The Calendar drag feature instance.\n * @param {Boolean|ValidateCreateResult} validation The result of the {@link #config-validateMoveFn} if one was\n * provided.\n * @param {Core.widget.Widget} view The Calendar widget in which the drag completed.\n */\n await triggerFn('dragMoveEnd', async() => {\n // It's a drag from an external EventStore.\n // If a handler sets isCopy in the data, we add the\n // tentative event as a copy of the original.\n if (!eventStore.getByInternalId(storeRec.internalId)) {\n if (sourceStore) {\n // Remove from the source store if Feature is configured to do so.\n if (me.owner.removeFromExternalStore) {\n sourceStore.remove(dropRec);\n }\n // If we are keeping the source record in the external store, then\n // the instance in this store has to be a copy so that dragging it in\n // multiple times will create multiple events in the Calendar.\n else {\n dropRec = dropRec.copy();\n }\n // Move to the dropped at date and time\n await me.moveEventTo(drag, dropRec);\n }\n else {\n // Use the tentative event which is being used as the drop indicator.\n // As long as it has a duration, its start and end will be correct.\n dropRec = eventRecord;\n }\n delete dropRec.resourceId;\n eventStore.add(dropRec);\n // If there's no explicit toResource read from the hit, then assign the Calendar's default\n // calendar (resource) unless the record is already assigned to a valid resource\n // in our Project\n const resource = toResource ?? (!isReassign && !view.project.resourceStore.includes(dropRec.resource) && me.owner.client.defaultCalendarId);\n if (resource != null && view.project.resourceStore.includes(resource)) {\n dropRec.assign(resource);\n }\n // If the destination's resourceStore does not include our assigned resource, deassign\n else if (!view.project.resourceStore.includes(dropRec.resource)) {\n dropRec.resources = [];\n }\n }\n else {\n // Await any decision on converting recurring base/occurrence\n // to an exception of a new recurring base.\n dropRec = await me.finishDropConfirm(dropRec);\n if (dropRec) {\n await me.moveEventTo(drag, dropRec);\n // If dragging between zones, and the zones have been configured with specific, different\n // resources, then this drag is also a reallocation of resource.\n if (isReassign) {\n // Assign to new resource first, so that it never drops to zero assignments\n // because that can cause the eventRecord to exit the Project.\n dropRec.assign(toResource);\n dropRec.unassign(fromResource);\n }\n }\n }\n await view.project.commitAsync();\n });\n }\n async finishDropResize(drag, owner, eventRecord, eventStore, validation, triggerFn) {\n const\n me = this,\n { view } = me;\n /**\n * This event fires on the owning Calendar before a drag resize gesture is completed. Return `false` to immediately veto the operation\n * or a Promise yielding `true` or `false` for async vetoing.\n * @event beforeDragResizeEnd\n * @preventable\n * @on-owner\n * @async\n * @param {Calendar.view.Calendar} source The Calendar instance that fired the event.\n * @param {Core.util.drag.DragContext} drag The drag create context.\n * @param {Event} event The browser event.\n * @param {Scheduler.model.EventModel} eventRecord The `EventModel` record that has not yet been updated in the store.\n * @param {Date} newStartDate The new start date.\n * @param {Date} newEndDate The new end date.\n * @param {Calendar.feature.CalendarDrag} feature The Calendar drag feature instance.\n * @param {Boolean|ValidateCreateResult} validation The result of the {@link #config-validateResizeFn} if one\n * was provided.\n * @param {Core.widget.Widget} view The Calendar widget in which the drag completed.\n */\n /**\n * This event fires on the owning Calendar when a drag resize gesture is completed.\n * @event dragResizeEnd\n * @on-owner\n * @param {Calendar.view.Calendar} source The Calendar instance that fired the event.\n * @param {Core.util.drag.DragContext} drag The drag create context.\n * @param {Event} event The browser event.\n * @param {Scheduler.model.EventModel} eventRecord The updated `EventModel` record.\n * @param {Calendar.feature.CalendarDrag} feature The Calendar drag feature instance.\n * @param {Boolean|ValidateCreateResult} validation The result of the {@link #config-validateResizeFn} if one\n * was provided.\n * @param {Core.widget.Widget} view The Calendar widget in which the drag completed.\n */\n await triggerFn('dragResizeEnd', async() => {\n let { eventRecord : editRec } = await drag.get('eventSourceHit');\n editRec = await this.finishDropConfirm(editRec);\n editRec && editRec.set({\n startDate : eventRecord.startDate,\n endDate : eventRecord.endDate,\n duration : DH.diff(eventRecord.startDate, eventRecord.endDate, editRec.durationUnit)\n });\n await view.project.commitAsync();\n });\n }\n async finishDropConfirm(eventRecord) {\n if (eventRecord.isOccurrence || eventRecord.isRecurring) {\n return new Promise(resolve => {\n const dialog = new RecurrenceConfirmationPopup({\n owner : this.owner\n });\n dialog.confirm({\n actionType : 'update',\n eventRecord,\n cancelFn() {\n resolve(null);\n },\n changerFn(eventRec) {\n resolve(eventRec);\n }\n });\n });\n }\n return eventRecord;\n }\n async moveEventTo(drag, eventRecord) {\n const me = this;\n let date = me.view.getDateFromElement(drag.targetElement);\n // If we were not dragging an unscheduled event (for example from an external source)\n // then copy in its time values.\n if (eventRecord.startDate) {\n date = DH.copyTimeValues(me.clearTime(date), eventRecord.startDate);\n }\n date = me.applyDragOffset(date, drag);\n // If it's being movedTo from another store, and it was unscheduled originally...\n if (!me.view.eventStore.getByInternalId(eventRecord.internalId) && !eventRecord.startDate) {\n const autoCreate = drag.target.view.autoCreate || me.owner.client.autoCreate;\n // Move to the autoCreate time if we can find an autoCreate config to give us a hint.\n date.setHours(autoCreate?.startHour || 8);\n }\n await me.setStartDate(eventRecord, date);\n }\n pickDropTarget(drag) {\n let hit = this.hitTest(drag);\n if (!hit && this.isResizing) {\n hit = this.hit;\n }\n return hit?.date ? hit : null;\n }\n setStartDate(eventRecord, date) {\n return eventRecord.set({\n startDate : date,\n endDate : DH.add(date, eventRecord.fullDuration)\n });\n }\n // Hoverable\n getHoverHandleCls(other) {\n return other ? '' : 'b-gripper-vert';\n }\n hoverEnter() {\n const\n me = this,\n hit = me.hitTest(me.hoverTarget),\n { gripper } = me.owner,\n cls = me.getHoverHandleCls(),\n otherCls = me.getHoverHandleCls(true);\n otherCls && gripper.classList.remove(otherCls);\n if (hit?.eventRecord?.resizable !== false && !hit?.eventRecord?.readOnly) {\n cls && gripper.classList.add(cls);\n me.hoverTarget.appendChild(gripper);\n }\n }\n hoverLeave(leaving) {\n const\n me = this,\n { gripper } = me.owner,\n cls = me.getHoverHandleCls();\n // We may have 2 hoverable zones each grabbing our shared gripper element, so check if we are the current\n // owner and only cleanup if we are:\n if (gripper.parentNode === leaving) {\n cls && gripper.classList.remove(cls);\n leaving.removeChild(gripper);\n }\n }\n // Misc\n applyDragOffset(date, drag) {\n const eventOffset = drag.peek('eventOffset');\n if (date && eventOffset?.[0]) {\n if (drag.source.constructor === drag.target?.constructor) {\n date = DH.add(date, -eventOffset[0], eventOffset[1]);\n }\n }\n return date;\n }\n hitTest(at) {\n const\n me = this,\n isDragContext = at?.isDragContext,\n event = isDragContext ? at.event : at,\n target = (isDragContext && at.targetElement) || DomHelper.getEventElement(event);\n let src = me.view,\n hit = null,\n edge, wrapEl;\n if (target) {\n if (!src.calendarHitTest) {\n src = me.owner.client;\n }\n const horizontalStartEdge = src.rtl ? 'right' : 'left';\n hit = src.calendarHitTest(target);\n if (hit) {\n hit.eventWrap = wrapEl = target.closest('.b-cal-event-wrap');\n if (target.classList.contains('b-gripper')) {\n hit = {\n type : 'resize',\n cell : hit.cell,\n date : hit.date,\n edge : edge = {},\n eventRecord : hit.eventRecord,\n resource : hit.resource,\n eventWrap : wrapEl,\n gripper : target,\n view : hit.view\n };\n DomClassList.normalize(wrapEl.className, 'array').forEach(c => {\n c = edgeRe.exec(c);\n c && (edge[c[1]] = true);\n });\n hit.atEnd = !(edge.top || edge[horizontalStartEdge]);\n }\n else if (!hit.eventRecord) {\n wrapEl = null;\n }\n if (wrapEl) {\n hit.eventTop = wrapEl.style.top;\n }\n if (target !== event) {\n hit.date = me.getDateFromPosition(event.clientX, event.clientY) || hit.date;\n }\n }\n }\n return hit;\n }\n renderEvent(eventRecord, first, last) {\n const { view } = this;\n // Make the DOM reflect the view's defaultCalendar.\n // We cannot assign in the normal way when the event is not part of a project\n // so we need to override the assigned property just while we create the DOM.\n Object.defineProperty(eventRecord, 'assigned', this.assignmentsProperty);\n // If we are moving into a view which only renders inter-day events\n // Set the cell info block's isAllDay flag.\n const dom = view.createEventDomConfig({\n eventRecord,\n isAllDay : isAllDayView[view.type]\n });\n dom.className['b-cal-tentative-event'] = 1;\n dom.className['b-cal-tentative-event-first'] = first;\n dom.className['b-cal-tentative-event-last'] = last;\n // Now we can remove the temp resource property getter\n delete eventRecord.assigned;\n if (last) {\n const { footer } = this.owner;\n if (footer) {\n appendEventFooter(dom, ObjectHelper.assign({\n html : DH.format(eventRecord.endDate, view.timeFormat)\n }, footer));\n }\n }\n return dom;\n }\n setEventData(data, creating) {\n const\n me = this,\n { eventRecord, view } = me,\n { duration, startDate } = data;\n if (startDate && duration != null && !data.endDate) {\n data = {\n ...data,\n endDate : DH.add(startDate, duration, eventRecord.durationUnit)\n };\n }\n eventRecord.set(data);\n // Honour the view's view on what constitutes a short event\n if (me.eventDom) {\n me.eventDom.className[view.shortEventCls] = eventRecord.durationMS <= view.shortEventDuration;\n }\n else {\n if (creating) {\n const\n newName = me.owner.newName || view.autoCreate.newName,\n newNameFn = me.view.resolveCallback(newName, me.view, false);\n eventRecord.set('name', newNameFn?.handler.call(view, eventRecord) || newName);\n }\n me.eventDom = me.renderEvent(eventRecord);\n }\n }\n setupEvent(data, creating) {\n const\n me = this,\n { owner } = me,\n {\n defaultCalendar,\n eventStore\n } = me.view,\n { tooltip } = owner,\n eventRecord = me.eventRecord = owner.eventRecord = eventStore.createRecord({\n // must pass empty object for CalendarStores hook of createRecord() to set resourceId\n // and because the data passed is field *names*, not dataSources\n }),\n assignments = creating ? new Set([new eventStore.assignmentStore.modelClass({\n event : eventRecord,\n resource : defaultCalendar\n })]) : data.assigned;\n // The assignment Set to be used when calling renderEvent so that a fully correct rendition\n // taking into account the resource can be applied.\n me.assignmentsProperty = {\n configurable : true,\n value : assignments\n };\n delete data.assigned;\n me.setEventData(data, creating);\n // Assign the new event to the EventStore's default calendar\n if (me.isCreating && defaultCalendar) {\n eventStore.assignmentStore.assignEventToResource(eventRecord, defaultCalendar);\n }\n const { eventDom } = me;\n eventDom.className[tentativeCls] = 1;\n if (!me.noTip && !tooltip.disabled && me.dragging?.has('eventCreate')) {\n tooltip.eventRecord = eventRecord;\n tooltip.recurrenceHint = (creating && me.recurrable) ? owner.recurrenceTip : '';\n me.dragProxy.tooltip = tooltip;\n }\n return eventDom;\n }\n startCreate(date) {\n this.createEvent({\n allDay : true,\n startDate : date,\n durationUnit : this.durationUnit,\n endDate : DH.add(date, 1, 'd')\n });\n }\n get durationUnit() {\n // Use view's dragUnit unless it's been configure away, then use the CalendarDrag class's default\n return this.view.dragUnit || this.owner.durationUnit;\n }\n startMove(eventRecord) {\n const\n me = this,\n data = ObjectHelper.clone(eventRecord.dataByFieldName),\n drag = me.dropping,\n { hit } = me,\n // prefer the resource color of the drop and fallback to the drag\n color = hit?.resource?.eventColor ?? drag.peek('resource')?.eventColor;\n if (color && !data.eventColor) {\n data.eventColor = color;\n }\n // Include the Set of assignments in the data for the tentative event\n data.assigned = eventRecord.assigned;\n // If an unscheduled event is grabbed (for example from an external source),\n // we have to normalize it according to current pointer context in order\n // for the view's createEventDomConfig to be able to process it to create\n // our drop indicator.\n if (!data.startDate) {\n data.startDate = hit?.date || new Date();\n data.endDate = DH.add(data.startDate, eventRecord.duration || 1, eventRecord.durationUnit || 'h');\n }\n // Dragging must always know its resource\n if (hit?.resource) {\n data.resourceId = hit.resource.id;\n }\n if (!data.resourceId) {\n data.resourceId = drag.peek('resourceId') || me.owner.client?.defaultCalendarId;\n }\n // So as not to have duplicate data-event-id=\"eventId\" nodes in the DOM.\n delete data.id;\n me.setupEvent(data);\n }\n startResize(eventHit) {\n const\n { eventRecord } = eventHit,\n data = eventRecord.data;\n this.createEvent({\n ...data,\n id : `dragResize-event-${data.id}`,\n eventColor : data.eventColor || eventRecord.resource?.eventColor,\n recurrenceRule : null,\n realEventId : data.id\n });\n }\n // Configs\n configureListeners(drag) {\n const listeners = super.configureListeners(drag);\n // Listen to the events on the root element\n listeners.element = this.view.rootElement;\n return listeners;\n }\n updateHit(hit) {\n const\n me = this,\n drag = me.dropping,\n mode = hit && drag[eventDragSym];\n if (hit) {\n if (me.isMoving) {\n me.dropHitMove(drag, hit, drag.peek('eventRecord'));\n }\n else if (mode?.create) {\n me.dropHitCreate(drag, hit, drag.peek('eventCreate'));\n }\n else if (mode?.resize) {\n me.dropHitResize(drag, hit, drag.peek('eventSourceHit'));\n }\n }\n else {\n me.dropHitNowhere(drag);\n }\n }\n updateDays(days) {\n const\n me = this,\n { calendarCells, eventDom, dayValues } = me,\n newDayValues = calendarCells && {};\n let first = true,\n cell, date, dayValue, i, lastCell;\n me.dayValues = newDayValues;\n if (calendarCells && eventDom) {\n for (i = 0; i < calendarCells.length; ++i) {\n cell = calendarCells[i];\n if (days?.includes(cell.dataset.date)) {\n lastCell = cell;\n }\n }\n for (i = 0; i < calendarCells.length; ++i) {\n cell = calendarCells[i];\n date = cell.dataset.date;\n if (days?.includes(date)) {\n if (!(dayValue = dayValues?.[date])) {\n dayValue = me.includeDay(date, cell, first, cell === lastCell) || true;\n first = false;\n }\n else {\n delete dayValues[date];\n }\n newDayValues[date] = dayValue;\n }\n }\n if (dayValues) {\n const cleanDom = () => {\n for (i in dayValues) {\n me.removeDay(i, dayValues[i], me.isCreating);\n }\n };\n // If creating, and we're not aborted, remove the drag coverage after the\n // refresh has happened so there's no apparent blink when the coverage is removed.\n if (!days && me.isCreating && !me.dragging.aborted) {\n // Clean the dom when the refresh is done. Wait for a max of 100ms for an upcoming\n // refresh before going ahead anyway.\n me.view.afterRefresh(cleanDom);\n }\n else {\n cleanDom();\n }\n }\n }\n }\n updateEventRecord(record) {\n this.owner.eventRecord = record;\n }\n updateOverflow(value, instance) {\n if (!value && instance) {\n instance.destroy();\n }\n return value;\n }\n updateOwner(owner) {\n this.hoverIgnoreElement = owner?.gripper;\n }\n updateRootElement(rootEl) {\n const me = this;\n me.dragRootElement = rootEl;\n me.dropRootElement = me.droppable ? rootEl : null;\n me.hoverRootElement = me.hoverable ? rootEl : null;\n }\n updateView(view, was) {\n super.updateView(view, was);\n const me = this;\n me.rootElement = view ? me.findRootElement(view) : null;\n me._overflowDetacher?.();\n // Only listen for overflow popup being shown if the view itself offers the event.\n // We must not listen to the relayed version from the owning DayView of a CalendarRow\n // otherwise we'd end up with a DayZone owning a duplicate OverflowZone in addition\n // to the AllDayZone.\n if (view?.isDayCellRenderer) {\n me._overflowDetacher = view.ion({\n thisObj : me,\n showOverflowPopup : 'onShowOverflowPopup'\n });\n }\n }\n}\nZone.prototype._eventRecord = null;\n//====================================================================================================\n// DayView\nclass BaseDayZone extends Zone {\n static get $name() {\n return 'BaseDayZone';\n }\n static get configurable() {\n return {\n hoverSelector : '.b-cal-event-wrap',\n draggingClsSelector : '.b-dayview-content'\n };\n }\n getHoverHandleCls(other) {\n let vert = this.isAllDayZone;\n if (other) {\n vert = !vert;\n }\n return `b-gripper-${vert ? 'vert' : 'horz'}`;\n }\n}\n//-------------------------------------------------------------------------\nclass AllDayZone extends BaseDayZone {\n static get $name() {\n return 'AllDayZone';\n }\n static get configurable() {\n return {\n hoverEdges : 'lr'\n };\n }\n // Drag handling\n dragEnter(drag) {\n // If there's no space in which to display the drop indicator,\n // temporarily expand the gutter to allow for appearance of the drop indicator.\n if (!this.view.eventsPerCell) {\n this.view.expandGutter();\n }\n return super.dragEnter(drag);\n }\n dragLeave(drag) {\n this.view.collapseGutter();\n super.dragLeave(drag);\n }\n captureDragOffset(eventRecord, hit, drag) {\n drag.set('eventOffset', [\n Math.max(Math.floor(DH.diff(eventRecord.startDate, hit.date, 'd')), 0),\n 'd'\n ]);\n }\n // Drop handling\n dropHitCreate(drag, hit, dragFrom) {\n let endDate = this.clearTime(hit.date),\n startDate = this.clearTime(dragFrom.date);\n if (endDate < startDate) {\n [startDate, endDate] = [endDate, startDate];\n }\n // Update the final duration in the units the view created the record with.\n this.setEventData({\n startDate,\n duration : DH.as(this.eventRecord.durationUnit, DH.diff(startDate, endDate, 'd') + 1, 'd')\n });\n }\n async moveEventTo(drag, dropRec) {\n const\n me = this,\n hit = me.hitTest(drag),\n date = me.applyDragOffset(hit?.date, drag),\n newDate = new Date(dropRec.startDate);\n if (date) {\n // We're only changing the date component of the time.\n // Not the time of day that the event started at.\n newDate.setFullYear(date.getFullYear());\n newDate.setMonth(date.getMonth());\n newDate.setDate(date.getDate());\n // If the event does not belong in the all day zone, i.e. it's not day-spanning\n // and does not have the allDay flag set, then set the allDay flag\n if (me.view.dayTime.startShift) {\n newDate.setHours(date.getHours());\n newDate.setMinutes(date.getMinutes());\n newDate.setSeconds(date.getSeconds());\n dropRec.duration = 1;\n }\n else {\n if (!me.view.isAllDayEvent(dropRec)) {\n dropRec.allDay = true;\n }\n }\n await me.setStartDate(dropRec, newDate);\n }\n }\n // Misc\n setEventData(data, creating) {\n super.setEventData(data, creating);\n const\n me = this,\n { eventRecord } = me;\n const { startDate, endDate } = eventRecord;\n if (creating && !me.view.dayTime.startShift) {\n eventRecord.allDay = true;\n }\n me.days = me.makeDays(startDate, endDate);\n }\n // Configs\n updateDays(days) {\n const me = this;\n let { eventEl } = me;\n if (days?.length) {\n if (!eventEl) {\n me.eventEl = eventEl = DomHelper.createElement({\n ...me.eventDom\n });\n eventEl.classList.add('b-allday');\n }\n const\n { dropRootElement } = me,\n { visibleCellSelector, weekLength } = me.view,\n eventTop = me.dragging?.peek('eventSourceHit')?.eventTop,\n cells = DomHelper.children(dropRootElement, visibleCellSelector),\n cell = DomHelper.down(dropRootElement, `${visibleCellSelector}[data-date='${days[days.length - 1]}']`);\n // The one event element lives in the startDate cell, or the resource sub cell\n // of the startdate cell.\n DomHelper.down(cell, '.b-cal-event-bar-container').appendChild(eventEl);\n eventEl.style[me.view.rtl ? 'right' : 'left'] = DomHelper.percentify(100 * (cells.indexOf(cell) - days.length + 1) / weekLength);\n eventEl.style.width = DomHelper.percentify(100 * days.length / weekLength);\n if (eventTop) {\n eventEl.style.top = eventTop;\n }\n // Ensure element is in view in case it's scrolled, and we are dragging\n // an interday event in the main day part.\n me.view.scrollable.scrollIntoView(eventEl, true);\n }\n else if (eventEl) {\n if (eventEl.classList.contains('b-cal-tentative-event')) {\n eventEl.remove();\n }\n me.eventEl = null;\n }\n }\n updateView(view, was) {\n if (view) {\n const multiDay = DH.diff(view.startDate, view.endDate, 'd') > 1;\n this.hoverable = multiDay;\n this.draggable = multiDay || this.view.owner.isDayView;\n }\n super.updateView(view, was);\n }\n}\n//-------------------------------------------------------------------------\nclass DayZone extends BaseDayZone {\n static get $name() {\n return 'DayZone';\n }\n static get configurable() {\n return {\n dragEventId : null,\n hoverable : true,\n hoverEdges : 'tb',\n times : {\n $config : {\n equal : 'array'\n },\n value : null\n },\n alDayZoneClass : AllDayZone,\n // When dragging events, configure the DayZone with constrainToDay : true\n // to prevent dragging events so that they cross the day start or end boundaries.\n constrainToDay : false\n };\n }\n construct(...args) {\n super.construct(...args);\n const\n me = this,\n { allDayEvents } = me.view;\n if (allDayEvents) {\n me.allDayZone = new me.alDayZoneClass({\n active : me.active,\n owner : me.owner,\n view : allDayEvents,\n resource : me.resource\n });\n }\n }\n syncDraggingElements(eventId, active) {\n const\n { dragging : drag } = this,\n { draggingItemCls } = drag.source,\n containerEl = drag.itemElement.closest('.b-dayview-day-container'),\n elements = containerEl?.querySelectorAll(`[data-event-id=\"${eventId}\"]`) ?? [];\n for (const el of elements) {\n el.classList.toggle(draggingItemCls, active);\n }\n }\n hitTest(at) {\n const\n { view } = this,\n { dayTime } = view,\n hit = super.hitTest(at);\n // Cache the the main date for the column we are over.\n // This is used later in applyDragOffset to constrain the exact datetime to within that date\n if (hit) {\n hit.overDate = at?.isDragContext ? view.getDateFromPosition(at.event.clientX, Rectangle.fromScreen(view.dayContainerElement).y, false, dayTime) : dayTime.startOfDay(hit.date);\n }\n return hit;\n }\n updateDragEventId(eventId, previousEventId) {\n previousEventId && this.syncDraggingElements(previousEventId, false);\n eventId && this.syncDraggingElements(eventId, true);\n }\n get eventRecord() {\n return super.eventRecord || this.allDayZone?.eventRecord;\n }\n set eventRecord(value) {\n super.eventRecord = value;\n }\n get recurring() {\n return this.isCreating && this.eventRecord?.recurrenceRule != null;\n }\n get droppingAllDay() {\n const eventRecord = this.dropping?.peek('eventRecord');\n return eventRecord?.startDate && this.view?.isAllDayEvent(eventRecord) || false;\n }\n get useAllDay() {\n // when an allDay event is being dropping on the hourly part of the day view, relay that to the allDayZone\n // if it is from an outsider (we want to retain the allDay nature of the event). If it is from _our_ allDayZone,\n // then the goal is to move it from allDay to not allDay.\n return this.droppingAllDay && this.view.showAllDayHeader && this.dropping.source !== this.allDayZone;\n }\n get wasAllDay() {\n // when an allDay event is being dropping on the hourly part of the day view, relay that to the allDayZone\n // if it is from an outsider (we want to retain the allDay nature of the event). If it is from _our_ allDayZone,\n // then the goal is to move it from allDay to not allDay.\n return this.droppingAllDay && this.dropping.source === this.allDayZone;\n }\n doDestroy() {\n this.allDayZone?.destroy();\n super.doDestroy();\n }\n dragStart() {\n super.dragStart();\n this.dragEventId = this.dragging.peek('eventRecord')?.id ?? null;\n }\n findRootElement(view) {\n return view.eventContentElement;\n }\n // Drag handling\n captureDragOffset(eventRecord, hit, drag) {\n drag.set('eventOffset', [\n Math.floor(DH.diff(eventRecord.startDate, hit.date, 'm')),\n 'm'\n ]);\n }\n cleanupDrag() {\n this.dragEventId = null;\n super.cleanupDrag();\n this.allDayZone?.cleanupDrag();\n }\n // Drop handling\n cleanupDrop() {\n super.cleanupDrop();\n // Stop monitoring early. With polyfilled resize monitor scroll event\n // will fire too soon when eventRecord is nullified but monitor is not stopped\n this.owner.client?._scrollManager?.stopMonitoring();\n this.allDayZone?.cleanupDrop();\n }\n dropHitCreate(drag, hit) {\n const\n me = this,\n { durationUnit } = me.eventRecord;\n let endTime = hit.date,\n startTime = drag.peek('eventCreate').date,\n endDate = endTime,\n startDate = startTime,\n duration, recurrenceCount;\n const\n sameDay = !(me.clearTime(startTime) - me.clearTime(endTime)),\n recurring = drag.ctrlKey && !sameDay;\n if (recurring || sameDay) {\n endDate = me.clearTime(endTime);\n startDate = me.clearTime(startTime);\n // Now these are just milliseconds from midnight (note: Date - Date = millis):\n startTime = startTime - startDate;\n endTime = endTime - endDate;\n if (endDate < startDate) {\n [startDate, endDate] = [endDate, startDate];\n }\n if (endTime < startTime) {\n [startTime, endTime] = [endTime, startTime];\n }\n startDate.setTime(startDate.getTime() + startTime);\n // Convert the millisecond value of the duration to the event record\n duration = DH.as(durationUnit, Math.max(me.view.increment, Math.floor(endTime - startTime)));\n if (recurring) {\n recurrenceCount = DH.diff(me.clearTime(startDate), me.clearTime(endDate), 'd') + 1;\n }\n }\n else {\n if (endDate < startDate) {\n [startDate, endDate] = [endDate, startDate];\n }\n // Convert the millisecond value of the duration to the event record\n duration = DH.as(durationUnit, Math.floor((endDate - startDate) / MINUTES), 'm');\n }\n me.setEventData({\n startDate,\n duration,\n recurrenceRule : recurring ? `FREQ=DAILY;COUNT=${recurrenceCount}` : null\n });\n }\n dropHitMove(drag, hit, eventRecord) {\n let startDate = hit.date;\n const\n me = this,\n { view } = me,\n dayStart = view.dayTime.startOfDay(startDate);\n if (me.useAllDay) {\n me.allDayZone.dropHitMove(drag, hit, eventRecord);\n }\n else {\n // use the internal eventRecord since it may have a different durationUnit when dragging between allDay\n // and non-allDay:\n eventRecord = me.eventRecord;\n startDate = me.applyDragOffset(startDate, drag);\n // Dragging in a DayView must not allow dragging above \"midnight\", otherwise the drop indicator will\n // become what looks like a 2 day event in the all day header.\n if (view.showAllDayHeader && startDate < dayStart) {\n startDate = dayStart;\n }\n me.setEventData({\n startDate,\n endDate : DH.add(startDate, eventRecord.duration, eventRecord.durationUnit),\n duration : eventRecord.duration\n });\n }\n }\n applyDragOffset(date, drag) {\n let result = super.applyDragOffset(date, drag);\n // If we're not using an all day row, constrain the event to within the day\n if (this.constrainToDay) {\n const { overDate } = this.hit;\n result = new Date(\n Math.max(\n Math.min(result, overDate.getTime() + this.view.dayTime.timeEnd - this.eventRecord.durationMS),\n overDate\n )\n );\n }\n return result;\n }\n dropHitResize(drag, hit, eventHit) {\n const\n me = this,\n { eventRecord } = me,\n date = hit.date;\n if (eventHit.atEnd) {\n if (eventRecord.startDate < date) {\n me.setEventData({\n endDate : date\n });\n }\n }\n else if (date < eventRecord.endDate) {\n me.setEventData({\n startDate : date\n });\n }\n }\n async moveEventTo(drag, dropRec) {\n const\n me = this,\n hit = me.hitTest(drag),\n date = hit?.date;\n if (date) {\n if (me.useAllDay) {\n await me.allDayZone.moveEventTo(drag, dropRec);\n }\n else {\n const\n { view } = me,\n newStartDate = me.applyDragOffset(date, drag);\n // If converting from an all day event, ensure it doesn't remain as inter-day due to the\n // endDate now overrunning the end of the destination date.\n // Constrain newEndDate to the end of the destination date.\n if (me.wasAllDay) {\n const\n endOfDay = DH.add(view.dayTime.startOfDay(newStartDate), 24, 'h'),\n newEndDate = DH.add(newStartDate, dropRec.duration, dropRec.durationUnit);\n dropRec.allDay = false;\n // If the new start time we dropped at will cause it to overflow the end of the dropped day\n // then convert it to be autoCreate.duration in length (Still ensuring that that does not\n // escape the end of the day).\n if (newEndDate > endOfDay) {\n const\n defaultDuration = DH.parseDuration(view.autoCreate.duration),\n newEndDate = new Date(Math.min(DH.add(newStartDate, defaultDuration.magnitude, defaultDuration.unit), endOfDay)),\n newDuration = DH.diff(newStartDate, newEndDate, dropRec.durationUnit);\n dropRec.setDuration(newDuration, dropRec.unit);\n }\n }\n await me.setStartDate(dropRec, newStartDate);\n }\n }\n }\n startCreate(date) {\n this.createEvent({\n duration : 0,\n durationUnit : this.durationUnit,\n startDate : date,\n // It's only a provisional event until gesture is completed (possibly longer if an editor dialog is shown after)\n isCreating : true\n });\n }\n // Misc\n includeDay(date, cell, first, last) {\n return DomHelper.createElement({\n parent : cell.querySelector('.b-dayview-event-container'),\n ...this.renderEvent(this.eventRecord, first, last)\n });\n }\n removeDay(date, value) {\n if (value.classList.contains('b-cal-tentative-event')) {\n value.remove();\n }\n }\n setEventData(data, creating) {\n const me = this;\n if (me.useAllDay) {\n me.allDayZone.setEventData(data, creating);\n return;\n }\n super.setEventData(data, creating);\n const\n { eventRecord } = me,\n { endDate, startDate } = eventRecord,\n { dayTime } = me.view;\n let lastDate = endDate;\n if (me.recurring) {\n // odd thing here... the way \"days\" works is inclusive endDate (because of events that start/stop in the\n // same day), so we need the \"-1\":\n lastDate = DH.add(lastDate, eventRecord.recurrence.count - 1, 'd');\n }\n me.days = me.makeDays(startDate, lastDate); // updates rendered events for these days\n me.times = [\n dayTime.delta(startDate, 's'),\n dayTime.delta(endDate, 's')\n ];\n }\n setupEvent(data, creating) {\n const me = this;\n if (me.useAllDay) {\n me.allDayZone.setupEvent(data, creating);\n }\n else {\n if (this.wasAllDay) {\n data.allDay = false;\n data.endDate = DH.add(data.startDate, data.duration = 1, data.durationUnit = 'hour');\n }\n super.setupEvent(data, creating);\n }\n }\n // Configs\n updateDays(days, was) {\n super.updateDays(days, was);\n this.updateTimes(this.times, null);\n }\n updateTimes(times) {\n if (!times) {\n return;\n }\n const\n me = this,\n { allDayZone, dayValues, dragging, eventRecord, recurring, view } = me,\n { dayTime, eventSpacing } = view,\n insetProp = view.rtl ? 'right' : 'left',\n { endDate, startDate } = eventRecord,\n [startOffset, endOffset] = times,\n // drag move can come from outside our calendar, so only consider the eventWidth if we are the one doing\n // the dragging:\n eventInset = !dragging?.aborted && dragging?.peek('eventInset'),\n eventWidth = !dragging?.aborted && dragging?.peek('eventWidth'),\n firstDay = dayTime.dateKey(startDate),\n lastDay = dayTime.dateKey(endDate),\n multiDay = dayTime.startOfDay(startDate) < dayTime.startOfDay(endDate),\n heightScale = 100 / dayTime.duration('s'); // to give us percent when we multiply by this value\n let { days } = me,\n date, first, height, style, top;\n if (!days) {\n return;\n }\n // Since we may not have changed me.days (time of day only changes), we now need to update the vertical\n // aspect\n for (date in dayValues) {\n first = date === firstDay;\n style = dayValues[date].style;\n top = startOffset * heightScale;\n height = (endOffset - startOffset) * heightScale;\n DomSync.sync({\n targetElement : dayValues[date],\n domConfig : me.renderEvent(me.eventRecord, first, date === days[days.length - 1])\n });\n if (!recurring && multiDay) {\n if (first) {\n height = 100 - top;\n }\n else if (date === lastDay) {\n height = top + height;\n }\n else {\n height = 100;\n }\n }\n style.top = (recurring || first) ? DomHelper.percentify(top) : 0;\n style.height = DomHelper.percentify(height);\n style.paddingBottom = DomHelper.setLength(eventSpacing);\n if (eventInset) {\n style[insetProp] = eventInset;\n }\n if (eventWidth) {\n style.width = `${eventWidth}px`;\n }\n }\n // Now sync \"days\" for the allDayZone:\n if (!days || days.length < 2 || recurring) {\n allDayZone?.cleanupDrop();\n days = null;\n }\n else if (allDayZone && view.showAllDayHeader) {\n if (!allDayZone.eventRecord) {\n allDayZone.noTip = true;\n const eventData = {\n startDate : eventRecord.startDate,\n endDate : eventRecord.endDate\n };\n if (me.isResizing) {\n const resizeEvent = dragging.peek('eventRecord');\n eventData.assigned = resizeEvent.assigned;\n eventData.eventColor = resizeEvent.eventColor;\n }\n allDayZone.createEvent(eventData, me.dropping);\n }\n allDayZone.eventRecord.set({\n startDate : eventRecord.startDate,\n endDate : DH.add(eventRecord.startDate, days.length - 1, 'd')\n });\n allDayZone.days = days;\n }\n }\n}\nclass ResourceCalendarRowZone extends AllDayZone {\n static $name = 'ResourceCalendarRowZone';\n static configurable = {\n droppableSelector : '.b-calendarrow-cell-container,.b-dayresourcecalendarrow-cell-resources,.b-dayresource-allday.b-cal-cell-header'\n };\n // Disable Hoverable behaviour. Resizing is not allowed.\n // Event bars are discontiguous, so resizing an event across multiple\n // cells has ambiguous semantics. We just disallow it.\n // Events in this view may only be *moved*\n syncHoverListeners() {}\n beforeDrag(drag) {\n const hit = this.hitTest(drag);\n // Resizing and drag-creating not valid in this view.\n // Event bars are discontiguous, so resizing an event across multiple\n // cells has ambiguous semantics. We just disallow it.\n // Events in this view may only be *moved*\n if (!hit?.resource || hit.type === 'resize' || hit.type === 'schedule') {\n return false;\n }\n return super.beforeDrag(drag);\n }\n setupEvent() {\n this.view.defaultCalendar = (this.dragging || this.dropping).peek('resource');\n return super.setupEvent(...arguments);\n }\n updateHit(hit, was) {\n if (!hit || hit.resource) {\n super.updateHit(hit, was);\n }\n }\n makeDays(startDate) {\n const\n me = this,\n { isMoving } = me,\n drag = me.dragging || me.dropping,\n date = isMoving ? new Date(Math.max(startDate, me.view.firstVisibleDate)) : drag.peek('date'),\n result = super.makeDays(date, DH.add(date, 1, 'd'));\n // Cannot create or resize across resources\n result.resource = me.hit?.resource;\n return result;\n }\n updateDays(days) {\n const me = this;\n let { view, eventEl } = me;\n if (days?.length) {\n if (!eventEl) {\n me.eventEl = eventEl = DomHelper.createElement({\n ...me.eventDom\n });\n eventEl.classList.add('b-allday');\n }\n const\n eventTop = me.dragging?.peek('eventSourceHit')?.eventTop,\n resourceCell = DomHelper.down(me.dropRootElement,\n `${view.visibleCellSelector}:is(${days.map(d => `[data-date=\"${d}\"]`).join(',')}) [data-resource-id=\"${days.resource.id}\"] > .b-cal-event-bar-container`);\n // The one event element lives in the resource sub cell\n resourceCell.appendChild(eventEl);\n eventEl.style.width = '100%';\n if (eventTop) {\n eventEl.style.top = eventTop;\n }\n // Ensure element is in view in case it's scrolled, and we are dragging\n // an interday event in the main day part.\n view.scrollable.scrollIntoView(eventEl, true);\n }\n else if (eventEl) {\n if (eventEl.classList.contains('b-cal-tentative-event')) {\n eventEl.remove();\n }\n me.eventEl = null;\n }\n }\n}\nclass DayResourceZone extends DayZone {\n static $name = 'DayResourceZone';\n static configurable = {\n alDayZoneClass : ResourceCalendarRowZone\n };\n beforeDrag(drag) {\n const hit = this.hitTest(drag);\n if (!hit?.resource) {\n return false;\n }\n return super.beforeDrag(drag);\n }\n setupEvent() {\n this.view.defaultCalendar = (this.dragging || this.dropping).peek('resource');\n return super.setupEvent(...arguments);\n }\n hitTest(at) {\n const\n drag = this.dragging || this.dropping,\n result = super.hitTest(at);\n // We never resize of create across resource columns or date columns\n if (result && drag && !this.isMoving) {\n const fromDate = drag.peek('date');\n result.resource = drag.peek('resource');\n result.date.setDate(fromDate.getDate());\n result.date.setMonth(fromDate.getMonth());\n result.date.setFullYear(fromDate.getFullYear());\n }\n return result;\n }\n updateHit(hit, was) {\n if (!hit || hit.resource) {\n super.updateHit(hit, was);\n }\n }\n makeDays(startDate, endDate) {\n const\n me = this,\n { isMoving } = me,\n drag = me.dragging || me.dropping,\n date = isMoving ? startDate : drag.peek('date'),\n result = super.makeDays(date, DH.add(date, 1, 'd'));\n // Cannot create or resize across resources\n result.resource = me.hit?.resource;\n return result;\n }\n updateDays(days) {\n const me = this;\n let { eventEl } = me;\n if (days?.length) {\n const cell = DomHelper.down(me.dropRootElement,\n `:is(${days.map(d => `[data-date=\"${d}\"]`).join(',')}) ${me.view.visibleCellSelector}[data-resource-id=\"${days.resource.id}\"] .b-dayview-event-container`);\n // Dragging in this view never spans cells, so we only need one eventEl\n if (!eventEl) {\n me.eventEl = eventEl = DomHelper.createElement({\n ...me.eventDom\n });\n }\n cell.appendChild(eventEl);\n }\n else if (eventEl) {\n if (eventEl.classList.contains('b-cal-tentative-event')) {\n eventEl.remove();\n }\n me.eventEl = null;\n }\n me._times = null;\n }\n updateTimes(times) {\n if (!times || !this.days) {\n return;\n }\n const\n me = this,\n { dayTime, eventSpacing } = me.view,\n [startOffset, endOffset] = times,\n heightScale = 100 / dayTime.duration('s'), // to give us percent when we multiply by this value\n { style } = me.eventEl,\n top = startOffset * heightScale,\n height = (endOffset - startOffset) * heightScale;\n DomSync.sync({\n targetElement : me.eventEl,\n domConfig : me.renderEvent(me.eventRecord, true, true)\n });\n style.top = DomHelper.percentify(top);\n style.height = DomHelper.percentify(height);\n style.paddingBottom = DomHelper.setLength(eventSpacing);\n style.width = '100%';\n // We sidestep cross-date drags for now.\n // No connection into all day zone.\n }\n}\n//====================================================================================================\n// MonthView\nclass MonthZone extends Zone {\n static get $name() {\n return 'MonthZone';\n }\n static get configurable() {\n return {\n coverage : {\n $config : {\n equal : ObjectHelper.isEqual\n },\n value : null\n },\n hoverable : true,\n hoverEdges : 'lr',\n hoverSelector : '.b-cal-event-wrap.b-allday'\n };\n }\n findRootElement(view) {\n return view.weeksElement;\n }\n // Drag handling\n captureDragOffset(eventRecord, hit, drag) {\n drag.set('eventOffset', [\n Math.floor(DH.diff(this.clearTime(eventRecord.startDate), hit.date, 'd')),\n 'd'\n ]);\n }\n cleanupDrag() {\n super.cleanupDrag();\n const cleanDom = () => this.coverage = null;\n // Delay removal of the coverage element slightly if creating so that the refresh\n // will happen first and the event element will not appear to blink.\n if (this.isCreating) {\n // Wait for a max of 100ms for a refresh to occur before cleaning the DOM\n this.view.afterRefresh(cleanDom);\n }\n else {\n cleanDom();\n }\n }\n // Drop handling\n cleanupDrop() {\n super.cleanupDrop();\n // Stop monitoring early. With polyfilled resize monitor scroll event\n // will fire too soon when eventRecord is nullified but monitor is not stopped\n this.owner.client?._scrollManager?.stopMonitoring();\n const cleanDom = () => this.coverage = null;\n // Delay removal of the coverage element slightly if creating so that the refresh\n // will happen first and the event element will not appear to blink.\n if (this.isCreating) {\n // Wait for a max of 100ms for a refresh to occur before cleaning the DOM\n this.view.afterRefresh(cleanDom);\n }\n else {\n cleanDom();\n }\n }\n dropHitCreate(drag, hit) {\n const\n me = this,\n recurring = drag.ctrlKey,\n dragFrom = drag.peek('eventCreate');\n let recurrenceRule = null,\n count, day1, day2, endDate, startDate, week1, week2;\n endDate = me.clearTime(hit.date);\n startDate = me.clearTime(dragFrom.date);\n day1 = dragFrom.dayNumber;\n day2 = hit.dayNumber;\n week1 = dragFrom.weekOffset;\n week2 = hit.weekOffset;\n if (week2 < week1) {\n [week1, week2] = [week2, week1];\n }\n /*\n +-----+-----+-----+-----+-----+-----+-----+\n | S | M | Tu | W | Th | F | S |\n +-----+-----+-----+-----+-----+-----+-----+\n | | B | | A | | C | |\n +-----+-----+-----+-----+-----+-----+-----+\n | | | | | | | |\n +-----+-----+-----+-----+-----+-----+-----+\n | | D | | x | | E | |\n +-----+-----+-----+-----+-----+-----+-----+\n | | | | | | | |\n +-----+-----+-----+-----+-----+-----+-----+\n | | F | | G | | H | |\n +-----+-----+-----+-----+-----+-----+-----+\n startDate day1\n A > endDate = day2\n B > endDate > day2\n C > endDate < day2\n D > endDate > day2\n E < endDate < day2\n F < endDate > day2\n G < endDate = day2\n H < endDate < day2\n */\n if (recurring) {\n // In this mode, the interval [day1, day2] is used to draw the days of the week for each week, so it\n // must be that day1 <= day2.\n count = week2 - week1 + 1;\n recurrenceRule = (count > 1) ? `FREQ=WEEKLY;COUNT=${count}` : null;\n if (endDate < startDate) { // if (A, B, C or D)\n startDate = endDate; // only startDate matters for recurrence...\n if (day1 < day2) { // if (C)\n startDate = DH.add(startDate, day1 - day2, 'd');\n }\n }\n else if (day2 < day1) { // if (F)\n startDate = DH.add(startDate, day2 - day1, 'd');\n }\n if (day2 < day1) { // if (B, D or F)\n [day1, day2] = [day2, day1];\n }\n }\n // In this mode, day1 is the day of week the event starts and day2 is the day of week for the end of the\n // event, so they must adhere to startDate/endDate.\n else if (endDate < startDate) {\n [startDate, endDate] = [endDate, startDate];\n [day1, day2] = [day2, day1];\n }\n me.setEventData({\n startDate,\n duration : DH.as(me.eventRecord.durationUnit, (recurring ? day2 - day1 : DH.diff(startDate, endDate, 'd')) + 1, 'd'),\n recurrenceRule\n });\n }\n dropHitNowhere(drag) {\n super.dropHitNowhere(drag);\n this.coverage = null;\n }\n // Misc\n setEventData(data, creating) {\n super.setEventData(data, creating);\n const\n { dropping, eventRecord, view } = this,\n { visibleCellSelector } = view,\n weekEls = DomHelper.children(view.weeksElement, '> .b-calendar-week'),\n coverage = {\n // weekNumber : String[] describing the days for a weekEl (in order of weekEls)\n },\n add = event => {\n const { startDate, endDate } = event;\n for (let cells, cover, k, n, i = 0; i < weekEls.length; ++i) {\n cells = DomHelper.children(weekEls[i], visibleCellSelector); // not immediate descendants\n n = cells.length;\n // cover is a string w/day numbers for every day that intersects the event 0 to N-1 where N is\n // the number of days in the week. Day number 0 is preceded by '<' if the event started before\n // the week. Day number N-1 is followed by '>' if the event extends beyond the end of the week.\n // Ex: '0123' means the event occurs on the first 4 days of the week.\n // Ex: '<012' means the event started in the prior week and occurs on the first 3 days.\n cover = '';\n for (k = 0; k < n; ++k) {\n const\n dayStart = view.getDateFromElement(cells[k]),\n dayEnd = DH.add(dayStart, 1, 'd');\n if (startDate < dayEnd && dayStart < endDate) { // if (day intersects event)\n if (!k && startDate < dayStart) {\n cover = '<';\n }\n cover += k; // k is converted to a string since cov is a string\n if (k === n - 1 && dayEnd < endDate) {\n cover += '>';\n }\n }\n }\n if (cover) {\n (coverage[i] || (coverage[i] = [])).push(cover);\n }\n }\n };\n if (dropping?.has('eventRecord') || !eventRecord.recurrence) {\n add(eventRecord);\n }\n else {\n eventRecord.recurrence.forEachOccurrence(view.startDate, view.endDate, add);\n }\n this.coverage = coverage;\n }\n // Configs\n updateCoverage(coverage) {\n const\n me = this,\n {\n dragging,\n weekValues,\n view\n } = me,\n { rtl } = view,\n {\n visibleCellSelector\n } = view,\n eventSourceHit = coverage && dragging?.peek('eventSourceHit'),\n eventTop = eventSourceHit?.eventTop,\n newWeekValues = {},\n eventRow = view.getWeekElementFor(eventSourceHit?.eventElement),\n { weekElements } = view;\n let cell, cells, cov, cover, el, eventEl, extL, extR, i, k, weekEl;\n me.weekValues = newWeekValues;\n for (i = 0; i < weekElements.length; ++i) {\n if (!(cover = coverage?.[i])) {\n continue;\n }\n weekEl = weekElements[i];\n cells = DomHelper.children(weekEl, visibleCellSelector); // not immediate descendants\n for (k = 0; k < cover.length; ++k) {\n // we keep an array of elements for each week in case we need to render some sort of recurrence\n if (!(eventEl = weekValues?.[i]?.shift())) {\n eventEl = DomHelper.createElement(me.eventDom);\n }\n (newWeekValues[i] || (newWeekValues[i] = [])).push(eventEl);\n cov = cover[k];\n extL = cov.includes('<') ? 1 : 0;\n extR = cov.includes('>') ? 1 : 0;\n cov = cov.substr(extL, cov.length - extR - extL); // remove the < > chars if any\n eventEl.classList[extL ? 'add' : 'remove']('b-continues-past');\n eventEl.classList[extR ? 'add' : 'remove']('b-continues-future');\n eventEl.style[rtl ? 'right' : 'left'] = DomHelper.percentify(100 * Number(cov[0]) / cells.length);\n eventEl.style.width = DomHelper.percentify(100 * cov.length / cells.length);\n if (eventTop && weekEl === eventRow) {\n eventEl.style.top = eventTop;\n }\n // We put the el in the last cell so that it is on top of events for that day and all events on prior\n // days as well\n cell = cells[Number(cov[cov.length - 1])];\n el = DomHelper.down(cell, '.b-cal-event-bar-container');\n if (el !== eventEl.parentNode) {\n el.appendChild(eventEl);\n }\n }\n }\n if (weekValues) {\n for (i in weekValues) {\n weekValues[i].forEach(el => {\n if (el.classList.contains('b-cal-tentative-event')) {\n el.remove();\n }\n });\n }\n }\n }\n}\n//====================================================================================================\n// OverflowZone\nclass OverflowZone extends Zone {\n static get $name() {\n return 'OverflowZone';\n }\n static get configurable() {\n return {\n droppable : false,\n dragProxy : {\n type : 'default',\n open(drag) {\n const\n me = this,\n { owner } = drag.source.view,\n sourceEl = drag.element.closest('.b-cal-event-wrap');\n if (owner.isYearView) {\n me.proxyEl = sourceEl.cloneNode(true);\n me.proxyEl.classList.add('b-cal-drag-proxy');\n me.proxyEl.style.width = `${sourceEl.offsetWidth}px`;\n me.proxyOffset = EventHelper.getClientPoint(drag.startEvent).getDelta(Rectangle.from(sourceEl));\n owner.contentElement.appendChild(me.proxyEl);\n }\n },\n dragMove(drag) {\n if (this.proxyEl) {\n // Align the proxy to [10, 10] from the pointer\n DomHelper.alignTo(this.proxyEl, EventHelper.getClientPoint(drag.event).translate(10, 10), {\n align : 't0-t0'\n });\n }\n },\n close() {\n this.proxyEl?.remove();\n }\n }\n };\n }\n findRootElement(view) {\n return view.contentElement;\n }\n beforeDrag(drag) {\n const hit = this.hitTest(drag);\n if (hit?.type !== 'event' || !this.owner.draggable || !hit.eventRecord.isDraggable) {\n return false;\n }\n drag.set('eventRecord', hit.eventRecord);\n drag.set('eventDragMode', drag[eventDragSym] = modeDescriptor.move.mode);\n }\n dragStart() {\n this.view.hide();\n }\n}\n//====================================================================================================\n// YearView\nclass YearZone extends Zone {\n static get $name() {\n return 'YearZone';\n }\n startCreate() {\n // Overflow popup must hide during YearView drag create.\n this.view._overflowPopup?.hide();\n super.startCreate(...arguments);\n }\n // Drop handling\n dragEnter(drag) {\n const result = super.dragEnter(drag);\n if (result !== false) {\n this.view.contentElement.classList.add(this.draggingCls);\n }\n return result;\n }\n dragLeave(drag) {\n super.dragLeave(drag);\n this.view.contentElement.classList.remove(this.draggingCls);\n }\n dropHitCreate(drag, hit, dragFrom) {\n const me = this;\n let endDate = me.clearTime(hit.date),\n startDate = me.clearTime(dragFrom.date);\n if (endDate < startDate) {\n [startDate, endDate] = [endDate, startDate];\n }\n // Helpful to use the dates because of changing DST across large date ranges\n me.setEventData({\n startDate,\n endDate : DH.add(endDate, 1, 'd')\n });\n me.days = me.makeDayRange(startDate, endDate); // updates cell styles for these days\n }\n dropHitMove(drag, hit, eventRecord) {\n super.dropHitMove(drag, hit, eventRecord);\n const\n me = this,\n tempRec = me.eventRecord;\n let { endDate } = tempRec;\n if (tempRec.allDay) {\n endDate = DH.add(endDate, -1, 'd'); // switch to inclusive\n }\n me.days = me.makeDayRange(tempRec.startDate, endDate);\n }\n // Misc\n includeDay(date) {\n const els = DomHelper.children(this.view.bodyElement, `[data-date='${date}']`);\n els.forEach(e => e.classList.add(`b-cal-tentative-event${this.view.hideNonWorkingDays ? ':not(.b-nonworking-day)' : ''}`));\n return els;\n }\n makeDayRange(startDate, endDate) {\n const days = [];\n for (let date = startDate; date <= endDate; date = DH.add(date, 1, 'd')) {\n days.push(DH.format(date, YYYY_MM_DD));\n }\n return days;\n }\n removeDay(date, els) {\n els.forEach(e => e.classList.remove('b-cal-tentative-event'));\n }\n}\n//====================================================================================================\n// ResourceViewZone\nclass ResourceViewZone extends Base {\n static get configurable() {\n return {\n view : null,\n zones : {\n $config : ['nullify'],\n value : []\n }\n };\n }\n updateView(view) {\n // Create sub zones for any already existent views.\n // If project had static data, they will be generated at config time.\n view.eachView(view => {\n this.onResourceViewViewCreate({ view });\n });\n // If data is loaded async, they will be created when Resources arrive.\n view.ion({\n viewCreate : 'onResourceViewViewCreate',\n thisObj : this\n });\n }\n onResourceViewViewCreate({ view }) {\n const\n me = this,\n {\n zones,\n owner\n } = me,\n modes = owner.client.constructor.Modes,\n type = owner.getViewZoneType(modes.resolveType(view.type));\n type && zones.push(owner.createZone(type, {\n view,\n resource : view.defaultCalendar\n }));\n }\n changeZones(zones, oldZones) {\n if (oldZones?.length && !zones) {\n for (let i = 0, { length } = oldZones; i < length; i++) {\n oldZones[i].destroy();\n }\n }\n return zones;\n }\n}\n//----------------------------------------------------------------------------------------------------\n/**\n * Format expected to be returned in a `validateCreateFn`\n *\n * @typedef {Object} ValidateCreateResult\n * @property {Boolean} add Allow adding to store\n * @property {Boolean} edit Allow editor to open\n */\n/**\n * This feature provides drag-based event creation and modification for Calendars. When enabled (which is the default\n * for calendars), the user can do the following via the mouse or touch screen:\n *\n * - Create events by touching (or pressing the mouse button in) an the empty space and dragging. As the drag\n * progresses, a tentative event is rendered. On release, the {@link Calendar.feature.EventEdit} feature displays\n * the event edit dialog to complete the process. This can be disabled via the {@link #config-creatable} config.\n * - Adjust the start or end times of an event in the day or week views by dragging the top or bottom of an event.\n * This can be disabled via the {@link #config-resizable} config or the {@link Scheduler.model.mixin.EventModelMixin#field-resizable}\n * field on a per-event basis.\n * - Adjust the start or end date of an all-day event in the month view by dragging the left-most or right-most end\n * of an event. This can be disabled via the {@link #config-resizable} config or the\n * {@link Scheduler.model.mixin.EventModelMixin#field-resizable} field on a per-event basis.\n * - Move an event from its current time (in day or week views) or date (in all views except agenda) by dragging the\n * body of an event. This can be disabled via the {@link #config-draggable} config or via the\n * {@link Scheduler.model.mixin.EventModelMixin#field-draggable} field on a per-event basis.\n *\n * ```javascript\n * // change name for events created by drag to \"Event\":\n * let calendar = new Calendar({\n * features : {\n * drag : {\n * newName : 'Event'\n * }\n * }\n * });\n * ```\n *\n * ## Asynchronous validation of resize, move and create operations\n *\n * You can easily add a confirmation step after an operation to show a dialog to the end user. This is done using the\n * {@link #event-beforeDragMoveEnd}, {@link #event-beforeDragCreateEnd} and {@link #event-beforeDragResizeEnd} events.\n *\n * ```javascript\n * let calendar = new Calendar({\n * listeners : {\n * // Async event listeners allowing you to veto drag operations\n * beforeDragMoveEnd : async({ eventRecord }) => {\n * const result = await MessageDialog.confirm({\n * title : 'Please confirm',\n * message : 'Is this the start time you wanted?'\n * });\n *\n * // Return true to accept the drop or false to reject it\n * return result === MessageDialog.yesButton;\n * },\n * beforeDragResizeEnd : async({ eventRecord }) => {\n * const result = await MessageDialog.confirm({\n * title : 'Please confirm',\n * message : 'Is this the duration you wanted?'\n * });\n *\n * // Return true to accept the drop or false to reject it\n * return result === MessageDialog.yesButton;\n * },\n * beforeDragCreateEnd : async({ eventRecord }) => {\n * const result = await MessageDialog.confirm({\n * title : 'Please confirm',\n * message : 'Want to create this event?'\n * });\n *\n * // Return true to accept the drop or false to reject it\n * return result === MessageDialog.yesButton;\n * }\n * }\n * });\n * ```\n *\n * ## Converting \"All day\" events to intra day events\n * You may drag an \"All day\" event out of the {@link Calendar.widget.DayView#property-allDayEvents top row}\n * of a {@link Calendar.widget.DayView} and into the body of the view.\n *\n * The event's {@link Scheduler.model.EventModel#field-duration} will be preserved if possible.\n *\n * If the newly calculated end time (based on the dropped-at time and the {@link Scheduler.model.EventModel#field-duration}\n * of the event) will overflow the end of that date then the event is converted to the duration configured\n * in the `DayView`'s {@link Calendar.widget.DayView#config-autoCreate}.\n *\n * This feature is **enabled** by default.\n *\n * The example below demonstrates configuration of the EventEdit feature and implements validation of\n * drag gestures so that no event interrupts fika from 9:30am to 10:30am.\n *\n * {@inlineexample Calendar/feature/CalendarDrag.js}\n *\n * @extends Calendar/feature/CalendarFeature\n * @classtype drag\n * @feature\n */\nexport default class CalendarDrag extends CalendarFeature {\n static get $name() {\n return 'CalendarDrag';\n }\n static get type() {\n return 'drag';\n }\n static get configurable() {\n return {\n disableOnReadOnly : true,\n localizableProperties : [\n 'newName',\n 'recurrenceTip'\n ],\n /**\n * Specify `false` to disallow creating events by drag gestures.\n * @config {Boolean}\n */\n creatable : true,\n /**\n * Specify `false` to disallow dragging events to new times or days.\n * @config {Boolean}\n */\n draggable : true,\n /**\n * The {@link Scheduler.model.EventModel#field-durationUnit} to use when drag-creating events.\n *\n * If not specified, the `dragUnit` property of the active view's\n * {@link Calendar.widget.mixin.CalendarMixin#property-autoCreate} is used.\n *\n * For {@link Calendar.widget.DayView}s, this is normally `'hour'`, for views with a granularity\n * level of one day, the default is `'day'`.\n * @config {String}\n */\n durationUnit : null,\n /**\n * A {@link Core.helper.DomHelper#typedef-DomConfig DOM config} object used to create an extra element\n * during event drag to contain the end time of the tentative event. This element contains the CSS class\n * `'b-cal-event-footer'` which can be used for styling.\n *\n * Set this to `null` to remove the end time rendering during drag operations.\n * @config {DomConfig}\n * @default\n */\n footer : {\n className : 'b-cal-event-footer'\n },\n /**\n * This is configured as a {@link Core.helper.DomHelper#function-createElement-static DomHelper}\n * specification and is promoted to an `HTMLElement` during initialization. This element is moved between\n * calendar event elements on hover in order to show drag handles on the event under the mouse.\n * @config {HTMLElement|DomConfig}\n * @private\n */\n gripper : {\n class : 'b-gripper'\n },\n /**\n * The name of new events or a function to call with the event record that will return the event name.\n *\n * If a function is supplied, it is called in the scope of (the `this` reference is set to) the\n * view being dragged within.\n *\n * Cpnfigure as `null` to use the dragged-in view's {@link Calendar.widget.mixin.CalendarMixin#config-autoCreate}\n * `newName` property.\n * @config {String|Function}\n * @param {Scheduler.model.EventModel} eventRecord The record being drag-created.\n * @returns {String} Name of new event\n */\n newName : 'L{newEvent}',\n /**\n * The text to display as a hint for creating recurring events during drag. This tip is displayed in the\n * {@link #config-tooltip} in the same place as the recurrence summary (when there is no recurrence to\n * display).\n * @config {String}\n */\n recurrenceTip : '(L{holdCtrlForRecurrence})',\n /**\n * Specify `false` to disallow dragging the edges of events to change their start or end.\n * @config {Boolean}\n */\n resizable : true,\n /**\n * The tooltip to display during a drag create process. Disabled by\n * default, set to `true`, or provide a tooltip / config object, to enable it.\n * @config {Boolean|EventTipConfig|Calendar.widget.EventTip}\n */\n tooltip : {\n $config : ['lazy', 'nullify'],\n value : {\n type : 'eventTip',\n disabled : true,\n forSelector : null,\n tools : null\n }\n },\n /**\n * An empty function by default that allows you to perform custom validation on an event being created by\n * a drag gesture.\n *\n * The `drag` context contains the following data items (see {@link Core.util.drag.DragContext#function-get}):\n *\n * - `eventDragMode` : The {@link #typedef-CalendarDragMode} object describing the drag operation.\n * - `eventCreate` : The {@link Calendar.view.Calendar#typedef-CalendarHit} object that describes the target of the drag operation.\n *\n * Return `false` to cancel the create operation.\n *\n * This function can return a `Promise` (i.e., it can be `async`).\n *\n * Example:\n * ```javascript\n * let calendar = new Calendar({\n * features : {\n * drag : {\n * async validateCreateFn({ eventRecord, drag }) {\n * // This method can be async so it can make ajax requests or interact\n * // with the user...\n *\n * // if we return false, the event will be discarded\n *\n * // The following is equivalent to returning false:\n * //\n * // return {\n * // // Do not add the event to the store\n * // add : false,\n * // // Do not display the edit dialog (in the eventEdit feature):\n * // edit : false\n * // };\n * //\n * // This simply adds the event and does not display the editor:\n * //\n * return {\n * edit : false\n * };\n *\n * // To do delay adding the event until the editor is done (and\n * // not via Cancel):\n * // return {\n * // add : false\n * // };\n * }\n * }\n * }\n * });\n * ```\n * or:\n * ```javascript\n * let calendar = new Calendar({\n * features : {\n * drag : {\n * // Will resolve on the Calendar\n * validateCreateFn : 'up.validateCreate'\n * }\n * },\n * validateCreate{ eventRecord, drag } {\n * ...\n * }\n * });\n * ```\n *\n * Return `true` if the event should be added to the event store and to inform the\n * {@link Calendar.feature.EventEdit eventEdit} feature to display the edit dialog.\n *\n * If this function returns an object, the `add` property can be set to `false`\n * to prevent adding to the event store, and the `edit` property can be set to `false` to inform the\n * `eventEdit` feature not to display the edit dialog.\n *\n * @config {Function|String}\n * @param {Object} info\n * @param {Core.util.drag.DragContext} info.drag The drag create context.\n * @param {Event} info.event The browser event object.\n * @param {Scheduler.model.EventModel} info.eventRecord The Event record.\n * @returns {Boolean|ValidateCreateResult} Return `false` if this event should be rejected.\n */\n validateCreateFn : () => {},\n /**\n * An empty function by default that allows you to perform custom validation on the event being moved to a\n * new date or time via a drag gesture.\n *\n * The `drag` context contains the following data items (see {@link Core.util.drag.DragContext#function-get}):\n *\n * - `eventDragMode` : The {@link #typedef-CalendarDragMode} object describing the drag operation.\n * - `eventRecord` : The {@link Scheduler.model.EventModel event record} being moved.\n * - `eventSourceHit` : The {@link Calendar.view.Calendar#typedef-CalendarHit} object that describes the source of the drag operation.\n *\n * Return `false` to cancel the operation.\n *\n * This function can return a `Promise` (i.e., it can be `async`).\n *\n * Example:\n * ```javascript\n * let calendar = new Calendar({\n * features : {\n * drag : {\n * async validateMoveFn({ eventRecord, drag }) {\n * // This method can be async so it can make ajax requests or interact\n * // with the user...\n *\n * // if we return false, the event move will be discarded\n * }\n * }\n * }\n * });\n * ```\n * or:\n * ```javascript\n * let calendar = new Calendar({\n * features : {\n * drag : {\n * // Will resolve on the Calendar\n * validateMoveFn : 'up.validateMove'\n * }\n * },\n * validateMove{ eventRecord, drag } {\n * ...\n * }\n * });\n * ```\n *\n * @config {Function|String}\n * @param {Object} info\n * @param {Core.util.drag.DragContext} info.drag The drag create context.\n * @param {Event} info.event The browser event object.\n * @param {Scheduler.model.EventModel} info.eventRecord The Event record.\n * @returns {Boolean} Return `false` if this event change should be rejected.\n */\n validateMoveFn : () => {},\n /**\n * An empty function by default that allows you to perform custom validation on the event whose `startDate`\n * or `endDate` is being modified via drag gesture.\n *\n * The `drag` context contains the following data items (see {@link Core.util.drag.DragContext#function-get}):\n *\n * - `eventDragMode` : The {@link #typedef-CalendarDragMode} object describing the drag operation.\n * - `eventSourceHit` : The {@link Calendar.view.Calendar#typedef-CalendarHit} object that describes the source of the drag operation.\n *\n * Return `false` to cancel the operation.\n *\n * This function can return a `Promise` (i.e., it can be `async`).\n *\n * Example:\n * ```javascript\n * let calendar = new Calendar({\n * features : {\n * drag : {\n * async validateResizeFn({ eventRecord, drag }) {\n * // This method can be async so it can make ajax requests or interact\n * // with the user...\n *\n * // if we return false, the event change will be discarded\n * }\n * }\n * }\n * });\n * ```\n * or:\n * ```javascript\n * let calendar = new Calendar({\n * features : {\n * drag : {\n * // Will resolve on the Calendar\n * validateResizeFn : 'up.validateResize'\n * }\n * },\n * validateResize{ eventRecord, drag } {\n * ...\n * }\n * });\n * ```\n *\n * @config {Function|String}\n * @param {Object} info\n * @param {Core.util.drag.DragContext} info.drag The drag create context.\n * @param {Event} info.event The browser event object.\n * @param {Scheduler.model.EventModel} info.eventRecord The Event record.\n * @returns {Boolean|Promise} Return `false` if this event change should be rejected.\n */\n validateResizeFn : () => {},\n zoneTypes : {\n day : DayZone, // also covers WeekView\n month : MonthZone,\n year : YearZone,\n resource : ResourceViewZone,\n dayresource : DayResourceZone\n // AgendaView is not supported (though it could be a Draggable just not a Droppable)\n },\n /**\n * By default, when an event is dragged from an external source, the event is removed from the\n * source EventStore. Configure this as `false` to leave the event in place to allow for the dragging\n * in of the same event repeatedly.\n * @prp {Boolean}\n * @default\n */\n removeFromExternalStore : true\n };\n }\n callOnFunctions = true;\n // Called as a callOnFunctions function by the firing of the beforeDragStart event.\n // The beforeAutoCreate event is also triggered by CalendarMixin's detection of its own\n // autoCreate gesture. This event gives a common point for validation of UI-initiated\n // event creation.\n onBeforeDragStart(props) {\n const\n { drag, event : domEvent, source } = props,\n resourceRecord = source.owner.activeView.getResourceRecord?.(drag.element);\n if (drag.peek('eventDragMode').type === 'create') {\n return this.client.trigger('beforeAutoCreate', { domEvent, date : drag.peek('date'), resourceRecord });\n }\n }\n changeGripper(gripper, was) {\n was?.remove();\n return gripper && DomHelper.createElement(gripper);\n }\n changeTooltip(config, existing) {\n if (config) {\n config = config === true ? this.constructor.configurable.tooltip.value : config;\n if (this.initialConfig.tooltip) {\n config.disabled = false;\n }\n config.ownerFeature = this;\n }\n return Widget.reconfigure(existing, config, /* owner = */ this);\n }\n}\nCalendarDrag.initClass();\nCalendarDrag._$name = 'CalendarDrag';", "import SchedulerEventEditor from '../../Scheduler/view/EventEditor.js';\n/**\n * @module Calendar/widget/EventEditor\n */\n/**\n * Provided event editor dialog. This is not supposed to be used directly.\n *\n * Using the {@link Scheduler.feature.EventEdit#config-items items} config of the EventEdit feature\n * it is possible to reconfigure the layout of the event editor. See the {@link Calendar.feature.EventEdit}\n * for more information and an example of doing this.\n *\n * @extends Scheduler/view/EventEditor\n * @private\n *\n * @typings Scheduler.view.EventEditor -> Scheduler.view.SchedulerEventEditor\n */\nexport default class EventEditor extends SchedulerEventEditor {\n //region Config\n static get $name() {\n return 'EventEditor';\n }\n // Factoryable type name\n static get type() {\n return 'calendareventeditor';\n }\n static get configurable() {\n return {\n align : {\n monitorResize : true // Needed because DayView events change size\n }\n };\n }\n //endregion\n updateRecord(record) {\n this.fixTimeFieldVisibility(record.allDay);\n super.updateRecord(record);\n }\n onAllDayChange({ value, userAction }) {\n this.fixTimeFieldVisibility(value, userAction);\n }\n fixTimeFieldVisibility(allDay, fromUI) {\n const\n hideShowMethod = allDay ? 'hide' : 'show',\n {\n startDateField,\n startTimeField,\n endDateField,\n endTimeField\n } = this.widgetMap;\n // Times hidden for allDay events\n startTimeField?.[hideShowMethod]();\n endTimeField?.[hideShowMethod]();\n // Restore the time fields from the underlying data if the UI checkbox is cleared.\n // If the record was promoted to being allDay, the time portion does not get cleared,\n // just the date getters return snapped values. So the underlying data restores the fields\n // to the originally set start and end times so that the save operation will work as expected.\n if (!allDay && fromUI) {\n startDateField && (startDateField.value = startTimeField.value = this.record.getData('startDate'));\n endDateField && (endDateField.value = endTimeField.value = this.record.getData('endDate'));\n }\n }\n onBeforeShow() {\n const { deleteButton } = this.widgetMap;\n // Superclass has opinions at this time.\n super.onBeforeShow(...arguments);\n // If superclass has not already hidden it for its owm reasons\n // We hide the delete button for newly created events.\n // The cancel button removes it.\n if (deleteButton && !deleteButton.hidden) {\n if (this.record.isCreating) {\n deleteButton.hide();\n }\n }\n }\n onFocusOut() {\n super.onFocusOut(...arguments);\n this.owner = this.initialConfig.owner;\n }\n}\n// Register this widget type with its Factory\nEventEditor.initClass();\nEventEditor._$name = 'EventEditor';", "import CalendarFeature from './CalendarFeature.js';\nimport SchedulerEventEdit from '../../Scheduler/feature/EventEdit.js';\nimport '../widget/EventEditor.js';\nimport DateHelper from '../../Core/helper/DateHelper.js';\nimport DomHelper from '../../Core/helper/DomHelper.js';\nimport '../../Core/widget/SlideToggle.js';\nimport Scroller from '../../Core/helper/util/Scroller.js';\n/**\n * @module Calendar/feature/EventEdit\n */\nconst isCalendar = w => w.isCalendar;\n/**\n * Feature that displays a popup containing fields for editing event data.\n *\n * To customize its contents you can:\n *\n * * Reconfigure built-in widgets by providing override configs in the {@link Scheduler.feature.base.EditBase#config-items} config.\n * * Change the date format of the date & time fields: {@link Scheduler.feature.base.EditBase#config-dateFormat} and {@link Scheduler.feature.base.EditBase#config-timeFormat}\n * * Configure provided fields in the editor and add your own in the {@link Scheduler.feature.base.EditBase#config-items} config.\n * * Remove fields related to recurring events configuration (such as `recurrenceCombo`) by setting {@link Scheduler.feature.mixin.RecurringEventEdit#config-showRecurringUI} config to `false`.\n * * Advanced: Reconfigure the whole editor widget using {@link Scheduler.feature.EventEdit#config-editorConfig}\n *\n * For more info on customizing the event editor, please see [Customize event editor](#Calendar/guides/customization/eventedit.md) guide.\n *\n * {@inlineexample Calendar/feature/EventEdit.js}\n *\n * This feature is **enabled** by default.\n *\n * @demo Calendar/eventedit\n *\n * @extends Scheduler/feature/EventEdit\n * @classtype eventEdit\n * @feature\n *\n * @typings Scheduler.feature.EventEdit -> Scheduler.feature.SchedulerEventEdit\n */\nexport default class EventEdit extends SchedulerEventEdit {\n static get $name() {\n return 'EventEdit';\n }\n static get type() {\n return 'eventEdit';\n }\n static get configurable() {\n return {\n editorConfig : {\n type : 'calendareventeditor',\n items : {\n resourceField : {\n label : 'L{Calendar}',\n showEventColor : true\n },\n allDay : {\n type : 'checkbox',\n cls : 'b-match-label',\n name : 'allDay',\n weight : 250,\n label : 'L{All day}',\n internalListeners : {\n change : 'up.onAllDayChange'\n }\n }\n }\n }\n };\n }\n construct(config) {\n // Legacy constructor signature\n super.construct(config.client, config);\n }\n async onDragCreateEnd({ eventRecord, resourceRecord }) {\n eventRecord._dragCreated = true;\n await this.editNewlyCreatedEvent(eventRecord, resourceRecord);\n eventRecord._dragCreated = null;\n }\n onEventAutoCreated({ eventRecord }) {\n this.editNewlyCreatedEvent(eventRecord);\n }\n editNewlyCreatedEvent(eventRecord, resourceRecord) {\n if (!this.disabled) {\n // The Drag feature adds the record so we must set the flag here.\n eventRecord.isCreating = true;\n // Implementations may be async, so the return value must always be propagated.\n // also, set the `stmCapture` argument to `false` do disable the STM capturing mechanism\n // calendar is performing its own handling\n return this.editEvent(eventRecord, resourceRecord, null, false);\n }\n }\n /**\n * Opens an editor for the passed event. This function is exposed on Calendar and can be called as\n * `calendar.editEvent()`.\n *\n * If the event is not present in the `eventStore`, the event will be added so that it becomes\n * visible in the UI. The editor will then shows a \"Cancel\" button which removes the event when\n * clicked to abort a \"New Event\" operation.\n * @method editEvent\n * @param {Scheduler.model.EventModel} eventRecord Event to edit\n * @param {Scheduler.model.ResourceModel} [resourceRecord] Not used. Inherited from Scheduler.\n * @param {HTMLElement} [element] Element to anchor editor to (defaults to events element)\n * @async\n * @on-owner\n */\n // editEvent is the single entry point in the base class.\n // Subclass implementations of the action may differ, so are implemented in doEditEvent\n async doEditEvent(eventRecord, resourceRecord, element) {\n const\n me = this,\n { client } = me,\n { eventStore } = client,\n { startDate, endDate } = eventRecord;\n // eventSource is the descendant view that is being interacted with.\n // See Calendar#onViewCatchAll\n // activeSubView is the lowest level active view in the currently visible view in the\n // card layout of the viewContainer.\n // eventSource might be a descendant of the activeView.\n let view = client.eventSource || client.activeSubView;\n // If we get this event from a Scheduler view, use superclass's edit process.\n if (view.isScheduler) {\n me.client = view;\n await super.doEditEvent(...arguments);\n me.client = client;\n return;\n }\n // If we get this event from a non-Calendar view, or the view is cell editing, ignore it.\n if (!view.isCalendarMixin || view.features?.cellEdit?.isEditing) {\n return;\n }\n if (eventRecord.startDate && eventRecord.endDate &&\n !DateHelper.intersectSpans(\n startDate,\n endDate,\n view.startDate,\n view.endDate)) {\n client.date = eventRecord.startDate;\n }\n // If we've created in a DayView, and we are editing an inter day event, the responsible\n // view is the DayView's alldayEvents row **if there is one, and it's being used**.\n if (view.allDayEvents && view.isAllDayEvent(eventRecord) && view.showAllDayHeader) {\n view = view.allDayEvents;\n }\n // Occurrences are *never* added to the eventStore, but any other event being edited,\n // make sure it's in and set the `isCreating` flag to show the Cancel UI.\n if (!eventRecord.isOccurrence) {\n let added;\n if (!eventStore.includes(eventRecord)) {\n eventStore.add(eventRecord);\n added = true;\n }\n if (added || eventRecord._dragCreated) {\n // We need the view to contain the event's element, not the drag-create proxy.\n // So wait for refresh for a max of 100ms, if the refresh has not triggered, force the issue.\n await view.afterRefresh({ forceRefresh : true });\n }\n }\n // Special handling if editing from an overflow popup\n const\n { _overflowPopup } = view,\n activeDate = view.getDateFromElement(element);\n // Get the element for the date into which the element was rendered.\n // AgendaView can render multiple elements for day-spanning events\n // so we must attach to the correct one.\n let fromOverflow = _overflowPopup?.isVisible,\n eventElement = fromOverflow ? _overflowPopup.getEventElement(eventRecord) : view.getEventElement(eventRecord, activeDate);\n if (fromOverflow) {\n if (eventElement) {\n fromOverflow = false;\n }\n else {\n eventElement = _overflowPopup.getEventElement(eventRecord);\n }\n }\n // Call Calendar template method\n if (eventRecord.isCreating) {\n client.onEventCreated?.(eventRecord);\n }\n // If called from eventlist\n if (!eventElement && view.isEventList) {\n eventElement = view?.rowManager?.getRowFor(eventRecord)?.element;\n }\n // This flag is meant to prevent scrolling the element into the view if we dragcreate event and scroll the\n // view in the process. If we're creating event, then check if event was already added. If event was not\n // created allow scrolling - we haven't dragcreated event and should try to scroll to the element\n const scrollingAllowed = (eventElement && !DomHelper.isInView(eventElement)) || !eventRecord.isCreating || !eventRecord._dragCreated;\n // If editing triggered from overflow popup, ensure that the eventElement is focused.\n if (fromOverflow) {\n eventElement.focus();\n }\n else if (eventElement) {\n if (scrollingAllowed) {\n // If we found a rendered element, ensure the top 100 px and full width is visible in all\n // scroll viewports.\n // Sometimes there are two encapsulating scroll elements, one for horizontal\n // and one for vertical. For example ResourceView with multiple dayViews.\n // Static scrollIntoView searches all ancestors.\n await Scroller.scrollIntoView(eventElement, {\n animate : true,\n focus : true,\n maxHeight : 100\n });\n }\n else {\n eventElement.focus({ preventScroll : true });\n }\n }\n // If no element found, then we have to ask the view to navigate in time to encompass that event\n else {\n // If it's a single day event on a hidden, non-working day, show it centered.\n // align : { target : true } means centered.\n if (!view.isAllDayEvent(eventRecord) && (!startDate || view.hiddenNonWorkingDays[startDate.getDay()])) {\n me.internalShowEditor(eventRecord, null, {\n target : true\n });\n return;\n }\n if (startDate && scrollingAllowed) {\n // Ensure we have an in-view element to align to - data change response is async.\n // scrollTo refreshes if the element is not present\n await view.scrollTo(eventRecord);\n }\n // scrollTo might have to refresh to create the target.\n eventElement = view.getEventElement(eventRecord);\n }\n // If event element is missing and we render days (month, year), try to align editor to the date\n if (!eventElement && !element && view.isDayCellRenderer) {\n eventElement = view.getCell(eventRecord.startDate);\n }\n me.internalShowEditor(eventRecord, null, {\n target : eventElement || element,\n allowTargetOut : view.isAnimating\n });\n // Only on first show do we ignore clipping.\n // If target is scrolled out of view, editor must hide.\n if (me.editor?.lastAlignSpec) {\n me.editor.lastAlignSpec.allowTargetOut = false;\n }\n }\n async onSaveClick() {\n const\n me = this,\n { eventRecord } = me,\n { isCreating } = eventRecord.meta;\n if (me.isValid) {\n eventRecord.isCreating = false;\n }\n // So that resetting editing context doesn't remove the record\n const saved = await super.onSaveClick(...arguments);\n if (isCreating && saved) {\n me.eventStore.added.add(eventRecord);\n if (!me.eventStore.usesSingleAssignment) {\n me.assignmentStore.added.add(eventRecord.assignments);\n }\n if (me.client.crudManager?.autoSync) {\n me.client.crudManager.scheduleAutoSync();\n }\n }\n }\n internalShowEditor() {\n const\n {\n client,\n editor,\n startTimeField,\n endTimeField\n } = this,\n calendar = client.closest(isCalendar) || client,\n autoCreate = calendar.activeView?.autoCreate ?? (calendar.autoCreate || client.constructor.configurable.autoCreate),\n step = autoCreate?.step,\n { activeSubView } = calendar,\n _overflowPopup = activeSubView?._overflowPopup;\n // In case the tooltip is visible, we must hide it.\n // This reverts focus so that we pick up focusIn from the event.\n (client.isSchedulerBase ? client.calendar : client).features.eventTooltip?._tooltip?.hide();\n // Always hook the closest owning widget as our owner because there may be intervening\n // focused widgets between the Calendar (our default), and us.\n // For example, the all day row of a DayView may show an OverflowPopup. We have\n // to be owned by the OverflowPopup so that our owner chain is correct.\n editor.owner = _overflowPopup?.isVisible ? _overflowPopup : activeSubView;\n if (super.internalShowEditor(...arguments) === false) {\n // Editing was vetoed\n editor.owner = editor.initialConfig.owner;\n return;\n }\n if (step) {\n startTimeField && (startTimeField.step = step);\n endTimeField && (endTimeField.step = step);\n }\n }\n // calendar drag/auto create is different enough from scheduler's, so we just override this method\n // to empty function to opt-out of the STM capture mechanism\n async finalizeStmCapture(saved) {\n }\n}\n// Register this feature type with its Factory\nCalendarFeature.register(EventEdit.type, EventEdit);\nEventEdit._$name = 'EventEdit';", "import CalendarFeature from './CalendarFeature.js';\nimport SchedulerEventMenu from '../../Scheduler/feature/EventMenu.js';\n/**\n * @module Calendar/feature/EventMenu\n */\nconst hasEventStore = w => w.eventStore;\n/**\n * A feature which shows a context menu when right-clicking events in the calendar.\n *\n * There are three predefined {@link #config-items} provided by default:\n *\n * - `deleteEvent` Delete the event clicked upon.\n * - `editEvent` Edit the event clicked upon __Only present if the {@link Calendar.feature.EventEdit}\n * feature is present__ (which it is by default).\n * - `duplicate` Duplicate the event clicked upon with the same time and duration, the same\n * resource(s) assigned and a slightly edited name - `\" + eventRecord.name + '
';\n * }\n * });\n * ```\n *\n * or\n *\n * ```javascript\n * new Calendar({\n * features : {\n * eventTooltip : {\n * renderer : 'up.getEventTip'\n * }\n * },\n * getEventTip : async function({ eventRecord }) {\n * // Use a web service which returns a JSON DomConfig block\n * const response = await fetch(`getEventTipContent?event=${eventRecord.id}`);\n * return response.json();\n * }\n * });\n * ```\n *\n * @config {Function|String}\n * @param {Object} context\n * @param {Scheduler.model.EventModel} context.eventRecord The event record which the tooltip is being shown for.\n * @param {Core.widget.Tooltip} context.tip The tooltip instance\n * @param {HTMLElement} context.element The Element for which the Tooltip is monitoring mouse movement\n * @param {HTMLElement} context.activeTarget The target element that triggered the show\n * @param {Event} context.event The raw DOM event\n * @returns {String|Promise|DomConfig}\n */\n renderer : null,\n /**\n * This config is used to directly configure the associated recurrence confirmation popup used\n * when a delete is requested.\n * @config {RecurrenceConfirmationPopupConfig}\n * @private\n */\n recurrenceConfirmation : {\n $config : ['lazy', 'nullify'],\n value : {\n type : 'recurrenceconfirmation'\n }\n },\n /**\n * By default, the end date of an all day event is displayed in the tooltip UI as\n * the last calendar date on which the event falls. For most end users, this is the\n * expected value.\n *\n * Technically, the {@link Scheduler.model.EventModel#field-endDate} is a timestamp\n * which represents the exact point in time at which an event ends. To use this instead,\n * configure `extendAllDayEndDay` as `true`.\n *\n * To be clear, this would mean that an {@link Scheduler.model.EventModel#field-allDay}\n * event starting and ending on the 7th of February 2020, would show the end date in the\n * tooltip as 8th of February 2020.\n * @config {Boolean}\n * @default false\n */\n extendAllDayEndDay : null,\n /**\n * Defines how to align the EventTooltip to its event.\n *\n * The value can be either a simple string or a full configuration object.\n *\n * When using a simple string, the format is `'[trblc]n-[trblc]n'` and it specifies tooltip edge and\n * the event edge plus optional offsets from 0 to 100 along the edges to align to. Also supports direction\n * independent edges horizontally, `s` for start and `e` for end (maps to `l` and `r` for LTR, `r` and `l`\n * for RTL).\n *\n * For more details about using the object form, see {@link Core.widget.Widget#function-showBy}.\n *\n * Once set, this is stored internally in object form.\n * @config {AlignSpec|String} align\n * @default 't-b'\n */\n align : null,\n /**\n * By default, if the tip's target event is in a cluster of overlapping events and therefore\n * narrow, activating the tip will expand it to full width temporarily.\n *\n * Configure this as `false` to disable this.\n * @prp {Boolean}\n * @default true\n */\n revealEventsInCluster : true,\n resources : null\n };\n }\n static get pluginConfig() {\n return {\n chain : ['render']\n };\n }\n // Because we insert ourself into the owner hierarchy, isVisible consults us\n get isVisible() {\n return true;\n }\n changeRecurrenceConfirmation(recurrenceConfirmation, existingInstance) {\n if (recurrenceConfirmation) {\n recurrenceConfirmation.rootElement = this.owner.rootElement;\n }\n return Widget.reconfigure(existingInstance, recurrenceConfirmation, {\n owner : this\n });\n }\n changeTooltip(config, existingInstance) {\n return Widget.reconfigure(existingInstance, config, {\n owner : this,\n setup : 'setupTooltip'\n });\n }\n setupTooltip(config) {\n const\n me = this,\n cfg = me.config;\n // Copy appropriate configs from this Feature into the tooltip.\n // We only pass them in if there are valid configs for this class, or they were in our configuration.\n Object.keys(cfg).forEach(k => {\n if (!ownConfigs[k] && (me.hasConfig(k) || (k in me.initialConfig))) {\n config[k] = cfg[k];\n }\n });\n return EventTip.mergeConfigs({\n ownerFeature : me,\n forElement : me.client.element,\n id : `${me.client.id}-event-tip`,\n // The Tooltip must activate on embedded widgets from other product families\n forSelector : me.showOn === 'hover' && '.b-cal-event-wrap,.b-sch-event-wrap,.b-gantt-task-wrap,.b-taskboard-card',\n resources : me.resources,\n disabled : me.disabled,\n internalListeners : {\n thisObj : me,\n delete : 'onDeleteClick',\n edit : 'onEditClick',\n pointerOver : 'onTipPointerOver'\n }\n }, config);\n }\n render() {\n const\n me = this,\n clientListeners = {\n eventsPerCellChange : 'onClientEventsPerCellChange',\n navigate : 'onClientNavigate',\n renderEvents : 'onRenderEvents',\n thisObj : me\n };\n if (me.showOn === 'hover') {\n // The tooltip needs to exist to take care of its own show/hide lifecycle if\n // we are configured to use the hover gesture.\n me.getConfig('tooltip');\n }\n else {\n // Some embedded widget from other product families use 'taskClick'\n clientListeners[`event${me.showOn}`] = clientListeners[`task${me.showOn}`] = 'onClientTooltipGesture';\n }\n me.client.ion(clientListeners);\n }\n get owner() {\n if (this.client.activeView._overflowPopup?.containsFocus) {\n return this.client.activeView.overflowPopup;\n }\n else {\n return this.client;\n }\n }\n //region Events\n addListener(...args) {\n // Add listener to the `tooltip` instance\n this.tooltip?.addListener(...args);\n }\n removeListener(...args) {\n // Remove listener from the `tooltip` instance\n this.tooltip?.removeListener(...args);\n }\n onEditClick() {\n const\n { client, activeClient, tooltip } = this,\n { overflowPopup } = activeClient,\n eventEdit = activeClient?.features?.eventEdit || client.features.eventEdit,\n fromPopup = overflowPopup?.element?.contains(tooltip.activeTarget),\n target = fromPopup ? overflowPopup.targetCell : tooltip.activeTarget;\n if (eventEdit && !eventEdit.disabled) {\n eventEdit.editEvent(this.eventRecord, null, target, false);\n tooltip.hide();\n }\n }\n onDeleteClick() {\n this.activeClient.calendar.removeEvents([this.eventRecord], () => this.tooltip?.hide(), this.tooltip);\n }\n onClientEventsPerCellChange() {\n // Overflow popup hides on this, so we must hide too.\n // Access the property directly so as not to create the tooltip.\n // We got here through a ResizeObserver so we must allow the notification to reach the\n // overflow popup before it hides to avoid the nonsensically fatal\n // \"ResizeObserver loop completed with undelivered notifications\" on FF.\n // Delayable.requestAnimationFrame uses itself as the thisObj,\n // so using the function reference will work.\n this._tooltip?.requestAnimationFrame(this._tooltip?.hide);\n }\n onClientNavigate(navEvent) {\n // Access the property directly so as not to create the tooltip\n const { _tooltip } = this;\n // If we are exiting the calendar or navigating to a new item that is not in the tooltip, hide the tooltip\n if (_tooltip?.activeTarget && (!this.owner.owns(navEvent.event) || (navEvent.item && navEvent.item !== _tooltip.activeTarget)) && !_tooltip.owns(navEvent.event?.relatedTarget)) {\n _tooltip.hide();\n }\n }\n onRenderEvents(e) {\n const { _tooltip } = this;\n // If the target element is no longer part of the activating view, hide the tooltip\n if (_tooltip?.activeTarget && !this.activeClient.element.contains(this.tooltip.activeTarget)) {\n _tooltip.hide();\n }\n }\n onClientTooltipGesture({ domEvent, event, eventElement, eventRecord, source : owningCalendarWidget }) {\n const { tooltip } = this;\n // Foreign objects (like a Scheduler) may not use \"domEvent\", so fallback to \"event\" if necessary:\n domEvent = domEvent || event;\n // Pass already known parts from the Widget gesture into onTipPointerOver\n if (this.onTipPointerOver({ event : domEvent, target : eventElement, eventRecord, owningCalendarWidget }) !== false) {\n // If the event is part of a cluster (overlaps others, and will expand)\n // and tooltip is aligned to the side, then delay the show to avoid a realign after expand.\n if (eventElement.classList.contains('b-cal-in-cluster') && parseAlign(tooltip.align.align).edgeAligned === 2) {\n tooltip.setTimeout({\n fn : 'showByEvent',\n args : [domEvent, eventElement],\n delay : 130\n });\n }\n else {\n // Handle products where the eventElement is passed as the \"inner\" instead of the wrap\n tooltip.showByEvent(domEvent, eventElement.closest('[data-event-id],[data-task-id]'));\n }\n }\n }\n onTipPointerOver({\n event,\n target,\n owningCalendarWidget,\n eventRecord\n }) {\n const { tooltip, client } = this;\n if (!owningCalendarWidget) {\n owningCalendarWidget = Widget.fromElement(target)?.closest(hasEventStore);\n }\n if (!eventRecord) {\n eventRecord = owningCalendarWidget.getEventRecord(target);\n }\n if (client.features?.eventEdit?.isEditing || client.activeView.features?.cellEdit?.isEditing) {\n return false;\n }\n // Embedded views from other products may be showing their own editors\n if (client.floatRoot.querySelector('.b-eventeditor,.b-taskeditor')) {\n return false;\n }\n if (owningCalendarWidget) {\n tooltip.triggeredByEvent = event;\n tooltip.activeTarget = target;\n this.activeClient = owningCalendarWidget;\n eventRecord = owningCalendarWidget.getEventRecord(target);\n /**\n * The event which the tooltip feature has been activated for.\n * @member {Scheduler.model.EventModel} eventRecord\n * @readonly\n */\n tooltip.eventRecord = this.eventRecord = eventRecord;\n }\n return eventRecord != null;\n }\n //endregion\n //region Internal\n updateDisabled(disabled, was) {\n super.updateDisabled(disabled, was);\n if (this._tooltip) {\n this._tooltip.disabled = disabled;\n }\n }\n //endregion\n}\n// Register this feature type with its Factory\nEventTooltip.initClass();\nEventTooltip._$name = 'EventTooltip';", "import Base from '../../Core/Base.js';\nimport CalendarFeature from './CalendarFeature.js';\nimport Draggable from '../../Core/mixin/Draggable.js';\nimport Droppable from '../../Core/mixin/Droppable.js';\nimport DateHelper from '../../Core/helper/DateHelper.js';\nimport DomHelper from '../../Core/helper/DomHelper.js';\nimport EventHelper from '../../Core/helper/EventHelper.js';\nimport Rectangle from '../../Core/helper/util/Rectangle.js';\nimport Delayable from '../../Core/mixin/Delayable.js';\nimport Widget from '../../Core/widget/Widget.js';\n/**\n * @module Calendar/feature/ExternalEventSource\n */\nconst oneHour = {\n magnitude : 1,\n unit : 'hour'\n};\nclass ExternalZone extends Base.mixin(Draggable, Droppable) {\n static get $name() {\n return 'ExternalZone';\n }\n static get configurable() {\n return {\n // Default to dragging grid rows\n dragItemSelector : '.b-grid-row',\n dragProxy : {\n type : 'default',\n open(drag) {\n // Use the Feature's openProxy\n const\n feature = this.owner.owner,\n proxyEl = feature.openProxy(drag);\n drag.cleaners.push(() => {\n feature.insertionPoint = null;\n proxyEl.remove();\n });\n return proxyEl;\n },\n dragMove(drag) {\n // Use the Feature's moveProxy\n return this.owner.owner.moveProxy(drag);\n },\n close() {\n this.owner.owner.proxyEl?.remove();\n }\n }\n };\n }\n beforeDrag(drag) {\n return this.owner.onDragStart(drag);\n }\n dragEnter(drag) {\n if (drag.source.isMoving) {\n drag.element = drag.targetElement;\n this.dragProxy.open(drag);\n }\n }\n dragMove(drag) {\n if (drag.source.isMoving) {\n this.dragProxy.dragMove(drag);\n }\n if (drag.source.isMoving || drag.source.isExternalZone) {\n return this.owner.onDragMove(drag);\n }\n }\n dragDrop(drag) {\n if (drag.source.isMoving) {\n this.dragProxy.close();\n }\n // Only react if we're dropping on our own ExternalZone.\n // If dropping on the Calendar, we listen to its beforeDragMoveEnd and dragMoveEnd events\n if (drag.target === this && (drag.source.isMoving || drag.source.isExternalZone)) {\n return this.owner.onDragDrop(drag);\n }\n }\n}\n/**\n * A Calendar feature which allows new events to be dragged into the Calendar from an external source.\n *\n * The default source type is a Bryntum {@link Grid.view.Grid grid} which is loaded with\n * {@link Scheduler.model.EventModel event records}.\n *\n * Optionally, the source can be specified by configuring a {@link #config-dragRootElement}\n * and a {@link #config-dragItemSelector} which together, identify elements which represent\n * draggable events.\n *\n * In this case, a {@link #config-getRecordFromElement} may be specified to yield the details of\n * the record to be dragged.\n *\n * In the simplest case the `textContent` of the identified element is used as the event name and\n * {@link #config-getRecordFromElement} is not required. The event duration in this case will be\n * that specified in the receiving Calendar's {@link Calendar.view.Calendar#config-autoCreate} setting.\n *\n * When dropping an unscheduled event (An event that has no start and end date specified) into\n * a day cell (For example a MonthView or YearView), the start *time* set within the day cell\n * will default to the `startHour` property of the receiving Calendar's {@link Calendar.view.Calendar#config-autoCreate} setting.\n *\n * This feature is **disabled** by default.\n *\n * {@inlineexample Calendar/feature/ExternalEventSource.js}\n *\n * @demo Calendar/dragfromgrid\n *\n * @extends Calendar/feature/CalendarFeature\n * @classtype externalEventSource\n * @feature\n */\nexport default class ExternalEventSource extends CalendarFeature.mixin(Delayable) {\n static get $name() {\n return 'ExternalEventSource';\n }\n static get delayable() {\n return {\n onCalendarPaint : 'raf'\n };\n }\n static get type() {\n return 'externalEventSource';\n }\n static get configurable() {\n return {\n /**\n * The grid, or `id` of a grid from which events are to be dragged.\n * @config {Grid.view.Grid|String}\n */\n grid : {\n $config : ['lazy'],\n value : null\n },\n /**\n * If not dragging from a grid, which is the default mode, then an element from which\n * dragging can take place must be supplied in the `dragRootElement` config.\n *\n * May also be specified as a selector which matches a unique element, or a simple element id.\n *\n * In this case a {@link #config-dragItemSelector} string, and {@link #config-getRecordFromElement}\n * function must be supplied to allow event records to be sourced from the element, for example:\n *\n * ```javascript\n * features : {\n * externalEventSource : {\n * dragRootElement : '#mySourceElementId',\n * dragItemSelector : '.my-item-class'\n * }\n * }```\n * @config {HTMLElement|String}\n */\n dragRootElement : null,\n /**\n * If not dragging from a grid, which is the default mode, then a selector which identifies\n * draggable elements within the {@link #config-dragRootElement}.\n *\n * In the simplest case, the identified element may contain simply a string which is used\n * as the event name, for example:\n *\n * ```javascript\n * features : {\n * externalEventSource : {\n * dragRootElement : '#mySourceElementId',\n * dragItemSelector : '.my-item-class'\n * }\n * }```\n * @config {String}\n */\n dragItemSelector : null,\n /**\n * If not dragging from a grid, which is the default mode, then a function which returns\n * an event record to drag from a passed element must be supplied.\n *\n * In this case a {@link #config-dragRootElement} and a {@link #config-dragItemSelector} string\n * may be supplied to allow event records to be sourced from the element.\n *\n * If the element identified by the {@link #config-dragItemSelector} just contains an event\n * name to create, this configuration is optional. A new event will be created by that name, for example:\n *\n * ```javascript\n * features : {\n * externalEventSource : {\n * dragRootElement : '#mySourceElementId',\n * dragItemSelector : '.my-item-class',\n * getRecordFromElement(element) {\n * // Return an object from which an EventModel can be created.\n * // Same format as loading an EventStore. { name : 'name', startDate: ''} etc\n * return myController.createRecordFromElement(element);\n * }\n * }\n * }```\n *\n * @config {Function|String}\n * @param {HTMLElement} element HTML element\n * @returns {Scheduler.model.EventModel|null}\n */\n getRecordFromElement : function(element) {\n const grid = this.grid || (this.grid = Widget.fromElement(element, 'grid'));\n if (grid) {\n return grid.getRecordFromElement(element);\n }\n // The simplest implementation is that the elements identified by\n // the selector yield the event name.\n return element.innerText;\n },\n /**\n * By default, the proxy shown when \"picking up\" the grid row is hidden\n * when dragging over the calendar because the {@link Calendar.feature.CalendarDrag}\n * feature automatically shows a drop position indicator which shows where the\n * proposed new event will be.\n * @config {Boolean}\n * @default\n */\n hideExternalProxy : true,\n /**\n * An object which overrides or augments the default configuration for the\n * {@link Core.mixin.Draggable} which handles picking up events.\n *\n * This is only necessary if there is no {@link #config-grid} specified.\n * @config {Object} [draggable]\n * @default\n */\n draggable : {\n $config : ['lazy'],\n value : {}\n },\n /**\n * An object which, if present, causes creation of a {@link Core.mixin.Droppable} which\n * handles dropping events *from* the Calendar into the external location.\n *\n * In the simplest configuration, configure this as `true`.\n *\n * __Important:__ when dropping on an external source, the record is _not_ removed\n * from the Calendar's `eventStore`. You will need to listen for the {@link #event-dropExternal} event.\n * @config {Object|Boolean} [droppable]\n * @default\n */\n droppable : {\n $config : ['lazy'],\n value : null\n },\n /**\n * Used when {@link #config-droppable} is used, and the external source is a Grid. This\n * allows us to track the over row to highlight the insertion point.\n * @private\n */\n insertionPoint : null\n };\n }\n // This is deferred to the next AF to allow the configured grid ID to be available\n onCalendarPaint({ source : calendar, firstPaint }) {\n // Ingestion of Draggable, and within that, grid is deferred until the host Calendar is painted\n if (firstPaint) {\n const {\n draggable = {},\n droppable = {}\n } = this,\n zone = new ExternalZone({\n view : this.grid,\n ...draggable,\n ...droppable\n });\n if (this._draggable) {\n this._draggable = zone;\n }\n if (this._droppable) {\n this._droppable = zone;\n }\n }\n // We neede to hook into the CalendarDrag's move ending events which are fired through the client.\n // We need to get in at that point so that we can veto the \"before\" event and fire our own\n // completion event after the event transfer has been completed.\n calendar.ion({\n beforeDragMoveEnd : 'onBeforeDragMoveEnd',\n dragMoveEnd : 'onDragMoveEnd',\n thisObj : this\n });\n }\n onBeforeDragMoveEnd({ drag }) {\n // A before drop on the Calendar. We only react if it is in fact an external drop.\n if (drag.source === this.draggable) {\n drag.dropOnCalendar = true;\n const\n gridStore = this.grid?.store,\n result = this.client.trigger('dropExternal', drag);\n // Handler may change state. If a chained store, it may need refilling\n gridStore?.isChained && gridStore.fillFromMaster();\n return result;\n }\n }\n onDragMoveEnd({ drag }) {\n // An after drop on the Calendar. We only react if it is in fact an external drop.\n if (drag.source === this.draggable) {\n return this.client.trigger('afterDropExternal', drag);\n }\n }\n onDragStart(drag) {\n const\n me = this,\n {\n client,\n grid\n } = me,\n { eventStore } = client,\n { modelClass } = eventStore;\n // If mousedown was not on our Draggable's dragItemSelector, veto drag start\n if (!drag.itemElement) {\n return false;\n }\n let eventRecord = me.callback(me.getRecordFromElement, me, [drag.itemElement]);\n if (eventRecord.isModel) {\n // CalendarDrag interrogates this to see if it should \"removeFromExternalStore\"\n if (grid) {\n drag.set('sourceStore', grid.store);\n }\n if (!eventRecord.isEventModel) {\n eventRecord = eventStore.createRecord(eventRecord.data);\n }\n }\n else {\n if (typeof eventRecord === 'string') {\n const\n autoCreate = client.activeView.autoCreate || client.autoCreate,\n duration = DateHelper.parseDuration(autoCreate?.duration || oneHour);\n eventRecord = {\n [modelClass.getFieldDataSource('name')] : eventRecord,\n [modelClass.getFieldDataSource('duration')] : duration.magnitude,\n [modelClass.getFieldDataSource('durationUnit')] : duration.unit\n };\n }\n eventRecord = eventStore.createRecord(eventRecord);\n }\n drag.set('sourceStore', me.grid?.store);\n drag.set('eventRecord', eventRecord);\n drag.eventRecord = eventRecord;\n }\n onDragMove(drag) {\n const { grid } = this;\n if (grid) {\n const\n row = grid.rowManager.getRowFor(drag.targetElement),\n record = row && grid.store.getAt(row.index);\n // If we over a row, that is *not* the row for the dragging record...\n if (row) {\n const isAbove = drag.lastMoveEvent.clientY < row.getRectangle(Object.keys(grid.subGrids)[0]).center.y;\n drag.overIndex = row.index;\n drag.overRecord = record;\n drag.isAbove = isAbove;\n this.insertionPoint = record === drag.peek('eventRecord') ? {} : { row, isAbove };\n }\n // If not over a row, see if we're dropping in free space after the bottom row (if present)\n // After the headerContainer if no rows present.\n else if (grid.contains(drag.targetElement)) {\n const hcCls = grid.headerContainer.classList;\n drag.overIndex = -1;\n this.insertionPoint = {\n row : grid.rowManager.bottomRow || {\n addCls : c => hcCls.add(c),\n removeCls : c => hcCls.remove(c)\n }\n };\n }\n // We've exited the Grid\n else {\n drag.overIndex = NaN;\n this.insertionPoint = null;\n }\n }\n drag.eventRecord = drag.data.get('eventRecord');\n /**\n * This event is fired on the owning Calendar when dragging an event from the calendar over the\n * external source __if the {@link #config-droppable} was configured__.\n *\n * __If a {@link #config-grid} was configured as the external source, a dropping\n * insertion point will be displayed in the grid__.\n *\n * If the external source is simply a set of HTML elements, your application must\n * process this gesture.\n * @event dragMoveExternal\n * @on-owner\n * @param {Scheduler.model.EventModel} eventRecord The event record being dragged.\n * @param {HTMLElement} itemElement The element in which the drag gesture started.\n * @param {HTMLElement} targetElement The current over element.\n * @param {Event} domEvent The pointer event associated with the drag point.\n * @param {Number} overIndex *If {@link #config-grid} was specified*, the index of the row\n * being moved over;\n * @param {Core.data.Model} overRecord *If {@link #config-grid} was specified*, the record\n * being moved over;\n * @param {Boolean} isAbove *If {@link #config-grid} was specified*, `true` if the pointer\n * position is above the halfway line of the over row.\n * @param {Boolean} altKey `true` if the Alt key was down when the last event was processed.\n * @param {Boolean} ctrlKey `true` if the Ctrl key was down when the last event was processed.\n * @param {Boolean} metaKey `true` if the Meta key was down when the last event was processed.\n * @param {Boolean} shiftKey `true` if the Shift key was down when the last event was processed.\n */\n this.client.trigger('dragMoveExternal', drag);\n }\n changeInsertionPoint(ip, was) {\n if (ip?.row !== was?.row || ip?.isAbove !== was?.isAbove) {\n return ip;\n }\n }\n updateInsertionPoint(ip, was) {\n was?.row?.removeCls(was.isAbove ? 'b-drop-above' : 'b-drop-below');\n ip?.row?.addCls(ip.isAbove ? 'b-drop-above' : 'b-drop-below');\n }\n async onDragDrop(drag) {\n const\n {\n client,\n grid\n } = this,\n { eventStore } = client,\n { eventRecord } = drag,\n gridStore = grid?.store,\n sameStore = gridStore === eventStore || gridStore?.masterStore === eventStore;\n /**\n * This event is fired on the owning Calendar when dropping an event from the calendar on the\n * external source __if the {@link #config-droppable} was configured__. Returning `false`\n * prevents the gesture from being completed.\n *\n * __If a {@link #config-grid} was configured as the external source, the record will be\n * removed from the Calendar's event store and inserted to the grid's store__.\n *\n * If the external source is simply a set of HTML elements, your application must\n * process this gesture.\n * @event dropExternal\n * @preventable\n * @on-owner\n * @param {Scheduler.model.EventModel} eventRecord The event record being dragged.\n * @param {Boolean} dropOnCalendar `true` if the drop gesture is over the client Calendar.\n * This feature also allows drag *out* of the Calendar and onto the external event source\n * if the {@link #config-droppable} config is set.\n * @param {HTMLElement} itemElement The element in which the drag gesture started.\n * @param {HTMLElement} targetElement The current over element.\n * @param {Event} domEvent The pointer event associated with the drag point.\n * @param {Number} overIndex *If {@link #config-grid} was specified*, the index of the row\n * being moved over;\n * @param {Core.data.Model} overRecord *If {@link #config-grid} was specified*, the record\n * being moved over;\n * @param {Boolean} isAbove *If {@link #config-grid} was specified*, `true` if the pointer\n * position is above the halfway line of the over row.\n * @param {Boolean} altKey `true` if the Alt key was down when the last event was processed.\n * @param {Boolean} ctrlKey `true` if the Ctrl key was down when the last event was processed.\n * @param {Boolean} metaKey `true` if the Meta key was down when the last event was processed.\n * @param {Boolean} shiftKey `true` if the Shift key was down when the last event was processed.\n */\n if (client.trigger('dropExternal', drag) === false) {\n // Handler may change state. If a chained store, it may need refilling\n gridStore?.isChained && gridStore.fillFromMaster();\n return;\n }\n // It is a drop on an external Grid\n if (!isNaN(drag.overIndex)) {\n // The event is being dragged out from the Calendar's eventStore\n // and our store is *not* based on the Calendar's eventStore.\n // If the source view is a resource-specific view, this gesture is\n // just a deassign, so only remove if the source view is not resource-specific.\n if (eventStore.includes(eventRecord) && !sameStore && !drag.source.view.resource) {\n eventStore.remove(eventRecord);\n }\n // The source store is chained off the main calendar eventStore.\n // In this case (Assuming the dropExternal handler set the record state to change its\n // filtered in/out status), this is a move event.\n if (sameStore) {\n eventStore.move(eventRecord, eventStore.getAt(drag.overIndex + drag.isAbove ? 1 : 0));\n }\n else {\n gridStore.insert(drag.overIndex + (drag.isAbove ? 0 : 1), eventRecord);\n }\n gridStore?.isChained && gridStore.fillFromMaster();\n }\n client.trigger('afterDropExternal', drag);\n }\n openProxy(drag) {\n const\n { grid } = this,\n sourceEl = drag.element.closest(this.draggable.dragItemSelector) || drag.element,\n nameCell = grid ? sourceEl.querySelector('[data-column=\"name\"]') : sourceEl,\n proxyEl = this.proxyEl || (this.proxyEl = DomHelper.createElement({\n className : 'b-grid-to-cal-drag-proxy'\n }));\n proxyEl.innerHTML = drag.peek('eventRecord')?.name || nameCell?.innerHTML || this.owner.L('newEvent');\n this.proxyOffset = EventHelper.getClientPoint(drag.event).getDelta(Rectangle.from(sourceEl));\n (grid?.element || this.dragRootElement).parentNode.appendChild(proxyEl);\n return proxyEl;\n }\n moveProxy(drag) {\n const { proxyEl } = this;\n if (proxyEl) {\n // Hide the proxy if the target droppable is a Calendar and we are configured to do so\n if (this.client.owns(drag.targetElement) && this.hideExternalProxy) {\n proxyEl.classList.add('b-hide-display');\n }\n else {\n // Align the proxy to [10, 10] from the pointer\n proxyEl.classList.remove('b-hide-display');\n DomHelper.alignTo(proxyEl, EventHelper.getClientPoint(drag.event).translate(10, 10), {\n align : 't0-t0'\n });\n }\n }\n }\n changeDragRootElement(dragRootElement) {\n if (typeof dragRootElement === 'string') {\n dragRootElement = document.querySelector(dragRootElement) || document.getElementById(dragRootElement);\n }\n return dragRootElement;\n }\n changeDraggable(draggable) {\n const\n { grid } = this,\n dragRootElement = grid?.contentElement || this.dragRootElement,\n { dragItemSelector } = this;\n draggable = ExternalEventSource.mergeConfigs({\n owner : this,\n grid\n }, draggable);\n if (dragRootElement) {\n draggable.dragRootElement = dragRootElement;\n }\n if (dragItemSelector) {\n draggable.dragItemSelector = dragItemSelector;\n }\n return draggable;\n }\n changeDroppable(droppable) {\n const\n { grid } = this,\n dropRootElement = grid?.contentElement || this.dropRootElement;\n if (droppable) {\n droppable = ExternalEventSource.mergeConfigs({\n owner : this,\n grid\n }, droppable);\n if (dropRootElement) {\n droppable.dropRootElement = dropRootElement;\n }\n }\n return droppable;\n }\n changeGrid(grid) {\n if (typeof grid === 'string') {\n grid = Widget.getById(grid);\n }\n return grid;\n }\n}\nExternalEventSource.initClass();\nExternalEventSource._$name = 'ExternalEventSource';", "import CalendarFeature from './CalendarFeature.js';\nimport DateHelper from '../../Core/helper/DateHelper.js';\nimport DomHelper from '../../Core/helper/DomHelper.js';\nimport MessageDialog from '../../Core/widget/MessageDialog.js';\n/**\n * @module Calendar/feature/LoadOnDemand\n */\n/**\n * Loads the host Calendar's {@link Scheduler.view.mixin.SchedulerStores#config-crudManager CrudManager} on demand\n * as the date range required to produce the UI changes.\n *\n * Passes the requested `startDate` and `endDate` as extra HTTP parameters along with the load request.\n *\n * By default, the HTTP parameters are called `'startDate'` and `'endDate'`. This is configurable using the\n * {@link #config-startDateParamName} and {@link #config-endDateParamName} configs.\n *\n * The date values are formatted according to the {@link #config-dateFormat} config.\n *\n * Usage:\n *\n * ```javascript\n * new Calendar({\n * features : {\n * loadOnDemand : true\n * }\n * });\n * ```\n *\n * ## Using recurring events\n * When using this feature when recurring events are in the database, *all recurring events* which\n * started before the requested start date, and have not yet finished recurring MUST be sent as part\n * of the return packet so that the Calendar is able to populate its UI.\n *\n * Only the base recurring event *definition* is stored in the Calendar's EventStore.\n *\n * When asked to yield a set of events for a certain date range for creating a UI, the EventStore\n * *automatically* interpolates any occurrences of recurring events into the results. They do not\n * occupy slots in the EventStore for every date in their repetition range (that would be very\n * inefficient, and *might* be infinite).\n *\n * ## Handling data load failures\n * If a network or server error is detected, the {@link Calendar.view.Calendar} will fire a\n * {@link #event-loadOnDemandFail} event so that an application can produce an error UI and\n * handle the situation.\n *\n * A handler should return `false` to prevent the default provided error UI from showing.\n *\n * If there is no handler, or the handler __does not__ return `false`, a default error UI is\n * shown using `{@link Core.widget.MessageDialog#function-alert MessageDialog}`.\n *\n * ## Using with `showEvents` in the sidebar date picker.\n * If you have configured the Calendar's {@link Calendar.view.Calendar#config-datePicker} to\n * {@link Calendar.widget.CalendarDatePicker#config-showEvents}, the date picker will also\n * initiate a request whenever it navigates forward or backward in time.\n *\n * This could interfere with the current Calendar `mode`, so in this case, this feature extends\n * the requested date range to include the date range which encapsulates both widgets' required\n * ranges.\n *\n * This __may__ mean that a large block of events could be loaded if the date picker is navigated\n * in time a long way while leaving the Calendar's main view date the same.\n *\n * The {@link #config-alwaysLoadNewRange} property must not be set in this use case because *both*\n * widgets will initiate requests, and this would cause an infinite recursion of event requests.\n *\n * This feature is **disabled** by default.\n *\n * @extends Calendar/feature/CalendarFeature\n * @classtype loadOnDemand\n * @feature\n */\nexport default class LoadOnDemand extends CalendarFeature {\n static $name = 'LoadOnDemand';\n static type = 'loadOnDemand';\n static get configurable() {\n return {\n /**\n * The name of the HTTP parameter which contains the start date of the view requiring new data.\n * @config {String}\n * @default\n */\n startDateParamName : 'startDate',\n /**\n * The name of the HTTP parameter which contains the end date of the view requiring new data.\n * @config {String}\n * @default\n */\n endDateParamName : 'endDate',\n /**\n * The {@link Core.helper.DateHelper#function-format-static DateHelper} format string to use to\n * encode the start date and end date of the events to load when the view requires a new date range.\n * @config {String}\n * @default\n */\n dateFormat : 'YYYY-MM-DD',\n /**\n * A function, or name of a function in the ownership hierarchy which may be called\n * to mutate the `options` packet that is passed to the {@link Scheduler.data.CrudManager}\n * {@link Scheduler.crud.AbstractCrudManagerMixin#function-load} method.\n * One possible use of this function is to mutate the `options.request.params` object to add extra\n * parameters for the server.\n *\n * @config {Function|String}\n * @param {Object} options The `options` parameter to be sent to the {@link Scheduler.data.CrudManager}\n * {@link Scheduler.crud.AbstractCrudManagerMixin#function-load} method.\n * @param {Object} options.dateRangeRequested An object containing the start and end dates of the range to load.\n * @param {Date} options.dateRangeRequested.startDate The start date of the range to request.\n * @param {Date} options.dateRangeRequested.endDate The end date of the range to request. **Note that Dates are timestamps**.\n * @param {Object} options.request A configuration object for the CrudManager load request\n * @param {Object} options.request.params An object where the property name is the HTTP parameter name and the property value is the parameter value.\n * @returns {void}\n */\n beforeRequest : null,\n /**\n * By default, if a view requests a date range that we have already loaded, no\n * network request is made, and the events will be loaded from the current content\n * of the event store.\n *\n * To make the feature load a new event block on every request for a __new__ date range,\n * configure this as `true`.\n * @config {Boolean}\n * @default false\n */\n alwaysLoadNewRange : null,\n /**\n * Configure this as `true` to clear the event store when a new date range has been requested\n * instead of leaving it until the load of the new data to correct the store contents,\n *\n * Setting this to true clears the event store prior to requesting the data load.\n * @config {Boolean}\n * @default false\n */\n clearOnNewRange : null\n };\n }\n construct(config) {\n const { client } = config;\n // The purpose of this feature is to load fresh data, so it should not use syncDataOnLoad.\n // This can be automatically set by framework wrapper, so we must ensure it is false.\n client.eventStore.syncDataOnLoad = false;\n // When the client requests a range of dates from its eventStore, we get notified.\n // If the eventStore has not successfully loaded that range, we load that range.\n client.ion({\n dateRangeRequested : 'onClientDateRangeRequested',\n thisObj : this\n });\n // This to register the date range that the operation just successfully loaded.\n // We register the loaded date range *before* the response is applied so that\n // when UI requests which emanate from the impending application of the new dataset\n // ask for date ranges requests, the range will be detected as already present.\n client.crudManager.ion({\n beforeLoadApply : 'onCrudManagerBeforeApply',\n thisObj : this,\n prio : 9999\n });\n super.construct(...arguments);\n }\n // Tests if the CrudManager has an outstanding load request which would satisfy the passed date range\n hasOutstandingLoadFor(startDate, endDate) {\n const { load } = this.client.crudManager.activeRequests;\n if (load) {\n const otherDateRangeRequested = load.options?.dateRangeRequested;\n // If the outstanding load request encompasses ours, allow it to go through\n // We do not need to do anything.\n if (otherDateRangeRequested && DateHelper.timeSpanContains(\n otherDateRangeRequested.startDate,\n otherDateRangeRequested.endDate,\n startDate,\n endDate\n )) {\n return true;\n }\n }\n }\n // We observe our CrudManager's successful loads and register the date range requested.\n // This is so that when a client dateRangeChange event is encountered, we can only\n // trigger a load if the date range is not already loaded unless alwaysLoadNewRange is set..\n onCrudManagerBeforeApply({ response, options }) {\n // If it was a full load from a mode which doesn't know about this feature such as\n // a Scheduler, that will have requested an unranged load and the last range loaded\n // will be unknown. In this case the next request will *always* trigger a load.\n this.lastRangeLoaded = response.success && options?.dateRangeRequested;\n }\n onClientDateRangeRequested({\n new : {\n startDate,\n endDate\n },\n changed\n }) {\n const\n me = this,\n { client } = me;\n // alwaysLoadNewRange is only valid for responding to *new* date range requests.\n // Otherwise it responds even if the request was satisfied, and an infinite\n // load->refresh->getEvents->rangeRequested->load loop would occur.\n if (!changed && me.alwaysLoadNewRange) {\n return;\n }\n const { lastRangeLoaded } = me;\n // Check for whether we have already loaded the requested range unless we are configured to always load.\n if (lastRangeLoaded && !me.alwaysLoadNewRange) {\n const {\n startDate : lastStartDate,\n endDate : lastEndDate\n } = me.lastRangeLoaded;\n // Our loaded range already contains this range\n if (DateHelper.timeSpanContains(lastStartDate, lastEndDate, startDate, endDate)) {\n return;\n }\n }\n // Setting to clear the store down on range change.\n // Long running events from one month will show up in the next month.\n // Set this to clear the store. Of course the same events will only get loaded again\n // because they are long running and intrude into the new month but\n // this is a cosmetic issue for app developers to choose.\n if (changed) {\n DomHelper.addTemporaryClass(client.element, 'b-notransition', 100, client);\n if (me.clearOnNewRange) {\n client.eventStore.clear(true);\n me.lastRangeLoaded = null;\n }\n }\n if (!me.disabled && !me.hasOutstandingLoadFor(startDate, endDate)) {\n // Register the range that the view needs.\n // All requested date ranged will be merged into one load\n me.loadDateRange(startDate, endDate);\n }\n }\n /**\n * Reloads the currently loaded date range.\n *\n * If your app detects that the data may be stale, or needs to periodically refresh the data,\n * this method may be used to issue a server request to reload the currently loaded date range.\n */\n refresh() {\n const { lastRangeLoaded } = this;\n if (lastRangeLoaded) {\n this.loadDateRange(lastRangeLoaded.startDate, lastRangeLoaded.endDate);\n }\n }\n loadDateRange(startDate, endDate) {\n const\n me = this,\n {\n pendingLoad,\n client\n } = me,\n { datePicker } = client;\n // If there's a DatePicker which is showing events, the requested date range must\n // encapsulate both the DatePicker's demands and the activeView's demands.\n if (datePicker?.showEvents) {\n const { activeView } = client;\n startDate = new Date(Math.min(activeView.startDate, datePicker.startDate));\n endDate = new Date(Math.max(activeView.endDate, datePicker.endDate));\n }\n // We gather the widest date range that is asked for, and the final range\n // is requested in the next time frame.\n if (pendingLoad) {\n pendingLoad.startDate = DateHelper.min(startDate, pendingLoad.startDate);\n pendingLoad.endDate = DateHelper.max(endDate, pendingLoad.endDate);\n }\n else {\n me.pendingLoad = {\n startDate,\n endDate\n };\n me.client.requestAnimationFrame(() => me.load());\n }\n }\n async load() {\n const\n me = this,\n {\n client,\n beforeRequest,\n dateFormat\n } = me,\n {\n crudManager\n } = client,\n {\n load\n } = crudManager.activeRequests,\n {\n startDate,\n endDate\n } = me.pendingLoad;\n const options = {\n dateRangeRequested : me.pendingLoad,\n request : {\n params : {\n [me.startDateParamName] : DateHelper.format(startDate, dateFormat),\n [me.endDateParamName] : DateHelper.format(endDate, dateFormat)\n }\n }\n };\n // Ensure that subsequent loadDateRange requests queue up.\n me.pendingLoad = null;\n // allow app developers to mutate the request\n if (beforeRequest) {\n me.callback(beforeRequest, client, [options]);\n }\n if (load) {\n // If there is already a load request in flight which would satisfy the date range\n // Alow it to go through.\n if (me.hasOutstandingLoadFor(startDate, endDate)) {\n return;\n }\n try {\n await crudManager.cancelRequest(load.desc, load.reject);\n }\n catch (e) {\n // swallow rejected load Promise exception\n }\n }\n let result;\n try {\n result = await crudManager.load(options);\n }\n catch (e) {\n /**\n * Fires when the {@link Calendar.feature.LoadOnDemand} feature detects that a request\n * for data from the server has failed.\n *\n * An event listener handler may produce an error UI.\n *\n * If no handler returns `false`, then a default error UI is shown\n * using `{@link Core.widget.MessageDialog#function-alert MessageDialog}`.\n * @event loadOnDemandFail\n * @param {Response} rawResponse The HTTP `fetch` response object.\n * @param {Object} request The CrudManager load data block.\n * @param {Object} response The decoded JSON response.\n * @on-owner\n */\n if (!client.isDestroyed && !e.cancelled && client.trigger('loadOnDemandFail', e) !== false) {\n MessageDialog.alert({\n title : client.L('L{Calendar.loadFail}'),\n message : e.message\n });\n }\n }\n /**\n * Fires when the {@link Calendar.feature.LoadOnDemand} feature has loaded a range of events.\n * @event dateRangeLoad\n * @param {Object} response The decoded JSON response.\n * @param {Object} options The options object passed into the CrudManager {@link Scheduler.data.CrudManager}\n * {@link Scheduler.crud.AbstractCrudManagerMixin#function-load} method.\n * @param {Date} startDate The start date of the range to request.\n * @param {Date} endDate The end date of the range to request. **Note that Dates are timestamps**.\n * @on-owner\n */\n (result && !client.isDestroyed) && client.trigger('dateRangeLoad', { response : result.response, options, startDate, endDate });\n }\n}\n// Register this feature type with its Factory\nLoadOnDemand.initClass();\nLoadOnDemand._$name = 'LoadOnDemand';", "import Exporter from '../../../../Grid/feature/export/exporter/Exporter.js';\nimport TemplateHelper from '../../../../Core/helper/TemplateHelper.js';\nimport Widget from '../../../../Core/widget/Widget.js';\nimport BrowserHelper from '../../../../Core/helper/BrowserHelper.js';\n/**\n * @module Calendar/feature/print/printer/Printer\n */\n/**\n * Base class for all printers\n * @extends Grid/feature/export/exporter/Exporter\n * @internal\n */\nexport default class Printer extends Exporter {\n restoreState({ client }) {}\n saveState({ client }) {}\n cloneElement(element, target = this.element, clear = true) {\n if (clear) {\n target.innerHTML = '';\n }\n target.appendChild(element.cloneNode(true));\n }\n /**\n * Template of an extracted page.\n * @param {Object} data Data for the page template\n * @returns {String}\n */\n pageTpl(data) {\n const\n {\n config,\n title,\n header,\n footer,\n styles,\n htmlClasses,\n bodyStyle,\n bodyClasses = [`b-${this.constructor.type}`, ...this.owner.bodyClasses, ...Widget.outerCls],\n paperHeight,\n paperWidth,\n html\n } = data,\n // Safari's print returns immediately, so we can't immediately remove the window.\n // It is removed if ever needed again.\n afterPrint = BrowserHelper.isSafari ? '' : 'window.removeElement && window.removeElement();',\n // Don't run print script in debug mode\n script = !config?.debug ? `` : '';\n return TemplateHelper.tpl`\n \n \n \n \n \n ${header && `
\n ${script}\n \n `;\n }\n}\nPrinter._$name = 'Printer';", "import Printer from './Printer.js';\nimport { PaperFormat } from '../../../../Grid/feature/export/Utils.js';\n/**\n * @module Calendar/feature/print/printer/CalendarPrinter\n */\nconst bigNumberProperty = {\n configurable : true,\n get : () => Number.MAX_SAFE_INTEGER\n};\n/**\n * Helper class for the Calendar print feature.\n * @private\n */\nexport default class CalendarPrinter extends Printer {\n static get $name() {\n return 'CalendarPrinter';\n }\n static get type() {\n return 'calendar';\n }\n getTotalHeight(client) {\n const { activeView } = client;\n switch (client.mode) {\n case 'agenda':\n return activeView.virtualScrollHeight;\n case 'day' :\n return activeView.dayContentElement.scrollHeight + activeView.alldayRowElement.offsetHeight;\n case 'week':\n return activeView.dayContentElement.scrollHeight + activeView.alldayRowElement.offsetHeight;\n case 'month':\n // Duplicating screen week row heights exactly.\n if (this.owner.wysiwyg) {\n return activeView.weeksElement.scrollHeight + activeView.weekdaysHeader.offsetHeight + 10;\n }\n // If we're not doing wysiwyg, total height is set during content cloning.\n break;\n case 'year' :\n return this.inchToPx(PaperFormat.A4.width);\n }\n }\n getTotalWidth(client) {\n switch (client.mode) {\n case 'year' :\n return this.inchToPx(PaperFormat.A4.height);\n default:\n return this.inchToPx(PaperFormat.A4.width);\n }\n }\n async prepareComponent(config) {\n const\n me = this,\n { owner } = me,\n { wysiwyg } = owner,\n shrinkwrapRowHeights = !wysiwyg,\n { client } = config,\n { activeView } = client;\n me.exportMeta = {\n title : owner.callback(owner.titleRenderer, owner, [activeView]),\n totalWidth : me.getTotalWidth(client),\n totalHeight : me.getTotalHeight(client),\n subGrids : {}\n };\n if (client.mode === 'month' && shrinkwrapRowHeights) {\n Object.defineProperty(activeView, 'eventsPerCell', bigNumberProperty);\n // Refresh with eventsPerCell at a Very Large Number so that all are rendered\n // since we are shrinkwrapping the week rows.\n activeView.doRefresh();\n }\n me.cloneElement(activeView.currentElement);\n if (client.mode === 'month') {\n let rowHeights;\n // Measure the row heights based upon the number of rendered events (which will be all for that day)\n // and the event height.\n if (shrinkwrapRowHeights) {\n rowHeights = activeView.shrinkwrapRowHeights;\n delete activeView.eventsPerCell;\n activeView.doRefresh();\n // Total exported height must be all calculated heights\n me.exportMeta.totalHeight = activeView.weekdaysHeader.offsetHeight + rowHeights.reduce((sum, r) => {\n return sum + r;\n }, 5);\n }\n activeView.weekElements.forEach((el, i) => {\n const clonedElement = me.element.querySelector(`[data-week=\"${el.dataset.week}\"]`);\n clonedElement.style.minHeight = '';\n if (shrinkwrapRowHeights) {\n clonedElement.style.flex = `0 0 ${rowHeights[i]}px`;\n }\n else if (wysiwyg) {\n clonedElement.style.flex = `1 0 ${el.offsetHeight}px`;\n }\n else {\n clonedElement.style.flex = `1 0 ${250 / 6}mm`;\n }\n });\n }\n }\n pxToInch(value) {\n return (value / 96).toFixed(2);\n }\n}\n// HACK: terser/obfuscator doesn't yet support async generators, when processing code it converts async generator to regular async\n// function.\nCalendarPrinter.prototype.pagesExtractor = async function * pagesExtractor(config) {\n const\n me = this,\n {\n totalHeight,\n totalWidth,\n title\n } = me.exportMeta;\n yield {\n html : me.pageTpl({\n config,\n title,\n html : me.prepareExportElement(),\n styles : me.stylesheets,\n paperWidth : me.pxToInch(totalWidth),\n paperHeight : me.pxToInch(totalHeight)\n })\n };\n};\nCalendarPrinter._$name = 'CalendarPrinter';", "import CalendarFeature from '../CalendarFeature.js';\nimport CalendarPrinter from './printer/CalendarPrinter.js';\nimport ObjectHelper from '../../../Core/helper/ObjectHelper.js';\nimport DomHelper from '../../../Core/helper/DomHelper.js';\nimport '../../../Grid/feature/export/Print.js';\n/**\n * @module Calendar/feature/print/Print\n */\nconst emptyArray = Object.freeze([]);\n/**\n * This feature enables printing of the current Calendar mode.\n *\n * ## Usage\n *\n * ```javascript\n * const calendar = new Calendar({\n * features : {\n * print : true\n * }\n * });\n *\n * // Simple print\n * calendar.print();\n * ```\n *\n * This feature is **disabled** by default.\n *\n * @demo Calendar/basic\n * @classtype print\n * @feature\n * @typings Grid.feature.export.Print -> Grid.feature.export.GridPrint\n * @typings Scheduler.feature.export.Print -> Scheduler.feature.export.SchedulerPrint\n */\nexport default class Print extends CalendarFeature {\n static get $name() {\n return 'Print';\n }\n static get type() {\n return 'print';\n }\n static get configurable() {\n return {\n /**\n * Config for printer.\n * @config {Object}\n * @private\n */\n printer : {\n $config : ['lazy', 'nullify'],\n value : {\n type : 'calendar'\n }\n },\n /**\n * By default, a {@link Calendar.widget.MonthView} is rendered with the week rows\n * shrinkwrapping their event content. That is, rows with no events are small, and rows\n * containing events are expanded to make all events visible.\n *\n * To duplicate the on-screen appearance in terms of week row heights where empty rows\n * are flexed to consume an equal amount of height, configure this as `true`.\n * @config {Boolean}\n * @default\n */\n wysiwyg : false,\n /**\n * The function to use to create the [<title>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) element for the print document.\n * Defaults to using the {@link Scheduler.view.mixin.Describable#config-descriptionRenderer}\n * of the active view. Note that this does not process HTML source.\n *\n * @config {Function|String}\n * @param {Calendar.widget.mixin.CalendarMixin} source The view which triggered the event.\n * @typings source -> {typeof CalendarMixin}\n * @returns {String}\n * @default\n */\n titleRenderer : activeView => activeView.description,\n /**\n * Map of printer classes to use in print feature\n * @config {Map}\n * @private\n * @default\n */\n printers : new Map([[CalendarPrinter.type, CalendarPrinter]]),\n /**\n * This config is passed to the Grid print feature. Print dialog is ignored, instead Grid is printed with\n * best default configs.\n * @config {Object}\n * @private\n */\n gridPrintConfig : null\n };\n }\n construct() {\n super.construct(...arguments);\n this.client.print = this.print.bind(this);\n }\n changePrinter(config) {\n const\n me = this,\n printersMap = me.printersMap || (me.printersMap = new Map());\n if (config) {\n let printer;\n const { type } = config;\n if (printersMap.has(type)) {\n printer = printersMap.get(type);\n printer.setConfig(config);\n }\n else {\n const printerClass = me.printers.get(type);\n if (!printerClass) {\n throw new Error(`Printer type ${type} is not found. Make sure you've configured it`);\n }\n config = ObjectHelper.clone(config);\n config.owner = me;\n printer = new printerClass(config);\n printer.relayAll(me);\n printersMap.set(type, printer);\n }\n return printer;\n }\n else {\n printersMap.forEach(printer => printer.destroy());\n }\n }\n get bodyClasses() {\n if (this.shrinkwrapRowHeights) {\n return ['b-shrinkwrap-row-heights'];\n }\n return emptyArray;\n }\n /**\n * Prints the current active view of the Calendar\n * @privateparam config A config object for the Printer\n */\n async print(config = {}) {\n const\n me = this,\n {\n client,\n printer\n } = me,\n iframeId = `${client.id}-print-iframe`;\n /**\n * Fires on the owning Calendar before print starts. Return `false` to cancel the print.\n * @event beforePrint\n * @on-owner\n * @preventable\n * @param {Object} config Print config\n */\n if (client.trigger('beforePrint', { config, printer }) !== false) {\n if (client.activeView.isEventList) {\n await client.activeView.print(ObjectHelper.assign({\n exporterType : 'multipagevertical',\n useRenderedColumnWidth : true\n }, this.gridPrintConfig || {}));\n client.trigger('print');\n }\n else {\n config.client = client;\n const pages = await me.printer.export(config);\n if (config.debug) {\n client.trigger('print', pages);\n }\n else {\n // Remove existing iframe if it's there.\n // Safari can't wait until after print has finished, so it does not remove iframe after print\n document.getElementById(iframeId)?.remove();\n const iframe = DomHelper.createElement({\n id : iframeId,\n class : 'b-calendar-print-iframe',\n tag : 'iframe',\n parent : document.body\n });\n iframe.contentWindow.removeElement = () => {\n iframe.remove();\n /**\n * Fires when print has finished\n * @event print\n */\n client.trigger('print', pages);\n };\n iframe.contentWindow.document.write(pages[0].html);\n iframe.contentWindow.document.close();\n return pages;\n }\n }\n }\n }\n}\nPrint.initClass();\nPrint._$name = 'Print';", "import CalendarFeature from './CalendarFeature.js';\nimport SchedulerScheduleMenu from '../../Scheduler/feature/ScheduleMenu.js';\n/**\n * @module Calendar/feature/ScheduleMenu\n */\n/**\n * A feature which adds a context menu to the unoccupied parts of calendar views.\n *\n * There is one predefined {@link #config-items item} provided by default:\n *\n * - `addEvent` Adds an event at the time point indicated by the click\n *\n * If the timepoint has only date-level granularity (Such as when clicking in a MonthView or\n * AgendaView, or YearView), the start time of the event will default to the configured\n * {@link Calendar.view.Calendar#config-autoCreate}'s `startHour` property.\n *\n * If the {@link Calendar.feature.EventEdit EventEdit} feature is enabled, the new event is passed for editing.\n *\n * {@inlineexample Calendar/feature/ScheduleMenu.js}\n *\n * The {@link #config-items} set can be reconfigured by providing an `items` property to this feature:\n *\n *```javascript\n * features : {\n * scheduleMenu : {\n * items : {\n * // Knocks out the predefined addEvent item\n * addEvent : null,\n *\n * // Add our own custom item\n * disableDate : {\n * icon : 'b-fa b-fa-calendar-times',\n * text : 'Mark date unavailable',\n *\n * // Will look up ownership chain and find the Calendar\n * handler : 'up.makeDateUnavailable'\n * }\n * }\n * }\n * },\n * makeDateUnavailable({ date }) {\n * // Pass to our own app logic\n * this.disableDate(date);\n * }\n *```\n *\n * This feature is **enabled** by default.\n *\n * @demo Calendar/custom-menus\n * @extends Scheduler/feature/ScheduleMenu\n * @classtype scheduleMenu\n * @feature\n *\n * @typings Scheduler.feature.ScheduleMenu -> Scheduler.feature.SchedulerScheduleMenu\n */\nexport default class ScheduleMenu extends SchedulerScheduleMenu {\n static get $name() {\n return 'ScheduleMenu';\n }\n static get type() {\n return 'scheduleMenu';\n }\n getDataFromEvent(event) {\n const\n { client } = this,\n { activeView } = client,\n // Calendar has a defaultCalendar property for defaulting the resource\n resourceRecord = client.resolveResourceRecord(event) || client.defaultCalendar;\n // Base class is SchedulerScheduleMenu\n if (activeView.isScheduler) {\n this.client = activeView;\n }\n const result = super.getDataFromEvent(event);\n // Only inject the resourceRecord as the Calendar's detected version if the superclass didn't find one.\n // We may be hosting a Scheduler as a view which has its own opinions on this.\n if (!result.resourceRecord) {\n result.resourceRecord = resourceRecord;\n }\n this.client = client;\n return result;\n }\n shouldShowMenu({ date, targetElement }) {\n const\n { client } = this,\n { activeView } = client;\n if (activeView.isEventList && !activeView.isAgendaView) {\n return false;\n }\n // Base class is SchedulerScheduleMenu\n if (activeView.isScheduler) {\n this.client = activeView;\n const result = super.shouldShowMenu(...arguments);\n this.client = client;\n return result;\n }\n // We need a date and *not* an event element.\n return Boolean(date && !targetElement.closest(client.eventSelector));\n }\n populateScheduleMenu({ items, domEvent, date }) {\n super.populateScheduleMenu(...arguments);\n const\n { client } = this,\n { addEvent } = items;\n if (addEvent) {\n addEvent.disabled = this.disableAddEvent;\n addEvent.onItem = () => {\n const resourceRecord = client.activeView.getResourceRecord(domEvent);\n // We must offer the preventable beforeAutoCreate event\n if (client.activeView.trigger('beforeAutoCreate', { domEvent, date, resourceRecord }) !== false) {\n client.createEvent(date, resourceRecord);\n }\n };\n }\n }\n get disableAddEvent() {\n const { resourceRecord, date } = this.menuContext;\n return resourceRecord ? (resourceRecord.readOnly || !resourceRecord.isWorkingTime(date)) : false;\n }\n changeMenu() {\n const\n me = this,\n result = super.changeMenu(...arguments);\n // Set the owner to be the currently active view (or its active OverflowPopup)\n // so that focus stays in that view's ownership tree.\n result?.ion({\n beforeShow({ source }) {\n const\n { activeSubView } = me.client,\n { _overflowPopup } = activeSubView;\n source.owner = _overflowPopup?.containsFocus ? _overflowPopup : activeSubView;\n }\n });\n return result;\n }\n}\n// Register this feature type with its Factory\nCalendarFeature.register(ScheduleMenu.type, ScheduleMenu, true);\nScheduleMenu._$name = 'ScheduleMenu';", "import DomHelper from '../../Core/helper/DomHelper.js';\n/**\n * @module Calendar/layout/LayoutDim\n */\nconst\n noCalcRe = /^[+-]?\\d+(?:\\.\\d+)?(?:%|px)?$/;\n/**\n * Helper class for layout size pairs.\n * @internal\n */\nexport default class LayoutDim {\n static from(value) {\n if (value == null) {\n return null;\n }\n if (value instanceof LayoutDim) {\n return value;\n }\n // isNaN('4')=false, isNaN('4%')=true (preserve strings like \"5% + 10px\")\n if (!(Array.isArray(value) || (typeof value === 'string' && isNaN(value)))) {\n value = Number(value);\n value = (value < 1) ? [value, 0] : [0, value];\n }\n return new LayoutDim(...value);\n }\n static get(value) {\n return LayoutDim.from(value) || LayoutDim.ZERO;\n }\n constructor(ratio, delta) {\n this.r = ratio;\n this.d = delta;\n }\n add(v) {\n v = LayoutDim.from(v);\n return v ? new LayoutDim(this.r + v.r, this.d + v.d) : this;\n }\n adjust(r, d) {\n this.r += r || 0;\n this.d += d || 0;\n return this;\n }\n freeze() {\n return Object.freeze(this);\n }\n px(range) {\n return this.r * (range || 100) + this.d;\n }\n sub(v) {\n v = LayoutDim.from(v);\n return v ? new LayoutDim(this.r - v.r, this.d - v.d) : this;\n }\n * [Symbol.iterator]() {\n yield 'r';\n yield 'd';\n }\n stringify() {\n const str = this.toString();\n return noCalcRe.test(str) ? str : `calc(${str})`;\n }\n toString() {\n const { r, d } = this;\n let str;\n if (r) {\n str = DomHelper.percentify(r * 100);\n if (d) {\n str = `${str} + ${d}px`.replace('+ -', '- ');\n }\n }\n else {\n str = d ? `${d}px` : '0';\n }\n return str;\n }\n}\nLayoutDim.ZERO = new LayoutDim(0, 0).freeze();\nLayoutDim._$name = 'LayoutDim';", "import DomHelper from '../../Core/helper/DomHelper.js';\nimport ObjectHelper from '../../Core/helper/ObjectHelper.js';\nimport CalendarFeature from './CalendarFeature.js';\nimport CalendarZone from './CalendarZone.js';\nimport LayoutDim from '../layout/LayoutDim.js';\nimport AttachToProjectMixin from '../../Scheduler/data/mixin/AttachToProjectMixin.js';\n/**\n * @module Calendar/feature/TimeRanges\n */\n/**\n * A mutable object used to render an element of the time range.\n *\n * @typedef {Object} TimeRangeRenderData\n * @property {Calendar.model.TimeRangeModel} record The record being rendered\n * @property {String} color The color to be applied to the element\n * @property {Object} cls An object whose truthy property names will be added to the element's CSS `classList`\n * @property {Object} style An object containing style properties for the element\n * @property {TimeRangeRenderData} [outer] The render data for the outermost element. This property is present when\n * rendering any of the inner elements. The outer element is rendered after all inner elements, meaning this object\n * can be modified by an inner element renderer function.\n * @property {TimeRangeRenderData} [header] The render data for the header element. This property is present when\n * rendering the outermost element. The corresponding element has already been rendered, meaning that this object\n * should be considered read only.\n * @property {TimeRangeRenderData} [body] The render data for the body element. This property is present when\n * rendering the outermost element. The corresponding element has already been rendered, meaning that this object\n * should be considered read only.\n * @property {TimeRangeRenderData} [footer] The render data for the footer element. This property is present when\n * rendering the outermost element. The corresponding element has already been rendered, meaning that this object\n * should be considered read only.\n */\n/**\n * The object passed to a {@link Calendar.feature.TimeRanges#config-renderer} function.\n * @typedef {Object} TimeRangeRenderInfo\n * @property {TimeRangeRenderData} renderData The render data object to modify\n * @property {Calendar.model.TimeRangeModel} timeRange The record being rendered\n * @property {DomConfig} [domConfig] The default DOM config. This is only passed to the `outer` renderer and represents\n * the DOM config that will be used for the element. The `className` and `style` properties are applied after the\n * renderer returns.\n */\n/**\n * An object containing rendering methods for the various elements of a time range. All functions are optional. The\n * `footer` function is special in that there is no footer element by default. If a footer is desired, a `footer`\n * renderer function must be provided.\n *\n * @typedef {Object} TimeRangeRenderer\n * @property {Function} [outer] An optional function to be called to render the outermost element. This function is\n * passed a {@link Calendar.feature.TimeRanges#typedef-TimeRangeRenderInfo} object.\n * @property {Function} [body] An optional function to be called to render the body element. This function is passed\n * a {@link Calendar.feature.TimeRanges#typedef-TimeRangeRenderInfo} object.\n * @property {Function} [header] An optional function to be called to render the header element. This function is passed\n * a {@link Calendar.feature.TimeRanges#typedef-TimeRangeRenderInfo} object.\n * @property {Function} [footer] An optional function to be called to render the footer element. This function is passed\n * a {@link Calendar.feature.TimeRanges#typedef-TimeRangeRenderInfo} object.\n */\nconst\n genericRenderer = renderData => ({\n className : renderData.cls,\n style : renderData.style\n }),\n defaultRotation = {\n end : 'pos',\n start : 'neg'\n },\n oppositeAlign = {\n end : 'start',\n start : 'end'\n },\n valueFields = Object.entries({\n alignment : 'alignment',\n color : 'color',\n footer : 'footer',\n header : 'name',\n rotation : 'rotation'\n });\n/*\n This class manages rendering time ranges in a Day/WeekView. Instances of this class are created by the\n CalendarFeature via zoneTypes map.\n */\nclass DayZone extends CalendarZone {\n static $name = 'DayZone';\n static configurable = {\n viewListeners : {\n beforeLayoutEvents : 'onBeforeLayoutEvents'\n // renderEvents : 'onRenderEvents'\n }\n };\n onBeforeLayoutEvents({ source, context }) {\n // This event is fired by DayView.renderEvents\n // We hook into that event which fires for each day even if there are no events so we can decorate the day\n // with appropriate time ranges\n const ranges = source.getTimeRanges(context.cellData.date, context.cellData.tomorrow);\n if (ranges.length) {\n const\n { layout } = context,\n footers = {},\n headers = {},\n clusters = [],\n items = [];\n let children, item;\n context.timeRangeHeaders = headers;\n context.timeRanges = ranges;\n for (const timeRange of ranges) {\n item = layout.createLayoutItem(timeRange, context);\n item.values = Object.fromEntries(valueFields.map(([name, fieldName]) => [name, timeRange[fieldName]]));\n item.values.rotation = item.values.rotation || defaultRotation[item.values.alignment];\n layout.clusterize(clusters, items, item, context);\n children = context.dayDomConfig.children.inset;\n children = children.children || (children.children = []);\n children.push(this.renderTimeSpan(context, item, headers, footers));\n }\n if (headers.end || footers.end) {\n context.dayDomConfig.className['b-dayview-inset-after'] = 1;\n }\n if (headers.start || footers.start) {\n context.dayDomConfig.className['b-dayview-inset-before'] = 1;\n }\n }\n }\n renderPart(defaultRenderer, renderer, renderData, part, headerFooter, align, extraData) {\n const\n isFooter = part === 'footer',\n { record } = renderData,\n renderInfo = {\n timeRange : record\n };\n let data = renderData,\n domConfig, extraDom, value;\n if (typeof part === 'string') {\n renderData[part] = data = ObjectHelper.merge({\n part,\n record,\n outer : renderData,\n cls : {\n [`b-cal-timerange-${part}`] : 1\n }\n }, extraData);\n value = renderData.values[part];\n if (value != null) {\n renderInfo.value = data.value = value;\n }\n }\n else {\n extraDom = part;\n part = 'outer';\n }\n defaultRenderer = defaultRenderer?.[part];\n renderer = renderer?.[part];\n renderInfo.renderData = data;\n renderInfo.domConfig = extraDom;\n if (renderer) {\n data.style = {};\n const ret = renderer(renderInfo);\n if (typeof ret === 'string') {\n extraDom = Object.assign({ html : ret }, extraDom);\n }\n else if (ObjectHelper.isObject(ret)) {\n domConfig = ret;\n }\n }\n domConfig = domConfig || defaultRenderer?.(renderInfo);\n if (extraDom) {\n domConfig = ObjectHelper.merge(domConfig || {}, extraDom);\n }\n if (headerFooter && domConfig) {\n align = (isFooter && oppositeAlign[align]) || align;\n headerFooter[align] = (headerFooter[align] || 0) + 1;\n }\n data.domConfig = domConfig;\n return domConfig;\n }\n renderTimeSpan(context, item, headers, footers) {\n const\n me = this,\n { owner } = me, // our feature\n { defaultRenderer, renderer } = owner,\n timeRange = item.eventRecord,\n sizeSeconds = isNaN(item.end) ? 0 : Math.abs(item.end - item.start), // seconds\n isRange = sizeSeconds > 1,\n isLine = !isRange,\n { rtl } = context.layout.owner,\n { values } = item,\n { alignment : align, color, rotation } = values,\n renderData = {\n color,\n values,\n record : timeRange,\n layoutContext : context,\n cls : {\n 'b-readonly' : timeRange.readOnly,\n 'b-rtl' : rtl,\n 'b-cal-timerange' : 1,\n 'b-cal-timerange-line' : isLine,\n 'b-cal-timerange-narrow' : isRange && sizeSeconds <= owner.narrowThreshold * 60,\n [`b-cal-timerange-align-${align}`] : align,\n [`b-cal-timerange-rotate-${rotation}`] : isRange && rotation\n }\n };\n // This minor fudge allows the background grid lines to show through (better aesthetically)\n isRange && item.height.adjust(0, -1);\n const styles = item.getStyles(rtl);\n return DomHelper.normalizeChildren(me.renderPart(defaultRenderer, renderer, renderData, {\n dataset : {\n 'timerange-id' : timeRange.id,\n btip : isLine && values.header || null\n },\n className : {\n [timeRange.cls] : timeRange.cls\n },\n elementData : {\n timeRange\n },\n style : {\n top : styles.top,\n height : styles.height\n },\n children : isRange && {\n header : me.renderPart(defaultRenderer, renderer, renderData, 'header', headers, align, {\n cls : {\n [timeRange.iconCls] : timeRange.iconCls\n }\n }),\n body : me.renderPart(defaultRenderer, renderer, renderData, 'body'),\n footer : me.renderPart(defaultRenderer, renderer, renderData, 'footer', footers, align)\n }\n }));\n }\n}\n/**\n * This feature provides an easy way to highlight ranges of time in a calendar's day and week views. Each time range is\n * represented using the {@link Calendar.model.TimeRangeModel}.\n *\n * {@inlineexample Calendar/feature/TimeRanges.js}\n *\n * Time ranges can take a few different forms:\n *\n * - A line at the {@link Calendar.model.TimeRangeModel#field-startDate} with optional tooltip based on the\n * {@link Calendar.model.TimeRangeModel#field-name}.\n * - A styled region between the {@link Calendar.model.TimeRangeModel#field-startDate} and\n * {@link Calendar.model.TimeRangeModel#field-endDate}. The {@link Calendar.model.TimeRangeModel#field-cls} field is\n * used to apply the desired style to the time range element.\n * - A titled region based on the {@link Calendar.model.TimeRangeModel#field-name} field, between the\n * {@link Calendar.model.TimeRangeModel#field-startDate} and {@link Calendar.model.TimeRangeModel#field-endDate}. The\n * {@link Calendar.model.TimeRangeModel#field-cls} field can be used to apply the styling to the time range element.\n * The {@link Calendar.model.TimeRangeModel#field-color} and {@link Calendar.model.TimeRangeModel#field-iconCls}\n * fields can be used to apply a background color and icon to the header element. An optional\n * {@link Calendar.model.TimeRangeModel#field-footer} can also be added.\n *\n * ## ResourceTimeRanges\n *\n * If `resourceTimeRanges` are included in the loaded data, the results are only applied to views\n * which display that resource. This means a {@link Calendar.widget.DayResourceView} or\n * subviews of a {@link Calendar.widget.ResourceView}.\n *\n * Be sure to see additional examples on Mar 4 (Wed) in the Live Demo.\n *\n * This feature is **disabled** by default.\n *\n * @demo Calendar/timeranges\n * @extends Scheduler/feature/TimeRanges\n * @classtype timeRanges\n * @feature\n *\n * @typings Scheduler.feature.TimeRanges -> Scheduler.feature.SchedulerTimeRanges\n */\nexport default class TimeRanges extends CalendarFeature.mixin(AttachToProjectMixin) {\n static $name = 'TimeRanges';\n static type = 'timeRanges';\n static configurable = {\n defaultRenderer : {\n outer({ renderData }) {\n const\n ret = genericRenderer(renderData),\n { color } = renderData;\n if (color) {\n if (DomHelper.isNamedColor(color)) {\n ret.className[`b-cal-color-${color}`] = 1;\n }\n else {\n // Background color is in a pseudo element whose styles\n // come from CSS vars, so set the var locally to the element.\n (ret.style || (ret.style = {}))['--timerange-color'] = color;\n }\n }\n ret.className['b-cal-timerange-has-header'] = renderData.header?.domConfig;\n return ret;\n },\n body : ({ renderData }) => genericRenderer(renderData),\n header : ({ renderData, value }) => value ? {\n ...genericRenderer(renderData),\n children : [{\n className : {\n 'b-cal-timerange-header-text' : 1\n },\n text : value\n }]\n } : null,\n footer : ({ renderData, value }) => value ? {\n ...genericRenderer(renderData),\n children : [{\n className : {\n 'b-cal-timerange-footer-text' : 1\n },\n text : value\n }]\n } : null\n },\n /**\n * The number of pixels or proportion of the overall width to allocate for time range headers.\n *\n * Values less than 1 are the fractional proportion of the width (for example, 0.04 is 4% of the width),\n * while values greater than or equal to 1 are a number of pixels.\n * @config {Number}\n * @default\n */\n headerWidth : 40,\n narrowThreshold : 60,\n /**\n * An empty function by default, but provided so that you can override it.\n *\n * This function is called each time a time range is rendered to allow developers to mutate the element metadata,\n * or the CSS classes to be applied to the rendered element.\n *\n * It's called with a {@link #typedef-TimeRangeRenderInfo} object containing the time span record, and a\n * {@link #typedef-TimeRangeRenderData renderData} object which allows you to mutate event metadata such as\n * `cls` and `style`.\n *\n * A non-null return value from the renderer is used as the element body content. A nullish return value results\n * in the default renderer for the element.\n *\n * ```javascript\n * timeRanges : {\n * renderer ({ timeRange, renderData }) {\n * if (timeRange.name === 'Doctors appointment') {\n * renderData.style.fontWeight = 'bold';\n * renderData.cls['custom-cls'] = 1;\n *\n * return 'Special doctors appointment';\n * }\n * }\n * }\n * ```\n * ${header}
`}\n \n ${footer && ``}\n
When returning content, be sure to consider how that content should be encoded to avoid XSS\n * (Cross-Site Scripting) attacks. This is especially important when including user-controlled data such as\n * the event's `name`. The function {@link Core.helper.StringHelper#function-encodeHtml-static} as well as\n * {@link Core.helper.StringHelper#function-xss-static} can be helpful in these cases.
\n *\n * For example:\n * ```javascript\n * timeRanges : {\n * renderer ({ timeRange, renderData }) {\n * return StringHelper.xss`Special ${timeRange.name}`;\n * }\n * }\n * ```\n *\n * For advanced rendering, this config can be a {@link #typedef-TimeRangeRenderer} object with rendering\n * functions for individual elements: `header`, `body`, `footer`, and `outer`. When a function is provided,\n * that is equivalent to passing the `header` renderer. In other words, the above example is equivalent to\n * the following:\n *\n * ```javascript\n * timeRanges : {\n * renderer : {\n * header({ timeRange, renderData }) {\n * return StringHelper.xss`Special ${timeRange.name}`;\n * }\n * }\n * }\n * ```\n *\n * @config {Function|TimeRangeRenderer} renderer\n * @param {TimeRangeRenderInfo} info An object that contains data about the time span being rendered.\n * @returns {String}\n * @default\n */\n renderer : null,\n zoneTypes : {\n day : DayZone, // also covers WeekView\n resource : DayZone\n }\n };\n attachToProject(project) {\n super.attachToProject(project);\n this.detachListeners('project');\n project.timeRangeStore?.ion({\n name : 'project',\n change : 'refresh',\n thisObj : this\n });\n project.resourceTimeRangeStore?.ion({\n name : 'project',\n change : 'refresh',\n thisObj : this\n });\n }\n changeRenderer(renderer) {\n if (typeof renderer === 'function') {\n renderer = {\n header : renderer\n };\n }\n return renderer;\n }\n updateHeaderWidth(width) {\n const el = this.owner?.element;\n if (el) {\n el.style.setProperty('--timerange-header-width', LayoutDim.from(width)?.toString());\n }\n }\n refresh() {\n this.client.refresh();\n }\n}\n// Register this feature type with its Factory\nCalendarFeature.register(TimeRanges.type, TimeRanges);\nTimeRanges._$name = 'TimeRanges';", "import CalendarFeature from './CalendarFeature.js';\nimport FunctionHelper from '../../Core/helper/FunctionHelper.js';\nimport DomHelper from '../../Core/helper/DomHelper.js';\n/**\n * @module Calendar/feature/WeekExpander\n */\n/**\n *\n * A Feature which, when present, adds a week row expansion tool to week rows in\n * {@link Calendar.widget.MonthView MonthView}s so that a row which contains overflowing cells\n * can be expanded to show all events with no overflow.\n *\n * ```javascript\n * const calendar = new Calendar({\n * appendTo : 'container',\n *\n * // Start life looking at this date\n * date : new Date(2020, 9, 12),\n *\n * features : {\n * weekExpander : true\n * },\n *\n * // CrudManager arranges loading and syncing of data in JSON form from/to a web service\n * crudManager : {\n * transport : {\n * load : {\n * url : 'data/data.json'\n * }\n * },\n * autoLoad : true\n * }\n * });```\n *\n * \n * *Expanding* a week row using this feature may cause the MonthView to have vertical overflow.\n *
\n *\n * \n * When combined with {@link Calendar.widget.MonthView#config-autoRowHeight}, *collapsing* a\n * week row sets the `autoRowHeight` property to `false`. Detect this state change using the\n * {@link Calendar.widget.MonthView#event-weekFlex} event.\n *
\n *\n * This feature is **disabled** by default\n * @extends Calendar/feature/CalendarFeature\n * @classtype weekExpander\n * @feature\n */\nexport default class WeekExpander extends CalendarFeature {\n static get $name() {\n return 'WeekExpander';\n }\n static get type() {\n return 'weekExpander';\n }\n static get pluginConfig() {\n return {\n chain : ['render']\n };\n }\n render() {\n const\n { client } = this,\n monthView = this.monthView = client.isMonthView ? client : client.modes.month;\n if (monthView) {\n const { weekRenderer } = this;\n monthView.showWeekColumn = true;\n monthView.weekRenderer = monthView.weekRenderer ? FunctionHelper.createSequence(monthView.weekRenderer, weekRenderer) : weekRenderer;\n monthView.ion({\n weeknumberclick : 'onWeekNumberClick',\n thisObj : this,\n // We must get in first so we can veto the switch to week view if we toggle a row.\n prio : 10000\n });\n }\n }\n weekRenderer(parent, [year, week]) {\n if (!parent.querySelector('.b-week-toggle-tool-wrap')) {\n DomHelper.createElement({\n parent,\n className : 'b-week-toggle-tool-wrap',\n children : [{\n className : 'b-icon b-week-toggle-tool',\n dataset : {\n btip : this.L('L{WeekExpander.expandTip}')\n }\n }]\n });\n }\n }\n onWeekNumberClick({ domEvent, date }) {\n const toggleTool = domEvent.target.closest('.b-week-toggle-tool');\n if (toggleTool && !this.disabled) {\n const weekRow = domEvent.target.closest('.b-calendar-row');\n // Shrinkwrapped means the row is expanded, toggle it to collapsed\n if (weekRow.classList.contains('b-shrinkwrapped')) {\n this.monthView.flexWeekRow(date, true);\n toggleTool.dataset.btip = this.L('L{expandTip}');\n }\n // And if it's collapsed, toggle it to expanded\n else if (weekRow.classList.contains('b-has-overflow')) {\n this.monthView.shrinkwrapWeekRow(date);\n toggleTool.dataset.btip = this.L('L{collapseTip}');\n }\n return false;\n }\n }\n updateDisabled(disabled, was) {\n super.updateDisabled(disabled, was);\n // Remove class when disabled. Eliminates toggling UI.\n this.client.element.classList.toggle('b-weekexpander', !disabled);\n }\n}\n// Register this feature type with its Factory\nWeekExpander.initClass();\nWeekExpander._$name = 'WeekExpander';", "import Base from '../../../Core/Base.js';\nimport Factoryable from '../../../Core/mixin/Factoryable.js';\nimport LayoutDim from '../LayoutDim.js';\n/**\n * @module Calendar/layout/day/DayLayout\n */\nconst\n getStyles = function(rtl) {\n const me = this; // a DayLayoutItem (also why we cannot use => fn here)\n return {\n [rtl ? 'right' : 'left'] : me.left?.stringify(),\n top : me.top.stringify(),\n width : me.width?.stringify(),\n height : me.height.stringify(),\n minWidth : me.minWidth\n };\n };\n/**\n * The item returned by the `layoutEvents` method.\n *\n * @typedef {Object} DayLayoutItem\n * @property {Scheduler.model.EventModel} eventRecord The `event` being displayed.\n * @property {DayLayoutCluster} cluster The cluster of events with overlapping times.\n * @property {Number} start The start time (as the number seconds since midnight) of the item.\n * @property {Number} end The end time (as the number seconds since midnight) of the item.\n * @property {Calendar.layout.LayoutDim} left The left position of the item.\n * @property {Calendar.layout.LayoutDim} top The top position of the item.\n * @property {Calendar.layout.LayoutDim} width The width of the item.\n * @property {Calendar.layout.LayoutDim} height The height of the item.\n * @property {Boolean} startsBefore Set to `true` if the event started in a previous day.\n * @property {Boolean} endsAfter Set to `true` if the event end in a future day.\n * @internal\n */\n/**\n * A set of `items` that overlap. This object is passed to the `layoutCluster` method.\n *\n * @typedef {Object} DayLayoutCluster\n * @property {DayLayoutContext} context The layout context\n * @property {DayLayoutItem[]} items The items in this event cluster.\n * @property {Number} start The start time (as the number seconds since midnight) of the item.\n * @property {Number} end The end time (as the number seconds since midnight) of the item.\n * @internal\n */\n/**\n * The object returned by `createLayoutContext`.\n *\n * @typedef {Object} DayLayoutContext\n * @property {DayCell} cellData An object containing information about the day cell being created.\n * @property {DayLayoutCluster[]} clusters The item clusters produced by `layoutEvents`.\n * @property {DayLayoutItem[]} items The items created by the `layoutEvents` method.\n * @property {Calendar.layout.day.DayLayout} layout The owing layout instance.\n * @internal\n */\n/**\n * The base class for {@link Calendar.widget.DayView} layout algorithms.\n * @extends Core/Base\n * @abstract\n */\nexport default class DayLayout extends Base.mixin(Factoryable) {\n static factoryable = {\n // establish this class as the Factoryable base\n };\n static configurable = {\n /**\n * Set to `false` to disable the gap on the right-most edge of events. See {@link #config-gutterWidth} to\n * control the size of the gutter.\n *\n * The gutter allows the user to select the times overlapped by events, for example, to create new events.\n * @config {Boolean}\n * @default\n */\n gutter : true,\n /**\n * The number of pixels or proportion of the overall width to allocate to the {@link #config-gutter}.\n *\n * Values less than 1 are the fractional proportion of the width (for example, 0.04 is 4% of the width),\n * while values greater than or equal to 1 are a number of pixels.\n * @config {Number}\n * @default\n */\n gutterWidth : 5,\n /**\n * The number of pixels or proportion of the overall width to allocate for rendering on outside the area where\n * events are displayed. This space is used by {@link Calendar.feature.TimeRanges} to render arbitrary spans of\n * time on either side of the day's events.\n *\n * Values less than 1 are the fractional proportion of the width (for example, 0.04 is 4% of the width),\n * while values greater than or equal to 1 are a number of pixels.\n * @config {Number}\n * @default\n */\n inset : 40,\n /**\n * The minimum number of minutes an event must overlap another event before it is considered an overlap\n * for layout purposes.\n *\n * The default value of 0 treats any overlap in time as an overlap in the layout.\n * @config {Number}\n * @default 0\n * @internal\n */\n overlapTolerance : null,\n owner : null\n };\n /**\n * This method is called prior to performing the layout in {@link #function-layoutEvents}.\n * @param {DayLayoutContext} context The layout context\n * @returns {DayLayoutContext}\n * @internal\n */\n beforeLayoutEvents(context) {\n this.owner.trigger('beforeLayoutEvents', {\n context\n });\n return context;\n }\n /**\n * This method packages items into clusters of overlapping items.\n * @param {DayLayoutCluster[]} clusters The cluster array being produced. This method adds to this array.\n * @param {DayLayoutItem[]} items The items array being produced. This method adds `item` to this array.\n * @param {DayLayoutItem} item The item to add and pack into a cluster.\n * @param {DayLayoutContext} context The layout context\n * @internal\n */\n clusterize(clusters, items, item, context) {\n const cluster = clusters[clusters.length - 1] || null; // undefined => null when clusters.length=0\n items.push(item);\n // Because items are in order of increasing start times, we don't have to worry about coalescing clusters.\n if (cluster && this.overlaps(cluster, item)) {\n item.cluster = cluster;\n cluster.end = Math.max(cluster.end, item.end);\n cluster.items.push(item);\n // If the item overlaps a cluster, we simply add it there and return. No other items can overlap\n // since items are added in order of start time.\n }\n else {\n // Item does not overlap, so make a new cluster.\n clusters.push(item.cluster = {\n context,\n start : item.start,\n end : item.end,\n items : [item]\n });\n }\n }\n /**\n * Populates and returns a layout context used for the layout process.\n * @param {DayCell} cellData An object containing information about the day cell being created.\n * @param {DomConfig} [dayDomConfig] The DomConfig element definition for the day cell into which events are being\n * rendered.\n * @returns {DayLayoutContext}\n * @internal\n */\n createLayoutContext(cellData, dayDomConfig) {\n const events = cellData?.events;\n return {\n cellData,\n dayDomConfig,\n // We need the events for the day to be sorted by startDate but limited to the start of the day. In\n // other words, all events that start before \"midnight\" are equally considered as starting at midnight.\n // This order of events is an assumption that runs deep in FluidDayLayout but also in clusterization.\n events : events?.length > 1 ? cellData.dayTime.sortEvents(cellData.date, events.slice()) : (events || []),\n clusters : [],\n items : [],\n layout : this\n };\n }\n /**\n * Calculate the placements for the given events within the specified time range.\n * @param {DayCell} cellData An object containing information about the day cell being created.\n * @param {DomConfig} [dayDomConfig] The DomConfig element definition for the day cell into which events are being\n * rendered.\n * @returns {DayLayoutContext}\n * @internal\n */\n layoutEvents(cellData, dayDomConfig) {\n const\n me = this,\n context = me.beforeLayoutEvents(me.createLayoutContext(cellData, dayDomConfig)),\n { clusters, events, items } = context;\n let event, i, item, n;\n // As the base class, we simply pick up the events and wrap them in a layout item to contain their positions:\n for (event of events) {\n item = me.createLayoutItem(event, context);\n me.clusterize(clusters, items, item, context);\n }\n // cluster layouts are done in seconds:\n for (i = 0, n = clusters.length; i < n; ++i) {\n me.layoutCluster(clusters[i]);\n }\n me.owner.trigger('layoutEvents', {\n context\n });\n return context;\n }\n /**\n * Returns the base of a {@link Calendar.layout.day.DayLayout#typedef-DayLayoutItem} for the passed\n * event record.\n * @param {Scheduler.model.EventModel} eventRecord The event record for which to create a layout item.\n * @param {DayLayoutContext} context The layout context\n * @returns {DayLayoutItem}\n * @internal\n */\n createLayoutItem(eventRecord, context) {\n // Note: DH.diff() does not produce the correct layout position if DST adjustment lands on \"date\"\n const\n { date, tomorrow, dayEnd, dayTime } = context.cellData,\n { allDay, startDate, endingDate } = eventRecord,\n startSec = (allDay || startDate < date) ? 0 : dayTime.delta(startDate, 's');\n let endSec = (allDay || endingDate >= tomorrow) ? dayEnd : dayTime.delta(endingDate, 's');\n // Milestones must grow to appear to have \"milestoneDuration\"\n if (eventRecord.isMilestone && !eventRecord.isTimeRangeModel && !eventRecord.allDay) {\n endSec = startSec + (this.owner.milestoneDuration / 1000);\n }\n const\n start = Math.max(startSec, 0),\n end = Math.min(endSec, dayEnd),\n top = LayoutDim.from(start / dayEnd);\n return {\n eventRecord,\n getStyles,\n start,\n end,\n top,\n id : eventRecord.id,\n height : new LayoutDim(end / dayEnd, 0).sub(top),\n startsBefore : startDate < date || startSec < 0,\n endsAfter : tomorrow < endingDate || endSec > dayEnd\n };\n }\n overlaps(a, b, tolerance, end) { // minutes => seconds\n if (typeof tolerance === 'string') {\n end = tolerance;\n tolerance = null;\n }\n end = end || 'end';\n tolerance = tolerance ?? (this.overlapTolerance * 60 || 0); // avoid NaN\n return a.start < (b[end] - tolerance) && b.start < (a[end] - tolerance);\n }\n syncGutter() {\n this.owner.setStyle('--dayview-cell-gutter', String(LayoutDim.get(this.gutter && this.gutterWidth)));\n }\n updateGutter() {\n this.syncGutter();\n }\n updateGutterWidth() {\n this.syncGutter();\n }\n updateInset(inset) {\n this.owner.setStyle('--dayview-cell-inset-size', String(LayoutDim.get(inset)));\n }\n}\nDayLayout._$name = 'DayLayout';", "import DayLayout from './DayLayout.js';\nimport PackMixin from '../../../Scheduler/eventlayout/PackMixin.js';\nimport LayoutDim from '../LayoutDim.js';\n/**\n * @module Calendar/layout/day/FluidDayLayout\n */\nclass Packer extends PackMixin() {\n static get defaultConfig() {\n return {\n coordProp : 'left',\n sizeProp : 'width'\n };\n }\n pack(items) {\n const\n wrappedItems = items.map(item => {\n const\n { startDate } = item.eventRecord,\n endDate = new Date(startDate);\n endDate.setSeconds(endDate.getSeconds() + item.maxEnd - item.start);\n return {\n item,\n start : startDate,\n end : endDate,\n x : 0\n };\n });\n this.packEventsInBands(wrappedItems, (itemData, clusterIndex, slot, slotSize) => {\n // This logic was extracted from Scheduler/eventlayout/VerticalLayout#applyLayout\n itemData.width = slotSize;\n itemData.w = slotSize * COLUMN_WIDTH;\n itemData.x += (itemData.left = slot.start + (clusterIndex * slotSize)) * COLUMN_WIDTH;\n itemData.item.x = itemData.x;\n itemData.item.w = itemData.w;\n });\n }\n}\nconst\n COLUMN_WIDTH = 10000,\n EMPTY = Object.freeze([]),\n packer = new Packer();\n/**\n * This class positions events for a `DayView` by maximizing the visible area of each event. When events overlap, this\n * class determines the minimum amount of horizontal indent required for the overlapping events so that as much of\n * their content as possible is unobstructed.\n *\n * @extends Calendar/layout/day/DayLayout\n */\nexport default class FluidDayLayout extends DayLayout {\n static type = 'fluid';\n static configurable = {\n /**\n * The number of minutes of an event that must be (vertically) cleared by another event before it is\n * allowed to be significantly overlapped by it (horizontally).\n *\n * For example:\n *\n * ```text\n * >= clearanceMinutes < clearanceMinutes\n * +--------------+ +----------------+\n * | Event 1 | | Event 3 |\n * | 9am-11am | | 9am-11am +-------------+\n * | +----------------+ | | Event 4 |\n * | | Event 2 | | | 9:30am-12pm |\n * | | 10am-12pm | | | |\n * | | | | | |\n * +--| | +----------| |\n * | | | |\n * +----------------+ +-------------+\n * ```\n *\n * In the example above, the start time of Event 2 is more than `clearanceMinutes` after the start time of\n * Event 1, therefore it is displayed with a minimal indent from the left of Event 1. The start time of\n * Event 4, however, is less than `clearanceMinutes` after Event 3 and so they both share the space evenly.\n * @config {Number}\n * @default\n */\n clearanceMinutes : 45,\n /**\n * The maximum number of possible solutions to evaluate when calculating an event's width.\n * @config {Number}\n * @internal\n * @default\n */\n complexityLimit : 2000,\n /**\n * The number of minutes of an overlapping event that must be (vertically) cleared by another event before\n * it is allowed to be fully overlapped by it (horizontally). THis value is a number of minutes _beyond_\n * {@link #config-clearanceMinutes}. In other words, if `clearanceMinutes` is 45 and this config is set to\n * 75, the start time of an event must be two hours (45+75 = 120 minutes) after the prior event to fully\n * overlap it.\n *\n * For example:\n *\n * ```text\n * >= escapeMinutes < escapeMinutes\n * +----------------+ +----------------+\n * | Event 1 | | Event 5 |\n * | 9am-11am +-------------+ | 9am-11am +-------------+\n * | | Event 2 | | | Event 6 |\n * | | 9:30am-12pm | | | 9:30am-12pm |\n * | | | | | +-------------+\n * | + --------------------+ | | | Event 7 |\n * +--| Event 3 | +----------| | 10:15am |\n * | 10:30am | | | |\n * | | +--| |\n * +---------------------+ +-------------+\n * ```\n *\n * In the example above, the start time of Event 3 is more than `escapeMinutes` after the start time of\n * Event 2, therefore it is allowed to fully overlap the bottom of Event 2. As can be seen above, this does\n * not allow Event 3 to overlap the top-most overlapping event (Event 1). In the case of Event 7, the event\n * starts less than `escapeMinutes` after Event 6 and so the left edge of Event 6 remains exposed. The\n * positioning of Event 7 is determined by {@link #config-clearanceMinutes}.\n * @config {Number}\n * @default\n * @internal\n */\n escapeMinutes : null,\n /**\n * The number of pixels or proportion of the overall width to indent overlapping events that overlap by at\n * least {@link #config-clearanceMinutes}. Events that overlap by less than `clearanceMinutes` will split\n * the available space.\n *\n * Values less than 1 are the fractional proportion of the width (for example, 0.04 is 4% of the width),\n * while values greater than or equal to 1 are a number of pixels.\n * @config {Number}\n * @default\n * @internal\n */\n indentWidth : 10,\n /**\n * The maximum amount of width reduction due to overlapping items. If {@link #config-gutterWidth} is a\n * number of pixels, this value must also be in pixels (i.e., >= 1). Otherwise, this value is a proportional\n * value between 0 and 1.\n *\n * Even though this value limits the width reduction from overlapping items, it is possible that this\n * value exceeds the event width due to its nesting level (the number of prior events this event overlaps).\n * In this case, the {@link #config-staggerMinimum} value will prevent the width from becoming too small.\n * @config {Number}\n * @default\n * @internal\n */\n staggerMaximum : null,\n /**\n * This is the minimum width to which `staggerWidth` will size an event. For example, if an event has many\n * overlapping events, its width may be reduced a number of steps due to `staggerWidth`. This value limits\n * how much the event's width will be reduced.\n *\n * This value is expressed as a decimal proportion of the width of 1. For example, the value 0.4 is 40% of\n * the actual width. With this setting, the `staggerWidth` calculation will not reduce an event's width\n * below 40%.\n * @config {Number}\n * @default\n */\n staggerMinimum : 0.4,\n /**\n * When enabled, the width of an event is reduced in steps based on the number of events that overlap it.\n * Set this config to `false` or 0 to disable this effect.\n *\n * If this value is a boolean, the `gutterWidth` is used for the size of the reduction. If this value is a\n * number, it is the size of the reduction. For example, a value of 0.05 would cause an event to reduce in\n * steps of 5% width based on the number of events that overlap it. A number >= 1 is a number of pixels,\n * however, this is only valid if `gutterWidth` is also a number of pixels.\n *\n * By default, events are reduced by the `gutterWidth` based on the number of events that overlap them.\n * @config {Boolean|Number}\n * @default\n */\n staggerWidth : true,\n /**\n * Set this to `true` to use the full day width for events. By default, overlapping events equally split the\n * width.\n * @config {Boolean}\n * @default false\n */\n stretch : null\n };\n createLayoutContext(cellData, dayDomConfig) {\n const\n me = this,\n context = super.createLayoutContext(cellData, dayDomConfig),\n { staggerWidth } = me;\n // These values are consistent for all clusters in a given day, so cache them on the layout context (also\n // allows for event listeners to tweak these prior to our using them - lookin' at you timeRanges):\n return Object.assign(context, {\n indentWidth : LayoutDim.get(me.indentWidth),\n stagger : new LayoutDim(), // just a reused instance\n staggerMaximum : LayoutDim.from(me.staggerMaximum), // can be null\n staggerMinimum : me.staggerMinimum,\n staggerWidth : LayoutDim.from((staggerWidth === true) ? me.gutterWidth : staggerWidth),\n stretch : me.stretch\n });\n }\n layoutCluster(cluster /* , parentItem */) {\n const\n me = this,\n { context, items } = cluster,\n {\n indentWidth, stagger, staggerMaximum, staggerMinimum, staggerWidth, stretch\n } = context,\n treeLevels = me.treeify(items);\n me._assignSizes(items, treeLevels);\n for (const item of items) {\n /*\n +---------------------------------------+ :\n | | :\n | +-----------------------------------------+ :\n | | | :\n | | | :\n | | +-------------------------------------------+ :\n +------| | | :\n | | | :\n | | | :\n | +-------------------------------------------+ :\n | | :\n +-----------------------------------------+ ^ :\n | :\n ^ ^ |\n ^ | | | ^\n |<---->| |<------>|<------>|\n |indent| | stagger gutter |\n | |<--------------------------------------->| |\n | width |\n |<---------------------------------------------------------------->|\n root.w\n */\n const\n // { children } = item.eventRecord,\n depth = item.depth,\n left = new LayoutDim(),\n width = new LayoutDim(),\n root = item.majorParent || item;\n for (const k of stagger) {\n stagger[k] = staggerWidth[k] * (depth.height + depth.overlap);\n stagger[k] = staggerMaximum?.[k] ? Math.min(staggerMaximum[k], stagger[k]) : stagger[k];\n }\n left.r = root.x + depth.minor * indentWidth.r * root.w;\n left.d = depth.minor * indentWidth.d;\n width.r = stretch ? 1 - left.r : (root.w - left.r + root.x);\n width.d = -left.d;\n // if (parentItem) {\n // left.r += parentItem.left.r;\n // left.d += parentItem.left.d + parentItem.width.d;\n //\n // width.r *= parentItem.blockWidth.r;\n // width.d += parentItem.blockWidth.d - parentItem.width.d;\n // }\n if (staggerMinimum) {\n // The staggerMinimum is a proportion of the ideal width, which is the column's width minus the left\n // edge (i.e., the width w/o accounting for stagger).\n item.minWidth = `calc(${staggerMinimum} * (${width}))`;\n }\n width.r -= stagger.r * root.w;\n width.d -= stagger.d;\n item.left = left;\n item.width = width;\n }\n }\n treeify(items) {\n const treeLevels = [];\n // Organize items as a tree where parents can have two kinds of children: minor overlap and major overlap.\n // The tree starts as a sorted list which can be seen as each parent having one child.\n for (let i = 0; i < items.length; i++) {\n this._addChild(items[i], i, treeLevels);\n }\n return treeLevels;\n }\n _addChild(item, order, treeLevels) {\n const\n me = this,\n { clearanceMinutes, escapeMinutes, stretch } = me,\n clearanceSeconds = clearanceMinutes * 60,\n escapeSeconds = clearanceSeconds + escapeMinutes * 60,\n overlapTolerance = (me.overlapTolerance || 0) * 60, // minutes => seconds\n isMinor = (a, b) => Math.abs(b.start - a.start) >= clearanceSeconds,\n scoreFn = item => item.depth.minor * 10 + item.depth.major * (stretch ? 1 : 0),\n depth = {\n // The true depth from the root of the tree, regardless of major/minor distinctions.\n depth : 0,\n // The number of steps up from the deepest minor child to this node.\n height : 0,\n // The number of steps up from the deepest major child to this node.\n heightMajor : 0,\n // The number of items this item overlaps. This happens when a node clears the end time of a higher\n // level node and is elevated. This ensures that the bottom of these overlapped events are exposed\n // by the staggered width of this item. See item 2 in example C below.\n overlap : 0,\n // The number of major overlaps for this item and its ancestry. More space is allocated in this case\n // then for minor overlaps. The number of minor overlaps per major overlap is held in \"clearanceScale\".\n major : 0,\n // The number of minor overlaps for this item and its ancestry. When there is sufficient content shown\n // for a parent, a child can be indented by much less without hiding those details. This minimal amount\n // of overlap is specified in seconds via \"clearanceSeconds\".\n minor : 0\n };\n // Each item's parent is determined below, but initially we assign items as root (left-most).\n item.parent = null;\n item.maxEnd = item.maxEndMajor = item.end;\n item.depth = depth;\n item.order = order;\n if (!treeLevels.length) {\n // Nothing much to do with the first item...\n treeLevels[0] = item;\n item.barriers = EMPTY;\n return;\n }\n let best = 0, // actual value isn't important when !parent, however we get warnings w/o assigning a value\n child, major, minor, p, parent, score;\n // The goal of this loop is to determine the best parent for item\n for (p of treeLevels) {\n child = p.lastItem || p;\n if (!me.overlaps(item, p, overlapTolerance, 'maxEnd')) {\n /*\n treeLevels\n [0] [1] [2] [3]\n +---------------+---------------+---------------+---------------+\n : +-----------+ : +-----------+ : : :\n : | | : | | : +-----------+ : +-----------+ :\n : | | : | | : | | : | | :\n : | | : +-----------+ : | | : | | :\n : | | : : | | : | | :\n : | | : +-----------+ : | | : +-----------+ :\n : +-----------+ : | item | : +-----------+ : :\n : : +-----------+ : : :\n If there is a tree level that item does not overlap, attach item there. We want to put item at the\n highest level of the tree (aka left-most) so we break the loop now.\n */\n parent = p.parent;\n major = true;\n break;\n }\n if (isMinor(item, child)) {\n /*\n treeLevels\n [0] [1] [2] [3]\n +---------------+---------------+---------------+---------------+\n : +-----------+ : +----------+ : : :\n : | | : | | : +----------+ : +----------+ :\n : | | : | | : | | : | | :\n : | | : | | : | +---------+ : | +---------+ :\n : | | : | | : | | | : | | | :\n : | | : | +---------+ : | | | : | | | :\n : | | : | | | : | | | : | | | :\n : | | : +-| item | : | | | : | | | :\n : | | : +---------+ : | | | : | | | :\n : | | : : | +---------+ : | +---------+ :\n : | | : : | | : | | :\n : | | : : | | : +----------+ :\n : +-----------+ : : +----------+ : :\n : : : : :\n If we have a minor overlap with a level, we want to attach item where we minimize the depth of the\n minor overlap. Set the minor flag to note that we should no longer consider major overlaps.\n */\n minor = true;\n if (major) {\n // The current candidate is a major overlap, so clear the major flag and reset parent so that we\n // pick this level as the initial best choice.\n major = false;\n parent = null;\n }\n for (/* empty */; child !== p; child = child.parent) {\n // For scoring purposes, we don't include \"escape\" climbing, just overlapping.\n if (me.overlaps(child, item, overlapTolerance)) {\n break;\n }\n }\n score = scoreFn(child);\n if (!parent || score < best) {\n // either we had no current winner (!parent) or this child has a better score (lower, like golf).\n parent = child;\n best = score;\n }\n }\n else if (!minor) {\n /*\n treeLevels\n [0] [1] [2] [3]\n +---------------+---------------+---------------+---------------+\n : +-----------+ : +-----------+ : : :\n : | | : | | : +-----------+ : +-----------+ : +-----------+\n : | | : | | : | | : | | : | |\n : | | : +-----------+ : | | : | parent <-------- item |\n : | | : : | | : | | : | |\n : | | : : | | : | | : +-----------+\n : | | : : | | : +-----------+ :\n : +-----------+ : : +-----------+ : :\n : : : : :\n If we have no minor overlaps (yet), the deepest (right-most) major overlap will be the parent\n */\n major = true;\n parent = p;\n }\n }\n // Since we have at least one item in treeLevels, the above loop will always end with the major or minor flag\n // set to true.\n if (major) {\n // In a major overlap parent could be null (if item does not overlap treeLevels[0])\n minor = 0;\n major = parent ? parent.depth.major + 1 : 0;\n p = parent = treeLevels[major - 1] || null;\n }\n else {\n // In a minor overlap parent will be the child item that we overlapped.\n p = parent.majorParent || parent;\n // Now account for escaping\n for (/* empty */; escapeSeconds && parent !== p; parent = parent.parent) {\n if (me.overlaps(parent, item, overlapTolerance) && item.start - parent.start < escapeSeconds) {\n break;\n }\n }\n minor = parent.depth.minor + 1;\n major = parent.depth.major;\n }\n // major is the number of major parent items (i.e., the depth including only major parents)\n // minor is the depth of the item below its major parent (!minor indicates that item is a major overlap)\n // p is the major parent (the parent that is not a minor overlap of another item)\n // parent is the immediate parent (maybe the major parent or a child)\n // p and parent may be null (when major = 0 and !minor)\n item.parent = parent;\n depth.major = major;\n depth.minor = minor;\n depth.depth = parent ? parent.depth.depth + 1 : 0;\n if (minor) { // now that major and minor are depths, only minor can be treated as a boolean\n item.majorParent = p;\n item.previousItem = p.lastItem;\n p.lastItem = item;\n }\n else {\n me._addMajor(item, treeLevels);\n }\n me._adjustOverlap(item);\n me._adjustParents(item);\n }\n _addMajor(item, treeLevels) {\n const\n me = this,\n { stretch } = me,\n level = item.depth.major;\n treeLevels[level] = item;\n item.barriers = me._getOverlaps(treeLevels, item, 1);\n if (stretch || item.barriers.length) {\n // Barriers are prior overlapping events that are deeper in the tree which restrict the width of item. If\n // these barrier events are in the list of barriers for items higher in the tree, replace them with this\n // item.\n //\n // To calculate stretch overlap we need to track all paths. For non-stretch mode, we can skip this for\n // items that have no barriers (in essence, these provide their contribution in heightMajor of the item's\n // depth). Further, this optimization is important for use cases with lots of overlapping events (see\n // https://github.com/bryntum/support/issues/3140)\n for (const prior of me._getOverlaps(treeLevels, item, -1)) {\n // Remove common barriers:\n const barriers = prior.barriers.filter(b => !item.barriers.includes(b));\n if (stretch || barriers.length < prior.barriers.length) { // if (we have common barriers)\n prior.barriers = barriers;\n barriers.push(item);\n }\n }\n }\n }\n _adjustOverlap(item) {\n if (item.depth.minor) {\n let overlap, p;\n for (p = item; p.depth.minor > 1; p = p.parent) {\n // empty\n }\n // p is the top-most minor child of item in our parent\n for (overlap = 0; (p = p.previousItem); /* empty */) {\n if (this.overlaps(p, item)) {\n overlap = Math.max(overlap, p.depth.height + p.depth.overlap + 1);\n }\n }\n item.depth.overlap = overlap;\n }\n }\n _adjustParents(item) {\n const\n { depth, end } = item,\n level = depth.minor + depth.overlap;\n for (let parentDepth, p = item; (p = p.parent); /* empty */) {\n parentDepth = p.depth;\n if (parentDepth.major !== depth.major) {\n parentDepth.heightMajor = Math.max(parentDepth.heightMajor, depth.major - parentDepth.major);\n continue;\n }\n // Update the parent's maxEnd to include the new child\n p.maxEnd = Math.max(p.maxEnd, end);\n // Also update the height of all parent nodes to account for the new child\n while (parentDepth.height < level - parentDepth.minor) { // may be > 1 loop w/overlap\n ++parentDepth.height;\n if (parentDepth.overlap) {\n --parentDepth.overlap;\n }\n }\n }\n }\n _assignSizes(items, treeLevels) {\n const\n { complexityLimit, stretch } = this,\n topLevelItems = items.filter(it => !it.depth.minor);\n if (!complexityLimit) {\n packer.pack(topLevelItems);\n for (const item of topLevelItems) {\n item.x /= COLUMN_WIDTH;\n item.w /= COLUMN_WIDTH;\n }\n }\n else {\n for (const item of topLevelItems) {\n const\n paths = item.barriers.map(b => [b]),\n { parent } = item,\n height = item.depth.heightMajor + 1; // the height of this subtree; +1 to include item\n item.x = parent ? parent.x + parent.w : 0;\n let\n w = (1 - item.x) / height, // best-case width (excluding prior overlapping events)\n i, include, longest, path, tail, v, x;\n if (paths.length) {\n // Here we are treating the prior overlapping events as children of a sort, which converts our\n // tree into a DAG (directed, acyclic graph). We want to consider all paths from item to terminal\n // items in the DAG (items with no children). Each path provides a possible space allocation. It\n // is the minimum space allocation we are after.\n for (i = 0; i < paths.length;) {\n path = paths[i];\n longest = longest || path; // may hit complexityLimit or never improve on best case\n if (i > complexityLimit) {\n w = 1 / treeLevels.length; // worst-case width\n break;\n }\n tail = path[path.length - 1];\n if (tail.order < item.order) {\n // A path is a terminal path if the tail item is a prior event (order is just a number like\n // 1, 2, 3, etc. that we set on each event as we process it).\n ++i;\n x = tail.x; // that prior event has an x coordinate, so we must not overlap it\n include = 0; // do not include the tail event as we divvy up the space\n }\n else if (!tail.barriers.length) {\n // The tail event has no barriers, but because item is prior to tail, tail has no x value\n // determined yet.\n ++i;\n x = 1; // divvy up all remaining space\n include = 1; // but include the tail item in the split\n }\n else {\n // There could be too many levels to the tree to directly recurse, so we just replace this\n // non-terminal path with the set of paths that include the next layer. These may be either\n // terminal, non-terminal or both, but we'll explore them by not incrementing \"i\".\n paths.splice(i, 1, ...tail.barriers.map(b => path.concat(b)));\n if (longest === path) {\n longest = null; // non-terminal path cannot be the longest path\n }\n continue;\n }\n v = (x - item.x) / (include + path.length); // the width of item for this path\n if (v < w) {\n w = v;\n longest = path;\n }\n }\n if (stretch) {\n // In stretch mode, the idea is to expand the width of columns to cover the width of the view,\n // but we need to account for overlapping items in the way. We use the longest path (the path\n // that determined the item's width) to calculate additional overlaps for this item and its\n // minor children:\n v = longest.reduce((s, it) => s + it.depth.height + 1, 0); // sum of minor stacking depths\n for (i = item.lastItem; i; i = i.previousItem) {\n i.depth.overlap += v;\n }\n item.depth.overlap += v;\n }\n }\n item.w = w;\n }\n }\n }\n _getOverlaps(treeLevels, item, step) {\n const\n { end } = item, // item has no minor children yet, so end === maxEnd for item...\n stop = (step < 0) ? -1 : treeLevels.length;\n let { start } = item,\n i, other, ret;\n for (i = item.depth.major + step; i !== stop && start < end; i += step) {\n other = treeLevels[i];\n /*\n Consider (step = 1):\n other[1] other[2] other[3]\n -+- other.start\n | -+-\n | | -+-\n item | | |\n start -+- | | |\n | -+- other.end | |\n | -+- -+-\n |\n end -+-\n item overlaps other[1] and other[2] but not other[2] because you cannot draw a horizontal line that\n intersects item and other[3] w/o crossing through other[0] or other[1].\n Consider (step = -1):\n other[-3] other[-2] other[-1]\n -+- other.start\n | -+-\n | | -+- item\n | | | -+- start\n | | | |\n | -+- -+- |\n | -+- end\n -+- other.end\n In the reverse case, we are likewise looking for items that pass the horizontal line test. So the\n overlaps are other[-1] and other[-3].\n */\n if (start < other.maxEnd && other.start < end) {\n (ret || (ret = [])).push(other);\n start = other.maxEnd;\n }\n }\n return ret || EMPTY;\n }\n}\nFluidDayLayout.initClass();\nFluidDayLayout._$name = 'FluidDayLayout';", "import Base from '../../Core/Base.js';\nimport ProjectConsumer from '../../Scheduler/data/mixin/ProjectConsumer.js';\nimport ObjectHelper from '../../Core/helper/ObjectHelper.js';\nimport CrudManager from '../data/CrudManager.js';\nimport ProjectModel from '../model/ProjectModel.js';\nimport TimeRangeModel from '../model/TimeRangeModel.js';\nimport TimeZoneHelper from '../../Core/helper/TimeZoneHelper.js';\nimport ResourceTimeRangeModel from '../../Scheduler/model/ResourceTimeRangeModel.js';\n/**\n * @module Calendar/mixin/CalendarStores\n */\n/**\n * Functions for store assignment and store event listeners.\n *\n * @mixin\n * @extends Scheduler/data/mixin/ProjectConsumer\n */\nexport default Target => class CalendarStores extends ProjectConsumer(Target || Base) {\n static $name = 'CalendarStores';\n static configurable = {\n /**\n * The calendar ({@link Scheduler.model.ResourceModel Resource}), (or its `id`) to use as the\n * default calendar for new events created using {@link Calendar.view.Calendar#config-autoCreate dblclick}\n * or {@link Calendar.feature.CalendarDrag drag-create}, or {@link Calendar.feature.ExternalEventSource dragging in}.\n *\n * May be specified as the `id` of an existing resource, or a resource record that is present in the project.\n *\n * If not specified, the first record in the {@link #property-resourceStore} will be used.\n *\n * If specified as `null`, then new events created using {@link Calendar.view.Calendar#config-autoCreate dblclick}\n * or {@link Calendar.feature.CalendarDrag drag-create}, or {@link Calendar.feature.ExternalEventSource dragging in}\n * will not be automatically assigned a calendar.\n * @config {String|Scheduler.model.ResourceModel}\n */\n defaultCalendar : null,\n /**\n * Class that should be used to instantiate a CrudManager in case it's provided as a simple object to\n * {@link #config-crudManager} config.\n * @config {Scheduler.data.CrudManager}\n * @category Data\n */\n crudManagerClass : CrudManager,\n /**\n * Get/set the CrudManager instance\n * @member {Scheduler.data.CrudManager} crudManager\n * @category Data\n */\n /**\n * Supply a {@link Scheduler.data.CrudManager} instance or a config object if you want to use\n * CrudManager for handling data.\n * @config {CrudManagerConfig|Scheduler.data.CrudManager}\n * @category Data\n */\n crudManager : null,\n /**\n * Set to a time zone or a UTC offset. This will set the projects\n * {@link Scheduler.model.ProjectModel#config-timeZone} config accordingly. As this config is only a referer,\n * please se project's config {@link Scheduler.model.ProjectModel#config-timeZone documentation} for more\n * information.\n *\n * ```javascript\n * new Calendar(){\n * timeZone : 'America/Chicago'\n * }\n * ```\n * @config {String|Number} timeZone\n * @category Misc\n */\n timeZone : {\n // Don't ingest the config eagerly because it relies on project being present.\n // Lazy means it waits for ingestion until timeZone property is referenced.\n $config : 'lazy',\n value : null\n }\n };\n static defaultConfig = {\n projectModelClass : ProjectModel\n };\n //region Default config\n // This is the static definition of the Stores we consume from the project, and\n // which we must provide *TO* the project if we or our CrudManager is configured\n // with them.\n // The property name is the store name, and within that there is the dataName which\n // is the property which provides static data definition. And there is a listeners\n // definition which specifies the listeners *on this object* for each store.\n //\n // To process incoming stores, implement an updateXxxxxStore method such\n // as `updateEventStore(eventStore)`.\n //\n // To process an incoming Project implement `updateProject`. __Note that\n // `super.updateProject(...arguments)` must be called first.__\n static get projectStores() {\n return {\n resourceStore : {\n dataName : 'resources',\n // eslint-disable-next-line bryntum/no-listeners-in-lib\n listeners : {\n changePreCommit : 'onCalendarStoreChange'\n }\n },\n eventStore : {\n dataName : 'events',\n // eslint-disable-next-line bryntum/no-listeners-in-lib\n listeners : {\n changePreCommit : 'onCalendarStoreChange'\n }\n },\n assignmentStore : {\n dataName : 'assignments'\n },\n timeRangeStore : {\n dataName : 'timeRanges',\n modelClass : TimeRangeModel\n },\n resourceTimeRangeStore : {\n dataName : 'resourceTimeRanges',\n modelClass : ResourceTimeRangeModel\n }\n };\n }\n /**\n * Inline events, will be loaded into the {@link #property-eventStore}.\n * @prp {Scheduler.model.EventModel[]|EventModelConfig[]} events\n * @category Data\n */\n /**\n * The {@link Scheduler.data.EventStore} or a reconfiguring object for a store which will hold\n * the events to be rendered into the Calendar.\n * @config {Scheduler.data.EventStore|EventStoreConfig} eventStore\n * @category Data\n */\n /**\n * The {@link Scheduler.data.EventStore} holding the events to be rendered into the Calendar.\n * @member {Scheduler.data.EventStore} eventStore\n * @readonly\n * @category Data\n */\n /**\n * Inline resources, will be loaded into the {@link #property-resourceStore}.\n * @prp {Scheduler.model.ResourceModel[]|ResourceModelConfig[]} resources\n * @category Data\n */\n /**\n * The {@link Scheduler.data.ResourceStore} or a reconfiguring object for a store which will hold the resources to be rendered into the Calendar.\n * @config {Scheduler.data.ResourceStore|ResourceStoreConfig} resourceStore\n * @category Data\n */\n /**\n * The {@link Scheduler.data.ResourceStore} holding the resources to be rendered into the Calendar.\n * @member {Scheduler.data.ResourceStore} resourceStore\n * @readonly\n * @category Data\n */\n /**\n * Inline assignments, will be loaded into the {@link #property-assignmentStore}.\n * @prp {Scheduler.model.AssignmentModel[]|AssignmentModelConfig[]} assignments\n * @category Data\n */\n /**\n * The {@link Scheduler.data.AssignmentStore} or a reconfiguring object for a store which will hold assignments linking resources to events.\n * @config {Scheduler.data.AssignmentStore|AssignmentStoreConfig} assignmentStore\n * @category Data\n */\n /**\n * The {@link Scheduler.data.AssignmentStore} holding assignments linking resources to events.\n * @member {Scheduler.data.AssignmentStore} assignmentStore\n * @readonly\n * @category Data\n */\n /**\n * Inline time ranges, will be loaded into the {@link #property-timeRangeStore}.\n *\n * Time ranges are rendered in Calendar {@link Calendar.widget.DayView} or\n * {@link Calendar.widget.WeekView} when the Calendar has the {@link Calendar.feature.TimeRanges}\n * feature enabled.\n *\n * Time ranges are rendered into a {@link Scheduler.view.Scheduler} subview when that subview\n * has the {@link Scheduler.feature.TimeRanges} feature enabled.\n *\n * @prp {Calendar.model.TimeRangeModel[]|TimeRangeModelConfig[]} timeRanges\n * @accepts {Calendar.model.TimeRangeModel[]|TimeRangeModelConfig[]}\n * @category Data\n */\n /**\n * The {@link Calendar.data.TimeRangeStore} or a reconfiguring object for a store which will hold time ranges.\n * These may be used by the {@link Calendar.feature.TimeRanges} feature.\n * @config {Calendar.data.TimeRangeStore|TimeRangeStoreConfig} timeRangeStore\n * @category Data\n */\n /**\n * The {@link Calendar.data.TimeRangeStore} holding time ranges.\n * These may be used by the {@link Calendar.feature.TimeRanges} feature.\n * @member {Calendar.data.TimeRangeStore} timeRangeStore\n * @readonly\n * @category Data\n */\n /**\n * Inline resource time ranges, will be loaded into {@link #property-resourceTimeRangeStore}.\n *\n * Resource time ranges are rendered in a Calendar {@link Calendar.widget.ResourceView} when the\n * Calendar has the {@link Calendar.feature.TimeRanges} feature enabled.\n *\n * Resource time ranges are rendered into a {@link Scheduler.view.Scheduler} subview when that subview\n * has the {@link Scheduler.feature.ResourceTimeRanges} feature enabled.\n *\n * @prp {Scheduler.model.ResourceTimeRangeModel[]|ResourceTimeRangeModelConfig[]} resourceTimeRanges\n * @accepts {Scheduler.model.ResourceTimeRangeModel[]|ResourceTimeRangeModelConfig[]}\n * @category Data\n */\n /**\n * The {@link Scheduler.data.ResourceTimeRangeStore} or a reconfiguring object for a store which will hold resource time ranges.\n * These may be used by the {@link Calendar.feature.TimeRanges} feature.\n * @config {Scheduler.data.ResourceTimeRangeStore|ResourceTimeRangeStoreConfig} resourceTimeRangeStore\n * @category Data\n */\n /**\n * The {@link Scheduler.data.ResourceTimeRangeStore} holding resource time ranges.\n * These may be used by the {@link Calendar.feature.TimeRanges} feature.\n * @member {Scheduler.data.ResourceTimeRangeStore} resourceTimeRangeStore\n * @readonly\n * @category Data\n */\n //endregion\n //region CrudManager\n changeCrudManager(crudManager) {\n const me = this;\n if (crudManager && !crudManager.isCrudManager) {\n const type = crudManager.type || me.crudManagerClass;\n // CrudManager injects itself into is Scheduler's _crudManager property\n // because code it triggers needs to access it through its getter.\n crudManager = type.new({\n scheduler : me\n }, crudManager);\n }\n // config setter will veto because of above described behaviour\n // of setting the property early on creation\n me._crudManager = crudManager;\n me.bindCrudManager?.(crudManager);\n }\n //endregion\n updateTimeZone(timeZone) {\n this.project.timeZone = timeZone;\n }\n get timeZone() {\n return this.project.timeZone;\n }\n // When project changes time zone, change Calendar date\n onBeforeTimeZoneChange({ timeZone, oldTimeZone }) {\n if (this.isConfiguring) {\n // Too early\n return;\n }\n const\n me = this,\n // Only one receiver of this event should change Calendar date.\n // The Calendar's activeView if we are inside a Calendar, or this view if not\n target = me.isCalendar ? me.activeView : (!me.calendar && me);\n // Only change view date if dayView\n if (target?.duration === 1) {\n // Get events in current dayView\n const currentEvents = target.events.filter(e => e.startDate >= target.startDate && e.endDate && e.endDate <= target.endDate);\n if (currentEvents.length) {\n // If there is events, calculate an average date of those events\n const\n eventsCenterMs = currentEvents.map(e => (e.startDate.getTime() + e.endDate.getTime()) / 2),\n avgCenterDate = new Date(Math.floor(eventsCenterMs.reduce((sum, e) => sum + e, 0) / eventsCenterMs.length)),\n // If already converted, revert that date to local time zone\n centerDateLocal = oldTimeZone != null ? TimeZoneHelper.fromTimeZone(avgCenterDate, oldTimeZone) : avgCenterDate,\n // And then convert it to the new time zone (or not)\n centerDateTZ = timeZone != null ? TimeZoneHelper.toTimeZone(centerDateLocal, timeZone) : centerDateLocal;\n // If different date from current, change\n if (centerDateTZ < target.startDate || centerDateTZ > target.endDate) {\n (target.calendar || target).date = centerDateTZ;\n }\n }\n }\n }\n // Need this to not run conversion in ProjectConsumer\n onTimeZoneChange() {}\n /**\n * The default Calendar to be used when creating new events which do not initially have a resource.\n *\n * This includes {@link Calendar.view.Calendar#config-autoCreate dblclick-created} events and\n * {@link Calendar.feature.CalendarDrag drag-created} events and\n * {@link Calendar.feature.ExternalEventSource dragged in} events.\n * @property {Scheduler.model.ResourceModel}\n */\n get defaultCalendar() {\n const\n { eventStore } = this,\n defaultCalendar = ObjectHelper.hasOwn(this, '_defaultCalendar') ? this._defaultCalendar : eventStore.defaultCalendarId;\n if (defaultCalendar !== null) {\n return defaultCalendar != undefined ? (defaultCalendar.isResourceModel ? defaultCalendar : eventStore.resourceStore.getById(defaultCalendar)) : eventStore.resourceStore.first;\n }\n }\n get defaultCalendarId() {\n return this.eventStore.modelClass.asId(this.defaultCalendar);\n }\n //region Project\n updateProject(project, oldProject) {\n super.updateProject(project, oldProject);\n const me = this;\n // Now is the time to force timeZone ingestion. When we have all our stores.\n me.getConfig('timeZone');\n me.detachListeners('CalendarStores');\n project.ion({\n name : 'CalendarStores',\n dataReady : 'onCalendarStoreChange',\n refresh : 'onProjectRefresh',\n thisObj : me\n });\n // Assigned a project at runtime\n if (!me.isConfiguring) {\n me.eachView(view => {\n view.project = project;\n });\n }\n }\n onProjectRefresh({ source : project, isInitialCommit }) {\n // Force reevaluation of date indices next time requested because the\n // initial project commit may have rescheduled the events.\n if (isInitialCommit) {\n project.eventStore.invalidateDayIndices();\n }\n }\n updateEventStore(eventStore) {\n // Decorate the eventStore's createRecord method to inject our defaultCalendar into new\n // events as the default resource.\n if (eventStore && !eventStore.isCalendarEventStore) {\n const storeOwner = this;\n Object.defineProperty(eventStore, 'defaultCalendar', {\n get : () => storeOwner.defaultCalendar\n });\n eventStore.isCalendarEventStore = true;\n // Events should stay available when they are deassigned unless requested otherwise\n if (!('removeUnassignedEvent' in eventStore.initialConfig)) {\n eventStore.removeUnassignedEvent = false;\n }\n }\n }\n //endregion\n //region WidgetClass\n // This does not need a className on Widgets.\n // Each *Class* which doesn't need 'b-' + constructor.name.toLowerCase() automatically adding\n // to the Widget it's mixed in to should implement thus.\n get widgetClass() {}\n //endregion\n};\n", "/**\n * @module Calendar/util/EventSlots\n */\n/**\n * An Array which allows prefilling of some slots and automatic filling\n * of vacant slots.\n *\n * Used by the Calendar to fill event slots in day cells in the MonthView\n * @internal\n */\nexport default class EventSlots extends Array {\n firstFreeSlot = 0;\n set(index, event) {\n const me = this;\n if (index == null) {\n return me.add(event);\n }\n else {\n me[index] = event;\n }\n // Stepped on the first free slot pointer, move it on.\n if (me.firstFreeSlot === index) {\n // Move onwards while the pointer references an occupied slot\n while (me[me.firstFreeSlot]) {\n me.firstFreeSlot++;\n }\n }\n }\n add(event) {\n const result = this.firstFreeSlot;\n this[result] = event;\n // Move onwards while the pointer references an occupied slot\n while (this[this.firstFreeSlot]) {\n this.firstFreeSlot++;\n }\n return result;\n }\n setEvents(events) {\n const length = this.length = this.firstFreeSlot = events.length;\n for (let i = 0; i < length; i++) {\n this[i] = events[i];\n }\n }\n}\nEventSlots._$name = 'EventSlots';", "import Base from '../../Core/Base.js';\n/**\n * @module Calendar/util/EventSorter\n */\n/**\n * This class contains methods to sort events into appropriate order within a day for display\n * in all contexts.\n *\n * Whenever a day's events are rendered, those events are sorted with {@link #function-defaultSorterFn-static} method.\n */\nexport default class EventSorter extends Base {\n /**\n * This sorting method implement following rules:\n *\n * 0. Unscheduled events go before scheduled ones\n * 1. Compare by floored start date\n * 2. If equal, compare by floored duration\n * 3. If equal, compare by start date\n * 4. If equal, compare by duration\n * @param {Scheduler.model.EventModel|EventBar} event1\n * @param {Scheduler.model.EventModel|EventBar} event2\n * @returns {Number}\n */\n static defaultSorterFn(event1, event2) {\n // Handle event wrapping which is what MonthView does.\n event1 = event1.eventRecord || event1;\n event2 = event2.eventRecord || event2;\n const\n { startDate : start1 } = event1,\n { startDate : start2 } = event2;\n // Unscheduled events sort to the top.\n if (!start1) {\n return -1;\n }\n if (!start2) {\n return 1;\n }\n // Sort by start timestamp first, then duration.\n // This is *in-cell* sorting.\n return start1 - start2 || event2.durationMS - event1.durationMS;\n }\n /**\n * This sorting method implement following rules:\n *\n * 0. Unscheduled events go before scheduled ones\n * 1. An {@link Scheduler.model.EventModel#property-isInterDay} event sorts before events that are not.\n * 2. Compare floored start date, if the events have different values\n * 3. Compare floored duration, if the events have different values\n * 4. Compare start date, if the events have different values\n * 5. Compare duration\n *\n * This is used by {@link Calendar.widget.MonthView} and {@link Calendar.widget.AgendaView} since these views mix\n * both interday and intraday events in the same view but render them differently.\n * @param {Scheduler.model.EventModel|EventBar} event1\n * @param {Scheduler.model.EventModel|EventBar} event2\n * @returns {Number}\n * @internal\n */\n static interDaySorterFn(event1, event2) {\n // Handle event wrapping which is what MonthView does.\n event1 = event1.eventRecord || event1;\n event2 = event2.eventRecord || event2;\n const\n {\n startDate : start1,\n isInterDay : event1InterDay\n } = event1,\n {\n startDate : start2,\n isInterDay : event2InterDay\n } = event2;\n // Unscheduled events sort to the top.\n if (!start1) {\n return -1;\n }\n if (!start2) {\n return 1;\n }\n // InterDay events sort to the top (https://github.com/bryntum/support/issues/1693).\n if (event1InterDay !== event2InterDay) {\n return Number(event2InterDay) - Number(event1InterDay);\n }\n // If both events fit inside one day cell, the only sort order we care about is start time.\n if (!event1InterDay && !event2InterDay) {\n return start1 - start2;\n }\n // Sort Duration (longest first), then by ending date (furthest in future first), then by start timestamp.\n // This is *in-cell* sorting.\n return event2.durationMS - event1.durationMS || event2.endingDate - event1.endingDate || start1 - start2;\n }\n}\nEventSorter._$name = 'EventSorter';", "import Base from '../../Core/Base.js';\nimport DomHelper from '../../Core/helper/DomHelper.js';\nimport DateHelper from '../../Core/helper/DateHelper.js';\nimport StringHelper from '../../Core/helper/StringHelper.js';\n/**\n * @module Calendar/mixin/SchedulerInterface\n */\nconst\n hasEventStore = w => w.isCalendarMixin && w.eventStore,\n eventNameSplitter = /(touch|mouse|pointer|key|context|dbl)(.*)/,\n eventPartReplacer = (match, prefix, remainder) => `${StringHelper.capitalize(prefix)}${StringHelper.capitalize(remainder)}`,\n capitalizeEvent = domEvent => domEvent.type.replace(eventNameSplitter, eventPartReplacer);\n/**\n * Exposes an interface similar to a {@link Scheduler.view.Scheduler} so that Calendar Features which\n * extend Scheduler Features can treat their client in a standard manner.\n * @private\n * @mixin\n */\nexport default Target => class SchedulerInterface extends (Target || Base) {\n static get $name() {\n return 'SchedulerInterface';\n }\n /**\n * Determines what is under the cursor of the specified event or what is described by the given element.\n * @param {Event|Element} domEvent The event or element\n * @returns {CalendarHit}\n */\n calendarHitTest(domEvent) {\n const\n { activeView } = this,\n target = DomHelper.getEventElement(domEvent);\n return activeView?.element.contains(target) ? activeView.calendarHitTest(domEvent) : null;\n }\n // Hack to expose part of the Scheduler API that features and mixins inherited from Scheduler use.\n get timeAxis() {\n const me = this;\n if (!me._timeAxis) {\n me._timeAxis = {\n get startDate() {\n return me.activeView.startDate;\n },\n get endDateDate() {\n return me.activeView.endDate;\n },\n isTimeSpanInAxis(event) {\n return DateHelper.intersectSpans(event.startDate, event.endDate, this.startDate, this.endDate);\n }\n };\n }\n return this._timeAxis;\n }\n // Hack to expose part of the Scheduler API that features use.\n get timeAxisViewModel() {\n const me = this;\n if (!me._timeAxisViewModel) {\n me._timeAxisViewModel = {\n get timeResolution() {\n return me.activeView.timeResolution || {};\n }\n };\n }\n return this._timeAxisViewModel;\n }\n /**\n * Interface method required for navigation/selection.\n * Returns the event record for a DOM element.\n * @param {HTMLElement|Event} elementOrEvent The DOM node to lookup, or a DOM event whose target to lookup.\n * @returns {Scheduler.model.EventModel} The event record\n */\n resolveEventRecord(elementOrEvent) {\n if (elementOrEvent instanceof Event) {\n elementOrEvent = elementOrEvent.target;\n }\n const activeClient = this.constructor.fromElement(elementOrEvent)?.closest(hasEventStore);\n return activeClient?.getEventRecord(elementOrEvent);\n }\n /**\n * Interface method required for navigation/selection\n * Assignment not supported in Calendar.\n * @private\n */\n resolveAssignmentRecord() {\n }\n /**\n * Interface method required for navigation/selection.\n * Returns the resource (calendar) record for a DOM element.\n * @param {HTMLElement|Event} elementOrEvent The DOM node to lookup, or a DOM event whose target to lookup.\n * @returns {Scheduler.model.ResourceModel} Any corresponding event record's resource if any.\n */\n resolveResourceRecord(elementOrEvent) {\n const { activeView } = this;\n // For a resource view, return the subView's configured resource.\n // If the target element is within an overflow popup, the subView is the popup's owner.\n // Otherwise, just look up the DOM parentNode axis to find an instance of the view type.\n if (activeView.isResourceView) {\n const\n element = elementOrEvent.nodeType === Node.ELEMENT_NODE ? elementOrEvent : elementOrEvent.target,\n sourcePopup = element.closest('.b-overflowpopup'),\n subView = sourcePopup ? bryntum.fromElement(sourcePopup, 'overflowpopup').owner : bryntum.fromElement(elementOrEvent, activeView.viewType.type);\n if (subView) {\n return subView.resource;\n }\n }\n return this.resolveEventRecord(elementOrEvent)?.resource;\n }\n handleEvent(domEvent) {\n // Map event names, eg: contextmenu -> ContextMenu\n const eventName = capitalizeEvent(domEvent);\n // We are a Grid. Our superclass handleEvent distributes to onElementXxxx\n // This is called directly as part of the GridElementEvents mixin\n if (super.handleEvent) {\n super.handleEvent(domEvent);\n }\n // We are a regular CalendarMixin. We implement the interface of the Feature host as defined\n // in GridElementEvents.\n // We get here via Calendar's onViewCatchAll which directs allDomEvents through here\n // so ensure we only process each domEvent once.\n // For example, contextmenu in a Scheduler causes schedulecontextmenu\n // and cellcontextmenu both from the same initial DOM event.\n else if (!domEvent.handled && !domEvent.schedulerRedirected) {\n if (this.trigger(`beforeElement${eventName}`, { event : domEvent }) !== false) {\n this[`onElement${eventName}`]?.(domEvent);\n }\n // Sets this flag to avoid double invocation\n domEvent.schedulerRedirected = true;\n }\n }\n onInternalKeyDown(domEvent) {\n this.onCalendarPointerInteraction?.(domEvent);\n }\n getCellDataFromEvent(domEvent) {\n return super.getCellDataFromEvent?.(domEvent);\n }\n getDateFromDomEvent(domEvent) {\n const activeClient = this.constructor.fromElement(domEvent)?.closest(hasEventStore);\n if (activeClient) {\n return activeClient.getDateFromDomEvent(domEvent);\n }\n }\n getDateFromXY(xy, roundingMethod, local = true, allowOutOfRange) {\n const activeClient = this.activeSubView;\n if (activeClient) {\n return activeClient.getDateFromPosition(xy[0] - globalThis.scrollX, xy[1] - globalThis.scrollY, local);\n }\n }\n // Used by shared feature code.\n // Route to view's create implementation.\n createEvent() {\n this.activeView.createEvent(...arguments);\n }\n // It's fixed to be enabled for now\n get enableRecurringEvents() {\n return true;\n }\n // Used by shared feature code. Not relevant in Calendar\n getRowFor() { }\n // Used by shared feature code. Could implement if needed.\n suspendRefresh() { }\n // Used by shared feature code. Could implement if needed.\n resumeRefresh() { }\n get widgetClass() {}\n};\n", "import Base from '../../../Core/Base.js';\nimport DomClassList from '../../../Core/helper/util/DomClassList.js';\nimport DomHelper from '../../../Core/helper/DomHelper.js';\nimport StringHelper from '../../../Core/helper/StringHelper.js';\nimport DH from '../../../Core/helper/DateHelper.js';\n/**\n * @module Calendar/widget/mixin/EventRenderer\n */\nconst emptyString = new String('');\n/**\n * Mixin that can be used to generate DomConfig blocks for events.\n *\n * @mixin\n */\nexport default Target => class EventRenderer extends (Target || Base) {\n static $name = 'EventRenderer';\n static configurable = {\n /**\n * A function, or the name of a function in the ownership hierarchy which you\n * can specify to customize event DOM content.\n *\n * This function is called each time an event is rendered to allow developers to mutate\n * the cell metadata, or the CSS classes to be applied to the event element.\n *\n * It's called with the event record, and a eventData object which allows you to mutate event metadata\n * such as `cls`, `style`.\n *\n * The `cls` property is an object whose property names will be added to the event element if the property\n * value is truthy.\n *\n * The `style` property is an object containing style properties for the event element.\n *\n * A non-null return value from the renderer is used as the event body content. A nullish\n * return value causes the default renderer to be used which just uses the event name.\n *\n * If a string is returned, it is used as the HTML content of the event body element.\n *\n * If an object is returned, it is used as a {@link Core.helper.DomHelper#typedef-DomConfig} object to\n * create complex content in the event body element.\n *\n * ```javascript\n * eventRenderer({ eventRecord, renderData }) {\n * if (eventRecord.name === 'Doctors appointment') {\n * eventData.style.fontWeight = 'bold';\n * eventData.cls['custom-cls'] = 1;\n *\n * return 'Special doctors appointment';\n * }\n * }\n * ```\n *\n * IMPORTANT: When returning content, be sure to consider how that content should be encoded to avoid XSS\n * (Cross-Site Scripting) attacks. This is especially important when including user-controlled data such as\n * the event's `name`. The function {@link Core.helper.StringHelper#function-encodeHtml-static} as well as\n * {@link Core.helper.StringHelper#function-xss-static} can be helpful in these cases.\n *\n * For example:\n *\n * ```javascript\n * eventRenderer({ eventRecord }) {\n * return StringHelper.xss`Event: ${eventRecord.name}`;\n * }\n * ```\n *\n * @param {Object} detail An object that contains data about the event being rendered\n * @param {Calendar.widget.mixin.CalendarMixin} detail.view The view rendering the event\n * @typings detail.view -> {typeof CalendarMixin}\n * @param {Scheduler.model.EventModel} detail.eventRecord The event record\n * @param {Scheduler.model.ResourceModel} detail.resourceRecord The event record\n * @param {Object} detail.renderData A data object containing properties that will be used to create the event element\n * @param {Object} detail.renderData.style The style property is an object containing style properties for the event element\n * @param {Object} detail.renderData.cls The cls property is an object whose property names will be added to\n * the event element if the property value is truthy\n * @param {Object} detail.renderData.iconStyle The iconStyle property is an object containing style properties for\n * the icon element if an icon element is to be used\n * @param {Object} detail.renderData.iconCls The iconCls property is an object whose property names will be added to\n * the icon element. Initially set from the event record's {@link Scheduler.model.EventModel#field-iconCls}.\n * Can be mutated by the renderer. If null, or no properties are set, no icon will be rendered\n * @param {String} detail.renderData.eventColor Color to be applied to the event\n * @param {Object} detail.renderData.dataset An object which produces the `dataset` of the resulting event bar\n * @param {Boolean} detail.renderData.solidBar This is valid for views which create event bars.\n * This is set to `true` by default for all day and interday events so that these appear as a solid block of background color.\n * An eventRenderer may mutate this flag to change in what manner the event bar is coloured - as a solid bar of colour,\n * or using the foreground colour (text and icons) such as the MonthView, the CalendarRow (all day events in a DayView), and OverflowPopups\n * @param {String} detail.renderData.bodyColor When used in a {@link Calendar.widget.DayView},\n * this color is applied to the body of the event element. Note that this must be light enough\n * that the text colour (From the SASS variable `$dayview-event-color`) is visible\n * @param {Boolean} detail.showBullet If there is no `iconCls`, and the event is not recurring, then by default\n * a \"bullet\" circular icon is shown if the view's {@link Calendar.widget.mixin.CalendarMixin#config-showBullet}\n * if set. Setting this property in an event renderer overrides this behaviour.\n * @returns {DomConfig|DomConfig[]|String|null}\n * @config {Function|String}\n */\n eventRenderer : null,\n /**\n * If this is set to `true`, then when determining which assigned resource of a multi assigned event\n * to use to create the event UI, the first resource which is still selected in the\n * {@link Calendar.widget.Sidebar#property-resourceFilter} is used.\n *\n * The default is to use the first resource in the assigned list.\n *\n * The resource's {@link Scheduler.model.ResourceModel#field-eventColor} is used as the colour for the\n * event unless the event has its own {@link Scheduler.model.EventModel#field-eventColor}.\n *\n * The resource's {@link Scheduler.model.ResourceModel#field-eventStyle} is used as the base of the style\n * for the event, and the event's {@link Scheduler.model.EventModel#field-style} is applied to it.\n * @prp {Boolean}\n */\n filterEventResources : null,\n /**\n * A Function (or name of a function in the ownership hierarchy) which returns the\n * {@link Scheduler.model.ResourceModel resource record} to use to create the UI for an event.\n *\n * The resource's {@link Scheduler.model.ResourceModel#field-eventColor} is used as the colour for the\n * event unless the event has its own {@link Scheduler.model.EventModel#field-eventColor}.\n *\n * The resource's {@link Scheduler.model.ResourceModel#field-eventStyle} is used as the base of the style\n * for the event, and the event's {@link Scheduler.model.EventModel#field-style} is applied to it.\n *\n * For views which are linked to a single resource such as `ResourceView` and `DayResourceView`, the\n * default implementation always returns the view's resource.\n *\n * If multi assignment is used, the default is to pick the first resource in the assigned resource list.\n *\n * If this view's {@link #property-filterEventResources} is `true`,\n * then the first assigned event which is still filtered __in__ is chosen.\n *\n * An implementation of this function may be configured in to your {@link Calendar.view.Calendar#config-modes}\n * to customize how the resource is chosen from a multi assigned event.\n *\n * @config {Function|String} [getPrimaryResource]\n * @param {Scheduler.model.EventModel} eventRecord The event from which to extract the primary resource.\n * @returns {Scheduler.model.ResourceModel} The resource to be used to render the event.\n */\n getPrimaryResource({ resources }) {\n // If we are a view type which shows events only for one resource, choose that\n // as the primary resource for the event\n if (this.resource) {\n return this.resource;\n }\n // Normally, just pick the first resource.\n // If filterEventResources is set, we pick the first one which is still selected in the ResourceFilter\n if (resources.length) {\n const resourceFilter = this.filterEventResources && this.calendar?.widgetMap?.resourceFilter;\n return resourceFilter ? resources.find(r => resourceFilter.selected.includes(r)) : resources[0];\n }\n }\n };\n // Must refresh when renderer changes\n updateEventRenderer() {\n this.refreshSoon();\n }\n /**\n * This is the standard way to create a {@link Core.helper.DomHelper#typedef-DomConfig}\n * element definition object for creating event bars in all view types.\n *\n * This may be used by application code which needs to create DOM structure for event bars, such\n * as in custom cell renderers in an {@link Calendar.widget.AgendaView}.\n *\n * @param {Object} renderData Context for the event bar config creation.\n * @param {Scheduler.model.EventModel} renderData.eventRecord The event record to create a {@link DomConfig} block for.\n * @param {Boolean} renderData.minimal If this is set, no inner content is rendered, only\n * the wrap and body element. This is to enable rendering placeholders such as bullets\n * to represent the presence of events.\n * @param {Date} renderData.date The date to create th DOM config for.\n * @param {Date} [renderData.eventEndDate] An optional override to the event's ending date.\n * @param {Function} [eventRenderer] Optionally a function which created content HTML for the\n * event body. Defaults to any {@link #config-eventRenderer} configured into this view.\n * @returns {DomConfig} A {@link Core.helper.DomHelper#typedef-DomConfig} element definition object\n */\n createEventDomConfig(renderData, eventRenderer = this.eventRenderer) {\n const\n me = this,\n {\n eventHeight,\n intradayCls,\n alldayCls,\n solidBarCls,\n pastEventCls,\n showTime,\n timeFormat,\n rtl\n } = me,\n calendar = me.up('calendar'),\n {\n eventRecord,\n minimal\n } = renderData,\n eventEndDate = renderData.eventEndDate || eventRecord.endingDate,\n resourceRecord = me.callback(me.getPrimaryResource, me, [eventRecord.isOccurrence ? eventRecord.recurringEvent : eventRecord]),\n isRecurring = eventRecord.isRecurring || eventRecord.isOccurrence,\n isAllDay = ('isAllDay' in renderData) ? renderData.isAllDay : me.isAllDayEvent?.(eventRecord),\n eventInnerStyle = {\n height : eventHeight !== 'auto' ? DomHelper.setLength(eventHeight) : null\n },\n eventSelectedCls = calendar?.eventSelectedCls,\n dataset = renderData.dataset = {\n eventId : eventRecord.id\n },\n eventStyle = Object.assign(DomHelper.parseStyle(resourceRecord?.eventStyle), DomHelper.parseStyle(eventRecord.style));\n let color = eventRecord.color || eventRecord.eventColor || resourceRecord?.eventColor || emptyString;\n // Make DomClassList copies for renderers to mutate.\n // We add our essential classes in after the renderer has run\n // then use these in the DomConfig object\n renderData.cls = eventRecord.cls.clone();\n renderData.solidBar = isAllDay || minimal;\n renderData.iconStyle = me.iconTarget === 'header' && me.showTime && !DomHelper.isNamedColor(color) ? { color } : {};\n renderData.iconCls = new DomClassList(eventRecord.iconCls); // Not a DomClassList, so not cloneable\n renderData.style = eventStyle;\n renderData.eventColor = color;\n renderData.eventHeight = eventHeight;\n renderData.cls[me.shortEventCls] = eventRecord.durationMS <= me.shortEventDuration;\n renderData.bodyStyle = {};\n if (resourceRecord?.cls) {\n renderData.cls.add(resourceRecord.cls);\n }\n // Allow subclasses to create body content differently.\n // DayView will create different content layout.\n let bodyContent = me.internalBodyContentRenderer(eventRecord, resourceRecord, renderData, !minimal && eventRenderer) ?? '',\n complexContent = typeof bodyContent !== 'string';\n if (eventRenderer && !minimal) {\n // Allow renderer to change the event height\n if (renderData.eventHeight !== eventHeight) {\n eventInnerStyle.height = DomHelper.setLength(renderData.eventHeight);\n }\n // If the renderer has replaced the DomClassList with a string, promote back to a DomClassList\n if (typeof renderData.cls === 'string') {\n renderData.cls = new DomClassList(renderData.cls);\n }\n // Same goes for iconCls\n if (typeof renderData.iconCls === 'string') {\n renderData.iconCls = new DomClassList(renderData.iconCls);\n }\n // If the renderer set it to be a string, reinstate it as an object so we can add our essential styles\n if (typeof renderData.style === 'string') {\n renderData.style = DomHelper.parseStyle(renderData.style);\n }\n // If the renderer set it to be a string, reinstate it as an object so we can add our essential styles\n if (typeof renderData.bodyStyle === 'string') {\n renderData.bodyStyle = DomHelper.parseStyle(renderData.bodyStyle);\n }\n }\n bodyContent = [{\n className : {\n 'b-cal-event-desc' : 1,\n 'b-cal-event-desc-complex' : complexContent\n },\n [complexContent ? 'children' : 'html'] : bodyContent\n }];\n // Add essential classes for eventWrap *after* the renderer has run\n Object.assign(renderData.cls, {\n 'b-cal-event-wrap' : 1,\n 'b-iscreating' : eventRecord.isCreating,\n 'b-readonly' : eventRecord.readOnly,\n 'b-minimal' : minimal,\n 'b-milestone' : eventRecord.isMilestone && !isAllDay,\n [alldayCls] : alldayCls && isAllDay,\n [solidBarCls] : solidBarCls && renderData.solidBar,\n [intradayCls] : intradayCls && !isAllDay,\n [pastEventCls] : pastEventCls && eventEndDate < new Date(),\n [eventSelectedCls] : eventSelectedCls && calendar?.isEventSelected(eventRecord),\n 'b-rtl' : rtl\n });\n color = renderData.eventColor;\n const { bodyColor } = renderData;\n if (bodyColor?.length) {\n renderData.cls['b-custom-body-color'] = 1;\n renderData.bodyStyle['--dayview-body-background-color'] = bodyColor;\n }\n if (color?.length) {\n // DomHelper.createColorStyle takes Non-CSS colors to be one of the predefined colors\n eventStyle['--cal-event-color'] = DomHelper.createColorStyle(color);\n }\n // All day event *bars* don't have a header.\n // But DayView can now be configured to not show the allDayHeader which means allDay events\n // go into tye day schedule as normal intraday event elements which *do* have a header.\n if (showTime && !(isAllDay && this.showAllDayHeader)) {\n bodyContent.unshift({\n className : 'b-event-header',\n children : [\n {\n className : 'b-event-time',\n html : DH.format(eventRecord.startDate, timeFormat)\n }\n ]\n });\n }\n const\n // Presence of icon classes triggers inclusion of an icon\n hasIcon = Boolean(renderData.iconCls?.length),\n useIconAsRecurrIcon = !hasIcon && isRecurring,\n showBullet = ('showBullet' in renderData) ? renderData.showBullet : me.showBullet === true || ((me.showBullet?.bar && renderData.solidBar) || (me.showBullet?.noBar && !renderData.solidBar)),\n showCircle = !hasIcon && !isRecurring && showBullet,\n iconElement = {\n tag : 'i',\n className : Object.assign({\n 'b-cal-event-icon' : !useIconAsRecurrIcon,\n 'b-cal-recurrence-icon' : useIconAsRecurrIcon,\n 'b-icon' : 1,\n 'b-fw-icon' : 1,\n 'b-icon-circle' : showCircle,\n 'b-icon-recurring' : useIconAsRecurrIcon\n }, renderData.iconCls),\n style : renderData.iconStyle\n },\n eventInnerContent = [{\n className : 'b-cal-event-body',\n children : bodyContent,\n style : renderData.bodyStyle\n }],\n iconParent =\n me.iconTarget === 'header' && me.showTime\n ? (bodyContent[0].children.length > 0 ? bodyContent[0].children : bodyContent)\n : eventInnerContent;\n // Only insert the icon DOM if we are showing any kind of icon, either\n // from an iconCls spec, or a recurrence icon, or showing a bullet via the showBullet config.\n if (hasIcon || useIconAsRecurrIcon || showCircle) {\n if (me.iconTarget === 'header' && me.showTime) {\n iconParent.push(iconElement);\n }\n else {\n iconParent.unshift(iconElement);\n }\n }\n // If the event had its own icon and is recurring, the recurrence icon is extra\n if (hasIcon && isRecurring) {\n iconParent.push({\n tag : 'i',\n className : {\n 'b-cal-recurrence-icon' : 1,\n 'b-icon' : 1,\n 'b-fw-icon' : 1,\n 'b-icon-recurring' : 1\n },\n style : renderData.iconStyle\n });\n }\n return {\n // Events are tabbable unless minimally rendered (dots)\n tabIndex : minimal ? null : 0,\n dataset,\n className : renderData.cls,\n style : renderData.style,\n children : [{\n className : 'b-cal-event',\n style : eventInnerStyle,\n children : minimal ? null : eventInnerContent\n }]\n };\n }\n internalBodyContentRenderer(eventRecord, resourceRecord, renderData, eventRenderer) {\n const\n me = this,\n { showResourceAvatars } = me,\n defaultBodyContent = eventRenderer && me.callback(eventRenderer, me, [{\n view : me,\n eventRecord,\n resourceRecord,\n renderData\n }]) ||\n // If creating a DayView event block, we inject for newlines\n StringHelper[me.eventHeight === 'auto' ? 'encodeHtmlBR' : 'encodeHtml'](eventRecord.name);\n // Only attempt to show avatars if there is an assignment Set.\n // It has to share with defaultBodyContent, so we will be creating a children array.\n // showResourceAvatars may specify whether it goes before or after the default content\n if (showResourceAvatars && eventRecord.assigned?.size) {\n const\n content = [{\n class : 'b-cal-event-resource-avatars',\n children : eventRecord.resources.map(resource => me.getResourceAvatar(resource))\n }],\n spliceArgs = [showResourceAvatars === 'last' ? 0 : 1, 0];\n if (eventRenderer) {\n // Assume it's HTML\n if (typeof defaultBodyContent === 'string') {\n spliceArgs.push({\n tag : 'span',\n html : defaultBodyContent\n });\n }\n // Else it's DomConfig\n else {\n spliceArgs.push[Array.isArray(defaultBodyContent) ? 'apply' : 'call'](spliceArgs, defaultBodyContent);\n }\n }\n else {\n spliceArgs.push({\n class : 'b-cal-event-name',\n text : defaultBodyContent\n });\n }\n content.splice(...spliceArgs);\n return content;\n }\n // Just return whatever the renderer returned or the default textual event name\n else {\n return defaultBodyContent;\n }\n }\n};\n", "import LocaleHelper from '../../Core/localization/LocaleHelper.js';\nimport '../../Scheduler/localization/En.js';\nconst locale = {\n localeName : 'En',\n localeDesc : 'English (US)',\n localeCode : 'en-US',\n EventEdit : {\n Calendar : 'Calendar',\n 'All day' : 'All day',\n day : 'Day',\n week : 'Week',\n month : 'Month',\n year : 'Year',\n decade : 'Decade'\n },\n EventMenu : {\n duplicateEvent : 'Duplicate event',\n copy : 'copy'\n },\n Calendar : {\n Today : 'Today',\n next : range => `Next ${range}`,\n previous : range => `Previous ${range}`,\n plusMore : value => `+${value} more`,\n allDay : 'All day',\n endsOn : d => `Ends ${d}`,\n weekOfYear : ([y, w]) => `Week ${w}, ${y}`,\n loadFail : 'Calendar data load failed. Please contact your system administrator'\n },\n CalendarDrag : {\n holdCtrlForRecurrence : 'Hold CTRL for a recurring event'\n },\n CalendarMixin : {\n eventCount : count => `${count || 'No'} event${count === 1 ? '' : 's'}`\n },\n EventTip : {\n 'Edit event' : 'Edit event',\n timeFormat : 'LST'\n },\n ModeSelector : {\n includeWeekends : 'Include weekends',\n weekends : 'Weekends'\n },\n AgendaView : {\n Agenda : 'Agenda'\n },\n MonthView : {\n Month : 'Month',\n monthUnit : 'month'\n },\n WeekView : {\n weekUnit : 'week'\n },\n YearView : {\n Year : 'Year',\n yearUnit : 'year',\n noEvents : 'No events'\n },\n EventList : {\n List : 'List',\n Start : 'Start',\n Finish : 'End',\n days : count => `${count > 1 ? `${count} ` : ''}day${count === 1 ? '' : 's'}`\n },\n DayView : {\n Day : 'Day',\n dayUnit : 'day',\n daysUnit : 'days',\n expandAllDayRow : 'Expand all-day section',\n collapseAllDayRow : 'Collapse all-day section',\n timeFormat : 'LST'\n },\n DayResourceView : {\n dayResourceView : 'Day resources'\n },\n Sidebar : {\n 'Filter events' : 'Filter events'\n },\n WeekExpander : {\n expandTip : 'Click to expand row',\n collapseTip : 'Click to collapse row'\n }\n};\nexport default LocaleHelper.publishLocale(locale);\n", "import Base from '../../../Core/Base.js';\nimport Config from '../../../Core/Config.js';\nimport Featureable from '../../../Core/mixin/Featureable.js';\nimport StringHelper from '../../../Core/helper/StringHelper.js';\nimport DomHelper from '../../../Core/helper/DomHelper.js';\nimport EventHelper from '../../../Core/helper/EventHelper.js';\nimport ObjectHelper from '../../../Core/helper/ObjectHelper.js';\nimport Responsive from '../../../Core/widget/mixin/Responsive.js';\nimport Rectangle from '../../../Core/helper/util/Rectangle.js';\nimport DH from '../../../Core/helper/DateHelper.js';\nimport CalendarFeature from '../../feature/CalendarFeature.js';\nimport CalendarStores from '../../mixin/CalendarStores.js';\nimport SchedulerInterface from '../../mixin/SchedulerInterface.js';\nimport EventRenderer from './EventRenderer.js';\nimport AvatarRendering from '../../../Core/widget/util/AvatarRendering.js';\nimport Describable from '../../../Scheduler/view/mixin/Describable.js';\n// This Mixin is the basis of the Calendar package, so it must load the default locale\nimport '../../localization/En.js';\nimport EventSorter from '../../util/EventSorter.js';\n/**\n * @module Calendar/widget/mixin/CalendarMixin\n */\nconst\n immediatePromise = Promise.resolve(),\n emptyObject = Object.freeze({}),\n { eventNameMap } = EventHelper,\n isFocusedCalendarMixin = w => w.isCalendarMixin && w.containsFocus;\n/**\n * Mixin that provides common handling methods and configs for Calendar widgets.\n *\n * This mixin also brings in the {@link Core.mixin.Featureable} mixin.\n *\n * @mixin\n * @mixes Scheduler/view/mixin/Describable\n * @mixes Calendar/widget/mixin/EventRenderer\n */\nexport default Target => class CalendarMixin extends (Target || Base).mixin(\n Describable,\n SchedulerInterface,\n Featureable,\n CalendarStores,\n EventRenderer,\n Responsive\n) {\n static $name = 'CalendarMixin';\n static get configurable() {\n return {\n //region Hidden configs\n /**\n * @event eventSelectionChange\n * @hide\n */\n /**\n * @hideconfigs htmlCls, autoUpdateRecord, record, textContent, content, html\n */\n /**\n * @hideproperties content, html\n */\n /**\n * A String which describes how much the {@link #function-next} and {@link #function-previous}\n * methods will move this view forwards or backwards in time.\n *\n * This is used to create the tooltip hints for the `nextButton` and `prevButton` in the\n * {@link Calendar.view.Calendar#property-tbar Calendar's toolbar}. If this property\n * is not defined, the `nextButton` and `prevButton` will be disabled when this view is active.\n *\n * Note that {@link Calendar.widget.WeekView} and {@link Calendar.widget.YearView} use a localized\n * string property to yield this value. Other view types implement a `get stepUnit` getter because\n * their step increments are variable.\n * @member {String} stepUnit\n * @readonly\n */\n //endregion\n localizableProperties : [\n 'autoCreate.newName', 'timeFormat', 'shortDateFormat', 'shortDateTimeFormat'\n ],\n eventStore : null,\n resourceStore : null,\n /**\n * A function which compares events which some views use to decide upon rendering order.\n *\n * Default sorter function are provided from the {@link Calendar.util.EventSorter} class.\n *\n * A custom sort function may be configured.\n *\n * Note that the two objects to compare may either be {@link Scheduler.model.EventModel}s\n * or {@link EventBar}s which contain an `eventRecord` property which is the {@link Scheduler.model.EventModel}.\n * @config {Function}\n * @param {Scheduler.model.EventModel|EventBar} lhs The left side value to conpare\n * @param {Scheduler.model.EventModel|EventBar} rhs The right side value to conpare\n * @returns {Number}\n */\n eventSorter : EventSorter.defaultSorterFn,\n responsive : {}, // brand as responsive so b-responsive-xxx CSS classes get added\n /**\n * Configure as `true` to hide {@link #config-nonWorkingDays}\n * @config {Boolean}\n */\n hideNonWorkingDays : null,\n hideNonWorkingDaysCls : 'b-hide-nonworking-days',\n /**\n * The week start day, 0 meaning Sunday, 6 meaning Saturday.\n * Defaults to {@link Core.helper.DateHelper#property-weekStartDay-static}.\n * @config {Number}\n */\n weekStartDay : DH.weekStartDay,\n /**\n * Non-working days as an object where keys are day indices, 0-6 (Sunday-Saturday), and the value is `true`.\n * Defaults to {@link Core.helper.DateHelper#property-nonWorkingDays-static}.\n * @config {Object