Merge pull request #356 from Dessia-tech/feat/highlight-objects

Highlight Objects

Author: Tanguylo

CHANGELOG.md

@@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [0.23.0]
+
+### Feat
+- Add events (Subject) to emit shape hovering and clicking
+- Highlight shapes when corresponding function is called from wrapper software
+
 ### Fix
 - Remove offline mode
 

package-lock.json

@@ -9,19 +9,15 @@
     "build": "npm run instrument && NODE_ENV=production webpack --config webpack.config.js",
     "dev": "npm run instrument && NODE_ENV=development webpack --config webpack-dev.config.cjs",
     "cov": "npm run instrument && NODE_ENV=coverage webpack --config webpack-dev.config.cjs",
-
     "format": "prettier --write \"src/**/*.ts\"",
     "lint": "tslint -p tsconfig.json",
     "start": "http-server -a localhost -p 3030",
-
     "merge_reports": "mochawesome-merge cypress/results/*.json > cypress/results/full_report.json",
     "generate_mochawesome_report": "marge cypress/results/full_report.json --reportDir cypress/results",
-
     "cy:run-base": "cypress run --env type=base --browser firefox",
     "cy:run-actual": "node ./cypress_run_report.cjs",
     "cy:run-open": "cypress open --env type=actual",
     "cy:open": "npm run cov & start-server-and-test start http-get://localhost:3030 cy:run-open",
-
     "test": "npm run cov && start-server-and-test start http-get://localhost:3030 cy:run-actual",
     "base-test": "npm run cov && start-server-and-test start http-get://localhost:3030 cy:run-base"
   },
@@ -78,6 +74,7 @@
     "fs": "^0.0.1-security",
     "html-webpack-plugin": "^5.5.0",
     "ignore-errors": "^2.0.0",
+    "rxjs": "^7.8.1",
     "ts-loader": "^9.2.6",
     "typedoc": "^0.23.28",
     "webpack": "^5.75.0"

package.json

@@ -165,7 +165,6 @@ class Sample(ReferencedObject):
 
     def __init__(self, values, reference_path: str = "#", name: str = ""):
         self.values = values
-        self.reference_path = reference_path
         super().__init__(type_="sample", reference_path=reference_path, name=name)
 
     def to_dict(self, use_pointers: bool = True, memo=None, path: str = '#', id_method=True,

plot_data/core.py

@@ -2,6 +2,8 @@ import { DEFAULT_SHAPE_COLOR, HOVERED_SHAPE_COLOR, CLICKED_SHAPE_COLOR, SELECTED
 import { hslToArray, colorHsl } from "./colors"
 import { Hatching } from "./styles"
 import { DataInterface } from "./dataInterfaces"
+import { highlightShape } from "./interactions"
+
 
 export class Vertex {
   constructor(public x: number = 0, public y: number = 0) { }
@@ -82,16 +84,51 @@ export class InteractiveObject {
 
   public mouseClick: Vertex = null;
 
-  public isHovered: boolean = false;
-  public isClicked: boolean = false;
+  private _isHovered: boolean = false;
+  private _isClicked: boolean = false;
   public isSelected: boolean = false;
   public isScaled: boolean = true;
   public isFilled: boolean = true;
   public visible: boolean = true;
   public inFrame: boolean = true; // TODO: remove it
 
+  public referencePath: string = "#";
+
   constructor() { };
 
+  public get isHovered(): boolean{
+    return this._isHovered;
+  };
+  set isHovered(hovered: boolean) {
+    if (hovered !== this._isHovered && this.referencePath !== "#") {
+      // The first check is important, otherwise we fire the event every mouse move.
+      // The second is for dev purpose, should we keep it ?
+      const highlightData = {
+        referencePath: this.referencePath,
+        highlight: hovered,
+        select: false
+      }
+      highlightShape.next(highlightData);
+    }
+    this._isHovered = hovered;
+  }
+
+  public get isClicked(): boolean {
+    return this._isClicked;
+  }
+  set isClicked(clicked: boolean) {
+    if (clicked != this._isClicked && this.referencePath !== "#") {
+      // Same than isHovered
+      const highlightData = {
+        referencePath: this.referencePath,
+        highlight: clicked,
+        select: true
+      }
+      highlightShape.next(highlightData);
+    }
+    this._isClicked = clicked;
+  }
+
   public getBounds(): [Vertex, Vertex] { return [new Vertex(0, 1), new Vertex(0, 1)] }
 
   protected updateTooltipOrigin(matrix: DOMMatrix): void { }
@@ -161,7 +198,9 @@ export class InteractiveObject {
 
   public mouseDown(mouseDown: Vertex) { if (this.isHovered) this.mouseClick = mouseDown.copy() }
 
-  public mouseMove(context: CanvasRenderingContext2D, mouseCoords: Vertex): void { this.isHovered = this.isPointInShape(context, mouseCoords) }
+  public mouseMove(context: CanvasRenderingContext2D, mouseCoords: Vertex): void {
+    this.isHovered = this.isPointInShape(context, mouseCoords);
+  }
 
   public mouseUp(keepState: boolean): void {
     this.isClicked = this.isHovered ? !this.isClicked : (keepState ? this.isClicked : false);

src/baseShape.ts

@@ -6,6 +6,7 @@ export * from "./constants";
 export * from './figures';
 export * from "./shapeFunctions";
 export * from "./functions";
+export * from "./interactions";
 export * from "./multiplot";
 export * from "./primitives";
 export * from './remoteFigure';

src/core.ts

@@ -10,6 +10,7 @@ import { Axis, ParallelAxis } from "./axes"
 import { ShapeCollection, GroupCollection, PointSet } from "./collections"
 import { RemoteFigure } from "./remoteFigure"
 import { DataInterface } from "./dataInterfaces"
+import { HighlightData } from "./interactions"
 
 export class Figure extends RemoteFigure {
   constructor(
@@ -1170,6 +1171,21 @@ export class Draw extends Frame {
   public sendRubberBandsMultiplot(figures: Figure[]): void {}
 
   protected receiveRubberBandFromFigure(figure: Figure): void {}
+
+  public highlightFromReferencePath(highlightData: HighlightData) {
+    const highlight = highlightData.highlight;
+    const shapes = this.getShapesFromPath(highlightData.referencePath);
+    shapes.forEach((shape) => {
+      highlightData.select ?
+        shape.isClicked = highlight :
+        shape.isHovered = highlight;
+    });
+    this.draw();
+  }
+
+  private getShapesFromPath(referencePath: string): Shape[] {
+    return this.relativeObjects.shapes.filter((s) => s.referencePath === referencePath);
+  }
 }
 
 export class PrimitiveGroupContainer extends Draw {

src/figures.ts

@@ -0,0 +1,9 @@
+import { Subject } from "rxjs"
+
+export interface HighlightData {
+  referencePath: string,
+  highlight: boolean,
+  select: boolean
+}
+
+export const highlightShape: Subject<HighlightData> = new Subject();

src/interactions.ts

@@ -20,7 +20,8 @@ export function deserialize(data: { [key: string]: any }, scale: Vertex): Shape
   else if (data.type_ == "rectangle") shape = Rect.deserialize(data, scale);
   else if (data.type_ == "roundrectangle") shape = RoundRect.deserialize(data, scale);
   else throw new Error(`${data.type_} deserialization is not implemented.`);
-  shape.deserializeStyle(data)
+  shape.deserializeStyle(data);
+  shape.referencePath = data?.reference_path ?? "#";
   return shape
 }