Skip to content

Commit

Permalink
Merge branch 'main' of github.com:geo-engine/geoengine-ui into esg-in…
Browse files Browse the repository at this point in the history 
…dicator-service
  • Loading branch information
@michaelmattig
michaelmattig committed Nov 20, 2024
2 parents 50bb507 + baec536 commit 07b63f7
Show file tree
Hide file tree
Showing 37 changed files with 1,217 additions and 1,069 deletions.
8 changes: 4 additions & 4 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
"@angular/platform-browser-dynamic": "^18.2.4",
"@angular/router": "^18.2.4",
"@egjs/hammerjs": "^2.0.17",
"@geoengine/openapi-client": "0.0.14",
"@geoengine/openapi-client": "0.0.17",
"codemirror": "~5.65.16",
"d3": "~7.9.0",
"dagre": "~0.8.5",
Expand Down
66 changes: 1 addition & 65 deletions projects/common/src/lib/colors/colorizer.model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,9 @@ import {
LinearGradient as LinearGradientDict,
LogarithmicGradient as LogarithmicGradientDict,
PaletteColorizer as PaletteColorizerDict,
RgbaColorizer as RgbaColorizerDict,
} from '@geoengine/openapi-client';

export type ColorizerType = 'linearGradient' | 'logarithmicGradient' | 'palette' | 'rgba';
export type ColorizerType = 'linearGradient' | 'logarithmicGradient' | 'palette';

export abstract class Colorizer {
abstract readonly noDataColor: Color;
Expand All @@ -20,8 +19,6 @@ export abstract class Colorizer {
return LogarithmicGradient.fromLogarithmicGradientDict(dict);
} else if (dict.type === PaletteColorizer.TYPE_NAME) {
return PaletteColorizer.fromPaletteDict(dict);
} else if (dict.type === RgbaColorizer.TYPE_NAME) {
return RgbaColorizer.fromRgbaColorDict(dict);
}

throw new Error('Unimplemented or invalid colorizer');
Expand Down Expand Up @@ -443,64 +440,3 @@ export class PaletteColorizer extends Colorizer {
return this.colors.size;
}
}

export class RgbaColorizer extends Colorizer {
static readonly TYPE_NAME = 'rgba';

override noDataColor: Color = TRANSPARENT;

static fromRgbaColorDict(_dict: RgbaColorizerDict): RgbaColorizer {
return new RgbaColorizer();
}

override getColor(value: number | undefined): Color {
if (value === undefined) {
return this.noDataColor;
}

// `>>>` is unsigned u32 right shift
const valueU32 = value >>> 0;

const red = (valueU32 & 0xff_00_00_00) >>> 24;
const green = (valueU32 & 0x00_ff_00_00) >>> 16;
const blue = (valueU32 & 0x00_00_ff_00) >>> 8;
const alpha = (valueU32 & 0x00_00_00_ff) >>> 0;

return new Color({
r: red,
g: green,
b: blue,
a: alpha,
});
}
override getBreakpoints(): ColorBreakpoint[] {
return [];
}
override equals(other: Colorizer): boolean {
if (other instanceof RgbaColorizer) {
return true;
}

return false;
}
override clone(): Colorizer {
return new RgbaColorizer();
}
override toDict(): ColorizerDict {
return {
type: RgbaColorizer.TYPE_NAME,
} as RgbaColorizerDict;
}
override isGradient(): boolean {
return false;
}
override isDiscrete(): boolean {
return false;
}
override getColorAtIndex(_index: number): Color {
return this.noDataColor;
}
override getNumberOfColors(): number {
return 0;
}
}
36 changes: 20 additions & 16 deletions projects/common/src/lib/common.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ import {NgxMatSelectSearchModule} from 'ngx-mat-select-search';
import {AutocompleteSelectDirective} from './util/directives/autocomplete-select.directive';
import {CodeEditorComponent} from './util/components/code-editor.component';
import {OgrDatasetComponent} from './datasets/ogr-dataset/ogr-dataset.component';
import {RasterMultibandSymbologyEditorComponent} from './symbology/raster-multiband-symbology-editor/raster-multiband-symbology-editor.component';

export const MATERIAL_MODULES = [
MatAutocompleteModule,
Expand Down Expand Up @@ -103,46 +104,49 @@ export const MATERIAL_MODULES = [
];

const COMMON_COMPONENTS = [
AutocompleteSelectDirective,
CodeEditorComponent,
ColorAttributeInputComponent,
ColorBreakpointInputComponent,
ColorMapSelectorComponent,
ColorTableEditorComponent,
ColorParamEditorComponent,
ColorTableEditorComponent,
ConfirmationComponent,
LayerCollectionDropdownComponent,
LayerCollectionLayerComponent,
LayerCollectionLayerDetailsComponent,
LayerCollectionListComponent,
LayerCollectionNavigationComponent,
LineIconComponent,
LineIconComponent,
MeasurementComponent,
RasterGradientSymbologyEditorComponent,
RasterPaletteSymbologyEditorComponent,
RasterSymbologyEditorComponent,
VectorSymbologyEditorComponent,
NumberParamEditorComponent,
PercentileBreakpointSelectorComponent,
PercentileBreakpointSelectorComponent,
PointIconComponent,
LineIconComponent,
PolygonIconComponent,
RasterGradientSymbologyEditorComponent,
RasterIconComponent,
VegaViewerComponent,
RasterMultibandSymbologyEditorComponent,
RasterPaletteSymbologyEditorComponent,
RasterSymbologyEditorComponent,
TimeInputComponent,
TimeIntervalInputComponent,
PercentileBreakpointSelectorComponent,
LayerCollectionNavigationComponent,
LayerCollectionDropdownComponent,
LayerCollectionLayerComponent,
LayerCollectionLayerDetailsComponent,
LayerCollectionListComponent,
AutocompleteSelectDirective,
VectorSymbologyEditorComponent,
VegaViewerComponent,
];

const COMMON_PIPES = [
AsyncNumberSanitizer,
AsyncStringSanitizer,
AsyncValueDefault,
BreakpointToCssStringPipe,
BreakpointToCssStringPipe,
ColorBreakpointsCssGradientPipe,
ColorizerCssGradientPipe,
ColorizerCssGradientPipe,
RasterColorizerCssGradientPipe,
RgbaArrayCssGradientPipe,
BreakpointToCssStringPipe,
ColorizerCssGradientPipe,
];

const FXFLEX_LEGACY_DIRECTIVES = [FxFlexDirective, FxLayoutDirective, FxLayoutGapDirective, FxLayoutAlignDirective];
Expand Down
24 changes: 14 additions & 10 deletions ...er-collections/layer-collection-layer-details/layer-collection-layer-details.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from '@ang
import {LayerMetadata, RasterLayerMetadata, VectorLayerMetadata} from '../../layers/layer-metadata.model';
import {VectorDataTypes} from '../../operators/datatype.model';
import {Colorizer} from '../../colors/colorizer.model';
import {SingleBandRasterColorizer} from '../../symbology/symbology.model';

@Component({
selector: 'geoengine-layer-collection-layer-details',
Expand All @@ -15,16 +16,19 @@ export class LayerCollectionLayerDetailsComponent {

readonly VectorDataTypes = VectorDataTypes;

readonly rasterColorizer = Colorizer.fromDict({
type: 'linearGradient',
breakpoints: [
{value: 0, color: [122, 122, 122, 255]},
{value: 1, color: [255, 255, 255, 255]},
],
overColor: [255, 255, 255, 127],
underColor: [122, 122, 122, 127],
noDataColor: [0, 0, 0, 0],
});
readonly rasterColorizer = new SingleBandRasterColorizer(
0,
Colorizer.fromDict({
type: 'linearGradient',
breakpoints: [
{value: 0, color: [122, 122, 122, 255]},
{value: 1, color: [255, 255, 255, 255]},
],
overColor: [255, 255, 255, 127],
underColor: [122, 122, 122, 127],
noDataColor: [0, 0, 0, 0],
}),
);

constructor() {}

Expand Down
2 changes: 0 additions & 2 deletions projects/common/src/lib/layer-collections/layers.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,8 +129,6 @@ export class LayersService {

const metadata = await this.getWorkflowIdMetadata(workflowId);

console.log(metadata);

if (metadata instanceof VectorLayerMetadata) {
return new VectorLayer({
name: layer.name,
Expand Down
2 changes: 1 addition & 1 deletion projects/common/src/lib/layer-icons/raster-icon/raster-icon.component.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
113 changes: 57 additions & 56 deletions projects/common/src/lib/layer-icons/raster-icon/raster-icon.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import {ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChange} from '@angular/core';
import {ChangeDetectionStrategy, Component, computed, input, Input, OnChanges, OnInit, SimpleChange, untracked} from '@angular/core';
import {Color, TRANSPARENT} from '../../colors/color';
import {Colorizer, LinearGradient, RgbaColorizer} from '../../colors/colorizer.model';
import {Colorizer, LinearGradient} from '../../colors/colorizer.model';
import {ColorBreakpoint} from '../../colors/color-breakpoint.model';
import {RasterColorizer, SingleBandRasterColorizer} from '../../symbology/symbology.model';

/**
* a simple interface to model a cell in the raster icon
Expand All @@ -23,87 +24,87 @@ interface Cell {
styleUrls: ['./raster-icon.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class RasterIconComponent implements OnInit, OnChanges {
// number of cells in x and y direction
@Input() xCells!: number;
@Input() yCells!: number;
// the raster style used to color the icon
@Input() colorizer!: Colorizer;
export class RasterIconComponent {
/** number of cells in x direction */
readonly xCells = input.required<number>();
/** number of cells in y direction */
readonly yCells = input.required<number>();
/** the raster style used to color the icon */
readonly colorizer = input.required<RasterColorizer>();
/** This is the number of pixels used for the icon */
readonly cellSpace = input<number>(24);

/**
* the array of generated (colored and positioned) cells.
*/
cells: Array<Cell> = [];
/**
* This is the number of pixels used for the icon
*/
cellSpace = 24;
cells = computed<Array<Cell>>(() => {
const rasterColorizer = this.colorizer();
const cellSpace = this.cellSpace();
const xCells = this.xCells();
const yCells = this.yCells();

static RAINBOW_COLORIZER: Colorizer = new LinearGradient(
[
new ColorBreakpoint(0, Color.fromRgbaLike('#ff0000')),
new ColorBreakpoint(0, Color.fromRgbaLike('#ffa500')),
new ColorBreakpoint(0, Color.fromRgbaLike('#ffff00')),
new ColorBreakpoint(0, Color.fromRgbaLike('#008000')),
new ColorBreakpoint(0, Color.fromRgbaLike('#0000ff')),
new ColorBreakpoint(0, Color.fromRgbaLike('#4b0082')),
new ColorBreakpoint(0, Color.fromRgbaLike('#ee82ee')),
],
TRANSPARENT,
TRANSPARENT,
TRANSPARENT,
);
let colorizer: Colorizer;
if (rasterColorizer instanceof SingleBandRasterColorizer) {
colorizer = rasterColorizer.bandColorizer;
} else {
colorizer = RAINBOW_COLORIZER;
}

ngOnChanges(_changes: {[propertyName: string]: SimpleChange}): void {
this.generateCells(this.xCells, this.yCells);
}

ngOnInit(): void {
this.generateCells(this.xCells, this.yCells);
}
return RasterIconComponent.generateCells(colorizer, cellSpace, xCells, yCells);
});

/**
* generates an array of cell descriptors which are used by the template
*/
generateCells(xCells: number, yCells: number): void {
this.cells = new Array<Cell>(xCells * yCells);
for (let y = 0; y < this.yCells; y++) {
for (let x = 0; x < this.xCells; x++) {
const idx = this.xCells * y + x;
this.cells[idx] = {
xStart: (x * this.cellSpace) / this.xCells,
yStart: (y * this.cellSpace) / this.yCells,
xSize: this.cellSpace / this.xCells,
ySize: this.cellSpace / this.yCells,
colorString: Color.rgbaToCssString(this.cellColor(x, y)),
static generateCells(colorizer: Colorizer, cellSpace: number, xCells: number, yCells: number): Array<Cell> {
const cells = new Array<Cell>(xCells * yCells);
for (let y = 0; y < yCells; y++) {
for (let x = 0; x < xCells; x++) {
const idx = xCells * y + x;
cells[idx] = {
xStart: (x * cellSpace) / xCells,
yStart: (y * cellSpace) / yCells,
xSize: cellSpace / xCells,
ySize: cellSpace / yCells,
colorString: Color.rgbaToCssString(RasterIconComponent.cellColor(colorizer, xCells, yCells, x, y)),
};
}
}
return cells;
}

private cellColor(x: number, y: number): Color {
let colorizer = this.colorizer;

if (this.colorizer instanceof RgbaColorizer) {
colorizer = RasterIconComponent.RAINBOW_COLORIZER;
}

private static cellColor(colorizer: Colorizer, xCells: number, yCells: number, x: number, y: number): Color {
const validSymbology = colorizer && colorizer.getNumberOfColors() > 0;
if (!validSymbology) {
return Color.fromRgbaLike('#ff0000');
}
const numberOfCells = this.xCells * this.yCells;
const numberOfCells = xCells * yCells;
const numberOfColors = colorizer.getNumberOfColors();
const isGradient = colorizer.isGradient();
const scale = isGradient ? numberOfColors / (this.xCells + this.yCells - 1) : numberOfColors / numberOfCells;
const idx = y * this.xCells + x;
const scale = isGradient ? numberOfColors / (xCells + yCells - 1) : numberOfColors / numberOfCells;
const idx = y * xCells + x;
let colorIdx = 0;
if (numberOfColors === 2) {
colorIdx = y % 2 === 0 ? x % 2 : (x + 1) % 2;
} else {
const uidx = isGradient ? this.xCells - 1 - x + y : idx;
const uidx = isGradient ? xCells - 1 - x + y : idx;
colorIdx = Math.trunc(uidx * scale) % numberOfColors;
}
return colorizer.getColorAtIndex(colorIdx);
}
}

export const RAINBOW_COLORIZER: Colorizer = new LinearGradient(
[
new ColorBreakpoint(0, Color.fromRgbaLike('#ff0000')),
new ColorBreakpoint(0, Color.fromRgbaLike('#ffa500')),
new ColorBreakpoint(0, Color.fromRgbaLike('#ffff00')),
new ColorBreakpoint(0, Color.fromRgbaLike('#008000')),
new ColorBreakpoint(0, Color.fromRgbaLike('#0000ff')),
new ColorBreakpoint(0, Color.fromRgbaLike('#4b0082')),
new ColorBreakpoint(0, Color.fromRgbaLike('#ee82ee')),
],
TRANSPARENT,
TRANSPARENT,
TRANSPARENT,
);
Loading

0 comments on commit 07b63f7

Please sign in to comment.