feat(editor/runtime): Replace bare editor with Monaco-based editor and add runtime + workspace/filetree integration
This commit is contained in:
@@ -0,0 +1,530 @@
|
||||
import {
|
||||
DeesElement,
|
||||
property,
|
||||
html,
|
||||
customElement,
|
||||
type TemplateResult,
|
||||
css,
|
||||
cssManager,
|
||||
state,
|
||||
} from '@design.estate/dees-element';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import { themeDefaultStyles } from '../../00theme.js';
|
||||
import type { IExecutionEnvironment, IFileEntry } from '../../00group-runtime/index.js';
|
||||
import '../../dees-icon/dees-icon.js';
|
||||
import '../../dees-contextmenu/dees-contextmenu.js';
|
||||
import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-editor-filetree': DeesEditorFiletree;
|
||||
}
|
||||
}
|
||||
|
||||
interface ITreeNode extends IFileEntry {
|
||||
children?: ITreeNode[];
|
||||
expanded?: boolean;
|
||||
level: number;
|
||||
}
|
||||
|
||||
@customElement('dees-editor-filetree')
|
||||
export class DeesEditorFiletree extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<div style="width: 300px; height: 400px; position: relative;">
|
||||
<dees-editor-filetree></dees-editor-filetree>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// INSTANCE
|
||||
@property({ type: Object })
|
||||
accessor executionEnvironment: IExecutionEnvironment | null = null;
|
||||
|
||||
@property({ type: String })
|
||||
accessor rootPath: string = '/';
|
||||
|
||||
@property({ type: String })
|
||||
accessor selectedPath: string = '';
|
||||
|
||||
@state()
|
||||
accessor treeData: ITreeNode[] = [];
|
||||
|
||||
@state()
|
||||
accessor isLoading: boolean = false;
|
||||
|
||||
@state()
|
||||
accessor errorMessage: string = '';
|
||||
|
||||
private expandedPaths: Set<string> = new Set();
|
||||
|
||||
public static styles = [
|
||||
themeDefaultStyles,
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 98%)', 'hsl(0 0% 9%)')};
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.tree-container {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.tree-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 8px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border-radius: 4px;
|
||||
margin: 1px 4px;
|
||||
transition: background 0.1s ease;
|
||||
}
|
||||
|
||||
.tree-item:hover {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 14%)')};
|
||||
}
|
||||
|
||||
.tree-item.selected {
|
||||
background: ${cssManager.bdTheme('hsl(210 100% 95%)', 'hsl(210 50% 20%)')};
|
||||
color: ${cssManager.bdTheme('hsl(210 100% 40%)', 'hsl(210 100% 70%)')};
|
||||
}
|
||||
|
||||
.tree-item.selected:hover {
|
||||
background: ${cssManager.bdTheme('hsl(210 100% 92%)', 'hsl(210 50% 25%)')};
|
||||
}
|
||||
|
||||
.indent {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.expand-icon.expanded {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.expand-icon.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 6px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.file-icon dees-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.file-icon.folder {
|
||||
color: ${cssManager.bdTheme('hsl(45 80% 45%)', 'hsl(45 70% 55%)')};
|
||||
}
|
||||
|
||||
.file-icon.file {
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
|
||||
}
|
||||
|
||||
.file-icon.typescript {
|
||||
color: hsl(211 60% 48%);
|
||||
}
|
||||
|
||||
.file-icon.javascript {
|
||||
color: hsl(53 93% 54%);
|
||||
}
|
||||
|
||||
.file-icon.json {
|
||||
color: hsl(45 80% 50%);
|
||||
}
|
||||
|
||||
.file-icon.html {
|
||||
color: hsl(14 77% 52%);
|
||||
}
|
||||
|
||||
.file-icon.css {
|
||||
color: hsl(228 77% 59%);
|
||||
}
|
||||
|
||||
.file-icon.markdown {
|
||||
color: hsl(0 0% 50%);
|
||||
}
|
||||
|
||||
.file-name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 85%)')};
|
||||
}
|
||||
|
||||
.loading {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
|
||||
}
|
||||
|
||||
.error {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
color: hsl(0 70% 50%);
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
|
||||
font-style: italic;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
if (!this.executionEnvironment) {
|
||||
return html`
|
||||
<div class="empty">
|
||||
No execution environment provided.
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
if (this.isLoading) {
|
||||
return html`
|
||||
<div class="loading">
|
||||
Loading files...
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
if (this.errorMessage) {
|
||||
return html`
|
||||
<div class="error">
|
||||
${this.errorMessage}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
if (this.treeData.length === 0) {
|
||||
return html`
|
||||
<div class="empty">
|
||||
No files found.
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="tree-container">
|
||||
${this.renderTree(this.treeData)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderTree(nodes: ITreeNode[]): TemplateResult[] {
|
||||
return nodes.map(node => this.renderNode(node));
|
||||
}
|
||||
|
||||
private renderNode(node: ITreeNode): TemplateResult {
|
||||
const isDirectory = node.type === 'directory';
|
||||
const isExpanded = this.expandedPaths.has(node.path);
|
||||
const isSelected = node.path === this.selectedPath;
|
||||
const iconClass = this.getFileIconClass(node);
|
||||
|
||||
return html`
|
||||
<div
|
||||
class="tree-item ${isSelected ? 'selected' : ''}"
|
||||
style="padding-left: ${8 + node.level * 16}px"
|
||||
@click=${(e: MouseEvent) => this.handleItemClick(e, node)}
|
||||
@contextmenu=${(e: MouseEvent) => this.handleContextMenu(e, node)}
|
||||
>
|
||||
<span class="expand-icon ${isExpanded ? 'expanded' : ''} ${!isDirectory ? 'hidden' : ''}">
|
||||
<dees-icon .icon=${'lucide:chevronRight'} iconSize="12"></dees-icon>
|
||||
</span>
|
||||
<span class="file-icon ${iconClass}">
|
||||
<dees-icon .icon=${this.getFileIcon(node)} iconSize="16"></dees-icon>
|
||||
</span>
|
||||
<span class="file-name">${node.name}</span>
|
||||
</div>
|
||||
${isDirectory && isExpanded && node.children
|
||||
? this.renderTree(node.children)
|
||||
: ''}
|
||||
`;
|
||||
}
|
||||
|
||||
private getFileIcon(node: ITreeNode): string {
|
||||
if (node.type === 'directory') {
|
||||
return this.expandedPaths.has(node.path) ? 'lucide:folderOpen' : 'lucide:folder';
|
||||
}
|
||||
|
||||
const ext = node.name.split('.').pop()?.toLowerCase();
|
||||
switch (ext) {
|
||||
case 'ts':
|
||||
case 'tsx':
|
||||
return 'lucide:fileCode';
|
||||
case 'js':
|
||||
case 'jsx':
|
||||
return 'lucide:fileCode';
|
||||
case 'json':
|
||||
return 'lucide:fileJson';
|
||||
case 'html':
|
||||
return 'lucide:fileCode';
|
||||
case 'css':
|
||||
case 'scss':
|
||||
case 'less':
|
||||
return 'lucide:fileCode';
|
||||
case 'md':
|
||||
return 'lucide:fileText';
|
||||
case 'png':
|
||||
case 'jpg':
|
||||
case 'jpeg':
|
||||
case 'gif':
|
||||
case 'svg':
|
||||
return 'lucide:image';
|
||||
default:
|
||||
return 'lucide:file';
|
||||
}
|
||||
}
|
||||
|
||||
private getFileIconClass(node: ITreeNode): string {
|
||||
if (node.type === 'directory') return 'folder';
|
||||
|
||||
const ext = node.name.split('.').pop()?.toLowerCase();
|
||||
switch (ext) {
|
||||
case 'ts':
|
||||
case 'tsx':
|
||||
return 'typescript';
|
||||
case 'js':
|
||||
case 'jsx':
|
||||
return 'javascript';
|
||||
case 'json':
|
||||
return 'json';
|
||||
case 'html':
|
||||
return 'html';
|
||||
case 'css':
|
||||
case 'scss':
|
||||
case 'less':
|
||||
return 'css';
|
||||
case 'md':
|
||||
return 'markdown';
|
||||
default:
|
||||
return 'file';
|
||||
}
|
||||
}
|
||||
|
||||
private async handleItemClick(e: MouseEvent, node: ITreeNode) {
|
||||
e.stopPropagation();
|
||||
|
||||
if (node.type === 'directory') {
|
||||
await this.toggleDirectory(node);
|
||||
} else {
|
||||
this.selectedPath = node.path;
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('file-select', {
|
||||
detail: { path: node.path, name: node.name },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
private async toggleDirectory(node: ITreeNode) {
|
||||
if (this.expandedPaths.has(node.path)) {
|
||||
this.expandedPaths.delete(node.path);
|
||||
} else {
|
||||
this.expandedPaths.add(node.path);
|
||||
// Load children if not already loaded
|
||||
if (!node.children || node.children.length === 0) {
|
||||
await this.loadDirectoryContents(node);
|
||||
}
|
||||
}
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
private async loadDirectoryContents(node: ITreeNode) {
|
||||
if (!this.executionEnvironment) return;
|
||||
|
||||
try {
|
||||
const entries = await this.executionEnvironment.readDir(node.path);
|
||||
node.children = this.sortEntries(entries).map(entry => ({
|
||||
...entry,
|
||||
level: node.level + 1,
|
||||
expanded: false,
|
||||
children: entry.type === 'directory' ? [] : undefined,
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error(`Failed to load directory ${node.path}:`, error);
|
||||
}
|
||||
}
|
||||
|
||||
private async handleContextMenu(e: MouseEvent, node: ITreeNode) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const menuItems = [];
|
||||
|
||||
if (node.type === 'directory') {
|
||||
menuItems.push(
|
||||
{
|
||||
name: 'New File',
|
||||
iconName: 'lucide:filePlus',
|
||||
action: async () => this.createNewFile(node.path),
|
||||
},
|
||||
{
|
||||
name: 'New Folder',
|
||||
iconName: 'lucide:folderPlus',
|
||||
action: async () => this.createNewFolder(node.path),
|
||||
},
|
||||
{ name: 'divider' }
|
||||
);
|
||||
}
|
||||
|
||||
menuItems.push({
|
||||
name: 'Delete',
|
||||
iconName: 'lucide:trash2',
|
||||
action: async () => this.deleteItem(node),
|
||||
});
|
||||
|
||||
await DeesContextmenu.openContextMenuWithOptions(e, menuItems);
|
||||
}
|
||||
|
||||
private async createNewFile(parentPath: string) {
|
||||
const fileName = prompt('Enter file name:');
|
||||
if (!fileName || !this.executionEnvironment) return;
|
||||
|
||||
const newPath = parentPath === '/' ? `/${fileName}` : `${parentPath}/${fileName}`;
|
||||
try {
|
||||
await this.executionEnvironment.writeFile(newPath, '');
|
||||
await this.refresh();
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('file-created', {
|
||||
detail: { path: newPath },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Failed to create file:', error);
|
||||
}
|
||||
}
|
||||
|
||||
private async createNewFolder(parentPath: string) {
|
||||
const folderName = prompt('Enter folder name:');
|
||||
if (!folderName || !this.executionEnvironment) return;
|
||||
|
||||
const newPath = parentPath === '/' ? `/${folderName}` : `${parentPath}/${folderName}`;
|
||||
try {
|
||||
await this.executionEnvironment.mkdir(newPath);
|
||||
await this.refresh();
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('folder-created', {
|
||||
detail: { path: newPath },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Failed to create folder:', error);
|
||||
}
|
||||
}
|
||||
|
||||
private async deleteItem(node: ITreeNode) {
|
||||
if (!this.executionEnvironment) return;
|
||||
|
||||
const confirmed = confirm(`Delete ${node.name}?`);
|
||||
if (!confirmed) return;
|
||||
|
||||
try {
|
||||
await this.executionEnvironment.rm(node.path, { recursive: node.type === 'directory' });
|
||||
await this.refresh();
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('item-deleted', {
|
||||
detail: { path: node.path, type: node.type },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Failed to delete item:', error);
|
||||
}
|
||||
}
|
||||
|
||||
public async firstUpdated() {
|
||||
await this.loadTree();
|
||||
}
|
||||
|
||||
public async updated(changedProperties: Map<string, any>) {
|
||||
if (changedProperties.has('executionEnvironment') && this.executionEnvironment) {
|
||||
await this.loadTree();
|
||||
}
|
||||
}
|
||||
|
||||
private async loadTree() {
|
||||
if (!this.executionEnvironment) return;
|
||||
|
||||
this.isLoading = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
try {
|
||||
// Wait for environment to be ready
|
||||
if (!this.executionEnvironment.ready) {
|
||||
await this.executionEnvironment.init();
|
||||
}
|
||||
|
||||
const entries = await this.executionEnvironment.readDir(this.rootPath);
|
||||
this.treeData = this.sortEntries(entries).map(entry => ({
|
||||
...entry,
|
||||
level: 0,
|
||||
expanded: false,
|
||||
children: entry.type === 'directory' ? [] : undefined,
|
||||
}));
|
||||
} catch (error) {
|
||||
this.errorMessage = `Failed to load files: ${error}`;
|
||||
console.error('Failed to load file tree:', error);
|
||||
} finally {
|
||||
this.isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
private sortEntries(entries: IFileEntry[]): IFileEntry[] {
|
||||
return entries.sort((a, b) => {
|
||||
// Directories first
|
||||
if (a.type !== b.type) {
|
||||
return a.type === 'directory' ? -1 : 1;
|
||||
}
|
||||
// Then alphabetically
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
}
|
||||
|
||||
public async refresh() {
|
||||
this.expandedPaths.clear();
|
||||
await this.loadTree();
|
||||
}
|
||||
|
||||
public selectFile(path: string) {
|
||||
this.selectedPath = path;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './dees-editor-filetree.js';
|
||||
Reference in New Issue
Block a user