Skip to content

Commit d8924f5

Browse files
author
cho
committed
updates
1 parent e54cc54 commit d8924f5

40 files changed

Lines changed: 941 additions & 537 deletions

‎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 globally in the demo, so child components behave relatively to their parent component.
46+
// disable on an individual basis by setting the item's applyMatrix property 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/small-connector.test.ts renamed to src/components/bullet-point-connection-icon.test.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
1-
import { SmallConnectorComponent } from './small-connector';
1+
import { BulletPointConnectionIconComponent } from './bullet-point-connection-icon';
22
import * as paper from 'paper';
33

4-
describe('small connector component', () => {
4+
describe('bullet point connection icon component', () => {
55

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

1112
test('basic properties', () => {
1213
const position = new paper.Point(0, 0);
13-
const connector = new SmallConnectorComponent();
14+
const connector = new BulletPointConnectionIconComponent();
1415
expect(connector.position.x).toBe(position.x);
1516
expect(connector.position.y).toBe(position.y);
1617
});
1718

1819
test('custom position', () => {
1920
const position = new paper.Point(42, -10);
20-
const connector = new SmallConnectorComponent(position);
21+
const connector = new BulletPointConnectionIconComponent(position);
2122
expect(connector.position.x).toBe(position.x);
2223
expect(connector.position.y).toBe(position.y);
2324
});

‎src/components/bullet-point-connection-icon.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import * as paper from 'paper';
2+
import { LIGHT_GREY } from '../constants/colors';
3+
import { SMALL_CONNECTOR_SIZE } from '../constants/dimensions';
4+
5+
/**
6+
* Bullet Point Connection Icon Visual Component.
7+
* The small (7px) grey filled circle icon that represents special types of connections or bullet points for labels.
8+
* Used for isolated vApp Network labels or at the end of vApp networks that have no attached VNICs.
9+
*/
10+
export class BulletPointConnectionIconComponent extends paper.Group {
11+
12+
// the small filled circle icon
13+
readonly _icon: paper.Path.Circle;
14+
15+
/**
16+
* Creates a new BulletPointConnectionIconComponent instance.
17+
*
18+
* @param _point the location that the bullet connection icon should be rendered at
19+
*/
20+
constructor(private _point: paper.Point = new paper.Point(0, 0)) {
21+
super();
22+
this.position = _point;
23+
this.pivot = new paper.Point(0, 0);
24+
25+
this._icon = new paper.Path.Circle({
26+
position: new paper.Point(0, 0),
27+
radius: SMALL_CONNECTOR_SIZE / 2,
28+
fillColor: LIGHT_GREY,
29+
parent: this
30+
});
31+
}
32+
33+
get icon(): paper.Path.Circle {
34+
return this._icon;
35+
}
36+
}

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('connection 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
});

0 commit comments

Comments
 (0)