@progress/kendo-editor-common 1.8.2-dev.202204011319 → 1.9.0-dev.202204060830
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/js/kendo-editor-common.js +2 -2
- package/dist/cdn/main.js +1 -1
- package/dist/es/config/constants.js +4 -0
- package/dist/es/config/schema.js +9 -5
- package/dist/es/main.js +1 -0
- package/dist/es/plugins/image-resize.js +4 -3
- package/dist/es/plugins/table-resize/column-resize.js +294 -0
- package/dist/es/plugins/table-resize/index.js +8 -0
- package/dist/es/plugins/table-resize/row-resize.js +244 -0
- package/dist/es/plugins/table-resize/table-resize.js +281 -0
- package/dist/es/plugins/table-resize/table-view.js +87 -0
- package/dist/es/plugins/table-resize/utils.js +53 -0
- package/dist/es2015/config/constants.js +4 -0
- package/dist/es2015/config/schema.js +11 -8
- package/dist/es2015/main.js +1 -0
- package/dist/es2015/plugins/image-resize.js +4 -3
- package/dist/es2015/plugins/table-resize/column-resize.js +290 -0
- package/dist/es2015/plugins/table-resize/index.js +8 -0
- package/dist/es2015/plugins/table-resize/row-resize.js +240 -0
- package/dist/es2015/plugins/table-resize/table-resize.js +277 -0
- package/dist/es2015/plugins/table-resize/table-view.js +84 -0
- package/dist/es2015/plugins/table-resize/utils.js +51 -0
- package/dist/npm/config/constants.d.ts +4 -0
- package/dist/npm/config/constants.js +4 -0
- package/dist/npm/config/schema.d.ts +1 -0
- package/dist/npm/config/schema.js +8 -4
- package/dist/npm/main.d.ts +1 -0
- package/dist/npm/main.js +2 -0
- package/dist/npm/plugins/image-resize.js +4 -3
- package/dist/npm/plugins/table-resize/column-resize.d.ts +2 -0
- package/dist/npm/plugins/table-resize/column-resize.js +297 -0
- package/dist/npm/plugins/table-resize/index.d.ts +1 -0
- package/dist/npm/plugins/table-resize/index.js +10 -0
- package/dist/npm/plugins/table-resize/row-resize.d.ts +2 -0
- package/dist/npm/plugins/table-resize/row-resize.js +247 -0
- package/dist/npm/plugins/table-resize/table-resize.d.ts +6 -0
- package/dist/npm/plugins/table-resize/table-resize.js +283 -0
- package/dist/npm/plugins/table-resize/table-view.d.ts +17 -0
- package/dist/npm/plugins/table-resize/table-view.js +89 -0
- package/dist/npm/plugins/table-resize/utils.d.ts +12 -0
- package/dist/npm/plugins/table-resize/utils.js +59 -0
- package/dist/systemjs/kendo-editor-common.js +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,297 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
var tslib_1 = require("tslib");
|
|
4
|
+
var prosemirror_state_1 = require("prosemirror-state");
|
|
5
|
+
var prosemirror_tables_1 = require("prosemirror-tables");
|
|
6
|
+
var prosemirror_view_1 = require("prosemirror-view");
|
|
7
|
+
var constants_1 = require("../../config/constants");
|
|
8
|
+
var table_view_1 = require("./table-view");
|
|
9
|
+
var utils_1 = require("./utils");
|
|
10
|
+
function columnResizing() {
|
|
11
|
+
// tslint:disable-next-line:variable-name
|
|
12
|
+
var View = table_view_1.TableView, lastColumnResizable = true, handleWidth = 5, cellMinWidth = 25;
|
|
13
|
+
var plugin = new prosemirror_state_1.Plugin({
|
|
14
|
+
key: utils_1.tableColumnResizing,
|
|
15
|
+
state: {
|
|
16
|
+
init: function (_, state) {
|
|
17
|
+
this.spec.props.nodeViews[prosemirror_tables_1.tableNodeTypes(state.schema).table.name] = function (node, view) { return new View(node, view); };
|
|
18
|
+
return new ResizeState(-1, null);
|
|
19
|
+
},
|
|
20
|
+
apply: function (tr, prev) {
|
|
21
|
+
return prev.apply(tr);
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
props: {
|
|
25
|
+
attributes: function (state) {
|
|
26
|
+
if (utils_1.otherResizeHandle(utils_1.tableColumnResizing, state)) {
|
|
27
|
+
return null;
|
|
28
|
+
}
|
|
29
|
+
var pluginState = utils_1.tableColumnResizing.getState(state);
|
|
30
|
+
return pluginState.activeHandle > -1 ? { class: 'resize-cursor' } : null;
|
|
31
|
+
},
|
|
32
|
+
handleDOMEvents: {
|
|
33
|
+
mousemove: function (view, event) {
|
|
34
|
+
if (!utils_1.otherResizing(utils_1.tableColumnResizing, view.state)) {
|
|
35
|
+
handleMouseMove(view, event, handleWidth, cellMinWidth, lastColumnResizable);
|
|
36
|
+
}
|
|
37
|
+
return false;
|
|
38
|
+
},
|
|
39
|
+
mouseleave: function (view) {
|
|
40
|
+
handleMouseLeave(view);
|
|
41
|
+
return false;
|
|
42
|
+
},
|
|
43
|
+
mousedown: function (view, event) {
|
|
44
|
+
return handleMouseDown(view, event, cellMinWidth);
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
decorations: function (state) {
|
|
48
|
+
if (utils_1.otherResizing(utils_1.tableColumnResizing, state)) {
|
|
49
|
+
return prosemirror_view_1.DecorationSet.empty;
|
|
50
|
+
}
|
|
51
|
+
var pluginState = utils_1.tableColumnResizing.getState(state);
|
|
52
|
+
if (pluginState.activeHandle > -1) {
|
|
53
|
+
return handleDecorations(state, pluginState.activeHandle);
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
nodeViews: {}
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
return plugin;
|
|
60
|
+
}
|
|
61
|
+
exports.columnResizing = columnResizing;
|
|
62
|
+
function cellAround($pos) {
|
|
63
|
+
for (var d = $pos.depth - 1; d > 0; d--) {
|
|
64
|
+
if ($pos.node(d).type.spec.tableRole === 'row') {
|
|
65
|
+
return $pos.node(0).resolve($pos.before(d + 1));
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
return null;
|
|
69
|
+
}
|
|
70
|
+
function pointsAtCell($pos) {
|
|
71
|
+
return $pos.parent.type.spec.tableRole === 'row' && $pos.nodeAfter;
|
|
72
|
+
}
|
|
73
|
+
var ResizeState = /** @class */ (function () {
|
|
74
|
+
function ResizeState(activeHandle, dragging) {
|
|
75
|
+
this.activeHandle = activeHandle;
|
|
76
|
+
this.dragging = dragging;
|
|
77
|
+
}
|
|
78
|
+
ResizeState.prototype.apply = function (tr) {
|
|
79
|
+
var state = this, action = tr.getMeta(utils_1.tableColumnResizing);
|
|
80
|
+
if (action && action.setHandle != null) {
|
|
81
|
+
return new ResizeState(action.setHandle, null);
|
|
82
|
+
}
|
|
83
|
+
if (action && action.setDragging !== undefined) {
|
|
84
|
+
return new ResizeState(state.activeHandle, action.setDragging);
|
|
85
|
+
}
|
|
86
|
+
if (state.activeHandle > -1 && tr.docChanged) {
|
|
87
|
+
var handle = tr.mapping.map(state.activeHandle, -1);
|
|
88
|
+
if (!pointsAtCell(tr.doc.resolve(handle))) {
|
|
89
|
+
handle = null;
|
|
90
|
+
}
|
|
91
|
+
state = new ResizeState(handle, state.dragging);
|
|
92
|
+
}
|
|
93
|
+
return state;
|
|
94
|
+
};
|
|
95
|
+
return ResizeState;
|
|
96
|
+
}());
|
|
97
|
+
function handleMouseMove(view, event, handleWidth, _cellMinWidth, lastColumnResizable) {
|
|
98
|
+
var pluginState = utils_1.tableColumnResizing.getState(view.state);
|
|
99
|
+
if (!pluginState.dragging) {
|
|
100
|
+
var target = domCellAround(event.target), cell = -1;
|
|
101
|
+
if (target) {
|
|
102
|
+
var _a = target.getBoundingClientRect(), left = _a.left, right = _a.right;
|
|
103
|
+
if (event.clientX - left <= handleWidth) {
|
|
104
|
+
cell = edgeCell(view, event, 'left');
|
|
105
|
+
}
|
|
106
|
+
else if (right - event.clientX <= handleWidth) {
|
|
107
|
+
cell = edgeCell(view, event, 'right');
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
if (cell !== pluginState.activeHandle) {
|
|
111
|
+
if (!lastColumnResizable && cell !== -1) {
|
|
112
|
+
var $cell = view.state.doc.resolve(cell);
|
|
113
|
+
var table = $cell.node(-1), map = prosemirror_tables_1.TableMap.get(table), start = $cell.start(-1);
|
|
114
|
+
var col = map.colCount($cell.pos - start) + $cell.nodeAfter.attrs.colspan - 1;
|
|
115
|
+
if (col === map.width - 1) {
|
|
116
|
+
return;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
updateHandle(view, cell);
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
function handleMouseLeave(view) {
|
|
124
|
+
var pluginState = utils_1.tableColumnResizing.getState(view.state);
|
|
125
|
+
if (pluginState.activeHandle > -1 && !pluginState.dragging) {
|
|
126
|
+
updateHandle(view, -1);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
function handleMouseDown(view, event, cellMinWidth) {
|
|
130
|
+
var _a;
|
|
131
|
+
var pluginState = utils_1.tableColumnResizing.getState(view.state);
|
|
132
|
+
if (pluginState.activeHandle === -1 || pluginState.dragging) {
|
|
133
|
+
return false;
|
|
134
|
+
}
|
|
135
|
+
var $cell = view.state.doc.resolve(pluginState.activeHandle);
|
|
136
|
+
var row = $cell.parent;
|
|
137
|
+
var cellIndex = $cell.index();
|
|
138
|
+
var colSpan = 0;
|
|
139
|
+
for (var i = 0; i <= cellIndex; i++) {
|
|
140
|
+
colSpan += row.child(i).attrs.colspan;
|
|
141
|
+
}
|
|
142
|
+
var tableNode = $cell.node($cell.depth - 1);
|
|
143
|
+
var dom = view.domAtPos(pluginState.activeHandle);
|
|
144
|
+
var domCell = dom.node.childNodes[dom.offset];
|
|
145
|
+
var tableDom = domCell.closest('table');
|
|
146
|
+
var col, tableAttrs;
|
|
147
|
+
if (tableNode.attrs[constants_1.colgroupAttr]) {
|
|
148
|
+
var colgroup = tableDom.firstChild;
|
|
149
|
+
col = colgroup.children[colSpan - 1];
|
|
150
|
+
if (!col.style.width) {
|
|
151
|
+
col.style.width = col.offsetWidth + 'px';
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
else {
|
|
155
|
+
var total = 0;
|
|
156
|
+
for (var i = 0; i < row.childCount; i++) {
|
|
157
|
+
total += row.child(i).attrs.colspan;
|
|
158
|
+
}
|
|
159
|
+
var colgroup = document.createElement('colgroup');
|
|
160
|
+
var cols = new Array(total);
|
|
161
|
+
for (var i = 0; i < total; i++) {
|
|
162
|
+
cols[i] = document.createElement('col');
|
|
163
|
+
colgroup.appendChild(cols[i]);
|
|
164
|
+
}
|
|
165
|
+
tableDom.insertBefore(colgroup, tableDom.firstChild);
|
|
166
|
+
col = cols[cellIndex];
|
|
167
|
+
col.style.width = col.offsetWidth + 'px';
|
|
168
|
+
tableAttrs = tslib_1.__assign({}, tableNode.attrs, (_a = {}, _a[constants_1.colgroupAttr] = '<colgroup>' + cols.reduce(function (acc, cur) { return acc + cur.outerHTML; }, '') + '</colgroup>', _a));
|
|
169
|
+
}
|
|
170
|
+
var width = parseFloat(col.style.width);
|
|
171
|
+
var tr = view.state.tr.setMeta(utils_1.tableColumnResizing, { setDragging: { startX: event.clientX, startWidth: width } });
|
|
172
|
+
if (!tableDom.style.width) {
|
|
173
|
+
var widths = Array.from(col.parentNode.children).map(function (c) { return c.style.width; });
|
|
174
|
+
if (widths.every(Boolean)) {
|
|
175
|
+
var sum = widths.reduce(function (acc, cur) { return acc + parseFloat(cur); }, 0);
|
|
176
|
+
tableAttrs = utils_1.setNodeStyle(tableNode.attrs, 'width', sum + 'px');
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
if (tableAttrs) {
|
|
180
|
+
var tablePos = $cell.posAtIndex(0, $cell.depth - 1) - 1;
|
|
181
|
+
tr.setNodeMarkup(tablePos, null, tableAttrs);
|
|
182
|
+
}
|
|
183
|
+
view.dispatch(tr);
|
|
184
|
+
function finish(ev) {
|
|
185
|
+
ev.view.removeEventListener('mouseup', finish);
|
|
186
|
+
ev.view.removeEventListener('mousemove', move);
|
|
187
|
+
var curPluginState = utils_1.tableColumnResizing.getState(view.state);
|
|
188
|
+
if (curPluginState.dragging) {
|
|
189
|
+
updateColumnWidth(view, curPluginState.activeHandle, draggedWidth(curPluginState.dragging, ev, cellMinWidth));
|
|
190
|
+
view.dispatch(view.state.tr.setMeta(utils_1.tableColumnResizing, { setDragging: null }));
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
function move(ev) {
|
|
194
|
+
if (!ev.which) {
|
|
195
|
+
return finish(ev);
|
|
196
|
+
}
|
|
197
|
+
var curPluginState = utils_1.tableColumnResizing.getState(view.state);
|
|
198
|
+
var dragged = draggedWidth(curPluginState.dragging, ev, cellMinWidth);
|
|
199
|
+
displayColumnWidth(view, curPluginState.activeHandle, dragged, cellMinWidth);
|
|
200
|
+
}
|
|
201
|
+
event.view.addEventListener('mouseup', finish);
|
|
202
|
+
event.view.addEventListener('mousemove', move);
|
|
203
|
+
event.preventDefault();
|
|
204
|
+
return true;
|
|
205
|
+
}
|
|
206
|
+
function domCellAround(target) {
|
|
207
|
+
while (target && target.nodeName !== 'TD' && target.nodeName !== 'TH') {
|
|
208
|
+
target = target.classList.contains('ProseMirror') ? null : target.parentNode;
|
|
209
|
+
}
|
|
210
|
+
return target;
|
|
211
|
+
}
|
|
212
|
+
function edgeCell(view, event, side) {
|
|
213
|
+
var found = view.posAtCoords({ left: event.clientX, top: event.clientY });
|
|
214
|
+
if (!found) {
|
|
215
|
+
return -1;
|
|
216
|
+
}
|
|
217
|
+
var pos = found.pos;
|
|
218
|
+
var $cell = cellAround(view.state.doc.resolve(pos));
|
|
219
|
+
if (!$cell) {
|
|
220
|
+
return -1;
|
|
221
|
+
}
|
|
222
|
+
if (side === 'right') {
|
|
223
|
+
return $cell.pos;
|
|
224
|
+
}
|
|
225
|
+
var map = prosemirror_tables_1.TableMap.get($cell.node(-1)), start = $cell.start(-1);
|
|
226
|
+
var index = map.map.indexOf($cell.pos - start);
|
|
227
|
+
return index % map.width === 0 ? -1 : start + map.map[index - 1];
|
|
228
|
+
}
|
|
229
|
+
function draggedWidth(dragging, event, cellMinWidth) {
|
|
230
|
+
var offset = event.clientX - dragging.startX;
|
|
231
|
+
return Math.max(cellMinWidth, dragging.startWidth + offset);
|
|
232
|
+
}
|
|
233
|
+
function updateHandle(view, value) {
|
|
234
|
+
view.dispatch(view.state.tr.setMeta(utils_1.tableColumnResizing, { setHandle: value }));
|
|
235
|
+
}
|
|
236
|
+
function updateColumnWidth(view, cell, _width) {
|
|
237
|
+
var _a;
|
|
238
|
+
var $cell = view.state.doc.resolve(cell);
|
|
239
|
+
var tableNode = $cell.node(-1), start = $cell.start(-1);
|
|
240
|
+
var tr = view.state.tr;
|
|
241
|
+
var tablePos = $cell.posAtIndex(0, $cell.depth - 1) - 1;
|
|
242
|
+
var tableDom = view.nodeDOM(start).closest('table');
|
|
243
|
+
var attrs = tableNode.attrs;
|
|
244
|
+
if (tableNode && attrs[constants_1.colgroupAttr]) {
|
|
245
|
+
var colgroup = tableDom.firstChild;
|
|
246
|
+
attrs = tslib_1.__assign({}, attrs, (_a = {}, _a[constants_1.colgroupAttr] = colgroup.outerHTML, _a));
|
|
247
|
+
}
|
|
248
|
+
var tableDomWidth = tableDom.style.width;
|
|
249
|
+
if (tableDom && tableDomWidth && utils_1.parseStyle(attrs.style).width !== tableDomWidth) {
|
|
250
|
+
attrs = utils_1.setNodeStyle(attrs, 'width', tableDomWidth);
|
|
251
|
+
tr.setNodeMarkup(tablePos, null, attrs);
|
|
252
|
+
}
|
|
253
|
+
if (tr.docChanged) {
|
|
254
|
+
view.dispatch(tr);
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
function displayColumnWidth(view, cell, width, _cellMinWidth) {
|
|
258
|
+
var $cell = view.state.doc.resolve(cell);
|
|
259
|
+
var table = $cell.node(-1), start = $cell.start(-1);
|
|
260
|
+
var col = prosemirror_tables_1.TableMap.get(table).colCount($cell.pos - start) + $cell.nodeAfter.attrs.colspan - 1;
|
|
261
|
+
var dom = view.domAtPos($cell.start(-1)).node;
|
|
262
|
+
if (dom.nodeName !== 'TABLE') {
|
|
263
|
+
dom = dom.closest('table');
|
|
264
|
+
}
|
|
265
|
+
var tableDom = dom;
|
|
266
|
+
var colgroup = tableDom.firstChild;
|
|
267
|
+
var cols = Array.from(colgroup.children);
|
|
268
|
+
cols[col].style.width = width + 'px';
|
|
269
|
+
if (tableDom.style.width) {
|
|
270
|
+
var widths = cols.map(function (c) { return c.style.width; });
|
|
271
|
+
if (widths.every(Boolean)) {
|
|
272
|
+
var sum = widths.reduce(function (acc, cur) { return acc + parseFloat(cur); }, 0);
|
|
273
|
+
tableDom.style.width = sum + 'px';
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
function handleDecorations(state, cell) {
|
|
278
|
+
var decorations = [];
|
|
279
|
+
var $cell = state.doc.resolve(cell);
|
|
280
|
+
var table = $cell.node(-1), map = prosemirror_tables_1.TableMap.get(table), start = $cell.start(-1);
|
|
281
|
+
var col = map.colCount($cell.pos - start) + $cell.nodeAfter.attrs.colspan;
|
|
282
|
+
for (var row = 0; row < map.height; row++) {
|
|
283
|
+
var index = col + row * map.width - 1;
|
|
284
|
+
// For positions that are have either a different cell or the end
|
|
285
|
+
// of the table to their right, and either the top of the table or
|
|
286
|
+
// a different cell above them, add a decoration
|
|
287
|
+
if ((col === map.width || map.map[index] !== map.map[index + 1]) &&
|
|
288
|
+
(row === 0 || map.map[index - 1] !== map.map[index - 1 - map.width])) {
|
|
289
|
+
var cellPos = map.map[index];
|
|
290
|
+
var pos = start + cellPos + table.nodeAt(cellPos).nodeSize - 1;
|
|
291
|
+
var dom = document.createElement('div');
|
|
292
|
+
dom.className = 'column-resize-handle';
|
|
293
|
+
decorations.push(prosemirror_view_1.Decoration.widget(pos, dom));
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
return prosemirror_view_1.DecorationSet.create(state.doc, decorations);
|
|
297
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const tableResizing: () => import("prosemirror-state").Plugin<any, any>[];
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
var column_resize_1 = require("./column-resize");
|
|
4
|
+
var table_resize_1 = require("./table-resize");
|
|
5
|
+
var row_resize_1 = require("./row-resize");
|
|
6
|
+
exports.tableResizing = function () { return [
|
|
7
|
+
table_resize_1.tableResizing(),
|
|
8
|
+
column_resize_1.columnResizing(),
|
|
9
|
+
row_resize_1.rowResizing()
|
|
10
|
+
]; };
|
|
@@ -0,0 +1,247 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
var prosemirror_state_1 = require("prosemirror-state");
|
|
4
|
+
var prosemirror_tables_1 = require("prosemirror-tables");
|
|
5
|
+
var prosemirror_view_1 = require("prosemirror-view");
|
|
6
|
+
var utils_1 = require("./utils");
|
|
7
|
+
var TableRowView = /** @class */ (function () {
|
|
8
|
+
function TableRowView() {
|
|
9
|
+
}
|
|
10
|
+
TableRowView.prototype.ignoreMutation = function (record) {
|
|
11
|
+
return record.type === 'attributes' && record.attributeName === 'style' && record.target.nodeName === 'TR';
|
|
12
|
+
};
|
|
13
|
+
return TableRowView;
|
|
14
|
+
}());
|
|
15
|
+
function rowResizing() {
|
|
16
|
+
var handleWidth = 5, rowMinHeight = 25, lastRowResizable = true;
|
|
17
|
+
var plugin = new prosemirror_state_1.Plugin({
|
|
18
|
+
key: utils_1.tableRowResizing,
|
|
19
|
+
state: {
|
|
20
|
+
init: function (_, state) {
|
|
21
|
+
this.spec.props.nodeViews[prosemirror_tables_1.tableNodeTypes(state.schema).row.name] = function (_node, _view) { return new TableRowView(); };
|
|
22
|
+
return new ResizeState(-1, null);
|
|
23
|
+
},
|
|
24
|
+
apply: function (tr, prev) {
|
|
25
|
+
return prev.apply(tr);
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
props: {
|
|
29
|
+
attributes: function (state) {
|
|
30
|
+
if (utils_1.otherResizeHandle(utils_1.tableRowResizing, state)) {
|
|
31
|
+
return null;
|
|
32
|
+
}
|
|
33
|
+
var pluginState = utils_1.tableRowResizing.getState(state);
|
|
34
|
+
return pluginState.activeHandle > -1 ? { class: 'resize-cursor-vertical' } : null;
|
|
35
|
+
},
|
|
36
|
+
handleDOMEvents: {
|
|
37
|
+
mousemove: function (view, event) {
|
|
38
|
+
if (!utils_1.otherResizing(utils_1.tableRowResizing, view.state)) {
|
|
39
|
+
handleMouseMove(view, event, handleWidth, rowMinHeight, lastRowResizable);
|
|
40
|
+
}
|
|
41
|
+
return false;
|
|
42
|
+
},
|
|
43
|
+
mouseleave: function (view) {
|
|
44
|
+
handleMouseLeave(view);
|
|
45
|
+
return false;
|
|
46
|
+
},
|
|
47
|
+
mousedown: function (view, event) {
|
|
48
|
+
return handleMouseDown(view, event, rowMinHeight);
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
decorations: function (state) {
|
|
52
|
+
if (utils_1.otherResizing(utils_1.tableRowResizing, state)) {
|
|
53
|
+
return prosemirror_view_1.DecorationSet.empty;
|
|
54
|
+
}
|
|
55
|
+
var pluginState = utils_1.tableRowResizing.getState(state);
|
|
56
|
+
if (pluginState.activeHandle > -1) {
|
|
57
|
+
return handleDecorations(state, pluginState.activeHandle);
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
nodeViews: {}
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
return plugin;
|
|
64
|
+
}
|
|
65
|
+
exports.rowResizing = rowResizing;
|
|
66
|
+
function pointsAtCell($pos) {
|
|
67
|
+
return $pos.parent.type.spec.tableRole === 'row' && $pos.nodeAfter;
|
|
68
|
+
}
|
|
69
|
+
var ResizeState = /** @class */ (function () {
|
|
70
|
+
function ResizeState(activeHandle, dragging) {
|
|
71
|
+
this.activeHandle = activeHandle;
|
|
72
|
+
this.dragging = dragging;
|
|
73
|
+
}
|
|
74
|
+
ResizeState.prototype.apply = function (tr) {
|
|
75
|
+
var state = this, action = tr.getMeta(utils_1.tableRowResizing);
|
|
76
|
+
if (action && action.setHandle != null) {
|
|
77
|
+
return new ResizeState(action.setHandle, null);
|
|
78
|
+
}
|
|
79
|
+
if (action && action.setDragging !== undefined) {
|
|
80
|
+
return new ResizeState(state.activeHandle, action.setDragging);
|
|
81
|
+
}
|
|
82
|
+
if (state.activeHandle > -1) { // && tr.docChanged
|
|
83
|
+
var handle = tr.mapping.map(state.activeHandle, -1);
|
|
84
|
+
if (!pointsAtCell(tr.doc.resolve(handle))) {
|
|
85
|
+
handle = null;
|
|
86
|
+
}
|
|
87
|
+
state = new ResizeState(handle, state.dragging);
|
|
88
|
+
}
|
|
89
|
+
return state;
|
|
90
|
+
};
|
|
91
|
+
return ResizeState;
|
|
92
|
+
}());
|
|
93
|
+
function handleMouseMove(view, event, handleWidth, _rowMinHeight, lastRowResizable) {
|
|
94
|
+
var pluginState = utils_1.tableRowResizing.getState(view.state);
|
|
95
|
+
if (!pluginState.dragging) {
|
|
96
|
+
var target = domCellAround(event.target), cell = -1;
|
|
97
|
+
if (target) {
|
|
98
|
+
var rowDom = target.parentNode;
|
|
99
|
+
var domRect = rowDom.getBoundingClientRect();
|
|
100
|
+
if (event.clientY - domRect.top <= handleWidth) {
|
|
101
|
+
cell = edgeCell(view, event, 'up');
|
|
102
|
+
}
|
|
103
|
+
else if (domRect.bottom - event.clientY <= handleWidth) {
|
|
104
|
+
cell = edgeCell(view, event, 'down');
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
if (cell !== pluginState.activeHandle) {
|
|
108
|
+
if (!lastRowResizable && cell !== -1) {
|
|
109
|
+
// let $cell = view.state.doc.resolve(cell);
|
|
110
|
+
// let table = $cell.node(-1), map = TableMap.get(table), start = $cell.start(-1);
|
|
111
|
+
// let col = map.colCount($cell.pos - start) + $cell.nodeAfter.attrs.colspan - 1;
|
|
112
|
+
// if (col === map.width - 1) {
|
|
113
|
+
// return;
|
|
114
|
+
// }
|
|
115
|
+
}
|
|
116
|
+
updateHandle(view, cell);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
function handleMouseLeave(view) {
|
|
121
|
+
var pluginState = utils_1.tableRowResizing.getState(view.state);
|
|
122
|
+
if (pluginState.activeHandle > -1 && !pluginState.dragging) {
|
|
123
|
+
updateHandle(view, -1);
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
function handleMouseDown(view, event, rowMinHeight) {
|
|
127
|
+
var pluginState = utils_1.tableRowResizing.getState(view.state);
|
|
128
|
+
if (pluginState.activeHandle === -1 || pluginState.dragging) {
|
|
129
|
+
return false;
|
|
130
|
+
}
|
|
131
|
+
var doc = view.state.doc;
|
|
132
|
+
var $pos = doc.resolve(pluginState.activeHandle);
|
|
133
|
+
var row = doc.nodeAt(pluginState.activeHandle);
|
|
134
|
+
var table = $pos.parent;
|
|
135
|
+
var rowHeightStr = utils_1.parseStyle(row.attrs.style).height;
|
|
136
|
+
var tableHeight = utils_1.parseStyle(table.attrs.style).height;
|
|
137
|
+
var rowHeight = rowHeightStr ? parseFloat(rowHeightStr) : 0;
|
|
138
|
+
if (!rowHeightStr) {
|
|
139
|
+
var tr = view.nodeDOM(pluginState.activeHandle);
|
|
140
|
+
rowHeight = tr.offsetHeight;
|
|
141
|
+
}
|
|
142
|
+
view.dispatch(view.state.tr.setMeta(utils_1.tableRowResizing, {
|
|
143
|
+
setDragging: {
|
|
144
|
+
startY: event.clientY,
|
|
145
|
+
startHeight: { rowHeight: rowHeight, tableHeight: tableHeight }
|
|
146
|
+
}
|
|
147
|
+
}));
|
|
148
|
+
function finish(ev) {
|
|
149
|
+
ev.view.removeEventListener('mouseup', finish);
|
|
150
|
+
ev.view.removeEventListener('mousemove', move);
|
|
151
|
+
var curPluginState = utils_1.tableRowResizing.getState(view.state);
|
|
152
|
+
if (curPluginState.dragging) {
|
|
153
|
+
var tr = view.state.tr.setMeta(utils_1.tableRowResizing, { setDragging: null });
|
|
154
|
+
updateRowHeight(view, tr, curPluginState.activeHandle, draggedHeight(curPluginState.dragging, ev, rowMinHeight));
|
|
155
|
+
view.dispatch(tr);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
function move(ev) {
|
|
159
|
+
if (!ev.which) {
|
|
160
|
+
return finish(ev);
|
|
161
|
+
}
|
|
162
|
+
var curPluginState = utils_1.tableRowResizing.getState(view.state);
|
|
163
|
+
var dragged = draggedHeight(curPluginState.dragging, ev, rowMinHeight);
|
|
164
|
+
var offset = ev.clientY - curPluginState.dragging.startY;
|
|
165
|
+
displayRowHeight(view, curPluginState.activeHandle, dragged, rowMinHeight, offset, tableHeight);
|
|
166
|
+
}
|
|
167
|
+
event.view.addEventListener('mouseup', finish);
|
|
168
|
+
event.view.addEventListener('mousemove', move);
|
|
169
|
+
event.preventDefault();
|
|
170
|
+
return true;
|
|
171
|
+
}
|
|
172
|
+
function domCellAround(target) {
|
|
173
|
+
while (target && target.nodeName !== 'TD' && target.nodeName !== 'TH') {
|
|
174
|
+
target = target.classList.contains('ProseMirror') ? null : target.parentNode;
|
|
175
|
+
}
|
|
176
|
+
return target;
|
|
177
|
+
}
|
|
178
|
+
function edgeCell(view, event, side) {
|
|
179
|
+
var found = view.posAtCoords({ left: event.clientX, top: event.clientY });
|
|
180
|
+
if (!found) {
|
|
181
|
+
return -1;
|
|
182
|
+
}
|
|
183
|
+
var pos = found.pos;
|
|
184
|
+
var doc = view.state.doc;
|
|
185
|
+
var $pos = doc.resolve(pos);
|
|
186
|
+
var rowDepth = new Array($pos.depth + 1).fill(0).findIndex(function (_, i) { return $pos.node(i).type.spec.tableRole === 'row'; });
|
|
187
|
+
if (rowDepth === -1) {
|
|
188
|
+
return -1;
|
|
189
|
+
}
|
|
190
|
+
var tableDepth = rowDepth - 1;
|
|
191
|
+
var rowIndex = $pos.index(tableDepth);
|
|
192
|
+
rowIndex += side === 'up' ? -1 : 0;
|
|
193
|
+
if (rowIndex < 0) {
|
|
194
|
+
return -1;
|
|
195
|
+
}
|
|
196
|
+
var rowPos = $pos.posAtIndex(rowIndex, tableDepth);
|
|
197
|
+
return rowPos;
|
|
198
|
+
}
|
|
199
|
+
function draggedHeight(dragging, event, rowMinHeight) {
|
|
200
|
+
var offset = event.clientY - dragging.startY;
|
|
201
|
+
return Math.max(rowMinHeight, dragging.startHeight.rowHeight + offset);
|
|
202
|
+
}
|
|
203
|
+
function updateHandle(view, value) {
|
|
204
|
+
view.dispatch(view.state.tr.setMeta(utils_1.tableRowResizing, { setHandle: value }));
|
|
205
|
+
}
|
|
206
|
+
function updateRowHeight(view, tr, rowPos, height) {
|
|
207
|
+
var doc = view.state.doc;
|
|
208
|
+
var row = doc.nodeAt(rowPos);
|
|
209
|
+
tr.setNodeMarkup(rowPos, null, utils_1.setNodeStyle(row.attrs, 'height', height + 'px'));
|
|
210
|
+
var dom = view.nodeDOM(rowPos);
|
|
211
|
+
var table = dom && dom.closest('table');
|
|
212
|
+
var tableHeight = table && table.style.height;
|
|
213
|
+
if (tableHeight) {
|
|
214
|
+
var $pos = doc.resolve(rowPos);
|
|
215
|
+
var tablePos = $pos.start($pos.depth) - 1;
|
|
216
|
+
tr.setNodeMarkup(tablePos, null, utils_1.setNodeStyle($pos.parent.attrs, 'height', tableHeight));
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
// tslint:disable-next-line:max-line-length
|
|
220
|
+
function displayRowHeight(view, rowPos, height, rowMinHeight, offset, tableHeight) {
|
|
221
|
+
var dom = view.nodeDOM(rowPos);
|
|
222
|
+
if (dom) {
|
|
223
|
+
dom.style.height = Math.max(height, rowMinHeight) + 'px';
|
|
224
|
+
var table = dom.closest('table');
|
|
225
|
+
var newHeight = (parseFloat(tableHeight) + offset) + 'px';
|
|
226
|
+
var current = table && table.style.height;
|
|
227
|
+
if (current && current !== newHeight) {
|
|
228
|
+
table.style.height = (parseFloat(tableHeight) + offset) + 'px';
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
function handleDecorations(state, pos) {
|
|
233
|
+
var decorations = [];
|
|
234
|
+
if (typeof pos !== 'number') {
|
|
235
|
+
return;
|
|
236
|
+
}
|
|
237
|
+
var $row = state.doc.resolve(pos), table = $row.parent, map = prosemirror_tables_1.TableMap.get(table), rowIndex = $row.index($row.depth), start = $row.start($row.depth);
|
|
238
|
+
for (var col = 0; col < map.width; col++) {
|
|
239
|
+
var index = col + rowIndex * map.width;
|
|
240
|
+
var cellPos = map.map[index];
|
|
241
|
+
var widgetPos = start + cellPos + table.nodeAt(cellPos).nodeSize - 1;
|
|
242
|
+
var dom = document.createElement('div');
|
|
243
|
+
dom.className = 'row-resize-handle';
|
|
244
|
+
decorations.push(prosemirror_view_1.Decoration.widget(widgetPos, dom));
|
|
245
|
+
}
|
|
246
|
+
return prosemirror_view_1.DecorationSet.create(state.doc, decorations);
|
|
247
|
+
}
|