diff --git a/README.md b/README.md index 2d1d1bd..765dddc 100644 --- a/README.md +++ b/README.md @@ -205,6 +205,6 @@ Do you want to use a Basic Primitives diagram for a personal website, a school s ## Performance Through a full API, you can add, remove and modify individual items and their properties. The component will only update the visual elements affected by the API changes. We put in much effort to make it happen! -Copyright (c) 2013 - 2024 Basic Primitives Inc +Copyright (c) 2013 - 2025 Basic Primitives Inc * [Non-commercial - Free](http://creativecommons.org/licenses/by-nc/3.0/) * [Commercial and government licenses](license.pdf) diff --git a/package-lock.json b/package-lock.json index 6a49cb9..db67d11 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,7 @@ "@angular/platform-browser": "~18.2.4", "@angular/platform-browser-dynamic": "~18.2.4", "@angular/router": "~18.2.4", - "basicprimitives": "^6.5.1", + "basicprimitives": "6.6.1", "rxjs": "~7.4.0", "tslib": "^2.3.0", "zone.js": "~0.14.10" @@ -6363,9 +6363,10 @@ } }, "node_modules/basicprimitives": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/basicprimitives/-/basicprimitives-6.5.1.tgz", - "integrity": "sha512-zwHeLl3DfpsLvjTSf2MYqfOSttCvGNGQhYEUVVL4u5lt5FgioCupK0V+B77TNW0uPlkf8hKhif29TvtlrnbFew==" + "version": "6.6.1", + "resolved": "https://registry.npmjs.org/basicprimitives/-/basicprimitives-6.6.1.tgz", + "integrity": "sha512-FKj9/UVRTZ10Zk9yxkUMcSjcvX/W1Qr3RWrxmcglrC4CzgKIQMza+rTjB4uKuij1HIXA7AF4GJ8hqBwNd+2odw==", + "license": "SEE LICENSE IN license.pdf" }, "node_modules/batch": { "version": "0.6.1", @@ -18805,9 +18806,9 @@ "dev": true }, "basicprimitives": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/basicprimitives/-/basicprimitives-6.5.1.tgz", - "integrity": "sha512-zwHeLl3DfpsLvjTSf2MYqfOSttCvGNGQhYEUVVL4u5lt5FgioCupK0V+B77TNW0uPlkf8hKhif29TvtlrnbFew==" + "version": "6.6.1", + "resolved": "https://registry.npmjs.org/basicprimitives/-/basicprimitives-6.6.1.tgz", + "integrity": "sha512-FKj9/UVRTZ10Zk9yxkUMcSjcvX/W1Qr3RWrxmcglrC4CzgKIQMza+rTjB4uKuij1HIXA7AF4GJ8hqBwNd+2odw==" }, "batch": { "version": "0.6.1", diff --git a/package.json b/package.json index 2cc3357..4f34daa 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "@angular/platform-browser": "~18.2.4", "@angular/platform-browser-dynamic": "~18.2.4", "@angular/router": "~18.2.4", - "basicprimitives": "^6.5.1", + "basicprimitives": "6.6.1", "rxjs": "~7.4.0", "tslib": "^2.3.0", "zone.js": "~0.14.10" diff --git a/projects/ngx-basic-primitives/README.md b/projects/ngx-basic-primitives/README.md index a32bdda..49ad788 100644 --- a/projects/ngx-basic-primitives/README.md +++ b/projects/ngx-basic-primitives/README.md @@ -83,6 +83,6 @@ Do you want to use a Basic Primitives diagram for a personal website, a school s ## Performance Through a full API, you can add, remove and modify individual items and their properties. The component will only update the visual elements affected by the API changes. We put in much effort to make it happen! -Copyright (c) 2013 - 2024 Basic Primitives Inc +Copyright (c) 2013 - 2025 Basic Primitives Inc * [Non-commercial - Free](http://creativecommons.org/licenses/by-nc/3.0/) * [Commercial and government licenses](license.pdf) diff --git a/projects/ngx-basic-primitives/package.json b/projects/ngx-basic-primitives/package.json index 9a59b3f..5638594 100644 --- a/projects/ngx-basic-primitives/package.json +++ b/projects/ngx-basic-primitives/package.json @@ -1,10 +1,10 @@ { "name": "ngx-basic-primitives", - "version": "6.5.3", + "version": "6.6.1", "peerDependencies": { "@angular/common": "~18.2.4", "@angular/core": "~18.2.4", - "basicprimitives": "^6.5.1" + "basicprimitives": "6.6.1" }, "dependencies": { "tslib": "^2.3.0" diff --git a/projects/ngx-basic-primitives/src/lib/configs/connector-annotation-config.ts b/projects/ngx-basic-primitives/src/lib/configs/connector-annotation-config.ts index 4d05929..65c5273 100644 --- a/projects/ngx-basic-primitives/src/lib/configs/connector-annotation-config.ts +++ b/projects/ngx-basic-primitives/src/lib/configs/connector-annotation-config.ts @@ -1,5 +1,6 @@ import { ConnectorLabelPlacementType, ConnectorPlacementType, - ConnectorShapeType, ZOrderType, AnnotationType, LineType } from '../enums'; + ConnectorShapeType, ZOrderType, AnnotationType, LineType, + Enabled} from '../enums'; import { Size, Thickness } from '../structs'; @@ -18,6 +19,9 @@ export class ConnectorAnnotationConfig { selectItems: Boolean = true; label:string | null = null; size: Size = new Size(60, 30); + showFromEndpoint: Enabled = Enabled.Auto; + showToEndpoint: Enabled = Enabled.Auto; + context: any = null constructor(config: Partial = {}) { Object.assign(this, config); diff --git a/projects/ngx-basic-primitives/src/lib/configs/fam-config.ts b/projects/ngx-basic-primitives/src/lib/configs/fam-config.ts index c651bc0..3e45462 100644 --- a/projects/ngx-basic-primitives/src/lib/configs/fam-config.ts +++ b/projects/ngx-basic-primitives/src/lib/configs/fam-config.ts @@ -105,6 +105,12 @@ export class FamConfig { levelTitleFontStyle: string = "normal"; levelTitleTemplate: TemplateRef | null = null; levelBackgroundTemplate: TemplateRef | null = null; + endPointTemplate: TemplateRef | null = null; + showEndPoints: Enabled = Enabled.False; + endPointSize: Size = new Size(8, 8); + endPointCornerRadius: number = 4; + endPointFillColor: string = "#000080"; + endPointOpacity: number = 0.5; distance: number = 3; scale: number = 1; minimumScale: number = 0.5; diff --git a/projects/ngx-basic-primitives/src/lib/configs/org-config.ts b/projects/ngx-basic-primitives/src/lib/configs/org-config.ts index 3721324..64bdec4 100644 --- a/projects/ngx-basic-primitives/src/lib/configs/org-config.ts +++ b/projects/ngx-basic-primitives/src/lib/configs/org-config.ts @@ -103,6 +103,12 @@ export class OrgConfig { levelTitleFontStyle: string = "normal"; levelTitleTemplate: TemplateRef | null = null; levelBackgroundTemplate: TemplateRef | null = null; + endPointTemplate: TemplateRef | null = null; + showEndPoints: Enabled = Enabled.False; + endPointSize: Size = new Size(8, 8); + endPointCornerRadius: number = 4; + endPointFillColor: string = "#000080"; + endPointOpacity: number = 0.5; distance: number = 3; scale: number = 1; minimumScale: number = 0.5; diff --git a/projects/ngx-basic-primitives/src/lib/diagrams/base-diagram.component.html b/projects/ngx-basic-primitives/src/lib/diagrams/base-diagram.component.html index 030de9c..e694734 100644 --- a/projects/ngx-basic-primitives/src/lib/diagrams/base-diagram.component.html +++ b/projects/ngx-basic-primitives/src/lib/diagrams/base-diagram.component.html @@ -99,6 +99,9 @@ + + + diff --git a/projects/ngx-basic-primitives/src/lib/diagrams/base-diagram.component.ts b/projects/ngx-basic-primitives/src/lib/diagrams/base-diagram.component.ts index c4f3ddf..e69b8e0 100644 --- a/projects/ngx-basic-primitives/src/lib/diagrams/base-diagram.component.ts +++ b/projects/ngx-basic-primitives/src/lib/diagrams/base-diagram.component.ts @@ -18,7 +18,8 @@ import { CustomRenderTemplate, LabelAnnotationTemplate, LevelTitleTemplate, - LevelBackgroundTemplate + LevelBackgroundTemplate, + EndPointTemplate } from './templates'; import { TemplateConfig } from '../configs/template-config'; @@ -110,7 +111,8 @@ export class BaseDiagramComponent implements OnInit, AfterViewInit, OnDestroy { CustomRenderTemplate, LabelAnnotationTemplate, LevelTitleTemplate, - LevelBackgroundTemplate + LevelBackgroundTemplate, + EndPointTemplate } this.tasks = taskManagerFactory.factory(this.getOptions.bind(this), this.getGraphics.bind(this), this.getLayout.bind(this), this.setLayout.bind(this), templates); @@ -166,7 +168,8 @@ export class BaseDiagramComponent implements OnInit, AfterViewInit, OnDestroy { onGroupTitleRender: !config.groupTitleTemplate ? null : () => config.groupTitleTemplate, onLevelBackgroundRender: !config.levelBackgroundTemplate ? null : () => config.levelBackgroundTemplate, onLevelTitleRender: !config.levelTitleTemplate ? null : () => config.levelTitleTemplate, - onButtonsRender: !config.buttonsTemplate ? null : () => config.buttonsTemplate + onButtonsRender: !config.buttonsTemplate ? null : () => config.buttonsTemplate, + onEndPointRender: !config.endPointTemplate ? null : () => config.endPointTemplate, }; } diff --git a/projects/ngx-basic-primitives/src/lib/diagrams/components/end-point.component.css b/projects/ngx-basic-primitives/src/lib/diagrams/components/end-point.component.css new file mode 100644 index 0000000..04e9e1f --- /dev/null +++ b/projects/ngx-basic-primitives/src/lib/diagrams/components/end-point.component.css @@ -0,0 +1,17 @@ +.end-point { + position: absolute; + font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; + -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-user-select: none; + -webkit-touch-callout: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + box-sizing: content-box; + + width: 100%; + height: 100%; + left: 0px; + top: 0px; +} diff --git a/projects/ngx-basic-primitives/src/lib/diagrams/components/end-point.component.ts b/projects/ngx-basic-primitives/src/lib/diagrams/components/end-point.component.ts new file mode 100644 index 0000000..6c315af --- /dev/null +++ b/projects/ngx-basic-primitives/src/lib/diagrams/components/end-point.component.ts @@ -0,0 +1,47 @@ +import { Component, Input, OnChanges, SimpleChanges } from "@angular/core"; +import { Enabled } from "../../enums"; +import { Size } from "../../structs"; +import { ConnectorAnnotationConfig } from "../../configs/connector-annotation-config"; + +class EndPointOptions { + showEndPoints: Enabled = Enabled.False; + endPointSize: Size = new Size(8, 8); + endPointCornerRadius: number = 4; + endPointFillColor: string = "#000080"; + endPointOpacity: number = 0.5; + + constructor(config: Partial = {}) { + Object.assign(this, config); + } +} + +@Component({ + selector: 'bp-end-point:not(a)', + template: '
', + styleUrls: ['./end-point.component.css'] + }) +export class EndPointComponent implements OnChanges { + @Input() + options: EndPointOptions = new EndPointOptions(); + + @Input() + annotationConfig: ConnectorAnnotationConfig = new ConnectorAnnotationConfig(); + + @Input() + isFromEndPoint: boolean = true; + + ngOnChanges(changes: SimpleChanges): void { + const { endPointCornerRadius, endPointFillColor, endPointOpacity } = this.options; + this.divStyle = { + "-moz-border-radius": endPointCornerRadius + "px", + "-webkit-border-radius": endPointCornerRadius + "px", + "-khtml-border-radius": endPointCornerRadius + "px", + "border-radius": endPointCornerRadius + "px", + "background": endPointFillColor, + "opacity": endPointOpacity, + "border": "0px" + } + } + + divStyle: Object = {}; +}; diff --git a/projects/ngx-basic-primitives/src/lib/diagrams/fam-diagram.component.ts b/projects/ngx-basic-primitives/src/lib/diagrams/fam-diagram.component.ts index da1f709..0a45fe1 100644 --- a/projects/ngx-basic-primitives/src/lib/diagrams/fam-diagram.component.ts +++ b/projects/ngx-basic-primitives/src/lib/diagrams/fam-diagram.component.ts @@ -120,6 +120,12 @@ export class FamDiagramComponent extends BaseDiagramComponent implements FamConf @Input() levelTitleFontStyle: string = "normal"; @Input() levelTitleTemplate: TemplateRef | null = null; @Input() levelBackgroundTemplate: TemplateRef | null = null; + @Input() endPointTemplate: TemplateRef | null = null; + @Input() showEndPoints: Enabled = Enabled.False; + @Input() endPointSize: Size = new Size(8, 8); + @Input() endPointCornerRadius: number = 4; + @Input() endPointFillColor: string = "#000080"; + @Input() endPointOpacity: number = 0.5; @Input() distance: number = 3; @Input() scale: number = 1; @Input() minimumScale: number = 0.5; diff --git a/projects/ngx-basic-primitives/src/lib/diagrams/org-diagram.component.ts b/projects/ngx-basic-primitives/src/lib/diagrams/org-diagram.component.ts index 6d3acbc..935b26b 100644 --- a/projects/ngx-basic-primitives/src/lib/diagrams/org-diagram.component.ts +++ b/projects/ngx-basic-primitives/src/lib/diagrams/org-diagram.component.ts @@ -115,6 +115,12 @@ export class OrgDiagramComponent extends BaseDiagramComponent implements OrgConf @Input() levelTitleFontStyle: string = "normal"; @Input() levelTitleTemplate: TemplateRef | null = null; @Input() levelBackgroundTemplate: TemplateRef | null = null; + @Input() endPointTemplate: TemplateRef | null = null; + @Input() showEndPoints: Enabled = Enabled.False; + @Input() endPointSize: Size = new Size(8, 8); + @Input() endPointCornerRadius: number = 4; + @Input() endPointFillColor: string = "#000080"; + @Input() endPointOpacity: number = 0.5; @Input() distance: number = 3; @Input() scale: number = 1; @Input() minimumScale: number = 0.5; diff --git a/projects/ngx-basic-primitives/src/lib/diagrams/templates/EndPointTemplate.ts b/projects/ngx-basic-primitives/src/lib/diagrams/templates/EndPointTemplate.ts new file mode 100644 index 0000000..e837818 --- /dev/null +++ b/projects/ngx-basic-primitives/src/lib/diagrams/templates/EndPointTemplate.ts @@ -0,0 +1,11 @@ +import { TemplateConfig } from '../../configs/template-config'; +import AbstractTemplate from './AbstractTemplate'; + +export class EndPointTemplate extends AbstractTemplate { + constructor(options: any, templateConfig: TemplateConfig) { + super("endPointTemplate", { + ...options, + templateConfig + }); + } +}; diff --git a/projects/ngx-basic-primitives/src/lib/diagrams/templates/index.ts b/projects/ngx-basic-primitives/src/lib/diagrams/templates/index.ts index 386c5a5..d35a2e8 100644 --- a/projects/ngx-basic-primitives/src/lib/diagrams/templates/index.ts +++ b/projects/ngx-basic-primitives/src/lib/diagrams/templates/index.ts @@ -6,6 +6,7 @@ export * from "./CustomRenderTemplate"; export * from "./DotHighlightTemplate"; export * from "./GroupTitleTemplate"; export * from "./HighlightTemplate"; +export * from "./EndPointTemplate"; export * from "./ItemTemplate"; export * from "./LabelAnnotationTemplate"; export * from "./LevelBackgroundTemplate"; diff --git a/projects/ngx-basic-primitives/src/lib/ngx-basic-primitives.module.ts b/projects/ngx-basic-primitives/src/lib/ngx-basic-primitives.module.ts index d6cdda1..6e3b16a 100644 --- a/projects/ngx-basic-primitives/src/lib/ngx-basic-primitives.module.ts +++ b/projects/ngx-basic-primitives/src/lib/ngx-basic-primitives.module.ts @@ -12,6 +12,7 @@ import { GroupTitleComponent } from './diagrams/components/group-title.component import { DotHighlightComponent } from './diagrams/components/dot-highlight.component'; import { LevelBackgroundComponent } from './diagrams/components/level-background.component'; import { LevelTitleComponent } from './diagrams/components/level-title.component'; +import { EndPointComponent } from './diagrams/components/end-point.component'; @@ -28,6 +29,7 @@ import { LevelTitleComponent } from './diagrams/components/level-title.component DotHighlightComponent, CheckboxComponent, GroupTitleComponent, + EndPointComponent, LevelBackgroundComponent, LevelTitleComponent ], diff --git a/projects/samples/src/app/connector-annotation.component.html b/projects/samples/src/app/connector-annotation.component.html index 8c5ed1e..139448e 100644 --- a/projects/samples/src/app/connector-annotation.component.html +++ b/projects/samples/src/app/connector-annotation.component.html @@ -9,6 +9,7 @@

On-screen Connector Annotation