add scrollbar

.gitignore

@@ -4,3 +4,4 @@ coverage
 node_modules
 demo/dist
 .netlify
+src/notes

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="misc" routerLinkActive="active">Miscellaneous</a>
       </li>
     </ul>
   </div>

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 { MiscPageComponent } from './misc-page-component/misc-page.component';
 
 const routes = [
   {
@@ -15,13 +16,15 @@ const routes = [
       },
       {
         path: 'vm', component: VmPageComponent
+      },
+      {
+        path: 'misc', component: MiscPageComponent
       }
     ]
   },
   {
     path: '**',
-    redirectTo: 'vm',
-    pathMatch: 'full'
+    redirectTo: 'vm'
   }
 ];
 

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

@@ -9,6 +9,11 @@ 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 { MiscPageComponent } from './misc-page-component/misc-page.component';
+import { MiscScrollbarHorizontalDemoComponent } from
+    './misc-scrollbar-demo-component/misc-scrollbar-horizontal-demo.component';
+import { MiscScrollbarVerticalDemoComponent } from
+    './misc-scrollbar-demo-component/misc-scrollbar-vertical-demo.component';
 
 @NgModule({
   declarations: [
@@ -17,7 +22,10 @@ import { VmDeleteDemoComponent } from './vm-delete-demo-component/vm-delete-demo
     VmDeleteDemoComponent,
     VmBasicDemoComponent,
     ComponentsPageComponent,
-    DemoComponent
+    DemoComponent,
+    MiscPageComponent,
+    MiscScrollbarHorizontalDemoComponent,
+    MiscScrollbarVerticalDemoComponent
   ],
   imports: [
     ComponentsRoutingModule,

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

@@ -13,7 +13,7 @@ const DEFAULT_BACKGROUND_COLOR = '#343B4E';
 		    <button type="button" [disabled]="activeButton === 'RUN'" (click)="resetClicked()">Reset</button>
 		    <button type="button" [disabled]="activeButton === 'RESET'" (click)="runClicked()">Run</button>
 	    </div>
-	    <canvas class="demo-canvas" #canvas></canvas>
+	    <canvas class="demo-canvas" #canvas resize></canvas>
     </div>
   `,
   styles: [require('./demo.component.less')]

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

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

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

@@ -0,0 +1,85 @@
+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 } from '../../../../../src/constants/colors';
+import { ScrollbarComponent } from '../../../../../src/components/scrollbar';
+import { DEFAULT_SCROLLBAR_THICKNESS } from '../../../../../src/constants/dimensions';
+
+@Component({
+  selector: 'misc-scrollbar-horizontal-demo',
+  template: `
+	  <demo label="Horizontal Scrollbar" height="200"
+          description="Scrollbar UI component for horizontal scrolling with the default scrollbar and scroll track."
+          runnable="true" (run)="run()" (reset)="reset()"></demo>
+  ` })
+export class MiscScrollbarHorizontalDemoComponent implements AfterViewInit {
+
+  @ViewChild(DemoComponent)
+  demo: DemoComponent;
+
+  private fizzSize: number = 100;
+
+  ngAfterViewInit() {
+    // 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
+    const content = new paper.Group();
+    for (let i = 0; i < this.fizzSize; i++) {
+      const textContent = i === 0
+        ? 0
+        : 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),
+          radius: 50,
+          strokeWidth: 1,
+          strokeColor: LIGHT_GREY
+        }),
+        new paper.PointText({
+          point: new paper.Point((100 + 15) * i + 50, view.center.y + 10 - 15),
+          content: textContent,
+          fillColor: LIGHT_GREY,
+          fontSize: 25,
+          justification: 'center'
+        })
+      ]);
+    }
+    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'
+    );
+
+    // 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() {
+    this.fizzSize = 4;
+    this.demo.getProject().clear();
+    this.ngAfterViewInit();
+  }
+
+  reset() {
+    this.fizzSize = 100;
+    this.demo.getProject().clear();
+    this.ngAfterViewInit();
+  }
+}

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

@@ -0,0 +1,84 @@
+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 { 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 default scrollbar and track."
+          runnable="true" (run)="run()" (reset)="reset()"></demo>
+  ` })
+export class MiscScrollbarVerticalDemoComponent implements AfterViewInit {
+
+  @ViewChild(DemoComponent)
+  demo: DemoComponent;
+
+  private fizzSize: number = 100;
+
+  ngAfterViewInit() {
+    // 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
+    const content = new paper.Group();
+    for (let i = 0; i < this.fizzSize; i++) {
+      const textContent = i === 0
+        ? 0
+        : i % 15 === 0 && 'fizzbuzz' || i % 3 === 0 && 'fizz' || i % 5 === 0 && 'buzz' || i;
+      content.addChildren([
+        new paper.Path.Circle({
+          position: new paper.Point(view.center.x, (100 + 15) * i + 50),
+          radius: 50,
+          strokeWidth: 1,
+          strokeColor: LIGHT_GREY
+        }),
+        new paper.PointText({
+          point: new paper.Point(view.center.x, (100 + 15) * i + 60),
+          content: textContent,
+          fillColor: LIGHT_GREY,
+          fontSize: 25,
+          justification: 'center'
+        })
+      ]);
+    }
+    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),
+      view.bounds.height - VIEW_PADDING * 2,
+      '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();
+    };
+  }
+
+  run() {
+    this.fizzSize = 4;
+    this.demo.getProject().clear();
+    this.ngAfterViewInit();
+  }
+
+  reset() {
+    this.fizzSize = 100;
+    this.demo.getProject().clear();
+    this.ngAfterViewInit();
+  }
+}