mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-07-19 22:03:19 +03:00
289 lines
10 KiB
JavaScript
289 lines
10 KiB
JavaScript
/**
|
|
* This file originates from https://github.com/ProseMirror/prosemirror-tables
|
|
* and is hence subject to the MIT license found here:
|
|
* https://github.com/ProseMirror/prosemirror-menu/blob/master/LICENSE
|
|
* @copyright Marijn Haverbeke and others
|
|
*/
|
|
|
|
import {Plugin, PluginKey} from "prosemirror-state"
|
|
import {Decoration, DecorationSet} from "prosemirror-view"
|
|
import {
|
|
cellAround,
|
|
pointsAtCell,
|
|
setAttr,
|
|
TableMap,
|
|
} from "prosemirror-tables";
|
|
|
|
export const key = new PluginKey("tableColumnResizing")
|
|
|
|
export function columnResizing(options = {}) {
|
|
const {
|
|
handleWidth, cellMinWidth, lastColumnResizable
|
|
} = Object.assign({
|
|
handleWidth: 5,
|
|
cellMinWidth: 25,
|
|
lastColumnResizable: true
|
|
}, options);
|
|
|
|
let plugin = new Plugin({
|
|
key,
|
|
state: {
|
|
init(_, state) {
|
|
return new ResizeState(-1, false)
|
|
},
|
|
apply(tr, prev) {
|
|
return prev.apply(tr)
|
|
}
|
|
},
|
|
props: {
|
|
attributes(state) {
|
|
let pluginState = key.getState(state)
|
|
return pluginState.activeHandle > -1 ? {class: "resize-cursor"} : null
|
|
},
|
|
|
|
handleDOMEvents: {
|
|
mousemove(view, event) {
|
|
handleMouseMove(view, event, handleWidth, cellMinWidth, lastColumnResizable)
|
|
},
|
|
mouseleave(view) {
|
|
handleMouseLeave(view)
|
|
},
|
|
mousedown(view, event) {
|
|
handleMouseDown(view, event, cellMinWidth)
|
|
}
|
|
},
|
|
|
|
decorations(state) {
|
|
let pluginState = key.getState(state)
|
|
if (pluginState.activeHandle > -1) return handleDecorations(state, pluginState.activeHandle)
|
|
},
|
|
|
|
nodeViews: {}
|
|
}
|
|
})
|
|
return plugin
|
|
}
|
|
|
|
class ResizeState {
|
|
constructor(activeHandle, dragging) {
|
|
this.activeHandle = activeHandle
|
|
this.dragging = dragging
|
|
}
|
|
|
|
apply(tr) {
|
|
let state = this, action = tr.getMeta(key)
|
|
if (action && action.setHandle != null)
|
|
return new ResizeState(action.setHandle, null)
|
|
if (action && action.setDragging !== undefined)
|
|
return new ResizeState(state.activeHandle, action.setDragging)
|
|
if (state.activeHandle > -1 && tr.docChanged) {
|
|
let handle = tr.mapping.map(state.activeHandle, -1)
|
|
if (!pointsAtCell(tr.doc.resolve(handle))) handle = null
|
|
state = new ResizeState(handle, state.dragging)
|
|
}
|
|
return state
|
|
}
|
|
}
|
|
|
|
function handleMouseMove(view, event, handleWidth, cellMinWidth, lastColumnResizable) {
|
|
let pluginState = key.getState(view.state)
|
|
|
|
if (!pluginState.dragging) {
|
|
let target = domCellAround(event.target), cell = -1
|
|
if (target) {
|
|
let {left, right} = target.getBoundingClientRect()
|
|
if (event.clientX - left <= handleWidth)
|
|
cell = edgeCell(view, event, "left")
|
|
else if (right - event.clientX <= handleWidth)
|
|
cell = edgeCell(view, event, "right")
|
|
}
|
|
|
|
if (cell != pluginState.activeHandle) {
|
|
if (!lastColumnResizable && cell !== -1) {
|
|
let $cell = view.state.doc.resolve(cell)
|
|
let table = $cell.node(-1), map = TableMap.get(table), start = $cell.start(-1)
|
|
let col = map.colCount($cell.pos - start) + $cell.nodeAfter.attrs.colspan - 1
|
|
|
|
if (col == map.width - 1) {
|
|
return
|
|
}
|
|
}
|
|
|
|
updateHandle(view, cell)
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleMouseLeave(view) {
|
|
let pluginState = key.getState(view.state)
|
|
if (pluginState.activeHandle > -1 && !pluginState.dragging) updateHandle(view, -1)
|
|
}
|
|
|
|
function handleMouseDown(view, event, cellMinWidth) {
|
|
let pluginState = key.getState(view.state)
|
|
if (pluginState.activeHandle == -1 || pluginState.dragging) return false
|
|
|
|
let cell = view.state.doc.nodeAt(pluginState.activeHandle)
|
|
let width = currentColWidth(view, pluginState.activeHandle, cell.attrs)
|
|
view.dispatch(view.state.tr.setMeta(key, {setDragging: {startX: event.clientX, startWidth: width}}))
|
|
|
|
function finish(event) {
|
|
window.removeEventListener("mouseup", finish)
|
|
window.removeEventListener("mousemove", move)
|
|
let pluginState = key.getState(view.state)
|
|
if (pluginState.dragging) {
|
|
updateColumnWidth(view, pluginState.activeHandle, draggedWidth(pluginState.dragging, event, cellMinWidth))
|
|
view.dispatch(view.state.tr.setMeta(key, {setDragging: null}))
|
|
}
|
|
}
|
|
|
|
function move(event) {
|
|
if (!event.which) return finish(event)
|
|
let pluginState = key.getState(view.state)
|
|
let dragged = draggedWidth(pluginState.dragging, event, cellMinWidth)
|
|
displayColumnWidth(view, pluginState.activeHandle, dragged, cellMinWidth)
|
|
}
|
|
|
|
window.addEventListener("mouseup", finish)
|
|
window.addEventListener("mousemove", move)
|
|
event.preventDefault()
|
|
return true
|
|
}
|
|
|
|
function currentColWidth(view, cellPos, {colspan, colwidth}) {
|
|
let width = colwidth && colwidth[colwidth.length - 1]
|
|
if (width) return width
|
|
let dom = view.domAtPos(cellPos)
|
|
let node = dom.node.childNodes[dom.offset]
|
|
let domWidth = node.offsetWidth, parts = colspan
|
|
if (colwidth) for (let i = 0; i < colspan; i++) if (colwidth[i]) {
|
|
domWidth -= colwidth[i]
|
|
parts--
|
|
}
|
|
return domWidth / parts
|
|
}
|
|
|
|
function domCellAround(target) {
|
|
while (target && target.nodeName != "TD" && target.nodeName != "TH")
|
|
target = target.classList.contains("ProseMirror") ? null : target.parentNode
|
|
return target
|
|
}
|
|
|
|
function edgeCell(view, event, side) {
|
|
let found = view.posAtCoords({left: event.clientX, top: event.clientY})
|
|
if (!found) return -1
|
|
let {pos} = found
|
|
let $cell = cellAround(view.state.doc.resolve(pos))
|
|
if (!$cell) return -1
|
|
if (side == "right") return $cell.pos
|
|
let map = TableMap.get($cell.node(-1)), start = $cell.start(-1)
|
|
let index = map.map.indexOf($cell.pos - start)
|
|
return index % map.width == 0 ? -1 : start + map.map[index - 1]
|
|
}
|
|
|
|
function draggedWidth(dragging, event, cellMinWidth) {
|
|
let offset = event.clientX - dragging.startX
|
|
return Math.max(cellMinWidth, dragging.startWidth + offset)
|
|
}
|
|
|
|
function updateHandle(view, value) {
|
|
view.dispatch(view.state.tr.setMeta(key, {setHandle: value}))
|
|
}
|
|
|
|
function updateColumnWidth(view, cell, width) {
|
|
let $cell = view.state.doc.resolve(cell);
|
|
let table = $cell.node(-1);
|
|
let map = TableMap.get(table);
|
|
let start = $cell.start(-1);
|
|
let col = map.colCount($cell.pos - start) + $cell.nodeAfter.attrs.colspan - 1;
|
|
let tr = view.state.tr;
|
|
|
|
for (let row = 0; row < map.height; row++) {
|
|
let mapIndex = row * map.width + col;
|
|
// Rowspanning cell that has already been handled
|
|
if (row && map.map[mapIndex] == map.map[mapIndex - map.width]) continue
|
|
let pos = map.map[mapIndex]
|
|
let {attrs} = table.nodeAt(pos);
|
|
const newWidth = (attrs.colspan * width) + 'px';
|
|
|
|
tr.setNodeMarkup(start + pos, null, setAttr(attrs, "width", newWidth));
|
|
}
|
|
|
|
if (tr.docChanged) view.dispatch(tr)
|
|
}
|
|
|
|
function displayColumnWidth(view, cell, width, cellMinWidth) {
|
|
const $cell = view.state.doc.resolve(cell)
|
|
const table = $cell.node(-1);
|
|
const start = $cell.start(-1);
|
|
const col = TableMap.get(table).colCount($cell.pos - start) + $cell.nodeAfter.attrs.colspan - 1
|
|
let dom = view.domAtPos($cell.start(-1)).node
|
|
while (dom.nodeName !== "TABLE") {
|
|
dom = dom.parentNode
|
|
}
|
|
updateColumnsOnResize(view, table, dom, cellMinWidth, col, width)
|
|
}
|
|
|
|
|
|
function updateColumnsOnResize(view, tableNode, tableDom, cellMinWidth, overrideCol, overrideValue) {
|
|
console.log({tableNode, tableDom, cellMinWidth, overrideCol, overrideValue});
|
|
let totalWidth = 0;
|
|
let fixedWidth = true;
|
|
const rows = tableDom.querySelectorAll('tr');
|
|
|
|
for (let y = 0; y < rows.length; y++) {
|
|
const row = rows[y];
|
|
const cell = row.children[overrideCol];
|
|
cell.style.width = `${overrideValue}px`;
|
|
if (y === 0) {
|
|
for (let x = 0; x < row.children.length; x++) {
|
|
const cell = row.children[x];
|
|
if (cell.style.width) {
|
|
const width = Number(cell.style.width.replace('px', ''));
|
|
totalWidth += width || cellMinWidth;
|
|
} else {
|
|
fixedWidth = false;
|
|
totalWidth += cellMinWidth;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
console.log(totalWidth);
|
|
if (fixedWidth) {
|
|
tableDom.style.width = totalWidth + "px"
|
|
tableDom.style.minWidth = ""
|
|
} else {
|
|
tableDom.style.width = ""
|
|
tableDom.style.minWidth = totalWidth + "px"
|
|
}
|
|
}
|
|
|
|
function zeroes(n) {
|
|
let result = []
|
|
for (let i = 0; i < n; i++) result.push(0)
|
|
return result
|
|
}
|
|
|
|
function handleDecorations(state, cell) {
|
|
let decorations = []
|
|
let $cell = state.doc.resolve(cell)
|
|
let table = $cell.node(-1), map = TableMap.get(table), start = $cell.start(-1)
|
|
let col = map.colCount($cell.pos - start) + $cell.nodeAfter.attrs.colspan
|
|
for (let row = 0; row < map.height; row++) {
|
|
let index = col + row * map.width - 1
|
|
// For positions that are have either a different cell or the end
|
|
// of the table to their right, and either the top of the table or
|
|
// a different cell above them, add a decoration
|
|
if ((col == map.width || map.map[index] != map.map[index + 1]) &&
|
|
(row == 0 || map.map[index - 1] != map.map[index - 1 - map.width])) {
|
|
let cellPos = map.map[index]
|
|
let pos = start + cellPos + table.nodeAt(cellPos).nodeSize - 1
|
|
let dom = document.createElement("div")
|
|
dom.className = "column-resize-handle"
|
|
decorations.push(Decoration.widget(pos, dom))
|
|
}
|
|
}
|
|
return DecorationSet.create(state.doc, decorations)
|
|
}
|