Angular のコンポーネント組み合わせで、IDEっぽいものを作ってみる

Angular のコンポーネント組み合わせで、IDEっぽいものを作ってみる

Angular には Material Component がたくさん用意されていますので、コピペである程度のGUIを開発していくことができます。

今回は、SideNavMonaco-Editorを使用して、エディターっぽいGUIを開発してみます。

※中身の実装はしていませんので、GUIで動くところだけです。

1. 完成イメージ

右側にVisual Studio Codeライクなエディタを配置し、左側にフォルダツリーを表示します。フォルダツリーはトグルボタンで、表示と非表示を切り替えることができるようにしています。

2. 構成

ものすごくわかりにくいですが、コンポーネント構成はこんな感じです。

Material Design の Drawer と SideNav で大枠を作成し、左側のフォルダツリーは Tree コンポーネントを使用しています。また、右側のエディタは Monaco Editor を使用しました。

3. コンポーネント作成

以下のコマンドで、Angular コンポーネントを作成します。


ng generate component EditorArea

今回は EditorArea というコンポーネントを作成します。

4. Drawer SideNav 配置

https://material.angular.io/components/sidenav/overview

MatSidenavModule が必要ですので、app.module.ts に追加します。

HTML は以下のように書きました。


    <mat-drawer-container class="container" autosize>
    <mat-drawer #drawer class="sidenav" mode="side">
        <p>File Folder Tree</p>
    </mat-drawer>
    <div class="content">
        <p>Editor</p>
    </div>
    </mat-drawer-container>

5. Visual Studio Code ライクエディタ

Monaco Editor というオープンソースのJavascript ライブラリを使用します。

https://github.com/atularen/ngx-monaco-editor

上記の github のページのとおりにパッケージをインストールしていきます。

editor-area.component.ts ファイルに以下を記述します。


  editorOptions = {theme: 'vs-dark', language: 'javascript'};
  code: string= 'function x() {\nconsole.log("Hello world!");\n}';

HTML は以下のようになります。


    <ngx-monaco-editor [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor>

6. フォルダツリー

Material Design の Tree コンポーネントを使用します。

https://material.angular.io/components/tree/overview

MatTreeModule が必要ですので、app.module.ts に追加します。

ほぼサンプルのコピーですが、HTML は以下のようにしました。


    <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
      <!-- This is the tree node template for leaf nodes -->
      <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
        <!-- use a disabled button to provide padding for tree leaf -->
        <button mat-icon-button disabled></button>
        {{node.name}}
      </mat-tree-node>
      <!-- This is the tree node template for expandable nodes -->
      <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
        <button mat-icon-button matTreeNodeToggle
                [attr.aria-label]="'toggle ' + node.name">
          <mat-icon class="mat-icon-rtl-mirror">
            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
        </button>
        {{node.name}}
      </mat-tree-node>
    </mat-tree>

メニュー構成は以下のように定義します。


    const TREE_DATA: FoodNode[] = [
        {
            name: 'Sample Project',
            children: [
            {name: 'index.js'},
            {name: 'config.json'},
            {name: '.gitignore'},
            ]
        }
    ];

サンプルどおりにその他もろもろをコーディングしていきます。

7. フォルダツリーの表示/非表示のトグルボタン

表示/非表示のトグルは drawer.toggle() 関数で出来ます。

HTML に以下のように書けば実装できると思います。


    <button type="button" mat-button (click)="drawer.toggle();" id="ToggleTreeButton">
    {{ToggleLabel}}
    </button>

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です