@vemjs/renderer-vecto 0.1.0

package/src/VemEditorEntity.ts

@@ -0,0 +1,235 @@
+import { UIComponent, Text, RichText } from '@vectojs/ui';
+import type { IRenderer } from '@vectojs/core';
+import type { VemEditorState } from '@vemjs/core';
+import { CommandBar } from './CommandBar';
+
+export class VemEditorEntity extends UIComponent {
+  private editorState: VemEditorState;
+  private gutterText: Text;
+  private bodyText: RichText;
+  private commandBar: CommandBar;
+
+  private charWidth = 8.4;
+  private lineHeight = 20;
+  private scrollY = 0; // scroll offset in lines
+
+  constructor(editorState: VemEditorState) {
+    super();
+    this.editorState = editorState;
+    this.width = 800;
+    this.height = 600;
+    this.clipChildren = true;
+
+    this.gutterText = new Text('', {
+      font: '14px monospace',
+      color: '#64748b', // slate-500
+      lineHeight: this.lineHeight,
+    });
+
+    // Editor body text
+    this.bodyText = new RichText([], {
+      font: '14px monospace',
+      color: '#e2e8f0', // slate-200
+    });
+
+    this.commandBar = new CommandBar(editorState, this.width);
+    this.commandBar.setPosition(0, this.height - 30);
+
+    this.add(this.gutterText);
+    this.add(this.bodyText);
+
+    // Try to measure the exact monospace char width if running in browser
+    if (typeof document !== 'undefined') {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+        ctx.font = '14px monospace';
+        this.charWidth = ctx.measureText('A').width;
+      }
+    }
+
+    this.updateFromState();
+  }
+
+  public updateFromState(): void {
+    const buffer = this.editorState.getBuffer();
+    const cursor = this.editorState.getCursor();
+    const lineCount = buffer.getLineCount();
+
+    // 1. Calculate gutter width dynamically
+    const maxLineDigits = Math.max(2, lineCount.toString().length);
+    const gutterWidth = maxLineDigits * this.charWidth + 15;
+
+    // 2. Set line numbers text
+    const lineNums: string[] = [];
+    for (let i = 1; i <= lineCount; i++) {
+      lineNums.push(i.toString().padStart(maxLineDigits, ' '));
+    }
+    this.gutterText.setText(lineNums.join('\n'));
+    this.gutterText.setPosition(5, 5);
+
+    // 3. Set editor body text
+    const spans = buffer.getLines().map((line, idx) => {
+      const suffix = idx === lineCount - 1 ? '' : '\n';
+      return { text: line + suffix };
+    });
+    this.bodyText.setSpans(spans);
+    this.bodyText.setPosition(gutterWidth + 5, 5);
+
+    // 4. Handle viewport scrolling to keep cursor visible
+    const visibleLines = Math.floor((this.height - 35) / this.lineHeight); // reserve 35px for status bar
+    if (cursor.line >= this.scrollY + visibleLines) {
+      this.scrollY = cursor.line - visibleLines + 1;
+    } else if (cursor.line < this.scrollY) {
+      this.scrollY = cursor.line;
+    }
+
+    // Update children scroll positions
+    const scrollOffsetY = -this.scrollY * this.lineHeight;
+    this.gutterText.setPosition(5, 5 + scrollOffsetY);
+    this.bodyText.setPosition(gutterWidth + 5, 5 + scrollOffsetY);
+
+    // 5. Handle CommandBar visibility
+    if (this.editorState.getMode() === 'COMMAND') {
+      if (!this.children.includes(this.commandBar)) {
+        this.add(this.commandBar);
+      }
+      this.commandBar.clear();
+    } else {
+      if (this.children.includes(this.commandBar)) {
+        this.remove(this.commandBar);
+      }
+    }
+  }
+
+  public render(r: IRenderer): void {
+    // 1. Draw editor background
+    r.beginPath();
+    r.moveTo(0, 0);
+    r.lineTo(this.width, 0);
+    r.lineTo(this.width, this.height);
+    r.lineTo(0, this.height);
+    r.closePath();
+    r.fill('#0f172a'); // slate-900
+
+    const lineCount = this.editorState.getBuffer().getLineCount();
+    const maxLineDigits = Math.max(2, lineCount.toString().length);
+    const gutterWidth = maxLineDigits * this.charWidth + 15;
+
+    // 2. Draw gutter background
+    r.beginPath();
+    r.moveTo(0, 0);
+    r.lineTo(gutterWidth, 0);
+    r.lineTo(gutterWidth, this.height);
+    r.lineTo(0, this.height);
+    r.closePath();
+    r.fill('#1e293b'); // slate-800
+
+    // Apply scrolling transformation for cursor and selections
+    r.save();
+    r.translate(0, -this.scrollY * this.lineHeight);
+
+    // 3. Draw Visual Mode selections
+    const selection = this.editorState.getVisualSelection();
+    if (selection) {
+      const type = selection.type;
+      let s = { ...selection.anchor };
+      let e = { ...selection.active };
+
+      if (s.line > e.line || (s.line === e.line && s.character > e.character)) {
+        const temp = s;
+        s = e;
+        e = temp;
+      }
+
+      const drawSelRect = (lineIdx: number, startChar: number, endChar: number) => {
+        const x = gutterWidth + 5 + startChar * this.charWidth;
+        const y = 5 + lineIdx * this.lineHeight;
+        const w = (endChar - startChar) * this.charWidth;
+        const h = this.lineHeight;
+
+        r.beginPath();
+        r.moveTo(x, y);
+        r.lineTo(x + w, y);
+        r.lineTo(x + w, y + h);
+        r.lineTo(x, y + h);
+        r.closePath();
+        r.fill('rgba(56, 189, 248, 0.3)'); // sky-400 opacity
+      };
+
+      if (type === 'line') {
+        for (let l = s.line; l <= e.line; l++) {
+          const lineText = this.editorState.getBuffer().getLine(l);
+          drawSelRect(l, 0, Math.max(1, lineText.length));
+        }
+      } else if (type === 'char') {
+        if (s.line === e.line) {
+          drawSelRect(s.line, s.character, e.character + 1);
+        } else {
+          const sLineText = this.editorState.getBuffer().getLine(s.line);
+          drawSelRect(s.line, s.character, Math.max(s.character + 1, sLineText.length + 1));
+          for (let l = s.line + 1; l < e.line; l++) {
+            const lText = this.editorState.getBuffer().getLine(l);
+            drawSelRect(l, 0, lText.length + 1);
+          }
+          drawSelRect(e.line, 0, e.character + 1);
+        }
+      } else if (type === 'block') {
+        const minCol = Math.min(selection.anchor.character, selection.active.character);
+        const maxCol = Math.max(selection.anchor.character, selection.active.character);
+        for (let l = s.line; l <= e.line; l++) {
+          drawSelRect(l, minCol, maxCol + 1);
+        }
+      }
+    }
+
+    // 4. Draw Vim cursor
+    const cursor = this.editorState.getCursor();
+    const cursorX = gutterWidth + 5 + cursor.character * this.charWidth;
+    const cursorY = 5 + cursor.line * this.lineHeight;
+    const mode = this.editorState.getMode();
+
+    r.beginPath();
+    if (mode === 'INSERT') {
+      r.moveTo(cursorX, cursorY);
+      r.lineTo(cursorX + 2, cursorY);
+      r.lineTo(cursorX + 2, cursorY + this.lineHeight);
+      r.lineTo(cursorX, cursorY + this.lineHeight);
+      r.closePath();
+      r.fill('#f43f5e'); // rose-500
+    } else {
+      r.moveTo(cursorX, cursorY);
+      r.lineTo(cursorX + this.charWidth, cursorY);
+      r.lineTo(cursorX + this.charWidth, cursorY + this.lineHeight);
+      r.lineTo(cursorX, cursorY + this.lineHeight);
+      r.closePath();
+      r.fill('rgba(56, 189, 248, 0.7)'); // sky-400 opacity
+    }
+
+    r.restore(); // Restore scroll transform
+
+    // 5. Draw status bar at the bottom
+    const statusBarHeight = 30;
+    const statusY = this.height - statusBarHeight;
+    r.beginPath();
+    r.moveTo(0, statusY);
+    r.lineTo(this.width, statusY);
+    r.lineTo(this.width, this.height);
+    r.lineTo(0, this.height);
+    r.closePath();
+    r.fill('#1e293b'); // slate-800
+
+    if (mode !== 'COMMAND') {
+      const modeText = `-- ${mode} --`;
+      const posText = `${cursor.line + 1}:${cursor.character + 1}`;
+      const pendingKeys = this.editorState.getPendingKeys();
+      const pendingText = pendingKeys.length > 0 ? pendingKeys.join('') : '';
+
+      r.fillText(modeText, 10, statusY + 18, 'bold 12px monospace', '#38bdf8');
+      if (pendingText) {
+        r.fillText(pendingText, 120, statusY + 18, '12px monospace', '#e2e8f0');
+      }
+      r.fillText(posText, this.width - 60, statusY + 18, '12px monospace', '#94a3b8');
+    }
+  }
+}

package/src/Workspace.ts

@@ -0,0 +1,65 @@
+import { UIComponent, Tabs } from '@vectojs/ui';
+import type { IRenderer } from '@vectojs/core';
+import { WorkspaceLayout } from './WorkspaceLayout';
+
+export class VemWorkspace extends UIComponent {
+  private tabsComponent: Tabs | null = null;
+  private layouts: WorkspaceLayout[] = [];
+
+  constructor(width: number, height: number, initialText?: string) {
+    super();
+    this.width = width;
+    this.height = height;
+
+    const initialLayout = new WorkspaceLayout(width, height - 30, initialText || '');
+    this.layouts.push(initialLayout);
+
+    this.tabsComponent = new Tabs({
+      width: this.width,
+      height: this.height,
+      tabHeight: 30,
+      tabs: [{ id: 'tab-1', label: 'Tab 1', content: initialLayout }],
+      value: 'tab-1',
+    });
+
+    this.add(this.tabsComponent);
+  }
+
+  public addTab(initialText?: string): void {
+    const nextIndex = this.layouts.length + 1;
+    const newLayout = new WorkspaceLayout(this.width, this.height - 30, initialText || '');
+    this.layouts.push(newLayout);
+
+    const updatedTabs = this.layouts.map((layout, idx) => ({
+      id: `tab-${idx + 1}`,
+      label: `Tab ${idx + 1}`,
+      content: layout,
+    }));
+
+    this.tabsComponent!.tabs = updatedTabs;
+    this.tabsComponent!.value = `tab-${nextIndex}`;
+  }
+
+  public update(dt: number, time: number): void {
+    super.update(dt, time);
+    if (this.tabsComponent) {
+      this.tabsComponent.width = this.width;
+      this.tabsComponent.height = this.height;
+    }
+  }
+
+  public getActiveLayout(): WorkspaceLayout | null {
+    if (!this.tabsComponent) return null;
+    const activeId = this.tabsComponent.value;
+    const match = activeId.match(/tab-(\d+)/);
+    if (match) {
+      const idx = parseInt(match[1], 10) - 1;
+      return this.layouts[idx] || null;
+    }
+    return null;
+  }
+
+  public render(_r: IRenderer): void {
+    // Handled by tabsComponent
+  }
+}

package/src/WorkspaceExplorer.ts

@@ -0,0 +1,124 @@
+import { UIComponent, PanelGroup, Panel, TreeView, Button } from '@vectojs/ui';
+import type { IRenderer } from '@vectojs/core';
+import { VemWorkspace } from './Workspace';
+import { FileSystemHandler } from './FileSystemHandler';
+
+export class WorkspaceExplorer extends UIComponent {
+  private panelGroup: PanelGroup;
+  private leftPanel: Panel;
+  private rightPanel: Panel;
+  private workspace: VemWorkspace;
+  private treeView: TreeView | null = null;
+  private openBtn: Button;
+  private fsHandler: FileSystemHandler;
+
+  constructor(width: number, height: number, initialText?: string) {
+    super();
+    this.width = width;
+    this.height = height;
+    this.fsHandler = new FileSystemHandler();
+
+    this.panelGroup = new PanelGroup({
+      direction: 'horizontal',
+      width: width,
+      height: height,
+    });
+
+    this.leftPanel = new Panel({ minSize: 150, defaultSize: 0.2 });
+    this.rightPanel = new Panel({ minSize: 300 });
+
+    this.workspace = new VemWorkspace(width * 0.8, height, initialText);
+
+    this.openBtn = new Button('Open Folder', {
+      onClick: () => this.handleOpenFolder(),
+      bg: '#1e293b', // slate-800
+      hoverBg: '#334155',
+      font: '14px monospace',
+      color: '#e2e8f0',
+    });
+    this.openBtn.width = 120;
+    this.openBtn.height = 35;
+    this.openBtn.setPosition(15, 15);
+
+    this.leftPanel.add(this.openBtn);
+    this.rightPanel.add(this.workspace);
+
+    this.panelGroup.addPanel(this.leftPanel);
+    this.panelGroup.addPanel(this.rightPanel);
+
+    this.add(this.panelGroup);
+  }
+
+  public getWorkspace(): VemWorkspace {
+    return this.workspace;
+  }
+
+  private async handleOpenFolder(): Promise<void> {
+    if (typeof window === 'undefined' || !(window as any).showDirectoryPicker) {
+      console.warn('File System Access API is not supported in this environment.');
+      return;
+    }
+
+    try {
+      const rootHandle = await (window as any).showDirectoryPicker();
+      const nodes = await this.fsHandler.readDirectory(rootHandle);
+
+      this.treeView = new TreeView({
+        nodes,
+        width: this.leftPanel.width,
+        height: this.height - 10,
+        font: '13px monospace',
+        color: '#cbd5e1',
+        selectedColor: 'rgba(56, 189, 248, 0.2)',
+        hoverColor: 'rgba(255, 255, 255, 0.05)',
+        onSelect: async (node) => {
+          const fileHandle = this.fsHandler.getFileHandle(node.id);
+          if (fileHandle) {
+            const content = await this.fsHandler.readFile(fileHandle);
+            this.workspace.addTab(content);
+          }
+        },
+      });
+
+      this.leftPanel.remove(this.openBtn);
+      this.leftPanel.add(this.treeView);
+    } catch (err) {
+      console.error('Error selecting directory:', err);
+    }
+  }
+
+  public update(dt: number, time: number): void {
+    super.update(dt, time);
+
+    if (this.panelGroup.width !== this.width || this.panelGroup.height !== this.height) {
+      this.panelGroup.width = this.width;
+      this.panelGroup.height = this.height;
+    }
+
+    if (
+      this.treeView &&
+      (this.treeView.width !== this.leftPanel.width || this.treeView.height !== this.height)
+    ) {
+      this.treeView.width = this.leftPanel.width;
+      this.treeView.height = this.height;
+    }
+
+    if (
+      this.workspace.width !== this.rightPanel.width ||
+      this.workspace.height !== this.rightPanel.height
+    ) {
+      this.workspace.width = this.rightPanel.width;
+      this.workspace.height = this.rightPanel.height;
+    }
+  }
+
+  public render(_r: IRenderer): void {
+    _r.beginPath();
+    _r.moveTo(0, 0);
+    _r.lineTo(this.leftPanel.width, 0);
+    _r.lineTo(this.leftPanel.width, this.height);
+    _r.lineTo(0, this.height);
+    _r.closePath();
+    _r.fill('#090d16'); // deep slate sidebar background
+  }
+}

package/src/WorkspaceLayout.ts

@@ -0,0 +1,191 @@
+import { UIComponent, PanelGroup, Panel } from '@vectojs/ui';
+import type { Entity, IRenderer } from '@vectojs/core';
+import { VemEditorState } from '@vemjs/core';
+import { VemEditorEntity } from './VemEditorEntity';
+
+export type PaneNode =
+  | { type: 'leaf'; id: string; state: VemEditorState }
+  | { type: 'split'; id: string; direction: 'horizontal' | 'vertical'; children: PaneNode[] };
+
+export class EditorPane extends Panel {
+  public editorState: VemEditorState;
+  public editorEntity: VemEditorEntity;
+
+  constructor(state: VemEditorState) {
+    super();
+    this.editorState = state;
+    this.editorEntity = new VemEditorEntity(state);
+    this.add(this.editorEntity);
+  }
+
+  public update(dt: number, time: number): void {
+    super.update(dt, time);
+    if (this.editorEntity.width !== this.width || this.editorEntity.height !== this.height) {
+      this.editorEntity.width = this.width;
+      this.editorEntity.height = this.height;
+      this.editorEntity.updateFromState();
+    }
+  }
+}
+
+export class WorkspaceLayout extends UIComponent {
+  private rootNode: PaneNode;
+  private activePaneId: string;
+  private layoutRoot: Entity | null = null;
+  private paneMap = new Map<string, PaneNode>();
+
+  constructor(width: number, height: number, initialText?: string) {
+    super();
+    this.width = width;
+    this.height = height;
+
+    const initialId = 'pane-1';
+    const initialState = new VemEditorState(initialText);
+
+    this.rootNode = {
+      type: 'leaf',
+      id: initialId,
+      state: initialState,
+    };
+
+    this.activePaneId = initialId;
+    this.paneMap.set(initialId, this.rootNode);
+
+    this.bindStateEvents(initialId, initialState);
+    this.rebuildLayout();
+  }
+
+  private bindStateEvents(id: string, state: VemEditorState): void {
+    state.onSplit((dir) => {
+      this.splitPane(id, dir);
+    });
+    state.onQuit(() => {
+      this.closePane(id);
+    });
+  }
+
+  public getActiveState(): VemEditorState | null {
+    const pane = this.paneMap.get(this.activePaneId);
+    if (pane && pane.type === 'leaf') {
+      return pane.state;
+    }
+    return null;
+  }
+
+  public splitPane(paneId: string, direction: 'horizontal' | 'vertical'): void {
+    const targetNode = this.paneMap.get(paneId);
+    if (!targetNode || targetNode.type !== 'leaf') return;
+
+    const newId = `pane-${Date.now()}`;
+    const newState = new VemEditorState(targetNode.state.getBuffer().getText());
+    const newLeaf: PaneNode = {
+      type: 'leaf',
+      id: newId,
+      state: newState,
+    };
+
+    this.paneMap.set(newId, newLeaf);
+    this.bindStateEvents(newId, newState);
+
+    const oldLeafCopy: PaneNode = { ...targetNode };
+
+    const splitNode = targetNode as any;
+    splitNode.type = 'split';
+    splitNode.direction = direction;
+    splitNode.children = [oldLeafCopy, newLeaf];
+
+    this.activePaneId = newId;
+    this.rebuildLayout();
+  }
+
+  public closePane(paneId: string): void {
+    if (this.rootNode.type === 'leaf') return;
+
+    const parentNode = this.findParentNode(this.rootNode, paneId);
+    if (!parentNode || parentNode.type !== 'split') return;
+
+    const sibling = parentNode.children.find((c) => c.id !== paneId);
+    if (!sibling) return;
+
+    const grandparent = this.findParentNode(this.rootNode, parentNode.id);
+    if (grandparent && grandparent.type === 'split') {
+      const idx = grandparent.children.findIndex((c) => c.id === parentNode.id);
+      grandparent.children[idx] = sibling;
+    } else {
+      this.rootNode = sibling;
+    }
+
+    this.paneMap.delete(paneId);
+
+    const remainingLeaf = this.findFirstLeaf(this.rootNode);
+    if (remainingLeaf) {
+      this.activePaneId = remainingLeaf.id;
+    }
+
+    this.rebuildLayout();
+  }
+
+  private findParentNode(current: PaneNode, childId: string): PaneNode | null {
+    if (current.type === 'leaf') return null;
+    for (const child of current.children) {
+      if (child.id === childId) {
+        return current;
+      }
+      const parent = this.findParentNode(child, childId);
+      if (parent) return parent;
+    }
+    return null;
+  }
+
+  private findFirstLeaf(current: PaneNode): PaneNode | null {
+    if (current.type === 'leaf') return current;
+    return this.findFirstLeaf(current.children[0]);
+  }
+
+  public rebuildLayout(): void {
+    if (this.layoutRoot) {
+      this.remove(this.layoutRoot);
+    }
+
+    this.layoutRoot = this.buildNode(this.rootNode);
+    this.add(this.layoutRoot);
+  }
+
+  private buildNode(node: PaneNode): Entity {
+    if (node.type === 'leaf') {
+      const pane = new EditorPane(node.state);
+      pane.id = node.id;
+      return pane;
+    } else {
+      const group = new PanelGroup({
+        direction: node.direction,
+        width: this.width,
+        height: this.height,
+      });
+
+      for (const child of node.children) {
+        const childEntity = this.buildNode(child);
+        if (childEntity instanceof Panel) {
+          group.addPanel(childEntity);
+        } else {
+          const p = new Panel();
+          p.add(childEntity);
+          group.addPanel(p);
+        }
+      }
+      return group;
+    }
+  }
+
+  public update(dt: number, time: number): void {
+    super.update(dt, time);
+    if (this.layoutRoot) {
+      this.layoutRoot.width = this.width;
+      this.layoutRoot.height = this.height;
+    }
+  }
+
+  public render(_r: IRenderer): void {
+    // Handled by children
+  }
+}

package/src/index.ts

@@ -0,0 +1,48 @@
+import { Scene } from '@vectojs/core';
+import type { VemEditorState } from '@vemjs/core';
+import { VemEditorEntity } from './VemEditorEntity';
+
+export { VemEditorEntity } from './VemEditorEntity';
+export { CommandBar } from './CommandBar';
+export { WorkspaceLayout, EditorPane, type PaneNode } from './WorkspaceLayout';
+export { VemWorkspace } from './Workspace';
+export { WorkspaceExplorer } from './WorkspaceExplorer';
+
+export class VectoRenderer {
+  private editorState: VemEditorState;
+  private scene: Scene | null = null;
+  private editorEntity: VemEditorEntity | null = null;
+
+  constructor(editorState: VemEditorState) {
+    this.editorState = editorState;
+  }
+
+  public attach(canvas: HTMLCanvasElement): void {
+    this.scene = new Scene(canvas);
+    this.editorEntity = new VemEditorEntity(this.editorState);
+    this.scene.add(this.editorEntity);
+    this.scene.start();
+
+    // Listen to changes in the editor state to update rendering properties
+    this.editorState.onChange(() => {
+      if (this.editorEntity) {
+        this.editorEntity.updateFromState();
+      }
+
+      if (this.editorState.getMode() === 'COMMAND') {
+        setTimeout(() => {
+          const inputEl = this.scene?.getA11yElement('vem-command-input');
+          if (inputEl) {
+            (inputEl as HTMLElement).focus();
+          }
+        }, 10);
+      }
+    });
+  }
+
+  public render(): void {
+    if (this.editorEntity) {
+      this.editorEntity.updateFromState();
+    }
+  }
+}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "rootDir": "./src",
+    "outDir": "./dist"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.ts"]
+}