From b1ef6ce3dc36fa3d3738647010225910839296fa Mon Sep 17 00:00:00 2001 From: Matthew Khouzam Date: Fri, 23 Oct 2020 15:42:24 -0400 Subject: [PATCH] Make all opacity levels work with PIXIjs 5.0 Clamp values to range that is acceptable to PIXIjs 5. Signed-off-by: Matthew Khouzam --- .../src/components/time-graph-component.ts | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/timeline-chart/src/components/time-graph-component.ts b/timeline-chart/src/components/time-graph-component.ts index 1b4f031..48b2b44 100644 --- a/timeline-chart/src/components/time-graph-component.ts +++ b/timeline-chart/src/components/time-graph-component.ts @@ -71,7 +71,7 @@ export abstract class TimeGraphComponent { protected rect(opts: TimeGraphStyledRect) { const { position, width, height, color, opacity, borderColor, borderWidth } = opts; this.displayObject.lineStyle(borderWidth || 0, borderColor || 0x000000); - this.displayObject.beginFill((color || 0xffffff), (opacity !== undefined ? opacity : 1)); + this.displayObject.beginFill((color || 0xffffff), this.getPIXIOpacity(opacity)); this.displayObject.drawRect(position.x + 0.5, position.y + 0.5, width, height); this.displayObject.endFill(); } @@ -79,7 +79,7 @@ export abstract class TimeGraphComponent { protected rectTruncated(opts: TimeGraphStyledRect) { const { position, width, height, color, opacity, borderColor, borderWidth } = opts; this.displayObject.lineStyle(borderWidth || 0, borderColor || 0x000000); - this.displayObject.beginFill((color || 0xffffff), (opacity !== undefined ? opacity : 1)); + this.displayObject.beginFill((color || 0xffffff), this.getPIXIOpacity(opacity)); if (width > 20) { const xpos = position.x + 0.5; const ypos = position.y + 0.5; @@ -96,7 +96,7 @@ export abstract class TimeGraphComponent { protected roundedRect(opts: TimeGraphStyledRect) { const { position, width, height, color, opacity, borderColor, borderWidth, borderRadius } = opts; this.displayObject.lineStyle(borderWidth || 0, borderColor || 0x000000); - this.displayObject.beginFill((color || 0xffffff), (opacity !== undefined ? opacity : 1)); + this.displayObject.beginFill((color || 0xffffff), this.getPIXIOpacity(opacity)); this.displayObject.drawRoundedRect(position.x + 0.5, position.y + 0.5, width, height, borderRadius || 0); @@ -105,18 +105,27 @@ export abstract class TimeGraphComponent { protected hline(opts: TimeGraphHorizontalLine) { const { position, width, thickness, color, opacity } = opts; - this.displayObject.lineStyle(thickness || 1, color || 0x000000, (opacity !== undefined ? opacity : 1)); + this.displayObject.lineStyle(thickness || 1, color || 0x000000, this.getPIXIOpacity(opacity)); this.displayObject.moveTo(position.x, position.y + 0.5); this.displayObject.lineTo(position.x + width, position.y + 0.5); } protected vline(opts: TimeGraphVerticalLine) { const { position, height, thickness, color, opacity } = opts; - this.displayObject.lineStyle(thickness || 1, color || 0x000000, (opacity !== undefined ? opacity : 1)); + this.displayObject.lineStyle(thickness || 1, color || 0x000000, this.getPIXIOpacity(opacity)); this.displayObject.moveTo(position.x + 0.5, position.y); this.displayObject.lineTo(position.x + 0.5, position.y + height); } + /** + * Get the PIXIjs friendly opacity. This is a workaround to PIXIjs 5 setting opacity to 0 meaning interractions are not recognized. + * + * @param opacity a number meaning the desired opacity. If it is undefined, assume it is 100% opacity + */ + private getPIXIOpacity(opacity: number | undefined): number | undefined { + return (opacity !== undefined ? opacity == 0 ? 0.001 : opacity : 1); + } + addEvent(event: TimeGraphInteractionType, handler: TimeGraphInteractionHandler, displayObject: PIXI.DisplayObject) { displayObject.interactive = true; displayObject.on(event, ((e: PIXI.InteractionEvent) => {