- App.tsx: full navigation (Auth stack + Main tabs with 5 screens) - Auth: LoginScreen, RegisterScreen, ForgotPasswordScreen - HomeScreen: dashboard with IoT metrics, weather widget, alerts, quick actions, sensors - MapScreen: interactive map with layer toggles (6 layers) - MarketplaceScreen: categories (6), products (5), search - ChatScreen: AI chat with quick prompts (4), bot responses - ProfileScreen: user info, stats, menu (9 items), logout - AlertsScreen: alert list with severity, acknowledge - SensorsScreen: sensor list with type filters (6 types), search - ZonesScreen: zone cards with stats - SettingsScreen: language picker (FR/EN/ES/DE), privacy, about - Stores: iotStore (sensors, zones, alerts), notificationStore, uiStore + i18n - Hooks: useSensors, useAlerts, useNotifications, useLocation - Components: Card, Button, LoadingSpinner, ErrorBoundary, Header - Services: iotService, notificationService (with axios API client) - Utils: formatters (temp, AQI, noise, dates), validators (email, password, IBAN) - Theme: colors.ts with full design system (Blue Ocean palette) - Ditto: fixed MongoDB connection, new JWT secrets, official gateway image
173 lines
4.3 KiB
TypeScript
173 lines
4.3 KiB
TypeScript
import { State } from '../../State';
|
|
import { AdaptedEvent, Config } from '../interfaces';
|
|
|
|
import GestureHandler from './GestureHandler';
|
|
import RotationGestureDetector, {
|
|
RotationGestureListener,
|
|
} from '../detectors/RotationGestureDetector';
|
|
|
|
const ROTATION_RECOGNITION_THRESHOLD = Math.PI / 36;
|
|
|
|
export default class RotationGestureHandler extends GestureHandler {
|
|
private rotation = 0;
|
|
private velocity = 0;
|
|
|
|
private cachedAnchorX = 0;
|
|
private cachedAnchorY = 0;
|
|
|
|
private rotationGestureListener: RotationGestureListener = {
|
|
onRotationBegin: (_detector: RotationGestureDetector): boolean => true,
|
|
onRotation: (detector: RotationGestureDetector): boolean => {
|
|
const previousRotation: number = this.rotation;
|
|
this.rotation += detector.getRotation();
|
|
|
|
const delta = detector.getTimeDelta();
|
|
|
|
if (delta > 0) {
|
|
this.velocity = (this.rotation - previousRotation) / delta;
|
|
}
|
|
|
|
if (
|
|
Math.abs(this.rotation) >= ROTATION_RECOGNITION_THRESHOLD &&
|
|
this.currentState === State.BEGAN
|
|
) {
|
|
this.activate();
|
|
}
|
|
|
|
return true;
|
|
},
|
|
onRotationEnd: (_detector: RotationGestureDetector): void => {
|
|
this.end();
|
|
},
|
|
};
|
|
|
|
private rotationGestureDetector: RotationGestureDetector =
|
|
new RotationGestureDetector(this.rotationGestureListener);
|
|
|
|
public init(ref: number, propsRef: React.RefObject<unknown>): void {
|
|
super.init(ref, propsRef);
|
|
|
|
this.setShouldCancelWhenOutside(false);
|
|
}
|
|
|
|
public updateGestureConfig({ enabled = true, ...props }: Config): void {
|
|
super.updateGestureConfig({ enabled: enabled, ...props });
|
|
}
|
|
|
|
protected transformNativeEvent() {
|
|
return {
|
|
rotation: this.rotation ? this.rotation : 0,
|
|
anchorX: this.getAnchorX(),
|
|
anchorY: this.getAnchorY(),
|
|
velocity: this.velocity ? this.velocity : 0,
|
|
};
|
|
}
|
|
|
|
public getAnchorX(): number {
|
|
const anchorX = this.rotationGestureDetector.getAnchorX();
|
|
|
|
return anchorX ? anchorX : this.cachedAnchorX;
|
|
}
|
|
|
|
public getAnchorY(): number {
|
|
const anchorY = this.rotationGestureDetector.getAnchorY();
|
|
|
|
return anchorY ? anchorY : this.cachedAnchorY;
|
|
}
|
|
|
|
protected onPointerDown(event: AdaptedEvent): void {
|
|
this.tracker.addToTracker(event);
|
|
super.onPointerDown(event);
|
|
}
|
|
|
|
protected onPointerAdd(event: AdaptedEvent): void {
|
|
this.tracker.addToTracker(event);
|
|
super.onPointerAdd(event);
|
|
|
|
this.tryBegin();
|
|
this.rotationGestureDetector.onTouchEvent(event, this.tracker);
|
|
}
|
|
|
|
protected onPointerMove(event: AdaptedEvent): void {
|
|
if (this.tracker.getTrackedPointersCount() < 2) {
|
|
return;
|
|
}
|
|
|
|
if (this.getAnchorX()) {
|
|
this.cachedAnchorX = this.getAnchorX();
|
|
}
|
|
if (this.getAnchorY()) {
|
|
this.cachedAnchorY = this.getAnchorY();
|
|
}
|
|
|
|
this.tracker.track(event);
|
|
|
|
this.rotationGestureDetector.onTouchEvent(event, this.tracker);
|
|
|
|
super.onPointerMove(event);
|
|
}
|
|
|
|
protected onPointerOutOfBounds(event: AdaptedEvent): void {
|
|
if (this.tracker.getTrackedPointersCount() < 2) {
|
|
return;
|
|
}
|
|
|
|
if (this.getAnchorX()) {
|
|
this.cachedAnchorX = this.getAnchorX();
|
|
}
|
|
if (this.getAnchorY()) {
|
|
this.cachedAnchorY = this.getAnchorY();
|
|
}
|
|
|
|
this.tracker.track(event);
|
|
|
|
this.rotationGestureDetector.onTouchEvent(event, this.tracker);
|
|
|
|
super.onPointerOutOfBounds(event);
|
|
}
|
|
|
|
protected onPointerUp(event: AdaptedEvent): void {
|
|
super.onPointerUp(event);
|
|
this.tracker.removeFromTracker(event.pointerId);
|
|
this.rotationGestureDetector.onTouchEvent(event, this.tracker);
|
|
|
|
if (this.currentState !== State.ACTIVE) {
|
|
return;
|
|
}
|
|
|
|
if (this.currentState === State.ACTIVE) {
|
|
this.end();
|
|
} else {
|
|
this.fail();
|
|
}
|
|
}
|
|
|
|
protected onPointerRemove(event: AdaptedEvent): void {
|
|
super.onPointerRemove(event);
|
|
this.rotationGestureDetector.onTouchEvent(event, this.tracker);
|
|
this.tracker.removeFromTracker(event.pointerId);
|
|
}
|
|
|
|
protected tryBegin(): void {
|
|
if (this.currentState !== State.UNDETERMINED) {
|
|
return;
|
|
}
|
|
|
|
this.begin();
|
|
}
|
|
|
|
public activate(_force?: boolean): void {
|
|
super.activate();
|
|
}
|
|
|
|
protected onReset(): void {
|
|
if (this.currentState === State.ACTIVE) {
|
|
return;
|
|
}
|
|
|
|
this.rotation = 0;
|
|
this.velocity = 0;
|
|
this.rotationGestureDetector.reset();
|
|
}
|
|
}
|