From 4ddf977b909282cb77e2b0a492544acc8b205d35 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Antonio=20Gonz=C3=A1lez=20Viegas?= Date: Thu, 17 Oct 2024 16:47:19 +0200 Subject: [PATCH] feat(front): improve highlighter event handling --- packages/front/package.json | 4 +- .../front/src/fragments/Highlighter/index.ts | 44 ++++++++++++------- yarn.lock | 4 +- 3 files changed, 33 insertions(+), 19 deletions(-) diff --git a/packages/front/package.json b/packages/front/package.json index 095426c3..466ad729 100644 --- a/packages/front/package.json +++ b/packages/front/package.json @@ -1,7 +1,7 @@ { "name": "@thatopen/components-front", "description": "Collection of frontend tools to author BIM apps.", - "version": "2.4.0-alpha.2", + "version": "2.4.0-alpha.4", "author": "That Open Company", "contributors": [ "Antonio Gonzalez Viegas (https://github.com/agviegas)", @@ -47,7 +47,7 @@ "web-ifc": "0.0.59" }, "dependencies": { - "@thatopen/components": ">=2.4.0-alpha.1", + "@thatopen/components": ">=2.4.0-alpha.3", "camera-controls": "2.7.3", "dexie": "^4.0.4", "earcut": "^2.2.4", diff --git a/packages/front/src/fragments/Highlighter/index.ts b/packages/front/src/fragments/Highlighter/index.ts index 47450a0a..e20f5cb8 100644 --- a/packages/front/src/fragments/Highlighter/index.ts +++ b/packages/front/src/fragments/Highlighter/index.ts @@ -5,13 +5,13 @@ import { FragmentIdMap, FragmentMesh } from "@thatopen/fragments"; import { EdgesPlane, IndexFragmentMap } from "../../core"; import { FillHighlighter } from "./src"; -// TODO: Clean up and document - /** * Interface defining the events that the Highlighter class can trigger. Each highlighter has its own set of events, identified by the highlighter name. */ export interface HighlightEvents { [highlighterName: string]: { + /** Event triggered before a fragment is highlighted, giving the last selection. */ + onBeforeHighlight: OBC.Event; /** Event triggered when a fragment is highlighted. */ onHighlight: OBC.Event; /** Event triggered when a fragment is cleared. */ @@ -44,7 +44,10 @@ export interface HighlighterConfig { /** * This component allows highlighting and selecting fragments in a 3D scene. 📕 [Tutorial](https://docs.thatopen.com/Tutorials/Components/Front/Highlighter). 📘 [API](https://docs.thatopen.com/api/@thatopen/components-front/classes/Highlighter). */ -export class Highlighter extends OBC.Component implements OBC.Disposable { +export class Highlighter + extends OBC.Component + implements OBC.Disposable, OBC.Eventable +{ /** * A unique identifier for the component. * This UUID is used to register the component within the Components system. @@ -108,14 +111,17 @@ export class Highlighter extends OBC.Component implements OBC.Disposable { autoToggle = new Set(); /** Position of the mouse on mouseDown. */ - private mouseDownPosition = {x: 0, y: 0}; + private mouseDownPosition = { x: 0, y: 0 }; /** Threshhold on how much the mouse have to move until its considered movement */ - mouseMoveThreshold = 5 + mouseMoveThreshold = 5; /** If defined, only the specified elements will be selected by the specified style. */ selectable: { [name: string]: FragmentIdMap } = {}; + /** Manager to easily toggle and reset all events. */ + eventManager = new OBC.EventManager(); + // Highlights the clipping fills of the fragments, if any private _fills = new FillHighlighter(); @@ -132,6 +138,8 @@ export class Highlighter extends OBC.Component implements OBC.Disposable { constructor(components: OBC.Components) { super(components); this.components.add(Highlighter.uuid, this); + this.eventManager.list.add(this.onSetup); + this.eventManager.list.add(this.onDisposed); } /** {@link Disposable.dispose} */ @@ -143,13 +151,13 @@ export class Highlighter extends OBC.Component implements OBC.Disposable { this.selection = {}; for (const name in this.events) { - this.events[name].onClear.reset(); - this.events[name].onHighlight.reset(); + const { onClear, onHighlight } = this.events[name]; + this.eventManager.list.delete(onClear); + this.eventManager.list.delete(onHighlight); } - this.onSetup.reset(); - this.events = {}; + this.onDisposed.trigger(Highlighter.uuid); - this.onDisposed.reset(); + this.eventManager.reset(); } /** @@ -167,10 +175,15 @@ export class Highlighter extends OBC.Component implements OBC.Disposable { } this.colors.set(name, color); this.selection[name] = {}; + const onHighlight = new OBC.Event(); + const onBeforeHighlight = new OBC.Event(); + const onClear = new OBC.Event(); this.events[name] = { - onHighlight: new OBC.Event(), - onClear: new OBC.Event(), + onHighlight, + onClear, + onBeforeHighlight, }; + this.eventManager.add([onClear, onHighlight]); } /** @@ -331,6 +344,8 @@ export class Highlighter extends OBC.Component implements OBC.Disposable { ) { if (!this.enabled) return; + this.events[name].onBeforeHighlight.trigger(this.selection[name]); + if (removePrevious) { this.clear(name); } @@ -637,9 +652,8 @@ export class Highlighter extends OBC.Component implements OBC.Disposable { private onMouseDown = (e: MouseEvent) => { if (!this.enabled) return; - this.mouseDownPosition = {x: e.clientX, y: e.clientY} + this.mouseDownPosition = { x: e.clientX, y: e.clientY }; this._mouseState.down = true; - }; private onMouseUp = async (event: MouseEvent) => { @@ -677,7 +691,7 @@ export class Highlighter extends OBC.Component implements OBC.Disposable { this.clear(hoverName); return; } - + // If the distance is greater than the threshold, set dragging to true if (moveDistance > this.mouseMoveThreshold) { this._mouseState.moved = this._mouseState.down; diff --git a/yarn.lock b/yarn.lock index 356b950a..71428aa8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -621,7 +621,7 @@ __metadata: version: 0.0.0-use.local resolution: "@thatopen/components-front@workspace:packages/front" dependencies: - "@thatopen/components": ">=2.3.0" + "@thatopen/components": ">=2.4.0-alpha.2" "@thatopen/fragments": ">=2.4.0-alpha.1" "@thatopen/ui": ~2.3.0 "@thatopen/ui-obc": ~2.3.0 @@ -641,7 +641,7 @@ __metadata: languageName: unknown linkType: soft -"@thatopen/components@>=2.3.0, @thatopen/components@workspace:packages/core": +"@thatopen/components@>=2.4.0-alpha.2, @thatopen/components@workspace:packages/core": version: 0.0.0-use.local resolution: "@thatopen/components@workspace:packages/core" dependencies: