@obliczeniowo/elementary
Version:
Library made in Angular version 20
150 lines (144 loc) • 8.3 kB
JavaScript
import * as i0 from '@angular/core';
import { HostBinding, Input, ChangeDetectionStrategy, Component, computed, input, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class HtmlLineComponent {
/** coordinates as table [x1, y1, x2, y2] */
set coords(coords) {
this._coords = coords;
this.recalc();
}
_coords;
recalc() {
const thickness = this.thickness;
const coords = this._coords;
if (!coords) {
return;
}
this.width = Math.abs(Math.sqrt((coords[0] - coords[2]) * (coords[0] - coords[2]) + (coords[1] - coords[3]) * (coords[1] - coords[3]))) + thickness;
const angle = Math.atan2(coords[1] - coords[3], coords[0] - coords[2]);
const translateTo0 = `translate(${-this.width / 2 - ((this.width - thickness) / 2) * Math.cos(angle)}px, ${-thickness / 2 - ((this.width - thickness) / 2) * Math.sin(angle)}px)`;
const translate = `translate(${coords[0]}px, ${coords[1]}px)`;
const rotate = `rotate(${angle}rad)`;
this.transform = `${translateTo0} ${translate} ${rotate}`;
this.radius = this.thickness / 2;
}
/** line (div) height */
_thickness = 2;
get thickness() {
return this._thickness;
}
set thickness(value) {
this._thickness = value;
this.radius = value / 2;
this.recalc();
}
/** */
background = 'black';
transform;
width;
radius = 10;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: HtmlLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: HtmlLineComponent, isStandalone: false, selector: "obl-html-line", inputs: { coords: "coords", thickness: "thickness", background: "background" }, host: { properties: { "style.height.px": "this._thickness", "style.background-color": "this.background", "style.transform": "this.transform", "style.width.px": "this.width", "style.border-radius.px": "this.radius" } }, ngImport: i0, template: "", styles: [":host{position:absolute}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: HtmlLineComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-html-line', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "", styles: [":host{position:absolute}\n"] }]
}], propDecorators: { coords: [{
type: Input
}], _thickness: [{
type: HostBinding,
args: ['style.height.px']
}], thickness: [{
type: Input
}], background: [{
type: Input
}, {
type: HostBinding,
args: ['style.background-color']
}], transform: [{
type: HostBinding,
args: ['style.transform']
}], width: [{
type: HostBinding,
args: ['style.width.px']
}], radius: [{
type: HostBinding,
args: ['style.border-radius.px']
}] } });
class HtmlLinesComponent {
minMax = computed(() => {
let minMax;
this.lines().forEach(points => points.points.forEach((c, index) => {
if (minMax) {
minMax = [
[Math.min(minMax[0][0], c[0]), Math.max(minMax[0][1], c[0])],
[Math.min(minMax[1][0], c[1]), Math.max(minMax[1][1], c[1])],
];
}
else {
minMax = [
[c[0], c[0]],
[c[1], c[1]],
];
}
}));
return minMax;
});
lines = input([]);
/** line thickness in px */
thickness = 2;
/** color as any css color style */
color = 'black';
style = computed(() => {
const { thickness } = this;
const minMax = this.minMax();
if (!minMax) {
return {};
}
const width = minMax[0][1] - minMax[0][0] + thickness;
const height = minMax[1][1] - minMax[1][0] + thickness;
return { width: `${width}px`, height: `${height}px`, transform: `translate(${-minMax[0][0] + thickness / 2}px, ${-minMax[1][0] + thickness / 2}px)` };
});
coords(fp, sp) {
return [...fp, ...sp];
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: HtmlLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: HtmlLinesComponent, isStandalone: false, selector: "obl-html-lines", inputs: { lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [ngStyle]=\"style\">\n @for (lineSet of lines(); track $index) {\n @for (line of lineSet.points; track $index) {\n @if ($index) {\n <obl-html-line\n [thickness]=\"lineSet.thickness || this.thickness\"\n [background]=\"lineSet.color || color\"\n [coords]=\"coords(lineSet.points[$index - 1], line)\"\n >\n </obl-html-line>\n }\n }\n }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: HtmlLineComponent, selector: "obl-html-line", inputs: ["coords", "thickness", "background"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: HtmlLinesComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-html-lines', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div [ngStyle]=\"style\">\n @for (lineSet of lines(); track $index) {\n @for (line of lineSet.points; track $index) {\n @if ($index) {\n <obl-html-line\n [thickness]=\"lineSet.thickness || this.thickness\"\n [background]=\"lineSet.color || color\"\n [coords]=\"coords(lineSet.points[$index - 1], line)\"\n >\n </obl-html-line>\n }\n }\n }\n</div>\n" }]
}], propDecorators: { thickness: [{
type: Input
}], color: [{
type: Input
}] } });
class HtmlLineModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: HtmlLineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: HtmlLineModule, declarations: [HtmlLineComponent,
HtmlLinesComponent], imports: [CommonModule], exports: [HtmlLineComponent,
HtmlLinesComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: HtmlLineModule, imports: [CommonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: HtmlLineModule, decorators: [{
type: NgModule,
args: [{
declarations: [
HtmlLineComponent,
HtmlLinesComponent
],
imports: [
CommonModule
],
exports: [
HtmlLineComponent,
HtmlLinesComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { HtmlLineComponent, HtmlLineModule, HtmlLinesComponent };
//# sourceMappingURL=obliczeniowo-elementary-html-line.mjs.map