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 #drawer class="sidenav" mode="side">

File Folder Tree

Editor

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>

コメント

タイトルとURLをコピーしました