From e7670b7e9b73c1a2180c34e3ec334c6e1913c78c Mon Sep 17 00:00:00 2001 From: Markus Date: Mon, 19 Aug 2024 00:03:32 +0200 Subject: [PATCH] Added template, styling and component for v1.0.0 --- LICENSE | 21 +++++ README.md | 129 ++++++++++++++++++++++++++ ng-package.json | 7 ++ package.json | 26 ++++++ src/lib/ngx-globe.component.html | 8 ++ src/lib/ngx-globe.component.scss | 25 ++++++ src/lib/ngx-globe.component.ts | 149 +++++++++++++++++++++++++++++++ src/lib/ngx-globe.types.ts | 46 ++++++++++ src/public-api.ts | 6 ++ tsconfig.lib.json | 15 ++++ tsconfig.lib.prod.json | 11 +++ tsconfig.spec.json | 15 ++++ 12 files changed, 458 insertions(+) create mode 100644 LICENSE create mode 100644 README.md create mode 100644 ng-package.json create mode 100644 package.json create mode 100644 src/lib/ngx-globe.component.html create mode 100644 src/lib/ngx-globe.component.scss create mode 100644 src/lib/ngx-globe.component.ts create mode 100644 src/lib/ngx-globe.types.ts create mode 100644 src/public-api.ts create mode 100644 tsconfig.lib.json create mode 100644 tsconfig.lib.prod.json create mode 100644 tsconfig.spec.json diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..b2f356b --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 Omnedia + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..dbf0c4e --- /dev/null +++ b/README.md @@ -0,0 +1,129 @@ +## ngx-globe + +`@omnedia/ngx-globe` is an Angular library that provides an interactive 3D globe visualization. The globe is rendered using the cobe library, allowing for smooth animations, rotation, and customizable markers. This component is highly configurable, making it ideal for displaying geographic data or adding a dynamic visual element to your Angular application. + +## Features + +- Interactive 3D globe visualization with customizable rotation and markers. +- Customizable globe size, colors, and appearance. +- Smooth animation using the cobe library for rendering and rotation. +- Lightweight and easy to integrate as a standalone component. + +## Installation + +Install the library and its peer dependency using npm: + +```bash +npm install @omnedia/ngx-globe +npm install cobe --save +``` + +cobe is required as a peer dependency for this library to function properly. + +## Usage + +Import the `NgxGlobeComponent` in your Angular module or component: + +```typescript +import { NgxGlobeComponent } from '@omnedia/ngx-globe'; + +@Component({ + ... + imports: [ + ... + NgxGlobeComponent, + ], + ... +}) +``` + +Use the component in your template: + +```html + +``` + +## API + +```html + + +``` + +- rotationSpeed (optional): The speed of the globe's rotation. Defaults to 0.005. +- globeSize (optional): The size of the globe in pixels. Defaults to 600px. +- globeOptions (optional): An object containing options for customizing the globe's appearance, such as marker locations, colors, and brightness. +- styleClass (optional): A custom CSS class to apply to the globe's wrapper element. + +## Example + +```html + +``` + +This will render a globe with a custom size, rotation speed, and marker at the specified location (London, UK). + +## Globe Options + +The globeOptions input allows you to configure various aspects of the globe's appearance and behavior: + +- `markers`: An array of objects defining locations and sizes of markers on the globe. Each marker should have a location (an array of latitude and longitude) and a size (a number). +- `baseColor`: The color of the globe in the form of an RGB array (e.g., [1, 1, 1] for white). +- `glowColor`: The color of the globe's glow, also an RGB array. +- `markerColor`: The color of the markers on the globe, also an RGB array. +- `mapSamples`: Number of samples for the texture mapping. +- `mapBrightness`: Brightness of the map texture. +- `diffuse`: The intensity of the globe's diffuse lighting. + +## Dependencies + +This library uses the cobe npm package as a peer dependency to handle the rendering of the globe. Make sure to install it alongside this library for proper functionality. + +```bash +npm install cobe --save +``` + +## Styling + +To customize the appearance of the globe or container, use the styleClass input to apply your own CSS classes. + +```css +.globe-custom-style { + background-color: #000; + border-radius: 50%; + box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); +} +``` + +## Contributing + +Contributions are welcome. Please submit a pull request or open an issue to discuss your ideas. + +## License + +This project is licensed under the MIT License. \ No newline at end of file diff --git a/ng-package.json b/ng-package.json new file mode 100644 index 0000000..72bdbc3 --- /dev/null +++ b/ng-package.json @@ -0,0 +1,7 @@ +{ + "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../dist/ngx-globe", + "lib": { + "entryFile": "src/public-api.ts" + } +} \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..336b128 --- /dev/null +++ b/package.json @@ -0,0 +1,26 @@ +{ + "name": "@omnedia/ngx-globe", + "description": "A simple component library to create a container with an animated and interactive globe.", + "version": "1.0.0", + "peerDependencies": { + "@angular/common": "^18.2.0", + "@angular/core": "^18.2.0", + "cobe": "^0.6.3" + }, + "dependencies": { + "tslib": "^2.3.0" + }, + "sideEffects": false, + "keywords": [ + "npm", + "globe", + "3d", + "interactive", + "animation" + ], + "repository": { + "url": "https://github.com/omnedia/ngx-globe" + }, + "author": "Markus Block (markus.block@omnedia.com)", + "license": "MIT" +} diff --git a/src/lib/ngx-globe.component.html b/src/lib/ngx-globe.component.html new file mode 100644 index 0000000..3f114a8 --- /dev/null +++ b/src/lib/ngx-globe.component.html @@ -0,0 +1,8 @@ +
+
+ +
+
\ No newline at end of file diff --git a/src/lib/ngx-globe.component.scss b/src/lib/ngx-globe.component.scss new file mode 100644 index 0000000..d7bcaea --- /dev/null +++ b/src/lib/ngx-globe.component.scss @@ -0,0 +1,25 @@ +.om-globe { + --globe-size: 600px; + position: relative; + width: var(--globe-size); + height: var(--globe-size); + overflow: hidden; + + .om-globe-background { + position: absolute; + width: 100%; + max-width: var(--globe-size); + aspect-ratio: 1/1; + margin-left: auto; + margin-right: auto; + inset: 0; + + canvas { + width: 100%; + height: 100%; + contain: layout paint size; + opacity: 1; + cursor: grab; + } + } +} \ No newline at end of file diff --git a/src/lib/ngx-globe.component.ts b/src/lib/ngx-globe.component.ts new file mode 100644 index 0000000..912f3af --- /dev/null +++ b/src/lib/ngx-globe.component.ts @@ -0,0 +1,149 @@ +import { CommonModule } from '@angular/common'; +import { AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild } from '@angular/core'; +import { COBEOptionsPart, GlobeOptions } from './ngx-globe.types'; +import createGlobe from 'cobe'; +import Phenomenon from 'phenomenon'; + +@Component({ + selector: 'om-globe', + standalone: true, + imports: [CommonModule], + templateUrl: "./ngx-globe.component.html", + styleUrl: "./ngx-globe.component.scss", +}) +export class NgxGlobeComponent implements AfterViewInit, OnDestroy { + @ViewChild('globeCanvas') + globeCanvas!: ElementRef; + + @Input("styleClass") + styleClass?: string; + + @Input("rotationSpeed") + rotationSpeed = 0.005; + + @Input("globeOptions") + set globeOptions(options: GlobeOptions) { + this.globeSize = options.width ?? this.globeSize; + this.setGlobeOptions(options); + + if (this.globeInitialized) { + this.initGlobe(); + } + } + + @Input("globeSize") + set globeCanvasSize(size: number) { + this.globeSize = size; + this.cobeOptions.width = this.globeSize; + this.cobeOptions.height = this.globeSize; + this.style["--globe-size"] = size + 'px'; + + if (this.globeInitialized) { + this.initGlobe(); + } + } + + style: any = {}; + + private globeSize = 600; + + private globeInitialized = false; + + private globe?: Phenomenon; + + cobeOptions: COBEOptionsPart = { + devicePixelRatio: 2, + width: this.globeSize, + height: this.globeSize, + phi: 0, + theta: 0.3, + dark: 0, + diffuse: 0.4, + scale: 1, + mapSamples: 16000, + mapBrightness: 1.2, + baseColor: [1, 1, 1], + markerColor: [251 / 255, 100 / 255, 21 / 255], + glowColor: [1, 1, 1], + offset: [0, 0], + markers: [ + { location: [14.5995, 120.9842], size: 0.03 }, + { location: [19.076, 72.8777], size: 0.1 }, + { location: [23.8103, 90.4125], size: 0.05 }, + { location: [30.0444, 31.2357], size: 0.07 }, + { location: [39.9042, 116.4074], size: 0.08 }, + { location: [-23.5505, -46.6333], size: 0.1 }, + { location: [19.4326, -99.1332], size: 0.1 }, + { location: [40.7128, -74.006], size: 0.1 }, + { location: [34.6937, 135.5022], size: 0.05 }, + { location: [41.0082, 28.9784], size: 0.06 }, + ], + }; + + private pointerInteracting: any = null; + pointerInteractionMovement = 0; + private globeRotation = 0; + + ngAfterViewInit(): void { + this.initGlobe(); + } + + ngOnDestroy(): void { + this.globe?.destroy(); + } + + initGlobe(): void { + let phi = this.cobeOptions.phi; + let cobeOptions = { + ...this.cobeOptions, + onRender: (state: any) => { + if (!this.pointerInteracting) { + phi += this.rotationSpeed; + } + + state.phi = phi + this.globeRotation + }, + } + + this.globe = createGlobe(this.globeCanvas.nativeElement, cobeOptions); + + this.globeInitialized = true; + + this.globeCanvas.nativeElement.width = this.globeSize; + this.globeCanvas.nativeElement.height = this.globeSize; + } + + updatePointerInteraction(value: any): void { + this.pointerInteracting = value; + this.globeCanvas.nativeElement.style.cursor = value ? "grabbing" : "grab"; + }; + + updateMovement(clientX: any): void { + if (this.pointerInteracting !== null) { + const delta = clientX - this.pointerInteracting; + this.pointerInteractionMovement = delta; + this.globeRotation = delta / 200; + } + }; + + setGlobeOptions(options: GlobeOptions): void { + this.cobeOptions.width = options.width ?? this.cobeOptions.width + this.cobeOptions.height = options.height ?? this.cobeOptions.height + this.cobeOptions.phi = options.phi ?? this.cobeOptions.phi + this.cobeOptions.theta = options.theta ?? this.cobeOptions.theta + this.cobeOptions.mapSamples = options.mapSamples ?? this.cobeOptions.mapSamples + this.cobeOptions.mapBrightness = options.mapBrightness ?? this.cobeOptions.mapBrightness + this.cobeOptions.mapBaseBrightness = options.mapBaseBrightness ?? this.cobeOptions.mapBaseBrightness + this.cobeOptions.baseColor = options.baseColor ?? this.cobeOptions.baseColor + this.cobeOptions.markerColor = options.markerColor ?? this.cobeOptions.markerColor + this.cobeOptions.glowColor = options.glowColor ?? this.cobeOptions.glowColor + this.cobeOptions.markers = options.markers ?? this.cobeOptions.markers + this.cobeOptions.diffuse = options.diffuse ?? this.cobeOptions.diffuse + this.cobeOptions.devicePixelRatio = options.devicePixelRatio ?? this.cobeOptions.devicePixelRatio + this.cobeOptions.dark = options.dark ?? this.cobeOptions.dark + this.cobeOptions.opacity = options.opacity ?? this.cobeOptions.opacity + this.cobeOptions.offset = options.offset ?? this.cobeOptions.offset + this.cobeOptions.scale = options.scale ?? this.cobeOptions.scale + this.cobeOptions.context = options.context ?? this.cobeOptions.context + } +} diff --git a/src/lib/ngx-globe.types.ts b/src/lib/ngx-globe.types.ts new file mode 100644 index 0000000..12bbad4 --- /dev/null +++ b/src/lib/ngx-globe.types.ts @@ -0,0 +1,46 @@ +import { Marker } from "cobe"; + +export type GlobeOptions = { + width?: number; + height?: number; + phi?: number; + theta?: number; + mapSamples?: number; + mapBrightness?: number; + + mapBaseBrightness?: number; + + baseColor?: [number, number, number]; + markerColor?: [number, number, number]; + glowColor?: [number, number, number]; + markers?: Marker[]; + diffuse?: number; + devicePixelRatio?: number; + dark?: number; + + opacity?: number; + offset?: [number, number]; + scale?: number; + context?: WebGLContextAttributes; +} + +export type COBEOptionsPart = { + width: number; + height: number; + phi: number; + theta: number; + mapSamples: number; + mapBrightness: number; + mapBaseBrightness?: number; + baseColor: [number, number, number]; + markerColor: [number, number, number]; + glowColor: [number, number, number]; + markers: Marker[]; + diffuse: number; + devicePixelRatio: number; + dark: number; + opacity?: number; + offset?: [number, number]; + scale?: number; + context?: WebGLContextAttributes; +} \ No newline at end of file diff --git a/src/public-api.ts b/src/public-api.ts new file mode 100644 index 0000000..cf52774 --- /dev/null +++ b/src/public-api.ts @@ -0,0 +1,6 @@ +/* + * Public API Surface of ngx-globe + */ + +export * from './lib/ngx-globe.component'; +export * from './lib/ngx-globe.types'; diff --git a/tsconfig.lib.json b/tsconfig.lib.json new file mode 100644 index 0000000..2359bf6 --- /dev/null +++ b/tsconfig.lib.json @@ -0,0 +1,15 @@ +/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ +/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/lib", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": [ + "**/*.spec.ts" + ] +} diff --git a/tsconfig.lib.prod.json b/tsconfig.lib.prod.json new file mode 100644 index 0000000..9215caa --- /dev/null +++ b/tsconfig.lib.prod.json @@ -0,0 +1,11 @@ +/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ +/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ +{ + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } +} diff --git a/tsconfig.spec.json b/tsconfig.spec.json new file mode 100644 index 0000000..254686d --- /dev/null +++ b/tsconfig.spec.json @@ -0,0 +1,15 @@ +/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ +/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/spec", + "types": [ + "jasmine" + ] + }, + "include": [ + "**/*.spec.ts", + "**/*.d.ts" + ] +}