| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270 | 1×
1×
1×
1×
886×
886×
886×
886×
1×
886×
886×
1×
1×
1×
1×
1×
1×
1×
886×
886×
1×
886×
886×
886×
886×
886×
886×
886×
1×
886×
13×
13×
13×
13×
13×
13×
13×
1×
126650×
1×
6×
6×
6×
6×
6×
1×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
2×
3×
3×
3×
3×
1×
5×
5×
5×
5×
5×
5×
1×
27×
27×
8×
8×
8×
10×
4×
10×
3×
27×
27×
23×
23×
27×
1×
2×
2×
2×
2×
1×
2×
2×
1×
2×
2×
1×
1×
1×
15×
15×
15×
15×
15×
15×
15×
11×
15×
15×
1×
16×
16×
1×
15×
15×
15×
15×
15×
15×
15×
15×
15×
15×
15×
15×
15×
15×
15×
9×
6×
15×
1×
15×
15×
15×
15×
15×
15×
15×
15×
15×
11×
11×
4×
4×
15×
15×
15×
15×
15×
15×
15×
1×
13×
13×
13×
13×
13×
9×
9×
1×
14×
14×
14×
14×
14×
14×
14×
1×
4×
4×
4×
4×
4×
1×
1×
1×
1×
1×
1×
1×
4×
4×
3×
3×
3×
1×
1×
1×
1×
| define(["require", "exports", "../common/index", "@syncfusion/ej2-base", "../../workbook/common/address", "../../workbook/index"], function (require, exports, index_1, ej2_base_1, address_1, index_2) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var SpreadsheetNote = (function () {
function SpreadsheetNote(parent) {
this.isNoteVisible = false;
this.isNoteVisibleOnTouch = false;
this.parent = parent;
this.addEventListener();
}
SpreadsheetNote.prototype.destroy = function () {
this.removeEventListener();
if (!this.parent.isDestroyed && !this.parent.refreshing) {
var noteIndicators = this.parent.element.getElementsByClassName('e-addNoteIndicator');
while (noteIndicators.length) {
var cellEle = ej2_base_1.closest(noteIndicators[0], '.e-cell');
Eif (cellEle) {
ej2_base_1.EventHandler.remove(cellEle, 'mouseover', this.mouseOver);
ej2_base_1.EventHandler.remove(cellEle, 'mouseout', this.mouseOut);
}
ej2_base_1.detach(noteIndicators[0]);
}
}
this.parent = null;
this.isNoteVisible = null;
};
SpreadsheetNote.prototype.addEventListener = function () {
this.parent.on(index_1.addNote, this.addNote, this);
this.parent.on(index_1.editNote, this.editNote, this);
this.parent.on(index_1.deleteNote, this.deleteNote, this);
this.parent.on(index_1.createNoteIndicator, this.createNoteIndicator, this);
this.parent.on(index_1.showNote, this.showNote, this);
this.parent.on(index_1.removeNoteContainer, this.removeNoteContainer, this);
this.parent.on(index_1.updateNoteContainer, this.updateNoteContainer, this);
};
SpreadsheetNote.prototype.removeEventListener = function () {
if (!this.parent.isDestroyed) {
this.parent.off(index_1.addNote, this.addNote);
this.parent.off(index_1.editNote, this.editNote);
this.parent.off(index_1.showNote, this.showNote);
this.parent.off(index_1.deleteNote, this.deleteNote);
this.parent.off(index_1.createNoteIndicator, this.createNoteIndicator);
this.parent.off(index_1.removeNoteContainer, this.removeNoteContainer);
this.parent.off(index_1.updateNoteContainer, this.updateNoteContainer);
}
};
SpreadsheetNote.prototype.getModuleName = function () {
return 'spreadsheetNote';
};
SpreadsheetNote.prototype.addNote = function () {
var cellIndexes = !ej2_base_1.isNullOrUndefined(this.noteCellIndexes) ?
this.noteCellIndexes : address_1.getCellIndexes(this.parent.getActiveSheet().activeCell);
var targetElement = this.parent.getCell(cellIndexes[0], cellIndexes[1]);
Eif (!ej2_base_1.isNullOrUndefined(targetElement) && ((targetElement.children.length === 0) || (targetElement.children.length > 0 && targetElement.children[targetElement.childElementCount - 1].className.indexOf('e-addNoteIndicator') === -1))) {
this.createNoteIndicator({ targetElement: targetElement, rowIndex: cellIndexes[0], columnIndex: cellIndexes[1] });
this.createNoteContainer(targetElement, cellIndexes[0], cellIndexes[1], false, true);
}
};
SpreadsheetNote.prototype.deleteNote = function (args) {
var cellIndexes = address_1.getCellIndexes(this.parent.getActiveSheet().activeCell);
var rowIndex = !ej2_base_1.isNullOrUndefined(args) && !ej2_base_1.isNullOrUndefined(args.rowIndex) ? args.rowIndex : cellIndexes[0];
var columnIndex = !ej2_base_1.isNullOrUndefined(args) && !ej2_base_1.isNullOrUndefined(args.columnIndex) ? args.columnIndex : cellIndexes[1];
var targetElement = this.parent.getCell(rowIndex, columnIndex);
Eif (targetElement.children.length > 0 && targetElement.children[targetElement.children.length - 1].className.indexOf('e-addNoteIndicator') > -1) {
targetElement.removeChild(targetElement.children[targetElement.children.length - 1]);
ej2_base_1.EventHandler.remove(targetElement, 'mouseover', this.mouseOver);
ej2_base_1.EventHandler.remove(targetElement, 'mouseout', this.mouseOut);
var address = index_2.getSheetName(this.parent, this.parent.activeSheetIndex) + '!' + this.parent.getActiveSheet().activeCell;
var cell = index_2.getCell(rowIndex, columnIndex, this.parent.getActiveSheet());
Eif (!ej2_base_1.isNullOrUndefined(args) && args.isDeleteFromMenu) {
this.parent.notify(index_1.setActionData, { args: { action: 'beforeCellSave', eventArgs: { address: address } } });
}
if (!ej2_base_1.isNullOrUndefined(cell) && cell.notes) {
delete cell.notes;
}
Eif (!ej2_base_1.isNullOrUndefined(args) && args.isDeleteFromMenu) {
var eventArgs = { notes: cell.notes, address: address };
this.parent.notify(index_1.completeAction, { eventArgs: eventArgs, action: 'deleteNote' });
this.isShowNote = null;
}
}
};
SpreadsheetNote.prototype.editNote = function () {
var cellIndexes = !ej2_base_1.isNullOrUndefined(this.noteCellIndexes) ?
this.noteCellIndexes : address_1.getCellIndexes(this.parent.getActiveSheet().activeCell);
this.showNote({ rowIndex: cellIndexes[0], columnIndex: cellIndexes[1], isNoteEditable: true });
var noteContainerElement = document.getElementsByClassName('e-addNoteContainer')[0];
index_2.updateCell(this.parent, this.parent.getActiveSheet(), { rowIdx: cellIndexes[0], colIdx: cellIndexes[1], preventEvt: true,
cell: { isNoteEditable: true } });
Eif (noteContainerElement) {
this.getNoteFocus(noteContainerElement);
}
};
SpreadsheetNote.prototype.createNoteIndicator = function (args) {
var noteIndicator = this.parent.createElement('div', { className: 'e-addNoteIndicator', styles: 'position: absolute;top: 0;right: 0;width: 0;height: 0;border-left: 8px solid transparent;border-top: 8px solid red;cursor: pointer;' });
if (args.targetElement.children.length > 0) {
var rowHeight = index_2.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) {
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) {
noteIndicator.style.right = (args.targetElement.children[i].getBoundingClientRect().width || 20) + 2 + "px";
}
}
}
Eif (!ej2_base_1.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.skipEvent) {
ej2_base_1.EventHandler.add(args.targetElement, 'mouseover', this.mouseOver, [this, args.rowIndex, args.columnIndex]);
ej2_base_1.EventHandler.add(args.targetElement, 'mouseout', this.mouseOut, this);
}
args.targetElement.appendChild(noteIndicator);
}
};
SpreadsheetNote.prototype.mouseOver = function () {
var args = this;
var noteModule = args[0];
Eif ((noteModule.isNoteVisibleOnTouch && !ej2_base_1.isNullOrUndefined(document.getElementsByClassName('e-addNoteContainer')[0])) ||
ej2_base_1.isNullOrUndefined(document.getElementsByClassName('e-addNoteContainer')[0])) {
if (!ej2_base_1.isNullOrUndefined(document.getElementsByClassName('e-addNoteContainer')[0])) {
noteModule.removeNoteContainer();
}
noteModule.showNote({ rowIndex: args[1], columnIndex: args[2], isNoteEditable: false });
noteModule.isNoteVisible = true;
}
};
SpreadsheetNote.prototype.mouseOut = function (e) {
Eif (this.isNoteVisible && (!this.isNoteVisibleOnTouch && !ej2_base_1.isNullOrUndefined(document.getElementsByClassName('e-addNoteContainer')[0]))) {
if (document.activeElement.className.indexOf('e-addNoteContainer') === -1 && !ej2_base_1.isNullOrUndefined(e.relatedTarget) && e.relatedTarget.className.indexOf('e-connectorLine') === -1 && e.relatedTarget.className.indexOf('e-addNoteContainer') === -1) {
this.removeNoteContainer();
this.isNoteVisible = false;
}
}
};
SpreadsheetNote.prototype.createNoteContainer = function (targetElement, rowIndex, columnIndex, isShowNote, isNoteEditable) {
var sheet = this.parent.getActiveSheet();
var cell = index_2.getCell(rowIndex, columnIndex, sheet);
var cellRect = targetElement.getBoundingClientRect();
var noteContainer = this.parent.createElement('textarea', { className: 'e-addNoteContainer' });
this.createContainer(noteContainer, cell, cellRect, isShowNote);
this.createConnectorLine(noteContainer, cellRect);
if (isNoteEditable) {
this.getNoteFocus(noteContainer);
}
ej2_base_1.EventHandler.add(noteContainer, 'mouseout', this.mouseOut, this);
ej2_base_1.EventHandler.add(document.getElementsByClassName('e-connectorLine')[0], 'mouseout', this.mouseOut, this);
};
SpreadsheetNote.prototype.getNoteFocus = function (noteContainerElement) {
noteContainerElement.selectionStart = noteContainerElement.value.length;
noteContainerElement.focus();
};
SpreadsheetNote.prototype.createContainer = function (noteContainer, cell, cellRect, isShowNote) {
var containerTop = 5;
Eif (cellRect.top >= document.getElementsByClassName('e-select-all-cell')[0].getBoundingClientRect().bottom && cellRect.right >= document.getElementsByClassName('e-select-all-cell')[0].getBoundingClientRect().right &&
cellRect.bottom <= document.getElementsByClassName('e-scroller')[0].getBoundingClientRect().top && cellRect.right <= document.getElementsByClassName('e-scroller')[0].getBoundingClientRect().width) {
noteContainer.style.display = 'block';
containerTop = cellRect.top === document.getElementsByClassName('e-select-all-cell')[0].getBoundingClientRect().bottom ? 0 : containerTop;
}
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';
noteContainer.style.left = (cellRect.left + cellRect.width - (elementClientRect.left - (elementPosition === 'absolute' ?
0 : this.parent.element.offsetLeft)) + 10) + 'px';
noteContainer.style.width = '120px';
noteContainer.style.height = '120px';
noteContainer.style.zIndex = '5';
noteContainer.style.color = 'black';
noteContainer.style.backgroundColor = 'lightyellow';
if (isShowNote && !ej2_base_1.isNullOrUndefined(cell) && !ej2_base_1.isNullOrUndefined(cell.notes)) {
noteContainer.innerHTML = cell.notes;
}
else {
noteContainer.innerHTML = '';
}
this.parent.element.appendChild(noteContainer);
};
SpreadsheetNote.prototype.createConnectorLine = function (noteContainer, cellRect) {
var connectorLine = this.parent.createElement('canvas', { className: 'e-connectorLine', styles: 'width: 100px; position: absolute; z-index: 1;' });
var context = connectorLine.getContext('2d');
var elementClientRect = this.parent.element.getBoundingClientRect();
var elementPosition = this.parent.element.style.getPropertyValue('position');
connectorLine.style.left = cellRect.left + cellRect.width - (elementClientRect.left - (elementPosition === 'absolute' ?
0 : this.parent.element.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);
Eif (noteContainer.getBoundingClientRect().top > 0) {
connectorLine.style.display = 'block';
connectorLine.style.zIndex = '4';
}
else {
connectorLine.style.display = 'none';
}
};
SpreadsheetNote.prototype.showNote = function (args) {
var targetElement = !ej2_base_1.isNullOrUndefined(this.parent.getCell(args.rowIndex, args.columnIndex)) ?
this.parent.getCell(args.rowIndex, args.columnIndex) : args.cellElement;
var contextMenuElement = document.getElementById(this.parent.element.id + '_contextmenu');
var contextMenuDisplayStyle = !ej2_base_1.isNullOrUndefined(contextMenuElement) ? contextMenuElement.style.getPropertyValue('display') : 'none';
var showNoteOverContextMenu = args.isNoteEditable ? true : contextMenuDisplayStyle !== 'block';
if (!ej2_base_1.isNullOrUndefined(targetElement) && ej2_base_1.isNullOrUndefined(document.getElementsByClassName('e-addNoteContainer')[0]) && showNoteOverContextMenu
&& (args.isScrollWithNote || (targetElement.children !== null && targetElement.children.length > 0 && targetElement.children[targetElement.children.length - 1].classList.contains('e-addNoteIndicator')))) {
this.createNoteContainer(targetElement, args.rowIndex, args.columnIndex, true, args.isNoteEditable);
this.noteCellIndexes = [args.rowIndex, args.columnIndex];
}
};
SpreadsheetNote.prototype.removeNoteContainer = function () {
ej2_base_1.EventHandler.remove(document.getElementsByClassName('e-addNoteContainer')[0], 'mouseout', this.mouseOut);
ej2_base_1.EventHandler.remove(document.getElementsByClassName('e-connectorLine')[0], 'mouseout', this.mouseOut);
this.parent.element.removeChild(document.getElementsByClassName('e-addNoteContainer')[0]);
this.parent.element.removeChild(document.getElementsByClassName('e-connectorLine')[0]);
this.noteCellIndexes = null;
this.isNoteVisible = false;
this.isNoteVisibleOnTouch = false;
};
SpreadsheetNote.prototype.updateNoteContainer = function () {
this.parent.selectionModule.isNoteActiveElement = document.activeElement.className.indexOf('e-addNoteContainer') > -1 ? true : this.parent.selectionModule.isNoteActiveElement;
var cellIdxs = !ej2_base_1.isNullOrUndefined(this.noteCellIndexes) ?
this.noteCellIndexes : address_1.getCellIndexes(this.parent.getActiveSheet().activeCell);
var cell = index_2.getCell(cellIdxs[0], cellIdxs[1], this.parent.getActiveSheet());
var noteContainer = document.getElementsByClassName('e-addNoteContainer')[0];
if (((ej2_base_1.isNullOrUndefined(cell) || ej2_base_1.isNullOrUndefined(cell.notes)) || (cell.notes !== noteContainer.value))
&& this.parent.selectionModule.isNoteActiveElement) {
var address = index_2.getSheetName(this.parent, this.parent.activeSheetIndex) + '!' + address_1.getRangeAddress(cellIdxs);
this.parent.notify(index_1.setActionData, { args: { action: 'beforeCellSave', eventArgs: { address: address } } });
var eventAction = !ej2_base_1.isNullOrUndefined(cell) && cell.notes ? 'editNote' : 'addNote';
index_2.updateCell(this.parent, this.parent.getActiveSheet(), { rowIdx: cellIdxs[0], colIdx: cellIdxs[1], preventEvt: true,
cell: { notes: noteContainer.value, isNoteEditable: true } });
var eventArgs = { notes: noteContainer.value, address: address };
this.parent.notify(index_1.completeAction, { eventArgs: eventArgs, action: eventAction });
this.isShowNote = null;
}
this.isShowNote = ej2_base_1.isNullOrUndefined(this.isShowNote) ? this.parent.selectionModule.isNoteActiveElement : this.isShowNote;
if (this.isShowNote) {
var isScrollWithNote = !ej2_base_1.isNullOrUndefined(cell) && !ej2_base_1.isNullOrUndefined(cell.isNoteEditable) ?
cell.isNoteEditable : false;
this.parent.notify(index_1.removeNoteContainer, '');
this.parent.notify(index_1.showNote, { rowIndex: cellIdxs[0], columnIndex: cellIdxs[1], isNoteEditable: true, isScrollWithNote: isScrollWithNote });
}
else {
this.parent.notify(index_1.removeNoteContainer, '');
this.isShowNote = null;
}
};
return SpreadsheetNote;
}());
exports.SpreadsheetNote = SpreadsheetNote;
});
|