mirror of
https://github.com/embarklabs/neo-blessed.git
synced 2025-01-10 19:16:20 +00:00
add dockBorders option. see #118.
This commit is contained in:
Christopher Jeffrey
parent
bcd65ad420
commit
5aeeed7683
21
README.md
21
README.md
@ -261,6 +261,24 @@ The screen on which every other node renders.
|
||||
- __ignoreLocked__ - Array of keys in their full format (e.g. `C-c`) to ignore
|
||||
when keys are locked. Useful for creating a key that will _always_ exit no
|
||||
matter whether the keys are locked.
|
||||
- __dockBorders__ - automatically "dock" borders with other elements instead of
|
||||
overlapping, depending on position (__experimental__). for example:
|
||||
|
||||
These border-overlapped elements:
|
||||
|
||||
```
|
||||
┌─────────┌─────────┐
|
||||
│ box1 │ box2 │
|
||||
└─────────└─────────┘
|
||||
```
|
||||
|
||||
Become:
|
||||
|
||||
```
|
||||
┌─────────┬─────────┐
|
||||
│ box1 │ box2 │
|
||||
└─────────┴─────────┘
|
||||
```
|
||||
|
||||
##### Properties:
|
||||
|
||||
@ -405,6 +423,9 @@ The base element.
|
||||
- __scrollable__ - whether the element is scrollable or not.
|
||||
- __ch__ - background character (default is whitespace ` `).
|
||||
- __draggable__ - allow the element to be dragged with the mouse.
|
||||
- __dockBorders__ - automatically "dock" borders with other elements instead of
|
||||
overlapping, depending on position (__experimental__). see Screen
|
||||
documentation of `dockBorders` option.
|
||||
|
||||
##### Properties:
|
||||
|
||||
|
||||
165
lib/widget.js
165
lib/widget.js
@ -284,6 +284,7 @@ function Screen(options) {
|
||||
|
||||
this.autoPadding = options.autoPadding !== false;
|
||||
this.tabc = Array((options.tabSize || 4) + 1).join(' ');
|
||||
this.dockBorders = options.dockBorders;
|
||||
|
||||
this.ignoreLocked = options.ignoreLocked || [];
|
||||
|
||||
@ -2031,6 +2032,8 @@ function Element(options) {
|
||||
|
||||
this.noOverflow = options.noOverflow;
|
||||
|
||||
this.dockBorders = options.dockBorders;
|
||||
|
||||
this.style = options.style;
|
||||
|
||||
if (!this.style) {
|
||||
@ -3867,9 +3870,63 @@ Element.prototype.render = function() {
|
||||
if (coords.noleft && x === xi) continue;
|
||||
if (coords.noright && x === xl - 1) continue;
|
||||
if (this.border.type === 'line') {
|
||||
if (x === xi) ch = '┌';
|
||||
else if (x === xl - 1) ch = '┐';
|
||||
else ch = '─';
|
||||
if (x === xi) {
|
||||
ch = '┌';
|
||||
if (this.screen.dockBorders || this.dockBorders) {
|
||||
if (lines[y][x][1] === '┐') {
|
||||
ch = '\u252c'; // '┬'
|
||||
} else if (lines[y][x][1] === '┴') {
|
||||
ch = '\u253c'; // '┼'
|
||||
} else if (lines[y][x][1] === '└') {
|
||||
ch = '\u251c'; // '├'
|
||||
} else if (lines[y][x][1] === '┘') {
|
||||
ch = '\u253c'; // '┼'
|
||||
} else if (lines[y][x][1] === '┤') {
|
||||
ch = '\u253c'; // '┼'
|
||||
} else if (lines[y][x][1] === '┼') {
|
||||
ch = '\u253c'; // '┼'
|
||||
}
|
||||
}
|
||||
} else if (x === xl - 1) {
|
||||
ch = '┐';
|
||||
if (this.screen.dockBorders || this.dockBorders) {
|
||||
if (lines[y][x][1] === '┌') {
|
||||
ch = '\u252c'; // '┬'
|
||||
} else if (lines[y][x][1] === '┴') {
|
||||
ch = '\u253c'; // '┼'
|
||||
} else if (lines[y][x][1] === '┘') {
|
||||
ch = '\u2524'; // '┤'
|
||||
} else if (lines[y][x][1] === '└') {
|
||||
ch = '\u253c'; // '┼'
|
||||
} else if (lines[y][x][1] === '├') {
|
||||
ch = '\u253c'; // '┼'
|
||||
} else if (lines[y][x][1] === '┼') {
|
||||
ch = '\u253c'; // '┼'
|
||||
}
|
||||
}
|
||||
} else {
|
||||
ch = '─';
|
||||
if (this.screen.dockBorders || this.dockBorders) {
|
||||
if (lines[y][x][1] === '|') {
|
||||
ch = '\u253c'; // '┼'
|
||||
} else if (lines[y][x][1] === '┼') {
|
||||
ch = '\u253c'; // '┼'
|
||||
}
|
||||
// else if (lines[y][x][1] === '┌') {
|
||||
// ch = '\u252c'; // '┬'
|
||||
// } else if (lines[y][x][1] === '└') {
|
||||
// ch = '\u2534'; // '┴'
|
||||
// else if (lines[y][x][1] === '┐') {
|
||||
// ch = '\u252c'; // '┬'
|
||||
// } else if (lines[y][x][1] === '┘') {
|
||||
// ch = '\u2534'; // '┴'
|
||||
// } else if (lines[y][x][1] === '┬') {
|
||||
// ch = '\u252c'; // '┬'
|
||||
// } else if (lines[y][x][1] === '┴') {
|
||||
// ch = '\u2534'; // '┴'
|
||||
// }
|
||||
}
|
||||
}
|
||||
} else if (this.border.type === 'bg') {
|
||||
ch = this.border.ch;
|
||||
}
|
||||
@ -3886,6 +3943,13 @@ Element.prototype.render = function() {
|
||||
if (!lines[y]) break;
|
||||
if (this.border.type === 'line') {
|
||||
ch = '│';
|
||||
if (this.screen.dockBorders || this.dockBorders) {
|
||||
if (lines[y][xi][1] === '─') {
|
||||
ch = '\u253c'; // '┼'
|
||||
} else if (lines[y][xi][1] === '┼') {
|
||||
ch = '\u253c'; // '┼'
|
||||
}
|
||||
}
|
||||
} else if (this.border.type === 'bg') {
|
||||
ch = this.border.ch;
|
||||
}
|
||||
@ -3897,6 +3961,31 @@ Element.prototype.render = function() {
|
||||
lines[y][xi][1] = ch;
|
||||
lines[y].dirty = true;
|
||||
}
|
||||
if (this.border.type === 'line') {
|
||||
ch = '│';
|
||||
if (this.screen.dockBorders || this.dockBorders) {
|
||||
if (lines[y][xl - 1][1] === '─') {
|
||||
ch = '\u253c'; // '┼'
|
||||
} else if (lines[y][xl - 1][1] === '┼') {
|
||||
ch = '\u253c'; // '┼'
|
||||
}
|
||||
// else if (lines[y][x][1] === '┌') {
|
||||
// ch = '\u251c'; // '├'
|
||||
// } else if (lines[y][x][1] === '┐') {
|
||||
// ch = '\u2524'; // '┤'
|
||||
// } else if (lines[y][x][1] === '└') {
|
||||
// ch = '\u251c'; // '├'
|
||||
// } else if (lines[y][x][1] === '┘') {
|
||||
// ch = '\u2524'; // '┤'
|
||||
// } else if (lines[y][x][1] === '┬') {
|
||||
// ch = '\u253c'; // '┼'
|
||||
// } else if (lines[y][x][1] === '┴') {
|
||||
// ch = '\u253c'; // '┼'
|
||||
// }
|
||||
}
|
||||
} else if (this.border.type === 'bg') {
|
||||
ch = this.border.ch;
|
||||
}
|
||||
cell = lines[y][xl - 1];
|
||||
if (!cell) break;
|
||||
if (!coords.noright)
|
||||
@ -3913,9 +4002,65 @@ Element.prototype.render = function() {
|
||||
if (coords.noleft && x === xi) continue;
|
||||
if (coords.noright && x === xl - 1) continue;
|
||||
if (this.border.type === 'line') {
|
||||
if (x === xi) ch = '└';
|
||||
else if (x === xl - 1) ch = '┘';
|
||||
else ch = '─';
|
||||
if (x === xi) {
|
||||
ch = '└';
|
||||
if (this.screen.dockBorders || this.dockBorders) {
|
||||
if (lines[y][x][1] === '┘') {
|
||||
ch = '\u2534'; // '┴'
|
||||
} else if (lines[y][x][1] === '┬') {
|
||||
ch = '\u253c'; // '┼'
|
||||
} else if (lines[y][x][1] === '┌') {
|
||||
ch = '\u251c'; // '├'
|
||||
// XXX Not necessary?
|
||||
//} else if (lines[y][x][1] === '┘') {
|
||||
// ch = '\u253c'; // '┼'
|
||||
} else if (lines[y][x][1] === '┤') {
|
||||
ch = '\u253c'; // '┼'
|
||||
} else if (lines[y][x][1] === '┼') {
|
||||
ch = '\u253c'; // '┼'
|
||||
}
|
||||
}
|
||||
} else if (x === xl - 1) {
|
||||
ch = '┘';
|
||||
if (this.screen.dockBorders || this.dockBorders) {
|
||||
if (lines[y][x][1] === '└') {
|
||||
ch = '\u2534'; // '┴'
|
||||
} else if (lines[y][x][1] === '┬') {
|
||||
ch = '\u253c'; // '┼'
|
||||
} else if (lines[y][x][1] === '┐') {
|
||||
ch = '\u2524'; // '┤'
|
||||
// XXX Not necessary?
|
||||
//} else if (lines[y][x][1] === '└') {
|
||||
// ch = '\u253c'; // '┼'
|
||||
} else if (lines[y][x][1] === '├') {
|
||||
ch = '\u253c'; // '┼'
|
||||
} else if (lines[y][x][1] === '┼') {
|
||||
ch = '\u253c'; // '┼'
|
||||
}
|
||||
}
|
||||
} else {
|
||||
ch = '─';
|
||||
if (this.screen.options.dockBorders) {
|
||||
if (lines[y][x][1] === '|') {
|
||||
ch = '\u253c'; // '┼'
|
||||
} else if (lines[y][x][1] === '┼') {
|
||||
ch = '\u253c'; // '┼'
|
||||
}
|
||||
// else if (lines[y][x][1] === '┌') {
|
||||
// ch = '\u252c'; // '┬'
|
||||
// } else if (lines[y][x][1] === '└') {
|
||||
// ch = '\u2534'; // '┴'
|
||||
// else if (lines[y][x][1] === '┐') {
|
||||
// ch = '\u252c'; // '┬'
|
||||
// } else if (lines[y][x][1] === '┘') {
|
||||
// ch = '\u2534'; // '┴'
|
||||
// } else if (lines[y][x][1] === '┬') {
|
||||
// ch = '\u252c'; // '┬'
|
||||
// } else if (lines[y][x][1] === '┴') {
|
||||
// ch = '\u2534'; // '┴'
|
||||
// }
|
||||
}
|
||||
}
|
||||
} else if (this.border.type === 'bg') {
|
||||
ch = this.border.ch;
|
||||
}
|
||||
@ -7158,11 +7303,11 @@ Table.prototype.render = function() {
|
||||
if (ry === 0) {
|
||||
// top
|
||||
lines[yi + ry][xi + 0][0] = battr;
|
||||
lines[yi + ry][xi + 0][1] = '\u250c'; // '┌'
|
||||
// lines[yi + ry][xi + 0][1] = '\u250c'; // '┌'
|
||||
} else if (ry / 2 === self.rows.length) {
|
||||
// bottom
|
||||
lines[yi + ry][xi + 0][0] = battr;
|
||||
lines[yi + ry][xi + 0][1] = '\u2514'; // '└'
|
||||
// lines[yi + ry][xi + 0][1] = '\u2514'; // '└'
|
||||
} else {
|
||||
// middle
|
||||
lines[yi + ry][xi + 0][0] = battr;
|
||||
@ -7174,11 +7319,11 @@ Table.prototype.render = function() {
|
||||
if (ry === 0) {
|
||||
// top
|
||||
lines[yi + ry][xi + ++rx][0] = battr;
|
||||
lines[yi + ry][xi + rx][1] = '\u2510'; // '┐'
|
||||
// lines[yi + ry][xi + rx][1] = '\u2510'; // '┐'
|
||||
} else if (ry / 2 === self.rows.length) {
|
||||
// bottom
|
||||
lines[yi + ry][xi + ++rx][0] = battr;
|
||||
lines[yi + ry][xi + rx][1] = '\u2518'; // '┘'
|
||||
// lines[yi + ry][xi + rx][1] = '\u2518'; // '┘'
|
||||
} else {
|
||||
// middle
|
||||
lines[yi + ry][xi + ++rx][0] = battr;
|
||||
|
||||
54
test/widget-dock.js
Normal file
54
test/widget-dock.js
Normal file
@ -0,0 +1,54 @@
|
||||
var blessed = require('../')
|
||||
, screen;
|
||||
|
||||
screen = blessed.screen({
|
||||
dump: __dirname + '/logs/dock.log',
|
||||
smartCSR: true,
|
||||
dockBorders: true
|
||||
});
|
||||
|
||||
blessed.box({
|
||||
parent: screen,
|
||||
left: 0,
|
||||
top: 0,
|
||||
width: 10,
|
||||
height: 5,
|
||||
border: 'line',
|
||||
content: 'Foo'
|
||||
});
|
||||
|
||||
blessed.box({
|
||||
parent: screen,
|
||||
left: 9,
|
||||
top: 0,
|
||||
width: 10,
|
||||
height: 5,
|
||||
content: 'Bar',
|
||||
border: 'line'
|
||||
});
|
||||
|
||||
blessed.box({
|
||||
parent: screen,
|
||||
left: 0,
|
||||
top: 4,
|
||||
width: 10,
|
||||
height: 5,
|
||||
border: 'line',
|
||||
content: 'Foo'
|
||||
});
|
||||
|
||||
blessed.box({
|
||||
parent: screen,
|
||||
left: 9,
|
||||
top: 4,
|
||||
width: 10,
|
||||
height: 5,
|
||||
border: 'line',
|
||||
content: 'Bar'
|
||||
});
|
||||
|
||||
screen.key('q', function() {
|
||||
return process.exit(0);
|
||||
});
|
||||
|
||||
screen.render();
|
||||
Loading…
x
Reference in New Issue
Block a user