Skip to content

Commit ba60793

Browse files
ukrbublikukrbublik
committed
Issue #1
Sortable is fully working
1 parent 9b20281 commit ba60793

File tree

6 files changed

+92
-22
lines changed

6 files changed

+92
-22
lines changed

‎css/compact_styles.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,14 @@
3939
padding-right: 5px;
4040
}
4141

42+
/*
43+
.query-builder.qb-dragging {
44+
.group-or-rule-container {
45+
margin-bottom: 10px;
46+
}
47+
}
48+
*/
49+
4250
.rule--operator, .widget--widget {
4351
display: inline-block;
4452
margin-left: 5px;

‎css/styles.scss‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
-moz-user-select: none;
1313
-ms-user-select: none;
1414
user-select: none;
15-
pointer-events: none;
1615
}
1716

1817
%noselect {
@@ -41,6 +40,8 @@
4140
}
4241

4342
.query-builder.qb-dragging {
43+
cursor: -webkit-grabbing !important;
44+
cursor: grabbing !important;
4445
button {
4546
pointer-events: none;
4647
}
@@ -73,6 +74,7 @@
7374

7475
.qb-draggable {
7576
@extend %noselect;
77+
pointer-events: none;
7678
position: absolute;
7779
opacity: 0.7;
7880
z-index: 1000;
@@ -152,6 +154,12 @@
152154
}
153155
}
154156

157+
.qb-drag-handler {
158+
@extend %noselect;
159+
cursor: -webkit-grabbing;
160+
cursor: grabbing;
161+
}
162+
155163
.group--header {
156164
@extend %clearfix;
157165
padding: 10px;

‎modules/components/Group.js‎

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,46 @@ export default class Group extends Component {
1616
addGroup: PropTypes.func.isRequired,
1717
removeSelf: PropTypes.func.isRequired,
1818
allowFurtherNesting: PropTypes.bool.isRequired,
19-
allowRemoval: PropTypes.bool.isRequired,
19+
isRoot: PropTypes.bool.isRequired,
2020
selectedConjunction: PropTypes.string,
2121
setConjunction: PropTypes.func.isRequired,
2222
config: PropTypes.object.isRequired,
2323
};
2424

2525
shouldComponentUpdate = shallowCompare;
2626

27+
28+
handleDraggerMouseDown (e) {
29+
var nodeId = this.props.id;
30+
var dom = this.refs.group;
31+
console.log(this.props.onDragStart);
32+
if (this.props.onDragStart) {
33+
this.props.onDragStart(nodeId, dom, e);
34+
}
35+
}
36+
2737
render() {
2838
let renderConjsAsRadios = false;
39+
40+
let styles = {};
41+
if (this.props.renderType == 'dragging') {
42+
styles = {
43+
top: this.props.dragging.y,
44+
left: this.props.dragging.x,
45+
width: this.props.dragging.w
46+
};
47+
}
48+
console.log(this.props);
2949
return (
30-
<div className="group group-or-rule" data-id={this.props.id}>
50+
<div
51+
className={classNames("group", "group-or-rule",
52+
this.props.renderType == 'placeholder' ? 'qb-placeholder' : null,
53+
this.props.renderType == 'dragging' ? 'qb-draggable' : null,
54+
)}
55+
style={styles}
56+
ref="group"
57+
data-id={this.props.id}
58+
>
3159
<div className="group--header">
3260
<div className={classNames(
3361
"group--conjunctions",
@@ -62,6 +90,9 @@ export default class Group extends Component {
6290
))}
6391
</ButtonGroup>
6492
}
93+
{ this.props.config.settings.canReorder && !this.props.isRoot &&
94+
<span className={"qb-drag-handler"} onMouseDown={this.handleDraggerMouseDown.bind(this)} > <Icon type="bars" /> </span>
95+
}
6596
</div>
6697
<div className="group--actions">
6798
<ButtonGroup
@@ -79,7 +110,7 @@ export default class Group extends Component {
79110
onClick={this.props.addGroup}
80111
>{this.props.config.settings.addGroupLabel || "Add group"}</Button>
81112
) : null}
82-
{this.props.allowRemoval ? (
113+
{!this.props.isRoot ? (
83114
<Button
84115
type="danger"
85116
icon="delete"

‎modules/components/Rule.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export default class Rule extends Component {
8686
{/*<div className="rule--body">*/}
8787
{/*<Row>*/}
8888
{ this.props.config.settings.canReorder &&
89-
<span onMouseDown={this.handleDraggerMouseDown.bind(this)} >###</span>
89+
<span className={"qb-drag-handler"} onMouseDown={this.handleDraggerMouseDown.bind(this)} ><Icon type="bars" /> </span>
9090
}
9191
{true ? (
9292
<Col key={"fields"} className="rule--field">

‎modules/components/containers/GroupContainer.js‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export default (Group) => {
4646
// Don't allow nesting further than the maximum configured depth and don't
4747
// allow removal of the root group.
4848
const allowFurtherNesting = typeof maxNesting === 'undefined' || currentNesting < maxNesting;
49-
const allowRemoval = currentNesting > 1;
49+
const isRoot = currentNesting == 1;
5050

5151
const conjunctionOptions = mapValues(this.props.config.conjunctions, (item, index) => ({
5252
id: `conjunction-${this.props.id}-${index}`,
@@ -61,9 +61,11 @@ export default (Group) => {
6161
className={'group-or-rule-container group-container'}
6262
data-id={this.props.id}
6363
>
64+
{[this.props.dragging && this.props.dragging.id == this.props.id ? (
6465
<Group
66+
key={"dragging"}
6567
id={this.props.id}
66-
allowRemoval={allowRemoval}
68+
isRoot={isRoot}
6769
allowFurtherNesting={allowFurtherNesting}
6870
conjunctionOptions={conjunctionOptions}
6971
selectedConjunction={this.props.conjunction}
@@ -73,7 +75,28 @@ export default (Group) => {
7375
addRule={this.addRule.bind(this)}
7476
config={this.props.config}
7577
tree={this.props.tree}
78+
dragging={this.props.dragging}
79+
renderType={'dragging'}
7680
>{this.props.children}</Group>
81+
) : null, (
82+
<Group
83+
key={this.props.id}
84+
id={this.props.id}
85+
isRoot={isRoot}
86+
allowFurtherNesting={allowFurtherNesting}
87+
conjunctionOptions={conjunctionOptions}
88+
selectedConjunction={this.props.conjunction}
89+
setConjunction={this.setConjunction.bind(this)}
90+
removeSelf={this.removeSelf.bind(this)}
91+
addGroup={this.addGroup.bind(this)}
92+
addRule={this.addRule.bind(this)}
93+
config={this.props.config}
94+
tree={this.props.tree}
95+
onDragStart={this.props.onDragStart}
96+
dragging={this.props.dragging}
97+
renderType={this.props.dragging && this.props.dragging.id == this.props.id ? 'placeholder' : null}
98+
>{this.props.children}</Group>
99+
)]}
77100
</div>
78101
);
79102
}

‎modules/components/containers/SortableContainer.js‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,9 @@ export default (Builder, CanMoveFn = null) => {
5151
startDragging.plY = plY;
5252
startDragging.itemInfo = clone(dragging.itemInfo);
5353
startDragging.y = plhEl.offsetTop;
54+
startDragging.x = plhEl.offsetLeft;
5455
startDragging.clientY += (plY - oldPlY);
56+
startDragging.clientX += (plX - oldPlX);
5557

5658
this._onDrag(this.mousePos, false);
5759
}
@@ -264,8 +266,8 @@ export default (Builder, CanMoveFn = null) => {
264266
var isGroup = hovCNodeEl.classList.contains('group-container');
265267
var hovNodeId = hovCNodeEl.getAttribute('data-id');
266268
var hovEl = hovCNodeEl;
267-
var onlyAppend = false;
268-
var onlyPrepend = false;
269+
var doAppend = false;
270+
var doPrepend = false;
269271
if (hovEl) {
270272
var hovRect = hovEl.getBoundingClientRect();
271273
var hovHeight = hovRect.bottom - hovRect.top;
@@ -292,25 +294,26 @@ export default (Builder, CanMoveFn = null) => {
292294
trgII = hovII;
293295
trgRect = hovRect2;
294296
trgEl = hovEl2;
295-
onlyPrepend = true;
297+
doPrepend = true;
296298
}
297299
} else if (dragDirs.vrt < 0) { //up
298300
if (hovII.lev >= itemInfo.lev) {
299301
//take whole group
300-
var isClimbToHover = ((hovRect.bottom - dragRect.top) >= 5); //todo: 5 is magic for now, configure it!
302+
//todo: 5 is magic for now (bottom margin), configure it!
303+
var isClimbToHover = ((hovRect.bottom - dragRect.top) >= 2);
301304
if (isClimbToHover && hovII.top < dragInfo.itemInfo.top) {
302305
trgII = hovII;
303306
trgRect = hovRect;
304307
trgEl = hovEl;
305-
onlyAppend = true;
308+
doAppend = true;
306309
}
307310
}
308311
}
309-
if (!onlyPrepend && !onlyAppend) {
312+
if (!doPrepend && !doAppend) {
310313
//take whole group and check if we can move before/after group
311314
var isOverHover = (dragDirs.vrt < 0 //up
312-
? ((hovRect.bottom - dragRect.top) > (hovHeight-2))
313-
: ((dragRect.bottom - hovRect.top) > (hovHeight-2)));
315+
? ((hovRect.bottom - dragRect.top) > (hovHeight-5))
316+
: ((dragRect.bottom - hovRect.top) > (hovHeight-5)));
314317
if (isOverHover) {
315318
trgII = hovII;
316319
trgRect = hovRect;
@@ -340,20 +343,17 @@ export default (Builder, CanMoveFn = null) => {
340343
if (isSamePos) {
341344
//do nothing
342345
} else {
343-
//find out where we can move..
344346
if (isGroup) {
345-
if (onlyAppend) {
347+
if (doAppend) {
346348
availMoves.push([constants.PLACEMENT_APPEND, trgII, trgII.lev+1]);
347-
}
348-
if (onlyPrepend) {
349+
} else if (doPrepend) {
349350
availMoves.push([constants.PLACEMENT_PREPEND, trgII, trgII.lev+1]);
350351
}
351352
}
352-
if (!onlyAppend && !onlyPrepend) {
353+
if (!doAppend && !doPrepend) {
353354
if (dragDirs.vrt < 0) {
354355
availMoves.push([constants.PLACEMENT_BEFORE, trgII, trgII.lev]);
355-
}
356-
if (dragDirs.vrt > 0 && (trgII.leaf || trgII.collapsed || !trgII.leaf && trgII.top < dragInfo.itemInfo.top)) {
356+
} else if (dragDirs.vrt > 0) {
357357
availMoves.push([constants.PLACEMENT_AFTER, trgII, trgII.lev]);
358358
}
359359
}

0 commit comments

Comments
 (0)