@obliczeniowo/elementary
Version:
Library made in Angular version 20
306 lines (300 loc) • 13.4 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, HostListener, Output, HostBinding, Input, Component, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { BehaviorSubjectExt, EventEmitterExt } from '@obliczeniowo/elementary/rx-js-ext';
import { MenuModule } from '@obliczeniowo/elementary/menu';
class DirectionalConnectorComponent {
changes;
start;
end;
startAngle;
endAngle;
offset = 30;
k = 6;
color;
startName;
endName;
menu;
highlight = false;
remove = new EventEmitter();
menuItems = [
{
id: 1,
text: 'Delete',
command: 'delete',
}
];
subscription;
mouseOver() {
if (this.menu) {
this.menu.items = this.menuItems;
}
}
constructor(changes) {
this.changes = changes;
}
ngOnChanges(changes) {
if (changes.menu) {
if (this.subscription && !this.subscription.closed) {
this.subscription.unsubscribe();
}
if (this.menu) {
this.subscription = this.menu.command.subscribe(command => {
if (this.menu?.items !== this.menuItems) {
return;
}
switch (command) {
case 'delete':
this.remove.emit();
break;
}
this.menu.items = [];
});
}
}
}
shape() {
const { start, end, startAngle, endAngle, offset, k } = this;
if (!start || !end || startAngle === undefined || endAngle === undefined) {
return '';
}
const offsetPoint = { x: offset * Math.cos(endAngle), y: offset * Math.sin(endAngle) };
const offsetPointStart = { x: offset * Math.cos(startAngle), y: offset * Math.sin(startAngle) };
const startOffset = { x: start.x + offsetPointStart.x, y: start.y + offsetPointStart.y };
const endOffset = { x: end.x - offsetPoint.x, y: end.y - offsetPoint.y };
return 'M ' +
start.x +
',' +
start.y +
' ' + startOffset.x + ',' + startOffset.y + 'C ' +
+(startOffset.x + offsetPointStart.x * k) + ',' + (startOffset.y + offsetPointStart.y * k) + ' ' +
(endOffset.x - offsetPoint.x * k) +
',' +
(endOffset.y - offsetPoint.y * k) + ' ' +
endOffset.x +
',' +
endOffset.y +
' L ' +
end.x +
',' +
end.y;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DirectionalConnectorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: DirectionalConnectorComponent, isStandalone: false, selector: "g[obl-directional-connector]", inputs: { start: "start", end: "end", startAngle: "startAngle", endAngle: "endAngle", offset: "offset", k: "k", color: "color", startName: "startName", endName: "endName", menu: "menu", highlight: "highlight" }, outputs: { remove: "remove" }, host: { listeners: { "mouseover": "mouseOver()" }, properties: { "class.highlight": "this.highlight" } }, usesOnChanges: true, ngImport: i0, template: "<svg:path\n [attr.d]=\"shape()\"\n [ngStyle]=\"{ stroke: color || 'gray' }\"\n></svg:path>\n", styles: ["path{fill:none;stroke-width:var(--directional-connector-width, 2)}path:hover{stroke-width:var(--directional-connector-hover-width, 3)}:host.highlight path{stroke-width:var(--directional-connector-hover-width, 3)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DirectionalConnectorComponent, decorators: [{
type: Component,
args: [{ selector: 'g[obl-directional-connector]', standalone: false, template: "<svg:path\n [attr.d]=\"shape()\"\n [ngStyle]=\"{ stroke: color || 'gray' }\"\n></svg:path>\n", styles: ["path{fill:none;stroke-width:var(--directional-connector-width, 2)}path:hover{stroke-width:var(--directional-connector-hover-width, 3)}:host.highlight path{stroke-width:var(--directional-connector-hover-width, 3)}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { start: [{
type: Input
}], end: [{
type: Input
}], startAngle: [{
type: Input
}], endAngle: [{
type: Input
}], offset: [{
type: Input
}], k: [{
type: Input
}], color: [{
type: Input
}], startName: [{
type: Input
}], endName: [{
type: Input
}], menu: [{
type: Input
}], highlight: [{
type: HostBinding,
args: ['class.highlight']
}, {
type: Input
}], remove: [{
type: Output
}], mouseOver: [{
type: HostListener,
args: ['mouseover']
}] } });
class RelationConnectorComponent {
change;
elementRef;
// left connector pos
left;
// right connector pos
right;
// connector required
connector;
//
highlighted;
//
offset = 20;
//
defaultColor = 'gray';
//
menu;
//
translations = {};
//
disabled;
//
input = new BehaviorSubjectExt(undefined);
//
clicked = new EventEmitterExt();
//
remove = new EventEmitterExt();
//
editColor = new EventEmitterExt();
menuItems = [
{
id: 1,
text: 'Delete',
command: 'delete',
},
{
id: 2,
text: 'Set color',
command: 'set-color',
}
];
onMouseOver() {
if (this.menu && !this.disabled) {
this.menu.items = this.menuItems;
}
}
onMouseLeave() {
if (this.menu && !this.menu?.opened) {
this.menu.items = [];
}
}
subscription;
constructor(change, elementRef) {
this.change = change;
this.elementRef = elementRef;
}
ngOnChanges(changes) {
if (changes.disabled && !this.disabled && this.menu) {
this.menu.items = [];
}
if (changes.menu && this.menu) {
if (this.subscription && !this.subscription?.closed) {
this.subscription.unsubscribe();
}
this.subscription = this.menu.command.subscribe((command) => {
if (this.menu?.items !== this.menuItems) {
return;
}
switch (command) {
case 'delete':
{
this.remove.emit(this.connector);
}
break;
case 'set-color':
{
this.editColor.emit(this.connector);
}
break;
case 'on-close':
{
this.menu.items = [];
}
break;
}
});
}
}
ngOnDestroy() {
if (this.subscription && !this.subscription?.closed) {
this.subscription.unsubscribe();
}
this.input.clearSubscriptions();
}
shape() {
const { left, right, offset } = this;
if (!left || !right) {
return;
}
const size = (right.x - offset - left.x - offset) * 0.5;
return 'm ' +
left?.x +
',' +
left?.y +
' h ' + offset +
' c ' + Math.abs(size) + ',0 ' + (size < 0 ? 3 * size : size) + ',' + (right.y - left.y) + ' ' +
(right.x - offset - left.x - offset) +
',' +
(right.y - left.y) +
' h ' + offset;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: RelationConnectorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: RelationConnectorComponent, isStandalone: false, selector: "g[obl-relation-connector]", inputs: { left: "left", right: "right", connector: "connector", highlighted: "highlighted", offset: "offset", defaultColor: "defaultColor", menu: "menu", translations: "translations", disabled: "disabled", input: "input" }, outputs: { clicked: "clicked", remove: "remove", editColor: "editColor" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseleave": "onMouseLeave()" } }, usesOnChanges: true, ngImport: i0, template: "@if (left && right) {\n <svg:path\n [class.highlighted]=\"highlighted === connector?.left || highlighted === connector?.right\"\n [ngStyle]=\"{ stroke: connector?.color || defaultColor }\"\n [attr.d]=\"shape()\"\n (click)=\"clicked.emit(connector)\"\n ></svg:path>\n}\n", styles: ["path{fill:none;stroke-width:var(--connector-stroke-width, 2);stroke-linejoin:round}path.highlighted{stroke-width:var(--connector-stroke-width-bold, 3)}path:hover{stroke-width:var(--connector-stroke-width-bold, 3)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: RelationConnectorComponent, decorators: [{
type: Component,
args: [{ selector: 'g[obl-relation-connector]', standalone: false, template: "@if (left && right) {\n <svg:path\n [class.highlighted]=\"highlighted === connector?.left || highlighted === connector?.right\"\n [ngStyle]=\"{ stroke: connector?.color || defaultColor }\"\n [attr.d]=\"shape()\"\n (click)=\"clicked.emit(connector)\"\n ></svg:path>\n}\n", styles: ["path{fill:none;stroke-width:var(--connector-stroke-width, 2);stroke-linejoin:round}path.highlighted{stroke-width:var(--connector-stroke-width-bold, 3)}path:hover{stroke-width:var(--connector-stroke-width-bold, 3)}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { left: [{
type: Input
}], right: [{
type: Input
}], connector: [{
type: Input
}], highlighted: [{
type: Input
}], offset: [{
type: Input
}], defaultColor: [{
type: Input
}], menu: [{
type: Input
}], translations: [{
type: Input
}], disabled: [{
type: Input
}], input: [{
type: Input
}], clicked: [{
type: Output
}], remove: [{
type: Output
}], editColor: [{
type: Output
}], onMouseOver: [{
type: HostListener,
args: ['mouseover']
}], onMouseLeave: [{
type: HostListener,
args: ['mouseleave']
}] } });
class ConnectorsModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ConnectorsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: ConnectorsModule, declarations: [DirectionalConnectorComponent,
RelationConnectorComponent], imports: [CommonModule,
MenuModule], exports: [DirectionalConnectorComponent,
RelationConnectorComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ConnectorsModule, imports: [CommonModule,
MenuModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ConnectorsModule, decorators: [{
type: NgModule,
args: [{
declarations: [
DirectionalConnectorComponent,
RelationConnectorComponent
],
imports: [
CommonModule,
MenuModule
],
exports: [
DirectionalConnectorComponent,
RelationConnectorComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ConnectorsModule, DirectionalConnectorComponent, RelationConnectorComponent };
//# sourceMappingURL=obliczeniowo-elementary-connectors.mjs.map