Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handle rubberbands with RXJS's subjects prototype #392

Draft
wants to merge 5 commits into
base: dev
Choose a base branch
from
Draft
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
refactor(figures): use subject to emit rubberband changes
  • Loading branch information
GhislainJ committed Jun 20, 2024
commit e82f3661b6b400e50d2b669d0c17225d2f42a53b
11 changes: 8 additions & 3 deletions src/axes.ts
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@ import { Vertex, Shape } from "./baseShape"
import { Rect, Point } from "./primitives"
import { TextParams, Text, RubberBand } from "./shapes"
import { EventEmitter } from "events"
import { onAxisSelection, rubberbandChange } from "./interactions"

export class TitleSettings {
constructor(
@@ -76,6 +77,10 @@ export class Axis extends Shape {
this.updateOffsetTicks();
this.offsetTitle = 0;
this.title = new Text(this.titleText, new Vertex(0, 0), {});

rubberbandChange.subscribe((rubberBand) => {
onAxisSelection.next([this, rubberBand]);
})
};

public get drawLength(): number {
@@ -621,7 +626,7 @@ export class Axis extends Shape {
this.updateRubberBand();
context.setTransform(canvasMatrix);
this.rubberBand.draw(context);
if (this.rubberBand.isClicked) this.emitter.emit("rubberBandChange", this.rubberBand);
if (this.rubberBand.isClicked) rubberbandChange.next(this.rubberBand);
}

protected mouseTranslate(mouseDown: Vertex, mouseCoords: Vertex): void { }
@@ -639,7 +644,7 @@ export class Axis extends Shape {
private clickOnArrow(mouseDown: Vertex): void {
this.is_drawing_rubberband = true; // OLD
this.rubberBand.isHovered ? this.rubberBand.mouseDown(mouseDown) : this.rubberBand.reset();
this.emitter.emit("rubberBandChange", this.rubberBand);
rubberbandChange.next(this.rubberBand);
}

private clickOnDrawnPath(mouseDown: Vertex): void {
@@ -676,7 +681,7 @@ export class Axis extends Shape {
this.title.mouseUp(false);
this.title.isClicked = false;
this.rubberBand.mouseUp(keepState);
if (this.is_drawing_rubberband) this.emitter.emit("rubberBandChange", this.rubberBand);
if (this.is_drawing_rubberband) rubberbandChange.next(this.rubberBand);
this.is_drawing_rubberband = false;
}

12 changes: 6 additions & 6 deletions src/figures.ts
Original file line number Diff line number Diff line change
@@ -10,7 +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"
import { HighlightData, rubberbandChange } from "./interactions"

export class Figure extends RemoteFigure {
constructor(
@@ -86,7 +86,7 @@ export class Figure extends RemoteFigure {
if (thisAxis.name == otherAxis.name && thisAxis.name != "number") {
otherAxis.rubberBand.minValue = thisAxis.rubberBand.minValue;
otherAxis.rubberBand.maxValue = thisAxis.rubberBand.maxValue;
otherAxis.emitter.emit("rubberBandChange", otherAxis.rubberBand);
rubberbandChange.next(otherAxis.rubberBand);
}
})
})
@@ -235,9 +235,9 @@ export class Frame extends Figure {
return [new Vertex(this.axes[0].rubberBand.minValue, this.axes[1].rubberBand.minValue), new Vertex(this.axes[0].rubberBand.maxValue, this.axes[1].rubberBand.maxValue)]
}

public activateSelection(emittedRubberBand: RubberBand, index: number): void {
super.activateSelection(emittedRubberBand, index)
this.selectionBox.rubberBandUpdate(emittedRubberBand, ["x", "y"][index]);
public activateSelection(axis: Axis, rubberBand: RubberBand): void {
super.activateSelection(axis, rubberBand)
this.selectionBox.rubberBandUpdate(rubberBand, ["x", "y"][this.getAxisIndex(axis)]);
}
}

@@ -417,7 +417,7 @@ export class Histogram extends Frame {
if (this.axes[0].name == otherAxis.name) {
otherAxis.rubberBand.minValue = this.axes[0].rubberBand.minValue;
otherAxis.rubberBand.maxValue = this.axes[0].rubberBand.maxValue;
otherAxis.emitter.emit("rubberBandChange", otherAxis.rubberBand);
rubberbandChange.next(otherAxis.rubberBand);
}
})
}
5 changes: 5 additions & 0 deletions src/interactions.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { Subject } from "rxjs"
import { RubberBand } from "./shapes";
import { Axis } from "./axes";

export interface HighlightData {
referencePath: string,
@@ -7,3 +9,6 @@ export interface HighlightData {
}

export const highlightShape: Subject<HighlightData> = new Subject();

export const rubberbandChange: Subject<RubberBand> = new Subject();
export const onAxisSelection: Subject<[Axis, RubberBand]> = new Subject();
34 changes: 17 additions & 17 deletions src/multiplot.ts
Original file line number Diff line number Diff line change
@@ -176,12 +176,12 @@ export class Multiplot {

private activateAxisEvents(figure: Figure): void {
figure.axes.forEach(axis => axis.emitter.on('axisStateChange', e => figure.axisChangeUpdate(e)));
figure.axes.forEach((axis, index) => {
axis.emitter.on('rubberBandChange', e => {
figure.activateSelection(e, index);
this.isSelecting = true;
})
})
// figure.axes.forEach((axis, index) => {
// axis.emitter.on('rubberBandChange', e => {
// figure.activateSelection(e, index);
// this.isSelecting = true;
// })
// })
}

public selectionOn(): void {
@@ -332,16 +332,16 @@ export class Multiplot {
this.figures.forEach(figure => figure.axes.forEach(axis => axis.emitter.on('axisStateChange', e => figure.axisChangeUpdate(e))));
}

private listenRubberBandChange(): void {
this.figures.forEach(figure => {
figure.axes.forEach((axis, index) => {
axis.emitter.on('rubberBandChange', e => {
figure.activateSelection(e, index);
this.isSelecting = true;
})
})
})
}
// private listenRubberBandChange(): void {
// this.figures.forEach(figure => {
// figure.axes.forEach((axis, index) => {
// axis.emitter.on('rubberBandChange', e => {
// figure.activateSelection(e, index);
// this.isSelecting = true;
// })
// })
// })
// }

private keyDownDrawer(e: KeyboardEvent, ctrlKey: boolean, shiftKey: boolean, spaceKey: boolean): [boolean, boolean, boolean] {
if (e.key == "Control") {
@@ -474,7 +474,7 @@ export class Multiplot {

this.listenAxisStateChange();

this.listenRubberBandChange();
// this.listenRubberBandChange();

window.addEventListener('keydown', e => [ctrlKey, shiftKey, spaceKey] = this.keyDownDrawer(e, ctrlKey, shiftKey, spaceKey));

18 changes: 16 additions & 2 deletions src/remoteFigure.ts
Original file line number Diff line number Diff line change
@@ -8,6 +8,7 @@ import { RubberBand, SelectionBox } from "./shapes"
import { Axis } from "./axes"
import { PointSet, ShapeCollection, GroupCollection } from "./collections"
import { DataInterface } from "./dataInterfaces"
import { onAxisSelection } from "./interactions"

export class RemoteFigure extends Rect {
public context: CanvasRenderingContext2D;
@@ -80,6 +81,8 @@ export class RemoteFigure extends Rect {
this.relativeObjects = new GroupCollection();
this.absoluteObjects = new GroupCollection();
this.setAxisVisibility(data);

onAxisSelection.subscribe(([axis, rubberBand]) => this.activateSelection(axis, rubberBand))
}

get scale(): Vertex { return new Vertex(this.relativeMatrix.a, this.relativeMatrix.d)}
@@ -651,7 +654,15 @@ export class RemoteFigure extends Rect {
this.translation = translation;
}

public activateSelection(emittedRubberBand: RubberBand, index: number): void { this.is_drawing_rubber_band = true }
public activateSelection(axis: Axis, rubberBand: RubberBand): void {
console.log(this, axis.name, rubberBand.attributeName)
if (this.getAxisIndex(axis) > -1) this.is_drawing_rubber_band = true
}

protected getAxisIndex(axis): number {
const axisNames = this.axes.map((a) => a.name)
return axisNames.indexOf(axis.name);
}

public shiftOnAction(canvas: HTMLElement): void {
this.isSelecting = true;
@@ -677,7 +688,10 @@ export class RemoteFigure extends Rect {
const canvas = document.getElementById(this.canvasID) as HTMLCanvasElement;
let ctrlKey = false; let shiftKey = false; let spaceKey = false;

this.axes.forEach((axis, index) => axis.emitter.on('rubberBandChange', e => this.activateSelection(e, index)));
// onAxisSelection.subscribe(([axis, rubberBand]) => {
// console.log("Mouse Listener Remote Figure")
// this.activateSelection(axis, rubberBand)
// });

this.axes.forEach(axis => axis.emitter.on('axisStateChange', e => this.axisChangeUpdate(e)));