Skip to content

Commit 4dbb3cc

Browse files
LochemageLochemage
committed
Greatly improved the way splitters move when they carry other splitters nested within.
1 parent c184ab5 commit 4dbb3cc

File tree

3 files changed

+91
-36
lines changed

3 files changed

+91
-36
lines changed

‎Build/wcDocker.js‎

Lines changed: 45 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1308,7 +1308,6 @@ wcDocker.prototype = {
13081308
y: event.clientY,
13091309
};
13101310
self._draggingSplitter.__moveBar(mouse);
1311-
self._draggingSplitter.__update();
13121311
} else if (self._draggingFrameSizer) {
13131312
var mouse = {
13141313
x: event.clientX,
@@ -4267,12 +4266,12 @@ wcSplitter.prototype = {
42674266
// value If supplied, assigns a new splitter percentage (0-1).
42684267
// Returns:
42694268
// number The current position.
4270-
pos: function(value) {
4269+
pos: function(value, opt_update) {
42714270
if (typeof value === 'undefined') {
42724271
return this._pos;
42734272
}
42744273
this._pos = value;
4275-
this.__update();
4274+
this.__update(opt_update);
42764275

42774276
if (this._parent instanceof wcPanel) {
42784277
this._parent.__trigger(wcDocker.EVENT_UPDATED);
@@ -4309,7 +4308,7 @@ wcSplitter.prototype = {
43094308
}
43104309
}
43114310
}
4312-
this.__update();
4311+
// this.__update();
43134312
return false;
43144313
},
43154314

@@ -4395,7 +4394,8 @@ wcSplitter.prototype = {
43954394
},
43964395

43974396
// Updates the size of the splitter.
4398-
__update: function() {
4397+
__update: function(opt_fromOrientation, opt_fromPane, opt_oldSize) {
4398+
43994399
var width = this.$container.width();
44004400
var height = this.$container.height();
44014401

@@ -4455,7 +4455,32 @@ wcSplitter.prototype = {
44554455
}
44564456
}
44574457

4458-
if (this._orientation) {
4458+
if (opt_fromOrientation === this._orientation) {
4459+
var pos = opt_oldSize * this._pos;
4460+
var size = -1;
4461+
switch (opt_fromOrientation) {
4462+
case wcDocker.ORIENTATION_HORIZONTAL:
4463+
size = width;
4464+
break;
4465+
case wcDocker.ORIENTATION_VERTICAL:
4466+
size = height;
4467+
break;
4468+
default: break;
4469+
}
4470+
4471+
if (size > -1) {
4472+
if (opt_fromPane) {
4473+
pos = opt_oldSize - pos;
4474+
}
4475+
this._pos = pos / size;
4476+
if (opt_fromPane) {
4477+
this._pos = 1.0 - this._pos;
4478+
}
4479+
}
4480+
}
4481+
4482+
var oldSize = [];
4483+
if (this._orientation === wcDocker.ORIENTATION_HORIZONTAL) {
44594484
var size = width * this._pos;
44604485

44614486
if (minSize) {
@@ -4465,8 +4490,10 @@ wcSplitter.prototype = {
44654490
size = Math.min(maxSize.x, size);
44664491
}
44674492

4468-
// Bar is top to bottom
4493+
oldSize.push(this.$pane[0].width());
4494+
oldSize.push(this.$pane[1].width());
44694495

4496+
// Bar is top to bottom
44704497
this.$bar.css('left', size+2);
44714498
this.$bar.css('top', '0px');
44724499
this.$bar.css('height', height-2);
@@ -4486,8 +4513,10 @@ wcSplitter.prototype = {
44864513
size = Math.min(maxSize.y, size);
44874514
}
44884515

4489-
// Bar is left to right
4516+
oldSize.push(this.$pane[0].height());
4517+
oldSize.push(this.$pane[1].height());
44904518

4519+
// Bar is left to right
44914520
this.$bar.css('top', size+2);
44924521
this.$bar.css('left', '0px');
44934522
this.$bar.css('width', width-2);
@@ -4499,11 +4528,12 @@ wcSplitter.prototype = {
44994528
this.$pane[1].css('height', height - size - 6);
45004529
}
45014530

4502-
if (this._pane[0]) {
4503-
this._pane[0].__update();
4504-
}
4505-
if (this._pane[1]) {
4506-
this._pane[1].__update();
4531+
if (opt_fromOrientation !== undefined) {
4532+
this._pane[0] && this._pane[0].__update(this._orientation, 0, oldSize[0]);
4533+
this._pane[1] && this._pane[1].__update(this._orientation, 1, oldSize[1]);
4534+
} else {
4535+
this._pane[0] && this._pane[0].__update();
4536+
this._pane[1] && this._pane[1].__update();
45074537
}
45084538
},
45094539

@@ -4549,13 +4579,10 @@ wcSplitter.prototype = {
45494579
mouse.x -= offset.left;
45504580
mouse.y -= offset.top;
45514581

4552-
var minSize = this.__minPos();
4553-
var maxSize = this.__maxPos();
4554-
45554582
if (this._orientation) {
4556-
this.pos((mouse.x-3) / width);
4583+
this.pos((mouse.x-3) / width, 2);
45574584
} else {
4558-
this.pos((mouse.y-3) / height);
4585+
this.pos((mouse.y-3) / height, 2);
45594586
}
45604587
},
45614588

‎Build/wcDocker.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Code/splitter.js‎

Lines changed: 45 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -140,12 +140,12 @@ wcSplitter.prototype = {
140140
// value If supplied, assigns a new splitter percentage (0-1).
141141
// Returns:
142142
// number The current position.
143-
pos: function(value) {
143+
pos: function(value, opt_update) {
144144
if (typeof value === 'undefined') {
145145
return this._pos;
146146
}
147147
this._pos = value;
148-
this.__update();
148+
this.__update(opt_update);
149149

150150
if (this._parent instanceof wcPanel) {
151151
this._parent.__trigger(wcDocker.EVENT_UPDATED);
@@ -182,7 +182,7 @@ wcSplitter.prototype = {
182182
}
183183
}
184184
}
185-
this.__update();
185+
// this.__update();
186186
return false;
187187
},
188188

@@ -268,7 +268,8 @@ wcSplitter.prototype = {
268268
},
269269

270270
// Updates the size of the splitter.
271-
__update: function() {
271+
__update: function(opt_fromOrientation, opt_fromPane, opt_oldSize) {
272+
272273
var width = this.$container.width();
273274
var height = this.$container.height();
274275

@@ -328,7 +329,32 @@ wcSplitter.prototype = {
328329
}
329330
}
330331

331-
if (this._orientation) {
332+
if (opt_fromOrientation === this._orientation) {
333+
var pos = opt_oldSize * this._pos;
334+
var size = -1;
335+
switch (opt_fromOrientation) {
336+
case wcDocker.ORIENTATION_HORIZONTAL:
337+
size = width;
338+
break;
339+
case wcDocker.ORIENTATION_VERTICAL:
340+
size = height;
341+
break;
342+
default: break;
343+
}
344+
345+
if (size > -1) {
346+
if (opt_fromPane) {
347+
pos = opt_oldSize - pos;
348+
}
349+
this._pos = pos / size;
350+
if (opt_fromPane) {
351+
this._pos = 1.0 - this._pos;
352+
}
353+
}
354+
}
355+
356+
var oldSize = [];
357+
if (this._orientation === wcDocker.ORIENTATION_HORIZONTAL) {
332358
var size = width * this._pos;
333359

334360
if (minSize) {
@@ -338,8 +364,10 @@ wcSplitter.prototype = {
338364
size = Math.min(maxSize.x, size);
339365
}
340366

341-
// Bar is top to bottom
367+
oldSize.push(this.$pane[0].width());
368+
oldSize.push(this.$pane[1].width());
342369

370+
// Bar is top to bottom
343371
this.$bar.css('left', size+2);
344372
this.$bar.css('top', '0px');
345373
this.$bar.css('height', height-2);
@@ -359,8 +387,10 @@ wcSplitter.prototype = {
359387
size = Math.min(maxSize.y, size);
360388
}
361389

362-
// Bar is left to right
390+
oldSize.push(this.$pane[0].height());
391+
oldSize.push(this.$pane[1].height());
363392

393+
// Bar is left to right
364394
this.$bar.css('top', size+2);
365395
this.$bar.css('left', '0px');
366396
this.$bar.css('width', width-2);
@@ -372,11 +402,12 @@ wcSplitter.prototype = {
372402
this.$pane[1].css('height', height - size - 6);
373403
}
374404

375-
if (this._pane[0]) {
376-
this._pane[0].__update();
377-
}
378-
if (this._pane[1]) {
379-
this._pane[1].__update();
405+
if (opt_fromOrientation !== undefined) {
406+
this._pane[0] && this._pane[0].__update(this._orientation, 0, oldSize[0]);
407+
this._pane[1] && this._pane[1].__update(this._orientation, 1, oldSize[1]);
408+
} else {
409+
this._pane[0] && this._pane[0].__update();
410+
this._pane[1] && this._pane[1].__update();
380411
}
381412
},
382413

@@ -422,13 +453,10 @@ wcSplitter.prototype = {
422453
mouse.x -= offset.left;
423454
mouse.y -= offset.top;
424455

425-
var minSize = this.__minPos();
426-
var maxSize = this.__maxPos();
427-
428456
if (this._orientation) {
429-
this.pos((mouse.x-3) / width);
457+
this.pos((mouse.x-3) / width, 2);
430458
} else {
431-
this.pos((mouse.y-3) / height);
459+
this.pos((mouse.y-3) / height, 2);
432460
}
433461
},
434462

0 commit comments

Comments
 (0)