Skip to content

Commit 98b64a8

Browse files
author
cho
committed
updates
1 parent e54cc54 commit 98b64a8

39 files changed

+820
-495
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,9 @@ export class DemoComponent implements OnInit {
4242
private activeButton: 'RESET' | 'RUN' = 'RUN';
4343

4444
ngOnInit(): void {
45+
// apply this setting to all demo components, so child components behave relatively to their parent component
46+
// can disable on an individual basis by setting applyMatrix to `true`
47+
paper.settings.applyMatrix = false;
4548
this.project = new paper.Project(this.canvas.nativeElement);
4649
this.backgroundColor = DEFAULT_BACKGROUND_COLOR;
4750
}

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

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { DEFAULT_SCROLLBAR_THICKNESS } from '../../../../../src/constants/dimens
77

88
@Component({
99
selector: 'misc-scrollbar-horizontal-demo',
10-
template: `
10+
template: `
1111
<demo label="Horizontal Scrollbar" height="162"
1212
description="Scrollbar UI component for horizontal scrolling with the default scrollbar and scroll track."
1313
runnable="true" (run)="run()" (reset)="reset()"></demo>
@@ -23,10 +23,8 @@ export class MiscScrollbarHorizontalDemoComponent implements AfterViewInit {
2323
// sets up Paper Project
2424
const proj = this.demo.getProject();
2525
proj.activate();
26-
proj.activeLayer.applyMatrix = false;
2726
this.demo.backgroundColor = CANVAS_BACKGROUND_COLOR;
2827
const view = paper.view;
29-
const canvas = paper.view.element;
3028
const VIEW_PADDING = 30;
3129

3230
// create content
@@ -56,21 +54,13 @@ export class MiscScrollbarHorizontalDemoComponent implements AfterViewInit {
5654
// create scrollbar
5755
const scrollbar = new ScrollbarComponent({
5856
content: content,
57+
container: view.element,
5958
containerBounds: view.bounds,
6059
contentOffsetEnd: VIEW_PADDING
6160
},
6261
new paper.Point(VIEW_PADDING, view.size.height - DEFAULT_SCROLLBAR_THICKNESS - 10),
6362
view.bounds.width - VIEW_PADDING * 2
6463
);
65-
if (scrollbar.isEnabled) {
66-
canvas.onmouseenter = scrollbar.containerMouseEnter;
67-
canvas.onmouseleave = scrollbar.containerMouseLeave;
68-
69-
// add scroll listening. paper doesn't have a wheel event handler
70-
canvas.onwheel = (event: WheelEvent) => {
71-
scrollbar.onScroll(event);
72-
};
73-
}
7464

7565
}
7666

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

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,8 @@ export class MiscScrollbarVerticalDemoComponent implements AfterViewInit {
2222
// sets up Paper Project
2323
const proj = this.demo.getProject();
2424
proj.activate();
25-
proj.activeLayer.applyMatrix = false;
2625
this.demo.backgroundColor = CANVAS_BACKGROUND_COLOR;
2726
const view = paper.view;
28-
const canvas = paper.view.element;
2927
const VIEW_PADDING = 30;
3028

3129
// create content
@@ -55,22 +53,14 @@ export class MiscScrollbarVerticalDemoComponent implements AfterViewInit {
5553
// create scrollbar
5654
const scrollbar = new ScrollbarComponent({
5755
content: content,
56+
container: view.element,
5857
containerBounds: view.bounds,
5958
contentOffsetEnd: VIEW_PADDING
6059
},
6160
new paper.Point(view.bounds.right - VIEW_PADDING, VIEW_PADDING),
6261
view.bounds.height - VIEW_PADDING * 2,
6362
'vertical'
6463
);
65-
if (scrollbar.isEnabled) {
66-
canvas.onmouseenter = scrollbar.containerMouseEnter;
67-
canvas.onmouseleave = scrollbar.containerMouseLeave;
68-
69-
// add scroll listening. paper doesn't have a wheel event handler
70-
canvas.onwheel = (event: WheelEvent) => {
71-
scrollbar.onScroll(event);
72-
};
73-
}
7464

7565
}
7666

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

Lines changed: 7 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { AfterViewInit, Component, ViewChild } from '@angular/core';
22
import * as paper from 'paper';
33
import { DemoComponent } from '../demo-component/demo.component';
44
import { VappData, VappComponent } from '../../../../../src/components/vapp';
5-
import { placeholderArrayOfVappData } from '../../constants/vapp-basic-placeholder-data';
5+
import { placeholderArrayOfVappData } from '../../constants/vapp-static-placeholder-data';
66
import { ScrollbarComponent } from '../../../../../src/components/scrollbar';
77
import { CANVAS_BACKGROUND_COLOR } from '../../../../../src/constants/colors';
88
import { CONNECTOR_RADIUS, DEFAULT_SCROLLBAR_THICKNESS } from '../../../../../src/constants/dimensions';
@@ -22,63 +22,36 @@ export class VappStaticDemoComponent implements AfterViewInit {
2222
// sets up Paper Project
2323
const proj = this.demo.getProject();
2424
proj.activate();
25-
const view = paper.view;
26-
const canvas = paper.view.element;
25+
const view = proj.view;
2726
this.demo.backgroundColor = CANVAS_BACKGROUND_COLOR;
2827

2928
const VIEW_PADDING = 30;
3029
const DEMO_VAPP_TOP_ALIGNMENT = 59;
3130
const VERTICAL_POSITION = VIEW_PADDING + DEMO_VAPP_TOP_ALIGNMENT + CONNECTOR_RADIUS;
3231
const vapps: Array<VappData> = placeholderArrayOfVappData;
3332

34-
const content = new paper.Group({ applyMatrix: false });
35-
// create origin paper Item for vapps to base position from
36-
const origin = new paper.Path.Circle({
37-
position: new paper.Point(VIEW_PADDING, VERTICAL_POSITION),
38-
radius: 0,
39-
parent: content
40-
});
33+
const content = new paper.Group();
4134

4235
// create vapps
4336
vapps.forEach(vappData => {
44-
const position = new paper.Point(content.lastChild.bounds.right, VERTICAL_POSITION);
37+
const position = new paper.Point(
38+
content.lastChild ? content.lastChild.bounds.right : VIEW_PADDING, VERTICAL_POSITION);
4539
content.addChild(new VappComponent(vappData, position));
4640
});
4741
(content.lastChild as VappComponent).margin.right = 0;
4842

4943
// create view horizontal scrollbar
5044
const horizontalScrollbar = new ScrollbarComponent({
5145
content: content,
46+
container: view.element,
5247
containerBounds: view.bounds,
5348
contentOffsetEnd: VIEW_PADDING
5449
},
5550
new paper.Point(VIEW_PADDING, view.size.height - DEFAULT_SCROLLBAR_THICKNESS - 10),
5651
view.bounds.width - VIEW_PADDING * 2,
5752
'horizontal'
5853
);
59-
if (horizontalScrollbar.isEnabled) {
60-
canvas.onmouseenter = horizontalScrollbar.containerMouseEnter;
61-
canvas.onmouseleave = horizontalScrollbar.containerMouseLeave;
62-
}
63-
64-
// add scroll listening. paper doesn't have a wheel event handler
65-
canvas.onwheel = (event: WheelEvent) => {
66-
// horizontal scrolling sent to horizontal scrollbar
67-
if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
68-
horizontalScrollbar.onScroll(event);
69-
} else {
70-
// vertical scrolling sent to any scrollable vapp that's active/hovered
71-
content.children.forEach(item => {
72-
if (item instanceof VappComponent && item.isScrollable) {
73-
item.setScrollListening(event);
74-
}
75-
});
76-
}
77-
};
78-
79-
// TODO: keydown 'left' and 'right' should always go to horizontalScrollbar. keydown 'up' and 'down' to should go to
80-
// any scrollable vapp that's active/hovered. can try handling with a paper tools service and/or tool stack
54+
ScrollbarComponent.defaultScrollbar = horizontalScrollbar;
8155

82-
// TODO: make sure 'Roboto' font loading finishes before canvas elements are rendered
8356
}
8457
}

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

Lines changed: 85 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { VappData } from '../../../../src/components/vapp';
2+
import { OperatingSystem } from 'iland-sdk';
23

34
/**
45
* Placeholder vApp data for the Vapp Static Demo
@@ -23,6 +24,7 @@ import { VappData } from '../../../../src/components/vapp';
2324
// 16. variations for unattached vnics
2425
// 17. nat-routed vApp network with no attached vms and vnics
2526
// 18. vapp with no vapp networks or vms
27+
// 19. network-less vm in a list that has other vapp networks
2628
export const placeholderArrayOfVappData: Array<VappData> = [
2729
// 0. nat-routed vapp network
2830
{
@@ -279,13 +281,13 @@ export const placeholderArrayOfVappData: Array<VappData> = [
279281
vnics: [
280282
{
281283
vnic_id: 0,
282-
network_name: 'A',
283-
is_connected: true
284+
network_name: '',
285+
is_connected: false
284286
},
285287
{
286288
vnic_id: 1,
287-
network_name: '',
288-
is_connected: false
289+
network_name: 'A',
290+
is_connected: true
289291
},
290292
{
291293
vnic_id: 2,
@@ -2060,5 +2062,84 @@ export const placeholderArrayOfVappData: Array<VappData> = [
20602062
name: 'Coke RES & BURST',
20612063
vapp_networks: [],
20622064
vms: []
2065+
},
2066+
// 19. network-less vm in a list that has other vapp networks
2067+
{
2068+
uuid: '',
2069+
name: 'BC Test vApp',
2070+
vapp_networks: [
2071+
{
2072+
uuid: '0',
2073+
name: 'A',
2074+
vapp_uuid: '',
2075+
fence_mode: 'BRIDGED'
2076+
},
2077+
{
2078+
uuid: '1',
2079+
name: 'B',
2080+
vapp_uuid: '',
2081+
fence_mode: 'BRIDGED'
2082+
},
2083+
{
2084+
uuid: '2',
2085+
name: 'C',
2086+
vapp_uuid: '',
2087+
fence_mode: 'BRIDGED'
2088+
}
2089+
],
2090+
vms: [
2091+
{
2092+
uuid: '',
2093+
name: 'redhat-as-01',
2094+
vapp_uuid: '',
2095+
operatingSystem: 'redhatGuest',
2096+
vnics: [
2097+
{
2098+
vnic_id: 0,
2099+
network_name: 'A',
2100+
is_connected: true
2101+
}
2102+
]
2103+
},
2104+
{
2105+
uuid: '',
2106+
name: 'debian-as-02',
2107+
vapp_uuid: '',
2108+
operatingSystem: 'debian8Guest',
2109+
vnics: [
2110+
{
2111+
vnic_id: 0,
2112+
network_name: 'B',
2113+
is_connected: true
2114+
}
2115+
]
2116+
},
2117+
{
2118+
uuid: '',
2119+
name: 'linux-as-03',
2120+
vapp_uuid: '',
2121+
operatingSystem: 'other24xLinux64Guest',
2122+
vnics: [
2123+
{
2124+
vnic_id: 1,
2125+
network_name: 'C',
2126+
is_connected: true
2127+
}
2128+
]
2129+
},
2130+
{
2131+
uuid: '',
2132+
name: 'arch-as-04',
2133+
vapp_uuid: '',
2134+
operatingSystem: 'btwIUseArch' as OperatingSystem,
2135+
vnics: [
2136+
{
2137+
vnic_id: 0,
2138+
network_name: '',
2139+
is_connected: false
2140+
}
2141+
]
2142+
}
2143+
]
20632144
}
20642145
];

src/components/connector.test.ts renamed to src/components/connection-icon.test.ts

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,31 @@
1-
import { ConnectorComponent } from './connector';
1+
import { ConnectionIconComponent } from './connection-icon';
22
import { VAPP_BACKGROUND_COLOR, CANVAS_BACKGROUND_COLOR } from '../constants/colors';
33
import * as paper from 'paper';
44

5-
describe('connector component', () => {
5+
describe('icon component', () => {
66

77
beforeAll(() => {
88
const canvasEl = document.createElement('canvas');
99
paper.setup(canvasEl);
10+
paper.settings.applyMatrix = false;
1011
});
1112

1213
test('basic properties', () => {
1314
const position = new paper.Point(0, 0);
1415
const defaultColor = new paper.Color(VAPP_BACKGROUND_COLOR);
15-
const connector = new ConnectorComponent();
16+
const connector = new ConnectionIconComponent();
1617
expect(connector.position.x).toBe(position.x);
1718
expect(connector.position.y).toBe(position.y);
18-
expect((connector.connector.fillColor as paper.Color).equals(defaultColor)).toBe(true);
19+
expect((connector.icon.fillColor as paper.Color).equals(defaultColor)).toBe(true);
1920
});
2021

2122
test('custom position and fill color', () => {
2223
const position = new paper.Point(-20, 30);
2324
const color = new paper.Color(CANVAS_BACKGROUND_COLOR);
24-
const connector = new ConnectorComponent(position, color);
25+
const connector = new ConnectionIconComponent(position, color);
2526
expect(connector.position.x).toBe(position.x);
2627
expect(connector.position.y).toBe(position.y);
27-
expect((connector.connector.fillColor as paper.Color).equals(color)).toBe(true);
28+
expect((connector.icon.fillColor as paper.Color).equals(color)).toBe(true);
2829
});
2930

3031
});

src/components/connector.ts renamed to src/components/connection-icon.ts

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,29 @@ import { CONNECTOR_RADIUS } from '../constants/dimensions';
44
import { DEFAULT_STROKE_STYLE } from '../constants/styles';
55

66
/**
7-
* Connector Visual Component.
7+
* Connection Icon Visual Component.
8+
* The larger (11px) circle icon with a thin grey stroke that represents connections. Usually used for VNICs that
9+
* are attached and connected to a vApp Network or for the vApp Network to Org-Vdc network connections.
810
*/
9-
export class ConnectorComponent extends paper.Group {
11+
export class ConnectionIconComponent extends paper.Group {
1012

11-
// the stroked circle item
12-
readonly _connector: paper.Path.Circle;
13+
// the stroked and 'unfilled' circle icon
14+
readonly _icon: paper.Path.Circle;
1315

1416
/**
15-
* Creates a new ConnectorComponent instance.
17+
* Creates a new ConnectionIconComponent instance.
1618
*
17-
* @param _point the location that the connector should be rendered at
19+
* @param _point the location that the icon should be rendered at
1820
* @param _fillColor the inner fill color that usually matches the background color of the element it is on top of
21+
* to make it seem 'unfilled'
1922
*/
2023
constructor(private _point: paper.Point = new paper.Point(0, 0),
2124
private _fillColor: paper.Color | string = VAPP_BACKGROUND_COLOR) {
2225
super();
23-
this.applyMatrix = false;
2426
this.position = _point;
2527
this.pivot = new paper.Point(0, 0);
2628

27-
this._connector = new paper.Path.Circle(
29+
this._icon = new paper.Path.Circle(
2830
{
2931
position: new paper.Point(0, 0),
3032
radius: CONNECTOR_RADIUS,
@@ -34,7 +36,7 @@ export class ConnectorComponent extends paper.Group {
3436
});
3537
}
3638

37-
get connector(): paper.Path.Circle {
38-
return this._connector;
39+
get icon(): paper.Path.Circle {
40+
return this._icon;
3941
}
4042
}

0 commit comments

Comments
 (0)