Skip to content

Commit

Permalink
Merge pull request #1 from acaprojects/feature/refactor
Browse files Browse the repository at this point in the history
Feature/refactor
  • Loading branch information
MrYuion authored Nov 9, 2020
2 parents f9263e6 + 06a4d41 commit 0be18e8
Show file tree
Hide file tree
Showing 63 changed files with 2,130 additions and 1,727 deletions.
5 changes: 3 additions & 2 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,8 @@
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "demo:build"
"browserTarget": "demo:build",
"host": "0.0.0.0"
},
"configurations": {
"production": {
Expand Down Expand Up @@ -149,4 +150,4 @@
}
}},
"defaultProject": "library"
}
}
586 changes: 406 additions & 180 deletions package-lock.json

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
"gulp": "^4.0.2",
"gulp-string-replace": "^1.1.2",
"gulp-util": "^3.0.8",
"hammerjs": "^2.0.8",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
Expand All @@ -54,7 +55,7 @@
"karma-jasmine-html-reporter": "^1.4.0",
"ng-packagr": "^5.1.0",
"protractor": "~5.4.0",
"semantic-release": "^15.13.12",
"semantic-release": "^17.0.2",
"ts-node": "^7.0.1",
"tsickle": "^0.35.0",
"tslint": "~5.15.0",
Expand Down
34 changes: 19 additions & 15 deletions projects/demo/src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,29 +1,33 @@
<div class="app">
<div class="test" *ngIf="model.map">
<div class="map">
<a-map
[(zoom)]="model.zoom"
[(center)]="model.center"
[src]="model.map.src"
[listeners]="model.map.listeners"
[cssStyles]="model.map.styles"
[features]="model.map.poi"
[focus]="model.map.focus"
>Loading Map...</a-map
>
<div class="map-display" *ngIf="model.map">
<a-map
[(zoom)]="model.zoom"
[(center)]="model.center"
[src]="model.map.src"
[listeners]="model.map.listeners"
[css]="model.map.styles"
[features]="model.map.poi"
[text]="model.map.text"
[focus]="model.map.focus"
(events)="log($event)"
>Loading Map...</a-map
>
<div class="display">
<div class="item">{{ model.zoom * 100 }}%</div>
<div class="item">{{ model.center | json }}</div>
</div>
</div>
<div class="controls">
<button (click)="toggleMap()">Toggle Map</button>
<button (click)="togglePin()">
{{ model.show.pin ? 'Remove pin' : 'Add pin' }}
</button>
<button (click)="toggleRadius()">
{{ model.show.radius ? 'Remove radius' : 'Add radius' }}</button
><br />
{{ model.zoom * 100 }}%<br />
<button (click)="zoom(10)">Zoom in</button>
<button (click)="zoom(-10)">Zoom Out</button><br />
{{ model.center | json }}<br />
<button (click)="model.center = { x: 0.5, y: 0.5 }">
<button (click)="model.center = { x: 0.5, y: 0.5 }; model.zoom = 1">
Reset Position
</button>
</div>
Expand Down
17 changes: 17 additions & 0 deletions projects/demo/src/app/app.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -83,3 +83,20 @@ button {
margin: .25rem;
flex: 1
}

.map svg {
* {
shape-rendering: optimizeSpeed;
}
}

.map-outlet {
&.zooming {
svg {
[id*="plant"],
[id*="chair"] {
display: none;
}
}
}
}
45 changes: 29 additions & 16 deletions projects/demo/src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Component, ViewEncapsulation } from '@angular/core';

import { MapRangeComponent } from 'projects/library/src/lib/components/overlays/map-range/map-range.component';
import { MapPinComponent } from 'projects/library/src/lib/components/overlays/map-pin/map-pin.component';
import { MapRadiusComponent } from 'projects/library/src/lib/components/overlays/map-radius/map-radius.component';

import * as dayjs from 'dayjs';

Expand All @@ -18,7 +18,15 @@ export class AppComponent {
this.updatePointsOfInterest();
this.model.show = {};
this.model.map = {};
this.model.map.src = 'assets/australia.svg';
this.model.map.src = 'assets/level_10.svg';
this.model.map.text = [
{ id: 'area-10.06-status', content: 'Meeting Room\n10.06' },
{ id: 'area-10.05-status', content: 'Meeting Room\n10.05' },
{ id: 'scanner-2', content: 'Scanner', show_after_zoom: 2, styles: { 'color': 'red' } }
];
this.model.map.listeners = [
{ id: 'area-10.06-status', event: 'click', callback: () => console.log('Clicked: 10.06') }
];
this.model.zoom = 1;
this.model.center = { x: 0.25, y: 0.75 };
this.model.count = Array(3).fill(0);
Expand All @@ -36,7 +44,7 @@ export class AppComponent {

public toggleMap() {
this.model.map.src =
this.model.map.src.indexOf('180') >= 0 ? 'assets/level_01.svg' : 'assets/australia-180-rot.svg';
this.model.map.src.indexOf('180') >= 0 ? 'assets/level_10.svg' : 'assets/australia-180-rot.svg';
}

public zoom(value: number) {
Expand All @@ -49,53 +57,58 @@ export class AppComponent {
this.model.zoom = +(this.model.zoom * (1 / (1 - value / 100))).toFixed(5);
if (this.model.zoom < 1) {
this.model.zoom = 1;
}
}
}
}

public updatePointsOfInterest() {
this.model.map.poi = [];
if (this.model.show.radius) {
this.model.map.poi.push({
id: 'Nyada',
coordinates: { x: 3000, y: 3000 },
content: MapRangeComponent,
data: { text: `I'm somewhere in this circle`, diameter: 10 }
content: MapRadiusComponent,
data: { text: `I'm somewhere in this circle`, diameter: 5 }
});
}
if (this.model.show.pin) {
this.model.fixed = !this.model.fixed;
const fixed = this.model.fixed;
this.model.map.poi.push({
id: fixed ? 'AU-NSW' : 'Nyada',
coordinates: fixed ? null : { x: 5000, y: 7500 },
id: fixed ? 'area-10.05-status' : undefined,
coordinates: fixed ? null : { x: 7500, y: 1000 },
content: MapPinComponent,
data: {
text: fixed ? 'NSW is here' : `I'm currently round here`
}
});
const focus: any = {};
let focus: any = null;
if (fixed) {
focus.id = 'AU-NSW';
focus = 'area-10.05-status';
} else {
focus.coordinates = { x: 5000, y: 7500 };
focus = { x: 0.75, y: 0.25 };
}
this.model.map.focus = focus;
this.model.map.styles = {
'#AU-NSW': { fill: ['#123456', '#345612', '#561234'][Math.floor(Math.random() * 3)] },
'#AU.NT:hover': {
fill: ['#654321', '#436521', '#216543'][Math.floor(Math.random() * 3)],
'#area-10.05-status': {
fill: ['#123456', '#345612', '#561234'][Math.floor(Math.random() * 3)],
transition: 'fill 200ms'
},
'#area-10.05-status:hover': {
fill: ['#654321', '#436521', '#216543'][Math.floor(Math.random() * 3)]
}
};
}
if (this.model.show.hover) {
this.model.map.poi.push({
id: 'AU.NT',
id: 'area-10.05-status',
coordinates: null,
content: MapPinComponent,
data: { text: 'This state is WA' }
});
}
}

log(content) {
console.log('Map Event:', content);
}
}
2 changes: 2 additions & 0 deletions projects/demo/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AInteractiveMapModule } from 'projects/library/src/public-api';

import 'hammerjs';

@NgModule({
declarations: [
AppComponent
Expand Down
1 change: 1 addition & 0 deletions projects/demo/src/assets/level_10.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions projects/library/src/lib/classes/map-render-feature.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
// import { MapRenderFeature } from './map-render-feature';

// describe('MapFeature', () => {
// it('should create an instance', () => {
// expect(new MapRenderFeature(null, null)).toBeTruthy();
// });
// });
57 changes: 57 additions & 0 deletions projects/library/src/lib/classes/map-render-feature.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { TemplateRef, Type } from '@angular/core';

import { Point, RenderFeature } from '../helpers/type.helpers';
import { RenderableMap } from './renderable-map';
import { log } from '../settings';

export class MapRenderFeature {
/** ID of an element to render */
public readonly id: string;
/** Coordinates with the map */
public readonly coordinates: Point;
/** Content to render on the map */
public readonly content: RenderFeature;
/** Data to pass to the content */
public readonly data: any;
/** Data to pass to the content */
public readonly show_after_zoom: number;

/** Type of content being rendered by this feature */
public get content_type(): 'component' | 'template' | 'html' {
return this.content instanceof Type
? 'component'
: this.content instanceof TemplateRef
? 'template'
: 'html';
}

constructor(data: { [name: string]: any }, map: RenderableMap) {
const coordinates = this.processCoordinates(data.id || data.coordinates, map);
this.id = data.id || JSON.stringify(coordinates);
this.coordinates = coordinates;
this.content = data.content;
this.data = data.data || data.styles;
this.show_after_zoom = data.show_after_zoom;
}

private processCoordinates(data: string | Point, map: RenderableMap): Point {
if (!map) { return; }
if (typeof data === 'string') {
const element = map.element_map[data];
if (element) {
return element.coordinates;
} else {
log('MAP', `No element for id "${data}"`, undefined, 'warn');
}
} else {
if (data.x <= 1 && data.x >= 0 && data.y <= 1 && data.y >= 0) {
return data;
} else {
return {
x: data.x / 10000,
y: data.y / (10000 * map.dimensions.y)
};
}
}
}
}
7 changes: 7 additions & 0 deletions projects/library/src/lib/classes/map-styles.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
// import { MapStyles } from './map-styles';

// describe('MapStyles', () => {
// it('should create an instance', () => {
// expect(new MapStyles({}, null)).toBeTruthy();
// });
// });
63 changes: 63 additions & 0 deletions projects/library/src/lib/classes/map-styles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { HashMap } from '../helpers/type.helpers';
import { cleanCssSelector } from '../helpers/map.helpers';
import { RenderableMap } from './renderable-map';

export class MapStyles {
/** Mapping of CSS selectors to override CSS properties */
public readonly styles: HashMap<HashMap<string>>;
/** CSS string that can be injected into the DOM */
private _css: string;
/** Element rendering the map styles */
private _element: HTMLStyleElement;
/** CSS string that can be injected into the DOM */
public get css(): string {
return this._css;
}

constructor(styles: HashMap<HashMap<string>>, private map: RenderableMap) {
this.styles = styles;
this._css = this._processStyles(styles);
this._renderStyleElement(this.css);
}

/** Cleanup map styles */
public destroy() {
if (this._element) {
this._element.parentElement.removeChild(this._element);
delete this._element;
this._element = null;
}
}

/**
* Convert style map into CSS string
* @param styles Mapping of CSS selectors to override CSS properties
*/
private _processStyles(styles: HashMap<HashMap<string>>): string {
let css = '';
for (const selector in this.styles) {
if (this.styles.hasOwnProperty(selector)) {
let style = `.map[id="${this.map ? this.map.id : 'map-0'}"] ${cleanCssSelector(selector)} { `;
for (const property in this.styles[selector]) {
if (this.styles[selector][property]) {
style += `${property}: ${this.styles[selector][property]}; `;
}
}
style += '} ';
css += style;
}
}
return css;
}

/** Render Style Element on the DOM */
private _renderStyleElement(css: string) {
if (this.map) {
const element = document.createElement('style');
element.id = `placeos-${this.map.id}`;
element.innerHTML = css;
document.head.appendChild(element);
this._element = element;
}
}
}
7 changes: 7 additions & 0 deletions projects/library/src/lib/classes/renderable-map.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
// import { RenderableMap } from './renderable-map';

// describe('RenderableMap', () => {
// it('should create an instance', () => {
// expect(new RenderableMap('', '')).toBeTruthy();
// });
// });
Loading

0 comments on commit 0be18e8

Please sign in to comment.