22

demo/src/app/app.component.html

@@ -1,5 +1,5 @@
 <div id="header">
-  <h1>gibraltar</h1>
+    <h1>gibraltar</h1>
 	<h2>demo</h2>
 </div>
 <router-outlet></router-outlet>

demo/src/app/app.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   template: require('./app.component.html'),
-  styles: [require('./app.component.less')]
+  styles: [require('../styles.less'), require('./app.component.less')]
 })
 export class AppComponent {
   title = 'demo';

demo/src/app/components/components-page/components-page.component.html

@@ -3,6 +3,7 @@
     <ul class="nav flex-column">
       <li class="nav-item">
         <a class="nav-link" routerLink="vm" routerLinkActive="active">Virtual Machine</a>
+        <a class="nav-link" routerLink="vapp" routerLinkActive="active">Virtual Application</a>
         <a class="nav-link" routerLink="misc" routerLinkActive="active">Miscellaneous</a>
       </li>
     </ul>

demo/src/app/components/components-page/components-page.component.less

@@ -19,7 +19,7 @@
     background-color: #E3E8E8
   }
   .nav-link.active {
-    background-color: lightgray !important;
-    font-weight: 500 !important;
+    background-color: lightgray;
+    font-weight: 500;
   }
 }

demo/src/app/components/components-routing.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { ComponentsPageComponent } from './components-page/components-page.component';
 import { VmPageComponent } from './vm-page-component/vm-page.component';
+import { VappPageComponent } from './vapp-page-component/vapp-page.component';
 import { MiscPageComponent } from './misc-page-component/misc-page.component';
 
 const routes = [
@@ -17,6 +18,9 @@ const routes = [
       {
         path: 'vm', component: VmPageComponent
       },
+      {
+        path: 'vapp', component: VappPageComponent
+      },
       {
         path: 'misc', component: MiscPageComponent
       }

demo/src/app/components/components.module.ts

@@ -9,6 +9,8 @@ import { DemoComponent } from './demo-component/demo.component';
 import { VmPageComponent } from './vm-page-component/vm-page.component';
 import { VmCreateDemoComponent } from './vm-create-demo-component/vm-create-demo.component';
 import { VmDeleteDemoComponent } from './vm-delete-demo-component/vm-delete-demo.component';
+import { VappPageComponent } from './vapp-page-component/vapp-page.component';
+import { VappStaticDemoComponent } from './vapp-static-demo-component/vapp-static-demo.component';
 import { MiscPageComponent } from './misc-page-component/misc-page.component';
 import { MiscScrollbarHorizontalDemoComponent } from
     './misc-scrollbar-demo-component/misc-scrollbar-horizontal-demo.component';
@@ -23,6 +25,8 @@ import { MiscScrollbarVerticalDemoComponent } from
     VmBasicDemoComponent,
     ComponentsPageComponent,
     DemoComponent,
+    VappPageComponent,
+    VappStaticDemoComponent,
     MiscPageComponent,
     MiscScrollbarHorizontalDemoComponent,
     MiscScrollbarVerticalDemoComponent

demo/src/app/components/demo-component/demo.component.ts

@@ -42,6 +42,9 @@ export class DemoComponent implements OnInit {
   private activeButton: 'RESET' | 'RUN' = 'RUN';
 
   ngOnInit(): void {
+    // apply this setting globally in the demo, so child components behave relatively to their parent component.
+    // disable on an individual basis by setting the item's applyMatrix property to `true`
+    paper.settings.applyMatrix = false;
     this.project = new paper.Project(this.canvas.nativeElement);
     this.backgroundColor = DEFAULT_BACKGROUND_COLOR;
   }

demo/src/app/components/misc-page-component/misc-page.component.ts

@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'other-page',
+  selector: 'misc-page',
   template: `
-    <div id="other-page">
+    <div id="misc-page">
       <misc-scrollbar-horizontal-demo></misc-scrollbar-horizontal-demo>
       <misc-scrollbar-vertical-demo></misc-scrollbar-vertical-demo>
     </div>

demo/src/app/components/misc-scrollbar-demo-component/misc-scrollbar-horizontal-demo.component.ts

@@ -8,7 +8,7 @@ import { DEFAULT_SCROLLBAR_THICKNESS } from '../../../../../src/constants/dimens
 @Component({
   selector: 'misc-scrollbar-horizontal-demo',
   template: `
-	  <demo label="Horizontal Scrollbar" height="200"
+	  <demo label="Horizontal Scrollbar" height="162"
           description="Scrollbar UI component for horizontal scrolling with the default scrollbar and scroll track."
           runnable="true" (run)="run()" (reset)="reset()"></demo>
   ` })
@@ -23,10 +23,8 @@ export class MiscScrollbarHorizontalDemoComponent implements AfterViewInit {
     // sets up Paper Project
     const proj = this.demo.getProject();
     proj.activate();
-    proj.activeLayer.applyMatrix = false;
     this.demo.backgroundColor = CANVAS_BACKGROUND_COLOR;
     const view = paper.view;
-    const canvas = this.demo.canvas.nativeElement;
     const VIEW_PADDING = 30;
 
     // create content
@@ -37,13 +35,13 @@ export class MiscScrollbarHorizontalDemoComponent implements AfterViewInit {
         : i % 15 === 0 && 'fizzbuzz' || i % 3 === 0 && 'fizz' || i % 5 === 0 && 'buzz' || i;
       content.addChildren([
         new paper.Path.Circle({
-          position: new paper.Point((100 + 15) * i + 50, view.center.y - 15),
+          position: new paper.Point((100 + 15) * i + 50, view.center.y),
           radius: 50,
           strokeWidth: 1,
           strokeColor: LIGHT_GREY
         }),
         new paper.PointText({
-          point: new paper.Point((100 + 15) * i + 50, view.center.y + 10 - 15),
+          point: new paper.Point((100 + 15) * i + 50, view.center.y + 10),
           content: textContent,
           fillColor: LIGHT_GREY,
           fontSize: 25,
@@ -54,21 +52,16 @@ export class MiscScrollbarHorizontalDemoComponent implements AfterViewInit {
     content.translate(new paper.Point(VIEW_PADDING, 0));
 
     // create scrollbar
-    const scrollbar = new ScrollbarComponent(
-      { content: content, containerBounds: view.bounds, contentOffsetEnd: VIEW_PADDING },
-      new paper.Point(VIEW_PADDING, view.bounds.bottom - VIEW_PADDING - DEFAULT_SCROLLBAR_THICKNESS),
-      view.bounds.width - VIEW_PADDING * 2,
-      'horizontal'
+    const scrollbar = new ScrollbarComponent({
+      content: content,
+      container: view.element,
+      containerBounds: view.bounds,
+      contentOffsetEnd: VIEW_PADDING
+    },
+      new paper.Point(VIEW_PADDING, view.size.height - DEFAULT_SCROLLBAR_THICKNESS - 10),
+      view.bounds.width - VIEW_PADDING * 2
     );
 
-    // add scroll listening. paper doesn't have a wheel event handler
-    canvas.onwheel = (event: WheelEvent) => {
-      scrollbar.onScroll(event);
-    };
-    // paper tools are global, so specific tools need to be activated when a different view is active
-    view.onMouseEnter = () => {
-      scrollbar.activateDefaultTool();
-    };
   }
 
   run() {

demo/src/app/components/misc-scrollbar-demo-component/misc-scrollbar-vertical-demo.component.ts

@@ -1,15 +1,14 @@
 import { AfterViewInit, Component, ViewChild } from '@angular/core';
 import * as paper from 'paper';
 import { DemoComponent } from '../demo-component/demo.component';
-import { LIGHT_GREY, CANVAS_BACKGROUND_COLOR, VAPP_BACKGROUND_COLOR } from '../../../../../src/constants/colors';
+import { LIGHT_GREY, CANVAS_BACKGROUND_COLOR } from '../../../../../src/constants/colors';
 import { ScrollbarComponent } from '../../../../../src/components/scrollbar';
-import { DEFAULT_SCROLLBAR_THICKNESS } from '../../../../../src/constants/dimensions';
 
 @Component({
   selector: 'misc-scrollbar-vertical-demo',
   template: `
 	  <demo label="Vertical Scrollbar" height="800"
-          description="Scrollbar UI component for vertical scrolling with custom scrollbar, track, and effects."
+          description="Scrollbar UI component for vertical scrolling with default scrollbar and track."
           runnable="true" (run)="run()" (reset)="reset()"></demo>
   ` })
 export class MiscScrollbarVerticalDemoComponent implements AfterViewInit {
@@ -23,10 +22,8 @@ export class MiscScrollbarVerticalDemoComponent implements AfterViewInit {
     // sets up Paper Project
     const proj = this.demo.getProject();
     proj.activate();
-    proj.activeLayer.applyMatrix = false;
     this.demo.backgroundColor = CANVAS_BACKGROUND_COLOR;
     const view = paper.view;
-    const canvas = this.demo.canvas.nativeElement;
     const VIEW_PADDING = 30;
 
     // create content
@@ -54,57 +51,17 @@ export class MiscScrollbarVerticalDemoComponent implements AfterViewInit {
     content.translate(new paper.Point(0, VIEW_PADDING));
 
     // create scrollbar
-    const scrollbar = new ScrollbarComponent(
-      { content: content, containerBounds: view.bounds, contentOffsetEnd: VIEW_PADDING },
-      new paper.Point(view.bounds.right - VIEW_PADDING - DEFAULT_SCROLLBAR_THICKNESS, VIEW_PADDING),
+    const scrollbar = new ScrollbarComponent({
+      content: content,
+      container: view.element,
+      containerBounds: view.bounds,
+      contentOffsetEnd: VIEW_PADDING
+    },
+      new paper.Point(view.bounds.right - VIEW_PADDING, VIEW_PADDING),
       view.bounds.height - VIEW_PADDING * 2,
-      'vertical');
+      'vertical'
+    );
 
-    // add scroll listening. paper doesn't have a wheel event handler
-    canvas.onwheel = (event: WheelEvent) => {
-      scrollbar.onScroll(event);
-    };
-    // paper tools are global, so specific tools need to be activated when a different view is active
-    view.onMouseEnter = () => {
-      scrollbar.activateDefaultTool();
-    };
-
-    scrollbar.getScrollbar().fillColor = 'red';
-    scrollbar.getTrack().fillColor = 'blue';
-
-    // set up custom scrollbar
-    const customScrollbar = new paper.Path.Rectangle({
-      point: new paper.Point(-6.5, 0),
-      size: new paper.Size(15, 15),
-      pivot: new paper.Point(0, 0),
-      radius: 15 / 2,
-      fillColor: LIGHT_GREY
-    });
-    customScrollbar.remove();
-    scrollbar.setScrollbar(customScrollbar);
-
-    // set up custom track
-    const customTrack = new paper.Path.Rectangle({
-      point: new paper.Point(0, 0),
-      size: new paper.Size(2, view.bounds.height - VIEW_PADDING * 2),
-      fillColor: VAPP_BACKGROUND_COLOR
-    });
-    customTrack.remove();
-    scrollbar.setTrack(customTrack);
-
-    // set custom Effects
-    (scrollbar.getScrollbar() as paper.Path).opacity = 1;
-    scrollbar.disableDefaultEffects();
-    scrollbar.setCustomEffects({
-      setActive: () => {
-        (scrollbar.getScrollbar() as paper.Path).fillColor = 'DeepSkyBlue';
-      },
-      setNormal: () => {
-        (scrollbar.getScrollbar() as any).tweenTo({
-          fillColor: LIGHT_GREY
-        }, 250);
-      }
-    });
   }
 
   run() {

demo/src/app/components/vapp-page-component/vapp-page.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'vapp-demo',
+  template: `
+    <div id="vapp-page">
+      <vapp-static-demo></vapp-static-demo>
+    </div>
+  `
+})
+export class VappPageComponent {
+}

demo/src/app/components/vapp-static-demo-component/vapp-static-demo.component.ts

@@ -0,0 +1,57 @@
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import * as paper from 'paper';
+import { DemoComponent } from '../demo-component/demo.component';
+import { VappData, VappComponent } from '../../../../../src/components/vapp';
+import { placeholderArrayOfVappData } from '../../constants/vapp-static-placeholder-data';
+import { ScrollbarComponent } from '../../../../../src/components/scrollbar';
+import { CANVAS_BACKGROUND_COLOR } from '../../../../../src/constants/colors';
+import { CONNECTOR_RADIUS, DEFAULT_SCROLLBAR_THICKNESS } from '../../../../../src/constants/dimensions';
+
+@Component({
+  selector: 'vapp-static-demo',
+  template: `
+	  <demo label="Static Design" height="730"
+          description="Demonstrates the static layout design of the vApp visual component for different cases."></demo>
+  ` })
+export class VappStaticDemoComponent implements AfterViewInit {
+
+  @ViewChild(DemoComponent)
+  demo: DemoComponent;
+
+  ngAfterViewInit() {
+    // sets up Paper Project
+    const proj = this.demo.getProject();
+    proj.activate();
+    const view = proj.view;
+    this.demo.backgroundColor = CANVAS_BACKGROUND_COLOR;
+
+    const VIEW_PADDING = 30;
+    const DEMO_VAPP_TOP_ALIGNMENT = 59;
+    const VERTICAL_POSITION = VIEW_PADDING + DEMO_VAPP_TOP_ALIGNMENT + CONNECTOR_RADIUS;
+    const vapps: Array<VappData> = placeholderArrayOfVappData;
+
+    const content = new paper.Group();
+
+    // create vapps
+    vapps.forEach(vappData => {
+      const position = new paper.Point(
+        content.lastChild ? content.lastChild.bounds.right : VIEW_PADDING, VERTICAL_POSITION);
+      content.addChild(new VappComponent(vappData, position));
+    });
+    (content.lastChild as VappComponent).margin.right = 0;
+
+    // create view horizontal scrollbar
+    const horizontalScrollbar = new ScrollbarComponent({
+      content: content,
+      container: view.element,
+      containerBounds: view.bounds,
+      contentOffsetEnd: VIEW_PADDING
+    },
+      new paper.Point(VIEW_PADDING, view.size.height - DEFAULT_SCROLLBAR_THICKNESS - 10),
+      view.bounds.width - VIEW_PADDING * 2,
+      'horizontal'
+    );
+    ScrollbarComponent.defaultScrollbar = horizontalScrollbar;
+
+  }
+}