feat: 添加vscode编辑器
This commit is contained in:
@@ -0,0 +1,61 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.monaco-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.monaco-table > .monaco-split-view2 {
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
.monaco-table > .monaco-list {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.monaco-table-tr {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.monaco-table-th {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.monaco-table-th,
|
||||
.monaco-table-td {
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.monaco-table > .monaco-split-view2 .monaco-sash.vertical::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: calc(var(--sash-size) / 2);
|
||||
width: 0;
|
||||
border-left: 1px solid transparent;
|
||||
}
|
||||
|
||||
.monaco-table > .monaco-split-view2,
|
||||
.monaco-table > .monaco-split-view2 .monaco-sash.vertical::before {
|
||||
transition: border-color 0.2s ease-out;
|
||||
}
|
||||
/*
|
||||
.monaco-table:hover > .monaco-split-view2,
|
||||
.monaco-table:hover > .monaco-split-view2 .monaco-sash.vertical::before {
|
||||
border-color: rgba(204, 204, 204, 0.2);
|
||||
} */
|
||||
@@ -0,0 +1,5 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
export {};
|
||||
@@ -0,0 +1,165 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import { $, append, clearNode, createStyleSheet } from '../../dom.js';
|
||||
import { List } from '../list/listWidget.js';
|
||||
import { SplitView } from '../splitview/splitview.js';
|
||||
import { Emitter, Event } from '../../../common/event.js';
|
||||
import { DisposableStore } from '../../../common/lifecycle.js';
|
||||
import './table.css';
|
||||
class TableListRenderer {
|
||||
constructor(columns, renderers, getColumnSize) {
|
||||
this.columns = columns;
|
||||
this.getColumnSize = getColumnSize;
|
||||
this.templateId = TableListRenderer.TemplateId;
|
||||
this.renderedTemplates = new Set();
|
||||
const rendererMap = new Map(renderers.map(r => [r.templateId, r]));
|
||||
this.renderers = [];
|
||||
for (const column of columns) {
|
||||
const renderer = rendererMap.get(column.templateId);
|
||||
if (!renderer) {
|
||||
throw new Error(`Table cell renderer for template id ${column.templateId} not found.`);
|
||||
}
|
||||
this.renderers.push(renderer);
|
||||
}
|
||||
}
|
||||
renderTemplate(container) {
|
||||
const rowContainer = append(container, $('.monaco-table-tr'));
|
||||
const cellContainers = [];
|
||||
const cellTemplateData = [];
|
||||
for (let i = 0; i < this.columns.length; i++) {
|
||||
const renderer = this.renderers[i];
|
||||
const cellContainer = append(rowContainer, $('.monaco-table-td', { 'data-col-index': i }));
|
||||
cellContainer.style.width = `${this.getColumnSize(i)}px`;
|
||||
cellContainers.push(cellContainer);
|
||||
cellTemplateData.push(renderer.renderTemplate(cellContainer));
|
||||
}
|
||||
const result = { container, cellContainers, cellTemplateData };
|
||||
this.renderedTemplates.add(result);
|
||||
return result;
|
||||
}
|
||||
renderElement(element, index, templateData, height) {
|
||||
for (let i = 0; i < this.columns.length; i++) {
|
||||
const column = this.columns[i];
|
||||
const cell = column.project(element);
|
||||
const renderer = this.renderers[i];
|
||||
renderer.renderElement(cell, index, templateData.cellTemplateData[i], height);
|
||||
}
|
||||
}
|
||||
disposeElement(element, index, templateData, height) {
|
||||
for (let i = 0; i < this.columns.length; i++) {
|
||||
const renderer = this.renderers[i];
|
||||
if (renderer.disposeElement) {
|
||||
const column = this.columns[i];
|
||||
const cell = column.project(element);
|
||||
renderer.disposeElement(cell, index, templateData.cellTemplateData[i], height);
|
||||
}
|
||||
}
|
||||
}
|
||||
disposeTemplate(templateData) {
|
||||
for (let i = 0; i < this.columns.length; i++) {
|
||||
const renderer = this.renderers[i];
|
||||
renderer.disposeTemplate(templateData.cellTemplateData[i]);
|
||||
}
|
||||
clearNode(templateData.container);
|
||||
this.renderedTemplates.delete(templateData);
|
||||
}
|
||||
layoutColumn(index, size) {
|
||||
for (const { cellContainers } of this.renderedTemplates) {
|
||||
cellContainers[index].style.width = `${size}px`;
|
||||
}
|
||||
}
|
||||
}
|
||||
TableListRenderer.TemplateId = 'row';
|
||||
function asListVirtualDelegate(delegate) {
|
||||
return {
|
||||
getHeight(row) { return delegate.getHeight(row); },
|
||||
getTemplateId() { return TableListRenderer.TemplateId; },
|
||||
};
|
||||
}
|
||||
class ColumnHeader {
|
||||
constructor(column, index) {
|
||||
this.column = column;
|
||||
this.index = index;
|
||||
this._onDidLayout = new Emitter();
|
||||
this.onDidLayout = this._onDidLayout.event;
|
||||
this.element = $('.monaco-table-th', { 'data-col-index': index, title: column.tooltip }, column.label);
|
||||
}
|
||||
get minimumSize() { var _a; return (_a = this.column.minimumWidth) !== null && _a !== void 0 ? _a : 120; }
|
||||
get maximumSize() { var _a; return (_a = this.column.maximumWidth) !== null && _a !== void 0 ? _a : Number.POSITIVE_INFINITY; }
|
||||
get onDidChange() { var _a; return (_a = this.column.onDidChangeWidthConstraints) !== null && _a !== void 0 ? _a : Event.None; }
|
||||
layout(size) {
|
||||
this._onDidLayout.fire([this.index, size]);
|
||||
}
|
||||
}
|
||||
export class Table {
|
||||
constructor(user, container, virtualDelegate, columns, renderers, _options) {
|
||||
this.virtualDelegate = virtualDelegate;
|
||||
this.domId = `table_id_${++Table.InstanceCount}`;
|
||||
this.disposables = new DisposableStore();
|
||||
this.cachedWidth = 0;
|
||||
this.cachedHeight = 0;
|
||||
this.domNode = append(container, $(`.monaco-table.${this.domId}`));
|
||||
const headers = columns.map((c, i) => new ColumnHeader(c, i));
|
||||
const descriptor = {
|
||||
size: headers.reduce((a, b) => a + b.column.weight, 0),
|
||||
views: headers.map(view => ({ size: view.column.weight, view }))
|
||||
};
|
||||
this.splitview = this.disposables.add(new SplitView(this.domNode, {
|
||||
orientation: 1 /* Orientation.HORIZONTAL */,
|
||||
scrollbarVisibility: 2 /* ScrollbarVisibility.Hidden */,
|
||||
getSashOrthogonalSize: () => this.cachedHeight,
|
||||
descriptor
|
||||
}));
|
||||
this.splitview.el.style.height = `${virtualDelegate.headerRowHeight}px`;
|
||||
this.splitview.el.style.lineHeight = `${virtualDelegate.headerRowHeight}px`;
|
||||
const renderer = new TableListRenderer(columns, renderers, i => this.splitview.getViewSize(i));
|
||||
this.list = this.disposables.add(new List(user, this.domNode, asListVirtualDelegate(virtualDelegate), [renderer], _options));
|
||||
Event.any(...headers.map(h => h.onDidLayout))(([index, size]) => renderer.layoutColumn(index, size), null, this.disposables);
|
||||
this.splitview.onDidSashReset(index => {
|
||||
const totalWeight = columns.reduce((r, c) => r + c.weight, 0);
|
||||
const size = columns[index].weight / totalWeight * this.cachedWidth;
|
||||
this.splitview.resizeView(index, size);
|
||||
}, null, this.disposables);
|
||||
this.styleElement = createStyleSheet(this.domNode);
|
||||
this.style({});
|
||||
}
|
||||
get onDidChangeFocus() { return this.list.onDidChangeFocus; }
|
||||
get onDidChangeSelection() { return this.list.onDidChangeSelection; }
|
||||
get onMouseDblClick() { return this.list.onMouseDblClick; }
|
||||
get onPointer() { return this.list.onPointer; }
|
||||
get onDidFocus() { return this.list.onDidFocus; }
|
||||
get onDidDispose() { return this.list.onDidDispose; }
|
||||
updateOptions(options) {
|
||||
this.list.updateOptions(options);
|
||||
}
|
||||
splice(start, deleteCount, elements = []) {
|
||||
this.list.splice(start, deleteCount, elements);
|
||||
}
|
||||
getHTMLElement() {
|
||||
return this.domNode;
|
||||
}
|
||||
style(styles) {
|
||||
const content = [];
|
||||
content.push(`.monaco-table.${this.domId} > .monaco-split-view2 .monaco-sash.vertical::before {
|
||||
top: ${this.virtualDelegate.headerRowHeight + 1}px;
|
||||
height: calc(100% - ${this.virtualDelegate.headerRowHeight}px);
|
||||
}`);
|
||||
this.styleElement.textContent = content.join('\n');
|
||||
this.list.style(styles);
|
||||
}
|
||||
getSelectedElements() {
|
||||
return this.list.getSelectedElements();
|
||||
}
|
||||
getSelection() {
|
||||
return this.list.getSelection();
|
||||
}
|
||||
getFocus() {
|
||||
return this.list.getFocus();
|
||||
}
|
||||
dispose() {
|
||||
this.disposables.dispose();
|
||||
}
|
||||
}
|
||||
Table.InstanceCount = 0;
|
||||
Reference in New Issue
Block a user