ing

@overflow/commons/ui/component/index.ts

@@ -3,6 +3,7 @@ import {
 } from './menu';
 
 import {
+  DivComponent,
   DropdownPanelComponent,
   PopupPanelComponent,
 } from './primeng';
@@ -17,6 +18,7 @@ import {
 } from './window';
 
 export const COMPONENTS = [
+  DivComponent,
   DropdownPanelComponent,
   MenuBarComponent,
   PopupPanelComponent,

@overflow/commons/ui/component/primeng/div.component.ts

@@ -0,0 +1,24 @@
+import {
+  Component, ElementRef, Input,
+} from '@angular/core';
+import { BlockableUI } from 'primeng/primeng';
+
+@Component({
+  selector: 'of-p-div',
+  template: `
+    <div [ngStyle]="style" [class]="styleClass">
+      <ng-content></ng-content>
+    </div>
+  `,
+})
+export class DivComponent implements BlockableUI {
+  @Input() style: any;
+
+  @Input() styleClass: string;
+
+  constructor(private el: ElementRef) { }
+
+  getBlockableElement(): HTMLElement {
+    return this.el.nativeElement.children[0];
+  }
+}

@overflow/commons/ui/component/primeng/index.ts

@@ -1,2 +1,3 @@
+export { DivComponent } from './div.component';
 export { DropdownPanelComponent } from './dropdown-panel.component';
 export { PopupPanelComponent } from './popup-panel.component';

src/app/pages/home/home-page.component.html

@@ -1,4 +1,4 @@
-<div #discoveryContainer>
+<of-p-div #discoveryContainer>
   <div *ngIf="showIntro" class="home-start">
     <div class="start-button" (click)="discoveryConfigService.setStarted(true)">
       <svg version="1.1" viewBox="0 0 200 210">
@@ -12,7 +12,6 @@
       <b>를 이용해 주셔서 감사합니다.</b>
       <br> 좌측의 버튼을 클릭 하시면 기본 설정으로 스캐닝이 시작 됩니다. 설정의 변경을 원하시면 상단의 설정 영역을 클릭하여 변경이 가능합니다.
     </div>
-
   </div>
 
   <div *ngIf="!showIntro" class="discovery-container">
@@ -88,12 +87,13 @@
         <app-node-detail [node]="selectedNode" (otherHostSelect)="otherHostSelected($event)"></app-node-detail>
       </div>
     </p-sidebar>
-
   </div>
-</div>
+</of-p-div>
 
 <p-confirmDialog></p-confirmDialog>
 
+<p-blockUI id="discovery-blockUI" [target]="discoveryContainer" [blocked]="discoveryRequestID !== null">
+</p-blockUI>
 
 <!-- <div class="ui-fluid">
     <div class="ui-g">

src/app/pages/home/home-page.component.ts

@@ -55,7 +55,7 @@ export class HomePageComponent implements OnInit, OnDestroy {
   private readonly minScale: number;
 
   private discoveryStartDate: Date;
-  private discoveryRequestID: string | null;
+  discoveryRequestID: string | null;
   hosts: Map<string, Host>;
   ports: Map<string, Map<number, Port>>;
   resultMsg: string[];
@@ -405,22 +405,23 @@ export class HomePageComponent implements OnInit, OnDestroy {
       });
 
       // Highlight
-      // const discoveryContainer = d3.select(this.discoveryTargetRef.nativeElement);
+      const discoveryContainer = d3.select(this.discoveryTargetRef.nativeElement);
-      // discoveryContainer.on('click', function () {
+      discoveryContainer.on('click', function () {
-      //   __this.selectedNode = null;
+        __this.selectedNode = null;
+        __this.displaySidebar = false;
 
-      // nodeElements.each(function () {
+        nodeElements.each(function () {
-      //   const _thisElement = this as Element;
+          const _thisElement = this as Element;
-      //   d3.select(_thisElement).classed('semi-unselected', false);
+          d3.select(_thisElement).classed('semi-unselected', false);
-      //   d3.select(_thisElement).classed('unselected', false);
+          d3.select(_thisElement).classed('unselected', false);
-      // });
+        });
 
-      // linkElements.each(function () {
+        linkElements.each(function () {
-      //   const _thisElement = this as Element;
+          const _thisElement = this as Element;
-      //   d3.select(_thisElement).classed('semi-unselected', false);
+          d3.select(_thisElement).classed('semi-unselected', false);
-      //   d3.select(_thisElement).classed('unselected', false);
+          d3.select(_thisElement).classed('unselected', false);
-      // });
+        });
-      // });
+      });
 
       nodeElements
         .on('mouseover', function () {

src/app/pages/pages.component.html

@@ -33,60 +33,10 @@
   <div *ngIf="discoveryMode" class="ui-menu-mode">
     <span>{{discoveryMode}} Mode</span>
   </div>
-
-  <!-- <div class="sidebar-section" style="width: 250px;">
-    <div class="toolbar-dropdown closed" aria-expanded="false">
-      <div class="toolbar-button" title="C:\Users\crusader\Documents\GitHub\gateway">
-        <button class="button-component" type="button">
-          <svg aria-hidden="true" class="octicon icon" version="1.1" viewBox="0 0 10 16">
-            <path d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path>
-          </svg>
-          <div class="text">
-            <div class="description">Current repository</div>
-            <div class="title">gateway</div>
-          </div>
-          <svg aria-hidden="true" class="octicon dropdownArrow" version="1.1" viewBox="0 0 12 16">
-            <path d="M0 5l6 6 6-6z"></path>
-          </svg>
-        </button>
-      </div>
-    </div>
-  </div>
-  <div class="toolbar-dropdown closed branch-button" aria-expanded="false">
-    <div class="toolbar-button" title="Current branch is master">
-      <button class="button-component" type="button">
-        <svg aria-hidden="true" class="octicon icon" version="1.1" viewBox="0 0 10 16">
-          <path d="M10 5c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v.3c-.02.52-.23.98-.63 1.38-.4.4-.86.61-1.38.63-.83.02-1.48.16-2 .45V4.72a1.993 1.993 0 0 0-1-3.72C.88 1 0 1.89 0 3a2 2 0 0 0 1 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2 1.11 0 2-.89 2-2 0-.53-.2-1-.53-1.36.09-.06.48-.41.59-.47.25-.11.56-.17.94-.17 1.05-.05 1.95-.45 2.75-1.25S8.95 7.77 9 6.73h-.02C9.59 6.37 10 5.73 10 5zM2 1.8c.66 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2C1.35 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2zm0 12.41c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm6-8c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path>
-        </svg>
-        <div class="text">
-          <div class="description">Current branch</div>
-          <div class="title">master</div>
-        </div>
-        <svg aria-hidden="true" class="octicon dropdownArrow" version="1.1" viewBox="0 0 12 16">
-          <path d="M0 5l6 6 6-6z"></path>
-        </svg>
-      </button>
-    </div>
-  </div>
-  <div class="toolbar-button push-pull-button">
-    <button class="button-component" type="button">
-      <svg aria-hidden="true" class="octicon icon" version="1.1" viewBox="0 0 12 16">
-        <path d="M10.24 7.4a4.15 4.15 0 0 1-1.2 3.6 4.346 4.346 0 0 1-5.41.54L4.8 10.4.5 9.8l.6 4.2 1.31-1.26c2.36 1.74 5.7 1.57 7.84-.54a5.876 5.876 0 0 0 1.74-4.46l-1.75-.34zM2.96 5a4.346 4.346 0 0 1 5.41-.54L7.2 5.6l4.3.6-.6-4.2-1.31 1.26c-2.36-1.74-5.7-1.57-7.85.54C.5 5.03-.06 6.65.01 8.26l1.75.35A4.17 4.17 0 0 1 2.96 5z"></path>
-      </svg>
-      <div class="text">
-        <div class="title">Fetch origin</div>
-        <div class="description">
-          <span>Last fetched
-            <span title="Tuesday, August 14, 2018 10:06 PM">a day ago</span>
-          </span>
-        </div>
-      </div>
-    </button>
-  </div> -->
 </app-toolbar>
 
-<p-panel #pagesContent [showHeader]="false">
+<of-p-div #pagesContent [style]="{'padding-top': '0.6em'}">
   <div id="pages-content">
     <router-outlet #o="outlet"></router-outlet>
   </div>
-</p-panel>
+</of-p-div>

src/app/pages/pages.component.scss

@@ -2,6 +2,7 @@
   min-height: 100vh;
   padding-bottom: 72px;
 }
+
 .ui-menu-mode {
   display: flex;
   flex-direction: row;