UNPKG

@obliczeniowo/elementary

Version:
1 lines 13.2 kB
{"version":3,"file":"obliczeniowo-elementary-hex-color.mjs","sources":["../../../../projects/components/hex-color/components/hex-color/hex-color.component.ts","../../../../projects/components/hex-color/components/hex-color/hex-color.component.html","../../../../projects/components/hex-color/components/hex-colors/hex-colors.component.ts","../../../../projects/components/hex-color/components/hex-colors/hex-colors.component.html","../../../../projects/components/hex-color/hex-color.module.ts","../../../../projects/components/hex-color/obliczeniowo-elementary-hex-color.ts"],"sourcesContent":["import { ColorRGB } from '@obliczeniowo/elementary/classes';\nimport { Component, Output, EventEmitter, HostListener, ChangeDetectionStrategy, input, computed } from '@angular/core';\n\nexport interface HexColor {\n color: ColorRGB | string;\n x: number | string;\n y: number | string;\n}\n\n@Component({\n selector: 'g[obl-hex-color]',\n templateUrl: './hex-color.component.html',\n styleUrls: ['./hex-color.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false\n})\nexport class HexColorComponent {\n /** hex element ray */\n ray = input<number>(10);\n /** x pos can be css style like calc(50% + 10px) */\n x = input<number | string>(0);\n /** y pos can be css style like calc(50% + 10px) */\n y = input<number | string>(0);\n /** fill color as ColorRGB object or string color as one of:\n * #ffffff\n * rgb(255, 255, 255)\n * rgba(255, 255, 255, 0.5)\n * named color format, for example: red, blue, green ... */\n fill = input<ColorRGB | string>(new ColorRGB(0, 0, 0, 255));\n\n strokeWidth = input<number>(0);\n /** stroke color as ColorRGB object or string color as one of:\n * #ffffff\n * rgb(255, 255, 255)\n * rgba(255, 255, 255, 0.5)\n * named color format, for example: red, blue, green ... */\n strokeColor = input<ColorRGB | string>(new ColorRGB(0, 0, 0, 0));\n\n @Output() clicked: EventEmitter<HexColor> = new EventEmitter<HexColor>();\n\n protected fillHover = computed<ColorRGB | string>(() => typeof this.fill() === 'string' && this.fill() || (this.fill() as ColorRGB).multiply(0.8));\n\n hover = false;\n\n protected points = computed(() => this.recalc())\n\n @HostListener('click') onClick() {\n this.clicked.emit({\n color: this.fill(),\n x: this.x(),\n y: this.y()\n })\n }\n\n protected recalc() {\n const n = 6\n const offset = Math.PI / n;\n return new Array(n).fill(0).map((_, index: number) => {\n const angle = index * Math.PI / (n / 2) + offset;\n return [\n this.ray() * Math.sin(angle),\n this.ray() * Math.cos(angle)\n ].join(',')\n }).join(' ');\n }\n}\n","<svg:polygon\n [attr.points]=\"points()\"\n [style.transform]=\"'translate(' + x() + ', ' + y() + ')'\"\n [style.fill]=\"hover ? fillHover().toString() : fill().toString()\"\n [style.stroke]=\"strokeColor().toString()\"\n [style.strokeWidth]=\"strokeWidth()\"\n (mouseenter)=\"hover = true\"\n (mouseleave)=\"hover = false\"\n class=\"clickable\"\n></svg:polygon>\n","import { HexColor } from './../hex-color/hex-color.component';\nimport { ColorRGB, ColorHSV, Point2D } from '@obliczeniowo/elementary/classes';\nimport { Component, ChangeDetectionStrategy, input, computed, model } from '@angular/core';\n\n@Component({\n selector: 'obl-hex-colors',\n templateUrl: './hex-colors.component.html',\n styleUrls: ['./hex-colors.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false\n})\nexport class HexColorsComponent {\n /** hex element ray */\n ray = input(10, {\n transform: (value: number) => value < 5 ? 5 : value\n });\n\n /** Number of levels */\n rounds = input(6, {\n transform: (rounds: number) => rounds < 1 ? 1 : rounds\n }\n );\n\n /** color to select if exist on palette of colors */\n color = model<string>('#ffffff');\n\n protected width = computed<number>(() => (1.5 * (this.rounds() - 1) + 1) * this.ray() * 2 + 6);\n\n protected height = computed<number>(() => (this.h * (this.rounds() - 1) * 2 + this.h) * this.ray() * 2 + 6);\n\n readonly h = Math.sqrt(3) / 2;\n\n readonly rayTranslate = new Point2D(0, this.h * 2);\n readonly move = new Point2D(1.5, -this.h);\n\n elements = computed<{ pos: Point2D; color: ColorRGB }[]>(() => {\n const elements = [];\n\n elements.push({\n pos: new Point2D(),\n color: new ColorRGB(255, 255, 255, 255)\n });\n\n for (let dAngle = 0; dAngle < 6; dAngle++) {\n const angle = Math.PI / 3 * dAngle;\n for (let dRay = 1; dRay < this.rounds(); dRay++) {\n const total = 6 * dRay;\n const ray = this.rayTranslate.multiply(this.ray() * dRay).rotate(angle);\n for (let dMove = 0; dMove < dRay; dMove++) {\n const move = this.move.multiply(this.ray() * dMove).rotate(angle);\n elements.push({\n pos: ray.add(move),\n color: (\n ColorHSV.createColorHSV(\n 360 * (1 - (dAngle * dRay - dMove) / total),\n dRay / this.rounds(),\n 255\n )).convertToRGB()\n });\n }\n }\n }\n\n return elements;\n });\n\n strokeColor: ColorRGB | string = new ColorRGB(255, 255, 255, 255);\n\n selected = computed<undefined | HexColor>(() => {\n if (this.elements) {\n const found = this.elements().find(c => c.color.toString() === this.color());\n if (found) {\n return {\n x: `calc(50% + ${found.pos.x}px)`,\n y: `calc(50% + ${found.pos.y}px)`,\n color: found.color\n };\n }\n }\n return undefined;\n });\n\n selectedColor: ColorRGB = new ColorRGB(0, 0, 0);\n\n onChange(selected: HexColor) {\n this.color.set(selected.color.toString());\n }\n}\n","<svg [attr.width]=\"width()\" [attr.height]=\"height()\">\n @for (element of elements(); track $index) {\n <g\n obl-hex-color\n [x]=\"'calc(50% + ' + element.pos.x + 'px)'\"\n [y]=\"'calc(50% + ' + element.pos.y + 'px)'\"\n [fill]=\"element.color\"\n [strokeColor]=\"strokeColor\"\n [strokeWidth]=\"1\"\n [ray]=\"ray()\"\n (clicked)=\"onChange($event)\"\n ></g>\n }\n\n @if (selected()) {\n <g\n obl-hex-color\n [ray]=\"ray() + 1\"\n [x]=\"selected()!.x\"\n [y]=\"selected()!.y\"\n [fill]=\"'none'\"\n [strokeWidth]=\"6\"\n [strokeColor]=\"'white'\"\n ></g>\n <g\n obl-hex-color\n [ray]=\"ray()\"\n [x]=\"selected()!.x\"\n [y]=\"selected()!.y\"\n [fill]=\"'none'\"\n [strokeWidth]=\"1\"\n [strokeColor]=\"selectedColor\"\n ></g>\n }\n</svg>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { HexColorComponent } from './components/hex-color/hex-color.component';\nimport { HexColorsComponent } from './components/hex-colors/hex-colors.component';\n\n@NgModule({\n declarations: [\n HexColorComponent,\n HexColorsComponent\n ],\n imports: [\n CommonModule,\n ],\n exports: [\n HexColorsComponent\n ]\n})\nexport class HexColorModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.HexColorComponent"],"mappings":"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"}