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
|
import React = require('react');
import { action } from 'mobx';
import { SchemaHeaderField } from '../../../../fields/SchemaHeaderField';
import { DragManager } from '../../../util/DragManager';
import { SnappingManager } from '../../../util/SnappingManager';
import { Transform } from '../../../util/Transform';
import './CollectionSchemaView.scss';
export interface MovableColumnProps {
columnRenderer: React.ReactNode;
columnValue: SchemaHeaderField;
allColumns: SchemaHeaderField[];
reorderColumns: (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columns: SchemaHeaderField[]) => void;
ScreenToLocalTransform: () => Transform;
}
export class MovableColumn extends React.Component<MovableColumnProps> {
// The header of the column
private _header?: React.RefObject<HTMLDivElement> = React.createRef();
// The container of the function that is responsible for moving the column over to a new plac
private _colDropDisposer?: DragManager.DragDropDisposer;
// initial column position
private _startDragPosition: { x: number; y: number } = { x: 0, y: 0 };
// sensitivity to being dragged, in pixels
private _sensitivity: number = 16;
// Column reference ID
private _dragRef: React.RefObject<HTMLDivElement> = React.createRef();
onPointerEnter = (e: React.PointerEvent): void => {
// if the column is left-clicked and it is being dragged
if (e.buttons === 1 && SnappingManager.GetIsDragging()) {
this._header!.current!.className = 'collectionSchema-col-wrapper';
document.addEventListener('pointermove', this.onDragMove, true);
}
};
onPointerLeave = (e: React.PointerEvent): void => {
this._header!.current!.className = 'collectionSchema-col-wrapper';
document.removeEventListener('pointermove', this.onDragMove, true);
!e.buttons && document.removeEventListener('pointermove', this.onPointerMove);
};
onDragMove = (e: PointerEvent): void => {
// only take into account the horizonal direction when a column is dragged
const x = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY);
const rect = this._header!.current!.getBoundingClientRect();
// Now store the point at the top center of the column when it was in its original position
const bounds = this.props.ScreenToLocalTransform().transformPoint(rect.left + (rect.right - rect.left) / 2, rect.top);
// to be compared with its new horizontal position
const before = x[0] < bounds[0];
this._header!.current!.className = 'collectionSchema-col-wrapper';
if (before) this._header!.current!.className += ' col-before';
if (!before) this._header!.current!.className += ' col-after';
e.stopPropagation();
};
createColDropTarget = (ele: HTMLDivElement) => {
this._colDropDisposer?.();
if (ele) {
this._colDropDisposer = DragManager.MakeDropTarget(ele, this.colDrop.bind(this));
}
};
colDrop = (e: Event, de: DragManager.DropEvent) => {
document.removeEventListener('pointermove', this.onDragMove, true);
// we only care about whether the column is shifted to the side
const x = this.props.ScreenToLocalTransform().transformPoint(de.x, de.y);
// get the dimensions of the smallest rectangle that bounds the header
const rect = this._header!.current!.getBoundingClientRect();
const bounds = this.props.ScreenToLocalTransform().transformPoint(rect.left + (rect.right - rect.left) / 2, rect.top);
// get whether the column was dragged before or after where it is now
const before = x[0] < bounds[0];
const colDragData = de.complete.columnDragData;
// if there is colDragData, which happen when the drag is complete, reorder the columns according to the established variables
if (colDragData) {
e.stopPropagation();
this.props.reorderColumns(colDragData.colKey, this.props.columnValue, before, this.props.allColumns);
return true;
}
return false;
};
onPointerMove = (e: PointerEvent) => {
const onRowMove = (e: PointerEvent) => {
e.stopPropagation();
e.preventDefault();
document.removeEventListener('pointermove', onRowMove);
document.removeEventListener('pointerup', onRowUp);
const dragData = new DragManager.ColumnDragData(this.props.columnValue);
DragManager.StartColumnDrag(this._dragRef.current!, dragData, e.x, e.y);
};
const onRowUp = (): void => {
document.removeEventListener('pointermove', onRowMove);
document.removeEventListener('pointerup', onRowUp);
};
// if the left mouse button is the one being held
if (e.buttons === 1) {
const [dx, dy] = this.props.ScreenToLocalTransform().transformDirection(e.clientX - this._startDragPosition.x, e.clientY - this._startDragPosition.y);
// If the movemnt of the drag exceeds the sensitivity value
if (Math.abs(dx) + Math.abs(dy) > this._sensitivity) {
document.removeEventListener('pointermove', this.onPointerMove);
e.stopPropagation();
document.addEventListener('pointermove', onRowMove);
document.addEventListener('pointerup', onRowUp);
}
}
};
onPointerUp = (e: React.PointerEvent) => {
document.removeEventListener('pointermove', this.onPointerMove);
};
@action
onPointerDown = (e: React.PointerEvent, ref: React.RefObject<HTMLDivElement>) => {
this._dragRef = ref;
const [dx, dy] = this.props.ScreenToLocalTransform().transformDirection(e.clientX, e.clientY);
// If the cell thing dragged is not being edited
if (!(e.target as any)?.tagName.includes('INPUT')) {
this._startDragPosition = { x: dx, y: dy };
document.addEventListener('pointermove', this.onPointerMove);
}
};
render() {
const reference = React.createRef<HTMLDivElement>();
return (
<div className="collectionSchema-col" ref={this.createColDropTarget}>
<div className="collectionSchema-col-wrapper" ref={this._header} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}>
<div className="col-dragger" ref={reference} onPointerDown={e => this.onPointerDown(e, reference)} onPointerUp={this.onPointerUp}>
{this.props.columnRenderer}
</div>
</div>
</div>
);
}
}
|
