Added template, styling and component for v1.0.0

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.

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
+<om-globe
+  [rotationSpeed]="0.002"
+  [globeSize]="800"
+  [globeOptions]="{
+    markers: [{ location: [34.0522, -118.2437], size: 0.1 }],
+    baseColor: [0.5, 0.5, 1],
+    glowColor: [1, 0.5, 0.5],
+    markerColor: [0, 1, 0]
+  }"
+  styleClass="custom-globe-class"
+></om-globe>
+```
+
+## API
+
+```html
+<om-globe
+  [rotationSpeed]="rotationSpeed"
+  [globeSize]="globeSize"
+  [globeOptions]="globeOptions"
+  styleClass="your-custom-class"
+>
+</om-globe>
+```
+
+- 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
+<om-globe
+  [rotationSpeed]="0.01"
+  [globeSize]="500"
+  [globeOptions]="{
+    markers: [{ location: [51.5074, -0.1278], size: 0.1 }],
+    baseColor: [0.2, 0.2, 1],
+    markerColor: [1, 0.2, 0.2],
+    glowColor: [0.9, 0.9, 0.9]
+  }"
+  styleClass="globe-custom-style"
+></om-globe>
+```
+
+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.

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"
+  }
+}

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 ([email protected])",
+  "license": "MIT"
+}

src/lib/ngx-globe.component.html

@@ -0,0 +1,8 @@
+<div class="om-globe" [ngStyle]="style">
+    <div class="om-globe-background">
+        <canvas (pointerdown)="updatePointerInteraction($event.clientX - pointerInteractionMovement)"
+            (pointerup)="updatePointerInteraction(null)" (pointerout)="updatePointerInteraction(null)"
+            (mousemove)="updateMovement($event.clientX)" (touchmove)="updateMovement($event.touches[0].clientX)"
+            width="1000" height="1000" #globeCanvas></canvas>
+    </div>
+</div>

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;
+        }
+    }
+}

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<HTMLCanvasElement>;
+
+  @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
+  }
+}