@obliczeniowo/elementary
Version:
Library made in Angular version 20
194 lines (186 loc) • 13.7 kB
JavaScript
import * as i0 from '@angular/core';
import { input, effect, Component, EventEmitter, Output, model, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
import { ElementaryMath } from '@obliczeniowo/elementary/math';
import * as i1 from '@obliczeniowo/elementary/connectors';
import { ConnectorsModule } from '@obliczeniowo/elementary/connectors';
class GroupClass {
dAngle;
offset;
dCategoryOffset;
color;
items;
ext;
constructor(group, dAngle, offset, dCategoryOffset = 0) {
this.dAngle = dAngle;
this.offset = offset;
this.dCategoryOffset = dCategoryOffset;
Object.assign(this, group);
}
}
class BranchItemComponent {
//
ray = input.required();
//
angle = input.required();
//
textLength = input(100);
//
item = input.required();
reverse;
constructor() {
effect(() => {
const angle = this.angle();
this.reverse = angle > 90 && angle < 270;
});
}
get r() {
return this.ray() - this.textLength();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: BranchItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: BranchItemComponent, isStandalone: false, selector: "g[obl-branch-item]", inputs: { ray: { classPropertyName: "ray", publicName: "ray", isSignal: true, isRequired: true, transformFunction: null }, angle: { classPropertyName: "angle", publicName: "angle", isSignal: true, isRequired: true, transformFunction: null }, textLength: { classPropertyName: "textLength", publicName: "textLength", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<svg:g\n [attr.transform]=\"\n 'translate(' +\n ray() +\n ',' +\n ray() +\n ') rotate(' +\n angle() +\n ') translate(' +\n r +\n ', ' +\n (reverse ? -2 : 5) +\n ')' +\n (reverse ? ' rotate(180)' : '')\n \"\n>\n <svg:circle\n [attr.cx]=\"reverse ? 10 : -10\"\n [attr.cy]=\"reverse ? -2 : -5\"\n r=\"2\"\n ></svg:circle>\n <svg:text [attr.text-anchor]=\"reverse ? 'end' : 'start'\">\n {{ item().name }}\n </svg:text>\n</svg:g>\n", styles: ["text{font-size:10px;fill:var(--default-text-color)}text:hover{opacity:.7}circle{fill:var(--default-text-color)}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: BranchItemComponent, decorators: [{
type: Component,
args: [{ selector: 'g[obl-branch-item]', standalone: false, template: "<svg:g\n [attr.transform]=\"\n 'translate(' +\n ray() +\n ',' +\n ray() +\n ') rotate(' +\n angle() +\n ') translate(' +\n r +\n ', ' +\n (reverse ? -2 : 5) +\n ')' +\n (reverse ? ' rotate(180)' : '')\n \"\n>\n <svg:circle\n [attr.cx]=\"reverse ? 10 : -10\"\n [attr.cy]=\"reverse ? -2 : -5\"\n r=\"2\"\n ></svg:circle>\n <svg:text [attr.text-anchor]=\"reverse ? 'end' : 'start'\">\n {{ item().name }}\n </svg:text>\n</svg:g>\n", styles: ["text{font-size:10px;fill:var(--default-text-color)}text:hover{opacity:.7}circle{fill:var(--default-text-color)}\n"] }]
}], ctorParameters: () => [] });
class CategoriesBranchComponent {
// Group class as required
group = input.required();
// Ray of branch
ray = input(400);
// max text length
textLength = input(100);
// emit when user click on item leaf or leaf (category) name
clicked = new EventEmitter();
get r() {
return this.ray() - this.textLength();
}
endAngle(index) {
const group = this.group();
return ElementaryMath.degreesToRadians(group.dAngle * (index + group.offset) + group.dCategoryOffset);
}
startAngle() {
const group = this.group();
return ElementaryMath.degreesToRadians(group.dAngle * (group.items.length / 2 + group.offset) + group.dCategoryOffset);
}
end(index) {
const angle = this.endAngle(index);
return { x: this.ray() + (this.r - 10) * Math.cos(angle), y: this.ray() + (this.r - 10) * Math.sin(angle) };
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CategoriesBranchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: CategoriesBranchComponent, isStandalone: false, selector: "g[obl-categories-branch]", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, ray: { classPropertyName: "ray", publicName: "ray", isSignal: true, isRequired: false, transformFunction: null }, textLength: { classPropertyName: "textLength", publicName: "textLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "@for (item of group().items; track item) {\n <svg:g\n (click)=\"clicked.emit(item)\"\n >\n <g\n obl-directional-connector\n [start]=\"{ x: ray(), y: ray() }\"\n [end]=\"end($index)\"\n [startAngle]=\"startAngle()\"\n [endAngle]=\"endAngle($index)\"\n [color]=\"item.color\"\n ></g>\n\n <svg:g\n obl-branch-item\n [ray]=\"ray()\"\n [angle]=\"group().dAngle * ($index + group().offset) + group().dCategoryOffset\"\n [textLength]=\"textLength()\"\n [item]=\"item\"\n ></svg:g>\n </svg:g>\n}\n", styles: ["g:hover{--directional-connector-width: 3;cursor:pointer}\n"], dependencies: [{ kind: "component", type: i1.DirectionalConnectorComponent, selector: "g[obl-directional-connector]", inputs: ["start", "end", "startAngle", "endAngle", "offset", "k", "color", "startName", "endName", "menu", "highlight"], outputs: ["remove"] }, { kind: "component", type: BranchItemComponent, selector: "g[obl-branch-item]", inputs: ["ray", "angle", "textLength", "item"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CategoriesBranchComponent, decorators: [{
type: Component,
args: [{ selector: 'g[obl-categories-branch]', standalone: false, template: "@for (item of group().items; track item) {\n <svg:g\n (click)=\"clicked.emit(item)\"\n >\n <g\n obl-directional-connector\n [start]=\"{ x: ray(), y: ray() }\"\n [end]=\"end($index)\"\n [startAngle]=\"startAngle()\"\n [endAngle]=\"endAngle($index)\"\n [color]=\"item.color\"\n ></g>\n\n <svg:g\n obl-branch-item\n [ray]=\"ray()\"\n [angle]=\"group().dAngle * ($index + group().offset) + group().dCategoryOffset\"\n [textLength]=\"textLength()\"\n [item]=\"item\"\n ></svg:g>\n </svg:g>\n}\n", styles: ["g:hover{--directional-connector-width: 3;cursor:pointer}\n"] }]
}], propDecorators: { clicked: [{
type: Output
}] } });
class CircleCategoriesTreeComponent {
// Grouping model table
groups = model([]);
// header text to display (if empty not display at all)
header = input();
// emit when user click on specific item
clicked = new EventEmitter();
total = 0;
// converted/prepared groups to display
groupsClasses = [];
constructor() {
effect(() => {
this.prepareGroups();
});
}
prepareGroups() {
this.total = this.groups().map(group => group.items.length).reduce((p, c) => (p += c, p), 0);
const dCategoryAngle = 1.5;
const dAngle = (360 - dCategoryAngle * this.groups().length) / (this.total || 1);
let offset = 0;
this.groupsClasses = this.groups().map((group, index) => {
const current = offset;
offset += group.items.length;
return new GroupClass(group, dAngle, current, dCategoryAngle * index);
});
}
onChange = (groups) => {
};
onTouched = () => { };
writeValue(groups) {
this.groups.set(groups || []);
this.prepareGroups();
}
registerOnChange(onChange) {
this.onChange = onChange;
}
registerOnTouched(onTouched) {
this.onTouched = onTouched;
}
setDisabledState(isDisabled) {
}
validate(control) {
return null;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CircleCategoriesTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: CircleCategoriesTreeComponent, isStandalone: false, selector: "obl-circle-categories-tree", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { groups: "groupsChange", clicked: "clicked" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: CircleCategoriesTreeComponent
},
{
provide: NG_VALIDATORS,
multi: true,
useExisting: CircleCategoriesTreeComponent
}
], ngImport: i0, template: "<svg viewBox=\"0 0 800 800\">\n @for (group of groupsClasses; track $index) {\n <g\n obl-categories-branch\n [group]=\"group\"\n (clicked)=\"clicked.emit($event)\"\n ></g>\n }\n\n @if (header()) {\n <text x=\"50%\" y=\"50%\" text-anchor=\"middle\" class=\"border-header\">\n {{ header() }}\n </text>\n\n <text x=\"50%\" y=\"50%\" text-anchor=\"middle\" class=\"header\">\n {{ header() }}\n </text>\n }\n</svg>\n", styles: [".border-header,.header{font-size:30px;fill:var(--default-text-color);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.header{stroke-width:0}.border-header{stroke-width:5;stroke:var(--default-background-color)}\n"], dependencies: [{ kind: "component", type: CategoriesBranchComponent, selector: "g[obl-categories-branch]", inputs: ["group", "ray", "textLength"], outputs: ["clicked"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CircleCategoriesTreeComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-circle-categories-tree', providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: CircleCategoriesTreeComponent
},
{
provide: NG_VALIDATORS,
multi: true,
useExisting: CircleCategoriesTreeComponent
}
], standalone: false, template: "<svg viewBox=\"0 0 800 800\">\n @for (group of groupsClasses; track $index) {\n <g\n obl-categories-branch\n [group]=\"group\"\n (clicked)=\"clicked.emit($event)\"\n ></g>\n }\n\n @if (header()) {\n <text x=\"50%\" y=\"50%\" text-anchor=\"middle\" class=\"border-header\">\n {{ header() }}\n </text>\n\n <text x=\"50%\" y=\"50%\" text-anchor=\"middle\" class=\"header\">\n {{ header() }}\n </text>\n }\n</svg>\n", styles: [".border-header,.header{font-size:30px;fill:var(--default-text-color);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.header{stroke-width:0}.border-header{stroke-width:5;stroke:var(--default-background-color)}\n"] }]
}], ctorParameters: () => [], propDecorators: { clicked: [{
type: Output
}] } });
class CircleCategoriesTreeModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CircleCategoriesTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: CircleCategoriesTreeModule, declarations: [CircleCategoriesTreeComponent,
CategoriesBranchComponent,
BranchItemComponent], imports: [CommonModule,
ConnectorsModule], exports: [CircleCategoriesTreeComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CircleCategoriesTreeModule, imports: [CommonModule,
ConnectorsModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CircleCategoriesTreeModule, decorators: [{
type: NgModule,
args: [{
declarations: [
CircleCategoriesTreeComponent,
CategoriesBranchComponent,
BranchItemComponent,
],
imports: [
CommonModule,
ConnectorsModule
],
exports: [
CircleCategoriesTreeComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { CircleCategoriesTreeComponent, CircleCategoriesTreeModule, GroupClass };
//# sourceMappingURL=obliczeniowo-elementary-circle-categories-tree.mjs.map