@syncfusion/ej2-spreadsheet
Version:
Feature-rich JavaScript Spreadsheet (Excel) control with built-in support for selection, editing, formatting, importing and exporting to Excel
959 lines (958 loc) • 47.8 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { addNote, editNote, deleteNote, showNote, removeNoteContainer, createNoteIndicator, updateNoteContainer, completeAction, setActionData, showHideNote, navigateNextPrevNote, showAllNotes, processSheetNotes, noteUndoRedo } from '../common/index';
import { isNullOrUndefined, EventHandler, closest, detach, getUniqueID } from '@syncfusion/ej2-base';
import { getCellIndexes, getRangeAddress, sheetsDestroyed } from '../../workbook/common/index';
import { getCell, updateCell, getSheetName, getRowHeight } from '../../workbook/index';
import { setCell, importModelUpdate, insert, deleteAction } from '../../workbook/index';
/**
* `Note` module
*/
var SpreadsheetNote = /** @class */ (function () {
/**
* Constructor for Note module.
*
* @param {Spreadsheet} parent - Constructor for Note module.
*/
function SpreadsheetNote(parent) {
/** @hidden */
this.activeNoteCell = null;
/** @hidden */
this.isShowAllNotes = false;
this.parent = parent;
this.addEventListener();
}
/**
* To destroy the Note module.
*
* @returns {void} - To destroy the Note module.
*/
SpreadsheetNote.prototype.destroy = function () {
var _this = this;
this.removeEventListener();
if (!this.parent.isDestroyed && !this.parent.refreshing) {
var noteIndicators = this.parent.element.getElementsByClassName('e-addNoteIndicator');
while (noteIndicators.length) {
var cellEle = closest(noteIndicators[0], '.e-cell');
if (cellEle) {
EventHandler.remove(cellEle, 'mouseover', this.mouseOver);
EventHandler.remove(cellEle, 'mouseout', this.mouseOut);
}
detach(noteIndicators[0]);
}
this.parent.sheets.forEach(function (sheet) {
if (sheet.notes) {
sheet.notes.forEach(function (note) { return _this.removeNoteElement(note); });
}
});
}
this.activeNoteCell = null;
this.isShowAllNotes = null;
this.parent = null;
};
SpreadsheetNote.prototype.addEventListener = function () {
this.parent.on(addNote, this.addNote, this);
this.parent.on(editNote, this.editNote, this);
this.parent.on(deleteNote, this.deleteNote, this);
this.parent.on(createNoteIndicator, this.createNoteIndicator, this);
this.parent.on(showNote, this.showNote, this);
this.parent.on(removeNoteContainer, this.removeNoteContainer, this);
this.parent.on(updateNoteContainer, this.updateNoteContainer, this);
this.parent.on(showHideNote, this.showHideNote, this);
this.parent.on(importModelUpdate, this.updateNotesFromSheet, this);
this.parent.on(navigateNextPrevNote, this.navigateNextPrevNote, this);
this.parent.on(showAllNotes, this.showAllNotes, this);
this.parent.on(insert, this.rowColumnInsertDeleteHandler, this);
this.parent.on(deleteAction, this.rowColumnInsertDeleteHandler, this);
this.parent.on(processSheetNotes, this.processSheetNotes, this);
this.parent.on(noteUndoRedo, this.noteUndoRedo, this);
this.parent.on(sheetsDestroyed, this.sheetDestroyHandler, this);
};
SpreadsheetNote.prototype.removeEventListener = function () {
if (!this.parent.isDestroyed) {
this.parent.off(addNote, this.addNote);
this.parent.off(editNote, this.editNote);
this.parent.off(showNote, this.showNote);
this.parent.off(deleteNote, this.deleteNote);
this.parent.off(createNoteIndicator, this.createNoteIndicator);
this.parent.off(removeNoteContainer, this.removeNoteContainer);
this.parent.off(updateNoteContainer, this.updateNoteContainer);
this.parent.off(showHideNote, this.showHideNote);
this.parent.off(importModelUpdate, this.updateNotesFromSheet);
this.parent.off(navigateNextPrevNote, this.navigateNextPrevNote);
this.parent.off(showAllNotes, this.showAllNotes);
this.parent.off(insert, this.rowColumnInsertDeleteHandler);
this.parent.off(deleteAction, this.rowColumnInsertDeleteHandler);
this.parent.off(processSheetNotes, this.processSheetNotes);
this.parent.off(noteUndoRedo, this.noteUndoRedo);
this.parent.off(sheetsDestroyed, this.sheetDestroyHandler);
}
};
/**
* Gets the module name.
*
* @returns {string} - Gets the module name.
*/
SpreadsheetNote.prototype.getModuleName = function () {
return 'spreadsheetNote';
};
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
SpreadsheetNote.prototype.rowColumnInsertDeleteHandler = function (args) {
var sheetIndex = args.eventArgs.activeSheetIndex;
var sheet = this.parent.sheets[sheetIndex];
if (!sheet || !sheet.notes || sheet.notes.length === 0) {
return;
}
if (args.action === 'insert') {
var _a = args.eventArgs, modelType = _a.modelType, index = _a.index, model = _a.model;
var count = model.length;
if (modelType === 'Row') {
this.handleRowsOperation(index, count, sheetIndex, true);
}
else if (modelType === 'Column') {
this.handleColumnsOperation(index, count, sheetIndex, true);
}
}
else if (args.action === 'delete') {
var _b = args.eventArgs, modelType = _b.modelType, startIndex = _b.startIndex, deletedModel = _b.deletedModel;
var count = deletedModel.length;
if (modelType === 'Row') {
this.handleRowsOperation(startIndex, count, sheetIndex, false);
}
else if (modelType === 'Column') {
this.handleColumnsOperation(startIndex, count, sheetIndex, false);
}
}
};
SpreadsheetNote.prototype.handleRowsOperation = function (startIndex, count, sheetIndex, isInsert) {
var _this = this;
var sheet = this.parent.sheets[sheetIndex];
if (!sheet.notes || sheet.notes.length === 0) {
return;
}
if (isInsert) {
sheet.notes.forEach(function (note) {
if (note.rowIdx >= startIndex) {
note.rowIdx += count;
updateCell(_this.parent, sheet, { rowIdx: note.rowIdx, colIdx: note.colIdx, preventEvt: true,
cell: { notes: note } });
}
});
}
else {
var notesToRemove_1 = [];
var notesToKeep_1 = [];
sheet.notes.forEach(function (note) {
if (note.rowIdx >= startIndex) {
if (note.rowIdx < startIndex + count) {
notesToRemove_1.push(note);
}
else {
note.rowIdx -= count;
notesToKeep_1.push(note);
updateCell(_this.parent, sheet, { rowIdx: note.rowIdx, colIdx: note.colIdx, preventEvt: true,
cell: { notes: note } });
}
}
else {
notesToKeep_1.push(note);
}
});
if (notesToRemove_1.length > 0) {
notesToRemove_1.forEach(function (note) { return _this.removeNoteElement(note); });
sheet.notes = notesToKeep_1;
}
}
this.parent.notify(updateNoteContainer, null);
};
SpreadsheetNote.prototype.handleColumnsOperation = function (startIndex, count, sheetIndex, isInsert) {
var _this = this;
var sheet = this.parent.sheets[sheetIndex];
if (!sheet.notes || sheet.notes.length === 0) {
return;
}
if (isInsert) {
sheet.notes.forEach(function (note) {
if (note.colIdx >= startIndex) {
note.colIdx += count;
updateCell(_this.parent, sheet, { rowIdx: note.rowIdx, colIdx: note.colIdx, preventEvt: true,
cell: { notes: note } });
}
});
}
else {
var notesToRemove_2 = [];
var notesToKeep_2 = [];
sheet.notes.forEach(function (note) {
if (note.colIdx >= startIndex) {
if (note.colIdx < startIndex + count) {
notesToRemove_2.push(note);
}
else {
note.colIdx -= count;
notesToKeep_2.push(note);
updateCell(_this.parent, sheet, { rowIdx: note.rowIdx, colIdx: note.colIdx, preventEvt: true,
cell: { notes: note } });
}
}
else {
notesToKeep_2.push(note);
}
});
if (notesToRemove_2.length > 0) {
notesToRemove_2.forEach(function (note) { return _this.removeNoteElement(note); });
sheet.notes = notesToKeep_2;
}
}
this.parent.notify(updateNoteContainer, null);
};
SpreadsheetNote.prototype.getNoteId = function (note) {
return "e-note-container-" + note.id;
};
SpreadsheetNote.prototype.getNoteConnectorId = function (note) {
return "e-note-connector-" + note.id;
};
SpreadsheetNote.prototype.getNoteByCellIndex = function (rowIndex, columnIndex) {
var sheet = this.parent.getActiveSheet();
if (sheet && sheet.notes) {
return sheet.notes.find(function (note) { return note.rowIdx === rowIndex && note.colIdx === columnIndex; });
}
return undefined;
};
SpreadsheetNote.prototype.showHideNote = function () {
var sheet = this.parent.getActiveSheet();
var idx = getCellIndexes(sheet.activeCell);
var note = this.getNoteByCellIndex(idx[0], idx[1]);
if (note) {
note.isVisible = !note.isVisible;
updateCell(this.parent, sheet, { rowIdx: note.rowIdx, colIdx: note.colIdx, preventEvt: true,
cell: { notes: note } });
if (note.isVisible) {
this.parent.notify(showNote, { rowIndex: idx[0], columnIndex: idx[1], isNoteEditable: false, isScrollWithNote: true });
}
else {
this.removeNoteElement(note);
}
}
};
SpreadsheetNote.prototype.addNote = function () {
var sheet = this.parent.getActiveSheet();
var cellIndexes = getCellIndexes(this.parent.getActiveSheet().activeCell);
var targetElement = this.parent.getCell(cellIndexes[0], cellIndexes[1]);
if (!isNullOrUndefined(targetElement) && ((targetElement.children.length === 0) || (targetElement.children.length > 0 && targetElement.children[targetElement.childElementCount - 1].className.indexOf('e-addNoteIndicator') === -1))) {
var note = { id: getUniqueID('e_note'), rowIdx: cellIndexes[0], colIdx: cellIndexes[1], text: '', isVisible: this.isShowAllNotes };
if (!sheet.notes) {
sheet.notes = [];
}
this.activeNoteCell = [cellIndexes[0], cellIndexes[1]];
updateCell(this.parent, sheet, { rowIdx: cellIndexes[0], colIdx: cellIndexes[1], preventEvt: true, cell: { isNoteEditable: true } });
this.insertNoteSorted(sheet, note);
this.createNoteIndicator({ targetElement: targetElement, rowIndex: cellIndexes[0], columnIndex: cellIndexes[1] });
this.createNoteContainer(note, targetElement, false, true, false, sheet.name + "!" + sheet.activeCell);
}
};
SpreadsheetNote.prototype.deleteNote = function (args) {
var sheet = this.parent.getActiveSheet();
var cellIndexes = getCellIndexes(this.parent.getActiveSheet().activeCell);
var rowIndex = !isNullOrUndefined(args) && !isNullOrUndefined(args.rowIndex) ? args.rowIndex : cellIndexes[0];
var columnIndex = !isNullOrUndefined(args) && !isNullOrUndefined(args.columnIndex) ? args.columnIndex : cellIndexes[1];
var targetElement = this.parent.getCell(rowIndex, columnIndex);
if (targetElement.children.length > 0 && targetElement.children[targetElement.children.length - 1].className.indexOf('e-addNoteIndicator') > -1) {
targetElement.removeChild(targetElement.children[targetElement.children.length - 1]);
EventHandler.remove(targetElement, 'mouseover', this.mouseOver);
EventHandler.remove(targetElement, 'mouseout', this.mouseOut);
var address = getSheetName(this.parent, this.parent.activeSheetIndex) + '!' + this.parent.getActiveSheet().activeCell;
var note = this.getNoteByCellIndex(rowIndex, columnIndex);
if (!isNullOrUndefined(args) && args.isDeleteFromMenu) {
this.parent.notify(setActionData, { args: { action: 'beforeCellSave', eventArgs: { address: address } } });
}
if (note) {
this.removeNoteElement(note);
}
this.syncNoteToSheetArray(sheet, rowIndex, columnIndex, null);
var cell = getCell(rowIndex, columnIndex, sheet);
if (cell && cell.notes) {
delete cell.notes;
updateCell(this.parent, sheet, { rowIdx: rowIndex, colIdx: columnIndex, preventEvt: true, cell: cell });
}
if (this.activeNoteCell && this.activeNoteCell[0] === rowIndex && this.activeNoteCell[1] === columnIndex) {
this.activeNoteCell = null;
}
if (!isNullOrUndefined(args) && args.isDeleteFromMenu) {
var eventArgs = { notes: note, address: address };
this.parent.notify(completeAction, { eventArgs: eventArgs, action: 'deleteNote' });
}
}
};
SpreadsheetNote.prototype.editNote = function () {
var cellIndexes = !isNullOrUndefined(this.activeNoteCell) ?
this.activeNoteCell : getCellIndexes(this.parent.getActiveSheet().activeCell);
var note = this.getNoteByCellIndex(cellIndexes[0], cellIndexes[1]);
if (note) {
this.showNote({ rowIndex: cellIndexes[0], columnIndex: cellIndexes[1], isNoteEditable: true });
var noteContainerElement = document.getElementById(this.getNoteId(note));
updateCell(this.parent, this.parent.getActiveSheet(), { rowIdx: cellIndexes[0], colIdx: cellIndexes[1], preventEvt: true,
cell: { isNoteEditable: true } });
if (noteContainerElement) {
this.getNoteFocus(noteContainerElement);
}
}
};
SpreadsheetNote.prototype.createNoteIndicator = function (args) {
var triangleDirection = this.parent.enableRtl
? 'left: 0; border-right: 8px solid transparent;' : 'right: 0; border-left: 8px solid transparent;';
var noteIndicator = this.parent.createElement('div', { className: 'e-addNoteIndicator',
styles: "position: absolute; top: 0; width: 0; height: 0; border-top: 8px solid red; cursor: pointer; " + triangleDirection });
if (args.targetElement.children.length > 0) {
var rowHeight = getRowHeight(this.parent.getActiveSheet(), args.rowIndex);
var defaultFilterButtonHeight = 20;
for (var i = 0; i < args.targetElement.childElementCount; i++) {
if (args.targetElement.children[i].className.indexOf('e-filter-btn') > -1) {
if (this.parent.enableRtl) {
noteIndicator.style.left = (rowHeight < (defaultFilterButtonHeight + 10) ?
(args.targetElement.children[i].getBoundingClientRect().width <= 0 ? defaultFilterButtonHeight :
args.targetElement.children[i].getBoundingClientRect().width) : 0 + 2) + 'px';
}
else {
noteIndicator.style.right = (rowHeight < (defaultFilterButtonHeight + 10) ?
(args.targetElement.children[i].getBoundingClientRect().width <= 0 ? defaultFilterButtonHeight :
args.targetElement.children[i].getBoundingClientRect().width) : 0 + 2) + 'px';
}
}
if (args.targetElement.children[i].className.indexOf('e-validation-list') > -1) {
if (this.parent.enableRtl) {
noteIndicator.style.left = (args.targetElement.children[i].getBoundingClientRect().width || 20) + 2 + "px";
}
else {
noteIndicator.style.right = (args.targetElement.children[i].getBoundingClientRect().width || 20) + 2 + "px";
}
}
}
}
if (!isNullOrUndefined(args.targetElement) && (args.targetElement.children.length === 0) || (args.targetElement.children.length > 0 && args.targetElement.children[args.targetElement.childElementCount - 1].className.indexOf('e-addNoteIndicator') === -1)) {
if (args.cell && typeof args.cell.notes === 'string') {
var note = { id: getUniqueID('e_note'), rowIdx: args.rowIndex, colIdx: args.columnIndex,
text: args.cell.notes, isVisible: this.isShowAllNotes };
args.cell.notes = note;
var sheet = this.parent.getActiveSheet();
updateCell(this.parent, sheet, { rowIdx: args.rowIndex, colIdx: args.columnIndex, preventEvt: true, cell: { notes: note } });
this.syncNoteToSheetArray(sheet, note.rowIdx, note.colIdx, note);
}
if (!args.skipEvent) {
EventHandler.add(args.targetElement, 'mouseover', this.mouseOver, [this, args.rowIndex, args.columnIndex]);
EventHandler.add(args.targetElement, 'mouseout', this.mouseOut, this);
}
args.targetElement.appendChild(noteIndicator);
}
};
SpreadsheetNote.prototype.mouseOver = function () {
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
var args = this;
var noteModule = args[0];
var rowIndex = args[1];
var columnIndex = args[2];
var note = noteModule.getNoteByCellIndex(rowIndex, columnIndex);
if (!note || note.isVisible) {
return;
}
var sheet = noteModule.parent.getActiveSheet();
if (sheet.notes) {
var isOtherNoteEditState_1;
sheet.notes.forEach(function (note) {
if ((note.rowIdx !== rowIndex || note.colIdx !== columnIndex)) {
var cell = note.rowIdx !== undefined && getCell(note.rowIdx, note.colIdx, sheet, false, true);
if (cell && cell.isNoteEditable) {
isOtherNoteEditState_1 = true;
}
else if (!note.isVisible) {
noteModule.removeNoteElement(note);
}
}
});
if (isOtherNoteEditState_1) {
return;
}
}
noteModule.activeNoteCell = [rowIndex, columnIndex];
if (!note || !noteModule.isNoteElementVisible(note)) {
noteModule.showNote({ rowIndex: rowIndex, columnIndex: columnIndex, isNoteEditable: false });
}
};
SpreadsheetNote.prototype.mouseOut = function (e) {
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
var args = this;
var noteModule = args[0] ? args[0] : this.parent.spreadsheetNoteModule;
var rowIndex = !isNullOrUndefined(args[1]) ? args[1] : (this.activeNoteCell ? this.activeNoteCell[0] : undefined);
var columnIndex = !isNullOrUndefined(args[2]) ? args[2] : (this.activeNoteCell ? this.activeNoteCell[1] : undefined);
var note = noteModule.getNoteByCellIndex(rowIndex, columnIndex);
if (!note || note.isVisible) {
return;
}
var relatedTarget = e.relatedTarget;
var noteId = noteModule.getNoteId(note);
var noteContainer = noteId && document.getElementById(noteId);
var noteConnectorId = noteModule.getNoteConnectorId(note);
var noteConnector = noteConnectorId && document.getElementById(noteConnectorId);
if (noteContainer) {
if (!(document.activeElement.className.indexOf('e-addNoteContainer') > -1 ||
(relatedTarget && ((relatedTarget === noteContainer) || (relatedTarget === noteConnector))))) {
noteModule.removeNoteElement(note);
this.activeNoteCell = null;
}
}
};
SpreadsheetNote.prototype.isNoteElementVisible = function (note) {
var noteContainer = document.getElementById(this.getNoteId(note));
return noteContainer && noteContainer.style.display !== 'none';
};
SpreadsheetNote.prototype.containerFocusIn = function (e) {
e.target.style.zIndex = '6';
};
SpreadsheetNote.prototype.containerFocusOut = function (e) {
e.target.style.zIndex = '5';
};
SpreadsheetNote.prototype.createNoteContainer = function (note, targetElement, isShowNote, isNoteEditable, isRender, address) {
var cellRect = targetElement.getBoundingClientRect();
var noteId = this.getNoteId(note);
var connectorId = this.getNoteConnectorId(note);
var noteContainer = document.getElementById(noteId);
var connectorLine = document.getElementById(connectorId);
if (noteContainer && connectorLine) {
this.updateExistingNoteDisplay(noteContainer, connectorLine, note, cellRect, isShowNote, isNoteEditable, isRender);
}
else {
noteContainer = this.parent.createElement('textarea', { id: noteId, className: 'e-addNoteContainer' });
connectorLine = this.parent.createElement('canvas', { id: connectorId, className: 'e-connectorLine' });
this.createContainer(noteContainer, note, cellRect, isShowNote, isRender);
this.createConnectorLine(connectorLine, noteContainer, cellRect);
if (address) {
var eventArgs = { notes: note, noteContainer: noteContainer, address: address };
this.parent.notify(completeAction, { eventArgs: eventArgs, action: 'addNoteOpen' });
}
if (isNoteEditable) {
this.getNoteFocus(noteContainer);
}
EventHandler.add(noteContainer, 'focus', this.containerFocusIn, this);
EventHandler.add(noteContainer, 'blur', this.containerFocusOut, this);
EventHandler.add(noteContainer, 'mouseout', this.mouseOut, [this, note.rowIdx, note.colIdx]);
EventHandler.add(connectorLine, 'mouseout', this.mouseOut, [this, note.rowIdx, note.colIdx]);
}
EventHandler.remove(targetElement, 'mouseout', this.mouseOut);
EventHandler.add(targetElement, 'mouseout', this.mouseOut, [this, note.rowIdx, note.colIdx]);
};
SpreadsheetNote.prototype.updateExistingNoteDisplay = function (noteContainer, connectorLine, note, cellRect, isShowNote, isNoteEditable, isRender) {
this.createContainer(noteContainer, note, cellRect, isShowNote, isRender);
this.createConnectorLine(connectorLine, noteContainer, cellRect);
if (isShowNote && (!noteContainer.value || noteContainer.value !== note.text)) {
noteContainer.value = note.text || '';
}
if (isNoteEditable) {
this.getNoteFocus(noteContainer);
}
};
SpreadsheetNote.prototype.getNoteFocus = function (noteContainerElement) {
noteContainerElement.selectionStart = noteContainerElement.value.length;
noteContainerElement.focus();
};
SpreadsheetNote.prototype.createContainer = function (noteContainer, note, cellRect, isShowNote, isRender) {
var containerTop = 5;
var selectAllCell = this.parent.element.getElementsByClassName('e-select-all-cell')[0];
var scroller = this.parent.element.getElementsByClassName('e-scroller')[0];
if (!isNullOrUndefined(selectAllCell) && !isNullOrUndefined(scroller) &&
cellRect.top >= selectAllCell.getBoundingClientRect().bottom &&
cellRect.bottom <= scroller.getBoundingClientRect().top) {
var isViewableArea = this.parent.enableRtl ?
cellRect.left <= selectAllCell.getBoundingClientRect().left &&
cellRect.left >= scroller.getBoundingClientRect().left :
cellRect.right >= selectAllCell.getBoundingClientRect().right &&
cellRect.right <= scroller.getBoundingClientRect().right;
if (isViewableArea) {
noteContainer.style.display = 'block';
containerTop = cellRect.top === selectAllCell.getBoundingClientRect().bottom ? 0 : containerTop;
}
else {
noteContainer.style.display = 'none';
}
}
else {
noteContainer.style.display = 'none';
}
var elementClientRect = this.parent.element.getBoundingClientRect();
var elementPosition = this.parent.element.style.getPropertyValue('position');
noteContainer.style.position = 'absolute';
noteContainer.style.top = (cellRect.top - (elementClientRect.top - (elementPosition === 'absolute' ? 0 :
this.parent.element.offsetTop)) - containerTop) + 'px';
var leftPos;
var noteWidth = 120;
var offsetLeft = (elementPosition === 'absolute' ? 0 : this.parent.element.offsetLeft);
if (this.parent.enableRtl) {
leftPos = cellRect.left - (elementClientRect.left - offsetLeft) - noteWidth - 10;
}
else {
leftPos = cellRect.left + cellRect.width - (elementClientRect.left - offsetLeft) + 10;
}
noteContainer.style.left = leftPos + "px";
noteContainer.style.width = noteContainer.style.width || noteWidth + "px";
noteContainer.style.height = noteContainer.style.height || '120px';
noteContainer.style.zIndex = '5';
noteContainer.style.color = 'black';
noteContainer.style.backgroundColor = 'lightyellow';
if (isShowNote && !isNullOrUndefined(note) && !isNullOrUndefined(note.text)) {
noteContainer.innerHTML = note.text;
}
else {
noteContainer.innerHTML = this.parent.author ? this.parent.author + ':\n' : '';
}
var isActiveNote = isRender && document.activeElement === noteContainer;
this.parent.element.appendChild(noteContainer);
if (isActiveNote) {
this.getNoteFocus(noteContainer);
}
};
SpreadsheetNote.prototype.createConnectorLine = function (connectorLine, noteContainer, cellRect) {
var lineWidth = 100;
connectorLine.style.width = lineWidth + "px";
connectorLine.style.position = 'absolute';
connectorLine.style.zIndex = '1';
var context = connectorLine.getContext('2d');
var elementClientRect = this.parent.element.getBoundingClientRect();
var elementPosition = this.parent.element.style.getPropertyValue('position');
var offsetLeft = (elementPosition === 'absolute' ? 0 : this.parent.element.offsetLeft);
if (this.parent.enableRtl) {
connectorLine.style.left = cellRect.left - (elementClientRect.left - offsetLeft) - lineWidth + 'px';
connectorLine.style.transform = 'scaleX(-1)';
}
else {
connectorLine.style.left = cellRect.left + cellRect.width - (elementClientRect.left - offsetLeft) + 'px';
}
connectorLine.style.top = (noteContainer.getBoundingClientRect().top - (elementClientRect.top - (elementPosition === 'absolute' ?
0 : this.parent.element.offsetTop)) - 5) + 'px';
context.clearRect(0, 0, connectorLine.width, connectorLine.height);
context.beginPath();
if (noteContainer.getBoundingClientRect().top === cellRect.top) {
context.moveTo(0, 16);
context.lineTo(30, 15);
}
else {
context.moveTo(0, 30);
context.lineTo(30, 15);
}
context.strokeStyle = 'black';
context.lineWidth = 5;
context.stroke();
this.parent.element.appendChild(connectorLine);
if (noteContainer.getBoundingClientRect().top > 0) {
connectorLine.style.display = 'block';
connectorLine.style.zIndex = '4';
}
else {
connectorLine.style.display = 'none';
}
};
SpreadsheetNote.prototype.showNote = function (args) {
var note = this.getNoteByCellIndex(args.rowIndex, args.columnIndex);
if (note) {
var targetElement = !isNullOrUndefined(this.parent.getCell(args.rowIndex, args.columnIndex)) ?
this.parent.getCell(args.rowIndex, args.columnIndex) : args.cellElement;
if (!isNullOrUndefined(targetElement)
&& (args.isScrollWithNote || (targetElement.children !== null && targetElement.children.length > 0 &&
targetElement.children[targetElement.children.length - 1].classList.contains('e-addNoteIndicator')))) {
this.activeNoteCell = [args.rowIndex, args.columnIndex];
this.createNoteContainer(note, targetElement, true, args.isNoteEditable, args.isRender);
}
}
};
SpreadsheetNote.prototype.removeNoteContainer = function (args) {
var _this = this;
var sheet = this.parent.getActiveSheet();
if (args && !isNullOrUndefined(args.rowIndex) && !isNullOrUndefined(args.columnIndex)) {
var cell = getCell(args.rowIndex, args.columnIndex, sheet, false, true);
var note = cell.notes;
if (note) {
this.removeNoteElement(note);
}
}
else if (isNullOrUndefined(args)) {
if (sheet.notes) {
sheet.notes.forEach(function (note) {
if (!note.isVisible) {
_this.removeNoteElement(note);
}
});
}
}
};
SpreadsheetNote.prototype.removeNoteElement = function (note) {
var noteContainer = document.getElementById(this.getNoteId(note));
var connectorLine = document.getElementById(this.getNoteConnectorId(note));
if (noteContainer) {
EventHandler.remove(noteContainer, 'mouseout', this.mouseOut);
EventHandler.remove(noteContainer, 'focus', this.containerFocusIn);
EventHandler.remove(noteContainer, 'blur', this.containerFocusOut);
if (this.parent.element.contains(noteContainer)) {
this.parent.element.removeChild(noteContainer);
}
}
if (connectorLine) {
EventHandler.remove(connectorLine, 'mouseout', this.mouseOut);
if (this.parent.element.contains(connectorLine)) {
this.parent.element.removeChild(connectorLine);
}
}
var targetElement = this.parent.getCell(note.rowIdx, note.colIdx);
if (targetElement) {
EventHandler.remove(targetElement, 'mouseout', this.mouseOut);
}
if (this.activeNoteCell && this.activeNoteCell[0] === note.rowIdx && this.activeNoteCell[1] === note.colIdx) {
this.activeNoteCell = null;
}
var cell = note.rowIdx !== undefined && getCell(note.rowIdx, note.colIdx, this.parent.getActiveSheet(), false, true);
if (cell && cell.notes && cell.isNoteEditable) {
cell.isNoteEditable = false;
}
};
SpreadsheetNote.prototype.updateNoteContainer = function () {
var _this = this;
var sheet = this.parent.getActiveSheet();
this.removeNoteElementsFromOtherSheets();
if (!sheet.notes || sheet.notes.length === 0) {
this.parent.selectionModule.isNoteActiveElement = false;
if (this.activeNoteCell) {
this.activeNoteCell = null;
}
return;
}
this.parent.selectionModule.isNoteActiveElement = false;
var activeNoteFound = false;
sheet.notes.forEach(function (note) {
var noteContainer = document.getElementById(_this.getNoteId(note));
var hasFocus = noteContainer ? (document.activeElement === noteContainer ||
(note.rowIdx !== undefined && getCell(note.rowIdx, note.colIdx, sheet, false, true).isNoteEditable)) : false;
if (hasFocus) {
activeNoteFound = true;
_this.parent.selectionModule.isNoteActiveElement = true;
_this.activeNoteCell = [note.rowIdx, note.colIdx];
if ((isNullOrUndefined(note.text) && noteContainer.value) || note.text !== noteContainer.value) {
var address = getSheetName(_this.parent, _this.parent.activeSheetIndex) + '!' + getRangeAddress([note.rowIdx, note.colIdx]);
_this.parent.notify(setActionData, { args: { action: 'beforeCellSave', eventArgs: { address: address } } });
var eventAction = note.text ? 'editNote' : 'addNote';
note.text = noteContainer.value;
updateCell(_this.parent, sheet, { rowIdx: note.rowIdx, colIdx: note.colIdx, preventEvt: true,
cell: { notes: note, isNoteEditable: true } });
_this.syncNoteToSheetArray(sheet, note.rowIdx, note.colIdx, note);
var eventArgs = { notes: note, address: address };
_this.parent.notify(completeAction, { eventArgs: eventArgs, action: eventAction });
}
}
if (note.isVisible || hasFocus) {
_this.parent.notify(showNote, { rowIndex: note.rowIdx, columnIndex: note.colIdx, isNoteEditable: hasFocus,
isScrollWithNote: true });
}
else {
_this.removeNoteElement(note);
}
});
if (!activeNoteFound) {
this.activeNoteCell = null;
}
};
SpreadsheetNote.prototype.sheetDestroyHandler = function (args) {
var _this = this;
var noteContainers = [].slice.call(this.parent.element.getElementsByClassName('e-addNoteContainer'));
noteContainers.forEach(function (noteContainer) {
EventHandler.remove(noteContainer, 'mouseout', _this.mouseOut);
EventHandler.remove(noteContainer, 'focus', _this.containerFocusIn);
EventHandler.remove(noteContainer, 'blur', _this.containerFocusOut);
noteContainer.parentElement.removeChild(noteContainer);
});
var connectorLines = [].slice.call(this.parent.element.getElementsByClassName('e-connectorLine'));
connectorLines.forEach(function (connectorLine) {
EventHandler.remove(connectorLine, 'mouseout', _this.mouseOut);
connectorLine.parentElement.removeChild(connectorLine);
});
if (isNullOrUndefined(args.sheetIndex)) {
this.isShowAllNotes = false;
}
this.activeNoteCell = null;
};
SpreadsheetNote.prototype.removeNoteElementsFromOtherSheets = function () {
var _this = this;
var activeSheetIndex = this.parent.activeSheetIndex;
this.parent.sheets.forEach(function (sheet, index) {
if (index === activeSheetIndex) {
return;
}
if (sheet.notes) {
sheet.notes.forEach(function (note) {
_this.removeNoteElement(note);
});
}
});
};
SpreadsheetNote.prototype.lowerBoundByAddress = function (coll, addr) {
var low = 0;
var high = coll.length;
while (low < high) {
var mid = Math.floor((low + high) / 2);
var _a = this.getNoteAddr(coll[mid]), midRow = _a[0], midCol = _a[1];
if (midRow < addr[0] || (midRow === addr[0] && midCol < addr[1])) {
low = mid + 1;
}
else {
high = mid;
}
}
return low;
};
SpreadsheetNote.prototype.insertNoteSorted = function (sheet, note) {
if (!sheet.notes) {
sheet.notes = [];
}
var idx = this.lowerBoundByAddress(sheet.notes, this.getNoteAddr(note));
sheet.notes.splice(idx, 0, note);
};
SpreadsheetNote.prototype.getNoteAddr = function (note) {
return [note.rowIdx, note.colIdx];
};
SpreadsheetNote.prototype.navigateNextPrevNote = function (args) {
var sheetCount = this.parent.sheets.length;
var startSheetIdx = this.parent.activeSheetIndex;
var activeSheet = this.parent.getActiveSheet();
var addr = getCellIndexes(activeSheet.activeCell);
var currentColl = activeSheet.notes ? activeSheet.notes : [];
if (currentColl.length > 0) {
var pos = this.lowerBoundByAddress(currentColl, [addr[0], addr[1]]);
var exactIdx = -1;
if (pos < currentColl.length) {
var note = currentColl[pos];
if (note.rowIdx === addr[0] && note.colIdx === addr[1]) {
exactIdx = pos;
}
}
if (exactIdx === -1 && pos > 0) {
var prevNote = currentColl[pos - 1];
if (prevNote.rowIdx === addr[0] && prevNote.colIdx === addr[1]) {
exactIdx = pos - 1;
}
}
var idx = args.isNext ? (exactIdx > -1 ? exactIdx + 1 : pos) : (exactIdx > -1 ? exactIdx - 1 : pos - 1);
if (idx >= 0 && idx < currentColl.length) {
this.navigateToNote(currentColl[idx], startSheetIdx);
return;
}
}
for (var i = 1; i < sheetCount; i++) {
var sheetIdx = (startSheetIdx + (args.isNext ? i : -i) + sheetCount) % sheetCount;
var sheet = this.parent.sheets[sheetIdx];
if (sheet.notes && sheet.notes.length > 0) {
var note = args.isNext ? sheet.notes[0] : sheet.notes[sheet.notes.length - 1];
this.navigateToNote(note, sheetIdx);
return;
}
}
if (currentColl.length > 0) {
var note = args.isNext ? currentColl[0] : currentColl[currentColl.length - 1];
if (note.rowIdx !== addr[0] || note.colIdx !== addr[1]) {
this.navigateToNote(note, startSheetIdx);
}
}
};
SpreadsheetNote.prototype.navigateToNote = function (note, sheetIndex) {
var _this = this;
var sheetName = getSheetName(this.parent, sheetIndex);
var address = getRangeAddress([note.rowIdx, note.colIdx]);
this.parent.goTo(sheetName + "!" + address);
setTimeout(function () {
_this.activeNoteCell = [note.rowIdx, note.colIdx];
_this.parent.notify(editNote, null);
});
};
SpreadsheetNote.prototype.showAllNotes = function () {
var _this = this;
this.isShowAllNotes = !this.isShowAllNotes;
this.parent.sheets.forEach(function (sheet) {
if (sheet.notes) {
sheet.notes.forEach(function (note) {
note.isVisible = _this.isShowAllNotes;
updateCell(_this.parent, sheet, { rowIdx: note.rowIdx, colIdx: note.colIdx, preventEvt: true,
cell: { notes: __assign({}, note, { isVisible: _this.isShowAllNotes }) } });
});
}
});
var activeSheet = this.parent.getActiveSheet();
if (activeSheet && activeSheet.notes) {
activeSheet.notes.forEach(function (note) {
if (_this.isShowAllNotes) {
_this.parent.notify(showNote, { rowIndex: note.rowIdx, columnIndex: note.colIdx, isNoteEditable: false,
isScrollWithNote: true });
}
else {
_this.removeNoteElement(note);
}
});
}
};
SpreadsheetNote.prototype.updateNotesFromSheet = function () {
var cell;
this.parent.sheets.forEach(function (sheet) {
if (sheet.notes && sheet.notes.length > 0) {
sheet.notes.forEach(function (note) {
if (note.address) {
note.rowIdx = note.address[0];
note.colIdx = note.address[1];
delete note.address;
note.id = getUniqueID('e_note');
cell = getCell(note.rowIdx, note.colIdx, sheet);
if (cell) {
cell.notes = note;
}
else {
setCell(note.rowIdx, note.colIdx, sheet, { notes: note });
}
}
});
}
});
};
SpreadsheetNote.prototype.processSheetNotes = function (args) {
var sheet = args.sheet;
if (!sheet.notes) {
sheet.notes = [];
}
if (args.isDelete) {
if (args.id) {
var noteIndex = sheet.notes.findIndex(function (n) { return n.id === args.id; });
if (noteIndex > -1) {
var noteToRemove = sheet.notes[noteIndex];
this.removeNoteElement(noteToRemove);
sheet.notes.splice(noteIndex, 1);
}
}
}
else if (args.note) {
var note = args.note;
if (!note.id) {
note.id = getUniqueID('e_note');
}
if (isNullOrUndefined(note.isVisible)) {
note.isVisible = false;
}
this.syncNoteToSheetArray(sheet, note.rowIdx, note.colIdx, note);
if (args.isRefresh && !isNullOrUndefined(args.sheetIdx) && args.sheetIdx === this.parent.activeSheetIndex) {
var targetElement = this.parent.getCell(note.rowIdx, note.colIdx);
if (targetElement) {
if (!targetElement.querySelector('.e-addNoteIndicator')) {
this.createNoteIndicator({
targetElement: targetElement, rowIndex: note.rowIdx,
columnIndex: note.colIdx, skipEvent: false
});
}
if (note.isVisible) {
this.showNote({
rowIndex: note.rowIdx, columnIndex: note.colIdx, isNoteEditable: false,
isScrollWithNote: true, cellElement: targetElement
});
}
}
}
}
};
SpreadsheetNote.prototype.syncNoteToSheetArray = function (sheet, rowIdx, colIdx, note) {
if (!sheet.notes) {
sheet.notes = [];
}
var existingIdx = sheet.notes.findIndex(function (n) { return n.rowIdx === rowIdx && n.colIdx === colIdx; });
if (note) {
if (existingIdx > -1) {
sheet.notes[existingIdx] = note;
}
else {
this.insertNoteSorted(sheet, note);
}
}
else {
if (existingIdx > -1) {
sheet.notes.splice(existingIdx, 1);
}
}
};
SpreadsheetNote.prototype.detachNoteIndicator = function (rowIdx, colIdx) {
var cellElement = this.parent.getCell(rowIdx, colIdx);
if (cellElement) {
var indicator = cellElement.querySelector('.e-addNoteIndicator');
if (indicator) {
EventHandler.remove(indicator, 'mouseover', this.mouseOver);
EventHandler.remove(indicator, 'mouseout', this.mouseOut);
delete indicator.dataset.commentListenersAdded;
delete indicator.dataset.commentRowIndex;
delete indicator.dataset.commentColIndex;
detach(indicator);
}
}
};
SpreadsheetNote.prototype.noteUndoRedo = function (args) {
if (args && args.cellIdx && !isNullOrUndefined(args.sheetIdx)) {
var sheet = this.parent.sheets[args.sheetIdx];
var row_1 = args.cellIdx[0];
var col_1 = args.cellIdx[1];
if (!sheet.notes) {
sheet.notes = [];
}
var cell = getCell(row_1, col_1, sheet);
var model = cell && cell.notes;
var existing_1 = sheet.notes.find(function (n) { return n.rowIdx === row_1 && n.colIdx === col_1; });
if (model) {
if (existing_1) {
var idxInColl = sheet.notes.findIndex(function (n) { return n.id === existing_1.id; });
if (idxInColl > -1) {
if (model.id !== existing_1.id) {
model.id = existing_1.id;
}
sheet.notes[idxInColl] = model;
}
}
else {
this.insertNoteSorted(sheet, model);
}
if (this.parent.activeSheetIndex === args.sheetIdx) {
var td = this.parent.getCell(row_1, col_1);
if (td && !td.querySelector('.e-addNoteIndicator')) {
this.createNoteIndicator({ targetElement: td, rowIndex: row_1, columnIndex: col_1 });
}
if (model.isVisible) {
this.parent.notify(showNote, { rowIndex: row_1, columnIndex: col_1, isNoteEditable: false, isScrollWithNote: true });
}
}
}
else if (existing_1) {
var i = sheet.notes.findIndex(function (n) { return n.id === existing_1.id; });
if (i > -1) {
sheet.notes.splice(i, 1);
}
if (this.parent.activeSheetIndex === args.sheetIdx) {
this.detachNoteIndicator(row_1, col_1);
var cellToUpdate = getCell(row_1, col_1, sheet);
if (cellToUpdate) {
delete cellToUpdate.notes;
updateCell(this.parent, sheet, { rowIdx: row_1, colIdx: col_1, preventEvt: true, cell: cellToUpdate });
}
var noteContainer = document.getElementById(this.getNoteId(existing_1));
if (noteContainer) {
this.removeNoteElement(existing_1);
}
}
}
}
};
return SpreadsheetNote;
}());
export { SpreadsheetNote };