Support opacity for states and symbol annotations

Signed-off-by: Patrick Tasse <patrick.tasse@ericsson.com>
eclipse-cdt-cloud · Jun 22, 2021 · ee7a95c · ee7a95c
1 parent 9e62be1
commit ee7a95c
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 10 deletions.
diff --git a/timeline-chart/src/components/time-graph-annotation.ts b/timeline-chart/src/components/time-graph-annotation.ts
@@ -11,8 +11,8 @@ export interface TimeGraphAnnotationStyle extends TimeGraphComponentOptions {
     symbol?: string
     size?: number
     color?: number
+    opacity?: number
     verticalAlign?: string
-    opacity?:number
 }
 
 /*
@@ -88,7 +88,7 @@ export class TimeGraphAnnotationComponent extends TimeGraphComponent<TimelineCha
 
     private drawCircle(x: number, y: number, radius: number): void {
         this._displayObject.clear();
-        this._displayObject.beginFill(this._style.color);
+        this._displayObject.beginFill(this._style.color, this.getPIXIOpacity(this._style.opacity));
         this._displayObject.lineStyle(0);
         this._displayObject.drawCircle(x, y, radius);
         this._displayObject.endFill();
@@ -98,7 +98,7 @@ export class TimeGraphAnnotationComponent extends TimeGraphComponent<TimelineCha
     // thickness = 20
     private drawCross(x: number, y: number, size: number): void {
         this._displayObject.clear();
-        this._displayObject.beginFill(this._style.color);
+        this._displayObject.beginFill(this._style.color, this.getPIXIOpacity(this._style.opacity));
         this._displayObject.lineStyle(0);
         // Root of two thickness
         const thickness = 0.14 * size;
@@ -125,7 +125,7 @@ export class TimeGraphAnnotationComponent extends TimeGraphComponent<TimelineCha
     // thickness = 20%
     private drawPlus(x: number, y: number, size: number): void {
         this._displayObject.clear();
-        this._displayObject.beginFill(this._style.color);
+        this._displayObject.beginFill(this._style.color, this.getPIXIOpacity(this._style.opacity));
         this._displayObject.lineStyle(0);
         // half thickness
         const thickness = 0.1 * size;
@@ -150,7 +150,7 @@ export class TimeGraphAnnotationComponent extends TimeGraphComponent<TimelineCha
 
     private drawDiamond(x: number, y: number, size: number): void {
         this._displayObject.clear();
-        this._displayObject.beginFill(this._style.color);
+        this._displayObject.beginFill(this._style.color, this.getPIXIOpacity(this._style.opacity));
         this._displayObject.lineStyle(0);
         this._displayObject.drawPolygon([
             x - size, y,
@@ -165,7 +165,7 @@ export class TimeGraphAnnotationComponent extends TimeGraphComponent<TimelineCha
 
     private drawTriangle(x: number, y: number, size: number): void {
         this._displayObject.clear();
-        this._displayObject.beginFill(this._style.color);
+        this._displayObject.beginFill(this._style.color, this.getPIXIOpacity(this._style.opacity));
         this._displayObject.lineStyle(0);
         this._displayObject.drawPolygon([
             x - size, y + size,
@@ -178,7 +178,7 @@ export class TimeGraphAnnotationComponent extends TimeGraphComponent<TimelineCha
 
     private drawInvertedTriangle(x: number, y: number, size: number): void {
         this._displayObject.clear();
-        this._displayObject.beginFill(this._style.color);
+        this._displayObject.beginFill(this._style.color, this.getPIXIOpacity(this._style.opacity));
         this._displayObject.lineStyle(0);
         this._displayObject.drawPolygon([
             x + size, y - size,

diff --git a/timeline-chart/src/components/time-graph-component.ts b/timeline-chart/src/components/time-graph-component.ts
@@ -135,7 +135,7 @@ export abstract class TimeGraphComponent<T> {
      * 
      * @param opacity a number meaning the desired opacity. If it is undefined, assume it is 100% opacity
      */
-    private getPIXIOpacity(opacity: number | undefined): number | undefined {
+    protected getPIXIOpacity(opacity: number | undefined): number | undefined {
         return (opacity !== undefined ? opacity == 0 ? 0.001 : opacity : 1);
     }
 

diff --git a/timeline-chart/src/components/time-graph-state.ts b/timeline-chart/src/components/time-graph-state.ts
@@ -6,6 +6,7 @@ import * as PIXI from "pixi.js-legacy";
 
 export interface TimeGraphStateStyle {
     color?: number
+    opacity?: number
     height?: number
     borderWidth?: number
     borderColor?: number
@@ -39,6 +40,7 @@ export class TimeGraphStateComponent extends TimeGraphComponent<TimelineChart.Ti
         const width = Math.max(1, this.range.end - this.range.start);
         this._options = {
             color: _style.color,
+            opacity: _style.opacity,
             height: this._height,
             position: this._position,
             width,
@@ -125,6 +127,9 @@ export class TimeGraphStateComponent extends TimeGraphComponent<TimelineChart.Ti
         if (style.color !== undefined) {
             this._options.color = style.color;
         }
+        if (style.opacity !== undefined) {
+            this._options.opacity = style.opacity;
+        }
         if (style.height !== undefined) {
             this._options.height = style.height;
         }

diff --git a/timeline-chart/src/layer/time-graph-range-events-layer.ts b/timeline-chart/src/layer/time-graph-range-events-layer.ts
@@ -26,8 +26,8 @@ export class TimeGraphRangeEventsLayer extends TimeGraphLayer {
         const width = end - start;
         const elementStyle = this.providers.rowAnnotationStyleProvider ? this.providers.rowAnnotationStyleProvider(rangeEvent) : undefined;
         const rangeEventComponent = new TimeGraphRectangle({
-            color: (elementStyle && elementStyle.color) || 0xFF0000,
-            opacity: (elementStyle && elementStyle.opacity) || 0.2,
+            color: (elementStyle ? elementStyle.color : 0x000000),
+            opacity: (elementStyle ? elementStyle.opacity : 1.0),
             position: {
                 x: start,
                 y: 0