updates

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 to all demo components, so child components behave relatively to their parent component
+    // can disable on an individual basis by setting applyMatrix to `true`
+    paper.settings.applyMatrix = false;
     this.project = new paper.Project(this.canvas.nativeElement);
     this.backgroundColor = DEFAULT_BACKGROUND_COLOR;
   }

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

@@ -7,7 +7,7 @@ import { DEFAULT_SCROLLBAR_THICKNESS } from '../../../../../src/constants/dimens
 
 @Component({
   selector: 'misc-scrollbar-horizontal-demo',
-  template: `    
+  template: `
 	  <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 = paper.view.element;
     const VIEW_PADDING = 30;
 
     // create content
@@ -56,21 +54,13 @@ export class MiscScrollbarHorizontalDemoComponent implements AfterViewInit {
     // create scrollbar
     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
     );
-    if (scrollbar.isEnabled) {
-      canvas.onmouseenter = scrollbar.containerMouseEnter;
-      canvas.onmouseleave = scrollbar.containerMouseLeave;
-
-      // add scroll listening. paper doesn't have a wheel event handler
-      canvas.onwheel = (event: WheelEvent) => {
-        scrollbar.onScroll(event);
-      };
-    }
 
   }
 

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

@@ -22,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 = paper.view.element;
     const VIEW_PADDING = 30;
 
     // create content
@@ -55,22 +53,14 @@ export class MiscScrollbarVerticalDemoComponent implements AfterViewInit {
     // create scrollbar
     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'
     );
-    if (scrollbar.isEnabled) {
-      canvas.onmouseenter = scrollbar.containerMouseEnter;
-      canvas.onmouseleave = scrollbar.containerMouseLeave;
-
-      // add scroll listening. paper doesn't have a wheel event handler
-      canvas.onwheel = (event: WheelEvent) => {
-        scrollbar.onScroll(event);
-      };
-    }
 
   }
 

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

@@ -2,7 +2,7 @@ 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-basic-placeholder-data';
+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';
@@ -22,63 +22,36 @@ export class VappStaticDemoComponent implements AfterViewInit {
     // sets up Paper Project
     const proj = this.demo.getProject();
     proj.activate();
-    const view = paper.view;
-    const canvas = paper.view.element;
+    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({ applyMatrix: false });
-    // create origin paper Item for vapps to base position from
-    const origin = new paper.Path.Circle({
-      position: new paper.Point(VIEW_PADDING, VERTICAL_POSITION),
-      radius: 0,
-      parent: content
-    });
+    const content = new paper.Group();
 
     // create vapps
     vapps.forEach(vappData => {
-      const position = new paper.Point(content.lastChild.bounds.right, VERTICAL_POSITION);
+      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'
     );
-    if (horizontalScrollbar.isEnabled) {
-      canvas.onmouseenter = horizontalScrollbar.containerMouseEnter;
-      canvas.onmouseleave = horizontalScrollbar.containerMouseLeave;
-    }
-
-    // add scroll listening. paper doesn't have a wheel event handler
-    canvas.onwheel = (event: WheelEvent) => {
-      // horizontal scrolling sent to horizontal scrollbar
-      if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
-        horizontalScrollbar.onScroll(event);
-      } else {
-        // vertical scrolling sent to any scrollable vapp that's active/hovered
-        content.children.forEach(item => {
-          if (item instanceof VappComponent && item.isScrollable) {
-            item.setScrollListening(event);
-          }
-        });
-      }
-    };
-
-    // TODO: keydown 'left' and 'right' should always go to horizontalScrollbar. keydown 'up' and 'down' to should go to
-    //  any scrollable vapp that's active/hovered. can try handling with a paper tools service and/or tool stack
+    ScrollbarComponent.defaultScrollbar = horizontalScrollbar;
 
-    // TODO: make sure 'Roboto' font loading finishes before canvas elements are rendered
   }
 }

demo/src/app/constants/vapp-basic-placeholder-data.ts → demo/src/app/constants/vapp-static-placeholder-data.ts

@@ -1,4 +1,5 @@
 import { VappData } from '../../../../src/components/vapp';
+import { OperatingSystem } from 'iland-sdk';
 
 /**
  * Placeholder vApp data for the Vapp Static Demo
@@ -23,6 +24,7 @@ import { VappData } from '../../../../src/components/vapp';
   // 16. variations for unattached vnics
   // 17. nat-routed vApp network with no attached vms and vnics
   // 18. vapp with no vapp networks or vms
+  // 19. network-less vm in a list that has other vapp networks
 export const placeholderArrayOfVappData: Array<VappData> = [
   // 0. nat-routed vapp network
   {
@@ -279,13 +281,13 @@ export const placeholderArrayOfVappData: Array<VappData> = [
         vnics: [
           {
             vnic_id: 0,
-            network_name: 'A',
-            is_connected: true
+            network_name: '',
+            is_connected: false
           },
           {
             vnic_id: 1,
-            network_name: '',
-            is_connected: false
+            network_name: 'A',
+            is_connected: true
           },
           {
             vnic_id: 2,
@@ -2060,5 +2062,84 @@ export const placeholderArrayOfVappData: Array<VappData> = [
     name: 'Coke RES & BURST',
     vapp_networks: [],
     vms: []
+  },
+  // 19. network-less vm in a list that has other vapp networks
+  {
+    uuid: '',
+    name: 'BC Test vApp',
+    vapp_networks: [
+      {
+        uuid: '0',
+        name: 'A',
+        vapp_uuid: '',
+        fence_mode: 'BRIDGED'
+      },
+      {
+        uuid: '1',
+        name: 'B',
+        vapp_uuid: '',
+        fence_mode: 'BRIDGED'
+      },
+      {
+        uuid: '2',
+        name: 'C',
+        vapp_uuid: '',
+        fence_mode: 'BRIDGED'
+      }
+    ],
+    vms: [
+      {
+        uuid: '',
+        name: 'redhat-as-01',
+        vapp_uuid: '',
+        operatingSystem: 'redhatGuest',
+        vnics: [
+          {
+            vnic_id: 0,
+            network_name: 'A',
+            is_connected: true
+          }
+        ]
+      },
+      {
+        uuid: '',
+        name: 'debian-as-02',
+        vapp_uuid: '',
+        operatingSystem: 'debian8Guest',
+        vnics: [
+          {
+            vnic_id: 0,
+            network_name: 'B',
+            is_connected: true
+          }
+        ]
+      },
+      {
+        uuid: '',
+        name: 'linux-as-03',
+        vapp_uuid: '',
+        operatingSystem: 'other24xLinux64Guest',
+        vnics: [
+          {
+            vnic_id: 1,
+            network_name: 'C',
+            is_connected: true
+          }
+        ]
+      },
+      {
+        uuid: '',
+        name: 'arch-as-04',
+        vapp_uuid: '',
+        operatingSystem: 'btwIUseArch' as OperatingSystem,
+        vnics: [
+          {
+            vnic_id: 0,
+            network_name: '',
+            is_connected: false
+          }
+        ]
+      }
+    ]
   }
 ];

src/components/connector.test.ts → src/components/connection-icon.test.ts

@@ -1,30 +1,31 @@
-import { ConnectorComponent } from './connector';
+import { ConnectionIconComponent } from './connection-icon';
 import { VAPP_BACKGROUND_COLOR, CANVAS_BACKGROUND_COLOR } from '../constants/colors';
 import * as paper from 'paper';
 
-describe('connector component', () => {
+describe('icon component', () => {
 
   beforeAll(() => {
     const canvasEl = document.createElement('canvas');
     paper.setup(canvasEl);
+    paper.settings.applyMatrix = false;
   });
 
   test('basic properties', () => {
     const position = new paper.Point(0, 0);
     const defaultColor = new paper.Color(VAPP_BACKGROUND_COLOR);
-    const connector = new ConnectorComponent();
+    const connector = new ConnectionIconComponent();
     expect(connector.position.x).toBe(position.x);
     expect(connector.position.y).toBe(position.y);
-    expect((connector.connector.fillColor as paper.Color).equals(defaultColor)).toBe(true);
+    expect((connector.icon.fillColor as paper.Color).equals(defaultColor)).toBe(true);
   });
 
   test('custom position and fill color', () => {
     const position = new paper.Point(-20, 30);
     const color = new paper.Color(CANVAS_BACKGROUND_COLOR);
-    const connector = new ConnectorComponent(position, color);
+    const connector = new ConnectionIconComponent(position, color);
     expect(connector.position.x).toBe(position.x);
     expect(connector.position.y).toBe(position.y);
-    expect((connector.connector.fillColor as paper.Color).equals(color)).toBe(true);
+    expect((connector.icon.fillColor as paper.Color).equals(color)).toBe(true);
   });
 
 });

src/components/connector.ts → src/components/connection-icon.ts

@@ -4,27 +4,29 @@ import { CONNECTOR_RADIUS } from '../constants/dimensions';
 import { DEFAULT_STROKE_STYLE } from '../constants/styles';
 
 /**
- * Connector Visual Component.
+ * Connection Icon Visual Component.
+ * The larger (11px) circle icon with a thin grey stroke that represents connections. Usually used for VNICs that
+ * are attached and connected to a vApp Network or for the vApp Network to Org-Vdc network connections.
  */
-export class ConnectorComponent extends paper.Group {
+export class ConnectionIconComponent extends paper.Group {
 
-  // the stroked circle item
-  readonly _connector: paper.Path.Circle;
+  // the stroked and 'unfilled' circle icon
+  readonly _icon: paper.Path.Circle;
 
   /**
-   * Creates a new ConnectorComponent instance.
+   * Creates a new ConnectionIconComponent instance.
    *
-   * @param _point the location that the connector should be rendered at
+   * @param _point the location that the icon should be rendered at
    * @param _fillColor the inner fill color that usually matches the background color of the element it is on top of
+   * to make it seem 'unfilled'
    */
   constructor(private _point: paper.Point = new paper.Point(0, 0),
               private _fillColor: paper.Color | string = VAPP_BACKGROUND_COLOR) {
     super();
-    this.applyMatrix = false;
     this.position = _point;
     this.pivot = new paper.Point(0, 0);
 
-    this._connector = new paper.Path.Circle(
+    this._icon = new paper.Path.Circle(
       {
         position: new paper.Point(0, 0),
         radius: CONNECTOR_RADIUS,
@@ -34,7 +36,7 @@ export class ConnectorComponent extends paper.Group {
       });
   }
 
-  get connector(): paper.Path.Circle {
-    return this._connector;
+  get icon(): paper.Path.Circle {
+    return this._icon;
   }
 }