waveterm/xterm.js
0
0
Fork 0
mirror of https://github.com/wavetermdev/xterm.js.git synced 2026-08-05 13:43:48 -07:00
Code Issues Packages Projects Releases Wiki Activity

better button

Browse Source
This commit is contained in:
meganrogge
2022-01-29 22:34:16 -06:00
parent ebdd07b8ae
commit 00ce85166e
3 changed files with 22 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demo/style.css
+6
View File
@@ -76,6 +76,12 @@ pre {
background-color: #ddd;
}
.decoration:hover,
.decoration:focus {
box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
transform: translateY(-0.25em);
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
src/browser/renderer/BaseRenderLayer.ts
+2
View File
@@ -150,6 +150,8 @@ export abstract class BaseRenderLayer implements IRenderLayer {
* @param height The number of rows to fill.
*/
protected _fillCells(x: number, y: number, width: number, height: number): void {
console.log(x*this._scaledCellWidth);
console.log(y*this._scaledCellHeight);
this._ctx.fillRect(
x * this._scaledCellWidth,
y * this._scaledCellHeight,
src/browser/renderer/DecorationRenderLayer.ts
+14 -18
View File
@@ -47,31 +47,18 @@ export class DecorationRenderLayer extends BaseRenderLayer {
public override resize(dim: IRenderDimensions): void {
super.resize(dim);
this._clearCells(this._bufferService.cols - DefaultButton.MARGIN_RIGHT, 1, 2, 1);
this._clearCells(this._bufferService.cols - DefaultButton.MARGIN_RIGHT, 1, 1, 1);
this.registerDecoration({ type: 'IBufferDecorationOptions', startMarker: new Marker(1), shape: 'button' });
this._onRequestRedraw.fire({ start: this._bufferService.buffer.y, end: this._bufferService.buffer.y });
}
public registerDecoration(decorationOptions: IBufferDecorationOptions | IGutterDecorationOptions): IDecoration {
if (decorationOptions.type === 'IBufferDecorationOptions') {
const bufferDecoration = new BufferDecoration(decorationOptions.startMarker.line, this._ctx.canvas);
const color = decorationOptions.color || DefaultButton.COLOR;
const bufferDecoration = new BufferDecoration(decorationOptions.startMarker.line, color, this._ctx.canvas);
if ('shape' in decorationOptions && decorationOptions.shape === 'button') {
this._ctx.save();
const color = decorationOptions.color || DefaultButton.COLOR;
const x = 'position' in decorationOptions && decorationOptions.position ? decorationOptions.position : this._bufferService.cols - ((this._bufferService.cols/DefaultButton.COLS) * DefaultButton.MARGIN_RIGHT);
if (x && color) {
this._ctx.fillStyle = color;
this._fillCells(x, decorationOptions.startMarker.line, DefaultButton.WIDTH, DefaultButton.HEIGHT);
this._ctx.fillStyle = color;
this._fillCharTrueColor(this._cell, x, decorationOptions.startMarker.line);
addDisposableDomListener(this._ctx.canvas, 'click', e => {
e.stopPropagation();
const { x, y } = getRelativeClickPosition(this._ctx.canvas, e);
if (this._ctx.isPointInPath(x, y)) {
console.log('clicked button');
}
});
}
this._ctx.restore();
return bufferDecoration;
}
@@ -106,13 +93,22 @@ export class BufferDecoration extends Disposable implements IDecoration {
constructor(
public line: number,
color: string,
container: HTMLElement
) {
super();
this._element = document.createElement('menu');
this._element.textContent = 'hello';
this._element.classList.add('decoration');
this._element.id = 'decoration' + this._id;
container.appendChild(this._element);
this._element.style.background = color;
this._element.style.width = '1px';
this._element.style.height = '32px';
this._element.style.borderRadius = '64px';
this._element.style.border = `4px solid white`;
this._element.style.zIndex = '6';
this._element.style.position = 'absolute';
addDisposableDomListener(this._element, 'click', e => console.log('circle'));
container.parentElement!.append(this._element);
}
public dispose(): void {