@hpcc-js/common 3.5.3 → 3.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/common",
-    "version": "3.5.3",
+    "version": "3.6.0",
     "description": "hpcc-js - Viz Common",
     "type": "module",
     "main": "./dist/index.umd.cjs",
@@ -88,5 +88,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "0289b8552e19395a8da9b70a154821cf70ce42e7"
+    "gitHead": "e26c95239fec90e34e31c16a17bc1522e1086f40"
 }

package/src/SVGWidget.ts

@@ -92,6 +92,7 @@ const intersectCircleLine = function (c: Point, r: number, a1: Point, a2: Point)
 };
 
 export class SVGGlowFilter {
+    protected id;
     protected filter;
     protected feOffset;
     protected feColorMatrix;
@@ -99,6 +100,7 @@ export class SVGGlowFilter {
     protected feBlend;
 
     constructor(target, id: string) {
+        this.id = id;
         this.filter = target.append("filter")
             .attr("id", id)
             .attr("width", "130%")
@@ -136,8 +138,14 @@ export class SVGGlowFilter {
         ].join(" ");
     }
 
+    enable(enable: boolean) {
+        this.filter.attr("id", enable ? this.id : `disabled_${this.id}`);
+        return this;
+    }
+
     update(color: string) {
         this.feColorMatrix.attr("values", this.rgb2ColorMatrix(color));
+        return this;
     }
 }
 
@@ -147,7 +155,7 @@ export class SVGWidget extends Widget {
     protected _boundingBox;
     protected transition;
     protected _drawStartPos: "center" | "origin";
-    protected _svgSelectionFilter;
+    protected _svgSelectionFilter: SVGGlowFilter;
     protected _parentRelativeDiv;
     protected _parentOverlay;
 
@@ -278,6 +286,10 @@ export class SVGWidget extends Widget {
         return retVal;
     }
 
+    get parentRelativeDiv() {
+        return this._parentRelativeDiv;
+    }
+
     parentOverlay() {
         return this._parentOverlay;
     }
@@ -289,7 +301,10 @@ export class SVGWidget extends Widget {
     update(domNode, element) {
         super.update(domNode, element);
         if (this._svgSelectionFilter) {
-            this._svgSelectionFilter.update(this.selectionGlowColor());
+            this._svgSelectionFilter
+                .enable(this.selectionGlow())
+                .update(this.selectionGlowColor())
+                ;
         }
     }
 
@@ -558,8 +573,11 @@ export class SVGWidget extends Widget {
 SVGWidget.prototype._class += " common_SVGWidget";
 
 export interface SVGWidget {
+    selectionGlow(): boolean;
+    selectionGlow(_: boolean): this;
     selectionGlowColor(): string;
     selectionGlowColor(_: string): this;
 }
 
+SVGWidget.prototype.publish("selectionGlow", true, "boolean", "Selection Glow");
 SVGWidget.prototype.publish("selectionGlowColor", "red", "html-color", "Selection Glow Color");

package/src/TitleBar.css

@@ -11,27 +11,39 @@
     margin: 0px;
     white-space: nowrap;
     line-height: 28px;
-    z-index:1;
+    z-index: 1;
 }
 
 .common_IconBar .icon-bar a {
-    text-align: center; /* Center-align text */
+    position: relative;
+    z-index: 0;
+    /* Center-align text */
+    text-align: center;
     padding-top: 4px;
     padding-left: 2px;
     padding-right: 2px;
     padding-bottom: 4px;
-    transition: all 0.3s ease; /* Add transition for hover effects */
-    color: darkgray; /* White text color */
+    /* Add transition for hover effects */
+    transition: all 0.3s ease;
+    /* White text color */
+    color: darkgray;
+}
+
+.common_IconBar .icon-bar a:focus,
+.common_IconBar .icon-bar a:focus-visible {
+    outline: 2px solid #0078d4;
+    outline-offset: 2px;
+    z-index: 2;
 }
 
 .common_IconBar .icon-bar a.disabled {
     opacity: 0.3;
     pointer-events: none;
-    color: darkgray; 
+    color: darkgray;
 }
 
 .common_IconBar .icon-bar a:hover {
-    background-color: whitesmoke; /* Add a hover color */
+    background-color: whitesmoke;
 }
 
 .common_IconBar .icon-bar a {
@@ -39,36 +51,38 @@
 }
 
 .common_IconBar .icon-bar a.selected {
-    background-color: #efe5e5; /* Add a hover color */
+    /* Add a hover color */
+    background-color: #efe5e5;
 }
 
+
 .common_IconBar .icon-bar div.spacer {
-    text-align: center; /* Center-align text */
-    height:28px;
+    text-align: center;
+    height: 28px;
     border-left-style: solid;
     border-left-width: 1px;
     border-left-color: transparent;
     padding-top: 0px;
-    padding-left: 2px;  
-    margin-left: 2px;  
+    padding-left: 2px;
+    margin-left: 2px;
     padding-bottom: 0px;
 }
 
 .common_IconBar .icon-bar div.spacer.vline {
     border-left-color: darkgray;
-    padding-left: 4px;  
-    margin-left: 4px;  
+    padding-left: 4px;
+    margin-left: 4px;
 }
 
 .common_IconBar .icon-bar a.spacer:hover {
     background-color: transparent;
 }
 
-.common_TitleBar > .title-title {
+.common_TitleBar>.title-title {
     margin: 4px;
 }
 
-.common_TitleBar > .icon-bar {
+.common_TitleBar>.icon-bar {
     margin: 4px;
 }
 
@@ -77,7 +91,8 @@
     position: static;
 
 }
-.common_TitleBar .data-count{
+
+.common_TitleBar .data-count {
     position: absolute;
     visibility: hidden;
 }
@@ -90,10 +105,11 @@
     font-size: 20px;
     font-weight: bold;
 }
+
 .common_TitleBar .description-text {
     padding: 0px;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
     font-weight: normal;
-}
+}

package/src/TitleBar.ts

@@ -24,6 +24,12 @@ export class Button extends HTMLWidget {
                 context.click();
                 d3Event.preventDefault();
             })
+            .on("keydown", function (this: HTMLElement) {
+                if (d3Event.key === " " || d3Event.key === "Spacebar" || d3Event.code === "Space" || d3Event.key === "Enter") {
+                    this.click();
+                    d3Event.preventDefault();
+                }
+            })
             .on("mousemove", this.mouseMove)
             .on("mouseout", this.mouseOut)
             .append("i")

package/types/SVGWidget.d.ts

@@ -10,6 +10,7 @@ type Rect = {
     height: number;
 };
 export declare class SVGGlowFilter {
+    protected id: any;
     protected filter: any;
     protected feOffset: any;
     protected feColorMatrix: any;
@@ -17,14 +18,15 @@ export declare class SVGGlowFilter {
     protected feBlend: any;
     constructor(target: any, id: string);
     rgb2ColorMatrix(color: string): string;
-    update(color: string): void;
+    enable(enable: boolean): this;
+    update(color: string): this;
 }
 export declare class SVGWidget extends Widget {
     static _class: string;
     protected _boundingBox: any;
     protected transition: any;
     protected _drawStartPos: "center" | "origin";
-    protected _svgSelectionFilter: any;
+    protected _svgSelectionFilter: SVGGlowFilter;
     protected _parentRelativeDiv: any;
     protected _parentOverlay: any;
     constructor();
@@ -44,6 +46,7 @@ export declare class SVGWidget extends Widget {
     svgGlowID(): string;
     target(): null | HTMLElement | SVGElement;
     target(_: null | string | HTMLElement | SVGElement): this;
+    get parentRelativeDiv(): any;
     parentOverlay(): any;
     enter(domNode: any, element: any): void;
     update(domNode: any, element: any): void;
@@ -70,6 +73,8 @@ export declare class SVGWidget extends Widget {
     _fixIEMarkers(element?: any): void;
 }
 export interface SVGWidget {
+    selectionGlow(): boolean;
+    selectionGlow(_: boolean): this;
     selectionGlowColor(): string;
     selectionGlowColor(_: string): this;
 }