@obliczeniowo/elementary
Version:
Library made in Angular version 19
153 lines (147 loc) • 11 kB
JavaScript
import * as i0 from '@angular/core';
import { input, EventEmitter, computed, Component, ChangeDetectionStrategy, Output, HostListener, model, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ColorRGB, Point2D, ColorHSV } from '@obliczeniowo/elementary/classes';
class HexColorComponent {
/** hex element ray */
ray = input(10);
/** x pos can be css style like calc(50% + 10px) */
x = input(0);
/** y pos can be css style like calc(50% + 10px) */
y = input(0);
/** fill color as ColorRGB object or string color as one of:
* #ffffff
* rgb(255, 255, 255)
* rgba(255, 255, 255, 0.5)
* named color format, for example: red, blue, green ... */
fill = input(new ColorRGB(0, 0, 0, 255));
strokeWidth = input(0);
/** stroke color as ColorRGB object or string color as one of:
* #ffffff
* rgb(255, 255, 255)
* rgba(255, 255, 255, 0.5)
* named color format, for example: red, blue, green ... */
strokeColor = input(new ColorRGB(0, 0, 0, 0));
clicked = new EventEmitter();
fillHover = computed(() => typeof this.fill() === 'string' && this.fill() || this.fill().multiply(0.8));
hover = false;
points = computed(() => this.recalc());
onClick() {
this.clicked.emit({
color: this.fill(),
x: this.x(),
y: this.y()
});
}
recalc() {
const n = 6;
const offset = Math.PI / n;
return new Array(n).fill(0).map((_, index) => {
const angle = index * Math.PI / (n / 2) + offset;
return [
this.ray() * Math.sin(angle),
this.ray() * Math.cos(angle)
].join(',');
}).join(' ');
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: HexColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: HexColorComponent, isStandalone: false, selector: "g[obl-hex-color]", inputs: { ray: { classPropertyName: "ray", publicName: "ray", isSignal: true, isRequired: false, transformFunction: null }, x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: false, transformFunction: null }, y: { classPropertyName: "y", publicName: "y", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, strokeColor: { classPropertyName: "strokeColor", publicName: "strokeColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0, template: "<svg:polygon\r\n [attr.points]=\"points()\"\r\n [style.transform]=\"'translate(' + x() + ', ' + y() + ')'\"\r\n [style.fill]=\"hover ? fillHover().toString() : fill().toString()\"\r\n [style.stroke]=\"strokeColor().toString()\"\r\n [style.strokeWidth]=\"strokeWidth()\"\r\n (mouseenter)=\"hover = true\"\r\n (mouseleave)=\"hover = false\"\r\n class=\"clickable\"\r\n></svg:polygon>\r\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: HexColorComponent, decorators: [{
type: Component,
args: [{ selector: 'g[obl-hex-color]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<svg:polygon\r\n [attr.points]=\"points()\"\r\n [style.transform]=\"'translate(' + x() + ', ' + y() + ')'\"\r\n [style.fill]=\"hover ? fillHover().toString() : fill().toString()\"\r\n [style.stroke]=\"strokeColor().toString()\"\r\n [style.strokeWidth]=\"strokeWidth()\"\r\n (mouseenter)=\"hover = true\"\r\n (mouseleave)=\"hover = false\"\r\n class=\"clickable\"\r\n></svg:polygon>\r\n" }]
}], propDecorators: { clicked: [{
type: Output
}], onClick: [{
type: HostListener,
args: ['click']
}] } });
class HexColorsComponent {
/** hex element ray */
ray = input(10, {
transform: (value) => value < 5 ? 5 : value
});
/** Number of levels */
rounds = input(6, {
transform: (rounds) => rounds < 1 ? 1 : rounds
});
/** color to select if exist on palette of colors */
color = model('#ffffff');
width = computed(() => (1.5 * (this.rounds() - 1) + 1) * this.ray() * 2 + 6);
height = computed(() => (this.h * (this.rounds() - 1) * 2 + this.h) * this.ray() * 2 + 6);
h = Math.sqrt(3) / 2;
rayTranslate = new Point2D(0, this.h * 2);
move = new Point2D(1.5, -this.h);
elements = computed(() => {
const elements = [];
elements.push({
pos: new Point2D(),
color: new ColorRGB(255, 255, 255, 255)
});
for (let dAngle = 0; dAngle < 6; dAngle++) {
const angle = Math.PI / 3 * dAngle;
for (let dRay = 1; dRay < this.rounds(); dRay++) {
const total = 6 * dRay;
const ray = this.rayTranslate.multiply(this.ray() * dRay).rotate(angle);
for (let dMove = 0; dMove < dRay; dMove++) {
const move = this.move.multiply(this.ray() * dMove).rotate(angle);
elements.push({
pos: ray.add(move),
color: (ColorHSV.createColorHSV(360 * (1 - (dAngle * dRay - dMove) / total), dRay / this.rounds(), 255)).convertToRGB()
});
}
}
}
return elements;
});
strokeColor = new ColorRGB(255, 255, 255, 255);
selected = computed(() => {
if (this.elements) {
const found = this.elements().find(c => c.color.toString() === this.color());
if (found) {
return {
x: `calc(50% + ${found.pos.x}px)`,
y: `calc(50% + ${found.pos.y}px)`,
color: found.color
};
}
}
return undefined;
});
selectedColor = new ColorRGB(0, 0, 0);
onChange(selected) {
this.color.set(selected.color.toString());
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: HexColorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: HexColorsComponent, isStandalone: false, selector: "obl-hex-colors", inputs: { ray: { classPropertyName: "ray", publicName: "ray", isSignal: true, isRequired: false, transformFunction: null }, rounds: { classPropertyName: "rounds", publicName: "rounds", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange" }, ngImport: i0, template: "<svg [attr.width]=\"width()\" [attr.height]=\"height()\">\r\n @for (element of elements(); track $index) {\r\n <g\r\n obl-hex-color\r\n [x]=\"'calc(50% + ' + element.pos.x + 'px)'\"\r\n [y]=\"'calc(50% + ' + element.pos.y + 'px)'\"\r\n [fill]=\"element.color\"\r\n [strokeColor]=\"strokeColor\"\r\n [strokeWidth]=\"1\"\r\n [ray]=\"ray()\"\r\n (clicked)=\"onChange($event)\"\r\n ></g>\r\n }\r\n\r\n @if (selected()) {\r\n <g\r\n obl-hex-color\r\n [ray]=\"ray() + 1\"\r\n [x]=\"selected()!.x\"\r\n [y]=\"selected()!.y\"\r\n [fill]=\"'none'\"\r\n [strokeWidth]=\"6\"\r\n [strokeColor]=\"'white'\"\r\n ></g>\r\n <g\r\n obl-hex-color\r\n [ray]=\"ray()\"\r\n [x]=\"selected()!.x\"\r\n [y]=\"selected()!.y\"\r\n [fill]=\"'none'\"\r\n [strokeWidth]=\"1\"\r\n [strokeColor]=\"selectedColor\"\r\n ></g>\r\n }\r\n</svg>\r\n", styles: [""], dependencies: [{ kind: "component", type: HexColorComponent, selector: "g[obl-hex-color]", inputs: ["ray", "x", "y", "fill", "strokeWidth", "strokeColor"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: HexColorsComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-hex-colors', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<svg [attr.width]=\"width()\" [attr.height]=\"height()\">\r\n @for (element of elements(); track $index) {\r\n <g\r\n obl-hex-color\r\n [x]=\"'calc(50% + ' + element.pos.x + 'px)'\"\r\n [y]=\"'calc(50% + ' + element.pos.y + 'px)'\"\r\n [fill]=\"element.color\"\r\n [strokeColor]=\"strokeColor\"\r\n [strokeWidth]=\"1\"\r\n [ray]=\"ray()\"\r\n (clicked)=\"onChange($event)\"\r\n ></g>\r\n }\r\n\r\n @if (selected()) {\r\n <g\r\n obl-hex-color\r\n [ray]=\"ray() + 1\"\r\n [x]=\"selected()!.x\"\r\n [y]=\"selected()!.y\"\r\n [fill]=\"'none'\"\r\n [strokeWidth]=\"6\"\r\n [strokeColor]=\"'white'\"\r\n ></g>\r\n <g\r\n obl-hex-color\r\n [ray]=\"ray()\"\r\n [x]=\"selected()!.x\"\r\n [y]=\"selected()!.y\"\r\n [fill]=\"'none'\"\r\n [strokeWidth]=\"1\"\r\n [strokeColor]=\"selectedColor\"\r\n ></g>\r\n }\r\n</svg>\r\n" }]
}] });
class HexColorModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: HexColorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: HexColorModule, declarations: [HexColorComponent,
HexColorsComponent], imports: [CommonModule], exports: [HexColorsComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: HexColorModule, imports: [CommonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: HexColorModule, decorators: [{
type: NgModule,
args: [{
declarations: [
HexColorComponent,
HexColorsComponent
],
imports: [
CommonModule,
],
exports: [
HexColorsComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { HexColorModule, HexColorsComponent };
//# sourceMappingURL=obliczeniowo-elementary-hex-color.mjs.map