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
|
import React = require('react');
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, ObservableSet } from 'mobx';
import { observer } from 'mobx-react';
import { Doc } from '../../../../fields/Doc';
import { undoBatch } from '../../../util/UndoManager';
import { ViewBoxBaseComponent } from '../../DocComponent';
import { OpenWhere } from '../../nodes/DocumentView';
import { FieldView, FieldViewProps } from '../../nodes/FieldView';
import { CollectionSchemaView } from './CollectionSchemaView';
import './CollectionSchemaView.scss';
import { SchemaTableCell } from './SchemaTableCell';
import { Colors } from '../../global/globalEnums';
import { DocCast, StrCast } from '../../../../fields/Types';
import { setupMoveUpEvents, emptyFunction } from '../../../../Utils';
import { DragManager } from '../../../util/DragManager';
@observer
export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() {
public static LayoutString(fieldKey: string) {
return FieldView.LayoutString(SchemaRowBox, fieldKey);
}
private _ref: HTMLDivElement | null = null;
bounds = () => this._ref?.getBoundingClientRect();
@computed get schemaView() {
const vpath = this.props.docViewPath();
return vpath.length > 1 ? (vpath[vpath.length - 2].ComponentView as CollectionSchemaView) : undefined;
}
@computed get schemaDoc() {
return this.props.ContainingCollectionDoc!;
}
@computed get rowIndex() {
return this.schemaView?.rowIndex(this.rootDoc) ?? -1;
}
@action
onRowPointerDown = (e: React.PointerEvent) => {
setupMoveUpEvents(this, e, e => this.schemaView?.startDrag(e, this.rootDoc, this.rowIndex) ?? true, emptyFunction, emptyFunction, false);
};
onPointerEnter = (e: any) => {
if (!this.schemaView?._isDragging) return;
document.removeEventListener('pointermove', this.onPointerMove);
document.addEventListener('pointermove', this.onPointerMove);
};
onPointerMove = (e: any) => {
if (!this.schemaView?._isDragging) return;
let dragIsRow: boolean = true;
DragManager.docsBeingDragged.forEach(doc => {
dragIsRow = this.schemaView?._selectedDocs.has(doc) ?? false;
});
if (this._ref && dragIsRow) {
const rect = this._ref.getBoundingClientRect();
const y = e.clientY - rect.top; //y position within the element.
const height = this._ref.clientHeight;
const halfLine = height / 2;
if (y <= halfLine) {
this._ref.style.borderTop = `solid 2px ${Colors.MEDIUM_BLUE}`;
this._ref.style.borderBottom = '0px';
this.schemaView?.setDropIndex(this.rowIndex);
} else if (y > halfLine) {
this._ref.style.borderTop = '0px';
this._ref.style.borderBottom = `solid 2px ${Colors.MEDIUM_BLUE}`;
this.schemaView?.setDropIndex(this.rowIndex + 1);
}
}
};
onPointerLeave = (e: any) => {
if (this._ref) {
this._ref.style.borderTop = '0px';
this._ref.style.borderBottom = '0px';
}
document.removeEventListener('pointermove', this.onPointerMove);
};
render() {
return (
<div
className="schema-row"
style={
this.props.isSelected()
? { height: CollectionSchemaView._rowHeight, backgroundColor: Colors.LIGHT_BLUE, pointerEvents: this.schemaView?.props.isContentActive() ? 'all' : undefined /*, opacity: this.props.dragging ? 0.5 : 1 */ }
: { height: CollectionSchemaView._rowHeight, pointerEvents: this.schemaView?.props.isContentActive() ? 'all' : undefined }
}
onPointerDown={this.onRowPointerDown}
onPointerEnter={this.onPointerEnter}
onPointerLeave={this.onPointerLeave}
ref={(row: HTMLDivElement | null) => {
row && this.schemaView?.addRowRef?.(this.rootDoc, row);
this._ref = row;
}}>
<div
className="row-menu"
style={{
width: CollectionSchemaView._rowMenuWidth,
}}>
<div
className="schema-row-button"
onPointerDown={undoBatch(e => {
e.stopPropagation();
this.props.removeDocument?.(this.rootDoc);
})}>
<FontAwesomeIcon icon="times" />
</div>
<div
className="schema-row-button"
onPointerDown={e => {
e.stopPropagation();
this.props.addDocTab(this.rootDoc, OpenWhere.addRight);
}}>
<FontAwesomeIcon icon="external-link-alt" />
</div>
</div>
<div className="row-cells">
{this.schemaView?.columnKeys?.map((key, index) => (
<SchemaTableCell key={key} Document={this.rootDoc} fieldKey={key} columnWidth={this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth} isRowActive={this.props.isContentActive} />
))}
</div>
</div>
);
}
}
|
