BasicPrimitives · BasicPrimitives · Jun 16, 2025 · Sep 16, 2024 · Sep 16, 2024 · Sep 16, 2024
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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<ConnectorAnnotationConfig> = {}) {
     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
@@ -105,6 +105,12 @@ export class FamConfig {
   levelTitleFontStyle: string = "normal";
   levelTitleTemplate: TemplateRef<any> | null = null;
   levelBackgroundTemplate: TemplateRef<any> | null = null;
+  endPointTemplate: TemplateRef<any> | 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
@@ -103,6 +103,12 @@ export class OrgConfig {
   levelTitleFontStyle: string = "normal";
   levelTitleTemplate: TemplateRef<any> | null = null;
   levelBackgroundTemplate: TemplateRef<any> | null = null;
+  endPointTemplate: TemplateRef<any> | 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
@@ -99,6 +99,9 @@
           <ng-container *ngSwitchCase="'groupTitleTemplate'">
             <bp-group-title [options]="item.context" [itemConfig]="item.context.context" [width]="item.context.width" [height]="item.context.height"></bp-group-title>
           </ng-container>
+          <ng-container *ngSwitchCase="'endPointTemplate'">
+            <bp-end-point [options]="item.context" [annotationConfig]="item.context.context" [isFromEndPoint]="item.context.context.isFromEndPoint"></bp-end-point>
+          </ng-container>
           <ng-container *ngSwitchCase="'cursorTemplate'">
             <bp-cursor [templateConfig]="item.context.templateConfig"></bp-cursor>
           </ng-container>

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
@@ -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
@@ -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
@@ -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<EndPointOptions> = {}) {
+        Object.assign(this, config);
+    }
+}
+
+@Component({
+    selector: 'bp-end-point:not(a)',
+    template: '<div class="end-point" [ngStyle]="divStyle"></div>',
+    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
@@ -120,6 +120,12 @@ export class FamDiagramComponent extends BaseDiagramComponent implements FamConf
   @Input() levelTitleFontStyle: string = "normal";
   @Input() levelTitleTemplate: TemplateRef<any> | null = null;
   @Input() levelBackgroundTemplate: TemplateRef<any> | null = null;
+  @Input() endPointTemplate: TemplateRef<any> | 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
@@ -115,6 +115,12 @@ export class OrgDiagramComponent extends BaseDiagramComponent implements OrgConf
   @Input() levelTitleFontStyle: string = "normal";
   @Input() levelTitleTemplate: TemplateRef<any> | null = null;
   @Input() levelBackgroundTemplate: TemplateRef<any> | null = null;
+  @Input() endPointTemplate: TemplateRef<any> | 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
@@ -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
@@ -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
@@ -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
@@ -9,6 +9,7 @@ <h1>On-screen Connector Annotation</h1>
 <div class="sample">
     <org-diagram 
         [items]="items"
+        [showEndPoints]=Enabled.Auto
         [annotations]="annotations"
         [pageFitMode]=PageFitMode.None
         [cursorItem]=0